/*
 * Mini-winkelmand in de header en de productopties in de winkelmand.
 *
 * Volgorde en gewicht. De basis-CSS van het paneel (cart-header-element-lazy
 * van Blocksy) laadt Blocksy pas met JavaScript, en die staat dus na dit
 * bestand. Daarom begint elke regel voor het paneel met het voorvoegsel dat
 * Blocksy zelf gebruikt voor wat je in de Customizer instelt:
 * [data-header*="type-1"] [data-id="cart"]. Een instelling in de Customizer
 * zou op dezelfde manier winnen.
 *
 * Kleuren. Sinds 9 oktober 2026 mint met petrol, zie "Paneel in mint"
 * hieronder. Daarvoor donker #29333C met witte tekst en crème links, uit de
 * Customizer; die waarden staan daar nog en worden hier overschreven.
 */

/*
 * De lijst. Blocksy zet hem op 40vh en knipt de rest af zonder dat je ziet
 * dat er nog iets onder staat. Nu krimpt en groeit hij mee in het paneel
 * (zie "Paneel in mint"), met subtotaal, verzendbalk en knoppen altijd
 * eronder in beeld. Een dunne schuifbalk, en
 * een vervaging onderaan zolang er nog iets onder staat. Die vervaging volgt
 * de scrollpositie (animation-timeline); kan de lijst niet scrollen, dan is
 * de tijdlijn niet actief en blijft de rand 0. Browsers zonder
 * scroll-tijdlijn houden alleen de schuifbalk.
 */
@property --nrd-lijst-rand {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@keyframes nrd-lijst-rand {
	from,
	85% {
		--nrd-lijst-rand: 48px;
	}

	to {
		--nrd-lijst-rand: 0px;
	}
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart {
	scrollbar-width: thin;
	scrollbar-color: rgba(49, 84, 91, 0.3) transparent;
}

@supports (animation-timeline: scroll()) {
	[data-header*="type-1"] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart {
		mask-image: linear-gradient(to bottom, #000 calc(100% - var(--nrd-lijst-rand)), transparent);
		animation: nrd-lijst-rand linear both;
		animation-timeline: scroll(self);
	}
}

/*
 * Het prullenbakje is 27 px. Op een touchscreen een groter tikvlak, zonder
 * dat de knop zelf groter wordt.
 */
@media (pointer: coarse) {
	[data-header*="type-1"] [data-id="cart"] .ct-cart-content .remove::after {
		content: "";
		position: absolute;
		inset: -8px;
	}
}

/*
 * Het prullenbakje stond 8 px te laag. Blocksy centreert het op de hele regel,
 * en de regel heeft onderaan 16 px ruimte (--mini-cart-items-spacing) die bij
 * de tekst hoort. Nu centreert het op de tekst. Live sinds 10 oktober 2026.
 * Met hetzelfde voorvoegsel als de rest van dit bestand: Blocksy's paneel-CSS
 * laadt na dit bestand en moet deze regel niet overschrijven.
 */
[data-header*="type-1"] [data-id="cart"] .ct-cart-content .remove {
	top: calc(50% - var(--mini-cart-items-spacing) / 2);
	bottom: auto;
	transform: translateY(-50%);
}

/*
 * Leeg mandje. Normaal verbergt Blocksy het paneel dan, maar met een regel
 * om een weggehaald product terug te zetten erin blijft het staan (.nrd-weg,
 * zie winkelmand-direct.css in mu-plugins/nrd). WooCommerce zet er dan een
 * lichtgrijze melding met bel in en een salie knop; hier gewone tekst en
 * dezelfde tekstlink als Bekijk winkelwagen (zie de knoppen hieronder).
 */
[data-header*="type-1"] [data-id="cart"] .ct-cart-content .wc-empty-cart-message .woocommerce-info {
	display: block;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: none;
	font-size: 15px;
	color: var(--theme-text-color);
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .wc-empty-cart-message .woocommerce-info::before {
	content: none;
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .return-to-shop {
	margin: 4px 0 0;
}

/*
 * Subtotaal. Bij Blocksy 12 px in hoofdletters, kleiner dan de verzendtekst
 * eronder. Nu het grootste getal in het paneel.
 */
[data-header*="type-1"] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart__total {
	align-items: baseline;
	font-size: 15px;
	text-transform: none;
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart__total strong {
	font-weight: 600;
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart__total .amount {
	font-size: 18px;
	font-weight: 700;
}

/*
 * Verzendbalk. Oranje op salie was 1,2:1; nu op een licht spoor in het mint.
 * De tekst erboven zegt hoeveel er nog bij moet, de balk is het beeld daarbij.
 */
[data-header*="type-1"] [data-id="cart"] .ct-cart-content .ct-shipping-progress-mini-cart {
	--product-progress-bar-initial-color: #d6e5df;
}

/*
 * Knoppen. Afrekenen is de enige knop, in het oranje van de knop Winkel in de
 * header. Wit op #e94e1b is 3,8:1: genoeg vanaf 18,66 px vet, dus 19 px. Bij
 * hover een donkerder oranje, 5,0:1. Bekijk winkelwagen wordt een tekstlink
 * ernaast; past het niet, dan gaat de knop eronder, over de hele breedte. De
 * volgorde in de HTML blijft gelijk aan wat je ziet.
 */
[data-header*="type-1"] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart__buttons .button,
[data-header*="type-1"] [data-id="cart"] .ct-cart-content .return-to-shop .button {
	--theme-button-font-size: 14px;
	--theme-button-font-weight: 600;
	--theme-button-text-transform: none;
	--theme-button-min-height: 44px;
	--theme-button-padding: 0;
	--theme-button-background-initial-color: transparent;
	--theme-button-background-hover-color: transparent;
	--theme-button-text-initial-color: var(--theme-palette-color-10, #31545b);
	--theme-button-text-hover-color: #c64217;
	--theme-button-text-decoration: underline;
	text-underline-offset: 3px;
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart__buttons .checkout {
	flex: 1 0 auto;
	--theme-button-font-size: 19px;
	--theme-button-font-weight: 700;
	--theme-button-min-height: 48px;
	--theme-button-padding: 0 20px;
	--theme-button-background-initial-color: var(--theme-palette-color-3);
	--theme-button-background-hover-color: #c64217;
	--theme-button-text-initial-color: #ffffff;
	--theme-button-text-hover-color: #ffffff;
	--theme-button-text-decoration: none;
}

/*
 * Paneel in mint (live sinds 9 oktober 2026). Blocksy maakt
 * het 310 px breed met 20 px binnenrand, en de lijst hierboven rekent met een
 * vaste 420 px voor header en voet. Met de admin-balk, of op een telefoon met
 * de balk bovenaan en een hoge header, viel Afrekenen onder het venster.
 *
 * Nu 400 px breed en een kolom: de lijst krimpt en scrolt, subtotaal,
 * verzendbalk en knoppen blijven altijd in beeld. De hoogte komt uit
 * assets/winkelmand-overlay.js in mu-plugins/nrd, dat meet waar het icoon
 * staat (--nrd-mand-onder) en hoe hoog het venster is (--nrd-mand-hoog).
 * Zonder die maten rekent het met 140 px header.
 *
 * Mint zoals het menu op een telefoon (mobiel-menu.css), ook op desktop, waar
 * het gewoon bij hover opent. Tekst en titels petrol #31545b (7,6:1 op
 * #eef5f2), hover het donkere oranje van de knop (4,6:1), Afrekenen blijft
 * oranje met wit. De Customizer zet wit als tekstkleur op het paneel en nog
 * eens los op het subtotaal (.total); beide staan hier op petrol. Het
 * accountmenu ernaast volgt in accountmenu.css.
 *
 * De voet is compacter dan bij Blocksy: minder lucht tussen subtotaal,
 * verzendbalk en knoppen, het verzendbericht in 13 px, en de grenzen onder
 * de balk ("€35 €5,50") op één regel in plaats van twee.
 *
 * Alleen display staat in de regel met :not(), die telt zwaarder en zou het
 * vel hieronder anders overstemmen. Blocksy verbergt het lege paneel met
 * [data-count="0"]; met een regel om terug te zetten erin blijft het staan,
 * dat regelt winkelmand-direct.css in mu-plugins/nrd.
 */
[data-header*="type-1"] [data-id="cart"] .ct-cart-content:not([data-count="0"]) {
	display: flex;
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content {
	--mini-cart-background-color: var(--theme-palette-color-7, #eef5f2);
	--mini-cart-divider-color: rgba(49, 84, 91, 0.2);
	--mini-cart-items-spacing: 16px;
	--theme-text-color: var(--theme-palette-color-10, #31545b);
	--theme-link-initial-color: var(--theme-palette-color-10, #31545b);
	--theme-link-hover-color: #c64217;
	flex-direction: column;
	width: 400px;
	max-width: calc(var(--nrd-mand-breed, 100vw) - 32px);
	max-height: calc(var(--nrd-mand-hoog, 100vh) - var(--nrd-mand-onder, 140px) - var(--dropdown-top-offset, 0px) - 16px);
	padding: 24px 28px 20px;
	border-radius: 14px;
	box-shadow: inset 0 0 0 1px #d6e5df, 0 12px 32px rgba(36, 64, 63, 0.18);
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .total {
	--theme-text-color: var(--theme-palette-color-10, #31545b);
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content > * {
	flex: none;
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart {
	/* Het blok met de vakken (.nrd-mini-voordeel, winkelmand-vol.css) krimpt
	   ook, maar mag pas als de lijst op haar 96 px staat. Daarom 1000: bij een
	   flex-shrink van 1 kromp het naar verhouding mee en viel de meter weg. */
	flex: 0 1000 auto;
	min-height: 96px;
	max-height: none;
	margin-inline: -28px;
	padding-inline: 28px;
	overscroll-behavior: contain;
	scrollbar-color: rgba(49, 84, 91, 0.3) transparent;
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart li {
	grid-column-gap: 18px;
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart__total {
	margin-bottom: 6px;
	padding-top: 14px;
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .ct-shipping-progress-mini-cart {
	margin-bottom: 14px;
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .nrd-staffel-bericht--nieuw {
	font-size: 13px;
	line-height: 1.4;
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .ct-progress-bar {
	margin-top: 8px;
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .nrd-schaal {
	height: 18px;
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .nrd-schaal__grens {
	flex-direction: row;
	gap: 4px;
}

/* Het streepje op de balk in de kleur van het vel, zodat het de balk snijdt
   (wit was op het lichte spoor niet te zien). */
[data-header*="type-1"] [data-id="cart"] .ct-cart-content .nrd-schaal__grens::before {
	background: var(--mini-cart-background-color);
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart__buttons {
	padding-top: 14px;
}

/*
 * Vel op telefoon en tablet (live sinds 9 oktober 2026). Onder
 * 1000 px, waar de header van Blocksy de mobiele is, werkt het mandje zoals
 * het menu (mobiel-menu.css in mu-plugins/nrd). De header blijft staan en
 * het icoon wordt de knop om te sluiten: wit vlak met een petrol kruisje,
 * zoals Sluit bij het menu.
 *
 * Achtergrond. Precies als bij het menu: de pagina dimt over het hele scherm
 * (0,25 s, de fade van .ct-panel bij Blocksy), en een mint vel schuift van
 * boven het scherm achter de header vandaan (translate van -100% naar 0, in
 * 0,55 s erin en 0,24 s eruit, dezelfde curves). Dat zijn twee elementen die
 * het script onderaan de body zet (.nrd-mand-achter en __vel), net onder de
 * header. Het vel is zo lang als het paneel (--nrd-mand-vel, gemeten), met
 * de golf eronder. Is het mandje vol, dan valt de golf onder het scherm weg:
 * ruimte voor producten gaat voor (Aart, 9 oktober 2026).
 *
 * Eerdere pogingen schoven het paneel zelf, onder de header en met clip-path
 * afgeknipt. Dat kwam niet van achter de header, en zag er dus anders uit
 * dan het menu.
 *
 * Inhoud. Het paneel blijft in de header staan, zonder eigen achtergrond. De
 * plek en maat rekent de CSS terug uit wat assets/winkelmand-overlay.js
 * meet: de onderkant van de rij (--nrd-mand-rij), de golf eronder
 * (--nrd-mand-golf) en het icoon. Op z-index -1 binnen de rij ligt het onder
 * het logo. De producten komen een voor een binnen als het vel er is, met
 * nrd-menu-in uit mobiel-menu.css, alleen bij het openen (nrd-mand-komt).
 *
 * Open en dicht komt van het script (nrd-mand-open op html), niet van :hover.
 * Alles hangt aan nrd-mand-js, dat het script zet: zonder script gewoon het
 * paneel hierboven.
 *
 * De header staat op z-index 50, onder bijvoorbeeld het kaartje Net besteld
 * linksonder. Zolang het vel open is, en bij het sluiten tot het vel weg is,
 * gaat de header erboven, en de pagina eronder scrolt niet mee.
 */
.nrd-mand-achter {
	display: none;
}

@media (max-width: 999.98px) {
	.nrd-mand-js [data-header*="type-1"] [data-id="cart"] .ct-cart-content {
		/* 24 px, gelijk met het logo; op een tablet niet breder dan 640 px.
		   Niet --theme-container-width: daar zit een procent in, en die rekent
		   hier met de breedte van het icoon. */
		--nrd-mand-rand: max(24px, calc((var(--nrd-mand-breed, 100vw) - 640px) / 2));
		z-index: -1;
		top: calc(var(--nrd-mand-rij, 0px) - var(--nrd-mand-y, 0px));
		right: auto;
		left: calc(-1 * var(--nrd-mand-links, 0px));
		width: var(--nrd-mand-breed, 100vw);
		max-width: none;
		max-height: calc(var(--nrd-mand-hoog, 100vh) - var(--nrd-mand-rij, 0px));
		margin-top: 0;
		padding: calc(var(--nrd-mand-golf, 0px) + 12px) var(--nrd-mand-rand) 16px;
		border-radius: 0;
		background: none;
		box-shadow: none;
		transform: none;
		overscroll-behavior: contain;
	}

	/* Het paneel faadt gelijk op met de dimlaag. De inhoud reist met het vel
	   mee: zie "Openen en sluiten zoals het menu" hieronder. */
	.nrd-mand-js:not(.nrd-mand-open) [data-header*="type-1"] [data-id="cart"] .ct-cart-content {
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease-in-out, visibility 0s linear 0.25s;
	}

	.nrd-mand-open [data-header*="type-1"] [data-id="cart"] .ct-cart-content {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.25s ease-in-out, visibility 0s;
	}

	.nrd-mand-achter {
		position: fixed;
		inset: var(--admin-bar, 0px) 0 0 0;
		z-index: 99989;
		display: block;
		background-color: rgba(36, 64, 63, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease-in-out, visibility 0s linear 0.25s;
	}

	.nrd-mand-open .nrd-mand-achter {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.25s ease-in-out, visibility 0s;
	}

	.nrd-mand-achter__vel {
		position: absolute;
		inset: 0 0 auto;
		height: calc(var(--nrd-mand-vel, 60vh) - var(--admin-bar, 0px));
		background-color: var(--theme-palette-color-7, #eef5f2);
		transform: translate3d(0, -100%, 0);
		transition: transform 0.24s cubic-bezier(0.55, 0, 1, 0.45);
	}

	.nrd-mand-open .nrd-mand-achter__vel {
		transform: translate3d(0, 0, 0);
		transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	}

	/* Geen hoverbrug: het vel opent met een tik. */
	.nrd-mand-js [data-header*="type-1"] [data-id="cart"] .ct-cart-content::before {
		content: none;
	}

	/* Dezelfde golf als onder het menu. */
	.nrd-mand-achter__vel::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% - 1px);
		height: 24px;
		pointer-events: none;
		background: var(--theme-palette-color-7, #eef5f2);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1000 V52 C840,76 680,74 500,46 C330,20 160,18 0,40 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1000 V52 C840,76 680,74 500,46 C330,20 160,18 0,40 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	}

	.nrd-mand-js [data-header*="type-1"] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart {
		margin-inline: calc(-1 * var(--nrd-mand-rand));
		padding-inline: var(--nrd-mand-rand);
	}

	/* Binnenkomen: na het vel, een voor een, van iets hoger. */
	.nrd-mand-komt [data-header*="type-1"] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart li,
	.nrd-mand-komt [data-header*="type-1"] [data-id="cart"] .ct-cart-content > :not(.woocommerce-mini-cart) {
		animation: nrd-menu-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
	}

	.nrd-mand-komt [data-header*="type-1"] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart li:nth-child(2) {
		animation-delay: 0.2s;
	}

	.nrd-mand-komt [data-header*="type-1"] [data-id="cart"] .ct-cart-content .woocommerce-mini-cart li:nth-child(n + 3),
	.nrd-mand-komt [data-header*="type-1"] [data-id="cart"] .ct-cart-content > :not(.woocommerce-mini-cart) {
		animation-delay: 0.24s;
	}

	.nrd-mand-open {
		overflow: hidden;
	}

	/*
	 * Openen en sluiten zoals het menu (live sinds 11 oktober 2026). Aart:
	 * het mandje klapt minder soepel uit dan het menu, en bij het sluiten
	 * flikkert de header. Gemeten, beeld voor beeld, tegen het menu:
	 *
	 * - Bij het sluiten viel de header meteen terug naar z-index 50, terwijl
	 *   de dimlaag en het vel (99989) nog een kwart seconde in beeld zijn. Het
	 *   mint vel lag dat moment over de header heen. Het script laat daarom
	 *   300 ms nrd-mand-gaat op html staan (bij het menu blijft .active zo
	 *   lang op het paneel), en zo lang blijft de header boven.
	 * - De inhoud stond stil en faadde op zijn plek; bij het menu zit hij in
	 *   het vel en schuift hij mee. Nu reist elk kind van het paneel dezelfde
	 *   afstand als het vel (de hoogte ervan), met dezelfde duur en curve, en
	 *   faadt het paneel gelijk op met de dimlaag. Met translate, niet
	 *   transform: daar zit het binnenkomen (nrd-menu-in) al op.
	 * - Het paneel ligt op z-index -1 in de rij en dus achter de petrol band
	 *   of de pil (de achtergrond van .ct-container), zoals het vel van het
	 *   menu achter de header ligt. De rij ging bij een open mandje boven de
	 *   balk bovenaan (z-index 4, uit de tijd van de overlay over het hele
	 *   scherm); dan zou de inhoud onderweg over de oranje balk schuiven. De
	 *   rij blijft nu op zijn eigen z-index 2, onder de balk (3).
	 *
	 * De overgang naar dicht staat op nrd-mand-gaat, niet op de ruststand:
	 * bij het openen zet het script eerst de nieuwe hoogte van het vel, en
	 * dat mag de inhoud niet zichtbaar verschuiven.
	 */
	.nrd-mand-open #header,
	.nrd-mand-gaat #header {
		z-index: 99990;
	}

	.nrd-mand-js [data-header*="type-1"] [data-id="cart"] .ct-cart-content > * {
		translate: 0 calc(var(--admin-bar, 0px) - var(--nrd-mand-vel, 60vh));
	}

	.nrd-mand-gaat [data-header*="type-1"] [data-id="cart"] .ct-cart-content > * {
		transition: translate 0.24s cubic-bezier(0.55, 0, 1, 0.45);
	}

	.nrd-mand-open [data-header*="type-1"] [data-id="cart"] .ct-cart-content > * {
		translate: 0 0;
		transition: translate 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	}

	/* Het icoon wordt Sluit: wit vlak, petrol kruisje, geen telbolletje. */
	.nrd-mand-js #header [data-id="cart"] > .ct-cart-item .ct-icon-container {
		position: relative;
		isolation: isolate;
	}

	.nrd-mand-js #header [data-id="cart"] > .ct-cart-item .ct-icon-container::before,
	.nrd-mand-js #header [data-id="cart"] > .ct-cart-item .ct-icon-container::after {
		content: "";
		position: absolute;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.nrd-mand-js #header [data-id="cart"] > .ct-cart-item .ct-icon-container::before {
		z-index: -1;
		inset: -11px;
		border-radius: var(--theme-button-border-radius, 4px);
		background: var(--theme-palette-color-8, #fff);
		box-shadow: inset 0 0 0 1px #d6e5df;
	}

	.nrd-mand-js #header [data-id="cart"] > .ct-cart-item .ct-icon-container::after {
		inset: 0;
		background: var(--theme-palette-color-10, #31545b);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 3l12 12M15 3L3 15' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 3l12 12M15 3L3 15' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
		transform: rotate(-90deg) scale(0.6);
		transition: opacity 0.2s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.nrd-mand-js #header [data-id="cart"] > .ct-cart-item .ct-icon-container > * {
		transition: opacity 0.2s ease;
	}

	.nrd-mand-open #header [data-id="cart"] > .ct-cart-item[aria-expanded="true"] .ct-icon-container::before,
	.nrd-mand-open #header [data-id="cart"] > .ct-cart-item[aria-expanded="true"] .ct-icon-container::after {
		opacity: 1;
	}

	.nrd-mand-open #header [data-id="cart"] > .ct-cart-item[aria-expanded="true"] .ct-icon-container::after {
		transform: none;
	}

	.nrd-mand-open #header [data-id="cart"] > .ct-cart-item[aria-expanded="true"] .ct-icon-container > * {
		opacity: 0;
	}

	/* Bovenaan een pagina met een doorzichtige header is het zoekicoon wit:
	   daar ligt de hero achter. Met het mint vel van het mandje erachter zie
	   je het niet meer (Aart, 11 oktober 2026). Zolang het mandje open is
	   krijgt het de donkere kleur van de vaste pil, net als bij het open
	   menu (mobiel-menu.css). Het mandje zelf is dan het kruisje. Live sinds
	   11 oktober 2026. */
	.nrd-mand-open [data-header*="type-1"] [data-transparent] :is([data-id="search"], [data-id="account"] .ct-account-item) {
		--theme-icon-color: var(--theme-palette-color-2, #121723);
		--theme-icon-hover-color: rgba(46, 46, 46, 0.6);
	}
}

@media (max-width: 999.98px) and (prefers-reduced-motion: reduce) {
	.nrd-mand-achter__vel,
	.nrd-mand-open .nrd-mand-achter__vel {
		transform: none;
		transition: none;
	}

	.nrd-mand-komt [data-header*="type-1"] [data-id="cart"] .ct-cart-content * {
		animation: none;
	}

	.nrd-mand-js [data-header*="type-1"] [data-id="cart"] .ct-cart-content > * {
		translate: none;
		transition: none;
	}

	.nrd-mand-js #header [data-id="cart"] > .ct-cart-item .ct-icon-container::after {
		transform: none;
	}
}

/*
 * Productopties. Blocksy zet in dl.variation elke dt op float:left met
 * clear:both, en WooCommerce maakt dt, dd en p inline. Bij één optie gaat dat
 * goed. Bij meer opties stapelen de labels links, terwijl de waarden als één
 * regel tekst langs de stapel lopen, en klopte de koppeling niet meer:
 * "Gewicht: 1000 gram Medium / Branding: roast Cafetière /". Nu is elk paar
 * gewoon tekst, met een regeleinde na elke waarde. Een grid met twee kolommen
 * is geprobeerd, maar in het besteloverzicht op een telefoon is de kolom
 * 104 px breed en brak de waarde daar per woord af. Dezelfde selectors als
 * woocommerce.min.css van Blocksy; dit bestand hangt daaraan en wint dus op
 * volgorde.
 */
dl.variation dt,
dl.variation dd,
dl.variation p {
	display: inline;
	float: none;
	margin: 0;
}

/*
 * Op /winkelmand/ staat er in de HTML geen spatie tussen dt en dd, in het
 * paneel wel. Deze spatie valt samen met een spatie die er al staat, dus het
 * is overal precies één.
 */
dl.variation dt::after {
	content: " ";
}

dl.variation dd::after {
	content: "\A";
	white-space: pre;
}