/* ============================================================================
   site.tools2.work — вітрина USA TOOLS

   Кольори — з logo.svg і більше нізвідки (див. BRAND.md):
     синій   #22347e — головний, дії та навігація;
     червоний #c31a39 — акцент: ціна, кнопка «Купити», активний стан;
     чорний  #474747 — текст.

   Мобільний вигляд первинний: сітка каталогу — 2 картки в ряд, колонка фільтрів
   висувається поверх списку. Ширші екрани лише додають колонок.

   ПРАВИЛО: після кожної правки цього файлу підняти `?v=` у layout.php — інакше
   змін не видно через кеш браузера.
   ========================================================================== */

:root {
  --blue:  #22347e;
  --blue-d:#182559;
  --blue-l:#3d55b8;
  --red:   #c31a39;
  --red-d: #9d142d;
  --ink:   #474747;
  --ink-2: #6b6b6b;
  --ink-3: #90959c;
  --line:  #e3e6ec;
  --line-2:#eef0f5;
  --bg:    #ffffff;
  --bg-2:  #f5f7fa;
  --ok:    #1a8f4c;
  --rad:   10px;
  --pad:   14px;
  --hdr-h: 58px;
  --wrap:  1180px;
  /* Пропорція КОРОБКИ під фото товару. Фото складу — завжди 620×500 (мініатюра
     `*_t.jpg` — те саме 400×323), і поки коробка стояла квадратною, `contain`
     вписував ландшафтний кадр по ширині, а решту висоти лишав білою смугою в
     п'яту частину картки. Число одне на весь сайт: зміниться формат фото —
     міняти тут, а не в шести правилах. */
  --ph-ar: 620 / 500;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-wrap: break-word;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--red); }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

.sr-only, .skip {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: 6px; left: 6px; width: auto; height: auto; clip: auto;
  padding: 8px 14px; background: var(--blue); color: #fff; border-radius: 8px; z-index: 60;
}

.muted { color: var(--ink-3); }
.sm    { font-size: 13px; }

/* ─────────────────────────────── Шапка ─────────────────────────────── */
/* Шапка мусить бути ЗАПОВНЕНОЮ, а не смужкою з логотипом і двома кнопками: на
   широкому екрані в ній стоїть великий логотип із підписом, посередині — пошук,
   справа — мова й РОЗГОРНУТИЙ кошик («0 товарів»). На телефоні той самий каркас
   переноситься: логотип і кошик у рядок, пошук — другим рядком. */

.hdr {
  position: sticky; top: 0; z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.hdr-in {
  max-width: var(--wrap); margin: 0 auto;
  padding: 8px var(--pad);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.hdr-logo { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
/* На вузькому екрані логотип менший — рівно щоб пошук лишився в ТОМУ Ж рядку, а не
   з'їхав під шапку окремою смугою (див. коментар до `.srch`). */
.logo { height: 34px; width: auto; display: block; }
.logo.sm { height: 34px; }

/* Підпис біля логотипа: домен і одне речення про суть магазину. На телефоні його
   нема — там на нього просто нема ширини, і логотип важливіший. */
.hdr-sub { display: none; line-height: 1.25; }
.hdr-sub b {
  display: block; font-size: 15px; font-weight: 800; letter-spacing: .02em; color: var(--blue);
}
.hdr-sub i { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-2); }

/* ── Телефон і години прийому в шапці ──
   На ВУЗЬКОМУ екрані це ОКРЕМИЙ РЯДОК під логотипом і пошуком (`flex-basis:100%`,
   `order:5` — після кошика). У верхньому рядку телефона ширини нема ні на що, крім
   логотипа, поля пошуку й кошика; втиснути туди ще й номер означало б стиснути
   пошук до півдолоні. А сам номер на телефоні потрібен найбільше — саме звідти
   дзвонять одним дотиком, — тож ховати його не можна, тільки переносити.
   Рядок при цьому компактний: пояснення дрібне зліва, номер великий справа. */
.hdr-call {
  order: 5; flex: 1 1 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 7px; margin-top: 1px; border-top: 1px solid var(--line);
}
/* ── Хрестик «прибрати блок» ──
   Стоїть ПЕРШИМ у рядку, зліва, і `align-items:center` самої `.hdr-call` ставить
   його рівно навпроти тексту по висоті. Червоне коло, а не сірий значок: це
   єдина дія в рядку, яку можна не помітити, а сірий хрестик поруч із зеленим
   номером читався б як частина оформлення. Фірмовий червоний тут доречний рівно
   тому, чому й у лічильнику фільтрів — це «дія», а не «текст».
   Мішень 28px: менше пальцем не влучити, більше — рядок роздувається. */
.hdr-call-x {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: var(--red); color: #fff;
  cursor: pointer;
}
.hdr-call-x svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round;
}
.hdr-call-x:hover { background: #a5162f; }
/* Закритий блок — саме `display:none`, а не прозорість: рядок мусить ЗНИКНУТИ
   разом зі своєю висотою, інакше липка шапка й далі забирає ту саму смугу. */
.hdr-call.off { display: none; }

.hdr-call-t { min-width: 0; line-height: 1.25; }
.hdr-call-t b { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.hdr-call-t i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
/* Номер — ЗЕЛЕНИЙ, а не фірмовий синій чи червоний. Синім у шапці залитий кошик,
   червоним — активний розділ у стрічці нижче; третій елемент тими самими двома
   кольорами злився б з ними в одну строкату смугу. Зелений тут читається як
   «лінія відкрита» і ні з чим на сторінці не конкурує. */
.hdr-tel {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ok); white-space: nowrap;
}
.hdr-tel svg { width: 17px; height: 17px; fill: currentColor; }
.hdr-tel b { font-size: 16px; font-weight: 800; letter-spacing: .01em; }
.hdr-tel:hover { color: var(--ok); text-decoration: underline; }

.hdr-act { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 8px;
  border: 1.5px solid var(--line); border-radius: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--blue);
  background: #fff;
}
.lang:hover { border-color: var(--blue); background: var(--blue); color: #fff; }

.cart-btn {
  display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
  height: 36px; padding: 0 9px; border-radius: 9px;
  background: var(--blue); color: #fff;
}
.cart-btn:hover { background: var(--blue-d); color: #fff; }
.cart-ic { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.cart-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; }
/* Лічильник. На вузькому екрані кошик — сама іконка, тож число сидить наліпкою
   на її куті; АЛЕ якір по центру кута (`right:0` + зсув на половину), а не за
   правий край: інакше тризначне число («121») росло вліво й накривало саму
   іконку. */
.cart-n {
  position: absolute; top: -7px; right: 0; transform: translateX(50%);
  min-width: 18px; height: 18px; padding: 0 5px;
  display: none; align-items: center; justify-content: center;
  background: var(--red); border-radius: 10px;
  font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.cart-btn.has .cart-n { display: flex; }
.cart-tx { display: none; line-height: 1.2; text-align: left; }
.cart-tx b { display: block; font-size: 13px; font-weight: 700; }
.cart-tx i { display: block; font-style: normal; font-size: 11.5px; opacity: .8; white-space: nowrap; }

/* ─────────────────────────────── Пошук ─────────────────────────────── */
/* Пошук живе В ШАПЦІ — на ВСІХ ширинах, у тому самому рядку, що логотип і кошик.
   Доти на вузьких екранах він мав `flex-basis:100%` і `order:3`, тобто ставав
   ОКРЕМИМ рядком під логотипом: шапка виростала вдвічі, а сам пошук читався як
   смуга, що вивалилась із неї (особливо на розгорнутому «фолді», де ширини для
   одного рядка вдосталь). Тепер він стискається (`flex:1 1 120px; min-width:0`)
   разом із рештою, а місце для нього звільнили менший логотип, вужчі «мова» й
   кошик. `flex-wrap` у шапки лишається запобіжником для зовсім вузьких екранів. */

/* Форма — ОДНЕ поле, обидві кнопки сидять НА ЙОГО КРАЯХ (абсолютом усередині
   `.srch`, а поле лишає їм місце внутрішнім падінгом). Окремої широкої синьої
   кнопки «Пошук» більше нема: у шапці вона з'їдала ширину, потрібнішу самому
   полю, а відправляє форму і лупа, і Enter.
   Хрестик очищення показує КЛАС `.has-q` на формі (ставить PHP при заповненому
   `?q=`, далі тримає `shop.js`) — не атрибут `hidden`: він програє
   `display:inline-flex` кнопки. Рідний хрестик WebKit прибираємо, щоб їх не
   стало два. */
.srch { position: relative; flex: 1 1 120px; min-width: 0; order: 0; display: flex; }
.srch input {
  flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 32px 0 33px;
  border: 1.5px solid var(--line); border-radius: 8px; background: #fff;
  font-size: 13.5px;
}
.srch input:focus { outline: none; border-color: var(--blue); }
.srch input::-webkit-search-cancel-button,
.srch input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.srch-go, .srch-clr {
  position: absolute; top: 0; height: 34px; width: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.srch-go { left: 0; color: var(--blue); }
.srch-go:hover { color: var(--blue-d); }
.srch-clr { right: 0; display: none; color: var(--ink-2); }
.srch.has-q .srch-clr { display: inline-flex; }
.srch-clr:hover { color: var(--red); }
.srch svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 2.1; stroke-linecap: round;
}

/* ────────────────────────────── Категорії ────────────────────────────── */
/* Стрічка розділів — суцільна ФІРМОВА СИНЯ смуга з білими підписами: сірий фон
   читався як службовий рядок, а не як головна навігація сайту. Активний розділ
   позначає фірмовий червоний — на синьому він єдиний колір, який лишається
   помітним і не сперечається з ним (червоний ТЕКСТ на синьому не читається, тому
   червона тут сама закладка).

   Стрічка горизонтально прокручується: вісім розділів у стовпчик зʼїли б увесь
   перший екран телефона. Чисел біля назв тут НЕМА свідомо — вони зліплювались із
   назвою («Мережевий інструмент3») і читались як частина слова. */

/* На ВУЗЬКОМУ екрані стрічка стає ВИПАДАЮЧИМ СПИСКОМ (`<details>`): сім розділів,
   що гортаються пальцем, показували два з половиною пункти, а решту треба було
   намацати свайпом — тобто головна навігація сайту існувала на телефоні лише для
   того, хто здогадався її потягнути. Тепер видно, який розділ відкрито, і одним
   дотиком розкривається весь перелік — списком, у стовпчик, без гортання.
   На широкому екрані `<summary>` схований, і лишається та сама стрічка. */

.cats { background: var(--blue); }
.cats-s {
  list-style: none; cursor: pointer;
  max-width: var(--wrap); margin: 0 auto; padding: 11px var(--pad);
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; color: #fff;
}
.cats-s::-webkit-details-marker { display: none; }
.cats-s span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Поточний розділ у згорнутому вигляді — ЧЕРВОНИЙ, тим самим кольором, яким він
   позначений і в розкритому списку: закритий список мусить казати, де ви зараз,
   не гірше за відкритий. Червоний ТЕКСТ на синьому не читається, тому колір несе
   сама таблетка. */
.cats-s.on .cats-cur {
  flex: 0 1 auto; background: var(--red); border-radius: 7px; padding: 3px 10px;
}
/* А в РОЗКРИТОМУ вигляді тієї таблетки нема: список одразу під нею починався
   підсвіченим червоним пунктом із тією самою назвою, і два червоних рядки поспіль
   читались як два різні розділи. Поки список відкритий, заголовок каже просто
   «Категорії», а «де ви зараз» показує підсвічений пункт усередині. */
.cats-s .cats-all { display: none; }
.cats[open] .cats-s.on .cats-cur { display: none; }
.cats[open] .cats-s.on .cats-all { display: block; }
/* Стрілка малюється рамкою, а не символом: у системних шрифтах «▾» різного розміру
   й по-різному зміщений по вертикалі, і на кожному телефоні виглядав би інакше. */
.cats-s i {
  flex: 0 0 auto; width: 9px; height: 9px; margin-left: auto;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
.cats[open] .cats-s i { transform: rotate(-135deg) translate(-2px, -2px); }

.cats-in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad) 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.cats-in::-webkit-scrollbar { display: none; }
.cat-lnk {
  flex: 0 0 auto; padding: 10px 13px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: #fff;
}
.cat-lnk:hover { color: #fff; background: var(--blue-l); }
.cat-lnk.on, .cat-lnk.on:hover { color: #fff; background: var(--red); }

/* ─────────────────────────────── Каркас ─────────────────────────────── */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 14px var(--pad) 40px; }

.crumbs { font-size: 12.5px; color: var(--ink-3); margin: 0 0 10px; }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--red); }
.crumbs b { font-weight: 600; color: var(--ink-3); }
.crumbs span { margin: 0 6px; }

.h1 {
  margin: 0 0 12px; font-size: 22px; line-height: 1.25; font-weight: 800; color: var(--blue);
}
.h1 span { display: block; font-size: 14px; font-weight: 600; color: var(--ink-3); margin-top: 3px; }
.h2 { margin: 28px 0 12px; font-size: 17px; font-weight: 800; color: var(--blue); }

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

/* Головна дія сайту — суцільний фірмовий червоний. Градієнтів, відблисків і
   «підошви» тут НЕМА свідомо: вони робили кнопку опуклою іграшкою, а натиск ще й
   зсував її вниз — на сторінці, де таких кнопок шістнадцять, це виглядало як
   тремтіння сітки. Глибину дає рівно одна мʼяка тінь. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; padding: 0 20px; border: 0; border-radius: 9px;
  color: #fff; font-weight: 700; cursor: pointer; text-align: center; white-space: nowrap;
  background: var(--red);
  box-shadow: 0 1px 3px rgba(163, 18, 44, .22);
  transition: background .12s, box-shadow .18s;
}
.btn:hover { color: #fff; background: var(--red-d); }
.btn:active { background: var(--red-d); box-shadow: 0 0 0 rgba(163, 18, 44, .22); }
.btn.big  { min-height: 48px; font-size: 16px; }
.btn.sm   { min-height: 34px; padding: 0 13px; font-size: 13px; }
/* Другорядна кнопка плоска навмисно: обʼєм на сторінці має бути в ОДНОГО елемента,
   інакше жоден із них уже не читається як головний. */
.btn.ghost {
  background: #fff; color: var(--blue); border: 1.5px solid var(--line); box-shadow: none;
}
.btn.ghost:hover { border-color: var(--blue); background: var(--bg-2); color: var(--blue); }
.btn.ghost:active { box-shadow: none; }
.wfull { width: 100%; }

/* Іконка кнопки — інлайновий SVG у кольорі підпису (`currentColor`), а НЕ емодзі.
   Емодзі `🛒` малюється системним кольоровим шрифтом: на червоній кнопці вона була
   темною плямою, на зеленій — чужою за кольором, і `color:#fff` на неї не діє
   взагалі. Тепер іконка рівно така сама біла, як текст поруч, і на обох станах. */
.bic {
  flex: 0 0 auto; width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.btn.big .bic { width: 19px; height: 19px; }

/* Кнопка показує РІВНО ОДНУ іконку: кошик, поки товару в кошику нема, і галочку,
   коли він там уже є. Обидві лежать у розмітці одразу (`shop_buy_btn()`) — так
   серверний стан кнопки й той, у який її переводить скрипт після додавання,
   збігаються без складання HTML у JS.

   Галочка товща за кошик: у неї всього дві лінії проти десятка, і тією ж
   товщиною вона виглядала поруч із підписом блідою рискою. */
.bic-ok { display: none; stroke-width: 2.6; }
.in .bic { display: none; }
.in .bic-ok { display: inline-block; }

.lnk {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-3); text-decoration: underline;
}
.lnk:hover { color: var(--red); }

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

.tiles {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 4px 0 8px;
}
/* Висота плитки — рівно під два рядки назви й лічильник під ними, без запасу:
   при чотирьох у ряд півтори сотні пікселів висоти на слово «Розхідник» робили з
   першого екрана головної сім майже порожніх прямокутників. */
.tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
  min-height: 62px; padding: 9px 11px;
  border: 1.5px solid var(--line); border-radius: var(--rad); background: #fff;
  border-left: 4px solid var(--blue);
}
.tile:hover { border-color: var(--line); border-left-color: var(--red); background: var(--bg-2); }
.tile-n { font-weight: 700; font-size: 14px; color: var(--ink); line-height: 1.3; }
.tile-c { font-size: 12px; color: var(--ink-3); }

/* ────────────────────── Сітка каталогу (2 в ряд) ────────────────────── */
/* «По 2 в ряд і 16 на сторінку» — так задумано для телефона. На широкому екрані
   дві колонки дали б картки завширшки з долоню, тому колонок додається, а число
   товарів на сторінці (16) лишається тим самим і ділиться націло і на 2, і на 4. */

.grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}

/* Рамка одразу 2px і в звичайному стані теж: якби ховер її потовщував, картка
   під курсором «підстрибувала» б на пів пікселя, а сусідні розʼїжджались.
   Ховер міняє ЛИШЕ тінь: чорна рамка під курсором читалась як виділення/помилка,
   а не як наведення, і в сітці з чотирьох карток била по очах. */
.card {
  display: flex; flex-direction: column;
  border: 2px solid var(--line); border-radius: var(--rad); background: #fff; overflow: hidden;
  transition: box-shadow .16s;
}
.card:hover { box-shadow: 0 3px 12px rgba(24, 37, 89, .13); }
/* Знизу відступу в фото НЕМА: між ним і назвою й так стоїть поле картки, а разом
   вони давали смугу порожнечі завширшки з рядок тексту — у сітці з чотирьох
   карток це помітно більше, ніж самі назви. */
.card-ph {
  display: block; aspect-ratio: var(--ph-ar); background: #fff; padding: 8px 8px 0;
}
.card-ph img { width: 100%; height: 100%; object-fit: contain; }
.card-b { display: flex; flex-direction: column; gap: 7px; padding: 5px 10px 10px; flex: 1 1 auto; }
/* ── Назва в плитці — рівно ЧОТИРИ рядки, завжди ──
   Клемп був на трьох рядках, а висоту назва займала свою: у сітці з чотирьох
   карток сусіди мали назви на один, два й три рядки, і артикул із ціною під ними
   стояли на трьох різних рівнях — око не могло порівняти ціни, не перечитуючи
   кожну картку. Тепер рядків рівно чотири (`min-height` = стеля клемпа): довгі
   назви обрізаються на четвертому, короткі добирають порожнечею, і низ картки
   (артикул, ціна, кнопка) вишиковується в один рівень через увесь ряд.
   Чотири, а не три, — бо назви тут довгі («Акумуляторний шурупокрут DeWalt
   DCD709D2T 18V XR…»), і третій рядок різав їх рівно на моделі. */
.card-n {
  color: var(--ink); font-size: 13.5px; line-height: 1.35; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1.35em * 4);
}
.card-n:hover { color: var(--blue); }

/* Артикул і ціна — ОДИН рядок у дві колонки: ліворуч підпис «Артикул:» і саме
   значення під ним, праворуч ціна на всю висоту цих двох рядків. Доти артикул був
   окремою сірою смугою, ціна — ще однією нижче, і картка складалась із трьох майже
   порожніх рядків замість одного, який відповідає на «що це й почому». */
.card-m {
  margin-top: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 2px 10px;
}
.card-sku { min-width: 0; font-size: 11px; line-height: 1.25; color: var(--ink-3); }
/* ── Довгий артикул обрізається на ДЕСЯТОМУ символі й ГАСНЕ ──
   Артикули бувають і на 13 символів (`DCK2101QQ1WW1`), а колонка в сітці з двох
   карток вужча за долоню: повний артикул або лізе на цифри ціни праворуч, або
   розповзається на другий рядок і виштовхує кнопку з рівня сусідніх карток.
   Ширина задана в `ch` — шрифт тут моноширинний, тож «10 символів» це рівно 10
   символів у будь-якому артикулі. Замість трьох крапок — згасання: воно не
   бреше, що текст закінчився, і не займає місця під самі крапки. Повний артикул
   лишається в пошуку й на сторінці товару, де для нього є ціла ширина. */
.card-sku b {
  display: block; max-width: 10ch; white-space: nowrap; overflow: hidden;
  margin-top: 1px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 14px), transparent 100%);
}
/* ── Натиск по артикулу: розгорнути повністю + у буфер ──
   Обрізання на десяти символах приховує кінець (`DCK2101QQ1WW1`), а саме кінець
   і відрізняє сусідні модифікації. Тому весь рядок «Артикул: …» — мішень: натиск
   знімає обрізання назавжди (клас вішає `shop.js`) і кладе повний код у буфер,
   щоб його одразу вставити в пошук чи в лист. Мішень — увесь рядок разом із
   міткою: пальцем цілитись у десять дрібних символів незручно. */
.card-sku { cursor: pointer; }
/* ── Вага в артикулі розподілена НАВПАКИ до звичного ──
   ЖИРНИМ стоїть слово-мітка «Артикул:», а сам код — звичайною вагою й тим самим
   сірим (`inherit`). Доти в плитці було навпаки: код стояв жирним і майже чорним,
   тобто важив на картці стільки ж, скільки назва товару, і сітка читалась як
   перелік кодів. Шукають артикул усе одно по мітці, а не по самому коду — і в
   режимі «рядками» він уже так і подавався; тепер обидва вигляди однакові.
   Селектор через `.grid` — той самий обмежник, що й у правил режиму «рядками»:
   без нього ті самі ваги дістались би артикулам у складі комплекту й у кошику,
   де артикул стоїть окремим рядком і подається інакше. */
.grid .card-sku > span { font-weight: 700; }
.grid .card-sku b { font-weight: 400; color: inherit; }
.card-sku.sku-open b {
  max-width: none;
  -webkit-mask-image: none; mask-image: none;
}

/* Ціна — В ОДИН РЯДОК разом із «грн»: перенесене на власний рядок «грн» читалось
   не як одиниця при числі, а як окремий підпис під ним, і в кожній картці сайту
   ціна виглядала двоповерховою. Місце під це звільнив обрізаний артикул зліва.

   Розмір ЗБІЛЬШЕНО проти базового (`.price`, 18px): у сітці ціну шукають очима
   першою — вона й вирішує, читати картку далі чи гортати — а стояла вона тим
   самим кеглем, що й назва товару поруч. Місце під це дала зменшена кнопка. */
.card-m .price { font-size: 22px; text-align: right; line-height: 1.1; white-space: nowrap; }
.card-m .price span { font-size: 12.5px; }
/* Кнопка стоїть ОКРЕМИМ рядком під ними на всіх ширинах: підпис «Вже в кошику»
   довший за «До кошика» і роздував би кнопку рівно в тих картках, де товар уже
   набрано, а сусідні картки через це «дихали» б. */
.card-f { display: flex; flex-direction: column; gap: 8px; }
.price { font-size: 18px; font-weight: 800; color: var(--red); white-space: nowrap; }
.price span { font-size: 12px; font-weight: 700; }
.price.big { font-size: 27px; }

/* Кнопка в картці НАВМИСНО дрібніша за головні кнопки сайту (`.btn`, 42px): у
   сітці їх на екрані шістнадцять, і в повний зріст вони перетягували увагу на
   себе — сторінка читалась як стрічка кнопок, а не як перелік товарів. Вирішує
   покупець за фото, назвою й ціною; кнопка потрібна вже ПІСЛЯ цього, тому й
   місце в картці віддано ціні. Дотику вистачає: 32px — з полями картки. */
.buy {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 32px; flex: 0 0 32px; padding: 0 8px;
  border: 0; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden;
  color: #fff; background: var(--red);
  box-shadow: 0 1px 3px rgba(163, 18, 44, .20);
  transition: background .12s, box-shadow .18s;
}
.buy:hover { background: var(--red-d); }
.buy:active { background: var(--red-d); box-shadow: 0 0 0 rgba(163, 18, 44, .20); }
.buy .btx { overflow: hidden; text-overflow: ellipsis; }

/* «Цей товар уже набрано»: зелений колір, біла галочка замість кошика і підпис
   «Уже в кошику: N шт». Кнопка робоча й далі — повторний натиск докладає ще одну
   штуку (доки не впреться в стелю наявності).

   Підпис у цьому стані ДОВШИЙ за «До кошика», і колись саме через це його й не
   міняли: кнопка на очах роздувалась, а в сітці за нею «дихали» сусідні картки.
   Тепер цього не стається, бо ширина кнопки в сітці задана (`width:100%` у картці,
   `min-width` у режимі рядків), а не рахується з підпису. */
.buy.in, .btn.in { background: var(--ok); box-shadow: 0 1px 3px rgba(19, 122, 63, .20); }
.buy.in:hover, .btn.in:hover { background: #137a3f; }

/* Момент додавання — спалах кільцем НАВКОЛО кнопки. Анімуються лише тінь і колір:
   ні розмір, ні положення, ні підпис не рухаються, тож сусідні картки стоять. */
@keyframes buyflash {
  0%   { box-shadow: 0 0 0 0 rgba(26, 143, 76, .55); }
  100% { box-shadow: 0 0 0 9px rgba(26, 143, 76, 0); }
}
.buy.flash, .btn.flash { animation: buyflash .9s ease-out; }

.buy:disabled, .btn:disabled { opacity: .6; cursor: default; }

.noph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; background: var(--bg-2);
}
.noph-l { width: 55%; max-width: 130px; height: auto; opacity: .3; }

/* ──────────────────── Режим «рядками» (компактний) ──────────────────── */
/* Друга подача тієї самої сітки: та сама розмітка картки, просто розкладена в
   рядок. Клас висить на <html> (ставить його шапка з localStorage), тому обидва
   режими — це виключно стилі, і жодного дубля розмітки на сторінці нема.

   Ціна й кнопка на телефоні лишаються ПІД назвою: у рядок вони тут не влазять і
   тиснули б назву до двох слів. */

.v-list .grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.v-list .card { flex-direction: row; align-items: stretch; }
/* Тут коробка ТЯГНЕТЬСЯ на висоту рядка (`align-items: stretch`), тож пропорція
   лишається лише страховкою на випадок, якщо рядок колись перестане розтягуватись
   — саме фото вписує в неї `contain`. */
.v-list .card-ph { flex: 0 0 86px; width: 86px; aspect-ratio: var(--ph-ar); padding: 6px; }

/* ── Рядок — це ТАБЛИЦЯ, і ціна в ній ОКРЕМА КОЛОНКА ──
   Доти ціна лежала всередині `.card-m` поруч з артикулом, тобто її ліва межа
   залежала від довжини артикула: у сусідніх рядках вона стояла в різних місцях і
   при гортанні «гуляла». Тепер `.card-m` роздано (`display:contents`), і артикул
   із ціною стають прямими клітинками сітки рядка: ціна — власний стовпчик,
   притиснутий ПРАВОРУЧ, поруч із кнопкою. Через увесь список вони вишиковуються
   одна під одною, як у прайсі. */
.v-list .card-b {
  display: grid; align-items: center; gap: 3px 12px; padding: 8px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name price" "meta price" "f f";
}
.v-list .card-m { display: contents; }
/* `min-height` плитки тут скидається: у рядку назві відведено два рядки, і
   зарезервована під чотири висота роздувала б кожен рядок списку вдвічі. */
.v-list .card-n { grid-area: name; align-self: end; -webkit-line-clamp: 2; min-height: 0; }
.v-list .card-sku { grid-area: meta; align-self: start; }
/* ── Артикул у рядку: підпис і значення в ОДИН рядок ──
   Ваги (жирна мітка, звичайний код) роздає базове правило плитки вище — тут
   лишається тільки укладка в один рядок, бо в рядку списку для неї є ширина, а
   у вузькій колонці плитки — ні (там мітка лишається над значенням).
   Селектор через `.grid`: клас `v-list` висить на <html>, тож без цього
   обмеження ті самі правила дістались би артикулам у складі комплекту й у кошику. */
.v-list .grid .card-sku { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.v-list .grid .card-sku b { margin-top: 0; }
/* У рядку ширини під артикул більше, ніж у картці, — але правило одне на весь
   сайт: девʼять символів і згасання. Інакше та сама позиція показувала б різний
   артикул залежно від того, як покупець перемкнув вигляд списку. */
/* Селектор іде через `.card-m`, а не просто `.v-list .price`: клас `v-list` висить
   на `<html>` і діє на ВСЮ сторінку, тож голе `.price` зачепило б і ціну на
   сторінці товару, і суми в кошику. */
.v-list .card-m .price { grid-area: price; text-align: right; justify-self: end; align-self: center; }
.v-list .card-f { grid-area: f; margin-top: 4px; flex-direction: row; align-items: center; }
/* Ширина задана, а не порахована з підпису: «2 шт уже в кошику» довше за «До
   кошика», і без цього рядок сіпався б у ширині рівно в тих товарах, які вже
   набрані. Вистачає на довший з двох підписів.
   Селектор ОБМЕЖЕНО сіткою каталогу: клас `v-list` висить на `<html>`, тобто діє
   на всю сторінку — і без цього обмеження ті самі 172px діставались кнопкам у
   складі комплекту на сторінці товару, де картка завширшки 150px, і кнопка
   вилазила за її рамку. */
.v-list .grid .buy { width: auto; flex: 0 0 auto; min-width: 150px; }

/* ── Телефон: рядок розгортається на ТРИ поверхи ──
   На вузькому екрані назва, артикул, кнопка й ціна в один рядок не вміщаються:
   назву тиснуло до двох обрізаних слів, а артикул гаснув на девʼятому символі —
   тобто рівно те, за чим у список і перемикаються (що це і почому), доводилось
   відкривати картку. Тому тут рядок укладається згори вниз: ПОВНА назва, під нею
   `Артикул: …` цілком в один рядок, а найнижче — ціна й кнопка праворуч.

   Порядок унизу саме такий — ЦІНА, за нею КНОПКА — бо навпаки кнопку зсувала
   довжина ціни: `429` і `1 599` різної ширини, і при гортанні списку кнопка
   стрибала з рядка в рядок. Тепер праворуч стоїть кнопка (ширина задана), а
   «гуляє» ліворуч від неї ціна, яку й так читають числом, а не за позицією.

   Блок навмисно на `max-width`, хоч решта файлу мобільна-перша: інакше довелось
   би переписувати назад у ширшому брейкпоінті і клемп назви, і згасання артикула
   (маска-градієнт) — три правила замість одного вікна ширин.
   Селектори через `.grid`: клас `v-list` висить на <html>, і без цього обмеження
   ті самі правила дістались би артикулам у складі комплекту й у кошику. */
@media (max-width: 639.98px) {
  .v-list .grid .card-b {
    gap: 4px 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name name" "meta meta" "price f";
  }
  /* Назва — повністю, без обрізання: місце під неї є, бо ціна пішла вниз. */
  .v-list .grid .card-n {
    display: block; overflow: visible; -webkit-line-clamp: none; align-self: start;
  }
  .v-list .grid .card-f { justify-content: flex-end; margin-top: 2px; }
  /* Ширина ЗАДАНА (а не порахована з підпису), щоб «Уже в кошику: N шт» не
     розсовував рядок. Стовпчик кнопки — `auto`, а сусідній `minmax(0,1fr)`, тож
     ширина ціни на кнопку не впливає взагалі: вона стоїть на місці в усіх рядках. */
  .v-list .grid .buy { width: 140px; max-width: 100%; min-width: 0; flex: 0 0 auto; }
  /* Ціна тулиться до кнопки (`justify-self:end` з базового правила рядка), а не
     розтягується на всю вільну ширину ліворуч. */
  .v-list .grid .card-m .price { align-self: center; }
}

/* ────────────────────── Заголовок списку та сортування ────────────────────── */

.head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
/* Заголовок і лічильник — одна група: скільки знайдено, стоїть одразу біля назви
   розділу (baseline, щоб дрібний текст сидів на лінії великого). */
.head-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; flex: 1 1 100%; }
.head .h1 { margin: 0; }
/* Сортування й перемикач вигляду — ЩІЛЬНОЮ ГРУПОЮ СПРАВА, на всіх ширинах.
   Доти тут стояв `space-between`: на телефоні він розкидав селект до лівого краю
   екрана, а плитку/список — до правого, і між ними лишалась порожня третина рядка.
   Читалось це як дві незв'язані речі, хоч питання в них одне — «як показати цю
   вибірку»; та й цілитись пальцем у різні кінці рядка незручно. */
.head-r { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; justify-content: flex-end; }
/* Селект може стискатись: на вузькому екрані підпис «Спочатку дешевші» довший за
   вільне місце, і без цього він виштовхував перемикач вигляду за край. */
.sortf { min-width: 0; flex: 0 1 auto; }
.sortf select { max-width: 100%; }
.found { font-size: 13px; color: var(--ink-3); }
.found b { color: var(--ink); }
.sortf select {
  height: 36px; padding: 0 8px; border: 1.5px solid var(--line); border-radius: 8px;
  background: #fff; max-width: 190px;
}

/* Перемикач вигляду списку — поруч із сортуванням, бо це та сама дія: «як мені
   показати цю вибірку». Дві кнопки в одній рамці, активна залита синім. */
.vmode {
  display: inline-flex; flex: 0 0 auto;
  border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff;
}
.vm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 34px; padding: 0; border: 0; background: none;
  color: var(--ink-3); cursor: pointer;
}
.vm + .vm { border-left: 1.5px solid var(--line); }
.vm svg { width: 17px; height: 17px; fill: currentColor; }
.vm:hover { color: var(--blue); background: var(--bg-2); }
.vm.on { background: var(--blue); color: #fff; }

/* ──────────────────── Дві колонки: фільтри + список ──────────────────── */

.cols { display: block; }

/* Кнопка фільтрів на телефоні — суцільна фірмова синя: тепер вона несе ще й назву
   поточного розділу (плитку з підрозділами над товарами прибрано), тобто це
   головний орієнтир сторінки, а не другорядна дія. Світлою обведеною вона
   губилась між заголовком і першою карткою. Підпис може бути довгим, тож рядок
   переноситься, а лічильник вибраного лишається біля тексту. */
.fbtn {
  width: 100%; min-height: 42px; margin-bottom: 12px; padding: 9px 12px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 7px; text-align: center; line-height: 1.25;
  border: 1.5px solid var(--blue); border-radius: 9px; background: var(--blue);
  color: #fff; font-weight: 700; font-size: 14px; cursor: pointer;
}
/* ── Лічильник — ФІРМОВИЙ ЧЕРВОНИЙ, число білим ──
   Був білою плашкою з синім числом — тобто тією ж парою кольорів, що й сама
   кнопка, тільки навиворіт: на синьому тлі він читався як частина підпису, а не
   як «увімкнено стільки-то умов». Червоний — єдина третя фарба бренду, і в
   інтерфейсі вона зарезервована рівно під це: «тут щось активне». Щоб він не
   зливався з синім тлом кнопки впритул, плашку відділяє білий обідок. */
/* ── Значок фільтрів (лійка) ──
   Один малюнок на три місця: синя кнопка телефона, шапка висувної шухляди й
   шапки блоків бічної колонки на ПК. Колір НЕ заданий — `currentColor` бере його
   від тексту поруч, тому на кнопці лійка біла, а в шапках синя, без другої копії
   розмітки. `flex-shrink:0` обов'язковий: підпис кнопки може бути довгим і
   переноситись, і без цього значок стискався б у смужку. */
.ic-f { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; }
.fbtn .ic-f { width: 17px; height: 17px; }
.sbox-h .ic-f, .side-h .ic-f { opacity: .85; }

.fbtn i {
  font-style: normal; padding: 1px 8px; flex: 0 0 auto;
  background: var(--red); color: #fff; border-radius: 9px;
  font-size: 12px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85);
}

/* На телефоні колонка виїжджає збоку поверх сторінки: інакше довгий список
   значень відсував би товари на другий екран ще до того, як їх побачили. */
.side {
  position: fixed; inset: 0 auto 0 0; z-index: 50;
  width: min(88vw, 340px); background: #fff; border-right: 1px solid var(--line);
  transform: translateX(-102%); transition: transform .2s ease;
  overflow-y: auto; padding: 0 0 20px;
}
body.side-on .side { transform: none; }
body.side-on { overflow: hidden; }

/* ── Затемнення під шухлядою — СПРАВЖНІЙ елемент, а не тінь ──
   Доти його малювала тінь самої шухляди (`box-shadow: 0 0 0 100vmax`). Виглядало
   однаково, поводилось протилежно: тінь не ловить дотиків, тож палець, яким
   намагались закрити фільтри, проходив крізь затемнення й натискав те, що
   опинилось під ним, — картку товару. Тепер це окремий шар: він закриває шухляду
   і не пускає дотик далі. */
.side-ov {
  position: fixed; inset: 0; z-index: 45; display: none;
  background: rgba(24, 37, 89, .38);
}
body.side-on .side-ov { display: block; }

/* Шапка самої шухляди (з хрестиком) — тільки для телефона; на ПК її нема, там у
   кожного блоку колонки власна шапка. */
.side-h {
  position: sticky; top: 0; z-index: 2; background: #fff;
  display: flex; align-items: center; gap: 10px;
  padding: 13px var(--pad); border-bottom: 1px solid var(--line);
  font-weight: 800; color: var(--blue);
}
.side-h span { flex: 1 1 auto; }
.side-x {
  border: 0; background: none; font-size: 26px; line-height: 1; color: var(--ink-3);
  cursor: pointer; padding: 0 2px;
}

/* Бічна колонка — це ДВА окремі блоки: «Розділи» (навігація) і «Фільтри»
   (звуження). Раніше вони лежали в одній рамці підряд і зліплювались в один
   нескінченний список, у якому не було видно, де закінчується меню й починаються
   галочки. Тепер у кожного власна рамка й шапка, між ними — зазор. */
.sbox {
  margin: 12px var(--pad) 0;
  border: 1.5px solid var(--line); border-radius: var(--rad); background: #fff;
  overflow: hidden;
}
.sbox-h {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--bg-2); border-bottom: 1px solid var(--line);
  font-weight: 800; font-size: 13px; color: var(--blue);
}
.sbox-h span { flex: 1 1 auto; }
.reset { font-size: 12.5px; font-weight: 600; color: var(--red); }

.sbox form { padding: 0 12px 12px; }
.fgrp { border-bottom: 1px solid var(--line-2); }
.fgrp:last-of-type { border-bottom: 0; }
.fgrp summary {
  list-style: none; cursor: pointer; padding: 10px 22px 10px 0; position: relative;
  font-weight: 700; font-size: 13px; color: var(--ink);
}
.fgrp summary::-webkit-details-marker { display: none; }
.fgrp summary::after {
  content: ''; position: absolute; right: 4px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .15s;
}
.fgrp[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
/* Власної прокрутки у списку значень НЕМА: вкладене вікно всередині колонки, яка
   й сама скролилась, ловило колесо миші й не давало гортати сторінку. Довгий
   список тримає в межах сам `<details>` — закриті групи місця не займають. */
.fvals { padding: 0 0 8px; }

/* Кнопка «Показати» потрібна лише БЕЗ скриптів: із ними галочка застосовується
   сама (клас `js` ставить шапка). Друга дія, яка робить те саме, лише збиває з
   пантелику — покупець ставить галочку, сторінка вже перемальовується, а під
   списком його чекає кнопка, ніби він чогось не дотиснув. */
html.js .fapply { display: none; }
/* Форма пішла по нову вибірку. На телефоні висувна колонка лишається на екрані ще
   мить, і без цього натиск виглядав би як «не спрацювало». */
#ffrm.busy { opacity: .55; pointer-events: none; }

.fv {
  display: flex; align-items: center; gap: 8px; padding: 2px 2px;
  font-size: 13px; line-height: 1.25; cursor: pointer;
}
.fv span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.fv i { font-style: normal; font-size: 11px; color: var(--ink-3); flex: 0 0 auto; }
.fv input { width: 16px; height: 16px; accent-color: var(--blue); flex: 0 0 auto; }
.fv.on span { color: var(--blue); font-weight: 700; }
.fv:hover span { color: var(--red); }

.side .btn { margin-top: 12px; }

/* ────────────────────── Підрозділи категорії ────────────────────── */
/* Це НАВІГАЦІЯ, а не фільтр: окремі сторінки зі своїми адресами. Тому й вигляд
   інший — список посилань із виділеним поточним, а не галочки. */

/* Підменю компактне навмисно: розділів буває під два десятки, і з попередніми
   відступами сам лише перелік займав більше екрана, ніж товари поруч. */
.subnav { padding: 5px; }
.subl {
  display: flex; align-items: center; gap: 6px; padding: 5px 7px;
  border-radius: 6px; font-size: 12.5px; line-height: 1.3; font-weight: 600; color: var(--ink);
}
.subl i {
  margin-left: auto; flex: 0 0 auto;
  font-style: normal; font-size: 11px; color: var(--ink-3);
}
.subl:hover { background: var(--bg-2); color: var(--blue); }
.subl.on { background: var(--blue); color: #fff; }
.subl.on i { color: rgba(255, 255, 255, .72); }

/* ── «Розділи» згортаються ПІСЛЯ вибору ──
   Блок став `<details>`, а його шапка — `<summary>`, тобто клік по ній і є
   згортанням. Доки розділ не вибрано, список стоїть розгорнутим (по нього й
   прийшли); щойно вибрано — лишається сама шапка з назвою поточного, і півтора
   десятка сусідніх розділів перестають відпихати фільтри за край екрана на КОЖНІЙ
   сторінці розділу. Стрілка — та сама, що в груп фільтрів: на сторінці мусить бути
   один спосіб показати «це розкривається». */
.sbox-nav > summary {
  list-style: none; cursor: pointer; position: relative; padding-right: 28px;
}
.sbox-nav > summary::-webkit-details-marker { display: none; }
.sbox-nav > summary::after {
  content: ''; position: absolute; right: 12px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(45deg); transition: transform .15s;
}
.sbox-nav[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.sbox-nav > summary:hover { color: var(--red); }
.sbox-nav > summary:hover::after { border-color: var(--red); }
/* Назва поточного розділу — ДРУГИМ рядком під підписом «Розділи»: у згорнутому
   стані вона й лишається єдиним змістом блоку, тож читатись мусить як заголовок,
   а не як дописка в кутку. */
.sbox-nav > summary em {
  display: block; margin-top: 2px;
  font-style: normal; font-weight: 700; font-size: 13.5px; color: var(--ink);
  line-height: 1.25;
}

/* ── Вибране, продубльоване в колонку ──
   Чипи ті самі, що над товарами, але тут вони — орган керування: перший блок
   колонки, тож будь-яка умова знімається одразу після відкриття шухляди, не
   гортаючи її до потрібної групи галочок. */
.sbox-sel { border-color: var(--blue); }
/* Селектор саме подвійний (`.chips.chips-side`): `.chips` з його `margin-bottom`
   оголошений НИЖЧЕ по файлу, тож при рівній вазі перебивав скидання відступу — і
   під останнім чипом у рамці лишалась зайва порожня смуга. */
.chips.chips-side { margin: 0; padding: 10px 12px; }

/* Плитка розділів — лише на сторінці КАТЕГОРІЇ, доки підрозділ ще не вибрано
   (на сторінці самого підрозділу її не малює вже PHP: там вона повторювала
   зроблений вибір і відсувала товари вниз, а перевибір живе в шухляді). */
.subtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }

.subt {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 10px 12px; background: #fff;
  border: 2px solid var(--line); border-left-width: 4px; border-left-color: var(--blue);
  border-radius: var(--rad); font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.3;
}
.subt i { font-style: normal; font-weight: 600; font-size: 11.5px; color: var(--ink-3); }
.subt:hover { border-left-color: var(--red); color: var(--ink); box-shadow: 0 3px 12px rgba(24, 37, 89, .13); }
.subt.on { border-color: var(--red); border-left-color: var(--red); color: var(--red); }

/* ──────────────────────── Виробники (ряд кнопок) ──────────────────────── */
/* Той самий набір значень, що інші фільтри, але подача — як у розділів на
   головній: окремі кнопки, а не галочки в колонці. Бренд обирають ПЕРШИМ, тому
   він стоїть над товарами й спрацьовує з одного натиску.

   Кнопки НИЖЧІ за плитку головної навмисно: там їх вісім і вони — головний зміст
   сторінки, а тут їх бува два десятки над самими товарами, і повновимірна плитка
   зʼїла б перший екран. Тому лишається сама назва з числом в один рядок.

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

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

   Кнопки НЕ переносяться: два десятки брендів у чотири рядки з'їдали перший екран
   ще до першого товару. Вузький екран гортає стрічку пальцем, широкий — стрілками
   з боків. Стрілки показує лише скрипт (клас `has-a`), тож без JS лишається чиста
   горизонтальна прокрутка, а не пара мертвих кнопок. */

.brnds { margin: 0 0 14px; }
.brnds-l {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3);
}
.brnds-w { display: flex; align-items: center; gap: 6px; }
.brnds-s {
  flex: 1 1 auto; min-width: 0;
  display: flex; gap: 6px; padding: 2px 0;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.brnds-s::-webkit-scrollbar { display: none; }
/* Стрілки — окремі клітинки flex-рядка, а не накладка поверх стрічки: наїжджаючи
   на крайні кнопки, вони ховали б рівно те, що людина зараз читає. Край стрічки
   гасить їх `disabled`-ом, а не зникненням, — інакше ряд смикався б на 36px. */
.brnds-a {
  display: none; flex: 0 0 auto;
  width: 30px; height: 30px; padding: 0;
  border: 1.5px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--blue);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.brnds-a:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.brnds-a:disabled { opacity: .3; cursor: default; }
.brnd {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  min-height: 30px; padding: 3px 10px;
  border: 1.5px solid var(--line); border-left: 3px solid var(--blue); border-radius: 8px;
  background: #fff; color: var(--ink);
  font-size: 12.5px; font-weight: 700; line-height: 1.25; white-space: nowrap;
}
.brnd i { font-style: normal; font-weight: 600; font-size: 11px; color: var(--ink-3); }
.brnd:hover { border-left-color: var(--red); color: var(--red); background: var(--bg-2); }
.brnd:hover i { color: var(--red); }
/* Вибраний — залитий фірмовим синім, як активний пункт підменю й сторінка
   пагінації: на сторінці мусить бути один спосіб показати «ось де ви зараз». */
.brnd.on, .brnd.on:hover {
  background: var(--blue); border-color: var(--blue); border-left-color: var(--blue); color: #fff;
}
.brnd.on i, .brnd.on:hover i { color: rgba(255, 255, 255, .72); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 20px; background: var(--bg-2);
  border: 1px solid var(--line); font-size: 12.5px; color: var(--ink);
}
.chip span { color: var(--ink-3); font-weight: 900; font-size: 15px; line-height: 1; }
.chip:hover { border-color: var(--red); color: var(--red); }
.chip:hover span { color: var(--red); }

/* ───────────────────────────── Пагінація ───────────────────────────── */

.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 22px; }
.pg {
  min-width: 38px; height: 38px; padding: 0 11px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); border-radius: 8px; font-size: 13.5px; font-weight: 600;
  background: #fff;
}
.pg:hover { border-color: var(--blue); }
.pg.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.pg-gap { align-self: center; color: var(--ink-3); padding: 0 2px; }
.pg-nav { padding: 0; font-size: 18px; line-height: 1; }

/* ── Телефон: ряд сторінок мусить лишатись ОДНИМ рядком ──
   Ширину кнопки задає `min-width`, а НЕ падінг: у однознакового номера вміст із
   падінгом до 38px однаково не дотягує, тож звужувати треба саме min-width.
   Вісім елементів (« 1 2 3 4 5 6 ») при 34px і проміжку 5px займають 307px і
   влазять у 332px смуги вмісту вузького екрана (360px мінус поля). Доти хвостова
   `»` зривалась у другий ряд і читалась як окрема, не пов'язана з рядом кнопка.
   Нижче 34px не опускаємось — це вже менше за комфортну ціль пальця; при
   двоцифрових номерах і двох розривах ряд усе одно перенесеться, і це нормально. */
@media (max-width: 639.98px) {
  .pager { gap: 5px; }
  .pg { min-width: 34px; height: 36px; padding: 0 6px; font-size: 13px; }
  .pg-gap { padding: 0 1px; }
  .pg-nav { padding: 0; font-size: 17px; }

  /* Порожнеча між пагінацією і кнопкою «наверх»: її складають нижній падінг
     сторінки (40px) і відступ підвалу (26px), з яких верхня половина кола з'їдає
     лише 23px — на телефоні лишалась смуга ~43px білого під останнім рядом.
     Тут падінг зменшено, щоб кнопка стояла одразу під вмістом. */
  .wrap { padding-bottom: 22px; }
}

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

.prod { display: block; }
.gal-big {
  border: 1.5px solid var(--line); border-radius: var(--rad); background: #fff;
  padding: 10px; aspect-ratio: var(--ph-ar);
}
.gal-big img { width: 100%; height: 100%; object-fit: contain; }

/* Стрічка мініатюр: ширина — уся ширина головного фото, висота — СТАЛА при
   будь-якій кількості знімків. Зайве їде вбік прокруткою, а не другим рядком:
   інакше товар із вісьмома фото зсував би вниз ціну й кнопку, і сторінка
   виглядала б у кожного товару по-різному. */
.gal-th {
  display: flex; align-items: center; gap: 8px;
  height: 92px; box-sizing: border-box; width: 100%;
  overflow-x: auto; overflow-y: hidden; padding: 10px 0 2px; scrollbar-width: thin;
}
.gth {
  flex: 0 0 auto; width: 92px; height: 74px; padding: 4px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 8px; background: #fff;
}
.gth img { width: 100%; height: 100%; object-fit: contain; }
.gth:hover { border-color: var(--blue); }
.gth.on { border-color: var(--red); }

.pinfo { padding-top: 16px; }
.pmeta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 14px; }
/* Артикул на сторінці товару копіюється натиском — так само, як у картці каталогу
   (обидва ловить один обробник у `shop.js`). Обрізання тут нема (ширини вдосталь),
   але саме звідси код і переносять у пошук або в лист менеджеру. */
.psku { font-size: 13px; color: var(--ink-3); cursor: pointer; }
.psku b { color: var(--ink); font-family: ui-monospace, Menlo, Consolas, monospace; }
.pav {
  font-size: 13px; font-weight: 700; color: var(--ok);
  display: inline-flex; align-items: center; gap: 5px;
}
.pav::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
}
/* ── Стани наявності (`shop_state()`) ──
   Три стани — три кольори, і крапка перед підписом фарбується разом із ним: на
   сторінці товару це єдине місце, яке відповідає на питання «чи можу я це взяти
   зараз», і читають його з відстані, кольором, а не текстом.
   Синій = «під замовлення» (веземо, але чекати), сірий = «закінчився». Червоний
   тут свідомо не задіяний: він на сайті означає ціну й кнопку, і третій сенс
   зробив би його нерозбірливим. */
.pav.ord, .pav.ord::before { color: var(--blue); background-color: var(--blue); }
.pav.ord { background: none; }
.pav.out, .pav.out::before { color: var(--ink-3); background-color: var(--ink-3); }
.pav.out { background: none; }

/* ── Попередження про стан + банер порога післяплати ──
   Одна розмітка на двох: значок у кружку ліворуч, жирний рядок «що сталось» і
   пояснення під ним. Різні лише кольори — сама конструкція мусить бути одна,
   інакше два однакові за змістом повідомлення виглядали б на сайті як два
   різні механізми. */
.pnote, .codbar {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 0 0 14px; padding: 12px 14px;
  border: 1.5px solid var(--line); border-left-width: 4px; border-radius: var(--rad);
  background: var(--bg-2);
}
.pnote b, .codbar b { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.pnote i, .codbar i { display: block; margin-top: 4px; font-size: 13px; font-style: normal; color: var(--ink-2); line-height: 1.45; }
.pnote-i, .codbar-i {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff; background: var(--ink-3);
}
/* «Під замовлення» — синій: це робоча пропозиція, а не відмова. */
.pnote-ord { border-left-color: var(--blue); }
.pnote-ord .pnote-i { background: var(--blue); }
/* «Закінчився» — сірий: нічого термінового, просто зараз ніяк. */
.pnote-out { border-left-color: var(--ink-3); }
.codbar { border-left-color: var(--red); }
.codbar-i { background: var(--red); }

/* Ціна, якої ми не називаємо. Ті самі габарити, що в числа (щоб картка не
   стрибала), але не червона й не жирна: це не ціна, а обіцянка її сказати. */
.price.ask { color: var(--ink-2); font-weight: 700; font-size: 14px; white-space: normal; }
.price.big.ask { font-size: 19px; }

/* «Закінчився» замість кнопки. Саме напис, а не `disabled`-кнопка: вимкнену
   кнопку однаково тиснуть і чекають, що щось станеться.

   Селектор ПАРНИЙ (`.buy.buy-out`, `.btn.buy-out`) і повторений з `:hover`/`:active`
   навмисно: базові `.buy:hover` та `.btn:hover` — це клас плюс псевдоклас, тобто
   специфічніші за одиночний `.buy-out`, і без цього напис «Закінчився» під
   курсором наливався б червоним кольором живої кнопки. */
.buy.buy-out, .btn.buy-out,
.buy.buy-out:hover, .btn.buy-out:hover,
.buy.buy-out:active, .btn.buy-out:active {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  background: var(--bg-2); color: var(--ink-3); border: 1.5px dashed var(--line);
  font-weight: 700; cursor: default; box-shadow: none;
}
.buy-out .btx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pbuy {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px; border: 1.5px solid var(--line); border-radius: var(--rad); background: var(--bg-2);
}
.pbuy .btn { flex: 1 1 160px; }

.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; }
.qty button {
  width: 38px; height: 42px; border: 0; background: none; cursor: pointer;
  font-size: 19px; color: var(--blue); line-height: 1;
}
.qty button:hover { color: var(--red); }
.qty input {
  width: 44px; height: 42px; border: 0; text-align: center; font-weight: 700; background: none;
}
.qty input:focus { outline: none; }

.specs { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.specs tr { border-bottom: 1px solid var(--line-2); }
.specs th {
  text-align: left; font-weight: 600; color: var(--ink-3); padding: 9px 12px 9px 0;
  width: 42%; vertical-align: top;
}
.specs td { padding: 9px 0; vertical-align: top; }

.ptext { font-size: 14.5px; line-height: 1.65; }
.ptext img { margin: 10px 0; border-radius: 8px; }
.ptext ul, .ptext ol { padding-left: 20px; }
.more { margin-top: 16px; text-align: center; }

/* ── Склад комплекту ──
   Блок на ВСЮ ширину сторінки, під двоколонковою карткою товару: частин у наборі
   буває шість-вісім, і в правій колонці вони лягали вузьким стовпчиком рядків,
   довшим за все інше на сторінці. На повну ширину ті самі шість стають одним рядом.

   Жовта підкладка — свідомо єдине місце на сайті, де колір НЕ фірмовий: блок
   мусить читатись як вигідна пропозиція («те саме дешевше комплектом»), а синій і
   червоний на вітрині вже зайняті навігацією й кнопками. */
.kitwrap {
  margin: 26px 0 0; padding: 4px 16px 16px;
  border: 1.5px solid #edd08a; border-radius: var(--rad);
  background: linear-gradient(180deg, #fff6dc 0%, #fffdf6 55%, #fff 100%);
}
.kit-h { margin: 14px 0 12px; color: #8a6410; }

/* Кожна частина — така сама картка, як у каталозі: фото, назва, артикул, ціна,
   кнопка. Шість у ряд на широкому екрані виходять самі: колонка не вужча за 150px,
   решту добирає `auto-fill`, тож на вузькому їх стає дві, а не шість нечитабельних. */
.kitg {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.kitc {
  display: flex; flex-direction: column; gap: 7px; padding: 8px;
  border: 1.5px solid #eadfc2; border-radius: 10px; background: #fff;
  transition: box-shadow .16s;
}
.kitc:hover { box-shadow: 0 3px 12px rgba(138, 100, 16, .18); }
/* Верх картки (фото + назва) — одне посилання: у частини набору немає окремої
   «назви-посилання» і «фото-посилання», це один об'єкт. */
.kitc-t { display: block; color: inherit; }
.kitc-ph {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: var(--ph-ar); background: #fff; margin-bottom: 6px;
}
.kitc-ph img { width: 100%; height: 100%; object-fit: contain; }
.kitc-ph .noph-l { width: 60%; opacity: .3; }
/* Кількість бейджем на фото, і лише коли їх більше однієї: набір «2 × акумулятор
   4.0 Аг» — це два акумулятори, а не дубль у даних (див. правило панелі про
   повтори `part_id`), і поштучна сума рахується з урахуванням цього числа. */
.kitc-q {
  position: absolute; left: 0; top: 0;
  font-style: normal; font-size: 12px; font-weight: 800; color: #fff;
  background: var(--blue); border-radius: 6px; padding: 2px 7px;
}
.kitc-n {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.5px; line-height: 1.35; font-weight: 600; color: var(--ink);
}
a.kitc-t:hover .kitc-n { color: var(--red); }
/* Артикул і ціна — той самий рядок у дві колонки, що й у картці каталогу
   (`.card-sku` + `.price` беруться звідти ж): дві різні подачі того самого поруч
   на одній сторінці читались би як два різні поля. */
.kitc-m {
  margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 2px 8px;
}
.kitc-m .price { font-size: 17px; text-align: right; line-height: 1.15; white-space: nowrap; }
.kitc-m .price span { font-size: 11px; }
/* Кнопка в картці комплекту завжди на всю ширину картки і стискається разом із
   нею — 150px у вузькій колонці й уся ширина клітинки в широкій. `min-width:0`
   тут не косметика, а захист: правило режиму «рядками» (`.v-list .grid .buy`)
   ставить кнопкам мінімум 172px, і поки воно було записане без `.grid`, кнопки
   комплекту не влазили у власну картку й лізли на її рамку. */
.kitc .buy { width: 100%; min-width: 0; flex: 0 0 32px; }
/* Частина, якої на вітрині окремо нема (сумка, зарядний без категорії): місце
   кнопки займає пояснення — мертва кнопка гірша за її відсутність. */
.kitc-no {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 32px; padding: 0 8px; border-radius: 8px;
  background: var(--bg-2); color: var(--ink-3); font-size: 11.5px; font-weight: 600;
}

/* Підсумок — головне в блоці: скільки ті самі позиції коштують поштучно, скільки
   комплектом і яка різниця. Без цих трьох рядків склад набору лишається переліком,
   з якого вигоду доводиться рахувати самому. */
.kit-sum {
  margin-top: 12px; margin-left: auto; max-width: 420px; padding: 12px 14px;
  border: 1.5px solid #edd08a; border-radius: var(--rad); background: #fffdf6;
}
.kit-sr { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13.5px; }
.kit-sr span { color: var(--ink-3); }
.kit-sr b { font-size: 15px; white-space: nowrap; }
.kit-old { color: var(--ink-3); text-decoration: line-through; font-weight: 600; }
.kit-win { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; }
.kit-win span { color: var(--ink); font-weight: 600; }
.kit-win b { color: var(--red); font-size: 17px; }
.kit-win i {
  font-style: normal; font-size: 12px; font-weight: 700; color: #fff;
  background: var(--red); border-radius: 5px; padding: 2px 6px; margin-left: 4px;
}

/* ── Склад комплекту на телефоні — СТРІЧКА, яку гортають ──
   Часток у наборі буває шість-вісім. На вузькому екрані сітка клала їх по дві в
   ряд, тобто блок «Що входить у комплект» розтягувався на чотири ряди карток і
   ставав найдовшим на сторінці: щоб дійти від опису товару до відгуків, доводилось
   прогортати весь склад набору, який більшість читає побіжно.

   Тепер це горизонтальна стрічка: два з половиною товари в екрані, решта —
   свайпом. «З половиною» навмисно (43%, не 50%): обрізаний край третьої картки —
   єдине, чим стрічка каже, що вона гортається. Рівно дві картки в екрані
   виглядають як повний список, і далі нього ніхто не гортає.

   Від'ємні поля з тим самим внутрішнім відступом (`0 -16px` / `0 16px`) — щоб
   картки виїжджали ПІД саму рамку жовтого блоку, а не впиралися в його падінг:
   інакше з боків лишалися б дві порожні смуги, а стрічка виглядала б обрізаною
   вручну.

   Підсумок під нею (`.kit-sum`) стрічкою НЕ їде — це головне в блоці (скільки
   вигоди дає набір), і воно мусить стояти на місці й читатись цілим. На телефоні
   він ще й розтягується на всю ширину: правий стовпчик 420px, вирівняний по
   правому краю, на 360px екрана виглядав як випадково зсунутий. */
@media (max-width: 759.98px) {
  .kitg {
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    margin: 0 -16px; padding: 0 16px 10px;
  }
  .kitc { flex: 0 0 43%; min-width: 132px; scroll-snap-align: start; }
  /* Назва в стрічці — два рядки замість трьох: картки стоять поруч, і рівний
     низ у них важливіший за третій рядок назви, який усе одно обрізається. */
  .kitc-n { -webkit-line-clamp: 2; }
  .kit-sum { max-width: none; margin-left: 0; }
}

/* ─────────────────────────────── Кошик ─────────────────────────────── */

.ctable { border-top: 1px solid var(--line); }
.crow {
  display: grid; align-items: center; gap: 4px 10px;
  /* minmax(0,1fr), а не 1fr: довга назва товару має ПЕРЕНОСИТИСЬ, а не розсувати
     рядок. З голим 1fr колонка не могла стиснутись менше за свій вміст, рядок
     вилазив за екран — і разом з ним «їхала» вся сторінка, обрізаючи суму справа. */
  grid-template-columns: 64px minmax(0, 1fr) auto;
  /* Хрестик тримає ДВА перші рядки — так «по центру» в нього виходить приблизно
     середина позиції, а не верхівка назви (на широкому екрані рядок один, і
     питання зникає само). */
  grid-template-areas: "ph name x" "ph price x" "ph qty sum";
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.crow-ph { grid-area: ph; }
/* Висота — під пропорцію фото (`--ph-ar`), а не квадрат: у квадраті 64×64
   ландшафтний кадр займав 64×52, а решта була порожньою і розганяла рядок. */
.crow-ph img { width: 64px; height: 52px; object-fit: contain; }
/* Назва позиції в кошику — головне в рядку, і шрифт у неї відповідний: тут не
   сітка на шістнадцять карток, а перелік із трьох-чотирьох речей, і читають його
   уважно («те я взяв чи не те»). */
.crow-n   { grid-area: name; font-size: 15px; line-height: 1.35; min-width: 0; }
.crow-n a { color: var(--ink); font-weight: 600; }
.crow-n a:hover { color: var(--blue); }
/* Артикул — ОКРЕМИМ рядком під назвою і з підписом «Артикул:»: у рядок за назвою
   він читався як її продовження, а без підпису — як незрозумілий код. */
.crow-n .card-sku { display: block; margin-top: 4px; font-size: 12px; }
.crow-n .card-sku b {
  display: inline; max-width: none; -webkit-mask-image: none; mask-image: none;
}
.crow-p   { grid-area: price; font-size: 13px; color: var(--ink-3); }
.crow-q   { grid-area: qty; }
.crow-s   { grid-area: sum; font-weight: 800; color: var(--red); white-space: nowrap; text-align: right; }
.crow-s span, .crow-p span { font-size: 11.5px; font-weight: 700; }
/* Хрестик — ПО ЦЕНТРУ висоти рядка, а не притиснутий до його верху: він стосується
   всієї позиції, і, стоячи вище за середину, читався як частина назви. */
.crow-x {
  grid-area: x; align-self: center; justify-self: end;
  width: 32px; height: 32px; border: 0; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink-3);
}
.crow-x:hover { color: var(--red); }
.crow .qty button { width: 32px; height: 34px; }
.crow .qty input  { width: 38px; height: 34px; }

.ctot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 14px 0;
}
/* Кнопка «Оновити кількість» потрібна лише БЕЗ скриптів: із ними змінена
   кількість застосовується сама (так само, як галочка фільтра в каталозі).
   Друга дія, яка робить те саме, лише збиває з пантелику — покупець міняє число,
   рядок уже перерахувався, а під переліком його чекає кнопка, ніби він чогось
   не дотиснув. */
html.js .capply { display: none; }
/* Форма пішла по новий підсумок — та сама подача, що у фільтрів каталогу. */
.ctable.busy { opacity: .55; pointer-events: none; }
/* Підсумок притискає ПІДПИС, а не кнопка зліва: кнопок у рядку буває одна, дві
   або жодної (див. `html.js .capply`), і прив'язка до котроїсь із них лишала б
   суму посеред рядка рівно в тому випадку, коли її сховали. */
.ctot-l { margin-left: auto; font-weight: 700; }
.ctot-v { font-size: 21px; font-weight: 800; color: var(--red); }
.ctot-v span { font-size: 13px; }

.order { max-width: 520px; margin-top: 8px; }
.fld { display: block; margin-bottom: 14px; }
/* Не `.fld > span`: у поля доставки всередині ще й кнопка, тому там `.fld` — це
   `<div>`, а `<label>` обгортає лише підпис із полем (клік по кнопці всередині
   `<label>` браузер переадресовує в поле, і віджет відкривався б із розкритою
   поверх нього клавіатурою). Підпис від цього не перестає бути підписом. */
.fld span { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.fld span b { color: var(--red); }
.fld input, .fld textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 9px;
  background: #fff; resize: vertical;
}
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--blue); }
.fld i { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); margin-top: 4px; }

/* ── Вибір відділення Нової Пошти ──
   Порожнього поля для набору покупець не бачить. Воно читалось як «впишіть
   адресу руками» — і туди набирали вулицю з будинком, тобто адресу, за якою
   Нова Пошта не возить, а кнопку вибору відділення поруч просто не помічали.
   Тепер відділення обирається ЛИШЕ кнопкою, а обране стоїть під нею готовим
   рядком. Поле лишається в розмітці й працює БЕЗ скриптів (там віджет не
   відкриється взагалі, і набір руками — єдиний спосіб оформити замовлення). */
html.js .np-manual { display: none; }
.np-val { display: none; }
/* Обране відділення — ПРОСТИЙ рядок тексту, без рамки й підкладки: у рамці він
   виглядав як ще одне поле, і його намагались правити руками замість того, щоб
   перевибрати кнопкою. Поки нічого не обрано (`.none`) — рядка нема взагалі:
   порожня рамка «ще не обране» лише займала місце, бо про це каже сама кнопка. */
html.js .np-val {
  display: block; font-size: 14px; color: var(--ink); line-height: 1.35;
  margin-bottom: 2px;
}
html.js .np-val.none { display: none; }
.np-val b { color: var(--ink-2); }
/* Відправили форму без відділення: рядка з відділенням тоді нема, тож
   підсвічуємо саме кнопку — те єдине, що треба натиснути. Спливаюче
   повідомлення живе три секунди й зникає, а обвідка тримається довше. */
.np-fld.bad .np-btn { box-shadow: 0 0 0 3px rgba(195, 26, 57, .30); }
/* Кнопка стоїть ПІД рядком, а не поруч: у рядок вони лізли одне на одного на
   телефоні, а назва відділення — найдовший рядок в усій формі. */
.np-btn { margin-top: 6px; }

/* Вікно з готовою сторінкою Нової Пошти. Майже на весь екран: усередині карта й
   пошук, і в маленькій рамці ними неможливо користуватись — а це чужа сторінка,
   зменшити її вміст ми не можемо. */
.npw {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: center; justify-content: center; padding: 10px;
  background: rgba(24, 37, 89, .55);
}
.npw[hidden] { display: none; }
.npw-in {
  display: flex; flex-direction: column; overflow: hidden;
  width: 100%; max-width: 900px; height: min(92dvh, 760px);
  background: #fff; border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.npw-h {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--bg-2);
}
.npw-h b { flex: 1 1 auto; font-size: 14.5px; color: var(--blue); }
.npw-x {
  flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: #fff; color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer;
}
.npw-x:hover { color: var(--red); }
.npw iframe { flex: 1 1 auto; width: 100%; height: 100%; border: 0; display: block; }

.err {
  padding: 10px 13px; border-radius: 9px; margin-bottom: 14px;
  background: #fdecef; border: 1px solid #f3c3cd; color: var(--red-d); font-size: 13.5px;
}
/* Приманка для ботів — прибрана з потоку, але НЕ display:none: частина ботів
   спеціально пропускає приховані так поля. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ─────────────────────── Вікно «а ви впевнені?» ─────────────────────── */
/* Одне на весь сайт. Питає лише те, що не повертається: прибрати позицію з кошика
   й очистити кошик цілком. Набраний кошик — це півгодини вибору, і зносити його
   випадковим дотиком поруч із «+» не можна.
   `[hidden]` прописано ЯВНО з тієї ж причини, що й у лайтбокса: атрибут — це лише
   `display:block` у таблиці браузера, і власний `display:flex` перебив би його. */
.ask {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(24, 37, 89, .5);
}
.ask[hidden] { display: none; }
.ask-in {
  width: 100%; max-width: 400px; padding: 20px;
  background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.ask-t { font-size: 15.5px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.ask-f { display: flex; gap: 10px; margin-top: 18px; }
.ask-f .btn { flex: 1 1 0; padding: 0 12px; }

.empty, .done { text-align: center; padding: 40px 10px; }
.empty p, .done p { color: var(--ink-2); margin: 0 0 18px; }
.done .h1 { color: var(--ok); }

/* ─────────────────────────────── Підвал ─────────────────────────────── */
/* ТИПОВИЙ ВИГЛЯД — ТЕЛЕФОННИЙ: усе в стовпчик і все ПО ЦЕНТРУ. Доти підвал був
   написаний під ПК і на телефоні розсипався — логотип ліворуч, контакти під ним
   ліворуч, розділи в третій колонці, і сторінка закінчувалась рваним лівим краєм
   із порожнечею справа. Широкий екран далі розкладає це на чотири колонки. */

.ftr {
  position: relative;                    /* якір для кнопки «наверх» */
  border-top: 1px solid var(--line); background: var(--bg-2);
  /* Відступ від вмісту рівно такий, щоб верхня половина кнопки «наверх» (23px)
     стала на межу й не налізла на останній товар. Більше не треба: разом із
     нижнім падінгом сторінки (40px) кожен зайвий піксель тут читається як
     порожня смуга між каталогом і підвалом. */
  margin-top: 26px;
}
.ftr-in {
  max-width: var(--wrap); margin: 0 auto; padding: 26px var(--pad) 22px;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  text-align: center;
}
.ftr-col { display: flex; flex-direction: column; align-items: center; gap: 9px; }

/* ── Колонка 1: логотип і чим торгуємо ── */
.ftr-logo { flex: 0 0 auto; }
/* Логотип у підвалі ЗНАЧНО більший за шапковий (34px): у шапці він конкурує за
   рядок із пошуком і кошиком, а тут стоїть сам і тримає весь блок — маленька
   марка над текстом читалась як випадкова іконка, а не як підпис магазину. */
/* `.logo.ftr-l`, а не просто `.ftr-l`: у блоці ≥1000px є `.logo { height: 84px }`
   (шапка), він стоїть у файлі НИЖЧЕ й при однаковій вазі селектора вигравав —
   через це підвальний логотип на ПК мовчки лишався шапковим розміром. Два класи
   дають більшу вагу й не залежать від порядку правил. */
.logo.ftr-l { height: 84px; }
.ftr-tag { font-size: 13px; color: var(--ink-2); max-width: 230px; }

/* ── Колонка 2: як зв'язатись ── */
.ftr-txt { font-size: 13px; color: var(--ink-2); }
.ftr-txt a { font-weight: 700; }
/* Телефон — той самий зелений, що в шапці: один канал, один колір на весь сайт. */
.ftr-tel { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); }
.ftr-tel svg { width: 17px; height: 17px; fill: currentColor; }
.ftr-tel b { font-size: 17px; font-weight: 800; }
.ftr-tel:hover { color: var(--ok); text-decoration: underline; }
.ftr-hrs { font-size: 12px; color: var(--ink-3); }
.ftr-mail { word-break: break-word; }
/* Viber — фірмовим фіолетовим самого месенджера, залитою таблеткою. Серед сірих
   рядків підвалу текстове посилання «Наша група у Viber» не відрізнялось би від
   пункту меню, а впізнають цей канал саме за кольором. */
.ftr-viber {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 2px; padding: 8px 15px; border-radius: 999px;
  background: #7360f2; color: #fff;
}
.ftr-viber svg { width: 17px; height: 17px; fill: currentColor; }
.ftr-viber b { font-size: 13px; font-weight: 700; }
.ftr-viber:hover { background: #5d4bd8; color: #fff; }

/* ── Колонки 3-4: розділи, порівну ──
   На телефоні обидві половини стають одним суцільним стовпчиком — розрив між
   ними там читався б як межа двох різних переліків. */
.ftr-cats { gap: 10px; font-size: 13.5px; }
/* На телефоні дві половини переліку мусять читатись як ОДИН стовпчик: між
   колонками підвалу стоїть 22px, а всередині переліку — 10px, і на око розділи
   розпадались на два непов'язані списки. Відʼємний відступ зводить шов до тих
   самих 10px. У сітці ПК він знімається — там половини стоять поруч. */
.ftr-cats + .ftr-cats { margin-top: -12px; }
.ftr-cats a { color: var(--ink-2); }
.ftr-cats a:hover { color: var(--red); }

/* ── Кнопка «наверх» ──
   Сидить НА МЕЖІ підвалу — половина кола над нею, половина в ній. Не `fixed`:
   плаваюча кнопка на телефоні накриває правий нижній кут, де в картці стоїть
   «До кошика», і збирає випадкові натиски. Тут вона зʼявляється рівно тоді, коли
   догортали до кінця, тобто коли й потрібна.
   Праворуч тримається краю СМУГИ ВМІСТУ (`calc((100% - wrap)/2 + pad)`), а не
   вікна: на широкому екрані кнопка біля самого краю монітора виглядала б
   загубленою, відірваною від сторінки. */
.totop {
  /* СТОЇТЬ НА МЕЖІ ПІДВАЛУ — половина кола над лінією, половина під нею. На
     телефоні по ЦЕНТРУ (як і решта підвалу), на ПК — біля правого краю смуги
     вмісту. Не `fixed`: плаваюча кнопка на телефоні накриває правий нижній кут,
     де в картці стоїть «До кошика», і збирає випадкові натиски. */
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(180deg, #2c43a0, var(--blue));
  color: #fff; box-shadow: 0 3px 10px rgba(34, 52, 126, .32);
}
.totop:hover { background: linear-gradient(180deg, var(--blue), var(--blue-d)); color: #fff; }
.totop svg { width: 30px; height: 30px; }
/* Два шеврони блимають ПО ЧЕРЗІ (зсув .26с): око читає це як рух знизу вгору,
   тобто як напрямок, — а кнопка, що блимає цілком, просто миготить. */
.totop .ch2 { animation: chBlink 1.3s infinite; }
.totop .ch1 { animation: chBlink 1.3s infinite .26s; }
@keyframes chBlink { 0%, 55%, 100% { opacity: .28 } 22% { opacity: 1 } }
/* Кому рух заважає (вестибулярні розлади, налаштування системи) — стрілка просто
   стоїть повністю видимою. */
@media (prefers-reduced-motion: reduce) {
  .totop .ch1, .totop .ch2 { animation: none; opacity: 1; }
}

.ftr-cod {
  border-top: 1px solid var(--line); padding: 11px var(--pad);
  text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.ftr-cp {
  border-top: 1px solid var(--line); padding: 12px var(--pad);
  text-align: center; font-size: 12px; color: var(--ink-3);
}

/* ── ПК: чотири колонки ──
   Логотип і контакти вужчі, два стовпці розділів — ширші й рівні між собою.
   `align-items:start` — щоб короткий стовпець не розтягувався по висоті сусіда,
   а рядки в кожній колонці починались з однієї лінії. */
@media (min-width: 760px) {
  .ftr-in {
    display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: start; gap: 26px 34px;
    padding: 30px var(--pad) 26px; text-align: left;
  }
  .ftr-col { align-items: flex-start; }
  /* На ПК кнопка з центру переїжджає ВПРАВО — там під нею перша колонка з
     логотипом, і коло по центру межі стояло б рівно над контактами. Праворуч
     тримається краю СМУГИ ВМІСТУ, а не вікна: біля самого краю монітора вона
     виглядала б загубленою, відірваною від сторінки. */
  .totop {
    left: auto; right: max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));
    transform: translateY(-50%);
  }
  .ftr { margin-top: 46px; }
  .logo.ftr-l { height: 104px; }
  .ftr-cats + .ftr-cats { margin-top: 0; }
  .ftr-brand { max-width: 210px; }
  .ftr-tag { max-width: none; }
}

/* ─────────────────────────── Повідомлення ─────────────────────────── */

.toast {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 20px);
  z-index: 70; max-width: min(92vw, 420px);
  padding: 12px 18px; border-radius: 10px;
  background: var(--blue); color: #fff; font-size: 14px; font-weight: 600; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  box-shadow: 0 8px 26px rgba(24, 37, 89, .28);
}
.toast.on  { opacity: 1; transform: translate(-50%, 0); }
/* Колір = характер відповіді, і читають його раніше за слова:
   зелене — дія вдалась («Додано до кошика +2 шт»),
   червоне — не вдалась («В наявності обмежена кількість»).
   Доти зеленого варіанта не існувало, і єдине, що покупець бачив унизу екрана,
   було червоне — тобто саме спливаюче означало «щось не так». */
.toast.ok  { background: var(--ok); box-shadow: 0 8px 26px rgba(19, 122, 63, .30); }
.toast.bad { background: var(--red); }

/* ─────────────────────────────── Лайтбокс ─────────────────────────────── */
/* Фото на весь екран, під ним — назва, ціна й «До кошика»: щоб роздивитись товар
   не треба було виходити зі сторінки й повертатись.

   `.lb[hidden]` прописано ЯВНО: атрибут `hidden` — це лише `display:block` у
   таблиці браузера, і будь-який власний `display` його мовчки перебиває. Без
   цього рядка модалка висіла б розкритою завжди. */
.lb {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 14px;
  background: rgba(24, 37, 89, .74);
}
.lb[hidden] { display: none; }
body.lb-on { overflow: hidden; }

.lb-in {
  position: relative; width: 100%; max-width: 940px;
  max-height: calc(100dvh - 28px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.lb-ph {
  flex: 1 1 auto; min-height: 0; padding: 16px;
  display: flex; align-items: center; justify-content: center;
}
.lb-ph img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lb-f {
  flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--bg-2);
  padding: 12px 16px; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
}
.lb-t { flex: 1 1 220px; min-width: 0; }
.lb-n { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.lb-p { font-size: 21px; margin-top: 3px; }
.lb-x {
  position: absolute; top: 6px; right: 8px; z-index: 2;
  width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .9); color: var(--ink);
  font-size: 26px; line-height: 1;
}
.lb-x:hover { background: #fff; color: var(--red); }

/* Стрілки й лічильник з'являються, лише коли гортати справді є що (`.multi` вішає
   скрипт). Стоять НАД фото, а не під ним: гортають, дивлячись на знімок, і
   опускати погляд на панель керування в цей момент нікому не потрібно. */
.lb-nav, .lb-i { display: none; }
.lb.multi .lb-nav, .lb.multi .lb-i { display: flex; }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 64px; border: 0; border-radius: 10px; cursor: pointer;
  align-items: center; justify-content: center;
  background: rgba(34, 52, 126, .72); color: #fff; font-size: 30px; line-height: 1;
}
.lb-nav:hover { background: var(--red); }
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
.lb-i {
  position: absolute; top: 12px; left: 14px; z-index: 2;
  align-items: center; padding: 3px 9px; border-radius: 20px;
  background: rgba(34, 52, 126, .72); color: #fff; font-size: 12.5px; font-weight: 700;
}

/* Підказка, що фото збільшується: без неї на нього просто не натискають. */
.gal-big[data-lb-open] { position: relative; cursor: zoom-in; }
.gal-zoom {
  position: absolute; right: 10px; bottom: 10px;
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34, 52, 126, .82); color: #fff; font-size: 15px;
}

/* ═══════════════════════════ Ширші екрани ═══════════════════════════ */

@media (min-width: 640px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .subtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Третя колонка додається вже тут, а не з 760px: РОЗГОРНУТИЙ складаний телефон
     (Galaxy Z Fold — 673px, Pixel Fold — 701px) не дотягував до 760 і показував
     ті самі 2 картки, що й у складеному вигляді — екран став удвічі ширшим, а
     товарів у ряду не додалось. На 640px картка виходить ~196px — ширша за
     картку звичайного телефона (~168px), тож нічого не тісниться.
     `.v-list .grid` переїхав сюди ж: у режимі «рядками» сітка мусить лишатись
     одноколонковою рівно там, де сітка карток стає багатоколонковою. */
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .v-list .grid { grid-template-columns: minmax(0, 1fr); }
  .h1 { font-size: 26px; }
  .crow {
    grid-template-columns: 72px minmax(0, 1fr) 120px auto 120px 34px;
    grid-template-areas: "ph name price qty sum x";
  }
  .crow-p { text-align: right; font-size: 14px; color: var(--ink); }
/* Рядок кошика без ціни («під замовлення»): підпис замість числа — дрібніший і
   сірий, щоб не читався як сума. */
.crow-p.ask, .crow-s.ask { color: var(--ink-3); font-weight: 700; font-size: 12.5px; }

  /* Рядок стає справжнім рядком: фото — назва з артикулом — ЦІНА — кнопка. Ціна
     тут уже власний стовпчик між назвою й кнопкою: саме так її читають у прайсі —
     очима згори вниз по одному стовпчику, а не вишукуючи в кожному рядку заново. */
  .v-list .card-ph { flex: 0 0 104px; width: 104px; padding: 8px; }
  .v-list .card-b {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "name price f" "meta price f";
  }
  .v-list .card-f { margin-top: 0; gap: 14px; }
}

@media (min-width: 760px) {
  .prod { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 26px; align-items: start; }
  .pinfo { padding-top: 0; }
  .head-t { flex: 0 1 auto; }
  /* Сортування й перемикач вигляду — щільною групою СПРАВА, навпроти заголовка:
     посередині рядка вони читались як частина назви розділу. */
  .head-r { flex: 0 0 auto; margin-left: auto; }
}

@media (min-width: 760px) {
  /* Пошук переїжджає в САМУ шапку, між логотипом і кошиком. */
  /* Пошук стоїть РІВНО ПОСЕРЕДИНІ вільного місця між підписом логотипа й «RU»:
     обидва бічні відступи `auto` ділять залишок ширини порівну. Тому ж
     `.hdr-act` тут ГУБИТЬ свій `margin-left:auto` (на телефоні він лишається —
     там пошук не центрують, кошик просто тисне вправо): два `auto` поспіль
     ділили б залишок на трьох, і форма з'їхала б ліворуч від центру.
     `flex-grow:0` — щоб форма не з'їдала цей залишок замість відступів. */
  /* Пошук ЗВУЖЕНО (було 400px): місце між підписом логотипа й кошиком тепер ділять
     троє, і поле, розтягнуте на 400px, лишало телефонному блоку смужку, в якій
     рядок «Прийом замовлень у телефонному режимі» переносився на три. Пошук за
     назвою або артикулом — короткий запит, 280px йому вдосталь. */
  .srch { flex: 0 1 280px; order: 0; max-width: 280px; margin-left: auto; margin-right: auto; }
  .hdr-act { margin-left: 0; }
  .cart-tx { display: block; }
  .cart-btn { padding: 0 13px 0 11px; height: 42px; }
  /* Кошик тут РОЗГОРНУТИЙ (іконка + підпис), тому наліпка на куті іконки з
     тризначним числом налазила і на іконку, і на «Кошик». Знімаємо її з
     абсолюту — стоїть окремою пігулкою в рядку й ширшає скільки треба. */
  .cart-n { position: static; transform: none; }
  .lang { height: 42px; }
}

@media (min-width: 1000px) {
  :root { --pad: 20px; }

  /* Фільтри перестають бути шухлядою й просто стоять збоку. */
  .cols { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }
  /* Категорія без підрозділів і без фасетів бічної колонки не має взагалі —
     порожні 250px зліва виглядали б як недовантажена сторінка. */
  .cols.nocols { display: block; }
  .fbtn, .side-x, .side-h { display: none; }
  /* Колонка на ПК — просто дві картки одна під одною, БЕЗ власної прокрутки:
     раніше вона була вікном фіксованої висоти з внутрішнім скролом (а всередині
     нього — ще один, у списку значень), і колесо миші над фільтрами гортало то
     одне, то інше замість сторінки. Тепер колонка тече разом зі сторінкою. */
  .side {
    position: static; width: auto; transform: none;
    max-height: none; overflow: visible;
    background: none; border: 0; padding: 0;
    /* `z-index` ОБОВʼЯЗКОВО скинути разом із `position`.
       На телефоні колонка — висувна шухляда (`position:fixed; z-index:50`) і
       мусить лежати поверх усього. Тут вона знову звичайний блок, АЛЕ `.cols` —
       це `display:grid`, а елемент сітки (як і флекс-елемент) ураховує `z-index`
       НАВІТЬ при `position:static`. Тобто 50 продовжувало діяти й било шапку
       (`z-index:40`): при гортанні фільтри малювались ПОВЕРХ логотипа й пошуку. */
    z-index: auto;
  }
  /* Чипи над списком — дубль бічних: на ПК колонка з ними відкрита постійно. */
  .chips-top { display: none; }
  .sbox { margin: 0 0 14px; }
  .sbox:last-child { margin-bottom: 0; }
  body.side-on { overflow: auto; }
  body.side-on .side-ov { display: none; }

  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v-list .grid { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  /* Логотип на ПК значно більший — шапка тримається на ньому, а не на тексті. */
  .logo { height: 84px; }
  /* Стрічка категорій перестає прокручуватись і переноситься: на ПК обрізана
     «Системи зберігання інстр» читається як зламана верстка, а не як натяк
     на горизонтальний скрол. */
  /* Стрілки стрічки виробників — лише там, де є миша: пальцем стрічку гортають
     свайпом, і дві кнопки поруч із ним були б зайвою мішенню. */
  .brnds-w.has-a .brnds-a { display: flex; align-items: center; justify-content: center; }
  /* Меню знову СТРІЧКА: на ПК випадаючий список був би зайвим кліком там, де всі
     сім розділів і так влазять у рядок. `<summary>` ховаємо, а `open` тримає
     розмітка (і `shop.js` — після повороту екрана назад у широкий). */
  .cats-s { display: none; }
  .cats-in {
    flex-direction: row; flex-wrap: wrap; overflow: visible; gap: 2px; padding: 0 var(--pad);
  }
  /* На ПК підпис у стрічці категорій на пункт більший (13.5 → 14.5): на телефоні
     він тісниться в рядок, що гортається, а тут місця вдосталь, і меню — перше,
     що читають на сторінці. */
  .cat-lnk { padding: 11px 13px; border-radius: 0; font-size: 14.5px; white-space: nowrap; }
  /* Назва товару на ПК — теж на пункт більша (13.5 → 14.5), і однаково в обох
     виглядах каталогу: плитка й список беруть розмір з одного правила `.card-n`,
     тож розійтись їм ніде. Клемп заданий у `em`, тому висота картки перерахується
     сама й рядок карток лишиться рівним. */
  .card-n { font-size: 14.5px; }
  .hdr-sub { display: block; padding-right: 14px; }
  /* Телефон повертається В РЯДОК шапки — між підписом логотипа й пошуком — і
     розкладається в стовпчик: два рядки пояснення, під ними номер великим.
     Саме з ЦІЄЇ ширини, а не з 760px: до неї в рядку нема місця навіть на підпис
     біля логотипа (`.hdr-sub` теж з'являється тут), і телефон, втиснутий туди
     четвертим, забрав би його в поля пошуку. Нижче він лишається окремим рядком
     під шапкою — там це не гірше, а на дотик навіть зручніше. */
  .hdr-call {
    order: 0; flex: 0 1 auto;
    display: block; padding-top: 0; margin-top: 0; border-top: 0;
    text-align: center;
  }
  /* На ПК телефон стоїть У РЯДКУ шапки як звичайний її елемент — він нічого не
     перекриває й ні за ким не їде, тож і ховати його нема від чого. Тому і
     хрестик тут зайвий, і закритість, обрана колись на телефоні, тут не діє. */
  .hdr-call-x { display: none; }
  .hdr-call.off { display: block; }
  .hdr-call-t b, .hdr-call-t i { font-size: 12px; }
  .hdr-tel { margin-top: 2px; }
  .hdr-tel b { font-size: 19px; }
  .hdr-in { padding: 10px var(--pad); }
  :root { --hdr-h: 96px; }
  .h1 { font-size: 29px; }
  /* Підрозділи на ПК живуть лівим підменю; плитка в основній колонці — для
     телефона, де ліва колонка схована в шухляду. */
  .subtiles { display: none; }
}