/**
 * Dutch Balance — shop.css
 *
 * Afgesplitst uit extra.css op 12-09-2026 (CSS per template). Alleen regels
 * waarvan elke selector aantoonbaar op één pagina-type voorkomt; alles wat op
 * meerdere plekken gebruikt wordt staat nog in extra.css. Laadt NA extra.css,
 * zie inc/enqueue.php. Volgorde en @media-groepen zijn uit extra.css overgenomen.
 */

.db-search-empty-hero { margin-top: 2.5rem; }

/* ===== Zoekresultaten-pagina ===== */
/* Getemde titel: een lange/onzinnige zoekterm mag de pagina niet opblazen. */
.db-search-title {
	font-size: clamp(1.6rem, 3.5vw, 2.1rem) !important;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* Product-search-results (override van WC's default, templates/product-search-results.html).
   De branded herstel-state (.db-search-empty) is een SIBLING van de collection, want WC's
   product-collection geeft bij 0 treffers een lege string terug (inner query-no-results
   werkt niet). Default verborgen; getoond via de PHP body_class db-search-noresults
   (product-search met 0 treffers, zie inc/woocommerce.php). */
.db-search-page .db-search-empty { display: none; }

.db-search-empty .db-bestsellers-title { padding-top: 3.5rem; }

/* Empty-state-H1 "Geen resultaten voor …" = zelfde getemde behandeling als db-search-title
   (lange/onzin-zoekterm mag de pagina niet opblazen). */
.db-search-empty-title { font-size: clamp(1.6rem, 3.5vw, 2.1rem) !important; line-height: 1.25; overflow-wrap: anywhere; }

.db-shop-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(1.875rem, 3.8vw, 2.75rem) !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	color: var(--wp--preset--color--forest) !important;
	letter-spacing: -0.005em;
}

.db-shop {
	max-width: 100% !important;
}

.db-shop-sidebar {
	flex-basis: 240px !important;
	flex-shrink: 0;
}

@media (min-width: 1024px) {
	.db-shop-sidebar {
		align-self: flex-start;
		padding-top: 0; /* geen offset — eerste filtergroep lijnt strak met H1-top */
	}
}

.db-shop-main {
	flex: 1 1 0 !important;
	min-width: 0;
}

/* WP zet block-flow margin-top (16px) op elke filter-wrapper omdat .db-shop-filters
   is-layout-flow is — daardoor zakt de eerste filtergroep onder de H1-top. Wegnemen,
   we sturen de gap zelf via border-bottom hieronder. (= dezelfde block-margin-valkuil
   als elders, nu binnen de sidebar) */
.db-shop-filters > * {
	margin-block-start: 0 !important;
}

/* Scheidingslijn + ruimte ONDER elke filtergroep (border-bottom = geen lijn boven groep 1) */
.db-shop-filters > .wp-block-woocommerce-filter-wrapper {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--db-border-subtle);
}

.db-shop-filters > .wp-block-woocommerce-filter-wrapper:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* Active-filters-wrapper collapsen zolang er geen chips zijn (anders 3rem dood-ruimte boven Soort CBD) */
.db-shop-filters > .wp-block-woocommerce-filter-wrapper:has(.db-shop-filter-active):not(:has(li)) {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* Filter-group titles (de "Spectrum type" / "CBD sterkte" labels) */
.db-shop-filters h3,
.db-shop-filters .wc-block-product-filter__title,
.db-shop-filters .wp-block-heading {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--charcoal) !important;
	letter-spacing: 0 !important;
	margin: 0 0 0.75rem 0 !important;
	text-transform: none !important;
}

/* Checkbox + label per optie */
.db-shop-filters label,
.db-shop-filters .wc-block-checkbox-list__label {
	display: flex !important;
	align-items: center !important;
	gap: 0.6rem;
	padding: 0.15rem 0;
	font-size: 13px;
	color: var(--wp--preset--color--charcoal-soft);
	cursor: pointer;
	transition: color 150ms;
}

/* Filter-list items strak — WC li's krijgen anders eigen marge */
.db-shop-filters ul,
.db-shop-filters .wc-block-checkbox-list,
.db-shop-filters .wc-block-components-checkbox-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.db-shop-filters li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

/* WC zet margin-top:20px op elke checkbox-wrapper → veel te ruim. Strakker. */
.db-shop-filters .wc-block-components-checkbox {
	margin: 0 !important;
}

.db-shop-filters li + li .wc-block-components-checkbox {
	margin-top: 0.35rem !important;
}

.db-shop-filters label:hover {
	color: var(--wp--preset--color--forest);
}

/* ===== Per-filter "Herstellen"-reset-knop weg (redundant: Alles wissen + chip-× + uitvinken) ===== */
.db-shop-filters .wc-block-components-filter-reset-button {
	display: none !important;
}

/* ===== Checkbox in filter-opties — eigen vorm, forest bij checked/hover + Lucide-check (wit) =====
   WC's eigen checkmark-SVG (.wc-block-components-checkbox__mark) verbergen we volledig;
   de vink tekenen we zelf als Lucide "check" via background-image op de input. Zo zit 'ie
   altijd perfect gecentreerd in het 18px vlak. */
.db-shop-filters .wc-block-components-checkbox__mark {
	display: none !important;
}

.db-shop-filters .wc-block-components-checkbox__input[type="checkbox"],
.db-shop-filters input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	min-width: 18px;
	margin: 0;
	border: 1.5px solid var(--db-border-input);
	border-radius: 4px;
	/* WC zet eigen background-size/position met hoge specificity → !important nodig */
	background-color: #fff !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: 11px 11px !important;
	background-image: none !important;
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color 150ms, border-color 150ms;
}

/* Lucide "check" — witte stroke, gecentreerd. Toegepast bij checked én hover (preview). */
.db-shop-filters .wc-block-components-checkbox:hover .wc-block-components-checkbox__input,
.db-shop-filters label:hover input[type="checkbox"],
.db-shop-filters .wc-block-components-checkbox__input[type="checkbox"]:checked,
.db-shop-filters input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--forest) !important;
	border-color: var(--wp--preset--color--forest) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important;
}

/* Count rechts naast optie */
.db-shop-filters .wc-block-checkbox-list__label-text,
.db-shop-filters .wc-filter-element-label-list-count {
	margin-left: auto;
	font-size: 11px;
	color: var(--wp--preset--color--text-muted);
}

/* ===== NIEUWE WC PRODUCT FILTERS (WC 10.9, product-filter-*) — huisstijl =====
   De generieke .db-shop-filters input/label/h3-regels hierboven pakken al op de
   nieuwe blokken. Hier het nieuwe-blok-specifieke: groep-dividers, item-spacing,
   WC's eigen check-SVG verbergen (we tekenen de vink zelf via de input-background),
   naam+count-uitlijning, en de nieuwe actieve-chips + wis-knop. Scoped op
   .db-shop-filters-inner (= de product-filters container) voor voldoende specificity. */
/* Descendant (niet >): de groepen zitten genest in __overlay-content, niet als
   directe child van .db-shop-filters-inner. */
.db-shop-filters-inner .db-shop-filter-group {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--db-border-subtle);
}

.db-shop-filters-inner .db-shop-filter-group:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* Header-groep (flex-wrapper om de h3) — geen extra marge, kop levert de ruimte */
.db-shop-filters-inner .db-shop-filter-group > .wp-block-group {
	margin: 0 0 0.75rem 0;
	gap: 0;
}

/* Lijst-structuur (nieuwe blok gebruikt divs, geen li's) */
.db-shop-filters-inner .wc-block-product-filter-checkbox-list fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.db-shop-filters-inner .wc-block-product-filter-checkbox-list__items {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.db-shop-filters-inner .wc-block-product-filter-checkbox-list__item {
	margin: 0;
}

.db-shop-filters-inner .wc-block-product-filter-checkbox-list__label {
	width: 100%;
}

/* Checkbox-vlak: 18px, WC's eigen check-SVG verbergen (vink komt van input-background) */
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__input-wrapper {
	position: relative;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.db-shop-filters-inner .wc-block-product-filter-checkbox-list__input-wrapper svg {
	display: none !important;
}

/* WC tekent een grijze ::before-overlay (rgb(74,74,74)) in de wrapper → het "grijze
   blokje" ín de checkbox. Verbergen; onze vink komt van de input-background. */
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__input-wrapper::before,
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__input-wrapper::after {
	display: none !important;
	content: none !important;
	background: none !important;
}

/* Rating-filter sterren → standaard sterrenkleur (--goal-energie, = reviews/PDP-sterren) i.p.v. grijs */
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__stars svg {
	color: var(--wp--preset--color--goal-energie);
}

.db-shop-filters-inner .wc-block-product-filter-checkbox-list__stars svg path,
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__stars svg g {
	fill: var(--wp--preset--color--goal-energie) !important;
}

/* ===== WC Product Filters overlay UITGESCHAKELD — wij gebruiken onze EIGEN flyout =====
   Het WC-overlay-mechanisme botste met onze eigen mobiele flyout (shop.js: FAB +
   .db-shop-sidebar.is-open + topbalk = het menu-patroon). Twee systemen = kapot.
   Oplossing: WC's overlay-keten platslaan tot normale inline-flow, zodat de filters
   ALTIJD gewoon in de sidebar renderen — en onze flyout toont die sidebar full-cover
   op mobiel. WC's eigen knop/header/footer/× verbergen (wij leveren FAB + balk zelf). */
.db-shop-filters-inner {
	display: block !important; /* WC zet 'm soms op inline-flex */
}

.db-shop-filters-inner .wc-block-product-filters__overlay,
.db-shop-filters-inner .wc-block-product-filters__overlay-wrapper,
.db-shop-filters-inner .wc-block-product-filters__overlay-dialog,
.db-shop-filters-inner .wc-block-product-filters__overlay-content {
	position: static !important;
	display: block !important;
	inset: auto !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	z-index: auto !important;
	overflow: visible !important;
	padding: 0 !important;
	margin: 0 !important;
	transform: none !important;
}

/* WC's eigen overlay-chrome verbergen — wij leveren FAB + topbalk zelf (shop.js) */
.wc-block-product-filters__open-overlay,
.wc-block-product-filters__overlay-header,
.wc-block-product-filters__overlay-footer,
.wc-block-product-filters__close-overlay,
.wc-block-product-filters__apply {
	display: none !important;
}

/* Naam links + count rechts */
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__text-wrapper {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-width: 0;
}

.db-shop-filters-inner .wc-block-product-filter-checkbox-list__count {
	color: var(--wp--preset--color--text-muted);
	font-size: 11px;
	flex-shrink: 0;
}

/* Actieve filters (nieuwe blok) — titel "Actieve filters" + "Alles wissen" rechtsboven
   + chips eronder (= de oude look). Alleen tonen als er echt filters actief zijn. */
.db-shop-filters-inner .db-shop-filter-active {
	position: relative;
	display: block;
}

.db-shop-filters-inner .db-shop-filter-active:not(:has(.wc-block-product-filter-removable-chips__item)) {
	display: none !important; /* geen actieve filters → hele blok (titel incl.) weg */
}

.db-shop-filters-inner .db-shop-filter-active:has(.wc-block-product-filter-removable-chips__item) {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--db-border-subtle);
}

.db-shop-filter-active-title {
	margin: 0 0 0.75rem 0 !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--charcoal) !important;
	line-height: 1.4;
}

/* Chips-lijst */
.db-shop-filters-inner .wc-block-product-filter-removable-chips__items {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Chip = pill (zachtgroen + forest, = "Bespaar"-chip-tint) */
.db-shop-filters-inner .wc-block-product-filter-removable-chips__item {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0;
	padding: 0.2rem 0.35rem 0.2rem 0.65rem;
	background: #ECF3F0;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--wp--preset--color--forest);
}

.db-shop-filters-inner .wc-block-product-filter-removable-chips__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: var(--wp--preset--color--forest);
	opacity: 0.7;
	transition: opacity 150ms;
}

.db-shop-filters-inner .wc-block-product-filter-removable-chips__remove:hover {
	opacity: 1;
}

.db-shop-filters-inner .wc-block-product-filter-removable-chips__remove svg {
	width: 12px;
	height: 12px;
}

/* "Alles wissen" — teal-linkje rechtsboven op titel-hoogte (absoluut, = oude look) */
.db-shop-filters-inner .wp-block-woocommerce-product-filter-clear-button {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0 !important;
	color: var(--wp--preset--color--teal);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	background: transparent;
	border: 0;
	padding: 0;
	white-space: nowrap;
}

.db-shop-filters-inner .wp-block-woocommerce-product-filter-clear-button:hover {
	color: var(--wp--preset--color--forest);
	text-decoration: underline;
}

/* Checkbox expliciet op de nieuwe-blok-klasse — voorkomt native grijze render:
   ongevinkt = zuiver wit + subtiele rand, gevinkt = forest + witte Lucide-check. */
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__input {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	border: 1.5px solid var(--db-border-input) !important;
	border-radius: 4px !important;
	background-color: #fff !important;
	background-image: none !important;
	box-shadow: none !important;
	cursor: pointer;
}

.db-shop-filters-inner .wc-block-product-filter-checkbox-list__label:hover .wc-block-product-filter-checkbox-list__input,
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__input:checked {
	background-color: var(--wp--preset--color--forest) !important;
	border-color: var(--wp--preset--color--forest) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 11px 11px !important;
}

/* Rating-filter sterren — Lucide-sterren ipv WC-iconfont (consistent met PDP-review-sterren + "overal Lucide").
   WC-structuur: DIV.__stars (::before = lege backdrop) > inner SPAN (::before = gevulde, width-geclipt op rating).
   We verbergen de iconfont-tekst (font-size:0 + content:'') en tekenen 5 Lucide-sterren via repeterende background. */
.db-shop-filters .wc-block-components-product-rating__stars {
	position: relative;
	display: inline-block;
	width: 80px; /* 5 × 16px */
	height: 16px;
	font-size: 0 !important; /* verberg iconfont "SSSSS" */
	line-height: 0;
}

.db-shop-filters .wc-block-components-product-rating__stars::before {
	content: '' !important;
	display: block;
	width: 80px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C47D3A' stroke-width='1.75' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 16px 16px;
	opacity: 0.4; /* lege sterren: lichte outline */
}

.db-shop-filters .wc-block-components-product-rating__stars span {
	position: absolute;
	top: 0;
	left: 0;
	height: 16px;
	overflow: hidden; /* width-geclipt op rating door WC inline-style */
	display: block;
}

.db-shop-filters .wc-block-components-product-rating__stars span::before {
	content: '' !important;
	display: block;
	width: 80px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C47D3A' stroke='%23C47D3A' stroke-width='1.75' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 16px 16px;
}

/* "(N)"-count na de sterren iets ademruimte geven */
.db-shop-filters .wc-block-components-product-rating-count {
	margin-left: 0.4rem;
	font-size: 11px;
	color: var(--wp--preset--color--text-muted);
}

/* ===== Active-filters: "Actieve filters" titel links + "Alles wissen" rechts, chips eronder =====
   Structuur: .db-shop-filter-active > [H3 titel] + [.wc-block-active-filters > UL chips + BUTTON clear].
   Titel en clear-button zitten in verschillende parents → clear absoluut top-right positioneren. */
.db-shop-filter-active {
	position: relative;
}

/* .wc-block-active-filters mag GEEN positioning-context zijn, anders refereert de
   absolute clear-all aan dit element (begint onder de titel) ipv aan de wrapper. */
.db-shop-filter-active .wc-block-active-filters {
	position: static;
}

/* Titel "Actieve filters" — zelfde stijl als filtergroep-koppen (h3) */
.db-shop-filter-active .wc-block-active-filters__title,
.db-shop-filter-active > h3 {
	margin: 0 0 0.75rem 0 !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--charcoal) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	line-height: 1.4;
}

/* "Alles wissen" — klein teal-linkje rechtsboven, op titel-hoogte.
   WC zet margin-top:15px → nullen, anders zakt de absolute knop omlaag. */
.db-shop-filter-active .wc-block-active-filters__clear-all {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0 !important;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--wp--preset--color--teal);
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	padding: 0;
	white-space: nowrap;
	line-height: 1.4;
}

.db-shop-filter-active .wc-block-active-filters__clear-all:hover {
	color: var(--wp--preset--color--forest);
	text-decoration: underline;
}

/* Chips-lijst, volle breedte onder de titel */
.db-shop-filter-active .wc-block-active-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* WC voegt per chip een type-prefix toe ("Soort CBD:") als los span — verbergen, de groep-context is duidelijk */
.db-shop-filter-active .wc-block-active-filters__list-item-type {
	display: none;
}

/* LI = transparante container (GEEN eigen pill — anders dubbele badge). De echte pill = .wc-block-components-chip erbinnen. */
.db-shop-filter-active .wc-block-active-filters__list-item {
	display: inline-flex;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

/* De pill zelf = WC's chip-element. Gevulde lichte teal-bg, geen border, pill-vorm. */
.db-shop-filter-active .wc-block-components-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	background: rgba(74, 124, 111, 0.12) !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 3px 4px 3px 11px !important;
	min-height: 0 !important;
	color: var(--wp--preset--color--forest) !important;
}

.db-shop-filter-active .wc-block-components-chip__text {
	font-size: 11px !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--forest) !important;
	padding: 0 !important;
	line-height: 1.4 !important;
}

/* ×-remove-knop: grijze cirkel weg, subtiel forest-icoontje */
.db-shop-filter-active .wc-block-components-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	min-width: 16px;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 50% !important;
	color: var(--wp--preset--color--forest) !important;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 150ms, background 150ms;
}

.db-shop-filter-active .wc-block-components-chip__remove:hover {
	opacity: 1;
	background: rgba(45, 74, 62, 0.1) !important;
}

.db-shop-filter-active .wc-block-components-chip__remove svg {
	width: 11px;
	height: 11px;
	fill: currentColor;
}

/* Categorie-titel + beschrijving */
.db-shop-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(1.875rem, 3.5vw, 2.375rem) !important; /* 38px desktop */
	font-weight: 400 !important;
	line-height: 1.15 !important;
	color: var(--wp--preset--color--forest) !important;
	letter-spacing: -0.005em;
	margin: 0 0 0.75rem 0 !important;
}

/* Korte intro onder H1 (eerste alinea van cat-omschrijving) — volle breedte product-area */
.db-shop-intro {
	font-size: 14px;
	line-height: 1.7;
	color: var(--wp--preset--color--charcoal-soft);
	margin: 0 0 1.5rem 0;
}

/* SEO-sectie — binnen product-kolom, lijnt uit met intro + grid. "Meer over [cat]"-divider + prose */
.db-shop-seo {
	margin-top: 3.5rem; /* scheiding van het grid puur via witruimte, geen lijn */
}

.db-shop-seo-inner {
	max-width: 100%;
	margin: 0;
}

.db-shop-seo-prose {
	font-size: 15px;
	line-height: 1.75;
	color: var(--wp--preset--color--charcoal);
}

/* Toolbar (count + sort-dropdown) — boven het grid. Geen border, alleen ademruimte. */
.db-shop-toolbar {
	margin-bottom: 1.5rem;
	gap: 1rem !important;
}

.db-shop-count {
	font-size: 13px;
	color: var(--wp--preset--color--text-muted);
}

.db-shop-sort select,
.db-shop-sort .wc-block-product-sort-select__select {
	appearance: none;
	border: 1.5px solid var(--db-border-subtle);
	background: white;
	padding: 0.6rem 2rem 0.6rem 0.85rem;
	border-radius: var(--db-radius-input-shape);
	font-size: 13px;
	color: var(--wp--preset--color--charcoal);
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A7A7A' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}

/* Lege-staat */
.db-shop-empty {
	color: var(--wp--preset--color--text-muted);
	font-size: 15px;
	padding: 4rem 1rem;
}

.db-shop-empty a {
	color: var(--wp--preset--color--teal);
	text-decoration: underline;
}

@media (max-width: 1023px) {
	.db-shop-sidebar {
		position: fixed;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100dvh; /* expliciet — anders wordt 'ie content-hoog (geen interne scroll) */
		background: var(--wp--preset--color--warm-white);
		z-index: 200; /* boven de sticky header (100) — dekt 'm volledig */
		padding: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		box-shadow: none;
		display: none;
	}

	/* Topbalk: "Filters" links + X rechts (zoals het menu). JS-gebouwd. */
	.db-shop-filters-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.875rem 1.5rem;
		border-bottom: 1px solid var(--db-border-subtle);
		background: var(--wp--preset--color--warm-white);
	}

	.db-shop-filters-title {
		font-family: var(--wp--preset--font-family--heading);
		font-size: 1.25rem;
		font-weight: 500;
		color: var(--wp--preset--color--forest);
	}

	.db-shop-filters-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 26px;
		height: 26px;
		padding: 0;
		background: transparent;
		border: 0;
		color: var(--wp--preset--color--charcoal);
		cursor: pointer;
	}

	.db-shop-filters-close svg {
		width: 24px;
		height: 24px;
	}

	/* Filter-content krijgt eigen padding (sidebar zelf is padding:0 nu).
	   Bottom 2.5rem = gelijk aan de menu-overlay (consistent). De scroll-clearance
	   komt al van height:100dvh, niet van extra padding. */
	.db-shop-sidebar .db-shop-filters {
		padding: 1.25rem 1.5rem 2.5rem;
	}

	/* Mobile floating "Filters"-FAB */
	.db-shop-filters-fab {
		position: fixed;
		bottom: 1.25rem;
		left: 50%;
		transform: translateX(-50%);
		z-index: 60;
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.85rem 1.25rem;
		background: var(--wp--preset--color--forest);
		color: white;
		border: 0;
		border-radius: 999px;
		font-size: 13px;
		font-weight: 500;
		cursor: pointer;
		box-shadow: 0 8px 24px rgba(45, 74, 62, 0.35);
		transition: background 150ms;
	}

	.db-shop-filters-fab:hover {
		background: var(--wp--preset--color--forest-deep);
	}

	/* Aantal actieve filters als badge op de FAB (wit rondje, forest cijfer). */
	.db-shop-filters-fab-count {
		display: none;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		box-sizing: border-box;
		border-radius: 999px;
		background: #fff;
		color: var(--wp--preset--color--forest);
		font-size: 11px;
		font-weight: 600;
		line-height: 18px;
		text-align: center;
	}
}

/* ===== FIX 2026-07-01: active-filter pills + wis-knop (live) ===== */
/* Pill: teal 8% gevuld, geen border, nette padding. !important want WC's eigen
   .__items .__item-regel (border + padding:0) is even specifiek en wint anders. */
.db-shop-filters-inner .wc-block-product-filter-removable-chips__item {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.375rem !important;
	margin: 0 !important;
	padding: 0.25rem 0.45rem 0.25rem 0.7rem !important;
	background: rgba(74, 124, 111, 0.08) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-size: 12px !important;
	line-height: 1.3 !important;
	color: var(--wp--preset--color--forest) !important;
}

/* "Wis filters" bevat nu een genest core/button (nodig voor de handler) -> kaal teal-linkje */
.db-shop-filters-inner .wp-block-woocommerce-product-filter-clear-button .wp-block-buttons,
.db-shop-filters-inner .wp-block-woocommerce-product-filter-clear-button .wp-block-button {
	margin: 0 !important;
	padding: 0 !important;
}

.db-shop-filters-inner .wp-block-woocommerce-product-filter-clear-button .wp-block-button__link {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--teal) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	white-space: nowrap !important;
	cursor: pointer !important;
}

.db-shop-filters-inner .wp-block-woocommerce-product-filter-clear-button .wp-block-button__link:hover {
	color: var(--wp--preset--color--forest) !important;
	background: transparent !important;
	text-decoration: underline !important;
}

/* ===== FIX mobiel klikbaar (<=600px) — pointer-events =====
   WC zet .__overlay op pointer-events:none buiten de @media(min-width:601px)-override.
   Onze flatten miste dit -> op telefoons zag je de filters wel maar kon je niks
   aanklikken. Overlay-keten forceren op pointer-events:auto (alle breedtes). */
.db-shop-filters-inner .wc-block-product-filters__overlay,
.db-shop-filters-inner .wc-block-product-filters__overlay-wrapper,
.db-shop-filters-inner .wc-block-product-filters__overlay-dialog,
.db-shop-filters-inner .wc-block-product-filters__overlay-content {
	pointer-events: auto !important;
}

/* ===== Shop-index categorie-hub (/webshop/) ===== */
.db-shop-hub-cards { margin-top: 1.5rem; margin-bottom: 3rem; }

/* Intro smaller houden voor prettiger regellengte — uitzondering, alleen op de hub.
   Blijft links uitgelijnd (geen centrering). */
.db-shop-hub .db-shop-intro { max-width: 900px; }

@media (max-width: 767px) {
	/* Compacter + veilige woordafbreking voor lange namen (huidverzorging, wateroplosbaar). */
	.db-shop-hub-cards .db-cat-card-body { padding: 0.8rem 0.85rem; gap: 0.4rem; }

	.db-shop-hub-cards .db-cat-card-name { font-size: 14.5px; overflow-wrap: break-word; }

	.db-shop-hub-cards .db-cat-card-arrow { width: 32px; height: 32px; flex-shrink: 0; }
}

/* ===== Rating-filter sterren FIX (Valentijn 2026-07-02) =====
   Nieuwe woocommerce/product-filter-rating: .__stars-span heeft inline width:X%
   (fill-ratio) + overflow:hidden rond een vaste 5-sterren-svg. WC's %-breedte
   rekende tegen de brede rij -> clip pakte nooit -> elke regel toonde 5 volle
   sterren (4 en 5 niet te onderscheiden). Fix: rij = grid met vaste sterren-
   kolom (80px = 5x16), zodat width:X% tegen die 80px rekent en overflow correct
   clipt (80% -> 4 sterren). Faint outline-backdrop toont de 'lege' 5e ster
   (zelfde look als PDP/kaart). Vervangt de oude niet-matchende
   .wc-block-components-product-rating__stars-regels hierboven. */
.wp-block-woocommerce-product-filter-rating .wc-block-product-filter-checkbox-list__text-wrapper {
	display: grid;
	grid-template-columns: 80px auto;
	align-items: center;
	column-gap: 0.5rem;
	width: auto;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' fill='none' stroke='%23C47D3A' stroke-opacity='0.32' stroke-width='1.75' stroke-linejoin='round'%3E%3Cdefs%3E%3Cpolygon id='s' points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/defs%3E%3Cuse href='%23s' x='0'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='72'/%3E%3Cuse href='%23s' x='96'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 80px 16px;
}

.wp-block-woocommerce-product-filter-rating .wc-block-product-filter-checkbox-list__stars {
	overflow: hidden;
	height: 16px;
	line-height: 0;
}

.wp-block-woocommerce-product-filter-rating .wc-block-product-filter-checkbox-list__stars svg {
	width: 80px !important;
	height: 16px !important;
	max-width: none !important;
	display: block;
}

.wp-block-woocommerce-product-filter-rating .wc-block-product-filter-checkbox-list__count {
	font-size: 11px;
	color: var(--wp--preset--color--text-muted);
}