/**
 * Geus Filters — Frontend CSS
 * Versie: 1.2.1
 *
 * Design: Modern, mobiel-first, Flatsome-compatible.
 * Fase 4: Color swatches, Infinite scroll stijlen.
 * 1.2.1: Polish — keyboard focus, custom scrollbar, checked-state, reduced motion,
 *         sectie-kopjes met achtergrondband, verbergen handmatige widget-titel/divider.
 */

/* =========================================================
   1. CSS Custom Properties
   ========================================================= */
:root {
	--gf-primary:        #0073aa;
	--gf-primary-dark:   #005a87;
	--gf-primary-light:  #e8f4fb;
	--gf-text:           #1d2327;
	--gf-text-muted:     #6b7280;
	--gf-heading-bg:     #f1f5f9;
	--gf-border:         #e2e8f0;
	--gf-bg:             #ffffff;
	--gf-bg-hover:       #f8fafc;
	--gf-radius:         8px;
	--gf-radius-sm:      4px;
	--gf-shadow-sm:      0 1px 3px rgba(0, 0, 0, .08);
	--gf-shadow:         0 4px 16px rgba(0, 0, 0, .12);
	--gf-focus-ring:     0 0 0 3px rgba(0, 115, 170, .35);
	--gf-transition:     .2s cubic-bezier(.4, 0, .2, 1);
	--gf-font:           -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--gf-sidebar-width:  260px;
	/* Flatsome integratie: koppel aan de sidebar breedte van Flatsome als die beschikbaar is */
	--gf-sidebar-width: var(--sidebar-width, 260px);
}

/* =========================================================
   2. Layout wrapper
   ========================================================= */
.geus-filters-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	width: 100%;
	box-sizing: border-box;
}

/* =========================================================
   3. Sidebar (desktop)
   ========================================================= */
.geus-filters-sidebar {
	width: var(--gf-sidebar-width);
	flex-shrink: 0;
	background: var(--gf-bg);
	border: 1px solid var(--gf-border);
	border-radius: var(--gf-radius);
	box-shadow: var(--gf-shadow-sm);
	position: sticky;
	top: 20px;
	overflow: hidden;
}

.geus-filters-sidebar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var(--gf-border);
	background: #f8fafc;
}

.geus-filters-sidebar__title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--gf-text);
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--gf-font);
}

.geus-filters-sidebar__title svg {
	color: var(--gf-primary);
}

.geus-filters-reset-all {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--gf-primary);
	font-size: 12px;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: var(--gf-radius-sm);
	transition: background var(--gf-transition);
}

.geus-filters-reset-all:hover {
	background: var(--gf-primary-light);
}

/* Sidebar footer met reset-knop onderaan */
.geus-filters-sidebar__footer {
	padding: 12px 16px;
	border-top: 1px solid var(--gf-border);
	background: #f8fafc;
}

.geus-filters-reset-btn-bottom {
	display: none; /* Verborgen totdat er actieve filters zijn */
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 16px;
	background: #fff;
	border: 1.5px solid var(--gf-border);
	border-radius: var(--gf-radius);
	cursor: pointer;
	font-family: var(--gf-font);
	font-size: 13px;
	font-weight: 600;
	color: var(--gf-text-muted);
	transition: all var(--gf-transition);
}

.geus-filters-reset-btn-bottom:hover {
	border-color: #e74c3c;
	color: #e74c3c;
	background: rgba(231, 76, 60, .05);
}

/* Toon de knop als er actieve filters zijn (JS zet display:flex) */
#geus-filters-reset-all[style*="flex"],
#geus-filters-reset-all:not([style*="none"]) {
	display: flex !important;
}

/* =========================================================
   4. Facet secties (accordeon)
   ========================================================= */
.geus-filter-section {
	border-bottom: 1px solid var(--gf-border);
	margin-bottom: 2px;
}

.geus-filter-section:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.geus-filter-section__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 9px 16px;
	background: var(--gf-heading-bg);
	border: none;
	cursor: pointer;
	font-family: var(--gf-font);
	font-size: 12px;
	font-weight: 700;
	color: var(--gf-text);
	transition: background var(--gf-transition);
	text-align: left;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.geus-filter-section__toggle:hover {
	background: #e9eef4;
}

.geus-filter-section__chevron {
	transition: transform var(--gf-transition);
	flex-shrink: 0;
	color: var(--gf-text-muted);
}

.geus-filter-section__toggle.is-open .geus-filter-section__chevron {
	transform: rotate(180deg);
}

.geus-filter-section__body {
	overflow: hidden;
	max-height: 0;
	transition: max-height .3s cubic-bezier(.4, 0, .2, 1);
}

.geus-filter-section__body.is-open {
	max-height: 320px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--gf-border) transparent;
}

.geus-filter-section__body.is-open::-webkit-scrollbar {
	width: 6px;
}

.geus-filter-section__body.is-open::-webkit-scrollbar-thumb {
	background: var(--gf-border);
	border-radius: 99px;
}

.geus-filter-section__body.is-open::-webkit-scrollbar-thumb:hover {
	background: #cbd5e1;
}

/* =========================================================
   5. Checkbox / Radio opties
   ========================================================= */
.geus-checkbox-list {
	padding: 4px 0 8px;
}

.geus-filter-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 16px;
	cursor: pointer;
	transition: background var(--gf-transition);
	font-size: 13px;
	color: var(--gf-text);
	font-family: var(--gf-font);
	position: relative;
	user-select: none;
}

.geus-filter-option:hover {
	background: var(--gf-bg-hover);
}

/* Actieve optie subtiel benadrukken */
.geus-filter-option.is-checked,
.geus-filter-option:has(input:checked) {
	background: var(--gf-primary-light);
}

.geus-filter-option.is-checked .geus-filter-option__label,
.geus-filter-option:has(input:checked) .geus-filter-option__label {
	font-weight: 600;
	color: var(--gf-primary-dark);
}

.geus-filter-option input[type="checkbox"],
.geus-filter-option input[type="radio"] {
	display: none;
}

/* Custom checkbox */
.geus-filter-option__checkbox {
	width: 16px;
	height: 16px;
	border: 2px solid var(--gf-border);
	border-radius: var(--gf-radius-sm);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all var(--gf-transition);
	background: var(--gf-bg);
}

.geus-filter-option.is-checked .geus-filter-option__checkbox,
.geus-filter-option input:checked ~ .geus-filter-option__checkbox {
	background: var(--gf-primary);
	border-color: var(--gf-primary);
}

.geus-filter-option.is-checked .geus-filter-option__checkbox::after,
.geus-filter-option input:checked ~ .geus-filter-option__checkbox::after {
	content: '';
	display: block;
	width: 4px;
	height: 8px;
	border: 2px solid #fff;
	border-top: none;
	border-left: none;
	transform: rotate(45deg) translateY(-1px);
}

/* Radio ronde checkbox */
.geus-filter-section--radio .geus-filter-option__checkbox {
	border-radius: 50%;
}

.geus-filter-section--radio .geus-filter-option.is-checked .geus-filter-option__checkbox::after {
	width: 6px;
	height: 6px;
	background: #fff;
	border: none;
	border-radius: 50%;
	transform: none;
}

.geus-filter-option__label {
	flex: 1;
	line-height: 1.4;
}

.geus-filter-option__count {
	color: var(--gf-text-muted);
	font-size: 11px;
	font-weight: 500;
	min-width: 20px;
	text-align: right;
}

/* Grayed out options (count = 0) */
.geus-filter-option.is-disabled {
	opacity: .45;
	pointer-events: none;
}

/* =========================================================
   6. Prijs slider
   ========================================================= */
.geus-price-slider {
	padding: 8px 16px 14px;
}

.geus-price-slider__track {
	position: relative;
	height: 4px;
	background: var(--gf-border);
	border-radius: 99px;
	margin: 24px 0 8px;
}

.geus-price-slider__range {
	position: absolute;
	height: 100%;
	background: var(--gf-primary);
	border-radius: 99px;
}

.geus-range-input {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	margin: 0;
	padding: 0;
}

.geus-range-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
}

/* Custom thumbs via pseudo-elements via JS wrapper */
.geus-range-thumb {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 18px;
	height: 18px;
	background: #fff;
	border: 2px solid var(--gf-primary);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
	pointer-events: none;
	transition: box-shadow var(--gf-transition), transform var(--gf-transition);
}

.geus-range-thumb:hover,
.geus-range-thumb.is-active {
	box-shadow: 0 0 0 6px rgba(0, 115, 170, .15);
	transform: translate(-50%, -50%) scale(1.15);
}

.geus-price-slider__labels {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}

.geus-price-min-label,
.geus-price-max-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--gf-primary);
	font-family: var(--gf-font);
}

/* =========================================================
   7. Actieve filter chips
   ========================================================= */
.geus-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--gf-border);
}

.geus-active-filters__label {
	font-size: 11px;
	font-weight: 600;
	color: var(--gf-text-muted);
	align-self: center;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.geus-active-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: var(--gf-primary-light);
	color: var(--gf-primary-dark);
	border: 1px solid rgba(0, 115, 170, .25);
	border-radius: 99px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	font-family: var(--gf-font);
	transition: all var(--gf-transition);
	line-height: 1;
}

.geus-active-chip:hover {
	background: var(--gf-primary);
	color: #fff;
	border-color: var(--gf-primary);
}

.geus-active-chip__remove {
	font-size: 14px;
	line-height: 1;
	opacity: .7;
}

.geus-active-chip--reset {
	background: #fff;
	color: #e74c3c;
	border-color: rgba(231, 76, 60, .3);
}

.geus-active-chip--reset:hover {
	background: #e74c3c;
	color: #fff;
	border-color: #e74c3c;
}

/* =========================================================
   8. Skeleton loader
   ========================================================= */
@keyframes geus-shimmer {
	0%   { background-position: -400px 0; }
	100% { background-position: 400px 0; }
}

.geus-facet-skeleton {
	height: 200px;
	background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
	background-size: 800px 100%;
	animation: geus-shimmer 1.4s infinite;
	border-radius: var(--gf-radius-sm);
	margin: 8px 16px;
}

/* Product grid skeleton */
.geus-products-skeleton {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px;
	padding: 0;
}

.geus-product-skeleton-card {
	background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
	background-size: 800px 100%;
	animation: geus-shimmer 1.4s infinite;
	border-radius: var(--gf-radius);
	height: 280px;
}

/* =========================================================
   9. Geen resultaten
   ========================================================= */
.geus-filters-no-results {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
	color: var(--gf-text-muted);
	gap: 12px;
}

.geus-filters-no-results__icon {
	opacity: .4;
}

.geus-filters-no-results h3 {
	margin: 0;
	font-size: 18px;
	color: var(--gf-text);
}

.geus-filters-no-results p {
	margin: 0;
	font-size: 14px;
}

.geus-filters-reset-btn {
	margin-top: 8px;
}

/* =========================================================
   10. Paginering
   ========================================================= */
.geus-filters-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px 0;
	font-family: var(--gf-font);
}

.geus-page-btn {
	padding: 8px 20px;
	background: var(--gf-bg);
	border: 1px solid var(--gf-border);
	border-radius: var(--gf-radius);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--gf-primary);
	transition: all var(--gf-transition);
}

.geus-page-btn:hover {
	background: var(--gf-primary);
	color: #fff;
	border-color: var(--gf-primary);
}

.geus-page-info {
	font-size: 13px;
	color: var(--gf-text-muted);
}

/* =========================================================
   11. Mobiele Bottom Sheet Overlay
   ========================================================= */
.geus-filter-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--gf-transition);
	backdrop-filter: blur(2px);
}

.geus-filter-overlay.is-open {
	opacity: 1;
	pointer-events: all;
}

.geus-filter-sheet {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	max-height: 90dvh;
	background: var(--gf-bg);
	border-radius: 16px 16px 0 0;
	display: flex;
	flex-direction: column;
	transform: translateY(100%);
	transition: transform .3s cubic-bezier(.32, .72, 0, 1);
	will-change: transform;
	box-shadow: 0 -8px 40px rgba(0, 0, 0, .15);
}

.geus-filter-overlay.is-open .geus-filter-sheet {
	transform: translateY(0);
}

.geus-filter-sheet__handle {
	width: 40px;
	height: 4px;
	background: var(--gf-border);
	border-radius: 99px;
	margin: 12px auto 0;
	flex-shrink: 0;
}

.geus-filter-sheet__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px 14px;
	border-bottom: 1px solid var(--gf-border);
	flex-shrink: 0;
}

.geus-filter-sheet__header h2 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--gf-text);
	font-family: var(--gf-font);
}

.geus-filter-sheet__close {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	color: var(--gf-text-muted);
	display: flex;
	align-items: center;
	border-radius: var(--gf-radius-sm);
	transition: background var(--gf-transition);
}

.geus-filter-sheet__close:hover {
	background: var(--gf-bg-hover);
	color: var(--gf-text);
}

.geus-filter-sheet__body {
	overflow-y: auto;
	overscroll-behavior: contain;
	flex: 1;
	padding: 8px 0;
}

.geus-filter-sheet__footer {
	display: flex;
	gap: 10px;
	padding: 14px 20px;
	border-top: 1px solid var(--gf-border);
	flex-shrink: 0;
	background: var(--gf-bg);
}

.geus-filter-sheet__reset {
	flex: 1;
}

.geus-filter-sheet__apply {
	flex: 2;
	font-weight: 700;
	font-size: 14px;
}

/* =========================================================
   12. Sticky mobiele filter-trigger knop
   ========================================================= */
.geus-filter-trigger-sticky {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9998;
	display: none; /* Verborgen op desktop */
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	background: var(--gf-text);
	color: #fff;
	border: none;
	border-radius: 99px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	font-family: var(--gf-font);
	box-shadow: 0 4px 24px rgba(0, 0, 0, .25);
	transition: transform var(--gf-transition), box-shadow var(--gf-transition), background var(--gf-transition);
}

.geus-filter-trigger-sticky:hover {
	background: var(--gf-primary);
	transform: translateX(-50%) translateY(-2px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
}

.geus-trigger-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	background: var(--gf-primary);
	color: #fff;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* =========================================================
   13. Sortering
   ========================================================= */
.geus-filters-sort {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	font-family: var(--gf-font);
}

.geus-filters-sort label {
	font-size: 13px;
	color: var(--gf-text-muted);
	white-space: nowrap;
}

.geus-filters-sort select {
	padding: 6px 10px;
	border: 1px solid var(--gf-border);
	border-radius: var(--gf-radius-sm);
	font-size: 13px;
	font-family: var(--gf-font);
	color: var(--gf-text);
	background: var(--gf-bg);
	cursor: pointer;
}

/* =========================================================
   14. Loading overlay op product grid
   ========================================================= */
#geus-products-area {
	position: relative;
	flex: 1;
	min-width: 0;
}

#geus-products-area.is-loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .7);
	z-index: 10;
	border-radius: var(--gf-radius);
}

#geus-products-area.is-loading::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	border: 3px solid var(--gf-border);
	border-top-color: var(--gf-primary);
	border-radius: 50%;
	z-index: 11;
	animation: geus-spin .7s linear infinite;
	transform: translate(-50%, -50%);
}

@keyframes geus-spin {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* =========================================================
   15. Responsive (mobiel-first)
   ========================================================= */
@media (max-width: 767px) {
	/* Verberg desktop sidebar op mobiel */
	.geus-filters-sidebar {
		display: none;
	}

	.geus-filters-wrapper {
		flex-direction: column;
	}

	/* Toon sticky trigger op mobiel */
	.geus-filter-trigger-sticky {
		display: flex;
	}
}

@media (min-width: 768px) {
	/* Verberg mobiele overlay trigger op desktop */
	.geus-filter-trigger-sticky {
		display: none !important;
	}

	.geus-filter-overlay {
		display: none !important;
	}
}

/* =========================================================
   16. Toggle switch (admin + module)
   ========================================================= */
.geus-toggle-switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
}

.geus-toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.geus-toggle-slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background: var(--gf-border);
	border-radius: 99px;
	transition: background var(--gf-transition);
}

.geus-toggle-slider::before {
	content: '';
	position: absolute;
	height: 16px;
	width: 16px;
	left: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	transition: transform var(--gf-transition);
	box-shadow: var(--gf-shadow-sm);
}

.geus-toggle-switch input:checked + .geus-toggle-slider {
	background: var(--gf-primary);
}

.geus-toggle-switch input:checked + .geus-toggle-slider::before {
	transform: translateX(18px);
}

/* =========================================================
   17. Kleur swatches (Fase 4)
   ========================================================= */
.geus-swatch-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px 16px 12px;
}

.geus-swatch {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid transparent;
	cursor: pointer;
	padding: 0;
	transition: transform var(--gf-transition), box-shadow var(--gf-transition), border-color var(--gf-transition);
	position: relative;
	flex-shrink: 0;
}

.geus-swatch:hover {
	transform: scale(1.15);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.geus-swatch.is-active {
	box-shadow: 0 0 0 3px var(--gf-bg), 0 0 0 5px var(--gf-primary);
	transform: scale(1.1);
}

.geus-swatch.is-active::after {
	content: '';
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: 6px;
	height: 10px;
	border: 2px solid #fff;
	border-top: none;
	border-left: none;
	rotate: 45deg;
}

/* Tooltip via title-attribuut (native browser) */
.geus-swatch[title] {
	position: relative;
}

/* =========================================================
   18. Infinite scroll (Fase 4)
   ========================================================= */
.geus-infinite-sentinel {
	height: 1px;
	margin: 0;
}

/* Drie-dot spinner */
.geus-infinite-spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	padding: 24px 0;
}

.geus-infinite-spinner__dot {
	width: 8px;
	height: 8px;
	background: var(--gf-primary);
	border-radius: 50%;
	animation: geus-bounce 1.2s ease-in-out infinite;
	display: block;
}

.geus-infinite-spinner__dot:nth-child(2) { animation-delay: .2s; }
.geus-infinite-spinner__dot:nth-child(3) { animation-delay: .4s; }

@keyframes geus-bounce {
	0%, 80%, 100% { transform: scale(0); opacity: .3; }
	40%            { transform: scale(1); opacity: 1; }
}

/* Alle producten geladen indicator */
.geus-all-loaded {
	text-align: center;
	padding: 20px 0 32px;
	font-size: 13px;
	color: var(--gf-text-muted);
	font-family: var(--gf-font);
	font-weight: 500;
}

.geus-all-loaded::before,
.geus-all-loaded::after {
	content: ' — ';
	color: var(--gf-border);
}

/* =========================================================
   19. Flatsome integratie
   ========================================================= */
/* Synchroniseer sidebar breedte met Flatsome theme als --sidebar-width beschikbaar is */
.geus-filters-sidebar {
	width: var(--gf-sidebar-width);
}

/* Flatsome row layout compatibility */
.row .geus-filters-wrapper {
	width: 100%;
}

.row .geus-filters-sidebar {
	min-width: 220px;
	max-width: 300px;
}

/* Verberg de handmatige "Filter"-titel + divider boven de filter-widget.
   Deze komen uit de Custom HTML widget (custom_html-2), niet uit de plugin. */
#custom_html-2 > .widget-title.shop-sidebar,
#custom_html-2 > .is-divider.small {
	display: none;
}

/* =========================================================
   20. Toetsenbord-focus (toegankelijkheid)
   ========================================================= */
.geus-filter-section__toggle:focus-visible,
.geus-filters-reset-btn-bottom:focus-visible,
.geus-active-chip:focus-visible,
.geus-page-btn:focus-visible,
.geus-filter-sheet__close:focus-visible,
.geus-filter-trigger-sticky:focus-visible,
.geus-filters-sort select:focus-visible {
	outline: none;
	box-shadow: var(--gf-focus-ring);
}

/* Custom checkbox/radio: ring op de zichtbare box i.p.v. de verborgen input */
.geus-filter-option input:focus-visible ~ .geus-filter-option__checkbox {
	box-shadow: var(--gf-focus-ring);
}

/* Swatch krijgt een ring zonder de schaal-animatie te onderbreken */
.geus-swatch:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--gf-bg), 0 0 0 5px var(--gf-primary);
}

.geus-range-input:focus-visible {
	outline: none;
}

.geus-range-input:focus-visible ~ .geus-range-thumb,
.geus-range-input:focus-visible + .geus-range-thumb {
	box-shadow: var(--gf-focus-ring);
}

/* =========================================================
   21. Respecteer prefers-reduced-motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.geus-filters-wrapper *,
	.geus-filter-overlay,
	.geus-filter-sheet {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}