/* ==========================================================================
   Filter drawer (mobile)
   Converted from design-reference/showroom-floor.css §9.

   The drawer is not a second copy of the rail. FacetWP allows each facet to
   appear once per page, so the same .tfs-filters element is repositioned here
   rather than duplicated — which also means filter state, focus, and scroll
   position survive the breakpoint.
   ========================================================================== */

.tfs-filters__close {
	display: none;
}

@media (max-width: 1023px) {
	.tfs-filters {
		display: flex;
		flex-direction: column;
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 61;
		max-height: var(--wp--custom--rail--drawer-max-height);
		background-color: var(--wp--preset--color--ground);
		border-top: var(--wp--custom--rule-strong);
		transform: translateY(100%);
		/* Keeps the closed drawer out of the tab order, not just out of sight. */
		visibility: hidden;
		transition:
			transform var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
			visibility var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
	}

	.tfs-filters[data-open="true"] {
		transform: translateY(0);
		visibility: visible;
	}

	.tfs-filters__head {
		flex: 0 0 auto;
		margin-bottom: 0;
		border: 0;
		border-bottom: var(--wp--custom--hairline);
		border-radius: 0;
		padding: var(--wp--preset--spacing--30) var(--wp--custom--gutter--mobile);
		align-items: center;
	}

	.tfs-filters__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		grid-column: 2;
		grid-row: 1 / span 2;
		min-height: var(--wp--custom--control--tap-target-minimum);
		padding: 0 var(--wp--custom--step--16);
		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--ink);
		background-color: var(--wp--preset--color--surface);
		border: 1px solid var(--wp--preset--color--rule);
		border-radius: var(--wp--custom--radius);
		cursor: pointer;
		transition: border-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
	}

	.tfs-filters__close:hover {
		border-color: var(--wp--preset--color--ink);
	}

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

	/* Clear all moves under the head's first column so the close button can
	   own the right edge. */
	.tfs-filters .facetwp-facet-clear {
		grid-column: 1;
		grid-row: 2;
	}

	.tfs-filters__groups {
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding:
			0
			var(--wp--custom--gutter--mobile)
			calc(var(--wp--preset--spacing--30) + env(safe-area-inset-bottom, 0px));
	}

	/* Every option is a full tap target inside the drawer. */
	.tfs-filters .facetwp-checkbox {
		min-height: var(--wp--custom--control--tap-target-minimum);
		margin-bottom: 0;
	}
}

/* ---- Scrim ---------------------------------------------------------------- */

.tfs-filters-scrim {
	position: fixed;
	inset: 0;
	z-index: 60;
	background-color: var(--wp--custom--scrim);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.tfs-filters-scrim[data-open="true"] {
	opacity: 1;
	pointer-events: auto;
}

/* ---- Sticky filter bar ---------------------------------------------------- */

.tfs-filter-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 40;
	display: flex;
	gap: var(--wp--custom--step--12);
	padding:
		var(--wp--preset--spacing--20)
		var(--wp--custom--gutter--mobile)
		calc(var(--wp--preset--spacing--20) + env(safe-area-inset-bottom, 0px));
	background-color: var(--wp--preset--color--surface);
	border-top: var(--wp--custom--hairline);
}

.tfs-filter-bar__button {
	flex: 1;
}

.tfs-filter-bar__count::before {
	content: " (";
}

.tfs-filter-bar__count::after {
	content: ")";
}

@media (min-width: 1024px) {
	.tfs-filter-bar,
	.tfs-filters-scrim {
		display: none;
	}
}

/* Scroll lock while the drawer is open. */
.tfs-drawer-open {
	overflow: hidden;
}