/* ==========================================================================
   TopShop — Header
   Два яруси (ТЗ §24): лого + великий пошук + дії; нижче — навігація.
   Слот міні-кошика закладено одразу (ТЗ §30).
   ========================================================================== */

.ts-header {
	position: sticky;
	top: 0;
	z-index: var(--ts-z-header);
	background: var(--ts-color-surface);
}

/* --- Верхній ярус ------------------------------------------------------- */

.ts-header__main {
	display: flex;
	align-items: center;
	gap: var(--ts-space-4);
	padding-block: var(--ts-space-3);
}

.ts-logo {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: var(--ts-space-2);
	font-size: var(--ts-text-xl);
	font-weight: var(--ts-weight-bold);
	letter-spacing: var(--ts-tracking-tight);
	color: var(--ts-color-text-strong);
}

.ts-logo:hover {
	text-decoration: none;
}

.ts-logo__mark {
	color: var(--ts-color-primary);
}

/* --- Пошук — головний елемент хедера (ТЗ §12) --------------------------- */

.ts-search {
	position: relative;
	flex: 1 1 auto;
	max-width: 720px;
}

.ts-search__form {
	display: flex;
	align-items: center;
	background: var(--ts-color-surface-sunken);
	border: 1px solid transparent;
	border-radius: var(--ts-radius-md);
	transition: border-color var(--ts-duration-fast) var(--ts-ease),
		background-color var(--ts-duration-fast) var(--ts-ease),
		box-shadow var(--ts-duration-fast) var(--ts-ease);
}

.ts-search__form:focus-within {
	background: var(--ts-color-surface);
	border-color: var(--ts-color-primary);
	box-shadow: var(--ts-shadow-focus);
}

.ts-search__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: var(--ts-space-3) var(--ts-space-4);
	background: transparent;
	border: 0;
	font-size: var(--ts-text-base);
	color: var(--ts-color-text);
}

.ts-search__input:focus {
	outline: none;
}

.ts-search__input::placeholder {
	color: var(--ts-color-faint);
}

/*
 * На телефоні підказка дрібніша за сам ввід. Саме поле мусить
 * лишатися 16px — менший шрифт змушує iOS зумити сторінку при
 * фокусі, — але підказка з цим розміром виглядала як готовий
 * текст і майже впиралася в кнопку пошуку.
 */

/* Прибираємо нативний хрестик Chrome — маємо власний */
.ts-search__input::-webkit-search-cancel-button {
	display: none;
}

/*
 * Хрестик очищення. Вужчий за кнопку пошуку (36px проти 44px), щоб не
 * читався як другий рівноцінний елемент керування, але лишався в межах
 * зручного влучання пальцем разом із падингом поля.
 */
.ts-search__reset {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--ts-color-faint);
	background: none;
	border: 0;
	border-radius: var(--ts-radius-full, 999px);
	cursor: pointer;
}

.ts-search__reset[hidden] {
	display: none;
}

.ts-search__reset:hover {
	color: var(--ts-color-text);
	background: var(--ts-color-surface-sunken);
}

.ts-search__form:focus-within .ts-search__reset:hover {
	background: var(--ts-color-border-subtle, rgba(0, 0, 0, 0.06));
}

.ts-search__submit {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--ts-color-muted);
	border-radius: var(--ts-radius-md);
}

.ts-search__submit:hover {
	color: var(--ts-color-primary);
}

/* --- Autocomplete (ТЗ §12) ---------------------------------------------- */

.ts-search__results {
	position: absolute;
	top: calc(100% + var(--ts-space-2));
	left: 0;
	right: 0;
	z-index: var(--ts-z-dropdown);
	max-height: min(60vh, 520px);
	overflow-y: auto;
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
	box-shadow: var(--ts-shadow-lg);
}

.ts-search__results[hidden] {
	display: none;
}

@media (max-width: 767px) {
	/*
	 * Поле пошуку вузьке (ліворуч логотип, праворуч кнопки), і підказки
	 * в його ширину ламали назви товарів на три рядки. Розтягуємо панель
	 * на весь екран — вона й так перекриває вміст.
	 */
	.ts-search__results {
		/*
		 * Прив'язка до лівого краю екрана, а не до центра поля: поле
		 * зміщене (ліворуч логотип, праворуч кнопки), тому центрування
		 * по ньому виносило панель за правий край і давало
		 * горизонтальний скрол.
		 */
		left: calc(-1 * var(--ts-search-offset, 0px));
		right: auto;
		width: 100dvw;
		max-width: 100dvw;
		border-left: 0;
		border-right: 0;
		border-radius: 0;
	}
}

.ts-suggest {
	display: flex;
	align-items: center;
	gap: var(--ts-space-3);
	padding: var(--ts-space-3) var(--ts-space-4);
	color: var(--ts-color-text);
	border-bottom: 1px solid var(--ts-color-border);
}

.ts-suggest:last-child {
	border-bottom: 0;
}

/* Підсвітка при наведенні І при клавіатурній навігації — один стиль */
.ts-suggest:hover,
.ts-suggest[aria-selected="true"] {
	background: var(--ts-color-surface-sunken);
	text-decoration: none;
}

.ts-suggest__media {
	flex: none;
	width: 44px;
	height: 44px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.ts-suggest__body {
	flex: 1 1 auto;
	min-width: 0;
}

.ts-suggest__title {
	font-size: var(--ts-text-sm);
	line-height: var(--ts-leading-snug);
	--ts-clamp-lines: 1;
}

.ts-suggest__meta {
	font-size: var(--ts-text-2xs);
	color: var(--ts-color-faint);
}

.ts-suggest__price {
	flex: none;
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
	white-space: nowrap;
}

.ts-search__all {
	display: block;
	padding: var(--ts-space-3) var(--ts-space-4);
	text-align: center;
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-primary);
	background: var(--ts-color-surface-sunken);
}

.ts-search__state {
	padding: var(--ts-space-6) var(--ts-space-4);
	text-align: center;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
}

/* --- Дії справа: телефон, обране, кошик --------------------------------- */

.ts-header__actions {
	flex: none;
	display: flex;
	align-items: center;
	gap: var(--ts-space-1);
}

.ts-action {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-space-2);
	padding: var(--ts-space-2) var(--ts-space-3);
	border-radius: var(--ts-radius-md);
	color: var(--ts-color-text);
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-medium);
	white-space: nowrap;
}

.ts-action:hover {
	background: var(--ts-color-surface-sunken);
	color: var(--ts-color-primary);
	text-decoration: none;
}

.ts-action__icon {
	position: relative;
	flex: none;
	display: inline-flex;
}

/* Лічильник поверх іконки кошика */
.ts-action__count {
	position: absolute;
	top: -6px;
	right: -8px;
}

.ts-action__text {
	display: none;
}

@media (min-width: 1024px) {
	.ts-action__text {
		display: inline;
	}
}

/* Телефон — важливий для каталогу без онлайн-оплати */
.ts-action--phone {
	font-weight: var(--ts-weight-semibold);
}

.ts-action--phone .ts-action__text {
	display: none;
}

@media (min-width: 1280px) {
	.ts-action--phone .ts-action__text {
		display: inline;
	}
}

/* Міні-кошик: сума під лічильником на широких екранах */
.ts-minicart__total {
	display: none;
	font-size: var(--ts-text-2xs);
	color: var(--ts-color-muted);
	font-weight: var(--ts-weight-regular);
}

@media (min-width: 1280px) {
	.ts-minicart__text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		line-height: 1.25;
	}

	.ts-minicart__total {
		display: block;
	}
}

/* --- Нижній ярус: навігація --------------------------------------------- */

/*
 * Рядок розділів без ліній зверху й знизу: у макеті хедер — суцільна
 * біла шапка, а не три смуги, розділені рамками.
 */
.ts-header__nav {
	border-top: 0;
}

.ts-nav {
	display: flex;
	align-items: center;
	gap: var(--ts-space-1);
	overflow-x: auto;
	scrollbar-width: none;
}

.ts-nav::-webkit-scrollbar {
	display: none;
}

.ts-nav__item {
	flex: none;
}

.ts-nav__link {
	display: inline-flex;
	align-items: center;
	/*
	 * Відступи вужчі, ніж у решті хедера: зі значками рядок став на
	 * 111px довшим за контейнер, і останній розділ обрізало краєм.
	 */
	gap: 6px;
	padding: var(--ts-space-3) 10px;
	font-size: var(--ts-text-sm);
	/* Жирні назви розділів — як у макеті. */
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

/*
 * Значок темний, а не синій: у макеті колір несе тільки активний
 * стан, а в спокої рядок читається як суцільний темний текст.
 */
.ts-nav__link .ts-icon {
	flex: 0 0 auto;
	color: var(--ts-color-text-strong);
}

.ts-nav__link:hover .ts-icon,
.ts-nav__link[aria-expanded="true"] .ts-icon {
	color: inherit;
}

.ts-nav__link:hover,
.ts-nav__link[aria-expanded="true"] {
	color: var(--ts-color-primary);
	border-bottom-color: var(--ts-color-primary);
	text-decoration: none;
}

/* Кнопка "Каталог" — візуальний якір навігації */
.ts-nav__catalog {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-space-2);
	padding: var(--ts-space-3) var(--ts-space-4);
	margin-right: var(--ts-space-2);
	background: var(--ts-color-primary);
	color: var(--ts-color-primary-contrast);
	border-radius: var(--ts-radius-md);
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-semibold);
	white-space: nowrap;
}

/*
 * Бургер жирніший за решту іконок. Спільні 1.8 поруч із напівжирним
 * «Каталог» на синьому виглядали тонкою сіткою ліній — на заливці
 * штрих завжди читається легшим, ніж на білому.
 */
.ts-nav__catalog .ts-icon--menu {
	stroke-width: 2.6;
}

.ts-nav__catalog:hover {
	background: var(--ts-color-primary-hover);
	text-decoration: none;
}

/* --- Бургер (мобільний) -------------------------------------------------- */

.ts-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: var(--ts-radius-md);
	color: var(--ts-color-text);
}

.ts-burger:hover {
	background: var(--ts-color-surface-sunken);
}

@media (min-width: 1024px) {
	.ts-burger {
		display: none;
	}
}

/* На мобільному ховаємо нижній ярус — навігація живе в drawer */
@media (max-width: 1023px) {
	.ts-header__nav {
		display: none;
	}
}

/*
 * Мобільний хедер за макетом: бургер зліва, логотип по центру,
 * праворуч лише кошик. Пошук окремим рядком на всю ширину.
 *
 *   ┌──────────────────────────────┐
 *   │ ☰        LOGO          кошик │
 *   ├──────────────────────────────┤
 *   │ [ Пошук товарів…           ] │
 *   └──────────────────────────────┘
 *
 * Обране й профіль прибрані з шапки не тому, що зайві, а тому що
 * вони тепер у нижній панелі — під великим пальцем, а не під очима.
 */
@media (max-width: 1023px) {
	.ts-header__main {
		display: grid;
		grid-template-areas:
			"burger  logo    actions"
			"search  search  search";
		/*
		 * Крайні колонки однакові й фіксовані — тільки так логотип
		 * стоїть рівно посередині. Якби вони були auto, центр з'їхав
		 * би вбік ширшого елемента.
		 */
		grid-template-columns: 44px minmax(0, 1fr) 44px;
		gap: var(--ts-space-2) var(--ts-space-2);
		align-items: center;
	}

	.ts-header__main .ts-logo {
		grid-area: logo;
		justify-self: center;
		width: max-content;
	}

	.ts-header__main .ts-burger {
		grid-area: burger;
		justify-self: start;
		margin-left: calc(var(--ts-space-2) * -1);
	}

	.ts-header__main .ts-search {
		grid-area: search;
		max-width: none;
		width: 100%;
	}

	.ts-header__main .ts-header__actions {
		grid-area: actions;
		justify-self: end;
		gap: 0;
	}

	/*
	 * У шапці лишається сам кошик. Телефон, обране й профіль звідси
	 * прибрані: номер є в меню й у футері, решта — у нижній панелі.
	 */
	.ts-header__main .ts-phones,
	.ts-header__main .ts-action--wish,
	.ts-header__main .ts-account {
		display: none;
	}

	/* Підпис під іконкою кошика займає місце, яке потрібне логотипу. */
	.ts-header__main .ts-action__text {
		display: none;
	}
}

/* --- Дотик: дії хедера на телефоні -------------------------------------- */

/*
 * Телефон і кошик у хедері натискають пальцем, а 38px — замала ціль.
 * Доводимо до 44px, не збільшуючи візуальну вагу іконок.
 */
@media (max-width: 767px) {
	.ts-action {
		min-height: 44px;
		min-width: 44px;
		justify-content: center;
	}
}

/* --- Логотип-зображення -------------------------------------------------- */

/*
 * Висота фіксована, ширина рахується з пропорції: логотип має
 * однаково стояти в рядку хедера незалежно від того, який файл
 * підставлено (з теми чи з Кастомайзера).
 */
.ts-logo__img,
.ts-logo .custom-logo {
	display: block;
	width: auto;
	height: 40px;
	max-width: 180px;
	object-fit: contain;
}

@media (min-width: 768px) {
	.ts-logo__img,
	.ts-logo .custom-logo {
		height: 44px;
		max-width: 220px;
	}
}

/* Коли логотип — картинка, текстові відступи зайві */
.ts-logo:has(.ts-logo__img),
.ts-logo:has(.custom-logo) {
	gap: 0;
}

/* --- Прев'ю кошика при наведенні ------------------------------------------- */

.ts-minicart {
	position: relative;
}

.ts-minicart__preview {
	position: absolute;
	z-index: var(--ts-z-dropdown);
	top: calc(100% + 4px);
	right: 0;
	width: 340px;
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
	box-shadow: var(--ts-shadow-lg);
}

.ts-minicart__preview[hidden] {
	display: none;
}

/*
 * Невидимий місток до панелі: між іконкою і панеллю є проміжок, і без
 * нього курсор «випадає» дорогою вниз.
 */
.ts-minicart__preview::before {
	content: "";
	position: absolute;
	top: -6px;
	right: 0;
	left: 0;
	height: 6px;
}

.ts-minicart__head {
	padding: var(--ts-space-4);
	font-size: var(--ts-text-md);
	font-weight: var(--ts-weight-semibold);
	color: var(--ts-color-text-strong);
	border-bottom: 1px solid var(--ts-color-border);
}

.ts-minicart__items {
	margin: 0;
	padding: 0 var(--ts-space-4);
	list-style: none;
}

.ts-minicart__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ts-space-3);
	padding: var(--ts-space-3) 0;
}

.ts-minicart__item + .ts-minicart__item {
	border-top: 1px solid var(--ts-color-border);
}

.ts-minicart__thumb {
	flex: 0 0 auto;
	width: 48px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--ts-radius-sm);
}

.ts-minicart__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.ts-minicart__info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ts-minicart__name {
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-regular);
	line-height: var(--ts-leading-snug);
	color: var(--ts-color-text-strong);
	white-space: normal;
}

.ts-minicart__qty {
	font-size: var(--ts-text-xs);
	font-weight: var(--ts-weight-regular);
	color: var(--ts-color-muted);
}

.ts-minicart__price {
	flex: 0 0 auto;
	font-size: var(--ts-text-sm);
	font-variant-numeric: tabular-nums;
	color: var(--ts-color-text-strong);
}

.ts-minicart__more {
	margin: 0;
	padding: 0 var(--ts-space-4) var(--ts-space-3);
	font-size: var(--ts-text-xs);
	font-weight: var(--ts-weight-regular);
	color: var(--ts-color-muted);
}

.ts-minicart__foot {
	padding: var(--ts-space-4);
	border-top: 1px solid var(--ts-color-border);
}

.ts-minicart__sum {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ts-space-3);
	margin-bottom: var(--ts-space-3);
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-regular);
	color: var(--ts-color-muted);
}

.ts-minicart__sum strong {
	font-size: var(--ts-text-md);
	color: var(--ts-color-text-strong);
}

/* На телефоні прев'ю не показуємо — там працює шухляда. */
@media (max-width: 1023px) {
	.ts-minicart__preview {
		display: none;
	}
}

/*
 * Панель, яку покупець відкрив останньою, — поверх решти.
 *
 * Усі панелі хедера стоять на одному рівні --ts-z-dropdown, тож при
 * перекритті вигравала б та, що пізніше в розмітці: ведучи курсор
 * справа наліво, покупець бачив би нову панель під сусідньою. Клас
 * ставить JS у момент відкриття (HoverPanel).
 */
.ts-minicart__preview.ts-panel-raised,
.ts-phones__panel.ts-panel-raised,
.ts-account__menu.ts-panel-raised {
	z-index: calc(var(--ts-z-dropdown) + 2);
}

/* --- Панель телефонів при наведенні ---------------------------------------- */

.ts-phones {
	position: relative;
}

.ts-phones__panel {
	position: absolute;
	z-index: var(--ts-z-dropdown);
	top: calc(100% + 4px);
	right: 0;
	width: 320px;
	padding: var(--ts-space-4);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
	box-shadow: var(--ts-shadow-lg);
}

.ts-phones__panel[hidden] {
	display: none;
}

/* Місток до панелі, щоб курсор не «випадав» у проміжку. */
.ts-phones__panel::before {
	content: "";
	position: absolute;
	top: -6px;
	right: 0;
	left: 0;
	height: 6px;
}

.ts-phones__group + .ts-phones__group {
	margin-top: var(--ts-space-4);
	padding-top: var(--ts-space-4);
	border-top: 1px solid var(--ts-color-border);
}

.ts-phones__title {
	display: block;
	margin-bottom: var(--ts-space-2);
	font-size: var(--ts-text-2xs);
	font-weight: var(--ts-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ts-color-faint);
}

/*
 * Дві колонки лише коли в рядку сам номер. З оператором поруч
 * («093-170-22-40 lifecell») пара не влазить і напис наїжджає на
 * сусідній номер, тому такі списки лишаємо в одну колонку.
 */
.ts-phones__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ts-space-1) var(--ts-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-phones__list:has(.ts-phones__note) {
	grid-template-columns: minmax(0, 1fr);
}

.ts-phones__item {
	display: flex;
	align-items: baseline;
	gap: var(--ts-space-2);
	min-width: 0;
}

/*
 * Підпис оператора притиснутий до правого краю, а не приклеєний
 * до номера: рядок займає всю ширину панелі, і підписи шикуються
 * в один стовпчик замість рваного краю.
 */
.ts-phones__item .ts-phones__note {
	margin-left: auto;
}

.ts-phones__number {
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-medium);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--ts-color-text-strong);
}

.ts-phones__number:hover {
	color: var(--ts-color-primary);
	text-decoration: none;
}

.ts-phones__note {
	font-size: var(--ts-text-2xs);
	font-weight: var(--ts-weight-regular);
	color: var(--ts-color-faint);
}

.ts-phones__messengers {
	display: flex;
	flex-direction: column;
	gap: var(--ts-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-phones__messenger-name {
	display: block;
	font-size: var(--ts-text-xs);
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-text);
}

/*
 * Номери в два стовпчики на всю ширину. Через flex-wrap вони
 * тулилися ліворуч і ламалися нерівно: у Telegram чотири номери
 * ставали 3+1. Сітка дає рівні колонки й передбачувані рядки.
 */
.ts-phones__messenger-numbers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ts-space-1) var(--ts-space-3);
}

/*
 * Номери месенджерів — такі самі, як основні: 12px читались гірше за
 * все інше в блоці, а це те, заради чого його відкривають. Висота
 * рядка тримає палець: у списку з чотирьох номерів легко промахнутись.
 */
.ts-phones__messenger-numbers .ts-phones__number {
	display: flex;
	align-items: center;
	min-height: 32px;
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-medium);
}

.ts-phones__email {
	display: block;
	margin-top: var(--ts-space-4);
	padding-top: var(--ts-space-4);
	border-top: 1px solid var(--ts-color-border);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-primary);
}

/* На телефоні панель не потрібна — там і так дзвонять по кліку. */
@media (max-width: 1023px) {
	.ts-phones__panel {
		display: none;
	}
}

/* Логотипи операторів і месенджерів. */
.ts-contact-logo {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	object-fit: contain;
	border-radius: var(--ts-radius-sm);
}

.ts-phones__messenger-name {
	display: flex;
	align-items: center;
	gap: var(--ts-space-2);
}

/* --- Вибір розділу пошуку -------------------------------------------------- */

.ts-search__scope {
	position: relative;
	flex: none;
	display: none;
	align-items: center;
	padding-right: var(--ts-space-2);
	border-left: 1px solid var(--ts-color-border);
}

/* На телефоні рядок пошуку й так вузький — селектор ховаємо. */
@media (min-width: 768px) {
	.ts-search__scope {
		display: flex;
	}
}

.ts-search__scope-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-space-1);
	/* 44px — мінімальна зручна ціль для пальця. */
	min-height: 44px;
	padding: 0 var(--ts-space-2) 0 var(--ts-space-3);
	font-family: inherit;
	font-size: var(--ts-text-sm);
	color: var(--ts-color-muted);
	background: none;
	border: 0;
	white-space: nowrap;
	cursor: pointer;
}

.ts-search__scope-btn:hover {
	color: var(--ts-color-primary);
}

.ts-search__scope-list {
	position: absolute;
	/*
	 * Вище за підказки пошуку: обидва відкриваються під тим самим рядком
	 * і перетинаються, а за однакового z-index вигравали б підказки —
	 * вони йдуть пізніше в розмітці. Розділ щойно відкрив сам покупець,
	 * тож він і має бути зверху.
	 */
	z-index: calc(var(--ts-z-dropdown) + 1);
	top: calc(100% + 4px);
	right: 0;
	min-width: 220px;
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: var(--ts-space-1);
	list-style: none;
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-md);
	box-shadow: var(--ts-shadow-lg);
}

.ts-search__scope-list[hidden] {
	display: none;
}

.ts-search__scope-option {
	display: block;
	width: 100%;
	padding: var(--ts-space-2) var(--ts-space-3);
	font-family: inherit;
	font-size: var(--ts-text-sm);
	text-align: left;
	color: var(--ts-color-text);
	background: none;
	border: 0;
	border-radius: var(--ts-radius-sm);
	cursor: pointer;
}

.ts-search__scope-option:hover {
	background: var(--ts-color-surface-sunken);
}

.ts-search__scope-option.is-active {
	color: var(--ts-color-primary);
	background: var(--ts-color-primary-soft);
}

/* --- Підказки-запити ------------------------------------------------------- */

/*
 * Рядок-підказка: іконка й текст. Той самий вигляд для запиту й для
 * категорії — відрізняються лише іконкою, бо поводяться однаково
 * (клік уточнює пошук, а не відкриває товар).
 */
.ts-search__term {
	display: flex;
	align-items: center;
	gap: var(--ts-space-3);
	width: 100%;
	min-height: 40px;
	padding: var(--ts-space-2) var(--ts-space-4);
	font-family: inherit;
	font-size: var(--ts-text-sm);
	text-align: left;
	color: var(--ts-color-text);
	background: none;
	border: 0;
	cursor: pointer;
}

.ts-search__term .ts-icon {
	flex: none;
	color: var(--ts-color-faint);
}

.ts-search__term:hover,
.ts-search__term[aria-selected="true"] {
	background: var(--ts-color-surface-sunken);
	text-decoration: none;
}

/* Дописана частина — жирним: видно, що саме додасться до набраного. */
.ts-search__term-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ts-search__term-text strong {
	font-weight: var(--ts-weight-semibold);
}

.ts-search__term-in {
	color: var(--ts-color-faint);
}

/* --- Історія пошуку -------------------------------------------------------- */

/*
 * Дві колонки, як у x-kom: ліворуч те, що людина шукала, праворуч —
 * що відкривала. Права колонка на світлішому тлі й з межею: це окремий
 * блок, а не продовження списку запитів.
 */
.ts-search__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
}

.ts-search__col--viewed {
	border-left: 1px solid var(--ts-color-border);
	background: var(--ts-color-surface-sunken);
}

/*
 * У правій колонці картка вужча, ніж у результатах, тому ціна їде під
 * назву, а назва отримує два рядки. Інакше «Dell PowerEdge R660»
 * обривається на половині слова.
 */
.ts-search__col--viewed .ts-suggest {
	align-items: flex-start;
}

.ts-search__col--viewed .ts-suggest__title {
	--ts-clamp-lines: 2;
	white-space: normal;
}

/*
 * Ціна — під назвою, а не окремою колонкою праворуч: у вузькій панелі
 * вона з'їдала половину ширини й назва обривалася на другому слові.
 * Сітка, а не wrap: при wrap назва зістрибувала під картинку.
 */
.ts-search__col--viewed .ts-suggest {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-items: center;
	column-gap: var(--ts-space-3);
	row-gap: 2px;
}

.ts-search__col--viewed .ts-suggest__body {
	grid-column: 2;
}

.ts-search__col--viewed .ts-suggest__media {
	grid-row: 1 / span 2;
}

.ts-search__col--viewed .ts-suggest__price {
	grid-column: 2;
	font-size: var(--ts-text-xs);
	text-align: left;
}

/* Порожня колонка не повинна забирати місце. */
.ts-search__col:empty {
	display: none;
}

.ts-search__col:only-child {
	grid-column: 1 / -1;
}

/* Усередині колонок секція вже сама по собі — рамка згори зайва. */
.ts-search__col .ts-search__section + .ts-search__section {
	border-top: 0;
}

@media (max-width: 767px) {
	/*
	 * На телефоні колонки лягають одна під одну: 300px праворуч там
	 * просто немає, а назви товарів рвалися б на три рядки.
	 */
	.ts-search__cols {
		grid-template-columns: minmax(0, 1fr);
	}

	.ts-search__col--viewed {
		border-left: 0;
		border-top: 1px solid var(--ts-color-border);
	}
}

.ts-search__section + .ts-search__section {
	border-top: 1px solid var(--ts-color-border);
}

/*
 * Заголовок секції — липкий: у довгому списку видно, на що саме
 * дивишся, результати це чи вже переглянуте.
 */
.ts-search__section-head {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--ts-color-surface);
}

.ts-search__section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ts-space-3);
	padding: var(--ts-space-3) var(--ts-space-4) var(--ts-space-2);
	font-size: var(--ts-text-2xs);
	font-weight: var(--ts-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ts-color-faint);
}

.ts-search__clear {
	font-family: inherit;
	font-size: var(--ts-text-2xs);
	text-transform: none;
	letter-spacing: normal;
	color: var(--ts-color-primary);
	background: none;
	border: 0;
	cursor: pointer;
}

.ts-search__recent {
	display: flex;
	align-items: center;
	gap: var(--ts-space-2);
	padding: 0 var(--ts-space-2) 0 var(--ts-space-4);
}

.ts-search__recent-term {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: var(--ts-space-2);
	min-height: 40px;
	padding: 0;
	font-family: inherit;
	font-size: var(--ts-text-sm);
	text-align: left;
	color: var(--ts-color-text);
	background: none;
	border: 0;
	cursor: pointer;
}

/* Іконка годинника — приглушена: підказка, а не акцент. */
.ts-search__recent-term .ts-icon {
	flex: none;
	color: var(--ts-color-faint);
}

/*
 * Клавіатурний фокус по списку підсвічує рядок так само, як наведення
 * миші: у списку один активний елемент, незалежно від способу вибору.
 */
.ts-search__recent:has([aria-selected="true"]),
.ts-search__recent:hover {
	background: var(--ts-color-surface-sunken);
}

.ts-search__recent-drop {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	font-size: var(--ts-text-md);
	line-height: 1;
	color: var(--ts-color-faint);
	background: none;
	border: 0;
	border-radius: var(--ts-radius-sm);
	cursor: pointer;
}

.ts-search__recent-drop:hover {
	background: var(--ts-color-danger-soft);
	color: var(--ts-color-danger);
}

/* --- Коди в підказках пошуку ----------------------------------------------- */

.ts-suggest__code {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ts-suggest__code-label {
	color: var(--ts-color-faint);
}

/* Підсвітка знайденого фрагмента коду. */
.ts-suggest__hit {
	padding: 0 1px;
	color: var(--ts-color-text-strong);
	font-weight: var(--ts-weight-semibold);
	background: var(--ts-color-warning-soft);
	border-radius: 2px;
}

@media (max-width: 767px) {
	.ts-search__input::placeholder {
		font-size: var(--ts-text-sm);
	}

	/*
	 * Поле нижче й компактніше. Шрифт лишається 16px — менший
	 * змушує iOS зумити сторінку при фокусі, — але падінг 12/16
	 * розганяв поле до 48px і з'їдав перший екран.
	 *
	 * 40px усе ще зручна ціль: сама форма з рамкою дає 42px, а
	 * кнопка пошуку поруч лишається повноцінними 44px.
	 */
	.ts-search__input {
		min-height: 40px;
		padding: var(--ts-space-2) var(--ts-space-3);
	}

	/* Кнопка звужується, щоб не забирати місце в самого поля. */
	.ts-search__submit {
		width: 40px;
		height: 40px;
	}

	.ts-search__reset {
		width: 32px;
		height: 32px;
	}
}