/* ==========================================================================
   Filter rail
   Converted from design-reference/showroom-floor.css §9.

   The reference's .filter-option markup does not exist at runtime — FacetWP
   emits its own .facetwp-checkbox / .facetwp-counter structure — so the
   reference's visual result is reproduced against FacetWP's class names
   instead. FacetWP's checkbox sprite is replaced with a drawn box so the
   control takes theme colours and needs no image request.
   ========================================================================== */

.tfs-filters {
	display: none;
	min-width: 0;
}

@media (min-width: 1024px) {
	.tfs-filters {
		display: block;
		position: sticky;
		top: var(--wp--custom--rail--sticky-top);
	}
}

/* ---- Head: label, live result count, clear all ---------------------------- */

.tfs-filters__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--wp--custom--step--4) var(--wp--custom--step--12);
	align-items: baseline;
	padding: var(--wp--preset--spacing--20);
	background-color: var(--wp--preset--color--surface);
	border: var(--wp--custom--hairline);
	border-radius: var(--wp--custom--radius);
	margin-bottom: var(--wp--preset--spacing--30);
}

.tfs-filters__title {
	grid-column: 1;
	margin: 0;
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	color: var(--wp--preset--color--ink);
}

.tfs-filters .facetwp-counts {
	grid-column: 1;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--muted);
}

/* FacetWP adds .facetwp-hidden to this wrapper whenever no filter is active,
   which is what makes the control appear only when there is something to
   clear — see the reset facet's auto_hide setting in tfs-core. */
.tfs-filters .facetwp-facet-clear {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin: 0;
}

.tfs-filters .facetwp-reset {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	line-height: 1.4;
	color: var(--wp--preset--color--accent);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--accent);
	border-radius: 0;
	padding: 0 0 var(--wp--custom--step--4);
	cursor: pointer;
	transition:
		color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.tfs-filters .facetwp-reset:hover {
	color: var(--wp--preset--color--accent-hover);
	border-bottom-color: var(--wp--preset--color--accent-hover);
}

.tfs-filters .facetwp-reset:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/* ---- Groups --------------------------------------------------------------- */

.tfs-filters__group {
	border-top: var(--wp--custom--hairline);
	padding: var(--wp--preset--spacing--30) 0;
}

.tfs-filters__group:first-child {
	border-top: 0;
	padding-top: 0;
}

/* A facet with no options for this query leaves its container empty —
   FacetWP renders zero choices as an empty string, ghosts included — so the
   group goes with it rather than leaving a bare heading. Firmness and Size on
   a chair listing are the case in point, but nothing here names them: any
   facet that has nothing to offer disappears, and comes back the moment a
   refresh gives it a choice. Ghosted options still render, so a facet whose
   options exist but match nothing keeps its group.

   FacetWP prints every container empty and fills it from JS, so before the
   first render this hides every group, which is what they would be showing
   anyway. */
.tfs-filters__group:has(.facetwp-facet:empty) {
	display: none;
}

/* theme.json already gives H4 the utility face, so only spacing is set here. */
.tfs-filters__group-title {
	margin: 0 0 var(--wp--custom--step--16);
}

.tfs-filters .facetwp-facet {
	margin: 0;
}

/* ---- Checkbox options ----------------------------------------------------- */

.tfs-filters .facetwp-checkbox {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--step--12);
	margin: 0 0 var(--wp--custom--step--12);
	padding: 0;
	background: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	transition: color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.tfs-filters .facetwp-checkbox:last-child {
	margin-bottom: 0;
}

.tfs-filters .facetwp-checkbox::before {
	content: "";
	width: var(--wp--custom--control--box);
	height: var(--wp--custom--control--box);
	flex: 0 0 var(--wp--custom--control--box);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius);
	background-color: var(--wp--preset--color--surface);
	transition:
		background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.tfs-filters .facetwp-checkbox:hover,
.tfs-filters .facetwp-checkbox.checked {
	color: var(--wp--preset--color--ink);
}

/* FacetWP's .facetwp-checkbox.checked swaps in its tick sprite by setting
   background-image alone. It ties with the `background: none` above on
   specificity and loads later, so it wins — and that shorthand has already
   reset repeat and size, so the 104px sprite tiles across the whole row as a
   striped bar over the label. One more class outranks it in either load
   order. The checked state is drawn by ::before below. */
.tfs-filters .facetwp-checkbox.checked {
	background-image: none;
}

.tfs-filters .facetwp-checkbox.checked::before {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.tfs-filters .facetwp-checkbox:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

.tfs-filters .facetwp-display-value {
	min-width: 0;
	padding-right: 0;
}

.tfs-filters .facetwp-counter {
	margin-left: auto;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--muted);
}

/* Child terms of a hierarchical facet — category is the only one here. */
.tfs-filters .facetwp-depth {
	margin-left: var(--wp--custom--step--20);
}

.tfs-filters .facetwp-toggle {
	display: inline-block;
	margin-top: var(--wp--custom--step--8);
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	color: var(--wp--preset--color--accent);
	border-bottom: 1px solid var(--wp--preset--color--accent);
	cursor: pointer;
}

.tfs-filters .facetwp-toggle:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/* ---- Price slider --------------------------------------------------------- */

.tfs-filters .facetwp-slider-wrap {
	padding-bottom: var(--wp--custom--step--16);
}

.tfs-filters .noUi-target {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius);
}

.tfs-filters .noUi-connects {
	border-radius: var(--wp--custom--radius);
}

.tfs-filters .noUi-connect {
	background-color: var(--wp--preset--color--accent);
}

.tfs-filters .noUi-handle {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius);
	/* noUiSlider's own shadow has no place in a system that has none. */
	box-shadow: none;
}

.tfs-filters .noUi-handle:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

.tfs-filters .facetwp-slider-label {
	display: block;
	margin-top: var(--wp--custom--step--8);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--muted);
}

.tfs-filters .facetwp-slider-reset {
	margin-top: var(--wp--custom--step--8);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--utility);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--utility);
	color: var(--wp--preset--color--muted);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: var(--wp--custom--radius);
	box-shadow: none;
	padding: var(--wp--custom--step--8) var(--wp--custom--step--12);
	cursor: pointer;
	transition:
		color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.tfs-filters .facetwp-slider-reset:hover {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

.tfs-filters .facetwp-slider-reset:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}