/*
Theme Name: Letterknus
Theme URI: https://letterknus.nl
Author: Letterknus
Description: Thema voor de Letterknus-webshop, volgens brand guide v1.0: linnen en zand, inkt, poederroze penseelstreek, kleine omlijnde hartjes.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
Version: 0.16.9
License: GNU General Public License v2 or later
Text Domain: letterknus
*/

/* Omlijnd hartje uit de brand guide, als masker zodat het de tekstkleur volgt. */
:root {
	--lk-hart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M20.5 32.5C13 26.5 3.5 19.5 3.2 11.2 3 5.6 7.4 2.4 11.8 3c4.2.6 7 3.9 8.4 8.2 1.3-4.4 4.6-8 9.2-8.3 4.8-.3 8.3 3.4 7.6 8.6-1 7.6-9.4 14.2-16.5 21z' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Logo: woordmerk in Sacramento, hartje rechtsboven, tagline eronder ---------- */
.lk-logo {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	color: var(--wp--preset--color--inkt);
	text-decoration: none !important;
	font-size: 16px;
	line-height: 1;
}
.lk-logo-woord {
	position: relative;
	font-family: var(--wp--preset--font-family--handschrift);
	font-size: 3.4em;
	line-height: 1;
	padding: 0 0.42em 0 0.05em;
	-webkit-text-stroke: 0.012em currentColor;
	white-space: nowrap;
}
.lk-logo-woord::after,
.lk-logo-hart {
	content: "";
	display: block;
	background: currentColor;
	-webkit-mask: var(--lk-hart) center / contain no-repeat;
	mask: var(--lk-hart) center / contain no-repeat;
}
.lk-logo-woord::after {
	position: absolute;
	right: 0.02em;
	top: 0.02em;
	width: 0.4em;
	height: 0.36em;
}
.lk-logo-tag {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	text-transform: uppercase;
	font-size: 0.6em;
	letter-spacing: 0.42em;
	padding-left: 0.42em;
	margin-top: 0.3em;
	white-space: nowrap;
}
.lk-logo-hart {
	width: 0.9em;
	height: 0.8em;
	margin-top: 0.7em;
}
/* Compact: zonder tagline en onderste hartje (header). */
.lk-logo.is-compact .lk-logo-tag,
.lk-logo.is-compact .lk-logo-hart {
	display: none;
}
.lk-logo.is-compact {
	font-size: clamp(13px, 1.6vw, 15px);
}

/* ---------- Script-kop op een poederroze penseelstreek ---------- */
.is-style-penseel {
	width: fit-content;
	padding: 0.12em 1em 0.28em;
	font-family: var(--wp--preset--font-family--handschrift) !important;
	font-weight: 400 !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-5%25' y='-30%25' width='110%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.35' numOctaves='3' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='18' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='14' y='18' width='372' height='64' rx='10' fill='%23E7B9A1' fill-opacity='.85' filter='url(%23b)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.is-style-penseel.has-text-align-center {
	margin-inline: auto;
}

/* ---------- Korte Terra-lijn als rustige afsluiter ---------- */
hr.is-style-stiklijn {
	border: 0 !important;
	border-top: 1.5px solid var(--wp--preset--color--terra) !important;
	max-width: 160px !important;
	margin-inline: auto !important;
	background: none !important;
	opacity: 1 !important;
}

/* ---------- Informatiekaart ---------- */
.is-style-kaartje {
	background: var(--wp--preset--color--kaart);
	border-radius: 16px 18px 15px 17px / 17px 15px 18px 16px;
	box-shadow: 0 10px 28px -20px rgba(60, 40, 30, 0.35);
}

/* ---------- Stapnummer op een organische cirkel ---------- */
.lk-nummer {
	display: grid;
	place-items: center;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 48% 52% 50% 50% / 55% 45% 55% 45%;
	background: var(--wp--preset--color--terra);
	/* Inkt in plaats van wit: wit op Terra of Salie is te slecht leesbaar (2,7:1). Zie beslissingen.md. */
	color: var(--wp--preset--color--inkt);
	font-family: var(--wp--preset--font-family--schreef);
	font-weight: 400;
	font-size: 1.35rem;
	margin: 0 auto;
}
.lk-nummer.is-salie {
	background: var(--wp--preset--color--salie);
}

/* ---------- Klein omlijnd hartje na een kop ---------- */
.lk-hartje::after {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.45em;
	margin-left: 0.2em;
	background: var(--wp--preset--color--terra);
	-webkit-mask: var(--lk-hart) center / contain no-repeat;
	mask: var(--lk-hart) center / contain no-repeat;
	vertical-align: 0.25em;
}
h1.lk-hartje::after {
	width: 0.3em;
	height: 0.27em;
	vertical-align: 0.45em;
}
/* Sacramento heeft hoge regelmaten; strakker zetten zodat een kop over twee regels één geheel blijft. */
h1.wp-block-heading {
	line-height: 1 !important;
	text-wrap: balance;
}

/* ---------- Label in Montserrat-hoofdletters ---------- */
.lk-label-caps {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 500;
	font-size: 0.75rem;
	letter-spacing: 0.35em;
	text-transform: uppercase;
}

/* ---------- Sfeerfoto in de hero van de homepage ---------- */
.lk-sfeerfoto {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: 18px;
	background: var(--wp--preset--color--zand);
}
/* Op mobiel de foto boven de kop, zodat hij meteen in beeld is (anders kwam hij pas na een heel scherm tekst). */
@media (max-width: 781px) {
	.lk-hero.lk-hero { padding-top: var(--wp--preset--spacing--30) !important; }
	.lk-hero > .wp-block-columns > .wp-block-column:last-child { order: -1; }
}

/* ---------- Afbeeldingen zacht afgerond ---------- */
.wp-block-image.is-style-zacht img,
.wp-block-post-featured-image img {
	border-radius: 16px;
}

/* ---------- Secundaire knop: transparant met dunne Inkt-rand ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--inkt) !important;
	border: 1px solid var(--wp--preset--color--inkt) !important;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--inkt) !important;
	color: #fff !important;
}

/* ---------- WooCommerce: knoppen en prijzen in huisstijl ---------- */
.wc-block-components-button:not(.is-link),
.single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button {
	background: var(--wp--preset--color--kaneel) !important;
	color: #fff !important;
	border-radius: 999px !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-weight: 500 !important;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-size: 0.75rem !important;
	padding: 0.95em 2em !important;
	border: 0 !important;
}
.wc-block-components-button:not(.is-link):not(:disabled):hover,
.single_add_to_cart_button:not(:disabled):hover {
	background: var(--wp--preset--color--inkt) !important;
}
.woocommerce-Price-amount {
	font-family: var(--wp--preset--font-family--schreef);
	font-weight: 600;
}
.wc-block-components-product-sale-badge,
.onsale {
	background: var(--wp--preset--color--terra) !important;
	color: #fff !important;
	border: 0 !important;
}

/*
 * Dichte winkelwagenlade: WooCommerce maakt hem alleen doorzichtig (opacity 0), dus met Tab kwam je op
 * de onzichtbare sluitknop en links. visibility: hidden haalt hem uit de tabvolgorde en voor schermlezers
 * weg; pas na de uitfade van 0,3 s, zodat het dichtschuiven zichtbaar blijft.
 */
.wc-block-components-drawer__screen-overlay.wc-block-components-drawer__screen-overlay--is-hidden {
	visibility: hidden;
	transition: opacity 0.3s, visibility 0s linear 0.3s;
}

/*
 * Sluitknop van de lade: kreeg de knopstijl van het thema (pil met veel padding) en stak daardoor op de
 * telefoon tegen of over de rechterrand. Nu een rond knopje van 44 px, binnen de lade; kleur en hover komen
 * van de gewone knopstijl hierboven (padding staat daar met !important, vandaar hier ook).
 */
.wc-block-components-drawer .wc-block-components-drawer__close.wp-element-button {
	top: 12px;
	right: 12px;
	margin: 0; /* WooCommerce zet -12px, dan valt hij tegen de rand. */
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	min-width: 0;
	padding: 0 !important;
	border-radius: 50%;
}
.wc-block-components-drawer .wc-block-components-drawer__close svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* ---------- Header ---------- */
.lk-header {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--zand) 80%, var(--wp--preset--color--inkt) 8%);
}

/* Taalknop NL | EN: altijd zichtbaar naast het menu, ook op mobiel. */
.lk-taalkeuze ul {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.lk-taalkeuze li + li {
	border-left: 1px solid var(--wp--preset--color--terra);
}
.lk-taalkeuze a,
.lk-taalkeuze .is-actief {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.15rem 0 0.45rem; /* De letterspatiëring staat rechts; links evenveel ruimte. */
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	line-height: 1;
}
.lk-taalkeuze a {
	color: var(--wp--preset--color--kaneel-donker);
	text-decoration: none;
}
.lk-taalkeuze a:hover {
	color: var(--wp--preset--color--inkt);
	text-decoration: underline;
	text-underline-offset: 0.4em;
}
.lk-taalkeuze .is-actief {
	color: var(--wp--preset--color--inkt);
}
.lk-taalkeuze .is-actief abbr {
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--terra);
	padding-bottom: 0.2em;
}
/* Smalle telefoons: logo, menu, account, taal en winkelwagen moeten naast elkaar passen. */
@media (max-width: 480px) {
	.lk-header .wp-block-group:has(> .lk-taalkeuze) {
		gap: 0.3rem;
	}
	.lk-taalkeuze a,
	.lk-taalkeuze .is-actief {
		min-width: 2.25rem;
		padding: 0 0.05rem 0 0.25rem;
		letter-spacing: 0.2em;
	}
}
@media (max-width: 400px) {
	.lk-header .lk-logo.is-compact {
		font-size: 11.5px;
	}
}

/* In winkelwagen, afrekenen en bevestiging zijn h2's kleine tussenkoppen: Lora in plaats van script. */
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-checkout h2,
.wc-block-components-title.wc-block-components-title,
[class*="wp-block-woocommerce-order-confirmation"] h2,
.woocommerce-order h2,
.woocommerce-MyAccount-content h2 {
	font-family: var(--wp--preset--font-family--schreef) !important;
	font-size: 1.15rem !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
}

/* ---------- Browserdetails in de huisstijl ---------- */
::selection {
	background: var(--wp--preset--color--poeder);
	color: var(--wp--preset--color--inkt);
}
:root {
	caret-color: var(--wp--preset--color--kaneel);
	accent-color: var(--wp--preset--color--kaneel);
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--kaneel);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Productfoto-plaatshouder in de huisstijl (tot er echte foto's zijn) ---------- */
img.woocommerce-placeholder,
img[src*="lk-plaatshouder"] {
	border-radius: 18px;
	background: var(--wp--preset--color--zand);
}

/* ---------- Productpagina ---------- */
.lk-product-titel {
	margin-top: 0 !important;
}
.lk-product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}
/* Zonder echte productfoto staat de samensteller op mobiel bovenaan: de plaatshouder voegt daar niets toe. */
@media (max-width: 781px) {
	.lk-product .lk-galerij:has(img.woocommerce-placeholder, img[src*="lk-plaatshouder"]) {
		display: none;
	}
}

/*
 * ---------- Productgalerij ----------
 * De galerij van WooCommerce (slider, zoom, vergroten). Zonder deze regels verspringt de pagina als de slider
 * start: tot dan staan alle foto's onder elkaar (onzichtbaar, maar ze nemen wel ruimte in) en de miniaturen komen
 * er pas daarna bij. Daarom tonen we de hoofdfoto meteen en houden we de plek van de miniaturen alvast vrij, in
 * precies de maat die de slider straks gebruikt. Desktop: hoofdfoto in zijn eigen verhouding, daaronder vier
 * miniaturen per rij (zoals WooCommerce). Mobiel: hoofdfoto vierkant en de miniaturen in één rij om te vegen.
 */

/* WooCommerce zet de galerij op onzichtbaar tot zijn script klaar is; dan telt de foto pas laat als "geladen". */
.lk-product .lk-galerij .woocommerce-product-gallery {
	opacity: 1 !important;
	transition: none !important;
}
.lk-product .lk-galerij .woocommerce-product-gallery {
	container-type: inline-size;
}
/*
 * Vóór de slider start: alleen de hoofdfoto, op de breedte van de galerij. De slider maakt de strook met foto's
 * meteen veel breder dan het scherm, maar geeft elke foto pas 100 ms later zijn eigen breedte (dan staat er
 * "float" in het style-attribuut). Zonder deze regel is de hoofdfoto in die tussentijd vele malen te groot.
 */
.lk-product .lk-galerij .woocommerce-product-gallery.images .woocommerce-product-gallery__image:not([style*="float"]) {
	width: 100cqw;
}
.lk-product .lk-galerij .woocommerce-product-gallery.images .woocommerce-product-gallery__image:not([style*="float"]):nth-child(n+2) {
	display: none;
}
/* Miniaturen: vierkant, ook als het plaatje nog niet binnen is. */
.lk-product .lk-galerij .woocommerce-product-gallery.images .flex-control-thumbs li img {
	aspect-ratio: 1;
	object-fit: cover;
}
/*
 * Plek voor de miniaturen zolang de slider ze nog niet getekend heeft: vier per rij, dus een vlak van 4 breed en
 * (aantal foto's / 4, naar boven afgerond) hoog. Bij één foto zijn er geen miniaturen.
 */
.lk-product .lk-galerij .woocommerce-product-gallery:has(.woocommerce-product-gallery__image:nth-child(2)):not(:has(.flex-control-thumbs))::after {
	content: "";
	display: block;
	aspect-ratio: 4 / var(--lk-duim-rijen, 1);
}
.lk-product .lk-galerij .woocommerce-product-gallery:has(.woocommerce-product-gallery__image:nth-child(5)) {
	--lk-duim-rijen: 2;
}
.lk-product .lk-galerij .woocommerce-product-gallery:has(.woocommerce-product-gallery__image:nth-child(9)) {
	--lk-duim-rijen: 3;
}
.lk-product .lk-galerij .woocommerce-product-gallery:has(.woocommerce-product-gallery__image:nth-child(13)) {
	--lk-duim-rijen: 4;
}

@media (max-width: 781px) {
	/* Vierkant in plaats van staand: de samensteller komt zo een flink stuk hoger. Elke foto even hoog, dus de
	   slider springt niet als je naar een foto met een andere verhouding veegt. */
	.lk-product .lk-galerij .woocommerce-product-gallery__image img {
		aspect-ratio: 1;
		object-fit: cover;
	}
	/* Miniaturen in één rij van vaste maat; passen ze er niet allemaal op, dan veeg je de rij opzij. */
	.lk-product .lk-galerij .woocommerce-product-gallery.images .flex-control-thumbs {
		display: flex;
		gap: 0.5rem;
		margin-top: 0.5rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	.lk-product .lk-galerij .woocommerce-product-gallery.images .flex-control-thumbs::-webkit-scrollbar {
		display: none;
	}
	.lk-product .lk-galerij .woocommerce-product-gallery.images .flex-control-thumbs li {
		flex: 0 0 4rem;
		width: 4rem;
		height: 4rem;
		float: none;
	}
	.lk-product .lk-galerij .woocommerce-product-gallery.images .flex-control-thumbs li img {
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}
	.lk-product .lk-galerij .woocommerce-product-gallery:has(.woocommerce-product-gallery__image:nth-child(2)):not(:has(.flex-control-thumbs))::after {
		aspect-ratio: auto;
		height: 4.5rem;
	}
}

/* ---------- Winkel: productkaart ---------- */
.lk-winkel .wc-block-components-product-image img,
.lk-winkel .wc-block-grid__product-image img {
	border-radius: 18px;
}
/* De knoppen van alle kaarten op één lijn, ook als er bij één product een extra prijsregel staat (speenkoord). */
.lk-winkel .wc-block-product-template > .wc-block-product {
	display: flex;
	flex-direction: column;
}
.lk-winkel .wc-block-product-template > .wc-block-product > .wp-block-woocommerce-product-button {
	margin-top: auto;
}

/* ---------- Lege winkelwagen ---------- */
.lk-leeg-wagen {
	text-align: center;
	padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--50);
	display: grid;
	justify-items: center;
	gap: 1.25rem;
}
.lk-leeg-wagen p {
	margin: 0;
	max-width: 32rem;
}

/*
 * Eén of twee producten: in het midden in plaats van links met lege ruimte ernaast. Het responsieve raster van
 * WooCommerce vult anders altijd drie kolommen (auto-fill); met auto-fit en een vaste maximale breedte blijven
 * lege kolommen weg. Op een smal scherm is een kaart de volle breedte.
 */
.lk-winkel .wc-block-product-template {
	justify-content: center;
}
.lk-winkel .wc-block-product-template__responsive {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 300px));
	row-gap: var(--wp--preset--spacing--50);
}

/*
 * ---------- Klassieke winkelwagen en kassa ----------
 * Sinds oktober 2026 de klassieke WooCommerce-versie (zie functions.php). Wat hier staat, past de standaardstijl
 * van WooCommerce (woocommerce.css, -layout, -smallscreen tot 768 px) aan op de huisstijl.
 */
.woocommerce-cart main .woocommerce,
.woocommerce-checkout main .woocommerce {
	margin-top: var(--wp--preset--spacing--40);
}

/*
 * Meldingen (waardebon, fouten, "verwijderd"): in een blokthema gebruikt WooCommerce ook in de klassieke
 * winkelwagen de meldingsbanners van de blokken. Kaartje met een Terra-lijn in plaats van blauw/rood/groen.
 */
/* Dubbele klasse + :root: de stijl van WooCommerce (.is-info e.d.) is specifieker. */
:root .wc-block-components-notice-banner.wc-block-components-notice-banner {
	background: var(--wp--preset--color--kaart);
	color: var(--wp--preset--color--inkt);
	border: 0;
	border-left: 3px solid var(--wp--preset--color--terra);
	border-radius: 0 12px 12px 0;
	font-size: 1rem;
	line-height: 1.6;
}
:root .wc-block-components-notice-banner.wc-block-components-notice-banner.is-error {
	border: 0;
	border-left: 3px solid var(--wp--preset--color--kaneel-donker);
}
:root .wc-block-components-notice-banner.wc-block-components-notice-banner > svg {
	background: var(--wp--preset--color--kaneel-donker);
	fill: #fff;
}
.wc-block-components-notice-banner .button.wc-forward {
	padding: 0.6em 1.3em !important;
}

/* Tussenkoppen (Totalen winkelwagen, Factuurgegevens, Je bestelling): Lora, niet het script. */
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout main .woocommerce h3 {
	font-family: var(--wp--preset--font-family--schreef);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 1rem;
}

/* Tabellen: rustige kaart met dunne lijnen. */
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
	background: var(--wp--preset--color--kaart);
	border: 0;
	border-radius: 16px;
	border-collapse: separate;
	overflow: hidden;
	width: 100%;
	margin: 0;
}
.woocommerce-cart table.shop_table :is(th, td),
.woocommerce-checkout table.shop_table :is(th, td) {
	border-top: 1px solid var(--wp--preset--color--zand);
	padding: 1rem 1.25rem;
	vertical-align: top;
	line-height: 1.6;
}
.woocommerce-cart table.shop_table thead th,
.woocommerce-checkout table.shop_table thead th {
	border-top: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grijs);
}
.woocommerce-cart table.shop_table tr:first-child > :is(th, td),
.woocommerce-checkout table.shop_table tr:first-child > :is(th, td) {
	border-top: 0;
}
.woocommerce-cart table.shop_table thead + tbody tr:first-child > :is(th, td),
.woocommerce-checkout table.shop_table thead + tbody tr:first-child > :is(th, td) {
	border-top: 1px solid var(--wp--preset--color--zand);
}
.woocommerce-cart table.shop_table .order-total :is(th, td),
.woocommerce-checkout table.shop_table .order-total :is(th, td) {
	font-size: 1.1rem;
}
.woocommerce-cart table.shop_table .order-total .woocommerce-Price-amount,
.woocommerce-checkout table.shop_table .order-total .woocommerce-Price-amount {
	font-size: 1.2rem;
}

/* Gekozen naam, letters en stofjes onder de slinger. */
.woocommerce-cart dl.variation,
.woocommerce-checkout dl.variation {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0.15rem 0.6rem;
	margin: 0.6rem 0 0;
	font-size: 0.95rem;
	font-weight: 400;
}
.woocommerce-cart dl.variation :is(dt, dd),
.woocommerce-checkout dl.variation :is(dt, dd) {
	float: none;
	margin: 0;
	padding: 0;
	text-align: left;
}
.woocommerce-cart dl.variation dt,
.woocommerce-checkout dl.variation dt {
	color: var(--wp--preset--color--grijs);
	font-weight: 400;
}
.woocommerce-cart dl.variation dd p,
.woocommerce-checkout dl.variation dd p {
	margin: 0;
}

/* ----- Winkelwagen ----- */
/* Elke slinger is één stuk maatwerk: prijs en aantal zeggen hetzelfde als het subtotaal. */
.woocommerce-cart table.cart :is(.product-price, .product-quantity) {
	display: none;
}
.woocommerce-cart table.cart td {
	vertical-align: middle;
}
.woocommerce-cart table.cart .product-name > a {
	font-weight: 600;
	color: var(--wp--preset--color--inkt);
}
.woocommerce-cart table.cart .product-subtotal {
	text-align: right;
	white-space: nowrap;
}
.woocommerce-cart table.cart th.product-subtotal {
	text-align: right;
}
.woocommerce-cart table.cart img {
	width: 88px;
	border-radius: 12px;
}
/* Verwijderen: rond knopje van 44 px, Kaneel in plaats van rood. */
.woocommerce-cart table.cart td.product-remove {
	width: 44px;
	padding-right: 0;
}
.woocommerce .woocommerce-cart-form a.remove {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--kaneel-donker) !important;
	text-decoration: none;
}
.woocommerce .woocommerce-cart-form a.remove:hover {
	background: var(--wp--preset--color--zand);
	color: var(--wp--preset--color--inkt) !important;
}
/* Onderste regel: waardebon. "Winkelwagen bijwerken" is niet nodig, aantallen kunnen niet veranderen. */
.woocommerce-cart table.cart td.actions {
	padding: 1rem 1.25rem;
	background: color-mix(in srgb, var(--wp--preset--color--kaart) 60%, var(--wp--preset--color--linnen));
}
.woocommerce-cart table.cart td.actions button[name="update_cart"] {
	display: none;
}
.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}
.woocommerce-cart table.cart td.actions .coupon .input-text {
	width: 14rem;
	margin: 0;
}
.woocommerce-cart table.cart td.actions .coupon .button {
	background: transparent !important;
	color: var(--wp--preset--color--inkt) !important;
	border: 1px solid var(--wp--preset--color--inkt) !important;
}
.woocommerce-cart table.cart td.actions .coupon .button:hover {
	background: var(--wp--preset--color--inkt) !important;
	color: #fff !important;
}
.woocommerce-cart .cart-collaterals {
	margin-top: var(--wp--preset--spacing--40);
}
.woocommerce-cart .cart-collaterals .cart_totals {
	width: min(100%, 26rem);
}
.woocommerce-cart .cart_totals table.shop_table th {
	width: 40%;
	font-weight: 400;
}
.woocommerce-cart .cart_totals td {
	text-align: right;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination:empty {
	display: none;
}
.woocommerce-cart .wc-proceed-to-checkout {
	padding: 1.25rem 0 0;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	margin: 0;
	font-size: 0.8rem !important;
	padding: 1.15em 2em !important;
}

/* Lege winkelwagen: tekst in .lk-leeg-wagen (hierboven), knop eronder. */
.woocommerce-cart .wc-empty-cart-message .lk-leeg-wagen {
	padding-bottom: 0;
}
.woocommerce-cart .return-to-shop {
	margin: 1.5rem 0 var(--wp--preset--spacing--40);
	text-align: center;
}

/* ----- Kassa ----- */
.woocommerce-checkout form.checkout {
	margin-top: 1.5rem;
}
.woocommerce form .form-row {
	padding: 0;
	margin: 0 0 1.1rem;
}
.woocommerce form .form-row label {
	font-size: 0.95rem;
	line-height: 1.5;
	margin-bottom: 0.3rem;
}
.woocommerce form .form-row .required {
	color: var(--wp--preset--color--kaneel-donker);
	text-decoration: none;
	border: 0;
}
.woocommerce form .form-row .optional {
	color: var(--wp--preset--color--grijs);
}
/* Adres via postcode en huisnummer (plugin, assets/adres.js). */
.woocommerce form .form-row.lk-verborgen {
	display: none;
}
.woocommerce form .lk-adres-melding {
	font-size: 0.95rem;
	min-height: 1.5em;
}
.lk-adres-knop {
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}
/* Invoervelden: Kaart-vlak met een rand die genoeg afsteekt (Grijs, contrast > 3:1). */
.woocommerce form .form-row :is(input.input-text, textarea, select),
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce form .form-row .select2-container .select2-selection--single,
.woocommerce form.checkout_coupon .input-text {
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	background: var(--wp--preset--color--kaart);
	color: var(--wp--preset--color--inkt);
	border: 1px solid var(--wp--preset--color--grijs);
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--schreef);
	font-size: 1rem;
	line-height: 1.4;
	box-shadow: none;
}
.woocommerce form .form-row textarea {
	min-height: 7rem;
}
.woocommerce form .form-row .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	padding: 0 0.9rem;
}
.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0;
	color: var(--wp--preset--color--inkt);
	line-height: 1.4;
}
.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__arrow {
	height: 100%;
	right: 0.6rem;
}
:is(.woocommerce form .form-row, .woocommerce-cart table.cart td.actions .coupon, .woocommerce form.checkout_coupon) :is(input.input-text, textarea, select):focus,
.woocommerce form .form-row .select2-container--focus .select2-selection--single,
.woocommerce form .form-row .select2-container--open .select2-selection--single {
	outline: 2px solid var(--wp--preset--color--kaneel);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--kaneel);
}
.select2-dropdown {
	background: var(--wp--preset--color--kaart);
	border-color: var(--wp--preset--color--grijs);
	font-family: var(--wp--preset--font-family--schreef);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--wp--preset--color--kaneel);
	color: #fff;
}
.woocommerce form .form-row.woocommerce-invalid :is(input.input-text, select),
.woocommerce form .form-row.woocommerce-invalid .select2-selection {
	border-color: var(--wp--preset--color--kaneel-donker);
	border-width: 2px;
}
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
	width: 1.15rem;
	height: 1.15rem;
	vertical-align: -0.15em;
	margin-right: 0.4rem;
}
#ship-to-different-address label {
	font-size: 1.15rem;
	font-weight: 600;
	cursor: pointer;
}
.woocommerce-checkout #customer_details :is(.col-1, .col-2) {
	float: none;
	width: auto;
}
.woocommerce-checkout #customer_details .col-2 {
	margin-top: 1rem;
}
.woocommerce form.checkout_coupon {
	border: 1px dashed var(--wp--preset--color--terra);
	border-radius: 16px;
	padding: 1.25rem;
}

/* Overzicht: rechts naast de gegevens vanaf tabletbreedte (boven 768 px stopt de smallscreen-stijl). */
@media (min-width: 900px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: var(--wp--preset--spacing--50);
		align-items: start;
	}
	.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup {
		grid-column: 1 / -1;
	}
	.woocommerce-checkout #customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	.woocommerce-checkout #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}
	.woocommerce-checkout #order_review {
		grid-column: 2;
		grid-row: 2;
		position: sticky;
		top: 1.5rem;
	}
	.woocommerce-cart .cart-collaterals .cart_totals {
		float: right;
	}
}
.woocommerce-checkout #order_review_heading {
	margin-top: var(--wp--preset--spacing--40);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout table.woocommerce-checkout-review-order-table th:last-child {
	text-align: right;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th {
	font-weight: 400;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name {
	font-weight: 600;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity {
	font-weight: 400;
	color: var(--wp--preset--color--grijs);
}
.woocommerce-checkout .woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Betalen en bestellen. */
.woocommerce-checkout #payment {
	margin-top: 1.25rem;
	background: var(--wp--preset--color--kaart);
	border-radius: 16px;
}
.woocommerce-checkout #payment ul.payment_methods {
	padding: 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--zand);
}
.woocommerce-checkout #payment div.payment_box {
	background: var(--wp--preset--color--zand);
	color: var(--wp--preset--color--inkt);
	border-radius: 12px;
	font-size: 0.95rem;
}
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--wp--preset--color--zand);
}
.woocommerce-checkout #payment div.form-row {
	padding: 1.25rem;
	margin: 0;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper p {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	line-height: 1.6;
}
.woocommerce-checkout .lk-kassa-maatwerk {
	color: var(--wp--preset--color--inkt);
}
/* Vrijwillige vinkjes: mag Sabrena een foto van de bestelling delen, en de nieuwsbrief. */
.woocommerce-checkout :is(.lk-kassa-foto, .lk-kassa-vinkje) label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	cursor: pointer;
}
.woocommerce-checkout :is(.lk-kassa-foto, .lk-kassa-vinkje) input {
	flex: none;
	margin-top: 0.3rem;
}
.woocommerce-checkout :is(.lk-kassa-foto, .lk-kassa-vinkje) small {
	display: block;
	color: var(--wp--preset--color--grijs);
}
.woocommerce-checkout #payment #place_order {
	float: none;
	width: 100%;
	margin: 0.5rem 0 0;
	font-size: 0.8rem !important;
	padding: 1.15em 2em !important;
}
.woocommerce-checkout #payment #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart td.actions .coupon .button:hover {
	background: var(--wp--preset--color--inkt) !important;
}

/* Telefoon (tot 768 px): WooCommerce maakt van elke tabelrij een blok met labels; die rustiger. */
@media (max-width: 768px) {
	.woocommerce-cart table.cart tr.cart_item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		padding: 0.75rem 0.75rem 0.75rem 1.25rem;
		border-top: 1px solid var(--wp--preset--color--zand);
	}
	.woocommerce-cart table.cart tr.cart_item:first-child {
		border-top: 0;
	}
	.woocommerce-cart table.cart tr.cart_item > td {
		border: 0 !important;
		padding: 0;
		background: none !important;
		text-align: left !important;
	}
	.woocommerce-cart table.cart tr.cart_item > td::before {
		display: none;
	}
	.woocommerce-cart table.cart td.product-remove {
		grid-column: 2;
		grid-row: 1 / span 2;
		width: auto;
	}
	.woocommerce-cart table.cart td.product-name {
		grid-column: 1;
		grid-row: 1;
		padding-top: 0.6rem !important;
	}
	.woocommerce-cart table.cart td.product-subtotal {
		grid-column: 1;
		grid-row: 2;
		padding: 0.6rem 0 0.4rem !important;
		font-size: 1.1rem;
	}
	.woocommerce-cart table.cart td.actions .coupon {
		flex-direction: column;
		align-items: stretch;
	}
	.woocommerce-cart table.cart td.actions .coupon :is(.input-text, .button) {
		width: 100% !important;
		float: none !important;
	}
	.woocommerce-cart table.shop_table_responsive tr:nth-child(2n) td {
		background: none;
	}
	.woocommerce-cart .cart_totals table.shop_table th {
		display: table-cell;
	}
	.woocommerce-cart .cart_totals table.shop_table_responsive tr td::before {
		display: none;
	}
	.woocommerce-cart .cart_totals table.shop_table_responsive tr {
		display: table-row;
	}
	.woocommerce-cart .cart_totals table.shop_table_responsive td {
		display: table-cell;
	}
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		float: none;
		width: 100%;
	}
}
@media (max-width: 899px) {
	.woocommerce-cart .cart-collaterals .cart_totals {
		width: 100%;
	}
}

/* Speenkoord: de prijs met geborduurde naam op een eigen regel onder de gewone prijs (shop en productpagina). */
.lk-met-naam {
	display: block;
	font-size: max(0.55em, 0.8rem);
	font-weight: 400;
	color: var(--wp--preset--color--kaneel-donker);
}

/* ---------- Wettelijke garantie (EU-melding) en productveiligheid ---------- */
.lk-garantie {
	margin: 1.25rem 0 0;
	font-family: var(--wp--preset--font-family--schreef);
	font-size: 0.95rem;
}
.lk-garantie summary {
	display: inline-block;
	color: var(--wp--preset--color--kaneel-donker);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}
.lk-garantie summary::marker,
.lk-garantie summary::-webkit-details-marker {
	display: none;
	content: "";
}
.lk-garantie summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--kaneel);
	outline-offset: 3px;
	border-radius: 4px;
}
/* De melding zelf: het officiële bestand, op ware grootte en onbewerkt (geen rand, filter of bijsnijden). */
.lk-garantie-melding {
	display: block;
	max-width: 595px;
	margin-top: 0.75rem;
}
.lk-garantie-melding img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
	box-shadow: none;
	filter: none;
}
.lk-garantie p {
	margin: 0.5rem 0 0;
}
/* Productveiligheid klapt uit net als de garantierechten (21-10-2026, op verzoek van Sabrena). */
.lk-veiligheid {
	margin-top: 0.75rem;
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--kaart);
	border-radius: 16px;
	font-family: var(--wp--preset--font-family--schreef);
	font-size: 0.95rem;
	line-height: 1.6;
}
.lk-veiligheid-let-op {
	margin: 0 0 0.75rem;
}
.lk-veiligheid dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.25rem 1rem;
	margin: 0;
}
.lk-veiligheid dt {
	font-weight: 600;
}
.lk-veiligheid dd {
	margin: 0;
	color: var(--wp--preset--color--grijs);
}
.lk-veiligheid a {
	color: var(--wp--preset--color--kaneel-donker);
}
@media (max-width: 480px) {
	.lk-veiligheid dl { grid-template-columns: 1fr; }
	.lk-veiligheid dd { margin-bottom: 0.5rem; }
}

/* Bedankpagina: de bedankcode als informatiekaartje. */
.lk-bedankcode {
	margin: var(--wp--preset--spacing--40, 2rem) 0;
	padding: 1.1rem 1.4rem;
	background: var(--wp--preset--color--kaart, #FBF3EA);
	border-radius: 16px;
	border-left: 2px solid var(--wp--preset--color--terra, #CE9175);
}
.lk-bedankcode p {
	margin: 0 0 0.4rem;
}
.lk-bedankcode .lk-bedankcode-kop {
	font-weight: 600;
}
.lk-bedankcode .lk-bedankcode-klein {
	margin: 0;
	font-size: 0.9rem;
	color: var(--wp--preset--color--grijs, #6B625C);
}

/* ---------- Herroepen (pagina met herroepingsfunctie en modelformulier) ---------- */
.lk-herroepen {
	max-width: 40rem;
	margin-inline: auto;
}
.lk-herroep-functie {
	margin: 2rem 0;
	padding: 1.5rem;
	background: var(--wp--preset--color--kaart);
	border-radius: 16px;
}
.lk-herroep-functie h2 {
	margin-top: 0;
	font-family: var(--wp--preset--font-family--schreef);
	font-size: 1.3rem;
	font-weight: 600;
}
.lk-herroep-formulier label {
	display: block;
	font-weight: 600;
}
.lk-herroep-formulier input[type="text"],
.lk-herroep-formulier input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	margin-top: 0.3rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--grijs);
	border-radius: 10px;
	font: inherit;
	background: #fff;
}
.lk-herroep-formulier small {
	display: block;
	color: var(--wp--preset--color--grijs);
}
.lk-herroep-formulier fieldset {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}
.lk-herroep-formulier legend {
	margin-bottom: 0.5rem;
	font-weight: 600;
}
.lk-herroep-item {
	display: block;
	margin: 0.3rem 0;
	font-weight: 400 !important;
}
.lk-herroep-item.is-maatwerk {
	color: var(--wp--preset--color--grijs);
}
.lk-herroep-fout {
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--wp--preset--color--kaneel);
	background: var(--wp--preset--color--linnen);
}
.lk-herroep-honing {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.lk-herroep-samenvatting {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.25rem 1rem;
}
.lk-herroep-samenvatting dt {
	font-weight: 600;
}
.lk-herroep-samenvatting dd {
	margin: 0;
}
.lk-modelformulier {
	padding: 1.25rem 1.5rem;
	border: 1px dashed var(--wp--preset--color--grijs);
	border-radius: 12px;
}
.lk-modelformulier h3 {
	margin-top: 0;
}
@media (max-width: 480px) {
	.lk-herroep-samenvatting { grid-template-columns: 1fr; }
}

/* ---------- Productpagina: vertrouwensregels onder de bestelknop ---------- */
.lk-vertrouwen {
	flex-basis: 100%;
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.45rem;
	font-size: 0.95rem;
	color: var(--wp--preset--color--inkt);
}
.lk-vertrouwen li { display: flex; align-items: center; gap: 0.7rem; margin: 0; }
.lk-vertrouwen svg {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--wp--preset--color--kaneel-donker);
}

/* ---------- Winkelwagenlade: geen productbeschrijving, elke keuze op een eigen regel ---------- */
.wc-block-mini-cart__drawer .wc-block-components-product-metadata__description { display: none; }
.wc-block-mini-cart__drawer .wc-block-components-product-details > span { display: block; }
.wc-block-mini-cart__drawer .wc-block-components-product-details > span > [aria-hidden="true"] { display: none; }
.wc-block-mini-cart__drawer .wc-block-components-product-details {
	font-size: 0.875rem;
	line-height: 1.5;
}
.wc-block-mini-cart__drawer .wc-block-components-product-details__name { color: var(--wp--preset--color--grijs); }
/* Een stofjesregel is één lang "woord" (zie lk_stoffen_kort): bij een lange stofjesnaam toch afbreken. */
.wc-block-mini-cart__drawer .wc-block-components-product-details__value { overflow-wrap: anywhere; }
/* Stofjes met meerdere groepen letters (één regel per groep): onder het kopje, netjes onder elkaar. */
.wc-block-mini-cart__drawer .wc-block-components-product-details__value:has(br) { display: block; padding-left: 0.75rem; }

/* ---------- Kassa: rustige header (geen menu, taalkeuze of winkelwagenlade) ---------- */
.lk-terug-wagen {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--inkt);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}
.lk-terug-wagen:hover { color: var(--wp--preset--color--kaneel-donker); }
.lk-terug-kort { display: none; }
@media (max-width: 600px) {
	.lk-terug-lang { display: none; }
	.lk-terug-kort { display: inline; }
}

/* ---------- Kassa op mobiel en tablet: "Je bestelling · totaal" bovenaan, inklapbaar ---------- */
.lk-kassa-samenvatting {
	margin: 0 0 var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--kaart);
	border-radius: 14px;
	box-shadow: 0 10px 28px -22px rgba(60, 40, 30, 0.4);
}
.lk-kassa-samenvatting summary {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.9rem 1.1rem;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
}
.lk-kassa-samenvatting summary::-webkit-details-marker { display: none; }
.lk-kassa-samenvatting summary::after {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	margin-left: 0.2rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
	transition: transform 0.2s;
}
.lk-kassa-samenvatting[open] summary::after { transform: translateY(25%) rotate(-135deg); }
.lk-ks-kop { flex: 1; }
.lk-ks-totaal { font-family: var(--wp--preset--font-family--schreef); }
.lk-ks-inhoud { padding: 0 1.1rem 1rem; }
.lk-ks-producten { list-style: none; margin: 0; padding: 0; }
.lk-ks-producten li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0 1rem;
	padding: 0.75rem 0;
	border-top: 1px solid var(--wp--preset--color--zand);
}
.lk-ks-producten .variation { grid-column: 1 / -1; }
.lk-ks-rijen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.3rem 1rem;
	margin: 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--wp--preset--color--zand);
}
.lk-ks-rijen :is(dt, dd) { margin: 0; }
.lk-ks-rijen dd { text-align: right; }
.lk-ks-rijen .lk-ks-eind { font-weight: 600; font-size: 1.1rem; }
@media (min-width: 900px) {
	.lk-kassa-samenvatting { display: none; }
}

/* ---------- Veelgestelde vragen: uitklapbare vragen als kaartjes ---------- */
.wp-block-details.lk-vraag {
	margin-block-start: 0.75rem;
	background: var(--wp--preset--color--kaart);
	border-radius: 16px;
}
.lk-vraag summary {
	position: relative;
	padding: 1rem 3.25rem 1rem 1.25rem;
	font-family: var(--wp--preset--font-family--schreef);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
	border-radius: 16px;
}
.lk-vraag summary::-webkit-details-marker {
	display: none;
}
/* Plus dat bij openen een min wordt, in een poederroze cirkeltje. */
.lk-vraag summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 1rem;
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	margin-top: -0.8rem;
	border-radius: 50%;
	background: var(--wp--preset--color--poeder);
	color: var(--wp--preset--color--inkt);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 400;
	line-height: 1;
}
.lk-vraag[open] summary::after {
	content: "−";
}
.lk-vraag > :not(summary) {
	margin: 0;
	padding: 0 1.25rem 1.1rem;
}
.lk-vraag a {
	color: var(--wp--preset--color--kaneel-donker);
}

/*
 * Bedanktpagina: Mollie zet onderaan een melding "Betaling afgerond door … (IBAN laatste 4 cijfers …)" in een
 * blauw-wit blok. Dat zegt de klant niets nieuws en past niet bij de site (Sebastian, 21-10-2026). We tonen alleen
 * iDEAL, dus er staan daar nooit betaalinstructies die de klant nodig heeft.
 */
.woocommerce-order-received .mollie-instructions {
	display: none;
}

/* ---------- Alle stofjes op een rij: de vierkante foto bovenaan niet bijsnijden, kopjes kleiner op de telefoon ---------- */
.lk-alle-stofjes .wp-block-post-featured-image {
	max-width: 560px;
	margin-inline: auto;
}
.lk-alle-stofjes .wp-block-post-featured-image img {
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	object-fit: cover;
}
@media (max-width: 600px) {
	.lk-alle-stofjes .wp-block-post-content h2 {
		font-size: 2.1rem;
		text-wrap: balance;
		padding-inline: 0.2em; /* De sierletters (W, t) steken anders net over de rand. */
	}
	/* Twee foto's naast elkaar; de laatste bij een oneven aantal niet over de hele breedte. */
	.lk-alle-stofjes .wp-block-gallery.has-nested-images { justify-content: center; }
	.lk-alle-stofjes .wp-block-gallery.has-nested-images figure.wp-block-image:last-child:nth-child(odd) { flex-grow: 0; }
}
/* De foto's van de stapels stof: allemaal even hoog, staand. */
.lk-alle-stofjes .wp-block-gallery.has-nested-images figure.wp-block-image img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 12px;
}

/* ---------- Nieuwsbrief ([lk_nieuwsbrief], ook in de footer) ---------- */
.lk-nieuwsbrief {
	margin-block: var(--wp--preset--spacing--40);
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--kaart);
	border-radius: 16px;
}
.lk-nieuwsbrief p { margin: 0; }
.lk-nieuwsbrief-tekst p { margin-top: 0.3rem; }
.lk-nieuwsbrief-titel {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}
.lk-nieuwsbrief-velden {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 0.9rem;
}
.lk-nieuwsbrief-velden p { flex: 1 1 12rem; }
/* Het label staat als voorbeeldtekst in het veld; voor schermlezers blijft het label er. */
.lk-nieuwsbrief-label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.lk-nieuwsbrief-melding, .lk-nieuwsbrief-klein { margin-top: 0.6rem !important; }
/* Breed scherm: tekst links, formulier rechts. */
@media (min-width: 900px) {
	.lk-nieuwsbrief {
		display: grid;
		grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr);
		column-gap: 2rem;
		align-items: center;
	}
	.lk-nieuwsbrief-tekst { grid-row: span 3; }
	.lk-nieuwsbrief-velden { margin-top: 0; }
}
.lk-nieuwsbrief-velden input {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	background: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--inkt);
	border: 1px solid var(--wp--preset--color--grijs);
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--schreef);
	font-size: 1rem;
}
.lk-nieuwsbrief-velden input::placeholder { color: var(--wp--preset--color--grijs); opacity: 1; }
.lk-nieuwsbrief-velden input:focus {
	outline: 2px solid var(--wp--preset--color--kaneel);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--kaneel);
}
.lk-nieuwsbrief-velden button {
	min-height: 48px;
	padding: 0.95em 2em;
	background: var(--wp--preset--color--kaneel);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
}
.lk-nieuwsbrief-velden button:hover:not(:disabled) { background: var(--wp--preset--color--inkt); }
.lk-nieuwsbrief-velden button:disabled { opacity: 0.6; cursor: wait; }
@media (max-width: 599px) { .lk-nieuwsbrief-velden button { width: 100%; } }
.lk-nieuwsbrief-val { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lk-nieuwsbrief-melding:empty { display: none; }
.lk-nieuwsbrief-melding { font-weight: 600; }
.lk-nieuwsbrief-klein { font-size: 0.8rem; color: var(--wp--preset--color--grijs); }
.lk-nieuwsbrief-klein a { color: inherit; }