/*
 * Search suggestions dropdown.
 *
 * Markup and behaviour come from assets/search-suggest.js, so the styling ships
 * with the plugin too — see docs/design/block-css-contract.md.
 */

/* The dropdown is absolute, because the header is sticky: in the flow it would
   push the whole page down on every keystroke. So it needs a positioned
   ancestor — and the plugin establishes that itself rather than asking the theme
   for it. `:has()` is the whole reason this file owes the theme nothing: the
   script inserts the shell next to the input, so its parent is the element to
   anchor, whatever that element is called in whatever theme is active.

   Where `:has()` is missing the list anchors to the page instead of to the
   field. Wrong place, still readable, still dismissible — a degradation, not a
   break. */
:has(> .gsl-suggest__shell) {
	position: relative;
}

/* WooCommerce стрижёт ряд поля по радиусу пилюли (overflow: hidden) — и
   якорь панели оказывается 46-пиксельной клеткой: список «открыт» в DOM и
   невидим на экране (поймано CDP-геометрией 24.08). Раскрываем переполнение
   только там, где внутри живёт панель; скругление кнопки — её собственное,
   ряд ничего не обрезает. */
.wc-block-product-search:has(.gsl-suggest__shell),
.wc-block-product-search__fields:has(.gsl-suggest__shell) {
	overflow: visible;
}

/* Обгортка не займає місця: вона вставляється всередину flex-рядка поля пошуку,
   у якого немає переносу, тож будь-яка ширина відкусила б її в самого поля. */
.gsl-suggest__shell {
	position: static;
	flex: 0 0 0;
	width: 0;
}

.gsl-suggest {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + 4px);
	z-index: 60;
	max-height: 60vh;
	overflow-y: auto;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--base);
	box-shadow: 0 12px 32px color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
}

.gsl-suggest__item {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	justify-content: space-between;
	/* width со своими паддингами: без border-box строка-кнопка истории
	   (width:100%) вырастала на два паддинга шире панели и срезала цены. */
	box-sizing: border-box;
	width: 100%;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

/* Мініатюра — це відповідь на «той самий бісер?». Порожній span тримає ту саму
   клітинку, щоб рядки без фото не гуляли по горизонталі. */
.gsl-suggest__thumb {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--radius--small, 4px);
	background: var(--wp--preset--color--surface-soft);
	object-fit: cover;
}

/* Рядок категорії — другий візуальний клас (Baymard: scoped-рядки не повинні
   читатися як звичайні запити): без мініатюри, з тихою міткою праворуч. */
.gsl-suggest__cat .gsl-suggest__name {
	font-weight: 600;
}

.gsl-suggest__cat + .gsl-suggest__item:not(.gsl-suggest__cat) {
	border-top: 1px solid var(--wp--preset--color--border);
}

/* Збіг із запитом. Штатний жовтий <mark> кричить; тут достатньо ваги. */
.gsl-suggest .gsl-suggest__hit {
	background: transparent;
	color: inherit;
	font-weight: 700;
}

/* Заголовки секцій порожнього поля: «Ви шукали», «Часто шукають». */
.gsl-suggest__label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.gsl-suggest .gsl-suggest__clear {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--brand-text);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

/* Рядок-запит (історія/популярне) — кнопка, але виглядає як пункт списку. */
.gsl-suggest__term .gsl-suggest__name {
	overflow: visible;
	white-space: normal;
}

/* Наведення і клавіатура виглядають однаково: інакше стрілками користуватися
   можна, але не видно, де ти. */
.gsl-suggest__item:hover,
.gsl-suggest__item.is-active {
	background: var(--wp--preset--color--brand-light);
}

.gsl-suggest__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gsl-suggest__meta {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: baseline;
	white-space: nowrap;
}

.gsl-suggest__sku {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Записано через двох предків навмисне. Тема має право оформити свій блок
   пошуку, і `gsl-theme` це робила селектором `.gsl-search button` — під нього
   потрапляла й ця кнопка, бо панель підказок живе всередині блока пошуку.
   (0,1,1) перемагає (0,1,0), тож кнопка виходила 52 px завширшки, кольору
   бренда, з переносом по одному слову на рядок.

   Тему виправлено, але правило лишається двокласовим: контракт (ADR 0018)
   вимагає, щоб блок був структурно цілим під будь-якою темою, а наступна тема
   напише той самий широкий селектор і нічого про це не скаже. */
.gsl-suggest .gsl-suggest__all {
	display: block;
	width: 100%;
	padding: var(--wp--preset--spacing--30);
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--brand-text);
	font: inherit;
	text-align: center;
	white-space: normal;
	cursor: pointer;
}

.gsl-suggest .gsl-suggest__all:hover {
	background: var(--wp--preset--color--surface-soft);
}