/*
 * Het filterpaneel (spec 4, "Filters"). Onder 1024 een lade van onderen,
 * hooguit 90 % van het scherm, met de dim van de site; vanaf 1024 een
 * zijbalk van 320 met 32 ernaast, die onder de werkbalk plakt en zelf
 * scrolt. --dg-filters-als zegt view.js welke van de twee het is.
 *
 * Mobile-first (afwijkingen-4-7.md, "Breekpunten: alleen (width > N)"): de
 * lade is de basis. (width > 1023px) maakt er een zijbalk van, en zet
 * terug wat alleen de lade heeft.
 *
 * Lagen: de werkbalk 850, de header van 1b 900 (en de cookiemelding 890),
 * de dim 949 en de lade 950. De lade ligt dus boven de header: die is
 * inert zolang de lade open is.
 *
 * Dim en lade zijn position: fixed, en staan buiten de werkbalk, in
 * .dg-winkel: een voorouder met een transform zou het bevattende blok
 * worden, en dan vulden ze niet meer het scherm (afwijkingen-4-7.md,
 * "Aanvullingen van de controller na taak 9").
 */
.wp-block-dreamglow-filterpaneel {
	--dg-filters-als: lade;
}

.dg-filterpaneel__paneel[hidden],
.dg-filterpaneel__dim[hidden],
.dg-filterpaneel__wis[hidden] {
	display: none;
}

/* De dim achter de lade, over het hele scherm: het token van de site, net
   als in de lade van 1b (één dim, besluit van de controller na het eerste
   rapport van taak 10). */
.dg-filterpaneel__dim {
	position: fixed;
	inset: 0;
	z-index: 949;
	background: var(--wp--custom--dim);
}

/* De lade: van onderen, over de volle breedte, hooguit 90 % hoog. Kop en
   voet blijven staan; de inhoud ertussen scrolt. */
.dg-filterpaneel__paneel {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 950;
	display: flex;
	flex-direction: column;
	max-block-size: 90dvh;
	border-radius: var(--wp--custom--radius--standaard) var(--wp--custom--radius--standaard) 0 0;
	background: var(--wp--preset--color--paper);
	transition: transform var(--wp--custom--duur--standaard) var(--wp--custom--curve);
}

/* Inschuiven van onderen, als hidden eraf gaat. */
@starting-style {
	.dg-filterpaneel__paneel {
		transform: translateY(100%);
	}
}

.dg-filterpaneel__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16);
	padding-block: var(--wp--preset--spacing--16);
	padding-inline: var(--dg-zijmarge);
	border-block-end: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
}

.dg-filterpaneel__titel {
	margin: 0;
}

/* Rond, zo groot als het raakvlak: 40, en 44 bij aanraken. */
.dg-filterpaneel__sluit {
	display: inline-grid;
	flex: none;
	place-items: center;
	inline-size: var(--dg-raakvlak);
	block-size: var(--dg-raakvlak);
	padding: 0;
	/* De rand in kop, zoals de knoppen van galerij en carrousel: één stijl
	   voor de lichte ronde knoppen (13-10-2026, C-10). */
	border: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--kop);
	border-radius: var(--wp--custom--radius--rond);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--kop);
	cursor: pointer;
}

@media (hover: hover) {
	.dg-filterpaneel__sluit:hover {
		background: var(--wp--preset--color--grain-soft);
	}
}

.dg-filterpaneel__sluit svg {
	inline-size: var(--wp--preset--spacing--24);
	block-size: var(--wp--preset--spacing--24);
}

.dg-filterpaneel__inhoud {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-block: var(--wp--preset--spacing--24);
	padding-inline: var(--dg-zijmarge);
}

/* Past "Wis filters" niet naast "Toon N producten" (op een telefoon, met een
   filter aan), dan krijgt elke knop een eigen rij over de volle breedte, met
   "Toon" onder, bij de duim. Een label breekt nooit af (Minor 5 van de review
   van taak 10: "TOON 3 PRODUCTEN" stond op twee regels). */
.dg-filterpaneel__voet {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8);
	padding-block: var(--wp--preset--spacing--16);
	padding-inline: var(--dg-zijmarge);
	border-block-start: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
}

.dg-filterpaneel__wis,
.dg-filterpaneel__toon {
	box-sizing: border-box;
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-block-size: var(--wp--preset--spacing--48);
	padding-block: 0;
	padding-inline: var(--wp--custom--ruimte--bediening);
	border-radius: var(--wp--custom--radius--standaard);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s);
	line-height: var(--wp--custom--leading--xs);
	letter-spacing: var(--wp--custom--spatie--groot);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.dg-filterpaneel__wis {
	border: var(--wp--custom--rand--knop) solid var(--wp--preset--color--kop);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--kop);
}

.dg-filterpaneel__toon {
	border: 0;
	background: var(--wp--preset--color--moss);
	color: var(--wp--preset--color--paper);
}

@media (hover: hover) {
	.dg-filterpaneel__toon:hover {
		background: var(--wp--preset--color--knop-hover);
	}
}

/* In de lade staat "Wis filters" in de voet; Woo's knop bij de chips
   zou er een tweede zijn. */
.dg-filterpaneel__inhoud .wp-block-woocommerce-product-filter-clear-button {
	display: none;
}

/* In de lade is elke optie van Woo minstens het raakvlak: 40, en 44 bij
   aanraken (besluit van de controller na het eerste rapport van taak 10).
   Het label omvat het vakje, dus het label is het raakvlak; het loopt over
   de volle breedte. Woo maakt het 24 hoog, met een vakje van 16. */
.dg-filterpaneel__inhoud .wc-block-product-filter-checkbox-list__label {
	display: flex;
	min-block-size: var(--dg-raakvlak);
}

/*
 * De vakjes van Woo's kenmerkfilter. Woo tekent ze als een vlak van 16 in
 * currentColor op 10 % zonder rand (1,2:1 tegen wit), en aangevinkt alleen
 * een klein vinkje in hetzelfde vlak (vergelijking met de Rituals-analyse,
 * 13-10-2026, C-45). Nu: 20 bij 20, wit met de veldrand (3:1, spec 5-6,
 * "Veldranden minstens 3:1"), en aangevinkt een vol vlak in ink met een wit
 * vinkje. Via Woo's eigen variabelen; het vlak van 10 % gaat weg.
 */
.wp-block-dreamglow-filterpaneel {
	--wc-product-filter-checkbox-list-option-element: var(--wp--preset--color--paper);
	--wc-product-filter-checkbox-list-option-element-border: var(--wp--custom--veld--rand);
	--wc-product-filter-checkbox-list-option-element-selected: var(--wp--preset--color--paper);
}

.wp-block-dreamglow-filterpaneel .wc-block-product-filter-checkbox-list__input-wrapper {
	font-size: calc(var(--wp--preset--spacing--16) + var(--wp--preset--spacing--4));
}

.wp-block-dreamglow-filterpaneel .wc-block-product-filter-checkbox-list__input-wrapper::before {
	display: none;
}

.wp-block-dreamglow-filterpaneel input[type="checkbox"].wc-block-product-filter-checkbox-list__input:checked {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ink);
}

/*
 * De prijsvelden: de veldstijl van het ontwerpsysteem (48 hoog, Jost, de
 * veldrand, radius 8) in plaats van Woo's 34 hoog in de systeemletter met
 * radius 4 (C-63). De schuif zelf houdt Woo's opmaak.
 */
.wp-block-dreamglow-filterpaneel .wc-block-product-filter-price-slider .text input[type="text"] {
	box-sizing: border-box;
	inline-size: calc(var(--wp--preset--spacing--48) * 2);
	max-inline-size: none;
	min-block-size: var(--wp--custom--veld--hoogte);
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--12);
	border: var(--wp--custom--lijn--dun) solid var(--wp--custom--veld--rand);
	border-radius: var(--wp--custom--radius--standaard);
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--m);
	line-height: var(--wp--custom--leading--m);
}

/*
 * De kop van elke filtergroep (Prijs, Kleur, Maat): de rol footerkop, serif
 * 14/24 in kapitalen met 2 px, in plaats van een tussenkop van 28/36. Zo is
 * de zijbalk compact en staat Maat niet onder de vouw (vergelijking met de
 * Rituals-analyse, 13-10-2026, C-64).
 */
.dg-filterpaneel__inhoud h3.wp-block-heading {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 500;
	line-height: var(--wp--custom--leading--s);
	letter-spacing: var(--wp--custom--spatie--groot);
	text-transform: uppercase;
	color: var(--wp--preset--color--kop);
}

/* De pagina scrolt niet mee onder de open lade: dat is het scrollslot van
   @dreamglow/venster, met compensatie voor de scrollbalk (deelproject 6,
   taak 12, "één systeem voor vensters"). Hier staat daarom geen regel. */

/* De chips boven het grid krijgen pas ruimte als er een filter aanstaat. */
.dg-filterchips:has(.wp-block-woocommerce-product-filter-active:not([hidden])) {
	margin-block-end: var(--wp--preset--spacing--24);
}

/* Zonder JavaScript doen de knoppen bij de chips niets: het zijn <button>s
   met alleen data-wp-on--click (Minor 4 van de review van taak 10). Een
   <noscript><style> in de head verbergt ze dan
   (dreamglow_filters_zonder_script() in inc/modules/winkel/query.php);
   met script staan ze er, met de weergave die Woo ze geeft. Hier stond dat
   met (scripting: enabled), en een browser die die mediafeature niet kent,
   toonde ze nooit (codereview V17). */

/*
 * Twee knoppen van Woo waren kleiner dan het raakvlak: het kruisje van een
 * chip (25 bij 25) en "%d meer tonen" (24 hoog). Ze krijgen het raakvlak, 40
 * en 44 bij aanraken, in het paneel en in de chips boven het grid, zonder de
 * markup van Woo te wijzigen (taak 14, punt 1).
 *
 * Het kruisje is het rechterdeel van de chip. De chip houdt daarom geen
 * padding boven, onder en rechts van Woo: zo is hij zo hoog als het
 * raakvlak, en niet het raakvlak plus zijn padding. "Meer tonen" krijgt geen
 * display: Woo verbergt hem na de klik met hidden, en een display zou dat
 * opheffen. Een knop zet zijn tekst ook zonder flex in het midden.
 */
.wp-block-dreamglow-filterpaneel .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item,
.dg-filterchips .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item {
	padding-block: 0;
	padding-inline-end: 0;
}

.wp-block-dreamglow-filterpaneel .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item .wc-block-product-filter-removable-chips__remove,
.dg-filterchips .wc-block-product-filter-removable-chips__items .wc-block-product-filter-removable-chips__item .wc-block-product-filter-removable-chips__remove {
	justify-content: center;
	min-inline-size: var(--dg-raakvlak);
	min-block-size: var(--dg-raakvlak);
}

.wp-block-dreamglow-filterpaneel .wc-block-product-filter-checkbox-list__show-more-button {
	min-inline-size: var(--dg-raakvlak);
	min-block-size: var(--dg-raakvlak);
}

/* Vanaf 1024: de zijbalk. Wat alleen de lade heeft, gaat eraf. */
@media (width > 1023px) {
	.wp-block-dreamglow-filterpaneel {
		--dg-filters-als: zijbalk;
	}

	/* De dim hoort bij de lade; view.js verbergt hem hier al (hidden). */
	.dg-filterpaneel__dim {
		display: none;
	}

	.dg-filterpaneel__paneel {
		position: static;
		display: block;
		max-block-size: none;
		border-radius: 0;
		background: none;
		transition: none;
	}

	.dg-filterpaneel__kop {
		margin-block-end: var(--wp--preset--spacing--24);
		padding: 0;
		border-block-end: 0;
	}

	.dg-filterpaneel__inhoud {
		overflow-y: visible;
		padding: 0;
	}

	.dg-filterpaneel__sluit,
	.dg-filterpaneel__voet {
		display: none;
	}

	/* In de zijbalk is er geen voet: dan staat Woo's "Wis filters" er weer. */
	.dg-filterpaneel__inhoud .wp-block-woocommerce-product-filter-clear-button {
		display: block;
	}

	/* De opties weer zoals Woo ze maakt: het raakvlak hoort bij de lade. */
	.dg-filterpaneel__inhoud .wc-block-product-filter-checkbox-list__label {
		display: inline-flex;
		min-block-size: auto;
	}

	.dg-winkel:has(> .wp-block-dreamglow-filterpaneel.is-open) {
		display: grid;
		grid-template-columns: var(--wp--custom--kolom--filters) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--32);
		align-items: start;
		/* Open heeft het grid één kolom minder: van 3 naar 2 (de basis van
		   de gridtokens), en vanaf 1280 van 4 naar 3 (de stand vanaf 640). */
		--dg-grid-kolommen: var(--wp--custom--grid--kolommen--basis);
	}

	/*
	 * De zijbalk plakt 24 onder de werkbalk, en volgt de header zoals de
	 * werkbalk dat doet (blocks/werkbalk/style.css): de beheerbalk plus rij
	 * 2 van de header, min wat de header wegschuift, plus de hoogte van de
	 * werkbalk. top en max-block-size schuiven in hetzelfde tempo en op
	 * dezelfde curve als de werkbalk; samen houden ze de onderkant op zijn
	 * plek. Geen transform: die maakte de zijbalk het bevattende blok voor
	 * position: fixed.
	 */
	.wp-block-dreamglow-filterpaneel.is-open {
		position: sticky;
		top: calc(var(--dg-beheerbalk, 0px) + var(--dg-header-rij, 0px) - var(--dg-header-verschuiving, 0px) + var(--dg-meespringende-balken, 0px) + var(--wp--preset--spacing--24));
		max-block-size: calc(100dvh - var(--dg-beheerbalk, 0px) - var(--dg-header-rij, 0px) + var(--dg-header-verschuiving, 0px) - var(--dg-meespringende-balken, 0px) - var(--wp--preset--spacing--48));
		overflow-y: auto;
		transition:
			top var(--wp--custom--duur--standaard) var(--wp--custom--curve),
			max-block-size var(--wp--custom--duur--standaard) var(--wp--custom--curve);
	}
}

@media (width > 1279px) {
	.dg-winkel:has(> .wp-block-dreamglow-filterpaneel.is-open) {
		--dg-grid-kolommen: var(--wp--custom--grid--kolommen--vanaf-640);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dg-filterpaneel__paneel,
	.wp-block-dreamglow-filterpaneel.is-open {
		transition: none;
	}
}