/* =========================================================
   vehicle.html (VDP) styles + inventory-page filter/dropdown styles.
   Reuses tokens from styles.css and inventory.css.
   INFINITI brand rules at the bottom (scoped to .page-new / .page-cpo).
   ========================================================= */

.vdp {
  padding: clamp(20px, 3vh, 32px) var(--pad) 0;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}

/* ---------- skeleton ---------- */
.vdp__skel {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  margin-top: 24px;
}
@media (min-width: 760px) {
  .vdp__skel {
    grid-template-columns: 1.4fr 1fr;
    align-items: start;
  }
}
.vdp__skel-photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(
      135deg,
      oklch(94% 0.025 85) 0px,
      oklch(94% 0.025 85) 8px,
      oklch(91% 0.03 80) 8px,
      oklch(91% 0.03 80) 16px
    );
  border: 1px solid var(--line);
}
.vdp__skel-meta { display: grid; gap: 12px; }
.vdp__skel-line {
  height: 14px;
  border-radius: 4px;
  background: var(--line);
}
.vdp__skel-line--lg { height: 36px; }

/* ---------- header ---------- */
.vdp__head {
  margin: 0 0 clamp(20px, 3vh, 28px);
  display: grid; gap: 8px;
}
.vdp__badge {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--page-accent, var(--accent));
  padding: 5px 10px;
  border: 1.5px solid var(--page-accent, var(--accent));
  border-radius: 4px;
  background: oklch(from var(--page-accent, var(--accent)) l c h / .12);
  width: fit-content;
}
.vdp__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 6px 0 0;
}
.vdp__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 48px);
  letter-spacing: -.025em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "wdth" 92;
}
.vdp__title em {
  font-style: italic;
  color: var(--page-accent, var(--accent));
}
.vdp__sub {
  color: var(--ink-soft);
  font-size: clamp(14px, 1.1vw, 16px);
  margin: 2px 0 0;
}

/* ---------- top layout: gallery + pricebar (2-col on desktop) ---------- */
.vdp__top {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  margin: 0 0 clamp(24px, 3vh, 32px);
}
@media (min-width: 960px) {
  .vdp__top {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
    align-items: start;
  }
}

/* ---------- gallery ---------- */
.vdp__gallery {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.vdp__gallery-frame {
  position: relative;
}
.vdp__gallery-main {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  width: 100%;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.vdp__gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.vdp__gallery-count {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: oklch(0% 0 0 / .62);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  padding: 6px 10px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
}

/* Prev/next arrows over the main image. */
.vdp__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: oklch(0% 0 0 / .55);
  color: #fff;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.vdp__nav:hover { background: oklch(0% 0 0 / .8); transform: translateY(-50%) scale(1.04); }
.vdp__nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.vdp__nav--prev { left: 12px; }
.vdp__nav--next { right: 12px; }
@media (min-width: 760px) {
  .vdp__nav { width: 48px; height: 48px; }
  .vdp__nav--prev { left: 16px; }
  .vdp__nav--next { right: 16px; }
}

.vdp__gallery--empty .vdp__gallery-main {
  display: grid;
  place-items: center;
  cursor: default;
  background:
    repeating-linear-gradient(
      135deg,
      oklch(94% 0.025 85) 0px,
      oklch(94% 0.025 85) 8px,
      oklch(91% 0.03 80) 8px,
      oklch(91% 0.03 80) 16px
    );
}
.vdp__gallery--empty .vdp__gallery-main span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper-2);
  padding: 6px 10px;
  border-radius: 4px;
  border: 1.5px dashed var(--line-2);
}

/* Thumb strip — single horizontal row, swipeable on mobile, arrow-driven on
   desktop. Scrolls in sync with the main image because show() calls
   scrollIntoView({ inline: 'center' }) on the active thumb. */
.vdp__thumbs {
  list-style: none;
  padding: 4px 2px;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  /* Body has touch-action: pan-y (scroll lock). Opt this strip back into
     horizontal touch panning so the thumb carousel stays swipeable on
     mobile, and contain any overscroll so it doesn't bleed into the
     page-level scroll. */
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  /* Soft fade on the right edge to hint there's more. Mirrored on the left
     when scrolled. */
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 16px,
    #000 calc(100% - 28px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 16px,
    #000 calc(100% - 28px),
    transparent 100%
  );
}
.vdp__thumbs::-webkit-scrollbar { display: none; }
.vdp__thumbs > li {
  flex: 0 0 auto;
  width: clamp(80px, 12vw, 116px);
  scroll-snap-align: center;
}
.vdp__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: var(--paper-2);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.vdp__thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.vdp__thumb:hover { border-color: var(--ink); transform: translateY(-1px); }
.vdp__thumb.is-active {
  border-color: var(--page-accent, var(--accent));
  outline: 2px solid var(--page-accent, var(--accent));
  outline-offset: -2px;
}

/* ---------- pricebar (sticky on desktop in the right column) ---------- */
.vdp__pricebar {
  display: grid;
  gap: 16px;
  padding: 18px 20px;
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
}
@media (min-width: 960px) {
  .vdp__top .vdp__pricebar {
    position: sticky;
    top: 20px;
    grid-template-columns: 1fr;
  }
}
.vdp__price {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 10px;
  row-gap: 6px;
  align-items: baseline;
}
.vdp__price-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 34px);
  letter-spacing: -.02em;
  color: var(--ink);
  font-variation-settings: "wdth" 100;
  grid-column: 1;
  grid-row: 1;
}
.vdp__price-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  grid-column: 2;
  grid-row: 1;
}

/* MSRP block (no strikethrough). Lives on its own row under the sale price. */
.vdp__price-msrp {
  grid-column: 1 / -1;
  grid-row: 3;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.vdp__price-msrp-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.01em;
}
.vdp__price-msrp-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.vdp__price-savings {
  grid-column: 1 / -1;
  grid-row: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: oklch(58% 0.18 145);
  background: oklch(95% 0.04 145);
  padding: 4px 8px;
  border-radius: 4px;
  width: fit-content;
}

.vdp__price-miles {
  grid-column: 1 / -1;
  grid-row: 5;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--line-2);
}

/* Sale + Dealer Fee = Total breakdown table on the VDP pricebar. Slotted
   into the .vdp__price grid (row 4) so it sits directly under the
   headline price + MSRP/savings rows. */
.vdp__price-breakdown {
  grid-column: 1 / -1;
  grid-row: 4;
  display: grid;
  gap: 6px;
  margin-top: 6px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.vdp__price-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
}
.vdp__price-line span:first-child {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.vdp__price-line span:last-child {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.vdp__price-line--total {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
}
.vdp__price-line--total span:first-child {
  color: var(--ink);
}
.vdp__price-line--total span:last-child {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
}

.vdp__cta {
  display: grid;
  gap: 8px;
}
.vdp__cta .btn { width: 100%; justify-content: center; }

/* ---------- specs + notes grid ---------- */
.vdp__grid {
  display: grid;
  gap: clamp(20px, 3vw, 28px);
  margin: 0 0 clamp(40px, 5vh, 64px);
}
@media (min-width: 860px) {
  .vdp__grid {
    grid-template-columns: minmax(280px, 360px) 1fr;
    align-items: start;
  }
}
.vdp__specs-card,
.vdp__notes-card {
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 2.5vw, 28px);
}
.vdp__h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -.015em;
  margin: 0 0 14px;
  font-variation-settings: "wdth" 96;
}
.vdp__notes-card .vdp__h2 + * { margin-top: 0; }
.vdp__notes-card > * + .vdp__h2 { margin-top: 24px; }

.vdp__specs {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0;
}
.vdp__specs li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}
.vdp__specs li:last-child { border-bottom: 0; }
.vdp__specs li span:first-child {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.vdp__specs li span:last-child {
  color: var(--ink);
  font-weight: 500;
  text-align: right;
}

.vdp__desc {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  max-width: 70ch;
  white-space: pre-line;
}

.vdp__chips {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.vdp__chips li {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 10px;
}

/* Conditional offers panel — rebates and APRs that depend on
   eligibility (military, college grad, loyalty). Lives inside the
   pricebar directly below the CTAs so the offers ride the sticky
   right rail on desktop and stack between CTAs and specs on mobile.
   Each offer's name + amount is visible at a glance; the legal
   disclaimer is hidden behind a native <details> per row. */
.vdp__cond {
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed var(--line);
}
.vdp__cond-h {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.vdp__cond-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: grid;
  gap: 0;
}
.vdp__cond-list li {
  padding: 0;
  border-bottom: 1px dashed var(--line);
}
.vdp__cond-list li:last-child { border-bottom: 0; }

.vdp__cond-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13.5px;
  flex: 1;
  min-width: 0;
}
.vdp__cond-name { color: var(--ink); font-weight: 500; }
.vdp__cond-amt {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vdp__cond-sub {
  margin: 14px 0 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.vdp__cond-foot {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
  font-style: italic;
}

/* Per-row disclosure: name + amount visible; "Details" toggle reveals
   the disclaimer paragraph. Uses native <details>, so it works without
   JS and is keyboard + screen-reader accessible. */
.vdp__cond-detail {
  padding: 0;
}
.vdp__cond-summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
}
.vdp__cond-summary::-webkit-details-marker { display: none; }
.vdp__cond-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex-shrink: 0;
  user-select: none;
}
.vdp__cond-summary:hover .vdp__cond-more { color: var(--ink); }
.vdp__cond-chev {
  transition: transform .2s var(--ease);
}
.vdp__cond-detail[open] .vdp__cond-chev { transform: rotate(180deg); }
.vdp__cond-detail[open] .vdp__cond-more-label::after { content: ""; }
.vdp__cond-fine {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.55;
}

/* List items with no disclaimer (bare row, no <details>): same vertical
   rhythm as the summary so the panel reads as one consistent list. */
.vdp__cond-list li > .vdp__cond-row {
  padding: 10px 0;
}

/* INFINITI brand override so the panel reads on the new/cpo VDPs. */
.page-new .vdp__cond,
.page-cpo .vdp__cond {
  border-top-color: oklch(from #B0A591 l c h / .5);
}
.page-new .vdp__cond-h,
.page-cpo .vdp__cond-h,
.page-new .vdp__cond-sub,
.page-cpo .vdp__cond-sub { color: oklch(from #020B24 l c h / .6); }
.page-new .vdp__cond-name,
.page-cpo .vdp__cond-name,
.page-new .vdp__cond-amt,
.page-cpo .vdp__cond-amt { color: var(--infiniti-blue); }
.page-new .vdp__cond-list li,
.page-cpo .vdp__cond-list li {
  border-bottom-color: oklch(from #B0A591 l c h / .35);
}
.page-new .vdp__cond-fine,
.page-cpo .vdp__cond-fine { color: oklch(from #020B24 l c h / .72); }
.page-new .vdp__cond-more,
.page-cpo .vdp__cond-more { color: oklch(from #020B24 l c h / .55); }
.page-new .vdp__cond-foot,
.page-cpo .vdp__cond-foot { color: oklch(from #020B24 l c h / .55); }

.vdp__fetched {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: right;
  margin: -16px 0 clamp(40px, 5vh, 56px);
}

.vdp__err {
  padding: clamp(40px, 6vh, 80px) 0;
  display: grid; gap: 14px;
  max-width: 56ch;
}
.vdp__err h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -.02em;
  margin: 0;
  font-variation-settings: "wdth" 92;
}
.vdp__err p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
.vdp__err .btn { margin-right: 10px; }

/* ---------- list-page vehicle card: photo overlay + body link ---------- */
.veh__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  display: block;
}
a.veh__img {
  text-decoration: none;
  position: relative;
}
.veh__img:has(img)::after { display: none; }
.veh__img:has(img) { background: #0a0a0a; }
.veh__badge, .veh__stock { z-index: 2; }

a.veh__body {
  text-decoration: none;
  color: inherit;
}
a.veh__body:hover .veh__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.veh__cta-sec[href] {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.veh__cta-sec[href]:hover {
  color: var(--page-accent, var(--accent));
  border-bottom-color: var(--page-accent, var(--accent));
}

.veh--skel { opacity: .55; }
.veh--skel .veh__title,
.veh--skel .veh__price-num,
.veh--skel .veh__year,
.veh--skel .veh__trim {
  background: var(--line);
  color: transparent !important;
  border-radius: 4px;
}
.veh--skel .veh__title { height: 22px; }
.veh--skel .veh__price-num { height: 26px; display: inline-block; min-width: 80px; }

.fleet__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: clamp(40px, 6vh, 80px) 16px;
  background: var(--paper-2);
  border: 1.5px dashed var(--line-2);
  border-radius: var(--radius);
  display: grid; gap: 16px; justify-items: center;
  list-style: none;
}
.fleet__empty p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  max-width: 48ch;
  line-height: 1.55;
}

/* ---------- list card: photo-coming-soon fallback ---------- */
.veh__img-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-rows: min-content;
  align-content: center;
  justify-items: center;
  gap: 10px;
  z-index: 1;
  color: var(--muted);
  background:
    repeating-linear-gradient(
      135deg,
      oklch(94% 0.025 85) 0px,
      oklch(94% 0.025 85) 8px,
      oklch(91% 0.03 80) 8px,
      oklch(91% 0.03 80) 16px
    );
}
.veh__img-fallback svg { opacity: .55; }
.veh__img-fallback span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper-2);
  padding: 6px 10px;
  border-radius: 4px;
  border: 1.5px dashed var(--line-2);
}
.veh__img:has(.veh__img-fallback)::after { display: none; }
.veh--no-photo .veh__img { background: oklch(96% 0.01 85); }

/* ---------- list card: dual price (sale + MSRP, no strikethrough) ---------- */
.veh__price--dual {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 4px;
}
.veh__price--dual .veh__price-num { grid-column: 1; grid-row: 1; }
.veh__price--dual .veh__price-tag { grid-column: 2; grid-row: 1; }
.veh__price-savings {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: oklch(58% 0.18 145);
  background: oklch(95% 0.04 145);
  padding: 3px 7px;
  border-radius: 3px;
  width: fit-content;
}
.veh__price-msrp {
  grid-column: 1 / -1;
  grid-row: 3;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--ink-soft);
}
.veh__price-msrp-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -.01em;
}
.veh__price-msrp-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* =========================================================
   Filter dropdown menus (used on the inventory pages).
   ========================================================= */
.chip-menu {
  position: relative;
  display: inline-flex;
}
.chip-menu__btn .chip__caret {
  display: inline-block;
  width: 0; height: 0;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .15s var(--ease);
}
.chip-menu.is-open .chip-menu__btn .chip__caret {
  transform: rotate(180deg);
}
.chip-menu__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  max-width: 280px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  z-index: 40;
  display: none;
  max-height: 320px;
  overflow-y: auto;
}
.chip-menu.is-open .chip-menu__panel {
  display: grid;
  gap: 2px;
}
.chip-menu__opt {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  transition: background .12s var(--ease), color .12s var(--ease);
  /* Two-column row so the live count sits flush right of the label. */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  width: 100%;
}
.chip-menu__opt-label { flex: 1; min-width: 0; }
.chip-menu__opt-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  opacity: .8;
  flex-shrink: 0;
}
.chip-menu__opt:hover { background: var(--paper-2); }
.chip-menu__opt.is-active {
  background: oklch(from var(--page-accent, var(--accent)) l c h / .14);
  color: var(--page-accent, var(--accent));
  font-weight: 500;
}
.chip-menu__opt.is-active .chip-menu__opt-count {
  color: inherit;
  opacity: .85;
}

.chip small {
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--muted);
  margin-left: 4px;
}
.chip--active small { color: inherit; opacity: .8; }

/* =========================================================
   INFINITI brand application to the VDP for new + CPO units.
   Scoped to .page-new / .page-cpo (added by vehicle.js after fetch).
   Brand tokens: Blue #020B24, Gold #B0A591, Gold-20 #EFEDE9.
   ========================================================= */
.page-new,
.page-cpo {
  --infiniti-blue: #020B24;
  --infiniti-gold: #B0A591;
  --infiniti-gold-20: #EFEDE9;
}

.page-new .vdp__head,
.page-cpo .vdp__head {
  position: relative;
  background: var(--infiniti-blue);
  color: #fff;
  padding: clamp(20px, 3.5vw, 36px) clamp(20px, 3vw, 32px) clamp(24px, 3.5vw, 40px);
  border-radius: var(--radius);
  margin-bottom: clamp(20px, 3vh, 28px);
}
.page-new .vdp__head .vdp__title,
.page-cpo .vdp__head .vdp__title { color: #fff; }
.page-new .vdp__head .vdp__title em,
.page-cpo .vdp__head .vdp__title em { color: var(--infiniti-gold); }
.page-new .vdp__head .vdp__sub,
.page-cpo .vdp__head .vdp__sub { color: oklch(from #ffffff l c h / .78); }
.page-new .vdp__head .vdp__eyebrow,
.page-cpo .vdp__head .vdp__eyebrow { color: var(--infiniti-gold); }
.page-new .vdp__head .vdp__badge,
.page-cpo .vdp__head .vdp__badge {
  color: var(--infiniti-gold);
  border-color: var(--infiniti-gold);
  background: oklch(from #B0A591 l c h / .14);
}

.page-new .vdp__pricebar,
.page-cpo .vdp__pricebar,
.page-new .vdp__specs-card,
.page-cpo .vdp__specs-card,
.page-new .vdp__notes-card,
.page-cpo .vdp__notes-card {
  background: var(--infiniti-gold-20);
  border-color: oklch(from #B0A591 l c h / .35);
  color: var(--infiniti-blue);
}

.page-new .vdp__h2,
.page-cpo .vdp__h2,
.page-new .vdp__price-num,
.page-cpo .vdp__price-num { color: var(--infiniti-blue); }

.page-new .vdp__price-tag,
.page-cpo .vdp__price-tag { color: oklch(from #020B24 l c h / .65); }

.page-new .vdp__specs li,
.page-cpo .vdp__specs li {
  border-bottom-color: oklch(from #B0A591 l c h / .35);
}
.page-new .vdp__specs li span:first-child,
.page-cpo .vdp__specs li span:first-child { color: oklch(from #020B24 l c h / .6); }
.page-new .vdp__specs li span:last-child,
.page-cpo .vdp__specs li span:last-child { color: var(--infiniti-blue); }

.page-new .vdp__chips li,
.page-cpo .vdp__chips li {
  background: #fff;
  border-color: oklch(from #B0A591 l c h / .4);
  color: var(--infiniti-blue);
}

.page-new .vdp__desc,
.page-cpo .vdp__desc { color: oklch(from #020B24 l c h / .82); }

.page-new .vdp__thumb.is-active,
.page-cpo .vdp__thumb.is-active {
  border-color: var(--infiniti-gold);
  outline-color: var(--infiniti-gold);
}

.page-new .vdp__cta .btn--primary,
.page-cpo .vdp__cta .btn--primary {
  background: var(--infiniti-blue);
  color: #fff;
  border-color: var(--infiniti-blue);
}
.page-new .vdp__cta .btn--primary:hover,
.page-cpo .vdp__cta .btn--primary:hover {
  background: oklch(from #020B24 l c h / .9);
}
.page-new .vdp__cta .btn--ghost,
.page-cpo .vdp__cta .btn--ghost {
  color: var(--infiniti-blue);
  border-color: var(--infiniti-blue);
}
.page-new .vdp__cta .btn--ghost:hover,
.page-cpo .vdp__cta .btn--ghost:hover {
  background: var(--infiniti-blue);
  color: #fff;
}

.page-new .vdp__price-msrp,
.page-cpo .vdp__price-msrp { color: oklch(from #020B24 l c h / .6); }
.page-new .vdp__price-msrp-num,
.page-cpo .vdp__price-msrp-num { color: oklch(from #020B24 l c h / .65); }
.page-new .vdp__price-msrp-label,
.page-cpo .vdp__price-msrp-label { color: oklch(from #020B24 l c h / .55); }

.page-new .vdp__price-breakdown,
.page-cpo .vdp__price-breakdown {
  background: #fff;
  border-color: oklch(from #B0A591 l c h / .4);
}
.page-new .vdp__price-line span:first-child,
.page-cpo .vdp__price-line span:first-child { color: oklch(from #020B24 l c h / .6); }
.page-new .vdp__price-line span:last-child,
.page-cpo .vdp__price-line span:last-child { color: var(--infiniti-blue); }
.page-new .vdp__price-line--total,
.page-cpo .vdp__price-line--total { border-top-color: oklch(from #B0A591 l c h / .5); }
.page-new .vdp__price-line--total span:first-child,
.page-cpo .vdp__price-line--total span:first-child { color: var(--infiniti-blue); }

/* =========================================================
   LIGHTBOX — fullscreen photo viewer
   ========================================================= */

.vdp__lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: oklch(8% 0 0 / .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* Default align-items: stretch so the 1fr stage row actually fills the
     viewport. Using `center` here would shrink the stage to the image's
     natural height and clip wide photos on desktop. We center the photo
     inside the stage instead, via the stage's own place-items rule. */
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  opacity: 0;
  transition: opacity .2s var(--ease);
}
/* `display: grid` above overrides the default [hidden] = display:none,
   which would otherwise leave a fully-laid-out (but invisible) lightbox
   intercepting clicks below it after closing. Force display:none when
   the element is hidden. */
.vdp__lb[hidden] { display: none; }
.vdp__lb.is-open { opacity: 1; }
body.vdp__lb-open { overflow: hidden; }

/* Counter — top center */
.vdp__lb-counter {
  grid-row: 1;
  justify-self: center;
  margin-top: clamp(14px, 2.5vh, 22px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: oklch(98% 0 0 / .82);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.vdp__lb-sep { margin: 0 8px; opacity: .55; }

/* Close button — top right */
.vdp__lb-close {
  position: absolute;
  top: max(env(safe-area-inset-top), clamp(10px, 2vh, 18px));
  right: max(env(safe-area-inset-right), clamp(10px, 2vw, 18px));
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: oklch(100% 0 0 / .08);
  border: 1px solid oklch(100% 0 0 / .14);
  border-radius: 50%;
  color: oklch(98% 0 0 / .92);
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.vdp__lb-close:hover {
  background: oklch(100% 0 0 / .18);
  border-color: oklch(100% 0 0 / .3);
  transform: scale(1.05);
}
.vdp__lb-close:focus-visible {
  outline: 2px solid oklch(98% 0 0 / .85);
  outline-offset: 3px;
}

/* Prev/next nav — flanking the stage on desktop */
.vdp__lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: oklch(100% 0 0 / .08);
  border: 1px solid oklch(100% 0 0 / .14);
  border-radius: 50%;
  color: oklch(98% 0 0 / .92);
  cursor: pointer;
  z-index: 1;
  transition: background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.vdp__lb-nav:hover {
  background: oklch(100% 0 0 / .18);
  border-color: oklch(100% 0 0 / .3);
}
.vdp__lb-nav:focus-visible {
  outline: 2px solid oklch(98% 0 0 / .85);
  outline-offset: 3px;
}
.vdp__lb-nav--prev { left: max(env(safe-area-inset-left), clamp(8px, 2vw, 24px)); }
.vdp__lb-nav--next { right: max(env(safe-area-inset-right), clamp(8px, 2vw, 24px)); }
.vdp__lb-nav--prev:hover { transform: translateY(-50%) translateX(-2px); }
.vdp__lb-nav--next:hover { transform: translateY(-50%) translateX(2px); }
@media (max-width: 600px) {
  .vdp__lb-nav { width: 44px; height: 44px; }
}

/* Stage — fills its 1fr grid row with explicit dimensions, then centers
   the image inside via flex. Flex is critical here: grid with no
   explicit template + auto-sized tracks lets the image's natural size
   dictate the track size, so width:100% becomes "100% of natural size"
   and the image overflows. Flex centers a child without stretching the
   container to its content. min-* :0 lets the row actually shrink. */
.vdp__lb-stage {
  grid-row: 2;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2vh, 20px) clamp(72px, 9vw, 120px);
  overflow: hidden;
}
@media (max-width: 600px) {
  .vdp__lb-stage { padding: clamp(8px, 1.5vh, 14px) clamp(8px, 3vw, 16px); }
}

.vdp__lb-img {
  /* With flex parent + global box-sizing: border-box, max-* :100%
     references the parent's content box (excludes padding). The image
     auto-sizes up to that cap, then object-fit: contain preserves the
     aspect ratio. This is the only combination that reliably contains
     the photo on every viewport without clipping. */
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
  user-select: none;
  -webkit-user-drag: none;
  transform: scale(.97);
  opacity: 0;
  transition: opacity .25s var(--ease), transform .3s var(--ease);
}
.vdp__lb.is-open .vdp__lb-img {
  opacity: 1;
  transform: scale(1);
}

/* Thumb strip — bottom of viewport. Centers a small set of thumbs, but
   long strips still scroll horizontally past the viewport edge. */
.vdp__lb-thumbs {
  grid-row: 3;
  list-style: none;
  margin: 0;
  padding: 10px clamp(12px, 3vw, 32px) max(env(safe-area-inset-bottom), 14px);
  display: flex;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: oklch(100% 0 0 / .25) transparent;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.vdp__lb-thumbs::-webkit-scrollbar { height: 6px; }
.vdp__lb-thumbs::-webkit-scrollbar-track { background: transparent; }
.vdp__lb-thumbs::-webkit-scrollbar-thumb {
  background: oklch(100% 0 0 / .25);
  border-radius: 3px;
}
.vdp__lb-thumbs li { flex: 0 0 auto; scroll-snap-align: center; }

.vdp__lb-thumb {
  width: 64px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1.5px solid oklch(100% 0 0 / .18);
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  display: block;
  opacity: .65;
  transition: opacity .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.vdp__lb-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.vdp__lb-thumb:hover { opacity: 1; transform: translateY(-1px); }
.vdp__lb-thumb.is-active {
  opacity: 1;
  border-color: oklch(98% 0 0 / .95);
  box-shadow: 0 0 0 2px oklch(98% 0 0 / .25);
}
@media (max-width: 600px) {
  .vdp__lb-thumb { width: 52px; height: 36px; }
}

/* Tap target hint — show the main image is interactive on the VDP. */
.vdp__gallery-main { cursor: zoom-in; }

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .vdp__lb,
  .vdp__lb-img,
  .vdp__lb-thumb,
  .vdp__lb-nav,
  .vdp__lb-close { transition: none; }
}