/* 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(--font-lt-barlow-condensed), "Barlow Condensed", "Arial Narrow", Impact, ui-sans-serif,
    sans-serif;
  --lt-body-font:
    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);
  --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 asset is drawn for white, so it sits on a plate on the dark band. */
[data-layout-theme="trailhead"] .lt-logo-plate {
  display: inline-flex;
  align-items: center;
  border-radius: 2px;
}
[data-layout-theme="trailhead"] .lt-logo-image {
  width: clamp(120px, 40vw, 220px);
  height: auto;
  max-width: none;
  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;
}
[data-layout-theme="trailhead"] .lt-nav-links {
  display: flex;
  align-items: center;
}
[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);
}
[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);
}
[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;
  }
}
[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 {
    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 {
    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);
}
[data-layout-theme="trailhead"] [data-section-type="vehicle-type-tiles"] img {
  height: 72px;
  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: -92px;
  }
  [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;
}
[data-layout-theme="trailhead"] .lt-inventory-row 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-fill, 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));
}

/* 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;
  padding-inline: clamp(0px, 2vw, 24px);
}
[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-band);
  font-family: var(--lt-heading-font);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lt-on-band);
  /* Dark mode's band is the page colour; the edge keeps the button a button. */
  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;
    top: calc(var(--lt-header-height) + 16px);
    z-index: auto;
    max-height: calc(100vh - var(--lt-header-height) - 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;
  /* Dark mode's band is the page colour; the edge keeps the chip a chip. */
  border: 1px solid hsl(var(--border));
  border-radius: 0;
  background-color: var(--lt-band);
  font-weight: 600;
  color: var(--lt-on-band);
}
[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-band);
  color: var(--lt-on-band);
}

/* ---- 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);
}

/* 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; the photo is a band capped at the board's 560px. */
[data-layout-theme="trailhead"] .lt-vdp-gallery [data-block="thumb-gallery"] > div:first-child {
  max-height: 560px;
  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;
    top: calc(var(--lt-header-height) + 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) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* 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;
}