/* Showroom: light and clean, lots of white space, big rounded photos. The
   banner is pale grey with dark text and the car photo fading in on the
   right. Loaded after site.css when the dealer picks it. */
:root {
  --navy: #141b2b;
  --navy-2: #1f2838;
  --ink: #141b2b;
  --muted: #5b6474;
  --line: #e4e7ec;
  --bg: #fff;
  --soft: #f3f5f8;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(20, 27, 43, .05), 0 10px 30px rgba(20, 27, 43, .07);
}
body { font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif; }
h1, h2 { letter-spacing: -.03em; }
.btn { border-radius: 999px; padding: 12px 22px; }

/* Light top bar */
.topbar { background: var(--soft); color: var(--muted); border-bottom: 1px solid var(--line); }
.topbar a { color: var(--ink); }
.lang-toggle { color: var(--ink); background: #fff; border-color: var(--line); }
.lang-toggle:hover { background: #fff; border-color: #c9ced8; }
.site-header { border-bottom-color: transparent; box-shadow: 0 1px 0 var(--line); }

/* Banner */
.hero { background: var(--soft); color: var(--ink); padding: 88px 0 112px; }
.hero p { color: var(--muted); }
.hero h1 .accent { color: var(--red); }
.hero .hero-eyebrow { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 27, 43, .05); }
.hero-eyebrow i { background: #1f9d57; box-shadow: 0 0 0 4px rgba(31, 157, 87, .15); }
.hero-trust { color: var(--muted); }
.hero-trust li::before { color: #1f9d57; }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: #fff; border-color: #c9ced8; }
/* The photo fades into the grey, with no tint; the details sit in a white card. */
.spot-media::after { display: none; }
.spot-caption {
  color: var(--ink); background: rgba(255, 255, 255, .96); border-radius: 16px; padding: 16px 20px;
  box-shadow: 0 10px 30px rgba(20, 27, 43, .14); justify-items: start; text-align: left; bottom: 70px;
}
.spot-caption b { text-shadow: none; font-size: 20px; }
.spot-caption small { color: var(--muted); }
.spot-price { font-size: 26px; }
.spot-price s { color: var(--muted); }
.spot-go { color: var(--ink); }
.spot-card:hover .spot-go, .spot-card:focus-visible .spot-go { color: var(--red); }
.spot-card:focus-visible { outline-color: var(--ink); }
.spot-dots button { background: rgba(20, 27, 43, .22); }
.spot-dots button[aria-pressed="true"] { background: var(--ink); }

/* Cards: outlined instead of floating. */
.card { box-shadow: none; border: 1px solid var(--line); }
.card:hover { box-shadow: var(--shadow); border-color: transparent; }
.card-photo { margin: 8px 8px 0; border-radius: calc(var(--radius) - 6px); overflow: hidden; }
.why div, .panel, .filters, .empty { box-shadow: none; border: 1px solid var(--line); }
.why div { background: var(--soft); border-color: transparent; }
.why .ic { background: #fff; }
.quick div, .features li { background: var(--soft); }

/* Inventory and trade-in page headings */
.page-head { background: var(--soft); color: var(--ink); border-bottom: 1px solid var(--line); }
.page-head p { color: var(--muted); }

/* Light footer, matching the top bar. */
.site-footer { background: var(--soft); color: var(--muted); border-top: 1px solid var(--line); }
.site-footer .logo, .site-footer a { color: var(--ink); }
.fine { color: var(--muted); border-top-color: var(--line); }