/**
 * Textielhuis — WooCommerce-styling (archief/filter/productkaart). Scoped, alleen
 * op WooCommerce-pagina's geladen. Bouwt voort op de tokens in main.css.
 */

/* ---- Archief-layout ---- */
.th-archive { padding-block: 28px 64px; }
.th-breadcrumb { font-size: 13px; color: #8a8a8a; margin-bottom: 14px; }
.th-breadcrumb a { color: #8a8a8a; text-decoration: none; }
/* Mobiel kruimelpad (zoals Coolblue): alleen een terug-link met pijltje. */
.th-breadcrumb-back { display: none; }
@media (max-width: 768px) {
	.th-breadcrumb { display: none; }
	.th-breadcrumb-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px; font-family: var(--th-font-body); font-size: 15px; font-weight: 500; color: var(--th-dark); text-decoration: none; }
	.th-breadcrumb-back svg { flex: 0 0 auto; }
	.th-breadcrumb-back:hover { color: var(--th-gold); }
}
.th-archive__head { margin-bottom: 24px; }
.th-archive__title { font-family: var(--th-font-heading); font-weight: 600; font-size: clamp(24px, 1.3rem + 1.2vw, 30px); color: var(--th-dark); margin: 0 0 10px; }
/* Intro loopt over (vrijwel) de volledige containerbreedte, zoals het design
   (node 302:45046, ~1426px breed) — dus geen smalle 900px-kolom. */
.th-archive__desc { color: #555; max-width: none; line-height: 1.6; }
.th-archive__layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
.th-archive__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.th-archive__bar .woocommerce-result-count { margin: 0; color: #666; font-size: 14px; }
/* WooCommerce geeft het sorteer-form standaard een margin-bottom; die weg zodat
   het (zeker gestapeld op mobiel) niet de productgrid omlaag duwt. */
.th-archive__bar .woocommerce-ordering { margin: 0; }
/* Smal scherm: telling boven, sorteer-dropdown eronder (onder elkaar i.p.v. naast). */
@media (max-width: 768px) {
	.th-archive__bar { flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* width: anders sizet de select naar de langste optie ("Op gemiddelde waardering
   sorteren", ~289px) en oogt hij veel te breed. Vaste compacte breedte. */
/* Eigen chevron i.p.v. de browserpijl: die plakte tegen de pill-ronding én ziet er
   per browser/OS anders uit. Zelfde chevron als de filtersecties (M6 9l6 6 6-6).
   box-sizing is hier expliciet nodig — dit thema heeft géén globale border-box, dus
   anders telt de 42px rechterpadding bij de 230px op en wordt de pill breder. */
.woocommerce-ordering select {
	box-sizing: border-box; width: 230px; max-width: 100%;
	border: 1px solid #ddd; border-radius: 100px;
	padding: 8px 44px 8px 16px;
	font-family: var(--th-font-body); font-size: 14px;
	color: var(--th-dark, #212121); /* tekst zwart i.p.v. de standaard/blauwe systeemkleur */
	appearance: none; -webkit-appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212121' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 14px 14px;
}
/* Opties in de uitklaplijst ook donker (Android/where honored) i.p.v. blauw. */
.woocommerce-ordering select.orderby option,
.woocommerce-ordering select.orderby option:checked { color: var(--th-dark, #212121); }
/* Sorteer-dropdown verplaatst naar het filter-drawer (op mobiel, via theme.js). */
.th-archive__drawer-sort { margin: 0 0 20px; padding: 0 0 24px; border-bottom: 2px solid var(--th-search-grey, #d9d9d9); }
.th-archive__drawer-sort-title { display: block; margin: 0 0 10px; font-family: var(--th-font-heading); font-size: 16px; font-weight: 600; letter-spacing: .5px; color: var(--th-dark); }
.th-archive__drawer-sort .woocommerce-ordering { margin: 0; }
.th-archive__drawer-sort .woocommerce-ordering select { width: 100%; }
/* Drawer-elementen alleen op mobiel/tablet (zie responsive); op desktop verborgen. */
.th-archive__filter-toggle,
.th-archive__filter-close,
.th-filter-backdrop { display: none; }

/* ---- Onderste SEO-tekstblok (design 302:45042): full-bleed lichte band, flush
   tegen de footer, met inklapbare rijke tekst + gouden "Lees meer"-knop ---- */
.th-archive__seo { background: #f5f5f5; padding-block: 56px 72px; }
.th-archive__seo-text { color: #000; font-family: var(--th-font-body); font-size: 14px; line-height: 1.7; }
.th-archive__seo-text h2,
.th-archive__seo-text h3 { font-family: var(--th-font-heading); font-weight: 600; font-size: 24px; line-height: 1.3; color: var(--th-dark); margin: 0 0 12px; }
.th-archive__seo-text :is(h2, h3):not(:first-child) { margin-top: 32px; }
.th-archive__seo-text p { margin: 0 0 16px; }
.th-archive__seo-text ul,
.th-archive__seo-text ol { margin: 0 0 16px; padding-left: 20px; }
.th-archive__seo-text a { color: var(--th-gold); }
.th-archive__seo-text > *:last-child { margin-bottom: 0; }
/* Ingeklapt: vaste hoogte + fade-mask. De hoogte wordt bij open/dicht vloeiend in
   JS geanimeerd (Web Animations API, net als het homepage-SEO-blok/de accordeons)
   — dus hier GEEN CSS-transitie op max-height (die reflowt hortend). */
.th-archive__seo-text[data-th-readmore] { max-height: 240px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.th-archive__seo-text[data-th-readmore].is-open { max-height: none; -webkit-mask-image: none; mask-image: none; }
.th-archive__seo-more { display: inline-block; margin-top: 22px; padding: 0; background: none; border: 0; font-family: var(--th-font-body); font-size: 16px; color: var(--th-gold); text-decoration: underline; cursor: pointer; }
.th-archive__seo-more:hover { color: var(--th-gold-deep, #b8923f); }
@media (max-width: 768px) {
	.th-archive__seo { padding-block: 40px 48px; }
	.th-archive__seo-text h2,
	.th-archive__seo-text h3 { font-size: 20px; }
}

/* ---- Filter (core-markup .sellabees-filter*) — vlak, met onderlijn per sectie zoals de live site ---- */
.sellabees-filter { border: 0; border-radius: 0; padding: 0; }
.sellabees-filter__title { font-family: var(--th-font-heading); font-weight: 600; font-size: 24px; margin: 0 0 8px; color: var(--th-dark); }
.sellabees-filter__section { border-top: 0; border-bottom: 2px solid var(--th-search-grey, #d9d9d9); padding: 16px 0; }
.sellabees-filter__head { display: flex; align-items: center; justify-content: space-between; width: 100%; background: 0; border: 0; padding: 2px 0; cursor: pointer; font-family: var(--th-font-heading); font-size: 16px; font-weight: 600; letter-spacing: .5px; color: var(--th-dark); }
.sellabees-filter__chevron { transition: transform .2s; color: #666; }
.sellabees-filter__section[data-collapsed="1"] .sellabees-filter__chevron { transform: rotate(-90deg); }
.sellabees-filter__section[data-collapsed="1"] .sellabees-filter__body { display: none; }
.sellabees-filter__body { padding-top: 12px; }
.sellabees-filter__list { list-style: none; margin: 0; padding: 0; }
/* Lange lijsten: eerste 8 tonen, rest achter "Toon meer" (JS in theme.js). */
.sellabees-filter__list.is-collapsed .sellabees-filter__item.is-extra { display: none; }
.sellabees-filter__more { display: inline-block; margin-top: 10px; padding: 0; background: none; border: 0; font-family: var(--th-font-body); font-size: 14px; color: var(--th-text); text-decoration: underline; cursor: pointer; transition: color .2s ease; }
.sellabees-filter__more:hover { color: var(--th-gold); }
.sellabees-filter__item { margin: 0; }
.sellabees-filter__check { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 0; font-family: var(--th-font-body); font-size: 16px; font-weight: 400; line-height: 1; color: #000; transition: color .3s ease; }
.sellabees-filter__check:hover { color: var(--th-gold); }
/* Vierkante grijze checkbox die goud wordt bij selectie (live-look) */
.sellabees-filter__check input { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; flex-shrink: 0; background: var(--th-search-grey, #d9d9d9); border: 0; border-radius: 2px; cursor: pointer; transition: background .3s ease; }
.sellabees-filter__check input:checked { background: var(--th-gold); }
.sellabees-filter__swatches { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 4px 0; }
.sellabees-filter__swatch { display: inline-block; cursor: pointer; }
.sellabees-filter__swatch input { position: absolute; opacity: 0; }
.sellabees-filter__swatch-dot { display: block; width: 35px; height: 35px; border-radius: 50%; border: 2px solid transparent; transition: border-color .15s; }
.sellabees-filter__swatch:hover .sellabees-filter__swatch-dot { border-color: var(--th-search-grey, #d9d9d9); }
.sellabees-filter__swatch.is-checked .sellabees-filter__swatch-dot,
.sellabees-filter__swatch input:checked + .sellabees-filter__swatch-dot { border-color: #000; }
.sellabees-filter__price { padding-top: 6px; }
.sellabees-filter__price-inputs { display: flex; gap: 16px; margin-bottom: 18px; }
/* Elk veld in een wrapper met een vast valuta-teken ervóór (tekst-input kan het
   symbool niet in zijn value tonen). Symbool uit get_woocommerce_currency_symbol(). */
.sellabees-filter__price-control { position: relative; flex: 1 1 0; min-width: 0; display: block; }
.sellabees-filter__price-prefix {
	position: absolute; left: 10px; top: 0; height: 34px;
	display: flex; align-items: center; pointer-events: none;
	font-family: var(--th-font-body); font-size: 14px; color: #000;
}
.sellabees-filter__price-field {
	box-sizing: border-box; width: 100%; height: 34px; padding: 0 10px;
	border: 1px solid var(--th-search-grey, #d9d9d9); border-radius: 2px;
	font-family: var(--th-font-body); font-size: 14px; color: #000;
}
.sellabees-filter__price-control .sellabees-filter__price-field { padding-left: 22px; }
.sellabees-filter__price-field:focus { outline: 2px solid var(--th-gold); outline-offset: -1px; }
/* Dubbele range-slider: dunne grijze track + gouden geselecteerde balk + twee
   grote WITTE bollen met gouden rand (native range-uiterlijk volledig verborgen). */
.sellabees-filter__slider { position: relative; height: 28px; }
.sellabees-filter__slider-track,
.sellabees-filter__slider-range {
	position: absolute; top: 50%; transform: translateY(-50%);
	height: 4px; border-radius: 4px;
}
.sellabees-filter__slider-track { left: 0; right: 0; background: var(--th-search-grey, #d9d9d9); }
.sellabees-filter__slider-range { background: var(--th-gold); }
.sellabees-filter__slider-input {
	position: absolute; top: 0; left: 0; width: 100%; height: 28px; margin: 0;
	-webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.sellabees-filter__slider-input::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; pointer-events: auto;
	box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%;
	background: #fff; border: 2px solid var(--th-gold); box-shadow: 0 1px 3px rgba(0,0,0,.15); cursor: pointer;
}
.sellabees-filter__slider-input::-moz-range-thumb {
	pointer-events: auto; box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%;
	background: #fff; border: 2px solid var(--th-gold); box-shadow: 0 1px 3px rgba(0,0,0,.15); cursor: pointer;
}
.sellabees-filter__submit { margin: 12px 0; padding: 10px 18px; border: 0; border-radius: 100px; background: var(--th-dark); color: #fff; cursor: pointer; }

/* ---- Productgrid (4-koloms, zoals de live site) ---- */
ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 !important; padding: 0 !important; list-style: none; }
@media (max-width: 1200px) { ul.products { grid-template-columns: repeat(3, 1fr); } }
ul.products::before, ul.products::after { content: none !important; }

/* ---- Productkaart (.th-card via content-product.php) — vlakke grijze kaart, live-look ---- */
/* padding !important: WooCommerce's eigen .woocommerce ul.products li.product wint
   anders qua specificiteit → kaart zonder binnenruimte (zoals de homepage al doet). */
li.th-card { box-sizing: border-box; min-width: 0; width: auto !important; margin: 0 !important; float: none !important; list-style: none; display: flex; flex-direction: column; text-align: left; background: #f5f5f5; padding: 12px !important; }
li.th-card .th-card__media { position: relative; display: block; border-radius: 0; overflow: hidden; background: #fff; }
li.th-card .th-card__media img { width: 100%; height: auto; display: block; border-radius: 0; margin: 0 !important; }
/* z-index nodig: bij hover krijgt de foto `transform: scale(1.05)` (animations.css)
   en daarmee een eigen stapelcontext. De badge staat in de HTML vóór de foto, dus
   zonder z-index schuift die opgeschaalde foto eroverheen en lijkt de badge weg. */
li.th-card .th-card__sale { position: absolute; z-index: 2; top: 8px; right: 8px; left: auto; background: #ff1717; color: #fff; border-radius: 100px; padding: 1px 15px; font-size: 14px; font-weight: 700; line-height: normal; text-transform: uppercase; font-family: var(--th-font-body); }
li.th-card .th-card__swatches { display: flex; gap: 7px; align-items: center; list-style: none; margin: 5px 0px 3px; padding: 0; flex-wrap: wrap; }
li.th-card .th-card__swatches li { flex: 0 0 auto; width: 22px; height: 22px; margin: 0 !important; padding: 0 !important; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
/* WC/thema zet een clearfix ::before/::after op .woocommerce ul → die telt als
   leeg flex-item en duwt het 1e bolletje een gap-breedte naar rechts. Weghalen. */
li.th-card .th-card__swatches::before, li.th-card .th-card__swatches::after { content: none !important; display: none !important; }
li.th-card .th-card__swatch-more { width: auto !important; height: 22px; display: inline-flex; align-items: center; box-shadow: none !important; margin-left: 1px !important; font-size: 14px; line-height: 1; color: #212121; font-weight: 400; border-radius: 0 !important; }
/* min-height = 2 regels (font 16px × line-height 1.3): 1- en 2-regelige titels
   reserveren evenveel ruimte, zodat de swatches/USP/prijs eronder uitlijnen. */
li.th-card .th-card__title { display: block; font-family: var(--th-font-body); font-weight: 400; font-size: 16px; line-height: 1.3; color: #000; text-decoration: none; margin: 10px 0 0; min-height: 2.6em; }
/* margin-top:auto duwt USP + prijsrij samen naar de onderkant van de kaart.
   Omdat alle kaarten in een grid-rij even hoog zijn, staat de USP-regel zo op
   elke kaart op exact dezelfde hoogte, ongeacht titellengte of swatches. */
li.th-card .th-card__usp { display: flex; align-items: center; gap: 5px; margin: auto 0 0px; padding: 8px 0; font-size: 12px; line-height: 16px; color: #212121; font-family: var(--th-font-body); }
li.th-card .th-card__usp svg { flex: 0 0 auto; }
li.th-card .th-card__usp .delivery-text { font-weight: 400; }
li.th-card .th-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 0; }
li.th-card .th-card__price { color: #000 !important; font-family: var(--th-font-body); font-weight: 400; font-size: 20px; line-height: normal; }
li.th-card .th-card__price del { color: #000 !important; opacity: 1 !important; font-weight: 400 !important; font-size: 14px; margin-right: 6px; }
li.th-card .th-card__price del .woocommerce-Price-amount { color: #000 !important; font-size: 14px; }
li.th-card .th-card__price ins { text-decoration: none !important; font-weight: 400 !important; }
li.th-card .th-card__price ins .woocommerce-Price-amount { color: #000 !important; font-size: 20px; }
li.th-card .th-card__price .woocommerce-Price-amount { color: #000; }
li.th-card .th-card__cart { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--th-gold); color: #fff; border: 0; border-radius: 0; padding: 9px 15px; text-decoration: none; }
li.th-card .th-card__cart:hover { background: var(--th-gold-deep, #b8923f); }
/* "Bekijk winkelwagen"-link die WooCommerce na AJAX-toevoegen achter de knop
   plakt (.added_to_cart) wegverbergen: overbodig, want er verschijnt al een
   pop-up bij het toevoegen aan de winkelwagen. */
li.th-card .th-card__row .added_to_cart { display: none !important; }
li.th-card .star-rating { display: none; } /* design toont swatches/USP i.p.v. sterren in de kaart */

/* Paginatie */
.woocommerce-pagination { margin-top: 36px; }
.woocommerce-pagination ul { display: flex; gap: 8px; border: 0 !important; justify-content: center; }
.woocommerce-pagination ul li { border: 0 !important; }
.woocommerce-pagination ul li a, .woocommerce-pagination ul li span { border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid #e2e2e2 !important; }
.woocommerce-pagination ul li span.current { background: var(--th-gold); color: #fff; border-color: var(--th-gold) !important; }

/* "Laad meer"-paginatie: styling staat nu site-breed in layout.css (ook gebruikt
   op de blog-overzichtspagina, die shop.css niet laadt). */

/* ---- Enkel product ---- */
.th-single { padding-block: 24px 64px; }
.single-product div.product { display: grid; grid-template-columns: 1.05fr 1fr; gap: 52px; align-items: start; }
.single-product div.product .woocommerce-product-gallery { grid-column: 1; width: 100% !important; margin: 0 !important; float: none !important; }
.single-product div.product .woocommerce-product-gallery img { border-radius: 14px; }
.single-product div.product .summary.entry-summary { grid-column: 2; width: auto !important; margin: 0 !important; float: none !important; }
.single-product div.product .woocommerce-tabs { grid-column: 1 / -1; }
.single-product div.product .related.products,
.single-product div.product .upsells.products { grid-column: 1 / -1; margin-top: 24px; }

.single-product .product_title { font-family: var(--th-font-heading); font-weight: 600; font-size: 30px; color: var(--th-dark); margin: 0 0 10px; }
.single-product .woocommerce-product-rating { margin-bottom: 14px; }
.single-product .star-rating { color: var(--th-gold); }
.single-product .summary .price { font-size: 26px; font-weight: 700; color: var(--th-dark); margin-bottom: 8px; }
.single-product .summary .price del { color: #aaa; font-weight: 400; }
.single-product .summary .price ins { text-decoration: none; color: #c0202a; }
.single-product .woocommerce-product-details__short-description { color: #555; line-height: 1.7; margin: 14px 0; }
.single-product .th-product-trust { list-style: none; margin: 20px 0; padding: 18px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; display: flex; flex-direction: column; gap: 12px; }
.single-product .th-product-trust li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--th-dark); }
.single-product .th-product-trust__ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #f5f1ea; color: var(--th-gold); flex: 0 0 auto; }
.single-product .summary form.cart { margin: 22px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.single-product .summary .quantity input.qty { width: 64px; height: 50px; border: 1px solid #ddd; border-radius: 100px; text-align: center; }
.single-product .single_add_to_cart_button { background: var(--th-gold) !important; color: #fff !important; border-radius: 100px !important; padding: 15px 34px !important; font-size: 16px !important; font-weight: 600 !important; border: 0 !important; }
.single-product .single_add_to_cart_button:hover { opacity: .92; }
.single-product table.variations { margin: 0 0 16px; }
.single-product table.variations td, .single-product table.variations th { padding: 6px 0; }
.single-product .variations select { border: 1px solid #ddd; border-radius: 100px; padding: 10px 16px; min-width: 200px; }

.single-product .woocommerce-tabs { margin-top: 56px; }
.single-product .woocommerce-tabs .woocommerce-Tabs-panel h2 { font-family: var(--th-font-heading); font-weight: 600; font-size: 24px; }

/* Mobiel: de omschrijving-sectie inklapbaar maken (kop = knop met gouden +/−).
   Desktop = altijd open (gewone kop + tekst). */
@media (max-width: 981px) {
	.single-product .th-product-desc .th-product-desc__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 0; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; cursor: pointer; font-size: 16px; line-height: 1.3; }
	.single-product .th-product-desc__title::after { content: "+"; flex: 0 0 auto; color: var(--th-gold); font-size: 24px; font-weight: 400; line-height: 1; }
	.single-product .th-product-desc.is-open .th-product-desc__title::after { content: "\2212"; }
	.single-product .th-product-desc__body { display: none; overflow: hidden; padding-top: 12px; }
	.single-product .th-product-desc.is-open .th-product-desc__body { display: block; }
}
.single-product .related.products > h2,
.single-product .upsells.products > h2 { font-family: var(--th-font-heading); font-weight: 600; font-size: 26px; text-align: center; margin-bottom: 28px; }

/* ---- Responsive ---- */
@media (max-width: 981px) {
	.single-product div.product { grid-template-columns: 1fr; gap: 28px; }
	.single-product div.product .woocommerce-product-gallery,
	.single-product div.product .summary.entry-summary { grid-column: 1; }
	/* Eén kolom; de sidebar gaat uit de flow en wordt een inschuivend drawer. */
	.th-archive__layout { display: block; }
	.th-archive__main { min-width: 0; }

	/* Volle-breedte "Filter"-knop bovenaan de productkolom (donkere pill, wit icoon). */
	.th-archive__filter-toggle {
		display: inline-flex; align-items: center; justify-content: center; gap: 10px;
		width: 100%; height: 46px; margin: 0 0 16px; padding: 0 20px;
		border: 0; border-radius: 100px; cursor: pointer;
		background: var(--th-dark); color: #fff;
		font-family: var(--th-font-body); font-weight: 700; font-size: 15px;
	}
	.th-archive__filter-toggle__icon { flex: 0 0 auto; }

	/* Filter-drawer: schuift van rechts of links in (instelbaar via de --left/--right-klasse). */
	.th-archive__sidebar {
		position: fixed; top: 0; bottom: 0; width: min(70vw, 340px);
		z-index: 1001; background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
		padding: 16px 22px 40px; transition: transform .28s ease;
	}
	.th-archive__sidebar--right { right: 0; transform: translateX(100%); box-shadow: -4px 0 24px rgba(0,0,0,.18); }
	.th-archive__sidebar--left { left: 0; transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0,0,0,.18); }
	.th-archive__sidebar.is-open { transform: translateX(0); }
	.th-archive__sidebar .sellabees-filter { display: block; }
	.th-archive__filter-close {
		display: inline-flex; align-items: center; justify-content: center;
		margin: 0 0 6px -6px; padding: 6px; background: none; border: 0;
		color: var(--th-dark); cursor: pointer; line-height: 0;
	}
	body.th-filter-open { overflow: hidden; }
	.th-filter-backdrop {
		display: block; position: fixed; inset: 0; z-index: 1000;
		background: rgba(0,0,0,.45); opacity: 0; visibility: hidden;
		transition: opacity .28s ease, visibility .28s ease;
	}
	body.th-filter-open .th-filter-backdrop { opacity: 1; visibility: visible; }

	/* Product-tabs: de default WooCommerce-tabs floaten + gebruiken ::before/::after-
	   connectoren → op mobiel een schuine, overlappende stapel. Hier neutraliseren
	   en als nette, volle-breedte gestapelde knoppen tonen (actieve = wit + goud). */
	.single-product .woocommerce-tabs { margin-top: 32px; }
}
@media (max-width: 767px) {
	/* Mobiel: 2 kolommen (iPad/tablet = 3 via de 1200px-regel, desktop = 4). */
	ul.products { grid-template-columns: 1fr 1fr; gap: 16px; }
}
/* Onder 400px: 2 kolommen blijven (mobiel = 2); prijs + winkelwagenknop op de
   smalle kaart onder elkaar zetten (knop op volle breedte). */
@media (max-width: 400px) {
	li.th-card .th-card__row { flex-direction: column; align-items: stretch; }
	li.th-card .th-card__cart { width: 100%; box-sizing: border-box; }
}

/* ---- Winkelwagen / Afrekenen / Account ---- */
.woocommerce-cart .sellabees-entry__title,
.woocommerce-checkout .sellabees-entry__title,
.woocommerce-account .sellabees-entry__title { font-family: var(--th-font-heading); font-weight: 600; font-size: clamp(26px, 1.4rem + 1.3vw, 32px); color: var(--th-dark); margin: 0 0 28px; }

table.shop_table { border: 1px solid #ececec; border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; width: 100%; }
table.shop_table thead th { background: #f7f7f7; font-weight: 600; color: var(--th-dark); padding: 16px; text-align: left; }
table.shop_table td { padding: 18px 16px; border-top: 1px solid #f1f1f1; vertical-align: middle; }
table.cart .product-thumbnail img { width: 72px; height: auto; border-radius: 8px; }
table.cart .product-remove a.remove { color: #c0202a !important; font-size: 18px; text-decoration: none; }
table.cart .product-name a { color: var(--th-dark); text-decoration: none; font-weight: 500; }
.cart .quantity input.qty { width: 66px; height: 44px; border: 1px solid #ddd; border-radius: 100px; text-align: center; }
.cart-collaterals { display: flex; justify-content: flex-end; margin-top: 28px; }
.cart-collaterals .cart_totals { width: 400px; max-width: 100%; }
.cart_totals h2 { font-family: var(--th-font-heading); font-weight: 600; font-size: 20px; }
.wc-proceed-to-checkout { margin-top: 16px; text-align: right; }
.wc-proceed-to-checkout a.checkout-button { display: inline-block; background: var(--th-gold) !important; color: #fff !important; border-radius: 100px !important; padding: 15px 34px !important; font-size: 16px !important; font-weight: 600 !important; }

.woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.woocommerce-checkout #customer_details { grid-column: 1; }
.woocommerce-checkout h3 { font-family: var(--th-font-heading); font-weight: 600; }
.woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select, .woocommerce-checkout textarea { border: 1px solid #ddd; border-radius: 8px; padding: 12px 14px; width: 100%; box-sizing: border-box; }
.woocommerce-checkout .woocommerce-checkout-review-order { border: 1px solid #ececec; border-radius: 12px; padding: 22px; }
.woocommerce-checkout #place_order { background: var(--th-gold) !important; color: #fff !important; border-radius: 100px !important; padding: 15px 34px !important; font-size: 16px !important; font-weight: 600 !important; width: 100%; border: 0 !important; }

/* Ingelogd dashboard: nav + content naast elkaar (alleen als de nav bestaat). */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 240px 1fr; gap: 44px; align-items: start; }
/* Login + registratie: 2 koloms (registratie staat AAN). */
.woocommerce-account #customer_login { display: flex !important; flex-wrap: wrap; gap: 56px; align-items: flex-start; max-width: 1170px; margin-inline: auto; }
/* WC's .col2-set/.u-columns clearfix ::before/::after tellen in een flex-container als
   flex-items (fantoom-kolommen die elk een 56px-gap opsouperen én de echte kolommen naar
   ~408px versmallen + naar rechts schuiven). Uitschakelen → Login|Registreren krijgen de
   volle designbreedte (2×557px, gap 55, node 302:46062). */
.woocommerce-account #customer_login::before, .woocommerce-account #customer_login::after { display: none !important; }
.woocommerce-account #customer_login > .col-1, .woocommerce-account #customer_login > .col-2 { flex: 1 1 0; min-width: 280px; width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; }
.woocommerce-account #customer_login h2 { font-family: var(--th-font-heading); font-weight: 500; font-size: clamp(26px, 1.4rem + 1.8vw, 38px); color: #000; margin: 0 0 22px; text-align: left; }
.woocommerce-account form .form-row { margin: 0 0 16px; }
.woocommerce-account form .form-row label { font-family: var(--th-font-body); color: #000; }
.woocommerce-account form .form-row input.input-text { width: 100%; background: transparent; border: 1px solid #d9d9d9; border-radius: 3px; padding: 12px 14px; box-sizing: border-box; transition: border-color .15s ease; }
.woocommerce-account form .form-row input.input-text:focus { border-color: var(--th-gold); outline: 0; }
.woocommerce-account #customer_login .col-2 .woocommerce-form-register p { font-family: var(--th-font-body); color: #000; }
.woocommerce-account .woocommerce-form-login__rememberme { font-size: 14px; }
/* Goud-accent links (wachtwoord vergeten / privacybeleid), zoals live. */
.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .woocommerce-privacy-policy-link { color: var(--th-gold) !important; }
@media (max-width: 768px) { .woocommerce-account .u-columns { grid-template-columns: 1fr; } }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid #eee; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 2px; color: var(--th-dark); text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { font-weight: 700; color: var(--th-gold); }
/* WC geeft nav + content een float + zet een (vaak lege) notices-wrapper als eerste
   grid-kind → nav/content belanden zonder ingrijpen in verkeerde cellen/rijen.
   Daarom: floats resetten ÉN expliciet in kolom 1 (nav) / kolom 2 (content) plaatsen;
   notices over de volle breedte. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; margin: 0 !important; }
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; }
.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; }
.woocommerce-account .woocommerce-Addresses.col2-set { display: flex; flex-wrap: wrap; gap: 32px; }
.woocommerce-account .woocommerce-Addresses .col-1,
.woocommerce-account .woocommerce-Addresses .col-2 { float: none !important; width: auto !important; margin: 0 !important; flex: 1 1 240px; }
.woocommerce-account .woocommerce form.login, .woocommerce-account .woocommerce form.register, .woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register { border: 0 !important; padding: 0 !important; max-width: none; margin: 0; border-radius: 0; }
.woocommerce-account #customer_login .col-2 .woocommerce-form-register > p:first-of-type { color: #666; font-size: 14px; }
.woocommerce-account .button, .woocommerce-account button.woocommerce-button, .woocommerce-account button.woocommerce-form-login__submit, .woocommerce-account button.woocommerce-form-register__submit { background: var(--th-dark) !important; color: #fff !important; border-radius: 100px !important; padding: 13px 30px !important; border: 0 !important; }
.woocommerce form .form-row label { font-weight: 500; }

@media (max-width: 768px) {
	.woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) { grid-template-columns: 1fr; }
	.cart-collaterals { justify-content: stretch; }
	.cart-collaterals .cart_totals { width: 100%; }
}