/* =========================================================
   Sellabees Shops Core — structurele basis + header/footer componenten
   Kleuren/typografie komen uit CSS-variabelen die het child-thema
   invult (zie :root in het child). Fallbacks staan hier per var().
   ========================================================= */

:root {
	/* Fallbacks — exact dezelfde merkwaarden als main.css, zodat de huisstijl klopt
	   ongeacht de laadvolgorde (main.css blijft de single source of truth). */
	--sellabees-green:       #2d572c;
	--sellabees-green-dark:  #1f3d1e;
	--sellabees-gold:        #fcc72d;
	--sellabees-red:         #2d572c;
	--sellabees-red-dark:    #1f3d1e;
	--sellabees-yellow:      #fcc72d;
	--sellabees-ink:         #2b2b2b;
	--sellabees-black:       #1a1a1a;
	--sellabees-white:       #ffffff;
	--sellabees-text:        #666666;
	--sellabees-muted:       #999999;
	--sellabees-border:      #e5e5e5;
	--sellabees-search-bg:   #f4f4f4;
	--sellabees-placeholder: #a0a0a0;

	--sellabees-font-heading: "Cormorant Unicase", Georgia, "Times New Roman", serif;
	--sellabees-font-body:    "Open Sans", "Segoe UI", system-ui, sans-serif;
	--sellabees-font-ui:      "Montserrat", "Helvetica Neue", Arial, sans-serif;

	--sellabees-container-max: 1080px;
	--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; }

.sellabees-container {
	width: 100%;
	max-width: var(--sellabees-container-max);
	margin-inline: auto;
	padding-inline: var(--sellabees-gutter);
}
/* Brede variant (~80% van het scherm, zoals de home-grids) voor shop-/categorie-/
   merk-/productpagina's, zodat de content meegroeit i.p.v. vast op 1080. */
.sellabees-container--wide {
	max-width: 80%;
	padding-inline: 0;
}
@media (max-width: 1100px) {
	.sellabees-container--wide { max-width: 100%; padding-inline: var(--sellabees-gutter); }
}

.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
   ========================================================= */
/* De header scrollt mee (blijft bovenaan plakken). Werkt paginabreed omdat .sellabees-header
   een directe body-child is en html/body geen overflow hebben. */
.sellabees-header { position: sticky; top: 0; z-index: 500; }
/* Logo ín de topbalk: alleen op mobiel (zie @media 981px); desktop houdt het
   gecentreerde logo onder de balk (.sellabees-header__brand). */
.sellabees-header__toplogo { display: none; }
/* Zoek-icoon in de topbalk: alleen op mobiel (desktop heeft de normale zoekbalk). */
.sellabees-header__search-toggle { display: none; }
/* Winkelmandje in de topbalk: alleen op mobiel (desktop toont geen mandje, net als live). */
.sellabees-header__cart { display: none; position: relative; }
.sellabees-header__cart-count {
	position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px;
	display: flex; align-items: center; justify-content: center;
	background: var(--sellabees-green); color: #fff; border-radius: 9px;
	font-family: var(--sellabees-font-ui); font-size: 10px; font-weight: 700; line-height: 1;
}
.sellabees-header__cart-count.is-empty { display: none; }

/* Brini heeft geen verlanglijstje: de core-wishlist-hartjes (kaart + productpagina)
   verbergen. De core hangt ze via anonieme closures in, dus niet weg te halen in PHP. */
.sellabees-wish-btn { display: none !important; }

/* Prijs-btw-suffix "(inclusief € … btw)" overal verbergen (vangnet naast het PHP-filter). */
.includes_tax { display: none !important; }

/* Resultaten-teller (core loop/result-count.php rendert een volledige + een korte
   variant). De korte variant was bedoeld voor smalle schermen maar er was geen
   toggle-CSS → beide toonden ("Alle 20 resultaten20"). We tonen alleen de volledige
   Nederlandse tekst; die past op alle schermen. */
.sellabees-rc-short { display: none; }

/* ---- Groene topbalk (social links · account rechts) ---- */
.sellabees-header__top { background: var(--sellabees-green); }
.sellabees-header__top-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 38px;
}
.sellabees-header__socials {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0; padding: 0;
}
.sellabees-header__socials a {
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.sellabees-header__socials svg { width: 18px; height: 18px; display: block; }
.sellabees-header__socials a:hover { opacity: .8; }

/* ---- Gecentreerd logo boven het menu ---- */
.sellabees-header__brand {
	background: #fff;
	text-align: center;
	padding: 20px 0 8px;
}
.sellabees-header__logo { display: inline-block; line-height: 0; }
.sellabees-header__logo img {
	width: auto;
	height: 56px;
	display: block;
}
.sellabees-header__account {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-family: var(--sellabees-font-ui);
	font-size: 13px;
}
.sellabees-header__account:hover { opacity: .85; }

/* ---- Actie-/announcement-balk (doorlopende, oneindige marquee) ---- */
.sellabees-promo { background: var(--sellabees-green); overflow: hidden; }
.sellabees-promo__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	min-height: 58px;
	will-change: transform;
	animation: sellabees-marquee 30s linear infinite;
}
.sellabees-promo:hover .sellabees-promo__track { animation-play-state: paused; }
.sellabees-promo__half {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}
.sellabees-promo__item,
.sellabees-promo__sep {
	display: flex;
	align-items: center;
	color: #fff;
	font-family: var(--sellabees-font-body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .02em;
	white-space: nowrap;
}
.sellabees-promo__item { padding: 0 18px; }
.sellabees-promo__sep { color: rgba(255, 255, 255, .55); }
@keyframes sellabees-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.sellabees-promo__track { animation: none; }
}

/* =========================================================
   SCROLL-REVEAL (fade-up) — getriggerd door initReveal() in theme.js
   (.is-revealed wordt toegevoegd zodra het element in beeld komt).
   Alleen actief mét JS (.sellabees-js), zodat content zonder JS zichtbaar blijft.
   ========================================================= */
.sellabees-js .sellabees-reveal:not(.sellabees-reveal--group) {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
.sellabees-js .sellabees-reveal:not(.sellabees-reveal--group).is-revealed {
	opacity: 1;
	transform: none;
}
/* Groep: de kinderen komen gestaggerd binnen */
.sellabees-js .sellabees-reveal--group > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
.sellabees-js .sellabees-reveal--group.is-revealed > * { opacity: 1; transform: none; }
.sellabees-js .sellabees-reveal--group.is-revealed > *:nth-child(2) { transition-delay: .06s; }
.sellabees-js .sellabees-reveal--group.is-revealed > *:nth-child(3) { transition-delay: .12s; }
.sellabees-js .sellabees-reveal--group.is-revealed > *:nth-child(4) { transition-delay: .18s; }
.sellabees-js .sellabees-reveal--group.is-revealed > *:nth-child(5) { transition-delay: .24s; }
.sellabees-js .sellabees-reveal--group.is-revealed > *:nth-child(6) { transition-delay: .30s; }
.sellabees-js .sellabees-reveal--group.is-revealed > *:nth-child(7) { transition-delay: .36s; }
.sellabees-js .sellabees-reveal--group.is-revealed > *:nth-child(8) { transition-delay: .42s; }
@media (prefers-reduced-motion: reduce) {
	.sellabees-js .sellabees-reveal,
	.sellabees-js .sellabees-reveal--group > * {
		opacity: 1 !important; transform: none !important; transition: none !important;
	}
}

/* ---- Witte menubalk ---- */
.sellabees-nav { background: #fff; }
.sellabees-nav__inner {
	display: flex;
	align-items: center;
	justify-content: center;   /* menu + zoek gecentreerd onder het logo */
	min-height: 52px;
	gap: 4px;
}
.sellabees-nav__menu {
	list-style: none;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	margin: 0; padding: 0;
}
.sellabees-nav__menu li { position: relative; }
.sellabees-nav__menu > li > a {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #000;
	font-family: var(--sellabees-font-ui);
	font-weight: 500;
	text-transform: uppercase;
	font-size: 13px;
	padding: 15px 9px;
	white-space: nowrap;
}
.sellabees-nav__menu > li > a:hover { color: var(--sellabees-green); }
/* caret op items met submenu */
.sellabees-nav__menu > li.menu-item-has-children > a::after {
	content: "";
	width: 6px; height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	display: inline-block;
}
.sellabees-nav__search {
	margin-left: 10px;
	background: none; border: 0; padding: 6px;
	color: #000; cursor: pointer;
	display: flex; align-items: center;
}
.sellabees-nav__search:hover { color: var(--sellabees-green); }

/* ---- 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;
	/* Boven de WooCommerce-gallery-zoomtrigger (z-index 99): de header heeft op
	   desktop geen eigen stacking-context (position:relative; z-index:auto), dus
	   het dropdown concurreert direct met de pagina-inhoud in de root. Hoger dan
	   99, maar onder de modals (side-cart 9100, zoek-overlay). */
	z-index: 200;
}
.sellabees-nav__menu li:hover > .sub-menu { display: block; }
/* derde niveau klapt zijwaarts uit */
.sellabees-nav__menu .sub-menu .sub-menu { top: 0; left: 100%; }
.sellabees-nav__menu .sub-menu li { display: block; }
.sellabees-nav__menu .sub-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: #333;
	font-family: var(--sellabees-font-ui);
	text-transform: none;
	font-size: 13px;
	padding: 8px 18px;
	white-space: nowrap;
}
.sellabees-nav__menu .sub-menu a:hover { background: #f4f4f4; color: var(--sellabees-green); }
.sellabees-nav__menu .sub-menu .menu-item-has-children > a::after {
	content: "›"; font-size: 16px; line-height: 1; color: #999;
}

/* ---- Mega-menu (grote submenu's, bv. Merken → kolommen-panel) ---- */
.sellabees-nav { position: relative; }
/* Mega-menu = ALLEEN desktop (horizontale nav met hover-dropdown). Op mobiel wordt
   dit submenu een gewoon drill-down-paneel; de columns/transform hieronder zouden dat
   breken (hogere specificiteit dan de mobiele paneel-regels), dus desktop-only. */
@media (min-width: 982px) {
	.sellabees-nav__menu > li.sellabees-mega { position: static; }
	.sellabees-nav__menu > li.sellabees-mega > .sub-menu {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		width: min(var(--sellabees-container-max), calc(100vw - 32px));
		max-width: none;
		columns: 5;
		column-gap: 24px;
		padding: 22px 28px;
	}
	.sellabees-nav__menu > li.sellabees-mega > .sub-menu > li {
		display: block;
		break-inside: avoid;
	}
	.sellabees-nav__menu > li.sellabees-mega > .sub-menu > li > a {
		text-transform: uppercase;
		font-size: 12px;
		padding: 6px 4px;
	}
}

/* mobiele toggle (verborgen op desktop) */
.sellabees-nav__toggle { display: none; }
/* Mobiele submenu-chevrons (door theme.js toegevoegd aan items met submenu) op
   desktop verbergen — ze worden alleen binnen het open mobiele menu getoond
   (zie .sellabees-nav.is-open .sellabees-nav__chevron in de ≤900px-blok). */
.sellabees-nav__chevron { display: none; }
/* Drill-down terug-knop: door theme.js in élk submenu geïnjecteerd → op desktop verbergen
   (daar zijn submenu's hover-dropdowns). Alleen zichtbaar in het mobiele overlay-menu. */
.sellabees-nav__back { display: none; }

/* ---- Zoek-overlay (klapt uit onder de header) ---- */
.sellabees-search-overlay {
	display: none;
	position: absolute;
	left: 0; right: 0;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
	z-index: 60;
	padding: 16px 0;
}
.sellabees-search-overlay.is-open { display: block; }
.sellabees-search-overlay__form {
	max-width: var(--sellabees-container-max);
	margin: 0 auto;
	padding: 0 var(--sellabees-gutter);
	display: flex;
	align-items: center;
	gap: 10px;
}
.sellabees-search-overlay__field {
	flex: 1 1 auto;
	height: 46px;
	border: 1px solid var(--sellabees-border);
	padding: 0 16px;
	font-family: var(--sellabees-font-body);
	font-size: 15px;
}
.sellabees-search-overlay__submit,
.sellabees-search-overlay__close {
	background: none; border: 0; cursor: pointer; color: #000;
	display: flex; align-items: center;
}
.sellabees-search-overlay__close { font-size: 28px; line-height: 1; padding: 0 6px; }

/* =========================================================
   FOOTER
   ========================================================= */
/* ---- "Follow us"-blok (groene strook, gecentreerd) ---- */
.sellabees-footer__follow {
	background: rgba(45, 87, 44, 0.76);   /* live: groen 76% over wit */
}
.sellabees-footer__follow-inner {
	text-align: center;
	padding-block: 40px 32px;
}
.sellabees-footer__follow-heading {
	font-family: var(--sellabees-font-heading);
	font-weight: 600;
	font-size: 35px;
	line-height: 1.2;
	color: var(--sellabees-green);
	margin: 0 0 6px;
}
.sellabees-footer__follow-text {
	font-family: var(--sellabees-font-ui);
	font-size: 14px;
	color: #1a1a1a;
	margin: 0 0 18px;
}
.sellabees-socials {
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
}
.sellabees-social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: #242424;
	color: #fff;
	transition: background .15s ease;
}
.sellabees-social:hover { background: var(--sellabees-green-dark); }

/* ---- Hoofdfooter (zwart, twee kolommen) ---- */
.sellabees-footer__main {
	background: #000;
	color: #fff;
}
.sellabees-footer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 40px;
	padding-block: 56px 56px;
}
.sellabees-footer__heading {
	font-family: var(--sellabees-font-heading);
	font-weight: 600;
	font-size: 35px;
	line-height: 1.2;
	color: #fff;
	margin: 0 0 14px;
}
.sellabees-footer__text {
	font-family: var(--sellabees-font-ui);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 18px;
	max-width: 560px;
}
.sellabees-footer__contact-item {
	font-family: var(--sellabees-font-ui);
	font-size: 14px;
	margin: 0 0 6px;
}
.sellabees-footer__contact-item a { color: #fff; }
.sellabees-footer__contact-item a:hover { text-decoration: underline; }
.sellabees-footer__address {
	font-family: var(--sellabees-font-ui);
	font-size: 14px;
	line-height: 1.6;
	margin: 16px 0 0;
}
.sellabees-footer__links { list-style: none; margin: 0; padding: 0; }
.sellabees-footer__links li { line-height: 31px; }
.sellabees-footer__links a {
	font-family: var(--sellabees-font-ui);
	font-size: 14px;
	color: #fff;
}
.sellabees-footer__links a:hover { text-decoration: underline; }

/* ---- Onderbalk (zwart, gecentreerd) ---- */
.sellabees-footer__bottom { background: #000; color: #fff; border-top: 1px solid rgba(255,255,255,.12); }
.sellabees-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: 14px;
}
.sellabees-footer__bottom-links {
	margin: 0;
	font-family: var(--sellabees-font-ui);
	font-size: 14px;
	text-align: center;
}
.sellabees-footer__bottom-links a { color: #fff; }
.sellabees-footer__bottom-links a:hover { text-decoration: underline; }
.sellabees-footer__sep { margin: 0 10px; color: var(--sellabees-green); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* ---- Tablet (vloeiend; desktoplayout houdt aan tot 900px) ---- */
@media (max-width: 1100px) {
	.sellabees-footer__grid { grid-template-columns: 1fr 1fr; }
	/* Desktop-menu compacter zodat het tussen 982–1100px (vóór het hamburger-menu
	   bij ≤981px) binnen de breedte past en niet horizontaal overflowt. */
	.sellabees-nav__menu > li > a { padding: 15px 6px; font-size: 12px; }
	.sellabees-nav__inner { gap: 2px; }
}

/* =========================================================
   MOBIEL/TABLET (≤ 981px) — staande tablet + telefoon krijgen het
   hamburger-menu en de mobiele layout; ≥982px is desktop. (Komt overeen
   met de Divi-breakpoints van de live site: tablet ≤980, telefoon ≤767.)
   ========================================================= */
@media (max-width: 981px) {
	/* ---- Mobiele header: actiebalk bovenaan + ÉÉN compacte witte balk
	   (hamburger · gecentreerd logo · account). Alleen deze balk blijft sticky;
	   de promo + het losse logo scrollen weg → minder header, meer body. ---- */
	/* Header scrollt mee. De top-offset = -promohoogte (58px): de promo-marquee schuift
	   bij scrollen weg en alléén de witte balk (hamburger · logo · zoek · mandje · account)
	   blijft bovenaan plakken → menu blijft bereikbaar, zonder "te veel header". */
	.sellabees-header { position: sticky; top: -58px; z-index: 500; display: flex; flex-direction: column; }
	.sellabees-promo { order: -1; height: 58px; }  /* actiebalk bovenaan; vaste hoogte = de sticky-offset */
	.sellabees-header__brand { display: none; }    /* los logo weg; het staat nu in de balk */
	.sellabees-header__socials { display: none; }  /* declutter — socials staan in de footer */

	.sellabees-header__top {
		position: static; z-index: 100;   /* de sticky-parent (.sellabees-header) doet het vastzetten */
		background: #fff;
		box-shadow: 0 1px 0 rgba(0, 0, 0, .08);
	}
	.sellabees-header__top-inner {
		position: relative;
		min-height: 60px;
		gap: 0;
		flex-wrap: nowrap;
	}
	/* hamburger links (donker i.p.v. wit, want witte balk), account rechts, logo gecentreerd */
	.sellabees-header__top-inner .sellabees-nav__toggle { color: #231f20; margin-right: auto; }
	.sellabees-header__account { color: #231f20; margin-left: 16px; }
	.sellabees-header__account span { display: none; }   /* alleen het icoon op mobiel */
	/* Rechter icoongroep: zoek · mandje · account (margin-left:auto duwt de groep naar rechts). */
	.sellabees-header__search-toggle {
		display: inline-flex; align-items: center; justify-content: center;
		margin-left: auto; padding: 0; background: none; border: 0;
		color: #231f20; cursor: pointer; line-height: 0;
	}
	.sellabees-header__cart {
		display: inline-flex; align-items: center; justify-content: center;
		margin-left: 16px; color: #231f20; line-height: 0;
	}
	/* Zoeken zit nu in de balk → de zoekknop ín de menu-overlay verbergen op mobiel. */
	.sellabees-nav__search { display: none; }
	.sellabees-header__toplogo {
		display: block;
		position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
		line-height: 0;
	}
	.sellabees-header__toplogo img { height: 34px; width: auto; display: block; }

	/* 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; }

	.sellabees-header__actions { margin-left: 18px; gap: 20px; }

	/* ---- 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,
	body.sellabees-search-open { overflow: hidden; }

	/* ---- Zoek-overlay: fullscreen wit vanaf top:0; de witte menubalk wordt (net als bij
	   het hamburgermenu) op top:0 gepind en het zoekveld begint direct daaronder. ---- */
	body.sellabees-search-open { overflow: hidden; }
	body.sellabees-search-open .sellabees-header__top { position: fixed; top: 0; left: 0; right: 0; }
	.sellabees-search-overlay {
		display: block;
		position: fixed;
		left: 0; right: 0; top: 0; bottom: 0;
		z-index: 96;
		background: #fff;
		padding: 0 24px;
		clip-path: inset(0 0 100% 0);
		visibility: hidden;
		transition: clip-path .34s cubic-bezier(.22,1,.36,1), visibility 0s linear .34s;
	}
	.sellabees-search-overlay.is-open {
		clip-path: inset(0 0 0 0);
		visibility: visible;
		transition: clip-path .34s cubic-bezier(.22,1,.36,1);
	}
	.sellabees-search-overlay__form {
		display: flex; align-items: center; gap: 8px;
		margin-top: 76px;   /* direct onder de gepinde menubalk (logo + iconen) */
		border-bottom: 2px solid var(--sellabees-black);
	}
	.sellabees-search-overlay__close {
		position: static; flex: 0 0 auto;   /* in de zoekrij i.p.v. los in een gat erboven */
		background: none; border: 0; padding: 6px; margin-left: 2px;
		font-size: 26px; color: var(--sellabees-black); cursor: pointer; line-height: 0;
	}
	.sellabees-search-overlay__field {
		flex: 1 1 auto; min-width: 0;
		border: 0; background: none; outline: none;
		font-family: var(--sellabees-font-body);
		font-size: 20px; color: var(--sellabees-text);
		padding: 14px 0;
	}
	.sellabees-search-overlay__field::placeholder { color: var(--sellabees-placeholder); }
	.sellabees-search-overlay__submit {
		flex: 0 0 auto;
		background: none; border: 0; padding: 8px;
		color: var(--sellabees-black); cursor: pointer; line-height: 0;
	}

	/* Menu open: pin de header-balk (logo + X) op top:0, zodat de fullscreen-overlay
	   er netjes onder begint ongeacht de scrollpositie. */
	body.sellabees-menu-open .sellabees-header__top { position: fixed; top: 0; left: 0; right: 0; }

	/* ---- Menu-overlay — fullscreen, groeit van boven naar onder open ---- */
	.sellabees-nav {
		position: fixed;
		left: 0; right: 0; top: 0; bottom: 0;   /* fullscreen overlay (zoals de core/prittywoman) */
		z-index: 95;
		background: var(--sellabees-red);
		overflow-x: hidden;   /* nooit horizontaal scrollen (overflow-y:auto maakte overflow-x impliciet auto) */
		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);
	}
	/* Stage voor de drill-down-panelen: exact schermhoog, klapt horizontaal weg. */
	.sellabees-nav.is-open .sellabees-nav__inner {
		display: block;
		position: relative;
		height: 100%;
		max-width: none;
		padding: 0;
		overflow: hidden;
	}

	/* Elk niveau (hoofdmenu + submenu's) is een paneel: absoluut, schermvullend, eigen
	   verticale scroll, met ruimte bovenaan voor de vaste header-balk (logo + X). */
	.sellabees-nav.is-open .sellabees-nav__menu,
	.sellabees-nav.is-open .sub-menu {
		position: absolute;
		inset: 0;
		width: 100%;
		margin: 0;
		padding: 76px 0 30px;
		list-style: none;
		overflow-x: hidden;   /* panelen scrollen alleen verticaal, nooit horizontaal */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: var(--sellabees-red);
	}
	/* Hoofdmenu = basisniveau (altijd zichtbaar, onderop de stapel). */
	.sellabees-nav.is-open .sellabees-nav__menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		z-index: 1;
	}
	/* Submenu's schuiven van rechts in over het huidige niveau. */
	.sellabees-nav.is-open .sub-menu {
		display: block;
		z-index: 2;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .3s cubic-bezier(.22,1,.36,1), visibility 0s linear .3s;
	}
	.sellabees-nav.is-open .sub-menu.is-panel-open {
		transform: translateX(0);
		visibility: visible;
		transition: transform .3s cubic-bezier(.22,1,.36,1);
	}

	.sellabees-nav.is-open .sellabees-nav__menu li,
	.sellabees-nav.is-open .sub-menu li { display: block; position: static; }
	.sellabees-nav.is-open .sellabees-nav__menu > li > a,
	.sellabees-nav.is-open .sub-menu > li > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;
		font-family: var(--sellabees-font-ui);
		font-size: 20px;
		font-weight: 400;
		text-transform: uppercase;
		padding: 13px 22px 13px 49px;
	}
	.sellabees-nav.is-open .sellabees-nav__menu > li > a:hover,
	.sellabees-nav.is-open .sub-menu > li > a:hover { color: #fff; background: none; }
	.sellabees-nav.is-open .sellabees-nav__menu > li > a::after,
	.sellabees-nav.is-open .sub-menu > li > a::after { display: none; }

	/* ">"-pijl naast categorieën met een subniveau (opent het paneel; tekst navigeert). */
	.sellabees-nav__chevron {
		display: none;
		flex: 0 0 auto;
		background: none; border: 0;
		padding: 12px 22px; margin: -12px -22px -12px 0;
		color: #fff; cursor: pointer; line-height: 0;
	}
	.sellabees-nav.is-open .sellabees-nav__chevron { display: inline-flex; }

	/* "Terug"-knop bovenaan een paneel → één niveau omhoog (met de naam van dit niveau). */
	.sellabees-nav__back {
		display: flex; align-items: center; gap: 10px;
		width: 100%; background: none; border: 0; cursor: pointer;
		color: #fff; text-align: left; opacity: .85;
		font-family: var(--sellabees-font-ui); font-size: 13px; font-weight: 600;
		text-transform: uppercase; letter-spacing: .05em;
		padding: 2px 49px 14px; margin: 0 0 6px;
		border-bottom: 1px solid rgba(255, 255, 255, .2);
	}
	.sellabees-nav__back:hover { opacity: 1; }
	.sellabees-nav__back svg { flex: 0 0 auto; }

	/* rechter-navgroep (Over Brini/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: kolommen onder elkaar op mobiel ---- */
	.sellabees-footer__grid {
		grid-template-columns: 1fr;
		gap: 30px;
		padding-block: 36px;
	}
	.sellabees-footer__follow-inner { padding-block: 30px 24px; }
}

/* =========================================================
   FILTERMENU  (core-component sellabees_render_filter() — child stylet de markup)
   ========================================================= */
.sellabees-filter { width: 100%; font-family: var(--sellabees-font-body); }
.sellabees-filter__form { margin: 0; }

/* Facet-groep (Merken / Prijs / Maat). Kop met onderlijn als scheiding (zoals de
   referentie prittywoman), in Brini-stijl: Cormorant-kop + groene accent. */
.sellabees-filter__group { margin-bottom: 26px; }
.sellabees-filter__title {
	font-family: var(--sellabees-font-heading);
	font-size: 18px;
	font-weight: 600;
	color: var(--sellabees-ink, #2b2b2b);
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--sellabees-border, #e3e3e3);
}

/* Checkbox-lijsten (Merken, Maat) — alle opties onder elkaar, geen interne scroll. */
.sellabees-filter__list { list-style: none; margin: 0; padding: 0; }
.sellabees-filter__list.is-scrollable { max-height: none; overflow: visible; padding-right: 0; }

/* "Laad meer / Laad minder" (theme.js initFilterLoadMore): ingeklapt = eerste 8 opties;
   uitgeklapt = alles in een scroll-box zodat de pagina niet uitrekt. */
.sellabees-filter__list--collapsible.is-collapsed > li:nth-child(n+9) { display: none; }
.sellabees-filter__list--collapsible.is-expanded {
	max-height: 264px; overflow-y: auto; padding-right: 6px;
	overscroll-behavior: contain;
}
.sellabees-filter__more {
	display: inline-flex; align-items: center; gap: 6px;
	background: none; border: 0; padding: 8px 0 0; margin: 2px 0 0; cursor: pointer;
	font-family: var(--sellabees-font-ui); font-size: 13px; font-weight: 600;
	color: var(--sellabees-green, #2d572c); text-decoration: underline; text-underline-offset: 2px;
}
.sellabees-filter__more:hover { color: var(--sellabees-green-dark, #1f3d1e); }
.sellabees-filter__check {
	display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer;
	font-family: var(--sellabees-font-body); font-size: 14px; color: var(--sellabees-text, #231f20);
}
.sellabees-filter__check input {
	flex: 0 0 auto; width: 16px; height: 16px;
	accent-color: var(--sellabees-green, #2d572c); margin: 0;
}

/* Prijs — dual-range slider (core-component .sellabees-price; core-JS zet fill + labels).
   Structuur 1:1 met de referentie (prittywoman), groene fill/thumbs. Touch-proof:
   track vangt geen touch (pointer-events:none), alleen de thumbs; touch-action:pan-y
   laat een verticale scroll-gebaar door. */
.sellabees-price { position: relative; padding: 8px 8px 4px; }
.sellabees-price__track { position: relative; height: 4px; background: #ddd; border-radius: 2px; }
.sellabees-price__fill { position: absolute; height: 100%; background: var(--sellabees-green, #2d572c); border-radius: 2px; }
.sellabees-price__range {
	position: absolute; left: 0; top: -3px; width: 100%; height: 16px; margin: 0;
	background: none; pointer-events: none; touch-action: pan-y;
	-webkit-appearance: none; appearance: none;
}
.sellabees-price__range::-webkit-slider-runnable-track { background: transparent; height: 4px; }
.sellabees-price__range::-moz-range-track { background: transparent; height: 4px; }
.sellabees-price__range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; pointer-events: auto; touch-action: none;
	width: 16px; height: 16px; border-radius: 50%; background: #fff;
	border: 2px solid var(--sellabees-green, #2d572c); cursor: pointer; margin-top: -1px;
}
.sellabees-price__range::-moz-range-thumb {
	pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff;
	border: 2px solid var(--sellabees-green, #2d572c); cursor: pointer;
}
.sellabees-price__labels { display: flex; justify-content: space-between; margin-top: 14px; font-size: 14px; color: var(--sellabees-text, #231f20); }

/* Acties (Wissen-link + noscript-fallbackknop; maat/merk/prijs passen auto toe via JS) */
.sellabees-filter__actions { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.sellabees-filter__apply {
	border: 0; background: var(--sellabees-green, #2d572c); color: #fff;
	font-family: var(--sellabees-font-ui); font-weight: 600;
	padding: 10px 22px; border-radius: 4px; cursor: pointer;
}
.sellabees-filter__apply:hover { background: var(--sellabees-green-dark, #234524); }
.sellabees-filter__reset {
	font-family: var(--sellabees-font-ui); font-size: 13px;
	color: var(--sellabees-text, #231f20);
	text-decoration: underline; text-underline-offset: 2px;
}
.sellabees-filter__reset:hover { color: var(--sellabees-green, #2d572c); }

/* "Toepassen"-knop: alleen in de mobiele drawer (desktop past auto toe). */
.sellabees-filter-apply { display: none; }

/* =========================================================
   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; }
/* Volgt er ná het grid GEEN volle-breedte band (geen reviews/trust-sectie én geen
   SEO-tekst voor deze categorie), dan is de grid-container het laatste blok en
   plakt het productgrid tegen de footer. Alleen in dat geval ruimte eronder —
   volgt er wél een band, dan sluit die bewust strak op de footer aan (zie
   padding-block: 0 hierboven). Spiegelt de margin-top van .sellabees-shop__layout. */
.sellabees-shop > .sellabees-container:last-child { padding-bottom: 50px; }
@media (max-width: 981px) {
	/* Mobiel heeft de layout zelf al margin-bottom: 26px (zie het 981px-blok). */
	.sellabees-shop > .sellabees-container:last-child { padding-bottom: 24px; }
}
/* Grijze header-banner (ontwerp 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; }
.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-heading); 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: 260px 1fr; gap: 40px; align-items: start; margin-top: 50px; }
.sellabees-shop__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
/* Beide items marge-loos, anders schuift de WC-default (margin:0 0 1em) op de
   ordering-form de dropdown omhoog t.o.v. de resultaten-teller (align-items:center). */
.sellabees-shop__toolbar .woocommerce-result-count,
.sellabees-shop__toolbar .woocommerce-ordering { margin: 0; }
/* Sorteer-dropdown — ontwerp 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;
	min-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 — ontwerp 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; }
/* Productgrid + kaart-styling: zie sectie PRODUCTKAART hieronder. */

@media (max-width: 1000px) {
	.sellabees-shop__layout { grid-template-columns: 1fr; }
	.sellabees-shop__content ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.sellabees-shop__content ul.products { grid-template-columns: 1fr; }
}

/* =========================================================
   PRODUCTKAART  (exacte waarden uit ontwerp)
   ========================================================= */
.sellabees-shop__content ul.products {
	display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 24px;
	list-style: none; margin: 0; padding: 0;
}
/* AJAX-filter: producten dimmen zolang de nieuwe set wordt opgehaald (geen paginaherlaad). */
.sellabees-shop__content.is-loading { position: relative; }
.sellabees-shop__content.is-loading ul.products { opacity: .45; pointer-events: none; transition: opacity .15s ease; }
.sellabees-shop__content.is-loading::after {
	content: ""; position: absolute; top: 90px; left: 50%; width: 34px; height: 34px; margin-left: -17px;
	border: 3px solid var(--sellabees-border); border-top-color: var(--sellabees-green);
	border-radius: 50%; animation: sellabees-spin .7s linear infinite; z-index: 5;
}
@keyframes sellabees-spin { to { transform: rotate(360deg); } }
/* 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;
	/* min-width:0 is essentieel. Een grid-item heeft standaard min-width:min-content, en
	   de kaartafbeelding (width/height:100% binnen de aspect-ratio-container) levert een
	   enorme min-content-breedte → de 1fr-kolommen blazen op (eerste kaart ~3000px, de
	   rest platgedrukt tot ~90px) en de pagina scrollt horizontaal. */
	min-width: 0;
}
.sellabees-card {
	background: #f5f5f5;
	border-radius: 0;   /* ontwerp: 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 (ontwerp: 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: #00000000;
	border-radius: 0;
	overflow: hidden;
	position: relative;
}
/* Hogere specificiteit dan WooCommerce' default (.woocommerce ul.products li.product a img
   { height:auto }), zodat het kaartbeeld de vaste kaart-verhouding vult i.p.v. auto-hoogte. */
.sellabees-card__image img,
.woocommerce ul.products li.product a.sellabees-card__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	margin: 0;
	box-shadow: none;
}
.sellabees-card__badge {
	position: absolute; top: 8px; left: 8px; z-index: 1;
	background: var(--sellabees-red); color: #fff;
	font-family: var(--sellabees-font-heading); text-transform: uppercase;
	font-size: 14px; padding: 2px 8px; border-radius: 0;   /* ontwerp 482:8019 (Impact 14px wit uppercase) */
}
.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; }
.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;   /* ontwerp: vierkante knop */
}
.sellabees-card__cart:hover { background: var(--sellabees-red-dark); }
.sellabees-card__cart.loading { opacity: .6; }

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

/* =========================================================
   TABLET/MOBIEL — CATEGORIE-/ARCHIEF (≤981px staande tablet t/m telefoon).
   Eigen @media-blok (NIET het header/menu-blok aanraken).
   Banner + volle-breedte Filter-knop (drawer) + responsive productgrid
   (3 koloms tablet, 2 koloms mobiel ≤768). Komt ná de basis-grid → wint.
   ========================================================= */
@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 wrappen (136/147×45, naast elkaar, derde eronder) */
	.sellabees-shop__subcats { gap: 11px; }
	.sellabees-shop__subcat {
		min-width: 0; height: 45px; padding: 0 14px;
		font-size: 13px; flex: 0 0 auto;
	}

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

	/* ---- Volle-breedte "Filter"-knop (483:28421, 295×45 grijs) ---- */
	.sellabees-filter-toggle {
		display: flex; align-items: center; justify-content: center; gap: 10px;
		width: 100%; height: 45px; margin: 0 0 16px;
		background: var(--sellabees-search-bg, #ebebeb);
		border: 0; cursor: pointer;
		font-family: var(--sellabees-font-heading); text-transform: uppercase;
		font-size: 16px; color: #231f20;
	}
	.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);
		/* Boven de sticky header (z-index 100) en al het andere: de drawer is een
		   volledig scherm-overlay, net als de side-cart (modal-laag 9100+). */
		z-index: 9300;
		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: 9200;
		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;
	}

	/* "Toepassen"-knop onder in de drawer: past alle keuzes in één keer toe
	   (op mobiel wordt auto-submit per wijziging geblokkeerd, zie theme.js). */
	.sellabees-filter-apply {
		display: block;
		width: 100%;
		margin-top: 8px;
		background: var(--sellabees-green, #2d572c);
		color: #fff;
		border: 0;
		padding: 14px;
		font-family: var(--sellabees-font-ui);
		font-weight: 600;
		text-transform: uppercase;
		font-size: 14px;
		letter-spacing: .03em;
		cursor: pointer;
	}

	.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: 2 compacte kolommen (143px, gap ~9) — ALLEEN het
	   archief-grid (NIET de home-sliders, die zijn .sellabees-slider__track). ---- */
	.sellabees-shop__content ul.products:not(.sellabees-slider__track) {
		grid-template-columns: repeat(3, 1fr) !important;   /* staande tablet: 3 koloms */
		gap: 16px;
	}
	.sellabees-shop__content ul.products:not(.sellabees-slider__track) li.product { padding: 12px 10px 12px !important; }
	.sellabees-shop__content ul.products:not(.sellabees-slider__track) .sellabees-card__title { font-size: 14px; margin-top: 12px; }
	.sellabees-shop__content ul.products:not(.sellabees-slider__track) .sellabees-card__delivery { font-size: 9px; margin-top: 8px; }
	.sellabees-shop__content ul.products:not(.sellabees-slider__track) .sellabees-card__footer { padding-top: 10px; }
	.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__price del { font-size: 11px; }
	.sellabees-shop__content ul.products:not(.sellabees-slider__track) .sellabees-card__cart { width: 25px; height: 18px; }
	.sellabees-shop__content ul.products:not(.sellabees-slider__track) .sellabees-card__cart svg { width: 9px; height: 9px; }
}

/* =========================================================
   Aantal-stepper (.sellabees-qty) — − / waarde / + in een
   omlijnd vakje. Gebruikt op winkelwagen + productpagina
   (markup uit woocommerce/global/quantity-input.php).
   ========================================================= */
.sellabees-qty {
	display: inline-flex;
	align-items: stretch;
	height: 35px;
	border: 1px solid #d9d9d9;   /* ontwerp 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-meldingen in Brini-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;
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
	left: 16px;
	top: 14px;
	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;
}

/* =========================================================
   "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 (Brini-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;
}

/* =========================================================
   ZWEVENDE WINKELWAGEN-KNOP + ZIJBALK (core-feature, hier gestyled)
   ========================================================= */
.sellabees-cart-fab {
	position: fixed;
	right: 18px;
	bottom: 16px;
	z-index: 9000;
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 50%;
	background: var(--sellabees-gold, #fcc72d);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	transition: transform .18s ease, box-shadow .18s ease;
}
.sellabees-cart-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .28); }
.sellabees-cart-fab__icon { display: block; }
.sellabees-cart-fab__count {
	position: absolute;
	top: -6px; right: -6px;
	min-width: 22px; height: 22px;
	padding: 0 5px;
	border-radius: 11px;
	background: var(--sellabees-green, #2d572c);
	color: #fff;
	font-family: var(--sellabees-font-ui, sans-serif);
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
	box-shadow: 0 0 0 2px #fff;
}
.sellabees-cart-fab__count.is-empty { display: none; }

/* ---- Zijbalk ---- */
.sellabees-side-cart { position: fixed; inset: 0; z-index: 9100; visibility: hidden; }
.sellabees-side-cart__overlay {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity .3s ease;
}
.sellabees-side-cart__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 350px; max-width: 90vw;
	background: #fff;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .32s cubic-bezier(.22, 1, .36, 1);
	box-shadow: -8px 0 30px rgba(0, 0, 0, .18);
}
.sellabees-side-cart__panel:focus { outline: none; }
.sellabees-side-cart.is-open { visibility: visible; }
.sellabees-side-cart.is-open .sellabees-side-cart__overlay { opacity: 1; }
.sellabees-side-cart.is-open .sellabees-side-cart__panel { transform: translateX(0); }
body.sellabees-side-cart-open { overflow: hidden; }

.sellabees-side-cart__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--sellabees-border, #e5e5e5);
}
.sellabees-side-cart__head-bag { position: relative; display: inline-flex; color: var(--sellabees-ink, #1a1a1a); flex: 0 0 auto; }
.sellabees-side-cart__head-icon { display: block; width: 26px; height: 26px; }
.sellabees-side-cart__count {
	position: absolute; top: 52%; left: 0; right: 0;
	transform: translateY(-50%);
	font-family: var(--sellabees-font-ui, sans-serif); font-size: 9px; font-weight: 700;
	line-height: 1; text-align: center; color: var(--sellabees-ink, #1a1a1a);
}
.sellabees-side-cart__title {
	flex: 1 1 auto;
	font-family: var(--sellabees-font-heading, serif);
	font-weight: 600;
	font-size: 24px;
	color: var(--sellabees-ink, #1a1a1a);
}
.sellabees-side-cart__close {
	background: none; border: 0; cursor: pointer;
	font-size: 28px; line-height: 1; color: var(--sellabees-ink, #2b2b2b);
}
.sellabees-side-cart__body { flex: 1 1 auto; overflow-y: auto; }
.sellabees-side-cart__items {
	padding: 18px 22px;
	font-family: var(--sellabees-font-body, sans-serif);
}
/* "Ga door met winkelen" (gouden knop, zoals live) */
.sellabees-side-cart__continue {
	display: block;
	width: calc(100% - 44px);
	margin: 0 22px 18px;
	padding: 14px 18px;
	border: 0;
	cursor: pointer;
	background: var(--sellabees-gold, #fcc72d);
	color: #1a1a1a;
	font-family: var(--sellabees-font-ui, sans-serif);
	font-weight: 600;
	font-size: 14px;
	text-transform: none;   /* live: "Ga door met winkelen", geen hoofdletters */
	letter-spacing: normal;
	text-align: center;
}
.sellabees-side-cart__continue:hover { filter: brightness(.96); }
/* Aanbevelingen */
.sellabees-side-cart__recos { background: var(--sellabees-search-bg, #f4f4f4); padding: 16px 22px 22px; }
.sellabees-side-cart__recos-title {
	font-family: var(--sellabees-font-heading, serif);
	font-weight: 600; font-size: 17px; color: var(--sellabees-ink, #2b2b2b); margin: 0 0 12px;
}
.sellabees-side-cart__recos-list { list-style: none; margin: 0; padding: 0; }
.sellabees-side-cart__reco { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, .07); }
.sellabees-side-cart__reco-thumb { flex: 0 0 56px; }
.sellabees-side-cart__reco-thumb img { width: 56px; height: 70px; object-fit: cover; display: block; }
.sellabees-side-cart__reco-info { flex: 1 1 auto; min-width: 0; }
.sellabees-side-cart__reco-name { display: block; color: var(--sellabees-ink, #2b2b2b); font-size: 13px; line-height: 1.3; }
.sellabees-side-cart__reco-price { display: block; color: var(--sellabees-green, #2d572c); font-size: 13px; font-weight: 600; margin-top: 2px; }
.sellabees-side-cart__reco-price del { color: var(--sellabees-muted, #999); font-weight: 400; }
.sellabees-side-cart__reco-add {
	flex: 0 0 auto;
	background: var(--sellabees-green, #2d572c);
	color: #fff;
	font-family: var(--sellabees-font-ui, sans-serif);
	font-size: 12px; font-weight: 600;
	padding: 8px 12px;
	white-space: nowrap;
}
.sellabees-side-cart__reco-add:hover { background: var(--sellabees-green-dark, #1f3d1e); }

/* WooCommerce mini-cart binnen de zijbalk */
.sellabees-side-cart__items .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
.sellabees-side-cart__items .woocommerce-mini-cart-item {
	position: relative;
	padding: 14px 26px 14px 0;   /* rechts ruimte voor het kruisje */
	border-bottom: 1px solid var(--sellabees-border, #e5e5e5);
}
/* product = afbeelding links + naam ernaast */
.sellabees-side-cart__items .woocommerce-mini-cart-item > a:not(.remove) {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: var(--sellabees-ink, #2b2b2b);
	font-size: 13px;
	line-height: 1.35;
	text-decoration: none;
	padding-right: 15px;   /* ruimte voor het kruisje */
}
.sellabees-side-cart__items .woocommerce-mini-cart-item > a:not(.remove) img {
	flex: 0 0 56px;
	width: 56px; height: 70px;
	object-fit: cover;
	margin: 0;
}
/* kruisje rechtsboven op de productregel */
.sellabees-side-cart__items a.remove {
	position: absolute;
	top: 12px; right: 0;
	width: auto; height: auto;
	font-size: 18px; line-height: 1;
	color: var(--sellabees-green, #2d572c) !important;
}
/* prijs/aantal rechtsonder op de productregel */
.sellabees-side-cart__items .woocommerce-mini-cart-item .quantity {
	display: block;
	margin-top: 8px;
	text-align: right;
	font-size: 13px;
	color: var(--sellabees-text, #666);
}
.sellabees-side-cart__items .woocommerce-mini-cart-item .variation {
	margin: 4px 0 0; font-size: 12px; color: var(--sellabees-muted, #999);
}
/* Subtotaal: één scheidingslijn (de item-border is al de scheiding) */
.sellabees-side-cart__items .woocommerce-mini-cart__total { display: flex; justify-content: space-between; padding: 16px 0; font-weight: 700; border-top: 0; margin-top: 4px; }
.sellabees-side-cart__items .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.sellabees-side-cart__items .woocommerce-mini-cart__buttons .button {
	display: block; text-align: center; padding: 13px 18px;
	background: var(--sellabees-green, #2d572c); color: #fff;
}
.sellabees-side-cart__items .woocommerce-mini-cart__buttons .checkout {
	background: var(--sellabees-gold, #fcc72d); color: #1a1a1a;
}
.sellabees-side-cart__items .woocommerce-mini-cart__empty-message,
.sellabees-side-cart__items p.woocommerce-mini-cart__empty-message { color: var(--sellabees-text, #666); }

/* --- Live side-cart: gratis-bezorging-balk, legen-link, totalen, actie-knoppen --- */
.sellabees-side-cart__shipbar { margin: 0 0 16px; }
.sellabees-side-cart__shipbar-text { margin: 0 0 8px; font-size: 13px; line-height: 1.4; color: var(--sellabees-ink, #2b2b2b); }
.sellabees-side-cart__shipbar-text .woocommerce-Price-amount { font-weight: 700; color: var(--sellabees-green, #2d572c); }
.sellabees-side-cart__shipbar-track { height: 8px; border-radius: 4px; background: #ececec; overflow: hidden; }
.sellabees-side-cart__shipbar-track span { display: block; height: 100%; background: var(--sellabees-gold, #fcc72d); border-radius: 4px; transition: width .4s ease; }

.sellabees-side-cart__empty { display: block; text-align: right; font-size: 12px; color: var(--sellabees-muted, #999); text-decoration: underline; margin: 0 0 12px; cursor: pointer; }
.sellabees-side-cart__empty:hover { color: var(--sellabees-green, #2d572c); }

.sellabees-side-cart__totals { margin: 14px 0 16px; padding: 14px 0 0; border-top: 1px solid var(--sellabees-border, #e5e5e5); }
.sellabees-side-cart__totals-row { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 8px; font-size: 14px; color: var(--sellabees-text, #666); }
.sellabees-side-cart__totals-row span:first-child { font-weight: 600; color: var(--sellabees-ink, #2b2b2b); }
.sellabees-side-cart__totals-grand { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sellabees-border, #e5e5e5); font-size: 16px; }
.sellabees-side-cart__totals-grand span { font-weight: 700; color: var(--sellabees-ink, #1a1a1a); }

.sellabees-side-cart__actions { display: flex; flex-direction: column; gap: 10px; }
.sellabees-side-cart__actions .sellabees-side-cart__continue,
.sellabees-side-cart__checkout {
	display: block; width: 100%; margin: 0; padding: 14px 18px; border: 0; cursor: pointer; box-sizing: border-box;
	background: var(--sellabees-gold, #fcc72d); color: #1a1a1a;
	font-family: var(--sellabees-font-ui, sans-serif); font-weight: 600; font-size: 14px;
	text-transform: none; letter-spacing: normal; text-align: center; text-decoration: none;
}
.sellabees-side-cart__actions .sellabees-side-cart__continue:hover,
.sellabees-side-cart__checkout:hover { filter: brightness(.95); color: #1a1a1a; }

/* FAB-"bump" net nadat de productfoto erin gevlogen is. */
.sellabees-cart-fab--bump { animation: sellabees-fab-bump .45s ease; }
@keyframes sellabees-fab-bump { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 100% { transform: scale(1); } }

@media (max-width: 600px) {
	.sellabees-cart-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; }
}

/* =========================================================
   Generieke slider ([data-slider]) — productsliders zoals de gerelateerde
   producten op de productpagina ("Producten die je misschien ook leuk vindt").
   Markup: [data-slider] > kop (.sellabees-slider-nav) + .sellabees-slider__viewport
   > ul.sellabees-slider__track > li.product + .sellabees-slider__dots.
   Gedrag (klonen/transform/dots) komt uit theme.js → initSliders(); deze CSS
   levert de layout (viewport clipt, track = flex-rij, vaste kaarten-per-view).
   ========================================================= */
.sellabees-slider__viewport { overflow: hidden; }

/* Track als horizontale flex-rij; WooCommerce' eigen grid/float op ul.products
   expliciet uitschakelen zodat de kaarten naast elkaar staan i.p.v. stapelen. */
ul.products.sellabees-slider__track,
.sellabees-slider__track {
	display: flex !important;
	flex-wrap: nowrap;
	gap: 24px;                       /* theme.js step() leest deze column-gap */
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: none !important;
	transition: transform .45s ease;   /* theme.js zet transition='' tijdens animeren → deze waarde wordt gebruikt */
	will-change: transform;
}
.sellabees-slider__track::before,
.sellabees-slider__track::after { content: none; display: none; }   /* WC clearfix uit */
.sellabees-slider__track > li.product,
.sellabees-slider__track > li {
	flex: 0 0 calc((100% - 3 * 24px) / 4);   /* 4 kaarten per view (desktop) */
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0;
	float: none !important;
}

/* Pijl-navigatie (rechtsboven in de koprij) — groene vierkante knoppen. */
.sellabees-slider-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.sellabees-slider-nav__btn {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 0;
	background: var(--sellabees-green);
	color: #fff;
	cursor: pointer;
	transition: background .15s ease;
}
.sellabees-slider-nav__btn:hover { background: var(--sellabees-green-dark); }
.sellabees-slider-nav__btn svg { fill: currentColor; }

/* Dots onder de slider. */
.sellabees-slider__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}
.sellabees-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .18);
	cursor: pointer;
}
.sellabees-slider__dot.is-active { background: var(--sellabees-green); }

@media (max-width: 1100px) {
	.sellabees-slider__track { gap: 18px; }
	.sellabees-slider__track > li.product,
	.sellabees-slider__track > li { flex-basis: calc((100% - 18px) / 2); }   /* 2 per view */
}
@media (max-width: 640px) {
	.sellabees-slider__track > li.product,
	.sellabees-slider__track > li { flex-basis: 100%; }                      /* 1 per view */
}

/* =========================================================
   Paginatie (archief/zoekresultaten) — on-brand i.p.v. de WooCommerce-default.
   Gescoped op .sellabees-shop__content (raakt de account-paginatie niet).
   ========================================================= */
.sellabees-shop__content .woocommerce-pagination { margin: 40px 0 8px; }
.sellabees-shop__content .woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}
.sellabees-shop__content .woocommerce-pagination ul.page-numbers li { margin: 0; border: 0; }
.sellabees-shop__content .woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	box-sizing: border-box;
	border: 1px solid var(--sellabees-border);
	background: #fff;
	font-family: var(--sellabees-font-ui);
	font-size: 14px;
	font-weight: 600;
	color: var(--sellabees-ink);
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sellabees-shop__content .woocommerce-pagination a.page-numbers:hover {
	border-color: var(--sellabees-green);
	color: var(--sellabees-green);
}
.sellabees-shop__content .woocommerce-pagination .page-numbers.current {
	background: var(--sellabees-green);
	border-color: var(--sellabees-green);
	color: #fff;
}
.sellabees-shop__content .woocommerce-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	min-width: 0;
}

/* Archiefgrid mobiel: 2 kolommen (keuze eigenaar 2026-08-04 — 3 kolommen maakte de
   kaarten en prijzen op een telefoon te klein). Staande tablet (769–981px) houdt 3
   kolommen; zie de regel bij de drawer in het 981px-blok. */
@media (max-width: 768px) {
	.sellabees-shop__content ul.products:not(.sellabees-slider__track) {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px;
	}
}

/* =========================================================
   LOGIN-POPUP  (core account-auth.php rendert de markup in wp_footer voor
   uitgelogde bezoekers; het child stylet 'm in huisstijl. Openen via de
   .sellabees-login-trigger op het account-icoon; JS zet het [hidden]-attribuut
   + body.sellabees-popup-open.)
   ========================================================= */
body.sellabees-popup-open { overflow: hidden; }
.sellabees-popup[hidden] { display: none; }
.sellabees-popup {
	position: fixed; inset: 0; z-index: 10000;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
}
.sellabees-popup__overlay { position: absolute; inset: 0; background: rgba(26, 26, 26, .55); }
.sellabees-popup__box {
	position: relative; z-index: 1;
	width: 100%; max-width: 420px;
	background: #fff; border-radius: 6px;
	padding: 34px 32px 32px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
	max-height: calc(100vh - 40px); overflow-y: auto;
}
.sellabees-popup__close {
	position: absolute; top: 8px; right: 12px;
	background: none; border: 0; cursor: pointer;
	font-size: 30px; line-height: 1; color: var(--sellabees-text, #666);
}
.sellabees-popup__close:hover { color: var(--sellabees-ink, #2b2b2b); }
.sellabees-popup__title {
	font-family: var(--sellabees-font-heading); font-weight: 600;
	font-size: 27px; color: var(--sellabees-ink, #2b2b2b); margin: 0 0 8px;
}
.sellabees-popup__text {
	font-family: var(--sellabees-font-body); font-size: 14px; line-height: 1.55;
	color: var(--sellabees-text, #666); margin: 0 0 20px;
}
.sellabees-login__field { margin: 0 0 14px; }
.sellabees-login__field label {
	display: block; margin: 0 0 6px;
	font-family: var(--sellabees-font-ui); font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .04em; color: var(--sellabees-ink, #2b2b2b);
}
.sellabees-login__field input {
	width: 100%; box-sizing: border-box;
	padding: 11px 13px; border: 1px solid var(--sellabees-border, #ddd); border-radius: 4px;
	font-family: var(--sellabees-font-body); font-size: 15px; color: var(--sellabees-ink, #2b2b2b); background: #fff;
}
.sellabees-login__field input:focus { outline: none; border-color: var(--sellabees-green, #2d572c); }
.sellabees-login__row {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin: 0 0 18px; font-family: var(--sellabees-font-body); font-size: 13px;
}
.sellabees-login__remember { display: flex; align-items: center; gap: 7px; color: var(--sellabees-text, #666); cursor: pointer; }
.sellabees-login__remember input { width: 15px; height: 15px; accent-color: var(--sellabees-green, #2d572c); }
.sellabees-login__lost { color: var(--sellabees-green, #2d572c); text-decoration: underline; white-space: nowrap; }
.sellabees-login__btn {
	width: 100%; border: 0; cursor: pointer;
	background: var(--sellabees-green, #2d572c); color: #fff;
	font-family: var(--sellabees-font-ui); font-weight: 600; font-size: 14px;
	text-transform: uppercase; letter-spacing: .04em;
	padding: 13px 20px; border-radius: 4px; transition: background .15s ease;
}
.sellabees-login__btn:hover { background: var(--sellabees-green-dark, #1f3d1e); }
.sellabees-login__btn[disabled] { opacity: .6; cursor: default; }
.sellabees-login__msg { margin-top: 12px; font-size: 13px; color: var(--sellabees-text, #666); }
.sellabees-login__msg.is-error { color: #c0392b; }
.sellabees-login__register {
	margin: 18px 0 0; text-align: center;
	font-family: var(--sellabees-font-body); font-size: 14px; color: var(--sellabees-text, #666);
}
.sellabees-login__register a { color: var(--sellabees-green, #2d572c); text-decoration: underline; }