/*
 * Elite Auto Dealer: design system (first visual shell).
 *
 * Mobile-first. Breakpoints: 40em (640px), 60em (960px: desktop navigation),
 * 64em (1024px: two-column vehicle layout), 75em (1200px).
 * No external fonts, frameworks or icon libraries.
 */

/* ---------- Tokens ---------- */

:root {
	/* Brand colour comes from the palette (inc/palette.php), printed inline after this file: slots
	   (--eda-c-*), the role tokens of each tone (--eda-bg, --eda-text, --eda-button-bg, …) and the
	   chrome (--eda-header-glass, --eda-photo-bg, --eda-footer-bg, …). Components use roles only.
	   Fixed functional colours below are never part of a palette; bin/contrast-gate.php checks them
	   against every palette (values mirrored in eda_palette_fixed_colors()). */
	--eda-focus-ring: #1f5fe0;
	--eda-focus-ring-dark: #8db2ff;
	--eda-on-photo: #fff;
	--eda-scrim: #121316;
	--eda-status-reserved-bg: #efe4cb;
	--eda-status-reserved-ink: #5a4413;
	--eda-status-sold-bg: #121316;
	--eda-status-sold-ink: #fff;

	--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--radius: 2px;
	--radius-lg: 4px;
	--container: 82rem;
	--gutter: clamp(1rem, 4vw, 2.5rem);
	--section: clamp(3.5rem, 7vw, 7rem);
	--header-h: 4.5rem;
	--ease: cubic-bezier(0.2, 0.6, 0.2, 1);
	--shadow-lift: 0 18px 40px -24px color-mix(in srgb, var(--eda-scrim) 45%, transparent);
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
	margin: 0;
	background: var(--eda-bg);
	color: var(--eda-text);
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 0.5em;
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.02em;
}

p {
	margin: 0 0 1rem;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

img {
	max-width: 100%;
	height: auto;
}

/* Visible keyboard focus everywhere (project rule: never remove focus outlines). */
:focus-visible {
	outline: 2px solid var(--eda-focus);
	outline-offset: 3px;
}

/* Heroes and dark sections get the dark focus ring from their tone (--eda-focus); the footer is chrome. */
.site-footer :focus-visible {
	outline-color: var(--eda-focus-ring-dark);
}

/* Skip-link target; main itself is not interactive. */
.site-main:focus {
	outline: none;
}

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

.skip-link:focus {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 100;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	clip-path: none;
	background: var(--eda-strong);
	color: var(--eda-on-strong);
}

/* ---------- Layout ---------- */

.container {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}

.container--narrow {
	max-width: 46rem;
}

.section {
	padding-block: var(--section);
}

/* Short, single-message bands (collection CTA, showroom). */
.section--compact {
	padding-block: clamp(3rem, 5.5vw, 4.75rem);
}

.section-tight {
	padding-block: clamp(2rem, 4vw, 3.5rem);
}

.section--paper {
	background: var(--eda-surface-alt);
}

.section--dark {
	background: var(--eda-bg);
	color: var(--eda-text);
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.section-title {
	margin: 0;
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
}

.eyebrow {
	margin: 0 0 0.75rem;
	color: var(--eda-eyebrow);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

.link-arrow::after {
	content: " \2192";
}

/* ---------- Buttons ---------- */

.button,
.enquiry-form button[type="submit"] {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--eda-button-bg);
	color: var(--eda-button-text);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.button--primary:hover,
.button--light:hover,
.enquiry-form button[type="submit"]:hover {
	background: var(--eda-button-hover);
}

.button--ghost-light {
	border-color: var(--eda-line-strong);
	background: transparent;
	color: var(--eda-text);
}

.button--ghost-light:hover {
	border-color: var(--eda-text);
}

.button--quiet {
	border-color: var(--eda-line);
	background: transparent;
	color: var(--eda-text);
}

.button--quiet:hover {
	border-color: var(--eda-text);
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* ---------- Header & navigation ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--eda-line);
	background: var(--eda-header-glass);
}

@supports (backdrop-filter: blur(8px)) {
	.site-header {
		background: var(--eda-header-glass-blur);
		backdrop-filter: blur(12px);
	}

	/* The blur makes the header the containing block of the fixed drawer, which would then be cut
	   off below the first link; the open drawer covers the page anyway. */
	.nav-open .site-header {
		backdrop-filter: none;
	}
}

.site-header__inner {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	min-height: var(--header-h);
}

.brand {
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.brand--light {
	color: var(--eda-footer-heading);
}

.nav-toggle {
	display: inline-flex;
	gap: 0.625rem;
	align-items: center;
	min-width: 3rem;
	min-height: 3rem;
	padding: 0 0.875rem;
	border: 1px solid var(--eda-line);
	border-radius: var(--radius);
	background: transparent;
	color: var(--eda-strong);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
}

.nav-toggle__icon,
.nav-toggle__icon::before {
	display: block;
	width: 1.125rem;
	height: 1px;
	background: currentColor;
	transition: transform 0.2s var(--ease);
}

.nav-toggle__icon {
	position: relative;
	transform: translateY(-3px);
}

.nav-toggle__icon::before {
	content: "";
	position: absolute;
	top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
	transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
	transform: translateY(-6px) rotate(-90deg);
}

.site-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	display: flex;
	align-items: center;
	min-height: 3.5rem;
	border-bottom: 1px solid var(--eda-line);
	font-size: 1.375rem;
	text-decoration: none;
}

.site-nav__list a[aria-current="page"] {
	font-weight: 600;
}

.site-nav__cta {
	width: 100%;
	margin-top: 1.5rem;
}

/* Without JavaScript the menu is always visible (wraps under the brand). */
html:not(.js) .nav-toggle {
	display: none;
}

html:not(.js) .site-header__inner {
	flex-wrap: wrap;
	padding-block: 0.5rem;
}

html:not(.js) .site-nav {
	width: 100%;
}

/* With JavaScript: a full-height drawer below the header on small screens. */
.js .site-nav {
	position: fixed;
	inset: var(--header-h) 0 0;
	z-index: 49;
	overflow-y: auto;
	padding: 1rem var(--gutter) 2rem;
	background: var(--eda-bg);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-0.5rem);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
}

.js.nav-open .site-nav {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s;
}

.nav-open {
	overflow: hidden; /* Lock page scroll behind the open drawer. */
}

@media (min-width: 60em) {
	.nav-toggle,
	html:not(.js) .nav-toggle {
		display: none;
	}

	.js .site-nav,
	html:not(.js) .site-nav {
		position: static;
		display: flex;
		gap: 2.25rem;
		align-items: center;
		width: auto;
		padding: 0;
		overflow: visible;
		background: none;
		visibility: visible;
		opacity: 1;
		transform: none;
	}

	.nav-open {
		overflow: visible;
	}

	.site-nav__list {
		display: flex;
		gap: 1.75rem;
	}

	.site-nav__list a {
		min-height: 3rem;
		border-bottom: 0;
		font-size: 0.9375rem;
		background-image: linear-gradient(currentColor, currentColor);
		background-position: 0 calc(50% + 0.8em);
		background-repeat: no-repeat;
		background-size: 0 1px;
		transition: background-size 0.25s var(--ease);
	}

	.site-nav__list a:hover,
	.site-nav__list a[aria-current="page"] {
		background-size: 100% 1px;
	}

	.site-nav__list a[aria-current="page"] {
		font-weight: 500;
	}

	.site-nav__cta {
		width: auto;
		margin-top: 0;
		min-height: 2.75rem;
		padding-inline: 1.25rem;
	}
}

/* ---------- Image placeholder ---------- */

/* Intentionally empty stand-in until vehicle photography is imported. Same 3:2 box as real images. */
.media-placeholder {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background:
		radial-gradient(ellipse 46% 9% at 50% 66%, rgba(0, 0, 0, 0.45), transparent 70%),
		radial-gradient(ellipse 70% 50% at 50% 58%, rgba(255, 255, 255, 0.09), transparent 70%),
		linear-gradient(180deg, #30333a 0%, #202227 61%, #17181c 61.2%, #1d1f23 100%);
}

.media-placeholder::before {
	content: "";
	position: absolute;
	inset: 61% 6% auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--eda-c-accent-light) 45%, transparent), transparent);
}

.vehicle-media {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* ---------- Badges ---------- */

.badge {
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	padding: 0 0.625rem;
	border-radius: var(--radius);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.badge--reserved {
	background: var(--eda-status-reserved-bg);
	color: var(--eda-status-reserved-ink);
}

.badge--sold {
	background: var(--eda-status-sold-bg);
	color: var(--eda-status-sold-ink);
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: clamp(30rem, 70vh, 42rem);
	padding: 5rem 0 clamp(7rem, 11vw, 8.5rem);
	background: var(--eda-photo-bg);
	color: var(--eda-on-photo);
	isolation: isolate;
}

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

.hero__visual .media-placeholder,
.hero__visual .vehicle-media {
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
}

.hero__visual picture {
	display: block;
	height: 100%;
}

.hero__visual .hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Keeps text readable over the photograph: subject right, headline left. */
.hero__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, color-mix(in srgb, var(--eda-scrim) 88%, transparent) 0%, color-mix(in srgb, var(--eda-scrim) 55%, transparent) 55%, color-mix(in srgb, var(--eda-scrim) 15%, transparent) 100%);
}

/* Portrait below 1024px: the mobile source (subject in the upper third, text below it). */
@media (orientation: portrait) and (max-width: 63.99em) {
	.hero__visual .hero__image {
		object-position: 50% 30%;
	}

	/* Stops run from the bottom: the text block is bottom-aligned and about 400px tall on every
	   portrait size, so the text always sits on the dark part and the subject band above stays light. */
	.hero__visual::after {
		background: linear-gradient(0deg, color-mix(in srgb, var(--eda-scrim) 82%, transparent) 0, color-mix(in srgb, var(--eda-scrim) 72%, transparent) 410px, color-mix(in srgb, var(--eda-scrim) 10%, transparent) 450px, color-mix(in srgb, var(--eda-scrim) 10%, transparent) calc(100% - 3rem), color-mix(in srgb, var(--eda-scrim) 28%, transparent) 100%);
	}
}

/* Below 360px the headline wraps to three lines, so the text block (and the dark zone) is taller. */
@media (orientation: portrait) and (max-width: 22.49em) {
	.hero__visual::after {
		background: linear-gradient(0deg, color-mix(in srgb, var(--eda-scrim) 82%, transparent) 0, color-mix(in srgb, var(--eda-scrim) 74%, transparent) 490px, color-mix(in srgb, var(--eda-scrim) 25%, transparent) 530px, color-mix(in srgb, var(--eda-scrim) 25%, transparent) 100%);
	}
}

.hero__content > * {
	max-width: 40rem;
}

.hero__title {
	margin: 0 0 1.25rem;
	font-size: clamp(2.5rem, 6.2vw, 4.75rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
}

.hero__lead {
	margin-bottom: 2rem;
	color: color-mix(in srgb, var(--eda-on-photo) 80%, transparent);
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

/* ---------- Vehicle search ---------- */

.search-strip {
	position: relative;
	z-index: 2;
	margin-top: -4.5rem;
}

.vehicle-search {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-items: end;
	padding: clamp(1rem, 2.5vw, 1.5rem);
	border: 1px solid var(--eda-line);
	border-radius: var(--radius-lg);
	background: var(--eda-surface);
}

.vehicle-search--home {
	border-color: transparent;
	box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--eda-scrim) 50%, transparent);
}

.vehicle-search__field label,
.enquiry-form label {
	display: block;
	margin-bottom: 0.375rem;
	color: var(--eda-text-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

select,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
	width: 100%;
	min-height: 3rem;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--eda-field-line);
	border-radius: var(--radius);
	background-color: var(--eda-surface);
	color: var(--eda-text);
	font: inherit;
	font-size: 1rem;
}

select {
	padding-right: 2.5rem;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2316171a' stroke-width='1.5'/%3E%3C/svg%3E");
	background-position: right 0.875rem center;
	background-repeat: no-repeat;
}

select:hover,
input:hover,
textarea:hover {
	border-color: var(--eda-line-strong);
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

.vehicle-search__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.vehicle-search__actions .button {
	flex: 1 1 auto;
}

@media (min-width: 40em) {
	.vehicle-search {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vehicle-search__actions {
		grid-column: 1 / -1;
	}
}

@media (min-width: 64em) {
	.vehicle-search--home {
		grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
	}

	.vehicle-search--home .vehicle-search__actions {
		grid-column: auto;
	}

	.vehicle-search--inventory {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vehicle-search--inventory .vehicle-search__actions {
		justify-content: flex-end;
	}

	.vehicle-search--inventory .vehicle-search__actions .button {
		flex: 0 0 auto;
	}
}

@media (min-width: 75em) {
	/* Five filters plus the actions on one row. */
	.vehicle-search--inventory {
		grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
	}

	.vehicle-search--inventory .vehicle-search__actions {
		grid-column: auto;
		flex-wrap: nowrap;
	}
}

/* ---------- Vehicle cards ---------- */

.vehicle-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 2vw, 1.75rem);
}

/* Static export filtering (inventory-static.js) hides an empty grid and the pagination. */
.vehicle-grid[hidden],
.pagination[hidden] {
	display: none;
}

@media (min-width: 40em) {
	.vehicle-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.vehicle-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.vehicle-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--eda-line);
	border-radius: var(--radius-lg);
	background: var(--eda-surface);
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

@media (hover: hover) {
	.vehicle-card:hover {
		box-shadow: var(--shadow-lift);
		transform: translateY(-3px);
	}

	.vehicle-card:hover .vehicle-card__cta::after {
		transform: translateX(3px);
	}
}

.vehicle-card__media {
	position: relative;
}

.vehicle-card__media .badge,
.vehicle-gallery__main .badge {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
}

.vehicle-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.25rem 1.25rem 1.375rem;
}

.vehicle-card__make {
	margin: 0 0 0.25rem;
	color: var(--eda-text-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.vehicle-card__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.vehicle-card__title a {
	text-decoration: none;
}

/* The title link covers the whole card. */
.vehicle-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--radius-lg);
}

.vehicle-card__title a:focus-visible {
	outline: none;
}

.vehicle-card__title a:focus-visible::after {
	outline: 2px solid var(--eda-focus);
	outline-offset: -2px;
}

.vehicle-card__variant {
	margin: 0.25rem 0 0;
	color: var(--eda-text-muted);
	font-size: 0.9375rem;
}

.vehicle-card__facts {
	display: flex;
	flex-wrap: wrap;
	margin: 0.875rem 0 1.25rem;
	padding: 0;
	color: var(--eda-text-muted);
	font-size: 0.875rem;
	list-style: none;
}

.vehicle-card__facts li:not(:last-child)::after {
	content: "\00b7";
	margin: 0 0.5rem;
}

.vehicle-card__footer {
	display: flex;
	gap: 1rem;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--eda-line);
}

.vehicle-card__price {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.vehicle-card__cta {
	font-size: 0.875rem;
	font-weight: 500;
	white-space: nowrap;
}

.vehicle-card__cta::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.375rem;
	transition: transform 0.2s var(--ease);
}

.vehicle-card--sold .vehicle-card__price {
	color: var(--eda-text-muted);
}

.price-note {
	margin: 0.125rem 0 0;
	color: var(--eda-text-muted);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

/* Sold cards keep their photograph intact: the SOLD badge and "Sold" price carry the state. */

/* ---------- Homepage sections ---------- */

.feature-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: feature;
}

.feature-list li {
	padding-top: 1.25rem;
	border-top: 1px solid var(--eda-line-strong);
	counter-increment: feature;
}

.feature-list li::before {
	content: counter(feature, decimal-leading-zero);
	color: var(--eda-accent-ink);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
}

.feature-list h3 {
	margin: 0.75rem 0 0.5rem;
	font-size: 1.1875rem;
}

.feature-list p {
	margin: 0;
	color: var(--eda-text-muted);
}

@media (min-width: 40em) {
	.feature-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.feature-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.collection-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 3rem;
	align-items: center;
	justify-content: space-between;
}

.collection-cta__count {
	margin: 0.75rem 0 0;
	color: var(--eda-accent-ink);
	font-size: 1.125rem;
}

.showroom {
	display: grid;
	gap: 1.5rem 4rem;
	align-items: end;
}

.showroom p {
	max-width: 32rem;
	color: var(--eda-text-muted);
}

.showroom .showroom__place {
	margin: 0.75rem 0 0;
	color: var(--eda-text);
	font-size: 1.25rem;
}

@media (min-width: 56em) {
	.showroom {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- Page intro, breadcrumbs, prose ---------- */

.page-intro {
	padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--eda-line);
}

/* Header image hero (Vehicles, About, Finance, Contact): the image fills a full-width hero,
   shallower than the homepage's. Breadcrumb top-left, title block bottom-left, light text over a
   subtle left-weighted overlay. Without an image the plain text header above applies. */
.page-intro--hero {
	position: relative;
	display: flex;
	min-height: 16.25rem;
	padding-block: 1.25rem 1.75rem;
	border-bottom: 0;
	background: var(--eda-photo-bg);
	color: var(--eda-on-photo);
	isolation: isolate;
}

.page-intro__backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.page-intro__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, color-mix(in srgb, var(--eda-scrim) 75%, transparent) 0%, color-mix(in srgb, var(--eda-scrim) 45%, transparent) 50%, color-mix(in srgb, var(--eda-scrim) 0%, transparent) 85%),
		linear-gradient(90deg, color-mix(in srgb, var(--eda-scrim) 78%, transparent) 0%, color-mix(in srgb, var(--eda-scrim) 45%, transparent) 40%, color-mix(in srgb, var(--eda-scrim) 8%, transparent) 80%);
}

.page-intro__backdrop-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

.page-intro--hero .page-intro__inner,
.page-intro--hero .page-intro__text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
}

.page-intro--hero .page-intro__text {
	flex: 1;
}

.page-intro--hero .breadcrumbs,
.page-intro--hero .breadcrumbs [aria-current="page"] {
	margin: 0;
	color: color-mix(in srgb, var(--eda-on-photo) 85%, transparent);
}

.page-intro--hero .breadcrumbs li:not(:last-child)::after {
	color: color-mix(in srgb, var(--eda-on-photo) 45%, transparent);
}

.page-intro--hero .page-title {
	color: var(--eda-on-photo);
}

.page-intro--hero .page-lead {
	color: color-mix(in srgb, var(--eda-on-photo) 85%, transparent);
}

@media (min-width: 40em) {
	.page-intro--hero {
		min-height: 20rem;
		padding-block: 1.5rem 2.25rem;
	}

	/* Text sits left: lighter bottom shading keeps the cars on the right bright. */
	.page-intro__backdrop::after {
		background:
			linear-gradient(0deg, color-mix(in srgb, var(--eda-scrim) 55%, transparent) 0%, color-mix(in srgb, var(--eda-scrim) 0%, transparent) 55%),
			linear-gradient(90deg, color-mix(in srgb, var(--eda-scrim) 78%, transparent) 0%, color-mix(in srgb, var(--eda-scrim) 45%, transparent) 40%, color-mix(in srgb, var(--eda-scrim) 8%, transparent) 80%);
	}
}

/* 400px up to 1440, growing with the width (422px at 1920, 512px at 2560) so the 3:2 source keeps
   the cars whole on wide screens. */
@media (min-width: 64em) {
	.page-intro--hero {
		min-height: clamp(25rem, 22vw, 32rem);
		padding-block: 2rem 2.75rem;
	}
}

@media (min-width: 100em) {
	.page-intro__backdrop-image {
		object-position: 50% 40%;
	}
}

@media (min-width: 140em) {
	.page-intro__backdrop-image {
		object-position: 50% 42%;
	}
}

/* ---------- Hero motion ---------- */

/* A slow, clearly visible image-only push-in (zoom, alternate) on the homepage and inner-page
   heroes; the easing stays in motion through most of the cycle and only softens at the turns. The
   wrapper clips; overlays, text, buttons and forms stay still. Transform only (compositor-friendly).
   Values per hero via custom properties; the scale always overscans the frame, so no edge is ever
   exposed. Off entirely for reduced motion (below). */
.hero__visual,
.page-intro__backdrop {
	overflow: hidden;
}

.hero__image,
.page-intro__backdrop-image {
	transform-origin: var(--hero-origin, 50% 50%);
	animation: eda-hero-motion var(--hero-duration, 14s) cubic-bezier(0.3, 0.1, 0.7, 0.9) infinite alternate both;
}

@keyframes eda-hero-motion {
	from {
		transform: scale(1) translate3d(0, 0, 0);
	}

	to {
		transform: scale(var(--hero-scale, 1.06)) translate3d(0, 0, 0);
	}
}

/* A straight camera push-in on every hero: origins are centred horizontally, so nothing pans
   sideways. Vertical anchors only where they keep the subject whole. */
.hero__visual {
	--hero-scale: 1.08;
	--hero-duration: 14s;
	--hero-origin: 50% 50%;
}

/* Vehicles: centred on the line of cars so roofs and wheels grow evenly. */
.page-intro--motion-vehicles {
	--hero-scale: 1.06;
	--hero-duration: 13.5s;
	--hero-origin: 50% 44%;
}

.page-intro--motion-about {
	--hero-scale: 1.07;
}

/* Finance: the calmest. */
.page-intro--motion-finance {
	--hero-scale: 1.06;
	--hero-duration: 15s;
}

.page-intro--motion-contact {
	--hero-scale: 1.07;
}

/* Portrait homepage (mobile source, subject in the upper third) and phones: gentler. */
@media (orientation: portrait) and (max-width: 63.99em) {
	.hero__visual {
		--hero-scale: 1.04;
		--hero-origin: 50% 30%;
	}
}

@media (max-width: 39.99em) {
	.page-intro--hero {
		--hero-scale: 1.035;
	}
}

/* Wide screens: the line of cars nearly fills the shallow hero, with more room above the roofs
   than under the wheels. Vehicles zooms from ground level (wheels stay planted, the cars grow
   upwards) and less; ultra-wide (512px hero, cars almost full height) least of all. */
@media (min-width: 100em) {
	.page-intro--motion-vehicles {
		--hero-scale: 1.045;
		--hero-origin: 50% 95%;
	}
}

@media (min-width: 140em) {
	.page-intro--motion-vehicles {
		--hero-scale: 1.015;
		--hero-origin: 50% 97%;
	}
}

.page-title {
	margin: 0;
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	letter-spacing: -0.03em;
}

.page-lead {
	max-width: 40rem;
	margin: 1rem 0 0;
	color: var(--eda-text-muted);
	font-size: 1.125rem;
}

.breadcrumbs {
	margin-bottom: 1.5rem;
	color: var(--eda-text-muted);
	font-size: 0.8125rem;
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-left: 0.5rem;
	color: var(--eda-line);
}

.breadcrumbs a {
	text-decoration: none;
}

.breadcrumbs a:hover {
	text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
	color: var(--eda-text);
}

.prose {
	max-width: 44rem;
	line-height: 1.7;
}

.prose > :last-child {
	margin-bottom: 0;
}

/* Supporting page image (featured image) after the text, at text-column width. */
.page-figure {
	margin: clamp(2rem, 4vw, 3rem) 0 0;
}

.page-figure img,
.contact-layout__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.panel {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--eda-line);
	border-radius: var(--radius-lg);
	background: var(--eda-surface);
}

/* ---------- Inventory ---------- */

.inventory {
	padding-block: clamp(1.5rem, 3vw, 2.5rem) var(--section);
}

.inventory__count {
	margin: 1.75rem 0 1rem;
	font-weight: 500;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 3rem;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	min-height: 3rem;
	padding: 0 0.75rem;
	border: 1px solid var(--eda-line);
	border-radius: var(--radius);
	text-decoration: none;
}

.page-numbers.current {
	border-color: var(--eda-strong);
	background: var(--eda-strong);
	color: var(--eda-on-strong);
}

.empty-state {
	padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
	border: 1px dashed var(--eda-line);
	border-radius: var(--radius-lg);
	background: var(--eda-surface);
	text-align: center;
}

.empty-state h2 {
	font-size: 1.5rem;
}

.empty-state p {
	color: var(--eda-text-muted);
}

/* ---------- Single vehicle ---------- */

.vehicle-single {
	padding-block: clamp(1rem, 3vw, 2rem) var(--section);
}

.vehicle-layout {
	display: grid;
	gap: 2rem;
}

.vehicle-gallery__main {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
}

.vehicle-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(var(--thumbs, 4), minmax(0, 1fr));
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.vehicle-gallery__thumbs li {
	overflow: hidden;
	border-radius: var(--radius);
}

/* Slideshow: slides stacked in a fixed 3:2 frame (no layout shift), short crossfade. */
.vehicle-gallery__slides {
	position: relative;
	aspect-ratio: 3 / 2;
	touch-action: pan-y;
}

.vehicle-gallery__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.vehicle-gallery__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.2s ease;
}

.vehicle-gallery__slide .vehicle-media {
	height: 100%;
}

.vehicle-gallery__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--eda-scrim) 50%, transparent);
	color: var(--eda-on-photo);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.2s ease;
}

.vehicle-gallery__nav[hidden] {
	display: none;
}

.vehicle-gallery__nav:hover {
	background: color-mix(in srgb, var(--eda-scrim) 78%, transparent);
}

.vehicle-gallery__nav:focus-visible {
	outline: 2px solid var(--eda-focus-ring-dark);
	outline-offset: 2px;
	background: color-mix(in srgb, var(--eda-scrim) 78%, transparent);
}

.vehicle-gallery__nav--prev {
	left: 0.75rem;
}

.vehicle-gallery__nav--next {
	right: 0.75rem;
}

.vehicle-gallery__main:focus-visible {
	outline: 2px solid var(--eda-focus);
	outline-offset: 3px;
}

/* Thumbnails: the current one at full strength with a thin dark frame, the others slightly muted. */
.vehicle-gallery__thumb {
	position: relative;
	display: block;
}

.vehicle-gallery__thumb img {
	opacity: 0.68;
	transition: opacity 0.2s ease;
}

.vehicle-gallery__thumb:hover img,
.vehicle-gallery__thumb:focus-visible img,
.vehicle-gallery__thumb[aria-current="true"] img {
	opacity: 1;
}

.vehicle-gallery__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid transparent;
	border-radius: var(--radius);
	transition: border-color 0.2s ease;
	pointer-events: none;
}

.vehicle-gallery__thumb[aria-current="true"]::after {
	border-color: var(--eda-line-strong);
}

.vehicle-summary__title {
	margin: 0;
	font-size: clamp(2rem, 3.3vw, 2.625rem);
	letter-spacing: -0.03em;
}

.vehicle-summary__variant {
	margin: 0.5rem 0 0;
	color: var(--eda-text-muted);
	font-size: 1.125rem;
}

.vehicle-summary__price {
	margin: 1.5rem 0 0;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.vehicle-single--sold .vehicle-summary__price {
	color: var(--eda-text-muted);
}

.vehicle-summary__vat {
	margin: 0.25rem 0 0;
	color: var(--eda-text-muted);
	font-size: 0.875rem;
}

.key-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.5rem;
	margin: 1.75rem 0;
	border-top: 1px solid var(--eda-line);
}

.key-facts div {
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--eda-line);
}

.key-facts dt {
	color: var(--eda-text-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.key-facts dd {
	margin: 0.125rem 0 0;
	font-weight: 500;
}

.notice--sold {
	padding: 1.25rem;
	border-left: 3px solid var(--eda-line-strong);
	background: var(--eda-surface);
}

.notice--sold p {
	margin-bottom: 1rem;
}

@media (min-width: 64em) {
	.vehicle-layout {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		gap: 3.5rem;
		align-items: start;
	}

	.vehicle-layout__summary {
		position: sticky;
		top: calc(var(--header-h) + 1.5rem);
	}

	.vehicle-gallery__thumbs {
		gap: 0.75rem;
		margin-top: 0.75rem;
	}
}

.vehicle-details {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
	margin-top: clamp(2.5rem, 6vw, 5rem);
}

.vehicle-details__main {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
}

/* The enquiry panel's heading sits inside the panel, so it needs no rule above it. */
.vehicle-details__aside .enquiry > h2 {
	padding-top: 0;
	border-top: 0;
}

@media (min-width: 64em) {
	/* Same proportions as the gallery/summary row above. */
	.vehicle-details {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		gap: 3.5rem;
		align-items: start;
	}

	.vehicle-details__aside {
		position: sticky;
		top: calc(var(--header-h) + 1.5rem);
	}
}

.block-title,
.enquiry > h2 {
	margin: 0 0 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--eda-line-strong);
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
}

.spec-list {
	display: grid;
	gap: 0 2.5rem;
	margin: 0;
}

.spec-list div {
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--eda-line);
}

.spec-list dt {
	color: var(--eda-text-muted);
}

.spec-list dd {
	margin: 0;
	font-weight: 500;
	text-align: right;
}

.equipment-list {
	display: grid;
	gap: 0 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.equipment-list li {
	position: relative;
	padding: 0.5rem 0 0.5rem 1.25rem;
	border-bottom: 1px solid var(--eda-line);
}

.equipment-list li::before {
	content: "";
	position: absolute;
	top: 1.05rem;
	left: 0;
	width: 0.375rem;
	height: 0.375rem;
	background: var(--eda-accent);
}

@media (min-width: 40em) {
	.spec-list,
	.equipment-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.equipment-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- Vehicle action bar ---------- */

.vehicle-action-bar ul {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vehicle-action-bar li {
	flex: 1;
}

.vehicle-action-bar a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0 1rem;
	border: 1px solid var(--eda-line);
	border-radius: var(--radius);
	background: var(--eda-surface);
	font-weight: 500;
	text-decoration: none;
}

.vehicle-action-bar li:last-child a {
	border-color: var(--eda-button-bg);
	background: var(--eda-button-bg);
	color: var(--eda-button-text);
}

@media (max-width: 63.99em) {
	/* Pinned to the bottom of small screens so contact is always one tap away. */
	.vehicle-action-bar {
		position: fixed;
		inset: auto 0 0;
		z-index: 40;
		padding: 0.625rem var(--gutter) calc(0.625rem + env(safe-area-inset-bottom));
		border-top: 1px solid var(--eda-line);
		background: var(--eda-bar-glass);
	}

	html:has(.vehicle-action-bar) .site-footer {
		padding-bottom: 6rem;
	}

	html:has(.vehicle-action-bar) {
		scroll-padding-bottom: 6rem;
	}
}

/* ---------- Forms & enquiries ---------- */

.enquiry {
	max-width: 44rem;
}

.enquiry-form p {
	margin: 0 0 1.25rem;
}

.enquiry-form p:has(> input[type="checkbox"]) {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.enquiry-form input[type="checkbox"] {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.15rem 0 0;
	accent-color: var(--eda-strong);
}

.enquiry-form p:has(> input[type="checkbox"]) label {
	color: var(--eda-text);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.enquiry-status {
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--eda-line-strong);
	background: var(--eda-surface);
}

/* Honeypot field: off-screen for people, still present for bots. */
.enquiry-hp {
	position: absolute;
	left: -9999px;
}

.contact-layout {
	display: grid;
	gap: 2.5rem;
}

.contact-layout__figure {
	margin: 0;
}

@media (min-width: 56em) {
	.contact-layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		gap: 2rem 4rem;
		align-items: start;
	}

	/* Entrance photo under the intro text, beside the form (which spans both rows). */
	.contact-layout > .panel {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.contact-layout__figure {
		grid-column: 1;
		grid-row: 2;
	}
}

/* ---------- Footer ---------- */

.site-footer {
	padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
	background: var(--eda-footer-bg);
	color: var(--eda-footer-text);
	font-size: 0.9375rem;
}

.site-footer__grid {
	display: grid;
	gap: 2.5rem 2rem;
	padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.site-footer__brand p {
	max-width: 22rem;
	margin: 0.5rem 0 0;
}

.site-footer__heading {
	margin: 0 0 1rem;
	color: var(--eda-footer-heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.site-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__list li {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
}

/* The link itself is the 44px touch target, not just its row. */
.site-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

.site-footer a {
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--eda-footer-heading);
	text-decoration: underline;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	padding-top: 1.5rem;
	border-top: 1px solid var(--eda-footer-line);
	font-size: 0.8125rem;
}

.site-footer__legal p {
	margin: 0;
}

.site-footer__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

@media (min-width: 40em) {
	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (min-width: 60em) {
	.site-footer__grid {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	}

	.site-footer__brand {
		grid-column: auto;
	}
}

/* ---------- Footer legal links ---------- */

.site-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Stand-in for a service's control until its consent category is allowed (consent.js), e.g. the
   footer "Language" button before translation is allowed: looks like the links around it. */
.eda-consent-placeholder {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.eda-consent-placeholder:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* ---------- Privacy preferences (inc/consent.php) ----------
   Light-tone role tokens, so every palette (all contrast-gated) keeps it readable. The first
   layer (.eda-consent) is printed only when an optional category exists. */

.eda-consent,
.eda-consent-panel {
	border: 1px solid var(--eda-line);
	border-radius: var(--radius-lg);
	background: var(--eda-surface);
	color: var(--eda-text);
	font-size: 0.9375rem;
	box-shadow: 0 24px 60px -28px color-mix(in srgb, var(--eda-scrim) 60%, transparent);
}

.eda-consent {
	position: fixed;
	z-index: 8000; /* Above the theme (header 50, skip link 100); below the EDS demo switcher (9000), which visitors open on purpose, and EDS Consent's own layer. */
	right: max(0.75rem, env(safe-area-inset-right));
	bottom: max(0.75rem, env(safe-area-inset-bottom));
	left: max(0.75rem, env(safe-area-inset-left));
	max-height: calc(100dvh - 1.5rem);
	overflow-y: auto;
	padding: 1.25rem;
	border-top: 2px solid var(--eda-strong);
}

.eda-consent__title {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.eda-consent__text,
.eda-consent__category-text {
	margin: 0 0 0.75rem;
	color: var(--eda-text-muted);
}

.eda-consent__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
	margin: 0 0 1rem;
}

.eda-consent__links a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--eda-text);
	text-underline-offset: 0.25em;
}

.eda-consent__actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.eda-consent__actions .button {
	min-height: 2.75rem;
	padding: 0 1rem;
	white-space: nowrap;
}

.eda-consent__manage {
	min-height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--eda-text);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
}

.eda-consent-panel {
	width: min(36rem, calc(100vw - 2rem));
	max-height: calc(100dvh - 2rem);
	padding: 1.5rem;
	overflow-y: auto;
}

.eda-consent-panel::backdrop {
	background: color-mix(in srgb, var(--eda-scrim) 55%, transparent);
}

.eda-consent-panel .eda-consent__title {
	padding-right: 2.75rem;
}

.eda-consent-panel__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: none;
	color: var(--eda-text);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.eda-consent-panel__close:hover {
	background: var(--eda-surface-alt);
}

.eda-consent__categories {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.eda-consent__category {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	justify-content: space-between;
	padding: 1rem 0;
	border-top: 1px solid var(--eda-line);
}

.eda-consent__category:last-child {
	border-bottom: 1px solid var(--eda-line);
}

.eda-consent__category-title {
	margin: 0 0 0.25rem;
	font-size: 1rem;
	font-weight: 600;
}

.eda-consent__category-text {
	margin: 0;
}

.eda-consent__switch {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0.125rem 0 0;
	accent-color: var(--eda-button-bg);
}

/* The open mobile menu is a deliberate choice: the banner steps aside until it closes. */
.nav-open .eda-consent {
	display: none;
}

/* Phones with the EDS demo switcher: its floating button (bottom right, 44px) stays reachable. */
@media (max-width: 39.99em) {
	body:has(.eds-dps:not([hidden])) .eda-consent {
		bottom: calc(max(0.75rem, env(safe-area-inset-bottom)) + 3.5rem);
	}
}

@media (min-width: 40em) {
	.eda-consent {
		right: auto;
		bottom: 1.5rem;
		left: 1.5rem;
		width: 26rem;
		padding: 1.5rem;
	}

	/* Reject and Accept share a row at equal width; Manage / Save below. */
	.eda-consent__actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.eda-consent__actions > :only-child,
	.eda-consent__manage,
	.eda-consent-panel [data-eds-consent-action="save"] {
		grid-column: 1 / -1;
	}

	.eda-consent-panel {
		padding: 2rem;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.vehicle-card:hover {
		transform: none;
	}

	.vehicle-gallery__slide,
	.vehicle-gallery__slide.is-active {
		transition: none;
	}

	/* No hero motion at all (not just a shorter one): the static image keeps its position. */
	.hero__image,
	.page-intro__backdrop-image {
		animation: none;
		transform: none;
	}
}