/* tokens.css */
/* Showroom layout tokens and shell rules (ADR-0035, phase 69.1).
   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="showroom"]. The accent is the dealer's color theme's. */
[data-layout-theme="showroom"] {
  --lt-heading-font: var(
    --theme-font-sans,
    var(--font-lt-fraunces),
    Fraunces,
    Georgia,
    "Times New Roman",
    serif
  );
  --lt-body-font: var(
    --theme-font-sans,
    var(--font-lt-manrope),
    Manrope,
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif
  );
  --lt-surface: hsl(var(--background));
  --lt-text: hsl(var(--foreground));
  --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-hero-rule: hsl(var(--lt-on-band-hsl) / 0.18);
  --lt-accent: hsl(var(--primary));
  /* Marks drawn on the band (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));
  /* Home bands (phase 72.8.1): a tinted band, its text and rules, and the accent band. */
  --lt-tint: hsl(var(--card));
  --lt-on-tint: hsl(var(--card-foreground));
  --lt-tint-muted: hsl(var(--card-foreground));
  --lt-rule: hsl(var(--foreground) / 0.18);
  --lt-accent-band: hsl(var(--primary));
  --lt-on-accent-band: hsl(var(--primary-foreground));
  /* The logo plate (phase 79.1.4): the band's own text colour, --lt-on-band's value, so the
     light side of a pair already held to 4.5:1 against the band in every theme and mode.
     The band is dark in both modes, so header.css paints it in both. Spelled as
     --lt-on-band's value, not var(--lt-on-band): the palette harness resolves a decorative
     alias only to a raw triple. showroomShell.test.tsx pins the two equal. */
  --lt-logo-plate: hsl(var(--lt-on-band-hsl));
  /* The primary action (phases 79.3.1, 79.3.3): the page's ink behind the page's colour, as
     Express's (79.5.4). Neither swaps in dark, so the action is filled in both schemes: a dark
     button with light text in light (the band's values there, so light mode is unchanged), a
     light button with dark text in dark, and never the band, which is the page in dark. Raw
     values, not var() aliases, so the palette harness resolves them; they equal --lt-text and
     --lt-surface, which showroomPaletteCounts.test.ts pins. */
  --lt-action: hsl(var(--foreground));
  --lt-on-action: hsl(var(--background));
  --lt-header-height: 88px;
  --lt-gutter: clamp(20px, 5.5vw, 80px);
  font-family: var(--lt-body-font);
  background-color: var(--lt-surface);
  color: var(--lt-text);
}

/* Dark mode: the band stays dark by swapping the pair (ADR-0035 amendment, phase 69.14). */
[data-layout-theme="showroom"]: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));
}

[data-layout-theme="showroom"] h1,
[data-layout-theme="showroom"] h2,
[data-layout-theme="showroom"] h3 {
  font-family: var(--lt-heading-font);
  font-weight: 400;
}

/* header.css */
/* ---- Header ---- */
[data-layout-theme="showroom"] .lt-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--lt-band);
  color: var(--lt-on-band);
  border-bottom: 1px solid var(--lt-band-rule);
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}
/* Over the homepage hero the header floats above it instead of pushing it down. */
[data-layout-theme="showroom"] .lt-header[data-overlay="true"] {
  margin-bottom: calc(-1 * var(--lt-header-height));
}
/* The transparent header takes the ink of what it floats over (phase 79.3.6): by default the
   page's ink and rule, over the hero carousel's wash (which draws its own title in the page's
   ink) or over the page itself. In dark these equal the band's values, so dark is unchanged. */
[data-layout-theme="showroom"] .lt-header[data-transparent="true"] {
  background-color: transparent;
  color: var(--lt-text);
  border-bottom-color: var(--lt-rule);
}
/* Over a leading search hero, a dark band in both modes, it keeps the band's ink (79.3.6).
   The same leading-search-hero selector home.css uses. */
[data-layout-theme="showroom"]:has(main [data-section-type="search-hero"]:first-child)
  .lt-header[data-transparent="true"] {
  color: var(--lt-on-band);
  border-bottom-color: var(--lt-hero-rule);
}
[data-layout-theme="showroom"] .lt-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--lt-header-height);
  padding: 0 var(--lt-gutter);
  gap: 12px;
}
[data-layout-theme="showroom"] .lt-header a:focus-visible,
[data-layout-theme="showroom"] .lt-header button:focus-visible,
[data-layout-theme="showroom"] .lt-header [tabindex]:focus-visible {
  outline: 2px solid var(--lt-band-accent);
  outline-offset: 2px;
}
/* The transparent header's focus ring is its own ink, which follows what it floats over (79.3.6). */
[data-layout-theme="showroom"] .lt-header[data-transparent="true"] a:focus-visible,
[data-layout-theme="showroom"] .lt-header[data-transparent="true"] button:focus-visible,
[data-layout-theme="showroom"] .lt-header[data-transparent="true"] [tabindex]:focus-visible {
  outline-color: currentcolor;
}
/* The desktop rows (ADR-0040, phase 79.1.4): each half of the navigation is one line,
   clipped. An entry that does not fit wraps to the second line, which the 12px row gap
   puts below the clip; the More island then marks it data-nav-folded and lists its twin
   in the panel. Entries align to the top and share one 44px line height, so every entry
   on the first line has the same offsetTop. The 4px padding keeps focus rings inside the
   clip. The More island never folds a row's first entry, so a row is never narrower than
   its widest entry (min-content). Both halves start from their content (flex-basis auto)
   and share what is left equally: the right half also carries the actions, so a short
   navigation shows in full and the logo sits left of centre by half the difference. */
[data-layout-theme="showroom"] .lt-nav {
  display: none;
  flex: 1 1 auto;
  min-width: min-content;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 12px 24px;
  height: 52px;
  padding: 4px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
[data-layout-theme="showroom"] .lt-nav [data-nav-folded] {
  visibility: hidden;
}
[data-layout-theme="showroom"] .lt-nav-right {
  justify-content: flex-end;
}
/* The right half: its row, the More trigger, then the actions, which never fold. */
[data-layout-theme="showroom"] .lt-header-right {
  display: none;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
[data-layout-theme="showroom"] .lt-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
}
[data-layout-theme="showroom"] .lt-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-family: var(--lt-heading-font);
  font-size: 28px;
  letter-spacing: 0.01em;
  text-align: center;
  color: inherit;
}
/* The logo plate (phase 79.1.4): the band is dark in both modes, so the logo always sits
   on a plate of the band's own text colour (--lt-logo-plate, tokens.css), 4px around it. */
[data-layout-theme="showroom"] .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:
   the bar has no vertical padding, and 24px leaves the plate's 8px and a margin. */
[data-layout-theme="showroom"] .lt-logo-image {
  width: auto;
  height: auto;
  max-width: clamp(120px, 38vw, 220px);
  max-height: calc(var(--lt-header-height) - 24px);
  flex-shrink: 0;
  object-fit: contain;
}
[data-layout-theme="showroom"] .lt-nav-link,
[data-layout-theme="showroom"] .lt-phone {
  color: inherit;
  opacity: 0.92;
}
/* Full strength over the hero, where the backdrop is a photo (phase 79.3.6). */
[data-layout-theme="showroom"] .lt-header[data-transparent="true"] .lt-nav-link,
[data-layout-theme="showroom"] .lt-header[data-transparent="true"] .lt-phone {
  opacity: 1;
}
[data-layout-theme="showroom"] .lt-nav-link:hover,
[data-layout-theme="showroom"] .lt-nav-link:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 6px;
}
[data-layout-theme="showroom"] .lt-nav-link[aria-current="page"] {
  opacity: 1;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
[data-layout-theme="showroom"] .lt-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-weight: 600;
}
/* From 1024 to 1279 the phone is its icon; the number shows from 1280. */
[data-layout-theme="showroom"] .lt-phone-text {
  display: none;
}
[data-layout-theme="showroom"] .lt-cta {
  padding: 12px 20px;
  border: 1px solid currentcolor;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
}
/* The mobile panel's call to action (phase 79.1.4): the same outlined button, in the
   band's text colour. Before the hover rule, so the hover fill still wins. */
[data-layout-theme="showroom"] .lt-mobile-nav .lt-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  color: var(--lt-on-band);
}
[data-layout-theme="showroom"] .lt-cta:hover {
  background-color: var(--lt-band-accent);
  border-color: var(--lt-band-accent);
  color: var(--lt-on-band-accent);
}
/* Phase 79.3.8: in light, the transparent header over the hero carousel's wash (or the page
   itself) has no dark band behind it. Its CTA's hover fills the action pair, the page's ink behind
   the page's colour (the hero button's pair, 79.3.3), instead of the band accent, which is the page
   colour in light. Dark, the solid header, a leading search hero and the mobile panel keep the
   band accent above. */
[data-layout-theme="showroom"]:not(:where(.dark *)):not(
    :has(main [data-section-type="search-hero"]:first-child)
  )
  .lt-header[data-transparent="true"]
  .lt-header-actions
  .lt-cta:hover {
  background-color: var(--lt-action);
  border-color: var(--lt-action);
  color: var(--lt-on-action);
}
/* Phase 79.3.8: the plate is for a dark band (phase 72's ruling, a light plate wherever the band
   is dark). The same transparent light header has no dark band behind the logo, so no plate. */
[data-layout-theme="showroom"]:not(:where(.dark *)):not(
    :has(main [data-section-type="search-hero"]:first-child)
  )
  .lt-header[data-transparent="true"]
  .lt-logo-plate {
  background-color: transparent;
}
[data-layout-theme="showroom"] .lt-nav-group {
  position: relative;
}
/* The dropdown is fixed at its static position, just under its name, so the row's clip
   does not cut it off (the header has no transform, so the viewport is its containing block). */
[data-layout-theme="showroom"] .lt-nav-sub {
  position: fixed;
  z-index: 60;
  display: none;
  line-height: normal;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
  padding: 16px 20px;
  background-color: var(--lt-band);
  color: var(--lt-on-band);
  border: 1px solid var(--lt-band-rule);
}
[data-layout-theme="showroom"] .lt-nav-group:hover .lt-nav-sub,
[data-layout-theme="showroom"] .lt-nav-group:focus-within .lt-nav-sub {
  display: flex;
}
/* The More island (shared/NavMore, phase 79.1.2): its trigger ends the right row and takes
   the header's ink in both the transparent and the solid state. */
[data-layout-theme="showroom"] .lt-more {
  position: relative;
  flex: 0 0 auto;
}
[data-layout-theme="showroom"] .lt-more-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--lt-on-band);
}
/* Transparent, the trigger inherits the header's ink, which follows what it floats over (79.3.6). */
[data-layout-theme="showroom"] .lt-header[data-transparent="true"] .lt-more-trigger {
  color: inherit;
}
[data-layout-theme="showroom"] .lt-more-trigger[hidden],
[data-layout-theme="showroom"] .lt-more-panel[hidden],
[data-layout-theme="showroom"] .lt-more-link[hidden],
[data-layout-theme="showroom"] .lt-more-group[hidden] {
  display: none;
}
[data-layout-theme="showroom"] .lt-more-trigger:hover,
[data-layout-theme="showroom"] .lt-more-trigger[aria-expanded="true"] {
  text-decoration: underline;
  text-underline-offset: 6px;
}
/* The panel drops from the trigger to just below the bar ((88px - 44px) / 2 = 22px). */
[data-layout-theme="showroom"] .lt-more-panel {
  position: absolute;
  top: calc(100% + (var(--lt-header-height) - 44px) / 2);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 240px;
  max-height: calc(100dvh - var(--lt-header-height) - 16px);
  overflow-y: auto;
  padding: 12px 20px;
  border: 1px solid var(--lt-band-rule);
  border-top: 0;
  background-color: var(--lt-band);
  color: var(--lt-on-band);
}
[data-layout-theme="showroom"] .lt-more-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  color: inherit;
}
[data-layout-theme="showroom"] .lt-more-link:hover,
[data-layout-theme="showroom"] .lt-more-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 6px;
}
[data-layout-theme="showroom"] .lt-more-group {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}
[data-layout-theme="showroom"] .lt-more-group .lt-more-link {
  padding-left: 12px;
}
[data-layout-theme="showroom"] .lt-more-heading,
[data-layout-theme="showroom"] .lt-mobile-heading {
  font-family: var(--lt-body-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}
[data-layout-theme="showroom"] .lt-menu-button,
[data-layout-theme="showroom"] .lt-call-button,
[data-layout-theme="showroom"] .lt-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: inherit;
}
[data-layout-theme="showroom"] .lt-call-button {
  margin-left: auto;
}
[data-layout-theme="showroom"] .lt-mobile-menu {
  background-color: var(--lt-band);
  padding: 8px var(--lt-gutter) 24px;
  max-height: calc(100dvh - var(--lt-header-height));
  overflow-y: auto;
}
[data-layout-theme="showroom"] .lt-mobile-menu[hidden] {
  display: none;
}
[data-layout-theme="showroom"] .lt-mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 17px;
}
[data-layout-theme="showroom"] .lt-mobile-nav > a,
[data-layout-theme="showroom"] .lt-mobile-group > a {
  display: flex;
  align-items: center;
  min-height: 44px;
}
/* A group's links sit under its name (phase 79.1.4). */
[data-layout-theme="showroom"] .lt-mobile-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 0 4px;
}
[data-layout-theme="showroom"] .lt-mobile-heading {
  margin: 0;
  padding: 4px 0;
}
[data-layout-theme="showroom"] .lt-mobile-group > a {
  padding-left: 12px;
}
/* The phone and the mode toggle share the panel's last line. */
[data-layout-theme="showroom"] .lt-mobile-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}
[data-layout-theme="showroom"] .lt-mobile-actions > a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}
/* The desktop row from 1024 (ADR-0040 section 1, phase 79.1.4). */
@media (min-width: 1024px) {
  [data-layout-theme="showroom"] .lt-nav,
  [data-layout-theme="showroom"] .lt-header-right {
    display: flex;
  }
  [data-layout-theme="showroom"] .lt-menu-button,
  [data-layout-theme="showroom"] .lt-call-button,
  [data-layout-theme="showroom"] .lt-mobile-menu {
    display: none;
  }
  [data-layout-theme="showroom"] .lt-header-bar {
    gap: 24px;
  }
  /* 1024 to 1279: a wide logo gives up 40px so three short links, Favorites and the
     actions still fit on one line; a tall logo is bound by its height and is unchanged. */
  [data-layout-theme="showroom"] .lt-logo-image {
    max-width: 180px;
  }
}
@media (min-width: 1280px) {
  [data-layout-theme="showroom"] .lt-logo-image {
    max-width: 220px;
  }
  [data-layout-theme="showroom"] .lt-phone-icon {
    display: none;
  }
  [data-layout-theme="showroom"] .lt-phone-text {
    display: inline;
  }
}

/* footer.css */
/* ---- Footer ---- */
[data-layout-theme="showroom"] .lt-footer {
  background-color: var(--lt-band);
  color: var(--lt-band-muted);
  padding: 96px var(--lt-gutter) 48px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
/* The board's columns stack on a phone, pair up on a tablet and sit in one row from 1024
   (phase 72.8.4). A missing column (no hours, no shop links) leaves no empty track. */
[data-layout-theme="showroom"] .lt-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
@media (min-width: 768px) {
  [data-layout-theme="showroom"] .lt-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
  }
}
@media (min-width: 1024px) {
  [data-layout-theme="showroom"] .lt-footer-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}
[data-layout-theme="showroom"] .lt-footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
[data-layout-theme="showroom"] .lt-footer-name {
  font-family: var(--lt-heading-font);
  font-size: 30px;
  color: var(--lt-on-band);
}
[data-layout-theme="showroom"] .lt-footer-address {
  white-space: pre-line;
}
[data-layout-theme="showroom"] .lt-footer-phone {
  color: var(--lt-on-band);
}
[data-layout-theme="showroom"] .lt-footer-heading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lt-band-muted);
}
[data-layout-theme="showroom"] .lt-footer a:hover {
  color: var(--lt-on-band);
}
[data-layout-theme="showroom"] .lt-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--lt-band-rule);
  font-size: 13px;
  color: var(--lt-band-muted);
}
[data-layout-theme="showroom"] .lt-footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* home.css */
/* ---- Home (phase 72.8.1) ----
   The homepage is a list of [data-section-type] wrappers (phase 72.4). The header floats over the
   first section on "/" (header.css, data-overlay), so a hero either runs under it on purpose or
   clears it with padding. Everything below is scoped under the layout and reads only --lt- tokens
   and the colour theme's own roles. */

/* One gutter for every section, the header's own. Bands run full-bleed and pad their contents. */
[data-layout-theme="showroom"] main {
  overflow-x: clip;
}
/* The shell pads <main> by the gutter for inner pages (pages.css); the home pads per section so
   its bands can run full-bleed. */
[data-layout-theme="showroom"] main:has(> [data-section-type]),
[data-layout-theme="showroom"] main:has(> div > [data-section-type]) {
  padding-inline: 0;
}
[data-layout-theme="showroom"] [data-section-type] {
  padding-inline: var(--lt-gutter);
}
/* The wrapper carries the gutter; a section inside it adds none (lowest specificity here, so the
   components below set their own). */
[data-layout-theme="showroom"] [data-section-type] > :where(section, div) {
  padding-inline: 0;
}
[data-layout-theme="showroom"] [data-section-type="search-hero"],
[data-layout-theme="showroom"] [data-section-type="hero-carousel"],
[data-layout-theme="showroom"] [data-section-type="facet-row"],
[data-layout-theme="showroom"] [data-section-type="cta-band"] {
  padding-inline: 0;
}
[data-layout-theme="showroom"] [data-section-type] h1,
[data-layout-theme="showroom"] [data-section-type] h2,
[data-layout-theme="showroom"] [data-section-type] h3,
[data-layout-theme="showroom"] [data-section-type] h4 {
  font-family: var(--lt-heading-font);
  font-weight: 400;
}

/* Section eyebrow and heading scale, shared by the sections this phase restyles. */
[data-layout-theme="showroom"] .lt-eyebrow,
[data-layout-theme="showroom"] [data-component="search-hero"] > div > p:first-child,
[data-layout-theme="showroom"] [data-component="story-split"] p.uppercase {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lt-text);
}

/* ---- Base hero carousel: full-bleed under the header, no inset card, square corners ---- */
[data-layout-theme="showroom"] [data-section-type="hero-carousel"] {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
[data-layout-theme="showroom"] [data-section-type="hero-carousel"] > div {
  margin-top: 0;
  border-radius: 0;
}
[data-layout-theme="showroom"] [data-section-type="hero-carousel"] [class*="rounded"] {
  border-radius: 0;
}
/* The hero's button (phase 79.3.3): the shared Button's default variant, so it carries
   bg-secondary, the theme's pale secondary that all but vanishes into the overlay. Showroom's
   action pair instead, hover included (Tailwind's hover:bg-secondary/80 would repaint it). One
   slide renders <Button asChild><Link>, an a; two or more render <Link><Button>, a button. */
[data-layout-theme="showroom"] [data-section-type="hero-carousel"] a[class~="bg-secondary"],
[data-layout-theme="showroom"] [data-section-type="hero-carousel"] a[class~="bg-secondary"]:hover,
[data-layout-theme="showroom"] [data-section-type="hero-carousel"] button[class~="bg-secondary"],
[data-layout-theme="showroom"]
  [data-section-type="hero-carousel"]
  button[class~="bg-secondary"]:hover {
  border: 1px solid var(--lt-on-action);
  background-color: var(--lt-action);
  color: var(--lt-on-action);
}
/* The header is its token height plus a 1px bottom rule, and floats over the hero by the token
   height alone: lift a leading hero by the rule so no strip shows above it. */
[data-layout-theme="showroom"] main [data-section-type="search-hero"]:first-child,
[data-layout-theme="showroom"] main [data-section-type="hero-carousel"]:first-child {
  margin-top: -1px;
}
/* A first section that is not a hero would sit under the floating header. */
[data-layout-theme="showroom"]
  main
  [data-section-type]:first-child:not([data-section-type="search-hero"]):not(
    [data-section-type="hero-carousel"]
  ) {
  padding-top: var(--lt-header-height);
}

/* ---- search-hero: dark band, runs under the header, clears it with padding ---- */
[data-layout-theme="showroom"] [data-section-type="search-hero"] {
  background-color: var(--lt-band);
  color: var(--lt-on-band);
}
[data-layout-theme="showroom"] [data-component="search-hero"] {
  padding: calc(var(--lt-header-height) + 48px) var(--lt-gutter) 56px;
}
[data-layout-theme="showroom"] [data-component="search-hero"] > div {
  max-width: 1000px;
  margin-inline: 0;
  text-align: left;
}
[data-layout-theme="showroom"] [data-component="search-hero"] > div > p:first-child {
  color: var(--lt-band-muted);
}
[data-layout-theme="showroom"] [data-component="search-hero"] h1 {
  margin: 20px 0 0;
  color: var(--lt-on-band);
  font-size: clamp(40px, 7vw, 92px);
  line-height: 1.04;
  letter-spacing: -0.01em;
}
[data-layout-theme="showroom"] [data-component="search-hero"] h1 em {
  color: inherit;
  font-style: italic;
}
[data-layout-theme="showroom"] [data-component="search-hero"] > div > p:not(:first-child) {
  max-width: 620px;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--lt-band-muted);
}
/* The search bar: one surface card; stacked below 768, two columns to 1023, one row from 1024. */
[data-layout-theme="showroom"] [data-component="search-hero"] form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 32px;
  background-color: var(--lt-surface);
  color: var(--lt-text);
  max-width: 920px;
}
[data-layout-theme="showroom"] [data-component="search-hero"] form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--lt-rule);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lt-text);
}
[data-layout-theme="showroom"] [data-component="search-hero"] form :is(select, input) {
  height: auto;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lt-text);
}
/* The search button: the action pair (79.3.1), filled in both schemes (79.3.3), with an edge in
   its own text colour (phase 79.3.2; it was the theme's --primary, pale with dark text in dark). */
[data-layout-theme="showroom"] [data-component="search-hero"] form button {
  height: auto;
  min-height: 52px;
  padding: 16px 28px;
  border: 1px solid var(--lt-on-action);
  border-radius: 0;
  background-color: var(--lt-action);
  color: var(--lt-on-action);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-layout-theme="showroom"] [data-component="search-hero"] ul {
  margin-top: 20px;
  justify-content: flex-start;
}
[data-layout-theme="showroom"] [data-component="search-hero"] ul a {
  border-color: var(--lt-band-rule);
  background-color: transparent;
  color: var(--lt-on-band);
}
[data-layout-theme="showroom"] [data-component="search-hero"] ul a:hover {
  background-color: transparent;
  text-decoration: underline;
}
/* The two calls to action: stacked and full-width on phones, side by side from 768. */
[data-layout-theme="showroom"] [data-component="search-hero"] form ~ div {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 24px;
}
[data-layout-theme="showroom"] [data-component="search-hero"] form ~ div a {
  display: flex;
  justify-content: center;
  padding: 16px 28px;
  border: 1px solid var(--lt-on-band);
  border-radius: 0;
  background-color: transparent;
  color: var(--lt-on-band);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-layout-theme="showroom"] [data-component="search-hero"] form ~ div a:first-child {
  background-color: var(--lt-on-band);
  color: var(--lt-band);
}
[data-layout-theme="showroom"] [data-component="search-hero"] a:focus-visible,
[data-layout-theme="showroom"] [data-component="search-hero"] button:focus-visible {
  outline: 2px solid var(--lt-on-band);
  outline-offset: 2px;
}

/* ---- inventory-row (the override in sections/InventoryRow.tsx) ---- */
[data-layout-theme="showroom"] .lt-home-row {
  padding: 56px 0 64px;
}
[data-layout-theme="showroom"] .lt-home-row-loading {
  min-height: 480px;
}
[data-layout-theme="showroom"] .lt-home-row-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
}
[data-layout-theme="showroom"] .lt-home-row-titles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-layout-theme="showroom"] .lt-home-row-titles h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
}
[data-layout-theme="showroom"] .lt-home-row-link {
  padding-bottom: 4px;
  border-bottom: 1px solid currentcolor;
  font-size: 15px;
  font-weight: 600;
}
[data-layout-theme="showroom"] .lt-home-row-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

/* ---- story-split: the points become a tinted panel beside the text ---- */
[data-layout-theme="showroom"] [data-component="story-split"] {
  padding: 64px 0;
}
[data-layout-theme="showroom"] [data-component="story-split"] > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  max-width: none;
  align-items: center;
}
[data-layout-theme="showroom"] [data-component="story-split"] h2 {
  margin: 12px 0 0;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
}
[data-layout-theme="showroom"] [data-component="story-split"] > div > div > p:not(.uppercase) {
  font-size: 18px;
  line-height: 1.7;
  color: var(--lt-text);
}
[data-layout-theme="showroom"] [data-component="story-split"] > div > ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 24px 28px;
  background-color: var(--lt-tint);
  color: var(--lt-on-tint);
  border: 1px solid var(--lt-rule);
}
[data-layout-theme="showroom"] [data-component="story-split"] > div > ul > li {
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--lt-rule);
  border-radius: 0;
  background-color: transparent;
}
[data-layout-theme="showroom"] [data-component="story-split"] > div > ul > li:last-child {
  border-bottom: 0;
}
[data-layout-theme="showroom"] [data-component="story-split"] li h3 {
  font-size: 22px;
}
[data-layout-theme="showroom"] [data-component="story-split"] li p {
  font-size: 15px;
  color: var(--lt-tint-muted);
}
[data-layout-theme="showroom"] [data-component="story-split"] a {
  border-radius: 0;
  background-color: var(--lt-text);
  color: var(--lt-surface);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- facet-row: a tinted band of text links with counts ---- */
[data-layout-theme="showroom"] [data-section-type="facet-row"] {
  background-color: var(--lt-tint);
  color: var(--lt-on-tint);
  border-block: 1px solid var(--lt-rule);
}
[data-layout-theme="showroom"] [data-component="facet-row"] {
  padding: 72px var(--lt-gutter);
}
[data-layout-theme="showroom"] [data-component="facet-row"] > div {
  max-width: none;
}
[data-layout-theme="showroom"] [data-component="facet-row"] h2 {
  margin: 0;
  font-size: clamp(30px, 3vw, 40px);
}
[data-layout-theme="showroom"] [data-component="facet-row"] ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
  margin-top: 32px;
  border-top: 1px solid var(--lt-rule);
}
[data-layout-theme="showroom"] [data-component="facet-row"] ul a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 0 8px;
  align-items: flex-start;
  border: 0;
  border-radius: 0;
  font-family: var(--lt-heading-font);
  font-size: 22px;
  color: var(--lt-on-tint);
}
[data-layout-theme="showroom"] [data-component="facet-row"] ul a:hover {
  background-color: transparent;
  text-decoration: underline;
}
[data-layout-theme="showroom"] [data-component="facet-row"] ul a span {
  font-family: var(--lt-body-font);
  font-size: 14px;
  color: var(--lt-tint-muted);
}

/* ---- cta-band: the accent band, copy beside two buttons from 1024 ---- */
[data-layout-theme="showroom"] [data-section-type="cta-band"] {
  background-color: var(--lt-accent-band);
  color: var(--lt-on-accent-band);
}
[data-layout-theme="showroom"] [data-component="cta-band"] {
  padding: 72px var(--lt-gutter);
}
[data-layout-theme="showroom"] [data-component="cta-band"] > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: none;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  text-align: left;
}
[data-layout-theme="showroom"] [data-component="cta-band"] h2 {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.1;
}
[data-layout-theme="showroom"] [data-component="cta-band"] p {
  color: var(--lt-on-accent-band);
}
[data-layout-theme="showroom"] [data-component="cta-band"] > div > div {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 12px;
}
[data-layout-theme="showroom"] [data-component="cta-band"] a {
  display: flex;
  justify-content: center;
  padding: 18px 28px;
  border: 1px solid var(--lt-on-accent-band);
  border-radius: 0;
  background-color: transparent;
  color: var(--lt-on-accent-band);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-layout-theme="showroom"] [data-component="cta-band"] a:first-child {
  background-color: var(--lt-surface);
  color: var(--lt-text);
  border-color: var(--lt-surface);
}

/* ---- Widths ---- */
@media (min-width: 768px) {
  [data-layout-theme="showroom"] [data-component="search-hero"] form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-layout-theme="showroom"] [data-component="search-hero"] form button {
    grid-column: 1 / -1;
  }
  [data-layout-theme="showroom"] [data-component="search-hero"] form ~ div {
    flex-direction: row;
    align-items: center;
  }
  [data-layout-theme="showroom"] [data-component="search-hero"] form ~ div a {
    display: inline-flex;
  }
  [data-layout-theme="showroom"] .lt-home-row-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  [data-layout-theme="showroom"] .lt-home-row-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-layout-theme="showroom"] [data-component="facet-row"] ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  [data-layout-theme="showroom"] [data-component="cta-band"] > div > div {
    flex-direction: row;
    align-self: flex-start;
  }
  [data-layout-theme="showroom"] [data-component="cta-band"] a {
    display: inline-flex;
  }
}
@media (min-width: 1024px) {
  [data-layout-theme="showroom"] [data-component="search-hero"] form {
    display: flex;
  }
  [data-layout-theme="showroom"] [data-component="search-hero"] form label {
    flex: 1 1 0;
    min-width: 0;
    border-bottom: 0;
    border-right: 1px solid var(--lt-rule);
  }
  [data-layout-theme="showroom"] [data-component="search-hero"] form button {
    flex: 0 0 200px;
  }
  [data-layout-theme="showroom"] .lt-home-row-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  [data-layout-theme="showroom"] [data-component="story-split"] > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 88px;
  }
  /* The panel comes first, as in the board. */
  [data-layout-theme="showroom"] [data-component="story-split"] > div > ul {
    order: -1;
  }
  [data-layout-theme="showroom"] [data-component="facet-row"] ul {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  [data-layout-theme="showroom"] [data-component="cta-band"] > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 64px;
    row-gap: 14px;
  }
  [data-layout-theme="showroom"] [data-component="cta-band"] > div > :is(h2, p) {
    grid-column: 1;
    max-width: 720px;
  }
  [data-layout-theme="showroom"] [data-component="cta-band"] > div > div {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}

/* ---- Phase 79.3.2: dark search fields, the CTA bands, the facet row, testimonial cards ---- */

/* At 768 to 1023 the search fields sit two to a row: an odd last field spans the row, so no cell
   beside it is left empty. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  [data-layout-theme="showroom"]
    [data-component="search-hero"]
    form
    label:last-of-type:nth-of-type(odd) {
    grid-column: 1 / -1;
  }
}

/* Body styles (79.2.4) share the row evenly at every width: the tracks that no tile fills
   collapse, so a few tiles span the row instead of leaving most of it empty. */
[data-layout-theme="showroom"] [data-component="facet-row"] ul {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Dark: the search card is the band's own colour, so each field takes a box of its own, the page
   surface edged in the text colour (the measured --lt-text/--lt-surface pair; the band is the
   surface in dark). showroomPaletteCounts.test.ts pins these tokens. */
:where(.dark) [data-layout-theme="showroom"] [data-component="search-hero"] form {
  gap: 8px;
  background-color: transparent;
}
:where(.dark) [data-layout-theme="showroom"] [data-component="search-hero"] form label {
  border: 1px solid var(--lt-text);
  background-color: var(--lt-surface);
}

/* Dark: the accent band is the theme's --primary, pale with dark text there. The band pair
   instead, set off from the page by its rules, with the first button inverted as in the hero. */
:where(.dark) [data-layout-theme="showroom"] [data-section-type="cta-band"] {
  border-block: 1px solid var(--lt-band-rule);
  background-color: var(--lt-band);
  color: var(--lt-on-band);
}
:where(.dark) [data-layout-theme="showroom"] [data-component="cta-band"] p {
  color: var(--lt-on-band);
}
:where(.dark) [data-layout-theme="showroom"] [data-component="cta-band"] a {
  border-color: var(--lt-on-band);
  color: var(--lt-on-band);
}
:where(.dark) [data-layout-theme="showroom"] [data-component="cta-band"] a:first-child {
  border-color: var(--lt-on-band);
  background-color: var(--lt-on-band);
  color: var(--lt-band);
}

/* The published homepage's financing, trade-in and service CTAs: Showroom's flat square panel on
   the page hairline (never the theme's near-white dark --border), the first button on the action
   pair, filled in both schemes (79.3.3; it carries bg-secondary: the shared Button's default
   variant), the second an ink outline, and the quote over the photo on the surface (it was white
   at 90% behind the theme's text colour, so light on white in dark), framed on the page hairline
   with no shadow (79.3.5). The photo's wrapper, overlay and image lose their corners and the
   image its shadow (79.3.5). */
[data-layout-theme="showroom"] [data-section-type="financing-cta"] [class~="bg-card"],
[data-layout-theme="showroom"] [data-section-type="trade-in-cta"] [class~="bg-card"],
[data-layout-theme="showroom"] [data-section-type="services-cta"] [class~="bg-card"] {
  border: 1px solid var(--lt-rule);
  border-radius: 0;
  box-shadow: none;
  background-color: var(--lt-surface);
  color: var(--lt-text);
}
[data-layout-theme="showroom"] [data-section-type="financing-cta"] [class~="text-muted-foreground"],
[data-layout-theme="showroom"] [data-section-type="trade-in-cta"] [class~="text-muted-foreground"],
[data-layout-theme="showroom"] [data-section-type="services-cta"] [class~="text-muted-foreground"] {
  color: var(--lt-text);
}
[data-layout-theme="showroom"] [data-section-type="financing-cta"] a[class~="bg-secondary"],
[data-layout-theme="showroom"] [data-section-type="financing-cta"] a[class~="bg-secondary"]:hover,
[data-layout-theme="showroom"] [data-section-type="trade-in-cta"] a[class~="bg-secondary"],
[data-layout-theme="showroom"] [data-section-type="trade-in-cta"] a[class~="bg-secondary"]:hover,
[data-layout-theme="showroom"] [data-section-type="services-cta"] a[class~="bg-secondary"],
[data-layout-theme="showroom"] [data-section-type="services-cta"] a[class~="bg-secondary"]:hover {
  border: 1px solid var(--lt-on-action);
  border-radius: 0;
  background-color: var(--lt-action);
  color: var(--lt-on-action);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-layout-theme="showroom"] [data-section-type="financing-cta"] a[class~="bg-background"],
[data-layout-theme="showroom"] [data-section-type="financing-cta"] a[class~="bg-background"]:hover,
[data-layout-theme="showroom"] [data-section-type="trade-in-cta"] a[class~="bg-background"],
[data-layout-theme="showroom"] [data-section-type="trade-in-cta"] a[class~="bg-background"]:hover,
[data-layout-theme="showroom"] [data-section-type="services-cta"] a[class~="bg-background"],
[data-layout-theme="showroom"] [data-section-type="services-cta"] a[class~="bg-background"]:hover {
  border: 1px solid var(--lt-text);
  border-radius: 0;
  background-color: var(--lt-surface);
  color: var(--lt-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-layout-theme="showroom"] [data-section-type="financing-cta"] [class~="bg-white/90"],
[data-layout-theme="showroom"] [data-section-type="trade-in-cta"] [class~="bg-white/90"],
[data-layout-theme="showroom"] [data-section-type="services-cta"] [class~="bg-white/90"] {
  border: 1px solid var(--lt-rule);
  border-radius: 0;
  box-shadow: none;
  background-color: var(--lt-surface);
  color: var(--lt-text);
}
[data-layout-theme="showroom"] [data-section-type="financing-cta"] [class~="bg-white/90"] p,
[data-layout-theme="showroom"] [data-section-type="trade-in-cta"] [class~="bg-white/90"] p,
[data-layout-theme="showroom"] [data-section-type="services-cta"] [class~="bg-white/90"] p {
  color: var(--lt-text);
}
[data-layout-theme="showroom"] [data-section-type="financing-cta"] [class~="bg-black/20"],
[data-layout-theme="showroom"] [data-section-type="trade-in-cta"] [class~="bg-black/20"],
[data-layout-theme="showroom"] [data-section-type="services-cta"] [class~="bg-black/20"] {
  border-radius: 0;
}
[data-layout-theme="showroom"] [data-section-type="financing-cta"] [class~="bg-black/20"] img,
[data-layout-theme="showroom"] [data-section-type="trade-in-cta"] [class~="bg-black/20"] img,
[data-layout-theme="showroom"] [data-section-type="services-cta"] [class~="bg-black/20"] img {
  border-radius: 0;
  box-shadow: none;
}

/* Testimonials: square flat cards on the page hairline, as tall as their content; the empty
   purchase line and the quote's bottom margin go, and a card without an avatar keeps the avatar's
   48px column (and the 16px gap) so its name lines up with a card that has one. */
[data-layout-theme="showroom"] [data-section-type="testimonials"] [class~="flex-wrap"] {
  align-items: flex-start;
}
[data-layout-theme="showroom"] [data-section-type="testimonials"] [class~="flex-wrap"] > div > div {
  height: auto;
  border: 1px solid var(--lt-rule);
  border-radius: 0;
  box-shadow: none;
  background-color: var(--lt-surface);
  color: var(--lt-text);
}
[data-layout-theme="showroom"] [data-section-type="testimonials"] p[class~="mb-4"] {
  margin-bottom: 0;
}
[data-layout-theme="showroom"] [data-section-type="testimonials"] [class~="min-h-[2em]"]:empty {
  display: none;
}
[data-layout-theme="showroom"]
  [data-section-type="testimonials"]
  [class~="items-start"][class~="gap-4"]
  > [class~="flex-grow"]:first-child {
  margin-inline-start: 64px;
}

/* ---- Phase 79.3.4: 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 CTA panels' flat square card 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="showroom"] [data-section-type="why-choose-us"] section {
  padding-block: 56px 64px;
}
[data-layout-theme="showroom"] [data-section-type="why-choose-us"] section > div:first-child {
  align-items: flex-start;
  text-align: left;
}
[data-layout-theme="showroom"] [data-section-type="why-choose-us"] section > div:first-child > h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: normal;
}
[data-layout-theme="showroom"] [data-section-type="why-choose-us"] section > div[class~="grid"] {
  max-width: none;
  margin-inline: 0;
  margin-top: 28px;
}
[data-layout-theme="showroom"] [data-section-type="why-choose-us"] [class~="bg-card"] {
  align-items: stretch;
  border: 1px solid var(--lt-rule);
  border-radius: 0;
  box-shadow: none;
  background-color: var(--lt-surface);
  color: var(--lt-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="showroom"]
  [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="showroom"]
    [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.8.2): breadcrumb, name and count, one bar, cards, 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="showroom"]:has(.lt-srp) div:has(> nav[aria-label="Breadcrumb"]) {
  display: none;
}

[data-layout-theme="showroom"] .lt-srp {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-inline: clamp(0px, 2vw, 24px);
}
[data-layout-theme="showroom"] .lt-srp-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
}
[data-layout-theme="showroom"] .lt-srp-head [data-srp="breadcrumb"] {
  margin-bottom: 18px;
  font-size: 14px;
}
[data-layout-theme="showroom"] .lt-srp-name {
  font-family: var(--lt-heading-font);
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.05;
  color: var(--lt-text);
}
[data-layout-theme="showroom"] .lt-srp-head [data-srp="title"] {
  font-family: var(--lt-body-font);
  font-size: 16px;
  font-weight: 400;
  color: var(--lt-text);
}

/* The bar: the drawer trigger and chips on the left, the sort on the right; wraps on phones. */
[data-layout-theme="showroom"] .lt-srp-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 28px;
  padding: 16px 0;
  border-top: 1px solid var(--lt-rule);
  border-bottom: 1px solid var(--lt-rule);
}
[data-layout-theme="showroom"] .lt-srp-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
[data-layout-theme="showroom"] .lt-srp-refine > div {
  margin-bottom: 0;
}
/* The drawer trigger and the active-filter chips: the action pair (79.3.1), filled in both schemes
   (79.3.3), with an edge in its own text colour (phase 79.3.2). */
[data-layout-theme="showroom"] .lt-srp-refine button {
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--lt-on-action);
  border-radius: 0;
  background-color: var(--lt-action);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lt-on-action);
}
[data-layout-theme="showroom"] .lt-srp-filters [aria-label^="Remove filter"] {
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--lt-on-action);
  border-radius: 0;
  background-color: var(--lt-action);
  font-size: 14px;
  color: var(--lt-on-action);
}
/* Baseline, not centre (phase 79.3.2): the label's text sits on the select's text line. */
[data-layout-theme="showroom"] .lt-srp-sort > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 0;
}
[data-layout-theme="showroom"] .lt-srp-sort label {
  white-space: nowrap;
}
[data-layout-theme="showroom"] .lt-srp-sort select {
  height: 44px;
  border-radius: 0;
}

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

/* ---- The card (phase 72.8.2): the save heart on the photo, the actions inside the card ---- */
[data-layout-theme="showroom"] .lt-card-save {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  border-radius: 999px;
  background-color: var(--lt-surface);
}
/* Phase 79.3.2: the heart on a solid plate of the page surface, drawn in the text colour (the
   measured --lt-text/--lt-surface pair), so it no longer depends on the photo behind it. A saved
   heart keeps FavoriteButton's own destructive fill. */
[data-layout-theme="showroom"] .lt-card-save svg[class~="text-white"] {
  color: var(--lt-text);
}
[data-layout-theme="showroom"] .lt-card-actions {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--lt-rule);
}

/* ---- Phase 79.3.2: Details, Clear all and the drawer's checked filters ---- */

/* "Details →" was the theme's --primary as text, low on the card in dark. */
[data-layout-theme="showroom"] .lt-card [data-card-body="title-chips"] + a {
  color: var(--lt-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-layout-theme="showroom"]
  .lt-srp-filters
  [data-srp="active-filters"]
  > button:not([aria-label]) {
  color: var(--lt-text);
}
/* The filter drawer (a portal under body) marks a checked make, price or type in the theme's
   --primary, pale with a dark tick in dark: the action pair instead. */
[data-layout-theme="showroom"] [role="dialog"] button[role="checkbox"][data-state="checked"] {
  border-color: var(--lt-on-action);
  background-color: var(--lt-action);
  color: var(--lt-on-action);
}

/* vdp.css */
/* ---- VDP arrangement (phase 72.8.3): gallery, title, a sticky price rail, the main column ---- */

[data-layout-theme="showroom"] .lt-vdp {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
[data-layout-theme="showroom"] .lt-vdp-gallery {
  width: 100%;
  min-width: 0;
}
/* The board's photo is a band, not a 16:10 slab: past 768 a full-width 16:10 photo would push the
   title below the first viewport, so its height is capped and the photo covers the band. */
@media (min-width: 768px) {
  [data-layout-theme="showroom"] .lt-vdp-gallery [data-block="thumb-gallery"] > div:first-child {
    max-height: 520px;
  }
}
/* Phones and tablets: one column in DOM order (title, rail, main). */
[data-layout-theme="showroom"] .lt-vdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
[data-layout-theme="showroom"] .lt-vdp-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
[data-layout-theme="showroom"] .lt-vdp-title [data-block="stock-vin"] {
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--lt-text);
}
[data-layout-theme="showroom"] .lt-vdp-rail {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--lt-rule);
  background-color: var(--lt-surface);
}
[data-layout-theme="showroom"] .lt-vdp-price {
  font-family: var(--lt-heading-font);
  font-size: 32px;
  line-height: 1.1;
  color: var(--lt-text);
}
[data-layout-theme="showroom"] .lt-vdp-rail [data-block="fees-note"] {
  font-size: 12px;
  line-height: 1.5;
  color: var(--lt-text);
}
[data-layout-theme="showroom"] .lt-vdp-main {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}
/* The spec list: small labels over large values, ruled above and below. */
[data-layout-theme="showroom"] .lt-vdp-main [data-block="spec-strip"] {
  padding: 24px 0;
  border-top: 1px solid var(--lt-rule);
  border-bottom: 1px solid var(--lt-rule);
}
[data-layout-theme="showroom"] .lt-vdp-main [data-block="spec-strip"] dd {
  font-family: var(--lt-heading-font);
  font-weight: 400;
  color: var(--lt-text);
}

/* From 1024: the title and main in a wide column, the rail beside them, sticky under the header. */
@media (min-width: 1024px) {
  [data-layout-theme="showroom"] .lt-vdp-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: 56px;
  }
  [data-layout-theme="showroom"] .lt-vdp-title {
    grid-column: 1;
    grid-row: 1;
  }
  [data-layout-theme="showroom"] .lt-vdp-main {
    grid-column: 1;
    grid-row: 2;
  }
  [data-layout-theme="showroom"] .lt-vdp-rail {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    top: calc(var(--lt-header-height) + 24px);
  }
}

/* ---- Phase 79.3.2: the rail's actions and the "Visit us" card ---- */

/* The rail's primary action (Financing options, the first of the actions card; the shared Button
   defaults to the secondary variant, so it carries bg-secondary like Book test drive): the action
   pair (79.3.1), square, filled in both schemes (79.3.3), with an edge in its own text colour. */
[data-layout-theme="showroom"] .lt-vdp-rail a[class~="bg-secondary"]:first-child,
[data-layout-theme="showroom"] .lt-vdp-rail a[class~="bg-secondary"]:first-child:hover {
  border: 1px solid var(--lt-on-action);
  border-radius: 0;
  background-color: var(--lt-action);
  color: var(--lt-on-action);
}
/* The outline actions (Make an offer, Check availability, the price watch): an ink outline on the
   page, Showroom's secondary, never the theme's --primary edge around inherited text. */
[data-layout-theme="showroom"] .lt-vdp-rail [class~="bg-background"],
[data-layout-theme="showroom"] .lt-vdp-rail [class~="bg-background"]:hover {
  border: 1px solid var(--lt-text);
  border-radius: 0;
  background-color: var(--lt-surface);
  color: var(--lt-text);
}
/* Book test drive (phase 79.3.3), the actions card's second bg-secondary link (variant="secondary"):
   Showroom's secondary, the ink outline of the actions above, never the theme's slate --secondary
   fill. Hover included: Tailwind's hover:bg-secondary/80 would repaint it. */
[data-layout-theme="showroom"] .lt-vdp-rail a[class~="bg-secondary"]:not(:first-child),
[data-layout-theme="showroom"] .lt-vdp-rail a[class~="bg-secondary"]:not(:first-child):hover {
  border: 1px solid var(--lt-text);
  border-radius: 0;
  background-color: var(--lt-surface);
  color: var(--lt-text);
}
/* The "Interested?" actions card (a shadcn Card): Showroom's flat square panel on the page
   hairline, as "Visit us" below, never the color theme's --border, near white in dark. */
[data-layout-theme="showroom"] .lt-vdp-rail [class~="bg-card"] {
  border: 1px solid var(--lt-rule);
  border-radius: 0;
  box-shadow: none;
  background-color: var(--lt-surface);
  color: var(--lt-text);
}
/* "Visit us" (components/mapSection.tsx, 79.2.5's hooks): the flat square panel on the page
   hairline, as on the content pages (pages.css), and 44px square contact actions. */
[data-layout-theme="showroom"] .lt-vdp-main [data-page-card] {
  border: 1px solid var(--lt-rule);
  border-radius: 0;
  box-shadow: none;
  background-color: var(--lt-surface);
  color: var(--lt-text);
}
/* The Specifications / Standard / Optional Equipment card (components/equipmentSection.tsx, a
   shadcn Card and a direct child of the main column; 79.3.5): the rail card's flat square panel
   on the page hairline, and its accordion rules and separators on that hairline too, never the
   color theme's --border, near white in dark. The child combinator keeps it off "Visit us", whose
   card sits inside a section. */
[data-layout-theme="showroom"] .lt-vdp-main > [class~="bg-card"] {
  border: 1px solid var(--lt-rule);
  border-radius: 0;
  box-shadow: none;
  background-color: var(--lt-surface);
  color: var(--lt-text);
}
[data-layout-theme="showroom"] .lt-vdp-main > [class~="bg-card"] [class~="border-b"] {
  border-bottom-color: var(--lt-rule);
}
[data-layout-theme="showroom"] .lt-vdp-main > [class~="bg-card"] [class~="bg-border"] {
  background-color: var(--lt-rule);
}
/* The Vehicle Details table (components/vdp/blocks.tsx's DetailsBlock, a shadcn Table; 79.3.7):
   it sits in the main column outside the equipment card, so 79.3.5's card rules never reach it.
   Its row rules go on the page hairline, as the spec strip's and the equipment card's edges,
   never the color theme's --border, near white in dark. */
[data-layout-theme="showroom"] .lt-vdp-main tr {
  border-bottom-color: var(--lt-rule);
}
[data-layout-theme="showroom"] .lt-vdp-main [data-contact-action],
[data-layout-theme="showroom"] .lt-vdp-main [data-contact-action]:hover {
  min-height: 44px;
  border: 1px solid var(--lt-text);
  border-radius: 0;
  background-color: var(--lt-surface);
  color: var(--lt-text);
}

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

/* ---- Content pages (phase 72.8.4): Contact, Financing and Favorites ----
   Only these pages render the shared title band (ADR-0037 section 4), so main:has() scopes the
   page rules to them. The band spans the content width from the gutter, set left in the
   heading face over a hairline, like the board's section heads. */
[data-layout-theme="showroom"] [data-page-title-band] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin: 0 0 40px;
  padding: 16px 0 28px;
  border-bottom: 1px solid var(--lt-rule);
  text-align: left;
}
[data-layout-theme="showroom"] [data-page-title-band] h1 {
  margin: 0;
  justify-content: flex-start;
  font-family: var(--lt-heading-font);
  font-size: clamp(34px, 6vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: left;
  color: var(--lt-text);
}
[data-layout-theme="showroom"] [data-page-title-band] p {
  margin: 0;
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.6;
  text-align: left;
  color: var(--lt-text);
}
/* Touch targets: every control on these pages is at least 44px tall. */
[data-layout-theme="showroom"]
  main:has([data-page-title-band])
  :is(
    input:not([type="checkbox"], [type="radio"], [type="hidden"]),
    select:not([aria-hidden="true"]),
    textarea,
    button,
    a.inline-flex
  ) {
  min-height: 44px;
}

/* ---- Cards, actions and forms (phase 79.3.1): About, Contact and Financing ----
   79.2.5's hooks, under the title band's scope so the VDP's "Visit us" card (79.3.2) is not
   touched. Cards are Showroom's flat panel: square, no shadow, the page's hairline as the edge,
   never the color theme's --border, which is near white in some dark themes. */
[data-layout-theme="showroom"] main:has([data-page-title-band]) [data-page-card] {
  border: 1px solid var(--lt-rule);
  border-radius: 0;
  box-shadow: none;
  background-color: var(--lt-surface);
  color: var(--lt-text);
}
/* The primary action: the action pair, set like the SRP's refine button, filled in both schemes
   (79.3.3). Its edge is its own text colour, the page's colour, so it disappears into the page in
   light mode and is a dark hairline round the light fill in dark. Hover keeps the pair (the base
   button pales). */
[data-layout-theme="showroom"] main:has([data-page-title-band]) [data-primary-action] {
  min-height: 44px;
  padding: 0 28px;
  border: 1px solid var(--lt-on-action);
  border-radius: 0;
  background-color: var(--lt-action);
  color: var(--lt-on-action);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-layout-theme="showroom"] 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: 3px;
}
/* Contact's Call, Email and Directions: Showroom's secondary, an ink outline on the page. */
[data-layout-theme="showroom"] main:has([data-page-title-band]) [data-contact-action] {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--lt-text);
  border-radius: 0;
  background-color: var(--lt-surface);
  color: var(--lt-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-layout-theme="showroom"] main:has([data-page-title-band]) [data-contact-action]:hover {
  background-color: var(--lt-surface);
  color: var(--lt-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 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="showroom"] 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="showroom"]
  main:has([data-page-title-band])
  form:has([data-form-fields])
  [class~="px-1"] {
  padding-inline: 0;
}
/* About's Mission: the band, Showroom's dark surface pair, instead of the theme's bg-primary. */
[data-layout-theme="showroom"]
  main:has([data-page-title-band])
  [data-page-card][data-about-section="mission"] {
  border-color: var(--lt-band-rule);
  background-color: var(--lt-band);
  color: var(--lt-on-band);
}