/* ============================================================
   ВЫПАДАЮЩИЕ ПОДСКАЗКИ ПОД СТРОКОЙ ПОИСКА — один участок, один хозяин.

   Всё оформление окна подсказок живёт здесь: само окно и его открытое
   состояние, популярные категории с кнопками и значками, строки найденных
   товаров с фото, названием и ценой, наведение мышью, выбор клавишами,
   «ничего не найдено», «показать все результаты», светлая и тёмная темы.

   Восьмой файл-участок нового вида. Было 99 объявлений в шести слоях:
   storefront.v3, design-lab.v1, design-lab-flagship.v2, dark-theme.v1,
   ui-tweaks.v1 и ui-fixes.v5. Правку вносить только сюда — заводить новый
   слой поверх нельзя, это ловит npm run verify.

   ── Что НЕ входит в участок ──
   Сама строка поиска: `.search`, поле ввода `#searchInput`, кнопка
   `#searchBtn`. Её вид уже сведён в storefront.v3.css, и снаружи остались
   только два документированных исключения: в mobile-layout.v2.css — место и
   размер поиска в сетке шапки телефона, в ui-tweaks.v1.css — правило
   невидимой рамки фокуса, общее с выпадающим списком сортировки.
   За этим следит test/search-single-source.test.js.

   ── Что осталось у прежнего хозяина НАМЕРЕННО ──
   Одно правило в ui-fixes.v5.css:

       .card .thumb.has-img, .dthumb.has-img, .sg-thumb.has-img
           { background: var(--fl-surface) !important; }

   Это общее правило про фотографии товара: одинаковый белый подклад под
   картинкой в плитке каталога, в списках корзины и избранного И в подсказках
   поиска. Смысл его в том, чтобы один и тот же товар нигде не выглядел
   иначе. Выдернуть отсюда `.sg-thumb` значило бы, что следующая правка фона
   фотографий молча обойдёт подсказки стороной, и они разъедутся с каталогом.
   Тот же случай, что с шестью общими правилами карточки товара и двумя
   правилами ритма заголовков у вращающейся витрины.

   ── Что удалено как мёртвое (с доказательством) ──
   1. `html[data-theme="dark"] .search-suggest .sug:hover` и `.sug.active`
      из dark-theme.v1.css. Класс `.sug` не создаётся нигде: ни в
      public/index.html, ни в public/storefront.v3.js, ни на других
      страницах. Подсказки строит renderSuggest(), и она ставит `.sg-item`,
      а выбор клавишами помечает классом `.hl`, а не `.active`. Правила
      остались от прежнего поколения разметки.
      Проверка по ширинам этого показать НЕ МОГЛА: она сравнивает победителей
      внутри одного селектора, а `.sug` не спорит ни с кем — он «выигрывает»
      в пустоте.
   2. `.sg-thumb.has-img{background:#fff!important}` из общего правила в
      storefront.v3.css. Его перебивало то самое живое правило из
      ui-fixes.v5.css: одинаковая специфичность, `!important` у обоих,
      а ui-fixes подключён девятнадцатым против третьего.

   ── Что нельзя переставлять местами ──
   В `.search-suggest` сокращённое `overflow` обязано идти ДО `overflow-y`:
   иначе прокрутка длинного списка перестанет работать. За порядком следит
   test/css-layers.test.js.

   Что ещё влияет на подсказки:  npm run who-wins .search-suggest
   ============================================================ */

/* ── Окно подсказок ── */
.search-suggest{background:var(--card-bg);border:1px solid var(--dl-line);border-radius:18px;box-shadow:0 16px 40px rgba(10,87,163,.18);display:none;left:0;max-height:400px;overflow:hidden;overflow-y:auto;position:absolute;right:0;top:calc(100% + 10px);z-index:120}
.search-suggest.on{display:block}
html[data-theme="dark"] .search-suggest{background:var(--card-bg);color:var(--ink)}

/* ── Популярные категории: заголовок, полоса, кнопки ── */
.sg-quick-label{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.6px;padding:12px 14px 2px;text-transform:uppercase}
.sg-quick-chips{display:flex;flex-wrap:wrap;gap:8px;padding:8px 14px 14px}
.sg-chip{background:var(--sky);border-radius:10px;color:var(--deep);font-size:13px;font-weight:700;padding:8px 14px;transition:background .15s,color .15s,transform .15s}
.sg-chip:hover{background:var(--blue);color:#fff;transform:translateY(-1px)}
.sg-chip .cat-ico-img{height:18px;vertical-align:-4px;width:18px}
.sg-chip .cat-svg{height:18px;vertical-align:-4px;width:18px}
html:not([data-theme="dark"]) .sg-chip{background:#eef3fb;color:#12283d}
html:not([data-theme="dark"]) .sg-chip .svg-ico{color:#1769e0}
html:not([data-theme="dark"]) .sg-chip:hover{background:#1769e0;color:#ffffff}
html:not([data-theme="dark"]) .sg-chip:hover .svg-ico{color:#ffffff}

/* ── Строка найденного товара: фото, название, цена ── */
.sg-item{align-items:center;cursor:pointer;display:flex;gap:12px;padding:10px 14px;transition:background .15s}
.sg-item:hover{background:var(--sky)}
.sg-item.hl{background:var(--sky)}
.sg-thumb{align-items:center;background:linear-gradient(145deg,var(--sky),var(--sky2));border-radius:9px;display:flex;flex-shrink:0;font-size:18px;height:40px;justify-content:center;overflow:hidden;width:40px}
.sg-thumb img{height:100%;object-fit:contain;width:100%}
.sg-title{color:var(--ink);flex:1;font-size:13.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-price{color:var(--night);flex-shrink:0;font-size:13px;font-weight:800}

/* ── Подвал окна: «ничего не найдено» и «показать все результаты» ── */
.sg-empty{color:var(--muted);font-size:13px;padding:16px;text-align:center}
.sg-more{border-top:1px solid var(--sky2);color:var(--blue);cursor:pointer;font-size:13px;font-weight:700;padding:11px 14px;text-align:center}
.sg-more:hover{background:var(--sky)}