/* Published V2 only. The reference/V1 cascade is intentionally untouched. */
html[data-appearance="v2"] {
  --brand-primary: var(--autrade-brand-primary);
  --brand-secondary: var(--autrade-brand-primary);
  --brand-accent: var(--autrade-brand-accent);
  --page: var(--autrade-page-background);
  --surface: var(--autrade-panel-background);
  --ink: var(--autrade-text-primary);
  --muted: var(--autrade-text-secondary);
  --line: var(--autrade-border);
  --radius: var(--autrade-panel-radius);
  --shadow: var(--autrade-panel-shadow);
  font-size: var(--autrade-font-size);
}
[data-appearance="v2"] body {
  color: var(--ink);
  background: var(--page);
  font-family: var(--autrade-font-body);
  font-size: var(--autrade-font-size);
}
[data-appearance="v2"] .storefront { width: min(var(--autrade-content-width), calc(100% - 40px)); }
@media (max-width: 900px) {
  [data-appearance="v2"] .storefront { width: calc(100% - 32px); }
}
@media (max-width: 560px) {
  [data-appearance="v2"] .storefront { width: calc(100% - 16px); }
}
[data-appearance="v2"] .brand-mark { width: min(var(--autrade-logo-width), 30vw); }
[data-appearance="v2"] .site-header { flex-wrap: wrap; }
[data-appearance="v2"] .desktop-nav { flex-wrap: wrap; flex-shrink: 1; }
[data-appearance="v2"] .desktop-nav :is(a, button) { overflow-wrap: anywhere; }
[data-appearance="v2"] .vehicle-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(240px,
    calc((100% - (var(--autrade-inventory-columns) - 1) * 18px) / var(--autrade-inventory-columns)))), 1fr));
}
[data-appearance="v2"] :is(.media-frame, .vehicle-image) { aspect-ratio: var(--autrade-media-ratio); }
[data-appearance="v2"] .featured-vehicle .media-frame { aspect-ratio: 20 / 9; }
[data-appearance="v2"] .card-actions { flex-wrap: wrap; }
[data-appearance="v2"] .card-actions button { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
[data-appearance="v2"] .about-panel { margin-top: 16px; padding: 24px; }
[data-appearance="v2"] .about-panel h2 { margin: 0; }
[data-appearance="v2"] .about-panel p { margin: 8px 0 0; color: var(--muted); }
@media (min-width: 901px) {
  /* The hero highlight has a dedicated legacy 8:5 composition. The published
   * media ratio controls inventory cards, not the discovery hero geometry. */
  [data-appearance="v2"] .featured-vehicle .media-frame { aspect-ratio: 8 / 5; }
  [data-appearance="v2"][data-hero-media-position="left"] .hero-panel:not(.has-no-featured) {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr);
  }
  [data-appearance="v2"][data-hero-media-position="left"] .hero-panel:not(.has-no-featured) .featured-vehicle { grid-column: 1; grid-row: 1; }
  [data-appearance="v2"][data-hero-media-position="left"] .hero-panel:not(.has-no-featured) .hero-copy { grid-column: 2; grid-row: 1; }
}
[data-appearance="v2"] .page-glow {
  background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--brand-accent) 16%, transparent), transparent 70%);
}
[data-appearance="v2"] :is(.site-header, .hero-panel, .reputation-panel, .filters-panel, .site-footer, .location-panel, .about-panel) {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
[data-appearance="v2"] :is(.featured-vehicle, .vehicle-card, .review-card, .reputation-score, .search-form, dialog) {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--autrade-card-radius);
  box-shadow: var(--shadow);
}
[data-appearance="v2"] :is(.location-note, .cookie-consent, .compare-dock, .consent-essential,
  .consent-toggle, .vehicle-dialog-spec, .lia-dialog-header, .lia-form, .lia-privacy-note, .lia-message-assistant) {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}
[data-appearance="v2"] .social-links a {
  color: var(--autrade-button-secondary-normal-foreground);
  background: var(--autrade-button-secondary-normal-fill);
  border: 1px solid var(--autrade-button-secondary-normal-border);
}
[data-appearance="v2"] :is(.location-social, .location-note span, .location-panel p:not(.eyebrow),
  .cookie-consent p, .consent-description, .consent-essential span, .consent-toggle small,
  .vehicle-dialog-summary, .vehicle-dialog-spec span, .interest-dialog p:not(.eyebrow),
  .dialog-close, .compare-dock span:not([data-compare-count])) { color: var(--muted); }
[data-appearance="v2"] .lia-message-user {
  color: var(--autrade-button-primary-normal-foreground);
  background: var(--autrade-button-primary-normal-fill);
}
[data-appearance="v2"] :is(h1, h2, h3, .brand-copy strong, .vehicle-price, .vehicle-heading strong) {
  font-family: var(--autrade-font-heading);
}
[data-appearance="v2"] .hero-copy h1 {
  font-size: calc(clamp(2rem, 3vw, 3rem) * var(--autrade-heading-scale));
}
[data-appearance="v2"] :is(.hero-description, .brand-copy small, .desktop-nav a, .desktop-nav button,
  .trust-item, .hero-metrics, .meta-row, .review-card p, .review-head small, .reputation-score p,
  .score-line span, .site-footer p:not(.eyebrow), .filter-heading, .filters-panel legend, .select-label) {
  color: var(--muted);
}
[data-appearance="v2"] .hero-description { font-size: 1.125rem; }
@media (max-width: 560px) {
  /* Keep the reference mobile hierarchy while honoring both typography tokens. */
  [data-appearance="v2"] .hero-copy h1 {
    font-size: calc(1.8rem * var(--autrade-heading-scale));
  }
  [data-appearance="v2"] .hero-description { font-size: 0.95rem; }
}
[data-appearance="v2"] :is(input, select, textarea, .search-row, .filter-chip) {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}
[data-appearance="v2"] :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
[data-appearance="v2"] .filter-chip[aria-pressed="true"] {
  color: var(--autrade-button-secondary-pressed-foreground);
  background: var(--autrade-button-secondary-pressed-fill);
  border-color: var(--autrade-button-secondary-pressed-border);
}
[data-appearance="v2"] :is(.primary-button, .search-row button, .interest-button) {
  --button-fill: var(--autrade-button-primary-normal-fill);
  --button-foreground: var(--autrade-button-primary-normal-foreground);
  --button-border: var(--autrade-button-primary-normal-border);
  --button-radius: var(--autrade-button-primary-radius);
}
[data-appearance="v2"] :is(.outline-button, .card-actions button:not(.interest-button)) {
  --button-fill: var(--autrade-button-secondary-normal-fill);
  --button-foreground: var(--autrade-button-secondary-normal-foreground);
  --button-border: var(--autrade-button-secondary-normal-border);
  --button-radius: var(--autrade-button-secondary-radius);
}
@media (hover: hover) {
  [data-appearance="v2"] :is(.primary-button, .search-row button, .interest-button):hover {
    --button-fill: var(--autrade-button-primary-hover-fill);
    --button-foreground: var(--autrade-button-primary-hover-foreground);
    --button-border: var(--autrade-button-primary-hover-border);
  }
  [data-appearance="v2"] :is(.outline-button, .card-actions button:not(.interest-button)):hover {
    --button-fill: var(--autrade-button-secondary-hover-fill);
    --button-foreground: var(--autrade-button-secondary-hover-foreground);
    --button-border: var(--autrade-button-secondary-hover-border);
  }
}
[data-appearance="v2"] :is(.primary-button, .search-row button, .interest-button):active {
  --button-fill: var(--autrade-button-primary-pressed-fill);
  --button-foreground: var(--autrade-button-primary-pressed-foreground);
  --button-border: var(--autrade-button-primary-pressed-border);
}
[data-appearance="v2"] :is(.outline-button, .card-actions button:not(.interest-button)):active,
[data-appearance="v2"] .card-actions button[aria-pressed="true"] {
  --button-fill: var(--autrade-button-secondary-pressed-fill);
  --button-foreground: var(--autrade-button-secondary-pressed-foreground);
  --button-border: var(--autrade-button-secondary-pressed-border);
}
[data-appearance="v2"] :is(.primary-button, .search-row button, .interest-button):disabled {
  --button-fill: var(--autrade-button-primary-disabled-fill);
  --button-foreground: var(--autrade-button-primary-disabled-foreground);
  --button-border: var(--autrade-button-primary-disabled-border);
}
[data-appearance="v2"] :is(.outline-button, .card-actions button:not(.interest-button)):disabled {
  --button-fill: var(--autrade-button-secondary-disabled-fill);
  --button-foreground: var(--autrade-button-secondary-disabled-foreground);
  --button-border: var(--autrade-button-secondary-disabled-border);
}
[data-appearance="v2"] :is(.primary-button, .search-row button, .card-actions button, .outline-button) {
  color: var(--button-foreground);
  background: var(--button-fill);
  border: 1px solid var(--button-border);
  border-radius: var(--button-radius);
  font-family: var(--autrade-font-body);
  transition-duration: var(--autrade-motion-duration);
}
[data-appearance="v2"] :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--autrade-focus);
  outline-offset: 3px;
}
html[data-appearance-motion="reduced"] { scroll-behavior: auto; }
[data-appearance-motion="reduced"] *, [data-appearance-motion="reduced"] *::before,
[data-appearance-motion="reduced"] *::after {
  animation-duration: 0s !important;
  transition-duration: 0s !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  html[data-appearance="v2"], [data-appearance="v2"] * {
    scroll-behavior: auto !important;
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}