/* HHD Shop — Filter UI
 * Restyled to match HHD brand design (02-decoratie-overview.html, 02-tuinbeelden-overview.html).
 * Brand: charcoal #1F1D1A, cream #F5F0E8, cream-soft #EFE7DA, gold #B8924E, line #D9CFBE.
 * Fonts: Fraunces (serif italic), DM Sans (body), JetBrains Mono (numbers).
 * All selectors preserved — only colors/fonts/borders/states updated.
 */

/* Consistent filter control width */
:root {
	--hhd-filter-width: 170px;
}

.hhd-filter {
	font-family: var(--hhd-sans);
	color: var(--hhd-ink);
	display: inline-flex;
	flex-direction: column;
	gap: var(--hhd-space-2);
	margin: 0 var(--hhd-space-3) var(--hhd-space-3) 0;
	vertical-align: top;
}

.hhd-filter__label {
	font-family: var(--hhd-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hhd-gold-dark);
}

/* ──────────────────────────────────────────────────────────────────
   Collapsible toggle (brand + attribute) — HHD chip-pill style
   ────────────────────────────────────────────────────────────────── */

.hhd-filter.is-collapsible {
	position: relative;
	min-width: var(--hhd-filter-width);
	isolation: isolate;
}

.hhd-filter__toggle {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hhd-space-2);
	padding: 12px 22px;
	border: 1px solid var(--hhd-gold-dark);
	border-radius: var(--hhd-radius-pill);
	background: var(--hhd-gold);
	font-family: var(--hhd-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hhd-cream);
	width: var(--hhd-filter-width);
	min-width: var(--hhd-filter-width);
	white-space: nowrap;
	transition:
		border-color var(--hhd-transition-fast),
		background-color var(--hhd-transition-fast),
		color var(--hhd-transition-fast),
		transform var(--hhd-transition-fast),
		box-shadow var(--hhd-transition-fast);
}

.hhd-filter__toggle:hover {
	border-color: var(--hhd-gold-dark);
	background: var(--hhd-gold-dark);
	color: var(--hhd-cream);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(31, 29, 26, 0.15);
}

.hhd-filter__toggle:focus-visible {
	outline: none;
	box-shadow: var(--hhd-focus-ring);
}

/* Open state — dropdown panel visible — solid charcoal */
.hhd-filter.is-open .hhd-filter__toggle {
	background: var(--hhd-charcoal);
	border-color: var(--hhd-charcoal);
	color: var(--hhd-cream);
	transform: none;
	box-shadow: none;
}

.hhd-filter__toggle-label {
	flex: 1;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Count badge — Fraunces italic gold-soft (matches .filter-chip-count) */
.hhd-filter__toggle-count {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	padding: 0 4px;
	background: transparent;
	color: var(--hhd-cream);
	font-family: var(--hhd-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 0.85em;
	border-radius: 0;
	opacity: 0.85;
}

.hhd-filter__toggle-count[hidden] {
	display: none !important;
}

/* Active (has-value) — charcoal pill with cream text + gold dot indicator */
.hhd-filter__toggle.has-value {
	position: relative;
	background: var(--hhd-charcoal);
	border-color: var(--hhd-charcoal);
	color: var(--hhd-cream) !important;
	box-shadow: none;
	padding-right: 28px;
}

.hhd-filter__toggle.has-value::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	background: var(--hhd-gold);
	border-radius: 50%;
	pointer-events: none;
}

.hhd-filter__toggle.has-value .hhd-filter__toggle-label,
.hhd-filter__toggle.has-value .hhd-filter__toggle-arrow {
	color: var(--hhd-cream);
}

.hhd-filter__toggle.has-value .hhd-filter__toggle-count {
	color: var(--hhd-gold-soft);
}

.hhd-filter__toggle.has-value:hover {
	background: var(--hhd-charcoal-soft);
	border-color: var(--hhd-charcoal-soft);
	color: var(--hhd-cream);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(31, 29, 26, 0.20);
}

/* Loading state on toggle during AJAX */
.hhd-filter__toggle.is-loading {
	pointer-events: none;
	position: relative;
}

.hhd-filter__toggle.is-loading::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border: 2px solid transparent;
	border-top-color: currentColor;
	border-radius: 50%;
	animation: hhd-spin 600ms linear infinite;
}

.hhd-filter__toggle.is-loading .hhd-filter__toggle-arrow {
	opacity: 0;
}

.hhd-filter__toggle-arrow {
	font-size: 11px;
	color: var(--hhd-cream);
	opacity: 0.95;
	transition: transform var(--hhd-transition);
}

.hhd-filter.is-open .hhd-filter__toggle-arrow {
	transform: rotate(180deg);
}

/* Dropdown panel — cream bg, line border, soft shadow */
.hhd-filter__options {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	width: auto;
	min-width: 220px;
	max-height: 360px;
	height: auto;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 6px 0;
	background: var(--hhd-cream);
	border: 1px solid var(--hhd-line);
	border-radius: var(--hhd-radius);
	box-shadow: 0 18px 48px rgba(31, 29, 26, 0.14);
	z-index: 9999999;
}

@media (prefers-reduced-motion: no-preference) {
	.hhd-filter.is-open .hhd-filter__options {
		animation: hhd-dropdown-in 200ms ease;
	}

	@keyframes hhd-dropdown-in {
		from {
			opacity: 0;
			transform: translateY(-6px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

.hhd-filter.is-open {
	position: relative;
	z-index: 9999999;
}

.hhd-filter.is-open .hhd-filter__options {
	display: block;
}

/* Dropdown option rows — DM Sans 14px charcoal */
.hhd-filter__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 18px;
	cursor: pointer;
	border-radius: 0;
	font-family: var(--hhd-sans);
	font-size: 14px;
	color: var(--hhd-ink);
	transition: background-color var(--hhd-transition-fast), color var(--hhd-transition-fast);
	user-select: none;
}

.hhd-filter__option:hover {
	background-color: var(--hhd-cream-soft);
	color: var(--hhd-charcoal);
}

/* Custom checkbox — square 16px, gold border, gold-fill + cream tick when checked */
.hhd-filter__option input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border: 1px solid var(--hhd-gold);
	border-radius: 3px;
	background: var(--hhd-white);
	cursor: pointer;
	transition: background-color var(--hhd-transition-fast), border-color var(--hhd-transition-fast);
	flex-shrink: 0;
}

.hhd-filter__option input[type="checkbox"]:checked {
	background: var(--hhd-gold);
	border-color: var(--hhd-gold-dark);
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4L5.5 9.5L3 7' stroke='%23F5F0E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 11px;
	background-position: center;
	background-repeat: no-repeat;
}

.hhd-filter__option input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: var(--hhd-focus-ring);
}

/* Per-option count — mono small ink-soft */
.hhd-filter__count {
	margin-left: auto;
	padding: 0;
	background: transparent;
	border-radius: 0;
	font-family: var(--hhd-mono);
	font-size: 11px;
	font-weight: 400;
	color: var(--hhd-ink-soft);
	opacity: 0.9;
}

/* ──────────────────────────────────────────────────────────────────
   Sale toggle — pill, charcoal active
   ────────────────────────────────────────────────────────────────── */

.hhd-filter--sale {
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid var(--hhd-gold-dark);
	border-radius: var(--hhd-radius-pill);
	background: var(--hhd-gold);
	font-family: var(--hhd-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hhd-cream);
	width: var(--hhd-filter-width);
	min-width: var(--hhd-filter-width);
	transition: all 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
	user-select: none;
	white-space: nowrap;
	position: relative;
}

.hhd-filter--sale::before {
	content: "%";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: var(--hhd-cream);
	color: var(--hhd-gold-dark);
	border-radius: 50%;
	font-family: var(--hhd-mono);
	font-size: 11px;
	font-weight: 600;
	flex-shrink: 0;
	transition: all 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hhd-filter--sale:hover {
	border-color: var(--hhd-gold-dark);
	background: var(--hhd-gold-dark);
	color: var(--hhd-cream);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(31, 29, 26, 0.15);
}

.hhd-filter--sale.is-active {
	background: var(--hhd-charcoal);
	color: var(--hhd-cream);
	border-color: var(--hhd-charcoal);
	box-shadow: none;
	transform: none;
}

.hhd-filter--sale.is-active::before {
	background: var(--hhd-gold);
	color: var(--hhd-cream);
}

.hhd-filter--sale input { display: none; }

/* ──────────────────────────────────────────────────────────────────
   Sort — custom dropdown styled like brand chip + sort dropdown
   ────────────────────────────────────────────────────────────────── */

/* Legacy native <select> fallback */
.hhd-filter--sort .hhd-filter__sort-select {
	box-sizing: border-box;
	padding: 12px 22px;
	border: 1px solid var(--hhd-gold-dark);
	border-radius: var(--hhd-radius-pill);
	background-color: var(--hhd-gold);
	font-family: var(--hhd-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hhd-cream);
	width: var(--hhd-filter-width);
	min-width: var(--hhd-filter-width);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23F5F0E8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 10px;
	padding-right: 32px;
	transition:
		border-color var(--hhd-transition-fast),
		background-color var(--hhd-transition-fast),
		color var(--hhd-transition-fast),
		transform var(--hhd-transition-fast),
		box-shadow var(--hhd-transition-fast);
}

.hhd-filter--sort .hhd-filter__sort-select:hover {
	border-color: var(--hhd-gold-dark);
	background-color: var(--hhd-gold-dark);
	color: var(--hhd-cream);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(31, 29, 26, 0.15);
}

.hhd-filter--sort .hhd-filter__sort-select:focus {
	outline: none;
	border-color: var(--hhd-cream);
	box-shadow: var(--hhd-focus-ring);
}

/* Native sort options dropdown — cream readable items */
.hhd-filter--sort .hhd-filter__sort-select option {
	background: var(--hhd-cream);
	color: var(--hhd-charcoal);
}

/* Custom sort dropdown (matches brand/attribute) */
.hhd-filter--sort.is-collapsible {
	min-width: var(--hhd-filter-width);
}

/* Sort options panel — compact, only as tall as content needs (no extra cream area).
   v1.0.7: tighter padding + smaller font + max-width 200 voor compactere look. */
.hhd-filter__options--sort {
	min-width: 180px;
	max-width: 200px;
	padding: 4px 0;
	max-height: none; /* 6 items fit naturally; no forced scroll area */
	overflow: visible;
	background: var(--hhd-cream-soft);
	border: 1px solid var(--hhd-gold-dark);
}

.hhd-sort__item {
	/* Reset button browser defaults — explicit (niet 'all: unset' want dat erft
	   color van parent, wat in Elementor cream-op-cream geeft). */
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	margin: 0;
	box-shadow: none;
	text-decoration: none;
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 14px;
	border-radius: 0;
	font-family: var(--hhd-sans, 'DM Sans', system-ui, sans-serif);
	font-size: 13px;
	font-weight: 400;
	color: #1F1D1A !important; /* charcoal — forceer voor leesbaarheid */
	white-space: nowrap;
	text-align: left;
	transition: background-color 180ms ease, color 180ms ease;
}

.hhd-sort__item:hover {
	background: #F5F0E8 !important; /* cream */
	color: #1F1D1A !important;
}

.hhd-sort__item.is-active {
	background: #EFE7DA !important; /* cream-soft */
	color: #8F7038 !important; /* gold-dark */
	font-weight: 600;
}

.hhd-sort__item-label {
	color: inherit !important;
}

.hhd-sort__item-icon {
	width: 14px;
	height: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
	color: var(--hhd-gold-dark);
	line-height: 1;
}

.hhd-sort__item-label {
	flex: 1;
	text-align: left;
}

/* ──────────────────────────────────────────────────────────────────
   Price filter — Vanaf/Tot inputs with apply + clear buttons
   ────────────────────────────────────────────────────────────────── */

.hhd-filter--price,
.hhd-filter--price-input {
	min-width: var(--hhd-filter-width);
}

.hhd-filter--price-input .hhd-filter__toggle {
	width: var(--hhd-filter-width);
}

.hhd-price-slider {
	position: relative;
	height: 28px;
	margin: var(--hhd-space-2) 0;
}

.hhd-price-slider__track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 3px;
	margin-top: -1.5px;
	background: var(--hhd-line);
	border-radius: 2px;
}

.hhd-price-slider__range {
	position: absolute;
	top: 0;
	height: 100%;
	background: var(--hhd-gold);
	border-radius: 2px;
}

.hhd-price-slider__input {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 28px;
	background: none;
	pointer-events: none;
	z-index: 2;
}

.hhd-price-slider__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--hhd-cream);
	border: 2px solid var(--hhd-gold);
	box-shadow: var(--hhd-shadow-sm);
	pointer-events: auto;
	cursor: grab;
}

.hhd-price-slider__input::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--hhd-cream);
	border: 2px solid var(--hhd-gold);
	box-shadow: var(--hhd-shadow-sm);
	pointer-events: auto;
	cursor: grab;
}

.hhd-price-slider__values {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--hhd-mono);
	font-size: 12px;
	color: var(--hhd-ink);
}

.hhd-price-slider__sep {
	opacity: 0.5;
	color: var(--hhd-ink-soft);
}

/* ──────────────────────────────────────────────────────────────────
   Reset button — ghost outline, gold on hover
   ────────────────────────────────────────────────────────────────── */

.hhd-filter-reset {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 22px;
	border: 1px solid var(--hhd-gold-dark);
	border-radius: var(--hhd-radius-pill);
	background: var(--hhd-gold) !important;
	font-family: var(--hhd-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hhd-cream) !important;
	/* Width: auto + nowrap zodat "Reset filters" op één regel past zonder te wrappen
	   ("Reset" + "filters" stonden onder elkaar bij 170px width met letter-spacing). */
	width: auto;
	min-width: var(--hhd-filter-width);
	white-space: nowrap;
	text-decoration: none;
	transition:
		border-color var(--hhd-transition-fast),
		background-color var(--hhd-transition-fast),
		color var(--hhd-transition-fast),
		transform var(--hhd-transition-fast),
		box-shadow var(--hhd-transition-fast);
}

.hhd-filter-reset::before {
	content: '×';
	font-family: var(--hhd-serif);
	font-size: 18px;
	line-height: 1;
	color: var(--hhd-cream);
	margin-right: 2px;
}

.hhd-filter-reset:hover {
	border-color: var(--hhd-charcoal);
	background: var(--hhd-charcoal) !important;
	color: var(--hhd-cream) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(31,29,26,.15);
}

.hhd-filter-reset:hover::before {
	color: var(--hhd-cream);
}

.hhd-filter-reset:focus-visible {
	outline: none;
	border-color: var(--hhd-charcoal);
	box-shadow: var(--hhd-focus-ring);
}

/* Hidden state when no filters are active — display:none, not just dimmed */
.hhd-filter-reset.is-hidden,
.hhd-filter--reset:has(.hhd-filter-reset.is-hidden) {
	display: none !important;
}

/* ──────────────────────────────────────────────────────────────────
   Active filter chips — cream-soft pill, gold border, italic serif text
   ────────────────────────────────────────────────────────────────── */

.hhd-filter-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: var(--hhd-space-4) 0;
}

.hhd-filter-chips[hidden] {
	display: none;
}

.hhd-chip {
	all: unset;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px 6px 14px;
	background: var(--hhd-gold);
	border: 1px solid var(--hhd-gold-dark);
	color: var(--hhd-cream);
	border-radius: var(--hhd-radius-pill);
	font-family: var(--hhd-sans);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	transition:
		border-color var(--hhd-transition-fast),
		background-color var(--hhd-transition-fast),
		color var(--hhd-transition-fast);
}

.hhd-chip:hover {
	background: var(--hhd-gold-dark);
	border-color: var(--hhd-gold-dark);
	color: var(--hhd-cream);
}

.hhd-chip:focus-visible {
	outline: none;
	box-shadow: var(--hhd-focus-ring);
}

.hhd-chip__remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	font-family: var(--hhd-sans);
	font-style: normal;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	background: rgba(31, 29, 26, 0.20);
	color: var(--hhd-cream);
	transition: background-color var(--hhd-transition-fast), color var(--hhd-transition-fast);
}

.hhd-chip:hover .hhd-chip__remove {
	background: var(--hhd-charcoal);
	color: var(--hhd-cream);
}

/* ──────────────────────────────────────────────────────────────────
   Master filter bar — cream surface, subtle line dividers
   ────────────────────────────────────────────────────────────────── */

.hhd-filter-bar {
	display: flex;
	gap: var(--hhd-space-4);
	padding: 16px 0;
	margin-bottom: var(--hhd-space-3);
	background: var(--hhd-cream);
	border-top: 1px solid var(--hhd-line);
	border-bottom: 1px solid var(--hhd-line);
	/* High z-index stacking so dropdowns escape parent containers */
	position: relative;
	z-index: 100;
}

/* Lift Elementor parent containers so dropdowns escape sibling sections */
.elementor-section:has(.hhd-filter-bar),
.elementor-element:has(.hhd-filter-bar),
.e-con:has(.hhd-filter-bar) {
	z-index: 100 !important;
}

/* Horizontal layout (default) */
.hhd-filter-bar--horizontal {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 16px 24px;
}

/* Vertical layout — sidebar style, cream-soft surface */
.hhd-filter-bar--vertical {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	gap: 28px;
	padding: 32px;
	background: var(--hhd-cream-soft);
	border: 1px solid var(--hhd-line);
	border-radius: var(--hhd-radius);
}

/* Cell wrapper — uniform per filter */
.hhd-filter-cell {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 42px;
}

.hhd-filter-bar--vertical .hhd-filter-cell {
	min-height: 0;
	width: 100%;
}

.hhd-filter-bar--vertical .hhd-filter-cell .hhd-filter,
.hhd-filter-bar--vertical .hhd-filter-cell .hhd-filter--sale,
.hhd-filter-bar--vertical .hhd-filter-cell .hhd-filter--sort,
.hhd-filter-bar--vertical .hhd-filter-cell .hhd-filter--price,
.hhd-filter-bar--vertical .hhd-filter-cell .hhd-filter-reset {
	width: 100%;
	margin: 0;
}

.hhd-filter-bar--vertical .hhd-filter__toggle,
.hhd-filter-bar--vertical .hhd-filter__sort-select,
.hhd-filter-bar--vertical .hhd-filter--sale {
	width: 100%;
}

.hhd-filter-bar--vertical .hhd-filter.is-collapsible {
	width: 100%;
	min-width: 0;
}

.hhd-filter-cell .hhd-filter--sale,
.hhd-filter-cell .hhd-filter-reset {
	margin: 0;
}

.hhd-filter-cell .hhd-filter,
.hhd-filter-cell .hhd-filter--sale,
.hhd-filter-cell .hhd-filter-reset {
	margin-bottom: 0;
}

.hhd-filter-cell .hhd-filter--sale {
	align-self: center;
}

/* Hide labels in horizontal layout (chips are self-labeling) */
.hhd-filter-bar--horizontal .hhd-filter__label {
	display: none;
}

/* Show labels in vertical/sidebar layout */
.hhd-filter-bar--vertical .hhd-filter__label {
	display: block;
}

/* Sale toggle as pill-style toggle */
.hhd-filter--sale-toggle .hhd-filter__toggle-arrow {
	font-size: 13px;
	font-weight: 700;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--hhd-cream-soft);
	color: var(--hhd-gold-dark);
	transition: all 180ms ease;
}
.hhd-filter--sale-toggle.has-value .hhd-filter__toggle {
	background: var(--hhd-charcoal);
	color: var(--hhd-cream);
	border-color: var(--hhd-charcoal);
}
.hhd-filter--sale-toggle.has-value .hhd-filter__toggle-arrow {
	background: var(--hhd-cream);
	color: var(--hhd-gold-dark);
}

/* ──────────────────────────────────────────────────────────────────
   Price min/max input dropdown — cream inputs, gold apply, ghost clear
   ────────────────────────────────────────────────────────────────── */

.hhd-filter__options--price-input {
	min-width: 300px;
	padding: 16px;
}

.hhd-price-input-row {
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
}

.hhd-price-input-field {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-family: var(--hhd-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hhd-gold-dark);
}

.hhd-price-input-wrap {
	display: flex;
	align-items: center;
	border: 1px solid var(--hhd-gold-dark);
	border-radius: var(--hhd-radius);
	padding: 0 10px;
	background: var(--hhd-white);
	cursor: text;
	transition:
		border-color 150ms ease,
		box-shadow 150ms ease,
		background-color 150ms ease;
}

.hhd-price-input-wrap:hover {
	border-color: var(--hhd-gold);
	background: var(--hhd-white);
}

.hhd-price-input-wrap:focus-within {
	border-color: var(--hhd-gold);
	box-shadow: var(--hhd-focus-ring);
	background: var(--hhd-white);
}

.hhd-price-input-currency {
	font-family: var(--hhd-mono);
	font-size: 12px;
	color: var(--hhd-ink-soft);
	font-weight: 500;
	pointer-events: none;
	user-select: none;
}

.hhd-price-input {
	flex: 1;
	border: none !important;
	background: transparent !important;
	padding: 9px 6px;
	font-family: var(--hhd-mono);
	font-size: 13px;
	color: var(--hhd-charcoal);
	font-weight: 500;
	outline: none !important;
	box-shadow: none !important;
	width: 100%;
	-moz-appearance: textfield;
}

.hhd-price-input:focus {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.hhd-price-input::-webkit-outer-spin-button,
.hhd-price-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.hhd-price-input-actions {
	display: flex;
	gap: 10px;
	justify-content: space-between;
	padding-top: 12px;
	border-top: 1px solid var(--hhd-line);
}

.hhd-price-input-clear,
.hhd-price-input-apply {
	/* Reset button defaults — explicit (niet 'all: unset' want dat erft kleur
	   van parent — Elementor parent kan roze of cream zijn). */
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	box-shadow: none;
	text-decoration: none;
	box-sizing: border-box;
	cursor: pointer;
	padding: 10px 18px;
	border-radius: var(--hhd-radius, 4px);
	font-family: var(--hhd-sans, 'DM Sans', system-ui, sans-serif);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.2;
	flex: 1;
	transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

/* Wissen — charcoal pill (leesbaar op cream achtergrond) */
.hhd-price-input-clear {
	background: #1F1D1A !important; /* charcoal */
	color: #F5F0E8 !important; /* cream */
	border: 1px solid #1F1D1A !important;
}

.hhd-price-input-clear:hover {
	background: #2B2825 !important; /* charcoal-soft */
	border-color: #2B2825 !important;
	color: #F5F0E8 !important;
}

/* Toepassen — gold pill */
.hhd-price-input-apply {
	background: #B8924E !important; /* gold */
	color: #F5F0E8 !important; /* cream */
	border: 1px solid #B8924E !important;
}

.hhd-price-input-apply:hover {
	background: #8F7038 !important; /* gold-dark */
	border-color: #8F7038 !important;
	color: #F5F0E8 !important;
}

/* ──────────────────────────────────────────────────────────────────
   Child category dropdown items
   ────────────────────────────────────────────────────────────────── */

.hhd-child-cats__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 18px;
	cursor: pointer;
	border-radius: 0;
	font-family: var(--hhd-sans);
	font-size: 14px;
	color: var(--hhd-ink);
	text-decoration: none;
	transition: background-color var(--hhd-transition), color var(--hhd-transition);
}

.hhd-child-cats__item:hover {
	background: var(--hhd-cream-soft);
	color: var(--hhd-gold-dark);
}

.hhd-child-cats__item.is-active {
	background: var(--hhd-cream-soft);
	color: var(--hhd-gold-dark);
	font-weight: 500;
}

.hhd-child-cats__item.is-active .hhd-filter__count {
	color: var(--hhd-gold-dark);
	opacity: 1;
}

/* ──────────────────────────────────────────────────────────────────
   Loading state on grid
   ────────────────────────────────────────────────────────────────── */

.hhd-is-loading {
	position: relative;
	min-height: 200px;
}

.hhd-is-loading > .elementor-loop-container {
	opacity: 0.3;
	pointer-events: none;
	transition: opacity 150ms ease;
}

.hhd-is-loading::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 2px;
	width: 100%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--hhd-gold) 50%,
		transparent 100%
	);
	background-size: 200% 100%;
	z-index: 12;
	border-radius: 0;
	animation: hhd-progress 1.2s ease-in-out infinite;
}

.hhd-is-loading::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	border: 2px solid var(--hhd-line);
	border-top-color: var(--hhd-gold);
	border-radius: 50%;
	z-index: 11;
	animation: hhd-spin 650ms linear infinite;
}

@keyframes hhd-spin { to { transform: rotate(360deg); } }
@keyframes hhd-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hhd-progress {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Price input pending state during debounce */
.hhd-price-input-wrap.is-pending {
	position: relative;
	border-color: var(--hhd-gold);
}

.hhd-price-input-wrap.is-pending::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border: 2px solid var(--hhd-line);
	border-top-color: var(--hhd-gold);
	border-radius: 50%;
	animation: hhd-spin 600ms linear infinite;
}

.hhd-price-input-wrap.is-pending .hhd-price-input {
	padding-right: 24px;
}

.hhd-no-results {
	padding: var(--hhd-space-5);
	text-align: center;
	font-family: var(--hhd-serif);
	font-style: italic;
	color: var(--hhd-ink-soft);
	background: var(--hhd-cream-soft);
	border: 1px solid var(--hhd-line);
	border-radius: var(--hhd-radius);
}

/* ══════════════════════════════════════════════════════════════════
   Elementor Editor Preview Support
   ══════════════════════════════════════════════════════════════════ */

.elementor-editor-active .hhd-filter-bar,
.elementor-editor-preview .hhd-filter-bar {
	z-index: 9999999;
}

.elementor-editor-active .hhd-filter.is-open,
.elementor-editor-preview .hhd-filter.is-open {
	z-index: 9999999;
}

.elementor-editor-active .hhd-filter__options,
.elementor-editor-preview .hhd-filter__options {
	z-index: 99999999;
}

.elementor-preview-iframe .hhd-filter,
.elementor-preview-iframe .hhd-filter-bar {
	visibility: visible !important;
	opacity: 1 !important;
}

/* ──────────────────────────────────────────────────────────────────
   Mobile: horizontal scrollable filter bar
   Pattern: FotoTrailer mobile filter — chips in een scroller ipv stacked,
   met visuele "edge fade" zodat user ziet dat er meer filters zijn.
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

	/* Wrap de hele bar in een edge-fade container die de scroll visualiseert */
	.hhd-filter-bar--horizontal {
		/* ZET FLEX-WRAP UIT: alles op één lijn die horizontaal scrolled */
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scroll-padding-left: 16px;
		gap: 8px;
		padding: 12px 16px;
		/* Edge fade rechts zodat user ziet "er is meer" */
		-webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 24px), transparent 100%);
		mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 24px), transparent 100%);
	}

	/* Verberg scrollbar visueel — gedrag blijft */
	.hhd-filter-bar--horizontal::-webkit-scrollbar {
		display: none;
	}
	.hhd-filter-bar--horizontal {
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	/* Cells: krimpen niet — elk filter behoudt zijn natuurlijke breedte */
	.hhd-filter-bar--horizontal .hhd-filter-cell {
		flex-shrink: 0;
		flex-grow: 0;
		scroll-snap-align: start;
	}

	/* Reset cell mag aan het eind staan en moet niet scrollen mee */
	.hhd-filter-bar--horizontal .hhd-filter-cell--reset {
		margin-left: auto;
	}

	/* Compactere toggle buttons op mobile */
	.hhd-filter-bar--horizontal .hhd-filter__toggle {
		padding: 8px 12px;
		font-size: 13px;
		white-space: nowrap;
	}

	/* Dropdown panels: full-width van viewport, niet beperkt tot toggle width */
	.hhd-filter-bar--horizontal .hhd-filter.is-open .hhd-filter__options {
		position: fixed;
		left: 8px;
		right: 8px;
		top: auto;
		max-width: none;
		min-width: 0;
		width: auto;
		z-index: 9999;
		max-height: 60vh;
		overflow-y: auto;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
	}

	/* Price input panel: keep readable layout maar full-width */
	.hhd-filter-bar--horizontal .hhd-filter__options--price-input {
		width: auto;
		min-width: 0;
	}

	/* Sort options panel — full-width */
	.hhd-filter-bar--horizontal .hhd-filter__options--sort {
		width: auto;
		min-width: 0;
	}

	/* Iets meer breathing room rond de bar zelf */
	.hhd-filter-bar {
		margin-bottom: 12px;
	}
}

/* Extra-small phones — net iets compacter */
@media (max-width: 480px) {
	.hhd-filter-bar--horizontal {
		padding: 10px 12px;
		gap: 6px;
	}
	.hhd-filter-bar--horizontal .hhd-filter__toggle {
		padding: 7px 10px;
		font-size: 12px;
	}
}