/*
 * De koopknop en de voorraadregel in het koopformulier (spec 5d, het ritme
 * van het koopblok; spec 5b, "aria-disabled op de koopknop").
 *
 * Alleen binnen het formulier: de koopbalk en kaart D hebben hun eigen
 * knoppen. Elke selector begint met form.wp-block-add-to-cart-with-options:
 * de regels van Woo op dezelfde knop hebben drie klassen
 * (product-button-style.css), en deze winnen zo, zonder !important en zonder
 * te leunen op de volgorde van de bladen.
 *
 * - De voorraadregel (Product Stock Indicator van Woo) in de rol Klein. Woo
 *   zet .875em en een marge van .75em eronder; die gaan weg. Een lege
 *   voorraadregel neemt geen ruimte in: bij een variabel product met voorraad
 *   rendert de server hem leeg, en vult Woo hem na de hydratatie met de
 *   voorraad van de keuze.
 * - De afstanden in het formulier (sinds taak 4, de prijs staat op de
 *   titelregel): de kleurkeuze heeft 24 onder zich (variantkeuze), de
 *   voorraadregel 24 onder zich, de knop geen marge boven. Zo heeft het
 *   eerste element van het formulier nooit een marge boven: vanaf 1024 is
 *   het koopblok een raster, en daar telt zo'n marge op bij de 24 boven het
 *   formulier (geen samenvallende marges); bij een eenvoudig product staan
 *   voorraadregel of knop bovenaan. Daaronder: kleurkeuze 24 voorraadregel 24
 *   knop, of kleurkeuze 24 knop.
 * - De knop 48 hoog: padding 16
 *   en regelhoogte 16 uit theme.json; Woo zet line-height: inherit, en dan
 *   werd hij 56. Op elke breedte over de volle breedte van de koopkolom
 *   (productpagina in de opzet van Tower 28, spec 5, koopkolom 5; tot
 *   22-10-2026 vanaf 1024 links en --wp--custom--knop--koop breed). Woo
 *   centreert hem (align-items: center); hier stretch.
 * - De losse voorraadregel "Uitverkocht" (taak 4, ruling): de knop zegt het
 *   nu zelf, met en zonder JavaScript (de server zet dezelfde tekst als
 *   koopknop.js; fixronde 1). Twee regels verbergen hem:
 *   - data-dg-voorraadregel="in-de-knop" op het formulier: de server zet het
 *     bij een product dat helemaal uitverkocht is en "Uitverkocht" in de
 *     knop heeft. Een gewone selector, ook zonder :has();
 *   - data-dg-knop="uitverkocht" op de knop (de server, en koopknop.js na
 *     elke keuze), met :has(): voor een keuze die uitverkocht is in een
 *     product dat deels op voorraad is. Zonder :has() staat "Uitverkocht"
 *     daar twee keer (regel en knop); er gaat niets kapot.
 *   Een regel met weinig voorraad blijft: die stand is nooit uitverkocht. Een
 *   variabel product zonder keuze ('kiezen') houdt zijn regel.
 * - Uitgeschakeld (aria-disabled="true"): wit op ink-soft (5,5:1), met
 *   cursor not-allowed, ook bij hover. Woo dimt de knop met opacity .5 zolang
 *   zijn formulier ongeldig is (.is-invalid); dat volgt aria-disabled niet,
 *   dus die opacity gaat weg: één stand, uit aria-disabled.
 */
form.wp-block-add-to-cart-with-options .wp-block-woocommerce-product-stock-indicator {
	margin-block: 0 var(--wp--preset--spacing--24);
	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);
	letter-spacing: 0;
	color: var(--wp--preset--color--ink-soft);
}

form.wp-block-add-to-cart-with-options .wp-block-woocommerce-product-stock-indicator:empty {
	display: none;
}

form.wp-block-add-to-cart-with-options[data-dg-voorraadregel="in-de-knop"] .wp-block-woocommerce-product-stock-indicator,
form.wp-block-add-to-cart-with-options:has(.single_add_to_cart_button[data-dg-knop="uitverkocht"]) .wp-block-woocommerce-product-stock-indicator {
	display: none;
}

form.wp-block-add-to-cart-with-options .wp-block-woocommerce-product-button {
	margin-block-start: 0;
	align-items: stretch;
}

form.wp-block-add-to-cart-with-options .wp-block-woocommerce-product-button .single_add_to_cart_button {
	box-sizing: border-box;
	min-block-size: var(--wp--custom--knop--hoogte);
	line-height: var(--wp--custom--leading--xs);
	opacity: 1;
	cursor: pointer;
}

form.wp-block-add-to-cart-with-options .wp-block-woocommerce-product-button .single_add_to_cart_button[aria-disabled="true"] {
	background-color: var(--wp--preset--color--ink-soft);
	color: var(--wp--preset--color--paper);
	cursor: not-allowed;
}

@media (hover: hover) {
	form.wp-block-add-to-cart-with-options .wp-block-woocommerce-product-button .single_add_to_cart_button[aria-disabled="true"]:hover {
		background-color: var(--wp--preset--color--ink-soft);
		color: var(--wp--preset--color--paper);
	}
}