/* ==========================================================================
   Тема «Непосидько»
   --------------------------------------------------------------------------
   Кольори, шрифт, заокруглення й ширина беруться зі змінних, які підставляє
   адмінка (catalog/controller/event/neposidko.php). Правити кольори тут не
   треба — вони в Розширення → Теми → Непосидько.

   Файл навмисно доповнює Bootstrap, а не замінює його: сторінки, шаблони
   яких тема ще не переписала (кошик, оформлення, кабінет), лишаються
   робочими й отримують хоча б спільні кольори та шрифт.
   ========================================================================== */

:root {
  --np-primary: #1B4F9C;
  --np-primary-dark: #153D79;
  --np-primary-soft: #EAF0F9;
  --np-accent: #ED8B00;
  --np-accent-dark: #C77400;
  --np-sale: #E8551E;
  --np-radius: 12px;
  --np-radius-sm: 7px;
  --np-container: 1440px;
  --np-font: Manrope, 'Segoe UI', system-ui, sans-serif;

  --np-ink: #1A1D23;
  --np-muted: #6B7484;
  --np-faint: #98A1B0;
  --np-line: #E6EAF0;
  --np-bg: #FBFBFC;
  --np-card: #FFFFFF;
}

/* ── «липкий» підвал ───────────────────────────────────────────────────
   Поки в каталозі мало товарів, сторінка коротша за екран, і нижче body
   просвічує біле тло html — та сама велика біла смуга під підвалом.

   Тому body робимо колонкою на всю висоту вікна, а підвалу даємо
   margin-top: auto — він з'їдає весь вільний простір і притискає підвал
   до низу. Коли сторінка виростає й місця не лишається, auto стає нулем
   і підвал поводиться звичайно.

   Відступ перед підвалом на довгих сторінках дає не margin (його з'їв
   би auto), а padding знизу самого вмісту — див. .np-home і #content.  */

/* Атрибут hidden має ховати елемент завжди.
   Браузер робить це правилом display: none зі своїх стилів, а воно
   найслабше — будь-яке авторське display його перебиває. Саме так
   затемнення під панеллю фільтрів опинилось поверх сторінки й не
   давало ні в що клацнути: медіазапит ставив йому display: block,
   і hidden переставав діяти. Тому вага тут навмисна. */
[hidden] { display: none !important; }

body.np {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--np-font);
  background: var(--np-bg);
  color: var(--np-ink);
  font-size: 15px;
  line-height: 1.55;
}

/* Блоки в колонці не стискаються: інакше на довгій сторінці flexbox
   почав би віднімати в них висоту, щоб укластися в 100vh. */
body.np > * { flex-shrink: 0; }

body.np > .np-footer { margin-top: auto; }

/* Головна сама розтягується на вільний простір, тож підвалу вже нічого
   не лишається — він просто йде одразу за нею. А всередині головної
   вільне місце йде вище смуги переваг, і та притискається до низу,
   до підвала. Інакше смуга зависала посеред сторінки, а між нею й
   підвалом лишалась порожнеча.

   На решті сторінок .np-home немає — там донизу підвал притискає
   власний margin-top: auto вище.                                       */
body.np > .np-home {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* width: 100% тут обов'язковий, і ось чому.

   У .np-wrap задано margin: 0 auto. У звичайному блоці це просто центрує.
   Але в flex-колонці ці авто-відступи стають поперечними, а за
   специфікацією розтягування (align-items: stretch) не застосовується,
   якщо хоч один поперечний відступ дорівнює auto. Блок тоді стискається
   під власний вміст — смуга переваг ставала вужчою за решту сторінки.

   Явна ширина повертає її на місце, а max-width і далі обмежує до
   ширини контейнера, заданої в налаштуваннях теми.                     */
body.np > .np-home > .np-wrap { width: 100%; }

.np-home > .np-home__bottom { margin-top: auto; }

/* Те саме стосується сторінок, шаблони яких тема не переписувала: там
   прямим нащадком body є .container від Bootstrap, а в нього теж
   margin: 0 auto. Тобто без цього рядка вужчою ставала не лише головна,
   а й категорії, товар, кошик і кабінет.

   Але сама лише ширина 100% робила такі сторінки на весь екран: у
   Bootstrap ширину контейнера задають медіазапити (750, 970, 1170px), і
   явна ширина їх перебивала. Тому тут повний набір — контейнер має
   поводитись як .np-wrap, інакше на широкому моніторі текст статті
   тягнеться від краю до краю.

   Поля 24px, а не 15px як у Bootstrap: рядок усередині зсунутий на -15px,
   тож вміст стовпців стає рівно там само, де вміст .np-wrap.           */
body.np > .container,
body.np > .container-fluid {
  width: 100%;
  max-width: var(--np-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ── про :where() у базових правилах ────────────────────────────────────
   Записане звичайно, `body.np a` важить (0,1,2) і перебиває будь-який
   селектор з одного класу: .np-footer__phone (0,1,0), .np-menu__item > a
   (0,1,1). Через це посилання в підвалі синіли на темному тлі, а меню
   ігнорувало свій колір.

   :where() не додає ваги, тож правило нижче важить (0,0,1) — рівно
   стільки, скільки й має важити типове значення. Тепер будь-який клас
   компонента його перекриває, як і задумано.                            */

:where(body.np) a { color: var(--np-primary); text-decoration: none; }
:where(body.np) a:hover, :where(body.np) a:focus { color: var(--np-primary-dark); text-decoration: none; }

/* ── рамка фокуса ──────────────────────────────────────────────────────
   Bootstrap малює навколо будь-якого натиснутого посилання чорну рамку:
     a:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color }
   При кліку мишею вона тільки заважає — видно й так, куди натиснув.

   Але просто вимкнути outline не можна: по ньому орієнтуються ті, хто
   ходить сайтом з клавіатури, і без нього незрозуміло, де ти зараз.
   Тому :focus-visible — браузер сам відрізняє клік мишею від Tab
   і показує рамку лише в другому випадку.                                */

body.np a:focus,
body.np button:focus,
body.np .btn:focus,
body.np .np-iconbtn:focus,
body.np .np-cart__button:focus,
body.np .np-search__button:focus,
body.np .dropdown-toggle:focus {
  outline: none;
  box-shadow: none;
}

body.np a:focus-visible,
body.np button:focus-visible,
body.np .btn:focus-visible,
body.np input:focus-visible,
body.np select:focus-visible,
body.np textarea:focus-visible {
  outline: 2px solid var(--np-primary);
  outline-offset: 2px;
  border-radius: var(--np-radius-sm);
}

/* сірий прямокутник, який Android малює по тапу */
body.np a,
body.np button { -webkit-tap-highlight-color: transparent; }

:where(body.np) h1,
:where(body.np) h2,
:where(body.np) h3,
:where(body.np) h4,
:where(body.np) h5 {
  font-family: var(--np-font);
  color: #12233F;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* .np-wrap відповідає лише за ширину й бічні поля. Вертикальні відступи
   тут не задаються навіть нулем: цей самий елемент часто несе ще один
   клас зі своїм padding — шапка, підвал, верхня смуга. Скорочений запис
   padding обнуляв би їм верх і низ, причому мовчки й лише на тій ширині,
   де спрацював медіазапис. Саме так зникав відступ під пошуком на
   телефоні: правило для 480px стояло нижче й затирало відступ шапки. */
.np-wrap {
  max-width: var(--np-container);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ── верхня смуга ─────────────────────────────────────────────────────── */

.np-topbar {
  background: #F1F3F7;
  border-bottom: 1px solid var(--np-line);
  font-size: 13px;
  color: var(--np-muted);
}

.np-topbar .np-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
}

.np-topbar__left { display: flex; align-items: center; gap: 24px; }
.np-topbar__sep { color: #C6CCD6; }

.np-topbar__right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.np-topbar__link { color: var(--np-muted); font-size: 13px; }

/* селектори мови та валюти приходять зі стандартних шаблонів */
.np-topbar__right form { margin: 0; }
.np-topbar__right .btn-link,
.np-topbar__right .btn-group > .btn {
  padding: 4px 8px;
  color: var(--np-muted);
  font-size: 13px;
  text-decoration: none;
  border: 0;
  background: none;
  box-shadow: none;
}

/* ── шапка ────────────────────────────────────────────────────────────── */

.np-header {
  background: var(--np-card);
  border-bottom: 1px solid var(--np-line);
}

.np-header__inner {
  display: flex;
  align-items: center;
  gap: 36px;
  min-height: 92px;
}

/* Розмір як на макеті. object-fit: contain означає, що логотип іншої
   пропорції впишеться в ці рамки без спотворення, а не розтягнеться. */
.np-header__logo img {
  display: block;
  width: 208px;
  height: 54px;
  object-fit: contain;
  object-position: left center;
}
.np-header__name { font-size: 22px; font-weight: 800; color: var(--np-primary); }

.np-header__search { flex-grow: 1; min-width: 0; }

.np-header__actions {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-shrink: 0;
}

/* Вертикальна риска між телефоном і значками */
.np-header__sep {
  width: 1px;
  height: 34px;
  background: var(--np-line);
  flex-shrink: 0;
}

/* Соцмережі в шапці.

   Стоять на місці, де раніше був телефон: у крамниці дитячого взуття
   пишуть, а не дзвонять. Значки приглушені, щоб не сперечатися з
   кошиком і закладками, — але наводяться в колір теми.            */

.np-social { display: flex; align-items: center; gap: 4px; }

.np-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--np-faint);
  transition: color .15s, background-color .15s;
}
.np-social__link:hover,
.np-social__link:focus-visible {
  background: var(--np-primary-soft);
  color: var(--np-primary);
}

/* У підвалі значки стоять на темному тлі, тож світлішають, а не
   темнішають. */
.np-footer__social { margin-top: 14px; margin-left: -8px; }
.np-footer__social .np-social__link { color: rgba(255, 255, 255, .62); }
.np-footer__social .np-social__link:hover,
.np-footer__social .np-social__link:focus-visible {
  background: rgba(255, 255, 255, .12);
  color: #FFFFFF;
}

.np-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--np-radius-sm);
  color: #3A424F;
}
.np-iconbtn:hover { background: var(--np-primary-soft); color: var(--np-primary); }

/* ── пошук ────────────────────────────────────────────────────────────── */

.np-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  border: 1.5px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: #FAFBFC;
  overflow: hidden;
}

/* Підсвічується вся рамка пошуку, а не поле всередині неї.

   Загальне правило фокуса нижче малює обводку навколо будь-якого input.
   Для пошуку це давало лінію всередині лінії: поле лежить усередині
   власної рамки, і виходило дві рамки одна в одній. Тому полю обводку
   вимикаємо, а роль показника фокуса бере контейнер — він міняє колір
   рамки й тло. Для тих, хто ходить сайтом з клавіатури, сигнал
   лишається однаково помітним.                                          */
.np-search:focus-within {
  border-color: var(--np-primary);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px var(--np-primary-soft);
}

body.np .np-search__input:focus,
body.np .np-search__input:focus-visible { outline: none; }

/* Кнопка-значок теж усередині рамки, тож обводка навколо неї виглядала б
   так само зайво. З клавіатури вона позначається заливкою — видно, що
   фокус саме на кнопці, а не в полі. */
body.np .np-search__button:focus-visible {
  outline: none;
  background: var(--np-primary-soft);
  color: var(--np-primary);
}

/* Значок ліворуч усередині рамки — і водночас кнопка пошуку */
.np-search__button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--np-faint);
  cursor: pointer;
}
.np-search__button:hover { color: var(--np-primary); }
.np-search:focus-within .np-search__button { color: var(--np-primary); }

.np-search__input {
  flex-grow: 1;
  min-width: 0;
  height: 100%;
  padding: 0 16px 0 0;
  border: 0;
  background: none;
  font-size: 15px;
  color: var(--np-ink);
  outline: none;
}
.np-search__input::placeholder { color: var(--np-faint); }

/* ── кошик у шапці ────────────────────────────────────────────────────── */

/* Значок із лічильником, як на макеті */
.np-cart__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: var(--np-radius-sm);
  background: none;
  color: #3A424F;
  cursor: pointer;
}
.np-cart__button:hover,
.np-cart__button:focus,
.np-cart.open .np-cart__button { background: var(--np-primary-soft); color: var(--np-primary); }

.np-cart__icon { display: flex; }

.np-cart__badge {
  position: absolute;
  top: 1px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--np-accent);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

/* Текст лишається в розмітці для зчитувачів екрана й для common.js,
   але не показується. clip-path замість display: none — прихований
   так елемент і далі озвучується. */
.np-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.np-cart__drop {
  min-width: 420px;
  padding: 14px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  box-shadow: 0 12px 32px rgba(18, 35, 63, 0.12);
}

.np-cart__empty { margin: 18px 0; text-align: center; color: var(--np-muted); }

/* ── вміст випадного кошика ──────────────────────────────────────────────
   Товари списком, а не таблицею: таблиця на п'ять стовпців у панелі
   завширшки 420px стискала назву до двох слів на рядок, а картинку — до
   розміру, у якому взуття не розгледіти.

   Перелік гортається, підсумок і кнопки лишаються на місці: інакше при
   п'яти парах у кошику кнопка «Оформити» їхала б за нижній край екрана. */

.np-cdrop { display: flex; flex-direction: column; }

.np-cdrop__list {
  max-height: min(52vh, 380px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: -4px -4px 0;
  padding: 4px;
}

.np-cdrop__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 0;
  border-top: 1px solid var(--np-line);
}
.np-cdrop__list > .np-cdrop__item:first-child { border-top: 0; padding-top: 2px; }

.np-cdrop__media { flex-shrink: 0; }
.np-cdrop__media img {
  display: block;
  width: 58px;
  height: 58px;
  border-radius: var(--np-radius-sm);
  object-fit: cover;
  background: #F1F3F7;
}

.np-cdrop__info { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.np-cdrop__name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--np-ink);
}
.np-cdrop__name:hover { color: var(--np-primary); }

.np-cdrop__opts { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12.5px; color: var(--np-muted); }
.np-cdrop__opts b { color: var(--np-ink); font-weight: 700; }

.np-cdrop__line { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; font-size: 14px; }
.np-cdrop__line b { font-weight: 800; font-variant-numeric: tabular-nums; }
.np-cdrop__qty { font-size: 13px; color: var(--np-muted); font-variant-numeric: tabular-nums; }

.np-cdrop__drop {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--np-radius-sm);
  background: none;
  color: var(--np-faint);
  cursor: pointer;
}
.np-cdrop__drop:hover { background: #FDECEA; color: var(--np-sale); }

.np-cdrop__foot { flex-shrink: 0; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--np-line); }

.np-cdrop__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14.5px;
  color: var(--np-muted);
}
.np-cdrop__total b { font-size: 19px; font-weight: 800; color: var(--np-ink); font-variant-numeric: tabular-nums; }

.np-cdrop__actions { display: flex; gap: 8px; }

/* Обидві кнопки — в один рядок і в одну лінію тексту. Кожна тягла
   підпис на два рядки, і низ панелі виростав удвічі. Ширшу дію —
   оформлення — розтягуємо на решту місця, «До кошика» лишається
   завширшки зі свій підпис. */
.np-cdrop__actions .np-btn {
  justify-content: center;
  padding: 0 16px;
  white-space: nowrap;
}
.np-cdrop__actions .np-btn--ghost { flex: 0 0 auto; }
.np-cdrop__actions .np-btn--accent { flex: 1 1 auto; }

/* ── кнопки ───────────────────────────────────────────────────────────── */

.np-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--np-radius-sm);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.np-btn--accent { background: var(--np-accent); color: #FFFFFF; }
.np-btn--accent:hover, .np-btn--accent:focus { background: var(--np-accent-dark); color: #FFFFFF; }

.np-btn--ghost { background: var(--np-primary-soft); color: var(--np-primary); }
.np-btn--ghost:hover, .np-btn--ghost:focus { background: #DCE6F5; color: var(--np-primary-dark); }

/* ── меню категорій ───────────────────────────────────────────────────── */

.np-menu {
  background: var(--np-card);
  border-bottom: 1px solid var(--np-line);
}

.np-menu__toggle {
  display: none;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--np-ink);
  cursor: pointer;
}

.np-menu__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 54px;
}

.np-menu__item { position: relative; }

.np-menu__item > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 15px 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--np-ink);
  border-bottom: 2px solid transparent;
}

.np-menu__item > a:hover,
.np-menu__item:hover > a { color: var(--np-primary); border-bottom-color: var(--np-accent); }

.np-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: -16px;
  z-index: 40;
  min-width: 240px;
  padding: 12px 0 6px;
  background: var(--np-card);
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  box-shadow: 0 14px 34px rgba(18, 35, 63, 0.13);
}

.np-menu__item--has-children:hover .np-submenu { display: block; }

.np-submenu ul { margin: 0; padding: 0; list-style: none; }
.np-submenu li a {
  display: block;
  padding: 8px 20px;
  font-size: 14px;
  color: var(--np-ink);
}
.np-submenu li a:hover { background: var(--np-primary-soft); color: var(--np-primary); }

.np-submenu__all {
  display: block;
  margin-top: 6px;
  padding: 11px 20px 6px;
  border-top: 1px solid var(--np-line);
  font-size: 13px;
  font-weight: 700;
  color: var(--np-primary);
}

/* ── головна ──────────────────────────────────────────────────────────── */

.np-home { padding: 28px 0 56px; }
.np-home__cols { display: flex; gap: 28px; align-items: flex-start; }
.np-home__main { flex-grow: 1; min-width: 0; }

/* ── головний банер ───────────────────────────────────────────────────── */

.np-hero {
  display: flex;
  align-items: stretch;
  margin: 4px 0 36px;
  border-radius: var(--np-radius);
  overflow: hidden;
}

/* Текстова частина тягнеться, картинка тримає свою частку. Через
   flex-basis у відсотках блок ділиться плавно за будь-якої ширини,
   без прив'язки до конкретних пікселів. */
.np-hero__body {
  flex: 1 1 55%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 52px 48px;
}

.np-hero__badge {
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: 100px;
  background: #FFFFFF;
  color: var(--np-primary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.np-hero__title {
  margin: 0;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 800;
  color: #12233F;
  text-wrap: balance;
}

.np-hero__text {
  margin: 0;
  max-width: 460px;
  font-size: 16px;
  line-height: 1.55;
  color: #4A5464;
}

.np-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

.np-btn--light { background: #FFFFFF; color: var(--np-primary); }
.np-btn--light:hover,
.np-btn--light:focus { background: #F1F5FB; color: var(--np-primary-dark); }

.np-hero__media {
  flex: 0 1 45%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.np-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Картинка ліворуч — перемикається в налаштуваннях модуля */
.np-hero--reverse { flex-direction: row-reverse; }

/* ── плитки категорій ─────────────────────────────────────────────────── */

.np-cats { margin: 8px 0 40px; }

.np-cats__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.np-cats__title { margin: 0; font-size: 24px; font-weight: 700; }
.np-cats__all { font-size: 14px; font-weight: 600; white-space: nowrap; }

/* Кількість колонок задає модуль через змінну — тож її можна змінити
   в адмінці, не чіпаючи стилі.

   Не grid, а flex із flex-grow — саме через останній ряд. У сітці
   неповний ряд лишає порожнє місце праворуч: вісім категорій по шість
   у ряд дають 6 + 2, і другий ряд обривається на третині ширини. Тут
   плитки останнього ряду розтягуються й доводять його до краю, скільки
   б категорій не було. */
.np-cats__grid {
  --np-cats-gap: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--np-cats-gap);
}

.np-cats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 calc((100% - (var(--np-cats-cols, 6) - 1) * var(--np-cats-gap)) / var(--np-cats-cols, 6));
  padding: 22px 10px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.np-cats__item:hover,
.np-cats__item:focus {
  border-color: var(--np-primary);
  box-shadow: 0 8px 20px rgba(18, 35, 63, 0.08);
}

.np-cats__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  color: var(--np-primary);
}
.np-cats__media img { max-height: 46px; width: auto; object-fit: contain; }
.np-cats__media svg { width: 40px; height: 40px; }

.np-cats__name {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--np-ink);
  overflow-wrap: anywhere;
}

.np-cats__count { font-size: 12px; color: var(--np-faint); }

/* ── стрічка товарів ──────────────────────────────────────────────────── */

.np-prods { margin: 0 0 40px; }

.np-prods__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.np-prods__title { margin: 0; font-size: 24px; font-weight: 700; }
.np-prods__all { font-size: 14px; font-weight: 600; white-space: nowrap; }

.np-prods__grid {
  display: grid;
  grid-template-columns: repeat(var(--np-prods-cols, 4), minmax(0, 1fr));
  gap: 20px;
}

.np-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
  overflow: hidden;
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
}
.np-card:hover {
  border-color: color-mix(in oklab, var(--np-primary) 35%, var(--np-line));
  box-shadow: 0 10px 26px rgba(18, 35, 63, 0.09);
}

.np-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: #F3F6FA;
  overflow: hidden;
}
.np-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.np-card__flag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: var(--np-radius-sm);
  background: var(--np-accent);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.np-card__flag--sale { background: var(--np-sale); }

.np-card__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-grow: 1;
  padding: 15px 15px 16px;
}

.np-card__cat {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--np-faint);
}

.np-card__name {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--np-ink);
  overflow-wrap: anywhere;
}
.np-card__name:hover { color: var(--np-primary); }

.np-card__sizes { font-size: 12.5px; color: var(--np-muted); }

/* Ціна й кнопка притиснуті донизу, тож у сусідніх картках вони на одній
   лінії навіть коли назви різної довжини. */
.np-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}

/* Звичайна ціна — класичний темний, як основний текст. Помаранчевий
   робив із неї ще одну яскраву пляму поруч із кнопкою купівлі, і на
   картці не лишалось нічого спокійного. Кольором виділяється лише ціна
   зі знижкою — тоді він справді щось означає. */
/* Дві ціни завжди в один рядок: нова, за нею стара. Перенесення робило
   з них стовпчик, а стовпчик читається як два окремі числа, а не як
   «було — стало». Числа короткі, тож місця вистачає; кнопка купівлі
   поруч має власний flex-shrink: 0 і не стискається. */
.np-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 0;
  gap: 8px;
  font-size: 19px;
  font-weight: 800;
  color: var(--np-ink);
  font-variant-numeric: tabular-nums;
}
.np-card__price-new { color: var(--np-sale); }
.np-card__price-old {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--np-muted);
  text-decoration: line-through;
}

.np-card__cart {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--np-radius-sm);
  background: var(--np-primary-soft);
  color: var(--np-primary);
  cursor: pointer;
}
.np-card__cart:hover { background: var(--np-primary); color: #FFFFFF; }

/* ── смуга переваг ────────────────────────────────────────────────────── */

.np-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 8px;
  padding: 24px 26px;
  border-radius: var(--np-radius);
  background: var(--np-primary-soft);
}

.np-trust__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;   /* без цього довгий текст розпирає колонку замість переносу */
}

.np-trust__icon { display: flex; flex-shrink: 0; color: var(--np-primary); }

.np-trust__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}

.np-trust__title {
  font-size: 14px;
  font-weight: 700;
  color: #12233F;
  text-wrap: balance;   /* «Працюємо з 2012 року» не лишає одне слово на рядку */
}

.np-trust__text { font-size: 12.5px; color: var(--np-muted); }

/* ── підвал ───────────────────────────────────────────────────────────── */

/* Підвал перекриває кнопку фільтрів, а не навпаки: догортавши до низу,
   людина вже вийшла зі списку товарів, і кругла кнопка поверх контактів
   тільки заважає. Число між кнопкою (1030) і затемненням (1050): відкрита
   панель фільтрів має лишатися поверх усього, зокрема й підвалу.

   z-index сам по собі діє лише на розташований елемент, тож потрібен ще
   й position — інакше правило нічого не змінить. */
.np-footer {
  position: relative;
  z-index: 1040;
  margin-top: 56px;
  padding: 44px 0 24px;
  background: var(--np-footer-bg, #12233F);
  color: #C4CEDD;
}

.np-footer__cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.1fr 1fr 1.1fr;
  gap: 36px;
}

/* Логотип і текст про магазин стоять поруч, поки вистачає місця, і самі
   переходять у стовпчик, коли не вистачає. Робить це не медіазапит, а
   flex-wrap: текстові задано бажану ширину 300px, і щойно логотип разом
   із ним перестає влазити в рядок, текст переноситься під нього.

   Тому у вузькій колонці на десктопі вони один під одним, а коли блок
   розтягується на всю ширину (від 1200px і нижче) — стають у рядок, і
   праворуч від логотипа не лишається порожнечі.                        */

.np-footer__brand {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;   /* центр тексту навпроти центру логотипа */
  gap: 14px 24px;
}

.np-footer__logo {
  flex: 0 0 auto;
  display: inline-block;
  padding: 7px 12px;
  border-radius: var(--np-radius-sm);
  background: #FFFFFF;
}
.np-footer__logo img { display: block; width: 100%; max-width: 176px; height: auto; }

.np-footer__about {
  flex: 1 1 300px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #93A2B8;
  max-width: 520px;
}

.np-footer__col { min-width: 0; }

.np-footer__title {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
}

/* На десктопі заголовок-кнопка має виглядати звичайним текстом.
   Кнопкою він стає лише на телефоні — див. медіазапит нижче. */
.np-footer__toggle {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: default;
}
.np-footer__chev { display: none; }

.np-footer__links { margin: 0; padding: 0; list-style: none; }
.np-footer__links li { margin-bottom: 10px; }

.np-footer__col a {
  font-size: 13.5px;
  color: #C4CEDD;
}
.np-footer__col a:hover,
.np-footer__col a:focus { color: #FFFFFF; }

.np-footer__contacts { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

.np-footer__phone {
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;
  white-space: nowrap;
}
.np-footer__phone:hover,
.np-footer__phone:focus { color: var(--np-accent); }

.np-footer__email {
  font-size: 13.5px;
  color: #C4CEDD;
  word-break: break-all;
}
.np-footer__email:hover,
.np-footer__email:focus { color: #FFFFFF; }

.np-footer__hours { font-size: 13.5px; color: #93A2B8; }

.np-footer__bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #24384F;
  font-size: 12.5px;
  color: #7C8CA3;
}
.np-footer__bottom a { color: #93A2B8; }
.np-footer__bottom a:hover { color: #C4CEDD; }

/* ==========================================================================
   Сторінки, шаблони яких тема ще не переписала.
   Стандартна розмітка OpenCart, підфарбована під тему, щоб каталог і товар
   виглядали своїми вже зараз.
   ========================================================================== */

body.np #content { padding-bottom: 48px; }

/* На головній відступ перед смугою переваг уже дає нижній відступ
   останнього блоку (стрічки товарів чи плиток). Додатковий padding тут
   складався з ним і з власним відступом смуги — разом виходило 128px
   порожнечі. Тому на головній його прибираємо, на решті сторінок він
   потрібен: там перед підвалом більше нічого немає.                    */
body.np .np-home #content { padding-bottom: 0; }

body.np #content > h1,
body.np #content > h2 { margin: 8px 0 20px; font-size: 28px; }

body.np .breadcrumb {
  padding: 0;
  margin: 22px 0 18px;
  background: none;
  font-size: 13px;
}
body.np .breadcrumb > li + li:before { content: '/'; color: var(--np-faint); }
body.np .breadcrumb a { color: var(--np-muted); }

/* картка товару зі стандартної розмітки */
body.np .product-thumb {
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
  overflow: hidden;
  margin-bottom: 22px;
  transition: box-shadow 0.16s ease;
}
body.np .product-thumb:hover { box-shadow: 0 10px 26px rgba(18, 35, 63, 0.09); }

body.np .product-thumb .image { background: #F3F6FA; }
body.np .product-thumb .image img { margin: 0 auto; }

body.np .product-thumb .caption { padding: 16px 16px 4px; min-height: 0; }
body.np .product-thumb h4 { margin: 0 0 8px; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
body.np .product-thumb h4 a { color: var(--np-ink); }
body.np .product-thumb .caption p { font-size: 12.5px; color: var(--np-muted); }

body.np .product-thumb .price {
  font-size: 19px;
  font-weight: 800;
  color: var(--np-ink);
}
body.np .product-thumb .price-new { color: var(--np-sale); }
body.np .product-thumb .price-old {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--np-muted);
  text-decoration: line-through;
}
body.np .product-thumb .price-tax { display: block; font-size: 11.5px; font-weight: 500; color: var(--np-faint); }

body.np .product-thumb .button-group {
  display: flex;
  border-top: 1px solid var(--np-line);
  background: none;
}
body.np .product-thumb .button-group button {
  flex-grow: 1;
  height: 46px;
  border: 0;
  border-left: 1px solid var(--np-line);
  background: none;
  color: var(--np-muted);
  font-size: 13.5px;
  font-weight: 600;
}
body.np .product-thumb .button-group button:first-child {
  border-left: 0;
  flex-grow: 3;
  color: var(--np-primary);
}
body.np .product-thumb .button-group button:hover { background: var(--np-primary-soft); color: var(--np-primary); }

/* стандартні кнопки Bootstrap у кольорах теми */
body.np .btn-primary {
  border: 0;
  border-radius: var(--np-radius-sm);
  background: var(--np-accent);
  padding: 10px 20px;
  font-weight: 700;
}
body.np .btn-primary:hover,
body.np .btn-primary:focus,
body.np .btn-primary:active { background: var(--np-accent-dark); }

body.np .btn-default {
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: #FFFFFF;
  color: var(--np-ink);
  font-weight: 600;
}
body.np .btn-default:hover { background: var(--np-primary-soft); color: var(--np-primary); }

body.np .form-control { border-radius: var(--np-radius-sm); border-color: var(--np-line); box-shadow: none; }
body.np .form-control:focus { border-color: var(--np-primary); box-shadow: none; }

body.np .panel,
body.np .well {
  border-radius: var(--np-radius);
  border-color: var(--np-line);
  box-shadow: none;
}

body.np .nav-tabs > li.active > a { border-bottom-color: transparent; color: var(--np-primary); font-weight: 700; }

body.np .alert { border-radius: var(--np-radius-sm); }

/* бічні колонки з модулями */
body.np #column-left .list-group-item,
body.np #column-right .list-group-item {
  border-color: var(--np-line);
  font-size: 14px;
}
body.np #column-left .list-group-item.active,
body.np #column-right .list-group-item.active {
  background: var(--np-primary-soft);
  border-color: var(--np-line);
  color: var(--np-primary);
  font-weight: 700;
}

/* ==========================================================================
   Адаптив
   --------------------------------------------------------------------------
   Чотири контрольні ширини:
     1200 — вузький ноутбук: меню тісніше
      991 — планшет: колонки складаються, телефон ховається
      767 — телефон горизонтально: шапка перебудовується, меню під кнопку
      480 — телефон вертикально: найщільніше

   Головне правило: сторінка ніколи не має їхати вбік. Усе, що не влазить
   (таблиці кошика, довгі адреси), або переноситься, або гортається
   всередині свого блока.
   ========================================================================== */

body.np { overflow-x: hidden; }
body.np img { max-width: 100%; height: auto; }

/* довгі слова й адреси не розпирають колонки */
body.np .np-footer__col a,
body.np .np-trust__text,
body.np .product-thumb h4 { overflow-wrap: anywhere; }

/* таблиці гортаються всередині себе, а не тягнуть сторінку */
body.np .table-responsive { -webkit-overflow-scrolling: touch; }

@media (max-width: 1200px) {
  .np-wrap,
  body.np > .container,
  body.np > .container-fluid { padding-left: 20px; padding-right: 20px; }
  .np-hero__body { padding: 44px 36px; }
  .np-hero__title { font-size: 34px; }
  .np-cats__grid { --np-cats-cols: 4; }
  .np-prods__grid { gap: 16px; }
  .np-header__inner { gap: 20px; }
  .np-menu__list { gap: 2px 18px; }
  .np-menu__item > a { font-size: 13.5px; }
  /* П'ять колонок у 1200px уже тісні. Блок із логотипом іде окремим
     рядком на всю ширину, а чотири решти стають рівними колонками. */
  .np-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 28px; }
  .np-footer__brand { grid-column: 1 / -1; }
}

/* ── планшет ─────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .np-hide-md { display: none !important; }

  /* Планшет: картинка під текстом, бо в рядок обом уже затісно */
  .np-hero { flex-direction: column; }
  .np-hero--reverse { flex-direction: column-reverse; }
  .np-hero__body { flex: 0 0 auto; padding: 36px 32px; gap: 16px; }
  .np-hero__title { font-size: 30px; }
  .np-hero__media { flex: 0 0 auto; height: 300px; }

  .np-cats__grid { --np-cats-cols: 3; }
  .np-cats__title { font-size: 21px; }
  .np-prods__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .np-prods__title { font-size: 21px; }

  .np-header__inner { gap: 16px; min-height: 78px; }
  .np-header__logo img { width: 176px; height: 46px; }
  .np-header__actions { gap: 12px; }

  .np-menu__list { gap: 0 16px; }
  .np-menu__item > a { padding: 13px 0; font-size: 13px; }

  .np-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 22px; }

  /* Планшет: логотип на всю ширину, далі дві колонки по два ряди */
  .np-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
}

/* ── телефон ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .np-hide-sm { display: none !important; }

  .np-hero { margin-bottom: 26px; }
  .np-hero__body { padding: 28px 20px; gap: 14px; }
  .np-hero__title { font-size: 25px; }
  .np-hero__text { font-size: 15px; }
  .np-hero__media { height: 220px; }
  .np-hero__actions .np-btn { flex: 1 1 auto; justify-content: center; }
  .np-wrap,
  body.np > .container,
  body.np > .container-fluid { padding-left: 16px; padding-right: 16px; }

  .np-topbar { font-size: 12px; }
  .np-topbar .np-wrap { min-height: 34px; }

  /* логотип і дії в один рядок, пошук — окремим рядком під ними */
  .np-header__inner {
    flex-wrap: wrap;
    gap: 12px;
    /* Знизу більше, ніж згори: пошук переходить на власний рядок і
       лишається останнім у шапці, тож без цього відступу вміст сторінки
       починався одразу під полем. */
    padding: 12px 0 18px;
    min-height: 0;
  }
  .np-header__logo { flex-grow: 1; }
  .np-header__logo img { width: 152px; height: 40px; }
  .np-header__actions { margin-left: auto; gap: 8px; }
  .np-header__search { order: 3; flex-basis: 100%; }

  .np-search { height: 44px; }
  .np-search__icon { margin: 0 10px 0 13px; }
  .np-search__input { font-size: 16px; } /* менше 16px — iOS сам наближає сторінку */
  .np-search__button { width: 46px; }

  .np-cart__button { height: 44px; padding: 0 14px; }
  .np-cart__total { display: none; }
  .np-cart__drop { min-width: 0; width: calc(100vw - 32px); max-width: 380px; }
  .np-cdrop__media img { width: 48px; height: 48px; }

  /* меню ховається під кнопку */
  .np-menu__toggle { display: flex; }
  .np-menu__list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    padding-bottom: 10px;
  }
  .np-menu__list.in { display: flex; }
  .np-menu__item > a {
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid var(--np-line);
    font-size: 15px;
  }
  .np-menu__item > a:hover,
  .np-menu__item:hover > a { border-bottom-color: var(--np-line); }
  /* Підменю розкривається першим натисканням, другим — веде в категорію.
     Інакше до підкатегорій пальцем не дістатись: наведення на телефоні
     не існує. Стрілка показує, що пункт розкривається. */
  .np-menu__item--has-children > a svg { transition: transform 0.18s ease; }
  .np-menu__item--has-children.is-open > a svg { transform: rotate(180deg); }

  .np-submenu {
    position: static;
    display: none;
    min-width: 0;
    padding: 2px 0 8px 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  .np-menu__item--has-children.is-open > .np-submenu { display: block; }
  .np-submenu li a { padding: 11px 0; }
  .np-submenu li a:hover { background: none; }
  .np-submenu__all { display: none; }

  .np-home { padding: 18px 0 36px; }
  .np-home__cols { flex-direction: column; gap: 20px; }

  /* Дві колонки лишаються й на телефоні: при 767px на пункт припадає
     близько 340px — цього вистачає з запасом. Чотири рядки поспіль
     виглядали б довгим списком замість компактної смуги. */
  .np-trust { gap: 16px 14px; padding: 20px; }
  .np-trust__icon svg { width: 24px; height: 24px; }

  /* ── підвал: акордеон ──────────────────────────────────────────────
     Три колонки посилань згортаються. Розгорнутими лишаються логотип
     і контакти: телефон — саме те, заради чого в підвал заходять
     із телефона, ховати його безглуздо.

     Посилання ховаються стилями, а не вилучаються з розмітки, тож
     пошуковик бачить їх усі.                                          */

  .np-footer { margin-top: 36px; padding: 28px 0 18px; }

  .np-footer__cols {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .np-footer__brand { padding-bottom: 22px; }
  .np-footer__about { font-size: 13px; }

  .np-footer__col--fold {
    border-top: 1px solid #24384F;
  }

  .np-footer__col--fold .np-footer__title { margin: 0; }

  .np-footer__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;          /* палець упевнено влучає */
    padding: 4px 0;
    font-size: 15px;
    cursor: pointer;
  }

  .np-footer__chev {
    display: block;
    flex-shrink: 0;
    color: #7C8CA3;
    transition: transform 0.18s ease;
  }
  .np-footer__col--fold.is-open .np-footer__chev { transform: rotate(180deg); }

  .np-footer__links {
    display: none;
    padding: 2px 0 16px;
  }
  .np-footer__col--fold.is-open .np-footer__links { display: block; }

  .np-footer__links li { margin-bottom: 0; }
  .np-footer__links a {
    display: block;
    padding: 11px 0;           /* теж не менше 44px разом із рядком */
    font-size: 14px;
  }

  .np-footer__contacts {
    padding: 20px 0 4px;
    border-top: 1px solid #24384F;
    gap: 12px;
  }
  .np-footer__contacts .np-footer__title { margin: 0 0 2px; }
  .np-footer__phone { font-size: 22px; }
  .np-footer__email { font-size: 14px; }

  .np-footer__bottom { margin-top: 18px; padding-top: 16px; }

  /* картки товару стають зручнішими для пальця */
  body.np .product-thumb { margin-bottom: 16px; }
  body.np .product-thumb .button-group button { height: 48px; }
  body.np #content > h1,
  body.np #content > h2 { font-size: 23px; }
  body.np .breadcrumb { margin: 14px 0 12px; font-size: 12px; }
}

/* ── смуга переваг: перехід на один стовпчик ─────────────────────────────
   Окремий рубіж, не прив'язаний до загальних 480px: дві колонки тримаються
   рівно доти, доки на пункт вистачає ширини. Нижче 570px значок разом із
   текстом уже не влазить у половину рядка, і заголовок ламається.        */
@media (max-width: 570px) {
  .np-prods__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  /* Дві ціни лишаються в одному рядку й на вузькій картці — тому меншають,
     а не переносяться. Інакше стара ціна виїжджала за край і налазила на
     кнопку купівлі. */
  .np-card__price { font-size: 17px; gap: 6px; }
  .np-card__price-old { font-size: 12px; }
  .np-cats__grid { --np-cats-cols: 2; --np-cats-gap: 10px; }
  .np-cats__item { padding: 18px 8px; }

  .np-trust { grid-template-columns: 1fr; gap: 0; }

  /* Роздільники перетворюють чотири блоки, що висять у порожнечі, на
     охайний список. Колір заданий напівпрозорим темно-синім, а не
     окремим значенням: тоді лінія лишиться доречною за будь-якого
     основного кольору, обраного в адмінці. */
  .np-trust__item {
    align-items: flex-start;
    padding: 14px 0;
    border-top: 1px solid rgba(18, 35, 63, 0.10);
  }
  .np-trust__item:first-child { padding-top: 0; border-top: 0; }
  .np-trust__item:last-child { padding-bottom: 0; }

  /* Значок притиснутий до верху рядка, а не до середини блока: інакше
     в пункті на три рядки він поїхав би вниз від свого заголовка. */
  .np-trust__icon { padding-top: 1px; }
}

/* ── вузький телефон ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .np-wrap,
  body.np > .container,
  body.np > .container-fluid { padding-left: 12px; padding-right: 12px; }

  .np-topbar__right { gap: 2px; }
  .np-header__logo img { width: 132px; height: 34px; }
  .np-iconbtn { width: 38px; height: 38px; }

  .np-cart__button { padding: 0 12px; }
  .np-cart__drop { width: calc(100vw - 24px); }

  .np-trust { padding: 16px; }
  .np-footer__phone { font-size: 18px; }

  body.np #content > h1,
  body.np #content > h2 { font-size: 20px; }
}

/* ==========================================================================
   Сторінки каталогу: категорія, пошук, товар
   ========================================================================== */

/* ── хлібні крихти ────────────────────────────────────────────────────── */

.np-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 18px 0 16px;
  list-style: none;
  font-size: 13px;
}
.np-crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--np-faint); }
.np-crumbs a { color: var(--np-muted); }
.np-crumbs li:last-child a { color: var(--np-ink); }

/* ── розкладка з бічною колонкою ──────────────────────────────────────── */

.np-list__layout,
.np-prod__layout--aside {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.np-list__layout--wide { grid-template-columns: minmax(0, 1fr); }

.np-side { min-width: 0; }
.np-side--right { order: 3; }

.np-list__main,
.np-prod__main { min-width: 0; }

.np-list { padding-bottom: 8px; }
.np-list__title { margin: 0 0 18px; font-size: 28px; }

.np-list__intro { display: flex; gap: 20px; margin-bottom: 24px; }
.np-list__cover { width: 180px; border-radius: var(--np-radius); flex-shrink: 0; }
.np-list__text { font-size: 15px; color: var(--np-muted); max-width: 70ch; }

/* ── підкатегорії ─────────────────────────────────────────────────────── */

.np-subcats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.np-subcats__item {
  padding: 9px 16px;
  border: 1px solid var(--np-line);
  border-radius: 100px;
  background: var(--np-card);
  font-size: 14px;
  font-weight: 600;
  color: var(--np-ink);
}
.np-subcats__item:hover { border-color: var(--np-primary); color: var(--np-primary); }

/* ── панель сортування ────────────────────────────────────────────────── */

/* Без рамки й тла: це не блок, а просто рядок над сіткою. Коробка тут
   змагалась за увагу з картками товарів, хоч нічого не містить, крім
   лічильника й сортування. */
.np-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 18px;
  padding: 0;
}
.np-toolbar__count { font-size: 14px; color: var(--np-muted); }
.np-toolbar__controls { display: flex; flex-wrap: wrap; gap: 10px 18px; }

.np-select { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--np-muted); }
.np-select select {
  height: 38px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background-color: var(--np-card);
  font-family: inherit;
  font-size: 14px;
  color: var(--np-ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7484' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}
.np-select select:focus { border-color: var(--np-primary); outline: none; }

/* ── форма пошуку ─────────────────────────────────────────────────────── */

.np-search-form {
  margin-bottom: 22px;
  padding: 20px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
}
.np-search-form__row { display: flex; gap: 10px; margin-bottom: 14px; }
.np-search-form__input {
  flex-grow: 1;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border: 1.5px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: #FAFBFC;
  font-family: inherit;
  font-size: 15px;
  color: var(--np-ink);
}
.np-search-form__input:focus { border-color: var(--np-primary); background: #FFFFFF; outline: none; }
.np-search-form__opts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }

.np-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.np-check input { width: 17px; height: 17px; accent-color: var(--np-primary); cursor: pointer; }

/* ── порожній результат ───────────────────────────────────────────────── */

.np-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 40px 0 24px;
  color: var(--np-muted);
}
.np-empty p { margin: 0; font-size: 16px; }

/* ── сторінки ─────────────────────────────────────────────────────────── */

.np-pager { margin-top: 26px; }
body.np .np-pager .pagination { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
body.np .np-pager .pagination > li > a,
body.np .np-pager .pagination > li > span {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-card);
  color: var(--np-ink);
  font-size: 14px;
  font-weight: 600;
}
body.np .np-pager .pagination > .active > span,
body.np .np-pager .pagination > .active > a {
  background: var(--np-primary);
  border-color: var(--np-primary);
  color: #FFFFFF;
}
body.np .np-pager .pagination > li > a:hover { border-color: var(--np-primary); color: var(--np-primary); }
body.np .np-pager .results { margin-top: 10px; font-size: 13px; color: var(--np-faint); }

/* ── бічна колонка: модулі OpenCart ───────────────────────────────────── */

body.np .np-side .list-group,
body.np .np-side .panel {
  margin-bottom: 20px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
  box-shadow: none;
  overflow: hidden;
}
body.np .np-side .list-group-item {
  padding: 13px 18px;
  border: 0;
  border-top: 1px solid var(--np-line);
  font-size: 14.5px;
  color: var(--np-ink);
  background: none;
}
body.np .np-side .list-group-item:first-child { border-top: 0; }
body.np .np-side .list-group-item:hover { background: var(--np-primary-soft); color: var(--np-primary); }
body.np .np-side .list-group-item.active,
body.np .np-side .list-group-item.active:hover {
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-weight: 700;
}

body.np .np-side .panel-heading {
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--np-line);
  background: none;
}
body.np .np-side .panel-title { font-size: 15px; font-weight: 700; }
body.np .np-side .panel-body { padding: 14px 16px; }
body.np .np-side .panel-footer { padding: 12px 16px; border-top: 1px solid var(--np-line); background: none; }

/* Прапорці фільтрів зручного розміру: стандартні надто дрібні для пальця */
body.np .np-side .checkbox input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--np-primary);
}
body.np .np-side .checkbox { margin: 0 0 10px; }
body.np .np-side .checkbox label { display: flex; align-items: center; gap: 8px; font-size: 14.5px; cursor: pointer; }

/* ── сторінка товару ──────────────────────────────────────────────────── */

.np-prod { padding-bottom: 8px; }
.np-prod__layout { display: block; }
.np-prod__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  margin-bottom: 44px;
}

.np-prod__gallery { min-width: 0; }
.np-prod__photo {
  display: block;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: #F3F6FA;
  overflow: hidden;
}
.np-prod__photo img { width: 100%; height: auto; display: block; }

.np-prod__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.np-prod__thumb {
  width: 74px;
  height: 74px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: #F3F6FA;
  overflow: hidden;
}
.np-prod__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.np-prod__thumb.is-active { border-color: var(--np-primary); box-shadow: 0 0 0 2px var(--np-primary-soft); }

.np-prod__buy { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.np-prod__title { margin: 0; font-size: 29px; line-height: 1.2; }

.np-prod__meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13.5px; color: var(--np-muted); }
.np-prod__stock.is-in { color: #2F8F46; }

.np-prod__price { display: flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; gap: 14px; }
.np-prod__price-now,
.np-prod__price-new {
  font-size: 32px;
  font-weight: 800;
  color: var(--np-ink);
  font-variant-numeric: tabular-nums;
}
.np-prod__price-new { color: var(--np-sale); }
.np-prod__price-old { font-size: 18px; color: var(--np-muted); text-decoration: line-through; }
.np-prod__tax { font-size: 13px; color: var(--np-faint); margin-top: -12px; }

.np-prod__discounts { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--np-muted); }

/* ── опції товару ─────────────────────────────────────────────────────── */

.np-opt { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
/* Опція-характеристика: підпис і значення в рядок, без поля вводу.
   Обирати тут нічого — це те, що варто знати про товар.          */
.np-opt--info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.np-opt--info .np-opt__label { margin: 0; }
.np-opt__info { font-size: 15px; color: var(--np-muted); }

.np-opt__label { font-size: 14px; font-weight: 700; color: var(--np-ink); }
.np-opt--required .np-opt__label::after { content: ' *'; color: var(--np-sale); }

.np-opt__values { display: flex; flex-wrap: wrap; gap: 8px; }

/* Розмір кнопками: у випадний список пальцем не влучиш, а варіантів
   зазвичай небагато — вони помістяться в кілька рядків. */
.np-opt__pill { position: relative; cursor: pointer; }
.np-opt__pill input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.np-opt__pill span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-card);
  font-size: 15px;
  font-weight: 600;
  color: var(--np-ink);
  transition: border-color 0.14s ease, background 0.14s ease;
}
.np-opt__pill span em { font-style: normal; font-size: 12px; color: var(--np-muted); margin-left: 4px; }
.np-opt__pill:hover span { border-color: var(--np-primary); }
.np-opt__pill input:checked + span {
  border-color: var(--np-primary);
  background: var(--np-primary-soft);
  color: var(--np-primary);
}
.np-opt__pill input:focus-visible + span { outline: 2px solid var(--np-primary); outline-offset: 2px; }

.np-opt__select,
.np-opt__field {
  width: 100%;
  max-width: 340px;
  min-height: 46px;
  padding: 11px 14px;
  border: 1.5px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-card);
  font-family: inherit;
  font-size: 15px;
  color: var(--np-ink);
}
.np-opt__select:focus,
.np-opt__field:focus { border-color: var(--np-primary); outline: none; }

.np-opt.has-error .np-opt__select,
.np-opt.has-error .np-opt__field,
.np-opt.has-error .np-opt__pill span { border-color: var(--np-sale); }
.np-opt__error { font-size: 13px; color: var(--np-sale); }

/* ── око біля пароля ──────────────────────────────────────────────────── */

/* Обгортка з’являється скриптом навколо кожного поля з паролем —
   і в наших формах, і на сторінках, які малює рушій. Тому все, що тут
   є, спирається лише на саму обгортку, без прив’язки до форми. */
.np-pass { position: relative; display: block; }
.np-pass > input { width: 100%; padding-right: 46px; }
.np-pass__eye {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--np-radius-sm);
  background: none;
  color: var(--np-muted);
  cursor: pointer;
}
.np-pass__eye:hover { color: var(--np-primary); }
.np-pass__eye[aria-pressed="true"] { color: var(--np-primary); }

/* ── кількість і кнопка ───────────────────────────────────────────────── */

.np-prod__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }

.np-qty {
  display: flex;
  align-items: center;
  height: 52px;
  border: 1.5px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  overflow: hidden;
}
.np-qty__btn {
  width: 42px;
  height: 100%;
  border: 0;
  background: none;
  font-size: 19px;
  font-weight: 600;
  color: var(--np-muted);
  cursor: pointer;
}
.np-qty__btn:hover { background: var(--np-primary-soft); color: var(--np-primary); }
.np-qty__input {
  width: 46px;
  height: 100%;
  border: 0;
  background: none;
  text-align: center;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--np-ink);
}
.np-qty__input:focus { outline: none; }

.np-prod__add { height: 52px; flex-grow: 1; justify-content: center; min-width: 200px; font-size: 16px; }
.np-prod__wish { width: 52px; height: 52px; border: 1.5px solid var(--np-line); }

.np-prod__minimum { font-size: 13px; color: var(--np-muted); }

.np-prod__trust {
  margin: 6px 0 0;
  padding: 16px 18px;
  list-style: none;
  border-radius: var(--np-radius);
  background: var(--np-primary-soft);
  font-size: 13.5px;
  color: var(--np-muted);
}
.np-prod__trust li + li { margin-top: 7px; }
.np-prod__trust strong { color: #12233F; font-weight: 700; }

/* ── блоки під товаром ────────────────────────────────────────────────── */

.np-prod__block { margin-bottom: 40px; }
.np-prod__block > h2 { margin: 0 0 18px; font-size: 22px; }
.np-prod__text { font-size: 15.5px; line-height: 1.7; max-width: 74ch; color: var(--np-ink); }
.np-prod__text p { margin: 0 0 14px; }

.np-specs {
  width: 100%;
  max-width: 640px;
  margin-bottom: 20px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--np-card);
}
.np-specs caption {
  padding: 13px 16px;
  border-bottom: 1px solid var(--np-line);
  background: var(--np-primary-soft);
  font-size: 14px;
  font-weight: 700;
  color: #12233F;
  text-align: left;
}
.np-specs th,
.np-specs td { padding: 12px 16px; border-top: 1px solid var(--np-line); font-size: 14.5px; text-align: left; }
.np-specs tr:first-child th,
.np-specs tr:first-child td { border-top: 0; }
.np-specs th { width: 45%; font-weight: 600; color: var(--np-muted); }

.np-review__row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.np-review__row label { font-size: 14px; font-weight: 600; }
/* Оцінка зірками. Розмітка йде від п'ятої зірки до першої, а рядок
   розвертається тут — тоді «усі зірки лівіше за наведену» описується
   звичайним сусіднім селектором, який уміє дивитись лише вперед. */
.np-review__rating {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}
.np-review__rating label {
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  color: var(--np-line);
  transition: color 0.12s ease;
}
.np-review__rating input { position: absolute; width: 0; height: 0; opacity: 0; }
.np-review__rating label:hover,
.np-review__rating label:hover ~ label,
.np-review__rating label:has(input:checked),
.np-review__rating label:has(input:checked) ~ label { color: var(--np-accent); }
.np-review__rating input:focus-visible + i { outline: 2px solid var(--np-primary); outline-offset: 3px; }

/* ── відгуки: перелік і оцінка під назвою ─────────────────────────────── */

.np-reviews__list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }

.np-review-item {
  padding: 16px 18px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
}

.np-review-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 8px;
}

.np-review-item__author { font-weight: 700; color: var(--np-ink); }
.np-review-item__date { margin-left: auto; font-size: 13px; color: var(--np-faint); }
.np-review-item__text { margin: 0; line-height: 1.55; }

.np-review-item__stars i,
.np-prod__stars i { font-style: normal; color: var(--np-line); }
.np-review-item__stars i.is-on,
.np-prod__stars i.is-on { color: var(--np-accent); }

.np-reviews__empty { color: var(--np-muted); }

/* Відгуки пишуть лише авторизовані, тож гість бачить не форму, а
   запрошення увійти. Воно має читатись як підказка, а не як помилка. */
.np-review__login {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--np-line);
  border-left: 3px solid var(--np-primary);
  border-radius: var(--np-radius-sm);
  background: var(--np-card);
  color: var(--np-muted);
}
.np-review__login a { font-weight: 600; }
.np-reviews__pages { margin-bottom: 18px; }

/* Оцінка під назвою товару. Веде до відгуків нижче на сторінці. */
.np-prod__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--np-muted);
}
.np-prod__stars { font-size: 17px; letter-spacing: 1px; }
.np-prod__rating:hover .np-prod__reviews { color: var(--np-primary); }

@media (max-width: 480px) {
  .np-review-item__date { margin-left: 0; width: 100%; }
}

.np-alert {
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: var(--np-radius-sm);
  background: #E7F5EA;
  color: #22693A;
  font-size: 14.5px;
}
.np-alert--error { background: #FCEBE7; color: #A33418; }
body.np .np-alert a { color: inherit; text-decoration: underline; }

/* ── адаптив каталогу ─────────────────────────────────────────────────── */

@media (max-width: 1200px) {
  .np-list__layout,
  .np-prod__layout--aside { grid-template-columns: 250px minmax(0, 1fr); gap: 24px; }
  .np-prod__top { gap: 30px; }
  .np-prod__title { font-size: 26px; }
}

@media (max-width: 991px) {
  /* Бічна колонка йде під вміст: у два стовпці на планшеті вже тісно,
     а фільтри потрібні рідше, ніж самі товари. */
  .np-list__layout,
  .np-prod__layout--aside { grid-template-columns: minmax(0, 1fr); }
  /* Категорії йдуть угору, над товари: це навігація, і побачити її
     треба одразу. Фільтри тим часом живуть у кнопці внизу екрана. */
  .np-side { order: 0; margin-bottom: 4px; }
  .np-side--right { order: 3; }

  .np-prod__top { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .np-prod__photo { max-width: 460px; }
  .np-list__title { font-size: 24px; }
}

@media (max-width: 767px) {
  .np-crumbs { padding: 12px 0 10px; font-size: 12px; }
  .np-list__title { font-size: 22px; }
  .np-list__intro { flex-direction: column; gap: 14px; }
  .np-list__cover { width: 140px; }


  .np-toolbar__controls { width: 100%; }
  .np-select { flex-grow: 1; }
  .np-select select { flex-grow: 1; }

  .np-search-form { padding: 16px; }
  .np-search-form__row { flex-direction: column; }
  .np-search-form__input { font-size: 16px; }

  .np-prod__title { font-size: 22px; }
  .np-prod__price-now,
  .np-prod__price-new { font-size: 27px; }
  .np-prod__add { min-width: 0; }
  .np-prod__block > h2 { font-size: 19px; }
  .np-specs th { width: 50%; }
}

/* ── бічна колонка: знешкодження сітки Bootstrap ──────────────────────────
   Контролер column_left загортає модулі у власний блок:
     <aside id="column-left" class="col-sm-3 hidden-xs">
   Це колонка Bootstrap на 25% ширини. Опинившись усередині моєї колонки
   на 280px, вона давала вмісту близько 70px — звідси стиснутий вигляд.

   Сітку задає grid зовнішнього блока, тож внутрішні відсотки й відступи
   Bootstrap тут зайві й лише заважають.

   hidden-xs ховає колонку на телефоні. Для цієї теми це неприйнятно:
   меню категорій під шапкою вимкнене, тож на телефоні це єдиний спосіб
   перейти в інший розділ. Повертаємо видимість — Bootstrap ставить
   display: none з !important, тож перебити можна тільки так само.       */

body.np .np-side > #column-left,
body.np .np-side > #column-right {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  float: none;
}

@media (max-width: 767px) {
  body.np .np-side > #column-left.hidden-xs,
  body.np .np-side > #column-right.hidden-xs { display: block !important; }
}

/* Заголовок над переліком: без нього список категорій у колонці
   виглядає як набір посилань нізвідки. */
.np-side__title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #12233F;
}

/* ── фільтри ──────────────────────────────────────────────────────────── */

.np-filter {
  margin-bottom: 20px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
  overflow: hidden;
}

.np-filter__head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--np-line);
  font-size: 15px;
  font-weight: 700;
  color: #12233F;
}

.np-filter__body { padding: 4px 18px 8px; }

.np-filter__group { padding: 14px 0; border-bottom: 1px solid var(--np-line); }
.np-filter__group:last-child { border-bottom: 0; }

.np-filter__name {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--np-faint);
}

.np-filter__values { display: flex; flex-direction: column; gap: 2px; }

/* Уся смуга клікабельна, а не тільки квадратик — так значно легше
   влучити й мишею, і пальцем. */
.np-filter__item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 8px 8px 0;
  border-radius: var(--np-radius-sm);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--np-ink);
  cursor: pointer;
}
.np-filter__item:hover { color: var(--np-primary); }
.np-filter__item input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--np-primary);
  cursor: pointer;
}

.np-filter__foot { padding: 14px 18px; border-top: 1px solid var(--np-line); }
.np-filter__apply { width: 100%; justify-content: center; }

/* ── фокус на випадних списках і полях ────────────────────────────────────
   Загальне правило фокуса нижче малює обводку навколо будь-якого select.
   Для випадного списку браузер вважає фокус «таким, що вимагає позначки»
   навіть при звичайному кліку мишею — тож синій контур з'являвся щоразу,
   коли просто обираєш сортування.

   Прибираємо його там, де показник фокуса вже є в самому елементі:
   рамка списку й так синіє. Для клавіатури це однаково помітно, а при
   кліку мишею нічого зайвого не малюється.                              */

body.np .np-select select:focus,
body.np .np-select select:focus-visible,
body.np .np-opt__select:focus,
body.np .np-opt__select:focus-visible,
body.np .np-opt__field:focus,
body.np .np-opt__field:focus-visible,
body.np .np-search-form__input:focus,
body.np .np-search-form__input:focus-visible {
  outline: none;
}

/* Рамка при фокусі стає помітнішою — це й лишається сигналом */
body.np .np-select select:focus {
  border-color: var(--np-primary);
  box-shadow: 0 0 0 3px var(--np-primary-soft);
}
body.np .np-opt__select:focus,
body.np .np-opt__field:focus,
body.np .np-search-form__input:focus {
  box-shadow: 0 0 0 3px var(--np-primary-soft);
}

/* ==========================================================================
   Фільтри смугою над товарами
   --------------------------------------------------------------------------
   Категорії лишаються в колонці ліворуч — це навігація. Фільтри йдуть
   угорі кнопками, бо їх обирають уже всередині розділу.
   ========================================================================== */

.np-fbar { margin-bottom: 16px; }

/* Шапка й нижня смуга потрібні лише панелі на телефоні */
.np-fbar__head,
.np-fbar__foot { display: none; }

.np-fbar__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── кнопка групи ─────────────────────────────────────────────────────── */

.np-fchip { position: relative; }

.np-fchip__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-card);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--np-ink);
  cursor: pointer;
  white-space: nowrap;
}
.np-fchip__btn:hover { border-color: var(--np-primary); }

.np-fchip.is-chosen .np-fchip__btn {
  border-color: var(--np-primary);
  background: var(--np-primary-soft);
  color: var(--np-primary);
}
.np-fchip.is-open .np-fchip__btn { border-color: var(--np-primary); }

.np-fchip__count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--np-primary);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 800;
}

.np-fchip__chev { flex-shrink: 0; color: var(--np-muted); transition: transform 0.16s ease; }
.np-fchip.is-open .np-fchip__chev { transform: rotate(180deg); }
.np-fchip.is-chosen .np-fchip__chev { color: var(--np-primary); }

/* ── випадний список ──────────────────────────────────────────────────── */

.np-fchip__drop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 240px;
  max-width: 320px;
  padding: 8px 0 0;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
  box-shadow: 0 14px 34px rgba(18, 35, 63, 0.14);
}
.np-fchip.is-open .np-fchip__drop { display: block; }

.np-fchip__list { padding: 0 8px; max-height: 320px; overflow-y: auto; }

/* Довгі групи згорнуті до п'яти значень. nth-child, а не скрипт: список
   лишається повним у розмітці, тож пошуковик бачить усі значення. */
.np-fchip__list.is-clamped .np-fchip__item:nth-child(n + 6) { display: none; }

.np-fchip__item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 10px;
  border-radius: var(--np-radius-sm);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--np-ink);
  cursor: pointer;
}
.np-fchip__item:hover { background: var(--np-primary-soft); color: var(--np-primary); }

/* Розміри сіткою. Чисел багато, кожне коротке — списком це була б
   колонка з десяти рядків, де дев’ять місця займає порожнеча
   праворуч від числа. */
.np-fchip__list--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
  padding: 0 8px 4px;
}
.np-fchip__item--size {
  position: relative;
  justify-content: center;
  gap: 0;
  padding: 9px 4px;
  border: 1px solid var(--np-line);
  font-variant-numeric: tabular-nums;
}
/* Квадратик галочки прибраний з очей, але лишається в розмітці: без
   нього значення не потрапляло б у форму й не працювала б клавіатура. */
.np-fchip__item--size input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.np-fchip__item--size:has(input:checked) {
  border-color: var(--np-primary);
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-weight: 700;
}
.np-fchip__item--size:has(input:focus-visible) { outline: 2px solid var(--np-primary); outline-offset: 2px; }
/* Кількість товарів у сітку не влазить — та й розмір або є, або немає. */
.np-fchip__item--size .np-fchip__num { display: none; }
.np-fchip__item--size.is-empty { opacity: 0.45; }

.np-fchip__item input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--np-primary);
  cursor: pointer;
}

.np-fchip__more {
  width: calc(100% - 16px);
  margin: 2px 8px;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--np-radius-sm);
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--np-primary);
  text-align: left;
  cursor: pointer;
}
.np-fchip__more:hover { background: var(--np-primary-soft); }

.np-fchip__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--np-line);
}
.np-fchip__clear {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--np-muted);
  cursor: pointer;
}
.np-fchip__clear:hover { color: var(--np-sale); }
.np-fchip__apply { height: 38px; padding: 0 18px; font-size: 14px; }

.np-fbar__reset {
  height: 42px;
  padding: 0 14px;
  border: 1px dashed var(--np-line);
  border-radius: var(--np-radius-sm);
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--np-muted);
  cursor: pointer;
}
.np-fbar__reset:hover { border-color: var(--np-sale); color: var(--np-sale); }

/* ── кнопка внизу екрана: тільки телефон ──────────────────────────────── */

.np-fbtn { display: none; }
.np-fbar-backdrop { display: none; }

@media (max-width: 991px) {
  /* Смуга кнопок стає панеллю, що висувається знизу. Знизу, а не збоку:
     великим пальцем туди дотягнутись найлегше. */
  .np-fbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    max-height: 86vh;
    margin: 0;
    border-radius: var(--np-radius) var(--np-radius) 0 0;
    background: var(--np-bg);
    box-shadow: 0 -8px 34px rgba(18, 35, 63, 0.22);
    transform: translateY(100%);
    transition: transform 0.26s ease;
  }
  .np-fbar.is-open { transform: translateY(0); }

  .np-fbar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--np-line);
    font-size: 17px;
    font-weight: 700;
    color: #12233F;
  }
  /* Скільки обрано загалом — біля слова «Фільтр». Заголовок і число
     тримаємо разом, а хрестик має відсунутись до краю, тож auto
     переїжджає на нього. */
  .np-fbar__count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 11px;
    background: var(--np-primary);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 800;
  }

  .np-fbar__close {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--np-radius-sm);
    background: none;
    color: var(--np-muted);
    cursor: pointer;
  }

  .np-fbar__chips {
    display: block;
    flex-grow: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 20px 12px;
  }

  .np-fchip { border-bottom: 1px solid var(--np-line); }
  .np-fchip:last-of-type { border-bottom: 0; }

  /* Групи згорнуті, як і в рядку над товарами: рядок із назвою, стрілка
     праворуч, значення розкриваються дотиком. Відкритим лишається один —
     так панель не перетворюється на нескінченне полотно. */
  .np-fchip__btn {
    width: 100%;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    justify-content: flex-start;
    font-size: 16px;
    font-weight: 600;
    color: var(--np-ink);
  }
  .np-fchip__btn:hover { border-color: transparent; }
  .np-fchip.is-chosen .np-fchip__btn,
  .np-fchip.is-open .np-fchip__btn { background: none; border-color: transparent; color: var(--np-ink); }
  /* Значок стоїть одразу за назвою групи, а стрілку відсуває праворуч
     власне margin-left: auto. Так число тримається біля того слова, до
     якого стосується, а не блукає посеред рядка. */
  .np-fchip__count { margin-left: 8px; }
  .np-fchip__chev { margin-left: auto; }

  .np-fchip__drop {
    position: static;
    min-width: 0;
    max-width: none;
    padding: 0 0 10px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  .np-fchip__list { max-height: none; padding: 0; overflow: visible; }

  /* Рядок значення — на всю ширину панелі й заввишки з палець.
     Від'ємні поля витягують підсвічування дотику під самі краї, щоб
     воно не висіло вузькою смужкою посеред екрана. */
  .np-fchip__item {
    gap: 12px;
    margin: 0 -8px;
    padding: 12px 8px;
    font-size: 15.5px;
  }
  .np-fchip__item input { width: 21px; height: 21px; }

  /* У панелі місця більше — розмірів у ряд теж. Від’ємні поля
     звичайного рядка сітку зламали б. */
  .np-fchip__list--grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; padding: 0; }
  .np-fchip__item--size { margin: 0; padding: 12px 4px; }
  .np-fchip__more {
    width: auto;
    margin: 2px 0 0;
    padding: 10px 0;
    background: none;
    text-align: left;
    color: var(--np-primary);
  }
  .np-fchip__foot { display: none; }

  .np-fbar__reset { display: none; }

  .np-fbar__foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 14px 20px;
    /* Окремим рядком, а не в скороченому записі: браузер, який не знає
       env(), викинув би весь padding і панель лишилася б без полів.
       Так він викине лише цей рядок, а 14px згори лишаться. */
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--np-line);
    background: var(--np-card);
  }
  .np-fbar__clear-all {
    flex-shrink: 0;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--np-line);
    border-radius: var(--np-radius-sm);
    background: var(--np-card);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--np-muted);
    cursor: pointer;
  }
  .np-fbar__apply { flex-grow: 1; height: 48px; justify-content: center; }

  /* Кнопка виклику: по центру внизу, над вмістом сторінки */
  .np-fbtn {
    display: flex;
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 1030;
    transform: translateX(-50%);
    align-items: center;
    gap: 9px;
    height: 50px;
    padding: 0 24px;
    border: 0;
    border-radius: 100px;
    background: var(--np-primary);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(18, 35, 63, 0.28);
    cursor: pointer;
  }
  .np-fbtn__count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--np-accent);
    font-size: 12px;
    font-weight: 800;
  }

  /* Поки панель фільтрів відкрита, сторінка позаду не гортається */
  body.np-locked { overflow: hidden; }

  .np-fbar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(18, 35, 63, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .np-fbar { transition: none; }
  .np-fchip__chev { transition: none; }
}

/* ── перелік категорій у бічній колонці ───────────────────────────────── */

.np-cats-side {
  margin-bottom: 20px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
  overflow: hidden;
}

.np-cats-side__head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--np-line);
  font-size: 15px;
  font-weight: 700;
  color: #12233F;
}

.np-cats-side__list,
.np-cats-side__sub { margin: 0; padding: 0; list-style: none; }

/* Назва ліворуч, кількість праворуч. Число приглушене: воно допомагає
   зорієнтуватись, але не має конкурувати з назвою за увагу. */
.np-cats-side__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--np-line);
  font-size: 14.5px;
  color: var(--np-ink);
}
.np-cats-side__list > li:first-child > .np-cats-side__item { border-top: 0; }

/* Увесь каталог — над категоріями й трохи окремо від них: це не ще
   одна категорія, а вихід із них. */
.np-cats-side__item--all { font-weight: 700; }
.np-cats-side__list > li:first-child > .np-cats-side__item--all { border-bottom: 1px solid var(--np-line); }
.np-cats-side__list > li:nth-child(2) > .np-cats-side__item { border-top: 0; }

.np-cats-side__item:hover { background: var(--np-primary-soft); color: var(--np-primary); }
.np-cats-side__item.is-active {
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-weight: 700;
}

.np-cats-side__item em {
  font-style: normal;
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--np-faint);
  font-variant-numeric: tabular-nums;
}
.np-cats-side__item.is-active em { color: var(--np-primary); }

.np-cats-side__item--child { padding-left: 32px; font-size: 14px; }

/* Кількість у фільтрах — так само окремим числом, без дужок */
.np-fchip__num {
  font-style: normal;
  margin-left: auto;
  font-size: 12.5px;
  color: var(--np-faint);
  font-variant-numeric: tabular-nums;
}
.np-fchip__item:hover .np-fchip__num { color: var(--np-primary); }

/* ── категорії на планшеті й телефоні ─────────────────────────────────────
   До 991px колонка стає одним стовпцем і перелік категорій піднімається
   над товари. Вертикальним списком він з'їдав би пів екрана до першої
   картки, тож лягає в один рядок, який гортається пальцем. Фільтри тим
   часом ховаються в кнопку внизу екрана — так само, як в Intertop.

   display: contents прибирає коробки <li> і вкладеного <ul>, тож
   посилання стають прямими дітьми рядка. Інакше підкатегорії відкритого
   розділу лишалися б стовпчиком усередині однієї плитки.               */

@media (max-width: 991px) {
  .np-cats-side {
    margin-bottom: 4px;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
  }
  .np-cats-side__head { display: none; }

  .np-cats-side__sub,
  .np-cats-side__list > li { display: contents; }

  .np-cats-side__list {
    display: flex;
    gap: 8px;
    /* Вихід за поля контейнера: рядок має гортатися від краю до краю,
       а не обриватися з відступом посеред екрана. */
    margin: 0 -16px;
    padding: 2px 16px 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .np-cats-side__list::-webkit-scrollbar { display: none; }

  .np-cats-side__item,
  .np-cats-side__list > li:first-child > .np-cats-side__item {
    flex: 0 0 auto;
    gap: 7px;
    height: 38px;
    padding: 0 15px;
    border: 1px solid var(--np-line);
    border-radius: 100px;
    background: var(--np-card);
    font-size: 14px;
    white-space: nowrap;
  }
  .np-cats-side__item--child { padding: 0 15px; font-size: 14px; }

  /* Селектор навмисно довший, ніж потрібно для влучання.

     Правило вище повертає першій плитці верхню рамку, і задано воно через
     li:first-child — тобто важить більше за звичайне .is-active. Через це
     перша категорія, ставши поточною, лишалася білою, а текст їй уже
     призначили білий: напис зникав. Помітно лише на першій плитці й лише
     тоді, коли вона вибрана.

     Тому тут така сама вага: три класи й елемент. За рівної ваги виграє
     те, що нижче, — а це вибрана плитка. */
  .np-cats-side__list > li > .np-cats-side__item.is-active {
    border-color: var(--np-primary);
    background: var(--np-primary);
    color: #FFFFFF;
  }
  .np-cats-side__list > li > .np-cats-side__item.is-active em { color: rgba(255, 255, 255, 0.72); }
}

/* Найвужчі телефони: місця в картці лишається обмаль, тож ціни й кнопка
   стискаються ще на крок. Перенести ціну в другий рядок не можна — вона
   має читатися як «було — стало», а стовпчик читається як два числа. */

@media (max-width: 400px) {
  .np-card__price { font-size: 15.5px; gap: 5px; }
  .np-card__price-old { font-size: 11.5px; }
  .np-card__cart { width: 36px; height: 36px; }
}

/* ── підказки пошуку ──────────────────────────────────────────────────────
   Випадний список під полем. Він лежить не всередині рамки пошуку, а поруч
   із нею: у рамки overflow: hidden заради заокруглених кутів, і список
   усередині був би обрізаний по її висоті.                               */

.np-searchbox { position: relative; flex-grow: 1; min-width: 0; }

.np-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 70;
  max-height: min(70vh, 460px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
  box-shadow: 0 16px 40px rgba(18, 35, 63, 0.16);
}

.np-suggest__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--np-radius-sm);
  color: var(--np-ink);
}

/* Підсвічування спільне для миші й клавіатури: стрілками список ходить
   тим самим класом, що додає й наведення. Інакше довелося б тримати два
   різні вигляди одного стану. */
/* Розділ каталогу: рядок без картинки й зі стрілкою. На вигляд не схожий
   на товар — бо це не товар, а перехід у частину каталогу. */
.np-suggest__cat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--np-radius-sm);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--np-ink);
}
.np-suggest__cat::before {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--np-primary);
  border-right: 2px solid var(--np-primary);
  transform: rotate(45deg);
}
.np-suggest__cat + .np-suggest__item { margin-top: 4px; border-top: 1px solid var(--np-line); }

.np-suggest__cat.is-current,
.np-suggest__item.is-current,
.np-suggest__all.is-current { background: var(--np-primary-soft); }

.np-suggest__thumb {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: var(--np-radius-sm);
  object-fit: cover;
  background: #F1F3F7;
}

.np-suggest__name {
  flex-grow: 1;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.35;
}

.np-suggest__price {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
  color: var(--np-ink);
  font-variant-numeric: tabular-nums;
}
.np-suggest__price s { font-size: 12px; font-weight: 500; color: var(--np-muted); }
.np-suggest__new { color: var(--np-sale); }

.np-suggest__all {
  display: block;
  margin-top: 4px;
  padding: 11px 8px;
  border-top: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--np-primary);
}

.np-suggest__empty {
  padding: 18px 8px;
  text-align: center;
  font-size: 14px;
  color: var(--np-muted);
}

/* На телефоні картинка й ціна з'їдають рядок, а найважливіше тут — назва. */
@media (max-width: 480px) {
  .np-suggest__thumb { width: 40px; height: 40px; }
  .np-suggest__name { font-size: 14px; }
  .np-suggest__price { font-size: 13px; }
  .np-suggest__price s { display: none; }
}

/* ── сортування всередині панелі фільтрів ─────────────────────────────────
   На широкому екрані сортування живе в рядку над товарами, поруч із
   кількістю знайденого, — там йому й місце. У панель воно потрібне лише
   на телефоні, де того рядка немає: інакше довелося б закрити фільтри,
   знайти окремий список і відкрити фільтри знову.                       */

.np-fchip--sort { display: none; }

@media (max-width: 991px) {
  .np-fchip--sort { display: block; }

  /* Обране сортування в згорнутому рядку. Стискається першим і ріжеться
     трьома крапками: назва групи й стрілка мають лишитись на місці, хоч
     би яким довгим було «Від дорогих до дешевих». */
  .np-fchip__pick {
    min-width: 0;
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: normal;
    font-size: 14px;
    font-weight: 500;
    color: var(--np-muted);
  }

  /* Якщо панель на сторінці є — сортування лишається тільки в ній, а з
     рядка над товарами зникає: два однакові списки поруч лише збивають.

     Умова записана сусідським селектором, а не окремим класом, бо шаблон
     сторінки не знає, чи домалював модуль фільтра свою панель. Зате в
     розмітці вона стоїть просто перед рядком — цього досить. На пошуку
     панелі немає, і сортування там лишається в рядку, як і було. */
  #np-fbar ~ .np-toolbar .np-toolbar__controls { display: none; }

  /* Вибір один із кількох, тож і позначка кругла — на відміну від
     квадратних прапорців фільтра, де можна обрати кілька. Різниця має
     бути видна до того, як людина торкнеться екрана. */
  .np-fchip__item--pick { color: var(--np-ink); }
  .np-fchip__item--pick::before {
    content: '';
    flex-shrink: 0;
    width: 21px;
    height: 21px;
    border: 2px solid var(--np-line);
    border-radius: 50%;
    background: var(--np-card);
  }
  .np-fchip__item--pick.is-picked { font-weight: 700; }
  .np-fchip__item--pick.is-picked::before {
    border-width: 6px;
    border-color: var(--np-primary);
  }
}

/* ── прості сторінки: контакти, статті ────────────────────────────────────
   Розклад той самий, що й у списку товарів: бічна колонка, якщо макет її
   дав, і вміст поруч. На вузькому екрані колонка йде вгору.            */

.np-page { padding-bottom: 40px; }

.np-page__layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.np-page__layout--wide { grid-template-columns: minmax(0, 1fr); }
.np-page__main { min-width: 0; }

.np-page__title { margin: 0 0 24px; font-size: 28px; }
.np-page__sub { margin: 34px 0 16px; font-size: 20px; }

/* ── контакти ────────────────────────────────────────────────────────── */

.np-contact { display: flex; gap: 24px; align-items: flex-start; }

.np-contact__photo {
  flex-shrink: 0;
  width: 220px;
  padding: 16px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
}
.np-contact__photo img { display: block; width: 100%; height: auto; object-fit: contain; }

/* auto-fit замість фіксованого числа стовпців: карток може бути дві,
   а може п'ять — залежить від того, що заповнено в налаштуваннях
   магазину. Сітка сама вирішує, скільки їх поміститься в ряд. */
.np-contact__grid {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.np-contact__card {
  padding: 18px 20px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
  font-size: 15px;
  line-height: 1.6;
}
.np-contact__card p { margin: 0; }

.np-contact__label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--np-muted);
}

.np-contact__store { display: block; font-size: 16px; color: #12233F; }
.np-contact__address { margin: 4px 0 0; font-style: normal; color: var(--np-muted); }
.np-contact__phone { font-size: 17px; font-weight: 700; color: var(--np-primary); white-space: nowrap; }
.np-contact__map { margin-top: 14px; }

/* Сторінка контактів: карта ліворуч, адреса й телефони праворуч.

   Співвідношення сторін карта лишає своє, а ширина стає вдвічі
   меншою — тож у колонці вона й нижча, десь урівень із текстом поруч.
   На вузькому екрані колонки стають одна під одною, карта першою. */
.np-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.np-info .np-map { margin-top: 0; }

@media (max-width: 767px) {
  .np-info { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* Карта магазину. Висота задана співвідношенням, а не пікселями:
   на телефоні квадратна карта корисніша за смужку.               */
.np-map {
  margin-top: 26px;
  aspect-ratio: 21 / 9;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  overflow: hidden;
  background: #F4F7FB;
}

/* Позначка своя, а не картинкою з бібліотеки: одного кольору з
   рештою сайту й не залежить від чужих файлів.

   Перший рядок обов'язковий: під власну позначку бібліотека сама
   підкладає білий прямокутник із сірою рамкою, і замість значка
   видно саме його. Те саме стосується позначок відділень у
   оформленні замовлення.                                        */
.np-map__pin,
.np-np__pin { background: none; border: 0; }

.np-map__pin span {
  display: block;
  width: 28px;
  height: 28px;
  border: 3px solid #FFFFFF;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--np-accent);
  box-shadow: 0 4px 10px rgba(18, 35, 63, .4);
}

.np-map .leaflet-container { font-family: inherit; font-size: 14px; }

@media (max-width: 767px) {
  .np-map { aspect-ratio: 4 / 3; }
}

/* Запасна висота — тільки там, де браузер не знає співвідношення
   сторін. Поставлена без цієї умови, вона не давала карті
   стискатися разом із вікном.                                    */
@supports not (aspect-ratio: 21 / 9) {
  .np-map { height: 320px; }
}

@media (max-width: 991px) {
  .np-page__layout { grid-template-columns: minmax(0, 1fr); }
  .np-page__title { font-size: 24px; }

  /* Фото над картками, а не збоку: у ряд із ними воно лишало б карткам
     смужку, у якій адреса переноситься по слову. */
  .np-contact { flex-direction: column; }
  .np-contact__photo { width: 100%; max-width: 260px; }
  .np-contact__grid { width: 100%; }
}

@media (max-width: 767px) {
  .np-page__title { font-size: 22px; }
  .np-page__sub { margin: 28px 0 14px; font-size: 18px; }
  .np-contact__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .np-contact__card { padding: 16px; }
}

/* ── текст статті ─────────────────────────────────────────────────────────
   Розмітка тут чужа: її набирають у візуальному редакторі адмінки, і
   частина сторінок переїхала зі старого сайту, де в моді були таблиці
   й жорстка ширина в пікселях. Тому правила описують не те, як має
   виглядати текст, а те, що робити з тим, що там уже лежить.          */

.np-article,
body.np .modal-body { font-size: 15.5px; line-height: 1.7; color: var(--np-ink); }
.np-article > :first-child,
body.np .modal-body > :first-child { margin-top: 0; }
.np-article p,
body.np .modal-body p { margin: 0 0 14px; }
/* Усі шість рівнів, а не лише ті, що трапились у першій статті.
   Заголовок, який тема не описала, лишається з розмірами браузера — а
   там h4 і нижче дрібніші за звичайний текст. Виходить заголовок, що
   менший за абзац під ним.

   Рівень у статтях довільний: одну набирали з h2, іншу з h3, третю з h4.
   Тому розміри йдуть сходинками, і будь-який початковий рівень читається
   як заголовок. h1 тут теж описаний, хоч у сторінки він уже свій —
   у тексті може трапитись другий. */
.np-article h1,
body.np .modal-body h1 { margin: 30px 0 14px; font-size: 23px; }
.np-article h2,
body.np .modal-body h2 { margin: 30px 0 14px; font-size: 21px; }
.np-article h3,
body.np .modal-body h3 { margin: 26px 0 12px; font-size: 19px; }
.np-article h4,
body.np .modal-body h4 { margin: 24px 0 10px; font-size: 17px; }
.np-article h5,
body.np .modal-body h5,
.np-article h6,
body.np .modal-body h6 { margin: 22px 0 10px; font-size: 16px; }

.np-article h1,
body.np .modal-body h1,
.np-article h2,
body.np .modal-body h2,
.np-article h3,
body.np .modal-body h3,
.np-article h4,
body.np .modal-body h4,
.np-article h5,
body.np .modal-body h5,
.np-article h6,
body.np .modal-body h6 { line-height: 1.35; color: #12233F; }
.np-article ul,
body.np .modal-body ul,
.np-article ol,
body.np .modal-body ol { margin: 0 0 16px; padding-left: 22px; }
.np-article li,
body.np .modal-body li { margin-bottom: 6px; }
.np-article a,
body.np .modal-body a { color: var(--np-primary); text-decoration: underline; }
.np-article strong,
body.np .modal-body strong { color: #12233F; }

/* Ширина в атрибуті — звична річ для старих сторінок: у карти нижче
   стоїть width="425". На телефоні така вставка вилазить за екран, тож
   ширину переписуємо, а висоту лишаємо як є. */
.np-article img,
body.np .modal-body img,
.np-article iframe,
body.np .modal-body iframe,
.np-article video,
body.np .modal-body video {
  max-width: 100%;
  height: auto;
}
.np-article img,
body.np .modal-body img { border-radius: var(--np-radius); }
.np-article iframe,
body.np .modal-body iframe {
  width: 100%;
  height: 350px;
  border: 0;
  border-radius: var(--np-radius);
}

/* Таблиця не вміє звужуватись нижче свого вмісту. Хай краще гортається
   всередині себе, ніж тягне вбік усю сторінку. */
.np-article table,
body.np .modal-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}
.np-article td,
body.np .modal-body td,
.np-article th,
body.np .modal-body th { padding: 8px 12px; border: 1px solid var(--np-line); }

@media (max-width: 480px) {
  /* Рядок Bootstrap зсунутий на -15px, а поля сторінки тут уже 12px —
     тобто вміст вилазив би за екран на три пікселі. На цій ширині
     стовпці й так лягають один під одним, тож відступи між ними
     нікому не потрібні. */
  .np-article h1,
  body.np .modal-body h1 { font-size: 21px; }
  .np-article h2,
  body.np .modal-body h2 { font-size: 19px; }
  .np-article h3,
  body.np .modal-body h3 { font-size: 17.5px; }
  .np-article h4,
  body.np .modal-body h4 { font-size: 16.5px; }

  .np-article .row,
  body.np .modal-body .row { margin-left: 0; margin-right: 0; }
  .np-article .row > [class*="col-"],
  body.np .modal-body .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
  .np-article iframe,
  body.np .modal-body iframe { height: 280px; }
}

/* ── вибір розміру просто в картці ────────────────────────────────────────
   Взуття не покласти в кошик, не назвавши розмір: опція обов'язкова, і
   рушій на таку спробу відповідає відмовою й поверненням на сторінку
   товару. Тому кнопка спершу питає розмір тут же.

   Панель лежить поверх нижньої частини картки — там, де щойно була
   кнопка. Так очі не шукають, куди дивитись далі.                      */

.np-card { position: relative; }

.np-pick {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--np-line);
  background: var(--np-card);
  box-shadow: 0 -10px 24px rgba(18, 35, 63, 0.10);
}

.np-pick__title {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--np-muted);
}

.np-pick__list { display: flex; flex-wrap: wrap; gap: 6px; }

.np-pick__size {
  min-width: 40px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-card);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--np-ink);
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.np-pick__size:hover { border-color: var(--np-primary); background: var(--np-primary-soft); color: var(--np-primary); }

/* Поки додається — щоб подвійне натискання не поклало дві пари */
.np-pick__size.is-busy { opacity: 0.5; pointer-events: none; }

.np-pick__size.is-done {
  border-color: var(--np-primary);
  background: var(--np-primary);
  color: #FFFFFF;
}

.np-pick__error { margin: 8px 0 0; font-size: 13px; color: var(--np-sale); }

/* Кнопка, що відкриває вибір, у відкритому стані підсвічена — інакше
   незрозуміло, від якої саме картки ця панель. */
.np-card__cart--pick[aria-expanded="true"] { background: var(--np-primary); color: #FFFFFF; }

/* ── кошик ────────────────────────────────────────────────────────────────
   Товари ліворуч, підсумок праворуч і закріплений: доки людина править
   кількості, сума лишається перед очима. На телефоні підсумок іде вниз,
   під товари, — там закріплювати нічого, екран і так короткий.        */

.np-cart__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}

.np-cart__weight { font-size: 16px; font-weight: 500; color: var(--np-muted); }

/* ── рядок товару ──────────────────────────────────────────────────────
   Сітка, а не таблиця: на вузькому екрані стовпці треба перебудувати, а
   таблиця цього не вміє — вона або стискається в нечитабельну, або тягне
   сторінку вбік.                                                       */

.np-citem {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto auto 36px;
  align-items: center;
  gap: 16px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
}

.np-citem__media { display: block; }
.np-citem__media img {
  display: block;
  width: 92px;
  height: 92px;
  border-radius: var(--np-radius-sm);
  object-fit: cover;
  background: #F1F3F7;
}

.np-citem__info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.np-citem__name { font-size: 15.5px; font-weight: 700; color: var(--np-ink); line-height: 1.4; }
.np-citem__name:hover { color: var(--np-primary); }

.np-citem__opts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--np-muted); }
.np-citem__opts b { color: var(--np-ink); font-weight: 700; }
.np-citem__note { font-size: 13px; color: var(--np-faint); }
.np-citem__warn { font-size: 13px; font-weight: 700; color: var(--np-sale); }

/* ── лічильник ───────────────────────────────────────────────────────── */

.np-citem__qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  overflow: hidden;
}

.np-qty__step {
  width: 36px;
  height: 38px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--np-ink);
  cursor: pointer;
}
.np-qty__step:hover:not(:disabled) { background: var(--np-primary-soft); color: var(--np-primary); }
.np-qty__step:disabled { color: var(--np-faint); cursor: default; }

.np-qty__value {
  min-width: 34px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.np-citem__sum { text-align: right; white-space: nowrap; }
.np-citem__total { display: block; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.np-citem__each { display: block; margin-top: 2px; font-size: 12.5px; color: var(--np-muted); }

.np-citem__drop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--np-radius-sm);
  background: none;
  color: var(--np-faint);
  cursor: pointer;
}
.np-citem__drop:hover { background: #FDECEA; color: var(--np-sale); }

/* ── підсумок ────────────────────────────────────────────────────────── */

.np-sum {
  position: sticky;
  top: 16px;
  padding: 20px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
}

.np-sum__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  font-size: 14.5px;
  color: var(--np-muted);
}
.np-sum__row b { font-weight: 700; color: var(--np-ink); font-variant-numeric: tabular-nums; }

.np-sum__row--final {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--np-line);
  font-size: 16px;
  color: var(--np-ink);
}
.np-sum__row--final b { font-size: 21px; font-weight: 800; }

.np-sum__go { width: 100%; margin-top: 16px; justify-content: center; }
.np-sum__back {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  color: var(--np-muted);
}
.np-sum__back:hover { color: var(--np-primary); }

.np-cart__extras { margin-top: 26px; }
.np-cart__hint { margin: 0 0 14px; font-size: 14.5px; color: var(--np-muted); }

/* ── повідомлення над кошиком ────────────────────────────────────────── */

.np-note {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--np-line);
  border-left: 3px solid var(--np-primary);
  border-radius: var(--np-radius-sm);
  background: var(--np-card);
  font-size: 14.5px;
}
.np-note--ok { border-left-color: #2F8F46; }
.np-note--bad { border-left-color: var(--np-sale); }

/* Порожній кошик і неіснуюча сторінка — той самий розклад */
.np-empty--page { padding: 40px 0 60px; text-align: center; }
.np-empty--page p { margin: 0 0 22px; font-size: 15.5px; color: var(--np-muted); }

@media (max-width: 991px) {
  .np-cart__layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .np-sum { position: static; }
}

@media (max-width: 640px) {
  /* Картинка й хрестик лишаються по краях, решта переходить під назву:
     ціна поруч із лічильником у півекрана не вміщається. */
  .np-citem {
    grid-template-columns: 72px minmax(0, 1fr) 32px;
    gap: 12px;
    padding: 12px;
  }
  .np-citem__media img { width: 72px; height: 72px; }
  .np-citem__qty { grid-column: 2; justify-self: start; }
  .np-citem__sum { grid-column: 3 / -1; grid-row: 2; text-align: right; }
  .np-citem__drop { grid-column: 3; grid-row: 1; align-self: start; }
}

/* ── оформлення замовлення ────────────────────────────────────────────────
   Кроки, їхній порядок і поведінка — логіка рушія: кожна панель
   підвантажується окремим запитом, скрипт шукає їх за класами Bootstrap.
   Тому розмітку не чіпаємо, а міняємо тільки вигляд — тут і в підшаблонах
   кроків, які тема теж не переписує.                                    */

.np-checkout .panel-group { margin: 0; }

.np-checkout .panel {
  margin: 0 0 12px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
  box-shadow: none;
  overflow: hidden;
}

.np-checkout .panel-heading {
  padding: 0;
  border: 0;
  background: none;
}

/* Заголовок кроку. Поки крок не підвантажився, рушій лишає в ньому
   просто текст; коли підвантажився — підміняє посиланням. Виглядати це
   має однаково, тож відступ у цьому разі переходить на посилання: так
   натискається весь рядок, а не саме слово.

   Якщо браузер не знає :has(), відступ порахується двічі й рядок стане
   вищим — але лишиться робочим. */
.np-checkout .panel-title {
  position: relative;
  display: block;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 700;
  color: #12233F;
  line-height: 1.35;
}
.np-checkout .panel-title:has(> a) { padding: 0; }
.np-checkout .panel-title > a { display: block; padding: 16px 20px; color: inherit; }
.np-checkout .panel-title > a:hover { color: var(--np-primary); }

/* Значок «розгорнути» від Font Awesome тема не використовує */
.np-checkout .panel-title .fa { display: none; }

/* Заповнений крок можна відкрити назад — і це має бути видно. Стрілка
   з’являється тільки там, де під заголовком уже щось лежить: у кроку,
   до якого ще не дійшли, тіло порожнє, і відкривати там нічого. */
.np-checkout .panel:has(.panel-body:not(:empty)) .panel-title { cursor: pointer; padding-right: 46px; }
.np-checkout .panel:has(.panel-body:not(:empty)) .panel-title > a { padding-right: 0; }
.np-checkout .panel:has(.panel-body:not(:empty)) .panel-title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--np-muted);
  border-bottom: 2px solid var(--np-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.16s ease;
}
.np-checkout .panel:has(.panel-collapse.in) .panel-title::after { transform: translateY(-30%) rotate(-135deg); }

.np-checkout .panel-body {
  padding: 4px 20px 20px;
  border-top: 1px solid var(--np-line);
}

/* Перший крок у того, хто вже увійшов: пояснення замість форми. */
.np-cauth {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--np-radius-sm);
  background: var(--np-primary-soft);
}
.np-cauth__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--np-primary);
  color: #FFFFFF;
}
.np-cauth__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 14.5px; }
.np-cauth__text b { font-size: 15px; font-weight: 700; color: var(--np-ink); }
.np-cauth__note { color: var(--np-muted); }
.np-cauth__link {
  flex-shrink: 0;
  margin-left: auto;
  align-self: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--np-primary);
  white-space: nowrap;
}

@media (max-width: 575px) {
  .np-cauth { flex-wrap: wrap; }
  .np-cauth__link { margin-left: 42px; align-self: flex-start; }
}

/* ── поля ──────────────────────────────────────────────────────────────
   У підшаблонах рушія форми зверстані як form-horizontal: підпис ліворуч
   у третину ширини, поле праворуч. На телефоні від поля лишається смужка
   в кілька літер. Ставимо підпис над полем — це єдиний розклад, який не
   доводиться переробляти під кожну ширину.                            */

.np-checkout .form-horizontal .control-label,
.np-checkout .form-group > label {
  display: block;
  float: none;
  width: auto;
  margin-bottom: 6px;
  padding: 0;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--np-ink);
}

.np-checkout .form-horizontal .form-group { margin: 0 0 16px; }
.np-checkout .form-horizontal .form-group > div[class*="col-"] { width: 100%; padding: 0; float: none; }

/* Рушій ставить контакти й адресу двома колонками поруч: ліворуч
   людина, праворуч посилка. Адреса тепер в окремому кроці, і від тієї
   верстки лишилась половина ширини з порожнечею праворуч. Тут колонка
   кроку — завжди на всю ширину.                                     */
.np-checkout #collapse-payment-address .row { margin-left: 0; margin-right: 0; }
.np-checkout #collapse-payment-address .row > [class*="col-"] {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  float: none;
}

.np-checkout .form-control {
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: #FAFBFC;
  box-shadow: none;
  font-size: 15px;
  color: var(--np-ink);
}
.np-checkout textarea.form-control { height: auto; padding: 12px 14px; line-height: 1.6; }
.np-checkout .form-control:focus {
  border-color: var(--np-primary);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px var(--np-primary-soft);
}

.np-checkout .text-danger { margin-top: 6px; font-size: 13px; color: var(--np-sale); }
.np-checkout legend {
  margin: 6px 0 16px;
  padding: 0;
  border: 0;
  font-size: 17px;
  font-weight: 700;
  color: #12233F;
}

/* Крок «Доставка»: адреса й спосіб доставки.

   Форма адреси приходить сюди з кроку контактів — та сама розмітка
   рушія, перенесена скриптом. Поки вона стоїть у кроці контактів, її
   не видно: там питають людину, а не посилку.

   Підпис «Ваша адреса» всередині форми прибраний: назва кроку вже
   сказала, про що це.                                                */

.np-checkout #collapse-payment-address fieldset#address,
.np-checkout--logged #collapse-payment-address form { display: none; }

/* Вибір адреси з адресної книги на цьому кроці не потрібен: куди
   везти, вирішує спосіб доставки — відділення, магазин або вписана
   адреса. Поля лишаються, ховається саме питання.               */
.np-checkout .np-ship__addr .radio:has(input[name='payment_address']),
.np-checkout .np-ship__addr #payment-existing { display: none; }

.np-checkout .np-ship__addr fieldset { margin: 0; }
.np-checkout .np-ship__addr legend { display: none; }
.np-checkout .np-ship__addr br { display: none; }

/* Спосіб доставки — перше питання кроку.

   Від відповіді залежить решта: самовивозу адреса не потрібна взагалі,
   «Новій пошті» треба відділення, «Укрпошті» — ще й індекс. Тому поля
   під переліком показуються за обраним способом, а не всі відразу.   */

.np-checkout .np-ship__top { margin-bottom: 20px; }
.np-checkout .np-ship__pick { margin-bottom: 0; }

.np-checkout .np-ship__addr { display: none; }
.np-checkout .np-ship--nova .np-ship__addr,
.np-checkout .np-ship--ukr .np-ship__addr { display: block; }

/* Вибір міста й відділення «Нової пошти».

   Замість полів рушія — два списки з довідника перевізника. Самі поля
   не зникають, а ховаються: обране лягає в них, і замовлення
   складається як завжди. Якщо довідник не відповів, крок повертає ті
   поля назад — заповнити адресу вручну краще, ніж не замовити.        */

.np-ship__np { display: none; margin-top: 18px; }
.np-checkout .np-ship--nova .np-ship__np { display: block; }
.np-checkout .np-ship--nova.np-ship--manual .np-ship__np { display: none; }

.np-checkout .np-ship--nova:has(.np-ship__np) .np-ship__addr { display: none; }
.np-checkout .np-ship--nova.np-ship--manual .np-ship__addr { display: block; }

.np-np__city { position: relative; }

.np-np__list {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 260px;
  margin: 4px 0 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  border: 1.5px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: #FFFFFF;
  box-shadow: 0 12px 28px rgba(18, 35, 63, 0.14);
}

.np-np__list button {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: calc(var(--np-radius-sm) - 3px);
  background: transparent;
  text-align: left;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--np-ink);
}

.np-np__list button:hover,
.np-np__list button:focus {
  background: #F4F7FB;
  color: var(--np-primary);
}

/* Мапа відділень.

   Номер відділення мало що каже, поки не знаєш міста. Мапа відповідає на
   питання, яке стоїть насправді, — яке відділення ближче.             */

.np-np__mapbtn {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--np-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.np-np__mapbtn:hover { color: var(--np-primary-dark); }

.np-np__map {
  height: 340px;
  margin-top: 14px;
  border: 1.5px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  overflow: hidden;
}

/* Позначка своя, а не картинкою з бібліотеки: одного кольору з рештою
   сайту, і видно, яке відділення вже обране. */
.np-np__pin span {
  display: block;
  width: 24px;
  height: 24px;
  border: 2.5px solid #FFFFFF;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--np-primary);
  box-shadow: 0 3px 8px rgba(18, 35, 63, 0.35);
}
.np-np__pin.is-on span { background: var(--np-accent); }

.np-np__pop {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--np-ink);
}

.np-np__take {
  width: 100%;
  padding: 7px 12px;
  font-size: 14px;
}

/* Бібліотека мапи малює свої підказки власним шрифтом і кеглем. */
.np-np__map .leaflet-container { font-family: inherit; font-size: 14px; }

/* Індекс питає тільки «Укрпошта» — «Нова пошта» знає свої відділення
   сама, а магазинові він не потрібен ніде. */
.np-checkout .np-ship--ukr .form-group:has(#input-payment-postcode) { display: block; }

.np-ship__place {
  display: none;
  flex-direction: column;
  gap: 3px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--np-radius-sm);
  background: #F4F7FB;
  font-size: 15px;
  color: var(--np-ink);
}

.np-checkout .np-ship--pickup .np-ship__place { display: flex; }

.np-ship__place b { font-size: 14px; font-weight: 700; color: var(--np-muted); }
.np-ship__hours { color: var(--np-muted); }

/* Контакти того, хто вже увійшов.

   Замість форми — те, що лежить в обліковому записі: переписувати його
   вручну нема потреби, а бачити, на кого оформлюється замовлення,
   треба.                                                              */

.np-cinfo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 14px 16px;
  border-radius: var(--np-radius-sm);
  background: #F4F7FB;
}

.np-cinfo__title {
  width: 100%;
  font-size: 15px;
  color: #12233F;
}

.np-cinfo__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 15px;
  color: #46566F;
}

.np-cinfo__link {
  margin-left: auto;
  font-weight: 700;
  color: var(--np-primary);
}

/* Поля, яких магазин не питає.

   «Компанія» й «Адреса 2» дитячому взуттю не потрібні, індекс для
   України рушій і так не вимагає, а країна одна — вона й стоїть у полі
   за замовчуванням. Замість чотирьох зайвих рядків у формі лишається
   те, без чого не привезти: імʼя, телефон, місто, адреса, область.

   Ховаємо, а не прибираємо з шаблону: поля лишаються в розмітці й
   надсилаються як є, а скрипт рушія далі знаходить країну, щоб
   підтягнути перелік областей. Повернути будь-яке — прибрати рядок
   звідси, і воно на місці.

   Ті самі поля є і в платіжній адресі, і в адресі доставки — id у них
   різняться лише префіксом.                                          */
.np-checkout .form-group:has(#input-payment-company),
.np-checkout .form-group:has(#input-payment-address-2),
.np-checkout .form-group:has(#input-payment-postcode),
.np-checkout .form-group:has(#input-payment-country),
.np-checkout .form-group:has(#input-shipping-company),
.np-checkout .form-group:has(#input-shipping-address-2),
.np-checkout .form-group:has(#input-shipping-postcode),
.np-checkout .form-group:has(#input-shipping-country) { display: none; }

/* Галочка «адреса доставки збігається з платіжною».

   Питання має сенс, поки адрес дві. У нас вона одна — та, куди везти,
   — і кроку з другою адресою немає взагалі. Тож галочка лишається в
   розмітці позначеною (рушій її читає), але з очей прибрана.        */
.np-checkout .checkbox:has(input[name='shipping_address']) { display: none; }

/* ── вибір із кількох: спосіб оформлення, доставки, оплати ─────────────
   Рушій малює їх звичайними радіокнопками в рядок тексту. Пальцем у таку
   влучити важко, тож кожен варіант стає рядком, який натискається
   цілком.                                                             */

.np-checkout .radio,
.np-checkout .checkbox { margin: 0 0 8px; }

.np-checkout .radio label,
.np-checkout .checkbox label {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-card);
  font-size: 15px;
  cursor: pointer;
}
.np-checkout .radio label:hover,
.np-checkout .checkbox label:hover { border-color: var(--np-primary); background: var(--np-primary-soft); }

.np-checkout .radio input[type="radio"],
.np-checkout .checkbox input[type="checkbox"] {
  position: static;
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--np-primary);
}

/* ── кнопки кроку ────────────────────────────────────────────────────── */

.np-checkout .buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.np-checkout .buttons .pull-left,
.np-checkout .buttons .pull-right { float: none; }

.np-checkout .btn-primary,
.np-checkout input[type="button"].btn-primary {
  height: 46px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--np-radius-sm);
  background: var(--np-accent);
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
}
.np-checkout .btn-primary:hover,
.np-checkout .btn-primary:focus { background: var(--np-accent-dark); }

.np-checkout .btn-default {
  height: 46px;
  padding: 0 20px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-card);
  font-size: 15px;
  font-weight: 600;
  color: var(--np-muted);
}

/* ── підсумок на кроці підтвердження ─────────────────────────────────── */

.np-checkout .table { margin-bottom: 0; font-size: 14.5px; }
.np-checkout .table > thead > tr > td,
.np-checkout .table > tbody > tr > td,
.np-checkout .table > tfoot > tr > td {
  padding: 12px 10px;
  border-color: var(--np-line);
  vertical-align: middle;
}
.np-checkout .table > thead > tr > td { font-weight: 700; color: var(--np-muted); }
.np-checkout .table-responsive { border: 0; }

.np-checkout .alert {
  margin-bottom: 16px;
  padding: 13px 15px;
  border: 1px solid var(--np-line);
  border-left: 3px solid var(--np-primary);
  border-radius: var(--np-radius-sm);
  background: var(--np-card);
  font-size: 14.5px;
  color: var(--np-ink);
}
.np-checkout .alert-danger { border-left-color: var(--np-sale); }
.np-checkout .alert-success { border-left-color: #2F8F46; }

@media (max-width: 767px) {
  .np-checkout .panel-title,
  .np-checkout .panel-title > a { padding: 14px 16px; font-size: 15px; }
  .np-checkout .panel-body { padding: 4px 16px 16px; }
  .np-checkout .form-control { font-size: 16px; } /* менше 16px — iOS сам наближає сторінку */
  .np-checkout .buttons { flex-direction: column-reverse; }
  .np-checkout .buttons .btn { width: 100%; }
}

/* ── останній крок оформлення ─────────────────────────────────────────── */

.np-confirm { margin-bottom: 18px; }

.np-confirm__item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--np-line);
}
.np-confirm__item:first-child { border-top: 0; padding-top: 4px; }

.np-confirm__info { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.np-confirm__name { font-size: 15px; font-weight: 700; color: var(--np-ink); line-height: 1.4; }
.np-confirm__name:hover { color: var(--np-primary); }
.np-confirm__opts { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: var(--np-muted); }
.np-confirm__opts b { color: var(--np-ink); font-weight: 700; }

.np-confirm__qty { flex-shrink: 0; font-size: 13.5px; color: var(--np-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.np-confirm__sum { flex-shrink: 0; min-width: 90px; text-align: right; font-size: 15.5px; font-weight: 800; font-variant-numeric: tabular-nums; }

.np-confirm__totals { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--np-line); }

@media (max-width: 560px) {
  /* Ціна під назвою: у рядок із нею вона лишає назві два слова. */
  .np-confirm__item { flex-wrap: wrap; gap: 4px 14px; }
  .np-confirm__info { flex-basis: 100%; }
  .np-confirm__sum { margin-left: auto; min-width: 0; }
}

/* ── згода з умовами на кроці оплати ──────────────────────────────────────
   Остання дія перед замовленням, тож вона стоїть окремим блоком над
   кнопкою, а не приміткою збоку від неї. Прапорець ліворуч, текст
   праворуч, натискається весь рядок.                                   */

.np-agree {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-primary-soft);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--np-ink);
  font-weight: 400;
  cursor: pointer;
}
.np-agree:hover { border-color: var(--np-primary); }

.np-agree input[type="checkbox"] {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  margin: 1px 0 0;
  accent-color: var(--np-primary);
}

.np-agree a { color: var(--np-primary); text-decoration: underline; }
.np-agree a b { font-weight: 700; }

/* Підпис і поле коментаря — як у решті кроків */
.np-step__field { margin-top: 18px; }
.np-step__label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--np-ink);
}
.np-step__lead { margin: 0 0 12px; font-size: 14.5px; color: var(--np-muted); }

.np-checkout .radio label em { font-style: normal; color: var(--np-muted); }

/* Вікно з умовами, яке відкриває посилання згоди */
.np-checkout ~ .modal .modal-content,
body.np .modal-content {
  border: 0;
  border-radius: var(--np-radius);
  box-shadow: 0 20px 60px rgba(18, 35, 63, 0.28);
}
body.np .modal-header { border-bottom: 1px solid var(--np-line); }
body.np .modal-title { font-size: 17px; font-weight: 700; color: #12233F; }
body.np .modal-body { font-size: 14.5px; line-height: 1.65; }

/* ── вікно з умовами ──────────────────────────────────────────────────────
   Рушій збирає його скриптом і кладе всередину голий текст статті — без
   обгортки й без класу. Тому типографіку статті вище описано і для
   .modal-body: інакше заголовки в ньому виходили дрібнішими за абзаци.

   Саме вікно теж лишається на Bootstrap, тож тут тільки вигляд.        */

body.np .modal-dialog { margin: 24px auto; max-width: 680px; }

body.np .modal-content {
  border: 0;
  border-radius: var(--np-radius);
  box-shadow: 0 24px 70px rgba(18, 35, 63, 0.30);
}

body.np .modal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--np-line);
}
body.np .modal-title {
  flex-grow: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #12233F;
}

/* Хрестик рушія — це <button class="close"> з символом «×» і стилями
   Bootstrap: майже прозорий і завбільшки з літеру. */
body.np .modal-header .close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--np-radius-sm);
  background: none;
  opacity: 1;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--np-muted);
  text-shadow: none;
  cursor: pointer;
}
body.np .modal-header .close:hover { background: var(--np-primary-soft); color: var(--np-primary); }

/* Умови довгі. Хай гортається саме вікно, а не сторінка під ним:
   інакше зникає і заголовок, і хрестик, яким його закривають. */
body.np .modal-body {
  max-height: min(70vh, 560px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 22px 24px;
}

@media (max-width: 767px) {
  body.np .modal-dialog { margin: 12px; }
  body.np .modal-header { padding: 15px 16px; }
  body.np .modal-body { max-height: 74vh; padding: 16px; }
}

/* Пояснення, коли пошук здогадався, що саме мали на увазі */
.np-search-note {
  margin: -8px 0 18px;
  padding: 12px 15px;
  border: 1px solid var(--np-line);
  border-left: 3px solid var(--np-accent);
  border-radius: var(--np-radius-sm);
  background: var(--np-card);
  font-size: 14.5px;
  color: var(--np-muted);
}
.np-search-note b { color: var(--np-ink); font-weight: 700; }

/* ── сторінка, зібрана з фільтра ──────────────────────────────────────── */

/* «Демісезонне взуття» та подібні лишились сторінками заради адрес, яким
   чотирнадцять років. Підпис пояснює, чому тут не весь каталог, і дає
   вихід до решти — інакше сторінка виглядає як глухий кут. */
.np-derived {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: -4px 0 18px;
  font-size: 14.5px;
  color: var(--np-muted);
}

.np-derived__chip {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--np-primary-soft);
  font-weight: 600;
  color: var(--np-primary);
}

/* Посилання відсунуте від фішки, щоб не читалось як її частина. */
.np-derived__all {
  margin-left: 4px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .np-derived { font-size: 13.5px; }
}

/* ── вхід і реєстрація ────────────────────────────────────────────────── */

/* Одна картка на дві форми. Видима половина залежить від data-mode на
   обгортці — його ставить або сервер (за маршрутом), або перемикач. */
.np-auth {
  max-width: 560px;
  margin: 0 auto 40px;
  padding: 26px 28px 30px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
}

.np-auth__panel { display: none; }
.np-auth[data-mode="login"] .np-auth__panel[data-panel="login"],
.np-auth[data-mode="register"] .np-auth__panel[data-panel="register"],
.np-auth[data-mode="forgotten"] .np-auth__panel[data-panel="forgotten"] { display: block; }

/* Перемикач. Обидві половини рівні за вагою: заздалегідь невідомо, чого
   людина прийшла, а підказувати «зареєструйтесь» тому, хто вже має
   обліковий запис, — зайвий крок. */
.np-auth__tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  padding: 4px;
  border-radius: 999px;
  background: var(--np-primary-soft);
}

.np-auth__tab {
  flex: 1 1 0;
  padding: 10px 12px;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  text-align: center;
  color: var(--np-primary);
  transition: background 0.15s ease, color 0.15s ease;
}
.np-auth__tab:hover { color: var(--np-primary); }

.np-auth[data-mode="login"] .np-auth__tab[data-panel="login"],
.np-auth[data-mode="register"] .np-auth__tab[data-panel="register"] {
  background: var(--np-card);
  color: var(--np-ink);
  box-shadow: 0 1px 3px rgba(18, 35, 63, 0.12);
}

.np-auth__title { margin: 0 0 6px; font-size: 21px; font-weight: 700; }
.np-auth__note { margin: 0 0 20px; font-size: 14px; color: var(--np-muted); }

/* .np-opt__field обмежене 340 пікселями — це розмір під вузьку колонку
   картки товару. У картці входу поле займає всю ширину. */
.np-auth .np-opt__field { max-width: none; }

.np-auth__row { display: block; margin-bottom: 14px; }
.np-auth__row > span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }

/* Ім'я з прізвищем і пароль із підтвердженням стоять поруч: короткі
   поля на всю ширину роблять форму вищою, ніж вона є. */
.np-auth__pair { display: flex; flex-wrap: wrap; gap: 0 14px; }
.np-auth__pair > .np-auth__row { flex: 1 1 200px; }

.np-auth__error { display: block; margin-top: 5px; font-size: 13px; font-style: normal; color: #A33418; }

/* Та сама картка, вбудована в крок оформлення: рамка й тінь там зайві —
   вона вже лежить усередині картки кроку. */
.np-auth--inline {
  max-width: none;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  background: none;
}
.np-auth--inline .np-auth__note--after { margin: 14px 0 18px; }
.np-auth--inline .radio { margin: 0 0 8px; }

/* Кнопка кроку — праворуч: це рух уперед, а рух уперед у формах іде
   в той самий бік, що й читання. Колір накидаємо прямо: у рушієвій
   розмітці кроку своя кнопка з власними стилями, і поряд із нею наша
   не має вгадувати, хто виявиться специфічнішим. */
.np-auth__foot { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 18px; }
/* «Забули пароль?» стоїть у тому ж рядку, що й кнопка: разом вони
   читаються як одна пара «увійти або відновити», а не як два кроки
   один під одним. */
.np-auth__foot .np-auth__forgot { margin: 0 auto 0 0; }
.np-auth--inline .np-auth__submit {
  width: auto;
  min-width: 200px;
  margin-top: 0;
  background: var(--np-accent);
  color: #FFFFFF;
}
.np-auth--inline .np-auth__submit:hover,
.np-auth--inline .np-auth__submit:focus { background: var(--np-accent-dark); color: #FFFFFF; }

.np-auth__check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--np-muted);
  cursor: pointer;
}
.np-auth__check input { margin-top: 3px; flex: 0 0 auto; }
.np-auth__check a { font-weight: 600; }

.np-auth__choices { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }

.np-auth__forgot { display: inline-block; margin-bottom: 18px; font-size: 14px; }

/* Повернення до входу. Під кнопкою і приглушене: це вихід із гілки, а не
   другий рівноцінний варіант. */
.np-auth__back {
  display: block;
  margin-top: 16px;
  font-size: 14px;
  text-align: center;
  color: var(--np-muted);
}
.np-auth__back:hover { color: var(--np-primary); }

/* .np-btn — inline-flex, тож на всю ширину підпис поїхав би ліворуч. */
.np-auth__submit { width: 100%; margin-top: 6px; justify-content: center; }

/* Обов'язкова згода помітна ще до відправки. */
.np-auth__check--required > span::after {
  content: " *";
  font-weight: 700;
  color: var(--np-sale);
}

@media (max-width: 480px) {
  .np-auth { padding: 20px 16px 24px; border-left: 0; border-right: 0; border-radius: 0; }
  .np-auth__title { font-size: 19px; }
}

/* ── сторінка «готово» ────────────────────────────────────────────────── */

.np-done {
  max-width: 620px;
  margin: 8px auto 48px;
  padding: 34px 32px 36px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
  text-align: center;
}

/* Позначка, а не картинка: вона має читатись за долю секунди й не
   залежати від того, чи встиг завантажитись шрифт зі значками. */
.np-done__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--np-primary-soft);
  color: var(--np-primary);
}

.np-done__title { margin: 0 0 14px; font-size: 24px; font-weight: 700; }

.np-done__text { font-size: 15px; line-height: 1.6; color: var(--np-muted); }
.np-done__text p { margin: 0 0 12px; }
.np-done__text p:last-child { margin-bottom: 0; }
.np-done__text a { font-weight: 600; }

.np-done__btn { margin-top: 24px; }

@media (max-width: 480px) {
  .np-done { padding: 26px 18px 28px; border-left: 0; border-right: 0; border-radius: 0; }
  .np-done__title { font-size: 20px; }
}

/* ── особистий кабінет ────────────────────────────────────────────────── */

/* Плитки самі вирішують, скільки їх у ряд: розділів у кабінеті сім, і
   жорстка сітка лишала б порожнє місце в останньому ряду. */
.np-acct {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin: 18px 0 26px;
}

.np-acct__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.np-acct__item:hover {
  border-color: var(--np-primary);
  box-shadow: 0 8px 20px rgba(18, 35, 63, 0.08);
}

.np-acct__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--np-primary-soft);
  color: var(--np-primary);
}

.np-acct__name { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--np-ink); }

/* Рідковживані розділи. Вони лишаються доступними, але не мають виглядати
   рівнею історії замовлень. */
.np-acct__more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 18px;
  border-top: 1px solid var(--np-line);
  margin-bottom: 40px;
  font-size: 14px;
}
.np-acct__more a { color: var(--np-muted); }
.np-acct__more a:hover { color: var(--np-primary); }

/* Вихід у тому ж рядку, але праворуч: серед назв розділів він єдиний,
   що не веде на сторінку, а щось робить. */
.np-acct__logout { margin-left: auto; font-weight: 700; }

@media (max-width: 575px) {
  .np-acct__logout { margin-left: 0; }
}

@media (max-width: 480px) {
  .np-acct { grid-template-columns: 1fr; gap: 10px; }
  .np-acct__item { padding: 14px 16px; }
}

/* ── сторінки кабінету на стандартній розмітці ────────────────────────── */

/* Історія замовлень, адреси, закладки, повернення, зміна даних — ці
   сторінки рушій малює сам. Переписувати кожен шаблон означало б
   переносити руками десятки полів, а поле, загублене при переносі, ламає
   сторінку мовчки: форма просто не проходить перевірку, і людина не
   бачить, чого від неї хочуть. Тому тут міняється вигляд, а не розмітка. */

body.np #content fieldset { margin: 0; padding: 0; border: 0; }
body.np #content legend {
  width: auto;
  margin: 24px 0 14px;
  padding: 0;
  border: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--np-ink);
}
body.np #content fieldset:first-of-type legend { margin-top: 0; }

/* Підпис над полем, а не ліворуч. У вузькій колонці підпис з'їдав третину
   рядка, а на телефоні ще й обривався посеред слова. */
body.np #content .form-horizontal .form-group { max-width: 560px; margin: 0 0 14px; }
body.np #content .form-horizontal .control-label {
  float: none;
  width: auto;
  padding: 0 0 6px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
}
body.np #content .form-horizontal .form-group > div[class^="col-"],
body.np #content .form-horizontal .form-group > div[class*=" col-"] {
  float: none;
  width: auto;
  padding: 0;
}

body.np #content .form-control { height: 46px; padding: 11px 14px; font-size: 15px; }
body.np #content textarea.form-control { height: auto; }
body.np #content .text-danger { margin-top: 5px; font-size: 13px; color: var(--np-sale); }
body.np #content .help-block { margin: 5px 0 0; font-size: 13px; color: var(--np-faint); }
body.np #content .radio, body.np #content .checkbox { margin: 0 0 8px; }
body.np #content .radio label, body.np #content .checkbox label { font-size: 14.5px; }

/* Рамка навколо кожної клітинки перетворює перелік замовлень на
   бухгалтерську відомість. Лишається лінія між рядками. */
body.np #content .table {
  margin-bottom: 18px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--np-card);
  overflow: hidden;
}
body.np #content .table > thead > tr > td,
body.np #content .table > thead > tr > th {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--np-line);
  background: #F7F9FC;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--np-muted);
  white-space: nowrap;
}
body.np #content .table > tbody > tr > td,
body.np #content .table > tfoot > tr > td {
  padding: 13px 14px;
  border: 0;
  border-top: 1px solid var(--np-line);
  font-size: 14.5px;
  vertical-align: middle;
}
body.np #content .table > tbody > tr:first-child > td { border-top: 0; }
body.np #content .table-hover > tbody > tr:hover { background: var(--np-primary-soft); }
body.np #content .table img { border-radius: var(--np-radius-sm); }
body.np #content .table .price s { color: var(--np-faint); }
body.np #content .table .price b { color: var(--np-sale); }
body.np #content .table-responsive { border: 0; margin-bottom: 0; }

/* Кнопки внизу сторінки стояли по кутах через float. Тепер це один ряд,
   який на вузькому екрані переноситься, а не накладається сам на себе. */
body.np #content .buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 22px 0 8px;
}
body.np #content .buttons:before,
body.np #content .buttons:after { content: none; }
body.np #content .buttons .pull-left { float: none; }
body.np #content .buttons .pull-right { float: none; margin-left: auto; }

/* Дрібні кнопки дій у таблицях: перегляд, видалення, кошик. */
body.np #content .btn-info,
body.np #content .btn-danger,
body.np #content .btn-warning,
body.np #content .btn-success {
  border: 0;
  border-radius: var(--np-radius-sm);
  font-weight: 600;
}
body.np #content .btn-info { background: var(--np-primary-soft); color: var(--np-primary); }
body.np #content .btn-info:hover { background: var(--np-primary); color: #FFFFFF; }
body.np #content .btn-danger { background: #FCEBE7; color: #A33418; }
body.np #content .btn-danger:hover { background: var(--np-sale); color: #FFFFFF; }

body.np #content .alert-success { border: 0; background: #E8F5EC; color: #1E6B36; }
body.np #content .alert-danger { border: 0; background: #FCEBE7; color: #A33418; }

/* Гортання сторінок — той самий вигляд, що в каталозі. */
body.np #content .pagination { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
body.np #content .pagination > li > a,
body.np #content .pagination > li > span {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-card);
  color: var(--np-ink);
  font-size: 14px;
}
body.np #content .pagination > .active > span,
body.np #content .pagination > .active > a {
  border-color: var(--np-primary);
  background: var(--np-primary);
  color: #FFFFFF;
}
body.np #content .pagination > li > a:hover { border-color: var(--np-primary); color: var(--np-primary); }

@media (max-width: 767px) {
  body.np #content legend { font-size: 16px; }
  body.np #content .table > thead > tr > td,
  body.np #content .table > tbody > tr > td { padding: 11px 10px; font-size: 13.5px; }
  body.np #content .buttons .pull-right { margin-left: 0; width: 100%; }
  body.np #content .buttons .pull-right .btn { width: 100%; }
}

/* Бічний перелік розділів кабінету. Стандартно це список Bootstrap із
   рамкою навколо кожного пункту — тут одна картка з лініями всередині,
   як перелік категорій у каталозі. */
body.np #column-left > .list-group,
body.np #column-right > .list-group {
  margin-bottom: 20px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
  overflow: hidden;
}
body.np #column-left > .list-group > .list-group-item,
body.np #column-right > .list-group > .list-group-item {
  padding: 12px 16px;
  border-width: 1px 0 0;
  border-radius: 0;
}
body.np #column-left > .list-group > .list-group-item:first-child,
body.np #column-right > .list-group > .list-group-item:first-child { border-top: 0; }
body.np #column-left > .list-group > a.list-group-item:hover,
body.np #column-right > .list-group > a.list-group-item:hover {
  background: var(--np-primary-soft);
  color: var(--np-primary);
}

/* Порожні розділи кабінету.
   
   У новому магазині вони порожні всі: ні замовлень, ні адрес, ні
   закладок. Рушій виводить один рядок тексту й кнопку в кутку — сторінка
   виглядає недоробленою саме тоді, коли її бачать уперше. */
body.np #account-order #content > p,
body.np #account-wishlist #content > p,
body.np #account-address #content > p,
body.np #account-return #content > p,
body.np #account-download #content > p,
body.np #account-transaction #content > p,
body.np #account-reward #content > p,
body.np #account-recurring #content > p {
  margin: 18px 0 0;
  padding: 40px 24px;
  border: 1px dashed var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
  font-size: 15px;
  text-align: center;
  color: var(--np-muted);
}

/* ── картка навколо сторінок кабінету ─────────────────────────────────── */

/* Ці сторінки рушій малює сам, і зовні вони лишались голими: заголовок і
   поля просто на тлі сторінки, без нічого. Поруч особистий кабінет із
   плитками — і різниця била в очі.
   
   Картку робимо стилями, а не переписуванням шаблонів: у формах зміни
   даних і адреси десятки полів, серед них додаткові поля покупця з
   адмінки. Загублене при переносі поле не видно одразу — воно просто не
   дає зберегти форму. */
body.np #account-edit #content,
body.np #account-password #content,
body.np #account-address #content,
body.np #account-order #content,
body.np #account-wishlist #content,
body.np #account-return #content,
body.np #account-newsletter #content,
body.np #account-download #content,
body.np #account-transaction #content,
body.np #account-reward #content,
body.np #account-recurring #content,
body.np #account-affiliate #content,
body.np #account-tracking #content,
body.np #account-voucher #content {
  padding: 26px 28px 30px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-card);
  margin-bottom: 40px;
}

/* Заголовок — перший рядок картки, тож зайвий відступ згори прибираємо. */
body.np [id^="account-"].container #content > h1:first-of-type,
body.np [id^="account-"].container #content > h2:first-of-type { margin-top: 0; font-size: 24px; }

/* Таблиця всередині картки не потребує власної рамки — вийшла б рамка в
   рамці. Лишаються самі лінії між рядками, від краю до краю картки. */
body.np [id^="account-"].container #content .table {
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
}
body.np [id^="account-"].container #content .table > thead > tr > td,
body.np [id^="account-"].container #content .table > thead > tr > th { background: none; padding-left: 0; padding-right: 0; }
body.np [id^="account-"].container #content .table > tbody > tr > td { padding-left: 0; padding-right: 0; }
body.np [id^="account-"].container #content .table-hover > tbody > tr:hover { background: none; }
body.np [id^="account-"].container #content .table-responsive { margin: 0 0 4px; }

/* Кнопки внизу картки відокремлені лінією: інакше вони зливаються з
   останнім рядком таблиці або поля. */
body.np [id^="account-"].container #content .buttons {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--np-line);
}

@media (max-width: 767px) {
  body.np #account-edit #content,
  body.np #account-password #content,
  body.np #account-address #content,
  body.np #account-order #content,
  body.np #account-wishlist #content,
  body.np #account-return #content,
  body.np #account-newsletter #content,
  body.np #account-download #content,
  body.np #account-transaction #content,
  body.np #account-reward #content,
  body.np #account-recurring #content,
  body.np #account-affiliate #content,
  body.np #account-tracking #content,
  body.np #account-voucher #content {
    padding: 20px 18px 24px;
  }
  body.np [id^="account-"].container #content > h1:first-of-type,
  body.np [id^="account-"].container #content > h2:first-of-type { font-size: 20px; }
}

/* Bootstrap компенсує від'ємні поля рядка внутрішніми відступами колонок.
   Ці відступи забрала картка, тож рядок вирівнюємо самі — інакше картка
   стирчала б на 15 пікселів лівіше за хлібні крихти над нею. */
body.np [id^="account-"].container > .row { margin-left: 0; margin-right: 0; }

/* ── серце «в улюблені» ───────────────────────────────────────────────── */

/* На картці — правий верхній кут, поверх фото. Кнопка з власним тлом, бо
   під нею може бути і світле фото, і темне: сірий контур на білому колі
   видно завжди. */
.np-wish {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(18, 35, 63, 0.12);
  color: #8A94A6;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.12s ease;
}
.np-wish:hover { color: var(--np-sale); }
.np-wish:active { transform: scale(0.92); }

/* Товар в улюблених — серце залите, а не просто підфарбоване: контур
   іншого кольору читається як наведення, а не як стан. */
.np-wish.is-on { color: var(--np-sale); }
.np-wish.is-on svg { fill: currentColor; }

/* На сторінці товару серце стоїть у ряд із кнопкою кошика, тож там воно
   звичайна кнопка теми, а не кружечок поверх фото. */
.np-prod__wish {
  position: static;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  background: var(--np-card);
  box-shadow: none;
}
.np-prod__wish.is-on { border-color: var(--np-sale); }

@media (max-width: 480px) {
  .np-wish { top: 8px; right: 8px; width: 32px; height: 32px; }
  .np-wish svg { width: 18px; height: 18px; }
}

/* Кнопка під списком закладок. */
.np-wishlist__foot { margin: 26px 0 48px; }

/* Лічильник біля серця в шапці — такий самий, як у кошика. */
.np-wishbtn { position: relative; }
.np-wishbtn__badge {
  position: absolute;
  top: 2px;
  right: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--np-accent);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.np-wishbtn__badge[hidden] { display: none; }

/* Обгортка кнопки кошика існує лише заради розмітки — вона ховає кнопку
   від селектора common.js. Для розкладки її бути не повинно. */
.np-cart__toggle { display: contents; }

/* Поле відгуку — на всю ширину блоку. Обмеження в 340 пікселів у
   .np-opt__field розраховане на вузьку колонку картки товару, тут воно
   лишало від поля третину. */
.np-review .np-opt__field { max-width: none; }
.np-review textarea.np-opt__field { min-height: 130px; resize: vertical; }

/* Оцінка ліворуч, кнопка праворуч, в одному ряду. */
.np-review__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 6px;
}

@media (max-width: 480px) {
  .np-review__foot { gap: 12px; }
  .np-review__foot .np-btn { flex: 1 1 100%; justify-content: center; }
}

/* ── Оплата за реквізитами ───────────────────────────────────────────

   Реквізити людина переписує в банківський застосунок, тому це не текст,
   а таблиця: підпис ліворуч, значення праворуч, кожне в окремому рядку.
   IBAN моноширинним — так видно кожен символ окремо, і помилку в ньому
   помічають до переказу, а не через тиждень, коли гроші повернуться. */
.np-iban__lead {
  margin: 0 0 14px;
  color: var(--np-muted);
}

.np-iban__list {
  margin: 0;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  overflow: hidden;
}

.np-iban__row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--np-line);
  align-items: baseline;
}

.np-iban__row:first-child { border-top: 0; }

.np-iban__label {
  margin: 0;
  font-weight: 600;
  color: var(--np-muted);
  font-size: 14px;
}

.np-iban__value {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}

.np-iban__text {
  font-weight: 700;
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}

.np-iban__copy {
  border: 0;
  background: none;
  padding: 0;
  color: var(--np-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.np-iban__copy:hover { color: var(--np-primary-dark); text-decoration: underline; }

.np-iban__note {
  margin: 12px 0 0;
  color: var(--np-muted);
  font-size: 14px;
}

@media (max-width: 560px) {
  .np-iban__row { grid-template-columns: minmax(0, 1fr); }
}

/* ── Передоплата ─────────────────────────────────────────────────────

   На сторінці LiqPay покупець побачить не вартість замовлення, а лише
   передоплату. Рядок із двома сумами тут для того, щоб це не виглядало
   помилкою в рахунку, — тому він великий і стоїть до кнопки. */
.np-prepay__lead {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
}

.np-prepay__note {
  margin: 0 0 4px;
  color: var(--np-muted);
  font-size: 14px;
}

/* Чим платити передоплату. Вибір із двох доріг до тієї самої суми, тому
   він стоїть між поясненням і кнопкою — там, де людина вже знає, скільки
   платить, і лишилось вирішити тільки як. */
.np-prepay__ways {
  margin: 14px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
  background: var(--np-primary-soft);
}

.np-prepay__waystitle {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--np-muted);
}

.np-prepay__way {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}

.np-prepay__way label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}

.np-prepay__way input { margin: 0; }

.np-prepay__iban[hidden] { display: none; }

/* ── Довжина устілки ─────────────────────────────────────────────────

   Таблиця двох колонок: розмір і сантиметри. Розмірів буває більше
   десятка, тож рядки вузькі, а числа — моноширинними цифрами, щоб
   стовпчик читався згори вниз, а не стрибав. */
.np-insole {
  overflow-x: auto;
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius);
}

.np-insole table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.np-insole th,
.np-insole td {
  padding: 9px 16px;
  text-align: left;
  border-top: 1px solid var(--np-line);
}

.np-insole thead th {
  border-top: 0;
  background: var(--np-primary-soft);
  color: var(--np-primary);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.np-insole tbody th {
  width: 40%;
  font-weight: 700;
}

.np-insole tbody td { color: var(--np-muted); }