/**
 * 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 { 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; }
/* No emphasis on hover, and none on the department whose panel happens to be open:
   that panel follows the mouse, so it read as a hover effect that stayed behind. The
   only marked item is the page the visitor is actually on, in gold further down
   (.th-current / .th-current-ancestor). Same on mobile, where the rule also applied
   because a tap can leave :hover stuck on a touch device. */
/* 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; }
/* Small desktop / landscape tablet (982-1279px): the full item padding made the bar
   wider than the viewport at 1024px (last item "Meer" cut off, page scrolled sideways). */
@media (min-width: 982px) and (max-width: 1279px) {
	.th-nav__list > .menu-item > a,
	.th-nav__link { padding-inline: 14px; }
	.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;
	/* Bij veel filters wrapt de flyout naar meerdere regels en kan hij hoger worden dan
	   het scherm. Begrens tot de ruimte onder de header (flyout start ~230px) en scroll
	   binnen de flyout zelf, zodat de onderste rij altijd bereikbaar blijft. box-sizing:
	   border-box zodat de padding in de max-height meetelt (dit thema heeft geen globale
	   border-box). */
	box-sizing: border-box;
	max-height: calc(100vh - 250px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.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); }
/* Klikbare sectietitel (bv. Dames/Heren → categorie gefilterd op geslacht). */
a.th-nav__fsection-title { text-decoration: none; transition: color .15s ease; }
a.th-nav__fsection-title:hover { color: var(--th-gold); }
.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 10 items en lopen dan door
   naar een volgende kolom; korte lijsten blijven één kolom. Zo staat alles in beeld.
   Grid, not a column-wrap flexbox: Safari does not widen a column-wrap flex container
   for the extra columns, so the next filter group (Merk) was drawn over them. */
.th-nav__flist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(10, auto); grid-auto-flow: column; grid-auto-columns: max-content; justify-content: start; column-gap: 36px; }
/* In een kolommen-flyout (meerdere secties naast elkaar, bv. Nachtmode → Pyjama's
   Dames/Heren) blijft elke filterlijst één kolom, zodat de secties smal genoeg zijn om
   naast elkaar te staan i.p.v. onder elkaar te wrappen. */
.th-nav__filters--columns .th-nav__flist { grid-template-rows: none; grid-auto-flow: row; }
/* Multi-section flyout (Slaapkamer > Dekbedden, Nachtmode > Pyjama's): a grid, so it is known
   which section starts a row. The number of sections per row comes from inc/mega-menu.php
   (--w<n> from 1440px, --n<n> below) and follows the busiest section's filter groups. A
   section that starts a row has no line on its left; each row after the first gets a line above. */
.th-nav__filters--columns .th-nav__filters-inner { display: grid; align-items: start; }
.th-nav__filters--columns .th-nav__fsection { min-width: 0; }
@media (min-width: 1440px) {
	.th-nav__filters--columns.th-nav__filters--w1 .th-nav__filters-inner { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.th-nav__filters--columns.th-nav__filters--w1 .th-nav__fsection:nth-child(n) { margin: 0; padding: 0 48px; border-left: 1px solid #ececec; border-top: 0; }
	.th-nav__filters--columns.th-nav__filters--w1 .th-nav__fsection:nth-child(1n+1) { padding-left: 0; border-left: 0; }
	.th-nav__filters--columns.th-nav__filters--w1 .th-nav__fsection:nth-child(n+2) { margin-top: 24px; padding-top: 24px; border-top: 1px solid #ececec; }
	.th-nav__filters--columns.th-nav__filters--w2 .th-nav__filters-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.th-nav__filters--columns.th-nav__filters--w2 .th-nav__fsection:nth-child(n) { margin: 0; padding: 0 48px; border-left: 1px solid #ececec; border-top: 0; }
	.th-nav__filters--columns.th-nav__filters--w2 .th-nav__fsection:nth-child(2n+1) { padding-left: 0; border-left: 0; }
	.th-nav__filters--columns.th-nav__filters--w2 .th-nav__fsection:nth-child(n+3) { margin-top: 24px; padding-top: 24px; border-top: 1px solid #ececec; }
	.th-nav__filters--columns.th-nav__filters--w3 .th-nav__filters-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.th-nav__filters--columns.th-nav__filters--w3 .th-nav__fsection:nth-child(n) { margin: 0; padding: 0 48px; border-left: 1px solid #ececec; border-top: 0; }
	.th-nav__filters--columns.th-nav__filters--w3 .th-nav__fsection:nth-child(3n+1) { padding-left: 0; border-left: 0; }
	.th-nav__filters--columns.th-nav__filters--w3 .th-nav__fsection:nth-child(n+4) { margin-top: 24px; padding-top: 24px; border-top: 1px solid #ececec; }
	.th-nav__filters--columns.th-nav__filters--w4 .th-nav__filters-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.th-nav__filters--columns.th-nav__filters--w4 .th-nav__fsection:nth-child(n) { margin: 0; padding: 0 48px; border-left: 1px solid #ececec; border-top: 0; }
	.th-nav__filters--columns.th-nav__filters--w4 .th-nav__fsection:nth-child(4n+1) { padding-left: 0; border-left: 0; }
	.th-nav__filters--columns.th-nav__filters--w4 .th-nav__fsection:nth-child(n+5) { margin-top: 24px; padding-top: 24px; border-top: 1px solid #ececec; }
}
@media (max-width: 1439px) {
	.th-nav__filters--columns.th-nav__filters--n1 .th-nav__filters-inner { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.th-nav__filters--columns.th-nav__filters--n1 .th-nav__fsection:nth-child(n) { margin: 0; padding: 0 48px; border-left: 1px solid #ececec; border-top: 0; }
	.th-nav__filters--columns.th-nav__filters--n1 .th-nav__fsection:nth-child(1n+1) { padding-left: 0; border-left: 0; }
	.th-nav__filters--columns.th-nav__filters--n1 .th-nav__fsection:nth-child(n+2) { margin-top: 24px; padding-top: 24px; border-top: 1px solid #ececec; }
	.th-nav__filters--columns.th-nav__filters--n2 .th-nav__filters-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.th-nav__filters--columns.th-nav__filters--n2 .th-nav__fsection:nth-child(n) { margin: 0; padding: 0 48px; border-left: 1px solid #ececec; border-top: 0; }
	.th-nav__filters--columns.th-nav__filters--n2 .th-nav__fsection:nth-child(2n+1) { padding-left: 0; border-left: 0; }
	.th-nav__filters--columns.th-nav__filters--n2 .th-nav__fsection:nth-child(n+3) { margin-top: 24px; padding-top: 24px; border-top: 1px solid #ececec; }
	.th-nav__filters--columns.th-nav__filters--n3 .th-nav__filters-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.th-nav__filters--columns.th-nav__filters--n3 .th-nav__fsection:nth-child(n) { margin: 0; padding: 0 48px; border-left: 1px solid #ececec; border-top: 0; }
	.th-nav__filters--columns.th-nav__filters--n3 .th-nav__fsection:nth-child(3n+1) { padding-left: 0; border-left: 0; }
	.th-nav__filters--columns.th-nav__filters--n3 .th-nav__fsection:nth-child(n+4) { margin-top: 24px; padding-top: 24px; border-top: 1px solid #ececec; }
}
.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 ---- */
/* Dames/Heren under a subitem (inc/mega-menu.php th_menu_mobile_gender_html): mobile only,
   desktop shows them as section titles in the flyout. */
.th-nav__msub { display: none; }

@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;
	}
	/* Ruim genoeg voor subitems plus hun Dames/Heren-regels (th-nav__msub). */
	body.th-nav-open .th-nav__list > .menu-item.is-expanded > .sub-menu { max-height: 1600px; 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;
	}
	/* Dames/Heren onder een subitem, een niveau dieper ingesprongen en standaard dicht.
	   De pijltjes-knop komt uit theme.js (.th-nav__acc-toggle--sub); de rij wrapt net als
	   bij de departementen: label + knop, het lijstje op een volle regel eronder. */
	body.th-nav-open .th-nav__list > .menu-item > .sub-menu > .menu-item.has-msub { display: flex; flex-wrap: wrap; align-items: center; }
	body.th-nav-open .th-nav__list > .menu-item > .sub-menu > .menu-item.has-msub > a { flex: 1 1 auto; min-width: 0; }
	.th-nav__acc-toggle--sub { width: 44px; }
	.th-nav__acc-toggle--sub::after { width: 8px; height: 8px; }
	.th-nav__list .sub-menu > .menu-item.has-msub.is-expanded > .th-nav__acc-toggle--sub::after { transform: rotate(-135deg) translateY(-3px); }
	body.th-nav-open .th-nav__list > .menu-item > .sub-menu > .menu-item > .th-nav__msub {
		display: block; flex: 0 0 100%; list-style: none; margin: 0; padding: 0 0 0 36px;
		max-height: 0; overflow: hidden; transition: max-height .28s ease;
	}
	body.th-nav-open .th-nav__list > .menu-item > .sub-menu > .menu-item.is-expanded > .th-nav__msub { max-height: 240px; padding-bottom: 4px; }
	body.th-nav-open .th-nav__msub a { display: block; padding: 6px 0; font-size: 15px; font-weight: 400; line-height: 1.4; color: #6a6a6a; }
	.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; }
/* Core 2.x stylet .sellabees-toast zelf (los zwevend, donker, max. 360px breed,
   klikbaar om weg te halen). Hier staat de melding van core 0.1.0 in een
   .sellabees-toasts-houder; wat de core-regels zetten en hierboven niet opnieuw staat,
   terugzetten naar wat het voorheen was (overerven van de houder). */
.sellabees-toasts .sellabees-toast {
	z-index: auto; max-width: none; cursor: auto;
	color: inherit; font-size: inherit; line-height: inherit;
}
.sellabees-toasts .sellabees-toast:not(.is-visible) { pointer-events: auto; }

/* ---- 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; } }
/* Core 2.x geeft de popup een eigen basis-opmaak. De regels hierboven overschrijven
   het meeste; dit zijn de eigenschappen die alleen de core zet en die er voorheen niet
   waren: een grijze rand en 420px (i.p.v. 440px) op de kaart, vet label, hoofdletters/
   spatiëring en een filter-hover op de knop. */
.sellabees-popup__box { border: 0; }
.sellabees-login-popup .sellabees-popup__box { max-width: 440px; text-align: inherit; }
.sellabees-login__field label { font-weight: inherit; }
.sellabees-login__btn { text-transform: none; letter-spacing: normal; }
.sellabees-login__btn:hover { filter: none; }

/* ---- Laad-overlay winkelwagen/afrekenen ----
   Zoals in core 0.1.0: een draaiend cirkeltje i.p.v. het (pulserende) logo dat core
   2.x in de WooCommerce-blockUI-overlay zet. Op de winkelwagen zelf verbergt de
   inline-CSS uit inc/core-pins.php de overlay helemaal (daar draait alleen het
   rondje in het aantal-vakje). */
.sellabees-cart-loader img { display: none !important; }
.sellabees-cart-loader::after {
	content: "";
	width: 42px;
	height: 42px;
	border: 3px solid rgba(0, 0, 0, .18);
	border-top-color: var(--sellabees-red, #dd2532);
	border-radius: 50%;
	animation: sellabees-overlay-spin .7s linear infinite;
}
@keyframes sellabees-overlay-spin {
	to { transform: rotate(360deg); }
}

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

/* ==========================================================================
   WooCommerce-meldingen (bericht / info / fout) in de Textielhuis-huisstijl
   Zelfde opbouw als bij Hinke: licht getint vlak, 3px accentrand bovenaan, 4px
   ronding en een eigen icoon, maar in het goud van Textielhuis (fout in het rood
   dat de shop ook voor sale gebruikt). `body` ervoor zodat dit wint van
   WooCommerce' eigen `.woocommerce-info` (met de blauwe lijn), ook op gewone
   pagina's. Specifiekere regels (inlog-toggle op de checkout, lege winkelwagen)
   blijven hun eigen opmaak houden.
   ========================================================================== */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
	position: relative;
	margin: 0 0 24px;
	padding: 15px 20px 15px 52px; /* 52 = 20 links + 20 icoon + 12 lucht */
	border: 0;
	border-top: 3px solid var(--th-gold);
	border-radius: 4px;
	background: #faf6ec;
	list-style: none;
	font-family: var(--th-font-body);
	font-size: 14px;
	line-height: 22px;
	color: var(--th-text);
}
body .woocommerce-error { border-top-color: #ff1717; background: #fdf3f3; }

/* Eigen SVG-icoon als masker (kleur via background), verticaal gecentreerd zodat
   het ook klopt als er een knop in de melding staat. WooCommerce' icoonfont heeft
   voor `info` geen geldige glyph (leeg vierkantje), daarom niet die. */
body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before {
	content: "";
	display: block;
	position: absolute;
	top: calc(50% + 1.5px);
	left: 20px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background: var(--th-gold);
	-webkit-mask: no-repeat center / 20px 20px var(--th-melding-icoon);
	mask: no-repeat center / 20px 20px var(--th-melding-icoon);
}
body .woocommerce-info::before {
	--th-melding-icoon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='10' cy='5.9' r='1.15' fill='%23000'/%3E%3Crect x='9' y='8.6' width='2' height='6.2' rx='1' fill='%23000'/%3E%3C/svg%3E");
}
body .woocommerce-message::before {
	--th-melding-icoon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M6.2 10.4l2.7 2.7 5-5.6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body .woocommerce-error::before {
	--th-melding-icoon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Crect x='9' y='5' width='2' height='6.6' rx='1' fill='%23000'/%3E%3Ccircle cx='10' cy='14.2' r='1.15' fill='%23000'/%3E%3C/svg%3E");
	background: #ff1717;
}

/* Melding MET knop: tekst links, knop rechts op één middenlijn. De knop staat niet
   overal op dezelfde plek in de HTML (bij "tijdelijk wachtwoord" vóór de tekst, bij
   "nog geen bestellingen/downloads" erachter). De tekst is een los tekstknooppunt en
   niet te verplaatsen, de knop wel: `order` zet hem altijd achteraan, dus rechts.
   :has() houdt dit bij meldingen mét knop. */
body .woocommerce-message:has(> .button),
body .woocommerce-info:has(> .button) {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	text-align: left;
}
/* WooCommerce' clearfix-::after telt in een flexrij mee als extra item en duwde de
   tekst naar het midden; hier niet nodig. */
body .woocommerce-message:has(> .button)::after,
body .woocommerce-info:has(> .button)::after { content: none; display: none; }

/* De knop in een melding: kleine gouden pil (hulpactie, geen hoofdknop). !important
   en extra specificiteit omdat shop.css `.woocommerce-account .button` met
   !important donker maakt. */
body .woocommerce-info .button.wc-forward,
body .woocommerce-message .button.wc-forward {
	flex: none;
	order: 1;
	margin-left: auto;
	display: inline-flex !important;
	align-items: center;
	height: 36px !important;
	min-height: 0 !important;
	padding: 0 18px !important;
	border: 0 !important;
	border-radius: 100px !important;
	background: var(--th-gold) !important;
	color: #fff !important;
	font-family: var(--th-font-body);
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease;
}
body .woocommerce-info .button.wc-forward:hover,
body .woocommerce-info .button.wc-forward:focus-visible,
body .woocommerce-message .button.wc-forward:hover,
body .woocommerce-message .button.wc-forward:focus-visible {
	background: var(--th-gold-deep, #b8923f) !important;
	color: #fff !important;
}

/* Smal scherm: tekst boven, knop eronder (links uitgelijnd). */
@media (max-width: 560px) {
	body .woocommerce-info .button.wc-forward,
	body .woocommerce-message .button.wc-forward { margin-left: 0; }
	body .woocommerce-message:has(> .button),
	body .woocommerce-info:has(> .button) {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	body .woocommerce-message:has(> .button)::before,
	body .woocommerce-info:has(> .button)::before { top: 26px; }
}