/*
 * Winkel: collectie-overzicht, productpagina, winkelwagen en afrekenen.
 *
 * WooCommerce' eigen stylesheets staan uit (zie inc/woocommerce.php), dus alles
 * wat hier niet staat, heeft geen opmaak. Dat is het punt: een galerie hoort
 * niet op een webshop te lijken.
 *
 * Woo's eigen klassenamen (.products, .price, .button) houden we aan. Ze
 * hernoemen zou betekenen dat elke Woo-update opnieuw uitgezocht moet worden.
 */

/* --- Wikkel rond alle winkelweergaven --- */
.shop {
	padding-block: var(--wce-space-7) var(--wce-space-8);
}

.shop__inner {
	width: 100%;
	max-width: var(--wce-container);
	margin-inline: auto;
	padding-inline: var(--wce-gutter);
}

.woocommerce-products-header__title,
.product_title {
	font-family: var(--wce-font-display);
	font-weight: 400;
	font-size: var(--wce-text-h2);
	line-height: 1.12;
	margin: 0 0 var(--wce-space-5);
	text-wrap: balance;
}

/* --- Collectie-overzicht ---
 * Drie kolommen, geen kaders en geen schaduwen. Het beeld draagt de pagina; elk
 * lijntje eromheen haalt aandacht weg van de fotografie.
 */
.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wce-space-6) var(--wce-space-4);
}

.products .product {
	margin: 0;
}

.products .product a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.products .product a { display: block; }

.products .product img {
	width: 100%;
	height: auto;
	border-radius: var(--wce-radius-frame);
	transition: transform 900ms var(--wce-ease-uit);
}

/* Het beeld ligt in een vlak dat van de pagina komt, en schaalt zachtjes bij
   hover. De omlijsting blijft staan, alleen de foto beweegt. */
.products .product > a > img,
.products .product .woocommerce-LoopProduct-link > img {
	box-shadow: var(--wce-shadow-1);
}

.products .product:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
	.products .product img,
	.products .product:hover img { transform: none; transition: none; }
}

.products .woocommerce-loop-product__title {
	margin: var(--wce-space-3) 0 var(--wce-space-1);
	font-family: var(--wce-font-display);
	font-weight: 400;
	font-size: var(--wce-text-h3);
	line-height: 1.2;
	letter-spacing: var(--wce-tracking-kop);
	transition: color var(--wce-duur-kort) var(--wce-ease);
}

.products .product:hover .woocommerce-loop-product__title {
	color: var(--wce-color-accent-ink);
}

.products .price {
	font-size: var(--wce-text-small);
	color: var(--wce-color-ink-soft);
}

@media (max-width: 900px) {
	.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.products {
		grid-template-columns: 1fr;
		gap: var(--wce-space-5);
	}
}

/* --- Productpagina ---
 * Beeld links, keuzes rechts. Het beeld krijgt de ruimte omdat dat is waar de
 * klant voor komt; de maatkeuze staat ernaast, niet eronder.
 */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: var(--wce-space-6) var(--wce-space-7);
	align-items: start;
}

.single-product .woocommerce-product-gallery {
	position: relative;
}

.single-product .woocommerce-product-gallery img {
	width: 100%;
	height: auto;
	border-radius: var(--wce-radius-frame);
	box-shadow: var(--wce-shadow-2);
}

/* De keuzes staan op papier naast het beeld: een rustig vlak dat de aandacht
   vasthoudt op de plek waar het besluit valt. */
.single-product .summary {
	padding: var(--wce-space-5);
	background: var(--wce-color-paper);
	border: 1px solid var(--wce-color-line-soft);
	border-radius: var(--wce-radius-frame);
	box-shadow: var(--wce-shadow-1);
}

@media (max-width: 860px) {
	.single-product .summary {
		padding: var(--wce-space-4);
	}
}

.single-product .summary .price {
	display: block;
	margin: 0 0 var(--wce-space-4);
	font-family: var(--wce-font-display);
	font-size: 1.7rem;
	line-height: 1.1;
	color: var(--wce-color-ink);
	font-variant-numeric: tabular-nums;
}

.single-product .woocommerce-product-details__short-description {
	margin-bottom: var(--wce-space-5);
	color: var(--wce-color-ink-soft);
}

@media (max-width: 860px) {
	.single-product div.product {
		grid-template-columns: 1fr;
		gap: var(--wce-space-5);
	}
}

/* --- Variantkeuze: maat en afwerking --- */
.variations {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--wce-space-4);
}

.variations th,
.variations td {
	display: block;
	text-align: left;
	padding: 0;
}

.variations th {
	margin-bottom: var(--wce-space-2);
	font-size: var(--wce-text-label);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 400;
	color: var(--wce-color-ink-soft);
}

.variations td {
	margin-bottom: var(--wce-space-4);
}

.variations select {
	width: 100%;
	padding: 0.85em 1em;
	font-family: var(--wce-font-body);
	font-size: var(--wce-text-body);
	color: var(--wce-color-ink);
	background: var(--wce-color-bg);
	border: 1px solid var(--wce-color-line);
	border-radius: var(--wce-radius-frame);
}

.variations select:focus {
	outline: none;
	border-color: var(--wce-color-accent-ink);
}

.reset_variations {
	display: inline-block;
	margin-top: var(--wce-space-1);
	font-size: var(--wce-text-small);
	color: var(--wce-color-ink-soft);
}

/* --- Knoppen ---
 * Woo geeft alles .button. Primaire salie met donkere tekst, conform §17: lichte
 * tekst op deze salie haalt maar 2,3:1 en zakt daarmee door WCAG.
 */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.95em 1.8em;
	border: 1px solid transparent;
	border-radius: var(--wce-radius-pill);
	background: var(--wce-color-accent-ink);
	color: var(--wce-color-bg);
	font-family: var(--wce-font-body);
	font-size: var(--wce-text-body);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.18s ease;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover {
	background: var(--wce-color-ink);
	color: var(--wce-color-bg);
}

/* De knoppen die het gesprek verderhelpen zijn breed en staan alleen: naar de
   winkelwagen, naar het afrekenen, en bestellen. Bij die drie mag geen twijfel
   bestaan over waar je moet klikken. */
.woocommerce .checkout-button,
.woocommerce #place_order,
.single_add_to_cart_button {
	width: 100%;
	padding-block: 1.15em;
	font-size: var(--wce-text-lead);
}

/* "Winkelwagen bijwerken" is géén hoofdactie en mag dat ook niet lijken. */
.woocommerce button[name="update_cart"] {
	background: transparent;
	border-color: var(--wce-color-line);
	color: var(--wce-color-ink-soft);
	font-size: var(--wce-text-small);
	padding: 0.7em 1.2em;
}

.woocommerce button[name="update_cart"]:hover {
	background: transparent;
	border-color: var(--wce-color-ink-soft);
	color: var(--wce-color-ink);
}

.woocommerce .button:focus-visible {
	outline: 2px solid var(--wce-color-accent-ink);
	outline-offset: 3px;
}

.woocommerce .button.disabled,
.woocommerce button.button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.single_add_to_cart_button {
	width: 100%;
}

.quantity input {
	width: 5rem;
	padding: 0.85em 0.6em;
	text-align: center;
	font-family: var(--wce-font-body);
	font-size: var(--wce-text-body);
	border: 1px solid var(--wce-color-line);
	border-radius: var(--wce-radius-frame);
	background: var(--wce-color-bg);
	color: var(--wce-color-ink);
}

/* --- Meldingen --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0 0 var(--wce-space-5);
	padding: var(--wce-space-3) var(--wce-space-4);
	list-style: none;
	background: var(--wce-color-surface);
	border-left: 3px solid var(--wce-color-accent);
	font-size: var(--wce-text-small);
}

.woocommerce-error {
	border-left-color: #8A3B3B;
}

/* --- Winkelwagen en afrekenen ---
 * Sober. Hier komt niemand voor de vormgeving; hier moet alles gewoon leesbaar
 * zijn en werken.
 */
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--wce-space-5);
	font-size: var(--wce-text-small);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--wce-space-3) var(--wce-space-2);
	text-align: left;
	border-bottom: 1px solid var(--wce-color-line);
	vertical-align: top;
}

.woocommerce table.shop_table th {
	font-size: var(--wce-text-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wce-color-ink-soft);
}

.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--wce-space-1);
	margin-bottom: var(--wce-space-3);
}

.woocommerce form .form-row label {
	font-size: var(--wce-text-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wce-color-ink-soft);
}

/* WooCommerce zet het veld en de uitleg samen in een span. Die span is inline,
   dus zonder deze regel gaan veld en uitleg naast elkaar staan en houdt het
   veld zijn eigen breedte in plaats van die van de kolom. */
.woocommerce form .form-row .woocommerce-input-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--wce-space-1);
	width: 100%;
}

.woocommerce form .form-row .description {
	font-size: var(--wce-text-small);
	line-height: 1.5;
	color: var(--wce-color-ink-soft);
}

/* "(optioneel)" achter een label hoort mee te fluisteren, niet mee te roepen. */
.woocommerce form .form-row label .optional {
	letter-spacing: 0.06em;
	opacity: 0.7;
}

.woocommerce form .form-row input,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	width: 100%;
	padding: 0.9em 1em;
	font-family: var(--wce-font-body);
	font-size: var(--wce-text-body);
	color: var(--wce-color-ink);
	background: var(--wce-color-paper);
	border: 1px solid var(--wce-color-line);
	border-radius: var(--wce-radius-frame);
	box-shadow: inset 0 1px 2px rgb(var(--wce-ink-rgb) / 0.04);
	transition: border-color var(--wce-duur-kort) var(--wce-ease),
	            box-shadow var(--wce-duur-kort) var(--wce-ease);
}

.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	box-shadow: 0 0 0 3px var(--wce-color-accent-wash);
}

.woocommerce form .form-row input:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--wce-color-accent-ink);
}



/* --- Winkelwagen, afrekenen en Mijn account ---
 * Dat zijn gewone pagina's met blokken, dus ze lopen via page.php en krijgen
 * daar de smalle leeskolom. Voor een tabel met producten en een adresformulier
 * is dat te krap, dus verbreden we ze hier op de body-class.
 */
.woocommerce-cart .page__inner,
.woocommerce-checkout .page__inner,
.woocommerce-account .page__inner {
	max-width: var(--wce-container);
}

/* --- Keuzeknoppen in plaats van dropdowns ---
 * De <select> blijft bestaan en wordt door product.js bediend; zonder
 * JavaScript blijft hij zichtbaar en werkt alles gewoon.
 */
.variations select.is-vervangen {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wce-space-2);
}

.swatch {
	padding: 0.75em 1.2em;
	font-family: var(--wce-font-body);
	font-size: var(--wce-text-small);
	line-height: 1.2;
	color: var(--wce-color-ink);
	background: transparent;
	border: 1px solid var(--wce-color-line);
	border-radius: var(--wce-radius-pill);
	cursor: pointer;
	background: var(--wce-color-paper);
	transition: border-color var(--wce-duur-kort) var(--wce-ease),
	            background var(--wce-duur-kort) var(--wce-ease),
	            box-shadow var(--wce-duur-kort) var(--wce-ease);
}

.swatch:hover {
	border-color: var(--wce-color-accent-ink);
	box-shadow: var(--wce-shadow-1);
}

.swatch:focus-visible {
	outline: 2px solid var(--wce-color-accent-ink);
	outline-offset: 2px;
}

/* Gekozen: gevuld en met een ring, zodat je in één oogopslag ziet waar je staat
   en de keuze niet alleen op kleur berust. */
.swatch.is-gekozen {
	background: var(--wce-color-accent-wash);
	border-color: var(--wce-color-accent-ink);
	box-shadow: inset 0 0 0 1px var(--wce-color-accent-ink);
	font-weight: 500;
}

/* Onmogelijk bij de huidige combinatie: doorgestreept in plaats van verdwenen,
   zodat zichtbaar blijft dat de optie bestaat maar nu niet kan. */
.swatch.is-uitgesloten {
	color: var(--wce-color-ink-soft);
	border-style: dashed;
	text-decoration: line-through;
	cursor: not-allowed;
	opacity: 0.55;
}

.field-hint {
	margin: var(--wce-space-2) 0 0;
	font-size: var(--wce-text-small);
	line-height: 1.5;
	color: var(--wce-color-ink-soft);
}

/* --- Geruststelling bij de knop --- */
.reassurance {
	list-style: none;
	margin: var(--wce-space-4) 0 0;
	padding: var(--wce-space-4) 0 0;
	border-top: 1px solid var(--wce-color-line);
	display: grid;
	gap: var(--wce-space-2);
}

.reassurance__item {
	position: relative;
	padding-left: 1.6em;
	font-size: var(--wce-text-small);
	color: var(--wce-color-ink-soft);
}

/* Vinkje in salie, getekend in CSS zodat er geen icoonbestand bij hoeft. */
.reassurance__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 0.5em;
	height: 0.28em;
	border-left: 1.5px solid var(--wce-color-accent-ink);
	border-bottom: 1.5px solid var(--wce-color-accent-ink);
	transform: rotate(-45deg);
}

/* --- Afrekenen: geen uitgangen ---
 * Elke link op een afrekenpagina is een reden om weg te klikken. Wat overblijft
 * is het logo, de weg terug, en het formulier.
 */
.is-afrekenen .site-nav,
.is-afrekenen .site-footer__nav,
.is-afrekenen .site-footer__claim {
	display: none;
}

.is-afrekenen .site-header__inner {
	justify-content: center;
}

.is-afrekenen .site-footer {
	margin-top: var(--wce-space-6);
	padding-block: var(--wce-space-5);
	background: transparent;
	border-top: 1px solid var(--wce-color-line);
}

/* --- Winkelwagen: producten links, totalen rechts ---
 * De float weghalen was niet genoeg: dan komen de totalen gewoon ónder de
 * tabel te staan. Het geheel moet een grid zijn, met de meldingen erboven over
 * de volle breedte.
 */
@media (min-width: 900px) {
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
		gap: var(--wce-space-6);
		align-items: start;
	}

	.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
	.woocommerce-cart .woocommerce > .woocommerce-message,
	.woocommerce-cart .woocommerce > .woocommerce-info,
	.woocommerce-cart .woocommerce > .woocommerce-error {
		grid-column: 1 / -1;
	}

	.woocommerce-cart-form {
		float: none;
		width: 100%;
		margin: 0;
	}

	.woocommerce .cart-collaterals {
		float: none;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: var(--wce-space-4);
		background: var(--wce-color-surface);
	}

	.woocommerce .cart-collaterals .cart_totals {
		float: none;
		width: 100%;
	}

	/* Het totaal loopt mee bij het scrollen zolang de lijst doorgaat. */
	.woocommerce .cart-collaterals {
		position: sticky;
		top: var(--wce-space-4);
	}
}

/* --- Afrekenen: twee helften ---
 * Dit mikt op templates/woocommerce/checkout/form-checkout.php, onze eigen
 * versie. Twee kinderen, twee kolommen: er kan niets meer tussen schuiven.
 */
@media (min-width: 980px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		/* Bijna gelijkwaardig, met het formulier iets ruimer omdat daar twee
		   velden naast elkaar moeten passen. Een vaste 24 rem rechts maakte de
		   verhouding twee staat tot één, en dan leest het paneel als een smalle
		   toren naast een breed vlak in plaats van als de andere helft. */
		grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
		gap: var(--wce-space-6);
		align-items: start;
	}

	.checkout__overzicht {
		position: sticky;
		top: 6.5rem; /* onder de plakkende header */
	}
}

.checkout__gegevens { min-width: 0; }

/* Het formulier krijgt hetzelfde kader als het besteloverzicht. Twee panelen
   van gelijk gewicht naast elkaar; zonder dat leest links als losse velden
   naast een dichtgetimmerd blok rechts. */
#customer_details {
	padding: var(--wce-space-5);
	background: var(--wce-color-paper);
	border: 1px solid var(--wce-color-line-soft);
	border-radius: var(--wce-radius-frame);
	box-shadow: var(--wce-shadow-1);
}

/* Het laatste veld hoeft geen witruimte tegen de onderrand aan te duwen. */
#customer_details .form-row:last-child {
	margin-bottom: 0;
}

/* Het vertrouwenscijfer staat onder het kader, niet erin: daar heeft het de
   breedte om liggend te staan en vult het de ruimte die anders leeg bleef. */
.checkout__gegevens .trust,
.woocommerce-cart-form .trust {
	margin-top: var(--wce-space-4);
	max-width: none;
}

@media (max-width: 720px) {
	#customer_details {
		padding: var(--wce-space-4);
	}
}

/* --- Particulier of zakelijk ---
 * Zonder JavaScript heeft de schakelaar geen werking, dus dan tonen we hem niet
 * en staat de bedrijfsnaam gewoon als optioneel veld tussen de rest.
 */
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3 {
	margin: 0 0 var(--wce-space-4);
}

.klantsoort {
	display: none;
	width: fit-content;
	margin: 0 0 var(--wce-space-5);
	padding: 0.3rem;
	gap: 0.3rem;
	background: var(--wce-color-surface);
	border-radius: 999px;
}

html.js .klantsoort {
	display: flex;
}

.klantsoort__optie {
	position: relative;
	cursor: pointer;
}

.klantsoort__optie input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.klantsoort__naam {
	display: block;
	padding: 0.5em 1.4em;
	border-radius: 999px;
	font-size: var(--wce-text-small);
	color: var(--wce-color-ink-soft);
	transition: background var(--wce-duur-kort) var(--wce-ease),
	            color var(--wce-duur-kort) var(--wce-ease);
}

.klantsoort__optie input:checked + .klantsoort__naam {
	background: var(--wce-color-paper);
	color: var(--wce-color-ink);
	box-shadow: var(--wce-shadow-1);
}

.klantsoort__optie input:focus-visible + .klantsoort__naam {
	outline: 2px solid var(--wce-color-accent-ink);
	outline-offset: 2px;
}

/* De bedrijfsnaam volgt de schakelaar. Alleen als JavaScript werkt, anders
   blijft het veld zichtbaar en is er niets verloren. */
html.js .woocommerce form .form-row.wce-zakelijk-veld {
	display: none;
}

html.js .woocommerce form .form-row.wce-zakelijk-veld.is-open {
	display: flex;
}

.checkout__overzicht {
	min-width: 0;
	padding: var(--wce-space-5);
	background: var(--wce-color-paper);
	border: 1px solid var(--wce-color-line-soft);
	border-radius: var(--wce-radius-frame);
	box-shadow: var(--wce-shadow-1);
}

.checkout__overzicht-kop {
	margin: 0 0 var(--wce-space-4);
	font-size: var(--wce-text-h3);
}

/* Op smalle schermen komt de bestelling bovenaan: eerst zien wat je koopt,
   dan pas typen. */
@media (max-width: 979px) {
	.woocommerce-checkout form.checkout {
		display: flex;
		flex-direction: column;
		gap: var(--wce-space-5);
	}

	.checkout__overzicht { order: -1; }
}

/* De velden zelf in twee kolommen, niet het formulier.
 *
 * Standaard staat elk veld over de volle breedte; alleen wat echt bij elkaar
 * hoort komt naast elkaar te staan. Dat is voornaam en achternaam, en postcode
 * en plaats. WooCommerce geeft die velden de klassen form-row-first en
 * form-row-last, en die twee zijn hier het enige wat een halve kolom krijgt.
 *
 * Belangrijk: dit raster plaatst alleen. Ieder veld dat geen plek toegewezen
 * krijgt, valt over de volle breedte, zodat een nieuw veld nooit stilletjes in
 * een halve kolom belandt. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--wce-space-4);
	align-items: start;
}

.woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-shipping-fields__field-wrapper > .form-row {
	grid-column: 1 / -1;
}

.woocommerce-billing-fields__field-wrapper > .form-row-first,
.woocommerce-shipping-fields__field-wrapper > .form-row-first {
	grid-column: 1;
}

.woocommerce-billing-fields__field-wrapper > .form-row-last,
.woocommerce-shipping-fields__field-wrapper > .form-row-last {
	grid-column: 2;
}

/* Velden die er wel moeten zijn maar niets te kiezen geven: het land staat
   vast op Nederland, en de provincie kent Woo hier niet. Ze blijven in de
   HTML staan zodat de bestelling compleet blijft, maar ze nemen geen plek in. */
.woocommerce form .form-row.wce-veld-verborgen,
.woocommerce form .form-row.woocommerce-invalid-required-field.wce-veld-verborgen {
	display: none;
}

@media (max-width: 720px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	.woocommerce-billing-fields__field-wrapper > .form-row-first,
	.woocommerce-billing-fields__field-wrapper > .form-row-last,
	.woocommerce-shipping-fields__field-wrapper > .form-row-first,
	.woocommerce-shipping-fields__field-wrapper > .form-row-last {
		grid-column: 1;
	}
}

.woocommerce table.shop_table img {
	width: 4.5rem;
	height: auto;
	border-radius: var(--wce-radius-frame);
}

/* Verzending die nul kost, zeggen we uit: een leeg veld is een vraagteken. */
.woocommerce .cart-collaterals .shop_table th {
	font-size: var(--wce-text-small);
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
	color: var(--wce-color-ink);
}

.woocommerce .order-total th,
.woocommerce .order-total td {
	font-size: var(--wce-text-body);
	font-weight: 600;
}

/* --- De productregel in het besteloverzicht ---
 * Op het laatste scherm vóór de betaling wil je zien wát je koopt. Bij een
 * galerie is het beeld het product, dus dat staat erbij.
 */
.besteltegel {
	display: flex;
	align-items: flex-start;
	gap: var(--wce-space-3);
}

.besteltegel__beeld {
	flex: 0 0 5.5rem;
	background: var(--wce-color-surface);
	border-radius: var(--wce-radius-frame);
}

.woocommerce .besteltegel__beeld img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--wce-radius-frame);
}

.besteltegel__tekst {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.besteltegel__naam {
	font-size: var(--wce-text-body);
	line-height: 1.35;
	color: var(--wce-color-ink);
}

.besteltegel__specs,
.besteltegel__aantal {
	font-size: var(--wce-text-small);
	color: var(--wce-color-ink-soft);
}

/* De bedragkolom krijgt een vaste breedte, anders bepaalt de langste regel in
   de voet (het totaal met de btw-regel) hoe smal de productnaam wordt. Met een
   vaste indeling zetten de eerste twee cellen de maat voor de hele tabel. */
.woocommerce-checkout-review-order-table {
	table-layout: fixed;
	width: 100%;
}

.woocommerce-checkout-review-order-table .product-total,
.woocommerce-checkout-review-order-table tfoot td {
	width: 8.5rem;
	text-align: right;
}

.woocommerce-checkout-review-order-table .includes_tax {
	display: block;
	margin-top: 0.2em;
	font-size: var(--wce-text-small);
	font-weight: 400;
	color: var(--wce-color-ink-soft);
}

/* De verzendkeuze is een lijst, ook als er maar één regel in staat. Een bolletje
   voor "Gratis verzending" suggereert dat er iets te kiezen valt. */
.woocommerce-checkout-review-order-table #shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* De variantregels ("Maat: 60 x 40 cm") komen als beschrijvingslijst binnen. */
.besteltegel .variation {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 0.4em;
	margin: 0;
	font-size: var(--wce-text-small);
	color: var(--wce-color-ink-soft);
}

.besteltegel .variation dt,
.besteltegel .variation dd {
	margin: 0;
	font-weight: 400;
}

.besteltegel .variation p {
	margin: 0;
}

/* --- Bedankpagina ---
 * De meest verwaarloosde pagina van elke webshop, terwijl de klant hier het
 * meest ontvankelijk is.
 */
.thankyou-extras {
	margin: var(--wce-space-6) 0;
	padding: var(--wce-space-5);
	background: var(--wce-color-surface);
}

.thankyou-extras__title {
	margin: 0 0 var(--wce-space-3);
	font-family: var(--wce-font-display);
	font-weight: 400;
	font-size: var(--wce-text-h3);
	line-height: 1.2;
}

.thankyou-extras__steps {
	margin: 0 0 var(--wce-space-4);
	padding-left: 1.2em;
	color: var(--wce-color-ink-soft);
}

.thankyou-extras__steps li {
	margin-bottom: var(--wce-space-2);
}

.thankyou-extras__ask {
	margin: 0;
	padding-top: var(--wce-space-3);
	border-top: 1px solid var(--wce-color-line);
}

/* --- Formulierlabels leesbaar houden --- */
.woocommerce form .form-row .required {
	color: var(--wce-color-ink-soft);
	text-decoration: none;
}

.woocommerce form .form-row.woocommerce-invalid input {
	border-color: #8A3B3B;
}

.woocommerce .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--wce-space-2);
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--wce-text-small);
	color: var(--wce-color-ink);
}

/* --- Onder de productinformatie ---
 * De secties onder het beeld lopen op dezelfde leesbreedte als de rest van de
 * site, zodat de linkerrand doorloopt vanaf de galerie erboven.
 */
.product-story,
.product-how {
	margin-top: var(--wce-space-7);
	padding-top: var(--wce-space-6);
	border-top: 1px solid var(--wce-color-line);
}

.product-story__inner,
.product-how__inner {
	max-width: var(--wce-container-text);
}

.product-story__body {
	font-size: var(--wce-text-lead);
	line-height: 1.6;
	color: var(--wce-color-ink-soft);
}

.product-story__body p {
	margin: 0 0 var(--wce-space-3);
}

.product-how__title {
	margin: 0 0 var(--wce-space-3);
	font-family: var(--wce-font-display);
	font-weight: 400;
	font-size: var(--wce-text-h3);
	line-height: 1.2;
	text-wrap: balance;
}

.product-how__body {
	margin: 0 0 var(--wce-space-3);
	color: var(--wce-color-ink-soft);
}

/* --- Vertrouwensblok ---
 * Het cijfer groot, want als kleine grijze regel valt het weg en doet het niets.
 */
.trust {
	display: flex;
	align-items: center;
	gap: var(--wce-space-4);
	margin-top: var(--wce-space-7);
	padding: var(--wce-space-5);
	background: var(--wce-color-accent-wash);
	border-left: 2px solid var(--wce-color-accent);
	border-radius: var(--wce-radius-frame);
	max-width: var(--wce-container-text);
}

.trust__score {
	margin: 0;
	flex: 0 0 auto;
	font-family: var(--wce-font-display);
	font-size: 3.4rem;
	line-height: 1;
	color: var(--wce-color-accent-ink);
	font-variant-numeric: tabular-nums;
}

.trust__body {
	margin: 0;
	/* Vult de rest van de regel, zodat de zin de ruimte heeft die er is. */
	flex: 1 1 auto;
	min-width: 0;
	/* Terug naar gewoon afbreken. In base.css staat `text-wrap: pretty` op elke
	   alinea, wat regels korter maakt om te voorkomen dat er één woord alleen
	   op de laatste regel belandt. Bij twee korte regels met een <br> ertussen
	   pakt dat verkeerd uit: "met dit cijfer" viel er dan af. */
	text-wrap: wrap;
	font-size: var(--wce-text-small);
	line-height: 1.55;
	color: var(--wce-color-ink-soft);
}

.trust__body strong {
	color: var(--wce-color-ink);
	font-weight: 600;
}

@media (max-width: 520px) {
	.trust {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wce-space-2);
		padding: var(--wce-space-4);
	}
}

/* --- Mobiel: winkel, productpagina, winkelwagen en afrekenen ---
 * WooCommerce gaat er standaard van uit dat er een muis en een breed scherm is.
 * Op een telefoon levert dat tabellen op die opzij scrollen en knoppen die je
 * met je duim niet raakt. Hier zetten we dat recht.
 */
@media (max-width: 720px) {
	.shop {
		padding-block: var(--wce-space-5) var(--wce-space-6);
	}

	/* Beeld boven, keuzes eronder: op deze breedte is naast elkaar niets waard. */
	.single-product div.product {
		grid-template-columns: 1fr;
		gap: var(--wce-space-4);
	}

	.variations th {
		margin-bottom: var(--wce-space-1);
	}

	/* Keuzeknoppen ruim genoeg voor een duim: minstens 44 pixels hoog. */
	.swatch {
		min-height: 2.75rem;
		padding-inline: 1em;
		flex: 1 1 auto;
	}

	.quantity input {
		min-height: 2.75rem;
	}

	/* Producttabellen worden op mobiel een lijst: elke regel krijgt zijn label
	   ervoor, in plaats van een tabel die opzij scrolt. */
	.woocommerce table.shop_table,
	.woocommerce table.shop_table tbody,
	.woocommerce table.shop_table tr,
	.woocommerce table.shop_table td {
		display: block;
		width: 100%;
	}

	.woocommerce table.shop_table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.woocommerce table.shop_table tr {
		padding-block: var(--wce-space-3);
		border-bottom: 1px solid var(--wce-color-line);
	}

	.woocommerce table.shop_table td {
		display: flex;
		justify-content: space-between;
		gap: var(--wce-space-3);
		padding: var(--wce-space-1) 0;
		border: none;
		text-align: right;
	}

	.woocommerce table.shop_table td::before {
		content: attr(data-title);
		font-size: var(--wce-text-label);
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--wce-color-ink-soft);
		text-align: left;
	}

	/* De productafbeelding en de verwijderknop hebben geen label nodig. */
	.woocommerce table.shop_table td.product-thumbnail::before,
	.woocommerce table.shop_table td.product-remove::before {
		content: none;
	}

	.woocommerce table.shop_table td.product-thumbnail {
		justify-content: flex-start;
	}

	.woocommerce table.shop_table img {
		width: 5.5rem;
	}

	/* Bestellen en afrekenen: volle breedte, ruim genoeg om te raken. */
	.woocommerce .checkout-button,
	.woocommerce #place_order,
	.single_add_to_cart_button {
		padding-block: 1.2em;
	}

	.woocommerce .cart-collaterals {
		max-width: none;
	}

	/* De bestelling staat op mobiel bovenaan het afrekenscherm, want daar moet
	   je zien wat je koopt voordat je begint met typen. */
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review {
		margin-bottom: var(--wce-space-5);
	}
}

/* Ruimte tussen duimbare elementen op alle kleine schermen. */
@media (max-width: 480px) {
	.swatches {
		gap: var(--wce-space-2);
	}

	.trust__score {
		font-size: 2.8rem;
	}

	.product-story,
	.product-how {
		margin-top: var(--wce-space-5);
		padding-top: var(--wce-space-4);
	}
}


/* Voorkom dat iOS Safari inzoomt zodra je in een veld tikt: dat gebeurt bij
   alles onder 16 pixels, en het verspringen van de layout tijdens het afrekenen
   is precies waar mensen afhaken. */
@media (max-width: 720px) {
	.woocommerce form .form-row input,
	.woocommerce form .form-row textarea,
	.woocommerce form .form-row select,
	.variations select,
	.quantity input {
		font-size: 16px;
	}
}

/* --- Zelf bijwerkende winkelwagen ---
 * De knop blijft in de HTML staan voor wie geen JavaScript heeft; die heeft hem
 * echt nodig. Werkt JavaScript wel, dan verdwijnt hij meteen, nog vóór de
 * eerste render, zodat hij niet even zichtbaar is en dan wegspringt.
 */
html.js [name="update_cart"] {
	display: none;
}

/* Tijdens het bijwerken alleen een lichte demping, geen blokkade: wie tijdens
   die achtste seconde nog een keer op een pijltje klikt, moet dat gewoon
   kunnen. De wachttijd begint dan opnieuw. */
.woocommerce-cart-form.is-bezig {
	opacity: 0.72;
	transition: opacity var(--wce-duur-kort) var(--wce-ease);
}

.woocommerce-cart-form.is-bezig .cart_totals {
	opacity: 0.72;
}

/* --- Meereizende koopknop ---
 * Verschijnt zodra de echte knop uit beeld is. Op een productpagina met een
 * lang verhaal eronder scrollt de bezoeker weg van de enige plek waar hij kan
 * kopen; deze balk lost dat op zonder een tweede knop in beeld te zetten.
 */
.sticky-buy {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	padding-block: var(--wce-space-3);
	background: rgb(241 236 227 / 0.94);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--wce-color-line);
	transform: translateY(100%);
	transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sticky-buy.is-zichtbaar {
	transform: translateY(0);
}

/* Zelfde breedte en marge als de secties erboven, zodat de titel begint waar de
   rest van de pagina ook begint. */
.sticky-buy__inner {
	width: 100%;
	max-width: var(--wce-container);
	margin-inline: auto;
	padding-inline: var(--wce-gutter);
	display: flex;
	align-items: center;
	gap: var(--wce-space-4);
}

.sticky-buy__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15em;
}

.sticky-buy__titel {
	font-family: var(--wce-font-display);
	font-size: var(--wce-text-body);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sticky-buy__prijs {
	font-size: var(--wce-text-small);
	color: var(--wce-color-ink-soft);
}

.sticky-buy__prijs del {
	display: none;
}

.sticky-buy__knop {
	flex: 0 0 auto;
	padding-block: 0.85em;
}

@media (prefers-reduced-motion: reduce) {
	.sticky-buy {
		transition: none;
	}
}

@media (max-width: 560px) {
	.sticky-buy__inner {
		gap: var(--wce-space-3);
	}

	.sticky-buy__titel {
		font-size: var(--wce-text-small);
	}

	.sticky-buy__knop {
		padding-inline: 1.4em;
	}
}

/* Ruimte onderaan de pagina, anders dekt de balk de laatste regels af. */
.single-product .site-footer,
.woocommerce-cart .site-footer {
	padding-bottom: calc(var(--wce-space-6) + 4.5rem);
}

/* --- Afrekenen: voorspelbaar raster ---
 * Alles wat WooCommerce in het formulier zet gaat standaard naar de linkerkolom.
 * Alleen het besteloverzicht staat rechts. Zo kan een extra blok van een plugin
 * of een volgende Woo-versie de indeling niet omgooien.
 */
/* Betaalmethoden: als lijst met ruimte, niet als opsomming met bolletjes. */
.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 var(--wce-space-4);
	padding: 0;
	border: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: var(--wce-space-3) 0;
	border-bottom: 1px solid var(--wce-color-line);
}

.woocommerce-checkout #payment ul.payment_methods li:last-child {
	border-bottom: none;
}

.woocommerce-checkout #payment ul.payment_methods label {
	display: inline-flex;
	align-items: center;
	gap: var(--wce-space-2);
	font-size: var(--wce-text-body);
	text-transform: none;
	letter-spacing: 0;
	color: var(--wce-color-ink);
	cursor: pointer;
}

.woocommerce-checkout #payment .payment_box {
	margin: var(--wce-space-2) 0 0;
	padding: var(--wce-space-3);
	background: var(--wce-color-bg);
	font-size: var(--wce-text-small);
	color: var(--wce-color-ink-soft);
}

.woocommerce-checkout #payment .payment_box p:last-child {
	margin-bottom: 0;
}

.woocommerce-privacy-policy-text {
	font-size: var(--wce-text-small);
	color: var(--wce-color-ink-soft);
}