/**
 * Predictive search overlay.
 *
 * Sizing is deliberately viewport-aware rather than vh-based: on a phone the
 * on-screen keyboard shrinks the visual viewport without changing 100vh, so a
 * vh-sized panel puts its results underneath the keyboard. The script sets
 * --sxs-vh from visualViewport and this falls back to 100dvh, then 100vh, for
 * browsers that have neither.
 *
 * Nothing here is on the critical path: the overlay is inert until opened, so
 * none of it affects LCP, and it is fixed-position and created on demand, so it
 * cannot shift layout.
 */

:root {
	/*
	 * Taken from the theme's own tokens, with fallbacks so this stylesheet
	 * still renders correctly on its own. The site is light-themed and has
	 * no dark mode, so neither does this: an overlay that follows the
	 * operating system's preference would render a dark panel over a cream
	 * page for every visitor whose laptop is set to dark.
	 */
	--sxs-ink: var( --ink, #1c1a17 );
	--sxs-muted: var( --muted, #6f685c );
	--sxs-faint: #98917f;
	--sxs-rule: var( --line, #e4dccd );
	--sxs-ground: #fff;
	--sxs-panel: var( --pearl, #f2ece1 );
	--sxs-accent: var( --pounamu, #21503d );
	--sxs-gold: var( --gold, #c2a15b );
	--sxs-mark: var( --gold-soft, #e9dcbe );
	--sxs-out: var( --garnet, #8e2b3a );
	--sxs-radius: 4px;
}

html.sxs-open,
html.sxs-open body {
	overflow: hidden;
}

.sxs {
	position: fixed;
	inset: 0;
	z-index: 100000;
}

.sxs[hidden] {
	display: none;
}

.sxs__scrim {
	position: absolute;
	inset: 0;
	background: rgba( 28, 26, 23, 0.46 );
	-webkit-backdrop-filter: blur( 2px );
	backdrop-filter: blur( 2px );
}

.sxs__panel {
	position: relative;
	margin: 0 auto;
	max-width: 760px;
	background: var( --sxs-ground );
	color: var( --sxs-ink );
	display: flex;
	flex-direction: column;
	max-height: var( --sxs-vh, 100dvh );
	box-shadow: 0 18px 48px rgba( 28, 26, 23, 0.22 );
}

@supports not ( height: 100dvh ) {
	.sxs__panel {
		max-height: var( --sxs-vh, 100vh );
	}
}

/* ------------------------------------------------------------------- bar */

.sxs__bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 0.9rem;
	border-bottom: 1px solid var( --sxs-rule );
	background: var( --sxs-ground );
	flex: 0 0 auto;
}

.sxs__icon {
	display: grid;
	place-items: center;
	color: var( --sxs-muted );
	flex: 0 0 auto;
}

.sxs__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 1.05rem;
	line-height: 1.4;
	padding: 0.55rem 0.2rem;
	color: inherit;
	/* 16px minimum stops iOS zooming the page on focus. */
	font-size: max( 16px, 1.05rem );
}

.sxs__input:focus {
	outline: none;
}

.sxs__input::-webkit-search-cancel-button {
	display: none;
}

.sxs__clear,
.sxs__close {
	flex: 0 0 auto;
	border: 0;
	background: none;
	font: inherit;
	color: var( --sxs-muted );
	cursor: pointer;
	border-radius: var( --sxs-radius );
	/* 44px minimum tap target. */
	min-width: 44px;
	min-height: 44px;
	display: grid;
	place-items: center;
	padding: 0 0.6rem;
}

.sxs__close {
	font-size: 0.9rem;
	white-space: nowrap;
}

.sxs__clear:hover,
.sxs__close:hover {
	color: var( --sxs-ink );
	background: var( --sxs-panel );
}

.sxs__clear:focus-visible,
.sxs__close:focus-visible,
.sxs__input:focus-visible {
	outline: 2px solid var( --sxs-accent );
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ body */

.sxs__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding-bottom: env( safe-area-inset-bottom, 0 );
}

.sxs-sec {
	border-bottom: 1px solid var( --sxs-rule );
	padding: 0.6rem 0 0.75rem;
}

.sxs-sec:last-of-type {
	border-bottom: 0;
}

.sxs-sec__h {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 0.4rem;
	padding: 0 0.9rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --sxs-faint );
}

.sxs-sec__act {
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	color: var( --sxs-accent );
	cursor: pointer;
	padding: 0.35rem;
	min-height: 32px;
}

/* --------------------------------------------------------------- results */

.sxs-r {
	display: grid;
	grid-template-columns: 56px minmax( 0, 1fr ) auto;
	gap: 0.8rem;
	align-items: center;
	padding: 0.55rem 0.9rem;
	text-decoration: none;
	color: inherit;
	/* Comfortable target on a phone without making the list feel sparse. */
	min-height: 68px;
}

.sxs-r:hover,
.sxs-r.is-active {
	background: var( --sxs-panel );
}

.sxs-r.is-active {
	box-shadow: inset 3px 0 0 var( --sxs-accent );
}

.sxs-r__img {
	width: 56px;
	height: 56px;
	border-radius: var( --sxs-radius );
	overflow: hidden;
	background: var( --sxs-panel );
	display: grid;
	place-items: center;
}

.sxs-r__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sxs-r__noimg {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var( --sxs-rule );
}

.sxs-r__main {
	min-width: 0;
}

.sxs-r__title {
	display: block;
	font-size: 0.92rem;
	line-height: 1.35;
	/* Two lines maximum: a 71-character median title needs the room, but a
	   long one must not push the next result off the screen. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sxs-r__meta {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.76rem;
	color: var( --sxs-muted );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sxs-r__note {
	color: var( --sxs-accent );
}

.sxs-r__right {
	text-align: right;
	white-space: nowrap;
}

.sxs-r__price {
	display: block;
	font-size: 0.9rem;
	font-variant-numeric: tabular-nums;
}

.sxs-r__was {
	margin-left: 0.35rem;
	color: var( --sxs-faint );
	font-size: 0.8rem;
}

.sxs-r__stock {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.7rem;
	color: var( --sxs-muted );
}

.sxs-r__stock.is-out {
	color: var( --sxs-out );
}

.sxs__body mark {
	background: var( --sxs-mark );
	color: inherit;
	padding: 0 0.05em;
	border-radius: 2px;
}

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

.sxs-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0 0.9rem;
}

.sxs-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.75rem;
	min-height: 40px;
	border: 1px solid var( --sxs-rule );
	border-radius: 999px;
	font-size: 0.85rem;
	text-decoration: none;
	color: inherit;
	background: var( --sxs-ground );
}

.sxs-chip:hover,
.sxs-chip.is-active {
	border-color: var( --sxs-accent );
	color: var( --sxs-accent );
}

.sxs-chip__n {
	font-size: 0.72rem;
	color: var( --sxs-faint );
	font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- other states */

.sxs-correct {
	margin: 0;
	padding: 0.7rem 0.9rem;
	font-size: 0.88rem;
	color: var( --sxs-muted );
	border-bottom: 1px solid var( --sxs-rule );
}

.sxs-correct__btn {
	border: 0;
	background: none;
	font: inherit;
	color: var( --sxs-accent );
	text-decoration: underline;
	cursor: pointer;
	padding: 0.2rem;
}

.sxs-empty {
	padding: 1.4rem 0.9rem 0.8rem;
	text-align: center;
}

.sxs-empty__h {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.sxs-empty__help {
	display: inline-block;
	color: var( --sxs-accent );
	font-size: 0.88rem;
	padding: 0.5rem;
	min-height: 44px;
}

.sxs-msg {
	padding: 1.4rem 0.9rem;
	text-align: center;
	color: var( --sxs-muted );
	font-size: 0.9rem;
}

.sxs-all {
	display: block;
	padding: 0.9rem;
	text-align: center;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var( --sxs-accent );
	border-top: 1px solid var( --sxs-rule );
	min-height: 48px;
}

.sxs-all:hover {
	background: var( --sxs-panel );
}

/* ------------------------------------------------------------ responsive */

/* Phone: full screen, because a 390px-wide drop-down showing eight products
   with prices is not a drop-down, it is a page. */
@media ( max-width: 767px ) {
	.sxs__panel {
		max-width: none;
		height: var( --sxs-vh, 100dvh );
		max-height: var( --sxs-vh, 100dvh );
	}

	.sxs__scrim {
		display: none;
	}

	.sxs-r {
		grid-template-columns: 52px minmax( 0, 1fr );
		grid-template-areas: 'img main' 'img right';
		row-gap: 0.2rem;
	}

	.sxs-r__img {
		grid-area: img;
		width: 52px;
		height: 52px;
	}

	.sxs-r__main {
		grid-area: main;
	}

	.sxs-r__right {
		grid-area: right;
		text-align: left;
		display: flex;
		align-items: baseline;
		gap: 0.6rem;
	}

	.sxs-r__stock {
		margin-top: 0;
	}
}

/* Tablet and up: a dialog under the header rather than a full takeover. */
@media ( min-width: 768px ) {
	.sxs__panel {
		margin-top: 4vh;
		border-radius: 6px;
		max-height: min( 78vh, var( --sxs-vh, 78vh ) );
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	.sxs__panel {
		animation: sxs-in 140ms ease-out;
	}

	@keyframes sxs-in {
		from {
			opacity: 0;
			transform: translateY( -6px );
		}
	}
}

@media ( forced-colors: active ) {
	.sxs-r.is-active,
	.sxs-chip.is-active {
		outline: 2px solid Highlight;
	}
}

/* ================================================================== facets */

/* The facet groups. They render inside the theme's Refine drawer, which owns
   the panel, the scrim and the focus behaviour; everything here describes one
   group and its values and nothing about where the group sits. That split is
   what lets the same markup work in a drawer, in a sidebar, or as a plain
   block when scripting is off. */

.sxf-g {
	border-bottom: 1px solid var( --sxs-rule );
}

.sxf-g:last-of-type {
	border-bottom: 0;
}

.sxf-g__h {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.5rem 0.1rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var( --sxs-ink );
	cursor: pointer;
	list-style: none;
	min-height: 38px;
}

/* Safari renders a disclosure triangle through a pseudo-element of its own. */
.sxf-g__h::-webkit-details-marker {
	display: none;
}

.sxf-g__h::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin-right: 4px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate( 45deg ) translate( -2px, -2px );
	transition: transform 0.2s ease;
}

.sxf-g[open] > .sxf-g__h::after {
	transform: rotate( -135deg ) translate( -2px, -2px );
}

.sxf-g__h:focus-visible {
	outline: 2px solid var( --sxs-accent );
	outline-offset: -2px;
}

.sxf-g__list {
	list-style: none;
	margin: 0;
	padding: 0 0 0.4rem;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.sxf-o {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 30px;
	padding: 0.16rem 0.5rem 0.16rem 0.15rem;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	font-size: 0.85rem;
	line-height: 1.25;
}

.sxf-o:hover {
	background: var( --sxs-panel );
}

.sxf-o:focus-visible {
	outline: 2px solid var( --sxs-accent );
	outline-offset: -2px;
}

/* A checkbox drawn in CSS rather than a real input: these are links, because
   applying a filter is a navigation to a URL that has to survive a refresh and
   be reachable without JavaScript. The box is what makes a link look like the
   multi-select it behaves as. */
.sxf-o::before {
	content: "";
	flex: none;
	width: 17px;
	height: 17px;
	border: 1.5px solid var( --sxs-rule );
	border-radius: 4px;
	background: #fff;
}

.sxf-o.is-on {
	font-weight: 600;
}

.sxf-o.is-on::before {
	border-color: var( --sxs-accent );
	background: var( --sxs-accent );
	box-shadow: inset 0 0 0 2px #fff;
}

.sxf-o__n {
	margin-left: auto;
	font-size: 0.78rem;
	color: var( --sxs-muted );
	font-variant-numeric: tabular-nums;
}

.sxf-g__more {
	margin: 0 0 0.85rem;
	padding: 0.3rem 0.15rem;
	min-height: 36px;
	border: 0;
	background: none;
	color: var( --sxs-accent );
	font: inherit;
	font-size: 0.84rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.sxf-g__more:focus-visible {
	outline: 2px solid var( --sxs-accent );
	outline-offset: 2px;
}

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

/* Applied filters, under the toolbar. Each one removes exactly the value it
   names; "Clear all" removes every one of them and keeps the query. */
.sxf-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	padding: 0.75rem 0 0;
}

.sxf-active__h {
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --sxs-muted );
}

/* Dark pill on both the page row and the in-drawer copy (same class), so an
   applied filter reads as a solid, removable token rather than an outline. */
.sxf-active__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 34px;
	padding: 0.25rem 0.6rem;
	border: 1px solid var( --sxs-ink, #1c1a17 );
	border-radius: 999px;
	background: var( --sxs-ink, #1c1a17 );
	color: #fff;
	text-decoration: none;
	font-size: 0.84rem;
	line-height: 1.2;
}

.sxf-active__chip:hover {
	border-color: var( --sxs-accent );
	background: #000;
}

.sxf-active__chip:focus-visible {
	outline: 2px solid var( --sxs-accent );
	outline-offset: 2px;
}

.sxf-active__k {
	color: rgba( 255, 255, 255, 0.62 );
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.sxf-active__x {
	font-size: 1.05rem;
	line-height: 1;
	color: rgba( 255, 255, 255, 0.78 );
}

.sxf-active__chip:hover .sxf-active__x {
	color: var( --sxs-accent );
}

.sxf-active__clear {
	margin-left: 0.15rem;
	min-height: 34px;
	display: inline-flex;
	align-items: center;
	color: var( --sxs-accent );
	font-size: 0.84rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------- notices */

.sxf-correct {
	margin: 0.9rem 0 0;
	font-size: 0.9rem;
	color: var( --sxs-muted );
}

.sxf-correct a {
	color: var( --sxs-accent );
}

/* The no-JS sort submit. Hidden from everyone else by <noscript>, but it still
   needs to look like a control when it is the only way to apply a sort. */
.sxf-sort__go {
	margin-left: 0.4rem;
	min-height: 40px;
	padding: 0 0.8rem;
	border: 1px solid var( --sxs-rule );
	border-radius: 8px;
	background: #fff;
	font: inherit;
	cursor: pointer;
}

/* ------------------------------------------------------- mobile trigger --- */

/* The header field is display:none below 860px, so this is the search entry
   point on a phone. Above that the field itself is visible and this would be a
   second control doing the same job. */
.act--search {
	display: none;
}

@media ( max-width: 860px ) {
	.act--search {
		display: flex;
	}
}

/* ---------------------------------------------------------- SKU on a card */

/* The SKU is shown on every result, so the meta line now carries three or four
   items and must wrap instead of being cut off at one line. */
.sxs-r__meta {
	white-space: normal;
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5rem;
	text-overflow: clip;
}

.sxs-r__sku {
	font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	font-size: 0.72rem;
	letter-spacing: 0.01em;
	color: var( --sxs-muted );
}

.sxs-r__sku--var::before {
	content: "→ ";
	color: var( --sxs-accent );
}

/* A complete title, not a clipped one. Four lines is enough for the longest
   title in this catalogue and still keeps eight results on a phone screen. */
.sxs-r__title {
	-webkit-line-clamp: 4;
}


/* ---------------------------------------------------------------------
   Mobile refinements
   ---------------------------------------------------------------------
   Measured at 320–430px. The bar carried an icon, the field, a clear button
   and a "Close search" label, and the label is the widest thing in it — the
   field was left about 150px on a 390px screen and the placeholder was cut to
   "Search products, bran". Two dismiss controls also sat side by side once
   there was text to clear.

   On a phone the close control becomes an icon of the same 44px size. The
   accessible name is unchanged — the text is still in the button and still
   read out — so nothing is lost but the width it was taking from the field.
   --------------------------------------------------------------------- */

/*
 * The clear button ships with the `hidden` attribute and the script toggles it,
 * but the shared rule above sets `display:grid` on it — and an author
 * declaration beats the user agent's `[hidden]{display:none}`. So it was
 * visible from the moment the overlay opened, next to the close button and
 * drawn with the same cross: two identical × controls on an empty field, one of
 * which did nothing.
 */
.sxs__clear[hidden] {
	display: none;
}

@media ( max-width: 767px ) {
	.sxs__close {
		font-size: 0;
		padding: 0;
		width: 44px;
	}

	.sxs__close::before {
		content: "";
		width: 20px;
		height: 20px;
		border-radius: 2px;
		background: currentColor;
		-webkit-mask: var( --sxs-close-icon ) center / 20px 20px no-repeat;
		mask: var( --sxs-close-icon ) center / 20px 20px no-repeat;
	}

	/* Chips are the first thing offered on an empty search, so they are the
	   most-tapped control in the panel. 40px was under the floor. */
	.sxs-chips {
		gap: 0.5rem;
	}

	.sxs-chip {
		min-height: 44px;
		padding: 0.55rem 0.85rem;
	}
}

:root {
	--sxs-close-icon: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E" );
}


/* ---------------------------------------------------------------------
   Two crosses, told apart
   ---------------------------------------------------------------------
   Once there is something to clear, the bar carries two × controls side by
   side, drawn at the same size in the same colour: one empties the field, the
   other closes the whole panel, and nothing distinguishes them.

   They are separated the way a browser's own search bar separates them — the
   clear belongs to the FIELD, so it is small, muted and tucked against the
   text; the close belongs to the PANEL, so it is full size, full contrast and
   sits past a hairline rule. Both keep a 44px touch area.
   --------------------------------------------------------------------- */

@media ( max-width: 767px ) {
	.sxs__clear {
		width: 30px;
		min-width: 30px;
		min-height: 30px;
		margin-right: 2px;
		color: var( --sxs-muted );
		position: relative;
		opacity: .75;
	}

	/* Small to the eye, 44px to a thumb. */
	.sxs__clear::after {
		content: "";
		position: absolute;
		inset: -7px;
	}

	.sxs__clear svg {
		width: 15px;
		height: 15px;
	}

	.sxs__close {
		margin-left: 4px;
		padding-left: 10px;
		border-left: 1px solid var( --sxs-rule );
		border-radius: 0;
		color: var( --sxs-ink );
		opacity: 1;
	}
}

/* ---- Price min/max entry + radio-style single-select (price presets, discount tiers) ---- */
.sxf-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 2px 12px; }
.sxf-price__f { flex: 1 1 0; min-width: 0; }
.sxf-price__in { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid var( --sxs-rule, #dcd7cc ); border-radius: 8px; font: inherit; font-size: 0.85rem; background: #fff; color: inherit; }
.sxf-price__in:focus { outline: 2px solid var( --sxs-accent, #b8892b ); outline-offset: -1px; }
.sxf-price__sep { flex: none; color: var( --sxs-muted, #9a948a ); }
/* Go on its own full-width row so it never overflows the narrow drawer. */
.sxf-price__go { flex: 1 0 100%; padding: 10px 12px; border: 1px solid var( --sxs-accent, #b8892b ); border-radius: 8px; background: transparent; color: var( --sxs-accent, #b8892b ); font: inherit; font-size: 0.72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.sxf-price__go:hover { background: var( --sxs-accent, #b8892b ); color: #fff; }
.sxf-o--radio::before { content: ""; flex: none; width: 16px; height: 16px; border: 1.6px solid var( --sxs-rule, #bdb7ab ); border-radius: 50%; margin-right: 2px; box-sizing: border-box; }
.sxf-o--radio.is-on::before { border-color: var( --sxs-accent, #b8892b ); background: radial-gradient( circle at center, var( --sxs-accent, #b8892b ) 0 4px, #fff 5px ); }

/* ------------------------------------------------------ watch page context */

/* What the collection IS (not removable) sits apart from what the shopper
   added (removable chips). Outline pills, never the dark chip style, so the
   two can not be mistaken for each other. Every link is at least 44px tall
   on touch screens. */
.sxw-bar {
	display: grid;
	gap: 0.5rem;
	padding: 0.75rem 0 0;
}

.sxw-bar .sxf-active {
	padding-top: 0;
}

.sxw-context {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1rem;
	font-size: 0.84rem;
}

.sxw-context__scope {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
}

.sxw-context__k {
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --sxs-muted );
	margin-right: 0.15rem;
}

.sxw-pill {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 0.15rem 0.65rem;
	border: 1px solid var( --sxs-rule, #d9d4cc );
	border-radius: 999px;
	background: #fff;
	color: var( --sxs-ink, #1c1a17 );
	font-weight: 600;
}

.sxw-context__wider ul,
.sxw-context__ranges ul {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sxw-context__ranges {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}

.sxw-context__wider a,
.sxw-context__ranges a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var( --sxs-accent );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sxw-context__wider a:focus-visible,
.sxw-context__ranges a:focus-visible {
	outline: 2px solid var( --sxs-accent );
	outline-offset: 2px;
}

@media ( min-width: 861px ) {
	.sxw-context__wider a,
	.sxw-context__ranges a {
		min-height: 32px;
	}
}

/* Nothing matched: say why, and give the way back. */
.sxw-empty {
	display: grid;
	gap: 0.75rem;
	max-width: 42rem;
	padding: 1.5rem 0 2.5rem;
}

.sxw-empty__h {
	margin: 0.5rem 0 0;
	font-size: 1.25rem;
}

.sxw-empty p {
	margin: 0;
}

.sxw-empty__actions .btn-gold {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Touch screens: every drawer option, chip and "show more" is a full 44px
   target (mobile-first; 80-90% of visits). Desktop keeps the compact rows. */
@media ( pointer: coarse ) {
	.sxf-o,
	.sxf-active__chip,
	.sxf-active__clear,
	.sxf-g__more {
		min-height: 44px;
	}
}