/*
Theme Name: Cor Olie Caravans
Theme URI: https://corolie.nl
Author: ISN
Description: Custom theme voor Cor Olie Caravans - verkoop van nieuwe en gebruikte campers en caravans, met eigen werkplaats.
Version: 2.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cor-olie
*/

/* =========================================================
   Design tokens
   ========================================================= */
:root {
	/* Merkblauw, rechtstreeks uit het logo (cor olie bv recreatie).
	   #4867bf haalt 5,29:1 op wit - voldoende voor tekst én witte knoptekst.
	   De donkere varianten zijn voor hover en actief. */
	--co-brand: #4867bf;
	--co-brand-dark: #3b56a4;
	--co-brand-darker: #30478a;
	--co-brand-tint: #eef1fb;
	--co-brand-rgb: 72, 103, 191;

	/* Bijna-neutrale grijzen. Hoe minder kleur in het grijs, hoe harder het
	   merkblauw aankomt op de plekken waar het er wel is. */
	--co-ink: #131313;
	--co-ink-2: #1f1f1f;
	--co-ink-3: #2e2e2e;
	--co-text: #454545;
	--co-muted: #6a6a6a;
	--co-line: #e4e4e4;
	--co-line-soft: #f0f0f0;
	--co-surface: #ffffff;
	--co-shell: #f5f5f5;

	/* Vlakke schaduwen. De vorm doet het werk, niet de diepte. */
	--co-shadow-sm: 0 1px 2px rgba(19, 19, 19, .04);
	--co-shadow: 0 2px 6px rgba(19, 19, 19, .05), 0 8px 24px rgba(19, 19, 19, .05);
	--co-shadow-lg: 0 12px 40px rgba(19, 19, 19, .12);
	--co-shadow-brand: none;

	/* Ruime afronding en pilvormige knoppen: de vormtaal die De Klerk en
	   Wittebrug gemeen hebben. Media-kaarten krijgen de grootste radius. */
	--co-r-sm: 10px;
	--co-r: 16px;
	--co-r-lg: 24px;
	--co-r-xl: 28px;
	--co-r-pill: 500px;

	--co-max: 1200px;
	--co-max-wide: 1460px;
	--co-gutter: 24px;

	/* Hoogte van de menubalk. Het zoekmenu boven de voorraad blijft er
	   tijdens het scrollen precies onder hangen. */
	--co-header-h: 84px;

	/* Bricolage Grotesque voor koppen (breed, eigenzinnig, niet generiek),
	   DM Sans voor lopende tekst. */
	--co-font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--co-font-head: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;

	/* Vaste stapelvolgorde i.p.v. willekeurige z-indexwaarden. */
	--z-base: 1;
	--z-sticky: 100;
	--z-nav: 200;
	--z-skip: 300;
	/* De vergrootweergave dekt de hele pagina af, dus die gaat er nog boven. */
	--z-overlay: 400;
}

/* =========================================================
   Basis
   ========================================================= */
* { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	/* Ankers niet onder de sticky header laten vallen. */
	scroll-padding-top: 108px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--co-surface);
	color: var(--co-text);
	font-family: var(--co-font);
	font-size: 1.0625rem;
	line-height: 1.7;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--co-font-head);
	color: var(--co-ink);
	line-height: 1.12;
	letter-spacing: -.02em;
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 4.4vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.65rem, 3vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--co-brand); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--co-brand-dark); }

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

/* Het hidden-attribuut wint van elke display-regel; het zoekmenu zet er
   kaarten mee buiten beeld. */
[hidden] { display: none !important; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }

/* Zichtbare focus voor toetsenbordgebruik - nooit weghalen. */
:focus-visible {
	outline: 3px solid var(--co-brand);
	outline-offset: 3px;
	border-radius: var(--co-r-sm);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: var(--z-skip);
	background: var(--co-ink);
	color: #fff;
	padding: 14px 22px;
	border-radius: 0 0 var(--co-r-sm) 0;
	font-weight: 700;
}
.skip-link:focus {
	left: 0;
	color: #fff;
}

.co-container {
	width: 100%;
	max-width: var(--co-max);
	margin: 0 auto;
	padding: 0 var(--co-gutter);
}

/* Cijfers in tabelvorm: prijzen en specs blijven netjes uitlijnen. */
.caravan-card__price,
.caravan-card__specs,
.caravan-buy__price,
.caravan-specs__row dd,
.site-footer__hours,
.topbar__contact { font-variant-numeric: tabular-nums; }

/* =========================================================
   Knoppen
   ========================================================= */
.co-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 14px 30px;
	border: 1px solid transparent;
	border-radius: var(--co-r-pill);
	font-family: var(--co-font-head);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease,
		transform .12s ease, box-shadow .2s ease;
}
.co-btn:active { transform: translateY(1px); }

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

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

.co-btn--ghost {
	background: var(--co-surface);
	border-color: var(--co-line);
	color: var(--co-ink);
}
.co-btn--ghost:hover {
	border-color: var(--co-brand);
	color: var(--co-brand);
}

.co-btn--solid {
	background: var(--co-ink);
	border-color: var(--co-ink);
	color: #fff;
}
.co-btn--solid:hover { background: var(--co-ink-2); border-color: var(--co-ink-2); color: #fff; }

/* Op donkere vlakken keert de outline-knop om. */
.inkoop .co-btn--outline,
.site-footer .co-btn--outline { color: #fff; }
.inkoop .co-btn--outline:hover,
.site-footer .co-btn--outline:hover { background: #fff; border-color: #fff; color: var(--co-ink); }

/* =========================================================
   Contactbalk
   ========================================================= */
.topbar {
	background: var(--co-shell);
	border-bottom: 1px solid var(--co-line);
	color: var(--co-muted);
	font-size: .85rem;
}
.topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 28px;
	min-height: 40px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.topbar__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.topbar__contact li,
.topbar__place {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.topbar svg { width: 15px; height: 15px; flex: none; color: var(--co-brand); }
.topbar a { color: var(--co-text); font-weight: 500; }
.topbar a:hover { color: var(--co-brand); }

/* =========================================================
   Taalwisselaar (Polylang) - uitklapmenu
   ========================================================= */
.lang-switch {
	position: relative;
	flex: none;
}

.lang-switch__toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 8px 5px 10px;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--co-r-sm);
	color: inherit;
	font-family: var(--co-font-head);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.lang-switch__chev {
	width: 14px;
	height: 14px;
	transition: transform .2s ease;
}
.lang-switch.is-open .lang-switch__chev { transform: rotate(180deg); }

.lang-switch__menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: var(--z-nav);
	min-width: 190px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--co-surface);
	border: 1px solid var(--co-line);
	border-radius: var(--co-r);
	box-shadow: var(--co-shadow-lg);
	/* Dicht: onzichtbaar én niet aanklikbaar, maar wel animeerbaar. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.lang-switch.is-open .lang-switch__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Onder .lang-switch__menu genest: anders wint `.topbar a` (witte tekst)
   van deze regel en verdwijnen de taalnamen op het witte paneel. */
.lang-switch__menu .lang-switch__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--co-r-sm);
	color: var(--co-ink);
	font-size: .93rem;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}
.lang-switch__menu .lang-switch__link:hover { background: var(--co-shell); color: var(--co-brand); }
.lang-switch__menu .lang-switch__link.is-current {
	background: var(--co-brand-tint);
	color: var(--co-brand-darker);
	font-weight: 700;
}

.lang-switch__code {
	min-width: 2.1em;
	font-family: var(--co-font-head);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--co-muted);
}
.lang-switch__menu .lang-switch__link.is-current .lang-switch__code { color: var(--co-brand); }
.lang-switch__toggle .lang-switch__code { min-width: 0; color: inherit; }

/* In de donkere contactbalk. */
.lang-switch--bar .lang-switch__toggle { color: rgba(255, 255, 255, .72); }
.lang-switch--bar .lang-switch__toggle:hover,
.lang-switch--bar.is-open .lang-switch__toggle {
	background: rgba(255, 255, 255, .1);
	color: #fff;
}

/* In het mobiele uitklapmenu - daar alleen zichtbaar. */
.lang-switch--nav { display: none; }
.lang-switch--nav .lang-switch__toggle {
	width: 100%;
	justify-content: space-between;
	padding: 10px 14px;
	border-color: var(--co-line);
	color: var(--co-ink);
}
.lang-switch--nav .lang-switch__toggle:hover { border-color: var(--co-brand); color: var(--co-brand); }
.lang-switch--nav .lang-switch__menu { left: 0; right: 0; }

.topbar__right {
	display: flex;
	align-items: center;
	gap: 8px 20px;
}

/* Alleen voor schermlezers. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================
   Header en navigatie
   ========================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	background: var(--co-surface);
	border-bottom: 1px solid var(--co-line);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 84px;
}

.site-logo {
	display: inline-flex;
	flex: none;
	transition: transform .18s ease;
}
.site-logo:hover { transform: scale(1.02); }
.site-logo img,
.custom-logo {
	height: 46px;
	width: auto;
	object-fit: contain;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: auto;
}
.site-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav__list a {
	display: block;
	position: relative;
	padding: 9px 12px;
	border-radius: var(--co-r-pill);
	color: var(--co-ink);
	font-family: var(--co-font-head);
	font-size: .93rem;
	font-weight: 500;
	white-space: nowrap;
	transition: color .2s ease, background-color .2s ease;
}
.site-nav__list a:hover { background: var(--co-shell); color: var(--co-ink); }
.site-nav__item.is-active > .site-nav__link {
	background: var(--co-brand-tint);
	color: var(--co-brand-darker);
	font-weight: 600;
}

.site-nav__cta {
	min-height: 46px;
	padding: 11px 18px;
	font-size: .92rem;
	white-space: nowrap;
	flex: none;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 0 11px;
	background: var(--co-surface);
	border: 1px solid var(--co-line);
	border-radius: var(--co-r-pill);
	cursor: pointer;
	transition: border-color .2s ease;
}
.nav-toggle:hover { border-color: var(--co-brand); }
.nav-toggle span {
	display: block;
	height: 2px;
	background: var(--co-ink);
	border-radius: 2px;
	transition: background-color .2s ease;
}
.nav-toggle:hover span { background: var(--co-brand); }

/* =========================================================
   Hero - beeld over de volle breedte, tekst onderin
   =========================================================
   De Klerk en Wittebrug laten de foto of video het werk doen: geen donker
   paneel over de halve breedte, maar een verloop dat alleen onderin donker
   wordt. De tekst hangt daar in, links uitgelijnd. */
.hero {
	position: relative;
	isolation: isolate;
	background: var(--co-ink);
	overflow: hidden;
}
.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
/* De YouTube-achtergrond: het kader is altijd 16:9, dus schalen we hem op
   tot hij de hero vult en snijden de rest weg. Niet aanklikbaar. */
.hero__yt {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.hero__yt iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100vw;
	height: 56.25vw;
	min-width: 177.78vh;
	min-height: 100%;
	border: 0;
}

.hero__media img,
.hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
	display: block;
}
/* De video ligt over de poster heen. */
.hero__video {
	position: absolute;
	inset: 0;
}

/* Pauzeknop voor de achtergrondvideo. Autoplay-beeld hoort te stoppen te
   zijn (WCAG 2.2.2), en wie beweging vermijdt begint hier gepauzeerd. */
.hero__toggle {
	position: absolute;
	right: max(var(--co-gutter), calc((100% - var(--co-max)) / 2 + var(--co-gutter)));
	/* Onder de promobalk; rechtsonder ligt nu de actiekaart. */
	top: 68px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: rgba(19, 19, 19, .45);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background-color .2s ease, border-color .2s ease;
}
.hero__toggle:hover { background: rgba(19, 19, 19, .7); border-color: #fff; }
.hero__toggle svg { width: 16px; height: 16px; }
.hero__toggle .icon-play { display: none; }
.hero__toggle.is-paused .icon-play { display: block; }
.hero__toggle.is-paused .icon-pause { display: none; }

/* Alleen onderin dekking opbouwen, plus een lichte hoedjesschaduw
   bovenaan zodat de menubalk leesbaar blijft. */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(19, 19, 19, .58) 0%, rgba(19, 19, 19, .14) 26%, rgba(19, 19, 19, 0) 46%),
		linear-gradient(0deg, rgba(19, 19, 19, .88) 0%, rgba(19, 19, 19, .62) 22%, rgba(19, 19, 19, .1) 58%, rgba(19, 19, 19, 0) 100%);
}

.hero__inner {
	position: relative;
	display: flex;
	min-height: min(80vh, 720px);
	padding-top: 120px;
	padding-bottom: 64px;
	align-items: flex-end;
}
.hero__panel { max-width: 46rem; }

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	color: rgba(255, 255, 255, .78);
	font-family: var(--co-font-head);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.hero__title {
	color: #fff;
	margin: 0 0 18px;
	font-size: clamp(2.3rem, 5.4vw, 4rem);
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1.03;
}
.hero__subtitle {
	max-width: 48ch;
	margin: 0 0 30px;
	color: rgba(255, 255, 255, .84);
	font-size: 1.1rem;
	line-height: 1.6;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 0;
}
.hero__actions .co-btn--outline {
	color: var(--co-ink);
	background: #fff;
	border-color: #fff;
}
.hero__actions .co-btn--outline:hover {
	background: rgba(255, 255, 255, .84);
	border-color: rgba(255, 255, 255, .84);
	color: var(--co-ink);
}

/* De pluspunten staan niet meer in de hero maar als eigen strook eronder:
   rustiger beeld, en ze blijven leesbaar los van de foto. */
.hero__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.hero__trust li {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--co-ink);
	font-family: var(--co-font-head);
	font-size: .95rem;
	font-weight: 500;
}
.hero__trust-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: none;
	background: var(--co-brand);
	border-radius: 50%;
	color: #fff;
}
.hero__trust-check svg { width: 12px; height: 12px; }

/* De strook zelf. */
.trustbar {
	border-bottom: 1px solid var(--co-line);
	background: var(--co-surface);
}
.trustbar__inner { padding-top: 18px; padding-bottom: 18px; }

/* =========================================================
   Sectiekoppen
   ========================================================= */
.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 40px;
	margin-bottom: 44px;
}
.section-head--center {
	justify-content: center;
	text-align: center;
}
.section-head > div { max-width: 640px; }
.section-head h2 {
	margin-bottom: 0;
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -.03em;
}

.section-eyebrow {
	display: block;
	margin: 0 0 10px;
	color: var(--co-brand);
	font-family: var(--co-font-head);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.section-eyebrow--light { color: #fff; opacity: .7; }
.section-title--light { color: #fff; }

/* =========================================================
   Actiekaarten - kleine stapel over de video
   =========================================================
   Rechtsonder in de hero ligt een klein kaartje met een beursactie of
   aanbieding. Er is er telkens een zichtbaar; ze wisselen automatisch, met
   bolletjes eronder om zelf te kiezen. */
.hero__promos {
	position: absolute;
	/* Uitlijnen op de container van 1200px, niet op de rand van het scherm. */
	right: max(var(--co-gutter), calc((100% - var(--co-max)) / 2 + var(--co-gutter)));
	bottom: 34px;
	z-index: 3;
	width: min(23rem, calc(100% - var(--co-gutter) * 2));
}

.promos__stack {
	position: relative;
	/* De kaarten liggen op elkaar, dus de hoogte staat vast. */
	height: 104px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.promo-card {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .5s ease, transform .5s ease, visibility .5s;
}
.promo-card.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.promo-card__link {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 10px 14px 10px 10px;
	background: rgba(19, 19, 19, .58);
	border: 1px solid rgba(255, 255, 255, .2);
	color: #fff;
	backdrop-filter: blur(10px);
	transition: background-color .22s ease, border-color .22s ease;
}
a.promo-card__link:hover {
	background: rgba(19, 19, 19, .76);
	border-color: rgba(255, 255, 255, .42);
	color: #fff;
}

.promo-card__media {
	flex: none;
	width: 78px;
	height: 100%;
	overflow: hidden;
	background: rgba(255, 255, 255, .1);
}
.promo-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.promo-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.promo-card__label {
	font-family: var(--co-font-head);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}
.promo-card__title {
	font-family: var(--co-font-head);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -.01em;
	/* Nooit meer dan twee regels, anders loopt de kaart uit zijn hoogte. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.promo-card__go {
	flex: none;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 50%;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.promo-card__go svg { width: 15px; height: 15px; }
a.promo-card__link:hover .promo-card__go {
	background: #fff;
	color: var(--co-ink);
	transform: translateX(2px);
}

/* Bolletjes onder de stapel. */
.promos__dots {
	display: flex;
	justify-content: flex-end;
	gap: 7px;
	margin-top: 12px;
}
.promos__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	background: rgba(255, 255, 255, .4);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.promos__dot:hover { background: rgba(255, 255, 255, .7); }
.promos__dot.is-active { background: #fff; transform: scale(1.3); }

/* =========================================================
   Hoofdblokken - categoriekaarten met titel over het beeld
   ========================================================= */
.hoofdblokken { padding: 56px 0 72px; }
.hoofdblokken__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hoofdblok { display: flex; }
.hoofdblok__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: var(--co-ink);
}

.hoofdblok__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--co-shell);
}
.hoofdblok__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}
.hoofdblok__link:hover .hoofdblok__media img { transform: scale(1.04); }

/* Verloop onderin, zodat de titel op elk beeld leesbaar is. */
.hoofdblok__overlay {
	position: absolute;
	inset: auto 0 0 0;
	display: block;
	padding: 60px 22px 20px;
	background: linear-gradient(0deg, rgba(19, 19, 19, .82) 0%, rgba(19, 19, 19, .34) 55%, rgba(19, 19, 19, 0) 100%);
}
.hoofdblok__title {
	display: block;
	color: #fff;
	font-family: var(--co-font-head);
	font-size: 1.55rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.1;
}

/* Merklogo's op witte pillen, zoals de merkkaarten van De Klerk. */
.hoofdblok__logos {
	position: absolute;
	top: 16px;
	left: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	z-index: 1;
}
.hoofdblok__logos img {
	width: 92px;
	height: 24px;
	padding: 8px 14px;
	background: #fff;
	border-radius: var(--co-r-pill);
	object-fit: contain;
	box-sizing: content-box;
}

.hoofdblok__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 14px;
	padding: 18px 4px 0;
}
.hoofdblok__text { display: block; color: var(--co-text); font-size: 1rem; }
.hoofdblok__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	color: var(--co-brand);
	font-family: var(--co-font-head);
	font-weight: 600;
	font-size: .98rem;
}
.hoofdblok__cta svg { width: 18px; height: 18px; transition: transform .2s ease; }
.hoofdblok__link:hover .hoofdblok__cta svg { transform: translateX(4px); }

/* =========================================================
   Voorraad
   ========================================================= */
.voorraad { padding: 84px 0 90px; background: var(--co-shell); }

.caravan-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 26px 22px;
}

/* De Greeff zet de prijs groot en de staat als chip erboven. De kaart zelf
   is randloos: het beeld staat los, de tekst eronder op de pagina. */
.caravan-card {
	display: flex;
	flex-direction: column;
	background: transparent;
	color: inherit;
}
.caravan-card:hover { color: inherit; }

.caravan-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--co-line-soft);
	overflow: hidden;
}
.caravan-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}
.caravan-card:hover .caravan-card__media img { transform: scale(1.04); }

.caravan-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 7px 14px;
	background: #fff;
	color: var(--co-ink);
	font-family: var(--co-font-head);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: 0;
}
.caravan-card__badge--sold { background: var(--co-ink); color: #fff; }
.caravan-card__badge--new { background: var(--co-brand); color: #fff; }
/* Onderweg of vergeven: neutraal donker, niet het merkblauw. */
.caravan-card__badge--expected { background: var(--co-ink-3); color: #fff; }

.caravan-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px 2px 0;
}
.caravan-card__title {
	font-size: 1.18rem;
	font-weight: 600;
	margin: 0 0 10px;
	line-height: 1.25;
	letter-spacing: -.015em;
}

/* Specs als nuchtere opsomming met scheidingsstreepjes, geen chips:
   dat houdt de kaart rustig nu de prijs de aandacht moet trekken. */
.caravan-card__specs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	color: var(--co-muted);
	font-size: .92rem;
}
.caravan-card__specs li { display: flex; align-items: center; gap: 10px; }
.caravan-card__specs li + li::before {
	content: "";
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: .6;
}

.caravan-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: auto;
	padding-top: 0;
	border-top: 0;
}
.caravan-card__price {
	margin: 0;
	font-family: var(--co-font-head);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--co-ink);
	letter-spacing: -.03em;
}
.caravan-card__go {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 18px;
	border: 1px solid var(--co-line);
	border-radius: var(--co-r-pill);
	color: var(--co-ink);
	font-family: var(--co-font-head);
	font-weight: 600;
	font-size: .92rem;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.caravan-card__go svg { width: 16px; height: 16px; transition: transform .2s ease; }
.caravan-card:hover .caravan-card__go {
	background: var(--co-brand);
	border-color: var(--co-brand);
	color: #fff;
}
.caravan-card:hover .caravan-card__go svg { transform: translateX(3px); }

/* Lege staat: geen kale zin, maar een blok dat naar contact leidt. */
.voorraad-empty {
	max-width: 620px;
	margin: 0 auto;
	padding: 54px 34px;
	background: var(--co-surface);
	border: 1px dashed var(--co-line);
	box-shadow: var(--co-shadow-sm);
	text-align: center;
}
.voorraad-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	margin-bottom: 20px;
	background: var(--co-brand-tint);
	border-radius: 50%;
	color: var(--co-brand);
}
.voorraad-empty__icon svg { width: 34px; height: 34px; }
.voorraad-empty__title { font-size: 1.4rem; margin: 0 0 12px; }
.voorraad-empty__text {
	max-width: 46ch;
	margin: 0 auto 26px;
	color: var(--co-muted);
}
.voorraad-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.voorraad-usps,
.aanbod-usps__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 22px 30px;
	list-style: none;
	margin: 56px 0 0;
	padding: 34px 0 0;
	border-top: 1px solid var(--co-line);
}
.voorraad-usp,
.aanbod-usp {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.voorraad-usp__icon,
.aanbod-usp__icon {
	width: 24px;
	height: 24px;
	flex: none;
	margin-top: 3px;
	padding: 4px;
	background: var(--co-brand);
	border-radius: 50%;
	color: #fff;
}
.voorraad-usp h3,
.aanbod-usp h3 { font-size: 1rem; margin: 0 0 4px; }
.voorraad-usp p,
.aanbod-usp p { margin: 0; font-size: .93rem; color: var(--co-muted); }

/* =========================================================
   Merken
   ========================================================= */
.merken {
	padding: 46px 0;
	background: var(--co-surface);
	border-bottom: 1px solid var(--co-line);
}
.merken__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 42px;
}
.merken__title {
	flex: none;
	max-width: 210px;
	margin: 0;
	font-size: .92rem;
	font-weight: 700;
	color: var(--co-muted);
	letter-spacing: .04em;
	line-height: 1.45;
	text-transform: none;
}
.merken__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.merken__list li {
	padding: 8px 16px;
	background: var(--co-shell);
	border-radius: var(--co-r-sm);
	color: var(--co-ink-3);
	font-family: var(--co-font-head);
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .01em;
	transition: background-color .2s ease, color .2s ease;
}
.merken__list li:hover { background: var(--co-brand-tint); color: var(--co-brand-dark); }

/* =========================================================
   Werkwijze
   ========================================================= */
.werkwijze { padding: 88px 0; background: var(--co-surface); }
.werkwijze__grid {
	display: grid;
	/* Smal genoeg dat vijf stappen op één rij passen - geen losse stap 05. */
	grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
	gap: 34px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}
.werkwijze-step { position: relative; padding-top: 8px; }
.werkwijze-step__num {
	display: block;
	margin-bottom: 12px;
	font-family: var(--co-font-head);
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	/* Contourcijfer: aanwezig maar niet luid. */
	color: transparent;
	-webkit-text-stroke: 1.5px var(--co-brand);
	transition: color .25s ease;
}
.werkwijze-step:hover .werkwijze-step__num { color: var(--co-brand); }
.werkwijze-step__title { font-size: 1.1rem; margin: 0 0 8px; }
.werkwijze-step__text { margin: 0; font-size: .95rem; color: var(--co-muted); }

/* =========================================================
   Over ons - tekst naast twee verspringende foto's
   =========================================================
   Tekst links, rechts twee staande foto's die ten opzichte van elkaar
   verspringen: de tweede staat hoger. Rechte hoeken, en een zachte schaduw
   zodat de foto's van het grijze vlak af komen. */
.over { padding: 92px 0; background: var(--co-shell); }

.over__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: center;
	gap: 64px;
}

.over__body { max-width: 40rem; }
.over__title {
	margin: 0 0 18px;
	font-size: clamp(1.9rem, 3.2vw, 2.7rem);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.1;
}
.over__quote {
	margin: 0 0 30px;
	max-width: 46ch;
	color: var(--co-text);
	font-size: 1.08rem;
	line-height: 1.75;
}
.over__cta svg { width: 18px; height: 18px; transition: transform .2s ease; }
.over__cta:hover svg { transform: translateX(4px); }

/* De twee foto's. */
.over__photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start;
}
.over__photo {
	margin: 0;
	overflow: hidden;
	background: var(--co-line-soft);
	box-shadow: 0 16px 40px rgba(19, 19, 19, .16);
}
.over__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
/* De eerste zakt, de tweede blijft staan: samen het verspringende effect. */
.over__photo--a { margin-top: clamp(28px, 4.4vw, 64px); }
.over__photo--b { margin-bottom: clamp(28px, 4.4vw, 64px); }

/* Is er maar een foto ingesteld, dan vult die de hele kolom. */
.over__photos--single { grid-template-columns: 1fr; }
.over__photos--single .over__photo { margin: 0; }
.over__photos--single .over__photo img { aspect-ratio: 5 / 4; }

/* Kerncijfers onder het geheel. */
.over__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: clamp(48px, 5vw, 72px) 0 0;
	padding: 0;
	list-style: none;
}

.stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 148px;
	padding: 26px;
	background: var(--co-surface);
}
.stat__value {
	font-family: var(--co-font-head);
	font-size: clamp(2.1rem, 3.4vw, 2.9rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.04em;
	color: var(--co-ink);
}
.stat__label {
	margin-top: auto;
	color: var(--co-muted);
	font-size: .95rem;
}

/* De laatste kaart is gekleurd en leidt door. */
.stat--cta {
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	background: var(--co-brand);
}
.stat__heading {
	font-family: var(--co-font-head);
	font-size: 1.22rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: #fff;
}
.stat__go {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	color: #fff;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.stat__go svg { width: 19px; height: 19px; }
.stat--cta:hover .stat__go {
	background: #fff;
	color: var(--co-brand);
	transform: translateX(3px);
}

/* =========================================================
   Inkoop - donkere conversieband (rijmt met de footer)
   ========================================================= */
.inkoop {
	padding: 88px 0;
	background: var(--co-ink);
	color: rgba(255, 255, 255, .78);
}
.inkoop__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}
.inkoop__lead { max-width: 50ch; margin: 0 0 26px; }
.inkoop__points {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: grid;
	gap: 12px;
}
.inkoop__points li {
	position: relative;
	padding-left: 30px;
	color: rgba(255, 255, 255, .88);
	font-weight: 500;
}
.inkoop__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .46em;
	width: 16px;
	height: 16px;
	background: var(--co-brand);
	border-radius: 50%;
	box-shadow: inset 0 0 0 3px var(--co-ink);
}
.inkoop__call { margin: 0; font-size: 1rem; }
.inkoop__call a {
	color: #fff;
	font-family: var(--co-font-head);
	font-weight: 700;
	border-bottom: 2px solid var(--co-brand);
}
.inkoop__call a:hover { color: var(--co-brand); }

.inkoop__card {
	padding: 34px 32px;
	background: var(--co-surface);
	border-radius: var(--co-r-lg);
	box-shadow: var(--co-shadow-lg);
	color: var(--co-text);
}

/* =========================================================
   Contact - kaart naast de gegevens
   =========================================================
   Waterland zet adres, telefoon en openingstijden gewoon als tekst neer en
   De Klerk toont de openingstijden als lijst. Dat werkt beter dan drie
   kaartjes met icoontjes: wie langskomt wil weten waar en wanneer. */
.contact { padding: 72px var(--co-gutter) 92px; }

/* Zelfde opzet als de merkblokken: het grijze vlak is de onderlaag en de
   kaart ligt er los bovenop, rechts eruit. Rechte hoeken. */
.contact__inner {
	position: relative;
	padding-left: 0;
	padding-right: 0;
}

/* Het vlak loopt van de linkerrand tot een stuk voor de rechterrand, zodat
   de kaart ervoor kan uitsteken. De rechterpadding houdt de tekst vrij. */
.contact__panel {
	display: flex;
	flex-direction: column;
	min-height: clamp(340px, 34vw, 460px);
	margin-right: 13%;
	padding: clamp(40px, 4vw, 60px) clamp(30px, 3.4vw, 52px);
	padding-right: calc(30% + clamp(28px, 3vw, 52px));
	background: var(--co-shell);
}
.contact__title {
	margin: 0 0 12px;
	font-size: clamp(1.7rem, 2.8vw, 2.3rem);
	font-weight: 700;
	letter-spacing: -.03em;
}
.contact__text {
	margin: 0 0 32px;
	max-width: 46ch;
	color: var(--co-text);
}

.contact__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 32px;
	margin-bottom: 32px;
}

.contact__label {
	margin: 0 0 8px;
	font-family: var(--co-font-head);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--co-muted);
}
.contact__col > .contact__label + * { margin-top: 0; }
.contact__col > * + .contact__label { margin-top: 22px; }

.contact__address {
	margin: 0;
	color: var(--co-ink);
	font-size: 1.05rem;
	line-height: 1.5;
}

.contact__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}
.contact__links a {
	color: var(--co-ink);
	font-family: var(--co-font-head);
	font-size: 1.05rem;
	font-weight: 600;
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.contact__links a:hover { color: var(--co-brand); border-bottom-color: currentColor; }

/* Openingstijden als nette twee-koloms lijst, zoals bij De Klerk. */
.contact__hours { margin: 0; }
.contact__hours > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 5px 0;
	border-bottom: 1px solid var(--co-line);
	font-size: .95rem;
}
.contact__hours > div:last-child { border-bottom: 0; }
.contact__hours dt { color: var(--co-text); }
.contact__hours dd {
	margin: 0;
	color: var(--co-ink);
	font-variant-numeric: tabular-nums;
}

.contact__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: auto;
}

/* De kaart: rechts uitgelijnd, over het vlak heen, boven en onder
   ingesprongen zodat het vlak eromheen doorloopt. */
.contact__map {
	position: absolute;
	right: 0;
	top: clamp(28px, 3.4vw, 48px);
	bottom: clamp(28px, 3.4vw, 48px);
	z-index: 2;
	width: 40%;
	background: var(--co-line-soft);
	box-shadow: 0 18px 48px rgba(19, 19, 19, .22);
}
.contact__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	/* De OSM-tegels zijn fel; iets temperen zodat ze bij de pagina passen. */
	filter: saturate(.85);
}

/* =========================================================
   Hulpblok "niet gevonden wat u zocht"
   ========================================================= */
.aanbod-help { padding: 0 0 88px; background: var(--co-shell); }
.aanbod-help__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	padding: 36px 38px;
	background: var(--co-surface);
	box-shadow: var(--co-shadow-sm);
}
.aanbod-help__inner h2 { font-size: 1.5rem; margin: 0 0 8px; }
.aanbod-help__inner p { margin: 0; color: var(--co-muted); max-width: 60ch; }
.aanbod-help__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* =========================================================
   Verhuur - intro boven het raster met verhuurcampers
   ========================================================= */

/* De intro loopt hier over de volle breedte, anders dan de smalle kolom die
   .entry-content elders aanhoudt, en houdt ruim afstand tot de kaarten. */




/* =========================================================
   Werkplaats - subpagina's met snelnavigatie
   ========================================================= */
.werkplaats-sub { padding: 64px 0 90px; background: var(--co-shell); }
.werkplaats-sub__inner {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 34px 48px;
	align-items: start;
}

/* De snelnavigatie blijft meelopen tijdens het scrollen. */
.werkplaats-sub__aside { position: sticky; top: 104px; }

.werkplaats-sub__body {
	padding: 40px 44px;
	background: var(--co-surface);
	box-shadow: var(--co-shadow-sm);
}
.werkplaats-sub__body > :first-child { margin-top: 0; }
.werkplaats-sub__body .entry-content { max-width: none; }
.werkplaats-sub__featured { margin: 0 0 28px; }
.werkplaats-sub__featured img { width: 100%; height: auto; border-radius: var(--co-r); }

.subnav {
	padding: 24px 22px;
	background: var(--co-surface);
	box-shadow: var(--co-shadow-sm);
}
.subnav__title {
	margin: 0 0 14px;
	font-size: .82rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--co-muted);
}
.subnav__list { margin: 0; padding: 0; list-style: none; }
.subnav__item + .subnav__item { border-top: 1px solid var(--co-line-soft); }

.subnav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0;
	color: var(--co-text);
	font-size: .95rem;
	line-height: 1.35;
	transition: color .18s ease;
}
.subnav__link svg {
	flex: none;
	width: 15px;
	height: 15px;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .18s ease, transform .18s ease;
}
.subnav__link:hover { color: var(--co-brand); }
.subnav__link:hover svg { opacity: 1; transform: translateX(0); }

/* Merken onder Voortenten springen in, zodat de rangorde zichtbaar blijft. */
.subnav__item.is-nested .subnav__link {
	padding-left: 14px;
	font-size: .9rem;
	color: var(--co-muted);
}
.subnav__item.is-nested .subnav__link:hover { color: var(--co-brand); }

.subnav__item.is-active .subnav__link { color: var(--co-brand); font-weight: 600; }
.subnav__item.is-active .subnav__link svg { opacity: 1; transform: translateX(0); }

.subnav-cta {
	margin-top: 22px;
	padding: 24px 22px;
	background: var(--co-surface);
	box-shadow: var(--co-shadow-sm);
}
.subnav-cta__title { margin: 0 0 8px; font-size: 1.1rem; }
.subnav-cta__text { margin: 0 0 16px; font-size: .92rem; color: var(--co-muted); }
.subnav-cta .co-btn { width: 100%; justify-content: center; }
.subnav-cta .co-btn + .co-btn { margin-top: 10px; }

/* Afspraakknop onder de tekst van een werkplaatsdienst. */
.dienst-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 28px;
	margin-top: 36px;
	padding: 26px 28px;
	background: var(--co-shell);
	border-left: 4px solid var(--co-brand);
	border-radius: var(--co-r);
}
.dienst-cta > :first-child { flex: 1 1 280px; min-width: 0; }
.dienst-cta__title { margin: 0 0 6px; font-size: 1.2rem; }
.dienst-cta__text { margin: 0; font-size: .95rem; color: var(--co-muted); }

/* De afspraakpagina: dienst boven het formulier. */
.afspraak-form__dienst {
	margin: 0 0 24px;
	padding: 14px 18px;
	background: var(--co-shell);
	border-radius: var(--co-r);
	font-weight: 600;
	color: var(--co-ink);
}
.afspraak-form__dienst a { color: var(--co-brand); }

.werkplaats-intro__actions { margin: 24px 0 0; }

/* De snelnavigatie op de werkplaatspagina zelf, in de volle breedte. */
.werkplaats-quicknav { padding: 0 0 76px; background: var(--co-shell); }
.werkplaats-quicknav .subnav { padding: 30px 32px; }
.werkplaats-quicknav .subnav__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 0 34px;
}
.werkplaats-quicknav .subnav__item:first-child { display: none; }

/* =========================================================
   Contactpagina - gegevens, formulier en kaart
   ========================================================= */
.contact-page { padding: 64px 0 80px; background: var(--co-shell); }
.contact-page__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: 32px 44px;
	align-items: start;
}

.contact-page__intro { margin: 0 0 28px; max-width: 62ch; }
.contact-page__intro > :first-child { margin-top: 0; }
.contact-page__intro > :last-child { margin-bottom: 0; }

.contact-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
.contact-card {
	display: flex;
	gap: 16px;
	padding: 26px 24px;
	background: var(--co-surface);
	box-shadow: var(--co-shadow-sm);
}
.contact-card--wide { grid-column: 1 / -1; }

.contact-card__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: var(--co-brand-tint);
	border-radius: var(--co-r-sm);
	color: var(--co-brand);
}
.contact-card__icon svg { width: 22px; height: 22px; }

.contact-card__title {
	margin: 0 0 8px;
	font-size: 1.05rem;
	letter-spacing: -.01em;
}
.contact-card__text { margin: 0; color: var(--co-text); line-height: 1.55; }

.contact-card__list { margin: 0; padding: 0; list-style: none; }
.contact-card__list li + li { margin-top: 4px; }
.contact-card__list a { color: var(--co-text); }
.contact-card__list a:hover { color: var(--co-brand); }

.contact-card__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
	color: var(--co-brand);
	font-weight: 600;
	font-size: .94rem;
}
.contact-card__link svg { width: 15px; height: 15px; transition: transform .2s ease; }
.contact-card__link:hover svg { transform: translateX(3px); }

.contact-card__hours {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2px 32px;
	margin: 0;
}
.contact-card__hours > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 6px 0;
	border-bottom: 1px solid var(--co-line-soft);
}
.contact-card__hours dt { color: var(--co-muted); font-size: .94rem; }
.contact-card__hours dd { margin: 0; font-weight: 600; font-size: .94rem; }
.contact-card__note { margin: 14px 0 0; font-size: .88rem; color: var(--co-muted); }

.contact-page__form {
	position: sticky;
	top: 104px;
	padding: 32px 30px;
	background: var(--co-surface);
	box-shadow: var(--co-shadow-sm);
}
.contact-page__form-title { margin: 0 0 8px; font-size: 1.4rem; }
.contact-page__form-text { margin: 0 0 22px; color: var(--co-muted); font-size: .94rem; }

/* De kaart loopt over de volle breedte onder de pagina door. */
.contact-map { line-height: 0; background: var(--co-shell); }
.contact-map iframe {
	display: block;
	width: 100%;
	height: 440px;
	border: 0;
	filter: grayscale(.15);
}

/* =========================================================
   Vacatures
   ========================================================= */
.vacatures { padding: 64px 0 90px; background: var(--co-shell); }
.vacatures__intro { margin: 0 0 44px; max-width: none; }
.vacatures__intro > :first-child { margin-top: 0; }
.vacatures__intro > :last-child { margin-bottom: 0; }

.vacature-list { margin: 0 0 56px; padding: 0; list-style: none; display: grid; gap: 14px; }

.vacature-item__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 28px 30px;
	background: var(--co-surface);
	box-shadow: var(--co-shadow-sm);
	color: inherit;
	transition: box-shadow .2s ease, transform .18s ease;
}
.vacature-item__link:hover {
	color: inherit;
	box-shadow: var(--co-shadow);
	transform: translateY(-2px);
}

.vacature-item__title {
	margin: 0 0 8px;
	font-size: 1.25rem;
	letter-spacing: -.01em;
}
.vacature-item__link:hover .vacature-item__title { color: var(--co-brand); }
.vacature-item__lead { margin: 0; color: var(--co-muted); max-width: 64ch; }

.vacature-item__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.vacature-item__tags li {
	padding: 4px 12px;
	background: var(--co-brand-tint);
	border-radius: var(--co-r-pill);
	color: var(--co-brand-darker);
	font-size: .82rem;
	font-weight: 600;
}

.vacature-item__go {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--co-brand);
	font-weight: 600;
	font-size: .94rem;
}
.vacature-item__go svg { width: 16px; height: 16px; transition: transform .2s ease; }
.vacature-item__link:hover .vacature-item__go svg { transform: translateX(3px); }

/* Op de vacaturepagina staat de tekst links en de samenvatting rechts. */
.werkplaats-sub__inner--reverse { grid-template-columns: minmax(0, 1fr) 300px; }
.werkplaats-sub__inner--reverse .werkplaats-sub__aside { order: 2; }
.werkplaats-sub__inner--reverse .werkplaats-sub__body { order: 1; }

.vacature-specs { margin: 0; }
.vacature-specs > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
}
.vacature-specs > div + div { border-top: 1px solid var(--co-line-soft); }
.vacature-specs dt { color: var(--co-muted); font-size: .9rem; }
.vacature-specs dd { margin: 0; font-weight: 600; font-size: .92rem; text-align: right; }

.vacature-poster { margin: 36px 0 0; }
.vacature-poster img { width: 100%; height: auto; border-radius: var(--co-r); }

/* =========================================================
   Formulieren (Contact Form 7)
   ========================================================= */
.co-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 18px;
}
.co-field { display: flex; flex-direction: column; gap: 7px; }
.co-field--full { grid-column: 1 / -1; }

.wpcf7-form label,
.co-field > label {
	font-family: var(--co-font-head);
	font-size: .9rem;
	font-weight: 600;
	color: var(--co-ink);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	padding: 12px 14px;
	background: var(--co-surface);
	border: 1px solid var(--co-line);
	border-radius: var(--co-r-sm);
	color: var(--co-ink);
	font-family: var(--co-font);
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.wpcf7-form textarea { min-height: 130px; resize: vertical; }

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--co-brand);
	box-shadow: 0 0 0 3px rgba(var(--co-brand-rgb), .16);
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: var(--co-muted); opacity: 1; }

.wpcf7-form input[type="submit"] {
	width: auto;
	padding: 14px 30px;
	background: var(--co-brand);
	border: 2px solid var(--co-brand);
	border-radius: var(--co-r-sm);
	color: #fff;
	font-family: var(--co-font-head);
	font-size: .98rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: var(--co-shadow-brand);
	transition: background-color .2s ease, border-color .2s ease, transform .12s ease;
}
.wpcf7-form input[type="submit"]:hover { background: var(--co-brand-dark); border-color: var(--co-brand-dark); }
.wpcf7-form input[type="submit"]:active { transform: translateY(1px); }

/* Radio- en checkboxgroepen horizontaal. */
.wpcf7-form .wpcf7-radio,
.wpcf7-form .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}
.wpcf7-form .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	cursor: pointer;
}

/* Afspraakformulier: blokken met een kop, zoals op papier. */
.co-form--afspraak .co-form__grid { gap: 14px 16px; }
.co-form--afspraak p { margin: 0; }

/* Contact Form 7 zet een <br> na elk label. In een flex- of gridvak telt
   die als los item en krijgt hij een eigen tussenruimte; zo ontstond een
   gat tussen label en veld. */
.co-form--afspraak br { display: none; }
.co-form--afspraak .co-field { gap: 6px; }

.co-form__group {
	margin: 0 0 22px;
	padding: 0 0 22px;
	border: 0;
	border-bottom: 1px solid var(--co-line-soft);
	min-width: 0;
}
.co-form__group legend {
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--co-font-head);
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--co-ink);
}
.co-form__hint { margin: -4px 0 10px; color: var(--co-muted); font-size: .92rem; }

/* Keuzelijsten onder elkaar; de diensten in twee kolommen. */
.co-form__choices .wpcf7-checkbox { flex-direction: column; gap: 8px; }
.co-form__choices [data-name="diensten"] .wpcf7-checkbox {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 18px;
}
.co-form__choices .wpcf7-list-item label { align-items: flex-start; line-height: 1.45; }
.co-form__choices input[type="checkbox"] { margin-top: 3px; flex: none; }
.co-form--afspraak textarea { min-height: 110px; }
.co-form--afspraak input[type="submit"] { margin-top: 4px; }

@media (max-width: 640px) {
	.co-form__choices [data-name="diensten"] .wpcf7-checkbox { grid-template-columns: 1fr; }
}

/* Kenteken als Nederlandse kentekenplaat. */
.co-field--kenteken .wpcf7-form-control-wrap { display: block; max-width: 260px; }
.wpcf7-form .co-field--kenteken input[type="text"] {
	padding: 10px 14px 10px 50px;
	background: #f7c600 linear-gradient(90deg, #003399 0 36px, transparent 36px);
	border: 2px solid #131313;
	color: #131313;
	font-family: var(--co-font-head);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.wpcf7-form .co-field--kenteken input[type="text"]::placeholder { color: rgba(19, 19, 19, .45); }
.co-field--kenteken .wpcf7-form-control-wrap { position: relative; }
.co-field--kenteken .wpcf7-form-control-wrap::before {
	content: "NL";
	position: absolute;
	left: 2px;
	top: 19px;
	width: 36px;
	text-align: center;
	color: #fff;
	font-family: var(--co-font-head);
	font-size: .72rem;
	font-weight: 700;
	pointer-events: none;
}

/* Validatie- en statusmeldingen. */
.wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 16px;
	border-width: 1px;
	border-radius: var(--co-r-sm);
	font-size: .95rem;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	background: var(--co-brand-tint);
	border-color: rgba(var(--co-brand-rgb), .4);
	color: var(--co-brand-darker);
}
.wpcf7 form.sent .wpcf7-response-output {
	background: #edf7ef;
	border-color: #b7ddc0;
	color: #1f6b32;
}
.wpcf7-not-valid-tip {
	color: var(--co-brand-dark);
	font-size: .88rem;
	font-weight: 500;
}
.wpcf7-form .wpcf7-not-valid { border-color: var(--co-brand); }

/* Terugval wanneer er geen formulier bestaat. */
.form-fallback__text { margin: 0 0 18px; color: var(--co-text); }
.form-fallback__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
	background: var(--co-ink);
	color: rgba(255, 255, 255, .72);
	font-size: .97rem;
}
/* Flex i.p.v. grid: de kolommen verdelen de ruimte ongeacht of het
   openingstijdenblok wel of niet is ingevuld. */
.site-footer__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 48px;
	padding-top: 72px;
	padding-bottom: 60px;
}
.site-footer__col { flex: 1 1 170px; min-width: 0; }
.site-footer__brand { flex: 1 1 300px; max-width: 400px; }
.site-footer a { color: rgba(255, 255, 255, .82); }
.site-footer a:hover { color: #fff; }

.site-footer__heading {
	margin: 0 0 16px;
	color: #fff;
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Het logo is zelf al wit, dus geen witte pil eronder: dat maakte hem
   onzichtbaar op de donkere footer. */
.site-footer__logo {
	width: 190px;
	height: auto;
	margin-bottom: 22px;
}
.site-footer__about { max-width: 40ch; margin: 0 0 20px; line-height: 1.7; }

/* De merk- en keurmerklogo's staan op een lichte tegel: ze zijn donker
   aangeleverd en zouden op de zwarte footer wegvallen. */
.site-footer__partners {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	max-width: 320px;
}
.site-footer__partner {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 16px;
	background: #fff;
	border-radius: var(--co-r-sm);
}
.site-footer__partner a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.site-footer__partner img {
	width: auto;
	max-width: 100%;
	max-height: 34px;
	object-fit: contain;
}

.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
}
.site-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, .08);
	border-radius: var(--co-r-sm);
	color: #fff;
	transition: background-color .2s ease, transform .18s ease;
}
.site-footer__social a:hover { background: var(--co-brand); transform: translateY(-2px); }
.site-footer__social svg { width: 19px; height: 19px; fill: currentColor; }

.site-footer__menu,
.site-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.site-footer__contact li { line-height: 1.6; }

.site-footer__hours { margin: 0; display: grid; gap: 8px; }
.site-footer__hours > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}
.site-footer__hours dt { margin: 0; }
.site-footer__hours dd { margin: 0; color: #fff; font-weight: 500; }
.site-footer__hours-note {
	margin: 16px 0 0;
	font-size: .88rem;
	color: rgba(255, 255, 255, .55);
}

.site-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-size: .9rem;
}
.site-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
	padding-top: 22px;
	padding-bottom: 22px;
}
.site-footer__bar p { margin: 0; }

.site-footer__downloads,
.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-footer__downloads a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.site-footer__downloads svg { width: 16px; height: 16px; }

/* =========================================================
   Paginakop (subpagina's)
   ========================================================= */
.page-hero {
	padding: 48px 0 40px;
	background: var(--co-surface);
	border-bottom: 1px solid var(--co-line);
	color: var(--co-text);
}
.page-hero__crumbs {
	margin: 0 0 14px;
	font-size: .86rem;
	color: var(--co-muted);
}
.page-hero__crumbs a { color: var(--co-muted); }
.page-hero__crumbs a:hover { color: var(--co-brand); }
.page-hero__title {
	color: var(--co-ink);
	margin: 0 0 12px;
	font-size: clamp(2rem, 4vw, 3rem);
	letter-spacing: -.03em;
}
.page-hero__lead { max-width: 62ch; margin: 0; font-size: 1.08rem; color: var(--co-text); }
.page-hero__meta { margin: 14px 0 0; font-size: .9rem; color: var(--co-muted); }

/* Pagina's die hun tekst in de hero zetten in plaats van in een eigen blok. */
.page-hero__text { margin: 18px 0 0; }

/* Met --breed loopt de tekst over de volle breedte van de container. */
.page-hero--breed .page-hero__lead,
.page-hero--breed .page-hero__text,
.page-hero--breed .page-hero__text > * { max-width: none; }

/* Ingekort tot vijf regels. De klasse komt van het script, zodat de tekst
   zonder JavaScript volledig blijft staan. */
.is-ingekort {
	position: relative;
	max-height: 8.5em;
	overflow: hidden;
}
.is-ingekort::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3.2em;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--co-surface));
	pointer-events: none;
}

.lees-meer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--co-brand);
	font-family: var(--co-font-head);
	font-size: .98rem;
	font-weight: 600;
	cursor: pointer;
}
.lees-meer:hover { color: var(--co-brand-dark); }
.lees-meer svg { width: 16px; height: 16px; transition: transform .2s ease; }
.lees-meer.is-open svg { transform: rotate(180deg); }
.page-hero__text > :first-child { margin-top: 0; }
.page-hero__text > :last-child { margin-bottom: 0; }

/* =========================================================
   Pagina- en berichtinhoud
   ========================================================= */
.entry-content { max-width: 68ch; }

/* Tabellen uit de editor: de vormgeving van het thema eroverheen. */
.entry-content .wp-block-table { margin: 28px 0; overflow-x: auto; }
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: .98rem;
}
.entry-content th,
.entry-content td {
	padding: 11px 14px;
	border: 1px solid var(--co-line);
	text-align: left;
	vertical-align: top;
}
.entry-content th {
	background: var(--co-shell);
	color: var(--co-ink);
	font-family: var(--co-font-head);
	font-weight: 600;
}
.entry-content h2 { margin-top: 1.8em; }
.entry-content h3 { margin-top: 1.5em; }

/* Begint de tekst met een kop, dan hoort daar geen ruimte boven: de kop staat
   dan al onder de paginatitel. */
.entry-content > :first-child { margin-top: 0; }
.entry-content ul,
.entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-bottom: .5em; }
.entry-content img { border-radius: var(--co-r); }
.entry-content blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--co-brand);
	color: var(--co-ink-3);
	font-size: 1.06rem;
}

.content-area { padding: 72px 0 88px; }
.content-area__featured { margin-bottom: 32px; border-radius: var(--co-r); overflow: hidden; }
.entry-title { margin-bottom: .4em; }

/* Subpagina's die de front-page-secties hergebruiken. */
.aanbod,
.aanbod-listing { padding: 72px 0 0; }
/* =========================================================
   Over ons (pagina)
   ========================================================= */
.over-page__media { padding: 32px 0 0; }
.over-page__media figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--co-r-xl);
	background: var(--co-shell);
}
.over-page__media img {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

.over-page__intro { padding: 56px 0 0; }
.over-page__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 56px;
	align-items: start;
}

/* Ruime maatvoering: dit is de enige plek op de site met echt leeswerk. */
.over-page__text { max-width: 62ch; }
.over-page__text > :first-child { margin-top: 0; }
.over-page__text p { font-size: 1.08rem; line-height: 1.75; }

/* De pluspunten in een eigen kaart naast de tekst. */
.over-page__card {
	padding: 32px;
	background: var(--co-shell);
	border-radius: var(--co-r-xl);
}
.over-page__card-title {
	margin: 0 0 20px;
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -.02em;
}
.over-page__values {
	display: grid;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.over-page__values li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 1rem;
	color: var(--co-ink);
}
.over-page__values svg {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 3px;
	color: var(--co-brand);
}
.over-page__call {
	margin: 24px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--co-line);
	font-family: var(--co-font-head);
	font-weight: 600;
	color: var(--co-ink);
}
.over-page__call a { color: var(--co-brand); }

.over-page__stats { padding: 56px 0 0; }

/* =========================================================
   Merkenbalk - logo's van de merken waar we dealer van zijn
   ========================================================= */
.merkenbalk { padding: 64px 0 20px; }
.merkenbalk__label {
	margin: 0 0 20px;
	font-family: var(--co-font-head);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--co-muted);
}
.merkenbalk__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.merkenbalk__list li {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 76px;
	padding: 0 28px;
	background: var(--co-surface);
	border: 1px solid var(--co-line);
	border-radius: var(--co-r-lg);
}
.merkenbalk__list img {
	width: auto;
	max-width: 160px;
	max-height: 36px;
	object-fit: contain;
}

.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 48px;
	padding: 72px 0 88px;
	align-items: start;
}
.contact-layout__form {
	padding: 32px 30px;
	background: var(--co-shell);
	border-radius: var(--co-r-lg);
}
.contact-details { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }

/* =========================================================
   Caravan-detailpagina (/caravan/{id}/)
   ========================================================= */
.caravan-detail { padding: 40px 0 88px; }
.caravan-detail__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	color: var(--co-muted);
	font-weight: 600;
	font-size: .95rem;
}
.caravan-detail__back:hover { color: var(--co-brand); }

.caravan-detail__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 366px;
	gap: 44px;
	align-items: start;
}
.caravan-detail__h2 { font-size: 1.35rem; margin: 38px 0 16px; }

.caravan-gallery__stage {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--co-line-soft);
	border-radius: var(--co-r);
	overflow: hidden;
}
.caravan-gallery__stage img { width: 100%; height: 100%; object-fit: cover; }

/* De fotostrook. Het snappen doet de browser; het script geeft alleen aan
   waar hij heen moet. Daardoor blijft vegen werken zonder JavaScript. */
.caravan-gallery__track {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.caravan-gallery__track::-webkit-scrollbar { display: none; }

.caravan-gallery__slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}
.caravan-gallery__slide img { cursor: zoom-in; }

.caravan-gallery__nav {
	position: absolute;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: rgba(255, 255, 255, .92);
	border: 0;
	border-radius: 50%;
	color: var(--co-ink);
	box-shadow: var(--co-shadow-sm);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color .2s ease, opacity .2s ease;
}
.caravan-gallery__nav svg { width: 22px; height: 22px; }
.caravan-gallery__nav:hover { background: #fff; }
.caravan-gallery__nav--prev { left: 12px; }
.caravan-gallery__nav--next { right: 12px; }
/* Aan het begin en het eind valt de pijl weg in plaats van dood te staan. */
.caravan-gallery__nav[disabled] { opacity: 0; pointer-events: none; }

.caravan-gallery__counter,
.caravan-gallery__zoom {
	position: absolute;
	bottom: 12px;
	margin: 0;
	padding: 6px 13px;
	background: rgba(19, 19, 19, .64);
	border: 0;
	border-radius: var(--co-r-pill);
	color: #fff;
	font-family: var(--co-font-head);
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.4;
}
.caravan-gallery__counter { left: 12px; }
.caravan-gallery__zoom {
	right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: background-color .2s ease;
}
.caravan-gallery__zoom:hover { background: rgba(19, 19, 19, .85); }
.caravan-gallery__zoom svg { width: 15px; height: 15px; }

/* De foto groot over de pagina heen. */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	background: rgba(10, 10, 10, .93);
}
html.heeft-lightbox { overflow: hidden; }

.lightbox__dialog {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 64px 20px 56px;
}
.lightbox__img {
	max-width: min(1600px, 92vw);
	max-height: 86vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--co-r-sm);
	box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}

.lightbox__close,
.lightbox__nav {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: rgba(255, 255, 255, .14);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, opacity .2s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, .3); }

.lightbox__close {
	top: 16px;
	right: 16px;
	width: 46px;
	height: 46px;
}
.lightbox__close svg { width: 20px; height: 20px; }

.lightbox__nav {
	top: 50%;
	width: 52px;
	height: 52px;
	transform: translateY(-50%);
}
.lightbox__nav svg { width: 26px; height: 26px; }
.lightbox__nav--prev { left: 18px; }
.lightbox__nav--next { right: 18px; }
.lightbox__nav[disabled] { opacity: .25; pointer-events: none; }

.lightbox__counter {
	position: absolute;
	left: 50%;
	bottom: 18px;
	margin: 0;
	color: rgba(255, 255, 255, .8);
	font-family: var(--co-font-head);
	font-size: .9rem;
	font-weight: 600;
	transform: translateX(-50%);
}
.caravan-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
	margin-top: 12px;
	list-style: none;
	padding: 0;
}
.caravan-gallery__thumb {
	aspect-ratio: 4 / 3;
	border: 2px solid transparent;
	border-radius: var(--co-r-sm);
	overflow: hidden;
	cursor: pointer;
	background: none;
	padding: 0;
	transition: border-color .2s ease;
}
.caravan-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.caravan-gallery__thumb:hover { border-color: var(--co-line); }
.caravan-gallery__thumb.is-active { border-color: var(--co-brand); }

.caravan-specs__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0 32px;
	margin: 0;
}
.caravan-specs__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--co-line-soft);
}
.caravan-specs__row dt { margin: 0; color: var(--co-muted); }
.caravan-specs__row dd { margin: 0; font-weight: 600; color: var(--co-ink); }

.caravan-desc .entry-content { max-width: none; }

.caravan-acc__cols { columns: 2; column-gap: 34px; }
.caravan-acc__group { break-inside: avoid; margin: 0 0 22px; }
.caravan-acc__group h3 { font-size: .98rem; margin: 0 0 8px; }
.caravan-acc__group ul { list-style: none; margin: 0; padding: 0; }
.caravan-acc__group li { position: relative; padding-left: 20px; margin-bottom: 6px; font-size: .95rem; }
.caravan-acc__group li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .58em;
	width: 7px;
	height: 7px;
	background: var(--co-brand);
	border-radius: 50%;
}

/* Koopblok blijft meescrollen. */
/* De kaart met titel, prijs en knoppen loopt mee tijdens het scrollen. Dat
   kan alleen als de kolom zelf de hoogte van de rij aanhoudt: met de
   align-items: start van het raster is de kolom precies zo hoog als de kaart
   en heeft die dus geen ruimte om in mee te schuiven. */
.caravan-detail__aside { align-self: stretch; }

.caravan-buy {
	position: sticky;
	top: calc(var(--co-header-h) + 32px);
	padding: 28px 26px;
	background: var(--co-surface);
	border: 1px solid var(--co-line);
	border-radius: var(--co-r-lg);
	box-shadow: var(--co-shadow);
}
.caravan-buy__eyebrow {
	margin: 0 0 8px;
	color: var(--co-brand);
	font-family: var(--co-font-head);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.caravan-buy__title { font-size: 1.35rem; margin: 0 0 10px; }
.caravan-buy__price {
	margin: 0 0 18px;
	font-family: var(--co-font-head);
	font-size: 1.95rem;
	font-weight: 800;
	color: var(--co-ink);
	letter-spacing: -.02em;
}
.caravan-buy__quick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}
.caravan-buy__quick li {
	padding: 5px 11px;
	background: var(--co-line-soft);
	border-radius: var(--co-r-sm);
	font-size: .86rem;
	font-weight: 500;
}
.caravan-buy__actions { display: flex; flex-direction: column; gap: 10px; }
.caravan-buy__note { margin: 16px 0 0; font-size: .88rem; color: var(--co-muted); }

.caravan-detail__missing { padding: 60px 0 80px; text-align: center; }

/* =========================================================
   Menubalk - uitklapmenu's
   ========================================================= */
.site-nav__item { position: relative; }

.site-nav__actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

/* De chevron naast een menu-item met submenu. */
.site-nav__toggle {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--co-muted);
	cursor: pointer;
	transition: transform .2s ease, color .2s ease;
}
.site-nav__toggle svg { width: 15px; height: 15px; }

/* Ruimte voor de chevron in het label van het bovenliggende item. */
.site-nav__item.has-sub > .site-nav__link { padding-right: 26px; }
.site-nav__item.has-sub:hover > .site-nav__toggle,
.site-nav__item.has-sub.is-open > .site-nav__toggle {
	color: var(--co-brand);
	transform: translateY(-50%) rotate(180deg);
}

.site-nav__sub {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--z-nav);
	min-width: 244px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--co-surface);
	border: 1px solid var(--co-line);
	border-radius: var(--co-r);
	box-shadow: var(--co-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.site-nav__item.has-sub:hover > .site-nav__sub,
.site-nav__item.has-sub:focus-within > .site-nav__sub,
.site-nav__item.has-sub.is-open > .site-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.site-nav__sub .site-nav__link {
	padding: 10px 14px;
	border-radius: var(--co-r-sm);
	font-size: .97rem;
	font-weight: 600;
	white-space: nowrap;
}
.site-nav__sub .site-nav__link::after { display: none; }
.site-nav__sub .site-nav__link:hover { background: var(--co-brand-tint); color: var(--co-brand); }

/* Derde niveau (Accessoires > Voortenten > merk): klapt zijwaarts uit naast
   het tweede niveau in plaats van eronder. */
.site-nav__sub .site-nav__item.has-sub { position: relative; }
.site-nav__sub .site-nav__item.has-sub > .site-nav__link { padding-right: 34px; }
.site-nav__sub .site-nav__item.has-sub > .site-nav__toggle {
	right: 8px;
	transform: translateY(-50%) rotate(-90deg);
}
.site-nav__sub .site-nav__item.has-sub:hover > .site-nav__toggle,
.site-nav__sub .site-nav__item.has-sub.is-open > .site-nav__toggle {
	transform: translateY(-50%) rotate(-90deg);
	color: var(--co-brand);
}

.site-nav__sub--level-2 {
	top: -8px;
	left: 100%;
	margin-left: 4px;
}

/* Past het uitklapmenu niet meer rechts, dan klapt het naar links. */
.site-nav__item:last-child .site-nav__sub--level-2,
.site-nav__item:nth-last-child(2) .site-nav__sub--level-2 {
	left: auto;
	right: 100%;
	margin-left: 0;
	margin-right: 4px;
}

/* Merken onder "Nieuwe campers" krijgen een lichte inspringing. */
.site-nav__sub .site-nav__item.is-nested .site-nav__link {
	padding-left: 28px;
	font-weight: 500;
	color: var(--co-text);
}
.site-nav__sub .site-nav__item.is-nested .site-nav__link:hover { color: var(--co-brand); }

/* =========================================================
   Promobalk - actie of beursmelding
   ========================================================= */
.promo {
	background: var(--co-brand);
	color: #fff;
}
.promo__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 20px;
	padding-top: 11px;
	padding-bottom: 11px;
}
.promo__text {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: .97rem;
	line-height: 1.5;
	text-wrap: balance;
}
.promo__label {
	display: inline-block;
	padding: 3px 10px;
	background: rgba(255, 255, 255, .18);
	border-radius: 999px;
	font-family: var(--co-font-head);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.promo__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #fff;
	font-family: var(--co-font-head);
	font-weight: 700;
	font-size: .95rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.promo__cta svg { width: 17px; height: 17px; transition: transform .2s ease; }
.promo__cta:hover svg { transform: translateX(4px); }

/* Over de video: dezelfde balk, maar zwevend boven de hero. */
.promo--hero {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	background: rgba(var(--co-brand-rgb), .94);
	backdrop-filter: blur(4px);
}

/* =========================================================
   Merkblokken - Knaus en Weinsberg
   =========================================================
   Wittebrug zet het modelblok neer als één vlak kleurvlak: geen verloop en
   geen gloed, beeld tegen de rand aan, tekst met vinkjes ernaast. De twee
   merken wisselen elkaar af in kleur en in kant. */
.merkblok { padding: 20px var(--co-gutter); background: var(--co-surface); }
.merkblok:first-of-type { padding-top: 44px; }
.merkblok:last-of-type { padding-bottom: 60px; }

/* Het gekleurde vlak is de onderlaag. De foto ligt er los bovenop en steekt
   aan de linkerkant buiten het vlak uit; boven en onder blijft hij binnen de
   randen. Dat geeft de diepte van het voorbeeld. Rechte hoeken. */
.merkblok__inner {
	position: relative;
	/* Geen zijpadding: het vlak en de foto bepalen zelf hun ruimte. */
	padding-left: 0;
	padding-right: 0;
	color: rgba(255, 255, 255, .88);
}

/* Het vlak begint een stuk naar rechts, zodat de foto ervoor kan uitsteken,
   en loopt door tot de rechterrand. De linkerpadding houdt de tekst vrij van
   de foto. */
.merkblok__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(340px, 34vw, 460px);
	margin-left: 13%;
	padding: clamp(44px, 4.4vw, 68px) clamp(32px, 3.4vw, 56px);
	padding-left: calc(30% + clamp(28px, 3vw, 56px));
	background: var(--co-brand);
}

/* De foto: links uitgelijnd, over het vlak heen, boven en onder ingesprongen. */
.merkblok__figure {
	position: absolute;
	left: 0;
	top: clamp(28px, 3.4vw, 52px);
	bottom: clamp(28px, 3.4vw, 52px);
	z-index: 2;
	width: 40%;
	margin: 0;
	box-shadow: 0 18px 48px rgba(19, 19, 19, .3);
}

/* Het tweede merk spiegelt: vlak naar links, foto rechts eruit. */
.merkblok--flip .merkblok__body {
	margin-left: 0;
	margin-right: 13%;
	padding-left: clamp(32px, 3.4vw, 56px);
	padding-right: calc(30% + clamp(28px, 3vw, 56px));
	background: var(--co-ink);
}
.merkblok--flip .merkblok__figure {
	left: auto;
	right: 0;
}

/* Het merklogo op een witte pil: Knaus en Weinsberg houden hun eigen
   kleur, in plaats van uitgewit te worden. Vast kader, zodat de pil bij
   beide merken dezelfde maat heeft. */
.merkblok__logo {
	align-self: flex-start;
	width: 132px;
	height: 26px;
	margin-bottom: 24px;
	padding: 10px 18px;
	background: #fff;
	border-radius: var(--co-r-pill);
	object-fit: contain;
	box-sizing: content-box;
	filter: none;
}

.merkblok__eyebrow {
	margin: 0 0 10px;
	font-family: var(--co-font-head);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}
.merkblok__title {
	margin: 0 0 16px;
	color: #fff;
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.05;
}
.merkblok__text {
	margin: 0 0 26px;
	max-width: 48ch;
	font-size: 1.03rem;
	line-height: 1.6;
}

.merkblok__usps {
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 13px;
}
.merkblok__usps li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 1rem;
	color: #fff;
}
.merkblok__usps svg {
	flex: none;
	width: 19px;
	height: 19px;
	margin-top: 4px;
	color: #fff;
	opacity: .85;
}

.merkblok__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
/* Op het kleurvlak is wit de hoofdknop en wit-omlijnd de tweede. */
.merkblok .co-btn--primary {
	background: #fff;
	border-color: #fff;
	color: var(--co-ink);
}
.merkblok .co-btn--primary:hover {
	background: rgba(255, 255, 255, .86);
	border-color: rgba(255, 255, 255, .86);
	color: var(--co-ink);
}
.merkblok .co-btn--outline {
	border-color: rgba(255, 255, 255, .45);
	color: #fff;
}
.merkblok .co-btn--outline:hover {
	background: rgba(255, 255, 255, .13);
	border-color: #fff;
	color: #fff;
}

.merkblok__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* =========================================================
   Werkplaats - teaser op de voorpagina
   ========================================================= */
.werkplaats-teaser { padding: 88px 0; background: var(--co-surface); }
.werkplaats-teaser__inner {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	align-items: center;
	gap: 56px;
}
.werkplaats-teaser__text { margin: 0 0 24px; max-width: 58ch; }

.werkplaats-teaser__list {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
}
.werkplaats-teaser__list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .99rem;
	color: var(--co-ink);
	font-weight: 500;
}
.werkplaats-teaser__list svg {
	flex: none;
	width: 19px;
	height: 19px;
	margin-top: 3px;
	color: var(--co-brand);
}

.werkplaats-teaser__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.werkplaats-teaser__figure {
	margin: 0;
	border-radius: var(--co-r-lg);
	overflow: hidden;
	box-shadow: var(--co-shadow);
}
.werkplaats-teaser__figure img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   Voorraad - merkfilter en configuratorblok
   ========================================================= */
.stock-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 32px;
}
.stock-filter__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: var(--co-surface);
	border: 1px solid var(--co-line);
	border-radius: 999px;
	color: var(--co-ink);
	font-family: var(--co-font-head);
	font-size: .95rem;
	font-weight: 600;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.stock-filter__item:hover { border-color: var(--co-brand); color: var(--co-brand); }
.stock-filter__item.is-active {
	background: var(--co-brand);
	border-color: var(--co-brand);
	color: #fff;
}
.stock-filter__count {
	display: inline-block;
	min-width: 22px;
	padding: 1px 7px;
	background: var(--co-shell);
	border-radius: 999px;
	color: var(--co-muted);
	font-size: .82rem;
	text-align: center;
}
.stock-filter__item.is-active .stock-filter__count {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

/* Zwevend zoekmenu boven de voorraad. Het blijft onder de menubalk hangen,
   zodat het zoekveld en alle merkfilters met het aanbod meescrollen. */
.stock-search {
	position: sticky;
	top: calc(var(--co-header-h) + 10px);
	z-index: 90;
	margin: 0 0 30px;
	padding: 14px 18px;
	background: var(--co-surface);
	border: 1px solid var(--co-line);
	border-radius: var(--co-r);
	box-shadow: var(--co-shadow-sm);
	transition: box-shadow .22s ease, padding .22s ease;
}
.stock-search.is-stuck {
	padding-top: 10px;
	padding-bottom: 10px;
	box-shadow: var(--co-shadow);
}

.stock-search__bar {
	display: flex;
	align-items: center;
	gap: 10px 20px;
}

.stock-search__form {
	display: flex;
	flex: 1 1 auto;
	gap: 10px;
	min-width: 0;
	margin: 0;
}

.stock-search__field {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
}
.stock-search__icon {
	position: absolute;
	left: 16px;
	width: 18px;
	height: 18px;
	color: var(--co-muted);
	pointer-events: none;
}
.stock-search__input {
	width: 100%;
	min-height: 46px;
	padding: 11px 42px 11px 44px;
	background: var(--co-shell);
	border: 1px solid transparent;
	border-radius: var(--co-r-pill);
	color: var(--co-ink);
	font-family: var(--co-font);
	font-size: 1rem;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .2s ease, border-color .2s ease;
}
.stock-search__input::placeholder { color: var(--co-muted); }
.stock-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.stock-search__input:focus {
	background: var(--co-surface);
	border-color: var(--co-brand);
}

.stock-search__clear {
	position: absolute;
	right: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--co-muted);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.stock-search__clear:hover { background: var(--co-line-soft); color: var(--co-ink); }
.stock-search__clear svg { width: 15px; height: 15px; }

.stock-search__submit {
	flex: none;
	min-height: 46px;
	padding: 11px 24px;
	font-size: .95rem;
}

.stock-search__count {
	flex: none;
	margin: 0;
	color: var(--co-muted);
	font-family: var(--co-font-head);
	font-size: .92rem;
	font-weight: 600;
	white-space: nowrap;
}

/* Het merkfilter in de zwevende balk: iets compacter dan los op de pagina. */
.stock-filter--bar {
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--co-line-soft);
}
.stock-search.is-stuck .stock-filter--bar { margin-top: 10px; padding-top: 10px; }
.stock-filter--bar .stock-filter__item { padding: 8px 15px; font-size: .92rem; }

.voorraad-empty--filter { margin-top: 8px; }

/* Vanaf hier past het zoekmenu als kolom naast het raster. Daaronder blijft
   het de balk boven de voertuigen, die is op een smal scherm prettiger. */
@media (min-width: 1025px) {
	.voorraad-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 286px;
		gap: 30px;
	}
	/* Zonder voorraad is er ook geen zoekmenu; dan geen lege kolom. */
	.voorraad-layout--leeg { display: block; }
	.voorraad-layout__main {
		grid-column: 1;
		grid-row: 1;
		min-width: 0;
	}
	.voorraad-layout__side {
		grid-column: 2;
		grid-row: 1;
	}

	/* Het paneel blijft meelopen tijdens het scrollen. */
	.voorraad-layout__side .stock-search {
		margin: 0;
		padding: 18px;
		top: calc(var(--co-header-h) + 20px);
	}
	.voorraad-layout__side .stock-search.is-stuck { padding: 18px; }

	/* Alles onder elkaar in plaats van naast elkaar. */
	.voorraad-layout__side .stock-search__bar { display: block; }
	.voorraad-layout__side .stock-search__form { display: block; }
	.voorraad-layout__side .stock-search__submit {
		width: 100%;
		margin-top: 10px;
	}
	.voorraad-layout__side .stock-search__count {
		display: block;
		margin: 12px 2px 0;
		white-space: normal;
	}

	/* De merken als lijst; in een smalle kolom lezen ze zo het prettigst. */
	.voorraad-layout__side .stock-filter--bar {
		display: flex;
		flex-direction: column;
		gap: 3px;
		margin: 14px 0 0;
		padding: 14px 0 0;
	}
	.voorraad-layout__side .stock-filter__item {
		justify-content: space-between;
		width: 100%;
		padding: 9px 13px;
		background: transparent;
		border-color: transparent;
		border-radius: var(--co-r-sm);
		font-size: .95rem;
	}
	.voorraad-layout__side .stock-filter__item:hover {
		background: var(--co-shell);
		border-color: transparent;
		color: var(--co-brand);
	}
	.voorraad-layout__side .stock-filter__item.is-active {
		background: var(--co-brand);
		border-color: var(--co-brand);
		color: #fff;
	}

	/* Met een kolom ernaast mogen de kaarten wat kleiner: zo staan er nog
	   steeds drie naast elkaar. */
	.voorraad-layout .caravan-grid {
		grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
		gap: 24px 18px;
	}
	.voorraad-layout .caravan-card__body { padding-top: 14px; }
	.voorraad-layout .caravan-card__title { margin-bottom: 8px; font-size: 1.04rem; }
	.voorraad-layout .caravan-card__specs { margin-bottom: 12px; font-size: .86rem; }
	.voorraad-layout .caravan-card__price { font-size: 1.32rem; }
	.voorraad-layout .caravan-card__go { padding: 7px 14px; font-size: .86rem; }
	.voorraad-layout .caravan-card__badge { top: 10px; left: 10px; padding: 5px 11px; font-size: .74rem; }
}

.stock-config {
	margin: 40px 0 0;
	padding: 38px 40px;
	background: var(--co-ink);
	color: rgba(255, 255, 255, .78);
}
.stock-config__title { margin: 0 0 10px; color: #fff; font-size: 1.5rem; }
.stock-config__text { margin: 0 0 24px; max-width: 62ch; }
.stock-config__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* De voorraadpagina zet het hulpblok zelf in de container. */
.voorraad--page .aanbod-help__inner { margin-top: 40px; }


/* =========================================================
   Werkplaatspagina
   ========================================================= */
.page-hero__eyebrow {
	margin: 0 0 10px;
	font-family: var(--co-font-head);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--co-brand);
}

.section-lead {
	margin: 12px 0 0;
	max-width: 62ch;
	color: var(--co-muted);
}
.section-head--center .section-lead { margin-inline: auto; }

.werkplaats-intro,
.onderdelen-intro { padding: 78px 0; }

/* Hero en introtekst lezen als een blok: geen streep ertussen en de tekst
   sluit er direct op aan. */
.page-hero--aansluitend {
	padding-bottom: 0;
	border-bottom: 0;
}
.page-hero--aansluitend + .werkplaats-intro { padding-top: 34px; }

.werkplaats-intro__inner,
.onderdelen-intro__inner {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	align-items: center;
	gap: 56px;
}

/* Zonder foto ernaast loopt de tekst over de volle breedte. */
.werkplaats-intro__inner--vol { grid-template-columns: minmax(0, 1fr); }
.werkplaats-intro__inner--vol .werkplaats-intro__text,
.werkplaats-intro__inner--vol .entry-content { max-width: none; }
.werkplaats-intro__text,
.onderdelen-intro__text { margin: 0 0 20px; max-width: 60ch; font-size: 1.06rem; }

.werkplaats-intro__call,
.onderdelen-intro__call {
	margin: 24px 0 0;
	font-family: var(--co-font-head);
	font-weight: 600;
	color: var(--co-ink);
}
.werkplaats-intro__call a,
.onderdelen-intro__call a { color: var(--co-brand); }

.werkplaats-intro__figure,
.onderdelen-intro__figure {
	margin: 0;
	border-radius: var(--co-r-lg);
	overflow: hidden;
	box-shadow: var(--co-shadow);
}
.werkplaats-intro__figure img,
.onderdelen-intro__figure img { display: block; width: 100%; height: 100%; object-fit: cover; }

.tegelblok { padding: 84px 0; background: var(--co-shell); }
.tegelblok__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Elke dienst is een tegel met een foto die naar de eigen pagina linkt. */
.tegel {
	display: flex;
	background: var(--co-surface);
	border-radius: var(--co-r);
	box-shadow: var(--co-shadow-sm);
	overflow: hidden;
	transition: box-shadow .25s ease, transform .25s ease;
}
.tegel:hover {
	box-shadow: var(--co-shadow);
	transform: translateY(-2px);
}
.tegel__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
}
.tegel__link:hover { color: inherit; }

.tegel__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--co-line-soft);
	overflow: hidden;
}
.tegel__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}
.tegel:hover .tegel__media img { transform: scale(1.04); }

/* Nog geen foto ingesteld: het merkteken in het vlak, niet uitgerekt. */
.tegel__media.is-leeg {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--co-brand-tint);
}
.tegel__media.is-leeg img {
	width: auto;
	height: auto;
	max-width: 44%;
	max-height: 44%;
	object-fit: contain;
	opacity: .5;
}

.tegel__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 22px 24px 24px;
}
.tegel__title { font-size: 1.14rem; margin: 0 0 8px; }
.tegel__text {
	display: block;
	margin: 0 0 18px;
	color: var(--co-text);
	font-size: .96rem;
	line-height: 1.6;
}
.tegel__go {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	color: var(--co-brand);
	font-family: var(--co-font-head);
	font-size: .94rem;
	font-weight: 600;
}
.tegel__go svg { width: 16px; height: 16px; transition: transform .2s ease; }
.tegel:hover .tegel__go svg { transform: translateX(3px); }

.afspraak { padding: 84px 0; }
.afspraak__card {
	margin-top: 36px;
	padding: 34px;
	background: var(--co-surface);
	border: 1px solid var(--co-line);
	border-radius: var(--co-r-lg);
	box-shadow: var(--co-shadow-sm);
}
/* De afspraakmodule komt van een externe partij; alleen de omlijsting is van ons. */
.afspraak__embed iframe {
	display: block;
	width: 100%;
	min-height: 720px;
	border: 0;
	border-radius: var(--co-r);
}

/* Huurkalender op de verhuurpagina. De kalender komt van huurkalender.nl en
   stuurt zijn hoogte door; tot dat bericht binnen is geldt de hoogte hier. */
.verhuur-kalender { margin: 64px 0 0; }
.verhuur-kalender .section-head { margin-bottom: 26px; }
.verhuur-kalender__frame {
	padding: 16px;
	background: var(--co-surface);
	border: 1px solid var(--co-line);
	border-radius: var(--co-r-lg);
	box-shadow: var(--co-shadow-sm);
}
.verhuur-kalender__frame iframe {
	display: block;
	width: 100%;
	height: 760px;
	border: 0;
	border-radius: var(--co-r);
}

/* =========================================================
   Onderdelenpagina
   ========================================================= */
.onderdelen-form { padding: 84px 0; background: var(--co-shell); }
.onderdelen-form__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: 52px;
}
.onderdelen-form__text { margin: 0 0 26px; max-width: 52ch; }

.onderdelen-form__hints {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 18px;
}
.onderdelen-form__hints li {
	padding-left: 18px;
	border-left: 3px solid var(--co-brand);
}
.onderdelen-form__hints strong {
	display: block;
	font-family: var(--co-font-head);
	color: var(--co-ink);
	margin-bottom: 3px;
}
.onderdelen-form__hints span { font-size: .97rem; color: var(--co-muted); }

.onderdelen-form__card {
	padding: 34px;
	background: var(--co-surface);
	border-radius: var(--co-r-lg);
	box-shadow: var(--co-shadow);
}

/* =========================================================
   Aanbod - overzichtspagina
   ========================================================= */
.aanbod-hub { padding: 72px 0 0; }
.aanbod-hub__intro { margin: 0 0 40px; }
.aanbod-hub__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.aanbod-hub__item a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 32px 30px;
	background: var(--co-surface);
	border: 1px solid var(--co-line);
	border-radius: var(--co-r-lg);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.aanbod-hub__item a:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--co-shadow);
}
.aanbod-hub__item h2 { font-size: 1.4rem; margin: 0 0 10px; }
.aanbod-hub__item p { margin: 0 0 22px; font-size: .99rem; }
.aanbod-hub__meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	color: var(--co-brand);
	font-family: var(--co-font-head);
	font-weight: 700;
	font-size: .96rem;
}
.aanbod-hub__meta svg { width: 18px; height: 18px; transition: transform .2s ease; }
.aanbod-hub__item a:hover .aanbod-hub__meta svg { transform: translateX(4px); }

/* =========================================================
   CTA-strook
   ========================================================= */
.cta-strip { padding: 64px 0 84px; }
.cta-strip__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px 40px;
	padding: 36px 40px;
	background: var(--co-brand);
	border-radius: var(--co-r-xl);
}
.cta-strip__title {
	margin: 0 0 6px;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -.02em;
}
.cta-strip__text { margin: 0; max-width: 62ch; color: rgba(255, 255, 255, .9); }

/* Tekst links, knoppen rechts. De tekst mag krimpen zodat twee knoppen er
   naast blijven passen in plaats van eronder te vallen. */
.cta-strip__inner > :first-child { flex: 1 1 340px; min-width: 0; }
.cta-strip__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	flex: 0 1 auto;
}

/* Op het blauwe vlak is de witte knop de hoofdactie. */
.cta-strip .co-btn--primary {
	background: #fff;
	border-color: #fff;
	color: var(--co-ink);
}
.cta-strip .co-btn--primary:hover {
	background: rgba(255, 255, 255, .86);
	border-color: rgba(255, 255, 255, .86);
	color: var(--co-ink);
}

/* De tweede knop is een witte omlijning; donkere tekst valt weg op blauw. */
.cta-strip .co-btn--outline {
	background: transparent;
	border-color: rgba(255, 255, 255, .6);
	color: #fff;
}
.cta-strip .co-btn--outline:hover {
	background: #fff;
	border-color: #fff;
	color: var(--co-brand);
}

/* =========================================================
   Inkomen bij scrollen
   =========================================================
   Onderdelen komen een klein stukje omhoog en faden in zodra ze in beeld
   staan. Bewust subtiel: 14px en een halve seconde.

   De verborgen begintoestand hangt aan .js-reveal op <html>, en die zet het
   script zelf. Zonder JavaScript staat dus alles gewoon zichtbaar. */
.js-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .55s ease, transform .55s cubic-bezier(.2, .6, .2, 1);
	transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* Wie beweging vermijdt, krijgt alleen de fade en geen beweging. Het
   probleem bij die voorkeur is verschuiven, niet doorzichtigheid; helemaal
   uitzetten zou betekenen dat een groot deel van de bezoekers er niets van
   ziet. */
@media (prefers-reduced-motion: reduce) {
	.js-reveal [data-reveal] {
		transform: none;
		transition: opacity .45s ease;
		transition-delay: var(--reveal-delay, 0ms);
	}
	.js-reveal [data-reveal].is-in { transform: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
	.over-page__grid,
	.inkoop__inner,
	.contact-layout { grid-template-columns: 1fr; gap: 36px; }
	.caravan-detail__grid { grid-template-columns: 1fr; gap: 32px; }
	.caravan-buy { position: static; }

	/* Vier cijfers naast elkaar wordt te smal; twee bij twee. */
	.over__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.over__inner { grid-template-columns: 1fr; gap: 44px; }
	.over__body { max-width: 52rem; }
}

@media (max-width: 860px) {
	.werkplaats-sub__inner--reverse { grid-template-columns: 1fr; }
	.werkplaats-sub__inner--reverse .werkplaats-sub__aside { order: 2; }

	.vacature-item__link { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 22px; }

	.contact-page__inner { grid-template-columns: 1fr; }
	.contact-page__form { position: static; padding: 26px 22px; }
	.contact-cards { grid-template-columns: 1fr; }
	.contact-map iframe { height: 320px; }

	.werkplaats-sub__inner { grid-template-columns: 1fr; }
	.werkplaats-sub__aside { position: static; }
	.werkplaats-sub__body { padding: 30px 24px; }

	html { scroll-padding-top: 88px; }

	:root { --co-header-h: 76px; }

	.site-header__inner { min-height: 76px; }
	.site-logo img, .custom-logo { height: 54px; }

	.topbar__inner { justify-content: center; text-align: center; }
	.topbar__place { display: none; }
	.topbar__right { display: none; }

	.lang-switch--nav {
		display: block;
		margin: 0 var(--co-gutter) 20px;
	}
	/* In het mobiele menu klapt de lijst inline open. Een absoluut paneel
	   wordt afgeknipt door de overflow van .site-nav. */
	.lang-switch--nav .lang-switch__menu {
		position: static;
		display: none;
		min-width: 0;
		margin-top: 8px;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
	}
	.lang-switch--nav.is-open .lang-switch__menu { display: block; }

	.hero__inner { min-height: 0; padding-top: 56px; padding-bottom: 64px; }
	.hero::after {
		background: linear-gradient(0deg, rgba(19, 19, 19, .9) 0%, rgba(19, 19, 19, .58) 34%, rgba(19, 19, 19, .12) 70%, rgba(19, 19, 19, .1) 100%);
	}

	.diensten { padding-bottom: 64px; }
	.diensten__grid { grid-template-columns: 1fr; margin-top: -40px; }
	.diensten__grid > :last-child { grid-column: auto; }

	.voorraad, .werkwijze, .over, .inkoop, .contact { padding-top: 64px; padding-bottom: 64px; }

	.section-head { margin-bottom: 32px; }
	.section-head__cta { width: 100%; }

	.merken__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
	.merken__title { max-width: none; }

	.co-form__grid { grid-template-columns: 1fr; }
	.inkoop__card { padding: 26px 22px; }

	.aanbod-help__inner { padding: 28px 24px; }

	.caravan-gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
	.caravan-acc__cols { columns: 1; }

	.site-footer__grid { gap: 34px 40px; padding-top: 56px; }
	.site-footer__brand { flex: 1 1 100%; max-width: none; }
	.site-footer__bar-inner { justify-content: flex-start; }
}

@media (max-width: 560px) {
	:root { --co-gutter: 18px; }
	body { font-size: 1rem; }

	.hero__actions .co-btn,
	.voorraad-empty__actions .co-btn { width: 100%; }
	.hero__trust { gap: 10px; }
	.hero__trust li { width: 100%; }

	.caravan-grid { grid-template-columns: 1fr; }
	.voorraad-empty { padding: 40px 22px; }
	.site-footer__col { flex: 1 1 100%; }
	.caravan-gallery__thumbs { grid-template-columns: repeat(3, 1fr); }

	.caravan-gallery__nav { width: 38px; height: 38px; }
	.caravan-gallery__nav svg { width: 19px; height: 19px; }
	.caravan-gallery__nav--prev { left: 8px; }
	.caravan-gallery__nav--next { right: 8px; }
	.caravan-gallery__counter,
	.caravan-gallery__zoom { bottom: 8px; padding: 5px 11px; font-size: .8rem; }
	.caravan-gallery__counter { left: 8px; }
	.caravan-gallery__zoom { right: 8px; }

	.lightbox__dialog { padding: 60px 10px 50px; }
	.lightbox__img { max-width: 96vw; max-height: 78vh; }
	.lightbox__nav { width: 42px; height: 42px; }
	.lightbox__nav--prev { left: 8px; }
	.lightbox__nav--next { right: 8px; }
}

/* =========================================================
   Responsive - nieuwe onderdelen
   ========================================================= */
@media (max-width: 1024px) {

	.hoofdblokken__grid { grid-template-columns: repeat(2, 1fr); }
	/* Het derde blok vult de volle breedte, anders staat het scheef. */
	.hoofdblokken__grid > :last-child { grid-column: 1 / -1; }
	.hoofdblokken__grid > :last-child .hoofdblok__media { aspect-ratio: 21 / 8; }

	/* Te smal om te laten uitsteken: foto boven, vlak eronder. De foto staat
	   in de opmaak na de tekst, dus hier met flex omgezet. */
	.merkblok__inner {
		display: flex;
		flex-direction: column;
	}
	.merkblok__figure { order: -1; }

	.merkblok__figure,
	.merkblok--flip .merkblok__figure {
		position: static;
		width: 100%;
		aspect-ratio: 16 / 9;
		box-shadow: none;
	}
	.merkblok__body,
	.merkblok--flip .merkblok__body {
		min-height: 0;
		margin: 0;
		padding: clamp(28px, 6vw, 40px) clamp(22px, 5vw, 32px);
	}

	.werkplaats-teaser__inner,
	.werkplaats-intro__inner,
	.onderdelen-intro__inner,
	.onderdelen-form__inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	/* Te smal om te laten uitsteken: kaart onder de gegevens. */
	.contact__inner {
		display: flex;
		flex-direction: column;
	}
	.contact__panel {
		min-height: 0;
		margin-right: 0;
		padding: clamp(30px, 4vw, 48px);
	}
	.contact__map {
		position: static;
		width: 100%;
		height: 340px;
		box-shadow: none;
	}
	.tegelblok__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tegel__body { padding: 20px; }
	.aanbod-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aanbod-hub__grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
	.promo__inner { justify-content: flex-start; text-align: left; }
	.promo__text { font-size: .92rem; }

	/* Over de video wordt de balk te druk; hier staat hij weer in de flow. */
	.promo--hero {
		position: static;
		background: var(--co-brand);
		backdrop-filter: none;
	}
	.hero__inner { padding-top: 92px; padding-bottom: 44px; min-height: 62vh; }

	/* Video kost op mobiel te veel data; de poster staat er al. */
	.hero__yt { display: none; }

	.hoofdblokken { padding: 40px 0 56px; }
	.hoofdblokken__grid { grid-template-columns: 1fr; gap: 26px; }
	.hoofdblokken__grid > :last-child .hoofdblok__media { aspect-ratio: 4 / 3; }

	.trustbar__inner { padding-top: 14px; padding-bottom: 14px; }
	.hero__trust { justify-content: flex-start; gap: 8px 22px; }
	.hero__trust li { font-size: .88rem; }

	.caravan-grid { grid-template-columns: 1fr; }
	.werkplaats-teaser,
	.werkplaats-intro,
	.onderdelen-intro,
	.tegelblok,
	.afspraak,
	.onderdelen-form { padding: 62px 0; }

	.werkplaats-teaser__list { grid-template-columns: 1fr; }

	.over { padding: 62px 0; }
	.over__photos { gap: 14px; }
	.over__photo--a,
	.over__photo--b { margin: 0; }

	.over-page__media img { aspect-ratio: 16 / 10; }
	.over-page__intro { padding-top: 40px; }
	.over-page__text p { font-size: 1.02rem; }
	.over-page__card { padding: 26px 24px; }
	.over-page__stats { padding-top: 40px; }
	.merkenbalk { padding: 48px 0 12px; }
	.merkenbalk__list li { height: 62px; padding: 0 20px; }
	.merkenbalk__list img { max-height: 28px; max-width: 124px; }

	.contact { padding-bottom: 62px; }
	.contact__cols { grid-template-columns: 1fr; gap: 24px; }
	.contact__map { height: 280px; }
	.over__cta { align-self: flex-start; }
	.over__stats { gap: 12px; }
	.stat { min-height: 0; padding: 22px; }

	.stock-config,
	.cta-strip__inner,
	.afspraak__card,
	.onderdelen-form__card { padding: 28px 24px; }

	.verhuur-kalender { margin-top: 48px; }
	.verhuur-kalender__frame { padding: 10px; }
	.verhuur-kalender__frame iframe { height: 620px; }

	/* Zoekmenu: het zoekveld over de volle breedte, de teller eronder. */
	.stock-search { padding: 12px; }
	.stock-search__bar { flex-wrap: wrap; gap: 10px; }
	.stock-search__form { flex: 1 1 100%; }
	.stock-search__count { flex: 1 1 auto; }

	/* De merken passen niet meer naast elkaar: een strook die opzij schuift,
	   zodat elk merk bereikbaar blijft zonder dat de balk hoog wordt. */
	.stock-filter--bar {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 10px -12px 0;
		padding: 10px 12px 0;
	}
	.stock-filter--bar::-webkit-scrollbar { display: none; }
	.stock-filter--bar .stock-filter__item { flex: none; }
	.stock-search.is-stuck .stock-filter--bar { margin-top: 8px; padding-top: 8px; }

	.afspraak__embed iframe { min-height: 640px; }
}

@media (max-width: 560px) {
	.tegelblok__grid,
	.aanbod-hub__grid { grid-template-columns: 1fr; }
	.aanbod-hub__grid > :last-child { grid-column: auto; }

	.hoofdblok__logos img { width: 76px; height: 20px; padding: 6px 11px; }
	.hoofdblok__title { font-size: 1.3rem; }

	.over__stats { grid-template-columns: 1fr; }
	.stat--cta { align-items: center; }

	.stock-filter { gap: 8px; }
	.stock-filter__item { padding: 9px 14px; font-size: .9rem; }

	.stock-search { padding: 10px; }
	.stock-search__submit { padding: 11px 18px; }
	.stock-search__input { padding-right: 38px; }
}

/* =========================================================
   Bewegingsvoorkeur respecteren
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	/* De YouTube-achtergrond valt weg: daar kunnen we niet op pauzeren.
	   De eigen video blijft staan en start gepauzeerd; de knop in de hero
	   geeft de bezoeker de keuze. */
	.hero__yt { display: none; }

	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}


/* =========================================================
   Menubalk - uitklapmenu
   =========================================================
   Zeven hoofditems plus de knop passen niet meer naast het logo zodra de
   container onder ~1100px komt. Daar gaat de menubalk over op het
   uitklappaneel, zodat de knop "Afspraak maken" en de taalwisselaar
   bereikbaar blijven. De rest van de pagina blijft tot 860px de brede
   indeling houden. */
@media (max-width: 1100px) {
	.nav-toggle { display: flex; }

	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: var(--z-nav);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: 0;
		max-height: 0;
		overflow: hidden;
		background: var(--co-surface);
		border-bottom: 1px solid transparent;
		transition: max-height .3s ease, border-color .3s ease;
	}
	.site-nav.is-open {
		max-height: 80vh;
		overflow-y: auto;
		border-bottom-color: var(--co-line);
		box-shadow: var(--co-shadow);
	}
	.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav__list a {
		padding: 15px var(--co-gutter);
		border-radius: 0;
		border-bottom: 1px solid var(--co-line-soft);
		font-size: .98rem;
		white-space: normal;
	}
	.site-nav__list a::after { display: none; }
	.site-nav__cta { margin: 16px var(--co-gutter) 20px; }

	.site-nav__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* Uitklapmenu's staan hier inline; een absoluut paneel wordt afgeknipt
	   door de overflow van .site-nav. */
	.site-nav__item.has-sub > .site-nav__link { padding-right: 56px; }

	.site-nav__toggle {
		top: 0;
		right: 0;
		width: 54px;
		height: 53px;
		transform: none;
		border-left: 1px solid var(--co-line-soft);
		border-bottom: 1px solid var(--co-line-soft);
	}
	.site-nav__item.has-sub:hover > .site-nav__toggle { transform: none; color: var(--co-muted); }
	.site-nav__item.has-sub.is-open > .site-nav__toggle { transform: rotate(180deg); color: var(--co-brand); }

	.site-nav__sub {
		position: static;
		display: none;
		min-width: 0;
		margin: 0;
		padding: 0;
		background: var(--co-shell);
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	/* Alleen open na een tik op de chevron, hover bestaat hier niet. */
	.site-nav__item.has-sub:hover > .site-nav__sub,
	.site-nav__item.has-sub:focus-within > .site-nav__sub { display: none; }
	.site-nav__item.has-sub.is-open > .site-nav__sub { display: block; }

	.site-nav__sub .site-nav__link {
		padding: 13px var(--co-gutter) 13px calc(var(--co-gutter) + 14px);
		border-radius: 0;
		white-space: normal;
	}
	.site-nav__sub--level-2 {
		top: auto;
		left: auto;
		right: auto;
		margin: 0;
		background: var(--co-line-soft);
	}
	.site-nav__sub--level-2 .site-nav__link { padding-left: calc(var(--co-gutter) + 30px); }

	.site-nav__sub .site-nav__item.has-sub > .site-nav__link { padding-right: 56px; }
	.site-nav__sub .site-nav__item.has-sub > .site-nav__toggle {
		right: 0;
		transform: none;
	}
	.site-nav__sub .site-nav__item.has-sub:hover > .site-nav__toggle { transform: none; }
	.site-nav__sub .site-nav__item.has-sub.is-open > .site-nav__toggle { transform: rotate(180deg); }

	.site-nav__sub .site-nav__item.is-nested .site-nav__link { padding-left: calc(var(--co-gutter) + 30px); }
}

/* =========================================================
   Printen
   ========================================================= */
@media print {
	.topbar, .site-header, .site-footer, .inkoop, .nav-toggle, .skip-link, .stock-search { display: none !important; }
	body { color: #000; font-size: 11pt; }
	.hero::after, .hero__media { display: none; }
	.hero__title, .hero__subtitle { color: #000; }
}