/**
 * KOA SearchSpring — theme integration styles
 *
 * Styles for SearchSpring-injected markup on product archives.
 * All values reference theme.json CSS custom properties so they
 * stay in sync with the theme's design tokens.
 */

/* ── Hide SS's own toggle — theme provides .koa-filter-toggle ── */
.ss__slideout__button,
.product-filter-close {
	display: none !important;
}

/* ── Empty filter column ──
 * SearchSpring returns no facets for some taxonomy archives (brand, culture,
 * era, discipline, sword type — anything its index has no facet config for).
 * The theme's category nav only renders on /shop/ and product categories, so
 * those pages were left with a "Filters" heading over an empty 251px column.
 *
 * searchspring.js sets this class once SS has either populated the sidebar or
 * shown it is not going to; the products then take the full width. The mobile
 * toggle goes with it, otherwise tapping "Filters" opens an empty drawer.
 *
 * The hiding itself lives in the theme (body.koa-filters-empty, set
 * server-side — see _sidebar-filters.scss) so the column never paints on
 * those archives. searchspring.js only has to add `koa-ss-has-facets` to
 * reveal it when facets actually arrive. */

/* ── Force full-height facet panels ── */
.ss__theme .ss__facets__column .ss__facets {
	max-height: none !important;
	height: auto !important;
	overflow: visible !important;
}

.ss__theme .ss__facets__column .ss__facets .ss__facet .ss__scrollbar {
	max-height: none !important;
	overflow: visible !important;
}

/* ── Facet header (matches .koa-category-nav__title from theme) ── */
.koa-sidebar-column .ss__block__header {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--min);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--looser);
	color: var(--wp--preset--color--primary-text);
	margin: 0 0 0.75rem;
}

/* ── Facet list options (matches .koa-category-nav li from theme) ── */
.koa-sidebar-column .ss__list__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

/* ── Facet links (matches .koa-category-nav a from theme) ── */
.koa-sidebar-column .ss__list__link {
	flex: 1;
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--muted-foreground);
	text-decoration: none;
	padding: 0.125rem 0.25rem;
	border-radius: var(--wp--custom--border-radius--tiny);
	transition: color 200ms ease;
	cursor: pointer;
}

.koa-sidebar-column .ss__list__link:hover {
	color: var(--wp--preset--color--foreground);
}

/* ── Active facet checkbox indicator ── */
.koa-sidebar-column .ss__list__option::before {
	content: '';
	display: block;
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	border: 2px solid var(--wp--preset--color--muted-foreground);
	border-radius: var(--wp--custom--border-radius--tiny);
	background: transparent;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.koa-sidebar-column .ss__list__option.ss__active .ss__list__link,
.koa-sidebar-column .ss__list__option.checked .ss__list__link {
	color: var(--wp--preset--color--foreground);
}

.koa-sidebar-column .ss__list__option.ss__active::before,
.koa-sidebar-column .ss__list__option.checked::before {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	content: '\2713';
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--wp--preset--color--background);
	line-height: 1;
}

/* ── Facet count (matches .koa-category-nav__count from theme) ── */
.koa-sidebar-column .ss__facet__count {
	font-family: var(--wp--preset--font-family--monospace, monospace);
	font-size: var(--wp--preset--font-size--min);
	color: var(--wp--preset--color--muted-foreground);
	opacity: 0.7;
}

/* ── Show more link (matches .koa-category-nav__show-more from theme) ── */
.koa-sidebar-column .ss__show-more__link {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.125rem 0;
	font-size: var(--wp--preset--font-size--min);
	color: var(--wp--preset--color--muted-foreground);
	text-decoration: none;
	cursor: pointer;
	background: none;
	border: none;
	transition: color 200ms ease;
}

.koa-sidebar-column .ss__show-more__link:hover {
	color: var(--wp--preset--color--foreground);
}

/* ── Sidebar Products/Videos tabs ──
 * SearchSpring styles these itself, in its own brass (#be9359) and with the
 * states the wrong way round: the *active* tab is the outline and the inactive
 * one is filled. Rebuilt as the theme's two button styles — solid for the tab
 * you're on, outline for the one you're not — matching `.koa-button` and
 * `.koa-button--outline`. Scoped by ID so it outranks the SS bundle without
 * `!important`.
 *
 * The solid state keeps the outline's 1px border (in primary) rather than
 * dropping to `border: 0` with 14px/24px padding as `.koa-button` does: the
 * box works out identically, and switching tabs can't shift the button by a
 * pixel. */
#searchspring-sidebar .ss__tabs {
	margin: 0 0 1rem;
}

/* The row carries SS's grid gutter as a negative margin, which hangs the
 * buttons 5px past the sidebar on both sides once the columns lose their
 * matching padding below. */
#searchspring-sidebar .ss__tabs .ss__tabs__row {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
}

#searchspring-sidebar .ss__tabs .ss__tabs__row .ss__tabs__column--button {
	width: 100%;
	margin: 0;
	padding: 0;
}

#searchspring-sidebar .ss__tabs .ss__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	/* SS fixes the button at `height: 32px`, which under border-box swallows
	 * the padding below and leaves a squat pill. */
	height: auto;
	padding: 13px 23px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--medium);
	color: var(--wp--preset--color--foreground);
	background: transparent;
	border: var(--wp--custom--border-width--tiny) solid var(--wp--custom--color--outline-border);
	border-radius: var(--wp--custom--border-radius--small);
	cursor: pointer;
	text-align: center;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

#searchspring-sidebar .ss__tabs .ss__button:hover,
#searchspring-sidebar .ss__tabs .ss__button:focus-visible {
	background: var(--wp--custom--color--outline-hover-bg);
	border-color: var(--wp--custom--color--outline-border);
	color: var(--wp--preset--color--foreground);
}

#searchspring-sidebar .ss__tabs .ss__button.ss__active {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-foreground);
}

#searchspring-sidebar .ss__tabs .ss__button.ss__active:hover,
#searchspring-sidebar .ss__tabs .ss__button.ss__active:focus-visible {
	background: var(--wp--custom--color--accent-hover);
	border-color: var(--wp--custom--color--accent-hover);
	color: var(--wp--preset--color--primary-foreground);
}

#searchspring-sidebar .ss__tabs .ss__tab__count {
	font-size: var(--wp--preset--font-size--min);
	font-weight: 400;
	opacity: 0.7;
}

/* ── Facet panels ── */
.koa-sidebar-column .ss__facet {
	padding: 1rem 0;
	border-bottom: var(--wp--custom--border-width--tiny) solid var(--wp--preset--color--border);
}

.koa-sidebar-column .ss__block__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
}

.koa-sidebar-column .ss__list {
	margin-top: .75rem;
}

.koa-sidebar-column .ss__block__section {
	margin-bottom: 0 !important;
}

/* ── Toggle facets (stock status, new) ── */
#ss__facet--stock_status .ss__block__section,
#ss__facet--ss_is_new .ss__block__section {
	display: block !important;
}

#ss__facet--stock_status .ss__block__header,
#ss__facet--ss_is_new .ss__block__header {
	display: none !important;
}

#ss__facet--stock_status .ss__toggle__option,
#ss__facet--ss_is_new .ss__toggle__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--foreground);
}

#ss__facet--stock_status .ss__toggle__option::after,
#ss__facet--ss_is_new .ss__toggle__option::after {
	content: '';
	display: block;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--wp--preset--color--muted-foreground);
	border-radius: var(--wp--custom--border-radius--tiny);
	background: transparent;
	flex-shrink: 0;
}

#ss__facet--stock_status .ss__toggle__option.checked::after,
#ss__facet--ss_is_new .ss__toggle__option.checked::after {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	content: '\2713';
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--wp--preset--color--background);
	line-height: 1;
}

#ss__facet--stock_status .facetwp-counter,
#ss__facet--ss_is_new .facetwp-counter {
	display: none !important;
}

/* ── Facet arrow icon ── */
.koa-sidebar-column .ss__facet svg,
.koa-sidebar-column .ss__facet .ss__icon {
	width: 1rem;
	height: 1rem;
	color: var(--wp--preset--color--muted-foreground);
	transition: transform 200ms ease !important;
	transform: rotate(180deg) !important;
}

/* ── Price slider ── */
.koa-sidebar-column .ss__facet-slider {
	padding: 1.5rem 0 0;
}

#ss__facet--price .ss__facet-slider__rail,
#ss__facet--price .ss__facet-slider__segment {
	height: 4px !important;
	background: var(--wp--preset--color--primary) !important;
	border-radius: 2px !important;
	top: 33% !important;
}

#ss__facet--price .ss__facet-slider__segment {
	height: 4px !important;
	background: var(--wp--preset--color--border) !important;
	border-radius: 2px !important;
}

#ss__facet--price .ss__facet-slider__handle {
	width: 1.5rem !important;
	height: 1.5rem !important;
	border-radius: 50% !important;
	border: 2px solid var(--wp--preset--color--primary) !important;
	background: var(--wp--preset--color--background) !important;
	color: transparent !important;
	cursor: grab;
}

#ss__facet--price .ss__facet-slider__handle:active {
	cursor: grabbing;
}

#ss__facet--price .ss__facet-slider__handle::before,
#ss__facet--price .ss__facet-slider__handle::after {
	display: none !important;
}

#ss__facet--price .ss__facet-slider__handles button {
	color: transparent !important;
	background: transparent !important;
	border: none !important;
}

.koa-sidebar-column .ss__facet-slider__labels {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
	font-family: var(--wp--preset--font-family--monospace, monospace);
	color: var(--wp--preset--color--muted-foreground);
}

.koa-sidebar-column .ss__facet-slider__label {
	font-size: var(--wp--preset--font-size--min);
}

.koa-sidebar-column .ss__facet-slider__label::before {
	content: '$';
}

.koa-sidebar-column .ss__facet-slider__label--0::after {
	content: ' \2014';
	margin-left: 0.25rem;
}

.koa-sidebar-column .facetwp-slider-reset {
	display: none !important;
}

/* ── Reset filters button ── */
.koa-sidebar-column .facetwp-reset,
.koa-sidebar-column .product-filter-reset {
	display: inline-block;
	width: 100%;
	margin-top: 1rem;
	padding: 13px 23px;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 300;
	line-height: var(--wp--custom--line-height--medium);
	color: var(--wp--preset--color--foreground);
	background: transparent;
	border: var(--wp--custom--border-width--tiny) solid var(--wp--custom--color--outline-border);
	border-radius: var(--wp--custom--border-radius--small);
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.koa-sidebar-column .facetwp-reset:hover,
.koa-sidebar-column .facetwp-reset:focus,
.koa-sidebar-column .product-filter-reset:hover,
.koa-sidebar-column .product-filter-reset:focus {
	background: var(--wp--custom--color--outline-hover-bg);
	border-color: var(--wp--custom--color--outline-border);
}

/* ── Refine / search ── */
.koa-sidebar-column .ss__refine-query {
	padding: 1rem 0;
	border-bottom: var(--wp--custom--border-width--tiny) solid var(--wp--preset--color--border);
}

.koa-sidebar-column .ss__refine-query .ss__block__header {
	display: none;
}

.koa-sidebar-column .ss__refine-query .ss__block__section {
	display: block !important;
	margin-top: .5rem;
}

.koa-sidebar-column .ss__refine-query__row {
	position: relative;
}

.koa-sidebar-column .ss__refine-query__row .facetwp-icon {
	position: absolute;
	/* 50%, not the 42% the emoji needed — a glyph sat on a text baseline and
	   had to be nudged; the masked SVG below fills its own box. */
	top: 50%;
	left: 0.75rem;
	transform: translateY(-50%);
	width: 1rem;
	height: 1rem;
	color: var(--wp--preset--color--muted-foreground);
	pointer-events: none;
	font-style: normal;
}

/* The theme's utility/search.svg — the same mark as the header search field.
   This was '\1F50D', the 🔍 emoji, which renders as full-colour system
   artwork and ignores the colour set above. Painted via mask so it takes
   currentColor and stays a single flat mark like the rest of the UI. */
.koa-sidebar-column .ss__refine-query__row .facetwp-icon::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.5 2.5a8 8 0 016.32 12.905l4.387 4.388a1 1 0 01-1.32 1.497l-.094-.083-4.388-4.386A8 8 0 1110.5 2.5zm0 2a6 6 0 100 12 6 6 0 000-12z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.5 2.5a8 8 0 016.32 12.905l4.387 4.388a1 1 0 01-1.32 1.497l-.094-.083-4.388-4.386A8 8 0 1110.5 2.5zm0 2a6 6 0 100 12 6 6 0 000-12z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.koa-sidebar-column .ss__refine-query__input {
	width: 100%;
	padding: 0.5rem 0.75rem 0.5rem 2.25rem;
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--foreground);
	background: transparent;
	border: var(--wp--custom--border-width--tiny) solid var(--wp--preset--color--muted-foreground);
	border-radius: var(--wp--custom--border-radius--small);
	outline: none;
	transition: border-color 200ms ease;
}

.koa-sidebar-column .ss__refine-query__input::placeholder {
	color: var(--wp--preset--color--muted-foreground);
}

.koa-sidebar-column .ss__refine-query__input:focus {
	border-color: var(--wp--custom--color--ring);
}

/* ── Price range accent ── */
.koa-sidebar-column [class*="ss__slider"],
.koa-sidebar-column [class*="ss__range"] {
	accent-color: var(--wp--preset--color--accent);
}

.koa-sidebar-column [class*="ss__slider"] input[type="range"] {
	width: 100%;
	accent-color: var(--wp--preset--color--accent);
}

/* ── #searchspring-content container ── */

#searchspring-content {
	grid-column: span 4;
	scroll-margin-top: 200px;
}

@media (max-width: 991px) {
	#searchspring-content {
		grid-column: 1 / -1;
	}
}

/* ── Results toolbar ── */
#searchspring-content .ss__has-results {
	display: grid;
	grid-template-columns: 1fr auto auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: var(--wp--preset--spacing--30);
	row-gap: 0;
	margin-bottom: var(--wp--custom--layout--block-gap);
}

@media (max-width: 991px) {
	#searchspring-content .ss__has-results {
		grid-template-columns: 1fr;
		row-gap: var(--wp--custom--layout--block-gap);
	}
}

#searchspring-content .ss__title--count {
	grid-column: 1;
	grid-row: 1;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted-foreground);
	margin-bottom: 0;
}

@media (max-width: 991px) {
	#searchspring-content .ss__title--count {
		grid-column: 1 / -1;
	}
}

#searchspring-content .ss__count__range,
#searchspring-content .ss__count__total {
	font-weight: 500;
	color: var(--wp--preset--color--foreground);
}

#searchspring-content .ss__toolbar__column {
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--min);
	color: var(--wp--preset--color--muted-foreground);
	letter-spacing: 0.05rem;
	text-transform: uppercase;
	background-color: transparent;
	border: none;
	font-weight: 300 !important;
	margin: 0;
	padding: 0;
	float: none;
}

@media (max-width: 991px) {
	#searchspring-content .ss__toolbar__column {
		grid-row: 2;
		display: grid;
		grid-template-columns: auto 1fr;
		white-space: nowrap;
	}
}

#searchspring-content .ss__toolbar__column--per-page {
	grid-column: 2;
}

#searchspring-content .ss__toolbar__column--per-page::before {
	content: "Per Page";
}

@media (max-width: 991px) {
	#searchspring-content .ss__toolbar__column--per-page {
		grid-column: 1;
		grid-row: 2;
	}
}

#searchspring-content .ss__toolbar__column--sort {
	grid-column: 3;
}

#searchspring-content .ss__toolbar__column--sort::before {
	content: "Sort";
}

@media (max-width: 991px) {
	#searchspring-content .ss__toolbar__column--sort {
		grid-column: 1;
		grid-row: 3;
	}
}

/* The background colour is the darkest theme colour, not `transparent`.
 * On Windows, Chrome paints the native dropdown list using the select's own
 * background-color; `transparent` resolves to white there, and the white
 * option text set below then disappears against it. macOS renders the popup
 * with system colours, which is why this only showed up on Windows. */
#searchspring-content #ss__select__menu__perPage,
#searchspring-content #ss__select__menu__sort {
	appearance: none !important;
	-webkit-appearance: none !important;
	background: var(--wp--preset--color--background) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23d4a74a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E") no-repeat right 0.5rem center !important;
	border: var(--wp--custom--border-width--tiny) solid var(--wp--preset--color--border) !important;
	border-radius: 4px !important;
	color: var(--wp--preset--color--foreground) !important;
	font-size: var(--wp--preset--font-size--tiny) !important;
	font-weight: 300 !important;
	padding: 0.4rem 2rem 0.4rem 0.75rem !important;
	cursor: pointer;
	min-width: 0;
}

/* Also set the options explicitly. Inheriting from the select is enough on
 * current Chrome, but Firefox and older Chrome paint option rows from the
 * option's own colours, so state it rather than relying on inheritance. */
#searchspring-content #ss__select__menu__perPage option,
#searchspring-content #ss__select__menu__sort option {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}

#searchspring-content #ss__select__menu__perPage:hover,
#searchspring-content #ss__select__menu__perPage:focus,
#searchspring-content #ss__select__menu__sort:hover,
#searchspring-content #ss__select__menu__sort:focus {
	border-color: var(--wp--preset--color--primary) !important;
	outline: none;
}

/* ── Toolbar filters row ── */
#searchspring-content .ss__toolbar--filters {
	grid-column: 1 / -1;
	grid-row: 2;
	border-top: var(--wp--custom--border-width--tiny) solid var(--wp--preset--color--border);
	padding-top: var(--wp--custom--layout--block-gap);
	margin-top: var(--wp--custom--layout--block-gap);
}

#searchspring-content .ss__toolbar--filters .loop-in-stock-facet {
	display: none;
}

/* ── Active filter pills ── */
#searchspring-content .loop-selections-facet {
	grid-column: 1 / -1;
	grid-row: 2;
}

#searchspring-content .loop-selections-facet:empty,
#searchspring-content .loop-selections-facet:not(:has(.ss__list__option)) {
	display: none;
}

#searchspring-content .loop-selections-facet .ss__list {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

#searchspring-content .loop-selections-facet .ss__list__option {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background-color: var(--wp--custom--color--surface-2);
	border: var(--wp--custom--border-width--tiny) solid var(--wp--preset--color--border);
	border-radius: 999px;
	padding: 0.4rem 0.85rem;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 300;
	color: var(--wp--preset--color--muted-foreground);
	cursor: pointer;
	transition: border-color 200ms ease;
	margin-bottom: 0 !important;
}

#searchspring-content .loop-selections-facet .ss__list__option:hover {
	border-color: var(--wp--preset--color--primary);
}

#searchspring-content .loop-selections-facet .ss__list__option::after {
	content: "\D7";
	font-size: 1.1rem;
	line-height: 1;
	color: var(--wp--preset--color--muted-foreground);
	margin-left: 0.25rem;
}

#searchspring-content .loop-selections-facet .ss__filter-summary__label {
	color: var(--wp--preset--color--muted-foreground);
}

#searchspring-content .loop-selections-facet .ss__filter-summary__value {
	color: var(--wp--preset--color--foreground);
}

#searchspring-content .loop-selections-facet .koa-clear-all {
	background: none;
	border: none;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 300;
	color: var(--wp--preset--color--muted-foreground);
	cursor: pointer;
	padding: 0.4rem 0.25rem;
	transition: color 200ms ease;
}

#searchspring-content .loop-selections-facet .koa-clear-all:hover {
	color: var(--wp--preset--color--foreground);
}

/* ── Brass rule below toolbar ── */
#searchspring-content .ss__has-results > .ss__results {
	grid-column: 1 / -1;
	padding-top: var(--wp--custom--layout--block-gap);
}

/* ── SS card column ──
 * SearchSpring's own card template differs from the native WooCommerce loop in
 * two ways that matter for layout: it wraps everything in an unclassed <div>,
 * and it puts the price/stock row *inside* the product link rather than beside
 * it. Both have to become flex columns so the price can bottom-align.
 *
 * The link also needs an explicit `display: flex`: WooCommerce core ships
 * `.woocommerce ul.products li.product a.woocommerce-loop-product__link
 * { display: block }`, which outranks the theme's flex rule on the same
 * element. That never mattered for native cards (their price sits outside the
 * link) but it does here, so the `#searchspring-content` ID wins it back.
 *
 * Scoped to `li.ss__result`, not `li.product`: when SearchSpring doesn't render
 * (bundle blocked, or a page type it doesn't handle) WooCommerce's own markup
 * stays inside #searchspring-content, and there `> div` would match the brand,
 * price and wishlist divs and stretch them. `ss__result` only exists on cards
 * SearchSpring built. */
#searchspring-content li.ss__result > div {
	display: flex;
	flex-direction: column;
	flex: 1;
}

#searchspring-content li.ss__result a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* SearchSpring's template emits Add to Cart before Quick View; the native
 * WooCommerce card has Quick View first. Reorder visually rather than change
 * the SearchSpring-side template, so the two card types read the same.
 * Everything else in the wrapper keeps the default `order: 0` and stays put. */
#searchspring-content li.ss__result .ss__result__quickview {
	order: 1;
}

#searchspring-content li.ss__result .button {
	order: 2;
}

/* ── SS pricing row ── */
/* `margin-top: auto` inside the link absorbs the leftover space left by a
 * short title, so price/stock, Add to Cart and Quick View line up across a row
 * instead of trailing a ragged title. The padding-top is the guaranteed gap
 * above the price on the tallest card in the row, where `auto` contributes
 * nothing — it sits here rather than under the title because cards with a star
 * rating put that rating in between. Matches the native card's
 * `.koa-price-stock`. */
#searchspring-content li.ss__result .ss__result__pricing {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.25rem;
	padding: 1.25rem 1rem 0;
	margin-top: auto;
}

#searchspring-content li.product .ss__result__price {
	color: var(--wp--preset--color--foreground);
}

/* ── Legacy BLM/MG price note ── */
/* SearchSpring's card template still appends "* includes discounted BLM or MG
 * product" to the price. That note stopped being true once those products were
 * converted, and nothing on this site renders it any more — the only other copy
 * lives in the retired 2022 theme. Hidden rather than restyled; the real fix is
 * removing it from the card template in the SearchSpring dashboard, after which
 * this rule can go. Unscoped so it also covers autocomplete and recommendation
 * cards, which use the same template. */
.price-asterisk,
.price-grade-msg {
	display: none;
}

/* ── SS Quick View link ── */
/* No top margin, matching the native card. The link's own line box is much
 * taller than its 12px type, and that half-leading alone is the gap above it —
 * about 13px of visible space, which is what the Add to Cart button's 0.5rem
 * margin plus the same half-leading below the text works out to. Adding a
 * margin here as well would make the price→Quick View gap the larger of the
 * two. */
#searchspring-content li.product .ss__result__quickview {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0;
	padding: 0 1rem;
	line-height: calc(var(--wp--custom--line-height--normal) * 1rem);
	font-size: var(--wp--preset--font-size--min);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	color: var(--wp--preset--color--muted-foreground);
	text-decoration: none;
	transition: color 200ms ease;
}

#searchspring-content li.product .ss__result__quickview:hover {
	color: var(--wp--preset--color--foreground);
}

/* ── SS corner badges ── */
/* Base look matches the theme's plain `.koa-badge--tag`; the two variants below
 * override it. SearchSpring's card template marks a badge with `sword-class`
 * when it came from a class product tag (Battle Ready, Sport Combat, …) and
 * with `custom-corner-banner` when it came from the per-product ACF banner
 * (Cutting Series, HEMA - Advanced Skill, …) — the same split the theme makes
 * between `.koa-badge--class` and `.koa-badge--custom`. */
li.product .ss__badge {
	--koa-badge-color: var(--wp--custom--badge--white);
	position: absolute;
	/* 0.75rem to match the theme's `.koa-badges` container and the `span.onsale`
	 * "New" badge in the opposite corner. At the previous 0.5rem the two corners
	 * sat 4px apart on the same card. Padding matches `.koa-badge` for the same
	 * reason — it was 0.25rem, making these 22px tall against the New badge's
	 * 23.6px. */
	top: 0.75rem !important;
	left: 0.75rem !important;
	margin: 0 !important;
	z-index: 1;
	color: var(--koa-badge-color) !important;
	font-size: var(--wp--preset--font-size--min);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	padding: 0.3rem 0.75rem;
	line-height: 1;
	min-height: 0;
	min-width: 0;
	background-color: var(--wp--preset--color--background);
	border: var(--wp--custom--border-width--tiny) solid currentColor;
	border-radius: var(--wp--custom--border-radius--pill);
}

/* Class badges that open a Popup Maker explainer wrap their label in an <a>,
 * which picked up the global link underline from
 * `a:where(:not(.wp-element-button))`. Badges without a popup have no anchor,
 * so only some of them were underlined.
 *
 * Not scoped to li.product: the recommendation carousels render the same
 * badges outside the shop loop. */
.ss__badge a {
	color: inherit;
	text-decoration: none;
}

/* Custom corner banner — brass, matching the theme's `.koa-badge--custom`. */
li.product .ss__badge.custom-corner-banner {
	--koa-badge-color: var(--wp--custom--badge--brass);
}

/* Class badges, matching the theme's `.koa-badge--class` colours. Values come
 * from theme.json `custom.badge` so the SearchSpring cards and the native
 * WooCommerce cards can't drift apart. Deliberately after the custom-banner
 * rule at equal specificity: SearchSpring's template emits both classes on some
 * products, and the class colour should win there.
 *
 * Keyed off the class slug alone rather than `.sword-class.<slug>`. The
 * template does not always emit `sword-class` — some cards carry `class-badge`
 * instead — so the two-class selectors missed those and left them on the brass
 * corner-banner colour whatever their actual class. Seen live on Sport Combat
 * products in the Swords category. */
li.product .ss__badge.battle-ready {
	--koa-badge-color: var(--wp--custom--badge--red);
}

li.product .ss__badge.sport-combat,
li.product .ss__badge.stage-combat {
	--koa-badge-color: var(--wp--custom--badge--blue);
}

li.product .ss__badge.decorative {
	--koa-badge-color: var(--wp--custom--badge--green);
}

li.product .ss__badge.larp {
	--koa-badge-color: var(--wp--custom--badge--purple);
}

/* ── SS pagination ── */
#searchspring-content .ss__pagination {
	grid-column: 1 / -1;
	display: flex;
	gap: 8px;
	justify-content: center;
	padding-top: var(--wp--custom--layout--block-gap-large);
}

#searchspring-content .ss__pagination .ss__pagination__row {
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
	margin-top: 0 !important;
}

#searchspring-content .ss__pagination .ss__pagination__link,
#searchspring-content .ss__pagination .ss__pagination__label {
	background: var(--wp--preset--color--background);
	border: var(--wp--custom--border-width--tiny) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--border-radius--small);
	color: var(--wp--preset--color--foreground);
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 400;
	text-decoration: none;
	cursor: pointer;
	transition: all 200ms ease, color 200ms ease;
}

#searchspring-content .ss__pagination .ss__pagination__link:hover,
#searchspring-content .ss__pagination .ss__pagination__label:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-text);
}

#searchspring-content .ss__pagination .ss__pagination__current .ss__pagination__label {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

#searchspring-content .ss__pagination .ss__pagination__current .ss__pagination__label:hover {
	background: var(--wp--preset--color--primary);
}

/* ── SS brand logo hide (images hidden, text shown) ── */
#searchspring-content li.product .archive-product-brand img,
#searchspring-content li.product .archive-product-brand picture,
#searchspring-content li.product .archive-product-brand a:has(picture) {
	display: none !important;
}

/* ── Autocomplete result brand ──
 *
 * The panel prints the brand as plain 14px body text above the product title,
 * where the archive card gives it brass small-caps. Match the card, using the
 * same values as `.archive-product-brand` in the theme's _product-archive.scss:
 * all-small-caps renders at roughly 70% cap height, so 1.0625rem lands on the
 * 12px caps the cards show.
 *
 * SearchSpring's template writes `font-size` and `margin-bottom` as inline
 * styles on this span, so overriding them needs !important — specificity
 * alone never wins against an inline declaration. */
.ss__autocomplete .ss__result__details__brand {
	/* The panel sets the display serif on its results; the archive card's brand
	   line is body sans, so name it here rather than inherit. */
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem !important;
	font-variant: all-small-caps;
	letter-spacing: 0.08rem;
	line-height: 1;
	color: var(--wp--preset--color--primary-text);
	margin-bottom: 0.25rem !important;
}

/* ══════════════════════════════════════════════════════════════════
 * Video results (?tab=videos)
 *
 * The Videos tab reuses the results grid but not the product card:
 * SearchSpring emits `li.ss__result--video` — an article teaser with an
 * `<h2>` header *before* the thumbnail, a description, a "Watch on
 * YouTube" link and a "Read more" link, and no price or Add to Cart. None
 * of the `li.product` rules above reach it, so unstyled it renders as a
 * full-bleed heading stacked on a raw 4:3 thumbnail with two underlined
 * links trailing underneath.
 *
 * Rebuilt as the same card the products use: plate on top, then title,
 * teaser, and one action pinned to the bottom edge. `order` does the
 * reordering so SearchSpring's template stays untouched.
 * ══════════════════════════════════════════════════════════════════ */

/* Video cards carry a 16:9 plate rather than a portrait one, so they read
 * better three-up than at the product grid's two. `:has()` keeps this to
 * the Videos tab — the same <ul> serves the product results. */
#searchspring-content .ss__results:has(> .ss__result--video) {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

#searchspring-content li.ss__result--video {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	background: var(--wp--custom--color--surface-1);
	border: var(--wp--custom--border-width--tiny) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--border-radius--small);
	transition: border-color 200ms ease;
}

#searchspring-content li.ss__result--video:hover,
#searchspring-content li.ss__result--video:focus-within {
	border-color: var(--wp--preset--color--primary);
}

/* The thumbnail is second in the markup; `order` lifts it to the top of
 * the card. YouTube serves `hqdefault.jpg` as a 4:3 frame with black bars
 * top and bottom — the 16:9 box plus `object-fit: cover` crops those off
 * rather than letterboxing them into the card. The surface-2 background is
 * what shows when a thumbnail 404s, so a missing image reads as an empty
 * plate with a play mark instead of a hole. */
#searchspring-content li.ss__result--video .post-thumbnail {
	order: 1;
	position: relative;
	display: block;
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wp--custom--color--surface-2);
}

#searchspring-content li.ss__result--video .post-thumbnail picture,
#searchspring-content li.ss__result--video .post-thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
}

/* Play mark: disc from `::after`, triangle from `::before`, so the card is
 * never mistaken for a product tile and the plate reads as clickable. */
#searchspring-content li.ss__result--video .post-thumbnail::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: hsl(0 0% 0% / 0.5);
	border: var(--wp--custom--border-width--tiny) solid hsl(0 0% 100% / 0.55);
	transition: background-color 200ms ease, border-color 200ms ease;
}

#searchspring-content li.ss__result--video .post-thumbnail::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent var(--wp--preset--color--white);
}

#searchspring-content li.ss__result--video:hover .post-thumbnail::after {
	background: hsl(0 0% 0% / 0.7);
	border-color: var(--wp--preset--color--primary);
}

#searchspring-content li.ss__result--video .entry-header {
	order: 2;
	margin: 0;
	padding: 1rem 1rem 0;
}

/* Clamped to two lines: video titles are the full product name and run to
 * four lines otherwise, which pushes every card in the row out of step. */
#searchspring-content li.ss__result--video .ss__article__name {
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--small);
}

#searchspring-content li.ss__result--video .ss__article__name a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	transition: color 200ms ease;
}

#searchspring-content li.ss__result--video:hover .ss__article__name a,
#searchspring-content li.ss__result--video .ss__article__name a:focus-visible {
	color: var(--wp--preset--color--primary-text);
}

#searchspring-content li.ss__result--video .ss__article__description {
	order: 3;
	padding: 0.5rem 1rem 0;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 300;
	color: var(--wp--preset--color--muted-foreground);
}

/* The 16px inline padding is SearchSpring's own on the teaser paragraph; it
 * doubles up with the card padding and sets the copy in from the title. */
#searchspring-content li.ss__result--video .ss__article__description p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

/* "Read more" points at the same URL as the title, so the card would carry
 * the same destination twice. The title keeps it; the footer is left to the
 * one link that goes somewhere else. */
#searchspring-content li.ss__result--video .read-more {
	display: none;
}

/* `margin-top: auto` pins the action to the bottom edge, so it lines up
 * across a row whatever the title and teaser do above it. */
#searchspring-content li.ss__result--video .ss__video--more {
	order: 4;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 1rem;
	font-size: var(--wp--preset--font-size--min);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	color: var(--wp--preset--color--muted-foreground);
	text-decoration: none;
	transition: color 200ms ease;
}

#searchspring-content li.ss__result--video .ss__video--more:hover {
	color: var(--wp--preset--color--foreground);
}

/* The logo ships with `fill="#ffffff"` as a presentation attribute, which
 * CSS outranks — so it tracks the link colour on hover with the label. */
#searchspring-content li.ss__result--video .ss__video--more svg {
	height: 13px;
	width: auto;
	fill: currentColor;
}

/* SearchSpring's `.caret` class appends an icon-font glyph, and the font it
 * needs isn't loaded here — it renders as a tofu box after the logo. */
#searchspring-content li.ss__result--video .caret::after {
	content: none;
}

/* ── Cart page: SS recommendations carousel ── */
.woocommerce-cart .ss__recs__view-cart {
	width: 100%;
	flex-basis: 100%;
}

/* SearchSpring prints its own carousel heading here — the cart has no
 * theme-rendered section heading above it the way the PDP does, so this
 * <h3> is the section heading and has to read as the theme's h2.
 *
 * The bundle styles it from its injected <style> block at
 * `.ss__theme.ss__recommendation--carousel .ss__recommendation__header
 * .ss__title` (four classes, later in the cascade) with a Metamorphous
 * face at 24px in brass, so the selector below carries the target's own
 * classes to outrank it. */
.woocommerce-cart .ss__recs__view-cart .ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__recommendation__header .ss__title--recommendation {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 400;
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	line-height: var(--wp--custom--line-height--small);
	color: var(--wp--preset--color--foreground);
}

.woocommerce-cart .ss__recs__view-cart .ss__carousel__prev,
.woocommerce-cart .ss__recs__view-cart .ss__carousel__next {
	color: var(--wp--preset--color--muted-foreground);
	transition: color 200ms ease;
}

.woocommerce-cart .ss__recs__view-cart .ss__carousel__prev:hover,
.woocommerce-cart .ss__recs__view-cart .ss__carousel__next:hover {
	color: var(--wp--preset--color--foreground);
}

/* ══════════════════════════════════════════════════════════════════
 * Recommendation carousels
 *
 * The cards inside a recommendation carousel come from the same
 * SearchSpring template as the search results, so the theme's card
 * rules — surface, border, image ratio, brand line, title, price,
 * button — reach them on `.woocommerce .products li.product` and
 * nothing here needs to restate any of it.
 *
 * What does need restating is the handful of layout rules the search
 * results get under `#searchspring-content`: SearchSpring wraps each
 * card body in an unclassed <div> and puts the price row inside the
 * product link, so both have to become flex columns before the price
 * can bottom-align. Those rules are scoped to an ID that only exists
 * on the search page, hence the second copy below.
 *
 * Scoped to the carousel itself rather than to a page, so the PDP and
 * cart carousels stay identical. Carousel chrome — SearchSpring's own
 * heading, the arrows — is handled per placement further down, because
 * only the PDP prints its own section heading.
 *
 * ── On the selector prefix ──
 * Every rule here is prefixed with the target's own three classes,
 * `.ss__recommendation--target.ss__theme.ss__recommendation--carousel`.
 * The bundle injects a <style> block at runtime, after this file, whose
 * rules are of the form
 *   .ss__theme.ss__recommendation--carousel .ss__results .ss__result
 * — three classes plus a target, and later in the cascade, so anything
 * shorter loses on specificity or on order. Stacking the target classes
 * costs a class over theirs and settles it. Same tactic as the
 * autocomplete section below.
 * ══════════════════════════════════════════════════════════════════ */

/* SearchSpring pads its cards (1.25rem 0.5rem 0.5rem) and gives them a
 * flat #333 border. The theme's card carries no padding of its own —
 * every row inside it sets its own 1rem inset — and takes its border
 * from the palette. */
.ss__recommendation--target.ss__theme.ss__recommendation--carousel li.ss__result {
	flex: 1;
	padding: 0 0 1rem;
	border: var(--wp--custom--border-width--tiny) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--border-radius--medium);
}


.ss__recommendation--target.ss__theme.ss__recommendation--carousel li.ss__result:hover {
	border-color: var(--wp--preset--color--primary);
}

/* Equal-height cards across the row. Swiper sizes the slide, and the
 * card sits two wrappers deep inside it, so the height has to be handed
 * down at each level. */
.ss__recommendation--target.ss__theme.ss__recommendation--carousel .swiper-slide {
	height: auto;
}

.ss__recommendation--target.ss__theme.ss__recommendation--carousel .swiper-wrapper {
	align-items: stretch;
}

.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__result-tracker {
	display: flex;
	height: 100%;
}

.ss__recommendation--target.ss__theme.ss__recommendation--carousel li.ss__result > div,
.ss__recommendation--target.ss__theme.ss__recommendation--carousel li.ss__result a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* SearchSpring's template emits Add to Cart before Quick View; the
 * native card has Quick View first. Same reorder as the search page. */
.ss__recommendation--target.ss__theme.ss__recommendation--carousel li.ss__result .ss__result__quickview {
	order: 1;
}

.ss__recommendation--target.ss__theme.ss__recommendation--carousel li.ss__result .button {
	order: 2;
}

/* `margin-top: auto` inside the link absorbs the space a short title
 * leaves, so price, Add to Cart and Quick View line up across the row
 * rather than trailing a ragged title. Matches `.koa-price-stock`. */
.ss__recommendation--target.ss__theme.ss__recommendation--carousel li.ss__result .ss__result__pricing {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.25rem;
	padding: 1.25rem 1rem 0;
	margin-top: auto;
	/* The gap down to Quick View comes from this row's line box alone —
	 * about 4px of half-leading under the price. The archive card adds
	 * WooCommerce core's 0.5em `.price` margin on top of that, but its
	 * price row is a taller two-column block; carried over here, on a
	 * single tight line, it reads as a gap rather than as spacing. */
	line-height: var(--wp--custom--line-height--normal);
}

.ss__recommendation--target.ss__theme.ss__recommendation--carousel li.ss__result .ss__result__price {
	color: var(--wp--preset--color--foreground);
}

/* No top margin, matching the native card: the link's own line box
 * supplies the gap above it. */
.ss__recommendation--target.ss__theme.ss__recommendation--carousel li.ss__result .ss__result__quickview {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0;
	padding: 0 1rem;
	line-height: calc(var(--wp--custom--line-height--normal) * 1rem);
	font-size: var(--wp--preset--font-size--min);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05rem;
	color: var(--wp--preset--color--muted-foreground);
	text-decoration: none;
	transition: color 200ms ease;
}

.ss__recommendation--target.ss__theme.ss__recommendation--carousel li.ss__result .ss__result__quickview:hover {
	color: var(--wp--preset--color--foreground);
}

/* ── Undoing SearchSpring's own carousel card CSS ──
 * The carousel variant ships a card design of its own, held in the
 * SearchSpring dashboard rather than in this repo: a full-width banner
 * badge, the brand line absolutely positioned in a black strip at
 * 240px, a brass product title, an image locked to 250px, and a button
 * painted with `var(--accent)` — a variable that doesn't exist on this
 * site, so it comes out transparent. None of it survives contact with
 * the theme's card, and all of it outranks the theme, so each piece is
 * put back here. Anything SearchSpring marks `!important` has to be
 * answered in kind.
 *
 * If those rules are ever removed from the dashboard, this block can go
 * with them — nothing below adds anything the theme's card doesn't
 * already say. */

/* The link is a flex column (above); SearchSpring wraps it and adds a
 * gap that double-spaces every row inside the card. */
.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result > a.woocommerce-loop-product__link {
	flex-wrap: nowrap;
	gap: 0;
}

/* Corner pill, not a banner across the top of the card. */
.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .ss__badge {
	width: auto;
	padding: 0.25rem 0.5rem;
	text-align: left;
}

.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .ss__badge a,
.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .ss__badge span {
	width: auto;
	border-radius: inherit;
}

/* One image ratio for every card, as on the archive: the fixed 250px
 * band SearchSpring asks for cuts the panel short of the theme's 2/3.
 * The cover/contain split is the theme's — `koa-card-contain-image` is
 * added to these cards by searchspring.js. */
.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .ss__image {
	min-height: 0;
	max-height: none;
	flex: 0 0 auto;
	object-fit: cover;
	object-position: top center;
	/* The letterbox behind a contained image is the darkest neutral here,
	 * not the surface-2 the archive uses: these carousels sit on the two
	 * lightest section backgrounds on the page, and surface-2 on
	 * surface-2 leaves the image panel with no edge at all. */
	background-color: var(--wp--preset--color--background);
}

.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result.koa-card-contain-image .ss__image {
	object-fit: contain;
	object-position: center;
}

/* Back into the flow above the title, where the theme puts it. The top
 * margin opens the card's text block under the image — the same gap the
 * card's padding-bottom leaves under Add to Cart. */
.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .archive-product-brand {
	position: static;
	width: auto;
	margin: 1rem 0 0;
	padding: 0 1rem;
	background: none;
	text-align: left;
	line-height: 1;
}

/* `flex: 0 0 auto`, against SearchSpring's `1 1 100%`: a growing title
 * eats the card's spare height, which drops the star rating away from
 * the title it belongs to and down onto the price. The price row is the
 * one that absorbs the slack (`margin-top: auto`, above), so stars stay
 * under the title and the bottom group stays aligned across the row. */
.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .ss__result__name {
	flex: 0 0 auto;
	margin: 0;
	padding: 0.5rem 1rem 0;
	font-size: var(--wp--preset--font-size--medium) !important;
	color: var(--wp--preset--color--foreground);
}

/* Products with no brand: the title opens the text block instead, so it
 * takes the gap the brand line would have carried. */
.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .ss__image + .ss__result__name {
	margin-top: 1rem;
}

.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .star-rating {
	margin: 0.5rem 1rem 0;
}

/* 0.857em, not the `small` preset the theme's `.price` rule asks for:
 * WooCommerce core sizes the price on a loop card at `.857em` from a
 * selector of equal specificity that lands later, so that — not the
 * preset — is what an archive card actually renders. The carousel's
 * cards sit in a <div>, outside the reach of core's `ul.products`
 * selector, so the same size is set here to keep the two identical.
 * `!important` answers SearchSpring's own. */
.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .ss__result__pricing {
	font-size: 0.857em !important;
	/* Price and stock are body copy, not display type. The card inherits
	 * the display serif from SearchSpring's own card styling, which is
	 * right for the title and wrong for a row of figures. */
	font-family: var(--wp--preset--font-family--body);
}

.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .ss__result__pricing .stock {
	margin: 0 0 0 auto;
}

/* Stock colours, answering SearchSpring's `!important` with the theme's
 * own values (`.stock` in _product.scss) so a card in a carousel reads
 * the same as the same card on the archive. */
.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .ss__result__pricing .in_stock_color {
	color: hsl(142, 71%, 45%) !important;
}

.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .ss__result__pricing .out_of_stock_color {
	color: hsl(0, 84%, 68%) !important;
}

.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .ss__result__pricing .available_on_backorder_color {
	color: hsl(38, 92%, 50%) !important;
}

/* Matches the theme's card button. */
.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .button.wp-element-button {
	width: calc(100% - 2rem);
	max-height: none;
	margin: 0.5rem 1rem 0;
	padding: 0.4rem 1.5rem;
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--background);
	background-color: var(--wp--preset--color--primary);
	border: var(--wp--custom--border-width--tiny) solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--border-radius--small);
	transition: all 200ms ease;
}

.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .button.wp-element-button:hover,
.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .button.wp-element-button:focus {
	color: var(--wp--preset--color--primary);
	background-color: transparent;
}

.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .button.wp-element-button.product_type_variable {
	color: var(--wp--preset--color--primary);
	background-color: transparent;
}

.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .button.wp-element-button.product_type_variable:hover,
.ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .button.wp-element-button.product_type_variable:focus {
	color: var(--wp--preset--color--background);
	background-color: var(--wp--preset--color--primary);
}

/* ── Cards on the darker section ──
 * The card is a shade of the section it sits on, so on a `surface-1`
 * section the whole card drops a step: darkest body, `surface-2` behind
 * the image. Keyed to the section modifier rather than to a section id,
 * so it follows if the sections are ever re-ordered or re-tinted. */
.koa-pdp-section--surface-1 .ss__recommendation--target.ss__theme.ss__recommendation--carousel li.ss__result {
	background-color: var(--wp--preset--color--background);
}

.koa-pdp-section--surface-1 .ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__results .ss__result .ss__image {
	background-color: var(--wp--custom--color--surface-2);
}

/* A profile that came back empty: searchspring.js marks the section and
 * its jump-nav entry, so a heading is never left over blank space. */
.koa-pdp-section.koa-recs-empty,
.koa-pdp-section-nav__link.koa-recs-empty {
	display: none;
}

/* ── Carousel chrome ──
 *
 * Shared by the PDP recommendation sections and the recommendations
 * SearchSpring drops into its own `.ss__no-results` block on archives it has
 * no facet config for. Same component, so the arrow and layout rules below
 * are scoped to both — previously they were .koa-pdp-section only, which left
 * the archive carousel with SearchSpring's raw chrome.
 *
 * Not shared: the two .koa-pdp-section--surface-1 rules, which are specific to
 * that section background, and the rule directly below.
 *
 * The theme renders its own section heading (eyebrow + h2 + brass rule) around
 * the container it hands to SearchSpring on the PDP, so SearchSpring's header
 * is a duplicate there. In .ss__no-results it is the only heading the section
 * has, so it must stay. */
.koa-pdp-section .ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__recommendation__header {
	display: none;
}

/* SearchSpring pins its arrows at left/right: -32px, outside the
 * carousel — which here is the page gutter. Reserve an inner gutter and
 * bring them inside it instead, exactly as `.koa-carousel` does, so
 * nothing hangs off the section at narrow widths. Below that the
 * carousel is swiped, and the arrows go, as they do in the theme. */
:is(.koa-pdp-section, .ss__no-results) .ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__carousel__prev-wrapper,
:is(.koa-pdp-section, .ss__no-results) .ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__carousel__next-wrapper {
	display: none;
}

@media (min-width: 768px) {
	:is(.koa-pdp-section, .ss__no-results) .ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__carousel {
		padding-inline: 3rem;
	}

	:is(.koa-pdp-section, .ss__no-results) .ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__carousel.ss__carousel__recommendation > .ss__carousel__prev-wrapper,
	:is(.koa-pdp-section, .ss__no-results) .ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__carousel.ss__carousel__recommendation > .ss__carousel__next-wrapper {
		display: block;
		width: 2.5rem;
		height: 2.5rem;
		margin-top: -1.25rem;
	}

	:is(.koa-pdp-section, .ss__no-results) .ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__carousel.ss__carousel__recommendation > .ss__carousel__prev-wrapper {
		left: 0;
		right: auto;
	}

	:is(.koa-pdp-section, .ss__no-results) .ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__carousel.ss__carousel__recommendation > .ss__carousel__next-wrapper {
		left: auto;
		right: 0;
	}
}

/* Matches `.koa-carousel__nav` in the theme. */
:is(.koa-pdp-section, .ss__no-results) .ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__carousel__prev,
:is(.koa-pdp-section, .ss__no-results) .ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__carousel__next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: var(--wp--custom--border-width--tiny) solid var(--wp--preset--color--border);
	border-radius: 50%;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--primary-text);
	cursor: pointer;
	transition: border-color 300ms ease, background-color 300ms ease;
}

:is(.koa-pdp-section, .ss__no-results) .ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__carousel__prev:hover,
:is(.koa-pdp-section, .ss__no-results) .ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__carousel__next:hover {
	border-color: var(--wp--preset--color--primary-text);
	background: var(--wp--preset--color--secondary);
}

/* The glyphs ship with a hardcoded brass `fill` and a 16px box that
 * crowds the 40px button; both are taken over here so the arrow tracks
 * the button's own colour. */
:is(.koa-pdp-section, .ss__no-results) .ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__carousel__prev .ss__icon,
:is(.koa-pdp-section, .ss__no-results) .ss__recommendation--target.ss__theme.ss__recommendation--carousel .ss__carousel__next .ss__icon {
	width: 0.75rem;
	height: 0.75rem;
	fill: currentColor;
}

/* ══════════════════════════════════════════════════════════════════
 * Autocomplete flyout
 *
 * SearchSpring ships this panel unstyled: a 900px near-black slab
 * (#1a1a1a) hanging off a 600px input, in three columns — suggestions,
 * facet lists, product tiles — with its own grey (#393939) and its own
 * brass (#be9359). Everything below rebuilds it as a drawer of the
 * search field, on the theme's own tokens.
 *
 * Three deliberate changes to what the panel does, not just how it looks:
 *   1. One column, not three. Filtering a result set you haven't seen
 *      yet is backwards, so the facet lists collapse to a chip row and
 *      products get the space back.
 *   2. Rows, not tiles. Names and prices scan; 160px tile crops don't.
 *   3. Products/Videos becomes a text toggle rather than two 231px
 *      buttons, and reads correctly — brass means active.
 *
 * ── On the selector prefix ──
 * SearchSpring's bundle injects its own <style> at runtime, after this
 * file, holding rules like
 *   .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete
 * at three classes of specificity. A bare `.ss__autocomplete` loses to
 * that on both specificity and source order, so every structural rule
 * here carries the same two target classes plus the theme's form class —
 * four classes, which clears theirs without a single !important.
 *
 * Note there are two panels on the page (the desktop and mobile header
 * forms each get one), which is why nothing here is scoped by ID.
 * ══════════════════════════════════════════════════════════════════ */

/* ── Panel shell ── */
/* SearchSpring sizes this positioning wrapper per state — narrower when a
 * query returns no facets, for instance. Pinning it to the form keeps the
 * panel the width of the field it drops out of, whatever the state. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default {
	width: 100%;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete {
	flex-direction: column;
	/* SearchSpring sets `flex-wrap: wrap` for its three-column layout. Left
	 * on, a capped height makes the column wrap sideways — the results band
	 * lands in a second column off the panel's right edge. */
	flex-wrap: nowrap;
	/* Match the field, not the viewport: the mobile header form is narrower
	 * than `100vw - 2rem`, and a panel wider than the input it belongs to
	 * is the exact thing this is fixing. */
	width: min(600px, 100%);
	max-height: min(72vh, 40rem);
	/* The panel itself never scrolls — the result rows do (below), which
	 * keeps the "see all results" bar pinned in view. */
	overflow: hidden;
	background: var(--wp--custom--color--surface-1);
	/* With the wrapper's #ddd ring gone (below), this is the only edge the
	 * flyout draws — the theme's hairline token, dim enough to define the
	 * shape without outlining it. */
	border: var(--wp--custom--border-width--tiny) solid var(--wp--preset--color--border);
	/* Brass along the top edge only: the seam where the panel meets the
	 * search field, so the two read as one object rather than a box
	 * floating under an unrelated input. */
	border-top-color: var(--wp--preset--color--primary);
	border-radius: 0 0 var(--wp--custom--border-radius--medium) var(--wp--custom--border-radius--medium);
	box-shadow: var(--wp--custom--box-shadow--card);
}

/* Square the field's bottom corners while the panel is open so the seam
 * is flush. `.ss__autocomplete` only exists in the DOM when open, which
 * makes it the open-state hook — no JS needed. */
.site-header__search-form:has(.ss__autocomplete) .site-header__search-input {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__terms,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__facets,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__content {
	width: 100%;
	background: transparent;
	padding: 0.95rem 1.05rem;
}

/* Bands are divided top-to-bottom now, so the column dividers SearchSpring
 * draws down their sides — a near-white #ddd on the facets band — have to
 * go, or a light rule runs down the right of "Narrow to". */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__terms,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__facets,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__content {
	border-right: 0;
	border-left: 0;
	border-bottom: 0;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__facets,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__content {
	border-top: var(--wp--custom--border-width--tiny) solid var(--wp--preset--color--border);
}

/* ── Section labels ──
 * The bands are unlabelled in SearchSpring's markup — survivable across
 * three columns, confusing once they're stacked. `:has()` keeps a label
 * from appearing over a band with nothing in it. */
.site-header__search-form .ss__autocomplete__terms:has(a)::before,
.site-header__search-form .ss__autocomplete__facets:has(a)::before,
.site-header__search-form .ss__autocomplete .ss__autocomplete__title h5 {
	display: block;
	margin: 0 0 0.7rem;
	padding: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--min);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--looser);
	color: var(--wp--preset--color--muted-foreground);
	line-height: 1;
}

/* On an empty field SearchSpring shows trending terms under a heading of
 * its own ("Popular Searches", bold, indented 20px). That heading is the
 * right label for that state, so it gets the eyebrow treatment above and
 * ours steps aside rather than stacking a second one on top of it. */
.site-header__search-form .ss__autocomplete__terms:not(.ss__autocomplete__terms-trending):has(a)::before {
	content: "Suggestions";
}

/* Strip the indents and stacked margins SearchSpring puts inside the terms
 * band, so its heading and chips start on the same left edge as every
 * other band. These need the long chain — the rules they're undoing are
 * deeper than the ones above. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__terms .ss__autocomplete__title,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__terms .ss__autocomplete__terms__trending,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__terms .ss__autocomplete__terms__suggestions {
	margin: 0;
	padding: 0;
}

/* Size and weight belong with the eyebrow definition above, but SearchSpring
 * styles this h5 from a deeper selector than that one, so it kept the 16px
 * bold heading and only the properties SearchSpring leaves alone got through.
 * Visible whenever a second sub-section appears — "Popular Searches" and
 * "Recent Searches" rendered noticeably larger than "Narrow to" below them.
 * Values match the eyebrow; everything else there already applies. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__terms .ss__autocomplete__title h5 {
	margin: 0 0 0.7rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--min);
	font-weight: 500;
}

/* With search history stored, SearchSpring splits this band into a trending
 * and a history sub-section. It separates them with nothing, so "Recent
 * Searches" sat directly under the trending chips and read as a label for
 * them. Wider than the 0.7rem under a label, so each heading groups with the
 * chips beneath it, and narrower than the padding between bands, so the two
 * stay one band. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__terms .ss__autocomplete__terms__history {
	margin-top: 1.25rem;
	padding: 0;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__terms .ss__autocomplete__terms__options {
	margin: 0;
	padding: 0;
}

.site-header__search-form .ss__autocomplete__facets:has(a)::before {
	content: "Narrow to";
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__terms:not(:has(a)),
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__facets:not(:has(a)) {
	display: none;
}

/* ── Chips: query suggestions and facet options ── */

/* `flex-start` so the chips size to their own content.
 *
 * Each facet list is flattened to `display: contents` below, so every option
 * from every facet becomes a flex item of this one container. SearchSpring
 * gives each option `margin-bottom: 5px` and then zeroes it on the last child
 * of each list — and with items stretching by default, the one carrying no
 * bottom margin grew 5px taller than its neighbours to match the line,
 * leaving a lone pill with dead space inside it. The spacing here comes from
 * `gap`, so those margins are only along for the ride; they sit behind
 * eight- and nine-class selectors that are not worth outranking when the
 * stretch is the actual problem. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__terms .ss__autocomplete__terms__options,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__facets .ss__facets.ss__facets {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.4rem;
	width: auto;
}

/* Flatten SearchSpring's facet scaffolding — dropdown wrapper, content
 * box, options box — so every option lands in the same flex row. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__facets .ss__facet,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__facets .ss__facet__dropdown,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__facets .ss__dropdown__content,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__facets .ss__facet__options,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__facets .ss__facet-list-options {
	display: contents;
}

/* The per-facet headings (Functionality / Brand / Categories) go with the
 * columns they used to label. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__facets .ss__dropdown__button {
	display: none;
}

/* Four per facet is enough to be useful without pushing products below
 * the fold; the footer link goes to the full result page. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__facets .ss__facet-list-options__option:nth-child(n + 5) {
	display: none;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__terms__option,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__facets .ss__facet-list-options__option {
	display: block;
	margin: 0;
	padding: 0.3rem 0.6rem;
	/* Not `--border`: that token is tuned for edges on the page background
	 * and all but disappears against surface-1, which leaves the chips
	 * reading as loose text. Mixed from the foreground so the outline is
	 * visible without competing with the brass on the active one. */
	border: var(--wp--custom--border-width--tiny) solid color-mix(in srgb, var(--wp--preset--color--foreground) 26%, transparent);
	border-radius: var(--wp--custom--border-radius--pill);
	background: transparent;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

/* Facet options carry their own bottom margin, which fights the flex gap
 * and leaves the chip rows further apart vertically than horizontally. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__facets .ss__facet-list-options .ss__facet-list-options__option {
	margin: 0;
}

/* The chip is the option wrapper, so the link inside it gives up its own
 * 10px/20px box and 15px type — otherwise the padding doubles up and the
 * suggestion chips come out half again as tall as the facet ones. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__terms .ss__autocomplete__terms__options .ss__autocomplete__terms__option a {
	display: block;
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	color: inherit;
	text-decoration: none;
	background: none;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__terms__option em {
	font-style: normal;
	color: var(--wp--preset--color--primary-text);
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__terms__option:hover,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__terms__option--active,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__facets .ss__facet-list-options__option:hover,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__facets .ss__facet-list-options__option:focus-visible {
	background: var(--wp--custom--color--surface-2);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-text);
}

/* SearchSpring counts every option; the number is noise on a chip. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__facets .ss__facet__count,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__facets .facetwp-counter {
	display: none;
}

/* ── Results header: label left, Products/Videos toggle right ── */
/* The content band takes the leftover height and hands it to the rows, so
 * a long result list scrolls inside the band and the footer action bar
 * stays pinned. `min-height: 0` is what lets a flex child shrink below
 * its content and actually scroll. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__content__results {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/* The scroll band.
 *
 * The margin reset is the fix for the footer overlap: SearchSpring sets
 * `margin: 0 -10px -20px` here, and a negative bottom margin pulls the next
 * sibling — the "see all results" bar — up by 20px, straight over the last
 * row. The 20px bottom padding goes with it (both come from selectors
 * carrying `.ss__autocomplete--overflow`, hence the extra link in this
 * chain).
 *
 * Basis stays `auto`, not 0: the panel's height is content-driven under a
 * max-height, so a zero basis makes this band contribute no height and the
 * whole panel collapses in on itself. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__content .ss__autocomplete__content__results .ss__autocomplete__results {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* SearchSpring gutters this row with `margin: 0 -5px`, which pushes the
 * label 5px left of the chips above it and the toggle 5px past the right
 * edge — the band ends up out of line with its neighbours on both sides.
 * The wrapper's own 20px bottom margin goes too; the row supplies the gap
 * down to the first result. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__tabs {
	/* Fixed height, so the band below it gets all the leftover space. */
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__tabs__row {
	display: flex;
	align-items: baseline;
	gap: 0.9rem;
	margin: 0 0 0.6rem;
	padding: 0;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__tabs__row::before {
	content: "Top matches";
	margin-right: auto;
	font-size: var(--wp--preset--font-size--min);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--looser);
	color: var(--wp--preset--color--muted-foreground);
	line-height: 1;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__tabs .ss__tabs__row .ss__tabs__column--button {
	flex: 0 0 auto;
	width: auto;
	padding: 0;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__tabs .ss__button {
	width: auto;
	min-width: 0;
	height: auto;
	padding: 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--min);
	/* Colour carries the active state, so the weight can stay quiet. */
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--loose);
	color: var(--wp--preset--color--muted-foreground);
	cursor: pointer;
	transition: color 160ms ease;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__tabs .ss__button:hover,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__tabs .ss__button.ss__active {
	color: var(--wp--preset--color--primary-text);
	background: none;
	border: 0;
}

/* ── Result rows ── */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results {
	display: flex;
	flex-direction: column;
	/* Same trap as the panel: SearchSpring's wrap is what turns its tile
	 * grid into rows, and it would silently fold rows 4-6 into a second
	 * column hidden past the right edge. */
	flex-wrap: nowrap;
	width: auto;
	padding: 0;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result {
	display: grid;
	grid-template-columns: 3px 40px minmax(0, 1fr);
	align-items: center;
	gap: 0 0.85rem;
	width: auto;
	margin: 0;
	padding: 0.5rem 0;
	position: relative;
	transition: background-color 160ms ease;
}

/* Hairline between rows, starting past the plate so the images read as a
 * column rather than a list of boxed cells. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result + .ss__result::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 3.75rem;
	height: var(--wp--custom--border-width--tiny);
	background: var(--wp--preset--color--border);
}

/* Keyboard/hover marker in the left gutter — the row fill alone is easy
 * to lose against surface-1 on a dim screen, the brass tick isn't. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result::after {
	content: "";
	grid-column: 1;
	grid-row: 1;
	width: 3px;
	height: 2.1rem;
	border-radius: 0 2px 2px 0;
	background: transparent;
	transition: background-color 160ms ease;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result:hover,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result:focus-within {
	background: var(--wp--custom--color--surface-2);
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result:hover::after,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result:focus-within::after {
	background: var(--wp--preset--color--primary);
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result__image-wrapper {
	grid-column: 2;
	grid-row: 1;
	width: auto;
	margin: 0;
	padding: 0;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result__image-wrapper .ss__image {
	display: block;
	width: 40px;
	height: 50px;
	background: var(--wp--custom--color--surface-2);
	border-radius: 2px;
	overflow: hidden;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result__image-wrapper img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	display: block;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result__details {
	grid-column: 3;
	grid-row: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 0.85rem;
	width: auto;
	padding: 0 1.05rem 0 0;
	text-align: left;
}

/* Display serif, one line: this is how the site names objects everywhere
 * else, and a truncated single line beats two ragged ones in a menu. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result__details__title {
	min-width: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--tiny);
	line-height: var(--wp--custom--line-height--small);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The anchor is the box the text actually fills, so the ellipsis has to
 * live here — on the wrapper alone the name just gets sheared mid-word. */
/* SearchSpring sets 700 on the link itself, from a selector that runs the
 * full depth of the result — so this one has to match it class for class.
 * Libre Baskerville's bold shouts in a menu, and product names are set
 * regular everywhere else on the site. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result .ss__result__details .ss__result__details__title a {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 400;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	transition: color 160ms ease;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result:hover .ss__result__details__title a {
	color: var(--wp--preset--color--primary-text);
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result__pricing {
	display: block;
	margin: 0;
	padding: 0;
	text-align: right;
	white-space: nowrap;
	/* Down a step from the name: in a row this dense the price is a
	 * supporting detail, not the thing being scanned. */
	font-size: var(--wp--preset--font-size--min);
	color: var(--wp--preset--color--foreground);
	font-variant-numeric: tabular-nums;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result__price {
	font-size: var(--wp--preset--font-size--min);
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result__pricing .stock {
	display: block;
	margin: 0;
	/* Flush right under the price — SearchSpring left-aligns it, which puts
	 * a ragged edge down the right of the list. */
	text-align: right;
	/* A step under the price rather than equal to it: all-caps letterforms
	 * at the same point size read larger than lining digits, so matching
	 * the number leaves the stock line looking like the louder of the two.
	 * This lands them at the same optical weight. `!important` only because
	 * the theme sets `.stock { font-size: … !important }` for WooCommerce,
	 * and that rule reaches in here too. */
	font-size: 0.6875rem !important;
	/* Matches the archive card's stock line, which is 400. */
	font-weight: 400;
	letter-spacing: var(--wp--custom--letter-spacing--loose);
	text-transform: uppercase;
}

/* ── Footer action bar ──
 * The primary way out of the flyout, so it gets the full width and the
 * brass instead of sitting in a corner at the smallest weight. The
 * negative margins bleed it past the content band's padding. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__content__info {
	/* Result rows are `position: relative`, so they paint above static
	 * siblings. Giving the bar a stacking position of its own means a row
	 * can never bleed over it, whatever the band height works out to. */
	position: relative;
	z-index: 1;
	margin: 0.85rem -1.05rem -0.95rem;
	padding: 0;
	border-top: var(--wp--custom--border-width--tiny) solid var(--wp--preset--color--primary);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
	transition: background-color 160ms ease;
	text-align: left;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__content__info:hover {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__content__info a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.8rem 1.05rem;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--letter-spacing--loose);
	color: var(--wp--preset--color--primary-text);
	text-decoration: none;
}

/* SearchSpring's chevron ships in a 56×56 viewBox inside a wrapper span
 * that it pins with `position: absolute; top: 4.5px` — which is why no
 * amount of flex centring moved it. Put the wrapper back in flow and the
 * link's own `align-items: center` parks it on the optical centre. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__content__info .ss__icon__wrapper {
	position: static;
	top: auto;
	right: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	flex: 0 0 auto;
	height: auto;
	line-height: 0;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__content__info .ss__icon {
	display: block;
	width: 0.65rem;
	height: 0.65rem;
	fill: currentColor;
	transition: transform 160ms ease;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__content__info:hover .ss__icon {
	transform: translateX(3px);
}

/* Brass focus ring in place of the browser default blue, which reads as a
 * foreign element on this surface. */
.site-header__search-form .ss__autocomplete a:focus-visible,
.site-header__search-form .ss__autocomplete button:focus-visible {
	outline: var(--wp--custom--border-width--small) solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Ring the suggestion chip rather than the link inside it.
 *
 * An outline follows the border-radius of the element it is drawn on. On a
 * facet chip that is the same element — the anchor is the pill — but on a
 * suggestion chip the pill is the wrapping div and the anchor is a bare text
 * box with square corners, so the ring came out as a rectangle sitting inside
 * a rounded pill. Moving it to the wrapper picks up the pill radius and traces
 * the chip the visitor actually sees.
 *
 * Both rules are gated behind `:has()`: if it were ever unsupported the
 * suppression below would be dropped along with the replacement above, leaving
 * the square ring rather than no ring at all. */
.site-header__search-form .ss__autocomplete .ss__autocomplete__terms__option:has(a:focus-visible) {
	outline: var(--wp--custom--border-width--small) solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.site-header__search-form .ss__autocomplete .ss__autocomplete__terms__option:has(a:focus-visible) a:focus-visible {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.site-header__search-form .ss__autocomplete *,
	.site-header__search-form .ss__autocomplete *::before,
	.site-header__search-form .ss__autocomplete *::after {
		transition: none !important;
	}
}

/* ── Video results ──
 * The Videos tab is not a variant of the product result — SearchSpring
 * renders a different element entirely (`.ss__result--video`, with an
 * `<h2>` header before the thumbnail and no price), so none of the row
 * rules above reach it. Left alone it stacks a full-width title on top of
 * a 640px thumbnail and the two overlap. Same row anatomy as the products,
 * with a 16:9 plate instead of a portrait one. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result--video {
	display: grid;
	grid-template-columns: 3px 64px minmax(0, 1fr);
	align-items: center;
	gap: 0 0.85rem;
	width: auto;
	margin: 0;
	padding: 0.5rem 0;
	position: relative;
	transition: background-color 160ms ease;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result--video + .ss__result--video::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 4.9rem;
	height: var(--wp--custom--border-width--tiny);
	background: var(--wp--preset--color--border);
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result--video::after {
	content: "";
	grid-column: 1;
	grid-row: 1;
	width: 3px;
	height: 2.1rem;
	border-radius: 0 2px 2px 0;
	background: transparent;
	transition: background-color 160ms ease;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result--video:hover,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result--video:focus-within {
	background: var(--wp--custom--color--surface-2);
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result--video:hover::after,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result--video:focus-within::after {
	background: var(--wp--preset--color--primary);
}

/* Thumbnail comes second in the markup; `order` puts it back on the left
 * without touching SearchSpring's DOM. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result--video .post-thumbnail {
	grid-column: 2;
	grid-row: 1;
	position: relative;
	display: block;
	width: 64px;
	height: 36px;
	margin: 0;
	padding: 0;
	border-radius: 2px;
	overflow: hidden;
	background: var(--wp--custom--color--surface-2);
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result--video .post-thumbnail picture,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result--video .post-thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
}

/* A play mark, so a video row is never mistaken for a product row. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result--video .post-thumbnail::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent var(--wp--preset--color--white);
	filter: drop-shadow(0 1px 2px hsl(0 0% 0% / 0.6));
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result--video .entry-header {
	grid-column: 3;
	grid-row: 1;
	min-width: 0;
	margin: 0;
	padding: 0 1.05rem 0 0;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result--video .ss__article__name {
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--small);
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result--video .ss__article__name a {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 400;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	transition: color 160ms ease;
}

.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result--video:hover .ss__article__name a {
	color: var(--wp--preset--color--primary-text);
}

/* A video result also carries a description, a "Watch on YouTube" link and
 * a "Read more" link — an article teaser's worth of content that spills out
 * from under the row. The row itself already offers both destinations: the
 * title goes to the product's video section, the plate to YouTube. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result--video .ss__video--more,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result--video .ss__article__description,
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__results .ss__result--video .read-more {
	display: none;
}

/* SearchSpring caps the results wrapper with a 20px opaque strip
 * (`::after`, background #1a1a1a, z-index 2, bled out with `margin: 0
 * -20px`) to mask the last row against its own black panel. On surface-1
 * it is simply a black bar lying across the results. The rows scroll in
 * their own band here and the footer closes the panel, so nothing needs
 * masking. */
.site-header__search-form .ss__autocomplete--target.ss__autocomplete--default .ss__autocomplete .ss__autocomplete__content__results::after {
	display: none;
}

/* ── The positioning wrapper ──
 * This is the element behind the panel, and SearchSpring dresses it as a
 * panel in its own right: `background: #1a1a1a`, `border: 1px solid #ddd`,
 * `border-radius: 0 0 5px 5px`. That near-white border is what traces a
 * hard ring around the whole flyout — nothing on `.ss__autocomplete`
 * itself could have fixed it. Stripped back to a plain positioning box so
 * the panel is the only thing drawing an edge. */
.site-header__search .site-header__search-form .ss__autocomplete--target.ss__autocomplete--default {
	background: transparent;
	border: 0;
	border-radius: 0;
}