/* =============================================================================
   Hinke. Trendstore — shop-/categorie-archief.

   1:1 met Figma "Categoriepagina" (node 2196:343), plus de afwijkingen van
   "Sale" (2196:1083) en "New" (2194:272). Alle waarden uit de design-data.

   LET OP: dit archief gebruikt NIET de standaardcontainer van 1320px, maar de
   bredere band x=181…1742 = 1561px. Sidebar 208 · tussenruimte 42 · grid 1311.

   Styling hangt op de markup die de core aanlevert (sellabees_shop_grid,
   sellabees_render_filter): .sellabees-shop*, .sellabees-filter*,
   .sellabees-price*, .sellabees-loadmore*, .sellabees-wish-btn.
   ========================================================================== */

/* De wrapper zelf loopt over de VOLLE breedte (.hinke-main heeft geen eigen
   opmaak) en de band van 1561px zit op de kinderen die hem nodig hebben.

   WAAROM ZO: de kopbalk is full-bleed. Dat werd hier gedaan met
   `margin-inline: calc(50% - 50vw)` op een wrapper van 1561px — een bekende
   truc, maar `vw` rekent de KLASSIEKE SCROLLBALK mee. Op een bureaublad (elke
   breedte, dus ook 1024) werd de balk daardoor 15px breder dan het zichtbare
   deel en kreeg de hele pagina een horizontale scrollbalk van ±8px. Op een
   telefoon valt dat niet op — daar zweeft de scrollbalk over de inhoud en is
   `100vw` gelijk aan de zichtbare breedte — maar het is er wel.
   Met een wrapper op volle breedte is `100%` van de kopbalk per definitie de
   zichtbare breedte en is er niets om uit te breken.

   Zelfde constructie staat ook in pages/cart.css en pages/checkout.css; die
   zijn niet van mij (zie het rapport). */
.sellabees-shop {
	--hinke-shop-band: min(100% - (2 * var(--hinke-gutter)), 1561px);

	/*
	 * Ruimte tussen het raster en de volle-breedte-sectie eronder.
	 *
	 * Zonder deze regel begon de footer exact waar het raster eindigde — gemeten
	 * 0px op /schoenen/, /winkel/ én /sale/. Dat viel het meest op zodra alle
	 * producten al getoond zijn: dan staat er ook geen "Laad meer"-link meer die
	 * nog wat lucht gaf, en plakte de teller "7 van 7 producten bekeken" tegen de
	 * roze band aan.
	 *
	 * 85px komt uit het ontwerp: "Laad meer" eindigt op y=3052 en de sectie erna
	 * begint op y=3137 (frame Sale 2196:1340 → 2196:1343). Op de wrapper en niet
	 * op `.sellabees-loadmore`, want dat element bestaat niet op elke pagina — de
	 * sale-pagina gebruikt paginering via een query-parameter en heeft het
	 * helemaal niet.
	 */
	padding-bottom: 85px;
}

/* -----------------------------------------------------------------------------
   Titelbalk — full-bleed roze band 1920×142 op y=150
   -------------------------------------------------------------------------- */

.sellabees-shop__head {
	height: 142px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--hinke-pink);
}

.sellabees-shop__title {
	margin: 0;
	font-family: var(--hinke-font-heading);
	font-weight: 400;
	font-size: 40px;
	line-height: normal;
	color: var(--hinke-white);
	text-align: center;
}

/* -----------------------------------------------------------------------------
   Sale — eigen kopbalk (node 2196:1083)

   Deze pagina wijkt af van de andere kopbalken. Opgemeten in de Figma-render van
   het frame (kleur bemonsterd, tekstgrenzen bepaald op de witte inkt):

     vlak    1920×142 op y=150, #ec827e — dieper roze dan de #efc2bd van de
             andere pagina's, en gelijk aan --hinke-badge
     label   "SALE" — inkt y 187…197 (11px kaphoogte), 38px breed,
             gecentreerd op x=958,5 (node 2196:1449)
     kop     "Tot 50% korting" — inkt y 212…248, 282px breed, gecentreerd op
             x=959,5, DM Serif Display wit (node 2196:1432)

   De markup komt uit page-sale.php in dit child; de core-template escapet zijn
   titel, dus daar was geen plek voor een label. Er stond hier eerder CSS voor een
   `.sellabees-shop__eyebrow` ín de titel — die markup kon nooit ontstaan en is
   daarom vervangen door regels die op de echte opbouw aangrijpen.
   -------------------------------------------------------------------------- */

/* Niet verticaal centreren maar vanaf de bovenkant plaatsen. De twee tekstvakken
   OVERLAPPEN in het ontwerp (label 182…202, kop 192…260), en dat is met
   `justify-content: center` niet te halen: elke correctie aan de kop verschuift
   dan ook het label. Vandaar een vaste bovenmarge en een negatieve marge op de
   kop, precies zoals het ontwerp de twee vakken over elkaar legt.
   32,5 + 20 (labelvak) − 3 = 199,5 → kaplijn van de kop op 212. */
.hinke-sale__head {
	justify-content: flex-start;
	gap: 0;
	padding-top: 32.5px;
	background: var(--hinke-badge);
}

.hinke-sale__label {
	margin: 0;
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 15px;
	line-height: 20px;
	/* Het ontwerp spatieert dit woord: inkt 38px breed waar de letters zelf
	   35px vullen (node 2196:1449). */
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--hinke-white);
	text-align: center;
}

/* 52px regelvak bij 40px letter zet de kaplijn op 212 en de staart op 248. */
.hinke-sale__title {
	margin-top: -3px;
	line-height: 52px;
}

/* Archiefbeschrijving van WooCommerce — in het ontwerp niet in de band. */
.sellabees-shop__head .term-description {
	display: none;
}

/* -----------------------------------------------------------------------------
   Body — sidebar + grid
   -------------------------------------------------------------------------- */

.sellabees-shop__body {
	display: grid;
	grid-template-columns: 208px 1311px;
	column-gap: 42px;
	/* De contentband x=181…1742. Zat eerder op .sellabees-shop; zie de uitleg
	   daar waarom die nu op volle breedte staat. */
	width: var(--hinke-shop-band);
	margin: 57px auto 0; /* 349 − 292 */
	align-items: start;
}

.sellabees-shop__main--full {
	grid-column: 1 / -1;
}

.sellabees-shop__body:has(.sellabees-shop__main--full) {
	grid-template-columns: minmax(0, 1fr);
}

/* -----------------------------------------------------------------------------
   Filter-sidebar (208px)
   -------------------------------------------------------------------------- */

.sellabees-filter {
	width: 208px;
}

.sellabees-filter__form > *:first-child {
	margin-top: 0;
}

/* "FILTER" — de kop van de hele sidebar (node 2196:577: Outfit ExtraBold 25px,
   #4e4e4e, uppercase, y=349…381). Een echte <h2> uit inc/shop.php i.p.v. een
   ::before, zodat schermlezers de sidebar ook als sectie herkennen. */
.sellabees-filter__heading {
	margin: 0 0 15px; /* 396 − 381 */
	font-family: var(--hinke-font-body);
	font-weight: 800;
	font-size: 25px;
	line-height: 32px;
	text-transform: uppercase;
	color: var(--hinke-body);
}

/* Groep: laatste optie → scheidingslijn 40px (lijn 1px #d9d9d9 op y=497 /
   y=666, nodes 2196:584 en 2196:585); lijn → volgende kop 29px. */
.sellabees-filter__group {
	padding-bottom: 40px;
	border-bottom: 1px solid #d9d9d9;
	margin-bottom: 29px;
}

/* Onder het LAATSTE facet hoort geen scheidingslijn (het ontwerp heeft er twee:
   onder Maat en onder Kleur, niet onder Prijs).
   LET OP: hier stond `:last-of-type`, en dat werkte niet — dat betekent "het
   laatste <div> tussen de broers en zussen", en dat is .sellabees-filter__actions.
   De prijsgroep hield daardoor zijn rand en er bleef een losse lijn onder de
   schuifbalk staan. Deze selector pakt de groep zonder volgende groep, wat er
   ook achter komt. */
.sellabees-filter__group:not(:has(~ .sellabees-filter__group)) {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* Facetkoppen MAAT/KLEUR/PRIJS (nodes 2196:582/580/581): Outfit ExtraBold 16px. */
.sellabees-filter__title {
	margin: 0 0 14px; /* MAAT 416 → blokjes 430 */
	font-family: var(--hinke-font-body);
	font-weight: 800;
	font-size: 16px;
	line-height: 20px;
	text-transform: uppercase;
	color: var(--hinke-body);
}

/* Kleur en Prijs staan in het ontwerp 4px ruimer onder hun kop
   (KLEUR 547 → 565, PRIJS 716 → 734). */
.sellabees-filter__group--kleur .sellabees-filter__title,
.sellabees-filter__group--prijs .sellabees-filter__title {
	margin-bottom: 18px;
}

/* Onder Kleur staat de scheidingslijn in het ontwerp 39px lager i.p.v. 40
   (node 2196:585 op y=666, tegen y=497 voor node 2196:584 onder Maat). */
.sellabees-filter__group--kleur {
	padding-bottom: 39px;
}

.sellabees-filter__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Standaardrij: swatch/chip 27×27 + label op 9px afstand, rijafstand 35px. */
.sellabees-filter__check {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 27px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 35px;
	text-transform: uppercase;
	color: var(--hinke-body);
	cursor: pointer;
}

.sellabees-filter__list > li + li {
	margin-top: 8px; /* 35 − 27 */
}

/* --- Categorieën: rij losse namen (alleen op de Sale-pagina) ---------------
   Node 2196:1318: de negen categorienamen staan van y=428 tot 743 binnen 171px
   breed — 9 regels in 315px is een steek van 35px. Geen zichtbare
   aankruisvakjes, geen opsommingstekens: kapitalen in de bodykleur, met de kop
   erboven op y=394 (dezelfde .sellabees-filter__title als bij Maat en Kleur).

   Ónder water zijn het wél aankruisvakjes, net als de andere facetten. Dat is
   met opzet: de filter-JS van de core bouwt de URL uit ALLE aangevinkte
   checkboxes in het formulier. Met losse links (een eerdere poging) viel de
   categoriekeuze weg zodra je daarna een maat aanklikte, en kende de core zijn
   prefetch voor dit facet niet meer. De vorm komt dus uit het ontwerp, de
   werking uit de core. */
.sellabees-filter__list--categorie > li + li {
	margin-top: 0;
}

.sellabees-filter__list--categorie .sellabees-filter__check {
	display: block;
	/* 35px steek bij een regelhoogte van 25 → 10px eronder. */
	padding-bottom: 10px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 25px;
	text-transform: uppercase;
	color: var(--hinke-body);
	cursor: pointer;
}

/* Zelfde manier van wegwerken als bij Maat en Kleur: het vakje blijft in de DOM
   (schermlezers en de core-JS hebben het nodig) maar is onzichtbaar en vangt zelf
   geen klik — het label eromheen doet dat. */
.sellabees-filter__list--categorie input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sellabees-filter__list--categorie .sellabees-filter__check:hover {
	color: var(--hinke-sale);
}

/* Aangevinkt: vet én rood, zodat de keuze ook zonder kleurwaarneming te zien is.
   Het vet zit op een even brede letter (Outfit heeft geen wisselende
   glyphbreedte per gewicht op dit formaat), dus de rij verspringt niet. */
.sellabees-filter__list--categorie .sellabees-filter__check:has(input:checked) {
	font-weight: 700;
	color: var(--hinke-sale);
}

/* De checkbox zelf is onzichtbaar; de focusring moet dat opvangen. */
.sellabees-filter__list--categorie .sellabees-filter__check:has(input:focus-visible) {
	outline: 2px solid var(--hinke-gold);
	outline-offset: 2px;
}

/* --- Maat: vierkante blokjes -----------------------------------------------
   Node 2196:399 e.v.: 27×27, #efc2bd, GEEN radius en geen rand; label in
   Kumbh Sans 12px wit uppercase (node 2196:484). 5 per rij, steek 31 → 4px gap.
   De URL-parameter is `maat` (zie inc/shop.php), dus de modifier is --maat. */
.sellabees-filter__list--maat {
	display: flex;
	flex-wrap: wrap;
	gap: 4px; /* steek 31 − 27 */
}

/* De <li> als flexcontainer: anders krijgt het blokje (inline-flex) de
   regelhoogte van de li eronder als descender-ruimte mee en wordt de rij
   hoger dan 27px, waardoor alles daaronder verschuift. */
.sellabees-filter__list--maat > li,
.sellabees-filter__list--kleur > li {
	display: flex;
}

.sellabees-filter__list--maat > li + li {
	margin-top: 0;
}

.sellabees-filter__list--maat .sellabees-filter__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* "One Size" is te lang voor 27px: min-width houdt XS…XXL exact vierkant,
	   langere namen mogen in de breedte groeien i.p.v. over twee regels te
	   breken. Het ontwerp toont alleen korte maten, dus dit is de enige plek
	   waar we moeten interpreteren. */
	min-width: 27px;
	height: 27px;
	padding: 0 5px;
	gap: 0;
	background: var(--hinke-pink);
	color: var(--hinke-white);
	font-family: var(--hinke-font-ui);
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
	text-transform: uppercase;
}

.sellabees-filter__list--maat input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sellabees-filter__list--maat .sellabees-filter__check:has(input:checked) {
	outline: 2px solid var(--hinke-body);
	outline-offset: 0;
}

/* --- Kleur: ronde stalen ---------------------------------------------------
   Nodes 2196:565 (wit: wél een rand van 2px #4e4e4e) en 2196:569 (gekleurd:
   alleen een vulling, geen rand): 27×27, border-radius 100px. 6 per rij,
   steek 33 horizontaal (6px gap) en 35 verticaal (8px gap).
   Het ontwerp zet GEEN tekstlabel naast het staal — de naam staat in
   .screen-reader-text (inc/shop.php). */
.sellabees-filter__list--kleur {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 6px;
}

.sellabees-filter__list--kleur > li + li {
	margin-top: 0;
}

.sellabees-filter__list--kleur .sellabees-filter__check {
	display: inline-flex;
	gap: 0;
	min-height: 27px;
	line-height: 0;
}

.sellabees-filter__list--kleur input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* De hex komt uit inc/shop.php via --hinke-swatch (dezelfde bron als de
   variatie-swatches op de productpagina: term-meta → ACF → slug-tabel). */
.sellabees-filter__list--kleur .sellabees-filter__swatch {
	display: block;
	flex: 0 0 auto;
	width: 27px;
	height: 27px;
	border-radius: 100px;
	background: var(--hinke-swatch, #d9d9d9);
}

/* Lichte kleuren (wit, crème) vallen weg op wit → randje, net als in het
   ontwerp bij het witte staal. box-sizing houdt de cirkel op 27px. */
.sellabees-filter__list--kleur .sellabees-filter__check.is-light .sellabees-filter__swatch {
	box-sizing: border-box;
	border: 2px solid var(--hinke-body);
}

.sellabees-filter__list--kleur .sellabees-filter__check:has(input:checked) .sellabees-filter__swatch {
	outline: 2px solid var(--hinke-body);
	outline-offset: 2px;
}

/* Toetsenbordfocus moet zichtbaar blijven nu de checkbox zelf onzichtbaar is. */
.sellabees-filter__list--maat .sellabees-filter__check:has(input:focus-visible),
.sellabees-filter__list--kleur .sellabees-filter__check:has(input:focus-visible) {
	outline: 2px solid var(--hinke-body);
	outline-offset: 2px;
}

/* Categorieën-lijst (Sale/New): platte links, regelhoogte 35. */
.sellabees-filter__list--product_cat .sellabees-filter__check {
	line-height: 35px;
}

/* --- "+ meer" / "− minder" -------------------------------------------------
   Vanaf meer dan 8 opties (sellabees_filter_collapse_threshold → 8) klapt een
   lijst in. De server rendert álle opties plus deze knop met `hidden`;
   hinke-shop.js zet `is-collapsed` en toont de knop. Zonder JS staat dus alles
   open — geen dood filter. Het ontwerp laat deze staat niet zien (Maat heeft
   daar 5 opties), dus de opmaak volgt de "Laad meer"-link: onderstreepte tekst
   in de bodykleur. */
.sellabees-filter__list.is-collapsed > li.is-extra {
	display: none;
}

/* 18px hoog → 24px aanraakvlak. Boven de knop zit 12px marge tot de laatste
   filteroptie en eronder de groepsrand, dus 3px erbij raakt geen ander doel. */
.sellabees-filter__more::after {
	content: '';
	position: absolute;
	top: -3px;
	right: 0;
	bottom: -3px;
	left: 0;
}

.sellabees-filter__more {
	position: relative;
	display: inline-block;
	margin: 12px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-body);
	text-decoration: underline;
	cursor: pointer;
}

/* Moet ná de display-regel staan, anders wint `display: inline-block` van
   het hidden-attribuut en zie je de knop ook zonder JS. */
.sellabees-filter__more[hidden] {
	display: none;
}

/* --- Prijsfilter ---------------------------------------------------------- */

/* Het ontwerp (nodes 2196:586…592) zet de prijsfilter zó neer:
     twee velden 80×34 op y=734…768, met 48px ertussen (x=181 en x=309)
     dááronder de schuifbalk op y=788…823 met twee grepen van 35×35
     de baan is 5px hoog en #efc2bd (gemeten op y=803…807)
   De vakjes staan dus BOVEN de balk — daarom rendert inc/shop.php ze als
   eerste kind. Ze zijn echte invoervelden: min_price/max_price voor de query
   én .sellabees-price__lmin/__lmax voor de core-JS, in één element. */
.sellabees-price {
	/* Greepmaat als variabele: de baan-inspringing, de hoogte van het baanvak én de
	   duim zelf zijn hiervan afgeleid. Op touch zetten we deze op 44px (zie
	   RESPONSIVE) en schuift al het bijbehorende rekenwerk mee — anders zou de
	   vulling niet meer onder de grepen uitkomen. */
	--hinke-price-thumb: 35px;
	width: 208px;
}

.sellabees-price__labels {
	display: flex;
	gap: 48px; /* 309 − 181 − 80 */
	margin: 0 0 20px; /* 788 − 768 */
}

.sellabees-price__lmin,
.sellabees-price__lmax {
	box-sizing: border-box;
	width: 80px;
	height: 34px;
	padding: 0 6px;
	border: 1px solid #d9d9d9; /* node 2196:588 */
	border-radius: 2px;
	background: var(--hinke-white);
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px; /* node 2196:586 */
	line-height: 32px;
	color: var(--hinke-body);
	text-align: center;
	-webkit-appearance: none;
	appearance: none;
}

.sellabees-price__lmin:focus,
.sellabees-price__lmax:focus {
	outline: 2px solid var(--hinke-body);
	outline-offset: 1px;
}

/* Balkgebied: net zo hoog als de greep, zodat de baan er verticaal in gecentreerd
   staat en de grepen niet buiten de sidebar vallen. */
.sellabees-price__slider {
	position: relative;
	width: 100%;
	height: var(--hinke-price-thumb);
}

/* De baan loopt van greepmidden tot greepmidden (17,5px inspringen aan beide
   kanten). Dan valt de vulling die de core-JS in procenten zet exact samen met
   de grepen, en komt het zichtbare roze tussen de grepen op x=216…354 uit —
   precies zoals in het ontwerp. */
.sellabees-price__track {
	position: absolute;
	top: calc((var(--hinke-price-thumb) - 5px) / 2); /* baanmidden = greepmidden */
	left: calc(var(--hinke-price-thumb) / 2);
	right: calc(var(--hinke-price-thumb) / 2);
	height: 5px;
	background: #f7e0dd; /* roze op 50% — in het ontwerp staat de slider open,
	                        dus deze "nog niet gekozen"-kleur is daar niet te zien */
}

.sellabees-price__fill {
	position: absolute;
	top: 0;
	height: 5px;
	background: var(--hinke-pink); /* #efc2bd, gemeten in het ontwerp */
}

/* Grepen 35×35 rond, wit met een roze rand van 1px en een zachte schaduw
   (nodes 2196:591/592). De <input> zelf is transparant en laat kliks door;
   alleen de duim vangt de muis, zodat beide grepen bereikbaar blijven. */
.sellabees-price__range {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--hinke-price-thumb);
	margin: 0;
	padding: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}

.sellabees-price__range::-webkit-slider-runnable-track {
	height: var(--hinke-price-thumb);
	background: none;
	border: 0;
}

.sellabees-price__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	box-sizing: border-box;
	width: var(--hinke-price-thumb);
	height: var(--hinke-price-thumb);
	border-radius: 50%;
	border: 1px solid var(--hinke-pink);
	background: var(--hinke-white);
	box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
	cursor: pointer;
	pointer-events: auto;
}

.sellabees-price__range::-moz-range-track {
	height: var(--hinke-price-thumb);
	background: none;
	border: 0;
}

.sellabees-price__range::-moz-range-thumb {
	box-sizing: border-box;
	width: var(--hinke-price-thumb);
	height: var(--hinke-price-thumb);
	border-radius: 50%;
	border: 1px solid var(--hinke-pink);
	background: var(--hinke-white);
	box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
	cursor: pointer;
	pointer-events: auto;
}

.sellabees-filter__actions {
	margin-top: 20px;
}

.sellabees-filter__reset {
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	color: var(--hinke-body);
	text-decoration: underline;
}

/* Sidebar-toggle: alleen onder de breakpoint nodig. */
.sellabees-filter-toggle {
	display: none;
}

/* -----------------------------------------------------------------------------
   Balk boven het grid — aantal links, sortering rechts
   -------------------------------------------------------------------------- */

.sellabees-shop__bar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	/* balk 349…374 (sorteervak 25 hoog) + 20 = eerste beeld op y=394 */
	margin: 0 0 20px;
}

/* WooCommerce zet `.woocommerce-ordering { margin: 0 0 1em }`; die 16px duwde
   het grid 23px te laag. Bodyclass erbij zodat we winnen op specificiteit. */
.woocommerce .sellabees-shop__bar .woocommerce-ordering {
	margin: 0;
}

/* "12 van 505 producten" (node 2196:598, x=431 y=353): Outfit Regular 14px.
   De tekst komt uit woocommerce/loop/result-count.php in dit thema. */
.sellabees-shop__bar .woocommerce-result-count {
	margin: 4px 0 0;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-body);
}

/* Mocht de core-versie van result-count.php toch aan bod komen (die zet een
   lange én een korte variant in de DOM en verwacht dat het child er één
   wegstyleert), dan hoort hier alleen de lange te staan. Zonder deze regel
   lees je "Showing all 13 results13". */
.sellabees-shop__bar .woocommerce-result-count .sellabees-rc-short {
	display: none;
}

/* Sorteren: 178×25, vlak #d9d9d9, radius 2px, geen rand (node 2196:593).
   Het pijltje is 8×8 in #4e4e4e met de rechterkant 7px van de rand
   (node 2196:594, gemeten op x=1727…1735 tegen een vak dat op 1742 eindigt).
   LET OP: hier stond eerst icons/chevron.svg — dat is het WITTE pijltje van de
   header (10×5,7) en dat werd door background-size: 8px 8px ook uitgerekt.
   Wit op #d9d9d9 is vrijwel onzichtbaar; vandaar het eigen chevron-select.svg. */
.sellabees-shop__bar .woocommerce-ordering select,
.sellabees-shop__bar select.orderby {
	width: 178px;
	height: 25px;
	padding: 0 24px 0 13px;
	border: 0;
	border-radius: 2px;
	background-color: #d9d9d9;
	background-image: url('../../img/icons/chevron-select.svg');
	background-repeat: no-repeat;
	background-position: right 7px center;
	background-size: 8px 8px;
	-webkit-appearance: none;
	appearance: none;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 25px;
	color: var(--hinke-body);
	cursor: pointer;
}

/* -----------------------------------------------------------------------------
   Productgrid — 4 × 314px, kolomruimte 18,33 · rijruimte 33
   -------------------------------------------------------------------------- */

.woocommerce .sellabees-shop__main ul.products {
	display: grid;
	grid-template-columns: repeat(4, 314px);
	column-gap: 18.33px;
	row-gap: 33px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sellabees-shop__main ul.products::before,
.sellabees-shop__main ul.products::after {
	content: none; /* WooCommerce' eigen clearfix uitzetten */
}

/* `.woocommerce` erbij: WooCommerce' eigen regel
   `.woocommerce ul.products li.product { width: 30.75%; float: left }` heeft
   precies dezelfde specificiteit (0,3,2) én laadt later, waardoor de kaart
   30,75% van de 314px-kolom werd (≈97px). Met de bodyclass erbij winnen wij. */
.woocommerce .sellabees-shop__main ul.products li.product {
	width: auto;
	margin: 0;
	padding: 0;
	float: none;
	position: relative;
}

/* Beeld 314×526, crop-to-fill, vierkante hoeken. */
.woocommerce .sellabees-shop .sellabees-shop__main ul.products li.product a img,
.woocommerce .sellabees-shop .sellabees-shop__main ul.products li.product img.attachment-woocommerce_thumbnail {
	display: block;
	width: 100%;
	aspect-ratio: 314 / 526;
	object-fit: cover;
	margin: 0;
}

/* Titel 12px onder het beeld. */
.woocommerce .sellabees-shop .sellabees-shop__main ul.products li.product .woocommerce-loop-product__title {
	margin: 12px 0 0;
	padding: 0;
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	text-transform: uppercase;
	color: var(--hinke-body);
}

/* Prijs 4px onder de titel. */
.woocommerce .sellabees-shop .sellabees-shop__main ul.products li.product .price {
	display: block;
	margin: 4px 0 0;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-muted);
}

/* Sale: oude prijs doorgestreept 11px, nieuwe prijs 14px in rood. */
.sellabees-shop__main li.product .price del {
	font-size: 11px;
	color: var(--hinke-muted);
	text-decoration: line-through;
	margin-right: 10px;
}

.sellabees-shop__main li.product .price ins {
	font-size: 14px;
	color: var(--hinke-sale);
	text-decoration: none;
}

/* Maat-chips 7px onder de prijs. */
.sellabees-shop__main .sellabees-loop-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 7px;
	justify-content: flex-start;
}

/* WAAROM DEZE 27×27 BLIJVEN, ook op een telefoon.
   Deze blokjes zijn wél bedieningselementen: de core geeft ze `role="link"` en
   `tabindex="0"` (inc/productcard.php), dus ze zijn aantikbaar. Op de kaarten van
   de HOMEPAGE zijn ze daarom opgerekt naar een raakvlak van 44×44 (layout.css).
   Hier niet: een kaart in het archief is op 360px maar 148px breed, en met een
   steek van 44 passen er drie per rij — dan breekt de matenrij naar twee regels en
   wordt elke kaart hoger. Ze blijven dus 27×27 met 4px ertussen. Dat haalt WCAG
   2.5.8 (AA) nog steeds: de middelpunten liggen 31px uit elkaar, dus de cirkels
   van 24px die de norm voorschrijft raken elkaar niet. Rek ze hier niet op zonder
   de kaarthoogte opnieuw te meten. */
.sellabees-shop__main .sellabees-size {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Zie de maat-blokjes in het filter: min-width houdt XS…XXL vierkant op 27px
	   (nodes 2196:395/480), "One Size" mag in de breedte groeien i.p.v. over
	   twee regels te breken en uit het blokje te lopen. */
	min-width: 27px;
	height: 27px;
	padding: 0 5px;
	border: 0;
	border-radius: 0;
	background: var(--hinke-pink);
	color: var(--hinke-white);
	font-family: var(--hinke-font-ui);
	font-weight: 400;
	font-size: 12px;
	line-height: 1;
	white-space: nowrap;
	text-transform: uppercase;
}

.sellabees-shop__main .sellabees-size.is-unavailable {
	text-decoration: line-through;
	opacity: .5;
}

/* -----------------------------------------------------------------------------
   SALE-badge — 91×44 rood, LINKSONDER op het beeld
   Gemeten in het ontwerp (frame Sale 2196:1083, eerste kaart): x=431…521 en
   y=848…891, met het beeld op y=394…920. De badge begint dus 454px onder de
   bovenkant van het beeld en eindigt 29px boven de onderkant.

   SPECIFICITEIT: WooCommerce' eigen
   `.woocommerce ul.products li.product .onsale { top:0; right:0; left:auto }`
   is (0,4,2) en laadt later; de vorige selector hier was (0,4,1) en verloor —
   daardoor stond de badge rechtsboven, half buiten de kaart, bovenop het
   verlanglijst-hartje. inc/shop.php hangt er op het archief een eigen klasse
   bij, waarmee deze selector op (0,5,2) uitkomt en dus wint.

   POSITIE: `top: 0` + een procentuele `margin-top` — een procentuele marge
   rekent (ook bij position: absolute) tegen de BREEDTE van het blok. Zo blijft
   de badge op de juiste plek op het beeld, ook als de kolom smaller wordt.

   LET OP — hier stond een vaste 144,59% (= 454/314). Dat rekent vanaf de
   BOVENkant van het beeld, terwijl het ontwerp de badge aan de ONDERkant
   uitlijnt (29px boven de onderrand) en de badge zelf 44px hoog BLIJFT. Op een
   smallere kolom krimpt het beeld dus wél en de badge niet: bij een kaart van
   148px (2 kolommen op 360px) kwam de badge op 214px in een beeld van 248px en
   liep hij 10px ónder het beeld door, over de producttitel heen.

   Nu rekenen we vanaf de onderkant: beeldhoogte is 526/314 = 167,516% van de
   kolombreedte, daar de badgehoogte en de 28px marge af. Op 314px komt dat
   uit op 526 − 44 − 28 = 454 — exact de ontwerpwaarde — en op élke breedte
   blijft de badge 28px boven de onderrand van het beeld.
   `position: absolute` kan hier niet met `bottom` werken: de kaart is hoger
   dan het beeld (titel, prijs en maatblokjes horen erbij).
   -------------------------------------------------------------------------- */
.woocommerce .sellabees-shop__main ul.products li.product .onsale.hinke-sale-badge {
	--hinke-salebadge-h: 44px;
	position: absolute;
	left: 0;
	right: auto;
	top: 0;
	margin: calc(167.516% - var(--hinke-salebadge-h) - 28px) 0 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 91px;
	min-width: 0;
	min-height: 0;
	height: var(--hinke-salebadge-h);
	padding: 0;
	border-radius: 0;
	background: var(--hinke-sale);
	color: var(--hinke-white);
	font-family: var(--hinke-font-body);
	font-weight: 800;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   Verlanglijst-hartje — massief 27×23, rechtsboven op het beeld
   Node 2217:4688: x=709 y=404 in een beeld op x=431…745 / y=394 → dus 10px van
   boven en 9px van rechts, vulling #d2544f (= --hinke-sale).

   Het hartje kwam uit de core (sellabees_wishlist_button, hook
   woocommerce_after_shop_loop_item) en stond ook al goed; het was alleen
   nauwelijks te zien. Twee oorzaken, beide nu weg:
     1. het core-icoon is een LIJN-hartje met fill="none" ÓP DE <path>; een
        presentatie-attribuut op het element zelf gaat vóór de geërfde
        `fill: currentColor` van de <svg>. inc/shop.php levert daarom via
        `sellabees_wishlist_icon` de massieve SVG uit het ontwerp.
     2. de SALE-badge lag er bovenop (zie de badge-regel hierboven).
   -------------------------------------------------------------------------- */
.sellabees-shop__main li.product .sellabees-wish-btn {
	position: absolute;
	top: 10px;
	right: 9px;
	z-index: 4; /* boven de badge, mocht die ooit weer rechtsboven landen */
	width: 27px;
	height: 23px;
	padding: 0;
	border: 0;
	background: none;
	/* In rust WIT, niet rood: het hartje ligt op de productfoto en moet pas
	   opvallen als het product écht op de verlanglijst staat. (Het ontwerp toont
	   in node 2217:4688 alleen de massief rode variant — dat is de actieve staat;
	   de rustkleur is een expliciete keuze van de eigenaar.) */
	color: var(--hinke-white);
	cursor: pointer;
	line-height: 0;
}

/*
 * Aanraakdoel op 27px hoog. Het hartje is 27×23 — de maat uit het ontwerp — en
 * daarmee 1px te laag voor de 24×24 van WCAG 2.5.8 (AA). Onder 900px en op een
 * aanraakscherm wordt de knop al 44×44 (zie de regel verderop); dit is de
 * muisvariant, waar de 23px bleef staan.
 *
 * Een onzichtbaar vlak van 2px boven en onder in plaats van een hogere knop, want
 * het hartje staat op 10px van de bovenrand van de foto en dat is de plaatsing uit
 * het ontwerp. Het vlak ligt over de kaartlink, maar de knop heeft z-index 4 en
 * gaat dus vóór — die 2px waren eerder "kaart openen" en zijn nu "hartje".
 */
.sellabees-shop__main li.product .sellabees-wish-btn::after {
	content: '';
	position: absolute;
	top: -2px;
	right: 0;
	bottom: -2px;
	left: 0;
}

.sellabees-shop__main li.product .sellabees-wish-btn__icon {
	display: block;
	width: 27px;
	height: 23px;
	fill: currentColor;
}

/* Al op de lijst: het massieve rood uit het ontwerp (node 2217:4688) — dát is de
   staat die daar getekend staat. Nu de rusttoestand wit is, is dit ook het enige
   moment waarop het hartje opvalt, dus geen afgeleid donkerder rood meer. */
.sellabees-shop__main li.product .sellabees-wish-btn.is-active {
	color: var(--hinke-sale);
}

.sellabees-shop__main li.product .sellabees-wish-btn.is-active .sellabees-wish-btn__icon {
	transform: scale(1.08);
}

/* Focusring in het rood: een witte ring om een wit hartje op een lichte foto is
   niet te zien, en dan is er met het toetsenbord niet te navigeren. */
.sellabees-shop__main li.product .sellabees-wish-btn:focus-visible {
	outline: 2px solid var(--hinke-sale);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Laad meer — tekstlink, gecentreerd onder het grid
   -------------------------------------------------------------------------- */

.sellabees-loadmore {
	margin-top: 61px; /* 2949 → 3010 */
	text-align: center;
}

.sellabees-loadmore__count {
	margin: 0;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-body);
}

/* "Laad minder" krijgt exact dezelfde vormtaal als "Laad meer": het is een
   gelijkwaardige actie, geen tweederangsknop. Het ontwerp kent deze staat niet —
   in Figma staat alleen "Laad meer" (node 2196:1340) — dus dit is een vertaling.
   Ze staan naast elkaar met 24px ertussen; onder elkaar zou de rij twee keer zo
   hoog worden en de afstand tot de footer scheeftrekken. */
.sellabees-loadmore__btn,
.sellabees-loadmore__less {
	display: inline-block;
	margin-top: 6px;
	border: 0;
	background: none;
	padding: 0;
	font-family: var(--hinke-font-body);
	font-weight: 800;
	font-size: 16px;
	line-height: 20px;
	text-transform: uppercase;
	text-decoration: underline;
	color: var(--hinke-body);
	cursor: pointer;
}

.sellabees-loadmore__btn + .sellabees-loadmore__less {
	margin-left: 24px;
}

/* -----------------------------------------------------------------------------
   SEO-tekstblok onder het grid (zelfde stijl als op de homepage, 1320px)
   -------------------------------------------------------------------------- */

.sellabees-shop + .hinke-seo,
.sellabees-shop ~ .hinke-seo {
	padding-top: 64px;
}

/* =============================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1680px) {
	.sellabees-shop__body {
		grid-template-columns: 208px minmax(0, 1fr);
	}
	.woocommerce .sellabees-shop__main ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 18px;
	}
}

@media (max-width: 1200px) {
	.woocommerce .sellabees-shop__main ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	/* De badge hoeft hier niet meer bijgesteld te worden: de procentuele
	   margin-top rekent tegen de kolombreedte en schaalt dus met het beeld mee. */
}

/* -----------------------------------------------------------------------------
   TOUCH / MOBIEL — vanaf hier is er GEEN ontwerp meer

   In Figma bestaat alleen de desktopversie: het frame "Categoriepagina"
   (2196:343) is 1920×4420 en er staat geen mobiele variant naast. Alles onder
   deze breakpoint is dus een vertaling, geen overname. De regels die ik daarbij
   heb aangehouden — en die per blok in het commentaar terugkomen:

     1. Vorm, kleur en typografie van het ontwerp blijven; alleen de MAAT van
        aanraakdoelen gaat omhoog naar 44×44 (WCAG 2.5.5/2.5.8). Een blokje van
        27×27 is een muisdoel, geen vingerdoel.
     2. Tekstinvoer minimaal 16px, anders zoomt iOS Safari bij focus in en staat
        de bezoeker daarna scheef op de pagina.
     3. De sidebar staat op desktop naast het raster. Hem op mobiel gewoon
        boven het raster laten uitklappen betekent ±700px filters vóór het
        eerste product; daarom wordt hij een uitschuifpaneel over de pagina.
   -------------------------------------------------------------------------- */

/*
 * De onderdelen van het uitschuifpaneel horen op een breed scherm NIET te bestaan.
 *
 * hinke-shop.js maakt de verdonkering, het kruisje en de knop "Resultaten
 * bekijken" bij het laden aan — één keer, ongeacht de vensterbreedte, zodat een
 * bezoeker die zijn venster smaller maakt geen kapot paneel krijgt. Ze werden
 * echter alleen ÍN de media-query hieronder opgemaakt, en daarbuiten stond er
 * niets: het kruisje viel daardoor op desktop als gewone knop in de kolom, bóven
 * de kop "Filter", en de knop "Resultaten bekijken" onder de filters.
 *
 * Dus standaard weg, en de media-query hieronder zet ze aan waar het paneel echt
 * bestaat. Weghalen uit de DOM zou ook kunnen, maar dan moet JS bij elke
 * vensterwijziging opnieuw aan het werk; dit is één regel en werkt ook als er
 * geen JS meer draait.
 */
.hinke-drawer-backdrop,
.hinke-drawer__bar,
.hinke-drawer__close,
.hinke-drawer__done {
	display: none;
}

@media (max-width: 900px) {

	/* --- De knop "Filteren" (markup uit de core: inc/shop-grid.php) ---------
	   Was 40px hoog (10px padding + 20px regel); 44px is het minimum voor een
	   vinger. Blijft links uitgelijnd onder de kopbalk, waar hij in de
	   leesrichting vóór het raster staat. */
	.sellabees-filter-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		box-sizing: border-box;
		margin: 24px 0 0;
		min-height: 44px;
		padding: 0 18px;
		border: 1px solid var(--hinke-pink);
		background: none;
		font-family: var(--hinke-font-body);
		font-weight: 700;
		font-size: 14px;
		line-height: 20px;
		text-transform: uppercase;
		color: var(--hinke-body);
		cursor: pointer;
	}

	/* Actief filter zichtbaar maken op de knop zelf: zonder open paneel is dat
	   het enige plekje waar je het kunt zien. hinke-shop.js zet het aantal in
	   data-count en de class erbij. */
	.sellabees-filter-toggle[data-count]::after {
		content: attr(data-count);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		box-sizing: border-box;
		border-radius: 100px;
		background: var(--hinke-sale);
		color: var(--hinke-white);
		font-size: 12px;
		line-height: 20px;
	}

	.sellabees-shop__body {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
		margin-top: 24px;
	}

	/*
	 * De knop loopt over de volle breedte van de contentband.
	 *
	 * Hij stond op `inline-flex` en werd daarmee 129px breed — een klein knopje
	 * linksboven het raster, terwijl het de enige ingang naar de filters is op een
	 * telefoon. Over de volle breedte is hij niet te missen en is het hele vlak
	 * aantikbaar in plaats van alleen die 129px.
	 *
	 * De knop staat als los kind van .sellabees-shop buiten de contentband, dus
	 * krijgt hij die band hier zelf: `100%` rekent tegen .sellabees-shop (volle
	 * breedte), net als in --hinke-shop-band, dus dit is exact dezelfde plaatsing
	 * als .sellabees-shop__body eronder. `flex` i.p.v. `inline-flex`, anders krimpt
	 * hij terug naar zijn inhoud.
	 */
	.sellabees-filter-toggle {
		display: flex;
		width: var(--hinke-shop-band);
		margin-left: auto;
		margin-right: auto;
	}

	/* --- Sidebar → uitschuifpaneel -----------------------------------------
	   `position: fixed` t.o.v. het venster; er staat geen transform/filter op
	   een voorouder van .sellabees-shop, dus het paneel valt echt over de
	   pagina. z-index 951: boven de header (900, layout.css) en onder de
	   core-lagen (popup 1000, wishlist-modal 1001).

	   NIET `display: none` in de dichte staat maar `visibility: hidden`:
	   dan blijft het paneel meetbaar/animeerbaar, en visibility haalt het
	   net zo goed uit de tab-orde en uit de schermlezer.

	   `html.hinke-js`: het paneel is alleen te openen met JavaScript (de knop
	   "Filteren" wordt door hinke-shop.js bestuurd). Zonder JS blijft dit dus
	   een gewone sidebar bóven het raster — onhandig, maar wél te gebruiken.
	   Die class komt uit inc/shop.php en staat in de <head>, zodat de opmaak
	   niet eerst openstaat en daarna wegklapt.

	   De sluitknop en de knop "Resultaten bekijken" komen uit hinke-shop.js;
	   de core rendert ze niet. */
	html.hinke-js .sellabees-shop__sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 951;
		/* Kolom, zodat "Resultaten bekijken" met `margin-top: auto` onderaan het
		   paneel staat als de filterlijst korter is dan het venster (anders bleef
		   die knop halverwege hangen met een groot wit vlak eronder). Is de lijst
		   langer, dan wordt auto 0 en neemt `position: sticky` het over. */
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: min(90%, 380px);
		max-width: 100%;
		padding: 0 16px 16px;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		background: var(--hinke-white);
		box-shadow: 0 0 40px rgba(0, 0, 0, .25);
		transform: translateX(-100%);
		visibility: hidden;
	}

	html.hinke-js .sellabees-shop__sidebar.is-open {
		transform: none;
		visibility: visible;
	}

	/* Flexitems krimpen standaard. Zonder dit zou de filterlijst platgedrukt
	   worden om in het paneel te passen en zou de INHOUD uit de lijst lopen in
	   plaats van dat het paneel gaat scrollen. */
	html.hinke-js .sellabees-shop__sidebar > * {
		flex: 0 0 auto;
	}

	/* Zonder JS staat de knop "Filteren" er wel (die komt uit de core-markup)
	   maar doet hij niets — dan is hij misleidend. */
	html:not(.hinke-js) .sellabees-filter-toggle {
		display: none;
	}

	@media (prefers-reduced-motion: no-preference) {
		/* Uitschuiven i.p.v. verspringen. visibility is een discrete
		   eigenschap: met een duur zou hij pas halverwege omslaan, dus
		   0s — bij sluiten mét vertraging, zodat je de beweging nog ziet. */
		html.hinke-js .sellabees-shop__sidebar {
			transition: transform .25s ease, visibility 0s linear .25s;
		}
		html.hinke-js .sellabees-shop__sidebar.is-open {
			transition: transform .25s ease, visibility 0s;
		}
	}

	/* Verdonkering achter het paneel (element uit hinke-shop.js). `display` moet
	   hier expliciet terug, want de basisregel boven deze media-query zet alle
	   paneel-onderdelen op `none`. */
	.hinke-drawer-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 950;
		background: rgba(0, 0, 0, .45);
	}

	/* Sluitrij: blijft bovenaan staan terwijl de filters eronder scrollen. */
	.hinke-drawer__bar {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		justify-content: flex-end;
		margin: 0 -16px;
		padding: 4px 4px 0;
		background: var(--hinke-white);
	}

	.hinke-drawer__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--hinke-body);
		cursor: pointer;
	}

	/* Bij het openen krijgt deze knop de focus (zodat toetsenbord en schermlezer
	   in het paneel staan). De standaardring van de browser is een hard zwart
	   kader; deze past bij de rest van het thema. */
	.hinke-drawer__close:focus-visible {
		outline: 2px solid var(--hinke-body);
		outline-offset: -4px;
	}

	/* "Resultaten bekijken (12)" — sluit het paneel. Filteren gebeurt al direct
	   via AJAX, dus dit is geen verzendknop maar de weg terug naar het raster;
	   zonder zo'n knop moet je op mobiel eerst omhoog scrollen naar het kruisje. */
	.hinke-drawer__done {
		position: sticky;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		min-height: 48px;
		/* auto = onderaan bij een korte lijst; de tussenruimte bij een lange
		   lijst komt van de marge onder .sellabees-filter hieronder. */
		margin-top: auto;
		padding: 0 16px;
		border: 0;
		background: var(--hinke-body);
		font-family: var(--hinke-font-body);
		font-weight: 700;
		font-size: 15px;
		text-transform: uppercase;
		color: var(--hinke-white);
		cursor: pointer;
	}

	/* De sidebar-inhoud vulde 208px; in het paneel mag hij de breedte hebben.
	   De marge onderaan is de tussenruimte naar "Resultaten bekijken" wanneer de
	   lijst zo lang is dat `margin-top: auto` daar 0 wordt. */
	.sellabees-filter,
	.sellabees-price {
		width: auto;
	}

	.sellabees-filter {
		margin-bottom: 24px;
	}

	/* Groepen dichter op elkaar: 40 + 29 = 69px tussenruimte is op een scrollend
	   paneel alleen maar extra veegwerk. */
	.sellabees-filter__group,
	.sellabees-filter__group--kleur {
		padding-bottom: 22px;
		margin-bottom: 20px;
	}

	/* --- Raster ------------------------------------------------------------
	   Zonder sidebar is de hele band beschikbaar. Op 768px gaf 2 kolommen
	   kaarten van 351px — anderhalf keer de 314px uit het ontwerp, met beelden
	   van bijna 600px hoog. 3 kolommen komt op ±228px en dus veel dichter bij
	   de bedoelde kaart. Onder 620px (2 kolommen) staat verderop. */
	.woocommerce .sellabees-shop__main ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* --- Kopbalk ----------------------------------------------------------- */
	.sellabees-shop__head {
		height: 110px;
	}

	.sellabees-shop__title {
		font-size: clamp(26px, 4vw, 40px);
	}

	/* Sale-kopbalk: op desktop overlappen label en kop elkaar precies zoals in
	   het ontwerp (vaste bovenmarge van 32,5px + een negatieve marge op de kop).
	   Die maatvoering hoort bij een kop van 40px; met de clamp hierboven is die
	   op 390px 26px, en dan staat dezelfde tekst met een regelvak van 52px veel
	   te laag in het vlak (32,5 boven, 8,5 onder). Op mobiel dus geen
	   overlaptruc maar de twee regels netjes gecentreerd. */
	.hinke-sale__head {
		justify-content: center;
		padding-top: 0;
		gap: 2px;
	}

	.hinke-sale__title {
		margin-top: 0;
		line-height: 1.15;
	}

	.sellabees-loadmore {
		margin-top: 40px;
	}

	/* Dezelfde verhouding als de 61 → 40 hierboven: op een telefoon is 85px onder
	   het raster onnodig veel leegte voordat de footer begint. */
	.sellabees-shop {
		padding-bottom: 56px;
	}
}

/* =============================================================================
   AANRAAKDOELEN — 44×44 (WCAG 2.5.5)

   Deze maten zitten NIET in de breedte-breakpoint hierboven maar in een eigen
   query: `(pointer: coarse)` erbij.

   WAAROM: een iPad in liggende stand is 1024 CSS-px breed. Die valt dus boven de
   900px-grens en houdt de bureaubladindeling (sidebar naast het raster) — dat is
   ook goed, daar is ruimte voor. Maar het is wél een vinger: maatblokjes van
   27×27, een sorteervak van 25px hoog en prijsvelden van 14px zijn daar precies
   even onhandig als op een telefoon. `pointer: coarse` beschrijft het PRIMAIRE
   aanwijsmiddel, dus een laptop met touchscreen én trackpad blijft `fine` en
   houdt het ontwerp 1:1.

   Alles hieronder past nog steeds in de sidebar van 208px: 4 blokjes van 44 + 3
   × 4px = 188, 4 stalen van 44 + 3 × 6px = 194, twee prijsvelden van 98 met 12px
   ertussen = 208.
   ========================================================================== */

@media (max-width: 900px), (pointer: coarse) {

	/* De maatblokjes (27×27) en kleurstalen (27×27) zijn muisdoelen. Ze worden
	   44×44: zelfde vorm, zelfde kleur, zelfde raster (blokjes met 4px ertussen,
	   stalen met 6/8px) — alleen finger-sized. Het alternatief, een onzichtbaar
	   groter klikvlak om een blokje van 27px, laat de vlakken van buren over
	   elkaar heen lopen en dan tik je stelselmatig de verkeerde aan. */
	.sellabees-filter__list--maat .sellabees-filter__check {
		min-width: 44px;
		height: 44px;
		padding: 0 8px;
		font-size: 14px;
	}

	.sellabees-filter__list--kleur .sellabees-filter__check {
		min-height: 44px;
	}

	.sellabees-filter__list--kleur .sellabees-filter__swatch {
		width: 44px;
		height: 44px;
	}

	/* Categorieën (Sale): regel van 35px → 44px, tekst verticaal gecentreerd.
	   De regel is zo breed als de sidebar, dus het doel is ruim. */
	.sellabees-filter__list--categorie .sellabees-filter__check {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding-bottom: 0;
		font-size: 16px;
	}

	.sellabees-filter__list--product_cat .sellabees-filter__check {
		min-height: 44px;
	}

	/* "+ meer" / "− minder" en "Wissen": tekstlinks, maar wel aantikbaar.
	   min-width erbij omdat "+ meer" op 14px maar 43,4px breed is — net onder de
	   44px. De tekst blijft links staan (justify-content is standaard
	   flex-start), dus het doel groeit alleen naar rechts. */
	.sellabees-filter__more,
	.sellabees-filter__reset {
		display: inline-flex;
		align-items: center;
		min-width: 44px;
		min-height: 44px;
		margin-top: 0;
	}

	/* Prijs: 16px is de ondergrens: bij minder zoomt iOS Safari bij focus in op
	   het veld en blijft de pagina daarna verschoven staan. Een veld van 80px is
	   dan te smal voor "1250", dus ze verdelen samen de breedte.
	   De grepen gaan van 35 naar 44; de baan-inspringing en de vulling rekenen
	   mee via --hinke-price-thumb. */
	.sellabees-price {
		--hinke-price-thumb: 44px;
	}

	.sellabees-price__labels {
		gap: 12px;
	}

	.sellabees-price__lmin,
	.sellabees-price__lmax {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		height: 44px;
		font-size: 16px;
		line-height: 42px;
	}

	/* Het sorteervak was 178×25 met 12px letters: te klein om te raken en klein
	   genoeg om iOS bij focus te laten inzoomen (dat geldt ook voor <select>).

	   34px, niet de 44 die hier eerst stond. Die 44 hing aan WCAG 2.5.8, maar dat
	   criterium (Target Size Minimum, AA) vraagt 24×24px; 44×44 is 2.5.5 op
	   niveau AAA. Er is dus ruimte tussen 24 en 44, en 44 maakte het vak een blok
	   dat zwaarder woog dan de producten eronder.

	   34 is niet willekeurig: het ontwerp zet 25px vakhoogte op 12px letters, een
	   verhouding van 2,08. Diezelfde verhouding op de 16px van mobiel geeft 33,3
	   → 34. Het vak houdt dus de vorm van het ontwerp, en zit met 10px ruimte
	   ruim boven de 24px van AA.

	   De letter blijft 16px: dát is wat iOS ervan weerhoudt om bij focus in te
	   zoomen, en dat hangt aan de lettergrootte, niet aan de hoogte. */
	.sellabees-shop__bar .woocommerce-ordering select,
	.sellabees-shop__bar select.orderby {
		height: 34px;
		padding: 0 34px 0 14px;
		background-position: right 14px center;
		background-size: 10px 10px;
		font-size: 16px;
		line-height: 34px;
	}

	/* Hartje: 27×23 is te klein om te raken. Het icoon houdt zijn maat, de knop
	   eromheen wordt 44×44. Daardoor komt het hartje 4px verder van de rand dan
	   de 10/9 uit het ontwerp — die 4px is de prijs voor een doel dat wél binnen
	   de kaart blijft (verder naar buiten zou over de buurkaart in de
	   kolomruimte heen liggen). */
	.sellabees-shop__main li.product .sellabees-wish-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		top: 4px;
		right: 4px;
		width: 44px;
		height: 44px;
	}

	/* "Laad meer" was een tekstlink van 91×20. Blijft een onderstreepte link
	   (dat is het ontwerp), maar met 44px aanraakhoogte eromheen. "Laad minder"
	   loopt mee: die staat er zodra je een keer hebt bijgeladen en is dan net zo
	   vaak een vingerdoel. */
	.sellabees-loadmore__btn,
	.sellabees-loadmore__less {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 0 16px;
	}

	/* De padding hierboven geeft al ruimte tussen de twee; de extra 24px van
	   desktop zou ze op een smal scherm uit elkaar trekken tot over twee regels. */
	.sellabees-loadmore__btn + .sellabees-loadmore__less {
		margin-left: 0;
	}
}

/* Vanaf hier is er geen ruimte meer voor 3 kolommen: bij 620px zou een kaart
   ±190px worden en dat is smaller dan de 2-koloms variant op 414px. */
@media (max-width: 620px) {
	.woocommerce .sellabees-shop__main ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	/* Aantal boven, sorteren eronder over de volle breedte — naast elkaar zou
	   het sorteervak op 360px maar ±150px overhouden. `align-items: stretch`
	   moet erbij: de basisregel zet flex-start, en dan blijft het formulier
	   op zijn eigen breedte staan. */
	.sellabees-shop__bar {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	/* Het sorteervak stond op 100%: op 390px een grijs blok van 342×44 dat meer
	   gewicht in de pagina heeft dan de producten eronder, met het pijltje 34px
	   van de rechterrand en dus centimeters van zijn label. Het krimpt naar zijn
	   inhoud — met de korte labels uit inc/shop.php ±166px. Een <select> rekent
	   `auto` uit over de BREEDSTE optie, niet de gekozen optie, dus het vak
	   verspringt niet als de bezoeker wat anders kiest; `max-width` vangt af dat
	   een langere vertaling er ooit weer buiten loopt.

	   Links uitgelijnd, niet rechts zoals op desktop: gestapeld en op eigen
	   breedte zou een vak aan de rechterrand een los eiland worden met een gat
	   naast de teller. Tegen de linkerlijn van het raster horen de twee bij
	   elkaar. `flex-start` is bovendien nodig omdat de balk hier
	   `align-items: stretch` zet — anders rekt het formulier alsnog op.

	   Naast elkaar op één regel past niet: teller (±150px) + vak (161px) + 12px
	   ertussen = 323px, en de kolom is 312px op een 360-scherm. Bij een grotere
	   catalogus ("12 van 505 producten") loopt het ook op 375px klem.

	   Hoogte (34px) en letter (16px) komen uit de regel hierboven; hier gaat het
	   alleen over de breedte. */
	.woocommerce .sellabees-shop__bar .woocommerce-ordering {
		align-self: flex-start;
		width: auto;
	}

	.sellabees-shop__bar .woocommerce-ordering select,
	.sellabees-shop__bar select.orderby {
		width: auto;
		max-width: 100%;
	}

	/* De SALE-badge van 91×44 vult op een kaart van 148px (2 kolommen op 360px)
	   ruim 60% van de breedte. Hij krimpt mee naar 72×34; de plaatsing rekent
	   via --hinke-salebadge-h automatisch mee en blijft 28px boven de onderrand
	   van het beeld. */
	.woocommerce .sellabees-shop__main ul.products li.product .onsale.hinke-sale-badge {
		--hinke-salebadge-h: 34px;
		width: 72px;
		font-size: 13px;
	}
}