/**
 * FilterX Frontend Styles
 *
 * BEM naming: .filterx-{block}__{element}--{modifier}
 *
 * @package FilterX
 * @since   1.0.0
 */

:root {
	--filterx-primary: #0073aa;
	--filterx-primary-hover: #005177;
	--filterx-secondary: #f0f0f0;
	--filterx-border: #ddd;
	--filterx-text: #333;
	--filterx-text-light: #666;
	--filterx-text-muted: #999;
	--filterx-spacing: 1rem;
	--filterx-radius: 4px;
	--filterx-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ── Screen-reader text fallback ─────────────────
   WC 8.x+ adds .screen-reader-text spans inside
   get_price_html().  WordPress/WC normally hide them
   via their own stylesheet, but in contexts where
   that CSS isn't loaded (e.g. admin live preview)
   the text would be visible.  FilterX strips these
   spans server-side, but this rule provides an extra
   safety net.
   ──────────────────────────────────────────────── */
.filterx-card .screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

/* =============================================
   Facets
   ============================================= */

.filterx-facets {
	display: flex;
	flex-direction: column;
	gap: var(--filterx-spacing);
}

.filterx-facet {
	border: var(--fx-facet-border-width, 0) var(--fx-facet-border-style, solid) var(--fx-facet-border-color, transparent);
	border-radius: var(--fx-facet-border-radius, var(--filterx-radius));
	padding: var(--fx-facet-padding, 0);
	background: var(--fx-facet-bg, transparent);
	box-shadow: var(--fx-facet-shadow, none);
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
}

/* Facet header (collapsible) */
.filterx-facet__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	user-select: none;
	margin-bottom: 12px;
	background: var(--fx-header-bg, transparent);
	padding: var(--fx-header-padding, 0);
}

.filterx-facet__title {
	margin: 0;
	font-size: var(--fx-header-font-size, 15px);
	font-weight: 600;
	color: var(--fx-header-color, var(--filterx-text));
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.filterx-facet__toggle {
	font-size: 19px;
	line-height: 1;
	color: var(--filterx-text-muted);
}

/* Facet content */
.filterx-facet__content {
	/* container for search + list */
}

/* Hide content when header says collapsed */
.filterx-facet__header[aria-expanded="false"] + .filterx-facet__content {
	display: none;
}

/* Facet search input */
.filterx-facet__search {
	display: block;
	width: 100%;
	padding: var(--fx-input-padding, 6px 10px);
	margin-bottom: 8px;
	border: 1px solid var(--fx-input-border-color, var(--filterx-border));
	border-radius: var(--fx-input-border-radius, var(--filterx-radius));
	font-size: var(--fx-input-font-size, 14px);
	background: var(--fx-input-bg, #fff);
	color: var(--fx-input-color, inherit);
	box-sizing: border-box;
}

.filterx-facet__search:focus {
	border-color: var(--fx-input-focus-border-color, var(--filterx-primary));
	outline: none;
	box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

/* Facet list */
.filterx-facet__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Facet item (checkbox/radio row) */
.filterx-facet__item {
	padding: var(--fx-item-padding, 6px 0);
	background: var(--fx-item-bg, transparent);
	border-bottom: var(--fx-item-border-bottom, none);
	border-color: var(--fx-item-border-color, transparent);
}

.filterx-facet__item:hover {
	background: var(--fx-item-hover-bg, transparent);
}

.filterx-facet__item--hidden {
	display: none;
}

.filterx-facet__item--disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* Facet label (wraps input + text + count) */
.filterx-facet__label {
	display: flex;
	align-items: center;
	gap: var(--fx-item-gap, 8px);
	cursor: pointer;
	font-size: var(--fx-label-font-size, 14px);
	font-weight: var(--fx-label-font-weight, inherit);
	line-height: 1.4;
}

.filterx-facet__label:hover .filterx-facet__text {
	color: var(--fx-label-hover-color);
}

/* Facet input */
.filterx-facet__input {
	margin: 0;
	cursor: pointer;
	flex-shrink: 0;
}

/* Custom checkbox styling via CSS variables.
   :not(.filterx-toggle__input) — toggle inputs are visually hidden (the track
   is the visual control), so they must not inherit this checkbox widget styling. */
.filterx-facet__input[type="checkbox"]:not(.filterx-toggle__input) {
	-webkit-appearance: none;
	appearance: none;
	width: var(--fx-checkbox-size, 16px);
	height: var(--fx-checkbox-size, 16px);
	border: var(--fx-checkbox-border-width, 2px) solid var(--fx-checkbox-border-color, var(--filterx-border));
	border-radius: var(--fx-checkbox-border-radius, 3px);
	background: var(--fx-checkbox-bg, #fff);
	position: relative;
	transition: all 0.15s ease;
}

.filterx-facet__input[type="checkbox"]:not(.filterx-toggle__input):hover {
	border-color: var(--fx-checkbox-hover-border, var(--filterx-primary));
}

.filterx-facet__input[type="checkbox"]:not(.filterx-toggle__input):checked {
	background: var(--fx-checkbox-checked-bg, var(--filterx-primary));
	border-color: var(--fx-checkbox-checked-border, var(--filterx-primary));
}

.filterx-facet__input[type="checkbox"]:not(.filterx-toggle__input):checked::after {
	content: '';
	position: absolute;
	left: 3px;
	top: 0px;
	width: 5px;
	height: 9px;
	border: solid var(--fx-checkbox-check-color, #fff);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Custom radio styling via CSS variables.
   :not(.filterx-rating__input) — rating inputs are hidden siblings,
   not visible form controls, so they must not inherit this widget styling. */
.filterx-facet__input[type="radio"]:not(.filterx-rating__input) {
	-webkit-appearance: none;
	appearance: none;
	width: var(--fx-radio-size, 16px);
	height: var(--fx-radio-size, 16px);
	border: var(--fx-radio-border-width, 2px) solid var(--fx-radio-border-color, var(--filterx-border));
	border-radius: var(--fx-radio-border-radius, 50%);
	background: var(--fx-radio-bg, #fff);
	position: relative;
	transition: all 0.15s ease;
}

.filterx-facet__input[type="radio"]:not(.filterx-rating__input):hover {
	border-color: var(--fx-radio-hover-border, var(--filterx-primary));
}

.filterx-facet__input[type="radio"]:not(.filterx-rating__input):checked {
	border-color: var(--fx-radio-checked-color, var(--filterx-primary));
}

.filterx-facet__input[type="radio"]:not(.filterx-rating__input):checked::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	background: var(--fx-radio-checked-color, var(--filterx-primary));
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

/* Facet text */
.filterx-facet__text {
	flex: 1;
	color: var(--fx-label-color, var(--filterx-text));
}

/* Facet count */
.filterx-facet__count {
	font-size: var(--fx-count-font-size, 13px);
	color: var(--fx-count-color, var(--filterx-text-muted));
	background: var(--fx-count-bg, transparent);
	border-radius: var(--fx-count-border-radius, 0);
	padding: var(--fx-count-padding, 0);
	margin-left: auto;
	flex-shrink: 0;
}

/* Show more / show less toggle */
.filterx-facet__toggle-more {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 5px 0;
	background: none;
	border: none;
	color: var(--fx-more-color, var(--filterx-primary));
	cursor: pointer;
	font-size: var(--fx-more-font-size, 14px);
	text-align: left;
}

.filterx-facet__toggle-more:hover {
	color: var(--fx-more-hover-color, var(--filterx-primary-hover));
	text-decoration: underline;
}

/* Facet clear button */
.filterx-facet__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--fx-clear-margin-top, 10px);
	padding-top:    var(--fx-clear-padding-top,    var(--fx-clear-padding, 4px));
	padding-right:  var(--fx-clear-padding-right,  var(--fx-clear-padding, 12px));
	padding-bottom: var(--fx-clear-padding-bottom, var(--fx-clear-padding, 4px));
	padding-left:   var(--fx-clear-padding-left,   var(--fx-clear-padding, 12px));
	/* Colors */
	background:   var(--fx-clear-bg, transparent);
	color:        var(--fx-clear-color, var(--filterx-text-muted));
	/* Border */
	border-style: var(--fx-clear-border-style, solid);
	border-color: var(--fx-clear-border-color, var(--filterx-border));
	border-top-width:    var(--fx-clear-border-width-top,    var(--fx-clear-border-width, 1px));
	border-right-width:  var(--fx-clear-border-width-right,  var(--fx-clear-border-width, 1px));
	border-bottom-width: var(--fx-clear-border-width-bottom, var(--fx-clear-border-width, 1px));
	border-left-width:   var(--fx-clear-border-width-left,   var(--fx-clear-border-width, 1px));
	border-top-left-radius:     var(--fx-clear-border-radius-tl, var(--fx-clear-border-radius, 999px));
	border-top-right-radius:    var(--fx-clear-border-radius-tr, var(--fx-clear-border-radius, 999px));
	border-bottom-right-radius: var(--fx-clear-border-radius-br, var(--fx-clear-border-radius, 999px));
	border-bottom-left-radius:  var(--fx-clear-border-radius-bl, var(--fx-clear-border-radius, 999px));
	/* Typography */
	font-family:     var(--fx-clear-font-family, inherit);
	font-size:       var(--fx-clear-font-size, 12px);
	font-weight:     var(--fx-clear-font-weight, 500);
	line-height:     var(--fx-clear-line-height, 1.2);
	letter-spacing:  var(--fx-clear-letter-spacing, 0.02em);
	text-transform:  var(--fx-clear-text-transform, uppercase);
	text-decoration: var(--fx-clear-text-decoration, none);
	/* Effects */
	box-shadow: var(--fx-clear-box-shadow, none);
	transition: var(--fx-clear-transition, all 0.15s ease);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.filterx-facet__clear:hover {
	background:   var(--fx-clear-hover-bg, var(--filterx-primary));
	color:        var(--fx-clear-hover-color, #fff);
	border-color: var(--fx-clear-hover-border-color, var(--filterx-primary));
	box-shadow:   var(--fx-clear-hover-box-shadow, none);
}

/* Facet select/dropdown */
/* ── Single-select styled native <select> ── */
.filterx-facet__select,
.filterx-dropdown__select {
	display: block;
	width: 100%;
	padding: var(--fx-select-padding, 9px 32px 9px 12px);
	border: 1px solid var(--fx-select-border-color, var(--filterx-border, #d1d5db));
	border-radius: var(--fx-select-border-radius, var(--filterx-radius, 8px));
	background: var(--fx-select-bg, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 8px center / 16px;
	color: var(--fx-select-color, var(--filterx-text, #374151));
	font-size: var(--fx-select-font-size, 14px);
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	height: var(--fx-select-height, auto);
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.filterx-facet__select:hover,
.filterx-dropdown__select:hover {
	border-color: var(--fx-select-hover-border, #9ca3af);
	background-color: var(--fx-select-hover-bg, transparent);
	color: var(--fx-select-hover-color, inherit);
}

.filterx-facet__select:focus,
.filterx-dropdown__select:focus {
	border-color: var(--fx-select-focus-border, var(--filterx-primary, #6366f1));
	outline: none;
	box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* ── Multi-select: custom checkbox-dropdown ── */
.filterx-dropdown {
	position: relative;
}

.filterx-dropdown__trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 9px 12px;
	font-size: 14px;
	font-family: inherit;
	color: #374151;
	background: #fff;
	border: 1px solid var(--filterx-border, #d1d5db);
	border-radius: var(--filterx-radius, 8px);
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s, box-shadow 0.15s;
	user-select: none;
	box-sizing: border-box;
}

.filterx-dropdown__trigger:hover {
	border-color: #9ca3af;
}

.filterx-dropdown__trigger[aria-expanded="true"] {
	border-color: var(--filterx-primary, #6366f1);
	box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
	border-radius: var(--filterx-radius, 8px) var(--filterx-radius, 8px) 0 0;
}

.filterx-dropdown__trigger-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.filterx-dropdown__trigger-label--placeholder {
	color: #9ca3af;
}

.filterx-dropdown__trigger-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	color: #6b7280;
	transition: transform 0.2s;
}

.filterx-dropdown__trigger[aria-expanded="true"] .filterx-dropdown__trigger-icon {
	transform: rotate(180deg);
}

.filterx-dropdown__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 200;
	background: #fff;
	border: 1px solid var(--filterx-primary, #6366f1);
	border-top: none;
	border-radius: 0 0 var(--filterx-radius, 8px) var(--filterx-radius, 8px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
	max-height: 220px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.filterx-dropdown__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	cursor: pointer;
	font-size: 14px;
	color: #374151;
	transition: background 0.1s;
	user-select: none;
}

.filterx-dropdown__option:hover {
	background: #f3f4f6;
}

.filterx-dropdown__option--selected {
	background: #eff6ff;
}

.filterx-dropdown__option--disabled {
	opacity: 0.45;
	cursor: default;
	pointer-events: none;
}

.filterx-dropdown__option-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.4;
}

.filterx-dropdown__option-count {
	margin-left: 0.2em;
	color: #9ca3af;
	font-size: 0.8em;
}

/* The .filterx-facet__input[type="checkbox"] rule already styles these;
   just ensure no extra space from the hidden-input pattern used elsewhere. */
.filterx-dropdown__checkbox {
	flex-shrink: 0;
}

/* =============================================
   Grid
   ============================================= */

.filterx-grid-wrapper {
	position: relative;
}

.filterx-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--filterx-spacing);
}

/* Layout modifiers via CSS custom properties (set by LayoutEngine) */
.filterx-grid--grid {
	grid-template-columns: repeat(var(--filterx-columns-desktop, 3), 1fr);
	gap: var(--filterx-gap-h, var(--filterx-gap, 20px));
	row-gap: var(--filterx-gap-v, var(--filterx-gap, 20px));
}

/* ── Metro layout — mixed-size tile grid ── */
/* Uses CSS Grid with fixed row height and span classes applied by JS.
   Default pattern cycles: large(2×2), small(1×1), small(1×1), wide(2×1),
   small(1×1), tall(1×2), small(1×1), small(1×1) — repeats every 8 items. */
.filterx-grid--metro {
	grid-template-columns: repeat(var(--filterx-columns-desktop, 4), 1fr);
	grid-auto-rows: var(--filterx-metro-row-h, 200px);
	grid-auto-flow: dense;
	gap: var(--filterx-gap-h, var(--filterx-gap, 20px));
	row-gap: var(--filterx-gap-v, var(--filterx-gap, 20px));
}

/* Metro tile span modifiers */
.filterx-grid--metro .filterx-grid__item--span-2x2 {
	grid-column: span 2;
	grid-row: span 2;
}
.filterx-grid--metro .filterx-grid__item--span-2x1 {
	grid-column: span 2;
}
.filterx-grid--metro .filterx-grid__item--span-1x2 {
	grid-row: span 2;
}

/* Metro cards must fill their cell entirely */
.filterx-grid--metro .filterx-grid__item {
	overflow: hidden;
}
.filterx-grid--metro .filterx-grid__item > .filterx-card {
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
}
/* Make card containers flex-fill the tile */
.filterx-grid--metro .filterx-card--container {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.filterx-grid--metro .filterx-card--container > .filterx-container-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
}
/* Background images should cover the tile */
.filterx-grid--metro .filterx-card__block--image img,
.filterx-grid--metro .filterx-card [style*="background-image"] {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* ── Justified layout — JS calculates row-based proportional sizing ── */
/* Flickr / Google Photos style: items in each row are scaled to fill the
   full container width at a uniform row height. JS computes widths and
   positions; CSS provides the flexbox shell and image cover behaviour. */
.filterx-grid--justified {
	display: block;
}

.filterx-grid--justified .filterx-grid__items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--filterx-gap-v, var(--filterx-gap, 10px));
}

/* Justified rows are built by JS — each row is a flex row.
   Items get explicit width via inline style; height is uniform per row. */
.filterx-grid--justified .filterx-grid__item {
	overflow: hidden;
	flex-shrink: 0;
	flex-grow: 0;
}

/* Cards fill the justified cell entirely */
.filterx-grid--justified .filterx-grid__item > .filterx-card {
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
}

/* Images in justified layout should cover the card area */
.filterx-grid--justified .filterx-card__block--image img,
.filterx-grid--justified .filterx-card__image {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* Force card container to fill height */
.filterx-grid--justified .filterx-card--container {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.filterx-grid--justified .filterx-card--container > .filterx-container-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Masonry layout — JS handles absolute positioning; disable CSS Grid */
.filterx-grid--masonry {
	display: block;
}

/* Masonry items wrapper must be a real box for Masonry.js absolute positioning.
   The global .filterx-grid__items uses display:contents which strips the element's
   box from the render tree — Masonry needs a positioned container for its children. */
.filterx-grid--masonry .filterx-grid__items {
	display: block;
	position: relative;
}

.filterx-grid--list {
	grid-template-columns: 1fr;
	gap: var(--filterx-gap-v, var(--filterx-gap, 20px));
	column-gap: 0;
}

/* ── Carousel layout — JS-driven sliding with arrows & dots ── */
.filterx-grid--carousel {
	display: flex !important;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

/* Track — flex row that slides via transform: translateX */
.filterx-grid--carousel .filterx-grid__items {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow: visible;
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	gap: var(--filterx-gap-h, var(--filterx-gap, 20px));
	will-change: transform;
	cursor: grab;
}

.filterx-grid--carousel .filterx-grid__items.filterx-grabbing {
	cursor: grabbing;
	transition: none;
}

/* Each item — fixed fraction of visible area */
.filterx-grid--carousel .filterx-grid__item {
	flex: 0 0 auto;
	box-sizing: border-box;
	pointer-events: auto;
}

/* Cards fill carousel cell */
.filterx-grid--carousel .filterx-grid__item > .filterx-card {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
	height: 100%;
}

/* ── Carousel Arrows ── */
.filterx-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--filterx-arrow-size, 36px);
	height: var(--filterx-arrow-size, 36px);
	background: var(--filterx-arrow-bg, rgba(0, 0, 0, 0.5));
	color: var(--filterx-arrow-color, #fff);
	border: none;
	border-radius: var(--filterx-arrow-radius, 50%);
	cursor: pointer;
	font-size: calc(var(--filterx-arrow-size, 36px) * 0.5);
	line-height: 1;
	padding: 0;
	transition: opacity 0.2s, background-color 0.2s;
	opacity: 0.8;
}
.filterx-carousel__arrow:hover {
	opacity: 1;
	background: var(--filterx-arrow-bg-hover, var(--filterx-arrow-bg, rgba(0, 0, 0, 0.7)));
}
.filterx-carousel__arrow[disabled] {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}
/* Default (center-overlay): arrows centered vertically, at left/right edges */
.filterx-carousel__arrow--prev { left: 8px; }
.filterx-carousel__arrow--next { right: 8px; }

/* ── Arrow position variants ── */
/* Top positions */
.filterx-grid--carousel[data-arrows-position="top-left"] .filterx-carousel__arrow,
.filterx-grid--carousel[data-arrows-position="top-center"] .filterx-carousel__arrow,
.filterx-grid--carousel[data-arrows-position="top-right"] .filterx-carousel__arrow {
	top: 8px;
	transform: none;
}
.filterx-grid--carousel[data-arrows-position="top-left"] .filterx-carousel__arrow--prev { left: 8px; }
.filterx-grid--carousel[data-arrows-position="top-left"] .filterx-carousel__arrow--next { left: calc(var(--filterx-arrow-size, 36px) + 14px); right: auto; }
.filterx-grid--carousel[data-arrows-position="top-center"] .filterx-carousel__arrow--prev { left: calc(50% - var(--filterx-arrow-size, 36px) - 3px); right: auto; }
.filterx-grid--carousel[data-arrows-position="top-center"] .filterx-carousel__arrow--next { right: calc(50% - var(--filterx-arrow-size, 36px) - 3px); left: auto; }
.filterx-grid--carousel[data-arrows-position="top-right"] .filterx-carousel__arrow--next { right: 8px; }
.filterx-grid--carousel[data-arrows-position="top-right"] .filterx-carousel__arrow--prev { right: calc(var(--filterx-arrow-size, 36px) + 14px); left: auto; }

/* Center positions */
.filterx-grid--carousel[data-arrows-position="center-left"] .filterx-carousel__arrow { left: 12px; right: auto; }
.filterx-grid--carousel[data-arrows-position="center-left"] .filterx-carousel__arrow--next { left: calc(var(--filterx-arrow-size, 36px) + 18px); }
.filterx-grid--carousel[data-arrows-position="center-right"] .filterx-carousel__arrow { right: 12px; left: auto; }
.filterx-grid--carousel[data-arrows-position="center-right"] .filterx-carousel__arrow--prev { right: calc(var(--filterx-arrow-size, 36px) + 18px); }

/* Bottom positions */
.filterx-grid--carousel[data-arrows-position="bottom-left"] .filterx-carousel__arrow,
.filterx-grid--carousel[data-arrows-position="bottom-center"] .filterx-carousel__arrow,
.filterx-grid--carousel[data-arrows-position="bottom-right"] .filterx-carousel__arrow {
	top: auto;
	bottom: 8px;
	transform: none;
}
.filterx-grid--carousel[data-arrows-position="bottom-left"] .filterx-carousel__arrow--prev { left: 8px; }
.filterx-grid--carousel[data-arrows-position="bottom-left"] .filterx-carousel__arrow--next { left: calc(var(--filterx-arrow-size, 36px) + 14px); right: auto; }
.filterx-grid--carousel[data-arrows-position="bottom-center"] .filterx-carousel__arrow--prev { left: calc(50% - var(--filterx-arrow-size, 36px) - 3px); right: auto; }
.filterx-grid--carousel[data-arrows-position="bottom-center"] .filterx-carousel__arrow--next { right: calc(50% - var(--filterx-arrow-size, 36px) - 3px); left: auto; }
.filterx-grid--carousel[data-arrows-position="bottom-right"] .filterx-carousel__arrow--next { right: 8px; }
.filterx-grid--carousel[data-arrows-position="bottom-right"] .filterx-carousel__arrow--prev { right: calc(var(--filterx-arrow-size, 36px) + 14px); left: auto; }

/* Outside — arrows placed beyond grid boundary, needs wrapper with visible overflow */
.filterx-grid--carousel[data-arrows-position="outside-center"] {
	overflow: visible;
}
.filterx-grid--carousel[data-arrows-position="outside-center"] .filterx-grid__items {
	overflow: hidden;
}
.filterx-grid--carousel[data-arrows-position="outside-center"] .filterx-carousel__arrow--prev { left: -48px; }
.filterx-grid--carousel[data-arrows-position="outside-center"] .filterx-carousel__arrow--next { right: -48px; }

/* Default SVG chevron icon inside arrows */
.filterx-carousel__arrow svg {
	width: 60%;
	height: 60%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── Carousel Dots ── */
.filterx-carousel__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--filterx-dot-gap, 6px);
	padding: 12px 0 4px;
}

/* ── Dot position variants ── */
/* Inside top */
.filterx-grid--carousel[data-dots-position="top-left"] .filterx-carousel__dots,
.filterx-grid--carousel[data-dots-position="top-center"] .filterx-carousel__dots,
.filterx-grid--carousel[data-dots-position="top-right"] .filterx-carousel__dots {
	order: -1;
	padding: 0 0 8px;
}
.filterx-grid--carousel[data-dots-position="top-left"] .filterx-carousel__dots { justify-content: flex-start; }
.filterx-grid--carousel[data-dots-position="top-center"] .filterx-carousel__dots { justify-content: center; }
.filterx-grid--carousel[data-dots-position="top-right"] .filterx-carousel__dots { justify-content: flex-end; }

/* Inside bottom (default) */
.filterx-grid--carousel[data-dots-position="bottom-left"] .filterx-carousel__dots,
.filterx-grid--carousel[data-dots-position="bottom-center"] .filterx-carousel__dots,
.filterx-grid--carousel[data-dots-position="bottom-right"] .filterx-carousel__dots {
	order: 10;
	padding: 8px 0 0;
}
.filterx-grid--carousel[data-dots-position="bottom-left"] .filterx-carousel__dots { justify-content: flex-start; }
.filterx-grid--carousel[data-dots-position="bottom-center"] .filterx-carousel__dots { justify-content: center; }
.filterx-grid--carousel[data-dots-position="bottom-right"] .filterx-carousel__dots { justify-content: flex-end; }

/* Outside bottom — below the grid boundary */
.filterx-grid--carousel[data-dots-position="outside-bottom"] .filterx-carousel__dots {
	order: 10;
	padding: 12px 0 0;
	justify-content: center;
}

/* Dot base — circle style (default) */
.filterx-carousel__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--filterx-dot-size, 10px);
	height: var(--filterx-dot-size, 10px);
	border-radius: 50%;
	background: var(--filterx-dot-color, #d1d5db);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.2s;
}
.filterx-carousel__dot:hover {
	transform: scale(1.2);
}
.filterx-carousel__dot--active {
	background: var(--filterx-dot-active, #2563eb);
	transform: scale(1.15);
}

/* Dot style: pill */
.filterx-carousel__dots--pill .filterx-carousel__dot {
	width: calc(var(--filterx-dot-size, 10px) * 2);
	height: calc(var(--filterx-dot-size, 10px) * 0.5);
	border-radius: calc(var(--filterx-dot-size, 10px) * 0.25);
}
.filterx-carousel__dots--pill .filterx-carousel__dot--active {
	width: calc(var(--filterx-dot-size, 10px) * 3);
}

/* Dot style: dash */
.filterx-carousel__dots--dash .filterx-carousel__dot {
	width: calc(var(--filterx-dot-size, 10px) * 2.5);
	height: 3px;
	border-radius: 2px;
}
.filterx-carousel__dots--dash .filterx-carousel__dot--active {
	width: calc(var(--filterx-dot-size, 10px) * 3.5);
}

/* Dot style: number */
.filterx-carousel__dots--number .filterx-carousel__dot {
	width: auto;
	height: auto;
	min-width: calc(var(--filterx-dot-size, 10px) * 2.2);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: calc(var(--filterx-dot-size, 10px) * 0.9);
	font-weight: 600;
	color: var(--filterx-dot-color, #6b7280);
	background: transparent;
}
.filterx-carousel__dots--number .filterx-carousel__dot--active {
	color: var(--filterx-dot-active, #2563eb);
	background: transparent;
	text-decoration: underline;
}

/* Grid items container */
.filterx-grid__items {
	display: contents;
}

/* Grid item wrapper */
.filterx-grid__item {
	/* article wrapper from grid-item.php */
	min-width: 0; /* prevent grid blowout */
}

/* Inside a grid, cards fill their cell regardless of inline width */
.filterx-grid__item > .filterx-card {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
}

/* =============================================
   Cards
   ============================================= */

.filterx-card {
	border: none;
	border-radius: var(--filterx-radius);
	overflow: hidden;
	background: #ffffff;
	box-shadow: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.filterx-card:hover {
	box-shadow: none;
	transform: none;
}

/* Clickable card — JS delegation via data-filterx-link attribute */
.filterx-card--clickable {
	cursor: pointer;
}

/* ── Equal-height cards ── */
/* Forces every card in a row to the same height. The grid item becomes a
   flex container so the card stretches, and the card's root layout uses
   flex-grow so internal content fills the available space. The last
   direct child inside the root container pushes down via margin-top:auto,
   which pins CTAs / buttons to the bottom regardless of title length. */
.filterx-grid--equal-height .filterx-grid__item {
	display: flex;
	flex-direction: column;
}

.filterx-grid--equal-height .filterx-card,
.filterx-grid--equal-height .filterx-card--container,
.filterx-grid--equal-height .filterx-card--grid {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Container-tree cards: stretch the root container wrapper */
.filterx-grid--equal-height .filterx-card--container > .filterx-container-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.filterx-grid--equal-height .filterx-card--container > .filterx-container-wrapper > .filterx-container {
	flex: 1;
}

/* Push the last child in a vertical container to the bottom */
.filterx-grid--equal-height .filterx-container[style*="flex-direction: column"] > .filterx-container-wrapper:last-child,
.filterx-grid--equal-height .filterx-container[style*="flex-direction:column"] > .filterx-container-wrapper:last-child {
	margin-top: auto;
}

/* Card blocks (BEM from CardBuilder + default card) */
.filterx-card__block {
	/* generic block container */
}

.filterx-card__block--image {
	/* overflow visible so image shadow/border can extend beyond */
}

.filterx-card__image-link {
	display: block;
	line-height: 0;
	border-radius: inherit;
}

/* ── Image wrapper — supports aspect-ratio via inline style ── */
.filterx-card__image-wrapper {
	position: relative;
	line-height: 0;
	border-radius: inherit;
}

/* Ratio wrapper: img uses position:absolute + inset to fill, then
   clips itself via border-radius:inherit. No overflow:hidden on
   wrapper so box-shadow and border can extend outward. */

.filterx-card__image-wrapper--ratio .filterx-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.filterx-card__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: inherit;
}

.filterx-card__block--title,
.filterx-card__block--excerpt,
.filterx-card__block--date {
	padding: 0 var(--filterx-spacing);
}

.filterx-card__block--title {
	padding-top: var(--filterx-spacing);
}

.filterx-card__block--date {
	padding-bottom: var(--filterx-spacing);
}

/* Custom card templates: wrapper handles all spacing — reset inner block defaults. */
.filterx-card__block-wrapper > .filterx-card__block {
	padding: 0;
}

/* Absolutely-positioned blocks (e.g. badges) must stack above siblings
   whose animation classes create stacking contexts via will-change/transform. */
.filterx-card__block-wrapper[style*="position:absolute"],
.filterx-card__block-wrapper[style*="position: absolute"] {
	z-index: 10;
}

.filterx-card__title {
	margin: 0 0 6px 0;
	font-size: var(--fx-font-size, 17px);
	font-weight: var(--fx-font-weight, 600);
	line-height: var(--fx-line-height, 22px);
	letter-spacing: var(--fx-letter-spacing, 0px);
	text-transform: var(--fx-text-transform, none);
	text-decoration: var(--fx-text-decoration, none);
	font-family: var(--fx-font-family, inherit);
	color: var(--fx-color, inherit);
	text-align: var(--fx-text-align, inherit);
}

.filterx-card__title a {
	color: var(--filterx-link-color, var(--filterx-text));
	text-decoration: none;
}

.filterx-card__title a:hover {
	color: var(--filterx-link-hover, var(--filterx-primary));
}

.filterx-card__title-prefix,
.filterx-card__title-suffix {
	vertical-align: middle;
}

.filterx-card__excerpt {
	margin: 0 0 8px 0;
	font-size: var(--fx-font-size, 14px);
	color: var(--fx-color, var(--filterx-text-light));
	line-height: var(--fx-line-height, 21px);
	font-weight: var(--fx-font-weight, 400);
	letter-spacing: var(--fx-letter-spacing, 0px);
	text-transform: var(--fx-text-transform, none);
	font-family: var(--fx-font-family, inherit);
	text-align: var(--fx-text-align, inherit);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.filterx-card__date {
	display: block;
	font-size: var(--fx-font-size, 13px);
	color: var(--fx-color, var(--filterx-text-muted));
	font-weight: var(--fx-font-weight, 400);
	font-family: var(--fx-font-family, inherit);
	line-height: var(--fx-line-height, 18px);
	letter-spacing: var(--fx-letter-spacing, 0px);
	text-transform: var(--fx-text-transform, none);
	text-align: var(--fx-text-align, inherit);
}

/* ACF field (from CardBuilder blocks) */
.filterx-card__acf-field {
	font-size: var(--fx-font-size, 14px);
	font-family: var(--fx-font-family, inherit);
	color: var(--fx-color, inherit);
	font-weight: var(--fx-font-weight, 400);
	line-height: var(--fx-line-height, 1.5);
	letter-spacing: var(--fx-letter-spacing, normal);
	text-transform: var(--fx-text-transform, none);
	text-align: var(--fx-text-align, inherit);
	text-decoration: var(--fx-text-decoration, none);
	margin: 0;
}

.filterx-card__acf-label {
	font-weight: var(--fx-font-weight, 600);
	margin-right: 4px;
}

.filterx-card__acf-value {
	font-size: var(--fx-font-size, 14px);
	font-family: var(--fx-font-family, inherit);
	color: var(--fx-color, inherit);
}

/* Card meta (from CardBuilder blocks) */
.filterx-card__meta {
	font-size: var(--fx-font-size, 14px);
	font-family: var(--fx-font-family, inherit);
	color: var(--fx-color, inherit);
	font-weight: var(--fx-font-weight, 400);
	line-height: var(--fx-line-height, 1.5);
	letter-spacing: var(--fx-letter-spacing, normal);
	text-transform: var(--fx-text-transform, none);
	text-align: var(--fx-text-align, inherit);
	text-decoration: var(--fx-text-decoration, none);
	padding: 0 var(--filterx-spacing);
	margin: 0;
}

.filterx-card__meta-label {
	font-weight: var(--fx-font-weight, 600);
	margin-right: 4px;
}

.filterx-card__meta-value {
	font-size: var(--fx-font-size, 14px);
	font-family: var(--fx-font-family, inherit);
	color: var(--fx-color, inherit);
}

/* Text block (from CardBuilder blocks) */
.filterx-card__text {
	margin: 0;
	font-size: var(--fx-font-size, 14px);
	font-family: var(--fx-font-family, inherit);
	line-height: var(--fx-line-height, 1.5);
	color: var(--fx-color, inherit);
}

/* Author block */
.filterx-card__author {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 var(--filterx-spacing) var(--filterx-spacing);
}

.filterx-card__author-image {
	border-radius: 50%;
	width: 32px;
	height: 32px;
}

.filterx-card__author-name {
	font-size: var(--fx-font-size, 14px);
	color: var(--fx-color, var(--filterx-text));
	text-decoration: var(--fx-text-decoration, none);
	font-weight: var(--fx-font-weight, 400);
	font-family: var(--fx-font-family, inherit);
}

.filterx-card__author-name:hover {
	color: var(--filterx-primary);
}

/* Taxonomy block */
.filterx-card__taxonomy {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	padding: 0 var(--filterx-spacing) 8px;
}

.filterx-card__term {
	display: inline-block;
	padding: 2px 8px;
	background: var(--filterx-secondary);
	border-radius: 3px;
	font-size: var(--fx-font-size, 12px);
	color: var(--fx-color, var(--filterx-text-light));
	text-decoration: var(--fx-text-decoration, none);
	font-weight: var(--fx-font-weight, 400);
	font-family: var(--fx-font-family, inherit);
}

.filterx-card__term:hover {
	background: var(--filterx-primary);
	color: #fff;
}

/* Button block */
.filterx-card__button {
	display: inline-block;
	padding: 8px 16px;
	margin: 0 var(--filterx-spacing) var(--filterx-spacing);
	background: var(--filterx-primary);
	color: #fff;
	border: none;
	border-radius: var(--filterx-radius);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease;
}

.filterx-card__button:hover {
	background: var(--filterx-primary-hover);
}

/* Button variants */
.filterx-card__button--primary {
	background: var(--filterx-primary);
	color: #fff;
	border: none;
}

.filterx-card__button--primary:hover {
	background: var(--filterx-primary-hover);
}

.filterx-card__button--secondary {
	background: #e5e7eb;
	color: #111827;
	border: none;
}

.filterx-card__button--secondary:hover {
	background: #d1d5db;
	color: #111827;
}

.filterx-card__button--outline {
	background: transparent;
	color: var(--filterx-primary);
	border: 2px solid var(--filterx-primary);
}

.filterx-card__button--outline:hover {
	background: var(--filterx-primary);
	color: #fff;
}

.filterx-card__button--custom {
	background: transparent;
	color: inherit;
	border: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.filterx-card__button--full-width {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	margin-left: 0;
	margin-right: 0;
}

/* Inside container layout, spacing is handled by the container gap,
   so reset the button's default margin to avoid inflating the row. */
.filterx-card__block-wrapper .filterx-card__button {
	margin: 0;
}

/* Add-to-cart block (WooCommerce) ---------------------------------------- */
.filterx-card__add-to-cart {
	display: flex;
	align-items: center;
}

.filterx-card__add-to-cart a,
.filterx-card__add-to-cart a.button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 16px;
	background: var(--filterx-primary);
	color: #fff;
	border: none;
	border-radius: var(--filterx-radius);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease;
	line-height: 20px;
}

/* Single-class hover: specificity 0,1,1 so scoped per-block hover
   rules (.filterx-el-xxx a.button:hover → 0,2,1) can override. */
.filterx-card__add-to-cart a:hover {
	background: var(--filterx-primary-hover);
	color: #fff;
	text-decoration: none;
}

.filterx-card__add-to-cart a svg {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

.filterx-card__add-to-cart--full-width {
	width: 100%;
}

.filterx-card__add-to-cart--full-width a {
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

.filterx-card__add-to-cart--outline a {
	background: transparent;
	color: var(--filterx-primary) !important;
	border: 2px solid var(--filterx-primary);
}

.filterx-card__add-to-cart--outline a:hover {
	background: var(--filterx-primary);
	color: #fff !important;
}

.filterx-card__add-to-cart--filled a {
	background: var(--filterx-primary);
	color: #fff !important;
}

/* Inside container layout, reset margin like regular buttons */
.filterx-card__block-wrapper .filterx-card__add-to-cart a {
	margin: 0;
}

/* Star rating */
.filterx-card__rating {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 0 var(--filterx-spacing) 8px;
}

.filterx-card__star--filled {
	color: #f5a623;
}

.filterx-card__star--empty {
	color: #ddd;
}

/* Half star: base layer is gray (empty), overlay layer is gold (filled). */
.filterx-card__star--half {
	color: #ddd;
}

.filterx-card__star--half > span:last-child {
	color: #f5a623;
}

.filterx-card__review-count {
	font-size: 13px;
	color: var(--filterx-text-muted);
}

/* Price block */
.filterx-card__price {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 var(--filterx-spacing) 8px;
	/* Default 18px matches the preview renderer default — override via
	   ElementStyles typography or the price_font_size block setting. */
	font-size: var(--fx-font-size, 18px);
	font-weight: var(--fx-font-weight, 600);
	color: var(--fx-color, inherit);
	font-family: var(--fx-font-family, inherit);
}

.filterx-card__price--stacked {
	flex-direction: column;
	align-items: flex-start;
}

.filterx-card__price-value {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

/* WooCommerce injects <del>/<ins> for sale prices. Reset font-size so they
   inherit from .filterx-card__price-value, and rely on inline styles
   (injected by PHP) for colour overrides. */
.filterx-card__price-value del,
.filterx-card__price-value ins {
	font-size: inherit;
	text-decoration-color: inherit;
}
.filterx-card__price-value ins {
	text-decoration: none;
}
.filterx-card__price-value del {
	opacity: 0.6;
}

.filterx-card__sale-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	background: #e74c3c;
	color: #fff;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 15px;
}

.filterx-card__subscription-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	background: #6366f1;
	color: #fff;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 15px;
}

.filterx-card__subscription-fee,
.filterx-card__subscription-trial {
	width: 100%;
	font-size: 12px;
	color: #6b7280;
}

/* =============================================
   Loading State
   ============================================= */

.filterx-loading {
	opacity: 0.6;
	pointer-events: none;
	position: relative;
}

.filterx-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	border: 3px solid var(--filterx-secondary);
	border-top-color: var(--filterx-primary);
	border-radius: 50%;
	animation: filterx-spin 0.8s linear infinite;
	z-index: 10;
}

@keyframes filterx-spin {
	to {
		transform: rotate(360deg);
	}
}

/* =============================================
   Empty State
   ============================================= */

.filterx-grid-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 48px var(--filterx-spacing);
	color: var(--filterx-text-muted);
}

.filterx-grid-empty p {
	font-size: 18px;
	margin: 0;
}

/* =============================================
   Pagination — CSS custom property driven
   All --fxp-* vars are set inline from pagination_config.
   ============================================= */

.filterx-pagination {
	display: flex;
	justify-content: var(--fxp-justify, center);
	align-items: center;
	gap: var(--fxp-gap, 6px);
	margin-top: var(--fxp-margin-top, 24px);
	margin-bottom: var(--fxp-margin-bottom, 0);
	flex-wrap: wrap;
	font-size: var(--fxp-font-size, 14px);
}

/* Numbered list */
.filterx-pagination__list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--fxp-gap, 6px);
	align-items: center;
	flex-wrap: wrap;
}

.filterx-pagination__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.filterx-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25em;
	height: 2.25em;
	padding: var(--fxp-padding, 8px 12px);
	border: 1px solid var(--fxp-border-color, #d1d5db);
	border-radius: var(--fxp-radius, 4px);
	background: var(--fxp-bg, #fff);
	color: var(--fxp-color, #374151);
	text-decoration: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	cursor: pointer;
	line-height: 1;
}

.filterx-pagination__link:hover {
	background: var(--fxp-hover-bg, #3b82f6);
	color: var(--fxp-hover-color, #fff);
	border-color: var(--fxp-hover-border-color, #3b82f6);
}

.filterx-pagination__link--active,
.filterx-pagination__link--active:hover {
	background: var(--fxp-active-bg, #3b82f6);
	color: var(--fxp-active-color, #fff);
	border-color: var(--fxp-active-border-color, #3b82f6);
	pointer-events: none;
}

.filterx-pagination__dots {
	border: none;
	background: transparent;
	color: var(--filterx-text-muted, #9ca3af);
	min-width: 1.5em;
	cursor: default;
}

/* Results info */
.filterx-pagination__info {
	width: 100%;
	text-align: var(--fxp-justify, center);
	font-size: 0.85em;
	color: var(--filterx-text-light, #6b7280);
	margin-bottom: 8px;
}

/* Load More button */
.filterx-pagination__load-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--fxp-btn-width, auto);
	min-height: var(--fxp-btn-height, 40px);
	padding: var(--fxp-padding, 8px 24px);
	font-size: var(--fxp-font-size, 14px);
	border: 1px solid var(--fxp-border-color, #d1d5db);
	border-radius: var(--fxp-radius, 4px);
	background: var(--fxp-bg, #fff);
	color: var(--fxp-color, #374151);
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.filterx-pagination__load-more:hover {
	background: var(--fxp-hover-bg, #3b82f6);
	color: var(--fxp-hover-color, #fff);
	border-color: var(--fxp-hover-border-color, #3b82f6);
}

.filterx-pagination__load-more[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

.filterx-pagination__no-more {
	font-size: 0.85em;
	color: var(--filterx-text-muted, #9ca3af);
}

/* Infinite scroll trigger */
.filterx-pagination__infinite-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px;
	color: var(--filterx-text-muted, #9ca3af);
	font-size: 0.85em;
}

.filterx-pagination__spinner {
	width: 20px;
	height: 20px;
	border: 2px solid var(--filterx-border, #d1d5db);
	border-top-color: var(--fxp-active-bg, #3b82f6);
	border-radius: 50%;
	animation: filterx-spin 0.6s linear infinite;
}

@keyframes filterx-spin {
	to { transform: rotate(360deg); }
}

/* =============================================
   Responsive
   ============================================= */

@media ( max-width: 1024px ) {
	.filterx-grid--grid {
		grid-template-columns: repeat(var(--filterx-columns-tablet, 2), 1fr);
	}

	.filterx-grid--metro {
		grid-template-columns: repeat(var(--filterx-columns-tablet, 2), 1fr);
		grid-auto-rows: var(--filterx-metro-row-h, 180px);
	}
	/* Downgrade 2-col spans to 1-col on tablet with 2 columns */
	.filterx-grid--metro .filterx-grid__item--span-2x2 {
		grid-column: span min(2, var(--filterx-columns-tablet, 2));
		grid-row: span 2;
	}
	.filterx-grid--metro .filterx-grid__item--span-2x1 {
		grid-column: span min(2, var(--filterx-columns-tablet, 2));
	}

}

@media ( max-width: 767px ) {
	.filterx-grid--grid {
		grid-template-columns: repeat(var(--filterx-columns-mobile, 1), 1fr);
	}

	.filterx-grid--metro {
		grid-template-columns: repeat(var(--filterx-columns-mobile, 1), 1fr);
		grid-auto-rows: var(--filterx-metro-row-h, 160px);
	}
	/* On single-column mobile, remove all spanning */
	.filterx-grid--metro .filterx-grid__item--span-2x2,
	.filterx-grid--metro .filterx-grid__item--span-2x1 {
		grid-column: span 1;
	}
	.filterx-grid--metro .filterx-grid__item--span-2x2,
	.filterx-grid--metro .filterx-grid__item--span-1x2 {
		grid-row: span 1;
	}

	/* Carousel: shrink arrows on mobile for touch UX */
	.filterx-carousel__arrow {
		width: 28px;
		height: 28px;
		font-size: 12px;
	}

	.filterx-facets {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.filterx-facet {
		flex: 0 1 calc(50% - 8px);
	}
}

@media ( max-width: 480px ) {
	.filterx-facet {
		flex: 1;
		min-width: 100%;
	}

	.filterx-grid {
		grid-template-columns: 1fr;
	}
}

/* =============================================
   Range Facet
   ============================================= */

.filterx-range {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.filterx-range__input {
	width: 100%;
	height: var(--fx-range-track-height, 4px);
	border-radius: 2px;
	background: var(--fx-range-track-bg, var(--filterx-secondary));
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.filterx-range__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: var(--fx-range-thumb-size, 18px);
	height: var(--fx-range-thumb-size, 18px);
	border-radius: var(--fx-range-thumb-border-radius, 50%);
	/* --fx-range-track-active controls the active/filled track colour.
	   A JS-driven two-tone fill can read this var via getComputedStyle().
	   It also acts as a thumb bg override when set. */
	background: var(--fx-range-thumb-bg, var(--fx-range-track-active, var(--filterx-primary)));
	border: var(--fx-range-thumb-border-width, 2px) solid var(--fx-range-thumb-border, transparent);
	cursor: pointer;
	transition: background 0.2s ease;
}

.filterx-range__input::-webkit-slider-thumb:hover {
	background: var(--fx-range-thumb-hover, var(--filterx-primary-hover));
}

.filterx-range__input::-moz-range-thumb {
	width: var(--fx-range-thumb-size, 18px);
	height: var(--fx-range-thumb-size, 18px);
	border-radius: var(--fx-range-thumb-border-radius, 50%);
	background: var(--fx-range-thumb-bg, var(--filterx-primary));
	border: var(--fx-range-thumb-border-width, 2px) solid var(--fx-range-thumb-border, transparent);
	cursor: pointer;
	transition: background 0.2s ease;
}

.filterx-range__input::-moz-range-thumb:hover {
	background: var(--fx-range-thumb-hover, var(--filterx-primary-hover));
}

.filterx-range__input:focus {
	outline: none;
}

/* ── Inputs row — compact pill boxes, no visible labels (Amazon/FB style) ── */
.filterx-range__inputs {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Visually hide labels but keep them for screen readers */
.filterx-range__input-group label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Each input group = bordered pill wrapper */
.filterx-range__input-group {
	flex: 1;
	display: flex;
	align-items: center;
	border: 1.5px solid var(--fx-input-border-color, var(--filterx-border, #d1d5db));
	border-radius: 8px;
	background: var(--fx-input-bg, #fff);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filterx-range__input-group:focus-within {
	border-color: var(--filterx-primary, #6366f1);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.filterx-range__input-group .filterx-range__input-addon {
	padding: 0 6px;
	font-size: 13px;
	color: var(--filterx-text-muted, #9ca3af);
	user-select: none;
}

/* Number input: no border of its own, fills the pill.
   height: auto overrides the legacy .filterx-range__input { height: 4px } rule
   which was written for <input type="range"> and must not apply here. */
.filterx-range__input--min,
.filterx-range__input--max {
	flex: 1;
	min-width: 0;
	width: 100%;
	height: auto;
	min-height: 36px;
	padding: 6px 10px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 14px;
	color: var(--fx-input-color, inherit);
	text-align: center;
	box-sizing: border-box;
	-moz-appearance: textfield;
	line-height: 1.4;
}

.filterx-range__input--min::-webkit-inner-spin-button,
.filterx-range__input--min::-webkit-outer-spin-button,
.filterx-range__input--max::-webkit-inner-spin-button,
.filterx-range__input--max::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.filterx-range__input--min:focus,
.filterx-range__input--max:focus {
	outline: none;
}

/* Separator dash between the two pill inputs */
.filterx-range__input-separator {
	flex-shrink: 0;
	padding: 0 2px;
	color: var(--filterx-text-muted, #9ca3af);
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	user-select: none;
}

/* Range display text */
.filterx-range__display {
	color: var(--fx-range-display-color, inherit);
	font-size: var(--fx-range-display-font-size, inherit);
}

/* Hide the text display when number inputs are present — inputs are the display */
.filterx-range__wrapper:has(.filterx-range__input--min) .filterx-range__display {
	display: none;
}

/* ── JS-built dual-handle slider track ── */
.filterx-range__slider {
	position: relative;
	height: 28px; /* extra height gives room for the larger thumb */
	margin: 0 10px; /* side margin so thumb doesn't clip the card edge */
}

.filterx-range__track {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
	height: var(--fx-range-track-height, 6px);
	background: var(--fx-range-track-bg, #e5e7eb);
	border-radius: 9999px;
	pointer-events: none;
}

.filterx-range__track-fill {
	position: absolute;
	height: 100%;
	background: var(--fx-range-track-active, var(--filterx-primary, #6366f1));
	border-radius: 9999px;
}

/* Two overlaid <input type="range"> elements that share the same track space */
.filterx-range__thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	pointer-events: none;
	outline: none;
	margin: 0;
	padding: 0;
}

.filterx-range__thumb--min { z-index: 1; }
.filterx-range__thumb--max { z-index: 2; }

/* Amazon/Facebook thumb: white circle with accent border + subtle shadow */
.filterx-range__thumb::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: var(--fx-range-thumb-size, 20px);
	height: var(--fx-range-thumb-size, 20px);
	border-radius: 50%;
	background: var(--fx-range-thumb-bg, #fff);
	border: 2px solid var(--filterx-primary, #6366f1);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	pointer-events: all;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.filterx-range__thumb::-webkit-slider-thumb:hover,
.filterx-range__thumb:focus::-webkit-slider-thumb {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(99, 102, 241, 0.15);
	transform: scale(1.1);
}

.filterx-range__thumb::-moz-range-thumb {
	width: var(--fx-range-thumb-size, 20px);
	height: var(--fx-range-thumb-size, 20px);
	border-radius: 50%;
	background: var(--fx-range-thumb-bg, #fff);
	border: 2px solid var(--filterx-primary, #6366f1);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	pointer-events: all;
}

/* =============================================
   Date Range Facet
   ============================================= */

/* Wrapper — was wrongly named .filterx-date-range in old CSS */
.filterx-date-range__wrapper {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Three-column grid: [From group] [–] [To group] */
.filterx-date-range__inputs {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;   /* align separator baseline with the inputs */
	gap: 0 8px;
}

/* Each group stacks its label above its input */
.filterx-date-range__input-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.filterx-date-range__input-group label {
	font-size: 12px;
	font-weight: 500;
	color: var(--filterx-text-muted, #6b7280);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.filterx-date-range__input {
	width: 100%;
	padding: var(--fx-input-padding, 6px 10px);
	border: 1px solid var(--fx-input-border-color, var(--filterx-border));
	border-radius: var(--fx-input-border-radius, var(--filterx-radius));
	font-size: var(--fx-input-font-size, 14px);
	background: var(--fx-input-bg, #fff);
	color: var(--fx-input-color, inherit);
	box-sizing: border-box;
}

.filterx-date-range__input:focus {
	border-color: var(--fx-input-focus-border-color, var(--filterx-primary));
	outline: none;
	box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

/* Separator "–" — was wrongly named .filterx-date-range__separator in old CSS */
.filterx-date-range__input-sep {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 8px;  /* align with input centre, not label top */
	color: var(--filterx-text-muted, #9ca3af);
	font-size: 14px;
	line-height: 1;
	user-select: none;
}

/* =============================================
   Search Facet
   ============================================= */

.filterx-search {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ── Wrapper ── */
.filterx-search__wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

/* ── Input ── */
.filterx-search__input {
	width: 100%;
	padding: var(--fx-search-padding, 6px 10px);
	border: 1px solid var(--fx-input-border-color, var(--filterx-border));
	border-radius: var(--fx-input-border-radius, var(--filterx-radius));
	font-size: var(--fx-input-font-size, 14px);
	background: var(--fx-input-bg, #fff);
	color: var(--fx-input-color, inherit);
	box-sizing: border-box;
	/* Remove browser-native search clear × — we render our own */
	-webkit-appearance: none;
	appearance: none;
}

/* Suppress browser's native ×/clear in WebKit */
.filterx-search__input::-webkit-search-cancel-button,
.filterx-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.filterx-search__input:focus {
	border-color: var(--fx-input-focus-border-color, var(--filterx-primary));
	outline: none;
	box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

/* ── Icon ── */
.filterx-search__icon {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fx-search-icon-color, #9ca3af);
	pointer-events: none;
	flex-shrink: 0;
}

.filterx-search__icon--left {
	left: 9px;
}

.filterx-search__icon--right {
	right: 9px;
}

/* Pad input so text doesn't overlap icon or clear button */
.filterx-search__wrapper--icon-left  .filterx-search__input { padding-left: 32px; }
.filterx-search__wrapper--icon-right .filterx-search__input { padding-right: 32px; }
.filterx-search__wrapper--has-clear  .filterx-search__input { padding-right: 29px; }

/* When both icon-right AND has-clear */
.filterx-search__wrapper--icon-right.filterx-search__wrapper--has-clear .filterx-search__input {
	padding-right: 51px;
}

/* ── Inline clear (×) button ── */
.filterx-search__clear {
	position: absolute;
	right: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3px;
	border: none;
	background: transparent;
	color: var(--fx-search-clear-color, #9ca3af);
	cursor: pointer;
	border-radius: 50%;
	transition: color 0.15s, background 0.15s;
	line-height: 1;
}

.filterx-search__clear:hover {
	color: var(--fx-search-clear-hover-color, #374151);
	background: var(--fx-search-clear-hover-bg, #f3f4f6);
}

/* When icon is on right, shift clear further left */
.filterx-search__wrapper--icon-right .filterx-search__clear {
	right: 32px;
}

/* ── Results (autocomplete) ── */
.filterx-search__results {
	max-height: 250px;
	overflow-y: auto;
}

/* =============================================
   Button Group Facet
   ============================================= */

.filterx-button-group__wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fx-btn-gap, 8px);
}

/* Hide the underlying checkbox/radio input — visual state is on the label */
.filterx-button-group__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.filterx-button-group__button {
	/* Spacing */
	padding-top: var(--fx-btn-padding-top, var(--fx-btn-padding, 6px));
	padding-right: var(--fx-btn-padding-right, var(--fx-btn-padding, 13px));
	padding-bottom: var(--fx-btn-padding-bottom, var(--fx-btn-padding, 6px));
	padding-left: var(--fx-btn-padding-left, var(--fx-btn-padding, 13px));
	/* Border */
	border-style: var(--fx-btn-border-style, solid);
	border-color: var(--fx-btn-border-color, var(--filterx-border));
	border-top-width: var(--fx-btn-border-width-top, var(--fx-btn-border-width, 1px));
	border-right-width: var(--fx-btn-border-width-right, var(--fx-btn-border-width, 1px));
	border-bottom-width: var(--fx-btn-border-width-bottom, var(--fx-btn-border-width, 1px));
	border-left-width: var(--fx-btn-border-width-left, var(--fx-btn-border-width, 1px));
	border-top-left-radius: var(--fx-btn-border-radius-tl, var(--fx-btn-border-radius, var(--filterx-radius)));
	border-top-right-radius: var(--fx-btn-border-radius-tr, var(--fx-btn-border-radius, var(--filterx-radius)));
	border-bottom-right-radius: var(--fx-btn-border-radius-br, var(--fx-btn-border-radius, var(--filterx-radius)));
	border-bottom-left-radius: var(--fx-btn-border-radius-bl, var(--fx-btn-border-radius, var(--filterx-radius)));
	/* Background & Color */
	background: var(--fx-btn-bg, #fff);
	color: var(--fx-btn-color, var(--filterx-text));
	/* Typography */
	font-family: var(--fx-btn-font-family, inherit);
	font-size: var(--fx-btn-font-size, 14px);
	font-weight: var(--fx-btn-font-weight, 400);
	line-height: var(--fx-btn-line-height, 20px);
	letter-spacing: var(--fx-btn-letter-spacing, 0px);
	text-transform: var(--fx-btn-text-transform, none);
	text-decoration: var(--fx-btn-text-decoration, none);
	/* Effects */
	box-shadow: var(--fx-btn-box-shadow, none);
	transition: var(--fx-btn-transition, all 0.2s ease);
	cursor: pointer;
}

.filterx-button-group__button:hover {
	border-color: var(--fx-btn-hover-border, var(--filterx-primary));
	color: var(--fx-btn-hover-color, var(--filterx-primary));
	background: var(--fx-btn-hover-bg, transparent);
	box-shadow: var(--fx-btn-hover-box-shadow, none);
}

.filterx-button-group__button--active {
	background: var(--fx-btn-active-bg, var(--filterx-primary));
	color: var(--fx-btn-active-color, #fff);
	border-color: var(--fx-btn-active-border, var(--filterx-primary));
	box-shadow: var(--fx-btn-active-box-shadow, none);
}

/* Disabled state */
.filterx-button-group__button--disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* Hidden (show-more) */
.filterx-button-group__button--hidden {
	display: none;
}

/* "All" button subtle distinction */
.filterx-button-group__button--all {
	font-style: italic;
}

/* Count badge */
.filterx-button-group__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 0.35em;
	font-size: 0.75em;
	font-weight: 600;
	opacity: 0.65;
}

/* Size modifiers */
.filterx-button-group--sm .filterx-button-group__button {
	padding: var(--fx-btn-padding-sm, 3px 9px);
	font-size: 12px;
}

.filterx-button-group--lg .filterx-button-group__button {
	padding: var(--fx-btn-padding-lg, 10px 19px);
	font-size: 15px;
}

/* Scroll layout */
.filterx-button-group__wrapper.filterx-button-group--scroll {
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-bottom: 4px;
}

/* =============================================
   Color Swatch Facet
   ============================================= */

/* ── List container ── */
.filterx-color__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Grid layout: swatches wrap in a flex row */
.filterx-color__list--grid {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--fx-swatch-gap-x, var(--fx-swatch-gap, 6px));
	row-gap: var(--fx-swatch-gap-y, var(--fx-swatch-gap, 6px));
}

/* List layout: one row per colour with swatch + name + count */
.filterx-color__list--list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.filterx-color__list--list .filterx-color__item {
	width: 100%;
}

.filterx-color__list--list .filterx-color__label {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 3px 6px;
	border-radius: var(--fx-radius, 4px);
	transition: background 0.15s ease;
}

.filterx-color__list--list .filterx-color__label:hover {
	background: var(--fx-item-hover-bg, rgba(0, 0, 0, 0.04));
}

.filterx-color__list--list .filterx-color__item--selected .filterx-color__label,
.filterx-color__list--list .filterx-color__item:has(.filterx-color__input:checked) .filterx-color__label {
	background: var(--fx-item-active-bg, rgba(99, 102, 241, 0.08));
}

/* ── Label wrapper (used in both layouts) ── */
.filterx-color__label {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	flex-direction: column;
	gap: 4px;
	user-select: none;
}

/* Grid layout: column-direction (swatch on top, name below) */
.filterx-color__list--grid .filterx-color__label {
	flex-direction: column;
}

/* ── Hidden checkbox ── */
.filterx-color__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

/* ── Swatch ── */
.filterx-color__swatch {
	width: var(--fx-swatch-size, 36px);
	height: var(--fx-swatch-size, 36px);
	border: var(--fx-swatch-border-width, 2px) solid var(--fx-swatch-border-color, var(--filterx-border, #e5e7eb));
	cursor: pointer;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	position: relative;
	flex-shrink: 0;
	display: block;
}

/* Shape variants */
.filterx-color__swatch--circle {
	border-radius: 50%;
}

.filterx-color__swatch--square {
	border-radius: 0;
}

.filterx-color__swatch--rounded {
	/* --fx-swatch-border-radius is the panel alias; falls back to --fx-swatch-radius */
	border-radius: var(--fx-swatch-border-radius, var(--fx-swatch-radius, 6px));
}

/* Hover */
.filterx-color__label:hover .filterx-color__swatch {
	transform: scale(var(--fx-swatch-hover-scale, 1.08));
	border-color: var(--fx-swatch-hover-border, var(--filterx-primary, #6366f1));
}

/* ── Indicator element (hidden by default, shown per indicator type) ── */
.filterx-color__indicator {
	display: none;
}

/* ════════════════════════════════════════════════════════════════════════
   SELECTION INDICATORS  –  activated via :checked sibling combinator
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. CHECKMARK ── */
.filterx-color--indicator-checkmark .filterx-color__input:checked + .filterx-color__swatch {
	border-color: var(--fx-selection-color, var(--filterx-primary, #6366f1));
}

.filterx-color--indicator-checkmark .filterx-color__input:checked + .filterx-color__swatch .filterx-color__indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(0, 0, 0, 0.35);
}

.filterx-color--indicator-checkmark .filterx-color__input:checked + .filterx-color__swatch .filterx-color__indicator::after {
	content: '';
	display: block;
	width: 35%;
	height: 55%;
	border-right: 2.5px solid var(--fx-selection-color, #fff);
	border-bottom: 2.5px solid var(--fx-selection-color, #fff);
	transform: rotate(45deg) translate(-5%, -5%);
}

/* ── 2. RING (outer glow) ── */
.filterx-color--indicator-ring .filterx-color__input:checked + .filterx-color__swatch {
	border-color: var(--fx-selection-color, var(--filterx-primary, #6366f1));
	box-shadow: 0 0 0 3px var(--fx-selection-color, var(--filterx-primary, #6366f1)), 0 0 0 5px rgba(0, 0, 0, 0.08);
}

/* ── 3. BORDER (thick coloured border) ── */
.filterx-color--indicator-border .filterx-color__input:checked + .filterx-color__swatch {
	border-width: 3px;
	border-color: var(--fx-selection-color, var(--filterx-primary, #6366f1));
}

/* ── 4. DOT (small badge in bottom-right) ── */
.filterx-color--indicator-dot .filterx-color__input:checked + .filterx-color__swatch {
	border-color: var(--fx-selection-color, var(--filterx-primary, #6366f1));
}

.filterx-color--indicator-dot .filterx-color__input:checked + .filterx-color__swatch .filterx-color__indicator {
	display: block;
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--fx-selection-color, var(--filterx-primary, #6366f1));
	border: 2px solid #fff;
	z-index: 2;
}

/* ── Fallback: no indicator class on container (legacy) ── */
.filterx-color:not([class*="indicator-"]) .filterx-color__input:checked + .filterx-color__swatch {
	border-color: var(--fx-swatch-active-border, var(--filterx-primary, #6366f1));
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

.filterx-color:not([class*="indicator-"]) .filterx-color__input:checked + .filterx-color__swatch::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	background: #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
}

/* ── Focus-visible for keyboard navigation ── */
.filterx-color__input:focus-visible + .filterx-color__swatch {
	outline: 2px solid var(--fx-selection-color, var(--filterx-primary, #6366f1));
	outline-offset: 2px;
}

/* ── Selected item label styling ── */
.filterx-color__item:has(.filterx-color__input:checked) .filterx-color__name {
	font-weight: 600;
	color: var(--filterx-text, #333);
}

/* Empty / out-of-stock swatches: visually struck through */
.filterx-color__swatch--empty {
	opacity: 0.35;
	position: relative;
}

.filterx-color__swatch--empty::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 3px,
		rgba(0, 0, 0, 0.15) 3px,
		rgba(0, 0, 0, 0.15) 4px
	);
	border-radius: inherit;
}

/* ── Colour name ── */
.filterx-color__name {
	font-size: 12px;
	color: var(--filterx-text-muted, #9ca3af);
	text-align: center;
	line-height: 1.2;
	white-space: nowrap;
}

/* In grid layout, constrain name width to swatch width so long names don't stretch the cell */
.filterx-color__list--grid .filterx-color__name {
	max-width: var(--fx-swatch-size, 36px);
	overflow: hidden;
	text-overflow: ellipsis;
}

/* In list layout, name sits beside the swatch and aligns left */
.filterx-color__list--list .filterx-color__name {
	font-size: 14px;
	color: var(--fx-text, inherit);
	text-align: left;
	white-space: normal;
	flex: 1;
}

/* ── Count badge ── */
.filterx-color__count {
	font-size: 12px;
	color: var(--filterx-text-muted, #9ca3af);
	margin-left: auto;
}

/* In grid layout, count sits below the name centred under the swatch */
.filterx-color__list--grid .filterx-color__count {
	margin-left: 0;
	text-align: center;
}

/* ── Clear button ── */
.filterx-color__clear {
	margin-top: 8px;
}

/* =============================================
   Rating Stars Facet
   ============================================= */

.filterx-rating__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* ── Inline (single-row) layout ─────────────────────────────── */
.filterx-rating__list--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4px;
}

.filterx-rating__list--inline .filterx-rating__label {
	padding: 5px 4px;
	flex-direction: column;
	gap: 2px;
}

.filterx-rating__list--inline .filterx-rating__text,
.filterx-rating__list--inline .filterx-rating__count {
	display: none;
}

.filterx-rating__item--disabled {
	opacity: 0.45;
	pointer-events: none;
}

.filterx-rating__label {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: var(--fx-radius, 4px);
	transition: background 0.15s ease;
	user-select: none;
}

.filterx-rating__label:hover {
	background: var(--fx-item-hover-bg, rgba(0, 0, 0, 0.04));
}

/* Active state via :checked sibling selector (works regardless of class state). */
.filterx-rating__input:checked + .filterx-rating__label,
.filterx-rating__item--active .filterx-rating__label {
	background: var(--fx-item-active-bg, rgba(99, 102, 241, 0.12));
	border-left: var(--fx-item-active-border-width, 3px) solid var(--fx-item-active-border-color, #6366f1);
	font-weight: 600;
}

/* Visually hide the rating radio — interaction is via the <label for="..."> sibling.
   The input is NOT inside the label's flex container so layout is unaffected.
   Specificity [0,2,0] matches .filterx-facet__input[type="radio"]:not(...) at [0,2,1]
   and wins by source order (this rule comes later in the file).
   clip-path: inset(50%) clips to zero-area regardless of position type. */
.filterx-rating__list .filterx-rating__input {
	-webkit-appearance: none;
	appearance: none;
	clip-path: inset(50%);
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.filterx-rating__stars {
	display: flex;
	gap: var(--fx-star-gap, 2px);
	line-height: 1;
}

.filterx-rating__star {
	font-size: var(--fx-star-size, 16px);
	/* --fx-star-color is the panel alias for the empty-star colour */
	color: var(--fx-star-color, var(--fx-star-empty-color, #d1d5db));
	transition: color 0.15s ease;
}

.filterx-rating__star--filled {
	color: var(--fx-star-filled-color, #f59e0b);
}

.filterx-rating__label:hover .filterx-rating__star--filled {
	color: var(--fx-star-hover-color, #d97706);
}

.filterx-rating__input:checked + .filterx-rating__label .filterx-rating__star--filled,
.filterx-rating__item--active .filterx-rating__star--filled {
	color: var(--fx-star-active-color, #f59e0b);
}

/* Active state text emphasis */
.filterx-rating__input:checked + .filterx-rating__label .filterx-rating__text,
.filterx-rating__item--active .filterx-rating__text {
	color: var(--fx-text, inherit);
	font-weight: inherit;
}

.filterx-rating__input:checked + .filterx-rating__label .filterx-rating__count,
.filterx-rating__item--active .filterx-rating__count {
	color: var(--fx-text, #6b7280);
}

.filterx-rating__text {
	font-size: 14px;
	color: var(--fx-text, inherit);
	white-space: nowrap;
}

.filterx-rating__count {
	font-size: 12px;
	color: var(--filterx-text-muted, #9ca3af);
	margin-left: auto;
}

.filterx-rating__clear {
	margin-top: 8px;
}

/* =============================================
   Hierarchy Tree Facet
   ============================================= */

/* ── List reset (all levels) ── */
.filterx-hierarchy__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Indent nested levels using a CSS custom property.
   Default 2rem (32px) = toggle-column (24px) + 8px extra, so child checkboxes
   sit visibly to the right of the parent's label column. Override via
   --fx-hierarchy-indent in your theme to suit your design. */
.filterx-hierarchy__list:not(.filterx-hierarchy__list--level-0) {
	padding-left: var(--fx-hierarchy-indent, 32px);
}

/* ── List item ── */
.filterx-hierarchy__item {
	margin: 0;
	padding: 0;
}

/* ── Row: toggle + label on one flex line ── */
.filterx-hierarchy__row {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 2px 0;
}

/* ── Expand / collapse toggle button ── */
.filterx-hierarchy__toggle {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid var(--filterx-border, #e5e7eb);
	border-radius: 3px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	color: var(--filterx-text-muted, #6b7280);
	padding: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

.filterx-hierarchy__toggle:hover {
	background: var(--fx-item-hover-bg, rgba(0, 0, 0, 0.05));
	color: var(--fx-text, inherit);
}

/* Spacer keeps label alignment for leaf nodes (same width as toggle) */
.filterx-hierarchy__toggle-spacer {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	display: inline-block;
}

/* ── Label row ── */
.filterx-hierarchy__label {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	flex: 1;
	padding: 3px 5px;
	border-radius: var(--fx-radius, 4px);
	transition: background 0.15s ease;
	user-select: none;
	font-size: 14px;
}

.filterx-hierarchy__label:hover {
	background: var(--fx-item-hover-bg, rgba(0, 0, 0, 0.04));
}

.filterx-hierarchy__item--selected > .filterx-hierarchy__row > .filterx-hierarchy__label {
	background: var(--fx-item-active-bg, rgba(99, 102, 241, 0.08));
	font-weight: 500;
}

/* ── Hidden checkbox (interaction via label) ── */
/* Use .filterx-hierarchy__row descendant combinator to get specificity 0-2-0,
   matching .filterx-facet__input[type="checkbox"] and winning by source order. */
.filterx-hierarchy__row .filterx-hierarchy__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0 !important;
	height: 0 !important;
	border: 0 !important;
	background: transparent !important;
	padding: 0;
	margin: 0;
}

/* ── Custom checkbox indicator rendered via ::before on the label ── */
.filterx-hierarchy__label::before {
	content: '';
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	border: 1.5px solid var(--filterx-border, #d1d5db);
	border-radius: 3px;
	background: #fff;
	transition: border-color 0.15s ease, background 0.15s ease;
	box-sizing: border-box;
}

/* Checked state: filled primary colour with a white tick */
.filterx-hierarchy__item--selected > .filterx-hierarchy__row > .filterx-hierarchy__label::before {
	background: var(--filterx-primary, #6366f1);
	border-color: var(--filterx-primary, #6366f1);
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23fff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 8px;
}

/* Hover: tint the border */
.filterx-hierarchy__label:hover::before {
	border-color: var(--filterx-primary, #6366f1);
}

/* ── Term name text ── */
.filterx-hierarchy__text {
	flex: 1;
	color: var(--fx-text, inherit);
	line-height: 1.3;
}

/* ── Count badge ── */
.filterx-hierarchy__count {
	flex-shrink: 0;
	font-size: 12px;
	color: var(--filterx-text-muted, #9ca3af);
}

/* ── Clear button ── */
.filterx-hierarchy__clear {
	margin-top: 8px;
}

/* ── Depth-level visual hints (optional, relies on CSS var) ── */
/* Root level items can have a slightly heavier font weight */
.filterx-hierarchy__list--level-0 > .filterx-hierarchy__item > .filterx-hierarchy__row > .filterx-hierarchy__label {
	font-weight: 500;
}

/* Deeper items are visually lighter */
.filterx-hierarchy__list--level-1 > .filterx-hierarchy__item > .filterx-hierarchy__row > .filterx-hierarchy__label,
.filterx-hierarchy__list--level-2 > .filterx-hierarchy__item > .filterx-hierarchy__row > .filterx-hierarchy__label {
	font-weight: 400;
	font-size: 14px;
}

/* =============================================
   Toggle Switch Facet
   ============================================= */

/* Custom properties — override on the wrapper or globally */
.filterx-toggle__wrapper {
	--fx-toggle-width:         44px;
	--fx-toggle-height:        24px;
	--fx-toggle-bg:            #d1d5db;
	--fx-toggle-active-bg:     var(--filterx-primary, #f97316);
	--fx-toggle-border-radius: calc(var(--fx-toggle-height) / 2);
	--fx-toggle-knob-bg:       #fff;
	--fx-toggle-knob-shadow:   0 1px 4px rgba(0, 0, 0, 0.25);
	/* flex column so label and clear button stack vertically */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* ── Real checkbox — visually hidden but keyboard/screen-reader accessible.
   Specificity [0,2,0] beats .filterx-facet__input[type="checkbox"]:not(...) at [0,2,1]
   by source order (this rule appears later in the file). ── */
.filterx-toggle__label .filterx-toggle__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* ── Label row ── */
.filterx-toggle__label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
	font-size: 14px;
	color: var(--filterx-text, #374151);
}

/* ── Track ── */
.filterx-toggle__track {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	width: var(--fx-toggle-width);
	height: var(--fx-toggle-height);
	background: var(--fx-toggle-bg);
	border-radius: var(--fx-toggle-border-radius);
	transition: background 0.22s ease;
}

/* ── Knob ── */
.filterx-toggle__knob {
	position: absolute;
	top: 50%;
	left: 2px;
	width: calc(var(--fx-toggle-height) - 4px);
	height: calc(var(--fx-toggle-height) - 4px);
	background: var(--fx-toggle-knob-bg);
	border-radius: 50%;
	box-shadow: var(--fx-toggle-knob-shadow);
	transform: translateY(-50%);
	transition: left 0.22s ease;
	pointer-events: none;
}

/* ── Active state via :checked sibling selector — zero JS required ── */
.filterx-toggle__input:checked + .filterx-toggle__track {
	background: var(--fx-toggle-active-bg);
}

.filterx-toggle__input:checked + .filterx-toggle__track .filterx-toggle__knob {
	left: calc(var(--fx-toggle-width) - var(--fx-toggle-height) + 2px);
}

/* ── Focus ring (keyboard nav) ── */
.filterx-toggle__input:focus-visible + .filterx-toggle__track {
	outline: 2px solid var(--fx-toggle-active-bg);
	outline-offset: 2px;
}

/* ── Hover state ── */
.filterx-toggle__label:hover .filterx-toggle__track {
	background: var(--fx-toggle-hover-bg, var(--fx-toggle-bg));
}

.filterx-toggle__label:hover .filterx-toggle__knob {
	background: var(--fx-toggle-hover-knob, var(--fx-toggle-knob-bg));
}

/* ── Text label ── */
.filterx-toggle__text {
	font-size: 14px;
	color: var(--filterx-text, #374151);
	line-height: 1.4;
}

/* ── Count badge ── */
.filterx-toggle__count {
	font-size: 0.75em;
	color: var(--filterx-text-light, #6b7280);
	margin-left: 4px;
}

/* ── Clear button ── */
.filterx-toggle__clear {
	margin-top: 8px;
}

/* Backward-compat alias — old CSS targeted .filterx-toggle__switch */
.filterx-toggle__switch {
	display: none; /* hidden; new template uses __track */
}

/* =============================================
   Pagination Structure — additional selectors
   ============================================= */

.filterx-pagination__item--prev .filterx-pagination__link,
.filterx-pagination__item--next .filterx-pagination__link {
	font-weight: 600;
}

.filterx-pagination__page-info {
	font-size: 0.85em;
	color: var(--filterx-text-light, #6b7280);
	margin: 0 8px;
}

/* =============================================
   Card Grid Layout (Multi-Column)
   ============================================= */

.filterx-card--grid {
	overflow: hidden;
}

.filterx-card__row {
	display: grid;
	gap: 16px;
}

.filterx-card__col {
	min-width: 0; /* prevent grid blowout */
}

.filterx-card__block-wrapper {
	/* default visible */
}

/* Responsive visibility */
@media (max-width: 768px) {
	.filterx-card__row {
		grid-template-columns: var(--fx-row-cols-tablet, 1fr) !important;
	}

	.filterx-hide-on-tablet {
		display: none !important;
	}
}

@media (max-width: 480px) {
	.filterx-card__row {
		grid-template-columns: var(--fx-row-cols-mobile, 1fr) !important;
	}

	.filterx-hide-on-mobile {
		display: none !important;
	}
}

/* Desktop hide class — always applied */
@media (min-width: 769px) {
	.filterx-hide-on-desktop {
		display: none !important;
	}
}

/* =============================================
   Container Layout (Elementor-style)
   ============================================= */

/* Custom card templates: the card builder controls all visual styling via
   inline styles on containers/blocks — reset base .filterx-card defaults
   so border, shadow, and hover don't leak through when not configured. */
.filterx-card--container {
	border: none;
	box-shadow: none;
	background: transparent;
	overflow: hidden;
}
.filterx-card--container:hover {
	box-shadow: none;
	transform: none;
}

.filterx-container {
	display: flex;
	position: relative;
	min-width: 0; /* prevent flex blowout */
}

.filterx-container-wrapper {
	min-width: 0;
}

/* On tablet, stack row containers */
@media (max-width: 768px) {
	.filterx-container[style*="flex-direction:row"] {
		flex-direction: column !important;
	}

	.filterx-container-wrapper {
		flex: 1 1 auto !important;
	}
}

/* On mobile, ensure everything stacks */
@media (max-width: 480px) {
	.filterx-container[style*="flex-direction:row"] {
		flex-direction: column !important;
	}

	.filterx-container-wrapper {
		flex: 1 1 auto !important;
	}
}

/* =============================================
   Layout Builder — Composed Grid Layouts
   ============================================= */

.filterx-layout {
	display: flex;
	min-width: 0; /* prevent flex blowout */
	box-sizing: border-box;
}

.filterx-layout--row {
	flex-direction: row;
}

.filterx-layout--column {
	flex-direction: column;
}

/* Grid element wrapper */
.filterx-grid-element {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/* Facet element wrapper */
.filterx-facet-element {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	overflow: visible; /* allow dropdowns / tooltips to escape column bounds */
}

/* Facet element content area */
.filterx-facet-element__content {
	min-width: 0;
	max-width: 100%;
}

/* Shared base styles for both collapsible toggle and static header */
.filterx-facet-element__toggle,
.filterx-facet-element__header {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box; /* padding + border must not add to 100% width */
	padding: var(--fx-header-padding, 10px 12px);
	border: none;
	border-radius: var(--filterx-radius);
	font-size: var(--fx-header-font-size, 14px);
	font-weight: 600;
	color: var(--fx-header-color, var(--filterx-text));
	background: var(--fx-header-bg, none);
	margin-bottom: 8px;
}

/* Non-collapsible facet header (static — no toggle, no arrow) */
.filterx-facet-element__header {
	justify-content: flex-start;
}

/* Collapsible facet toggle button */
.filterx-facet-element__toggle {
	justify-content: space-between;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.filterx-facet-element__toggle:hover {
	background-color: var(--filterx-secondary);
}

/* Label + sub-label column layout (inside both toggle button and static header) */
.filterx-facet-element__label-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

/* Sub-label: smaller, muted secondary line under the main label */
.filterx-facet-element__sub-label {
	font-size: calc(var(--fx-header-font-size, 14px) * 0.8);
	font-weight: 400;
	color: var(--fx-header-color, var(--filterx-muted, #6b7280));
	opacity: 0.75;
	line-height: 1.3;
}

.filterx-facet-element__arrow {
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform 0.2s ease;
}

.filterx-facet-element--collapsed .filterx-facet-element__arrow {
	transform: rotate(-90deg);
}

.filterx-facet-element--collapsed .filterx-facet-element__content {
	display: none;
}

/* Responsive: hide per breakpoint */
.filterx-hide-desktop {
	/* handled via JS on desktop */
}

@media (max-width: 1024px) {
	/* Stack row layouts on tablet */
	.filterx-layout--row {
		flex-wrap: wrap;
	}

	.filterx-hide-tablet {
		display: none !important;
	}
}

@media (max-width: 767px) {
	/* Stack everything on mobile */
	.filterx-layout--row {
		flex-direction: column !important;
	}

	.filterx-hide-mobile {
		display: none !important;
	}
}

/* ═══ Static Content Elements ═══ */

.filterx-text-element {
	line-height: 1.6;
}

.filterx-heading-element {
	margin: 0;
	line-height: 1.3;
}

.filterx-button-element {
	display: inline-flex;
}

.filterx-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.filterx-button--primary {
	background-color: #2563eb;
	color: #fff;
	border: 2px solid #2563eb;
}
.filterx-button--primary:hover {
	background-color: #1d4ed8;
	border-color: #1d4ed8;
}

.filterx-button--outline {
	background-color: transparent;
	color: #2563eb;
	border: 2px solid #2563eb;
}
.filterx-button--outline:hover {
	background-color: #eff6ff;
}

.filterx-button--ghost {
	background-color: transparent;
	color: #374151;
	border: 2px solid transparent;
}
.filterx-button--ghost:hover {
	background-color: #f3f4f6;
}

.filterx-image-element {
	line-height: 0;
}
.filterx-image-element__img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: inherit;
}
.filterx-image-element--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;
	background-color: #f3f4f6;
	border: 1px dashed #d1d5db;
	border-radius: 4px;
	color: #9ca3af;
	font-size: 13px;
}

.filterx-divider-element {
	width: 100%;
}

.filterx-icon-element {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.filterx-icon-element__link {
	display: inline-flex;
	text-decoration: none;
	color: inherit;
}

.filterx-html-element {
	/* No default styles — user controls everything */
}

/* ═══ Collapsible Containers ═══ */

/* ══ Collapsible containers — thin-strip accordion pattern ══
 * Collapsed: narrow strip (default 15px, adjustable via --collapsed-width)
 *   with a small centered arrow icon.
 * Expanded: full width/height with content + toggle at edge.
 * Mode: inline (pushes content) or overlay (slides over). User decides.
 */

.filterx-collapsible {
	position: relative;
	transition: width 0.3s ease, height 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
	background: #fff;
}

/* ── Content area ── */
.filterx-collapsible__content {
	transition: opacity 0.25s ease;
	overflow: auto;
}

/* ── Toggle strip — the thin clickable edge bar ── */
.filterx-collapsible__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	background: #f0f0f1;
	border: none;
	cursor: pointer;
	color: #787c82;
	transition: background-color 0.15s, color 0.15s;
	flex-shrink: 0;
}
.filterx-collapsible__toggle:hover {
	background-color: #dcdcde;
	color: #2271b1;
}

/* Toggle icon (dashicon — e.g. filter funnel) */
.filterx-collapsible__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 1;
	flex-shrink: 0;
}

/* Label — visible only when expanded, hidden in collapsed strip */
.filterx-collapsible__label {
	white-space: nowrap;
	overflow: hidden;
	font-size: 12px;
	font-weight: 600;
	color: #1d2327;
	transition: opacity 0.2s ease;
}


/* ══════════════════════════════════════════════
   Left / Right sidebars — shared base styles
   ══════════════════════════════════════════════ */
.filterx-collapsible--left,
.filterx-collapsible--right {
	position: relative;
	z-index: 50;
}

/* Toggle strip shared — icon pinned to top, vertical layout */
.filterx-collapsible--left .filterx-collapsible__toggle,
.filterx-collapsible--right .filterx-collapsible__toggle {
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding-top: 8px;
	flex-shrink: 0;
}

/* Hide label in left/right toggle strip (too narrow) */
.filterx-collapsible--left .filterx-collapsible__label,
.filterx-collapsible--right .filterx-collapsible__label {
	display: none;
}

/* ─── OVERLAY mode: fixed-strip, content absolute ─── */
.filterx-collapsible--left.filterx-collapsible--overlay,
.filterx-collapsible--right.filterx-collapsible--overlay {
	width: var(--collapsed-width, 15px);
	min-width: var(--collapsed-width, 15px);
	max-width: var(--collapsed-width, 15px);
	z-index: 100;
}

/* Overlay toggle fills the fixed container */
.filterx-collapsible--left.filterx-collapsible--overlay .filterx-collapsible__toggle,
.filterx-collapsible--right.filterx-collapsible--overlay .filterx-collapsible__toggle {
	width: 100%;
	height: 100%;
}
.filterx-collapsible--left.filterx-collapsible--overlay .filterx-collapsible__toggle {
	border-right: 1px solid #dcdcde;
}
.filterx-collapsible--right.filterx-collapsible--overlay .filterx-collapsible__toggle {
	border-left: 1px solid #dcdcde;
}

/* Overlay content — absolute panel */
.filterx-collapsible--left.filterx-collapsible--overlay .filterx-collapsible__content {
	position: absolute;
	top: 0;
	left: 100%;
	width: var(--expanded-width, 280px);
	height: 100%;
	background: #fff;
	box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
	z-index: 100;
	overflow: auto;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.filterx-collapsible--right.filterx-collapsible--overlay .filterx-collapsible__content {
	position: absolute;
	top: 0;
	right: 100%;
	width: var(--expanded-width, 280px);
	height: 100%;
	background: #fff;
	box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
	z-index: 100;
	overflow: auto;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Overlay collapsed — hide content */
.filterx-collapsible--left.filterx-collapsible--overlay.filterx-collapsible--collapsed .filterx-collapsible__content,
.filterx-collapsible--right.filterx-collapsible--overlay.filterx-collapsible--collapsed .filterx-collapsible__content {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ─── PUSH mode (no --overlay): container width transitions ─── */
.filterx-collapsible--left:not(.filterx-collapsible--overlay),
.filterx-collapsible--right:not(.filterx-collapsible--overlay) {
	display: flex;
	width: var(--expanded-width, 280px);
	overflow: hidden;
	transition: width 0.3s ease, min-width 0.3s ease;
}

/* Push collapsed — shrink to strip width */
.filterx-collapsible--left:not(.filterx-collapsible--overlay).filterx-collapsible--collapsed,
.filterx-collapsible--right:not(.filterx-collapsible--overlay).filterx-collapsible--collapsed {
	width: var(--collapsed-width, 15px);
	min-width: var(--collapsed-width, 15px);
	max-width: var(--collapsed-width, 15px);
}

/* Push toggle — fixed-width strip */
.filterx-collapsible--left:not(.filterx-collapsible--overlay) .filterx-collapsible__toggle,
.filterx-collapsible--right:not(.filterx-collapsible--overlay) .filterx-collapsible__toggle {
	width: var(--collapsed-width, 15px);
	min-width: var(--collapsed-width, 15px);
}

/* Left push: toggle first (order:-1), border on right */
.filterx-collapsible--left:not(.filterx-collapsible--overlay) .filterx-collapsible__toggle {
	order: -1;
	border-right: 1px solid #dcdcde;
}

/* Right push: toggle last (DOM order), border on left */
.filterx-collapsible--right:not(.filterx-collapsible--overlay) .filterx-collapsible__toggle {
	border-left: 1px solid #dcdcde;
}

/* Push content — in-flow, takes remaining flex space */
.filterx-collapsible--left:not(.filterx-collapsible--overlay) .filterx-collapsible__content,
.filterx-collapsible--right:not(.filterx-collapsible--overlay) .filterx-collapsible__content {
	flex: 1;
	min-width: 0;
	overflow: auto;
	transition: opacity 0.3s ease;
}

/* Push collapsed — hide content */
.filterx-collapsible--left:not(.filterx-collapsible--overlay).filterx-collapsible--collapsed .filterx-collapsible__content,
.filterx-collapsible--right:not(.filterx-collapsible--overlay).filterx-collapsible--collapsed .filterx-collapsible__content {
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}


/* ══════════════════════════════════════════════
   Top / Bottom drawers
   ══════════════════════════════════════════════ */
.filterx-collapsible--top,
.filterx-collapsible--bottom {
	display: flex;
	flex-direction: column;
}

/* Toggle strip: thin horizontal bar */
.filterx-collapsible--top .filterx-collapsible__toggle,
.filterx-collapsible--bottom .filterx-collapsible__toggle {
	height: var(--collapsed-width, 15px);
	min-height: var(--collapsed-width, 15px);
	flex-direction: row;
	gap: 6px;
	border-top: 1px solid #dcdcde;
}
/* Top: toggle at bottom edge */
.filterx-collapsible--top .filterx-collapsible__toggle {
	order: 2;
	border-top: 1px solid #dcdcde;
	border-bottom: none;
}
/* Bottom: toggle at top edge */
.filterx-collapsible--bottom .filterx-collapsible__toggle {
	order: -1;
	border-bottom: 1px solid #dcdcde;
	border-top: none;
}

/* Show label inline for top/bottom (there's room horizontally) */
.filterx-collapsible--top .filterx-collapsible__label,
.filterx-collapsible--bottom .filterx-collapsible__label {
	display: inline;
}

/* Collapsed top/bottom: only the strip bar visible */
.filterx-collapsible--top.filterx-collapsible--collapsed .filterx-collapsible__content,
.filterx-collapsible--bottom.filterx-collapsible--collapsed .filterx-collapsible__content {
	height: 0;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
}


/* =============================================
   Autocomplete Facet
   ============================================= */

/* Wrapper — position relative so the dropdown can be absolute */
.filterx-autocomplete__wrapper {
	position: relative;
}

/* ── Control row (tags + text input in one pill) ── */
.filterx-autocomplete__control {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	min-height: 38px;
	padding: 4px 8px;
	border: 1px solid var(--filterx-border, #d1d5db);
	border-radius: 6px;
	background: #fff;
	cursor: text;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filterx-autocomplete__control:focus-within {
	border-color: var(--filterx-accent, #6366f1);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
	outline: none;
}

/* ── Tags ── */
.filterx-autocomplete__tags {
	display: contents; /* tags flow inline in the flex parent */
}

.filterx-autocomplete__tag {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 5px 2px 8px;
	background: #ede9fe;
	border: 1px solid #c4b5fd;
	border-radius: 4px;
	font-size: 12px;
	color: #3730a3;
	line-height: 1.5;
	white-space: nowrap;
	max-width: 200px;
}

.filterx-autocomplete__tag-text {
	overflow: hidden;
	text-overflow: ellipsis;
}

.filterx-autocomplete__tag-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	color: #7c3aed;
	font-size: 14px;
	line-height: 1;
	border-radius: 2px;
	transition: color 0.12s, background 0.12s;
}

.filterx-autocomplete__tag-remove:hover {
	color: #ef4444;
	background: rgba(239, 68, 68, 0.12);
}

/* ── Text input ── */
.filterx-autocomplete__input {
	flex: 1 1 120px;
	min-width: 80px;
	border: none;
	outline: none;
	background: transparent;
	font-size: 13px;
	padding: 2px 0;
	line-height: 1.5;
	color: inherit;
}

.filterx-autocomplete__input::placeholder {
	color: #9ca3af;
}

/* ── Spinner ── */
.filterx-autocomplete__loader {
	display: flex;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	border: 2px solid #e5e7eb;
	border-top-color: var(--filterx-accent, #6366f1);
	border-radius: 50%;
	animation: filterx-ac-spin 0.6s linear infinite;
}

@keyframes filterx-ac-spin {
	to { transform: rotate(360deg); }
}

/* Respect the HTML `hidden` attribute — overrides display:flex above */
.filterx-autocomplete__loader[hidden] {
	display: none;
}

/* ── Results dropdown ── */
.filterx-autocomplete__results {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 200;
	background: #fff;
	border: 1px solid var(--filterx-border, #d1d5db);
	border-radius: 6px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	max-height: 240px;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
}

/* ── Option row ── */
.filterx-autocomplete__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	cursor: pointer;
	font-size: 13px;
	color: #374151;
	transition: background 0.1s;
	user-select: none;
}

.filterx-autocomplete__option:hover,
.filterx-autocomplete__option--focused {
	background: #f3f4f6;
}

.filterx-autocomplete__option--focused {
	outline: none;
}

.filterx-autocomplete__option-text {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.filterx-autocomplete__option-count {
	flex-shrink: 0;
	margin-left: 10px;
	font-size: 11px;
	color: #9ca3af;
}

/* ── Empty / no-results message ── */
.filterx-autocomplete__empty {
	padding: 12px;
	text-align: center;
	font-size: 12px;
	color: #9ca3af;
}



/* ==========================================================================
   Sort Facet
   Render modes: dropdown | radio | button_group
   ========================================================================== */

/* ── CSS custom properties ── */
.filterx-sort {
	--fx-sort-focus-ring: 0 0 0 2px rgba(99, 102, 241, 0.35);
	--fx-sort-active-bg: #6366f1;
	--fx-sort-active-color: #fff;
	--fx-sort-hover-bg: #f3f4f6;
	--fx-sort-border: var(--filterx-border, #d1d5db);
	--fx-sort-radius: 8px;
	--fx-sort-font-size: 13px;
}

/* ── Dropdown mode ── */
.filterx-sort--dropdown {
	position: relative;
}

.filterx-sort__select {
	display: block;
	width: 100%;
	padding: 9px 32px 9px 12px;
	font-size: var(--fx-sort-font-size);
	color: #374151;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 16px;
	border: 1px solid var(--fx-sort-border);
	border-radius: var(--fx-sort-radius);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
}

.filterx-sort__select:hover {
	border-color: #9ca3af;
}

.filterx-sort__select:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: var(--fx-sort-focus-ring);
}

/* ── Radio mode ── */
.filterx-sort--radio {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.filterx-sort__option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	font-size: var(--fx-sort-font-size);
	color: #374151;
	transition: background 0.1s;
	user-select: none;
}

.filterx-sort__option:hover {
	background: var(--fx-sort-hover-bg);
}

.filterx-sort__option--selected {
	background: #eff6ff;
	color: #2563eb;
	font-weight: 500;
}

.filterx-sort__radio {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	accent-color: #6366f1;
	cursor: pointer;
}

.filterx-sort__option-label {
	line-height: 1.3;
}

/* ── Button group mode ── */
.filterx-sort--buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.filterx-sort__btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 14px;
	border: 1px solid var(--fx-sort-border);
	border-radius: 20px;
	background: #fff;
	color: #374151;
	font-size: var(--fx-sort-font-size);
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
	white-space: nowrap;
	user-select: none;
}

.filterx-sort__btn:hover {
	border-color: #9ca3af;
	background: var(--fx-sort-hover-bg);
}

.filterx-sort__btn:focus-visible {
	outline: none;
	box-shadow: var(--fx-sort-focus-ring);
}

.filterx-sort__btn--active {
	background: var(--fx-sort-active-bg);
	border-color: var(--fx-sort-active-bg);
	color: var(--fx-sort-active-color);
}

.filterx-sort__btn--active:hover {
	background: #4f46e5;
	border-color: #4f46e5;
	color: #fff;
}

.filterx-sort__btn-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	font-size: 14px;
}

.filterx-sort__btn-label {
	line-height: 1;
}


/* =========================================================
   Active Filters Bar
   ========================================================= */

/* ── CSS custom properties ── */
:root {
	--fx-af-gap:           6px;
	--fx-af-pill-bg:       #eff6ff;
	--fx-af-pill-border:   #bfdbfe;
	--fx-af-pill-color:    #1d4ed8;
	--fx-af-pill-radius:   20px;
	--fx-af-pill-px:       10px;
	--fx-af-pill-py:       4px;
	--fx-af-pill-font:     12px;
	--fx-af-remove-size:   16px;
	--fx-af-remove-color:  #93c5fd;
	--fx-af-remove-hover:  #1d4ed8;
	--fx-af-clear-color:   #6b7280;
	--fx-af-clear-hover:   #111827;
}

/* ── Outer wrapper ── */
.filterx-active-filters {
	width: 100%;
	font-size: var(--fx-af-pill-font);
}

/* ── Inner flex row: pills + clear-all ── */
.filterx-active-filters__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--fx-af-gap);
}

/* ── Pills strip ── */
.filterx-active-filters__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fx-af-gap);
	flex: 1 1 auto;
	min-width: 0;
}

/* ── Single pill ── */
.filterx-active-filters__pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: var(--fx-af-pill-py) var(--fx-af-pill-px);
	background: var(--fx-af-pill-bg);
	border: 1px solid var(--fx-af-pill-border);
	border-radius: var(--fx-af-pill-radius);
	color: var(--fx-af-pill-color);
	font-size: var(--fx-af-pill-font);
	line-height: 1.4;
	white-space: nowrap;
	max-width: 240px;
}

/* ── Pill label area ── */
.filterx-active-filters__pill-label {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	min-width: 0;
	overflow: hidden;
}

/* ── Facet-name prefix (e.g. "Color: ") ── */
.filterx-active-filters__pill-facet {
	font-weight: 600;
	opacity: 0.75;
	flex-shrink: 0;
}

/* ── The actual filter value ── */
.filterx-active-filters__pill-value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── × remove button ── */
.filterx-active-filters__pill-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--fx-af-remove-size);
	height: var(--fx-af-remove-size);
	padding: 0;
	margin-left: 2px;
	background: none;
	border: none;
	border-radius: 50%;
	color: var(--fx-af-remove-color);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease;
}

.filterx-active-filters__pill-remove:hover,
.filterx-active-filters__pill-remove:focus-visible {
	color: var(--fx-af-remove-hover);
	background: rgba(29, 78, 216, 0.08);
	outline: none;
}

/* ── Clear All button ── */
.filterx-active-filters__clear-all {
	flex-shrink: 0;
	padding: var(--fx-af-pill-py) var(--fx-af-pill-px);
	background: none;
	border: 1px solid transparent;
	border-radius: var(--fx-af-pill-radius);
	color: var(--fx-af-clear-color);
	font-size: var(--fx-af-pill-font);
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.filterx-active-filters__clear-all:hover,
.filterx-active-filters__clear-all:focus-visible {
	color: var(--fx-af-clear-hover);
	border-color: #d1d5db;
	outline: none;
}

/* ── Product Gallery ── */
/* ── Product Categories ── */
.filterx-card__product-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.filterx-card__product-categories--list {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}
.filterx-card__product-categories--comma {
	display: inline;
}
.filterx-card__product-category {
	display: inline-block;
	padding: 2px 8px;
	background: #f3f4f6;
	border-radius: 4px;
	font-size: 12px;
	color: inherit;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
	line-height: 1.4;
	box-sizing: border-box;
}
a.filterx-card__product-category:hover {
	opacity: 0.85;
}

/* ── Product Gallery ── */
.filterx-card__product-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.filterx-card__product-gallery-img {
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.filterx-card__product-gallery-img:hover {
	opacity: 0.85;
}

/* ── Product Gallery Lightbox ── */
.filterx-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.88);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}
.filterx-lightbox.is-active {
	opacity: 1;
	visibility: visible;
}
.filterx-lightbox__img {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
	user-select: none;
}
.filterx-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.12);
	border: none;
	border-radius: 50%;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	transition: background 0.15s ease;
	line-height: 1;
}
.filterx-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.25);
}
.filterx-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1);
	border: none;
	border-radius: 50%;
	color: #fff;
	font-size: 22px;
	cursor: pointer;
	transition: background 0.15s ease;
	user-select: none;
}
.filterx-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.22);
}
.filterx-lightbox__nav--prev {
	left: 16px;
}
.filterx-lightbox__nav--next {
	right: 16px;
}
.filterx-lightbox__counter {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	font-family: inherit;
}

/* =============================================
   §  MOBILE FILTER UX
   Responsive filter patterns for mobile devices.
   Activated by JS based on data-mobile-filter-* attributes.
   ============================================= */

/* ── Applied Filter Chips Bar ── */
.filterx-applied-chips {
	display: none;
}

.filterx-applied-chips--active {
	display: flex;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
	gap: 8px;
	padding: 8px 16px;
	scrollbar-width: none;
}
.filterx-applied-chips--active::-webkit-scrollbar {
	display: none;
}
.filterx-applied-chip {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 100px;
	background: #f1f5f9;
	color: #334155;
	font-size: 13px;
	line-height: 1;
	border: 1px solid #e2e8f0;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.filterx-applied-chip:hover {
	background: #e2e8f0;
	border-color: #cbd5e1;
}
.filterx-applied-chip__remove {
	display: inline-flex;
	width: 16px;
	height: 16px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.1);
	font-size: 10px;
	line-height: 1;
	color: #64748b;
}
.filterx-applied-chip__remove::after {
	content: '\00d7'; /* × */
}

/* ── Sticky Filter Button ── */
.filterx-mobile-filter-btn {
	display: none;
}
@media ( max-width: 767px ) {
	.filterx-mobile-filter-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		padding: 10px 16px;
		background: #fff;
		color: #1e293b;
		font-size: 14px;
		font-weight: 500;
		border: 1px solid #e2e8f0;
		cursor: pointer;
		z-index: 100;
		transition: box-shadow 0.2s ease;
	}
	.filterx-mobile-filter-btn__icon {
		width: 18px;
		height: 18px;
	}
	.filterx-mobile-filter-btn__count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		border-radius: 100px;
		background: #3b82f6;
		color: #fff;
		font-size: 11px;
		font-weight: 600;
	}

	/* Position variants */
	.filterx-mobile-filter-btn--sticky-top {
		position: sticky;
		top: 0;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}
	.filterx-mobile-filter-btn--sticky-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.08);
		border-top: 1px solid #e2e8f0;
	}
	.filterx-mobile-filter-btn--floating-fab {
		position: fixed;
		bottom: 20px;
		right: 20px;
		width: auto;
		padding: 12px 20px;
		border-radius: 100px;
		background: #3b82f6;
		color: #fff;
		border: none;
		box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
	}
	.filterx-mobile-filter-btn--floating-fab .filterx-mobile-filter-btn__count {
		background: #fff;
		color: #3b82f6;
	}
}

/* ── Full Overlay Panel (Flipkart style) ── */
.filterx-mobile-overlay {
	display: none;
}
@media ( max-width: 767px ) {
	.filterx-mobile-overlay {
		position: fixed;
		inset: 0;
		z-index: 10000;
		background: #fff;
		flex-direction: column;
		transform: translateY(100%);
		transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
	}
	.filterx-mobile-overlay--open {
		display: flex;
		transform: translateY(0);
	}

	/* Header */
	.filterx-mobile-overlay__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 16px;
		border-bottom: 1px solid #e2e8f0;
		background: #fff;
	}
	.filterx-mobile-overlay__title {
		font-size: 16px;
		font-weight: 600;
		color: #1e293b;
	}
	.filterx-mobile-overlay__close {
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		background: none;
		font-size: 20px;
		color: #64748b;
		cursor: pointer;
	}
	.filterx-mobile-overlay__clear {
		border: none;
		background: none;
		color: #3b82f6;
		font-size: 13px;
		font-weight: 500;
		cursor: pointer;
	}

	/* Body — category sidebar + values */
	.filterx-mobile-overlay__body {
		display: flex;
		flex: 1;
		overflow: hidden;
	}
	.filterx-mobile-overlay__categories {
		width: 120px;
		flex-shrink: 0;
		overflow-y: auto;
		background: #f8fafc;
		border-right: 1px solid #e2e8f0;
	}
	.filterx-mobile-overlay__category {
		display: block;
		width: 100%;
		padding: 12px 10px;
		font-size: 13px;
		color: #64748b;
		text-align: left;
		border: none;
		border-left: 3px solid transparent;
		background: none;
		cursor: pointer;
		transition: all 0.15s ease;
	}
	.filterx-mobile-overlay__category--active {
		color: #1e293b;
		font-weight: 600;
		background: #fff;
		border-left-color: #3b82f6;
	}
	.filterx-mobile-overlay__category-count {
		display: inline-block;
		margin-left: 4px;
		font-size: 11px;
		color: #94a3b8;
		font-weight: 400;
	}
	.filterx-mobile-overlay__values {
		flex: 1;
		overflow-y: auto;
		padding: 12px 16px;
	}

	/* Footer — results count + apply */
	.filterx-mobile-overlay__footer {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 16px;
		border-top: 1px solid #e2e8f0;
		background: #fff;
	}
	.filterx-mobile-overlay__results {
		flex: 1;
		font-size: 13px;
		color: #64748b;
	}
	.filterx-mobile-overlay__apply {
		padding: 10px 32px;
		border: none;
		border-radius: 6px;
		background: #3b82f6;
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		transition: background 0.15s ease;
	}
	.filterx-mobile-overlay__apply:hover {
		background: #2563eb;
	}
}

/* ── Bottom Sheet ── */
@media ( max-width: 767px ) {
	.filterx-mobile-bottom-sheet {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10000;
		max-height: 85vh;
		background: #fff;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
		transform: translateY(100%);
		transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
		display: flex;
		flex-direction: column;
	}
	.filterx-mobile-bottom-sheet--open {
		transform: translateY(0);
	}
	.filterx-mobile-bottom-sheet__handle {
		display: flex;
		justify-content: center;
		padding: 10px 0 6px;
		cursor: grab;
	}
	.filterx-mobile-bottom-sheet__handle::after {
		content: '';
		width: 36px;
		height: 4px;
		border-radius: 2px;
		background: #cbd5e1;
	}
	.filterx-mobile-bottom-sheet__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px 12px;
		border-bottom: 1px solid #e2e8f0;
	}
	.filterx-mobile-bottom-sheet__title {
		font-size: 16px;
		font-weight: 600;
		color: #1e293b;
	}
	.filterx-mobile-bottom-sheet__close {
		width: 32px;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		background: none;
		font-size: 20px;
		color: #64748b;
		cursor: pointer;
	}
	.filterx-mobile-bottom-sheet__body {
		flex: 1;
		overflow-y: auto;
		padding: 16px;
		-webkit-overflow-scrolling: touch;
	}
	.filterx-mobile-bottom-sheet__footer {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 16px;
		border-top: 1px solid #e2e8f0;
	}
	.filterx-mobile-bottom-sheet__results {
		flex: 1;
		font-size: 13px;
		color: #64748b;
	}
	.filterx-mobile-bottom-sheet__apply {
		padding: 10px 32px;
		border: none;
		border-radius: 6px;
		background: #3b82f6;
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
	}
}

/* ── Bottom Sheet Backdrop ── */
.filterx-mobile-backdrop {
	display: none;
}
@media ( max-width: 767px ) {
	.filterx-mobile-backdrop--open {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 9999;
		background: rgba(0, 0, 0, 0.4);
		animation: fx-fadeIn 0.2s ease;
	}
}

/* ── Horizontal Chips Layout ── */
@media ( max-width: 767px ) {
	.filterx-collapsible--horizontal-chips .filterx-collapsible__content {
		display: flex !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
		gap: 8px;
		padding: 8px 16px;
		scrollbar-width: none;
		opacity: 1 !important;
		visibility: visible !important;
		position: static !important;
		width: 100% !important;
	}
	.filterx-collapsible--horizontal-chips .filterx-collapsible__content::-webkit-scrollbar {
		display: none;
	}
	.filterx-collapsible--horizontal-chips .filterx-collapsible__toggle {
		display: none !important;
	}
	/* Each facet becomes a compact chip trigger */
	.filterx-collapsible--horizontal-chips .filterx-facet {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		padding: 6px 14px;
		border-radius: 100px;
		background: #f1f5f9;
		border: 1px solid #e2e8f0;
		font-size: 13px;
		color: #334155;
		cursor: pointer;
		white-space: nowrap;
		transition: all 0.15s ease;
	}
	.filterx-collapsible--horizontal-chips .filterx-facet--has-selection {
		background: #eff6ff;
		border-color: #93c5fd;
		color: #1d4ed8;
	}
	/* Hide facet internals — only show title */
	.filterx-collapsible--horizontal-chips .filterx-facet__content {
		display: none;
	}
	.filterx-collapsible--horizontal-chips .filterx-facet__header {
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 0;
		border: none;
		background: none;
	}
	.filterx-collapsible--horizontal-chips .filterx-facet__toggle {
		display: none;
	}
	.filterx-collapsible--horizontal-chips .filterx-facet__title {
		font-size: 13px;
		font-weight: 500;
		margin: 0;
	}
}

/* ── Mobile Sort+Filter inline bar ── */
@media ( max-width: 767px ) {
	.filterx-mobile-sort-filter-bar {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #e2e8f0;
		background: #fff;
	}
	.filterx-mobile-sort-filter-bar > button {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 10px 8px;
		border: none;
		background: none;
		font-size: 14px;
		font-weight: 500;
		color: #475569;
		cursor: pointer;
	}
	.filterx-mobile-sort-filter-bar > button + button {
		border-left: 1px solid #e2e8f0;
	}
}