/*
 * woocommerce.css — de winkel, een categorie, een product, de winkelwagen en
 * het afrekenen (baserules regel 8).
 *
 * De stylesheets van WooCommerce zelf staan uit (zie inc/dekbedgekteWoo.php),
 * dus wat hier niet staat, heeft geen opmaak.
 *
 * ── Het idee ──────────────────────────────────────────────────────────────
 *
 * De voorpagina is één nacht: donker waar je binnenkomt, licht waar er gekozen
 * en vergeleken wordt, donker waar hij de footer in loopt. De winkel is het
 * midden van diezelfde nacht. Je komt binnen in het donker — de kop van de
 * categorie — en daaronder wordt het licht, want daar ligt het assortiment en
 * daar moet je kunnen kijken.
 *
 * Vandaar dat de kop hieronder dezelfde gradiënt en dezelfde bolling heeft als
 * de hero van de voorpagina. Wie daar op "Dekbedden" klikt, komt niet in een
 * ander ontwerp terecht; hij loopt dezelfde nacht door.
 *
 * ── Waar de waarden vandaan komen ─────────────────────────────────────────
 *
 * De kleuren, de lettertypes, de nachttinten en de vloeiende lettergroottes
 * staan in main.css en zijn afgelezen van dekbedgekte.nl (zie
 * assets/css/BRONWAARDEN.md). Dit bestand gebruikt ze en verzint er niets bij.
 * Wat hier wél bij komt, staat hieronder als token met de reden erbij.
 *
 * ── Wat er waar staat ─────────────────────────────────────────────────────
 *
 *   1. de tokens van de winkel
 *   2. de kop            de nacht boven de categorie
 *   3. de familie        de categorieën ernaast
 *   4. de balk           tellen, filteren, sorteren
 *   5. het raster        de productkaarten
 *   6. de paginering en de lege lijst
 *   7. de belofte        bezorging, cijfer, betaalmethodes
 *   8. de melding        wat er verschijnt na "in winkelwagen"
 *   9. de rest van WooCommerce: knoppen, meldingen, velden
 *
 * De productpagina staat in single-product.css, dat na dit bestand laadt.
 *  10. smallere schermen
 */

/* ==========================================================================
   1. De tokens van de winkel
   ========================================================================== */

.winkel {
	/* De titel van een categorie. Groter dan de h1 van main.css (28 px) en
	   kleiner dan de reus van de voorpagina: dit is een winkelschap en geen
	   openingszin. */
	--wkTitel: clamp(1.95rem, 1.2rem + 2.6vw, 3.25rem);

	/* De afrondingen. Iets ronder dan de rest van de site, want een raster met
	   twaalf kaarten heeft meer baat bij zachte hoeken dan een losse knop. */
	--wkRonding: 20px;
	--wkRondingGroot: 26px;

	/* De rust tussen de stukken. */
	--wkSectie: clamp(2.75rem, 5vw, 4.5rem);

	background-color: var(--kleurPapier);
	font-size: var(--vloeiendLopend);
	line-height: 1.6;
}

/* Net als op de voorpagina: iets meer lucht dan de rest van de site, want in
   een raster van vier kaarten telt elke centimeter. */
.winkel--archief {
	--omhulselBreedte: 1240px;
}

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

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

/* De winkelwagen, het afrekenen en Mijn account: geen donkere kop, wel lucht. */
.winkel:not(.winkel--archief) {
	padding-block-end: var(--ruimte8);
}

/*
 * De footer begint normaal met 4rem wit erboven (main.css), zodat hij op een
 * witte pagina niet als een blok tegen de tekst aan staat. De winkel is papier
 * en geen wit; dan wordt die ruimte een witte strook tussen papier en footer.
 * De ruimte zit hier al onderin de winkel zelf. Hetzelfde doet front-page.css
 * voor de voorpagina.
 */
body:has(.winkel) .siteVoet {
	margin-block-start: 0;
}

/* ==========================================================================
   2. De kop — de nacht boven de categorie
   ========================================================================== */

.wkKop {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(1rem, 2vw, 2rem) clamp(5.5rem, 10vw, 9rem);
	background-color: var(--kleurNacht);
	background-image:
		radial-gradient(112% 86% at 78% 6%, rgb(83 70 128 / 58%) 0%, rgb(83 70 128 / 0%) 60%),
		linear-gradient(166deg, #07021B 0%, #150A3D 48%, #2A1A63 100%);
	color: var(--kleurWit);
}

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

.wkKop__maan {
	position: absolute;
	inset-block-start: -22%;
	inset-inline-end: -6%;
	inline-size: clamp(240px, 32vw, 460px);
	aspect-ratio: 1;
	border-radius: 50%;
	background-image: radial-gradient(
		circle at 34% 32%,
		rgb(255 255 255 / 20%) 0%,
		rgb(201 195 220 / 11%) 44%,
		rgb(201 195 220 / 0%) 70%
	);
}

/* Hetzelfde eerste licht als onder de hero van de voorpagina. */
.wkKop__gloed {
	position: absolute;
	inset-block-end: -30%;
	inset-inline-start: 2%;
	inline-size: clamp(300px, 52vw, 740px);
	aspect-ratio: 2 / 1;
	background-image: radial-gradient(
		ellipse at center,
		rgb(255 188 125 / 18%) 0%,
		rgb(255 188 125 / 0%) 68%
	);
}

.wkKop__inhoud {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}

/* Zonder foto is er geen tweede kolom om ruimte voor vrij te houden. */
.wkKop__inhoud--breed {
	grid-template-columns: minmax(0, 1fr);
}

.wkKop__titel {
	margin-block: 0.15rem 0;
	font-size: var(--wkTitel);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.02;
	text-transform: uppercase;
}

.wkKop__intro {
	max-inline-size: 46ch;
	margin-block-start: 1.1rem;
	color: rgb(255 255 255 / 74%);
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.0625rem);
	line-height: 1.65;
}

.wkKop__bewijs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem 1.5rem;
	margin-block-start: 1.75rem;
}

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

/* Het kruimelpad in de winkel. Boven een categorie en boven een product
   dezelfde maat, hetzelfde gewicht en dezelfde ruimte tussen de kruimels en
   het scheidingsteken; single-product.css geeft het product alleen zijn eigen
   kleuren en ruimte erboven, want daar is de ondergrond licht en hier donker. */
.wkKop .esseoBreadcrumbs,
.pdBoven .esseoBreadcrumbs {
	font-size: var(--vloeiendLabel);
	font-weight: 500;
}

.wkKop .esseoBreadcrumbs ol,
.pdBoven .esseoBreadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.45rem;
	align-items: center;
}

.wkKop .esseoBreadcrumbs li,
.pdBoven .esseoBreadcrumbs li {
	display: inline-flex;
	gap: 0.45rem;
	align-items: center;
	min-inline-size: 0;
}

.wkKop .esseoBreadcrumbs [aria-current],
.pdBoven .esseoBreadcrumbs [aria-current] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Op de donkere kop van een categorie. */
.wkKop .esseoBreadcrumbs {
	padding-block: var(--ruimte3) var(--ruimte4);
	color: rgb(255 255 255 / 52%);
}

.wkKop .esseoBreadcrumbs a {
	color: rgb(255 255 255 / 72%);
}

.wkKop .esseoBreadcrumbs a:hover {
	color: var(--kleurWit);
}

.wkKop .esseoBreadcrumbs [aria-current] {
	color: rgb(255 255 255 / 52%);
}

.wkKop .esseoBreadcrumbsSeparator {
	color: rgb(255 255 255 / 32%);
}

/* De foto van de categorie, als losse kaart — dezelfde stapel als in de hero. */

.wkKop__zij {
	position: relative;
	justify-self: end;
	inline-size: 100%;
	max-inline-size: 24rem;
}

.wkKop__kaart {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--wkRondingGroot);
	box-shadow: 0 30px 70px rgb(5 2 20 / 55%);
}

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

/* Linksboven en niet linksonder: onder de foto schuift de rij categorieën
   omhoog de kop in, en daar zou dit label bovenop komen te liggen. */
.wkKop__cijfer {
	position: absolute;
	inset-block-start: -0.9rem;
	inset-inline-start: -0.9rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1rem;
	border-radius: var(--rondingPil);
	background-color: rgb(255 255 255 / 96%);
	color: var(--kleurNacht2);
	box-shadow: 0 16px 34px rgb(5 2 20 / 42%);
}

.wkKop__cijferGetal {
	font-size: 1.05rem;
	font-weight: 900;
	letter-spacing: -0.02em;
}

.wkKop__cijferTekst {
	max-inline-size: 7.5rem;
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Waar de nacht licht wordt — dezelfde bolling als onder de hero. */
.wkKop__ochtend {
	position: absolute;
	inset-block-end: -1px;
	inset-inline: -12%;
	block-size: clamp(44px, 6vw, 88px);
	background-color: var(--kleurPapier);
	border-start-start-radius: 50% 100%;
	border-start-end-radius: 50% 100%;
}

/* Het lichte midden: de categorieën, de balk en het raster. */
.wkInhoud {
	padding-block-end: var(--ruimte5);
}

/* ==========================================================================
   3. De familie — de categorieën ernaast
   --------------------------------------------------------------------------
   Op de voorpagina is het assortiment een raster van staande tegels; dat is de
   etalage. Hier is het een liggende rij die je opzij schuift, want je bent al
   binnen en dit is navigatie.
   ========================================================================== */

.wkFamilie {
	position: relative;
	z-index: 2;

	/* Over de bolling heen, zodat de rij half in het licht en half in de nacht
	   ligt — dezelfde plek als de servicebalk op de voorpagina. */
	margin-block-start: clamp(-3.5rem, -5vw, -2.5rem);
}

/* Onder de rij en niet erboven: boven de rij is de donkere kop, en daar staan
   de foto van de categorie en het klantcijfer al. */
.wkFamilie__sturing {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
}

.wkFamilie__lijst {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(13.5rem, 1fr);
	gap: clamp(0.6rem, 1.2vw, 1rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;

	/* Ruimte voor de schaduw van een kaart, die anders afgesneden wordt. */
	padding-block: 6px 1rem;
}

.wkFamilie__item {
	scroll-snap-align: start;
}

.wkFamilieKaart {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	block-size: 100%;
	padding: 0.7rem 1rem 0.7rem 0.7rem;
	background-color: var(--kleurWit);
	border: 1px solid var(--kleurLijn);
	border-radius: var(--wkRonding);
	color: var(--kleurTekst);
	box-shadow: 0 10px 26px rgb(21 10 61 / 8%);
	transition:
		transform var(--duurMiddel) var(--soepel),
		box-shadow var(--duurMiddel) var(--soepel),
		border-color var(--duurMiddel) var(--soepel),
		background-color var(--duurMiddel) var(--soepel),
		color var(--duurMiddel) var(--soepel);
}

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

.wkFamilieKaart.isHier {
	background-color: var(--kleurPrimair);
	border-color: var(--kleurPrimair);
	color: var(--kleurWit);
}

.wkFamilieKaart__beeld {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 3rem;
	block-size: 3rem;
	overflow: hidden;
	border-radius: 14px;
	background-color: var(--kleurMist);
}

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

.wkFamilieKaart__tekst {
	display: grid;
	gap: 0.1rem;
	min-inline-size: 0;
}

.wkFamilieKaart__naam {
	font-size: var(--vloeiendKlein);
	font-weight: 700;
	line-height: 1.25;
}

.wkFamilieKaart__aantal {
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	font-weight: 500;
}

.wkFamilieKaart.isHier .wkFamilieKaart__aantal {
	color: rgb(255 255 255 / 72%);
}

/* ==========================================================================
   4. De balk — tellen, filteren, sorteren
   ========================================================================== */

.wkBalk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem clamp(1rem, 2vw, 1.75rem);
	margin-block: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem);
	padding: 0.8rem 1rem;
	background-color: var(--kleurWit);
	border: 1px solid var(--kleurLijn);
	border-radius: var(--rondingPil);
	box-shadow: 0 2px 4px rgb(21 10 61 / 4%);
}

/*
 * Meescrollen doet de balk alleen als het script hem gemeten heeft.
 *
 * Hij moet onder de header blijven hangen, en die header krimpt tijdens het
 * scrollen — de hoogte is dus geen getal dat hier kan staan. Het script zet hem
 * in --wkKopHoogte en zet dit attribuut erop. Zonder script blijft de balk
 * gewoon staan waar hij staat, en dat is beter dan een balk die achter de
 * header verdwijnt.
 */
.wkBalk[data-dekbedgekte-vast] {
	position: sticky;
	inset-block-start: calc(var(--wkKopHoogte, 0px) + 0.5rem);
	z-index: 20;
}

.wkBalk__telling {
	flex: none;
	color: var(--kleurSecundair);
	font-size: var(--vloeiendKlein);
}

.wkBalk__telling strong {
	color: var(--kleurTekst);
	font-weight: 800;
}

.wkBalk__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	flex: 1 1 auto;
	min-inline-size: 0;
}

.wkChip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.85rem;
	border-radius: var(--rondingPil);
	background-color: var(--kleurVlak);
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	white-space: nowrap;
	transition:
		background-color var(--duurKort) var(--soepel),
		color var(--duurKort) var(--soepel);
}

.wkChip:hover {
	background-color: rgb(83 70 128 / 10%);
	color: var(--kleurPrimair);
	text-decoration: none;
}

.wkChip.isAan {
	background-color: var(--kleurPrimair);
	color: var(--kleurWit);
}

.wkChip.isAan:hover {
	background-color: var(--kleurPrimairDonker);
	color: var(--kleurWit);
}

.wkChip__weg {
	inline-size: 0.7rem;
	block-size: 0.7rem;
	opacity: 0.8;
}

/*
 * De stip voor een warmteklasse.
 *
 * Dezelfde drie sferen als de warmtekiezer op de voorpagina — koel, mild, warm —
 * zodat iemand die daar "winter" koos, hier dezelfde kleur terugziet. De
 * waarden staan daar in front-page.css; hier staan ze er nog een keer omdat dat
 * bestand op deze pagina niet geladen wordt en drie kleuren in main.css zetten
 * voor twee sjablonen ook geen winst is.
 */
.wkChip--sfeer::before {
	content: "";
	flex: none;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background-color: var(--wkSfeer, currentcolor);
}

.wkChip--koel {
	--wkSfeer: #5E93C4;
}

.wkChip--mild {
	--wkSfeer: #6FA36A;
}

.wkChip--warm {
	--wkSfeer: #E8874A;
}

/* Staat het filter aan, dan is de knop paars en zou de stip erin verdwijnen. */
.wkChip--sfeer.isAan::before {
	background-color: var(--kleurWit);
}

/* Het sorteerformulier */

.wkSorteer {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: none;
	margin-inline-start: auto;
}

.wkSorteer__label {
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	font-weight: 600;
	white-space: nowrap;
}

.wkSorteer__veld {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.wkSorteer__keuze {
	appearance: none;
	padding: 0.45rem 2rem 0.45rem 0.85rem;
	border: 1px solid var(--kleurLijn);
	border-radius: var(--rondingPil);
	background-color: var(--kleurAchtergrond);
	color: var(--kleurTekst);
	font-family: inherit;
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	transition: border-color var(--duurKort) var(--soepel);
}

.wkSorteer__keuze:hover {
	border-color: var(--kleurPrimair);
}

.wkSorteer__pijl {
	position: absolute;
	inset-inline-end: 0.7rem;
	inline-size: 0.9rem;
	block-size: 0.9rem;
	color: var(--kleurSecundair);
	pointer-events: none;
}

.wkSorteer__knop {
	padding: 0.45rem 0.9rem;
	border-radius: var(--rondingPil);
	background-color: var(--kleurPrimair);
	color: var(--kleurWit);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
}

.wkSorteer__knop:hover {
	background-color: var(--kleurPrimairDonker);
}

/* ==========================================================================
   5. Het raster en de productkaart
   ========================================================================== */

.wkRaster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
	gap: clamp(0.85rem, 1.6vw, 1.35rem);
}

.wkKaart {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--kleurWit);
	border: 1px solid var(--kleurLijn);
	border-radius: var(--wkRondingGroot);
	transition:
		transform var(--duurMiddel) var(--soepel),
		box-shadow var(--duurMiddel) var(--soepel),
		border-color var(--duurMiddel) var(--soepel);
}

.wkKaart:hover,
.wkKaart:focus-within {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: 0 24px 48px rgb(21 10 61 / 14%);
}

/* De foto */

.wkKaart__beeld {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background-color: var(--kleurMist);
}

/* Het hartje rechtsboven op de foto, boven de link die de hele kaart
   klikbaar maakt. */
.wkKaart__favoriet {
	position: absolute;
	inset-block-start: 0.6rem;
	inset-inline-end: 0.6rem;
	z-index: 3;
	display: grid;
	place-items: center;
	inline-size: 2.35rem;
	block-size: 2.35rem;
	border-radius: 50%;
	background-color: rgb(255 255 255 / 92%);
	box-shadow: 0 4px 14px rgb(21 10 61 / 12%);
}

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

.wkKaart:hover .wkKaart__foto {
	transform: scale(1.06);
}

/*
 * De tweede foto.
 *
 * Bij het zweven komt hij over de eerste heen. Dat is geen versiering: bij
 * beddengoed is de tweede foto meestal de stof van dichtbij, en dat is precies
 * wat iemand wil zien voordat hij doorklikt.
 */
.wkKaart__foto--tweede {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition:
		opacity var(--duurMiddel) var(--soepel),
		transform 0.7s var(--soepel);
}

.wkKaart:hover .wkKaart__foto--tweede,
.wkKaart:focus-within .wkKaart__foto--tweede {
	opacity: 1;
}

/* Op een aanraakscherm valt er niets te zweven; daar blijft de eerste foto
   staan in plaats van dat de tweede er bij een tik overheen springt. */
@media (hover: none) {
	.wkKaart__foto--tweede {
		display: none;
	}
}

/* De vlaggen */

.wkVlaggen {
	position: absolute;
	inset-block-start: 0.7rem;
	inset-inline-start: 0.7rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
}

.wkVlag {
	padding: 0.28rem 0.6rem;
	border-radius: var(--rondingPil);
	font-size: var(--vloeiendLabel);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.wkVlag--actie {
	background-color: var(--kleurAanbieding);
	color: var(--kleurWit);
}

.wkVlag--nieuw {
	background-color: var(--kleurDageraad);
	color: var(--kleurNacht);
}

/* De tekst */

.wkKaart__tekst {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1rem 1.1rem 1.15rem;
}

.wkKaart__soort {
	color: var(--kleurLila);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.wkKaart__titel {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.wkKaart__link {
	color: inherit;
}

/*
 * De hele kaart is klikbaar via deze ene link. De bestelknop ligt er met een
 * hogere z-index bovenop, anders zou die niet aan te klikken zijn.
 */
.wkKaart__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wkKaart__link:hover {
	color: var(--kleurPrimair);
	text-decoration: none;
}

/* De sterren */

.wkSterren {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	line-height: 1;
}

.wkSterren__beeld {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.wkSterren__leeg,
.wkSterren__vol {
	display: flex;
	gap: 2px;
}

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

.wkSterren__vol {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: var(--deel, 0%);
	overflow: hidden;
	color: var(--kleurDageraad);
}

.wkSterren__ster {
	flex: none;
	inline-size: 0.8rem;
	block-size: 0.8rem;
}

.wkSterren__aantal {
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	font-weight: 600;
}

/* De maten */

.wkKaart__maten {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.wkKaart__maat {
	padding: 0.15rem 0.45rem;
	border-radius: var(--ronding);
	background-color: var(--kleurVlak);
	color: var(--kleurSecundair);
	font-size: 0.6875rem;
	font-weight: 600;
	white-space: nowrap;
}

.wkKaart__maat--meer {
	background-color: transparent;
	color: var(--kleurLila);
}

/* De prijs en de voorraad */

.wkKaart__onder {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 0.75rem;

	/* Duwt zichzelf en de knop naar de onderkant, zodat kaarten met een langere
	   titel onderaan toch op één lijn staan. */
	margin-block-start: auto;
	padding-block-start: 0.35rem;
}

.wkKaart__prijs {
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.wkKaart__prijs del {
	font-size: 0.875rem;
}

.wkKaart__prijs .woocommerce-Price-currencySymbol {
	font-size: 0.8em;
	font-weight: 700;
}

/* "vanaf" bij een product met meer maten. */
.wkKaart__prijs .wkVanaf {
	display: block;
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	font-weight: 600;
	letter-spacing: 0;
}

.wkKaart__voorraad {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: var(--vloeiendLabel);
	font-weight: 600;
}

.wkKaart__voorraadIcoon {
	flex: none;
	inline-size: 0.85rem;
	block-size: 0.85rem;
}

.wkKaart__voorraad--ruim {
	color: var(--kleurGroen);
}

.wkKaart__voorraad--bijna {
	color: #C2610A;
}

.wkKaart__voorraad--nabestellen,
.wkKaart__voorraad--op {
	color: var(--kleurSecundair);
}

/* De knop */

.wkKaart__bestellen {
	position: relative;
	z-index: 2;
	margin-block-start: 0.7rem;
}

/*
 * De bestelknop staat er altijd, en is in rust een omlijning.
 *
 * Een knop die pas bij het zweven verschijnt, bestaat niet op een telefoon —
 * en dat is nét de helft van de bezoekers. Hij kleurt wel op zodra de kaart
 * aandacht krijgt, zodat het raster rustig blijft zolang je er alleen langs
 * kijkt.
 */
.wkKnop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	inline-size: 100%;
	padding: 0.7rem 1rem;
	border-radius: var(--rondingPil);
	background-color: transparent;
	color: var(--kleurPrimair);
	font-size: var(--vloeiendKlein);
	font-weight: 700;
	line-height: 1.25;
	box-shadow: inset 0 0 0 1.5px rgb(83 70 128 / 28%);
	transition:
		background-color var(--duurMiddel) var(--soepel),
		background-image var(--duurMiddel) var(--soepel),
		color var(--duurMiddel) var(--soepel),
		box-shadow var(--duurMiddel) var(--soepel);
}

.wkKaart:hover .wkKnop,
.wkKaart:focus-within .wkKnop,
.wkKnop:hover,
.wkKnop:focus-visible {
	background-image: linear-gradient(135deg, #6B59A8 0%, #534680 55%, #3B2F63 100%);
	color: var(--kleurWit);
	box-shadow: 0 8px 20px rgb(40 27 87 / 24%);
	text-decoration: none;
}

.wkKnop__icoon {
	flex: none;
	inline-size: 1rem;
	block-size: 1rem;
}

.wkKnop__pijl {
	flex: none;
	inline-size: 0.95rem;
	block-size: 0.95rem;
	transition: transform var(--duurMiddel) var(--soepel);
}

.wkKnop:hover .wkKnop__pijl {
	transform: translateX(3px);
}

/* Terwijl het product onderweg is naar de winkelwagen. */
.wkKnop.isBezig {
	opacity: 0.7;
	pointer-events: none;
}

/* Een product dat niet te bestellen is, hoort geen bestelknop te hebben; wat
   er staat is een link naar de pagina. Die mag rustiger blijven. */
.wkKaart.outofstock .wkKaart__beeld {
	opacity: 0.72;
}

/* ==========================================================================
   6. De paginering en de lege lijst
   ========================================================================== */

.wkPaginering {
	margin-block: clamp(2rem, 4vw, 3rem) 0;
}

.wkPaginering__stand {
	margin-block-start: var(--ruimte4);
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	text-align: center;
}

.wkLeeg {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-inline-size: 34rem;
	margin-inline: auto;
	margin-block: clamp(2rem, 5vw, 4rem);
	padding: clamp(2rem, 4vw, 3rem);
	background-color: var(--kleurWit);
	border: 1px solid var(--kleurLijn);
	border-radius: var(--wkRondingGroot);
	text-align: center;
}

.wkLeeg__icoon {
	display: grid;
	place-items: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	margin-block-end: 1.1rem;
	border-radius: 50%;
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
}

.wkLeeg__titel {
	font-size: var(--vloeiendMidden);
	font-weight: 800;
	letter-spacing: -0.015em;
}

.wkLeeg__tekst {
	margin-block-start: 0.7rem;
	color: var(--kleurSecundair);
	line-height: 1.65;
}

.wkLeeg__knoppen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.65rem;
	margin-block-start: 1.75rem;
}

/*
 * De zoekpagina. Een zoekopdracht kan lang zijn en de titel staat in
 * hoofdletters; zonder afbreken loopt hij op een telefoon uit beeld. De
 * melding bij een verbeterde tikfout staat in de nacht, dus licht.
 */
.winkel--archief .wkKop__titel {
	overflow-wrap: anywhere;
}

.wkKop__zoekMelding {
	max-inline-size: 52ch;
	margin-block-start: 1.1rem;
	color: rgb(255 255 255 / 80%);
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.0625rem);
	line-height: 1.6;
}

.wkKop__zoekMelding strong {
	color: var(--kleurWit);
}

.wkKop__zoekMelding a {
	color: var(--kleurDageraad);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Onder de zoekhulp: wat de meeste klanten kopen (delen/zoekhulp.php). */
.zoekNiets__kopen {
	margin-block-end: var(--wkSectie);
}

.zoekNiets__kopenKop {
	margin-block-end: var(--ruimte5);
	font-size: var(--vloeiendGroot);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

/* ==========================================================================
   7. De belofte
   ========================================================================== */

.wkBelofte {
	padding-block: var(--wkSectie);
}

.wkBelofte__vak {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.75rem);
	align-items: center;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background-color: var(--kleurWit);
	border-radius: var(--wkRondingGroot);
	box-shadow:
		0 2px 4px rgb(21 10 61 / 4%),
		0 20px 44px rgb(21 10 61 / 7%);
}

/*
 * De beloftes gelijk verdeeld over de ruimte naast de betaalmethodes, en
 * verticaal in het midden daarvan: het donkere vak is hoger dan één regel
 * beloftes, en bovenaan tegen de rand zouden ze eruitzien alsof er iets
 * ontbreekt.
 */
.wkBelofte__lijst {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	align-items: center;
	align-self: center;
	justify-items: center;
	gap: 1rem clamp(1rem, 2vw, 1.75rem);
}

.wkBelofte__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

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

.wkBelofte__tekst {
	font-size: var(--vloeiendKlein);
	font-weight: 600;
	line-height: 1.35;
}

/*
 * Het donkere vak rechts.
 *
 * Niet omdat het mooi staat, maar omdat het moet: de band met betaalmethodes is
 * één PNG met veel wit erin, gemaakt voor de donkere footer. Op een wit vlak valt
 * de helft van die logo's weg. Het cijfer eronder komt uit hetzelfde blok in
 * main.css, dat zijn kleur van zijn omgeving erft — op donker klopt het dus
 * vanzelf, zoals in de footer.
 *
 * En het sluit het licht van de winkel af met een stukje nacht, net als de
 * footer eronder.
 */
.wkBelofte__zij {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1rem;
	align-self: stretch;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background-color: var(--kleurNacht2);
	background-image: radial-gradient(
		120% 100% at 80% 0%,
		rgb(83 70 128 / 55%) 0%,
		rgb(83 70 128 / 0%) 62%
	);
	border-radius: var(--wkRonding);
	color: var(--kleurWit);
}

.wkBelofte .betaalRij__beeld {
	max-inline-size: 16rem;
}

/* De lopende tekst onder de winkel. */

.wkVerhaal {
	padding-block: 0 var(--wkSectie);
}

.wkVerhaal__omhulsel {
	max-inline-size: 48rem;
	color: var(--kleurSecundair);
	line-height: 1.75;
}

.wkVerhaal__omhulsel h2 {
	color: var(--kleurTekst);
	font-size: var(--vloeiendMidden);
	font-weight: 800;
	letter-spacing: -0.015em;
}

/* De vragen onder de tekst. Dezelfde uitklapper als op de informatiepagina's,
   maar smaller: ze horen bij de tekst erboven en lopen er even breed mee. */
.wkVragen {
	padding-block: 0 var(--wkSectie);
}

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

.wkVragen__titel {
	margin-block-end: 1.25rem;
	color: var(--kleurTekst);
	font-size: var(--vloeiendMidden);
	font-weight: 800;
	letter-spacing: -0.015em;
}

.wkVragen__lijst {
	display: grid;
	gap: 0.7rem;
}

.wkVraag {
	border: 1px solid var(--kleurLijn);
	border-radius: var(--rondingKaart);
	background-color: var(--kleurWit);
	transition:
		border-color var(--duurMiddel) var(--soepel),
		box-shadow var(--duurMiddel) var(--soepel);
}

.wkVraag:hover,
.wkVraag[open] {
	border-color: rgb(83 70 128 / 30%);
}

.wkVraag[open] {
	box-shadow: 0 1px 2px rgb(21 10 61 / 5%), 0 14px 34px rgb(21 10 61 / 9%);
}

.wkVraag__vraag {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding: 1.05rem 1.15rem;
	color: var(--kleurTekst);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.wkVraag__vraag::-webkit-details-marker {
	display: none;
}

.wkVraag__teken {
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
	transition:
		background-color var(--duurMiddel) var(--soepel),
		color var(--duurMiddel) var(--soepel),
		transform var(--duurMiddel) var(--soepel);
}

.wkVraag__plus {
	inline-size: 1rem;
	block-size: 1rem;
}

.wkVraag[open] .wkVraag__teken {
	background-color: var(--kleurPrimair);
	color: var(--kleurWit);
	transform: rotate(45deg);
}

.wkVraag__antwoord {
	padding: 0 1.15rem 1.15rem;
	color: var(--kleurSecundair);
	line-height: 1.75;
}

/* ==========================================================================
   8. De melding na "in winkelwagen"
   --------------------------------------------------------------------------
   Het product gaat in de wagen zonder dat de pagina herlaadt. Dan moet er wél
   iets gebeuren dat je ziet, anders lijkt de knop stuk. Deze melding schuift
   onderin beeld, zegt wát erin ligt, en biedt meteen de volgende stap aan.
   ========================================================================== */

.wkMelding {
	position: fixed;
	inset-block-end: clamp(1rem, 3vw, 2rem);
	inset-inline: var(--ruimte4);
	z-index: 80;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	inline-size: auto;
	max-inline-size: 30rem;
	margin-inline: auto;
	padding: 0.85rem 0.85rem 0.85rem 1.1rem;
	background-color: var(--kleurNacht2);
	border-radius: var(--rondingPil);
	color: var(--kleurWit);
	box-shadow: 0 20px 50px rgb(5 2 20 / 45%);
}

.wkMelding[hidden] {
	display: none;
}

.wkMelding__tekst {
	flex: 1 1 10rem;
	min-inline-size: 0;
	font-size: var(--vloeiendKlein);
	line-height: 1.35;
}

.wkMelding__naam {
	display: block;
	font-weight: 700;
}

.wkMelding__vink {
	flex: none;
	inline-size: 1.1rem;
	block-size: 1.1rem;
	color: var(--kleurDageraad);
}

.wkMelding__knop {
	flex: none;
	padding: 0.55rem 1.1rem;
	border-radius: var(--rondingPil);
	background-color: var(--kleurWit);
	color: var(--kleurNacht2);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	white-space: nowrap;
}

.wkMelding__knop:hover {
	background-color: var(--kleurDageraad);
	color: var(--kleurNacht);
	text-decoration: none;
}

/* ==========================================================================
   De stappen van het bestellen
   --------------------------------------------------------------------------
   Winkelwagen → gegevens en betalen → bevestiging (delen/winkel/stappen.php).
   Hier en niet in cart.css of checkout.css: ze staan op alle drie de pagina's.
   ========================================================================== */

/* De stappen: drie pillen met een lijntje ertussen. De stap waar je bent is
   gevuld; de rest wacht. */
.wkStappen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.wkStap {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	font-weight: 700;
	white-space: nowrap;
}

.wkStap + .wkStap::before {
	content: "";
	inline-size: 1.75rem;
	block-size: 2px;
	margin-inline-end: 0.1rem;
	border-radius: 1px;
	background-color: var(--kleurLijn);
}

.wkStap__nummer {
	display: grid;
	place-items: center;
	inline-size: 1.65rem;
	block-size: 1.65rem;
	border-radius: 50%;
	background-color: var(--kleurWit);
	box-shadow: inset 0 0 0 1.5px var(--kleurLijn);
	font-size: 0.75rem;
	font-weight: 800;
}

.wkStap.isHier {
	color: var(--kleurTekst);
}

.wkStap.isHier .wkStap__nummer {
	background-image: linear-gradient(135deg, #6B59A8 0%, #534680 55%, #3B2F63 100%);
	color: var(--kleurWit);
	box-shadow: 0 6px 14px rgb(40 27 87 / 24%);
}

/* Een stap die gedaan is: een vinkje in plaats van het nummer. */
.wkStap.isGedaan .wkStap__nummer {
	background-color: rgb(36 163 14 / 10%);
	color: var(--kleurGroen);
	box-shadow: none;
}

.wkStap__vink {
	inline-size: 0.85rem;
	block-size: 0.85rem;
}

.wkStap__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: inherit;
}

.wkStap__link:hover {
	color: var(--kleurPrimair);
	text-decoration: none;
}

@media (max-width: 767px) {
	/* De stappen als drie kolommen: het nummer boven, de naam eronder, en
	   het lijntje tussen de nummers. Naast elkaar passen de drie namen niet op
	   een telefoon, en twee regels stappen lezen als een lijstje. */
	.wkStappen {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		inline-size: 100%;
		gap: 0;
	}

	.wkStap,
	.wkStap__link {
		position: relative;
		flex-direction: column;
		gap: 0.35rem;
		font-size: 0.6875rem;
		text-align: center;
		white-space: normal;
	}

	.wkStap + .wkStap::before {
		position: absolute;
		inset-block-start: 0.8rem;
		inset-inline-end: calc(50% + 1.1rem);
		inline-size: calc(100% - 2.2rem);
		margin: 0;
	}

	.wkStap__nummer {
		position: relative;
	}
}

/* ==========================================================================
   9. De rest van WooCommerce
   --------------------------------------------------------------------------
   De basis voor wat WooCommerce verder uitschrijft: knoppen, meldingen,
   velden. De productpagina, de winkelwagen, het afrekenen en Mijn account
   bouwen hierop voort in hun eigen bestand (single-product.css, cart.css,
   checkout.css en myaccount.css).
   ========================================================================== */

.woocommerce-products-header {
	max-inline-size: 70ch;
	margin-block-end: var(--ruimte6);
}

/* De prijs. De doorgestreepte grijs, de nieuwe in het rood van die site —
   `.prijs` in main.css doet hetzelfde voor de rest van de site. */
.price {
	font-weight: 700;
}

.price del {
	margin-inline-end: var(--ruimte2);
	color: var(--kleurSecundair);
	font-weight: 400;
}

.price ins {
	color: var(--kleurAanbieding);
	text-decoration: none;
}

.stock.in-stock {
	color: var(--kleurGroen);
	font-size: var(--maatMini);
}

/* De knoppen van WooCommerce dezelfde vorm geven als .knop uit main.css. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-block;
	padding: var(--ruimte3) var(--ruimte5);
	border-radius: var(--rondingPil);
	background-color: var(--kleurPrimair);
	color: var(--kleurWit);
	font-size: var(--maatTekst);
	font-weight: 700;
	line-height: calc(var(--regelTekst) / var(--maatTekst));
	transition: background-color var(--duurKort) var(--soepel);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--kleurPrimairDonker);
	text-decoration: none;
}

/* De meldingen (toegevoegd aan winkelwagen, foutmelding bij afrekenen). */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin-block: var(--ruimte4);
	padding: var(--ruimte4) var(--ruimte5);
	border-inline-start: 4px solid var(--kleurPrimair);
	border-radius: var(--rondingKaart);
	background-color: var(--kleurWit);
	box-shadow: 0 2px 4px rgb(21 10 61 / 5%);
	font-size: var(--vloeiendKlein);
	list-style: none;
}

.woocommerce-error {
	border-color: var(--kleurAanbieding);
}

.woocommerce-message {
	border-color: var(--kleurGroen);
}

/* De velden van de formulieren: beoordelen, afrekenen, Mijn account. */

.winkel input[type="text"],
.winkel input[type="email"],
.winkel input[type="tel"],
.winkel input[type="url"],
.winkel input[type="password"],
.winkel input[type="search"],
.winkel input[type="number"],
.winkel textarea,
.winkel select {
	inline-size: 100%;
	max-inline-size: 30rem;
	padding: 0.7rem 0.9rem;
	background-color: var(--kleurAchtergrond);
	border: 1px solid var(--kleurLijn);
	border-radius: var(--rondingKaart);
	color: var(--kleurTekst);
	font-family: inherit;
	font-size: var(--maatTekst);
}

.winkel input:focus-visible,
.winkel textarea:focus-visible,
.winkel select:focus-visible {
	border-color: var(--kleurPrimair);
	outline: none;
	box-shadow: 0 0 0 4px rgb(83 70 128 / 12%);
}

.winkel label {
	display: inline-block;
	margin-block-end: 0.25rem;
	font-size: var(--vloeiendKlein);
	font-weight: 600;
}

.winkel .quantity label {
	margin-block-end: 0;
}

/* ==========================================================================
   10. Smallere schermen
   ========================================================================== */

@media (max-width: 1024px) {
	.wkKop__inhoud {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(2rem, 5vw, 3rem);
	}

	.wkKop__zij {
		justify-self: start;
		max-inline-size: 22rem;
	}

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

	.wkBelofte__zij {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1.25rem;
	}

}

@media (max-width: 767px) {
	.wkKop {
		padding-block-end: clamp(5rem, 16vw, 7rem);
	}

	.wkKop__zij {
		max-inline-size: 100%;
	}

	/* Op een telefoon onder elkaar, links uitgelijnd: drie beloftes die om de
	   beurt links en rechts terechtkomen, lezen niet. */
	.wkBelofte__lijst {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
	}

	.wkKop__cijfer {
		inset-inline-start: 0;
		inset-block-start: -0.6rem;
	}

	/*
	 * De balk wordt op een telefoon drie regels hoog, en drie regels die
	 * meescrollen laten van het raster niets over. Daar blijft hij dus gewoon
	 * staan.
	 */
	.wkBalk[data-dekbedgekte-vast] {
		position: static;
	}

	.wkBalk {
		border-radius: var(--wkRonding);
	}

	.wkSorteer {
		flex: 1 1 100%;
		margin-inline-start: 0;
	}

	.wkSorteer__veld {
		flex: 1 1 auto;
	}

	/* 16 px op een telefoon: kleiner en een iPhone zoomt de pagina in zodra
	   je de keuzelijst opent — ook op de zoekpagina, waar hij ook staat. */
	.winkel .wkSorteer__keuze {
		inline-size: 100%;
		font-size: 1rem;
	}

	.wkFamilie__sturing {
		display: none;
	}

	.wkRaster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.65rem;
	}

	.wkKaart__tekst {
		padding: 0.8rem 0.8rem 0.9rem;
	}

	.wkKaart__titel {
		font-size: 0.9375rem;
	}

	.wkKaart__prijs {
		font-size: 1.15rem;
	}

	/* Op twee kolommen van 160 px past "In winkelwagen" naast een icoon niet
	   meer; de tas gaat eraf en de tekst blijft. */
	.wkKnop__icoon {
		display: none;
	}

	/* En de tekst op één regel: een ronde knop met "In / winkelwagen" onder
	   elkaar is geen knop meer maar een tekstvak. Iets kleiner en minder
	   binnenruimte, dan passen "In winkelwagen" en "Kies je maat" met pijl
	   allebei in 130 px. */
	.wkKnop {
		gap: 0.35rem;
		padding-inline: 0.6rem;
		font-size: 0.8125rem;
		white-space: nowrap;
	}
}

/* ==========================================================================
   De adrescheck — onder "Straat en huisnummer", bij het afrekenen en in Mijn
   account. Het script (assets/js/adrescheck.js) zet de regel neer en vult
   hem; leeg neemt hij geen ruimte in. Een vraag, geen fout: dus geen rood.
   ========================================================================== */

.adresCheck:empty {
	display: none;
}

.adresCheck {
	position: relative;
	padding-inline-start: 1.35rem;
	color: var(--kleurSecundair);
	font-size: var(--vloeiendLabel);
	line-height: 1.45;
}

.adresCheck::before {
	position: absolute;
	inset-block-start: 0.2em;
	inset-inline-start: 0;
	inline-size: 0.95rem;
	block-size: 0.95rem;
	border-radius: 50%;
	background-color: var(--kleurMist);
	color: var(--kleurPrimair);
	font-size: 0.65rem;
	font-weight: 900;
	line-height: 0.95rem;
	text-align: center;
	content: "i";
}

.adresCheck[data-stand="ok"] {
	color: #1C7A0B;
	font-weight: 600;
}

.adresCheck[data-stand="ok"]::before {
	background-color: rgb(36 163 14 / 12%);
	color: #1C7A0B;
	content: "✓";
}

.adresCheck[data-stand="letop"] {
	color: #8A5A00;
}

.adresCheck[data-stand="letop"]::before {
	background-color: rgb(230 160 0 / 18%);
	color: #8A5A00;
	content: "!";
}

.adresCheck__knop {
	padding: 0;
	border: 0;
	background: none;
	color: var(--kleurPrimair);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	cursor: pointer;
}