/**
 * AFFW Filter — desktop horizontal bar.
 *
 * HANDDN brand system: deep navy #161735, light ground #f8f8f8,
 * hairline dividers #e5e5e5. Flat surfaces, one accent, uppercase micro-labels
 * with wide tracking, no rounded corners.
 *
 * Layout notes:
 *  - Dropdowns are native <details>/<summary>, so the bar works without JS.
 *  - Everything is scoped under .affw-bar / .affw-mobile to avoid theme bleed.
 */

.affw-bar,
.affw-mobile {
	--affw-navy: #161735;
	--affw-ground: #f8f8f8;
	--affw-line: #e5e5e5;
	--affw-white: #fff;
	--affw-muted: #6b6c85;
	--affw-disabled: #a9aab8;
	--affw-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

.affw-bar *,
.affw-mobile * {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Bar shell
   ------------------------------------------------------------------------ */

.affw-bar--desktop {
	margin: 0 0 28px;
	background: var(--affw-ground);
	border: 1px solid var(--affw-line);
	font-family: inherit;
	color: var(--affw-navy);
}

/* Three stacked rows, divided by hairlines: the result and its order on top,
   the filters themselves in the middle, the current selection underneath. Each
   answers a different question, so each gets its own band. */

.affw-bar__top {
	display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0px 0px 0px 12px;
    border-bottom: 1px solid var(--affw-line);
    background: var(--affw-white);
}

.affw-bar__body {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 0 20px;
	min-height: 54px;
}

.affw-bar__label {
	flex: 0 0 auto;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--affw-navy);
	padding-right: 20px;
	border-right: 1px solid var(--affw-line);
	align-self: stretch;
	display: flex;
	align-items: center;
}

.affw-bar__groups {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	flex: 1 1 auto;
	gap: 0;
}

.affw-bar__bottom {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 20px;
	border-top: 1px solid var(--affw-line);
}

/* Nothing selected means nothing to show or clear, so the whole band goes.
   Driven by the `hidden` attribute from PHP and the AJAX layer rather than
   :has(), so the state is explicit and identical on both paths. `display:flex`
   above would otherwise beat the attribute's own default. */
.affw-bar__bottom[hidden] {
	display: none;
}

.affw-bar__bottom .affw-bar__clear {
	flex: 0 0 auto;
	margin-left: auto;
}

.affw-bar__count {
	font-size: 12px;
	color: var(--affw-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.affw-bar__clear {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--affw-navy);
	text-decoration: none;
	border-bottom: 1px solid var(--affw-navy);
	padding-bottom: 1px;
	transition: opacity 0.18s var(--affw-ease);
}

.affw-bar__clear:hover {
	opacity: 0.6;
}

/* ---------------------------------------------------------------------------
   Dropdown trigger
   ------------------------------------------------------------------------ */

.affw-dropdown {
	position: relative;
}

.affw-dropdown__trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 17px 18px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--affw-navy);
	cursor: pointer;
	list-style: none;
	user-select: none;
	white-space: nowrap;
	transition: background 0.18s var(--affw-ease);
}

/* Strip the native disclosure triangle in every engine. */
.affw-dropdown__trigger::-webkit-details-marker,
.affw-accordion__trigger::-webkit-details-marker {
	display: none;
}

.affw-dropdown__trigger::marker,
.affw-accordion__trigger::marker {
	content: "";
}

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

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

.affw-dropdown__trigger.is-active {
	font-weight: 600;
}

.affw-dropdown__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;
}

.affw-caret {
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s var(--affw-ease);
	opacity: 0.6;
}

.affw-dropdown[open] .affw-caret {
	transform: rotate(-135deg) translate(-2px, -2px);
	opacity: 1;
}

.affw-dropdown[open] .affw-dropdown__trigger {
	background: var(--affw-white);
}

/* ---------------------------------------------------------------------------
   Dropdown panel
   ------------------------------------------------------------------------ */

.affw-dropdown__panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 120;
	min-width: max(320px, calc(var(--affw-cols, 1) * 92px + 24px));
	max-width: 520px;
	background: var(--affw-ground);
	border: 1px solid var(--affw-line);
	box-shadow: 0 12px 32px rgba(22, 23, 53, 0.1);
	animation: affw-drop 0.18s var(--affw-ease);
}

/* Keep the panel on screen when a group sits at the right edge of the bar. */
.affw-dropdown:nth-last-child(-n + 2) .affw-dropdown__panel {
	left: auto;
	right: 0;
}

@keyframes affw-drop {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.affw-dropdown__panel {
		animation: none;
	}

	.affw-caret,
	.affw-option__box,
	.affw-chip,
	.affw-apply {
		transition: none;
	}
}

.affw-dropdown__scroll {
	max-height: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Custom scrollbar — thin, navy, no arrows. */
.affw-dropdown__scroll {
	scrollbar-width: thin;
	scrollbar-color: rgba(22, 23, 53, 0.28) transparent;
}

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

.affw-dropdown__scroll::-webkit-scrollbar-track {
	background: transparent;
}

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

.affw-dropdown__scroll::-webkit-scrollbar-thumb:hover {
	background: rgba(22, 23, 53, 0.5);
}

.affw-dropdown__footer {
	padding: 12px 16px;
	background: var(--affw-white);
	border-top: 1px solid var(--affw-line);
}

/* ---------------------------------------------------------------------------
   Options
   ------------------------------------------------------------------------ */

.affw-options {
	margin: 0;
	padding: 0;
	list-style: none;
}

.affw-option {
	margin: 0;
	padding: 0;
	list-style: none;
}
.affw-options--color_swatch .affw-option__label {
	padding: 10px;
}

.affw-option__label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	margin: 0;
	font-size: 13px;
	line-height: 1.35;
	color: var(--affw-navy);
	cursor: pointer;
	transition: background 0.14s var(--affw-ease);
}

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

/* The native control is hidden but still focusable and screen-reader visible. */
.affw-option__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.affw-option__box {
	flex: 0 0 auto;
	position: relative;
	width: 15px;
	height: 15px;
	border: 1px solid #c9cad6;
	background: var(--affw-white);
	transition: background 0.14s var(--affw-ease), border-color 0.14s var(--affw-ease);
}

/* A round control means "pick one". Driven by the selection modifier rather
   than the display type, since the two came apart: a swatch list can be
   single-choice and a dropdown-styled list can be multi. */
.affw-options--radio .affw-option__box,
.affw-options--dropdown .affw-option__box,
.affw-options--single .affw-option__box {
	border-radius: 50%;
}

.affw-option__input:checked + .affw-option__box {
	background: var(--affw-navy);
	border-color: var(--affw-navy);
}

.affw-option__input:checked + .affw-option__box::after {
	content: "";
	position: absolute;
	left: 4.5px;
	top: 1px;
	width: 4px;
	height: 8px;
	border-right: 1.5px solid #fff;
	border-bottom: 1.5px solid #fff;
	transform: rotate(43deg);
}

.affw-options--radio .affw-option__input:checked + .affw-option__box::after,
.affw-options--dropdown .affw-option__input:checked + .affw-option__box::after {
	left: 4px;
	top: 4px;
	width: 5px;
	height: 5px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	transform: none;
}

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

.affw-option__swatch {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 1px solid var(--affw-line);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.affw-option__text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.affw-option__count {
	flex: 0 0 auto;
	font-size: 11px;
	color: var(--affw-muted);
	font-variant-numeric: tabular-nums;
}

/* Zero-match options stay in place, greyed, unless configured to hide. */
.affw-option.is-disabled .affw-option__label {
	cursor: not-allowed;
	color: var(--affw-disabled);
}

.affw-option.is-disabled .affw-option__label:hover {
	background: transparent;
}

.affw-option.is-disabled .affw-option__box {
	background: var(--affw-ground);
	border-color: var(--affw-line);
}

.affw-option.is-disabled .affw-option__count,
.affw-option.is-disabled .affw-option__swatch {
	opacity: 0.45;
}

.affw-option.is-checked .affw-option__text {
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Swatches

   Scoped to the option, not the list: a term with no image or colour keeps its
   checkbox, so a half-configured attribute stays filterable rather than
   presenting a row of blank circles.
   ------------------------------------------------------------------------ */

.affw-option--swatch .affw-option__box {
	display: none;
}

.affw-option--swatch .affw-option__input:checked ~ .affw-option__swatch {
	box-shadow: 0 0 0 1px var(--affw-white) inset, 0 0 0 2px var(--affw-navy);
}

/* ---------------------------------------------------------------------------
   Column layout

   One setting drives this on both desktop and mobile: one column keeps the row
   list, two or more becomes a tile grid with the chip above its label. It is
   keyed off the column count rather than the display type, so a long checkbox
   list can be two-column and an image swatch of wide photos can be one.
   ------------------------------------------------------------------------ */
/* The count itself is set as --affw-cols on the <details>, which is an ancestor
   of both this list and the panel whose width has to grow with it. */

.affw-options--grid_1.affw-options--image_swatch .affw-option__swatch{
	width: 100%;
    height: 40px;
}
.affw-options--grid_1 .affw-option__label{
	flex-direction: column;
	gap: 7px;
	text-align: center;
}
.affw-options--grid_2.affw-options--image_swatch .affw-option__swatch, .affw-options--grid_3.affw-options--image_swatch .affw-option__swatch{
	width: 100%;
	height: 100% !important;
	aspect-ratio: 1 / 1;
}
.affw-options--grid {
	display: grid;
	grid-template-columns: repeat(var(--affw-cols, 3), minmax(0, 1fr));
	gap: 4px;
	padding: 10px 12px;
}

.affw-options--grid .affw-option__label {
	flex-direction: column;
	gap: 7px;
	padding: 10px 4px;
	text-align: center;
}

/* Term names wrap rather than truncate in a tile — "Multi-Colour" must stay
   legible, and the cell has no horizontal room to spare. */
.affw-options--grid .affw-option__text {
	flex: 0 0 auto;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	font-size: 12px;
	line-height: 1.3;
}

.affw-options--grid .affw-option__count {
	flex: 0 0 auto;
}

/* Chip sizing follows the kind of chip, because the content differs. A colour
   is a token and reads at any size; a swatch image carries real detail — the
   strap photos are roughly 280x39 — and needs width to be worth showing. */
.affw-options--swatch .affw-option__swatch {
	width: 18px;
	height: 18px;
	background-size: cover;
	background-position: center;
}

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

.affw-options--image_swatch .affw-option__swatch {
	width: 96px;
	height: 26px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.affw-options--grid.affw-options--image_swatch .affw-option__swatch {
	width: 100%;
	height: 38px;
}

/* An option with no swatch data keeps its checkbox; left-align it so the row
   does not read as a broken tile. */
.affw-options--grid .affw-option:not(.affw-option--swatch) .affw-option__label {
	flex-direction: row;
	text-align: left;
}

/* ---------------------------------------------------------------------------
   Price range
   ------------------------------------------------------------------------ */

.affw-range {
	padding: 16px;
}

.affw-range__fields {
	display: flex;
	align-items: flex-end;
	gap: 10px;
}

.affw-range__field {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
}
.affw-range__field input[type="number"] {
	box-shadow: none;
    height: 40px;
}

.affw-range__legend {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--affw-muted);
}

.affw-range__field input {
	width: 100%;
	padding: 9px 10px;
	background: var(--affw-white);
	border: 1px solid var(--affw-line);
	border-radius: 0;
	font-size: 13px;
	color: var(--affw-navy);
	font-variant-numeric: tabular-nums;
}

.affw-range__field input:focus {
	outline: 0;
	border-color: var(--affw-navy);
	box-shadow: inset 0 0 0 1px var(--affw-navy);
}

.affw-range__dash {
	padding-bottom: 11px;
	color: var(--affw-muted);
}

.affw-range__hint {
	margin: 10px 0 0;
	font-size: 11px;
	color: var(--affw-muted);
}

.affw-range__hint .amount,
.affw-range__hint bdi {
	color: var(--affw-navy);
}

/* ---------------------------------------------------------------------------
   Apply button
   ------------------------------------------------------------------------ */

.affw-apply {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 11px 24px;
	margin:0;
	background: var(--affw-navy);
	border: 1px solid var(--affw-navy);
	border-radius: 0;
	color: var(--affw-white);
	font-family: inherit;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.18s var(--affw-ease);
}

.affw-apply:hover {
	background: #23244a;
}

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

.affw-apply--block {
	width: 100%;
}

.affw-noscript {
	padding: 0 20px 16px;
}

/* ---------------------------------------------------------------------------
   Active chips
   ------------------------------------------------------------------------ */

.affw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* The container is always rendered so the AJAX layer can refill it; it must
   take up no space at all while it holds nothing. */
.affw-chips[hidden] {
	display: none;
}

.affw-chips:empty,
.affw-drawer__chips:empty {
	display: none;
}

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

.affw-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px;
	background: var(--affw-white);
	border: 1px solid var(--affw-line);
	font-size: 11.5px;
	color: var(--affw-navy);
	text-decoration: none;
	transition: border-color 0.16s var(--affw-ease), background 0.16s var(--affw-ease);
}

.affw-chip:hover {
	border-color: var(--affw-navy);
	background: var(--affw-ground);
}

.affw-chip__remove {
	font-size: 14px;
	line-height: 1;
	color: var(--affw-muted);
}

.affw-chip:hover .affw-chip__remove {
	color: var(--affw-navy);
}

/* ---------------------------------------------------------------------------
   Loading state (driven by the AJAX layer in step 5)
   ------------------------------------------------------------------------ */

/* Wraps the theme's product loop, so it must stay layout-neutral: no display,
   width or spacing of its own, only a positioning context for the overlay. */
.affw-results {
	position: relative;
}

.affw-loading {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.2s var(--affw-ease);
}

/* Holds the viewport steady while a taller page is swapped for a shorter one. */
.affw-loading::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
}

.affw-bar.is-busy {
	position: relative;
}

.affw-bar.is-busy::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--affw-navy), transparent);
	background-size: 40% 100%;
	background-repeat: no-repeat;
	animation: affw-sweep 1.1s var(--affw-ease) infinite;
}

@keyframes affw-sweep {
	from { background-position: -40% 0; }
	to   { background-position: 140% 0; }
}

/* ---------------------------------------------------------------------------
   Desktop / mobile switch
   ------------------------------------------------------------------------ */

.affw-mobile {
	display: none;
}

@media screen and (max-width: 768px) {
	.affw-bar--desktop {
		display: none;
	}

	.affw-mobile {
		display: block;
	}
}

/* ---------------------------------------------------------------------------
   Option search

   Hidden until the script boots: it filters options client-side, so showing it
   without JavaScript would offer a control that cannot do anything.
   ------------------------------------------------------------------------ */

.affw-search {
	display: none;
	padding: 12px;
	border-bottom: 1px solid var(--affw-line);
}

.affw-ready .affw-search {
	display: block;
}

input[type=search].affw-search__input {
	width: 100%;
	box-shadow: none;
    height: 40px;
	padding: 7px 10px;
	margin: 0;
	font-size: 13px;
	color: var(--affw-navy);
	background: var(--affw-white);
	border: 1px solid var(--affw-line);
	border-radius: 0;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
}

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

.affw-search__empty {
	margin: 8px 0 4px;
	font-size: 12px;
	color: var(--affw-muted);
}

/* ---------------------------------------------------------------------------
   Hierarchy

   Indentation is presentation only — the index already resolves ancestors, so
   a parent matches its children's products without them being listed.
   ------------------------------------------------------------------------ */

.affw-option[data-affw-depth="1"] .affw-option__label { padding-left: 34px; }
.affw-option[data-affw-depth="2"] .affw-option__label { padding-left: 52px; }
.affw-option[data-affw-depth="3"] .affw-option__label { padding-left: 70px; }

.affw-option {
	position: relative;
}

.affw-option__toggle {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	padding: 0;
	font-size: 15px;
	line-height: 1;
	color: var(--affw-muted);
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.affw-option__toggle::before {
	content: "\2212"; /* minus: expanded */
}

.affw-option__toggle[aria-expanded="false"]::before {
	content: "+";
}

.affw-option__toggle:hover {
	color: var(--affw-navy);
}

/* A search result set is a flat list of matches, not a tree — indentation and
   collapse controls would describe a structure that is no longer on screen. */
.affw-options.is-searching .affw-option .affw-option__label {
	padding-left: 16px;
}

.affw-options.is-searching .affw-option__toggle {
	display: none;
}

/* ---------------------------------------------------------------------------
   Own sort control and result line

   The theme's equivalents are hidden by an inline style when this is on, so
   these are the only ones on the page.
   ------------------------------------------------------------------------ */

.affw-bar__showing {
	font-size: 12px;
	color: var(--affw-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.affw-sort {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
}

.affw-sort__select {
	appearance: none;
	margin: 0;
	-webkit-appearance: none;
	max-width: 220px;
	font-family: inherit;
	box-shadow: none;
	font-size: 14px;
	font-weight: 500;
	height: 50px;
	padding: 12px 20px;
	color: var(--affw-navy);
	background: var(--affw-white);
	border: none;
	border-left: 1px solid var(--affw-line);
	border-radius: 0;
	cursor: pointer;
	/* Chevron drawn inline rather than shipped, matching .affw-caret. */
	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;
	font-weight: normal;
}

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