/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN 2.0 — ПОИСК В ШАПКЕ + ПАЛИТРА ⌘K (design2-search, 15.09 AI-2)
   Бэклог линзы d2-polish → d2-dark: «поиск в шапке (⌘K)» — паттерн
   Faire/ЯМ/Kickstarter: видимое поле поиска в шапке + горячая клавиша.
   До: поиск спрятан за иконкой 🔍 в ряду из 7 иконок (VLM: «шапка как
   панель администратора»). После: поле + ⌘K, палитра-комманд-лайн.

   Архитектура (ноль правок shop.js):
   · .d2-search — поле-триггер: на монолит-страницах вставляется
     additive-JS (design2-search.js) после кнопки «Каталог»; на
     статичных welcome/suppliers — прямо в разметку (без JS это
     ссылка на /catalog, graceful fallback);
   · палитра = существующий #shop-search-pop (попап шапки): из блока
     под шапкой → плавающая центрированная панель (Linear/Raycast);
   · движок НЕ тронУТ: site-search.js (window.__ss) — индекс 180
     товаров, поставщики, механики; грузится лениво по первому
     открытию (как и раньше через #shop-search-btn);
   · СКИН .ss-* здесь САМОДОСТАТОЧЕН: статичные страницы не грузят
     shop.css — этот файл несёт полные стили выдачи; на монолите
     грузится ПОСЛЕ shop.css и перекрывает старый жёлтый скин;
   · тёмная тема: все правила на var() токенах 2.0, которые
     design2-dark.css переопределяет на 6 страницах; поверхности
     палитры — явный тёмный фикс (§6), т.к. --paper не переопределяется.

   Цветовая дисциплина 2.0: янтарь НЕ используется в поле/палитре
   (янтарь — только главный CTA и прогресс). Фокус — мягкое
   amber-soft-кольцо у активного инпута, подсветка совпадений —
   янтарная пастель (язык поисковой подсветки, не CTA).
   Откат: убрать <link> + <script> из HTML, rm assets/design2-search.*.
   ═══════════════════════════════════════════════════════════════════════════
   v2 (15.09, вечер, AI-2 — докатка прерванной сессии): v1 ссылался на
   токены --r-sm, --sh-3, --paper, которые на монолит-страницах НЕ определены
   (tokens.css v2 — другая система имён: --color-…/--bg-…) → border-radius
   и тени резолвились в 0/none. Фикс: собственный :root-блок (значения —
   канон прототипа design2.html, идентичен design2-pool.css) + тёмные
   поверхности для .d2-search.on и ⌘K-чипа (§6). Каскад: html[data-theme]
   специфичнее :root — тёмные токены design2-dark.css не затираются.
   v3 (там же): в комментарии v2 последовательность «--r-asterisk-slash»
   преждевременно закрывала CSS-комментарий — :root не парсился; текст
   переписан без слэш-звёздочек, контент без изменений.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#16181D; --ink-2:#5B616E; --ink-3:#9AA1AC;
  --line:#E8EAEE; --line-2:#F1F3F6;
  --paper:#FFFFFF; --paper-2:#F7F8FA;
  --amber:#FFDE00; --amber-ink:#16181D; --amber-deep:#8A6D00;
  --amber-soft:#FFF9C4; --amber-line:#F0DFA0;
  --green:#0E9F6E; --green-soft:#E6F6F0;
  --red:#E02424; --red-soft:#FDECEC;
  --blue:#2E6BE6;
  --r-lg:16px; --r-md:12px; --r-sm:9px;
  --sh-1:0 1px 2px rgba(22,24,29,.05);
  --sh-2:0 6px 22px rgba(22,24,29,.09);
  --sh-3:0 14px 44px rgba(22,24,29,.14);
}

/* ═══ 1. ПОЛЕ-ТРИГГЕР В ШАПКЕ (визуальный язык прототипа design2) ═══ */
.d2-search{
  flex:1 1 240px; max-width:430px; min-width:180px;
  display:flex; align-items:center; gap:9px;
  height:40px; padding:0 12px;
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper-2); color:var(--ink-3);
  font:500 14px/1 'Inter',system-ui,-apple-system,sans-serif;
  cursor:pointer; text-decoration:none; box-sizing:border-box;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.d2-search:hover{border-color:var(--ink-3); color:var(--ink-2)}
.d2-search:focus-visible{outline:none; border-color:var(--ink); background:var(--paper)}
.d2-search.on, body.d2-search-open .d2-search{
  border-color:var(--ink); background:var(--paper); color:var(--ink-2);
}
.d2-search svg{flex:none; width:16px; height:16px; display:block}
.d2-search__t{
  flex:1; min-width:0; text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.d2-search__k{
  flex:none; font-size:10.5px; font-weight:700; color:var(--ink-3);
  border:1px solid var(--line); border-radius:5px; padding:2px 6px;
  background:var(--paper); line-height:1.3;
}
@media(max-width:1180px){.d2-search__k{display:none}}
@media(max-width:960px){.d2-search{display:none}}

/* ═══ 2. ПАЛИТРА: из полосы под шапкой → плавающая панель ═══
   #shop-search-pop рендерит shop.js внутри sticky #shop-header; на
   статичных страницах его создаёт design2-search.js внутри <header>.
   position:absolute якорится к sticky-родителю — панель висит под
   шапкой по центру, Linear/Raycast-паттерн. */
.shop-search-pop{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  width:min(680px, calc(100vw - 32px));
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-3);
  padding:14px; z-index:300; box-sizing:border-box;
  animation:d2ss-pop .18s ease;
}
.shop-search-pop[hidden]{display:none}
@keyframes d2ss-pop{from{opacity:0; transform:translateX(-50%) translateY(-6px)}to{opacity:1; transform:translateX(-50%) translateY(0)}}
@media(max-width:640px){
  .shop-search-pop{left:10px; right:10px; transform:none; width:auto; top:calc(100% + 6px); padding:10px}
  @keyframes d2ss-pop{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:translateY(0)}}
}

/* ═══ 3. СКИН ДВИЖКА 2.0 — самодостаточный (страницы без shop.css) ═══ */
.ss-pill{
  display:flex; align-items:center; gap:10px;
  border:1.5px solid var(--ink); border-radius:var(--r-sm);
  padding:0 14px; height:46px; background:var(--paper); color:var(--ink);
  box-sizing:border-box;
}
.ss-pill:focus-within{box-shadow:0 0 0 3px var(--amber-soft)}
.ss-pill svg{flex:none; color:var(--ink-3)}
.ss-pill input{
  border:0; outline:0; flex:1; min-width:0;
  font:500 14.5px/1.2 'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink); background:transparent;
}
.ss-pill input::placeholder{color:var(--ink-3)}
.ss-count{
  flex:none; font-size:11px; font-weight:800;
  background:var(--paper-2); color:var(--ink-2);
  border:1px solid var(--line); border-radius:999px;
  min-width:22px; height:22px; padding:0 7px;
  display:inline-flex; align-items:center; justify-content:center;
}
.ss-box{max-height:min(56vh,460px); overflow:auto; margin-top:10px; padding-right:2px}
.ss-g{
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin:12px 2px 6px;
}
.ss-g:first-child{margin-top:2px}
.ss-i{
  display:flex; gap:10px; align-items:center;
  border:1.5px solid transparent; border-radius:var(--r-sm);
  padding:9px 11px; cursor:pointer;
}
.ss-i:hover, .ss-i.on{border-color:var(--line); background:var(--paper-2)}
.ss-ic{font-size:19px; flex:none; width:26px; text-align:center}
.ss-b{min-width:0; flex:1}
.ss-t{font-size:13.5px; font-weight:700; color:var(--ink)}
.ss-h{font-size:12px; color:var(--ink-2); margin-top:2px; line-height:1.45}
.ss-hl{background:var(--amber-soft); border-radius:4px; padding:0 2px; color:var(--ink)}
.ss-go{color:var(--ink-3); font-size:16px; flex:none}
.ss-chips{display:flex; flex-wrap:wrap; gap:7px; margin:2px 0 4px}
.ss-chips b{
  border:1.5px solid var(--line); border-radius:999px; background:var(--paper);
  padding:6px 13px; font-size:12.5px; font-weight:700; color:var(--ink-2); cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.ss-chips b:hover{border-color:var(--ink); color:var(--ink)}
.ss-empty{
  border:1.5px dashed var(--line); border-radius:var(--r-md);
  padding:18px; text-align:center; font-size:13px; color:var(--ink-2); margin-top:10px;
}
.ss-map{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:11.5px; color:var(--ink-2); padding:4px 2px 6px}
.ss-map b{color:var(--ink)}

/* ═══ 4. МЕСТО В ШАПКАХ ═══ */
/* монолит: поле после кнопки «Каталог», acts и так справа (ml:auto) */
.shop-head__in .d2-search{order:0}
/* старая иконка 🔍: на широких экранах поле её заменяет; без JS
   (нет body.d2-search-on) иконка остаётся — progressive enhancement;
   на узких поле скрыто — иконка остаётся единственным входом */
@media(min-width:961px){
  body.d2-search-on #shop-search-btn{display:none}
}

/* ═══ 5. ПОИСК ОТКРЫТ: приглушаем страницу под палитрой (фокус-режим) ═══ */
body.d2-search-open .shop-mega:not([hidden]){display:none}

/* ═══ 6. ТЁМНАЯ ТЕМА (токены — от design2-dark.css на 6 страницах;
     правила самодостаточны — работают и без него, если тему распаузят) ═══ */
html[data-theme="dark"] .shop-search-pop{background:#211E1A; border-color:#38332C}
html[data-theme="dark"] .ss-pill{background:#211E1A}
html[data-theme="dark"] .ss-count{background:#26221E}
html[data-theme="dark"] .ss-i:hover, html[data-theme="dark"] .ss-i.on{background:#26221E; border-color:#38332C}
html[data-theme="dark"] .ss-hl{color:#EDE8E0}
html[data-theme="dark"] .ss-chips b{background:#211E1A}
/* v2: поле-триггер в активном состоянии — --paper тёмной темой не
   переопределяется, без фикс поле белеет на тёмной шапке */
html[data-theme="dark"] .d2-search:focus-visible,
html[data-theme="dark"] .d2-search.on,
html[data-theme="dark"] .d2-search-open .d2-search{background:#211E1A}
html[data-theme="dark"] .d2-search__k{background:#211E1A; border-color:#38332C; color:#C7BFB4}