@charset "UTF-8";
/* WC Plus core — cart/checkout. Lean, tokens-gedreven, Bootstrap-vrij. */

/* ─────────────────────────────────────────────────────────────
   Winkelmand-pagina (cart.php): kaart-stijl rijen + totalenkolom
   (demo-pariteit met woocommerce-plus.nl — was nog de kale WC-tabel,
   de checkout-review-tabel had deze behandeling al, de cart-pagina zelf niet).
   ───────────────────────────────────────────────────────────── */

/* Winkelwagen/afrekenen: compacte paginakop (Starter-markup .hero--page) — de pagina is een werkscherm,
   de inhoud hoort direct onder de titel te beginnen (was 3rem + 1rem titelmarge). Starter-afstanden
   met terugval; een thema kan dit gewoon overschrijven. */
body.woocommerce-cart .hero--page,
body.woocommerce-checkout .hero--page { padding-block: var(--space-7, 3rem) var(--space-4, 1.5rem); }
body.woocommerce-cart .hero--page .hero__title,
body.woocommerce-checkout .hero--page .hero__title { margin-bottom: 0; }

/* Twee kolommen: winkelwagen-tabel + totalenkolom (zelfde grid-patroon als checkout). */
body.woocommerce-cart .woocommerce:not(.wcp-offcanvas) {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: start;
}
body.woocommerce-cart .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}
/* Leeg nam hij toch een gridrij + 2rem gap in: onnodige witruimte tussen titel en winkelwagen. */
body.woocommerce-cart .woocommerce-notices-wrapper:empty { display: none; }

/* Meldingen op de winkelwagenpagina (en kortingscode-meldingen op de afrekenpagina, .wcp-toast-stack) als toast onderin beeld (wcp-cart-toast.js: sluitknop, vanzelf
   weg, en geen scroll naar de melding). Zwevend, dus de winkelwagen verspringt niet meer als er
   een melding bij komt of verdwijnt ("… verwijderd. Ongedaan maken?", couponfouten). */
:is(body.woocommerce-cart .woocommerce-notices-wrapper, .wcp-toast-stack) {
	position: fixed;
	z-index: 1040; /* boven de zwevende totaalbalk (1030) */
	left: 50%;
	bottom: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: min(30rem, calc(100% - 2rem));
	transform: translateX(-50%);
	pointer-events: none;
}
:is(body.woocommerce-cart .woocommerce-notices-wrapper, .wcp-toast-stack) > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0.8rem 0.6rem 0.8rem 1rem;
	border: 0;
	border-radius: calc(var(--wcp-radius) * 2);
	background: var(--wcp-color-dark);
	color: var(--wcp-color-surface);
	box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.18), 0 0.15rem 0.4rem rgb(0 0 0 / 0.1);
	font-size: var(--wcp-font-size-sm);
	line-height: 1.4;
	list-style: none;
	animation: wcp-toast-in 0.25s ease-out;
}
:is(body.woocommerce-cart .woocommerce-notices-wrapper, .wcp-toast-stack) > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
	position: static;
	flex: none;
	margin: 0;
	color: var(--wcp-color-success);
}
:is(body.woocommerce-cart .woocommerce-notices-wrapper, .wcp-toast-stack) > .woocommerce-info::before { color: var(--wcp-color-surface); }
:is(body.woocommerce-cart .woocommerce-notices-wrapper, .wcp-toast-stack) > .woocommerce-error::before { color: var(--wcp-color-danger); }
:is(body.woocommerce-cart .woocommerce-notices-wrapper, .wcp-toast-stack) > .woocommerce-error li { margin: 0; padding: 0; }
:is(body.woocommerce-cart .woocommerce-notices-wrapper, .wcp-toast-stack) .wcp-toast__text { flex: 1; min-width: 0; }
/* "Ongedaan maken?" en andere links/knoppen in de melding: vet en onderstreept, als knop-achtige actie. */
:is(body.woocommerce-cart .woocommerce-notices-wrapper, .wcp-toast-stack) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a {
	float: none;
	margin: 0 0 0 0.35rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wcp-color-surface);
	font-weight: var(--wcp-font-weight-bold);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}
:is(body.woocommerce-cart .woocommerce-notices-wrapper, .wcp-toast-stack) :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:hover { opacity: 0.8; }
:is(body.woocommerce-cart .woocommerce-notices-wrapper, .wcp-toast-stack) .wcp-toast__close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 1.25rem;
	line-height: 1;
	opacity: 0.7;
	cursor: pointer;
}
:is(body.woocommerce-cart .woocommerce-notices-wrapper, .wcp-toast-stack) .wcp-toast__close:hover { opacity: 1; background: color-mix(in srgb, var(--wcp-color-surface) 12%, transparent); }
:is(body.woocommerce-cart .woocommerce-notices-wrapper, .wcp-toast-stack) > .is-leaving { animation: wcp-toast-out 0.2s ease-in forwards; }
@keyframes wcp-toast-in { from { opacity: 0; transform: translateY(0.75rem); } }
@keyframes wcp-toast-out { to { opacity: 0; transform: translateY(0.75rem); } }
@media ( prefers-reduced-motion: reduce ) {
	:is(body.woocommerce-cart .woocommerce-notices-wrapper, .wcp-toast-stack) > * { animation: none !important; }
}
@media ( min-width: 62rem ) {
	body.woocommerce-cart .woocommerce:not(.wcp-offcanvas) {
		/* Ruimer dan checkout se 1.4fr/1fr: de winkelmand-rij heeft 6 kolommen (thumb t/m
		   subtotaal) op één regel nodig, de totalenkaart hoeft niet zo breed als de checkout-
		   review-kolom. */
		grid-template-columns: 2fr 1fr;
		/* Is het totaalblok (over beide rijen) hoger dan lijst + cross-sells, dan gaat de extra hoogte naar
		   de tweede rij — anders werd ook de eerste rij hoger en stond er een gat onder de productlijst. */
		grid-template-rows: auto 1fr;
	}
	/* Cross-sells direct onder de productlijst (linkerkolom), het totaalblok loopt rechts over beide
	   rijen door — anders begonnen ze pas onder het (hoge) totaalblok, met een groot gat. */
	body.woocommerce-cart .woocommerce:not(.wcp-offcanvas) > .woocommerce-cart-form { grid-column: 1; grid-row: 1; }
	body.woocommerce-cart .woocommerce:not(.wcp-offcanvas) > .cart-collaterals { grid-column: 2; grid-row: 1 / span 2; }
	body.woocommerce-cart .woocommerce:not(.wcp-offcanvas) > .wcp-cart-cross-sells { grid-column: 1; grid-row: 2; margin-top: 0; }
	/* Lange winkelwagen (lijst hoger dan het totaalblok, wcp-coupon.js): cross-sells over de volle breedte. */
	body.woocommerce-cart .woocommerce.wcp-cart--long > .cart-collaterals { grid-row: 1; }
	body.woocommerce-cart .woocommerce.wcp-cart--long > .wcp-cart-cross-sells { grid-column: 1 / -1; }
	/* Korte winkelwagen: cross-sells als compacte loopitems, twee naast elkaar (wcp-coupon.js wisselt de
	   loopvariant op de lijst mee met de indeling). */
	body.woocommerce-cart .wcp-cart-cross-sells ul.products.wcp-loop--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Lijst-stijl (referentie: AH-winkelmandje): één kaart met rijen en een dunne scheidingslijn.
   Per rij: foto als losse tegel, naam met daaronder vet het regeltotaal (+ gedempt de stukprijs bij meer dan 1), en rechts de
   bediening: aantal-stepper (zoals op de productpagina) en een prullenbak. Rij-klassen
   is-single/is-fixed: wcp-coupon.js. */
body.woocommerce-cart .shop_table.cart thead { display: none; }
body.woocommerce-cart .shop_table.cart,
body.woocommerce-cart .shop_table.cart tbody,
body.woocommerce-cart .shop_table.cart tr,
body.woocommerce-cart .shop_table.cart td {
	display: block;
	width: auto;
	border: 0;
	background: transparent;
	padding: 0;
}
/* WooCommerce' zebra op mobiel (table.shop_table_responsive tr:nth-child(2n) td) — hogere
   specificiteit dan de regel hierboven; de fotocel houdt haar tint via de specifiekere regel verderop. */
body.woocommerce-cart .shop_table.cart tbody tr td { background-color: transparent; }
body.woocommerce-cart .shop_table.cart {
	margin-bottom: 0; /* WooCommerce zet 24px onder de tabel: de kaart eindigde dan hoger dan het (sticky) totaalblok ernaast */
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface);
	overflow: hidden;
}
body.woocommerce-cart .shop_table.cart tr.cart_item {
	display: grid;
	grid-template-columns: 4.9rem auto minmax(0, 1fr) auto auto;
	grid-template-areas:
		"thumb name     name  qty remove"
		"thumb subtotal price qty remove";
	align-items: center;
	column-gap: 0.6rem;
	row-gap: 0.1rem;
	padding: 0 1rem;
	border-bottom: 1px solid var(--wcp-color-border);
}
/* Laatste productregel zonder onderrand (de tabel heeft al een rand). Niet :last-of-type: daarna volgen nog
   rijen zonder hoogte (wcp-cart-meta, acties), dus die gold nooit en stond er een dubbele lijn (#182). */
body.woocommerce-cart .shop_table.cart tbody tr.cart_item:not(:has(~ tr.cart_item)) { border-bottom: 0; }

/* Foto als losse afgeronde tegel (dunne rand, eigen kleur van de foto) met lucht rondom, niet
   uitgevuld. Was een doorlopende getinte kolom over de hele rijhoogte: een zware balk langs de lijst. */
body.woocommerce-cart .shop_table.cart td.product-thumbnail {
	--wcp-cart-thumb: 4.5;
	grid-area: thumb;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 0.4rem 0.75rem 0;
}
/* --wcp-cart-thumb = tegelgrootte in rem (unitless): de afronding schaalt mee, in dezelfde verhouding
   als de 2,75rem-foto in de mini-cart (border-radius var(--wcp-radius)). De tegel is de link, of de
   foto zelf als WooCommerce geen link toont (product niet zichtbaar in de catalogus). */
body.woocommerce-cart .shop_table.cart td.product-thumbnail a,
body.woocommerce-cart .shop_table.cart td.product-thumbnail > img {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: calc(var(--wcp-cart-thumb) * 1rem);
	height: calc(var(--wcp-cart-thumb) * 1rem);
	padding: calc(var(--wcp-cart-thumb) * 0.14rem);
	border: 1px solid var(--wcp-color-border);
	border-radius: calc(var(--wcp-radius) * var(--wcp-cart-thumb) / 2.75);
	background: var(--wcp-color-surface);
}
body.woocommerce-cart .shop_table.cart td.product-thumbnail a img {
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: contain;
	border: 0;
	border-radius: 0;
}
body.woocommerce-cart .shop_table.cart td.product-thumbnail > img { max-width: none; object-fit: contain; }
body.woocommerce-cart .shop_table.cart td.product-name {
	grid-area: name;
	align-self: end;
	min-width: 0;
	padding-top: 0.85rem;
	font-weight: var(--wcp-font-weight-normal, 400);
	font-size: 0.95rem;
	line-height: 1.35;
}
body.woocommerce-cart .shop_table.cart td.product-name a { color: var(--wcp-color-dark); text-decoration: none; }
body.woocommerce-cart .shop_table.cart td.product-name a:hover { color: var(--wcp-color-primary); }
body.woocommerce-cart .shop_table.cart td.product-name dl.variation {
	margin: 0.1rem 0 0;
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm);
}
body.woocommerce-cart .shop_table.cart td.product-name dl.variation dt,
body.woocommerce-cart .shop_table.cart td.product-name dl.variation dd,
body.woocommerce-cart .shop_table.cart td.product-name dl.variation dd p { display: inline; float: none; margin: 0; padding: 0; font-weight: 400; } /* WC float op dt/dd slikte de spatie */
body.woocommerce-cart .shop_table.cart td.product-name dl.variation dt::after { content: ' '; } /* dubbele punt zit al in de dt-tekst */
/* Eigenschappen op één (doorlopende) regel met een punt ertussen i.p.v. elk op een eigen regel:
   label gedempt, waarde in de tekstkleur. Zie ook de staffel-/verpakkingsregels van add-ons. */
body.woocommerce-cart .shop_table.cart td.product-name dl.variation dd { color: var(--wcp-color-text); }
body.woocommerce-cart .shop_table.cart td.product-name dl.variation dd:not(:last-of-type)::after {
	content: '·';
	margin: 0 0.45rem;
	color: var(--wcp-color-muted);
}

/* "Beschikbaar via nabestelling" (WooCommerce) en "Nog 2 op voorraad" (cart.php) als waarschuwingsbadge
   onder de naam. Lage voorraad met een ander icoon (doosje) dan nabestelling (klokje). */
body.woocommerce-cart .shop_table.cart td.product-name .wcp-stock-note,
body.woocommerce-cart .shop_table.cart td.product-name .backorder_notification,
.wcp-checkout__totals .shop_table .wcp-review-meta .backorder_notification {
	display: flex; /* eigen regel onder de naam (inline-flex kwam op brede schermen naast de naam) */
	width: fit-content;
	align-items: center;
	gap: 0.3rem;
	margin: 0.25rem 0 0.1rem;
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wcp-color-warning) 12%, transparent);
	color: var(--wcp-color-warning);
	font-size: 0.6875rem;
	font-weight: var(--wcp-font-weight-semibold, 600);
	line-height: 1.5;
}
body.woocommerce-cart .shop_table.cart td.product-name .wcp-stock-note::before,
body.woocommerce-cart .shop_table.cart td.product-name .backorder_notification::before,
.wcp-checkout__totals .shop_table .wcp-review-meta .backorder_notification::before {
	content: '';
	width: 0.7rem;
	height: 0.7rem;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.woocommerce-cart .shop_table.cart td.product-name .wcp-stock-note::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E");
}

/* Regeltotaal vet onder de naam; de stukprijs gedempt ernaast, alleen bij meer dan 1 stuk. */
body.woocommerce-cart .shop_table.cart td.product-subtotal {
	grid-area: subtotal;
	align-self: start;
	padding-bottom: 0.85rem;
	font-weight: var(--wcp-font-weight-bold);
	font-size: 0.95rem;
	text-align: left;
}
body.woocommerce-cart .shop_table.cart td.product-subtotal .tax_label { display: none; }
body.woocommerce-cart .shop_table.cart td.product-price {
	grid-area: price;
	align-self: start;
	padding-bottom: 0.85rem;
	/* Flex: labels van add-ons (bv. het combideal-chipje achter de .price-div) op dezelfde regel. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.4rem;
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm);
	line-height: 1.6;
}
/* Stukprijs zonder actieprijs (doorgestreepte oude prijs): die staat al bij het regeltotaal. */
body.woocommerce-cart .shop_table.cart td.product-price del { display: none; }
body.woocommerce-cart .shop_table.cart td.product-price ins { text-decoration: none; background: none; }
body.woocommerce-cart .shop_table.cart tr.cart_item.is-single td.product-price .price { display: none; }

/* Directe feedback (wcp-coupon.js): de gewijzigde rij pulseert tot de update binnen is, een verwijderde
   rij vervaagt meteen, en de totalen dimmen. WooCommerce' witte waas (blockUI) over het hele formulier
   en het totaalblok wordt onzichtbaar — klikken blijft tijdens de update wel geblokkeerd. */
body.woocommerce-cart .woocommerce-cart-form .blockUI.blockOverlay,
body.woocommerce-cart .cart_totals .blockUI.blockOverlay {
	background: transparent !important; /* blockUI zet de witte achtergrond inline */
	cursor: progress !important;
}
body.woocommerce-cart .woocommerce-cart-form .blockUI.blockOverlay::before,
body.woocommerce-cart .cart_totals .blockUI.blockOverlay::before { display: none; } /* WC-spinner midden in de lijst */
body.woocommerce-cart .shop_table.cart tr.cart_item.is-pending :is(td.product-subtotal, td.product-price) { animation: wcp-cart-pending 1s ease-in-out infinite; }
body.woocommerce-cart .shop_table.cart tr.cart_item.is-removing { opacity: 0.35; transition: opacity 0.2s ease; pointer-events: none; }
body.woocommerce-cart.wcp-cart-updating .cart_totals :is(.cart-subtotal td, .order-total td, tr.shipping td .amount),
body.woocommerce-cart.wcp-cart-updating .wcp-cart-sticky__amount { opacity: 0.4; transition: opacity 0.15s ease; }
@keyframes wcp-cart-pending { 50% { opacity: 0.35; } }
@media ( prefers-reduced-motion: reduce ) {
	body.woocommerce-cart .shop_table.cart tr.cart_item.is-pending :is(td.product-subtotal, td.product-price) { animation: none; opacity: 0.45; }
}

/* Bediening rechts: dezelfde aantal-stepper als op de productpagina (basisstijl .quantity in
   wcp-components.css, hier bewust niet overschreven) en daarnaast een rustige prullenbak, altijd
   zichtbaar — de − stopt bij 1, dus de hele regel weghalen moet los kunnen. */
body.woocommerce-cart .shop_table.cart td.product-quantity { grid-area: qty; justify-self: end; }
body.woocommerce-cart .shop_table.cart td.product-remove { grid-area: remove; justify-self: end; }
/* Vast aantal (geen invoerveld): de combideal levert een vergrendelde stepper, Product Bundles een
   kaal getal (gedempt). */
/* Vast aantal zonder invoerveld (bv. gebundeld/samengesteld product): als vergrendelde stepper
   met slotje, net als het vaste aantal in een combideal (die levert haar eigen .wcp-combi-qty). */
body.woocommerce-cart .shop_table.cart tr.cart_item.is-fixed td.product-quantity {
	display: flex;
	align-items: center;
	justify-content: center;
}
body.woocommerce-cart .shop_table.cart tr.cart_item.is-fixed td.product-quantity:not(:has(.wcp-combi-qty)) {
	gap: 0.3rem;
	width: 8.6rem;
	height: 2.625rem;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface);
	color: var(--wcp-color-muted);
}
body.woocommerce-cart .shop_table.cart tr.cart_item.is-fixed td.product-quantity:not(:has(.wcp-combi-qty))::after {
	content: '';
	width: 0.7rem;
	height: 0.7rem;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Rijen zonder verwijderlink (gebundelde producten) houden de kolombreedte: alles lijnt uit. */
body.woocommerce-cart .shop_table.cart td.product-remove { min-width: 2.5rem; }
body.woocommerce-cart .shop_table.cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: var(--wcp-radius);
	color: var(--wcp-color-muted) !important;
	background: transparent !important;
	font-size: 0;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
body.woocommerce-cart .shop_table.cart td.product-remove a.remove::before {
	content: '';
	width: 1.1rem;
	height: 1.1rem;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.woocommerce-cart .shop_table.cart td.product-remove a.remove:hover,
body.woocommerce-cart .shop_table.cart td.product-remove a.remove:focus-visible {
	background: var(--wcp-color-light) !important;
	color: var(--wcp-color-danger) !important;
}
@media ( max-width: 47.99rem ) {
	/* WooCommerce valt onder 768px terug op een gestapelde tabel met labels uit td::before; hier
	   dezelfde rij, alleen smaller: foto links, naam + prijs, bediening rechtsonder.
	   Het !important is onvermijdelijk: WooCommerce zet text-align zelf met !important. */
	body.woocommerce-cart .shop_table.cart tbody td { text-align: left !important; }
	body.woocommerce-cart .shop_table.cart tbody td::before { content: none; }
	body.woocommerce-cart .shop_table.cart tr.cart_item {
		grid-template-columns: 4rem auto minmax(0, 1fr);
		grid-template-areas:
			"thumb name     name"
			"thumb subtotal price"
			"thumb qty      qty";
		row-gap: 0.25rem;
		padding: 0 0.85rem;
	}
	/* Regel met een chip (korting, Bundel/Samengesteld + "3 producten ⌄"): stukprijs + chip op een eigen regel
	   onder het bedrag. Naast het bedrag paste het niet en brak het af binnen de smalle prijskolom (leek
	   ingesprongen, of de chip over twee regels). Ook voor onderdelen in de boom (combideal-accessoires). */
	body.woocommerce-cart .shop_table.cart tr.cart_item:not(.wcp-cart-group-child):has(td.product-price .wcp-cart-chip) {
		grid-template-areas:
			"thumb name     name"
			"thumb subtotal subtotal"
			"thumb price    price"
			"thumb qty      qty";
	}
	/* Onderdeel in de boom (vast aantal heeft al een eigen indeling, hieronder). */
	body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child:not(.is-fixed):has(td.product-price .wcp-cart-chip) {
		grid-template-areas:
			"thumb name     name"
			"thumb subtotal subtotal"
			"thumb price    price"
			".     qty      qty";
	}
	body.woocommerce-cart .shop_table.cart td.product-name { padding-top: 0.7rem; }
	body.woocommerce-cart .shop_table.cart td.product-subtotal,
	body.woocommerce-cart .shop_table.cart td.product-price { padding-bottom: 0; }
	body.woocommerce-cart .shop_table.cart td.product-quantity,
	body.woocommerce-cart .shop_table.cart td.product-remove { padding-bottom: 0.7rem; }
	/* Compactere stepper en prullenbak (strakker, minder hoge rijen). */
	body.woocommerce-cart .shop_table.cart td.product-quantity .quantity button.minus,
	body.woocommerce-cart .shop_table.cart td.product-quantity .quantity button.plus { width: 2.1rem; }
	body.woocommerce-cart .shop_table.cart td.product-quantity .quantity .qty { width: 2.6rem; height: 2.25rem; padding-block: 0; }
	body.woocommerce-cart .shop_table.cart td.product-remove a.remove { width: 2.25rem; height: 2.25rem; }
	body.woocommerce-cart .shop_table.cart tr.cart_item.is-fixed td.product-quantity:not(:has(.wcp-combi-qty)),
	body.woocommerce-cart .shop_table.cart tr.cart_item.is-fixed .wcp-combi-qty { height: 2.25rem; }
	/* Vergrendeld vast aantal: ruimte onder het vak als marge, niet als padding (die drukte de inhoud omhoog). */
	body.woocommerce-cart .shop_table.cart tr.cart_item.is-fixed td.product-quantity:not(:has(.wcp-combi-qty)) { padding-bottom: 0; margin-bottom: 0.85rem; }
	/* Stepper links onder de prijs, prullenbak in dezelfde cel helemaal rechts. */
	body.woocommerce-cart .shop_table.cart td.product-quantity { justify-self: start; }
	body.woocommerce-cart .shop_table.cart td.product-remove { grid-area: qty; }
	body.woocommerce-cart .shop_table.cart td.product-thumbnail { align-self: start; padding-top: 0.7rem; }
	body.woocommerce-cart .shop_table.cart td.product-thumbnail { --wcp-cart-thumb: 3.6; }
	/* Zelfde verhaal in de totalen: WC verbergt daar de th en zet het label in td::before,
	   rechts uitgelijnd. De opmaak van dit blok rekent juist op th links en td rechts, dus
	   de th komt terug en het pseudo-label gaat eruit. */
	body.woocommerce-cart .cart_totals .shop_table tbody th { display: block; }
	body.woocommerce-cart .cart_totals .shop_table tbody td::before { content: none; }
	body.woocommerce-cart .cart_totals .shop_table tbody td { text-align: right !important; }
	body.woocommerce-cart .cart_totals .shop_table tr.shipping td { text-align: left !important; } /* ook de rij met alleen "Bereken verzendkosten" (nog geen adres) */
}

/* Productgroepen als boompje (klassen wcp-cart-group-parent/-child: cart.php voor Product Bundles,
   add-ons zoals de combideal voor hun eigen groep): geen scheidingslijn binnen de groep, onderdelen
   ingesprongen tot onder de naam van het hoofdproduct met een kleinere fototegel, en een dunne lijn
   in de randkleur vanuit de foto van het hoofdproduct naar elk onderdeel (└). Neutraal, op tokens.
   --grp-x  = midden van de fotokolom (rij-padding + halve tegel) → x van de verticale lijn
   --grp-in = inspringing onderdeel = begin van de naamkolom van het hoofdproduct
   --grp-y  = hoogte van het aftakpunt in de onderdeelrij (midden van de tegel) */
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-parent,
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child {
	--grp-x: 3.25rem;
	--grp-in: 6.5rem;
	--grp-y: 50%;
	--grp-x2: calc(var(--grp-in) + 1.625rem);  /* midden van de onderdeeltegel (3,25rem) */
	--grp-in2: calc(var(--grp-in) + 2.75rem);  /* inspringing tweede niveau (minimaal, kleinere tegel) */
	--grp-tick: calc(var(--grp-in) - var(--grp-x) - 0.4rem) 1px;
	--grp-tick2: calc(var(--grp-in2) - var(--grp-x2) - 0.4rem) 1px;
	--grp-down2: calc(50% - 1.625rem);         /* lijn vanaf de onderkant van de onderdeeltegel */
	--grp-line: linear-gradient(var(--wcp-color-border), var(--wcp-color-border));
	background-repeat: no-repeat;
}
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-parent,
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child:has(+ .wcp-cart-group-child) {
	border-bottom-color: transparent;
}
/* Hoofdproduct: lijn vanaf de onderkant van de foto (tegel 4,5rem, verticaal gecentreerd) omlaag. */
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-parent {
	background-image: var(--grp-line);
	background-position: var(--grp-x) 100%;
	background-size: 1px calc(50% - 2.25rem);
}
/* Onderdeel: doorlopende lijn + aftakking naar de foto; de laatste stopt bij de aftakking. */
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child {
	grid-template-columns: 3.65rem auto minmax(0, 1fr) auto auto;
	padding-left: var(--grp-in);
	background-image: var(--grp-line), var(--grp-line);
	background-position: var(--grp-x) 0, var(--grp-x) var(--grp-y);
	background-size: 1px 100%, var(--grp-tick);
}
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child:not(:has(+ .wcp-cart-group-child)) {
	background-size: 1px var(--grp-y), var(--grp-tick);
}
/* Laatste onderdeel volgens de server (composite.php) — ook als er nog onderdelen van een geneste
   bundel onder hangen; is hij ingeklapt, dan sluit de groep hier af met een scheidingslijn. */
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.wcp-cart-group-last { background-size: 1px var(--grp-y), var(--grp-tick); }
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.wcp-cart-group-last.is-collapsed { border-bottom-color: var(--wcp-color-border); }
/* Bundel ín een samengesteld product (onderdeel én container), opengeklapt: daarbij een lijn omlaag
   vanaf de eigen tegel naar de onderdelen van de bundel. */
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.wcp-cart-group-parent:not(.is-collapsed) {
	background-image: var(--grp-line), var(--grp-line), var(--grp-line);
	background-position: var(--grp-x) 0, var(--grp-x) var(--grp-y), var(--grp-x2) 100%;
	background-size: 1px 100%, var(--grp-tick), 1px var(--grp-down2);
}
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.wcp-cart-group-parent.wcp-cart-group-last:not(.is-collapsed) {
	background-size: 1px var(--grp-y), var(--grp-tick), 1px var(--grp-down2);
}
/* Tweede niveau: onderdelen van die bundel, nog een stap ingesprongen; de lijn van het samengestelde
   product loopt door (outer-line) als daar na de bundel nog onderdelen komen. */
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.wcp-cart-group-depth-2 {
	padding-left: var(--grp-in2);
	background-image: var(--grp-line), var(--grp-line);
	background-position: var(--grp-x2) 0, var(--grp-x2) var(--grp-y);
	background-size: 1px 100%, var(--grp-tick2);
}
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.wcp-cart-group-depth-2.wcp-cart-group-last { background-size: 1px var(--grp-y), var(--grp-tick2); }
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.wcp-cart-group-depth-2 { grid-template-columns: 3.15rem auto minmax(0, 1fr) auto auto; }
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.wcp-cart-group-depth-2 td.product-thumbnail { --wcp-cart-thumb: 2.75; }
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.wcp-cart-group-depth-2.wcp-cart-group-outer-line {
	background-image: var(--grp-line), var(--grp-line), var(--grp-line);
	background-position: var(--grp-x2) 0, var(--grp-x2) var(--grp-y), var(--grp-x) 0;
	background-size: 1px 100%, var(--grp-tick2), 1px 100%;
}
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.wcp-cart-group-depth-2.wcp-cart-group-outer-line.wcp-cart-group-last {
	background-size: 1px var(--grp-y), var(--grp-tick2), 1px 100%;
}
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child td.product-thumbnail { padding-top: 0.5rem; padding-bottom: 0.5rem; }
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child td.product-thumbnail { --wcp-cart-thumb: 3.25; }
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child td.product-name { font-size: 0.9rem; }

@media ( max-width: 47.99rem ) {
	/* Mobiel: rij-padding 0,85rem, tegel 4rem bovenaan de rij (padding-top 0,85rem). Onderdelen minder
	   ver ingesprongen (kleinere tegel) en hun bediening over de volle rijbreedte, anders paste de
	   stepper + prullenbak er niet naast. */
	body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-parent,
	body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child {
		--grp-x: 2.65rem; /* 0,85rem rij-padding + halve tegel van 3,6rem */
		--grp-in: 4.35rem;
		--grp-y: 1.875rem; /* 0,5rem padding + halve tegel van 2,75rem */
		--grp-x2: calc(var(--grp-in) + 1.375rem);
		--grp-in2: calc(var(--grp-in) + 2.25rem);
		--grp-down2: calc(100% - 3.25rem); /* tegel bovenaan: 0,5rem + 2,75rem */
	}
	body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-parent:not(.wcp-cart-group-child) {
		background-size: 1px calc(100% - 4.3rem); /* tegel 0,7rem + 3,6rem vanaf boven */
	}
	body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child {
		grid-template-columns: 3.15rem auto minmax(0, 1fr);
		grid-template-areas:
			"thumb name     name"
			"thumb subtotal price"
			".     qty      qty";
	}
	/* Vergrendeld vast aantal compact (getal + slotje) i.p.v. even breed als de stepper. */
	body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.is-fixed td.product-quantity:not(:has(.wcp-combi-qty)),
	body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.is-fixed .wcp-combi-qty {
		width: auto;
		min-width: 0;
		padding: 0 0.85rem;
	}
	body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child td.product-thumbnail { padding-top: 0.5rem; }
	body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child td.product-thumbnail { --wcp-cart-thumb: 2.75; }
	body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.wcp-cart-group-depth-2 { grid-template-columns: 2.9rem auto minmax(0, 1fr); }
	/* Onderdeel met vast aantal (slotje): het aantal naast de prijs i.p.v. op een eigen regel — scheelt
	   per onderdeel een hele rij. */
	body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.is-fixed {
		grid-template-columns: 3.15rem minmax(0, 1fr) auto auto;
		grid-template-areas:
			"thumb name     name   name"
			"thumb subtotal qty    remove"
			"thumb price    price  price";
		column-gap: 0.5rem;
	}
	body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.wcp-cart-group-depth-2.is-fixed { grid-template-columns: 2.9rem minmax(0, 1fr) auto auto; }
	body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.is-fixed :is(td.product-quantity, td.product-remove) { align-self: center; padding-bottom: 0; margin-bottom: 0; }
	body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.is-fixed td.product-remove { grid-area: remove; }
	body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.is-fixed td.product-remove:empty { display: none; }
	body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.is-fixed td.product-price { padding-bottom: 0.6rem; }
	body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.is-fixed td.product-subtotal { align-self: center; }
	body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-child.wcp-cart-group-depth-2 td.product-thumbnail { --wcp-cart-thumb: 2.5; }
}

/* Composite Products: de componenttitel ("Accessoire:") staat als chip bij de prijs (composite.php),
   het label boven de productnaam vervalt. */
/* Composite Products zet een   achter de naam: zonder deze font-size-truc een lege regel. */
body.woocommerce-cart .shop_table.cart td.product-name .component-name { font-size: 0; }
body.woocommerce-cart .shop_table.cart td.product-name .component-name > dl { font-size: 0.9rem; }
body.woocommerce-cart .shop_table.cart td.product-name dl.component { margin: 0; }
body.woocommerce-cart .shop_table.cart td.product-name dl.component dt { display: none; }
body.woocommerce-cart .shop_table.cart td.product-name dl.component dd,
body.woocommerce-cart .shop_table.cart td.product-name dl.component dd p { float: none; margin: 0; padding: 0; }
/* Bundel/samengesteld product: inhoud standaard ingeklapt (composite.php + wcp-coupon.js). Ingeklapt
   gedraagt de container zich als gewone rij (geen boomlijn, wel scheidingslijn). */
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-collapsible:not(.is-open) { display: none; }
body.woocommerce-cart .shop_table.cart tr.cart_item.wcp-cart-group-parent.is-collapsed:not(.wcp-cart-group-child) {
	background-image: none;
	border-bottom-color: var(--wcp-color-border);
}
/* Rustige, kleine link ("4 producten ⌄"), gedempt; het pijltje draait bij open/dicht. */
body.woocommerce-cart .shop_table.cart .wcp-cart-group-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wcp-color-muted);
	font: inherit;
	font-size: var(--wcp-font-size-sm);
	font-weight: var(--wcp-font-weight-normal, 400);
	white-space: nowrap;
	cursor: pointer;
}
body.woocommerce-cart .shop_table.cart .wcp-cart-group-toggle:hover { color: var(--wcp-color-primary); }
body.woocommerce-cart .shop_table.cart .wcp-cart-group-toggle::after {
	content: '';
	width: 0.65rem;
	height: 0.65rem;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.15s ease;
}
body.woocommerce-cart .shop_table.cart .wcp-cart-group-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }


/* Native coupon-invoer + "Update winkelwagen" in de tabel verbergen: kortingscode loopt al via
   de sidebar-toggle (coupon-proxy hierboven), aantal-wijziging update voortaan automatisch
   (native knop blijft functioneel aanwezig, alleen niet zichtbaar — zie wcp-coupon.js). */
body.woocommerce-cart .shop_table.cart tr:has( td.actions ) { display: none; }

/* Totalenkolom: lichte kaart, zelfde behandeling als checkout's review-kolom. WC-core (
   woocommerce-layout.css) zet ".cart-collaterals .cart_totals" op float:right + width:48% —
   dat laadt NA dit bestand en wint qua specificiteit van een simpele "body.woocommerce-cart
   .cart_totals"-selector (2 classes vs. WC's 3), dus expliciet ".cart-collaterals" toevoegen
   om te winnen. Zonder deze fix wordt het totaalblok shrink-to-fit-smal i.p.v. de volle
   grid-kolombreedte, en breekt "Totalen winkelwagen" woordelijk af. */
body.woocommerce-cart .cart-collaterals { order: 2; }
/* Witte kaart met rand, zelfde als de productlijst ernaast (was een getint vlak met een paars totaal
   en veel loze ruimte boven de knoppen). Kleur via --wcp-cart-aside-bg. */
body.woocommerce-cart .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
	background: var(--wcp-cart-aside-bg);
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	padding: 1.25rem 1.5rem 1.5rem;
	box-sizing: border-box;
}
body.woocommerce-cart .cart_totals h2 {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
}
body.woocommerce-cart .cart_totals .shop_table {
	margin: 0;
	border: 0;
}
body.woocommerce-cart .cart_totals .shop_table,
body.woocommerce-cart .cart_totals .shop_table th,
body.woocommerce-cart .cart_totals .shop_table td {
	background: transparent; /* wint van .woocommerce-page table.shop_table-varianten */
	border: 0;
	padding: 0;
}
body.woocommerce-cart .cart_totals .shop_table tbody { display: block; }
/* WooCommerce' mobiele zebra (table.shop_table_responsive tr:nth-child(2n) td) gaf de verzendregel een grijs vlak. */
body.woocommerce-cart .cart_totals .shop_table tbody tr:nth-child(n) td { background-color: transparent; }
body.woocommerce-cart .cart_totals .shop_table tr {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.25rem 1rem;
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--wcp-color-border);
}
body.woocommerce-cart .cart_totals .shop_table th { font-weight: var(--wcp-font-weight-normal, 400); }
body.woocommerce-cart .cart_totals .shop_table td { text-align: right; }
/* Verzending: label boven, daaronder methode + prijs op één regel en de bestemming gedempt. */
body.woocommerce-cart .cart_totals .shop_table tr.shipping { display: block; }
body.woocommerce-cart .cart_totals .shop_table tr.shipping th { display: block; margin-bottom: 0.35rem; }
body.woocommerce-cart .cart_totals .shop_table tr.shipping td { display: block; text-align: left; }
body.woocommerce-cart .cart_totals ul#shipping_method { margin: 0; padding: 0; list-style: none; }
body.woocommerce-cart .cart_totals ul#shipping_method li { margin: 0; padding: 0; background: none; }
body.woocommerce-cart .cart_totals ul#shipping_method li label {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
body.woocommerce-cart .cart_totals .shipping-calculator-button {
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm);
}
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination { margin: 0.25rem 0 0; }
body.woocommerce-cart .cart_totals .woocommerce-shipping-calculator { margin: 0; }
/* "Adres wijzigen" als alleen een potloodje (edit-icoon van WC+) direct achter "Verzenden naar …" i.p.v.
   een tekstlink met WooCommerce' vrachtwagen-icoonfont eronder (die stond boven de vrachtwagen van de
   gratis-verzendvoortgang). De tekst blijft voor schermlezers (font-size 0), de knop blijft WooCommerce'
   eigen .shipping-calculator-button die de adresinvoer opent. */
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination { display: inline; }
body.woocommerce-cart .cart_totals .woocommerce-shipping-calculator { display: inline; }
body.woocommerce-cart .cart_totals .shipping-calculator-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.4em;
	margin: 0 0 0 0.1em;
	border-radius: var(--wcp-radius);
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm); /* zelfde maat als "Verzenden naar …": de em-maten volgen die tekst */
	text-decoration: none;
	vertical-align: -0.3em; /* potloodje op de tekstregel, niet eronder */
	overflow: hidden;
	text-indent: -999em; /* knoptekst onzichtbaar, blijft voor schermlezers */
}
body.woocommerce-cart .cart_totals .shipping-calculator-button:hover { background: var(--wcp-color-light); color: var(--wcp-color-primary); }
/* Nog geen adres (nieuwe bezoeker): geen "Verzenden naar …" om achter te staan, dus de knoptekst
   ("Verzendkosten berekenen") wél tonen, met het potloodje erachter. */
body.woocommerce-cart .cart_totals tr.shipping td:not(:has(.woocommerce-shipping-destination)) .shipping-calculator-button {
	width: auto;
	height: auto;
	gap: 0.35rem;
	margin-left: 0;
	overflow: visible;
	text-indent: 0;
	vertical-align: baseline;
	font-size: var(--wcp-font-size-sm);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
body.woocommerce-cart .cart_totals tr.shipping td:not(:has(.woocommerce-shipping-destination)) .shipping-calculator-button:hover { background: none; }
body.woocommerce-cart .cart_totals .shipping-calculator-button::after {
	content: '';
	flex: none;
	width: 0.85em;
	height: 0.85em;
	margin: 0;
	text-indent: 0;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E") center / contain no-repeat;
	font-family: inherit;
}
/* Open adresformulier (WooCommerce zet display inline via slideToggle): volle breedte onder de regel. */
body.woocommerce-cart .cart_totals .shipping-calculator-form { margin-top: 0.5rem; }
/* Het potloodje blijft bij openen achter de postcode staan: het formulier blijft inline (de section
   erin is een blok en begint daardoor vanzelf op een nieuwe regel), in de flex-variant hieronder
   worden knop en section losse flex-items. */
body.woocommerce-cart .cart_totals .shipping-calculator-form :is(p, .form-row) { text-align: left; }
body.woocommerce-cart .cart_totals .shipping-calculator-form :is(select, input) { width: 100%; }
/* Kortingscode (cart.php, wcp_coupon_toggle_row): eigen regel tussen verzending en totaal. */
body.woocommerce-cart .cart_totals .shop_table tr.wcp-coupon-row { display: block; }
body.woocommerce-cart .cart_totals .shop_table tr.wcp-coupon-row td { display: block; text-align: left !important; font-size: var(--wcp-font-size-sm); } /* !important: mobiele td-regel hieronder */
body.woocommerce-cart .cart_totals .shop_table tr.wcp-coupon-row .wcp-coupon { margin-top: 0.5rem; }
/* Eén verzendmethode zonder eigen label (shipping-rates.php, bv. "Gratis"): prijs op de regel van de kop. */
body.woocommerce-cart .cart_totals .shop_table tr.shipping:has(#shipping_method li:only-child .wcp-shipping-price-only) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; }
body.woocommerce-cart .cart_totals .shop_table tr.shipping:has(#shipping_method li:only-child .wcp-shipping-price-only) th { display: block; flex: 1; margin: 0; }
body.woocommerce-cart .cart_totals .shop_table tr.shipping:has(#shipping_method li:only-child .wcp-shipping-price-only) td { display: contents; }
body.woocommerce-cart .cart_totals .shop_table tr.shipping:has(#shipping_method li:only-child .wcp-shipping-price-only) #shipping_method { flex: 0 0 auto; width: fit-content; }
body.woocommerce-cart .cart_totals .shop_table tr.shipping:has(#shipping_method li:only-child .wcp-shipping-price-only) #shipping_method :is(li, label) { width: fit-content; }
body.woocommerce-cart .cart_totals .shop_table tr.shipping:has(#shipping_method li:only-child .wcp-shipping-price-only) :is(.woocommerce-shipping-destination, .woocommerce-shipping-calculator) { order: 4; }
body.woocommerce-cart .cart_totals .shop_table tr.shipping:has(#shipping_method li:only-child .wcp-shipping-price-only) .woocommerce-shipping-calculator { display: contents; }
body.woocommerce-cart .cart_totals .shop_table tr.shipping:has(#shipping_method li:only-child .wcp-shipping-price-only) .shipping-calculator-button { order: 4; margin-right: auto; } /* direct achter de postcode, niet rechts (space-between) */
body.woocommerce-cart .cart_totals .shop_table tr.shipping:has(#shipping_method li:only-child .wcp-shipping-price-only) .shipping-calculator-form { order: 5; flex-basis: 100%; }
/* Regelafbreking na kop + prijs, daarna "Verzenden naar … ✎" naast elkaar. */
body.woocommerce-cart .cart_totals .shop_table tr.shipping:has(#shipping_method li:only-child .wcp-shipping-price-only)::after { content: ''; order: 3; flex-basis: 100%; height: 0.25rem; }
/* Verwachte levering (delivery-estimate.php): eerste regel onder het verzendblok, hoort er visueel bij. */
body.woocommerce-cart .cart_totals .shop_table tr.shipping:has(+ tr.wcp-delivery-row) { border-bottom-color: transparent; padding-bottom: 0.25rem; }
body.woocommerce-cart .cart_totals .shop_table tr.wcp-delivery-row { display: block; padding: 0.25rem 0 0.85rem; }
body.woocommerce-cart .cart_totals .shop_table tr.wcp-delivery-row:has(+ tr.wcp-free-shipping-row) { border-bottom-color: transparent; padding-bottom: 0; }
body.woocommerce-cart .cart_totals .shop_table tr.wcp-delivery-row td { display: block; text-align: left !important; }
.wcp-delivery-estimate {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm);
	line-height: 1.4;
	text-align: left;
}
.wcp-delivery-estimate i { flex: none; margin-top: 0.1rem; color: var(--wcp-color-primary); font-size: 1rem; }
.wcp-delivery-estimate__body { display: flex; flex-direction: column; min-width: 0; }
.wcp-delivery-estimate strong { color: var(--wcp-color-text); font-weight: var(--wcp-font-weight-semibold, 600); }
/* Nabestelling: titel in de warning-kleur, het product gedempt eronder. */
.wcp-delivery-row.is-backorder .wcp-delivery-estimate i,
.wcp-delivery-row.is-backorder .wcp-delivery-estimate__title { color: var(--wcp-color-warning); }
.wcp-delivery-estimate__detail { color: var(--wcp-color-muted); font-size: 0.75rem; }
/* Afrekenoverzicht: links over de volle breedte (de tfoot-regel lijnt cellen rechts uit; :not() voor
   gelijke specificiteit, en deze regel staat later). */
.wcp-checkout__totals .shop_table tfoot tr.wcp-delivery-row:not(.woocommerce-shipping-totals) td { display: block; width: 100%; text-align: left; font-weight: 400; }
/* Voortgang gratis verzending (free-shipping-progress.php): eigen regel onder het verzendblok. */
body.woocommerce-cart .cart_totals .shop_table tr.shipping:has(+ tr.wcp-free-shipping-row) { border-bottom-color: transparent; padding-bottom: 0.25rem; }
body.woocommerce-cart .cart_totals .shop_table tr.wcp-free-shipping-row { display: block; padding: 0.5rem 0 0.85rem; }
body.woocommerce-cart .cart_totals .shop_table tr.wcp-free-shipping-row td { display: block; text-align: left !important; }
body.woocommerce-cart .cart_totals .shop_table tr.wcp-free-shipping-row .wcp-free-shipping { margin: 0; }
/* Totaal: geen scheidingslijn eronder, vet in de tekstkleur, btw gedempt eronder. */
body.woocommerce-cart .cart_totals .shop_table tr.order-total {
	flex-wrap: nowrap;
	padding: 0.85rem 0 0;
	border-bottom: 0;
}
body.woocommerce-cart .cart_totals .shop_table tr.order-total td { flex: 1; text-align: right; }
body.woocommerce-cart .cart_totals .shop_table tr.order-total th,
body.woocommerce-cart .cart_totals .shop_table tr.order-total td {
	color: var(--wcp-color-dark);
	font-size: 1.25rem;
	font-weight: var(--wcp-font-weight-bold);
}
body.woocommerce-cart .cart_totals .shop_table tr.order-total .includes_tax {
	display: block;
	margin-top: 0.15rem;
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm);
	font-weight: 400;
	line-height: 1.4;
	white-space: nowrap;
}
/* Desktop: het hele totaalblok blijft in beeld tijdens het scrollen als het in het scherm past
   (wcp-coupon.js zet dan wcp-cart-totals-sticky; met het adresformulier open blijft de stand bevroren);
   past het niet, dan scrolt het mee en neemt de zwevende balk het over. De kolom rekt mee met de lijst
   (+ cross-sells), anders had sticky geen ruimte om te bewegen. */
@media ( min-width: 62rem ) {
	body.woocommerce-cart .woocommerce:not(.wcp-offcanvas) > .cart-collaterals { align-self: stretch; }
	body.woocommerce-cart .woocommerce.wcp-cart-totals-sticky .cart_totals { position: sticky; top: var(--wcp-cart-sticky-top, 1.5rem); }
}
/* Knoppenblok: de knoppen, betaaliconen gecentreerd onderaan. WooCommerce zet zelf padding: 1em 0 —
   dat was de loze ruimte. */
body.woocommerce-cart .wc-proceed-to-checkout {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: 1rem;
	padding: 0;
}

body.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	margin: 0;
	/* WC-core (.woocommerce-cart .wc-proceed-to-checkout a.checkout-button) zet font-size:1.25em +
	   padding:1em — beduidend groter dan elke andere knop op de site. */
	font-size: 1rem;
	font-weight: var(--wcp-font-weight-semibold, 600);
	padding: 0.5rem 1rem;
}
/* "Opslaan als offerte" (quotes-add-on, .wcp-btn--outline): secundaire knop zoals elders in de shop (accountkop,
   inlog-offcanvas, bedankpagina): wit, lichte rand, half-vet, even hoog als de afrekenknop; hover = donkere rand. */
body.woocommerce-cart .wc-proceed-to-checkout .savecart {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	margin: 0;
	padding: 0.5rem 1rem;
	border-color: var(--wcp-color-border);
	background: var(--wcp-color-surface, #fff);
	color: var(--wcp-color-dark);
	font-size: 1rem;
	font-weight: var(--wcp-font-weight-semibold, 600);
}
body.woocommerce-cart .wc-proceed-to-checkout .savecart:hover {
	border-color: var(--wcp-color-dark);
	background: var(--wcp-color-surface, #fff);
	color: var(--wcp-color-dark);
}
body.woocommerce-cart .wc-proceed-to-checkout .wcp-payment-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0.4rem 0 0;
	padding: 0;
	list-style: none;
}

/* Zwevende totaalbalk (templates/cart/sticky-totals.php) — stijl van de sticky add-to-cart: witte balk
   onderin met een rand erboven, schuift omhoog zodra het totaalblok uit beeld is (wcp-coupon.js). */
.wcp-cart-sticky {
	position: fixed;
	z-index: 1030;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--wcp-color-surface);
	border-top: 1px solid var(--wcp-color-border);
	box-shadow: 0 -0.5rem 1.5rem rgb(0 0 0 / 0.06);
	transform: translateY(100%);
	visibility: hidden;
	transition: transform 0.2s ease-in-out, visibility 0s linear 0.2s;
}
.wcp-cart-sticky.is-visible {
	transform: translateY(0);
	visibility: visible;
	transition: transform 0.2s ease-in-out, visibility 0s;
}
.wcp-cart-sticky__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: var(--wcp-container, 1140px);
	margin-inline: auto;
	padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
}
.wcp-cart-sticky__total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.6rem;
}
.wcp-cart-sticky__label { color: var(--wcp-color-muted); }
.wcp-cart-sticky__amount { color: var(--wcp-color-dark); font-size: 1.25rem; font-weight: var(--wcp-font-weight-bold); }
.wcp-cart-sticky__count { color: var(--wcp-color-muted); font-size: var(--wcp-font-size-sm); }
/* Verzending (uit het totaalblok): "Nog € 12,50 tot gratis verzending" of "✓ Je bestelling wordt gratis
   verzonden", met een dunne voortgangslijn over de bovenrand van de balk. */
.wcp-cart-sticky__shipping { color: var(--wcp-color-muted); font-size: var(--wcp-font-size-sm); }
.wcp-cart-sticky__shipping:empty { display: none; }
.wcp-cart-sticky__shipping::before { content: '·'; margin-right: 0.6rem; }
.wcp-cart-sticky__shipping.is-reached { color: var(--wcp-color-success); font-weight: var(--wcp-font-weight-semibold, 600); }
.wcp-cart-sticky__shipping.is-reached::before { content: '✓'; }
.wcp-cart-sticky__progress {
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--wcp-color-border);
}
.wcp-cart-sticky__progress[hidden] { display: none; }
.wcp-cart-sticky__progress span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--wcp-color-primary);
	transition: width 0.3s ease;
}
.wcp-cart-sticky__progress.is-reached span { background: var(--wcp-color-success); }
/* Onder het minimumbestelbedrag: geen afrekenknop in de balk (de afrekenpagina stuurt toch terug). */
body.woocommerce-cart .wcp-cart-sticky.is-below-minimum .wcp-cart-sticky__button { display: none; }
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout .wcp-min-order { margin: 0 0 0.75rem; }
body.woocommerce-cart .wcp-cart-sticky .wcp-cart-sticky__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-height: 3rem;
	margin: 0;
	padding: 0.5rem 1.75rem;
	font-size: 1rem;
	font-weight: var(--wcp-font-weight-semibold, 600);
}
@media ( max-width: 47.99rem ) {
	.wcp-cart-sticky__inner { padding-inline: 1rem; gap: 0.75rem; }
	.wcp-cart-sticky__total { flex-direction: column; align-items: flex-start; row-gap: 0; }
	.wcp-cart-sticky__shipping:not(.is-reached)::before { content: none; } /* onder elkaar: geen losse punt vooraan */
	.wcp-cart-sticky__label { display: none; }
	/* Mobiel: verzending i.p.v. het aantal artikelen onder het bedrag. */
	.wcp-cart-sticky__total:has(.wcp-cart-sticky__shipping:not(:empty)) .wcp-cart-sticky__count { display: none; }
	.wcp-cart-sticky__shipping::before { content: none; }
	.wcp-cart-sticky__shipping.is-reached::before { content: '✓ '; }
	.wcp-cart-sticky__amount { font-size: 1.125rem; }
	body.woocommerce-cart .wcp-cart-sticky .wcp-cart-sticky__button { padding-inline: 1.25rem; }
}
@media ( prefers-reduced-motion: reduce ) {
	.wcp-cart-sticky, .wcp-cart-sticky.is-visible { transition: none; }
}
/* Zolang de balk zichtbaar is ruimte onderaan de pagina, zodat je tot de onderkant van de footer
   kunt scrollen (de balk dekte die anders af). Onderaan toegevoegd: niets erboven verspringt. */
body.woocommerce-cart.wcp-cart-sticky-visible { padding-bottom: var(--wcp-cart-sticky-h, 5rem); }
/* Toasts boven de balk als die zichtbaar is. */
body.woocommerce-cart.wcp-cart-sticky-visible .woocommerce-notices-wrapper { bottom: calc(var(--wcp-cart-sticky-h, 5rem) + 0.75rem); }

/* "Anderen kochten ook" (cart.php, wcp_cart_cross_sells): volle breedte onder de winkelwagen. */
body.woocommerce-cart .wcp-cart-cross-sells { grid-column: 1 / -1; order: 3; margin-top: 1rem; }
/* De productlijst zit in een eigen div.woocommerce (shortcode-uitvoer) — die mag niet het 2fr/1fr-raster
   van de winkelwagenpagina erven (de lijst kreeg anders maar 2/3 van de breedte: kaarten van ~120px). */
body.woocommerce-cart :is(.wcp-cart-cross-sells, .wcp-empty-cart__products) .woocommerce { display: block; }
/* Mobiel: cross-sells direct onder de productlijst (boven de totalen — anders zag je ze nooit; afrekenen
   blijft één tik weg via de zwevende balk) als horizontale, veegbare rij i.p.v. vier kaarten onder elkaar. */
@media ( max-width: 61.99rem ) {
	body.woocommerce-cart .wcp-cart-cross-sells { order: 1; margin-top: 0; min-width: 0; } /* min-width: raster-item mag smaller dan de veegrij, anders werd de hele pagina te breed */
	body.woocommerce-cart .wcp-cart-cross-sells .woocommerce { min-width: 0; }
	body.woocommerce-cart .wcp-cart-cross-sells ul.products {
		display: flex;
		gap: 0.75rem;
		margin-inline: -1rem;
		padding: 0 1rem 0.5rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 1rem;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	body.woocommerce-cart .wcp-cart-cross-sells ul.products::-webkit-scrollbar { display: none; }
	body.woocommerce-cart .wcp-cart-cross-sells ul.products::before,
	body.woocommerce-cart .wcp-cart-cross-sells ul.products::after { content: none; }
	body.woocommerce-cart .wcp-cart-cross-sells ul.products > li.product {
		flex: 0 0 min(60%, 15rem);
		min-width: 0; /* anders bepaalt de eigen breedte van de productfoto de kaartbreedte */
		scroll-snap-align: start;
	}
	body.woocommerce-cart .wcp-cart-cross-sells ul.products > li.product img { max-width: 100%; height: auto; }
}
body.woocommerce-cart .wcp-cart-cross-sells__title { margin: 0 0 1rem; font-size: 1.25rem; }

/* Lege winkelwagen (cart/empty-cart.php): kaart met icoon, kop, tekst en knop; daaronder populaire producten. */
body.woocommerce-cart .return-to-shop { display: none; } /* vervangen door "Verder winkelen" in het blok */
.wcp-empty-cart { grid-column: 1 / -1; }
.wcp-empty-cart__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 2.5rem 1.5rem;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface);
	text-align: center;
}
.wcp-empty-cart__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	margin-bottom: 0.5rem;
	border-radius: calc(var(--wcp-radius) * 4.5 / 2.75);
	background: var(--wcp-color-light);
	color: var(--wcp-color-primary);
	font-size: 2rem;
}
.wcp-empty-cart__title { margin: 0; font-size: 1.5rem; }
.wcp-empty-cart__text { margin: 0 0 0.75rem; color: var(--wcp-color-muted); }
.wcp-empty-cart__button { display: inline-flex; align-items: center; min-height: 3rem; padding: 0.5rem 1.75rem; }
.wcp-empty-cart__products { margin-top: 2.5rem; }

/* Minimum-bestelbedrag notice + progress-bar (was Bootstrap .progress/.progress-bar). */
.wcp-min-order {
	margin: 0 0 1rem;
}
.wcp-min-order__text {
	margin: 0 0 0.5rem;
}
.wcp-progress {
	height: 0.5rem;
	background: var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	overflow: hidden;
}
.wcp-progress__bar {
	height: 100%;
	background: var(--wcp-color-primary);
	transition: width 0.3s ease;
}

/* Actieve kortingscode (coupon.php): de code als chip met ×; klik = verwijderen. Kortingsbedrag in de
   succeskleur. Winkelwagen én afrekenen (cart.css laadt op beide). */
.wcp-coupon-remove {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-left: 0.35rem;
	padding: 0.05rem 0.4rem 0.05rem 0.55rem;
	border-radius: 999px;
	/* Tint van de primaire kleur i.p.v. --wcp-color-light: het totaalblok heeft vaak zelf die lichte achtergrond
	   (--wcp-cart-aside-bg/--wcp-checkout-aside-bg), dan viel de chip weg. Zo staat hij op wit én op licht. */
	background: var(--wcp-color-light);
	background: color-mix(in srgb, var(--wcp-color-primary) 12%, var(--wcp-color-surface, #fff));
	color: var(--wcp-color-primary);
	font-size: 0.75rem;
	font-weight: var(--wcp-font-weight-semibold, 600);
	line-height: 1.6;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	vertical-align: middle;
}
.wcp-coupon-remove::after {
	content: '';
	width: 0.55rem;
	height: 0.55rem;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0.7;
}
.wcp-coupon-remove:hover { background: var(--wcp-color-primary); color: var(--wcp-color-surface); }
.wcp-coupon-remove:hover::after { opacity: 1; }
.cart_totals tr.cart-discount td,
.wcp-checkout__totals tr.cart-discount td { color: var(--wcp-color-success); font-weight: var(--wcp-font-weight-semibold, 600); }

/* ─────────────────────────────────────────────────────────────
   Checkout-wizard (was Bootstrap grid + .d-flex/.step/.collapse).
   ───────────────────────────────────────────────────────────── */
/* minmax(0, …) in plaats van kaal fr: `1fr` is `minmax(auto, 1fr)` en krimpt niet onder de
   min-content van de kolominhoud. Op 390px werd de kolom zo 356px in een container van 331px:
   het betaalblok liep rechts 25px over de rand, links stond de containermarge. */
.wcp-checkout__columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}
@media ( min-width: 62rem ) {
	.wcp-checkout__columns {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}
}
.wcp-checkout__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.wcp-checkout__title {
	margin: 0;
}
/* Stap-indicator. */
.wcp-checkout__steps {
	list-style: none;
	counter-reset: wcp-step;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 1rem 0 1.5rem;
	padding: 0;
}
.wcp-checkout__step {
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm);
}
/* Stap-koppen. */
.wcp-checkout__step-header {
	margin: 1.5rem 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--wcp-color-border);
}
.wcp-checkout__step-header--first {
	margin-top: 0.5rem;
}
.wcp-checkout__step-header--first {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
}
.wcp-checkout__step-header .wcp-checkout__login { font-size: var(--wcp-font-size-sm); }
.wcp-checkout__step-header h3 {
	margin: 0;
}
.wcp-checkout__step-number {
	color: var(--wcp-color-primary);
}
/* Review/totalen-kolom = volle-hoogte beige kolom die tot de schermrand doorloopt (referentie:
   linker/rechter kolom duidelijk van elkaar gescheiden). Op mobiel gewoon een blok met radius. */
.wcp-checkout__totals {
	background: var(--wcp-checkout-aside-bg);
	border: 1px solid var(--wcp-color-border); /* mobiel een kaart op de getinte pagina */
	border-radius: var(--wcp-radius);
	padding: 1.5rem;
	align-self: stretch;
}
@media (min-width: 62rem) {
	/* Doorlopen tot de rechter schermrand via een pseudo-element (geen horizontale scrollbar dankzij
	   overflow-x: clip op de main hieronder). De beige loopt zo van de kolomrand tot voorbij het
	   scherm; de inhoud blijft er via z-index bovenop staan. */
	.wcp-checkout__totals {
		position: relative;
		border: 0;
		border-left: 1px solid var(--wcp-color-border); /* scheidingslijn naar het formulier */
		border-radius: 0;
	}
	.wcp-checkout__totals::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: calc(50% - 50vw);
		background: inherit;
		z-index: 0;
	}
	.wcp-checkout__totals-inner { z-index: 1; }
	body.woocommerce-checkout main.site-main { overflow-x: clip; }
}
.wcp-checkout__totals-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}
.wcp-checkout__totals-title {
	margin: 0;
	font-size: 1.125rem;
}
.wcp-checkout__edit-link {
	font-size: var(--wcp-font-size-sm);
}
/* Verzending staat in de aparte verzendstap → dubbele rij in de review-tabel verbergen. */
.wcp-checkout__totals .woocommerce-shipping-totals {
	display: none;
}
/* Opmerkingen-toggle. */
.wcp-checkout__notes-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}
.wcp-checkout__notes {
	display: none;
	margin-top: 0.75rem;
}
.wcp-checkout__notes.is-open {
	display: block;
}
/* "Aanvullende informatie"-kop weg: de toggle ("Een opmerking toevoegen") is al de aanduiding.
   "Factuurgegevens"-kop (WC-core form-billing.php <h3>) ook weg: de stap "Je gegevens" is al de
   aanduiding — een losse subkop is overbodig. */
.wcp-checkout__main .woocommerce-additional-fields > h3,
.wcp-checkout__main .woocommerce-billing-fields > h3,
.wcp-checkout__main #order_review_heading + h3,
.wcp-checkout__notes h3 { display: none; }
/* Info-box (bv. alleen digitale producten). */
/* Eén toegestaan land: WooCommerce toont alleen de naam (geen keuzelijst) — als vast, subtiel vlak in de
   stijl van de verzendmelding, zodat het als (niet te wijzigen) veldwaarde leest. */
.wcp-checkout__main :is(#billing_country_field, #shipping_country_field) .woocommerce-input-wrapper > strong,
.woocommerce .wcp-checkout__main .form-row select.country_to_state--single { /* WooCommerce 9+: keuzelijst met één optie, als tekst getoond */
	width: 100%;
	height: auto;
	border: 0;
	box-shadow: none;
	appearance: none;
	pointer-events: none;
	display: block;
	padding: 0.75rem 1rem;
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-light);
	color: var(--wcp-color-text);
	font-weight: var(--wcp-font-weight-normal, 400);
}
.wcp-checkout__info {
	background: var(--wcp-color-light);
	border-radius: var(--wcp-radius);
	padding: 0.75rem 1rem;
	font-size: var(--wcp-font-size-sm);
}

/* Coupon-proxy (was Bootstrap .collapse / .input-group / .form-control / .btn). */
.wcp-coupon-toggle {
	display: inline-block;
	margin: 0.5rem 0;
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm);
	cursor: pointer;
}
.wcp-coupon--collapsible {
	display: none;
}
.wcp-coupon--collapsible.is-open {
	display: block;
}
.wcp-coupon__group {
	display: flex;
	max-width: 22rem;
}
/* In de checkout-bestellijst mag de kortingscode de volledige breedte opnemen. */
.wcp-checkout__totals .wcp-coupon__group { max-width: none; }
/* Afrekenpagina verversen (update_checkout, bv. na een adres- of verzendwijziging): geen witte waas met
   spinner over overzicht en betaalblok, maar — zoals in de winkelwagen — even gedimde bedragen
   (wcp-checkout.js zet wcp-checkout-updating). De doorzichtige overlay blokkeert nog wel klikken tijdens
   de update. Het plaatsen van de bestelling (blockUI op het hele formulier) blijft ongewijzigd. */
body.woocommerce-checkout :is(.woocommerce-checkout-review-order-table, .woocommerce-checkout-payment) > .blockUI.blockOverlay {
	background: transparent !important; /* blockUI zet de witte achtergrond inline */
}
body.woocommerce-checkout :is(.woocommerce-checkout-review-order-table, .woocommerce-checkout-payment) > .blockUI.blockOverlay::before { display: none; }
/* YITH Delivery Date blokkeert bij het laden en bij elke verzendwijziging het hele formulier (witte waas,
   60%) terwijl het de leverdagen ophaalt: ook doorzichtig (klikken blijft geblokkeerd). Niet tijdens het
   plaatsen van de bestelling — dan zet WooCommerce "processing" op het formulier en blijft zijn overlay. */
body.woocommerce-checkout form.checkout:not(.processing) > .blockUI.blockOverlay { background: transparent !important; }
body.woocommerce-checkout form.checkout:not(.processing) > .blockUI.blockOverlay::before { display: none; }
body.woocommerce-checkout.wcp-checkout-updating .woocommerce-checkout-review-order-table :is(td.product-total, tfoot td),
body.woocommerce-checkout.wcp-checkout-updating #place_order::after {
	opacity: 0.4;
	transition: opacity 0.15s ease;
}
/* Afrekenoverzicht: verzendregel (checkout.php) tussen subtotaal en totaal; met de leverregel eronder als
   één blok. */
.wcp-checkout__totals .shop_table tfoot tr.wcp-review-shipping:has(+ tr.wcp-delivery-row) { border-bottom-color: transparent; padding-bottom: 0.1rem; }
.wcp-checkout__totals .shop_table tfoot tr.wcp-review-shipping + tr.wcp-delivery-row { padding-top: 0.15rem; }
.wcp-checkout__totals .wcp-review-shipping__pending { color: var(--wcp-color-muted); font-weight: 400; }
/* Lange bestellijst ingekort (wcp-checkout.js): verborgen regels + "Toon alle 22 producten ⌄". !important:
   wint van de open-/dichtregels van bundels en samengestelde producten. */
.wcp-checkout__totals .shop_table tbody tr.cart_item.is-overflow { display: none !important; }
.wcp-checkout__totals .shop_table tbody tr.wcp-review-more { display: block; padding: 0.6rem 0; border-bottom: 1px solid var(--wcp-color-border); }
.wcp-checkout__totals .shop_table tbody tr.wcp-review-more td { display: block; padding: 0; }
.wcp-review-more__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0;
	border: 0;
	background: none;
	color: var(--wcp-color-primary);
	font: inherit;
	font-size: var(--wcp-font-size-sm);
	font-weight: var(--wcp-font-weight-semibold, 600);
	cursor: pointer;
}
.wcp-review-more__btn::after {
	content: '';
	width: 0.45em;
	height: 0.45em;
	margin-top: -0.2em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}
.wcp-review-more__btn[aria-expanded="true"]::after { margin-top: 0.15em; transform: rotate(-135deg); }
.wcp-review-more__btn:hover { text-decoration: underline; }
/* "Plaats bestelling · € 123,45" (checkout.php, data-wcp-total). */
#place_order[data-wcp-total]::after { content: ' · ' attr(data-wcp-total); white-space: nowrap; }
/* Focus in de merkkleur op alle invoervelden van winkelwagen en afrekenpagina (er was geen zichtbare focus:
   outline none zonder vervanging). */
:is(body.woocommerce-checkout, body.woocommerce-cart) :is(input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]), select, textarea):focus-visible,
.wcp-coupon__input:focus-visible {
	border-color: var(--wcp-color-primary);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wcp-color-primary) 20%, transparent);
}
/* Afrekenoverzicht: kortingscode als rustige rij onder de producten — los wit veld + neutrale knop
   (geen felle merkkleur: het is een bijzaak), zoals gangbare checkouts. */
.wcp-checkout__totals .shop_table tr.wcp-review-coupon { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--wcp-color-border); }
.wcp-checkout__totals .shop_table tr.wcp-review-coupon td { display: block; width: 100%; padding: 0; }
/* Zelfde veld in de winkelwagen (onder "Ik heb een kortingscode"). */
:is(.wcp-checkout__totals .wcp-review-coupon, body.woocommerce-cart .cart_totals .wcp-coupon-row) .wcp-coupon__group { gap: 0.5rem; max-width: none; }
:is(.wcp-checkout__totals .wcp-review-coupon, body.woocommerce-cart .cart_totals .wcp-coupon-row) .wcp-coupon__input {
	min-height: 2.75rem;
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface);
}
:is(.wcp-checkout__totals .wcp-review-coupon, body.woocommerce-cart .cart_totals .wcp-coupon-row) .wcp-coupon__apply {
	border: 0;
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-light); /* net een tintje: zichtbaar als knop, niet zo luid als de CTA */
	color: var(--wcp-color-primary);
	font-weight: var(--wcp-font-weight-semibold, 600);
	transition: background-color 0.15s ease;
}
:is(.wcp-checkout__totals .wcp-review-coupon, body.woocommerce-cart .cart_totals .wcp-coupon-row) .wcp-coupon__apply:hover { background: color-mix(in srgb, var(--wcp-color-primary) 16%, var(--wcp-color-surface)); }
/* Bezig met toepassen: spinner in de knop (label blijft de breedte houden), veld even niet bewerkbaar. */
.wcp-coupon.is-loading { pointer-events: none; }
.wcp-coupon.is-loading .wcp-coupon__input { opacity: 0.6; }
.wcp-coupon__apply { position: relative; }
.wcp-coupon.is-loading .wcp-coupon__apply { color: transparent !important; }
.wcp-coupon.is-loading .wcp-coupon__apply::after {
	content: '';
	position: absolute;
	inset: 0;
	width: 1.1rem;
	height: 1.1rem;
	margin: auto;
	border: 2px solid var(--wcp-coupon-spinner, var(--wcp-color-primary));
	border-right-color: transparent;
	border-radius: 50%;
	animation: wcp-coupon-spin 0.7s linear infinite;
}
@keyframes wcp-coupon-spin { to { transform: rotate(360deg); } }
@media ( prefers-reduced-motion: reduce ) {
	.wcp-coupon.is-loading .wcp-coupon__apply::after { animation-duration: 2s; }
}
.wcp-coupon__error { margin: 0.4rem 0 0; color: var(--wcp-color-danger); font-size: var(--wcp-font-size-sm); }
.wcp-coupon__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius) 0 0 var(--wcp-radius);
}
.wcp-coupon__apply {
	flex: 0 0 auto;
	padding: 0.5rem 1rem;
	border: 0;
	background: var(--wcp-color-primary);
	color: #fff;
	border-radius: 0 var(--wcp-radius) var(--wcp-radius) 0;
	cursor: pointer;
}
.wcp-coupon__apply:hover {
	filter: brightness( 0.95 );
}

/* .wcp-payment-icons staat globaal in mini-cart.css (gedeeld door mini-cart/cart/footer). */

/* USP-lijst (was Bootstrap .list-unstyled). */
/* ── Checkout: nette formulierrijen (WC form-row-classes, geen Bootstrap) ──
   .woocommerce-voorvoegsel bewust meegenomen: WC-core's eigen ".woocommerce form .form-row"
   (margin 0 0 6px; padding 3px) wint anders qua specificiteit. Met de extra klasse hier winnen
   we en krijgen we het rustiger 16px-ritme van de WC+-referentie (padding 0, geen 3px-inspringing
   die tussen de labels/velden extra ruimte opvulde). */
.woocommerce .wcp-checkout__main .form-row {
	display: block;
	margin: 0 0 1rem;
	padding: 0;
}
/* Alleen het directe veld-label (> label): de radio-optie-labels (.radio, genest in de
   .woocommerce-input-wrapper) mogen NIET op block — dan klapt hun ::before-bolletje in. */
.woocommerce .wcp-checkout__main .form-row > label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 1rem;
}
.wcp-checkout__main .form-row .input-text,
.wcp-checkout__main .form-row select,
.wcp-checkout__main .form-row textarea {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background-color: #fff;
}
/* Notities-textarea exact gelijk aan de overige velden. WC's eigen textarea-stijl (donkere rand
   rgba(32,7,7,.8), 8px padding, radius 4px, line-height normal) wint hardnekkig →. */
.woocommerce .wcp-checkout__main .form-row textarea {
	padding: 0.45rem 1rem;
	border: 1px solid #c4cdd5;
	border-radius: var(--wcp-radius);
	background-color: #fff;
	font-size: 1rem;
	line-height: 1.8;
}
.wcp-checkout__main .form-row .input-text:focus,
.wcp-checkout__main .form-row select:focus {
	outline: 0;
	border-color: var(--wcp-color-primary);
}
/* WC markeert een geldig ingevuld veld zelf met --wc-green (hardcoded, los van onze tokens);
   dat felle groen botst met de merkstijl. WC's selector is
   ".woocommerce form .form-row.woocommerce-validated input.input-text" (0,4,2), dus een
   .woocommerce-voorvoegsel en het element erbij om er met (0,5,1) overheen te komen —
   later laden is niet genoeg. */
.woocommerce .wcp-checkout__main .form-row.woocommerce-validated input.input-text,
.woocommerce .wcp-checkout__main .form-row.woocommerce-validated textarea.input-text,
.woocommerce .wcp-checkout__main .form-row.woocommerce-validated select {
	border-color: var(--wcp-color-primary);
}
/* Land/regio (en elk ander select2-geënhanced veld) toont niet de ruwe <select> hierboven, maar
   select2's eigen wrapper — WC kleurt dáár apart hetzelfde groen op (".select2-container
   .select2-selection"), dus die heeft dezelfde override nodig. */
.wcp-checkout__main .form-row.woocommerce-validated .select2-container:not(.select2-container--open) .select2-selection {
	border-color: var(--wcp-color-primary);
}
/* Land/regio (select2) even hoog als de andere inputs (45px i.p.v. select2's ~50px). Verticaal
   centreren via flex; de eigen line-height/padding van select2's __rendered eruit. */
.wcp-checkout__main .form-row .select2-container--default .select2-selection--single {
	height: 45px;
	display: flex;
	align-items: center;
	padding: 0 1rem;
}
.wcp-checkout__main .form-row .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: normal;
}
.wcp-checkout__main .form-row .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	height: 100%;
}
/* Ook op mobiel 2 per rij voor halve velden (voornaam/achternaam, postcode/plaats): scheelt een flink stuk
   scrollen, zoals gangbare checkouts. Kwart-velden daar op een halve breedte. */
@media (max-width: 35.99rem) {
	.wcp-checkout__main .woocommerce-billing-fields__field-wrapper,
	.wcp-checkout__main .woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 0.75rem;
	}
	.wcp-checkout__main .form-row-wide,
	.wcp-checkout__main .wcnlpc-address { grid-column: 1 / -1; }
	.wcp-checkout__main :is(.form-row-first, .form-row-last, .form-row-quart-first, .form-row-quart) { grid-column: span 1; }
}
@media (min-width: 36rem) {
	/* 4-koloms basis: halve velden = 2 kolommen, kwart-velden = 1. Zo passen Postcode (half) +
	   Nr. (kwart) + Toev. (kwart) samen op één regel — de klassieke NL adresindeling. */
	.wcp-checkout__main .woocommerce-billing-fields__field-wrapper,
	.wcp-checkout__main .woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 0 1rem;
	}
	.wcp-checkout__main .form-row-wide { grid-column: 1 / -1; }
	.wcp-checkout__main .form-row-first,
	.wcp-checkout__main .form-row-last { grid-column: span 2; }
	.wcp-checkout__main .form-row-quart-first,
	.wcp-checkout__main .form-row-quart { grid-column: span 1; }
	/* Gevonden adres (postcode-checker) als vol-breed label in de grid. */
	.wcp-checkout__main .wcnlpc-address { grid-column: 1 / -1; }
}
/* Postcodecheck (straat en huisnummer los): de plaats komt direct na de volle straatregel en stond dan alleen op een
   halve rij; dan ook vol breed, zodat de velden de rij uitvullen. Naast een ander veld blijft hij half. */
.wcp-checkout__main .form-row[id$="_street_name_field"] + .form-row[id$="_city_field"] { grid-column: 1 / -1; }
/* Gevonden adres (postcode-checker) highlighten als label — zelfde merkkleur-vlak als de Totaal. */
.wcp-checkout__main .wcnlpc-address {
	margin: 0.25rem 0 1rem;
	padding: 0.6rem 1rem;
	background: color-mix(in srgb, var(--wcp-color-primary) 22%, #fff);
	border-radius: var(--wcp-radius);
	color: var(--wcp-color-dark);
	font-weight: var(--wcp-font-weight-medium);
}
/* Inline-fouten (wcp-checkout.js): onder het veld, in de danger-kleur. De oude server-side <small class="error">
   (fields.php) stond op de verkeerde plek (in het label-sterretje, bij adresvelden helemaal niet): op de
   afrekenpagina verborgen. */
.wcp-checkout__main .form-row .error { display: none !important; }
.wcp-checkout__main .form-row :is(.wcp-field-error, .checkout-inline-error-message) {
	display: block;
	margin: 0.35rem 0 0;
	color: var(--wcp-color-danger);
	font-size: var(--wcp-font-size-sm);
	line-height: 1.4;
}
.wcp-checkout__main .form-row.woocommerce-invalid :is(input.input-text, select, textarea) { border-color: var(--wcp-color-danger); }

/* zakelijk/privé-radio als knoppenrij */
/* Dubbele selector: de generieke wrapper-fix (.wcp-checkout__main .form-row .woocommerce-
   input-wrapper → display:block) is specifieker en zou de gap tussen de vakjes slopen. */
.wcp-radio-buttons .woocommerce-input-wrapper,
.wcp-checkout__main .form-row.wcp-radio-buttons .woocommerce-input-wrapper {
	display: inline-flex;
	gap: 0.5rem;
	position: relative;
}
/* WC rendert de radio-input als sibling VÓÓR het label (niet erin) — native bullet
   visueel verbergen en een custom bullet ín het vakje tekenen (legacy-pariteit). */
.wcp-radio-buttons .woocommerce-input-wrapper > input.input-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.wcp-radio-buttons .woocommerce-input-wrapper .radio {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 1rem;
	background: #fff;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	cursor: pointer;
	margin: 0;
}
.wcp-radio-buttons .woocommerce-input-wrapper .radio::before {
	content: "";
	width: 1.2rem;
	height: 1.2rem;
	flex-shrink: 0;
	border: 1px solid var(--wcp-color-border);
	border-radius: 50%;
	background: #fff;
}
.wcp-radio-buttons .woocommerce-input-wrapper input:checked + .radio {
	border-color: var(--wcp-color-primary);
	background-color: color-mix(in srgb, var(--wcp-color-primary) 8%, #fff);
}
.wcp-radio-buttons .woocommerce-input-wrapper input:checked + .radio::before {
	border-color: var(--wcp-color-primary);
	background: var(--wcp-color-primary);
	box-shadow: inset 0 0 0 3px #fff;
}
.wcp-radio-buttons .woocommerce-input-wrapper input:focus-visible + .radio {
	outline: 2px solid var(--wcp-color-primary);
	outline-offset: 2px;
}
/* Het veld-label draagt de verplicht-ster al; niet herhalen in elk optievakje. */
.wcp-radio-buttons .woocommerce-input-wrapper .radio .required { display: none; }
.wcp-checkout__main .form-row.wcp-is-hidden { display: none; }

/* totals-kolom: sticky op desktop */
@media (min-width: 62rem) {
	.wcp-checkout__totals-inner { position: sticky; top: 1.5rem; }
}

/* bestellijst (review-order): compacte productregels */
.wcp-checkout__totals .shop_table img {
	width: 3rem;
	height: 3rem;
	object-fit: contain;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
}
.wcp-checkout__totals .shop_table td,
.wcp-checkout__totals .shop_table th {
	padding: 0.5rem 0;
	vertical-align: middle;
}
.wcp-checkout__totals .shop_table .product-name {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: var(--wcp-font-size-sm);
}
/* inputs altijd vol in hun grid-cel */
.wcp-checkout__main .form-row input.input-text,
.wcp-checkout__main .form-row input[type="text"],
.wcp-checkout__main .form-row input[type="email"],
.wcp-checkout__main .form-row input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
}

/* WC wikkelt inputs in een inline span → block, anders krimpt width:100% tot intrinsiek */
.wcp-checkout__main .form-row .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

/* WC-layout zet form-row-first/-last/-quart op %-breedtes + float — in ons grid moet elke rij
   gewoon zijn grid-cel vullen (de kolom-span regelt de breedte). */
/* .form-row meegenomen in de selector: WC-core's ".woocommerce form .form-row-first"
   (0,2,1) wint anders van (0,2,0) en zet width terug op 47% — binnen onze 2-koloms
   gridcel levert dat een veld van 167px op in plaats van 356px. Laadvolgorde helpt
   niet tegen specificiteit. */
.wcp-checkout__main .form-row.form-row-first,
.wcp-checkout__main .form-row.form-row-last,
.wcp-checkout__main .form-row.form-row-quart-first,
.wcp-checkout__main .form-row.form-row-quart {
	width: 100%;
	float: none;
}

/* ── Wizard-stappenbalk: pijlvormige segmenten (demo-pariteit) ──
   Kleine gap (winnen bewust van de generieke .wcp-checkout__steps hierboven die 1.5rem zette —
   véél te ver uit elkaar). Die smalle tussenruimte laat de witte achtergrond als een dunne
   pijlvormige scheiding tussen de segmenten doorschijnen, precies als de referentie. NIET
   volledig laten overlappen: dan smelten de inactieve segmenten tot één doorlopende balk. */
.wcp-checkout__steps {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.05rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	border-radius: var(--wcp-radius);
}
.wcp-checkout__step {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem 0.75rem 1.9rem;
	background: var(--wcp-color-light);
	color: var(--wcp-color-dark);
	font-weight: 500;
	white-space: nowrap;
	clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 50%, calc(100% - 0.9rem) 100%, 0 100%, 0.9rem 50%);
}
.wcp-checkout__step:first-child {
	clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 50%, calc(100% - 0.9rem) 100%, 0 100%);
	padding-left: 1rem;
	border-radius: var(--wcp-radius) 0 0 var(--wcp-radius);
}
.wcp-checkout__step:last-child {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0.9rem 50%);
	border-radius: 0 var(--wcp-radius) var(--wcp-radius) 0;
}
.wcp-checkout__step.is-active {
	background: var(--wcp-color-primary);
	color: #fff;
}
.wcp-checkout__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: #fff;
	color: var(--wcp-color-dark);
	font-size: var(--wcp-font-size-sm);
	font-weight: var(--wcp-font-weight-bold);
	flex-shrink: 0;
}
.wcp-checkout__step.is-active .wcp-checkout__step-num { color: var(--wcp-color-primary); }
@media (max-width: 47.99rem) {
	.wcp-checkout__step-label { display: none; }
	.wcp-checkout__step { padding: 0.6rem 1rem 0.6rem 1.5rem; }
}

/* ── Stap 1: één kolom — checkboxes (opmerking/afwijkend adres) ónder de velden ── */
.wcp-checkout__main #customer_details {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.wcp-checkout__main #customer_details .col-1,
.wcp-checkout__main #customer_details .col-2 {
	width: 100%;
	float: none;
}

/* ── Bestellijst: Subtotaal + Totaal-rij + BTW-regel ── */
/* tfoot op block zodat de (flex-)totaalrijen de volle tabelbreedte vullen i.p.v. naar hun
   inhoud te krimpen (tabel-layout deelt de breedte anders niet uit aan de flex-rijen). */
.wcp-checkout__totals .shop_table tfoot { display: block; width: 100%; }
/* :not(.woocommerce-shipping-totals) — die WC-standaardrij blijft verborgen (verzending zit al in
   de aparte verzendstap); zonder de uitsluiting maakt display:flex 'm weer zichtbaar (dubbel). */
.wcp-checkout__totals .shop_table tfoot tr:not(.woocommerce-shipping-totals) {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.5rem 0;
	width: 100%;
	box-sizing: border-box;
}
.wcp-checkout__totals .shop_table tfoot tr:not(.woocommerce-shipping-totals) td { text-align: right; }
.wcp-checkout__totals .shop_table tfoot tr.cart-subtotal td { text-align: right; }
/* Totaal: zoals in de winkelwagen — geen gekleurd vlak (liep tegen de rand en las slecht), vet in de
   tekstkleur, btw gedempt eronder. */
.wcp-checkout__totals .shop_table tfoot tr.order-total {
	align-items: flex-start;
	padding: 0.85rem 0 0.5rem;
}
.wcp-checkout__totals .shop_table tr.order-total th,
.wcp-checkout__totals .shop_table tr.order-total td {
	background: transparent;
	color: var(--wcp-color-dark);
	font-size: 1.25rem;
	font-weight: var(--wcp-font-weight-bold);
	padding: 0;
}
.wcp-checkout__totals .shop_table tr.order-total td { text-align: right; }
.wcp-checkout__totals .shop_table tr.order-total .includes_tax {
	display: block;
	margin-top: 0.15rem;
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm);
	font-weight: 400;
	line-height: 1.4;
}
/* "(incl. btw)" bij Subtotaal/Verzending óók onder het bedrag (net als bij Totaal), zodat de
   bedragen zelf allemaal op de rechterrand uitlijnen i.p.v. dat de inline-suffix ze verschuift. */
.wcp-checkout__totals .shop_table tfoot .tax_label {
	display: block;
	font-size: var(--wcp-font-size-sm);
	font-weight: 400;
	color: var(--wcp-color-muted);
}

/* minimale checkout-header (distraction-free) */
/* Geen header-balk op de checkout: alleen het logo boven "Afrekenen" (geen randlijn/achtergrond).
   .site-header.site-header--minimal wint qua specificiteit van de basis-.site-header (rand+bg). */
.site-header.site-header--minimal { border-bottom: 0; background: transparent; }
.site-header--minimal .site-header__inner { padding: 1.5rem 0 0; }

/* stappenbalk: altijd op één regel (segmenten krimpen mee, labels knippen af) */
.wcp-checkout__steps { flex-wrap: nowrap; }
.wcp-checkout__step {
	min-width: 0;
	padding: 0.6rem 0.75rem 0.6rem 1.4rem;
	font-size: var(--wcp-font-size-sm);
}
.wcp-checkout__step:first-child { padding-left: 0.75rem; }
.wcp-checkout__step-label {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Logo + kop + wizard-balk staan nu BINNEN de linkerkolom (beige loopt tot bovenaan) ──
   Geen bovenpadding op de checkout-main (beige raakt de bovenrand); i.p.v. dat vult een marge
   boven het logo de ademruimte, gelijk aan de padding waar de "Bestellijst" mee begint. */
/* Checkout tegen boven- én onderrand: geen main-padding en geen marge boven de footer, zodat de
   beige kolom strak tot aan de footer doorloopt (geen witruimte ertussen). */
body.woocommerce-checkout main.site-main { padding-top: 0; padding-bottom: 0; }
/* Footer-randlijn weg op de checkout: de beige rechterkolom staat er pal boven (zelfde beige),
   met de randlijn ertussen leest dat als een dubbele footer. Zonder lijn vloeit het naadloos over. De place-order-rij verliest ook z'n ondermarge zodat de knop strak aansluit. */
/* Scheidingslijn boven de footer: op de vol-brede .site-footer (loopt tot de schermrand), niet op
   de .site-footer__bar (die zit in de .wcp-container → lijn tot container-breedte). */
body.woocommerce-checkout .site-footer {
	margin-top: 0;
	border-top: var(--wcp-border-width) solid var(--wcp-color-border);
}
/* Eén lijn boven de footer: het copyright-blok had er ook een (dubbele rand). */
body.woocommerce-checkout .site-footer .wcp-footer__copyright { border-top: 0; }
/* Ruimte onder "Plaats bestelling" (de witte bestellijst-kolom loopt wel door tot de footer). */
@media ( min-width: 62rem ) {
	.wcp-checkout__main { padding-bottom: 3rem; }
}
/* De copyright-balk heeft margin-top: 2rem (scheiding van de footer-kolommen op gewone pagina's).
   Op de kolomloze checkout-footer collapse't die 2rem eruit → 32px lege body-ruimte boven de
   footer. Op de checkout dus 0, en de eigen (container-brede) randlijn van de balk eraf. */
body.woocommerce-checkout .site-footer__bar { margin-top: 0; border-top: 0; }
.wcp-checkout__main .form-row.place-order { margin-bottom: 0; }
/* WooCommerce zet 1em padding op #payment div.form-row; die ID-selector wint van de generieke
   .form-row-reset hierboven, waardoor privacytekst, voorwaarden en knop 1em insprongen t.o.v.
   de betaalmethode-kaarten. Zelfde rand als de kaarten. */
.woocommerce-checkout .wcp-checkout__main #payment div.form-row.place-order { padding: 0; }
.wcp-checkout__brand { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.wcp-checkout__brand .custom-logo,
.wcp-checkout__brand img { max-height: 52px; width: auto; height: auto; }
.wcp-checkout__header { margin-bottom: 1.25rem; }
.wcp-checkout__header--empty { margin-bottom: 0; } /* alleen de (verborgen) h1: geen witruimte boven de stappen */
/* Ruimte onder de (minimale) header: het formulier begon er direct tegenaan. De bestellijst-kolom krijgt
   dezelfde bovenruimte, zodat "Afrekenen" en "Bestellijst" op één lijn beginnen. */
.wcp-checkout__main { padding-top: var(--wcp-checkout-top, 1.5rem); }
@media ( min-width: 62rem ) {
	.wcp-checkout__main { --wcp-checkout-top: 2.5rem; }
	.wcp-checkout__totals { padding-top: 2.5rem; }
}
.wcp-checkout__login { color: var(--wcp-color-muted); }
.wcp-checkout__login a { color: var(--wcp-color-primary); }
.wcp-checkout__steps { margin-bottom: 2rem; }
/* Compactere titels (referentie-pariteit): "Afrekenen" 2rem i.p.v. 40px, sectiekoppen
   ("1. Je gegevens", "Factuurgegevens", "2. Verzending", …) 1.25rem i.p.v. 28px. */
.wcp-checkout__title { font-size: 2rem; line-height: 1.2; }
.wcp-checkout__main h3 { font-size: 1.25rem; line-height: 1.3; }

/* WC's eigen "Je bestelling"-kop: de review-tabel staat rechts onder "Bestellijst" —
   deze losse heading in de linkerkolom heeft daar geen inhoud meer bij. */
.wcp-checkout__main #order_review_heading { display: none; }

/* ── Review-tabel: thumb + naam naast elkaar, aantal-badge op de hoek van de thumb ── */
.wcp-checkout__totals .shop_table td.product-name {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.wcp-checkout__totals .shop_table .product-name .thumb {
	position: relative;
	flex-shrink: 0;
}
.wcp-checkout__totals .shop_table .product-name .title { min-width: 0; }

/* Review-tabel op de gekleurde kolom: transparant, geen koprij, subtiele scheidingslijnen. */
.wcp-checkout__totals .shop_table thead { display: none; }
/* Hele tabel op block-layout zodat elke rij de volle breedte van de kolom vult (de tabel-layout
   deelde de breedte niet uit aan de flex-rijen → Totaal/Subtotaal bleven te smal). */
.wcp-checkout__totals .shop_table,
.wcp-checkout__totals .shop_table tbody,
.wcp-checkout__totals .shop_table tfoot {
	display: block;
	width: 100%;
}
.wcp-checkout__totals .shop_table tbody tr.cart_item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.5rem 0; /* de cellen hebben padding 0 (hieronder); de rij regelt de lucht */
}
.wcp-checkout__totals .shop_table tbody tr.cart_item td.product-name { flex: 1; }
/* Regelprijs rechts, op één regel; "(incl. btw)" als kleine regel eronder in plaats van inline
   achter het bedrag (dat brak op 390px de prijs over twee regels en schoof de bedragen uiteen). */
.wcp-checkout__totals .shop_table tbody td.product-total {
	flex: 0 0 auto;
	text-align: right;
	white-space: nowrap;
	font-weight: var(--wcp-font-weight-medium);
}
.wcp-checkout__totals .shop_table tbody td.product-total .tax_label,
.wcp-checkout__totals .shop_table tbody td.product-total .woocommerce-price-suffix {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--wcp-color-muted);
}
/* Op WooCommerce's specificiteit. `.woocommerce table.shop_table td { border-top }` (0,2,2) en
   `.woocommerce table.shop_table { border; margin: 0 -1px 24px 0 }` (0,2,1) wonnen van
   `.wcp-checkout__totals .shop_table td` (0,2,1): de tabelrand bleef staan, elke cel hield een
   bovenrand die met de verticaal gecentreerde prijscel halverwege de rij hing, Subtotaal en
   Totaal kregen per cel een eigen lijn, en de -1px marge gaf op mobiel 1px horizontale scroll. */
.woocommerce .wcp-checkout__totals table.shop_table,
.woocommerce .wcp-checkout__totals table.shop_table th,
.woocommerce .wcp-checkout__totals table.shop_table td,
.woocommerce .wcp-checkout__totals table.shop_table tfoot th,
.woocommerce .wcp-checkout__totals table.shop_table tfoot td {
	background: transparent;
	border: 0;
	margin: 0;
}
/* Cel-padding uit: na de block-conversie kregen de cellen WC's standaard 9px/12px terug, waardoor
   de waarden ongelijk uitlijnden. De rij-flex regelt de ruimte nu; cellen zelf padding 0. */
.wcp-checkout__totals .shop_table tbody td,
.wcp-checkout__totals .shop_table tfoot th,
.wcp-checkout__totals .shop_table tfoot td { padding: 0; }
.wcp-checkout__totals .shop_table tbody tr,
.wcp-checkout__totals .shop_table tfoot tr {
	border-bottom: 1px solid var(--wcp-color-border);
}
.wcp-checkout__totals .shop_table tfoot tr:last-child,
.wcp-checkout__totals .shop_table tr.order-total { border-bottom: 0; }

/* ── Vinkjes-blok (Account aanmaken / Afwijkend bezorgadres / Een opmerking) gelijkmatig en
   compact onder elkaar: strak op elkaar, uitgelijnde vinkjes. ── */
.woocommerce .wcp-checkout__main .form-row.create-account { margin-bottom: 0.1rem; }
.wcp-checkout__main .wcp-checkout__notes-toggle { margin-bottom: 0.1rem; }
/* create-account-label als inline-flex net als de andere twee, zodat het vinkje op één lijn
   staat i.p.v. de standaard inline-checkbox-inspringing. */
.woocommerce .wcp-checkout__main .form-row.create-account label.checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	cursor: pointer;
}
.woocommerce .wcp-checkout__main .form-row.create-account label.checkbox input {
	margin: 0;
}

/* ── "Afwijkend bezorgadres"-toggle: gewone checkboxregel i.p.v. WC's h3 (demo-pariteit) ── */
.wcp-checkout__main #ship-to-different-address {
	font-size: 1rem;
	font-weight: 400;
	margin: 0 0 0.1rem;
}
.wcp-checkout__main #ship-to-different-address label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

/* ── Stap 2: verzendopties als nette lijst (geen tabel-kop) ── */
.wcp-checkout__main .shipping-step table,
.wcp-checkout__main .shipping-step tbody,
.wcp-checkout__main .shipping-step tr,
.wcp-checkout__main .shipping-step td { display: block; width: 100%; border: 0; padding: 0; background: transparent; }
.wcp-checkout__main .shipping-step th { display: none; }
.wcp-checkout__main .shipping-step ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.wcp-checkout__main .shipping-step ul#shipping_method li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1rem;
	background: #fff;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
}
.wcp-checkout__main .shipping-step ul#shipping_method li:has(input:checked) {
	border-color: var(--wcp-color-primary);
	background: color-mix(in srgb, var(--wcp-color-primary) 8%, #fff); /* zelfde actieve stijl als Type bestelling en de bezorgadressen */
}
.wcp-checkout__main .shipping-step ul#shipping_method input[type="radio"] {
	accent-color: var(--wcp-color-primary);
	margin: 0;
}
.wcp-checkout__main .shipping-step ul#shipping_method label { margin: 0; cursor: pointer; flex: 1; }
/* Extra keuze onder de verzendopties (wcp_shipping_content_fragment, bv. zaterdaglevering met toeslag): als kaart in
   dezelfde stijl en met dezelfde actieve stijl, i.p.v. een los vinkje tussen de kaarten. "(optioneel)" is bij een
   vinkje vanzelfsprekend. */
.wcp-checkout__main #shipping_content .form-row:has(label.checkbox) { margin: 0.4rem 0 0.75rem; padding: 0; }
.wcp-checkout__main #shipping_content label.checkbox {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0.7rem 1rem;
	background: #fff;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	cursor: pointer;
}
.wcp-checkout__main #shipping_content label.checkbox:has(input:checked) {
	border-color: var(--wcp-color-primary);
	background: color-mix(in srgb, var(--wcp-color-primary) 8%, #fff);
}
.wcp-checkout__main #shipping_content label.checkbox input[type="checkbox"] { margin: 0; accent-color: var(--wcp-color-primary); }
.wcp-checkout__main #shipping_content label.checkbox .optional { display: none; }

/* ── Stap 2 met meerdere zendingen (bv. dropshipping apart, wcp_checkout_shipments_html): elke zending één witte
   kaart — kop met toelichting, de producten compact (overlappende foto's + "12 producten", uit te klappen) en
   onderin de verzendkeuze als regel (naam links, prijs rechts) i.p.v. een kaart in een kaart. ── */
.wcp-shipments { display: flex; flex-direction: column; gap: 0.75rem; }
.wcp-shipment {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem 1.1rem;
	background: var(--wcp-color-surface, #fff);
	border: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
}
.wcp-shipment table, .wcp-shipment .woocommerce-shipping-totals td { margin: 0; }
.wcp-shipment__head { display: flex; flex-direction: column; gap: 0.15rem; }
.wcp-shipment__title { margin: 0; font-size: 1rem; font-weight: var(--wcp-font-weight-semibold, 600); color: var(--wcp-color-dark); }
.wcp-shipment__note { margin: 0; font-size: var(--wcp-font-size-sm, 0.875rem); color: var(--wcp-color-muted); }

.wcp-shipment__products { font-size: var(--wcp-font-size-sm, 0.875rem); color: var(--wcp-color-text); }
div.wcp-shipment__products,
.wcp-shipment__details > summary { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.wcp-shipment__thumbs { flex: none; display: inline-flex; align-items: center; }
.wcp-shipment__thumbs > * + * { margin-left: -0.6rem; }
.wcp-shipment__thumb,
.wcp-shipment__more {
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 2px solid var(--wcp-color-surface, #fff);
	background: var(--wcp-color-light);
	object-fit: cover;
}
.wcp-shipment__more { display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: var(--wcp-font-weight-semibold, 600); color: var(--wcp-color-muted); }
.wcp-shipment__count { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcp-shipment__qty { color: var(--wcp-color-muted); }
.wcp-shipment__details > summary { cursor: pointer; list-style: none; }
.wcp-shipment__details > summary::-webkit-details-marker { display: none; }
.wcp-shipment__details .wcp-shipment__count { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--wcp-color-primary); }
.wcp-shipment__details .wcp-shipment__count::after { content: ""; flex: none; width: 0.45rem; height: 0.45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.15rem) rotate(45deg); transition: transform 0.15s ease; }
.wcp-shipment__details[open] .wcp-shipment__count::after { transform: translateY(0.1rem) rotate(-135deg); }
.wcp-shipment__list { margin: 0.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; }
.wcp-shipment__list li { display: flex; justify-content: space-between; gap: 0.75rem; }
.wcp-shipment__list .wcp-shipment__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Verzendkeuze binnen de kaart: regels met een lijn erboven, geen eigen kaart. */
.wcp-checkout__main .shipping-step .wcp-shipment ul#shipping_method { gap: 0; }
.wcp-checkout__main .shipping-step .wcp-shipment ul#shipping_method li {
	padding: 0.75rem 0 0;
	border: 0;
	border-top: var(--wcp-border-width, 1px) solid var(--wcp-color-border);
	border-radius: 0;
	background: transparent;
}
.wcp-checkout__main .shipping-step .wcp-shipment ul#shipping_method li + li { padding-top: 0.6rem; margin-top: 0.6rem; }
.wcp-checkout__main .shipping-step .wcp-shipment ul#shipping_method li:has(input:checked) { background: transparent; }
.wcp-checkout__main .shipping-step .wcp-shipment ul#shipping_method label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.wcp-checkout__main .shipping-step .wcp-shipment ul#shipping_method label .price { flex: none; }

/* ── Stap 3: betaalmethoden als kaart-rijen, geselecteerd = paars (demo-pariteit) ── */
.wcp-checkout__main #payment {
	background: transparent; /* WC-core zet #payment op grijs met gelijke specificiteit */
	border-radius: 0;
}
.wcp-checkout__main #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0; /* WC zet hier 1em op met gelijke specificiteit */
	border: 0;
}
.wcp-checkout__main #payment ul.payment_methods li.wc_payment_method {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* gap:0 (i.p.v. 0.6rem): de leading whitespace vóór de radio werd als flex-item behandeld,
	   waardoor de gap ervóór de radio ~10px inspringde t.o.v. de Particulier/Zakelijk-bolletjes.
	   De ruimte radio→label loopt nu via margin-right op de radio zelf. */
	gap: 0;
	margin: 0 0 0.5rem;
	padding: 0.7rem 1rem;
	background: #fff;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
}
.wcp-checkout__main #payment ul.payment_methods li.wc_payment_method:has(> input:checked) {
	border-color: var(--wcp-color-primary);
	background: color-mix(in srgb, var(--wcp-color-primary) 8%, #fff); /* zelfde actieve stijl als Type bestelling en de bezorgadressen */
}
.wcp-checkout__main #payment ul.payment_methods input.input-radio {
	accent-color: var(--wcp-color-primary);
	margin: 0;
}
.wcp-checkout__main #payment ul.payment_methods li.wc_payment_method > label {
	margin: 0;
	cursor: pointer;
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	line-height: 1.5; /* WC zet line-height 2 op betaal-labels → rijen hoger dan de verzendrijen */
}
/* Gateway-icoon (Mollie e.d.) rechts uitlijnen in de rij. */
.wcp-checkout__main #payment ul.payment_methods li.wc_payment_method > label img,
.wcp-checkout__main #payment ul.payment_methods li.wc_payment_method > label i {
	margin-left: auto;
}
/* Omschrijving van de geselecteerde methode: blok onder de rij. */
.wcp-checkout__main #payment div.payment_box {
	flex: 1 1 100%;
	margin: 0.25rem 0 0; /* WC-marge (≈1em boven én onder) wint anders de tie */
	padding: 0.75rem 1rem;
	background: #fff; /* wit op de getinte actieve rij */
	border-radius: var(--wcp-radius);
	font-size: var(--wcp-font-size-sm);
}
.wcp-checkout__main #payment div.payment_box::before { display: none; }
.wcp-checkout__main #payment .woocommerce-privacy-policy-text {
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm);
}

/* "Plaats bestelling" over de volledige breedte (referentie-pariteit). */
.wcp-checkout__main #place_order,
.wcp-checkout__main .form-row.place-order .button {
	display: block;
	width: 100%;
	text-align: center;
}

/* ── Custom checkboxes + actieve radio (referentie-pariteit) ──
   Browser-native controls vervangen door strak gestylede vakjes: aangevinkt = merkkleur. */
.wcp-checkout__main .form-row input.input-checkbox,
.wcp-checkout__main input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	/* inline-block: een inline appearance:none-element negeert width/height (valt samen tot ~2px).: WC-core's ".woocommerce form .form-row input.input-checkbox { display:inline }"
	   heeft hogere specificiteit en zou het anders terugzetten op inline. */
	display: inline-block;
	width: 1.35rem;
	height: 1.35rem;
	margin: 0;
	border: 1px solid var(--wcp-checkbox-border, var(--wcp-color-border));
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
	vertical-align: middle;
}
/* Aangevinkt-staat: ook op de notities-toggle. Die trigger doet in JS e.preventDefault()
   (wcp-ui collapse), waardoor de checkbox nooit echt :checked wordt — de open-staat leest van
   aria-expanded="true" op de label eromheen. */
.wcp-checkout__main input[type="checkbox"]:checked,
.wcp-checkout__notes-toggle[aria-expanded="true"] input[type="checkbox"] {
	background: var(--wcp-color-primary);
	border-color: var(--wcp-color-primary);
}
.wcp-checkout__main input[type="checkbox"]:checked::after,
.wcp-checkout__notes-toggle[aria-expanded="true"] input[type="checkbox"]::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 47%;
	width: 0.3rem;
	height: 0.6rem;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -55%) rotate(45deg);
}
.wcp-checkout__main input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wcp-color-primary);
	outline-offset: 2px;
}
/* Betaal-/verzendmethode-radio's: custom rondje (gelijk aan de 'Type bestelling'-radio's) i.p.v.
   native accent-color. Aangevinkt = merkkleur-stip met witte ring. */
.wcp-checkout__main #payment ul.payment_methods input.input-radio,
.wcp-checkout__main .shipping-step ul#shipping_method input[type="radio"],
.wcp-address-pick__card input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.2rem;
	height: 1.2rem;
	margin: 0;
	border: 1px solid var(--wcp-color-border);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	flex-shrink: 0;
}
.wcp-checkout__main #payment ul.payment_methods input.input-radio:checked,
.wcp-checkout__main .shipping-step ul#shipping_method input[type="radio"]:checked,
.wcp-address-pick__card input[type="radio"]:checked {
	border-color: var(--wcp-color-primary);
	background: var(--wcp-color-primary);
	box-shadow: inset 0 0 0 3px #fff;
}
.wcp-checkout__main #payment ul.payment_methods input.input-radio:focus-visible,
.wcp-checkout__main .shipping-step ul#shipping_method input[type="radio"]:focus-visible,
.wcp-address-pick__card input[type="radio"]:focus-visible {
	outline: 2px solid var(--wcp-color-primary);
	outline-offset: 2px;
}
/* Ruimte radio→label (li heeft gap:0 om de phantom-gap vóór de radio te vermijden). */
.wcp-checkout__main #payment ul.payment_methods input.input-radio { margin-right: 0.6rem; }

/* ── Verzendkeuze in de cart-totalen ──
   De totalen zijn een tweekolomstabel (label | bedrag). De keuzelijst hield daarin maar ~230px
   over, terwijl WC de prijs per optie in een eigen <div class="price"> zet — een blok, dus een
   eigen regel. "Afhalen op afspraak (Milheeze)" liep zo over drie regels met "Gratis" eronder.
   De verzendrij krijgt nu de volle paneelbreedte en per optie staat de prijs rechts op dezelfde
   regel als het label. */
/* Zelfde specificiteit als de rij-regel hierboven, en later in dit bestand: de verzendrij
   blijft flex maar stapelt, zodat de keuzelijst de volle paneelbreedte krijgt in plaats van
   de ~230px die de bedragkolom overliet. */
body.woocommerce-cart .cart_totals .shop_table tr.woocommerce-shipping-totals {
	flex-direction: column;
	align-items: stretch;
	gap: 0.25rem;
}

body.woocommerce-cart .cart_totals .shop_table tr.woocommerce-shipping-totals th,
body.woocommerce-cart .cart_totals .shop_table tr.woocommerce-shipping-totals td {
	width: auto;
	text-align: left;
}

/* WC zet de prijs per optie in een eigen <div class="price"> — een blok, dus een eigen regel
   onder het label. Hier naast elkaar, prijs rechts. Specifieker dan WC's
   ".woocommerce ul#shipping_method li label", die display:inline oplegt. */
body.woocommerce-cart .cart_totals ul#shipping_method li {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0;
}

body.woocommerce-cart .cart_totals ul#shipping_method li input {
	flex: 0 0 auto;
}

body.woocommerce-cart .cart_totals ul#shipping_method li label {
	flex: 1 1 auto;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}

/* ─────────────────────────────────────────────────────────────
   Afrekenoverzicht (review-order): zelfde opbouw als winkelwagen en mini-cart — fototegel met
   aantal-badge, naam in normaal gewicht, gedeeld kortingschip (+ "4 producten ⌄" bij een bundel/
   samengesteld product, checkout.php), eigenschappen op één regel, regeltotaal rechts. Groepen als
   boompje, ingeklapt (wcp-checkout.js).
   ───────────────────────────────────────────────────────────── */
.wcp-checkout__totals .shop_table tbody tr.cart_item { align-items: flex-start; padding: 0.6rem 0; }
/* WooCommerce zet een &nbsp; achter de naam: in een grid zou dat een eigen cel worden → font-size 0 op
   de cel, de kinderen krijgen hun maat terug. */
.wcp-checkout__totals .shop_table tbody tr.cart_item td.product-name {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	column-gap: 0.75rem;
	row-gap: 0.2rem;
	align-items: start;
	font-size: 0;
}
.wcp-checkout__totals .shop_table tbody tr.cart_item td.product-name > * { font-size: var(--wcp-font-size-sm); }
/* Bundles/Composite verpakken naam + foto van een onderdeel in een eigen div: die doet niet mee in het
   raster (display: contents), zodat foto en naam gewoon naast elkaar staan zoals bij andere regels. */
.wcp-checkout__totals .shop_table tbody tr.cart_item td.product-name > :is(.bundled-product-name, .component-name) { display: contents; font-size: 0; }
.wcp-checkout__totals .shop_table tbody tr.cart_item td.product-name > :is(.bundled-product-name, .component-name) > * { font-size: var(--wcp-font-size-sm); }
.wcp-checkout__totals .shop_table tbody tr.cart_item .product-name .thumb { grid-row: 1 / span 4; width: 3rem; }
.wcp-checkout__totals .shop_table tbody tr.cart_item .product-name .thumb img {
	display: block;
	box-sizing: border-box;
	width: 3rem;
	height: 3rem;
	padding: 0.3rem;
	object-fit: contain;
	border: 1px solid var(--wcp-color-border);
	border-radius: calc(var(--wcp-radius) * 3 / 2.75);
	background: var(--wcp-color-surface);
}
.wcp-checkout__totals .shop_table tbody tr.cart_item .product-name .title {
	font-size: 0.9rem;
	font-weight: var(--wcp-font-weight-normal, 400);
	line-height: 1.35;
}
.wcp-checkout__totals .shop_table tbody tr.cart_item .product-name .title dl.component dt { display: none; }
.wcp-checkout__totals .shop_table tbody tr.cart_item .product-name .title dl.component,
.wcp-checkout__totals .shop_table tbody tr.cart_item .product-name .title dl.component dd,
.wcp-checkout__totals .shop_table tbody tr.cart_item .product-name .title dl.component dd p { margin: 0; padding: 0; }
.wcp-checkout__totals .shop_table .wcp-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.4rem; }
/* Wit: het besteloverzicht heeft zelf de lichte achtergrond van de chip, daar viel hij weg. */
.wcp-checkout__totals .shop_table .wcp-review-meta .wcp-cart-chip { margin: 0; background: var(--wcp-color-surface, #fff); }
.wcp-checkout__totals .shop_table .wcp-review-meta .backorder_notification { margin: 0; }
.wcp-checkout__totals .shop_table .wcp-review-meta .wcp-cart-group-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wcp-color-muted);
	font: inherit;
	font-size: var(--wcp-font-size-sm);
	white-space: nowrap;
	cursor: pointer;
}
.wcp-checkout__totals .shop_table .wcp-review-meta .wcp-cart-group-toggle:hover { color: var(--wcp-color-primary); }
.wcp-checkout__totals .shop_table .wcp-review-meta .wcp-cart-group-toggle::after {
	content: '';
	width: 0.6rem;
	height: 0.6rem;
	background-color: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.15s ease;
}
.wcp-checkout__totals .shop_table .wcp-review-meta .wcp-cart-group-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
/* Eigenschappen op één regel met een punt ertussen (label gedempt, waarde in de tekstkleur). */
.wcp-checkout__totals .shop_table tbody tr.cart_item .product-name dl.variation { margin: 0; color: var(--wcp-color-muted); font-size: 0.8125rem; line-height: 1.45; }
.wcp-checkout__totals .shop_table tbody tr.cart_item .product-name dl.variation :is(dt, dd, dd p) { display: inline; float: none; margin: 0; padding: 0; font-weight: 400; }
.wcp-checkout__totals .shop_table tbody tr.cart_item .product-name dl.variation dt::after { content: ' '; }
.wcp-checkout__totals .shop_table tbody tr.cart_item .product-name dl.variation dd { color: var(--wcp-color-text); }
.wcp-checkout__totals .shop_table tbody tr.cart_item .product-name dl.variation dd:not(:last-of-type)::after { content: '·'; margin: 0 0.35rem; color: var(--wcp-color-muted); }
.wcp-checkout__totals .shop_table tbody tr.cart_item td.product-total { padding-top: 0.1rem; font-weight: var(--wcp-font-weight-bold); }
/* Regel zonder iets onder de naam (geen chip, badge, eigenschappen of groepsknop): naam en prijs verticaal
   midden naast de foto i.p.v. bovenaan. */
.wcp-checkout__totals .shop_table tbody tr.cart_item:not(:has(.wcp-review-meta, dl.variation, .wc-item-meta)) { align-items: center; }
.wcp-checkout__totals .shop_table tbody tr.cart_item:not(:has(.wcp-review-meta, dl.variation, .wc-item-meta)) td.product-name { align-items: center; }
.wcp-checkout__totals .shop_table tbody tr.cart_item:not(:has(.wcp-review-meta, dl.variation, .wc-item-meta)) .product-name .thumb { grid-row: 1; }
.wcp-checkout__totals .shop_table tbody tr.cart_item:not(:has(.wcp-review-meta, dl.variation, .wc-item-meta)) td.product-total { padding-top: 0; }

/* Groepen als boompje (klassen wcp-cart-group-*): --rv-x = midden van de fototegel, --rv-in =
   inspringing, --rv-y = aftakpunt (0,6rem padding + halve tegel van 2,25rem). */
.wcp-checkout__totals .shop_table tbody tr.cart_item:is(.wcp-cart-group-parent, .wcp-cart-group-child) {
	--rv-x: 1.5rem;
	--rv-in: 3.75rem;
	--rv-y: 1.725rem;
	--rv-x2: calc(var(--rv-in) + 1.125rem);
	--rv-in2: calc(var(--rv-in) + 2.75rem);
	--rv-tick: calc(var(--rv-in) - var(--rv-x) - 0.4rem) 1px;
	--rv-tick2: calc(var(--rv-in2) - var(--rv-x2) - 0.4rem) 1px;
	--rv-line: linear-gradient(var(--wcp-color-border), var(--wcp-color-border));
	background-repeat: no-repeat;
}
.wcp-checkout__totals .shop_table tbody tr.cart_item.wcp-cart-group-collapsible:not(.is-open) { display: none; }
.wcp-checkout__totals .shop_table tbody tr.cart_item.wcp-cart-group-parent:not(.is-collapsed) { border-bottom-color: transparent; padding-bottom: 0.3rem; }
.wcp-checkout__totals .shop_table tbody tr.cart_item.wcp-cart-group-parent:not(.is-collapsed):not(.wcp-cart-group-child) {
	background-image: var(--rv-line);
	background-position: var(--rv-x) 100%;
	background-size: 1px calc(100% - 3.6rem); /* vanaf de onderkant van de tegel (0,6 + 3rem) */
}
.wcp-checkout__totals .shop_table tbody tr.cart_item.wcp-cart-group-child {
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
	padding-left: var(--rv-in);
	border-bottom-color: transparent;
	background-image: var(--rv-line), var(--rv-line);
	background-position: var(--rv-x) 0, var(--rv-x) var(--rv-y);
	background-size: 1px 100%, var(--rv-tick);
}
.wcp-checkout__totals .shop_table tbody tr.cart_item.wcp-cart-group-child td.product-name { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.6rem; }
.wcp-checkout__totals .shop_table tbody tr.cart_item.wcp-cart-group-child .product-name .thumb,
.wcp-checkout__totals .shop_table tbody tr.cart_item.wcp-cart-group-child .product-name .thumb img { width: 2.25rem; height: 2.25rem; }
.wcp-checkout__totals .shop_table tbody tr.cart_item.wcp-cart-group-child .product-name .thumb img { padding: 0.25rem; border-radius: var(--wcp-radius); }
.wcp-checkout__totals .shop_table tbody tr.cart_item.wcp-cart-group-child:not(:has(+ tr.wcp-cart-group-child)),
.wcp-checkout__totals .shop_table tbody tr.cart_item.wcp-cart-group-child.wcp-cart-group-last:not(:has(+ tr.wcp-cart-group-child.wcp-cart-group-depth-2.is-open)) {
	background-size: 1px var(--rv-y), var(--rv-tick);
}
.wcp-checkout__totals .shop_table tbody tr.cart_item.wcp-combi-child:not(:has(+ tr.wcp-combi-child)),
.wcp-checkout__totals .shop_table tbody tr.cart_item.wcp-cart-group-child.wcp-cart-group-last:not(.wcp-cart-group-depth-2):is(.is-collapsed, :not(.wcp-cart-group-parent)),
.wcp-checkout__totals .shop_table tbody tr.cart_item.wcp-cart-group-child.wcp-cart-group-depth-2.wcp-cart-group-last:not(.wcp-cart-group-outer-line) {
	border-bottom-color: var(--wcp-color-border);
	padding-bottom: 0.6rem;
}
.wcp-checkout__totals .shop_table tbody tr.cart_item.wcp-cart-group-child.wcp-cart-group-parent:not(.is-collapsed) {
	background-image: var(--rv-line), var(--rv-line), var(--rv-line);
	background-position: var(--rv-x) 0, var(--rv-x) var(--rv-y), var(--rv-x2) 100%;
	background-size: 1px 100%, var(--rv-tick), 1px calc(100% - 2.55rem);
}
.wcp-checkout__totals .shop_table tbody tr.cart_item.wcp-cart-group-child.wcp-cart-group-parent.wcp-cart-group-last:not(.is-collapsed) {
	background-size: 1px var(--rv-y), var(--rv-tick), 1px calc(100% - 2.55rem);
}
.wcp-checkout__totals .shop_table tbody tr.cart_item.wcp-cart-group-child.wcp-cart-group-depth-2 {
	padding-left: var(--rv-in2);
	background-position: var(--rv-x2) 0, var(--rv-x2) var(--rv-y);
	background-size: 1px 100%, var(--rv-tick2);
}
.wcp-checkout__totals .shop_table tbody tr.cart_item.wcp-cart-group-child.wcp-cart-group-depth-2.wcp-cart-group-last { background-size: 1px var(--rv-y), var(--rv-tick2); }
.wcp-checkout__totals .shop_table tbody tr.cart_item.wcp-cart-group-child.wcp-cart-group-depth-2.wcp-cart-group-outer-line {
	background-image: var(--rv-line), var(--rv-line), var(--rv-line);
	background-position: var(--rv-x2) 0, var(--rv-x2) var(--rv-y), var(--rv-x) 0;
	background-size: 1px 100%, var(--rv-tick2), 1px 100%;
}
.wcp-checkout__totals .shop_table tbody tr.cart_item.wcp-cart-group-child.wcp-cart-group-depth-2.wcp-cart-group-outer-line.wcp-cart-group-last { background-size: 1px var(--rv-y), var(--rv-tick2), 1px 100%; }

/* ─────────────────────────────────────────────────────────────
   Afrekenpagina op smalle schermen (< 62rem), zoals gangbare checkouts: het besteloverzicht bovenaan,
   ingeklapt achter "Toon besteloverzicht ⌄ · totaal" (checkout.php, wcp-checkout.js); geen stappenbalk
   (de genummerde koppen zeggen hetzelfde); een compact totaalblok vlak boven "Plaats bestelling".
   ───────────────────────────────────────────────────────────── */
/* Beoordelingen van de shop boven het besteloverzicht (#226, checkout.php wcp_checkout_shop_rating). */
.wcp-checkout__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	position: relative;
	z-index: 1; /* boven de doorlopende achtergrond van de rechterkolom (::before) */
	margin: 0 0 1.25rem;
	color: var(--wcp-color-muted);
	font-size: 0.8125rem;
	line-height: 1.4;
	text-decoration: none;
}
.wcp-checkout__rating .wcp-stars { font-size: 0.875rem; }
.wcp-checkout__rating-text { white-space: nowrap; }
.wcp-checkout__rating strong { color: var(--wcp-color-dark); font-weight: var(--wcp-font-weight-bold); }
.wcp-checkout__rating-sep { margin: 0 0.15rem; }
a.wcp-checkout__rating:hover .wcp-checkout__rating-text { text-decoration: underline; }
.wcp-checkout__summary-toggle { display: none; }
.wcp-checkout__mini-totals { display: none; }
.wcp-checkout__trust { display: none; }
/* Voorwaarden: vinkje naast de (meerregelige) tekst i.p.v. tekst eronder door. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row label.woocommerce-form__label-for-checkbox { /* wint van WooCommerce' ".woocommerce form .form-row label.checkbox" (inline) */
	display: block;
	position: relative;
	padding-left: 2rem; /* vinkje links ernaast; tekst + sterretje lopen gewoon door */
	font-size: var(--wcp-font-size-sm);
	line-height: 1.5;
}
/* Vinkje direct boven de knop: weinig ruimte ertussen. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row.validate-required { margin: 0.5rem 0 0.75rem; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row label.woocommerce-form__label-for-checkbox input[type="checkbox"] { position: absolute; left: 0; top: 0.15rem; margin: 0; }
@media ( max-width: 61.99rem ) {
	.wcp-checkout__columns { gap: 0; }
	.wcp-checkout__totals {
		order: -1;
		margin: 1.25rem 0 0.25rem;
		padding: 0;
		overflow: hidden;
	}
	/* Met beoordelingen erboven (#226): de wrap wordt kaal, de balk + het uitgeklapte overzicht samen de kaart. */
	.wcp-checkout__totals:has(> .wcp-checkout__rating) { overflow: visible; border: 0; border-radius: 0; background: none; }
	.wcp-checkout__totals > .wcp-checkout__rating { justify-content: center; gap: 0.2rem 0.4rem; margin: 0 0 0.6rem; font-size: 0.75rem; } /* één regel op een telefoon */
	.wcp-checkout__totals > .wcp-checkout__rating .wcp-stars { font-size: 0.75rem; }
	.wcp-checkout__totals:has(> .wcp-checkout__rating) .wcp-checkout__summary-toggle { border: 1px solid var(--wcp-color-border); border-radius: var(--wcp-radius); background: var(--wcp-checkout-aside-bg); }
	.wcp-checkout__totals.is-open:has(> .wcp-checkout__rating) .wcp-checkout__summary-toggle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
	.wcp-checkout__totals:has(> .wcp-checkout__rating) .wcp-checkout__totals-inner { border: 1px solid var(--wcp-color-border); border-top: 0; border-radius: 0 0 var(--wcp-radius) var(--wcp-radius); background: var(--wcp-checkout-aside-bg); }
	.wcp-checkout__summary-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
		padding: 0.95rem 1.25rem;
		border: 0;
		background: none;
		color: var(--wcp-color-primary);
		font: inherit;
		font-size: var(--wcp-font-size-sm);
		font-weight: var(--wcp-font-weight-semibold, 600);
		text-align: left;
		cursor: pointer;
	}
	.wcp-checkout__summary-label { display: inline-flex; align-items: center; gap: 0.4rem; }
	.wcp-checkout__summary-label::after {
		content: '';
		width: 0.45em;
		height: 0.45em;
		margin-top: -0.2em;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.15s ease;
	}
	.wcp-checkout__summary-toggle[aria-expanded="true"] .wcp-checkout__summary-label::after { margin-top: 0.15em; transform: rotate(-135deg); }
	.wcp-checkout__summary-total { color: var(--wcp-color-dark); font-size: 1.05rem; font-weight: var(--wcp-font-weight-bold); }
	.wcp-checkout__totals .wcp-checkout__totals-inner { padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--wcp-color-border); }
	.wcp-checkout__totals:not(.is-open) .wcp-checkout__totals-inner { display: none; }
	.wcp-checkout__totals .wcp-checkout__totals-head { display: none; } /* de balk is de kop */
	.wcp-checkout__steps { display: none; }
	.wcp-checkout__totals .wcp-usps { display: none; } /* niet in het ingeklapte overzicht: onder de knop */
	.wcp-checkout__trust { display: block; margin: 1rem 0 2rem; } /* ruimte tot de footer */
	.wcp-checkout__trust .wcp-usps__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1rem; margin: 0; padding: 0; list-style: none; }
	.wcp-checkout__trust .wcp-usps__item { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--wcp-color-muted); font-size: 0.8125rem; }
	.wcp-checkout__trust .wcp-usps__item i { width: auto; height: auto; padding: 0; border-radius: 0; background: none; color: var(--wcp-color-primary); font-size: 0.9rem; } /* geen tegel zoals in het overzicht */
	.wcp-checkout__mini-totals {
		display: block;
		margin: 0 0 1rem;
		padding: 0.75rem 1rem;
		border: 1px solid var(--wcp-color-border);
		border-radius: var(--wcp-radius);
		background: var(--wcp-color-surface);
		font-size: var(--wcp-font-size-sm);
	}
	.wcp-checkout__mini-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.15rem 0; }
	.wcp-checkout__mini-totals :is(dt, dd) { margin: 0; }
	.wcp-checkout__mini-totals dt { color: var(--wcp-color-muted); }
	.wcp-checkout__mini-totals .wcp-checkout__mini-total { margin-top: 0.35rem; padding-top: 0.5rem; border-top: 1px solid var(--wcp-color-border); font-size: 1rem; font-weight: var(--wcp-font-weight-bold); }
	.wcp-checkout__mini-totals .wcp-checkout__mini-total dt { color: var(--wcp-color-dark); }
	.wcp-checkout__mini-totals .includes_tax { display: block; color: var(--wcp-color-muted); font-size: var(--wcp-font-size-sm); font-weight: 400; }
}


/* ── Afrekenen compact voor ingelogde klanten (#247, includes/woocommerce/myaccount/address-book.php) ──
   Factuur- en bezorgadres als dezelfde adresrijen, in de stijl van de verzend- en betaalmethoden (wit, 1px rand,
   actief = merkkleur-rand + 8% tint). */
.wcp-checkout-subtitle { margin: 0 0 0.5rem; font-weight: var(--wcp-font-weight-bold, 700); }
.wcp-address-pick { margin: 0 0 1.25rem; }
/* Losse rijen, precies als de verzend- en betaalmethoden: wit, 1px rand, zelfde radius, 0.5rem ertussen;
   gekozen = merkkleur-rand + 8% tint. */
.wcp-address-pick__list { display: flex; flex-direction: column; gap: 0.5rem; }
.wcp-address-pick__card {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0.7rem 1rem;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: #fff;
	font-weight: var(--wcp-font-weight-normal, 400);
	line-height: 1.45;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}
.wcp-address-pick__card:hover { border-color: color-mix(in srgb, var(--wcp-color-primary) 45%, var(--wcp-color-border)); }
.wcp-address-pick__card:has(input:checked) {
	border-color: var(--wcp-color-primary);
	background: color-mix(in srgb, var(--wcp-color-primary) 8%, #fff);
}
/* Straat (met eventueel "Standaard") als titel, de rest van het adres op een dunne regel eronder. */
.wcp-address-pick__body { display: grid; gap: 0.0625rem; min-width: 0; }
.wcp-address-pick__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.wcp-address-pick__badge {
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: var(--wcp-color-primary);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: var(--wcp-font-weight-bold, 700);
}
/* Tekst rustig: titel half-vet op 15px, adres en "Ander adres" klein. */
.wcp-address-pick__head strong { font-size: 0.9375rem; font-weight: var(--wcp-font-weight-semibold, 600); }
/* Zakelijk/Particulier: rustig label (rand), naast het gevulde "Standaard". */
.wcp-address-pick__type {
	padding: 0 0.45rem;
	border: 1px solid var(--wcp-color-border);
	border-radius: 999px;
	background: #fff;
	color: var(--wcp-color-muted);
	font-size: 0.6875rem;
	font-weight: var(--wcp-font-weight-semibold, 600);
	line-height: 1.5;
}
.wcp-address-pick__address { overflow: hidden; color: var(--wcp-color-muted); font-size: 0.8125rem; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.wcp-address-pick__card--new { align-items: center; color: var(--wcp-color-primary); font-size: var(--wcp-font-size-sm, 0.875rem); font-weight: var(--wcp-font-weight-medium, 500); }


/* Gekozen adres als kaart met "Ander adres" rechts; de lijst staat in het paneel (WC+ offcanvas). */
.wcp-address-pick__summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.7rem 1rem;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: #fff;
	line-height: 1.45;
}
.wcp-address-pick__summary > .wcp-address-pick__body { flex: 1; }
.wcp-address-pick__change {
	flex: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wcp-color-primary);
	font: inherit;
	font-size: var(--wcp-font-size-sm, 0.875rem);
	font-weight: var(--wcp-font-weight-semibold, 600);
	cursor: pointer;
}
.wcp-address-pick__change:hover { text-decoration: underline; }
.wcp-address-pick__panel .wcp-address-pick__address { white-space: normal; }

/* Opgeslagen adres of factuuradres gekozen: vinkje "ander adres" en de verzendvelden verbergen (ze blijven in het formulier). */
.wcp-address-pick--saved #ship-to-different-address,
.wcp-address-pick--saved .shipping_address { display: none !important; }
.wcp-address-pick--new #ship-to-different-address { display: none; }

/* Factuurgegevens: Particulier/Zakelijk boven dezelfde adresrijen, contactgegevens op één regel. */
.wcp-billing-pick[hidden] { display: none; }
.woocommerce-billing-fields__field-wrapper > .wcp-billing-pick { grid-column: 1 / -1; flex: 1 1 100%; width: 100%; margin: 0 0 1.25rem; }
.wcp-billing-pick__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	margin: 0.5rem 0 0;
	padding: 0.6rem 1rem;
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-light, color-mix(in srgb, var(--wcp-color-primary) 6%, #fff));
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm, 0.875rem);
}
.wcp-billing-pick__contact[hidden] { display: none; }
.wcp-billing-pick__edit {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wcp-color-primary);
	font: inherit;
	font-weight: var(--wcp-font-weight-semibold, 600);
	cursor: pointer;
}
.wcp-billing-pick__edit:hover { text-decoration: underline; }
.wcp-address-pick__address:empty { display: none; }
.woocommerce form .form-row.wcp-compact-hidden,
.form-row.wcp-compact-hidden { display: none !important; }
/* Gevonden adres van de postcodecheck (instelling "straat en plaats verbergen": .wcnlpc-address vóór de straatregel) hoort
   bij de ingeklapte adresvelden: anders bleef het als losse balk onder de adreskaart staan. */
.wcnlpc-address:has(+ .form-row.wcp-compact-hidden) { display: none !important; }