/*
 * front-page.css — de opmaak van de voorpagina (baserules regel 8).
 *
 * ── Het idee ──────────────────────────────────────────────────────────────
 *
 * De pagina is één nacht. Bovenaan is het donker: daar staat wie we zijn.
 * Halverwege is het licht: daar wordt gekozen, vergeleken en gemeten. Onderaan
 * wordt het weer donker en loopt de pagina de footer in. Dat is waarom de
 * secties van kleur wisselen in deze volgorde en niet in een andere, en waarom
 * de hero onderaan een bolling heeft — dat is waar het licht wordt.
 *
 * ── Wat hier van dekbedgekte.nl komt ──────────────────────────────────────
 *
 * De kleuren, de lettertypes en de gewichten staan in main.css en zijn daar van
 * die site afgelezen (zie assets/css/BRONWAARDEN.md). Deze pagina gebruikt ze
 * alleen. Drie dingen komen erbij en die staan hieronder met de reden erbij:
 *
 *   --vpNacht*      de nachttinten. Ze lopen door van --kleurDiep (#10054D) naar
 *                   beneden; die kleur staat in de kit van die site. Ze zijn
 *                   hier begonnen en staan inmiddels in main.css, want de
 *                   winkel gebruikt dezelfde nacht.
 *   --vpDageraad    het warme accent. De kleur zelf (#FFBC7D) staat als
 *                   --kleurDageraad in main.css, want de footer gebruikt hem
 *                   ook voor de sterren. Hier is hij het licht van de ochtend:
 *                   de geschreven regel, de sterren, de hover van de knop.
 *   --vpPapier      het lichte vlak tussen de twee donkere uiteinden.
 *
 * ── Wat hier bewust afwijkt ───────────────────────────────────────────────
 *
 * De lettergroottes. Die site zet de lopende tekst op 14 px en h1 op 28 px;
 * dat is voor een voorpagina uit 2026 te klein om iets mee te zeggen. De rest
 * van de site houdt de waarden van main.css aan — hier staat een vloeiende
 * schaal met clamp(), zodat de kop op een telefoon net zo goed valt als op een
 * breed scherm. Baserules regel 14 vraagt om dezelfde site, maar dan moderner en
 * gebruiksvriendelijker; dit is waar dat begon. De schaal zelf staat inmiddels
 * in main.css, want de winkel gebruikt hem ook.
 */

/* ==========================================================================
   Tokens van deze pagina
   ========================================================================== */

.voorpagina {
	/* De nacht en het licht staan in main.css: de winkel gebruikt dezelfde
	   tinten, en dan hoort de waarde daar en niet hier. De korte namen blijven,
	   zodat de rest van dit bestand leesbaar blijft. */
	--vpNacht: var(--kleurNacht);
	--vpNacht2: var(--kleurNacht2);
	--vpNacht3: var(--kleurNacht3);
	--vpPapier: var(--kleurPapier);
	--vpMist: var(--kleurMist);
	--vpDageraad: var(--kleurDageraad);
	--vpLilaLicht: var(--kleurLilaLicht);

	/* De drie sferen van de warmtekiezer. Die zijn van deze pagina alleen. */
	--vpKoel: #5E93C4;
	--vpMild: #6FA36A;
	--vpWarm: #E8874A;

	/* Vloeiende typografie — zie de kop van dit bestand. Ook die staat in
	   main.css sinds de winkel dezelfde schaal aanhoudt. */
	--vpReus: var(--vloeiendReus);
	--vpGroot: var(--vloeiendGroot);
	--vpMidden: var(--vloeiendMidden);
	--vpLopend: var(--vloeiendLopend);
	--vpKlein: var(--vloeiendKlein);
	--vpLabel: var(--vloeiendLabel);

	/* De rust tussen de secties. */
	--vpSectie: clamp(3.75rem, 7vw, 7rem);
	--vpRonding: 22px;
	--vpRondingGroot: 28px;

	/* Iets meer lucht dan de rest van de site; de tegels hebben het nodig. */
	--omhulselBreedte: 1240px;

	background-color: var(--vpPapier);
	font-size: var(--vpLopend);
	line-height: 1.6;
}

@media (max-width: 1024px) {
	.voorpagina {
		--omhulselBreedte: 748px;
	}
}

@media (max-width: 767px) {
	.voorpagina {
		--omhulselBreedte: none;
	}
}

/* ==========================================================================
   Wat elke sectie deelt
   ========================================================================== */

.vpSectie__kop {
	max-inline-size: 44rem;
	margin-block-end: clamp(2rem, 4vw, 3rem);
}

.vpSectie__titel {
	font-size: var(--vpGroot);
	font-weight: 900;
	line-height: 1.06;
	letter-spacing: -0.025em;
	text-transform: uppercase;
}

.vpSectie__intro {
	margin-block-start: 0.9rem;
	color: var(--kleurSecundair);
	font-size: var(--vpLopend);
	line-height: 1.65;
}

/* De tekstlink met een pijl erachter. */
.vpTekstknop {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--kleurPrimair);
	font-size: var(--vpKlein);
	font-weight: 700;
}

.vpTekstknop .icoon {
	transition: transform var(--duurMiddel) var(--soepel);
}

/* ==========================================================================
   De hero — de nacht
   ========================================================================== */

.vpHero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3rem, 6vw, 5.5rem) clamp(8rem, 14vw, 13rem);
	background-color: var(--vpNacht);
	background-image:
		radial-gradient(118% 88% at 76% 4%, rgb(83 70 128 / 62%) 0%, rgb(83 70 128 / 0%) 58%),
		linear-gradient(168deg, #07021B 0%, #150A3D 46%, #2A1A63 100%);
	color: var(--kleurWit);
}

.vpHero__nacht {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.vpHero__maan {
	position: absolute;
	inset-block-start: -14%;
	inset-inline-end: -8%;
	inline-size: clamp(280px, 38vw, 560px);
	aspect-ratio: 1;
	border-radius: 50%;
	background-image: radial-gradient(
		circle at 34% 32%,
		rgb(255 255 255 / 24%) 0%,
		rgb(201 195 220 / 13%) 44%,
		rgb(201 195 220 / 0%) 70%
	);
}

/* Het eerste licht, laag en breed, precies waar de pagina straks licht wordt. */
.vpHero__gloed {
	position: absolute;
	inset-block-end: -26%;
	inset-inline-start: 4%;
	inline-size: clamp(320px, 54vw, 780px);
	aspect-ratio: 2 / 1;
	background-image: radial-gradient(
		ellipse at center,
		rgb(255 188 125 / 20%) 0%,
		rgb(255 188 125 / 0%) 68%
	);
}

.vpHero__sterren {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	inline-size: 100%;
	block-size: clamp(220px, 46%, 400px);
	opacity: 0.5;

	/* Op de hele <svg> en niet op elke cirkel: zie hero.php. */
	animation: vpFlonker 5s ease-in-out infinite;
}

.vpHero__ster {
	fill: #FFFFFF;
}

@keyframes vpFlonker {
	0%,
	100% {
		opacity: 0.16;
	}

	50% {
		opacity: 0.8;
	}
}

.vpHero__inhoud {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

.vpHero__titel {
	margin-block: 0.4rem 0;
	font-size: var(--vpReus);
	font-weight: 900;
	line-height: 0.98;
	letter-spacing: -0.032em;
}

.vpHero__regel {
	display: block;
	text-transform: uppercase;
}

/* De geschreven regel. Caveat staat op dekbedgekte.nl ook op de voorpagina;
   daar is hij lila, hier in het licht van de ochtend zodat hij losstaat van
   het paars van de nacht eromheen. */
.vpHero__geschreven {
	display: block;
	margin-block-start: 0.12em;
	color: var(--vpDageraad);
	font-family: var(--letterGeschreven);
	font-size: clamp(1.9rem, 0.85rem + 3.6vw, 3.5rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.02;
	text-transform: none;
}

.vpHero__onderschrift {
	max-inline-size: 34rem;
	margin-block-start: 1.35rem;
	color: rgb(255 255 255 / 76%);
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
	line-height: 1.65;
}

.vpHero__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-block-start: 2rem;
}

.vpHero .knopPil {
	background-image: none;
	background-color: var(--kleurWit);
	color: var(--vpNacht2);
	box-shadow: 0 12px 30px rgb(7 2 27 / 45%);
}

.vpHero .knopPil:hover {
	background-color: var(--vpDageraad);
	color: var(--vpNacht);
}

.vpHero .knopPil--rand {
	background-color: transparent;
	color: var(--kleurWit);
	box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 40%);
}

.vpHero .knopPil--rand:hover {
	background-color: rgb(255 255 255 / 12%);
	color: var(--kleurWit);
	box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 70%);
}

.vpHero__bewijs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
	margin-block-start: 2.1rem;
}

.vpHero__bewijsItem {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: rgb(255 255 255 / 72%);
	font-size: var(--vpKlein);
	font-weight: 500;
}

/* De beeldstapel */

.vpHero__beeld {
	position: relative;
	padding-block-end: clamp(1.5rem, 3vw, 2.75rem);
	padding-inline-start: clamp(1.5rem, 3vw, 2.75rem);
}

.vpHero__kaart {
	position: relative;
	overflow: hidden;
	border-radius: var(--vpRondingGroot);
	box-shadow: 0 34px 80px rgb(5 2 20 / 58%);
}

.vpHero__kaart--groot {
	aspect-ratio: 5 / 4;
}

.vpHero__kaart--klein {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 46%;
	aspect-ratio: 4 / 3;
	border: 6px solid var(--vpPapier);
	border-radius: var(--vpRonding);
	box-shadow: 0 24px 50px rgb(5 2 20 / 55%);
}

.vpHero__foto {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.vpHero__kaart--groot .vpHero__foto {
	object-position: 42% 50%;
}

.vpHero__cijfer {
	position: absolute;
	inset-block-start: clamp(1rem, 2.5vw, 2rem);
	inset-inline-end: clamp(-1rem, -1vw, 0rem);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.05rem;
	border-radius: var(--rondingPil);
	background-color: rgb(255 255 255 / 96%);
	color: var(--vpNacht2);
	box-shadow: 0 16px 34px rgb(5 2 20 / 42%);
}

.vpHero__cijferGetal {
	font-size: 1.1rem;
	font-weight: 900;
	letter-spacing: -0.02em;
}

.vpHero__cijferTekst {
	color: var(--kleurSecundair);
	font-size: var(--vpLabel);
	font-weight: 600;
	line-height: 1.3;
	max-inline-size: 7.5rem;
}

/* Waar de nacht licht wordt. */
.vpHero__ochtend {
	position: absolute;
	inset-block-end: -1px;
	inset-inline: -12%;
	block-size: clamp(56px, 8vw, 120px);
	background-color: var(--vpPapier);
	border-start-start-radius: 50% 100%;
	border-start-end-radius: 50% 100%;
}

/* De hero komt op. Met een animatie en niet met een script: dan staat de tekst
   er ook als het script niet laadt, en is de beginstand nooit zichtbaar. */
@media (prefers-reduced-motion: no-preference) {
	.vpHero [data-dekbedgekte-hero-deel],
	.vpHero__beeld {
		animation: vpOpkomen 0.75s var(--soepel) both;
	}

	.vpHero [data-dekbedgekte-hero-deel]:nth-child(1) {
		animation-delay: 0.05s;
	}

	.vpHero [data-dekbedgekte-hero-deel]:nth-child(2) {
		animation-delay: 0.14s;
	}

	.vpHero [data-dekbedgekte-hero-deel]:nth-child(3) {
		animation-delay: 0.23s;
	}

	.vpHero [data-dekbedgekte-hero-deel]:nth-child(4) {
		animation-delay: 0.32s;
	}

	.vpHero [data-dekbedgekte-hero-deel]:nth-child(5) {
		animation-delay: 0.41s;
	}

	.vpHero__beeld {
		animation-delay: 0.2s;
		animation-duration: 1s;
	}
}

@keyframes vpOpkomen {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   De servicebalk
   ========================================================================== */

.vpDiensten {
	position: relative;
	z-index: 2;
	margin-block-start: clamp(-4.5rem, -6vw, -3rem);
}

/* Zoveel kolommen als er diensten zijn: een vaste vier laat een leeg vak
   achter zodra de redactie er drie invult. */
.vpDiensten__lijst {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 1px;
	overflow: hidden;
	background-color: var(--kleurLijn);
	border-radius: var(--vpRonding);
	box-shadow: 0 26px 60px rgb(21 10 61 / 16%);
}

.vpDienst {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1.35rem 1.35rem;
	background-color: var(--kleurWit);
}

.vpDienst__icoon {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 2.6rem;
	block-size: 2.6rem;
	border-radius: 50%;
	background-color: var(--vpMist);
	color: var(--kleurPrimair);
}

.vpDienst__tekst {
	display: grid;
	gap: 0.1rem;
}

.vpDienst__titel {
	font-size: var(--vpKlein);
	font-weight: 700;
	line-height: 1.3;
}

.vpDienst__regel {
	color: var(--kleurSecundair);
	font-size: var(--vpLabel);
	line-height: 1.4;

	/* Gelijke regels: anders blijft er op een tablet "€" achter op de ene
	   regel en "50" op de volgende. */
	text-wrap: balance;
}

/* ==========================================================================
   De warmtekiezer
   ========================================================================== */

.vpSeizoen {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(4.5rem, 8vw, 7rem) var(--vpSectie);
}

/* De gloed die meeverkleurt met de kaart waar de bezoeker op staat. Het is één
   vlak met een masker eroverheen, want een background-color kan overvloeien en
   een background-image niet. */
.vpSeizoen__sfeer {
	position: absolute;
	inset-block-start: -10%;
	inset-inline: -10%;
	block-size: 90%;
	z-index: -1;
	background-color: rgb(83 70 128 / 9%);
	mask-image: radial-gradient(58% 62% at 50% 34%, #000000 0%, rgb(0 0 0 / 0%) 74%);
	transition: background-color 0.7s var(--soepel);
}

.vpSeizoen[data-dekbedgekte-sfeer="koel"] .vpSeizoen__sfeer {
	background-color: rgb(94 147 196 / 26%);
}

.vpSeizoen[data-dekbedgekte-sfeer="mild"] .vpSeizoen__sfeer {
	background-color: rgb(111 163 106 / 24%);
}

.vpSeizoen[data-dekbedgekte-sfeer="warm"] .vpSeizoen__sfeer {
	background-color: rgb(232 135 74 / 28%);
}

.vpSeizoen .vpSectie__kop,
.vpMaten .vpSectie__kop {
	margin-inline: auto;
	text-align: center;
}

.vpSeizoen__lijst {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}

.vpSeizoenKaart {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.7rem;
	padding: clamp(1.5rem, 2.4vw, 2.1rem);
	background-color: var(--kleurWit);
	border: 1px solid var(--kleurLijn);
	border-radius: var(--vpRondingGroot);
	box-shadow: 0 2px 4px rgb(21 10 61 / 4%);
	transition:
		transform var(--duurMiddel) var(--soepel),
		box-shadow var(--duurMiddel) var(--soepel),
		border-color var(--duurMiddel) var(--soepel);
}

.vpSeizoenKaart:hover,
.vpSeizoenKaart:focus-within {
	transform: translateY(-6px);
	border-color: transparent;
	box-shadow: 0 28px 56px rgb(21 10 61 / 14%);
}

.vpSeizoenKaart__icoon {
	display: grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: 50%;
	background-color: var(--vpMist);
}

.vpSeizoenKaart--koel .vpSeizoenKaart__icoon {
	color: var(--vpKoel);
}

.vpSeizoenKaart--mild .vpSeizoenKaart__icoon {
	color: var(--vpMild);
}

.vpSeizoenKaart--warm .vpSeizoenKaart__icoon {
	color: var(--vpWarm);
}

.vpSeizoenKaart__titel {
	font-size: var(--vpMidden);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

/* De hele kaart is klikbaar, maar er staat één link in — zo hoort een
   schermlezer hem ook maar één keer. */
.vpSeizoenKaart__link {
	color: var(--kleurTekst);
}

.vpSeizoenKaart__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.vpSeizoenKaart__link:hover {
	text-decoration: none;
}

.vpSeizoenKaart__temperatuur {
	color: var(--kleurSecundair);
	font-size: var(--vpKlein);
	font-weight: 600;
}

.vpSeizoenKaart__tekst {
	color: var(--kleurSecundair);
	font-size: var(--vpKlein);
	line-height: 1.6;
}

.vpSeizoenKaart__knop {
	margin-block-start: auto;
	padding-block-start: 0.35rem;
}

.vpSeizoenKaart:hover .vpTekstknop .icoon {
	transform: translateX(4px);
}

/* De warmtemeter */

.vpMeter {
	display: flex;
	gap: 5px;
	inline-size: 100%;
	max-inline-size: 11rem;
}

.vpMeter__deel {
	flex: 1 1 0;
	block-size: 8px;
	border-radius: 4px;
	background-color: var(--kleurLijn);
	transform-origin: center;
	transition: transform var(--duurMiddel) var(--soepel);
	transition-delay: calc((var(--vpStap, 1) - 1) * 45ms);
}

.vpSeizoenKaart--koel .vpMeter__deel.isAan {
	background-color: var(--vpKoel);
}

.vpSeizoenKaart--mild .vpMeter__deel.isAan {
	background-color: var(--vpMild);
}

.vpSeizoenKaart--warm .vpMeter__deel.isAan {
	background-color: var(--vpWarm);
}

.vpSeizoenKaart:hover .vpMeter__deel.isAan {
	transform: scaleY(1.6);
}

/* ==========================================================================
   Het assortiment
   ========================================================================== */

.vpAssortiment {
	padding-block: var(--vpSectie);
	background-color: var(--kleurWit);
}

.vpRaster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(150px, 15vw, 205px);
	gap: clamp(0.75rem, 1.4vw, 1.25rem);
}

.vpTegel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: var(--vpRonding);
	background-color: var(--vpNacht2);
}

.vpTegel--breed {
	grid-column: span 2;
}

.vpTegel--hoog {
	grid-row: span 2;
}

.vpTegel--groot {
	grid-column: span 2;
	grid-row: span 2;
}

.vpTegel__beeld {
	position: absolute;
	inset: 0;
}

.vpTegel__foto {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--soepel);
}

.vpTegel:hover .vpTegel__foto {
	transform: scale(1.07);
}

.vpTegel__waas {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to top,
		rgb(7 2 27 / 85%) 0%,
		rgb(7 2 27 / 42%) 44%,
		rgb(7 2 27 / 4%) 80%
	);
	transition: opacity var(--duurMiddel) var(--soepel);
}

.vpTegel:hover .vpTegel__waas {
	opacity: 0.86;
}

.vpTegel__inhoud {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.15rem;
	block-size: 100%;
	padding: clamp(1rem, 1.8vw, 1.6rem);
	color: var(--kleurWit);
}

.vpTegel__titel {
	font-size: clamp(1.05rem, 0.85rem + 0.7vw, 1.55rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.08;
	text-transform: uppercase;

	/* "Dekbedovertrekken" past op een smalle tegel niet op één regel. Zonder
	   dit breekt reset.css hem middenin een lettergreep af; met een
	   afbreekstreepje op de juiste plek leest hij gewoon door. De taal staat
	   op <html>, dus de browser weet waar die streep hoort. */
	hyphens: auto;
}

.vpTegel--groot .vpTegel__titel {
	font-size: clamp(1.5rem, 1rem + 1.6vw, 2.35rem);
}

.vpTegel__link {
	color: inherit;
}

.vpTegel__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.vpTegel__link:hover {
	text-decoration: none;
}

.vpTegel__regel {
	color: rgb(255 255 255 / 76%);
	font-size: var(--vpKlein);
	line-height: 1.45;
}

.vpTegel__pijl {
	position: absolute;
	inset-block-start: clamp(0.8rem, 1.5vw, 1.2rem);
	inset-inline-end: clamp(0.8rem, 1.5vw, 1.2rem);
	display: grid;
	place-items: center;
	inline-size: 2.4rem;
	block-size: 2.4rem;
	border-radius: 50%;
	background-color: rgb(255 255 255 / 16%);
	color: var(--kleurWit);
	transition:
		background-color var(--duurMiddel) var(--soepel),
		color var(--duurMiddel) var(--soepel),
		transform var(--duurMiddel) var(--soepel);
}

.vpTegel:hover .vpTegel__pijl {
	background-color: var(--kleurWit);
	color: var(--vpNacht2);
	transform: translate(2px, -2px);
}

/* ==========================================================================
   De producten
   ========================================================================== */

.vpProducten {
	padding-block: var(--vpSectie);
	background-color: var(--vpPapier);
}

.vpProducten__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
}

.vpProducten__kop .vpSectie__kop {
	margin-block-end: 0;
}

.vpProducten__sturing {
	display: flex;
	gap: 0.6rem;
}

.vpRail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(15rem, 1fr);
	gap: clamp(0.75rem, 1.4vw, 1.25rem);
	margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;

	/* De schaduw van een kaart mag niet afgesneden worden door de schuifbak. */
	padding-block: 4px 1.25rem;
}

/*
 * `position: relative` houdt de schermlezertekst in de prijs (WooCommerce
 * zet die absoluut) binnen de kaart. Zonder dat hangt hij aan de pagina, snijdt
 * de schuifbak hem niet af en wordt de hele pagina zo breed als de rail — en
 * bij hover, als de transform de kaart tijdelijk tot houvast maakt, springt
 * die overloop aan en uit.
 */
.vpProduct {
	position: relative;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--kleurWit);
	border: 1px solid var(--kleurLijn);
	border-radius: var(--vpRonding);
	transition:
		transform var(--duurMiddel) var(--soepel),
		box-shadow var(--duurMiddel) var(--soepel);
}

.vpProduct:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px rgb(21 10 61 / 12%);
}

.vpProduct__beeld {
	position: relative;
	aspect-ratio: 1;
	background-color: var(--vpMist);
}

.vpProduct__foto {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.vpProduct__vlag {
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-start: 0.75rem;
	padding: 0.25rem 0.6rem;
	border-radius: var(--rondingPil);
	background-color: var(--kleurAanbieding);
	color: var(--kleurWit);
	font-size: var(--vpLabel);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vpProduct__tekst {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1rem 1.1rem 1.25rem;
}

.vpProduct__titel {
	font-size: var(--vpKlein);
	font-weight: 600;
	line-height: 1.4;
}

.vpProduct__link {
	color: inherit;
}

.vpProduct__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vpProduct__link:hover {
	text-decoration: none;
}

.vpProduct__prijs {
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.vpProduct__voorraad {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--kleurGroen);
	font-size: var(--vpLabel);
	font-weight: 600;
}

.vpProducten__meer {
	margin-block-start: 0.5rem;
	text-align: center;
}

/* ==========================================================================
   De maatwijzer
   ========================================================================== */

.vpMaten {
	padding-block: var(--vpSectie);
	background-color: var(--vpPapier);
}

.vpMaten__lijst {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: clamp(0.65rem, 1.4vw, 1.1rem);
	max-inline-size: 66rem;
	margin-inline: auto;
}

.vpMaat__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	min-block-size: 15rem;
	padding: 1.5rem 1rem 1.25rem;
	border: 1px solid var(--kleurLijn);
	border-radius: var(--vpRonding);
	color: var(--kleurTekst);
	text-align: center;
	transition:
		transform var(--duurMiddel) var(--soepel),
		border-color var(--duurMiddel) var(--soepel),
		box-shadow var(--duurMiddel) var(--soepel);
}

.vpMaat__link:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: 0 20px 40px rgb(21 10 61 / 12%);
	text-decoration: none;
}

/*
 * Het bed op schaal. De breedte en de lengte uit het veld zijn hier ook echt de
 * breedte en de lengte, keer een vaste factor — dus 240 × 220 is breder dan
 * 140 × 200 en dat hoeft niemand uit twee getallen af te leiden.
 * `margin-block-start: auto` duwt de vlakken omlaag, zodat ze allemaal op
 * dezelfde lijn staan en alleen de bovenkant verschilt.
 */
.vpMaat__vorm {
	margin-block-start: auto;
	inline-size: calc(var(--vpBreedte, 140) * 0.46px);
	block-size: calc(var(--vpLengte, 200) * 0.46px);
	border-radius: 8px;
	background-image: linear-gradient(158deg, #EFECF6 0%, #D6CFE8 100%);
	box-shadow: inset 0 0 0 1px rgb(83 70 128 / 16%);
	transition: background-image var(--duurMiddel) var(--soepel);
}

.vpMaat__link:hover .vpMaat__vorm {
	background-image: linear-gradient(158deg, #6B59A8 0%, #3B2F63 100%);
}

.vpMaat__label {
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.vpMaat__soort {
	color: var(--kleurSecundair);
	font-size: var(--vpLabel);
	font-weight: 600;
}

/* ==========================================================================
   De lopende tekst
   ========================================================================== */

.vpVerhaal {
	padding-block: clamp(3.5rem, 6vw, 5.5rem);
	background-color: var(--kleurWit);
}

.vpVerhaal__omhulsel {
	max-inline-size: 48rem;
}

.vpVerhaal__tekst {
	color: var(--kleurSecundair);
	font-size: var(--vpLopend);
	line-height: 1.75;
}

.vpVerhaal__tekst h2 {
	color: var(--kleurTekst);
	font-size: var(--vpMidden);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

.vpVerhaal__tekst h3 {
	color: var(--kleurTekst);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

/* ==========================================================================
   De beoordelingen
   ========================================================================== */

.vpOordeel {
	padding-block: var(--vpSectie);
	background-color: var(--vpPapier);
}

.vpOordeel__inhoud {
	display: grid;
	grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.vpOordeel .vpSectie__kop {
	margin-block-end: 1.5rem;
}

.vpOordeel__getal {
	display: flex;
	align-items: baseline;
	gap: 0.3rem;
	font-size: clamp(3rem, 2rem + 3vw, 4.25rem);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
}

.vpOordeel__van {
	color: var(--kleurLila);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0;
}

.vpOordeel__aantal {
	margin-block-start: 0.6rem;
	color: var(--kleurSecundair);
	font-size: var(--vpKlein);
	font-weight: 600;
}

/* De bron van het cijfer, als link (Site-instellingen → Waardering). */
.vpOordeel__bron,
.vpHero__cijferTekst {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.vpHero__cijferTekst {
	color: var(--kleurSecundair);
}

.vpSterren {
	position: relative;
	display: inline-block;
	margin-block-start: 0.75rem;
	line-height: 0;
}

.vpSterren__leeg,
.vpSterren__vol {
	display: flex;
	gap: 3px;
}

.vpSterren__leeg {
	color: var(--kleurLijn);
}

.vpSterren__vol {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: var(--vpDeel, 0%);
	overflow: hidden;
	color: var(--vpDageraad);
}

.vpSterren .icoon {
	flex: none;
	inline-size: 1.35rem;
	block-size: 1.35rem;
}

.vpOordeel__lijst {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
	gap: clamp(1rem, 1.8vw, 1.5rem);
}

.vpCitaat {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: clamp(1.4rem, 2vw, 1.85rem);
	background-color: var(--kleurWit);
	border-radius: var(--vpRondingGroot);
	box-shadow:
		0 2px 4px rgb(21 10 61 / 4%),
		0 18px 40px rgb(21 10 61 / 6%);
}

.vpCitaat__tekst::before {
	content: "\201C";
	display: block;
	margin-block-end: 0.15rem;
	color: var(--kleurLila);
	font-family: var(--letterGeschreven);
	font-size: 3rem;
	line-height: 0.5;
}

.vpCitaat__tekst p {
	line-height: 1.6;
}

.vpCitaat__naam {
	margin-block-start: auto;
	font-size: var(--vpKlein);
	font-weight: 700;
}

.vpCitaat__plaats {
	color: var(--kleurSecundair);
	font-weight: 500;
}

.vpCitaat__plaats::before {
	content: " · ";
}

/* ==========================================================================
   De afsluiter
   ========================================================================== */

.vpSlot {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	/* Onderaan minder lucht dan bovenaan: de footer is even donker en gaat
	   hier rechtstreeks op verder, dus alle ruimte tussen die twee telt bij
	   elkaar op. */
	padding-block: clamp(5rem, 10vw, 8.5rem) clamp(3rem, 6vw, 5rem);
	background-color: var(--vpNacht);
	color: var(--kleurWit);
	text-align: center;
}

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

.vpSlot__foto {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	opacity: 0.45;
}

/* Onderaan loopt het naar de kleur van de footer, zodat die geen losse zwarte
   balk is maar het einde van dezelfde nacht. */
.vpSlot__achtergrond::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		180deg,
		rgb(7 2 27 / 62%) 0%,
		rgb(7 2 27 / 80%) 52%,
		#242424 100%
	);
}

.vpSlot__inhoud {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.vpSlot__geschreven {
	color: var(--vpDageraad);
	font-family: var(--letterGeschreven);
	font-size: clamp(1.6rem, 1rem + 2vw, 2.5rem);
	font-weight: 500;
	line-height: 1.1;
}

.vpSlot__kop {
	max-inline-size: 22ch;
	margin-block-start: 0.5rem;
	font-size: var(--vpGroot);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.06;
	text-transform: uppercase;
}

.vpSlot__tekst {
	max-inline-size: 38rem;
	margin-block-start: 1.1rem;
	color: rgb(255 255 255 / 76%);
	line-height: 1.7;
}

.vpSlot__knoppen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-block-start: 2.25rem;
}

.vpSociaal {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.5rem;
	border-radius: var(--rondingPil);
	background-color: rgb(255 255 255 / 10%);
	color: var(--kleurWit);
	font-weight: 700;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%);
	transition:
		background-color var(--duurMiddel) var(--soepel),
		color var(--duurMiddel) var(--soepel),
		transform var(--duurMiddel) var(--soepel);
}

.vpSociaal:hover {
	transform: translateY(-2px);
	background-color: var(--kleurWit);
	color: var(--vpNacht);
	text-decoration: none;
}

.vpSociaal__icoon {
	display: grid;
	place-items: center;
	inline-size: 1.4rem;
	block-size: 1.4rem;
}

/*
 * De footer sluit direct aan.
 *
 * main.css zet boven de footer --ruimte8, want een gewone pagina eindigt met
 * tekst en dan is die lucht nodig. Deze pagina eindigt met een donker vlak dat
 * naar de kleur van de footer toe loopt; daar zou die marge een witte streep
 * van maken.
 */
.home .siteVoet {
	margin-block-start: 0;
}

/* ==========================================================================
   Smallere schermen
   ========================================================================== */

@media (max-width: 1024px) {
	.vpHero__inhoud {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(2.5rem, 6vw, 3.5rem);
	}

	.vpHero__beeld {
		max-inline-size: 30rem;
	}

	/* Vier worden twee rijen van twee; drie passen hier nog naast elkaar. */
	.vpDiensten__lijst {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-flow: row;
	}

	.vpDiensten__lijst:has(> :nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Een oneven laatste bij twee kolommen neemt de hele rij. */
	.vpDiensten__lijst:not(:has(> :nth-child(3):last-child)) > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

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

	.vpRaster {
		grid-auto-rows: clamp(140px, 22vw, 190px);
	}
}

@media (max-width: 767px) {
	.vpHero {
		padding-block-end: clamp(7rem, 22vw, 9rem);
	}

	.vpHero__knoppen .knopPil {
		flex: 1 1 100%;
		max-inline-size: 20rem;
	}

	.vpHero__beeld {
		padding-inline-start: 0;
		padding-block-end: 2.25rem;
	}

	.vpHero__kaart--klein {
		inline-size: 42%;
		inset-inline-start: 0;
	}

	.vpHero__cijfer {
		inset-inline-end: 0;
	}

	.vpDiensten__lijst,
	.vpDiensten__lijst:has(> :nth-child(3):last-child) {
		grid-template-columns: minmax(0, 1fr);
	}

	.vpRaster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 40vw;
		gap: 0.5rem;
	}

	.vpTegel--breed,
	.vpTegel--hoog {
		grid-column: span 1;
		grid-row: span 1;
	}

	.vpTegel--groot {
		grid-column: span 2;
		grid-row: span 2;
	}

	/*
	 * Op een kleine tegel is nog geen 150 px breedte beschikbaar en past
	 * "Dekbedovertrekken" niet op één regel. `hyphens: auto` helpt alleen als de
	 * browser een Nederlandse afbreekwoordenlijst heeft; heeft hij die niet, dan
	 * hakt hij het woord middenin doormidden. Een kleinere letter en wat minder
	 * padding lossen het op zonder van de browser af te hangen. De grote tegel
	 * houdt zijn formaat, want dáár zit de klap.
	 */
	.vpTegel:not(.vpTegel--groot) .vpTegel__inhoud {
		padding: 0.8rem;
	}

	/* Meeschalen met de tegel en niet met een vaste maat: dan past het langste
	   woord dat deze winkel heeft ("Dekbedovertrekken") op elk schermformaat
	   binnen de tegel, van 320 px tot aan het breekpunt. */
	.vpTegel:not(.vpTegel--groot) .vpTegel__titel {
		font-size: clamp(0.68rem, 3.05vw, 0.95rem);
		letter-spacing: -0.01em;
	}

	.vpTegel:not(.vpTegel--groot) .vpTegel__regel {
		font-size: 0.75rem;
	}

	.vpProducten__kop {
		align-items: flex-start;
	}

	.vpMaten__lijst {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vpMaat__link {
		min-block-size: 13rem;
	}
}