/*
 * Winkelmand en mini-mandje werken direct bij (winkelmand-direct.php), live
 * sinds 12 oktober 2026. Laadt na winkelmand-vol.css, op elke
 * pagina: het mini-mandje staat overal.
 *
 * Twee dingen: de regel van een weggehaald product (.nrd-weg), en hoe het
 * eruitziet zolang er nog een antwoord van de server komt. Het witte vlak
 * van cart.js over de hele winkelmand is weg; alleen wat nog niet klopt is
 * lichter, met een rondje ernaast.
 */

/* Een weggehaald product ---------------------------------------------------- */

/*
 * Een smalle regel op de plek van het product: mint op het witte vlak van de
 * lijst, wit op de mintgrond van het mini-mandje en de lege winkelmand. Het
 * aantal en de naam in Acme, daarachter gewicht en maling, eronder wat er
 * gebeurd is, met de knop ernaast. Is er ruimte (een brede lijst), dan staat
 * de knop rechts over beide regels; zie "In de lijst van de winkelmand".
 */
.nrd-weg {
	--weg-vlak: var(--theme-palette-color-7, #eef5f2);
	--weg-knop: var(--theme-palette-color-8, #fff);
	--weg-petrol: var(--theme-palette-color-10, #31545b);
	--weg-rustig: #557277;
}

.nrd-weg__vlak {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 4px 12px;
	padding: 10px 10px 10px 14px;
	border-radius: 12px;
	background: var(--weg-vlak);
	color: var(--weg-petrol);
	text-align: left;
}

/* Naam en stand zijn elk een vak van het raster; de knop staat naast de stand. */
.nrd-weg__wat {
	display: contents;
}

.nrd-weg__titel {
	grid-column: 1 / -1;
	line-height: 1.3;
	text-wrap: pretty;
}

.nrd-weg__stand {
	grid-column: 1;
}

.nrd-weg__naam {
	margin-right: 6px;
	font-family: Acme, var(--theme-font-family, sans-serif);
	font-size: 16px;
	font-weight: 400;
}

.nrd-weg__soort,
.nrd-weg__stand {
	color: var(--weg-rustig);
	font-size: 14px;
	line-height: 1.4;
}

.nrd-weg__stand {
	font-size: 13px;
}

.nrd-weg .nrd-weg__terug {
	grid-column: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 14px 0 10px;
	border-radius: 999px;
	background: var(--weg-knop);
	color: var(--weg-petrol);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.nrd-weg .nrd-weg__terug:hover {
	background: var(--weg-petrol);
	color: #fff;
}

.nrd-weg .nrd-weg__terug:focus-visible {
	outline: 2px solid var(--weg-petrol);
	outline-offset: 3px;
}

.nrd-weg__terug .nrd-mand-icoon {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Terugzetten loopt: het rondje in plaats van de pijl, en niet nog eens klikken. */
.nrd-weg.is-bezig .nrd-weg__terug {
	pointer-events: none;
}

.nrd-weg.is-bezig .nrd-weg__terug .nrd-mand-icoon {
	display: none;
}

/* Met een vinger: een raakvlak van 44px hoog, zonder dat de knop groter oogt. */
@media (pointer: coarse) {
	.nrd-weg .nrd-weg__terug {
		position: relative;
	}

	.nrd-weg .nrd-weg__terug::after {
		content: "";
		position: absolute;
		inset: -4px 0;
	}
}

/* In de lijst van de winkelmand -------------------------------------------- */

/*
 * De tabel zet elke tr op display block (winkelmand-vol.css); een regel die
 * verborgen klaarstaat of een product dat net is weggehaald, blijft weg.
 */
.nrd-vol .woocommerce-cart-form__contents tr[hidden] {
	display: none;
}

.nrd-vol .woocommerce-cart-form__contents tr.nrd-weg {
	padding: 10px 0;
	border-bottom: 1px dashed var(--nrd-m-lijn);
}

/* Een brede lijst: de knop rechts, over de naam en de stand. */
@container nrd-lijst (min-width: 520px) {
	.nrd-weg__vlak {
		gap: 2px 16px;
		padding-left: 16px;
	}

	.nrd-weg__naam {
		font-size: 18px;
	}

	.nrd-weg__titel {
		grid-column: 1;
	}

	.nrd-weg .nrd-weg__terug {
		grid-row: 1 / span 2;
		min-height: 40px;
		padding: 0 16px 0 12px;
	}
}

/* Op de lege winkelmand, boven het podium ---------------------------------- */

.nrd-leeg .nrd-weg-lijst {
	display: grid;
	gap: 8px;
	margin: 0 0 16px;
}

.nrd-leeg .nrd-weg {
	--weg-vlak: var(--theme-palette-color-8, #fff);
	--weg-knop: var(--theme-palette-color-7, #eef5f2);
}

.nrd-leeg .nrd-weg__vlak {
	border-radius: 14px;
}

/* De lege mand meet zichzelf (container op .nrd-leeg). */
@container (min-width: 560px) {
	.nrd-leeg .nrd-weg__vlak {
		gap: 2px 16px;
		padding: 12px 12px 12px 20px;
	}

	.nrd-leeg .nrd-weg__naam {
		font-size: 18px;
	}

	.nrd-leeg .nrd-weg__titel {
		grid-column: 1;
	}

	.nrd-leeg .nrd-weg .nrd-weg__terug {
		grid-row: 1 / span 2;
		min-height: 40px;
		padding: 0 16px 0 12px;
	}
}

/* In het mini-mandje --------------------------------------------------------- */

/*
 * Met hetzelfde voorvoegsel als winkelmand.css van het child-thema: de opmaak
 * van Blocksy voor het paneel laadt later. Een leeg paneel verbergt Blocksy;
 * met een regel om terug te zetten erin blijft het staan.
 */
[data-header*="type-1"] [data-id="cart"] .ct-cart-content:has(.nrd-weg:not([hidden])) {
	display: flex;
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .nrd-weg {
	--weg-vlak: var(--theme-palette-color-8, #fff);
	--weg-knop: var(--theme-palette-color-7, #eef5f2);
	display: block;
	grid-template-columns: none;
	margin: 0 0 var(--mini-cart-items-spacing);
	padding: 0 0 var(--mini-cart-items-spacing);
	border-bottom: 1px dashed var(--mini-cart-divider-color);
	list-style: none;
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .nrd-weg[hidden] {
	display: none;
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .nrd-weg-lijst {
	margin: 0;
	padding: 0;
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .nrd-weg__soort {
	font-size: 13px;
}

[data-header*="type-1"] [data-id="cart"] .ct-cart-content .nrd-weg__terug {
	font-size: 13px;
}

/* Zolang het antwoord nog komt ----------------------------------------------- */

/* Het witte vlak van cart.js (jQuery blockUI) over formulier en overzicht. */
.nrd-vol.is-direct .blockUI {
	visibility: hidden;
}

/* Het rondje: naast een bedrag, in een knop, op de plek van een icoon. */
.nrd-vol .shop_table tr.is-bezig > .product-subtotal::before,
.nrd-vol.is-direct .cart_totals:is(.is-bezig, .processing) .order-total th::after,
.nrd-voordeel.is-bezig .nrd-voordeel__vak::before,
.nrd-weg.is-bezig .nrd-weg__terug::before,
.nrd-vol .checkout-button.is-wacht::after,
.nrd-plak .nrd-plak__knop.is-wacht::after {
	content: "";
	flex: none;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(49, 84, 91, 0.26);
	border: 2px solid color-mix(in srgb, currentColor 26%, transparent);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: nrd-direct-draai 0.7s linear infinite;
}

@keyframes nrd-direct-draai {
	to { rotate: 1turn; }
}

/* Het overzicht: de bedragen lichter, het rondje achter "Totaal". */
.nrd-vol.is-direct .cart_totals .amount,
.nrd-vol.is-direct .cart_totals #shipping_method label,
.nrd-vol.is-direct .shop_table .product-subtotal .amount,
.nrd-plak .amount {
	transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.nrd-vol.is-direct .cart_totals:is(.is-bezig, .processing) .amount,
.nrd-vol.is-direct .cart_totals:is(.is-bezig, .processing) #shipping_method label,
.nrd-vol .shop_table tr.is-bezig > .product-subtotal .amount,
.nrd-plak.is-bezig .amount {
	opacity: 0.4;
}

.nrd-vol.is-direct .cart_totals:is(.is-bezig, .processing) .order-total th::after {
	display: inline-block;
	margin-left: 10px;
	vertical-align: -1px;
	color: var(--nrd-m-petrol);
}

/*
 * De strook met verzending en staffelkorting: de zin en de meter lichter, het
 * rondje op de plek van het icoon. Komt het antwoord, dan lopen de meters
 * naar hun nieuwe stand (het script laat de elementen staan en zet er alleen
 * de nieuwe waarden op).
 */
.nrd-voordeel__inhoud,
.nrd-voordeel__vak > .nrd-mand-icoon {
	transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.nrd-voordeel.is-bezig .nrd-voordeel__inhoud {
	opacity: 0.5;
}

.nrd-voordeel.is-bezig .nrd-voordeel__vak > .nrd-mand-icoon {
	opacity: 0;
}

.nrd-voordeel.is-bezig .nrd-voordeel__vak {
	position: relative;
}

.nrd-voordeel.is-bezig .nrd-voordeel__vak::before {
	position: absolute;
	top: 19px;
	left: 3px;
	width: 18px;
	height: 18px;
	color: var(--nrd-m-petrol);
}

.nrd-vol.is-direct .nrd-meter__vul {
	transition: clip-path 0.7s var(--v-uit);
}

.nrd-vol.is-direct .nrd-meter__stip {
	transition: background-color 0.3s var(--v-uit) 0.2s, border-color 0.3s var(--v-uit) 0.2s, box-shadow 0.3s var(--v-uit) 0.2s;
}

/* Een regel waarvan het bedrag niet vooruit te rekenen viel: het rondje links ervan. */
.nrd-vol .shop_table tr.is-bezig > .product-subtotal::before {
	position: absolute;
	top: calc(50% - 8px);
	right: calc(100% + 6px);
	color: var(--nrd-m-petrol);
}

@media (min-width: 1000px) {
	.nrd-vol .shop_table tr.is-bezig > .product-subtotal {
		position: relative;
	}
}

/* Afrekenen terwijl er nog iets onderweg is: het rondje op de plek van de pijl. */
.nrd-vol .checkout-button.is-wacht,
.nrd-plak .nrd-plak__knop.is-wacht {
	pointer-events: none;
}

.nrd-vol .checkout-button.is-wacht::after,
.nrd-plak .nrd-plak__knop.is-wacht::after {
	width: 18px;
	height: 18px;
	background: none;
	-webkit-mask: none;
	mask: none;
	translate: none;
}

/* Een andere link aangeklikt terwijl er nog iets onderweg is: de pagina gaat zo door. */
.nrd-mand-wacht,
.nrd-mand-wacht a {
	cursor: progress;
}

/* De kortingscode loopt nog via cart.js: de knop wacht mee. */
.nrd-vol.is-direct .woocommerce-cart-form.processing .coupon .button {
	opacity: 0.6;
	cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
	.nrd-voordeel__inhoud,
	.nrd-voordeel__vak > .nrd-mand-icoon,
	.nrd-vol.is-direct .nrd-meter__vul,
	.nrd-vol.is-direct .nrd-meter__stip,
	.nrd-weg .nrd-weg__terug,
	.nrd-vol.is-direct .cart_totals .amount,
	.nrd-vol.is-direct .cart_totals #shipping_method label,
	.nrd-vol.is-direct .shop_table .product-subtotal .amount,
	.nrd-plak .amount {
		transition: none;
	}

	.nrd-vol .shop_table tr.is-bezig > .product-subtotal::before,
	.nrd-vol.is-direct .cart_totals:is(.is-bezig, .processing) .order-total th::after,
	.nrd-voordeel.is-bezig .nrd-voordeel__vak::before,
	.nrd-weg.is-bezig .nrd-weg__terug::before,
	.nrd-vol .checkout-button.is-wacht::after,
	.nrd-plak .nrd-plak__knop.is-wacht::after {
		animation: none;
	}
}