/* =========================================================================
   SayarHub — public showroom
   Tailwind handles spacing/layout utilities. Everything with a point of view
   lives here.
   ========================================================================= */

/* ---------------------------------------------------------------- base -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Lenis drives scroll position; let it. */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* The HTML `hidden` attribute, made to actually mean it.
   Tailwind's preflight is off, so this base layer is the only thing that can
   supply it — and without it `hidden` is merely a suggestion. It comes from the
   BROWSER's stylesheet, and any author rule that sets `display` beats it no
   matter how weak the selector, because author origin wins over user-agent
   origin outright.
   That is not theoretical: `.lightbox { display: grid }` kept the photo viewer
   in the layout while it carried `hidden` — a full-viewport, z-index 130,
   opacity 0 sheet over the vehicle page. The page looked perfectly normal and
   nothing on it could be clicked, because every click landed on the invisible
   lightbox. `.tabpanel[hidden]` further down is the same bug, found once and
   patched for one element; this is the general form. */
[hidden] { display: none !important; }

::selection { background: var(--accent); color: #12100A; }

/* A focus ring that is visible on both the dark canvas and on photography. */
:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute; left: var(--s-4); top: -100px;
  z-index: 200;
  background: var(--accent); color: #12100A;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm); font-weight: 600;
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- type -- */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 90;
  letter-spacing: -.02em;
  line-height: 1.02;
}

.kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-bottom: var(--s-10);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: var(--s-3) 0 0;
}
.section-note { color: var(--text-secondary); font-size: 14px; margin-top: var(--s-2); }

/* Rules that stop short of the edge — a full-bleed hairline reads as a
   framework default, a tapering one reads as drawn. */
.rule-fade {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg,
    transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent);
}

/* -------------------------------------------------------------- buttons -- */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: #12100A;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 14px var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-2), var(--shadow-inset);
  transition:
    transform var(--t-fast) var(--ease-spring),
    box-shadow var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
}
.btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-3); }
.btn:active {
  transform: scale(.97);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.36), var(--shadow-1);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text-primary);
  border-color: var(--border-strong);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.2);
  box-shadow: var(--shadow-2);
}

.btn--wa {
  --btn-bg: transparent;
  --btn-fg: var(--whatsapp);
  border-color: rgba(37,211,102,.42);
  box-shadow: none;
}
.btn--wa:hover {
  background: rgba(37,211,102,.1);
  border-color: var(--whatsapp);
  color: var(--whatsapp);
}
.btn--wa-solid {
  --btn-bg: var(--whatsapp);
  --btn-fg: #06301A;
}
.btn--wa-solid:hover { background: #2ee674; }

.btn--sm { padding: 9px var(--s-4); font-size: 13px; border-radius: var(--r-sm); }
.btn--block { width: 100%; }
.btn svg { width: 17px; height: 17px; flex: none; }

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--t-slow) var(--ease-out),
    border-color var(--t-slow) var(--ease-out),
    backdrop-filter var(--t-slow) var(--ease-out),
    height var(--t-slow) var(--ease-out);
}
.nav.is-stuck {
  height: 64px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--border-hairline);
}
.nav__inner {
  width: 100%; max-width: var(--page-max);
  margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: var(--s-8);
}

.brand { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.brand__mark {
  width: 34px; height: 34px; flex: none;
  border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--accent-hover), #A8823A 70%);
  color: #12100A;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 800; letter-spacing: -.03em;
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.35);
}
/* A dealer who has uploaded a logo gets the logo, not the logo ON our gold plate.
   contain rather than cover: the mark is square and a wide logo would lose its ends
   to a crop — letterboxed and small is disappointing, cropped is wrong. The settings
   screen asks for a square image for exactly this reason. */
.brand__mark.has-logo {
  background: none;
  box-shadow: none;
  padding: 2px;
}
.brand__mark img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 700; letter-spacing: -.015em;
  position: relative;
}
/* Pen-stroke underline: an SVG squiggle that draws itself, not a solid bar. */
.brand__name::after {
  content: "";
  position: absolute; left: -2px; right: -2px; bottom: -5px; height: 6px;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4.2c22-2.6 44-3.4 66-2.2 18 1 34 2.4 52 1.1' fill='none' stroke='%23C9A24B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  clip-path: inset(0 100% 0 0);
  transition: clip-path 420ms var(--ease-out);
}
.brand:hover .brand__name::after { clip-path: inset(0 0 0 0); }
.brand__sub {
  display: block;
  font-family: var(--font-ui);
  font-size: 9.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  /* Was --text-muted (#6B7280). At 9.5px with .18em tracking that is below the
     size where a mid grey still reads on this canvas — the letters are thin and
     far apart, so there is very little ink for the eye to work with. Muted is the
     right weight for a paragraph and the wrong one for a caption this small. */
  color: var(--text-primary);
  margin-top: 1px;
}

.nav__links { display: flex; align-items: center; gap: var(--s-7, 28px); margin-inline: auto; }
.nav__link {
  position: relative;
  font-size: 13.5px; font-weight: 500;
  color: var(--text-secondary);
  padding: var(--s-2) 0;
  transition: color var(--t-base) var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-spring);
}
.nav__link:hover { color: var(--text-primary); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: var(--s-3); flex: none; }

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--border-hairline);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}
.icon-btn:hover { background: rgba(255,255,255,.08); border-color: var(--border-strong); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn--wa { color: var(--whatsapp); }

.nav__burger { display: none; }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(11,12,14,.72);
  backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}
.drawer.is-open { opacity: 1; pointer-events: auto; }
.drawer__panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(84vw, 340px);
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-4);
  padding: var(--s-6) var(--s-6) var(--s-10);
  display: flex; flex-direction: column; gap: var(--s-2);
  transform: translateX(100%);
  transition: transform var(--t-modal) var(--ease-spring);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__link {
  padding: var(--s-4) 0;
  font-size: 20px; font-family: var(--font-display); font-weight: 600;
  border-bottom: 1px solid var(--border-hairline);
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: -6% 0 -6% 0; z-index: -2; will-change: transform; }
.hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  /* Hidden until the real photograph has decoded. The hero's gradient is a
     designed backdrop in its own right, so an imageless first paint looks
     deliberate rather than broken - and nothing is shown that then changes. */
  opacity: 0;
  transition: opacity 520ms var(--ease-out);
}
.hero__img.is-ready { opacity: 1; }
/* Graduated key light: warm pool bottom-left, deep falloff top-right —
   directional, like a studio, rather than a symmetric vignette. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 18% 108%, rgba(201,162,75,.20), transparent 55%),
    radial-gradient(90% 70% at 82% -10%, rgba(0,0,0,.72), transparent 60%),
    linear-gradient(to top, rgba(11,12,14,.97) 2%, rgba(11,12,14,.72) 26%, rgba(11,12,14,.18) 60%, rgba(11,12,14,.55) 100%);
}
.hero__body {
  position: relative;
  padding-block: var(--s-24) clamp(80px, 14vh, 132px);
  max-width: 820px;
  /* Centred, because the block is now built around the showroom's name rather than
     around one car. .wrap already centres the box; this centres what is in it. */
  text-align: center;
}

/* ---- the showroom's name, the largest thing on the page ------------------ */
/* Sized ABOVE the featured car deliberately. The car used to be the display type
   here and the name appeared nowhere on the first screen at all - so a visitor
   arriving from a shared link read a model name and had to hunt the header to find
   out whose floor it was on. The car is the illustration; the name is the page. */
.hero__brand { margin-bottom: clamp(22px, 4.5vh, 46px); }
.hero__brandname {
  font-family: var(--font-display);
  font-size: clamp(38px, 7vw, 84px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.03em;
  margin: 0;
  text-wrap: balance;
}
/* The same drawn pen-stroke the header's mark carries, at hero scale. Always drawn
   rather than revealed on hover: nothing here is hovered, and the stroke is what
   makes the two lockups read as the same mark. */
.hero__brandname::after {
  content: "";
  display: block;
  height: .1em; min-height: 7px;
  margin: .16em auto 0;
  width: min(100%, 15ch);
  background: no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4.2c22-2.6 44-3.4 66-2.2 18 1 34 2.4 52 1.1' fill='none' stroke='%23C9A24B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.hero__brandsub {
  font-family: var(--font-ui);
  font-size: clamp(10px, 1.15vw, 12.5px);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--text-secondary);
  /* Letter-spacing is added AFTER the last letter too, so a centred line sits half a
     space left of true centre. The indent puts it back. */
  text-indent: .34em;
  margin: var(--s-4) 0 0;
}

.hero__kicker { margin-bottom: var(--s-4); }
/* The featured car: secondary to the name above it now, so it steps down from
   display size to a strong sub-head. Still the biggest thing after the name. */
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(25px, 3.6vw, 42px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}
.hero__title em {
  display: block;
  font-style: normal;
  font-size: .62em;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -.01em;
  margin-top: var(--s-2);
}
.hero__price {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 var(--s-8);
}
.hero__price .cur { color: var(--accent); font-size: .62em; margin-right: .4em; letter-spacing: .06em; }
.hero__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5);
  color: var(--text-secondary); font-size: 13.5px;
  margin: calc(var(--s-8) * -1) 0 var(--s-8);
  padding-top: var(--s-4);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero__meta span::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }

/* The hero is exactly one screen tall and clips what does not fit, and the name
   block is a new 90-odd pixels in it. On a short window - a phone in landscape, a
   laptop with the browser chrome showing - that is enough to push the top of the
   name out of sight, which is the one thing this change exists to prevent. So the
   spacing tightens rather than the content going missing. */
@media (max-height: 760px), (max-width: 560px) {
  .hero__body { padding-block: var(--s-12) clamp(52px, 9vh, 92px); }
  .hero__brand { margin-bottom: clamp(14px, 2.4vh, 26px); }
  .hero__brandname { font-size: clamp(32px, 8.6vw, 54px); }
  .hero__price { margin-bottom: var(--s-6); }
}

.scroll-cue {
  position: absolute; left: 50%; bottom: var(--s-6);
  transform: translateX(-50%);
  display: grid; place-items: center; gap: var(--s-2);
  color: var(--text-muted);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
}
.scroll-cue__line {
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: cue-bob 2.4s var(--ease-in-out) infinite;
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); opacity: .45; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* --------------------------------------------------------------- filters -- */

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
  margin-bottom: var(--s-8);
}
.chips {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
}
.chip {
  padding: 9px var(--s-4);
  border-radius: 10px;
  border: 1px solid var(--border-hairline);
  background: rgba(255,255,255,.02);
  color: var(--text-secondary);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: color var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}
.chip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #12100A;
  font-weight: 600;
  box-shadow: inset 0 2px 5px rgba(94,72,20,.42), 0 1px 0 rgba(255,255,255,.12);
}
.chip__n {
  font-variant-numeric: tabular-nums;
  opacity: .55; margin-left: 6px; font-size: 11.5px;
}

.select {
  appearance: none;
  padding: 10px 38px 10px var(--s-4);
  border-radius: 10px;
  border: 1px solid var(--border-hairline);
  background: rgba(255,255,255,.02)
    no-repeat right 13px center/13px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  color: var(--text-primary);
  font-size: 13px; cursor: pointer;
  transition: border-color var(--t-base) var(--ease-out);
}
.select:hover { border-color: var(--border-strong); }
.select option { background: var(--bg-surface); }

/* ------------------------------------------------------------------ grid --
   Deliberately asymmetric: the first tile is a 2-col hero card, and a
   full-width band interrupts the rhythm every six vehicles.                  */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: var(--s-6);
  /* stretch, not start. With `start` each card was only as tall as its own
     content, so one car whose name wrapped to two lines grew and the rest of the
     row stayed short — the grid stopped reading as a grid. Stretching makes every
     card in a row the height of the tallest; .card is already a flex column and
     .card__foot already has margin-top:auto, so the price still sits on the
     bottom edge of whichever card it is in. */
  align-items: stretch;
}
/* Every card is the same size, featured included. The featured one used to span
   two columns with a wider photo and a larger title, which made the grid read as
   a layout with a mistake in it rather than as a list of stock — and the car it
   was promoting already has the whole hero at the top of the page. One emphasis
   is enough; two competing ones just cost the grid its rhythm.
   .band still spans the full width: it is an interrupt, not a car. */
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .grid > .band { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

/* ----------------------------------------------------------------- card -- */

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-elevated));
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  /* --tint is set per-card from the vehicle's dominant colour, so the
     ambient shadow picks up the paint. */
  --tint: 201, 162, 75;
  transition:
    transform var(--t-base) var(--ease-spring),
    box-shadow var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out);
}
.card:hover,
.card:focus-within {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow:
    0 4px 10px rgba(0,0,0,.44),
    0 26px 56px rgba(0,0,0,.40),
    0 22px 60px -18px rgba(var(--tint), .34);
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-surface-2);
}
.card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 640ms var(--ease-out);
}
.card:hover .card__img { transform: scale(1.08); }

/* the accent hairline that wipes in beneath the photo on hover */
.card__media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(201,162,75,0));
  transform: scaleX(0); transform-origin: left;
  transition: transform 460ms var(--ease-out);
}
.card:hover .card__media::after { transform: scaleX(1); }

.card__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,12,14,.55), transparent 42%);
  pointer-events: none;
}

.badge {
  position: absolute; top: var(--s-3); left: var(--s-3);
  padding: 5px 11px;
  border-radius: 7px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: rgba(11,12,14,.66);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text-primary);
}
.badge--new       { background: rgba(201,162,75,.92); color: #12100A; border-color: transparent; }
.badge--certified { background: rgba(74,222,128,.16); color: var(--success); border-color: rgba(74,222,128,.34); }

.heart {
  position: absolute; top: var(--s-3); right: var(--s-3);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(11,12,14,.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-spring),
              background-color var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out);
}
.heart:hover { background: rgba(11,12,14,.78); transform: scale(1.08); }
.heart:active { transform: scale(.9); }
.heart svg { width: 16px; height: 16px; }
.heart[aria-pressed="true"] { color: var(--danger); }
.heart[aria-pressed="true"] svg { fill: currentColor; }

.card__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.card__title {
  font-size: 18px; font-weight: 600; letter-spacing: -.015em;
  margin: 0; line-height: 1.25;
  /* Two lines' worth of space whether the name needs it or not, so the specs and
     the price below start at the same height on every card rather than only the
     card outline matching. Capped at two as well: a very long name would otherwise
     push a third line and reintroduce the same misalignment it is fixing. */
  min-height: calc(2 * 1.25em);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.card__sub { font-size: 12px; color: var(--text-muted); margin: 5px 0 0; }

.card__specs {
  /* auto-fill, not a fixed three: the row now carries every spec the car has —
     mileage, fuel, gearbox, drivetrain, year, body — and wraps onto a second line
     rather than dropping the rest. minmax keeps a lone chip from stretching across
     the whole card. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: var(--s-2);
  margin: var(--s-4) 0;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.spec { display: flex; align-items: center; gap: 7px; min-width: 0; }
.spec svg { width: 15px; height: 15px; color: var(--text-muted); flex: none; }
.spec b {
  font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.card__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-3); margin-top: auto;
}
.price {
  font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.price .cur { font-size: .62em; color: var(--accent); margin-right: .35em; font-weight: 600; letter-spacing: .05em; }
.price__was {
  display: block;
  font-size: 12px; font-weight: 500; color: var(--text-muted);
  text-decoration: line-through; margin-top: 2px;
}

.wa-fab {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #06301A;
  cursor: pointer;
  border: none;
  box-shadow: 0 3px 10px rgba(37,211,102,.3), var(--shadow-inset);
  transition: transform var(--t-fast) var(--ease-spring),
              box-shadow var(--t-base) var(--ease-out);
}
.wa-fab svg { width: 21px; height: 21px; }
.wa-fab:hover { transform: scale(1.07); box-shadow: 0 6px 20px rgba(37,211,102,.45); }
.wa-fab:active { transform: scale(.92); }
/* the gentle pulse only while the parent card is hovered — never ambient,
   never more than one thing moving in the tile at a time */
.card:hover .wa-fab { animation: wa-pulse 2.1s var(--ease-in-out) infinite; }
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 3px 10px rgba(37,211,102,.3), 0 0 0 0 rgba(37,211,102,.34); }
  60%      { box-shadow: 0 3px 10px rgba(37,211,102,.3), 0 0 0 9px rgba(37,211,102,0); }
}

.card__link { position: absolute; inset: 0; z-index: 1; }
.card__body .heart, .card__foot .wa-fab, .card__media .heart { position: relative; z-index: 2; }
.card__media .heart { position: absolute; }

/* full-width interrupt band */
/* The two promo bands now sit in their own #offers section instead of being spliced
   into #grid every sixth card. Inside the grid they were grid items and inherited its
   gap; on their own they need one. Stacked full width, which is the shape they were
   designed at: side by side, the title, copy, button and the big index numeral do not
   fit without wrapping badly. */
.bands { display: grid; gap: var(--s-6); }

.band {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  background:
    radial-gradient(90% 160% at 8% 50%, rgba(201,162,75,.16), transparent 60%),
    linear-gradient(100deg, var(--bg-surface), var(--bg-elevated));
  padding: clamp(28px, 5vw, 52px);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-8); flex-wrap: wrap;
  box-shadow: var(--shadow-2);
}
.band__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 38px); font-weight: 700;
  letter-spacing: -.025em; margin: var(--s-2) 0 0; line-height: 1.08;
}
.band__copy { color: var(--text-secondary); max-width: 46ch; margin: var(--s-3) 0 0; font-size: 14.5px; }
.band__deco {
  position: absolute; right: -40px; top: 50%; translate: 0 -50%;
  font-family: var(--font-display);
  font-size: 190px; font-weight: 800; letter-spacing: -.06em;
  color: rgba(255,255,255,.022);
  pointer-events: none; user-select: none;
}

/* empty state */
.empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--s-20) var(--s-6);
  color: var(--text-secondary);
}
.empty svg { width: 68px; height: 68px; margin: 0 auto var(--s-5); color: var(--text-muted); opacity: .7; }
.empty h3 { font-family: var(--font-display); font-size: 22px; margin: 0 0 var(--s-2); color: var(--text-primary); }

/* skeleton — champagne shimmer, not the usual grey */
.skel {
  border-radius: var(--r-xl);
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  overflow: hidden; position: relative;
  min-height: 340px;
}
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    transparent 20%, rgba(201,162,75,.09) 45%, rgba(201,162,75,.15) 50%,
    rgba(201,162,75,.09) 55%, transparent 80%);
  transform: translateX(-100%);
  animation: shimmer 1.5s var(--ease-in-out) infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* ----------------------------------------------------------- categories -- */

.cats {
  display: flex; gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-4);
  scrollbar-width: none;
  cursor: grab;
}
.cats::-webkit-scrollbar { display: none; }
.cats.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.cats.is-dragging a { pointer-events: none; }

.cat {
  position: relative; flex: none;
  width: clamp(200px, 26vw, 268px);
  aspect-ratio: 2 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-2);
  transition: transform var(--t-base) var(--ease-spring),
              box-shadow var(--t-base) var(--ease-out);
}
.cat:hover { transform: translateY(-5px); box-shadow: var(--shadow-3); }
.cat img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.cat:hover img { transform: scale(1.06); }
.cat__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,12,14,.9) 4%, rgba(11,12,14,.28) 46%, transparent 72%);
}
/* Name over count, not name-then-count on one line.
   Both children are spans, so they were inline and ran together — "Sedan2
   available" — and the margin-top below did nothing at all, because margin-top is
   ignored on an inline box. A column here is what that margin was reaching for. */
.cat__label {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s-5);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 3px;
}
.cat__name {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.15;
}
.cat__n { font-size: 12px; color: var(--text-secondary); }

.drag-cursor {
  position: fixed; z-index: 80; top: 0; left: 0;
  width: 74px; height: 74px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(201,162,75,.92);
  color: #12100A;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  pointer-events: none;
  opacity: 0; scale: .6;
  transition: opacity var(--t-base) var(--ease-out), scale var(--t-base) var(--ease-spring);
  backdrop-filter: blur(4px);
}
.drag-cursor.is-on { opacity: 1; scale: 1; }

/* ---------------------------------------------------------------- trust -- */

.trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.trust__item {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-8) var(--s-6);
  border-left: 1px solid var(--border-hairline);
}
.trust__item:first-child { border-left: 0; }
.trust__item svg { width: 24px; height: 24px; color: var(--accent); flex: none; stroke-width: 1.4; }
.trust__item b { display: block; font-size: 14.5px; font-weight: 600; }
.trust__item span { font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 720px) {
  .trust__item { border-left: 0; border-top: 1px solid var(--border-hairline); padding: var(--s-5) 0; }
  .trust__item:first-child { border-top: 0; }
}

/* ---------------------------------------------------------------- about -- */

.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
}
@media (min-width: 900px) { .about { grid-template-columns: .92fr 1fr; } }

/* One image. Sized and rotated on .about__stack img itself rather than on
   :first-child / :last-child - with a single child BOTH of those match it, and
   the old pair of rules would have laid the one photograph out as the small
   absolutely-positioned corner inset. */
.about__stack img {
  display: block;
  /* Not 100%: the tilt makes the box wider than the image, and at full width the
     corners push past the column and give the page a horizontal scrollbar. */
  width: 96%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-4);
  rotate: -1.8deg;
}
.about__copy p { color: var(--text-secondary); font-size: 15.5px; line-height: 1.7; }
.about__sig {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 600;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  color: var(--accent);
  margin-top: var(--s-6);
  rotate: -1.6deg;
  display: inline-block;
}
.about__role { font-size: 12px; color: var(--text-muted); letter-spacing: .1em; text-transform: uppercase; }

.stat-row { display: flex; gap: var(--s-10); flex-wrap: wrap; margin-top: var(--s-8); }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 34px; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: 12px; color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase; }

/* -------------------------------------------------------------- contact -- */

/* The "or message us on WhatsApp" block under the enquiry form. The rule sits
   here rather than in the form styles because showroom.js only inserts it when
   the dealer has the WhatsApp channel switched on. */
.wa-direct { margin-top: var(--s-5); }
.wa-direct__or {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: var(--s-4);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}
.wa-direct__or::before,
.wa-direct__or::after {
  content: ""; flex: 1; height: 1px; background: var(--border-hairline);
}

.contact {
  display: grid; grid-template-columns: 1fr; gap: var(--s-10);
}
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; } }

.map {
  height: 100%; min-height: 380px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-2);
  background: var(--bg-surface);
  z-index: 0;
}
/* OSM tiles are bright; knock them back so the map sits in the dark canvas
   instead of glaring out of it. */
.map .leaflet-tile-pane { filter: invert(1) hue-rotate(185deg) brightness(.86) contrast(.92) saturate(.55); }
.map .leaflet-control-attribution {
  background: rgba(11,12,14,.82) !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
}
.map .leaflet-control-attribution a { color: var(--text-secondary) !important; }
.map .leaflet-bar a {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-hairline) !important;
}
.map-pin {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg-canvas);
  box-shadow: 0 0 0 3px rgba(201,162,75,.28), var(--shadow-2);
}

.field { display: block; margin-bottom: var(--s-4); }
.field > span {
  display: block;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}
.input, .textarea {
  width: 100%;
  padding: 13px var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-hairline);
  background: rgba(255,255,255,.025);
  color: var(--text-primary);
  font: inherit; font-size: 14.5px;
  transition: border-color var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent-line);
  background: rgba(255,255,255,.045);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.textarea { resize: vertical; min-height: 118px; }

/* --------------------------------------------------------------- footer -- */

.footer {
  border-top: 1px solid var(--border-hairline);
  background: linear-gradient(to bottom, var(--bg-canvas), #08090B);
  padding-block: var(--s-16) var(--s-8);
  margin-top: var(--s-24);
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-10);
}
.footer h3 {
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 var(--s-4);
}
.footer a { color: var(--text-secondary); font-size: 14px; display: block; padding: 5px 0; transition: color var(--t-base) var(--ease-out); }
.footer a:hover { color: var(--accent); }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-5); flex-wrap: wrap;
  margin-top: var(--s-12); padding-top: var(--s-6);
  border-top: 1px solid var(--border-hairline);
  color: var(--text-muted); font-size: 12.5px;
}
/* The vendor's mark. It is a LINK, and the only place SayarHub/FikrFusion appears
   on a dealer's own site - deliberately quiet, but followable. */
.powered {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--text-muted);
  transition: color var(--t-base) var(--ease-out);
}
.powered:hover { color: var(--text-secondary); }
.powered b { color: var(--text-secondary); font-weight: 600; letter-spacing: .04em; }
.powered:hover b { color: var(--accent); }

/* ---------------------------------------------------------------- modal -- */

.modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: var(--s-5);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}
.modal.is-open { opacity: 1; pointer-events: auto; }
/* soft vignette rather than a flat black wash */
.modal__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 50% 46%, rgba(11,12,14,.62), rgba(6,7,8,.9) 78%);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
.modal__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: min(88svh, 820px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-elevated));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-4);
  padding: var(--s-6);
  transform: translateY(14px) scale(.965);
  opacity: 0;
  transition: transform var(--t-modal) var(--ease-spring), opacity var(--t-modal) var(--ease-out);
}
.modal.is-open .modal__panel { transform: none; opacity: 1; }
@media (max-width: 640px) {
  .modal { place-items: end center; padding: 0; }
  .modal__panel {
    width: 100%;
    max-height: 92svh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: 0;
    transform: translateY(100%);
    padding-bottom: max(var(--s-6), env(safe-area-inset-bottom));
  }
}
.modal__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5);
}
.modal__title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0;
}
.modal__sub { color: var(--text-secondary); font-size: 13.5px; margin: 4px 0 0; }
.modal__grab {
  width: 38px; height: 4px; border-radius: 2px;
  background: var(--border-strong);
  margin: 0 auto var(--s-4);
}
@media (min-width: 641px) { .modal__grab { display: none; } }

.pick {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.pick__opt {
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-hairline);
  background: rgba(255,255,255,.02);
  text-align: left; cursor: pointer;
  transition: border-color var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}
.pick__opt:hover { border-color: var(--border-strong); background: rgba(255,255,255,.05); }
.pick__opt:active { transform: scale(.98); }
.pick__opt[aria-pressed="true"] {
  border-color: var(--accent-line);
  background: var(--accent-dim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.pick__opt svg { width: 19px; height: 19px; color: var(--accent); margin-bottom: var(--s-2); }
.pick__opt b { display: block; font-size: 14px; font-weight: 600; }
.pick__opt span { font-size: 12px; color: var(--text-muted); }

.msg-preview {
  width: 100%;
  min-height: 210px;
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-hairline);
  background: #0F1518;
  color: #DDE6E4;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  font-size: 12.5px; line-height: 1.62;
  resize: vertical;
}
.msg-preview:focus { outline: none; border-color: rgba(37,211,102,.4); box-shadow: 0 0 0 3px rgba(37,211,102,.12); }

.qr-box {
  display: grid; place-items: center; gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: #fff;
  margin-bottom: var(--s-4);
}
.qr-box canvas, .qr-box img { width: 168px; height: 168px; image-rendering: pixelated; }
.qr-box p { color: #4B5563; font-size: 12px; margin: 0; text-align: center; }

.hint { font-size: 12px; color: var(--text-muted); margin: var(--s-3) 0 0; }

/* --------------------------------------------------------------- toasts -- */

.toasts {
  position: fixed; z-index: 200;
  left: 50%; bottom: var(--s-6); translate: -50% 0;
  display: grid; gap: var(--s-2); justify-items: center;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 12px var(--s-5);
  border-radius: var(--r-md);
  background: rgba(27,30,36,.94);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-3);
  font-size: 13.5px; font-weight: 500;
  animation: toast-in 420ms var(--ease-spring);
}
.toast svg { width: 17px; height: 17px; color: var(--success); flex: none; }
.toast.is-out { animation: toast-out 260ms var(--ease-in-out) forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(8px)  scale(.97); } }

/* gold ripple when the price is tapped */
.ripple {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,75,.5), rgba(201,162,75,0) 68%);
  pointer-events: none;
  animation: ripple 620ms var(--ease-out) forwards;
}
@keyframes ripple {
  from { transform: scale(0); opacity: .95; }
  to   { transform: scale(2.6); opacity: 0; }
}

.confetti-bit {
  position: fixed; z-index: 210;
  width: 7px; height: 7px; border-radius: 1.5px;
  pointer-events: none;
}

/* ------------------------------------------------------- scroll reveals -- */

.reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-spring);
  transition-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero__img { transform: none !important; }
}

/* ------------------------------------------------------------- sections -- */

.section { padding-block: clamp(64px, 10vw, 128px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }

/* ------------------------------------------------ responsive nav collapse -- */

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
  .nav__right .btn { display: none; }
}

/* =========================================================================
   Vehicle detail
   ========================================================================= */

.detail-page { padding-top: calc(var(--nav-h) + var(--s-6)); }

.crumbs {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 12.5px; color: var(--text-muted);
  margin-bottom: var(--s-6); flex-wrap: wrap;
}
/* The LINK is the brighter of the two, and the page you are already on is the
   dimmer. It was the other way round: "Inventory" — the only thing here worth
   clicking — was painted in the muted trail colour while the current page, which
   goes nowhere, was the lighter one. */
.crumbs a { color: var(--text-secondary); transition: color var(--t-base) var(--ease-out); }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-current] { color: var(--text-muted); }

.detail {
  display: grid; grid-template-columns: 1fr; gap: var(--s-8);
  align-items: start;
}
@media (min-width: 1024px) {
  .detail { grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr); gap: var(--s-10); }
}

/* ------------------------------------------------------------- gallery -- */

.gal-main {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-3);
  background: var(--bg-surface);
  aspect-ratio: 3 / 2;
  cursor: zoom-in;
}
.gal-main .swiper, .gal-main .swiper-wrapper, .gal-main .swiper-slide { height: 100%; }
.gal-main img { width: 100%; height: 100%; object-fit: cover; }

.gal-count {
  position: absolute; z-index: 3; right: var(--s-4); bottom: var(--s-4);
  padding: 6px 12px; border-radius: 8px;
  background: rgba(11,12,14,.7); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.gal-expand { position: absolute; z-index: 3; right: var(--s-4); top: var(--s-4); }

.gal-thumbs {
  display: flex; gap: var(--s-3);
  margin-top: var(--s-3);
  overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
}
.gal-thumbs::-webkit-scrollbar { display: none; }
.gal-thumb {
  flex: none; width: 104px; aspect-ratio: 3 / 2;
  border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--border-hairline);
  opacity: .5; cursor: pointer; padding: 0; background: none;
  transition: opacity var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal-thumb:hover { opacity: .85; }
.gal-thumb[aria-current="true"] {
  opacity: 1; border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(201,162,75,.22);
}

/* ---------------------------------------------------------------- rail -- */

@media (min-width: 1024px) {
  .rail { position: sticky; top: calc(var(--nav-h) + var(--s-4)); }
}
.rail__card {
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-elevated));
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-3);
  padding: var(--s-6);
}
.rail__status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--success); margin-bottom: var(--s-3);
}
/* The halo follows the status. It was a fixed green rgba, so a Reserved car had an
   amber dot inside a green glow and a Sold one a grey dot inside the same green. */
.rail__status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}
.rail__status[data-status="Reserved"] { color: var(--warning); }
/* Neutral, like the Sold pill in the console — a sale is not a warning and not an
   error. But --text-secondary, not --text-muted: this is 11px uppercase with wide
   letter-spacing, which is the hardest text on the page to read, and it had the
   dimmest colour on the page. */
.rail__status[data-status="Sold"]     { color: var(--text-secondary); }

.rail__title {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05;
  margin: 0 0 var(--s-2);
}
.rail__trim { color: var(--text-secondary); font-size: 14px; margin: 0 0 var(--s-5); }

.price-big {
  position: relative;
  font-size: 36px; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1;
  margin: 0; cursor: copy;
  display: inline-block; overflow: hidden; border-radius: 6px;
  padding: 2px 4px; margin-left: -4px;
  border: 0; background: none; color: inherit; font-family: inherit;
}
.price-big .cur { font-size: .48em; color: var(--accent); margin-right: .4em; font-weight: 600; letter-spacing: .05em; }
.price-note { font-size: 12px; color: var(--text-muted); margin: var(--s-2) 0 var(--s-6); }
.price-note s { color: var(--text-muted); margin-right: 8px; }

.keyspecs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border-hairline);
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-md); overflow: hidden;
  margin-bottom: var(--s-6);
}
.keyspecs > div { background: var(--bg-elevated); padding: var(--s-4); }
.keyspecs dt {
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 5px;
}
.keyspecs dd { margin: 0; font-size: 14.5px; font-weight: 500; }

.rail__cta { display: grid; gap: var(--s-3); }

.dealer-card {
  margin-top: var(--s-5);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-hairline);
  background: rgba(255,255,255,.02);
  display: flex; align-items: center; gap: var(--s-4);
}
.dealer-card img {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; flex: none;
  border: 2px solid var(--accent-line);
}
.dealer-card b { display: block; font-size: 14.5px; }
.dealer-card span { font-size: 12px; color: var(--text-muted); display: block; }
.dealer-card a { margin-left: auto; flex: none; }

/* ---------------------------------------------------------------- tabs -- */

.tabs {
  display: flex; gap: var(--s-2);
  border-bottom: 1px solid var(--border-hairline);
  margin: var(--s-10) 0 var(--s-6);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabbtn {
  position: relative;
  padding: var(--s-4) var(--s-2);
  margin-right: var(--s-5);
  background: none; border: 0;
  color: var(--text-muted);
  font-size: 14px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: color var(--t-base) var(--ease-out);
}
.tabbtn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: center;
  transition: transform 320ms var(--ease-spring);
}
.tabbtn:hover { color: var(--text-secondary); }
.tabbtn[aria-selected="true"] { color: var(--text-primary); font-weight: 600; }
.tabbtn[aria-selected="true"]::after { transform: scaleX(1); }

.tabpanel[hidden] { display: none; }
.tabpanel { animation: panel-in 400ms var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
.tabpanel p { color: var(--text-secondary); line-height: 1.75; font-size: 15.5px; max-width: 68ch; }

.spectable {
  display: grid; grid-template-columns: 1fr;
  border: 1px solid var(--border-hairline);
  border-radius: var(--r-md); overflow: hidden;
}
@media (min-width: 640px) { .spectable { grid-template-columns: 1fr 1fr; } }
.spectable > div {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: 13px var(--s-4);
  border-bottom: 1px solid var(--border-hairline);
  font-size: 14px;
}
@media (min-width: 640px) { .spectable > div:nth-child(odd) { border-right: 1px solid var(--border-hairline); } }
.spectable dt { color: var(--text-muted); }
.spectable dd { margin: 0; font-weight: 500; text-align: right; }

.featgroup { margin-bottom: var(--s-8); }
.featgroup h4 {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 var(--s-4);
}
.featlist {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s-2) var(--s-6);
}
.featlist li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--text-secondary); padding: 5px 0;
}
.featlist li::before {
  content: ""; flex: none; margin-top: 8px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-line);
}

.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--s-6); position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 4px; top: 6px; bottom: 12px; width: 1px;
  background: linear-gradient(to bottom, var(--accent-line), transparent);
}
.timeline li { position: relative; padding-bottom: var(--s-6); }
.timeline li::before {
  content: ""; position: absolute; left: calc(var(--s-6) * -1); top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg-canvas); border: 2px solid var(--accent);
}
.timeline time {
  display: block; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px;
}
.timeline b { font-size: 15px; font-weight: 600; }
.timeline span { display: block; font-size: 13.5px; color: var(--text-secondary); }

/* -------------------------------------------------------- similar rail -- */

.carousel-nav { display: flex; gap: var(--s-2); }
#similar .swiper-slide { width: 300px; height: auto; }
#similar .card { height: 100%; }

/* ------------------------------------------------------- preview band -- */

/* Shown only to a signed-in staff member previewing a listing, and deliberately
   loud: this page looks identical whether a customer can reach it or not, and the
   whole reason to open it is to find out which. */
.previewbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  padding: 10px clamp(16px, 4vw, 40px);
  background: var(--accent);
  color: #12100A;
  font-size: 13px;
}
.previewbar b { font-weight: 700; }
.previewbar span { opacity: .85; }
.previewbar a { margin-left: auto; text-decoration: underline; font-weight: 600; }
.previewbar--draft { background: #B45309; color: #fff; }
.previewbar--draft span { opacity: .9; }

/* The nav is fixed at the top, so it would sit under the band without this. */
body.has-previewbar .nav { top: 44px; }

/* ------------------------------------------------------------ lightbox -- */

.lightbox {
  position: fixed; inset: 0; z-index: 130;
  background: radial-gradient(70% 60% at 50% 50%, rgba(8,9,11,.94), #060708 80%);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--t-base) var(--ease-out);
  display: grid; place-items: center;
  /* Belt and braces alongside the [hidden] rule in the base layer: this element
     is still laid out during its own fade-out, and a transparent sheet that is
     merely on its way out still swallows clicks. .modal and .drawer both do the
     same; this one was the odd one out, which is how it became the bug. */
  pointer-events: none;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__swiper { width: 100%; height: 82vh; }
.lightbox__swiper .swiper-slide { display: grid; place-items: center; overflow: hidden; }
.lightbox__swiper img { max-width: 94vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; }
.lightbox__close { position: absolute; top: var(--s-5); right: var(--s-5); z-index: 5; }
.lightbox__hint {
  position: absolute; bottom: var(--s-5); left: 50%; translate: -50% 0;
  font-size: 11.5px; color: var(--text-muted); margin: 0; letter-spacing: .05em;
}
.lightbox .swiper-button-prev,
.lightbox .swiper-button-next { color: var(--text-primary); }
.lightbox .swiper-button-prev::after,
.lightbox .swiper-button-next::after { font-size: 22px; }

.swiper-pagination-bullet-active { background: var(--accent) !important; }

/* =========================================================================
   Quick login floater — "try the dealer console"
   Only rendered when /api/config carries a quickLogin block.
   ========================================================================= */

.ql { position: fixed; inset: auto 0 0 auto; z-index: 140; }

.ql__veil {
  position: fixed; inset: 0;
  background: rgba(6, 7, 8, .5);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
.ql.is-open .ql__veil { opacity: 1; }

/* ------------------------------------------------------------------ fab -- */

.ql__fab {
  position: fixed;
  right: clamp(16px, 4vw, 28px);
  bottom: clamp(16px, 4vw, 28px);
  z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px;
  border: 1px solid rgba(201, 162, 75, .42);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-elevated));
  color: var(--text-primary);
  font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform var(--t-fast) var(--ease-spring),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.ql__fab:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-4);
}
.ql__fab:active { transform: scale(.97); }

.ql__fabIcon {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: none;
  border-radius: 8px;
  background: var(--accent-dim);
  color: var(--accent);
}
.ql__fabIcon svg { width: 15px; height: 15px; }

/* A slow, once-every-9s glint along the border — enough to be noticed by
   someone who has stopped scrolling, not enough to compete with the hero. */
.ql__fab::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg, transparent 40%, rgba(201,162,75,.85) 50%, transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  animation: ql-glint 9s var(--ease-in-out) 3s infinite;
  pointer-events: none;
}
@keyframes ql-glint {
  0%, 88%, 100% { opacity: 0; }
  92%           { opacity: 1; }
}
.ql.is-open .ql__fab::after { animation: none; }

@media (max-width: 480px) {
  .ql__fabLabel { display: none; }
  .ql__fab { padding: 12px; border-radius: 50%; }
}

/* ---------------------------------------------------------------- panel -- */

.ql__panel {
  position: fixed;
  right: clamp(16px, 4vw, 28px);
  bottom: calc(clamp(16px, 4vw, 28px) + 62px);
  z-index: 3;
  width: min(360px, calc(100vw - 32px));
  background: linear-gradient(180deg, var(--bg-surface), var(--bg-elevated));
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-4);
  padding: var(--s-5);
  transform: translateY(10px) scale(.97);
  opacity: 0;
  transform-origin: bottom right;
  transition: transform var(--t-modal) var(--ease-spring),
              opacity var(--t-base) var(--ease-out);
}
.ql.is-open .ql__panel { transform: none; opacity: 1; }

.ql__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-3);
}
.ql__kicker {
  font-size: 10px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 4px;
}
.ql__title {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin: 0;
}
.ql__x {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid var(--border-hairline);
  background: rgba(255, 255, 255, .03);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease-out);
}
.ql__x:hover { background: rgba(255, 255, 255, .08); color: var(--text-primary); }
.ql__x svg { width: 13px; height: 13px; }

.ql__note {
  font-size: 13px; line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 var(--s-4);
}

/* --------------------------------------------------------------- account -- */

.ql__card {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border-hairline);
  background: rgba(255, 255, 255, .025);
  color: inherit; font: inherit; text-align: left;
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}
.ql__card:hover {
  border-color: var(--accent-line);
  background: var(--accent-dim);
}
.ql__card:active { transform: scale(.985); }
.ql__card[aria-busy="true"] { opacity: .7; pointer-events: none; }

.ql__avatar {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--accent-hover), #A8823A 70%);
  color: #12100A;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: -.02em;
}

.ql__who { display: grid; gap: 1px; min-width: 0; flex: 1; }
.ql__who b { font-size: 14px; font-weight: 600; }
.ql__role { font-size: 11.5px; color: var(--text-muted); }
.ql__email {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ql__go {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: none;
  border-radius: 8px;
  color: var(--accent);
  transition: transform var(--t-base) var(--ease-spring);
}
.ql__go svg { width: 16px; height: 16px; }
.ql__card:hover .ql__go { transform: translateX(3px); }

.ql__warn {
  font-size: 11.5px; line-height: 1.55;
  color: var(--text-muted);
  margin: var(--s-4) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-hairline);
}

/* On the light admin canvas the panel keeps the showroom's dark register —
   it is the same control in both places and should not change identity. */
body.adm .ql__panel,
body.adm .ql__fab { color: var(--text-primary); }