/*
 * De volle winkelmand (winkelmand-vol.php), live sinds 12 oktober 2026.
 * Alles voor de pagina hangt aan .nrd-vol, het blok dat
 * winkelmand-vol.php om de winkelmand zet. Onderaan staat wat ook in het
 * mini-mandje en bij het afrekenen geldt: de bijgesneden foto (.nrd-foto) en
 * "Gratis bezorgd" met een vinkje (.nrd-gratis).
 *
 * Kleuren uit winkelmand.css (--nrd-m-*), dat hiervoor laadt. De pagina is
 * mint met witte vlakken; petrol voor wat iets zegt, oranje alleen voor de
 * knop die bestelt. De tabellen van het thema sturen we via zijn eigen
 * variabelen (--theme-table-*, --cart-totals-*); waar het thema een regel
 * zelf zet, staat hier een regel van hetzelfde gewicht (dit bestand laadt
 * erna).
 */

.nrd-vol {
	--v-mint: var(--theme-palette-color-7, #eef5f2);
	--v-geel: var(--theme-palette-color-5, #fbefcc);
	--v-inkt: var(--theme-palette-color-2, #121723);
	--v-wit: var(--theme-palette-color-8, #fff);
	--v-uit: cubic-bezier(0.22, 1, 0.36, 1);
	/* De binnenruimte van het witte vak, en de ruimte tussen kop en inhoud. */
	--v-rand: var(--theme-boxed-content-spacing, 0px);
	--v-boven: var(--theme-content-vertical-spacing, 0px);

	/* Over het witte vak van Blocksy heen, zoals de lege mand (.nrd-leeg). */
	margin: calc(var(--v-rand) * -1);
	margin-top: calc(24px - var(--v-rand) - var(--v-boven));
	background: var(--v-mint);
	box-shadow: 0 0 0 24px var(--v-mint);
	color: var(--v-inkt);
}

/* De paginakop "Winkelmand" met het kruimelpad: het podium heeft de kop al.
   De regel hangt aan de kop zelf. Die staat als eerste in <main>, met de
   pagina erna. Met body voor de :has() rekende de browser na elke
   wijziging in de pagina de stijl opnieuw uit (zie zuinige-start.php). */
.nrd-kop:has(~ * .nrd-vol) {
	display: none;
}

.nrd-vol ::selection {
	background: #cfe3db;
	color: var(--v-inkt);
}

/* Meldingen ("... verwijderd. Ongedaan maken?") boven het podium, dicht erop. */
.nrd-vol .woocommerce-notices-wrapper:not(:empty) {
	display: grid;
	gap: 8px;
	margin-bottom: 16px;
}

.nrd-vol .woocommerce-notices-wrapper > * {
	margin: 0;
	border-radius: 10px;
}

/* De indeling ------------------------------------------------------------- */

/*
 * Het formulier wordt display: contents, zodat podium, lijst, voordeel en
 * "Snel verzonden" elk een eigen plek krijgen naast het overzicht. In de DOM
 * blijft alles staan waar het stond, dus versturen werkt als altijd.
 * Smal: podium, lijst, voordeel, overzicht, en dan de suggestie.
 */
.nrd-vol .ct-woocommerce-cart-form {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.nrd-vol .woocommerce-cart-form {
	display: contents;
}

.nrd-vol .cart_totals {
	order: 1;
}

.nrd-vol .nrd-mand-extra {
	order: 2;
	margin-top: 12px;
}

/*
 * Lijst en overzicht naast elkaar zolang het kan (Aart, 12 oktober 2026:
 * "liefst wel zo lang als mogelijk is naast elkaar houden"): vanaf 760px. Het
 * overzicht is een derde van de breedte, tussen 296 en 384px, en blijft in
 * beeld hangen. Hoe de productregel eruitziet hangt niet aan het venster maar
 * aan de breedte van de lijst zelf (zie "De productregels").
 */
@media (min-width: 760px) {
	.nrd-vol .ct-woocommerce-cart-form {
		grid-template-columns: minmax(0, 1fr) clamp(296px, 32%, 384px);
		grid-template-rows: auto auto auto 1fr;
		gap: 20px 24px;
		align-items: start;
	}

	.nrd-vol__podium {
		grid-column: 1 / -1;
	}

	.nrd-vol .woocommerce-cart-form__contents,
	.nrd-vol .nrd-voordeel,
	.nrd-vol .nrd-mand-extra {
		grid-column: 1;
	}

	.nrd-vol .cart_totals {
		position: sticky;
		top: calc(24px + var(--admin-bar, 0px) + var(--header-sticky-height, 0px) * var(--sticky-shrink, 100) / 100);
		grid-column: 2;
		grid-row: 2 / span 3;
	}
}

@media (min-width: 1000px) {
	.nrd-vol .ct-woocommerce-cart-form {
		column-gap: 28px;
	}
}

/*
 * Verborgen tot er opmaak is. Een tabblad dat de winkelmand al open had voor
 * deze opmaak live ging, krijgt bij de eerste plus of min het nieuwe
 * formulier van cart.js, zonder dit bestand en zonder .nrd-vol eromheen: het
 * podium en de strook stonden daar dan los en zonder opmaak boven de
 * producten. In zo'n antwoord zet winkelmand-vol.php daarom hidden op die
 * twee; hier, waar de opmaak er wel is, komen ze terug.
 */
.nrd-vol .nrd-vol__podium[hidden] {
	display: flex;
}

.nrd-vol .nrd-voordeel[hidden] {
	display: block;
}

/*
 * Net zo de luiaard naast de mand (12 oktober 2026): een tabblad met de
 * opmaak van voor die dag zou de tekening op volle grootte in het podium
 * zetten.
 */
.nrd-vol .nrd-vol__luiaard[hidden] {
	display: block;
}

/* Het podium -------------------------------------------------------------- */

.nrd-vol__podium {
	/* Zonder cqw (Safari voor 16) vaste maten; @supports hieronder. */
	--t-b: 132px;
	--t-r: 14px;
	--theme-heading-color: #fff;

	position: relative;
	isolation: isolate;
	overflow: hidden; /* de liaan komt van buiten het beeld */
	container-type: inline-size;
	display: flex;
	align-items: center;
	min-height: 168px;
	border-radius: 18px;
	background: var(--nrd-m-petrol);
	color: #fff;
}

@supports (width: 1cqw) {
	.nrd-vol__podium {
		--t-b: clamp(128px, 22cqw, 212px);
		--t-r: clamp(10px, 4.5cqw, 64px);
	}
}

.nrd-vol__podium ::selection {
	background: var(--v-geel);
	color: var(--v-inkt);
}

.nrd-vol__sterren {
	position: absolute;
	inset: 0;
	z-index: 0;
	fill: var(--v-geel);
	opacity: 0.85;
	pointer-events: none;
}

.nrd-vol__tekst {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	padding: 26px 0 26px 22px;
	padding: clamp(24px, 4cqw, 40px) 0 clamp(24px, 4cqw, 40px) clamp(20px, 4.6cqw, 52px);
}

/* Tot aan het toneel, niet eroverheen. */
.nrd-vol__toneel + .nrd-vol__tekst {
	max-width: calc(100% - var(--t-b) - var(--t-r) - 4px);
}

.nrd-vol .nrd-vol__kop {
	margin: 0;
	color: #fff;
	font-size: 30px;
	font-size: clamp(28px, 5cqw, 40px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* Elke zin op een eigen regel; de tweede in de kleur van de maan. */
.nrd-vol__kop span:not(.screen-reader-text) {
	display: block;
}

.nrd-vol__kop span:last-child {
	color: var(--v-geel);
}

.nrd-vol .nrd-vol__lead {
	margin: 12px 0 0;
	color: var(--nrd-m-lijn);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	text-wrap: pretty;
}

/*
 * Het toneel: de maan, en ervoor de mand aan zijn liaan. De mand hangt met
 * zijn onderkant vlak boven de rand van het podium; de liaan loopt boven het
 * beeld door, daar draait het geheel om.
 */
.nrd-vol__toneel {
	position: absolute;
	top: 0;
	right: var(--t-r);
	bottom: 0;
	z-index: 1;
	width: var(--t-b);
	-webkit-user-select: none;
	user-select: none;
}

.nrd-vol__maan {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 82%;
	aspect-ratio: 1;
	translate: -24% -54%;
	border-radius: 50%;
	background: var(--v-geel);
}

/*
 * De luiaard van de lege mand, live sinds 12 oktober 2026 (winkelmand-vol.php,
 * nrd_mand_vol_luiaard). Daar paste hij op je lege mand en sliep hij erbij;
 * nu de mand vol is, slaapt hij nog steeds. Hij hangt rechts van de mand en
 * komt van buiten het beeld: zijn lianen lopen boven het podium door en
 * rechts snijdt de rand hem af.
 *
 * De tekening is 898 bij 935. De luiaard zelf zit tussen 47% en 87% van de
 * hoogte, zijn kop tussen 27% en 40% van de breedte, de drie Z's daarboven.
 * De hoogte hangt aan die van het podium; de rechterrand van de tekening
 * ligt op die van het podium en schuift er met translate een deel overheen.
 * Smal blijft 42% in beeld: de lianen, de Z's en zijn kop. Breed 88%: de hele
 * luiaard.
 *
 * De mand schuift ervoor op naar links (--t-r) tot hij net voor de bladeren
 * links van de luiaard hangt. Smal is de mand een fractie kleiner (--t-b),
 * zodat de tekst even breed blijft als zonder luiaard. De maan gaat mee
 * naar links, recht achter de mand: de Z's zijn wit en vallen weg tegen het
 * geel.
 */
.nrd-vol__luiaard {
	position: absolute;
	top: -10%;
	right: calc(var(--t-r) * -1);
	height: 120%;
	aspect-ratio: 898 / 935;
	translate: 58% 0;
	/* Waar de liaan het beeld in komt, zoals op de lege mand: daar draait hij om. */
	transform-origin: 29.2% 0;
	pointer-events: none;
}

/* De tekening wiegt (CSS); het vak eromheen beweegt mee met de mand (script). */
.nrd-vol__luiaard img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	transform-origin: 29.2% 0;
}

.nrd-vol__podium--luiaard .nrd-vol__toneel,
.nrd-vol__podium--luiaard .nrd-vol__tekst {
	--t-b: 124px;
	--t-r: 20px;
}

.nrd-vol__podium--luiaard .nrd-vol__maan {
	translate: -58% -54%;
}

/* Een breed podium: de hele luiaard. */
@container (min-width: 620px) {
	.nrd-vol__luiaard {
		top: 0;
		height: 110%;
		translate: 12% 0;
	}

	.nrd-vol__podium--luiaard .nrd-vol__toneel,
	.nrd-vol__podium--luiaard .nrd-vol__tekst {
		--t-b: clamp(128px, 22cqw, 212px);
		--t-r: clamp(110px, 13cqw, 132px);
	}

	.nrd-vol__podium--luiaard .nrd-vol__maan {
		translate: -50% -54%;
	}
}

.nrd-vol__hang {
	position: absolute;
	bottom: 12px;
	left: 50%;
	width: 66%;
	aspect-ratio: 140 / 250;
	margin-left: -33%;
	transform-origin: 50% 0;
}

.nrd-vol__mand {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.nrd-vol__mand--voor {
	z-index: 2;
}

/*
 * De opening van de mand: 100 van de 140 breed, en de producten staan met hun
 * voet een stuk onder de rand, achter de buik van de mand.
 */
.nrd-vol__inhoud {
	position: absolute;
	bottom: 28.8%;
	left: 14.2857%;
	z-index: 1;
	width: 71.4286%;
	height: 0;
}

/* Elk product bijgesneden op zijn kader (--kx, --ky, --kb, --kh). */
.nrd-vol__stuk {
	position: absolute;
	bottom: 0;
	left: calc(var(--x) * 1% - var(--b) * 0.5%);
	z-index: var(--laag);
	width: calc(var(--b) * 1%);
	aspect-ratio: var(--kb) / var(--kh);
	margin-bottom: calc(var(--op) * 1%);
	overflow: hidden;
	rotate: var(--r);
	transform-origin: 50% 100%;
}

.nrd-vol__stuk img {
	position: absolute;
	top: calc(var(--ky) / var(--kh) * -100%);
	left: calc(var(--kx) / var(--kb) * -100%);
	width: calc(100% / var(--kb));
	max-width: none;
	height: auto;
}

/*
 * Beweging, één keer: de producten komen een voor een omhoog in de mand, en
 * de mand zwaait daarvan uit. Na een paar tellen zet het script .is-binnen:
 * cart.js vervangt het podium bij elke wijziging, en dan speelt de
 * binnenkomst niet opnieuw.
 *
 * Het zwaaien zelf doet het script (winkelmand-vol.js): de mand is een
 * slinger die de vaart van de muis overneemt en daarna uitzwaait, ook als de
 * muis al weg is. Het zet .is-slinger op de mand; de zwaai hieronder is er
 * alleen voor wie het script niet heeft.
 */
@media (prefers-reduced-motion: no-preference) {
	.nrd-vol:not(.is-binnen) .nrd-vol__stuk {
		animation: nrd-vol-stuk 0.7s var(--v-uit) calc(0.2s + var(--i) * 0.11s) both;
	}

	.nrd-vol:not(.is-binnen) .nrd-vol__hang {
		animation: nrd-vol-wieg 3.4s ease-in-out 0.45s both;
	}

	.nrd-vol .nrd-vol__hang.is-slinger {
		animation: none;
	}

	/* De luiaard wiegt zachtjes, zoals op de lege mand. */
	.nrd-vol__luiaard img {
		animation: nrd-vol-slaap 7s ease-in-out infinite alternate;
	}

	.nrd-vol__ster--a {
		animation: nrd-vol-ster 3.4s ease-in-out infinite alternate;
	}

	.nrd-vol__ster--b {
		animation: nrd-vol-ster 4.6s ease-in-out -2s infinite alternate;
	}

	.nrd-vol__ster--c {
		animation: nrd-vol-ster 5.8s ease-in-out -1s infinite alternate;
	}

	.nrd-vol:not(.is-binnen) .nrd-meter__vul {
		animation: nrd-meter-vul 0.9s var(--v-uit) 0.35s both;
	}
}

@keyframes nrd-vol-stuk {
	from {
		opacity: 0;
		translate: 0 44%;
	}
}

@keyframes nrd-vol-wieg {
	0% { rotate: 0deg; }
	16% { rotate: 2.6deg; }
	38% { rotate: -1.8deg; }
	60% { rotate: 1deg; }
	80% { rotate: -0.4deg; }
	100% { rotate: 0deg; }
}

@keyframes nrd-vol-slaap {
	from { rotate: -1.1deg; }
	to { rotate: 1.1deg; }
}

@keyframes nrd-vol-ster {
	from { opacity: 0.25; }
	to { opacity: 1; }
}

@keyframes nrd-meter-vul {
	from { clip-path: inset(0 100% 0 0 round 999px); }
}

/* De productregels -------------------------------------------------------- */

/*
 * De tabel wordt een lijst op een wit vlak. Elke rij is een grid: de foto,
 * daarnaast naam met gewicht en maling als pillen, en het bedrag van de
 * regel. Smal staat het aantal onder de pillen (de rij van Blocksy voor
 * mobiel) en het bedrag rechtsboven; breed staan aantal, bedrag en
 * prullenbak op de regel van de naam.
 */
.nrd-vol .woocommerce-cart-form__contents {
	--theme-table-padding: 0;
	container: nrd-lijst / inline-size;
	display: block;
	margin: 0;
	padding: 4px 18px 6px;
	border-radius: 14px;
	background: var(--v-wit);
}

.nrd-vol .woocommerce-cart-form__contents tbody,
.nrd-vol .woocommerce-cart-form__contents td {
	display: block;
}

/* "Product / Aantal / Subtotaal": de regels zeggen het zelf. Voor schermlezers blijft hij. */
.nrd-vol .woocommerce-cart-form__contents thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.nrd-vol .woocommerce-cart-form__contents tr {
	--theme-table-border-width: 0;
	display: block;
}

.nrd-vol .woocommerce-cart-form__contents .cart_item {
	--foto: 72px;
	position: relative;
	display: grid;
	grid-template-columns: var(--foto) minmax(0, 1fr);
	column-gap: 14px;
	align-items: start;
	padding: 16px 0;
	border-bottom: 1px dashed var(--nrd-m-lijn);
}

.nrd-vol .shop_table .product-thumbnail {
	width: var(--foto);
}

.nrd-vol .shop_table .product-thumbnail .ct-media-container {
	display: block;
	width: var(--foto);
	aspect-ratio: 1;
	border-radius: 12px;
	background: var(--v-mint);
}

.nrd-vol .shop_table .product-name {
	--theme-link-initial-color: var(--nrd-m-petrol);
	--theme-link-hover-color: var(--nrd-m-petrol);
	max-width: none;
}

/*
 * Smal: ruimte rechts van de naam voor het bedrag van de regel. Niet voor
 * "Aanpassen" van de cadeaubon: die link staat ook los in dit vak
 * (cadeaubon.php) en houdt zijn eigen opmaak.
 */
.nrd-vol .shop_table .product-name > a:not(.nrd-cb-aanpassen),
.nrd-vol .shop_table .product-name > .nrd-cb-naam {
	display: block;
	width: fit-content;
	max-width: calc(100% - 84px);
	font-family: Acme, var(--theme-font-family, sans-serif);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.2;
	text-underline-offset: 3px;
}

.nrd-vol .shop_table .product-name > a:not(.nrd-cb-aanpassen):hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.nrd-vol .shop_table .product-name > a:focus-visible,
.nrd-vol .shop_table .remove:focus-visible {
	outline: 2px solid var(--nrd-m-petrol);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Gewicht en maling als twee rustige pillen; de labels alleen voor schermlezers. */
.nrd-vol .cart_item dl.variation {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 0;
}

.nrd-vol .cart_item dl.variation dt {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.nrd-vol .cart_item dl.variation dd {
	margin: 0;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--v-mint);
	color: var(--nrd-m-petrol);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

.nrd-vol .cart_item dl.variation dd p {
	margin: 0;
}

/* De prijs per stuk, alleen als er meer dan één ligt: anders staat hij er twee keer. */
.nrd-vol .shop_table .product-name .price {
	margin-top: 8px;
	color: var(--nrd-m-rustig);
	font-size: 14px;
}

.nrd-vol .shop_table .product-name .price::after {
	content: " per stuk";
}

.nrd-vol .cart_item:has(.qty[value="1"]) .product-name .price,
.nrd-vol .cart_item:has(.qty[value="1"]) .ct-product-multiply-symbol,
.nrd-vol .cart_item:has(.qty[value="1"]) .product-mobile-actions > .amount,
.nrd-vol .cart_item:has(.nrd-cb-acties) .product-name .price,
.nrd-vol .cart_item:has(.nrd-cb-acties) .ct-product-multiply-symbol,
.nrd-vol .cart_item:has(.nrd-cb-acties) .product-mobile-actions > .amount {
	display: none;
}

/*
 * De cadeaubon. De kaart is zo breed als de productfoto's (eerst 96px; Aart
 * op 12 oktober 2026: "de bon is iets groter"). De naam is geen link, en
 * WooCommerce zet er dan een harde spatie achter: als blok kwam die op een
 * eigen, lege regel boven de pillen.
 */
.nrd-vol .shop_table .product-name > .nrd-cb-naam {
	display: inline-block;
	vertical-align: top;
}

.nrd-vol .shop_table .product-mobile-actions {
	margin-top: 12px;
	color: var(--nrd-m-rustig);
	font-size: 14px;
}

.nrd-vol .shop_table .quantity {
	--theme-form-field-border-radius: 10px;
}

/* Het bedrag van de regel: smal rechtsboven, naast de naam. */
.nrd-vol .shop_table tr > .product-subtotal {
	position: absolute;
	top: 16px;
	right: 0;
	display: block;
	color: var(--v-inkt);
	font-family: Acme, var(--theme-font-family, sans-serif);
	font-size: 19px;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.nrd-vol .shop_table .remove {
	--theme-icon-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-right: -10px;
	border-radius: 999px;
	color: var(--nrd-m-rustig);
	transition: background-color 0.2s var(--v-uit);
}

.nrd-vol .shop_table .remove:hover {
	background: var(--v-mint);
}

/* De regel met de kortingscode. */
.nrd-vol .woocommerce-cart-form__contents .actions {
	padding: 10px 0;
	text-align: left;
}

/*
 * Een code die niet kan: WooCommerce zet de melding in het vak van het veld,
 * en daar stond hij naast de knop geperst. Nu op een eigen regel eronder, in
 * de foutkleur van het afrekenformulier (afrekenen.css).
 */
.nrd-vol .woocommerce-cart-form__contents .coupon {
	flex-wrap: wrap;
	row-gap: 8px;
}

.nrd-vol .woocommerce-cart-form__contents .coupon-error-notice {
	flex-basis: 100%;
	margin: 0;
	color: #b42318;
	font-size: 14px;
	line-height: 1.45;
}

/* Een smalle telefoon: iets kleiner, zodat een lange naam op twee regels past. */
@media (max-width: 479.98px) {
	.nrd-vol .woocommerce-cart-form__contents {
		padding-inline: 14px;
	}

	.nrd-vol .woocommerce-cart-form__contents .cart_item {
		--foto: 64px;
		column-gap: 12px;
	}

	.nrd-vol .shop_table .product-name > a:not(.nrd-cb-aanpassen),
	.nrd-vol .shop_table .product-name > .nrd-cb-naam {
		max-width: calc(100% - 76px);
		font-size: 18px;
	}

	.nrd-vol .shop_table tr > .product-subtotal {
		font-size: 18px;
	}
}

/*
 * Vanaf 1000px toont Blocksy de losse vakken voor aantal en prullenbak in
 * plaats van zijn rij voor mobiel. De regel heeft dan twee rijen: naam met
 * rechts het bedrag, daaronder het aantal met rechts de prullenbak. Zo houdt
 * de naam de volle breedte, ook als de lijst smal is naast het overzicht.
 */
@media (min-width: 1000px) {
	.nrd-vol .woocommerce-cart-form__contents {
		padding: 6px 28px 8px;
	}

	.nrd-vol .woocommerce-cart-form__contents .cart_item {
		--foto: 88px;
		grid-template-columns: var(--foto) minmax(0, 1fr) auto;
		grid-template-areas:
			"foto naam totaal"
			"foto aantal weg";
		gap: 12px 20px;
		padding: 20px 0;
	}

	.nrd-vol .shop_table tr > .product-thumbnail {
		grid-area: foto;
	}

	.nrd-vol .shop_table tr > .product-name {
		grid-area: naam;
	}

	.nrd-vol .shop_table .product-name > a:not(.nrd-cb-aanpassen),
	.nrd-vol .shop_table .product-name > .nrd-cb-naam {
		max-width: 100%;
		font-size: 20px;
	}

	.nrd-vol .shop_table tr > .product-subtotal {
		position: static;
		grid-area: totaal;
		font-size: 20px;
	}

	.nrd-vol .shop_table tr > .product-quantity {
		grid-area: aantal;
		text-align: left;
	}

	.nrd-vol .shop_table tr > .product-remove {
		grid-area: weg;
		align-self: center;
		width: auto;
	}

	.nrd-vol .shop_table .remove {
		margin-right: -8px;
	}

	/* Een brede lijst (660px binnen de randen): alles op één regel, zoals een tabel. */
	@container nrd-lijst (min-width: 660px) {
		.nrd-vol .woocommerce-cart-form__contents .cart_item {
			grid-template-columns: var(--foto) minmax(0, 1fr) auto 96px 36px;
			grid-template-areas: "foto naam aantal totaal weg";
			align-items: center;
		}

		.nrd-vol .shop_table tr > .product-quantity {
			text-align: center;
		}
	}
}

/* Voordeel: verzending en staffelkorting ---------------------------------- */

/*
 * Eén wit vlak met een regel per onderwerp: icoon, zin, en de meter. Is het
 * vlak breed genoeg, dan staat de meter naast de zin.
 */
.nrd-voordeel {
	container-type: inline-size;
	padding: 2px 18px;
	border-radius: 14px;
	background: var(--v-wit);
	color: var(--nrd-m-petrol);
}

.nrd-voordeel__vak {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	column-gap: 12px;
	align-items: start;
	padding: 16px 0;
}

.nrd-voordeel__vak + .nrd-voordeel__vak {
	border-top: 1px dashed var(--nrd-m-lijn);
}

.nrd-voordeel__vak .nrd-mand-icoon {
	width: 24px;
	height: 24px;
}

/*
 * De actie met de cadeaubon (cadeaubon-actie.php): Robin en Leon op de plek
 * van het icoon. Op 24 px zie je geen gezichten, dus een bredere kolom. De
 * witte rand houdt het portret los van het mint paneel van het mini-mandje.
 */
.nrd-voordeel__vak--actie {
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: center;
}

.nrd-voordeel__vak--actie .nrd-cb-portret {
	display: block;
	width: 40px;
	height: 40px;
	border: 2px solid var(--theme-palette-color-8, #fff);
	border-radius: 50%;
}

.nrd-voordeel .nrd-voordeel__zin {
	margin: 0;
	padding-top: 1px;
	font-size: 15px;
	line-height: 1.45;
	text-wrap: pretty;
}

.nrd-voordeel__zin strong {
	font-weight: 700;
}

@container (min-width: 600px) {
	.nrd-voordeel__inhoud {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
		column-gap: 32px;
		align-items: start;
	}

	.nrd-voordeel__inhoud .nrd-meter {
		margin-top: 7px;
	}

	/* Zonder meter de hele breedte voor de zin. */
	.nrd-voordeel__vak--actie .nrd-voordeel__inhoud {
		display: block;
	}
}

@media (min-width: 1000px) {
	.nrd-voordeel {
		padding-inline: 28px;
	}
}

/*
 * De meter: een spoor met een petrol vulling, een stip bij elke grens en
 * eronder wat die grens oplevert. Dezelfde vorm als het staffelblok op de
 * productpagina (staffelblok.css). De helft van een stip steekt rechts uit.
 */
.nrd-meter {
	--stip: 14px;
	margin-top: 14px;
	padding-right: calc(var(--stip) / 2);
}

.nrd-meter__spoor {
	position: relative;
	display: block;
	height: 8px;
	border-radius: 999px;
	background: var(--v-mint);
	box-shadow: inset 0 0 0 1px rgba(116, 155, 141, 0.45);
}

.nrd-meter__vul {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--nrd-m-petrol);
	clip-path: inset(0 calc((1 - var(--deel, 0)) * 100%) 0 0 round 999px);
}

.nrd-meter__stip {
	position: absolute;
	top: 50%;
	left: calc(var(--plek) * 100%);
	box-sizing: border-box;
	width: var(--stip);
	height: var(--stip);
	border: 2px solid rgba(49, 84, 91, 0.32);
	border-radius: 50%;
	background: var(--v-wit);
	transform: translate(-50%, -50%);
}

.nrd-meter__stip.is-bereikt {
	border-color: var(--v-wit);
	background: var(--nrd-m-petrol);
	box-shadow: 0 0 0 1px var(--nrd-m-petrol);
}

.nrd-meter__treden {
	position: relative;
	display: block;
	height: 36px;
	margin-top: 9px;
	font-size: 13px;
	line-height: 1.35;
}

.nrd-meter__trede {
	position: absolute;
	top: 0;
	left: calc(var(--plek) * 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translateX(-50%);
	color: var(--nrd-m-rustig);
	white-space: nowrap;
}

/* De laatste grens staat aan het eind van het spoor: rechts uitlijnen. */
.nrd-meter__trede:last-child {
	align-items: flex-end;
	transform: translateX(calc(-100% + var(--stip) / 2));
}

.nrd-meter__trede strong {
	color: var(--nrd-m-petrol);
	font-weight: 700;
}

/* De suggestie en "Snel verzonden" op de mintgrond. */
.nrd-vol .nrd-mand-extra {
	gap: 28px;
}

.nrd-vol .nrd-mand-suggestie {
	border: 0;
	border-radius: 14px;
	background: var(--v-wit);
}

.nrd-vol .nrd-mand-suggestie__foto img {
	border-radius: 12px;
	background: var(--v-mint);
}

.nrd-vol .nrd-smaak--mand {
	padding-inline: 4px;
}

/* Het overzicht ------------------------------------------------------------ */

.nrd-vol .cart_totals {
	--cart-totals-padding: 22px 20px 20px;
	--cart-totals-border: 0;
	--cart-totals-border-radius: 14px;
	background: var(--v-wit);
}

.nrd-vol .cart_totals h2 {
	margin: 0 0 4px;
	color: var(--nrd-m-petrol);
	font-size: 22px;
	line-height: 1.2;
}

/* Ook hier een lijst: links wat het is, rechts het bedrag. */
.nrd-vol .cart_totals .shop_table {
	--theme-table-padding: 0;
	display: block;
	margin: 0;
}

.nrd-vol .cart_totals tbody,
.nrd-vol .cart_totals th,
.nrd-vol .cart_totals td {
	display: block;
}

.nrd-vol .cart_totals tr {
	--theme-table-border-width: 0;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px dashed var(--nrd-m-lijn);
}

.nrd-vol .cart_totals tr.order-total {
	padding-bottom: 0;
	border-bottom: 0;
}

.nrd-vol .cart_totals th {
	font-size: 15px;
	font-weight: 600;
}

/* Smal zet WooCommerce het label nog eens voor het bedrag. */
.nrd-vol .cart_totals td[data-title]::before {
	content: none;
}

.nrd-vol .cart_totals .amount,
.nrd-vol .cart_totals #shipping_method label {
	color: var(--v-inkt);
	font-family: Acme, var(--theme-font-family, sans-serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Verzending op één regel: links het woord, rechts het bedrag of "Gratis". */
.nrd-vol .cart_totals .shipping td {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 12px;
	text-align: left;
}

.nrd-vol .cart_totals .shipping .ct-shipping-heading {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
}

.nrd-vol .cart_totals #shipping_method {
	margin: 0;
	text-align: right;
}

.nrd-vol .cart_totals .woocommerce-shipping-destination {
	flex-basis: 100%;
	margin: 0;
	color: var(--nrd-m-rustig);
	font-size: 13px;
	line-height: 1.45;
}

.nrd-vol .cart_totals .order-total th {
	color: var(--nrd-m-petrol);
	font-family: Acme, var(--theme-font-family, sans-serif);
	font-size: 20px;
	font-weight: 400;
}

.nrd-vol .cart_totals .order-total strong,
.nrd-vol .cart_totals .order-total .amount {
	font-size: 28px;
	font-weight: 400;
	line-height: 1.1;
}

.nrd-vol .cart_totals .wc-proceed-to-checkout {
	margin-top: 18px;
}

/*
 * De balk van Blocksy en de melding van de staffelplugin: de strook onder de
 * producten zegt het al. Ze blijven in de HTML staan, voor een tabblad dat
 * deze opmaak niet heeft (zie "Verborgen tot er opmaak is").
 */
.nrd-vol .ct-cart-totals-modules,
.nrd-vol .norush-staffel-msg {
	display: none;
}

/* Een pijl op de knop, die bij hover een stapje zet. */
.nrd-vol .checkout-button::after,
.nrd-plak__knop::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-left: 10px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: translate 0.3s var(--v-uit, ease-out);
}

.nrd-vol .checkout-button:hover::after,
.nrd-plak__knop:hover::after {
	translate: 4px 0;
}

@media (min-width: 1000px) {
	.nrd-vol .cart_totals {
		--cart-totals-padding: 26px 28px 26px;
	}
}

/* De balk onderin op een telefoon ------------------------------------------ */

/*
 * Het totaal en de knop, zolang de echte knop nog onder het scherm staat.
 * Het script haalt .is-weg weg; zonder script blijft de balk weg. Onder de
 * header (50) en de vellen van menu en mandje.
 */
.nrd-plak {
	display: none;
}

@media (max-width: 999.98px) {
	.nrd-plak {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 40;
		display: flex;
		align-items: center;
		gap: 18px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--v-wit);
		box-shadow: 0 -10px 28px rgba(36, 64, 63, 0.14);
		transition: translate 0.45s var(--v-uit), visibility 0s;
	}

	.nrd-plak.is-weg {
		translate: 0 110%;
		visibility: hidden;
		transition: translate 0.25s ease-in, visibility 0s linear 0.25s;
	}
}

.nrd-plak__totaal {
	display: grid;
	color: var(--nrd-m-rustig);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}

.nrd-plak__totaal .amount {
	color: var(--v-inkt);
	font-family: Acme, var(--theme-font-family, sans-serif);
	font-size: 22px;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.nrd-plak .nrd-plak__knop {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	border-radius: 6px;
	background: var(--nrd-m-oranje);
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s var(--v-uit);
}

.nrd-plak .nrd-plak__knop:hover {
	background: var(--nrd-m-oranje-donker);
	color: #fff;
}

.nrd-plak .nrd-plak__knop:focus-visible {
	outline: 3px solid var(--nrd-m-petrol);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.nrd-plak,
	.nrd-plak.is-weg,
	.nrd-vol .shop_table .remove,
	.nrd-vol .checkout-button::after,
	.nrd-plak__knop::after {
		transition: none;
	}
}

/* Ook in het mini-mandje en bij het afrekenen ------------------------------ */

/*
 * Wordt een regel (deels) nabesteld, dan staat eronder waarom de levering
 * langer duurt (nabestelling.php). Klein maar in de tekstkleur, niet in
 * rustig: het verandert wat je mag verwachten.
 */
.nrd-vol .shop_table .nrd-nabesteld,
.woocommerce-mini-cart .nrd-nabesteld,
.nrd-pakket-aan .shop_table .nrd-nabesteld {
	margin: 8px 0 0;
	color: var(--theme-palette-color-2, #121723);
	font-size: 14px;
	line-height: 1.45;
}

/*
 * De foto bijgesneden op het product (--kx, --ky, --kb en --kh uit
 * winkelmand-vol.php): zo groot dat het product 84% van het vlak vult, met
 * zijn midden op het midden van het vlak. Een bewaarblik stond anders
 * piepklein in zijn vierkant.
 */
.nrd-foto {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
}

/*
 * De popup na toevoegen laadt zijn opmaak pas als hij opent, na dit bestand,
 * en hangt alles aan zijn id: vandaar de tweede selector.
 */
.nrd-foto:not(.nrd-foto--dicht) img,
#ct-added-to-cart-popup .nrd-foto:not(.nrd-foto--dicht) img {
	--z: calc(0.84 / max(var(--kb), var(--kh)));
	position: absolute;
	top: calc(50% - (var(--ky) + var(--kh) / 2) * var(--z) * 100%);
	left: calc(50% - (var(--kx) + var(--kb) / 2) * var(--z) * 100%);
	width: calc(var(--z) * 100%);
	max-width: none;
	height: calc(var(--z) * 100%);
}

/* Een foto met een dichte witte achtergrond valt in het vlak eronder. */
.nrd-foto--dicht img {
	mix-blend-mode: multiply;
}

/* In de popup een mint vlak, zoals in de winkelmand: een wit blik viel weg op wit. */
#ct-added-to-cart-popup .ct-added-to-cart-product .ct-media-container.nrd-foto {
	border-radius: 12px;
	background: var(--theme-palette-color-7, #eef5f2);
}

/*
 * "Gratis bezorgd!" met een vinkje. De balk eronder is dan helemaal oranje en
 * zegt niets meer: weg. Bij het afrekenen staat "Gratis" al in de regel
 * Verzending, daar vervalt de melding.
 */
.nrd-gratis {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--nrd-m-petrol);
	font-weight: 600;
}

.nrd-gratis .nrd-mand-icoon {
	width: 20px;
	height: 20px;
}

[class*="ct-shipping-progress"]:has(.nrd-gratis) .ct-progress-bar,
.ct-shipping-progress-checkout-page:has(.nrd-gratis),
.ct-order-review-modules:has(> .ct-shipping-progress-checkout-page:only-child .nrd-gratis) {
	display: none;
}

/*
 * In het mini-mandje een vlak achter elke foto, een tint dieper dan het
 * paneel: een wit bewaarblik blijft wit en valt toch niet weg. De hoek gaat
 * via de variabele van Blocksy, dat zijn opmaak voor het paneel na dit
 * bestand laadt.
 */
.woocommerce-mini-cart .nrd-foto {
	--theme-border-radius: 10px;
	background: #dfece6;
}

/*
 * Verzending en staffelkorting in het mini-mandje (aan en uit met
 * nrd_staffel_popups_aan): dezelfde vakken als in de winkelmand en de popup,
 * met icoon, zin en meter. Het spoor heeft de tint van het vlak achter de
 * foto's, want mint valt weg op het paneel. De verzendregel van Blocksy staat
 * erna in de HTML en gaat weg zodra ons vak over de verzending er staat.
 */
.nrd-mini-voordeel {
	--v-mint: #dfece6;
	--v-wit: var(--theme-palette-color-8, #fff);
	color: var(--nrd-m-petrol);
}

.nrd-mini-voordeel--verzending ~ .ct-shipping-progress-mini-cart {
	display: none;
}

/*
 * Het paneel heeft een vaste max-height en alleen de lijst krimpt
 * (winkelmand.css in het child-thema), dus twee vakken met meter duwden
 * Afrekenen in een laag venster onder het paneel en uit beeld: op 375x553
 * stond de knop op 594 tot 642 px. Dan krimpt eerst de lijst tot 96 px
 * (flex-shrink 1000 in winkelmand.css) en daarna dit blok, dat dan scrolt;
 * past alles, dan verandert er niets. Dezelfde selector als de regel met
 * flex: none.
 */
[data-header*="type-1"] [data-id="cart"] .ct-cart-content .nrd-mini-voordeel {
	flex: 0 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/*
 * Valt alleen de ruimte onder het laatste vak buiten het blok, dan zet
 * winkelmand-overlay.js --rand en valt die ruimte weg zonder schuifbalk. In
 * desktop-Chrome op Windows stond er anders een schuifbalk naast de vakken
 * voor een paar pixels marge. Dezelfde selector als de regel hierboven.
 */
[data-header*="type-1"] [data-id="cart"] .ct-cart-content .nrd-mini-voordeel--rand {
	overflow-y: hidden;
}

/* Elk vak 16px boven en onder (de regel voor .nrd-voordeel__vak); vlak onder het subtotaal minder. */
.nrd-mini-voordeel .nrd-voordeel__vak:first-child {
	padding-top: 4px;
}

.nrd-mini-voordeel .nrd-voordeel__vak + .nrd-voordeel__vak {
	border-top-color: var(--mini-cart-divider-color, var(--nrd-m-lijn));
}

/*
 * Na "gratis bezorgd" staat er geen meter, en dan was 16px boven en onder de
 * lijn te veel (Aart: "ruimte hiertussen mag echt wat minder"). Na een meter
 * is het goed zo.
 */
.nrd-mini-voordeel .nrd-voordeel__vak--rond:not(:last-child) {
	padding-bottom: 10px;
}

.nrd-mini-voordeel .nrd-voordeel__vak--rond + .nrd-voordeel__vak {
	padding-top: 10px;
}

.nrd-mini-voordeel .nrd-voordeel__zin,
.nrd-afreken-voordeel .nrd-voordeel__zin {
	margin: 0;
	padding-top: 1px;
	font-size: 15px;
	line-height: 1.45;
	text-wrap: pretty;
}

.nrd-mini-voordeel .nrd-meter {
	margin-top: 12px;
}

/*
 * Te weinig ruimte. Passen de vakken niet in het paneel, dan zet
 * winkelmand-overlay.js --krap en blijven alleen de zinnen over. Afgekapt
 * door een woord heen, en na scrollen de bedragen van de verzendmeter los
 * onder het subtotaal, oogde als een fout (375x553, Aart, 24 oktober 2026:
 * "laat de meters weg als de vakken niet passen").
 */
.nrd-mini-voordeel--krap .nrd-meter {
	display: none;
}

.nrd-mini-voordeel--krap .nrd-voordeel__vak:not(:last-child) {
	padding-bottom: 12px;
}

.nrd-mini-voordeel--krap .nrd-voordeel__vak + .nrd-voordeel__vak {
	padding-top: 12px;
}

/*
 * Bij het afrekenen (nrd_mand_vol_afrekenen, live sinds 24 oktober 2026) het vak over de
 * verzending op het witte overzicht, met het mint spoor van de winkelmand.
 * De balk van Blocksy staat ervoor in de HTML en gaat weg. Is ons vak leeg
 * (gratis bezorgd, of geen staffel voor dat land), dan het hele blok.
 */
.nrd-afreken-voordeel {
	--v-mint: var(--theme-palette-color-7, #eef5f2);
	--v-wit: var(--theme-palette-color-8, #fff);
	color: var(--nrd-m-petrol);
}

.nrd-afreken-voordeel .nrd-voordeel__vak {
	padding: 0;
}

/* Na de verzending de actie met de cadeaubon, met de stippellijn ertussen. */
.nrd-afreken-voordeel .nrd-voordeel__vak + .nrd-voordeel__vak {
	margin-top: 14px;
	padding-top: 14px;
}

.ct-shipping-progress-checkout-page:has(+ .nrd-afreken-voordeel),
.ct-order-review-modules:has(> .ct-shipping-progress-checkout-page:first-child + .nrd-afreken-voordeel:last-child:empty) {
	display: none;
}

/*
 * Zonder :has() (Firefox 115 ESR, Safari voor 15.4) valt de regel hierboven
 * weg en stonden de balk van Blocksy en ons vak onder elkaar. Daar dan alleen
 * de balk, zoals voor deze wijziging. Het verborgen vak blijft het laatste
 * kind, dus de stippellijn die Blocksy dan onder de balk zet gaat ook weg.
 */
@supports not selector(:has(*)) {
	.nrd-afreken-voordeel {
		display: none;
	}

	.ct-order-review-modules > .ct-shipping-progress-checkout-page {
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: 0;
	}
}