/* 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_v2 (6 Sep 2026) - re-hide the mobile language toggle on desktop; repeat the inline overrides inside the 600px banner 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) - laptop image hidden, text centred, tinted band, solid More. Scoped with :has() because _container_ is a generic name. */
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) - ::after in --primary-color with mix-blend-mode:color rewrites the hero photo's hue; the black car stays black. */
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 purchase band hardcoded theme-2 greens. */
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; }

/* INV_HOME_SKIN_v1 (6 Sep 2026) - inventory-first layout: no sidebar, full-width grid, no View All, anchor offset. */
html body.nav-anchor #inventory div[class*="_filter_"], html body.nav-anchor #inventory div[class*="_filterMobile_"] { display: none !important; }
html body.nav-anchor #inventory div[class*="_cards_"] { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; margin-left: 0 !important; }
html body.nav-anchor [class*="_seeMoreBtn_"] { display: none !important; }
html body.nav-anchor #inventory { scroll-margin-top: 90px; }

/* INV_HOME_SKIN_v2/v3 (6 Sep 2026) - card height, button nowrap, sold wrapper hides Call-for row. */
html body.nav-anchor #inventory [class*="_containerCard_"], html body.nav-anchor #inventory [class*="carCard"] { min-height: 410px !important; }
html body.nav-anchor #inventory .t2CardInvRow button { white-space: nowrap !important; }
html body.nav-anchor #inventory .t2SoldWrap .nbcBtns, html body.nav-anchor #inventory .t2SoldWrap .t2CardInvRow { display: none !important; }

/* INV_HOME_SKIN_v4 (6 Sep 2026) - tile and sold wrapper flex exactly like CarCard (370-450, no fixed width). */
html body.nav-anchor #inventory [class*="_cardQRCard_"], html body.nav-anchor #inventory [class*="_containerQR_"], html body.nav-anchor #inventory .t2SoldWrap { width: auto !important; flex: 1 1 370px !important; min-width: 370px !important; max-width: 450px !important; }
html body.nav-anchor #inventory .t2SoldWrap > *:not(.t2SoldMark) { width: 100% !important; min-width: 0 !important; max-width: none !important; }
html body.nav-anchor #inventory .t2CardInvRow button { font-size: 0.85rem !important; padding: 10px 4px !important; }

html body.nav-anchor #inventory .t2SoldMark {
  width: 100% !important; left: 0 !important; top: 22px !important;
  text-align: center !important; font-size: 1.05rem !important;
  transform: rotate(-4deg) !important;
}


/* HOMEFILTER_ROWS_v1 (6 Sep 2026): the anchor-mode search band is two rows,
   but homeFilterContainer is a flex row and laid them side by side. Stack them. */
html body.nav-anchor [data-anchor-filter] {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}
html body.nav-anchor [data-anchor-filter] > div {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  flex: none !important;
}
html body.nav-anchor [data-anchor-filter] > div + div { margin-top: 10px !important; }
html body.nav-anchor [data-anchor-filter] select,
html body.nav-anchor [data-anchor-filter] input { width: 100% !important; box-sizing: border-box !important; }
@media (max-width: 900px) {
  html body.nav-anchor [data-anchor-filter] > div { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  html body.nav-anchor [data-anchor-filter] > div { grid-template-columns: 1fr !important; }
}


/* HOMEFILTER_ROWS_v2 (6 Sep 2026): 4x2 equal boxes, no labels. Supersedes the
   [data-anchor-filter] > div rules in v1 for the inner rows. */
html body.nav-anchor [data-anchor-filter] .t2InvBandRow {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  align-items: stretch !important;
}
html body.nav-anchor [data-anchor-filter] .t2InvBandRow + .t2InvBandRow { margin-top: 10px !important; }
html body.nav-anchor [data-anchor-filter] .t2InvBandRow select,
html body.nav-anchor [data-anchor-filter] .t2InvBandRow input,
html body.nav-anchor [data-anchor-filter] .t2InvBandRow button {
  height: 44px !important; margin: 0 !important; padding: 0 12px !important;
  border-radius: 6px !important; border: 0 !important; font-size: 14px !important;
}
html body.nav-anchor [data-anchor-filter] .t2InvBandRow button {
  background: var(--primary-color) !important; color: #fff !important; font-weight: 700 !important;
}
@media (max-width: 900px) { html body.nav-anchor [data-anchor-filter] .t2InvBandRow { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 600px) { html body.nav-anchor [data-anchor-filter] .t2InvBandRow { grid-template-columns: 1fr !important; } }


/* VDP_SOLD_STRIPE_v1 (6 Sep 2026): the detail page overlaid a round SOLD stamp
   image in the middle of the gallery. Replace with the same red stripe the
   home-page sold cards use: hide the stamp, turn its container into the band. */
html body div[class*="_containerSoldImage_"] img { display: none !important; }
html body div[class*="_containerSoldImage_"] {
  position: absolute !important;
  top: 26px !important; left: -40px !important;
  width: 260px !important; height: auto !important;
  transform: rotate(-12deg) !important;
  background: #b91c1c !important; color: #fff !important;
  font-weight: 800 !important; font-size: 1.25rem !important; letter-spacing: 3px !important;
  text-align: center !important; padding: 8px 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
  pointer-events: none !important; z-index: 5 !important;
}
html body div[class*="_containerSoldImage_"]::after { content: "SOLD"; }
html body div[class*="_containerCarImageSlider_"] { position: relative !important; overflow: hidden !important; }


/* INV_HOME_HEADER_v1 (6 Sep 2026): on the inventory-first layout the header
   takes the brand colour so it reads as one band with the hero. Text goes
   white; the active nav pill inverts (white on brand). brand-light flips the
   text dark, same rule as everywhere else. */
html body.nav-anchor [class*="_headerMain_"] {
  background: var(--primary-color) !important;
  border-bottom: 0 !important; box-shadow: none !important;
}
html body.nav-anchor [class*="_headerMain_"] [class*="_titleHeader_"] *,
html body.nav-anchor [class*="_headerMain_"] [class*="_headerLinks_"] a,
html body.nav-anchor [class*="_headerMain_"] a[href^="tel:"],
html body.nav-anchor [class*="_headerMain_"] a[href^="tel:"] * {
  color: #fff !important;
}
html body.nav-anchor [class*="_headerMain_"] [class*="_headerLinks_"] a[class*="_active_"] {
  background: #fff !important; color: var(--primary-color) !important;
}
html body.nav-anchor [class*="_headerMain_"] .t2LangPill,
html body.nav-anchor [class*="_headerMain_"] .t2LangPill * {
  color: #fff !important; border-color: rgba(255,255,255,.7) !important; background: transparent !important; stroke: #fff !important;
}
html body.nav-anchor [class*="_headerMain_"] [class*="_hamburger_"],
html body.nav-anchor [class*="_headerMain_"] [class*="_humburgur_"] svg { color: #fff !important; stroke: #fff !important; fill: #fff !important; }
/* pale brand colour: dark text on the header instead */
html body.nav-anchor.brand-light [class*="_headerMain_"] [class*="_titleHeader_"] *,
html body.nav-anchor.brand-light [class*="_headerMain_"] [class*="_headerLinks_"] a,
html body.nav-anchor.brand-light [class*="_headerMain_"] a[href^="tel:"],
html body.nav-anchor.brand-light [class*="_headerMain_"] a[href^="tel:"] *,
html body.nav-anchor.brand-light [class*="_headerMain_"] .t2LangPill,
html body.nav-anchor.brand-light [class*="_headerMain_"] .t2LangPill * { color: #10131A !important; border-color: rgba(0,0,0,.4) !important; stroke: #10131A !important; }
html body.nav-anchor.brand-light [class*="_headerMain_"] [class*="_headerLinks_"] a[class*="_active_"] { background: #10131A !important; color: #fff !important; }


/* HERO_FLAT_v1 (6 Sep 2026): layout for the image-free landing band. */
.t2HeroFlat { background: var(--primary-color); color: #fff; position: relative; overflow: hidden; }
.t2HeroFlat::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.035) 22px 24px); pointer-events: none; }
.t2HeroFlatInner { position: relative; max-width: 1200px; margin: 0 auto; padding: 48px 24px 40px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
.t2HeroFlatCopy h1 { margin: 0; font-size: 2.6rem; line-height: 1.12; font-weight: 500; color: #fff; }
.t2HeroFlatCopy p { margin: 12px 0 0; font-size: 1.05rem; opacity: .88; max-width: 520px; }
.t2HeroFlatCtas { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.t2HeroBtn { background: #fff; color: var(--primary-color); border: 0; border-radius: 8px; padding: 12px 22px; font: inherit; font-weight: 700; cursor: pointer; }
.t2HeroBtn.ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.75); }
.t2HeroFlatStats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.t2HeroStat { background: #fff; color: #16110f; border-radius: 12px; padding: 16px 18px; }
.t2HeroStat b { display: block; font-size: 1.7rem; font-weight: 600; color: var(--primary-color); line-height: 1.1; }
.t2HeroStat span { font-size: .85rem; color: #555; }
html body.brand-light .t2HeroFlat, html body.brand-light .t2HeroFlatCopy h1, html body.brand-light .t2HeroBtn.ghost { color: #10131A; }
html body.brand-light .t2HeroBtn { background: #10131A; color: #fff; }
html body.brand-light .t2HeroBtn.ghost { border-color: rgba(0,0,0,.45); }
@media (max-width: 900px) {
  .t2HeroFlatInner { grid-template-columns: 1fr; padding: 32px 16px 28px; gap: 22px; }
  .t2HeroFlatCopy h1 { font-size: 2rem; }
}
@media (max-width: 480px) { .t2HeroFlatStats { grid-template-columns: 1fr 1fr; gap: 8px; } .t2HeroStat { padding: 12px; } .t2HeroStat b { font-size: 1.35rem; } }


/* HOMEFILTER_ROWS_v3 (6 Sep 2026): under the flat hero the band no longer
   floats into a photo. Give it its own dark background, no negative offset,
   and sit it above the hero in stacking order. */
html body.nav-anchor [data-anchor-filter] {
  position: relative !important; z-index: 2 !important;
  margin: 0 !important; top: auto !important; transform: none !important;
  background: #0d1418 !important; padding: 18px 24px !important;
  width: 100% !important; max-width: none !important; box-sizing: border-box !important;
  border-radius: 0 !important; box-shadow: none !important;
}
html body.nav-anchor [data-anchor-filter]::before,
html body.nav-anchor [data-anchor-filter]::after { display: none !important; }
html body.nav-anchor .t2HeroFlat { z-index: 1; }


/* HOMEFILTER_ROWS_v4 (6 Sep 2026): the band container had a fixed one-row
   height; the second row overflowed onto the inventory heading. */
html body.nav-anchor [data-anchor-filter] {
  height: auto !important; min-height: 0 !important; max-height: none !important;
  overflow: visible !important; padding-bottom: 18px !important;
}
html body.nav-anchor [data-anchor-filter] .t2InvBandRow:last-child { margin-bottom: 0 !important; }
html body.nav-anchor #inventory { padding-top: 28px !important; }
/* header phone + language pill were still muted */
html body.nav-anchor [class*="_headerMain_"] a[href^="tel:"],
html body.nav-anchor [class*="_headerMain_"] a[href^="tel:"] *,
html body.nav-anchor [class*="_headerMain_"] [class*="_phone_"],
html body.nav-anchor [class*="_headerMain_"] [class*="_phone_"] *,
html body.nav-anchor [class*="_headerMain_"] [class*="_headerRight_"] *,
html body.nav-anchor [class*="_headerMain_"] .t2LangPill, html body.nav-anchor [class*="_headerMain_"] .t2LangPill span {
  color: #fff !important; opacity: 1 !important; fill: #fff !important; stroke: #fff !important;
}


/* INV_HOME_HEADER_v2 (6 Sep 2026): bolder nav; phone block (unitedMotorsMobilename
   = icon + h1 + pill, desktop and mobile) white; mobile address/pill un-stacked. */
html body.nav-anchor [class*="_headerMain_"] [class*="_headerLinks_"] a {
  font-weight: 700 !important; font-size: 1.02rem !important;
}
html body.nav-anchor [class*="_headerMain_"] [class*="_unitedMotorsMobilename_"],
html body.nav-anchor [class*="_headerMain_"] [class*="_unitedMotorsMobilename_"] h1,
html body.nav-anchor [class*="_headerMain_"] [class*="_unitedMotorsMobilename_"] svg {
  color: #fff !important; opacity: 1 !important; stroke: #fff !important;
}
html body.nav-anchor [class*="_headerMain_"] [class*="_unitedMotorsMobilename_"] h1 { font-weight: 700 !important; }
html body.nav-anchor [class*="_headerMain_"] [class*="_unitedMotorsMobilename_"]:hover,
html body.nav-anchor [class*="_headerMain_"] [class*="_unitedMotorsMobilename_"]:hover h1 { color: #fff !important; }
html body.nav-anchor.brand-light [class*="_headerMain_"] [class*="_unitedMotorsMobilename_"],
html body.nav-anchor.brand-light [class*="_headerMain_"] [class*="_unitedMotorsMobilename_"] h1,
html body.nav-anchor.brand-light [class*="_headerMain_"] [class*="_unitedMotorsMobilename_"] svg { color: #10131A !important; stroke: #10131A !important; }

@media (max-width: 600px) {
  /* address centred on its own line under the name; language pill pinned top-right, clear of it */
  html body.nav-anchor [class*="_titleHeader_"] { position: relative !important; padding: 8px 56px 8px 12px !important; }
  html body.nav-anchor [class*="_titleHeader_"] [class*="_unitedMotorsFullAddress_"] {
    display: block !important; position: static !important; width: auto !important;
    text-align: left !important; font-size: .8rem !important; line-height: 1.3 !important; opacity: .9 !important;
  }
  html body.nav-anchor [class*="_titleHeader_"] > span.t2LangMobileWrap {
    position: absolute !important; top: 50% !important; right: 10px !important;
    transform: translateY(-50%) !important; left: auto !important; width: auto !important; margin: 0 !important;
  }
}


/* INV_HOME_HEADER_v3 (6 Sep 2026): mobile title row as flex - address left,
   language pill right, nothing absolute, nothing centred. */
@media (max-width: 600px) {
  html body.nav-anchor [class*="_headerMain_"] [class*="_titleHeader_"] {
    display: flex !important; flex-direction: row !important; align-items: center !important;
    justify-content: space-between !important; gap: 10px !important;
    padding: 8px 12px !important; width: 100% !important; box-sizing: border-box !important;
  }
  html body.nav-anchor [class*="_headerMain_"] [class*="_titleHeader_"] > * { flex: 0 1 auto !important; }
  html body.nav-anchor [class*="_headerMain_"] [class*="_titleHeader_"] [class*="_unitedMotorsFullAddress_"] {
    flex: 1 1 auto !important; text-align: left !important; margin: 0 !important;
    font-size: .78rem !important; line-height: 1.3 !important; white-space: normal !important;
  }
  html body.nav-anchor [class*="_headerMain_"] [class*="_titleHeader_"] > span.t2LangMobileWrap {
    position: static !important; transform: none !important; flex: 0 0 auto !important; margin: 0 !important;
  }
}


/* INV_HOME_HEADER_v4 (6 Sep 2026): mobile title row - city/state LEFT, language pill RIGHT (DOM has the pill first). */
@media (max-width: 600px) {
  html body.nav-anchor [class*="_headerMain_"] [class*="_titleHeader_"] [class*="_unitedMotorsFullAddress_"] { order: 1 !important; font-size: .95rem !important; font-weight: 600 !important; }
  html body.nav-anchor [class*="_headerMain_"] [class*="_titleHeader_"] > span.t2LangMobileWrap { order: 2 !important; }
}


/* HERO_FLAT_v2 (6 Sep 2026): both hero buttons solid white to match the stat cards. */
.t2HeroBtn.ghost { background: #fff !important; color: var(--primary-color) !important; border: 0 !important; }
html body.brand-light .t2HeroBtn.ghost { background: #10131A !important; color: #fff !important; }


/* HERO_FLAT_v3 (6 Sep 2026): on phones the two CTAs sit on the same 2-column
   grid as the stat cards, so the button edges align with the card edges. */
@media (max-width: 600px) {
  .t2HeroFlatCtas { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 18px !important; }
  .t2HeroFlatCtas .t2HeroBtn { width: 100% !important; margin: 0 !important; padding: 13px 8px !important; white-space: nowrap; }
  .t2HeroFlatStats { gap: 8px !important; margin-top: 14px !important; }
  .t2HeroFlatInner { padding: 26px 16px 24px !important; }
}


/* INV_HOME_HEADER_v5 (6 Sep 2026): on phones the floating bar already has
   Directions, so the nav tab is redundant on the inventory-first layout. */
@media (max-width: 600px) {
  html body.nav-anchor [class*="_headerMain_"] li:has(> a[class*="_unitedMotorsDirect"]) { display: none !important; }
}


/* INV_HOME_HEADER_v6 (6 Sep 2026): mobile title row - city/state centred on the
   bar; language pill pinned right so it does not push the text off-centre. */
@media (max-width: 600px) {
  html body.nav-anchor [class*="_headerMain_"] [class*="_titleHeader_"] {
    display: block !important; position: relative !important; text-align: center !important;
    padding: 10px 56px !important;
  }
  html body.nav-anchor [class*="_headerMain_"] [class*="_titleHeader_"] [class*="_unitedMotorsFullAddress_"] {
    display: block !important; text-align: center !important; width: 100% !important; margin: 0 !important;
  }
  html body.nav-anchor [class*="_headerMain_"] [class*="_titleHeader_"] > span.t2LangMobileWrap {
    position: absolute !important; right: 10px !important; top: 50% !important; transform: translateY(-50%) !important;
    display: block !important; width: auto !important; margin: 0 !important;
  }
}

/* INV_HOME_HEADER_v7 — inventory layout phone title band:
   dealer name white (was --primary-color on navy, ~1.6:1 and invisible),
   city/state hidden, band 77px -> 31px, name clamped to one line */
@media (max-width: 600px) {
  html body.nav-anchor [class*="_headerMain_"] [class*="_titleHeader_"] {
    padding: 3px 56px !important;
  }
  html body.header-inline.nav-anchor [class*="_titleHeader_"] a[class*="_unitedMotorsLogo_"] {
    color: #fff !important;
    display: block !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 25px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body.nav-anchor [class*="_titleHeader_"] [class*="_unitedMotorsFullAddress_"] {
    display: none !important;
  }
}

/* INV_HOME_TOTOP_v1 — back-to-top pill, every dealer, all widths.
   Injected by dac-tokens.js outside apply(), so legacy schema_version 1
   hosts get it too. Sits above t2FloatBar when present. */
#dacToTop {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: var(--dac-totop-bottom, 16px) !important;
  z-index: 2147482001 !important;
  background: #023A59 !important;
  color: #fff !important;
  border: 1.5px solid #fff !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  padding: 9px 16px !important;
  display: none !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}
#dacToTop.dac-totop-on { display: inline-flex !important; }
@media (prefers-reduced-motion: reduce) { #dacToTop { transition: none !important; } }