/* DAC_TOKENS_SKIN_v1 (4 Sep 2026) — token schema v2 surface + type + button.
   EVERY rule is gated on body.surf-light, set only by dac-tokens.js when the
   theme row carries surface.mode = "light". No other host on templates/9 can
   match these selectors. Radius and density are NOT here: the bundle hardcodes
   them per rule with no variable, so they need a source rebuild. */

body.surf-light {
  font-family: var(--font-body, inherit);
}

/* Hero: beats dac-hero-theme.css line 1, which paints #0B3D33 ungated. */
html body.surf-light div[class*="_heroSection_"] {
  background: var(--primary-color, #1F2933) !important;
}

html body.surf-light div[class*="_heroText_"],
html body.surf-light div[class*="_heroText_"] * {
  color: #ffffff !important;
}

/* Page and section surfaces */
html body.surf-light { background: #F7F8F9 !important; }

html body.surf-light div[class*="_homeFilterContainer_"] {
  background: #ffffff !important;
  border: 1px solid #E3E6E8 !important;
  box-shadow: none !important;
}

/* Outline buttons — component.button = "outline" */
html body.surf-light div[class*="_homeFilterContainer_"] button[class*="_findCarButton_"],
html body.surf-light [class*="seeMoreBtn"] {
  background: transparent !important;
  color: var(--primary-color, #1F2933) !important;
  border: 2px solid var(--primary-color, #1F2933) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}

html body.surf-light div[class*="_homeFilterContainer_"] button[class*="_findCarButton_"]:hover,
html body.surf-light [class*="seeMoreBtn"]:hover {
  background: var(--primary-color, #1F2933) !important;
  color: #ffffff !important;
}

/* DAC_TOKENS_SKIN_v2 — corrections from DevTools on previewtwo, 4 Sep 2026.
   findCarButton is a SPAN with no inner button (confirmed), so the v1 rule
   qualified on button[] and matched nothing. featuresCarsWrapper paints
   --primary-color full width; in a light style it becomes a light surface. */

html body.surf-light span[class*="_findCarButton_"] {
  background: transparent !important;
  color: var(--primary-color, #1F2933) !important;
  border: 2px solid var(--primary-color, #1F2933) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  padding: 11px 22px !important;
}

html body.surf-light span[class*="_findCarButton_"]:hover {
  background: var(--primary-color, #1F2933) !important;
  color: #ffffff !important;
}

html body.surf-light div[class*="_featuresCarsWrapper_"] {
  background: #ffffff !important;
  border-top: 1px solid #E3E6E8 !important;
  border-bottom: 1px solid #E3E6E8 !important;
}

html body.surf-light div[class*="_featuresCarsWrapper_"] h1,
html body.surf-light div[class*="_featuresCarsWrapper_"] h2,
html body.surf-light div[class*="_featuresCarsWrapper_"] h3 {
  color: var(--primary-color, #1F2933) !important;
}

/* DAC_TOKENS_SKIN_v3 — the real Find-a-car button is an UNCLASSED <button>
   inside span._findCarButton_. DevTools: LABEL(transparent) + BUTTON(#1F2933).
   v2 styled the span, so the dark button kept painting inside the outline. */

html body.surf-light span[class*="_findCarButton_"] {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

html body.surf-light span[class*="_findCarButton_"] button {
  background: transparent !important;
  color: var(--primary-color, #1F2933) !important;
  border: 2px solid var(--primary-color, #1F2933) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  padding: 11px 24px !important;
}

html body.surf-light span[class*="_findCarButton_"] button:hover {
  background: var(--primary-color, #1F2933) !important;
  color: #ffffff !important;
}

/* DAC_TOKENS_SKIN_v4 — dark-hero styles. dac-hero-theme.css line 1 paints
   #0B3D33 ungated on every theme-9 host, so a dark-hero token colour never
   shows. This overrides it ONLY under body.surf-dark, which only a style
   declaring surface.mode = "dark-hero" sets. The 33 v1-schema hosts set no
   class and keep the existing green. Deliberately NOT a fix to line 1: that
   would repaint 12 live hosts across 6 dealers. */

html body.surf-dark div[class*="_heroSection_"] {
  background: var(--primary-color, #0B3D33) !important;
}

/* DAC_TOKENS_SKIN_v5 — the featuresCars button. The bundle has
   ._featuresCarsWrapper_ > button { background: var(--secondary-color) !important }
   which is the ONLY rule in the codebase painting a control with the derived
   secondary; every other pairs a surface with an explicit readable foreground.
   The secondary is a lift of the primary, so on any dark primary it lands mid
   grey and the primary-coloured label on it is unreadable (seen on #14100F and
   #2d4966). Restore the white-on-primary the component itself declares.
   Gated on the surface classes, so only schema-v3 styles are affected. */

html body.surf-dark div[class*="_featuresCarsWrapper_"] > button,
html body.surf-light div[class*="_featuresCarsWrapper_"] > button {
  background: #ffffff !important;
  color: var(--primary-color, #0B3D33) !important;
  border: 2px solid #ffffff !important;
}

html body.surf-dark div[class*="_featuresCarsWrapper_"] > button:hover,
html body.surf-light div[class*="_featuresCarsWrapper_"] > button:hover {
  background: var(--brand-tint, #e4f0ea) !important;
  color: var(--primary-color, #0B3D33) !important;
}

/* DAC_TOKENS_SKIN_v6 — ActionTiles. ._tile_ hardcodes background:#4e1214,
   which is Old G Motors' brand colour baked into the component (built for
   themes 7/8). It ignores --primary-color entirely, so a navy or green style
   renders maroon tiles. Gated on the surface classes: themes 7 and 8 keep
   today's rendering, only schema-v3 styles take the token colour. */

html body.surf-dark div[class*="_tile_"],
html body.surf-light div[class*="_tile_"] {
  background: var(--primary-color, #0B3D33) !important;
}

html body.surf-dark div[class*="_tile_"] a,
html body.surf-dark div[class*="_tile_"] span,
html body.surf-light div[class*="_tile_"] a,
html body.surf-light div[class*="_tile_"] span {
  color: #ffffff !important;
}

/* DAC_TOKENS_SKIN_v7 — v6 qualified the tile selector with div; the tile is a
   BUTTON (confirmed in DevTools). Third tag-assumption miss tonight after
   findCarButton and featuresCars button. Rule: never qualify by tag in this
   codebase - match on the class fragment alone. */

html body.surf-dark [class*="_tile_"],
html body.surf-light [class*="_tile_"] {
  background: var(--primary-color, #0B3D33) !important;
}

html body.surf-dark [class*="_tile_"] *,
html body.surf-light [class*="_tile_"] * {
  color: #ffffff !important;
}

/* DAC_TOKENS_SKIN_v8 — v5 painted the featuresCars button white for BOTH
   surface modes. Correct on dark-hero, where the band behind it is the
   primary colour. On light the band is white (SKIN_v1), so white-on-white
   left the button invisible. Light mode inverts: filled primary, white label.
   Overrides v5 for surf-light only; surf-dark keeps white-on-primary. */

html body.surf-light div[class*="_featuresCarsWrapper_"] > button {
  background: var(--primary-color, #1F2933) !important;
  color: #ffffff !important;
  border: 2px solid var(--primary-color, #1F2933) !important;
}

html body.surf-light div[class*="_featuresCarsWrapper_"] > button:hover {
  background: #ffffff !important;
  color: var(--primary-color, #1F2933) !important;
}

/* DAC_TOKENS_SKIN_v9 — SKIN_v1 set a flat background on the hero for surf-light,
   which overwrote the T2_HEROPHOTO_v2 photo layer entirely (confirmed on
   test4.unitedmotors.us: t2-hero-photo was set and --t2-hero-url resolved, but
   the flat fill won). Restore the photo composite when a hero photo loaded;
   the flat fill still applies when it did not. */

html body.surf-light.t2-hero-photo div[class*="_heroSection_"] {
  background: linear-gradient(90deg,
                var(--primary-color,#1F2933) 0%,
                /* HERO_OVERLAY_LIGHTER_v1: 72% black buried the primary, so every style read
                   as near-black. */
                rgba(0,0,0,.62) 38%,
                rgba(0,0,0,.10) 66%,
                rgba(0,0,0,0) 88%),
              var(--t2-hero-url) center right / cover no-repeat,
              var(--primary-color,#1F2933) !important;
  min-height: 460px !important;
}

html body.surf-dark.t2-hero-photo div[class*="_heroSection_"] {
  background: linear-gradient(90deg,
                var(--primary-color,#0B3D33) 0%,
                /* HERO_OVERLAY_LIGHTER_v1: 72% black buried the primary, so every style read
                   as near-black. */
                rgba(0,0,0,.62) 38%,
                rgba(0,0,0,.10) 66%,
                rgba(0,0,0,0) 88%),
              var(--t2-hero-url) center right / cover no-repeat,
              var(--primary-color,#0B3D33) !important;
  min-height: 460px !important;
}


/* ==========================================================================
   BRAND_CONTRAST_v1 (6 Sep 2026)
   Gated on body.brand-light, set by dac-tokens.js when the brand colour's
   relative luminance exceeds 0.45. The bundle hardcodes color:#fff next to
   background:var(--primary-color) on these components, several !important,
   so a pale brand colour renders white-on-pale.

   Matched on CLASS FRAGMENTS, never hashed module names - the hashes
   (_findCarButton_6lgkr_66 etc.) change on every source rebuild.
   Deliberately EXCLUDED: [class*="_btn_"] and [class*="_active_"] as bare
   matchers - too broad, they hit components with no primary background.
   _active_ is covered via its nav parents below instead.
   ========================================================================== */

html body.brand-light [class*="_topBar_"],
html body.brand-light [class*="_topBar_"] *,
html body.brand-light [class*="_t2QuoteBarBtn_"],
html body.brand-light [class*="_t2mPrimary_"],
html body.brand-light [class*="_findCarButton_"] button,
html body.brand-light [class*="_callForMileage_"],
html body.brand-light [class*="callForMileage"],
html body.brand-light [class*="callforPricesMain"],
html body.brand-light [class*="callforPricesMainMileage"],
html body.brand-light [class*="_containerCheckButton_"] > button,
html body.brand-light [class*="_submitLoan_"],
html body.brand-light [class*="_searchButton_"],
html body.brand-light [class*="_searchButtonMobile_"],
html body.brand-light [class*="_DirectionHoursContainer_"] > h3,
html body.brand-light [class*="_DirectionHoursValueCall_"],
html body.brand-light [class*="_fixButton_"] > button,
html body.brand-light [class*="_formValue_"] > button,
html body.brand-light [class*="_VinMileage_"] > button,
html body.brand-light [class*="_headerLinks_"] > ul > li a[class*="_active_"],
html body.brand-light [class*="_humburgurMenuContainer_"] > ul > li a[class*="_active_"],
html body.brand-light [class*="_containerCarDetails_"] > div > div:last-child > button,
html body.brand-light [class*="_containerCarFinancing_"] > div,
html body.brand-light [class*="_containerCarFinancingLoan_"] > div,
html body.brand-light [class*="_containerLoanApply_"] > div:last-child,
html body.brand-light [class*="nbcBtnsBellow"] > button,
html body.brand-light [class*="nbcBtns"] > button,
html body.brand-light [class*="_selected_"] {
  color: #10131A !important;
}

html body.brand-light [class*="_DirectionHoursValueCall_"] svg,
html body.brand-light [class*="_DirectionHoursValueCall_"] path,
html body.brand-light [class*="_findCarButton_"] button svg,
html body.brand-light [class*="_findCarButton_"] button path {
  fill: #10131A !important;
  stroke: #10131A !important;
}


/* ==========================================================================
   HEADER_INLINE_v1 (6 Sep 2026)
   Gated on body.header-inline, set by dac-tokens.js from component.header.
   Undoes the bundle's eight ungated _titleHeader_ banner rules so the logo
   (or the dealer name) sits inline in the header instead of spanning the page.
   Every bundle rule is "html body [class*=...] { ... !important }", so each
   override needs html body.header-inline + !important to win.
   INERT unless a dealer opts in - Old G Motors and DUCARS keep their banner.
   ========================================================================== */

html body.header-inline [class*="_titleHeader_"] {
  width: auto !important;
  padding: 0 !important;
}
html body.header-inline [class*="_titleHeader_"] > span {
  display: inline-flex !important;
  width: auto !important;
}
html body.header-inline [class*="_titleHeader_"] a:has(img) {
  display: inline-block !important;
  width: auto !important;
}
html body.header-inline [class*="_titleHeader_"] > span:has(img) {
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
html body.header-inline [class*="_titleHeader_"] img {
  width: auto !important;
  max-height: 56px !important;
  transform: none !important;
}
html body.header-inline [class*="_titleHeader_"] a[class*="_unitedMotorsLogo_"] {
  display: inline-block !important;
  width: auto !important;
  text-align: left !important;
  background: transparent !important;
  color: var(--primary-color) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  padding: 8px 0 !important;
}


/* ==========================================================================
   HEADER_INLINE_v2 (6 Sep 2026) - two defects from HEADER_INLINE_v1.

   1. The span rule below unhid span.t2LangMobileWrap, a MOBILE language
      toggle the bundle keeps display:none above 900px. It reappeared floating
      at the top-left on desktop. Re-hide it outside its own breakpoint.

   2. The bundle carries a SECOND copy of all eight banner rules inside
      @media (max-width: 600px). An unmediated override loses to them at equal
      specificity, so the logo stayed full-width on phones while desktop went
      inline. Repeat the overrides inside the same breakpoint.
   ========================================================================== */

html body.header-inline [class*="_titleHeader_"] > span.t2LangMobileWrap {
  display: none !important;
}
@media (max-width: 900px) {
  html body.header-inline [class*="_titleHeader_"] > span.t2LangMobileWrap {
    display: block !important;
  }
}

@media (max-width: 600px) {
  html body.header-inline [class*="_titleHeader_"] {
    width: auto !important;
    padding: 0 !important;
  }
  html body.header-inline [class*="_titleHeader_"] > span {
    display: inline-flex !important;
    width: auto !important;
  }
  html body.header-inline [class*="_titleHeader_"] a:has(img) {
    display: inline-block !important;
    width: auto !important;
  }
  html body.header-inline [class*="_titleHeader_"] > span:has(img) {
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }
  html body.header-inline [class*="_titleHeader_"] img {
    width: auto !important;
    max-height: 40px !important;
    transform: none !important;
  }
  html body.header-inline [class*="_titleHeader_"] a[class*="_unitedMotorsLogo_"] {
    display: inline-block !important;
    width: auto !important;
    text-align: left !important;
    background: transparent !important;
    color: var(--primary-color) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    padding: 6px 0 !important;
  }
  html body.header-inline [class*="_titleHeader_"] > span.t2LangMobileWrap {
    display: block !important;
  }
}


/* ==========================================================================
   NEXTCAR_CENTRE_v1 (6 Sep 2026)
   The "Your next car is waiting for you here" band shipped as a 60/40 split:
   a laptop illustration left (actually <img src={dealerLogo || laptop}>, so it
   showed the dealer's logo once one was uploaded - redundant now that the logo
   sits in the header) and the heading + More button squeezed into 40% right.

   Image hidden, text centred full width, tinted band so the section separates
   from the hours table above and the footer below.

   SCOPED WITH :has() - _container_, _textContainer_ and _imgContainer_ are
   generic names shared by four modules in this bundle. Only the container that
   actually holds an _imgContainer_ is this section.
   The More button used --secondary-color with #000 text; on a dark brand that
   derives to pale grey and reads as disabled. Solid primary instead.
   ========================================================================== */

html body div[class*="_container_"]:has(> div[class*="_imgContainer_"]) {
  background: #f1f5f3 !important;
  padding: 56px 24px !important;
  justify-content: center !important;
}
html body div[class*="_container_"]:has(> div[class*="_imgContainer_"]) > div[class*="_imgContainer_"] {
  display: none !important;
}
html body div[class*="_container_"]:has(> div[class*="_imgContainer_"]) > div[class*="_textContainer_"] {
  width: 100% !important;
  text-align: center !important;
  gap: 1.4rem !important;
}
html body div[class*="_container_"]:has(> div[class*="_imgContainer_"]) > div[class*="_textContainer_"] span:first-child {
  font-size: 1.75rem !important;
}
html body div[class*="_container_"]:has(> div[class*="_imgContainer_"]) > div[class*="_textContainer_"] span:last-child button {
  background-color: var(--primary-color) !important;
  color: #fff !important;
  font-size: 1.15rem !important;
  padding: .85rem 2.6rem !important;
  box-shadow: none !important;
}
@media (max-width: 600px) {
  html body div[class*="_container_"]:has(> div[class*="_imgContainer_"]) {
    padding: 40px 16px !important;
  }
  html body div[class*="_container_"]:has(> div[class*="_imgContainer_"]) > div[class*="_textContainer_"] span:first-child {
    font-size: 1.35rem !important;
  }
}


/* ==========================================================================
   HERO_TINT_v1 (6 Sep 2026)
   The hero photo bakes its colour into the JPEG - theme-31 is a green car on a
   green glow - so publishing a red brand colour left half the hero green. The
   car cannot be cut out: measured against the source, the car and the empty
   backdrop are the SAME near-black (rgb ~7,7,7), separable only by shape.

   So tint instead of replace. A ::after layer of --primary-color with
   mix-blend-mode: color rewrites the HUE of everything beneath while keeping
   luminance intact - the black car stays black, the coloured glow becomes the
   brand colour. No per-dealer assets, works for any colour, and every existing
   hero starts following the brand automatically.

   _heroSection_ is already position:relative, and the headline is a child
   element, so it paints above the overlay and is not recoloured.
   ========================================================================== */

html body.t2-hero-photo div[class*="_heroSection_"] {
  isolation: isolate;
}
html body.t2-hero-photo div[class*="_heroSection_"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--primary-color, #0B3D33);
  mix-blend-mode: color;
  pointer-events: none;
  z-index: 0;
}
html body.t2-hero-photo div[class*="_heroSection_"] > * {
  position: relative;
  z-index: 1;
}


/* ==========================================================================
   ORDZONE_BRAND_v1 (6 Sep 2026)
   The "Start your purchase online" band hardcodes theme-2's greens - #0e3b2e
   for the band, #7ee2a8 / #04342c for the button - so it stayed green whatever
   the dealer published. Interim override; the real fix is replacing the literals
   in /home/frontend/runtime/src (12 files, index.css holds most of them) and
   rebuilding, which retires this block.
   ========================================================================== */

html body .t2OrdSection,
html body div[class*="containerCarFinancingLoan"] > div.t2OrdZone {
  background: var(--primary-color, #0e3b2e) !important;
}
html body .t2OrdSection .t2OrdBtnB,
html body div[class*="containerCarFinancingLoan"] > div.t2OrdZone .t2OrdBtnB {
  background: #fff !important;
  color: var(--primary-color, #04342c) !important;
}
html body .t2OrdSection .t2OrdBtnA,
html body div[class*="containerCarFinancingLoan"] > div.t2OrdZone .t2OrdBtnA {
  background: #fff !important;
  color: var(--primary-color, #0e3b2e) !important;
}