/*
 * De lege winkelmand (winkelmand-leeg.php en sjablonen/winkelmand-leeg.php),
 * live sinds 11 oktober 2026. Alles hangt aan .nrd-leeg, dat
 * alleen het eigen sjabloon neerzet.
 *
 * Een petrol podium op de mintgrond: links de kop en de knop, rechts de maan
 * met de slapende luiaard en de lege mand. Daaronder de populairste koffies.
 * Het witte vak van Blocksy doet hier niet mee: het blok legt zich er met de
 * maat van het thema zelf (--theme-boxed-content-spacing) overheen, in de
 * kleur van de pagina. Zo werkt het ook als de lege mand zonder herladen in
 * de volle winkelmand komt.
 *
 * De maten van het toneel hangen aan --l-b, de breedte van de tekening van de
 * luiaard. De basis is de smalle opzet: het toneel boven de kop. Vanaf 640px
 * breedte van het blok staat het toneel naast de kop (container query
 * onderaan).
 *
 * Een browser zonder container queries (Safari voor 16, Firefox voor 110)
 * kent ook de eenheid cqw niet. Die houdt de smalle opzet op elke breedte, en
 * krijgt waar cqw staat de regel ervoor, in vaste maten of vw.
 */

.nrd-leeg {
	--l-petrol: var(--theme-palette-color-10, #31545b);
	--l-salie: var(--theme-palette-color-1, #749b8d);
	--l-inkt: var(--theme-palette-color-2, #121723);
	--l-oranje: var(--theme-palette-color-3, #e94e1b);
	--l-oranje-diep: #c64217;
	--l-geel: var(--theme-palette-color-5, #fbefcc);
	--l-mint: var(--theme-palette-color-7, #eef5f2);
	--l-lijn: #d6e5df;
	--l-uit: cubic-bezier(0.22, 1, 0.36, 1);
	/* De binnenruimte van het witte vak, en de ruimte tussen kop en inhoud. */
	--l-rand: var(--theme-boxed-content-spacing, 0px);
	--l-boven: var(--theme-content-vertical-spacing, 0px);

	container-type: inline-size;
	margin: calc(var(--l-rand) * -1);
	margin-top: calc(24px - var(--l-rand) - var(--l-boven));
	padding-bottom: 8px;
	background: var(--l-mint);
	/* Het witte vak heeft een zachte schaduw die onder en naast het blok
	   uitkomt. Een rand in de kleur van de pagina dekt hem af. */
	box-shadow: 0 0 0 24px var(--l-mint);
	color: var(--l-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-leeg) {
	display: none;
}

/*
 * Na het weggooien van het laatste product zet cart.js alle meldingen uit de
 * opgehaalde pagina bovenaan, ook "Je winkelwagen is momenteel leeg." uit de
 * minimand. Dat zegt de kop al.
 */
.nrd-leeg .woocommerce-info.cart-empty {
	display: none;
}

.nrd-leeg .woocommerce-notices-wrapper:not(:empty) {
	overflow: hidden;
	margin-bottom: 16px;
	border-radius: 10px;
}

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

.nrd-leeg__podium {
	/* Zonder cqw is het venster de maat. Een eigenschap met var() valt niet
	   terug op de regel ervoor, vandaar @supports hieronder. */
	--l-b: min(80vw, 420px);
	--theme-heading-color: #fff;
	--theme-link-initial-color: #fff;
	--theme-link-hover-color: #fff;

	position: relative;
	isolation: isolate;
	overflow: hidden; /* de lianen komen van buiten het beeld */
	border-radius: 18px;
	background: var(--l-petrol);
	color: #fff;
}

@supports (width: 1cqw) {
	.nrd-leeg__podium {
		--l-b: min(86cqw, 420px);
	}
}

.nrd-leeg__podium ::selection {
	background: var(--l-geel);
	color: var(--l-inkt);
}

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

.nrd-leeg__tekst {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	margin-top: -10px;
	padding: 0 24px 32px;
	padding: 0 clamp(20px, 6cqw, 40px) clamp(28px, 7cqw, 44px);
	/* Het vak zelf vangt geen muis of vinger: de mand die er half achter
	   hangt wel. Kop, zin en knop doen gewoon mee. */
	pointer-events: none;
}

.nrd-leeg__tekst > * {
	pointer-events: auto;
}

.nrd-leeg .nrd-leeg__kop {
	margin: 0;
	color: #fff;
	font-size: clamp(36px, 5vw, 64px);
	font-size: clamp(36px, 9.4cqw, 64px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

/* Elke zin op een eigen regel; de tweede in de kleur van de maan. */
.nrd-leeg__kop span {
	display: block;
}

.nrd-leeg__kop span + span {
	color: var(--l-geel);
}

.nrd-leeg .nrd-leeg__lead {
	max-width: 36ch;
	margin: 16px 0 0;
	color: var(--l-lijn);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.6;
	text-wrap: pretty;
}

.nrd-leeg .nrd-leeg__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	margin-top: 24px;
	padding: 0 32px;
	border-radius: 6px;
	background: var(--l-oranje);
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s var(--l-uit);
}

.nrd-leeg .nrd-leeg__knop:hover {
	background: var(--l-oranje-diep);
	color: #fff;
}

.nrd-leeg .nrd-leeg__knop:focus-visible {
	outline: 2px solid var(--l-geel);
	outline-offset: 3px;
}

/* Het toneel: maan, luiaard en mand -------------------------------------------- */

/*
 * Zo breed als de tekening en even hoog. De tekening houdt boven en rechts op,
 * midden in de liaan; die kanten vallen tegen de rand van het podium. Rechts
 * steekt hij iets uit, zodat je bij het zwaaien het eind van de liaan niet
 * ziet.
 */
.nrd-leeg__toneel {
	position: relative;
	z-index: 1;
	width: var(--l-b);
	margin: 0 calc(var(--l-b) * -0.07) 0 auto;
	/* Tot net onder de luiaard; de rest van de tekening is leeg. */
	aspect-ratio: 898 / 850;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.nrd-leeg__maan {
	position: absolute;
	top: 11%;
	left: 45%;
	width: 43.5%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--l-geel);
}

.nrd-leeg__hang {
	position: absolute;
	top: 0;
}

.nrd-leeg__hang--luiaard {
	left: 0;
	width: 100%;
	/* Waar de liaan het beeld in komt. */
	--l-as: 29.2% 0;
}

/*
 * Links van de tekening. De liaan begint boven het podium: zo blijft er onder
 * de mand ruimte voor de regel.
 */
.nrd-leeg__hang--mand {
	top: -13%;
	left: -8%;
	width: 26%;
	--l-as: 50% 0;
}

/* .nrd-leeg__zwaai draait het script (het zetje), .nrd-leeg__wieg de CSS. */
.nrd-leeg__zwaai,
.nrd-leeg__wieg {
	display: block;
	transform-origin: var(--l-as);
}

.nrd-leeg__hang img,
.nrd-leeg__mand {
	display: block;
	width: 100%;
	height: auto;
}

.nrd-leeg__mand {
	overflow: visible;
}

/* Onder de mand. Het script haalt hidden weg. */
.nrd-leeg .nrd-leeg__zetje {
	position: absolute;
	top: 71%;
	left: 5%;
	width: 9.5em;
	margin: 0;
	translate: -50% 0;
	color: var(--l-lijn);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	text-wrap: balance;
	transition: opacity 0.6s var(--l-uit);
}

.nrd-leeg__zetje.is-wissel {
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.nrd-leeg__hang--luiaard .nrd-leeg__wieg {
		--l-uitslag: 1.1deg;
		animation: nrd-leeg-wieg 7s ease-in-out infinite alternate;
	}

	.nrd-leeg__hang--mand .nrd-leeg__wieg {
		--l-uitslag: 2.2deg;
		animation: nrd-leeg-wieg 4.6s ease-in-out -1.3s infinite alternate;
	}

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

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

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

	/* Buiten beeld staat alles stil (het script zet de klasse). */
	.nrd-leeg__podium.is-uit-beeld .nrd-leeg__wieg,
	.nrd-leeg__podium.is-uit-beeld circle {
		animation-play-state: paused;
	}
}

@keyframes nrd-leeg-wieg {
	from { rotate: calc(var(--l-uitslag) * -1); }
	to { rotate: var(--l-uitslag); }
}

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

/* De koffies ----------------------------------------------------------------- */

.nrd-leeg__koffies {
	margin-top: 40px;
	margin-top: clamp(36px, 5cqw, 56px);
}

.nrd-leeg .nrd-leeg__subkop {
	margin: 0 0 20px;
	color: var(--l-petrol);
	font-size: clamp(24px, 4vw, 30px);
	font-weight: 400;
	line-height: 1.2;
	text-wrap: balance;
}

.nrd-leeg .nrd-leeg__proef {
	max-width: 62ch;
	margin: 28px 0 0;
	font-size: 17px;
	line-height: 1.6;
	text-wrap: pretty;
}

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

.nrd-leeg .nrd-leeg__proef a {
	color: var(--l-petrol);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--l-salie);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.nrd-leeg .nrd-leeg__proef a:hover {
	color: var(--l-inkt);
	text-decoration-color: currentColor;
}

.nrd-leeg__koffies a:focus-visible {
	outline: 2px solid var(--l-petrol);
	outline-offset: 3px;
	border-radius: 6px;
}

.nrd-leeg__koffies ::selection {
	background: var(--l-lijn);
	color: var(--l-inkt);
}

/* Breed: het toneel naast de kop ---------------------------------------------- */

@container (min-width: 640px) {
	.nrd-leeg__podium {
		--l-b: clamp(280px, 44cqw, 560px);

		display: flex;
		align-items: center;
		min-height: calc(var(--l-b) * 0.93);
	}

	.nrd-leeg__toneel {
		position: absolute;
		top: 0;
		right: calc(var(--l-b) * -0.07);
		margin: 0;
		aspect-ratio: 898 / 935;
	}

	/* Tot aan de mand, niet eroverheen. */
	.nrd-leeg__tekst {
		max-width: calc(100% - var(--l-b) * 1.04);
		margin-top: 0;
		padding: 48px 0 52px clamp(28px, 5.6cqw, 72px);
	}

	.nrd-leeg .nrd-leeg__kop {
		font-size: clamp(36px, 4.7cqw, 64px);
	}

	/* De mand zwaait tot 0.16 keer --l-b naar links uit (12 graden): daar
	   houdt de zin op, anders hangt de mand achter het eind van een regel. */
	.nrd-leeg .nrd-leeg__lead {
		max-width: min(36ch, calc(100% - var(--l-b) * 0.16));
	}

	.nrd-leeg .nrd-leeg__knop {
		margin-top: 28px;
	}

	/* Met ruimte om uit te zwaaien voor hij de luiaard raakt. */
	.nrd-leeg__hang--mand {
		top: 0;
		left: -11%;
	}

	.nrd-leeg .nrd-leeg__zetje {
		top: 76.5%;
		left: 2%;
	}
}

/* Heel smal ------------------------------------------------------------------- */

@container (max-width: 479.98px) {
	.nrd-leeg .nrd-leeg__lead {
		font-size: 16px;
	}

	.nrd-leeg .nrd-leeg__knop {
		display: flex;
	}

	.nrd-leeg .nrd-leeg__zetje {
		font-size: 13px;
	}
}