/* Вітрина каталогу «Всі Тканини».
   Візуал близький до vsitkanyny.com.ua: білий фон, темний текст, синій акцент.
   Верстано від телефона; на широкому екрані фільтри стають колонкою ліворуч —
   власник просив, щоб вони були одразу видні над товаром, а не збоку в панелі. */

:root {
  --ink: #1b1f24;
  --muted: #6b7280;
  --line: #e6e8ec;
  --accent: #1a6ee0;
  --accent-soft: #eef4fd;
  --bg: #ffffff;
  --soft: #f6f8fa;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
  /* Ширина колонки фільтрів. 268 → 300 px 28.08.2026, рішення власника:
     «карточки большие, а фильтр маленький». Плитки поменшали в ряду
     з пʼяти до чотирьох, тобто стали ширшими, — і вузька колонка поруч
     виглядала притиснутою. Ширше 320 не беремо: місце йде в товар. */
  --side: 300px;
}

* { box-sizing: border-box; }

/* Атрибут hidden має вимикати елемент завжди.
   Без цього рядка будь-який наш `display: flex/grid` перебиває його, і
   «прихована» шапка лишалась видимою на стартовому екрані. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

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

   Лікуємо двома незалежними способами, щоб напевно:
     1) `body` — колонка на всю висоту, підвал з `margin-top: auto` іде вниз;
     2) фон самого `html` — колір підвалу: навіть якщо десь перший спосіб
        не спрацює (наприклад, у старому браузері), під підвалом буде
        не біла діра, а той самий сірий.

   ⚠️ `body > *` навмисно `flex: 0 0 auto` — без цього діти колонки почали б
   стискатись і розтягуватись, і верстка каталогу поїхала б. */
html { background: var(--soft); }
body {
  min-height: 100vh;
  min-height: 100dvh;          /* на телефоні враховує панель браузера */
  display: flex; flex-direction: column;
}
body > * { flex: 0 0 auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- шапка ---------- */
.top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.6) blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; letter-spacing: -.01em; margin-right: auto; }

/* ---------- пошук у шапці ----------
   Власник 12.08.2026: «нужно сделать поиск по артикулу или по любой другой
   информации как в интернет магазине». Поле округле, як звикли в магазинах.
   На телефоні воно не влазить у рядок із назвою й кнопкою фільтрів —
   тому там переїжджає окремим рядком під ними (медіа-запит нижче). */
.qbox {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 200px; max-width: 460px;
  padding: 0 12px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .15s ease, background .15s ease;
}
.qbox:focus-within { background: #fff; border-color: var(--accent); }
.q-ic { color: var(--muted); flex: none; }
.qbox input {
  flex: 1; min-width: 0;
  padding: 9px 0;
  border: 0; outline: 0; background: transparent;
  font: inherit; color: inherit;
}
.qbox input::placeholder { color: var(--muted); }
/* Свій хрестик малюємо самі — рідний у Safari й Chrome виглядає по-різному
   і не вміє скидати наш стан. */
.qbox input::-webkit-search-cancel-button,
.startq input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.q-x {
  flex: none; display: flex; align-items: center;
  padding: 4px; border: 0; background: none; color: var(--muted);
}
.q-x:hover { color: var(--ink); }

@media (max-width: 639px) {
  .top { flex-wrap: wrap; }
  .qbox { order: 3; flex-basis: 100%; max-width: none; }
}

/* ---------- шлях (хлібні крихти) ----------
   Власник: «было бы хорошо видеть каскадную относительность —
   Опт › Каталог › Фліс». У шапці для цього немає місця, тому окремим
   рядком під нею. Довгий шлях прокручується вбік, а не ламає верстку. */
/* Крихти теж переносимо: у них лежить текст запиту («Пошук: …»). */
.crumbs b, .crumbs span { overflow-wrap: anywhere; }
.crumbs {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px 0;
  font-size: 13px; color: var(--muted);
  overflow-x: auto; white-space: nowrap;
  scrollbar-width: none;
}
.crumbs::-webkit-scrollbar { display: none; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs i { font-style: normal; opacity: .45; }        /* роздільник › */
.crumbs b { color: var(--ink); font-weight: 600; }     /* поточна сторінка */
@media (min-width: 900px) { .crumbs { padding: 12px 14px 0; font-size: 13.5px; } }
/* 🛑 Пункт И16: було 30×30 при нормі 44 для пальця — а це єдиний спосіб
   повернутись назад. Збільшуємо область натискання, значок той самий. */
.back {
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--ink); padding: 4px;
  min-width: 44px; min-height: 44px; margin-left: -6px;
}
.fbtn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight: 600;
}
.fbtn b {
  min-width: 20px; height: 20px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 12px;
  display: inline-grid; place-items: center; padding: 0 5px;
}
@media (min-width: 900px) { .fbtn { display: none; } }

/* ---------- стартовий екран ----------
   Зроблено в стилі банерів vsitkanyny.com.ua: бежеве тло, великий заголовок
   ліворуч зверху, фото товару всередині, біла кнопка знизу. */
/* Вузька колонка: на широкому екрані картки не мають розтягуватись на всю
   ширину — пропорції тримаємо такі ж, як на телефоні. */
/* 🛑 Стартовий екран розсувало вбік — знайдено 26.08.2026 за скаргою власника:
   «кнопки Опт і Роздріб зрізає, шматок сірого в підвалі пропав, доводиться
   гортати сайт зліва направо».

   Причина: тут стояло `place-items: center`, тобто ще й `justify-items: center`.
   При цьому колонка ґрід-ячейки стискається ПО ВМІСТУ, і `width: 100%`
   рахується вже від неї. А всередині лежить ряд «Ви Дивились» із
   горизонтальною прокруткою: одинадцять карток по 92 px просять 1012 px,
   ячейка роздувається до `max-width` 460 — при екрані 375.

   Заміряно тоді ж: `body` лишався 375, а сторінка ставала 478. Звідси все
   разом: кнопки зрізає, підвал сірий тільки до 375, решта біла.

   Лікується двома речами: колонка розтягується на всю ширину (`stretch`),
   а блок центрується полями. Плюс `min-width: 0` — без нього прокрутка
   всередині все одно розпирає батька. */
.start {
  min-height: 100dvh; display: grid;
  align-items: center; justify-items: stretch;
  padding: 28px 18px;
}
.start-inner { width: 100%; max-width: 460px; margin-inline: auto; min-width: 0; }

/* Усе по лівому краю — так просив власник.
   Банери з фото пробували й відмовились: фото зі складу туди не годяться,
   а варіант з іконками читається краще. */
.logo { text-align: left; margin: 0 0 24px; line-height: 1; }
.logo span { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.logo em {
  font-style: normal; font-size: 34px; font-weight: 800; margin: 0 6px;
  background: linear-gradient(90deg, #e94f4f, #f0a13a, #46b04a, #2f7fe0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo i {
  display: block; margin-top: 9px; font-style: normal;
  font-size: 11.5px; letter-spacing: .2em; color: var(--muted);
}

.choose { display: grid; gap: 12px; }

/* Іконка попереду, текст ліворуч, стрілка праворуч —
   одразу читається, що це перехід, а не перемикач. */
.choice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 15px;
  padding: 17px 18px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; box-shadow: var(--shadow);
  transition: border-color .15s, transform .06s;
}
.choice:hover { border-color: var(--accent); }
.choice:active { transform: scale(.995); }

.choice-ic {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent);
}
.choice-txt { display: grid; gap: 3px; text-align: left; }
.choice-txt b { font-size: 19px; font-weight: 700; }
.choice-txt i { font-style: normal; color: var(--muted); font-size: 14px; }
.choice-go { color: #b6bcc6; display: grid; place-items: center; }

/* ---------- пошук на стартовому екрані ----------
   Щоб клієнт, який знає артикул, не мусив спершу обирати Опт чи Роздріб:
   розділ підбереться сам — туди, де знайшлося. */
.startq {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 5px 5px 5px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow);
  transition: border-color .15s ease;
}
.startq:focus-within { border-color: var(--accent); }
.startq > svg { color: var(--muted); flex: none; }
.startq input {
  flex: 1; min-width: 0; padding: 10px 0;
  border: 0; outline: 0; background: transparent; font: inherit; color: inherit;
}
.startq input::placeholder { color: var(--muted); }
.startq button {
  flex: none; padding: 11px 18px;
  border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 600;
}
.startq button:hover { filter: brightness(1.06); }
/* Поки рахуємо, у якому розділі шукати, — форма не приймає повторних натискань */
.startq.busy { opacity: .55; pointer-events: none; }

/* На вузькому екрані підказка «Знайти тканину або артикул» не влазила —
   кнопка з'їдала останні букви. Прибираємо лупу (кнопка й так каже, що це
   пошук) і робимо кнопку компактнішою. Шрифт не зменшуємо: на iPhone поле
   з розміром меншим за 16px змушує браузер наближати сторінку. */
@media (max-width: 430px) {
  .startq { padding-left: 13px; gap: 8px; }
  .startq > svg { display: none; }
  .startq button { padding: 11px 15px; }
}

/* ---------- сторінка каталогу ---------- */
.page { display: block; }
@media (min-width: 900px) {
  .page { display: grid; grid-template-columns: var(--side) 1fr; align-items: start; }
}

.main { padding: 12px 14px 48px; min-width: 0; }
.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 2px 2px 12px;
}
.sum { color: var(--muted); font-size: 13px; }

/* Перемикач вигляду каталогу — 26.08.2026.
   Стоїть у тому ж рядку, що й лічильник, праворуч: це не головна дія,
   а спосіб подивитись інакше. Тому кнопка спокійна, без заливки. */
.viewsw {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.viewsw:hover { border-color: var(--accent); color: var(--accent); }
.viewsw[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: #f3f7ff; }
.viewsw svg { flex: 0 0 auto; }
@media (max-width: 430px) {
  .viewsw span { display: none; }        /* на телефоні лишається сам значок */
  /* 🛑 Пункт И15: на телефоні кнопка була 36×32 — менше за норму для пальця
   і без жодного слова про те, що вона робить. Лишаємо іконку (напис
   «Показати тканинами» не влазить у рядок лічильника), але робимо кнопку
   такою, щоб у неї можна було влучити. */
.viewsw { padding: 7px 9px; min-width: 44px; min-height: 40px; }
}

/* Рядок м'якого пошуку — не службовий підпис, а пояснення, чому показано
   не те, що просили. Власник 25.08.2026: «текст про збіг варто зробити
   більше» (перевіряв у Chrome, 100%, MacBook Air 13"). Тому крупніше,
   темніше і з плашкою — щоб не губився серед карток. */
.sum.soft {
  color: var(--ink); font-size: 15px; line-height: 1.45;
  background: var(--accent-soft); border-radius: var(--radius);
  padding: 10px 14px; display: block;
}
.sum.soft b { font-weight: 700; }
@media (min-width: 900px) { .sum.soft { font-size: 15.5px; } }
.link {
  border: 0; background: transparent; color: var(--accent);
  font-size: 13px; font-weight: 600; padding: 4px 0;
}

/* Кнопка-посилання, що просить підтвердження: «Точно очистити?».
   Червоний той самий, що в помилках форми — щоб на екрані не з'явилось
   третього відтінку тривоги. */
.link.danger { color: #e0245e; font-weight: 600; }

/* «Очистити Кошик» — саме КНОПКА, а не напис.
   Власник 28.08.2026: «И очистить корзине, тоже кнопкой а не надписью».
   Раніше вона мала клас `link` — синій текст без рамки й тла, і читалась
   як посилання. Механіка перепитування лишилась та сама: перший дотик
   робить її червоною «Точно очистити?», другий чистить, через 4 секунди
   вона передумує сама.

   ⚠️ Решта кнопок «Очистити» (переглянуті, обране, порівняння) поки
   лишаються написами — власник говорив саме про кошик. */
.cart-clear {
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 13px; font-weight: 600;
}
.cart-clear:hover { background: var(--soft); }
.cart-clear.danger {
  border-color: #e0245e; color: #e0245e; background: #fff5f8;
}

/* Сіра заготовка галереї, поки не приїхало фото. Раніше розміри стояли
   атрибутом `style` просто в розмітці — прибрано 28.08.2026 разом із рештою
   таких атрибутів, щоб політика CSP могла заборонити inline-стилі. */
.gal-skeleton { width: 84%; aspect-ratio: 1; border-radius: 10px; }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, 1fr); } }
/* 🛑 П'ята колонка прибрана 28.08.2026, рішення власника: «как насчёт
   сократить кол-во карточек которые в одном ряду в каталоге с 5-ти
   до 4-х?». На широкому екрані плитка стає більшою — фото тканини видно
   краще, а це головне, за чим сюди приходять. Рядок був:
   @media (min-width: 1500px) { .grid { grid-template-columns: repeat(5, 1fr); } } */

.card { display: block; position: relative; }

/* ============================================================================
   ПЛИТКА ПІД МИШЕЮ: піднімається й відкриває характеристики (пункт Е2)

   Задум власника 28.08.2026, зразок — власний сайт vsitkanyny.com.ua:
   «при наведении карточка слегка выделяется и поднимается над остальными,
   + приоткрывается информация про её характеристики».

   🛑 Тільки там, де є справжня миша: `hover: hover` і `pointer: fine`.
   На телефоні наведення не існує — там плитка лишається такою, як була,
   і блок характеристик не показується взагалі. Це важливо ще й тому, що
   на телефоні перше торкання по «hover-елементу» браузер витрачає
   на показ ефекту, а не на перехід.

   ⚠️ Сусідів не рухаємо: блок стоїть `position: absolute` поверх сітки,
   тому решта плиток лишається на своїх місцях, а не роз'їжджається.
   ============================================================================ */
.card-spec { display: none; }

@media (hover: hover) and (pointer: fine) {
  .card {
    border-radius: 14px;
    transition: transform .16s ease, box-shadow .16s ease;
  }
  /* 🛑 ТІНЬ ТУТ ОДНА НА ВСЕ, і це не примха.
     Спершу тінь була у плитки й окремо у блоку характеристик — власник
     одразу побачив на знімку: «очень странная тень сверху характеристик,
     как бы налезает на всё что выше». Так і було: `box-shadow` світить
     на всі боки, тож верхня тінь блоку лягала на ціну й кнопку кошика,
     а на стику дві тіні складались у сіру смугу.

     `drop-shadow` малює тінь по СИЛУЕТУ всього, що намальовано, — плитка
     разом із блоком під нею дають один контур, і тінь іде тільки назовні.
     Тому `box-shadow` тут немає ні в плитки, ні в блоку. */
  .card:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 10px 16px rgba(16, 24, 40, .16));
    z-index: 5;
  }
  /* Підкладка під самою плиткою: біле тло з полями, щоб піднята плитка
     виглядала окремою карткою, а не шматком сітки. Псевдоелемент, а не
     `padding`, — інакше вміст плитки посунувся б і поїхала б уся сітка. */
  .card::before {
    content: ''; position: absolute; inset: -10px -10px -6px;
    background: #fff; border-radius: 14px 14px 0 0;
    border: 1px solid var(--line); border-bottom: 0;
    opacity: 0; transition: opacity .16s ease; z-index: -1;
  }
  .card:hover::before { opacity: 1; }

  .card-spec {
    display: block;
    position: absolute; left: -10px; right: -10px; top: 100%;
    margin-top: 6px;
    padding: 4px 14px 12px;
    background: #fff;
    border: 1px solid var(--line); border-top: 0;
    border-radius: 0 0 14px 14px;
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    pointer-events: none;
  }
  .card:hover .card-spec {
    opacity: 1; visibility: visible; transform: translateY(-4px);
  }
  /* Власник 28.08.2026 про перший варіант: «как-то всё сильно плотно».
     Тепер кожна ознака — окремий рядок із повітрям і тонкою лінією між
     ними, як у таблиці характеристик усередині картки. */
  .card-spec-r {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    font-size: 12.5px; line-height: 1.45;
    border-top: 1px solid var(--line);
  }
  .card-spec-r:first-child { border-top: 0; }
  .card-spec-r span { color: var(--muted); white-space: nowrap; }
  .card-spec-r b { font-weight: 600; text-align: right; }
}
.card .ph {
  aspect-ratio: 1/1; background: var(--soft);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .nm { font-size: 14px; font-weight: 600; margin: 8px 2px 2px; line-height: 1.3; }
.card .sub { font-size: 12px; color: var(--muted); margin: 0 2px; }
/* Порожня колонка «Фільтри» на екрані «нічого не знайшлося» — критик
   26.08.2026: лишалась сама лише кнопка «Скинути» в порожньому стовпчику.
   ⚠️ Ховаємо ТІЛЬКИ на комп'ютері, де панель стоїть колонкою постійно.
   На телефоні вона висувна й так схована — там ховати нічого, а `display:none`
   ще й зламав би кнопку «Фільтри». */
@media (min-width: 900px) {
  .side:has(#filters:empty) { display: none; }
  /* ⚠️ Сховати панель мало: сітка лишається двоколонковою, і вміст падає
     у вузьку колонку, розраховану під фільтри. Спіймано одразу після правки
     26.08.2026 — текст «нічого не знайшлося» стиснувся в стовпчик ліворуч.
     Тому колонок теж має стати одна. */
  .page:has(#filters:empty) { grid-template-columns: 1fr; }
}

/* Квадратики кольорів на плитці групи — 26.08.2026, вигляд «тканинами».
   Дрібніші за ті, що в картці товару: тут вони не для вибору, а щоб показати
   «цього кольорів багато». Вибирають уже всередині картки. */
.tile-colors {
  /* ⚠️ `nowrap` навмисно: рядок кольорів має бути РІВНО ОДИН, інакше плитки
     виходять різної висоти і сітка рветься (заміряно 26.08.2026: розкид
     висот 51 px). «ще N» стоїть у тому ж рядку — вказівка власника. */
  display: flex; align-items: center; flex-wrap: nowrap; gap: 4px;
  /* ⚠️ Відступ 2 px ліворуч — рівно такий самий, як у назви й ціни
     (`.card .nm`, `.card-price`). Без нього ряд стирчав на два пікселі
     лівіше за текст: власник помітив одразу — «они не ровно выровнены
     по левой части, поехали». */
  margin: 8px 2px 2px; min-height: 22px; overflow: hidden;
}
.tile-sw {
  width: 22px; height: 22px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 5px; overflow: hidden;
  background: var(--soft);
}
.tile-sw img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-more { font-size: 11.5px; color: var(--muted); margin-left: 2px; }

/* Технічні характеристики на плитці (пункт Г4, 26.08.2026): щільність
   і ширина. Дрібніше й світліше за назву — це довідка, а не заголовок,
   але видно без заходу в картку. */
.teh {
  font-size: 12px;
  color: var(--muted, #8a8f98);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-price {
  margin: 6px 2px 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.015em;
  display: flex; align-items: baseline; gap: 3px;
}
.card-price i {
  font-style: normal; font-weight: 400; font-size: 12.5px;
  color: var(--muted); letter-spacing: 0; margin-left: 2px;
}

/* ---------- ціна в картці товару ----------
   Перший варіант був «коробкою» — сіра заливка з рамкою. Власник:
   «не совсем в стиле нашей витрины, нужно чуть более эстетичнее».
   Справедливо: вітрина побудована на білому й тонких лініях, а плашка
   виглядала вставкою. Тепер ціна просто дихає на білому. */
.price { margin: 26px 14px 0; }

.price-main {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.05;
}
.price-main span {                      /* валюта — тонша за число */
  font-size: 19px; font-weight: 500; color: var(--muted); letter-spacing: 0;
}
.price-main i {
  font-style: normal; font-size: 14px; font-weight: 400; color: var(--muted);
  letter-spacing: 0;
}

/* Драбина роздрібних цін: рівні читаються як список, а не як таблиця. */
.price-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.price-steps > div {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff;
}
.price-steps em { font-style: normal; font-size: 13px; color: var(--muted); }
.price-steps b { font-size: 14.5px; font-weight: 700; }

/* ============================================================================
   ВІКНО ВИБОРУ ТКАНИНИ ДЛЯ ПОРІВНЯННЯ — 26.08.2026

   Замість панелі в кінці сторінки — вікно поверх неї. На телефоні майже
   на весь екран, на комп'ютері по центру. Всередині плитки з фото: тканину
   обирають очима, а не набирають текстом.
   ============================================================================ */
.cmp-modal { position: fixed; inset: 0; z-index: 60; display: flex;
             align-items: center; justify-content: center; padding: 16px; }
.cmp-modal[hidden] { display: none; }
.cmp-modal-bg { position: absolute; inset: 0; background: rgba(16,24,40,.45); }
.cmp-modal-win {
  position: relative; z-index: 1;
  width: 100%; max-width: 720px; max-height: 86dvh;
  background: #fff; border-radius: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
  padding: 14px 14px 10px;
}
.cmp-modal-x {
  border: 0; background: none; padding: 6px; margin: -6px -6px -6px 0;
  color: var(--muted); cursor: pointer; border-radius: 8px;
}
.cmp-modal-x:hover { color: var(--ink); background: var(--soft); }

/* Пояснення, з чого саме обираємо, і розділювач перед дорогою в каталог.
   Без них вікно виглядало так, ніби тканини взялись нізвідки. */
.cmp-find-lead {
  margin: 8px 2px 0; font-size: 13px; color: var(--muted);
}
.cmp-find-or {
  margin: 12px 2px 0; font-size: 13px; color: var(--muted); text-align: center;
}

/* Дорога в каталог — саме КНОПКА, а не дрібне посилання внизу.
   Власник 26.08.2026: «а ти просто цю кнопку дуже красиво заховав у самому
   низу», і про напис: «навіщо уточнювати, що це з фільтрами? Просто
   вирушайте в каталог». Тому: помітна кнопка на всю ширину і короткий напис. */
.cmp-find-cat {
  display: block; margin-top: 6px; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  text-align: center; text-decoration: none;
  font-size: 14.5px; font-weight: 600; color: var(--accent);
  background: #fff;
}
.cmp-find-cat:hover { border-color: var(--accent); background: #f3f7ff; }

/* Плитки всередині вікна — та сама сітка, що в каталозі, тільки дрібніша. */
/* ⚠️ Селектор із двох класів навмисно: `.cmp-find-res` оголошений нижче
   в цьому ж файлі і своїм `display: flex` перебивав звичайний `.cmp-pick` —
   плитки лягали одним стовпцем на всю ширину (спіймано одразу, 26.08.2026). */
.cmp-find-res.cmp-pick {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  overflow-y: auto; margin-top: 10px; padding-bottom: 4px; min-height: 0;
  /* ⚠️ Рядки — по вмісту, інакше всі однакової висоти й підпис під фото
     обрізається (спіймано 26.08.2026 одразу після першої правки). */
  align-content: start; grid-auto-rows: max-content;
}
@media (min-width: 560px) { .cmp-find-res.cmp-pick { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .cmp-find-res.cmp-pick { grid-template-columns: repeat(4, 1fr); } }

.cmp-pick-i {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #fff; text-align: left; padding: 0; cursor: pointer;
  display: flex; flex-direction: column;
}
.cmp-pick-i:hover { border-color: var(--accent); }
.cmp-pick-i[disabled] { opacity: .5; cursor: default; }
.cmp-pick-ph { aspect-ratio: 1/1; background: var(--soft); display: block; }
.cmp-pick-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-pick-t { font-size: 13px; font-weight: 600; margin: 7px 8px 0; line-height: 1.25; }
.cmp-pick-s { font-size: 11.5px; color: var(--muted); margin: 2px 8px 8px; }

/* Оптова ціна в роздрібній картці (26.08.2026).
   Окремий рядок під сходинкою роздрібних цін: інша валюта й інша умова,
   тож змішувати зі сходинками не можна — людина сплутає гривню з доларом.
   Тому рамка з відступом зверху, а не ще одна «пігулка» в тому ж ряду. */
.price-opt {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin-top: 14px; padding: 11px 13px;
  border: 1px dashed var(--line); border-radius: var(--radius);
}
.price-opt em { font-style: normal; font-size: 13px; color: var(--muted); }
.price-opt b { font-size: 16px; font-weight: 700; }
.price-opt > span { font-size: 13px; color: var(--muted); }
.price-opt a {
  margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--accent);
  white-space: nowrap;
}
@media (max-width: 430px) {
  .price-opt a { margin-left: 0; width: 100%; }
}

/* Застереження для опту. Спершу була тонка риска ліворуч — власник просив
   «убрать полоску и заменить на что-то другое, более акцентное, голубой
   или синий». Тепер це блакитна плашка зі значком: помітно, але спокійно. */
.price-note {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 14px 0 0; padding: 11px 13px;
  background: var(--accent-soft); border-radius: var(--radius);
  font-size: 13.5px; line-height: 1.5; color: #1c4f8f;
}
/* 🛑 Було `max-width: 52ch` — і на широкому екрані підказка обривалась
   посеред блоку, а правий край сторінки виглядав рваним. Власник 27.08.2026:
   «она не растянута до конца контейнера… по правой стороне у нас полная
   свистопляска». Тепер тягнеться на всю ширину своєї колонки, а колонка
   сама вузька — читати зручно. */
.price-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--accent); }

.more-wrap { display: grid; place-items: center; margin: 22px 0 0; }
.more { border: 1px solid var(--line); background: #fff; padding: 12px 26px; border-radius: 999px; font-weight: 600; }
/* 🛑 Довгий суцільний текст не повинен розсувати сторінку.
   Знайдено критиком 26.08.2026: людина вставила в пошук посилання на 153
   символи — на телефоні 375 сторінка стала 762 px завширшки, крихти й текст
   поїхали за правий край, з'явилась горизонтальна прокрутка. Екран помилки
   при цьому вже не показувався (пункт З8 закрито), а верстка лишалась ламаною.
   `anywhere` переносить будь-де, коли інакше рядок не влазить. */
.empty { text-align: center; color: var(--muted); margin: 44px 12px;
         overflow-wrap: anywhere; }

/* Зв'язку з сервером немає. Стоїть на всю ширину сітки, щоб повідомлення
   не тулилося в одну колонку поруч із порожнечею. */
.fail {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 16px;
}
.fail b { display: block; font-size: 16px; margin-bottom: 6px; }
.fail p { color: var(--muted); margin: 0 0 16px; }
/* «В опті нічого, але в роздробі знайшлося 5 позицій — показати» */
.hint-go { color: var(--accent); font-weight: 600; border-bottom: 1px solid currentColor; }

/* ---------- фільтри ---------- */
.side {
  display: flex; flex-direction: column;
  background: #fff;
}
@media (min-width: 900px) {
  .side {
    position: sticky; top: 62px;
    height: calc(100dvh - 62px);
    border-right: 1px solid var(--line);
  }
  .side-head .x { display: none; }
}
@media (max-width: 899px) {
  /* на телефоні — висувна панель знизу */
  .side {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    max-height: 86dvh; border-radius: 16px 16px 0 0; box-shadow: var(--shadow);
    transform: translateY(101%); transition: transform .22s ease;
  }
  .side.open { transform: none; }
  .side-bg { position: fixed; inset: 0; z-index: 44; background: rgba(16,24,40,.38); }
}

.side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.x { border: 0; background: transparent; font-size: 17px; color: var(--muted); }
.side-scroll { overflow-y: auto; padding: 4px 16px 12px; flex: 1 1 auto; }
.side-foot {
  display: flex; gap: 10px; padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.side-foot button { flex: 1; padding: 13px; border-radius: var(--radius); font-weight: 700; border: 1px solid var(--line); }
.primary { background: var(--accent); color: #fff; border-color: var(--accent) !important; }
.ghost { background: #fff; color: var(--ink); }
@media (min-width: 900px) {
  /* на десктопі фільтр застосовується одразу, кнопка «Показати» ні до чого */
  .side-foot .primary { display: none; }
}

.fgroup { margin: 14px 0 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.fgroup:last-child { border-bottom: 0; }
.fgroup > b {
  display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-bottom: 8px;
}
.fsearch {
  width: 100%; padding: 9px 11px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
}
.fsearch:focus { outline: none; border-color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 7px; max-height: 232px; overflow-y: auto; }
.chip {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  padding: 7px 11px; border-radius: 999px; font-size: 13.5px; line-height: 1.2;
}
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.chip .n { color: var(--muted); font-weight: 400; }
.chip[aria-pressed="true"] .n { color: var(--accent); }

.range { display: flex; align-items: center; gap: 8px; }
.range input {
  width: 100%; min-width: 0; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
}
.range input:focus { outline: none; border-color: var(--accent); }
.range span { color: var(--muted); font-size: 13px; }

/* ---------- картка позиції ---------- */
/* ⚠️ `min(1100px, 100%)`, а не просто 1100px: загальне правило
   `body > section { max-width: 100% }` слабше за клас і не спрацьовує,
   а стрічка фото всередині розпирала картку до 391 px при екрані 375
   (заміряно 27.08.2026). */
.item { padding: 0 0 48px; max-width: min(1100px, 100%); margin: 0 auto; }
.gal { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding: 10px 14px; }

/* Елемент галереї — обгортка, бо всередині може бути і фото, і ВІДЕО
   (у відео зверху ще значок «грати»). */
.gal-i {
  position: relative; display: block;
  width: 84%; max-width: 460px; aspect-ratio: 1/1;
  border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden;
  scroll-snap-align: center; flex: 0 0 auto; background: var(--soft);
  cursor: zoom-in;
}
.gal-i img, .gal-i video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (min-width: 720px) { .gal-i { width: 42%; } }

/* значок «грати» поверх відео */
.gal-i .play {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none;
}
.gal-i .play svg {
  color: #fff; filter: drop-shadow(0 2px 10px rgba(0,0,0,.5));
  background: rgba(16,24,40,.45); border-radius: 999px;
  width: 54px; height: 54px; padding: 14px 12px 14px 16px;
  backdrop-filter: blur(2px);
}

/* ---------- ритм картки ----------
   Власник: «если брать смысловыми блоками, они никак не разделены,
   всё полотном». Тепер між блоками є повітря, і кожен читається окремо:
   фото → назва → кольори → ціна → кнопка → характеристики. */
.item h1 { font-size: 23px; margin: 26px 14px 3px; letter-spacing: -.01em; line-height: 1.25; }
.item .art { color: var(--muted); font-size: 13px; margin: 0 14px; }
/* ---------- інші кольори тієї ж тканини ----------
   Одна тканина в різних кольорах — це окремі позиції каталогу зі спільним
   артикулом постачальника. Показуємо їх квадратиками, як на сайті компанії:
   поточний обведено, решта — перехід на свою картку. */
.vars { margin: 18px 14px 0; }   /* одразу під фото, до назви */
.vars-h { font-size: 13px; color: var(--muted); margin-bottom: 9px; }
.vars-h i { font-style: normal; color: var(--ink); font-weight: 600; }

.vars-row { display: flex; flex-wrap: wrap; gap: 8px; }
.var {
  width: 54px; height: 54px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: var(--soft); display: block;
  outline: 2px solid transparent; outline-offset: 1px;
  transition: outline-color .12s, border-color .12s;
}
.var img { width: 100%; height: 100%; object-fit: cover; display: block; }
.var:hover { border-color: var(--accent); }
/* Назва кольору під квадратиком — пункт Г2, 26.08.2026.

   🛑 ПЕРША СПРОБА ВІДКОЧЕНА В ТОЙ ЖЕ ДЕНЬ. Було: на телефоні квадратики
   збільшувались до 74 px і кожен підписувався назвою кольору. Власник
   подивився на телефоні: «огромные плитки цветов в карточке товара
   с подписанным каждым цветом — это лишнее… вырви глаз».

   Заміряно після його зауваження — і він мав рацію не лише на смак:
   блок кольорів займав **329 px, тобто 40 % екрана**, а назва тканини
   і ціна опинялись на позначці 825 при висоті екрана 812 — тобто ЗА
   екраном. Людина відкривала картку й не бачила, що це за тканина.

   Тому підписи прибрано, квадратики повернуто до 54 px. Сама задача —
   «на телефоні не дізнатись назву кольору, бо наведення немає» —
   лишається відкритою і вирішується інакше, разом із власником. */
/* 🛑 Пункт И13. Назва кольору в розмітці була завжди, але ховалась —
   на телефоні людина бачила десять квадратиків 54×54 і жодного слова.
   Оптовик замовляє «Кемел» чи «Койот», а не картинку.

   Показуємо там, де немає наведення (телефон): підпис під квадратиком,
   як це вже зроблено в каталозі (пункт Г2, 26.08.2026). На компʼютері
   лишається підказка при наведенні — вигляд не міняємо. */
.var-nm { display: none; }
@media (hover: none) {
  .var { width: auto; height: auto; border: 0; }
  .var img { width: 54px; height: 54px; border: 1px solid var(--line); border-radius: 8px; }
  .var.on img { border-color: var(--accent); }
  /* ⚠️ Ширину тримаємо рівно по квадратику: підпис «Джинсовий» ширший за нього,
     і без обмеження ряд розпирав сторінку вбік (заміряно 27.08.2026). */
  .var { width: 54px; }
  .var-nm {
    display: block; width: 54px; margin-top: 3px;
    font-size: 10px; line-height: 1.15; color: var(--muted); text-align: center;
    overflow-wrap: anywhere; hyphens: auto;
  }
  .var.on .var-nm { color: var(--ink); font-weight: 600; }
}

/* поточний колір — обведено, як на сайті компанії */
.var.on { outline-color: var(--accent); border-color: var(--accent); }

/* ---------- характеристики ----------
   Зроблено за зразком сайта компанії (власник надіслав знімок і сказав:
   «можно смело брать визуал с нашего сайта»): смужки через рядок замість
   ліній, підпис і значення поруч, а не по краях. На телефоні так читається
   краще — око не бігає через увесь рядок. */
.specs-h {
  margin: 30px 14px 10px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.specs { margin: 0 14px 8px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.spec {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 11px 14px;
}
.spec:nth-child(odd) { background: var(--soft); }
.spec dt { color: var(--muted); font-size: 14px; }
.spec dt:after { content: ':'; }
.spec dd { margin: 0; font-weight: 600; font-size: 14px; color: var(--ink); }
.note { margin: 18px 14px 0; padding: 14px; background: var(--soft); border-radius: var(--radius); color: var(--muted); font-size: 14px; }

/* ---------- дія ----------
   Кнопка стоїть одразу після ціни: власник казав, що знизу вона губиться.
   «Повернутись до каталогу» прибрано — для цього є стрілка в шапці й шлях
   під нею, окрема кнопка лише додавала шуму. */
.cta { display: grid; gap: 8px; margin: 20px 14px 0; }
.cta a {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px; border-radius: var(--radius); font-weight: 700; font-size: 15.5px;
  background: var(--accent); color: #fff;
  box-shadow: 0 6px 18px rgba(26,110,224,.22);
  transition: transform .06s, box-shadow .15s;
}
.cta a:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(26,110,224,.2); }
.cta-note { margin: 9px 14px 0; font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- перегляд фото на весь екран ----------
   Власник: «фото нельзя рассмотреть». У картці вони квадратні й обрізані
   (object-fit: cover) — по кліку показуємо ЦІЛЕ фото на весь екран.
   Без бібліотек, як і решта вітрини. */
.lb {
  position: fixed; inset: 0; z-index: 80;
  background: #0b0d10;
  display: grid; grid-template-rows: 1fr auto;
  touch-action: pan-y pinch-zoom;      /* щоб на телефоні працював пінч-зум */
}

/* ⚠️ Саме flex, а не grid. Було `display: grid; place-items: center` —
   і фото вилазило за екран: на 800×760 воно малювалось 764×1019, чверть
   не влазила, доводилось гортати (власник 06.08.2026: «має бути 1 к 1»).
   Причина: висота рядка в grid тут не задана, тому `max-height: 100%`
   у фото нема від чого рахувати — браузер його просто ігнорує.
   У flex висота контейнера визначена, і обмеження працює. */
.lb-stage {
  display: flex; align-items: flex-start; justify-content: flex-start;
  min-height: 0; padding: 52px 12px 8px;
}
.lb-stage img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;                 /* ціле фото, нічого не обрізаємо */
  display: block; border-radius: 6px;
  margin: auto;                        /* по центру; при наближенні не ламає гортання */
  animation: lbIn .18s ease;
  cursor: zoom-in;
}

/* відео у перегляді — з програвачем, на всю доступну висоту */
.lb-stage video {
  max-width: 100%; max-height: 100%;
  display: block; border-radius: 6px; background: #000;
  margin: auto;
}

/* Друге натискання — наближення. Тканину дивляться по фактурі, самого лише
   «на весь екран» для цього замало. На телефоні працює ще й пінч-зум. */
.lb-stage.zoom { overflow: auto; touch-action: pan-x pan-y pinch-zoom; }
.lb-stage.zoom img {
  max-width: none; max-height: none;
  width: 1600px;                       /* саме та ширина, яку віддає сервер */
  max-width: 300%;                     /* на вузькому екрані не роздуваємо */
  cursor: zoom-out; border-radius: 0;
  animation: none;
}
@keyframes lbIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

.lb-x, .lb-go {
  position: absolute; z-index: 2;
  border: 0; background: rgba(255,255,255,.12); color: #fff;
  display: grid; place-items: center;
  border-radius: 999px; backdrop-filter: blur(6px);
}
.lb-x {
  top: max(12px, env(safe-area-inset-top)); right: 12px;
  width: 44px; height: 44px;
}
.lb-n {
  position: absolute; z-index: 2;
  top: max(20px, calc(env(safe-area-inset-top) + 8px)); left: 16px;
  color: #fff; opacity: .75; font-size: 14px; font-variant-numeric: tabular-nums;
}

.lb-go { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-go[disabled] { opacity: 0; pointer-events: none; }
/* на вузькому екрані гортають пальцем — кнопки лише заважають */
@media (max-width: 720px) { .lb-go { display: none; } }

.lb-dots { display: flex; justify-content: center; gap: 7px; padding: 14px 12px max(16px, env(safe-area-inset-bottom)); }
.lb-dot {
  width: 7px; height: 7px; border-radius: 999px; border: 0; padding: 0;
  background: rgba(255,255,255,.3);
}
.lb-dot[aria-current="true"] { background: #fff; }

/* сама картка: показуємо, що фото клікабельне */
.gal img { cursor: zoom-in; }

/* ---------- підвал ----------
   Три колонки, як на сайтах галузі: про компанію · контакти · мережі.
   На телефоні складаються одна під одну. */
.foot {
  margin-top: auto;            /* див. пояснення біля `body` вище */
  border-top: 1px solid var(--line);
  background: var(--soft);
  /* Зверху 70px — це колишні `margin-top: 44px` плюс `padding-top: 26px`
     разом: відступ від вмісту до підвалу лишився таким самим, як був. */
  padding: 70px 14px max(20px, env(safe-area-inset-bottom));
}
.foot-in {
  display: grid; gap: 24px;
  max-width: 1100px; margin: 0 auto;
}
/* ⚠️ Колонок стало ЧОТИРИ (16.08.2026, додано «Магазини»).
   Одразу в один рядок вони лізуть лише від 1000px: вужче «вул. Валентинівська, 12»
   ламається посеред назви. Тому на середніх екранах — сітка 2×2. */
@media (min-width: 720px) {
  .foot-in { grid-template-columns: 1fr 1fr; gap: 26px 32px; }
}
@media (min-width: 1000px) {
  .foot-in { grid-template-columns: 1.7fr 1.1fr 1.1fr .9fr; gap: 32px; }
}

.foot-col b {
  display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-bottom: 12px;
}
.foot-col p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }

/* короткі факти про роботу — з сайта компанії, дослівно */
.foot-facts { margin: 0 0 12px; padding: 0; list-style: none; }
.foot-facts li {
  position: relative; padding-left: 16px; margin-bottom: 5px;
  font-size: 13.5px; color: var(--muted); line-height: 1.45;
}
.foot-facts li:before {
  content: ''; position: absolute; left: 3px; top: 8px;
  width: 4px; height: 4px; border-radius: 999px; background: var(--accent);
}

.foot-col a, .foot-col span {
  display: block; font-size: 14.5px; color: var(--ink);
  padding: 3px 0; width: fit-content;
}
.foot-col a:hover { color: var(--accent); }
/* телефони помітніші за решту: по них дзвонять */
.foot-col a[href^="tel:"] { font-size: 16px; font-weight: 600; padding: 4px 0; }

/* Адреси магазинів — своя колонка «Магазини» (16.08.2026, дані власника).
   ⚠️ Без ВЕЛИКИХ літер у назві міста. Перший варіант був саме такий, і власник
   відхилив: дрібні великі літери повторювали заголовок колонки, від чого
   в підвалі рябіло. Місто — звичайним текстом, адреса під ним приглушена. */
.foot-shop { display: block; padding: 0 0 12px; line-height: 1.4; }
.foot-shop:last-child { padding-bottom: 0; }
.foot-shop i {
  display: block; font-style: normal;
  font-size: 14.5px; color: var(--ink);
}
.foot-shop em {
  display: block; font-style: normal;
  font-size: 13.5px; color: var(--muted);
}

.socs { display: flex; gap: 12px; flex-wrap: wrap; }
/* ⚠️ Селектор саме `.foot-col .soc`: інакше правило `.foot-col a` вище
   перебиває розміри, і кружки соцмереж сплющуються в овали.
   Рамки навколо іконок НЕМАЄ навмисно — вони фірмові й кольорові,
   рамка з ними лише сперечалась би. */
.foot-col .soc {
  width: 42px; height: 42px; flex: 0 0 auto; padding: 0;
  display: block; border-radius: 12px;
  transition: transform .12s, filter .12s;
}
.foot-col .soc img { width: 100%; height: 100%; display: block; }
.foot-col .soc:hover { transform: translateY(-2px); filter: brightness(1.06); }
.foot-col .soc:active { transform: scale(.95); }

.foot-copy {
  max-width: 1100px; margin: 22px auto 0;
  padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}

/* ---------- дрібниці ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 60;
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: 14px;
}
.skeleton { background: linear-gradient(90deg,#f2f4f7 25%,#e9edf2 37%,#f2f4f7 63%); background-size: 400% 100%; animation: sk 1.2s ease infinite; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ============================================================================
   ОБРАНЕ ТА ПЕРЕГЛЯНУТІ (15.08.2026)
   Логіка й пояснення, чому саме localStorage, — у app.js, блок з тією ж назвою.
   ============================================================================ */

/* ---------- значок обраного в шапці ---------- */
/* ⚠️ Підкладка обов'язкова. Спершу значок висів «голим» у кутку й губився —
   власник 15.08.2026: «не хватает кружочка подложки немножечко серенького,
   чтобы чуть больше акцентировать внимание». Тепер кружечок видно завжди,
   а не лише під курсором. */
.favbtn {
  position: relative; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 999px;
  color: var(--ink); text-decoration: none; flex: none;
  /* `--soft` (#f6f8fa) для цього замало — на білій шапці кружечок майже
     не видно. Беремо на пів тону темніше. */
  background: #edf0f4;
  border: 1px solid #dde2e8;
}
.favbtn:hover { background: #e3e8ee; }
.favbtn b {
  position: absolute; top: 2px; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
}

/* ---------- сердечко на картці ---------- */
.card .ph { position: relative; }
.fav-btn {
  position: absolute; top: 6px; right: 6px;
  width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center;
  border: 0; padding: 0; cursor: pointer;
  /* Напівпрозоре біле тло: фото тканин бувають і світлі, і темні,
     на суцільно білому кружечку сердечко губилось би на світлих. */
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(2px);
  color: var(--muted);
  box-shadow: 0 1px 3px rgba(16,24,40,.14);
}
.fav-btn:hover { color: var(--ink); }

.fav-btn.on { color: #e0245e; }
.fav-btn.on svg path { fill: currentColor; }

/* ---------- кнопка в картці позиції ---------- */
.cta-fav {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  padding: 12px 18px; border-radius: 999px;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.cta-fav:hover { background: var(--soft); }
.cta-fav.on { color: #e0245e; border-color: #f3c6d3; background: #fff6f8; }
.cta-fav.on svg path { fill: currentColor; }

/* ---------- екран «Обране» ---------- */
.favpage { max-width: 1180px; margin: 0 auto; padding: 8px 14px 30px; }
.fav-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 6px 2px 14px;
}
.fav-head h1 { font-size: 22px; margin: 0; }
@media (min-width: 900px) { .fav-head h1 { font-size: 26px; } }

/* Знята з вітрини позиція: показуємо, але видно, що вона вже не в продажу.
   Рішення власника: «давай "уже недоступно"», а не тихо ховати. */
.card.gone .ph img { filter: grayscale(1); opacity: .5; }
.card.gone .nm, .card.gone .sub, .card.gone .card-price { opacity: .55; }
.gone-tag {
  position: absolute; left: 6px; bottom: 6px;
  background: rgba(27,31,36,.82); color: #fff;
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
}

/* ---------- ряд «Ви дивились» на стартовому екрані ---------- */
/* ⚠️ `min-width: 0` обов'язковий: інакше вміст із горизонтальною прокруткою
   розпирає батьківський блок замість того, щоб гортатись усередині. */
.seen { margin: 26px auto 0; width: 100%; max-width: 560px; min-width: 0; }
.seen-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 0 2px 10px;
}
.seen-h b { font-size: 15px; }
/* Прокрутка вбок, а не сітка: ряд не має тиснути на екран і відсувати
   вибір розділу вниз. */
.seen-row {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin; min-width: 0;
}
.seen-i {
  flex: none; width: 92px; text-decoration: none; color: var(--ink);
}
.seen-ph {
  display: block; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden;
  background: var(--soft); border: 1px solid var(--line);
}
.seen-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seen-t {
  display: block; font-size: 12px; font-weight: 600; margin-top: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seen-s {
  display: block; font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- смуга прокрутки ряду «Ви Дивились» (16.08.2026) ---------- */
/* Власник 16.08.2026: «якщо їх накопичилось багато, прокрутка сильно
   прилипла до самих мініатюрок — її б трохи опустити і зробити візуально
   видною, тільки не сильно акцентну, щоб було зрозуміло, що можна
   прокручувати».
   ⚠️ Тільки десктоп (від 900px, як і решта десктопних правил у цьому файлі).
   На телефоні смуга системна й плаваюча: вона не притискається до підписів,
   а зайвий відступ лише з'їдав би висоту стартового екрана. */
@media (min-width: 900px) {
  /* Власник 16.08.2026 по знімку пісочниці: «самі картки б трохи більше,
     зовсім дрібний блок виходить». 92px → 116px разом із підписами.
     Ширину самого блоку (max-width: 560px) не чіпаємо — він навмисно
     в одну лінію з «Опт», «Роздріб» і пошуком над ним.
     При 116px у ряд входить ~4,5 картки: остання видно наполовину, і це
     теж підказка, що ряд гортається. */
  .seen-i { width: 116px; }
  .seen-t { font-size: 13px; }
  .seen-s { font-size: 11.5px; }

  .seen-row {
    /* Було 4px — смуга торкалась підписів. Власник 16.08.2026 по знімку:
       «опустити ще трохи нижче». 4px → 12px → 18px. */
    padding-bottom: 18px;
    /* Firefox: спершу бігунок, потім жолоб */
    scrollbar-color: #cdd3db #f2f4f7;
  }
  /* Chrome · Edge · Safari. Своє оформлення тут не примха: системна смуга
     Windows малюється темною і зі стрілками по краях — власник 16.08.2026
     назвав її надто помітною. Замінюємо на спокійну сіру.
     Жолоб лишається видимим навмисно: бігунок коротший за нього, і порожня
     доріжка показує, що ряд можна тягнути далі вбік. */
  .seen-row::-webkit-scrollbar { height: 7px; }
  .seen-row::-webkit-scrollbar-track {
    background: #f2f4f7; border-radius: 999px;
  }
  .seen-row::-webkit-scrollbar-thumb {
    background: #cdd3db; border-radius: 999px;
  }
  /* Трохи темніше під курсором — підказка, що смугу можна тягнути */
  .seen-row::-webkit-scrollbar-thumb:hover { background: #b5bdc7; }

  /* Згасання праворуч (власник 16.08.2026: «затухання можна зробити»).
     ⚠️ Знизу накладка не доходить до смуги прокрутки — інакше гасила б
     і її праву частину. */
  .seen-scroll { position: relative; }
  .seen-scroll::after {
    content: ''; position: absolute;
    top: 0; right: 0; bottom: 22px; width: 46px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), #fff 85%);
    transition: opacity .18s ease;
  }
  /* Ряд долистано до кінця — гасити нема чого, димка йде.
     Клас ставить `стежитиЗаРядомПереглянутих()` в app.js. */
  .seen-scroll.at-end::after { opacity: 0; }
}

/* Посилання «Обране» на стартовому екрані — там шапки немає (див. index.html) */
/* Два посилання — «Обране» і «Порівняння» — стоять в один ряд і переносяться
   на вузькому екрані. Контейнер з'явився 25.08.2026 разом із порівнянням. */
.start-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }

.start-fav {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 14px auto 0; padding: 8px 15px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.start-fav:hover { background: var(--soft); }
.start-fav svg { color: #e0245e; }
.start-cmp svg { color: var(--accent); }
.start-fav b {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 11.5px; line-height: 18px; text-align: center;
}

/* ---------- плашки в картці: наявність і як продаємо (15.08.2026) ---------- */
/* ⚠️ Бічний відступ 14px обов'язковий — рівно такий, як у заголовка, артикула
   й ціни в цій картці. Без нього рамка плашки вилазила на 14px лівіше за весь
   інший текст, і ліва лінія картки «ламалась» (власник помітив 15.08.2026:
   «сама рамка виходить трохи за лінію»). */
.badges {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 10px 14px 2px;
}
/* Власник 15.08.2026: «зробити менш закруглені краї, тоненька границя
   в один піксель, заливку прибрати». Тому всі плашки — тільки контур. */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: 7px;
  border: 1px solid;
  background: none;
  font-size: 13px; font-weight: 600; line-height: 1.2;
}

/* Наявність — зелена, у кольорі сайта компанії (#59AA45) */
.badge-ok { color: #2f7d1f; border-color: #a9d69b; }

/* ⚠️ ОБМЕЖЕННЯ «тільки опт» — навмисно помітніше за решту.
   Власник: «щоб людина одразу побачила й не перепитувала, опт можна чи ні».
   Червоно-ліловий, але приглушений — «не сильно вирви-очним». */
.badge-limit { color: #a8305a; border-color: #e6b8c8; background: #fdf5f8; }

/* «Опт і Роздріб» — добра новина, можна і так, і так. Синій акцент вітрини. */
.badge-both { color: #1a5fbf; border-color: #b9d3f2; }

/* ═══════════════════════════════════════════════════════════════════
   ПОРІВНЯННЯ ТКАНИН — екран #/cmp
   Замовлення власника 25.08.2026, зразок — citrus.ua.
   ═══════════════════════════════════════════════════════════════════ */

/* Терези на плитці — під сердечком, у тому ж стилі кружечка. */
.cmp-btn {
  position: absolute; top: 44px; right: 6px;
  width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center;
  border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(2px);
  color: var(--muted);
  box-shadow: 0 1px 3px rgba(16,24,40,.14);
}
.cmp-btn:hover { color: var(--ink); }

/* 🛑 На телефоні кнопки на плитці більші — 26.08.2026.
   Було 32×32 із зазором 6 px між сердечком і терезами. Для пальця це мало
   (звичний мінімум — 44), і власник промахувався: замість «до порівняння»
   відкривалась сама картка. Його слова: «нажимаю добавить +1 товар
   к списку сравниваемых — вообще непонятно, куда перебрасывает».

   ⚠️ Правило стоїть саме ТУТ, після оголошення `.cmp-btn`. Перша спроба
   була вище — і терези лишались 32 px, бо їхнє власне правило перебивало
   моє, а кнопки ще й налазили одна на одну. */
@media (hover: none) {
  .fav-btn { width: 40px; height: 40px; }
  .cmp-btn { width: 40px; height: 40px; top: 52px; }
}
.cmp-btn.on { color: var(--accent); background: var(--accent-soft); }

/* Кнопка «Порівняти» в картці товару — поруч із «В Обране». */
.cta-cmp.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* Сам екран — ті самі поля, що в обраному: сторінки мають бути однакові. */
/* ═══════════════════════════════════════════════════════════════════
   🛑 `min-width: 0` УСІМ прямим дітям body

   `body` — flex-контейнер, а шапка, крихти, сторінки й підвал — його
   елементи. У flex-елемента за замовчуванням `min-width: auto`: він
   НЕ стискається вужче за свій вміст. Досить одній широкій речі всередині —
   таблиці порівняння, стрічці фото, довгому запиту в крихтах — і вбік
   поїде вся сторінка, скільки не став `overflow-x` на самій речі.

   Ловили це двічі за один вечір 27.08.2026: спершу екран «Порівняння»
   (772 px при 375), потім картку товару (391 при 375, розпирала галерея).
   Тому правило загальне, а не точкове.
   ═══════════════════════════════════════════════════════════════════ */
body > header, body > nav, body > section, body > footer {
  min-width: 0;
  /* ⚠️ Самого `min-width: 0` мало. `body` тягне елементи на всю ширину
     (stretch), але елемент усе одно не стискається вужче за своє найменше
     можливе вміст — а стрічка фото в картці таке вміст і має. Тому ще й
     стеля по вікну: заміряно 27.08.2026, картка була 391 при екрані 375. */
  max-width: 100%;
}

/* 🛑 `min-width: 0` — не косметика, без нього ламається прокрутка таблиці.
   `body` у нас flex-контейнер, а сторінки — його елементи. Flex-елемент
   за замовчуванням має `min-width: auto`, тобто НЕ стискається вужче за свій
   вміст: таблиця порівняння на 744 px розпирала сторінку до 772 при екрані
   375, і разом із нею їхала вбік уся сторінка. При цьому `overflow-x: auto`
   на `.cmp-wrap` не рятував — прокручувати не було чого, блок дорівнював
   вмісту. Знайдено критиком-покупцем 27.08.2026, підтверджено заміром. */
.cmppage { max-width: min(1180px, 100%); min-width: 0; margin: 0 auto; padding: 8px 14px 30px; }

/* Перемикач «Всі / Відмінності / Збіги». */
.cmp-modes {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin: 0 0 14px;
}
.cmp-modes-t { color: var(--muted); font-size: 14px; }
.cmp-mode {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 999px; padding: 6px 14px; font-size: 14px; cursor: pointer;
}
.cmp-mode:hover { border-color: var(--accent); color: var(--accent); }
.cmp-mode.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 🛑 Грабля, на якій уже стояли 25.08.2026: `overflow-x` на обгортці ВБИВАЄ
   `position: sticky` всередині неї — липка шапка прилипає до обгортки, а не
   до вікна, і при прокрутці їде геть. Заміряно: шапка йшла на -188 px.
   Тому обгортка НЕ прокручується на широкому екрані — там усі чотири колонки
   й так вміщуються, а шапка липне як треба. Прокрутку вбік вмикаємо лише
   на вузькому, де липка шапка все одно менш потрібна: там вона за пів
   екрана від рядка. */
.cmp-wrap { overflow: visible; }

/* Липка шапка з тканинами: при прокрутці лишається вгорі, щоб було видно,
   до якої тканини належить рядок. Так само на сайті-зразку. */
.cmp-head {
  /* 🛑 НЕ `top: 0`. Шапка сайта теж липка (`.top`, z-index 30) і стоїть вище
     шаром — при `top: 0` наша шапка ховалась ПІД неї, і верхні 65 px карток
     ставали недосяжними: клік по хрестику потрапляв у шапку сайту, а по
     правих колонках — прямо в поле пошуку. Знайдено перевіркою 25.08.2026.
     Висоту шапки не пишемо числом: на телефоні вона інша (`safe-area-inset`),
     тож app.js міряє її й кладе у `--top-h`. */
  position: sticky; top: var(--top-h, 65px); z-index: 5;
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

/* Рядок = вузька колонка підпису + N колонок тканин.
   🛑 Ширина колонки ФІКСОВАНА, не `1fr`. Було `minmax(150px, 1fr)` — і коли
   лишалась одна тканина, її колонка розтягувалась на весь екран разом із фото
   (власник 25.08.2026: «превьюшка занадто роз'їжджається»). Тепер колонка
   завжди однакова, скільки б тканин не лишилось. */
.cmp-row {
  display: grid;
  grid-template-columns: 150px repeat(var(--n), 200px);
  gap: 12px; align-items: start;
  justify-content: start;
}
.cmp-cards { grid-template-columns: 150px repeat(var(--n), 200px); }

/* Підпис лівої колонки в шапці — рівняється по ВЕРХУ, на рівні фотографій:
   саме там власник бачив порожнє місце. Прижатий донизу, він опинявся
   на рівні ціни й читався як підпис до неї. */
.cmp-k-head { align-self: start; padding-top: 14px; }

/* Картка «Додати тканину» на вільному місці. */
.cmp-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; height: 132px; margin-top: 6px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--muted); text-decoration: none; text-align: center;
}
.cmp-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.cmp-add-p {
  width: 42px; height: 42px; border-radius: 999px;
  display: grid; place-items: center; background: var(--soft);
}
.cmp-add:hover .cmp-add-p { background: var(--bg); }
.cmp-add-t { font-size: 13px; }

.cmp-card { position: relative; padding-top: 6px; }
/* ⚠️ Висота фото обмежена НАВМИСНО. Без обмеження квадратне фото розтягується
   на всю ширину колонки (близько 350 px на комп'ютері) і з'їдає екран —
   таблиця, заради якої сюди прийшли, опиняється нижче згину. */
.cmp-ph {
  display: block; height: 132px; border-radius: var(--radius);
  overflow: hidden; background: var(--soft);
}
.cmp-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-nm { display: block; margin-top: 8px; font-weight: 600; color: var(--ink); text-decoration: none; }
.cmp-nm:hover { color: var(--accent); }
.cmp-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.cmp-price { margin-top: 6px; font-weight: 700; }
.cmp-price i { font-style: normal; font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 4px; }

.cmp-x {
  position: absolute; top: 0; right: 0; z-index: 2;
  width: 26px; height: 26px; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
}
.cmp-x:hover { color: var(--ink); border-color: var(--muted); }

/* Смуга розділу — НА ВСЮ ШИРИНУ таблиці, а не таблетка по центру.
   Власник 25.08.2026: «щоб воно більш явно розділяло і вказувало на те,
   що це саме заголовок і в ньому ось усе це є, зміст». Вузька таблетка
   висіла посеред порожнечі й не читалась як межа розділу. */
.cmp-sec {
  margin: 26px 0 0;
  background: var(--soft);
  border-radius: var(--radius);
  padding: 11px 16px;
  font-weight: 600;
  /* Рядки розділу починаються одразу під смугою, без розриву: смуга — їхня
     шапка, а не окрема прикраса. */
  margin-bottom: 4px;
}

.cmp-line { padding: 10px 0; border-bottom: 1px solid var(--line); }
.cmp-k { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .02em; }
.cmp-v { font-size: 15px; }
/* Однакові значення притлумлюємо: погляд сам чіпляється за різне. */
.cmp-line.same .cmp-v { color: var(--muted); }

@media (max-width: 640px) {
  /* На телефоні підпис вужчий, а колонки лишаються читабельними:
     дві видно, решта гортається вбік. */
  .cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cmp-head { position: static; }   /* див. пояснення вище: sticky тут не працює */
  .cmp-row, .cmp-cards { grid-template-columns: 104px repeat(var(--n), 152px); gap: 8px; }
  .cmp-ph, .cmp-add { height: 104px; }
  .cmp-k { font-size: 12px; }
  .cmp-v { font-size: 14px; }
  .cmp-sec { margin: 20px 0 4px; padding: 9px 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ПІДКАЗКИ БІЛЯ ЗНАЧКІВ (25.08.2026)
   Власник: «наводиш на сердечко або на іконку порівняння — не вистачає
   виїжджаючої підказки словом». Сердечко люди впізнають, а стовпчики
   порівняння треба пояснити.
   ═══════════════════════════════════════════════════════════════════ */

/* 🛑 Підказка виїжджає ВЛІВО, всередину фото. Праворуч не можна: у плитки
   `.card .ph` стоїть `overflow: hidden`, і все, що вилазить за квадрат фото,
   обрізається. */
.fav-btn::after, .cmp-btn::after {
  content: attr(data-tip);
  position: absolute; right: 100%; top: 50%;
  transform: translateY(-50%) translateX(4px);
  margin-right: 7px;
  padding: 5px 10px; border-radius: 999px;
  /* ⚠️ Плашка БІЛА, у тон самим кружечкам кнопок, а не чорна і не прозора.
     Прозору з білим текстом власник питав 25.08.2026 — не годиться: фото
     тканин бувають майже білі (молочний, пісочний), і білий напис на них
     просто зникне. Саме через це й кнопки зроблені на білому. */
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(2px);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(16,24,40,.16);
  font-size: 11.5px; font-weight: 600; line-height: 1.5;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .13s ease, transform .13s ease;
}
.fav-btn:hover::after, .cmp-btn:hover::after {
  opacity: 1; transform: translateY(-50%) translateX(0);
}

/* ⚠️ На дотику наведення не існує: палець або тисне, або ні. Тому на вузьких
   екранах підказку не показуємо взагалі — вона там лише блимала б під
   пальцем після натискання. */
@media (hover: none) {
  .fav-btn::after, .cmp-btn::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   ПОШУК ПРОСТО В ПОРІВНЯННІ (25.08.2026)
   Плюсик більше не вивозить із порівняння: панель розгортається під
   таблицею, і тканина стає новою колонкою тут-таки.
   ═══════════════════════════════════════════════════════════════════ */

.cmp-find {
  margin-top: 18px; padding: 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--soft);
}
.cmp-find-h {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.cmp-find-q {
  width: 100%; padding: 10px 13px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink); font-size: 15px;
}
.cmp-find-q:focus { outline: none; border-color: var(--accent); }

.cmp-find-res { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.cmp-find-hint { color: var(--muted); font-size: 13.5px; margin: 4px 2px; }

.cmp-find-i {
  display: flex; align-items: center; gap: 11px;
  padding: 8px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.cmp-find-ph {
  width: 46px; height: 46px; flex: none; border-radius: 7px;
  overflow: hidden; background: var(--soft); display: block;
}
.cmp-find-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-find-t { flex: 1; min-width: 0; }
.cmp-find-n { font-size: 14px; font-weight: 600; line-height: 1.3; }
.cmp-find-s { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.cmp-find-s b { color: var(--ink); }
/* Склад, щільність, ширина — прямо в рядку: рішення на користь телефону,
   де підказки при наведенні не існує. */
.cmp-find-x {
  font-size: 11.5px; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cmp-find-add {
  flex: none; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 600;
}
.cmp-find-add:hover { filter: brightness(1.06); }
.cmp-find-add.on, .cmp-find-add:disabled {
  background: var(--bg); color: var(--muted);
  border-color: var(--line); cursor: default; filter: none;
}

.cmp-find-cat {
  display: inline-block; margin-top: 11px;
  font-size: 13.5px; color: var(--accent); text-decoration: none;
}
.cmp-find-cat:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .cmp-find { padding: 11px; }
  .cmp-find-i { gap: 9px; padding: 7px; }
  .cmp-find-ph { width: 40px; height: 40px; }
  .cmp-find-add { padding: 6px 11px; font-size: 12.5px; }
}

/* ============================================================================
   КОШИК (27.08.2026)
   ============================================================================ */

/* 🛑 Кружечок кошика на плитці ПРИБРАНО 27.08.2026. Власник: «мне не
   нравится, что это сделано именно кружочком, как и понравится и сравнение.
   Я хотел бы видеть кнопку добавить в корзину, как сделано у нас на сайте».
   Тепер це явна кнопка під ціною — правило `.tile-cart` нижче. */

/* ---------- низ плитки каталогу: кількість + кошик ----------
   🔑 Зроблено ЗА ЗРАЗКОМ САЙТУ КОМПАНІЇ. Власник 27.08.2026 прислав знімок
   і сказав: «сайт наш открой и посмотри, просил же брать за основу то,
   как там сделано».

   Заміряно на vsitkanyny.com.ua/trykotazh-dvonytka:
     рядок           flex, space-between — кількість ліворуч, кошик праворуч
     блок кількості  106×34, рамка 1px #f2f2f2, скруглення 8px, тло #f8fbfd
     кнопки − і +    32×32, без власних рамок, прозорі
     поле            40px, без рамки, 14px
     кнопка кошика   36×34, контур 1px, скруглення 8px, тло прозоре

   Колір контуру беремо СВІЙ (синій вітрини), а не блакитний із сайту:
   міняти всю палітру вітрини власник не просив. */
/* 🛑 Пункт И18. У каталозі не було видно, що позиція продається ТІЛЬКИ
   рулоном: це з'ясовувалось аж у картці, а з 98 позицій виходило багато
   зайвих заходів. Пишемо коротко «Тільки рулоном», а не «Тільки Опт ·
   Рулоном», як у картці: у плитці кожне зайве слово тисне на назву тканини.
   Колір той самий, що в плашки картки, — щоб людина впізнала позначення. */
.card-only {
  margin: 2px 0 0; font-size: 11.5px; line-height: 1.2; color: #a8305a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tile-buy { margin-top: 6px; }
.tile-buy .card-price { margin-top: 0; }

.tile-cart-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 8px;
}

.tile-qty {
  height: 34px;
  border: 1px solid var(--line); border-radius: 8px;
  background: #f8fbfd;
}
.tile-qty .qty-b { width: 32px; height: 32px; font-size: 17px; background: transparent; }
.tile-qty .qty-b:hover { background: rgba(0,0,0,.04); }
.tile-qty .qty-i {
  width: 40px; height: 32px; font-size: 14px; font-weight: 600;
  background: transparent; border-left: 0; border-right: 0;
}

/* 🛑 Пункт И14: було 36×34 — менше за норму для пальця (44), а до сусідньої
   картки лишалось 10 px, і промах відкривав чужу тканину. */
.tile-cart {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 40px; padding: 0;
  border: 1px solid var(--accent); border-radius: 8px;
  background: transparent; color: var(--accent);
  transition: background .15s ease, color .15s ease, transform .08s ease;
}
.tile-cart:hover { background: var(--accent-soft); }
.tile-cart:active { transform: scale(.94); }
.tile-cart.on { background: var(--accent); color: #fff; }
.tile-cart.on:hover { background: #1560c8; }

/* Кнопка «До Кошика» в картці товару. Стоїть першою і залита акцентом —
   з 27.08.2026 це головна дія вітрини.
   ⚠️ Малюємо повністю: у блоці `.cta` залитий вигляд має правило `.cta a`,
   а кошик — це button, і воно на нього не діє. */
.cta button.cta-cart {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 15px; border: 1px solid var(--accent);
  border-radius: var(--radius); font-weight: 700; font-size: 15.5px;
  background: var(--accent); color: #fff;
  box-shadow: 0 6px 18px rgba(26,110,224,.22);
  transition: transform .06s, box-shadow .15s;
}
.cta button.cta-cart:active { transform: translateY(1px); }
.cta button.cta-cart:hover { background: #1560c8; }
.cta button.cta-cart.on {
  background: var(--accent-soft); color: var(--accent);
  box-shadow: none;
}

/* 🛑 Кнопка менеджера більше НЕ залита. Дві сині кнопки поспіль сперечались
   між собою — незрозуміло, яка головна (побачено на телефоні 27.08.2026,
   одразу після появи кошика). Тепер головна одна, а менеджер поруч
   контурний: шлях звичний, прибирати його ніхто не просив. */
.cta a.cta-tg {
  background: #fff; color: var(--accent);
  border: 1px solid var(--accent); box-shadow: none;
}
.cta a.cta-tg:hover { background: var(--accent-soft); }

/* ---------- сам екран ---------- */
.cartpage { max-width: 1180px; margin: 0 auto; padding: 8px 14px 30px; }

.cart-row {
  display: grid;
  grid-template-columns: 84px 1fr auto auto 28px;
  align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.cart-ph {
  width: 84px; height: 84px; border-radius: var(--radius);
  overflow: hidden; background: var(--soft); display: block;
}
.cart-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-nm { font-weight: 600; display: block; }
.cart-nm:hover { color: var(--accent); }
.cart-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.cart-unit { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* Кількість: мінус, поле, плюс і підпис «рулони» / «м». */
.cart-qty { display: flex; align-items: center; gap: 6px; }
/* 🛑 Знаки «−» і «+» намальовані ЗНАЧКАМИ, а не текстом.
   Спершу стояв текст, і власник двічі сказав, що вони не по центру:
   «как будто кверху чуть-чуть прижались». Мої заміри через Range показували
   рівно нуль — і були марні: Range міряє текстовий вузол, а не те, де
   всередині нього сидить сам гліф. У шрифті мінус і плюс стоять вище
   базової лінії, тому оптично й тиснулись угору.

   Значок такої вади не має: лінія намальована по центру рамки.
   ⚠️ `padding: 0` і сітка потрібні все одно — кнопка має власні відступи. */
.qty-b {
  width: 32px; height: 32px; border-radius: 8px; padding: 0;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 18px; line-height: 1; display: grid; place-items: center;
}
.qty-b:hover { background: var(--soft); }
.qty-i {
  width: 58px; height: 32px; text-align: center;
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit; color: var(--ink);
}
/* Стрілочки браузера в числовому полі тут зайві: поруч свої кнопки. */
.qty-i::-webkit-outer-spin-button, .qty-i::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.qty-i { -moz-appearance: textfield; appearance: textfield; }
.qty-t { color: var(--muted); font-size: 13px; min-width: 52px; }

.cart-sum { text-align: right; min-width: 120px; }
.cart-sum b { font-size: 16px; white-space: nowrap; }
.cart-calc { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.cart-noprice { color: var(--muted); font-size: 13px; }

.cart-x {
  width: 28px; height: 28px; border-radius: 999px;
  border: 0; background: transparent; color: var(--muted);
  font-size: 20px; line-height: 1;
}
.cart-x:hover { background: var(--soft); color: var(--ink); }

/* ---------- підсумки ---------- */
.cart-sums {
  display: grid; gap: 12px; margin: 18px 0 4px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .cart-sums { grid-template-columns: 1fr 1fr; } }

.cart-total {
  background: var(--soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.cart-total-h { color: var(--muted); font-size: 13px; }
.cart-total-v { font-size: 24px; font-weight: 700; margin: 4px 0 6px; }
.cart-total-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

/* ---------- оформлення ---------- */
.cart-form-h { font-size: 18px; margin: 0 0 12px; }
.cart-f { display: block; margin-bottom: 12px; }
.cart-f > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.cart-f > span i { color: #e0245e; font-style: normal; }
/* ⚠️ `input[type=radio]` виключено навмисно: без цього кружечок вибору
   міста самовивозу отримував ширину 100% і відступи, і рядок розʼїжджався —
   кружечок ліворуч, підпис аж біля правого краю (побачено 27.08.2026). */
.cart-f input:not([type="radio"]), .cart-f select, .cart-f textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; color: var(--ink); background: #fff;
}
.cart-f input:not([type="radio"]):focus, .cart-f select:focus, .cart-f textarea:focus {
  outline: none; border-color: var(--accent);
}
.cart-f textarea { resize: vertical; }

/* ---------- поле з помилкою ----------
   Власник 27.08.2026: «не хватает красных подписей которые бы говорили
   как исправить». Раніше форма лаялась одним рядком унизу, і з трьох полів
   кроку було не видно, яке саме винне.

   Червоний той самий, що й у зірочки обовʼязкового поля, — щоб на екрані
   не з'явилось другого відтінку тривоги. Фон блідо-рожевий: рамки на телефоні
   мало, її не помічають. */
.cart-f.has-err input:not([type="radio"]),
.cart-f.has-err select,
.cart-f.has-err textarea {
  border-color: #e0245e;
  background: #fff7f9;
}
.cart-f.has-err input:not([type="radio"]):focus,
.cart-f.has-err select:focus,
.cart-f.has-err textarea:focus {
  border-color: #e0245e;
  box-shadow: 0 0 0 3px rgba(224, 36, 94, .12);
}
/* ⚠️ Селектор навмисно з тегом: підпис поля малює правило `.cart-f > span`
   (сірий колір), і воно СИЛЬНІШЕ за самий клас — перевірено оком 27.08.2026:
   рамка червоніла, а текст лишався сірим. Замір по DOM цього б не показав:
   підпис на місці, клас на місці, а на екрані — сіре. */
.cart-f > span.cart-err {
  display: block; margin-top: 5px; margin-bottom: 0;
  font-size: 12.5px; line-height: 1.35; color: #e0245e;
}

.cart-send {
  width: 100%; padding: 14px 18px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 600;
}
.cart-send:hover { background: #1560c8; }
.cart-note { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.cart-copy { width: 100%; margin-top: 8px; font: inherit; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--radius); }

/* ---------- телефон ----------
   На вузькому екрані рядок у п'ять колонок не влазить: розкладаємо в два
   ряди — фото з назвою зверху, кількість і сума під ними. */
@media (max-width: 640px) {
  .cart-row {
    /* 🛑 Третя колонка саме `auto`, а не 28px під хрестик. Було 28px —
       і сума, в якої свій `min-width: 120px`, розпирала рядок: сторінка
       стала 453 px при екрані 375, число поїхало за край (заміряно
       27.08.2026, та сама біда, що вчора зі стартовим екраном). */
    grid-template-columns: 64px 1fr auto;
    grid-template-areas:
      "ph info x"
      "qty qty sum";
    row-gap: 10px;
  }
  .cart-ph { grid-area: ph; width: 64px; height: 64px; }
  .cart-info { grid-area: info; min-width: 0; }
  .cart-x { grid-area: x; }
  .cart-qty { grid-area: qty; }
  .cart-sum { grid-area: sum; text-align: right; min-width: 0; }
  /* Довга назва теж не має розпирати рядок — переносимо. */
  .cart-nm, .cart-sub, .cart-unit { overflow-wrap: anywhere; }
}


/* ============================================================================
   БЛОК ЗАМОВЛЕННЯ В КАРТЦІ — за зразком сайту компанії (власник, 27.08.2026)
   ============================================================================ */

.buy {
  margin: 18px 14px 0; padding: 14px;
  background: var(--soft); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.buy-row { display: flex; align-items: stretch; gap: 10px; }

/* Компактна кількість «− 1 +» однією рамкою, як на зразку. */
.qty-box {
  display: flex; align-items: stretch; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; overflow: hidden;
}
/* 🛑 `height: auto` тут ОБОВʼЯЗКОВО, і ось чому.
   Загальне правило `.qty-b` задає кнопці 32 px висоти. У блоці купівлі
   рамка розтягується на висоту сусідньої кнопки «До Кошика» — 51 px, —
   а кнопка лишалась 32, і під нею висіло 18 px порожнечі. Саме це власник
   і бачив: «как будто кверху чуть-чуть прижались». Заміряно 27.08.2026:
   блок 365–416, кнопка 366–398.

   ⚠️ Значок усередині вже стоїть по центру — справа була не в ньому,
   а у висоті самої кнопки. */
.qty-box .qty-b {
  display: grid; place-items: center;
  width: 40px; height: auto; align-self: stretch;
  padding: 0; border: 0; border-radius: 0; background: #fff;
  color: var(--ink); font-size: 19px; line-height: 1;
}
.qty-box .qty-b:hover { background: var(--soft); }
.qty-box .qty-i {
  width: 52px; height: auto; border: 0; border-radius: 0;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  text-align: center; font-weight: 600;
}
.qty-box .qty-i:focus { outline: none; }

/* Підпис міри біля кількості в картці: «рулони» чи «м» (пункт И17). */
.qty-t { font-size: 14px; color: var(--muted); white-space: nowrap; }

.buy-cart {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  flex: 1 1 auto; padding: 13px 18px;
  border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent); color: #fff; font-size: 15.5px; font-weight: 700;
}
.buy-cart:hover { background: #1560c8; }
.buy-cart.on { background: var(--accent-soft); color: var(--accent); }

.buy-fast {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 10px; padding: 12px 18px;
  border: 1px solid var(--accent); border-radius: var(--radius);
  background: #fff; color: var(--accent); font-size: 15px; font-weight: 600;
}
.buy-fast:hover { background: var(--accent-soft); }

/* Перерахунок під кнопками: скільки виходить і скільки коштує. */
.buy-calc {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
/* Скільки виходить: в опті це не виноска, а факт про товар — темним
   і трохи більшим, ніж було. Сіре 14px губилось поруч із великою ціною. */
.buy-calc-q { color: var(--ink); font-size: 15px; }
.buy-calc b { font-size: 19px; }
/* «орієнтовно» — окрема плашка біля суми. Бурштин, а не червоне: це
   попередження, а не помилка. Власник 27.08.2026: на те, що ціна
   приблизна й рулон ± 50 м, «недостаточно акцентировано внимание…
   нужно чуть больше, не суперналяписто». */
.buy-calc-approx {
  font-size: 12px; line-height: 1; padding: 4px 8px; border-radius: 999px;
  background: #fff6e5; color: #8a5a00; border: 1px solid #f0dcae;
  white-space: nowrap;
  /* ВЕЛИКИМИ й жирним — прохання власника 27.08.2026: «сделай, пожалуйста,
     слово ориентировочно, все заглавными и жирным, и тогда будет отлично».
     Розрідження додано на пів кроку: капс без нього читається гірше. */
  text-transform: uppercase; font-weight: 700; letter-spacing: .03em;
}
/* Пояснення про замір їде власним рядком: у хвості довгого рядка,
   після великої ціни, його не дочитували. */
.buy-calc-note {
  flex-basis: 100%; color: var(--muted); font-size: 12px; margin-top: 2px;
}
.buy-calc i { color: var(--muted); font-size: 12px; font-style: normal; }

/* ---------- три кроки кошика ---------- */
.cart-steps {
  display: flex; gap: 8px; list-style: none;
  margin: 0 0 18px; padding: 0;
}
.cart-step {
  display: flex; align-items: center; gap: 8px; flex: 1 1 0;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--muted); font-size: 14px;
}
.cart-step b {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--soft); color: var(--muted); font-size: 12.5px;
}
.cart-step.on { border-color: var(--accent); color: var(--ink); font-weight: 600; }
.cart-step.on b { background: var(--accent); color: #fff; }
/* Пройдений крок клікабельний — повернутись і виправити можна завжди. */
.cart-step.done { cursor: pointer; color: var(--ink); }
.cart-step.done b { background: var(--accent-soft); color: var(--accent); }
.cart-step.done:hover { border-color: var(--accent); }

@media (max-width: 560px) {
  /* 🛑 Пункт И12. Було: на телефоні лишались самі номери — людина бачила
     «1 Товари», «2», «3» і не знала, що попереду: контакти, доставка, оплата?
     Тепер підписи стоять завжди, дрібнішим шрифтом — усі три вміщаються. */
  .cart-step { flex: 1 1 0; justify-content: center; padding: 8px 4px; gap: 5px; }
  .cart-step span { font-size: 11.5px; }
  .cart-step.on span { font-size: 12.5px; }
  .cart-step b { width: 20px; height: 20px; font-size: 12px; }
}

.cart-pane { max-width: 620px; }
#cartPane1 { max-width: 100%; }

.cart-nav { display: flex; gap: 10px; margin-top: 20px; }
.cart-next, .cart-send {
  flex: 1 1 auto; padding: 14px 18px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 600;
}
.cart-next:hover, .cart-send:hover { background: #1560c8; }
.cart-back {
  flex: 0 0 auto; padding: 14px 22px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 15px; font-weight: 600;
}
.cart-back:hover { background: var(--soft); }

/* Вибір міста самовивозу */
/* ---------- підказки Нової Пошти ----------
   Місто й відділення обираються зі справочника, а не пишуться від руки
   (рішення власника 27.08.2026). Список падає прямо під полем. */
.cart-ac { position: relative; }
.ac-list {
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
  margin-top: 4px; max-height: 260px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.ac-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px; font-size: 14px; line-height: 1.35;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.ac-item:last-child { border-bottom: 0; }
.ac-item:hover, .ac-item[aria-selected="true"] { background: var(--accent-soft); }
.ac-item b { display: block; font-weight: 600; }
.ac-item i { font-style: normal; color: var(--muted); font-size: 12.5px; }
.ac-empty { padding: 10px 12px; font-size: 13px; color: var(--muted); }

/* Що саме обрано — цілим рядком під полем. У сам input влазить лише початок:
   людина бачила «Відділення №12 (до 30 кг на одне місце» і не бачила адреси.
   Помилка у відділенні гірша за незамовлення — посилка поїде не туди.

   ⚠️ Селектор із тегом навмисно: підпис поля малює `.cart-f > span`, і воно
   сильніше за самий клас (та сама грабля, що з червоними підписами). */
.cart-f > span.ac-picked {
  display: block; margin: 6px 0 0; padding-left: 20px; position: relative;
  font-size: 13px; line-height: 1.4; color: var(--ink);
}
.cart-f > span.ac-picked::before {
  content: '✓'; position: absolute; left: 2px; top: 0;
  color: #59AA45; font-weight: 700;
}

/* Галочка «Отримувач — я»: знята — відкриваються поля отримувача. */
.cart-check {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 12px; font-size: 14px; color: var(--ink); cursor: pointer;
}
.cart-check input { width: 16px; height: 16px; accent-color: var(--accent); }

.cart-radio {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; cursor: pointer;
}
.cart-radio:hover { border-color: var(--accent); }
.cart-radio input { margin-top: 3px; accent-color: var(--accent); }
.cart-radio span { display: flex; flex-direction: column; }
.cart-radio b { font-size: 15px; }
.cart-radio i { color: var(--muted); font-size: 13px; font-style: normal; }

/* Підсумок перед відправкою */
.cart-final { margin: 18px 0 0; }
.cart-final-in {
  padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--soft);
}
.cart-final-sub { color: var(--muted); font-size: 13px; margin-top: 4px; }


/* ---------- позначка «опт / роздріб» у списку кошика (27.08.2026) ----------
   🛑 Спершу я розніс позиції у дві окремі групи з жирними заголовками
   й підсумком усередині кожної. Власник: «корзина внутри стала вообще
   ужасной, раньше было лучше. Просто не хватало заголовков или отметок,
   что это оптовые позиции, а это розничные».

   Тому список лишився таким, як був, а тут — рівно те, чого бракувало:
   скромний підпис над першою позицією кожного виду. */
.cart-mark {
  color: var(--muted); font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 18px 0 6px;
}
.cart-list > .cart-mark:first-child { padding-top: 2px; }


/* ============================================================================
   КАРТКА ПОЗИЦІЇ — дві колонки на широкому екрані (27.08.2026)

   Власник: «всё спускается потихоньку вниз. Возможно, разделить это как-то
   на две части… чтобы чуть больше помещалось на экран десктопа» і «кнопки
   "в обране" и "сравнить" желательно поднять выше, чтобы они всегда были
   на первом экране… чтобы вниз упала только характеристика».
   ============================================================================ */

/* На вузькому екрані обгортки РОЗЧИНЯЮТЬСЯ: `display: contents` не створює
   блоків, і все стає в один потік — рівно так, як було до правки. */
.item-media, .item-main, .item-specs { display: contents; }

@media (min-width: 1000px) {
  .item {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: 34px;
    align-items: start;
    padding: 10px 14px 48px;
  }
  /* 🛑 БЕЗ `position: sticky`. Спершу ліва колонка була липкою — і при
     прокручуванні наїжджала на характеристики: підписи кольорів лягали
     поверх рядків таблиці. Власник 27.08.2026: «вот такая срань при скроле».
     Липкість тут нічого не давала, а ламала сторінку. */
  .item-media { display: block; grid-column: 1; }
  .item-main  { display: block; grid-column: 2; }
  /* Характеристики — під обома колонками, на всю ширину, і САМІ в дві
     колонки: вісім рядків стають чотири плюс чотири, блок удвічі нижчий.

     ⚠️ Пробував ставити їх у праву колонку, щоб закрити порожнечу під
     кнопками. Вийшло гірше: права колонка стала на 434 px нижчою за ліву,
     і порожньою лишилась уже ліва. Заміряно 27.08.2026. */
  .item-specs { display: block; grid-column: 1 / -1; margin-top: 26px; }
  .item-specs .specs {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 34px; align-content: start;
  }
  /* Смужки-через-одну рахуються по РЯДКУ сітки, а не по порядку в розмітці —
     інакше в двох колонках вони йшли б сходинками. */
  .item-specs .spec:nth-child(4n+3),
  .item-specs .spec:nth-child(4n+4) { background: var(--soft); }
  .item-specs .spec:nth-child(4n+1),
  .item-specs .spec:nth-child(4n+2) { background: transparent; }

  /* Усередині колонок бічні відступи вже не потрібні — їх дає сітка. */
  .item-media .gal { padding: 0; }
  .item-media .vars { margin: 14px 0 0; }
  .item-main > h1,
  .item-main > .art,
  .item-main > .badges,
  .item-main > .price,
  .item-main > .buy,
  .item-main > .cta { margin-left: 0; margin-right: 0; }
  .item-main > h1 { margin-top: 0; }

  /* Фото в колонці — сіткою, без прокрутки вбік: місця тепер вдосталь,
     а горизонтальна стрічка на широкому екрані читалась як обрізана.
     ⚠️ Ширину `.gal-i` доводиться перебивати: у стрічці вона 42% і не
     розтягується (flex: 0 0 auto), і в сітці лишались вузькі картки
     з порожнечею праворуч. */
  /* Фото — ОДНЕ на всю ширину колонки, решта гортається стрілками.
     Власник 27.08.2026: «можно же сделать переключение стрелочками влево
     и вправо… не обязательно ниже ещё одну превьюшку пихать».

     🛑 Чому не стовпчиком і не мініатюрами: стовпчиком два фото з'їдали
     1232 px висоти, і ряд кольорів опинявся на 1195 px — за межами першого
     екрана. Для вітрини тканин це найгірше: людина не бачить, що тканина
     є ще в десяти кольорах. Мініатюра під великим фото це лікувала, але
     додавала зайвий елемент. Гортання лишає один кадр — і кольори видно. */
  .item-media .gal { padding: 0; }
  .item-media .gal-i { width: 100%; max-width: none; }

  /* Кнопки «В Обране» і «Порівняти» стають у рядок — так вони не з'їдають
     висоту й лишаються на першому екрані разом із кошиком. */
  .item-main > .cta { grid-auto-flow: column; grid-auto-columns: 1fr; }
}


/* 🛑 На вузькому екрані кількість із плитки прибираємо.
   Заміряно 27.08.2026: блок кількості 106 px + кнопка 36 + зазор 10 = 152,
   а плитка на телефоні близько 170 — рядок не влазив, кнопка кошика їхала
   за край плитки. Кількість там і не потрібна: пальцем зручніше вказати її
   в картці або вже в кошику, де видно суму. */
@media (max-width: 720px) {
  .tile-qty { display: none; }
  .tile-cart-row { justify-content: flex-end; }
}


/* ---------- гортання фото: стрілки, крапки (27.08.2026) ---------- */
.gal-wrap { position: relative; }

/* Стрілки — тільки там, де є мишка. На телефоні гортають свайпом,
   і кнопки поверх фото лише заважали б пальцю. */
.gal-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 999px;
  display: none; place-items: center;
  border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--ink);
  box-shadow: 0 2px 8px rgba(16,24,40,.16);
  transition: background .15s ease;
  z-index: 2;
}
.gal-nav:hover { background: #fff; }
.gal-prev { left: 10px; }
.gal-next { right: 10px; }
@media (hover: hover) { .gal-nav { display: grid; } }

/* Крапки під фото: скільки кадрів і на якому ми зараз. */
.gal-dots {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 10px;
}
.gal-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--line); cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.gal-dot.on { background: var(--accent); transform: scale(1.25); }

/* На телефоні кадр займає всю ширину — щоб свайп гортав рівно по одному
   фото, а не показував півтора. Було 84%: край наступного визирав збоку
   й підказував, що є ще. Тепер про це кажуть крапки. */
@media (max-width: 999px) {
  .gal-i { width: 100%; }
  .gal { gap: 0; }
}


/* 🛑 `scroll-behavior: smooth` на стрічці НЕ ставимо — перевірено
   27.08.2026: у стрічці зі `scroll-snap-type: x mandatory` будь-яка
   плавна програмна прокрутка не працює зовсім, браузер відкочує її
   до нинішньої точки привязки. Ні `scrollBy`, ні `scrollIntoView`,
   ні плавність через CSS — фото просто не гортається.

   Тому гортаємо різко. Кадр міняється миттєво, зате міняється. */


/* ---------- дрібниці, помічені власником 27.08.2026 ----------

   Смужка прокрутки під фото. Стрічку гортають стрілками, свайпом
   і крапками — сама смужка нічого не додає, а темніє під кадром.
   Власник: «внизу ещё появляется небольшая такая вот полоска скролла
   тёмная. Типа, это лишнее».

   ⚠️ Ховаємо ДВОМА наборами правил: нові Chrome і Edge слухають
   `scrollbar-width`, старі — `::-webkit-scrollbar`. Це вже записано
   в граблях блоку. */
.gal { scrollbar-width: none; -ms-overflow-style: none; }
.gal::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---------- екран «замовлення прийнято» (27.08.2026) ----------
   Показуємо, ЩО саме прийнято й що буде далі: інакше людина не розуміє,
   чи спрацювало, і надсилає замовлення вдруге. */
.cart-done { max-width: 520px; margin: 30px auto; text-align: center; }
.cart-done-ic {
  width: 64px; height: 64px; margin: 0 auto 16px;
  display: grid; place-items: center; border-radius: 999px;
  background: #e8f6ed; color: #2e9e5b;
}
.cart-done h2 { font-size: 21px; margin: 0 0 10px; }
.cart-done p { margin: 0 0 10px; line-height: 1.55; }
.cart-done-sub { color: var(--muted); font-size: 13.5px; }
.cart-done-go {
  display: inline-block; margin-top: 14px; text-decoration: none;
  padding: 13px 28px; flex: 0 0 auto;
}