/* Выпадающие подсказки поиска (static/js/search.js). Токены цветов — из main.css. */
.bp-suggest {
	position: fixed; z-index: 70; max-height: min(70vh, 640px); overflow-y: auto;
	background: var(--surface); border-radius: 14px; padding: 8px;
	box-shadow: 0 18px 50px rgba(15, 17, 22, .16), 0 0 0 1px rgba(15, 17, 22, .06);
	scrollbar-width: thin;
}
.bp-suggest[hidden] { display: none; }
.browser-bar__search.is-loading .browser-bar__search-icon { animation: bp-pulse .8s ease-in-out infinite; }
@keyframes bp-pulse { 50% { opacity: .35; } }

.bp-suggest mark { background: none; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(232, 64, 28, .55); text-underline-offset: 2px; }
.bp-suggest__note { padding: 6px 10px 8px; font-size: 12px; color: var(--muted); }

/* категории и бренды — строка «плашек» */
.bp-suggest__terms { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 4px 10px; border-bottom: 1px solid var(--surface-3); margin-bottom: 6px; }
.bp-suggest__term {
	display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%;
	padding: 6px 10px; border-radius: 9px; background: var(--surface-2); color: var(--ink); font-size: 13px; line-height: 1.25;
}
.bp-suggest__term-kind { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bp-suggest__term-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-suggest__term-count { font-size: 11.5px; color: var(--muted); }
.bp-suggest__term:hover, .bp-suggest__term.is-active { background: var(--surface-3); }

/* товары — компактные строки: миниатюра 3:4 · название и артикул · цена */
.bp-suggest__list { list-style: none; margin: 0; padding: 0; }
.bp-suggest__item {
	display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
	padding: 7px 10px; border-radius: 10px; color: var(--ink);
}
.bp-suggest__item:hover, .bp-suggest__item.is-active { background: var(--surface-2); }
.bp-suggest__thumb { width: 36px; height: 48px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.bp-suggest__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bp-suggest__info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bp-suggest__name { font-size: 13.5px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bp-suggest__meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); min-width: 0; }
.bp-suggest__sku { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-suggest__stock { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.bp-suggest__stock::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bp-suggest__stock--in { color: var(--stock-in); }
.bp-suggest__stock--preorder { color: var(--badge-orange-fg); }
.bp-suggest__stock--out { color: var(--muted); }
.bp-suggest__price { text-align: right; font-size: 14px; font-weight: 700; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.bp-suggest__price s { font-size: 11.5px; font-weight: 500; color: var(--muted); }

.bp-suggest__all {
	display: block; margin-top: 6px; padding: 10px; border-radius: 10px; text-align: center;
	background: var(--surface-2); color: var(--ink); font-size: 13px; font-weight: 600;
}
.bp-suggest__all:hover, .bp-suggest__all.is-active { background: var(--surface-3); }
.bp-suggest__empty { padding: 18px 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); text-align: center; }

@media (max-width: 600px) {
	.bp-suggest { left: 8px !important; width: calc(100vw - 16px) !important; }
	.bp-suggest__item { grid-template-columns: 32px minmax(0, 1fr); }
	.bp-suggest__price { grid-column: 2; flex-direction: row; gap: 8px; align-items: baseline; }
}

/* список отделён от поля зазором — поле остаётся со всеми скруглениями (тема делала плоский низ под «прилегающий» список) */
.browser-bar__search.is-open .browser-bar__search-box { border-radius: var(--radius-md); border-bottom-color: var(--surface-3); }