/**
 * WPS Search — the search box and its dropdown.
 *
 * Every value: var(--wps-search-X-set, var(--wps-search-X, default)) — the
 * WPS Design bridge first, the plugin's own token next. Selectors start at
 * .wpss; the field's own controls are written as input.class[type] and
 * button.class[type] (0,4,1) to outrank theme rules such as Storefront's
 * .site-search .widget_product_search form input[type="search"] (0,3,2),
 * and the links as a.class[href] (0,3,1) against .widget-area .widget a.
 */

.wpss,
.wpss-rule {
	--_radius: var(--wps-search-radius-set, var(--wps-search-radius, 8px));
	--_border: var(--wps-search-border-set, var(--wps-search-border, #c9c9d1));
	--_bg: var(--wps-search-bg-set, var(--wps-search-bg, #fff));
	--_text: var(--wps-search-text-set, var(--wps-search-text, #1d1d1f));
	--_muted: var(--wps-search-muted-set, var(--wps-search-muted, #5f5f6b));
	--_active: var(--wps-search-active-bg-set, var(--wps-search-active-bg, #f1f1f4));
	--_focus: var(--wps-search-focus-set, var(--wps-search-focus, #1d1d1f));
	--_gap: var(--wps-search-gap-set, var(--wps-search-gap, 8px));
	--_pad: var(--wps-search-pad-set, var(--wps-search-pad, 12px));
	--_height: var(--wps-search-height-set, var(--wps-search-height, 2.75rem));
	--_img: var(--wps-search-image-set, var(--wps-search-image, 48px));
	--_field-radius: var(--_radius);
	--_panel-bg: var(--wps-search-panel-bg-set, var(--wps-search-panel-bg, var(--_bg)));
}

/* Corner radius: none, the site's own CSS, or half the field's height (the field only). */
.wpss.wpss--r-none {
	--_radius: 0px;
}

.wpss.wpss--r-custom {
	--_radius: var(--wps-search-radius, 8px);
}

.wpss.wpss--r-half {
	--_field-radius: calc(var(--_height) / 2);
}

.wpss {
	position: relative;
	inline-size: 100%;
	max-inline-size: var(--wps-search-width-set, var(--wps-search-width, 100%));
	color: var(--_text);
	font-size: var(--wps-search-font-size-set, var(--wps-search-font-size, 1rem));
}

.wpss .wpss__form {
	position: relative;
	display: grid;
	margin: 0;
}

/* Themes decorate search forms with their own icon; this form has its own. */
.wpss form.wpss__form[role]::before,
.wpss form.wpss__form[role]::after {
	content: none;
	display: none;
}

.wpss .wpss__label,
.wpss .wpss__status {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.wpss .wpss__field {
	display: flex;
	align-items: center;
	gap: var(--_gap);
	min-block-size: var(--_height);
	padding-inline: var(--_pad);
	background: var(--_bg);
	border: var(--wps-search-border-width-set, var(--wps-search-border-width, 1px)) solid var(--_border);
	border-radius: var(--_field-radius);
}

/* A panel that starts under the field (negative offset) stays behind it when the field's z-index is above the panel's. */
.wpss .wpss__form > .wpss__field {
	position: relative;
	z-index: var(--wps-search-field-z-set, var(--wps-search-field-z, auto));
}

.wpss .wpss__field:has(button.wpss__submit) {
	padding-inline-end: calc(var(--_pad) / 2);
}

.wpss .wpss__field:has(button.wpss__go) {
	padding-inline-end: calc(var(--_pad) / 4);
}

/* Focus: the field's own edge grows; the input inside never draws one (themes add input:focus borders with !important). */
.wpss .wpss__field:focus-within {
	outline: none;
	box-shadow: 0 0 0 var(--wps-search-focus-width-set, var(--wps-search-focus-width, 2px)) var(--_focus);
}

.wpss .wpss__field input.wpss__input[type]:focus {
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
}

.wpss .wpss__icon {
	flex: none;
	inline-size: 1em;
	block-size: 1em;
	color: var(--_muted);
}

.wpss .wpss__field input.wpss__input[type] {
	flex: 1;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	box-shadow: none;
	outline: none;
	appearance: none;
	block-size: var(--_height);
}

.wpss .wpss__field input.wpss__input[type]::-webkit-search-cancel-button {
	display: none;
}

.wpss .wpss__field button.wpss__clear[type],
.wpss .wpss__field button.wpss__submit[type],
.wpss .wpss__field button.wpss__go[type] {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	border: 0;
	font: inherit;
	cursor: pointer;
}

.wpss .wpss__field button.wpss__clear[type] {
	flex: none;
	inline-size: 1.75em;
	block-size: 1.75em;
	padding: 0;
	background: transparent;
	color: var(--_muted);
	border-radius: var(--_radius);
}

.wpss .wpss__clear svg {
	inline-size: 0.8em;
	block-size: 0.8em;
}

.wpss .wpss__clear:focus-visible,
.wpss a.wpss__link[href]:focus-visible,
.wpss a.wpss__all[href]:focus-visible {
	outline: var(--wps-search-focus-width-set, var(--wps-search-focus-width, 2px)) solid var(--_focus);
}

/* The magnifier as the submit button at the end of the field. */
.wpss .wpss__field button.wpss__go[type] {
	flex: none;
	inline-size: var(--_height);
	block-size: var(--_height);
	padding: 0;
	background: transparent;
	color: inherit;
	border-radius: var(--_field-radius);
}

.wpss .wpss__go .wpss__icon {
	inline-size: 1.25em;
	block-size: 1.25em;
	color: inherit;
}

.wpss .wpss__go:focus-visible {
	outline: var(--wps-search-focus-width-set, var(--wps-search-focus-width, 2px)) solid var(--_focus);
	outline-offset: -4px;
}

/* Themes hide the submit of their own search widget (Storefront: clip,
   1px, position absolute); the box's own button is shown in full. */
.wpss .wpss__field button.wpss__submit[type] {
	position: static;
	inline-size: auto;
	block-size: auto;
	overflow: visible;
	clip: auto;
	clip-path: none;
	flex: none;
	padding-block: 0.5em;
	padding-inline: 1em;
	background: var(--wps-search-button-bg-set, var(--wps-search-button-bg, #1d1d1f));
	color: var(--wps-search-button-text-set, var(--wps-search-button-text, #fff));
	border-radius: var(--_radius);
}

.wpss .wpss__spinner {
	flex: none;
	inline-size: 1em;
	block-size: 1em;
	border: 2px solid var(--_border);
	border-block-start-color: var(--_muted);
	border-radius: 50%;
	animation: wpss-spin 0.7s linear infinite;
}

.wpss [hidden] {
	display: none !important;
}

.wpss .wpss__panel {
	container-type: inline-size;
	position: absolute;
	inset-block-start: calc(100% + var(--wps-search-offset-set, var(--wps-search-offset, 4px)));
	inset-inline-start: 0;
	inline-size: max(100%, min(var(--wps-search-panel-width-set, var(--wps-search-panel-width, 26rem)), calc(100vw - 2 * var(--wps-search-edge-set, var(--wps-search-edge, 16px)))));
	z-index: var(--wps-search-z-set, var(--wps-search-z, 100000));
	display: grid;
	max-block-size: var(--wps-search-panel-height-set, var(--wps-search-panel-height, min(70vh, 32rem)));
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable both-edges;
	scrollbar-width: thin;
	scrollbar-color: var(--_border) transparent;
	padding-block-start: var(--wps-search-panel-pad-top-set, var(--wps-search-panel-pad-top, 0px));
	background: var(--_panel-bg);
	border: var(--wps-search-border-width-set, var(--wps-search-border-width, 1px)) solid var(--_border);
	border-radius: var(--_radius);
	box-shadow: var(--wps-search-shadow-set, var(--wps-search-shadow, 0 8px 24px rgb(0 0 0 / 0.12)));
}

/* A box in the right half of the screen opens its panel towards the left. */
.wpss.wpss--end .wpss__panel {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

/* No room below the field: the panel opens above it, no taller than the room there. */
.wpss.wpss--up .wpss__panel {
	inset-block-start: auto;
	inset-block-end: calc(100% + var(--wps-search-offset-set, var(--wps-search-offset, 4px)));
	max-block-size: min(var(--wps-search-panel-height-set, var(--wps-search-panel-height, min(70vh, 32rem))), calc(var(--wpss-room, 70vh) - var(--wps-search-edge-set, var(--wps-search-edge, 16px))));
}

.wpss .wpss__list {
	display: grid;
	gap: calc(var(--_gap) / 2);
	margin: 0;
	padding: calc(var(--_gap) / 2);
	list-style: none;
}

.wpss .wpss__item {
	margin: 0;
	padding: 0;
	background: var(--wps-search-row-bg-set, var(--wps-search-row-bg, transparent));
	border-radius: max(0px, calc(var(--_radius) - 2px));
}

/*
 * A box inside a theme's menu (Storefront's mobile bar styles every ul li and
 * li > a: a third of the width, centred, text pushed out): the dropdown's own
 * rows keep their width and text. Above the theme's (0,2,2) and (0,1,3),
 * below this file's own (0,3,1) link rules.
 */
.wpss .wpss__panel li:not([hidden]) {
	float: none;
	inline-size: auto;
	text-align: start;
}

.wpss .wpss__panel li > a {
	block-size: auto;
	text-indent: 0;
	border-inline-end: 0;
	overflow: visible;
	z-index: auto;
}

/*
 * Storefront's mobile bar: the open search rises above the bar's own buttons,
 * and the bar itself (z-index 9999, the panel's stacking context) above the
 * WordPress toolbar (99999), which otherwise covers the close button.
 */
.storefront-handheld-footer-bar ul li.search .site-search:has(.wpss.is-active),
.storefront-handheld-footer-bar:has(.wpss.is-active) {
	z-index: var(--wps-search-z-modal-set, var(--wps-search-z-modal, 100000));
}

.wpss .wpss__item[aria-selected="true"],
.wpss .wpss__item.is-current,
.wpss .wpss__item:hover {
	background: var(--_active);
}

.wpss a.wpss__link[href] {
	display: flex;
	align-items: center;
	gap: var(--_pad);
	padding: calc(var(--_gap) * 0.75) var(--_gap);
	color: inherit;
	text-decoration: none;
}

.wpss .wpss__img {
	flex: none;
	inline-size: var(--_img);
	block-size: var(--_img);
	object-fit: contain;
	border-radius: calc(var(--_radius) / 2);
}

.wpss .wpss__text {
	display: grid;
	gap: 0.2em;
	min-inline-size: 0;
}

.wpss .wpss__title {
	line-height: 1.3;
}

.wpss .wpss__hl {
	background: none;
	color: inherit;
	font-weight: var(--wps-search-highlight-weight-set, var(--wps-search-highlight-weight, 700));
}

.wpss .wpss__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em 0.75em;
	font-size: 0.875em;
}

.wpss .wpss__price {
	display: flex;
	align-items: baseline;
	gap: 0.35em;
	font-weight: var(--wps-search-price-weight-set, var(--wps-search-price-weight, 600));
}

.wpss .wpss__old,
.wpss .wpss__sku {
	color: var(--_muted);
	font-weight: normal;
}

.wpss .wpss__stock {
	color: var(--_muted);
}

.wpss .wpss__stock--outofstock {
	color: var(--wps-search-out-set, var(--wps-search-out, #b42318));
}

/* "Add to cart" beside the link; under it on a card. */
.wpss .wpss__item:has(.wpss__buy) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--_gap);
	padding-inline-end: var(--_gap);
}

.wpss button.wpss__buy[type] {
	display: flex;
	align-items: center;
	gap: 0.35em;
	margin: 0;
	padding-block: 0.45em;
	padding-inline: 0.8em;
	border: 0;
	border-radius: var(--_radius);
	background: var(--wps-search-cart-bg-set, var(--wps-search-cart-bg, #1d1d1f));
	color: var(--wps-search-cart-text-set, var(--wps-search-cart-text, #fff));
	font: inherit;
	font-size: 0.875em;
	font-weight: var(--wps-search-cart-weight-set, var(--wps-search-cart-weight, 600));
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
}

.wpss button.wpss__buy[type] svg {
	flex: none;
	inline-size: 1.15em;
	block-size: 1.15em;
}

.wpss button.wpss__buy[aria-busy] {
	cursor: progress;
	opacity: 0.6;
}

.wpss .wpss__cell {
	min-inline-size: 0;
}

.wpss .wpss__cell[aria-selected="true"] > button.wpss__buy[type],
.wpss button.wpss__buy[type]:focus-visible {
	outline: var(--wps-search-focus-width-set, var(--wps-search-focus-width, 2px)) solid var(--_focus);
	outline-offset: 2px;
}

/* A narrow dropdown (a phone) keeps the icon only; the button's name stays in aria-label. */
@container (max-width: 24rem) {
	.wpss .wpss__buy-text {
		display: none;
	}

	.wpss button.wpss__buy[type] {
		padding-inline: 0.6em;
	}
}

.wpss .wpss__msg {
	grid-column: 1 / -1;
	margin: 0;
	padding-block-end: calc(var(--_gap) * 0.75);
	padding-inline: var(--_gap);
	color: var(--wps-search-error-set, var(--wps-search-error, #b42318));
	font-size: 0.875em;
}

.wpss.wpss--grid .wpss__sec--products .wpss__item:has(.wpss__buy) {
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	padding-block-end: var(--_gap);
	padding-inline: var(--_gap);
}

.wpss.wpss--grid .wpss__sec--products .wpss__item:has(.wpss__buy) a.wpss__link[href] {
	padding-inline: 0;
}

.wpss.wpss--grid .wpss__sec--products button.wpss__buy[type] {
	justify-content: center;
}

.wpss .wpss__empty {
	margin: 0;
	padding: var(--_pad);
	color: var(--_muted);
}

.wpss a.wpss__all[href] {
	position: sticky;
	inset-block-end: calc(var(--_gap) / 2);
	display: flex;
	justify-content: center;
	margin: calc(var(--_gap) / 2);
	padding: calc(var(--_pad) / 2) var(--_pad);
	background: var(--wps-search-button-bg-set, var(--wps-search-button-bg, #1d1d1f));
	color: var(--wps-search-button-text-set, var(--wps-search-button-text, #fff));
	border-radius: max(0px, calc(var(--_radius) - 2px));
	box-shadow: 0 0 0 calc(var(--_gap) / 2) var(--_panel-bg);
	font-size: 0.875em;
	font-weight: var(--wps-search-all-weight-set, var(--wps-search-all-weight, 600));
	text-decoration: none;
}

/* Visitors who need a clearer selection (setting on): an outline on the row chosen with the arrow keys. */
.wpss.wpss--a11y .wpss__item.is-current {
	outline: var(--wps-search-focus-width-set, var(--wps-search-focus-width, 2px)) solid var(--_focus);
	outline-offset: calc(-1 * var(--wps-search-focus-width-set, var(--wps-search-focus-width, 2px)));
}

/* A visitor who asked the system for more contrast: outlines and "See all" in the text colour. */
@media (prefers-contrast: more) {
	.wpss.wpss--a11y .wpss__item.is-current,
	.wpss.wpss--a11y .wpss__item:hover {
		outline: var(--wps-search-focus-width-set, var(--wps-search-focus-width, 2px)) solid var(--_text);
		outline-offset: calc(-1 * var(--wps-search-focus-width-set, var(--wps-search-focus-width, 2px)));
	}

	.wpss.wpss--a11y a.wpss__all[href] {
		background: var(--_text);
		color: var(--_bg);
	}
}

/* Windows contrast themes drop the backgrounds: the selection and "See all" keep an outline in system colours. */
@media (forced-colors: active) {
	.wpss.wpss--a11y .wpss__item.is-current,
	.wpss.wpss--a11y .wpss__item:hover {
		outline: var(--wps-search-focus-width-set, var(--wps-search-focus-width, 2px)) solid Highlight;
		outline-offset: calc(-1 * var(--wps-search-focus-width-set, var(--wps-search-focus-width, 2px)));
	}

	.wpss.wpss--a11y a.wpss__all[href] {
		border: 1px solid ButtonText;
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.wpss .wpss__spinner {
		animation-duration: 2s;
	}
}

/* A query rule: its message and category tiles, in the dropdown and above the results page. */
.wpss .wpss__note,
.wpss-rule .wpss-rule__note {
	margin: 0;
	padding: var(--_pad);
	background: var(--_active);
	color: var(--_text);
}

.wpss-rule .wpss-rule__note {
	border-radius: var(--_radius);
}

.wpss .wpss__tiles,
.wpss-rule .wpss-rule__tiles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--_gap);
	margin: 0;
	padding: var(--_gap) var(--_pad);
	list-style: none;
}

.wpss-rule .wpss-rule__tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
	padding: 0;
}

.wpss .wpss__note[hidden],
.wpss .wpss__tiles[hidden] {
	display: none;
}

.wpss a.wpss__tile[href],
.wpss-rule a.wpss-rule__tile[href] {
	display: flex;
	align-items: center;
	gap: var(--_gap);
	padding: calc(var(--_gap) * 0.5) var(--_gap);
	border: var(--wps-search-border-width-set, var(--wps-search-border-width, 1px)) solid var(--_border);
	border-radius: var(--_radius);
	color: inherit;
	text-decoration: none;
}

.wpss-rule a.wpss-rule__tile[href] {
	flex-direction: column;
	padding: var(--_gap);
	text-align: center;
}

.wpss a.wpss__tile[href]:hover,
.wpss a.wpss__tile[href]:focus-visible,
.wpss-rule a.wpss-rule__tile[href]:hover,
.wpss-rule a.wpss-rule__tile[href]:focus-visible {
	background: var(--_active);
}

.wpss a.wpss__tile[href]:focus-visible,
.wpss-rule a.wpss-rule__tile[href]:focus-visible {
	outline: var(--wps-search-focus-width-set, var(--wps-search-focus-width, 2px)) solid var(--_focus);
}

.wpss-rule {
	display: grid;
	gap: var(--_pad);
	margin-block-end: calc(var(--_pad) * 2);
	color: var(--_text);
}

.wpss-rule .wpss-rule__img {
	inline-size: calc(var(--_img) * 2);
	block-size: calc(var(--_img) * 2);
	object-fit: contain;
}

/* Sections: suggestions, products, one per priority group in the grouped model. */
.wpss .wpss__sec {
	display: grid;
	gap: calc(var(--_gap) / 4);
	margin: 0;
	padding: 0;
}

.wpss .wpss__sec + .wpss__sec {
	margin-block-start: calc(var(--_gap) / 2);
	padding-block-start: calc(var(--_gap) / 2);
	border-block-start: var(--wps-search-border-width-set, var(--wps-search-border-width, 1px)) solid var(--_border);
}

.wpss .wpss__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--_gap);
	padding: calc(var(--_gap) / 2) var(--_gap) 0;
	color: var(--_muted);
	font-size: 0.8125em;
	font-weight: var(--wps-search-head-weight-set, var(--wps-search-head-weight, 600));
}

.wpss .wpss__opts {
	display: grid;
	gap: calc(var(--_gap) / 2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A suggestion: the typed words as they are, the completed ones heavier. */
.wpss a.wpss__sugg[href] {
	gap: 0.35em;
	flex-wrap: wrap;
}

.wpss .wpss__done {
	font-weight: var(--wps-search-complete-weight-set, var(--wps-search-complete-weight, 700));
}

.wpss .wpss__cat {
	color: var(--_muted);
}

/* Products as cards. */
.wpss.wpss--grid .wpss__sec--products .wpss__opts {
	grid-template-columns: repeat(var(--wpss-cols, 3), minmax(0, 1fr));
	gap: calc(var(--_gap) / 2);
}

.wpss.wpss--grid .wpss__sec--products a.wpss__link[href] {
	flex-direction: column;
	align-items: stretch;
	text-align: start;
}

.wpss.wpss--grid .wpss__sec--products .wpss__img {
	inline-size: 100%;
	block-size: calc(var(--_img) * 2);
}

.wpss.wpss--grid .wpss__panel {
	inline-size: max(100%, min(var(--wps-search-panel-width-grid-set, var(--wps-search-panel-width-grid, 40rem)), calc(100vw - 2 * var(--wps-search-edge-set, var(--wps-search-edge, 16px)))));
}

/* Split: suggestions on the left, products on the right. */
.wpss.wpss--split .wpss__panel {
	inline-size: max(100%, min(var(--wps-search-panel-width-split-set, var(--wps-search-panel-width-split, 44rem)), calc(100vw - 2 * var(--wps-search-edge-set, var(--wps-search-edge, 16px)))));
}

.wpss.wpss--split .wpss__list {
	grid-template-columns: minmax(12rem, 2fr) 3fr;
	align-items: start;
	gap: var(--_gap);
}

.wpss.wpss--split .wpss__sec + .wpss__sec {
	margin: 0;
	padding: 0;
	border: 0;
}



.wpss.wpss--split .wpss__sec--products:only-child {
	grid-column: 1 / -1;
}

.wpss .wpss__sec--recent .wpss__head,
.wpss .wpss__sec--did .wpss__head {
	pointer-events: none;
}

.wpss button.wpss__forget[type] {
	display: flex;
	inline-size: 100%;
	margin: 0;
	padding: calc(var(--_gap) * 0.75) var(--_gap);
	border: 0;
	background: none;
	color: var(--_muted);
	font: inherit;
	font-size: 0.8125em;
	text-align: start;
	text-decoration: underline;
	cursor: pointer;
}

.wpss .wpss__count {
	color: var(--_muted);
	font-size: 0.875em;
}

/* Split: everything but the products in the left column. */
.wpss.wpss--split .wpss__side {
	display: grid;
	align-content: start;
	margin: 0;
	padding-inline-end: var(--_gap);
	border-inline-end: var(--wps-search-border-width-set, var(--wps-search-border-width, 1px)) solid var(--_border);
}

/* Icon mode: the box hides behind a magnifier and opens where it is set. */
.wpss {
	--_dur: var(--wps-search-duration-set, var(--wps-search-duration, 200ms));
	--_ov: var(--wps-search-overlay-set, var(--wps-search-overlay, #000));
	--_ov-op: var(--wps-search-overlay-opacity-set, var(--wps-search-overlay-opacity, 0.5));
	--_ov-blur: var(--wps-search-overlay-blur-set, var(--wps-search-overlay-blur, 0px));
	--_z-modal: var(--wps-search-z-modal-set, var(--wps-search-z-modal, 100000));
}

.wpss button.wpss__toggle[type],
.wpss button.wpss__close[type],
.wpss .wpss__overlay {
	display: none;
}

.wpss.wpss--icon button.wpss__toggle[type] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--_height);
	block-size: var(--_height);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--_radius);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.wpss.wpss--icon button.wpss__toggle[type] .wpss__icon {
	inline-size: 1.25em;
	block-size: 1.25em;
}

.wpss.wpss--icon button.wpss__toggle[type]:focus-visible {
	outline: var(--wps-search-focus-width-set, var(--wps-search-focus-width, 2px)) solid var(--_focus);
}

.wpss.wpss--icon .wpss__dialog {
	display: none;
}

.wpss.wpss--icon.is-active .wpss__dialog {
	display: grid;
	opacity: 0;
	transition: opacity var(--_dur) ease, transform var(--_dur) ease;
}

/* Shown: stronger than every position's starting offset below. */
.wpss.wpss--icon.is-active.is-shown[data-pos] .wpss__dialog {
	opacity: 1;
	transform: none;
}

/* Every position but "inline" is a fixed panel over the page. */
.wpss.wpss--icon:not([data-pos="inline"]).is-active .wpss__dialog {
	position: fixed;
	z-index: var(--_z-modal);
	grid-template-rows: minmax(0, 1fr);
	box-sizing: border-box;
	padding: calc(var(--_pad) + var(--_height)) var(--_pad) var(--_pad);
	overflow: hidden;
	background: var(--_bg);
	box-shadow: var(--wps-search-shadow-set, var(--wps-search-shadow, 0 8px 24px rgb(0 0 0 / 0.12)));
}

.wpss.wpss--icon[data-pos="top"].is-active .wpss__dialog {
	inset-block-start: 0;
	inset-inline: 0;
	max-block-size: 85vh;
	transform: translateY(-100%);
}

.wpss.wpss--icon[data-pos="center"].is-active .wpss__dialog {
	inset-block-start: 10vh;
	inset-inline: 0;
	margin-inline: auto;
	inline-size: min(var(--wps-search-modal-width-set, var(--wps-search-modal-width, 40rem)), calc(100vw - 2 * var(--wps-search-edge-set, var(--wps-search-edge, 16px))));
	max-block-size: 80vh;
	border-radius: var(--_radius);
	transform: translateY(-1rem);
}

.wpss.wpss--icon[data-pos="left"].is-active .wpss__dialog,
.wpss.wpss--icon[data-pos="right"].is-active .wpss__dialog {
	inset-block: 0;
	inline-size: min(var(--wps-search-sidebar-width-set, var(--wps-search-sidebar-width, 26rem)), 100vw);
}

.wpss.wpss--icon[data-pos="left"].is-active .wpss__dialog {
	inset-inline-start: 0;
	transform: translateX(-100%);
}

.wpss.wpss--icon[data-pos="right"].is-active .wpss__dialog {
	inset-inline-end: 0;
	transform: translateX(100%);
}

/* Field at the bottom: a bar from the bottom edge, or the whole screen. */
.wpss.wpss--icon[data-pos="bottom"].is-active .wpss__dialog {
	inset-block-end: 0;
	inset-inline: 0;
	max-block-size: 85vh;
	border-start-start-radius: var(--_radius);
	border-start-end-radius: var(--_radius);
	transform: translateY(100%);
}

.wpss.wpss--icon[data-pos="fullscreen"].is-active .wpss__dialog,
.wpss.wpss--icon[data-pos="full_bottom"].is-active .wpss__dialog {
	inset: 0;
	transform: translateY(1.5rem);
}

/*
 * Signed in: a panel from the top edge starts under the WordPress toolbar. A
 * theme's stacking context around the box (Storefront's header, z-index 999)
 * would otherwise leave the toolbar over the close button.
 */
.wpss.wpss--icon:is([data-pos="top"], [data-pos="left"], [data-pos="right"], [data-pos="fullscreen"], [data-pos="full_bottom"]).is-active .wpss__dialog {
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
}

/* Inline: the field grows out of the magnifier, the dropdown as usual. */
.wpss.wpss--icon[data-pos="inline"].is-active .wpss__dialog {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	z-index: var(--wps-search-z-set, var(--wps-search-z, 100000));
	inline-size: var(--wps-search-inline-width-set, var(--wps-search-inline-width, 22rem));
	max-inline-size: calc(100vw - 2 * var(--wps-search-edge-set, var(--wps-search-edge, 16px)));
	transform: scaleX(0.6);
	transform-origin: right center;
}

.wpss.wpss--fade.wpss--icon.is-active[data-pos] .wpss__dialog {
	transform: none;
}

/* Inside a fixed panel the dropdown is part of the panel and scrolls in it. */
.wpss.wpss--icon:not([data-pos="inline"]) .wpss__form {
	grid-template-rows: auto minmax(0, 1fr);
	align-content: start;
	min-block-size: 0;
}

.wpss.wpss--icon:not([data-pos="inline"]) .wpss__panel {
	position: static;
	align-content: start;
	inline-size: auto;
	max-inline-size: none;
	max-block-size: none;
	margin-block-start: var(--_gap);
	border: 0;
	box-shadow: none;
}

/* Field at the bottom: the results above it, the first one on top. */
.wpss.wpss--icon:is([data-pos="bottom"], [data-pos="full_bottom"]) .wpss__form {
	grid-template-rows: minmax(0, 1fr) auto;
	align-content: end;
}

.wpss.wpss--icon:is([data-pos="bottom"], [data-pos="full_bottom"]) .wpss__field {
	grid-row: 2;
}

.wpss.wpss--icon:is([data-pos="bottom"], [data-pos="full_bottom"]) .wpss__panel {
	grid-row: 1;
	margin-block: 0 var(--_gap);
}

.wpss.wpss--icon[data-pos="full_bottom"] .wpss__form {
	align-content: stretch;
}

/* Close: top right, on a solid background, outside the scrolling part. */
.wpss.wpss--icon.is-active:not([data-pos="inline"]) button.wpss__close[type] {
	position: absolute;
	inset-block-start: calc(var(--_pad) / 2);
	inset-inline-end: calc(var(--_pad) / 2);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--_height);
	block-size: var(--_height);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--_radius);
	background: var(--_active);
	color: var(--_text);
	cursor: pointer;
}

.wpss button.wpss__close[type] svg {
	inline-size: 1em;
	block-size: 1em;
}

.wpss.wpss--icon button.wpss__close[type]:focus-visible {
	outline: var(--wps-search-focus-width-set, var(--wps-search-focus-width, 2px)) solid var(--_focus);
}

.wpss.wpss--icon.is-active:not([data-pos="inline"]) .wpss__overlay:not([hidden]) {
	position: fixed;
	inset: 0;
	z-index: calc(var(--_z-modal) - 1);
	display: block;
	background: var(--_ov);
	opacity: 0;
	backdrop-filter: blur(var(--_ov-blur));
	transition: opacity var(--_dur) ease;
}

.wpss.wpss--icon.is-active.is-shown:not([data-pos="inline"]) .wpss__overlay:not([hidden]) {
	opacity: var(--_ov-op);
}

.wpss.wpss--thick .wpss__panel {
	scrollbar-width: auto;
	scrollbar-color: auto;
}

html.wpss-lock,
html.wpss-lock body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.wpss .wpss__dialog,
	.wpss .wpss__overlay {
		transition: none !important;
	}
}