/*
 * De productcarrousel (spec 7): de rij en de bediening.
 *
 * De rij is de ul van Product Template met de klasse dg-carrousel, in een
 * collectie die alignfull staat. Met --dg-gutter als padding begint de
 * eerste kaart op de linkerrand van de container, en loopt de rij door tot
 * de rechterrand van het scherm. Kaarten van --dg-kaart-carrousel (256, en
 * 312 vanaf 1024), 16 ertussen, snap op het begin van een kaart. Dit wint
 * van Woo's eigen carrousel-CSS (kaarten in procenten, snap in het midden).
 * De 4 boven en onder houdt de focusring van een kaart binnen de rij, die
 * met overflow-x alles eromheen afknipt.
 *
 * Een veeg voorbij het begin of het eind blijft in de rij (contain, en alleen
 * horizontaal: verticaal scrollen over de rij blijft de pagina scrollen).
 * Anders gaat hij door naar het venster, en maakt een browser met een
 * trackpad er "terug" van: de homepage uit (review van taak 13).
 */
.wp-block-woocommerce-product-collection .wc-block-product-template.dg-carrousel {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--16);
	margin: 0;
	padding-block: var(--wp--preset--spacing--4);
	padding-inline: var(--dg-gutter);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: auto;
	scroll-padding-inline: var(--dg-gutter);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
}

.wp-block-woocommerce-product-collection .wc-block-product-template.dg-carrousel > .wc-block-product {
	display: flex;
	flex: 0 0 var(--dg-kaart-carrousel);
	min-inline-size: 0;
	max-inline-size: none;
	margin: 0;
	scroll-snap-align: start;
}

/* De bediening: onder de rij, op de lijn van de container, rechts. */
.wp-block-dreamglow-carrouselbediening {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--24);
	padding-inline: var(--dg-gutter);
}

/* De marge op twee klassen, zoals bij "Toon meer": de collectie is een
   flow-layout, en :root :where(.is-layout-flow) > * uit de globale stijlen
   zet de blokafstand (16) als margin-block-start, even zwaar als één klasse
   en later in de cascade. */
.wp-block-dreamglow-carrouselbediening.dg-carrousel-bediening {
	margin-block-start: var(--wp--preset--spacing--24);
}

/* Zonder JavaScript staat de bediening er niet (render.php). Met scripting
   staat hij er al bij de eerste paint, niet pas bij de hydratatie, zodat
   er niets verspringt; alleen als de collectie een rij heeft. De binding op
   hidden blijft voor een browser die (scripting) of :has() niet kent. */
.wp-block-dreamglow-carrouselbediening[hidden] {
	display: none;
}

@media (scripting: enabled) {
	.wp-block-woocommerce-product-collection:has(.wc-block-product-template) .wp-block-dreamglow-carrouselbediening.dg-carrousel-bediening[hidden] {
		display: flex;
	}
}

.dg-carrousel-bediening__balk {
	flex: 1 1 auto;
	block-size: var(--wp--custom--lijn--dik);
	overflow: hidden;
	background: var(--wp--preset--color--line);
}

.dg-carrousel-bediening__vulling {
	display: block;
	block-size: 100%;
	background: var(--wp--preset--color--ink);
}

.dg-carrousel-bediening__knoppen {
	display: flex;
	flex: none;
	gap: var(--wp--preset--spacing--12);
}

.dg-carrousel-bediening__knop {
	display: inline-grid;
	place-items: center;
	inline-size: var(--dg-raakvlak, var(--wp--custom--raakvlak));
	block-size: var(--dg-raakvlak, var(--wp--custom--raakvlak));
	padding: 0;
	border: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--kop);
	border-radius: var(--wp--custom--radius--rond);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--kop);
	cursor: pointer;
}

.dg-carrousel-bediening__knop svg {
	inline-size: var(--wp--preset--spacing--24);
	block-size: var(--wp--preset--spacing--24);
}

/* Aan een uiteinde: stiller, en een klik doet niets (view.js). De knop
   blijft focusbaar, zodat de focus niet wegvalt. */
.dg-carrousel-bediening__knop[aria-disabled="true"] {
	border-color: var(--wp--preset--color--line);
	/* Een grijs vlak: zo leest hij als "uit", niet als een lichtere actieve
	   knop (vergelijking met de Rituals-analyse, 13-10-2026, C-12). */
	background: var(--wp--preset--color--line);
	color: var(--wp--preset--color--metadata);
	cursor: default;
}

@media (hover: hover) {
	.dg-carrousel-bediening__knop:not([aria-disabled="true"]):hover {
		background: var(--wp--preset--color--grain-soft);
	}
}