/* Vehicle detail page.
 *
 * Everything is prefixed .vd- so nothing here can restyle the vehicle list or
 * the booking form, which load base.css's .card and .btn. The tokens are the
 * service page's, on purpose: the two pages are one design.
 *
 * Breakpoints, widest first:
 *   >= 1080  two columns, sticky booking card beside the gallery
 *   720-1079 one column, mosaic gallery, card directly after the four facts
 *   <  720   full-bleed photo, no side tiles, fixed bottom bar
 */
.vd {
  --vd-accent: #FF385C;
  --vd-accent-hover: #E8304F;
  /* White on #FF385C is 3.5:1 - fine for a 40px price, not for a 16px label.
     Anything small and pink, and every filled button, uses this instead. */
  --vd-accent-strong: #E11D48;
  --vd-accent-dark: #C81E3C;
  --vd-tint: #FFF0F3;
  --vd-brand: #B8283F;
  --vd-ink: #1C1B1F;
  --vd-muted: #6F6A6E;
  --vd-line: #ECE9EA;
  --vd-line-soft: #EFEDEE;
  --vd-surface: #F3F1F2;
  --vd-gutter: clamp(16px, 4vw, 40px);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--vd-gutter) 64px;
  color: var(--vd-ink);
}
.vd *, .vd-bar *, .vd-lb *, .vd-sheet * { box-sizing: border-box; }
/* :where() so this reset weighs nothing: as `.vd button` it outranked every
   single-class rule below and quietly un-bolded, and un-coloured, each one. */
:where(.vd, .vd-bar, .vd-lb, .vd-sheet) button { font: inherit; color: inherit; }

/* ── Back link and breadcrumb ─────────────────────────────────────────── */
.vd-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 16px; flex-wrap: wrap; padding: 20px 0 16px;
}
/* nowrap: at tablet widths this pill used to break into two lines. */
.vd-back {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--vd-line); border-radius: 999px; background: #fff;
  color: var(--vd-ink); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.vd-back:hover { border-color: var(--vd-ink); color: var(--vd-ink); }
.vd-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--vd-muted); }
.vd-crumbs a {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 44px; min-height: 44px; color: var(--vd-muted); text-decoration: none;
}
.vd-crumbs a:hover { color: var(--vd-ink); text-decoration: underline; }
.vd-crumbs > span[aria-hidden] { flex: none; }
.vd-crumbs-here { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vd-ink); font-weight: 700; text-transform: capitalize; }

/* ── Layout ───────────────────────────────────────────────────────────── */
/* The card is a grid sibling of the gallery, the title and the rest, so the
   single column follows DOM order (gallery, facts, card, about, owner) and
   the desktop grid lifts it into the right-hand column instead. */
.vd-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 32px); align-items: start; }
.vd-gallery, .vd-head, .vd-rest, .vd-card { min-width: 0; }

/* ── Gallery ──────────────────────────────────────────────────────────── */
.vd-mosaic { display: block; }
.vd-stage {
  position: relative; overflow: hidden; border-radius: 22px; background: var(--vd-ink);
  height: min(80vw, 440px);
  /* A phone on its side is 390px tall: without a ceiling the photo is taller
     than the screen and can never be seen whole. */
  max-height: max(220px, calc(100vh - 120px));
}
.vd-stage-blur {
  position: absolute; inset: -60px; background-size: cover; background-position: center;
  filter: blur(36px) saturate(1.3) brightness(0.55);
}
/* contain, over a blurred copy of itself: a car photographed in portrait is
   shown whole, not cropped to its bonnet. */
.vd-stage-img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.vd-stage-img.is-swapping { opacity: 0; transform: scale(1.04); }
.vd-stage-missing { display: none; position: absolute; inset: 0; place-items: center; background: var(--vd-surface); color: #A8A3A6; }
.vd-stage.is-broken .vd-stage-img, .vd-stage.is-broken .vd-stage-blur { visibility: hidden; }
.vd-stage.is-broken .vd-stage-missing { display: grid; }
.vd-stage-open { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.vd-stage-open:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

.vd-stage-top, .vd-stage-foot {
  position: absolute; left: clamp(12px, 2vw, 18px); right: clamp(12px, 2vw, 18px);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none;
}
.vd-stage-top { top: clamp(12px, 2vw, 18px); align-items: flex-start; }
.vd-stage-foot { bottom: clamp(12px, 2vw, 18px); align-items: flex-end; }
.vd-stage-top > *, .vd-stage-foot > * { pointer-events: auto; }
.vd-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.vd-badge--ok { background: #EEF8F1; color: #1C7A43; }
.vd-badge--off { background: #F1EFF0; color: #5F5A5E; }
.vd-dot { width: 7px; height: 7px; border-radius: 50%; background: #22A05A; }
.vd-stage-actions { display: flex; gap: 8px; margin-left: auto; }
.vd-save-form { margin: 0; }
.vd-save-form--round, .vd-save-form--icon { display: block; flex: none; }
.vd-round, .vd-save--round {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--vd-ink);
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.2); flex: none; text-decoration: none;
}
.vd-round:hover, .vd-save--round:hover { background: var(--vd-tint); color: var(--vd-ink); }
.vd-save svg { fill: none; stroke: currentColor; flex: none; }
.vd-save.is-saved svg { fill: var(--vd-accent); stroke: var(--vd-accent); }
.vd-caption {
  min-width: 0; padding: 8px 14px; border-radius: 999px; background: rgba(28, 27, 31, 0.72); color: #fff;
  font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vd-pager { display: flex; align-items: center; gap: 2px; flex: none; padding: 4px; border-radius: 999px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.22); }
/* 36px to look at, 44px to hit: the ring is the ::before. */
.vd-pager-btn {
  position: relative; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  display: grid; place-items: center; cursor: pointer; color: var(--vd-ink);
}
.vd-pager-btn::before { content: ''; position: absolute; inset: -4px; }
.vd-pager-btn:hover { background: var(--vd-surface); }
.vd-pager-btn--next, .vd-pager-btn--next:hover { background: var(--vd-accent-strong); color: #fff; }
.vd-pager-count { min-width: 38px; padding: 0 4px; text-align: center; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vd-pager-btn--play .vd-icon-play, .vd-pager-btn--play[aria-pressed="true"] .vd-icon-pause { display: none; }
.vd-pager-btn--play[aria-pressed="true"] .vd-icon-play { display: block; }
.vd-pager-btn:focus-visible, .vd-round:focus-visible, .vd-save:focus-visible { outline: 3px solid var(--vd-ink); outline-offset: 2px; }

.vd-tile { display: none; position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: var(--vd-surface); cursor: pointer; }
.vd-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.vd-tile:hover img { transform: scale(1.04); }
.vd-tile:focus-visible { outline: 3px solid var(--vd-ink); outline-offset: 2px; }
.vd-tile-tag { position: absolute; left: 10px; top: 10px; padding: 5px 10px; border-radius: 999px; background: #fff; color: var(--vd-ink); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; }
.vd-tile--more { background: var(--vd-ink); }
.vd-tile--more img { opacity: 0.32; }
.vd-tile-more { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; color: #fff; text-align: center; }
.vd-tile-more strong { font-size: clamp(16px, 2vw, 22px); font-weight: 800; letter-spacing: -0.02em; }
.vd-tile-more small { font-size: 13px; opacity: 0.85; }

.vd-rail { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.vd-rail::-webkit-scrollbar { display: none; }
.vd-thumb { flex: 0 0 clamp(72px, 22vw, 100px); min-width: 0; padding: 0; border: 0; background: transparent; cursor: pointer; display: block; }
.vd-thumb-img { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--vd-surface); }
.vd-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.62; transition: opacity 0.2s; }
.vd-thumb:hover img, .vd-thumb.is-on img { opacity: 1; }
.vd-thumb-bar { display: block; height: 3px; margin: 6px 8px 0; border-radius: 2px; background: transparent; }
.vd-thumb.is-on .vd-thumb-bar { background: var(--vd-accent); }
.vd-thumb:focus-visible .vd-thumb-img { outline: 3px solid var(--vd-ink); outline-offset: 1px; }
.vd-rail-all {
  display: none; flex: 0 0 clamp(84px, 24vw, 104px); align-items: center; justify-content: center; align-self: flex-start;
  aspect-ratio: 4 / 3; padding: 4px; border: 1px solid var(--vd-line); border-radius: 12px; background: #fff;
  font-size: 12px; font-weight: 700; line-height: 1.35; text-align: center; cursor: pointer;
}

.vd-stage.vd-stage--empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  height: clamp(220px, 34vw, 340px); background: var(--vd-surface); color: #8A8589; text-align: center; padding: 20px;
}
.vd-stage--empty p { margin: 0; font-size: 14px; font-weight: 600; }

/* ── Title and facts ──────────────────────────────────────────────────── */
.vd-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.vd-pill { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: var(--vd-tint); color: var(--vd-accent-dark); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.vd-plate {
  display: inline-flex; align-items: center; padding: 4px 9px; border: 1px solid #D9D5D7; border-radius: 7px; background: #F6F4F5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap;
}
.vd-title {
  margin: 0; font-size: clamp(28px, 5vw, 44px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em;
  text-transform: capitalize; text-wrap: pretty;
  /* A title is never truncated, so one long unbroken word must be allowed to
     break or it sets the page's width on a phone. */
  overflow-wrap: anywhere;
}
.vd-meta { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin: 10px 0 0; font-size: 14px; color: var(--vd-muted); }
.vd-meta-by { min-width: 0; overflow-wrap: anywhere; }
.vd-meta-by a { font-weight: 700; color: var(--vd-accent-dark); text-decoration: none; }
.vd-meta-by a:hover { text-decoration: underline; }
.vd-meta-place { display: inline-flex; align-items: center; gap: 4px; }

/* minmax's second value is a floor, not a preference: a bare 150px lays a
   card out at 150px inside whatever a 280px phone leaves. */
.vd-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; margin-top: 22px; }
.vd-spec { display: flex; flex-direction: column; min-width: 0; padding: 16px; border: 1px solid var(--vd-line); border-radius: 16px; background: #fff; }
.vd-spec-icon { width: 38px; height: 38px; border-radius: 12px; background: var(--vd-tint); color: var(--vd-accent-hover); display: grid; place-items: center; margin-bottom: 14px; }
.vd-spec-label { font-size: 12px; color: var(--vd-muted); }
.vd-spec-value { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.vd-spec-value--price { color: var(--vd-accent-strong); }
.vd-spec-value--ok { color: #1C7A43; }
.vd-spec-value--off { color: #5F5A5E; }

/* ── Booking card ─────────────────────────────────────────────────────── */
.vd-card { padding: clamp(20px, 2.4vw, 26px); border: 1px solid var(--vd-line); border-radius: 22px; background: #fff; box-shadow: 0 12px 40px rgba(28, 27, 31, 0.08); }
.vd-card-label { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vd-muted); }
.vd-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.vd-price-amount { font-size: clamp(32px, 4vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--vd-accent); }
.vd-price-amount--text { font-size: 24px; color: var(--vd-ink); }
.vd-price-unit { font-size: 15px; font-weight: 600; color: var(--vd-muted); }
.vd-card-sub { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 14px; color: var(--vd-muted); }
.vd-card-sub svg { flex: none; }

.vd-days { margin-top: 18px; padding: 14px; border: 1px solid var(--vd-line); border-radius: 16px; }
.vd-days-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vd-days-text { min-width: 0; }
.vd-days-title { font-size: 15px; font-weight: 800; }
.vd-days-sub { font-size: 12px; color: var(--vd-muted); }
.vd-stepper { display: flex; align-items: center; gap: 4px; flex: none; }
.vd-step { width: 44px; height: 44px; padding: 0; border: 1px solid #D9D5D7; border-radius: 50%; background: #fff; display: grid; place-items: center; cursor: pointer; }
.vd-step:hover { border-color: var(--vd-ink); }
.vd-step:disabled { opacity: 0.4; cursor: not-allowed; border-color: #D9D5D7; }
.vd-step:focus-visible { outline: 3px solid var(--vd-ink); outline-offset: 2px; }
.vd-step-value { min-width: 28px; text-align: center; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vd-sum { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--vd-line-soft); }
.vd-sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; font-size: 14px; color: #4A4549; }
.vd-sum-row--total { margin-top: 8px; font-size: 15px; font-weight: 800; color: var(--vd-ink); }
.vd-sum-row--total strong { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--vd-accent-strong); }
.vd-days-hint { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: #FFF6E5; border: 1px solid #F4D9A6; color: #8A4B00; font-size: 13px; line-height: 1.45; }
.vd-fine { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--vd-muted); }

.vd-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
/* The site's own .btn.btn-block, sized up - not a second full-width
   convention (test_button_markup counts them). */
.vd-card .btn-block { min-height: 54px; border-radius: 14px; font-size: 17px; font-weight: 700; }
.vd-card .vd-book { background: var(--vd-accent-strong); color: #fff; box-shadow: 0 6px 18px rgba(255, 56, 92, 0.28); }
.vd-card .vd-book:hover { background: var(--vd-accent-dark); color: #fff; transform: none; }
.vd-card .vd-book.is-off, .vd-bar-book.is-off { background: #E7E4E5; color: #5F5A5E; box-shadow: none; cursor: not-allowed; }
.vd-card .vd-call { border: 1.5px solid var(--vd-accent-strong); color: var(--vd-accent-dark); background: #fff; }
.vd-card .vd-call:hover { background: var(--vd-tint); color: var(--vd-accent-dark); transform: none; }
.vd-card .btn:focus-visible { outline: 3px solid var(--vd-ink); outline-offset: 2px; }
.vd-reason { margin: 0; font-size: 13px; line-height: 1.5; color: var(--vd-muted); }
.vd-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #F6F4F5; font-size: 13px; line-height: 1.5; color: #4A4549; }
.vd-note svg { flex: none; margin-top: 1px; color: #1C7A43; }
.vd-note strong { color: var(--vd-ink); }
.vd-save-form--row { display: block; margin-top: 8px; }
a.vd-save--row { margin-top: 8px; }
.vd-save--row {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; padding: 0;
  border: 0; border-radius: 14px; background: transparent; cursor: pointer; font-weight: 700; font-size: 15px; color: var(--vd-ink); text-decoration: none;
}
.vd-save--row:hover { background: #F6F4F5; color: var(--vd-ink); }

/* ── About, cover, owner ──────────────────────────────────────────────── */
.vd-section { padding: 26px 0; border-top: 1px solid var(--vd-line-soft); min-width: 0; }
.vd-rest > .vd-section:last-child { padding-bottom: 0; }
.vd-section h2 { margin: 0 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.vd-prose { margin: 0; font-size: 16px; line-height: 1.7; color: #4A4549; max-width: 62ch; white-space: pre-line; overflow-wrap: anywhere; }
.vd-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.vd-chip { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 14px; border: 1px solid var(--vd-line); border-radius: 999px; font-size: 14px; font-weight: 600; }
.vd-chip svg { flex: none; color: var(--vd-accent-strong); }
.vd-chip span { min-width: 0; overflow-wrap: anywhere; }
.vd-covers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 0 28px; }
.vd-covers li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--vd-line); font-size: 15px; color: #4A4549; }
.vd-covers strong { color: var(--vd-ink); text-align: right; }

.vd-owner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px; border: 1px solid var(--vd-line); border-radius: 18px; background: #FCFBFB; }
.vd-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--vd-brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 19px; flex: none; }
.vd-owner-text { flex: 1 1 180px; min-width: 0; }
.vd-owner-name { font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
.vd-owner-line { display: flex; flex-wrap: wrap; gap: 2px 0; margin-top: 4px; font-size: 14px; color: var(--vd-muted); }
.vd-owner-line span + span::before { content: '•'; margin: 0 8px; color: #C9C4C7; }
.vd-owner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 1px solid transparent; border-radius: 12px; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.vd-btn--outline { border-color: var(--vd-ink); color: var(--vd-ink); background: #fff; }
.vd-btn--outline:hover { background: #F6F4F5; color: var(--vd-ink); }
.vd-btn--dark { background: var(--vd-ink); color: #fff; }
.vd-btn--dark:hover { background: #000; color: #fff; }
.vd-btn:focus-visible, .vd-back:focus-visible, .vd-mcard:focus-visible, .vd-more-all:focus-visible { outline: 3px solid var(--vd-ink); outline-offset: 2px; }

/* ── More from the owner ──────────────────────────────────────────────── */
.vd-more { margin-top: clamp(36px, 5vw, 56px); min-width: 0; }
.vd-more-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.vd-more-text { min-width: 0; flex: 1 1 240px; }
.vd-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vd-accent-dark); }
.vd-more h2 { margin: 4px 0 0; font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.vd-more-all { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--vd-accent-dark); text-decoration: none; border-radius: 8px; }
.vd-more-all:hover { text-decoration: underline; color: var(--vd-accent-dark); }
.vd-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 16px; }
.vd-mcard { display: flex; flex-direction: column; min-width: 0; padding: 10px; border: 1px solid var(--vd-line); border-radius: 18px; background: #fff; color: inherit; text-decoration: none; transition: box-shadow 0.2s, transform 0.2s; }
.vd-mcard:hover { box-shadow: 0 10px 28px rgba(28, 27, 31, 0.12); transform: translateY(-3px); color: inherit; }
.vd-mcard-photo { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--vd-surface); }
.vd-mcard-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-mcard-type { position: absolute; left: 8px; top: 8px; max-width: calc(100% - 16px); padding: 4px 10px; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-mcard-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 12px 4px 4px; min-width: 0; }
.vd-mcard-name { font-size: 16px; font-weight: 800; line-height: 1.3; text-transform: capitalize; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.vd-mcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.vd-mcard-price { min-width: 0; font-size: 18px; font-weight: 800; color: var(--vd-accent-strong); }
.vd-mcard-price small { font-size: 12px; font-weight: 600; color: var(--vd-muted); }
.vd-mcard-go { width: 32px; height: 32px; border-radius: 50%; background: var(--vd-tint); color: var(--vd-accent-strong); display: grid; place-items: center; flex: none; }

/* ── Phone bar, toast ─────────────────────────────────────────────────── */
.vd-bar { display: none; }
.vd-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2200;
  padding: 12px 18px; border-radius: 12px; background: #1C1B1F; color: #fff;
  font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.25); max-width: calc(100vw - 32px);
}

/* ── All photos: above the nav (999) and the assistant launcher (1200) ── */
.vd-sheet { position: fixed; inset: 0; z-index: 2050; background: #fff; display: flex; flex-direction: column; color: #1C1B1F; }
.vd-sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px clamp(16px, 3vw, 32px); border-bottom: 1px solid #ECE9EA; }
.vd-sheet-close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid #ECE9EA; border-radius: 999px; background: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.vd-sheet-close:hover { border-color: #1C1B1F; }
.vd-sheet-title { font-size: 15px; font-weight: 800; }
.vd-sheet-spacer { width: 90px; }
.vd-sheet-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.vd-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 1000px; margin: 0 auto; padding: clamp(12px, 3vw, 28px); }
.vd-sheet-item { display: block; min-width: 0; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #F3F1F2; aspect-ratio: 4 / 3; cursor: zoom-in; }
/* The rhythm: one wide, two side by side, one wide, two side by side. */
.vd-sheet-item:nth-child(3n + 1) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.vd-sheet-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-sheet button:focus-visible { outline: 3px solid #1C1B1F; outline-offset: 2px; }

/* ── Fullscreen viewer ────────────────────────────────────────────────── */
.vd-lb { position: fixed; inset: 0; z-index: 2100; background: rgba(14, 12, 14, 0.96); display: flex; flex-direction: column; }
.vd-lb-top { display: flex; align-items: center; justify-content: space-between; padding: 16px clamp(16px, 3vw, 32px); color: #fff; }
.vd-lb-close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: rgba(255,255,255,0.12); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
.vd-lb-close:hover { background: rgba(255,255,255,0.2); }
.vd-lb-count { font-size: 14px; font-weight: 700; }
.vd-lb-spacer { width: 90px; }
.vd-lb-mid { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 clamp(8px, 3vw, 32px); }
.vd-lb-arrow { flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.vd-lb-arrow:hover { background: rgba(255,255,255,0.24); }
.vd-lb-img { max-width: min(1100px, 100%); max-height: 100%; min-width: 0; object-fit: contain; border-radius: 12px; display: block; }
.vd-lb-thumbs { display: flex; gap: 8px; padding: 16px; overflow-x: auto; scrollbar-width: none; }
.vd-lb-thumbs::-webkit-scrollbar { display: none; }
/* auto margins, not justify-content:center - centring an overflowing flex
   row puts its first items past the left edge where no scroll can reach. */
.vd-lb-thumb:first-child { margin-left: auto; }
.vd-lb-thumb:last-child { margin-right: auto; }
.vd-lb-thumb { flex: none; width: 72px; height: 52px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; opacity: 0.55; background: #222; }
.vd-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-lb-thumb.is-on { border-color: #FF385C; opacity: 1; }
.vd-lb button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
body.vd-modal-open { overflow: hidden; }

/* ── Tablet and up: the mosaic ────────────────────────────────────────── */
@media (min-width: 720px) {
  .vd-mosaic {
    display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
    height: clamp(360px, 50vw, 480px); max-height: max(260px, calc(100vh - 120px));
  }
  .vd-stage { grid-column: 1; grid-row: 1 / span 2; height: auto; max-height: none; }
  .vd-tile { display: block; }
  /* One photo: no tiles were rendered, so the photo takes the whole width. */
  .vd-gallery--n1 .vd-mosaic { grid-template-columns: minmax(0, 1fr); }
  /* Two photos: there is no "+N" tile, so UP NEXT fills the column. */
  .vd-gallery--n2 .vd-tile--next { grid-row: 1 / span 2; }
  /* The rail fills the width, up to a size where a thumbnail stops being one. */
  .vd-thumb { flex: 1 0 84px; max-width: 132px; }
}

/* ── Desktop ──────────────────────────────────────────────────────────── */
@media (min-width: 1080px) {
  .vd-layout { grid-template-columns: minmax(0, 1fr) 380px; column-gap: clamp(28px, 4vw, 48px); }
  .vd-gallery { grid-column: 1; grid-row: 1; }
  .vd-head { grid-column: 1; grid-row: 2; }
  .vd-rest { grid-column: 1; grid-row: 3; }
  /* The header is fixed and --nav-height tall, so that is where "top" is. */
  .vd-card { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: calc(var(--nav-height, 150px) + 16px); }
  .vd-mosaic { height: clamp(420px, 36vw, 520px); }
}
/* On a short laptop the card is taller than what the header leaves. Sticky
   would pin its top and put Book Now permanently below the fold. */
@media (min-width: 1080px) and (max-height: 819.98px) {
  .vd-card { position: static; }
}

/* ── Phone ────────────────────────────────────────────────────────────── */
@media (max-width: 719.98px) {
  .vd { padding-bottom: 28px; }
  .vd-top { padding-top: 14px; }
  .vd-gallery:not(.vd-gallery--n0) { margin: 0 calc(-1 * var(--vd-gutter)); }
  .vd-gallery:not(.vd-gallery--n0) .vd-stage { border-radius: 0; }
  .vd-rail { padding: 2px var(--vd-gutter); }
  .vd-gallery--n3 .vd-rail-all { display: flex; }
  /* Two to a row: one full-width card per screen made eight vehicles an
     eight-screen scroll to the footer. */
  .vd-more-grid { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 12px; }
  .vd-mcard { padding: 8px; }
  .vd-mcard-name { font-size: 14px; }
  .vd-mcard-price { font-size: 16px; }
  .vd-mcard-go { display: none; }

  .vd-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #ECE9EA; box-shadow: 0 -6px 20px rgba(28,27,31,0.06); color: #1C1B1F;
  }
  .vd-bar-price { flex: 1; min-width: 0; }
  .vd-bar-amount { font-size: 19px; font-weight: 800; color: #E11D48; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vd-bar-amount--text { font-size: 15px; color: #1C1B1F; white-space: normal; }
  .vd-bar-sub { font-size: 12px; font-weight: 600; color: #1C7A43; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vd-bar-sub--muted { color: #6F6A6E; }
  .vd-save--icon { width: 48px; height: 48px; padding: 0; border: 1px solid #ECE9EA; border-radius: 14px; background: #fff; display: grid; place-items: center; cursor: pointer; color: #1C1B1F; flex: none; text-decoration: none; }
  .vd-bar-book { display: inline-flex; align-items: center; height: 48px; padding: 0 clamp(14px, 4vw, 22px); border-radius: 14px; background: #E11D48; color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; text-decoration: none; flex: none; }
  .vd-bar-book:hover { color: #fff; }

  /* Room for the bar under the footer, and the assistant launcher lifted
     clear of it - otherwise the two sit on top of each other and the last
     line of the footer can never be scrolled into view. */
  body:has(.vd-bar) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body:has(.vd-bar) #planveta-assistant { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .vd-toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .vd-lb-arrow { width: 44px; height: 44px; }
  .vd-lb-mid { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .vd-stage-img, .vd-tile img, .vd-mcard, .vd-thumb-img img { transition: none; }
  .vd-stage-img.is-swapping { transform: none; }
  .vd-tile:hover img, .vd-mcard:hover { transform: none; }
}