/* ═══════════════════════════════════════════════════════════════════════════
   shults-di.css — THE DELIVERABLE STYLESHEET  ·  v3 (2026-07-27)

   The round-6 Shults design system (approach B · "Covered Commerce"), written
   against Dealer Inspire's OWN markup. Under the mirror harness this is the
   only stylesheet on the page (DI's sheets are stripped at serve time). Anything
   that exists ONLY to stand in for what that strip removed lives in
   theme/harness-only.css and is NOT in this file - see that file's banner. THIS
   file is the deliverable and nothing else, so it is safe to install as-is. On
   platform it loads LAST in the DealerInspireDealerTheme enqueue order and
   simply out-cascades their theme.

   Source of values: convert/gate-out/truth-{srp,vdp,home}.css (the emitted
   <style> chain of the approved comps). Authored in px — never rem (the
   platform gotcha).

   §6–§18 style DEALER INSPIRE'S OWN MARKUP (SRP/VDP are DI templates — we skin
   what they ship). §19 is different: the homepage is built in the DI Page
   Composer out of OUR raw-HTML fragments (convert/fragments/*.html), so those
   modules carry OUR namespaced `sh-*` classes and §19 styles those.

   Gate state (node convert/gate.mjs all):
     SRP 18/20 pair-checks · 0 style mismatches   VDP 23/26 · 0 style mismatches
   Every remaining pixel is a logged markup/content delta — see MANIFEST.md.

   ── SECTION MAP ────────────────────────────────────────────────────────────
     1  Tokens
     2  Reset + base
     3  (moved out - harness only, see theme/harness-only.css)
     4  (moved out - harness only, see theme/harness-only.css)
     5  Shared components (pill · chip · type roles · links)
     6  Header  (shared SRP/VDP)
          6.1 the mobile / tablet menu panel (#fullMenu__overlay)
     7  Footer  (shared SRP/VDP)
     8  SRP · page shell + grid
     9  SRP · inventory search bar
    10  SRP · quick-facet chip row
    11  SRP · count + view toggle + sort
    12  SRP · applied refinements
    13  SRP · filter rail
    14  SRP · the vehicle card
    15  SRP · pager
    16  SRP · disclaimer
    17  VDP · page grid + components
          17.1 page grid · 17.2 title band · 17.3 gallery · 17.4 buybox rail
          17.5 basic info · 17.6 key features · 17.7 CTA row · 17.8 accordions
          17.9 premium options · 17.10 payment card · 17.11 similar vehicles
    18  Responsive — tablet (≤980) and phone (≤640/≤560)
    19  HOMEPAGE modules (the sh-* Page-Composer fragment system)
          19.0 Composer row plumbing · 19.1 atoms · 19.2 hero + slider
          19.3 blue band · 19.4 trio · 19.5 promos · 19.6 why-us
          19.7 about · 19.8 map band · 19.9 homepage responsive
    20  THE FORM LANGUAGE — sitewide, on DI's gravity-forms markup AS-IS
          20.1 form tokens · 20.2 label + required · 20.3 the field box
          20.4 select · 20.5 checkbox + radio · 20.6 validation
          20.7 the form shell + submit · 20.8 the modal chrome
          20.9 the ≤640 full-screen sheet · 20.10 the /forms sheet
    21  THE LOCATIONS PAGE (the sh-loc-* Page-Composer fragment system)
          21.1 lead band + map · 21.2 town section head · 21.3 the store card
          21.4 phone rows · 21.5 the hours disclosure (native <details>, no JS)
          21.6 card CTAs · 21.7 locations responsive

   Compliance invariants (never negotiable):
     · Disclosure copy is VERBATIM. Never reworded, never hidden at page level.
     · Gold (#E8A428) NEVER carries white text — ink on gold only (8.1:1).
     · The Lifetime seal vector is the extracted brand path. Never redrawn.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ 1 · TOKENS ═══════════════════════════════════════════════════════════ */
:root {
    /* palette — verbatim from the round-6 emit (block 2 + the r6 override) */
    --ink: #1B2A52;
    --blue: #334A90;
    --blue-deep: #283A75;
    --blue-up: #3E58AC;
    --gold: #E8A428;
    --cloud: #F6F8FC;
    --mist: #F1F4FA;
    --rule: #E5E9F2;
    --soft: #5E6B8C;
  
    /* type — 'Proxima Nova' MUST be first: /fonts.css registers that family name */
    --font: 'Proxima Nova', system-ui, -apple-system, sans-serif;
  
    /* measure */
    --wrap: 1180px;
    --wrap-srp: 1400px;
    --gut: 32px;
  
    /* radii — 8 / 12 / 14 / 16 / 24 only */
    --r-chip: 8px;
    --r-tile: 12px;
    --r-card: 14px;
    --r-panel: 16px;
    --r-pill: 999px;
  }
  @media (min-width: 1600px) { :root { --wrap: 1440px; --wrap-srp: 1760px; } }
  
  
  /* ═══ 2 · RESET + BASE ═════════════════════════════════════════════════════ */
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html { -webkit-font-smoothing: antialiased; }
  
  body {
    font: 400 17px/1.5 var(--font);
    color: var(--ink);
    background: #fff;
  }
  
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  button, input, select, textarea { font: inherit; color: inherit; background: none; border: 0; }
  button { cursor: pointer; }
  hr { border: 0; }
  h1, h2, h3, h4, h5, h6 { font-weight: 700; font-size: inherit; }
  table { border-collapse: collapse; }
  
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  
  /* DI's page shells are pure pass-throughs under our layout */
  #whitewrap,
  .container-fluid.lightning,
  .container-fluid.lightning > .row,
  .col-xs-12.content {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    float: none;
  }
  
  
  /* ═══ 5 · SHARED COMPONENTS ════════════════════════════════════════════════ */
  
  /* THE pill system — one solid, hairline support */
  .s-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--blue); color: #fff; border: 0; border-radius: var(--r-pill);
    height: 50px; padding: 0 30px;
    font: 700 15px/1 var(--font); letter-spacing: .01em;
    white-space: nowrap; cursor: pointer;
    transition: background .15s, transform .1s;
  }
  .s-pill:hover { background: var(--blue-up); }
  .s-pill:active { transform: scale(.975); }
  .s-pill--ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--rule); }
  .s-pill--ghost:hover { background: var(--cloud); border-color: var(--soft); }
  
  /* the section kicker / eyebrow register */
  .s-kicker {
    font: 700 13px/1 var(--font); letter-spacing: .1em;
    text-transform: uppercase; color: var(--soft);
  }
  
  /* coverage chip — gold ground, INK text (8.1:1). Never white on gold. */
  .covered, .chip-covered {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--gold); color: var(--ink);
    font: 800 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
    padding: 7px 11px; border-radius: var(--r-pill);
  }
  
  /* ── THE LIFETIME SEAL ──────────────────────────────────────────────────────
     The official Shults Lifetime Program seal, path-extracted from
     _Assets/Components/Icons/Lifetime_Program_icon_Powertrain.ai (the canonical
     source per Mike). Carried VERBATIM from the round-6 emit — never redrawn,
     never re-traced, never swapped for a lookalike checkmark.
     DI's card markup has no Covered-For-Life node, so on the SRP card the badge
     is painted as a ::before on .hit-image (logged in MANIFEST.md).            */
  .covered::before, .chip-covered::before {
    content: ''; width: 17px; height: 17px; flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 992 995'%3E%3Cpath d='M296.7 522.5 L426.7 654.2 L676.1 402.5 L614.6 339.9 L429.1 527.6 L359.5 458.3 L296.7 522.5 M619.4 891.9 C550.8 880.4 516.7 995.2 455.5 948.0 C415.7 917.4 394.9 885.1 353.2 891.9 L292.7 901.9 C267.3 906.1 242.8 894.2 233.9 869.4 L214.4 814.8 C207.6 795.7 193.7 778.9 174.0 771.7 L117.6 751.4 C92.7 742.4 78.2 719.4 82.8 692.4 L93.1 631.8 C96.8 610.6 89.3 590.8 76.2 575.0 L38.3 529.5 C0.0 483.4 62.1 443.5 87.9 401.5 C107.9 369.0 70.8 308.3 86.8 269.7 C102.9 230.8 178.1 236.0 201.8 202.3 C216.1 181.9 223.1 154.8 230.9 131.8 C257.4 53.7 335.0 118.1 385.8 98.8 C408.2 90.4 426.8 69.0 443.9 54.3 C507.4 0.0 540.2 80.7 585.5 98.5 C637.8 119.1 717.0 51.4 742.8 135.2 C749.6 157.0 756.7 182.8 770.4 202.0 C795.0 236.3 868.4 230.6 885.6 269.7 C901.8 306.5 866.1 364.4 883.5 398.9 C894.2 420.0 911.7 436.4 926.7 454.7 C991.9 533.9 866.5 554.6 879.5 631.9 L889.6 692.5 C894.1 719.5 880.1 742.2 855.0 751.3 L798.4 771.7 C780.8 778.1 765.9 793.9 759.5 811.2 L738.7 867.8 C729.3 893.4 706.9 906.5 679.8 902.0 L619.4 891.9 Z' fill='%231B2A52' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  
  /* the CSS caret (replaces DI's font-awesome carets) */
  .s-caret::after {
    content: ''; width: 12px; height: 7px; flex: none; margin-left: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231B2A52' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat center;
  }
  
  
  /* ═══ 6 · HEADER (shared SRP / VDP) ════════════════════════════════════════
     TRUTH: one 72px white bar + a 1px rule (header.main → 1440×73).
     DI ships a STACK: .di-stacks--top > .stack--header-content > header#header,
     holding BOTH the mobile header (#deviceHeader, .visible-xs.visible-sm) and
     the desktop bars (#headerTop utility strip + #headerBottom). The visibility
     utilities in §3 pick exactly one; this section makes whichever one shows
     render as the single 72px bar.                                             */
  
  .di-stacks--top {
    display: block;
    background: #fff;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    position: sticky; top: 0; z-index: 50;
  }
  .di-stacks--top .stack--header-content,
  .di-stacks--top header#header { display: block; }
  .di-stacks--top .fixed-top-spacer,
  .di-stacks--top .stack--lvrp-filters { display: none; }
  
  /* the utility strip: DI renders it 0×0 at desktop (it carries an empty address
     record on this rooftop). Truth carries the cities inline in the bar. */
  #headerTop { display: none !important; }
  
  /* ── desktop bar ─────────────────────────────────────────────────────────── */
  /* #headerBottom { display: block; }
  #headerBottom .container-fluid,
  #headerBottom .container-wide {
    max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut);
  }
  #headerBottom .row { display: block; }
  
  .bottomWrapper {
    display: flex; align-items: center; gap: 36px;
    height: 72px; min-width: 0;
  }
  .bottomWrapper__logo { flex: none; display: flex; align-items: center; }
  .bottomWrapper__logo span.logo,
  .bottomWrapper__logo a,
  .bottomWrapper__logo picture { display: block; }
  .bottomWrapper__logo img { height: 30px; width: auto; max-width: none; } /* R10 pin: Mike — bigger logo (mirrors round2 css-b .logo img) */
  
  /* .bottomWrapper__nav { flex: 1 1 auto; min-width: 0; }
  .bottomWrapper__nav .navbar,
  .bottomWrapper__nav .navbar-inner,
  .bottomWrapper__nav nav { display: block; min-width: 0; }
  .bottomWrapper__nav ul.nav {
    display: flex; align-items: center; gap: 20px;
    flex-wrap: nowrap; overflow: hidden; min-width: 0;
  }
  .bottomWrapper__nav ul.nav > li { flex: none; }
  .bottomWrapper__nav ul.nav > li > a {
    font: 700 14px/1 var(--font); color: var(--ink); white-space: nowrap;
  }
  .bottomWrapper__nav ul.nav > li > a:hover { color: var(--blue); } */ */
  /* the dropdown / megamenu trees: in the DOM, hidden until DI's JS opens them */
  /* .bottomWrapper__nav ul.sub-menu,
  .bottomWrapper__nav .megamenu-wrapper,
  .bottomWrapper__nav .sub-menu-wrapper { display: none; }
  
  .bottomWrapper__cta { flex: none; margin-left: auto; }
  .bottomWrapper__cta a.button,
  .bottomWrapper__cta a.primary-button {
    display: inline-flex; align-items: center; justify-content: center;
    height: 42px; padding: 0 24px;
    background: var(--blue); color: #fff; border-radius: var(--r-pill);
    font: 700 15px/1 var(--font); letter-spacing: .01em; white-space: nowrap;
    transition: background .15s;
  }
  .bottomWrapper__cta a.button:hover { background: var(--blue-up); } */
  
  /* ── mobile bar (#deviceHeader) ──────────────────────────────────────────── */
  #deviceHeader { display: flex; align-items: center; height: 72px; padding: 0 16px; }
  #deviceHeader .dealerName { display: none; }
  .deviceWrapper { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
  
  .deviceWrapper__menu,
  /* the id is load-bearing: DI sizes this button through `.device-icon
     .menu-hamburger` at (0,2,0), which out-ranks a lone `.deviceWrapper__menu`
     and renders it 55×55 (60×70 at tablet) with two hairline borders and no
     padding — which also breaks the ✕ morph below, since the bars' 7.5px travel
     is measured from a 24px padded box. Invisible in this harness, where their
     sheet is stripped; measured against it with `?raw=1`. */
  #deviceHeader .deviceWrapper__menu {
    flex: none; width: 44px; min-width: 0; height: 44px; padding: 10px;
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    /* `align-items: stretch` is what gives the three bars their WIDTH. DI's
       `.device-icon` sets `align-items: center`, and a bar has no content, so on
       the live site the hamburger collapsed to three zero-width lines — an
       invisible button, since their own <svg> is hidden just below. Stripping
       their sheet hid this completely: the harness inherits the default,
       `stretch`, and drew it correctly all along. (`?raw=1`, 2026-07-27.) */
    align-items: stretch;
    font-size: 0; color: transparent; background: none; border: 0;
  }
  /* DI ships TWO hamburgers ON PURPOSE and switches between them by breakpoint:
     the first is `.hidden-sm` (so it shows on a phone), the second `.hidden-xs`
     (so it shows on a tablet). A blunt `+ { display: none }` here used to kill the
     second one, which meant that at tablet width DI hid the first and we hid the
     second — a header with no menu button at all. Their own visibility classes
     already guarantee only one is ever shown, so this rule is not needed.
     (Mike caught it on the walkthrough, 2026-07-27.) */
  .deviceWrapper__menu::before, .deviceWrapper__menu::after,
  .deviceWrapper__menu > span:first-child {
    content: ''; display: block; height: 2.5px; border-radius: 2px; background: var(--ink);
    transition: transform .2s ease, opacity .15s ease;
  }
  .deviceWrapper__menu svg, .deviceWrapper__menu span { display: none; }
  
  /* the burger becomes the ✕ while the menu is open — the round-6 comp's morph
     (css-r6.mjs `.mnav-btn.is-open`), on the state DI's own script sets. Their
     "Device Icon Toggle" script flips `.active` on `.icon-toggle-js` and leaves
     the drawing to the CSS, which is this file's job. The three bars are centred
     in a 24px content box, so the outer two travel 7.5px to meet in the middle. */
  .deviceWrapper__menu.active::before { transform: translateY(7.5px) rotate(45deg); }
  .deviceWrapper__menu.active::after { transform: translateY(-7.5px) rotate(-45deg); }
  /* `display: block` is restated here for the live site only: DI's
     `.device-icon.active .active { display: none }` is (0,3,0) and out-ranks our
     base `> span:first-child { display: block }` at (0,2,1), so on their cascade
     the middle bar was REMOVED the instant the panel opened while the outer two
     rotated — two thirds of the morph, and the cheaper-looking two thirds. This
     selector is (0,3,1), so the bar stays in flow and fades on its own .15s.
     The harness never showed it: their rule is not there to win. */
  .deviceWrapper__menu.active > span:first-child { opacity: 0; display: block; }
  /* ⚠ LIVE-SITE ONLY, invisible in this harness: DI ships a second ✕ as an <svg>
     inside `span.close` and reveals it with `.device-icon.active .close
     { display: flex }`. That is (0,3,0) and out-ranks our `.deviceWrapper__menu
     svg, … span { display: none }` at (0,1,1), so on the real site the open state
     would draw THEIR glyph on top of ours. Hidden explicitly at (0,3,1). */
  .deviceWrapper__menu.active > span.close { display: none; }
  
  /* THE CALL BUTTON COMES OUT OF THE MOBILE BAR (Mike, 2026-07-27).
     DI's mobile header ships two icon buttons, a phone and an address. The group
     site is nine rooftops, so a single call button in the header cannot answer
     "call who" — it pointed at the contact page rather than a number anyway. The
     address icon stays and is the one that belongs there.
     ⚠ The address icon's href still points at /contact-us/. Repointing it at the
     locations page is a MARKUP change and cannot be done from CSS — logged for
     Dealer Inspire, see the delta index. */
  /* scoped to out-specify `.deviceWrapper__buttons > div { display: flex }`,
     which is (0,1,1) and beats a lone class */
  .deviceWrapper__buttons > .deviceWrapper__buttons--phone { display: none; }
  
  .deviceWrapper__logo { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
  .deviceWrapper__logo span.logo,
  .deviceWrapper__logo a, .deviceWrapper__logo picture { display: block; }
  .deviceWrapper__logo img { height: 30px; width: auto; max-width: none; } /* R10 pin: Mike — bigger logo; the comp's `.logo img` has no mobile override, so the phone bar carries 34px too (#deviceHeader is a fixed 72px, so the band does not move) */
  
  .deviceWrapper__buttons { flex: none; display: flex; align-items: center; gap: 8px; }
  .deviceWrapper__buttons > div { display: flex; align-items: center; flex: none; }
  .deviceWrapper__buttons > div > a {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 1.5px solid var(--rule); border-radius: var(--r-pill);
  }
  .deviceWrapper__buttons svg { width: 17px; height: 17px; fill: var(--blue); }
  .deviceWrapper__buttons svg path { fill: var(--blue); }
  .deviceWrapper__buttons .icon-label { display: none; }
  
  
  /* ── 6.1 · THE MOBILE / TABLET MENU PANEL  (#fullMenu__overlay) ────────────
     The round-6 mobile menu — approach-b6's `.mnav`, `round6/css-r6.mjs` "R9
     wave-3 (Mike)" — ported onto the overlay Dealer Inspire already ships: an ink
     sheet under the sticky header, the nav in the Shults display scale, white on
     ink, gold on press, hairline rules at 12% white.
  
     THE LINKS ARE THEIRS. The comp drew five invented labels; this panel renders
     DI's real main menu (8 top-level items, 33 links with the drill-down), so it
     says whatever their menu says and cannot drift from the desktop nav.
  
     THE STATE IS THEIRS TOO — we supply no behaviour. Read from the live theme's
     own inline script (2026-07-27): the header JS opens this by adding `.open` to
     #fullOverlay and `.showTarget` to the panel (plus an inline `display:block`),
     locks the page with an inline `overflow-y:hidden` on <body>, moves focus to
     the first control inside the panel, gives everything outside the header
     `tabindex="-1"`, and on close reverses all of it and returns focus to the
     hamburger. Scroll lock and focus are therefore already handled, by them.
  
     ⚠ THE GATE IS `.open`, AND IT HAS TO BE. Their `closeOverlay()` removes
     `.open` from #fullOverlay but never removes `.showTarget` from the panel — it
     hides the panel with an inline `display:none` instead. A treatment keyed on
     `.showTarget` alone would need `!important` to beat that inline display, and
     would then hold the menu open over the page forever after the first close.
     Every rule below hangs off `#fullOverlay.open`, which is true only while an
     overlay is genuinely open, so nothing here can outlive the open state.
  
     Bounded to ≤1024px because 1025 is DI'S OWN breakpoint for turning
     #fullOverlay from a mobile sheet into a desktop dropdown. The desktop menu is
     a different element (#fulldesktopmenu__overlay) and is not touched here; the
     device header does not exist above 991 in any case.
  
     Their markup is untouched — all 33 links, their drill-down submenu, their
     back button and their close button, exactly as shipped.                    */
  @media (max-width: 1024px) {
  
    /* The frame is DI's and is SHARED with their search overlay, so it is only
       neutralised when the MENU is the panel that is open — hence `:has()`, and
       hence no rule here that a browser without it would miss destructively.
       Their frame starts at 55px (70 at ≥768) and paints a #f5f5f5 ground at
       z-index 1300, which would otherwise show as a grey band across the bottom
       of our 72px header for as long as the menu is open. */
    #fullOverlay.open:has(#fullMenu__overlay.showTarget) {
      top: 72px; bottom: 0; height: auto;
      background: none; overflow: visible;
    }
  
    /* the sheet — the comp's `.mnav`: fixed under the 72px header, ink ground,
       one scroll container, nothing behind it showing through */
    #fullOverlay.open #fullMenu__overlay.showTarget {
      position: fixed; inset: 45px 0 0; z-index: 1300;
      background: var(--ink);
      overflow-y: auto; -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    /* DI's own shells inside it carry a #f5f5f5 ground, a 100vw width and their
       own scroll box; the sheet above is the only scroller now. */
    #fullOverlay.open #fullMenu__overlay.showTarget > .wrapper,
    #fullOverlay.open #fullMenu__overlay.showTarget .device-nav-menu,
    #fullOverlay.open #fullMenu__overlay.showTarget .navbar,
    #fullOverlay.open #fullMenu__overlay.showTarget .navbar-inner {
      width: auto; height: auto; max-height: none;
      padding: 0; margin: 0;
      background: none; overflow: visible;
    }
  
    /* the close control is DI's own `button.close-overlay`, moved to the head of
       the sheet by ORDER, not by markup. It reads as a labelled row rather than a
       second bare ✕ competing with the morphed hamburger in the header. */
    #fullOverlay.open #fullMenu__overlay.showTarget .nav_section {
      display: flex; flex-direction: column; position: relative;
    }
    #fullOverlay.open #fullMenu__overlay.showTarget .close-overlay {
      order: -1;
      display: flex; align-items: center; justify-content: flex-end; gap: 8px;
      margin: 0 0 0 auto; padding: 15px 32px; min-height: 44px;
      background: none; border: 0; opacity: 1; cursor: pointer;
      font: 700 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
      color: rgba(255, 255, 255, .72);
      transition: color .15s;
    }
    #fullOverlay.open #fullMenu__overlay.showTarget .close-overlay:hover { color: #fff; }
    /* fill goes on the SVG, never on its paths: their glyph carries a
       `fill="none"` spacer path, and forcing every path to inherit the colour
       paints that spacer as a solid square straight over the ✕. */
    #fullOverlay.open #fullMenu__overlay.showTarget .close-overlay svg {
      width: 13px; height: 13px; fill: currentColor;
    }
  
    /* the list — the comp's stack: 27px/700, 16px of air, a 12% white rule.
       `:not(.dropdown-menu)` keeps this off the drill-down clone, which DI builds
       by copying a `ul.dropdown-menu` and ADDING `nav` to it — without the guard
       the clone would inherit the top level's scale and gutter. */
    #fullOverlay.open #fullMenu__overlay.showTarget ul.nav:not(.dropdown-menu) {
      display: block; width: auto; margin: 0; padding: 10px 32px 40px;
      background: none;
    }
    /* ⚠ their drill-down hides the top list behind the submenu with `.hide-item`,
       and the rule above would out-rank it ON THE LIVE SITE (two ids beat their
       one), leaving the main list showing through. Restated at higher weight. */
    #fullOverlay.open #fullMenu__overlay.showTarget ul.nav.hide-item { display: none; }
    /* `float: none` is not decoration: Bootstrap floats nav items left, so
       without it the eight links run together on one line the moment DI's own
       stylesheets are in play. The harness strips Bootstrap, so this is another
       rule that can only be proved with `?raw=1`. */
    #fullOverlay.open #fullMenu__overlay.showTarget ul.nav > li,
    #fullOverlay.open #fullMenu__overlay.showTarget .dropdown-menu.nav > li {
      display: block; float: none; width: auto;
      border-bottom: 1px solid rgba(255, 255, 255, .12);
    }
    #fullOverlay.open #fullMenu__overlay.showTarget ul.nav:not(.dropdown-menu) > li > a {
      display: block; width: auto; height: auto;
      padding: 16px 0; background: none;
      font: 700 27px/1.15 var(--font); color: #fff;
      transition: color .15s;
    }
    #fullOverlay.open #fullMenu__overlay.showTarget ul.nav:not(.dropdown-menu) > li > a:hover,
    #fullOverlay.open #fullMenu__overlay.showTarget ul.nav:not(.dropdown-menu) > li > a:active { color: var(--gold); }
  
    /* the drill-down affordance. DI draws this with FontAwesome (`content:"\f054"`)
       and this sheet ships no icon font, so it is redrawn as a border chevron —
       4.6:1 against the ink, above the 3:1 floor for a meaningful indicator. */
    #fullOverlay.open #fullMenu__overlay.showTarget ul.nav:not(.dropdown-menu) > li.menu-item-has-children > a {
      position: relative; padding-right: 30px;
    }
    #fullOverlay.open #fullMenu__overlay.showTarget ul.nav:not(.dropdown-menu) > li.menu-item-has-children > a::after {
      content: ''; position: absolute; right: 6px; top: 50%;
      width: 9px; height: 9px; margin: 0; font-size: 0;
      border: 0;
      border-right: 2.5px solid rgba(255, 255, 255, .5);
      border-bottom: 2.5px solid rgba(255, 255, 255, .5);
      transform: translateY(-50%) rotate(-45deg);
      transition: border-color .15s;
    }
    #fullOverlay.open #fullMenu__overlay.showTarget ul.nav:not(.dropdown-menu) > li.menu-item-has-children > a:hover::after {
      border-right-color: var(--gold); border-bottom-color: var(--gold);
    }
  
    /* LEVEL 2 — their drill-down. DI clones the submenu into #menu-submenu-overlay
       and slides it in over the list; only its LOOK is set here (the sliding, the
       cloning and the hiding are theirs). */
    /* the drill-down panel reads like the sheet it slid out of: same ink, same
       close row at the head (their close button is the LAST child here too, and
       `order` moves it without touching the markup) */
    /* `.active` ONLY — the closed state of this panel belongs to DI (they park it
       off-canvas at width 0), and a rule on the bare `.overlay` here would
       out-rank that and leave the drill-down stacked under the list. */
    #fullOverlay.open #fullMenu__overlay.showTarget .nav_section .overlay.active {
      display: flex; flex-direction: column;
      background: var(--ink);
    }
    #fullOverlay.open #fullMenu__overlay.showTarget .nav_section .overlay.active .menu-wrapper { order: 1; }
    /* their back row is already a flex row on the live site; stated here so the
       design owns its own layout instead of borrowing theirs */
    #fullOverlay.open #fullMenu__overlay.showTarget .device-back-button {
      display: flex; align-items: center;
      width: auto; height: 56px; line-height: 56px;
      background: rgba(255, 255, 255, .06);
      border-bottom: 1px solid rgba(255, 255, 255, .12);
    }
    #fullOverlay.open #fullMenu__overlay.showTarget .device-back-button .back {
      flex: none; display: flex; align-items: center; justify-content: center;
      width: 64px; height: 100%; padding: 0; background: none;
      border: 0; border-right: 1px solid rgba(255, 255, 255, .12);
    }
    #fullOverlay.open #fullMenu__overlay.showTarget .device-back-button .back svg { fill: #fff; stroke: none; }
    #fullOverlay.open #fullMenu__overlay.showTarget .device-back-button .title { width: auto; padding: 0 20px; }
    #fullOverlay.open #fullMenu__overlay.showTarget .device-back-button .title span {
      font: 700 17px/56px var(--font); color: #fff;
    }
    #fullOverlay.open #fullMenu__overlay.showTarget .dropdown-menu.nav {
      display: block; width: auto; margin: 0; padding: 6px 32px 32px; background: none;
    }
    /* their padding on these carries `!important`, so out-ranking it needs the
       same weapon — the one place in this section that does */
    #fullOverlay.open #fullMenu__overlay.showTarget .dropdown-menu.nav > li > a {
      display: block; height: auto; background: none;
      padding: 14px 0 !important;
      font: 600 17px/1.35 var(--font); color: rgba(255, 255, 255, .9);
    }
    #fullOverlay.open #fullMenu__overlay.showTarget .dropdown-menu.nav > li > a:hover { color: var(--gold); }
  
    /* one focus ring for everything in the sheet — gold on ink, 6.5:1 */
    #fullOverlay.open #fullMenu__overlay.showTarget a:focus-visible,
    #fullOverlay.open #fullMenu__overlay.showTarget button:focus-visible {
      outline: 2px solid var(--gold); outline-offset: -2px;
    }
  }
  
  
  /* ═══ 7 · FOOTER (shared SRP / VDP) ════════════════════════════════════════
     TRUTH: ink ground, 72px lead-in, a 4-column link grid (gap 44, 52px tail),
     then the uppercase city ribbon and the legal band.
     DI: footer.footerRow > section.footerTop (dealer + 4 widget menus)
                          > section.footerBottom (utility menu + copyright).     */
  
  footer.footerRow {
    display: block;
    background: var(--ink); color: #fff;
    padding: 72px 0 0;
  }
  
  .footerTop {
    display: grid; gap: 44px;
    max-width: var(--wrap); margin: 0 auto;
    padding: 0 var(--gut) 52px;
    background: none; color: #fff;
  }
  .footerTop .container-wide { max-width: none; margin: 0; padding: 0; }
  
  .linkWrapper { display: grid; grid-template-columns: 1.5fr 3.5fr; gap: 44px; }
  .linkWrapper__dealer { display: block; }
  .linkWrapper__dealer a.link__logo,
  .linkWrapper__dealer picture { display: block; }
  .linkWrapper__dealer img { height: 24px; width: auto; margin-bottom: 18px; }
  .linkWrapper__dealer .social ul { display: flex; gap: 14px; }
  .linkWrapper__dealer .social a {
    display: block; padding: 6px 0;
    font: 600 13px/1 var(--font); color: rgba(255, 255, 255, .7);
  }
  /* the social labels are DI's only visible text for these links (the glyph is an
     icon-font <i> we do not ship) — keep them readable rather than empty */
  .linkWrapper__dealer .social .sr-hidden { display: block !important; }
  .linkWrapper__dealer .social a:hover { color: var(--gold); }
  
  .linkWrapper__widgets > ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
  .linkWrapper__widgets .widget { display: block; }
  .linkWrapper__widgets .widgettitle {
    display: block;
    font: 700 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, .5); margin-bottom: 16px;
  }
  .linkWrapper__widgets .widgettitle--arrow { display: none; }
  .linkWrapper__widgets .menu a {
    display: block; font: 400 15px/1.5 var(--font);
    color: rgba(255, 255, 255, .85); padding: 5px 0;
  }
  .linkWrapper__widgets .menu a:hover { color: var(--gold); }
  
  /* the ribbon + legal registers, folded into DI's single footerBottom section */
  .footerBottom {
    display: block;
    border-top: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .25);
  }
  .footerBottom .container-wide {
    max-width: var(--wrap); margin: 0 auto; padding: 12px var(--gut) 13px;
  }
  .infoWrapper { display: block; }
  .infoWrapper__menu ul {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px;
    padding-bottom: 12px;
  }
  .infoWrapper__menu a {
    font: 700 13px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
    color: #fff; padding: 6px 0; display: block;
  }
  .infoWrapper__menu a:hover { color: var(--gold); }
  .infoWrapper__copyright,
  .infoWrapper__di {
    font: 400 12px/1.6 var(--font); color: rgba(255, 255, 255, .5); text-align: center;
  }
  .infoWrapper__di a { color: rgba(255, 255, 255, .5); }
  
  
  /* ═══ 8 · SRP · PAGE SHELL + GRID ══════════════════════════════════════════
     TRUTH: one .srp-layout grid — a 264px rail + the results column, inside the
     1400px SRP lane, with search / chips / count running full-lane above it.
     DI nests those three INSIDE the results column. `display: contents` on the
     two result wrappers promotes their children into the same grid so the design
     arrangement survives without touching the markup.                          */
  
  #lvrp-container {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    /* explicit spacer TRACKS carry TRUTH's 8px layout lead-in and the 20px
       srp-grid gap — the gated .applied/.refinement-filters-wrap must keep
       margin:0, so the rhythm cannot live on the element */
    grid-template-rows: auto auto auto 8px auto 20px auto auto;
    column-gap: 32px; row-gap: 0;
    max-width: var(--wrap-srp); margin: 0 auto;
    padding: 22px var(--gut) 72px;   /* 22 = the truth lane's lead-in above search */
    align-items: start;
  }
  #lvrp-results-column,
  #lvrp-results-container { display: contents; }
  
  #lightning-search    { grid-column: 1 / -1; grid-row: 1; }
  #key-features        { grid-column: 1 / -1; grid-row: 2; }
  .results-title-row   { grid-column: 1 / -1; grid-row: 3; }
  #lvrp-filters-column { grid-column: 1; grid-row: 5 / span 3; }
  .refinement-filters-wrap { grid-column: 2; grid-row: 5; }
  section.lvrp-container { grid-column: 2; grid-row: 7; }
  #lvrp-post-results-wrapper { grid-column: 1 / -1; grid-row: 8; }
  #results-banners { display: none; }
  
  #lvrp-filters-column,
  #lvrp-filters-container { display: block; min-width: 0; }
  
  
  section.lvrp-container,
  section.lvrp-container > .lvrp-results-column { display: block; min-width: 0; }
  
  #lvrp-results-wrapper { display: block; min-width: 0; }
  #loader-hits { display: none; }
  #hits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    align-items: stretch;   /* R10 pin: equal-height cards per row (mirrors comp .srp-grid) */
    min-width: 0;
  }
  /* the grid cell is .result-wrap but the CARD is .hit inside it — the cell has to
     pass the stretched row height through, or the card keeps its content height and
     the CTA stack's margin-top:auto has no free space to absorb */
  .result-wrap {
    display: flex; flex-direction: column;
    min-width: 0; height: auto; overflow: visible;
  }
  .result-wrap > .hit { flex: 1; }
  
  /* the mobile filter drawer — DI's ≤sm affordance, off at desktop */
  .lvrp-filters-mobile-wrapper { display: none; }
  
  
  /* ═══ 9 · SRP · INVENTORY SEARCH BAR ═══════════════════════════════════════ */
  #lightning-search {
    display: flex; align-items: center; gap: 12px;
    height: 56px; padding: 0 18px;
    border: 1.5px solid var(--rule); border-radius: var(--r-pill);
    background: #fff; color: var(--soft);
  }
  /* our design keeps the search bar at every width — the .hidden-xs/.hidden-sm on
     DI's wrapper is a mobile-drawer handoff we replace, not a duplicate node */
  #lightning-search .results-actions { display: flex !important; flex: 1; min-width: 0; }
  #lightning-search .search-wrap {
    display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
  }
  #lightning-search .di-voice-float { flex: none; display: flex; align-items: center; }
  #lightning-search .di-voice-mic { width: 20px; height: 20px; fill: var(--soft); }
  #lightning-search .search-input {
    flex: 1; min-width: 0; height: 52px;
    font: 400 16.5px/1 var(--font); color: var(--ink);
    background: none; border: 0; outline: 0;
  }
  #lightning-search .search-input::placeholder { color: var(--soft); }
  #lightning-search #clear-search { flex: none; }
  #lightning-search .clear-all {
    font: 600 15px/1 var(--font); color: var(--blue); white-space: nowrap; cursor: pointer;
  }
  #lightning-search .clear-all.disabled { color: var(--soft); }
  
  
  /* ═══ 10 · SRP · QUICK-FACET CHIP ROW ══════════════════════════════════════ */
  #key-features { display: flex; align-items: center; gap: 10px; padding: 12px 0; }
  #key-features .results-featured-facets { display: contents !important; }
  #key-features .quick-facets { display: contents; }
  #key-features .quick-facets-container {
    display: flex; align-items: center; gap: 10px;
    flex: 1; min-width: 0; overflow: hidden;
  }
  #key-features .quick-facets__list {
    display: flex; align-items: center; gap: 10px; order: 2;
    flex: 1; min-width: 0; overflow: hidden;
  }
  .pagination-arrow--left { order: 1; }
  .pagination-arrow--right { order: 3; }
  #key-features .quick-facets__list .facet-link {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    height: 40px; padding: 0 16px;
    border: 1.5px solid var(--rule); border-radius: var(--r-chip);
    background: #fff; color: var(--ink);
    font: 600 13.5px var(--font); line-height: normal; text-align: start;
    white-space: nowrap; transition: border-color .15s;
  }
  #key-features .quick-facets__list .facet-link:hover { border-color: var(--blue); }
  #key-features .feature-icon { display: flex; align-items: center; flex: none; }
  #key-features .feature-icon svg { width: 18px; height: 18px; fill: var(--blue); }
  
  .pagination-arrow--left, .pagination-arrow--right {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 34px; height: 30px;
    border: 1.5px solid var(--rule); border-radius: var(--r-pill);
    background: #fff; color: var(--ink);
    font: 400 20px/30px var(--font); text-align: start;
  }
  .pagination-arrow--left svg, .pagination-arrow--right svg {
    width: 12px; height: 12px; fill: var(--ink);
  }
  
  
  /* ═══ 11 · SRP · COUNT + VIEW TOGGLE + SORT ════════════════════════════════ */
  .results-title-row { display: flex; align-items: center; gap: 16px; padding: 18px 0 12px; }
  .results-title-row #results-title { display: contents; }
  .results-title-row h1 {
    margin-right: auto;
    font: 700 30px/1.5 var(--font); color: var(--ink);
  }
  .results-title-row h1 .stats { font: inherit; color: inherit; }
  
  #results-pagination-container { display: flex; align-items: center; gap: 16px; }
  #layout-toggle { display: contents; }
  .layout-view-toggle { display: flex; align-items: center; gap: 6px; }
  .layout-view-toggle .grid-view-toggle a,
  .layout-view-toggle .list-view-toggle a {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 1.5px solid var(--rule); border-radius: var(--r-chip);
    background: #fff; color: var(--soft);
  }
  .layout-view-toggle svg { width: 15px; height: 15px; }
  .layout-view-toggle svg g { fill: var(--soft); }
  .layout-view-toggle .vrp-layout-toggle-option.active {
    background: var(--ink); border-color: var(--ink);
  }
  .layout-view-toggle .vrp-layout-toggle-option.active svg g { fill: #fff; }
  
  /* our design keeps the sort control at every width */
  #sort-dropdown.hidden-xs.hidden-sm { display: block !important; }
  .sort-dropdown {
    position: relative;
    display: flex; align-items: center;
    width: 190px; height: 40px; padding: 0 12px;
    border: 1.5px solid var(--rule); border-radius: 6px;
    background: #fff; color: var(--ink);
    font: 600 13.5px/1 var(--font); text-align: left;
    cursor: pointer;
  }
  .sort-dropdown > span:first-child { color: var(--soft); flex: none; }
  .sort-dropdown .sort-dropdown--index {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: flex; align-items: center;
  }
  .sort-dropdown .sort-dropdown--index::after {
    content: ''; width: 12px; height: 7px; flex: none; margin-left: auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231B2A52' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat center;
  }
  .sort-dropdown .sort-dropdown--content {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 100%; z-index: 40;
    background: #fff; border: 1px solid var(--rule); border-radius: var(--r-panel);
    box-shadow: 0 28px 56px -20px rgba(27, 42, 82, .32); padding: 6px;
  }
  .sort-dropdown .sort-dropdown--content li {
    padding: 10px 12px; font: 600 14.5px/1.2 var(--font); color: var(--ink);
  }
  .sort-dropdown .sort-dropdown--content li.active { background: var(--cloud); color: var(--blue); }
  
  
  /* ═══ 12 · SRP · APPLIED REFINEMENTS ═══════════════════════════════════════ */
  /* our design keeps the applied-filter chips at every width */
  .refinement-filters-wrap.hidden-xs.hidden-sm { display: flex !important; }
  .refinement-filters-wrap { display: flex; align-items: center; gap: 8px; }
  ul.refinement-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  li.refinement { display: flex; }
  
  a.clear-refinement, a.filter-remove {
    display: inline-flex; align-items: center;
    height: 38px; padding: 0 16px;
    border: 1.5px solid var(--rule); border-radius: var(--r-chip);
    background: #fff; color: var(--ink);
    font: 600 14px/1 var(--font);
    white-space: nowrap; cursor: pointer; transition: border-color .15s, background .15s;
  }
  a.filter-remove:hover { border-color: var(--blue); }
  a.clear-refinement { background: var(--ink); border-color: var(--ink); color: #fff; }
  a.filter-remove svg { width: 13px; height: 13px; margin-left: 7px; fill: var(--soft); }
  
  
  /* ═══ 13 · SRP · FILTER RAIL ═══════════════════════════════════════════════
     TRUTH .r3-rail: a 264px column — condition toggles, the price panel, then a
     2-up grid of icon facet tiles (264×631 at 1440).
     DI renders all of it flat into #facets-menu > #react-facets.               */
  
  #facets-menu {
    display: flex; flex-direction: column; gap: 14px;
    width: 100%; min-width: 0;
  }
  /* DI's empty desktop-toggle rail would otherwise eat one 14px system gap */
  #facets-menu > .facets-toggles { display: none; }
  /* TRUTH stacks three groups 14px apart; DI renders them FLAT into #react-facets.
     One grid with 8px gaps + two 6px-taller leading tracks reproduces both the
     14px system gaps and the 8px tile gap — without margins on the gated nodes. */
  #react-facets {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 38px 111px repeat(6, 71px);
    gap: 8px; align-content: start;
  }
  
  /* ── condition toggles ──────────────────────────────────────────────────── */
  .facet.type-facet {
    grid-column: 1 / -1; align-self: start; height: 32px;
    display: flex; gap: 6px;
    border: 1.5px solid var(--rule); border-radius: var(--r-pill);
    background: #fff; overflow: hidden;
  }
  .facet.type-facet .type-facet-container { display: contents; }
  .facet.type-facet .facet-link {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 9px 0;
    font: 700 12px/1 var(--font); letter-spacing: .04em; text-transform: uppercase;
    color: var(--soft); background: none; border: 0; cursor: pointer;
  }
  .facet.type-facet .facet-link.facet-refined { background: var(--ink); color: #fff; }
  .facet.type-facet .switch-label { font: inherit; color: inherit; cursor: pointer; }
  .facet.type-facet .switch-toggle { display: none; }
  
  /* ── price panel ────────────────────────────────────────────────────────── */
  .facet.slider-facet {
    grid-column: 1 / -1; align-self: start; height: 105px;
    display: block; padding: 16px 14px 14px;
    border: 1.5px solid var(--rule); border-radius: var(--r-card);
    background: #fff;
  }
  .facet.slider-facet h5 {
    font: 700 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink); margin-bottom: 14px;
  }
  .slider-facet-container, .range-slider--with-input { display: block; }
  .range-slider {
    position: relative; height: 4px; border-radius: var(--r-pill);
    background: var(--rule); margin: 0 6px 14px;
  }
  /* TRUTH .r3-track: a rule-coloured rail, a blue .fill between the two handles and
     two white .dot handles. DI's react-slider ships the same anatomy as real nodes —
     three .range-slider-track segments (0 = below the low thumb, 1 = the SELECTED
     range, 2 = above the high thumb) plus two .range-slider-thumb handles, each
     positioned by an INLINE left/right React writes from live values. So the fill is
     track-1, not a hard-coded ::after: this styles the real control, which keeps
     working when DI's slider drives it in production. */
  .range-slider .range-slider-track {
    top: 0; height: 4px; border-radius: var(--r-pill);
  }
  .range-slider .range-slider-track-1 { background: var(--blue); }
  .range-slider .range-slider-thumb {
    top: 50%; width: 16px; height: 16px; border-radius: var(--r-pill);
    transform: translate(-50%, -50%);
    background: #fff; border: 3px solid var(--blue);
    cursor: grab;
  }
  .range-slider .range-slider-thumb:focus-visible {
    outline: 2px solid var(--blue); outline-offset: 3px;
  }
  .slider-facet__input, .slider-facet__input__controls {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
  }
  .slider-facet__input__controls { flex: 1; }
  .slider-facet__input--low, .slider-facet__input--high {
    display: flex; align-items: center;
    padding: 7px 10px; border: 1.5px solid var(--rule); border-radius: var(--r-pill);
    font: 600 12.5px/1 var(--font); color: var(--ink);
  }
  /* the two value inputs ARE the truth's `.vals span` pills — the UA chrome (border,
     inset background, spin buttons) has to go so only our pill reads */
  .slider-facet__input input {
    width: 47px; min-width: 0; padding: 0; margin: 0;
    border: 0; background: none; box-shadow: none; appearance: none;
    font: inherit; color: inherit; text-align: center;
  }
  /* the truth's pills are content-sized <span>s (66px / 70px at the pinned values).
     field-sizing reproduces that on a real input, so the pill keeps hugging its value
     when DI feeds a different price range; the 47px above is the fallback. */
  @supports (field-sizing: content) {
    .slider-facet__input input { width: auto; field-sizing: content; }
  }
  .slider-facet__input input:focus { outline: none; }
  .slider-facet__input--low input { text-align: left; }
  .slider-facet__input--high input { text-align: right; }
  /* DI puts a dash node between the two pills; the truth pushes them apart instead */
  .slider-facet__input-dash { display: none; }
  
  /* ── icon facet tiles ───────────────────────────────────────────────────── */
  .facet-toggle-container { display: block; height: 71px; min-width: 0; }
  .facet-toggle-container .facet-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; height: 100%; padding: 15px 6px 12px;
    border: 1.5px solid var(--rule); border-radius: var(--r-tile);
    background: #fff; color: var(--ink);
    font: 600 12px/1 var(--font);
    cursor: pointer; transition: border-color .15s;
  }
  .facet-toggle-container .facet-toggle:hover { border-color: var(--blue); }
  .facet-toggle-container .facet-toggle > span { display: flex; align-items: center; flex: none; }
  .facet-toggle-container .facet-toggle svg { width: 22px; height: 22px; fill: var(--blue); }
  .facet-toggle-container .facet-label { font: inherit; color: inherit; }
  
  
  /* ═══ 14 · SRP · THE VEHICLE CARD ══════════════════════════════════════════
     TRUTH .vcard (333×714 at 1440): photo → carousel dots → body
     (kicker / name / ids / tabs / ladder / pay link / 3-CTA stack).
     DI .result-wrap > .hit: photo is a swiper, the ids are TWO rows, the CTAs
     live outside .hit-content, and the pay link renders ABOVE the ladder.      */
  
  .result-wrap .hit {
    display: flex; flex-direction: column;
    width: 100%; margin: 0; height: auto;
    background: #fff;
    border: 1.5px solid var(--rule); border-radius: var(--r-card);
    overflow: hidden;
    transition: box-shadow .18s, transform .18s, border-color .18s;
  }
  .result-wrap .hit:hover {
    box-shadow: 0 22px 48px -18px rgba(27, 42, 82, .22);
    transform: translateY(-3px); border-color: #CBD4EA;
  }
  
  /* ── photo ──────────────────────────────────────────────────────────────── */
  .hit-image { position: relative; display: block; background: var(--cloud); }
  .hit-image .swiper, .hit-image .swiper-wrapper { display: block; width: auto; }
  .hit-image .swiper-slide {
    width: 100% !important; margin: 0 !important; display: none;
  }
  .hit-image .swiper-slide:first-child { display: block; }
  .hit-image .hit-link { display: block; }
  .hit-image img { width: 100%; height: auto; display: block; }
  .hit-image hr,
  .hit-image .swiper-button-prev, .hit-image .swiper-button-next,
  .hit-image .swiper-notification, .hit-image .swiper-slide-overlay { display: none; }
  
  /* carousel dots — TRUTH .r3-dots (331×16) */
  .hit-image .swiper-pagination { display: block; position: static; }
  .swiper-pagination-bullets {
    display: flex; justify-content: center; gap: 5px; padding: 8px 0 2px;
  }
  .swiper-pagination-bullet {
    width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--rule);
  }
  .swiper-pagination-bullet-active { background: var(--ink); }
  
  /* ── the Covered-For-Life badge ──────────────────────────────────────────
     MARKUP GAP: DI's card has no badge node. Painted as a ::before on the photo
     frame, to the exact truth spec (gold ground, INK type, the extracted seal). */
  .result-wrap.new-vehicle .hit-image::before,
  .result-wrap.cpo-vehicle .hit-image::before {
    content: "Covered For Life";
    position: absolute; left: 10px; top: 10px; z-index: 3;
    display: inline-flex; align-items: center;
    height: 31px; padding: 7px 11px 7px 34px;
    background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 992 995'%3E%3Cpath d='M296.7 522.5 L426.7 654.2 L676.1 402.5 L614.6 339.9 L429.1 527.6 L359.5 458.3 L296.7 522.5 M619.4 891.9 C550.8 880.4 516.7 995.2 455.5 948.0 C415.7 917.4 394.9 885.1 353.2 891.9 L292.7 901.9 C267.3 906.1 242.8 894.2 233.9 869.4 L214.4 814.8 C207.6 795.7 193.7 778.9 174.0 771.7 L117.6 751.4 C92.7 742.4 78.2 719.4 82.8 692.4 L93.1 631.8 C96.8 610.6 89.3 590.8 76.2 575.0 L38.3 529.5 C0.0 483.4 62.1 443.5 87.9 401.5 C107.9 369.0 70.8 308.3 86.8 269.7 C102.9 230.8 178.1 236.0 201.8 202.3 C216.1 181.9 223.1 154.8 230.9 131.8 C257.4 53.7 335.0 118.1 385.8 98.8 C408.2 90.4 426.8 69.0 443.9 54.3 C507.4 0.0 540.2 80.7 585.5 98.5 C637.8 119.1 717.0 51.4 742.8 135.2 C749.6 157.0 756.7 182.8 770.4 202.0 C795.0 236.3 868.4 230.6 885.6 269.7 C901.8 306.5 866.1 364.4 883.5 398.9 C894.2 420.0 911.7 436.4 926.7 454.7 C991.9 533.9 866.5 554.6 879.5 631.9 L889.6 692.5 C894.1 719.5 880.1 742.2 855.0 751.3 L798.4 771.7 C780.8 778.1 765.9 793.9 759.5 811.2 L738.7 867.8 C729.3 893.4 706.9 906.5 679.8 902.0 L619.4 891.9 Z' fill='currentColor' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat 11px center / 17px 17px;
    color: var(--ink);
    font: 800 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
    border-radius: var(--r-pill);
    pointer-events: none;
  }
  
  /* ── body ───────────────────────────────────────────────────────────────── */
  .hit-content { display: block; padding: 8px 20px 0; flex: 1; }
  .hit-content-title-wrap { display: block; }
  .hit-content-title-wrap > a.hit-link { display: block; }
  .hit-content-title-wrap h2.result-title { display: block; font: inherit; }
  
  .title-top { display: block; font: 400 14px/1.5 var(--font); color: var(--soft); }
  .title-bottom { display: block; font: 700 16.5px/1.3 var(--font); color: var(--ink); }
  
  /* Stock + VIN: TRUTH prints ONE line ("Stock: X · VIN: Y"); DI ships two block
     rows. The VIN row is pulled back onto the stock line and set to the far end,
     so the pair reads as one 21px line and .stock-row keeps the truth box.
     (Logged in MANIFEST.md as the stock/VIN collapse.) */
  .stock-row { display: block; height: 21px; font: 400 14px/1.5 var(--font); color: var(--soft); }
  .vin-row {
    display: block; height: 21px; margin-top: -21px; text-align: right;
    font: 400 14px/1.5 var(--font); color: var(--soft);
  }
  
  /* ── tabs ───────────────────────────────────────────────────────────────── */
  .vehicle-card-tab-controls {
    display: flex; gap: 0px; margin-top: 10px;
    border: 0 solid var(--rule); border-bottom-width: 1px;
  }
  .vehicle-card-tab-controls .tab-control {
    flex: 1; padding: 9px 0;
    font: 700 12.5px/1 var(--font); letter-spacing: .04em;
    color: var(--soft); background: none;
    border-bottom: 2px solid transparent;
  }
  .vehicle-card-tab-controls .tab-control.active {
    color: var(--ink); border-bottom-color: var(--gold);
  }
  
  /* ── the price ladder ───────────────────────────────────────────────────── */
  .pricing-tab, .details-tab { display: block; margin: 0; }
  .result-price { display: flex; flex-direction: column; }
  /* TRUTH order is ladder → payment link; DI ships the link first */
  .result-price .advanced-pricing-vrp-wrapper { order: 1; }
  .result-price .hit-price { order: 2; display: flex; margin: 8px 0 2px;
    font: 700 12.5px/1 var(--font); }
  
  .advanced-pricing-vrp-wrapper,
  .advanced-pricing-vrp-card,
  .advanced-pricing-vrp-card .price-stack { display: block; }
  /* the per-card FTC copy DI hides behind the page-level disclaimer block —
     the copy itself is untouched and still ships in the DOM, verbatim */
  .advanced-pricing-vrp-card .price-stack > p,
  .advanced-pricing-vrp-wrapper > p { display: none; }
  
  .advanced-pricing-stack {
    display: block; margin-top: 8px;
    font: 400 13.5px/1.5 var(--font); color: var(--ink);
  }
  .advanced-pricing-stack hr { display: none; }
  .advanced-pricing-stack .incentives { display: contents; }
  
  .advanced-pricing-stack .price-block {
    display: flex; gap: 10px; padding: 2px 0;
    font: 400 13.5px/1.35 var(--font); color: var(--soft);
  }
  .advanced-pricing-stack .price-block > a {
    display: flex; justify-content: space-between; align-items: start;
    gap: 10px; width: 100%; color: inherit;
  }
  .advanced-pricing-stack .price-label { max-width: 64%; font: inherit; color: inherit; }
  .advanced-pricing-stack .price {
    /* NB: TRUTH's card ladder resets font-variant via a later `font:` shorthand —
       the supporting prices are PROPORTIONAL figures, not tabular */
    font: 700 16px/1.2 var(--font); color: inherit;
  }
  .advanced-pricing-stack .price-block.our-price {
    padding: 7px 0 2px; font-weight: 700; color: var(--ink);
  }
  .advanced-pricing-stack .price-block.our-price .price-label { font-weight: 700; }
  /* DI nests an inline-styled <span> inside the final label on some feeds —
     the size rule has to reach through it (documented deliberate !important) */
  .advanced-pricing-stack .price-block.our-price .price-label span[style],
  .advanced-pricing-stack .price-block.our-price .price-label span[style] strong {
    font-size: 13.5px !important; font-weight: 700 !important; color: var(--ink) !important;
  }
  .advanced-pricing-stack .price-block.our-price .price {
    font: 800 22px/1 var(--font); color: var(--ink);
  }
  
  /* the payment link (TRUTH .pay-link register) */
  .hit-price__customize {
    display: inline-block;
    font: 700 12.5px/1 var(--font); color: var(--blue); cursor: pointer;
  }
  .hit-price__customize:hover { color: var(--blue-up); }
  
  /* ── the 3-CTA stack ────────────────────────────────────────────────────── */
  .hit-additional-ctas {
    display: flex; flex-direction: column; gap: 8px;
    position: static; margin-top: auto; padding: 14px 20px 16px; /* R10 pin: equal-height cards — CTAs pin to the card bottom (mirrors comp margin-top:auto; 14px min gap moved into padding so the shorthand can't reset it) */
  }
  /* DI's lightning CTAs ship visibility:hidden until their JS wires them */
  .hit-additional-ctas [data-order],
  .hit-additional-ctas .lightning-custom-cta,
  .hit-additional-ctas a {
    visibility: visible !important;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 44px; padding: 0 30px;
    border-radius: var(--r-pill);
    font: 700 15px/1 var(--font); letter-spacing: .01em;
    background: #fff; color: var(--ink); border: 1.5px solid var(--rule);
    cursor: pointer; white-space: nowrap; overflow: hidden;
    transition: background .15s, border-color .15s, transform .1s;
  }
  .hit-additional-ctas [data-order="0"] {
    background: var(--blue); color: #fff; border: 0;
  }
  .hit-additional-ctas [data-order="0"]:hover { background: var(--blue-up); }
  .hit-additional-ctas [data-order]:not([data-order="0"]):hover {
    background: var(--cloud); border-color: var(--soft);
  }
  .hit-additional-ctas .form-text { font: inherit; color: inherit; }
  
  
  /* ═══ 15 · SRP · PAGER ═════════════════════════════════════════════════════
     ⚠ NOT 1:1 with TRUTH. DI ships prev / "Page 1 of 21" / next — there are no
     page-number nodes to style. Skinned to the truth pager's pill language;
     the missing numbers are a logged markup gap, not a CSS goal.               */
  .results-pagination {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 26px 0 4px;
  }
  .results-pagination > div { display: contents; }
  .pagination-toggle { display: flex; align-items: center; gap: 8px; }
  .results-pagination .pagination-arrow, .pagination-state {
    display: flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px;
    border: 1.5px solid var(--rule); border-radius: 10px;
    font: 700 14px/1 var(--font); color: var(--ink);
  }
  .results-pagination .pagination-arrow a { display: flex; align-items: center; gap: 6px; color: inherit; }
  .results-pagination .pagination-arrow:hover { border-color: var(--blue); }
  .results-pagination .pagination-arrow.disable { opacity: .4; }
  .pagination-prev a::before,
  .pagination-next a::after {
    content: ''; width: 7px; height: 12px; display: block;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12'%3E%3Cpath d='M1 1l5 5-5 5' stroke='%231B2A52' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat center;
  }
  .pagination-prev a::before { transform: rotate(180deg); }
  .pagination-state { border-color: var(--blue); background: var(--blue); color: #fff; }
  .results-pagination .show-xs { display: none; }
  
  
  /* ═══ 16 · SRP · DISCLAIMER ════════════════════════════════════════════════
     ⚠ FTC copy is VERBATIM on both sides — never reworded, never hidden here.   */
  .results-disclaimers, #vehicle-disclaimer {
    display: block;
    border-top: 1px solid var(--rule);
    padding: 40px 0 72px;
    color: var(--ink);
  }
  .results-disclaimers .new-disclaimer,
  .results-disclaimers .single-disclaimer,
  #vehicle-disclaimer .disclaimer-body { display: block; }
  .results-disclaimers p, #vehicle-disclaimer p {
    font: 400 13px/1.7 var(--font); color: var(--soft); max-width: 105ch;
  }
  .results-disclaimers p + p, #vehicle-disclaimer p + p { margin-top: 12px; }
  /* DI opens the block with <strong>Disclaimer:</strong> where TRUTH prints an
     uppercase h4 — same register, same words */
  .results-disclaimers p:first-child strong,
  #vehicle-disclaimer p:first-child strong {
    display: block;
    font: 700 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
    color: var(--soft); margin-bottom: 2px;
  }
  
  
  /* ═══ 17 · VDP · PAGE GRID + COMPONENTS ════════════════════════════════════
     TRUTH: a full-bleed blue title band, then ONE 1180px lane (`.wrap.r3-vdp`)
     that is a 1.55fr / 1fr grid — gallery + the whole info stack in column 1,
     the sticky buybox rail spanning both rows in column 2 — then two full-bleed
     tail bands (similar vehicles, disclaimer).
  
     DI ships the same regions in a DIFFERENT nesting: `main.vdp` holds
     `section.vdp-hero` (title wrap + gallery wrap + price-box wrap) and
     `section.vdp-components` (basic info → key features → CTA row → vehicle
     details → premium → payment → similar → disclaimer, each buried two
     wrappers deep). `display: contents` on every one of those pass-through
     wrappers promotes the real components into ONE named-line grid on
     `main.vdp`, so the truth's arrangement survives without touching markup.
  
     Grid columns (named): full | main | 40px | rail | full.
     `main` + `rail` reproduce the 1.55fr/1fr split of the 1180 lane exactly
     (692.94 / 447.06 at 1440); the outer tracks give the tail bands their
     full-bleed. Rows are EXPLICIT (§17.1) because several gated components are
     pinned to margin:0 — the section rhythm has to live in spacer TRACKS.     */
  
  /* ── 17.1 · the page grid ───────────────────────────────────────────────── */
  main.vdp {
    --vdp-gap: 40px;
    --vdp-main: calc((var(--wrap) - var(--vdp-gap)) * 0.60784);   /* 1.55 / 2.55 */
    --vdp-rail: calc((var(--wrap) - var(--vdp-gap)) * 0.39216);   /* 1.00 / 2.55 */
  
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--gut), 1fr)
      [content-start main-start] minmax(0, var(--vdp-main)) [main-end]
      var(--vdp-gap)
      [rail-start] minmax(0, var(--vdp-rail)) [rail-end content-end]
      minmax(var(--gut), 1fr) [full-end];
    grid-template-rows:
      auto   /*  1 · title band (full bleed)        */
      30px   /*  2 · lane lead-in (r3-vdp padding-top) */
      auto   /*  3 · gallery      | buybox rail     */
      auto   /*  4 · basic info                     */
      auto   /*  5 · key features                   */
      auto   /*  6 · CTA row                        */
      auto   /*  7 · vehicle details (accordions)   */
      34px   /*  8 · section lead-in                */
      auto   /*  9 · premium options                */
      34px   /* 10 · section lead-in                */
      auto   /* 11 · payment options                */
      72px   /* 12 · lane tail (r3-vdp padding-bottom) */
      44px   /* 13 · similar band lead-in (rule at its top) */
      auto   /* 14 · similar vehicles               */
      8px    /* 15 · similar band tail              */
      auto;  /* 16 · disclaimer                     */
    align-items: start;
  }
  @media (min-width: 1600px) { main.vdp { --wrap: 1560px; } }   /* truth caps the VDP lane at 1560 */
  
  /* the pass-through wrappers — promoted, never styled */
  section.vdp-hero,
  .vdp-header-wrap,
  section.vdp-components,
  .vdp-component-row,
  .vdp-component-inner,
  .vdp-price-box-wrap__sticky,
  #vdp-sidebar-wrapper { display: contents; }
  
  /* the full-bleed rule that opens the similar-vehicles band (truth: the
     border-top on .vdp-similar; there is no DI element to carry it) */
  main.vdp::before {
    content: ''; grid-column: full; grid-row: 13;
    align-self: start; height: 0;
    border-top: 1px solid var(--rule);
  }
  
  header.vdp-title    { grid-column: full;    grid-row: 1; }
  .vdp-gallery-wrap   { grid-column: main;    grid-row: 3; }
  .vdp-price-box-wrap { grid-column: rail;    grid-row: 3 / 12; }
  .vdp-basic-info     { grid-column: main;    grid-row: 4; }
  .vdp-key-features   { grid-column: main;    grid-row: 5; }
  .vdp-cta-row        { grid-column: main;    grid-row: 6; }
  #vehicle-details    { grid-column: main;    grid-row: 7; }
  #premium-options    { grid-column: main;    grid-row: 9; }
  #payment-options    { grid-column: main;    grid-row: 11; }
  #similar-vehicles   { grid-column: content; grid-row: 14; }
  #vehicle-disclaimer { grid-column: content; grid-row: 16; }
  /* the tail bands sit in the 1180 lane but keep the wrap's 32px inset — and the
     gate pins their PADDING to the truth's 0, so the inset rides on margin */
  #similar-vehicles, #vehicle-disclaimer { margin-left: var(--gut); margin-right: var(--gut); }
  
  /* every DI component is a plain block inside its lane */
  .vdp-component { display: block; height: auto; min-width: 0; }
  .vdp-component > .vdp-component__container,
  .vdp-component > .vdp-component__container > .component-content-details { display: block; min-width: 0; }
  /* the section headings ARE the truth's .r3-sechead (a sibling there, nested here) */
  .vdp-component > h2.component-title,
  #similar-vehicles > h2.section-title {
    display: block;
    font: 800 15px/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink); margin: 34px 0 14px;
  }
  
  
  /* ── 17.2 · title band ──────────────────────────────────────────────────── */
  /* TRUTH: .r3-titleband is a bare full-bleed blue block (padding 0); the flex
     row lives on its inner .wrap. DI's header.vdp-title is the band and
     .vdp-title__inner the row — same two-level shape, different names.        */
  header.vdp-title {
   padding: 0;
    background: var(--blue); color: #fff;
  }
  .vdp-title__inner {
    display: flex; align-items: center; gap: 18px;
    min-height: 58px;
    max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut);
  }
  .vdp-title__vehicle-info,
  .vdp-title__share-print { display: contents; }
  
  header.vdp-title h1 {
    /* 51.36 = the condition chip's rendered width (33.36) + the 18px row gap.
       The chip is out of flow, so the h1 reserves its slot explicitly; the chip
       is anchored to the RIGHT of that slot so a longer word ("CERTIFIED")
       grows into the gutter instead of over the title. Once the chip becomes a
       real sibling flex item (MANIFEST delta) the reservation goes away. */
    position: relative; margin-left: 51.36px;
    font: 700 22px/1.5 var(--font); color: #fff; white-space: nowrap;
  }
  /* MARKUP DELTA: truth keeps the condition chip OUTSIDE the h1 as a sibling
     flex item; DI nests it INSIDE as <strong>. Taking it out of flow (absolute)
     reproduces the truth's lockup — chip, 18px, title — without letting it
     inflate the h1's own box. Logged in MANIFEST.md. */
  header.vdp-title .vdp-title__vehicle-type {
    position: absolute; right: 100%; margin-right: 18px; top: 50%; transform: translateY(-50%);
    font: 800 13px/1 var(--font); letter-spacing: .1em; color: var(--gold);
    /* MANIFEST §V3 — MIKE'S CALL (2026-07-27): visual parity wins. The comp's caps
       come from CONTENT ("NEW"); DI emits "New", so this transform closes the visible
       delta. The gate reads it as ONE fingerprint mismatch (truth textTransform:none)
       — a documented false-positive of method, waived. Production-best fix stays §V3:
       uppercase the condition in DI's title template, then remove this line. */
    text-transform: uppercase;
  }
  /* VIN + stock: truth prints ONE line, DI two <li>. Collapsed inline with the
     truth's own "·" separator. */
  header.vdp-title .vdp-title__vin-stock {
    display: block; white-space: nowrap;
    font: 600 12px/1 var(--font); letter-spacing: .06em; opacity: .78;
  }
  header.vdp-title .vdp-title__vin-stock li { display: inline; text-transform: uppercase; }
  header.vdp-title .vdp-title__vin-stock li + li::before { content: ' · '; }
  
  /* share / print: DI hangs both off font-awesome <i> glyphs we do not ship —
     the truth's own two characters are drawn back in CSS. */
  header.vdp-title .share-print-list {
    margin-left: auto; display: flex; gap: 14px;
    font: 400 16px/1.5 var(--font); opacity: .9;
  }
  header.vdp-title .share-print-list li,
  header.vdp-title .share-print-list a { display: block; color: #fff; }
  header.vdp-title .list-share::before { content: '\21EA'; }
  header.vdp-title .list-print::before { content: '\2399'; }
  
  
  /* ── 17.4 · the buybox rail ─────────────────────────────────────────────── */
  /* TRUTH .r3-rail-vdp: a stretched column holding the sticky .buybox. DI's
     .vdp-price-box-wrap is the same rail once its two sticky/sidebar
     pass-throughs are promoted (§17.1).                                        */
  .vdp-price-box-wrap {
    display: flex; flex-direction: column; gap: 14px;
    align-self: stretch; min-width: 0;
  }
  #price-box {
    display: block;
    position: sticky; top: 96px;
    background: none;
    border: 1.5px solid var(--rule); border-radius: 18px; padding: 30px;
    box-shadow: 0 24px 56px -28px rgba(27, 42, 82, .25);
  }
  
  /* MARKUP GAP: DI's price box has no Covered-For-Life badge and no dealer
     attribution line. Both are painted as pseudo-elements to the truth's spec —
     the seal is the extracted brand vector, never redrawn. On-platform these
     should become real nodes in the price-box template (see MANIFEST.md). */
  #price-box::before {
    content: "Covered For Life";
    display: inline-flex; align-items: center;
    height: 31px; padding: 7px 11px 7px 34px; margin-bottom: 14px;
    background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 992 995'%3E%3Cpath d='M296.7 522.5 L426.7 654.2 L676.1 402.5 L614.6 339.9 L429.1 527.6 L359.5 458.3 L296.7 522.5 M619.4 891.9 C550.8 880.4 516.7 995.2 455.5 948.0 C415.7 917.4 394.9 885.1 353.2 891.9 L292.7 901.9 C267.3 906.1 242.8 894.2 233.9 869.4 L214.4 814.8 C207.6 795.7 193.7 778.9 174.0 771.7 L117.6 751.4 C92.7 742.4 78.2 719.4 82.8 692.4 L93.1 631.8 C96.8 610.6 89.3 590.8 76.2 575.0 L38.3 529.5 C0.0 483.4 62.1 443.5 87.9 401.5 C107.9 369.0 70.8 308.3 86.8 269.7 C102.9 230.8 178.1 236.0 201.8 202.3 C216.1 181.9 223.1 154.8 230.9 131.8 C257.4 53.7 335.0 118.1 385.8 98.8 C408.2 90.4 426.8 69.0 443.9 54.3 C507.4 0.0 540.2 80.7 585.5 98.5 C637.8 119.1 717.0 51.4 742.8 135.2 C749.6 157.0 756.7 182.8 770.4 202.0 C795.0 236.3 868.4 230.6 885.6 269.7 C901.8 306.5 866.1 364.4 883.5 398.9 C894.2 420.0 911.7 436.4 926.7 454.7 C991.9 533.9 866.5 554.6 879.5 631.9 L889.6 692.5 C894.1 719.5 880.1 742.2 855.0 751.3 L798.4 771.7 C780.8 778.1 765.9 793.9 759.5 811.2 L738.7 867.8 C729.3 893.4 706.9 906.5 679.8 902.0 L619.4 891.9 Z' fill='currentColor' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat 11px center / 17px 17px;
    color: var(--ink);
    font: 800 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
    border-radius: var(--r-pill);
  }
  /* #price-box::after {
    content: "at Shults Subaru · Jamestown, New York";
    display: block;
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--rule);
    font: 400 14.5px/1.5 var(--font); color: var(--soft);
  } */
  
  /* the pricing pass-throughs (these MUST out-specify §14's SRP ladder rules,
     which match on the shared .advanced-pricing-stack / .price-block hooks) */
  #price-box .vdp-price-box__pricing,
  #price-box .pricing-item,
  #price-box .advanced-pricing-vdp-wrapper,
  #price-box #advanced-pricing-vdp-card,
  #price-box .advanced-pricing-stack,
  #price-box .incentives { display: contents; }
  #price-box .advanced-pricing-stack hr { display: none; }
  /* DI repeats the FTC disclosure inside the price box; the page-level
     #vehicle-disclaimer carries it verbatim, so the duplicate is re-hidden
     exactly as DI's own stylesheet hid it. The copy is NEVER edited. */
  #price-box .price-stack > p { display: none; }
  /* DI-only affordance: a "Details" link into a popover the truth has no
     counterpart for (and whose modal §4 already suppresses). */
  #price-box .pricing-item__details { display: none; }
  
  #price-box .price-stack {
    display: block; margin: 0 0 8px;
    font: 400 14.5px/1.5 var(--font);
  }
  #price-box .price-block {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid var(--rule);
    font: 400 14.5px/1.35 var(--font); color: var(--soft);
  }
  #price-box .price-block > a {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 10px; width: 100%; font: inherit; color: inherit;
  }
  #price-box .price-label { max-width: 64%; font: inherit; color: inherit; }
  #price-box .price { font: inherit; font-variant-numeric: tabular-nums; }
  #price-box .price-block.our-price {
    padding-top: 7px; color: var(--ink); font-weight: 700;
  }
  #price-box .price-block.our-price .price-label { font-weight: 700; }
  #price-box .price-block.our-price .price {
    /* NB: the `font:` SHORTHAND resets font-variant-numeric — TRUTH's final
       price renders PROPORTIONAL figures because of it. Match it; do not
       "fix" it back to tabular. */
    font: 800 21px/1 var(--font); color: var(--ink);
  }
  
  /* the 3-CTA stack — the truth's .r3-stack3, one solid + two hairline */
  #price-box .vdp-price-box__cta {
    display: flex; flex-direction: column; gap: 8px; margin-top: 14px;
  }
  #price-box .vdp-price-box__main-cta-wrapper { display: contents; }
  #price-box a[class*="vdp-pricebox-cta-button"] {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 48px; padding: 0 30px;
    background: var(--blue); color: #fff; border: 0; border-radius: var(--r-pill);
    font: 700 15px/1 var(--font); letter-spacing: .01em;
    white-space: nowrap; overflow: hidden;
    transition: background .15s, border-color .15s, transform .1s;
  }
  #price-box a[class*="vdp-pricebox-cta-button"]:hover { background: var(--blue-up); }
  #price-box a.vdp-pricebox-cta-button-1,
  #price-box a.vdp-pricebox-cta-button-2 {
    background: #fff; color: var(--ink); border: 1.5px solid var(--rule);
  }
  #price-box a.vdp-pricebox-cta-button-1:hover,
  #price-box a.vdp-pricebox-cta-button-2:hover {
    background: var(--cloud); border-color: var(--soft);
  }
  #price-box .vdp-price-box__cta span { font: inherit; color: inherit; }
  #main-cta-placeholder { display: none; }
  
  
  /* ── 17.5 · basic info ──────────────────────────────────────────────────── */
  /* TRUTH .r3-basic IS the 2-up grid; DI hangs a <ul> inside the table, so the
     list is promoted and the table carries the grid. */
  .basic-info-component__table {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 36px; padding: 18px 22px;
    background: var(--cloud); border-radius: var(--r-card);
  }
  .basic-info-component__table > ul { display: contents; }
  .basic-info-item {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 8px 0; border-bottom: 1px solid var(--rule);
    font: 400 14.5px/1.5 var(--font);
  }
  .basic-info-item__label { color: var(--soft); }
  .basic-info-item__value-wrapper { display: contents; }
  .basic-info-item__value { font-weight: 600; color: var(--ink); margin-left: auto; }
  .basic-info-item__suffix { color: var(--ink); font-weight: 600; }
  
  
  /* ── 17.6 · key features ────────────────────────────────────────────────── */
  .vdp-key-features {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
    height: auto;
  }
  .vdp-key-features > h2.component-title { grid-column: 1 / -1; margin: 34px 0 4px; }
  .vdp-key-features > .vdp-component__container,
  .vdp-key-features > .vdp-component__container > .component-content-details,
  .vdp-key-features > .vdp-component__container > .component-content-details > ul { display: contents; }
  .vdp-key-features li {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; min-height: 86px; padding: 16px 8px; height: auto;
    border: 1.5px solid var(--rule); border-radius: var(--r-tile);
    background: #fff; color: var(--ink);
    font: 700 10.5px/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase;
    text-align: center;
  }
  .vdp-key-features svg { width: 20px; height: 20px; fill: var(--blue); flex: none; }
  .vdp-key-features .feature-label { font: inherit; color: inherit; }
  
  
  /* ── 17.7 · the inline CTA row ──────────────────────────────────────────── */
  .vdp-cta-row { display: flex; gap: 8px; max-width: 460px; margin-top: 14px; }
  .vdp-cta-row .vdp-component__container { display: contents; }
  .vdp-cta-row .cta-wrapper { flex: 1; display: flex; min-width: 0; }
  .vdp-cta-row a.button {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 48px; padding: 0 24px;
    border-radius: var(--r-pill);
    font: 700 15px/1 var(--font); letter-spacing: .01em; white-space: nowrap;
    background: #fff; color: var(--ink); border: 1.5px solid var(--rule);
    transition: background .15s, border-color .15s;
  }
  .vdp-cta-row a.button:hover { background: var(--cloud); border-color: var(--soft); }
  .vdp-cta-row a.vdp-details-ctarow-button-1 { background: var(--blue); color: #fff; border: 0; }
  .vdp-cta-row a.vdp-details-ctarow-button-1:hover { background: var(--blue-up); }
  
  
  /* ── 17.8 · vehicle-detail accordions ───────────────────────────────────── */
  /* TRUTH .r3-acc: a navy flat bar per category (the 8px rhythm sits on the ROW,
     never on the head — the gate pins the head's margin to 0), then a 2-up grid
     of cloud chips when open.                                                  */
  .detail-item-row { margin-bottom: 8px; }
  .detail-item-row__header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 16px; margin: 0;
    background: var(--ink); color: #fff; border-radius: 10px;
    font: 700 13.5px/1 var(--font); letter-spacing: .05em;
    cursor: pointer;
  }
  .detail-item-row__header h3 {
    display: flex; align-items: center; gap: 10px;
    font: inherit; color: inherit;
  }
  .detail-item-row__header svg { width: 14px; height: 14px; flex: none; }
  .detail-item-row__header svg path { fill: currentColor; }
  .detail-item-row__header::after {
    content: '\25BE'; font-size: 12px; line-height: 1; transition: transform .18s;
  }
  .detail-item-row__header.open::after { transform: rotate(180deg); }
  
  .detail-item-row__content { display: none; padding: 12px 0 4px; }
  /* DI's JS writes an inline max-height on the open panel (its own animation
     rig); with their sheets stripped that value clips the list. Deliberate
     !important — it is the one way past an inline style. */
  .detail-item-row__content.open { display: block; max-height: none !important; }
  .detail-item-row__content .details-list {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
  }
  .detail-item-row__content .details-list__item {
    padding: 10px 12px; background: var(--cloud); border-radius: var(--r-chip);
    font: 400 13.5px/1.4 var(--font); color: var(--ink);
  }
  
  
  /* ── 17.9 · premium options panel ───────────────────────────────────────── */
  #premium-options {
    background: var(--cloud); border-radius: var(--r-tile); padding: 8px 22px;
  }
  #premium-options > h2.component-title { margin: 12px 0 4px; }
  #premium-options .package-item {
    padding: 12px 0; border-bottom: 1px solid var(--rule);
    font: 400 14.5px/1.5 var(--font); color: var(--ink);
  }
  #premium-options .package-item:last-child { border-bottom: 0; }
  #premium-options .description-container.closed { display: none; }
  
  
  /* ── 17.10 · payment options card ───────────────────────────────────────── */
  /* TRUTH .paycard: a 340px white card — type kicker / price / MSRP / CTA,
     centred. DI's section carries its own h2, which reads as the card's kicker. */
  #payment-options {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    max-width: 340px; padding: 24px; text-align: center;
    background: #fff; border: 1.5px solid var(--rule); border-radius: 12px;
  }
  #payment-options > h2.component-title {
    margin: 0; font: 800 12px/1 var(--font); letter-spacing: .1em;
    text-transform: uppercase; color: var(--soft);
  }
  #payment-options .vdp-component__container,
  #payment-options .vdp-payment-options__list,
  #payment-options .vdp-payment-options__option,
  #payment-options .vdp-payment-options__content { display: contents; }
  #payment-options h3 {
    font: 800 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
    color: var(--blue);
  }
  #payment-options .option__price {
    font: 800 26px/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums;
  }
  #payment-options .option__msrp { font: 400 12.5px/1 var(--font); color: var(--soft); margin-bottom: 8px; }
  #payment-options a.di-modal {
    display: flex; align-items: center; justify-content: center;
    height: 48px; padding: 0 30px;
    background: #fff; color: var(--ink); border: 1.5px solid var(--rule);
    border-radius: var(--r-pill);
    font: 700 15px/1 var(--font); letter-spacing: .01em; white-space: nowrap;
  }
  #payment-options a.di-modal:hover { background: var(--cloud); border-color: var(--soft); }
  
  
  /* ── 17.11 · similar vehicles ───────────────────────────────────────────── */
  /* TRUTH .simgrid IS the 4-up card grid; DI's section wraps its own h2, so the
     heading spans the grid and .flex-row is promoted away.                     */
  #similar-vehicles {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
    padding: 0;
  }
  #similar-vehicles > h2.section-title { grid-column: 1 / -1; margin: 0 0 4px; }
  #similar-vehicles .flex-row { display: contents; }
  #similar-vehicles .item {
    display: block; min-width: 0;
    background: #fff; border: 1px solid var(--rule); border-radius: var(--r-tile);
    overflow: hidden; transition: box-shadow .15s;
  }
  #similar-vehicles .item:hover { box-shadow: 0 14px 34px -18px rgba(27, 42, 82, .28); }
  #similar-vehicles .item > a { display: block; }
  #similar-vehicles .item img { width: 100%; aspect-ratio: 4 / 2.6; object-fit: cover; }
  #similar-vehicles .item .info { display: block; padding: 12px 14px 14px; }
  #similar-vehicles .item .info h3 {
    font: 700 14px/1.3 var(--font); color: var(--ink);
  }
  #similar-vehicles .item .info > a { display: block; }
  #similar-vehicles .item .info > a > div {
    font: 800 15px/1 var(--font); color: var(--ink);
    margin-top: 7px; font-variant-numeric: tabular-nums;
  }
  #similar-vehicles .modern-retail-components { display: none; }
  
  
  /* ═══ 18 · RESPONSIVE ══════════════════════════════════════════════════════ */
  
  /* ── tablet + phone (≤980) ──────────────────────────────────────────────── */
  @media (max-width: 980px) {
    /* the SRP collapses to one column; the rail is a mobile-drawer job */
    #lvrp-container { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
    /* single column — the base grid-template-rows (incl. the 8/20 spacers) stays */
    #lightning-search, #key-features, .results-title-row,
    .refinement-filters-wrap, section.lvrp-container,
    #lvrp-post-results-wrapper { grid-column: 1; }
    #lvrp-filters-column, #facets-menu { display: none; }
  
    #hits { grid-template-columns: 1fr 1fr; }
  
    .results-title-row { flex-wrap: wrap; gap: 10px; }
    .results-title-row h1 { flex: 1 1 100%; margin-right: 0; }
  
    /* the header: the mobile bar is the one that shows (see §3) */
    .bottomWrapper { gap: 14px; }
  
    .linkWrapper { grid-template-columns: 1fr; gap: 24px; }
    .linkWrapper__widgets > ul { grid-template-columns: 1fr 1fr; gap: 24px; }
  
    /* ── VDP ≤980 · price before the fold ────────────────────────────────────
       TRUTH flips .vdp-r9 to a flex column ordered gallery → buybox → info and
       drops the sticky. Same result here by collapsing the named-line grid to a
       single column and re-numbering the rows; the title band keeps its bleed. */
    main.vdp {
      grid-template-columns:
        [full-start content-start main-start rail-start] minmax(0, 1fr)
        [main-end rail-end content-end full-end];
      grid-template-rows:
        auto   /*  1 · title band      */
        30px   /*  2 · lane lead-in (r3-vdp padding-top — holds at ≤980) */
        auto   /*  3 · gallery         */
        auto   /*  4 · buybox          */
        auto   /*  5 · basic info      */
        auto   /*  6 · key features    */
        auto   /*  7 · CTA row         */
        auto   /*  8 · vehicle details */
        34px   /*  9 */
        auto   /* 10 · premium         */
        34px   /* 11 */
        auto   /* 12 · payment         */
        56px   /* 13 · lane tail       */
        40px   /* 14 · similar lead-in */
        auto   /* 15 · similar         */
        8px    /* 16 */
        auto;  /* 17 · disclaimer      */
    }
    main.vdp::before    { grid-row: 14; }
    .vdp-gallery-wrap   { grid-row: 3; }
    .vdp-price-box-wrap { grid-row: 4; align-self: start; }
    .vdp-basic-info     { grid-row: 5; }
    .vdp-key-features   { grid-row: 6; }
    .vdp-cta-row        { grid-row: 7; }
    #vehicle-details    { grid-row: 8; }
    #premium-options    { grid-row: 10; }
    #payment-options    { grid-row: 12; }
    #similar-vehicles   { grid-row: 15; }
    #vehicle-disclaimer { grid-row: 17; }
    #price-box { position: static; }
  
    /* the gate pins the gallery / basic-info / buybox PADDING to the truth's
       values, so the lane inset rides on margin (as it does for the tail bands) */
    .vdp-gallery-wrap, .vdp-price-box-wrap, .vdp-basic-info, .vdp-key-features,
    .vdp-cta-row, #vehicle-details, #premium-options, #payment-options {
      margin-left: var(--gut); margin-right: var(--gut);
    }
  
    .vdp-title__inner {
      flex-wrap: wrap; gap: 6px 14px; min-height: 0;
      padding: 10px var(--gut);
    }
    header.vdp-title h1 { margin-left: 47.36px; font-size: 18px; line-height: 1.5; }
    header.vdp-title .vdp-title__vehicle-type { margin-right: 14px; }
    header.vdp-title .vdp-title__vin-stock { flex: 1 1 100%; }
  
    .basic-info-component__table { grid-template-columns: minmax(0, 1fr); }
    .vdp-key-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #similar-vehicles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  
  /* ── phone (≤640) ──────────────────────────────────────────────────────── */
  @media (max-width: 640px) {
    /* R9 · Mike: phone gutters HALVE globally */
    :root { --gut: 16px; }
  
    /* one view on phones — the grid/list toggle is a desktop affordance */
    .layout-view-toggle, #layout-toggle { display: none !important; }
  
    .results-title-row h1 { font-size: 30px; }
    #key-features .quick-facets-container,
    #key-features .quick-facets__list { overflow-x: auto; scrollbar-width: none; }
    #key-features .quick-facets__list::-webkit-scrollbar { display: none; }
  
    .results-pagination .show-xs { display: block; }
  
    
  
    .vdp-key-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #similar-vehicles { grid-template-columns: minmax(0, 1fr); }
    .vdp-cta-row { flex-direction: column; max-width: none; }
  
    /* phone footer: tighter link rhythm + a taller legal band, so the whole
       footer keeps the truth's proportion at 390 */
    .linkWrapper__widgets .menu a { padding: 3px 0; }
    .footerBottom .container-wide { padding: 23px var(--gut) 25px; }
  }
  
  @media (max-width: 560px) {
    #hits { grid-template-columns: minmax(0, 1fr); }
  }
  
  /* ═══ THE BRAND LOGO SWAP (Mike, 2026-07-27) ═══════════════════════════════
     The harvested pages carry DI's current theme logo files; the approved
     design uses the brand wordmarks (the same assets the comps load). The CSS
     content swap is the reference mechanism — PRODUCTION-BEST is replacing the
     logo files in DealerInspireDealerTheme (MANIFEST: asset swap, includes the
     footer's WHITE reverse wordmark, which also closes §11's blue-on-navy flag). */
  .bottomWrapper__logo img,
  .deviceWrapper__logo img,
  #headerTop img[itemprop="logo"],
  .header-logo {
    content: url("https://tgxnwbhurfmruqkxzmxh.supabase.co/storage/v1/object/public/brand-assets/shults/logos/wordmark-blue-keyed-2x.png");
  }
  .footerRow img, .footerTop img, footer .header-logo {
    content: url("https://tgxnwbhurfmruqkxzmxh.supabase.co/storage/v1/object/public/brand-assets/shults/logos/wordmark-white-2x.png");
  }
  
  
  /* ═══ 19 · HOMEPAGE MODULES (the sh-* fragment system) ══════════════════════
     THE HOMEPAGE LEG. Everything below styles convert/fragments/*.html — the
     raw-HTML payloads our team pastes into DI Page Composer rows. Unlike §6–§18
     (which style Dealer Inspire's OWN markup), these fragments are OURS, so every
     class is namespaced `sh-*`: nothing here may collide with a DI, WordPress or
     Bootstrap 3 class name. Bare names the comps used — .row .wrap .band .chip
     .stats .visual .track .fill .lab — are ALL Bootstrap or DI hooks on-platform
     and are renamed here; the structure stays parallel to the comps so the values
     port 1:1.
  
     DELIVERY (pick one):
       · RECOMMENDED — ship §19 inside this sitewide stylesheet. One sheet, one
         cascade, and the modules are then reusable on any Composer page.
       · ALTERNATIVE — paste §19 alone into the homepage's "CSS Overrides" box in
         the Page Composer. Works, but scopes the modules to that single page and
         splits the design system across two places.
  
     SOURCE OF VALUES: convert/gate-out/truth-home.css (the emitted <style> chain
     of /approach-b6/h1/, the approved comp) — generated by
     `node convert/extract-truth.mjs`. Every number below was copied from there,
     never re-derived. Authored in px.
  
     The comps carry three kinds of value that are NOT in their stylesheet:
     inline style="" attributes on the markup. Those are baked into real rules
     here (a paste fragment should carry no styling of its own) — each is flagged
     `[was inline]`. The one exception is the OEM logo heights, which are optical
     per-mark values and stay on the <img> tags exactly as the comp has them.
  
     19.0 Composer row plumbing   19.1 atoms   19.2 hero + vehicle slider
     19.3 blue band   19.4 trio   19.5 promos (trade · delivery)
     19.6 why-us ink ceremony   19.7 about   19.8 map band   19.9 responsive
     ═══════════════════════════════════════════════════════════════════════════ */
  
  
  /* ── 19.0 · COMPOSER ROW PLUMBING ──────────────────────────────────────────
     The Full Width WYSIWYG row emits FOUR nested wrappers before our markup:
  
       #di-page-composer.modelpagebuilder.contentcontainer
         └ .sh-row.fullcontentrow.bgimagerow.dark-text.cover   [inline padding]
             └ .container-wide
                 └ .row                     ← Bootstrap: -15px side margins
                     └ .col-xs-12.inner-wysiwyg   ← Bootstrap: 15px side padding
  
     (Probed from convert/dom/contact.html, a live page-di-page-composer page —
     see convert/build-home.mjs COMPOSER_ROW and MANIFEST §H.)
  
     Our modules set their own measure via .sh-wrap and several are full-bleed, so
     all four wrappers flatten to pass-throughs. `padding: 0 !important` is not
     decoration: the row's padding is an INLINE style written by the Composer's
     admin field, so only !important can guarantee it. (Set the field to 0 anyway —
     belt and braces.) overflow stays visible: Derek's hand breaks the why-us band. */
  #di-page-composer,
  .sh-row,
  .sh-row > .container-wide,
  .sh-row > .container-wide > .row,
  .sh-row > .container-wide > .row > .col-xs-12 {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    float: none;
    overflow: visible;
    padding: 0 !important;
  }
  
  
  /* ── 19.1 · ATOMS ─────────────────────────────────────────────────────────── */
  
  /* the page measure */
  .sh-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
  
  /* the pill — same system as §5's .s-pill, restated under the sh-* namespace so a
     fragment is self-contained (a fragment must never depend on a DI-markup rule) */
  .sh-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--blue); color: #fff; border: 0; border-radius: 999px; cursor: pointer;
    height: 50px; padding: 0 30px;
    font: 700 15px/1 var(--font); letter-spacing: .01em;
    transition: background .15s, transform .1s;
  }
  .sh-pill:hover { background: var(--blue-up); }
  .sh-pill:active { transform: scale(.975); }
  .sh-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .sh-pill--onink { background: #fff; color: var(--ink); }        /* on the blue trade band */
  .sh-pill--onink:hover { background: var(--cloud); }
  .sh-pill--search { height: 46px; }                               /* [was inline] hero search CTA */
  .sh-pill--sm { height: 42px; padding: 0 22px; font-size: 13.5px; }  /* [was inline] trio CTAs */
  .sh-pill--start { align-self: flex-start; }                      /* [was inline] deals card */
  .sh-pill--go { height: 44px; padding: 0 22px; }                  /* [was inline] map panel */
  
  /* type roles */
  .sh-say { font: 800 30px/1.25 var(--font); letter-spacing: -.01em; text-transform: none; }
  .sh-sub { font-size: 19px; color: var(--soft); max-width: 58ch; }
  .sh-au  { color: var(--gold); }
  
  /* THE PAYOFF — the Derek type ceremony (round6/lib/derek.mjs numbers as CSS).
     line-height .78, tracking -.02em, the last field line in real Black Italic.
     Sizes are the engine's px output for a 1440 frame; never re-derive them. */
  .sh-payoff { font-family: var(--font); font-weight: 800; text-transform: uppercase;
    line-height: .78; letter-spacing: -.02em; }
  .sh-line { display: block; }
  .sh-line--gold { color: var(--gold); }
  .sh-line--field.sh-ital,
  .sh-line--field:last-child { font-weight: 900; font-style: italic; letter-spacing: .01em; }
  
  /* 96px on a 445px measure, so "It's all covered." wraps NATURALLY into two lines
     and "For life." takes the third. The tracking is tighter than the system's
     -0.02em because at this size the italic will not hold one line without it. */
  .sh-payoff--hero { font-size: 96px; text-align: left; margin: 0; flex: none; width: 445px;
    letter-spacing: -0.05em; }
  .sh-payoff--hero .sh-line--field:last-child { letter-spacing: -0.008em; }
  .sh-payoff--hero .sh-line--ink { color: var(--ink); }
  .sh-payoff--hero .sh-line--field { color: var(--blue); }
  .sh-payoff--hero .sh-mbr { display: none; }   /* the "covered." break is phone-only (19.9) */
  
  .sh-payoff--why { font-size: 131px; text-align: left; }
  .sh-payoff--why .sh-line--field { color: #fff; }
  
  /* the Lifetime program lines with the OFFICIAL icons */
  .sh-programs { display: flex; flex-direction: column; gap: 14px; }
  .sh-program { display: flex; gap: 14px; align-items: flex-start; }
  .sh-program img { width: 38px; height: 38px; object-fit: contain; flex: none; margin-top: 1px; }
  .sh-program b { font-weight: 800; }
  .sh-program div { font: 600 16px/1.4 var(--font); }
  .sh-both { font: 900 20px/1.3 var(--font); font-style: italic; margin-top: 4px; }
  
  /* the disclosure register — VERBATIM copy, never restyled to hide */
  .sh-fineprint { font: 400 11px/1.55 var(--font); color: rgba(255,255,255,.78); }
  
  /* the image PLACEHOLDER. Mike's decision: the About storefront slot SHIPS as a
     placeholder until the photography lands. It is a real, designed empty state —
     not a bug, not a TODO. Do not swap it for stock. */
  .sh-ph { position: relative; background: #E9EDF4 no-repeat center; overflow: hidden; }
  .sh-ph::before { content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(45deg, transparent 0 14px, rgba(90,98,114,.05) 14px 28px); }
  .sh-ph::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px;
    transform: translate(-50%, -50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B4CC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='M3 17l5-5 4 4 3-3 6 6'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat; opacity: .9; }
  .sh-ph-label { position: absolute; left: 50%; top: calc(50% + 32px); transform: translateX(-50%);
    font: 600 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
    color: #5F6A80; white-space: nowrap; }
  
  /* the fully CSS-styled dropdown (the comps override the browser default select) */
  .sh-dd { position: relative; }
  .sh-dd.is-open { z-index: 50; }
  .sh-dd-btn {
    width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: space-between;
    font: 600 15px/1 var(--font); color: var(--ink); background: #fff; border: 0; padding: 0 14px;
    text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s;
  }
  .sh-dd-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sh-dd-btn::after { content: ''; width: 12px; height: 7px; flex: none; margin-left: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231B2A52' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat center;
    transition: transform .18s; }
  .sh-dd.is-open .sh-dd-btn::after { transform: rotate(180deg); }
  .sh-dd:hover .sh-dd-btn { border-color: var(--blue); }
  .sh-dd-menu {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 100%; width: max-content; max-width: 260px;
    background: #fff; border: 1px solid var(--rule); box-shadow: 0 28px 56px -20px rgba(27,42,82,.32);
    padding: 6px; max-height: 320px; overflow-y: auto; z-index: 40;
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .16s, transform .16s;
  }
  .sh-dd.is-open .sh-dd-menu { opacity: 1; transform: none; pointer-events: auto; }
  .sh-dd-opt { display: block; width: 100%; text-align: left; padding: 10px 12px;
    font: 600 14.5px/1.2 var(--font); color: var(--ink); background: transparent; border: 0; cursor: pointer; }
  .sh-dd-opt:hover { background: var(--mist); }
  .sh-dd-opt.is-on { background: var(--cloud); color: var(--blue); }
  
  /* the ink-outlined search capsule */
  .sh-searchrow { display: flex; gap: 12px; align-items: center; }
  .sh-searchrow .sh-dd { flex: 1; }
  .sh-searchwrap {
    background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 8px;
    box-shadow: 0 20px 48px -20px rgba(27,42,82,.25);
    position: relative; z-index: 4; display: flex; gap: 8px;
  }
  .sh-searchwrap .sh-searchrow { flex: 1; gap: 8px; }
  .sh-searchwrap .sh-searchrow .sh-dd-btn { height: 50px; border: 0; border-right: 1.5px solid var(--rule); border-radius: 0; }
  .sh-searchwrap .sh-searchrow .sh-dd:last-of-type .sh-dd-btn { border-right: 0; }
  .sh-searchwrap .sh-searchrow .sh-dd:first-of-type .sh-dd-btn { border-radius: 999px 0 0 999px; }
  .sh-searchwrap .sh-searchrow .sh-dd:hover .sh-dd-btn { background-color: var(--mist); }
  .sh-searchwrap .sh-searchrow .sh-dd-menu { border-radius: 16px; }
  
  /* the round carousel arrow */
  .sh-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; z-index: 3;
    background: #fff; color: var(--ink); border: 1.5px solid var(--rule);
  }
  .sh-arrow--prev { left: 18px; }
  .sh-arrow--next { right: 18px; }
  
  
  /* ── 19.2 · HERO + VEHICLE-TYPE SLIDER ─────────────────────────────────────
     ⚠ DEALER INSPIRE BUILDS THE HERO ROW — its search bar queries live inventory
     (locked handoff term, Reference §06). These rules are the SPEC handed to them
     with convert/fragments/01-hero-REFERENCE.html: keep the sh-* classes and the
     design lands unchanged. The slider below the hero is ours.               */
  .sh-hero { padding: 96px 0 0; text-align: center; }
  .sh-hero .sh-sub { margin: 26px auto 40px; max-width: 697px; }
  
  /* the unit — Derek + the payoff centred as ONE group, bottom-aligned, his box
     lapping 21px over the type's left edge so he occludes rather than sits beside.
     The image is pre-cropped to its display framing (342×550 = 2× of 171×275), so
     no object-fit is needed here and the figure never renders past natural size. */
  .sh-hero-unit { display: flex; align-items: flex-end; justify-content: center; }
  .sh-derek-hero { flex: none; width: 171px; margin: 0 -21px -4px 0; position: relative; z-index: 3; }
  .sh-derek-hero img { width: 100%; height: auto; display: block; max-width: none; }
  .sh-hero .sh-searchwrap { margin: 0 auto; max-width: 880px; }
  
  .sh-vslider { padding: 34px 0 64px; }
  .sh-vslider-lab { font: 700 11.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
    color: var(--soft); text-align: center; display: block; margin-bottom: 16px; }
  .sh-vslider-frame { position: relative; max-width: 920px; margin: 0 auto; padding: 0 32px; }
  .sh-vslider-row { display: flex; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
  .sh-vslider-row::-webkit-scrollbar { display: none; }
  .sh-vslider .sh-arrow { cursor: pointer; transition: opacity .15s; top: 42%; }
  .sh-vslider .sh-arrow--prev { left: -6px; }
  .sh-vslider .sh-arrow--next { right: -6px; }
  /* 4.5 cards visible — the labelled peek that tells you the row scrolls */
  .sh-bs { flex: 0 0 23.5%; display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 10px 6px 14px; border-radius: 12px; transition: background .15s, transform .15s; }
  .sh-bs img { height: 92px; width: auto; max-width: 100%; object-fit: contain;
    object-position: 50% 100%; margin-top: 30px; }
  .sh-bs b { font: 600 13.5px/1 var(--font); color: var(--ink); }
  .sh-bs:hover { background: var(--cloud); transform: translateY(-2px); }
  
  
  /* ── 19.3 · THE BLUE STATS + OEM BAND ─────────────────────────────────────── */
  .sh-blueband { background: var(--blue); color: #fff; padding: 92px 0 84px;  /* [was inline] */
    position: relative; z-index: 4; border-radius: 0; }
  .sh-stats { display: flex; justify-content: center; margin-bottom: 56px; }
  .sh-stats > div { text-align: center; padding: 6px 46px; border-left: 1px solid rgba(255,255,255,.24); }
  .sh-stats > div:first-child { border-left: 0; }
  .sh-stats b { font: 900 36px/1 var(--font); color: #fff; display: block; margin-bottom: 8px;
    font-variant-numeric: tabular-nums; }
  .sh-stats span { font: 700 11.5px/1.3 var(--font); letter-spacing: .09em; text-transform: uppercase;
    color: rgba(255,255,255,.72); display: block; }
  /* "For Life" reads as a NUMBER, not a label — so it must out-specify the .sh-stats
     span rule above (it is a <span> inside the <b>). Gold on blue; never white on gold. */
  .sh-stats b .sh-gold { color: var(--gold); font: inherit; font-weight: 900;
    letter-spacing: -.01em; text-transform: none; }
  .sh-oems { display: flex; gap: 12px; }
  .sh-oems a { flex: 1; background: #fff; display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1/1; padding: 0 10px; border-radius: 16px; transition: transform .15s, box-shadow .15s; }
  .sh-oems a:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgba(0,0,0,.35); }
  .sh-oems img { max-width: 100%; object-fit: contain; }
  
  
  /* ── 19.4 · THE TRIO (service sandwich · money card · deals card) ─────────── */
  .sh-triosec { padding: 72px 0 104px; }
  .sh-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  
  /* the SANDWICH: full scene → veil → type → the SAME subject isolated on top.
     base and pop MUST carry identical transforms or the registration breaks. */
  .sh-scard { position: relative; background: #fff; border: 1.5px solid var(--rule); border-radius: 16px;
    overflow: hidden; min-height: 480px; display: flex; flex-direction: column;
    transition: box-shadow .15s, transform .15s; }
  .sh-scard:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -18px rgba(27,42,82,.22); }
  .sh-sandwich { position: absolute; inset: 0; overflow: hidden; }
  .sh-sandwich-base, .sh-sandwich-pop {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% 50%;
    transform: scale(1.28) translateY(4%) translateX(9%); transform-origin: 70% 30%;
  }
  .sh-sandwich-base { z-index: 1; }
  .sh-sandwich-veil { position: absolute; inset: 0; background: #1B2A52; opacity: .20; z-index: 1; pointer-events: none; }
  .sh-sandwich-behind { position: absolute; left: 20px; top: 30px; z-index: 2;
    font: 800 54px/.92 var(--font); text-transform: uppercase; letter-spacing: -.015em;
    color: #fff; text-shadow: 0 2px 16px rgba(30,25,10,.35); }
  .sh-sandwich-pop { z-index: 3; }
  .sh-sandwich .sh-calui { position: absolute; left: 20px; bottom: 78px; z-index: 4; max-width: 240px; }
  .sh-sandwich .sh-pill { position: absolute; left: 20px; bottom: 20px; z-index: 5; }
  
  .sh-calui { background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px;
    box-shadow: 0 14px 32px -16px rgba(27,42,82,.28); }
  .sh-calui-lab { font: 600 11px/1 var(--font); color: var(--soft); margin-bottom: 9px; }
  .sh-calui-days { display: flex; gap: 4px; margin-bottom: 8px; }
  .sh-calui-days span { flex: 1; text-align: center; font: 700 10.5px/1 var(--font); color: var(--soft);
    padding: 6px 0; border-radius: 6px; border: 1px solid var(--rule); }
  .sh-calui-days span.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
  .sh-calui-slots { display: flex; gap: 6px; }
  .sh-calui-slots span { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--font);
    color: var(--ink); padding: 7px 10px; border-radius: 999px; border: 1px solid var(--rule); }
  .sh-calui-slots span.is-on::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--gold); }
  
  .sh-tcard { display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1.5px solid var(--rule); border-radius: 16px;
    transition: box-shadow .15s, transform .15s, border-color .15s; }
  .sh-tcard:hover { box-shadow: 0 22px 48px -18px rgba(27,42,82,.22); transform: translateY(-3px); border-color: #CBD4EA; }
  .sh-tcard-photo { flex: 1 1 50%; min-height: 0; overflow: hidden; }
  .sh-tcard-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .sh-tcard-body { flex: 1 1 50%; display: flex; flex-direction: column; align-items: flex-start;
    gap: 12px; padding: 28px 28px 30px; }
  .sh-tcard-body h3 { font: 800 20px/1.3 var(--font); }
  .sh-tcard-body p { color: var(--soft); }              /* [was inline] */
  .sh-tcard-body .sh-pill { margin-top: 4px; }          /* [was inline] */
  
  .sh-dcard { position: relative; background: linear-gradient(180deg, #EDF1F7 0%, #fff 62%);
    border: 1.5px solid var(--rule); border-radius: 16px; overflow: hidden;
    min-height: 400px; padding: 28px; display: flex; flex-direction: column;
    transition: box-shadow .15s, transform .15s; }
  .sh-dcard:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -18px rgba(27,42,82,.22); }
  .sh-dcard h3 { font: 800 54px/.92 var(--font); text-transform: uppercase; letter-spacing: -.015em; color: var(--ink); }
  .sh-dcard-veh { width: 88%; margin: 4px auto 2px; }
  .sh-dcard-chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .sh-dcard-chips span { background: var(--cloud); border: 1px solid var(--rule); color: var(--ink);
    font: 800 10px/1 var(--font); padding: 5px 8px; border-radius: 999px; }
  .sh-dcard-foot { font: 600 13.5px/1.4 var(--font); color: var(--soft); margin: 12px 0 0; }
  
  
  /* ── 19.5 · THE PROMO MODULES (trade · delivery) ───────────────────────────
     UI-FORWARD, never text-over-photo (Mike): the copy lives on a flat field, the
     photography sits in its own rounded card, and a real UI object (estimate
     slider / delivery tracker) carries the proof.                            */
  .sh-promo { padding: 36px 0; }
  .sh-promo-band { border-radius: 24px; padding: 64px; display: grid; grid-template-columns: 1fr 1.05fr;
    gap: 48px; align-items: center; overflow: hidden; position: relative; }
  .sh-promo h2 { font: 900 44px/.98 var(--font); text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 16px; }
  .sh-promo p { font-size: 17px; max-width: 40ch; margin-bottom: 30px; }
  .sh-promo-visual { position: relative; min-height: 380px; }
  
  .sh-promo--trade .sh-promo-band { background: var(--blue); color: #fff; }
  .sh-promo--trade p { color: rgba(255,255,255,.88); }
  .sh-promo--trade .sh-photocard { position: absolute; right: 0; top: 0; width: 92%; aspect-ratio: 4/2.7;
    border-radius: 16px; overflow: hidden; transform: rotate(1.5deg);
    box-shadow: 0 30px 60px -22px rgba(0,0,0,.45); }
  .sh-promo--trade .sh-photocard img { width: 100%; height: 100%; object-fit: cover;
    object-position: 72% 60%; display: block; transform: scale(1.18); }
  
  .sh-promo--delivery .sh-promo-band { background: var(--cloud); color: var(--ink);
    align-items: stretch; min-height: 590px; }
  .sh-promo--delivery p { color: var(--soft); }
  .sh-promo--delivery .sh-promo-copy { align-self: center; }
  .sh-promo--delivery .sh-promo-visual { display: flex; flex-direction: column; gap: 16px;
    justify-content: space-between; min-height: 0; }
  .sh-promo--delivery .sh-photocard2 { position: relative; width: 100%; flex: 1; border-radius: 16px;
    overflow: hidden; box-shadow: 0 24px 56px -26px rgba(27,42,82,.3); min-height: 320px; }
  .sh-promo--delivery .sh-photocard2 img { width: 100%; height: 100%; object-fit: cover; display: block; }
  
  .sh-photochip { position: absolute; left: 14px; top: 14px; z-index: 3; background: #fff; border-radius: 10px;
    padding: 10px 14px; box-shadow: 0 10px 26px -10px rgba(0,0,0,.4); }
  .sh-photochip b { font: 800 13.5px/1.2 var(--font); display: block; color: var(--ink); }
  .sh-photochip span { font: 600 11.5px/1.5 var(--font); color: var(--soft); display: block; }
  
  .sh-uicard { position: absolute; left: 0; bottom: 0; width: 62%; background: #fff; color: var(--ink);
    border-radius: 16px; padding: 22px 24px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.4); }
  .sh-uicard-lab { font: 600 12.5px/1 var(--font); color: var(--soft); margin-bottom: 8px; }
  .sh-uicard-big { font: 800 32px/1 var(--font); font-variant-numeric: tabular-nums; }
  .sh-uicard-track { position: relative; height: 6px; border-radius: 999px; background: var(--cloud); margin: 18px 0 6px; }
  .sh-uicard-fill { position: absolute; inset: 0 34% 0 0; border-radius: 999px; background: var(--gold); }
  .sh-uicard-dot { position: absolute; top: 50%; left: 66%; width: 18px; height: 18px; border-radius: 999px;
    transform: translate(-50%, -50%); background: var(--gold); border: 3px solid var(--ink);
    box-shadow: 0 2px 6px rgba(27,42,82,.3); }
  .sh-uicard-ticks { display: flex; justify-content: space-between; font: 600 11px/1 var(--font); color: var(--soft); }
  /* gold ground, INK text — gold never carries white (8.1:1) */
  .sh-uicard-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px;
    border-radius: 999px; background: var(--cloud); border: 1px solid var(--rule);
    font: 700 12px/1 var(--font); color: var(--ink); margin-top: 12px; }
  .sh-uicard-chip::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--gold); }
  
  .sh-trackbar { background: #fff; border-radius: 16px; padding: 18px 22px 16px;
    box-shadow: 0 24px 56px -26px rgba(27,42,82,.3); }
  .sh-trackbar-lab { font: 600 12.5px/1 var(--font); color: var(--soft); margin-bottom: 14px;
    display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
  .sh-trackbar-chip { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px;
    border-radius: 999px; background: var(--cloud); border: 1px solid var(--rule);
    font: 700 11.5px/1 var(--font); color: var(--ink); }
  .sh-trackbar-chip::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--gold); }
  .sh-trackbar-steps { display: flex; align-items: flex-start; }
  .sh-tstep { flex: 1; text-align: center; position: relative; font: 600 11.5px/1.25 var(--font); color: var(--ink); }
  .sh-tstep-nd { display: block; width: 18px; height: 18px; border-radius: 999px; background: var(--blue);
    margin: 0 auto 8px; position: relative; z-index: 2; }
  .sh-tstep::before { content: ''; position: absolute; top: 8px; left: -50%; width: 100%; height: 3px; background: var(--blue); }
  .sh-tstep:first-child::before { display: none; }
  .sh-tstep.is-now .sh-tstep-nd { background: var(--gold); box-shadow: 0 0 0 4px rgba(232,164,40,.25); }
  .sh-tstep.is-todo { color: var(--soft); }
  .sh-tstep.is-todo .sh-tstep-nd { background: #fff; border: 2px solid var(--rule); }
  .sh-tstep.is-todo::before { background: var(--rule); }
  
  
  /* ── 19.6 · THE WHY-US INK CEREMONY ────────────────────────────────────────
     The band is a single ink field; Derek PRESENTS beside the copy and his hand
     deliberately breaks the right edge (right:-50px, overflow visible). He is a
     real photograph — never AI, never a lookalike.                           */
  .sh-whyus { padding: 36px 0; }
  .sh-whyus-band { background: var(--ink); color: #fff; border-radius: 24px; padding: 0;
    position: relative; overflow: visible; min-height: 800px; display: flex; align-items: flex-start; }
  .sh-whyus-copy { position: relative; padding: 64px 64px 60px; align-self: stretch; width: 100%; }
  .sh-whyus-kick { font: 700 13px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
    color: var(--gold); display: block; margin-bottom: 22px; }
  .sh-whyus .sh-payoff { position: relative; z-index: 1; margin-bottom: 32px; }
  .sh-why-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: start; margin-top: 38px; }
  .sh-why-grid > div:first-child { position: relative; z-index: 4; }
  .sh-why-body { font: 500 15.5px/1.6 var(--font); color: #fff; max-width: 47ch; margin: 20px 0 24px; }
  .sh-whyus .sh-programs { color: #fff; max-width: 520px; }
  .sh-whyus .sh-program div { color: rgba(255,255,255,.85); }
  .sh-whyus .sh-both { color: var(--gold); }
  .sh-whyus .sh-fineprint { margin-top: 30px; max-width: 56ch; }
  
  .sh-derek { position: absolute; z-index: 3; width: 645px; bottom: 0; right: -50px; pointer-events: none; }
  .sh-derek img { width: 100%; height: auto; display: block; max-height: none; }
  
  
  /* ── 19.7 · ABOUT ─────────────────────────────────────────────────────────── */
  .sh-about { background: var(--cloud); padding: 80px 0; }
  .sh-about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 52px; align-items: center; }
  .sh-about .sh-say { text-transform: uppercase; margin-bottom: 14px; }   /* [was inline] */
  .sh-about .sh-sub { margin-bottom: 28px; }                              /* [was inline] */
  .sh-about .sh-ph { width: 100%; aspect-ratio: 4/3; border-radius: 18px; }
  
  
  /* ── 19.8 · THE MAP BAND ──────────────────────────────────────────────────── */
  .sh-map { position: relative; min-height: 660px; display: flex; align-items: center;
    overflow: hidden; background: var(--cloud); }
  .sh-mapframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .sh-map-wrap { width: 100%; }                                          /* [was inline] */
  .sh-map-panel { position: relative; z-index: 2; max-width: 460px; padding: 34px;
    background: #fff; border: 1.5px solid var(--rule); border-radius: 18px;
    box-shadow: 0 24px 56px -28px rgba(27,42,82,.25); }
  .sh-map-panel h3 { font: 600 20px/1.3 var(--font); }
  .sh-map-row { display: flex; gap: 10px; margin-top: 16px; }
  .sh-map-addr { height: 48px; padding: 0 14px; font: 600 14px var(--font); flex: 1;
    display: flex; align-items: center; border: 1.5px solid var(--rule); border-radius: 999px;
    background: #fff; color: var(--ink); opacity: .6; }                   /* [was inline] */
  
  
  /* ── 19.9 · HOMEPAGE RESPONSIVE ────────────────────────────────────────────
     The comps' own breakpoints, in the comps' own order (later rules win).   */
  
  @media (min-width: 981px) {
    /* 59px, not 132: the three-line unit takes the air the padding used to hold. */
    .sh-hero { padding: 59px 0 0; }
    .sh-hero .sh-sub { margin: 29px auto 52px; }
    /* NO .sh-vslider padding here. The comp's emit carries a ≥981 rule of
       44px 0 78px, but a LATER flat `.r6-vslider { padding: 34px 0 64px }` in the
       same sheet supersedes it at every width — so 34/64 is what the approved
       comp actually renders at 1440. Ported as-rendered, not as-written. */
  }
  
  @media (max-width: 980px) {
    /* the cutout-bleed guard: Derek's hand may cross an edge, the page never
       scrolls sideways */
    body { overflow-x: clip; }
  
    .sh-payoff--hero { font-size: clamp(33px, 6vw, 58px); }
    /* ── TABLET — measured off Mike's Figma frame "Combo 4" (763 wide, node 3:19) ──
       payoff 71.198 / leading 55.07 (the same 0.774 ratio as desktop) / -0.05em on
       a 329px measure; Derek 127x204 lapping 16px over the type. */
    .sh-hero { padding: 20px 0 0; }
    .sh-hero-unit { display: flex; }
    .sh-derek-hero { display: block; width: 127px; height: auto; overflow: visible;
      margin: 0 -16px -3px 0; }
    .sh-derek-hero img { width: 100%; height: auto; object-fit: fill; }
    .sh-payoff--hero { width: 329px; font-size: 71.2px; text-align: left; margin: 0;
      letter-spacing: -0.05em; }
    .sh-payoff--hero .sh-line--field:last-child { letter-spacing: -0.008em; }
    .sh-payoff--hero .sh-mbr { display: none; }
    .sh-hero .sh-sub { max-width: 591px; margin: 22px auto 40px; }
    .sh-payoff--why  { font-size: clamp(56px, 11vw, 106px); }
  
    /* search row */
    .sh-searchrow { flex-wrap: wrap; }
    .sh-searchrow .sh-dd { flex: 1 1 40%; }
    .sh-searchrow > .sh-pill { flex: 1 1 100%; }
    .sh-searchwrap { border-radius: 20px; padding: 12px; }
    .sh-searchwrap .sh-searchrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .sh-searchwrap .sh-searchrow .sh-dd-btn { border: 1.5px solid var(--rule); border-radius: 12px; }
    .sh-searchwrap .sh-searchrow .sh-dd:first-of-type .sh-dd-btn { border-radius: 12px; }
    .sh-searchwrap .sh-searchrow .sh-dd:last-of-type .sh-dd-btn { border-right: 1.5px solid var(--rule); }
    .sh-searchwrap .sh-searchrow > .sh-pill { grid-column: 1 / -1; justify-content: center; }
  
    /* slider */
    .sh-vslider-frame { padding: 0 26px; }
    .sh-vslider .sh-arrow--prev { left: 2px; }
    .sh-vslider .sh-arrow--next { right: 2px; }
    .sh-bs { flex: 0 0 31%; }
  
    /* blue band */
    .sh-blueband { padding: 64px 0 56px; }
    .sh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 0; margin-bottom: 44px; }
    .sh-stats > div { border-left: 1px solid rgba(255,255,255,.24); padding: 4px 12px; }
    .sh-stats > div:nth-child(3n+1) { border-left: 0; }
    .sh-oems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .sh-oems a { aspect-ratio: auto; height: 84px; padding: 0 16px; flex: none; }
    .sh-oems img { max-height: 58%; }
  
    /* trio */
    .sh-trio { grid-template-columns: 1fr; gap: 18px; }
    .sh-scard { min-height: 460px; }
    .sh-sandwich-behind, .sh-dcard h3 { font-size: clamp(38px, 10vw, 54px); }
    .sh-dcard { min-height: 0; }
    .sh-dcard-veh { width: 76%; max-width: 420px; }
    .sh-tcard-photo { min-height: 240px; }
  
    /* promos */
    .sh-promo-band { grid-template-columns: 1fr; padding: 44px 30px; }
    .sh-promo-visual { min-height: 320px; margin-top: 10px; }
    .sh-promo h2 { font-size: 32px; }
    .sh-uicard { position: relative; width: 100%; margin-top: 14px; }
    .sh-promo--trade .sh-promo-visual { min-height: 0; }
    .sh-promo--trade .sh-photocard { position: relative; inset: auto; width: 100%; transform: rotate(0deg); }
    .sh-promo--trade .sh-uicard { width: calc(100% - 28px); margin: -34px auto 0; }
    .sh-promo--delivery .sh-promo-band { min-height: 0; }
    .sh-promo--delivery .sh-photocard2 { min-height: 240px; }
  
    /* why-us: the band re-stacks and Derek drops UNDER the copy, right-aligned */
    .sh-whyus-band { min-height: 0; overflow: hidden; flex-direction: column; align-items: stretch; }
    .sh-whyus-copy { max-width: 100%; padding: 44px 28px 0; }
    .sh-why-grid { grid-template-columns: 1fr; gap: 0; margin-top: 28px; }
    .sh-whyus .sh-fineprint { margin-top: 18px; }
    .sh-derek { position: static !important; width: min(56vw, 340px) !important;
      order: 9; align-self: flex-end; margin: -10px 0 0; }
    .sh-derek img { display: block; width: 100%; height: auto; }
  
    /* about */
    .sh-about-grid { grid-template-columns: 1fr; gap: 28px; }
  }
  
  @media (min-width: 641px) and (max-width: 980px) {
    .sh-scard { min-height: 420px; }
    .sh-sandwich-base, .sh-sandwich-pop { transform: scale(1.02); object-position: 60% 30%; }
    .sh-derek { width: min(52vw, 420px) !important; }   /* the approved ~57%-of-band ratio */
  }
  
  @media (max-width: 640px) {
    .sh-wrap { padding-left: 16px; padding-right: 16px; }
  
    /* wave-3 (Mike): the hero payoff leads BIGGER on three lines — the .sh-mbr
       break flips on so it reads IT'S ALL / COVERED. / FOR LIFE. */
    /* ── PHONE — Figma frame "Combo 5" (388 wide, node 3:11) ──
       payoff 56.254 / leading 43.511 / -0.05em on a 260px measure; Derek 100x161.
       NOTE: the crop is the SAME head-to-thigh framing at all three sizes (Figma
       reports identical 264.6%/219.18% placement in every frame), so the phone
       figure is scaled, not re-cropped chest-up. That is a deliberate deviation
       from the R6 rule — it is Mike's drawn design across all three frames. */
    .sh-derek-hero { width: 100px; margin: 0 -12px -3px 0; }
    .sh-payoff--hero { width: 260px; font-size: 56.25px; }
    .sh-hero .sh-sub { max-width: 324px; margin: 25px auto 30px; }
    .sh-payoff--hero .sh-mbr { display: inline; }
  
    .sh-hero { padding: 60px 0 0; }
    .sh-hero .sh-sub { font-size: 16px; max-width: 32ch; margin: 20px auto 30px; }
    .sh-searchwrap .sh-searchrow { grid-template-columns: 1fr; }
  
    /* wave-3: the module rhythm tightens — the desktop gaps carried too much air */
    .sh-triosec { padding: 40px 0 12px; }
    .sh-promo { padding: 12px 0; }
    .sh-whyus { padding: 12px 0; }
    .sh-about { padding: 48px 0; }
  
    .sh-derek { width: min(88vw, 330px) !important; align-self: center; margin-top: 6px; }
  }
  
  @media (max-width: 560px) {
    .sh-stats { grid-template-columns: 1fr 1fr; gap: 26px 0; }
    .sh-stats > div:nth-child(3n+1) { border-left: 1px solid rgba(255,255,255,.24); }
    .sh-stats > div:nth-child(2n+1) { border-left: 0; }
    .sh-stats > div:last-child { grid-column: 1 / -1; border-left: 0; }
    .sh-oems a { height: 64px; padding: 0 12px; }
  
    .sh-scard { min-height: 430px; }
    .sh-tcard-photo { min-height: 200px; }
  
    .sh-bs { flex: 0 0 46%; }
    .sh-bs img { height: 70px; margin-top: 18px; }
  
    .sh-promo-band { padding: 36px 22px; border-radius: 16px; }
    .sh-promo h2 { font-size: clamp(26px, 8vw, 32px); }
  }
  
  /* ── The MAP BAND stops being an overlay below the desktop breakpoint ──────
     At 390 the directions panel is nearly the full width of the band and sits
     vertically centred over the map, so it covered the JAMESTOWN pin outright —
     the group's flagship town, invisible on a phone. (Only visible from
     2026-07-27, when the embed's fitBounds fix stopped every narrow viewport
     falling back to a continental view; MANIFEST §L5.) Map on top, panel under
     it, both full lane. A form floating over a map is a phone anti-pattern
     anyway — it fights the map's own pan/zoom for the same pixels.
  
     ⚠ 980 here is ONE decision with PANEL_MIN_W = 981 in
     embeds/map-embed.live.brand1.html, which is the width at/above which the
     embed reserves the map's left third for this panel. Change them together,
     or there is a width where a panel floats over centred pins.
  
     Ported byte-for-byte from the comp's own rule (round6/css-r6-resp.mjs, same
     cascade position — last in the §19 responsive run) on their selectors. ── */
  @media (max-width: 980px) {
    .sh-map { display: block; min-height: 0; padding-bottom: 34px; }
    .sh-mapframe { position: relative; inset: auto; width: 100%; height: 340px; display: block; }
    .sh-map-wrap { margin-top: 24px; }
    .sh-map-panel { max-width: none; }
  }
  
  
  /* ═══ 20 · THE FORM LANGUAGE ════════════════════════════════════════════════
     THE CANONICAL FORM VOCABULARY for the whole site. Forms recur everywhere
     (Check Availability, Schedule Test Drive, Value Trade, Contact, finance
     pre-qual, service scheduling), so this section is written ONCE and against
     TWO hooks that resolve to the SAME rules:
  
       · DEALER INSPIRE / GRAVITY FORMS markup, styled AS-IS.  `.gform_wrapper`,
         `li.gfield`, `label.gfield_label`, `.ginput_container`, `.gform_footer`,
         `.gfield_error`, `.validation_message` are Gravity Forms' own class
         names and every `name=` / `id=` / `tabindex=` / `action=` on the real
         form is UNTOUCHED. Nothing here renames, re-nests or re-parents a field.
         The forms must keep posting exactly as they post today.
       · OUR namespaced `sh-*` classes, for forms our team authors into DI Page
         Composer rows (same architecture split as §19).
  
     DECISION — UNDERLINE → BOXED.  DI ships underline inputs (a bottom rule
     only). This system boxes them: a 1.5px `--rule` border, 10px radius, 48px
     min height. Reason: the whole control language is already boxed and pilled
     (§5 pill, §13 rail panels, §19.1 `.sh-dd`), underlines read as a different
     product; a box also gives the error state somewhere to live and gives touch
     targets a real edge. Logged in MANIFEST §F.
  
     FOCUS.  Blue border + the sitewide 2px gold `:focus-visible` ring at 2px
     offset (§2), restated here so the pattern is explicit and never regressed.
  
     GOLD.  Gold is an accent only. It never carries white text; the required
     asterisk is gold ON WHITE and is therefore DECORATIVE — `aria-hidden`, with
     the meaning carried by `aria-required` on the control and a visible legend
     ("* indicates a required field"). See §20.2 + MANIFEST §F.
  
     ── 20.1 tokens · 20.2 label + required · 20.3 the field box
        20.4 select · 20.5 checkbox + radio · 20.6 validation
        20.7 the form shell + submit row · 20.8 the modal chrome
        20.9 responsive (≤640 full-screen sheet) · 20.10 the /forms sheet
     ═══════════════════════════════════════════════════════════════════════════ */
  
  
  /* ── 20.1 · FORM TOKENS ────────────────────────────────────────────────────
     Additive only. §1 is converged and is not edited; these extend it.        */
  :root {
    --field-h: 48px;
    --r-field: 10px;
    --err: #B4452E;          /* 5.48:1 on white — passes AA for body text */
    --err-tint: #FCF4F2;
    --ok: #1E7A5A;           /* 4.81:1 on white */
    --ok-tint: #F1F8F5;
    --field-dis: #9AA4BC;
  }
  
  
  /* ── 20.2 · LABEL + REQUIRED ───────────────────────────────────────────────
     Labels are ALWAYS visible and ALWAYS above the field. Placeholder-only
     labelling is banned: the placeholder disappears the moment a visitor types,
     and on a lead form that is how you get a wrong phone number.              */
  .sh-label,
  .gform_wrapper .gfield_label,
  .gform_wrapper .gfield_label_before_complex {
    display: block;
    margin: 0 0 7px;
    font: 600 13px/1.3 var(--font);
    letter-spacing: .01em;
    color: var(--ink);
  }
  
  /* the gold asterisk — decorative, see the section banner */
  .sh-req,
  .gform_wrapper .gfield_required {
    color: var(--gold);
    font-weight: 800;
    margin-left: 3px;
  }
  
  /* the legend that carries the actual meaning */
  .sh-reqnote {
    font: 400 12px/1.4 var(--font);
    color: var(--soft);
    margin: 0 0 16px;
  }
  .sh-reqnote b { color: var(--gold); font-weight: 800; }
  
  /* GF sub-labels + field help text */
  .sh-help,
  .gform_wrapper .gfield_description,
  .gform_wrapper .ginput_complex label {
    display: block;
    margin: 6px 0 0;
    font: 400 12.5px/1.45 var(--font);
    color: var(--soft);
  }
  
  /* GF section headings inside a long form (Value Trade uses them) */
  .gform_wrapper .gsection {
    margin: 10px 0 2px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
  }
  .gform_wrapper .gsection:first-child { padding-top: 0; border-top: 0; }
  .sh-formsection,
  .gform_wrapper .gsection_title {
    font: 700 17px/1.3 var(--font);
    color: var(--ink);
  }
  
  
  /* ── 20.3 · THE FIELD BOX ──────────────────────────────────────────────────
     One box for text, email, tel, url, number, password, date and textarea.
     `input[type=hidden|submit|button|file|checkbox|radio]` are deliberately NOT
     in the list — they have their own rules below.                            */
  .sh-input,
  .sh-textarea,
  .gform_wrapper .ginput_container > input[type="text"],
  .gform_wrapper .ginput_container > input[type="email"],
  .gform_wrapper .ginput_container > input[type="tel"],
  .gform_wrapper .ginput_container > input[type="url"],
  .gform_wrapper .ginput_container > input[type="number"],
  .gform_wrapper .ginput_container > input[type="password"],
  .gform_wrapper .ginput_container > input[type="date"],
  .gform_wrapper .ginput_container > textarea {
    display: block;
    width: 100%;
    min-height: var(--field-h);
    padding: 12px 14px;
    background: #fff;
    border: 1.5px solid var(--rule);
    border-radius: var(--r-field);
    font: 400 15px/1.4 var(--font);
    color: var(--ink);
    transition: border-color .15s, background-color .15s, box-shadow .15s;
    -webkit-appearance: none;
    appearance: none;
  }
  
  .sh-textarea,
  .gform_wrapper .ginput_container > textarea {
    min-height: 118px;
    resize: vertical;
    line-height: 1.5;
  }
  
  /* placeholder — SOFT, never mistaken for a value */
  .sh-input::placeholder,
  .sh-textarea::placeholder,
  .gform_wrapper .ginput_container > input::placeholder,
  .gform_wrapper .ginput_container > textarea::placeholder {
    color: var(--soft);
    opacity: .75;
  }
  
  /* hover */
  .sh-input:hover, .sh-textarea:hover, .sh-select:hover,
  .sh-input.is-hover, .sh-textarea.is-hover, .sh-select.is-hover,
  .gform_wrapper .ginput_container > input:hover,
  .gform_wrapper .ginput_container > textarea:hover,
  .gform_wrapper .ginput_container > select:hover { border-color: var(--blue); }
  
  /* focus — blue border, plus the sitewide gold focus-visible ring (§2) */
  .sh-input:focus, .sh-textarea:focus, .sh-select:focus,
  .sh-input.is-focus, .sh-textarea.is-focus, .sh-select.is-focus,
  .gform_wrapper .ginput_container > input:focus,
  .gform_wrapper .ginput_container > textarea:focus,
  .gform_wrapper .ginput_container > select:focus {
    border-color: var(--blue);
    background: #fff;
    outline: none;
  }
  .sh-input:focus-visible, .sh-textarea:focus-visible, .sh-select:focus-visible,
  .sh-input.is-focus, .sh-textarea.is-focus, .sh-select.is-focus,
  .gform_wrapper .ginput_container > input:focus-visible,
  .gform_wrapper .ginput_container > textarea:focus-visible,
  .gform_wrapper .ginput_container > select:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  
  /* disabled / readonly */
  .sh-input:disabled, .sh-textarea:disabled, .sh-select:disabled,
  .gform_wrapper .ginput_container > input:disabled,
  .gform_wrapper .ginput_container > textarea:disabled,
  .gform_wrapper .ginput_container > select:disabled {
    background: var(--mist);
    border-color: var(--rule);
    color: var(--field-dis);
    cursor: not-allowed;
  }
  .sh-input:read-only:not(:disabled),
  .gform_wrapper .ginput_container > input:read-only:not(:disabled) {
    background: var(--cloud);
    color: var(--soft);
  }
  
  
  /* ── 20.4 · SELECT — the .sh-dd visual, on a native <select> ───────────────
     §19.1's `.sh-dd` is a fully custom, JS-driven dropdown; it is the right
     control for the hero's inventory pickers. Inside a FORM the native <select>
     stays native (keyboard, mobile wheel, screen readers, no JS to ship) and
     only WEARS the same clothes: white box, 1.5px rule, the same caret glyph.  */
  .sh-select,
  .gform_wrapper .ginput_container > select,
  .gform_wrapper .ginput_container select.gfield_select {
    display: block;
    width: 100%;
    min-height: var(--field-h);
    padding: 12px 40px 12px 14px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231B2A52' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 15px center;
    border: 1.5px solid var(--rule);
    border-radius: var(--r-field);
    font: 600 15px/1.4 var(--font);
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .sh-select::-ms-expand,
  .gform_wrapper .ginput_container > select::-ms-expand { display: none; }
  
  /* GF's placeholder option reads as a placeholder, not as a value */
  .sh-select:has(option.gf_placeholder:checked),
  .gform_wrapper .ginput_container > select:has(option.gf_placeholder:checked) {
    color: var(--soft);
    font-weight: 400;
  }
  
  /* file input — the one control the browser draws for us; give it a box */
  .gform_wrapper .ginput_container_fileupload input[type="file"] {
    display: block;
    width: 100%;
    min-height: var(--field-h);
    padding: 11px 14px;
    background: #fff;
    border: 1.5px dashed var(--rule);
    border-radius: var(--r-field);
    font: 400 13.5px/1.4 var(--font);
    color: var(--soft);
    cursor: pointer;
  }
  .gform_wrapper .ginput_container_fileupload input[type="file"]:hover { border-color: var(--blue); }
  
  
  /* ── 20.5 · CHECKBOX + RADIO ───────────────────────────────────────────────
     18px, 1.5px rule, blue when checked with a WHITE check. The Lifetime seal
     is NOT the default check — it is reserved for the one place the coverage
     chip runs (`.sh-check--seal`), so the brand mark keeps its meaning.        */
  .sh-check,
  .gform_wrapper .gfield_checkbox li,
  .gform_wrapper .gfield_radio li,
  .gform_wrapper .gfield_consent_wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
  }
  
  .sh-check input[type="checkbox"],
  .sh-check input[type="radio"],
  .gform_wrapper input[type="checkbox"],
  .gform_wrapper input[type="radio"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    background: #fff;
    border: 1.5px solid var(--rule);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
    -webkit-appearance: none;
    appearance: none;
  }
  .sh-check input[type="radio"],
  .gform_wrapper input[type="radio"] { border-radius: 999px; }
  
  .sh-check input[type="checkbox"]:hover,
  .sh-check input[type="radio"]:hover,
  .gform_wrapper input[type="checkbox"]:hover,
  .gform_wrapper input[type="radio"]:hover { border-color: var(--blue); }
  
  .sh-check input[type="checkbox"]:checked,
  .gform_wrapper input[type="checkbox"]:checked {
    background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5l3.4 3.4L11 1.6' stroke='%23ffffff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 11px 9px;
    border-color: var(--blue);
  }
  .sh-check input[type="radio"]:checked,
  .gform_wrapper input[type="radio"]:checked {
    background: #fff;
    border: 5.5px solid var(--blue);
  }
  
  .sh-check input[type="checkbox"]:disabled,
  .sh-check input[type="radio"]:disabled,
  .gform_wrapper input[type="checkbox"]:disabled,
  .gform_wrapper input[type="radio"]:disabled {
    background-color: var(--mist);
    border-color: var(--rule);
    cursor: not-allowed;
  }
  .sh-check input:disabled + label,
  .gform_wrapper .gfield_checkbox li input:disabled + label,
  .gform_wrapper .gfield_radio li input:disabled + label {
    color: var(--field-dis);
    cursor: not-allowed;
  }
  
  .sh-check input[type="checkbox"]:focus-visible,
  .sh-check input[type="radio"]:focus-visible,
  .gform_wrapper input[type="checkbox"]:focus-visible,
  .gform_wrapper input[type="radio"]:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  
  .sh-check label,
  .sh-check > span,
  .gform_wrapper .gfield_checkbox li label,
  .gform_wrapper .gfield_radio li label,
  .gform_wrapper .gfield_consent_wrapper label {
    margin: 0;
    font: 400 14px/1.45 var(--font);
    color: var(--ink);
    cursor: pointer;
  }
  
  /* THE ONE seal exception — the coverage opt-in chip */
  .sh-check--seal input[type="checkbox"]:checked {
    background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 992 995'%3E%3Cpath d='M296.7 522.5 L426.7 654.2 L676.1 402.5 L614.6 339.9 L429.1 527.6 L359.5 458.3 L296.7 522.5 M619.4 891.9 C550.8 880.4 516.7 995.2 455.5 948.0 C415.7 917.4 394.9 885.1 353.2 891.9 L292.7 901.9 C267.3 906.1 242.8 894.2 233.9 869.4 L214.4 814.8 C207.6 795.7 193.7 778.9 174.0 771.7 L117.6 751.4 C92.7 742.4 78.2 719.4 82.8 692.4 L93.1 631.8 C96.8 610.6 89.3 590.8 76.2 575.0 L38.3 529.5 C0.0 483.4 62.1 443.5 87.9 401.5 C107.9 369.0 70.8 308.3 86.8 269.7 C102.9 230.8 178.1 236.0 201.8 202.3 C216.1 181.9 223.1 154.8 230.9 131.8 C257.4 53.7 335.0 118.1 385.8 98.8 C408.2 90.4 426.8 69.0 443.9 54.3 C507.4 0.0 540.2 80.7 585.5 98.5 C637.8 119.1 717.0 51.4 742.8 135.2 C749.6 157.0 756.7 182.8 770.4 202.0 C795.0 236.3 868.4 230.6 885.6 269.7 C901.8 306.5 866.1 364.4 883.5 398.9 C894.2 420.0 911.7 436.4 926.7 454.7 C991.9 533.9 866.5 554.6 879.5 631.9 L889.6 692.5 C894.1 719.5 880.1 742.2 855.0 751.3 L798.4 771.7 C780.8 778.1 765.9 793.9 759.5 811.2 L738.7 867.8 C729.3 893.4 706.9 906.5 679.8 902.0 L619.4 891.9 Z' fill='%231B2A52' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat center / 13px 13px;
    border-color: var(--gold);
  }
  
  
  /* ── 20.6 · VALIDATION ─────────────────────────────────────────────────────
     ERROR: the field border goes deep red, the message sits BELOW the field at
     13px in the same red. GF's own `.gfield_error` / `.validation_message` /
     `.validation_error` class names, so the plugin's real server-side and
     client-side validation paints this with no extra wiring.                   */
  .sh-field.is-error .sh-input,
  .sh-field.is-error .sh-textarea,
  .sh-field.is-error .sh-select,
  .sh-input[aria-invalid="true"],
  .sh-textarea[aria-invalid="true"],
  .sh-select[aria-invalid="true"],
  .gform_wrapper .gfield_error .ginput_container > input,
  .gform_wrapper .gfield_error .ginput_container > textarea,
  .gform_wrapper .gfield_error .ginput_container > select,
  .gform_wrapper .ginput_container > input[aria-invalid="true"],
  .gform_wrapper .ginput_container > textarea[aria-invalid="true"],
  .gform_wrapper .ginput_container > select[aria-invalid="true"] {
    border-color: var(--err);
    background-color: var(--err-tint);
  }
  .sh-field.is-error .sh-input:focus,
  .sh-input[aria-invalid="true"]:focus,
  .sh-textarea[aria-invalid="true"]:focus,
  .sh-select[aria-invalid="true"]:focus,
  .gform_wrapper .gfield_error .ginput_container > input:focus,
  .gform_wrapper .gfield_error .ginput_container > textarea:focus,
  .gform_wrapper .gfield_error .ginput_container > select:focus { border-color: var(--err); }
  
  .sh-error,
  .gform_wrapper .validation_message,
  .gform_wrapper .gfield_error .gfield_description.validation_message {
    display: block;
    margin: 7px 0 0;
    font: 600 13px/1.4 var(--font);
    color: var(--err);
  }
  /* the ⚠ mark — drawn, never an icon font (§3 kills those) */
  .sh-error::before,
  .gform_wrapper .validation_message::before {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23B4452E'/%3E%3Cpath d='M8 4.2v4.4' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.5' r='1' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain;
  }
  
  /* the form-level error summary GF prints above the fields */
  .gform_wrapper .validation_error {
    margin: 0 0 18px;
    padding: 13px 16px;
    background: var(--err-tint);
    border: 1.5px solid var(--err);
    border-radius: var(--r-field);
    font: 600 14px/1.45 var(--font);
    color: var(--err);
  }
  
  /* SUCCESS — deliberately quiet. A green tick on a valid field, and the real
     confirmation is the message GF swaps the form for.                         */
  .sh-field.is-ok .sh-input,
  .sh-field.is-ok .sh-select,
  .gform_wrapper .gfield_valid .ginput_container > input {
    border-color: var(--ok);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='11'%3E%3Cpath d='M1 5.5l3.6 3.6L12 1.7' stroke='%231E7A5A' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center;
    padding-right: 40px;
  }
  .sh-ok,
  .gform_wrapper .gform_confirmation_message {
    display: block;
    margin: 7px 0 0;
    padding: 0;
    font: 600 13px/1.4 var(--font);
    color: var(--ok);
  }
  .gform_wrapper .gform_confirmation_message {
    padding: 20px 22px;
    background: var(--ok-tint);
    border: 1.5px solid var(--ok);
    border-radius: var(--r-panel);
    font-size: 15px;
    margin: 0;
  }
  
  
  /* ── 20.7 · THE FORM SHELL + SUBMIT ROW ────────────────────────────────────
     GF's field list is a <ul> of <li class="gfield">. Kept as-is and laid out
     as a single-column stack; `gf_left_half` / `gf_right_half` become a real
     2-up above 560px. Hidden plumbing (`gform_hidden`, the honeypot
     `gform_validation_container`, the referral `.hidden` row) stays hidden —
     DI's stylesheet did that and ours is now the only stylesheet on the page. */
  .gform_wrapper form { margin: 0; }
  .gform_wrapper .gform_body { width: 100%; }
  
  .gform_wrapper ul.gform_fields {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .gform_wrapper ul.gform_fields > li.gfield {
    flex: 1 1 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .gform_wrapper ul.gform_fields > li.gfield.gf_left_half,
  .gform_wrapper ul.gform_fields > li.gfield.gf_right_half { flex: 1 1 calc(50% - 9px); }
  
  /* never render the plumbing */
  .gform_wrapper li.gform_hidden,
  .gform_wrapper li.gfield.gform_hidden,
  .gform_wrapper li.gfield.gform_validation_container,
  .gform_wrapper input.gform_hidden,
  .gform_wrapper input[type="hidden"],
  .gform_wrapper .gform_ajax_frame,
  .gform_wrapper iframe[name^="gform_ajax_frame"] { display: none !important; }
  
  /* the submit row — reCAPTCHA line left, primary pill right */
  .sh-formfoot,
  .gform_wrapper .gform_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin: 24px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--rule);
  }
  /* the reCAPTCHA / consent line — VERBATIM copy, 12px soft, never restyled to hide */
  .sh-formfoot .sh-fineline,
  .gform_wrapper .gform_footer p,
  .gform_wrapper .gform_footer small {
    margin: 0;
    font: 400 12px/1.45 var(--font);
    color: var(--soft);
    max-width: 30ch;
  }
  .gform_wrapper .bottomsection {
    font: 400 12.5px/1.5 var(--font);
    color: var(--soft);
  }
  
  /* the primary pill (same system as §5 .s-pill / §19.1 .sh-pill) */
  .gform_wrapper .gform_footer input[type="submit"],
  .gform_wrapper .gform_footer .gform_button,
  .sh-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 30px;
    margin: 0;
    background: var(--blue);
    color: #fff;
    border: 0;
    border-radius: var(--r-pill);
    font: 700 15px/1 var(--font);
    letter-spacing: .01em;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .15s, transform .1s;
  }
  .gform_wrapper .gform_footer input[type="submit"]:hover,
  .sh-submit:hover { background: var(--blue-up); }
  .gform_wrapper .gform_footer input[type="submit"]:active,
  .sh-submit:active { transform: scale(.975); }
  .gform_wrapper .gform_footer input[type="submit"]:focus-visible,
  .sh-submit:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .gform_wrapper .gform_footer input[type="submit"]:disabled,
  .sh-submit:disabled {
    background: var(--rule);
    color: var(--field-dis);
    cursor: not-allowed;
    transform: none;
  }
  
  /* our own namespaced form shell (Composer-authored forms) */
  .sh-form { display: flex; flex-wrap: wrap; gap: 18px; }
  .sh-field { flex: 1 1 100%; min-width: 0; }
  .sh-field--half { flex: 1 1 calc(50% - 9px); }
  .sh-form .sh-formfoot { flex: 1 1 100%; }
  
  
  /* ── 20.8 · THE MODAL CHROME ───────────────────────────────────────────────
     Scoped HARD to `#modal__main-form`. §4 suppresses every overlay on the site
     and MUST keep doing so — the sibling modals (`#modal__gform_7`,
     `#modal__gform_13`, the action-bar search widget, the filter drawers) stay
     hidden. Only this one id, and only while `body.sh-modal-open`, is released.
  
     The open/close mechanics in production are DEALER INSPIRE'S OWN di-modal JS
     (their CTAs already carry `class="di-modal" href="#modal__main-form"`). The
     script this harness injects is a REFERENCE implementation of the behaviour,
     not a deliverable — see convert/serve.mjs MODAL_BEHAVIOUR and MANIFEST §F. */
  
  /* the scrim */
  .sh-modal-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(27, 42, 82, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  body.sh-modal-open .sh-modal-scrim { display: block; }
  body.sh-modal-open { overflow: hidden; }
  
  /* the card */
  body.sh-modal-open #modal__main-form {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    z-index: 9001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100vw - 48px);
    max-width: 560px;
    max-height: calc(100vh - 56px);
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
      0 24px 56px -28px rgba(27, 42, 82, .25),
      0 60px 120px -40px rgba(27, 42, 82, .55);
  }
  body.sh-modal-open #modal__main-form .gform_wrapper { display: block !important; }
  
  /* the header band — CLOUD ground, holds the title AND the vehicle card */
  #modal__main-form .di-modal-head {
    flex: none;
    padding: 22px 62px 16px 28px;      /* right pad clears the ✕ */
    background: var(--cloud);
  }
  #modal__main-form .di-modal-head h2 {
    font: 700 20px/1.25 var(--font);
    color: var(--ink);
    letter-spacing: -.01em;
  }
  
  #modal__main-form .di-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 28px;
    -webkit-overflow-scrolling: touch;
  }
  
  /* the submit row is PINNED to the bottom of the card. On a short viewport (or
     a long form — Value Trade is 14 fields) the fields scroll and the primary
     action stays where the thumb already is. It bleeds to the card edges so the
     white ground covers whatever scrolls under it. */
  #modal__main-form .gform_footer,
  #modal__main-form .sh-formfoot {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 24px -28px 0;
    padding: 18px 28px 22px;
    background: #fff;
  }
  
  /* the vehicle card — bleeds to the card edges so it reads as one band with
     the head above it, and closes the band with a hairline */
  #modal__main-form .vehicle-info {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 -28px 24px;
    padding: 0 28px 20px;
    background: var(--cloud);
    border-bottom: 1px solid var(--rule);
  }
  #modal__main-form .vehicle-info .info-left { flex: none; }
  #modal__main-form .vehicle-info .info-left img {
    width: 104px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--r-field);
    background: var(--mist);
  }
  #modal__main-form .vehicle-info .info-right { min-width: 0; }
  #modal__main-form .vehicle-info .info-right h2 {
    font: 700 15.5px/1.3 var(--font);
    color: var(--ink);
    margin: 0 0 6px;
  }
  #modal__main-form .vehicle-info .info-right .vin,
  #modal__main-form .vehicle-info .info-right .stock {
    display: inline-block;
    margin-right: 14px;
    font: 500 12px/1.4 var(--font);
    letter-spacing: .02em;
    color: var(--soft);
  }
  
  /* the required legend the rig inserts (see §20.2) */
  #modal__main-form .sh-reqnote { margin-top: -6px; }
  
  /* the ✕ — 44px hit area, top-right, above the band */
  .sh-modal-x {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--soft);
    font: 400 20px/1 var(--font);
    cursor: pointer;
    transition: background-color .15s, color .15s;
  }
  .sh-modal-x:hover { background: rgba(27, 42, 82, .07); color: var(--ink); }
  .sh-modal-x:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  
  
  /* ── 20.9 · RESPONSIVE — the ≤640 full-screen sheet ────────────────────────
     On a phone the modal stops pretending to be a card: it becomes a sheet that
     owns the viewport, fields go full width and the submit pill goes full width
     under the disclosure line (thumb reach, and no 2-up on a 390 canvas).      */
  @media (max-width: 640px) {
    body.sh-modal-open #modal__main-form {
      top: 0;
      left: 0;
      transform: none;
      width: 100vw;
      max-width: none;
      height: 100%;
      max-height: none;
      border-radius: 0;
    }
  
    #modal__main-form .di-modal-head { padding: 18px 58px 14px 20px; }
    #modal__main-form .di-modal-head h2 { font-size: 18px; }
    #modal__main-form .di-modal-body { padding: 0 20px; }
    #modal__main-form .gform_footer,
    #modal__main-form .sh-formfoot { margin: 20px -20px 0; padding: 16px 20px 20px; }
  
    /* the sheet owns the viewport, so the submit row is pushed to the BOTTOM of
       it rather than floating under a short form. The chain has to be flex the
       whole way down: body → wrapper → form → the field list takes the slack. */
    #modal__main-form .di-modal-body { display: flex; flex-direction: column; }
    body.sh-modal-open #modal__main-form .gform_wrapper {
      display: flex !important;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
    }
    #modal__main-form .gform_wrapper > form { display: flex; flex-direction: column; flex: 1 1 auto; }
    #modal__main-form .gform_body { flex: 1 1 auto; }
    #modal__main-form .vehicle-info {
      margin: 0 -20px 20px;
      padding: 0 20px 16px;
    }
    #modal__main-form .vehicle-info .info-left img { width: 84px; height: 60px; }
  
    .sh-modal-x { top: 6px; right: 6px; }
  
    .gform_wrapper ul.gform_fields { gap: 16px; }
    .gform_wrapper ul.gform_fields > li.gfield,
    .gform_wrapper ul.gform_fields > li.gfield.gf_left_half,
    .gform_wrapper ul.gform_fields > li.gfield.gf_right_half { flex: 1 1 100%; }
    .sh-field--half { flex: 1 1 100%; }
  
    .sh-formfoot,
    .gform_wrapper .gform_footer {
      flex-direction: column-reverse;
      align-items: stretch;
      gap: 14px;
    }
    .gform_wrapper .gform_footer input[type="submit"],
    .sh-formfoot .sh-submit { width: 100%; }
    .sh-formfoot .sh-fineline,
    .gform_wrapper .gform_footer p { max-width: none; text-align: center; }
  }
  
  
  /* ── 20.10 · THE /forms SHEET (the form-language reference page) ───────────
     Chrome for convert/dom/forms.html only — a specimen page, not a site page.
     It shows every control in every state, and renders the REAL Check
     Availability modal markup inline at the bottom so the language can be read
     next to the thing it produces. Feeds the Phase-3 style guide directly.     */
  .sh-fsheet { padding: 56px 0 80px; }
  .sh-fsheet-head { margin: 0 0 44px; }
  .sh-fsheet-head h1 { font: 800 40px/1.15 var(--font); letter-spacing: -.02em; margin: 10px 0 12px; }
  .sh-fsheet-head p { font-size: 17px; color: var(--soft); max-width: 66ch; }
  
  .sh-fsec { margin: 0 0 52px; }
  .sh-fsec > h2 {
    font: 800 13px/1 var(--font);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--soft);
    padding-bottom: 12px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--rule);
  }
  .sh-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; }
  .sh-fgrid--1 { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .sh-fnote {
    display: block;
    margin: 0 0 8px;
    font: 700 11px/1 var(--font);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue);
  }
  .sh-fnote span { color: var(--soft); font-weight: 600; letter-spacing: .02em; text-transform: none; }
  
  /* the spec swatch table */
  .sh-fspec { width: 100%; font: 400 13.5px/1.5 var(--font); }
  .sh-fspec th, .sh-fspec td { text-align: left; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
  .sh-fspec th { font-weight: 700; color: var(--ink); width: 190px; }
  .sh-fspec td { color: var(--soft); }
  .sh-fswatch { display: inline-block; width: 15px; height: 15px; border-radius: 4px; vertical-align: -3px; margin-right: 8px; border: 1px solid rgba(27,42,82,.12); }
  
  /* the inline modal specimen — the SAME node the rig lifts into the overlay */
  .sh-spec-modal {
    max-width: 560px;
    background: #fff;
    border: 1.5px solid var(--rule);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 56px -28px rgba(27, 42, 82, .25);
    position: relative;
  }
  /* stand-alone gravity-forms specimens on the sheet (the validation summary and
     the confirmation panel). §4 hides `.gform_wrapper` with `!important`, which an
     inline style cannot out-rank — so the sheet un-hides them by class. */
  .sh-fdemo.gform_wrapper { display: block !important; }
  
  .sh-spec-modal #modal__main-form { display: block !important; }
  .sh-spec-modal #modal__main-form .gform_wrapper { display: block !important; }
  .sh-spec-modal #modal__main-form .di-modal-body { padding: 0 28px; }
  /* while the overlay is open the modal node goes position:fixed and leaves the
     frame's flow — the frame stays as a labelled empty slot (never
     `visibility:hidden`: that would inherit down to the fixed child and blank
     the open modal). */
  body.sh-modal-open .sh-spec-modal {
    min-height: 132px;
    border-style: dashed;
    box-shadow: none;
  }
  body.sh-modal-open .sh-spec-modal::before {
    content: 'The modal is open — press Esc, click the scrim or hit ✕ to return it to this frame.';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    text-align: center;
    font: 600 13px/1.5 var(--font);
    color: var(--soft);
  }
  
  /* the sheet at phone width — one column, the spec table stacks */
  @media (max-width: 640px) {
    .sh-fsheet { padding: 34px 0 56px; }
    .sh-fsheet-head { margin-bottom: 32px; }
    .sh-fsheet-head h1 { font-size: 30px; }
    .sh-fsheet-head p { font-size: 15.5px; }
  
    .sh-fsec { margin-bottom: 40px; }
    .sh-fgrid, .sh-fgrid--1 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  
    .sh-fspec, .sh-fspec tbody, .sh-fspec tr, .sh-fspec th, .sh-fspec td { display: block; width: auto; }
    .sh-fspec tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
    .sh-fspec th, .sh-fspec td { padding: 0; border: 0; }
    .sh-fspec th { margin-bottom: 4px; }
  
    .sh-spec-modal { max-width: none; }
  }
  
  
  /* ═══ 21 · THE LOCATIONS PAGE ═══════════════════════════════════════════════
     THE LOCATIONS LEG. A NEW page executed inside the locked system — nothing in
     §1–§20 is edited, and every class below is namespaced `sh-loc-*` so it cannot
     collide with a Dealer Inspire, WordPress or Bootstrap 3 name.
  
     Architecture is §19's exactly: five DI Page Composer rows, each holding one
     convert/fragments/loc-*.html payload, flattened by §19.0's row plumbing (the
     rows carry the same `sh-row` custom class, so §19.0 already handles them —
     §21 adds no row plumbing of its own).
  
     The card is the SYSTEM's card, measured off §14's `.result-wrap .hit` — white
     ground, 1.5px `--rule` border, `--r-card` (14px) radius, and the identical
     hover (0 22px 48px -18px rgba(27,42,82,.22) + translateY(-3px) + #CBD4EA).
     Internal separators are §13/§17's 1px `--rule`. No new colour is introduced;
     every value resolves to a §1 token. Authored in px.
  
     NO JAVASCRIPT ON THIS PAGE. The per-store hours are a native
     <details class="sh-loc-hours"> disclosure — the browser owns the open/close,
     so the page works with JS off, inside an email-preview, and in the Composer's
     own preview. The default marker is removed in both the ::marker and
     ::-webkit-details-marker forms and replaced with the system's CSS caret.
  
     21.1 lead band + map   21.2 town section head   21.3 the store card
     21.4 phone + hours rows   21.5 the disclosure   21.6 CTAs   21.7 responsive
     ═══════════════════════════════════════════════════════════════════════════ */
  
  
  /* ── 21.1 · THE LEAD BAND + THE 3-TOWN MAP ────────────────────────────────── */
  .sh-loc-lead { padding: 66px 0 54px; }
  
  .sh-loc-kicker {
    display: block;
    font: 700 13px/1 var(--font); letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink);
  }
  .sh-loc-h1 {
    margin-top: 15px;
    font: 800 44px/1.14 var(--font); letter-spacing: -.01em; color: var(--ink);
  }
  .sh-loc-lead .sh-sub { margin-top: 15px; }
  
  /* the branded 3-town embed — the SAME map the homepage band carries
     (fragments/08-map.html). Its Google key is referrer-restricted, so a LOCAL
     capture shows the framed panel, not the tiles; on the live domain it paints. */
  .sh-loc-map {
    display: block; width: 100%; height: 520px; margin-top: 34px;
    border: 1.5px solid var(--rule); border-radius: var(--r-panel);
    background: var(--cloud);
  }
  
  
  /* ── 21.2 · THE TOWN SECTION HEAD ─────────────────────────────────────────── */
  .sh-loc-town { padding: 0 0 54px; }
  
  .sh-loc-sechead {
    display: flex; align-items: baseline; gap: 12px;
    padding-bottom: 16px; margin-bottom: 26px;
    border-bottom: 1.5px solid var(--rule);
  }
  .sh-loc-sechead h2 { font: 800 22px/1.2 var(--font); color: var(--ink); }
  .sh-loc-state { font: 600 13px/1 var(--font); color: var(--soft); }
  
  /* the store grid — 2-up (Jamestown reads as 2×2, Warren as one pair).
     A single-store town gets `--one`: the Composer emits each row as its own
     top-level block, so two one-store towns CANNOT share a horizontal band
     without negative margins that break on-platform (MANIFEST §L3). The card is
     centred at the lane's half-measure instead of stretched to full width. */
  .sh-loc-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  }
  .sh-loc-grid--one { grid-template-columns: minmax(0, 620px); justify-content: center; }
  
  
  /* ── 21.3 · THE STORE CARD ────────────────────────────────────────────────── */
  /* the system's card, measured off §14 `.result-wrap .hit` — same ground, same
     1.5px rule, same 14px radius, same hover. Consistency over novelty. */
  .sh-loc-card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1.5px solid var(--rule); border-radius: var(--r-card);
    padding: 22px 24px 24px;
    transition: box-shadow .18s, transform .18s, border-color .18s;
  }
  .sh-loc-card:hover {
    box-shadow: 0 22px 48px -18px rgba(27, 42, 82, .22);
    transform: translateY(-3px); border-color: #CBD4EA;
  }
  
  /* header — the OEM mark slot + the store name. The mark heights on the <img>
     tags are the blueband's OPTICAL per-mark values, carried verbatim; the slot
     is a fixed 44px box so every card's name sits on the same baseline whatever
     the mark's own proportions are. Ed Shults of Warren Inc wears four marks
     (it is the CDJR store) — the slot wraps rather than shrinking the name. */
  .sh-loc-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .sh-loc-mark {
    display: flex; align-items: center; gap: 10px;
    height: 44px; flex: none;
  }
  .sh-loc-mark img { width: auto; display: block; }
  .sh-loc-name { font: 700 16.5px/1.3 var(--font); color: var(--ink); }
  
  /* the address — the whole line is the maps link, with a directions affordance */
  .sh-loc-addr {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    margin-top: 14px;
    font: 400 14px/1.5 var(--font); color: var(--soft);
  }
  .sh-loc-street { display: block; }
  .sh-loc-dir {
    flex: none; white-space: nowrap;
    font: 600 12.5px/1.5 var(--font); color: var(--blue);
  }
  .sh-loc-addr:hover .sh-loc-street { color: var(--ink); }
  .sh-loc-addr:hover .sh-loc-dir { color: var(--blue-up); text-decoration: underline; }
  
  
  /* ── 21.4 · THE PHONE ROWS ────────────────────────────────────────────────── */
  /* One row per department the store PUBLISHES. Two departments sharing a number
     still print both rows — the page reports the facts as published, it does not
     de-duplicate them. */
  .sh-loc-rows { margin-top: 16px; border-top: 1px solid var(--rule); }
  .sh-loc-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 9px 0; border-bottom: 1px solid var(--rule);
  }
  .sh-loc-lab {
    font: 600 11px/1 var(--font); letter-spacing: .09em;
    text-transform: uppercase; color: var(--soft);
  }
  .sh-loc-tel { font: 600 15px/1 var(--font); color: var(--ink); transition: color .12s; }
  .sh-loc-tel:hover { color: var(--blue); }
  
  
  /* ── 21.5 · THE HOURS DISCLOSURE (native <details>, no JS) ─────────────────── */
  .sh-loc-hours { border-bottom: 1px solid var(--rule); }
  .sh-loc-hours > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 9px 0; cursor: pointer;
    list-style: none;                       /* Firefox / spec marker */
  }
  .sh-loc-hours > summary::-webkit-details-marker { display: none; }  /* Safari */
  .sh-loc-hours > summary::marker { content: ''; }
  .sh-loc-hours > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  
  /* the affordance — the system's CSS caret, drawn, never an icon font (§3) */
  .sh-loc-view {
    display: inline-flex; align-items: center; gap: 8px;
    font: 600 12.5px/1 var(--font); color: var(--blue);
  }
  .sh-loc-view::after {
    content: ''; width: 11px; height: 7px; flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23334A90' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
    transition: transform .15s;
  }
  .sh-loc-hours[open] > summary .sh-loc-view::after { transform: rotate(180deg); }
  .sh-loc-hours > summary:hover .sh-loc-view { color: var(--blue-up); }
  
  /* the schedules — VERBATIM day + time strings, one block per department */
  .sh-loc-sched { display: flex; flex-direction: column; gap: 13px; padding: 3px 0 15px; }
  .sh-loc-dept > b {
    display: block; margin-bottom: 5px;
    font: 600 11px/1 var(--font); letter-spacing: .09em;
    text-transform: uppercase; color: var(--soft);
  }
  .sh-loc-dept table { width: 100%; }
  .sh-loc-dept td { padding: 1px 0; font: 400 13px/1.55 var(--font); color: var(--ink); vertical-align: top; }
  .sh-loc-dept td:first-child { color: var(--soft); padding-right: 12px; }
  .sh-loc-dept td:last-child { text-align: right; white-space: nowrap; }
  
  
  /* ── 21.6 · THE CARD CTAs ─────────────────────────────────────────────────── */
  /* `.sh-pill--ghost` is §5's `.s-pill--ghost` restated under the sh-* namespace,
     so a pasted fragment never depends on a DI-markup rule. Additive — §19.1 is
     not edited. */
  .sh-pill--ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--rule); }
  .sh-pill--ghost:hover { background: var(--cloud); border-color: var(--soft); }
  
  .sh-loc-cta { display: flex; gap: 10px; margin-top: 18px; }
  .sh-loc-cta .sh-pill { flex: 1 1 0; min-width: 0; }
  
  
  /* ── 21.7 · LOCATIONS RESPONSIVE ──────────────────────────────────────────── */
  
  @media (max-width: 980px) {
    .sh-loc-lead { padding: 48px 0 42px; }
    .sh-loc-h1 { font-size: clamp(30px, 4.4vw, 40px); }
    .sh-loc-map { height: 440px; margin-top: 28px; }
    .sh-loc-town { padding-bottom: 42px; }
  }
  
  /* below ~860 the 2-up card is narrower than its own content wants */
  @media (max-width: 860px) {
    .sh-loc-grid, .sh-loc-grid--one { grid-template-columns: minmax(0, 1fr); }
    .sh-loc-grid--one { justify-content: stretch; }
  }
  
  @media (max-width: 640px) {
    .sh-loc-lead { padding: 38px 0 34px; }
    .sh-loc-h1 { font-size: clamp(28px, 8.4vw, 34px); }
    .sh-loc-lead .sh-sub { font-size: 16px; }
    .sh-loc-map { height: 380px; margin-top: 24px; }
  
    .sh-loc-town { padding-bottom: 34px; }
    /* the town head stacks: name over state tag, rule underneath */
    .sh-loc-sechead { flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 13px; margin-bottom: 20px; }
  
    .sh-loc-grid { gap: 16px; }
    .sh-loc-card { padding: 18px 18px 20px; }
    .sh-loc-head { gap: 12px; }
    .sh-loc-addr { font-size: 13.5px; }
    .sh-loc-dept td { font-size: 12.5px; }
    /* the two pills STAY side by side — a 358px card gives each ~157px, which
       holds "Visit Site" comfortably, and the pair reads as one footer rather
       than two stacked bars. They keep `flex: 1 1 0` from 21.6, which is only
       valid in a ROW: in a column container that basis zeroes their HEIGHT and
       collapses both pills to ~13px. */
    .sh-loc-cta { gap: 8px; }
    .sh-loc-cta .sh-pill { padding: 0 12px; }
  }