/* -------------------------------------------------------------
   Fairbridge Motors - Public Stock Theme
   Direction 2: Performance Forecourt (JDM Specialist / Motorsport Slate & Red)
   Approved by Ad as Final
   ------------------------------------------------------------- */

:root {
  /* Color System - Dark Default (Performance Forecourt Deep Slate) */
  --bg-main: #07090e;
  --bg-header: rgba(7, 9, 14, 0.94);
  --bg-card: #111822;
  --bg-card-hover: #16202e;
  --bg-surface: #0d121a;
  --bg-surface-elevated: #1a2332;
  --bg-input: #0a0e14;
  --bg-card-media: #070a0f;
  --bg-gallery: #05080f;
  --bg-backdrop: rgba(5, 8, 15, 0.88);
  --bg-notice-strip: #0d121a;
  --bg-footer: #05070a;
  
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-focus: #ef4444;
  --border-card: rgba(255, 255, 255, 0.09);
  --border-input: rgba(255, 255, 255, 0.15);
  --border-accent: #ef4444;

  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #07090e;
  --brand-title-color: #ffffff;

  /* Brand & Status Accents (Fairbridge Racing Red & Telemetry Cyan) */
  --accent-primary: #ef4444;
  --accent-primary-hover: #dc2626;
  --accent-cyan: #06b6d4;

  /* Card & Modal Contrast Tokens (Dark Defaults) */
  --price-color: #ffffff;
  --year-chip-bg: rgba(6, 182, 212, 0.12);
  --year-chip-text: #22d3ee;
  --year-chip-border: rgba(6, 182, 212, 0.32);

  --badge-retail-bg: rgba(16, 185, 129, 0.15);
  --badge-retail-text: #34d399;
  --badge-retail-border: rgba(16, 185, 129, 0.32);

  --badge-trade-bg: rgba(6, 182, 212, 0.15);
  --badge-trade-text: #22d3ee;
  --badge-trade-border: rgba(6, 182, 212, 0.32);

  --status-available-bg: rgba(16, 185, 129, 0.16);
  --status-available-border: rgba(16, 185, 129, 0.4);
  --status-available-text: #34d399;

  --status-arriving-bg: rgba(245, 158, 11, 0.16);
  --status-arriving-border: rgba(245, 158, 11, 0.4);
  --status-arriving-text: #fbbf24;

  --status-reserved-bg: rgba(99, 102, 241, 0.16);
  --status-reserved-border: rgba(99, 102, 241, 0.4);
  --status-reserved-text: #818cf8;

  --badge-preorder-bg: rgba(239, 68, 68, 0.16);
  --badge-preorder-border: rgba(239, 68, 68, 0.45);
  --badge-preorder-text: #f87171;

  --badge-reserved-bg: rgba(99, 102, 241, 0.16);
  --badge-reserved-border: rgba(99, 102, 241, 0.4);
  --badge-reserved-text: #818cf8;

  --status-sold-bg: rgba(148, 163, 184, 0.12);
  --status-sold-border: rgba(148, 163, 184, 0.25);
  --status-sold-text: #94a3b8;

  --poa-badge-bg: rgba(234, 179, 8, 0.15);
  --poa-badge-border: rgba(234, 179, 8, 0.45);
  --poa-badge-text: #fde047;

  --filter-chip-bg: rgba(239, 68, 68, 0.14);
  --filter-chip-border: rgba(239, 68, 68, 0.35);
  --filter-chip-text: #fca5a5;

  --tab-active-bg: #ef4444;
  --tab-active-text: #ffffff;
  --tab-inactive-text: #64748b;
  --tab-inactive-hover: #ffffff;

  --skeleton-base: #111822;
  --skeleton-shimmer: #1e293b;

  --theme-toggle-bg: rgba(255, 255, 255, 0.08);
  --theme-toggle-border: rgba(255, 255, 255, 0.15);
  --theme-toggle-color: #ffffff;
  --theme-toggle-hover-bg: rgba(255, 255, 255, 0.15);

  /* Typography & Layout - Sharp Motorsport Geometry */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 9999px;
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.6);
  --shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(239, 68, 68, 0.45);
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light Theme Tokens Override (Overriding ONLY tokens under :root[data-theme="light"]) */
:root[data-theme="light"] {
  --bg-main: #f8fafc;
  --bg-header: rgba(255, 255, 255, 0.95);
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --bg-surface: #f1f5f9;
  --bg-surface-elevated: #e2e8f0;
  --bg-input: #ffffff;
  --bg-card-media: #f1f5f9;
  --bg-gallery: #070b12; /* Dark backdrop maintained for vehicle gallery photos */
  --bg-backdrop: rgba(15, 23, 42, 0.65);
  --bg-notice-strip: #f1f5f9;
  --bg-footer: #f1f5f9;

  --border-subtle: #e2e8f0;
  --border-card: #cbd5e1;
  --border-input: #cbd5e1;
  --border-focus: #dc2626;
  --border-accent: #dc2626;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-inverse: #ffffff;
  --brand-title-color: #0f172a;

  --accent-primary: #dc2626;
  --accent-primary-hover: #b91c1c;
  --accent-cyan: #0284c7;

  /* Card & Modal Contrast Tokens - High Contrast WCAG AAA */
  --price-color: #0f172a;
  --year-chip-bg: #f0f9ff;
  --year-chip-text: #0369a1;
  --year-chip-border: #bae6fd;

  --badge-retail-bg: #ecfdf5;
  --badge-retail-text: #065f46;
  --badge-retail-border: #a7f3d0;

  --badge-trade-bg: #f0f9ff;
  --badge-trade-text: #0369a1;
  --badge-trade-border: #bae6fd;

  --status-available-bg: #ecfdf5;
  --status-available-border: #a7f3d0;
  --status-available-text: #065f46;

  --status-arriving-bg: #fffbeb;
  --status-arriving-border: #fde68a;
  --status-arriving-text: #b45309;

  --status-reserved-bg: #eef2ff;
  --status-reserved-border: #c7d2fe;
  --status-reserved-text: #4338ca;

  --badge-preorder-bg: #fef2f2;
  --badge-preorder-border: #fecaca;
  --badge-preorder-text: #b91c1c;

  --badge-reserved-bg: #eef2ff;
  --badge-reserved-border: #c7d2fe;
  --badge-reserved-text: #4338ca;

  --status-sold-bg: #f1f5f9;
  --status-sold-border: #cbd5e1;
  --status-sold-text: #475569;

  --poa-badge-bg: #fef3c7;
  --poa-badge-border: #fcd34d;
  --poa-badge-text: #92400e;

  --filter-chip-bg: #fef2f2;
  --filter-chip-border: #fecaca;
  --filter-chip-text: #b91c1c;

  --tab-active-bg: #dc2626;
  --tab-active-text: #ffffff;
  --tab-inactive-text: #64748b;
  --tab-inactive-hover: #0f172a;

  --shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(220, 38, 38, 0.4);

  --skeleton-base: #e2e8f0;
  --skeleton-shimmer: #cbd5e1;

  --theme-toggle-bg: #f1f5f9;
  --theme-toggle-border: #cbd5e1;
  --theme-toggle-color: #0f172a;
  --theme-toggle-hover-bg: #e2e8f0;

  --shadow-card: 0 4px 16px -2px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 12px 28px -4px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(37, 99, 235, 0.2);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-main: #f8fafc;
    --bg-header: rgba(255, 255, 255, 0.95);
    --bg-card: #ffffff;
    --bg-card-hover: #f1f5f9;
    --bg-surface: #f1f5f9;
    --bg-surface-elevated: #e2e8f0;
    --bg-input: #ffffff;
    --bg-card-media: #f1f5f9;
    --bg-gallery: #070b12;
    --bg-backdrop: rgba(15, 23, 42, 0.65);
    --bg-notice-strip: #f1f5f9;
    --bg-footer: #f1f5f9;

    --border-subtle: #e2e8f0;
    --border-card: #cbd5e1;
    --border-input: #cbd5e1;
    --border-focus: #2563eb;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-inverse: #ffffff;
    --brand-title-color: #0f172a;

    /* Card & Modal Contrast Tokens - High Contrast WCAG AAA */
    --price-color: #0f172a;
    --year-chip-bg: #eff6ff;
    --year-chip-text: #1d4ed8;
    --year-chip-border: #bfdbfe;

    --badge-retail-bg: #ecfdf5;
    --badge-retail-text: #065f46;
    --badge-retail-border: #a7f3d0;

    --badge-trade-bg: #f0f9ff;
    --badge-trade-text: #0369a1;
    --badge-trade-border: #bae6fd;

    --status-available-bg: #ecfdf5;
    --status-available-border: #a7f3d0;
    --status-available-text: #065f46;

    --status-arriving-bg: #fffbeb;
    --status-arriving-border: #fde68a;
    --status-arriving-text: #b45309;

    --status-reserved-bg: #eef2ff;
    --status-reserved-border: #c7d2fe;
    --status-reserved-text: #4338ca;

    --badge-preorder-bg: #fffbeb;
    --badge-preorder-border: #fde68a;
    --badge-preorder-text: #b45309;

    --badge-reserved-bg: #eef2ff;
    --badge-reserved-border: #c7d2fe;
    --badge-reserved-text: #4338ca;

    --status-sold-bg: #f1f5f9;
    --status-sold-border: #cbd5e1;
    --status-sold-text: #475569;

    --poa-badge-bg: #fef3c7;
    --poa-badge-border: #fcd34d;
    --poa-badge-text: #92400e;

    --filter-chip-bg: #eff6ff;
    --filter-chip-border: #bfdbfe;
    --filter-chip-text: #1d4ed8;

    --tab-active-bg: #2563eb;
    --tab-active-text: #ffffff;
    --tab-inactive-text: #64748b;
    --tab-inactive-hover: #0f172a;

    --skeleton-base: #e2e8f0;
    --skeleton-shimmer: #cbd5e1;

    --theme-toggle-bg: #f1f5f9;
    --theme-toggle-border: #cbd5e1;
    --theme-toggle-color: #0f172a;
    --theme-toggle-hover-bg: #e2e8f0;

    --shadow-card: 0 4px 16px -2px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 12px 28px -4px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(37, 99, 235, 0.2);
  }
}

/* Base resets */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-main);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Site Header */
.site-header {
  background: var(--bg-header);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 40;
}

.header-container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand-block,
.brand-group {
  display: flex;
  align-items: center;
}

.brand-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
}

.brand-logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo-plate {
  height: 38px;
  width: auto;
  border-radius: 4px;
  display: block;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.brand-text-block,
.brand-text {
  display: flex;
  flex-direction: column;
}

/* Primary Brand Identity: Decal / Vinyl Mark */
.brand-text-block.decal-style {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1;
}

.decal-brand-row {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.decal-fairbridge {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-family: var(--font-sans);
  text-transform: uppercase;
  line-height: 1;
}

.decal-slash {
  color: var(--accent-primary);
  font-weight: 900;
  font-size: 1.45rem;
  transform: skewX(-14deg);
  display: inline-block;
  line-height: 1;
}

.decal-motors {
  color: var(--accent-primary);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 3px;
  margin-bottom: 3px;
}

.brand-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0;
}

.brand-subtitle {
  font-size: 0.725rem;
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Performance Forecourt - Site Hero Section */
.site-hero {
  background: radial-gradient(circle at 50% 0%, rgba(239, 68, 68, 0.08) 0%, var(--bg-main) 70%), var(--bg-main);
  border-bottom: 1px solid var(--border-subtle);
  padding: 64px 20px 48px;
  text-align: center;
  position: relative;
}

.hero-container {
  max-width: 900px;
  margin: 0 auto;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.hero-eyebrow {
  font-size: 0.8125rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-primary);
}

.hero-headline {
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.15;
  text-transform: uppercase;
}

.hero-subtext {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 720px;
  margin: 0;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-btn {
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all var(--transition-fast);
}

.btn-primary {
  background: var(--accent-primary);
  color: #ffffff;
  border: 1px solid var(--accent-primary);
}

.btn-primary:hover {
  background: var(--accent-primary-hover);
  border-color: var(--accent-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-card);
}

.btn-outline:hover {
  border-color: var(--border-focus);
  color: var(--text-primary);
  transform: translateY(-2px);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 🔴 DEALER LOGIN — the public site's only route to the trade portal.
   Styled from the same custom properties as the theme toggle beside it, so it
   follows the light/dark switch with no second palette to keep in step.
   Deliberately quiet: it is for trade buyers, and a consumer should read past
   it without being pulled out of the stock list. */
.dealer-login-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  background: var(--theme-toggle-bg);
  border: 1px solid var(--theme-toggle-border);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--transition-fast);
}
.dealer-login-link:hover,
.dealer-login-link:focus-visible {
  color: var(--text-primary);
  border-color: var(--border-accent);
}
/* The label goes at phone width; the padlock keeps the control findable without
   competing with the brand for the top line. */
@media (max-width: 560px) {
  .dealer-login-link { padding: 0 10px; }
  .dealer-login-link span { display: none; }
}

.theme-toggle-btn {
  background: var(--theme-toggle-bg);
  border: 1px solid var(--theme-toggle-border);
  color: var(--theme-toggle-color);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  background: var(--theme-toggle-hover-bg);
  transform: translateY(-1px);
}

:root[data-theme="light"] .theme-icon-sun {
  display: none;
}
:root[data-theme="light"] .theme-icon-moon {
  display: block;
}

:root:not([data-theme="light"]) .theme-icon-sun {
  display: block;
}
:root:not([data-theme="light"]) .theme-icon-moon {
  display: none;
}

.header-status-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stock-counter-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.feed-freshness-tag,
.feed-timestamp {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Trade notice strip */
.trade-notice-strip {
  background: var(--bg-notice-strip);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 7px 20px;
}

.trade-notice-inner {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge-trade {
  background: #3b82f6;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 4px;
}

/* Main Layout - 2 Column Grid (Left Rail Filters + Content) */
.main-layout {
  flex: 1;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px 48px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: start;
}

/* LEFT RAIL: Filters Sidebar */
.filter-sidebar {
  position: sticky;
  top: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
}

.sidebar-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}

.sidebar-title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.sidebar-close-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}

.sidebar-close-btn:hover {
  color: var(--text-primary);
}

/* Quick Search Box inside Sidebar */
.sidebar-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.sidebar-search-box .search-icon {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.sidebar-search-box input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 9px 30px 9px 32px;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

.sidebar-search-box input:focus {
  outline: none;
  border-color: var(--border-focus);
}

.clear-search-btn {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.15rem;
  cursor: pointer;
  line-height: 1;
}

.clear-search-btn:hover {
  color: var(--text-primary);
}

/* Filters List down Left Rail (8 in order) */
.sidebar-filters-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.sidebar-filters-list .control-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.control-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-select {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 30px 8px 10px;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  transition: border-color var(--transition-fast);
}

.form-select:focus {
  outline: none;
  border-color: var(--border-focus);
}

.sidebar-footer {
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
}

.sidebar-footer .reset-btn {
  width: 100%;
}

/* RIGHT CONTENT AREA */
.content-area {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* Top Sub-Header Bar: Tabs & Controls */
.content-top-bar {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-card);
}

/* Controls in Top Bar */
.top-bar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
}

.sort-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stock-count-indicator {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}

.btn-outline {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.btn-outline:hover {
  background: var(--bg-card-hover);
  border-color: var(--text-muted);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  color: #ef4444;
}

.btn-primary {
  background: var(--accent-primary);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35);
}

.btn-primary:hover {
  background: var(--accent-primary-hover);
}
.btn-whatsapp {
  background: #25D366;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover {
  background: #1eb956;
  color: #ffffff;
  transform: translateY(-1px);
}


.filter-toggle-btn {
  display: none;
}

.active-filter-indicator {
  background: var(--accent-primary);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  padding: 1px 6px;
}

/* Active Filter Chips */
.active-chips-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.filter-chip {
  background: var(--filter-chip-bg);
  border: 1px solid var(--filter-chip-border);
  color: var(--filter-chip-text);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 3px 8px 3px 10px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chip-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

/* Stock Grid */
.stock-grid {
  display: grid;
  /* 🔴 THE COLUMN COUNT IS DECLARED, NOT INFERRED. Ad, 2026-09-15:
     "car should be 4 instead of 5".

     This is the third number this grid has had, and the first two were both
     ACCIDENTS. `minmax(310px, 1fr)` produced three because 1050 / 310 floors
     to three — nobody chose three. `minmax(195px, 1fr)` produced five on his
     screen, but on a 1920px monitor the same rule fits SIX, so "five" was
     never a property of the page, only of the window it was measured in.

     An explicit count cannot drift. Four means four on every desktop width,
     and the breakpoints below step it down deliberately. It also fixes the
     card size Ad flagged in the same message: at four across the card is
     ~250px wide instead of ~195px, which is what the type inside it was
     designed for. */
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Vehicle Card */
.vehicle-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  cursor: pointer;
  position: relative;
}

.vehicle-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-accent);
}

.card-media {
  position: relative;
  width: 100%;
  /* 🔴 4:3 BECAUSE EVERY PHOTOGRAPH IS 4:3. Ad, 2026-09-15: "the hero
     shots also sometimes cut out unevenly they should look symmetrical".

     MEASURED, not guessed. All 19 hero thumbnails on the live site are
     800x600 — ratio 1.333, without exception. The box was 16:10 (1.600), so
     `object-fit: cover` was throwing away 16.7% of the height of every single
     hero, 8.3% off the top and 8.3% off the bottom.

     Geometrically that crop is symmetric. What is NOT symmetric is where it
     lands: the editor composes each shot with the FAIRBRIDGE backdrop sign
     near the top, and the sign sits at a slightly different height in each
     frame because the photographer stood in a slightly different place. So
     the same even crop clips the sign on one car, leaves sky above it on the
     next, and the row reads as ragged. Rendering the 12 live heroes at both
     ratios side by side shows it plainly.

     Matching the box to the source removes the crop entirely, so every card
     shows exactly the frame the editor composed. That is the most symmetrical
     result available and it costs one number. */
  aspect-ratio: 4 / 3;
  background: var(--bg-card-media);
  overflow: hidden;
}

@supports not (aspect-ratio: 4 / 3) {
  .card-media {
    padding-top: 75%; /* 4:3 fallback */
  }
}

.card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

.vehicle-card:hover .card-img {
  transform: scale(1.04);
}

/* 🔴 Deal badges live ON THE PHOTO, not in the header row.

   They used to sit in `.card-tags-group` beside the year chip, sharing one
   flex line with the price. "Pre-Order & Save" is fifteen characters; in a
   195px card it wrapped, the header row grew to two lines, and that card
   stood taller than the four beside it — visible in Ad's 2026-09-15
   screenshot as two elevated cards in an otherwise even row.

   On the media they cost the header row nothing, so every card's header is
   exactly one line whatever badges the car carries, and the badge is more
   prominent than it was. `card-badge-overlay` stacks them bottom-left, clear
   of the share button (top-right) and the photo count (bottom-right). */
.card-badge-overlay {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  z-index: 2;
  pointer-events: none;
}

.card-badge-overlay .badge-preorder,
.card-badge-overlay .badge-booked {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* 🔴 The windscreen-tag number, on the card. Ad, 2026-09-15: "stock id ref
   should be shown in the main page so we can also easily search for the car".

   `stockRef` (UK<container>/<last four of the VIN>) has been in the feed on
   all 70 cars since 2026-09-14 and was only ever rendered inside the detail
   modal, so the one identifier that is physically printed on the car could
   not be read off the grid. Mono, because it is a code and it gets read
   character by character against a windscreen. */
.card-stock-ref {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
  background: var(--year-chip-bg);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  white-space: nowrap;
}

/* Status Badge on Media */
.card-status-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.status-available {
  background: var(--status-available-bg);
  border: 1px solid var(--status-available-border);
  color: var(--status-available-text);
}

.status-arriving {
  background: var(--status-arriving-bg);
  border: 1px solid var(--status-arriving-border);
  color: var(--status-arriving-text);
}

.status-reserved {
  background: var(--status-reserved-bg);
  border: 1px solid var(--status-reserved-border);
  color: var(--status-reserved-text);
}

.status-sold {
  background: var(--status-sold-bg);
  border: 1px solid var(--status-sold-border);
  color: var(--status-sold-text);
}

.card-photo-count {
  position: absolute;
  bottom: 8px;
  right: 10px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #e2e8f0;
}

/* Card Content */
.card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}

.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.vehicle-year-chip {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--year-chip-text);
  background: var(--year-chip-bg);
  border: 1px solid var(--year-chip-border);
  padding: 2px 6px;
  border-radius: 4px;
}

.vehicle-price-display {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--price-color);
  font-family: var(--font-mono);
}

.price-poa {
  background: var(--poa-badge-bg);
  border: 1px solid var(--poa-badge-border);
  color: var(--poa-badge-text);
  font-size: 0.85rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.6px;
}

.vehicle-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  /* Two lines, always. "FIAT 500A" needs one and "VOLKSWAGEN GOLF CAB" needs
     two, and without a fixed box that one-line difference cascaded down the
     card and knocked the spec row and the button out of line with the card
     beside it. Reserving the second line costs 23px of white space and buys
     an aligned row. Long names are clamped rather than pushing a third. */
  min-height: calc(2 * 1.3em);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vehicle-variant {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Quick Specs Row */
.card-specs-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
  margin-top: auto;
}

.card-spec-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-spec-item strong {
  color: var(--text-secondary);
}

.card-footer-btn {
  /* 🔴 `auto`, not 8px. The grid already stretches every card in a row to
     the same height, so the cards were never the problem — the CONTENTS were
     top-packed and the button floated up under whatever text happened to be
     above it. A one-line title left the button an inch higher than its
     neighbour's, which is the "card sizes look off" Ad reported on
     2026-09-15. `margin-top: auto` pushes it to the floor of the card, so
     every button in a row lands on the same line whatever is above it. */
  margin-top: auto;
  width: 100%;
  padding: 8px;
  font-size: 0.82rem;
}

/* Skeletons */
.skeleton-card {
  pointer-events: none;
  min-height: 320px;
}

.skeleton-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shimmer) 50%, var(--skeleton-base) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@supports not (aspect-ratio: 16 / 10) {
  .skeleton-img {
    padding-top: 62.5%;
  }
}

.skeleton-text {
  height: 18px;
  margin: 16px 16px 8px;
  background: var(--skeleton-base);
  border-radius: 4px;
}

.skeleton-text.short {
  width: 50%;
  height: 14px;
  margin-top: 0;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* State Cards (Empty / Error) */
.state-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 560px;
  margin: 40px auto;
}

.state-icon {
  font-size: 2.5rem;
}

.state-card h3 {
  font-size: 1.25rem;
  color: var(--text-primary);
}

.state-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  max-width: 440px;
}

.error-card {
  border-color: rgba(239, 68, 68, 0.4);
}

/* Modal Window */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(5, 8, 15, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

.modal-dialog {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 980px;
  max-height: 92vh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  animation: modalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 30;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal-close-btn:hover {
  background: #ef4444;
  border-color: #ef4444;
}

.modal-scrollable,
.modal-content-grid {
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  max-height: 92vh;
}

.modal-content-grid > * {
  min-width: 0;
}

/* Modal Gallery & Lightbox */
.modal-gallery,
.modal-gallery-panel {
  background: var(--bg-gallery);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-subtle);
  position: relative;
  min-width: 0;
  min-height: 0;
}

.main-photo-wrapper,
.main-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 0;
  height: 100%;
  max-height: 70vh;
  background: var(--bg-gallery);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
}

@supports not (aspect-ratio: 4 / 3) {
  .main-photo-wrapper,
  .main-photo-wrap {
    min-height: 320px;
  }
}

.modal-main-img,
#modalMainPhoto {
  width: 100%;
  height: 100%;
  max-height: 70vh;
  object-fit: contain;
  object-position: center;
  display: block;
}

.modal-status-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.gallery-nav-btn:hover {
  background: rgba(37, 99, 235, 0.9);
}

.prev-btn { left: 12px; }
.next-btn { right: 12px; }

.photo-counter {
  position: absolute;
  bottom: 12px;
  right: 14px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  padding: 3px 8px;
  border-radius: 4px;
}

.thumbnail-strip {
  display: flex;
  gap: 8px;
  padding: 12px;
  overflow-x: auto;
  border-top: 1px solid var(--border-subtle);
  min-width: 0;
  /* 🔴 Tell the browser this strip pans horizontally and nothing else. It then
     takes the gesture over immediately instead of waiting to see whether the
     finger meant to tap, which is what makes pointercancel fire reliably and
     stops a swipe ending as a click on a thumbnail (app.js, TAP_SLOP_PX). */
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.thumb-img {
  width: 70px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}

.thumb-img:hover {
  opacity: 0.9;
}

.thumb-img.active {
  opacity: 1;
  border-color: #38bdf8;
}

/* Modal Info Panel */
.modal-info-panel {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--bg-card);
  min-width: 0;
}

.modal-header-block {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 16px;
}

.modal-year-tag {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--year-chip-text);
}

.modal-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.modal-variant {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* The car's own page (car.php), public site only. A real link, so a visitor
   can open it in a new tab, bookmark it or copy it. */
.modal-permalink {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-primary);
  text-decoration: none;
}
.modal-permalink:hover,
.modal-permalink:focus-visible {
  color: var(--accent-primary-hover);
  text-decoration: underline;
}
/* `display` above would otherwise beat the hidden attribute, and the link
   would show on the dealer portal, where car.php does not exist. */
.modal-permalink[hidden] {
  display: none;
}

.modal-price-wrap {
  text-align: right;
}

.price-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.modal-price {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--price-color);
}

/* Spec Grid in Modal */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
}

.spec-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.spec-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
}

.spec-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.stock-code {
  font-family: var(--font-mono);
  color: #94a3b8;
}

.modal-action-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.modal-action-bar .btn {
  font-size: 0.82rem;
  padding: 9px 12px;
  width: 100%;
}

.share-btn {
  flex: 1;
  font-size: 0.82rem;
  padding: 8px 12px;
}

/* Enquiry Form Card */
.enquiry-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.enquiry-card-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.enquiry-card-header p {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.feedback-banner {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
}

.feedback-success {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
}

.feedback-error {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.enquiry-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hp-field {
  display: none !important;
  position: absolute;
  left: -9999px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.required {
  color: #ef4444;
}

.form-control {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--border-focus);
}

textarea.form-control {
  resize: vertical;
  min-height: 60px;
}

.submit-enquiry-btn {
  width: 100%;
  padding: 10px;
  font-size: 0.9rem;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-footer);
  padding: 24px 20px;
  margin-top: auto;
}

.footer-container {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.footer-brand strong {
  color: var(--text-secondary);
}

.footer-loc {
  font-size: 0.74rem;
  margin-top: 2px;
}

.footer-disclaimer {
  max-width: 500px;
  text-align: right;
  font-size: 0.74rem;
}

/* Responsive Styles */
@media (min-width: 961px) {
  .filter-toggle-btn {
    display: none !important;
  }
  .sidebar-backdrop {
    display: none !important;
  }
}

@media (max-width: 960px) {
  .main-layout {
    grid-template-columns: 1fr;
    padding: 16px 14px 40px;
    gap: 16px;
  }

  /* The sidebar becomes a drawer here, so the grid gets the full width back
     and three cards is the right density for a tablet. Declared, like the
     desktop count — see .stock-grid. */
  .stock-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  /* Small tablet / landscape phone. A RANGE, deliberately: the max-width:640px
     rule that collapses to a single column sits further down the file, so a
     bare `max-width: 768px` here would out-order it and give phones two
     columns. */
  .stock-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 960px) {

  .filter-toggle-btn {
    display: inline-flex;
  }

  /* Left rail converts to slide-out drawer */
  .filter-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 86vw;
    max-height: 100vh;
    border-radius: 0;
    border-top: none;
    border-bottom: none;
    border-left: none;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.7);
  }

  .filter-sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar-close-btn {
    display: block;
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(3px);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }

  .sidebar-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .content-top-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .status-tabs {
    width: 100%;
    justify-content: stretch;
  }

  .status-tabs .tab-btn {
    flex: 1;
    justify-content: center;
  }

  .top-bar-controls {
    justify-content: space-between;
    width: 100%;
  }

  .modal-scrollable,
  .modal-content-grid {
    grid-template-columns: 1fr;
  }

  .modal-gallery,
  .modal-gallery-panel {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }

  .footer-disclaimer {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .header-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .header-status-group {
    width: 100%;
    justify-content: space-between;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .stock-grid {
    grid-template-columns: 1fr;
  }

  .controls-card {
    padding: 12px;
  }

  .search-box {
    width: 100%;
  }

  .sort-group {
    width: 100%;
  }

  .sort-group .form-select {
    flex: 1;
  }

  .modal-dialog {
    max-height: 96vh;
    border-radius: var(--radius-md);
  }

  .modal-info-panel {
    padding: 16px;
  }
}


.card-share-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 5;
}

.card-share-btn:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  transform: scale(1.1);
  color: #ffffff;
}

.card-share-btn svg {
  width: 15px;
  height: 15px;
}


.gallery-action-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 5;
}

.gallery-action-btn:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}


@media print {
  @page {
    margin: 1.2cm;
    size: A4 portrait;
  }

  body {
    background: #ffffff !important;
    color: #111827 !important;
    font-size: 11pt !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  }

  .site-header,
  .trade-notice-strip,
  .controls-card,
  .stock-container,
  .site-footer,
  .modal-close-btn,
  .gallery-nav-btn,
  .thumbnail-strip,
  .gallery-action-btn,
  .photo-counter,
  .modal-action-bar,
  .enquiry-card,
  .active-chips-bar,
  .card-share-btn,
  .filter-toggle-btn {
    display: none !important;
  }

  .modal-overlay {
    position: static !important;
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .modal-dialog {
    max-width: 100% !important;
    max-height: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .modal-scrollable {
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
  }

  .modal-gallery {
    border: none !important;
    background: transparent !important;
    margin-bottom: 20px !important;
  }

  .main-photo-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 320px !important;
    padding-top: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #d1d5db !important;
    background: #f3f4f6 !important;
  }

  .modal-main-img {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .modal-info-panel {
    background: transparent !important;
    padding: 0 !important;
    gap: 16px !important;
  }

  .modal-header-block {
    border-bottom: 2px solid #111827 !important;
    padding-bottom: 12px !important;
  }

  .modal-year-tag {
    color: #1d4ed8 !important;
    font-size: 11pt !important;
  }

  .modal-title {
    color: #111827 !important;
    font-size: 20pt !important;
    font-weight: 800 !important;
    -webkit-text-fill-color: initial !important;
  }

  .modal-variant {
    color: #4b5563 !important;
    font-size: 12pt !important;
  }

  .price-label {
    color: #6b7280 !important;
    font-size: 8pt !important;
  }

  .modal-price {
    color: #111827 !important;
    font-size: 20pt !important;
    font-weight: 800 !important;
  }

  .price-poa {
    color: #92400e !important;
    background: #fef3c7 !important;
    border-color: #f59e0b !important;
  }

  .spec-grid {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    padding: 16px !important;
  }

  .spec-label {
    color: #6b7280 !important;
    font-size: 8pt !important;
  }

  .spec-value {
    color: #111827 !important;
    font-size: 11pt !important;
    font-weight: 700 !important;
  }

  .stock-code {
    color: #374151 !important;
  }
}

/* Sell Status Tags (Retail vs Trade) */
.card-tags-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-tags-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.badge-sell-status {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge-sell-status.retail {
  background: var(--badge-retail-bg);
  color: var(--badge-retail-text);
  border: 1px solid var(--badge-retail-border);
}

.badge-sell-status.trade {
  background: var(--badge-trade-bg);
  color: var(--badge-trade-text);
  border: 1px solid var(--badge-trade-border);
}

/* Fullscreen Lightbox Overlay */
.photo-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(5, 8, 15, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  cursor: zoom-out;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.photo-lightbox-overlay[hidden] {
  display: none !important;
}

.lightbox-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(16px, env(safe-area-inset-top, 16px)) max(20px, env(safe-area-inset-right, 20px)) 12px max(20px, env(safe-area-inset-left, 20px));
  z-index: 220;
  pointer-events: none;
}

.lightbox-counter {
  pointer-events: auto;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  padding: 6px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.lightbox-close-btn {
  pointer-events: auto;
  position: relative;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.lightbox-close-btn:hover,
.lightbox-close-btn:focus-visible {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
  transform: scale(1.06);
}

.lightbox-close-btn:active {
  transform: scale(0.95);
}

.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 2.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 215;
  transition: all var(--transition-fast);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.lightbox-nav-btn:hover,
.lightbox-nav-btn:focus-visible {
  background: var(--color-primary, #dc2626);
  border-color: var(--color-primary, #dc2626);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}

.lightbox-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.lightbox-nav-btn[hidden] {
  display: none !important;
}

.lightbox-prev-btn {
  left: max(16px, env(safe-area-inset-left, 16px));
}

.lightbox-next-btn {
  right: max(16px, env(safe-area-inset-right, 16px));
}

.lightbox-img-wrap {
  max-width: 94vw;
  max-height: 84vh;
  min-width: 280px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 205;
  cursor: zoom-out;
}

.lightbox-img {
  max-width: 92vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: var(--radius-sm);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9);
  cursor: default;
  transition: opacity 0.15s ease;
}

.lightbox-hint {
  position: absolute;
  bottom: max(12px, env(safe-area-inset-bottom, 12px));
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  text-align: center;
  letter-spacing: 0.03em;
  z-index: 210;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .lightbox-close-btn {
    width: 44px;
    height: 44px;
    font-size: 1.8rem;
  }
  .lightbox-nav-btn {
    width: 44px;
    height: 44px;
    font-size: 2rem;
  }
  .lightbox-prev-btn {
    left: max(8px, env(safe-area-inset-left, 8px));
  }
  .lightbox-next-btn {
    right: max(8px, env(safe-area-inset-right, 8px));
  }
  .lightbox-img-wrap {
    max-width: 98vw;
    max-height: 80vh;
  }
  .lightbox-img {
    max-width: 96vw;
    max-height: 78vh;
  }
  .lightbox-hint {
    font-size: 0.7rem;
    padding: 0 10px;
    white-space: normal;
  }
}

/* -------------------------------------------------------------
   ROUND 7: CONSUMER HOMEPAGE & PRE-ORDER EXTENSIONS
   ------------------------------------------------------------- */

/* Pre-order & Reserved Badges */
.badge-preorder {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--badge-preorder-bg);
  color: var(--badge-preorder-text);
  border: 1px solid var(--badge-preorder-border);
}

.badge-reserved,
.badge-booked {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--badge-reserved-bg);
  color: var(--badge-reserved-text);
  border: 1px solid var(--badge-reserved-border);
}

.vehicle-card.is-reserved,
.vehicle-card.is-booked {
  opacity: 0.9;
}

.dealer-trade-price {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--badge-trade-text);
  margin-top: 3px;
}

.modal-dealer-trade-block {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}

.dealer-trade-label {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.dealer-trade-value {
  color: var(--badge-trade-text);
  font-weight: 800;
  font-size: 1.15rem;
}

/* Card Pre-Order Pricing */
.card-preorder-price-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.preorder-headline-price {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--price-color);
  letter-spacing: -0.3px;
}

.preorder-strikethrough-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
}

.price-strikethrough {
  text-decoration: line-through;
  color: var(--text-muted);
}

.price-saving-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

/* Modal Pre-Order & Reserved */
.modal-preorder-price-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.modal-preorder-headline {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--price-color);
}

.modal-preorder-subline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 0.85rem;
}

.modal-preorder-banner,
.modal-reserved-banner,
.modal-booked-banner {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.45;
  margin-top: 12px;
}

.modal-preorder-banner {
  background: var(--badge-preorder-bg);
  border: 1px solid var(--badge-preorder-border);
  color: var(--badge-preorder-text);
}

.modal-reserved-banner,
.modal-booked-banner {
  background: var(--status-reserved-bg);
  border: 1px solid var(--status-reserved-border);
  color: var(--status-reserved-text);
}

.modal-preorder-banner .banner-inner,
.modal-reserved-banner .banner-inner,
.modal-booked-banner .banner-inner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Consumer Hero */
.site-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  padding: 48px 24px;
}

/* Subtle fleet background from real Fairbridge inventory (Round 11 / NOW.md §2) */
.site-hero.has-fleet-bg::before {
  content: '';
  position: absolute;
  top: -24px;
  left: -24px;
  right: -24px;
  bottom: -24px;
  background-image: var(--hero-fleet-bg);
  background-size: cover;
  background-position: right 20% center;
  background-repeat: no-repeat;
  filter: blur(14px) saturate(1.15);
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
  transform: translateZ(0);
}

/* Directional scrim: opaque solid surface behind text on the left, soft fade on the right */
.site-hero.has-fleet-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(90deg, var(--bg-surface) 0%, rgba(17, 23, 38, 0.88) 45%, rgba(17, 23, 38, 0.65) 100%);
}

[data-theme="light"] .site-hero.has-fleet-bg::before {
  opacity: 0.08;
  filter: blur(16px) saturate(1.05) contrast(0.95);
}

[data-theme="light"] .site-hero.has-fleet-bg::after {
  background: linear-gradient(90deg, var(--bg-surface) 0%, rgba(241, 245, 249, 0.92) 48%, rgba(241, 245, 249, 0.76) 100%);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-hero.has-fleet-bg::before {
    opacity: 0.08;
    filter: blur(16px) saturate(1.05) contrast(0.95);
  }
  :root:not([data-theme="dark"]) .site-hero.has-fleet-bg::after {
    background: linear-gradient(90deg, var(--bg-surface) 0%, rgba(241, 245, 249, 0.92) 48%, rgba(241, 245, 249, 0.76) 100%);
  }
}

.hero-container {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
}

.hero-content {
  max-width: 780px;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-cyan);
  margin-bottom: 12px;
}

.hero-headline {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0 0 16px 0;
  letter-spacing: -0.5px;
}

.hero-subtext {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 24px 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 0.94rem;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

/* Pre-Order & Save Section */
.preorder-section {
  background: var(--bg-main);
  border-bottom: 1px solid var(--border-subtle);
  padding: 40px 24px;
}

.preorder-container {
  max-width: 1280px;
  margin: 0 auto;
}

.preorder-header {
  margin-bottom: 24px;
}

.badge-preorder-header {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--badge-preorder-bg);
  color: var(--badge-preorder-text);
  border: 1px solid var(--badge-preorder-border);
  margin-bottom: 8px;
}

.preorder-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.preorder-desc {
  font-size: 0.94rem;
  color: var(--text-secondary);
  max-width: 680px;
  margin: 0;
  line-height: 1.5;
}

.preorder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* Info Sections (Why Japanese Imports & Contact) */
.info-section {
  border-top: 1px solid var(--border-subtle);
  padding: 56px 24px;
  background: var(--bg-surface);
}

/* Why Japanese Imports Fleet Background */
.why-japanese-section {
  position: relative;
  overflow: hidden;
}

.why-japanese-section.has-fleet-bg::before {
  content: '';
  position: absolute;
  top: -24px;
  left: -24px;
  right: -24px;
  bottom: -24px;
  background-image: var(--section-fleet-bg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(18px) saturate(1.1);
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
  transform: translateZ(0);
}

.why-japanese-section.has-fleet-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle at center, rgba(17, 23, 38, 0.75) 0%, var(--bg-surface) 100%);
}

[data-theme="light"] .why-japanese-section.has-fleet-bg::before {
  opacity: 0.06;
  filter: blur(18px) saturate(1.0);
}

[data-theme="light"] .why-japanese-section.has-fleet-bg::after {
  background: radial-gradient(circle at center, rgba(241, 245, 249, 0.88) 0%, var(--bg-surface) 100%);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .why-japanese-section.has-fleet-bg::before {
    opacity: 0.06;
    filter: blur(18px) saturate(1.0);
  }
  :root:not([data-theme="dark"]) .why-japanese-section.has-fleet-bg::after {
    background: radial-gradient(circle at center, rgba(241, 245, 249, 0.88) 0%, var(--bg-surface) 100%);
  }
}

.why-japanese-section .info-container {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .site-hero.has-fleet-bg::before,
  .why-japanese-section.has-fleet-bg::before {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

.info-container {
  max-width: 1280px;
  margin: 0 auto;
}

.info-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px auto;
}

.info-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 10px 0;
}

.info-subtitle {
  font-size: 0.94rem;
  color: var(--text-secondary);
  margin: 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.feature-card:hover {
  border-color: var(--border-focus);
}

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--year-chip-bg);
  color: var(--year-chip-text);
  border: 1px solid var(--year-chip-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.feature-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

/* Contact Section */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: start;
}

.contact-info-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.contact-details-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-detail-row {
  display: flex;
  gap: 8px;
  font-size: 0.94rem;
}

.detail-label {
  font-weight: 700;
  color: var(--text-primary);
}

.detail-value {
  color: var(--text-secondary);
}

.general-contact-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: 24px;
}

@media (max-width: 768px) {

  .site-hero {
    padding: 32px 16px;
  }
  .hero-headline {
    font-size: 1.65rem;
  }
  .preorder-section {
    padding: 28px 16px;
  }
  .info-section {
    padding: 36px 16px;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* -------------------------------------------------------------
   Dealer Login Page Styles (Round 9)
   ------------------------------------------------------------- */
.login-page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-main);
  color: var(--text-primary);
}

.login-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}

.login-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  box-shadow: var(--shadow-card);
}

.login-card-header {
  text-align: center;
  margin-bottom: 28px;
}

.login-brand-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px 0;
  background: var(--brand-title-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--badge-trade-bg);
  color: var(--badge-trade-text);
  border: 1px solid var(--badge-trade-border);
  margin-bottom: 12px;
}

.login-subtitle {
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-error-banner {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  line-height: 1.4;
  text-align: center;
}

:root[data-theme="light"] .login-error-banner {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.login-submit-btn {
  width: 100%;
  padding: 13px 20px;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 6px;
}

.login-footer-note {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* -------------------------------------------------------------
   Dealer Signup Page Styles (Round 10)
   ------------------------------------------------------------- */
.signup-card {
  max-width: 580px;
}

.signup-success-card {
  text-align: center;
  padding: 32px 16px;
}

.signup-success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px auto;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signup-success-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: var(--text-primary);
}

.signup-success-msg {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 24px 0;
}