
/* TyreRun v1.8 — dedicated Elementor compatibility layer.
   This file intentionally uses strong selectors and !important only where
   Elementor's generated flex/width rules otherwise override the prototype. */

body.elementor-page #main { width:100%; overflow:hidden; }
body.elementor-page .elementor-section { box-sizing:border-box; }
body.elementor-page .elementor-section > .elementor-container { box-sizing:border-box; }

/* HERO */
body.elementor-page .hero.elementor-section {
  min-height: 820px !important;
  background:
    linear-gradient(90deg,rgba(4,11,17,.96) 0%,rgba(4,11,17,.83) 42%,rgba(4,11,17,.48) 100%),
    linear-gradient(0deg,rgba(4,11,17,.68),rgba(4,11,17,.08)),
    url("https://images.unsplash.com/photo-1486006920555-c77dcf18193c?auto=format&fit=crop&w=2200&q=85") center 48%/cover no-repeat !important;
  color:#fff !important;
}
body.elementor-page .hero .elementor-container { width:min(var(--max),calc(100% - 48px)) !important; max-width:var(--max) !important; margin-inline:auto !important; }
body.elementor-page .hero > .elementor-container { display:grid !important; grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr) !important; gap:48px !important; align-items:end !important; }
body.elementor-page .hero > .elementor-container > .elementor-column { width:auto !important; max-width:none !important; min-width:0 !important; }
body.elementor-page .hero > .elementor-container > .elementor-column > .elementor-element-populated { width:100% !important; box-sizing:border-box !important; }
body.elementor-page .hero .elementor-widget-heading .elementor-heading-title { color:#fff !important; }
body.elementor-page .hero .elementor-widget-text-editor { color:inherit; }
body.elementor-page .hero .quote-panel { background:rgba(255,255,255,.98) !important; color:var(--ink) !important; border-radius:22px !important; padding:28px !important; max-width:450px !important; margin-left:auto !important; }

/* BENEFITS — use grid on the actual Elementor section and grid on each card. */
body.elementor-page .benefit-strip.elementor-section {
  background:var(--navy) !important;
  color:#fff !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
body.elementor-page .benefit-strip > .elementor-container {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  width:min(var(--max),calc(100% - 48px)) !important;
  max-width:var(--max) !important;
  margin-inline:auto !important;
  padding:0 !important;
}
body.elementor-page .benefit-strip > .elementor-container > .elementor-column {
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}
body.elementor-page .benefit-strip .benefit-item > .elementor-element-populated {
  display:grid !important;
  grid-template-columns:31px minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:13px !important;
  padding:22px 18px !important;
  min-height:76px !important;
  width:100% !important;
  box-sizing:border-box !important;
  border-right:1px solid rgba(255,255,255,.09) !important;
}
body.elementor-page .benefit-strip .benefit-item:last-child > .elementor-element-populated { border-right:0 !important; }
body.elementor-page .benefit-strip .benefit-item .elementor-widget { margin:0 !important; width:auto !important; }
body.elementor-page .benefit-strip .benefit-item .elementor-widget-text-editor { margin:0 !important; min-width:0 !important; }
body.elementor-page .benefit-strip .benefit-item .elementor-widget-text-editor .elementor-widget-container { margin:0 !important; padding:0 !important; min-width:0 !important; }
body.elementor-page .benefit-strip .benefit-item strong { display:block !important; font-size:12px !important; line-height:1.25 !important; white-space:normal !important; }
body.elementor-page .benefit-strip .benefit-item small { display:block !important; margin-top:3px !important; color:#89959e !important; font-size:9px !important; line-height:1.4 !important; white-space:normal !important; }
body.elementor-page .benefit-strip .benefit-icon { display:grid !important; place-items:center !important; width:31px !important; height:31px !important; }

/* Generic Elementor grid sections used by the homepage. */
body.elementor-page .service-grid.elementor-section > .elementor-container,
body.elementor-page .why-grid.elementor-section > .elementor-container,
body.elementor-page .process-grid.elementor-section > .elementor-container,
body.elementor-page .reviews-grid.elementor-section > .elementor-container,
body.elementor-page .advice-grid.elementor-section > .elementor-container {
  display:grid !important;
  width:min(var(--max),calc(100% - 48px)) !important;
  max-width:var(--max) !important;
  margin-inline:auto !important;
  padding:0 !important;
}
body.elementor-page .service-grid.elementor-section > .elementor-container { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:14px !important; }
body.elementor-page .why-grid.elementor-section > .elementor-container { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:1px !important; }
body.elementor-page .process-grid.elementor-section > .elementor-container { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
body.elementor-page .reviews-grid.elementor-section > .elementor-container { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:13px !important; }
body.elementor-page .advice-grid.elementor-section > .elementor-container { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:13px !important; }
body.elementor-page .service-grid > .elementor-container > .elementor-column,
body.elementor-page .why-grid > .elementor-container > .elementor-column,
body.elementor-page .process-grid > .elementor-container > .elementor-column,
body.elementor-page .reviews-grid > .elementor-container > .elementor-column,
body.elementor-page .advice-grid > .elementor-container > .elementor-column {
  width:auto !important; max-width:none !important; min-width:0 !important; margin:0 !important; padding:0 !important;
}
body.elementor-page .service-grid .elementor-element-populated,
body.elementor-page .why-grid .elementor-element-populated,
body.elementor-page .process-grid .elementor-element-populated,
body.elementor-page .reviews-grid .elementor-element-populated,
body.elementor-page .advice-grid .elementor-element-populated { box-sizing:border-box !important; }

/* Work grid has a custom two-row layout. */
body.elementor-page .work-grid.elementor-section > .elementor-container {
  display:grid !important;
  grid-template-columns:1.35fr .65fr .65fr !important;
  grid-template-rows:270px 270px !important;
  gap:12px !important;
  width:min(var(--max),calc(100% - 48px)) !important;
  max-width:var(--max) !important;
  margin-inline:auto !important;
  padding:0 !important;
}
body.elementor-page .work-grid > .elementor-container > .elementor-column { width:auto !important; max-width:none !important; min-width:0 !important; margin:0 !important; }

/* Keep cards filling their grid cells. */
body.elementor-page .service-grid .service-card,
body.elementor-page .why-grid .why-card,
body.elementor-page .process-grid .process-step,
body.elementor-page .reviews-grid .review-card,
body.elementor-page .advice-grid .advice-card,
body.elementor-page .work-grid .work-card { width:100% !important; height:100% !important; box-sizing:border-box !important; }

@media (max-width:1100px){
  body.elementor-page .hero > .elementor-container { grid-template-columns:1fr 1fr !important; }
  body.elementor-page .benefit-strip > .elementor-container { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  body.elementor-page .service-grid.elementor-section > .elementor-container { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  body.elementor-page .why-grid.elementor-section > .elementor-container,
  body.elementor-page .process-grid.elementor-section > .elementor-container { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  body.elementor-page .reviews-grid.elementor-section > .elementor-container,
  body.elementor-page .advice-grid.elementor-section > .elementor-container { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:767px){
  body.elementor-page .hero.elementor-section { min-height:auto !important; padding:130px 0 60px !important; }
  body.elementor-page .hero > .elementor-container { grid-template-columns:1fr !important; gap:35px !important; }
  body.elementor-page .benefit-strip > .elementor-container,
  body.elementor-page .service-grid.elementor-section > .elementor-container,
  body.elementor-page .why-grid.elementor-section > .elementor-container,
  body.elementor-page .process-grid.elementor-section > .elementor-container,
  body.elementor-page .reviews-grid.elementor-section > .elementor-container,
  body.elementor-page .advice-grid.elementor-section > .elementor-container { grid-template-columns:1fr !important; width:min(var(--max),calc(100% - 30px)) !important; }
  body.elementor-page .benefit-strip .benefit-item > .elementor-element-populated { padding:17px 10px !important; }
  body.elementor-page .work-grid.elementor-section > .elementor-container { grid-template-columns:1fr !important; grid-template-rows:auto !important; width:min(var(--max),calc(100% - 30px)) !important; }
}


/* v3.0 — Elementor Flexbox Container homepage compatibility */
body.elementor-page .tr-home-elementor-section.elementor-element {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  --e-con-grid-container-width: 100%;
}
body.elementor-page .tr-home-elementor-section.elementor-element > .elementor-element-populated,
body.elementor-page .tr-home-elementor-section.elementor-element > .elementor-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.elementor-page .tr-home-elementor-section .elementor-widget-html {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
body.elementor-page .tr-home-elementor-section .elementor-widget-html > .elementor-widget-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* The original prototype already owns the inner layout. Elementor should not add a second layout layer. */
body.elementor-page .tr-home-elementor-section .container-xl { box-sizing: border-box; }


/* v3.1: Homepage content uses Elementor Text Editor widgets instead of raw HTML widgets.
   This keeps the prototype markup/styles intact while giving editors a visual WYSIWYG panel. */
body.elementor-page .tr-home-html .elementor-text-editor,
body.elementor-page .tr-home-html .elementor-clearfix {
  width:100%;
}
body.elementor-page .tr-home-html .elementor-text-editor > :first-child { margin-top:0; }
body.elementor-page .tr-home-html .elementor-text-editor > :last-child { margin-bottom:0; }


/* TyreRun v3.7 — native Elementor Container styling.
   The homepage uses Flexbox Containers, so these selectors intentionally target
   the container classes rather than legacy .elementor-section/.elementor-column markup. */
body.elementor-page .tr-home-elementor-section { 
  position:relative !important; width:100vw !important; max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
  overflow:hidden !important; box-sizing:border-box !important;
}
body.elementor-page .tr-home-elementor-section.hero {
  min-height:820px !important; color:#fff !important;
  background:
    linear-gradient(90deg,rgba(4,11,17,.96) 0%,rgba(4,11,17,.83) 42%,rgba(4,11,17,.48) 100%),
    linear-gradient(0deg,rgba(4,11,17,.68),rgba(4,11,17,.08)),
    url("https://images.unsplash.com/photo-1486006920555-c77dcf18193c?auto=format&fit=crop&w=2200&q=85") center 48%/cover no-repeat !important;
  display:flex !important; align-items:center !important;
}
body.elementor-page .tr-home-elementor-section.hero::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; }
body.elementor-page .tr-home-elementor-section.hero > .elementor-container { width:100% !important; max-width:none !important; padding:0 !important; margin:0 !important; }
body.elementor-page .tr-home-elementor-section .hero-inner {
  position:relative !important; z-index:2 !important; width:min(var(--max),calc(100% - 48px)) !important;
  max-width:var(--max) !important; margin-inline:auto !important; padding:110px 0 70px !important;
  display:grid !important; grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr) !important;
  gap:48px !important; align-items:center !important; box-sizing:border-box !important;
}
body.elementor-page .tr-home-elementor-section .hero-copy,
body.elementor-page .tr-home-elementor-section .quote-panel { min-width:0 !important; width:100% !important; box-sizing:border-box !important; }
body.elementor-page .tr-home-elementor-section .hero-copy { align-self:center !important; }
body.elementor-page .tr-home-elementor-section .hero-copy .elementor-widget { margin-bottom:0 !important; }
body.elementor-page .tr-home-elementor-section .hero .hero-title .elementor-heading-title,
body.elementor-page .tr-home-elementor-section .hero-title { color:#fff !important; }
body.elementor-page .tr-home-elementor-section .hero-title { font-size:clamp(50px,6.5vw,82px) !important; line-height:.94 !important; letter-spacing:-.065em !important; font-weight:900 !important; margin:18px 0 0 !important; }
body.elementor-page .tr-home-elementor-section .hero-title span { display:block !important; color:#fff !important; }
body.elementor-page .tr-home-elementor-section .hero-tagline { color:#e51f2a !important; }
body.elementor-page .tr-home-elementor-section .hero-lead { max-width:640px !important; color:#d3dbe0 !important; font-size:17px !important; line-height:1.65 !important; margin-top:24px !important; }
body.elementor-page .tr-home-elementor-section .hero-actions {
  display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important;
  gap:10px !important; margin-top:28px !important; width:100% !important;
}
body.elementor-page .tr-home-elementor-section .hero-actions .elementor-widget-button { width:auto !important; flex:0 0 auto !important; margin:0 !important; }
body.elementor-page .tr-home-elementor-section .hero-actions .elementor-button { width:auto !important; min-width:0 !important; }
body.elementor-page .tr-home-elementor-section .quote-panel {
  background:rgba(255,255,255,.98) !important; color:var(--ink) !important; border-radius:22px !important;
  padding:28px !important; max-width:450px !important; margin-left:auto !important; align-self:center !important;
  box-shadow:0 24px 70px rgba(0,0,0,.28) !important;
}
body.elementor-page .tr-home-elementor-section .quote-panel .elementor-heading-title { color:var(--ink) !important; }

/* Full-width homepage sections + inner max-width containers. */
body.elementor-page .tr-home-elementor-section:not(.hero) > .elementor-container { width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; }
body.elementor-page .tr-home-elementor-section .container-xl {
  width:min(var(--max),calc(100% - 48px)) !important; max-width:var(--max) !important; margin-inline:auto !important;
  box-sizing:border-box !important;
}
body.elementor-page .tr-home-elementor-section .benefit-inner { width:min(var(--max),calc(100% - 48px)) !important; max-width:var(--max) !important; margin-inline:auto !important; display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
body.elementor-page .tr-home-elementor-section .benefit-strip { background:var(--navy) !important; color:#fff !important; }
body.elementor-page .tr-home-elementor-section .benefit-item { min-width:0 !important; display:grid !important; grid-template-columns:31px minmax(0,1fr) !important; align-items:center !important; column-gap:13px !important; padding:22px 18px !important; box-sizing:border-box !important; border-right:1px solid rgba(255,255,255,.09) !important; }
body.elementor-page .tr-home-elementor-section .benefit-item .elementor-widget { width:auto !important; margin:0 !important; }
body.elementor-page .tr-home-elementor-section .benefit-copy { min-width:0 !important; }
body.elementor-page .tr-home-elementor-section .benefit-copy strong { display:block !important; font-size:12px !important; line-height:1.25 !important; }
body.elementor-page .tr-home-elementor-section .benefit-copy small { display:block !important; margin-top:3px !important; color:#89959e !important; font-size:9px !important; line-height:1.4 !important; }

body.elementor-page .tr-home-elementor-section .service-grid,
body.elementor-page .tr-home-elementor-section .why-grid,
body.elementor-page .tr-home-elementor-section .process-grid,
body.elementor-page .tr-home-elementor-section .work-grid,
body.elementor-page .tr-home-elementor-section .review-placeholder-grid,
body.elementor-page .tr-home-elementor-section .advice-grid,
body.elementor-page .tr-home-elementor-section .usp-grid { width:min(var(--max),calc(100% - 48px)) !important; max-width:var(--max) !important; margin-inline:auto !important; box-sizing:border-box !important; }
body.elementor-page .tr-home-elementor-section .service-grid { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:14px !important; }
body.elementor-page .tr-home-elementor-section .why-grid { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:1px !important; }
body.elementor-page .tr-home-elementor-section .process-grid { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
body.elementor-page .tr-home-elementor-section .work-grid { display:grid !important; grid-template-columns:1.35fr .65fr .65fr !important; grid-template-rows:270px 270px !important; gap:12px !important; }
body.elementor-page .tr-home-elementor-section .review-placeholder-grid,
body.elementor-page .tr-home-elementor-section .advice-grid { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:13px !important; }
body.elementor-page .tr-home-elementor-section .advice-grid { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
body.elementor-page .tr-home-elementor-section .usp-grid { display:grid !important; grid-template-columns:1fr 1fr !important; gap:48px !important; }
body.elementor-page .tr-home-elementor-section .service-card,
body.elementor-page .tr-home-elementor-section .why-card,
body.elementor-page .tr-home-elementor-section .process-step,
body.elementor-page .tr-home-elementor-section .work-card,
body.elementor-page .tr-home-elementor-section .review-placeholder,
body.elementor-page .tr-home-elementor-section .advice-card { width:100% !important; min-width:0 !important; box-sizing:border-box !important; }

/* Section spacing and headings. */
body.elementor-page .tr-home-elementor-section.section-white,
body.elementor-page .tr-home-elementor-section.navy-section,
body.elementor-page .tr-home-elementor-section.process-section,
body.elementor-page .tr-home-elementor-section.tyre-finder-section,
body.elementor-page .tr-home-elementor-section.brand-section,
body.elementor-page .tr-home-elementor-section.commercial-section,
body.elementor-page .tr-home-elementor-section.areas-section,
body.elementor-page .tr-home-elementor-section.reviews-section,
body.elementor-page .tr-home-elementor-section.about-section,
body.elementor-page .tr-home-elementor-section.advice-section,
body.elementor-page .tr-home-elementor-section.faq-section,
body.elementor-page .tr-home-elementor-section.final-cta { position:relative !important; }
body.elementor-page .tr-home-elementor-section .section-heading { width:min(var(--max),calc(100% - 48px)) !important; max-width:var(--max) !important; margin-inline:auto !important; box-sizing:border-box !important; }

@media (max-width:1100px){
 body.elementor-page .tr-home-elementor-section .hero-inner { grid-template-columns:1fr 1fr !important; }
 body.elementor-page .tr-home-elementor-section .benefit-inner { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
 body.elementor-page .tr-home-elementor-section .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
 body.elementor-page .tr-home-elementor-section .why-grid,
 body.elementor-page .tr-home-elementor-section .process-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
 body.elementor-page .tr-home-elementor-section .review-placeholder-grid,
 body.elementor-page .tr-home-elementor-section .advice-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:767px){
 body.elementor-page .tr-home-elementor-section { width:100vw !important; max-width:100vw !important; }
 body.elementor-page .tr-home-elementor-section.hero { min-height:auto !important; background-position:62% center !important; }
 body.elementor-page .tr-home-elementor-section .hero-inner { width:calc(100% - 30px) !important; grid-template-columns:1fr !important; gap:35px !important; padding:130px 0 60px !important; }
 body.elementor-page .tr-home-elementor-section .hero-title { font-size:46px !important; }
 body.elementor-page .tr-home-elementor-section .hero-lead { font-size:14px !important; }
 body.elementor-page .tr-home-elementor-section .quote-panel { max-width:none !important; margin-left:0 !important; }
 body.elementor-page .tr-home-elementor-section .benefit-inner,
 body.elementor-page .tr-home-elementor-section .service-grid,
 body.elementor-page .tr-home-elementor-section .why-grid,
 body.elementor-page .tr-home-elementor-section .process-grid,
 body.elementor-page .tr-home-elementor-section .review-placeholder-grid,
 body.elementor-page .tr-home-elementor-section .advice-grid,
 body.elementor-page .tr-home-elementor-section .usp-grid { width:calc(100% - 30px) !important; grid-template-columns:1fr !important; }
 body.elementor-page .tr-home-elementor-section .benefit-item { padding:17px 10px !important; }
 body.elementor-page .tr-home-elementor-section .work-grid { width:calc(100% - 30px) !important; grid-template-columns:1fr !important; grid-template-rows:auto !important; }
 body.elementor-page .tr-home-elementor-section .container-xl,
 body.elementor-page .tr-home-elementor-section .section-heading { width:calc(100% - 30px) !important; }
 body.elementor-page .tr-home-elementor-section .hero-actions { flex-direction:column !important; align-items:stretch !important; }
 body.elementor-page .tr-home-elementor-section .hero-actions .elementor-widget-button,
 body.elementor-page .tr-home-elementor-section .hero-actions .elementor-button { width:100% !important; }
}
