/*
 * De winkelwagen van WooCommerce (woocommerce/cart) in de tokens van
 * DreamGlow (spec 5-6, 6c; ontwerpsysteem §2, §4 en §8), en de melding zonder
 * JavaScript voor winkelwagen en kassa (afwijking 10 van het plan van
 * deelproject 6).
 *
 * winkelwagen.php zet dit blad in de wachtrij met het blok woocommerce/cart,
 * en met woocommerce/checkout voor de melding.
 *
 * Woo's CSS verschilt per versie (spec 5-6, "Risico's", "Bèta en
 * experimentele API's"). Elke regel op een klasse van Woo zegt daarom welk
 * element hij overschrijft; nagekeken tegen WooCommerce 11.1.2
 * (assets/client/blocks/cart.css). Elke regel heeft één klasse meer dan die
 * van Woo, en wint dus in welke volgorde de bladen ook laden.
 */

/* De melding zonder JavaScript (dreamglow_kassa_zonder_js() in
   winkelwagen.php): een foutmelding in error op error-soft (plan,
   "Formulieren"; 4,9:1), met een rand van 2 px aan het begin van de regel. */
.dg-kassa-zonder-js {
	margin: 0 0 var(--wp--preset--spacing--24);
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
	border-inline-start: var(--wp--custom--lijn--dik) solid var(--wp--preset--color--error);
	background-color: var(--wp--preset--color--error-soft);
	color: var(--wp--preset--color--error);
}

/* Woo: .wp-block-woocommerce-cart.is-loading en
   .wp-block-woocommerce-checkout.is-loading zijn winkelwagen en kassa zoals
   de server ze geeft: een geraamte met laadplaatsen die bewegen tot React
   het blok tekent en is-loading weghaalt. Zonder JavaScript gebeurt dat
   nooit; dan staat alleen de melding er, en geen pagina die eeuwig laadt. */
.wp-block-woocommerce-cart.is-loading,
.wp-block-woocommerce-checkout.is-loading {
	display: none;
}

@media (scripting: enabled) {
	/* Woo: dezelfde twee blokken, met JavaScript: het geraamte staat er weer
	   tot React tekent, zoals zonder dit blad. Een browser die
	   (scripting: enabled) niet kent, toont het blok pas als het getekend is. */
	.wp-block-woocommerce-cart.is-loading,
	.wp-block-woocommerce-checkout.is-loading {
		display: block;
	}
}

/* Woo: .wp-block-woocommerce-cart en .wp-block-woocommerce-checkout, vlak na
   de <noscript> van de melding. Met JavaScript tekent de browser die niet,
   maar in de flow-layout van WordPress is hij het eerste kind van de inhoud;
   zonder deze regel kreeg het blok de blockGap van 16 erboven. */
noscript + .wp-block-woocommerce-cart,
noscript + .wp-block-woocommerce-checkout {
	margin-block-start: 0;
}

/* Woo: .wc-block-components-sidebar-layout, de rij met de regels en het
   overzicht. Woo zet die naast elkaar zodra het blok 700 px breed is
   (@container in cart.css), op 1023 px dus al. Het ontwerpsysteem kent één
   omslag, 1024 (§4): daaronder staat het overzicht onder de regels. */
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
	flex-direction: column;
}

/* Woo: .wc-block-components-main (de regels, 65 %) en
   .wc-block-components-sidebar (het overzicht, 35 %), elk met een padding
   opzij. Onder 1024 elk de volle breedte, zonder die padding. */
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout > .wc-block-components-main,
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout > .wc-block-components-sidebar {
	box-sizing: border-box;
	inline-size: 100%;
	padding-inline: 0;
}

@media (width > 1023px) {
	/* Woo: .wc-block-components-sidebar-layout. Vanaf 1024 twee derde regels
	   en een derde overzicht: drie gelijke kolommen, waarvan de regels er
	   twee nemen, met 64 ertussen (ongeveer Woo's eigen verdeling). */
	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--64);
		align-items: start;
	}

	/* Woo: .wc-block-components-main, de regels: twee van de drie kolommen. */
	.wp-block-woocommerce-cart .wc-block-components-sidebar-layout > .wc-block-components-main {
		grid-column: span 2;
	}
}

/* Woo: de bedragen in de regels en het overzicht
   (.wc-block-components-formatted-money-amount, en
   .wc-block-components-totals-item__value voor "Gratis"). Tabelcijfers
   alleen in tabellen: mandje, kassa, bestellingen (ontwerpsysteem §2,
   regel 6); elders houdt body de lining-nums proportional-nums van het
   thema. */
.wp-block-woocommerce-cart .wc-block-components-formatted-money-amount,
.wp-block-woocommerce-cart .wc-block-components-totals-item__value {
	font-variant-numeric: lining-nums tabular-nums;
}

/* Woo: de naam van het product in een regel (table.wc-block-cart-items
   .wc-block-cart-items__row .wc-block-components-product-name, 500 in Woo).
   Eén gewicht per letter: Jost 400 (ontwerpsysteem §2, regel 3). */
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	font-weight: 400;
}

/* Woo: de kop boven de kolommen van de regels (.wc-block-cart-items__header
   th, 500 in Woo). Een th in Jost is 400. */
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__header th {
	font-weight: 400;
}

/* Woo: de kop van het overzicht (.wc-block-cart .wc-block-cart__totals-title,
   "Totalen winkelwagen": Jost 500 in kapitalen). Een label in kapitalen:
   400, met 2 px (ontwerpsysteem §2, regel 2 en 3). Woo zet er alleen een
   lettertype op waar hij zichtbaar is (vanaf een container van 700 px);
   daaronder is hij een h2 in Cormorant. Hier altijd Jost, ook verborgen. */
.wp-block-woocommerce-cart .wc-block-cart .wc-block-cart__totals-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 400;
	letter-spacing: var(--wp--custom--spatie--groot);
}

/* Woo: het totaal onderaan het overzicht
   (.wc-block-components-totals-footer-item: label en bedrag 500, op
   --wp--preset--font-size--medium, dat het thema niet kent, dus 22 px).
   Hier Jost 400 op xl (20/28) uit de typeschaal. */
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	line-height: var(--wp--custom--leading--xl);
}

/* Woo: de regel met de btw onder het totaal
   (.wc-block-components-totals-footer-item-tax, 500 in Woo). */
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax {
	font-weight: 400;
}

/* Woo: het label van een product in de aanbieding
   (.wc-block-components-product-sale-badge, 600 in Woo). */
.wp-block-woocommerce-cart .wc-block-components-product-sale-badge {
	font-weight: 400;
}

/* Woo: de samenvatting boven een lijst meldingen
   (.wc-block-components-notice-banner__summary, 600 in Woo). */
.wp-block-woocommerce-cart .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-block-components-notice-banner__summary {
	font-weight: 400;
}

/* Woo: de kop van de lege winkelwagen (.wc-block-cart__empty-cart__title,
   een h2 in Cormorant). Woo zet hem op font-size inherit (16 px); serif
   onder 20 px mag alleen in kapitalen of cijfers (§2, regel 9). De maat van
   een h2: de rol sectietitel. */
.wp-block-woocommerce-cart .wc-block-cart__empty-cart__title {
	font-size: var(--dg-rol-sectietitel);
}

/* Woo: de knop "Doorgaan naar afrekenen" (.wc-block-cart__submit-button, een
   a.wc-block-components-button met wp-element-button). De knopstijl komt uit
   theme.json (elements.button: 14/16 in kapitalen met 2 px, 16 boven en
   onder); hier de hoogte van 48 (--wp--custom--knop--hoogte, plan 5), ook
   als het label ooit op twee regels komt. */
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
	box-sizing: border-box;
	min-block-size: var(--wp--custom--knop--hoogte);
}

/* Woo: .wc-block-components-button:not(.is-link):focus zet een blauwe
   schaduw en een doorzichtige omlijning, en verbergt zo de focusring van het
   thema. Met het toetsenbord weer de ring uit de tokens (custom.focus-ring:
   2 px moss, op 2 px afstand). */
.wp-block-woocommerce-cart .wc-block-components-button:not(.is-link):focus-visible {
	outline: var(--wp--custom--focus-ring);
	outline-offset: var(--wp--custom--focus--afstand);
	box-shadow: none;
}

/* De aantalbediening en de verwijderknop in een regel van de winkelwagen
   (fixronde 1 van taak 3, I-1). Woo maakt ze klein (cart.css 11.1.2): knoppen
   van 30 breed en ongeveer 25 hoog, een veld van ongeveer 25 hoog, een
   verwijderknop van 24 bij 24, en bij focus een schaduw van 1 px binnen het
   veld. Hier minstens het raakvlak van het ontwerpsysteem (--dg-raakvlak: 40,
   44 bij aanraken) en bij toetsenbordfocus de ring uit de tokens. */

/* Woo: .wc-block-components-quantity-selector, het vak om min, veld en plus
   (107 breed in Woo). Drie raakvlakken plus de twee randen van 1 px, zodat
   knoppen en veld hun maat houden. */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
	box-sizing: border-box;
	inline-size: calc(var(--dg-raakvlak) * 3 + var(--wp--custom--lijn--dun) * 2);
}

/* Woo: .wc-block-components-quantity-selector__button (min en plus, min-width
   30 in Woo) en input.wc-block-components-quantity-selector__input (het
   aantalveld, padding .4em op 14 px in Woo): minstens het raakvlak. */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	box-sizing: border-box;
	min-block-size: var(--dg-raakvlak);
	min-inline-size: var(--dg-raakvlak);
}

/* Woo: .wc-block-cart-item__remove-link, de knop met het prullenbakje in de
   cel van het aantal (24 bij 24 in Woo). Het pictogram blijft 24 en staat
   gecentreerd in het raakvlak. */
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--dg-raakvlak);
	min-inline-size: var(--dg-raakvlak);
}

/* Woo: dezelfde knoppen en hetzelfde veld: Woo's :focus zet outline: none en
   een schaduw van 1 px binnen het veld (alleen de verwijderknop heeft al de
   ring). Met het toetsenbord de ring uit de tokens, zonder schaduw. */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus-visible,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus-visible,
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:focus-visible {
	outline: var(--wp--custom--focus-ring);
	outline-offset: var(--wp--custom--focus--afstand);
	box-shadow: none;
}

/* Woo: de Product Collection met de cross-sells onder de winkelwagen
   (.wp-block-woocommerce-product-collection met de klasse dg-kruisverkoop,
   templates/page-cart.html). Ze staat onder de inhoudsgroep, die al 48
   onder heeft; onderaan de ruimte van een productgrid (§6), zodat de kaarten
   niet tegen de footer staan. */
.wp-block-woocommerce-product-collection.dg-kruisverkoop {
	padding-block-end: var(--dg-module-productgrid);
}

/* Woo: dezelfde collectie. Een sectiekop staat 24 boven zijn inhoud
   (ontwerpsysteem §2, regel 5). */
.wp-block-woocommerce-product-collection.dg-kruisverkoop > .wp-block-heading {
	margin-block: 0 var(--wp--preset--spacing--24);
}