/**
 * Algolia InstantSearch — Search Results Page Styles
 */

/* ------------------------------------------------------------------ */
/*  Page layout                                                       */
/* ------------------------------------------------------------------ */
#abi-algolia-search-results {
	padding-bottom: 60px;
}

/* ------------------------------------------------------------------ */
/*  Page title                                                        */
/* ------------------------------------------------------------------ */
.abi-search-results__title {
	font-family: "Agatho", sans-serif;
	font-size: 28px;
	font-weight: 300;
	letter-spacing: 0.01em;
	margin: 0 0 8px;
	color: #434243;
}

/* ------------------------------------------------------------------ */
/*  Search box — visually matches overlay .abi-search-topbar__input   */
/* ------------------------------------------------------------------ */
.abi-search-box,
.abi-search-box .ais-SearchBox,
.abi-search-box .ais-SearchBox-form {
	position: relative;
	display: block;
}

.abi-search-box__input.ais-SearchBox-input {
	width: 100%;
	color: #333;
	border: 1.5px solid #ccc;
	border-radius: 8px !important;
	padding: 16px 44px 16px 16px !important;
	background: #fff;
	outline: none;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.abi-search-box__input.ais-SearchBox-input::-webkit-search-cancel-button,
.abi-search-box__input.ais-SearchBox-input::-webkit-search-decoration {
	-webkit-appearance: none;
}

.abi-search-box__input.ais-SearchBox-input:focus {
	border-color: #888;
}

.abi-search-box__input.ais-SearchBox-input::placeholder {
	color: #aaa;
}

/* Clickable magnifier (InstantSearch submit button) */
.abi-search-box__submit.ais-SearchBox-submit {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #888;
	background: none;
	border: 0;
	padding: 4px;
	margin: 0;
	cursor: pointer;
	border-radius: 4px;
	transition: color 0.15s ease, background 0.15s ease;
}

.abi-search-box__submit.ais-SearchBox-submit:hover,
.abi-search-box__submit.ais-SearchBox-submit:focus-visible {
	color: #222;
	background: rgba(0, 0, 0, 0.05);
	outline: none;
}

.abi-search-box__submit.ais-SearchBox-submit .ais-SearchBox-submitIcon {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Spinner shown while a search is in flight (input event → render). */
.is-searching .abi-search-box__submit.ais-SearchBox-submit .ais-SearchBox-submitIcon {
	display: none;
}

.is-searching .abi-search-box__submit.ais-SearchBox-submit::before {
	content: '';
	display: block;
	width: 16px;
	height: 16px;
	border: 2px solid #ddd;
	border-top-color: #555;
	border-radius: 50%;
	animation: abi-search-spin 0.7s linear infinite;
}

@keyframes abi-search-spin {
	to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ */
/*  Initial-load spinner inside #abi-search-hits — shown until        */
/*  InstantSearch's connectHits replaces innerHTML on first render.   */
/*  Not used on SSR'd category pages (real tiles render server-side). */
/* ------------------------------------------------------------------ */
.abi-search-hits-loader {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 280px;
	padding: 60px 0;
}

.abi-search-hits-loader__spinner {
	width: 36px;
	height: 36px;
	border: 3px solid #eee;
	border-top-color: #434243;
	border-radius: 50%;
	animation: abi-search-spin 0.7s linear infinite;
}

.abi-search-box__reset.ais-SearchBox-reset,
.abi-search-box .ais-SearchBox-loadingIndicator {
	display: none;
}

/* ------------------------------------------------------------------ */
/*  Toolbar: showing count + sort                                     */
/* ------------------------------------------------------------------ */
#abi-search-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Reserve the row's natural height while the showing-count + sort
	   widgets are being mounted. Without this, the toolbar starts at
	   ~17px (just border + padding) and jumps to ~50px once JS fills
	   in `#abi-search-showing` and `#abi-search-sortby` — visible CLS
	   on every load. 30px content + 16px padding-bottom + 1px border
	   matches the post-render natural height. */
	min-height: 47px;
	box-sizing: border-box;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid #eee;
	gap: 12px;
}

/* --- Left: "X Results showing of Y ˅" --- */
.abi-search-toolbar__left {
	display: flex;
	align-items: center;
}

.abi-showing-inner {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: 'Mr Eaves', sans-serif;
	font-size: 14px;
	color: #444;
	cursor: pointer;
	user-select: none;
}

.abi-showing-count,
.abi-showing-total {
	font-family: "Mr Eaves Bold", "Mr Eaves", sans-serif;
	font-weight: 400;
	color: #434243;
}

.abi-showing-text {
	font-weight: 400;
	color: #666;
}

.abi-showing-chevron {
	color: #666;
	flex-shrink: 0;
	margin-left: 2px;
}

/* The native select sits invisible on top of the custom label */
.abi-showing-select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	font-size: 14px;
}

/* --- Right: Sort button --- */
.abi-search-toolbar__right {
	display: flex;
	align-items: center;
}

.abi-sortby {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.abi-sortby::after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	background-image: url("https://cdn.bfldr.com/8266KQUL/at/7bjfjktckx9ctqwhj5t8jfm/filter-sortby.svg");
	background-repeat: no-repeat;
	background-size: 14px 14px;
	flex-shrink: 0;
	order: 2;
	cursor: pointer;
}

.abi-sortby__select.ais-SortBy-select {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: none;
	cursor: pointer;
	font-weight: 400;
	font-size: 14px;
	color: #444;
	padding: 0;
	outline: none;
	text-align: right;
	text-align-last: right;
	transition: color 0.15s ease;
}

.abi-sortby__select.ais-SortBy-select:hover {
	color: #000;
}

/* ------------------------------------------------------------------ */
/*  Mobile filter toggle (hidden on desktop via uk-hidden@m)          */
/* ------------------------------------------------------------------ */
.abi-search-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 1px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
	font-family: 'Mr Eaves', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #444;
	padding: 8px 20px;
	margin-top: 16px;
	margin-bottom: 16px;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.abi-search-filter-toggle:hover {
	color: #000;
	border-color: #434243;
}

.abi-search-filter-toggle__icon {
	display: block;
	width: 14px;
	height: 12px;
	flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/*  Active refinements (pills + clear-all)                            */
/* ------------------------------------------------------------------ */
.abi-active-refinements {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.abi-active-refinements__list:empty,
.abi-active-refinements__clear:empty {
	display: none;
}

/* InstantSearch's clearRefinements always renders a (disabled) button
   even with zero refinements, so :has(.abi-clear-refinements__button)
   always matches. Key off the pill class — `.abi-current-refinements__item`
   only appears when there's at least one active refinement. */
.abi-active-refinements:not(:has(.abi-current-refinements__item)) {
	display: none;
}

.abi-active-refinements:has(.abi-current-refinements__item) {
	margin-bottom: 18px;
}

.abi-current-refinements,
.abi-current-refinements__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.abi-current-refinements__item {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.abi-current-refinements__label {
	display: none;
}

.abi-current-refinements__category {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 360px;
	padding: 8px 14px;
	font-family: inherit;
	color: #333;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 999px;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.abi-current-refinements__category:hover {
	border-color: #434243;
	color: #434243;
}

.abi-current-refinements__category-label {
	color: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.abi-current-refinements__delete {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #888;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	flex-shrink: 0;
	transition: color 0.15s ease, background 0.15s ease;
}

.abi-current-refinements__delete:hover {
	color: #434243;
	background: rgba(0, 0, 0, 0.06);
}

.abi-clear-refinements__button {
	background: none;
	border: 0;
	padding: 6px 4px;
	margin: 0;
	font-family: inherit;
	font-size: 13px;
	color: #777;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.15s ease;
}

.abi-clear-refinements__button:hover {
	color: #000;
}

.abi-clear-refinements__button--disabled,
.abi-clear-refinements__button[disabled] {
	display: none;
}

/* ------------------------------------------------------------------ */
/*  Sidebar — sticky on desktop, hidden on mobile until toggled       */
/* ------------------------------------------------------------------ */
@media (min-width: 960px) {
	.abi-search-sidebar {
		position: sticky !important;
		top: var(--abi-header-height, 100px); /* JS sets this via #abi-header measurement */
		align-self: flex-start !important; /* override uk-grid stretch so sticky activates */
		max-height: calc(100vh - var(--abi-header-height, 100px) - 20px);
		display: flex;
		flex-direction: column;
		overflow: visible !important; /* UIkit uk-grid sets overflow:hidden via JS — must override */
	}

	/* Heading stays pinned at the top of the sticky sidebar */
	.abi-search-sidebar > .abi-search-sidebar__heading {
		flex-shrink: 0;
	}

	/* Only the facets area scrolls; thin scrollbar when overflowing */
	.abi-search-sidebar > .abi-search-facets {
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: #c7c6c7 transparent;
	}

	.abi-search-sidebar > .abi-search-facets::-webkit-scrollbar {
		width: 6px;
	}

	.abi-search-sidebar > .abi-search-facets::-webkit-scrollbar-track {
		background: transparent;
	}

	.abi-search-sidebar > .abi-search-facets::-webkit-scrollbar-thumb {
		background-color: #c7c6c7;
		border-radius: 3px;
	}

	.abi-search-sidebar > .abi-search-facets::-webkit-scrollbar-thumb:hover {
		background-color: #999;
	}

	/* Ensure uk-grid parent does not block sticky */
	#abi-algolia-search-results .uk-grid {
		align-items: flex-start !important;
	}
}

@media (max-width: 959px) {
	.abi-search-sidebar {
		display: none;
		width: 100% !important; 
	}

	.abi-search-sidebar.is-open {
		display: block;
	}
}

/* ------------------------------------------------------------------ */
/*  Sidebar heading ("Filters" label + icon)                         */
/* ------------------------------------------------------------------ */
.abi-search-sidebar__heading {
	display: flex;
	align-items: center;
	gap: 10px;
	/* Match the toolbar's bottom border + spacing so "Filters" sits on
	   the same baseline as "X Results showing of Y / Popular". */
	margin-bottom: 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid #eee;
	font-size: 14px;
	font-weight: 400;
	color: #333;
}

.abi-search-sidebar__heading img {
	opacity: 0.6;
}

/* Hide the Category facet on the search results page (kept visible on category archives).
   #abi-search-box only exists on /search/, so :has() scopes this to search results only. */
#abi-algolia-search-results:has(#abi-search-box) .abi-search-facet-group[data-facet="category"] {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/*  Facets / refinement list (vertical sidebar accordion)             */
/* ------------------------------------------------------------------ */
.abi-search-facets {
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	overflow: hidden;
	padding: 0 20px;
}

/* Reserve sidebar facet column height while dynamicWidgets boots so
   any content below the sidebar (in the same column flow) doesn't
   jump when Algolia responds. ~5 closed-accordion rows ≈ 280px. The
   reservation only matters before first render — once content fills
   in, natural height takes over. Mobile sidebar is display:none until
   the user opens the sheet, so this min-height is desktop-only via
   the existing media query in .abi-search-sidebar above. */
#abi-search-facets-dynamic {
	min-height: 280px;
}

/* --- Accordion facet groups --- */
.abi-search-facet-group {
	display: block;
	border-bottom: 1px solid #e8e8e8;
}

/* dynamicWidgets wraps each facet in its own .ais-DynamicWidgets-widget,
   so .abi-search-facet-group is always :last-child of its wrapper. Strip
   the border from the wrapper that's actually last in the list. */
.ais-DynamicWidgets-widget:last-child .abi-search-facet-group {
	border-bottom: none;
}

.abi-search-facet-group__toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	font-family: 'Mr Eaves', sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: #444;
	padding: 16px 0;
	text-align: left;
	transition: color 0.15s ease;
}

.abi-search-facet-group__toggle::after {
	content: '+';
	font-size: 20px;
	font-weight: 300;
	line-height: 1;
	color: #888;
	flex-shrink: 0;
	transition: color 0.15s ease;
}

.abi-search-facet-group__toggle:hover {
	color: #000;
}

.abi-search-facet-group.is-open .abi-search-facet-group__toggle::after {
	content: '\2212'; /* minus sign */
}

/* Body: animated via max-height in JS */
.abi-search-facet-group__body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	padding-bottom: 0;
}

/* Allow price slider tooltips to be visible when open */
.abi-search-facet-group.is-open .abi-search-facet-group__body {
	overflow: visible;
}

/* --- Facet item list (vertical) --- */
.abi-facet__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}

.abi-facet__item {
	margin: 0;
}

.abi-facet__label {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-family: 'Mr Eaves', sans-serif;
	font-size: 14px;
	color: #444;
	padding: 6px 0;
	gap: 10px;
	transition: color 0.15s ease;
}

.abi-facet__label:hover {
	color: #000;
}

/* Custom checkbox */
.abi-facet__label::before {
	content: '';
	display: inline-block;
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	border: 1px solid #bbb;
	border-radius: 2px;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.abi-facet__item--selected .abi-facet__label::before {
	background: #434243;
	border-color: #434243;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 8px;
}

.abi-facet__checkbox {
	display: none;
}

.abi-facet__count {
	font-size: 12px;
	color: #aaa;
	margin-left: auto;
}

.abi-facet__item--selected .abi-facet__count {
	color: #777;
}

.abi-facet__show-more {
	background: none;
	border: none;
	cursor: pointer;
	font-family: 'Mr Eaves', sans-serif;
	font-size: 13px;
	color: #666;
	padding: 6px 0;
	text-decoration: underline;
	transition: color 0.15s ease;
}

.abi-facet__show-more:hover {
	color: #000;
}

/* Hide "Show more" when there is nothing more to show */
.abi-facet__show-more:disabled,
.abi-facet__show-more[disabled] {
	display: none;
}

/* ------------------------------------------------------------------ */
/*  Price range slider (Rheostat)                                     */
/* ------------------------------------------------------------------ */
.abi-facet--range.ais-RangeSlider,
.abi-search-facet-group__body .ais-RangeSlider {
	padding: 12px 0 8px;
	max-width: 280px;
}

.abi-facet--range .rheostat-horizontal,
.abi-search-facet-group__body .rheostat-horizontal {
	height: 24px;
	position: relative;
}

.abi-facet--range .rheostat-background,
.abi-search-facet-group__body .rheostat-background {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 4px;
	background: #ddd;
	border-radius: 2px;
}

.abi-facet--range .rheostat-progress,
.abi-search-facet-group__body .rheostat-progress {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 4px;
	background: #434243;
	border-radius: 2px;
}

.abi-facet--range .rheostat-handle,
.abi-search-facet-group__body .rheostat-handle {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 18px;
	height: 18px;
	background: #fff;
	border: 2px solid #434243;
	border-radius: 50%;
	cursor: grab;
	z-index: 2;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.abi-facet--range .rheostat-handle:active,
.abi-search-facet-group__body .rheostat-handle:active {
	cursor: grabbing;
}

.abi-facet__range-tooltip,
.abi-facet--range .rheostat-tooltip {
	font-family: 'Mr Eaves', sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #222;
	position: absolute;
	top: -22px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	pointer-events: none;
}

.abi-facet--range .rheostat-marker--large .rheostat-value,
.abi-search-facet-group__body .rheostat-marker--large .rheostat-value {
	font-family: 'Mr Eaves', sans-serif;
	font-size: 11px;
	color: #666;
}

/* ------------------------------------------------------------------ */
/*  Product grid — resets InstantSearch defaults, theme handles rest   */
/* ------------------------------------------------------------------ */

/* Reset InstantSearch item wrapper so theme styles take over */
.abi-search-hits__item.ais-Hits-item {
	padding: 0;
	border: none;
	box-shadow: none;
	background: none;
}
.ais-Hits-item .woocommerce-loop-product__link{
	flex-direction: column!important;
}
.abi-search-hits__item.ais-Hits-item.details {
	align-items: baseline;
}

/* RRP line (not in default WC markup, so we style it here) */
.abi-algolia-rrp {
	font-size: 12px;
	color: #666;
	font-weight: 400;
	display: block;
	margin-top: 2px;
}

/* Make the add-to-cart button visible on search results
   (theme hides it by default unless it has .viewcart-style-2) */
.abi-search-hits .abi-product-tile a.button.add_to_cart_button {
	display: flex !important;
}

/* ------------------------------------------------------------------ */
/*  No results                                                        */
/* ------------------------------------------------------------------ */
.abi-search-no-results {
	padding: 40px 0;
	text-align: center;
}

.abi-search-no-results p {
	font-family: "Mr Eaves", sans-serif;
	font-size: 18px;
	letter-spacing: 0.05em;
	color: #666;
	margin: 0 0 8px;
}

/* ------------------------------------------------------------------ */
/*  Pagination                                                        */
/* ------------------------------------------------------------------ */
.abi-search-pagination {
	margin-top: 40px;
	display: flex;
	justify-content: center;
}

.abi-search-pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
}

.abi-search-pagination__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	font-family: "Mr Eaves", sans-serif;
	font-size: 14px;
	color: #434243;
	text-decoration: none;
	border: 1px solid #C7C6C7;
	border-radius: 4px;
	transition: background 0.15s, border-color 0.15s;
}

.abi-search-pagination__link:hover {
	background: #f5f5f5;
	border-color: #bbb;
}

.abi-search-pagination__item--selected .abi-search-pagination__link {
	background: #434243;
	color: #fff;
	border-color: #434243;
}

.abi-search-pagination__item--disabled .abi-search-pagination__link {
	color: #ccc;
	border-color: #eee;
	cursor: default;
	pointer-events: none;
}


/* ====================================================================
   Mobile filter — single FILTER button + full-screen sheet
   ==================================================================== */

@media (max-width: 959px) {
	/* Hide active-refinement pills on mobile — sheet's count badge owns this. */
	.abi-active-refinements {
		display: none;
	}
}

/* FILTER button row — visible only on mobile (uk-hidden@m on the wrapper).
   Layout: [icon-only filter button] [horizontally scrolling per-facet chips]. */
.abi-mobile-filter-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0;
	overflow: hidden;
}

.abi-mobile-filter-button {
	flex-shrink: 0;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	background: #434243;
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background 0.15s ease;
}

/* Icon-only variant: matches the .abi-mobile-filter-chip aesthetic
   (white fill, light border, charcoal icon) so the row reads as a
   single chip strip with no visual hierarchy. */
.abi-mobile-filter-button--icon {
	padding: 10px 14px;
	background: #fff;
	color: #333;
	border: 1px solid #ddd;
}

.abi-mobile-filter-button:hover,
.abi-mobile-filter-button:focus-visible {
	background: #2c2b2c;
	outline: none;
}

.abi-mobile-filter-button--icon:hover,
.abi-mobile-filter-button--icon:focus-visible {
	background: #fff;
	border-color: #999;
	color: #333;
}

.abi-mobile-filter-button__icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	opacity: 0.6;
	display: block;
}

/* Count badge hidden — visual noise, the chips below already convey
   which filters are active. JS still toggles the [hidden] attribute,
   we just never reveal it. */
.abi-mobile-filter-button__count {
	display: none;
}

/* Scrollable per-facet chip strip */
.abi-mobile-filter-chips {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	padding: 4px 0;
}

.abi-mobile-filter-chips::-webkit-scrollbar {
	display: none;
}

.abi-mobile-filter-chip {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	color: #333;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.abi-mobile-filter-chip:hover,
.abi-mobile-filter-chip:focus-visible {
	border-color: #999;
	outline: none;
}

.abi-mobile-filter-chip--has-active {
	border-color: #434243;
	color: #434243;
	font-weight: 600;
}

.abi-mobile-filter-chip__count {
	color: inherit;
}

.abi-mobile-filter-chip__chevron {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	color: #888;
}

.abi-mobile-filter-chip--has-active .abi-mobile-filter-chip__chevron {
	color: #434243;
}

/* Full-screen sheet */
.abi-mobile-sheet {
	display: none;
}

@media (max-width: 959px) {
	.abi-mobile-sheet {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		pointer-events: none;
		visibility: hidden;
		opacity: 0;
		/* Same Chrome-compositor workaround as the search overlay — move
		   off-screen when closed so it can't intercept clicks until the
		   first scroll triggers a reflow. */
		transform: translateY(-100%);
		transition: opacity 0.2s ease, transform 0s 0.2s, visibility 0s 0.2s;
	}

	.abi-mobile-sheet.is-open {
		pointer-events: auto;
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
		transition: opacity 0.2s ease, transform 0s 0s, visibility 0s 0s;
	}
}

.abi-mobile-sheet__panel {
	position: absolute;
	inset: 0;
	background: #fff;
	display: flex;
	flex-direction: column;
	overflow: hidden; /* belt-and-braces: contain any rogue child overflow */
	box-sizing: border-box;
}

/* WordPress admin bar offset — only relevant when an admin is logged in */
.admin-bar .abi-mobile-sheet {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .abi-mobile-sheet {
		top: 46px;
	}
}

.abi-mobile-sheet__header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 20px 16px;
	border-bottom: 1px solid #eee;
}

.abi-mobile-sheet__title {
	margin: 0;
	font-family: "Agatho", serif;
	font-size: 24px;
	font-weight: 300;
	color: #434243;
}

.abi-mobile-sheet__close {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: #434243;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.15s ease;
}

.abi-mobile-sheet__close svg {
	width: 14px;
	height: 14px;
	display: block;
	color: inherit;
	stroke: currentColor;
}

.abi-mobile-sheet__close:hover,
.abi-mobile-sheet__close:focus-visible {
	background: rgba(0, 0, 0, 0.05);
	outline: none;
}

.abi-mobile-sheet__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0;
	-webkit-overflow-scrolling: touch;
}

.abi-mobile-sheet__footer {
	flex-shrink: 0;
	display: flex;
	gap: 10px;
	padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid #eee;
	background: #fff;
}

.abi-mobile-sheet__clear,
.abi-mobile-sheet__apply {
	flex: 1 1 50%;
	box-sizing: border-box;
	padding: 14px 16px;
	border-radius: 4px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.abi-mobile-sheet__clear {
	background: transparent;
	color: #434243;
	border: 1.5px solid #434243;
}

.abi-mobile-sheet__clear:hover,
.abi-mobile-sheet__clear:focus-visible {
	background: #434243;
	color: #fff;
	outline: none;
}

.abi-mobile-sheet__apply {
	background: #434243;
	color: #fff;
	border: 1.5px solid #434243;
}

.abi-mobile-sheet__apply:hover,
.abi-mobile-sheet__apply:focus-visible {
	background: #2c2b2c;
	border-color: #2c2b2c;
	outline: none;
}

/* Accordion section per facet (and the Sort By header) */
.abi-mobile-sheet-section {
	border-bottom: 1px solid #eee;
}

.abi-mobile-sheet-section__toggle {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #434243;
	text-align: left;
}

.abi-mobile-sheet-section__toggle > span:first-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.abi-mobile-sheet-section__chevron {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	color: #888;
	transition: transform 0.2s ease;
}

.abi-mobile-sheet-section.is-open .abi-mobile-sheet-section__chevron {
	transform: rotate(180deg);
}

.abi-mobile-sheet-section__body {
	display: none;
	padding: 0 20px 18px;
}

.abi-mobile-sheet-section.is-open .abi-mobile-sheet-section__body {
	display: block;
}

.abi-mobile-sheet-section__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.abi-mobile-sheet-section__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	color: #434243;
}

.abi-mobile-sheet-section__item-label {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
}

.abi-mobile-sheet-section__item-label > span:last-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.abi-mobile-sheet-section__checkbox {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border: 1.5px solid #c8c8c8;
	border-radius: 3px;
	background: #fff;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.abi-mobile-sheet-section__item.is-selected .abi-mobile-sheet-section__checkbox {
	background: #434243;
	border-color: #434243;
}

.abi-mobile-sheet-section__checkbox::after {
	content: '';
	width: 11px;
	height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) translate(1px, -1px);
	opacity: 0;
}

.abi-mobile-sheet-section__item.is-selected .abi-mobile-sheet-section__checkbox::after {
	opacity: 1;
}

.abi-mobile-sheet-section__item-radio {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border: 1.5px solid #c8c8c8;
	border-radius: 50%;
	background: #fff;
}

.abi-mobile-sheet-section__item.is-selected .abi-mobile-sheet-section__item-radio::after {
	content: '';
	width: 10px;
	height: 10px;
	background: #434243;
	border-radius: 50%;
}

.abi-mobile-sheet-section__item-count {
	flex-shrink: 0;
	font-size: 14px;
	color: #999;
	margin-left: 12px;
}

/* ==================================================================== */
/*  [abi_algolia_products] shortcode — interactive (facets) mode         */
/* ==================================================================== */

/* When dynamicWidgets returns zero facets for the current query, JS
   stamps `abi-aap-no-facets` on the instance root — hide the sidebar
   entirely and let the main column reclaim the row. */
.abi-aap-instance.abi-aap-no-facets .abi-aap-sidebar {
	display: none;
}

/* `uk-width-expand@m` is `flex: 1`, so hiding the sidebar normally lets
   the main column fill the row by itself. The explicit override below
   guards against any uk-grid edge cases where the sibling might still
   honor its uk-width class. */
.abi-aap-instance.abi-aap-no-facets .abi-aap-main {
	width: 100% !important;
	max-width: 100%;
	flex: 0 0 100%;
}