/*
 * Variantkeuze (spec 5-6, 5e "Varianten" en de ritmetabel van 5d; afwijking
 * 9 van het plan). Echte keuzerondjes, visueel verborgen. Het label is het
 * vlak: bij Kleur een foto van 72 × 72 op het productvlak, bij een ander
 * kenmerk een tekstknopje van minstens --dg-raakvlak.
 *
 * De ring is een schaduw aan de binnenkant van een pseudo-element over het
 * vlak. Zo ligt hij boven de foto en boven de rand van een tekstknopje. Gekozen: 1 px in moss. Focus: dezelfde
 * ring, 2 px. Aanwijzen: een ring in ink-soft (3:1 op het beige vlak; was
 * moss op 50 %, kruiscontrole D5-1, keuze a). De ring
 * verandert in 300 ms, op de standaardcurve.
 *
 * Laadt via block.json (style), dus alleen met het blok.
 */

/* De groep: een fieldset zonder de rand, marges en binnenruimte van de
   browser. Van de foto's of knopjes tot de prijs eronder is 24 (5d). Deze
   marge valt samen met de ruimte die het formulier boven de prijs zet. */
.dg-variantkeuze {
	min-inline-size: 0;
	margin: 0;
	margin-block-end: var(--wp--preset--spacing--24);
	padding: 0;
	border: 0;
}

/* "Kleur: Teal", in Jost 14/24: het kenmerk in ink-soft, de waarde in ink (5d). */
.dg-variantkeuze__legenda {
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 400;
	line-height: var(--wp--custom--leading--s);
	color: var(--wp--preset--color--ink);
}

.dg-variantkeuze__kenmerk {
	color: var(--wp--preset--color--ink-soft);
}

/* Alle waarden in beeld, op elke breedte: de rij breekt af en scrolt nooit
   (5e). 8 onder de legenda, en 8 ertussen (5d). */
.dg-variantkeuze__opties {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8);
	margin-block-start: var(--wp--preset--spacing--8);
}

.dg-variantkeuze__optie {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

/* Woo zet op elk label van een winkelpagina een marge onder (0.7em, in
   woocommerce-blocktheme.css: ".woocommerce-page label"). Die telt hier niet:
   de afstand tussen de rijen is alleen de gap van de rij (8, 5d). De regel
   heeft twee klassen om boven die van Woo te gaan. */
.dg-variantkeuze .dg-variantkeuze__optie {
	margin: 0;
}

/* Het keuzerondje is onzichtbaar maar bereikbaar, zoals op kaart D: het
   label is het vlak, en de pijltjestoetsen werken vanzelf. */
.dg-variantkeuze__rondje {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	opacity: 0;
}

/* Het vlak, met de ring als pseudo-element erover. Zonder keuze is de ring
   van een foto onzichtbaar; een tekstknopje heeft dan een rand in line. */
.dg-variantkeuze__vlak {
	--dg-variantkeuze-rand: transparent;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wp--custom--radius--standaard);
}

.dg-variantkeuze__vlak::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	box-shadow: inset 0 0 0 var(--wp--custom--lijn--dun) var(--dg-variantkeuze-rand);
	pointer-events: none;
	transition: box-shadow var(--wp--custom--duur--standaard) var(--wp--custom--curve);
}

/* Forced colors (Windows Hoog contrast) haalt een box-shadow en een background
   weg. Daarom draagt elke ring die iets zegt (gekozen, focus) ook een outline
   in transparent: normaal onzichtbaar, en in forced colors tekent de browser
   hem in een systeemkleur. Geen @media (forced-colors): die staat niet in de
   toegestane lijst, en dit is er niet voor nodig (eindreview M-1). De outline
   ligt aan de binnenkant, net als de ring. */
.dg-variantkeuze__rondje:checked + .dg-variantkeuze__vlak::after {
	outline: var(--wp--custom--lijn--dun) solid transparent;
	outline-offset: calc(-1 * var(--wp--custom--lijn--dun));
}

/* Kleur: de foto van de variant, 72 × 72 (--wp--custom--miniatuur), op het
   productvlak: beige (jade), zoals de fotootjes van kaart D. */
.dg-variantkeuze--foto .dg-variantkeuze__vlak {
	inline-size: var(--wp--custom--miniatuur);
	block-size: var(--wp--custom--miniatuur);
	overflow: hidden;
	isolation: isolate;
	background: var(--wp--preset--color--jade);
}

.dg-variantkeuze__vlak img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

/* Maat en andere kenmerken: een tekstknopje van minstens --dg-raakvlak (40,
   en 44 bij aanraken), in de letter van de tekst. */
.dg-variantkeuze--tekst .dg-variantkeuze__vlak {
	--dg-variantkeuze-rand: var(--wp--preset--color--line);
	box-sizing: border-box;
	min-inline-size: var(--dg-raakvlak);
	min-block-size: var(--dg-raakvlak);
	padding-inline: var(--wp--preset--spacing--16);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 400;
	line-height: var(--wp--custom--leading--s);
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

/* Gekozen: een ring van 1 px aan de binnenkant, in moss. */
.dg-variantkeuze__rondje:checked + .dg-variantkeuze__vlak::after {
	box-shadow: inset 0 0 0 var(--wp--custom--lijn--dun) var(--wp--preset--color--moss);
}

/* Aanwijzen, alleen met een muis: een lichtere ring. Niet op een gekozen of
   een gefocust rondje. */
@media (hover: hover) {
	.dg-variantkeuze__optie:hover > .dg-variantkeuze__rondje:not(:checked):not(:focus-visible) + .dg-variantkeuze__vlak::after {
		/* ink-soft: minstens 3:1 op het beige fotovlak; moss op 50 % haalde 2,5:1
		   (vergelijking met de Rituals-analyse, 13-10-2026, K-35). */
		box-shadow: inset 0 0 0 var(--wp--custom--lijn--dun) var(--wp--custom--veld--rand);
	}
}

/* Focus: dezelfde ring, 2 px. Deze regel staat na die voor gekozen: een
   gekozen rondje met focus krijgt 2 px. */
.dg-variantkeuze__rondje:focus-visible + .dg-variantkeuze__vlak::after {
	box-shadow: inset 0 0 0 var(--wp--custom--lijn--dik) var(--wp--preset--color--moss);
	outline: var(--wp--custom--lijn--dik) solid transparent;
	outline-offset: calc(-1 * var(--wp--custom--lijn--dik));
}

/* Uitverkocht: kiesbaar, met een zichtbare markering (5e). Over een foto een
   schuine lijn in ink-soft, van linksonder naar rechtsboven. Een
   tekstknopje is doorgestreept, in ink-soft. De naam zegt het ook: "Teal,
   uitverkocht" (render.php). */
.dg-variantkeuze--foto .is-uitverkocht .dg-variantkeuze__vlak::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--wp--preset--color--ink-soft);
	clip-path: polygon(0 calc(100% - var(--wp--custom--lijn--dun)), calc(100% - var(--wp--custom--lijn--dun)) 0, 100% 0, 100% var(--wp--custom--lijn--dun), var(--wp--custom--lijn--dun) 100%, 0 100%);
	pointer-events: none;
}

.dg-variantkeuze--tekst .is-uitverkocht .dg-variantkeuze__vlak {
	color: var(--wp--preset--color--ink-soft);
	text-decoration-line: line-through;
}

/* De diagonaal is een background en verdwijnt in forced colors. Daar blijft
   een gestippelde outline van het vlak (transparent, dus normaal onzichtbaar)
   als markering, dieper dan de ring van een gekozen of gefocuste optie, zodat
   die twee elkaar niet verdringen. */
.is-uitverkocht .dg-variantkeuze__vlak {
	outline: var(--wp--custom--lijn--dun) dashed transparent;
	outline-offset: calc(-2 * var(--wp--custom--lijn--dik));
}

@media (prefers-reduced-motion: reduce) {
	.dg-variantkeuze__vlak::after {
		transition: none;
	}
}