/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Прибираємо системне підсвічування тапу на мобільному (iOS/Android default
   показує напівпрозорий блакитний/сірий прямокутник на будь-якому таповому
   елементі). Властивість успадковується, тому одного оголошення на html
   достатньо для всіх <a>/<button>/<details summary> на сайті. */
html { -webkit-tap-highlight-color: transparent; }
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #1a1a1a;
  background: #f5f1e8;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

:root {
  --bg: #f5f1e8;
  --fg: #1a1a1a;
  --muted: #6b6b6b;
  --line: #d8d2c4;
  --accent: #8b1f1f;
  --btn: #1a1a1a;
  --btn-fg: #fff;
  --shop-purple: #6b46e0;
  --max: 1280px;
  /* Висоти promo + header — статичні, без JS-resize-listener. На iOS resize
     event фірить при show/hide address bar → раніше це викликало layout shift
     на скролі. Тепер значення зашиті у CSS і не змінюються під час сесії.
     На desktop окремої nav-стрічки більше немає — категорії в одному
     рядку з логотипом, тож --header-h уніфікований. */
  --promo-h: 33px;
  --header-h: 57px;
}

/* ---------- A11y baseline (MVP 0.0.5 / A3 з web-design-guidelines) ---------- */
/* Глобальний :focus-visible. :where() обнуляє specificity → перекривається
   будь-яким локальним правилом. Існуючі точкові outline:none у формах,
   slider'ах, drawer-buttons лишаються поки чинні (cleanup → A11Y-FOCUS-VISIBLE-CLEANUP
   у BACKLOG). Цього достатньо для покриття всіх interactive елементів,
   що не мали локального override. */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
/* Reduced-motion reset для motion-sensitivity юзерів (WCAG 2.3.3). Глобально
   обрізає тривалість animation/transition і smooth-scroll до ~миттєво. Нашу
   skeleton-shimmer / fade-img / drawer slide-in / smooth scrollTo автоматично
   будуть приструнчені без перебудови кожного site-правила. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Top promo bar ---------- */
.promo-bar {
  background: var(--fg);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.25s ease;
  /* Висоту прив'язуємо строго до CSS-змінної (раніше padding: 8px 12px давав
     реальну висоту ~33px, але це залежало від line-height/font-metrics і
     могло розрахункам не збігатись із --promo-h на 1-2px). Flex-центрування
     content замість text-align/padding гарантує, що --promo-h і реальна
     висота promo-bar ідентичні — від цього залежить hero margin-top calc
     на головній. */
  height: var(--promo-h);
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Гарантуємо, що текст ніколи не переноситься на 2 рядки — інакше реальна
     висота promo (~49px) перевищить --promo-h (33px), hero overlap-calc
     недотягне до верху, і promo частково ховається під hero. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* На дуже вузьких екранах (<380px, наприклад iPhone SE) скорочуємо letter-spacing,
   щоб текст поміщався у один рядок без ellipsis. Висота promo лишається 33px. */
@media (max-width: 379px) {
  .promo-bar {
    letter-spacing: 0.04em;
    font-size: 10px;
  }
}
/* На головній (overlay-режим) promo прозорий — як у hero-ref.png; коли
   юзер проскролив за межі hero, ця стрічка вже за межею в'юпорту, тож
   .scrolled-стилі для неї не потрібні. text-shadow — щоб текст лишався
   читабельним і поки hero-фото ще не завантажилось (на бежевому
   gradient-фолбеку) і просто як страховка над світлими ділянками фото
   (overlay може не повністю покрити насичено-світлий пейзаж).
   КРИТИЧНО: position: relative + z-index: 50 — без цього `.hero` (positioned
   relative + margin-top: -(promo+header)) паїнтиться ПОВЕРХ promo-bar
   через CSS painting order (positioned > static у одному stacking context).
   Z-index витягує promo на той самий рівень, що й sticky-header (z-50). */
body.has-hero-overlay .promo-bar {
  background: transparent;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  position: relative;
  z-index: 50;
}
body.has-hero-overlay .site-header .logo,
body.has-hero-overlay .site-header .nav-desktop a {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* Коли header перейшов у solid-стан (.scrolled), shadow більше не потрібен. */
body.has-hero-overlay.scrolled .promo-bar,
body.has-hero-overlay.scrolled .site-header .logo,
body.has-hero-overlay.scrolled .site-header .nav-desktop a {
  text-shadow: none;
}

/* ---------- Header ---------- */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
  /* Висота — суворо за змінною. Раніше .header-inner padding: 14px 16px давав
     реальну висоту ~61px (padding × 2 + Times New Roman 22px line-height 1.5),
     при тому що --header-h було 57px. На overlay-сторінках (головна) hero
     margin-top: -(promo+header) недотягувався на ~4px і над promo-bar
     просвічувала body-стрічка. Тепер реальна = заявлена. */
  height: var(--header-h);
  transition: background-color 0.25s ease, border-bottom-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

/* Прозорий хедер поверх hero — вмикається на сторінці з overlay-режимом
   (поки що тільки головна, body.has-hero-overlay). При скролі за межі hero
   home.js додає на body клас .scrolled і хедер повертається до solid-стану. */
body.has-hero-overlay .site-header {
  background: transparent;
  border-bottom-color: transparent;
  color: #fff;
}
body.has-hero-overlay .site-header .icon-btn { color: #fff; }
body.has-hero-overlay .site-header .logo { color: #fff; }
body.has-hero-overlay .site-header .cart-count {
  background: #fff;
  color: var(--fg);
}
body.has-hero-overlay.scrolled .site-header {
  background: var(--bg);
  border-bottom-color: var(--line);
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  color: var(--fg);
}
body.has-hero-overlay.scrolled .site-header .icon-btn { color: var(--fg); }
body.has-hero-overlay.scrolled .site-header .logo { color: var(--fg); }
body.has-hero-overlay.scrolled .site-header .cart-count {
  background: var(--fg);
  color: #fff;
}
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  max-width: var(--max);
  margin: 0 auto;
}
.header-left, .header-right {
  display: flex;
  align-items: center;
  gap: 18px;
  /* min-width: 0 — критично для grid 1fr auto 1fr: без цього grid item
     розтягується до min-content свого вмісту (white-space: nowrap у nav),
     1fr перестає бути 1fr і колонка "вилазить" на сусідню (логотип). */
  min-width: 0;
}
.header-right { justify-content: flex-end; }
.logo {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 22px;
  letter-spacing: 0.3em;
  text-align: center;
  font-weight: 400;
}
.icon-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.icon-btn svg { width: 32px; height: 32px; }
.cart-count {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--fg);
  color: #fff;
  font-size: 10px;
  border-radius: 50%;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cart-count[data-empty="true"] { display: none; }

/* Desktop nav — на мобільному прихований (юзер користується бургером);
   на десктопі — inline у header-left, поряд із логотипом. Окремої
   нижньої стрічки більше немає. Категорії розподіляються space-evenly,
   щоб бути РІВНОВІДДАЛЕНИМИ від лівого краю шапки і від логотипу
   (вимога юзера). nav-desktop { flex: 1 } займає всю ширину header-left,
   а ul.justify-content: space-evenly розподіляє <li> з рівними проміжками. */
.nav-desktop { display: none; }
@media (min-width: 1024px) {
  .nav-desktop {
    display: block;
    flex: 1;
    min-width: 0;
  }
}
.nav-desktop ul {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.nav-desktop a {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
  padding: 0 4px;
  transition: opacity 0.15s ease;
}
.nav-desktop a:hover { opacity: 0.65; }
.nav-desktop.has-ss a { letter-spacing: 0.06em; padding: 0 2px; }

@media (min-width: 1024px) {
  .nav-desktop { display: block; }
  .header-left .icon-btn.menu { display: none; }
}

/* ---------- Side menu (mobile drawer) ---------- */
.side-menu {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  max-width: 100%;
  height: 100vh;       /* фолбек для старих браузерів */
  height: 100dvh;      /* реальна видима висота на мобільних (з урахуванням адресного рядка) */
  background: var(--bg);
  z-index: 100;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 0 24px;
  /* низ: safe-area, щоб останній пункт і Instagram не ховались під home-indicator */
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.side-menu.open { transform: translateX(0); }
.side-menu .close {
  font-size: 28px;
  align-self: flex-start;
  padding: 10px 0 0;
  margin-bottom: 0;
}
.side-menu nav ul li {
  border-bottom: 1px solid var(--line);
}
.side-menu nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.side-menu nav a.sale { color: var(--accent); }
/* #11 ?v=005f: Instagram-link внизу side-menu. margin-top: auto тримає його
   приклеєним до низу drawer'а, незалежно від кількості категорій. */
.side-menu-instagram {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 16px 0 8px;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
}
.side-menu-instagram svg {
  width: 22px;
  height: 22px;
}
.menu-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.menu-overlay.open { opacity: 1; pointer-events: auto; }

/* ---------- Hero ----------
   Поза overlay-режимом (наприклад, на сторінках без has-hero-overlay) — fallback
   75vh з градієнтом. На головній (body.has-hero-overlay) hero на 100dvh від
   promo-bar до низу видимого в'юпорта. background-image встановлюється з JS
   після успішного preload — інакше лишається градієнт. */
.hero {
  position: relative;
  height: 78vh;
  min-height: 480px;
  background-color: #8a7a64;
  background-image: linear-gradient(135deg, #c9b9a3, #8a7a64);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 64px;
  overflow: hidden;
}
/* 100svh (small viewport height) — НЕ змінюється при show/hide
   address-bar на iOS Safari. Раніше 100dvh ріс/звужувався під час скролу
   і фото у hero-фоні візуально змінювало розмір (background-size: cover →
   re-fit). Тепер висота фіксована за найменшим viewport, фото стабільне.
   Margin/padding-top враховує і promo-bar, і header — щоб hero розтягувався
   ПІД ОБОМА (раніше фото було лише під header, а за прозорим promo-баром
   виднівся body-фон). */
body.has-hero-overlay .hero {
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  margin-top: calc(-1 * (var(--promo-h) + var(--header-h)));
  padding-top: calc(var(--promo-h) + var(--header-h));
  padding-bottom: 56px;
}
/* Двосторонній subtle-градієнт над hero-фото — читабельність білих елементів
   на будь-якому фото:
   - 0..20% (зверху) затінення під promo-bar + хедер: раніше тут було чисто,
     і на фото зі світлим студійним фоном білий текст promo-стрічки
     "Безкоштовна доставка" зливався з тлом і ставав невидимим;
   - 55..100% (знизу) затінення під hero-CTA "Переглянути пропозиції".
   Середина (20..55%) — без затінення, фото домінує. */
@media (max-width: 767px) {
  .hero.has-hero-mobile {
    background-image: var(--hero-mobile-img) !important;
  }
}
.hero.has-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.40) 0%,
    rgba(0, 0, 0, 0.18) 8%,
    transparent 22%,
    transparent 55%,
    rgba(0, 0, 0, 0.40) 100%
  );
  z-index: 1;
  pointer-events: none;
}
/* Hero CTA у стилі meshki-референсу (hero-ref.png): plain white text,
   uppercase, з тонким underline. БЕЗ background, БЕЗ border. */
.hero-cta {
  position: relative;
  z-index: 2;
  display: inline-block;
  background: transparent;
  color: #fff;
  border: none;
  padding: 6px 4px;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 1px;
  transition: text-underline-offset 0.2s ease, opacity 0.2s ease;
}
.hero-cta:hover {
  color: #fff;
  text-underline-offset: 11px;
  opacity: 0.85;
}
@media (min-width: 768px) {
  .hero-cta {
    font-size: 13px;
    letter-spacing: 0.3em;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 32px;
  background: var(--btn);
  color: var(--btn-fg);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid var(--btn);
}
.btn-block { display: block; width: 100%; }
.btn-outline { background: transparent; color: var(--fg); border: 1px solid var(--fg); }
.btn-shop { background: var(--shop-purple); color: #fff; border-color: var(--shop-purple); }

/* ---------- Section blocks (home) ---------- */
.section-blocks {
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr;
}
.section-block {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #d4cab9;
}
/* ---------- Home category grid (8 категорій: моб 2-кол, ПК 4×2) ---------- */
/* Flexbox замість grid (MVP 0.4.0): будь-яка к-сть плиток центрується симетрично
   (напр. 7 → 4 + 3 центровані), останній неповний ряд не притискається вліво.
   2/ряд мобайл+планшет, 4/ряд десктоп; basis = (100% − (n−1)·gap)/n. */
.home-cat-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0 12px 16px;
}
.home-cat-item {
  flex: 0 0 calc(50% - 4px);
  height: 200px;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: #d4cab9;
  text-decoration: none;
  display: block;
}
.home-cat-item img,
.home-cat-item .bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.home-cat-item:hover img { transform: scale(1.04); }
.home-cat-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 28px 8px 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.52), transparent);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
@media (min-width: 768px) {
  .home-cat-grid { gap: 12px; padding: 0 20px 16px; }
  .home-cat-item { flex-basis: calc(50% - 6px); height: 260px; }
}
@media (min-width: 1024px) {
  .home-cats-wrap { max-width: var(--max); margin-left: auto; margin-right: auto; }
  .home-cat-grid { gap: 14px; padding: 0 0 20px; }
  .home-cat-item { flex-basis: calc(25% - 10.5px); height: 360px; }
  .home-cat-label { font-size: 13px; }
}
.section-block img,
.section-block .bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.section-block .bg {
  background: linear-gradient(135deg, #b8a890, #968574);
}
.section-block .caption {
  position: relative;
  z-index: 2;
  padding: 16px 16px 24px;
  background: linear-gradient(to top, rgba(0,0,0,0.45), transparent 60%);
  color: #fff;
  margin-top: auto;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  text-align: left;
}
.section-block .caption h2 {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 20px;
  letter-spacing: 0.05em;
}
.section-block .caption .link {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 768px) {
  .section-blocks { grid-template-columns: 1fr 1fr; }
}

/* ---------- Page heading (catalog) ---------- */
.page-head {
  text-align: center;
  padding: 16px 16px 8px;
}
.page-head h1 {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 22px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.page-head .subline {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}

/* ---------- Catalog category gallery (плитки категорій/підкатегорій
   над списком товарів). Звичайний потоковий блок з горизонтальним скролом
   і snap'ом — щоб і 3 плитки підкатегорій, і 16 топ-категорій виглядали
   однаково. На категоріях без підкатегорій блок не рендериться (catalog.js). */
.cat-gallery {
  padding: 12px 0 4px;
  position: relative;
}
.cat-gallery-track {
  min-width: 0;
}
.cat-gallery-btn {
  display: none;
}
.cat-gallery--scrollable .cat-gallery-btn {
  display: flex;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  color: #111;
  transition: color 0.2s;
  user-select: none;
}
.cat-gallery--scrollable .cat-gallery-prev { left: 4px; }
.cat-gallery--scrollable .cat-gallery-next { right: 4px; }
.cat-gallery--scrollable .cat-gallery-btn:disabled { color: #ccc; cursor: default; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.cat-gallery-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding: 0 16px 8px;
  /* "safe center" — центрує плитки коли вони вміщаються у в'юпорт (2-3 шт),
     а коли їх багато і виникає overflow — start-edge лишається доступним
     для скролу (без safe плитки могли б почати з off-screen). */
  justify-content: safe center;
}
.cat-gallery-row::-webkit-scrollbar { display: none; }
.cat-tile {
  flex: 0 0 auto;
  width: 130px;
  scroll-snap-align: start;
}
.cat-tile-img {
  width: 100%;
  aspect-ratio: 3/4;
  background: #ddd5c4;
  overflow: hidden;
}
.cat-tile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cat-tile-label {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: var(--fg);
}
@media (min-width: 768px) {
  .cat-gallery-row { padding: 0 24px 8px; gap: 12px; }
  .cat-tile { width: 160px; }
  .cat-tile-label { font-size: 12px; margin-top: 10px; }
}
@media (min-width: 1024px) {
  .cat-gallery--scrollable {
    max-width: var(--max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 54px;
    padding-right: 54px;
  }
  .cat-gallery--scrollable .cat-gallery-track { overflow: hidden; }
  .cat-gallery--scrollable .cat-gallery-row { justify-content: flex-start; scroll-snap-type: none; }
  /* 7 tiles + 6 gaps fill track exactly; 8th tile starts beyond track → hidden */
  .cat-gallery--scrollable .cat-tile { width: calc((100% - 6 * 12px) / 7); }
  .cat-gallery-row { padding: 0 0 8px; }
  .cat-gallery--scrollable .cat-gallery-btn { width: 44px; height: 44px; }
  .cat-gallery--scrollable .cat-gallery-prev { left: 5px; }
  .cat-gallery--scrollable .cat-gallery-next { right: 5px; }
  .cat-tile { width: 160px; }
}

/* Підкатегорії на сторінці категорії — текстові чіпи без фото */
.cat-sub-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px 16px;
}
.cat-sub-chip {
  display: inline-block;
  padding: 9px 22px;
  border: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.cat-sub-chip:hover {
  background: var(--fg);
  border-color: var(--fg);
  color: #fff;
}
@media (min-width: 768px) {
  .cat-sub-chips { gap: 10px; padding: 10px 24px 20px; }
  .cat-sub-chip { font-size: 13px; padding: 10px 28px; }
}

/* ---------- Filters + Sort (editorial redesign) ----------
   Філософія: refined editorial. Times New Roman serif для секцій-заголовків
   у sheet'і, кастомні елементи замість native select/checkbox, плавні
   анімації для відчуття "ателье", а не "Excel". Sheet знизу на мобільному
   (як Quick Buy для консистентності), slide-down inline на десктопі. */
.filters-bar {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: stretch;
  height: 56px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.sort-wrap {
  position: relative;
  display: flex;
  min-width: 0; /* дозволяє grid-комірці стискати ширину незалежно від контенту */
}
.filters-btn,
.sort-btn {
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0 16px;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  cursor: pointer;
  transition: background 0.2s ease;
  overflow: hidden;
}
.filters-btn > span,
.sort-btn > span,
.sort-btn > .sort-current {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.filters-btn:hover,
.sort-btn:hover { background: rgba(0,0,0,0.025); }
.filters-btn[aria-expanded="true"],
.sort-btn[aria-expanded="true"] { background: rgba(0,0,0,0.04); }
.filters-btn svg { width: 16px; height: 16px; }
.filters-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--fg);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0;
  font-weight: 500;
}
.sort-btn .sort-current {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: none;
  font-style: italic;
  color: var(--fg);
}
.sort-btn .sort-chevron {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}
.sort-btn[aria-expanded="true"] .sort-chevron { transform: rotate(180deg); }
.filters-divider {
  width: 1px;
  background: var(--line);
  margin: 8px 0;
  flex-shrink: 0;
}

/* Sort dropdown menu — кастомний, не native; позиціонується відносно .sort-wrap */
.sort-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: none;
  z-index: 60;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 28px rgba(0,0,0,0.1);
  transform-origin: top right;
  animation: sort-menu-in 0.18s ease-out both;
}
.sort-menu[hidden] { display: none; }
@keyframes sort-menu-in {
  0% { opacity: 0; transform: translateY(-6px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.sort-option {
  background: none;
  border: none;
  text-align: left;
  padding: 12px 18px;
  font: inherit;
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--fg);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s ease, padding-left 0.18s ease;
  position: relative;
}
.sort-option:last-child { border-bottom: none; }
.sort-option:hover { background: rgba(0,0,0,0.03); padding-left: 24px; }
.sort-option[aria-selected="true"] {
  font-style: italic;
  padding-left: 32px;
}
.sort-option[aria-selected="true"]::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 1px;
  background: var(--fg);
}

/* Active filter chips — editorial pills над гридом. */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 4px;
}
.active-filters[hidden] { display: none; }
.active-filters-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  background: var(--fg);
  color: #fff;
  border: none;
  font: inherit;
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  animation: chip-in 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both;
  transition: background 0.15s ease;
}
.filter-chip:hover { background: var(--accent); }
.filter-chip svg { width: 12px; height: 12px; flex-shrink: 0; }
.active-filters .clear-all {
  background: none;
  border: none;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 4px;
  margin-left: auto;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.active-filters .clear-all:hover { color: var(--fg); }
@keyframes chip-in {
  0% { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

/* Filter sheet — bottom-sheet на мобільному, side-drawer на десктопі. */
.filters-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.filters-overlay.open { opacity: 1; pointer-events: auto; }

.filters-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 100;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  max-height: 92dvh;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.12);
}
.filters-sheet.open { transform: translateY(0); }

.filters-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.filters-sheet-head h3 {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  font-weight: 400;
}
.filters-sheet-close {
  background: none;
  border: none;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
  color: var(--fg);
}
.filters-sheet-close svg { width: 20px; height: 20px; display: block; }

.filters-sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* Stagger animation на секції коли sheet відкривається */
.filters-sheet.open .filter-section {
  animation: section-in 0.42s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.filters-sheet.open .filter-section:nth-child(1) { animation-delay: 0.08s; }
.filters-sheet.open .filter-section:nth-child(2) { animation-delay: 0.14s; }
.filters-sheet.open .filter-section:nth-child(3) { animation-delay: 0.20s; }
@keyframes section-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.filter-section h4 {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--fg);
}
.filter-section h4::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--fg);
  margin-top: 8px;
}

/* Категорія — chips з 16+ варіантами; wrap природно */
.filter-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cat-chip {
  background: transparent;
  border: 1px solid var(--line);
  padding: 8px 14px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--fg);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.cat-chip:hover { border-color: var(--fg); }
.cat-chip[aria-pressed="true"] {
  background: var(--fg);
  color: #fff;
  border-color: var(--fg);
}

/* Price inputs — без spinner-ів, з prefix-міткою */
.filter-price {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.filter-price-cell {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding: 10px 4px;
  transition: border-color 0.2s ease;
}
.filter-price-cell:focus-within { border-bottom-color: var(--fg); }
.filter-price-prefix {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-style: italic;
  flex-shrink: 0;
}
.filter-price-cell input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  padding: 0;
  width: 100%;
  -moz-appearance: textfield;
}
.filter-price-cell input::-webkit-outer-spin-button,
.filter-price-cell input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.filter-price-dash {
  width: 16px;
  height: 1px;
  background: var(--line);
}

/* Dual-range price slider — два <input type="range"> накладені один на одного.
   pointer-events: none на самих input'ах, але auto на ::thumb — тож кліки
   ловлять тільки кружечки-thumb'и; між ними клік "проходить" і не ламає
   взаємодію. Заповнення (.fill) між min і max — окремий div, керується JS.
   Мітки floor/ceil — окремий sibling .price-slider-bounds НИЖЧЕ за .body,
   щоб зони thumb'ів і підписів НЕ перетинались (раніше bounds лежали in-flow
   у тому ж контейнері, що абсолютні track/inputs — і margin-top рахувався
   від верху контейнера, потрапляючи в зону thumb'ів). */
.price-slider {
  margin: 22px 4px 4px;
  user-select: none;
  -webkit-user-select: none;
}
.price-slider[hidden] { display: none; }
.price-slider-body {
  position: relative;
  height: 28px;
}
.price-slider-track,
.price-slider-fill {
  position: absolute;
  top: 13px;
  height: 2px;
  pointer-events: none;
}
.price-slider-track {
  left: 0;
  right: 0;
  background: var(--line);
}
.price-slider-fill {
  background: var(--fg);
  transition: left 0.05s linear, right 0.05s linear;
}
.price-slider-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 28px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none; /* трек неінтерактивний; інтерактивний лише ::thumb */
  margin: 0;
  padding: 0;
  outline: none;
}
/* WebKit/Chrome */
.price-slider-input::-webkit-slider-runnable-track {
  background: transparent;
  height: 2px;
  border: none;
}
.price-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fg);
  border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  cursor: grab;
  pointer-events: auto;
  margin-top: -8px;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.price-slider-input:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.price-slider-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.18);
}
/* Firefox */
.price-slider-input::-moz-range-track {
  background: transparent;
  height: 2px;
  border: none;
}
.price-slider-input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fg);
  border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  cursor: grab;
  pointer-events: auto;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.price-slider-input:active::-moz-range-thumb {
  cursor: grabbing;
  transform: scale(1.12);
}
.price-slider-bounds {
  display: flex;
  justify-content: space-between;
  margin-top: 14px; /* sibling після .price-slider-body — зона thumb'ів закінчилась, тут просто відступ */
  padding: 0 2px;
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--muted);
  font-style: italic;
}

/* Custom toggle — заміна нативного checkbox */
.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
  -webkit-user-select: none;
}
.filter-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.filter-toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}
.filter-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease;
}
.filter-toggle input:checked + .filter-toggle-track {
  background: var(--fg);
  border-color: var(--fg);
}
.filter-toggle input:checked + .filter-toggle-track .filter-toggle-thumb {
  background: #fff;
  transform: translateX(20px);
}
.filter-toggle-label {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 16px;
  letter-spacing: 0.02em;
}

.filters-sheet-foot {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  flex: 0 0 auto;
  background: var(--bg);
}
.filters-clear {
  background: transparent;
  border: 1px solid var(--line);
  padding: 13px 12px;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  cursor: pointer;
  transition: all 0.15s ease;
}
.filters-clear:hover { border-color: var(--fg); }
.filters-apply {
  background: var(--fg);
  color: #fff;
  border: 1px solid var(--fg);
  padding: 13px 12px;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s ease;
}
.filters-apply:hover { background: #2a2a2a; }
.filters-apply-count {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  font-style: italic;
  text-transform: none;
}

/* Desktop — sheet стає side-drawer справа */
@media (min-width: 1024px) {
  .filters-sheet {
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    width: 420px;
    max-height: 100vh;
    border-radius: 0;
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.08);
  }
  .filters-sheet.open { transform: translateX(0); }
  .filters-sheet-body { padding: 28px; gap: 36px; }
  .filter-section h4 { font-size: 16px; }
}

/* ---------- Product grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 4px;
  padding: 0;
}
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; } }

.product-card {
  background: #ece6d8;
  display: flex;
  flex-direction: column;
}
.product-card .pc-link { display: block; color: inherit; }
.product-card .pc-img {
  position: relative;
  aspect-ratio: 3/4;
  background: #ddd5c4;
  overflow: hidden;
}
.product-card .pc-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.product-card .pc-info {
  padding: 10px 8px 16px;
  text-align: left;
}
.product-card .pc-name {
  font-size: 12px;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  min-height: 32px;
}
.product-card .pc-price {
  font-size: 12px;
  font-weight: 500;
}
.product-card .pc-out {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.product-card .pc-quick-buy {
  margin-top: auto;
  display: block;
  width: 100%;
  padding: 12px 8px;
  background: var(--fg);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  text-align: center;
}
.product-card .pc-quick-buy:hover { background: #2a2a2a; }

/* ---------- Search modal (B4) — top-anchored sheet із полем і live-результатами.
   Зверху, бо клавіатура на мобільному не закриває поле; просто і надійно. */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.search-overlay.open { opacity: 1; pointer-events: auto; }
.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  z-index: 100;
  transform: translateY(-100%);
  transition: transform 0.25s ease;
  padding: 16px;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.search-modal.open { transform: translateY(0); }
.search-close {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 24px;
  background: none;
  border: none;
  color: var(--fg);
  padding: 4px 10px;
  line-height: 1;
}
.search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 32px 8px 0;
  border-bottom: 1px solid var(--line);
}
.search-form svg { width: 20px; height: 20px; color: var(--muted); flex: 0 0 auto; }
.search-form input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 16px;
  padding: 10px 0;
}
.search-results {
  padding: 8px 0;
}
.search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
  color: inherit;
}
.search-result:hover { background: rgba(0, 0, 0, 0.03); }
.search-result img {
  width: 56px;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: #ddd5c4;
  flex: 0 0 auto;
}
.search-result .sr-info { flex: 1; min-width: 0; }
.search-result .sr-name {
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result .sr-price { font-size: 13px; font-weight: 500; }
.search-empty { padding: 24px 8px; text-align: center; }
.search-hint {
  padding: 12px 4px;
  font-size: 12px;
  text-align: center;
}
@media (min-width: 768px) {
  .search-modal {
    max-width: 720px;
    margin: 0 auto;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
}

/* ---------- Quick Buy bottom-sheet (відкривається з .pc-quick-buy у каталозі;
   живе у chrome — синглтон, перевикористовуємо для будь-якого товару). ---------- */
.qb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.qb-overlay.open { opacity: 1; pointer-events: auto; }
.qb-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 100;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
}
.qb-sheet.open { transform: translateY(0); }
.qb-handle {
  width: 40px;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin: 0 auto 12px;
}
.qb-close {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 24px;
  background: none;
  border: none;
  color: var(--fg);
  padding: 4px 10px;
  line-height: 1;
}
.qb-product {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  padding-right: 32px;
}
.qb-product img {
  width: 64px;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: #ddd5c4;
}
.qb-info { flex: 1; min-width: 0; }
.qb-name {
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qb-price { font-size: 14px; font-weight: 500; }
.qb-meta-row {
  font-size: 12px;
  margin-bottom: 12px;
  min-height: 18px;
  color: var(--fg);
}
.qb-meta-row .muted { color: var(--muted); }
.qb-sizes-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.qb-sizes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
@media (min-width: 480px) { .qb-sizes { grid-template-columns: repeat(6, 1fr); } }
.qb-sizes button {
  border: 1px solid var(--line);
  padding: 12px 6px;
  font-size: 12px;
  background: transparent;
}
.qb-sizes button:not([disabled]):hover {
  border-color: var(--fg);
}
.qb-sizes button[disabled] {
  color: #bdbdbd;
  text-decoration: line-through;
  cursor: not-allowed;
}
@media (min-width: 768px) {
  .qb-sheet {
    max-width: 520px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(100%);
  }
  .qb-sheet.open { transform: translateX(-50%) translateY(0); }
}

/* ---------- Product page ---------- */
@keyframes productFadeIn { from { opacity: 0; } to { opacity: 1; } }
.product-layout { display: block; animation: productFadeIn 0.2s ease; }
@media (min-width: 1024px) {
  .product-layout {
    display: grid;
    grid-template-columns: 1fr 500px;
    gap: 40px;
    max-width: var(--max);
    margin: 0 auto;
    padding: 24px;
  }
}

.gallery {
  position: relative;
}
/* Мобільний swipe-трек (замінює .main-img з MVP 1.0.1) */
.gallery .mob-track {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: #d8d0bd;
}
.gallery .mob-track::-webkit-scrollbar { display: none; }
.gallery .mob-track .mob-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.gallery .mob-track .mob-slide img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.gallery .mob-track .mob-slide--video {
  display: flex; align-items: center; justify-content: center; background: #000; cursor: default; position: relative;
}

/* Lightbox для розгляду фото товару з ГОРТАННЯМ галереї (MVP 0.4.0).
   Горизонтальний scroll-snap контейнер: моб — свайп; ПК — скрол тачпадом +
   стрілки на екрані/клавіатури. OS-рівневий pinch-zoom збережено (touch-action). */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 200;
}
.lightbox[hidden] { display: none; }
.lightbox-track {
  width: 100%;
  height: 100%;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pinch-zoom;
  scrollbar-width: none;               /* Firefox */
}
.lightbox-track::-webkit-scrollbar { display: none; }  /* WebKit */
.lightbox-cell {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.lightbox-cell img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform .25s ease;
}
/* Зум по кліку (MVP 0.4.0). Масштаб у точку кліку (transform-origin ставить JS).
   touch-action:none — щоб перетяг панорамував (наш pointermove), а не гортав. */
.lightbox-cell img.zoomed {
  transform: scale(2.4);
  cursor: zoom-out;
  touch-action: none;
}
/* Поки зумнуто — трек не скролиться/не снепиться (пан не конфліктує з гортанням),
   стрілки сховані. */
.lightbox--zoomed .lightbox-track {
  overflow: hidden;
  scroll-snap-type: none;
  touch-action: none;
}
.lightbox--zoomed .lightbox-nav { display: none; }
.lightbox-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 36px;
  color: #fff;
  background: none;
  border: none;
  line-height: 1;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 2;
}
.lightbox-close:hover { color: #ddd; }
/* Стрілки навігації — з'являються на планшеті/ПК; на телефоні гортаємо свайпом.
   [hidden] (одне фото) ховає стрілку на будь-якій ширині. */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 64px;
  font-size: 40px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s, opacity .2s;
}
.lightbox-nav:hover { background: rgba(0, 0, 0, 0.5); }
.lightbox-nav[hidden] { display: none; }
.lightbox-nav:disabled { opacity: 0.3; cursor: default; }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
@media (min-width: 768px) {
  .lightbox-nav { display: flex; }
}
.gallery .thumbs {
  display: flex;
  gap: 6px;
  padding: 8px;
  overflow-x: auto;
}
.gallery .thumbs button {
  flex: 0 0 64px;
  aspect-ratio: 3/4;
  border: 1px solid transparent;
  padding: 0;
  overflow: hidden;
  background: #d8d0bd;
}
.gallery .thumbs button.active { border-color: var(--fg); }
.gallery .thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* Desktop-галерея у стилі vloria: усі фото товару сіткою у 2 колонки. Мобільний
   НЕ чіпаємо — там .gallery-grid схований, лишається головне фото + мініатюри. */
.gallery-grid { display: none; }
@media (min-width: 1024px) {
  .gallery .mob-track,
  .gallery .thumbs { display: none; }          /* desktop: ховаємо мобільну карусель */
  .gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .gallery-cell {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: #d8d0bd;
    cursor: zoom-in;
  }
  .gallery-cell:only-child { grid-column: 1 / -1; }   /* одне фото — на всю ширину */
  .gallery-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
}

.product-info { padding: 16px; }
@media (min-width: 1024px) { .product-info { padding: 0; } }
.product-info h1 {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 28px;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.product-info .subtitle {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}
.product-info .price {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 16px;
}
.product-info .label {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin: 16px 0 8px;
}
.color-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.color-swatches button {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  padding: 0;
}
.color-swatches button.active { outline: 2px solid var(--fg); outline-offset: 2px; }

.size-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
@media (min-width: 480px) { .size-grid { grid-template-columns: repeat(6, 1fr); } }
.size-grid button {
  border: 1px solid var(--line);
  padding: 12px 6px;
  font-size: 12px;
  background: transparent;
}
.size-grid button.active { border-color: var(--fg); background: var(--fg); color: #fff; }
.size-grid button[disabled] { color: #bdbdbd; text-decoration: line-through; cursor: not-allowed; }

/* Вибір зросту (short / regular / tall) */
.height-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.height-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  min-width: 96px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.height-btn.active {
  border-color: var(--fg);
  background: var(--fg);
  color: #fff;
}
.height-btn-name {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.height-btn-hint {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}
.height-btn.active .height-btn-hint { color: rgba(255,255,255,0.65); }

/* MVP 0.0.8c: на mobile кнопки "Додати в кошик" і "Купити зараз" стекуються
   вертикально — буй-нав CTA нижче основної. На desktop повертаємо side-by-side
   (рекомендація власника зберегти класичний 2-col layout). */
.cta-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 20px;
}
@media (min-width: 1024px) {
  .cta-row {
    grid-template-columns: 1fr 1fr;
  }
}
/* Коли розмір ще не обрано, показуємо ОДНУ disabled-кнопку "Оберіть розмір"
   на всю ширину — щоб не плодити браузерні alert-и при кліку (юзер просив
   повністю прибрати їх). Після вибору розміру повертаються дві кнопки. */
.cta-row--single { grid-template-columns: 1fr; }
/* Універсальний disabled-стан для .btn (cta-row, sticky-buy, qb-sheet тощо). */
.btn[disabled] {
  background: #c8c1ad;
  border-color: #c8c1ad;
  color: #fff;
  cursor: not-allowed;
}
.product-info .accordion { margin-top: 24px; }
.product-info .accordion details {
  border-top: 1px solid var(--line);
}
.product-info .accordion details:last-child { border-bottom: 1px solid var(--line); }
.product-info .accordion summary {
  padding: 14px 0;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product-info .accordion summary::-webkit-details-marker { display: none; }
.product-info .accordion summary::after { content: '+'; font-size: 18px; }
.product-info .accordion details[open] summary::after { content: '−'; }
.product-info .accordion .ac-body {
  padding: 0 0 16px;
  font-size: 13px;
  color: #2a2a2a;
}
.product-info .accordion .ac-body p { margin: 0 0 6px; }
.product-info .accordion .ac-body p:last-child { margin-bottom: 0; }
.product-info .accordion .ac-body ul { margin: 0 0 8px; padding: 0; list-style: none; }
.product-info .accordion .ac-body ul li { margin-bottom: 5px; }
.ac-facts li { display: flex; gap: 6px; align-items: baseline; font-size: 13px; }
.ac-label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #888;
  min-width: 130px;
}
.ac-note {
  font-size: 11px;
  color: #999;
  margin: 4px 0 0;
  line-height: 1.5;
}

/* ---------- Cart popup (drawer) ---------- */
.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 100%;
  max-width: 420px;
  height: 100vh;       /* fallback для старіших браузерів */
  height: 100dvh;      /* iOS Safari: реальний видимий в'юпорт */
  background: var(--bg);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }
.cart-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.cart-head .logo { font-size: 18px; }
.cart-head .close { justify-self: end; font-size: 22px; }
.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
}
.cart-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.cart-item img {
  width: 96px;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: #ddd5c4;
}
.cart-item .ci-info { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.cart-item .ci-name { font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.cart-item .ci-controls {
  margin-top: auto;
  display: flex; align-items: center; gap: 12px;
}
.qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line);
}
.qty button { width: 28px; height: 28px; }
.qty span { padding: 0 10px; min-width: 28px; text-align: center; }
.cart-empty { padding: 32px 16px; text-align: center; color: var(--muted); }
.cart-foot {
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--bg);
}
/* Дві CTA-кнопки у footer'і: Continue (outline) + Checkout (filled).
   Симетричні 1fr/1fr — однакова ширина, ієрархія через outline vs filled.
   На вузькому мобільному (<360px) стекаються вертикально. */
.cart-foot-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cart-foot-actions .btn {
  padding: 13px 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-align: center;
}
@media (max-width: 359px) {
  .cart-foot-actions { grid-template-columns: 1fr; }
}
/* Disabled state для кнопки "Оформити замовлення" коли кошик порожній. */
.btn.is-disabled,
a.btn.is-disabled {
  background: #c8c1ad;
  border-color: #c8c1ad;
  color: #fff;
  cursor: not-allowed;
  pointer-events: none;
}
.cart-foot .totals {
  display: flex; justify-content: space-between;
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 12px;
}
/* Free-shipping nudge у кошику (C2). Прогрес-бар + текст. Якщо поріг
   досягнуто — показуємо стиснуте підтвердження (.met). */
.cart-shipping-nudge {
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--fg);
}
.cart-shipping-nudge .nudge-text { margin-bottom: 6px; line-height: 1.4; }
.cart-shipping-nudge .nudge-text strong { color: var(--fg); }
.cart-shipping-nudge .nudge-bar {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.cart-shipping-nudge .nudge-bar span {
  display: block;
  height: 100%;
  background: var(--fg);
  transition: width 0.3s ease;
}
.cart-shipping-nudge.met { color: #2e7a3d; text-align: center; }
.cart-shipping-nudge.met strong { color: inherit; }
.cart-shipping-nudge.met .nudge-text { line-height: 1.4; }

/* ---------- Checkout (0.0.5 / ?v=005d — MESHKI-reference rebuild) ---------- */

/* Grid: на mobile summary йде ПЕРШИМ (sticky-top), форма знизу.
   На desktop — grid 1fr 380px з summary справа через grid-template-areas. */
.checkout-grid {
  display: block;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 16px 24px;
}
@media (min-width: 1024px) {
  .checkout-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    grid-template-areas: "form summary";
    gap: 40px;
    padding: 24px;
  }
  .checkout-form-host { grid-area: form; }
  .summary-card { grid-area: summary; align-self: start; }
}

/* Section structure (з MESHKI-референса). h2 — text-uppercase + bold,
   мінімалістичний, без uppercase letter-spacing як на page-head. Розділення
   секцій — top-padding + бордер між собою. */
.checkout-section {
  padding: 24px 0 8px;
  border-top: 1px solid var(--line);
}
.checkout-section:first-of-type {
  border-top: none;
  padding-top: 16px;
}
.checkout-section-title {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 22px;
  letter-spacing: 0.02em;
  margin: 0 0 14px;
  font-weight: 400;
}
.checkout-section-sub {
  font-size: 13px;
  margin: -6px 0 14px;
  letter-spacing: 0.02em;
}

/* Cross-sell "Доповніть образ" — горизонтальний скрол з 2-3 рекомендацій
   (top-3 by totalStock, виключаючи кошик). На mobile — snap-x для природного
   скрола; на desktop — звичайний flex з кнопкою-додати по правому краю. */
.checkout-crosssell {
  padding: 16px 0 8px;
  margin-bottom: 8px;
}
.crosssell-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.crosssell-card {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.crosssell-card:last-child { border-bottom: none; }
.crosssell-card-link {
  display: contents;
  color: inherit;
}
.crosssell-card img {
  width: 64px;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: #f5f0e6;
}
.crosssell-card-info {
  min-width: 0;
}
.crosssell-card-name {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.crosssell-card-price {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.crosssell-card-add {
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--fg);
  color: var(--bg);
  border: 1px solid var(--fg);
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.crosssell-card-add:hover {
  background: transparent;
  color: var(--fg);
}

/* Underline-style fields (з ?v=005a #5). Caplet-label 11px uppercase +
   bottom-border + transparent bg. Focus state — товстіша лінія в кольорі --fg. */
.checkout-form .field {
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 4px 0 8px;
  margin-bottom: 14px;
  background: transparent;
  position: relative;
  transition: border-bottom-color 0.18s ease;
}
.checkout-form .field:focus-within {
  border-bottom-color: var(--fg);
}
.checkout-form .field input,
.checkout-form .field select,
.checkout-form .field textarea {
  width: 100%;
  border: none;
  outline: none;
  font: inherit;
  font-size: 16px; /* iOS не зумить при фокусі від 16px */
  background: transparent;
  padding: 4px 0;
  color: var(--fg);
}
.checkout-form .field input::placeholder,
.checkout-form .field textarea::placeholder {
  color: var(--muted);
  opacity: 0.6;
}
.checkout-form .field label,
.checkout-form .field-caplet {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.checkout-form .field label .muted {
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 10px;
}

/* #8: phone-input-wrap — locked +380 prefix лежить у тому ж рядку, що input.
   Префікс некликабельний (aria-hidden), має той самий font-size, що input,
   щоб візуально читалось як одна стрічка "+380 50 123 45 67". */
.phone-input-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.phone-prefix {
  font-size: 16px;
  color: var(--fg);
  letter-spacing: 0.02em;
  user-select: none;
  flex: none;
}
.phone-input-wrap input {
  flex: 1;
  min-width: 0;
}

/* Info card (delivery banner — адаптовано з MESHKI Australia Post collection).
   Іконка + reassurance text про NP timing. Light bg відрізняє від form-fields. */
.info-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: #f5f0e6;
  border-left: 2px solid var(--fg);
  font-size: 13px;
  line-height: 1.5;
}
.info-card-icon {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--fg);
  margin-top: 1px;
}
.info-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.info-card-text strong {
  font-weight: 500;
  letter-spacing: 0.02em;
}
.info-card-text .muted {
  font-size: 12px;
}

/* Payment radio-cards (адаптовано з MESHKI). Native radio-input приховано
   через clip; візуальне коло — span.payment-card-radio. Selected card —
   border у кольорі --fg + filled radio circle. Click anywhere on card → checks.
   Label обгортає весь контент → native a11y без додаткового JS. */
.payment-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--line);
}
.payment-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease;
}
.payment-card + .payment-card {
  border-top: 1px solid var(--line);
}
.payment-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.payment-card-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  flex: none;
  margin-top: 2px;
  position: relative;
  transition: border-color 0.15s ease;
}
.payment-card input[type="radio"]:checked ~ .payment-card-radio {
  border-color: var(--fg);
  border-width: 2px;
}
.payment-card input[type="radio"]:checked ~ .payment-card-radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fg);
  transform: translate(-50%, -50%);
}
.payment-card:has(input[type="radio"]:checked) {
  background: rgba(0, 0, 0, 0.02);
}
.payment-card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.payment-card-title {
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--fg);
}
.payment-card-desc {
  font-size: 12px;
  line-height: 1.4;
}
/* Keyboard focus — рамка довкола всієї карти, не лише radio (який hidden). */
.payment-card input[type="radio"]:focus-visible ~ .payment-card-radio {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
}

/* Sticky cart-preview (mobile) / aside-summary (desktop).
   <details>-based, тож collapse-toggle працює без JS. JS лише примусово
   відкриває на desktop (matchMedia >= 1024px). */
.summary-card {
  background: #ece6d8;
}
.summary-collapsible {
  /* native details: list-style-type не потрібен, прибираємо marker. */
}
.summary-collapsible > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.summary-collapsible > summary::-webkit-details-marker { display: none; }
.summary-collapsible > summary::marker { content: ''; }
.summary-label {
  flex: 1;
  min-width: 0;
}
.summary-total {
  font-weight: 500;
  letter-spacing: 0.04em;
}
.summary-chevron {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 0.2s ease;
}
.summary-collapsible[open] > summary .summary-chevron {
  transform: rotate(180deg);
}
.summary-body {
  padding: 0 16px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 12px;
}
.summary-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  font-size: 12px;
  padding: 10px 0;
  align-items: start;
}
.summary-item + .summary-item {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.summary-item img {
  width: 56px;
  aspect-ratio: 3/4;
  object-fit: cover;
}
.summary-item-name {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
  line-height: 1.3;
}
.summary-item-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.summary-rm {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.summary-rm:hover { color: #111; }
.summary-item-price {
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding-top: 2px;
}
.summary-totalrow {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 14px;
  margin-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-weight: 500;
}

/* Mobile: summary стає sticky зверху після того, як promo+header проскролили.
   max-height на expanded body — щоб 5+ товарів не зайняли весь viewport
   (форма має лишатись частково видимою). */
@media (max-width: 1023px) {
  .summary-card {
    position: sticky;
    top: 0;
    z-index: 30;
    margin: 0 -16px 16px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }
  .summary-collapsible[open] .summary-body {
    max-height: 45vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 1024px) {
  .summary-card { padding: 0; }
  .summary-collapsible > summary {
    cursor: default;
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }
  .summary-collapsible > summary .summary-chevron { display: none; }
  .summary-body {
    padding: 14px 20px 20px;
    border-top: none;
  }
}

/* ---------- Breadcrumbs (вставляються page-script'ом у кінець <main>,
   тож візуально лежать одразу над траст-блоком). На головній не виводимо. */
.breadcrumbs {
  padding: 20px 16px 12px;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
}
.breadcrumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--muted);
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs li:last-child { color: var(--fg); }
@media (min-width: 768px) {
  .breadcrumbs {
    padding: 24px 24px 12px;
    font-size: 13px;
  }
  .breadcrumbs ol { max-width: var(--max); margin: 0 auto; }
}

/* ---------- Trust row (показується над футером на всіх сторінках,
   крім checkout — body.page-checkout приховує його). 3 пункти в ряд без
   перенесення; коли додамо 4-й пункт ('Безпечна оплата') — перейдемо на 2x2
   через зміну grid-template-columns. ---------- */
.trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.trust-item {
  padding: 18px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--fg);
}
.trust-item + .trust-item {
  border-left: 1px solid var(--line);
}
.trust-item svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}
.trust-label {
  /* Дозволяємо перенос на 2 рядки, бо "Повернення 14 днів" може не вміститися
     в одну лінію на 360px. Сам РЯД (3 пункти) не переноситься. */
}
@media (min-width: 768px) {
  .trust-item {
    font-size: 12px;
    padding: 24px 12px;
    gap: 10px;
  }
  .trust-item svg {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }
}
body.page-checkout .trust-row { display: none; }

/* ---------- Sticky buy strip (тільки мобільний, на картці товару).
   Плаває внизу в'юпорта; product.js додає body.show-sticky-buy коли низ
   .cta-row пройшов за верх в'юпорта (тобто основний buy-блок не видно). */
.sticky-buy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  transform: translateY(110%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}
body.show-sticky-buy .sticky-buy {
  transform: translateY(0);
  pointer-events: auto;
}
/* Щоб зміст не ховався під sticky — зміщуємо нижній відступ body (+ міркуємо
   запас на висоту sticky'я ~140px). 0 при прихованому стані, щоб не було
   зайвого скролу. */
body.show-sticky-buy { padding-bottom: 140px; }

.sticky-row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.sticky-name {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sticky-price {
  font-size: 14px;
  font-weight: 500;
  flex: 0 0 auto;
}
.sticky-sizes {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sticky-sizes::-webkit-scrollbar { display: none; }
.sticky-sizes button {
  flex: 0 0 auto;
  min-width: 42px;
  padding: 8px 10px;
  font-size: 12px;
  border: 1px solid var(--line);
  background: transparent;
}
.sticky-sizes button.active {
  border-color: var(--fg);
  background: var(--fg);
  color: #fff;
}
.sticky-sizes button[disabled] {
  color: #bdbdbd;
  text-decoration: line-through;
  cursor: not-allowed;
}
.sticky-buy .btn { padding: 12px 16px; }

@media (min-width: 1024px) {
  .sticky-buy { display: none !important; }
  body.show-sticky-buy { padding-bottom: 0; }
}

/* ---------- Footer ---------- */
/* #5 ?v=005e: border-top перенесено з .site-footer на .footer-contact —
   тепер phone-block рівновіддалений від двох ліній (top + bottom borders
   на самому .footer-contact, симетричні padding). Раніше була асиметрія:
   48px зверху (site-footer pt + container pt + contact pt) проти 8px знизу
   (тільки contact pb). */
.site-footer {
  background: var(--bg);
  padding: 32px 16px;
  font-size: 12px;
}
/* Блок підписки (.footer-cta + .subscribe-*) — ДОРМАНТНИЙ з ?v=090: розмітку
   прибрано з шаблону футера (header.js), тож ці правила зараз ні на що не
   лягають. Лишено навмисно — повернемо разом з блоком (CHANGELOG → ?v=090,
   BACKLOG → NEWSLETTER-PROMO). Правило нижче на checkout (.page-checkout
   .spacer-lg) від них НЕ залежить — воно про мінімальний футер. */
.footer-cta {
  text-align: center;
  padding: 32px 16px 24px;
}
.footer-cta h2 {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 22px;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.footer-cta .sub {
  font-size: 12px; color: var(--muted); margin-bottom: 16px;
  max-width: 320px; margin-left: auto; margin-right: auto;
}
.subscribe-row {
  display: flex;
  border: 1px solid var(--fg);
  max-width: 380px; margin: 0 auto;
}
.subscribe-row input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px;
  background: transparent;
  font: inherit;
}
.subscribe-row button {
  padding: 0 18px;
  background: var(--fg); color: #fff;
  font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Footer contact-блок над колонками: клікабельний номер + графік роботи.
   #5 ?v=005e: симетричний padding + border-top + border-bottom — phone-block
   тепер рівновіддалений від обох ліній. */
.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 0;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.footer-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--fg);
}
.footer-phone svg { width: 18px; height: 18px; }
.footer-hours { font-size: 12px; }
@media (min-width: 768px) {
  .footer-contact {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }
  .footer-phone { font-size: 18px; }
}

.footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
/* #1 ?v=005f: margin-top тільки на desktop. На mobile перша колонка
   (КОМПАНІЯ) використовує власний h2 padding 14px → симетрично з padding-bottom
   попередньої лінії (footer-contact border-bottom). Раніше +16px створювали
   асиметрію саме для першого item. */
@media (min-width: 768px) {
  .footer-cols { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 16px; }
}
.footer-col li a { color: inherit; }
.footer-col li a:hover { text-decoration: underline; text-underline-offset: 3px; }

.subscribe-status {
  margin: 8px 0 0;
  font-size: 12px;
  min-height: 16px;
}
.subscribe-status.success { color: #2e7a3d; }
.subscribe-status.error { color: var(--accent); }

/* Static-сторінки (about/delivery/returns/faq) — компактний article-стиль. */
.static-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 32px;
  font-size: 14px;
  line-height: 1.6;
}
.static-page h2 {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 20px;
  letter-spacing: 0.03em;
  margin: 32px 0 12px;
}
.static-page p { margin: 0 0 12px; }
.static-page ul, .static-page ol { margin: 0 0 16px; padding-left: 22px; }
.static-page ul li, .static-page ol li { margin-bottom: 6px; }
.static-page a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.static-page a:hover { color: var(--accent); }
.static-page details {
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
.static-page details:last-of-type { border-bottom: 1px solid var(--line); }
.static-page summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.static-page summary::-webkit-details-marker { display: none; }
.static-page summary::after { content: '+'; font-size: 18px; }
.static-page details[open] summary::after { content: '−'; }
.static-page details > div { padding: 12px 0 0; color: #2a2a2a; }
@media (min-width: 768px) {
  .static-page { font-size: 15px; padding: 0 24px 48px; }
  .static-page h2 { font-size: 22px; }
}
.footer-col h2 {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.footer-col ul { display: none; padding: 8px 0 16px; }
.footer-col.open ul { display: block; }
@media (min-width: 768px) {
  .footer-col h2 { border: none; padding: 0 0 12px; }
  .footer-col ul { display: block; padding: 0; }
}
.footer-col li { padding: 6px 0; }
.footer-bottom {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.05em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.footer-fop {
  font-size: 10px;
  opacity: 0.7;
}

/* ---------- Utility ---------- */
.container { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.text-center { text-align: center; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.spacer-lg { height: 32px; }

/* ---------- Loading state ---------- */
.skeleton {
  background: linear-gradient(90deg, #ddd5c4 25%, #ece6d8 50%, #ddd5c4 75%);
  background-size: 200% 100%;
  animation: skeleton 1.4s infinite;
}
@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Checkout: підказки і екрани success/error ---------- */
.field-hint { font-size: 12px; margin-bottom: 8px; }
.submit-hint { font-size: 12px; margin-top: 12px; text-align: center; }

.order-state {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 32px 20px;
  text-align: center;
}
.order-state h2 { font-size: 20px; letter-spacing: 0.05em; margin: 12px 0 8px; }
.order-state p { margin: 8px 0; color: var(--muted); font-size: 14px; }
.order-state .order-num {
  font-size: 18px;
  color: var(--fg);
  letter-spacing: 0.1em;
  margin: 8px 0 16px;
}
.order-state .btn { margin-top: 16px; }
.order-state .state-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 300;
  color: #fff;
  margin-bottom: 4px;
}
.order-success .state-icon { background: #2e7a3d; }
.order-error .state-icon { background: var(--accent); }

/* Honeypot для S2: візуально приховане поле, але не display:none — тоді
   деякі боти його ігнорують. Лишаємо у DOM, але поза екраном і недоступне
   ні для ока, ні для табів. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* ---------- Checkout 0.0.5 quick wins (F1 F2 + inline validation) ---------- */

/* F2 — inline validation. Поле з помилкою — червоний bottom-border. */
.checkout-form .field.has-error,
.checkout-form .field:has(.has-error) {
  border-bottom-color: var(--accent);
}
.checkout-form .field-error {
  font-size: 12px;
  color: var(--accent);
  margin-top: 6px;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.checkout-form .field-error:empty { display: none; }

/* Bottom CTA block (?v=005d / MESHKI-reference): total breakdown
   ("Разом · 2 товари — 3 450 ₴") + великий CTA. Sticky на mobile. */
.checkout-bottom {
  padding: 20px 0;
  border-top: 1px solid var(--line);
  margin-top: 24px;
}
.checkout-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  font-size: 16px;
  letter-spacing: 0.04em;
}
.checkout-total-label {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.checkout-total-label > span:first-child {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
}
.checkout-total-amount {
  font-size: 20px;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.btn-large {
  font-size: 14px;
  letter-spacing: 0.15em;
  padding: 16px 24px;
  text-transform: uppercase;
}
/* #6 ?v=005f: 2-line button з phone на окремому рядку, щоб номер не
   розривався на вузьких mobile-ширинах. .btn-stacked йде у source-order
   після .btn-block, тому display: flex перекриває display: block без !important. */
.btn-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.3;
  padding: 12px 16px;
}
.btn-stacked-sub {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;
}

/* F1 — sticky CTA на мобільному. Bottom-block sticky на mobile, звичайна
   позиція на desktop. Safe-area inset — для iPhone з нотчем/home-bar.
   #2 ?v=005f: прибрано box-shadow — створював перцептивний "lifted layer"
   ефект; користувач бачив фон як трохи світліший за решту сторінки. */
@media (max-width: 767px) {
  body.page-checkout .checkout-cta-sticky {
    position: sticky;
    bottom: 0;
    background: var(--bg);
    padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
    margin: 24px 0 0;
    border-top: 1px solid var(--line);
    z-index: 10;
  }
  body.page-checkout .checkout-cta-sticky .submit-hint {
    margin-top: 8px;
  }
}

/* P2 — skinny header на checkout. ?v=005a #2: логотип через absolute-position
   гарантовано лежить по центру viewport незалежно від ширини .back-to-cart.
   Раніше використовувався space-between + fixed-width spacer — асиметрія
   зміщувала логотип. */
body.page-checkout .site-header--minimal .header-inner {
  display: flex;
  align-items: center;
  padding: 0 16px;
  max-width: var(--max);
  margin: 0 auto;
  height: 100%;
  position: relative;
}
body.page-checkout .site-header--minimal .logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
body.page-checkout .site-header--minimal .back-to-cart {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--fg);
  background: none;
  padding: 8px 0;
}
@media (max-width: 480px) {
  body.page-checkout .site-header--minimal .back-to-cart { font-size: 12px; }
}

/* P2 — reduced footer на checkout. Скорочений варіант з footer-cols--minimal
   (Доставка/Повернення/FAQ як inline-row) + phone + bottom.
   #1 ?v=005e: на checkout прибрано .spacer-lg і ущільнено site-footer top
   padding — раніше між sticky-CTA і phone був void ~120px (бо trust-row +
   footer-cta приховані, але spacer + footer padding лишались). */
body.page-checkout .spacer-lg { display: none; }
body.page-checkout .site-footer--minimal {
  padding-top: 0;
}
body.page-checkout .site-footer--minimal .container {
  padding: 0 16px 16px;
  text-align: center;
}
body.page-checkout .site-footer--minimal .footer-contact {
  flex-direction: column;
  gap: 6px;
  align-items: center;
  margin-bottom: 16px;
}
body.page-checkout .footer-cols--minimal {
  display: flex;
  gap: 12px 24px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 16px;
  font-size: 13px;
}
body.page-checkout .footer-cols--minimal a {
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* P1 + P3 — success-екран додатки: email reassurance, manager-call timing,
   phone fallback. Лежать між order-num і order-summary-host. */
.success-meta {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 12px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.success-meta strong { color: var(--fg); }

/* T3: success-page upgrade — підсумок замовлення, Instagram-CTA, рекомендації. */
.success-section-title {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 18px;
  letter-spacing: 0.05em;
  margin: 24px 0 12px;
  text-align: left;
}
.success-summary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 16px;
}
.success-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  text-align: left;
}
.success-item:last-child { border-bottom: none; }
.success-item img {
  width: 56px;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: #ddd5c4;
}
.success-item-info { min-width: 0; }
.success-item-name {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.success-item-price { font-weight: 500; white-space: nowrap; }
.success-total {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.success-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.success-recs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.success-rec {
  display: block;
  text-align: left;
  color: inherit;
}
.success-rec img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: #ddd5c4;
  margin-bottom: 6px;
}
.success-rec-name {
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.success-rec-price { font-size: 12px; font-weight: 500; }
@media (min-width: 768px) {
  .success-actions { flex-direction: row; justify-content: center; }
  .success-actions .btn { max-width: 280px; }
}

.btn-call {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ---------- Skeleton loaders + image fade-in (мікрорелізи 004d → 004e) ----------
   Принципи:
   - Shimmer animation у 004d робився через background-position keyframe.
     PageSpeed на категорії показав 22 анімовані елементи зі скаргою
     "анімація без композитингу" — background-position не завжди GPU-
     композитована, особливо коли паралельно йде композитинг hero/img.
     У 004e shimmer переписано на transform: translateX псевдоелемента
     (.skeleton::before) — це гарантовано GPU-композитована анімація,
     LCP/Speed Index не страждають.
   - Skeleton-обгортки мають ТУ Ж саму геометрію (aspect-ratio +
     розміри grid-cell), що й реальні картки → коли JS замінить innerHTML
     на реальні дані, layout shift = 0.
   - Image fade-in: <img> у gridах рендеряться з opacity:0; JS-helper
     додає .loaded коли image.complete (або після onload). Кеш-завантажені
     отримують .loaded одразу — flash немає.
   - Кольори підібрані з палітри існуючих placeholder-фонів
     (#ddd5c4 / #ece6d8 — ті самі, що під .pc-img / .product-card),
     щоб не вибиватись із загального тону. */
.skeleton,
.skeleton-bar {
  position: relative;
  overflow: hidden;
  background: #ddd5c4;
}
.skeleton-bar { border-radius: 2px; }
.skeleton::before,
.skeleton-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: rosalia-shimmer 1.6s infinite linear;
  will-change: transform;
}
@keyframes rosalia-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Skeleton-картка для product-grid (catalog). Розміри pc-img/pc-info
   уже задані базовими правилами .product-card — skeleton просто
   використовує ті ж класи + skeleton фон. */
.product-card-skeleton .pc-info {
  padding: 10px 8px 16px;
}
.product-card-skeleton .skeleton-bar-name {
  height: 12px;
  width: 70%;
  margin-bottom: 8px;
}
.product-card-skeleton .skeleton-bar-price {
  height: 12px;
  width: 35%;
}

.section-block-skeleton {
  position: relative;
  overflow: hidden;
  /* На головній skeleton-висота = compact height */
  height: 110px;
}
@media (min-width: 768px) {
  .section-block-skeleton { height: 130px; }
}

/* Skeleton-каркас для product.html (галерея + інфо).
   Висоти зашиті statick'ом, відповідають реальному gallery+info layout'у. */
/* SSR-вміст (product.php): назва, ціна, наявність до завантаження JS.
   product.js замінює весь #product-host — .product-ssr зникає разом із
   skeleton. Skeleton ховається CSS-селектором коли SSR-контент присутній. */
.product-ssr {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}
.product-ssr-name {
  font-family: 'Times New Roman', Times, serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.product-ssr-price {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
}
.product-ssr-avail {
  font-size: 13px;
  color: #6b5c50;
  margin-bottom: 4px;
}
.product-ssr-cat {
  font-size: 12px;
  color: #9b8c80;
}
.product-ssr-cat a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.product-ssr-desc {
  font-size: 13px;
  color: #6b5c50;
  margin-top: 12px;
  line-height: 1.5;
}
/* SSR-контент схований візуально — скелетон завжди видимий до JS-рендеру */
.product-ssr + .product-skeleton {
  display: block;
}

.product-skeleton {
  display: block;
}
.product-skeleton .gallery {
  margin-bottom: 16px;
}
.product-skeleton .product-info {
  padding: 16px;
}
.product-skeleton .skeleton-title {
  height: 28px;
  width: 65%;
  margin-bottom: 12px;
}
.product-skeleton .skeleton-subtitle {
  height: 14px;
  width: 35%;
  margin-bottom: 18px;
}
.product-skeleton .skeleton-price {
  height: 22px;
  width: 28%;
}

/* ===== Кнопка "Підібрати розмір" і таблиця розмірів (size guide) ===== */
.size-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 8px;
}
.size-label-row .label {
  display: inline;
  margin: 0;
}
.size-guide-btn {
  background: none;
  border: none;
  border-bottom: 1px solid currentColor;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  padding: 0 0 1px;
  text-decoration: none;
  line-height: 1.2;
}
.size-guide-btn:hover { color: var(--fg); }

.sg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 150;
  display: flex;
  justify-content: flex-end;
}
.sg-overlay[hidden] { display: none; }
.sg-drawer {
  background: #fff;
  width: 100%;
  max-width: 420px;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  animation: sgSlideIn 0.25s ease;
}
@keyframes sgSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.sg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.sg-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sg-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--fg);
  padding: 4px 8px;
  line-height: 1;
}
.sg-close:hover { opacity: 0.6; }
.sg-body { padding: 24px; flex: 1; }
.sg-note {
  font-size: 11px;
  color: var(--muted);
  margin: 28px 0 0;
}
.sg-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 28px 0 12px;
  color: var(--fg);
}
/* Загальна таблиця всіх розмірів */
.sg-table-wrap { overflow-x: auto; margin-bottom: 24px; }
.sg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sg-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.06em;
  padding: 0 12px 8px 0;
  border-bottom: 1px solid var(--line);
}
.sg-table td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line);
}
.sg-table td:first-child { font-weight: 500; }
.sg-table tr:last-child td { border-bottom: none; }

/* Таби вибору розміру */
.sg-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 24px 0 16px;
}
.sg-tab {
  border: 1px solid var(--line);
  background: none;
  padding: 8px 18px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sg-tab.active {
  background: var(--fg);
  border-color: var(--fg);
  color: #fff;
}
/* Рядки параметрів */
.sg-facts {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sg-facts li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.sg-facts li:last-child { border-bottom: none; }
.sg-facts li span:first-child { color: var(--muted); }
.sg-facts li span:last-child { font-weight: 500; }

/* Image fade-in. Клас додається у JS-генерованих img (catalog/home/product
   grids); .loaded ставить opacity 1 з 0.3s transition. Якщо image вже у
   кеші — JS-helper ставить .loaded одразу і transition візуально не
   спрацьовує (тобто без flash-а). */
img.fade-img {
  opacity: 0;
  transition: opacity 0.3s ease;
}
img.fade-img.loaded {
  opacity: 1;
}

/* ---------- Лідери продаж (сторінка товару) ---------- */
.bestsellers { padding: 40px 0 32px; max-width: var(--max); margin: 0 auto; }
.bestsellers-title {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 0;
  margin: 0 16px 20px 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.bs-carousel { position: relative; }
.bs-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 16px 4px;
}
.bs-row::-webkit-scrollbar { display: none; }
.bs-card {
  flex: 0 0 calc(48vw - 12px);
  min-width: 140px;
  scroll-snap-align: start;
  background: #ece6d8;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--fg);
}
.bs-card-img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: #ddd5c4;
  display: block;
}
.bs-card-info { padding: 10px 8px 16px; }
.bs-card-name {
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  min-height: 32px;
  line-height: 1.4;
}
.bs-card-price { font-size: 12px; font-weight: 500; margin-bottom: 4px; }
.bs-card-colors { display: flex; gap: 3px; flex-wrap: wrap; }
.bs-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 1px 6px rgba(0,0,0,0.18);
  cursor: pointer;
  color: var(--fg);
}
.bs-arrow:disabled { opacity: 0.2; pointer-events: none; }
.bs-arrow--prev { left: 4px; }
.bs-arrow--next { right: 4px; }
@media (min-width: 768px) {
  .bs-card { flex: 0 0 calc(33vw - 12px); }
  .bs-row { padding: 0 24px 4px; gap: 10px; }
  .bestsellers-title { margin-left: 24px; margin-right: 24px; }
  .bs-arrow { width: 34px; height: 34px; }
  .bs-arrow--prev { left: 6px; }
  .bs-arrow--next { right: 6px; }
}
@media (min-width: 1024px) {
  .bestsellers-title { margin-left: 80px; margin-right: 80px; margin-bottom: 22px; }
  .bs-carousel { padding: 0 54px; overflow: hidden; }
  .bs-row { padding: 0 0 4px; gap: 12px; scroll-snap-type: none; }
  .bs-card { flex: 0 0 calc((100% - 3 * 12px) / 4); }
  .bs-arrow { width: 40px; height: 40px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
  .bs-arrow--prev { left: 8px; }
  .bs-arrow--next { right: 8px; }
}

/* ---------- Адмінка — Лідери продаж ---------- */
.adm-bs-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.adm-bs-label { font-size: 13px; font-weight: 500; min-width: 200px; }
.adm-bs-input { padding: 6px 10px; border: 1px solid var(--line); border-radius: 3px; font-size: 14px; background: #fff; }
.adm-radio-label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; }
.adm-bs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; max-width: 560px; }
.adm-bs-item { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 10px; background: #eee9dc; border-radius: 3px; }
.adm-bs-item--missing { color: var(--muted); }
.adm-bs-rank { font-weight: 600; min-width: 20px; flex-shrink: 0; }
.adm-bs-name { flex: 1; }
.adm-bs-rm { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 18px; line-height: 1; padding: 0 2px; flex-shrink: 0; }
.adm-bs-rm:hover { color: #c00; }
.adm-bs-search-results { border: 1px solid var(--line); border-radius: 3px; max-height: 280px; overflow-y: auto; background: #fff; max-width: 480px; }
.adm-bs-result { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.adm-bs-result:last-child { border-bottom: none; }
.adm-bs-result-name { flex: 1; font-size: 13px; }

/* ---------- Адмінка /adm/ (MVP 0.0.6) ---------- */
/* Утилітарний інтерфейс — без шапки/футера сайту, без брендових елементів.
   Захист — HTTP Basic Auth через .htaccess. */
.adm-body {
  background: #fff;
  padding-bottom: 40px;
}
.adm-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--fg);
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.adm-title {
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.adm-back {
  font-size: 12px;
  opacity: 0.8;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 2px;
}
.adm-back:hover { opacity: 1; }

.adm-toolbar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.adm-search,
.adm-category {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--fg);
  border-radius: 4px;
  font-family: inherit;
}

.adm-bulkbar {
  background: #fff8e1;
  border-bottom: 1px solid var(--line);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.adm-selcount {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.adm-selcount strong {
  color: var(--fg);
}
.adm-bulkbar-actions {
  display: flex;
  gap: 8px;
}
.adm-btn {
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--fg);
  background: var(--fg);
  color: #fff;
  border-radius: 2px;
  cursor: pointer;
}
.adm-btn:disabled { opacity: 0.5; cursor: wait; }
.adm-btn--show {
  background: #fff;
  color: var(--fg);
}

.adm-status {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--muted);
  min-height: 38px;
}
.adm-status--error {
  color: var(--accent);
}

.adm-list {
  padding: 0 0 40px;
}
.adm-loading,
.adm-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
}

.adm-row {
  display: grid;
  grid-template-columns: 24px 56px 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.adm-row--no-cb {
  grid-template-columns: 56px 1fr auto;
  cursor: default;
}
.adm-row--no-cb .adm-row-name {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}
.adm-row--no-cb .adm-row-meta span {
  white-space: normal;
}
.adm-row--new {
  background: rgba(139, 31, 31, 0.04);
}
.adm-row-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.adm-row:hover {
  background: rgba(0,0,0,0.02);
}
.adm-row--selected {
  background: rgba(139, 31, 31, 0.05);
}
.adm-row--hidden .adm-row-img,
.adm-row--hidden .adm-row-info {
  opacity: 0.45;
}

.adm-row-cb {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin: 0;
  align-self: center;
}
.adm-row-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  background: var(--bg);
  border-radius: 2px;
  align-self: center;
}
.adm-row-info {
  min-width: 120px;
  padding-top: 2px;
}
.adm-row-name {
  font-size: 14px;
  color: var(--fg);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-row-meta {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.adm-row-meta span { white-space: nowrap; }
.adm-row-sku::before { content: '#'; opacity: 0.5; }

.adm-row-badge {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: var(--accent);
  color: #fff;
  border-radius: 2px;
  white-space: nowrap;
}
.adm-row-badge--preorder {
  background: #c8940a;
}
/* Правий блок рядка адмінки: чіпи кольорів + розмірів + бейджі. */
.adm-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  max-width: min(480px, 55vw);
  padding-top: 2px;
}
.adm-btn--preorder-set   { background: #c8940a; color: #fff; border-color: #c8940a; }
.adm-btn--preorder-clear { background: transparent; color: #c8940a; border-color: #c8940a; }
.adm-row-badge--color { background: #6b3fa0; }

/* ===== Сторінка адмінки «Категорії» (MVP 0.4.0) ===== */
.cat-sec {
  max-width: 720px;
  margin: 0 auto 28px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}
.cat-sec-title { font-size: 16px; margin: 0 0 4px; }
.cat-sec-sub { font-size: 12px; margin: 0 0 14px; }
.adm-mini {
  min-width: 26px; height: 26px; padding: 0 6px;
  border: 1px solid var(--line); background: #fff; border-radius: 3px;
  cursor: pointer; font-size: 13px; line-height: 1;
}
.adm-mini:disabled { opacity: 0.35; cursor: default; }
.adm-mini--x { color: #d11; border-color: #e6b8b8; }
/* Головна: обрані + доступні */
.cat-home-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; counter-reset: h; }
.cat-home-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 3px; background: #faf9f7; }
.cat-home-lbl { font-size: 14px; }
.cat-home-lbl::before { counter-increment: h; content: counter(h) ". "; color: var(--muted); }
.cat-home-ctrls { display: flex; gap: 4px; flex: none; }
.cat-avail { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cat-avail-lbl { font-size: 12px; color: var(--muted); }
.cat-chip-add { padding: 5px 10px; border: 1px dashed var(--muted); background: #fff; border-radius: 14px; cursor: pointer; font-size: 12px; }
.cat-chip-add:hover { border-color: var(--fg); }
/* Приховування — компактний список + розкриття підкатегорій */
.cat-hide-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.cat-hide-item.is-hidden { opacity: 0.6; }
.cat-hide-main { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; min-width: 0; }
.cat-subs-toggle { flex: none; background: none; border: none; color: var(--muted); font-size: 12px; cursor: pointer; white-space: nowrap; padding: 2px 4px; }
.cat-subs-toggle:hover { color: var(--fg); }
.cat-subs { margin: 0 0 8px 26px; padding: 6px 0 2px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cat-sub-row { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
/* Нова Колекція */
.nc-newbadge { font-size: 9px; background: #1a1a1a; color: #fff; padding: 1px 5px; border-radius: 2px; letter-spacing: .05em; }
.nc-auto { font-size: 11px; white-space: nowrap; }
.cat-sub-row.is-hidden span { text-decoration: line-through; color: var(--muted); }
/* Кастомні */
.cc-create { display: flex; gap: 8px; margin-bottom: 16px; }
.cc-create input { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 3px; font-size: 14px; }
.cc-card { border: 1px solid var(--line); border-radius: 4px; padding: 12px; margin-bottom: 14px; background: #faf9f7; }
.cc-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cc-name { flex: 1; min-width: 160px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 3px; font-size: 14px; font-weight: 600; }
.cc-enabled { font-size: 12px; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.cc-del { flex: none; }
.cc-meta { font-size: 11px; margin: 6px 0 10px; }
.cc-meta code { background: #efece7; padding: 1px 4px; border-radius: 2px; }
.cc-prod-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: cp; }
.cc-prod { display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: #fff; border: 1px solid var(--line); border-radius: 3px; }
.cc-prod img { border-radius: 2px; object-fit: cover; flex: none; }
.cc-prod-name { flex: 1; font-size: 13px; }
.cc-prod-name::before { counter-increment: cp; content: counter(cp) ". "; color: var(--muted); }
.cc-prod-ctrls { display: flex; gap: 4px; flex: none; }
.cc-empty { font-size: 12px; margin: 4px 0 10px; }
.cc-add { position: relative; }
.cc-search { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 3px; font-size: 13px; box-sizing: border-box; }
.cc-results { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.cc-result { text-align: left; padding: 7px 10px; border: none; background: #fff; cursor: pointer; font-size: 13px; }
.cc-result:hover { background: #f0ece5; }

/* Чіпи кольорів у рядку товару (MVP 0.4.0): клік → сховати/показати колір. */
.adm-row-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.adm-color-chip {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: none;
  transition: transform .12s ease, border-color .12s ease;
}
.adm-color-chip:hover { transform: scale(1.12); border-color: var(--fg); }
.adm-color-chip-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--chip, #ccc);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
/* Прихований колір — приглушений + перекреслений діагоналлю. */
.adm-color-chip--hidden { opacity: 0.55; border-color: var(--muted); }
.adm-color-chip--hidden .adm-color-chip-dot { filter: grayscale(0.7); }
.adm-color-chip--hidden::after {
  content: '';
  position: absolute;
  left: 1px; right: 1px;
  top: 50%;
  height: 2px;
  background: #d11;
  transform: rotate(-45deg);
  border-radius: 2px;
}
/* Чіпи розмірів у рядку товару адмінки: per-color рядки. */
.adm-row-sizes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.adm-row-sizes-label {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  margin-right: 2px;
}
.adm-size-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border: 1px solid var(--muted);
  border-radius: 4px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: opacity .12s, border-color .12s;
}
.adm-size-chip:hover { border-color: var(--fg); }
.adm-size-chip--hidden {
  opacity: 0.45;
  text-decoration: line-through;
  border-color: transparent;
  color: var(--muted);
}
/* Кнопка розміру "під пошив": виглядає як звичайна — плашка з'явиться при виборі. */
.size-grid .size-btn--under-order { }

@media (min-width: 768px) {
  .adm-toolbar {
    grid-template-columns: 2fr 1fr;
    max-width: 960px;
    margin: 0 auto;
  }
  .adm-bulkbar,
  .adm-status,
  .adm-list {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  .adm-row {
    grid-template-columns: 28px 72px 1fr auto;
  }
  .adm-row-img {
    width: 72px;
    height: 72px;
  }
  .adm-settings {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Адмінка: Settings-блок + toggle switch (MVP 0.0.7) ---------- */
.adm-settings {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 16px;
}
/* Section-titles у адмінці — серифні, з brand-letterhead естетикою
   (матчить "ROSALIA"-логотип на сайті). Виглядає editorial, відрізняє
   адмін-секції від решти UI-шуму без зайвої важливості. */
.adm-section-title {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 14px;
  font-weight: 400;
}
.adm-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  min-height: 44px;
}
.adm-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.adm-toggle-track {
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
  background: var(--line);
  border-radius: 12px;
  position: relative;
  transition: background-color 0.2s ease;
}
.adm-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}
.adm-toggle input:checked + .adm-toggle-track {
  background: var(--fg);
}
.adm-toggle input:checked + .adm-toggle-track::after {
  transform: translateX(20px);
}
.adm-toggle input:disabled + .adm-toggle-track {
  opacity: 0.5;
  cursor: wait;
}
.adm-toggle input:focus-visible + .adm-toggle-track {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
.adm-toggle-text {
  font-size: 14px;
  color: var(--fg);
  line-height: 1.4;
}
.adm-toggle-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin: 8px 0 0;
  padding-left: 56px;
}
.adm-toggle-hint strong {
  color: var(--fg);
  font-weight: 400;
}

/* ---------- Адмінка: nav, orders, banners (MVP 0.0.7 restructure) ---------- */

.adm-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.adm-nav-link {
  flex: 0 1 auto;
  padding: 13px 12px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.adm-nav-link:hover { color: var(--fg); }
.adm-nav-link--active {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

/* ----- Orders ----- */
.adm-orders {
  padding: 0 0 40px;
}
.adm-order {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 16px;
}
.adm-order-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.adm-order-id {
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.adm-order-date {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.adm-order-customer {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.adm-order-name { color: var(--fg); }
.adm-order-phone {
  color: var(--fg);
  border-bottom: 1px dashed var(--line);
}
.adm-order-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.adm-order-ch {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 2px;
  background: var(--bg);
  color: var(--muted);
}
.adm-order-ch--ok {
  color: #2e6a3a;
  background: #e8f0e9;
}
.adm-order-ch--fail {
  color: var(--accent);
  background: #fbe8e8;
}

/* Payment-status badge (MVP 0.0.8 LiqPay). Колір сигналізує менеджеру:
   cash — нейтрально, pending — увага (жовтий), paid — зелено,
   failed — червоно. */
.adm-order-pay {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 2px;
  margin-right: 4px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.adm-order-pay--cash    { background: var(--bg); color: var(--muted); }
.adm-order-pay--pending { background: #fff4d6; color: #8a6c00; }
.adm-order-pay--paid    { background: #d6f0d8; color: #1f5a2a; }
.adm-order-pay--failed  { background: #f8d7d7; color: var(--accent); }

/* ---------- Покинуті кошики (MVP 0.2.0) ---------- */
.adm-carts-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max);
  margin: 0 auto 12px;
  padding: 0 16px;
}
.adm-carts-filters { display: flex; gap: 6px; }
.adm-chip {
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 2px;
  cursor: pointer;
  color: var(--muted);
}
.adm-chip--active { background: var(--fg); color: #fff; border-color: var(--fg); }
.adm-carts-search {
  flex: 1;
  min-width: 180px;
  max-width: 260px;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.adm-order-utm { font-size: 11px; margin-top: 6px; }

/* ---------- LiqPay preloader overlay (MVP 0.0.8a) ---------- */
/* Показується між submit'ом форми (card-flow) і моментом, коли LiqPay
   popUp стане видимим (`liqpay.ready`). Знімає враження "сайт завис". */
.lp-loading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(245, 241, 232, 0.96); /* var(--bg) з прозорістю */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lp-loading[hidden] { display: none; }
.lp-loading-content { text-align: center; }
.lp-loading-brand {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 28px;
  letter-spacing: 0.25em;
  margin-bottom: 32px;
  color: var(--fg);
}
.lp-loading-spinner {
  width: 32px;
  height: 32px;
  margin: 0 auto 20px;
  border: 2px solid var(--line);
  border-top-color: var(--fg);
  border-radius: 50%;
  animation: lp-spin 0.8s linear infinite;
}
.lp-loading-text {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
@keyframes lp-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-loading-spinner {
    animation: none;
    border-top-color: var(--line);
  }
}

/* ---------- 1-click buy: phone-sheet + success-modal (MVP 0.0.8c) ---------- */

/* Overlay і sheet за патерном `.filters-sheet`: завжди в DOM, anim'імо
   через transform + opacity при додаванні `.open` класу. */
.oc-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.oc-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.oc-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9001;
  background: var(--bg);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  max-height: 92dvh;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.12);
}
.oc-sheet.open { transform: translateY(0); }

.oc-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.oc-title {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  margin: 0;
  font-weight: 400;
  color: var(--fg);
}
.oc-close {
  background: none;
  border: none;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
  color: var(--fg);
}
.oc-close svg { width: 20px; height: 20px; display: block; }

.oc-form {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.oc-desc {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.oc-submit {
  width: 100%;
  margin-top: 4px;
}
.oc-hint {
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

/* Stagger animation на дочірні елементи коли sheet відкривається —
   той же ефект що у .filters-sheet. */
.oc-sheet.open .oc-form > * {
  animation: oc-section-in 0.42s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
.oc-sheet.open .oc-form > *:nth-child(1) { animation-delay: 0.08s; }
.oc-sheet.open .oc-form > *:nth-child(2) { animation-delay: 0.14s; }
.oc-sheet.open .oc-form > *:nth-child(3) { animation-delay: 0.20s; }
.oc-sheet.open .oc-form > *:nth-child(4) { animation-delay: 0.26s; }
@keyframes oc-section-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (min-width: 768px) {
  .oc-sheet {
    left: 50%;
    right: auto;
    max-width: 440px;
    width: 100%;
    transform: translate(-50%, 100%);
  }
  .oc-sheet.open { transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .oc-sheet,
  .oc-overlay,
  .oc-sheet.open .oc-form > * {
    transition: none;
    animation: none;
  }
}

/* Success-modal — центрований на всіх viewport'ах. Користувач лишається
   на сторінці товару, бачить це повідомлення поверх. */
.oc-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  background: rgba(245, 241, 232, 0.92);
}
.oc-success-overlay[hidden] { display: none; }
.oc-success {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9101;
  background: #fff;
  padding: 40px 28px 32px;
  width: calc(100% - 32px);
  max-width: 440px;
  text-align: center;
  border: 1px solid var(--line);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
}
.oc-success[hidden] { display: none; }
.oc-success-title {
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 24px;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  color: var(--fg);
  text-wrap: balance;
}
.oc-success-n {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 20px;
}
.oc-success-msg {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 28px;
  color: var(--fg);
}
.oc-success-close {
  width: 100%;
}
.adm-order-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.adm-order-item {
  display: grid;
  grid-template-columns: 48px 1fr auto auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.adm-order-item-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  background: var(--bg);
  border-radius: 2px;
}
.adm-order-item-info {
  min-width: 0;
  line-height: 1.3;
}
.adm-order-item-name {
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-order-item-variant {
  font-size: 11px;
  color: var(--muted);
}
.adm-order-item-qty {
  color: var(--muted);
  font-size: 12px;
}
.adm-order-item-price {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.adm-order-total {
  text-align: right;
  font-size: 13px;
  color: var(--muted);
}
.adm-order-total strong { color: var(--fg); }

/* ----- Banners ----- */
.adm-banners {
  padding: 0 0 40px;
}
.adm-banners-section {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 16px;
}
.adm-banners-section + .adm-banners-section { margin-top: 8px; }
.adm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.adm-field-label {
  font-size: 12px;
  color: var(--muted);
}
.adm-select {
  height: 44px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--fg);
  border-radius: 4px;
  font-family: inherit;
}
.adm-banner-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.adm-upload-group {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5ddd5;
}
.adm-subsection-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.adm-upload-slots {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.adm-upload-slot {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.adm-upload-slot-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.adm-upload-preview {
  width: 100%;
  max-width: 320px;
  height: 140px;
  border: 1px dashed #c8bfb4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf8f5;
  overflow: hidden;
  border-radius: 4px;
  transition: border-color 0.2s;
}
.adm-upload-preview:has(img) { border-color: #8aab7c; border-style: solid; }
.adm-upload-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.adm-upload-empty { font-size: 11px; color: var(--muted); text-align: center; padding: 8px; }
.adm-upload-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-btn--file { position: relative; cursor: pointer; }
.adm-btn--file input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.adm-upload-hint { font-size: 11px; color: var(--muted); margin: 4px 0 0; }
.adm-banner-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--bg);
  border-radius: 4px;
}
.adm-banner-row-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  background: #fff;
  border-radius: 2px;
}
.adm-banner-row-info {
  min-width: 0;
}
.adm-banner-row-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
}
.adm-banner-row-name {
  font-size: 13px;
  color: var(--fg);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-banner-source {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
}
.adm-banner-source--manual {
  background: var(--fg);
  color: #fff;
}
.adm-banner-source--auto {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}
.adm-banner-row-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ----- Picker (modal для вибору товару) ----- */
.adm-picker {
  position: fixed;
  inset: 0;
  z-index: 100;
  /* Запобігаємо scroll-chaining: коли користувач промотує всередині picker
     і доходить до краю — фон НЕ починає скролитись (a11y baseline). */
  overscroll-behavior: contain;
}
.adm-picker[hidden] { display: none; }
.adm-picker-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.adm-picker-content {
  position: absolute;
  inset: 24px 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  overscroll-behavior: contain;
}
.adm-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.adm-picker-title {
  font-size: 14px;
  font-weight: 500;
}
.adm-picker-close {
  font-size: 24px;
  width: 32px;
  height: 32px;
  line-height: 1;
  color: var(--muted);
}
.adm-picker-search {
  margin: 12px 16px;
  height: 44px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--fg);
  border-radius: 4px;
  font-family: inherit;
}
.adm-picker-results {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}
.adm-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.adm-picker-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 4px;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.adm-picker-tile:hover {
  border-color: var(--fg);
}
.adm-picker-tile:active {
  transform: scale(0.97);
}
.adm-picker-tile-img {
  display: block;
  aspect-ratio: 3/4;
  background: var(--bg);
  border-radius: 2px;
  overflow: hidden;
}
.adm-picker-tile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.adm-picker-tile-name {
  font-size: 11px;
  color: var(--fg);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0 4px 6px;
}

@media (min-width: 768px) {
  .adm-nav,
  .adm-orders,
  .adm-banners {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  .adm-picker-content {
    max-width: 600px;
    inset: 60px 0;
    margin: 0 auto;
    height: calc(100vh - 120px);
  }
  .adm-banner-row {
    grid-template-columns: 72px 1fr auto;
  }
  .adm-banner-row-img {
    width: 72px;
    height: 72px;
  }
  .adm-picker-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ===== Адмінка: Маркетинг ===== */
.adm-marketing {
  padding: 0 16px 40px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* Умови магазину (адмінка → Умови, MVP 0.6.0) */
.cond-form { max-width: 560px; }
.cond-sec { margin-bottom: 24px; }
.cond-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--fg);
}
.cond-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d8d0c4;
  border-radius: 4px;
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
  font-family: inherit;
}
.cond-input:focus { outline: none; border-color: var(--fg); }
.cond-hint {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.adm-feed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.adm-feed-url {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid #d8d0c4;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  word-break: break-all;
  color: var(--fg);
}
.adm-howto {
  border: 1px solid #e0d8d0;
  border-radius: 6px;
  margin-top: 12px;
  overflow: hidden;
}
.adm-howto-title {
  display: block;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  list-style: none;
  user-select: none;
  background: var(--bg);
}
.adm-howto-title::-webkit-details-marker { display: none; }
.adm-howto-title::before {
  content: '▸ ';
  font-size: 11px;
  color: var(--muted);
}
.adm-howto[open] > .adm-howto-title::before { content: '▾ '; }
.adm-howto-steps {
  margin: 0;
  padding: 12px 16px 14px 32px;
  font-size: 13px;
  line-height: 1.6;
  border-top: 1px solid #e0d8d0;
}
.adm-howto-steps li { margin-bottom: 6px; }
.adm-howto-steps li:last-child { margin-bottom: 0; }
.adm-howto-steps code {
  display: inline-block;
  padding: 1px 6px;
  background: var(--bg);
  border: 1px solid #d8d0c4;
  border-radius: 3px;
  font-family: monospace;
  font-size: 12px;
  word-break: break-all;
}

/* ---------- Cookie-банер ---------- */
.cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: #2a2520;
  color: #f0ebe3;
}
.cookie-bar-text {
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}
.cookie-bar-note {
  font-size: 11px;
  opacity: 0.75;
}
.cookie-bar-actions {
  display: flex;
  gap: 8px;
}
.cookie-bar-btn {
  flex: 1;
  padding: 9px 16px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.cookie-bar-btn--accept {
  background: #fff;
  color: #2a2520;
  border-color: #fff;
}
.cookie-bar-btn--accept:hover {
  background: var(--accent, #c8a882);
  border-color: var(--accent, #c8a882);
  color: #fff;
}
.cookie-bar-btn--decline {
  background: transparent;
  color: #c8bfb4;
  border-color: #5a504a;
}
.cookie-bar-btn--decline:hover {
  border-color: #c8bfb4;
  color: #f0ebe3;
}
@media (min-width: 768px) {
  .cookie-bar {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 14px 24px;
  }
  .cookie-bar-text { flex: 1; font-size: 13px; }
  .cookie-bar-actions { flex-shrink: 0; }
  .cookie-bar-btn { flex: none; padding: 8px 20px; }
}

/* =====================================================
   MVP 0.1.0a — нові компоненти
   ===================================================== */

/* --- Задача 4: Кнопки картки товару --- */
/* Другорядна CTA без фону — "Купити в 1 клік" */
.btn-ghost {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--fg);
  color: var(--fg);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  padding: 14px 32px;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}
.btn-ghost:hover { opacity: 0.55; }

/* --- Задача 6: Кольорові крапки у карточці каталогу --- */
.pc-colors {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.pc-color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.13);
  flex-shrink: 0;
}
.pc-color-dot--active {
  outline: 2px solid var(--fg);
  outline-offset: 1px;
}
.pc-color-dot--sw {
  cursor: pointer;
  transition: transform 0.15s;
}
.pc-color-dot--sw:hover { transform: scale(1.25); }
.pc-color-more {
  font-size: 10px;
  color: var(--muted);
  line-height: 1;
}

/* --- Задача 5: Dropdown категорій у шапці (desktop ≥1024px) --- */
.cat-dropdown-wrap { display: none; position: relative; }
@media (min-width: 1024px) { .cat-dropdown-wrap { display: block; } }
.cat-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  color: var(--fg);
  white-space: nowrap;
  transition: opacity 0.15s;
}
.cat-dropdown-btn:hover { opacity: 0.65; }
.cat-dropdown-btn--icon {
  padding: 6px;
  gap: 0;
}
.cat-grid-icon {
  width: 20px;
  height: 20px;
  display: block;
}
.cat-dropdown-caret {
  width: 12px;
  height: 12px;
  transition: transform 0.2s;
}
.cat-dropdown-wrap.open .cat-dropdown-caret { transform: rotate(180deg); }
.cat-dropdown-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  background: var(--bg);
  border: 1px solid rgba(0,0,0,0.09);
  box-shadow: 0 8px 24px rgba(0,0,0,0.11);
  display: none;
  z-index: 300;
}
.cat-dropdown-wrap.open .cat-dropdown-list { display: block; }
.cat-dropdown-list a {
  display: block;
  padding: 10px 18px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg);
  transition: background 0.1s;
}
.cat-dropdown-list a:hover { background: var(--surface, #f5f0ea); }
/* Білий текст кнопки на прозорому hero-хедері */
body.has-hero-overlay .cat-dropdown-btn { color: #fff; }
body.has-hero-overlay.scrolled .cat-dropdown-btn { color: var(--fg); }

/* --- Задача 2: Бейдж "Очікується на відшив" --- */
.preorder-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  margin-top: 14px;
  color: #a06820;
  background: #fdf7ec;
  border: 1px solid #f0d895;
  border-radius: 4px;
  padding: 6px 10px;
  margin-bottom: 14px;
}
.preorder-badge::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c8940a;
  flex-shrink: 0;
}

/* --- Задача 1: Компактні тайли категорій на головній --- */
.home-cats-wrap {
  padding: 0;
  overflow: hidden;
  position: relative;
}
.cat-tile-skeleton {
  aspect-ratio: 3/4;
  background: var(--skeleton, #e8e0d5);
}

/* --- Задача 3: Позначка Sale у каталозі --- */
.pc-sale-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  /* `?v=080b`: був хардкод #c0392b — інший червоний, ніж --accent (яким уже
     пофарбований SALE-лінк у бічному меню). Уніфіковано: один червоний на всю
     sale-мову + колір через :root, як вимагає CONVENTIONS.md. */
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  font-weight: 600;
}
.badge-new {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(26,26,26,0.72);
  color: #fff;
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 3px 7px;
  font-weight: 600;
  text-transform: uppercase;
}
/* --- Стара (закреслена) ціна — MVP 0.8.0, DECISIONS.md → D20 ---
   Порядок скрізь: СПОЧАТКУ ціна продажу, ПОТІМ закреслена стара (референс
   vloria.com.ua) → відступ у старої ціни ЛІВОРУЧ (`?v=080a`). */

/* Ціна товару ЗІ ЗНИЖКОЮ — фірмовий червоний (`?v=080b`, референс vloria.com.ua:
   там ціна продажу теж червона). Клас-стан вішається на КОНТЕЙНЕР ціни, а не на
   окремий span — стара ціна всередині лишається сірою, бо має власне правило
   color. Один `--accent` на всю sale-мову: бейдж + ціна + SALE-лінк у меню.
   Правило стоїть пізно у файлі свідомо — має перебивати контейнери, що самі
   задають color (напр. .crosssell-card-price {color: var(--muted)}). */
.is-sale { color: var(--accent); }

/* Картка каталогу. */
.pc-price-old {
  font-size: 12px;
  font-weight: 400; /* контейнер .pc-price має 500 — стара ціна лишається другорядною */
  color: var(--muted);
  text-decoration: line-through;
  margin-left: 6px;
}

/* Сторінка товару, кошик, чекаут. Базові властивості спільні, кегль — під
   кожен контекст окремо (проєкт не використовує em — CONVENTIONS.md). */
.price-old {
  font-weight: 400;
  color: var(--muted);
  text-decoration: line-through;
  margin-left: 8px;
}
.product-info .price .price-old { font-size: 14px; }          /* контейнер 18px */
.sticky-price .price-old        { font-size: 12px; margin-left: 6px; }   /* 14px */
.bs-card-price .price-old       { font-size: 11px; margin-left: 5px; }   /* 12px */
.product-ssr-price .price-old   { font-size: 15px; }                     /* SSR, контейнер 20px */
.qb-price .price-old            { font-size: 12px; margin-left: 6px; }   /* quick-buy */
.sr-price .price-old            { font-size: 11px; margin-left: 5px; }   /* пошук */
.cart-item .ci-info .price-old  { font-size: 11px; margin-left: 5px; }   /* drawer */
.summary-item-price .price-old  { font-size: 11px; margin-left: 5px; }   /* чекаут */
.crosssell-card-price .price-old{ font-size: 11px; margin-left: 5px; }
.success-item-price .price-old  { font-size: 11px; margin-left: 5px; }

/* --- Задача 7: Nova Poshta autocomplete --- */
.np-field { position: relative; }
.np-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg);
  border: 1px solid #d0c8bf;
  border-top: none;
  max-height: 230px;
  overflow-y: auto;
  z-index: 200;
  display: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.np-dropdown.open { display: block; }
.np-option {
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid #f0ebe4;
  line-height: 1.3;
}
.np-option:last-child { border-bottom: none; }
.np-option:hover,
.np-option.np-focused { background: var(--surface, #f5f0ea); }
.np-loading {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
.np-field input[disabled] {
  background: var(--surface, #f5f0ea);
  cursor: not-allowed;
  opacity: 0.65;
}
.np-type-toggle { margin-bottom: 4px; }
.np-type-tabs { display: flex; gap: 0; border: 1px solid #d0c8bf; border-radius: 4px; overflow: hidden; }
.np-type-tab {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--muted);
  letter-spacing: 0.02em;
  transition: background 0.15s, color 0.15s;
}
.np-type-tab + .np-type-tab { border-left: 1px solid #d0c8bf; }
.np-type-tab--active { background: var(--fg); color: var(--bg); }

/* ===== Адмінка → Ранжування (MVP 0.3.0) ===== */
.rank-master { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 14px; cursor: pointer; }
.rank-master input { width: 17px; height: 17px; }
.rank-signals { display: grid; gap: 8px; margin: 14px 0 4px; }
@media (min-width: 700px) { .rank-signals { grid-template-columns: 1fr 1fr; } }
.rank-signal {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border: 1px solid #e6ddd2; border-radius: 6px; background: #fbf8f4;
}
.rank-signal-on { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.rank-signal-on input { width: 16px; height: 16px; }
.rank-signal-w { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.rank-weight { width: 62px; }
.rank-sales { margin-top: 16px; padding-top: 14px; border-top: 1px solid #eee4d8; }
.rank-sales-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
#rkCalcInfo { font-size: 12px; }

.rank-scope-row, .rank-mode-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.rank-scope-select { min-width: 240px; max-width: 100%; }
.rank-reset { margin-left: auto; }
.rank-section-label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 6px 2px; font-weight: 600;
}
.rank-list { display: flex; flex-direction: column; gap: 6px; }
.rank-list--auto { opacity: 0.92; }
.rank-row {
  display: grid; grid-template-columns: 20px 44px 1fr auto; align-items: center; gap: 10px;
  padding: 6px 10px; border: 1px solid #e6ddd2; border-radius: 6px; background: #fff;
}
.rank-row--drag { cursor: grab; }
.rank-row--drag:active { cursor: grabbing; }
.rank-row.dragging { opacity: 0.5; border-style: dashed; }
.rank-list--auto .rank-row { background: #faf7f2; }
.rank-drag { color: #b7ab9b; font-size: 14px; line-height: 1; text-align: center; user-select: none; letter-spacing: -2px; }
.rank-drag--off { visibility: hidden; }
.rank-row-img { width: 44px; height: 58px; object-fit: cover; border-radius: 3px; background: #f0ece5; }
.rank-row-info { min-width: 0; }
.rank-row-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-row-meta { font-size: 11px; color: var(--muted); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rank-row-actions { display: flex; align-items: center; gap: 4px; }
.rank-badge { font-size: 9px; padding: 1px 5px; border-radius: 2px; letter-spacing: 0.03em; }
.rank-badge--new { background: #1a1a1a; color: #fff; }
.rank-badge--sale { background: #a32626; color: #fff; }
.rank-badge--oos { background: #e6ddd2; color: #6b5f4f; }
.rank-badge--sales { background: #eef3ea; color: #4f6b4a; }
.rank-row-score { font-size: 11px; color: #6b5f4f; margin-top: 3px; }
.rank-row-score b { color: var(--fg); }
.rank-row-score--muted { color: #b7ab9b; font-style: italic; }
.rank-oos-note { color: #a32626; }
.rank-calc-result {
  margin-top: 14px; padding: 10px 12px; border: 1px solid #d9e5d5;
  background: #f4f8f2; border-radius: 6px; font-size: 13px; color: #3f5a3a;
}
.rank-unmatched { margin-top: 8px; }
.rank-unmatched summary { cursor: pointer; color: #8a5a1a; font-size: 12px; }
.rank-unmatched ul { margin: 8px 0 0; padding-left: 18px; }
.rank-unmatched li { font-size: 12px; color: var(--fg); margin: 2px 0; }
.rank-unmatched code { background: #efe9e0; padding: 1px 4px; border-radius: 3px; font-size: 11px; }

/* ====== Відео товару (MVP 1.0.x) ====== */
/* Відео-слайд у мобільній галереї (mob-track) */
.gallery .mob-slide--video video { width: 100%; height: auto; display: block; aspect-ratio: auto 3 / 4; object-fit: cover; }
.gallery .thumbs .thumb-video-btn { display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: #111; }
.gallery .thumbs .thumb-video-btn > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.gallery .thumbs .thumb-video-btn svg { width: 24px; height: 24px; fill: rgba(255,255,255,0.95); position: relative; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7)); }
/* Акордеон «ВІДЕО» — лише на десктопі */
.ac-video-details { display: none; }
.ac-body--video { padding: 8px 0; }
.product-video { display: block; margin: 0 auto; max-height: 480px; width: auto; max-width: 100%; height: auto; aspect-ratio: auto 9 / 16; background: #000; }
/* Обгортка відео + панель контролів */
.video-wrap { position: relative; display: table; margin: 0 auto; }
.video-wrap .product-video { margin: 0; }
.video-controls {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 8px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  z-index: 3;
}
.video-ctrl-btn {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.video-ctrl-btn:hover { background: rgba(255,255,255,0.15); }
.video-ctrl-btn svg { width: 15px; height: 15px; pointer-events: none; }
.video-scrub {
  flex: 1;
  height: 3px;
  accent-color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 1024px) {
  .ac-video-details { display: block; }
}

/* ====== Адмінка — вкладка Відео (MVP 1.0.x / per-color MVP 1.0.1) ====== */
.adm-vid-product { border-bottom: 1px solid #ede7df; padding: 10px 0; }
.adm-vid-product-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.adm-vid-cover {
  width: 48px; height: 64px; object-fit: cover;
  border-radius: 4px; background: #f0ece5; flex-shrink: 0;
}
.adm-vid-info { flex: 1; min-width: 0; }
.adm-vid-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-vid-cat { font-size: 11px; margin-top: 2px; }
.adm-vid-colors { display: flex; flex-direction: column; gap: 6px; padding-left: 60px; }
.adm-vid-color-row { display: flex; align-items: center; gap: 10px; }
.adm-vid-color-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); flex-shrink: 0; }
.adm-vid-color-name { font-size: 12px; flex: 1; min-width: 60px; }
.adm-vid-color-action { display: flex; align-items: center; gap: 8px; }
.adm-vid-preview {
  width: 40px; height: 52px; object-fit: cover;
  border-radius: 3px; background: #1a1a1a; cursor: pointer; flex-shrink: 0;
}
.adm-vid-upload-label { cursor: pointer; white-space: nowrap; font-size: 12px; }