/* tokens.css */
/* Trailhead layout tokens and shell rules (ADR-0035, phase 69.6).
   Declares only --lt- custom properties (the color themes own every other
   name; tokenDisjointness.test.ts enforces that) and only rules scoped under
   [data-layout-theme="trailhead"]. The accent is the dealer's color theme's. */
[data-layout-theme="trailhead"] {
  --lt-heading-font: var(
    --theme-font-sans,
    var(--font-lt-barlow-condensed),
    "Barlow Condensed",
    "Arial Narrow",
    Impact,
    ui-sans-serif,
    sans-serif
  );
  --lt-body-font: var(
    --theme-font-sans,
    var(--font-lt-barlow),
    Barlow,
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif
  );
  --lt-band-hsl: var(--foreground);
  --lt-on-band-hsl: var(--background);
  --lt-band: hsl(var(--lt-band-hsl));
  --lt-on-band: hsl(var(--lt-on-band-hsl));
  --lt-band-muted: hsl(var(--lt-on-band-hsl) / 0.9);
  --lt-band-rule: hsl(var(--lt-on-band-hsl) / 0.15);
  --lt-stripe: repeating-linear-gradient(
    135deg,
    hsl(var(--lt-on-band-hsl) / 0.035) 0 2px,
    transparent 2px 8px
  );
  --lt-card: hsl(var(--card));
  --lt-card-text: hsl(var(--card-foreground));
  --lt-accent: hsl(var(--primary));
  /* Marks drawn on the band (stripe, CTA fill, hover fill, focus ring). The dealer's
     primary is the band's own colour in some light themes, so light mode uses the page
     colour and dark mode the primary (phase 72.1.2, C12). */
  --lt-band-accent: hsl(var(--background));
  --lt-on-band-accent: hsl(var(--foreground));
  /* A wash of the text colour over the band, so the dark band reads as a band on a dark page. */
  --lt-band-lift: hsl(var(--lt-on-band-hsl) / 0);
  /* The logo plate (phase 79.1.3): the band's own text colour, the light side of the
     --lt-on-band / --lt-band pair the palette holds to 4.5:1. The band is dark in both
     modes, so header.css paints the plate in both, and the dark block's pair swap carries
     it: no dark-block override. Spelled as --lt-on-band's value, not var(--lt-on-band):
     the palette harness resolves a decorative alias only to a raw triple (as Express's
     plate, 79.1.2). trailheadShell.test.tsx pins the two equal. */
  --lt-logo-plate: hsl(var(--lt-on-band-hsl));
  /* The primary action (phases 79.4.1, 79.4.4): the page's ink behind the page's colour.
     Neither swaps in dark, so the action is filled in both schemes: in light it equals the
     band (a dark button with light text), in dark it is a light button with dark text, never
     the band, which is the page's own colour there, and never the color theme's dark
     --primary. Raw values, not var() aliases, so the palette harness resolves them; no dark
     value. trailhead-pages-polish.spec.ts and trailhead-filled-action.spec.ts pin the pair. */
  --lt-action: hsl(var(--foreground));
  --lt-on-action: hsl(var(--background));
  --lt-header-height: 84px;
  --lt-gutter: clamp(16px, 3.5vw, 48px);
  font-family: var(--lt-body-font);
}

/* Dark mode: the band stays dark by swapping the pair (ADR-0035 amendment, phase 69.14). */
[data-layout-theme="trailhead"]:where(.dark *) {
  --lt-band-hsl: var(--background);
  --lt-on-band-hsl: var(--foreground);
  --lt-band-accent: hsl(var(--primary));
  --lt-on-band-accent: hsl(var(--primary-foreground));
  --lt-band-lift: hsl(var(--lt-on-band-hsl) / 0.12);
}

[data-layout-theme="trailhead"] h1,
[data-layout-theme="trailhead"] h2,
[data-layout-theme="trailhead"] h3 {
  font-family: var(--lt-heading-font);
  text-transform: uppercase;
}

/* header.css */
/* ---- Header ---- */
[data-layout-theme="trailhead"] .lt-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--lt-band);
  background-image: linear-gradient(var(--lt-band-lift), var(--lt-band-lift)), var(--lt-stripe);
  color: var(--lt-on-band);
  border-bottom: 4px solid var(--lt-band-accent);
}
[data-layout-theme="trailhead"] .lt-header a:focus-visible,
[data-layout-theme="trailhead"] .lt-header button:focus-visible {
  outline: 2px solid var(--lt-band-accent);
  outline-offset: -2px;
}
/* Utility bar: from 1024px only. */
[data-layout-theme="trailhead"] .lt-utility {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 36px;
  padding: 0 var(--lt-gutter);
  border-bottom: 1px solid var(--lt-band-rule);
  font-size: 13px;
  color: var(--lt-on-band);
}
[data-layout-theme="trailhead"] .lt-utility-info,
[data-layout-theme="trailhead"] .lt-utility-links {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
  white-space: nowrap;
}
[data-layout-theme="trailhead"] .lt-utility-info span {
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-layout-theme="trailhead"] .lt-utility a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: inherit;
}
[data-layout-theme="trailhead"] .lt-utility a:hover {
  text-decoration: underline;
}
[data-layout-theme="trailhead"] .lt-header-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--lt-header-height);
  padding: 0 var(--lt-gutter);
}
[data-layout-theme="trailhead"] .lt-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-family: var(--lt-heading-font);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: inherit;
}
/* The logo plate (phase 79.1.3): the band is dark in both modes, so the logo sits on a
   plate of the band's own text colour (--lt-logo-plate, tokens.css) in both. */
[data-layout-theme="trailhead"] .lt-logo-plate {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: 2px;
  background-color: var(--lt-logo-plate);
}
/* Bounded by height, so a tall logo never makes the bar taller than --lt-header-height:
   24px leaves the plate's padding and a margin inside the bar. */
[data-layout-theme="trailhead"] .lt-logo-image {
  width: auto;
  height: auto;
  max-width: clamp(120px, 40vw, 220px);
  max-height: calc(var(--lt-header-height) - 24px);
  flex-shrink: 0;
  object-fit: contain;
}
[data-layout-theme="trailhead"] .lt-nav {
  display: none;
  flex: 1 1 auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-family: var(--lt-heading-font);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The link row (ADR-0040, phase 79.1.3): one 48px line, clipped. A link that does not fit
   wraps to the second line, below the clip; the More island then marks it data-nav-folded
   and lists its twin in the panel. The clip is on the row, not .lt-nav, so the mega-menu
   and More panels still hang below the bar. Focus outlines are drawn inside (-2px). */
[data-layout-theme="trailhead"] .lt-nav-links {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  min-width: 0;
  height: 48px;
  overflow: hidden;
}
[data-layout-theme="trailhead"] .lt-nav-links [data-nav-folded] {
  visibility: hidden;
}
[data-layout-theme="trailhead"] .lt-nav-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 10px;
  color: inherit;
}
[data-layout-theme="trailhead"] .lt-nav-link:hover,
[data-layout-theme="trailhead"] .lt-nav-link:focus-visible {
  box-shadow: inset 0 -3px 0 var(--lt-band-accent);
}
/* More: the trigger in the nav's condensed uppercase face, the panel in the mega-menu's. */
[data-layout-theme="trailhead"] .lt-more {
  position: relative;
  flex: 0 0 auto;
}
[data-layout-theme="trailhead"] .lt-more-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 10px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  color: var(--lt-on-band);
}
[data-layout-theme="trailhead"] .lt-more-trigger:hover,
[data-layout-theme="trailhead"] .lt-more-trigger[aria-expanded="true"] {
  box-shadow: inset 0 -3px 0 var(--lt-band-accent);
}
[data-layout-theme="trailhead"] .lt-more-trigger[hidden],
[data-layout-theme="trailhead"] .lt-more-panel[hidden],
[data-layout-theme="trailhead"] .lt-more-link[hidden] {
  display: none;
}
[data-layout-theme="trailhead"] .lt-more-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 260px;
  max-height: calc(100dvh - var(--lt-header-height) - 16px);
  overflow-y: auto;
  padding: 12px 0;
  background-color: var(--lt-band);
  background-image: linear-gradient(var(--lt-band-lift), var(--lt-band-lift));
  border: 1px solid var(--lt-band-rule);
  border-top: 4px solid var(--lt-band-accent);
  color: var(--lt-on-band);
}
[data-layout-theme="trailhead"] .lt-more-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  white-space: nowrap;
  color: var(--lt-on-band);
}
[data-layout-theme="trailhead"] .lt-more-link:hover,
[data-layout-theme="trailhead"] .lt-more-link:focus-visible {
  background-color: var(--lt-band-accent);
  color: var(--lt-on-band-accent);
}
[data-layout-theme="trailhead"] .lt-header-actions {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-family: var(--lt-heading-font);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
[data-layout-theme="trailhead"] .lt-cta {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  background-color: var(--lt-band-accent);
  color: var(--lt-on-band-accent);
}
/* Dark (phase 79.4.5): the band accent is the colour theme's --primary there, so Call now takes
   the action pair instead, a light fill with the page's colour as text. Same specificity as the
   rule above, so it comes after it. Light keeps the band accent. */
[data-layout-theme="trailhead"] .lt-cta:where(.dark *) {
  background-color: var(--lt-action);
  color: var(--lt-on-action);
}
[data-layout-theme="trailhead"] .lt-mode-toggle,
[data-layout-theme="trailhead"] .lt-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  color: inherit;
}
[data-layout-theme="trailhead"] .lt-mobile {
  margin-left: auto;
}

/* ---- Mega-menu: tiles are always in the DOM; the island's state (or, where the device hovers, :hover) opens the panel ---- */
[data-layout-theme="trailhead"] .lt-mega {
  position: relative;
}
[data-layout-theme="trailhead"] .lt-mega-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 10px;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
[data-layout-theme="trailhead"] .lt-mega-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 260px;
  padding: 12px 0;
  background-color: var(--lt-band);
  background-image: linear-gradient(var(--lt-band-lift), var(--lt-band-lift));
  border: 1px solid var(--lt-band-rule);
  border-top: 4px solid var(--lt-band-accent);
}
[data-layout-theme="trailhead"] .lt-mega[data-open="true"] .lt-mega-panel {
  display: block;
}
@media (hover: hover) {
  [data-layout-theme="trailhead"] .lt-mega[data-dismissed="false"]:hover .lt-mega-panel {
    display: block;
  }
  /* "Shop by type" and More are never open at once (phase 79.1.3): a click on either is an
     outside click for the other, and hovering the mega trigger does not open it over an
     open More panel. */
  [data-layout-theme="trailhead"]
    .lt-nav:has(.lt-more-trigger[aria-expanded="true"])
    .lt-mega[data-open="false"]:hover
    .lt-mega-panel {
    display: none;
  }
}
[data-layout-theme="trailhead"] .lt-mega-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
}
[data-layout-theme="trailhead"] .lt-mega-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 48px;
  padding: 0 24px;
  color: var(--lt-on-band);
}
/* The tile's unit count (phase 72.9.1): quieter than the label, and it follows the hover pair. */
[data-layout-theme="trailhead"] .lt-mega-count {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--lt-band-muted);
}
[data-layout-theme="trailhead"] .lt-mega-tile:hover .lt-mega-count,
[data-layout-theme="trailhead"] .lt-mega-tile:focus-visible .lt-mega-count {
  color: var(--lt-on-band-accent);
}
[data-layout-theme="trailhead"] .lt-mega-tile:hover,
[data-layout-theme="trailhead"] .lt-mega-tile:focus-visible {
  background-color: var(--lt-band-accent);
  color: var(--lt-on-band-accent);
}

/* ---- Mobile menu: below 1024px, one full-width panel under the header ---- */
[data-layout-theme="trailhead"] .lt-mobile-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  max-height: calc(100dvh - var(--lt-header-height));
  overflow-y: auto;
  padding: 8px 0 24px;
  background-color: var(--lt-band);
  background-image: linear-gradient(var(--lt-band-lift), var(--lt-band-lift));
  border-top: 1px solid var(--lt-band-rule);
  color: var(--lt-on-band);
}
[data-layout-theme="trailhead"] .lt-mobile-menu[hidden] {
  display: none;
}
[data-layout-theme="trailhead"] .lt-mobile-heading {
  margin: 0;
  padding: 12px var(--lt-gutter) 4px;
  font-family: var(--lt-heading-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
[data-layout-theme="trailhead"] .lt-mobile-menu .lt-mega-tile {
  padding: 0 var(--lt-gutter);
}
[data-layout-theme="trailhead"] .lt-mobile-links {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--lt-band-rule);
}
[data-layout-theme="trailhead"] .lt-mobile-links a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--lt-gutter);
  color: var(--lt-on-band);
}
[data-layout-theme="trailhead"] .lt-mobile-menu .lt-mode-toggle {
  margin: 8px var(--lt-gutter) 0;
}
@media (min-width: 1024px) {
  [data-layout-theme="trailhead"] .lt-utility {
    display: flex;
  }
  [data-layout-theme="trailhead"] .lt-nav,
  [data-layout-theme="trailhead"] .lt-header-actions {
    display: flex;
  }
  [data-layout-theme="trailhead"] .lt-mobile {
    display: none;
  }
  [data-layout-theme="trailhead"] .lt-nav,
  [data-layout-theme="trailhead"] .lt-header-actions {
    font-size: 14px;
    letter-spacing: 0.02em;
  }
  [data-layout-theme="trailhead"] .lt-nav-link,
  [data-layout-theme="trailhead"] .lt-mega-trigger,
  [data-layout-theme="trailhead"] .lt-more-trigger {
    padding: 0 8px;
  }
  [data-layout-theme="trailhead"] .lt-header-bar {
    gap: 12px;
  }
  [data-layout-theme="trailhead"] .lt-cta {
    padding: 0 14px;
  }
}
/* The large nav type needs about 1440px: at 1280 "Contact" ran under "Favorites" by 68px. */
@media (min-width: 1440px) {
  [data-layout-theme="trailhead"] .lt-nav,
  [data-layout-theme="trailhead"] .lt-header-actions {
    font-size: 19px;
    letter-spacing: 0.06em;
  }
  [data-layout-theme="trailhead"] .lt-nav-link,
  [data-layout-theme="trailhead"] .lt-mega-trigger,
  [data-layout-theme="trailhead"] .lt-more-trigger {
    padding: 0 16px;
  }
  [data-layout-theme="trailhead"] .lt-cta {
    padding: 0 20px;
  }
  [data-layout-theme="trailhead"] .lt-header-bar {
    gap: 24px;
  }
}

/* footer.css */
/* ---- Footer ---- */
[data-layout-theme="trailhead"] .lt-footer {
  background-color: var(--lt-band);
  background-image: var(--lt-stripe);
  color: var(--lt-band-muted);
  border-top: 4px solid var(--lt-band-accent);
  padding: clamp(40px, 6vw, 64px) var(--lt-gutter) 28px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
/* The board's four columns (dealer 2fr, then Shop, Dealership and Hours) stack on a phone, pair
   up from 768 and sit in one row from 1280 (phase 72.9.4). A missing column (no hours, no
   dealership links) leaves no empty track. */
[data-layout-theme="trailhead"] .lt-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
@media (min-width: 768px) {
  [data-layout-theme="trailhead"] .lt-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 48px;
  }
}
@media (min-width: 1280px) {
  [data-layout-theme="trailhead"] .lt-footer-grid {
    grid-template-columns: minmax(0, 2fr);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}
[data-layout-theme="trailhead"] .lt-footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
[data-layout-theme="trailhead"] .lt-footer-links {
  gap: 4px;
}
[data-layout-theme="trailhead"] .lt-footer-name {
  font-family: var(--lt-heading-font);
  font-weight: 800;
  font-size: 34px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--lt-on-band);
}
[data-layout-theme="trailhead"] .lt-footer-address {
  white-space: pre-line;
}
[data-layout-theme="trailhead"] .lt-footer-phone {
  color: var(--lt-on-band);
  font-weight: 600;
}
[data-layout-theme="trailhead"] .lt-footer-heading {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lt-on-band);
}
[data-layout-theme="trailhead"] .lt-footer a:hover {
  color: var(--lt-on-band);
}
[data-layout-theme="trailhead"] .lt-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--lt-band-rule);
  font-size: 13px;
}
[data-layout-theme="trailhead"] .lt-footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* home.css */
/* ---- Trailhead home (phase 72.9.1): every rule hangs off [data-section-type] ---- */
/* Full-bleed bands cancel main's gutter (pages.css) and put it back as inner padding. */
[data-layout-theme="trailhead"] [data-section-type="search-hero"],
[data-layout-theme="trailhead"] [data-section-type="cta-band"] {
  margin-inline: calc(var(--lt-gutter) * -1);
}

/* Search hero: a dark band, left-aligned condensed headline, the search form as one white bar. */
[data-layout-theme="trailhead"] [data-section-type="search-hero"] {
  background-color: var(--lt-band);
  background-image: var(--lt-stripe), linear-gradient(var(--lt-band-lift), var(--lt-band-lift));
  color: var(--lt-on-band);
}
[data-layout-theme="trailhead"] [data-section-type="search-hero"] > section {
  padding: 56px var(--lt-gutter) 72px;
}
[data-layout-theme="trailhead"] [data-section-type="search-hero"] > section > div {
  max-width: none;
  margin: 0;
  text-align: left;
}
[data-layout-theme="trailhead"] [data-section-type="search-hero"] h1 {
  max-width: 14ch;
  font-size: clamp(48px, 9vw, 104px);
  font-weight: 800;
  line-height: 0.92;
  color: var(--lt-on-band);
}
[data-layout-theme="trailhead"] [data-section-type="search-hero"] h1 em {
  color: inherit;
}
[data-layout-theme="trailhead"] [data-section-type="search-hero"] p {
  color: var(--lt-band-muted);
}
[data-layout-theme="trailhead"] [data-section-type="search-hero"] form {
  margin-top: 32px;
  padding: 12px;
  gap: 12px;
  background-color: var(--lt-card);
  color: var(--lt-card-text);
}
[data-layout-theme="trailhead"] [data-section-type="search-hero"] form label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
[data-layout-theme="trailhead"] [data-section-type="search-hero"] form button {
  border-radius: 0;
  font-family: var(--lt-heading-font);
  font-size: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-layout-theme="trailhead"] [data-section-type="search-hero"] ul a {
  color: var(--lt-on-band);
}
@media (min-width: 1024px) {
  [data-layout-theme="trailhead"] [data-section-type="search-hero"] > section {
    padding-top: 96px;
    padding-bottom: 168px;
  }
  [data-layout-theme="trailhead"] [data-section-type="search-hero"] form {
    max-width: 1100px;
  }
}

/* Type tiles: two per row on a phone, one row of tiles from 768, overlapping the hero from 1024. */
[data-layout-theme="trailhead"] [data-section-type="vehicle-type-tiles"] {
  position: relative;
  z-index: 2;
}
[data-layout-theme="trailhead"] [data-section-type="vehicle-type-tiles"] > section {
  margin-top: 24px;
  padding: 0;
}
[data-layout-theme="trailhead"] [data-section-type="vehicle-type-tiles"] > section > div {
  gap: 12px;
}
[data-layout-theme="trailhead"] [data-section-type="vehicle-type-tiles"] > section > div > div {
  position: relative;
  border-radius: 0;
  border: 0;
  border-bottom: 4px solid var(--lt-accent);
  background-color: var(--lt-card);
  color: var(--lt-card-text);
  box-shadow: 0 10px 24px hsl(var(--foreground) / 0.12);
}
/* The photo half the tile's width or more: the 534x300 tile images contained in a 92px-tall box
   (phase 79.4.2). From 1024 the tiles rise 120px into the hero, so the label stays over its foot. */
[data-layout-theme="trailhead"] [data-section-type="vehicle-type-tiles"] img {
  height: 104px;
  object-fit: contain;
  object-position: left center;
  padding: 12px 18px 0;
}
[data-layout-theme="trailhead"] [data-section-type="vehicle-type-tiles"] a {
  color: var(--lt-card-text);
}
/* The whole tile is the link. */
[data-layout-theme="trailhead"] [data-section-type="vehicle-type-tiles"] a::after {
  content: "";
  position: absolute;
  inset: 0;
}
[data-layout-theme="trailhead"] [data-section-type="vehicle-type-tiles"] a button {
  justify-content: flex-start;
  height: auto;
  padding: 6px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--lt-card-text);
  font-family: var(--lt-heading-font);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
[data-layout-theme="trailhead"]
  [data-section-type="vehicle-type-tiles"]
  > section
  > div
  > div
  > div {
  align-items: flex-start;
  padding: 0 18px 18px;
}
[data-layout-theme="trailhead"] [data-section-type="vehicle-type-tiles"] p {
  color: var(--lt-card-text);
  font-size: 14px;
}
/* 48rem, not the pixel form of the same width: trailheadShell.test.tsx takes the first pixel
   min-width media query in this stylesheet set as the rail rule, so this one is written in rem. */
@media (min-width: 48rem) {
  [data-layout-theme="trailhead"] [data-section-type="vehicle-type-tiles"] > section > div {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}
@media (min-width: 1024px) {
  [data-layout-theme="trailhead"] [data-section-type="vehicle-type-tiles"] {
    margin-top: -120px;
  }
  [data-layout-theme="trailhead"] [data-section-type="vehicle-type-tiles"] > section {
    margin-top: 0;
  }
}

/* Inventory row: "Fresh on the lot / Just arrived", Trailhead cards 1, 2 and 3 per row. */
[data-layout-theme="trailhead"] .lt-inventory-row {
  padding-block: 56px;
}
[data-layout-theme="trailhead"] .lt-inventory-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
[data-layout-theme="trailhead"] .lt-inventory-row .lt-eyebrow {
  margin: 0 0 6px;
  padding-left: 8px;
  border-left: 3px solid var(--lt-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
/* The row's own heading only: the cards' titles are h2s too, sized by the card (phase 79.4.2). */
[data-layout-theme="trailhead"] .lt-inventory-row-head h2 {
  margin: 0;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  line-height: 1;
}
[data-layout-theme="trailhead"] .lt-view-all {
  padding: 12px 20px;
  border: 2px solid currentcolor;
  font-family: var(--lt-heading-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-layout-theme="trailhead"] .lt-inventory-row-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
[data-layout-theme="trailhead"] .lt-inventory-row-cell {
  display: flex;
}
@media (min-width: 48rem) {
  [data-layout-theme="trailhead"] .lt-inventory-row-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  [data-layout-theme="trailhead"] .lt-inventory-row-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Feature cards: text panels, stacked below 1024 and side by side from it. The base card is a
   16/9 image tile; its inline aspect-ratio is the one thing only !important can undo. */
[data-layout-theme="trailhead"] [data-section-type="feature-cards"] > section {
  padding-block: 24px;
}
[data-layout-theme="trailhead"] [data-section-type="feature-cards"] > section > div {
  max-width: none;
  padding-inline: 0;
}
[data-layout-theme="trailhead"] [data-section-type="feature-cards"] > section > div > div {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  background-color: var(--lt-card);
  border: 1px solid hsl(var(--border));
}
[data-layout-theme="trailhead"] [data-section-type="feature-cards"] a {
  aspect-ratio: auto !important;
  height: auto !important;
  display: flex;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  translate: none;
  border-bottom: 1px solid hsl(var(--border));
  color: var(--lt-card-text);
}
[data-layout-theme="trailhead"] [data-section-type="feature-cards"] a:last-child {
  border-bottom: 0;
}
[data-layout-theme="trailhead"] [data-section-type="feature-cards"] [data-text-card] {
  display: none;
}
[data-layout-theme="trailhead"] [data-section-type="feature-cards"] a > div:last-child {
  position: static;
  padding: 32px 28px;
}
[data-layout-theme="trailhead"] [data-section-type="feature-cards"] h3 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--lt-card-text);
}
[data-layout-theme="trailhead"] [data-section-type="feature-cards"] p {
  color: var(--lt-card-text);
}
[data-layout-theme="trailhead"] [data-section-type="feature-cards"] a > div:last-child > span {
  color: var(--lt-card-text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--lt-accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
@media (min-width: 1024px) {
  [data-layout-theme="trailhead"] [data-section-type="feature-cards"] > section > div > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  [data-layout-theme="trailhead"] [data-section-type="feature-cards"] a {
    border-bottom: 0;
    border-right: 1px solid hsl(var(--border));
  }
  [data-layout-theme="trailhead"] [data-section-type="feature-cards"] a:last-child {
    border-right: 0;
  }
}

/* Facet row: the makes as a grid of bordered links with their counts. */
[data-layout-theme="trailhead"] [data-section-type="facet-row"] > section {
  padding: 56px 0;
}
[data-layout-theme="trailhead"] [data-section-type="facet-row"] > section > div {
  max-width: none;
}
[data-layout-theme="trailhead"] [data-section-type="facet-row"] ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
[data-layout-theme="trailhead"] [data-section-type="facet-row"] a {
  display: flex;
  justify-content: center;
  min-height: 72px;
  border-radius: 0;
  font-family: var(--lt-heading-font);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
}
[data-layout-theme="trailhead"] [data-section-type="facet-row"] a span {
  font-family: var(--lt-body-font);
  font-size: 14px;
  font-weight: 500;
}

/* CTA band: full-bleed on the dealer's accent. The text is the theme's own on-primary colour. */
[data-layout-theme="trailhead"] [data-section-type="cta-band"] > section {
  padding: 0;
}
[data-layout-theme="trailhead"] [data-section-type="cta-band"] > section > div {
  max-width: none;
  align-items: flex-start;
  border-radius: 0;
  padding: 48px var(--lt-gutter);
  background-color: var(--lt-accent);
  color: hsl(var(--primary-foreground));
  text-align: left;
}
[data-layout-theme="trailhead"] [data-section-type="cta-band"] h2 {
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 800;
  line-height: 1;
}
[data-layout-theme="trailhead"] [data-section-type="cta-band"] p {
  color: inherit;
}
[data-layout-theme="trailhead"] [data-section-type="cta-band"] a {
  border-radius: 0;
  border: 2px solid currentcolor;
  background-color: transparent;
  color: inherit;
  font-family: var(--lt-heading-font);
  font-size: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* The primary button inverts the band's own pair, so it reads on every dealer accent. */
[data-layout-theme="trailhead"] [data-section-type="cta-band"] a:first-child {
  border-color: hsl(var(--primary-foreground));
  background-color: hsl(var(--primary-foreground));
  color: hsl(var(--primary));
}

/* The published home's default-variant buttons on the action pair (phase 79.4.4): the first button
   of the financing, trade-in and services CTAs and the hero carousel's button are the shared
   Button's default variant, bg-secondary, near-white on white in light and near the page in dark.
   One slide renders the hero's as the link itself (a), two or more as a button inside the link.
   Only the colours change; the hover twins outlast hover:bg-secondary/80. */
[data-layout-theme="trailhead"] [data-section-type="financing-cta"] a[class~="bg-secondary"],
[data-layout-theme="trailhead"] [data-section-type="financing-cta"] a[class~="bg-secondary"]:hover,
[data-layout-theme="trailhead"] [data-section-type="trade-in-cta"] a[class~="bg-secondary"],
[data-layout-theme="trailhead"] [data-section-type="trade-in-cta"] a[class~="bg-secondary"]:hover,
[data-layout-theme="trailhead"] [data-section-type="services-cta"] a[class~="bg-secondary"],
[data-layout-theme="trailhead"] [data-section-type="services-cta"] a[class~="bg-secondary"]:hover,
[data-layout-theme="trailhead"] [data-section-type="hero-carousel"] a[class~="bg-secondary"],
[data-layout-theme="trailhead"] [data-section-type="hero-carousel"] a[class~="bg-secondary"]:hover,
[data-layout-theme="trailhead"] [data-section-type="hero-carousel"] button[class~="bg-secondary"],
[data-layout-theme="trailhead"]
  [data-section-type="hero-carousel"]
  button[class~="bg-secondary"]:hover {
  background-color: var(--lt-action);
  color: var(--lt-on-action);
}

/* ---- Phase 79.4.2: the rows fill, the tiles show their photo, the testimonials fit ---- */

/* Just arrived: a last card that leaves cells empty spans the rest of its row. Two columns from
   48rem (an odd last card takes both), three from 1200px (a last card alone takes all three, a
   last card beside one other takes two). */
@media (min-width: 48rem) and (max-width: 1199.98px) {
  [data-layout-theme="trailhead"] .lt-inventory-row-cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1200px) {
  [data-layout-theme="trailhead"] .lt-inventory-row-cell:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }
  [data-layout-theme="trailhead"] .lt-inventory-row-cell:last-child:nth-child(3n + 2) {
    grid-column: span 2;
  }
}

/* Category tiles: the count on the label's baseline at the tile's right. */
[data-layout-theme="trailhead"]
  [data-section-type="vehicle-type-tiles"]
  > section
  > div
  > div
  > div
  > div {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 12px;
  /* The base's phone padding (p-3) would push a short count under its label; the tile's own
     18px padding is the inset. */
  padding: 0;
}
[data-layout-theme="trailhead"] [data-section-type="vehicle-type-tiles"] a {
  width: auto;
}
[data-layout-theme="trailhead"] [data-section-type="vehicle-type-tiles"] p {
  margin-top: 0;
}

/* The closing band: from 1024 the heading and line on the left, the buttons at the right gutter. */
@media (min-width: 1024px) {
  [data-layout-theme="trailhead"] [data-section-type="cta-band"] > section > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 32px;
  }
  [data-layout-theme="trailhead"] [data-section-type="cta-band"] > section > div > :last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-content: flex-end;
  }
}

/* Testimonials: the cards follow their content, and a card without an avatar sets its text where
   a card with one does (the 48px avatar and the 16px gap). */
[data-layout-theme="trailhead"] [data-section-type="testimonials"] [class~="flex-wrap"] {
  align-items: flex-start;
}
[data-layout-theme="trailhead"]
  [data-section-type="testimonials"]
  [class~="flex-wrap"]
  > div
  > div {
  height: auto;
}
[data-layout-theme="trailhead"] [data-section-type="testimonials"] p[class~="mb-4"] {
  margin-bottom: 0;
}
[data-layout-theme="trailhead"] [data-section-type="testimonials"] [class~="min-h-[2em]"]:empty {
  display: none;
}
[data-layout-theme="trailhead"]
  [data-section-type="testimonials"]
  [class~="items-start"][class~="gap-4"]
  > [class~="flex-grow"]:first-child {
  margin-inline-start: 64px;
}

/* ---- Phase 79.4.6: Why choose us ----
   The published homepage's benefits section (components/shared/whyChooseUs.tsx) in the inventory
   rows' frame: their padding, their left-aligned heading on the content edge, the grid filling the
   content box 28px under it, and the inventory card's square, flat frame with its contents on the
   left. The heading's selector reaches only the heading block's h2: each card title is an h2 too. */
[data-layout-theme="trailhead"] [data-section-type="why-choose-us"] section {
  padding-block: 56px;
}
[data-layout-theme="trailhead"] [data-section-type="why-choose-us"] section > div:first-child {
  align-items: flex-start;
  text-align: left;
}
[data-layout-theme="trailhead"] [data-section-type="why-choose-us"] section > div:first-child > h2 {
  margin: 0;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: normal;
}
[data-layout-theme="trailhead"] [data-section-type="why-choose-us"] section > div[class~="grid"] {
  max-width: none;
  margin-inline: 0;
  margin-top: 28px;
}
[data-layout-theme="trailhead"] [data-section-type="why-choose-us"] [class~="bg-card"] {
  align-items: stretch;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--lt-card);
  color: var(--lt-card-text);
  text-align: left;
}
/* The badge was centred by mx-auto in a flex column; without its auto margins it would stretch. */
[data-layout-theme="trailhead"]
  [data-section-type="why-choose-us"]
  [class~="bg-card"]
  [class~="rounded-full"] {
  align-self: flex-start;
  margin-inline: 0;
}
/* Two columns (Tailwind's sm to lg): an odd last card spans the row, so no cell is left empty. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  [data-layout-theme="trailhead"]
    [data-section-type="why-choose-us"]
    section
    > div[class~="grid"]
    > div:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* srp.css */
/* ---- SRP arrangement (phase 72.9.2): breadcrumb and count, a filter rail beside one bar,
   the cards and numbered pages ---- */

/* The arrangement places the SRP's own breadcrumb, so the page-level one (components/breadcrumb.tsx,
   rendered above every inventory page) would repeat it. Hidden only where this arrangement is on
   the page; its JSON-LD sits outside the hidden box and still renders. */
[data-layout-theme="trailhead"]:has(.lt-srp) div:has(> nav[aria-label="Breadcrumb"]) {
  display: none;
}

[data-layout-theme="trailhead"] .lt-srp {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}
[data-layout-theme="trailhead"] .lt-srp-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 0 24px;
  border-bottom: 1px solid hsl(var(--border));
}
[data-layout-theme="trailhead"] .lt-srp-head [data-srp="title"] {
  font-family: var(--lt-heading-font);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

/* The body: one column, the rail a panel behind the Filters button; from 1024 the rail and main
   column side by side, the rail sticky under the header. */
[data-layout-theme="trailhead"] .lt-srp-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding-top: 24px;
}
[data-layout-theme="trailhead"] .lt-srp-filters-button {
  justify-self: start;
  min-height: 44px;
  padding: 0 20px;
  background-color: var(--lt-action);
  font-family: var(--lt-heading-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lt-on-action);
  /* The theme's rule around the action pair's fill, in both schemes. */
  border: 1px solid hsl(var(--border));
}
[data-layout-theme="trailhead"] .lt-srp-rail {
  display: none;
  min-width: 0;
  border: 1px solid hsl(var(--border));
  background-color: var(--lt-card);
  color: var(--lt-card-text);
}
[data-layout-theme="trailhead"] .lt-srp-rail[data-open="true"] {
  display: block;
  position: absolute;
  top: 84px;
  left: 0;
  right: 0;
  z-index: 30;
  max-height: calc(100vh - var(--lt-header-height) - 32px);
  overflow-y: auto;
  box-shadow: 0 16px 40px hsl(var(--foreground) / 0.2);
}
[data-layout-theme="trailhead"] .lt-srp-rail-head {
  padding: 14px 16px;
  background-color: var(--lt-band);
  font-family: var(--lt-heading-font);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lt-on-band);
}
[data-layout-theme="trailhead"] .lt-srp-rail [data-state] > h3 button {
  min-height: 44px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-layout-theme="trailhead"] .lt-srp-rail > :not(.lt-srp-rail-head) {
  padding-inline: 16px;
}
@media (min-width: 1024px) {
  [data-layout-theme="trailhead"] .lt-srp-body {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
  [data-layout-theme="trailhead"] .lt-srp-filters-button {
    display: none;
  }
  [data-layout-theme="trailhead"] .lt-srp-rail,
  [data-layout-theme="trailhead"] .lt-srp-rail[data-open="true"] {
    display: block;
    position: sticky;
    /* From 1024px the sticky header is the utility row (36px and its 1px rule, header.css), the
       bar (--lt-header-height) and the 4px accent rule; the rail clears all three, then 16px, as
       Financing's FAQ column does (pages.css). */
    top: calc(var(--lt-header-height) + 41px + 16px);
    z-index: auto;
    max-height: calc(100vh - var(--lt-header-height) - 41px - 32px);
    overflow-y: auto;
    box-shadow: none;
  }
}

/* The bar: the chips (or "Showing every unit") on the left, the sort on the right. */
[data-layout-theme="trailhead"] .lt-srp-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid hsl(var(--border));
}
[data-layout-theme="trailhead"] .lt-srp-active {
  min-width: 0;
}
[data-layout-theme="trailhead"] .lt-srp-all {
  font-weight: 600;
}
[data-layout-theme="trailhead"] .lt-srp-all:has(+ .lt-srp-chips:not(:empty)) {
  display: none;
}
[data-layout-theme="trailhead"] .lt-srp-chips [aria-label^="Remove filter"] {
  min-height: 40px;
  padding: 0 14px;
  /* The action pair (phase 79.4.5): filled in both schemes, never the band, which is the page's
     own colour in dark. The theme's rule stays as the chip's edge. */
  border: 1px solid hsl(var(--border));
  border-radius: 0;
  background-color: var(--lt-action);
  font-weight: 600;
  color: var(--lt-on-action);
}
[data-layout-theme="trailhead"] .lt-srp-chips button:not([aria-label]) {
  min-height: 44px;
}
[data-layout-theme="trailhead"] .lt-srp-sort > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 0;
}
[data-layout-theme="trailhead"] .lt-srp-sort label {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-layout-theme="trailhead"] .lt-srp-sort select {
  height: 44px;
  padding-block: 0;
  border-radius: 0;
}

/* Cards: one per row on phones, two from 768, three from 1280. */
[data-layout-theme="trailhead"] .lt-srp-results {
  padding-top: 20px;
}
/* The results block's own "N Vehicles" line repeats the title. */
[data-layout-theme="trailhead"] .lt-srp-results > .text-end {
  display: none;
}
[data-layout-theme="trailhead"] .lt-srp-results > .grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
@media (min-width: 768px) {
  [data-layout-theme="trailhead"] .lt-srp-results > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  [data-layout-theme="trailhead"] .lt-srp-results > .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
[data-layout-theme="trailhead"] .lt-srp-empty {
  padding: 40px 0;
  text-align: center;
}

/* Pages: 48px squares, the current one on the band. */
[data-layout-theme="trailhead"] .lt-srp-pages {
  padding: 32px 0 72px;
}
[data-layout-theme="trailhead"] .lt-srp-pages nav > ul {
  justify-content: flex-start;
  gap: 8px;
}
[data-layout-theme="trailhead"] .lt-srp-pages a,
[data-layout-theme="trailhead"] .lt-srp-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  border: 1px solid hsl(var(--border));
  border-radius: 0;
  font-family: var(--lt-heading-font);
  font-size: 20px;
  font-weight: 700;
}
[data-layout-theme="trailhead"] .lt-srp-pages [aria-current="page"] {
  background-color: var(--lt-action);
  color: var(--lt-on-action);
}

/* ---- Card: the dark spec strip leads, small labels over large values (72.6's SpecStrip) ---- */
[data-layout-theme="trailhead"] .lt-spec-strip {
  background-color: var(--lt-band);
  color: var(--lt-on-band);
}
[data-layout-theme="trailhead"] .lt-spec-strip:empty {
  display: none;
}
/* The board's one row of three cells: the profile's first three specs with a value (the detail
   page lists the rest). Each cell is a third of the card, and the value scales with the card's
   width, so the longest fixture value ("AUTOMATIC") fits its cell at the narrowest card (about
   257px, 3 across beside the rail at 1280) and no label squeezes under another's box. */
[data-layout-theme="trailhead"] .lt-spec-strip {
  container-type: inline-size;
}
[data-layout-theme="trailhead"] .lt-spec-strip [data-block="spec-strip"] {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
}
[data-layout-theme="trailhead"] .lt-spec-strip [data-spec]:nth-child(n + 4) {
  display: none;
}
[data-layout-theme="trailhead"] .lt-spec-strip [data-spec] {
  padding: 10px 8px;
  border-right: 1px solid var(--lt-band-rule);
}
[data-layout-theme="trailhead"] .lt-spec-strip [data-spec]:last-child,
[data-layout-theme="trailhead"] .lt-spec-strip [data-spec]:nth-child(3) {
  border-right: 0;
}
/* Labels in the condensed face: "TRANSMISSION" fits a 69px cell; a longer label hyphenates
   inside its own cell rather than running into the next. */
[data-layout-theme="trailhead"] .lt-spec-strip dt {
  font-family: var(--lt-heading-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  hyphens: auto;
  color: var(--lt-band-muted);
}
[data-layout-theme="trailhead"] .lt-spec-strip dd {
  font-family: var(--lt-heading-font);
  font-size: clamp(15px, 6cqi, 24px);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lt-on-band);
}
[data-layout-theme="trailhead"] .lt-card-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lt-card-text);
  /* The brand color is a small mark beside the label, never the text (ADR-0035 amendment, 69.14). */
  padding-left: 8px;
  border-left: 3px solid var(--lt-accent);
}

/* ---- Phase 79.4.2: the phone bar's Filters button is the SRP's primary action too ---- */
/* The inventory page's fixed bottom bar (components/mobileBottomBar.tsx, below 768) paints its
   Filters button on the theme's --primary; on this page it takes the action pair. */
[data-layout-theme="trailhead"]
  main:has(.lt-srp)
  [class~="fixed"][class~="bottom-0"]
  button[class~="bg-primary"] {
  background-color: var(--lt-action);
  color: var(--lt-on-action);
}

/* vdp.css */
/* ---- VDP arrangement (phase 72.9.3): the gallery beside a side column (title, spec strip, buy
   column), the tabs and notes under the gallery, similar units full width ---- */

[data-layout-theme="trailhead"] .lt-vdp {
  display: flex;
  flex-direction: column;
  gap: 56px;
  min-width: 0;
}
/* Phones and tablets: one column in DOM order (gallery, side, main). */
[data-layout-theme="trailhead"] .lt-vdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
[data-layout-theme="trailhead"] .lt-vdp-gallery,
[data-layout-theme="trailhead"] .lt-vdp-side,
[data-layout-theme="trailhead"] .lt-vdp-main {
  min-width: 0;
}

/* The gallery: square photo and thumbs. No height cap: the photo keeps the gallery's 4:3 box at
   every width, since a capped band either cropped the dealer's watermark or letterboxed the photo
   on wide screens (owner, 2026-11-12). */
[data-layout-theme="trailhead"] .lt-vdp-gallery [data-block="thumb-gallery"] > div:first-child {
  border-radius: 0;
}
[data-layout-theme="trailhead"] .lt-vdp-gallery [data-testid="thumb-row"] button {
  border-radius: 0;
}

/* The side column: title group, spec strip, buy column. */
[data-layout-theme="trailhead"] .lt-vdp-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
[data-layout-theme="trailhead"] .lt-vdp-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-layout-theme="trailhead"] .lt-vdp-title > h2 {
  font-family: var(--lt-heading-font);
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 800;
  line-height: 0.98;
  text-transform: uppercase;
}
/* The body-style and odometer line reads as the board's type line, above the title. */
[data-layout-theme="trailhead"] .lt-vdp-title > h2 + p {
  order: -1;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: hsl(var(--foreground));
}
[data-layout-theme="trailhead"] .lt-vdp-title [data-block="stock-vin"] {
  font-size: 14px;
  overflow-wrap: anywhere;
}

/* The spec strip: the board's two-by-two band, small labels over large values. The first four
   specs with a value (the Specs tab lists them all); the value scales with the strip's width so
   the longest one fits a cell at the narrowest side column. */
[data-layout-theme="trailhead"] .lt-vdp-side [data-block="spec-strip"] {
  container-type: inline-size;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--lt-band);
  background-color: var(--lt-band-rule);
}
[data-layout-theme="trailhead"]
  .lt-vdp-side
  [data-block="spec-strip"]
  [data-spec]:nth-child(n + 5) {
  display: none;
}
[data-layout-theme="trailhead"] .lt-vdp-side [data-block="spec-strip"] [data-spec] {
  padding: 14px 18px;
  background-color: var(--lt-band);
}
[data-layout-theme="trailhead"] .lt-vdp-side [data-block="spec-strip"] dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--lt-band-muted);
}
[data-layout-theme="trailhead"] .lt-vdp-side [data-block="spec-strip"] dd {
  font-family: var(--lt-heading-font);
  font-size: clamp(20px, 7cqi, 34px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--lt-on-band);
}

/* The buy column: price between rules, the actions, the call box. */
[data-layout-theme="trailhead"] .lt-vdp-buy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
[data-layout-theme="trailhead"] .lt-vdp-price {
  padding: 20px 0;
  border-top: 1px solid hsl(var(--border));
  border-bottom: 1px solid hsl(var(--border));
}
[data-layout-theme="trailhead"] .lt-vdp-price .font-semibold {
  font-family: var(--lt-heading-font);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 800;
  line-height: 1;
}
[data-layout-theme="trailhead"] .lt-vdp-buy .rounded-xl,
[data-layout-theme="trailhead"] .lt-vdp-buy .rounded-lg,
[data-layout-theme="trailhead"] .lt-vdp-buy .rounded-md {
  border-radius: 0;
}
[data-layout-theme="trailhead"] .lt-vdp-buy a.inline-flex {
  min-height: 52px;
  font-family: var(--lt-heading-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-layout-theme="trailhead"] .lt-vdp-buy [data-block="call-box"] {
  padding: 18px;
  background-color: var(--lt-card);
  color: var(--lt-card-text);
}
[data-layout-theme="trailhead"] .lt-vdp-buy [data-block="call-box"] a {
  min-height: 44px;
}

/* The main column: the tabs on a card, then the dealer notes and location. */
[data-layout-theme="trailhead"] .lt-vdp-main {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
[data-layout-theme="trailhead"] .lt-vdp-main [data-block="tabs"] {
  border: 1px solid hsl(var(--border));
  background-color: var(--lt-card);
  color: var(--lt-card-text);
}
[data-layout-theme="trailhead"] .lt-vdp-main [data-block="tabs"] [role="tablist"] {
  gap: 0;
}
[data-layout-theme="trailhead"] .lt-vdp-main [data-block="tabs"] [role="tab"] {
  min-height: 56px;
  padding: 0 clamp(16px, 2.5vw, 28px);
  border-bottom-width: 4px;
  font-family: var(--lt-heading-font);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-layout-theme="trailhead"] .lt-vdp-main [data-block="tabs"] [role="tabpanel"] {
  padding: 0 clamp(16px, 3vw, 36px) clamp(20px, 3vw, 32px);
}

/* Similar units: the heading in the condensed face; cards two across from 640, four from 1280
   (narrower than about 257px a card's spec strip breaks its values). */
[data-layout-theme="trailhead"] .lt-vdp-similar [data-block="similar-units"] > h3 {
  font-family: var(--lt-heading-font);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
[data-layout-theme="trailhead"] .lt-vdp-similar [data-block="similar-units"] > .grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
@media (min-width: 640px) {
  [data-layout-theme="trailhead"] .lt-vdp-similar [data-block="similar-units"] > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  [data-layout-theme="trailhead"] .lt-vdp-similar [data-block="similar-units"] > .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* From 1024: the gallery and main in a wide column, the side beside them, sticky under the
   header. */
@media (min-width: 1024px) {
  [data-layout-theme="trailhead"] .lt-vdp-grid {
    grid-template-columns: minmax(0, 1.9fr) minmax(340px, 1fr);
    column-gap: 40px;
    row-gap: 48px;
  }
  [data-layout-theme="trailhead"] .lt-vdp-gallery {
    grid-column: 1;
    grid-row: 1;
  }
  [data-layout-theme="trailhead"] .lt-vdp-main {
    grid-column: 1;
    grid-row: 2;
  }
  [data-layout-theme="trailhead"] .lt-vdp-side {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    /* From 1024px the sticky header is the utility row (36px and its 1px rule, header.css), the
       bar (--lt-header-height) and the 4px accent rule; the column clears all three, then 16px,
       as Financing's FAQ column does (pages.css). */
    top: calc(var(--lt-header-height) + 41px + 16px);
    /* The actions card (with its history badges) makes the column taller than a laptop screen;
       held to the viewport it scrolls on its own, so the call box at its foot stays reachable. */
    max-height: calc(100vh - var(--lt-header-height) - 41px - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ---- Phase 79.4.2: similar units leave no empty column, the rail's actions stay whole ---- */

/* Similar units: never more columns than cards. */
@media (min-width: 640px) {
  [data-layout-theme="trailhead"]
    .lt-vdp-similar
    [data-block="similar-units"]
    > .grid:not(:has(> :nth-child(2))) {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 1280px) {
  [data-layout-theme="trailhead"]
    .lt-vdp-similar
    [data-block="similar-units"]
    > .grid:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-layout-theme="trailhead"]
    .lt-vdp-similar
    [data-block="similar-units"]
    > .grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The rail from 1024: the actions come before the spec strip, so they sit inside the first screen
   of the side column instead of under its edge (the Specs tab carries every spec). */
@media (min-width: 1024px) {
  [data-layout-theme="trailhead"] .lt-vdp-side > [data-block="spec-strip"] {
    order: 1;
  }
}

/* ---- Phase 79.4.5: the rail's actions take Trailhead's primary and secondary ---- */

/* The "Interested?" card's first two links carry the shared Button's default (secondary)
   variant, which no Trailhead rule painted: two pale fills on the card. Financing Options, the
   first child, is the primary and takes the action pair; Book Test Drive is the secondary and
   takes the content pages' ink outline on the card (pages.css). Size and face come from
   .lt-vdp-buy a.inline-flex. Each :hover twin outranks hover:bg-secondary/80. */
[data-layout-theme="trailhead"] .lt-vdp-buy a[class~="bg-secondary"]:first-child {
  background-color: var(--lt-action);
  color: var(--lt-on-action);
}
[data-layout-theme="trailhead"] .lt-vdp-buy a[class~="bg-secondary"]:first-child:hover {
  background-color: var(--lt-action);
  color: var(--lt-on-action);
}
[data-layout-theme="trailhead"] .lt-vdp-buy a[class~="bg-secondary"]:not(:first-child) {
  border: 2px solid currentcolor;
  background-color: var(--lt-card);
  color: var(--lt-card-text);
}
[data-layout-theme="trailhead"] .lt-vdp-buy a[class~="bg-secondary"]:not(:first-child):hover {
  background-color: var(--lt-card);
  color: var(--lt-card-text);
}
/* Make an Offer and Check Availability (the shared outline variant): the same ink edge as Book
   Test Drive, not the colour theme's --primary, so the rail shows one outline style. In light
   the base theme's --primary is the card's ink, so light does not change there; hover changes
   only the fill and text. */
[data-layout-theme="trailhead"] .lt-vdp-buy a[class~="border-primary"] {
  border-color: var(--lt-card-text);
}
[data-layout-theme="trailhead"] .lt-vdp-buy a[class~="border-primary"]:hover {
  border-color: var(--lt-card-text);
}

/* The "Visit us" card in the main column: flat, a quiet edge in both schemes, 44px actions. */
[data-layout-theme="trailhead"] .lt-vdp-main [data-page-card] {
  border: 1px solid hsl(var(--foreground) / 0.16);
  box-shadow: none;
}
[data-layout-theme="trailhead"] .lt-vdp-main [data-contact-action] {
  min-height: 44px;
}

/* pages.css */
/* ---- Gutters (C13): main content shares the header and footer edge ---- */
[data-layout-theme="trailhead"] main {
  padding-inline: var(--lt-gutter);
}
[data-layout-theme="trailhead"] main > div,
[data-layout-theme="trailhead"] main > div > div.mx-auto,
[data-layout-theme="trailhead"] main div[class~="px-0"][class~="md:px-4"] {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* ---- Content pages (phase 72.9.4): Contact, Financing and Favorites ----
   Only these pages render the shared title band (ADR-0037 section 4). Trailhead sets it as the
   home hero's dark, striped band: it runs out to main's edges and pads back by the gutter, so
   its text starts on the header's gutter; an accent rule closes it, like the footer's. */
[data-layout-theme="trailhead"] [data-page-title-band] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 calc(-1 * var(--lt-gutter)) 40px;
  padding: clamp(32px, 5vw, 56px) var(--lt-gutter);
  background-color: var(--lt-band);
  background-image: var(--lt-stripe);
  border-bottom: 4px solid var(--lt-band-accent);
  color: var(--lt-on-band);
  text-align: left;
}
[data-layout-theme="trailhead"] [data-page-title-band] h1 {
  margin: 0;
  justify-content: flex-start;
  font-family: var(--lt-heading-font);
  font-size: clamp(40px, 7vw, 64px);
  font-weight: 800;
  line-height: 0.98;
  text-transform: uppercase;
  text-align: left;
  color: var(--lt-on-band);
}
[data-layout-theme="trailhead"] [data-page-title-band] p {
  margin: 0;
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.6;
  text-align: left;
  color: var(--lt-band-muted);
}
/* Touch targets: every control on these pages is at least 44px tall. One fully scoped selector
   per control (the shell test reads every comma-separated selector for the layout scope). */
[data-layout-theme="trailhead"]
  main:has([data-page-title-band])
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
[data-layout-theme="trailhead"] main:has([data-page-title-band]) select:not([aria-hidden="true"]),
[data-layout-theme="trailhead"] main:has([data-page-title-band]) textarea,
[data-layout-theme="trailhead"] main:has([data-page-title-band]) button,
[data-layout-theme="trailhead"] main:has([data-page-title-band]) a.inline-flex {
  min-height: 44px;
}

/* ---- Cards, actions and forms (phase 79.4.1): About, Contact and Financing ----
   79.2.5's hooks, styled only where the page renders the title band. Cards are Trailhead's flat,
   square surface: no shadow, no radius, and an ink edge at low alpha, never the color theme's
   --border, which is near white in some dark themes. */
[data-layout-theme="trailhead"] main:has([data-page-title-band]) [data-page-card] {
  border: 1px solid hsl(var(--foreground) / 0.16);
  border-radius: 0;
  box-shadow: none;
}
/* About's Mission card is filled with the theme's primary; a filled card needs no edge. */
[data-layout-theme="trailhead"]
  main:has([data-page-title-band])
  [data-page-card][data-about-section="mission"] {
  border-width: 0;
}
/* The primary action (Submit, Next, Submit Application): the action pair, set in the condensed
   uppercase of Trailhead's headings and CTAs, ruled with the band accent like the header and the
   title band. The pair is filled in both schemes (phase 79.4.4): a dark fill in light, a light
   fill ruled with the accent in dark. Hover keeps the pair (the base button pales to
   --primary/90). */
[data-layout-theme="trailhead"] main:has([data-page-title-band]) [data-primary-action] {
  min-height: 44px;
  padding: 8px 28px;
  border: 2px solid var(--lt-band-accent);
  border-radius: 0;
  background-color: var(--lt-action);
  color: var(--lt-on-action);
  font-family: var(--lt-heading-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-layout-theme="trailhead"] main:has([data-page-title-band]) [data-primary-action]:hover {
  background-color: var(--lt-action);
  color: var(--lt-on-action);
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Dark (phase 79.4.4): the accent is the theme's --primary there, too close to the light fill in
   most themes, so the edge takes the action's own text colour, the page's colour around a light
   fill. In light the band accent is that same colour, so the edge does not change. A rule under
   :is(.dark *), not the token block's :where() dark rule, which only swaps the band pair, and
   under the layout attribute like every Trailhead selector. */
[data-layout-theme="trailhead"]:is(.dark *) main:has([data-page-title-band]) [data-primary-action] {
  border-color: var(--lt-on-action);
}
/* Contact's Call, Email and Directions: Trailhead's secondary CTA, a 2px ink outline on the card,
   in the same condensed uppercase. */
[data-layout-theme="trailhead"] main:has([data-page-title-band]) [data-contact-action] {
  min-height: 44px;
  border: 2px solid currentcolor;
  border-radius: 0;
  background-color: var(--lt-card);
  color: var(--lt-card-text);
  font-family: var(--lt-heading-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-layout-theme="trailhead"] main:has([data-page-title-band]) [data-contact-action]:hover {
  background-color: var(--lt-card);
  color: var(--lt-card-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* The contact form's name, phone and email: a grid whose columns fill the row, one column below
   about 500px of card. */
[data-layout-theme="trailhead"] main:has([data-page-title-band]) [data-form-fields] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
/* The shared Input and Textarea wrap their control in a px-1 div; in this form that put every
   field 4px inside its label and short of the row's edge. */
[data-layout-theme="trailhead"]
  main:has([data-page-title-band])
  form:has([data-form-fields])
  [class~="px-1"] {
  padding-inline: 0;
}
/* About's team: left-aligned under its left-aligned title, like every Trailhead heading. */
[data-layout-theme="trailhead"]
  main:has([data-page-title-band])
  [data-about-section="team"]
  [class~="flex-wrap"] {
  justify-content: flex-start;
}
[data-layout-theme="trailhead"]
  main:has([data-page-title-band])
  [data-about-section="team"]
  [class~="flex-wrap"]
  > div {
  text-align: left;
}
[data-layout-theme="trailhead"]
  main:has([data-page-title-band])
  [data-about-section="team"]
  [class~="mx-auto"] {
  margin-inline: 0;
}
/* Financing: beside the two-column form, the FAQ column holds its place under the sticky header
   instead of ending early and leaving the right column empty. From 1024px the sticky header is
   the utility row (36px and its 1px rule, header.css), the bar (--lt-header-height) and the 4px
   accent rule; the column clears all three, then a 24px gap. */
@media (min-width: 64rem) {
  [data-layout-theme="trailhead"] main:has([data-page-title-band]) [data-page-aside] {
    position: sticky;
    top: calc(var(--lt-header-height) + 41px + 24px);
    align-self: start;
  }
}