/* =========================================================================
   mytheme — shop-archief
   Alle kleuren, spacing en maten als custom properties; map deze op je
   eigen huisstijl. Breekpunten staan als tokens gedocumenteerd, maar
   moeten in media queries als letterlijke waarde blijven staan (CSS
   ondersteunt geen var() in @media):
     --shop-bp-md: 768px   --shop-bp-lg: 1024px
   ========================================================================= */

:root {
	/* Layout */
	--shop-max-width: var(--dg-max, 1280px); /* dé sitebreedte, geen eigen kopie */
	--shop-bp-md: 768px;  /* documentatie; zie noot hierboven */
	--shop-bp-lg: 1024px; /* documentatie; zie noot hierboven */
	--shop-drawer-width: 24rem;

	/* De --shop-space-schaal en --shop-gutter staan niet meer hier:
	   style.css (sectie 34a) definieert ze op :root en laadt altijd
	   later — een kopie hier is dood gewicht dat edits opslokt. */

	/* Kleuren
	   De terugvallen zijn de oorspronkelijke pakketwaarden, zodat dit
	   blad losstaand blijft werken; met het thema erbij lopen ze mee met
	   de merktokens uit style.css sectie 1. Zonder die koppeling stond
	   het shoparchief op een ander zwart en een andere haarlijn dan de
	   rest van de site, terwijl het :root-blok daar belooft dat je
	   alleen dáár iets hoeft aan te passen. */
	--shop-color-bg: var(--paper, #ffffff);
	--shop-color-surface: var(--surface, #f6f5f3);
	--shop-color-text: var(--ink, #1d1d1d);
	--shop-color-muted: var(--metadata, #6d6a66);
	--shop-color-border: var(--line, #e5e2dd);
	--shop-color-accent: #1d1d1d;
	--shop-color-accent-contrast: #ffffff;
	--shop-color-sale: var(--knop, #B64444); /* sale in het merkaccent (brandsysteem §3) */
	--shop-color-backdrop: rgba(20, 20, 20, 0.45);

	/* Vormen & effecten */
	--shop-radius: 10px;
	--shop-radius-pill: 999px;
	--shop-shadow-drawer: -16px 0 40px rgba(0, 0, 0, 0.14);
	--shop-transition: 200ms ease;
	--shop-card-ratio: 3 / 4;

	/* Typografie (erft standaard het theme-font) */
	--shop-font-size-sm: 0.875rem;
	--shop-font-size-base: 1rem;
	--shop-font-size-lg: 1.125rem;
	--shop-font-size-h1: clamp(1.75rem, 4vw, 2.5rem);
}

/* -------------------------------------------------------------------------
   Utilities
   ---------------------------------------------------------------------- */

.shop-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px; /* geen-schaal: randoverlap van het sr-only-patroon, geen ritmemaat */
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%); /* gelijkgetrokken met het patroon in style.css */
	white-space: nowrap;
	border: 0;
}

/* Geen eigen focusring-lijst meer: style.css sectie 2 zet
   `:focus-visible { outline: var(--dg-focus-ring); outline-offset: 2px }`
   op elk element, dus deze negen selectors herhaalden alleen wat er al
   stond — met een eigen radius van 4px die nergens anders op de site
   voorkwam. Losstaand (zonder thema) valt de browser terug op zijn eigen
   ring, wat voor een pakket zonder huisstijl de juiste uitkomst is. */

/* -------------------------------------------------------------------------
   Paginakader
   ---------------------------------------------------------------------- */

.shop {
	background: var(--shop-color-bg);
	color: var(--shop-color-text);
}

.shop__inner {
	max-width: var(--shop-max-width);
	margin-inline: auto;
	padding-inline: var(--shop-gutter);
	padding-block: var(--shop-space-5) var(--shop-space-7);
}

/* -------------------------------------------------------------------------
   1. Categorie-header
   ---------------------------------------------------------------------- */

.shop-header {
	margin-block-end: var(--shop-space-5);
}

/* De .shop-breadcrumb-regels stonden hier: een tweede kruimelpad naast
   .dg-crumbs uit dreamglow-nav, met een eigen separator, eigen kleuren en
   eigen spacing. Er staat er maar één op het scherm — category-header.php
   haalde de aanroep van mytheme_shop_breadcrumb() weg omdat het
   navigatiepakket het kruimelpad al plaatst — dus dit waren zeven regels
   die nooit renderden maar wel bij elke restyling meegelezen en
   meebewerkt moesten worden. */

.shop-header__title {
	margin: 0;
	font-size: var(--shop-font-size-h1);
	line-height: 1.15;
}

.shop-header__intro {
	max-width: 60ch;
	margin-block-start: var(--shop-space-3);
	color: var(--shop-color-muted);
}

.shop-header__intro p {
	margin: 0;
}

/* -------------------------------------------------------------------------
   2. Subcategorie-nav
   ---------------------------------------------------------------------- */

.shop-subnav {
	margin-block-end: var(--shop-space-5);
}

.shop-subnav__list {
	display: flex;
	gap: var(--shop-space-2);
	margin: 0;
	padding: 0 0 var(--shop-space-2);
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.shop-subnav__item {
	flex: 0 0 auto;
}

.shop-subnav__pill {
	display: inline-flex;
	align-items: center;
	padding: var(--shop-space-2) var(--shop-space-4);
	border: 1px solid var(--shop-color-border);
	border-radius: var(--shop-radius-pill);
	background: var(--shop-color-bg);
	color: var(--shop-color-text);
	font-size: var(--shop-font-size-sm);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--shop-transition), border-color var(--shop-transition);
}

.shop-subnav__pill:hover {
	background: var(--shop-color-surface);
	border-color: var(--shop-color-muted);
}

.shop-subnav__pill--active {
	background: var(--shop-color-accent);
	border-color: var(--shop-color-accent);
	color: var(--shop-color-accent-contrast);
}

/* -------------------------------------------------------------------------
   3. Toolbar
   ---------------------------------------------------------------------- */

.shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--shop-space-3);
	padding-block: var(--shop-space-3);
	border-block: 1px solid var(--shop-color-border);
	margin-block-end: var(--shop-space-4);
}

.shop-toolbar__filters {
	display: inline-flex;
	align-items: center;
	gap: var(--shop-space-2);
	padding: var(--shop-space-2) var(--shop-space-4);
	border: 1px solid var(--shop-color-border);
	border-radius: var(--shop-radius-pill);
	background: var(--shop-color-bg);
	color: var(--shop-color-text);
	font: inherit;
	font-size: var(--shop-font-size-sm);
	cursor: pointer;
	transition: background-color var(--shop-transition), border-color var(--shop-transition);
}

.shop-toolbar__filters:hover {
	background: var(--shop-color-surface);
	border-color: var(--shop-color-muted);
}

.shop-toolbar__filters-icon {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	background:
		linear-gradient(var(--shop-color-text), var(--shop-color-text)) 0 15% / 100% 2px no-repeat,
		linear-gradient(var(--shop-color-text), var(--shop-color-text)) 0 50% / 65% 2px no-repeat,
		linear-gradient(var(--shop-color-text), var(--shop-color-text)) 0 85% / 35% 2px no-repeat;
}

.shop-toolbar__filters-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35em;
	height: 1.35em;
	padding-inline: 0.35em; /* geen-schaal: optische spatie, schaalt met de letter mee */
	border-radius: var(--shop-radius-pill);
	background: var(--shop-color-accent);
	color: var(--shop-color-accent-contrast);
	font-size: 0.75rem;
	line-height: 1;
}

.shop-toolbar__count {
	margin: 0;
	color: var(--shop-color-muted);
	font-size: var(--shop-font-size-sm);
	text-align: center;
}

.shop-toolbar__sort {
	display: inline-flex;
	align-items: center;
	gap: var(--shop-space-2);
}

.shop-toolbar__select {
	max-width: 14rem;
	padding: var(--shop-space-2) var(--shop-space-3);
	border: 1px solid var(--shop-color-border);
	border-radius: var(--shop-radius);
	background: var(--shop-color-bg);
	color: var(--shop-color-text);
	font: inherit;
	font-size: var(--shop-font-size-sm);
	cursor: pointer;
}

.shop-toolbar__sort-submit {
	padding: var(--shop-space-2) var(--shop-space-3);
	border: 1px solid var(--shop-color-border);
	border-radius: var(--shop-radius);
	background: var(--shop-color-surface);
	/* color hoort erbij: zonder deze regel won `input[type="submit"] {
	   color: #fff }` uit style.css, en stond het label wit op het
	   lichtgrijze vlak hierboven. */
	color: var(--shop-color-text);
	font: inherit;
	font-size: var(--shop-font-size-sm);
	cursor: pointer;
}

@media (max-width: 767.98px) {
	.shop-toolbar {
		flex-wrap: wrap;
	}

	.shop-toolbar__count {
		order: 3;
		flex-basis: 100%;
		text-align: start;
	}
}

/* -------------------------------------------------------------------------
   Actieve filters (chips)
   ---------------------------------------------------------------------- */

.shop-active-filters {
	margin-block-end: var(--shop-space-4);
}

.shop-active-filters__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--shop-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--shop-space-2);
	padding: var(--shop-space-1) var(--shop-space-3);
	border: 1px solid var(--shop-color-border);
	border-radius: var(--shop-radius-pill);
	background: var(--shop-color-surface);
	color: var(--shop-color-text);
	font-size: var(--shop-font-size-sm);
	text-decoration: none;
	transition: border-color var(--shop-transition), background-color var(--shop-transition);
}

.shop-chip:hover {
	border-color: var(--shop-color-text);
	background: var(--shop-color-bg);
}

.shop-chip__x {
	font-size: 1.05em;
	line-height: 1;
	color: var(--shop-color-muted);
}

.shop-chip:hover .shop-chip__x {
	color: var(--shop-color-text);
}

.shop-active-filters__clear {
	margin-inline-start: var(--shop-space-2);
	color: var(--shop-color-muted);
	font-size: var(--shop-font-size-sm);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.shop-active-filters__clear:hover {
	color: var(--shop-color-text);
}

/* -------------------------------------------------------------------------
   5. Productgrid & kaarten
   ---------------------------------------------------------------------- */

.shop-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* var(--dg-rij) en niet de kale --shop-space-6: beide productrasters
	   (dit en ul.products in style.css, sectie 9) tonen dezelfde kaart en
	   horen daarom aan hetzelfde token te hangen. Waarde blijft 32, want
	   --dg-rij is nog var(--dg-space-6) -- taak 13 verlaagt ze dan samen. */
	gap: var(--dg-rij) var(--dg-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1024px) { /* --shop-bp-lg */
	.shop-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.shop-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--shop-space-2); /* taak 13: 12 → 8; .shop-card__rating verloor daarbij zijn eigen marge (style.css) */
}

.shop-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--shop-card-ratio);
	border-radius: var(--shop-radius);
	background: var(--shop-color-surface);
}

.shop-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shop-card__img--hover {
	opacity: 0;
	transition: opacity var(--shop-transition);
}

.shop-card:hover .shop-card__img--hover,
.shop-card:focus-within .shop-card__img--hover {
	opacity: 1;
}

.shop-card__badge {
	position: absolute;
	top: var(--shop-space-3);
	left: var(--shop-space-3);
	z-index: 2;
	padding: var(--shop-space-1) var(--shop-space-2);
	border-radius: var(--shop-radius-pill);
	background: var(--shop-color-sale);
	color: #ffffff;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.shop-card__actions {
	position: absolute;
	inset-inline: var(--shop-space-3);
	bottom: var(--shop-space-3);
	z-index: 2;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity var(--shop-transition), transform var(--shop-transition);
}

.shop-card:hover .shop-card__actions,
.shop-card:focus-within .shop-card__actions {
	opacity: 1;
	transform: translateY(0);
}

/* Op touch/mobiel altijd zichtbaar (geen hover beschikbaar) */
@media (hover: none) {
	.shop-card__actions {
		opacity: 1;
		transform: none;
	}
}

.shop-card__actions .button,
.shop-card__actions a.added_to_cart {
	display: block;
	width: 100%;
	padding: var(--shop-space-2) var(--shop-space-3);
	border: 0;
	border-radius: var(--shop-radius);
	background: var(--shop-color-accent);
	color: var(--shop-color-accent-contrast);
	font: inherit;
	font-size: var(--shop-font-size-sm);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.shop-card__actions a.added_to_cart {
	margin-block-start: var(--shop-space-1);
	background: var(--shop-color-bg);
	color: var(--shop-color-text);
	border: 1px solid var(--shop-color-border);
}

.shop-card__actions .button:hover {
	/* Was #383838, een handmatig opgelichte versie van het oude accent
	   #1d1d1d uit dit pakket. Sinds de kleurmigratie is de knop in rust
	   merkrood, dus de hover sprong van rood naar bijna zwart. Nu de
	   donkere trap van datzelfde rood, dezelfde die de rest van de site
	   gebruikt. */
	background: var(--knop-hover, #963838);
}

.shop-card__actions .button.loading {
	opacity: 0.6;
}

.shop-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--shop-space-1);
}

.shop-card__title {
	margin: 0;
	font-size: var(--shop-font-size-base);
	font-weight: 500;
	line-height: 1.35;
}

.shop-card__link {
	color: inherit;
	text-decoration: none;
}

/* Hele kaart klikbaar via stretched link; knoppen liggen erboven (z-index) */
.shop-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.shop-card:hover .shop-card__link,
.shop-card__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.shop-card__subtitle {
	margin: 0;
	color: var(--shop-color-muted);
	font-size: var(--shop-font-size-sm);
}

.shop-card__price {
	margin: 0;
	font-size: var(--shop-font-size-sm);
}

.shop-card__price del {
	color: var(--shop-color-muted);
	margin-inline-end: var(--shop-space-2);
}

.shop-card__price ins {
	text-decoration: none;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   6. Paginering (native Woo, gestyled)
   ---------------------------------------------------------------------- */

.shop .woocommerce-pagination {
	margin-block-start: var(--shop-space-6);
	text-align: center;
}

.shop .woocommerce-pagination .page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--shop-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop .woocommerce-pagination .page-numbers li {
	margin: 0;
}

.shop .woocommerce-pagination a.page-numbers,
.shop .woocommerce-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--shop-space-2);
	border: 1px solid var(--shop-color-border);
	border-radius: var(--shop-radius);
	background: var(--shop-color-bg);
	color: var(--shop-color-text);
	font-size: var(--shop-font-size-sm);
	text-decoration: none;
	transition: background-color var(--shop-transition), border-color var(--shop-transition);
}

.shop .woocommerce-pagination a.page-numbers:hover {
	background: var(--shop-color-surface);
	border-color: var(--shop-color-muted);
}

.shop .woocommerce-pagination span.page-numbers.current {
	background: var(--shop-color-accent);
	border-color: var(--shop-color-accent);
	color: var(--shop-color-accent-contrast);
}

.shop .woocommerce-pagination span.page-numbers.dots {
	border: 0;
	background: transparent;
	color: var(--shop-color-muted);
}

/* -------------------------------------------------------------------------
   7. SEO-blok
   ---------------------------------------------------------------------- */

.shop-seo {
	max-width: 70ch;
	margin-block-start: var(--shop-space-7);
	padding-block-start: var(--shop-space-5);
	border-block-start: 1px solid var(--shop-color-border);
}

.shop-seo__title {
	margin: 0 0 var(--shop-space-3);
	font-size: var(--shop-font-size-lg);
}

.shop-seo__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shop-space-2) var(--shop-space-4);
	margin: 0 0 var(--shop-space-5);
	padding: 0;
	list-style: none;
}

.shop-seo__link {
	color: var(--shop-color-text);
	font-size: var(--shop-font-size-sm);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.shop-seo__link:hover {
	color: var(--shop-color-muted);
}

.shop-seo__more {
	border: 1px solid var(--shop-color-border);
	border-radius: var(--shop-radius);
	background: var(--shop-color-surface);
}

.shop-seo__summary {
	padding: var(--shop-space-3) var(--shop-space-4);
	font-weight: 500;
	cursor: pointer;
	list-style-position: inside;
}

.shop-seo__description {
	padding: 0 var(--shop-space-4) var(--shop-space-4);
	color: var(--shop-color-muted);
}

.shop-seo__description p:first-child {
	margin-block-start: 0;
}

.shop-seo__description p:last-child {
	margin-block-end: 0;
}

/* -------------------------------------------------------------------------
   8. Lege staat
   ---------------------------------------------------------------------- */

.shop-empty {
	max-width: 34rem;
	margin-inline: auto;
	padding-block: var(--shop-space-7);
	text-align: center;
}

.shop-empty__title {
	margin: 0 0 var(--shop-space-2);
	font-size: var(--shop-font-size-lg);
	font-weight: 600;
}

.shop-empty__text {
	margin: 0 0 var(--shop-space-4);
	color: var(--shop-color-muted);
}

.shop-empty__button {
	display: inline-block;
	padding: var(--shop-space-3) var(--shop-space-5);
	border-radius: var(--shop-radius);
	background: var(--shop-color-accent);
	color: var(--shop-color-accent-contrast);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   4. Off-canvas filterpaneel
   ---------------------------------------------------------------------- */

.shop-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--shop-color-backdrop);
	opacity: 0;
	transition: opacity var(--shop-transition);
}

.shop-drawer-backdrop.is-open {
	opacity: 1;
}

.shop-drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	width: min(var(--shop-drawer-width), 100vw);
	/* 100vh eerst als terugval: een browser zonder dvh laat de tweede
	   regel vallen. Zonder dat vangnet verviel `height` naar auto, werd
	   de flexkolom inhoudshoog, scrolde de body nooit en stond de
	   voettekst met "Toon resultaten" buiten beeld terwijl de
	   paginascroll vergrendeld is. */
	height: 100vh;
	height: 100dvh;
	background: var(--shop-color-bg);
	color: var(--shop-color-text);
	box-shadow: var(--shop-shadow-drawer);
	transform: translateX(100%);
	visibility: hidden;
	/* De delay staat als losse 200ms: met var(--shop-transition) zou hier
	   "0s linear 200ms ease" staan — twee timingfuncties, en dan is de
	   hele declaratie ongeldig en vervalt élke transitie op dit element. */
	transition: transform var(--shop-transition), visibility 0s linear 200ms;
}

.shop-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform var(--shop-transition);
}

.shop-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--shop-space-3);
	padding: var(--shop-space-4) var(--shop-space-5);
	border-block-end: 1px solid var(--shop-color-border);
}

.shop-drawer__title {
	margin: 0;
	font-size: var(--shop-font-size-lg);
}

.shop-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--shop-color-border);
	border-radius: var(--shop-radius-pill);
	background: var(--shop-color-bg);
	color: var(--shop-color-text);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.shop-drawer__close:hover {
	background: var(--shop-color-surface);
}

.shop-drawer__form {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.shop-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--shop-space-4) var(--shop-space-5);
}

.shop-filter-group {
	border-block-end: 1px solid var(--shop-color-border);
}

.shop-filter-group__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--shop-space-2);
	padding-block: var(--shop-space-4);
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}

.shop-filter-group__summary::-webkit-details-marker {
	display: none;
}

.shop-filter-group__summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--shop-color-muted);
	border-bottom: 2px solid var(--shop-color-muted);
	transform: rotate(45deg);
	transition: transform var(--shop-transition);
}

.shop-filter-group[open] > .shop-filter-group__summary::after {
	transform: rotate(225deg);
}

.shop-filter-group__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35em;
	height: 1.35em;
	margin-inline-start: auto;
	margin-inline-end: var(--shop-space-2);
	padding-inline: 0.35em; /* geen-schaal: optische spatie, schaalt met de letter mee */
	border-radius: var(--shop-radius-pill);
	background: var(--shop-color-accent);
	color: var(--shop-color-accent-contrast);
	font-size: 0.75rem;
	line-height: 1;
}

.shop-filter-group__content {
	padding-block: 0 var(--shop-space-4);
}

/*
 * LET OP: eigen toevoeging, opnieuw toepassen na een update van dit
 * pakket (zie PAKKETWIJZIGINGEN.md, sectie "shop").
 *
 * Vervangt de twee losse <input type="number">-prijsvelden (voorheen
 * hier gestyled als .shop-filter-group__field/__label/__input) door
 * een dubbele-handvat <input type="range">-slider. Zie het LET
 * OP-commentaar in filter-panel.php (opbouw van de markup) en shop.js
 * (bediening: marge tussen de handvatten, live tekst, submitgedrag).
 *
 * Techniek: twee overlappende native inputs op dezelfde track.
 * .shop-price-slider__input zelf heeft `pointer-events: none` en een
 * doorzichtige achtergrond — alleen de duimschijf (::-webkit-slider-
 * thumb / ::-moz-range-thumb) krijgt `pointer-events: auto` terug, dus
 * de muis "pakt" nooit de onzichtbare rest van de input, alleen het
 * ronde handvat zelf. --shop-price-track-h en --shop-price-thumb-size
 * zijn hier lokaal gedeclareerd (niet in de globale tokenlijst
 * bovenaan dit bestand): ze worden nergens anders dan in deze
 * component gebruikt en erven via de normale CSS-cascade door naar de
 * duim-pseudo-elementen van de <input>-kinderen.
 */
.shop-filter-group__content--price {
	display: flex;
	flex-direction: column;
	gap: var(--shop-space-2);
}

.shop-price-slider__value {
	margin: 0;
	color: var(--shop-color-text);
	font-size: var(--shop-font-size-sm);
	font-weight: 500;
}

/*
 * De balk zelf is het raakvlak, niet alleen de duimschijf.
 *
 * De hoogte stond op de schijfmaat (1,1rem = 17,6px). Omdat de inputs op
 * pointer-events: none staan en alleen de duim hem terugkrijgt, was dat
 * meteen het énige raakvlak van de hele prijsfilter — ver onder de 40px
 * die dit thema als norm hanteert (44px op touch). Klikken of slepen op
 * de balk, wat een enkele native range gratis geeft, deed niets.
 *
 * De balk is nu zo hoog als die norm en de inputs staan verticaal
 * gecentreerd, zodat de schijven optisch niets veranderen. shop.js vangt
 * daarnaast een tik op de balk op en stuurt het dichtstbijzijnde handvat
 * daarheen; dat herstelt het native gedrag én haalt een handvat weer
 * onder het andere vandaan als ze dicht bij elkaar staan.
 */
.shop-price-slider {
	--shop-price-track-h: 4px;
	--shop-price-thumb-size: 1.1rem;

	position: relative;
	height: var(--dg-raakvlak, 40px);
	margin-block: var(--shop-space-2);

	/* pan-y en niet none. De balk is een raakvlak van 40px over de volle
	   breedte van het paneel; met `none` gaf de browser élke aanraking
	   erop aan het script, dus ook een verticale veeg die alleen bedoeld
	   was om door de filterlade te scrollen. De lade stond dan stil én
	   het dichtstbijzijnde handvat sprong naar de vinger: het prijsfilter
	   veranderde zonder dat iemand daarom vroeg. Met pan-y houdt de
	   browser het verticale scrollen en blijft alleen de horizontale
	   sleepbeweging — de enige richting waarin deze slider iets doet —
	   voor het script. */
	touch-action: pan-y;
}

.shop-price-slider__track {
	position: absolute;
	top: 50%;
	inset-inline: 0;
	height: var(--shop-price-track-h);
	transform: translateY(-50%);
	border-radius: var(--shop-radius-pill);
	background: var(--shop-color-border);
}

.shop-price-slider__range {
	position: absolute;
	top: 50%;
	height: var(--shop-price-track-h);
	transform: translateY(-50%);
	border-radius: var(--shop-radius-pill);
	background: var(--shop-color-accent);
}

.shop-price-slider__input {
	position: absolute;
	/* Verticaal gecentreerd in de hogere balk hierboven; de schijven staan
	   daardoor op precies dezelfde plek als voorheen. */
	top: 50%;
	transform: translateY(-50%);
	inset-inline: 0;
	height: var(--shop-price-thumb-size);
	margin: 0;
	background: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	pointer-events: none;
}

/* Chromium, Safari, Edge */
.shop-price-slider__input::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	height: var(--shop-price-track-h);
	background: transparent;
}

.shop-price-slider__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	box-sizing: border-box;
	width: var(--shop-price-thumb-size);
	height: var(--shop-price-thumb-size);
	margin-top: calc((var(--shop-price-track-h) - var(--shop-price-thumb-size)) / 2);
	border: 2px solid var(--shop-color-bg);
	border-radius: 50%;
	background: var(--shop-color-accent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	pointer-events: auto;
}

/* Firefox */
.shop-price-slider__input::-moz-range-track {
	height: var(--shop-price-track-h);
	border: 0;
	background: transparent;
}

.shop-price-slider__input::-moz-range-thumb {
	box-sizing: border-box;
	width: var(--shop-price-thumb-size);
	height: var(--shop-price-thumb-size);
	border: 2px solid var(--shop-color-bg);
	border-radius: 50%;
	background: var(--shop-color-accent);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	pointer-events: auto;
}

/*
 * Twee losse regels, geen selectorlijst.
 *
 * Deze twee stonden met een komma achter elkaar. Een selectorlijst is
 * echter ongeldig zodra één onderdeel onbekend is, en geen enkele browser
 * kent beide vendorpseudo's: Chromium gooide de regel weg om
 * ::-moz-range-thumb, Firefox om ::-webkit-slider-thumb. Het resultaat
 * was dat nérgens een focusring op het handvat verscheen.
 */
.shop-price-slider__input:focus-visible::-webkit-slider-thumb {
	outline: var(--dg-focus-ring, 2px solid var(--shop-color-accent));
	outline-offset: 2px;
}

.shop-price-slider__input:focus-visible::-moz-range-thumb {
	outline: var(--dg-focus-ring, 2px solid var(--shop-color-accent));
	outline-offset: 2px;
}

/* De input zelf is paneelbreed en volledig transparant: alleen zijn
   duimschijf is zichtbaar. De generieke veldstijlen van het thema
   (`input:focus { box-shadow: 0 0 0 3px … }`, style.css sectie 3) en de
   focusring van de lade hierboven tekenen daardoor een rechthoek over de
   volle breedte van de track om iets wat niemand ziet — bij elke klik op
   een handvat, want een muisklik zet ook focus. De ring hoort op de
   duim, en die staat hierboven. */
.shop-price-slider__input:focus,
.shop-price-slider__input:focus-visible {
	box-shadow: none;
	outline: none;
}

/* Het handvat dat focus heeft (een muisklik zet ook focus, dus dit geldt
   ook tijdens het slepen) komt boven het andere te liggen. Zonder dit
   zou een handvat dat het dichtst bij de rand van de ander staat
   onbereikbaar kunnen worden voor de muis, omdat ze anders in
   documentvolgorde over elkaar liggen. */
.shop-price-slider__input:focus {
	z-index: 2;
}

.shop-price-slider__bounds {
	display: flex;
	justify-content: space-between;
	margin: 0;
	color: var(--shop-color-muted);
	font-size: var(--shop-font-size-sm);
}

.shop-filter-group__options {
	display: flex;
	flex-direction: column;
	gap: var(--shop-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.shop-filter-group__option-label {
	display: flex;
	align-items: center;
	gap: var(--shop-space-2);
	cursor: pointer;
	font-size: var(--shop-font-size-sm);
}

/*
 * LET OP: eigen wijziging, opnieuw toepassen na een update van dit
 * pakket (zie PAKKETWIJZIGINGEN.md, sectie "shop").
 *
 * Was: alleen `accent-color` op de kale native checkbox. Onbevinkt bleef
 * dat de eigen randkleur van de browser tonen — een kouder, donkerder
 * grijs dan --shop-color-border — wat naast de rest van het paneel
 * onverzorgd oogde. Nu een volledig zelf getekende doos (`appearance:
 * none`) met het vinkje als ::after, via dezelfde rand-rotatietruc als
 * de chevron op .shop-filter-group__summary hierboven. De globale
 * focus-stijl (regel ±63 hierboven, `.shop-drawer input:focus-visible`)
 * blijft gewoon werken: appearance:none verandert niets aan het
 * onderliggende <input>-element.
 */
.shop-filter-group__checkbox {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	flex: 0 0 auto;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	/* --shop-color-muted en niet --shop-color-border: bij een leeg vakje
	   is de rand het énige wat er staat, dus hij valt onder de 3:1 die
	   WCAG voor bedieningselementen vraagt. #e5e2dd haalde 1,29:1 op wit;
	   #6d6a66 haalt 4,9:1. De randkleur van omliggende vlakken blijft
	   ongemoeid — die zijn decoratief, dit is een bedieningselement. */
	border: 1px solid var(--shop-color-muted);
	border-radius: 4px;
	background: var(--shop-color-bg);
	cursor: pointer;
	transition: background-color var(--shop-transition), border-color var(--shop-transition);
}

/* --shop-color-text en niet --shop-color-muted: dat laatste is sinds de
   WCAG-correctie hierboven precies de rustkleur van de rand, dus deze
   regel deed niets meer — hoveren over een leeg vakje leverde geen enkele
   verandering op. De hover is overgenomen uit het pil-patroon, waar de
   rustrand nog de lichtere --shop-color-border was. */
.shop-filter-group__checkbox:hover {
	border-color: var(--shop-color-text);
}

.shop-filter-group__checkbox:checked {
	border-color: var(--shop-color-accent);
	background: var(--shop-color-accent);
}

.shop-filter-group__checkbox:checked::after {
	content: "";
	position: absolute;
	left: 0.36rem;
	top: 0.16rem;
	width: 0.28rem;
	height: 0.52rem;
	border-right: 2px solid var(--shop-color-accent-contrast);
	border-bottom: 2px solid var(--shop-color-accent-contrast);
	transform: rotate(45deg);
}

.shop-filter-group__option-count {
	color: var(--shop-color-muted);
}

.shop-drawer__footer {
	display: flex;
	flex-direction: column;
	gap: var(--shop-space-2);
	padding: var(--shop-space-4) var(--shop-space-5);
	border-block-start: 1px solid var(--shop-color-border);
	background: var(--shop-color-bg);
}

.shop-drawer__submit {
	padding: var(--shop-space-3) var(--shop-space-4);
	border: 0;
	border-radius: var(--shop-radius);
	background: var(--shop-color-accent);
	color: var(--shop-color-accent-contrast);
	font: inherit;
	cursor: pointer;
}

.shop-drawer__submit:hover {
	opacity: 0.9;
}

/*
 * LET OP: eigen wijziging, opnieuw toepassen na een update van dit
 * pakket (zie PAKKETWIJZIGINGEN.md, sectie "shop").
 *
 * Was: een kale onderstreepte tekstlink zonder eigen vorm, terwijl
 * .shop-drawer__submit hierboven wél volledig als knop oogt (vulling,
 * radius, padding) — de twee footeracties oogden daardoor niet als één
 * setje. Nu een echte secundaire knop op dezelfde radius/padding-schaal
 * als de primaire, maar met randlijn i.p.v. vulling: duidelijk een
 * tweede keuze, geen tekstlink. Hover leent van hetzelfde patroon als
 * de pilfilters hierboven (border-color: --shop-color-muted +
 * achtergrond --shop-color-surface).
 */
.shop-drawer__reset {
	display: block;
	padding: var(--shop-space-3) var(--shop-space-4);
	/* Zelfde reden als bij het filtervakje: dit is de enige contour van
	   een knop, en 1,29:1 is te weinig om hem als knop te herkennen. */
	border: 1px solid var(--shop-color-muted);
	border-radius: var(--shop-radius);
	background: var(--shop-color-bg);
	color: var(--shop-color-text);
	font-size: var(--shop-font-size-sm);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--shop-transition), border-color var(--shop-transition);
}

/* Alleen de achtergrond: de border-color die hier stond was dezelfde
   --shop-color-muted als in de rusttoestand hierboven en veranderde dus
   niets. */
.shop-drawer__reset:hover {
	background: var(--shop-color-surface);
	/* De globale `a:hover { color: var(--ink) }` (style.css sectie 2)
	   staat op (0,1,1) en zou de tekst juist lichter maken terwijl het
	   vlak donkerder wordt. Deze regel is (0,2,0) en wint. */
	color: var(--shop-color-text);
}

/* Scroll-lock terwijl de drawer open is */
.shop-drawer-locked {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   Reduced motion
   ---------------------------------------------------------------------- */

/* Geen eigen prefers-reduced-motion-blok meer. style.css sectie 2 zet
   `*, *::before, *::after { animation: none !important; transition: none
   !important }`, wat alles hier al dekt. De kopie die hier stond zette
   0.01ms in plaats van none, en omdat een gescopede selector met
   !important van de universele wint, kregen bezoekers binnen .shop
   transities van één frame die nog een transitionend afvuurden — terwijl
   ze elders nooit vuren. Scripts die op dat event wachten (de lade)
   gedroegen zich daardoor per pakket anders. */