/* =========================================================================
   PureSelect — theme styles
   1. Tokens
   2. Reset & base
   3. Utilities & a11y
   4. Buttons, pills, chips, badges
   5. Site header
   6. Hero bands
   7. Stock browser layout
   8. Filter panel
   9. Vehicle cards
   10. Vehicle detail page
   11. Editorial pages
   12. Pagination
   13. Site footer
   14. Responsive
   ========================================================================= */

/* -- 1. Tokens ---------------------------------------------------------- */
/*
 * Also on .editor-styles-wrapper: the block editor rewrites selectors to scope
 * theme styles to its canvas, and a :root that becomes a descendant selector
 * would match nothing — taking every colour and font with it. The class never
 * exists on the front end, so this costs nothing there.
 */
:root,
.editor-styles-wrapper {
	--accent: #be1e2d;
	--accent-dark: #971624;
	--accent-soft: #fdedef;
	--accent-line: #f3ccd1;

	--ink: #16181a;
	--ink-muted: #6c7178;
	--ink-faint: #9aa0a6;

	--line: #e4e4e0;
	--line-strong: #cfcfc9;

	--surface: #ffffff;
	--surface-alt: #f5f5f2;
	--surface-sunk: #ececE7;

	--dark: #121212;
	--dark-text: #c9cbce;
	--dark-faint: #8a8e93;

	--whatsapp: #1fac54;

	--font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--shell: 1240px;
	--gutter: 24px;
	--radius: 3px;

	--shadow-card: 0 1px 2px rgba(18, 18, 18, .04);
	--shadow-lift: 0 12px 28px -14px rgba(18, 18, 18, .28);

	--ease: cubic-bezier(.2, .7, .3, 1);
	/* Decelerating, for things entering or settling. */
	--ease-out: cubic-bezier(.16, .84, .44, 1);
	--dur-fast: 120ms;
	--dur: 200ms;
	--dur-slow: 420ms;
}

/* -- 2. Reset & base ---------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.2; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
/* Component display rules outrank the UA [hidden] rule, so restate it. */
[hidden] { display: none !important; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

button { font: inherit; color: inherit; }

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.display {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.08;
}

.accent-stop { color: var(--accent); }

.section-title {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 600;
}

.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--accent);
}
.link-arrow svg { transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* -- 3. Utilities & a11y ------------------------------------------------ */
.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	inset: 12px auto auto 12px;
	z-index: 999;
	width: auto; height: auto;
	clip: auto; clip-path: none;
	padding: 10px 16px;
	background: var(--ink);
	color: #fff;
	border-radius: var(--radius);
}

.rotate-90 { transform: rotate(90deg); }
.rotate-270 { transform: rotate(-90deg); }

.site-main { display: block; min-height: 40vh; }

/* -- 4. Buttons, pills, chips, badges ----------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform var(--dur-fast) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

.btn--outline { background: var(--surface); border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }

.btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

.btn--icon {
	flex: 0 0 auto;
	width: 44px;
	padding: 11px 0;
	border-color: var(--line-strong);
	color: var(--ink);
}
.btn--icon:hover { border-color: var(--ink); color: var(--ink); }

.btn--whatsapp { border-color: var(--whatsapp); color: var(--whatsapp); }
.btn--whatsapp:hover { background: var(--whatsapp); border-color: var(--whatsapp); color: #fff; }

.btn--outline-light { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--ink); }

.btn--whatsapp-solid { background: #25c05d; border-color: #25c05d; color: #fff; }
.btn--whatsapp-solid:hover { background: #1fa851; border-color: #1fa851; color: #fff; }

.btn--block { width: 100%; }
.btn--sm { padding: 8px 13px; font-size: 13px; }

.pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 13px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	user-select: none;
	transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill:hover { border-color: var(--ink); }
.pill:has(input:checked) {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
	font-weight: 600;
}
.pill:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pill.is-empty { opacity: .4; cursor: not-allowed; }

.chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 10px;
	border: 1px solid var(--accent-line);
	border-radius: var(--radius);
	background: var(--accent-soft);
	color: var(--accent-dark);
	font-size: 12.5px;
	font-weight: 600;
}
.chip:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip svg { opacity: .7; }

.badges {
	position: absolute;
	inset: 12px 12px auto 12px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	pointer-events: none;
}
.badge {
	padding: 5px 9px;
	border-radius: 2px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
}
.badge--dark { background: var(--dark); color: #fff; }
.badge--accent { background: var(--accent); color: #fff; }
.badge--success { background: #e7f5ec; color: #12703c; }
.badge--muted { background: rgba(255, 255, 255, .9); color: var(--ink-muted); }
.badge--start { margin-right: auto; }
.badge--end { margin-left: auto; }

.notice {
	padding: 11px 14px;
	border-radius: var(--radius);
	font-size: 13.5px;
	font-weight: 600;
}
.notice--sold { background: var(--accent-soft); color: var(--accent-dark); }

/* -- 5. Site header ----------------------------------------------------- */
.site-header {
	position: relative;
	z-index: 20;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 76px;
	padding-block: 14px;
}

.brand { margin: 0; }
.brand__link { display: inline-block; }
.brand__wordmark {
	font-family: var(--font-display);
	font-size: 27px;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.05;
}
.brand__strapline {
	margin: 3px 0 0;
	font-size: 11.5px;
	color: var(--ink-muted);
	letter-spacing: .005em;
}
.brand__logo { max-height: 44px; width: auto; }

.site-nav {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.menu--primary {
	display: flex;
	align-items: center;
	gap: 26px;
}
.menu--primary > li > a {
	position: relative;
	display: inline-block;
	padding-block: 6px;
	font-size: 14px;
	font-weight: 500;
}
.menu--primary > li > a::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s var(--ease);
}
.menu--primary > li > a:hover::after,
.menu--primary > .current-menu-item > a::after,
.menu--primary > .current_page_item > a::after,
.menu--primary > .current-menu-ancestor > a::after { transform: scaleX(1); }
.menu--primary > .current-menu-item > a,
.menu--primary > .current_page_item > a { font-weight: 600; }

.site-nav__actions {
	display: flex;
	align-items: center;
	gap: 20px;
}
.site-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 500;
}
.site-header__phone svg { color: var(--ink-muted); }

.nav-toggle {
	display: none;
	margin-left: auto;
	padding: 9px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: none;
	cursor: pointer;
}
.nav-toggle__bars { display: block; width: 20px; }
.nav-toggle__bars span {
	display: block;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bars span + span { margin-top: 4px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -- 6. Hero bands ------------------------------------------------------ */
.stock-hero,
.page-hero {
	background: var(--surface-alt);
	border-bottom: 1px solid var(--line);
	padding-block: 26px 40px;
}

.breadcrumbs { margin-bottom: 22px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.breadcrumbs li { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.breadcrumbs li + li::before { content: "/"; color: var(--ink-faint); font-weight: 400; }
.breadcrumbs a { color: var(--ink-muted); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs [aria-current] { color: var(--accent); }

.stock-hero__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}
.stock-hero__intro { max-width: 620px; }
.stock-hero__intro .display { font-size: clamp(34px, 4.4vw, 46px); }
.stock-hero__intro-text {
	margin: 14px 0 0;
	max-width: 52ch;
	font-size: 14.5px;
	color: var(--ink-muted);
}

.stock-hero__toolbar {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-shrink: 0;
	padding-bottom: 4px;
}

.stock-count { margin: 0; font-size: 13.5px; color: var(--ink-muted); }
.stock-count strong { color: var(--ink); font-weight: 700; }

.stock-sort { display: flex; align-items: center; gap: 10px; }
.stock-sort__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.select { position: relative; display: inline-flex; align-items: center; }
.select select {
	appearance: none;
	padding: 9px 34px 9px 12px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	font: inherit;
	font-size: 13.5px;
	cursor: pointer;
}
.select__chevron {
	position: absolute;
	right: 11px;
	pointer-events: none;
	color: var(--ink-muted);
}

.page-hero__intro { margin: 14px 0 0; max-width: 60ch; color: var(--ink-muted); }
.page-hero .display { font-size: clamp(30px, 4vw, 42px); }

/* -- 7. Stock browser layout -------------------------------------------- */
.stock-layout {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: 34px;
	align-items: start;
	padding-block: 34px 64px;
}

.stock-layout__filter-toggle { display: none; }
.stock-layout__results { position: relative; }
.stock-layout__results[aria-busy="true"] { opacity: .6; transition: opacity var(--dur-fast) var(--ease); }

/* -- 8. Filter panel ---------------------------------------------------- */
.filters {
	position: sticky;
	top: 20px;
	border: 1px solid var(--line);
	border-top: 3px solid var(--accent);
	border-radius: 0 0 var(--radius) var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow-card);
}

.filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 18px;
	border-bottom: 1px solid var(--line);
}
.filters__title { font-size: 15px; font-weight: 600; }
.filters__clear { font-size: 13px; font-weight: 600; color: var(--accent); }
.filters__clear:hover { text-decoration: underline; }

/*
 * No padding-top on the group: a <legend> is laid out in the fieldset's border
 * area, so the fieldset's top padding lands *below* it and the label ends up
 * flush against the divider. The space above it has to be the legend's own.
 */
.filters__group { padding: 0 18px 18px; border-bottom: 1px solid var(--line); }
.filters__group:last-of-type { border-bottom: 0; }

.filters__legend {
	/* The gap above the label, which the fieldset cannot provide. */
	padding-top: 17px;
	margin-bottom: 12px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.filters__options--checkbox,
.filters__options--radio { display: grid; gap: 9px; }

.filters__option label {
	display: grid;
	grid-template-columns: 15px 1fr auto;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	cursor: pointer;
}
.filters__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.filters__option.is-empty label { opacity: .42; cursor: not-allowed; }

.filters__box {
	width: 15px; height: 15px;
	border: 1px solid var(--line-strong);
	border-radius: 2px;
	background: var(--surface);
	transition: background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.filters__option input:checked + .filters__box {
	background: var(--accent);
	border-color: var(--accent);
	box-shadow: inset 0 0 0 2.5px #fff;
}
.filters__option input:focus-visible + .filters__box { outline: 2px solid var(--accent); outline-offset: 2px; }

.filters__dot {
	width: 15px; height: 15px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: var(--surface);
	transition: background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.filters__option input:checked + .filters__dot {
	background: var(--accent);
	border-color: var(--accent);
	box-shadow: inset 0 0 0 2.5px #fff;
}
.filters__option input:focus-visible + .filters__dot { outline: 2px solid var(--accent); outline-offset: 2px; }

.filters__count { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.filters__more {
	margin-top: 13px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--accent);
	cursor: pointer;
}
.filters__more:hover { text-decoration: underline; }

.filters__options--pills { display: flex; flex-wrap: wrap; gap: 8px; }

.filters__actions { padding: 16px 18px; border-top: 1px solid var(--line); }

/* Dual range slider */
.range { position: relative; height: 26px; margin-top: 4px; }
.range__track {
	position: absolute;
	inset: 50% 0 auto 0;
	height: 3px;
	transform: translateY(-50%);
	background: var(--surface-sunk);
	border-radius: 99px;
}
.range__fill {
	position: absolute;
	inset: 0 auto 0 0;
	background: var(--accent);
	border-radius: 99px;
}
.range__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 26px;
	margin: 0;
	padding: 0;
	appearance: none;
	background: none;
	pointer-events: none;
}
.range__input::-webkit-slider-thumb {
	appearance: none;
	width: 15px; height: 15px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	cursor: grab;
	pointer-events: auto;
}
.range__input::-moz-range-thumb {
	width: 15px; height: 15px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	cursor: grab;
	pointer-events: auto;
}
.range__input::-moz-range-track { background: none; }
.range__input:focus-visible { outline: none; }
.range__input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }

.range__values {
	display: flex;
	justify-content: space-between;
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
}

/* -- 9. Vehicle cards --------------------------------------------------- */
.applied {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}
.applied__label {
	font-size: 12.5px;
	color: var(--ink-muted);
}
.applied__list { display: flex; flex-wrap: wrap; gap: 8px; }

.vehicle-grid,
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
	gap: 24px;
}

.vehicle-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	overflow: hidden;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.vehicle-card:hover {
	border-color: var(--line-strong);
	box-shadow: var(--shadow-lift);
	transform: translateY(-4px);
}

.vehicle-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--surface-sunk);
	overflow: hidden;
}
.vehicle-card__media-link { display: block; height: 100%; }
.vehicle-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}
.vehicle-card:hover .vehicle-card__image { transform: scale(1.035); }
/* A sold car is not being sold to you, so it stays still. */
.vehicle-card--sold:hover .vehicle-card__image { transform: none; }
.vehicle-card__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--ink-faint);
	background: linear-gradient(160deg, #f0f0ec, #e2e2dc);
}

.vehicle-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 18px 18px;
}

.vehicle-card__title {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -.01em;
}
.vehicle-card__variant {
	margin: 5px 0 0;
	font-size: 13px;
	color: var(--ink-muted);
}

.vehicle-card__price {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin: 14px 0 16px;
}
.vehicle-card__price-cash {
	font-family: var(--font-display);
	font-size: 27px;
	font-weight: 600;
	letter-spacing: -.015em;
}
.vehicle-card__price-monthly { font-size: 13px; color: var(--ink-muted); }

.spec-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 0 0 16px;
	padding: 13px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.spec-strip__item { min-width: 0; }
.spec-strip dt {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ink-faint);
}
.spec-strip dd {
	margin: 3px 0 0;
	font-size: 13.5px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.spec-strip--lg { margin-bottom: 22px; }
.spec-strip--lg dd { font-size: 15px; }

.vehicle-card__actions {
	display: flex;
	gap: 8px;
	margin-top: auto;
}
.vehicle-card__cta { flex: 1; }
/* "Notify me when similar arrives" is long — keep it on one line in a card. */
.vehicle-card__actions .btn--outline { font-size: 13px; padding-inline: 12px; }

.vehicle-card--sold .vehicle-card__image { filter: grayscale(1); opacity: .55; }
.vehicle-card--sold .vehicle-card__title a,
.vehicle-card--sold .vehicle-card__price-cash,
.vehicle-card--sold .vehicle-card__variant { color: var(--ink-faint); }
.vehicle-card--sold:hover { transform: none; box-shadow: var(--shadow-card); }

.stock-empty {
	padding: 64px 24px;
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius);
	text-align: center;
}
.stock-empty__icon { margin: 0 auto 16px; color: var(--ink-faint); }
.stock-empty__title { font-family: var(--font-display); font-size: 24px; }
.stock-empty__text { margin: 10px auto 0; max-width: 46ch; color: var(--ink-muted); }
.stock-empty__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* -- 10. Vehicle detail page -------------------------------------------- */
.vehicle-single { padding-block: 26px 64px; }

.vehicle-single__top {
	display: grid;
	grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
	gap: 34px;
	align-items: start;
}

.vehicle-single__main { display: grid; gap: 28px; min-width: 0; }

.vehicle-single__aside {
	position: sticky;
	top: 20px;
	display: grid;
	gap: 16px;
}

.vehicle-single__notes { padding-top: 40px; }
.vehicle-single__related { padding-top: 56px; }

/* Gallery */
.gallery__tabs {
	display: flex;
	gap: 26px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--line);
}
.gallery__tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0 0 10px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-muted);
	cursor: pointer;
	transition: color .16s var(--ease), border-color .16s var(--ease);
}
.gallery__tab:hover { color: var(--ink); }
.gallery__tab.is-active {
	border-bottom-color: var(--accent);
	color: var(--ink);
	font-weight: 600;
}
.gallery__tab-count { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.gallery__stage {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--surface-sunk);
	border-radius: var(--radius);
	overflow: hidden;
}
.gallery__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity var(--dur) var(--ease);
}
/* The incoming frame lifts from half opacity, which reads as a soft change
   without the blank gap a fade-out-then-in would leave. */
.gallery__image.is-entering { opacity: .5; }
.gallery--empty {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	background: linear-gradient(160deg, #f0f0ec, #e2e2dc);
	border-radius: var(--radius);
	color: var(--ink-faint);
}

.gallery__counter {
	position: absolute;
	right: 12px;
	bottom: 12px;
	margin: 0;
	padding: 5px 10px;
	border: 1px solid var(--line);
	border-radius: 2px;
	background: rgba(255, 255, 255, .94);
	font-size: 11px;
	font-weight: 600;
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
}

.gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 8px;
	margin-top: 8px;
}
.gallery__thumb {
	position: relative;
	display: block;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 2px;
	background: var(--surface-sunk);
	cursor: pointer;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* The caption only shows through when there is no image behind it. */
.gallery__thumb-label {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: grid;
	place-items: center;
	padding: 4px;
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
	color: var(--ink-faint);
}

/* Sections and panels */
.vehicle-section { min-width: 0; }
.vehicle-section > .section-title { display: block; margin-bottom: 20px; }

.section-head--stacked {
	display: block;
	margin-bottom: 18px;
}
.section-head__note {
	margin: 8px 0 0;
	font-size: 13.5px;
	color: var(--ink-muted);
}

.panel {
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}
.panel__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}
.panel__lede { min-width: 0; }
.panel__lede .section-title { margin-bottom: 14px; }
.panel__text { font-size: 13.5px; color: var(--ink-muted); max-width: 42ch; }
.panel__aside { min-width: 0; }
.panel__label {
	margin-bottom: 12px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.link-underline {
	display: inline-block;
	margin-top: 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Specification chips */
.spec-group + .spec-group { margin-top: 20px; }
.spec-group__label {
	margin-bottom: 10px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-static {
	padding: 7px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ink);
}

/* Provenance panel */
.provenance {
	padding: 32px;
	border-radius: var(--radius);
	background: var(--dark);
	color: #fff;
}
.provenance__title {
	margin-bottom: 26px;
	font-family: var(--font-display);
	font-size: 23px;
	font-weight: 600;
}
.provenance__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 26px;
}
.provenance__col { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .28); }
.provenance__col-title { margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.provenance__col-text { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--dark-text); }

.provenance__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
	margin: 28px 0 0;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.provenance__meta-item {
	display: flex;
	align-items: baseline;
	gap: 7px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--dark-faint);
}
.provenance__meta-item dt::after { content: " ·"; }
.provenance__meta-item dd { margin: 0; color: #fff; }

/* Facts list, shared by warranty and elsewhere */
.facts { margin: 0; border-top: 1px solid var(--line); }
.facts__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
}
.facts dt { color: var(--ink-muted); }
.facts dd { margin: 0; font-weight: 500; text-align: right; }

/* Buy box / lease box */
.buybox {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}
.buybox__head { padding: 20px 20px 18px; }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tag {
	padding: 4px 8px;
	border-radius: 2px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}
.tag--quiet { background: var(--surface-alt); color: var(--ink-muted); }
.tag--dark { background: var(--dark); color: #fff; }
.tag--accent { background: var(--accent); color: #fff; }
.tag--success { background: #e7f5ec; color: #12703c; }
.tag--warm { background: #fdf0e6; color: #8a4b12; }
.tag--muted { background: var(--surface-sunk); color: var(--ink-muted); }

.buybox__title { font-size: 30px; }
.buybox__variant { margin: 7px 0 0; font-size: 13px; color: var(--ink-muted); }

.buybox__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
}
.buybox__price-figure {
	font-family: var(--font-display);
	font-size: 34px;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1;
}
.buybox__price-unit { font-size: 13px; color: var(--ink-muted); }
.buybox__price-vat { color: var(--ink-faint); }
.buybox__finance { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-muted); }

.buybox__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0;
	border-top: 1px solid var(--line);
}
.buybox__fact { padding: 11px 18px; border-bottom: 1px solid var(--line); min-width: 0; }
.buybox__fact:nth-child(odd) { border-right: 1px solid var(--line); }
.buybox__fact dt {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ink-faint);
}
.buybox__fact dd {
	margin: 3px 0 0;
	font-size: 14.5px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.buybox__rows { margin: 0; }
.buybox__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 20px;
	border-top: 1px solid var(--line);
}
.buybox__row dt {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ink-faint);
}
.buybox__row dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 600;
	text-align: right;
}
.buybox__row dd .is-included { font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: #12703c; }

.buybox__actions { display: grid; gap: 9px; padding: 18px 20px; border-top: 1px solid var(--line); }
.buybox__note {
	margin: 0;
	padding: 0 20px 18px;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--ink-faint);
}

/* Cross-sell */
.cross-sell {
	padding: 18px 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface-alt);
}
.cross-sell__eyebrow {
	margin: 0 0 9px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.cross-sell__body { margin: 0 0 11px; font-size: 13px; line-height: 1.55; color: var(--ink); }

/* PureFlex term table */
.terms { overflow-x: auto; }
.terms__table { width: 100%; border-collapse: collapse; min-width: 480px; }
.terms__table th,
.terms__table td { padding: 13px 16px; text-align: left; }
.terms__table thead th {
	border-bottom: 1px solid var(--line);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ink-faint);
}
.terms__table tbody th { font-weight: 500; }
.terms__row {
	border-bottom: 1px solid var(--line);
	transition: background-color .16s var(--ease), color .16s var(--ease);
}
.terms__row td { font-size: 14px; font-variant-numeric: tabular-nums; }
.terms__figure {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 600;
}
.terms__row.is-selected { background: var(--dark); color: #fff; }
.terms__row.is-selected th { font-weight: 600; }

.terms__choice { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.terms__choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.terms__marker {
	width: 9px; height: 9px;
	border: 1px solid var(--line-strong);
	background: transparent;
	flex: 0 0 auto;
}
.terms__choice input:checked + .terms__marker { background: var(--accent); border-color: var(--accent); }
.terms__choice input:focus-visible + .terms__marker { outline: 2px solid var(--accent); outline-offset: 2px; }
.terms__row.is-selected .terms__marker { border-color: var(--accent); }

/* Checklists and markers */
.checklist { display: grid; gap: 9px; }
.checklist__item { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; }
.checklist__item.is-excluded { color: var(--ink-muted); }

.marker {
	width: 9px; height: 9px;
	margin-top: 6px;
	flex: 0 0 auto;
	border: 1px solid var(--line-strong);
	background: transparent;
}
.marker--yes { background: #1a9e5c; border-color: #1a9e5c; }
.marker--no { background: transparent; }
.buybox__row .marker { display: inline-block; margin: 0 5px 0 0; vertical-align: baseline; }

/* Numbered steps */
.steps { display: grid; gap: 13px; counter-reset: none; }
.steps__item { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; }
.steps__number {
	flex: 0 0 auto;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--accent);
	padding-top: 3px;
	font-variant-numeric: tabular-nums;
}
.steps__text { color: var(--ink); }

/* Form slots (Contact Form 7) */
.form-slot--empty {
	padding: 12px 14px;
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius);
	font-size: 13px;
	color: var(--ink-muted);
}

.form-slot .wpcf7-form > p { margin: 0 0 10px; }
.form-slot .wpcf7-form-control-wrap { display: block; }
.form-slot input[type="text"],
.form-slot input[type="email"],
.form-slot input[type="tel"],
.form-slot input[type="url"],
.form-slot input[type="date"],
.form-slot input[type="number"],
.form-slot select,
.form-slot textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	font: inherit;
	font-size: 14px;
	color: var(--ink);
}
.form-slot select { appearance: none; background-image: none; cursor: pointer; }
.form-slot textarea { min-height: 96px; resize: vertical; }
.form-slot ::placeholder { color: var(--ink-faint); }
.form-slot input:focus,
.form-slot select:focus,
.form-slot textarea:focus { border-color: var(--ink); outline: 2px solid var(--accent); outline-offset: 1px; }

.form-slot .wpcf7-submit {
	padding: 11px 18px;
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	background: var(--accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.form-slot .wpcf7-submit:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.form-slot--flex .wpcf7-submit { background: var(--dark); border-color: var(--dark); }
.form-slot--flex .wpcf7-submit:hover { background: #000; border-color: #000; }

.form-slot .wpcf7-not-valid-tip { font-size: 12px; color: var(--accent-dark); }
.form-slot .wpcf7-response-output {
	margin: 12px 0 0 !important;
	padding: 11px 13px !important;
	border-width: 1px !important;
	border-radius: var(--radius);
	font-size: 13px;
}

/* A two-up row of fields, for CF7 markup that wraps them in .ps-row.
   wpautop collapses the row into a single <p> with <br> separators, so the
   grid lives on that paragraph and the breaks are suppressed. */
.form-slot .ps-row > p {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0 0 10px;
}
.form-slot .ps-row br { display: none; }
.form-slot .ps-note { display: block; margin-top: 8px; font-size: 11.5px; color: var(--ink-faint); }
.form-slot .wpcf7-spinner { margin-left: 10px; }

/* -- 11. Editorial pages ------------------------------------------------ */
.prose { max-width: 68ch; font-size: 16px; line-height: 1.7; }
.prose--page { padding-block: 44px 64px; }
.prose h2 { margin: 1.6em 0 .5em; font-family: var(--font-display); font-size: 26px; }
.prose h3 { margin: 1.4em 0 .4em; font-size: 19px; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose li { list-style: disc; margin-bottom: .35em; }
.prose ol li { list-style: decimal; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose img { margin-block: 1.6em; border-radius: var(--radius); }
.prose blockquote {
	margin: 1.8em 0;
	padding-left: 20px;
	border-left: 3px solid var(--accent);
	font-family: var(--font-display);
	font-size: 20px;
}

.entry-list { padding-block: 40px 64px; }

.entry-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}
.entry-card__media { aspect-ratio: 3 / 2; background: var(--surface-sunk); }
.entry-card__media img { width: 100%; height: 100%; object-fit: cover; }
.entry-card__body { padding: 18px; }
.entry-card__meta { margin: 0 0 8px; font-size: 12px; color: var(--ink-faint); }
.entry-card__title { font-family: var(--font-display); font-size: 20px; }
.entry-card__excerpt { margin: 8px 0 0; font-size: 14px; color: var(--ink-muted); }

.search-form { display: flex; gap: 10px; margin-top: 20px; max-width: 480px; }
.search-form__input {
	flex: 1;
	padding: 11px 14px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	font: inherit;
	font-size: 14px;
}

/* -- 12. Pagination ----------------------------------------------------- */
.pagination { margin-top: 36px; }
.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 14px;
	font-weight: 500;
}
.pagination .page-numbers:hover { border-color: var(--ink); color: var(--ink); }
.pagination .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
	font-weight: 600;
}
.pagination .dots { border-color: transparent; }

/* -- 13. Site footer ---------------------------------------------------- */
.site-footer {
	background: var(--dark);
	color: #fff;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1.25fr;
	gap: 40px;
	padding-block: 60px 44px;
}

.site-footer .brand__strapline { color: var(--dark-faint); }
.site-footer a:hover { color: #fff; }

.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a {
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	transition: background-color .18s var(--ease);
}
.socials a:hover { background: var(--accent); }

.site-footer__heading {
	margin-bottom: 16px;
	font-size: 15px;
	font-weight: 600;
}

.menu--footer,
.site-footer__list { display: grid; gap: 10px; }
.menu--footer a,
.site-footer__list a { font-size: 14px; color: var(--dark-text); }
.menu--footer .current-menu-item > a { color: #fff; font-weight: 600; }

.site-footer__meta { font-size: 14px; color: var(--dark-text); }
.site-footer__meta p { margin-bottom: 14px; }
.site-footer__helpline { margin-top: 20px; }
.site-footer__helpline strong { display: block; color: #fff; font-weight: 600; margin-bottom: 4px; }

.site-footer__accreditations {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	padding-bottom: 40px;
}
.accreditation { max-height: 46px; width: auto; }

.site-footer__bar { border-top: 1px solid rgba(255, 255, 255, .12); }
.site-footer__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	padding-block: 20px;
}
.site-footer__copyright { margin: 0; font-size: 12.5px; color: var(--dark-faint); }
.menu--legal { display: flex; flex-wrap: wrap; gap: 18px; }
.menu--legal a { font-size: 12.5px; color: var(--dark-faint); }

/* -- 15. PureFlex listing ----------------------------------------------- */
.flex-hero {
	background: var(--dark);
	color: #fff;
	border-bottom: 3px solid var(--accent);
	padding-block: 44px 40px;
}

.flex-hero__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 48px;
}

.flex-hero__lede { max-width: 720px; }

.flex-hero__eyebrow {
	margin: 0 0 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent);
}

.flex-hero__title { font-size: clamp(30px, 3.6vw, 42px); }

.flex-hero__intro {
	margin: 16px 0 0;
	max-width: 62ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--dark-text);
}

.flex-hero__stats {
	display: flex;
	gap: 40px;
	margin: 0;
	flex-shrink: 0;
	padding-bottom: 4px;
}
.flex-hero__stat { text-align: left; }
.flex-hero__stat dt {
	margin-bottom: 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent);
}
.flex-hero__stat dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1;
	white-space: nowrap;
	/* Fixed-width digits, or a counting figure shifts the ones beside it. */
	font-variant-numeric: tabular-nums;
}
.flex-hero__stat dt { transition: opacity var(--dur) var(--ease); }
.flex-hero__stats[aria-busy="true"] dt { opacity: .5; }

/* Filter bar */
.flex-filters {
	background: var(--surface-alt);
	border-bottom: 1px solid var(--line);
}
.flex-filters__inner {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	padding-block: 18px;
}
.flex-filters__field { flex: 1 1 0; min-width: 0; }
.flex-filters__field--term { flex: 0 0 auto; }
.flex-filters__field--submit { flex: 0 0 auto; }

.flex-filters__label {
	display: block;
	margin-bottom: 7px;
	padding: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.select--block { display: flex; width: 100%; }
.select--block select { width: 100%; }

.flex-filters .btn { height: 40px; padding-inline: 26px; }

/* Segmented term control */
.segmented {
	position: relative;
	display: flex;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	overflow: hidden;
}

/* One marker that slides between segments, rather than each segment
   flicking its own background on. --segments comes from the template so the
   maths holds however many terms are configured. */
.segmented::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	/* The fraction is the no-JS fallback. flex.js overrides both custom
	   properties with the checked segment's measured geometry, because a
	   fractional 100%/n never lands on whole pixels and a filled marker
	   one pixel out is visible. */
	width: var(--marker-w, calc(100% / var(--segments, 4)));
	background: var(--accent);
	transform: translateX(var(--marker-x, calc(var(--active, 0) * 100%)));
	transition: transform var(--dur) var(--ease), width var(--dur) var(--ease);
}
.segmented:has(.segmented__option:nth-child(1) input:checked) { --active: 0; }
.segmented:has(.segmented__option:nth-child(2) input:checked) { --active: 1; }
.segmented:has(.segmented__option:nth-child(3) input:checked) { --active: 2; }
.segmented:has(.segmented__option:nth-child(4) input:checked) { --active: 3; }
.segmented:has(.segmented__option:nth-child(5) input:checked) { --active: 4; }
.segmented:has(.segmented__option:nth-child(6) input:checked) { --active: 5; }
.segmented:has(.segmented__option:nth-child(7) input:checked) { --active: 6; }
.segmented:has(.segmented__option:nth-child(8) input:checked) { --active: 7; }
/* No selection at all: keep the marker out of sight rather than parked on
   the first segment, which would look selected. */
.segmented:not(:has(input:checked))::before { opacity: 0; }

.segmented__option {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	/* Equal widths, so the sliding marker lines up with each segment. */
	flex: 1 1 0;
	min-width: 52px;
	height: 40px;
	padding-inline: 8px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: color var(--dur-fast) var(--ease);
}
/* Dividers as an inset shadow, not a border: a border would take a pixel of
   layout width off each segment, and the sliding marker — sized at exactly
   100%/n — would drift out of alignment across the group. */
.segmented__option + .segmented__option { box-shadow: inset 1px 0 0 var(--line); }
.segmented__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented__option:hover:not(:has(input:checked)) { color: var(--accent); }
.segmented__option:has(input:checked) {
	color: #fff;
	font-weight: 600;
}
/* No divider against the marker on either side. */
.segmented__option:has(input:checked),
.segmented__option:has(input:checked) + .segmented__option { box-shadow: none; }
.segmented__option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Rate note bar */
.flex-note {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}
.flex-note__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	padding-block: 13px;
}
.flex-note__text { margin: 0; font-size: 13px; color: var(--ink-muted); }
.flex-note__text strong { color: var(--ink); }

/* The table */
.flex-listing__results { position: relative; }
.flex-listing__results[aria-busy="true"] { opacity: .6; transition: opacity var(--dur-fast) var(--ease); }

/* No inner scroll: a table that scrolls inside itself hides columns behind a
   gesture people miss, and it would also trap the sticky header in its own
   scroll container. The table fits the page and restructures when it cannot. */
.rate-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 4px;
}
.rate-table thead th {
	position: sticky;
	top: 0;
	z-index: 3;
	padding: 16px 12px 10px;
	/* A shadow, not a border: collapsed borders do not travel with a sticky
	   cell, so the rule under the header would be left behind on scroll. */
	box-shadow: inset 0 -1px 0 var(--ink);
	background: var(--surface);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-align: left;
	color: var(--ink-muted);
	white-space: nowrap;
}
.rate-table .is-figure { text-align: left; }

.rate-row { border-bottom: 1px solid var(--line); }
.rate-row:nth-child(even) { background: #fafaf8; }
.rate-row:hover { background: var(--surface-alt); }
.rate-row td,
.rate-row th {
	padding: 14px 12px;
	font-size: 13.5px;
	text-align: left;
	vertical-align: middle;
}

.rate-row__media { width: 96px; padding-left: 0 !important; }
.rate-row__media a {
	display: block;
	aspect-ratio: 3 / 2;
	border: 1px solid var(--line);
	border-radius: 2px;
	background: var(--surface-sunk);
	overflow: hidden;
}
.rate-row__image { width: 100%; height: 100%; object-fit: cover; }
.rate-row__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	padding: 4px;
	font-size: 8.5px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.25;
	text-align: center;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.rate-row__vehicle { font-weight: 400; }
.rate-row__title {
	display: block;
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em;
}
.rate-row__variant {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: var(--ink-muted);
}

.rate-row .rate-row__monthly {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -.015em;
	white-space: nowrap;
}
.rate-row .is-figure { font-variant-numeric: tabular-nums; white-space: nowrap; }

.rate-row__flag {
	display: inline-block;
	margin-left: 5px;
	padding: 1px 5px;
	border-radius: 2px;
	background: var(--surface-sunk);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-muted);
	cursor: help;
}

.rate-row .tag {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0;
	padding: 4px 9px;
	text-transform: none;
}

.rate-row .is-included { color: #12703c; font-weight: 500; }
.rate-row .is-excluded { color: var(--ink-faint); }

.rate-row__actions { white-space: nowrap; text-align: right; padding-right: 0 !important; }
.rate-row__actions .btn { min-width: 66px; }
.rate-row__actions .btn + .btn { margin-left: 6px; }

/* Load-more footer */
.flex-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-block: 26px 64px;
}
.flex-footer__count { margin: 0; font-size: 13px; color: var(--ink-muted); }

@media (max-width: 1080px) {
	.flex-hero__inner { flex-direction: column; align-items: flex-start; gap: 28px; }
	.flex-hero__stats { gap: 32px; }
	.flex-filters__inner { flex-wrap: wrap; }
	.flex-filters__field { flex: 1 1 200px; }
	.flex-filters__field--submit { flex: 0 0 100%; }
	.flex-filters__field--submit .btn { width: 100%; }

	/* Tighten before dropping anything. */
	.rate-table thead th,
	.rate-row td,
	.rate-row th { padding-inline: 8px; }
	.rate-row .rate-row__monthly { font-size: 21px; }
	.rate-row__media { width: 76px; }
}

/* One row per card, so every figure keeps its label instead of being pushed
   off the side of a scrolling table. */
@media (max-width: 900px) {
	.rate-table,
	.rate-table tbody,
	.rate-row,
	.rate-row td,
	.rate-row th { display: block; width: auto; }

	.rate-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

	.rate-row {
		position: relative;
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr);
		gap: 4px 14px;
		align-items: start;
		margin-bottom: 14px;
		padding: 14px;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		background: var(--surface);
	}
	.rate-row:nth-child(even) { background: var(--surface); }
	.rate-row:hover { background: var(--surface); }

	.rate-row__media {
		grid-row: 1 / span 2;
		width: auto;
		padding: 0 !important;
	}
	.rate-row__vehicle { padding: 0; }
	.rate-row .rate-row__monthly {
		grid-column: 2;
		padding: 6px 0 0;
		font-size: 26px;
	}

	/* The remaining cells become a labelled list across the full width. */
	.rate-row > td[data-label]:not(.rate-row__monthly) {
		grid-column: 1 / -1;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		padding: 7px 0;
		border-top: 1px solid var(--line);
		font-size: 13px;
	}
	.rate-row > td[data-label]:not(.rate-row__monthly)::before {
		content: attr(data-label);
		font-size: 9.5px;
		font-weight: 700;
		letter-spacing: .09em;
		text-transform: uppercase;
		color: var(--ink-faint);
	}

	.rate-row__actions {
		grid-column: 1 / -1;
		display: flex;
		gap: 8px;
		padding: 12px 0 0 !important;
		text-align: left;
	}
	.rate-row__actions .btn { flex: 1; }
	.rate-row__actions .btn + .btn { margin-left: 0; }
}

@media (max-width: 620px) {
	.flex-hero { padding-block: 32px 28px; }
	.flex-hero__stats { flex-wrap: wrap; gap: 20px 28px; }
	.flex-hero__stat dd { font-size: 24px; }
	.flex-note__inner { align-items: flex-start; flex-direction: column; }
	.flex-filters__field { flex: 1 1 100%; }
	.segmented { width: 100%; }
	.segmented__option { flex: 1; }
}

/* -- 16. Motion ---------------------------------------------------------- */
/*
   Rules of thumb here: nothing moves more than a few pixels, nothing takes
   longer than ~360ms, and nothing animates text the reader is trying to read —
   so headings and body copy arrive already in place. Everything below is
   inside a no-preference query, so a reduced-motion visitor gets the finished
   state directly rather than a faster version of the animation.
*/

@keyframes ps-rise {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@keyframes ps-drop {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/*
 * A single sweep across the bottom edge of the page's heading section, rather
 * than a line inside the results. The whole page is waiting, so the signal
 * belongs at the page's own seam — and it stays in one fixed place instead of
 * moving with whatever is being replaced.
 *
 * The gradient is narrower than the element and its position is animated, so
 * the sweep is contained without needing a clipping wrapper.
 */
@keyframes ps-progress {
	from { background-position: -35% 0; }
	to   { background-position: 135% 0; }
}

.stock-hero,
.flex-filters { position: relative; }

.ps-loading .stock-hero::after,
.ps-loading .flex-filters::after {
	content: "";
	position: absolute;
	/* Sitting on the section's 1px bottom border, not below it. */
	inset: auto 0 -1px 0;
	z-index: 4;
	height: 2px;
	background-image: linear-gradient(90deg, transparent, var(--accent), transparent);
	background-size: 35% 100%;
	background-repeat: no-repeat;
	animation: ps-progress 900ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	/* Still says "working", without the movement. */
	.ps-loading .stock-hero::after,
	.ps-loading .flex-filters::after {
		animation: none;
		background-image: none;
		background-color: var(--accent);
		opacity: .55;
	}
}

@media (prefers-reduced-motion: no-preference) {

	/* Results arriving: a short rise, lightly staggered so the grid resolves
	   left to right rather than all at once. Also runs after a filter change,
	   which is the clearest signal that the set actually changed. */
	.vehicle-grid > .vehicle-card,
	.card-grid > *,
	.rate-row {
		animation: ps-rise var(--dur-slow) var(--ease-out) both;
		animation-delay: calc(var(--i, 0) * 28ms);
	}

	.vehicle-grid > .vehicle-card:nth-child(1), .card-grid > *:nth-child(1) { --i: 0; }
	.vehicle-grid > .vehicle-card:nth-child(2), .card-grid > *:nth-child(2) { --i: 1; }
	.vehicle-grid > .vehicle-card:nth-child(3), .card-grid > *:nth-child(3) { --i: 2; }
	.vehicle-grid > .vehicle-card:nth-child(4), .card-grid > *:nth-child(4) { --i: 3; }
	.vehicle-grid > .vehicle-card:nth-child(5), .card-grid > *:nth-child(5) { --i: 4; }
	.vehicle-grid > .vehicle-card:nth-child(6), .card-grid > *:nth-child(6) { --i: 5; }
	.vehicle-grid > .vehicle-card:nth-child(7), .card-grid > *:nth-child(7) { --i: 6; }
	.vehicle-grid > .vehicle-card:nth-child(8), .card-grid > *:nth-child(8) { --i: 7; }
	.vehicle-grid > .vehicle-card:nth-child(9), .card-grid > *:nth-child(9) { --i: 8; }
	.vehicle-grid > .vehicle-card:nth-child(10), .card-grid > *:nth-child(10) { --i: 9; }
	.vehicle-grid > .vehicle-card:nth-child(11), .card-grid > *:nth-child(11) { --i: 10; }
	.vehicle-grid > .vehicle-card:nth-child(12), .card-grid > *:nth-child(12) { --i: 11; }

	.rate-row:nth-child(1) { --i: 0; }
	.rate-row:nth-child(2) { --i: 1; }
	.rate-row:nth-child(3) { --i: 2; }
	.rate-row:nth-child(4) { --i: 3; }
	.rate-row:nth-child(5) { --i: 4; }
	.rate-row:nth-child(6) { --i: 5; }
	.rate-row:nth-child(7) { --i: 6; }
	.rate-row:nth-child(8) { --i: 7; }
	.rate-row:nth-child(9) { --i: 8; }
	.rate-row:nth-child(10) { --i: 9; }
	.rate-row:nth-child(11) { --i: 10; }
	.rate-row:nth-child(12) { --i: 11; }

	/* Panels that open from nothing: fade and settle rather than snap in.
	   Closing stays instant — waiting to dismiss something is worse. */
	.site-nav.is-open,
	.stock-layout__aside.is-open {
		animation: ps-drop var(--dur) var(--ease-out) both;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Belt and braces alongside the global rule below: these are the only
	   animations that would otherwise leave an element mid-transform. */
	.vehicle-grid > .vehicle-card,
	.card-grid > *,
	.rate-row,
	.site-nav.is-open,
	.stock-layout__aside.is-open {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* -- 17. Editor blocks --------------------------------------------------- */

/* A page built from blocks has no outer container: each block brings its own
   .shell, and the full-bleed ones need the whole viewport. */
.page-canvas > * + * { margin-top: 0; }

.block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
}
.block-buttons:empty { display: none; }

.block-placeholder {
	margin: 0;
	padding: 22px 24px;
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface-alt);
	font-size: 13.5px;
	color: var(--ink-muted);
	text-align: center;
}

/* ---- Hero -------------------------------------------------------------- */
.hero-block {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--dark);
	color: #fff;
	isolation: isolate;
}
.hero-block--short { min-height: 44vh; padding-block: 64px; }
.hero-block--standard { min-height: 62vh; padding-block: 88px; }
.hero-block--tall { min-height: 82vh; padding-block: 104px; }

.hero-block__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}
.hero-block__image,
.hero-block__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The scrim keeps the type legible over whatever photograph is used. A
   gradient rather than a flat wash, so the image survives at the top. */
.hero-block__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 10, 10, .25), rgba(10, 10, 10, .8));
}
.hero-block--scrim-none .hero-block__media::after { display: none; }
.hero-block--scrim-light .hero-block__media::after { background: linear-gradient(180deg, rgba(10, 10, 10, .1), rgba(10, 10, 10, .5)); }
.hero-block--scrim-heavy .hero-block__media::after { background: linear-gradient(180deg, rgba(10, 10, 10, .45), rgba(10, 10, 10, .92)); }

.hero-block__inner { position: relative; width: 100%; }
.hero-block__content { max-width: 720px; }
.hero-block--centre .hero-block__content { max-width: 780px; margin-inline: auto; text-align: center; }
.hero-block--centre .block-buttons { justify-content: center; }

.hero-block__eyebrow {
	margin: 0 0 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	/* Red on dark, like the PureFlex hero — it is the same device. */
	color: var(--accent);
}
.hero-block__eyebrow .accent-stop,
.hero-block__title .accent-stop { color: var(--accent); }

/*
 * The heading and intro are inline-edited core blocks now, so the display
 * treatment is applied by position rather than by class. Editors can still
 * override size and colour from the block toolbar — these are the defaults,
 * not a lock.
 */
.hero-block__prose > :first-child { margin-top: 0; }
.hero-block__prose > :last-child { margin-bottom: 0; }

/*
 * Wrapped in :where() so these carry no specificity at all. They are the
 * defaults an inline-edited heading inherits; the moment an editor picks a
 * size or a colour in the toolbar, core's own class or inline style wins
 * without a fight. Defaults, not locks — which was the point of going
 * inline in the first place.
 */
:where(.hero-block__prose) :where(h1, h2) {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.08;
	font-size: clamp(34px, 5vw, 60px);
	text-wrap: balance;
}
:where(.hero-block__prose) :where(h3, h4) { font-family: var(--font-display); font-size: 24px; margin: 0; }

:where(.hero-block__prose) :where(p),
.hero-block__intro {
	margin: 18px 0 0;
	max-width: 56ch;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .82);
}
:where(.hero-block__prose) :where(ul, ol) { margin: 18px 0 0; padding-left: 1.2em; color: rgba(255, 255, 255, .82); }
:where(.hero-block__prose) :where(li) { list-style: disc; margin-bottom: .3em; }

.hero-block--centre .hero-block__prose p,
.hero-block--centre .hero-block__intro { margin-inline: auto; }

/* Pause control for the background video. Autoplaying media needs a way to
   stop it, and it doubles as the affordance that it is a video at all. */
.hero-block__video-toggle {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 50%;
	background: rgba(10, 10, 10, .4);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero-block__video-toggle:hover { background: rgba(10, 10, 10, .75); border-color: #fff; }

/* Two bars for pause; a triangle once pressed, meaning "play". */
.hero-block__video-toggle-icon {
	width: 10px;
	height: 11px;
	border-left: 3px solid #fff;
	border-right: 3px solid #fff;
}
.hero-block__video-toggle[aria-pressed="true"] .hero-block__video-toggle-icon {
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-left: 10px solid #fff;
	margin-left: 4px;
}

/* ---- Free text --------------------------------------------------------- */
.text-block { padding-block: 64px; }
.text-block--tint { background: var(--surface-alt); }
.text-block--dark { background: var(--dark); color: #fff; }
.text-block--dark .text-block__prose { color: var(--dark-text); }
.text-block--dark .text-block__prose a { color: #fff; }
.text-block--dark .text-block__eyebrow { color: #fff; }

.text-block__inner { max-width: 68ch; }
.text-block--narrow .text-block__inner { max-width: 56ch; }
.text-block--wide .text-block__inner { max-width: 88ch; }
.text-block--centre .text-block__inner { margin-inline: auto; text-align: center; }
.text-block--centre .block-buttons { justify-content: center; }
.text-block--centre .text-block__prose { text-align: center; }

.text-block__eyebrow {
	margin: 0 0 14px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent);
}
.text-block__title { font-size: clamp(26px, 3.2vw, 38px); }
.text-block__title + .text-block__prose { margin-top: 18px; }
.text-block__prose { max-width: none; }
/* Same rule as the other two: theme defaults yield to editor overrides. */
:where(.text-block__prose) :where(h2, h3) { font-family: var(--font-display); }

/* ---- Billboard --------------------------------------------------------- */
.billboard {
	position: relative;
	overflow: hidden;
}
.billboard--dark { background: var(--dark); color: #fff; }
.billboard--light { background: var(--surface-alt); color: var(--ink); }
.billboard--accent { background: var(--accent); color: #fff; }

/* The image is positioned against the section, so it reaches the viewport
   edge exactly, while the copy stays inside .shell and lines up with every
   other block on the page. A percentage inside the shell could not do both. */
.billboard__media {
	position: absolute;
	inset: 0 50% 0 0;
	background: var(--surface-sunk);
}
.billboard--media-right .billboard__media { inset: 0 0 0 50%; }
.billboard__image { width: 100%; height: 100%; object-fit: cover; }

.billboard__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	min-height: 420px;
}

.billboard__content {
	grid-column: 2;
	padding-block: 64px;
	padding-left: 48px;
}
.billboard--media-right .billboard__content {
	grid-column: 1;
	padding-left: 0;
	padding-right: 48px;
}

.billboard--no-media .billboard__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.billboard--no-media .billboard__content {
	grid-column: 1;
	max-width: 62ch;
	padding-inline: 0;
}

.billboard__eyebrow {
	margin: 0 0 14px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.billboard--dark .billboard__eyebrow,
.billboard--light .billboard__eyebrow { color: var(--accent); }
.billboard--accent .billboard__eyebrow { color: rgba(255, 255, 255, .8); }

.billboard__prose > :first-child { margin-top: 0; }
.billboard__prose > :last-child { margin-bottom: 0; }

:where(.billboard__prose) :where(h1, h2) {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1.12;
	font-size: clamp(26px, 3.4vw, 40px);
	text-wrap: balance;
}
:where(.billboard__prose) :where(h3, h4) { font-family: var(--font-display); font-size: 21px; margin: 0; }
.billboard--accent .accent-stop { color: #fff; }

:where(.billboard__prose) :where(p),
.billboard__text {
	margin: 16px 0 0;
	max-width: 46ch;
	font-size: 15px;
	line-height: 1.65;
}
:where(.billboard__prose) :where(ul, ol) { margin: 16px 0 0; padding-left: 1.2em; }
:where(.billboard__prose) :where(li) { list-style: disc; margin-bottom: .3em; }

:where(.billboard--dark .billboard__prose) :where(p),
.billboard--dark .billboard__text { color: var(--dark-text); }
:where(.billboard--light .billboard__prose) :where(p),
.billboard--light .billboard__text { color: var(--ink-muted); }
:where(.billboard--accent .billboard__prose) :where(p),
.billboard--accent .billboard__text { color: rgba(255, 255, 255, .9); }

.billboard__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 28px 40px;
	margin: 28px 0 0;
	padding-top: 24px;
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.billboard__stat dt {
	margin-bottom: 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .7;
}
.billboard__stat dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -.015em;
	line-height: 1;
}

@media (max-width: 900px) {
	.billboard__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	/* Back into the flow, above the copy, spanning the full width — as a
	   band, so a tall photo does not push the copy off the screen. */
	.billboard__media {
		position: relative;
		inset: auto !important;
		order: -1;
		aspect-ratio: 16 / 8;
		min-height: 200px;
		margin-inline: calc(-1 * var(--gutter));
	}
	.billboard__content,
	.billboard--media-right .billboard__content {
		grid-column: 1;
		padding-block: 40px;
		padding-inline: 0;
	}
	.hero-block--standard { min-height: 52vh; padding-block: 64px; }
	.hero-block--tall { min-height: 64vh; padding-block: 72px; }
	.text-block { padding-block: 48px; }
}

@media (max-width: 620px) {
	.hero-block__video-toggle { right: 12px; bottom: 12px; }
	.billboard__stats { gap: 20px 28px; }
	.billboard__stat dd { font-size: 24px; }
}

/* -- 14. Responsive ----------------------------------------------------- */
@media (max-width: 1080px) {
	.stock-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 26px; }
	.vehicle-single__top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	/* The buy box leads on narrow screens — price and CTA before the detail. */
	.vehicle-single__aside { position: static; order: -1; }
	.panel__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 900px) {
	.site-header__inner { gap: 16px; }
	.nav-toggle { display: block; }

	.site-nav {
		position: absolute;
		inset: 100% 0 auto 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px var(--gutter) 20px;
		background: var(--surface);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow-lift);
	}
	.site-nav.is-open { display: flex; }
	.menu--primary { flex-direction: column; align-items: stretch; gap: 0; }
	.menu--primary > li > a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
	.menu--primary > li > a::after { display: none; }
	.site-nav__actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 18px; }
	.site-header__phone { justify-content: center; }

	.stock-hero__row { flex-direction: column; align-items: flex-start; gap: 22px; }
	.stock-hero__toolbar { width: 100%; justify-content: space-between; }

	.stock-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.stock-layout__filter-toggle { display: inline-flex; margin-bottom: 20px; }

	.stock-layout__aside {
		display: none;
		margin-bottom: 24px;
	}
	.stock-layout__aside.is-open { display: block; }
	.filters { position: static; }
}

@media (max-width: 620px) {
	:root { --gutter: 18px; }

	.vehicle-grid,
	.card-grid { grid-template-columns: minmax(0, 1fr); }

	.stock-hero__toolbar { flex-direction: column; align-items: flex-start; gap: 12px; }
	.spec-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
	.panel { padding: 20px; }
	.provenance { padding: 24px; }
	.buybox__facts { grid-template-columns: 1fr; }
	.form-slot .ps-row > p { grid-template-columns: minmax(0, 1fr); }
	.buybox__fact:nth-child(odd) { border-right: 0; }
	.gallery__thumbs { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
	.site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.site-footer__bar-inner { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.vehicle-card:hover { transform: none; }
	.vehicle-card:hover .vehicle-card__image { transform: none; }
	.btn:active { transform: none; }
	.link-arrow:hover svg { transform: none; }
}

@media print {
	.site-header, .site-footer, .stock-layout__aside, .vehicle-card__actions, .gallery__thumbs { display: none !important; }
}