/**
 * Horizontal filter bar (category archives).
 *
 * The DOM is the legacy sidebar: same form, same inputs, same ids. Only the
 * layout and the chrome change, which is why the whole filter engine keeps
 * working. Selectors are deliberately specific -- they override the sidebar
 * rules in style.css without editing that 1 MB generated file.
 */

/* ---------- the wrap becomes a column: bar on top, grid below ---------- */
.filters-products-wrap.uw-fbar-mode {
	display: flex;
	flex-direction: column;
	gap: var(--space-m, 16px);
}

.filters-products-wrap.uw-fbar-mode > .results {
	width: 100%;
	max-width: none;
	padding-left: 0;
}

/* The bar itself: pills grow, count + sort sit at the end of the same row. */
.filters-products-wrap.uw-fbar-mode #filters-sidebar.uw-fbar {
	position: static;
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	max-height: none;
	margin: 0 0 var(--space-m, 16px);
	padding: 0;
	overflow: visible;
	background: none;
	border: 0;
}

.uw-fbar #results-header {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	gap: var(--space-l, 24px);
	padding-bottom: 0;
	min-height: 44px;
	white-space: nowrap;
}
.uw-fbar #results-header .products-amount { flex: 0 0 auto; margin-left: 0; }

/* Pills wrap; the applied-value chips take a full line underneath. */
.uw-fbar #filtersAcc {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs, 8px);
}

.uw-fbar .uw-fp-item { order: 1; position: relative; margin: 0; border: 0; }
.uw-fbar .applied-filters-wrap { order: 2; flex: 0 0 100%; padding-top: 0 !important; margin: 0; }


/* ---------- the pill ---------- */
.uw-fbar .uw-fp { gap: var(--space-2xs, 6px); }
/* Open: --light-blue surface, --medium-blue border (09 §10). */
.uw-fbar .uw-fp[aria-expanded="true"],
.uw-fbar .uw-fp.is-applied[aria-expanded="true"] {
	color: var(--dark-blue, #0b102a);
	background: var(--light-blue, #ced4f3);
	border-color: var(--medium-blue, #334bc1);
}
.uw-fbar .uw-fp .uw-pill__chevron { transition: transform 150ms cubic-bezier(.4, 0, .2, 1); }
.uw-fbar .uw-fp[aria-expanded="true"] .uw-pill__chevron { transform: rotate(180deg); }

/* ---------- the panel ---------- */
.uw-fbar .uw-pop--filter {
	top: calc(100% + 8px);
	left: 0;
	display: block;
	min-width: 280px;
	padding: var(--space-2xs, 6px);
}
/* `hidden` is the single source of truth for open/closed (js/uw-pop.js).
   The legacy rules gave .accordion-collapse a display, which would beat the
   UA's [hidden] rule and leave every panel permanently open. */
.uw-fbar .uw-pop--filter[hidden] { display: none !important; }
.uw-fbar .uw-pop--filter .accordion-body { padding: var(--space-2xs, 6px); }

/* Checkbox rows inside a panel: 32px, 14px label (design spec).
   .checkmark is absolutely positioned at left:0, so the row MUST keep left
   padding to clear it -- a plain `padding: 0 8px` put the box straight on top
   of the first characters ("B-Chill", "<25 CHF"). */
.uw-fbar .uw-pop--filter .custom-check {
	min-height: 32px;
	padding: 0 8px 0 32px;
	border-radius: 10px;
	font-size: .875rem;
	line-height: 1.3;
	margin-bottom: 0;
	gap: 8px;
}
.uw-fbar .uw-pop--filter .custom-check .checkmark {
	left: 7px;
	width: 17px;
	height: 17px;
}
/* The tick is drawn by .checkmark:after; keep it centred in the smaller box. */
.uw-fbar .uw-pop--filter .custom-check .checkmark::after {
	left: 5px;
	top: 1px;
}
@media (hover: hover) and (pointer: fine) {
	.uw-fbar .uw-pop--filter .custom-check:hover { background: var(--light-blue, #ced4f3); }
}

/* Slots the client fills with attribute pills. `display: contents` makes the
   injected .uw-fp-item a direct flex child of the bar, so the slot itself is
   not a second wrapper around it. */
.uw-fbar .uw-fp-slot { display: contents; }
.uw-fbar__overflow { display: contents; }

/* An open panel must win over the sidebar rules that give .accordion-collapse
   a display of its own; `hidden` remains the only thing that closes it. */
.uw-fbar .uw-pop--filter:not([hidden]) {
	display: block !important;
	height: auto !important;
	overflow-y: auto;
	visibility: visible !important;
}

/* ---------- mobile: the same DOM becomes a full-screen sheet ---------- */
@media (max-width: 991.98px) {
	.filters-products-wrap.uw-fbar-mode #filters-sidebar.uw-fbar {
		position: fixed;
		inset: 0;
		z-index: var(--z-modal, 1050);
		flex-direction: column;
		gap: 0;
		background: var(--white, #fff);
		overflow-y: auto;
		padding: 0 var(--space-m, 16px) 96px;
	}

	/* Closed by default; the "Filter & sort" button clears .filters-hidden. */
	.filters-products-wrap.uw-fbar-mode.filters-hidden #filters-sidebar.uw-fbar {
		display: none;
	}

	.uw-fbar .mob-header {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex !important;
		padding: var(--space-s, 12px) 0;
		background: var(--white, #fff);
		border-bottom: 1px solid var(--line, #e7e7e9);
	}

	/* Pills stack into accordion rows, panels open inline. */
	.uw-fbar #filtersAcc { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.uw-fbar .uw-fp-item { width: 100%; border-bottom: 1px solid var(--line, #e7e7e9); }
	.uw-fbar .uw-fp {
		width: 100%;
		justify-content: space-between;
		padding: 10px 0;
		background: none;
		border: 0;
		border-radius: 0;
		font-size: 1rem;
	}
	.uw-fbar .uw-pop--filter {
		position: static;
		width: 100%;
		max-width: none;
		min-width: 0;
		max-height: none;
		box-shadow: none;
		border: 0;
		padding: 0 0 8px;
	}
	.uw-fbar #results-header { width: 100%; order: -1; }
	.uw-fbar .applied-filters-wrap { order: 0; }

	/* Pinned footer actions already exist in the markup. */
	.uw-fbar-mode .filters-btn-wrap {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: calc(var(--z-modal, 1050) + 1);
		gap: var(--space-s, 12px);
		padding: var(--space-s, 12px) var(--space-m, 16px);
		background: var(--white, #fff);
		border-top: 1px solid var(--line, #e7e7e9);
	}
	.uw-fbar-mode.filters-hidden .filters-btn-wrap { display: none !important; }

	/* The mobile trigger: the repurposed "Hide filters" control. */
	.uw-fbar-mode .uw-fbar-open { display: inline-flex; }
}

@media (min-width: 992px) {
	.uw-fbar .mob-header,
	.uw-fbar-mode .filters-btn-wrap { display: none !important; }
	/* Desktop always shows the bar, whatever .filters-hidden says. */
	/* .filters-hidden is on the wrap until JS removes it on desktop, so the
	   bar must already be laid out correctly in the very first paint --
	   this said `flex` from before the bar became a block with an inner
	   grid, which mis-stacked the pills until hydration. */
	/* `display` alone was not enough: the sidebar's own closed state in
	   style.css is visibility/opacity plus a slide-out offset, so the bar
	   kept its box and painted nothing. The class only comes off inside the
	   filter engine, which waits for the first interaction (or load + 4s),
	   so the pills were an empty band until then. */
	.filters-products-wrap.uw-fbar-mode.filters-hidden #filters-sidebar.uw-fbar {
		display: block;
		visibility: visible;
		opacity: 1;
		margin-left: 0;
		transform: none;
	}
	.filters-products-wrap.uw-fbar-mode.filters-hidden .products-grid { width: 100%; }
}

/* ---------- mobile entry point (outside the sheet) ---------- */
.uw-fbar-mobile { gap: var(--space-s, 12px); }
.uw-fbar-mobile__count { font-size: .875rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 09 §27 trigger: the primary blue nav button (.uw-btn--nav) in every state,
   with a 20px funnel; "(n)" joins the label once a filter is applied. It used
   to start as the outline button and fill only once applied -- changed 30 Sep
   2026 on owner feedback: it is the main control on a mobile listing and has
   to read as primary from the start. Blue, never green -- it changes the
   view, it never buys. CTA type: 16px bold caps with --ls-caps. */
.uw-fbar-open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs, 8px);
	min-height: 44px;
	padding: 0 var(--space-l, 24px);
	font-family: var(--ff-body);
	font-size: var(--fs-cta, 1rem);
	font-weight: var(--fw-bold, 700);
	line-height: 1;
	letter-spacing: var(--ls-caps, .04em);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--white, #fff) !important;
	background: var(--dark-blue, #0b102a) !important;
	border: var(--border-emphasis, 2px) solid var(--dark-blue, #0b102a) !important;
	border-radius: var(--radius-pill, 999px);
	cursor: pointer;
	transition: background-color var(--motion-fast) var(--motion-ease),
	            color var(--motion-fast) var(--motion-ease);
}
.uw-fbar-open svg { flex: 0 0 auto; color: currentColor; }
.uw-fbar-open:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
	.uw-fbar-open:hover,
	.uw-fbar-open.is-applied:hover {
		color: var(--dark-blue, #0b102a) !important;
		background: var(--light-blue, #ced4f3) !important;
	}
}

/* The in-header "Hide filters" toggle is no longer rendered in bar mode
   (see wc-shop-filter.php); nothing to hide here. */


/* The grid lives on the sidebar's inner wrapper, which is the real parent of
   the form and the results header. Putting it on #filters-sidebar and
   promoting the wrapper with `display: contents` also worked, but the
   whitespace between the wrapper's children then became anonymous grid items
   and opened a phantom second row under the pills.

   Grid, not flex: the pill container wraps to several rows and a flex sibling
   would be pushed onto a row of its own. Two explicit columns keep count and
   sort beside the pills however many rows they take, and nothing shifts when
   a label or the sort value grows. */
.filters-products-wrap.uw-fbar-mode #filters-sidebar.uw-fbar > div:not(.filters-btn-wrap) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	column-gap: var(--space-l, 24px);
	row-gap: var(--space-s, 12px);
}

@media (max-width: 991.98px) {
	/* Column flex, not block: the sheet needs `order` so the sort control can
	   be the first row, as in the mock. */
	.filters-products-wrap.uw-fbar-mode #filters-sidebar.uw-fbar > div:not(.filters-btn-wrap) {
		display: flex;
		flex-direction: column;
	}
	.uw-fbar #results-header { order: -1; grid-column: auto; grid-row: auto; justify-self: stretch; width: 100%; }
	.uw-fbar #filtersAcc { order: 1; }
	.uw-fbar .applied-filters-wrap { order: 0; }
}

/* The sidebar rules give .filters a fixed min-height and padding sized for a
   full-height column; as a horizontal band that is 79px of dead space between
   the last pill row and the grid. */
.filters-products-wrap.uw-fbar-mode #filters-sidebar.uw-fbar {
	min-height: 0 !important;
	padding: 0 !important;
}
.filters-products-wrap.uw-fbar-mode #filters-sidebar.uw-fbar {
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}

/* .filters carries a flex-basis sized for its old life as a fixed-width
   column. The wrap is now a COLUMN flex container, where flex-basis is read
   along the block axis -- so that 281px width became 281px of height and left
   79px of dead space under the last pill row. */
.filters-products-wrap.uw-fbar-mode > #filters-sidebar.uw-fbar,
.filters-products-wrap.uw-fbar-mode > .results {
	flex: 0 0 auto;
}

/* ---------- applied-value chips ----------
   Markup is: [label + clear button] then a sibling chip container. The design
   wants one line: chips, then the reset link. `display: contents` on both
   sub-containers lifts the chips and the button into a single flex row, and
   `order` puts the reset link last without touching the markup. */
.uw-fbar .applied-filters-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs, 8px);
	padding-top: 0 !important;
	margin: 0;
}
.uw-fbar .applied-filters-wrap > div:first-child { display: contents !important; margin: 0 !important; }
.uw-fbar .applied-filters-wrap > div:first-child > span { display: none !important; }  /* "Your selection"; .d-block is !important */
.uw-fbar .applied-filters-wrap #clear_filter { order: 2; margin: 0; }
.uw-fbar .applied-filters { display: contents; }
.uw-fbar .applied-filters .selected-filter { order: 1; margin: 0; }

/* No chips, no row. */
.uw-fbar .applied-filters-wrap:not(:has(.selected-filter)) { display: none !important; }

@media (max-width: 991.98px) {
	/* Explicit order for every sheet row: title, sort, chips, facets.
	   Without an order the sticky title takes source order and lands under
	   the sort control. */
	.uw-fbar .mob-header { order: -2; }
	.uw-fbar #results-header { order: -1; padding-top: var(--space-s, 12px); }
	.uw-fbar .applied-filters-wrap { order: 0; padding-bottom: var(--space-s, 12px); }
	.uw-fbar #filtersAcc { order: 1; }
	/* The sort row reads "Sortieren nach [pill]" then the count, left to right. */
	.uw-fbar #results-header { justify-content: space-between; }
}

@media (max-width: 991.98px) {
	/* #results-header is sticky in the legacy layout. Inside the sheet that
	   offsets it 50px down and floats it over the first facet row. */
	.uw-fbar #results-header { position: static !important; top: auto !important; }
}

/* ---------- spacing under the category tab nav ----------
   Only archives that HAVE the tab row were affected: the pills sat flush
   against the tabs (measured 0px). Pages without it already spaced correctly
   off the intro paragraph, so this must not become a blanket margin on the
   bar. This stylesheet only loads on product category / shop archives, so the
   rule cannot reach brand or tag pages that share the component. */
.uw-tabnav { margin-bottom: var(--space-l, 24px); }

/* ---------- range sliders inside a panel ----------
   The slider was laid out for a full-width sidebar column; in a 280px popover
   the track filled the row and the thumbs read as two oversized circles. */
.uw-fbar .uw-pop--filter .range-slider-container {
	padding: 4px 2px 2px;
	margin-top: 8px;
}
.uw-fbar .uw-pop--filter .range-slider input[type="range"]::-webkit-slider-thumb {
	width: 16px;
	height: 16px;
}
.uw-fbar .uw-pop--filter .range-slider input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
}
.uw-fbar .uw-pop--filter .range-label { font-size: .75rem; }
.uw-fbar .uw-pop--filter .price-wrap-range input { font-size: .8125rem; }

/* A little more room so a price row and its count never collide. */
.uw-fbar .uw-pop--filter { min-width: 300px; }

/* ---------- panel padding ----------
   `#filtersAcc .accordion-body { padding: 0; padding-bottom: 30px }` gave
   stacked sidebar sections breathing room between them. A popover has no
   section below it, so that 30px was ~40px of dead space under the last row
   (measured 73px of slack below the last brand). The selector has to carry
   the id to outrank it. */
#filtersAcc .uw-pop--filter .accordion-body {
	padding: var(--space-2xs, 6px);
}

/* No "Plus / Moins" in the bar. The legacy sidebar collapsed long lists to 7
   rows (nth-child(n+8) { display: none } in style.css), but the row rule
   further down this file -- `#filters-sidebar.uw-fbar .uw-pop--filter
   .custom-check { display: flex }`, one id -- outranks that, on desktop and in
   the mobile sheet alike. Every option is therefore always on screen (the
   panel scrolls; long lists also get a search box), and the button toggled
   nothing: "Plus" under a list that was already complete. */
#filtersAcc .uw-pop--filter .show-more-less-btn {
	display: none !important;
}

/* The brands facet nests its own container inside the body; it inherits the
   same rule and must not add a second layer of padding. */
#filtersAcc .uw-pop--filter #brands-filter-container {
	padding: 0;
}

/* ---------- no sidebar gutter ----------
   The global .products-grid rule adds margin-left: 20px at lg+ and 50px at
   1640px+ to clear the left filter column. With the filters on a bar above
   the grid there is no column to clear, so the grid was sitting indented from
   the page edge while the pills above it were not. Same reasoning as the V2
   template, which zeroes it for the same reason. */
.filters-products-wrap.uw-fbar-mode .products-grid {
	margin-left: 0;
}

/* ==========================================================================
   Mobile sheet — match the redesign
   The sheet reuses the desktop markup, so everything here is a restyle of
   controls that already exist: the header, the sort pill, the facet pills and
   the Clear/View bar.
   ========================================================================== */
@media (max-width: 991.98px) {

	/* --- header: title case H2 + a plain cross, not a filled circle --- */
	.uw-fbar .mob-header {
		padding: var(--space-2xs, 6px) 0 var(--space-2xs, 6px) 0;
	}
	.uw-fbar .mob-header.d-flex.d-lg-none.align-items-center.justify-content-between span.text-bold,
	.uw-fbar .mob-header .text-bold {
		text-transform: none;
		font-family: var(--ff-heading);
		font-size: 1.125rem;
		font-weight: var(--fw-semibold, 600);
		color: var(--dark-blue);
		letter-spacing: 0;
	}
	.uw-fbar .close-filters {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		background: none;
		border: 0;
		color: var(--dark-blue);
		cursor: pointer;
	}

	/* --- sort becomes the first accordion row, per the mock --- */
	.uw-fbar .sort-wrap {
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		border-bottom: 1px solid var(--line);
	}
	.uw-fbar .sort-wrap > span:first-child { display: none !important; }  /* "Sortieren nach" — folded into the trigger */

	.uw-fbar #sort-button {
		width: 100%;
		justify-content: space-between;
		min-height: 44px;
		padding: 10px 0;
		background: none;
		border: 0;
		border-radius: 0;
		font-size: 1rem;
		font-weight: var(--fw-bold, 700);
		color: var(--dark-blue);
	}
	.uw-fbar #sort-button::before { content: attr(data-sort-label); font-weight: var(--fw-bold, 700); }
	.uw-fbar #sort-button .selected-text { font-weight: var(--fw-medium, 500); margin-right: auto; }

	/* The popover becomes an inline panel; `hidden` still opens/closes it. */
	.uw-fbar #sort-dropdown {
		position: static;
		width: 100%;
		max-width: none;
		min-width: 0;
		max-height: none;
		margin: 0 0 8px;
		padding: 0;
		border: 0;
		box-shadow: none;
		background: none;
	}
	.uw-fbar #sort-dropdown .uw-pop__item { min-height: 36px; font-size: .875rem; padding: 4px 8px; }

	/* --- footer: one full-width primary, reset as a link beneath it --- */
	.uw-fbar-mode .filters-btn-wrap {
		flex-direction: column-reverse;   /* markup order is Clear then View */
		align-items: center;
		gap: var(--space-xs, 8px);
	}
	.uw-fbar-mode .filters-btn-wrap .apply-filters-btn {
		width: 100%;
		min-height: 44px;
		border-radius: var(--radius-pill, 999px);
	}
	.uw-fbar-mode .filters-btn-wrap .clear-filters-btn {
		min-height: 24px;
		padding: 0;
		background: none;
		border: 0;
		color: var(--medium-blue);
		font-size: .875rem;
		font-weight: var(--fw-medium, 500);
		text-decoration: underline;
		text-underline-offset: .2em;
		width: auto;
	}
}

@media (max-width: 991.98px) {
	/* The desktop dead-space fix zeroes padding with !important; the sheet
	   needs its own gutter back, at the same weight. */
	.filters-products-wrap.uw-fbar-mode #filters-sidebar.uw-fbar {
		/* Bottom inset clears the pinned action bar (measured 122px) plus a
		   margin, so the last filter row can always be scrolled clear of it. */
		padding: 0 var(--space-m, 16px) 152px !important;
	}

	/* The desktop grid sets align-items:start, which stopped the sheet header
	   stretching -- it sized to its own content (147px) so its underline
	   stopped mid-row. */
	.filters-products-wrap.uw-fbar-mode #filters-sidebar.uw-fbar > div:not(.filters-btn-wrap) {
		align-items: stretch;
	}

	/* The results header is a row on desktop. In the sheet it holds only the
	   sort control: stack it, and drop the product count -- the pinned
	   primary action already says "Show 21 products". */
	.uw-fbar #results-header {
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap;
		gap: 0;
	}
	.uw-fbar #results-header .products-amount { display: none !important; }

	/* The form carries a 15px inset for the old sidebar; the sheet's own
	   gutter positions everything now. */
	.uw-fbar #filtersAcc { padding-left: 0; padding-right: 0; }

	.uw-fbar-mode .filters-btn-wrap .clear-filters-btn { text-transform: none; letter-spacing: 0; }
}

@media (max-width: 991.98px) {
	/* The action bar is sticky in the legacy sidebar, which leaves it floating
	   mid-sheet when the content is shorter than the screen. Pin it. */
	.uw-fbar-mode .filters-btn-wrap {
		position: fixed !important;
		left: 0;
		right: 0;
		bottom: 0;
	}
}

@media (max-width: 991.98px) {
	/* .uw-pill.is-applied paints white text on a dark-blue fill. In the sheet
	   the pill is a plain accordion row with no fill, so that white text was
	   invisible -- the heading of the one group the visitor had actually
	   filtered on was the only one that disappeared. */
	.uw-fbar .uw-fp.is-applied,
	.uw-fbar .uw-fp[aria-pressed="true"] {
		color: var(--dark-blue);
		background: none;
		border-color: transparent;
	}
}

@media (max-width: 991.98px) {
	/* The desktop rules force height:auto and overflow:visible to kill dead
	   space in the bar. Applied to the sheet they made it size to its content
	   instead of the viewport and spill the page behind it -- the overflow
	   and the product tiles showing under the footer. */
	.filters-products-wrap.uw-fbar-mode #filters-sidebar.uw-fbar {
		height: 100% !important;
		max-height: 100% !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
	}

	/* Sort options as a radio group, per the mock. */
	.uw-fbar #sort-dropdown { border-radius: 0; }
	.uw-fbar #sort-dropdown .uw-pop__item {
		position: relative;
		padding-left: 30px;
		border-radius: 8px;
	}
	.uw-fbar #sort-dropdown .uw-pop__item::before {
		content: "";
		position: absolute;
		left: 4px;
		top: 50%;
		transform: translateY(-50%);
		width: 18px;
		height: 18px;
		border: 2px solid var(--line, #e7e7e9);
		border-radius: 50%;
		background: var(--white);
		box-sizing: border-box;
	}
	.uw-fbar #sort-dropdown .uw-pop__item.is-selected::before {
		border-color: var(--dark-blue);
		border-width: 5px;
	}
	.uw-fbar #sort-dropdown .uw-pop__item.is-selected { font-weight: var(--fw-medium, 500); }
}

@media (max-width: 991.98px) {
	/* One rhythm for every row in the sheet.
	   A filter row is 44px control + 9px + 1px rule = 54px, stacked with no
	   gap. The sort row was 45px and then 27px of dead space: 15px of
	   #results-header padding plus the 12px row-gap the desktop grid sets on
	   the shared wrapper. Match it to the others exactly. */
	.filters-products-wrap.uw-fbar-mode #filters-sidebar.uw-fbar > div:not(.filters-btn-wrap) {
		row-gap: 0;
	}
	.uw-fbar #results-header { padding-top: 0 !important; padding-bottom: 0 !important; }
	.uw-fbar .sort-wrap { padding-bottom: 9px; }
}

@media (max-width: 991.98px) {
	/* The legacy sidebar carries a transform for its slide-in. Even resolved
	   to the identity matrix, ANY transform makes the element a containing
	   block for position:fixed descendants -- so the pinned action bar was
	   anchored to the sheet's scrolled content, not the viewport, and drifted
	   up by exactly the scroll offset, landing mid-list. Bar mode shows and
	   hides the sheet with .filters-hidden, so the transform has no job. */
	.filters-products-wrap.uw-fbar-mode #filters-sidebar.uw-fbar {
		transform: none !important;
	}
}

/* ==========================================================================
   Category Filters Final -- aligned to the uWeed Design System
   (doc 09 §10 filter + sort pill, §4 checkbox rows, §27 mobile filter panel).
   Loaded after style.css, so these override the legacy sidebar rules above.
   Hover is gated behind (hover:hover) and (pointer:fine) throughout.
   ========================================================================== */

/* ---------- pill row: no hairline under the pills ---------- */
.uw-fbar #filtersAcc .uw-fp-item,
.uw-fbar #filtersAcc .uw-fp-item.accordion-item {
	border: 0;
	background: transparent;
	border-radius: 0;
}

/* ---------- pill states (09 §10) ----------
   rest     white, --line border, --dark-blue label
   hover    --light-blue fill + border, --dark-blue label (rest AND applied:
            filled controls invert to their tint)
   open     --light-blue fill, --medium-blue border
   applied  --dark-blue fill, white label, count in the label "Marke (2)"
   no opts  --light-gray, --line border, --medium-gray label */
.uw-fbar .uw-fp .uw-pill__chevron { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
	.uw-fbar .uw-fp:not(:disabled):hover,
	.uw-fbar .uw-fp.is-applied:not(:disabled):hover {
		color: var(--dark-blue);
		background: var(--light-blue);
		border-color: var(--light-blue);
	}
	.uw-fbar .uw-fp[aria-expanded="true"]:hover {
		border-color: var(--medium-blue);
	}
}

@media (min-width: 992px) {
	/* ---------- the filter row: pills · count (centred) · sort ----------
	   The pill column is content-sized up to what leaves room for the count and
	   the 210px sort slot, and wraps inside that. The count takes the free space
	   and centres in it; nothing moves when a label or the sort value grows. */
	.filters-products-wrap.uw-fbar-mode #filters-sidebar.uw-fbar > div:not(.filters-btn-wrap) {
		grid-template-columns: fit-content(calc(100% - 22rem)) minmax(0, 1fr);
		column-gap: var(--space-l);
		row-gap: 0;
	}
	.uw-fbar #results-header {
		display: flex !important;
		align-items: center;
		justify-self: stretch;
		gap: var(--space-l);
		min-height: 44px;
		padding: 0 !important;
	}
	.uw-fbar #results-header .products-amount {
		flex: 1 1 auto;
		margin: 0 !important;
		text-align: center;
	}
	.uw-fbar #results-header .sort-wrap {
		flex: 0 0 auto;
		min-width: 210px;
		justify-content: flex-end;
	}
}

/* Result count: information you read -- 14px / 400, --dark-gray. */
.uw-fbar #product_count_placeholder,
.uw-fbar-mobile__count {
	margin: 0 !important;
	font-family: var(--ff-body);
	font-size: var(--fs-small);
	font-weight: var(--fw-regular);
	color: var(--dark-gray);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---------- sort control: an action-link button, not a pill ---------- */
.uw-fbar .uw-sort {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	min-height: 44px;
	padding: 0 var(--space-2xs);
	font-family: var(--ff-body);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	line-height: 1;
	color: var(--medium-blue);
	white-space: nowrap;
	background: none;
	border: 0;
	border-radius: var(--radius-checkbox);
	cursor: pointer;
	text-underline-offset: .2em;
}
.uw-fbar .sort-wrap .uw-sort span { color: inherit; }
.uw-fbar .btn-sort .uw-sort__icon { flex: 0 0 auto; margin: 0 !important; }
.uw-fbar .btn-sort .uw-sort__chevron { display: none; }
@media (hover: hover) and (pointer: fine) {
	.uw-fbar .uw-sort:hover .uw-sort__label { text-decoration: underline; }
}
.uw-fbar .uw-sort:focus-visible {
	outline: var(--border-emphasis) solid var(--medium-blue);
	outline-offset: 2px;
}
/* Its listbox hangs from the right edge of the sort slot. */
.uw-fbar .sort-wrap #sort-dropdown {
	top: calc(100% + var(--space-xs));
	right: 0;
	left: auto;
}

/* ---------- V2 category template: the same count + sort as the bar ---------- */
/* archive-product-v2.php renders v1's markup (uweed_v2_render_count_sort), but
   everything above is scoped to .uw-fbar, which the V2 template does not have.
   These restate the same values for .v2-count-row. They live here rather than
   in _shop-listing.scss so the two stay side by side. The old green-number
   rules there (.v2-product-count strong, .v2-sort-select) no longer match. */
.v2-count-row .v2-product-count {
	font-family: var(--ff-body);
	font-size: var(--fs-small);
	font-weight: var(--fw-regular);
	color: var(--dark-gray);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.v2-count-row .v2-sort-dropdown { position: relative; }
.v2-count-row .uw-sort {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	min-height: 44px;
	padding: 0 var(--space-2xs);
	font-family: var(--ff-body);
	/* 16px, not --fs-small: v1's button ends up at --font-size-base through
	   an id rule (#sort-button) in style.css, and this has to match it. */
	font-size: var(--font-size-base);
	font-weight: var(--fw-medium);
	line-height: 1;
	color: var(--medium-blue);
	white-space: nowrap;
	background: none;
	border: 0;
	border-radius: var(--radius-checkbox);
	cursor: pointer;
	text-underline-offset: .2em;
}
.v2-count-row .uw-sort span { color: inherit; }
.v2-count-row .uw-sort__icon { flex: 0 0 auto; margin: 0 !important; }
@media (hover: hover) and (pointer: fine) {
	.v2-count-row .uw-sort:hover .uw-sort__label { text-decoration: underline; }
}
.v2-count-row .uw-sort:focus-visible {
	outline: var(--border-emphasis) solid var(--medium-blue);
	outline-offset: 2px;
}
.v2-count-row .v2-sort-pop {
	top: calc(100% + var(--space-xs));
	right: 0;
	left: auto;
	background: var(--white);
	border: var(--border-hairline) solid var(--line) !important;
	border-radius: var(--radius-card) !important;
	box-shadow: var(--shadow-lg);
}
/* Narrow phones: the count and a long "Sortieren: Empfohlen" must share one
   row, so the prefix goes -- the icon already says what the control is. */
@media (max-width: 575.98px) {
	.v2-count-row .uw-sort__prefix { display: none; }
}

/* ---------- the panel: rounded on every corner, blue not green ---------- */
.uw-fbar .uw-pop.uw-pop--filter,
.uw-fbar .sort-wrap #sort-dropdown {
	background: var(--white);
	border: var(--border-hairline) solid var(--line) !important;
	border-radius: var(--radius-card) !important;
	box-shadow: var(--shadow-lg);
}
.uw-fbar .uw-pop.uw-pop--filter { top: calc(100% + var(--space-xs)); }

/* The flip, restated at this file's weight. js/uw-pop.js flips a panel that
   does not fit below -- in practice the long searchable lists (Marken, Kanton)
   -- and the generic .uw-pop.uw-pop--above (0,2,0) loses to the `top` above
   (0,3,0). Both edges then apply and the panel collapses to a 10px sliver
   under its pill: the exact failure _pop.scss warns about. */
.uw-fbar .uw-pop.uw-pop--filter.uw-pop--above {
	top: auto;
	bottom: calc(100% + var(--space-xs));
}

/* Facet rows are §4 checkboxes: box left, count IN the label "Alpinols (8)",
   32px rows at 14px, --radius-inner, hover --light-blue. No bubble, no green. */
#filters-sidebar.uw-fbar .uw-pop--filter .custom-check {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	min-height: 32px;
	margin: 0;
	padding: 0 var(--space-xs) 0 34px;
	border-radius: var(--radius-inner);
	font-family: var(--ff-body);
	font-size: var(--fs-small);
	font-weight: var(--fw-regular);
	line-height: var(--lh-small);
	color: var(--dark-gray);
	background: transparent;
}
#filters-sidebar.uw-fbar .uw-pop--filter .custom-check .filter-count,
#filters-sidebar.uw-fbar .uw-pop--filter .custom-check:has(input:checked) .filter-count {
	order: 1;
	margin-left: .25em;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	background: none;
	border-radius: 0;
}
#filters-sidebar.uw-fbar .uw-pop--filter .custom-check .checkmark {
	left: var(--space-xs);
	width: 18px;
	height: 18px;
	margin: 0;
	background: var(--white);
	border: var(--border-hairline) solid var(--medium-gray);
	border-radius: var(--radius-checkbox);
}
#filters-sidebar.uw-fbar .uw-pop--filter .custom-check input:checked ~ .checkmark {
	background: var(--dark-blue);
	border-color: var(--dark-blue);
}
#filters-sidebar.uw-fbar .uw-pop--filter .custom-check .checkmark::after {
	left: 5px;
	top: 1px;
	width: 6px;
	height: 11px;
}
@media (hover: hover) and (pointer: fine) {
	#filters-sidebar.uw-fbar .uw-pop--filter .custom-check:hover { background: var(--light-blue); }
	#filters-sidebar.uw-fbar .uw-pop--filter .custom-check:hover .checkmark { border-color: var(--dark-blue); }
}

/* Range sliders in a panel: the fill and thumbs are --dark-blue. */
#filters-sidebar.uw-fbar .range-fill,
#filters-sidebar.uw-fbar .thc-slider .range-fill {
	background: var(--dark-blue);
}
#filters-sidebar.uw-fbar .range-input::-webkit-slider-thumb,
#filters-sidebar.uw-fbar .thc-slider .range-input::-webkit-slider-thumb { background: var(--dark-blue); }
#filters-sidebar.uw-fbar .range-input::-moz-range-thumb,
#filters-sidebar.uw-fbar .thc-slider .range-input::-moz-range-thumb { background: var(--dark-blue); }
@media (hover: hover) and (pointer: fine) {
	#filters-sidebar.uw-fbar .range-input::-webkit-slider-thumb:hover { background: var(--medium-blue); }
	#filters-sidebar.uw-fbar .range-input::-moz-range-thumb:hover { background: var(--medium-blue); }
}

/* ---------- applied chips row ----------
   Each chip is .uw-badge--attribute: --light-gray / --dark-gray, 13px / 500,
   label then a 12px x that goes --medium-red on hover. "Reset all filters"
   is an action link at 14px. Sits --space-s under the pill row. */
.uw-fbar .applied-filters-wrap {
	gap: var(--space-xs) var(--space-s);
	margin-top: var(--space-s) !important;
}
.uw-fbar .applied-filters .selected-filter {
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: var(--space-2xs);
	padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-s);
	font-family: var(--ff-body);
	font-size: var(--fs-meta);
	font-weight: var(--fw-medium);
	line-height: 1;
	color: var(--dark-gray);
	background: var(--light-gray);
	border-radius: var(--radius-pill);
}
.uw-fbar .applied-filters .selected-filter a {
	display: grid !important;
	place-items: center;
	width: 20px;
	height: 20px;
	margin: 0 !important;
	color: var(--dark-gray);
	border-radius: 50%;
	transition: background-color var(--motion-fast) var(--motion-ease),
	            color var(--motion-fast) var(--motion-ease);
}
.uw-fbar .applied-filters .selected-filter svg { width: 12px; height: 12px; }
@media (hover: hover) and (pointer: fine) {
	.uw-fbar .applied-filters .selected-filter a:hover {
		color: var(--white);
		background: var(--medium-red);
	}
}
.uw-fbar .applied-filters-wrap #clear_filter,
.uw-fbar-mode .filters-btn-wrap .clear-filters-btn {
	padding: 0;
	font-family: var(--ff-body);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	color: var(--medium-blue);
	background: none;
	border: 0;
	cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	.uw-fbar .applied-filters-wrap #clear_filter:hover,
	.uw-fbar-mode .filters-btn-wrap .clear-filters-btn:hover {
		text-decoration: underline;
		text-underline-offset: .15em;
	}
}

/* ---------- mobile: the §27 filter & sort dialog ---------- */
@media (max-width: 991.98px) {
	/* Header: H2 at --fs-h6 + a 44px close flush right, so its centre sits on
	   the chevrons' axis. */
	.uw-fbar .mob-header .text-bold {
		font-size: var(--fs-h6) !important;
		font-weight: var(--fw-semibold) !important;
	}
	.uw-fbar .close-filters { margin-right: -10px; }
	@media (hover: hover) and (pointer: fine) {
		.uw-fbar .close-filters:hover { color: var(--medium-blue); }
	}

	/* Rows: 44px, --dark-blue heading at rest (grey was 2.8:1), 16px, bold
	   when open; the count sits in the heading. Explicit separators. */
	.uw-fbar .uw-fp,
	.uw-fbar #sort-button {
		min-height: 44px;
		padding: 10px 0 !important;
		font-size: var(--fs-body) !important;
		font-weight: var(--fw-semibold) !important;
		color: var(--dark-blue) !important;
		background: none !important;
		border: 0 !important;
		border-radius: 0 !important;
	}
	.uw-fbar .uw-fp[aria-expanded="true"],
	.uw-fbar #sort-button[aria-expanded="true"] { font-weight: var(--fw-bold) !important; }
	.uw-fbar .uw-fp .uw-pill__chevron,
	.uw-fbar #sort-button .uw-sort__chevron { color: var(--dark-blue); }

	/* Sort is the FIRST row, heading and value on one line: "Sortieren: Empfohlen". */
	.uw-fbar #sort-button { display: flex !important; width: 100%; justify-content: space-between; }
	.uw-fbar #sort-button::before { content: none !important; }
	.uw-fbar #sort-button .uw-sort__icon { display: none; }
	.uw-fbar #sort-button .uw-sort__label { margin-right: auto; }
	.uw-fbar #sort-button .uw-sort__prefix,
	.uw-fbar #sort-button .selected-text { font-weight: inherit !important; }
	.uw-fbar .btn-sort .uw-sort__chevron { display: block; flex: 0 0 auto; margin: 0 !important; }
	.uw-fbar .uw-sort:hover .uw-sort__label { text-decoration: none; }
	.uw-fbar .sort-wrap #sort-dropdown { top: auto; border: 0 !important; border-radius: 0 !important; box-shadow: none; }

	/* Facet rows and panels inline, 32px checkbox rows. */
	.uw-fbar .uw-pop.uw-pop--filter {
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none;
		margin-top: -6px;
		padding: 0 0 6px;
	}
	#filters-sidebar.uw-fbar .uw-pop--filter .custom-check { padding-left: 26px; }
	#filters-sidebar.uw-fbar .uw-pop--filter .custom-check .checkmark { left: 0; }

	/* Footer: one full-width --nav button "N Produkte anzeigen" + the reset
	   action link beneath it. Blue: it shows products, it never buys. */
	.uw-fbar-mode .filters-btn-wrap .apply-filters-btn {
		font-family: var(--ff-body);
		font-size: var(--fs-cta);
		font-weight: var(--fw-bold);
		letter-spacing: var(--ls-caps);
		text-transform: uppercase;
		color: var(--white);
		background: var(--dark-blue);
		border: var(--border-emphasis) solid var(--dark-blue);
	}
	.uw-fbar-mode .filters-btn-wrap .clear-filters-btn { min-height: 32px; }

	/* The mobile row above the grid: trigger left, count right. */
	.uw-fbar-mobile { gap: var(--space-xs); padding-bottom: var(--space-s) !important; }
}

/* ---------- mobile: page-level chips + sheet rows ---------- */
@media (max-width: 991.98px) {
	/* Chips scroll in one line; "Reset all" stays pinned outside the scroller. */
	.uw-fbar-mobile__chips {
		display: flex;
		align-items: center;
		gap: var(--space-s);
		margin-bottom: var(--space-m);
	}
	.uw-fbar-mobile__chips[hidden] { display: none; }
	.uw-fbar-mobile__chiplist {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	.uw-fbar-mobile__chiplist::-webkit-scrollbar { display: none; }
	.uw-fbar-mobile__chiplist .selected-filter {
		flex: 0 0 auto;
		display: inline-flex;
		flex-direction: row-reverse;
		align-items: center;
		gap: var(--space-2xs);
		margin: 0;
		padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-s);
		font-family: var(--ff-body);
		font-size: var(--fs-meta);
		font-weight: var(--fw-medium);
		line-height: 1;
		white-space: nowrap;
		color: var(--dark-gray);
		background: var(--light-gray);
		border-radius: var(--radius-pill);
	}
	.uw-fbar-mobile__chiplist .selected-filter a {
		display: grid !important;
		place-items: center;
		width: 20px;
		height: 20px;
		margin: 0 !important;
		color: var(--dark-gray);
		border-radius: 50%;
	}
	.uw-fbar-mobile__chiplist .selected-filter svg { width: 12px; height: 12px; }
	.uw-fbar-mobile__reset {
		flex: 0 0 auto;
		min-height: 32px;
		padding: 0;
		font-family: var(--ff-body);
		font-size: var(--fs-small);
		font-weight: var(--fw-medium);
		color: var(--medium-blue);
		background: none;
		border: 0;
		cursor: pointer;
	}

	/* Inside the sheet the chips row is not shown -- the ticked boxes and the
	   "(n)" in each heading carry the state, and the footer holds the reset. */
	.uw-fbar .applied-filters-wrap { display: none !important; }

	/* Explicit separator on every row (sort + each facet), none after the last. */
	.uw-fbar #results-header { border-bottom: var(--border-hairline) solid var(--line); }
	.uw-fbar .sort-wrap { border-bottom: 0 !important; padding-bottom: 0 !important; }
	.uw-fbar #filtersAcc .uw-fp-item { border-bottom: var(--border-hairline) solid var(--line); }
	.uw-fbar #filtersAcc .uw-fp-item:last-of-type { border-bottom: 0; }
}

/* Chips size to their label. The legacy chip carries max-width:100% with
   overflow:hidden, which clipped the START of a long label once the remove
   button moved to the end ("rba di Berna"). */
.uw-fbar .applied-filters .selected-filter,
.uw-fbar-mobile__chiplist .selected-filter {
	max-width: none;
	overflow: visible;
	text-overflow: clip;
}

@media (max-width: 991.98px) {
	/* Sort options in the sheet are a radio group: the radio carries the
	   choice, so the listbox check mark is not drawn as well. */
	.uw-fbar #sort-dropdown .uw-pop__item.is-selected::after,
	.uw-fbar #sort-dropdown .uw-pop__item[aria-selected="true"]::after {
		content: none;
	}
}

/* =========================================================================
   STICKY FILTER / SORT TOOLBAR
   Approved 24 Sep 2026, replacing the sticky category tab row: what has to
   stay reachable while a visitor works through a listing is the filters, the
   sort control and the result count -- not the sibling-category links.

   TWO ELEMENTS, ONE BEHAVIOUR. The same DOM is two different things either
   side of this file's 992px breakpoint, so the toolbar is a different element
   on each side and there is no width at which both are sticky:

     >= 992px   #filters-sidebar.uw-fbar  -- the real bar: pills, count, sort.
     <  992px   .uw-fbar-mobile           -- count + "Filtern & sortieren".
                #filters-sidebar is the full-screen sheet here, and a sheet
                that is already `position: fixed` must never be handed sticky
                on top of it.

   THE CATEGORY LINKS ARE NOT STICKY, on either side. Stacked under the header
   they came to 68px + 56px + 72px = 196px of permanent chrome, most of a
   phone's viewport and a fifth of a laptop's. The brief allows dropping them
   rather than shrinking the controls to fit, so they scroll away.

   WHY THIS LIVES HERE AND NOT IN THE SCSS. `.filters-products-wrap.uw-fbar-mode
   #filters-sidebar.uw-fbar` above declares `position: static`, and any
   selector that reaches the same element ties with it on specificity (one id,
   three classes) -- so the winner is decided by load order, and this file is
   enqueued after style.css. A rule in the SCSS silently lost and the bar just
   scrolled away. The bar's layout is this file's job; so is its position.

   WHY STICKY RESOLVES AT ALL: styles/critical.css had to move html/body from
   `overflow-x: hidden` to `clip` first -- see the note there. `hidden` makes
   an element a scroll container, and sticky was inert site-wide because of it.

   COORDINATION WITH THE HEADER: js/header.js owns the one scroll-direction
   watcher and publishes --uw-sticky-top (the header's visible bottom edge,
   admin bar included) and .uw-header-off on <html>, plus .is-stuck on the
   toolbar itself. Nothing here re-derives any of it. `top` is transitioned
   rather than faked with a transform, so the bar tracks the header edge to
   edge for the whole slide instead of arriving early and opening a gap.

   THE SHADOW APPEARS ONLY WHILE STUCK. At rest the bar is part of the page,
   and a shadow there draws a line across the listing that the design does not
   have. There is no border, for the same reason.

   THE WHITE RUNS THE FULL VIEWPORT WIDTH, the controls do not. The bar sits
   inside .container, so its own box stops at the container edge and cards
   scrolled up beside it stayed visible either side -- the surface read as a
   panel floating over the grid rather than as a bar across the page. The
   full-bleed comes from an ::before pinned to the bar and stretched to 100vw
   from the bar's own centre (.container is margin-auto, so the bar's centre
   IS the viewport's), sitting at z-index -1 inside the stacking context the
   bar already creates. The controls keep the container's alignment with the
   product grid, which is the point of doing it this way rather than with
   negative margins -- those would widen the box the pills are measured
   against and re-flow them.

   100vw is wider than the content box when a classic scrollbar is present.
   That cannot overflow: styles/critical.css clips html and body on the x
   axis, which is the same declaration this whole feature depends on.
   ========================================================================= */

@media (min-width: 992px) {
	.filters-products-wrap.uw-fbar-mode > #filters-sidebar.uw-fbar {
		position: sticky;
		top: var(--uw-sticky-top, 0px);
		z-index: var(--z-sticky, 1020);
		background: var(--white, #fff);
		transition: top var(--uw-header-motion, 0.3s ease-in-out);

		/* 56px with the content centred in it. The pills keep their own 44px
		   tap target -- this is the row they sit in, not a cap on them.
		   min-height, not height: applied-value chips wrap onto a second line
		   inside this bar and the brief asks for the controls to stay usable
		   rather than be clipped to hold the number.

		   !important because the dead-space fix further up this file zeroes
		   min-height at the same weight to kill the legacy sidebar's
		   full-column sizing. Without it this reads as "min-height simply
		   does nothing here". */
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 56px !important;
	}

	/* The pills row and the count/sort row are laid out on the element itself
	   further up this file; as flex children they have to fill it. */
	.filters-products-wrap.uw-fbar-mode > #filters-sidebar.uw-fbar > div {
		width: 100%;
	}

	.filters-products-wrap.uw-fbar-mode > #filters-sidebar.uw-fbar::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(50% - 50vw);
		width: 100vw;
		z-index: -1;
		background: var(--white, #fff);
		transition: box-shadow var(--motion-fast, 150ms) var(--motion-ease, ease);
	}

	.filters-products-wrap.uw-fbar-mode > #filters-sidebar.uw-fbar.is-stuck::before {
		box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
	}
}

@media (max-width: 991.98px) {
	/* 48px, with the button still a 44px target inside it. The 12px that used
	   to sit under the row as padding becomes margin, so it is outside the
	   sticky box -- padding there would make the white band 60px and put the
	   shadow 12px below the controls. `.pb-4` is a Bootstrap utility and
	   carries !important, hence the same here. */
	.uw-fbar-mobile {
		position: sticky;
		top: var(--uw-sticky-top, 0px);
		z-index: var(--z-sticky, 1020);
		background: var(--white, #fff);

		/* 56px, not the 48px first specified: at 48 the 44px button had 2px
		   of air above and below it and read as touching both edges. 56 gives
		   it 6px either side while leaving the target at 44. */
		min-height: 56px;
		align-items: center;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		margin-bottom: var(--space-s, 12px);

		transition: top var(--uw-header-motion, 0.3s ease-in-out);
	}

	.uw-fbar-mobile::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(50% - 50vw);
		width: 100vw;
		z-index: -1;
		background: var(--white, #fff);
		transition: box-shadow var(--motion-fast, 150ms) var(--motion-ease, ease);
	}

	.uw-fbar-mobile .uw-fbar-open {
		min-height: 44px;
	}

	/* The result count. Server-rendered (see wc-shop-filter.php) so it is
	   right on first paint, then kept in step by syncMobileFilterCount(). */
	.uw-fbar-mobile__count {
		font-size: .875rem;
		color: var(--dark-gray, #3d3d3d);
		white-space: nowrap;
	}

	.uw-fbar-mobile.is-stuck::before {
		box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
	}

	/* The row STAYS when the header hides, same as desktop (changed 25 Sep
	   2026 -- it used to leave with the header). Nothing to do for that: the
	   header publishes --uw-sticky-top as 0 while it is off, and the `top`
	   transition above slides the row up into the space it leaves. */
}

/* The 1px marker js/header.js puts in front of whichever toolbar is live, to
   read the stuck state without a getBoundingClientRect on every scroll frame.
   Absolutely positioned with no offsets, so it sits at its static position and
   costs the flow nothing. */
.uw-sticky-sentinel {
	position: absolute;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

/* Facets the server already knows the engine will retire (inc/filter-bar.php,
   uweed_filter_retired_facets): hidden from first paint so the bar does not
   lose a pill row on hydration. applyUniformFacetHiding() drops the class from
   anything it keeps. */
.uw-fp-item.uweed-facet-uniform-ssr {
	display: none;
}