/* Vehicle in event. The hero is the event hero's diorama drawn in code:
   storm sky, an amber sun set on the turquoise horizon, the model's name in
   giant lettering behind the car. The content rises over it like the event
   lineup's curtain and shares its canvas. Colours come only from the Varan
   palette: navy and turquoise carry the large areas, mist the edges and
   lettering, amber is the sun and nothing else. */
.vo-page {
  /* The site canvas (brand-palette.css), shared with home and event. */
  --vo-canvas: var(--bg, #0d1726);
  --vo-panel: #152d43;
  --vo-card: #152d43;
  --vo-band: #10233a;
  --vo-band-ink: #eef7f7;
  --vo-band-muted: rgb(199 225 228 / 72%);
  --vo-band-line: rgb(199 225 228 / 22%);
  --vo-ink: #eef7f7;
  --vo-muted: #b1cfd5;
  --vo-line: rgb(199 225 228 / 16%);
  --vo-accent: #33b5b6;
  --vo-turquoise: #33b5b6;
  --vo-action: #33b5b6;
  --vo-action-hover: #70cece;
  --vo-on-action: #10263a;
  --vo-sun: #faa831;
  --vo-width: min(100% - 64px, 1240px);
  /* Pull the hero up under the floating nav, as the event page does. */
  margin-top: -66px;
  background: var(--vo-canvas);
  color: var(--vo-ink);
}

/* Light: navy takes the actions and turquoise's darker shade the accents,
   as on the event lineup; mist tints are the floor. */
:root[data-theme="light"] .vo-page {
  --vo-panel: #e3f0f2;
  --vo-card: #fff;
  --vo-ink: #20334e;
  --vo-muted: #526e7a;
  --vo-line: #c7e1e4;
  --vo-accent: #167879;
  --vo-action: #2c4569;
  --vo-action-hover: #20334e;
  --vo-on-action: #fff;
}

/* The hero and the catalogue band stay dark in both themes. */
.vo-hero,
.vo-catalog {
  --vo-action: #33b5b6;
  --vo-action-hover: #70cece;
  --vo-on-action: #10263a;
}

.vo-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Buttons */
.vo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--vo-action);
  color: var(--vo-on-action);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.vo-button:hover { background: var(--vo-action-hover); color: var(--vo-on-action); }
.vo-button:focus-visible { outline: 2px solid var(--vo-sun); outline-offset: 3px; }
.vo-button:disabled { background: var(--vo-line); color: var(--vo-muted); cursor: not-allowed; }

/* Same quiet navy button as the event hero's CTA. */
.vo-button--ghost {
  border-color: #20334e;
  background: #20334e;
  color: #fff;
}

.vo-button--ghost:hover { border-color: var(--vo-turquoise); background: #2c4569; color: #fff; }
.vo-button--block { width: 100%; }

/* ── Hero: the photo, full screen ───────────────────────────────────────
   The page's main image (a whole scene, uploaded in the admin) fills the
   screen. Over it, a low mist drifts across the floor: a WebGL shader
   (vehicle-fog.js) screened onto the photo, with a still CSS haze beneath
   it for when the shader can't run. Type keeps to the dark ceiling and
   floor that photos like this leave free. vehicle-hero.js drives the
   [data-layer] on scroll and the .vo-hero__rig inside it on load and under
   the pointer, so the two never fight. */
.vo-hero-shell {
  position: relative;
  z-index: 0;
  background: #040a13;
}

.vo-hero {
  --gutter: clamp(20px, 4vw, 56px);
  --hero-ink: #f2f8f8;
  --hero-muted: rgb(220 236 238 / 72%);
  --hero-line: rgb(199 225 228 / 24%);
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: #040a13;
  color: var(--hero-ink);
}

.vo-hero__stage { position: absolute; inset: 0; pointer-events: none; }

.vo-hero__layer { position: absolute; inset: 0; overflow: hidden; }

/* Overscan, so the pointer drift never shows an edge. */
.vo-hero__rig { position: absolute; inset: -24px; }

.vo-hero__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 55%;
}

/* The still haze: a band of mist on the floor, lit from within. */
.vo-hero__haze,
.vo-hero__fog {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
}
.vo-hero__haze {
  background:
    radial-gradient(80% 34% at 45% 92%, rgb(199 225 228 / 16%), transparent 70%),
    linear-gradient(0deg, rgb(199 225 228 / 9%), transparent 34%);
}

/* The live mist takes over from the haze once its first frame is drawn. */
.vo-hero__fog { opacity: 0; transition: opacity 2.6s ease; }
.vo-hero__fog.is-live { opacity: 1; }
.vo-hero__stage:has(.vo-hero__fog.is-live) .vo-hero__haze { opacity: 0; transition: opacity 2.6s ease; }

/* Legibility: the ceiling for the name, the floor for the offer. */
.vo-hero__scrim,
.vo-hero__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.vo-hero__scrim {
  background:
    linear-gradient(180deg, rgb(4 10 19 / 62%) 0%, rgb(4 10 19 / 18%) 26%, transparent 40%),
    linear-gradient(0deg, rgb(4 10 19 / 88%) 0%, rgb(4 10 19 / 40%) 18%, transparent 34%);
}
.vo-hero__shade { background: #040a13; opacity: 0; }

/* ---- Type ---- */
.vo-hero__heading,
.vo-hero__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.vo-hero__heading { padding-top: clamp(104px, 14vh, 150px); }

/* Name block: the brand on the event hero's short rule, the model large
   and heavy in Estedad, then the year and the official English name. */
.vo-page .vo-hero__title {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  color: var(--hero-ink);
  font-family: 'Estedad', 'Vazirmatn', sans-serif;
  letter-spacing: 0;
}

.vo-hero__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgb(242 248 248 / 88%);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.4;
}
.vo-hero__brand > span { width: 32px; height: 2px; flex: none; background: var(--vo-turquoise); }

.vo-hero__model {
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 6px 40px rgb(4 10 19 / 55%);
  text-wrap: balance;
}

.vo-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 18px 0 0;
}

.vo-hero__year {
  padding: 5px 14px;
  border: 1px solid rgb(199 225 228 / 38%);
  border-radius: 999px;
  background: rgb(4 10 19 / 30%);
  color: var(--hero-ink);
  font-family: 'Estedad', 'Vazirmatn', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* The official English name, set as a wordmark. */
.vo-hero__latin {
  color: var(--hero-muted);
  font-family: 'Manrope', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* ---- Panel: the offer on one quiet line, a single action ---- */
.vo-hero__panel { padding-bottom: clamp(24px, 5vh, 52px); }

.vo-hero__panel-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  padding-top: 18px;
  border-top: 1px solid var(--hero-line);
}

.vo-hero__offer { min-width: 0; }

.vo-hero__status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  color: var(--hero-muted);
  font-size: 0.8125rem;
}
.vo-hero__status > span {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--vo-turquoise);
}
.vo-hero[data-phase="live"] .vo-hero__status > span { background: var(--vo-sun); box-shadow: 0 0 10px 2px rgb(250 168 49 / 45%); }
.vo-hero[data-phase="ended"] .vo-hero__status > span { background: var(--hero-muted); }

.vo-hero__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  color: var(--hero-muted);
  font-family: 'Estedad', 'Vazirmatn', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
}
.vo-hero__price strong {
  color: var(--hero-ink);
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  font-weight: 650;
  line-height: 1.2;
}

.vo-hero__actions { display: flex; align-items: center; gap: 28px; flex-shrink: 0; }

.vo-hero__link {
  padding-block: 6px;
  color: var(--hero-muted);
  font-size: 0.875rem;
  border-bottom: 1px solid var(--hero-line);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.vo-hero__link:hover { color: var(--hero-ink); border-color: var(--hero-ink); }

/* A hairline action that fills with light on hover. */
.vo-hero__cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 30px;
  overflow: hidden;
  border: 1px solid rgb(199 225 228 / 45%);
  border-radius: 999px;
  color: var(--hero-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.vo-hero__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hero-ink);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.45s cubic-bezier(0.6, 0, 0.2, 1);
}
.vo-hero__cta:hover { color: #0a1626; border-color: var(--hero-ink); }
.vo-hero__cta:hover::before { transform: scaleX(1); }
.vo-hero__cta:focus-visible,
.vo-hero__link:focus-visible { outline: 2px solid var(--vo-sun); outline-offset: 4px; }

/* vehicle-hero.js brings the lights up; until it does the hall is dark. */
.vo-hero[data-intro="pending"] .vo-hero__layer,
.vo-hero[data-intro="pending"] .vo-hero__haze,
.vo-hero[data-intro="pending"] .vo-hero__heading,
.vo-hero[data-intro="pending"] .vo-hero__panel { visibility: hidden; }

/* ---- Key facts, the first thing the curtain brings up ----
   Five glass tiles on the page canvas; behind them the English name stands
   as a watermark, set opposite the heading and sinking behind the tiles, as
   the event page does with its own. vehicle-hero.js stands the tiles up as
   they arrive and lets the watermark drift at a slower depth. */
.vo-keyfacts {
  position: relative;
  isolation: isolate;
  width: var(--vo-width);
  margin: 0 auto;
  padding-top: clamp(72px, 9vw, 116px);
  scroll-margin-top: 90px;
}

/* The page's one dotted surface: the event lineup's texture (home.css,
   .home-allies__dots), full width behind the key facts and their
   watermark, fading out above and below instead of ending on a line. */
.vo-keyfacts::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 calc(50% - 50vw) -40px;
  pointer-events: none;
  opacity: 0.16;
  background-image: radial-gradient(var(--vo-turquoise) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
}
:root[data-theme="light"] .vo-keyfacts::before { opacity: 0.22; }

.vo-keyfacts__mark {
  position: absolute;
  z-index: -1;
  /* The mark itself is dir=ltr, so its own inline-end would be the
     heading's side; it is anchored to the page's end edge physically. */
  left: -2vw;
  top: clamp(12px, 2.4vw, 40px);
  margin: 0;
  font-family: 'Lalezar', 'Vazirmatn', sans-serif;
  font-size: min(21vw, 340px, calc(150vw / var(--len, 6)));
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(180deg, rgb(199 225 228 / 17%) 20%, rgb(199 225 228 / 2%) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
}
[dir="ltr"] .vo-keyfacts__mark { left: auto; right: -2vw; }
:root[data-theme="light"] .vo-keyfacts__mark {
  background-image: linear-gradient(180deg, rgb(44 69 105 / 13%) 20%, rgb(44 69 105 / 1%) 80%);
}

.vo-page .vo-keyfacts .vo-heading { position: relative; margin-bottom: clamp(28px, 4vw, 48px); }

.vo-keyfacts__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  perspective: 1400px;
}

/* Glass, so the watermark reads through the tiles. */
.vo-keyfact {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 22px 24px;
  border: 1px solid var(--vo-line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--vo-card) 72%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgb(20 40 70 / 5%), 0 18px 40px -22px rgb(4 10 19 / 45%);
  transition: border-color 0.3s ease;
}

/* A short rule on the tile's top edge, the hero's brand mark. */
.vo-keyfact::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline-start: 22px;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--vo-turquoise);
}

.vo-keyfact__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: rgb(51 181 182 / 13%);
  color: var(--vo-accent);
  transition: background 0.3s ease, color 0.3s ease;
}
.vo-keyfact__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.vo-keyfact dt { color: var(--vo-muted); font-size: 0.8125rem; }
.vo-keyfact dd {
  margin: 4px 0 0;
  color: var(--vo-ink);
  font-family: 'Estedad', 'Vazirmatn', sans-serif;
  font-size: clamp(1.25rem, 1.7vw, 1.625rem);
  font-weight: 700;
  line-height: 1.35;
  text-transform: capitalize;
  overflow-wrap: anywhere;
}

.vo-keyfact:hover { border-color: color-mix(in srgb, var(--vo-turquoise) 55%, transparent); }
.vo-keyfact:hover .vo-keyfact__icon { background: var(--vo-turquoise); color: #10263a; }

/* ---- Curtain ---- */
.vo-hero-spacer { height: 100svh; pointer-events: none; }

.vo-curtain {
  position: relative;
  isolation: isolate;
  z-index: 1;
  margin-top: -100svh;
  padding-top: 8px;
  background: var(--vo-canvas);
  box-shadow: 0 -30px 70px rgb(13 29 46 / 35%);
}

/* ── Sections ── */
.vo-section {
  width: var(--vo-width);
  margin: 0 auto;
  padding-block: 88px 0;
  scroll-margin-top: 90px;
}

.vo-page .vo-heading {
  margin: 0 0 28px;
  color: var(--vo-ink);
  font-family: 'Lalezar', 'Vazirmatn', sans-serif;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: capitalize;
}

/* Highlights reuse the home gallery's expanding tiles (home-gallery.css);
   only spacing and the no-image tile are set here. */
.vo-highlights.home-gallery__tiles { margin: 0; }

.vo-highlights .home-gallery__tile { background: var(--vo-band); }

/* ── Review ─────────────────────────────────────────────────────────────
   Without the script: each chapter is a photo beside its text. With it
   (.is-ready): one pinned frame holds every photo, the chapters scroll
   beside it, and the rail between them fills as the reader goes. */
.vo-review {
  width: var(--vo-width);
  margin: 0 auto;
  padding-top: 104px;
  scroll-margin-top: 90px;
}

.vo-review__head { max-width: 60ch; margin-bottom: 36px; }
.vo-page .vo-review__head .vo-heading { margin-bottom: 4px; }
.vo-review__lede { margin: 0; color: var(--vo-muted); font-size: 0.9375rem; line-height: 1.9; }

.vo-review__frame,
.vo-review__rail { display: none; }

.vo-review__chapters { margin: 0; padding: 0; list-style: none; }

.vo-review__chapter {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  align-items: start;
  column-gap: 48px;
  padding-block: 32px;
  border-top: 1px solid var(--vo-line);
}

.vo-review__inline {
  grid-row: 1 / 4;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 20px;
  background: var(--vo-panel);
}

.vo-review__index {
  margin: 0;
  color: var(--vo-accent);
  font-size: 0.8125rem;
  font-weight: 700;
}

.vo-page .vo-review__title {
  margin: 4px 0 12px;
  color: var(--vo-ink);
  font-family: 'Lalezar', 'Vazirmatn', sans-serif;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

.vo-review__text { max-width: 46ch; color: var(--vo-muted); font-size: 1rem; line-height: 2.1; }
.vo-review__text p { margin: 0 0 1em; }
.vo-review__text p:last-child { margin-bottom: 0; }

/* Enhanced: pinned frame | rail | chapters. */
.vo-review.is-ready .vo-review__body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 2px minmax(0, 0.85fr);
  gap: 0 clamp(32px, 4vw, 64px);
}

.vo-review.is-ready .vo-review__frame {
  --frame-h: min(68svh, 600px);
  position: sticky;
  top: max(96px, calc(50svh - var(--frame-h) / 2));
  display: block;
  height: var(--frame-h);
  overflow: hidden;
  border-radius: 26px;
  background: var(--vo-band);
  box-shadow: 0 30px 70px -30px rgb(3 8 15 / 70%);
}

.vo-review__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 100%;
}

/* The wipe's leading edge: a horizon line that rides up with each photo. */
.vo-review__horizon {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  top: 100%;
  height: 2px;
  background: var(--vo-turquoise);
  box-shadow: 0 0 18px 2px rgb(51 181 182 / 65%);
  opacity: 0;
}

.vo-review.is-ready .vo-review__rail {
  position: relative;
  display: block;
  border-radius: 2px;
  background: var(--vo-line);
}

.vo-review__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--vo-turquoise);
  transform: scaleY(var(--progress, 0));
  transform-origin: 50% 0;
}

.vo-review__sun {
  position: absolute;
  left: 50%;
  top: calc(var(--progress, 0) * 100%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--vo-sun);
  box-shadow: 0 0 14px 4px rgb(250 168 49 / 45%);
  transform: translate(-50%, -50%);
}

.vo-review.is-ready .vo-review__chapter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 78svh;
  padding-block: 40px;
  border: 0;
  opacity: 0.32;
  transition: opacity 0.5s ease;
}
.vo-review.is-ready .vo-review__chapter.is-active { opacity: 1; }
.vo-review.is-ready .vo-review__inline { display: none; }

/* ── Gallery: first shot leads, the rest follow ── */
.vo-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 200px;
  gap: 14px;
  perspective: 1200px;
}

/* Hover: the frame lights up nearest the pointer and the tile tilts toward
   it (vehicle-offer.js sets --mx/--my and the tilt). No zoom. */
.vo-gallery__shot {
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--vo-panel);
  cursor: zoom-in;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease;
}

.vo-gallery__shot.is-tilting { transition: transform 0.08s linear, box-shadow 0.35s ease; }

.vo-gallery__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 2px;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx) var(--my), var(--vo-turquoise), rgb(51 181 182 / 25%) 45%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.vo-gallery__shot:hover,
.vo-gallery__shot:focus-visible { box-shadow: 0 18px 40px rgb(16 35 58 / 28%), 0 0 24px rgb(51 181 182 / 18%); }
.vo-gallery__shot:hover::after,
.vo-gallery__shot:focus-visible::after { opacity: 1; }
.vo-gallery__shot:focus-visible { outline: none; }

.vo-gallery__shot:first-child { grid-column: span 2; grid-row: span 2; }
.vo-gallery__shot:only-child { grid-column: 1 / -1; }
.vo-gallery__shot img { width: 100%; height: 100%; object-fit: cover; }

.vo-gallery__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: 28px 16px 12px;
  background: linear-gradient(transparent, rgb(16 35 58 / 85%));
  color: #fff;
  font-size: 0.8125rem;
  text-align: start;
}

/* Lightbox: full-screen storm-navy sheet, like the mobile menu. */
.vo-lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background:
    radial-gradient(rgb(199 225 228 / 11%) 1.2px, transparent 1.2px) 0 0 / 24px 24px,
    #0f2033;
  color: var(--vo-band-ink);
}

.vo-lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
}

.vo-lightbox::backdrop { background: #0f2033; }

.vo-lightbox svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.vo-lightbox__top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px clamp(16px, 4vw, 40px);
}

.vo-lightbox__title {
  flex: 1;
  margin: 0;
  overflow: hidden;
  font-family: 'Lalezar', 'Vazirmatn', sans-serif;
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vo-lightbox__count { color: var(--vo-band-muted); font-size: 0.875rem; }

/* Same labelled pill as the mobile menu's close button. */
.vo-lightbox__close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--vo-band-line);
  border-radius: 999px;
  background: #20334e;
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.vo-lightbox__close:hover { border-color: var(--vo-turquoise); }

.vo-lightbox__stage {
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: 12px;
  min-height: 0;
  margin: 0;
  padding: 0 clamp(16px, 5vw, 72px);
}

.vo-lightbox__stage img {
  max-width: 100%;
  max-height: calc(100dvh - 230px);
  min-height: 0;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 45%);
}

.vo-lightbox__stage figcaption {
  min-height: 1.8em;
  color: var(--vo-band-muted);
  font-size: 0.9375rem;
  text-align: center;
}

.vo-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px clamp(16px, 4vw, 40px) calc(20px + env(safe-area-inset-bottom));
}

.vo-lightbox__step {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--vo-band-line);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.vo-lightbox__step:hover { border-color: var(--vo-turquoise); }

.vo-lightbox__thumbs {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding: 4px;
  scrollbar-width: none;
}

.vo-lightbox__thumbs::-webkit-scrollbar { display: none; }

.vo-lightbox__thumb {
  flex: none;
  width: 76px;
  height: 52px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #20334e;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.vo-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vo-lightbox__thumb:hover { opacity: 0.85; }
.vo-lightbox__thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--vo-turquoise); }

.vo-lightbox button:focus-visible { outline: 2px solid var(--vo-turquoise); outline-offset: 2px; }

/* Specs (partials/vehicle_specs.html) */
.vo-page .spec-panel {
  overflow: hidden;
  border: 1px solid var(--vo-line);
  border-radius: 22px;
  background: var(--vo-card);
}

.vo-page .spec-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--vo-line);
}

.vo-page .spec-tabs button {
  order: 1;
  padding: 7px 16px;
  border: 1px solid var(--vo-line);
  border-radius: 10px;
  background: transparent;
  color: var(--vo-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.vo-page .spec-tabs button[data-spec="all"] { order: 0; }
.vo-page .spec-tabs button:hover { border-color: var(--vo-accent); color: var(--vo-ink); }
.vo-page .spec-tabs button[aria-pressed="true"] { border-color: var(--vo-action); background: var(--vo-action); color: var(--vo-on-action); }


.vo-page .spec-table { width: 100%; border-collapse: collapse; }
.vo-page .spec-table th,
.vo-page .spec-table td { padding: 13px 20px; border-top: 1px solid var(--vo-line); text-align: start; vertical-align: top; }
.vo-page .spec-table th { width: 42%; color: var(--vo-muted); font-size: 0.875rem; font-weight: 500; }
.vo-page .spec-table td { color: var(--vo-ink); font-size: 0.9375rem; font-weight: 600; }
/* The tab bar's rule already closes the top. */
.vo-page .spec-table tbody tr:first-child > * { border-top: 0; }
.vo-page .spec-table .category-row th { padding-top: 22px; color: var(--vo-accent); font-size: 0.8125rem; font-weight: 700; }
.vo-page .spec-description { display: block; margin-top: 2px; color: var(--vo-muted); font-size: 0.75rem; font-weight: 400; }
.vo-page .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ── Catalogue: a window ────────────────────────────────────────────────
   The section's photo is pinned to the screen (position: fixed) and the
   section only crops it (clip-path), so the page scrolls past a picture
   that stays still: a window onto it. The browser keeps it still, so it
   can't lag behind the smooth scroll the way a script-driven parallax
   would, and unlike background-attachment: fixed it holds on phones too.
   A fixed element is positioned by the nearest transformed, filtered or
   backdrop-filtered ancestor, so none of this section's ancestors may
   have one. Without a photo the section falls back to the navy band. */
.vo-catalog {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  margin-top: 104px;
  background:
    radial-gradient(50% 70% at 75% 60%, rgb(51 181 182 / 16%), transparent 70%),
    var(--vo-band);
  color: var(--vo-band-ink);
  scroll-margin-top: 66px;
}

.vo-catalog--window {
  min-height: min(92svh, 860px);
  clip-path: inset(0);
  background: #040a13;
}

.vo-catalog__window { position: absolute; inset: 0; z-index: -1; }

.vo-catalog__view {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: 50% 55%;
}

/* Shade on the panel's side, so the photo stays bright where it can. */
.vo-catalog__window::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, rgb(4 10 19 / 72%) 0%, rgb(4 10 19 / 30%) 50%, rgb(4 10 19 / 5%) 80%),
    linear-gradient(0deg, rgb(4 10 19 / 45%), transparent 30%);
}
[dir="ltr"] .vo-catalog__window::after {
  background:
    linear-gradient(90deg, rgb(4 10 19 / 72%) 0%, rgb(4 10 19 / 30%) 50%, rgb(4 10 19 / 5%) 80%),
    linear-gradient(0deg, rgb(4 10 19 / 45%), transparent 30%);
}

.vo-catalog__inner {
  width: var(--vo-width);
  margin: 0 auto;
  padding-block: clamp(64px, 9vw, 120px);
}

/* Frosted glass over the still photo: it blurs whatever passes behind it
   as the page scrolls. */
.vo-catalog__panel {
  max-width: 540px;
  padding: clamp(28px, 3.6vw, 44px);
  border: 1px solid rgb(199 225 228 / 18%);
  border-radius: 26px;
  background: rgb(8 17 31 / 52%);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 30px 80px -30px rgb(3 8 15 / 70%);
}
.vo-catalog:not(.vo-catalog--window) .vo-catalog__panel { border: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding-inline: 0; }

.vo-page .vo-catalog .vo-heading { margin-bottom: 8px; color: var(--vo-band-ink); }
.vo-catalog__lede { max-width: 48ch; margin: 0; color: var(--vo-band-muted); font-size: 0.9375rem; line-height: 2; }

.vo-catalog__toc { margin: 24px 0 28px; }
.vo-catalog__toc div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 10px;
  border-top: 1px dashed var(--vo-band-line);
  font-size: 0.875rem;
}
.vo-catalog__toc div:last-child { border-bottom: 1px dashed var(--vo-band-line); }
.vo-catalog__toc dt { color: var(--vo-band-ink); font-weight: 600; }
.vo-catalog__toc dd { margin: 0; color: var(--vo-band-muted); }

.vo-catalog__download { margin-top: 28px; padding-inline: 20px 24px; }
.vo-catalog__toc + .vo-catalog__download { margin-top: 0; }
.vo-catalog__download svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.vo-catalog__meta { padding-inline-start: 12px; border-inline-start: 1px solid rgb(16 38 58 / 25%); font-size: 0.8125rem; font-weight: 500; opacity: 0.8; }

/* Answers the click: the arrow drops into the tray. */
.vo-catalog__download.is-downloading .vo-catalog__arrow { animation: vo-drop 0.7s cubic-bezier(0.5, 0, 0.3, 1) 2; }
@keyframes vo-drop {
  0% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(9px); opacity: 0; }
  61% { transform: translateY(-9px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ── Colour and purchase ── */
.vo-buy {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  align-items: stretch;
  gap: 24px;
  padding-bottom: 110px;
}

.vo-box {
  padding: 22px;
  border: 1px solid var(--vo-line);
  border-radius: 22px;
  background: var(--vo-card);
}

.vo-colors { margin: 0; padding: 0; border: 0; }
.vo-colors legend { margin-bottom: 10px; padding: 0; color: var(--vo-muted); font-size: 0.8125rem; }

.vo-color {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-areas: "swatch name price" "swatch stock stock";
  align-items: center;
  gap: 0 12px;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--vo-line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.vo-color input { position: absolute; opacity: 0; pointer-events: none; }
.vo-color:hover { border-color: var(--vo-accent); }
.vo-color.is-selected { border-color: var(--vo-turquoise); background: rgb(51 181 182 / 8%); box-shadow: inset 0 0 0 1px var(--vo-turquoise); }
.vo-color:has(input:focus-visible) { outline: 2px solid var(--vo-accent); outline-offset: 2px; }

.vo-color__swatch {
  grid-area: swatch;
  width: 28px;
  height: 28px;
  border: 1px solid rgb(16 35 58 / 20%);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 35%);
}

.vo-color__name { grid-area: name; color: var(--vo-ink); font-size: 0.9375rem; font-weight: 700; }
.vo-color__price { grid-area: price; color: var(--vo-ink); font-size: 0.875rem; font-weight: 700; white-space: nowrap; }
.vo-color__price small { color: var(--vo-muted); font-weight: 400; }
.vo-color__stock { grid-area: stock; color: var(--vo-muted); font-size: 0.75rem; }
.vo-color__stock.is-available { color: var(--vo-accent); }

.vo-purchase { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--vo-line); }
.vo-purchase__label { margin: 0; color: var(--vo-muted); font-size: 0.8125rem; }
.vo-purchase__label strong { color: var(--vo-ink); }
.vo-purchase__price { margin: 2px 0 0; color: var(--vo-muted); font-size: 0.875rem; }
.vo-purchase__price strong { color: var(--vo-ink); font-family: 'Lalezar', 'Vazirmatn', sans-serif; font-size: 2.25rem; font-weight: 400; line-height: 1.3; }
.vo-purchase__toman { margin: 0; color: var(--vo-muted); font-size: 0.8125rem; }

.vo-purchase__facts { margin: 16px 0; }
.vo-purchase__facts div { display: flex; justify-content: space-between; gap: 12px; padding-block: 7px; border-top: 1px dashed var(--vo-line); font-size: 0.8125rem; }
.vo-purchase__facts dt { color: var(--vo-muted); }
.vo-purchase__facts dd { margin: 0; color: var(--vo-ink); font-weight: 600; text-align: end; }

.vo-purchase__note { margin: 10px 0 0; color: var(--vo-muted); font-size: 0.75rem; line-height: 1.8; }
.vo-box__empty { margin: 0; color: var(--vo-muted); line-height: 2; }
.vo-box__empty a { color: var(--vo-accent); text-decoration: underline; text-underline-offset: 4px; }

/* Showroom: the car in the chosen colour on the hero's horizon. */
.vo-showroom {
  position: relative;
  isolation: isolate;
  min-height: 420px;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(40% 24% at 50% 72%, rgb(250 168 49 / 18%), transparent 72%),
    linear-gradient(180deg, #10233a 0%, #20334e 50%, #2c4f72 72%, #132a44 72.3%, #08111f 100%);
}

/* The horizon line, at the same height as the gradient's break. */
.vo-showroom::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 72%;
  z-index: -1;
  height: 2px;
  background: var(--vo-turquoise);
  box-shadow: 0 0 20px rgb(51 181 182 / 50%);
}


/* Centred with auto margins, not a transform, so the colour crossfade can
   scale it without moving it. */
.vo-showroom__car {
  position: absolute;
  inset-inline: 0;
  bottom: 22%;
  width: 84%;
  margin-inline: auto;
  max-height: 66%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  visibility: hidden;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 22px 18px rgb(0 0 0 / 45%));
}

.vo-showroom__car.is-active { opacity: 1; visibility: visible; }
/* A full photo fills the frame instead of standing on the horizon. */
.vo-showroom__fallback--photo { inset: 0; width: 100%; height: 100%; max-height: none; margin: 0; object-fit: cover; filter: none; }

.vo-showroom__note {
  position: absolute;
  top: 18px;
  inset-inline-start: 18px;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid var(--vo-band-line);
  border-radius: 999px;
  color: var(--vo-band-muted);
  font-size: 0.75rem;
}

.vo-noscript { width: var(--vo-width); margin: 0 auto 12px; }

.vo-empty-note {
  margin: 0;
  padding: 22px;
  border: 1px dashed var(--vo-line);
  border-radius: 20px;
  color: var(--vo-muted);
}
.vo-empty-note a { color: var(--vo-accent); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1100px) {
  .vo-keyfacts__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vo-keyfact { grid-column: span 2; }
  .vo-keyfact:nth-child(n + 4) { grid-column: span 3; }
}

@media (max-width: 960px) {
  .vo-buy { grid-template-columns: minmax(0, 1fr); }
  .vo-showroom { order: -1; min-height: 300px; }
  .vo-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }

  .vo-review__chapter { grid-template-columns: minmax(0, 1fr); }
  .vo-review__inline { grid-row: auto; margin-bottom: 16px; }

  /* Phones: the frame pins to the top and the chapters pass beneath it. */
  .vo-review.is-ready .vo-review__body { grid-template-columns: minmax(0, 1fr); }
  .vo-review.is-ready .vo-review__frame { --frame-h: min(36svh, 300px); top: 12px; z-index: 2; border-radius: 20px; }
  .vo-review.is-ready .vo-review__rail { display: none; }
  .vo-review.is-ready .vo-review__chapter { min-height: 64svh; justify-content: flex-start; padding-block: 40px 24px; }

  /* Phones: the panel sits low in the window so the photo shows above it. */
  .vo-catalog--window { align-items: flex-end; }
  .vo-catalog__window::after { background: linear-gradient(0deg, rgb(4 10 19 / 78%) 0%, rgb(4 10 19 / 35%) 55%, rgb(4 10 19 / 10%) 100%); }
}

@media (max-width: 767px) {
  .vo-page { margin-top: -52px; --vo-width: min(100% - 40px, 1240px); }

  /* No sticky curtain on phones: the panel needs its full height. */
  .vo-hero { position: relative; height: auto; min-height: 100svh; }
  .vo-hero-spacer { display: none; }
  .vo-curtain { margin-top: 0; }

  .vo-hero__heading { padding-top: 92px; }
  .vo-hero__model { font-size: clamp(3rem, 15vw, 4.25rem); }
  /* A landscape photo cropped to a tall screen would show half a car, so
     phones get it as a square band between the name and the offer; its dark
     ceiling and floor dissolve into the page. */
  .vo-hero__layer {
    inset: auto 0;
    top: calc(50% - 50vw - 20px);
    height: 100vw;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 84%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 14%, #000 84%, transparent);
  }
  .vo-hero__photo { object-position: 52% 55%; }
  .vo-hero__panel-inner { flex-direction: column; align-items: stretch; }
  .vo-hero__actions { flex-direction: row-reverse; justify-content: space-between; }
  .vo-hero__cta { flex: 1; }
  .vo-keyfacts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vo-keyfact, .vo-keyfact:nth-child(n + 4) { grid-column: auto; padding: 18px 16px 20px; }
  /* The odd tile spans the row, so it lies on its side: icon beside text. */
  .vo-keyfact:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
  }
  .vo-keyfact:last-child .vo-keyfact__icon { grid-row: 1 / 3; margin: 0; }
  .vo-keyfact__icon { width: 42px; height: 42px; margin-bottom: 14px; }
  .vo-keyfacts__mark { font-size: min(30vw, calc(170vw / var(--len, 6))); }

  /* Every tab shares one row at one width; long labels wrap inside their button. */
  .vo-page .spec-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 12px;
  }
  .vo-page .spec-tabs button {
    min-height: 48px;
    padding: 6px 4px;
    font-size: 0.75rem;
    line-height: 1.35;
    text-wrap: balance;
  }
}

@media (max-width: 640px) {
  .vo-section { padding-top: 64px; }
  .vo-review { padding-top: 72px; }
  .vo-showroom { min-height: 240px; }

  /* Phones: the first shot leads at full width and the rest sit under it as
     small tiles, three to a row. On six columns, so a short last row can
     share its width instead of leaving a hole. */
  .vo-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: auto; gap: 8px; }
  .vo-gallery__shot { grid-column: span 2; aspect-ratio: 4 / 3; border-radius: 12px; }
  .vo-gallery__shot img { position: absolute; inset: 0; }
  .vo-gallery__shot:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 10; border-radius: 18px; }
  /* Two left over: they halve the row. One left over: the last four pair up. */
  .vo-gallery__shot:nth-child(3n + 2):nth-last-child(2),
  .vo-gallery__shot:nth-child(3n + 2):nth-last-child(2) ~ .vo-gallery__shot,
  .vo-gallery__shot:nth-child(3n + 2):nth-last-child(4),
  .vo-gallery__shot:nth-child(3n + 2):nth-last-child(4) ~ .vo-gallery__shot { grid-column: span 3; }
  /* Just two shots: side by side, with no lead. */
  .vo-gallery__shot:first-child:nth-last-child(2) { grid-column: span 3; aspect-ratio: 4 / 3; border-radius: 12px; }
  .vo-gallery__shot:nth-child(2):last-child { grid-column: span 3; }
  /* A caption would cover a tile this small; the viewer still shows it. */
  .vo-gallery__shot:not(:first-child) .vo-gallery__caption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vo-hero { position: relative; }
  .vo-hero-spacer { display: none; }
  .vo-curtain { margin-top: 0; }
  .vo-hero__cta::before, .vo-hero__cta, .vo-hero__link { transition: none; }
  .vo-keyfact, .vo-keyfact__icon { transition: none; }
  .vo-gallery__shot, .vo-gallery__shot::after, .vo-lightbox__thumb, .vo-button, .vo-color,
  .vo-review__chapter { transition: none; }
  .vo-catalog__download.is-downloading .vo-catalog__arrow { animation: none; }
}

/* ── Vehicle page (catalog/detail.html) ──
   The model's description under its key facts, and the sale events that
   sell it in place of the event page's colour box. Each event card carries
   the hero's status dot: amber while the sale is live, turquoise before. */
.vo-keyfacts__about {
  position: relative;
  max-width: 68ch;
  margin-top: clamp(28px, 4vw, 44px);
  color: var(--vo-muted);
  font-size: 1rem;
  line-height: 2;
  text-wrap: pretty;
}
.vo-keyfacts__about p { margin: 0 0 12px; }

.vo-offers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vo-offer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  border: 1px solid var(--vo-line);
  border-radius: 22px;
  background: var(--vo-card);
  transition: border-color 0.25s ease;
}
.vo-offer:hover,
.vo-offer:focus-within { border-color: color-mix(in srgb, var(--vo-turquoise) 55%, transparent); }

.vo-offer__status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--vo-muted);
  font-size: 0.8125rem;
}
.vo-offer__status > span {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--vo-turquoise);
}
.vo-offer[data-phase="live"] .vo-offer__status > span { background: var(--vo-sun); box-shadow: 0 0 10px 2px rgb(250 168 49 / 45%); }

.vo-offer__name {
  margin: 0;
  color: var(--vo-ink);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.5;
}

.vo-offer__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 4px 0 14px;
  color: var(--vo-muted);
  font-size: 0.875rem;
}
.vo-offer__price strong {
  color: var(--vo-ink);
  font-family: 'Estedad', 'Vazirmatn', sans-serif;
  font-size: 1.5rem;
  font-weight: 650;
  line-height: 1.3;
}

.vo-offer .vo-button { margin-top: auto; }

.vo-offers__more { margin: 24px 0 0; }
.vo-offers__more a { color: var(--vo-accent); text-decoration: underline; text-underline-offset: 4px; }

/* The page ends on the offers; this gives the curtain its floor, as .vo-buy does on the event page. */
.vo-section--closing { padding-bottom: 110px; }

@media (prefers-reduced-motion: reduce) {
  .vo-offer { transition: none; }
}