.lk-samensteller {
	--lk-linnen: var(--wp--preset--color--linnen, #F6E9DC);
	--lk-kaart: var(--wp--preset--color--kaart, #FBF3EA);
	--lk-inkt: var(--wp--preset--color--inkt, #2E2724);
	--lk-terra: var(--wp--preset--color--terra, #CE9175);
	--lk-kaneel: var(--wp--preset--color--kaneel, #9E5E45);
	--lk-kaneel-donker: var(--wp--preset--color--kaneel-donker, #874C36);
	margin: 1.5rem 0;
	touch-action: manipulation;
	display: grid;
	gap: 1.25rem;
	width: 100%;
}

/* Voorbeeld: touw met letters tegen een zonnige muur.
   Het blijft in beeld terwijl je door de stofjes en opties scrolt (telefoon sinds #28, ook breed sinds 26-10-2026). */
.lk-voorbeeld {
	position: sticky;
	top: 0.5rem;
	z-index: 2;
	/* De eerste schaduw vult het randje erboven met de achtergrond, zodat er geen stofjes doorheen schemeren. */
	box-shadow: 0 -0.5rem 0 0.5rem var(--lk-linnen), 0 6px 18px rgba(46, 39, 36, 0.12);
	border-radius: 22px;
	overflow: hidden;
	background:
		linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.45) 38% 46%, transparent 46% 54%, rgba(255, 255, 255, 0.35) 54% 60%, transparent 60%),
		radial-gradient(120% 90% at 20% 0%, #fff8ee 0%, var(--lk-linnen) 45%, var(--wp--preset--color--zand, #EBD7C1) 100%);
}
.lk-touw {
	position: absolute;
	inset: 0 0 auto 0;
	width: 100%;
	height: 90px;
}
.lk-letters {
	position: relative;
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 0 28px 24px;
	min-height: 210px;
	box-sizing: border-box;
}
.lk-letter {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	width: var(--lk-maat, 80px);
	cursor: pointer;
	transform-origin: 50% 0;
	transition: transform 0.25s ease, filter 0.2s ease;
	filter: drop-shadow(0 6px 6px rgba(60, 40, 30, 0.18));
	align-self: flex-start;
}
.lk-letter svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
.lk-letter.is-actief svg {
	outline: 2px solid var(--lk-kaneel);
	outline-offset: 3px;
	border-radius: 8px;
}
.lk-letter:focus-visible {
	outline: 2px solid var(--lk-inkt);
	outline-offset: 4px;
	border-radius: 8px;
}
.lk-leeg {
	position: absolute;
	inset: auto 0 2.25rem;
	text-align: center;
	font-family: var(--wp--preset--font-family--handschrift);
	font-size: clamp(1.6rem, 5vw, 2.1rem);
	line-height: 1.1;
	color: var(--lk-inkt);
	margin: 0;
	padding: 0 1rem;
}

/* Een lange naam past niet op het scherm: het touw wordt langer en het voorbeeld schuift opzij. */
.lk-schuif {
	position: relative;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}
.lk-schuif-uitleg {
	margin: -0.5rem 0 0;
	font-size: 0.85rem;
	text-align: center;
	color: var(--wp--preset--color--grijs, #6B625C);
}

/* Velden. */
.lk-veld {
	display: grid;
	gap: 0.35rem;
	margin: 0;
}
.lk-veld label,
.lk-label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin: 0;
}
/* Zinnen en toelichtingen in Lora: Montserrat alleen in hoofdletters (brand guide). */
.lk-label,
.lk-veld label .lk-optioneel,
.lk-letterteller {
	font-family: var(--wp--preset--font-family--schreef);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}
.lk-label {
	font-size: 1rem;
}
.lk-veld label .lk-optioneel,
.lk-letterteller {
	font-size: 0.9rem;
	color: var(--wp--preset--color--grijs, #6B625C);
}
.lk-veld input,
.lk-veld textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.8rem 1rem;
	border: 1px solid color-mix(in srgb, var(--lk-inkt) 55%, #fff);
	border-radius: 14px;
	background: #fff;
	color: var(--lk-inkt);
	font: inherit;
}
.lk-veld input {
	font-size: 1.35rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}
.lk-veld input::placeholder {
	letter-spacing: 0;
	text-transform: none;
	font-size: 1rem;
}
.lk-veld input:focus,
.lk-veld textarea:focus {
	outline: 2px solid var(--lk-kaneel);
	outline-offset: 1px;
}
.lk-veld small {
	font-size: 0.8rem;
	opacity: 0.75;
}
.lk-veld .lk-fout {
	color: var(--lk-kaneel-donker);
	font-weight: 600;
	opacity: 1;
}

/* Stofjes kiezen. */
.lk-stap {
	display: grid;
	gap: 0.75rem;
	padding: 1.1rem;
	background: var(--lk-kaart);
	border-radius: 22px;
}
.lk-stap[hidden] {
	display: none;
}
/* Soorten stof met een kopje erboven (sinds 23-10-2026 geen uitklapblokken meer). */
.lk-soorten {
	display: grid;
	gap: 0.5rem;
	min-width: 0;
}
.lk-soort {
	border-top: 1px solid var(--lk-linnen);
	padding-top: 0.5rem;
}
.lk-soort:first-child {
	border-top: 0;
	padding-top: 0;
}
.lk-soort-kop {
	margin: 0;
	padding: 0.35rem 0;
	font-family: var(--wp--preset--font-family--schreef);
	font-weight: 600;
}
.lk-soort-aantal {
	font-weight: 400;
	color: var(--wp--preset--color--grijs, #6B625C);
}
.lk-soort .lk-stofjes {
	padding: 0.5rem 0 0.25rem;
}
.lk-stofjes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.lk-stofje {
	appearance: none;
	position: relative;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	box-shadow: 0 0 0 3px var(--lk-linnen);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lk-stofje img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}
.lk-stofje:hover {
	transform: scale(1.06);
}
.lk-stofje[aria-checked="true"] {
	box-shadow: 0 0 0 3px var(--lk-linnen), 0 0 0 5px var(--lk-kaneel);
}
.lk-stofje:focus-visible {
	outline: 2px solid var(--lk-inkt);
	outline-offset: 6px;
}
/* Het stofje groot naast de rondjes (21-10-2026: de rondjes alleen waren te klein om het stofje te zien). */
.lk-kiezen {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 1rem;
	align-items: start;
}
.lk-stofje-groot {
	margin: 0;
	position: sticky;
	top: calc(var(--lk-voorbeeld-hoogte, 0px) + 1.25rem);
}
.lk-stofje-groot img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 16px;
	background: var(--lk-linnen);
}
.lk-stofje-groot img:not([src]) {
	visibility: hidden;
}
.lk-zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	overflow: hidden;
	border-radius: 16px;
	cursor: zoom-in;
}
.lk-zoom:focus-visible {
	outline: 2px solid var(--lk-inkt);
	outline-offset: 3px;
}
.lk-zoom img,
.lk-zoom svg {
	transition: transform 0.15s ease-out;
}
.lk-zoom.is-zoom img,
.lk-zoom.is-zoom svg {
	transform: scale(2.5);
}
/* De gekozen letter groot in het stofje: alleen op de telefoon (zie onder), daar is de slinger zelf te klein. */
.lk-stofje-letter {
	display: none;
}
.lk-stofje-letter svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
.lk-stofje-groot figcaption {
	margin-top: 0.4rem;
	font-size: 0.85rem;
	line-height: 1.3;
}

/* Knop rechtsboven in het voorbeeld: de slinger groter bekijken. */
.lk-vergroot {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: var(--lk-kaneel-donker);
	box-shadow: 0 2px 6px rgba(46, 39, 36, 0.15);
	cursor: pointer;
}
.lk-vergroot[hidden] {
	display: none;
}
.lk-vergroot:focus-visible {
	outline: 2px solid var(--lk-inkt);
	outline-offset: 2px;
}
.lk-groot {
	width: min(960px, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	padding: 0;
	border: 0;
	border-radius: 22px;
	background: radial-gradient(120% 90% at 20% 0%, #fff8ee 0%, var(--lk-linnen) 45%, var(--wp--preset--color--zand, #EBD7C1) 100%);
	text-align: center;
}
.lk-groot::backdrop {
	background: rgba(46, 39, 36, 0.6);
}
.lk-groot-letters {
	display: flex;
	justify-content: safe center;
	gap: 0.5rem;
	padding: 2rem 1rem 0.5rem;
	overflow-x: auto;
}
/* Ook groot blijft de naam op één rij: zo breed als past, en bij een lange naam schuif je opzij. */
.lk-groot-letter {
	flex: none;
	width: clamp(48px, calc((min(960px, 100vw - 2rem) - 2rem) / var(--lk-aantal, 3) - 0.5rem), 150px);
	filter: drop-shadow(0 6px 6px rgba(60, 40, 30, 0.18));
}
.lk-groot-letter svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
.lk-groot-spatie {
	flex: none;
	width: clamp(16px, 4vw, 48px);
}
.lk-groot .lk-link {
	margin: 0 0 1rem;
}
/* Naam van het stofje en de veeg-uitleg: alleen op de telefoon, waar je per letter kijkt (zie onder). */
.lk-groot-naam,
.lk-groot-veeg {
	display: none;
}
/* Het stofje groot in een venster. */
.lk-stof-groot {
	width: min(720px, calc(100vw - 2rem));
}
.lk-stof-groot img {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(100vh - 8rem);
	object-fit: contain;
	touch-action: pinch-zoom;
}
.lk-stof-groot-naam {
	margin: 0.75rem 1rem 0.25rem;
	font-family: var(--wp--preset--font-family--schreef);
}

.lk-snel {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0;
}
.lk-link {
	appearance: none;
	background: none;
	border: 0;
	padding: 0.5rem 0;
	color: var(--lk-kaneel);
	font: inherit;
	font-size: 0.9rem;
	text-decoration: underline;
	text-decoration-color: var(--lk-terra);
	text-underline-offset: 4px;
	cursor: pointer;
}

/* Totaal: per regel omschrijving links en bedrag rechts, onderaan het eindbedrag met verzendkosten. */
.lk-totaal {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 0.35rem 1rem;
	padding: 0.9rem 1.2rem;
	border-top: 1.5px solid var(--lk-terra);
	border-bottom: 1.5px solid var(--lk-terra);
}
.lk-totaal[hidden] {
	display: none;
}
.lk-totaal strong {
	font-variant-numeric: tabular-nums;
	font-size: 1.5rem;
	font-weight: 600;
}
.lk-totaal > :nth-child(even) {
	text-align: right;
}
.lk-totaal-bedrag {
	font-variant-numeric: tabular-nums;
}
.lk-totaal-eind {
	font-weight: 600;
}
/* "één keer per bestelling" onder Verzendkosten, en "al in je winkelwagen" in plaats van een bedrag. */
.lk-totaal small {
	display: block;
	font-size: 0.85rem;
	color: var(--wp--preset--color--grijs, #6B625C);
}
.lk-totaal-al {
	color: var(--lk-kaneel-donker);
	font-style: italic;
}
/* Wat de hele bestelling wordt, over de volle breedte onder het eindbedrag. */
.lk-totaal > .lk-totaal-noot {
	grid-column: 1 / -1;
	margin: 0.2rem 0 0;
	font-size: 0.95rem;
	text-align: left;
}
/* Wat ruimte boven het eindbedrag als er regels boven staan. */
.lk-totaal-bedrag + .lk-totaal-eind,
.lk-totaal-bedrag + .lk-totaal-eind + strong {
	margin-top: 0.4rem;
}

.lk-melding {
	padding: 1rem;
	background: var(--lk-kaart);
	border-radius: 14px;
}

/* Knop "In winkelwagen" over de volle breedte onder de samensteller. */
form.cart:has(.lk-samensteller) {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 0;
}
form.cart:has(.lk-samensteller) > * {
	grid-column: 1 / -1 !important;
}
form.cart:has(.lk-samensteller) .quantity {
	display: none !important;
}
form.cart:has(.lk-samensteller) .single_add_to_cart_button {
	width: 100%;
	margin: 0 !important;
}
/* Alleen voor schermlezers. */
.lk-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (max-width: 600px) {
	.lk-voorbeeld,
	.lk-letters {
		min-height: 140px;
	}
	.lk-touw {
		height: 70px;
	}
	.lk-stap {
		padding: 1rem 0.85rem;
	}
	/* Raster in plaats van flex: de rondjes vullen de breedte, maar een halve laatste rij blijft links (25-10-2026, Sab). */
	.lk-stofjes {
		display: grid;
		grid-template-columns: repeat(auto-fill, 44px);
		gap: 0.45rem;
		justify-content: space-between;
	}
	.lk-stofje {
		width: 44px;
		height: 44px;
	}
	/* Op de telefoon het grote stofje boven de rondjes, met de naam ernaast. */
	.lk-kiezen {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
	.lk-stofje-groot {
		position: static;
		display: flex;
		align-items: center;
		gap: 0.75rem;
	}
	.lk-stofje-groot .lk-zoom {
		width: 110px;
		flex: none;
	}
	.lk-stofje-groot .lk-stofje-letter {
		display: block;
		flex: none;
		width: 100px;
	}
	/* De slinger groter: op een smal scherm wordt de hele naam nauwelijks groter, dus hier één letter per
	   scherm en veeg je naar de volgende (28-10-2026). */
	.lk-groot-letters {
		justify-content: flex-start;
		gap: 0;
		padding: 1.5rem 0 0.5rem;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	.lk-groot-letters::-webkit-scrollbar {
		display: none;
	}
	.lk-groot-letter {
		width: 100%;
		padding: 0 18%;
		box-sizing: border-box;
		scroll-snap-align: center;
	}
	.lk-groot-letter svg {
		max-height: calc(100vh - 14rem);
	}
	.lk-groot-spatie {
		display: none;
	}
	.lk-groot-naam {
		display: block;
		margin-top: 0.75rem;
		font-family: var(--wp--preset--font-family--schreef);
	}
	.lk-groot-veeg:not([hidden]) {
		display: block;
		margin: 0.5rem 1rem 0;
		font-size: 0.85rem;
		color: var(--wp--preset--color--grijs, #6B625C);
	}
}

/* Onder de bestelknop: maatwerk heeft geen bedenktijd. */
.lk-maatwerk {
	flex-basis: 100%;
	margin: 0.9rem 0 0;
	font-family: var(--wp--preset--font-family--schreef);
	font-size: 0.9rem;
	color: var(--wp--preset--color--grijs, #6B625C);
}

/* Teller op een stofje waarvan nog maar weinig over is ("nog 3"), bovenin het rondje; opgehaald door het script. */
.lk-stofje .lk-nog {
	position: absolute;
	left: 50%;
	top: 5px;
	transform: translateX(-50%);
	padding: 1px 6px;
	box-shadow: 0 1px 3px rgba(46, 39, 36, 0.25);
	border-radius: 999px;
	background: var(--lk-kaneel);
	color: #fff;
	font: 600 0.62rem/1.4 var(--wp--preset--font-family--sans, sans-serif);
	font-style: normal;
	letter-spacing: 0.02em;
	white-space: nowrap;
	pointer-events: none;
}
.lk-stofje .lk-nog.is-op {
	background: var(--lk-grijs, #6B625C);
}
.lk-voorraad-melding:not([hidden]) {
	display: block;
	margin: 0.6rem 0 0;
	color: var(--lk-kaneel-donker, #874C36);
	font-weight: 600;
}