/*
 * De lade van de mini-cart in de tokens van het thema (spec 5-6, 6b, "De
 * inhoud" en "Vorm"; besluit bij open vraag 13: één dim). Het blad komt met
 * het blok woocommerce/mini-cart, alleen in een blokthema
 * (inc/modules/kassa/lade.php).
 *
 * Woo tekent de lade op de Interactivity API. De klassen hieronder zijn die
 * van WooCommerce 11.1.2 (MiniCart.php, MiniCartContents.php,
 * MiniCartProductsTableBlock.php en MiniCartFooterBlock.php). Woo's CSS
 * verschilt per versie, dus elke regel zegt welk element van Woo hij
 * overschrijft. "body .wc-block-mini-cart__drawer" vooraan geeft deze regels
 * voorrang op Woo's bladen, in welke volgorde die ook laden. Naam, sluitknop,
 * focus terug en tempo blijven van 1b (inc/modules/minicart.php en
 * blocks/verzendbalk/minicart.css); dit blad raakt die niet.
 */

/* Woo: .wc-block-components-drawer__screen-overlay, de dim waarin de lade
   ligt; Woo zet een zwarte laag op 35 %. Het thema heeft één dim,
   custom.dim. Alleen de dim van de mini-cart: :has() op de lade erin. */
body .wc-block-components-drawer__screen-overlay:has(> .wc-block-mini-cart__drawer) {
	background-color: var(--wp--custom--dim);
}

/* Woo: button.wc-block-components-drawer__close, de sluitknop rechtsboven
   ("Winkelwagen sluiten", van 1b). Woo zet hem op 12 van boven en van
   rechts, met een negatieve marge van 1em en een padding van 1em
   (!important): zijn vlak loopt dan 4 px buiten de lade, en aan de rand van
   het scherm valt zijn focusring weg. Zonder de negatieve marge, en 8 van de
   randen, blijft hij met zijn ring binnen de lade. */
body .wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close {
	inset-block-start: var(--wp--preset--spacing--8);
	inset-inline-end: var(--wp--preset--spacing--8);
	margin: 0;
	/* Eén stijl voor de lichte ronde knoppen, zoals galerij, carrousel en de
	   filterlade: het raakvlak, rond, wit, 1 px in kop (13-10-2026, C-10).
	   Woo zet de padding met !important. */
	display: inline-grid;
	place-items: center;
	box-sizing: border-box;
	inline-size: var(--dg-raakvlak);
	block-size: var(--dg-raakvlak);
	min-block-size: 0;
	padding: 0 !important;
	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);
}

body .wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close svg {
	inline-size: var(--wp--preset--spacing--24);
	block-size: var(--wp--preset--spacing--24);
}

@media (hover: hover) {
	body .wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close:hover {
		background: var(--wp--preset--color--grain-soft);
	}
}

/* Woo: h2.wc-block-mini-cart__title, "Je winkelwagen (items: n)": een flexrij
   met 16 marge rondom en zonder oog voor de sluitknop; hij dekt met zijn
   achtergrond ook de strook eronder af (margin-bottom -32px, mask-image).
   De knop (52 breed, 8 van de rand, ring 4 daarbuiten) neemt rechts 64 in; met
   8 lucht blijft de tekst er links van: 72 vanaf de rand. Woo's marge van 16
   blijft staan, dus de padding is 72 - 16 = 56 (eindronde deelproject 6,
   TFAB-1). Padding en geen marge, zodat de achtergrond van de titel tot de
   rand van de lade blijft dekken. Bij 12 of 120
   stuks of grotere tekst breekt de titel liever af (flex-wrap, en een woord dat
   niet past, overflow-wrap) dan onder de knop door te lopen; overflow-wrap
   erft naar de twee spans van de titel. */
body .wc-block-mini-cart__drawer h2.wc-block-mini-cart__title {
	padding-inline-end: calc(var(--wp--preset--spacing--64) + var(--wp--preset--spacing--8) - var(--wp--preset--spacing--16));
	flex-wrap: wrap;
	overflow-wrap: anywhere;
}

/* Woo: de focus in de lade. Een knop van Woo (.wc-block-components-button:
   de sluitknop en de twee knoppen onderaan) krijgt bij focus een blauwe ring
   als box-shadow en een doorzichtige outline van 3 px; het aantal
   (.wc-block-components-quantity-selector__input en __button) een
   binnenrand zonder outline. Hier de ring van het thema, zoals in style.css:
   custom.focus-ring (2 px moss) op custom.focus.afstand. */
body .wc-block-components-drawer__screen-overlay .wc-block-mini-cart__drawer :is(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus-ring);
	outline-offset: var(--wp--custom--focus--afstand);
	box-shadow: none;
}

/* Woo: th in thead.wc-block-cart-items__header (Product, Gegevens, Totaal);
   Woo zet 500. In de lade is die kop verborgen, maar ook daar geldt één
   gewicht per letter: een th in Jost is 400. */
body .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__header th {
	font-weight: 400;
}

/* Woo: tr.wc-block-cart-items__row, een regel in de lade. De lade draagt de
   klasse is-mobile, en dan is een regel een grid van 80 en 132 px, met de
   foto in een cel met 16 padding. Hier de foto in een kolom van
   custom.miniatuur (72), de naam met de rest ernaast, en het regeltotaal
   rechts. */
body .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row {
	grid-template-columns: var(--wp--custom--miniatuur) minmax(0, 1fr) auto;
	column-gap: var(--wp--preset--spacing--16);
}

/* Woo: td.wc-block-cart-item__product, de naam met prijs, variant en aantal
   (Woo: over kolom 2 en 3). */
body .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product {
	grid-column: 2;
}

/* Woo: td.wc-block-cart-item__total, het regeltotaal. */
body .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
	grid-column: 3;
}

/* Woo: td.wc-block-cart-item__image, de cel van de foto. Woo zet de
   achtergrond van elke cel met !important op none (table.wc-block-cart-items
   td). Hier het productvlak van kaart D (spec 5-6, 5c): beige, 72 × 72
   (custom.miniatuur), afgerond; de achtergrond daarom ook met !important. */
body .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image {
	grid-column: 1;
	align-self: start;
	box-sizing: border-box;
	inline-size: var(--wp--custom--miniatuur);
	block-size: var(--wp--custom--miniatuur);
	padding: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--standaard);
	background: var(--wp--preset--color--jade) !important;
}

/* Woo: de a rond de foto in td.wc-block-cart-item__image, bij een product
   dat in de catalogus staat. Zonder [hidden]: anders kwam de verborgen weer
   terug. */
body .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image > a:not([hidden]) {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

/* Woo: de img in td.wc-block-cart-item__image (Woo: width 100%). Hij vult
   het vlak, heel (contain), op beige (jade), zoals op kaart D. Zonder [hidden]: Woo zet er twee neer en verbergt er
   één. */
body .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img:not([hidden]) {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

/* Woo: .wc-block-components-product-name, de naam in de regel: een a, of een
   span bij een product dat verborgen is in de catalogus. Woo zet 14 px in
   Jost 500. Hier de naam van kaart D in de serif: Cormorant 500, maat xl
   (20/28; serif in kleine letters pas vanaf 20, ontwerpsysteem §2, regel 9),
   in kop. */
body .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	line-height: var(--wp--custom--leading--xl);
	letter-spacing: var(--wp--custom--spatie--krap);
	color: var(--wp--preset--color--kop);
	text-decoration: none;
}

@media (hover: hover) {
	/* Woo: dezelfde naam als link; bij aanwijzen onderstreept, zoals op kaart D. */
	body .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row a.wc-block-components-product-name:hover {
		text-decoration: underline;
	}
}

/* Woo: .wc-block-components-product-price in .wc-block-cart-item__prices
   (de stuksprijs) en in td.wc-block-cart-item__total (het regeltotaal); Woo
   zet 14 px in Jost. De prijs in dezelfde serif, maat en kleur als de naam,
   met kapitaalcijfers (ontwerpsysteem §2, regel 6). */
body .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row :is(.wc-block-cart-item__prices, .wc-block-cart-item__total) .wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	line-height: var(--wp--custom--leading--xl);
	letter-spacing: var(--wp--custom--spatie--krap);
	font-variant-numeric: lining-nums proportional-nums;
	color: var(--wp--preset--color--kop);
}

/* Woo: .wc-block-components-product-metadata en
   .wc-block-components-product-details in de regel (de variant, zoals
   "Kleur: Proef"); Woo zet 14 en 12,25 px op regel 1,4. Hier de rol klein:
   14/24, in ink-soft. */
body .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row :is(.wc-block-components-product-metadata, .wc-block-components-product-details) {
	font-size: var(--wp--preset--font-size--s);
	line-height: var(--wp--custom--leading--s);
	color: var(--wp--preset--color--ink-soft);
}

/* Woo: button.wc-block-cart-item__remove-link, verwijderen: een prullenbak
   van 24 × 24 in een knop van 24 hoog. Hier het raakvlak van het thema,
   --dg-raakvlak (40, bij aanraken 44), met het icoon in het midden. */
body .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:not([hidden]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	inline-size: var(--dg-raakvlak);
	block-size: var(--dg-raakvlak);
	padding: 0;
}

/* Woo: .wc-block-mini-cart__footer-subtotal, "Subtotaal" en het bedrag
   onderaan; Woo zet 600. Eén gewicht per letter: Jost 400. */
body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal {
	font-weight: 400;
}

/* Woo: a.wc-block-mini-cart__footer-cart ("Bekijk winkelwagen") en
   a.wc-block-mini-cart__footer-checkout ("Afrekenen"), elk een
   .wc-block-components-button met wp-element-button. Het thema geeft ze het
   knoplabel en de primaire kleur (theme.json, elements.button); hier ook
   zeker 48 hoog (custom.knop.hoogte). */
body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-components-button.wp-element-button {
	box-sizing: border-box;
	min-block-size: var(--wp--custom--knop--hoogte);
	padding-block: var(--wp--preset--spacing--16);
	padding-inline: var(--wp--preset--spacing--24);
	border-radius: var(--wp--custom--radius--standaard);
	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--xs);
	letter-spacing: var(--wp--custom--spatie--groot);
	text-transform: uppercase;
	text-decoration: none;
}

/* Woo: a.wc-block-mini-cart__footer-cart met is-style-outline. Woo tekent de
   rand als box-shadow van 1 px in currentColor, en maakt de knop bij
   aanwijzen en focus zwart. Hier de outline-knop van het thema: een rand van
   custom.rand.knop (2 px) in kop, op wit, met 2 px minder padding, zodat hij
   ook 48 hoog blijft. */
body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-components-button.wc-block-mini-cart__footer-cart.is-style-outline {
	box-sizing: border-box;
	padding-block: calc(var(--wp--preset--spacing--16) - var(--wp--custom--rand--knop));
	padding-inline: calc(var(--wp--preset--spacing--24) - var(--wp--custom--rand--knop));
	border: var(--wp--custom--rand--knop) solid var(--wp--preset--color--kop);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--kop);
	box-shadow: none;
}

@media (hover: hover) {
	/* Woo: dezelfde outline-knop bij aanwijzen (Woo: zwart). Het thema kleurt
	   een outline-knop dan grain-soft (theme.json, core/button, outline). */
	body .wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-components-button.wc-block-mini-cart__footer-cart.is-style-outline:hover {
		background: var(--wp--preset--color--grain-soft);
	}
}