/**
 * AFFW Filter — mobile sticky bar and refine drawer.
 *
 * Loads after affw-desktop.css and inherits its custom properties and shared
 * option styles. Everything here is inside the max-width breakpoint except the
 * accordion transition, which is shared with any theme that renders the drawer
 * markup at wider widths.
 *
 * The drawer's open state is a hidden checkbox (#affw-drawer-toggle), so the
 * whole thing opens, closes and submits without JavaScript.
 */
input#affw-drawer-toggle {
    visibility: hidden;
    display: none;
}

/* ---------------------------------------------------------------------------
   Sticky top bar
   ------------------------------------------------------------------------ */

.affw-mobile__bar {
	position: sticky;
	top: 0;
	z-index: 90;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
	/* One row, always. Wrapping put the count on a line of its own and doubled
	   the height of a bar that is stuck to the top of the viewport. */
	flex-wrap: nowrap;
	gap: 19.6px;
	margin: 0 0 20px;
}

.affw-mobile__refine {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 50px;
	flex: 0 0 auto;
	margin: 0;
	padding: 8px 14px;
	background: var(--affw-navy);
	color: var(--affw-white);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	user-select: none;
}

.affw-mobile__refine:focus-visible {
	outline: 2px solid var(--affw-navy);
	outline-offset: 2px;
}

/* Three-line "filter" glyph, drawn rather than shipped as an asset. */
.affw-mobile__refine-icon {
	position: relative;
	width: 12px;
	height: 8px;
	flex: 0 0 auto;
}

.affw-mobile__refine-icon::before,
.affw-mobile__refine-icon::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1.5px;
	background: currentColor;
}

.affw-mobile__refine-icon::before {
	top: 0;
	right: 3px;
}

.affw-mobile__refine-icon::after {
	bottom: 0;
	left: 3px;
}

.affw-mobile__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: var(--affw-white);
	color: var(--affw-navy);
	font-size: 9.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.affw-mobile__count {
	flex: 0 1 auto;
	min-width: 0;
	font-size: 11.5px;
	color: var(--affw-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	order: 3;
}

/* Fold WooCommerce's ordering select into the bar without restyling it away. */
.affw-mobile__sort {
	flex: 0 0 auto;
}

.affw-mobile__sort form,
.affw-mobile__sort .woocommerce-ordering {
	margin: 0;
}

.affw-mobile__sort select {
	max-width: 148px;
	padding: 6px 22px 6px 8px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--affw-line);
	border-radius: 0;
	font-size: 11.5px;
	color: var(--affw-navy);
}

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

.affw-drawer__scrim {
	position: fixed;
	inset: 0;
	z-index: 999;
	margin: 0;
	background: rgba(22, 23, 53, 0.42);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.28s var(--affw-ease), visibility 0.28s var(--affw-ease);
	cursor: pointer;
}

.affw-drawer__state:checked ~ .affw-drawer__scrim {
	opacity: 1;
	visibility: visible;
}

/* ---------------------------------------------------------------------------
   Drawer
   ------------------------------------------------------------------------ */

.affw-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	width: min(90vw, 380px);
	background: var(--affw-white);
	border-left: 1px solid var(--affw-line);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.32s var(--affw-ease), visibility 0.32s var(--affw-ease);
	will-change: transform;
}

.affw-drawer__state:checked ~ .affw-drawer {
	transform: translateX(0);
	visibility: visible;
	box-shadow: -18px 0 44px rgba(22, 23, 53, 0.14);
	margin: 0;
}

.affw-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
	padding: 18px 20px;
	background: var(--affw-ground);
	border-bottom: 1px solid var(--affw-line);
}

.affw-drawer__title {
	margin: 0;
	padding: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--affw-navy);
}

.affw-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: -6px -6px -6px 0;
	font-size: 22px;
	line-height: 1;
	color: var(--affw-navy);
	cursor: pointer;
}

.affw-drawer__close:focus-visible {
	outline: 2px solid var(--affw-navy);
	outline-offset: 0;
}

.affw-drawer__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	flex: 0 0 auto;
	padding: 14px 20px;
	background: var(--affw-ground);
	border-bottom: 1px solid var(--affw-line);
}

/* Empty, this is a band of padding and a hairline announcing nothing. Driven by
   the `hidden` attribute from PHP and the AJAX layer rather than :empty, so the
   state is explicit on both paths — and `display:flex` above would otherwise
   beat the attribute's own default. */
.affw-drawer__chips[hidden] {
	display: none;
}

.affw-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(22, 23, 53, 0.28) transparent;
}

.affw-drawer__body::-webkit-scrollbar {
	width: 4px;
}

.affw-drawer__body::-webkit-scrollbar-thumb {
	background: rgba(22, 23, 53, 0.28);
}

/* ---------------------------------------------------------------------------
   Accordion groups
   ------------------------------------------------------------------------ */

.affw-accordion {
	border-bottom: 1px solid var(--affw-line);
}

.affw-accordion__trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 20px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--affw-navy);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.affw-accordion__trigger:focus-visible {
	outline: 2px solid var(--affw-navy);
	outline-offset: -2px;
}

.affw-accordion__title {
	flex: 1 1 auto;
}

.affw-accordion__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 17px;
	height: 17px;
	padding: 0 5px;
	background: var(--affw-navy);
	color: var(--affw-white);
	font-size: 10px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Plus / minus, rotated rather than swapped. */
.affw-accordion__icon {
	position: relative;
	width: 11px;
	height: 11px;
	flex: 0 0 auto;
}

.affw-accordion__icon::before,
.affw-accordion__icon::after {
	content: "";
	position: absolute;
	background: var(--affw-navy);
	transition: transform 0.24s var(--affw-ease), opacity 0.24s var(--affw-ease);
}

.affw-accordion__icon::before {
	top: 5px;
	left: 0;
	width: 11px;
	height: 1.5px;
}

.affw-accordion__icon::after {
	top: 0;
	left: 5px;
	width: 1.5px;
	height: 11px;
}

.affw-accordion[open] .affw-accordion__icon::after {
	transform: rotate(90deg);
	opacity: 0;
}

/*
 * 0fr -> 1fr animates cleanly where <details> keeps its content in flow.
 * Browsers that collapse the content outright simply snap open, which is an
 * acceptable degradation.
 */
.affw-accordion__panel {
	display: grid;
	grid-template-rows: 1fr;
	padding-bottom: 8px;
	animation: affw-accordion-open 0.3s var(--affw-ease);
}

/* The options themselves follow the panel by a beat, so the group reads as
   unfolding rather than appearing all at once. */
.affw-accordion[open] > .affw-accordion__panel > .affw-accordion__inner {
	animation: affw-accordion-inner 0.34s var(--affw-ease) both;
}

.affw-accordion__inner {
	min-height: 0;
	overflow: hidden;
}

@keyframes affw-accordion-open {
	from {
		grid-template-rows: 0fr;
		opacity: 0;
	}
	to {
		grid-template-rows: 1fr;
		opacity: 1;
	}
}

@keyframes affw-accordion-inner {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	40% {
		opacity: 0;
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.affw-accordion__panel,
	.affw-accordion[open] > .affw-accordion__panel > .affw-accordion__inner,
	.affw-drawer,
	.affw-drawer__scrim {
		animation: none;
		transition: none;
	}
}

/* Options sit slightly tighter and wider inside the drawer. */
.affw-drawer .affw-option__label {
	padding: 10px 20px;
    font-size: 12px;
}

.affw-drawer .affw-option__box {
	width: 17px;
	height: 17px;
}

/* The column count is a per-filter setting and deliberately identical on both
   breakpoints, so the drawer does NOT override grid-template-columns. Only the
   touch-target sizing differs. */
.affw-drawer .affw-options--grid {
	padding: 12px 16px;
}

.affw-drawer .affw-options--grid.affw-options--swatch .affw-option__swatch {
	width: 40px;
	height: 40px;
}

.affw-drawer .affw-options--grid.affw-options--image_swatch .affw-option__swatch {
	height: 44px;
}

.affw-drawer .affw-range {
	padding: 4px 20px 16px;
}

/* ---------------------------------------------------------------------------
   Drawer footer
   ------------------------------------------------------------------------ */

.affw-drawer__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
	padding: 14px 20px;
	padding-bottom: max(14px, env(safe-area-inset-bottom));
	background: var(--affw-ground);
	border-top: 1px solid var(--affw-line);
}

/*
 * Clear is a button in its own right rather than a text link, so the two read
 * as a pair: outlined for the safe, reversible action; solid for the one that
 * commits. `flex: 1 1 0` on both makes them equal halves — and because Clear is
 * hidden outright when nothing is selected, Apply then takes the full width
 * with no rule needed for the single-button case.
 */
.affw-drawer__reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
	padding: 13px 20px;
	background: var(--affw-white);
	border: 1px solid var(--affw-navy);
	border-radius: 0;
	color: var(--affw-navy);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.18s var(--affw-ease);
}

.affw-drawer__reset:hover {
	background: rgba(22, 23, 53, 0.05);
}

.affw-drawer__reset:focus-visible {
	outline: 2px solid var(--affw-navy);
	outline-offset: 2px;
}

.affw-drawer__reset[hidden] {
	display: none;
}

.affw-drawer__foot .affw-apply {
	flex: 1 1 0;
	min-width: 0;
	padding: 13px 20px;
}

/* Locks the page behind the drawer. Applied by JS in step 5; the class is
   defined here so the drawer's own stylesheet owns the behaviour. */
.affw-drawer-open,
.affw-drawer-open body {
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Narrow phones
   ------------------------------------------------------------------------ */

@media screen and (max-width: 420px) {

	.affw-mobile__count {
		flex-basis: 100%;
	}

	.affw-mobile__sort select {
		max-width: 128px;
	}

	.affw-drawer {
		width: 100vw;
		border-left: 0;
	}
}

/* Search box and hierarchy inside the drawer. */
.affw-drawer .affw-search {
	padding: 12px 20px;
    background: var(--affw-white);
    border-top: 1px solid var(--affw-line);
}

.affw-drawer .affw-search__input {
	padding: 10px 12px;
	font-size: 16px; /* 16px stops iOS zooming the viewport on focus. */
}

.affw-drawer .affw-option[data-affw-depth="1"] .affw-option__label { padding-left: 40px; }
.affw-drawer .affw-option[data-affw-depth="2"] .affw-option__label { padding-left: 60px; }
.affw-drawer .affw-option[data-affw-depth="3"] .affw-option__label { padding-left: 80px; }

.affw-drawer .affw-options.is-searching .affw-option .affw-option__label {
	padding-left: 20px;
}

/* Larger hit area for the collapse control on touch. */
.affw-drawer .affw-option__toggle {
	right: 14px;
	width: 32px;
	height: 32px;
	font-size: 17px;
}

/* The sort control shares the desktop styling; only the width is constrained,
   since the sticky bar has to fit a count and a Refine button beside it. */
.affw-mobile__sort .affw-sort__select {
	max-width: 100%;
	padding: 6px 26px 6px 8px;
	margin: 0;
	border: 1px solid var(--affw-line);
	font-size: 14px;
	font-weight: 400;
	background-color: transparent;
	cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 14px center, right 9px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}