@charset "UTF-8";
/* WC Plus — FacetWP facet styling (FacetWP's own CSS is disabled; token-driven). */

/* Sidebar filter blocks */
.wcp-filter {
	border-bottom: 1px solid var(--wcp-color-border);
	padding: 0.25rem 0;
}
.wcp-filter__label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 1rem;
}
.wcp-filter__label button {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 0.6rem 0;
	background: none;
	border: 0;
	font: inherit;
	font-weight: var(--wcp-font-weight-bold);
	color: inherit;
	cursor: pointer;
	text-align: left;
}
/* Chevron mirrors the shared FAQ/accordion pattern */
.wcp-filter__label button::after {
	content: '';
	margin-left: auto;
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
.wcp-filter__label button[aria-expanded="false"]::after { transform: rotate(-45deg); }
.wcp-filter__body { display: none; padding-bottom: 0.75rem; }
.wcp-filter__body.is-open { display: block; }
.wcp-filter__label .svg-icon__help-fill { color: var(--wcp-color-muted); cursor: pointer; }

/* FacetWP checkboxes */
.facetwp-checkbox {
	background: none !important;
	padding-left: 1.9rem;
	position: relative;
	margin-bottom: 0.45rem;
	font-size: var(--wcp-font-size-sm);
	cursor: pointer;
}
/* Klikbaar laten voelen: handcursor en hover/focus in de merkkleur (was er niet: de eigen
   checkbox-tekening verving FacetWP's opmaak zonder cursor en hover mee te nemen). */
.facetwp-radio,
.facetwp-facet .facetwp-toggle,
.facetwp-facet .facetwp-slider-reset { cursor: pointer; }
.facetwp-checkbox:hover,
.facetwp-radio:hover,
.facetwp-checkbox:focus-visible,
.facetwp-radio:focus-visible { color: var(--wcp-color-primary); }
.facetwp-checkbox:hover::before,
.facetwp-checkbox:focus-visible::before { border-color: var(--wcp-color-primary); }
.facetwp-checkbox::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.05rem;
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid var(--wcp-checkbox-border, var(--wcp-color-border));
	/* var(--wcp-radius-sm) is 0.5rem — exact de helft van dit vakje, dus een perfecte cirkel
	   i.p.v. een licht afgeronde checkbox. Vaste 4px zoals de andere checkboxes in de plugin
	   (bv. .additional-accessories .form-check-input, single-product.css). */
	border-radius: 4px;
	background: var(--wcp-color-surface, #fff);
}
.facetwp-checkbox.checked::before {
	background-color: var(--wcp-color-primary);
	border-color: var(--wcp-color-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E");
	background-size: 0.85rem;
	background-position: center;
	background-repeat: no-repeat;
}
.facetwp-counter { margin-left: 0.3em; color: var(--wcp-color-muted); }

/* Kleur-swatches (FacetWP "color" facet-type, .facetwp-color): kale vendor-defaults (30x30
   vierkant, geen rand/radius, geen selectie-ring) — hier token-driven en rond gemaakt. */
.facetwp-facet[data-type="color"] {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.facetwp-color {
	width: 1.75rem !important;
	height: 1.75rem !important;
	margin: 0 !important;
	border: 1px solid var(--wcp-color-border);
	border-radius: 50%;
	cursor: pointer;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.facetwp-color:hover,
.facetwp-color:focus-visible { transform: scale(1.08); }
.facetwp-color.checked {
	box-shadow: 0 0 0 2px var(--wcp-color-surface, #fff), 0 0 0 4px var(--wcp-color-primary);
}
.facetwp-toggle {
	display: inline-block;
	margin-top: 0.5rem;
	color: var(--wcp-color-primary);
	font-size: var(--wcp-font-size-sm);
	cursor: pointer;
}

/* FacetWP verbergt met deze klasse de ingeklapte items en de tegenoverliggende
   toggle. De regel staat in FacetWP's eigen stylesheet, die shops met eigen
   opmaak uitzetten; zonder deze regel staan "Toon meer" en "Toon minder"
   tegelijk in beeld en zijn de ingeklapte opties niet ingeklapt. */
.facetwp-hidden {
	display: none !important;
}

/* Price slider — noUiSlider's eigen CSS (nouislider.css) levert alleen kale vendor-defaults
   (grijs #fafafa-vlak van 18px hoog, vierkante handles); hier een dunne track van 4px met de actieve
   reeks in de merkkleur, ronde handles en het label als twee waardes (wcp-facetwp.js). */
.facetwp-facet .facetwp-slider-wrap { padding: 0.5rem 0.5625rem 0; }
.facetwp-facet .noUi-target.noUi-horizontal {
	height: 4px;
	border: 0;
	border-radius: 999px;
	background: var(--wcp-color-border);
	box-shadow: none;
}
.facetwp-facet .noUi-connect {
	background: var(--wcp-color-primary);
	border-radius: 999px;
}
.facetwp-facet .noUi-horizontal .noUi-handle {
	width: 1.125rem;
	height: 1.125rem;
	right: -0.5625rem;
	top: calc((4px - 1.125rem) / 2);
	border: 2px solid var(--wcp-color-primary);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	cursor: grab;
}
.facetwp-facet .noUi-horizontal .noUi-handle:active { cursor: grabbing; }
.facetwp-facet .noUi-handle:focus-visible { outline: 2px solid var(--wcp-color-primary); outline-offset: 2px; }
.facetwp-facet .noUi-handle::before,
.facetwp-facet .noUi-handle::after { display: none; }
.facetwp-facet .facetwp-slider-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.875rem;
	font-size: var(--wcp-font-size-sm);
}
.facetwp-facet .wcp-range__value {
	flex: 1 1 0;
	min-width: 0;
	padding: 0.375rem 0.625rem;
	border: var(--wcp-border-width) solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: var(--wcp-color-surface);
	color: var(--wcp-color-text);
	font-weight: var(--wcp-font-weight-semibold, 600);
	font-variant-numeric: tabular-nums;
	text-align: center;
	white-space: nowrap;
}
.facetwp-facet .wcp-range__sep { flex: none; color: var(--wcp-color-muted); }
/* Wist alleen de prijs; als knop concurreert hij met de reset-facet
   ("Selectie wissen") die alle filters wist. Daarom een ingetogen tekstlink. */
.facetwp-slider-reset {
	margin-top: 0.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wcp-color-muted);
	font-size: var(--wcp-font-size-sm);
	text-decoration: underline;
	cursor: pointer;
}
.facetwp-slider-reset:hover { color: var(--wcp-color-primary); }

/* Reset button */
.facetwp-facet-reset .facetwp-reset,
.facetwp-reset {
	display: inline-block;
	margin-top: 0.75rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: #fff;
	font-size: var(--wcp-font-size-sm);
	cursor: pointer;
}
.facetwp-reset:hover { border-color: var(--wcp-color-primary); }

/* Brand-logo facet (brand slider on taxonomy pages) */
.brand-slider .facetwp-checkbox {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem;
	margin: 0 0.5rem 0 0;
	border: 1px solid var(--wcp-color-border);
	border-radius: var(--wcp-radius);
	background: #fff !important;
}
.brand-slider .facetwp-checkbox::before { display: none; }
.brand-slider .facetwp-checkbox.checked { border-color: var(--wcp-color-primary); }
.brand-slider .brand-logo { max-height: 2.5rem; width: auto; }
.brand-slider .facetwp-counter { display: none; }

/* Mobile filter button + canvas */
.wcp-filter-btn { display: inline-flex; align-items: center; gap: 0.4rem; }
@media (min-width: 48rem) {
	.wcp-filter-btn { display: none; }
}
.wcp-filter-canvas__actions { margin-top: auto; padding-top: 1rem; }

/* WC+-basisstijl: vinkje vóór het label in een flexregel, aantal rechts uitgelijnd (zonder haakjes, zie
   wcp_facetwp_counter_without_parentheses), grotere kleurbolletjes. */
.facetwp-checkbox { display: flex; align-items: center; gap: 0.65rem; margin: 0; padding: 0.3rem 0 !important; font-size: 0.9375rem; color: var(--wcp-color-text); }
.facetwp-checkbox::before { position: static; flex: none; border-radius: 0.3rem; }
.facetwp-checkbox .facetwp-display-value { min-width: 0; }
.facetwp-counter { margin-left: auto; padding-left: 0.5rem; font-size: var(--wcp-font-size-sm); color: var(--wcp-color-muted); font-variant-numeric: tabular-nums; }
.facetwp-facet[data-type="color"],
.facetwp-type-color { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.facetwp-color { width: 2rem !important; height: 2rem !important; }
.facetwp-toggle { margin-top: 0.35rem; }

/* Filterkop met uitleg-icoon: "Kleur ⓘ ……… ⌄" — het icoon direct achter het woord en de chevron rechts (stond
   achter de chevron, want het icoon staat ná de knop). De chevron hangt aan de kop; de knop dekt met ::before de
   hele kop, zodat ook klikken op de chevron in- en uitklapt; het icoon ligt erboven en blijft eigen klikbaar. */
.wcp-filter__label { position: relative; justify-content: flex-start; gap: 0.4rem; }
.wcp-filter__label button { flex: 0 1 auto; position: static; }
/* Ook als een thema de knop de volle breedte geeft (width: 100%): het uitleg-icoon blijft direct achter de naam (#187). */
.wcp-filter__label:has(> .svg-icon__help-fill) { justify-content: flex-start; }
.wcp-filter__label:has(> .svg-icon__help-fill) > button { width: auto; }
.wcp-filter__label button::before { content: ''; position: absolute; inset: 0; }
.wcp-filter__label button::after { display: none; }
.wcp-filter__label::after {
	content: '';
	flex: none;
	margin-left: auto;
	width: 0.45em;
	height: 0.45em;
	border-right: 1.5px solid var(--wcp-color-muted);
	border-bottom: 1.5px solid var(--wcp-color-muted);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	pointer-events: none;
}
.wcp-filter__label:has(> button[aria-expanded="false"])::after { transform: rotate(-45deg); }
.wcp-filter__label .svg-icon__help-fill { position: relative; z-index: 1; font-size: 0.875em; }