/*
 * Eigenlijk Mooi — WooCommerce in huisstijl.
 * Dekt zowel de klassieke selectors (productpagina-formulier, meldingen)
 * als de blok-selectors (productgrids, winkelwagen, afrekenen).
 */

/* ------------------------------------------------------------------
 * Knoppen: salie, wit, 8px rond, Mulish 700 (brandboek).
 * ------------------------------------------------------------------ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button:not(.is-link),
.wc-block-components-totals-coupon__button,
.single_add_to_cart_button {
	background: var(--wp--preset--color--salie);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: var(--wp--custom--radius, 8px);
	font-family: var(--wp--preset--font-family--mulish);
	font-weight: 700;
	transition: background-color 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:not(.is-link):hover,
.single_add_to_cart_button:hover {
	background: var(--wp--preset--color--salie-donker);
	color: var(--wp--preset--color--base);
}

/* Uitgeschakelde knoppen: zacht roze, tekst in bes-licht. */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce button.button.wc-variation-is-unavailable,
.wc-block-components-button:disabled {
	background: var(--wp--preset--color--zacht-roze);
	color: var(--wp--preset--color--contrast);
	opacity: 1;
	cursor: not-allowed;
}

/* ------------------------------------------------------------------
 * Prijzen in bes, semibold (brandboek: Mulish 600 voor prijzen).
 * ------------------------------------------------------------------ */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.wc-block-components-product-price,
.wp-block-woocommerce-product-price {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.woocommerce div.product p.price del,
.woocommerce ul.products li.product .price del,
.wc-block-components-product-price del {
	color: var(--wp--preset--color--bes-licht);
	font-weight: 400;
}

.woocommerce div.product p.price ins,
.wc-block-components-product-price ins {
	text-decoration: none;
}

/* ------------------------------------------------------------------
 * Sale-badge: bes met lichtroze tekst (brandboek).
 * ------------------------------------------------------------------ */
.woocommerce span.onsale,
.wc-block-components-sale-badge,
.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--lichtroze);
	border: none;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mulish);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	padding: 0.25em 0.9em;
	text-transform: none;
	min-height: 0;
	line-height: 1.6;
}

/* ------------------------------------------------------------------
 * Sterren in bes (brandboek).
 * ------------------------------------------------------------------ */
.woocommerce .star-rating span::before,
.woocommerce p.stars a {
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-product-rating,
.wc-block-grid__product-rating .star-rating span::before {
	color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------------------------------
 * Productfoto's op lichtroze, afgerond (brandboek-tip).
 * ------------------------------------------------------------------ */
.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img,
.wc-block-components-product-image img,
.wc-block-components-product-image {
	background: var(--wp--preset--color--lichtroze);
	border-radius: var(--wp--custom--radius, 8px);
}

.wc-block-components-product-image {
	overflow: hidden;
}

/* Productnaam in Marcellus, bes — als link zonder onderstreping. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wp-block-post-title a,
.wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--marcellus);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wp-block-post-title a:hover,
.wc-block-components-product-name:hover {
	color: var(--wp--preset--color--bes-licht);
}

/* ------------------------------------------------------------------
 * Meldingen: succes = salie, fout = #9C2B2B — nooit bes voor fouten.
 * ------------------------------------------------------------------ */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--wp--preset--color--salie);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--wp--preset--color--salie);
}

.woocommerce-error {
	border-top-color: var(--wp--preset--color--fout);
}

.woocommerce-error::before {
	color: var(--wp--preset--color--fout);
}

.wc-block-components-notice-banner.is-success {
	background: rgba(69, 121, 123, 0.08);
	border-color: var(--wp--preset--color--salie);
	color: var(--wp--preset--color--salie-donker);
}

.wc-block-components-notice-banner.is-error {
	background: rgba(156, 43, 43, 0.06);
	border-color: var(--wp--preset--color--fout);
	color: var(--wp--preset--color--fout);
}

.wc-block-components-notice-banner.is-info {
	background: var(--wp--preset--color--lichtroze);
	border-color: var(--wp--preset--color--zacht-roze);
	color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------------------------------
 * Formuliervelden (afrekenen, personalisatie): salie focus, fout in rood.
 * ------------------------------------------------------------------ */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.wc-block-components-text-input input,
.wc-block-components-textarea textarea {
	border: 1px solid var(--wp--preset--color--zacht-roze);
	border-radius: var(--wp--custom--radius, 8px);
	color: var(--wp--preset--color--contrast);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-textarea textarea:focus {
	border-color: var(--wp--preset--color--salie);
	box-shadow: 0 0 0 3px rgba(69, 121, 123, 0.18);
	outline: none;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text,
.wc-block-components-text-input.has-error input {
	border-color: var(--wp--preset--color--fout);
	box-shadow: none;
}

/* Ook een foutveld houdt bij focus een zichtbare ring — in foutrood. */
.woocommerce form .form-row.woocommerce-invalid input.input-text:focus,
.wc-block-components-text-input.has-error input:focus {
	border-color: var(--wp--preset--color--fout);
	box-shadow: 0 0 0 3px rgba(156, 43, 43, 0.18);
}

.woocommerce form .form-row.woocommerce-invalid label,
.wc-block-components-validation-error p {
	color: var(--wp--preset--color--fout);
}

/* Labels in Mulish 600 (brandboek: 600 voor labels). */
.woocommerce form .form-row label,
.wc-block-components-text-input label,
.em-personalisatie label {
	font-weight: 600;
}

/* ------------------------------------------------------------------
 * Categorieoverzicht met voorbeeldfoto.
 * ------------------------------------------------------------------ */
.em-categorieen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.em-categorie {
	margin: 0;
}

.em-categorie__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--zacht-roze);
	border-radius: var(--wp--custom--radius-groot, 16px);
	padding: 0.75rem 0.75rem 1rem;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.em-categorie__link:hover,
.em-categorie__link:focus-visible {
	box-shadow: var(--wp--preset--shadow--kaart-hover);
	transform: translateY(-2px);
	color: var(--wp--preset--color--contrast);
}

@media (prefers-reduced-motion: reduce) {
	.em-categorie__link {
		transition: none;
	}
	.em-categorie__link:hover,
	.em-categorie__link:focus-visible {
		transform: none;
	}
}

.em-categorie__foto {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--lichtroze);
	border-radius: var(--wp--custom--radius, 8px);
	overflow: hidden;
	margin-bottom: 0.75rem;
}

.em-categorie__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Terugval als er nog geen foto is: het beeldmerk, niet uitgerekt. */
.em-categorie__foto .em-categorie__merk {
	width: 70%;
	height: auto;
	object-fit: contain;
	opacity: 0.75;
}

.em-categorie__naam {
	font-family: var(--wp--preset--font-family--marcellus);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}

.em-categorie__aantal {
	margin-top: 0.15rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--bes-licht);
}

/* ------------------------------------------------------------------
 * Live 3D-preview van de gepersonaliseerde voet.
 * ------------------------------------------------------------------ */
.em-preview {
	flex-basis: 100%;
	margin: 0 0 1.25rem;
}

.em-preview__canvas {
	width: 100%;
	max-width: 26rem;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--lichtroze);
	border: 1px solid var(--wp--preset--color--zacht-roze);
	border-radius: var(--wp--custom--radius-groot, 16px);
	overflow: hidden;
	cursor: grab;
}

.em-preview__canvas:active {
	cursor: grabbing;
}

.em-preview__canvas canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.em-preview__hint {
	margin: 0.4rem 0 0;
	max-width: 26rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--bes-licht);
}

.em-preview__melding {
	margin: 0.35rem 0 0;
	max-width: 26rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.em-preview__melding[hidden] {
	display: none;
}

/* ------------------------------------------------------------------
 * Personalisatieveld ("Naam op het product").
 * ------------------------------------------------------------------ */
.em-personalisatie {
	margin: 0 0 1.25rem;
}

.em-personalisatie label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--wp--preset--color--contrast);
}

.em-personalisatie input {
	width: 100%;
	max-width: 24rem;
}

.em-personalisatie__hulp {
	margin: 0.35rem 0 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--bes-licht);
}

/* ------------------------------------------------------------------
 * Kleurbolletjes (swatches) bij variatie-attributen.
 * ------------------------------------------------------------------ */
.em-swatches {
	margin: 0.25rem 0 0;
}

/* De originele keuzelijst blijft bestaan voor de WooCommerce-JS, maar is
   onzichtbaar en buiten de tabvolgorde (de bolletjes vervangen hem). */
.em-swatches__select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.em-swatches__groep {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.em-swatch {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Minimaal 44 x 44 px aanraakvlak. */
	width: 44px;
	height: 44px;
	cursor: pointer;
}

.em-swatch__input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.em-swatch__bol {
	position: relative;
	display: block;
	width: 34px;
	height: 34px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--zacht-roze);
	background-color: var(--em-swatch-kleur);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	pointer-events: none;
}

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

/* Doorschijnend filament: de kleur (met alpha, berekend in PHP) over een
   dambordje, zodat je ziet dát het doorschijnend is. */
.em-swatch--doorschijnend .em-swatch__bol {
	background-color: transparent;
	background-image:
		linear-gradient(var(--em-swatch-kleur), var(--em-swatch-kleur)),
		conic-gradient(
			var(--wp--preset--color--zacht-roze) 0 25%,
			#fff 0 50%,
			var(--wp--preset--color--zacht-roze) 0 75%,
			#fff 0
		);
	background-size: auto, 10px 10px;
}

.em-swatch:hover .em-swatch__bol {
	transform: scale(1.08);
}

/* Gekozen: ring in bes plus een vinkje — kleur is nooit de enige aanwijzing. */
.em-swatch__input:checked ~ .em-swatch__bol {
	box-shadow: 0 0 0 2px var(--wp--preset--color--base), 0 0 0 4px var(--wp--preset--color--contrast);
}

.em-swatch__input:checked ~ .em-swatch__bol::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 12px;
	margin: -8px 0 0 -4px;
	border: solid var(--em-swatch-vink, #fff);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

/* Focus in salie, gelijk aan de rest van het thema. */
.em-swatch__input:focus-visible ~ .em-swatch__bol {
	outline: 2px solid var(--wp--preset--color--salie);
	outline-offset: 3px;
}

/* Uitverkocht of niet beschikbaar: gedempte kleur met een streep erdoor.
   De streep hangt aan het label, niet aan het bolletje — anders vervaagt de
   enige niet-kleur-aanwijzing mee met de opacity. */
.em-swatch--uitverkocht .em-swatch__bol,
.em-swatch--niet-beschikbaar .em-swatch__bol {
	opacity: 0.45;
}

.em-swatch--uitverkocht::before,
.em-swatch--niet-beschikbaar::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 1.5px;
	margin: -1px 0 0 -16px;
	background: var(--wp--preset--color--contrast);
	transform: rotate(-45deg);
	pointer-events: none;
	z-index: 1;
}

.em-swatch--uitverkocht,
.em-swatch--uitverkocht .em-swatch__input,
.em-swatch--niet-beschikbaar,
.em-swatch--niet-beschikbaar .em-swatch__input {
	cursor: not-allowed;
}

.em-swatch--uitverkocht:hover .em-swatch__bol,
.em-swatch--niet-beschikbaar:hover .em-swatch__bol {
	transform: none;
}

.em-swatches__gekozen {
	margin: 0.6rem 0 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
}

.em-swatches__gekozen strong {
	font-weight: 600;
}

/* In hoog-contrastmodus (Windows) worden achtergrondkleuren weggegooid; dan
   zouden alle bolletjes identiek worden. Terugvallen op een rand, en de
   gekozen/uitverkocht-aanwijzing expliciet in systeemkleuren zetten. */
@media (forced-colors: active) {
	.em-swatch__bol {
		forced-color-adjust: none;
		border: 1px solid CanvasText;
	}

	.em-swatch__input:checked ~ .em-swatch__bol {
		box-shadow: 0 0 0 2px Canvas, 0 0 0 4px Highlight;
	}

	.em-swatch__input:checked ~ .em-swatch__bol::after {
		border-color: CanvasText;
	}

	.em-swatch--uitverkocht::before,
	.em-swatch--niet-beschikbaar::before {
		background: CanvasText;
	}

	.em-swatch__input:focus-visible ~ .em-swatch__bol {
		outline: 2px solid Highlight;
	}
}

/* Het label van de rij ("Kleur") bovenaan in plaats van ernaast, zodat de
   bolletjes de volle breedte krijgen. Rijen houden onderlinge ruimte, ook bij
   producten met meerdere variatie-attributen. */
.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations td.value {
	display: block;
	width: auto;
	text-align: left;
	padding: 0;
}

.woocommerce div.product form.cart .variations tr {
	display: block;
	margin-bottom: 0.9rem;
}

.woocommerce div.product form.cart .variations th.label label {
	font-weight: 600;
	margin-bottom: 0.15rem;
	display: inline-block;
}

.woocommerce div.product form.cart .variations {
	width: 100%;
	margin-bottom: 0.75rem;
}

/* De gewone keuzelijst (bijvoorbeeld Grootte): WooCommerce zet er een vaste
   hoogte op waardoor de tekst onderaan wegvalt. height:auto + min-height
   wint daarvan, wat de bron ook is. */
.woocommerce div.product form.cart .variations td.value select {
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 2.9rem;
	padding: 0.55rem 2.2rem 0.55rem 0.9rem;
	line-height: 1.4;
}

/* ------------------------------------------------------------------
 * Productpagina: aantal + knop netjes naast elkaar.
 * ------------------------------------------------------------------ */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.woocommerce div.product form.cart .em-personalisatie,
.woocommerce div.product form.cart .em-pakket {
	flex-basis: 100%;
}

.woocommerce div.product form.cart div.quantity .qty {
	width: 4.5rem;
	padding: 0.6rem 0.5rem;
	text-align: center;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	padding: 0.7rem 1.6rem;
}

/* Tabs en secties op de productpagina (bes: salie is alleen voor knoppen). */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------------------------------
 * Winkelwagen & afrekenen (blokken): links en totalen op kleur.
 * ------------------------------------------------------------------ */
.wc-block-components-product-metadata__description,
.wc-block-components-product-details__name {
	color: var(--wp--preset--color--bes-licht);
}

.wc-block-components-product-details__value {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--contrast);
}

/* Mini-winkelwagen: teller in bes. (Let op: __quantity-badge omvat het
   hele icoon in Woo 11 — alleen het bolletje zelf inkleuren.) */
.wc-block-mini-cart__badge {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--lichtroze);
	border-color: var(--wp--preset--color--contrast);
}

/* Kop binnen een productcollectie (o.a. "Gerelateerde producten") erft
   soms een klein lettertype — terug naar de sectiekop-maat. */
.wp-block-woocommerce-product-collection h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* ------------------------------------------------------------------
 * Productkaart (brandboek): wit, zachte rand, foto op lichtroze,
 * naam in Marcellus, volle-breedte salieknop.
 * ------------------------------------------------------------------ */
.em-productkaart li.wc-block-product,
li.wc-block-product.em-productkaart,
.em-productkaart.wc-block-product {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--zacht-roze);
	border-radius: var(--wp--custom--radius-groot, 16px);
	padding: 0.75rem 0.75rem 0.5rem;
	transition: box-shadow 0.2s ease;

	/* Kaarten even hoog; knop altijd onderaan, ook zonder sterren. */
	display: flex;
	flex-direction: column;
	height: 100%;
}

.em-productkaart li.wc-block-product .em-kaartknop {
	margin-top: auto;
}

.em-productkaart li.wc-block-product:hover,
li.wc-block-product.em-productkaart:hover,
.em-productkaart.wc-block-product:hover {
	box-shadow: var(--wp--preset--shadow--kaart-hover);
}

/* Volle-breedte knop in de kaart. */
.em-kaartknop,
.em-kaartknop .wc-block-components-product-button {
	width: 100%;
}

/* WooCommerce zet hier zelf width:auto met hogere specificiteit — vandaar
   de volledige selector. Zonder dit blijft de link-variant ("Personaliseer")
   smaller dan de knopvariant ("Toevoegen aan winkelwagen"). */
.wp-block-button.wc-block-components-product-button.em-kaartknop .wp-block-button__link,
.wp-block-button.wc-block-components-product-button.em-kaartknop .wc-block-components-product-button__button {
	display: flex;
	justify-content: center;
	width: 100%;
	text-align: center;
}

/* Uitgelicht-vak: op telefoons één brede kaart in plaats van een
   scheve 2 + 1 rij. */
@media (max-width: 599px) {
	ul.em-uitgelicht.wc-block-product-template__responsive {
		grid-template-columns: 1fr;
	}
}

/* Smalle kaarten: knoptekst iets compacter zodat "Toevoegen aan
   winkelwagen" niet over drie regels breekt. */
@media (max-width: 781px) {
	.em-kaartknop .wp-block-button__link,
	.em-kaartknop .wc-block-components-product-button__button {
		font-size: 0.9375rem;
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}
}

/* Productnaam-link in de kaart: geen onderstreping, bes. */
.wc-block-product .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.wc-block-product .wp-block-post-title a:hover {
	color: var(--wp--preset--color--bes-licht);
}

/* ------------------------------------------------------------------
 * Kleurkeuzes die geen variatie zijn (voetkleur, tekstkleur).
 * ------------------------------------------------------------------ */
.em-metvoet {
	flex-basis: 100%;
}

.em-metvoet__uitleg {
	margin: 0 0 1rem;
	padding: 0.6rem 0.8rem;
	background: var(--wp--preset--color--lichtroze);
	border-radius: var(--wp--custom--radius, 8px);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
}

.em-metvoet__uitleg[hidden],
.em-metvoet__velden[hidden] {
	display: none;
}

.em-keuzeveld {
	margin: 0 0 1rem;
}

.em-keuzeveld__label {
	display: block;
	margin-bottom: 0.35rem;
	padding: 0;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------------------------------
 * Winkelkop: zoeken en een rij categorieën boven de producten.
 * ------------------------------------------------------------------ */
.em-winkelkop {
	margin: 0 0 var(--wp--preset--spacing--50);
}

.em-zoek {
	display: flex;
	gap: 0.5rem;
	max-width: 32rem;
	margin-bottom: var(--wp--preset--spacing--40);
}

.em-zoek__veld {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--wp--preset--color--zacht-roze);
	border-radius: var(--wp--custom--radius, 8px);
	padding: 0.65rem 0.9rem;
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
}

.em-zoek__veld:focus {
	border-color: var(--wp--preset--color--salie);
	box-shadow: 0 0 0 3px rgba(69, 121, 123, 0.18);
	outline: none;
}

.em-zoek__knop {
	flex: 0 0 auto;
	background: var(--wp--preset--color--salie);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: var(--wp--custom--radius, 8px);
	padding: 0.65rem 1.3rem;
	font-family: var(--wp--preset--font-family--mulish);
	font-weight: 700;
	cursor: pointer;
}

.em-zoek__knop:hover {
	background: var(--wp--preset--color--salie-donker);
}

/* Categorierij: compact, want de producten moeten in beeld blijven. */
.em-catrij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.em-catrij__link {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.4rem 0.9rem 0.4rem 0.4rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--zacht-roze);
	border-radius: 999px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: box-shadow 0.2s ease;
}

.em-catrij__link:hover,
.em-catrij__link:focus-visible {
	box-shadow: var(--wp--preset--shadow--kaart);
	color: var(--wp--preset--color--contrast);
}

/* De categorie waar je nu bent: gevuld in plaats van verborgen. */
.em-catrij__link--actief,
.em-catrij__link--actief:hover,
.em-catrij__link--actief:focus-visible {
	background: var(--wp--preset--color--lichtroze);
	border-color: var(--wp--preset--color--contrast);
}

/* Tweede rij: subcategorieën van de actieve groep, als kleine tekstknopjes. */
.em-subcatrij {
	margin-top: 0.6rem;
}

.em-subcatrij__lijst {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.em-subcatrij__link {
	display: inline-block;
	padding: 0.25rem 0.8rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--zacht-roze);
	border-radius: 999px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	font-size: 0.875rem;
	font-weight: 600;
	transition: box-shadow 0.2s ease;
}

.em-subcatrij__link:hover,
.em-subcatrij__link:focus-visible {
	box-shadow: var(--wp--preset--shadow--kaart);
	color: var(--wp--preset--color--contrast);
}

.em-subcatrij__link--actief,
.em-subcatrij__link--actief:hover,
.em-subcatrij__link--actief:focus-visible {
	background: var(--wp--preset--color--lichtroze);
	border-color: var(--wp--preset--color--contrast);
}

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

.em-catrij__foto {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--wp--preset--color--lichtroze);
	flex: 0 0 auto;
}

.em-catrij__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.em-catrij__foto .em-catrij__merk {
	width: 70%;
	height: auto;
	object-fit: contain;
	opacity: 0.75;
}

.em-catrij__naam {
	font-weight: 600;
	font-size: 0.9375rem;
	white-space: nowrap;
}

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

/* ------------------------------------------------------------------
 * Pakketten — de samensteller op de productpagina.
 * ------------------------------------------------------------------ */
.em-pakket {
	margin: 0 0 1.5rem;
	display: grid;
	gap: 1.5rem;
}

.em-pakket__kop {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.em-pakket__leeg {
	margin: 0;
	color: var(--wp--preset--color--bes-licht, #a94f6e);
	font-size: 0.9375rem;
}

/* --- Wat er sowieso in zit --- */
.em-pakket__inbegrepen-lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.em-pakket__inbegrepen-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.em-pakket__inbegrepen-foto {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	object-fit: cover;
	background: var(--wp--preset--color--lichtroze, #f9eaea);
	flex: none;
}

.em-pakket__inbegrepen-foto--leeg {
	display: block;
}

.em-pakket__inbegrepen-tekst {
	display: grid;
	line-height: 1.35;
}

.em-pakket__inbegrepen-toelichting,
.em-pakket__optie-toelichting {
	font-size: 0.875rem;
	opacity: 0.75;
}

/* --- Meerprijs-opties --- */
.em-pakket__optie {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	padding: 0.75rem;
	border: 1px solid var(--wp--preset--color--zacht-roze, #efc9c6);
	border-radius: 10px;
	cursor: pointer;
}

.em-pakket__optie-tekst {
	display: grid;
	line-height: 1.35;
}

.em-pakket__optie-prijs {
	font-size: 0.875rem;
	color: var(--wp--preset--color--salie, #45797b);
}

/* --- De budgetmeter --- */
.em-pakket__meter {
	padding: 1rem;
	border-radius: 12px;
	background: var(--wp--preset--color--lichtroze, #f9eaea);
}

.em-pakket__meter-tekst {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.375rem;
	margin: 0 0 0.625rem;
}

.em-pakket__meter-bedrag {
	font-size: 1.25rem;
}

.em-pakket__meter-van,
.em-pakket__meter-uitleg {
	font-size: 0.875rem;
	opacity: 0.75;
}

.em-pakket__meter-uitleg {
	margin: 0.5rem 0 0;
}

.em-pakket__balk {
	height: 8px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.7);
	overflow: hidden;
}

.em-pakket__balk-vulling {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--salie, #45797b);
	transition: width 0.2s ease;
}

.em-pakket--vol .em-pakket__balk-vulling {
	background: var(--wp--preset--color--bes-licht, #a94f6e);
}

.em-pakket__melding {
	margin: 0;
	padding: 0.75rem 1rem;
	border-radius: 10px;
	background: var(--wp--preset--color--zacht-roze, #efc9c6);
	font-size: 0.9375rem;
}

/* --- Jouw stukjes --- */
.em-pakket__gekozen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.em-pakket__stukje {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.75rem;
	border: 1px solid var(--wp--preset--color--zacht-roze, #efc9c6);
	border-radius: 12px;
}

.em-pakket__stukje-foto {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	object-fit: cover;
	flex: none;
}

.em-pakket__stukje-body {
	flex: 1 1 auto;
	min-width: 0;
}

.em-pakket__stukje-naam {
	margin: 0 0 0.375rem;
	font-weight: 600;
}

.em-pakket__stukje-prijs {
	flex: none;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* De bolletjes mogen in een regel wat kleiner: er staan er zestien naast
   elkaar in een rij die al een foto en een prijs draagt. */
.em-pakket__stukje .em-swatches__groep {
	gap: 0.25rem;
}

.em-pakket__stukje .em-swatch {
	width: 34px;
	height: 34px;
}

.em-pakket__as--lijst {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
}

.em-pakket__as-label {
	margin-right: 0.375rem;
}

.em-pakket__weg {
	flex: none;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.em-pakket__weg:hover,
.em-pakket__weg:focus-visible {
	background: var(--wp--preset--color--zacht-roze, #efc9c6);
}

/* --- Het raster om uit te kiezen --- */
.em-pakket__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0 0 0.75rem;
}

.em-pakket__filter {
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--wp--preset--color--zacht-roze, #efc9c6);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 0.875rem;
	cursor: pointer;
}

.em-pakket__filter.is-actief {
	background: var(--wp--preset--color--salie, #45797b);
	border-color: var(--wp--preset--color--salie, #45797b);
	color: #fff;
}

.em-pakket__raster {
	list-style: none;
	margin: 0;
	padding: 0.25rem;
	display: grid;
	/* Ruimere kaartjes en meer lucht ertussen. Met 96 px pasten er zes op een
	   rij en stond alles tegen elkaar; de naam eronder liep dan over drie
	   regels en het raster rafelde. */
	grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
	gap: 0.875rem;
	/* Hoger venster, en scrollen mag pas als er echt te veel is. */
	max-height: min(34rem, 60vh);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.em-pakket__kies {
	display: grid;
	/* Vaste rijen: foto, naam, prijs. Daardoor staan alle kaartjes even hoog,
	   ook als de ene naam één regel is en de andere twee. */
	grid-template-rows: auto 2.4em auto;
	align-content: start;
	justify-items: center;
	gap: 0.25rem;
	width: 100%;
	padding: 0.625rem 0.375rem;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	text-align: center;
}

.em-pakket__kies:hover:not(:disabled),
.em-pakket__kies:focus-visible {
	border-color: var(--wp--preset--color--salie, #45797b);
	background: var(--wp--preset--color--lichtroze, #f9eaea);
}

.em-pakket__kies:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.em-pakket__tegel-foto {
	width: 92px;
	height: 92px;
	object-fit: contain;
}

.em-pakket__tegel-naam {
	font-size: 0.8125rem;
	line-height: 1.2;
	/* Hooguit twee regels; wat er niet in past krijgt drie puntjes. Zonder dit
	   duwt één lange naam de hele rij uit elkaar. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.em-pakket__tegel-prijs {
	font-size: 0.75rem;
	opacity: 0.7;
}

/* --- Hoeveel mag er nog bij: een rij vakjes die volloopt --- */
.em-pakket__voortgang {
	display: grid;
	gap: 0.5rem;
	padding: 0.875rem 1rem;
	border-radius: 12px;
	background: var(--wp--preset--color--lichtroze, #f9eaea);
}

.em-pakket__voortgang-kop {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.em-pakket__teller {
	font-size: 1.0625rem;
}

.em-pakket__voortgang-uitleg {
	margin: 0;
	font-size: 0.8125rem;
	opacity: 0.75;
}

/* Het bedrag blijft staan voor wie wíl narekenen, maar klein en eronder: de
   vakjes zijn het antwoord op "hoeveel mag ik nog", niet de euro's. */
.em-pakket__voortgang-bedrag {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	font-size: 0.8125rem;
	opacity: 0.75;
}

/* Het bedrag erft in deze rol een veel grotere maat uit de budgetmeter; hier
   moet het juist kleiner zijn dan de teller erboven. */
.em-pakket__voortgang-bedrag .em-pakket__meter-bedrag {
	font-size: inherit;
	font-weight: 600;
}

.em-pakket__vakjes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.em-pakket__vakje {
	width: 2rem;
	height: 2rem;
	border-radius: 8px;
	border: 2px dashed var(--wp--preset--color--zacht-roze, #efc9c6);
	background: transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.em-pakket__vakje.is-vol {
	border-style: solid;
	border-color: var(--wp--preset--color--bes, #8e3b54);
	background: var(--wp--preset--color--bes, #8e3b54);
}

/* --- Naam of woord in één keer klaarzetten --- */
.em-pakket__naam {
	display: grid;
	gap: 0.375rem;
}

.em-pakket__naam-label {
	font-weight: 600;
}

.em-pakket__naam-rij {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.em-pakket__naam-veld {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--wp--preset--color--zacht-roze, #efc9c6);
	border-radius: 10px;
	font-size: 1rem;
	text-transform: uppercase;
}

.em-pakket__naam-knop {
	flex: none;
	padding: 0.55rem 1.1rem;
	border: 0;
	border-radius: 10px;
	background: var(--wp--preset--color--salie, #45797b);
	color: #fff;
	font-size: 0.9375rem;
	cursor: pointer;
}

.em-pakket__naam-uitleg {
	margin: 0;
	font-size: 0.8125rem;
	opacity: 0.75;
}

/* --- Het raster: een tegel is een schakelaar --- */
.em-pakket__tegel {
	position: relative;
}

.em-pakket__tegel.is-gekozen .em-pakket__kies {
	border-color: var(--wp--preset--color--bes, #8e3b54);
	background: var(--wp--preset--color--lichtroze, #f9eaea);
}

.em-pakket__tegel-vink {
	position: absolute;
	top: 0.25rem;
	left: 0.25rem;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	background: var(--wp--preset--color--bes, #8e3b54);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.12s ease, transform 0.12s ease;
	pointer-events: none;
}

/* het vinkje zelf: twee streepjes, geen plaatje dat geladen moet worden */
.em-pakket__tegel-vink::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0.3rem;
	height: 0.55rem;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: translateY(-1px) rotate(45deg);
}

.em-pakket__tegel.is-gekozen .em-pakket__tegel-vink {
	opacity: 1;
	transform: scale(1);
}

.em-pakket__tegel-aantal {
	position: absolute;
	top: 0.25rem;
	right: 0.25rem;
	min-width: 1.25rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--bes, #8e3b54);
	color: #fff;
	font-size: 0.75rem;
	line-height: 1.25rem;
	text-align: center;
	pointer-events: none;
}

.em-pakket__tegel-min {
	position: absolute;
	right: 0.25rem;
	bottom: 0.25rem;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--wp--preset--color--bes, #8e3b54);
	border-radius: 50%;
	background: #fff;
	color: var(--wp--preset--color--bes, #8e3b54);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.em-pakket__filter-aantal {
	margin-left: 0.35rem;
	font-size: 0.75rem;
	opacity: 0.6;
}

/* --- Wat je gekozen hebt, op volgorde --- */
.em-pakket__samenvatting {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.em-pakket__chip-weg {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.5rem 0.25rem 0.25rem;
	border: 1px solid var(--wp--preset--color--zacht-roze, #efc9c6);
	border-radius: 999px;
	background: #fff;
	color: inherit;
	font-size: 0.8125rem;
	cursor: pointer;
}

.em-pakket__chip-weg:hover,
.em-pakket__chip-weg:focus-visible {
	border-color: var(--wp--preset--color--bes, #8e3b54);
}

.em-pakket__chip-foto {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.em-pakket__chip-naam {
	max-width: 9rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.em-pakket__chip-kruis {
	opacity: 0.6;
}

/* --- Eén kleur voor alles --- */
.em-pakket__kleur-rij {
	border: 0;
	margin: 0;
	padding: 0;
}

/* Eén regel per ding: naam ervoor, bolletjes erachter. Op een smal scherm
   klapt de naam boven de bolletjes. */
.em-pakket__kleur-regel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.875rem;
	padding: 0.5rem 0;
}

.em-pakket__kleur-regel + .em-pakket__kleur-regel {
	border-top: 1px solid var(--wp--preset--color--lichtroze, #f9eaea);
}

.em-pakket__kleur-naam {
	flex: 0 0 7.5rem;
	font-weight: 600;
	font-size: 0.9375rem;
}

@media (max-width: 30rem) {
	.em-pakket__kleur-naam {
		flex-basis: 100%;
	}
}

.em-pakket__kleur-gekozen {
	margin: 0;
	font-size: 0.875rem;
	opacity: 0.75;
}

.em-pakket__perstuk {
	margin-top: 0.75rem;
	font-size: 0.875rem;
}

.em-pakket__perstuk > summary {
	cursor: pointer;
	opacity: 0.8;
}

.em-pakket__perstuk-vak {
	margin-top: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.em-pakket__balk-vulling,
	.em-pakket__vakje,
	.em-pakket__tegel-vink {
		transition: none;
	}
}