/* Шторка пошуку — тимчасова пара файлів (див. шапку 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 17.09): 4px, без стрілок і підкладки.
     scrollbar-width для Firefox, ::-webkit-* для Chrome і Safari — потрібні обидва записи. */
  scrollbar-width: thin;
  scrollbar-color: var(--nb-gray-400, #B2B2B2) transparent;
  -webkit-overflow-scrolling: touch;
  padding: var(--nb-space-4, 20px) var(--nb-gutter, 15px) var(--nb-space-4, 20px);
}

.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;
}

/* Десктоп: та сама шторка, але правою панеллю — як решта панелей системи. */
@media (min-width: 993px) {
  .nb-search__panel {
    left: auto;
    width: var(--nb-drawer-w, 540px);
    max-width: 100%;
  }
  /* Три плитки в ряд на десктопі — як у каталозі (Val 17.09). */
  .nb-search__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nb-search__head { padding: var(--nb-space-5, 25px) var(--nb-space-6, 30px) 0; }
  .nb-search__body { padding: var(--nb-space-5, 25px) var(--nb-space-6, 30px); }
  .nb-search__foot { padding: var(--nb-space-4, 20px) var(--nb-space-6, 30px) var(--nb-space-6, 30px); }
  .nb-search__grid { gap: var(--nb-space-4, 20px); }
}

/* Поле пошуку на сторінці видачі: під заголовком, над фільтрами.
   Ширина і поля — від контейнера каталогу, тому власних відступів по боках не даємо. */
.nb-search-bar { margin: var(--nb-space-4, 20px) 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; }

/* ⚠ Відступ ЗАДАНО ПОЛЕМ ВСЕРЕДИНІ (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 {
  background: var(--nb-paper, #FFFFFF);
  backdrop-filter: none;
}

/* Розвилка на порожній видачі: розділ і підказки під полем — те саме, що у шторці. */
/* Повітря між лічильником і розвилкою: 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 17.09), тому правило тут глобальне, а не
   лише для панелі пошуку. Постійне його місце — src/base/reset.css, воно там уже записане
   разом із токеном --nb-scrollbar-w і названим правилом у DESIGN.md. Тимчасово дублюється
   сюди, бо спільний бандл теми збирає сусідня сесія: залити туди свою збірку означало б
   стерти чужу роботу, а цей файл підключений на кожній сторінці. При злитті гілок — прибрати.
   Firefox читає scrollbar-*, Chrome і Safari — ::-webkit-scrollbar-*; потрібні обидва записи.
   Горизонтальні стрічки ховають смугу своїм правилом scrollbar-width: none — воно частніше. */
* { scrollbar-width: thin; scrollbar-color: var(--nb-gray-400, #B2B2B2) transparent; }
::-webkit-scrollbar { width: var(--nb-scrollbar-w, 4px); height: var(--nb-scrollbar-w, 4px); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--nb-gray-400, #B2B2B2);
  border-radius: calc(var(--nb-scrollbar-w, 4px) / 2);
}
::-webkit-scrollbar-thumb:hover { background: var(--nb-gray-700, #757575); }

/* ⚠ Лічильник і перший підпис розвилки — теги 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,
html.nb-search-legacy .nb-search-related {
  padding-left: 15px;
  padding-right: 15px;
}
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; }
html.nb-search-open a.bt-2::before,
html.nb-search-open a.bt-2::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  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 { position: relative; }

.nb-search-bar__drop {
  position: absolute;
  top: calc(100% - var(--nb-space-4, 20px));
  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; }

/* Вихід у розділ під плиткою у шторці (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; }