/* ============================================================
   PAGINABLOKKEN — herbruikbare componenten die je per pagina aan/uit zet
   en met een volgorde-nummer stapelt (paginakop, categorieën, ...).
   Renderen bovenaan de pagina via storefront_before_content.
   ============================================================ */

/* Eerste blok sluit strak onder de site-header/USP-balk aan. */
.wv-has-blocks #content.site-content { padding-top: 0; }
/* Standaard WordPress-paginatitel verbergen — de blokken vullen de pagina. */
.wv-has-blocks .content-area .entry-header { display: none; }

/* Verticale ruimte tussen opeenvolgende blokken. Via de aangrenzende-broer-
   selector i.p.v. per-blok margins, zodat het niet afhangt van margin-collapse:
   altijd exact deze waarde (ook binnen flex/grid of met borders ertussen), en
   het eerste blok krijgt geen marge bovenaan. */
.wv-block + .wv-block { margin-top: 40px; }

/* ---------- Blok: Paginakop ---------- */
.wv-page-header {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: var(--wv-ph-height, 420px);
	padding: 48px 0;
	background-color: var(--wv-ph-bg, #0F52BA);
	background-image: var(--wv-ph-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}
.wv-page-header--full {
	width: 100%;
}
.wv-page-header--container,
.wv-page-header--wide {
	/* Zelfde breedte als de content in de andere blokken (container minus de
	   twee zijmarges), zodat de gekleurde box niet buiten de cards uitsteekt. */
	max-width: calc(var(--wv-container-max) - 2 * var(--wv-container-pad));
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	border-radius: 8px;
}
/* Sitebreedte: even breed als de balken in de header en de footer (1800). */
.wv-page-header--wide {
	max-width: calc(var(--wv-container-wide) - 2 * var(--wv-container-pad));
}
.wv-page-header--wide .wv-page-header__inner {
	max-width: var(--wv-container-wide);
}
.wv-page-header.has-bg-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
}
.wv-page-header__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wv-container-max);
	margin: 0 auto;
	padding: 0 40px;
	box-sizing: border-box;
}
.wv-page-header__content {
	max-width: 620px;
	padding: 32px;
	background: #fff;
	border-radius: 4px;
}
.wv-page-header__title {
	margin: 0;
	font-size: 32px;
	line-height: 1.2;
	font-weight: 700;
}
.wv-page-header__subtitle {
	margin: 24px 0 0;
	line-height: 1.6;
}
.wv-page-header__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
}
.wv-page-header__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 10px 32px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid transparent;
	height: 52px;
	box-sizing: border-box;
	transition: background 0.15s;
}
.wv-page-header__btn--primary {
	background: #0F52BA;
	color: #fff;
	border-color: #0F52BA;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 6px -1px, rgba(0, 0, 0, 0.12) 0px 2px 4px -1px;
}
.wv-page-header__btn--primary:hover {
	background: #002980;
	border-color: #002980;
	color: #fff;
}
.wv-page-header__btn--secondary {
	background: transparent;
	color: #0F52BA;
	border-color: #0F52BA;
}
.wv-page-header__btn--secondary:hover {
	background: #0F52BA;
	border-color: #0F52BA;
	color: #fff;
}

/* ---------- Paginakop: weergave "split" — tekst links, foto rechts ----------
   De foto is hier een <img> in plaats van een achtergrond, zodat hij scherp
   blijft en de browser hem met hoge prioriteit kan laden (LCP). */
.wv-page-header--split {
	background-image: none;
	padding: 0;
	align-items: stretch;
	margin-top: 12px;
}
.wv-page-header--split.has-bg-image::before {
	content: none;
}
.wv-page-header--split .wv-page-header__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	max-width: none;
	padding: 0;
	gap: 0;
	/* De achtergrondkleur uit de beheerder (Paginakop → Achtergrondkleur); de wig op
	   de foto hieronder leest dezelfde variabele, dus die kleuren altijd gelijk. */
	background: var(--wv-ph-bg, #f0f0f0);
}
.wv-page-header--split .wv-page-header__content {
	max-width: none;
	background: none;
	border-radius: 0;
	/* De tekst begint op dezelfde linkerrand als de blokken onder de hero. Die volgen
	   --wv-container-max, terwijl de sectie zelf --wv-container-wide volgt. Het procent
	   rekent tegen de tekstkolom (de helft van de sectie), dus 100% - halve contentbreedte
	   geeft precies die rand; max() houdt het op smalle schermen bij de gewone zijmarge. */
	padding: 72px clamp(24px, 5vw, 96px) 72px max(
		var(--wv-container-pad),
		calc(100% - (var(--wv-container-max) - 2 * var(--wv-container-pad)) / 2)
	);
}
.wv-page-header--split .wv-page-header__title {
	/* Schaalt mee tussen 28px (telefoon) en 40px (vanaf 1334px breed). */
	font-size: clamp(28px, 3.0vw, 40px);
	line-height: 1.2;
}
.wv-page-header--split .wv-page-header__subtitle {
	max-width: 34em;
	font-size: 16px;
	color: #4b5563;
}
.wv-page-header--split .wv-page-header__beeld {
	position: relative;
	min-height: var(--wv-ph-height, 420px);
	margin: 0;
	/* Is de tekstkolom hoger dan de ingestelde hoogte (lange subtekst), dan rekt de foto
	   mee tot de volle hoogte in plaats van gecentreerd te zweven. */
	align-self: stretch;
}
.wv-page-header--split .wv-page-header__beeld img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Schuine linkerrand op de foto (17° uit het lood, verwijzing naar het beeldmerk).
   Een wig in de kleur van de tekstkolom ligt over de linkerkant van de foto; skewX
   zet de rechterrand van die wig onder een hoek, met linksonder als draaipunt, dus
   onderaan raakt de foto de kolom en bovenaan is hij hoogte × tan(17°) ingesneden.
   Zo klopt de hoek bij elke hoogte, zonder rekenwerk in de CSS. */
.wv-page-header--split .wv-page-header__beeld {
	overflow: hidden;
}
.wv-page-header--split .wv-page-header__beeld::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 50%;
	background: var(--wv-ph-bg, #f0f0f0);
	transform-origin: 0 100%;
	transform: translateX(-100%) skewX(-17deg);
	z-index: 1;
	pointer-events: none;
}

/* ---------- Paginakop: weergave "vinder" — zoekvelden in beeld ---------- */
.wv-page-header--vinder {
	text-align: center;
}
.wv-page-header--vinder.has-bg-image::before {
	background: linear-gradient(180deg, rgba(0, 20, 62, 0.55) 0%, rgba(0, 20, 62, 0.78) 100%);
}
.wv-page-header--vinder .wv-page-header__content {
	max-width: 880px;
	margin: 0 auto;
	padding: 0;
	background: none;
	border-radius: 0;
	color: #fff;
}
.wv-page-header--vinder .wv-page-header__title {
	color: #fff;
	font-size: clamp(32px, 3.4vw, 50px);
	line-height: 1.1;
	letter-spacing: -0.025em;
}
.wv-page-header--vinder .wv-page-header__subtitle {
	color: rgba(255, 255, 255, 0.82);
	font-size: 18px;
}
/* De zoekknop is hier de hoofdactie; de twee knoppen eronder zijn snelkoppelingen
   en worden daarom rustige tekstlinks in plaats van gevulde knoppen. */
.wv-page-header--vinder .wv-page-header__buttons {
	justify-content: center;
	gap: 24px;
	margin-top: 18px;
}
.wv-page-header--vinder .wv-page-header__btn,
.wv-page-header--vinder .wv-page-header__btn--primary,
.wv-page-header--vinder .wv-page-header__btn--secondary {
	height: auto;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(255, 255, 255, 0.45);
}
.wv-page-header--vinder .wv-page-header__btn:hover {
	background: none;
	color: #fff;
	text-decoration-color: #fff;
}

.wv-hero-vinder {
	/* Kolom: bij de tegelweergave staat de tegelrij boven de veldenrij, bij de
	   veldenweergave is er alleen die ene rij. Zo vult die rij altijd de volle
	   breedte in plaats van links te blijven hangen. */
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: left;
}
/* Weergave "tegels": toepassing als aanklikbare huisdoorsnedes boven de rij met
   het typeveld en de knop. De radio zelf is verborgen; het label is de tegel. */
.wv-hero-vinder__tegels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	/* Een fieldset heeft van de browser min-inline-size: min-content; zonder deze
	   regel klapt het raster naar één kolom. */
	min-width: 0;
	width: 100%;
	background: none;
}
.wv-hero-vinder__tegel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 10px;
	background: #fff;
	border: 1px solid #e4e4e4;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	color: #171717;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.wv-hero-vinder__tegel:hover {
	border-color: #0F52BA;
}
.wv-hero-vinder__tegel input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.wv-hero-vinder__tegel:has(input:checked) {
	border-color: #0F52BA;
	box-shadow: inset 0 0 0 1px #0F52BA;
	background: #EEF3FB;
}
.wv-hero-vinder__tegel:has(input:focus-visible) {
	outline: 2px solid #0F52BA;
	outline-offset: 2px;
}
.wv-toepassing-icoon {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	color: #0F52BA;
}
/* De romp is de context, de band is de isolatie: die moet er uit springen. */
.wv-toepassing-icoon__romp {
	color: #c9ced6;
	stroke: currentColor;
}
.wv-hero-vinder__rij {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px;
	background: #fff;
	border-radius: 16px;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.wv-hero-vinder__rij .wv-hero-vinder__veld {
	flex: 1 1 160px;
}

.wv-hero-vinder__veld {
	position: relative;
	flex: 1 1 160px;
	min-width: 0;
}
.wv-hero-vinder__label {
	position: absolute;
	top: 9px;
	left: 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6b7280;
	pointer-events: none;
}
.wv-hero-vinder__select {
	-webkit-appearance: none;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 22px 38px 4px 14px;
	border: 0;
	border-radius: 6px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	color: #171717;
	cursor: pointer;
	/* Zelfde grijs op elke achtergrondkeuze; het veld tekent zich af tegen de
	   witte kaart van .wv-hero-vinder__rij. */
	background: #f4f4f4;
}
.wv-hero-vinder__select:focus-visible {
	outline: 2px solid #0F52BA;
	outline-offset: -2px;
}
/* Eigen pijltje in plaats van het systeempijltje; zelfde icoon als in het hoofdmenu. */
.wv-hero-vinder__veld::after {
	content: "keyboard_arrow_down";
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	font-family: 'Material Symbols Outlined';
	font-size: 24px;
	font-weight: 300;
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
	line-height: 1;
	color: #6b7280;
	pointer-events: none;
}
.wv-hero-vinder__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 52px;
	padding: 0 30px;
	border: 0;
	border-radius: 6px;
	background: #0F52BA;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 6px -1px, rgba(0, 0, 0, 0.12) 0px 2px 4px -1px;
}
.wv-hero-vinder__knop:hover {
	background: #0C4091;
	/* Storefront zet op button:hover een donkere tekstkleur; hier moet hij wit blijven. */
	color: #fff;
}
/* Bij de veldenweergave staat de knop naast twee brede velden; daar mag hij wat
   meer body hebben. Bij de tegels is de rij korter en volstaat de padding. */
@media (min-width: 701px) {
	.wv-hero-vinder:not(.wv-hero-vinder--tegels) .wv-hero-vinder__knop {
		min-width: 160px;
	}
}
.wv-hero-vinder__icon {
	flex-shrink: 0;
}
.wv-hero-vinder__icon--ms {
	font-size: 22px;
	font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

/* ---------- Blok: Merken (doorlopende logostrook) ---------- */
.wv-merken-block {
	--wv-merken-gap: 80px;
	padding: 40px 0;
	border-bottom: 1px solid #e4e4e4;
}
/* Geen extra ruimte boven de strook; de padding hierboven doet het werk. */
.wv-block + .wv-merken-block {
	margin-top: 0;
}
.wv-merken-block--full {
	width: 100%;
}
.wv-merken-block--container,
.wv-merken-block--wide {
	max-width: calc(var(--wv-container-max) - 2 * var(--wv-container-pad));
	margin-left: auto;
	margin-right: auto;
}
.wv-merken-block--wide {
	max-width: calc(var(--wv-container-wide) - 2 * var(--wv-container-pad));
}
.wv-merken-block__inner {
	max-width: var(--wv-container-wide);
	margin: 0 auto;
	padding: 0 var(--wv-container-pad);
	box-sizing: border-box;
}
.wv-merken-block__title {
	margin: 0 0 24px;
	font-size: 28px;
	font-weight: 600;
	text-align: center;
	display: none;
}
/* Het venster knipt de strook af en laat de randen vervagen, zodat logo's niet
   halverwege lijken af te breken. */
.wv-merken__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
/* De rij staat er twee keer in; de animatie schuift precies één rij op en springt
   dan terug, wat je niet ziet omdat beide rijen gelijk zijn. */
/* Breedte volgt de inhoud, zodat de twee rijen exact even breed zijn en de
   verschuiving van 50% precies één rij is. blocks.js zet --wv-merken-item op
   vensterbreedte / aantal zichtbaar; zonder JS valt hij terug op 180px. */
.wv-merken__track {
	display: flex;
	width: max-content;
	animation: wv-merken-loop var(--wv-merken-duur, 40s) linear infinite;
	will-change: transform;
}
.wv-merken__viewport:hover .wv-merken__track {
	animation-play-state: paused;
}
.wv-merken__set {
	display: flex;
	flex: 0 0 auto;
}
/* Ruimte via padding en niet via gap: een gap valt weg op de naad tussen de twee
   rijen, waardoor je daar een hapering zou zien. */
.wv-merken__logo {
	flex: 0 0 var(--wv-merken-item, 180px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 calc(var(--wv-merken-gap) / 2);
	box-sizing: border-box;
}
.wv-merken__logo img {
	max-width: 100%;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
}
@keyframes wv-merken-loop {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}
/* Bezoekers die minder beweging willen: strook staat stil. */
@media (prefers-reduced-motion: reduce) {
	.wv-merken__track {
		animation: none;
		transform: translateX(0);
	}
}
@media (max-width: 900px) {
	.wv-merken-block {
		--wv-merken-gap: 40px;
		padding: 32px 0;
	}

	.wv-merken__logo img {
		max-height: 40px;
	}
	.wv-merken-block__title {
		font-size: 22px;
	}
}

/* ---------- Blok: Beeld + tekst (twee kolommen, omdraaibaar) ---------- */
.wv-beeldtekst {
	padding: 40px 0;
}
.wv-beeldtekst__inner {
	max-width: var(--wv-container-max);
	margin: 0 auto;
	padding: 0 var(--wv-container-pad);
	box-sizing: border-box;
}
.wv-beeldtekst__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: center;
}
/* Tekst links: de foto naar de tweede kolom, zonder de markup om te draaien. */
.wv-beeldtekst--tekst-links .wv-beeldtekst__media {
	order: 2;
}
.wv-beeldtekst__media {
	min-width: 0;
}
.wv-beeldtekst__foto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
}
.wv-beeldtekst__foto--leeg {
	background: #eef1f6;
	display: flex;
	align-items: center;
	justify-content: center;
}
.wv-beeldtekst__title {
	margin: 0 0 16px;
	font-size: 28px;
	font-weight: 600;
}
.wv-beeldtekst__text {
	font-size: 16px;
	line-height: 1.7;
	color: #374151;
}
.wv-beeldtekst__text > :first-child { margin-top: 0; }
.wv-beeldtekst__text > :last-child { margin-bottom: 0; }
.wv-beeldtekst__text p { margin: 0 0 16px; }
.wv-beeldtekst__text a { color: #0F52BA; text-decoration: underline; }
.wv-beeldtekst__actions {
	margin-top: 28px;
}
/* Zelfde knop als de hoofdknop in de paginakop. */
.wv-beeldtekst__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 32px;
	border-radius: 6px;
	background: #0F52BA;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 6px -1px, rgba(0, 0, 0, 0.12) 0px 2px 4px -1px;
}
.wv-beeldtekst__btn:hover {
	background: #002980;
	color: #fff;
}
@media (max-width: 900px) {
	.wv-beeldtekst {
		padding: 32px 0;
	}
	.wv-beeldtekst__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	/* Foto altijd boven, ook als de kolommen op desktop omgedraaid zijn. */
	.wv-beeldtekst--tekst-links .wv-beeldtekst__media {
		order: 0;
	}
	.wv-beeldtekst__title {
		font-size: 22px;
	}
}

/* ---------- Uitklapbare vragen van het FAQ-blok (wv-faq__*). <details>/<summary>
   regelt open/dicht; het name-attribuut houdt er één tegelijk open. Het infoblok op
   de productpagina heeft eigen klassen (wv-info__* in product.css). ---------- */
.wv-faq__vraag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	margin-bottom: 0px;
	background: none;
	border-radius: 0px;
	cursor: pointer;
	list-style: none;
	font-size: 20px;
	color: #171717;
	font-weight: 500;
}
/* Alleen een scheidingslijn tússen de vragen, dus niet onder de laatste. */
.wv-faq__item + .wv-faq__item .wv-faq__vraag {
	border-top: 1px solid #e4e4e4;
}
/* Standaard driehoekje van <summary> weg (beide browser-varianten). */
.wv-faq__vraag::-webkit-details-marker { display: none; }
.wv-faq__vraag::marker { content: ""; }
/* Regel zonder antwoord: vaste tekst, dus geen handje. */
.wv-faq__item--vast .wv-faq__vraag { cursor: default; }
.wv-faq__vraag-text { flex: 1; }
/* Vraag met gekozen icoon: icoon vóór de vraag; zonder icoon blijft de vraag
   gewone tekst. */
/* Flexrij: elk stuk tekst wordt een eigen item, dus de gap valt ook tussen een </strong>
   en het woord erna. 8px daar; het icoon krijgt geen extra marge meer. */
.wv-faq__vraag-text--icoon {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #171717;
}
.wv-faq__vraag-text--icoon .wv-faq__vraag-icon {
	margin-right: 0px;
}
.wv-faq__vraag b,
.wv-faq__vraag strong {
	font-weight: 600;
}
.wv-faq__vraag-icon {
	flex-shrink: 0;
	color: #00A66A;
}
/* Google Material Symbol; twee klassen zodat de maat wint van Googles eigen
   .material-symbols-outlined (24px). */
.wv-faq__vraag-text .wv-faq__vraag-icon--ms {
	font-size: 20px;
	font-weight: 700;
	font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 24;
}
.wv-faq__icon {
	flex-shrink: 0;
	color: #171717;
	/* Overschrijft de vaste width/height/stroke-width uit de SVG-markup, die het
	   infoblok op de productpagina ook gebruikt. */
	width: 20px;
	height: 20px;
	stroke-width: 2;
}
/* Plus wordt min: de verticale streep draait weg en vervaagt. */
.wv-faq__icon-v {
	transform-origin: center;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.wv-faq__item[open] .wv-faq__icon-v {
	transform: rotate(90deg);
	opacity: 0;
}
.wv-faq__antwoord {
	padding: 0px 24px 20px 33px;
	font-size: 16px;
	line-height: 1.6;
	color: #4b5563;
}
.wv-faq__antwoord p { margin: 0 0 12px; }
.wv-faq__antwoord p:last-child { margin-bottom: 0; }
.wv-faq__antwoord ul { margin: 0 0 12px; padding-left: 20px; }
.wv-faq__antwoord li { margin-bottom: 4px; }
.wv-faq__antwoord a { color: #0F52BA; text-decoration: underline; }

/* ---------- Blok: Veelgestelde vragen (2/3 paginabreedte, gecentreerd) ---------- */
.wv-faq-sectie {
	padding: 64px 0;
}
.wv-faq-sectie__inner {
	/* Twee derde van de contentbreedte (container minus de zijmarges), in het midden.
	   De eigen zijmarge telt bij de max-width op, zodat de vragen zelf precies 2/3
	   breed zijn; die marge doet alleen iets op smalle schermen. */
	max-width: calc((var(--wv-container-max) - 2 * var(--wv-container-pad)) * 2 / 3 + 2 * var(--wv-container-pad));
	margin: 0 auto;
	padding: 0 var(--wv-container-pad);
	box-sizing: border-box;
}
.wv-faq-sectie__title {
	margin: 0 0 8px;
	font-size: 28px;
	font-weight: 600;
	text-align: center;
}
.wv-faq-sectie__subtitle {
	margin: 0 0 32px;
	font-size: 16px;
	line-height: 1.6;
	color: #4b5563;
	text-align: center;
}
.wv-faq-sectie__title:last-of-type + .wv-faq {
	margin-top: 32px;
}
@media (max-width: 900px) {
	.wv-faq-sectie {
		padding: 40px 0;
	}
	.wv-faq-sectie__inner {
		max-width: none;
	}
	.wv-faq-sectie__title {
		font-size: 22px;
	}
}

/* ---------- Blok: Vinder (dezelfde zoekvelden, als losse sectie) ---------- */
.wv-vinder-block {
	padding: 56px 0;
}
.wv-vinder-block--grijs  { background: rgba(27, 109, 237, 0.2); }
.wv-vinder-block--donker { background: #0A377C; }
/* Breedte van het gekleurde vlak, zelfde drie keuzes als de paginakop. De inhoud
   binnenin blijft in alle gevallen gecentreerd op 880px. */
.wv-vinder-block--full {
	width: 100%;
}
.wv-vinder-block--container,
.wv-vinder-block--wide {
	max-width: calc(var(--wv-container-max) - 2 * var(--wv-container-pad));
	margin-left: auto;
	margin-right: auto;
	border-radius: 8px;
}
.wv-vinder-block--wide {
	max-width: calc(var(--wv-container-wide) - 2 * var(--wv-container-pad));
}
.wv-vinder-block__inner {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 var(--wv-container-pad);
	box-sizing: border-box;
	text-align: center;
}
.wv-vinder-block__title {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
}
.wv-vinder-block__subtitle {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: #4b5563;
}
.wv-vinder-block .wv-hero-vinder {
	margin-top: 32px;
}
.wv-vinder-block--donker .wv-vinder-block__title {
	color: #fff;
}
.wv-vinder-block--donker .wv-vinder-block__subtitle {
	color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 700px) {
	.wv-vinder-block {
		padding: 40px 0;
	}
	.wv-vinder-block__title {
		font-size: 22px;
	}
	.wv-vinder-block__subtitle {
		font-size: 16px;
	}
	/* Twee velden naast elkaar worden op een telefoon te smal om te lezen; onder
	   elkaar dus. Zelfde specificiteit als de regel die ze naast elkaar zet. */
	.wv-hero-vinder__rij .wv-hero-vinder__veld {
		flex-basis: 100%;
	}
	.wv-hero-vinder__rij .wv-hero-vinder__knop {
		width: 100%;
		min-width: 0;
	}
}

/* ---------- Bewijsregel onder de split- en vinder-hero ---------- */
.wv-hero-bewijs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 26px;
	margin-top: 26px;
	font-size: 15px;
}
.wv-hero-bewijs__punt {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
/* In de bewijsregel staat de score naast andere feiten; het G-logo maakt het daar
   te druk. De sterren dragen de herkenning al. */
.wv-hero-bewijs__greviews .wv-greviews__g {
	display: none;
}
.wv-hero-bewijs__icon--ms {
	font-size: 21px;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.wv-page-header--split .wv-hero-bewijs {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 0px solid #d4d4d4;
	color: #171717;
}
.wv-page-header--split .wv-hero-bewijs__icon {
	color: #0F52BA;
}
.wv-page-header--vinder .wv-hero-bewijs {
	justify-content: center;
	color: #fff;
}
.wv-page-header--vinder .wv-hero-bewijs__icon {
	color: #6ee7b7;
}
/* De score staat in een <strong>; die krijgt sitebreed #171717 mee (style.css)
   en moet hier wit blijven. */
.wv-page-header--vinder .wv-hero-bewijs__greviews,
.wv-page-header--vinder .wv-hero-bewijs__greviews .wv-greviews__tekst,
.wv-page-header--vinder .wv-hero-bewijs__greviews strong {
	color: #fff;
}

/* Donkere achtergrondkleur bij split: alle tekst wit, de lijn en de tweede knop mee. */
.wv-page-header--op-donker .wv-page-header__title,
.wv-page-header--op-donker .wv-hero-bewijs,
.wv-page-header--op-donker .wv-hero-bewijs__greviews,
.wv-page-header--op-donker .wv-hero-bewijs__greviews .wv-greviews__tekst,
.wv-page-header--op-donker .wv-hero-bewijs__greviews strong {
	color: #fff;
}
.wv-page-header--op-donker .wv-page-header__subtitle {
	color: rgba(255, 255, 255, 0.82);
}
.wv-page-header--op-donker .wv-hero-bewijs {
	border-top-color: rgba(255, 255, 255, 0.25);
}
.wv-page-header--op-donker .wv-hero-bewijs__icon {
	color: #fff;
}
.wv-page-header--op-donker .wv-page-header__btn--primary {
	background: #fff;
	border-color: #fff;
	color: #171717;
}
.wv-page-header--op-donker .wv-page-header__btn--primary:hover {
	background: #e4e4e4;
	border-color: #e4e4e4;
	color: #171717;
}
.wv-page-header--op-donker .wv-page-header__btn--secondary {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}
.wv-page-header--op-donker .wv-page-header__btn--secondary:hover {
	background: #fff;
	border-color: #fff;
	color: #171717;
}

@media (max-width: 900px) {
	.wv-page-header--split .wv-page-header__inner {
		grid-template-columns: 1fr;
	}
	/* Beeld eerst: dezelfde volgorde als de klassieke kop op mobiel. */
	.wv-page-header--split .wv-page-header__beeld {
		order: -1;
		min-height: 220px;
	}
	.wv-page-header--split .wv-page-header__content {
		padding: 40px var(--wv-container-pad);
	}
	.wv-hero-vinder__veld {
		flex-basis: 100%;
	}
	.wv-hero-vinder__knop {
		width: 100%;
	}
	/* Op een telefoon telt elke pixel: kortere regels, kleinere velden en de
	   twee knoppen naast elkaar houden de hero binnen één schermhoogte. */
	.wv-page-header--vinder {
		min-height: 0;
		padding: 32px 0;
	}
	.wv-page-header--vinder .wv-page-header__subtitle {
		margin-top: 12px;
		font-size: 16px;
		line-height: 1.5;
	}
	.wv-hero-vinder {
		margin-top: 24px;
		gap: 6px;
	}
	.wv-hero-vinder__select,
	.wv-hero-vinder__knop {
		height: 54px;
	}
	.wv-hero-vinder__select {
		padding-top: 20px;
	}
	.wv-hero-bewijs {
		margin-top: 20px;
		gap: 6px 18px;
		font-size: 14px;
	}
}

/* ---------- Blok: Categorieën ---------- */
.wv-cat-block {
	padding: 0;
}
.wv-cat-block__inner {
	max-width: var(--wv-container-max);
	margin: 0 auto;
	padding: 0 var(--wv-container-pad);
	box-sizing: border-box;
}
.wv-cat-block__title {
	margin: 0px 0 24px;
	font-size: 28px;
	font-weight: 600;
}
/* Kop met de titel links en de carousel-pijltjes rechts. */
.wv-cat-block__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}
.wv-cat-block__head .wv-cat-block__title {
	margin-bottom: 24px;
}
.wv-cat-block__nav {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
	margin-bottom: 16px;
}
/* Past alles in beeld, dan zijn de pijltjes overbodig (klasse komt uit blocks.js). */
.wv-cat-block--static .wv-cat-block__nav {
	display: none;
}
.wv-cat-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #d4d4d4;
	border-radius: 999px;
	background: #fff;
	color: #171717;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.wv-cat-nav:hover {
	background: #f4f4f4;
	border-color: #171717;
}
.wv-cat-nav:disabled {
	opacity: 0.35;
	cursor: default;
}
.wv-cat-nav:disabled:hover {
	background: #fff;
	border-color: #d4d4d4;
}
.wv-cat-nav .wv-icoon--ms {
	font-size: 24px;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.wv-cat-carousel {
	--wv-cat-gap: 24px;
	/* Kaart vult exact het aantal kolommen, dus geen gat aan het eind bij scrollen. */
	--wv-cat-card-w: calc((100% - (var(--wv-cat-cols, 4) - 1) * var(--wv-cat-gap)) / var(--wv-cat-cols, 4));
	display: flex;
	gap: var(--wv-cat-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.wv-cat-carousel::-webkit-scrollbar {
	display: none;
}
.wv-cat-carousel .wv-cat-card {
	flex: 0 0 var(--wv-cat-card-w);
	scroll-snap-align: start;
}
.wv-cat-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: transparent;
	border: none;
	overflow: hidden;
}
.wv-cat-card__media {
	aspect-ratio: 1 / 1;
	background: #eef1f6 center / cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	border: 1.5px solid #e4e4e4;
}
.wv-cat-card__body {
	padding: 16px 16px 0 0px;
}
.wv-cat-card__name {
	display: block;
	font-size: 18px;
	font-weight: 600;
	color: #171717;
}
/* De hele kaart is de link; bij aanwijzen kleurt alleen de naam mee. Ook op
   toetsenbordfocus, anders reageert de kaart alleen op de muis. */
.wv-cat-card:hover .wv-cat-card__name,
.wv-cat-card:focus-visible .wv-cat-card__name {
	color: #0F52BA;
}
.wv-cat-card__count {
	display: block;
	margin-top: 0;
	font-size: 13px;
	color: #6b7280;
}

@media (max-width: 960px) {
	.wv-cat-carousel { --wv-cat-card-w: calc((100% - var(--wv-cat-gap)) / 2.2); }
}
@media (max-width: 600px) {
	.wv-page-header { min-height: 0; padding: 40px 0; }
	.wv-page-header--vinder { padding: 32px 0; }
	/* Split heeft geen padding: de foto loopt tot de rand van de sectie. */
	.wv-page-header--split { padding: 0; }
	.wv-page-header__btn { flex: 1 1 auto; }
	/* Twee per rij op de telefoon; één per rij maakte de pagina eindeloos lang. */
	.wv-cat-carousel {
		--wv-cat-gap: 12px;
		--wv-cat-card-w: calc((100% - var(--wv-cat-gap)) / 1.8);
	}
	/* Op een telefoon swipe je met je vinger; de pijltjes zijn dan ballast. */
	.wv-cat-block__nav {
		display: none;
	}
	.wv-cat-block__title {
		margin-bottom: 18px;
		font-size: 24px;
	}
	.wv-cat-card__body {
		padding: 12px;
	}
	.wv-cat-card__name {
		font-size: 15px;
		line-height: 1.3;
	}
	.wv-cat-card__count {
		font-size: 13px;
	}
}

/* ---------- Blok: Producten (kaarten uit een categorie) ---------- */
/* Kaartstijl zelf komt uit archive.css (.wv-product-card) — identiek aan de
   winkelpagina. Hier alleen de sectie + het grid met instelbaar aantal kolommen. */
.wv-products-block {
	padding: 0;
}
.wv-products-block__inner {
	max-width: var(--wv-container-max);
	margin: 0 auto;
	padding: 0 var(--wv-container-pad);
	box-sizing: border-box;
}
.wv-products-block__title {
	margin: 0 0 24px;
	font-size: 28px;
	font-weight: 600;
}
.wv-products-block ul.products {
	display: grid;
	grid-template-columns: repeat(var(--wv-prod-cols, 5), 1fr);
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.wv-products-block ul.products::before,
.wv-products-block ul.products::after {
	content: none;
}
@media (max-width: 1024px) {
	.wv-products-block ul.products { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 700px) {
	.wv-products-block ul.products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Ingeklapte SEO-tekst op de telefoon: vaste hoogte met een vervagende onderrand,
   zodat zichtbaar is dat er meer staat. Markup komt van tekstblok.js. */
.wv-text-block__cols--ingeklapt {
	max-height: 240px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.wv-text-block__meer {
	display: inline-flex;
	align-items: center;
	margin-top: 12px;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	color: #0F52BA;
	text-decoration: underline;
	cursor: pointer;
}

/* ---------- Blok: Tekst (1 of 2 kolommen) ---------- */
.wv-text-block {
	padding: 20px 0;
}
.wv-text-block__inner {
	max-width: var(--wv-container-max);
	margin: 0 auto;
	padding: 0 var(--wv-container-pad);
	box-sizing: border-box;
}
.wv-text-block__title {
	margin: 0 0 24px;
	font-size: 36px;
	font-weight: 700;
}
.wv-text-block__cols {
	display: grid;
	grid-template-columns: repeat(var(--wv-txt-cols, 1), 1fr);
	gap: 72px;
}
.wv-text-block__col {
	font-size: 16px;
	line-height: 1.7;
	color: #374151;
}
.wv-text-block__col > :first-child { margin-top: 0; }
.wv-text-block__col > :last-child { margin-bottom: 0; }
.wv-text-block__col h2,
.wv-text-block__col h3,
.wv-text-block__col h4 {
	line-height: 1.3;
	margin: 28px 0 12px;
}
.wv-text-block__col p { margin: 0 0 16px; }
.wv-text-block__col a { color: #0F52BA; text-decoration: underline; }
.wv-text-block__col a:hover { text-decoration: none; }
/* Sitebreed krijgt <strong> de kleur #171717; binnen een link moet de linkkleur
   winnen, anders hangt het van de nesting af of een link blauw of zwart is. */
.wv-text-block__col a strong,
.wv-text-block__col a b { color: inherit; }
.wv-text-block__col ul,
.wv-text-block__col ol { margin: 0 0 16px; padding-left: 20px; }
.wv-text-block__col li { margin-bottom: 6px; }
@media (max-width: 700px) {
	.wv-text-block__cols { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Blok: Reviews ---------- */
/* Lichte band over de volle breedte; kaarten in de huisstijl (wit, rand #E5E7EB, radius 8px). */
.wv-reviews-block {
	padding: 64px 0;
	background: #f4f4f4;
}
.wv-reviews-block__inner {
	max-width: var(--wv-container-max);
	margin: 0 auto;
	padding: 0 var(--wv-container-pad);
	box-sizing: border-box;
}
.wv-reviews-block__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 40px;
	text-align: center;
}
.wv-reviews-block__title {
	margin: 0;
	font-size: 28px;
	font-weight: 600;
}
.wv-reviews-block__badge {
	font-size: 16px;
}
.wv-reviews-block__badge .wv-greviews__g {
	width: 22px;
	height: 22px;
}
.wv-reviews-block__badge .wv-greviews__stars svg {
	width: 20px;
	height: 20px;
}
.wv-reviews-block__sub {
	margin: 0;
	font-size: 14px;
	color: #6b7280;
}
/* Kaarten: drie naast elkaar; bij de carrousel schuift dezelfde rij binnen een venster. */
.wv-reviews {
	overflow: hidden;
}
.wv-reviews__track {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.wv-reviews--carrousel .wv-reviews__track {
	display: flex;
	transition: transform .5s ease;
}
.wv-reviews--carrousel .wv-review {
	flex: 0 0 calc((100% - 48px) / 3);
}
.wv-review {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 24px;
	background: #fff;
	border: 1px solid #E5E7EB;
	border-radius: 8px;
	box-sizing: border-box;
}
.wv-review__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.wv-stars {
	display: inline-flex;
	gap: 2px;
	line-height: 0;
}
.wv-star {
	width: 18px;
	height: 18px;
	color: #D1D5DB;
}
.wv-star--on {
	color: #FBBC04;
}
.wv-review__g {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
/* Storefront geeft blockquote een rand en inspringing; hier gewone tekst. */
.wv-review__text {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 16px;
	font-style: normal;
	line-height: 1.6;
	color: #171717;
}
.wv-review__foot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
}
.wv-review__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #EEF3FB;
	color: #0F52BA;
	font-size: 16px;
	font-weight: 700;
}
.wv-review__id {
	display: flex;
	flex-direction: column;
}
.wv-review__name {
	font-size: 15px;
	font-weight: 600;
	color: #171717;
	line-height: 1.4;
}
.wv-review__sub {
	font-size: 13px;
	color: #6b7280;
}
.wv-reviews__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}
.wv-reviews__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #D1D5DB;
	cursor: pointer;
}
.wv-reviews__dot:hover,
.wv-reviews__dot:focus {
	background: #9CA3AF;
}
.wv-reviews__dot.is-active,
.wv-reviews__dot.is-active:hover {
	background: #0F52BA;
}
@media (max-width: 1024px) {
	.wv-reviews__track {
		grid-template-columns: repeat(2, 1fr);
	}
	.wv-reviews--carrousel .wv-review {
		flex-basis: calc((100% - 24px) / 2);
	}
}
@media (max-width: 640px) {
	.wv-reviews-block {
		padding: 44px 0;
	}
	.wv-reviews__track {
		grid-template-columns: 1fr;
	}
	.wv-reviews--carrousel .wv-review {
		flex-basis: 100%;
	}
}

/* ---------- Blok: USP (3 punten) ---------- */
.wv-usp-block {
	padding: 0;
}
.wv-usp-block__inner {
	max-width: var(--wv-container-max);
	margin: 0 auto;
	padding: 0 var(--wv-container-pad);
	box-sizing: border-box;
}
.wv-usp-block__title {
	margin: 0 0 40px;
	font-size: 24px;
	font-weight: 600;
	text-align: center;
}
.wv-usp-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
.wv-usp-step {
	text-align: center;
}
/* Icoon in een lichtblauw rondje; een eigen afbeelding of nummer vult dezelfde plek. */
.wv-usp-step__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #EEF3FB;
	color: #0F52BA;
}
.wv-usp-step__icon img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
/* Google Material Symbol op 36px, lijndikte 300. Twee klassen in de selector, zodat de
   maat wint van Googles eigen .material-symbols-outlined (24px), die later laadt. */
.wv-usp-step__icon .wv-usp-step__ms {
	font-size: 32px;
	font-weight: 300;
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.wv-usp-step__num {
	font-size: 24px;
	font-weight: 700;
}
.wv-usp-step__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
}
.wv-usp-step__text {
	font-size: 14px;
	line-height: 1;
	color: #6b7280;
}
/* Liggende variant: icoon links, tekst rechts, compacter in hoogte. */
.wv-usp-block--liggend .wv-usp-step {
	display: flex;
	align-items: center;
	gap: 20px;
	text-align: left;
}
.wv-usp-block--liggend .wv-usp-step__icon {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	margin: 0;
}
.wv-usp-block--liggend .wv-usp-step__num {
	font-size: 20px;
}
.wv-usp-block--liggend .wv-usp-step__title {
	margin: 0 0 2px;
}
.wv-usp-block--liggend .wv-usp-step__text {
	max-width: none;
	margin: 0;
}
@media (max-width: 768px) {
	.wv-usp-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.wv-usp-block--liggend .wv-usp-grid {
		gap: 20px;
	}
}