/**
 * EC Catalog
 *
 * Kleuren en radius komen uit de GeneratePress-tokens. Er komen geen nieuwe
 * :root-variabelen bij: componentwaarden staan op het component zelf.
 * Modern CSS: logical properties, clamp(), grid auto-fit/auto-fill, :has(),
 * native <dialog> met @starting-style, color-mix(), forced-colors.
 */

/* ==========================================================================
   Componentwaarden (FIX 1.4.6: afgestemd op het GeneratePress-palet van Emmy's Choice)

   Rol                 Token                                   Contrast op wit
   tekst               --contrast        #564946               8,6 : 1
   tekst-zacht         85% contrast + wit                      5,7 : 1  (4,7 op roze vlak)
   lijn (bediening)    65% contrast + wit                      3,4 : 1  (WCAG 1.4.11: min. 3)
   scheiding           --dust-grey       #EEE8E8               alleen decoratief
   vlak                --base            #FFFFFF
   vlak-zacht          --global-color-9  #F2E7E8               rustige ondergrond
   accent              --rosy-brown      #CB9798               nooit als enige signaal
   fout                --opletten        #B10F2E               7,1 : 1
   ok                  --global-color-6  #7A918D               alleen als tint

   Let op: --base-3 is in dit palet roze (#E5CED0), niet wit. Niet als vlak gebruiken.
   ========================================================================== */

.ec-filter,
.ec-melding,
.ec-fav,
.ec-fav-acties,
.ec-fav-teller,
.ec-uitverkocht,
.ec-filter-chips,
.ec-filter-leeg,
.ec-laadmeer,
.ec-zoek,
.ec-favorieten,
.ec-favkaarten,
.ec-account__lijst,
.ec-modellen,
.ec-model-leeg,
.ec-keuze,
.ec-toast,
.ec-melding-uit,
.ec-meldingen,
.ec-meldingen__uitleg,
.ec-meldingen__leeg,
.ec-meldingen__alles,
.ec-favorieten__gast {
	--ec-tekst: var(--contrast, #564946);
	--ec-tekst-zacht: color-mix(in srgb, var(--contrast, #564946) 85%, var(--base, #fff));
	--ec-vlak: var(--base, #fff);
	--ec-vlak-zacht: var(--global-color-9, #f2e7e8);
	--ec-lijn: color-mix(in srgb, var(--contrast, #564946) 65%, var(--base, #fff));
	--ec-scheiding: var(--dust-grey, #eee8e8);
	--ec-accent: var(--rosy-brown, #cb9798);
	--ec-fout: var(--opletten, #b10f2e);
	--ec-ok: var(--global-color-6, #7a918d);
	--ec-radius: var(--radius-lg, 0.75rem);
	--ec-ruimte: clamp(1rem, 0.75rem + 1.25vw, 1.5rem);
	--ec-raak: 2.75rem; /* 44px: comfortabel tikdoel */
	--ec-duur: 0.25s;
}

/* Scrollen blokkeren zolang een dialoog open is. */
html:has(dialog.ec-filter[open]),
html:has(dialog.ec-melding[open]) {
	overflow: clip;
}

/* ==========================================================================
   Filterpaneel: native dialog als bottom sheet
   ========================================================================== */

dialog.ec-filter {
	position: fixed;
	inset-block: auto 0;
	inset-inline: 0;
	inline-size: min(100%, 40rem);
	max-inline-size: 100%;
	max-block-size: min(88dvh, 56rem);
	margin: 0 auto;
	padding: 0;
	border: 0;
	border-start-start-radius: var(--ec-radius);
	border-start-end-radius: var(--ec-radius);
	background: var(--ec-vlak);
	color: var(--ec-tekst);
	box-shadow: 0 -0.5rem 2rem rgb(0 0 0 / 0.18);
	overflow: hidden;
	translate: 0 100%;
	transition:
		translate var(--ec-duur) ease,
		overlay var(--ec-duur) allow-discrete,
		display var(--ec-duur) allow-discrete;
}

dialog.ec-filter[open] {
	display: flex;
	flex-direction: column;
	translate: 0 0;
}

@starting-style {
	dialog.ec-filter[open] {
		translate: 0 100%;
	}
}

dialog.ec-filter.is-sluiten {
	translate: 0 100%;
}

dialog.ec-filter::backdrop {
	background: rgb(0 0 0 / 0);
	transition:
		background-color var(--ec-duur) ease,
		overlay var(--ec-duur) allow-discrete,
		display var(--ec-duur) allow-discrete;
}

dialog.ec-filter[open]::backdrop {
	background: rgb(0 0 0 / 0.45);
}

@starting-style {
	dialog.ec-filter[open]::backdrop {
		background: rgb(0 0 0 / 0);
	}
}

dialog.ec-filter.is-sluiten::backdrop {
	background: rgb(0 0 0 / 0);
}

.ec-filter__paneel {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-block-size: 0;
	margin: 0;
	padding-block-end: env(safe-area-inset-bottom, 0);
	transition: translate var(--ec-duur) ease;
}

.ec-filter__paneel.is-slepen {
	transition: none;
}

.ec-filter__kop {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: calc(var(--ec-ruimte) + 0.25rem) var(--ec-ruimte) 0.75rem;
	border-block-end: 1px solid var(--ec-vlak-zacht);
	touch-action: none;
}

.ec-filter__greep {
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-start: 50%;
	inline-size: 2.5rem;
	block-size: 0.25rem;
	translate: -50% 0;
	border-radius: 999px;
	background: var(--ec-lijn);
}

.ec-filter__kopje {
	margin: 0;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
}

.ec-filter__sluit {
	display: inline-grid;
	place-items: center;
	inline-size: var(--ec-raak);
	block-size: var(--ec-raak);
	margin-inline-end: -0.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ec-tekst);
	cursor: pointer;
}

.ec-filter__sluit:hover {
	background: var(--ec-vlak-zacht);
	color: var(--ec-tekst);
}

.ec-filter__inhoud {
	flex: 1 1 auto;
	min-block-size: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0.5rem var(--ec-ruimte) var(--ec-ruimte);
	scrollbar-gutter: stable;
}

.ec-filter__voet {
	display: flex;
	gap: 0.75rem;
	padding: 0.75rem var(--ec-ruimte) var(--ec-ruimte);
	border-block-start: 1px solid var(--ec-vlak-zacht);
	background: var(--ec-vlak);
}

/* ==========================================================================
   Knoppen (paneel, melding, laad meer)
   ========================================================================== */

.ec-filter__wis,
.ec-filter__toon,
.ec-melding__knop,
.ec-laadmeer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 3rem;
	padding-inline: 1.25rem;
	border-radius: var(--ec-radius);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ec-filter__wis,
.ec-melding__knop--licht,
.ec-laadmeer {
	border: 1px solid var(--ec-tekst);
	background: transparent;
	color: var(--ec-tekst);
}

.ec-filter__wis:hover,
.ec-melding__knop--licht:hover,
.ec-laadmeer:hover {
	background: var(--ec-vlak-zacht);
	color: var(--ec-tekst);
}

.ec-filter__toon,
.ec-melding__knop:not(.ec-melding__knop--licht) {
	flex: 1 1 auto;
	border: 1px solid var(--ec-tekst);
	background: var(--ec-tekst);
	color: var(--ec-vlak);
}

.ec-filter__toon:hover,
.ec-melding__knop:not(.ec-melding__knop--licht):hover {
	background: color-mix(in srgb, var(--ec-tekst) 85%, #000);
	color: var(--ec-vlak);
}

.ec-filter__toon:disabled,
.ec-melding__knop:disabled {
	border-color: var(--ec-lijn);
	background: var(--ec-vlak-zacht);
	color: var(--ec-tekst-zacht);
	cursor: not-allowed;
}

.ec-filter__toon[aria-busy="true"],
.ec-laadmeer[aria-busy="true"] {
	cursor: progress;
}

/* ==========================================================================
   Groepen en keuzes (paneel en zijbalk)
   ========================================================================== */

.ec-filter__groep {
	min-inline-size: 0;
	margin: 0;
	padding: 1rem 0;
	border: 0;
	border-block-end: 1px solid var(--ec-vlak-zacht);
}

.ec-filter__groep:last-child {
	border-block-end: 0;
}

.ec-filter__titel {
	display: block;
	float: none;
	inline-size: 100%;
	margin: 0 0 0.75rem;
	padding: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ec-tekst);
}

.ec-filter__zoekveld,
.ec-melding__veld {
	inline-size: 100%;
	min-block-size: 3rem;
	padding-inline: 1rem;
	border: 1px solid var(--ec-tekst-zacht);
	border-radius: var(--ec-radius);
	background: var(--ec-vlak);
	color: var(--ec-tekst);
	font: inherit;
	font-size: 1rem; /* Voorkomt inzoomen op iOS. */
}

.ec-filter__keuzes--lijst {
	display: grid;
	gap: 0.25rem 1rem;
}

.ec-filter__keuzes--kleur {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
	gap: 0.25rem 1rem;
}

/* auto-fill houdt tegels even breed, ook als er maar een paar zijn. */
.ec-filter__keuzes--tegel {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 4.25rem), 1fr));
	gap: 0.5rem;
}

.ec-filter__keuze {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-block-size: var(--ec-raak);
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--ec-tekst);
	cursor: pointer;
}

.ec-filter__invoer {
	flex: 0 0 auto;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin: 0;
	accent-color: var(--ec-tekst);
	cursor: pointer;
}

.ec-filter__label {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.ec-filter__aantal {
	flex: 0 0 auto;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	color: var(--ec-tekst-zacht);
}

.ec-filter__aantal::before { content: "("; }
.ec-filter__aantal::after { content: ")"; }

/* Kleur en tegel: verborgen invoer, het label is het vlak. */
.ec-filter__groep--kleur .ec-filter__invoer,
.ec-filter__groep--tegel .ec-filter__invoer {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	opacity: 0;
}

.ec-filter__swatch {
	flex: 0 0 auto;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: 50%;
	background: var(--ec-swatch, var(--ec-vlak-zacht));
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.2);
}

.ec-filter__swatch--leeg {
	background: repeating-linear-gradient(45deg, var(--ec-vlak-zacht) 0 4px, var(--ec-vlak) 4px 8px);
}

.ec-filter__keuze:has(.ec-filter__invoer:checked) .ec-filter__swatch {
	box-shadow: 0 0 0 2px var(--ec-vlak), 0 0 0 4px var(--ec-tekst);
}

.ec-filter__keuze:has(.ec-filter__invoer:checked) .ec-filter__label {
	font-weight: 600;
}

.ec-filter__groep--tegel .ec-filter__keuze {
	justify-content: center;
	min-block-size: 3rem;
	padding-inline: 0.5rem;
	border: 1px solid var(--ec-tekst-zacht);
	border-radius: var(--ec-radius);
	background: var(--ec-vlak);
	font-weight: 500;
	text-align: center;
}

.ec-filter__groep--tegel .ec-filter__keuze:hover {
	border-color: var(--ec-tekst);
}

.ec-filter__groep--tegel .ec-filter__keuze:has(.ec-filter__invoer:checked) {
	border-color: var(--ec-tekst);
	background: var(--ec-tekst);
	color: var(--ec-vlak);
}

/* Focus is zichtbaar op het vlak, want de invoer zelf is onzichtbaar. */
.ec-filter__keuze:has(.ec-filter__invoer:focus-visible) {
	outline: 2px solid var(--ec-tekst);
	outline-offset: 2px;
	border-radius: var(--ec-radius);
}

/*
 * Niet leverbaar in de huidige combinatie. De tekst houdt vol contrast (leesbaar,
 * Lighthouse-proof); het verschil zit in de stippellijn en het doorhalen.
 */
.ec-filter__keuze.is-uit .ec-filter__label {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.ec-filter__groep--tegel .ec-filter__keuze.is-uit {
	border-style: dashed;
	background: var(--ec-vlak-zacht);
}

.ec-filter__groep--kleur .ec-filter__keuze.is-uit .ec-filter__swatch {
	opacity: 0.4;
}

/* Belletje: hier kun je een melding aanzetten. */
[data-ec-melding-mogelijk] .ec-filter__keuze.is-uit::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 0.875rem;
	block-size: 0.875rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 0 0-5-5.9V4a1 1 0 1 0-2 0v1.1A6 6 0 0 0 6 11v5l-2 2v1h16v-1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 0 0-5-5.9V4a1 1 0 1 0-2 0v1.1A6 6 0 0 0 6 11v5l-2 2v1h16v-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ec-filter__groep--tegel[data-ec-melding-mogelijk] .ec-filter__keuze.is-uit::after {
	position: absolute;
	inset-block-start: 0.25rem;
	inset-inline-end: 0.25rem;
	inline-size: 0.75rem;
	block-size: 0.75rem;
}

/* ==========================================================================
   Zijbalk-variant
   ========================================================================== */

.ec-filter--inline {
	display: block;
}

.ec-filter--inline .ec-filter__groep {
	padding-block: 0.75rem;
}

.ec-filter--inline .ec-filter__keuzes--kleur {
	grid-template-columns: 1fr;
}

/* ==========================================================================
   Actieve filters
   ========================================================================== */

.ec-filter-chips {
	margin-block-end: 1rem;
}

.ec-filter-chips__lijst {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-filter-chips__chip,
.ec-filter-chips__wis {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-block-size: var(--ec-raak);
	padding-inline: 1rem;
	border-radius: 999px;
	font-size: 0.9375rem;
	line-height: 1.2;
	color: var(--ec-tekst);
}

.ec-filter-chips__chip {
	background: var(--ec-vlak-zacht);
	text-decoration: none;
}

.ec-filter-chips__chip:hover {
	background: color-mix(in srgb, var(--ec-vlak-zacht) 70%, var(--ec-lijn));
	color: var(--ec-tekst);
}

.ec-filter-chips__wis {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ec-filter-leeg {
	margin-block: 1rem 2rem;
	max-inline-size: 60ch;
	text-wrap: pretty;
}

/* ==========================================================================
   Laad meer
   ========================================================================== */

.ec-laadmeer {
	display: flex;
	inline-size: fit-content;
	min-inline-size: min(100%, 14rem);
	margin: 2rem auto;
}

/* ==========================================================================
   Favorieten: hartjes en volgknoppen
   ========================================================================== */

ul.products li.product:has(> .ec-fav--kaart) {
	position: relative;
}

.ec-fav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-block-size: var(--ec-raak);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ec-tekst);
	font: inherit;
	cursor: pointer;
}

.ec-fav__icoon {
	flex: 0 0 auto;
	transition: scale 0.15s ease;
}

.ec-fav[aria-pressed="true"] {
	color: var(--ec-tekst);
}

/* Bewaard: gevuld in het accent, omtrek in tekstkleur. De vorm blijft zo ook
   zonder kleurwaarneming herkenbaar (gevuld tegenover open). */
.ec-fav[aria-pressed="true"] .ec-fav__icoon path {
	fill: var(--ec-accent);
	stroke: var(--ec-tekst);
}

.ec-fav:active .ec-fav__icoon {
	scale: 0.88;
}

.ec-fav__icoon {
	inline-size: 1.125rem;
	block-size: 1.125rem;
}

/*
 * FIX 1.4.5: kleiner en rustiger. Zichtbaar 32px, tikvlak blijft 44px via ::before.
 */
.ec-fav--kaart {
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-end: 0.5rem;
	z-index: 2;
	inline-size: 2rem;
	min-block-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--ec-vlak) 85%, transparent);
	box-shadow: 0 0 0 1px var(--ec-scheiding);
	color: var(--ec-tekst);
}

.ec-fav--kaart::before {
	content: "";
	position: absolute;
	inset: -0.375rem;
}

.ec-fav--kaart .ec-fav__icoon {
	inline-size: 1rem;
	block-size: 1rem;
}

.ec-fav--kaart:hover {
	color: var(--ec-tekst);
	background: var(--ec-vlak);
}

.ec-fav--kaart[aria-pressed="true"] {
	color: var(--ec-tekst);
	background: var(--ec-vlak);
}

.ec-fav-acties {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1.25rem;
	margin-block: 0.75rem;
}

/* Productpagina: tekstlink met klein hartje, geen knopvorm. */
.ec-fav--tekst {
	gap: 0.375rem;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--ec-tekst-zacht);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.ec-fav--tekst .ec-fav__icoon {
	inline-size: 1rem;
	block-size: 1rem;
}

.ec-fav--tekst:hover {
	color: var(--ec-tekst);
	background: transparent;
	text-decoration-color: currentColor;
}

.ec-fav--tekst[aria-pressed="true"] {
	color: var(--ec-tekst);
}



.ec-fav__link {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--ec-raak);
	font-size: 0.875rem;
	color: var(--ec-tekst);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ec-fav__link[hidden] {
	display: none;
}

/* ==========================================================================
   FIX 1.4.5: bevestiging na bewaren ("Bewaard in je favorieten · Bekijk")
   ========================================================================== */

.ec-toast {
	position: fixed;
	inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
	inset-inline: 1rem;
	z-index: 10001;
	display: flex;
	align-items: center;
	gap: 0.75rem 1rem;
	inline-size: fit-content;
	max-inline-size: min(28rem, 100% - 2rem);
	margin-inline: auto;
	padding: 0.75rem 1rem;
	border-radius: var(--ec-radius);
	background: var(--ec-tekst);
	color: var(--ec-vlak);
	box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.2);
	font-size: 0.9375rem;
	line-height: 1.35;
	opacity: 0;
	translate: 0 0.5rem;
	transition: opacity 0.2s ease, translate 0.2s ease;
}

.ec-toast.is-zichtbaar {
	opacity: 1;
	translate: 0 0;
}

.ec-toast[hidden] {
	display: none;
}

.ec-toast__icoon {
	flex: 0 0 auto;
	inline-size: 1rem;
	block-size: 1rem;
	color: var(--ec-accent);
}

.ec-toast__icoon path {
	fill: currentColor;
}

.ec-toast__tekst {
	flex: 1 1 auto;
}

.ec-toast__actie {
	flex: 0 0 auto;
	min-block-size: 2.75rem;
	display: inline-flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ec-vlak);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
	cursor: pointer;
}

.ec-toast__actie:hover,
.ec-toast__actie:focus-visible {
	color: var(--ec-vlak);
	text-decoration-thickness: 2px;
}

.ec-toast__actie:focus-visible {
	outline: 2px solid var(--ec-vlak);
	outline-offset: 2px;
}

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

.ec-fav-teller {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	min-block-size: var(--ec-raak);
	color: inherit;
	text-decoration: none;
}

.ec-fav-teller__aantal {
	font-size: 0.8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Uitverkochte maten op de productpagina
   ========================================================================== */

.ec-uitverkocht {
	margin-block: 1rem;
	border: 1px solid var(--ec-scheiding);
	border-radius: var(--ec-radius);
	background: var(--ec-vlak);
	interpolate-size: allow-keywords;
}

.ec-uitverkocht__vraag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-block-size: 3rem;
	padding-inline: 1rem;
	font-weight: 600;
	color: var(--ec-tekst);
	cursor: pointer;
	list-style: none;
}

.ec-uitverkocht__vraag::-webkit-details-marker {
	display: none;
}

.ec-uitverkocht__vraag::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 0.6rem;
	block-size: 0.6rem;
	border-block-end: 2px solid currentColor;
	border-inline-end: 2px solid currentColor;
	rotate: 45deg;
	translate: 0 -25%;
	transition: rotate 0.2s ease;
}

.ec-uitverkocht[open] .ec-uitverkocht__vraag::after {
	rotate: 225deg;
	translate: 0 25%;
}

.ec-uitverkocht::details-content {
	block-size: 0;
	overflow: clip;
	transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete;
}

.ec-uitverkocht[open]::details-content {
	block-size: auto;
}

.ec-uitverkocht__inhoud {
	padding: 0 1rem 1rem;
}

.ec-uitverkocht__uitleg {
	margin: 0 0 0.75rem;
	text-wrap: pretty;
}

.ec-uitverkocht__lijst {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 6rem), 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-uitverkocht__knop {
	inline-size: 100%;
	min-block-size: 3rem;
	padding-inline: 0.5rem;
	border: 1px dashed var(--ec-tekst-zacht);
	border-radius: var(--ec-radius);
	background: var(--ec-vlak-zacht);
	color: var(--ec-tekst);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.ec-uitverkocht__knop:hover {
	border-style: solid;
	border-color: var(--ec-tekst);
	background: var(--ec-vlak);
	color: var(--ec-tekst);
}

/* ==========================================================================
   Meldingsdialoog
   ========================================================================== */

dialog.ec-melding {
	inline-size: min(100% - 2rem, 30rem);
	max-block-size: min(90dvh, 40rem);
	margin: auto;
	padding: var(--ec-ruimte);
	border: 0;
	border-radius: var(--ec-radius);
	background: var(--ec-vlak);
	color: var(--ec-tekst);
	box-shadow: 0 1rem 3rem rgb(0 0 0 / 0.25);
	opacity: 0;
	scale: 0.96;
	transition:
		opacity 0.2s ease,
		scale 0.2s ease,
		overlay 0.2s allow-discrete,
		display 0.2s allow-discrete;
}

dialog.ec-melding[open] {
	opacity: 1;
	scale: 1;
}

@starting-style {
	dialog.ec-melding[open] {
		opacity: 0;
		scale: 0.96;
	}
}

dialog.ec-melding::backdrop {
	background: rgb(0 0 0 / 0.45);
}

.ec-melding__form {
	display: grid;
	gap: 1rem;
	margin: 0;
}

.ec-melding__kop {
	margin: 0;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	line-height: 1.25;
	text-wrap: balance;
}

.ec-melding__tekst,
.ec-melding__hulp,
.ec-melding__adres {
	margin: 0;
	text-wrap: pretty;
}

.ec-melding__hulp {
	margin-block-start: 0.5rem;
	font-size: 0.9375rem;
	color: var(--ec-tekst-zacht);
}

.ec-melding__label {
	display: block;
	margin-block-end: 0.375rem;
	font-weight: 600;
}

.ec-melding__veld[aria-invalid="true"],
.ec-melding__vinkje[aria-invalid="true"] {
	outline: 2px solid var(--ec-fout);
	outline-offset: 2px;
}

.ec-melding__akkoord {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin-block-start: 1rem;
}

.ec-melding__vinkje {
	flex: 0 0 auto;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin: 0.15rem 0 0;
	accent-color: var(--ec-tekst);
}

.ec-melding__honing {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ec-melding__status:empty {
	display: none;
}

.ec-melding__status {
	margin: 0;
	padding: 0.75rem 1rem;
	border-radius: var(--ec-radius);
	background: var(--ec-vlak-zacht);
}

.ec-melding__status.is-ok {
	border-inline-start: 4px solid var(--ec-ok);
	background: color-mix(in srgb, var(--ec-ok) 14%, var(--ec-vlak));
	color: var(--ec-tekst);
}

.ec-melding__status.is-fout {
	border-inline-start: 4px solid var(--ec-fout);
	background: color-mix(in srgb, var(--ec-fout) 8%, var(--ec-vlak));
	color: var(--ec-fout);
}

.ec-melding__link {
	color: inherit;
	font-weight: 600;
}

.ec-melding__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.ec-melding__knoppen > * {
	flex: 1 1 10rem;
}

.ec-melding-uit {
	padding: 0.75rem var(--ec-ruimte, 1rem);
	border-block-end: 4px solid var(--ec-ok);
	background: color-mix(in srgb, var(--ec-ok) 14%, var(--ec-vlak));
	color: var(--ec-tekst);
	text-align: center;
}

.ec-melding-uit p {
	margin: 0;
}

/* ==========================================================================
   Favorietenlijst en Mijn account
   ========================================================================== */

.ec-favorieten__kop,
.ec-account__kop {
	margin-block: 1.5rem 0.75rem;
	text-wrap: balance;
}

.ec-favorieten__modellen,
.ec-account__lijst {
	display: grid;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.ec-favorieten__model,
.ec-account__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	min-block-size: 3rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--ec-scheiding);
	border-radius: var(--ec-radius);
}

.ec-favorieten__mail {
	font-size: 0.875rem;
	color: var(--ec-tekst-zacht);
}

.ec-account__actie {
	margin: 0;
}

.ec-account__knop {
	min-block-size: var(--ec-raak);
	padding-inline: 1rem;
	border: 1px solid var(--ec-tekst-zacht);
	border-radius: var(--ec-radius);
	background: transparent;
	color: var(--ec-tekst);
	font: inherit;
	cursor: pointer;
}

.ec-favorieten__leeg,
.ec-favorieten__laden {
	max-inline-size: 60ch;
	text-wrap: pretty;
}

/* ==========================================================================
   Zoeksuggesties
   ========================================================================== */

.ec-zoek {
	position: relative;
}

.ec-zoek__vak {
	position: absolute;
	inset-block-start: calc(100% + 0.25rem);
	inset-inline: 0;
	z-index: 1000;
	min-inline-size: min(22rem, 92vw);
	max-block-size: 70dvh;
	overflow-y: auto;
	border: 1px solid var(--ec-vlak-zacht);
	border-radius: var(--ec-radius);
	background: var(--ec-vlak);
	box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.14);
	text-align: start;
}

.ec-zoek__vak[hidden],
.ec-zoek__lijst[hidden],
.ec-zoek__leeg[hidden],
.ec-zoek__alle[hidden] {
	display: none;
}

.ec-zoek__lijst {
	margin: 0;
	padding: 0.25rem 0;
	list-style: none;
}

.ec-zoek__optie {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-block-size: 3.5rem;
	padding: 0.375rem 0.75rem;
	color: var(--ec-tekst);
	cursor: pointer;
}

.ec-zoek__optie[aria-selected="true"],
.ec-zoek__optie:hover {
	background: var(--ec-vlak-zacht);
}

.ec-zoek__beeld {
	flex: 0 0 3rem;
	inline-size: 3rem;
	block-size: 3rem;
	object-fit: cover;
	border-radius: calc(var(--ec-radius) / 2);
	background: var(--ec-vlak-zacht);
}

.ec-zoek__info {
	display: grid;
	min-inline-size: 0;
}

.ec-zoek__titel {
	overflow: hidden;
	font-size: 0.9375rem;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ec-zoek__prijs {
	font-size: 0.875rem;
	color: var(--ec-tekst-zacht);
}

.ec-zoek__leeg {
	margin: 0;
	padding: 0.75rem;
	color: var(--ec-tekst-zacht);
}

.ec-zoek__alle {
	display: block;
	padding: 0.75rem;
	border-block-start: 1px solid var(--ec-vlak-zacht);
	font-weight: 600;
	color: var(--ec-tekst);
}

/* ==========================================================================
   Toegankelijkheid: hoog contrast en minder beweging
   ========================================================================== */

@media (forced-colors: active) {
	.ec-filter__keuze:has(.ec-filter__invoer:checked),
	.ec-filter__groep--tegel .ec-filter__keuze:has(.ec-filter__invoer:checked) {
		outline: 3px solid Highlight;
	}

	.ec-filter__swatch {
		forced-color-adjust: none;
		border: 1px solid CanvasText;
	}

	.ec-fav[aria-pressed="true"] .ec-fav__icoon path {
		fill: Highlight;
	}
}

@media (prefers-reduced-motion: reduce) {
	dialog.ec-filter,
	dialog.ec-filter::backdrop,
	dialog.ec-melding,
	.ec-filter__paneel,
	.ec-uitverkocht::details-content,
	.ec-fav__icoon {
		transition: none;
	}
}

/* ==========================================================================
   Modellenoverzicht [ec_modellen] en leeg modelarchief
   ========================================================================== */

.ec-modellen,
.ec-model-leeg {
}

.ec-modellen {
	margin-block: 2rem;
}

.ec-modellen__kop {
	margin-block-end: 1rem;
	text-wrap: balance;
}

.ec-modellen__lijst {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ec-modellen__item {
	display: grid;
	grid-template-rows: 1fr auto;
	gap: 0.5rem;
	container-type: inline-size;
}

.ec-modellen__link {
	display: grid;
	gap: 0.25rem;
	color: var(--ec-tekst);
	text-decoration: none;
}

.ec-modellen__beeld {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--ec-radius);
	background: var(--ec-vlak-zacht);
}

.ec-modellen__item.is-uitverkocht .ec-modellen__beeld {
	filter: grayscale(0.6);
}

.ec-modellen__naam {
	font-weight: 600;
}

.ec-modellen__status {
	font-size: 0.875rem;
	color: var(--ec-tekst-zacht);
}

.ec-modellen__item.is-uitverkocht .ec-modellen__status {
	font-weight: 600;
	color: var(--ec-tekst);
}

.ec-modellen__item .ec-fav--tekst {
	justify-content: center;
	inline-size: 100%;
}

.ec-model-leeg {
	display: grid;
	justify-items: start;
	gap: 1rem;
	margin-block: 2rem;
	padding: clamp(1rem, 0.75rem + 1.5vw, 1.75rem);
	border: 1px solid var(--ec-scheiding);
	border-radius: var(--ec-radius);
	background: var(--ec-vlak-zacht);
}

.ec-model-leeg__tekst {
	margin: 0;
	max-inline-size: 60ch;
	font-size: 1.0625rem;
	text-wrap: pretty;
}

/* ==========================================================================
   Keuze in de meldingsdialoog (bijv. maat 46 in twee lengtes)
   ========================================================================== */

.ec-melding__keuzes {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ec-melding__opties {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
	gap: 0.5rem;
}

.ec-melding__optie {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 3rem;
	padding-inline: 0.75rem;
	border: 1px solid var(--ec-tekst-zacht);
	border-radius: var(--ec-radius);
	background: var(--ec-vlak);
	font-weight: 500;
	text-align: center;
	cursor: pointer;
}

.ec-melding__radio {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ec-melding__optie:has(.ec-melding__radio:checked) {
	border-color: var(--ec-tekst);
	background: var(--ec-tekst);
	color: var(--ec-vlak);
}

.ec-melding__optie:has(.ec-melding__radio:focus-visible) {
	outline: 2px solid var(--ec-tekst);
	outline-offset: 2px;
}

@media (forced-colors: active) {
	.ec-melding__optie:has(.ec-melding__radio:checked) {
		outline: 3px solid Highlight;
	}
}

/* ==========================================================================
   Maatkiezer (vervangt ThemeHigh Variation Swatches)
   ========================================================================== */

.is-ec-keuze .ec-keuze-bron,
.ec-keuze-bron:has(+ .ec-keuze) {
	display: none;
}

.ec-keuze {
	--ec-radius: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ec-keuze .ec-keuze__optie {
	position: relative;
	display: inline-grid;
	place-items: center;
	min-inline-size: 2.8125rem;  /* 45px, zoals eerder */
	min-block-size: 2.8125rem;
	padding: 0 0.625rem;
	border: 1px solid var(--ec-lijn);
	border-radius: 0;
	background: var(--ec-vlak);
	color: var(--ec-tekst);
	font: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.ec-keuze--kleur .ec-keuze__optie {
	padding-inline: 0.875rem;
}

.ec-keuze .ec-keuze__optie:hover {
	border-color: var(--ec-tekst-zacht);
	color: var(--ec-tekst);
	background: var(--ec-vlak);
}

/* Gekozen: gevuld, net als de hoofdknop. Een randkleur alleen is in daglicht niet te zien. */
.ec-keuze .ec-keuze__optie[aria-pressed="true"] {
	border-color: var(--ec-tekst);
	background: var(--ec-tekst);
	color: var(--ec-vlak);
}

.ec-keuze .ec-keuze__optie:focus-visible {
	outline: 2px solid var(--ec-tekst);
	outline-offset: 2px;
}

/* Uitverkocht: rustig, maar leesbaar (contrast blijft voldoende) en klikbaar voor een melding. */
.ec-keuze .ec-keuze__optie.is-uit {
	border-style: dashed;
	background:
		linear-gradient(to top right, transparent calc(50% - 0.5px), var(--ec-lijn) calc(50% - 0.5px), var(--ec-lijn) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
		var(--ec-vlak-zacht);
	color: var(--ec-tekst-zacht);
}

.ec-keuze .ec-keuze__optie.is-uit::after {
	content: "";
	position: absolute;
	inset-block-start: 0.1875rem;
	inset-inline-end: 0.1875rem;
	inline-size: 0.6875rem;
	block-size: 0.6875rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 0 0-5-5.9V4a1 1 0 1 0-2 0v1.1A6 6 0 0 0 6 11v5l-2 2v1h16v-1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-6V11a6 6 0 0 0-5-5.9V4a1 1 0 1 0-2 0v1.1A6 6 0 0 0 6 11v5l-2 2v1h16v-1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Niet in deze combinatie: zichtbaar, maar duidelijk tweede keus. */
.ec-keuze .ec-keuze__optie.is-nvt:not([aria-pressed="true"]) {
	border-style: dotted;
	color: var(--ec-tekst-zacht);
}

@media (forced-colors: active) {
	.ec-keuze .ec-keuze__optie[aria-pressed="true"] {
		outline: 3px solid Highlight;
	}
}

/* ==========================================================================
   FIX 1.4.2: filters in de bestaande zijbalk-accordeons
   ========================================================================== */

/* Accordeon zonder filter (bijv. lengtemaat bij jassen) verbergen. */
.gb-accordion__item:has([data-ec-leeg]),
.facetwp-group:has([data-ec-leeg]) {
	display: none;
}

/* De accordeon heeft al een titel; de eigen titel alleen voor schermlezers. */
.ec-filter--accordeon .ec-filter__titel {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ec-filter--accordeon .ec-filter__groep {
	padding-block: 0;
	border-block-end: 0;
}

/* ==========================================================================
   FIX 1.4.3: favorietenlijst, kaart per product of per kleur
   ========================================================================== */

.ec-favkaarten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
	gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.ec-favkaart {
	position: relative;
	border: 1px solid var(--ec-scheiding);
	border-radius: var(--ec-radius);
	background: var(--ec-vlak);
	overflow: hidden;
}

.ec-favkaart__link {
	display: grid;
	gap: 0.25rem;
	padding-block-end: 1rem;
	color: var(--ec-tekst);
	text-align: center;
	text-decoration: none;
}

.ec-favkaart__beeld {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 4;
	object-fit: contain;
	margin-block-end: 0.5rem;
	background: var(--ec-vlak);
}

.ec-favkaart__beeld--leeg {
	background: var(--ec-vlak-zacht);
}

.ec-favkaart__naam {
	padding-inline: 0.75rem;
	font-weight: 600;
	text-wrap: balance;
}

.ec-favkaart__kleur,
.ec-favkaart__prijs {
	padding-inline: 0.75rem;
	font-size: 0.9375rem;
}

.ec-favkaart__kleur {
	color: var(--ec-tekst-zacht);
}

.ec-favkaart__status {
	justify-self: center;
	margin-block-start: 0.25rem;
	padding: 0.125rem 0.625rem;
	border: 1px dashed var(--ec-tekst-zacht);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 600;
}

/* ==========================================================================
   FIX 1.4.8: schakelaars voor meldingen, teller in het menu, gastentekst
   ========================================================================== */

.ec-schakelaar {
	--ec-tekst: var(--contrast, #564946);
	--ec-vlak: var(--base, #fff);
	--ec-lijn: color-mix(in srgb, var(--contrast, #564946) 65%, var(--base, #fff));
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ec-tekst);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
}

.ec-schakelaar:hover,
.ec-schakelaar:focus {
	background: transparent;
	color: var(--ec-tekst);
}

.ec-schakelaar__baan {
	position: relative;
	flex: 0 0 auto;
	inline-size: 2.5rem;
	block-size: 1.5rem;
	border: 1px solid var(--ec-lijn);
	border-radius: 999px;
	background: var(--ec-vlak);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ec-schakelaar__knop {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0.1875rem;
	inline-size: 1.0625rem;
	block-size: 1.0625rem;
	border-radius: 50%;
	background: var(--ec-lijn);
	translate: 0 -50%;
	transition: translate 0.15s ease, background-color 0.15s ease;
}

.ec-schakelaar[aria-checked="true"] .ec-schakelaar__baan {
	border-color: var(--ec-tekst);
	background: var(--ec-tekst);
}

.ec-schakelaar[aria-checked="true"] .ec-schakelaar__knop {
	background: var(--ec-vlak);
	translate: 0.9375rem -50%;
}

.ec-schakelaar:focus-visible {
	outline: none;
}

.ec-schakelaar:focus-visible .ec-schakelaar__baan {
	outline: 2px solid var(--ec-tekst);
	outline-offset: 2px;
}

.ec-schakelaar:disabled {
	cursor: progress;
	opacity: 0.7;
}

.ec-schakelaar__tekst {
	min-inline-size: 4.5em;
	text-align: start;
}

@media (forced-colors: active) {
	.ec-schakelaar__baan {
		border-color: CanvasText;
	}

	.ec-schakelaar[aria-checked="true"] .ec-schakelaar__baan {
		background: Highlight;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ec-schakelaar__baan,
	.ec-schakelaar__knop {
		transition: none;
	}
}

/* Meldingen in Mijn account */
.ec-meldingen {
	display: grid;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.ec-meldingen__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--ec-scheiding);
	border-radius: var(--ec-radius);
	background: var(--ec-vlak);
}

.ec-meldingen__item.is-uit .ec-meldingen__naam {
	color: var(--ec-tekst-zacht);
}

.ec-meldingen__naam {
	flex: 1 1 16rem;
	color: var(--ec-tekst);
	text-wrap: pretty;
}

.ec-meldingen__actie {
	margin: 0;
}

.ec-meldingen__uitleg,
.ec-meldingen__leeg,
.ec-favorieten__gast {
	max-inline-size: 60ch;
	text-wrap: pretty;
}

.ec-meldingen__alles-knop {
	min-block-size: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ec-tekst);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.ec-meldingen__alles-knop:hover,
.ec-meldingen__alles-knop:focus {
	background: transparent;
	color: var(--ec-tekst);
}

.ec-favorieten__gast {
	padding: 0.75rem 1rem;
	border-radius: var(--ec-radius);
	background: var(--ec-vlak-zacht);
	color: var(--ec-tekst);
}

.ec-favorieten__gast a {
	color: var(--ec-tekst);
	font-weight: 600;
}

/* Teller achter de menulink "Favorieten" */
.ec-nav-teller {
	display: inline-grid;
	place-items: center;
	min-inline-size: 1.25rem;
	block-size: 1.25rem;
	margin-inline-start: 0.375rem;
	padding-inline: 0.3125rem;
	border-radius: 999px;
	background: var(--contrast, #564946);
	color: var(--base, #fff);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	vertical-align: middle;
}

.ec-nav-teller[hidden] {
	display: none;
}

.ec-favorieten__model > a {
	color: var(--ec-tekst);
	font-weight: 600;
}

/* ==========================================================================
   FIX 1.5.0: inloggen met een link (zonder wachtwoord)
   ========================================================================== */

.ec-inlog,
.ec-inlog-form,
.ec-inlog-alt,
.ec-melding__privacy {
	--ec-tekst: var(--contrast, #564946);
	--ec-tekst-zacht: color-mix(in srgb, var(--contrast, #564946) 85%, var(--base, #fff));
	--ec-vlak: var(--base, #fff);
	--ec-vlak-zacht: var(--global-color-9, #f2e7e8);
	--ec-lijn: color-mix(in srgb, var(--contrast, #564946) 65%, var(--base, #fff));
	--ec-scheiding: var(--dust-grey, #eee8e8);
	--ec-fout: var(--opletten, #b10f2e);
	--ec-ok: var(--global-color-6, #7a918d);
	--ec-radius: var(--radius-lg, 0.75rem);
}

.ec-inlog {
	display: grid;
	place-items: center;
	min-block-size: 50vh;
	padding: clamp(2rem, 1rem + 5vw, 5rem) 1rem;
}

.ec-inlog__kaart {
	inline-size: min(100%, 30rem);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border: 1px solid var(--ec-scheiding);
	border-radius: var(--ec-radius);
	background: var(--ec-vlak);
	text-align: center;
}

.ec-inlog__kop {
	margin: 0 0 0.75rem;
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	text-wrap: balance;
}

.ec-inlog__tekst {
	margin: 0 0 1.5rem;
	font-size: 1.0625rem;
	text-wrap: pretty;
}

.ec-inlog__knop {
	inline-size: 100%;
	min-block-size: 3.25rem;
	padding-inline: 1.5rem;
	border: 0;
	border-radius: var(--ec-radius);
	background: var(--ec-tekst);
	color: var(--ec-vlak);
	font: inherit;
	font-size: 1.125rem;
	font-weight: 600;
	cursor: pointer;
}

.ec-inlog__knop:hover,
.ec-inlog__knop:focus-visible {
	background: color-mix(in srgb, var(--ec-tekst) 85%, #000);
	color: var(--ec-vlak);
}

.ec-inlog__knop:focus-visible {
	outline: 2px solid var(--ec-tekst);
	outline-offset: 3px;
}

/* Formulier "Stuur mij een link" */
.ec-inlog-form {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	text-align: start;
}

.ec-inlog-form__label {
	font-weight: 600;
	color: var(--ec-tekst);
}

.ec-inlog-form__rij {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ec-inlog-form__veld {
	flex: 1 1 14rem;
	min-block-size: 3rem;
	padding-inline: 1rem;
	border: 1px solid var(--ec-lijn);
	border-radius: var(--ec-radius);
	background: var(--ec-vlak);
	color: var(--ec-tekst);
	font: inherit;
	font-size: 1rem;
}

.ec-inlog-form__veld[aria-invalid="true"] {
	outline: 2px solid var(--ec-fout);
	outline-offset: 1px;
}

.ec-inlog-form__knop {
	flex: 0 0 auto;
	min-block-size: 3rem;
	padding-inline: 1.25rem;
	border: 0;
	border-radius: var(--ec-radius);
	background: var(--ec-tekst);
	color: var(--ec-vlak);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.ec-inlog-form__knop:hover,
.ec-inlog-form__knop:focus-visible {
	background: color-mix(in srgb, var(--ec-tekst) 85%, #000);
	color: var(--ec-vlak);
}

.ec-inlog-form__knop:disabled {
	cursor: progress;
	opacity: 0.75;
}

.ec-inlog-form__status:empty {
	display: none;
}

.ec-inlog-form__status {
	margin: 0;
	padding: 0.75rem 1rem;
	border-radius: var(--ec-radius);
	background: var(--ec-vlak-zacht);
	color: var(--ec-tekst);
}

.ec-inlog-form__status.is-ok {
	border-inline-start: 4px solid var(--ec-ok);
	background: color-mix(in srgb, var(--ec-ok) 14%, var(--ec-vlak));
}

.ec-inlog-form__status.is-fout {
	border-inline-start: 4px solid var(--ec-fout);
	background: color-mix(in srgb, var(--ec-fout) 8%, var(--ec-vlak));
	color: var(--ec-fout);
}

/* Onder het inlogformulier van Mijn account */
.ec-inlog-alt {
	margin-block: 2rem;
	padding: clamp(1rem, 0.75rem + 1vw, 1.5rem);
	border: 1px solid var(--ec-scheiding);
	border-radius: var(--ec-radius);
	background: var(--ec-vlak-zacht);
}

.ec-inlog-alt__kop {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
}

.ec-inlog-alt__tekst {
	margin: 0 0 1rem;
	max-inline-size: 60ch;
}

/* Gast op de favorietenpagina */
.ec-favorieten__gast {
	display: grid;
	gap: 0.75rem;
	margin-block-end: 1.5rem;
}

.ec-favorieten__gast-tekst {
	margin: 0;
	max-inline-size: 60ch;
}

.ec-melding__privacy {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	color: var(--ec-tekst-zacht);
}

.ec-melding__privacy a {
	color: var(--ec-tekst);
}

/* ==========================================================================
   FIX 1.5.1: thema-knopstijl op hartjes en volgknop
   GeneratePress kleurt button:focus en button:active met een roze vlak. Na een tik
   blijft op telefoons de focus staan: roze blok, en een gevuld hartje (rosy-brown)
   valt weg tegen dat roze. Dubbele klasse wint van "button:focus" (0,1,1).
   ========================================================================== */

.ec-fav.ec-fav:is(:hover, :focus, :focus-visible, :active) {
	background: transparent;
	color: var(--ec-tekst);
	box-shadow: none;
}

.ec-fav.ec-fav--kaart:is(:hover, :focus, :focus-visible, :active) {
	background: var(--ec-vlak);
	box-shadow: 0 0 0 1px var(--ec-scheiding);
}

.ec-fav.ec-fav:focus-visible {
	outline: 2px solid var(--ec-tekst);
	outline-offset: 2px;
}

/* Tikmarkering van iOS/Android uit; de focusrand hierboven blijft voor toetsenbord. */
.ec-fav,
.ec-keuze__optie,
.ec-schakelaar,
.ec-filter__keuze {
	-webkit-tap-highlight-color: transparent;
}

/* Zelfde bescherming voor schakelaars en de maatkiezer. */
.ec-schakelaar.ec-schakelaar:is(:hover, :focus, :active) {
	background: transparent;
	color: var(--ec-tekst);
}

.ec-keuze .ec-keuze__optie:is(:focus, :active):not([aria-pressed="true"]):not(.is-uit) {
	background: var(--ec-vlak);
	color: var(--ec-tekst);
}

/* ==========================================================================
   FIX 1.5.1: hartje en volgknop houden hun eigen stijl in elke toestand.
   Het thema geeft knoppen bij focus/hover een roze vlak en een grotere letter.
   Daarop viel het gevulde hartje weg en werd de knop breed. Hogere specificiteit
   (dubbele klasse) in plaats van !important.
   ========================================================================== */

.ec-fav.ec-fav,
.ec-fav.ec-fav:hover,
.ec-fav.ec-fav:focus,
.ec-fav.ec-fav:active {
	box-shadow: none;
	color: var(--ec-tekst);
	font-family: inherit;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
}

.ec-fav.ec-fav--tekst,
.ec-fav.ec-fav--tekst:hover,
.ec-fav.ec-fav--tekst:focus,
.ec-fav.ec-fav--tekst:active {
	inline-size: auto;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 0.9375rem;
	font-weight: 500;
	white-space: nowrap;
}

.ec-fav.ec-fav--tekst:hover {
	text-decoration-color: currentColor;
}

.ec-fav.ec-fav--kaart,
.ec-fav.ec-fav--kaart:hover,
.ec-fav.ec-fav--kaart:focus,
.ec-fav.ec-fav--kaart:active {
	padding: 0;
	border: 0;
	background: color-mix(in srgb, var(--ec-vlak) 85%, transparent);
	box-shadow: 0 0 0 1px var(--ec-scheiding);
}

.ec-fav.ec-fav--kaart:hover {
	background: var(--ec-vlak);
}

/* Focus alleen als rand bij toetsenbordgebruik, nooit als gekleurd vlak. */
.ec-fav.ec-fav:focus {
	outline: none;
}

.ec-fav.ec-fav:focus-visible {
	outline: 2px solid var(--ec-tekst);
	outline-offset: 3px;
	border-radius: 999px;
}

.ec-fav.ec-fav[aria-pressed="true"] .ec-fav__icoon path {
	fill: var(--ec-accent);
	stroke: var(--ec-tekst);
}

.ec-fav.ec-fav[aria-pressed="false"] .ec-fav__icoon path {
	fill: none;
	stroke: currentColor;
}

/* Volgknop op de modelpagina: niet breder dan de tekst, vaste hoogte. */
.ec-fav-acties .ec-fav--model {
	max-inline-size: 100%;
}

/* ==========================================================================
   FIX 1.5.1: favorieten als korte lijst
   Dicht: herkennen (fotootje, naam, kleur, prijs, status). Open: maten en knop.
   ========================================================================== */

.ec-favlijst {
	--ec-tekst: var(--contrast, #564946);
	--ec-tekst-zacht: color-mix(in srgb, var(--contrast, #564946) 85%, var(--base, #fff));
	--ec-vlak: var(--base, #fff);
	--ec-vlak-zacht: var(--global-color-9, #f2e7e8);
	--ec-lijn: color-mix(in srgb, var(--contrast, #564946) 65%, var(--base, #fff));
	--ec-scheiding: var(--dust-grey, #eee8e8);
	--ec-accent: var(--rosy-brown, #cb9798);
	--ec-radius: var(--radius-lg, 0.75rem);
	--ec-raak: 2.75rem;
	display: grid;
	margin: 0 0 2rem;
	padding: 0;
	border-block-start: 1px solid var(--ec-scheiding);
	list-style: none;
}

.ec-favitem {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 0.5rem;
	border-block-end: 1px solid var(--ec-scheiding);
}

.ec-favitem__details {
	min-inline-size: 0;
}

.ec-favitem__rij {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.875rem;
	padding-block: 0.75rem;
	color: var(--ec-tekst);
	cursor: pointer;
	list-style: none;
}

.ec-favitem__rij::-webkit-details-marker {
	display: none;
}

.ec-favitem__rij:focus-visible {
	outline: 2px solid var(--ec-tekst);
	outline-offset: 2px;
	border-radius: 4px;
}

.ec-favitem__beeld {
	display: block;
	inline-size: 3.5rem;
	block-size: 4.25rem;
	object-fit: cover;
	border-radius: 0.375rem;
	background: var(--ec-vlak-zacht);
}

.ec-favitem.is-uitverkocht .ec-favitem__beeld {
	opacity: 0.55;
}

.ec-favitem__info {
	display: grid;
	gap: 0.125rem;
	min-inline-size: 0;
}

.ec-favitem__naam {
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ec-favitem__meta,
.ec-favitem__status {
	font-size: 0.9375rem;
	color: var(--ec-tekst-zacht);
}

.ec-favitem.is-uitverkocht .ec-favitem__status {
	font-weight: 600;
	color: var(--ec-tekst);
}

.ec-favitem__pijl {
	inline-size: 0.55rem;
	block-size: 0.55rem;
	margin-inline-end: 0.25rem;
	border-block-end: 2px solid currentColor;
	border-inline-end: 2px solid currentColor;
	rotate: 45deg;
	translate: 0 -25%;
	transition: rotate 0.2s ease;
}

.ec-favitem__details[open] .ec-favitem__pijl {
	rotate: 225deg;
	translate: 0 25%;
}

.ec-favitem__meer {
	display: grid;
	justify-items: start;
	gap: 0.75rem;
	padding: 0 0 1rem calc(3.5rem + 0.875rem);
}

.ec-favitem__maten {
	margin: 0;
	font-size: 0.9375rem;
	text-wrap: pretty;
}

.ec-favitem__label {
	display: block;
	font-weight: 600;
}

.ec-favitem__knop {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--ec-raak);
	padding-inline: 1.25rem;
	border-radius: var(--ec-radius);
	background: var(--ec-tekst);
	color: var(--ec-vlak);
	font-weight: 600;
	text-decoration: none;
}

.ec-favitem__knop:hover,
.ec-favitem__knop:focus-visible {
	background: color-mix(in srgb, var(--ec-tekst) 85%, #000);
	color: var(--ec-vlak);
}

/* Hartje rechts in de rij: zelfde maat als in de rij, 44px tikvlak. */
.ec-fav.ec-fav--lijst,
.ec-fav.ec-fav--lijst:hover,
.ec-fav.ec-fav--lijst:focus,
.ec-fav.ec-fav--lijst:active {
	inline-size: var(--ec-raak);
	block-size: var(--ec-raak);
	margin-block-start: calc(0.75rem + (4.25rem - var(--ec-raak)) / 2);
	padding: 0;
	border: 0;
	background: transparent;
}

.ec-fav--lijst .ec-fav__icoon {
	inline-size: 1.125rem;
	block-size: 1.125rem;
}

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