/* Шторка пошуку — тимчасова пара файлів (див. шапку nb-search.js).
   Значення беруться з токенів теми, але з запасним числом: файл підключається окремо від
   спільного бандла і мусить виглядати правильно навіть там, де токенів ще немає. */
.nb-search {
  position: fixed;
  inset: 0;
  z-index: 2000;                                   /* --nb-z-panel: вище чужої хроми теми */
  font-family: inherit;
  color: var(--nb-ink, #000);
  pointer-events: none;                            /* смуга над панеллю — це шапка, вона мусить
                                                      лишатися робочою: кошик, бургер, логотип */
}
.nb-search__overlay,
.nb-search__panel { pointer-events: auto; }
.nb-search[hidden] { display: none; }
html.nb-search-open { overflow: hidden; }

.nb-search__overlay {
  position: absolute;
  top: var(--nbs-top, 0px);          /* шапку не затемнюємо: вона лишається робочою */
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.22);
}

.nb-search__panel {
  position: absolute;
  top: var(--nbs-top, 0px);          /* панель починається ПІД шапкою */
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  background: var(--nb-paper, #FFFFFF);
  outline: none;
}

.nb-search__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--nb-space-3, 15px);
  padding: var(--nb-space-3, 15px) var(--nb-gutter, 15px) 0;
}

.nb-search__field {
  flex-grow: 1;
  min-width: 0;          /* без цього поле не стискається і «Закрити» їде за екран (390px) */
  display: flex;
  align-items: center;
  gap: var(--nb-space-2, 10px);
  height: var(--nb-tap, 50px);
  padding: 0 14px;
  /* Val 17.09: «хочу закруглені краї і не такий чорний колір, може як у кнопки-прилипалки».
     Радіус 3px — це системне значення для полів вводу (DESIGN.md: «Поле вводу і селект —
     радіус 3px»), а gray-700 практично збігається з кольором липкої кнопки товару
     (#757575 проти #79747E) і при цьому лишається токеном системи, а не разовим кодом. */
  border: var(--nb-border, 1px) solid var(--nb-gray-700, #757575);
  border-radius: var(--nb-r-sm, 3px);
  box-sizing: border-box;
}

.nb-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.nb-search__input {
  flex-grow: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--nb-fs-base, 14px);
  color: inherit;
}
.nb-search__input:focus { outline: none; }
/* ⚠ Підкреслення в полі прибрано (Val 17.09): :focus-visible у текстових полях Chrome
   вмикає і на клік мишею, тому лінія під набраним вилазила у звичайному користуванні.
   Рамку фокуса лишаємо, але ТІЛЬКИ для того, хто ходить клавіатурою: клас nb-kbd тема
   ставить на першому Tab (те саме правило, що в nb-sandbox.css для кнопок меню).
   Мишею поле чисте, клавіатурник бачить, де він, ворота (G-28) бачать рамку. */
body.nb-kbd .nb-search__input:focus {
  outline: var(--nb-border, 1px) solid var(--nb-ink, #000000);
  outline-offset: 2px;
}
.nb-search__input::-webkit-search-cancel-button { display: none; }

/* Роздільник і кнопка пошуку праворуч у полі — як у кадрі stories.com (Val 17.09).
   Поле стало на всю ширину: окремої кнопки «Закрити» біля нього більше немає. */
.nb-search__divider {
  flex: none;
  width: var(--nb-border, 1px);
  height: 24px;
  margin: 0 var(--nb-space-1, 5px) 0 var(--nb-space-2, 10px);
  background: var(--nb-gray-300, #D9D9D9);
}

.nb-search__go {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  margin-right: -14px;              /* дотягуємо зону натискання до краю поля */
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.nb-search__clear[hidden] { display: none; }   /* інакше display:flex нижче б'є атрибут hidden
                                                  і хрестик висить над порожнім полем */

.nb-search__clear {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--nb-gray-500, #8C8C8C);
  cursor: pointer;
}

.nb-search__cancel {
  flex: none;
  min-height: var(--nb-tap, 50px);
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--nb-fs-sm, 12px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
}

.nb-search__body {
  flex-grow: 1;
  min-height: 0;
  /* ⚠ Явно гасимо горизонтальну прокрутку: overflow-y: auto сам по собі вмикає і
     горизонтальну (обчислено на деві: overflow-x auto), і будь-який виступ дитини одразу
     малює смугу на всю панель. */
  overflow-x: hidden;
  overflow-y: auto;
  /* Смуги прокрутки в шторці НЕМАЄ ЗОВСІМ (Val 18.09: «прибрати скролбар»).
     Раніше тут стояла тиха системна смуга 4px (Val 17.09) — вона й лишилась би правильною
     для сторінки, але шторка стала тією ж коробкою, що й меню, а меню смуги не має
     (`.nb-menu-all`: scrollbar-width: none + ::-webkit-scrollbar { display: none }). Дві
     сусідні панелі одного вигляду не можуть відрізнятись однією смугою.
     ⚠ Прокрутка ЛИШАЄТЬСЯ (overflow-y: auto вище) — ховаємо смугу, а не можливість гортати.
     Firefox читає scrollbar-width, Chrome і Safari — ::-webkit-scrollbar; потрібні обидва. */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: var(--nb-space-4, 20px) var(--nb-gutter, 15px) var(--nb-space-4, 20px);
}

.nb-search__body::-webkit-scrollbar { display: none; }

.nb-search__note {
  margin: 0 0 var(--nb-space-4, 20px);
  font-size: var(--nb-fs-base, 14px);
  line-height: 1.5;
}

.nb-search__cap {
  margin: 0;
  padding: 0 0 var(--nb-space-1, 5px);   /* padding, а не margin: див. пояснення нижче про скидання полів теми */
  font-size: var(--nb-fs-xs, 10px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* ⚠ gray-500 давав 3.36:1 — нижче норми 4.5 (ворота qa_ux_rules, G-36, замір 17.09).
     Це не декор, а єдина назва блоку, тому беремо gray-700 = 4.6:1. */
  color: var(--nb-gray-700, #757575);
}

.nb-search__suggest { margin-bottom: var(--nb-space-4, 20px); }

/* Рядок підказки: набране приглушене, дописка чорна. Зона натискання — --nb-tap. */
.nb-search__sug {
  display: flex;
  align-items: center;
  gap: var(--nb-space-2, 10px);
  width: 100%;
  min-height: var(--nb-tap, 50px);
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--nb-fs-base, 14px);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.nb-search__sug svg { flex: none; color: var(--nb-gray-500, #8C8C8C); }
.nb-search__typed { color: var(--nb-gray-500, #8C8C8C); }

.nb-search__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nb-space-3, 15px);
}

.nb-search__tile { display: block; text-decoration: none; color: inherit; }

.nb-search__tile-media {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;      /* пропорція картки каталогу: замір на деві 193×289 = 0.667.
                               3:4 обрізало кадр — саме це Val і побачив (17.09). */
  background: var(--nb-gray-100, #F5F5F5);
}

.nb-search__tile-media picture { display: block; width: 100%; height: 100%; }

.nb-search__tile-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Назва і ціна — як у картці каталогу (Val 17.09). Замір картки на деві:
   назва 13px/1.46 в ОДИН рядок з трикрапкою, повітря над нею 11px, під нею 4px, ціна 13px.
   Один рядок заразом тримає висоту плитки однаковою — підміна заглушки на товар не
   зсуває сусідів. */
.nb-search__tile-name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 11px;
  font-size: var(--nb-fs-md, 13px);
  line-height: 1.46;
}

.nb-search__tile-price {
  display: block;
  margin-top: 4px;
  font-size: var(--nb-fs-md, 13px);
  line-height: 1.46;
}

/* Десктоп: шторка ЛІВОЮ панеллю, тією ж коробкою, що й меню.
   Val 18.09: «Пошук треба перенести вліво, щоб відкривався як меню… і бути таким же широким,
   як саме меню». До цього тут була права панель 540px (`--nb-drawer-w`) — як решта панелей
   системи; замір на 1440 показував left 890 / 540 px проти меню left 0 / 750 px, і при
   відкритому меню шторка лягала поверх нього правим краєм.
   ⚠ Ширину підставляє JS у `--nbs-w`, заміривши ЖИВУ панель меню (див. `menuPanelWidth`).
   Запасне число 750px — замір 18.09 на 1440; воно працює лише там, де меню на сторінці
   немає взагалі, і навмисно не винесене в токен: токен `--nb-menu-panel-w` (900px) описує
   не цю панель і збігом тут був би брехнею. */
@media (min-width: 993px) {
  .nb-search__panel {
    left: 0;
    right: auto;
    width: var(--nbs-w, 750px);
    max-width: 100%;
  }
  /* Три плитки в ряд на десктопі — як у каталозі (Val 17.09). */
  .nb-search__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Бокові поля = поле сторінки (`--nb-gutter`, 40px на десктопі): лівий край поля й підписів стоїть
     по лінії бургера, як і каталог під шторкою (Val 05.10: «надо выровнять по левому краю, у нас так
     и каталог потом идет»). Було 30px — контент шторки стояв на 10px лівіше за бургер. */
  .nb-search__head { padding: var(--nb-space-5, 25px) var(--nb-gutter, 40px) 0; }
  .nb-search__body { padding: var(--nb-space-5, 25px) var(--nb-gutter, 40px); }
  .nb-search__foot { padding: var(--nb-space-4, 20px) var(--nb-gutter, 40px) var(--nb-space-6, 30px); }
  .nb-search__grid { gap: var(--nb-space-4, 20px); }
}

/* Поле пошуку на сторінці видачі: під заголовком, над фільтрами.
   Ширина і поля — від контейнера каталогу, тому власних відступів по боках не даємо. */
/* ⚠ Поле видачі — ТОГО САМОГО розміру й на тій самій висоті, що поле шторки (Val 05.10: «при переході поле
   стає меншим, ніж було в шторці, і плавно зменшується — можна лишити таким же, як у шторці… щоб був
   максимально безшовний перехід»). Замір до правки, 1440: шторка 670×50 на y=85, шрифт 14px; видача 640×50
   на y=80, шрифт 12px; телефон 390: шторка y=65, видача y=70. Тому відступ зверху = верхнє поле шапки
   шторки (`.nb-search__head`: 15px, на десктопі 25px), ширина — та сама формула, що в шторки. */
.nb-search-bar { margin: var(--nb-space-3, 15px) 0 var(--nb-space-2, 10px); }

.nb-search-bar__form {
  display: flex;
  align-items: center;
  gap: var(--nb-space-3, 15px);
}

.nb-search-bar .nb-search__field { max-width: 640px; flex-grow: 1; }
/* Шрифт поля — як у шторці (14px). Скидання каталогу `:is(#nb-catalog, .nb-cat-host).nb-cat input { font: inherit }`
   несе id і перебивало `.nb-search__input`: поле успадковувало 12px контейнера. Вага — тим самим :is() з id. */
:is(#nb-catalog, .nb-cat-host).nb-cat .nb-search-bar .nb-search__input { font-size: var(--nb-fs-base, 14px); }
@media (min-width: 993px) {
  .nb-search-bar { margin-top: var(--nb-space-5, 25px); }
  /* Ширина поля шторки = її панель (`--nbs-w`, жива ширина меню, запасне 750px) мінус два поля сторінки. */
  .nb-search-bar .nb-search__field,
  .nb-search-bar__drop { max-width: calc(var(--nbs-w, 750px) - 2 * var(--nb-gutter, 40px)); }
}

/* ⚠ Відступ ЗАДАНО ПОЛЕМ ВСЕРЕДИНІ (padding), а не margin, і це навмисно.
   Тема каталогу скидає поля абзаців правилом :is(#nb-catalog, .nb-cat-host).nb-cat p { margin: 0 },
   у ньому є id — перебити його класами неможливо без !important, а !important ми не ставимо.
   padding те правило не чіпає. Замір до правки: computed margin-top 0px. */
.nb-search-bar__count {
  margin: 0;
  padding: var(--nb-space-4, 20px) 0 0;   /* повітря під полем (Val 17.09) */
  font-size: var(--nb-fs-md, 13px);
  color: var(--nb-gray-500, #8C8C8C);
  /* ⚠ Вирівнювання задаємо явно: у старій темі контейнер, куди ми вставляємо поле, тягне
     текст праворуч, і лічильник відʼїжджав від поля на протилежний край (кадр 17.09). */
  text-align: left;
}

/* Розділ під запит: перший рядок у порожньому стані. Готовий розділ з товаром
   у наявності кращий за текстову підказку — людина одним тапом бачить вітрину. */
.nb-search__section {
  display: flex;
  align-items: center;
  gap: var(--nb-space-3, 15px);
  min-height: var(--nb-tap, 50px);
  padding: 0;
  font-size: var(--nb-fs-base, 14px);
  text-decoration: none;
  color: inherit;
}

.nb-search__section-name { flex-grow: 1; }
.nb-search__section-go { flex: none; color: var(--nb-gray-500, #8C8C8C); }

.nb-search__section-count {
  flex: none;
  font-size: var(--nb-fs-md, 13px);
  color: var(--nb-gray-500, #8C8C8C);
  white-space: nowrap;
}

/* Поки шторка відкрита — шапка НЕПРОЗОРА.
   Val 17.09: «хедер пропал… имею в виду прозрачность хедера». Причина саме в ній: у теми
   шапка напівпрозора (замір на деві — rgba(255,255,255,0.94)), сторінка під нею заморожена,
   і крізь шапку проступає старий каталог, поки нижче вже біла панель пошуку. Ваги вистачає
   без !important: html.nb-search-open .header важчий за .header теми. */
html.nb-search-open .header,
html.nb-search-lead .header {
  background: var(--nb-paper, #FFFFFF);
  backdrop-filter: none;
  /* ⚠ І КОЛІР ТЕКСТУ теж. Замір 18.09 на головній: шапка там `header--transparent`, тобто
     біла літера поверх тёмного hero. Ми робимо тло білим — і шапка ставала білим по білому:
     ні «Меню», ні «Закрити», ні логотипа. Це наше ж правило вище і зламало, тому лікуємо
     тут, а не в чужому файлі шапки.
     Кнопки шапки беруть `color: inherit` (замір: `.header__action, .header__menu-btn`), тому
     одного кольору на самій шапці досить — дітей перелічувати не треба. */
  color: var(--nb-ink, #000);
}

/* Розвилка на порожній видачі: розділ і підказки під полем — те саме, що у шторці. */
/* Повітря між лічильником і розвилкою: padding, бо margin у цьому контейнері гасить тема. */
.nb-search-fork { margin: 0; padding: var(--nb-space-6, 30px) 0; }
.nb-search-fork .nb-search__section { max-width: 640px; }

/* Схоже замість порожнечі: плитка товарів прямо на сторінці видачі. */
.nb-search-fork__alt { padding-top: var(--nb-space-6, 30px); }

/* Місце під схоже займаємо ОДРАЗУ, ще до відповіді: сходинка запитів іде мережею і
   доїжджає через секунду-другу, а вставка готових плиток посеред сторінки — це стрибок
   верстки (замір воріт 17.09: CLS 0.673 на порожній видачі при нормі 0.1).
   Заглушка має рівно ту саму геометрію, що й плитка з товаром. */
.nb-search__tile--skel { pointer-events: none; }
.nb-search__tile--skel .nb-search__tile-name,
.nb-search__tile--skel .nb-search__tile-price { background: var(--nb-gray-100, #F5F5F5); }
.nb-search-fork__alt .nb-search__grid { margin-bottom: var(--nb-space-4, 20px); }

/* Стрічка товарів під популярними запитами: що дивились або бестселери.
   На телефоні гортається пальцем (86% заходів), на десктопі — ще й стрілками. */
.nb-search__railbox { padding-top: var(--nb-space-5, 25px); }

.nb-search__railhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Повітря між підписом зі стрілками і кадрами (Val 17.09: «зараз впритул»). Кнопка стрілки
     заввишки --nb-tap із відʼємними полями, тому власного відступу рядок не дає. */
  margin-bottom: var(--nb-space-3, 15px);
}

/* На телефоні стрілок немає — там гортають пальцем. */
.nb-search__railnav { display: none; }

/* Шеврони як у товарних рядах сайту, але зона натискання повні --nb-tap: іконка лишається
   16×24, а кнопка навколо неї 50×50 і вилазить полями за край — рядок від цього не їде. */
.nb-search__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nb-tap, 50px);
  height: var(--nb-tap, 50px);
  margin: calc(var(--nb-tap, 50px) / -4) 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--nb-ink, #000000);
  cursor: pointer;
  transition: opacity var(--nb-motion, 0.2s ease);
}
.nb-search__arrow[disabled] { opacity: 0.3; pointer-events: none; }
.nb-search__arrow:last-child { margin-right: calc(var(--nb-tap, 50px) / -4); }

.nb-search__rail {
  display: flex;
  gap: var(--nb-space-2, 10px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-right: calc(var(--nb-gutter, 15px) * -1);   /* стрічка йде під край екрана */
  padding-right: var(--nb-gutter, 15px);
}

.nb-search__rail::-webkit-scrollbar { display: none; }

.nb-search__rail-item {
  flex: none;
  width: 120px;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
}

/* ⚠ Десктопні правила стрічки стоять У КІНЦІ файла НАВМИСНО: сама стрічка і кнопки описані
   нижче по файлу, ніж блок @media вгорі, і звідти їх не перебити — правило з однаковою
   вагою виграє те, що йде пізніше. Так і зловили: стрілки лишались display: none. */
@media (min-width: 993px) {
  /* Стрічка НЕ вилазить за край: із вильотом вона робила панель ширшою за себе саму, і внизу
     зʼявлялась горизонтальна смуга на всю панель (Val 17.09; замір: rail 520 у коробці 480 →
     body 550 при ширині 540). Замість вильоту — стрілки. */
  .nb-search__rail { margin-right: 0; padding-right: 0; }
  .nb-search__railnav { display: flex; }

  /* Мишею в рядок підказки влучають курсором, а не пальцем, тож тримати на десктопі всі
     50px --nb-tap ні до чого: пʼять рядків зʼїдали 250px, і ціна першої плитки не влазила
     в екран (Val 17.09; замір на 1280×680: плитка 500→773 при висоті вікна 680). */
  .nb-search__sug { min-height: 40px; }
  .nb-search__suggest { margin-bottom: var(--nb-space-3, 15px); }
  .nb-search__body { padding-top: var(--nb-space-4, 20px); }
}

/* Сторінка видачі: без крихт і без заголовка теми (Val 17.09). Замість «Результати пошуку:
   «сукня»» людина бачить сам запит у полі й число під ним — те саме двічі не пишемо, а
   екран вгорі звільняється на ~110px, і перший ряд товарів влазить у вікно. */
/* ⚠ Крихти ховаємо селектором З ID — інакше не перебити. Тема каталогу тримає їх правилом
   :is(#nb-catalog, .nb-cat-host).nb-cat .breadcrumbs { display: block }, а в ньому є id:
   моє правило на самих класах програвало, і крихти лишались на екрані (кадр Val 17.09).
   !important не ставимо — беремо вагою: id + три класи проти id + двох. */
html.nb-search-page :is(#nb-catalog, .nb-cat-host).nb-cat .breadcrumbs,
html.nb-search-page :is(#nb-catalog, .nb-cat-host).nb-cat .catalog-head__title,
html.nb-search-page .breadcrumbs,
html.nb-search-page .catalog-head__title { display: none; }
/* Порожня голова розділу не має тримати власне повітря. */
html.nb-search-page :is(#nb-catalog, .nb-cat-host).nb-cat .catalog-head,
html.nb-search-page .catalog-head { padding-top: 0; padding-bottom: 0; }

/* Низьке вікно ноутбука: пʼятий рядок підказок коштує рівно того, чого бракує ціні першої
   плитки, щоб влізти в екран (замір 1280×680: плитка 440→713 при висоті 680). Ховаємо саме
   його, а не тиснемо всі відступи — решта екрана лишається дихати. На високому вікні всі пʼять. */
@media (min-width: 993px) and (max-height: 760px) {
  .nb-search__sug:nth-child(n+5) { display: none; }
}

/* ⚠ Смуга прокрутки — ШТАТНА, браузерна (Val 05.10: «как вариант мы можем скроллбар вернуть тот, что в браузере по
   умолчанию стоит»; на сіру доріжку — «он серый, а не в цвет браузера»). До 05.10 тут жило наше глобальне правило
   (Val 17.09: тонка смуга gray-400 на прозорій доріжці): Chrome з 121 малював її штатною «тонкою» з прозорою доріжкою —
   сірий повзунок у білому каналі, той самий «білий зазор». Своїх кольорів і товщини смузі сторінки більше не задаємо:
   доріжку малює браузер у своїй темі. Горизонтальні стрічки, як і раніше, ховають смугу своїм scrollbar-width: none.
   Прокрутку заперто (шторка пошуку, меню, панелі й модалки — усі замки теми: body.is-locked, is-menu-open,
   is-modal-open, modal-open, повноекранна галерея nb-mfs-lock; перелік — підметом по css теми 05.10): смуги
   немає, а місце під неї лишається (`scrollbar-gutter: stable`), і fixed-затемнення його не накриває — справа
   стояла біла смуга 10px поруч із сірим тлом (замір 05.10). Канал малюється тлом кореня, тому фарбуємо корінь
   кольором самого затемнення поверх білого (`--nb-overlay-solid` 0.22 → rgb 199, той самий замір під шторкою й
   меню): затемнення доходить до краю без шва. У body своє біле тло (#fff), тож сторінка не змінюється. */
html.nb-search-open,
html:has(> body:is(.is-locked, .is-menu-open, .is-modal-open, .modal-open, .nb-mfs-lock)) {
  /* запасной — для браузеров с :has(), но без color-mix() (Chrome 105–110, Safari 15.4–16.1; ревью Codex смены 70):
     без него объявление ниже отбрасывается целиком, и канал оставался цвета страницы. rgb 199 = тот же замір 05.10 */
  background-color: rgb(199 199 199);
  background-color: color-mix(in srgb, var(--nb-ink, #000000) 22%, var(--nb-paper, #FFFFFF));
}
/* Шторка корзины и «Обране» стоит У ПРАВОГО КРАЯ — к каналу прилегает её белая панель, а не затемнение. Серый канал
   читался отдельной полосой справа от шторки (Val 05.10, 13164: «зазор на десктопе справа под скролбар, надо чтоб был
   белый»). Меню и фильтры прилегают к каналу затемнением — там серый остаётся (замер 05.10: у края 1418 px — `nb-cart__body`
   #fff у корзины и избранного, `menu__overlay`/`filter-panel__overlay` 0.22 у меню и фильтров). Правило идёт ПОСЛЕ общего:
   вес выше (класс лома в :not). Лом пробы qa_cart_row_rhythm.py:
   `nb-lom-cart-tight` на <html> — серый канал, как прежде. */
/* ⚠ Лист размеров поверх шторки (`#nb-quick-buy`, «+» в ленте корзины) — канал прилегает к его затемнению → серый (смена 70). */
html:not(.nb-lom-cart-tight):has(> body.is-cart-open):not(:has(#nb-quick-buy:not([hidden]))) {
  background-color: var(--nb-paper, #FFFFFF);
}

/* ⚠ Лічильник і перший підпис розвилки — теги h1 (див. пояснення в nb-search.js). Тема
   малює власні h1 великим капслоком, тому вигляд задаємо явно: рядок мусить лишитись тихим. */
h1.nb-search-bar__count,
h1.nb-search__cap {
  font-family: inherit;
  font-weight: 400;
  letter-spacing: inherit;
  text-transform: none;
  margin: 0;
}
h1.nb-search-bar__count { font-size: var(--nb-fs-md, 13px); line-height: 1.46; }
h1.nb-search__cap--h1 {
  font-size: var(--nb-fs-xs, 10px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Рядок «показуємо схоже»: під лічильником, тихо, але читабельно — це пояснення, а не помилка. */
.nb-search-bar__relaxed {
  margin: 0;
  text-align: left;
  padding: var(--nb-space-1, 5px) 0 0;   /* padding, бо margin абзаців гасить тема каталогу */
  font-size: var(--nb-fs-md, 13px);
  line-height: 1.46;
  color: var(--nb-gray-700, #757575);
}

/* Розділи каталогу в порожньому стані: той самий рядок, що й «Розділ каталогу» під запитом,
   тому власних розмірів не заводимо — лише повітря зверху. */
.nb-search__sections { padding-top: var(--nb-space-5, 25px); }

/* «З чим носити» під видачею. ⚠ Блок НЕ має читатись як результати пошуку: власний підпис,
   повітря зверху і рядок розділу знизу. У лічильник ці кадри не входять — саме через таку
   плутанину бойова сторінка й обіцяє «31 новинку», якої там немає. */
.nb-search-related {
  /* ⚠ Поля з боків — свої: блок лежить поруч із листингом, а поле сторінки тримає САМ листинг
     (замір на деві: .listing padding-left 33px при нулі в батька). Без цього рядка блок
     починався від краю екрана, а товари над ним — з відступом. */
  padding: var(--nb-space-8, 40px) var(--nb-gutter, clamp(15px, 2.6vw, 40px)) var(--nb-space-6, 30px);
}
.nb-search-related .nb-search__grid { margin-bottom: var(--nb-space-3, 15px); }

/* ── Стара тема бою ─────────────────────────────────────────────────────────────────────
   Поле ми вставляємо в її сітку (.row), а там свої поля з боків — 15px замість наших
   --nb-gutter, і абзаци всередині вирівняні по центру. Без цих трьох правил підпис стояв
   посередині, а плитки починалися на 15px лівіше за поле (замір 17.09, кадр Val). */
html.nb-search-legacy .nb-search-fork {
  padding-left: 15px;
  padding-right: 15px;
}
/* ⚠ А ось блокам ПІД листингом поля не потрібні: вони лежать усередині `.col-lg-12`, у якої
   свої 15px, і наші додавались зверху — плитка починалась на 50px, коли товари над нею
   стояли на 35 (замір на бою 18.09 по кадру Val: «відступи зліва і справа»). Два блоки
   вставляються в РІЗНІ місця сітки теми, тому й правила різні. */
html.nb-search-legacy .nb-search-related {
  padding-left: 0;
  padding-right: 0;
}
html.nb-search-legacy .nb-search__cap { text-align: left; }

/* ⚠ Місце під смугу прокрутки тримаємо ЗАВЖДИ (Val 17.09). Коли відкривається шторка, ми
   ставимо html{overflow:hidden} — смуга зникає, і вся сторінка стрибає на її ширину вправо.
   На редизайні це вже вирішено в reset.css, стара тема такого правила не має, а файл
   підключений на кожній сторінці — тому правило тут і для неї. */
html { scrollbar-gutter: stable; }

/* Стара тема: поки шторка відкрита, лупа в шапці стає хрестиком (Val 17.09). Своєї розмітки
   в кнопки немає — це порожній <a> з фоновою іконкою, тому фон гасимо, а хрестик малюємо
   двома лініями. */
html.nb-search-open a.bt-2 { background-image: none; }
/* ⚠ Розмір хрестика рахується не по лінії, а по тому, що ВИДНО: лінія завдовжки L під 45°
   займає L/√2 по кожній осі. Лінія 16px давала хрестик ~11px, і поруч із сумкою 18×18 та
   бургером 15×20 він виглядав дрібним (Val 18.09: «хрестик закриття має бути в розмірі інших
   іконок, треба вирівняти»). Беремо 23px — це видимі ~16px, рівно між лупою 14px, яку він
   замінює, і сумкою 18px.
   ⚠ Зсув на 1px угору — теж замір, а не смак: центри сусідніх іконок стоять на 44 і 43px від
   верху сторінки, а центр кнопки пошуку — на 45. */
html.nb-search-open a.bt-2::before,
html.nb-search-open a.bt-2::after {
  content: '';
  position: absolute;
  top: calc(50% - 1px);
  left: 50%;
  width: 23px;
  height: var(--nb-border, 1px);
  background: var(--nb-ink, #000000);
}
html.nb-search-open a.bt-2::before { transform: translate(-50%, -50%) rotate(45deg); }
html.nb-search-open a.bt-2::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Випадайка підказок під полем на сторінці видачі (Val 17.09: «та сама логіка, що у шторці»).
   ⚠ Лежить НАД сторінкою, а не в потоці: у потоці кожна набрана буква зсувала лічильник,
   фільтри і всю видачу вниз — сторінка дихала під руками (перевірено на першому кадрі 17.09).
   Тому це звичайна випадайка: біла підкладка, тонка рамка, поверх вмісту. */
.nb-search-bar__form { position: relative; }

/* ⚠ Якір — ФОРМА, а не бар (Val 24.09, кадр ?q=бант): форма збігається з полем по висоті й
   лівому краю, бар — ні (лічильник під полем, 15px полів старої теми). Список стоїть під
   рамкою поля з повітрям 5px і тієї ж ширини. */
.nb-search-bar__drop {
  position: absolute;
  top: calc(100% + var(--nb-space-1, 5px));
  left: 0;
  z-index: var(--nb-z-panel, 2000);
  width: 100%;
  max-width: 640px;
  box-sizing: border-box;
  padding: var(--nb-space-3, 15px) 14px var(--nb-space-2, 10px);
  background: var(--nb-paper, #FFFFFF);
  border: var(--nb-border, 1px) solid var(--nb-gray-300, #D9D9D9);
  border-radius: var(--nb-r-sm, 3px);
}
.nb-search-bar__drop[hidden] { display: none; }
.nb-search-bar__drop .nb-search__sug { min-height: 40px; }
/* Другий і наступні поверхи («Зараз шукають», «Розділи») — з тим самим повітрям, що блоки шторки
   (`.nb-search__suggest`, 20px): підпис іде одразу за рядком попереднього поверху. */
.nb-search-bar__drop .nb-search__cap ~ .nb-search__cap { padding-top: var(--nb-space-4, 20px); }
.nb-search-bar__drop .nb-search__section { min-height: 40px; }

/* Вихід у розділ під плиткою у шторці (Val 18.09).

   Перший варіант був підписом — 10px, gray-700, волосінь зверху — і Val сказав прямо:
   «не сильно виділяється, немає бажання натиснути». Це був службовий рядок у ролі дії.
   Тому беремо ГОТОВУ ghost-кнопку системи (DESIGN.md §5: білий фон, чорний текст, чорна
   обводка, радіус 3px, капслок) — окремого вигляду для цього місця не вигадуємо.

   ⚠ Висота — `--nb-tap` (50px), а не 45px кнопки з DESIGN.md: це зона натискання у шторці,
   де поруч стоять картки, і вона за правилом системи більша.
   ⚠ Ховер і фокус — ІНВЕРСІЯ, як у плитки розміру, а не тінь: тема гасить `outline`, і без
   інверсії фокус на цьому рядку не видно (та сама болячка, що G-28 на полі видачі). */
.nb-search__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-space-2, 10px);
  min-height: var(--nb-tap, 50px);
  margin-top: var(--nb-space-5, 25px);
  margin-bottom: var(--nb-space-2, 10px);
  padding-inline: var(--nb-space-3, 15px);
  border: var(--nb-border, 1px) solid var(--nb-ink, #000000);
  border-radius: var(--nb-r-sm, 3px);
  background: var(--nb-paper, #FFFFFF);
  color: var(--nb-ink, #000000);
  font-size: var(--nb-fs-sm, 12px);
  letter-spacing: 0.14em;          /* той самий крок, що в назв блоків шторки */
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--nb-motion, 200ms ease), color var(--nb-motion, 200ms ease);
}
.nb-search__all:hover,
.nb-search__all:focus-visible {
  background: var(--nb-ink, #000000);
  color: var(--nb-paper, #FFFFFF);
}
.nb-search__all[hidden] { display: none; }   /* [hidden] програє display:flex — див. шапку файла */
.nb-search__all-go { flex: 0 0 auto; }

/* Рядок історії з хрестиком (Val 18.09: «навпроти кожного поставити хрестик»).

   ⚠ Хрестик — окрема кнопка в рядку, а не іконка всередині підказки: інакше тап по ньому
   зараховувався б самій підказці й відкривав видачу замість того, щоб прибрати слово.
   ⚠ Зона натискання у хрестика власна, повна — `--nb-tap`. Зменшувати її «бо іконка
   маленька» не можна: промах тут веде на іншу сторінку, а не просто нічого не робить. */
.nb-search__sug-row {
  display: flex;
  align-items: center;
  gap: var(--nb-space-2, 10px);
}
.nb-search__sug-row .nb-search__sug {
  flex: 1 1 auto;
  min-width: 0;
}
.nb-search__sug-del {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nb-tap, 50px);
  height: var(--nb-tap, 50px);
  margin-right: calc(-1 * var(--nb-space-2, 10px));  /* хрестик стоїть по краю панелі, як у поля */
  padding: 0;
  border: 0;
  background: none;
  color: var(--nb-gray-500, #8C8C8C);
  cursor: pointer;
  transition: color var(--nb-motion, 200ms ease);
}
.nb-search__sug-del:hover,
.nb-search__sug-del:focus-visible { color: var(--nb-ink, #000000); }

/* Стрічка «Можливо вам сподобається» самої теми на порожній видачі — прибрана: свою розвилку
   ми вже показали під полем, і одна назва двічі на екрані це помилка, а не багатство вибору
   (Val 18.09, кадр /ua/catalog/?q=Плапа).
   ⚠ Клас `nb-search-page-empty` ставить скрипт на <html>, коли малює розвилку. Правилом, а не
   inline-стилем: тема ініціалізує слайдер ПІЗНІШЕ нашого коду і клонує вузли, тому разова
   правка стилю на бою не спрацювала. Ваги `html.nb-search-page-empty` вистачає без !important. */
html.nb-search-page-empty .banners-wrap .redesign-slider-wrap { display: none; }

/* ===== Появлення і закриття (Val 23.09: «плавное появление и плавное закрытие») =====
   Рухаємо лише transform і opacity — без перерахунку розкладки. Криві й тривалості — токени
   системи: --nb-motion-drawer (320ms, сильний ease-out) на появу, --nb-motion-collapse (220ms)
   на закриття — прибирання має бути швидшим за появу, людина вже вирішила.
   Звідки їде: з-під шапки, невеликим зсувом (12px). Панель на весь екран, і виїзд на всю
   висоту виглядав би важко; короткий зсув плюс проявлення читається як «розкрилось із шапки».
   Закриття кнопкою — назад угору з розчиненням; свайпом — затуханням на місці (.is-swiped). */
.nb-search__panel {
  transform: translate3d(0, -12px, 0);
  opacity: 0;
  transition:
    transform var(--nb-motion-collapse, 220ms cubic-bezier(0.23, 1, 0.32, 1)),
    opacity var(--nb-motion-collapse, 220ms cubic-bezier(0.23, 1, 0.32, 1));
  will-change: transform;
}
.nb-search__overlay {
  opacity: 0;
  transition: opacity var(--nb-motion-collapse, 220ms cubic-bezier(0.23, 1, 0.32, 1));
}
.nb-search.is-in .nb-search__panel {
  transform: none;
  opacity: 1;
  transition:
    transform var(--nb-motion-drawer, 320ms cubic-bezier(0.22, 1, 0.36, 1)),
    opacity var(--nb-motion-drawer, 320ms cubic-bezier(0.22, 1, 0.36, 1));
}
.nb-search.is-in .nb-search__overlay {
  opacity: 1;
  transition: opacity var(--nb-motion-drawer, 320ms cubic-bezier(0.22, 1, 0.36, 1));
}
/* Закриття свайпом — лише затухання, без зсуву, і ПО ЧЕРЗІ (Val 23.09, 11:36 і 11:46:
   «более плавную анимацию потушения, может быть, даже блок поиска чуть позже исчезает»).
   Шари: вміст (підказки, плитка) гасне першим — він уже почав гаснути під пальцем; поле пошуку —
   через 90ms; біле тло шторки разом з усім — останнім, через 140ms. Крива iOS-шторки
   cubic-bezier(0.32, 0.72, 0, 1): м'якший вихід, ніж у кнопкового закриття, — людина не
   поспішає, вона сама відвела шторку. transform тримаємо на місці — інакше поїхала б до -12px. */
.nb-search.is-swiped .nb-search__body {
  opacity: 0;
  transition: opacity 240ms cubic-bezier(0.32, 0.72, 0, 1);
}
.nb-search.is-swiped .nb-search__head {
  opacity: 0;
  transition: opacity 280ms cubic-bezier(0.32, 0.72, 0, 1) 90ms;
}
.nb-search.is-swiped .nb-search__panel {
  transform: none;
  transition: opacity 340ms cubic-bezier(0.32, 0.72, 0, 1) 140ms;
}
.nb-search.is-swiped .nb-search__overlay {
  transition: opacity 340ms cubic-bezier(0.32, 0.72, 0, 1) 60ms;
}
/* Вміст, який гасив палець, повертається до повної плавно, коли свайп не дотягнув. */
.nb-search__body { transition: opacity var(--nb-motion-collapse, 220ms cubic-bezier(0.23, 1, 0.32, 1)); }
/* Поки палець на екрані — жодних переходів: панель іде точно за пальцем, без запізнення. */
.nb-search.is-dragging .nb-search__panel,
.nb-search.is-dragging .nb-search__body,
.nb-search.is-dragging .nb-search__overlay { transition: none; }
/* Прокрутку всередині шторки браузер не передає сторінці під нею. */
.nb-search__body { overscroll-behavior: contain; }

/* Менше руху — не нуль: лишаємо проявлення, прибираємо зсуви. */
@media (prefers-reduced-motion: reduce) {
  .nb-search__panel,
  .nb-search.is-in .nb-search__panel { transform: none; }
}

/* ===== «Потягни вниз угорі — відкриється пошук» (Val 23.09) =====
   Лупа під шапкою: проявляється і злегка опускається за пальцем. Рухається лише transform і
   opacity; поки палець на екрані — без переходів (іде точно за пальцем), після — згасає
   токеном закриття. Жирніша обводка, коли поріг пройдено: «відпусти — відкриється». */
.nb-search-pull {
  position: fixed;
  left: 50%;
  z-index: 1990;                                   /* під шторкою (2000), над сторінкою */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: 10px;
  border: var(--nb-border, 1px) solid var(--nb-gray-300, #D9D9D9);
  border-radius: 50%;
  background: var(--nb-paper, #FFFFFF);
  color: var(--nb-ink, #000000);
  opacity: 0;
  transform: translate3d(-50%, 0, 0) scale(0.8);
  pointer-events: none;
}
.nb-search-pull.is-ready { border-color: var(--nb-ink, #000000); }
.nb-search-pull.is-settling {
  transition:
    opacity var(--nb-motion-collapse, 220ms cubic-bezier(0.23, 1, 0.32, 1)),
    transform var(--nb-motion-collapse, 220ms cubic-bezier(0.23, 1, 0.32, 1));
}
/* Менше руху: лупа лише проявляється, без зсуву й масштабу — вирішує JS (reduceMotion). */

/* ===== Біла шапка — РАНІШЕ за шторку (Val 23.09) =====
   «Хедер должен быстрее появляться. Я имею в виду белый хедер, быстрее появляться, чем поиск».
   Замір до правки (головна, прозора шапка): шапка біліла переходом теми 240ms ease, а панель
   пошуку проявлялась швидше — на 80 мс панель 0.78, шапка лише 0.6. Тепер:
     • шапку білить клас nb-search-lead, і ставиться він ПЕРШИМ — на відкритті і ще на початку
       протяжки вгорі сторінки, тобто до того, як людина відпустила палець;
     • шапка біліє за 120ms сильним ease-out, а панель і затемнення стартують із затримкою 60ms —
       на момент, коли панель лише починає проявлятись, шапка вже майже біла;
     • на закритті навпаки: панель іде першою, шапка лишається білою, доки панель не зникла
       (клас знімає finishClose), і лише потім повертається до прозорої своїм переходом теми.
   Крива — та сама, що всередині --nb-motion-collapse (окремого токена кривої в системі немає).
   ⚠ transform теми не чіпаємо — перелічуємо його з тим самим токеном, інакше перебили б його перехід. */
html.nb-search-lead .header {
  transition:
    color 120ms cubic-bezier(0.23, 1, 0.32, 1),
    background-color 120ms cubic-bezier(0.23, 1, 0.32, 1),
    transform var(--nb-motion-slow, 500ms cubic-bezier(0.4, 0, 0.2, 1));
}
.nb-search.is-in .nb-search__panel,
.nb-search.is-in .nb-search__overlay { transition-delay: 60ms; }