/* =========================================================
   Brock Biljartfabriek — structurele basis + header/footer componenten.
   Presentatie/CSS van het child-thema. De huisstijl-tokens (kleuren,
   typografie) staan in :root hieronder; main.css vult de fonts aan.
   ========================================================= */

:root {
	--sellabees-red: #dd2532;
	--sellabees-red-dark: #c01f2b;
	--sellabees-black: #231f20;
	--sellabees-ink: #000000;
	--sellabees-white: #ffffff;
	--sellabees-search-bg: #ebebeb;
	--sellabees-placeholder: #a19ea1;
	--sellabees-yellow: #f8c100;
	--sellabees-text: #231f20;
	--sellabees-muted: #6b6b6b;
	--sellabees-border: #e3e3e3;

	/* De ECHTE huisstijl-fonts staan vóóraan (Impact / Avenir LT Pro, @font-face
	   in main.css). Eerder stond hier "Oswald"/"Montserrat" als eerste keuze →
	   die zijn niet geladen, dus de body viel terug op een systeem-sans i.p.v.
	   Avenir. Nu rendert overal het juiste merklettertype, onafhankelijk van de
	   enqueue-volgorde t.o.v. main.css. */
	--sellabees-font-heading: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
	--sellabees-font-body: "Avenir LT Pro", "Avenir", "Segoe UI", system-ui, sans-serif;

	--sellabees-container-max: 1458px;
	--sellabees-gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--sellabees-font-body);
	color: var(--sellabees-text);
	background: var(--sellabees-white);
	line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* =========================================================
   Vloeiende knop-hover (verzoek: kleur niet "direct" omslaan).
   Eén transition op de kleur-eigenschappen voor alle interactieve
   merk-knoppen (rode knoppen, nav-highlight, cart-knoppen, subcats,
   socials, qty-stepper, slider-pijlen, filter-submit, melding-knoppen).
   Géén `transition: all` → alleen kleur/achtergrond animeren, layout blijft snel.
   ========================================================= */
.sellabees-nav__highlight,
.sellabees-nav__menu > li > a,
.sellabees-nav__menu .sub-menu a,
.sellabees-card__cart,
.sellabees-card .added_to_cart.wc-forward,
.sellabees-shop__subcat,
.sellabees-social--badge,
.sellabees-social--img,
.sellabees-slider-nav__btn,
.sellabees-catnav__btn,
.sellabees-filter__submit,
.sellabees-filter-toggle,
.woocommerce .woocommerce-message .button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input.button[type="submit"] {
	transition: background-color .25s ease, color .25s ease, opacity .25s ease, box-shadow .25s ease;
}

.sellabees-container {
	width: 100%;
	max-width: var(--sellabees-container-max);
	margin-inline: auto;
	padding-inline: var(--sellabees-gutter);
}
/* Mobiel: smallere zijmarge zodat de content breder is (verzoek klant — de
   oude 12,5%/49px-gutter was te ruim). Richt op ~20px op 393px (≈5vw), met een
   ondergrens van 14px op de kleinste telefoons en een bovengrens van 22px op
   bredere staande tablets — houdt links/rechts gelijke ademruimte zonder
   edge-to-edge te gaan. Desktop (1458-container, 24px) blijft ongemoeid. */
/* Vang elke restant-horizontale-overflow (stray 4–8px e.d.) op ÉLKE breedte op, op de
   scroll-root (html). `overflow-x: hidden` op de ROOT propageert naar de viewport →
   geen horizontale scroll/witte rand, óók met desktop-scrollbar (clip propageerde daar
   níet). Op de root is dit sticky-veilig: de sticky header (position:sticky, top:0)
   pint t.o.v. de viewport, niet t.o.v. een aparte scroll-container — anders dan hidden
   op `body`/een wrapper (dáár brak het de sticky; stond eerder op `body` én alléén
   ≤981px, waardoor mobiel niet pinde terwijl desktop wél). Interne scroll-sliders
   (overflow-x:auto) blijven werken. */
html { overflow-x: hidden; }

@media (max-width: 981px) {
	.sellabees-container { padding-inline: clamp(14px, 5vw, 22px); }
}
/* Hele kleine schermen (≤375px, bv. iPhone SE 320): header compacter zodat
   logo + iconen blijven passen (anders overflow). Hogere specificiteit zodat
   dit de ≤900-headerregels (later in dit bestand) verslaat. */
@media (max-width: 375px) {
	.sellabees-header__top-inner .sellabees-header__logo img { height: 44px; }
	.sellabees-header__top-inner .sellabees-header__actions { gap: 15px; margin-left: 8px; }
	.sellabees-header__top-inner .sellabees-header__search { margin-left: auto; }
}

.sellabees-skip-link {
	position: absolute;
	left: -9999px;
}
.sellabees-skip-link:focus {
	left: 16px; top: 16px; z-index: 9999;
	background: #fff; padding: 8px 16px;
}
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px; overflow: hidden;
}



/* =========================================================
   HEADER
   ========================================================= */
/* Header blijft op ALLE schermen bovenaan plakken bij het scrollen
   (voorheen alleen ≤900px). z-index 100 → boven de pagina-inhoud; de
   filter-drawer/backdrop (1000/1001) blijven er nog bovenop. */
.sellabees-header {
	position: sticky;
	top: 0;
	z-index: 100;
}
/* Als het mobiele menu open is, staat de body op overflow:hidden (scroll-lock).
   Dat breekt position:sticky → de header zou (bij een gescrolde pagina) uit beeld
   schieten. Daarom pinnen we 'm dan expliciet met position:fixed bovenaan, zodat de
   header (met het sluit-kruisje) altijd bovenaan blijft staan. */
body.sellabees-menu-open .sellabees-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}
.sellabees-header__top {
	background: var(--sellabees-white);
}
.sellabees-header__top-inner {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 138px;
}
.sellabees-header__logo {
	flex: 0 0 auto;
}
.sellabees-header__logo img {
	height: 92px;
	width: auto;
}
.sellabees-header__search {
	flex: 0 1 652px;
	width: 652px;
	max-width: 652px;
	margin-left: auto;   /* duwt de zoekbalk + iconen naar rechts (gat na het logo, conform design) */
}
.sellabees-search {
	position: relative;
	display: flex;
	align-items: center;
}
.sellabees-search__field {
	width: 100%;
	height: 49px;
	border: 0;
	background: var(--sellabees-search-bg);
	border-radius: 0;
	padding: 0 48px 0 20px;
	font-family: var(--sellabees-font-body);
	font-size: 14px;
	color: var(--sellabees-text);
}
.sellabees-search__field::placeholder { color: var(--sellabees-placeholder); }
.sellabees-search__field:focus { outline: 2px solid var(--sellabees-red); }
.sellabees-search__btn {
	position: absolute;
	right: 16px;
	background: none;
	border: 0;
	color: var(--sellabees-black);
	cursor: pointer;
	display: flex;
}
.sellabees-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: 32px;   /* vaste afstand tussen zoekbalk en iconen (rechtsgroep) */
}
.sellabees-header__action {
	position: relative;
	color: var(--sellabees-black);
	display: flex;
	align-items: center;
}
.sellabees-header__cart-count.is-empty { display: none; }
.sellabees-header__cart-count {
	position: absolute;
	top: -8px; right: -10px;
	min-width: 18px; height: 18px;
	padding: 0 5px;
	background: var(--sellabees-red);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	border-radius: 9px;
}

/* ---- Navigatiebalk ---- */
.sellabees-nav {
	background: var(--sellabees-red);
}
.sellabees-nav__inner {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	min-height: 42px;
}
.sellabees-nav__left,
.sellabees-nav__right {
	display: flex;
	align-items: stretch;
}
.sellabees-nav__highlight {
	display: flex;
	align-items: center;
	background: var(--sellabees-black);
	color: #fff;
	font-family: var(--sellabees-font-nav, var(--sellabees-font-heading));
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: .03em;
	padding: 0 22px;
	margin-right: 8px;
}
.sellabees-nav__highlight:hover { background: #000; }

.sellabees-nav__menu {
	list-style: none;
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 0;
}
.sellabees-nav__menu li { position: relative; display: flex; }
.sellabees-nav__menu > li > a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-family: var(--sellabees-font-nav, var(--sellabees-font-heading));
	font-weight: 700;
	text-transform: uppercase;
	font-size: 15px;
	letter-spacing: .03em;
	padding: 0 16px;
	white-space: nowrap;
}
.sellabees-nav__menu > li.menu-item-has-children > a::after,
.sellabees-nav__menu > li.sellabees-has-children > a::after {
	content: "";
	width: 7px; height: 7px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg) translateY(-2px);
	display: inline-block;
}
.sellabees-nav__menu > li > a:hover { background: var(--sellabees-red-dark); }
/* Laatste item van de rechter-navgroep (Contact) uitlijnen met het cart-icoon
   (rechtsrand). De padding blijft staan zodat het hover-vlak symmetrisch/mooi
   blijft; met een negatieve marge schuift het item naar rechts zodat de TEKST
   netjes met de bovenbalk uitlijnt (i.p.v. padding weghalen, wat het hover-vlak
   tegen de tekst aandrukt). */
.sellabees-nav__right .sellabees-nav__menu > li:last-child > a {
	padding-right: 16px;
	margin-right: -16px;
}
/* De padding-correctie voor de band 982–1100px is vervallen: sinds de mobiele
   grens op 1100px staat (klantwens 2026-07-28) is dat bereik hamburger-gebied en
   staat het desktopmenu daar helemaal niet meer. */
/* Icoontjes in de bovenbalk netjes uitlijnen */
.sellabees-header__action img { display: block; }
.sellabees-search__btn img { display: block; }

/* dropdown submenu's */
.sellabees-nav__menu .sub-menu {
	position: absolute;
	top: 100%; left: 0;
	min-width: 220px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0,0,0,.15);
	list-style: none;
	margin: 0; padding: 8px 0;
	display: none;
	z-index: 50;
}
/* Hover-uitklap alleen op desktop; op mobiel/tablet zou dit op touch "blijven
   plakken" waardoor het submenu niet meer dicht kan (daar stuurt .is-expanded het).
   Grens 1101px = net boven de mobiele menu-grens van 1100px. */
@media (min-width: 1101px) {
	/* DICHT = display:none, dus géén layout-ruimte.
	   Dit stond eerder op display:block met opacity/visibility voor de fade. Nadeel:
	   zo'n verborgen dropdown telt gewoon mee voor de breedte van het document. Het
	   brede merken-menu (832px) stak daardoor rechts buiten het venster en gaf de
	   héle site een horizontale scrollbalk, terwijl er zichtbaar niets uitstak
	   (klantfeedback 2026-07-28).
	   De fade blijft behouden in browsers die discrete transities kennen
	   (transition-behavior + @starting-style); elders verschijnt het menu direct. */
	.sellabees-nav__menu .sub-menu {
		display: none;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity .22s ease, transform .22s ease, display .22s allow-discrete;
	}
	.sellabees-nav__menu > li:hover > .sub-menu,
	.sellabees-nav__menu > li:focus-within > .sub-menu,
	.sellabees-nav__menu .sub-menu li:hover > .sub-menu,
	.sellabees-nav__menu .sub-menu li:focus-within > .sub-menu {
		display: block;
		opacity: 1;
		transform: translateY(0);
	}
	/* Beginwaarde voor het infaden; zonder deze regel springt een element dat van
	   display:none komt meteen op opacity:1. */
	@starting-style {
		.sellabees-nav__menu > li:hover > .sub-menu,
		.sellabees-nav__menu > li:focus-within > .sub-menu,
		.sellabees-nav__menu .sub-menu li:hover > .sub-menu,
		.sellabees-nav__menu .sub-menu li:focus-within > .sub-menu {
			opacity: 0;
			transform: translateY(-8px);
		}
	}
	/* Vangnet: ook zónder de JS-plaatsing nooit breder dan het venster. */
	.sellabees-nav__menu .sub-menu {
		max-width: calc(100vw - 16px);
	}
	@media (prefers-reduced-motion: reduce) {
		.sellabees-nav__menu .sub-menu { transition: none; }
	}
	/* Multi-level flyout: een submenu van een submenu-item verschijnt RECHTS ernaast
	   (niet eronder) en klapt uit op hover van dat submenu-item. */
	.sellabees-nav__menu .sub-menu .sub-menu {
		top: -8px;
		left: 100%;
	}
	/* Rechts-chevron op submenu-items die zelf een submenu hebben. */
	.sellabees-nav__menu .sub-menu li.menu-item-has-children > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}
	.sellabees-nav__menu .sub-menu li.menu-item-has-children > a::after {
		content: "";
		width: 6px; height: 6px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(-45deg);
		flex: 0 0 auto;
	}
	/* MEGA-uitklap: lange lijsten (bv. alle merken) verdelen we over meerdere
	   kolommen zodat de dropdown niet onderaan het scherm afloopt (klantfeedback).
	   Vaste breedte = 4 kolommen; hoogte begrensd op de viewport met interne scroll
	   als het tóch niet past. JS (initMegaMenu) schuift 'm zonodig links bij zodat
	   hij nooit buiten beeld valt. Leesvolgorde loopt per rij (links → rechts). */
	/* LET OP: hier géén `display` zetten. Dicht moet display:none blijven (anders
	   telt de dropdown weer mee voor de paginabreedte); de flex-weergave staat
	   daarom in de hover/focus-regel hieronder. */
	.sellabees-nav__menu > li.sellabees-menu--mega > .sub-menu {
		flex-wrap: wrap;
		align-content: flex-start;
		width: min(832px, calc(100vw - 24px));
		max-height: 82vh;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 8px;
	}
	.sellabees-nav__menu > li.sellabees-menu--mega:hover > .sub-menu,
	.sellabees-nav__menu > li.sellabees-menu--mega:focus-within > .sub-menu {
		display: flex;
	}
	.sellabees-nav__menu > li.sellabees-menu--mega > .sub-menu > li {
		width: 25%;
		flex: 0 0 auto;
	}
	.sellabees-nav__menu > li.sellabees-menu--mega > .sub-menu > li > a {
		padding: 7px 14px;
		border-radius: 4px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
.sellabees-nav__menu .sub-menu li { display: block; }
.sellabees-nav__menu .sub-menu a {
	display: block;
	color: var(--sellabees-text);
	/* Submenu blijft in het BODY-font (klantwens 2026-08-14: "Oswald mag niet in het
	   submenu voorkomen, dat moet weer terug naar de oude"). Alleen de balk erboven
	   is Oswald; hier dus expliciet niet het nav-token gebruiken. */
	font-family: var(--sellabees-font-body);
	text-transform: none;
	font-size: 14px;
	padding: 8px 18px;
}
.sellabees-nav__menu .sub-menu a:hover { background: var(--sellabees-search-bg); }

/* mobiele toggle (verborgen op desktop) */
.sellabees-nav__toggle { display: none; }
/* mobiele submenu-chevron-knop (alleen in het open mobiele menu; nooit op desktop) */
.sellabees-nav__chevron { display: none; }
/* zoek-sluitknop: alleen zichtbaar tijdens mobiel zoeken (zie .search-open) */
.sellabees-search-close { display: none; }
/* categorie-slider-pijlen + dots (alleen mobiel; verborgen op desktop) */
.sellabees-catnav, .sellabees-catnav__dots { display: none; }

/* =========================================================
   Uniforme MOBIELE slider-pijlen + dots — overal identiek (Nieuw binnen,
   Meest verkochte, gerelateerde producten, populaire categorieën): rode
   vierkante knoppen die de kaart/tegel links & rechts flankeren.
   ========================================================= */
@media (max-width: 981px) {
	.sellabees-shop__content,
	.sellabees-catslider { position: relative; }
	.sellabees-slider-nav,
	.sellabees-catnav {
		display: flex;
		justify-content: space-between;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		margin: 0; gap: 0;
		pointer-events: none;
		z-index: 6;
	}
	/* Product-sliders: pijlen aan de BUITENkant (klantwens) — in de zijgutter op de
	   schermrand i.p.v. ingesprongen op de kaartrand (waar ze ~de halve kaart
	   overlapten). left/right:0 = de border-box-rand van .sellabees-shop__content (de
	   schermrand binnen de gutter); space-between duwt de knoppen daar helemaal naar
	   buiten. Een minimale overlap met de kaart blijft (gutter < knopbreedte), maar het
	   zwaartepunt zit nu in de marge. */
	.sellabees-slider-nav { left: 0; right: 0; padding: 0; }
	/* Categorie-slider: pijlen op de slider-randen, BINNEN beeld. Stond op
	   left/right:-26px → 26px buiten de catslider (de gutter is maar 14–22px) → de
	   knoppen staken de viewport uit en veroorzaakten een horizontale overflow (de
	   witte lijn rechts). left/right:0 houdt ze op de tegelrand, binnen het scherm. */
	.sellabees-catnav { left: 0; right: 0; padding: 0; }
	.sellabees-catnav__dots { display: flex; justify-content: center; gap: 9px; margin-top: 20px; }

	/* Nieuw binnen / Meest verkochte: RODE vierkante knop + witte pijl (Figma). */
	.sellabees-shop__content .sellabees-slider-nav__btn {
		pointer-events: auto;
		width: 39px; height: 39px;
		flex: 0 0 auto;
		display: inline-flex; align-items: center; justify-content: center;
		background: var(--sellabees-red); color: #fff;
		border: 0; border-radius: 0; padding: 0; cursor: pointer;
	}
	.sellabees-shop__content .sellabees-slider-nav__btn:hover,
	.sellabees-shop__content .sellabees-slider-nav__btn:active { background: var(--sellabees-red-dark); }
	.sellabees-shop__content .sellabees-slider-nav__btn svg { width: 18px; height: 18px; }

	/* Populaire categorieën: dunne donkere chevron (géén rood blok), naast de tegel. */
	.sellabees-catslider .sellabees-catnav__btn {
		pointer-events: auto;
		width: 26px; height: 46px;
		flex: 0 0 auto;
		display: inline-flex; align-items: center; justify-content: center;
		background: none; color: var(--sellabees-black);
		border: 0; border-radius: 0; padding: 0; cursor: pointer;
		box-shadow: none;
	}
	.sellabees-catslider .sellabees-catnav__btn svg { width: 16px; height: auto; filter: drop-shadow(0 1px 2px rgba(255,255,255,.7)); }
}

/* ≤981 (héél het mobiele bereik waar de zij-pijlen verschijnen — 1 kaart op telefoon
   én 2 kaarten op tablet-portret): de rode pijlknoppen (39px) staan op de schermrand
   (left/right:0 van .sellabees-shop__content). Zonder inset lagen ze ~halve knop ÓVER
   de (buitenste) kaart. Klantwens: kaarten iets smaller zodat de knoppen er VEILIG
   naast vallen i.p.v. erover. De slider-viewport links/rechts insetten met 30px →
   vrije gutter waarin de knop valt (±6–13px lucht tot de kaart, afhankelijk van de
   container-gutter clamp(14,5vw,22)). De slider-JS leest de kaartbreedte live
   (step = kaartbreedte + gap), dus het schuiven blijft exact kloppen — bij 1 én 2
   kaarten per view. */
@media (max-width: 981px) {
	.sellabees-shop__content .sellabees-slider__viewport { margin-inline: 30px; }
	/* Populaire categorieën: zelfde principe. De pijlen (.sellabees-catnav) hangen op
	   left/right:0 van de wrap (.sellabees-catslider); de scroll-rij (.grid) zelf
	   insetten met 34px zodat de dunne chevrons náást de tegel vallen i.p.v. erover.
	   34 (i.p.v. 30) want de chevron zit hier op de container-CONTENTrand — er is geen
	   extra container-gutter onder de knop zoals bij de rode product-knoppen, dus iets
	   meer inset voor dezelfde vrije ruimte. clientWidth (margin telt niet mee) blijft
	   intact → step()/perView() in de JS blijven kloppen. */
	.sellabees-catslider .sellabees-categories__grid { margin-inline: 34px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
/* USP-marquee (mobiel/liggende tablet): 2 identieke sets, −50% = exact één set →
   naadloze, GPU-soepele lus. Aangedreven door initUspMarquee in theme.js. */
@keyframes sellabees-usp-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.sellabees-footer__usps {
	background: var(--sellabees-ink);
	color: #fff;
}
.sellabees-footer__usps-inner {
	display: flex;
	align-items: center;
	gap: 48px;               /* duidelijke ruimte tussen de USP-rij en de reviews-badge */
	padding-block: 22px;
	flex-wrap: nowrap;
}
.sellabees-usps {
	list-style: none;
	display: flex;
	gap: 18px;               /* minimum-tussenruimte; space-between verdeelt de rest gelijk */
	justify-content: space-between;
	margin: 0; padding: 0;
	flex: 1 1 auto;          /* neemt de ruimte naast de reviews-badge */
	flex-wrap: nowrap;
	min-width: 0;
}
.sellabees-usp {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 1 auto;          /* breedte = inhoud (geen lege ruimte rechts van korte USP's); mag krimpen */
	min-width: 0;
}
.sellabees-usp__icon {
	width: 40px; height: 40px;
	flex: 0 0 40px;
	object-fit: contain;
}
.sellabees-usp__body { display: flex; flex-direction: column; min-width: 0; }
.sellabees-usp__title {
	font-family: var(--sellabees-font-heading);
	font-size: 20px;          /* Figma I482:5254;268:713 (Impact 20px wit) */
	line-height: 1.1;
	/* mag wrappen wanneer de USP krap wordt (geen nowrap → anders overflow) */
}
.sellabees-usp__text {
	font-size: 14px;          /* Figma I482:5254;353:4 (Avenir 55 Roman 14px) */
	color: #d6d6d6;
	line-height: 1.3;
	/* korte subteksten passen op 1 regel (incl. '...sinds 1983.');
	   echt lange (bv. 'Gemaakt en gereviseerd...') wrappen netjes naar 2 regels */
}
/* 4-op-een-rij (≥1201px): begrens de body-breedte zodat lange teksten op 2 regels
   wrappen i.p.v. de USP's smal te knijpen (zo blijven de korte titels op 1 regel). */
@media (min-width: 1201px) {
	.sellabees-footer__usps .sellabees-usp__body { max-width: 220px; }
}

/* ---- Reviews-badge (core-component, hier gestyled) ---- */
.sellabees-reviews {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex: 0 0 auto;          /* houdt z'n eigen breedte; USP's krimpen i.p.v. de reviews weg te duwen */
	white-space: nowrap;
	color: inherit;
	text-decoration: none;
}
.sellabees-footer__usps .sellabees-reviews { max-width: 340px; }
.sellabees-footer__usps .sellabees-reviews__logo,
.sellabees-reviews__logo { height: 26px !important; width: auto !important; max-width: 110px; flex: 0 0 auto; }
.sellabees-reviews__rating { font-weight: 800; font-size: 14px; }
.sellabees-reviews__stars { color: var(--sellabees-yellow); letter-spacing: 2px; }
.sellabees-reviews__count { font-size: 14px; }

.sellabees-footer__main {
	background: var(--sellabees-red);
	color: #fff;
}
.sellabees-footer__grid {
	display: grid;
	/* Kolombreedtes conform de design-posities (x: 257/577/919/1158/1457 in 1920) */
	grid-template-columns: 320fr 342fr 239fr 299fr 210fr;
	column-gap: 0;
	padding-block: 48px 36px;
}
.sellabees-footer__heading {
	font-family: var(--sellabees-font-heading);
	text-transform: uppercase;
	font-size: 24px;
	font-weight: 400;
	margin: 0 0 16px;
}
.sellabees-footer__contact-item {
	display: flex;
	gap: 10px;
	margin: 0 0 11px;
	font-size: 16px;
	align-items: flex-start;
}
.sellabees-footer__ico { flex: 0 0 auto; color: #fff; margin-top: 2px; }
.sellabees-footer__logo { margin-top: 18px; width: 132px; height: auto; }
/* zwart logo op rode achtergrond zichtbaar houden */
.sellabees-footer__contact .sellabees-footer__logo { filter: none; }

.sellabees-hours { width: auto; border-collapse: collapse; }
.sellabees-hours th,
.sellabees-hours td {
	text-align: left;
	font-weight: 500;
	font-size: 16px;
	padding: 0;
	line-height: 29px;
	white-space: nowrap;
}
.sellabees-hours th { width: 108px; padding-right: 8px; }

.sellabees-footer__links { list-style: none; margin: 0; padding: 0; }
.sellabees-footer__links li { line-height: 29px; }
.sellabees-footer__links a { font-size: 16px; }
.sellabees-footer__links a:hover { text-decoration: underline; }

.sellabees-socials {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 20px 0 0;
	padding: 0;
}
/* Merk-icoon (SVG bevat eigen styling, bv. Facebook gevuld / Instagram omlijnd) */
.sellabees-social--img {
	display: flex;
	align-items: center;
}
.sellabees-social--img img { width: 34px; height: 34px; display: block; }
.sellabees-social--img:hover { opacity: .85; }
/* Fallback-badge voor overige netwerken */
.sellabees-social--badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--sellabees-yellow);
	color: var(--sellabees-red);
}
.sellabees-social--badge:hover { background: #fff; }

.sellabees-footer__bottom { background: #fff; color: var(--sellabees-ink); }
.sellabees-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 14px;
	flex-wrap: wrap;
}
.sellabees-footer__copyright { margin: 0; font-size: 14px; }
.sellabees-payments { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; align-items: center; }
.sellabees-payments li { display: flex; align-items: center; }
.sellabees-payments img { height: 30px; width: auto; max-width: 110px; object-fit: contain; display: block; }
/* Gateways zonder eigen logo (bv. Bankoverschrijving, Contant) → tekst-badge die de footerkleur volgt. */
.sellabees-payments .sellabees-payment__label { display: inline-block; padding: 5px 10px; border: 1px solid currentColor; border-radius: 6px; font-size: 12px; line-height: 1.2; white-space: nowrap; opacity: .8; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* ---- Liggende tablet / desktop (vloeiend; mobiel-layout snapt op 981px) ---- */
@media (max-width: 1100px) {
	.sellabees-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
	.sellabees-usps { gap: 24px; }
}

/* Footer-USP-balk op smal-desktop (982–1200px): i.p.v. 4 USP's samen te persen,
   blijft het de slider met 2 per view (auto-rotate via theme.js initAutoUspSlider);
   de reviews-badge blijft rechts staan. Komt ná het ≤1100-blok (overschrijft gap). */
@media (min-width: 982px) and (max-width: 1200px) {
	.sellabees-usps {
		flex: 1 1 auto; min-width: 0;
		flex-wrap: nowrap; gap: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.sellabees-usps::-webkit-scrollbar { display: none; }
	.sellabees-usp {
		flex: 0 0 50%;
		min-width: 0;
		scroll-snap-align: start;
	}
}

/* =========================================================
   HEADER + MENU MOBIEL (≤ 1100px) — mobiel design @393px; staande tablet en
   smal-desktop delen dezelfde mobiele header (hamburger), telefoon-verfijningen
   vanaf 768px. Desktopmenu (≥1101) schaalt vloeiend daarboven.

   Grens was 981px, per klantwens 2026-07-28 naar 1100px: tussen 982 en 1100 zat
   het volledige desktopmenu zó krap dat het laatste item eruit viel (daarvoor
   stond er een aparte padding-correctie in die band, nu overbodig). Overige
   mobiele layouts — footer, paginablokken, sliders — houden hun eigen 981px.
   Moet in sync blijven met `sellabees_mobile_breakpoint` in functions.php.
   ========================================================= */
@media (max-width: 1100px) {
	/* ---- Header: compacte witte balk (79px), iconen rechts (sticky staat globaal) ---- */
	.sellabees-header__top-inner {
		min-height: 79px;
		gap: 0;
		flex-wrap: nowrap;
	}
	.sellabees-header__logo img { height: 54px; }

	/* Zoekbalk wordt een icoon; veld klapt full-width uit onder de balk. */
	.sellabees-header__search {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		margin-left: auto;
		position: static;
	}
	.sellabees-search__field { display: none; }
	.sellabees-search__btn { position: static; right: auto; padding: 0; }

	/* Iconen (zoek/account/cart/hamburger) iets meer uit elkaar (klantwens) zodat ze
	   niet tegen elkaar plakken op mobiel. */
	.sellabees-header__actions { margin-left: 16px; gap: 16px; }

	/* ---- Hamburger-/sluit-toggle (tussen de header-iconen) ---- */
	.sellabees-nav__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		background: none; border: 0; padding: 0; margin: 0;
		color: var(--sellabees-black);
		cursor: pointer;
	}
	/* 3 lijntjes die naar een kruisje morphen */
	.sellabees-nav__toggle-lines { position: relative; display: block; width: 24px; height: 16px; }
	.sellabees-nav__toggle-lines span {
		position: absolute; left: 0; right: 0; height: 2px;
		background: currentColor; border-radius: 2px;
		transition: transform .3s ease, opacity .2s ease, top .3s ease;
	}
	.sellabees-nav__toggle-lines span:nth-child(1) { top: 0; }
	.sellabees-nav__toggle-lines span:nth-child(2) { top: 7px; }
	.sellabees-nav__toggle-lines span:nth-child(3) { top: 14px; }
	.sellabees-nav__toggle[aria-expanded="true"] .sellabees-nav__toggle-lines span:nth-child(1) { top: 7px; transform: rotate(45deg); }
	.sellabees-nav__toggle[aria-expanded="true"] .sellabees-nav__toggle-lines span:nth-child(2) { opacity: 0; }
	.sellabees-nav__toggle[aria-expanded="true"] .sellabees-nav__toggle-lines span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

	body.sellabees-menu-open { overflow: hidden; }

	/* ---- Zoeken: het zoek-icoon vervangt de hele header door het zoekveld ---- */
	.sellabees-header.search-open .sellabees-header__logo,
	.sellabees-header.search-open .sellabees-header__actions { display: none; }
	.sellabees-header.search-open .sellabees-header__top-inner { gap: 8px; }
	.sellabees-header.search-open .sellabees-header__search {
		flex: 1 1 auto;
		width: auto; max-width: none; margin: 0;
	}
	.sellabees-header.search-open .sellabees-search { position: relative; width: 100%; }
	.sellabees-header.search-open .sellabees-search__field {
		display: block;
		width: 100%; height: 49px;
		background: var(--sellabees-search-bg);
		padding: 0 46px 0 16px;
		font-size: 16px;
		animation: sellabees-search-grow .28s ease;
	}
	.sellabees-header.search-open .sellabees-search__btn {
		position: absolute; right: 14px; top: 50%; transform: translateY(-50%); padding: 0;
	}
	.sellabees-header.search-open .sellabees-search-close {
		display: inline-flex; align-items: center; justify-content: center;
		flex: 0 0 auto;
		background: none; border: 0; padding: 4px; cursor: pointer;
		color: var(--sellabees-black);
	}
	@keyframes sellabees-search-grow {
		from { opacity: 0; transform: scaleX(.6); transform-origin: right; }
		to   { opacity: 1; transform: scaleX(1); }
	}

	/* ---- Menu-overlay (rood) — groeit van boven naar onder open ---- */
	.sellabees-nav {
		position: fixed;
		left: 0; right: 0; top: 79px; bottom: 0;
		z-index: 95;
		background: var(--sellabees-red);
		overflow-x: hidden;   /* dichte overlay: brede desktop-menubalk niet buiten beeld laten steken (geen horizontale scroll <365px) */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		clip-path: inset(0 0 100% 0);   /* dichtgeklapt vanaf de onderkant (0 hoogte bovenaan) */
		visibility: hidden;
		transition: clip-path .34s cubic-bezier(.22,1,.36,1), visibility 0s linear .34s;
	}
	.sellabees-nav.is-open {
		clip-path: inset(0 0 0 0);      /* groeit naar volledige hoogte */
		visibility: visible;
		transition: clip-path .34s cubic-bezier(.22,1,.36,1);
	}
	/* Inhoud ALTIJD in kolom op mobiel (ook wanneer dicht) — anders ligt de brede
	   desktop-menubalk (~600px) er nog en steekt 'ie buiten beeld → horizontale
	   scroll op smalle schermen (<365px). */
	.sellabees-nav__inner,
	.sellabees-nav__left,
	.sellabees-nav__right,
	.sellabees-nav__menu {
		flex-direction: column;
	}
	.sellabees-nav.is-open .sellabees-nav__inner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-height: 100%;
		padding: 0;
	}
	.sellabees-nav.is-open .sellabees-nav__left {
		flex-direction: column;
		align-items: stretch;
		flex: 1 1 auto;
		padding: 22px 0 30px;
	}
	/* "Nieuw" als zwart blokje linksboven */
	.sellabees-nav.is-open .sellabees-nav__highlight {
		align-self: flex-start;
		margin: 0 0 8px 36px;
		padding: 8px 16px;
		font-size: 21px;
	}
	.sellabees-nav.is-open .sellabees-nav__menu {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.sellabees-nav.is-open .sellabees-nav__menu li { display: block; position: static; }
	.sellabees-nav.is-open .sellabees-nav__menu > li > a {
		font-size: 21px;
		/* Gelijk aan de desktopbalk. Stond op 400 uit de Impact-tijd (dat font
		   heeft maar één snit); met Oswald gaf dat een zichtbaar lichter mobiel
		   menu dan de rode balk op desktop. */
		font-weight: 600;
		padding: 13px 49px;
		justify-content: space-between;
	}
	.sellabees-nav.is-open .sellabees-nav__menu > li > a:hover { background: none; }
	/* desktop-chevron (::after) uit; eigen chevron-knop gebruiken */
	.sellabees-nav.is-open .sellabees-nav__menu > li > a::after { display: none; }
	.sellabees-nav__chevron {
		display: none;
		background: none; border: 0; padding: 8px; margin: -8px 0;
		color: #fff; cursor: pointer; line-height: 0;
		transition: transform .2s ease;
	}
	.sellabees-nav.is-open .sellabees-nav__chevron { display: inline-flex; }
	.sellabees-nav.is-open .is-expanded > a .sellabees-nav__chevron { transform: rotate(180deg); }

	/* submenu's: vloeiend in-/uitklappen via de chevron. display:block + height:0
	   + overflow:hidden zodat de JS de exacte hoogte (0 ↔ scrollHeight) kan animeren
	   i.p.v. een instant display-sprong. */
	.sellabees-nav.is-open .sub-menu {
		position: static;
		display: block;
		height: 0;
		overflow: hidden;
		background: rgba(0,0,0,.12);
		box-shadow: none;
		padding: 0;
		transition: height 0.3s ease;
	}
	/* Alleen het EERSTE submenu-niveau krijgt die lichte verdonkering. Een submenu
	   binnen een submenu (subcategorie, niveau 3) legde er nóg een laag 0.12 over,
	   waardoor een geopend niveau-2 item zichtbaar grijs werd — klantfeedback
	   2026-07-27. Nu erft niveau 3 gewoon de achtergrond van zijn ouder. */
	.sellabees-nav.is-open .sub-menu .sub-menu {
		background: none;
	}
	@media (prefers-reduced-motion: reduce) {
		.sellabees-nav.is-open .sub-menu { transition: none; }
	}
	.sellabees-nav.is-open .sub-menu a { color: #fff; padding: 10px 60px; font-size: 16px; }

	/* rechter-navgroep (Over Brock/Contact) = zwart onderblok */
	.sellabees-nav.is-open .sellabees-nav__right {
		flex-direction: column;
		align-items: stretch;
		margin-top: auto;
		background: var(--sellabees-black);
		padding: 14px 0;
	}
	.sellabees-nav.is-open .sellabees-nav__right .sellabees-nav__menu > li > a {
		padding: 13px 49px;
		margin: 0;
	}
	.sellabees-nav.is-open .sellabees-nav__right .sellabees-nav__menu > li:last-child > a {
		margin-right: 0;
	}
}

/* =========================================================
   FOOTER-MOBIEL — houdt bewust zijn eigen grens op 981px. Alleen het MENU is
   naar 1100px verhuisd (klantwens 2026-07-28); de footer heeft die ruimte niet
   nodig en blijft dus ongewijzigd.
   ========================================================= */
@media (max-width: 981px) {
	/* ---- Footer: vloeiend — kolommen naast elkaar zolang ze passen, anders
	   wrappen naar de volgende regel. Brede blokken (contact + openingstijden)
	   vragen meer ruimte en komen daardoor pas op grotere schermen naast elkaar;
	   de smalle link-lijsten passen al eerder met 2 (of meer) per regel. ---- */
	.sellabees-footer__grid {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 32px 28px;
		padding-block: 36px;
	}
	.sellabees-footer__col { flex: 1 1 165px; min-width: 0; }
	.sellabees-footer__contact { flex: 1 1 250px; }
	.sellabees-footer__hours { flex: 1 1 270px; }
	/* Openingstijden vult zijn kolom: dag links, tijd rechts. */
	.sellabees-footer__hours .sellabees-hours { width: 100%; }
	.sellabees-footer__hours .sellabees-hours th { width: auto; }
	.sellabees-footer__hours .sellabees-hours td { text-align: right; }
	.sellabees-footer__bottom-inner {
		flex-direction: column;
		gap: 16px;
		text-align: center;
	}
	/* Betaalmethoden in de FOOTER: iconen op normale grootte (30px) op één rij = 309px,
	   breder dan de content-marge (~240px @320) → liep eerder over de pagina. Oplossing
	   (verzoek gebruiker: "de rij mag breder"): de RIJ breekt uit de gutter en loopt
	   full-bleed (100vw) met gecentreerde iconen. flex-wrap als vangnet < ~309px.
	   Gescoped op `footer` zodat de winkelwagen-betaalstrip (deelt .sellabees-payments)
	   NIET full-bleed wordt en de cart-pagina geen horizontale overflow krijgt. */
	footer .sellabees-payments {
		width: 100vw;
		max-width: 100vw;
		margin-inline: calc(50% - 50vw);
		justify-content: center;
		flex-wrap: wrap;
	}

	/* ---- Footer-USP-balk → swipe-slider (de 4 USP's, design-tip) ---- */
	.sellabees-footer__usps-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding-block: 18px;
	}
	.sellabees-usps {
		flex-wrap: nowrap;
		gap: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.sellabees-usps::-webkit-scrollbar { display: none; }
	.sellabees-usp {
		flex: 0 0 100%;
		scroll-snap-align: center;
		justify-content: center;
	}
	/* Reviews-badge zit op mobiel in de reviews-sectie, niet in de footer-band. */
	.sellabees-footer__usps .sellabees-reviews { display: none; }
	.sellabees-usp__title { font-size: 20px; }   /* Figma 483:27915 (mobiel idem 20px) */
}

/* =========================================================
   FILTERMENU  (core-component sellabees_filter_menu — hier gestyled)
   ========================================================= */
.sellabees-filter { width: 100%; font-family: var(--sellabees-font-body); }
.sellabees-filter__title {
	font-family: var(--sellabees-font-heading);
	text-transform: uppercase;
	font-size: 24px;          /* Figma 482:5757 (Impact 24px #030104 uppercase) */
	color: #030104;
	margin: 0 0 12px;
}
.sellabees-filter__section { border-top: 1px solid var(--sellabees-border, #e3e3e3); padding: 14px 0; }
.sellabees-filter__head {
	display: flex; align-items: center; justify-content: space-between;
	width: 100%; background: none; border: 0; padding: 0; cursor: pointer;
	font-family: var(--sellabees-font-heading);
	text-transform: uppercase; font-size: 16px;   /* Figma 482:5779 (Impact 16px zwart, geen letter-spacing) */
	color: var(--sellabees-text, #231f20);
}
.sellabees-filter__chevron { transition: transform .2s ease; flex: 0 0 auto; }
.sellabees-filter__section[data-collapsed] .sellabees-filter__chevron { transform: rotate(-90deg); }
.sellabees-filter__body { padding-top: 12px; }
.sellabees-filter__section[data-collapsed] .sellabees-filter__body { display: none; }

/* Standaard filter-lijst = verticale checkbox + naam (categorie, merken). */
.sellabees-filter__list { list-style: none; margin: 0; padding: 0; }
.sellabees-filter__item { margin: 0 0 7px; }
.sellabees-filter__item.is-hidden { display: none; }
.sellabees-filter__check { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; }
.sellabees-filter__check input { width: 16px; height: 16px; accent-color: var(--sellabees-red); margin: 0; }
.sellabees-filter__label { color: var(--sellabees-text, #231f20); }   /* Figma 482:5781 (Avenir 14px zwart) */

/* Lange filterlijsten begrenzen + laten scrollen i.p.v. één eindeloze kolom.
   Korte lijsten (categorie, 6 items) blijven onaangeroerd omdat ze onder de
   max-height blijven; alleen wie erboven komt krijgt een scrollbalk.

   KLANTWENS 2026-07-28: dit gold eerst NIET voor de chips-lijst (Kleur) — die was
   hier expliciet van uitgesloten. Gevolg: na "Toon meer" klapte Kleur open naar
   2475px (124 chips) terwijl Merken op 300px bleef met een scrollbalk. Nu geldt de
   begrenzing voor álle filterlijsten, dus Kleur krijgt hetzelfde scrollmenu als
   Merken. Dichtgeklapt verandert er niets: 8 chips is ~108px, ruim onder de grens. */
.sellabees-filter__list {
	max-height: 300px;
	overflow-y: auto;
	padding-right: 4px;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(0,0,0,.25) transparent;
}
.sellabees-filter__list::-webkit-scrollbar { width: 8px; }
.sellabees-filter__list::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); border-radius: 4px; }
.sellabees-filter__list::-webkit-scrollbar-track { background: transparent; }

/* KLEUR-filter = afgeronde 'pillen' (chips) in een grid + "Toon meer/Toon minder"
   (klantvoorbeeld). Alléén de kleurlijst; overige filters blijven de gewone lijst. */
.sellabees-filter__list--chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sellabees-filter__list--chips .sellabees-filter__item { margin: 0; }
.sellabees-filter__list--chips .sellabees-filter__check {
	display: inline-flex;
	gap: 0;
	border: 1px solid var(--sellabees-border, #d7d7d7);
	border-radius: 6px;
	padding: 6px 12px;
	line-height: 1.2;
	background: #fff;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
/* Native checkbox verbergen — het pil-label is de klikbare toggle. */
.sellabees-filter__list--chips .sellabees-filter__check input {
	position: absolute; opacity: 0;
	width: 0; height: 0; margin: 0; pointer-events: none;
}
.sellabees-filter__list--chips .sellabees-filter__check:hover { border-color: var(--sellabees-red, #e30613); }
.sellabees-filter__list--chips .sellabees-filter__check:focus-within { outline: 2px solid var(--sellabees-red, #e30613); outline-offset: 2px; }
/* Geselecteerd = gevulde rode pil. */
.sellabees-filter__list--chips .sellabees-filter__check:has(input:checked) {
	border-color: var(--sellabees-red, #e30613);
	background: var(--sellabees-red, #e30613);
}
.sellabees-filter__list--chips .sellabees-filter__check:has(input:checked) .sellabees-filter__label { color: #fff; }

/* "Toon meer / Toon minder" onder de kleur-chips. */
.sellabees-filter__more {
	margin-top: 12px;
	background: none; border: 0; padding: 0;
	color: var(--sellabees-text, #231f20);
	font-family: var(--sellabees-font-body);
	font-size: 14px; text-decoration: underline;
	cursor: pointer;
}
.sellabees-filter__more:hover { color: var(--sellabees-red, #e30613); }

/* Kleur-swatches */
.sellabees-filter__swatches { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.sellabees-filter__swatch { position: relative; display: inline-flex; cursor: pointer; }
.sellabees-filter__swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sellabees-filter__swatch-dot {
	width: 35px; height: 35px; border-radius: 50%;   /* Figma 482:5763 (Ellipse 35×35) */
	display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.sellabees-filter__swatch.is-checked .sellabees-filter__swatch-dot,
.sellabees-filter__swatch input:checked + .sellabees-filter__swatch-dot {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sellabees-red);
}

/* Prijs — Figma 482:5758/5759: twee velden van ~80×34 met border #d9d9d9 + radius 2px,
   ~81px tussenruimte (in de 241px-brede kolom). Responsief: de velden vullen samen de
   kolom (flex), maar houden de design-hoogte/rand/radius. */
.sellabees-filter__price-inputs { display: flex; gap: 16px; margin-bottom: 18px; }
/* Elk veld in een wrapper met een vast €-teken ervóór (number-inputs kunnen het
   teken niet in hun value tonen). Symbool komt generiek uit get_woocommerce_currency_symbol(). */
.sellabees-filter__price-control { position: relative; flex: 1; display: block; }
.sellabees-filter__price-prefix {
	position: absolute; left: 10px; top: 0; height: 34px;
	display: flex; align-items: center; pointer-events: none;
	font-family: var(--sellabees-font-body); font-size: 14px; color: var(--sellabees-text, #231f20);
}
.sellabees-filter__price-field {
	width: 100%; height: 34px; padding: 0 10px;
	border: 1px solid #d9d9d9; border-radius: 2px;
	font-family: var(--sellabees-font-body); font-size: 14px; color: var(--sellabees-text, #231f20);
}
/* Met €-prefix: extra links-padding zodat het getal niet onder het teken valt. */
.sellabees-filter__price-control .sellabees-filter__price-field { padding-left: 22px; }
.sellabees-filter__price-field:focus { outline: 2px solid var(--sellabees-red); outline-offset: -1px; }
/* Figma 482:5762 (Line 4 = dunne track) + 482:5767 (Ellipse 11 = rode knop).
   Design: dikkere rode balk + grote WITTE bollen met dunne rode rand. */
.sellabees-filter__slider { position: relative; height: 28px; }
.sellabees-filter__slider-track,
.sellabees-filter__slider-range {
	position: absolute; top: 50%; transform: translateY(-50%);
	height: 4px; border-radius: 4px;          /* dikkere balk (design) */
}
.sellabees-filter__slider-track { left: 0; right: 0; background: #d9d9d9; }
.sellabees-filter__slider-range { background: var(--sellabees-red); }
.sellabees-filter__slider-input {
	position: absolute; top: 0; left: 0; width: 100%; height: 28px; margin: 0;
	-webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
/* Greep: grote witte bol met dunne rode rand (design). box-sizing border-box
   zodat de bol exact 24px blijft inclusief rand. */
.sellabees-filter__slider-input::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; pointer-events: auto;
	box-sizing: border-box;
	width: 24px; height: 24px; border-radius: 50%;
	background: #fff; border: 2px solid var(--sellabees-red); box-shadow: none; cursor: pointer;
}
.sellabees-filter__slider-input::-moz-range-thumb {
	pointer-events: auto;
	box-sizing: border-box;
	width: 24px; height: 24px; border-radius: 50%;
	background: #fff; border: 2px solid var(--sellabees-red); box-shadow: none; cursor: pointer;
}
.sellabees-filter__submit {
	margin-top: 14px; background: var(--sellabees-red); color: #fff;
	border: 0; padding: 10px 18px; font-family: var(--sellabees-font-heading);
	text-transform: uppercase; cursor: pointer;
}

/* =========================================================
   SHOP / CATEGORIE-ARCHIEF
   ========================================================= */
/* Geen onderste padding: de laatste volle-breedte band (USP-strip) of het
   SEO-tekstblok sluit strak op de footer aan (anders een lege witte balk
   op archieven zonder SEO-tekst). */
.sellabees-shop { padding-block: 0; }
/* Grijze header-banner (Figma 482:5813): #ebebeb, volle breedte, y180–515 (h335),
   titel op 50px vanaf de bovenkant, subcats ~50px boven de onderrand. */
.sellabees-shop__banner { background: var(--sellabees-search-bg); padding: 50px 0; }
.sellabees-shop__title { font-family: var(--sellabees-font-heading); text-transform: uppercase; font-size: 64px; line-height: 1; margin: 0 0 14px; color: #000; }
.sellabees-shop__desc { color: #000; font-size: 14px; line-height: 26px; max-width: 100%; margin-bottom: 20px; }
.sellabees-shop__subcats { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 0; }
/* Oswald op de grijze subcategorie-blokken (klantwens 2026-08-14: "die mogen wel
   Oswald zijn"). Oswald is variabel, dus hier een écht gewicht i.p.v. de
   synthetische bold die Impact zou opleveren. */
.sellabees-shop__subcat {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 150px; height: 45px; padding: 0 18px;
	background: #585858; color: #fff;
	font-family: var(--sellabees-font-nav, var(--sellabees-font-heading));
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase; font-size: 14px;
}
.sellabees-shop__subcat:hover { background: #444; }
@media (max-width: 700px) { .sellabees-shop__title { font-size: 40px; } }
.sellabees-shop__layout { display: grid; grid-template-columns: 241px 1fr; gap: 49px; align-items: start; margin-top: 50px; }
/* Zonder filter-sidebar (zoekresultaten, search.php): één kolom over de volle breedte.
   Het filtermenu is opgebouwd rond een archief-context (categorie/merk-termen) en heeft
   op een vrije zoekopdracht geen betekenisvolle facetten. */
.sellabees-shop__layout--full { grid-template-columns: 1fr; }
.sellabees-shop__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
/* WC' `.woocommerce-ordering { margin: 0 0 1em }` maakt de form-margin-box 16px
   hoger → align-items:center duwt de select ~8px boven de telregel. Marge nullen
   zodat "X van Y producten" en de sorteer-dropdown exact uitlijnen. */
.sellabees-shop__toolbar .woocommerce-ordering { margin: 0; }
.sellabees-shop__toolbar .woocommerce-result-count { margin: 0; }
/* Sorteer-dropdown — Figma 482:5822 (vlak #d9d9d9, radius 2px, ~178×25)
   + 482:5826 (Avenir 12px zwart, kleine chevron). */
.sellabees-shop__toolbar .woocommerce-ordering select,
.sellabees-shop__toolbar select.orderby {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	width: 178px; min-width: 178px; max-width: 178px; height: 25px; padding: 0 26px 0 10px;
	border: 0; border-radius: 2px; background-color: #d9d9d9;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23231f20' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 10px center;
	font-family: var(--sellabees-font-body); font-size: 12px; color: #231f20;
	line-height: 25px; cursor: pointer;
}
/* SEO-tekstblok onder het archief — Figma 482:5961:
   titel Impact 40px (sentence case) #010101, body Avenir 45 Book 16px/27px #010101,
   inhoudsbreedte 1202px gecentreerd. */
.sellabees-shop__seo { padding: 40px 0 40px; }
.sellabees-shop__seo .sellabees-container { max-width: 1202px; }
.sellabees-shop__seo h2 {
	font-family: var(--sellabees-font-heading); text-transform: none;
	font-size: 40px; line-height: 1.05; color: #010101; margin: 0 0 16px;
}
.sellabees-shop__seo p {
	font-family: var(--sellabees-font-body); font-weight: 300;
	font-size: 16px; line-height: 27px; color: #010101; margin: 0 0 16px;
}
.sellabees-shop__seo p:last-child { margin-bottom: 0; }
/* Mobiel/staande tablet: SEO-kop Impact 35px (Figma 483:28655 — niet de
   desktop-40px). Body blijft 16px. */
@media (max-width: 981px) {
	.sellabees-shop__seo h2 { font-size: 35px; line-height: 45px; }
}

/* ---- "Laad meer"-blok (Figma 483:28587/28588): telregel + link onder het grid ---- */
.sellabees-shop__loadmore {
	margin-top: 28px;
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	text-align: center;
}
.sellabees-shop__count {
	font-family: var(--sellabees-font-body); font-weight: 300;
	font-size: 14px; color: #000; margin: 0;
}
.sellabees-shop__loadmore-btn {
	font-family: var(--sellabees-font-heading); text-transform: uppercase;
	font-size: 16px; color: #212121; text-decoration: underline;
}
.sellabees-shop__loadmore-btn:hover { color: #000; }
/* "Laad minder" + "Laad meer" naast elkaar, identiek gestyled (klantwens). */
.sellabees-shop__loadmore-actions { display: flex; align-items: center; justify-content: center; gap: 28px; }

/* ---- "Geen producten gevonden"-melding (archive-product.php) ----
   In het archief is dit een lege-toestand, geen losse notice. Daarom hier
   gecentreerd met ruimte i.p.v. de smalle linksrand-notice. De markup/tekst
   levert een andere agent; dit stylet de melding zodra 'ie er staat. */
.sellabees-shop__content > .woocommerce-info,
.woocommerce .sellabees-shop__content > .woocommerce-info {
	display: flex;
	flex-direction: column;   /* titel → tekst → knop ONDER elkaar, niet naast elkaar */
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 260px;
	margin: 0;
	padding: 56px 24px;
	background: var(--sellabees-search-bg, #ebebeb);
	border: 0;
	border-radius: 2px;
	text-align: center;
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	color: var(--sellabees-text, #231f20);
}
/* Het groene/rode info-icoon (::before) hoort niet bij een lege-toestand. */
.sellabees-shop__content > .woocommerce-info::before,
.woocommerce .sellabees-shop__content > .woocommerce-info::before {
	content: none !important; display: none !important;
}
/* Lege-toestand: kop + tekst + knop, gecentreerd gestapeld. */
.sellabees-shop__content > .woocommerce-info .sellabees-shop__empty-title {
	margin: 0;
	font-family: var(--sellabees-font-heading);
	font-size: 26px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--sellabees-ink, #231f20);
}
.sellabees-shop__content > .woocommerce-info .sellabees-shop__empty-text {
	margin: 0;
	max-width: 520px;
	font-size: 16px;
	line-height: 1.6;
	color: #555;
}
.sellabees-shop__content > .woocommerce-info a.sellabees-shop__empty-link {
	display: inline-flex;
	align-items: center;
	margin-top: 4px;
	padding: 13px 30px;
	background: var(--sellabees-red);
	color: #fff;
	float: none;
	font-family: var(--sellabees-font-body);
	font-weight: 800;
	font-size: 14px;
	text-decoration: none;
	border-radius: 2px;
	transition: background-color .2s ease;
}
.sellabees-shop__content > .woocommerce-info a.sellabees-shop__empty-link:hover {
	background: var(--sellabees-red-dark, #b91e29);
	color: #fff;
}
/* Productgrid + kaart-styling: zie sectie PRODUCTKAART hieronder. */

/* Filter-sidebar klapt op ≤1000 onder de producten (kolom-stappen: zie hieronder). */
@media (max-width: 981px) {
	.sellabees-shop__layout { grid-template-columns: 1fr; }
}

/* =========================================================
   PRODUCTKAART  (exacte waarden uit Figma)
   ========================================================= */
.sellabees-shop__content ul.products {
	display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 24px;
	list-style: none; margin: 0; padding: 0;
}
/* Archief-grid kolom-gap = 17px (Figma archief). ALLEEN het archief
   (:not(.sellabees-slider__track)) → home-sliders houden hun 24px-gap. */
.sellabees-shop__content ul.products:not(.sellabees-slider__track) { gap: 17px; }
/* Archief-fotovak = 237/242 (Figma archief). NIET de globale
   .sellabees-card__image aanraken (home-sliders + PDP delen die). */
.sellabees-shop__content ul.products:not(.sellabees-slider__track) .sellabees-card__image { aspect-ratio: 237 / 242; }
/* Archief-productgrid schaalt mee als de home-sliders: 4 → 3 → 2 → 1 kolom op
   dezelfde breakpoints (>1200 / ≤1200 / ≤900 / ≤500), "steeds meer naast elkaar
   wanneer het past". :not(.sellabees-slider__track) verslaat de basis-4 hierboven
   (en raakt de home-sliders niet). De ≤900- en ≤500-stappen staan verderop. */
@media (max-width: 1200px) {
	.sellabees-shop__content ul.products:not(.sellabees-slider__track) { grid-template-columns: repeat(3, 1fr); }
}
/* WooCommerce's eigen float-grid uitschakelen */
.sellabees-shop__content ul.products::before,
.sellabees-shop__content ul.products::after { content: none !important; display: none !important; }
.sellabees-shop__content ul.products li.product {
	width: auto !important; float: none !important; margin: 0 !important; padding: 18px 14px 16px !important;
}
.sellabees-card {
	background: #f5f5f5;
	border-radius: 0;   /* Figma: vierkante kaart */
	padding: 14px;
	display: flex;
	flex-direction: column;
	position: relative;
}
/* WooCommerce' `ul.products li.product` zet padding:0 met hogere specificiteit
   en nulde zo de kaart-padding → afbeelding plakte tegen de bovenrand. Hoger
   specifiek herstellen (Figma: afbeelding ~20px vanaf kaart-top, 12px zijkant). */
.woocommerce ul.products li.product.sellabees-card,
ul.products li.product.sellabees-card {
	padding: 18px 14px 16px;
}
.sellabees-card__image {
	display: block;
	aspect-ratio: 258 / 272;
	background: #fff;          /* witte box → nette, consistente witruimte bij object-fit:contain (niet-vierkante foto's) */
	border-radius: 0;
	overflow: hidden;
	position: relative;
}
/* Hogere specificiteit dan WooCommerce' `.woocommerce ul.products li.product a img`
   (die height:auto forceert → niet-vierkante/dunne foto's plakten bovenaan met witruimte
   eronder). Nu vult de <img> de hele box en centreert object-fit:contain de foto verticaal
   én horizontaal — volledig zichtbaar, in het midden. */
.woocommerce ul.products li.product a.sellabees-card__image img,
.sellabees-card__image img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
/* Productkaarten mogen NOOIT groter worden door hun eigen content. Flex-items (slider)
   ÉN grid-items (categorie-/shop-grid) hebben standaard min-width/min-height:auto
   (= min-content); een foto die NIET laadt (broken <img>) rekt de kaart dan op → via
   de aspect-ratio wordt 'ie gigantisch en rekt de rij/kolom mee (klantfeedback: eerst
   de slider, nu ook het categorie-grid). min-width/min-height:0 houdt elke kaart op
   z'n toegewezen grootte, ongeacht de foto. Geldt in álle contexten. */
.woocommerce ul.products li.product.sellabees-card,
ul.products li.product.sellabees-card { min-width: 0; min-height: 0; }
/* Oswald op het kaartlabel (klantwens 2026-08-14, samen met de grijze
   subcategorie-blokken). Zelfde behandeling: echt gewicht 600 i.p.v. Impact's
   enige snit. */
.sellabees-card__badge {
	position: absolute; top: 8px; right: 8px; z-index: 1;   /* Figma 482:19113: rechtsboven */
	background: var(--sellabees-red); color: #fff;
	font-family: var(--sellabees-font-nav, var(--sellabees-font-heading));
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	font-size: 14px; padding: 4px 12px; border-radius: 0;   /* Figma 482:19113 (14px wit uppercase, ~94×35) */
}
/* Aanbiedings-flash op de productpagina = dezelfde rode design-badge als op de kaart.
   WooCommerce' standaard toont hier een groen rond "Sale"-bolletje; dat overschrijven
   we volledig. De flash is een direct kind van .sellabees-product__gallery
   (woocommerce_show_product_sale_flash draait vóór de galerij), dus ankeren we 'm
   daarbinnen linksboven (rechtsboven zit vaak het zoom/vergroot-icoon). */
.sellabees-product__gallery { position: relative; }
.woocommerce div.product .sellabees-product__gallery span.onsale {
	position: absolute; top: 12px; left: 12px; right: auto; bottom: auto;
	z-index: 3;
	margin: 0; padding: 4px 12px;
	min-width: 0; min-height: 0;
	background: var(--sellabees-red); color: #fff;
	/* Zelfde label als op de kaart, dus ook Oswald 600 (klantwens 2026-08-14).
	   `font-weight: 400` stond hier omdat Impact maar één snit heeft; Oswald is
	   variabel, dus hier een echt SemiBold — anders oogt het label op de
	   productpagina dunner dan hetzelfde label in de overzichten. */
	font-family: var(--sellabees-font-nav, var(--sellabees-font-heading));
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: 14px; line-height: 1.4; font-weight: 600; border-radius: 0;
}
.sellabees-card__title {
	font-family: var(--sellabees-font-body);
	font-weight: 300;               /* Avenir 45 Book */
	font-size: 16px;
	line-height: 1.15;
	color: #000;
	margin: 16px 0 0;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 2.3em;
}
.sellabees-card__delivery {
	display: flex; align-items: center; gap: 6px;
	font-family: var(--sellabees-font-body);
	font-size: 11px; color: #212121;
	margin: 10px 0 0;
}
.sellabees-card__check { color: #00bc1c; flex: 0 0 auto; }
/* "+ N soorten" bij variabele producten — rood, onder de titel en boven de
   levertijd-belofte. */
.sellabees-card__variants {
	margin: 6px 0 0;
	font-family: var(--sellabees-font-body);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.2;
	color: var(--sellabees-red);
}
.sellabees-card__footer {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; margin-top: auto; padding-top: 12px;
}
.sellabees-card__price,
.sellabees-card__price .woocommerce-Price-amount {
	font-family: var(--sellabees-font-heading);
	font-size: 20px; color: #000; font-weight: 400;
}
.sellabees-card__price del { opacity: .5; font-size: 14px; margin-right: 4px; }
.sellabees-card__price ins { text-decoration: none; }
.sellabees-card__cart {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 53px; height: 39px;
	background: var(--sellabees-red); color: #fff;
	border-radius: 0;   /* Figma: vierkante knop */
}
.sellabees-card__cart:hover { background: var(--sellabees-red-dark); }
.sellabees-card__cart.loading { opacity: .6; }
/* Uitverkocht → grijze knop, gelijk aan de uitgeschakelde knop op de productpagina
   (klantfeedback 2026-07-29: wel/niet bestelbaar was niet te onderscheiden). De knop
   blijft klikbaar en leidt naar de productpagina, waar de rode "Niet op voorraad"-badge
   en de e-mailmelding staan. Variabele producten blijven rood: die zijn bestelbaar,
   alleen ná het kiezen van een variatie. */
.sellabees-card__cart--disabled,
.sellabees-card__cart--disabled:hover {
	background: var(--sellabees-search-bg);
	color: var(--sellabees-muted);
	border: 1px solid var(--sellabees-border);
}

/* ---- Mobiele filter-drawer: elementen verborgen op desktop (>900px) ---- */
.sellabees-filter-toggle,
.sellabees-filter-close,
.sellabees-filter-backdrop { display: none; }

/* =========================================================
   MOBIEL — CATEGORIE-/ARCHIEF (Figma 483:27979, 393px breed).
   Eigen @media-blok (NIET het header/menu/footer-blok @409 aanraken).
   Banner + volle-breedte Filter-knop (drawer) + 2-koloms compacte
   productgrid. Komt ná de @media(1000/520px)-regels → wint de cascade.
   ========================================================= */
@media (max-width: 981px) {
	/* ---- Banner (483:28401, h≈583): titel Impact, beschrijving, subcats ---- */
	.sellabees-shop__banner { padding: 44px 0 40px; }
	.sellabees-shop__title { font-size: 36px; margin: 0 0 16px; }
	.sellabees-shop__desc { font-size: 14px; line-height: 22px; margin-bottom: 24px; }
	/* Subcat-knoppen groeien mee in een grid: passen er meerdere naast elkaar,
	   dan vullen ze samen de rij; blijft er één over op een eigen rij, dan wordt
	   die vanzelf volle breedte (flex-grow). Basis ~130px → 2 naast elkaar op
	   telefoon (393/360), meer op bredere schermen. */
	.sellabees-shop__subcats { gap: 11px; }
	.sellabees-shop__subcat {
		min-width: 0; height: 45px; padding: 0 14px;
		font-size: 13px; flex: 1 1 130px;
	}

	/* ---- Layout: één kolom; sidebar uit de flow (wordt drawer) ---- */
	.sellabees-shop__layout {
		display: block;
		margin-top: 26px;
	}

	/* ---- Volle-breedte "Filter"-knop (483:28421, 295×45 ROOD met witte tekst/icoon) ---- */
	.sellabees-filter-toggle {
		display: flex; align-items: center; justify-content: center; gap: 10px;
		width: 100%; height: 45px; margin: 0 0 16px;
		background: var(--sellabees-red);
		border: 0; cursor: pointer;
		font-family: var(--sellabees-font-heading); text-transform: uppercase;
		font-size: 16px; color: #fff;   /* tekst + icoon (currentColor) wit op rood */
	}
	.sellabees-filter-toggle:hover { background: var(--sellabees-red-dark); }
	.sellabees-filter-toggle__icon { flex: 0 0 auto; }

	/* ---- Filter-drawer: schuift van rechts in ---- */
	.sellabees-shop__sidebar {
		position: fixed; top: 0; right: 0; bottom: 0;
		width: min(86vw, 340px);
		z-index: 1001;          /* boven de sticky header (z-index 100) */
		background: #fff;
		transform: translateX(100%);
		transition: transform .28s ease;
		overflow-y: auto; -webkit-overflow-scrolling: touch;
		padding: 18px 22px 40px;
		box-shadow: -4px 0 24px rgba(0,0,0,.18);
	}
	.sellabees-shop__sidebar.is-open { transform: translateX(0); }
	body.sellabees-filter-open { overflow: hidden; }

	.sellabees-filter-backdrop {
		display: block; position: fixed; inset: 0; z-index: 1000;   /* boven de header, ónder de drawer (1001) */
		background: rgba(0,0,0,.45);
		opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease;
	}
	body.sellabees-filter-open .sellabees-filter-backdrop {
		opacity: 1; visibility: visible;
	}

	.sellabees-filter-close {
		display: inline-flex; align-items: center; justify-content: center;
		background: none; border: 0; padding: 6px; margin: 0 0 6px -6px;
		color: #231f20; cursor: pointer; line-height: 0;
	}

	/* ---- Toolbar: aantal links (klein), sorteer-dropdown rechts ---- */
	.sellabees-shop__toolbar {
		justify-content: space-between; gap: 10px; margin-bottom: 18px;
		flex-wrap: nowrap;
	}
	.sellabees-shop__toolbar .woocommerce-result-count {
		font-size: 12px; color: #6b6b6b; margin: 0;
	}
	.sellabees-shop__toolbar .woocommerce-ordering select,
	.sellabees-shop__toolbar select.orderby {
		min-width: 137px; max-width: 137px;
	}

	/* ---- Productgrid op ≤981: 2 producten naast elkaar (categorie-mobiel 483:27979).
	   ALLEEN het archief-grid (NIET de home-sliders = .sellabees-slider__track).
	   minmax(0,1fr) i.p.v. 1fr: anders rekt de min-content van een kaart (bv. de
	   bezorgregel/badge) één kolom breder → ongelijke kolommen. Nu exact 50/50. ---- */
	.sellabees-shop__content ul.products:not(.sellabees-slider__track) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 16px;
	}
	/* Fotovak conform Figma-mobiel (237×242 in 262-brede binnenkaart) */
	.sellabees-shop__content ul.products:not(.sellabees-slider__track) .sellabees-card__image {
		aspect-ratio: 237 / 242;
	}

	/* ---- "Laad meer"-blok onder het grid (Figma 483:28587/28588) ---- */
	.sellabees-shop__loadmore { margin-top: 22px; }
}

/* Op smalle telefoons (≤500) BLIJVEN er 2 producten naast elkaar staan
   (klantwens, herhaald 2026-08-14: "er moet echt 2 naast elkaar op mobiel op de
   categoriepagina's"; categorie-mobiel Figma 483:27979 toont 2 kaarten per rij).
   Hier stond eerder een terugval naar 1 kolom omdat de kaart te smal werd; dat is
   nu opgelost door de kaart zélf compacter te maken i.p.v. de kolom te verbreden:
   minder padding, kleinere gap en een kortere regelafstand. Bij 320px houdt elke
   kaart zo nog ~146px, genoeg voor foto, titel, prijs en de knop. */
@media (max-width: 500px) {
	.sellabees-shop__content ul.products:not(.sellabees-slider__track) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px;
	}
	/* Kaart-padding terug (WooCommerce' eigen li-padding wint met !important,
	   vandaar dezelfde vorm als de regel hierboven in dit bestand). */
	.woocommerce ul.products li.product.sellabees-card,
	ul.products li.product.sellabees-card {
		padding: 12px 10px 12px !important;
	}
	.sellabees-shop__content ul.products:not(.sellabees-slider__track) .sellabees-card__title {
		font-size: 13px;
		line-height: 1.25;
	}
	/* Prijs deelt de ruimte met de knop en breekt zélf af waar nodig. Zonder dit
	   sprong de winkelwagenknop naar een eigen regel bij een langere prijs — "Vanaf
	   € 75,00" of een van/voor-prijs — waardoor de ene kaart er anders uitzag dan de
	   andere. (`flex-wrap: wrap` op de footer moet blijven: de "Bekijk
	   winkelwagen"-link hoort ná het toevoegen wél op een eigen volle regel.) */
	.sellabees-shop__content ul.products:not(.sellabees-slider__track) .sellabees-card__price {
		font-size: 15px;
		flex: 1 1 0;
		min-width: 0;
	}
}

/* Smalste telefoons (≤360): prijs + winkelwagenknop moeten op ÉÉN regel blijven.
   `.sellabees-card__footer` heeft globaal `flex-wrap: wrap` (nodig voor de
   "Bekijk winkelwagen"-link eronder), dus bij een lange prijs als "€ 22,50" viel de
   knop anders naar de volgende regel — en dan zag de ene kaart er anders uit dan de
   andere. Iets kleinere prijs + smallere gap/knop houdt ze samen; de knop blijft
   39px hoog en dus goed aan te tikken. */
@media (max-width: 360px) {
	.sellabees-shop__content ul.products:not(.sellabees-slider__track) .sellabees-card__footer {
		gap: 6px;
	}
	.sellabees-shop__content ul.products:not(.sellabees-slider__track) .sellabees-card__price,
	.sellabees-shop__content ul.products:not(.sellabees-slider__track) .sellabees-card__price .woocommerce-Price-amount {
		font-size: 14px;
	}
	.sellabees-shop__content ul.products:not(.sellabees-slider__track) .sellabees-card__cart {
		width: 46px;
	}
}

/* =========================================================
   Aantal-stepper (.sellabees-qty) — − / waarde / + in een
   omlijnd vakje. Gebruikt op winkelwagen + productpagina
   (markup uit woocommerce/global/quantity-input.php).
   ========================================================= */
/* Vast aantal (max=1 / individueel verkocht): WooCommerce zet het aantal-veld op
   type="hidden". De hele aantal-box heeft dan geen functie → verbergen (anders zie
   je losse −/+ knoppen om een leeg vakje). Geldt overal (productpagina, winkelwagen,
   checkout). */
.quantity:has(> input[type="hidden"]) { display: none; }
.sellabees-qty {
	display: inline-flex;
	align-items: stretch;
	height: 35px;
	border: 1px solid #d9d9d9;   /* Figma 482:9491 (border #d9d9d9) */
	border-radius: 2px;
	overflow: hidden;
	background: #fff;
	width: 81px;
}
.sellabees-qty__btn {
	flex: 0 0 27px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	background: #fff;
	color: #231f20;
	font-family: var(--sellabees-font-body, sans-serif);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	transition: background-color .12s ease;
}
.sellabees-qty__minus { border-right: 1px solid #d9d9d9; }
.sellabees-qty__plus  { border-left: 1px solid #d9d9d9; }
.sellabees-qty__btn:hover { background: #f3f3f3; }
.sellabees-qty input.qty {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 100%;
	border: 0;
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: var(--sellabees-font-body, sans-serif);
	font-size: 12px;
	font-weight: 300;
	color: var(--sellabees-ink, #000);
	background: transparent;
	-moz-appearance: textfield;
	appearance: textfield;
}
.sellabees-qty input.qty::-webkit-outer-spin-button,
.sellabees-qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* =========================================================
   Globale USP-band (.sellabees-page-usps-band) — grijze strook
   met 3 ronde icoon-USP's, vlak boven de footer op secundaire
   pagina's (template-parts/page-usps.php via footer.php).
   ========================================================= */
.sellabees-page-usps-band {
	background: var(--sellabees-search-bg, #ebebeb);
	padding: 70px 0;
}
.sellabees-page-usps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.sellabees-page-usp {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.sellabees-page-usp__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 117px;
	height: 117px;
	border-radius: 50%;
	background: #d9d9d9;
	margin-bottom: 26px;
}
.sellabees-page-usp__icon img {
	display: block;
	width: auto;
	height: auto;
	max-width: 56px;
	max-height: 56px;
}
.sellabees-page-usp__title {
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 20px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--sellabees-ink, #000);
	margin-bottom: 14px;
}
.sellabees-page-usp__text {
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 27px;
	color: var(--sellabees-ink, #000);
	max-width: 383px;
}
@media (max-width: 768px) {
	.sellabees-page-usps {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

.woocommerce-additional-fields {
	width: 100% !important;
}

.woocommerce-checkout-review-order-table tr.cart_item {
	border-bottom: 1px solid #d9d9d9 !important;

}

/* WooCommerce zet op deze lijst zelf `padding: 1em` en een paars-grijze
   onderrand. De padding neutraliseren we hier; de ONDERRAND niet meer op 0 —
   het betaalvak heeft sinds 2026-07-28 een echte omkadering (checkout.css,
   Mimoda-node 252:3772: 1px #d9d9d9 + radius 2px) en met dit `!important`
   ontbrak juist de onderkant van dat vak. */
ul.wc_payment_methods.payment_methods.methods {
    text-align: left;
    padding: 0 !important;
    margin: 0;
    list-style: none outside;
}
/* =========================================================
   WooCommerce-meldingen in Brock-huisstijl
   WC' eigen CSS (.woocommerce-message/-info/-error, spec 0,1,0) zet een
   grijs-paarse box met icoonfont; hier hoger-specifiek (0,2,0) herstyled.
   ========================================================= */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
	background: #f7f7f7;
	border: 0;
	border-left: 3px solid var(--sellabees-red);
	border-radius: 2px;
	color: var(--sellabees-ink, #231f20);
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	padding: 14px 18px 14px 44px;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.woocommerce .woocommerce-message::after,
.woocommerce .woocommerce-info::after,
.woocommerce .woocommerce-error::after,
.woocommerce-account .woocommerce-message::after,
.woocommerce-account .woocommerce-info::after {
	content:none !important; display:none !important;
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
	left: 16px;
	top: calc(50% - 10px);
	color: var(--sellabees-red);
}
.woocommerce .woocommerce-message::before { color: #12b347; }
/* Knop in een melding ("Bekijk winkelwagen") in merkstijl i.p.v. WC-grijs. */
.woocommerce .woocommerce-message .button,
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce input.button[type="submit"] {
	background: var(--sellabees-red);
	color: #fff;
	border: 0;
	border-radius: 0;
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .3px;
	padding: 10px 22px;
}
.woocommerce .woocommerce-message .button:hover,
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce input.button[type="submit"]:hover {
	background: var(--sellabees-red-dark);
	color: #fff;
}

/* Foutmelding (bv. voorraadlimiet) netjes uitlijnen + sluitbaar (klantwens). WC zet
   de tekst in <ul.woocommerce-error><li>…</li>; de flex hierboven staat op de <ul>
   (één kind), dus tekst + knop liepen inline scheef. Flex op de <li> → tekst verticaal
   gecentreerd, knop helemaal rechts. Ruimte rechts voor het sluitkruisje. */
.woocommerce .woocommerce-error { position: relative; padding-right: 42px; }
.woocommerce .woocommerce-error > li {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 0;
}
.woocommerce .woocommerce-error > li > .button,
.woocommerce .woocommerce-error > li > a.wc-forward { margin-left: auto; }
/* "Bekijk winkelwagen"-knop in de fout in merkstijl (net als in de succesmelding). */
.woocommerce .woocommerce-error .button {
	background: var(--sellabees-red); color: #fff; border: 0; border-radius: 0;
	font-family: var(--sellabees-font-heading); font-weight: 400;
	text-transform: uppercase; letter-spacing: .3px; padding: 10px 22px;
}
.woocommerce .woocommerce-error .button:hover { background: var(--sellabees-red-dark); color: #fff; }
/* Sluitkruisje (× ) op WC-meldingen — JS voegt de knop toe (zelfde plek als de toast). */
.sellabees-notice-close {
	position: absolute; top: 8px; right: 12px;
	background: none; border: 0; padding: 0;
	font-size: 22px; line-height: 1;
	color: var(--sellabees-muted); cursor: pointer;
}
.sellabees-notice-close:hover { color: var(--sellabees-ink); }

/* Trustindex' pager-stippenbalk verbergen.
   Trustindex zet 'm op ≤479px terug via een eigen @media-regel met !important én
   exact dezelfde specificiteit (.ti-widget.ti-goog .ti-controls-line); die wint
   dan op laadvolgorde (uploads-CSS laadt ná het thema). Daarom prefixen met de
   wrapper-class → hogere specificiteit, wint overal incl. telefoon. */
.sellabees-testimonials__trustindex .ti-widget.ti-goog .ti-controls-line,
.ti-widget.ti-goog .ti-controls-line {
    display: none !important;
}

/* =========================================================
   "Bekijk winkelwagen"-link (WC AJAX added_to_cart) — vol-breedte
   onder de kaart i.p.v. ingeklemd naast de cart-knop.
   ========================================================= */
.sellabees-card__footer { flex-wrap: wrap; }
.sellabees-card .added_to_cart.wc-forward {
	order: 3;
	flex: 1 0 100%;
	width: 100%;
	margin-top: 10px;
	padding: 11px 12px;
	text-align: center;
	background: var(--sellabees-red);
	color: #fff;
	font-family: var(--sellabees-font-heading);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .3px;
	line-height: 1.1;
}
.sellabees-card .added_to_cart.wc-forward:hover { background: var(--sellabees-red-dark); color: #fff; }

/* =========================================================
   Cart-toast (Brock-huisstijl) — JS zit in sellabees-shops-core.
   Witte kaart, rode accent, ronde bag-icoon; verschijnt bovenaan-midden.
   ========================================================= */
.sellabees-toasts {
	position: fixed;
	z-index: 9999;
	width: 100%;
	max-width: 410px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	pointer-events: none;
}
/* Plaatsing — instelbaar via Site-instellingen → Winkelwagen-melding → Plaatsing. */
.sellabees-toasts--top-center    { top: 40px; left: 50%; transform: translateX(-50%); padding: 0 16px; }
.sellabees-toasts--top-right     { top: 40px; right: 24px; align-items: flex-end; }
.sellabees-toasts--top-left      { top: 40px; left: 24px; align-items: flex-start; }
.sellabees-toasts--bottom-right  { bottom: 40px; right: 24px; align-items: flex-end; }
.sellabees-toasts--bottom-left   { bottom: 40px; left: 24px; align-items: flex-start; }
/* Bij een onderhoek schuift de melding van onderen omhoog i.p.v. van boven. */
.sellabees-toasts--bottom-right .sellabees-toast,
.sellabees-toasts--bottom-left .sellabees-toast { transform: translateY(12px); }
.sellabees-toast {
	position: relative;
	pointer-events: auto;
	background: #fff;
	border-top: 3px solid var(--sellabees-red);
	border-radius: 2px;
	box-shadow: 0 14px 44px rgba(0, 0, 0, .16);
	padding: 30px 26px 26px;
	text-align: center;
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity .3s ease, transform .3s ease;
}
.sellabees-toast.is-visible { opacity: 1; transform: none; }
.sellabees-toast__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(221, 37, 50, .10);
	color: var(--sellabees-red);
	margin-bottom: 14px;
}
.sellabees-toast__title {
	display: block;
	font-family: var(--sellabees-font-heading);
	font-size: 22px;
	line-height: 1.1;
	color: var(--sellabees-ink);
	margin-bottom: 4px;
}
.sellabees-toast__name {
	display: block;
	font-family: var(--sellabees-font-body);
	font-weight: 300;
	font-size: 14px;
	color: var(--sellabees-muted);
}
.sellabees-toast__close {
	position: absolute;
	top: 8px;
	right: 12px;
	background: none;
	border: 0;
	padding: 0;
	font-size: 22px;
	line-height: 1;
	color: var(--sellabees-muted);
	cursor: pointer;
}
.sellabees-toast__close:hover { color: var(--sellabees-ink); }
@media (max-width: 520px) {
	/* Mobiel: melding altijd vol-breedte (12px marge), positie boven of onder. */
	.sellabees-toasts { left: 12px; right: 12px; width: auto; max-width: none; transform: none; padding: 0; }
	.sellabees-toasts--top-center,
	.sellabees-toasts--top-right,
	.sellabees-toasts--top-left { top: 24px; bottom: auto; }
	.sellabees-toasts--bottom-right,
	.sellabees-toasts--bottom-left { bottom: 24px; top: auto; }
	.sellabees-toast { padding: 24px 20px 20px; }
}
/* Eigen icoon (SVG/PNG) als mask → neemt de icoonkleur (currentColor) over,
   zodat "Icoonkleur" wit ook de SVG wit maakt. */
.sellabees-toast__img {
	display: block;
	width: 60%;
	height: 60%;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.ti-widget.ti-goog .ti-review-item>.ti-inner {
	border-radius: 0 !important;
}

/* ============================================================
   Inlog-popup (bestaande klant) — overgenomen uit de ándere core-lijn (staging
   had de styling in de core-CSS; deze core-fork niet). Markup + AJAX zitten al in
   sellabees-shops-core/inc/account-auth.php; de JS-wiring in Brock theme.js.
   Gebruikt de Brock --sellabees-*-tokens, dus rood/ink/heading zijn de huisstijl.
   ============================================================ */
.sellabees-popup { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.sellabees-popup[hidden] { display: none; }
.sellabees-popup__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.sellabees-popup__box { position: relative; background: #fff; border: 1px solid #e6e6e6; border-radius: 3px; max-width: 420px; width: 100%; padding: 34px 36px; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.sellabees-login-popup .sellabees-popup__box { max-width: 420px; text-align: left; }
.sellabees-popup__close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--sellabees-red, #1f1f1f); background: #fff; color: var(--sellabees-red, #1f1f1f); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; }
.sellabees-popup__close:hover { background: var(--sellabees-red, #1f1f1f); color: #fff; }
.sellabees-popup__title { font-family: var(--sellabees-font-heading, inherit); font-weight: 600; font-size: 22px; color: var(--sellabees-ink, #1f1f1f); margin: 0 0 10px; }
.sellabees-popup__text { color: #6b6b6b; font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.sellabees-login__field { margin: 0 0 14px; }
.sellabees-login__field label { display: block; font-size: 13px; font-weight: 600; color: var(--sellabees-ink, #1f1f1f); margin-bottom: 6px; }
.sellabees-login__field input { width: 100%; border: 1px solid #cfcfcf; border-radius: 2px; padding: 12px 14px; font-size: 14px; background: #fff; }
.sellabees-login__field input:focus { outline: none; border-color: var(--sellabees-red, #1f1f1f); }
.sellabees-login__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; font-size: 13px; }
.sellabees-login__remember { display: flex; align-items: center; gap: 8px; color: #6b6b6b; cursor: pointer; margin: 0; }
.sellabees-login__remember input { width: auto; margin: 0; }
.sellabees-login__lost { color: var(--sellabees-red, #1f1f1f); white-space: nowrap; }
.sellabees-login__lost:hover { text-decoration: underline; }
.sellabees-login__btn { width: 100%; background: var(--sellabees-red, #1f1f1f); color: #fff; border: 0; border-radius: 2px; padding: 14px; font-family: var(--sellabees-font-heading, inherit); text-transform: uppercase; font-size: 15px; letter-spacing: .3px; cursor: pointer; }
.sellabees-login__btn:hover { filter: brightness(.93); }
.sellabees-login__btn:disabled { opacity: .65; cursor: default; }
.sellabees-login__msg { margin-top: 12px; font-size: 13px; color: #6b6b6b; text-align: center; min-height: 1em; }
.sellabees-login__msg.is-error { color: #c0392b; }
.sellabees-login__register { margin: 16px 0 0; text-align: center; font-size: 13px; color: #6b6b6b; }
.sellabees-login__register a { color: var(--sellabees-red, #1f1f1f); }
.sellabees-login__register a:hover { text-decoration: underline; }
body.sellabees-popup-open { overflow: hidden; }
@media (max-width: 600px) { .sellabees-popup__box { padding: 26px 20px; } }