/**
 * stovery/product-search — UniShop2 header search.
 */
.wp-block-stovery-product-search {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.wp-block-stovery-product-search .header-search__form {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

.wp-block-stovery-product-search .header-search__category {
	position: relative;
	flex: none;
	/* tesli.ua: the selector is 133px wide; long category names are cut, the field keeps its width. */
	max-width: 8.5rem;
}

.wp-block-stovery-product-search .header-search__category-btn {
	display: inline-flex;
	align-items: center;
	padding: var(--wp--preset--spacing--30);
	border: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--surface-subtle);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
	max-width: 100%;
}

.wp-block-stovery-product-search .header-search__category-span {
	overflow: hidden;
	min-width: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wp-block-stovery-product-search .header-search__category-btn:hover {
	background: var(--wp--preset--color--line);
}

.wp-block-stovery-product-search .dropdown-menu {
	display: none;
	position: absolute;
	top: calc(100% + var(--wp--preset--spacing--20));
	left: 0;
	z-index: 1000;
	min-width: 15rem;
	margin: 0;
	padding: var(--wp--preset--spacing--20) 0;
	list-style: none;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	box-shadow: 0 6px 16px rgb(0 0 0 / 0.12);
}

.wp-block-stovery-product-search .cat-id.open > .dropdown-menu {
	display: block;
}

.wp-block-stovery-product-search .dropdown-menu a {
	display: block;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.wp-block-stovery-product-search .dropdown-menu a:hover,
.wp-block-stovery-product-search .dropdown-menu .active > a {
	background: var(--wp--preset--color--surface-subtle);
	color: var(--wp--preset--color--primary);
}

.wp-block-stovery-product-search .header-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--wp--preset--spacing--30) 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	outline: none;
}

.wp-block-stovery-product-search .header-search__input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.wp-block-stovery-product-search .header-search__btn {
	flex: none;
	display: inline-flex;
	padding: var(--wp--preset--spacing--30);
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.wp-block-stovery-product-search .header-search__btn:hover {
	color: var(--wp--preset--color--primary);
}

/* ---------- Variant «toggle»: icon button + search panel at the top of the screen (tesli.ua) ---------- */
.wp-block-stovery-product-search.is-toggle {
	flex: none;
}

.wp-block-stovery-product-search .header-search__toggle {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.wp-block-stovery-product-search .header-search__toggle:hover,
.wp-block-stovery-product-search .header-search__toggle[aria-expanded="true"] {
	color: var(--wp--preset--color--primary);
}

.wp-block-stovery-product-search .header-search__panel {
	position: fixed;
	inset: 0;
	z-index: 100001;
	padding: 0.875rem 0.9375rem;
	background-color: rgb(0 0 0 / 0.6);
	color: var(--wp--preset--color--contrast);
}

.wp-block-stovery-product-search .header-search__panel[hidden] {
	display: none;
}

.has-search-panel-open,
.has-search-panel-open body {
	overflow: hidden;
}

/* Form row: grey category selector, white field, green search button; 40px high, 5px corners. */
.wp-block-stovery-product-search .header-search__panel .header-search__form {
	position: relative;
	gap: 0;
	max-width: 45rem;
	margin: 0 auto;
}

.wp-block-stovery-product-search .header-search__panel .header-search__category {
	width: 8.5rem;
}

.wp-block-stovery-product-search .header-search__panel .header-search__category-btn {
	width: 100%;
	height: 2.5rem;
	padding: 0 var(--wp--preset--spacing--40);
	border-radius: 5px 0 0 5px;
	background: var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--medium);
}

.wp-block-stovery-product-search .header-search__panel .header-search__input {
	height: 2.5rem;
	padding: 0 3rem 0 var(--wp--preset--spacing--30);
	border-radius: 0 5px 5px 0;
	background: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--large);
}

.wp-block-stovery-product-search .header-search__panel .header-search__btn {
	position: absolute;
	top: 0;
	right: 0;
	justify-content: center;
	align-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border-radius: 5px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.wp-block-stovery-product-search .header-search__panel .header-search__btn:hover {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}

.wp-block-stovery-product-search .header-search__panel .stovery-search-results-dropdown {
	top: 3.375rem;
	right: 0.9375rem;
	left: 0.9375rem;
	max-width: 45rem;
	margin: 0 auto;
}

/* Close: tesli.ua has none (a tap on the dimmed page closes); shown for keyboard users only. */
.wp-block-stovery-product-search .header-search__close {
	position: absolute;
	top: 3.75rem;
	right: 0.9375rem;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.wp-block-stovery-product-search .header-search__close:not(:focus-visible) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
