/*
 * Instafind filters. Plain on purpose: sizes are relative and colours derive
 * from currentColor, so the theme's typography and palette show through.
 */
.instafind-facets,
.instafind-filters,
.instafind-recognised {
	--instafind-line: color-mix(in srgb, currentColor 18%, transparent);
}

.instafind-facets {
	--instafind-gap: 1.25em;
	--instafind-muted: color-mix(in srgb, currentColor 55%, transparent);
	margin: 0 0 2em;
	font-size: 0.9375em;
}

.instafind-facets ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Groups ---------------------------------------------------------------- */

.instafind-facets__group {
	margin: 0 0 var(--instafind-gap);
	padding: 0 0 var(--instafind-gap);
	border-bottom: 1px solid var(--instafind-line);
}

.instafind-facets__group:last-child {
	border-bottom: 0;
}

.instafind-facets__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 0.5em;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.instafind-facets__title::-webkit-details-marker {
	display: none;
}

.instafind-facets__title::after {
	content: "";
	width: 0.45em;
	height: 0.45em;
	margin-right: 0.2em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-0.15em);
	transition: transform 0.15s ease-out;
}

.instafind-facets__group:not([open]) > .instafind-facets__title {
	margin-bottom: 0;
}

.instafind-facets__group:not([open]) > .instafind-facets__title::after {
	transform: rotate(-45deg);
}

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

.instafind-facets__options a {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.3em 0;
	color: inherit;
	text-decoration: none;
}

.instafind-facets__options a:hover .instafind-facets__label,
.instafind-facets__options a:focus-visible .instafind-facets__label {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.instafind-facets__label {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* A checkbox drawn in the theme's text colour. */
.instafind-facets__options:not(.instafind-facets__options--links) a::before {
	content: "";
	flex: none;
	box-sizing: border-box;
	width: 1.05em;
	height: 1.05em;
	border: 1.5px solid var(--instafind-muted);
	border-radius: 0.2em;
}

.instafind-facets__options .is-selected a::before {
	border: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3 0h10a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm3.6 11.4L3.3 8.1l1.2-1.2 2.1 2.1 4.9-4.9 1.2 1.2z'/%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 16 16'%3E%3Cpath fill-rule='evenodd' d='M3 0h10a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm3.6 11.4L3.3 8.1l1.2-1.2 2.1 2.1 4.9-4.9 1.2 1.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.instafind-facets__options .is-selected .instafind-facets__label {
	font-weight: 600;
}

/* Brand logos: a fixed slot, so wide and square logos take the same room. */
.instafind-facets__logo {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.75em;
	height: 1.5em;
}

.instafind-facets__logo-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.instafind-facets__count {
	flex: none;
	color: var(--instafind-muted);
	font-size: 0.875em;
	font-variant-numeric: tabular-nums;
}

.instafind-facets__more > summary {
	display: inline-block;
	margin-top: 0.35em;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	list-style: none;
}

.instafind-facets__more > summary::-webkit-details-marker {
	display: none;
}

.instafind-facets__more[open] > summary {
	display: none;
}

/* "Show more" / "Show less": the group's full list, loaded on demand. */
.instafind-facets__more-link {
	display: inline-block;
	margin-top: 0.35em;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.instafind-facets__more-link[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}

/* Active filters -------------------------------------------------------- */

.instafind-facets__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin: 0 0 1.25em;
}

.instafind-facets__active ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.instafind-facets__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.25em 0.75em;
	border: 1px solid var(--instafind-line, currentColor);
	border-radius: 999px;
	color: inherit;
	font-size: 0.875em;
	line-height: 1.4;
	text-decoration: none;
}

.instafind-facets__chip:hover,
.instafind-facets__chip:focus-visible {
	border-color: currentColor;
}

.instafind-facets__clear {
	font-size: 0.875em;
	color: inherit;
}

/* A recognised filter above the products, only on a page with no panel to show it. */
body:has(.instafind-facets) .instafind-recognised {
	display: none;
}

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

.instafind-facets__price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
}

.instafind-facets__price-field {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
}

.instafind-facets__currency {
	color: var(--instafind-muted);
}

.instafind-facets__price input[type="number"] {
	width: 5.5em;
	padding: 0.35em 0.5em;
}

.instafind-facets__dash {
	color: var(--instafind-muted);
}

/* "Filters" toggle above the products ------------------------------------ */

.instafind-filters {
	margin: 0 0 1.5em;
}

.instafind-filters__toggle > summary {
	list-style: none;
}

.instafind-filters__toggle > summary::-webkit-details-marker {
	display: none;
}

.instafind-filters__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 1em;
	border: 1px solid var(--instafind-line);
	border-radius: 999px;
	cursor: pointer;
	font-weight: 600;
	user-select: none;
}

.instafind-filters__button:hover,
.instafind-filters__toggle[open] > .instafind-filters__button {
	border-color: currentColor;
}

.instafind-filters__badge {
	display: inline-grid;
	place-items: center;
	min-width: 1.6em;
	height: 1.6em;
	padding: 0 0.4em;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	font-size: 0.75em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.instafind-filters .instafind-facets__active {
	margin: 0.75em 0 0;
}

.instafind-facets--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13em, 1fr));
	gap: 0 2em;
	margin: 1em 0 0;
	padding: 1.25em 1.25em 0;
	border: 1px solid var(--instafind-line);
	border-radius: 0.5em;
}

.instafind-facets--grid .instafind-facets__group,
.instafind-facets--grid .instafind-facets__group:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Merchandising ----------------------------------------------------------
 * Labels of promoted products and pinned filter values, and the shop's
 * banners (Frontend/Merchandising.php). Loaded with the filters: every page
 * instafind answers has this stylesheet.
 */

.instafind-badges {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.3em;
	vertical-align: middle;
}

.instafind-badge {
	padding: 0.2em 0.45em;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 0.25em;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

/* Read out, not shown, in themes without their own .screen-reader-text. */
.instafind-badge .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.instafind-badge--sponsored {
	color: color-mix(in srgb, currentColor 65%, transparent);
	font-weight: 400;
	cursor: help;
}

/* On a product card: its own line under the title, aligned like the card's text. */
li.product .instafind-badges,
.wp-block-post-title + .instafind-badges {
	display: block;
	margin: 0 0 0.6em;
}

/* Block themes align each block on its own, not the card. */
.wp-block-post-title.has-text-align-center + .instafind-badges {
	text-align: center;
}

.wp-block-post-title.has-text-align-right + .instafind-badges {
	text-align: right;
}

li.product .instafind-badge,
.wp-block-post-title + .instafind-badges .instafind-badge {
	display: inline-block;
	margin: 0 0.15em 0.2em;
}

.instafind-banner {
	margin: 0 0 1.5em;
}

.instafind-banner img {
	max-width: 100%;
	height: auto;
}

/* A band in the product list spans the row, in float and grid layouts. */
ul.products > li.instafind-banner--band {
	clear: both;
	float: none;
	width: 100%;
	margin-right: 0;
	grid-column: 1 / -1;
	list-style: none;
}

.instafind-banner--card img {
	display: block;
	width: 100%;
}

/* Cards outside the product list (block themes, places the page never reached): a row of their own. */
.instafind-banners {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
	gap: 1.5em;
	margin: 0 0 1.5em;
}

.instafind-banners > .instafind-banner {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.instafind-facets__title::after {
		transition: none;
	}
}