/**
 * Vehicle Detail Page (VDP) + Brand Hub — Product Roadmap Phases 1-4.
 *
 * 2026-07-31: the VDP's very top is now a light-mode, split-screen product
 * configurator (image + prev/next + compact stat card on one side; trim
 * cards, paint swatches, sticky price/CTA on the other) — see the
 * "VDP Configurator" block near the end of this file. Everything BELOW
 * that (the tabbed Overview/Specs/Pros & Cons/Calculators content) is still
 * the site's original dark theme / lime-accent language, shared with the
 * Compare tool, Brand Hub, and standalone Calculators page via this same
 * stylesheet — converting that content to match the light configurator is
 * a separate, much larger follow-up, not done in this pass.
 */

.vdp-page { padding-bottom: 80px; }
/* vehicle.css only loads in vehicle contexts (see inc/enqueue.php), so this
   is safely scoped without needing a :has() selector. */
html { scroll-behavior: smooth; }

/* Real tabbed panels — one visible at a time, matching the Compare tool's
   .cmp-panel pattern. The sub-nav is sticky so switching tabs stays
   reachable even deep into a long panel (e.g. Calculators, which stacks
   three tools) — the stickiness is in service of tab-switching, not a
   scroll-jump mechanic. */
.vdp-panel { display: none; }
.vdp-panel.is-active { display: block; }

/* ═══════════════ VDP hero (configurator) ═══════════════
   Rebuilt 2026-09-27 from Sky's review of the Harrier EV and Aeris pages:
   the photo stays pinned on the left with Paint and Gallery tabs directly
   under it, only the right column scrolls, and nothing is laid over the
   photo. The right column shows the selected variant's own Power, Torque
   and Mileage-or-Range (inc/vehicle-configurator.php), compact variant
   rows, and a sticky price bar. Light theme, scoped to .vdp-configurator
   so none of it reaches the Compare tool or Brand Hub. */
.vdp-configurator { background: var(--surface); color: #0a0a0a; }

.vdp-config-topbar {
	display: flex;
	align-items: center;
	padding: 14px clamp(16px, 4vw, 40px);
	border-bottom: 1px solid var(--border-dark);
}

/* minmax(0, ...) on both tracks: a bare 1fr floors at min-content, and a
   long unbroken variant name or a wide photo would push the grid past the
   viewport (the 2026-08-20 mobile overflow bug). */
.vdp-config-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: start;
}
@media (max-width: 900px) {
	.vdp-config-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Left: the photo and its Paint / Gallery tabs. On desktop the whole stage
   is pinned right under the header, which pages.js holds in place while
   this section is on screen, so the right column scrolls past a still
   photo. Sized to always fit one screen. */
.vdp-config-stage {
	min-width: 0;
	background: var(--surface);
}
@media (min-width: 901px) {
	.vdp-config-stage {
		position: sticky;
		top: var(--ts-shell-h, 90px);
		border-right: 1px solid var(--border-dark);
	}
}
.vdp-config-media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: #f2f2f2;
	overflow: hidden;
}
@media (min-width: 901px) {
	.vdp-config-media {
		aspect-ratio: auto;
		height: clamp(280px, calc(100vh - var(--ts-shell-h, 90px) - 196px), 640px);
	}
}
.vdp-config-media-inner {
	position: absolute;
	inset: 0;
	cursor: zoom-in;
}
.vdp-config-media-inner:focus-visible { outline: 2px solid var(--night); outline-offset: -2px; }
.vdp-config-media-inner--placeholder { cursor: default; background: linear-gradient(160deg, #ececec, #e0e0e0); }
.vdp-config-media-inner .vdp-gallery-img { object-fit: cover; transition: opacity 400ms ease; }
.vdp-config-media-inner .vdp-gallery-img.is-active { animation: none; }

.vdp-stage-panel { padding: 4px clamp(16px, 2.4vw, 28px) 16px; }
.vdp-stage-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-bottom: 1px solid var(--border-dark);
}
.vdp-stage-tabs { display: flex; gap: 22px; min-width: 0; }
.vdp-stage-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: -1px;
	padding: 12px 0 11px;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.56);
	cursor: pointer;
	transition: color 150ms ease, border-color 150ms ease;
}
.vdp-stage-tab:hover { color: rgba(0,0,0,0.8); }
.vdp-stage-tab.is-active { color: var(--night); border-bottom-color: var(--acc); }
.vdp-stage-tab-count { font-weight: 500; color: rgba(0, 0, 0, 0.56); }
.vdp-stage-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* Photo controls on the photo itself: arrows centred on the left and right
   edges, the full-screen button in the bottom-right corner. */
.vdp-stage-arrow,
.vdp-stage-zoom {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--border-dark);
	background: rgba(255,255,255,0.88);
	color: var(--night);
	cursor: pointer;
	transition: background 150ms ease, border-color 150ms ease;
}
.vdp-stage-arrow { top: 50%; transform: translateY(-50%); }
.vdp-stage-arrow--prev { left: 14px; }
.vdp-stage-arrow--next { right: 14px; }
.vdp-stage-zoom { right: 14px; bottom: 14px; width: 36px; height: 36px; }
.vdp-stage-arrow:hover,
.vdp-stage-zoom:hover { background: var(--surface); border-color: rgba(0,0,0,0.3); }
.vdp-stage-arrow:focus-visible,
.vdp-stage-zoom:focus-visible { outline: 2px solid var(--night); outline-offset: 2px; }
/* Studio shots and paint renders are shown whole; interior and lifestyle
   photos still fill the frame. A wide, short frame was cutting the top off
   product shots (Yamaha R15M, 2026-09-27). */
.vdp-config-media-inner .vdp-gallery-img[data-gallery-group="exterior"],
.vdp-config-media-inner .vdp-gallery-img[data-gallery-group="color"] { object-fit: contain; }
.vdp-stage-count {
	min-width: 46px;
	text-align: center;
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label-sm);
	font-variant-numeric: tabular-nums;
	color: rgba(0, 0, 0, 0.56);
}
@media (pointer: coarse) {
	.vdp-stage-arrow { width: 44px; height: 44px; }
	.vdp-stage-zoom { width: 42px; height: 42px; }
}
.vdp-stage-pane { padding-top: 14px; }
.vdp-stage-pane[hidden] { display: none; }

.vdp-paint-options { display: flex; flex-wrap: wrap; gap: 10px; }
.vdp-paint-swatch {
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid var(--surface);
	background: var(--swatch, #cfcfcf);
	box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
	cursor: pointer;
	transition: transform 150ms ease, box-shadow 150ms ease;
}
.vdp-paint-swatch:hover { transform: scale(1.08); }
.vdp-paint-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--night); }
.vdp-paint-chip {
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid var(--border-dark-2);
	background: var(--surface);
	color: var(--night);
	font-family: var(--body, "Google Sans", sans-serif);
	font-size: var(--fs-label);
	cursor: pointer;
}
.vdp-paint-chip[aria-pressed="true"] { border-color: var(--night); background: rgba(0,0,0,0.04); }
@media (pointer: coarse) {
	.vdp-paint-swatch { width: 36px; height: 36px; }
}
.vdp-paint-name { margin: 12px 0 0; font-size: var(--fs-body-sm); color: rgba(0, 0, 0, 0.56); }
.vdp-paint-name.is-picked { color: var(--night); font-weight: 600; }

.vdp-gallery-groups { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.vdp-gallery-group {
	padding: 7px 11px;
	border-radius: 999px;
	border: 1px solid var(--border-dark-2);
	background: var(--surface);
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label-sm);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(0,0,0,0.6);
	cursor: pointer;
}
.vdp-gallery-group span { margin-left: 3px; color: rgba(0, 0, 0, 0.56); }
.vdp-gallery-group.is-active { border-color: var(--night); color: var(--night); }
.vdp-stage-thumbs {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 2px;
}
.vdp-stage-thumbs::-webkit-scrollbar { display: none; }
.vdp-stage-thumb {
	flex: 0 0 auto;
	width: 84px;
	height: 56px;
	padding: 0;
	border-radius: 8px;
	border: 2px solid transparent;
	overflow: hidden;
	background: #f2f2f2;
	opacity: 0.72;
	cursor: pointer;
	transition: opacity 150ms ease, border-color 150ms ease;
}
.vdp-stage-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vdp-stage-thumb:hover { opacity: 1; }
.vdp-stage-thumb.is-active { opacity: 1; border-color: var(--night); }
.vdp-stage-thumb[hidden] { display: none; }

/* Right: name, the selected variant's figures, the variant list and the
   price. --panel-pad lets the sticky price bar run edge to edge. */
.vdp-config-panel {
	--panel-pad: clamp(18px, 3.2vw, 44px);
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(22px, 3vw, 40px) var(--panel-pad) 0;
	background: var(--surface);
}
.vdp-config-kicker {
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.56);
	margin-bottom: 8px;
}
.vdp-config-title {
	font-family: var(--display, "PolySans Bulky", sans-serif);
	font-size: var(--fs-h1);
	color: var(--night);
	margin: 0 0 8px;
	letter-spacing: -0.02em;
	line-height: 1.05;
	text-wrap: balance;
}
.vdp-config-dek { color: rgba(0, 0, 0, 0.56); font-size: var(--fs-body-sm); margin: 0 0 20px; }

/* One column per figure, however many this variant has (1 to 3). */
.vdp-config-stats {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 12px 18px;
	padding: 16px 0;
	margin-bottom: 24px;
	border-top: 1px solid var(--border-dark);
	border-bottom: 1px solid var(--border-dark);
}
.vdp-config-stats[hidden] { display: none; }
.vdp-config-stat { min-width: 0; }
.vdp-config-stat-value {
	font-family: var(--display, "PolySans Bulky", sans-serif);
	font-size: var(--fs-h3);
	font-weight: 800;
	line-height: 1.15;
	color: #0a0a0a;
	font-variant-numeric: tabular-nums;
}
.vdp-config-stat-label {
	margin-top: 4px;
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label-sm);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.56);
}
@media (max-width: 480px) {
	.vdp-config-stat-value { font-size: var(--fs-body); }
}

.vdp-config-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.vdp-config-section-title {
	margin: 0;
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--night);
}
.vdp-config-section-count {
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label-sm);
	color: rgba(0, 0, 0, 0.56);
}

/* Variant rows: name and price only, until picked. The picked row opens
   to show its gearbox and drive, what it adds, and the price step over the
   next-cheaper variant (this replaced the separate "Worth the Upgrade?"
   list). */
.vdp-vars { display: flex; flex-direction: column; gap: 8px; }
.vdp-vars.is-collapsed .vdp-var.is-extra { display: none; }
.vdp-var {
	display: block;
	width: 100%;
	padding: 13px 16px;
	border-radius: 12px;
	border: 1px solid var(--border-dark-2);
	background: var(--surface);
	color: var(--night);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 150ms ease, background 150ms ease;
}
.vdp-var:hover { border-color: rgba(0,0,0,0.32); }
.vdp-var:focus-visible { outline: 2px solid var(--night); outline-offset: 2px; }
.vdp-var.is-selected { border-color: var(--night); background: rgba(223,255,0,0.1); }
.vdp-var-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
}
.vdp-var-name {
	min-width: 0;
	font-family: var(--display, "PolySans Bulky", sans-serif);
	font-size: var(--fs-body-sm);
	line-height: 1.3;
}
.vdp-var-badge {
	display: inline-block;
	margin-left: 4px;
	padding: 2px 7px;
	border-radius: 20px;
	background: var(--acc);
	color: #0a0a0a;
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: 1px;
	white-space: nowrap;
}
.vdp-var-price {
	flex-shrink: 0;
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-body-sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.vdp-var-details {
	display: none;
	flex-direction: column;
	gap: 5px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--border-dark);
}
.vdp-var.is-selected .vdp-var-details { display: flex; }
.vdp-var-meta {
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label-sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.56);
}
.vdp-var-features { font-size: var(--fs-label); line-height: 1.45; color: rgba(0,0,0,0.62); }
.vdp-var-delta {
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label);
	font-weight: 700;
	color: var(--acc-deep);
}
.vdp-vars-more {
	align-self: flex-start;
	margin-top: 10px;
	padding: 6px 0;
	background: none;
	border: none;
	color: var(--night);
	font-family: var(--body, "Google Sans", sans-serif);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* The price bar sticks to the bottom of the screen for as long as the
   right column is on screen, on every width. */
.vdp-config-footer {
	position: sticky;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	margin: 22px calc(var(--panel-pad) * -1) 0;
	padding: 14px var(--panel-pad) 16px;
	background: var(--surface);
	border-top: 1px solid var(--border-dark);
}
.vdp-config-footer-price-wrap { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; }
/* contain: inline-size keeps a long variant name from widening the bar:
   the label takes whatever room is left and ends in an ellipsis, so the
   price and buttons stay on one row. */
.vdp-config-footer-price-label {
	contain: inline-size;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label-sm);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.56);
}
/* The price is the value this page exists to give, so it is the biggest
   thing in the panel after the vehicle's name (2026-09-27, Sky: "The Price
   fonts can be a little bigger... it should be at a glance"). */
.vdp-config-footer-price {
	font-family: var(--display, "PolySans Bulky", sans-serif);
	font-size: var(--fs-h2);
	font-weight: 800;
	line-height: 1.05;
	color: var(--night);
	font-variant-numeric: tabular-nums;
}
.vdp-config-footer-ctas { display: flex; flex-wrap: wrap; gap: 8px; }
.vdp-config-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 8px;
	border: 1px solid rgba(0,0,0,0.2);
	background: transparent;
	color: var(--night);
	font-family: var(--body, "Google Sans", sans-serif);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 150ms ease, background 150ms ease;
}
.vdp-config-btn-ghost:hover { border-color: rgba(0,0,0,0.4); background: rgba(0,0,0,0.03); }
.vdp-config-panel > .vdp-share-row { margin-top: 0; padding: 4px 0 28px; border-top: none; }
/* Phones: the price bar is one compact row (price, then the on-road price
   button and an icon-only Compare), so it never takes a quarter of the
   screen; the photo controls drop their counters so the row cannot
   overflow a 320px screen. */
@media (max-width: 560px) {
	.vdp-config-footer { flex-wrap: nowrap; gap: 10px; padding-top: 10px; padding-bottom: 12px; }
	.vdp-config-footer-price { font-size: var(--fs-h3); }
	.vdp-config-footer-ctas { flex-wrap: nowrap; gap: 6px; flex-shrink: 0; }
	.vdp-config-footer .sp-btn { padding: 11px 14px; font-size: var(--fs-label); white-space: nowrap; }
	.vdp-config-btn-ghost { width: 44px; height: 44px; padding: 0; justify-content: center; }
	.vdp-config-btn-text { display: none; }
}
@media (max-width: 420px) {
	.vdp-stage-tabs { gap: 16px; }
	.vdp-stage-tab-count,
	.vdp-stage-count { display: none; }
}

/* Gallery images — reused inside the light-mode configurator's media well
   (see "VDP Configurator" block near the end of this file for the light
   theme itself); this rule just defines the shared image-stack mechanics
   (absolute-stacked, cross-fade on .is-active) that both contexts rely on. */
.vdp-gallery-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 700ms ease;
}
.vdp-gallery-img.is-active { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
	.vdp-gallery-img.is-active { animation: vdpKenBurns 22s ease-in-out infinite alternate; }
}
@keyframes vdpKenBurns {
	0% { transform: scale(1); }
	100% { transform: scale(1.07); }
}

/* Quick Glance — the first thing on the Overview tab: a compact "at a
   glance" spec card (reusing .vdp-audit-* exactly as the Specs tab does,
   for one consistent dossier-row look site-wide) plus a Key Features chip
   list pulled from real Full Specifications data. Answers "what does a
   buyer want to know in the first 10 seconds" before they've even scrolled
   to a photo. */

.vdp-key-features { display: flex; flex-wrap: wrap; gap: 10px; }
.vdp-key-feature-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-body-sm);
	font-weight: 600;
	color: rgba(255,255,255,0.85);
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--border-light-2);
	border-radius: 999px;
	padding: 8px 14px;
}
.vdp-key-feature-chip svg { color: var(--acc, var(--acc)); flex-shrink: 0; }

/* Sub-nav */
.vdp-subnav {
	position: sticky;
	/* --ts-shell-visible-h (pages.js) drops to 0 while the floating header
	   is hidden off-screen on scroll-down — using the constant --ts-shell-h
	   here instead would leave a dead gap where the (now-hidden) header
	   used to be, with ordinary page content scrolling through it looking
	   like it's "still moving" behind a bar that's supposedly docked. */
	top: var(--ts-shell-visible-h, var(--ts-shell-h, 90px));
	z-index: 25;
	background: rgba(8,8,10,0.85);
	backdrop-filter: blur(16px) saturate(200%);
	border-bottom: 1px solid var(--border-light);
}
.vdp-subnav-inner {
	max-width: 1540px;
	margin: 0 auto;
	padding: 0 var(--pad, clamp(16px, 4vw, 48px));
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}
.vdp-subnav-inner::-webkit-scrollbar { display: none; }
.vdp-subnav-link {
	flex-shrink: 0;
	appearance: none;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.5);
	text-decoration: none;
	padding: 16px 14px 13px;
	cursor: pointer;
	transition: color 150ms ease, border-color 150ms ease;
}
.vdp-subnav-link:hover { color: rgba(255,255,255,0.85); }
.vdp-subnav-link.is-active { color: var(--acc, var(--acc)); border-bottom-color: var(--acc, var(--acc)); }

/* Lightbox */
.vdp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(4,4,6,0.96);
	display: flex;
	align-items: center;
	justify-content: center;
}
.vdp-lightbox[hidden] { display: none; }
/* The frame is the fixed viewport; the image inside it is what actually
   scales/pans on zoom (2026-09-27 — there was previously no zoom at all).
   overflow:hidden on the frame is what lets a zoomed image go "off-frame"
   without the whole lightbox growing or scrolling. */
.vdp-lightbox-frame {
	/* A fixed-size frame, not one that shrinks to the photo, so a zoomed
	   photo can fill the whole screen area rather than its own small box. */
	width: 92vw;
	height: calc(100vh - 120px);
	height: calc(100dvh - 120px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: none;
}
.vdp-lightbox-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 8px;
	transform-origin: center center;
	transition: transform 180ms ease;
	cursor: zoom-in;
	user-select: none;
	-webkit-user-drag: none;
}
.vdp-lightbox-img.is-zoomed { cursor: grab; transition: none; }
.vdp-lightbox-img.is-panning { cursor: grabbing; }
.vdp-lightbox-close, .vdp-lightbox-nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.08);
	border: 1px solid var(--border-light-2);
	color: var(--surface);
	border-radius: 50%;
	cursor: pointer;
}
.vdp-lightbox-close { top: 20px; right: 20px; width: 44px; height: 44px; z-index: 2; }
.vdp-lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.vdp-lightbox-prev { left: 16px; }
.vdp-lightbox-next { right: 16px; }
.vdp-lightbox-close:hover, .vdp-lightbox-nav:hover { background: var(--acc, var(--acc)); color: var(--night); border-color: transparent; }
.vdp-lightbox-bottom-bar {
	position: absolute;
	bottom: 22px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 18px;
}
.vdp-lightbox-zoom-group {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255,255,255,0.08);
	border: 1px solid var(--border-light-2);
	border-radius: 30px;
	padding: 6px 8px;
}
.vdp-lightbox-zoom {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--surface);
	font-size: var(--fs-h4);
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vdp-lightbox-zoom:hover { background: var(--acc, var(--acc)); color: var(--night); }
.vdp-lightbox-zoom-level {
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label-sm);
	color: rgba(255,255,255,0.7);
	min-width: 38px;
	text-align: center;
}
.vdp-lightbox-count {
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label);
	color: rgba(255,255,255,0.6);
}
@media (max-width: 640px) {
	.vdp-lightbox-nav { width: 40px; height: 40px; }
	.vdp-lightbox-prev { left: 8px; }
	.vdp-lightbox-next { right: 8px; }
	.vdp-lightbox-bottom-bar { flex-direction: column; gap: 8px; bottom: 16px; }
}

/* Section shell */
.vdp-section {
	margin: clamp(40px, 5vw, 64px) 0;
	padding-top: clamp(28px, 4vw, 40px);
	border-top: 1px solid var(--border-light);
}
.vdp-section-title {
	font-family: var(--display, "PolySans Bulky", sans-serif);
	font-size: var(--fs-h2);
	letter-spacing: -0.01em;
	color: var(--surface);
	margin: 0 0 8px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.vdp-section-title svg { color: var(--acc, var(--acc)); flex-shrink: 0; }
.vdp-section-dek { color: rgba(255,255,255,0.55); font-size: var(--fs-body-sm); margin: 0 0 20px; max-width: 560px; }

/* Real-World Audit — dossier rows, hairline dividers, not boxed cards */
.vdp-audit-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
@media (max-width: 640px) { .vdp-audit-grid { grid-template-columns: 1fr; } }
.vdp-audit-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 0;
	border-bottom: 1px solid var(--border-light);
}
.vdp-audit-icon {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--acc, var(--acc));
	border: 1px solid rgba(223,255,0,0.25);
	border-radius: 8px;
	background: rgba(223,255,0,0.05);
}
.vdp-audit-body { min-width: 0; }
.vdp-audit-label {
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.48);
	margin-bottom: 5px;
}
.vdp-audit-value { font-size: var(--fs-body); font-weight: 700; color: var(--surface); line-height: 1.4; }
.vdp-audit-sub { font-size: var(--fs-label); color: rgba(255,255,255,0.5); margin-top: 3px; }

/* Full Specifications — categorized deep-dive spec sheet, CarDekho-depth.
   Each category is its own labeled block of hairline-divided rows; a blank
   admin-entered value renders as a checkmark (a plain "this feature is
   present" row) rather than an empty value column. */

.vdp-fullspecs-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
@media (max-width: 640px) { .vdp-fullspecs-rows { grid-template-columns: 1fr; } }
.vdp-fullspecs-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--border-light);
}
.vdp-fullspecs-label { font-size: var(--fs-body-sm); color: rgba(255,255,255,0.55); }
.vdp-fullspecs-value { font-size: var(--fs-body-sm); font-weight: 600; color: var(--surface); text-align: right; }

/* Variant & Price Matrix — configurator-style trim cards, not a plain table.
   Still used elsewhere (Compare tool's variant drawer, which keeps the
   plain table look intentionally — that's a dense side-by-side comparison,
   a different job from "browse this vehicle's trims"). */
.vdp-variant-cards { display: flex; gap: 16px; overflow-x: auto; padding: 4px 4px 12px; scrollbar-width: thin; }
.vdp-variant-card {
	flex: 0 0 240px;
	position: relative;
	display: block;
	text-decoration: none;
	border: 1px solid var(--border-light-2);
	border-radius: 14px;
	padding: 22px 20px;
	background: rgba(255,255,255,0.03);
	transition: border-color 200ms ease, transform 200ms ease;
}
.vdp-variant-card:hover { border-color: rgba(223,255,0,0.35); transform: translateY(-3px); }
.vdp-variant-card.is-best-value { border-color: var(--acc, var(--acc)); background: rgba(223,255,0,0.05); }
.vdp-variant-card-name { font-family: var(--display, "PolySans Bulky", sans-serif); font-size: var(--fs-body); color: var(--surface); margin-bottom: 12px; padding-right: 60px; }
.vdp-variant-card-price { font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-h4); font-weight: 800; color: var(--acc, var(--acc)); margin-bottom: 16px; }
.vdp-variant-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.vdp-variant-card-tag {
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(255,255,255,0.6);
	border: 1px solid var(--border-light-2);
	border-radius: 999px;
	padding: 4px 10px;
}
.vdp-best-value-badge {
	position: absolute;
	top: 18px;
	right: 20px;
	font-size: var(--fs-label-sm);
	font-family: var(--mono, "JetBrains Mono", monospace);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: var(--acc, var(--acc));
	color: var(--night);
	padding: 4px 9px;
	border-radius: 999px;
	font-weight: 700;
	white-space: nowrap;
}

/* Price engine + calculators — each one is a bounded "widget" card, not a
   full-width sprawl. Sky's call: "imagine each calculator as a widget, we
   can be more smarter with UI design." Capped width + a real card frame +
   a 2-column field grid (range sliders, outputs, and full-width elements
   like the TCO bar all opt out via grid-column: 1/-1) so a calculator with
   3-5 fields reads as a compact tool, not a page-length form. */
#vdp-price-engine, #vdp-emi { scroll-margin-top: calc(var(--ts-shell-h, 90px) + 60px); }
.vdp-calculator-card,
.vdp-calculator {
	max-width: 460px;
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--border-light);
	border-radius: 14px;
	padding: clamp(18px, 2.5vw, 26px);
}
.vdp-calculator {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 14px;
	align-items: start;
}
.vdp-calculator-field:has(input[type="range"]),
.vdp-calculator-outputs,
.vdp-calculator > .vdp-disclaimer,
.vdp-tco-bar,
.vdp-tco-legend,
.vdp-tco-net {
	grid-column: 1 / -1;
}
.vdp-price-engine { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.vdp-city-select {
	flex: 1;
	min-width: 180px;
	background: rgba(255,255,255,0.06);
	border: 1px solid var(--border-light-2);
	color: var(--surface);
	border-radius: 8px;
	padding: 12px 16px;
	font-size: var(--fs-body-sm);
}
.vdp-price-breakdown {
	margin-top: 20px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--border-light);
	border-radius: 12px;
	padding: 20px;
}
.vdp-price-breakdown-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: var(--fs-body-sm); color: rgba(255,255,255,0.8); }
.vdp-price-breakdown-row.is-total { font-weight: 800; color: var(--acc, var(--acc)); font-size: var(--fs-body); border-bottom: none; padding-top: 14px; }
.vdp-disclaimer { font-size: var(--fs-label-sm); color: rgba(255, 255, 255, 0.48); margin-top: 14px; line-height: 1.5; }

.vdp-calculator-field { margin-bottom: 14px; min-width: 0; }
.vdp-calculator-field label { display: block; font-size: var(--fs-label-sm); color: rgba(255,255,255,0.6); margin-bottom: 6px; font-family: var(--mono, "JetBrains Mono", monospace); text-transform: uppercase; letter-spacing: 0.05em; }
.vdp-calculator-field input[type="range"] { width: 100%; }
.vdp-calculator-field input[type="number"], .vdp-calculator-field select {
	width: 100%;
	background: rgba(255,255,255,0.06);
	border: 1px solid var(--border-light-2);
	color: var(--surface);
	border-radius: 8px;
	padding: 9px 12px;
	font-size: var(--fs-body-sm);
	box-sizing: border-box;
}
/* A fixed fact about the vehicle (fuel type, price) rather than a free
   input — same box shape as the editable fields so the layout doesn't
   jump, but visually inert (no border-color change on focus, no cursor). */
.vdp-calculator-locked-value {
	width: 100%;
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--border-light);
	color: rgba(255,255,255,0.85);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: var(--fs-body-sm);
	font-family: var(--mono, "JetBrains Mono", monospace);
	box-sizing: border-box;
}
.vdp-calculator-outputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 20px; }
.vdp-calculator-output {
	background: rgba(223,255,0,0.06);
	border: 1px solid rgba(223,255,0,0.2);
	border-radius: 10px;
	padding: 14px 16px;
}
.vdp-calculator-output-label { font-size: var(--fs-label-sm); text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); font-family: var(--mono, "JetBrains Mono", monospace); }
.vdp-calculator-output-value { font-size: var(--fs-h4); font-weight: 800; color: var(--acc, var(--acc)); margin-top: 4px; }

/* 5-Year True Cost to Own — CSS-only stacked bar, no charting library.
   Purchase (accent) / Fuel / Maintenance segments are proportional widths
   of gross cost; resale is a credit, called out separately in the legend
   (reusing #34D399, this codebase's existing "positive/win" green from the
   Compare tool) rather than drawn as a negative-width bar segment. */
.vdp-tco-bar {
	display: flex;
	height: 14px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(255,255,255,0.06);
	margin-top: 20px;
}
.vdp-tco-bar-seg { height: 100%; transition: width 400ms ease; }
.vdp-tco-bar-seg--purchase { background: var(--acc, var(--acc)); }
.vdp-tco-bar-seg--fuel { background: rgba(255,255,255,0.55); }
.vdp-tco-bar-seg--maintenance { background: rgba(255,255,255,0.25); }
.vdp-tco-legend { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.vdp-tco-legend-row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body-sm); color: rgba(255,255,255,0.75); }
.vdp-tco-legend-row span:nth-child(2) { flex: 1; }
.vdp-tco-legend-row strong { font-family: var(--mono, "JetBrains Mono", monospace); color: var(--surface); font-weight: 700; }
.vdp-tco-legend-row--resale strong { color: #34D399; }
.vdp-tco-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.vdp-tco-swatch--purchase { background: var(--acc, var(--acc)); }
.vdp-tco-swatch--fuel { background: rgba(255,255,255,0.55); }
.vdp-tco-swatch--maintenance { background: rgba(255,255,255,0.25); }
.vdp-tco-swatch--resale { background: #34D399; }
.vdp-tco-net {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 18px;
	padding: 16px 18px;
	border: 1px solid rgba(223,255,0,0.25);
	border-radius: 12px;
	background: rgba(223,255,0,0.05);
}
.vdp-tco-net-label { font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.7); }
.vdp-tco-net-value { font-size: var(--fs-h3); font-weight: 800; color: var(--acc, var(--acc)); }

/* Calculator pairs — "On-Road Price & Running Cost" and "Loan EMI & True
   Cost to Own" are each their own main VDP tab, showing their two
   calculators side by side rather than stacked full-width. */

.vdp-cta-row { margin-top: 40px; }

/* Latest News & Reviews — real posts sharing this vehicle's brand term
   (thespecd_get_vehicle_related_posts()), the reverse direction of the
   article-to-VDP cross-linking that already existed. Only renders when
   real matching posts exist — a brand with no coverage yet just shows
   nothing, same "never pad with something unrelated" rule as Similar
   Vehicles above. */
.vdp-related-posts { display: flex; flex-direction: column; gap: 2px; }
.vdp-related-post {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 16px;
	align-items: center;
	padding: 12px 8px;
	border-bottom: 1px solid var(--border-light);
	text-decoration: none;
	transition: background 160ms ease;
}
.vdp-related-post:hover { background: rgba(255,255,255,0.03); }
.vdp-related-post-img { aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: var(--night-3); }
.vdp-related-post-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vdp-related-post-cat {
	display: block;
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--acc, var(--acc));
	margin-bottom: 4px;
}
.vdp-related-post-title {
	font-family: var(--display, "PolySans Bulky", sans-serif);
	font-size: var(--fs-body-sm);
	line-height: 1.3;
	color: var(--surface);
	margin-bottom: 6px;
}
.vdp-related-post-date { font-size: var(--fs-label); color: rgba(255, 255, 255, 0.48); }

/* ═══════════════════════════════════════════════════════════════════════
   VDP LIGHT THEME — the whole page, not just the configurator hero
   Scoped to body.single-vehicle (WordPress's own body_class(), no markup
   changes needed) so only the vehicle template flips — Compare/Brand Hub/
   Calculators page keep the original dark theme unaffected, since they
   don't carry this body class even though they share every class name
   below. Same technique as the blog's body.single-post light theme
   (pages.css) — every rgba(255,255,255,X) inverts to rgba(0,0,0,X) at the
   same opacity, since the whole design system is already opacity-based
   grays rather than fixed hex grays.

   One thing that ISN'T a mechanical inversion: every place `--acc` (lime,
   #DFFF00) was used as literal text or icon color gets overridden to dark
   here instead. Lime has strong contrast against this site's black
   surfaces but genuinely poor contrast against white — it's a bright,
   light color either way. Lime survives unchanged only as a low-opacity
   background tint, a border, a thick underline bar, or as a badge
   *background* with dark text already sitting on it (e.g.
   .vdp-best-value-badge) — never as small readable text or a thin icon
   stroke on white. The lightbox stays dark deliberately (a black backdrop
   for viewing photos is near-universal, on this site and everywhere else). */

/* 2026-08-18 same-day follow-up, caught live on the homepage first (see
   spec.css's body.home rule for the full diagnosis): every page below
   uses .sp-reveal-classed elements (opacity:0 before their scroll-
   triggered reveal fires), and body's own background was never touched
   by any of this pass — still the site's original dark #08080a. A
   not-yet-revealed element is fully transparent, showing that dark body
   straight through as a flash/gap until it fades in. Fixing at the body
   level: a pure safety net, never visible except through that transient
   gap. Covers both today's new light pages and the pre-existing
   single-vehicle/cmp-page ones, which likely had the same latent issue,
   just never reported. */
body.single-vehicle,
body.brand-page,
body.calc-page,
body.vsearch-page {
	background: var(--surface) !important;
}

/* 2026-08-18 white-theme pass: brand-page (Brand Hub), calc-page
   (Calculators), vsearch-page (/vehicles/ archive) all share this exact
   .ts-home-shell header + .sp-page background treatment — folded into the
   same selector lists rather than duplicated, same technique already used
   when cmp-page was added. */
body.single-vehicle .ts-home-shell,
body.brand-page .ts-home-shell,
body.calc-page .ts-home-shell,
body.vsearch-page .ts-home-shell {
	--glass-bg: rgba(255,255,255,0.78);
	--glass-border: var(--border-dark);
	--glass-hover-bg: rgba(255,255,255,0.9);
	--glass-hover-border: var(--border-dark-2);
}
/* A VDP's header is solid (2026-09-27). With the photo pinned and only the
   right column scrolling, a see-through header let the panel's text slide
   visibly underneath it (Sky's Aeris screenshot). pages.css sets
   background: transparent !important on every .ts-home-shell, so this needs
   its own !important at higher specificity. */
body.single-vehicle .ts-home-shell {
	background: var(--surface) !important;
	border-bottom: 1px solid var(--border-dark);
}

body.single-vehicle .sp-page,
body.brand-page .sp-page,
body.calc-page .sp-page,
body.vsearch-page .sp-page { background: var(--surface); }

/* Quick Glance (Overview tab) */

body.single-vehicle .vdp-key-feature-chip { color: rgba(0,0,0,0.75); background: rgba(0,0,0,0.03); border-color: var(--border-dark-2); }
body.single-vehicle .vdp-key-feature-chip svg { color: var(--acc-deep); }

/* Solid, not translucent-blur like the dark-theme version — a frosted-glass
   bar reads as a clean "dark glass panel" over dark content, but scrolling
   bright product photos underneath a translucent *white* bar just looks
   like a pale, indistinct haze with the images ghosting through it. A
   sticky nav should read as a crisp, fixed shelf regardless of what's
   scrolling beneath it, so this drops backdrop-filter entirely here. */
body.single-vehicle .vdp-subnav { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--border-dark); }
body.single-vehicle .vdp-subnav-link { color: rgba(0, 0, 0, 0.56); }
body.single-vehicle .vdp-subnav-link:hover { color: rgba(0,0,0,0.85); }
body.single-vehicle .vdp-subnav-link.is-active { color: var(--night-2); }

/* Section shells */
body.single-vehicle .vdp-section { border-top-color: var(--border-dark); }
body.single-vehicle .vdp-section-title { color: var(--night-2); }
body.single-vehicle .vdp-section-title svg { color: var(--acc-deep); }
body.single-vehicle .vdp-section-dek { color: rgba(0, 0, 0, 0.56); }

/* Real-World Audit */
body.single-vehicle .vdp-audit-card { border-bottom-color: var(--border-dark); }
body.single-vehicle .vdp-audit-icon { color: var(--acc-deep); }
body.single-vehicle .vdp-audit-label { color: rgba(0, 0, 0, 0.56); }
body.single-vehicle .vdp-audit-value { color: var(--night-2); }
body.single-vehicle .vdp-audit-sub { color: rgba(0, 0, 0, 0.56); }

/* Full Specifications */

body.single-vehicle .vdp-fullspecs-row, body.city-hub-page .vdp-fullspecs-row { border-bottom-color: var(--border-dark); }
body.single-vehicle .vdp-fullspecs-label, body.city-hub-page .vdp-fullspecs-label { color: rgba(0, 0, 0, 0.56); }
body.single-vehicle .vdp-fullspecs-value, body.city-hub-page .vdp-fullspecs-value { color: var(--night-2); }

/* Variant & Price Matrix cards — also used by the Compare tool's Trims tab */
body.single-vehicle .vdp-variant-card { border-color: var(--border-dark-2); background: rgba(0,0,0,0.02); }
body.single-vehicle .vdp-variant-card-name { color: var(--night-2); }
body.single-vehicle .vdp-variant-card-price { color: var(--night-2); }
body.single-vehicle .vdp-variant-card-tag { color: rgba(0,0,0,0.6); border-color: var(--border-dark-2); }

/* Calculators — the standalone /tools-calculators/ page (calc-page) reuses
   these exact same JS-driven widgets unlocked/vehicle-less, so every rule
   here that isn't specific to the On-Road Price sub-page also applies
   there directly. */
body.single-vehicle .vdp-calculator-card,
body.single-vehicle .vdp-calculator,
body.calc-page .vdp-calculator-card,
body.calc-page .vdp-calculator { background: rgba(0,0,0,0.015); border-color: var(--border-dark); }
body.single-vehicle .vdp-city-select,
body.calc-page .vdp-city-select { background: rgba(0,0,0,0.03); border-color: var(--border-dark-2); color: var(--night-2); }
body.single-vehicle .vdp-price-breakdown,
body.calc-page .vdp-price-breakdown { background: rgba(0,0,0,0.03); border-color: var(--border-dark); }
body.single-vehicle .vdp-price-breakdown-row,
body.calc-page .vdp-price-breakdown-row { border-bottom-color: var(--border-dark); color: rgba(0,0,0,0.8); }
body.single-vehicle .vdp-price-breakdown-row.is-total,
body.calc-page .vdp-price-breakdown-row.is-total { color: var(--acc-deep); }
body.single-vehicle .vdp-disclaimer,
body.city-hub-page .vdp-disclaimer,
body.calc-page .vdp-disclaimer { color: rgba(0, 0, 0, 0.56); }
body.single-vehicle .vdp-calculator-field label,
body.calc-page .vdp-calculator-field label { color: rgba(0,0,0,0.6); }
body.single-vehicle .vdp-calculator-field input[type="number"],
body.single-vehicle .vdp-calculator-field select,
body.calc-page .vdp-calculator-field input[type="number"],
body.calc-page .vdp-calculator-field select { background: rgba(0,0,0,0.03); border-color: var(--border-dark-2); color: var(--night-2); }
body.single-vehicle .vdp-calculator-locked-value,
body.calc-page .vdp-calculator-locked-value { background: rgba(0,0,0,0.02); border-color: var(--border-dark); color: rgba(0,0,0,0.7); }
.vdp-calculator-locked-sub { margin-top: 6px; font-size: var(--fs-label); color: rgba(0, 0, 0, 0.56); }
.vdp-calculator-locked-sub:empty { display: none; }
body.single-vehicle .vdp-calculator-output-label,
body.calc-page .vdp-calculator-output-label { color: rgba(0, 0, 0, 0.56); }
body.single-vehicle .vdp-calculator-output-value,
body.calc-page .vdp-calculator-output-value { color: var(--acc-deep); }

/* City On-Road Price / EMI Calculator SEO pages */
body.single-vehicle .vdp-price-breadcrumb { color: rgba(0, 0, 0, 0.56); }
body.single-vehicle .vdp-price-breadcrumb a { color: rgba(0,0,0,0.6); }
body.single-vehicle .vdp-price-hero-body { background: rgba(0,0,0,0.02); border-color: var(--border-dark); }
body.single-vehicle .vdp-price-hero-total { border-bottom-color: var(--border-dark); }
body.single-vehicle .vdp-price-hero-total-label { color: rgba(0, 0, 0, 0.56); }
body.single-vehicle .vdp-price-hero-total-value { color: var(--acc-deep); }
body.single-vehicle .vdp-price-total-row { border-top-color: var(--border-dark-2); }
body.single-vehicle .vdp-price-total-row .vdp-fullspecs-label,
body.single-vehicle .vdp-price-total-row .vdp-fullspecs-value { color: var(--night-2); }
body.single-vehicle .vdp-price-city-link,
body.calc-page .vdp-price-city-link { color: rgba(0,0,0,0.65); background: rgba(0,0,0,0.03); border-color: var(--border-dark-2); }
body.single-vehicle .vdp-price-city-link:hover,
body.calc-page .vdp-price-city-link:hover { color: var(--acc-deep); border-color: rgba(0,0,0,0.25); }
body.single-vehicle .vdp-price-city-links-label,
body.calc-page .vdp-price-city-links-label { color: rgba(0, 0, 0, 0.56); }

/* 5-Year True Cost to Own bar — also used unlocked on calc-page */
body.single-vehicle .vdp-tco-bar,
body.calc-page .vdp-tco-bar { background: rgba(0,0,0,0.06); }
body.single-vehicle .vdp-tco-bar-seg--fuel,
body.calc-page .vdp-tco-bar-seg--fuel { background: rgba(0,0,0,0.35); }
body.single-vehicle .vdp-tco-bar-seg--maintenance,
body.calc-page .vdp-tco-bar-seg--maintenance { background: rgba(0,0,0,0.15); }
body.single-vehicle .vdp-tco-legend-row,
body.calc-page .vdp-tco-legend-row { color: rgba(0,0,0,0.75); }
body.single-vehicle .vdp-tco-legend-row strong,
body.calc-page .vdp-tco-legend-row strong { color: var(--night-2); }
body.single-vehicle .vdp-tco-swatch--fuel,
body.calc-page .vdp-tco-swatch--fuel { background: rgba(0,0,0,0.35); }
body.single-vehicle .vdp-tco-swatch--maintenance,
body.calc-page .vdp-tco-swatch--maintenance { background: rgba(0,0,0,0.15); }
body.single-vehicle .vdp-tco-net-label,
body.calc-page .vdp-tco-net-label { color: rgba(0,0,0,0.65); }
body.single-vehicle .vdp-tco-net-value,
body.calc-page .vdp-tco-net-value { color: var(--acc-deep); }

/* Similar Vehicles */

body.single-vehicle .vdp-related-post { border-bottom-color: var(--border-dark); }
body.single-vehicle .vdp-related-post:hover { background: rgba(0,0,0,0.02); }
body.single-vehicle .vdp-related-post-img { background: #f0f0f2; }
body.single-vehicle .vdp-related-post-cat { color: var(--acc-deep); }
body.single-vehicle .vdp-related-post-title { color: var(--night-2); }
body.single-vehicle .vdp-related-post-date { color: rgba(0, 0, 0, 0.56); }

/* .sp-btn--ghost (bottom CTA row's "Compare With Another Vehicle") is
   white-on-transparent by default — invisible on this page's white
   background, so it needs its own light-mode treatment here specifically. */
body.single-vehicle .sp-btn--ghost {
	background: rgba(0,0,0,0.03);
	border-color: var(--border-dark-2);
	color: rgba(0,0,0,0.75);
}
body.single-vehicle .sp-btn--ghost:hover {
	background: rgba(0,0,0,0.06);
	border-color: rgba(0,0,0,0.28);
}
body.vsearch-page .sp-btn--ghost {
	background: rgba(0,0,0,0.03);
	border-color: var(--border-dark-2);
	color: rgba(0,0,0,0.75);
}
body.vsearch-page .sp-btn--ghost:hover {
	background: rgba(0,0,0,0.06);
	border-color: rgba(0,0,0,0.28);
}

/* Plain page header — the Calculators page has no vehicle photo
   to build a cinematic hero around, so they get this dossier-style header
   instead (kicker + big display title + dek) rather than reusing the VDP
   hero's overlay treatment, which assumes a background image. */
.vdp-page-header { margin: clamp(28px, 4vw, 52px) 0 32px; }
.vdp-page-title {
	font-family: var(--display, "PolySans Bulky", sans-serif);
	font-size: var(--fs-h1);
	line-height: 1.03;
	letter-spacing: -0.02em;
	color: var(--surface);
	margin: 0.22em 0 0.32em;
}

/* .vdp-page-header/.vdp-page-title/.sp-archive-kick are shared with the
   Calculators page (still dark) and, for .sp-archive-kick, blog archives and
   the footer — so these overrides are scoped to these page types only, not
   folded into body.single-vehicle like the rest of this file's light-mode
   rules. */
body.brand-page .vdp-page-title,
body.calc-page .vdp-page-title,
body.vsearch-page .vdp-page-title { color: var(--night-2); }
body.brand-page .sp-archive-kick,
body.calc-page .sp-archive-kick,
body.vsearch-page .sp-archive-kick { color: var(--acc-deep); }
body.brand-page .vdp-section-title,
body.calc-page .vdp-section-title,
body.vsearch-page .vdp-section-title { color: var(--night-2); }
body.brand-page .vdp-section-title svg,
body.calc-page .vdp-section-title svg,
body.vsearch-page .vdp-section-title svg { color: var(--acc-deep); }
body.brand-page .vdp-section,
body.calc-page .vdp-section,
body.vsearch-page .vdp-section { border-top-color: var(--border-dark); }

/* ───────── City On-Road Price / EMI Calculator SEO pages ─────────
   single-vehicle-price-in-city.php / single-vehicle-emi.php. Same dossier
   page-header as Compare/Calculators (.vdp-page-header above), plus a
   breadcrumb and a price/EMI "hero" summary card unique to these pages. */
.vdp-price-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label);
	color: rgba(255, 255, 255, 0.48);
	margin-bottom: 18px;
}
.vdp-price-breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
.vdp-price-breadcrumb a:hover { color: var(--acc, var(--acc)); }
/* A model's city price page: the city's photo as a slim banner behind the
   title (2026-10-29, the photos of /on-road-price-in-{city}/). */
body.single-vehicle .vcb {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(180px, 18vw, 260px);
	margin: 0 0 18px;
	overflow: hidden;
	border-radius: 20px;
	background: #2a2a2c;
	isolation: isolate;
}
body.single-vehicle .vcb::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.72) 100%);
}
body.single-vehicle .vcb-img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
body.single-vehicle .vcb-body { width: 100%; padding: clamp(18px, 2.4vw, 30px); }
body.single-vehicle .vcb-kick {
	display: inline-flex;
	gap: 6px;
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.88);
	text-decoration: none;
}
body.single-vehicle .vcb-kick:hover { color: var(--acc); }
body.single-vehicle .vcb-kick:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
body.single-vehicle .vdp-page-title.vcb-title { margin: 8px 0 0; color: #fff; }
body.single-vehicle .vcb-credit {
	position: absolute;
	top: 10px;
	right: 12px;
	max-width: 70%;
	margin: 0;
	font-size: 10px;
	line-height: 1.3;
	text-align: right;
	color: rgba(255, 255, 255, 0.78);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
body.single-vehicle .vcb-credit a { color: inherit; }
@media (max-width: 600px) {
	body.single-vehicle .vcb { min-height: 200px; border-radius: 16px; }
	body.single-vehicle .vcb-credit { max-width: 85%; }
}
.vdp-price-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: 28px;
	margin-bottom: 40px;
}
@media (max-width: 780px) { .vdp-price-hero { grid-template-columns: 1fr; } }
.vdp-price-hero-img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; border-radius: 14px; background: var(--night-3); }
.vdp-price-hero-body {
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--border-light);
	border-radius: 14px;
	padding: 24px 26px;
}
.vdp-price-hero-total { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-light); }
.vdp-price-hero-total-label { font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm); text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); }
.vdp-price-hero-total-value { font-family: var(--display, "PolySans Bulky", sans-serif); font-size: var(--fs-h1); color: var(--acc, var(--acc)); line-height: 1.1; }
.vdp-fullspecs-rows--single { grid-template-columns: 1fr; }
.vdp-price-total-row { border-top: 1px solid var(--border-light-2); margin-top: 4px; padding-top: 14px !important; }
.vdp-price-total-row .vdp-fullspecs-label,
.vdp-price-total-row .vdp-fullspecs-value { font-weight: 800; color: var(--surface); }
.vdp-price-city-links-label { font-size: var(--fs-body-sm); color: rgba(255,255,255,0.5); margin: 20px 0 10px; }
.vdp-price-city-links { display: flex; flex-wrap: wrap; gap: 10px; }
.vdp-price-city-link {
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: rgba(255,255,255,0.7);
	background: rgba(255,255,255,0.05);
	border: 1px solid var(--border-light);
	border-radius: 999px;
	padding: 8px 18px;
	text-decoration: none;
	transition: color 150ms ease, border-color 150ms ease;
}
.vdp-price-city-link:hover { color: var(--acc, var(--acc)); border-color: rgba(223,255,0,0.4); }

/* ═══════════════ Vehicle catalogue, /vehicles/ ═══════════════
   Rebuilt 2026-09-28 (archive-vehicle.php, inc/vehicle-search.php,
   setupVehicleSearch() in vehicle.js). Light only: this page always
   carries body.vsearch-page. Heading, type switch and search, a compact
   brand strip, a sticky filter bar whose filters open as panels, then the
   results with removable chips. Filter panels are popovers under their
   button on desktop and a full-width panel under the bar on a phone. */

.vsearch [hidden] { display: none !important; }
.vsearch-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Heading */
.vsearch-head { margin: clamp(18px, 3vw, 34px) 0 18px; }
.vsearch-title {
	font-family: var(--display, "PolySans Bulky", sans-serif);
	font-size: var(--fs-h1);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--night-2);
	margin: 6px 0 8px;
	text-wrap: balance;
}
.vsearch-dek { font-size: var(--fs-body-sm); color: rgba(10,10,15,0.6); margin: 0; max-width: 62ch; }

/* Type switch and search */
.vsearch-top { display: flex; align-items: stretch; gap: 12px; margin-bottom: 18px; }
.vsearch-seg {
	display: inline-flex; flex-shrink: 0; gap: 4px; padding: 4px;
	background: var(--surface-3); border-radius: 999px;
}
.vsearch-seg-opt { position: relative; display: flex; }
.vsearch-seg-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vsearch-seg-opt span {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	min-height: 42px; padding: 0 16px; border-radius: 999px; white-space: nowrap;
	font-size: var(--fs-body-sm); font-weight: 600; color: rgba(10,10,15,0.62);
	transition: background 150ms ease, color 150ms ease;
}
.vsearch-seg-n { font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm); font-weight: 700; color: rgba(10, 10, 15, 0.58); }
.vsearch-seg-opt:hover input:not(:checked) + span { color: var(--night-2); }
.vsearch-seg-opt input:checked + span { background: var(--night-2); color: var(--surface); }
.vsearch-seg-opt input:checked + span .vsearch-seg-n { color: var(--acc); }
.vsearch-seg-opt input:focus-visible + span { outline: 2px solid var(--acc-deep); outline-offset: 2px; }

.vsearch-search-field { position: relative; flex: 1 1 auto; min-width: 0; }
.vsearch-search-icon {
	position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
	display: flex; color: rgba(10,10,15,0.4); pointer-events: none;
}
.vsearch-search-field input {
	width: 100%; height: 50px; box-sizing: border-box; padding: 0 18px 0 46px;
	border: 1px solid var(--border-dark-2); border-radius: 999px; background: var(--surface);
	color: var(--night-2); font-family: var(--body, "Google Sans", sans-serif); font-size: var(--fs-body-sm);
}
.vsearch-search-field input::placeholder { color: rgba(10,10,15,0.4); }
.vsearch-search-field input:focus { outline: none; border-color: var(--acc-deep); box-shadow: 0 0 0 3px rgba(107,122,0,0.16); }

/* Brand strip: one scrolling row, or every brand when expanded */
.vsearch-brands { margin: 0 0 12px; }
.vsearch-brands-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.vsearch-brands-title {
	margin: 0; font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm);
	font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(10, 10, 15, 0.58);
}
.vsearch-brands-tools { display: flex; align-items: center; gap: 6px; }
.vsearch-brands-arrow,
.vsearch-brands-toggle {
	display: inline-flex; align-items: center; justify-content: center; height: 34px;
	border: 1px solid var(--border-dark-2); background: var(--surface); color: var(--night-2);
	border-radius: 999px; cursor: pointer;
}
.vsearch-brands-arrow { width: 34px; padding: 0; }
.vsearch-brands-toggle { padding: 0 14px; font-size: var(--fs-label); font-weight: 600; white-space: nowrap; }
.vsearch-brands-arrow:disabled { opacity: 0.35; cursor: default; }
.vsearch-brands-arrow:not(:disabled):hover,
.vsearch-brands-toggle:hover { border-color: rgba(10,10,15,0.35); }
.vsearch-brands-arrow:focus-visible,
.vsearch-brands-toggle:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 2px; }

.vsearch-brands-list {
	list-style: none; margin: 0; padding: 2px 2px 10px;
	display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x proximity; scroll-padding-inline: 2px; scrollbar-width: none;
}
.vsearch-brands-list::-webkit-scrollbar { display: none; }
.vsearch-brands.is-expanded .vsearch-brands-list {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); overflow: visible;
}
.vsearch-brand-item { flex: 0 0 112px; scroll-snap-align: start; }
.vsearch-brand {
	position: relative; box-sizing: border-box; height: 100%;
	display: flex; flex-direction: column; align-items: center; gap: 5px;
	padding: 12px 8px 10px; border: 1px solid var(--border-dark); border-radius: 14px;
	background: var(--surface); color: var(--night-2); text-decoration: none;
	transition: border-color 150ms ease, background 150ms ease;
}
.vsearch-brand:hover { border-color: rgba(10,10,15,0.3); }
.vsearch-brand:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 2px; }
.vsearch-brand-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; }
.vsearch-brand-logo img { max-width: 84%; max-height: 100%; object-fit: contain; }
.vsearch-brand-initials {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 6px; box-sizing: border-box;
	border-radius: 10px; background: var(--surface-3);
	font-family: var(--display, inherit); font-size: var(--fs-body-sm); color: rgba(10,10,15,0.7);
}
.vsearch-brand-name {
	max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
	font-size: var(--fs-label); font-weight: 600; line-height: 1.2; text-align: center;
}
.vsearch-brand-n { font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm); color: rgba(10, 10, 15, 0.58); }
.vsearch-brand.is-selected { border-color: var(--night-2); background: rgba(223,255,0,0.3); box-shadow: inset 0 0 0 1px var(--night-2); }
.vsearch-brand.is-selected .vsearch-brand-n { color: rgba(10,10,15,0.65); }
.vsearch-brand.is-selected::after {
	content: ""; position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%;
	background: var(--night-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DFFF00' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* Filter bar */
.vsearch-bar {
	position: sticky; top: var(--ts-shell-visible-h, var(--ts-shell-h, 90px)); z-index: 30;
	background: var(--surface); border-bottom: 1px solid var(--border-dark); padding: 10px 0;
}
.vsearch-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vsearch-facet { position: relative; }
.vsearch-facet > summary { list-style: none; }
.vsearch-facet > summary::-webkit-details-marker { display: none; }
.vsearch-facet-btn {
	display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px;
	border: 1px solid var(--border-dark-2); border-radius: 999px; background: var(--surface);
	color: var(--night-2); font-size: var(--fs-body-sm); font-weight: 600; white-space: nowrap;
	cursor: pointer; user-select: none; transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.vsearch-facet-btn:hover { border-color: rgba(10,10,15,0.35); }
.vsearch-facet-btn:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 2px; }
.vsearch-facet[open] > .vsearch-facet-btn { border-color: var(--night-2); box-shadow: inset 0 0 0 1px var(--night-2); }
.vsearch-facet.is-active > .vsearch-facet-btn { background: var(--night-2); border-color: var(--night-2); color: var(--surface); }
.vsearch-facet-sum { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; color: var(--acc); font-weight: 700; }
.vsearch-facet-sum:empty { display: none; }
.vsearch-facet-chev { flex-shrink: 0; opacity: 0.7; transition: transform 150ms ease; }
.vsearch-facet[open] .vsearch-facet-chev { transform: rotate(180deg); }

.vsearch-facet-panel {
	position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
	display: flex; flex-direction: column; width: 340px; max-width: calc(100vw - 32px);
	background: var(--surface); border: 1px solid var(--border-dark); border-radius: 16px;
	box-shadow: 0 24px 60px rgba(10,10,15,0.16), 0 2px 8px rgba(10,10,15,0.06);
}
.vsearch-facet[data-facet="bodies"] .vsearch-facet-panel { width: 420px; }
.vsearch-facet[data-facet="brands"] .vsearch-facet-panel { width: 320px; }
.vsearch-facet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 12px 6px 16px; }
.vsearch-facet-head-title {
	font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm);
	font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(10, 10, 15, 0.58);
}
.vsearch-facet-x {
	display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
	border: 0; border-radius: 50%; background: transparent; color: var(--night-2); cursor: pointer;
}
.vsearch-facet-x:hover { background: var(--surface-3); }
.vsearch-facet-body {
	padding: 6px 16px 14px; overflow-y: auto; overscroll-behavior: contain;
	max-height: min(420px, calc(100vh - 300px));
}
.vsearch-facet-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 12px 16px; border-top: 1px solid var(--border-dark);
}
.vsearch-facet-reset {
	padding: 8px 4px; border: 0; background: none; cursor: pointer;
	color: rgba(10,10,15,0.65); font-size: var(--fs-body-sm); text-decoration: underline; text-underline-offset: 3px;
}
.vsearch-facet-reset:hover { color: var(--night-2); }
.vsearch-facet-done {
	min-height: 42px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--night-2); color: var(--surface); font-size: var(--fs-body-sm); font-weight: 700;
}
.vsearch-facet-done:hover { background: var(--night-3, #101014); }
.vsearch-facet-note { margin: 12px 0 0; font-size: var(--fs-label); line-height: 1.45; color: rgba(10, 10, 15, 0.58); }

/* Options inside a panel */
.vsearch-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.vsearch-opt { position: relative; cursor: pointer; }
.vsearch-opt.is-filtered-out { display: none; }
.vsearch-opt:has(input:focus-visible) { outline: 2px solid var(--acc-deep); outline-offset: 2px; }
.vsearch-opt-n { font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm); color: rgba(10, 10, 15, 0.58); }
.vsearch-opts--pills input,
.vsearch-opts--tiles input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.vsearch-opts--pills .vsearch-opt {
	display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px;
	border: 1px solid var(--border-dark-2); border-radius: 999px; background: var(--surface);
	color: var(--night-2); font-size: var(--fs-body-sm); transition: background 150ms ease, border-color 150ms ease;
}
.vsearch-opts--pills .vsearch-opt:hover { border-color: rgba(10,10,15,0.35); }
.vsearch-opts--pills .vsearch-opt:has(input:checked) { background: var(--acc); border-color: var(--acc); font-weight: 700; }
.vsearch-opts--pills .vsearch-opt:has(input:checked) .vsearch-opt-n { color: rgba(10,10,15,0.6); }

.vsearch-opts-sub {
	margin: 4px 0 8px; font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm);
	letter-spacing: 0.08em; text-transform: uppercase; color: rgba(10, 10, 15, 0.58);
}
.vsearch-body-group + .vsearch-body-group { margin-top: 14px; }
.vsearch-opts--tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vsearch-opts--tiles .vsearch-opt {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	padding: 8px 6px 10px; border: 1px solid var(--border-dark); border-radius: 12px;
	background: var(--surface); text-align: center; transition: background 150ms ease, border-color 150ms ease;
}
.vsearch-opts--tiles .vsearch-opt:hover { border-color: rgba(10,10,15,0.3); }
.vsearch-opt-icon { display: flex; color: rgba(10,10,15,0.65); }
.vsearch-opts--tiles .vsearch-opt-label { font-size: var(--fs-label); font-weight: 600; line-height: 1.2; color: var(--night-2); }
.vsearch-opts--tiles .vsearch-opt:has(input:checked) { border-color: var(--night-2); background: rgba(223,255,0,0.3); box-shadow: inset 0 0 0 1px var(--night-2); }
.vsearch-opts--tiles .vsearch-opt:has(input:checked) .vsearch-opt-icon { color: var(--night-2); }

.vsearch-brandfind { position: sticky; top: -6px; z-index: 1; margin: -6px -4px 6px; padding: 6px 4px; background: var(--surface); }
.vsearch-brandfind svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: rgba(10,10,15,0.4); pointer-events: none; }
.vsearch-brandfind input {
	width: 100%; height: 40px; box-sizing: border-box; padding: 0 12px 0 36px;
	border: 1px solid var(--border-dark-2); border-radius: 10px; background: var(--surface);
	color: var(--night-2); font-size: var(--fs-body-sm);
}
.vsearch-brandfind input:focus { outline: none; border-color: var(--acc-deep); }
.vsearch-opts--list { flex-direction: column; flex-wrap: nowrap; gap: 0; }
.vsearch-opt--row {
	display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px;
	font-size: var(--fs-body-sm); color: var(--night-2);
}
.vsearch-opt--row:hover { background: var(--surface-2); }
.vsearch-opt--row input { flex-shrink: 0; width: 16px; height: 16px; margin: 0; accent-color: var(--night-2); }
.vsearch-opt--row .vsearch-opt-n { margin-left: auto; }

/* Results */
.vsearch-results { padding-top: 16px; }
.vsearch-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
/* An h2 since 2026-10-06 (the heading between the page title and the cards), styled exactly as the paragraph it was. */
.vsearch-count { margin: 0; font-size: var(--fs-body-sm); font-weight: inherit; line-height: inherit; color: rgba(10,10,15,0.6); }
.vsearch-count strong { color: var(--night-2); font-weight: 700; }
.vsearch-sort {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm);
	letter-spacing: 0.06em; text-transform: uppercase; color: rgba(10, 10, 15, 0.58);
}
.vsearch-sort select {
	height: 40px; padding: 0 36px 0 14px; appearance: none; -webkit-appearance: none; cursor: pointer;
	border: 1px solid var(--border-dark-2); border-radius: 999px; color: var(--night-2);
	background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0c0e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 13px center / 12px no-repeat;
	font-family: var(--body, "Google Sans", sans-serif); font-size: var(--fs-body-sm); letter-spacing: 0; text-transform: none;
}
.vsearch-sort select:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 2px; }
.vsearch-apply {
	height: 40px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--night-2); color: var(--surface); font-weight: 700;
}

.vsearch-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.vsearch-chips-list { display: contents; }
.vsearch-chip {
	display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 14px;
	border: 1px solid transparent; border-radius: 999px; background: var(--surface-3);
	color: var(--night-2); font-size: var(--fs-label); font-weight: 600; text-decoration: none; cursor: pointer;
}
.vsearch-chip:hover { background: var(--surface); border-color: rgba(10,10,15,0.25); }
.vsearch-chip:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 2px; }
.vsearch-chip svg { flex-shrink: 0; opacity: 0.6; }
.vsearch-chips-clear {
	padding: 6px 4px; border: 0; background: none; cursor: pointer;
	color: var(--night-2); font-size: var(--fs-label); font-weight: 600;
	text-decoration: underline; text-underline-offset: 3px;
}

/* Four, three or two columns: all divide a batch of 12, so a batch always
   ends on a full row. An auto-fill grid gave five columns at 1440px, leaving
   the last row of every batch part empty above Show more. */
.vsearch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; min-height: 200px; }
@media (max-width: 1099px) { .vsearch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .vsearch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.vsearch-grid.is-loading { opacity: 0.45; pointer-events: none; transition: opacity 150ms ease; }

.vs-card {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	border: 1px solid var(--border-dark); border-radius: 16px; background: var(--surface);
	color: var(--night-2); text-decoration: none;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.vs-card:hover { border-color: var(--border-dark-2); box-shadow: 0 12px 32px rgba(10,10,15,0.08); transform: translateY(-2px); }
.vs-card:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 2px; }
.vs-card-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #f2f2ee; }
.vs-card-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vs-card-ph {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
	background: linear-gradient(180deg, #f6f6f2 0%, #ecece6 100%);
}
.vs-card-ph img { max-width: 40%; max-height: 36%; object-fit: contain; opacity: 0.5; filter: grayscale(1); }
.vs-card-ph-note {
	font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm);
	letter-spacing: 0.06em; text-transform: uppercase; color: rgba(10, 10, 15, 0.58);
}
.vs-card-flag {
	position: absolute; left: 10px; bottom: 10px; z-index: 1; padding: 4px 9px; border-radius: 999px;
	font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm); font-weight: 700;
	letter-spacing: 0.06em; text-transform: uppercase; background: var(--night-2); color: var(--surface);
}
.vs-card-flag.is-muted { background: rgba(10,10,15,0.55); }
.vs-card-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.vs-card-meta {
	font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm);
	letter-spacing: 0.06em; text-transform: uppercase; color: rgba(10, 10, 15, 0.58);
}
.vs-card-title {
	margin: 0; font-family: var(--display, "PolySans Bulky", sans-serif); font-size: var(--fs-body);
	font-weight: 400; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--night-2);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vs-card-price { margin-top: 2px; font-size: var(--fs-body-sm); font-weight: 700; color: var(--night-2); }
.vs-card-price.is-pending { font-weight: 500; color: rgba(10, 10, 15, 0.58); }
.vs-card-specs { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-label); color: rgba(10, 10, 15, 0.58); }

.vsearch-empty {
	margin-top: 8px; padding: 44px 20px; text-align: center;
	border: 1px dashed var(--border-dark-2); border-radius: 18px; background: var(--surface-2);
}
.vsearch-empty-title { margin: 0 0 6px; font-family: var(--display, inherit); font-size: var(--fs-h4); color: var(--night-2); }
.vsearch-empty-text { margin: 0 0 18px; font-size: var(--fs-body-sm); color: rgba(10,10,15,0.6); }
.vsearch-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vsearch-empty-alt {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--night-2); background: var(--surface); color: var(--night-2); font-size: var(--fs-body-sm); font-weight: 700;
}
.vsearch-empty-alt:hover { background: var(--acc); border-color: var(--acc); }
.vsearch-empty-btn {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px;
	background: var(--night-2); color: var(--surface); font-size: var(--fs-body-sm); font-weight: 700; text-decoration: none;
}

.vsearch-suggest { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.vsearch-suggest-links { display: contents; }
.vsearch-suggest-label {
	font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm);
	letter-spacing: 0.08em; text-transform: uppercase; color: rgba(10, 10, 15, 0.58);
}
.vsearch-suggest-link {
	display: inline-block; padding: 7px 14px; border: 1px solid rgba(107,122,0,0.4); border-radius: 999px;
	color: var(--acc-deep); font-size: var(--fs-body-sm); font-weight: 600; text-decoration: none;
}
.vsearch-suggest-link:hover { background: rgba(107,122,0,0.1); }

.vsearch-more { margin-top: 28px; text-align: center; }
.vsearch-more-btn {
	display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px;
	border: 1px solid var(--night-2); border-radius: 999px; background: var(--surface); color: var(--night-2);
	font-size: var(--fs-body-sm); font-weight: 700; cursor: pointer; transition: background 150ms ease, color 150ms ease;
}
.vsearch-more-btn:hover { background: var(--night-2); color: var(--surface); }
.vsearch-more-btn:disabled { opacity: 0.5; cursor: progress; }
.vsearch-more-n { font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm); font-weight: 600; opacity: 0.6; }

/* Brand hub (taxonomy-brand.php): logo, summary, section tabs, and the line
   linking models no longer sold. The models list itself is the catalogue. */
.vsearch-head--brand { display: flex; align-items: center; gap: 22px; }
.vsearch-head-text { min-width: 0; }
.vsearch-brandmark {
	flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	width: 96px; height: 96px; box-sizing: border-box; padding: 16px;
	border: 1px solid var(--border-dark); border-radius: 20px; background: var(--surface);
}
.vsearch-brandmark img { max-width: 100%; max-height: 100%; object-fit: contain; }

.vsearch-tabs {
	display: flex; gap: 4px; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none;
	border-bottom: 1px solid var(--border-dark);
}
.vsearch-tabs::-webkit-scrollbar { display: none; }
.vsearch-tab {
	display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; margin-bottom: -1px; padding: 10px 14px 12px;
	border-bottom: 2px solid transparent; color: rgba(10,10,15,0.6); font-size: var(--fs-body-sm); font-weight: 600;
	text-decoration: none; white-space: nowrap;
}
.vsearch-tab:hover { color: var(--night-2); }
.vsearch-tab.is-active { color: var(--night-2); border-bottom-color: var(--night-2); }
.vsearch-tab:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 2px; }
.vsearch-tab-n { font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm); color: rgba(10, 10, 15, 0.58); }
.vsearch-gone { margin: 24px 0 0; font-size: var(--fs-body-sm); line-height: 1.6; color: rgba(10,10,15,0.6); }
.vsearch-gone-label {
	margin-right: 8px; font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm);
	letter-spacing: 0.08em; text-transform: uppercase; color: rgba(10, 10, 15, 0.58);
}
.vsearch-gone a { color: var(--night-2); text-underline-offset: 3px; }
.vsearch-latest { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border-dark); }
.vsearch-latest-title { margin: 0 0 18px; font-family: var(--display, inherit); font-size: var(--fs-h3); color: var(--night-2); }

@media (pointer: coarse) {
	.vsearch-facet-btn, .vsearch-sort select { min-height: 44px; }
	.vsearch-chip { height: 40px; }
}

/* Phones and small tablets: the bar scrolls sideways and a panel opens
   under it, full width, dimming the page below it. The dim is the panel's
   own shadow pushed downwards, so the bar above it stays clear. */
@media (max-width: 899px) {
	.vsearch-top { flex-direction: column; gap: 10px; }
	.vsearch-seg { align-self: stretch; }
	.vsearch-seg-opt { flex: 1 1 0; }
	.vsearch-seg-opt span { width: 100%; padding: 0 8px; }
	.vsearch-bar { margin: 0 calc(-1 * var(--pad)); padding: 8px 0; }
	.vsearch-bar-row { flex-wrap: nowrap; overflow-x: auto; padding: 0 var(--pad); scrollbar-width: none; }
	.vsearch-bar-row::-webkit-scrollbar { display: none; }
	.vsearch-facet { position: static; flex-shrink: 0; }
	.vsearch-facet-panel {
		top: 100%; right: 0; left: 0 !important; width: auto !important; max-width: none;
		border-width: 1px 0 0; border-radius: 0 0 20px 20px;
		box-shadow: 0 100vmax 0 100vmax rgba(10,10,15,0.45);
	}
	.vsearch-facet-body { max-height: calc(100vh - 240px); max-height: calc(100dvh - 240px); }
	.vsearch-opts--tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vsearch-brands-arrow { display: none; }
	.vsearch-brands-list { margin: 0 calc(-1 * var(--pad)); padding: 2px var(--pad) 10px; scroll-padding-inline: var(--pad); }
	.vsearch-brands-list::-webkit-scrollbar { display: none; }
	.vsearch-brands.is-expanded .vsearch-brands-list { margin: 0; padding: 2px 0 10px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
	.vsearch-brand-item { flex-basis: 96px; }
	.vsearch-brand-logo { height: 34px; }
}
@media (max-width: 599px) {
	.vsearch-head--brand { align-items: flex-start; gap: 14px; }
	.vsearch-brandmark { width: 64px; height: 64px; padding: 10px; border-radius: 14px; }
	.vsearch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.vs-card { border-radius: 14px; }
	.vs-card-body { padding: 10px 12px 12px; gap: 3px; }
	.vs-card-ph-note { display: none; }
	.vsearch-summary { margin-bottom: 8px; }
}

/* Share + print controls (VDP hero panel). */
.vdp-share-row {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	margin-top: 14px; padding-top: 14px;
	border-top: 1px solid rgba(10,10,15,0.10);
}

.vdp-share-label {
	font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm);
	letter-spacing: 0.09em; text-transform: uppercase;
	color: rgba(10, 10, 15, 0.58); margin-right: 2px;
}
.vdp-share-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	min-width: 34px; height: 34px; padding: 0 10px;
	border-radius: 999px; border: 1px solid rgba(10,10,15,0.16);
	background: var(--surface); color: var(--night-2); cursor: pointer;
	text-decoration: none; font-size: var(--fs-label); font-weight: 600;
	transition: border-color 160ms ease, background 160ms ease;
}
.vdp-share-btn:hover { border-color: rgba(107,122,0,0.5); background: rgba(107,122,0,0.08); color: var(--acc-deep); }

/* Breadcrumbs sit in the configurator topbar on a VDP, where the light
   theme means they need their own colours rather than pages.css's. */
.vdp-config-topbar .sp-breadcrumbs { margin: 0; }
.vdp-config-topbar .sp-breadcrumb a { color: rgba(10, 10, 15, 0.58); }
.vdp-config-topbar .sp-breadcrumb a:hover { color: var(--acc-deep); }
.vdp-config-topbar .sp-breadcrumb span[aria-current] { color: rgba(10,10,15,0.85); }

/* Brand kicker on the VDP links through to that brand hub. Styled to match the
   plain-text kicker exactly, with a hover affordance so it reads as clickable. */
a.vdp-config-kicker--link {
	display: inline-block;
	text-decoration: none;
	transition: color 160ms ease;
}
a.vdp-config-kicker--link:hover,
a.vdp-config-kicker--link:focus-visible {
	color: var(--acc-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* India Vehicle Sales Tracker (/sales-tracker/), added 2026-09-02. Light-only
   — this page always carries body.calc-page, so no dark-mode branch needed. */
.strk-retail {
	border: 1px solid var(--border-dark);
	border-radius: 16px;
	padding: 28px clamp(18px, 3vw, 32px);
	margin: 0 0 40px;
	background: rgba(0,0,0,0.015);
}
.strk-retail-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--mono, 'JetBrains Mono', monospace);
	font-size: var(--fs-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.56);
	margin-bottom: 18px;
}
.strk-retail-month { color: var(--acc-deep); font-weight: 600; }
.strk-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 24px;
}
.strk-stat-n {
	font-family: var(--mono, 'JetBrains Mono', monospace);
	font-variant-numeric: tabular-nums;
	font-size: clamp(24px, 2vw + 14px, 34px);
	font-weight: 700;
	color: var(--night-2);
	line-height: 1.1;
}
.strk-stat-l { font-size: var(--fs-body-sm); color: rgba(0,0,0,0.6); margin-top: 6px; }
.strk-stat-yoy { font-size: var(--fs-label-sm); font-weight: 600; margin-top: 8px; }
.strk-stat-yoy--up { color: var(--acc-deep); }
.strk-stat-yoy--down { color: #b3261e; }

.strk-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-bottom: 4px;
}
.strk-section-sub {
	font-family: var(--mono, 'JetBrains Mono', monospace);
	font-size: var(--fs-label-sm);
	color: rgba(0, 0, 0, 0.56);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.strk-table-wrap { overflow-x: auto; margin-top: 18px; }
.strk-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.strk-table thead td {
	font-family: var(--mono, 'JetBrains Mono', monospace);
	font-size: var(--fs-label-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(0, 0, 0, 0.56);
	padding: 0 14px 10px;
	border-bottom: 1px solid var(--border-dark-2);
}
.strk-table tbody td {
	padding: 13px 14px;
	border-bottom: 1px solid var(--border-dark);
	color: rgba(0,0,0,0.8);
}
.strk-table tbody tr:last-child td { border-bottom: none; }
.strk-table tfoot td {
	padding: 13px 14px 0;
	font-size: var(--fs-label-sm);
	color: rgba(0, 0, 0, 0.56);
	border-top: 1px solid var(--border-dark-2);
	padding-top: 14px;
}
.strk-table tfoot .strk-table-num { color: var(--night-2); font-weight: 700; font-family: var(--mono, 'JetBrains Mono', monospace); }
.strk-table-rank { width: 34px; font-family: var(--mono, 'JetBrains Mono', monospace); color: rgba(0, 0, 0, 0.56); }
.strk-table-brand { color: var(--night-2); font-weight: 600; }
.strk-table-num { text-align: right; font-family: var(--mono, 'JetBrains Mono', monospace); font-variant-numeric: tabular-nums; white-space: nowrap; }
.strk-yoy-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-label-sm); font-weight: 600; }
.strk-yoy-tag--up { color: #667500; background: rgba(107,122,0,0.08); }
.strk-yoy-tag--down { color: #b3261e; background: rgba(179,38,30,0.08); }
.strk-yoy-na { font-size: var(--fs-label-sm); color: rgba(10,10,15,0.58); }

.strk-month-form {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 28px;
}
.strk-month-label {
	font-family: var(--mono, 'JetBrains Mono', monospace);
	font-size: var(--fs-label-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(0, 0, 0, 0.56);
}
.strk-month-select {
	font-family: var(--mono, 'JetBrains Mono', monospace);
	font-size: var(--fs-body-sm);
	font-weight: 600;
	color: var(--night-2);
	background: rgba(0,0,0,0.03);
	border: 1px solid var(--border-dark-2);
	border-radius: 8px;
	padding: 8px 32px 8px 12px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7a00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	cursor: pointer;
}
.strk-month-select:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 1px; }
.strk-month-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: -14px 0 28px;
}
.strk-month-links-label {
	font-family: var(--mono, 'JetBrains Mono', monospace);
	font-size: var(--fs-label-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(0, 0, 0, 0.56);
}
.strk-month-link {
	font-size: var(--fs-label-sm);
	color: var(--acc-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.strk-month-link:hover { color: var(--night-2); }
.strk-month-link.is-current { color: rgba(0, 0, 0, 0.56); text-decoration: none; font-weight: 600; }
.strk-no-retail { font-size: var(--fs-body-sm); color: rgba(0, 0, 0, 0.56); margin: 0 0 32px; max-width: 620px; }

.strk-source { margin-top: 14px; font-size: var(--fs-label-sm); color: rgba(0, 0, 0, 0.56); }
.strk-source a { color: var(--acc-deep); text-decoration: underline; text-underline-offset: 2px; }
.strk-disclaimer {
	margin: 44px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--border-dark);
	font-size: var(--fs-label-sm);
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.56);
	max-width: 760px;
}
.vdp-lightbox-zoom:disabled { opacity: 0.35; cursor: default; }
.vdp-lightbox-zoom:disabled:hover { background: transparent; color: var(--surface); }
@media (pointer: coarse) { .vdp-lightbox-zoom { width: 40px; height: 40px; } }

/* VDP Overview cards and the three tabs (2026-09-27). Soft-shadow cards in
   a 12-column grid, 6 on tablets, 1 on phones. Each card's span comes from
   inline --span and --span-md set in the templates. */
.vdp-page--bento {
	--vdp-ov-shadow: 0 1px 1px rgba(28,28,12,0.04), 0 2px 8px rgba(28,28,12,0.05), 0 14px 32px -12px rgba(28,28,12,0.12);
	--vdp-ov-r: 20px;
	--vdp-ov-ink-2: rgba(12,12,14,0.74);
	--vdp-ov-ink-3: rgba(12,12,14,0.58);
	--vdp-ov-ink-4: rgba(12,12,14,0.38);
	--vdp-ov-wash: rgba(223,255,0,0.2);
	padding-bottom: 0;
}
.vdp-panels { background: var(--surface-3); padding: 20px 0 clamp(40px, 5vw, 64px); }
.vdp-page--bento .vdp-cta-row { margin-top: 24px; }

/* Tab bar: a white pill of tabs on the grey band. */
body.single-vehicle .vdp-page--bento .vdp-subnav { background: var(--surface-3); border-bottom: 0; }
.vdp-page--bento .vdp-subnav-inner { padding-top: 10px; padding-bottom: 10px; }
.vdp-subnav-tabs { display: flex; flex: none; gap: 4px; padding: 4px; background: var(--surface); border-radius: 999px; box-shadow: var(--vdp-ov-shadow); }
body.single-vehicle .vdp-subnav .vdp-subnav-link { border: 0; border-radius: 999px; padding: 9px 18px; font-family: var(--body); font-size: var(--fs-body-sm); font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--vdp-ov-ink-2); }
body.single-vehicle .vdp-subnav .vdp-subnav-link:hover { color: var(--night-2); background: var(--surface-2); }
body.single-vehicle .vdp-subnav .vdp-subnav-link.is-active { color: var(--surface); background: var(--night-2); }
.vdp-subnav-link:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 2px; }
@media (max-width: 719px) {
	.vdp-subnav-tabs { flex: 1; justify-content: space-between; }
	body.single-vehicle .vdp-subnav .vdp-subnav-link { padding: 8px 10px; font-size: var(--fs-label); }
}

/* Grid and card. */
.vdp-ov { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.vdp-ov [hidden] { display: none !important; }
.vdp-ov-card {
	grid-column: span var(--span, 12);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px 22px 22px;
	background: var(--surface);
	border-radius: var(--vdp-ov-r);
	box-shadow: var(--vdp-ov-shadow);
	container-type: inline-size;
	color: var(--night-2);
}
.vdp-ov-card button:focus-visible,
.vdp-ov-card a:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 2px; }
@media (max-width: 1079px) {
	.vdp-ov { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.vdp-ov-card { grid-column: span var(--span-md, 6); }
}
@media (max-width: 719px) {
	.vdp-ov { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.vdp-ov-card { grid-column: auto; padding: 18px; }
}

.vdp-ov-head { display: flex; align-items: center; gap: 8px; min-height: 24px; min-width: 0; }
.vdp-ov-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--surface-2); color: var(--night-2); }
.vdp-ov-label { margin: 0; font-family: var(--mono); font-size: var(--fs-label-sm); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap; color: var(--vdp-ov-ink-2); }
.vdp-ov-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-label); color: var(--vdp-ov-ink-3); }
.vdp-ov-sub::before { content: "\00b7"; margin-right: 6px; }
.vdp-ov-act { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: var(--fs-label); font-weight: 700; white-space: nowrap; color: var(--night-2); text-decoration: none; cursor: pointer; }
.vdp-ov-act:hover { color: var(--acc-deep); }

.vdp-ov-big { font-family: var(--display); font-size: var(--fs-h1); line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--night-2); }
.vdp-ov-big--2 { font-size: var(--fs-h2); }
.vdp-ov-unit { margin-left: 6px; font-family: var(--body); font-size: var(--fs-body-sm); font-weight: 700; letter-spacing: 0; color: var(--vdp-ov-ink-3); }
.vdp-ov-cap { margin-top: 6px; font-size: var(--fs-label); color: var(--vdp-ov-ink-3); }
.vdp-ov-fine { margin: 0; font-size: var(--fs-label); line-height: 1.5; color: var(--vdp-ov-ink-3); }
.vdp-ov-fine b { color: var(--night-2); }
.vdp-ov-mini { margin: 0 0 8px; font-family: var(--mono); font-size: var(--fs-label-sm); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--vdp-ov-ink-3); }

.vdp-ov-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.vdp-ov-stat { min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.vdp-ov-stat .k { display: block; font-size: var(--fs-label); color: var(--vdp-ov-ink-3); }
.vdp-ov-stat .v { display: block; margin-top: 2px; font-size: var(--fs-body-sm); font-weight: 700; overflow-wrap: anywhere; color: var(--night-2); }
.vdp-ov-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vdp-ov-fit .v { font-family: var(--display); font-size: var(--fs-h4); font-weight: 400; letter-spacing: -0.01em; }

/* The Spec'd take. */
.vdp-ov-quote { margin: 0; padding: 0 0 0 14px; border-left: 3px solid var(--acc); }
.vdp-ov-quote p { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 500; color: var(--night-2); }
.vdp-ov-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: var(--fs-label); font-weight: 700; color: var(--night-2); text-decoration: none; }
.vdp-ov-link:hover { color: var(--acc-deep); }
.vdp-ov-pc { display: grid; gap: 16px; }
@container (min-width: 520px) { .vdp-ov-pc { grid-template-columns: 1fr 1fr; } }
.vdp-ov-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.vdp-ov-list li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: var(--fs-body-sm); line-height: 1.45; color: var(--vdp-ov-ink-2); }
.vdp-ov-yes, .vdp-ov-no { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; }
.vdp-ov-yes { background: var(--acc); color: var(--night-2); }
.vdp-ov-no { background: var(--surface-2); color: var(--vdp-ov-ink-2); }

/* Performance, range, engine. */
.vdp-ov-perf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.vdp-ov-batt { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.vdp-ov-batt-body { position: relative; flex: 1; height: 38px; border: 2px solid var(--night-2); border-radius: 10px; background: repeating-linear-gradient(90deg, var(--surface-2) 0 8px, var(--surface-3) 8px 9px); }
.vdp-ov-batt-win { position: absolute; top: 3px; bottom: 3px; display: grid; place-items: center; border-radius: 5px; background: var(--acc); font-size: var(--fs-label); font-weight: 800; color: var(--night-2); }
.vdp-ov-batt-nub { width: 5px; height: 14px; border-radius: 0 3px 3px 0; background: var(--night-2); }
.vdp-ov-batt-scale { position: relative; height: 16px; margin: 4px 9px 0 0; font-family: var(--mono); font-size: var(--fs-label-sm); color: var(--vdp-ov-ink-3); }
.vdp-ov-batt-scale span { position: absolute; transform: translateX(-50%); }
.vdp-ov-batt-scale span:first-child { left: 0; transform: none; }
.vdp-ov-batt-scale span:last-child { right: 0; transform: none; }
.vdp-ov-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.vdp-ov-opt { padding: 12px; border: 1px solid var(--border-dark-2); border-radius: 14px; transition: border-color 0.2s ease, background-color 0.2s ease; }
.vdp-ov-opt .f { display: block; font-family: var(--mono); font-size: var(--fs-label-sm); letter-spacing: 0.04em; color: var(--vdp-ov-ink-3); }
.vdp-ov-opt .p { display: block; margin-top: 4px; font-family: var(--display); font-size: var(--fs-h4); letter-spacing: -0.02em; }
.vdp-ov-opt .t { display: block; font-size: var(--fs-label); color: var(--vdp-ov-ink-3); }
.vdp-ov-opt.is-on { border-color: var(--night-2); background: var(--surface-2); }
.vdp-ov-info { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: var(--fs-label); line-height: 1.45; color: var(--vdp-ov-ink-2); }
.vdp-ov-info svg { flex: none; margin-top: 1px; }

.vdp-ov-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vdp-ov-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--border-dark-2); border-radius: 999px; background: var(--surface); font-size: var(--fs-label); font-weight: 600; color: var(--night-2); }
.vdp-ov-chip svg { flex: none; color: var(--acc-deep); }
.vdp-ov-chip small { font-size: var(--fs-label-sm); font-weight: 500; color: var(--vdp-ov-ink-3); }
.vdp-ov-chip.is-off { border-style: dashed; color: var(--vdp-ov-ink-3); }
.vdp-ov-chip.is-off svg { color: var(--vdp-ov-ink-4); }

/* Safety. */
.vdp-ov-crash { display: grid; gap: 8px; }
.vdp-ov-stars { display: flex; gap: 4px; }
.vdp-ov-stars svg { width: 26px; height: 26px; }
.vdp-ov-stars .on { fill: var(--night-2); stroke: var(--night-2); }
.vdp-ov-stars .off { fill: none; stroke: var(--vdp-ov-ink-4); stroke-width: 1.5; }
.vdp-ov-crash-line { margin: 0; font-size: var(--fs-body-sm); font-weight: 700; color: var(--night-2); }
.vdp-ov-crash-line.is-plain { font-family: var(--display); font-size: var(--fs-h4); font-weight: 400; line-height: 1.25; }
.vdp-ov-scores { display: grid; gap: 8px; }
.vdp-ov-score { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; font-size: var(--fs-label); }
.vdp-ov-score .k { color: var(--vdp-ov-ink-3); }
.vdp-ov-score .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.vdp-ov-bar { display: block; height: 8px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.vdp-ov-bar i { display: block; height: 100%; border-radius: inherit; background: var(--night-2); }

/* One grid for all the bars, so every bar starts at the same point. */
.vdp-ov-caps { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.vdp-ov-cap-row { display: contents; }
.vdp-ov-cap-row .k { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-label); color: var(--vdp-ov-ink-3); }
.vdp-ov-cap-row .v { font-family: var(--display); font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.vdp-ov-cap-row .vdp-ov-bar { height: 14px; border-radius: 6px; }
.vdp-ov-cap-row.is-dim .vdp-ov-bar i { background: var(--vdp-ov-ink-4); }
.vdp-ov-cap-row.is-dim .v { color: var(--vdp-ov-ink-3); }
.vdp-ov-seats { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; color: var(--night-2); }

/* Label and value rows: price, and every spec-sheet category. */
.vdp-ov-rows { display: grid; }
.vdp-ov-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-dark); font-size: var(--fs-body-sm); }
.vdp-ov-row:first-child { padding-top: 0; border-top: 0; }
.vdp-ov-row .k { min-width: 0; color: var(--vdp-ov-ink-3); }
.vdp-ov-row .v { max-width: 62%; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--night-2); }
.vdp-ov-row.is-long { display: grid; gap: 4px; }
.vdp-ov-row.is-long .v { max-width: none; text-align: left; font-weight: 500; line-height: 1.5; color: var(--vdp-ov-ink-2); }
.vdp-ov-row-check { display: inline-flex; color: var(--acc-deep); }

/* Cabin. */
.vdp-ov-cabin { display: grid; gap: 16px; }
@container (min-width: 560px) { .vdp-ov-cabin.has-img { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.vdp-ov-cabin-img { overflow: hidden; aspect-ratio: 3 / 2; border-radius: 14px; background: var(--surface-2); }
.vdp-ov-cabin-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vdp-ov-feat { display: grid; margin: 0; padding: 0; list-style: none; }
.vdp-ov-feat li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-dark); }
.vdp-ov-feat li:first-child { padding-top: 0; border-top: 0; }
.vdp-ov-feat .k { display: block; font-size: var(--fs-label); color: var(--vdp-ov-ink-3); }
.vdp-ov-feat .v { display: block; font-size: var(--fs-body-sm); font-weight: 600; color: var(--night-2); }
.vdp-ov-feat .t { display: inline-block; margin-top: 3px; font-size: var(--fs-label-sm); font-weight: 600; color: var(--vdp-ov-ink-3); }
.vdp-ov-feat li.is-off .v { color: var(--vdp-ov-ink-3); }
.vdp-ov-mark { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--acc); color: var(--night-2); }
.vdp-ov-feat li.is-off .vdp-ov-mark { background: var(--surface-2); color: var(--vdp-ov-ink-4); }

/* Photos. */
.vdp-ov-photo { display: block; width: 100%; max-height: 420px; padding: 0; overflow: hidden; aspect-ratio: 16 / 10; border: 0; border-radius: 14px; background: var(--surface-2); cursor: zoom-in; }
.vdp-ov-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
@media (hover: hover) { .vdp-ov-photo:hover img { transform: scale(1.03); } }
.vdp-ov-photo-cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vdp-ov-photo-cap b { display: block; font-family: var(--display); font-size: var(--fs-h3); font-weight: 400; letter-spacing: -0.02em; }
.vdp-ov-btn { flex: none; padding: 9px 16px; border: 1px solid var(--night-2); border-radius: 999px; background: var(--surface); font: inherit; font-size: var(--fs-label); font-weight: 700; color: var(--night-2); cursor: pointer; }
.vdp-ov-btn:hover { background: var(--night-2); color: var(--surface); }

/* Dimensions drawing. */
.vdp-ov-dims-svg { display: block; width: 100%; height: auto; max-height: 380px; }
.vdp-ov-shape path, .vdp-ov-shape circle { fill: none; stroke: var(--night-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vdp-ov-shape circle { fill: var(--surface-2); }
.vdp-ov-shape .vdp-ov-shape-glass { fill: var(--surface-3); stroke-width: 2; }
.vdp-ov-shape .vdp-ov-shape-hub { fill: var(--surface); stroke-width: 2; }
.vdp-ov-shape-sill { stroke: var(--vdp-ov-ink-4); stroke-width: 2; }
.vdp-ov-ground { stroke: var(--vdp-ov-ink-4); stroke-width: 2; stroke-dasharray: 2 6; }
.vdp-ov-dim { stroke: var(--vdp-ov-ink-2); stroke-width: 2; }
.vdp-ov-dim-bg { fill: var(--surface); }
.vdp-ov-dim-label { font-family: var(--body); font-weight: 700; fill: var(--night-2); }
.vdp-ov-dims-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }

/* Rivals. */
.vdp-ov-rivals { display: grid; }
.vdp-ov-riv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border-dark); }
.vdp-ov-riv:first-child { padding-top: 0; border-top: 0; }
.vdp-ov-riv .who { grid-column: 1; grid-row: 1; min-width: 0; }
.vdp-ov-riv .pr { grid-column: 2; grid-row: 1; text-align: right; font-size: var(--fs-body-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.vdp-ov-riv .mt { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.vdp-ov-riv .end { display: none; }
.vdp-ov-riv .nm { display: block; font-size: var(--fs-body-sm); font-weight: 700; color: var(--night-2); text-decoration: none; }
.vdp-ov-riv a.nm:hover { color: var(--acc-deep); }
.vdp-ov-riv .tg { display: block; font-size: var(--fs-label); color: var(--vdp-ov-ink-3); }
.vdp-ov-riv .dl { display: block; font-size: var(--fs-label); font-weight: 600; color: var(--vdp-ov-ink-3); }
.vdp-ov-riv .mt .vdp-ov-bar { height: 6px; }
.vdp-ov-riv .mv { min-width: 60px; text-align: right; font-size: var(--fs-label); font-weight: 700; font-variant-numeric: tabular-nums; }
.vdp-ov-riv.is-self .nm { color: var(--acc-deep); }
.vdp-ov-riv.is-self .vdp-ov-bar i { background: var(--acc-deep); }
.vdp-ov-cmp { padding: 4px 10px; border: 1px solid var(--border-dark-2); border-radius: 999px; font-size: var(--fs-label); font-weight: 700; white-space: nowrap; color: var(--night-2); text-decoration: none; }
.vdp-ov-cmp:hover { border-color: var(--night-2); }
@container (min-width: 640px) {
	.vdp-ov-riv { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) 120px 84px; }
	.vdp-ov-riv .mt { grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr) auto; }
	.vdp-ov-riv .pr { grid-column: 3; }
	.vdp-ov-riv .end { display: block; grid-column: 4; grid-row: 1; text-align: right; }
	.vdp-ov-riv .cmp-slot { display: none; }
}

/* News and reviews. */
.vdp-ov-card--news .vdp-related-post { padding: 8px; border-radius: 12px; }
@container (min-width: 760px) {
	.vdp-ov-card--news .vdp-related-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.vdp-ov-card--news .vdp-related-post { border-bottom: 0; }
}

/* Specs & Features. */
.vdp-ov-speccols { grid-column: 1 / -1; columns: 2 380px; column-gap: 16px; }
.vdp-ov-speccard { margin-bottom: 16px; break-inside: avoid; }
.vdp-ov-card .vdp-audit-grid { grid-template-columns: 1fr; column-gap: 32px; }
@container (min-width: 620px) { .vdp-ov-card .vdp-audit-grid { grid-template-columns: 1fr 1fr; } }
.vdp-ov-card .vdp-audit-card { padding: 14px 0; }
.vdp-ov-table-wrap { margin: 0 -4px; padding: 0 4px; overflow-x: auto; }
.vdp-ov-matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.vdp-ov-matrix { min-width: 520px; }
.vdp-ov-matrix th, .vdp-ov-matrix td { padding: 10px 8px; border-top: 1px solid var(--border-dark); text-align: center; }
.vdp-ov-matrix tbody th { text-align: left; font-weight: 500; color: var(--vdp-ov-ink-2); }
.vdp-ov-matrix thead th { border-top: 0; font-family: var(--mono); font-size: var(--fs-label-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vdp-ov-ink-3); }
.vdp-ov-matrix thead th:first-child { text-align: left; }
.vdp-ov-matrix thead th.is-sel { color: var(--night-2); }
.vdp-ov-matrix td.is-sel { background: var(--surface-2); }
.vdp-ov-dash { display: inline-block; width: 10px; height: 2px; border-radius: 1px; vertical-align: middle; background: var(--vdp-ov-ink-4); }

/* Price & Ownership. */
.vdp-ov-best { margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: var(--acc); font-family: var(--mono); font-size: var(--fs-label-sm); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: var(--night-2); }
/* Price tab variant list as a step ladder (2026-10-08): price, the step over the variant it is measured against, and what it adds where we have written it. */
.vdp-steps { margin: 0; padding: 0; list-style: none; }
.vdp-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: baseline; padding: 14px 12px; border-top: 1px solid var(--border-dark); cursor: pointer; }
.vdp-ov-card--ladder > .vdp-steps > .vdp-step:first-child { border-top: 0; }
.vdp-step:hover { background: var(--surface-2); }
.vdp-step.is-sel { background: var(--vdp-ov-wash); }
.vdp-step-who { grid-column: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.vdp-step-name { padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-body-sm); font-weight: 700; text-align: left; color: inherit; cursor: pointer; }
.vdp-step .vdp-ov-best { margin: 0; }
.vdp-step-meta { flex-basis: 100%; font-family: var(--mono); font-size: var(--fs-label-sm); letter-spacing: 0.04em; text-transform: uppercase; color: var(--vdp-ov-ink-3); }
.vdp-step-price { grid-column: 2; font-family: var(--mono); font-size: var(--fs-body-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vdp-step-diff { grid-column: 1 / -1; display: grid; gap: 4px; margin-top: 6px; }
.vdp-step-diff p { margin: 0; font-size: var(--fs-label); line-height: 1.45; }
.vdp-step-delta { color: var(--vdp-ov-ink-3); }
.vdp-step-delta b { font-family: var(--mono); font-weight: 700; color: var(--acc-deep); }
.vdp-step.is-sel .vdp-step-delta b { color: var(--night-2); }
.vdp-step-base, .vdp-step-total { color: var(--vdp-ov-ink-3); }
.vdp-step-adds { color: var(--vdp-ov-ink-2); }
.vdp-step-adds b { margin-right: 2px; font-weight: 700; color: var(--night-2); }
.vdp-step-total { display: none; }
.vdp-step.is-sel .vdp-step-total { display: block; }
@container (min-width: 700px) {
	.vdp-step { grid-template-columns: minmax(0, 1.15fr) 110px minmax(0, 1.6fr); column-gap: 24px; align-items: start; }
	.vdp-step-price { padding-top: 1px; }
	.vdp-step-diff { grid-column: 3; margin-top: 0; }
}
.vdp-steps-method { margin-top: -6px; }
.vdp-steps-notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.vdp-steps-notes li { font-size: var(--fs-label); line-height: 1.5; color: var(--vdp-ov-ink-2); }
.vdp-steps-more { border-top: 1px solid var(--border-dark); }
.vdp-steps-more > summary { padding: 12px; font-size: var(--fs-body-sm); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; list-style: none; cursor: pointer; }
.vdp-steps-more > summary::-webkit-details-marker { display: none; }
.vdp-steps-more > summary:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 2px; }
.vdp-steps-more-open { display: none; }
.vdp-steps-more[open] .vdp-steps-more-open { display: inline; }
.vdp-steps-more[open] .vdp-steps-more-closed { display: none; }
.vdp-steps-foot { margin-top: -4px; }
.vdp-var-features b { font-weight: 700; color: var(--night-2); }
body.single-vehicle .vdp-ov-card .vdp-calculator,
body.single-vehicle .vdp-ov-card .vdp-calculator-card { max-width: none; padding: 0; border: 0; border-radius: 0; background: none; }
.vdp-ov-card .vdp-price-city-links-label { margin: 16px 0 8px; }
.vdp-ov-card > .vdp-price-city-links-label:last-child { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.vdp-ov-photo img, .vdp-ov-opt { transition: none; }
	.vdp-ov-photo:hover img { transform: none; }
}

/* New Launch tag, shown for one month after a vehicle's India launch date.
   Lime with dark text reads on photos and on white. */
.vdp-new-launch {
	display: inline-flex;
	align-items: center;
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label-sm);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--night-2);
	background: var(--acc);
	padding: 4px 9px;
	border-radius: 999px;
}
.vdp-new-launch.is-on-image {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 1;
}
.vdp-config-kick-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.vdp-config-kick-row .vdp-config-kicker { margin-bottom: 0; }

/* Page titles and intro lines are dark on every page now that the whole
   site is white. The base rules were still the dark-theme white, which left
   the Calculators and Sales Tracker intro lines, and the page title on every
   city price and EMI page, white on white. */
.vdp-page-title { color: var(--night-2); }
.vdp-section-dek { color: rgba(0, 0, 0, 0.56); }

/* City price and EMI pages: the vehicle photo sits on the same light grey
   as the vehicle page stage, not on a black panel. */
.vdp-price-hero-img { background: var(--surface-3); }

/* Calculators side by side on wide screens instead of one narrow column
   with an empty page beside it. */
.calc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}
.calc-grid .vdp-section { margin: 0; padding-top: 0; border-top: 0; }
.calc-grid .vdp-calculator { max-width: none; }
@media (max-width: 1199px) {
	.calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.calc-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* City on-road price pages: tax note, city comparison and questions. These
   pages are always light (body.single-vehicle). */
body.single-vehicle .vdp-city-note, body.city-hub-page .vdp-city-note { font-size: var(--fs-body-sm); line-height: 1.6; color: rgba(0,0,0,0.7); margin: 16px 0 0; max-width: 72ch; }
body.single-vehicle .vdp-city-note a, body.city-hub-page .vdp-city-note a { color: var(--acc-deep); font-weight: 600; }
body.single-vehicle .vdp-city-compare, body.city-hub-page .vdp-city-compare { margin-top: 12px; max-width: 640px; }
body.single-vehicle .vdp-city-compare a, body.city-hub-page .vdp-city-compare a { color: var(--night-2); text-decoration: underline; text-decoration-color: var(--border-dark-2); text-underline-offset: 3px; }
body.single-vehicle .vdp-city-compare a:hover, body.city-hub-page .vdp-city-compare a:hover { text-decoration-color: var(--acc-deep); }
body.single-vehicle .vdp-city-compare .is-current .vdp-fullspecs-label, body.city-hub-page .vdp-city-compare .is-current .vdp-fullspecs-label { color: var(--night-2); font-weight: 700; }
body.single-vehicle .vdp-city-tag, body.city-hub-page .vdp-city-tag { display: inline-block; margin-left: 8px; font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--acc-deep); border: 1px solid var(--acc-deep); border-radius: 999px; padding: 1px 8px; vertical-align: 1px; }
body.single-vehicle .vdp-city-pct, body.city-hub-page .vdp-city-pct { font-weight: 400; color: rgba(0, 0, 0, 0.56); margin-left: 8px; }
/* Next steps under the city price (2026-10-22). */
body.single-vehicle .vdp-city-next, body.city-hub-page .vdp-city-next { margin-top: 20px; border-top: 1px solid var(--border-dark); max-width: 640px; }
body.single-vehicle .vdp-city-next a, body.city-hub-page .vdp-city-next a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--border-dark); color: var(--night-2); font-size: var(--fs-body-sm); font-weight: 600; text-decoration: none; }
body.single-vehicle .vdp-city-next a:hover span, body.city-hub-page .vdp-city-next a:hover span { text-decoration: underline; text-decoration-color: var(--acc-deep); text-underline-offset: 3px; }
body.single-vehicle .vdp-city-next .ts-arrow, body.city-hub-page .vdp-city-next .ts-arrow { flex: none; color: var(--acc-deep); }
body.single-vehicle .vdp-city-faq-item, body.city-hub-page .vdp-city-faq-item { padding: 16px 0; border-bottom: 1px solid var(--border-dark); max-width: 72ch; }
body.single-vehicle .vdp-city-faq-item h3, body.city-hub-page .vdp-city-faq-item h3 { font-size: var(--fs-body); font-weight: 700; color: var(--night-2); margin: 0 0 6px; }
body.single-vehicle .vdp-city-faq-item p, body.city-hub-page .vdp-city-faq-item p { font-size: var(--fs-body-sm); line-height: 1.6; color: rgba(0,0,0,0.7); margin: 0; }
body.single-vehicle .vdp-city-faq-item a, body.city-hub-page .vdp-city-faq-item a { color: var(--acc-deep); font-weight: 600; }
body.single-vehicle .vdp-rto-rows, body.city-hub-page .vdp-rto-rows { margin-top: 12px; max-width: 640px; }
body.single-vehicle .vdp-rto-rows .vdp-fullspecs-label, body.city-hub-page .vdp-rto-rows .vdp-fullspecs-label { display: flex; flex-direction: column; gap: 2px; color: var(--night-2); }
body.single-vehicle .vdp-rto-addr, body.city-hub-page .vdp-rto-addr { font-size: var(--fs-label); line-height: 1.45; color: rgba(0,0,0,0.56); }
body.single-vehicle .vdp-rto-rows .vdp-fullspecs-value, body.city-hub-page .vdp-rto-rows .vdp-fullspecs-value { white-space: nowrap; }
/* RTO codes as the front of a high-security number plate (2026-10-29,
   thespecd_rto_plate()): white plate, black rim, the blue wheel and "IND"
   down the left, the code in tall condensed plate lettering. */
.rto-plate {
	display: inline-flex; align-items: stretch; gap: 7px;
	padding: 3px 10px 3px 4px; border: 2px solid #111; border-radius: 6px;
	background: linear-gradient(180deg, #fff 0%, #f3f3f0 100%);
	box-shadow: inset 0 0 0 1px #fff, 0 1px 2px rgba(10, 10, 15, 0.18);
	color: #111; line-height: 1; vertical-align: middle;
}
.rto-plate-ind {
	display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px;
	padding: 1px 0; color: #1d4fa3;
	font-family: Arial, "Helvetica Neue", sans-serif; font-size: 7.5px; font-weight: 700; letter-spacing: 0.04em;
}
.rto-plate-wheel { display: block; width: 12px; height: 12px; }
.rto-plate-code {
	align-self: center;
	font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif; font-stretch: condensed;
	font-size: 19px; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap;
}

/* Brand hub price list, last on the page and collapsed (template-parts/brand-price-list.php) */
.ba { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border-dark); }
.ba-title { margin: 0 0 8px; font-family: var(--display, inherit); font-size: var(--fs-h3); line-height: 1.25; color: var(--night-2); text-wrap: balance; }
.ba-dek { margin: 0; max-width: 68ch; font-size: var(--fs-body-sm); line-height: 1.6; color: rgba(10,10,15,0.6); }
.ba-more { margin-top: 16px; }
.ba-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--border-dark-2); border-radius: 999px; background: var(--surface); font-size: var(--fs-body-sm); font-weight: 600; color: var(--night-2); cursor: pointer; list-style: none; user-select: none; transition: border-color 0.2s ease; }
.ba-toggle::-webkit-details-marker { display: none; }
.ba-toggle::marker { content: ""; }
.ba-toggle:hover { border-color: var(--acc-deep); }
.ba-toggle:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 2px; }
.ba-toggle-close { display: none; }
.ba-more[open] .ba-toggle-open { display: none; }
.ba-more[open] .ba-toggle-close { display: inline; }
.ba-chev { flex: none; transition: transform 0.2s ease; }
.ba-more[open] .ba-chev { transform: rotate(180deg); }
.ba-body { display: grid; gap: 28px; margin-top: 24px; }
.ba-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ba-table-wrap { overflow-x: auto; border: 1px solid var(--border-dark); border-radius: 12px; }
.ba-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); line-height: 1.45; font-variant-numeric: tabular-nums; }
.ba-table th, .ba-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--border-dark); }
.ba-table thead th { border-top: 0; background: var(--surface-2); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(10, 10, 15, 0.58); white-space: nowrap; }
.ba-table tbody th { font-weight: 600; }
.ba-table tbody th a { color: var(--night-2); text-decoration: none; }
.ba-table tbody th a:hover { color: var(--acc-deep); text-decoration: underline; text-underline-offset: 2px; }
.ba-table td { color: rgba(10,10,15,0.72); }
.ba-price { white-space: nowrap; color: var(--night-2); }
.ba-soon .ba-price { color: rgba(10,10,15,0.6); }
.ba-meta { display: none; }
.ba-note { margin: -16px 0 0; font-size: var(--fs-label); line-height: 1.5; color: rgba(10, 10, 15, 0.58); }
@media (max-width: 640px) {
	.ba-col-x { display: none; }
	.ba-meta { display: block; margin-top: 2px; font-weight: 400; font-size: var(--fs-label); color: rgba(10, 10, 15, 0.58); }
	.ba-table th, .ba-table td { padding: 12px; }
}

/* Brand hub header: logo, name and a two-line introduction, then the faint
   Read more (inc/read-more.php, styles in ui.css) that opens the rest of it and
   the quick answers. The grid keeps the Read more under the text column. */
.vsearch-head--brand { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 22px; row-gap: 0; align-items: center; }
.vsearch-head--brand.has-logo { grid-template-columns: auto minmax(0, 1fr); }
.vsearch-head--brand.has-logo .rm { grid-column: 2; }
.vsearch-head--brand .vsearch-dek { text-wrap: pretty; }
@media (max-width: 599px) {
	.vsearch-head--brand.has-logo { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; align-items: center; }
	.vsearch-head--brand.has-logo .vsearch-head-text { display: contents; }
	.vsearch-head--brand.has-logo .vsearch-brandmark { grid-column: 1; grid-row: 1; }
	.vsearch-head--brand.has-logo .vsearch-title { grid-column: 2; grid-row: 1; margin: 0; }
	.vsearch-head--brand.has-logo .vsearch-dek,
	.vsearch-head--brand.has-logo .rm { grid-column: 1 / -1; }
	.vsearch-head--brand.has-logo .vsearch-dek { margin-top: 12px; }
}

/* Vehicle page quick answers (single-vehicle.php, inc/quick-answers.php), on white below the tab panels. */
.vdp-qa { padding-top: clamp(32px, 4vw, 48px); padding-bottom: clamp(40px, 5vw, 64px); }

/* List pages (2026-10-01, inc/vehicle-segments.php): related lists, the
   empty state and the ranking numbers in a ranked price list. */
.seg-related { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border-dark); }
.seg-related-title { margin: 0 0 16px; font-family: var(--display, inherit); font-size: var(--fs-h3); line-height: 1.25; color: var(--night-2); }
.seg-related-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.seg-related-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--border-dark-2); border-radius: 999px; background: var(--surface); font-size: var(--fs-body-sm); color: var(--night-2); text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease; }
.seg-related-link:hover { border-color: var(--acc-deep); color: var(--acc-deep); }
.seg-related-link:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 2px; }
.seg-related-all { display: inline-flex; align-items: center; gap: 4px; margin-top: 16px; font-size: var(--fs-body-sm); font-weight: 500; color: var(--night-2); text-decoration: underline; text-underline-offset: 3px; }
.seg-related-all:hover { color: var(--acc-deep); }
.seg-related-all:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 2px; }

/* Every list on one page: /lists/ (2026-10-30) */
.lh-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lh-jump-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid var(--border-dark-2); border-radius: 999px; background: var(--surface); font-size: var(--fs-body-sm); font-weight: 500; color: var(--night-2); text-decoration: none; transition: border-color 0.18s ease; }
.lh-jump-link span { font-weight: 400; color: rgba(10,10,15,0.5); }
.lh-jump-link:hover { border-color: var(--night-2); }
.lh-jump-link:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 2px; }
.lh-type { margin-top: clamp(32px, 4vw, 52px); padding-top: 24px; border-top: 1px solid var(--border-dark); scroll-margin-top: calc(var(--ts-shell-h, 96px) + 12px); }
.lh-type-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 22px; }
.lh-type-title { margin: 0; font-family: var(--display, inherit); font-size: var(--fs-h2); line-height: 1.15; color: var(--night-2); }
.lh-all { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-body-sm); font-weight: 500; color: var(--night-2); text-decoration: underline; text-underline-offset: 3px; }
.lh-all:hover { color: var(--acc-deep); }
.lh-all:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 2px; }
.lh-groups { columns: 3 260px; column-gap: clamp(28px, 3.4vw, 48px); }
.lh-group { break-inside: avoid; margin-bottom: 30px; }
.lh-group-title { margin: 0 0 8px; font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(10,10,15,0.56); }
.lh-list { margin: 0; padding: 0; list-style: none; }
.lh-link { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-dark); color: var(--night-2); text-decoration: none; }
.lh-name { font-size: var(--fs-body-sm); font-weight: 500; line-height: 1.35; }
.lh-n { flex: 0 0 auto; font-size: var(--fs-label); color: rgba(10,10,15,0.56); white-space: nowrap; }
.lh-link:hover .lh-name { text-decoration: underline; text-underline-offset: 3px; }
.lh-link:focus-visible { outline: 2px solid var(--acc-deep); outline-offset: 2px; }
.seg-empty { margin: 8px 0 0; font-size: var(--fs-body); }
.seg-empty a { color: var(--night-2); text-underline-offset: 3px; }
.ba-rank { display: inline-block; min-width: 2ch; font-weight: 600; font-variant-numeric: tabular-nums; color: rgba(10, 10, 15, 0.58); }
.ba-none { color: rgba(10, 10, 15, 0.58); }

/* Limited edition tag and VDP notice (inc/vehicle-limited.php). Dark pill,
   so it never reads like the lime New Launch tag. */
.vdp-limited {
	display: inline-flex; align-items: center; white-space: nowrap;
	font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm);
	font-weight: 700; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--surface); background: var(--night-2); padding: 4px 9px; border-radius: 999px;
}
.vdp-limited.is-on-image { position: absolute; left: 10px; bottom: 10px; z-index: 1; }
.vdp-limited-note {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
	max-width: 1540px; margin: 0 auto 16px; padding: 12px var(--pad, 16px);
	background: var(--surface-3); border-radius: 12px;
	font-size: var(--fs-body-sm); line-height: 1.5; color: var(--night-2);
}
.vdp-limited-text { margin: 0; flex: 1 1 320px; }

/* Mileage and range pages (single-vehicle-mileage.php): a version table
   whose label carries the fuel and gearbox over the version names. */
.vdp-eco-rows .vdp-fullspecs-label { display: flex; flex-direction: column; gap: 2px; }
.vdp-eco-kind { font-weight: 600; color: var(--night-2); }
.vdp-eco-names { font-size: var(--fs-label); line-height: 1.45; color: rgba(0,0,0,0.6); }
.vdp-eco-lead { font-size: var(--fs-body); color: var(--night-2); }
.vdp-ov-more { margin-top: auto; }
.vdp-ov-more a { color: var(--acc-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.vdp-eco-rows .vdp-fullspecs-value { white-space: nowrap; }
.vdp-fullspecs-rows--single .vdp-fullspecs-label a { color: var(--night-2); text-decoration: underline; text-decoration-color: rgba(0,0,0,0.3); text-underline-offset: 3px; }
.vdp-fullspecs-rows--single .vdp-fullspecs-label a:hover { text-decoration-color: currentColor; }

/* Where these figures come from (2026-10-07): the spec sheet's source notes,
   shown as one quiet footnote under the cards instead of a spec card. */
.vdp-ov-sources { grid-column: 1 / -1; margin-top: 4px; padding: 16px 2px 0; border-top: 1px solid var(--border-dark); max-width: 860px; }
.vdp-ov-sources-title { margin: 0 0 6px; font-family: var(--mono, 'JetBrains Mono', monospace); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(10, 10, 15, 0.62); }
.vdp-ov-sources p { margin: 0 0 8px; font-size: var(--fs-body-sm); line-height: 1.55; color: rgba(10, 10, 15, 0.66); }
.vdp-ov-sources p:last-child { margin-bottom: 0; }

/* Calculators page vehicle picker (2026-10-07): a search to pick a car or
   bike, then a card with its version select and price. The calculators
   below fill in from the pick (page.php, inc/calculators.php). */
.calc-pick {
	margin: 0 0 clamp(28px, 4vw, 40px);
	background: var(--surface);
	border: 1px solid var(--border-dark);
	border-radius: 14px;
	padding: clamp(18px, 2.5vw, 28px);
}
.calc-pick-title { font-family: var(--display, "PolySans Bulky", sans-serif); font-size: var(--fs-h3); line-height: 1.2; color: var(--night-2); margin: 0 0 6px; }
.calc-pick-dek { font-size: var(--fs-body-sm); line-height: 1.55; color: rgba(0, 0, 0, 0.6); margin: 0 0 16px; max-width: 620px; }
.calc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.calc-pick-label { display: block; margin: 0 0 6px; font-size: var(--fs-label); font-weight: 600; color: rgba(0, 0, 0, 0.6); }
.calc-pick-row { display: flex; gap: 10px; align-items: stretch; max-width: 640px; }
.calc-pick-field { position: relative; flex: 1 1 auto; min-width: 0; }
.calc-pick-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(0, 0, 0, 0.45); pointer-events: none; }
.calc-pick-field input {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 14px 0 42px;
	border: 1px solid var(--border-dark-2);
	border-radius: 10px;
	background: var(--surface);
	color: var(--night-2);
	font-family: inherit;
	font-size: max(16px, var(--fs-body));
}
.calc-pick-field input::placeholder { color: rgba(0, 0, 0, 0.45); }
.calc-pick-field input:focus { outline: 2px solid var(--acc-deep); outline-offset: 1px; border-color: transparent; }
.calc-pick-go { flex: 0 0 auto; height: 48px; padding: 0 22px; justify-content: center; }
.calc-pick-results { margin-top: 18px; max-width: 640px; }
.calc-pick-results-head { margin: 0 0 8px; font-size: var(--fs-body-sm); color: rgba(0, 0, 0, 0.6); }
.calc-pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.calc-pick-match { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-dark); border-radius: 10px; color: var(--night-2); text-decoration: none; transition: border-color 0.15s; }
.calc-pick-match:hover, .calc-pick-match:focus-visible { border-color: var(--acc-deep); }
.calc-pick-match-name { font-weight: 600; font-size: var(--fs-body-sm); }
.calc-pick-match-price { flex-shrink: 0; font-size: var(--fs-label); color: rgba(0, 0, 0, 0.6); white-space: nowrap; }

/* A vehicle picked. */
.calc-pick-card { display: grid; grid-template-columns: 176px minmax(0, 1fr) auto; gap: clamp(16px, 2vw, 24px); align-items: center; }
.calc-pick-media { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: var(--surface-3); border-radius: 10px; overflow: hidden; }
.calc-pick-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.calc-pick-media .calc-pick-logo { width: auto; height: auto; max-width: 56%; max-height: 50%; }
.calc-pick-kick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(10, 10, 15, 0.62); }
.calc-pick-flag { padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.07); color: var(--night-2); font-size: var(--fs-label-sm); letter-spacing: 0.04em; }
.calc-pick-name { font-family: var(--display, "PolySans Bulky", sans-serif); font-size: var(--fs-h3); line-height: 1.2; margin: 0 0 12px; }
.calc-pick-name a { color: var(--night-2); text-decoration: none; }
.calc-pick-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.calc-pick-version { margin: 0; }
.calc-pick-version .calc-pick-row { max-width: 440px; }
.calc-pick-version select {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--border-dark-2);
	border-radius: 10px;
	background: var(--surface);
	color: var(--night-2);
	font-family: inherit;
	font-size: max(16px, var(--fs-body-sm));
}
.calc-pick-version select:focus { outline: 2px solid var(--acc-deep); outline-offset: 1px; }
.calc-pick-version .sp-btn--ghost { background: transparent; border: 1px solid var(--border-dark-2); color: var(--night-2); }
.calc-pick-one { margin: 0; font-size: var(--fs-body-sm); color: rgba(0, 0, 0, 0.6); }
.calc-pick-price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.calc-pick-price-label { font-size: var(--fs-label); color: rgba(0, 0, 0, 0.56); }
.calc-pick-price-value { font-family: var(--display, "PolySans Bulky", sans-serif); font-size: var(--fs-h3); font-weight: inherit; color: var(--night-2); white-space: nowrap; }
.calc-pick-note { margin: 16px 0 0; font-size: var(--fs-body-sm); color: rgba(0, 0, 0, 0.6); }
.calc-pick-swap { margin-top: 16px; }
.calc-pick-swap summary { display: inline-block; cursor: pointer; list-style: none; font-size: var(--fs-body-sm); font-weight: 600; color: var(--acc-deep); text-decoration: underline; text-underline-offset: 3px; }
.calc-pick-swap summary::-webkit-details-marker { display: none; }
.calc-pick-swap[open] summary { margin-bottom: 12px; }
@media (max-width: 767px) {
	.calc-pick-card { grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: start; }
	.calc-pick-body { display: contents; }
	.calc-pick-media { grid-row: span 2; }
	.calc-pick-kick { align-self: end; }
	.calc-pick-name { align-self: start; margin: 0; }
	.calc-pick-version, .calc-pick-one { grid-column: 1 / -1; margin-top: 14px; }
	.calc-pick-version .calc-pick-row { max-width: none; }
	.calc-pick-price { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-dark); text-align: left; }
	.calc-pick-go { padding: 0 16px; }
}

/* With a vehicle picked the on-road price joins the three calculators, two
   a row like the vehicle page's Price tab. */
.calc-grid .vdp-calculator-card { max-width: none; }
@media (min-width: 768px) {
	.calc-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#calc-pick-title { scroll-margin-top: calc(var(--ts-shell-h, 77px) + 16px); }

/* City lists collapsed behind a native details element (39 cities,
   2026-10-07): the VDP price card's extra city links and the city page's
   across-cities rows past the first ten. */
.vdp-city-more { margin-top: 10px; }
.vdp-city-more > summary {
	cursor: pointer;
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: var(--fs-label);
	font-weight: 700;
	color: rgba(0, 0, 0, 0.55);
	width: fit-content;
}
.vdp-city-more > summary:hover { color: var(--acc-deep, #6b7a00); }
.vdp-city-more[open] > summary { margin-bottom: 10px; }

/* BH-series switch in the on-road price card (2026-10-08) */
.vdp-bh-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	min-height: 32px;
	font-size: var(--fs-body-sm);
	color: rgba(10, 10, 15, 0.82);
	cursor: pointer;
}
.vdp-bh-toggle input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--acc-deep, #6b7a00);
	cursor: pointer;
}
.vdp-bh-hint {
	margin: 2px 0 0;
	max-width: 46ch;
	font-size: var(--fs-label);
	line-height: 1.45;
	color: rgba(0, 0, 0, 0.56);
}
.vdp-bh-toggle:has(input:not(:checked)) + .vdp-bh-hint { display: none; }
.vdp-price-breakdown-note {
	margin: 10px 0 0;
	font-size: var(--fs-label);
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.6);
}

/* List pages open with up to three picks (inc/segment-picks.php, 2026-10-22) */
.seg-picks { margin: 0 0 clamp(20px, 2.5vw, 28px); }
.seg-picks-title { margin: 0 0 12px; font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label); font-weight: 600; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(0, 0, 0, 0.56); }
.seg-picks-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.seg-pick { min-width: 0; }
.seg-pick-link { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: center; height: 100%; padding: 12px; border: 1px solid var(--border-dark-2); border-radius: 14px; background: var(--surface); color: var(--night-2); text-decoration: none; transition: border-color 150ms ease; }
.seg-pick-link:hover,
.seg-pick-link:focus-visible { border-color: var(--acc-deep); }
.seg-pick-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: var(--surface-3); }
.seg-pick-img img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.seg-pick-img img.is-logo { width: 52%; height: 52%; mix-blend-mode: normal; }
.seg-pick-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.seg-pick-kick { font-family: var(--mono, "JetBrains Mono", monospace); font-size: var(--fs-label-sm); font-weight: 600; line-height: 1.3; letter-spacing: 0.05em; text-transform: uppercase; color: var(--acc-deep); }
.seg-pick-name { margin-top: 2px; font-size: var(--fs-body); font-weight: 700; line-height: 1.25; }
.seg-pick-price { font-size: var(--fs-body-sm); font-weight: 600; line-height: 1.35; }
.seg-pick-why { font-size: var(--fs-label); line-height: 1.4; color: rgba(0, 0, 0, 0.6); }
.seg-pick-link:hover .seg-pick-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 560px) {
  .seg-picks-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .seg-pick-link { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 10px; }
}

/* On-road prices by city (city-hub.php, 2026-10-29). The road tax rows read
   as label over sentence, since a slab list is too long to sit beside its
   label on a phone. */
body.city-hub-page .city-hub-tax { margin-top: 12px; max-width: 640px; }
body.city-hub-page .city-hub-tax .vdp-fullspecs-row { flex-direction: column; align-items: flex-start; gap: 2px; }
body.city-hub-page .city-hub-tax .vdp-fullspecs-label { color: var(--night-2); font-weight: 700; }
body.city-hub-page .city-hub-tax .vdp-fullspecs-value { text-align: left; font-weight: 400; color: rgba(0, 0, 0, 0.7); }
body.city-hub-page .vdp-section { scroll-margin-top: calc(var(--ts-shell-h, 72px) + 16px); }
body.city-hub-page .city-hub-cities { margin-top: 24px; }
body.city-hub-page .sp-container > .vdp-disclaimer { margin-top: 40px; }