/**
 * Shop filters — `.shop-filters` component (category / collection / size /
 * color / price). See /woocommerce/archive-product.php for the markup and
 * inc/woocommerce-filters.php for the query logic behind it.
 *
 * One set of markup, two presentations, mobile-first:
 * - Mobile/tablet (below 1024px): a "Filters" button opens `.shop-filters__panel`
 *   as a fixed off-canvas drawer (mirrors the primary-nav pattern in
 *   layout.css), with an overlay and body scroll lock.
 * - Desktop (1024px+): the toggle/drawer chrome disappears; the same panel
 *   lays out as a quiet inline row of dropdown facets (native `<details>`),
 *   never a permanent sidebar.
 *
 * Only loaded on Shop/category/tag/attribute archives (see inc/enqueue.php),
 * so it never reaches Homepage, Product, Cart or Checkout.
 */

.shop-filters {
	position: relative;
	margin-bottom: var(--space-md);
}

/* ---- Mobile "Filters" trigger ------------------------------------ */

.shop-filters__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	min-height: 44px;
	padding: var(--space-2xs) var(--space-md);
	background: none;
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-ink);
}

.shop-filters__toggle:hover {
	border-color: var(--color-ink);
}

.shop-filters__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 var(--space-3xs);
	border-radius: 999px;
	background: var(--color-accent);
	color: var(--color-accent-ink);
	font-size: var(--fs-2xs);
	line-height: 1;
}

/* ---- Overlay ------------------------------------------------------ */

.shop-filters__overlay {
	position: fixed;
	inset: 0;
	background: rgba(22, 19, 17, 0.4);
	z-index: var(--z-overlay);
}

/* ---- Drawer (mobile default) -------------------------------------- */

.shop-filters__panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(88vw, 380px);
	background: var(--color-paper);
	transform: translateX(100%);
	transition: transform var(--duration-base) var(--ease);
	z-index: calc(var(--z-overlay) + 1);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.shop-filters__panel.is-open {
	transform: translateX(0);
}

/* Lock background scroll behind the open drawer. */
body.shop-filters-open {
	overflow: hidden;
}

.shop-filters__panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md);
	border-bottom: var(--border-width) solid var(--color-line);
}

.shop-filters__panel-title {
	font-family: var(--font-display);
	font-size: var(--fs-md);
}

.shop-filters__close {
	min-width: 44px;
	min-height: 44px;
	background: none;
	border: 0;
	font-size: var(--fs-lg);
	line-height: 1;
	color: var(--color-ink);
}

.shop-filters__groups {
	display: flex;
	flex-direction: column;
	padding: 0 var(--space-md);
	flex: 1 1 auto;
}

.filter-group {
	border-bottom: var(--border-width) solid var(--color-line);
}

.filter-group__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-sm) 0;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	cursor: pointer;
	list-style: none;
}

.filter-group__summary::-webkit-details-marker {
	display: none;
}

.filter-group__summary::after {
	content: '+';
	font-size: var(--fs-md);
	color: var(--color-ink-muted);
}

.filter-group[open] > .filter-group__summary::after {
	content: '\2212'; /* minus sign */
}

.filter-group__options {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding-bottom: var(--space-sm);
	max-height: 320px;
	overflow-y: auto;
}

.filter-option {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	/* QA fix: rows previously sized to content only (~15px text line),
	   well under the ~44px touch target checkboxes need in a scrollable
	   drawer list — easy to mis-tap the neighboring row. */
	min-height: 44px;
	font-size: var(--fs-sm);
	color: var(--color-ink);
}

.filter-option input {
	width: 20px;
	height: 20px;
	accent-color: var(--color-accent);
	flex-shrink: 0;
}

.filter-option__count {
	color: var(--color-ink-muted);
	font-size: var(--fs-xs);
}

.filter-group__options--price {
	flex-direction: row;
	align-items: flex-end;
	gap: var(--space-sm);
}

.filter-price__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	flex: 1 1 auto;
}

.filter-price__field-label {
	font-size: var(--fs-2xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-ink-muted);
}

.filter-price__field input {
	width: 100%;
	min-height: 40px;
	padding: var(--space-2xs) var(--space-xs);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	background: var(--color-paper);
	color: var(--color-ink);
}

.filter-price__separator {
	padding-bottom: var(--space-xs);
	color: var(--color-ink-muted);
}

.shop-filters__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: var(--space-md);
	/* QA fix: this bar sits pinned to the bottom of a fixed, full-height
	   drawer, so on notched/home-indicator phones (iPhone 375/390 widths)
	   it needs its own inset — otherwise "Apply filters" ends up flush
	   against, or partly under, the home-indicator area. Desktop resets
	   padding to 0 below, so env() has no effect there. */
	padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
	border-top: var(--border-width) solid var(--color-line);
	background: var(--color-paper);
}

.shop-filters__clear {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-ink-muted);
}

.shop-filters__clear:hover {
	color: var(--color-ink);
}

.shop-filters__apply {
	flex: 1 1 auto;
	text-align: center;
}

/* ---------------------------------------------------------------------
   Desktop (1024px+): unobtrusive inline dropdown bar, no drawer/overlay,
   no permanent sidebar.
--------------------------------------------------------------------- */
@media (min-width: 1024px) {

	.shop-filters__toggle,
	.shop-filters__overlay,
	.shop-filters__panel-header {
		display: none;
	}

	.shop-filters__panel {
		position: static;
		width: auto;
		height: auto;
		transform: none;
		transition: none;
		z-index: auto;
		overflow: visible;
		background: transparent;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--space-sm);
	}

	.shop-filters__groups {
		display: flex;
		flex: 1 1 auto;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--space-sm);
		padding: 0;
	}

	.filter-group {
		position: relative;
		border-bottom: 0;
	}

	.filter-group__summary {
		padding: var(--space-2xs) var(--space-sm);
		/* QA fix: 1024px is also common touch-tablet width (landscape
		   iPad-class devices), and this row is the only control those
		   visitors get — the mobile drawer no longer applies here. Without
		   a minimum, the chip's tap height was ~32px. */
		min-height: 44px;
		border: var(--border-width) solid var(--color-line);
		border-radius: var(--radius-sm);
		font-size: var(--fs-xs);
		text-transform: uppercase;
		letter-spacing: var(--ls-eyebrow);
		font-weight: var(--fw-regular);
		gap: var(--space-3xs);
	}

	.filter-group:hover > .filter-group__summary {
		border-color: var(--color-ink);
	}

	.filter-group[open] > .filter-group__summary {
		border-color: var(--color-accent);
		color: var(--color-accent);
	}

	.filter-group__options {
		position: absolute;
		top: calc(100% + var(--space-2xs));
		left: 0;
		min-width: 220px;
		max-height: 320px;
		padding: var(--space-sm);
		background: var(--color-paper);
		border: var(--border-width) solid var(--color-line);
		box-shadow: 0 8px 24px rgba(22, 19, 17, 0.08);
		z-index: var(--z-overlay);
	}

	/* QA fix: at narrower desktop widths (from 1024px, before the extra
	   1280px container gutter kicks in) a facet positioned late in the
	   row — Color/Price — can open with its 220–260px-wide panel past the
	   right edge of the viewport; `html { overflow-x: hidden }` then
	   clips it rather than scrolling to it, making those options
	   unreachable. woocommerce.js measures each panel on open and adds
	   this class when it would overflow, flipping the anchor to the
	   panel's right edge instead. */
	.filter-group__options.is-align-right {
		left: auto;
		right: 0;
	}

	.filter-group--price .filter-group__options--price {
		min-width: 260px;
	}

	.shop-filters__actions {
		display: inline-flex;
		width: auto;
		padding: 0;
		margin-left: var(--space-sm);
		border-top: 0;
		background: transparent;
		vertical-align: top;
	}

	.shop-filters__apply {
		/* QA fix: matches the 44px touch-target fix on the other Filters
		   controls at this breakpoint (see .filter-group__summary above). */
		min-height: 44px;
		padding: var(--space-2xs) var(--space-md);
	}
}