/**
 * Textielhuis — structuur/layout (containers, header-basis, footer).
 * Bouwt voort op de tokens in main.css (var(--th-*)).
 */

/* ---- Basis ---- */
.sellabees-container {
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 24px;
	width: 100%;
}
/* Border-box t/m 1327px: onder de desktop-containerbreedte (max-width 1280 + 48px
   padding = 1328) geeft width:100% + padding-inline (content-box) anders een
   horizontale overloop van 48px op álle tablet-/mobiel-breedtes. Vanaf 1328px past
   de content-box wél binnen het scherm, dus daar blijft alles ongewijzigd. */
@media (max-width: 1327px) { .sellabees-container { box-sizing: border-box; } }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px;
	width: auto; height: auto; clip: auto;
	z-index: 1000; padding: 10px 16px;
	background: #fff; color: var(--th-text);
}

#site-main { min-height: 40vh; }

/* ---- Header ---- */
/* Header: op DESKTOP sticky (top:0) → hij staat in de flow (geen body-marge nodig)
   maar blijft bij het scrollen bovenaan plakken en klapt in (zie compact hieronder),
   zodat alleen het categoriemenu blijft staan — net als de live site. De altijd-open
   subcategorie-balk hangt absoluut onder de nav en telt dus NIET mee in de
   header-hoogte; daarom reserveert de header een padding-bottom = die subbalk-hoogte
   (theme.js zet --th-subbar-h), zodat de content er nét onder begint i.p.v. erachter te
   verdwijnen. Op MOBIEL wordt de header fixed (hamburger altijd bereikbaar) — zie de
   responsive-blokken hieronder. */
.th-header { position: sticky; top: 0; z-index: 100; background: #fff; padding-bottom: var(--th-subbar-h, 100px); transition: box-shadow .25s ease, margin-bottom .35s ease; }
/* De subbalk-hoogte verschilt per dept (1 of 2 regels subcategorieën). Wissel je van
   dept, dan verandert de reservering mee — laat 'm meelopen met de paneel-animatie
   i.p.v. springen. Pas actief nadat theme.js één keer heeft gemeten. */
body.th-header-measured .th-header { transition: box-shadow .25s ease, margin-bottom .35s ease, padding-bottom .24s cubic-bezier(.22,.61,.36,1); }
body.th-header-scrolled .th-header { box-shadow: 0 8px 22px -14px rgba(0,0,0,.28); }
/* Ingelogd: header net onder de vaste WP-adminbalk (32px desktop/tablet, 46px mobiel). */
@media (min-width: 783px) { body.admin-bar .th-header { top: 32px; } }
@media screen and (max-width: 782px) { body.admin-bar .th-header { top: 46px; } }

/* Scroll-animatie (zoals live): bij scrollen klappen de topbalk + logo/zoek-rij in,
   zodat alleen het categoriemenu bovenaan blijft. Alleen desktop (op mobiel blijft
   de logo/zoek/burger-rij zichtbaar).

   GEEN CONTENT-SPRONG: de header is sticky, dus hij houdt zijn ruimte in de flow.
   Krimpt hij, dan schuift ALLE content eronder net zoveel omhoog — precies rond de
   omslagdrempel wipt de pagina dan heen en weer ("hapering"). Daarom levert de
   header exact evenveel margin-bottom in als hij aan hoogte verliest, zodat zijn
   voetafdruk in de flow constant blijft en er niets verschuift.

   Dat werkt alleen als het inklappen en die compensatie SYNCHROON lopen. Vandaar
   max-height = de exact gemeten hoogte (--th-topbar-h/--th-mainrow-h uit theme.js)
   i.p.v. een ruime 200px: bij een te ruime max-height gebeurt er eerst niets (de
   gerenderde hoogte is dan nog de contenthoogte) en klapt hij pas laat in de
   animatie dicht — dat loopt niet gelijk met de margin en wiebelt alsnog. Dezelfde
   duur + easing (.35s ease) op beide houdt de som constant. */
@media (min-width: 982px) {
	.th-topbar { max-height: var(--th-topbar-h, 200px); }
	.th-header__main { max-height: var(--th-mainrow-h, 200px); }
	.th-topbar,
	.th-header__main { overflow: hidden; transition: max-height .35s ease, opacity .3s ease; }
	body.th-header-compact .th-topbar,
	body.th-header-compact .th-header__main { max-height: 0; opacity: 0; }
	body.th-header-compact .th-header { margin-bottom: var(--th-collapse-h, 0px); }
}

/* Topbalk met USP's */
/* Header gebruikt een bredere container dan de body (Figma: marges ~217px = 1486px). */
.th-header .sellabees-container { max-width: 1486px; }
/* De border-box-overflowfix (zie .sellabees-container hierboven) geldt maar t/m 1327px
   — genoeg voor de 1280px-body-container (1280+48=1328), maar de HEADER-container is
   1486px en overloopt met content-box + 48px padding tot 1486+48=1534px. Daardoor werd
   de winkelwagen rechts buiten beeld geduwd tussen ~1328 en ~1533px. Hier dus t/m 1533px. */
@media (max-width: 1533px) { .th-header .sellabees-container { box-sizing: border-box; } }
.th-topbar { background: var(--th-dark); color: #fff; font-size: 14px; }
.th-topbar__inner { display: flex; }
.th-usps { display: flex; gap: 40px; list-style: none; margin: 0; padding: 8px 0; }
.th-usp { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.th-usp__check { color: var(--th-gold); flex: 0 0 auto; }

/* Hoofdrij */
.th-header__main-inner { display: flex; align-items: center; gap: 28px; padding-block: 18px; }
.th-header__logo { flex: 0 0 auto; display: inline-flex; }
.th-header__logo img { height: 40px; width: auto; display: block; }
.th-header__burger { display: none; }

.th-search { flex: 1 1 auto; max-width: 520px; margin-inline: auto 0; display: flex; align-items: center; background: #ececec; border-radius: 100px; padding: 4px 6px 4px 20px; }
.th-search__input { flex: 1 1 auto; border: 0; background: transparent; font-family: var(--th-font-body); font-size: 14px; color: var(--th-text); outline: none; }
.th-search__input::placeholder { color: #868686; }
.th-search__btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: #555; cursor: pointer; }
/* Mobiel: het openende zoekveld schuift soepel in beeld (fade + slide vanaf rechts). */
@keyframes th-search-in { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { body.th-search-open .th-search { animation: none; } }

.th-header__actions { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.th-header__action { color: var(--th-text); position: relative; display: inline-flex; }
.th-header__cart .sellabees-header__cart-count {
	position: absolute; top: -6px; right: -8px;
	box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 4px;
	border-radius: 9px; background: var(--th-gold); color: #fff;
	font-size: 11px; line-height: 18px; text-align: center; font-family: var(--th-font-body);
}
.th-header__cart .sellabees-header__cart-count.is-empty { display: none; }

/* Categorie-navigatie + mega-menu */
.th-nav { position: relative; border-top: 1px solid #eee; }
.th-nav__list { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.th-nav__item { position: static; }
.th-nav__item + .th-nav__item .th-nav__link::before {
	content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 1px; height: 16px; background: #d9d9d9;
}
.th-nav__link { position: relative; display: block; padding: 14px 22px; font-size: 16px; color: var(--th-text); text-decoration: none; font-family: var(--th-font-body); }
/* "Vet" bij actief/hover zonder reflow: font-weight verandert de tekstbreedte →
   naastliggende items springen. text-shadow verdikt de glyphs zónder de breedte
   te wijzigen, dus geen layout-shift. */
.th-nav__item.is-active > .th-nav__link,
.th-nav__item:hover > .th-nav__link { text-shadow: .35px 0 0 currentColor, -.35px 0 0 currentColor; }

.th-nav__panel { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #f5f5f5; z-index: 20; box-shadow: 0 8px 12px -8px rgba(0,0,0,.18); }
.th-nav__panel-inner { padding: 0; }
.th-nav__sublist { display: flex; flex-wrap: wrap; gap: 6px 28px; list-style: none; margin: 0; padding: 14px 0; }
.th-nav__sublist a { font-size: 16px; color: var(--th-text); text-decoration: none; }
.th-nav__sublist a:hover { color: var(--th-gold); }
.th-nav__item.is-active.has-panel > .th-nav__panel { display: block; }
.th-nav__item.has-panel:hover > .th-nav__panel { display: block; z-index: 21; }
.th-nav__list:has(.th-nav__item.has-panel:hover) .th-nav__item.is-active:not(:hover) > .th-nav__panel { display: none; }

/* Mega-menu via wp_nav_menu (wanneer een 'primary'-menu is toegewezen) */
.th-nav__list > .menu-item { position: static; }
.th-nav__list > .menu-item > a { position: relative; display: block; padding: 14px 22px; font-size: 16px; color: var(--th-text); text-decoration: none; font-family: var(--th-font-body); }
.th-nav__list > .menu-item + .menu-item > a::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 16px; background: #d9d9d9; }
/* De geselecteerde/open dept vetgedrukt. Mét JS = het geopende paneel
   (.th-panel-open, loopt mee met de selectie); zónder JS = het eerste item
   (rust-stand). Hover altijd vet voor directe feedback. */
.th-nav__list:not(.th-nav-js) > .menu-item:first-child > a,
.th-nav__list.th-nav-js > .menu-item.th-panel-open > a,
.th-nav__list > .menu-item:hover > a { text-shadow: .35px 0 0 currentColor, -.35px 0 0 currentColor; }
/* Eerste item links uitlijnen met het logo (geen link-padding ervoor). */
.th-nav__list > .menu-item:first-child > a,
.th-nav__item:first-child > .th-nav__link { padding-left: 0; }
.th-nav__list > .menu-item > .sub-menu {
	display: flex; position: absolute; left: 0; right: 0; top: 100%;
	/* Animatie: standaard verborgen (fade + lichte slide); tonen via de regels hieronder. */
	opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
	transition: opacity .22s ease, transform .24s cubic-bezier(.22,.61,.36,1), visibility 0s linear .24s;
	background: #f5f5f5; z-index: 20; box-shadow: 0 8px 12px -8px rgba(0,0,0,.18);
	list-style: none; margin: 0;
	padding: 16px max(24px, calc((100% - 1486px) / 2));
	flex-wrap: wrap; gap: 4px 30px;
}
.th-nav__list > .menu-item > .sub-menu > .menu-item > a { font-size: 16px; color: var(--th-text); text-decoration: none; line-height: 2; white-space: nowrap; }
.th-nav__list > .menu-item > .sub-menu > .menu-item > a:hover { color: var(--th-gold); }
/* Zónder JS (fallback): hover + standaard-open dept, met :has om de rust-dept te
   verbergen zodra je iets anders aanraakt (oud gedrag, ongewijzigd). */
.th-nav__list:not(.th-nav-js) > .menu-item.th-nav-default-open > .sub-menu,
.th-nav__list:not(.th-nav-js) > .menu-item:hover > .sub-menu,
.th-nav__list:not(.th-nav-js) > .menu-item.th-nav-armed > .sub-menu {
	opacity: 1; visibility: visible; transform: none; pointer-events: auto; z-index: 21;
	transition: opacity .22s ease, transform .24s cubic-bezier(.22,.61,.36,1), visibility 0s;
}
.th-nav__list:not(.th-nav-js):has(> .menu-item:hover) > .menu-item.th-nav-default-open:not(:hover) > .sub-menu,
.th-nav__list:not(.th-nav-js):has(> .menu-item.th-nav-armed) > .menu-item.th-nav-default-open:not(.th-nav-armed) > .sub-menu {
	opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
	transition: opacity .22s ease, transform .24s ease, visibility 0s linear .22s;
}
/* Mét JS: precies ÉÉN dept-subbalk open tegelijk, deterministisch gestuurd via
   .th-panel-open (theme.js). Geen concurrentie tussen hover/armed/rust-dept meer,
   dus de rust-dept (Slaapkamer) springt niet telkens "ervoor". */
.th-nav__list.th-nav-js > .menu-item.th-panel-open > .sub-menu {
	opacity: 1; visibility: visible; transform: none; pointer-events: auto; z-index: 21;
	transition: opacity .22s ease, transform .24s cubic-bezier(.22,.61,.36,1), visibility 0s;
}
.th-nav__list .sub-menu .sub-menu { display: none !important; } /* echte niveau-3 menu-items niet in de balk */

/* Actieve (huidige) categorie markeren in het menu — desktop + mobiel. */
.th-nav__list > .menu-item.th-current > a,
.th-nav__list > .menu-item.th-current-ancestor > a { color: var(--th-gold); font-weight: 700; }
.th-nav__list > .menu-item > .sub-menu > .menu-item.th-current > a,
.th-nav__list > .menu-item > .sub-menu > .menu-item.th-current-ancestor > a { color: var(--th-gold); font-weight: 600; }

/* Niveau 3: filter-flyout (Maat/Merk/Kleur) onder een subcategorie — JS-gestuurd (.is-open) */
.th-nav__list > .menu-item > .sub-menu > .menu-item { position: static; }
.th-nav__filters {
	/* Animatie: verborgen (fade + slide), tonen bij .is-open (JS). */
	opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none;
	transition: opacity .2s ease, transform .24s cubic-bezier(.22,.61,.36,1), visibility 0s linear .24s;
	position: absolute; left: 0; right: 0; top: 100%;
	background: #fff; border-top: 1px solid #ececec;
	box-shadow: 0 12px 16px -12px rgba(0,0,0,.22);
	z-index: 22;
	padding: 24px max(24px, calc((100% - 1486px) / 2)) 28px;
}
.th-nav__list > .menu-item > .sub-menu > .menu-item.is-open > .th-nav__filters {
	opacity: 1; visibility: visible; transform: none; pointer-events: auto;
	transition: opacity .2s ease, transform .24s cubic-bezier(.22,.61,.36,1), visibility 0s;
}
.th-nav__filters-inner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0; }
/* Secties = kolommen (bv. Dames / Heren); scheidingslijn ertussen. Flat-modus = één sectie zonder titel. */
.th-nav__fsection { display: flex; flex-wrap: wrap; gap: 20px 56px; align-items: flex-start; }
.th-nav__fsection:not(:first-child) { border-left: 1px solid #ececec; margin-left: 48px; padding-left: 48px; }
.th-nav__fsection-title { flex-basis: 100%; margin: 0 0 14px; font-family: var(--th-font-heading); font-weight: 700; font-size: 18px; color: var(--th-text); }
.th-nav__fgroup { min-width: 120px; }
.th-nav__fhead { display: block; margin: 0 0 10px; font-family: var(--th-font-heading); font-weight: 600; font-size: 15px; color: var(--th-text); }
/* Lange lijsten (bv. 40+ maten) vullen een kolom tot ~320px en lopen dan door
   naar een volgende kolom; korte lijsten blijven één kolom. Zo staat alles in beeld. */
.th-nav__flist { list-style: none; margin: 0; padding: 0; display: flex; flex-flow: column wrap; max-height: 320px; align-content: flex-start; gap: 0 36px; }
.th-nav__flist li { break-inside: avoid; }
.th-nav__flist a { display: block; font-size: 15px; line-height: 2; color: var(--th-text); text-decoration: none; white-space: nowrap; }
.th-nav__flist a:hover { color: var(--th-gold); }
.th-nav__fswatches { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; max-width: 200px; }
.th-nav__fswatches a { display: block; }
/* background #e5e5e5 = neutrale terugval: als de inline-kleur ongeldig is (kleur
   zonder hex), negeert de browser die en blijft deze grijze bol staan i.p.v. leeg. */
.th-nav__swatch { display: block; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #ddd; background: #e5e5e5; outline: 2px solid transparent; outline-offset: 1px; transition: outline-color .15s ease; }
.th-nav__fswatches a:hover .th-nav__swatch { outline-color: var(--th-gold); }
.th-nav__fmore { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--th-gold); text-decoration: none; }
.th-nav__fmore:hover { text-decoration: underline; }

/* Social-iconen zitten in de header maar zijn alleen zichtbaar in het uitgeklapte
   mobiele overlay-menu (zie responsive). Op desktop verborgen. */
.th-nav__socials { display: none; }
/* Sluit-kruisje van het mobiele zoekveld: op desktop verborgen (zie responsive). */
.th-search-close { display: none; }
/* Mobiele accordeon-pijltjesknop: alleen in het uitgeklapte mobiele menu (responsive). */
.th-nav__acc-toggle { display: none; }

/* ---- Header responsive ---- */
@media (max-width: 981px) {
	.th-header { position: fixed; top: 0; left: 0; right: 0; padding-bottom: 0; } /* mobiel: header vast bovenaan, geen subbalk-reservering */
	body { margin-top: var(--th-header-h, 120px); }
	.th-topbar { display: none; }
	/* Compacte één-regel-header (ontwerp d-menu / d-product): klein logo links,
	   rechts zoek-icoon · account · winkelwagen · hamburger. Géén volle zoekbalk. */
	.th-header__main-inner { flex-wrap: nowrap; gap: 8px; padding-block: 12px; }
	.th-header__logo { order: 1; margin-right: auto; }
	.th-header__logo img { height: 26px; }
	.th-search { order: 2; }
	.th-header__actions { order: 3; gap: 16px; flex: 0 0 auto; }
	/* GEEN flex-gap hier: iOS Safari ondersteunt gap in flexbox pas vanaf 14.5. Op een
	   oudere iPhone vielen de drie streepjes dan op elkaar en leek de hamburger weg.
	   Marges op de streepjes doen exact hetzelfde en werken overal. */
	.th-header__burger {
		order: 4;
		display: inline-flex; flex-direction: column; justify-content: center;
		box-sizing: border-box; flex: 0 0 34px;
		width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer; padding: 7px;
		position: relative; z-index: 95;
	}
	/* De streepjes vullen de knop; zonder deze breedte zijn ze afhankelijk van stretch
	   en verdwijnen ze zodra de knop ook maar iets krimpt. */
	.th-header__burger span { width: 100%; }
	.th-header__burger span { display: block; height: 2px; background: var(--th-text); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
	.th-header__burger span + span { margin-top: 5px; }
	/* Hamburger → kruis (X) wanneer het menu open is. De spans staan center-op-center
	   7px uit elkaar (2px hoog + 5px gap), dus ±7px verplaatsen laat beide schuine
	   lijnen exact in het midden kruisen (±6px kruiste 1px ernaast → scheve X). */
	body.th-nav-open .th-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	/* Middelste streepje: naast opacity ook wegschalen én de kleur weghalen. Op iOS
	   bleven anders de twee uiteinden als stipjes naast het kruisje staan — de
	   gedraaide armen zijn horizontaal maar ~14px breed, het rechte streepje 20px,
	   dus steekt het er aan beide kanten uit zodra opacity niet aankomt. */
	body.th-nav-open .th-header__burger span:nth-child(2) { opacity: 0; transform: scaleX(0); background: transparent; }
	body.th-nav-open .th-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* Zoeken als icoon; het veld is standaard verborgen op mobiel. */
	.th-search { flex: 0 0 auto; width: auto; max-width: none; margin: 0; background: transparent; padding: 0; }
	.th-search__input { display: none; }
	.th-search__btn { flex: 0 0 30px; width: 30px; height: 30px; color: var(--th-text); }
	.th-search__btn svg { flex: 0 0 auto; }
	.th-header__action { flex: 0 0 auto; }

	/* Zoeken open (zoals Brock): het zoek-icoon vervangt de headerrij door een
	   full-width zoekveld + kruisje; logo/acties/hamburger verdwijnen tijdens zoeken. */
	body.th-search-open .th-header__logo,
	body.th-search-open .th-header__actions,
	body.th-search-open .th-header__burger { display: none; }
	body.th-search-open .th-search {
		order: 1; flex: 1 1 auto; width: auto; max-width: none; margin: 0;
		background: #ececec; border-radius: 100px; padding: 4px 6px 4px 18px;
		/* Soepel in beeld schuiven i.p.v. instant verschijnen (display kan niet animeren,
		   maar het geopende veld wel via een eenmalige keyframe: fade + slide vanaf rechts). */
		animation: th-search-in .28s cubic-bezier(.22, .61, .36, 1) both;
	}
	body.th-search-open .th-search__input { display: block; flex: 1 1 auto; }
	body.th-search-open .th-search__btn { color: #555; }
	body.th-search-open .th-search-close {
		order: 2; display: inline-flex; align-items: center; justify-content: center;
		flex: 0 0 auto; margin-left: 6px; padding: 4px;
		background: none; border: 0; color: var(--th-text); cursor: pointer;
	}

	/* Menu = volledig-scherm overlay onder de headerrij (accordeon). Altijd in de
	   DOM (niet display:none) zodat open/sluiten kan animeren: fade + slide-down. */
	.th-nav {
		display: flex; flex-direction: column;
		position: fixed; left: 0; right: 0; top: var(--th-header-h, 120px); bottom: 0;
		background: #fff; z-index: 90; overflow-y: auto;
		padding: 6px 24px 28px; border-top: 1px solid #eee;
		opacity: 0; visibility: hidden; transform: translateY(-12px); pointer-events: none;
		transition: opacity .28s ease, transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s linear .34s;
	}
	body.th-nav-open .th-nav {
		opacity: 1; visibility: visible; transform: none; pointer-events: auto;
		transition: opacity .28s ease, transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s;
	}
	body.th-nav-open { overflow: hidden; }
	.th-nav > .sellabees-container { max-width: none; width: 100%; padding-inline: 0; }

	.th-nav__list { flex-direction: column; width: 100%; }
	/* Rij = label (navigeert) + pijltjes-knop (klapt uit/in); de sub-menu wrapt
	   eronder op een volle regel. */
	.th-nav__list > .menu-item { position: static; border-bottom: 1px solid #ededed; display: flex; flex-wrap: wrap; align-items: center; }
	.th-nav__list > .menu-item > a {
		display: flex; align-items: center; flex: 1 1 auto; min-width: 0;
		padding: 16px 2px; font-size: 17px; font-weight: 600; color: var(--th-text); border: 0;
	}
	.th-nav__list > .menu-item + .menu-item > a::before { display: none; }
	/* Chevron staat op de aparte knop (niet meer op het label), zodat in-/uitklappen
	   een eigen, betrouwbaar tik-doel heeft en niet doorlekt naar de categoriepagina. */
	.th-nav__list > .menu-item.menu-item-has-children > a::after { display: none; }
	.th-nav__acc-toggle {
		display: flex; align-items: center; justify-content: center;
		flex: 0 0 auto; width: 52px; align-self: stretch;
		margin: 0; padding: 0; background: none; border: 0; cursor: pointer; color: var(--th-text);
		-webkit-tap-highlight-color: transparent;
	}
	.th-nav__acc-toggle::after {
		content: ""; width: 10px; height: 10px;
		border-right: 2px solid #222; border-bottom: 2px solid #222;
		transform: rotate(45deg) translateY(-3px); transition: transform .25s ease;
	}
	.th-nav__list > .menu-item.is-expanded > .th-nav__acc-toggle::after { transform: rotate(-135deg) translateY(-3px); }
	/* Sub-menu neemt de volle breedte onder de rij (flex-wrap → nieuwe regel). */
	body.th-nav-open .th-nav__list > .menu-item > .sub-menu { flex: 0 0 100%; width: 100%; }
	/* Subcategorieën (accordeon-inhoud). De desktop-mega gebruikt absolute
	   positionering + opacity/visibility (geen display) en een :first-child/:hover-
	   regel; die moet ik volledig resetten. body.th-nav-open verhoogt de
	   specificiteit boven die basisregels zodat het accordeon-gedrag wint. */
	body.th-nav-open .th-nav__list > .menu-item > .sub-menu {
		display: block; position: static; opacity: 1; visibility: visible;
		transform: none; pointer-events: auto; background: transparent; box-shadow: none;
		list-style: none; margin: 0; padding: 0; z-index: auto;
		max-height: 0; overflow: hidden;
		transition: max-height .34s ease, padding .34s ease;
	}
	body.th-nav-open .th-nav__list > .menu-item.is-expanded > .sub-menu { max-height: 760px; padding: 0 0 12px; }
	body.th-nav-open .th-nav__list > .menu-item > .sub-menu > .menu-item { position: static; border: 0; }
	body.th-nav-open .th-nav__list > .menu-item > .sub-menu > .menu-item > a {
		display: block; padding: 8px 0 8px 18px; font-size: 16px; font-weight: 400;
		color: #3a3a3a; white-space: normal; line-height: 1.5;
	}
	.th-nav__list .sub-menu .sub-menu { display: none !important; }
	.th-nav__filters { display: none !important; }
	.th-nav__panel { display: none !important; }

	/* Fallback-markup (wp_nav_menu / $nav_cats) — zelfde accordeon-uiterlijk. */
	.th-nav__link { display: flex; align-items: center; justify-content: space-between; padding: 16px 2px; border-bottom: 1px solid #ededed; }
	.th-nav__item + .th-nav__item .th-nav__link::before { display: none; }

	/* Social-iconen onderaan het overlay-menu (goud-cirkel-SVG's, zoals footer). */
	.th-nav__socials { display: flex; gap: 14px; list-style: none; margin: auto 0 0; padding: 26px 2px 4px; }
	.th-nav__socials img { width: 44px; height: 44px; display: block; }
}

/* Zeer smal (<360px): kleiner logo zodat logo + zoek/account/cart/hamburger op één
   rij blijven passen. */
@media (max-width: 360px) {
	.th-header__logo img { height: 18px; }
}

/* Menu-animaties uit bij voorkeur voor minder beweging. */
@media (prefers-reduced-motion: reduce) {
	.th-nav,
	body.th-nav-open .th-nav__list > .menu-item > .sub-menu,
	.th-nav__acc-toggle::after { transition: none; }
	/* Inklappen én de ruimte-compensatie samen uit: half geanimeerd zou ze uit
	   elkaar laten lopen en de content alsnog laten springen. */
	.th-topbar,
	.th-header__main,
	body.th-header-measured .th-header { transition: box-shadow .25s ease; }
}

/* ---- Paginakop-banner (th_page_banner) ---- */
.th-banner { position: relative; min-height: 320px; display: flex; align-items: flex-end; background: #d9d4cc center/cover no-repeat; background-image: linear-gradient(120deg, #4a443c, #756c5e); }
.th-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.48)); }
/* Banner-container even breed als de header (1486px) zodat de titel links uitlijnt met het menu/logo. */
.th-banner .sellabees-container { max-width: 1486px; }
.th-banner__inner { position: relative; z-index: 1; padding-block: 40px; }
.th-banner__title { font-family: var(--th-font-heading); font-weight: 700; font-size: clamp(30px, 1.7rem + 1.9vw, 44px); line-height: 1.1; color: #fff; margin: 0; display: inline-block; }
@media (max-width: 768px) { .th-banner { min-height: 220px; } }

/* ---- Content-pagina's (the_content) ---- */
.sellabees-content { max-width: 1000px; padding-block: 44px 64px; }
.sellabees-entry__title { font-family: var(--th-font-heading); font-weight: 600; font-size: clamp(27px, 1.5rem + 1.3vw, 34px); color: var(--th-dark); margin: 0 0 26px; }
.sellabees-entry__content { line-height: 1.75; color: #3a3a3a; font-size: 16px; }
/* De paginakop-banner levert de titel; een herhaalde leidende H1 in de content verbergen. */
.th-page .sellabees-entry__content > h1:first-child { display: none; }
.sellabees-entry__content h2 { font-family: var(--th-font-heading); font-weight: 600; font-size: 26px; color: var(--th-dark); margin: 34px 0 12px; }
.sellabees-entry__content h3 { font-family: var(--th-font-heading); font-weight: 600; font-size: 20px; color: var(--th-dark); margin: 24px 0 10px; }
.sellabees-entry__content p { margin: 0 0 16px; }
.sellabees-entry__content img { max-width: 100%; height: auto; border-radius: 12px; margin: 18px 0; display: block; }
.sellabees-entry__content a { color: var(--th-gold); text-decoration: underline; }
.sellabees-entry__content ul, .sellabees-entry__content ol { margin: 0 0 18px 1.3em; }
.sellabees-entry__content li { margin: 0 0 6px; }

/* FAQ-accordeon (<details>) */
.th-faq__item { border: 1px solid #ececec; border-radius: 10px; margin: 0 0 12px; overflow: hidden; }
.th-faq__item summary { cursor: pointer; list-style: none; padding: 16px 20px; font-family: var(--th-font-heading); font-weight: 600; font-size: 17px; color: var(--th-dark); display: flex; justify-content: space-between; align-items: center; }
.th-faq__item summary::-webkit-details-marker { display: none; }
.th-faq__item summary::after { content: "+"; font-size: 22px; color: var(--th-gold); line-height: 1; }
.th-faq__item[open] summary::after { content: "\2212"; }
.th-faq__answer { padding: 0 20px 18px; color: #555; }
.th-faq__answer p { margin: 0; }

/* ---- Gedeelde knoppen ---- */
/* Knop conform design (Figma 302:46189): Libre Franklin Bold 16px, ~46px hoog, pill. */
.th-btn { display: inline-block; padding: 13px 30px; border-radius: 100px; font-family: var(--th-font-body); font-size: 16px; font-weight: 700; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; border: 0; transition: opacity .2s; }
.th-btn:hover { opacity: .9; }
.th-btn--light { background: #fff; color: var(--th-dark); }
.th-btn--gold { background: var(--th-gold); color: #fff; }
.th-btn--dark { background: var(--th-dark); color: #fff; }

/* ---- Winkelwagen-melding (toast) ----
   JS zit in sellabees-shops-core (verschijnt bij toevoegen aan winkelwagen); de
   styling hoort in het child en ontbrak. Accent-/icoonkleur + plaatsing komen
   inline uit Site-instellingen → Winkelwagen-melding. Alias de core-font-vars naar
   de Textielhuis-fonts zodat de inline title-font-family klopt. */
:root { --sellabees-font-heading: var(--th-font-heading); --sellabees-font-body: var(--th-font-body); }
.sellabees-toasts {
	position: fixed; z-index: 2000;
	/* Was width:100% + max-width:400px. Op een telefoon (390px) werd dat 100% = vol
	   scherm, en samen met right:20px stak de melding er links 20px uit. Nu: 400px
	   waar dat past (desktop ongewijzigd), daaronder ~2/3 van de schermbreedte, dus
	   altijd rechts uitgelijnd binnen beeld. */
	width: min(400px, 66.6667%);
	display: flex; flex-direction: column; gap: 12px; pointer-events: none;
}
.sellabees-toasts--top-center   { top: 20px; left: 50%; transform: translateX(-50%); padding: 0 16px; }
.sellabees-toasts--top-right    { top: 20px; right: 20px; align-items: flex-end; }
.sellabees-toasts--top-left     { top: 20px; left: 20px; align-items: flex-start; }
.sellabees-toasts--bottom-right { bottom: 20px; right: 20px; align-items: flex-end; }
.sellabees-toasts--bottom-left  { bottom: 20px; left: 20px; align-items: flex-start; }
.sellabees-toasts--bottom-right .sellabees-toast,
.sellabees-toasts--bottom-left .sellabees-toast { transform: translateY(12px); }
.sellabees-toast {
	position: relative; pointer-events: auto; width: 100%; box-sizing: border-box;
	background: #fff; border-top: 3px solid var(--th-gold); border-radius: 4px;
	box-shadow: 0 14px 44px rgba(0,0,0,.16); padding: 28px 26px 24px; 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__close {
	position: absolute; top: 6px; right: 10px; border: 0; background: none; cursor: pointer;
	font-size: 22px; line-height: 1; color: #aaa; padding: 4px;
}
.sellabees-toast__close:hover { color: #333; }
.sellabees-toast__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; border-radius: 50%;
	background: #f5f1ea; color: var(--th-gold); margin-bottom: 12px;
}
.sellabees-toast__icon svg { width: 26px; height: 26px; }
.sellabees-toast__img {
	display: block; width: 26px; height: 26px; background: currentColor;
	-webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
.sellabees-toast__title {
	display: block; font-family: var(--th-font-heading); font-weight: 600;
	font-size: 20px; line-height: 1.15; color: var(--th-dark); margin: 0 0 4px;
}
.sellabees-toast__name { display: block; font-family: var(--th-font-body); font-size: 14px; color: #555; }
.sellabees-toast__cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 14px; padding: 9px 18px; border-radius: 100px; background: var(--th-gold, #cfa959); color: #fff; font-family: var(--th-font-body); font-weight: 700; font-size: 14px; text-decoration: none; transition: background .2s ease; }
.sellabees-toast__cta:hover { background: var(--th-gold-deep, #b8923f); color: #fff; }

/* ---- Nieuwsbrief (globale pre-footer band) ---- */
.th-newsletter { background: var(--th-search-bg, #f5f5f5) center/cover no-repeat; color: var(--th-dark); text-align: center; }
.th-newsletter__inner { padding-block: clamp(48px, 8vw, 96px); }
.th-newsletter__title { font-family: var(--th-font-heading); font-weight: 600; font-size: clamp(28px, 1.5rem + 1.2vw, 36px); margin: 0 0 8px; }
.th-newsletter__sub { font-family: var(--th-font-heading); font-weight: 400; font-size: 16px; color: #000; margin: 0 0 32px; }
/* Twee grijze pill-velden (naam + e-mailadres) naast elkaar, met daaronder de
   volle-breedte gouden knop — in de huisstijl (pill-vorm, grijs veld, gouden knop).
   Op mobiel stapelen de twee velden onder elkaar; de knop blijft volle breedte. */
.th-newsletter__form { max-width: 691px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.th-newsletter__fields { display: flex; gap: 14px; }
.th-newsletter__form input { box-sizing: border-box; flex: 1 1 0; min-width: 0; height: 46px; border: 0; border-radius: 100px; padding: 0 26px; font-family: var(--th-font-body); font-size: 16px; background: #d9d9d9; transition: box-shadow .2s ease; }
.th-newsletter__form input::placeholder { color: #868686; opacity: 1; }
.th-newsletter__form input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--th-gold); }
.th-newsletter__form .th-btn { position: relative; width: 100%; height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 100px; font-size: 16px; font-weight: 700; }
@media (max-width: 560px) {
	.th-newsletter__form { max-width: 480px; }
	.th-newsletter__fields { flex-direction: column; }
	/* Kolom-modus: hoofd-as is verticaal → flex-basis:0 zou de velden platdrukken (19px).
	   Vaste hoogte teruggeven zodat ze even hoog blijven als de knop (46px). */
	.th-newsletter__form input { flex: 0 0 46px; }
}

/* ---- "Laad meer"-paginatie (categorie + blog): telregel + subtiele gouden link ---- */
.th-loadmore { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.th-loadmore__count { font-family: var(--th-font-body); font-size: 16px; color: #000; margin: 0; }
.th-loadmore__btn { font-family: var(--th-font-body); font-size: 16px; color: var(--th-gold); text-decoration: underline; cursor: pointer; background: none; border: 0; padding: 0; }
.th-loadmore__btn:hover { color: var(--th-gold-deep, #b8923f); }
.th-loadmore__actions { display: flex; align-items: center; justify-content: center; gap: 28px; }

/* ---- Inlog-popup (checkout-loginbalk → modal) ----
   Markup uit sellabees-shops-core/inc/account-auth.php, gedrag in theme.js.
   Staat BEWUST in layout.css (niet in pages/woo-checkout.css): de popup hangt
   site-breed in de footer, dus zodra er ergens anders een login-trigger komt is
   hij meteen goed opgemaakt i.p.v. kaal. In huisstijl: goud accent, Poppins-kop,
   pill-knop en dezelfde veldmaten (52px, 4px radius) als de checkout. */
.sellabees-popup { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.sellabees-popup[hidden] { display: none; }
/* Openen/sluiten: overlay dimt in, de kaart komt licht omhoog en schaalt bij. De
   eindtoestand hangt aan .is-open (theme.js), NIET aan [hidden] — display:none kan
   niet animeren, dus de JS zet eerst hidden=false, forceert een reflow en voegt dan
   pas de klasse toe; bij sluiten verbergt hij pas ná CLOSE_MS (260ms = de langste
   transitie hieronder). Houd die twee gelijk. */
.sellabees-popup__overlay {
	position: absolute; inset: 0; background: rgba(0,0,0,.45);
	opacity: 0; transition: opacity .22s ease;
}
.sellabees-popup__box {
	position: relative; width: 100%; max-width: 440px;
	background: #fff; border-radius: 12px; padding: 34px 36px;
	box-shadow: 0 24px 60px rgba(0,0,0,.25);
	font-family: var(--th-font-body);
	opacity: 0; transform: translateY(14px) scale(.97);
	transition: opacity .2s ease, transform .26s cubic-bezier(.22,.61,.36,1);
}
.sellabees-popup.is-open .sellabees-popup__overlay { opacity: 1; }
.sellabees-popup.is-open .sellabees-popup__box { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.sellabees-popup__overlay,
	.sellabees-popup__box { transition: none; }
}
.sellabees-popup__close {
	position: absolute; top: 14px; right: 14px;
	width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--th-line, #d9d9d9); border-radius: 50%;
	background: #fff; color: var(--th-text); font-size: 20px; line-height: 1; cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sellabees-popup__close:hover { background: var(--th-gold); border-color: var(--th-gold); color: #fff; }
.sellabees-popup__title { font-family: var(--th-font-heading); font-weight: 600; font-size: 22px; color: var(--th-dark); 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: 14px; color: #000; margin: 0 0 6px; line-height: 1.3; }
.sellabees-login__field input {
	width: 100%; box-sizing: border-box; height: 52px; padding: 0 15px;
	border: 1px solid var(--th-line, #d9d9d9); border-radius: 4px; background: #fff;
	font-family: var(--th-font-body); font-size: 14px; color: var(--th-text);
}
.sellabees-login__field input:focus { outline: none; border-color: var(--th-gold); }
.sellabees-login__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; 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; height: auto; margin: 0; accent-color: var(--th-gold); }
.sellabees-login__lost { color: var(--th-gold); white-space: nowrap; text-decoration: none; }
.sellabees-login__lost:hover { text-decoration: underline; }
.sellabees-login__btn {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 52px; padding: 0 30px;
	background: var(--th-gold); color: #fff; border: 0; border-radius: 100px;
	font-family: var(--th-font-body); font-weight: 700; font-size: 16px; cursor: pointer;
	transition: background-color .15s ease;
}
.sellabees-login__btn:hover { background: var(--th-gold-deep, #b8923f); }
.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(--th-gold); }
.sellabees-login__register a:hover { text-decoration: underline; }
body.sellabees-popup-open { overflow: hidden; }
@media (max-width: 600px) { .sellabees-popup__box { padding: 28px 20px; } }

/* ---- Footer ---- */
.th-footer {
	background: var(--th-dark);
	color: var(--th-white);
	font-family: var(--th-font-body);
	font-size: 14px;
	line-height: 1.5;
}
.th-footer__inner { padding-block: 56px 28px; }

.th-footer a { color: inherit; text-decoration: none; }
.th-footer a:hover { text-decoration: underline; }
.th-footer ul { list-style: none; padding: 0; margin-top: 10px; }

/* Reviews-badge */
.th-footer__reviews {
	display: flex; align-items: center; gap: 14px;
	margin-top: 24px;
}
/* Wit op de donkere footer (de PNG-lockup is goud/grijs). */
.th-footer__reviews-logo { flex: 0 0 auto; width: 116px; height: auto; filter: brightness(0) invert(1); }
.th-footer__reviews-text { display: flex; flex-direction: column; line-height: 1.3; }
.th-footer__reviews-title { font-weight: 700; font-size: 14px; white-space: nowrap; }
/* Mét `.th-footer a` ervoor (0,2,1): de generieke `.th-footer a{text-decoration:none}`
   hierboven (0,1,1) wint anders van een losse klasse-selector, ongeacht de volgorde. */
.th-footer a.th-footer__reviews-sub { font-size: 12px; text-decoration: underline; white-space: nowrap; }
/* Op kleine schermen is het 116px-logo te breed naast de review-tekst → overloop.
   Daar kleiner (80px); logo + tekst blijven op één regel (geen wrap). */
@media (max-width: 600px) {
	.th-footer__reviews-logo { width: 80px; }
}

/* Kolommen */
.th-footer__cols {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: 32px;
}
.th-footer__title {
	font-family: var(--th-font-heading);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.3;
	color: var(--th-heading-light);
	margin: 0 0 18px;
}

/* Contact */
.th-footer__contact { display: flex; flex-direction: column; gap: 13px; }
.th-footer__contact li { display: flex; gap: 16px; align-items: center; }
/* Vaste 18px icoonkolom, verticaal + horizontaal gecentreerd → lijnt netjes uit (zoals Figma).
   Iconen WIT (Figma fill); alleen de globe bij zenartikelen is goud (zie loc-extra). */
.th-footer__ico { color: #fff; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; }
.th-footer__socials { display: flex; gap: 10px; margin-top: 50px; }
.th-footer__socials img { width: 28px; height: 28px; display: block; }

/* Openingstijden */
.th-footer__loc-label {
	font-weight: 700; text-transform: uppercase; color: var(--th-gold);
	margin: 0 0 8px; letter-spacing: .02em;
}
.th-footer__hours { border-collapse: collapse; width: 100%; max-width: 230px; }
.th-footer__hours th { font-weight: 400; text-align: left; padding: 0 12px 1px 0; line-height: 25px; white-space: nowrap; }
.th-footer__hours td { text-align: left; line-height: 25px; white-space: nowrap; }
.th-footer__loc-note, .th-footer__loc-extra { display: flex; gap: 14px; align-items: center; margin: 14px 0 0; }
/* Markers in de openingstijden-kolommen (Kom langs-pin + zenartikelen-globe) = goud
   (Figma #CFA959); alleen de contactgegevens-iconen zijn wit. */
.th-footer__loc-note .th-footer__ico,
.th-footer__loc-extra .th-footer__ico { color: var(--th-gold); }

/* Algemeen */
.th-footer__links { display: flex; flex-direction: column; gap: 4px; }
.th-footer__links a { line-height: 25px; }

/* Onderbalk */
.th-footer__bottom {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
	margin-top: 40px; padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.18);
}
.th-footer__legal { font-size: 13px; color: rgba(255,255,255,.85); }
.th-footer__payments { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.th-footer__payments img { height: 28px; width: auto; display: block; }

/* ---- Responsive ---- */
@media (max-width: 981px) {
	.th-footer__cols { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 600px) {
	.th-footer__cols { grid-template-columns: 1fr; }
	.th-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Gratis-verzending-voortgangsbalk (winkelwagen + mini-cart). */
.sellabees-freeship { margin: 0 0 24px; padding: 14px 18px; background: #f5f5f5; border-radius: 8px; font-family: var(--th-font-body); }
.sellabees-freeship__text { margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: #212121; text-align: center; }
.sellabees-freeship__text strong { color: var(--th-gold, #cfa959); font-weight: 700; }
.sellabees-freeship__bar { height: 8px; border-radius: 100px; background: #e2e2e2; overflow: hidden; }
.sellabees-freeship__fill { display: block; height: 100%; background: var(--th-gold, #cfa959); border-radius: 100px; transition: width .4s ease; }
.sellabees-freeship--done .sellabees-freeship__text { color: #2e7d32; font-weight: 600; }
.sellabees-freeship--done .sellabees-freeship__fill { background: #2e7d32; }