/** Shopify CDN: Minification failed

Line 6940:0 Unexpected "}"

**/
/* Зібрано з theme-sections-css/ — руками не правити.
 * Джерело кожного блока підписане нижче; правити треба там.
 * Збірка: python3 migrate/build_css.py
 */

/* ---------- 00-icons.css ---------- */
/* Інваріант іконок. ПЕРШИЙ файл у збірці (`build_css.py` сортує за іменем,
   цифри йдуть попереду літер), тому все, що нижче, його перебиває.

   ПРАВИЛО ДОНОРА, одне на весь сайт:
       .iconSvg img, .iconSvg svg { display:block; height:100%; width:100% }
   Тобто `.iconSvg` — це ОБГОРТКА, яка заповнює свого батька, а розмір задає
   бокс НАД нею: `.close`, `.listSocial .item`, `.icon`, `i` у контактах.
   Воно жило в `menu-modal.css` — глобальне правило всередині файла однієї
   секції знайти неможливо, тому переїхало сюди. Перенос нічого не зрушив:
   заміряно на стенді, вісім місць до і після — ті самі числа.

   ЧОГО ТУТ НАВМИСНО НЕМАЄ: `.iconSvg { width:20px; height:20px }`.
   Виглядає як безпечна страховка, але б'є саме в той візерунок, який має
   захищати. Там, де розмір задає батько, а `.iconSvg` його заповнює,
   дефолт на обгортці ОБРІЗАЄ іконку. Заміряно на стенді 02.09:
     соцмережа в меню-модалці   40×40 → 20×20   (бокс `.item` лишається 40)
     недавні запити на десктопі 16×16 → 20×20   (текст їде на 4 px)
   Тому дірку лікує розмір на боксі НАД іконкою — у файлі своєї секції,
   а не мовчазний дефолт тут. Механічна перевірка, щоб таку дірку не
   забути вдруге: `python3 migrate/check_icons.py`. */
.iconSvg img, .iconSvg svg { display: block; height: 100%; width: 100%; }

/* ---------- announcement.css ---------- */
/* ============================================================
   СМУГА ОГОЛОШЕНЬ НАД ШАПКОЮ — `.siteTestBanner` донора
   ------------------------------------------------------------
   Було: `.promo-bar` — один рожевий рядок із налаштувань теми, без
   перемикання. У донора це swiper на кілька різнокольорових слайдів,
   тож і розмітка, і класи, і правила тепер його.

   Правила нижче переписані з двох джерел донора БЕЗ переробки:
     • swiper-bundle.min.css — тільки ті селектори, яких торкається
       наша розмітка (весь файл тягнути нема за чим: механіку робить
       `<embla-slider>` із плагінами Fade і Autoplay — задача 475);
     • home.css — власний блок сайту про `.siteTestBanner`.

   ВИСОТА. У донора смуга 43px = 42 (swiper) + 1 (рамка). Ці 42 —
   не задане число, а наслідок: `.slideWrap` має padding 5px, а в
   одному зі слайдів лежить порожній `<p>`. Його поля 16+16 у flex
   не схлопуються, тож найвищий слайд виходить 32px, і цю висоту
   бере вся смуга. Наш текст приходить із richtext/locales і такого
   `<p>` не має, тому ті самі 32px задаємо явно через min-height —
   інакше смуга просіла б до 31px і поїхали б усі заміри нижче.

   ЗАДАЧА 533 — НОВИЙ ДИЗАЙН: смуга 44, як у макеті (60:1705 деск,
   60:1535 моб). У макеті всі 44 рядки — заливка смуги, сірої рамки
   під нею немає, шапка починається одразу нижче. Тому рамку
   прибрано, min-height слайда — 44, а `top` шапки — 44.
   ============================================================ */

/* ---------- мінімум зі swiper-bundle.min.css донора ---------- */
.siteTestBanner .swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}
.siteTestBanner .swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  box-sizing: content-box;
  transform: translate3d(0px, 0, 0);
}
.siteTestBanner .swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}
/* Перетікання (задача 475) робить плагін Fade Embla: щокроку пише слайдам
   інлайном `opacity`, `transform` (кладе всі в одну точку) і `pointer-events`
   (клікабельний лише видимий). Тому тут НЕМАЄ ні правил видимості за класами
   Swiper, ні CSS-переходу на `opacity`: `!important` донора перебив би
   інлайн плагіна, а перехід поверх покрокового запису розтягнув би кожен
   крок удруге. 300 мс донора — `duration: 15` у розмітці секції. */

/* ---------- власні правила донора (home.css) ---------- */
.siteTestBanner {
  background: #fff;
  border-bottom: 0;                  /* 533: у макеті під смугою рамки немає */
  left: 0;
  text-align: center;
  top: 0;
  width: 100%;
}
.siteTestBanner .siteHeadBanner.is-ready .swiper-slide { height: auto; }
.siteTestBanner .slideWrap {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 5px;
}
/* Доки слайдер не ініціалізувався (`is-ready` ставить `embla-slider.js`),
   смуга схована — інакше на мить видно ряд з усіх слайдів одразу. Це
   поведінка донора (у нього сигналом був клас `swiper-fade`), не наша. */
.siteTestBanner .swiper.siteHeadBanner { opacity: 0; transition: .3s; visibility: hidden; }
.siteTestBanner .swiper.siteHeadBanner.is-ready { opacity: 1; visibility: visible; }

/* ---------- звідки береться висота 42 (див. шапку файла) ---------- */
/* 42, а не 32: у темі глобальний `box-sizing:border-box`, тобто min-height
   рахує разом із padding 5+5. Донорські 32 — це саме вміст.

   На pl і uk донор дає 37, а не 43: його 42 — наслідок порожнього `<p></p>`
   наприкінці ТРЕТЬОГО англійського слайда, поля якого (16+16) у flex не
   схлопуються. В інших мовах цього `<p>` немає і смуга там 36+1. Ми лишаємо
   42 в усіх мовах свідомо: відтворювати чужу забудькуватість означало б
   різну висоту смуги в різних мовах і три пов'язані константи (min-height
   тут, `top` шапки нижче, `#MainContent{padding-top:43px}` у header.css).
   Розбіжність записана в MIGRATION-DEVIATIONS.md. */
/* Задача 533: 44 — висота смуги макета, рамки під нею вже немає. */
.siteTestBanner .slideWrap { min-height: 44px; }

/* Крок рядка — `normal`, як у донора. Тема тримає `body{line-height:1.71}`,
   тобто 27.36px, і цей успадкований крок піднімав текст на 2 px: заміряно
   на смузі з примусово однаковим слайдом — чорнило донора y 13..31, наше
   y 11..29 при однаковій ширині 342 px і однаковій кількості пікселів
   (2443 на 1440, 2476 на 415). Коштувало 2280 px на 1440 (3.68% смуги) і
   2342 px на 415 (13.12%) — на кожній із 292 сторінок. З `normal` діф
   смуги 0.000% на обох ширинах, висота лишається 43. */
.siteTestBanner .slideWrap { line-height: normal; }
/* Задача 533, текст: 14/20, як у макеті (60:1705 деск / 60:1535 моб — Bold 14, рядок 20,
   верх рядка 12 від верху смуги 44). Кегль донора 16 успадковувався від body, крок `normal` —
   з рядка вище; це правило перебиває обидва. На 390 найдовший слайд pl у 16 px ламався
   на три рядки й роздував смугу до 56 — у 14 він уміщається в один. */
.siteTestBanner .slideWrap { font-size: 14px; line-height: 20px; }
/* Кожне оголошення донора загорнуте в `<b>`; у нас текст приходить із
   locales чистим рядком (фільтр `t` розмітку екранує), тож жирність —
   правилом. Результат той самий, джерело інше. */
.siteTestBanner .slideWrap { font-weight: 700; }
/* Донор скидає поля глобальним `*{margin:0;padding:0}`; у нас такого
   скидання немає, а richtext завжди загортає текст у `<p>`. Без цього
   рядка його типові 16px зверху й знизу роздули б смугу до 75px. */
.siteTestBanner .slideWrap p { margin: 0; }
/* У донора кожне посилання в оголошенні несе інлайновий
   `text-decoration:none; color:#fff` — по суті обхід відсутнього правила.
   Робимо це правилом: колір слайда однаково приходить інлайном. */
.siteTestBanner a { color: inherit; text-decoration: none; }

/* ============================================================
   ЗАКРІПЛЕННЯ
   ------------------------------------------------------------
   Старий сайт тримає смугу й шапку прикріпленими завжди. Було зроблено
   через sticky (не fixed: fixed вийняв би смугу з потоку й підняв усе
   нижче на 44px) — це лишається, змінюється лише носій класу.

   z-index. У донора смуга має 9999999, але там інша стеля стека: у нас
   на цьому рівні живуть дравери (90), модалки (100) і банер cookie (120),
   а модалку меню окремо піднімає menu-modal.css, розраховуючи, що смуга
   стоїть на 81. Тому лишаємо 81 — донорське число тут зламало б чужі шари.
   ============================================================ */
#shopify-section-announcement-bar {
  position: sticky;
  top: 0;
  z-index: 81;
}
.shopify-section-group-header-group {
  position: sticky;
  top: 0;
  z-index: 80;
}
/* Смуга прибита до 0, тож шапка стає рівно під нею. Порожня смуга
   (жодного слайда — так у донора на ru та et) висоти не має, і тоді
   шапка лишається на 0. */
body:has(#shopify-section-announcement-bar .swiper-slide) .shopify-section-group-header-group {
  top: 44px;
}

/* ---------- binotel.css ---------- */
/* ============================================================
   КНОПКА BINOTEL — CSS ДОНОРА
   ------------------------------------------------------------
   13 правил перенесені як є: правий нижній кут (`bottom:36 / right:36`
   і `left:inherit`, бо віджет за замовчуванням чіпляється ліворуч),
   кнопка 60×60, іконка 34×42 чорна, підпис 300 10px/12px.
   ============================================================ */

#bingc-phone-button.bingc-show{bottom:36px!important;display:block;left:inherit!important;right:36px!important;z-index:1000}
@media screen and (max-width:1000px) {
#bingc-phone-button.bingc-show{bottom:3px!important;right:7px!important}
}
@media screen and (max-width:979px) {
#bingc-phone-button.bingc-show{transform:scale(.7)!important}
}
#bingc-phone-button.bingc-show svg.bingc-phone-button-icon-icon path{fill:#000}
#bingc-phone-button.bingc-show div.bingc-phone-button-icon-text span{color:#000!important}
#bingc-phone-button.bingc-show div.bingc-phone-button-tooltip{background:#fff!important;color:#000!important}
#bingc-phone-button.bingc-show div.bingc-phone-button-tooltip svg.bingc-phone-button-arrow polyline,#bingc-phone-button.bingc-show svg.bingc-phone-button-circle circle.bingc-phone-button-circle-inside,#bingc-phone-button.bingc-show:hover svg.bingc-phone-button-circle circle.bingc-phone-button-circle-inside{fill:#fff!important}
#bingc-phone-button,#bingc-phone-button svg.bingc-phone-button-circle{height:60px!important;width:60px!important}
#bingc-phone-button div.bingc-phone-button-icon-text{font:300 10px/12px Open sans,Ubuntu,Arial!important;right:12px!important;top:19px!important}
#bingc-phone-button div.bingc-phone-button-icon-text span{font:299 10px/12px Open sans,Ubuntu,Arial!important}
#bingc-phone-button svg.bingc-phone-button-icon-icon{height:42px!important;right:13px!important;top:9px!important;width:34px!important}
#bingc-phone-button div.bingc-phone-button-tooltip.bingc-phone-button-tooltip-bottom-right{bottom:68px!important;right:5px!important}
/* Задача 507: донорський підйом кнопки на 61 px над його нижньою панеллю
   (`@media ≤768 { bottom:61px }`) знято разом із самою панеллю — діє
   донорське ж правило гілки ≤1000 вище (`bottom:3px`). */
/* ВІДХИЛЕННЯ ВІД ДОНОРА — СВІДОМЕ, правила дав користувач дослівно.
   У донора підпис прибитий до правого краю кнопки (`right:12px`) і має
   власний `transform`. Користувач попросив розтягнути його на всю ширину
   й відцентрувати — нижче рівно ті чотири рядки, що він надав, без
   інтерпретації. Наступній звірці: це НЕ регрес, а замовлена зміна.

   Кегль підпису лишається донорським (300 10px/12px) — числа під
   «зменшити» користувач не називав, а вигадувати їх не можна. */
#bingc-phone-button.bingc-show div.bingc-phone-button-icon-text {
  text-align: center !important;
  width: 100% !important;
  transform: unset !important;
  right: 0 !important;
}

/* ---------- blog.css ---------- */
/* ============================================================================
   Блог: список статей (`main-blog`) і сама стаття (`main-article`).

   Перенесено з оригіналу `original/site-assets/css/{blog,article}.css`
   (селектори `.blog …` і `.article …`) один в один.

   ГОЛОВНЕ ПРО МЕЖІ. У оригіналу цього шаблону їх ЧОТИРИ:

       1536 — кегль перестає бути у vw і замерзає в px (18/24, 32/40, 14/16);
       1000 — зникає бокова колонка рубрик, з'являється селект, у статті
              зникає «Back to articles» і бокові падінги переїжджають
              з секції у самі блоки;
        768 — зникає лінія під шапкою, стрічка стає одноколонковою,
              заголовки падають до 18/24 з капсом;
        599 — тільки висота відео-плеєра в картці (у нас плеєра нема).

   У `design.css` була одна межа 1000 на все — тому 1440 і 415 звірялись
   чисто, а між ними ламалось: на 900 сторінка списку виходила 6192 px
   проти 3051 в оригіналі (одна колонка замість двох + фото на всю ширину).

   БОКОВІ ПАДІНГИ НЕ МІНЯЮТЬСЯ НІДЕ: `.blog{padding:5.0130vw 8.3333vw}`
   лишається таким і на 415 (це 20.8 / 34.6 px), а не `30px 15px`.

   КОЛЬОРИ звірені з живим оригіналом, а не вгадані: `body{color:#333}`, і
   там, де в старому CSS `color` не заданий, елемент успадковує саме #333.
   Заголовок стрічки при #111 давав масу чорнила на 16.7% більшу при
   НУЛЬОВОМУ зсуві — форма збігається, маса ні.
   ============================================================================ */

/* base.css:335 `.article, .blog { margin: 40px auto }` — в оригіналі секція
   починається одразу під шапкою (y=123 при шапці 123). */
.blog, .article { margin: 0; max-width: none; }

/* ===========================================================================
   1. СПИСОК СТАТЕЙ — `section.blog`  (оригінал: `section.blog`)
   =========================================================================== */

.blog { padding: 5.0130208333vw 8.3333333333vw; }

/* ---------- шапка стрічки (оригінал `.blog .head`) ---------- */
/* Вище 1000 це звичайний блок: селект схований, тож рядок один. */
.blog__head {
  display: block;
  border-bottom: 1px solid #dedede;
  margin-bottom: 4.1666666667vw;
  padding-bottom: 2.7994791667vw;
  /* base.css:693 додавав `flex-wrap:wrap` + `gap:16` — селект падав
     на другий рядок і шапка виходила 109.8 замість 65.3 */
  flex-wrap: nowrap;
  gap: 0;
}

.blog__title {
  width: auto;                       /* base.css:694 ставив `width:100%` */
  margin: 0;
  color: #333;                       /* успадковане `body{color:#333}` */
  font-size: 1.171875vw;
  line-height: 1.5625vw;
  font-weight: 700;
  text-transform: uppercase;
}

/* Селект рубрик (оригінал `select2.jsSelect2Link`). З'являється ТІЛЬКИ ≤1000,
   де ховається бокова колонка; вище 1000 його нема взагалі. */
/* Розібраний на частини оригінал (заміряно на 415, контейнер 150×18 на
   x=230.4):
     `.select2-selection__rendered`  14px/16, колір #333, `padding-right:8`,
                                     текст закінчується на x=355;
     `.select2-selection__arrow`     16×16 на x=363…379 — той самий
                                     `/images/SelectChevronDown.svg`.
   Було: 16px/18, #111 і БЕЗ стрілки — рядок стояв на ~20 px правіше й був
   на кегль більший. Стрілку малюємо фоном: у нативний `<select>` вкласти
   `<svg>` не можна, а контур той самий, що в `localization-form.liquid`
   (viewBox 16, вилка 4.5→11.5, stroke 1, круглий торець, #333). */
.blog__sort { display: none; margin: 0; }
.blog__sort select {
  width: 150px;
  height: 18px;
  padding: 0 25px 0 0;
  border: 0;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.5 6.5L8 10L11.5 6.5' stroke='%23333333' stroke-linecap='round'/%3E%3C/svg%3E")
              right 1px center / 16px 16px no-repeat;
  color: #333;
  font: inherit;
  font-size: 14px;
  line-height: 16px;
  text-align: right;
  text-align-last: right;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* ---------- дві колонки: рубрики + стрічка ---------- */
.blog__content {
  display: grid;
  grid-template-columns: 16.6666666667vw 66.6666666667vw;
  gap: 0;
}

/* 16 px зверху й знизу — це власний `margin` списку `<ul class="list">`
   оригіналу (UA-стиль `margin-block: 1em`, свого скидання в старому CSS
   нема). У нас колонка — це `<nav>` без внутрішнього `<ul>`, тож ті самі
   16 px беремо падінгом. Заміряно: `.sidebar .list` еталона починається на
   336.5 при `.sidebar` 320.5, а наш перший рядок стояв рівно на 320.5.
   На порожній рубриці ці 32 px ще й тримають висоту колонки (316.6). */
/* Дропдаун фільтра живе тільки на мобільному: на десктопі голова схована,
   а список — звичайний стовпчик посилань. `display:block !important` на
   вміст потрібен тому, що slide-toggle.js ховає його інлайновим стилем,
   коли панель закривали на вузькому екрані. */
.blog__filter-head { display: none; }
.blog__filter-list { display: block !important; height: auto !important; }

.blog__sidebar {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 1.953125vw;
  padding: 16px .6510416667vw 16px 0;
}
.blog__sidebar .blog__tag {
  display: block;
  padding: 0; border: 0; background: none; border-radius: 0;
  color: #999;
  font-size: 1.171875vw;
  line-height: 1.5625vw;
  text-decoration: none;
  transition: .3s;
}
.blog__sidebar .blog__tag:hover { color: #111; background: none; }
.blog__sidebar .blog__tag.is-active {
  color: #111; background: none; text-decoration: underline;
}

/* Стрічка — CSS-колонки (кладка), а не грид: картки різної висоти
   лягають без дірок, як в оригіналі (`.main{column-count:2}`). */
.blog__grid {
  display: block;
  column-count: 2;
  column-gap: 3.125vw;
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog__card {
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 4.1666666667vw;
  transform: scale(1);
  transition: .3s;
}
.blog__card:hover { transform: scale(1.01); }
.blog__card-link { display: block; width: 100%; height: 100%; text-decoration: none; }

.blog__card-media { margin-bottom: 2.0833333333vw; }
.blog__card-media img {
  display: block; width: 100%; height: auto;
  /* base.css:711 різав кожне фото під 3:2 — 305 px замість 259.2 при
     ширині 457.5. В оригіналі пропорція власна (тут 16:9). */
  aspect-ratio: auto;
  object-fit: fill;
  border-radius: 0;
}

/* Дата стоїть МІЖ фото й назвою — так у розмітці й так в оригіналі.
   `.blog__card .blog__card-meta`, а не просто `.blog__card-meta`: дата — це
   `<p>`, і правило `p:last-child{margin-bottom:0}` з base.css (вага 0,1,1)
   з'їдало б її відступ там, де вона виявиться останньою. */
.blog__card .blog__card-meta {
  margin: 0 0 1.0416666667vw;
  color: #999;
  font-size: .9114583333vw;
  line-height: 1.0416666667vw;
}

.blog__card-title {
  margin: 0;
  color: #111;
  font-size: 2.0833333333vw;
  line-height: 2.6041666667vw;
  font-weight: 700;
  text-transform: none;
}

/* ---------- пагінація (оригінал `.wrapPagination.blogPagination`) ----------
   Блок лежить ПОЗА `.blog__content` — і в оригіналі, і в нашій розмітці:
   всередині гриду авто-розкладка кидала його в колонку рубрик (240 px)
   і смуга з 24 px розпухала до 205. */
/* Пагінація стоїть ПО ЦЕНТРУ смуги. Ліве поле 16.6666vw тримало її під
   колонкою карток — на широкому екрані вона через це виглядала зсунутою
   вліво, чого користувач і не прийняв. */
.blog .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5208333333vw;
  margin: 0;
  padding: 2.6041666667vw 0 0;
}
/* `padding:0` тут обов'язковий: `<span class="page">` Shopify збігається з
   правилом `.page{padding:24px 4.1666vw 40px}` для CMS-сторінок у design.css,
   а при `box-sizing:border-box` падінг не стискається — коробка виходила
   120×64 замість 24×24. */
.blog .pagination .page,
.blog .pagination .prev,
.blog .pagination .next,
.blog .pagination .page a,
.blog .pagination .prev a,
.blog .pagination .next a {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 1.5625vw; height: 1.5625vw;
  margin: 0; padding: 0;
  font-size: .9765625vw; line-height: 1.5625vw;
  color: #111;
}
.blog .pagination .page a, .blog .pagination .prev a, .blog .pagination .next a {
  text-decoration: underline; transform: scale(1); transition: .3s;
}
.blog .pagination .page a:hover { text-decoration: none; transform: scale(1.2); }
.blog .pagination .page.current { cursor: default; }

/* Стрілки. Оригінал малює їх шевронами 24×24, у нас `default_pagination`
   віддає слово «Next »» — міняємо на той самий шеврон, а зліва домальовуємо
   неактивний «попередня», якого в розмітці Shopify на першій сторінці нема. */
.blog { --blog-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/></svg>"); }

.blog .pagination {
  --pg-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' d='M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z' clip-rule='evenodd'/></svg>");
}
.blog .pagination .prev a, .blog .pagination .next a,
.blog .pagination .prev, .blog .pagination .next { font-size: 0; }
.blog .pagination .prev a::after, .blog .pagination .next a::after,
.blog .pagination::before {
  content: "";
  flex: 0 0 auto;
  width: 1.5625vw; height: 1.5625vw;
  background: currentColor;
  -webkit-mask: var(--pg-chevron) center / contain no-repeat;
  mask: var(--pg-chevron) center / contain no-repeat;
}
.blog .pagination::before { color: #111; }
.blog .pagination .next a::after { transform: rotate(180deg); }
/* На сторінці 2+ Shopify віддає власну «попередню» — тоді свій шеврон зайвий. */
.blog .pagination:has(.prev)::before { display: none; }

.blog__empty { color: #999; font-size: .9765625vw; line-height: 1.5625vw; }

/* ---------------------------------------------------------------------------
   1.1 ≤1536 — кегль замерзає в пікселях
   --------------------------------------------------------------------------- */
@media (max-width: 1536px) {
  .blog__title { font-size: 18px; line-height: 24px; }
  .blog__sidebar .blog__tag { font-size: 18px; line-height: 24px; }
  .blog__card .blog__card-meta { font-size: 14px; line-height: 16px; }
  .blog__card-title { font-size: 32px; line-height: 40px; }
  .blog .pagination { gap: 8px; }
  .blog .pagination .page, .blog .pagination .page a {
    width: 24px; height: 24px; font-size: 15px; line-height: 24px;
  }
  /* Стрілкам кегль НЕ повертаємо: `default_pagination` кладе в них слова
     «Next »» і «« Previous», і на десктопі їх гасить `font-size: 0`. Тут
     правило раніше йшло гуртом із цифрами й підписи виринали назад — саме
     їх користувач і бачив на мобільному. */
  .blog .pagination .prev, .blog .pagination .next,
  .blog .pagination .prev a, .blog .pagination .next a {
    width: 24px; height: 24px; font-size: 0; line-height: 24px;
  }
  .blog .pagination .prev a::after, .blog .pagination .next a::after,
  .blog .pagination::before { width: 24px; height: 24px; }
  .blog__empty { font-size: 15px; line-height: 24px; }
}

/* ---------------------------------------------------------------------------
   1.2 ≤1000 — колонка рубрик зникає, з'являється селект.
   Стрічка при цьому лишається ДВОКОЛОНКОВОЮ аж до 768.
   --------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .blog__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    margin-bottom: 4.1666666667vw;
    padding-bottom: 2.7994791667vw;
  }
  /* `flex`, а не `block`: селект — інлайновий елемент і сідав на базову
     лінію рядка, тобто на 1 px вище за віджет оригіналу (120.8 проти
     121.8 на 415). Гнучкий контейнер центрує його по своїй висоті. */
  .blog__sort { display: flex; align-items: center; }
  .blog__content { grid-template-columns: 1fr; gap: 0; }
  /* Фільтр статей — дропдаун, як в оригіналі. Стрілка повертається на 180°
     при відкритті; перехід .3s, як на решті розкривачів сайту. */
  .blog__sidebar { display: block; margin: 0 0 20px; }
  .blog__filter-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; cursor: pointer; padding: 12px 0;
    border-bottom: 1px solid #dedede;
  }
  .blog__filter-current { font-size: 18px; line-height: 24px; color: #111; }
  .blog__filter-arrow {
    flex: 0 0 auto; width: 16px; height: 16px; background: currentColor;
    transform: rotate(0deg); transition: transform .3s;
    -webkit-mask: var(--blog-chevron) center / contain no-repeat;
            mask: var(--blog-chevron) center / contain no-repeat;
  }
  .blog__sidebar.active .blog__filter-arrow { transform: rotate(180deg); }
  .blog__filter-list { display: none !important; height: auto !important; overflow: hidden; padding: 8px 0 0; }
  .blog__sidebar.active .blog__filter-list { display: block !important; }
  .blog__sidebar .blog__tag { display: block; padding: 8px 0; }
  .blog .pagination { padding: 2.6041666667vw 0 0; }
}

/* ---------------------------------------------------------------------------
   1.3 ≤768 — одна колонка, лінія під шапкою зникає
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .blog__head { border-bottom: none; margin-bottom: 0; padding-bottom: 27px; }
  .blog__title { font-size: 14px; line-height: 24px; }
  .blog__grid { column-count: 1; }
  .blog__card { margin-bottom: 40px; }
  .blog__card-media { margin-bottom: 16px; }
  .blog__card .blog__card-meta { margin-bottom: 16px; }
  .blog__card-title { font-size: 18px; line-height: 24px; text-transform: uppercase; }
  .blog .pagination { padding: 20px 0 0; }
}

/* ===========================================================================
   2. СТАТТЯ — `article.article`  (оригінал: `section.article`)
   =========================================================================== */

.article { padding: 5.0130208333vw 8.3333333333vw 2.6041666667vw; }

/* ---------- рядок «Blog · Back to articles» (оригінал `.article .head`) ---------- */
.article__topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid #dedede;
  margin-bottom: 4.1666666667vw;
  padding-bottom: 2.7994791667vw;
}
.article__section {
  color: #111;
  font-size: 1.171875vw; line-height: 1.5625vw;
  font-weight: 700; text-transform: uppercase; text-decoration: none;
}
.article__back {
  display: flex; align-items: center; gap: .5208333333vw;
  color: #111; text-decoration: none;
}
.article__back svg { display: block; width: .78125vw; height: .78125vw; }
.article__back-text { font-size: .9765625vw; line-height: 1.5625vw; }
.article__back:hover { text-decoration: underline; }

/* ---------- три колонки: рейка · текст · порожньо ---------- */
.article__grid {
  display: grid;
  grid-template-columns: 16.6666666667vw 50vw 16.6666666667vw;
  /* Рядки задані ЯВНО: без них `grid-row:1/-1` на рейці посилається на єдину
     лінію неявної сітки, згортається в `1/2`, і обкладинка з'їжджає вниз
     рівно на висоту рейки (+75.9 px). */
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas: none;
  column-gap: 0; row-gap: 0;
}
/* Рейка тримає всю висоту лівої колонки (оригінал: `.leftSidebar` — перший
   елемент гриду, `.main` — другий). У розмітці вона стоїть ОСТАННЬОЮ, бо на
   ≤1000 оригінал кладе її під текст (`grid-row-start:2`). */
.article__rail { grid-area: auto; grid-column: 1; grid-row: 1 / -1; padding: 0; }
/* Текстова колонка: 50vw мінус `padding-right:8.3333vw` = 41.6666vw (600 px
   при 1440), а не 50vw і не `72ch` (635.9 px), як давав base.css:664. */
.article__head, .article__cover, .article__body {
  grid-area: auto; grid-column: 2; padding-right: 8.3333333333vw;
}
.article__head { grid-row: 1; margin: 0; }
.article__cover { grid-row: 2; }
.article__body  { grid-row: 3; }
/* Карусель і «More materials» — теж у колонці 2, але на всі 50vw (без
   `padding-right`): в оригіналі вони лежать у `.main`, а не в `.wrapper`.
   Живуть вони ВСЕРЕДИНІ гриду, бо на ≤1000 рейка має опинитись нижче за
   них — там грид стає `display:block` і порядок бере з розмітки. */
.article__products { grid-area: auto; grid-column: 2; grid-row: 4; }
.article__more     { grid-area: auto; grid-column: 2; grid-row: 5; }

/* Дата стоїть НАД заголовком — так у розмітці й так в оригіналі.
   `.article__head .article__meta` (вага 0,2,0), бо `p:last-child{margin-bottom:0}`
   з base.css має 0,1,1 і з'їдав відступ під датою (−21.4 px). */
.article__head .article__meta {
  margin: 0 0 1.3958333333vw;   /* = 0.67em від 32px: схлопнутий UA-відступ h1 */
  color: #999;
  font-size: .9114583333vw; line-height: 1.0416666667vw;
  display: block;
}
.article__title {
  margin: 0 0 2.0833333333vw;
  color: #111;
  font-size: 2.0833333333vw; line-height: 2.6041666667vw; font-weight: 700;
}

.article__cover { margin-bottom: 1.8880208333vw; }
.article__cover img {
  display: block; width: 100%; height: auto;
  margin: 0; border-radius: 0;
}

/* ---------- блок «Navigation» (оригінал `.navigationWrap`) ----------
   Список наповнює скрипт із якорів `id^="jsAnchor_"`; у жодній із 12 статей
   їх нема, тож він порожній назавжди. Заміряно на живому донорі: рейкова
   копія `display:none` на 1440, 900, 800, 767 і 415 — клас `.active`, який
   її показує, додає той самий скрипт, що знайшов би якорі. Мобільна копія
   показана тільки до 767 px.

   Підпис «Navigation» знято на вимогу користувача (правка 45) — він
   підписував порожній список.

   Через це 30 px відступу переїхали з обгортки на САМ СПИСОК: поки список
   порожній, блок має нульову висоту й нічого не зсуває, а щойно в ньому
   зʼявляться пункти — відступ повернеться сам. */
.article__nav { margin-bottom: 0; }
.article__nav-list { display: flex; flex-direction: column; gap: .9765625vw; }
.article__nav-list:not(:empty) { margin-bottom: 30px; }
.article__nav-list a { color: #999; font-size: .9765625vw; line-height: 1.5625vw; text-decoration: none; }
.article__nav-list a:hover { text-decoration: underline; }
.article__nav-list a.is-active { color: #333; text-decoration: underline; }

/* Мобільна копія — між фото й текстом. Поріг рівно донорський:
   `@media (max-width:767px){.article .navigationWrap.mobile-only{display:block!important}}`.
   Раніше вона вмикалась на ≤1000 і тому вилазила на планшетах. */
.article__nav--mobile { display: none; }
@media (max-width: 767px) {
  .article__nav--mobile { display: block; padding: 0 8.3333333333vw; }
}

/* ---------- тіло статті (оригінал `.description.descriptionMod`) ---------- */
.article__body {
  max-width: none;                    /* base.css:664 давав `72ch` */
  color: #333;
  font-size: .9765625vw; line-height: 1.5625vw;
}
.article__body p, .article__body div {
  margin: 0 0 .9765625vw;
  font-size: .9765625vw; line-height: 1.5625vw;
}
.article__body p:last-child { margin-bottom: .9765625vw; }
/* Імпортований текст загорнутий у зайвий `<div>` — це обгортка, а не абзац. */
.article__body > div { margin-bottom: 0; }
.article__body span { font-size: inherit !important; }
.article__body a {
  color: #111; text-decoration: underline;
  font-size: .9765625vw; line-height: 1.5625vw;
}
.article__body a:hover { text-decoration: none; color: #111; }
/* `.description b{font-size:18px}` до статті НЕ доходить: тіло статті — це
   `.description.descriptionMod`, а нижче в тому ж файлі стоїть
   `.descriptionMod b{font-size:inherit!important}` — жирний лишається кеглем
   абзацу. 18px давали ширший лід-ін, зайвий рядок у абзаці й −24 px зсуву
   всьому, що нижче (найпомітніше на мобілці). */
.article__body b, .article__body strong {
  font-size: inherit; line-height: 1.5625vw;
}
/* Заголовки в тілі: капс. Висота рядка 1.25, бо 260% розводив перенесені рядки;
   padding .675em повертає однорядковому заголовку ту саму висоту 46.8 при 18px. */
.article__body h1, .article__body h2, .article__body h3,
.article__body h4, .article__body h5, .article__body h6 {
  margin-top: 0; text-transform: uppercase; line-height: 1.25;
  padding-block: .675em; font-weight: 700;
  color: #333;
}
.article__body h1 { font-size: 2.0833333333vw; margin-bottom: .67em; }
.article__body h2 { font-size: 1.171875vw;     margin-bottom: .83em; }
.article__body h3 { font-size: .9114583333vw;  margin-bottom: 1em; }
.article__body h4 { font-size: .9114583333vw;  margin-bottom: 1.33em; }
.article__body h5 { font-size: .9114583333vw;  margin-bottom: 1.67em; }
.article__body h6 { font-size: .9114583333vw;  margin-bottom: 2.33em; }
.article__body ul { margin: 1em 0; padding-left: 40px; }
/* Власного правила для `ul` в оригіналі нема взагалі — працює UA-таблиця,
   а вона ВКЛАДЕНОМУ списку блокові маржі обнуляє
   (`:is(ul,ol) :is(ul,ol){margin-block:0}`). Наше `margin:1em 0` цю
   UA-поведінку перебивало й додавало по 15 px згори й знизу кожного
   вкладеного списку (`syivorotka-dlya-litsa`, `chto-vybrat…`). */
.article__body :is(ul, ol) :is(ul, ol) { margin-block: 0; }
/* `<ol>` в оригіналі не звичайний список, а власні лічильники: `padding:0`,
   `li{display:block}` і номер у `::before` через `counters()`. */
.article__body ol { counter-reset: item; margin: 0 0 1.6276041667vw; padding: 0; list-style: none; }
.article__body ol li { display: block; }
.article__body ol li::before {
  content: counters(item, ".") " "; counter-increment: item;
  font-size: .9765625vw; line-height: 1.5625vw;
}
.article__body ol li ol { padding: 1.6276041667vw 0; margin: 0; }
.article__body li { font-size: .9765625vw; line-height: 1.5625vw; }
/* Інлайнові `line-height`/`margin` НЕ перебиваємо: у оригіналі
   `.description p{line-height:24px;margin-bottom:.9765625vw}` йде без
   `!important`, тож стиль із редактора виграє. `piramida-aromata-eu`
   приїхала з Google Docs і на 32 абзацах несе
   `line-height:1.38;margin-top:0pt;margin-bottom:0pt` — саме так її й
   малює еталон (крок 20.7 px, між абзацами лише порожній `<p>`).
   Відповідне правило з `!important` знято і в base.css §25. */
/* Порожні абзаци оригінал НЕ ховає, а base.css гасив. */
.article__body p:empty { display: block; }
.article__body p > br:only-child { display: inline; }
/* Провідна закладка Google Docs (`<p><span id="docs-internal-guid-…"></span></p>`)
   малюється нульовою висотою, і в оригіналі її нижня маржа ВИХОДИТЬ за
   `.description` — той звичайний блок у потоці — та схлопується з більшою
   нижньою маржею фото, тобто на екрані не коштує нічого. У нас
   `.article__body` — елемент гриду, тобто окремий контекст форматування:
   маржа лишається всередині й опускає весь текст на 14 px
   (`piramida-aromata-eu`). Абзаци-закладки в СЕРЕДИНІ тіла лишаємо: там
   ці 14 px є і в еталоні. */
.article__body > p:first-child:has(> span[id^="docs-internal-guid"]:only-child),
.article__body > div > p:first-child:has(> span[id^="docs-internal-guid"]:only-child) {
  margin-bottom: 0;
}
/* `.descriptionMod img{margin:1.5625vw auto}` перебиває загальніше
   `.description img{margin-bottom:4.4921875vw}` — фото в тілі ЦЕНТРОВАНЕ
   і має по 22.5 px згори й знизу, а не 64.7 знизу. */
/* `max-width` тут НЕМА навмисно: в оригіналі він з'являється лише в гілці
   ≤768 (`.descriptionMod img{max-width:100%;width:100%}`). Кадри в тілі
   приїхали з редактора з інлайновим `style="width:891px"` (syivorotka 2,
   muskusnye 2, drevesnye 1, chto-vybrat 1) і на деску реально ВИЛАЗЯТЬ за
   колонку 600 px — саме так їх малює еталон. Обрізання до 100% робило їх
   на 48% нижчими й з'їдало 227…882 px висоти сторінки. */
.article__body img {
  display: block; margin: 1.5625vw auto; border-radius: 0; max-width: none;
}
/* Обтікання. Summernote ставить парою інлайновий `float` і клас
   `note-float-right/left`, а оригінал під цей клас дає бічний відступ
   (`.descriptionMod img.note-float-right{margin-left:1.5625vw}`, ≤768 — 14px).
   Класи імпорт зрізав, інлайновий стиль лишився — чіпляємось за нього.
   Без цього відступу рядок біля кадру довший на 22.5 px, абзац
   `syivorotka-dlya-litsa` втрачає рядок, а з ним 24 px висоти. */
.article__body img[style*="float:right"],
.article__body img[style*="float: right"] { margin-left: 1.5625vw; }
.article__body img[style*="float:left"],
.article__body img[style*="float: left"] { margin-right: 1.5625vw; }
.article__body iframe { width: 100% !important; height: 23.4375vw; }
.article__body table { width: 100%; border-collapse: collapse; border: 1px solid #999; }
.article__body td, .article__body th {
  border: 1px solid #999; padding: .3255208333vw .5208333333vw;
}
/* Хвостовий блок «More materials» приїхав УСЕРЕДИНІ імпортованого контенту
   (усі 12 статей) і веде на старий домен. Свій блок ми малюємо самі, під
   каруселлю, тож імпортований ховаємо. `:not(:first-child)` обов'язковий:
   без нього, коли контент почистять, селектор упіймає саму обгортку тексту. */
.article__body > div:last-child:not(:first-child):has(> div > a[href*="/blog"]) { display: none; }

/* ---------- рейка «поділитись» (оригінал `.leftSidebar`) ---------- */
.article__rail .share { display: block; margin: 0; }
.article__rail .share__label {
  display: block;
  color: #333;
  font-size: .9114583333vw; line-height: 1.0416666667vw;
  margin-bottom: 1.8229166667vw;
}
/* 16px тут не випадкові: висота пункту в оригіналі 41.5 px — це іконка 37.5
   плюс нижній просвіт рядка від струта 16px. При успадкованих 14px крок
   стрічки іконок вийшов би інший. */
.article__rail .share__list {
  display: flex; flex-direction: column;
  gap: 1.0416666667vw;
  list-style: none; margin: 0; padding: 0;
  font-size: 16px; line-height: normal;
}
.article__rail .share__link {
  display: inline-block;
  padding: 0; border: 0; background: none; border-radius: 0;
  color: #dedede; cursor: pointer;
  transform: scale(1); transition: .3s;
}
.article__rail .share__link:hover { transform: scale(1.2); color: #dedede; }
.article__rail .share__link svg {
  display: block; width: 2.6041666667vw; height: 2.6041666667vw;
}

/* ---------- товари зі статті (оригінал `.articleProductCarouse`) ----------
   Блок живе в колонці тексту, а не на всю ширину сторінки: x=360, w=720. */
/* `margin-bottom:3.125vw` оригіналу тут НЕ ставимо: у нього карусель і
   «More materials» — сусідні блоки, і 45 схлопується з `margin-top:65.63`
   у ті самі 65.63. Ми ж кладемо їх у різні рядки гриду, а між рядками
   маржі не схлопуються — вийшло б 110.6 і сторінка на 45 px вища. */
.article__products { margin: 0; }
.article__products > h2 {
  color: #333;
  margin: 0 0 1.7578125vw;
  font-size: 1.171875vw; line-height: 1.5625vw; font-weight: 700;
  text-transform: none;
}
/* Це не сітка 4×N, а стрічка swiper-а:
       `slidesPerView:1.7, breakpoints:{800:2.2, 1600:2.7, 1900:3.3}`
   Пороги ЧИСЛОВІ — по ширині вікна (на відміну від стрічки статей на
   головній, де `@0.75/@1.00/@1.50` — множники висоти). Слот = 1/N від
   внутрішньої ширини, `spaceBetween` не заданий. Рамка — на контейнері
   зліва+зверху, на картці справа+знизу (`.cardItem__product`). */
.article__products-grid {
  display: flex; overflow: hidden;
  list-style: none; margin: 0; padding: 0;
  border-left: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8;
}
.article__products-grid > li {
  display: flex; min-width: 0;
  flex: 0 0 58.8235%;                                    /* 1.7 */
  border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
  border-top: 0; border-left: 0;
}
@media (min-width: 800px)  { .article__products-grid > li { flex-basis: 45.4545%; } }  /* 2.2 */
@media (min-width: 1600px) { .article__products-grid > li { flex-basis: 37.037%; } }   /* 2.7 */
@media (min-width: 1900px) { .article__products-grid > li { flex-basis: 30.303%; } }   /* 3.3 */
.article__products-grid .product-card { width: 100%; }
/* Клас `photo` в оригіналі носить і обкладинка статті, і кадр у картці
   товару, а картки лежать усередині `.article .content .main`. Тому
   правило обкладинки `.article .content .main .photo{margin-bottom:1.88802vw}`
   (вага 0,4,0) перебиває карткове `.cardItem__product .photo{…:1.5625vw}`
   (0,2,0), і в каруселі під статтею кадр має відступ ОБКЛАДИНКИ: 27.19 px
   на 1440 і 29 px на ≤1000 замість 22.5/16. Колізія селекторів оригіналу,
   але еталон малює саме її: без цього ВЕСЬ низ картки (зірки, назва, ціна,
   кнопка) стояв на 5 px вище на деску й на 13 px на мобілці, і цей зсув
   ішов до кінця сторінки на ВСІХ 12 статтях. Правило тримаємо тут, у
   контексті статті: у каталозі й на головній відступ картки інший. */
.article__products .product-card__media-wrap { margin-bottom: 1.8880208333vw; }

/* ---------- «More materials» (оригінал `.moreLinkWrap`) ----------
   `margin-top` схлопується з `margin-bottom:3.125vw` каруселі — виходять
   ті самі 65.63 px від її низу, що й в оригіналі. */
.article__more { margin-top: 4.5572916667vw; }
/* Підкреслення постійне, а не лише на ховері. */
.article__more-link {
  color: #111; font-size: .9765625vw; line-height: 1.5625vw; text-decoration: underline;
}
.article__more-link:hover { color: #111; text-decoration: none; }

/* ---------------------------------------------------------------------------
   2.1 ≤1536
   --------------------------------------------------------------------------- */
@media (max-width: 1536px) {
  .article__section { font-size: 18px; line-height: 24px; }
  .article__back-text { font-size: 15px; line-height: 24px; }
  .article__head .article__meta { font-size: 14px; line-height: 16px; margin-bottom: 21.44px; }
  .article__title { font-size: 32px; line-height: 40px; }
  .article__nav-list a { font-size: 15px; line-height: 24px; }
  .article__body { font-size: 15px; line-height: 24px; }
  .article__body p, .article__body div, .article__body li,
  .article__body a, .article__body ol li::before { font-size: 15px; line-height: 24px; }
  .article__body b, .article__body strong { font-size: inherit; line-height: 24px; }
  .article__body h1 { font-size: 32px; }
  .article__body h2 { font-size: 18px; }
  .article__body h3, .article__body h4, .article__body h5, .article__body h6 { font-size: 14px; }
  .article__rail .share__label { font-size: 14px; line-height: 16px; }
  .article__products > h2 { font-size: 18px; line-height: 24px; }
  .article__more-link { font-size: 15px; line-height: 24px; }
}

/* ---------------------------------------------------------------------------
   2.2 ≤1000 — одна колонка; бокові поля переїжджають у самі блоки,
   фото стає на всю ширину екрана, «Back to articles» і «More materials»
   зникають, рейка йде під текст.
   --------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .article { padding: 5.0130208333vw 0 2.6041666667vw; }
  .article__topbar { padding: 0 8.3333333333vw 2.7994791667vw; }
  .article__back { display: none; }

  .article__grid { display: block; }
  .article__head, .article__body { padding: 0 8.3333333333vw; }
  .article__cover { padding: 0; }
  .article__rail { padding: 20px 8.3333333333vw 28px; }

  .article__title { margin-bottom: 32px; }
  .article__cover { margin-bottom: 29px; }

  /* Блок «Navigation» переїжджає з рейки в текст — але тільки на телефоні:
     вмикання мобільної копії стоїть вище, у гілці ≤767, як у донора. */
  .article__rail .article__nav { display: none; }
  .article__nav-list { gap: 15px; }

  .article__rail .share__label { margin-bottom: 28px; }
  .article__rail .share__list { flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .article__rail .share__link svg { width: 40px; height: 40px; }

  /* нижче 1000 грид стає блоком — маржі знову схлопуються, і 30 px під
     каруселлю це відстань до рейки, як в оригіналі */
  .article__products { margin: 0 0 30px; width: auto; padding: 0 0 0 8.3333333333vw; }
  /* та сама колізія `.article .content .main .photo` — гілка ≤1000: 29, не 16 */
  .article__products .product-card__media-wrap { margin-bottom: 29px; }
  .article__products > h2 { margin-bottom: 20px; }
  .article__more { display: none; }
}

/* ---------------------------------------------------------------------------
   2.3 ≤768
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .article__topbar { border-bottom: none; margin-bottom: 0; padding-bottom: 27px; }
  .article__section { font-size: 14px; line-height: 24px; }
  .article__title { font-size: 18px; line-height: 24px; text-transform: uppercase; }
  /* нижче 768 заголовок 18px, його UA-відступ 0.67em = 12.06 — тепер
     виграє власний `margin-bottom` дати */
  .article__head .article__meta { margin-bottom: 16px; }
  .article__body p, .article__body div { margin-bottom: 15px; }
  .article__body p:last-child { margin-bottom: 15px; }
  .article__body h1 { font-size: 18px; }
  .article__body h2 { font-size: 14px; }
  .article__body img { margin: 14px auto; width: 100%; height: auto; max-width: 100%; }
  .article__body img[style*="float:right"],
  .article__body img[style*="float: right"] { margin-left: 14px; }
  .article__body img[style*="float:left"],
  .article__body img[style*="float: left"] { margin-right: 14px; }
  .article__body iframe { height: 55vw !important; }
  /* `≤768: margin-bottom:20px` в оригіналі стоїть тільки на `ol`; `ul`
     лишається на UA-відступі 1em — інакше після кожного списку накопичується
     зайвих 5 px. */
  .article__body ol { margin-bottom: 20px; }
  .article__body ol li ol { padding: 25px 0; }
}

/* ---------- card-tile.css ---------- */
/* ══════════════ КАРТКА ТОВАРУ — ОДНА НА ВЕСЬ САЙТ (.pcard) ══════════════
 *
 * Редизайн, фаза 2, задача 407. Пряме рішення власника: картка товару на
 * ВСЬОМУ сайті міняється на таку, як у блоці «Купують разом з цим товаром».
 *
 * Джерело — Figma `Sisters aroma`, набір компонента **Product Card**:
 *     componentId 60:811  Device=Desktop   (деск, 328×598)
 *     componentId 60:784  Device=Mobile    (моб,  234×472)
 * Інстанси деска: 60:1762…1767 («купують разом») і I60:4208;994:17112…17241
 * (сітка результатів пошуку). Інстанси мобілки: 60:1591…1593 і 60:5231…5234.
 * Тобто «картка купують-разом» і «картка пошуку» — ОДИН компонент, доведено
 * збігом componentId, а не на око. Тому й сніпет один, і цей файл один.
 *
 * ЩО ЗАМІНИЛА. До неї в темі жили ТРИ різні картки з трьох різних донорських
 * блоків: `.product-card` (каталог/головна/каруселі), `.searchProductCard`
 * (пошук) і `.cardProductsAttentionItem` (крос-сел). Тепер `product-card.liquid`
 * малює `.pcard`, а `search-product-card.liquid` і `cross-sell-card.liquid` —
 * тонкі перехідники на нього. Старі класи лишились у `search.css` і
 * `cart-attention.css` — вони більше нікому не належать; прибирати їх має
 * власник тих файлів, а не ця картка.
 *
 * ЧОМУ НОВИЙ КОРІНЬ КЛАСУ, а не той самий `.product-card`. Стару плитку
 * підпирали правила з `base.css`, `design.css`, `blog.css` і `cart-drawer.css`
 * (min-height фото, vw-падінги, `margin-bottom` під фото). Лишити ім'я
 * означало тягнути стару геометрію під новий лейаут і потім гасити її
 * перебиваннями. Ті чужі правила тепер просто не мають адресата; їхні
 * еквіваленти для `.pcard` — у кінці цього файла, одним блоком.
 *
 * МАСШТАБ — та сама домовленість, що в `redesign.css`: `--u` = один піксель
 * макета. Деск-база 1440, моб-база 390, МЕЖА ОДНА — 768 (figma-html-guide §1).
 * Вище 1920 масштаб заморожується (html-shopify §1), інакше на моніторі 2560
 * картка роздувається.
 *
 * ── ПРОПОРЦІЯ ФОТО: 1/1, І ЦЕ РІШЕННЯ, А НЕ КОПІЯ МАКЕТА (задача 439) ──
 * У макеті фото-бокс намальований 327×346 на деску (h/w = 1.058) і 233×228 на
 * мобілці (h/w = 0.978) — тобто дві РІЗНІ пропорції, обидві в межах 6 % від
 * квадрата. Питання постало на мобілці, де картку розтягнули 234 → 358, а
 * висоту фото лишили 228: бокс став 357×228, тобто **1.566:1 альбомний**.
 * Числа, на яких стоїть вибір:
 *
 *   джерело кадру в темі — ЗАВЖДИ квадрат: `image_url: width:800,height:800,
 *   crop:'center'` (див. product-card.liquid), і всі 803 картки збереженого
 *   HTML старого сайту квадратні. При `object-fit: cover`
 *      бокс 357×228 з квадрата  → видно 63.9 % висоти кадру (втрата 36.1 %)
 *      бокс 357×228 з 900×1200  → видно 47.9 % (втрата 52.1 %)
 *      бокс 1/1     з квадрата  → видно 100 %, обрізання РІВНО НУЛЬ
 *
 *   ціна квадрата на мобільній сітці: картка 472 → 601, сітка з 4 карток
 *   1885 → 2404 (+519 px, +27.5 %). Це +130 px на товар — і це менше за
 *   один екран телефону на ЧОТИРИ товари.
 *   альтернатива «пропорція мобільного макета» (357×349) дає картку 593 і
 *   сітку 2372 — на 32 px менше, тобто 1.3 %, але лишає 26.7 % обрізання.
 *
 * Отже: 1.3 % висоти проти 27…52 % кожного фото. Квадрат.
 * У піксельній звірці з Figma це НЕ бере участі: там картка стоїть у
 * намальованій ширині (234 / 328) і намальованій висоті — верстка рівняння
 * лишається як є, змінюється тільки поведінка картки в темі, де її ширину
 * задає сітка, а не макет.
 * ═══════════════════════════════════════════════════════════════════════ */

.pcard {
  --u: calc(100vw / 1440);

  --pc-bg: #ffffff;
  --pc-line: #dadada;       /* обводка картки */
  --pc-ink: #1e1e1e;        /* назва */
  --pc-mute: #9c9c9c;       /* опис, значення рейтингу */
  --pc-sale: #ff5c42;       /* ціна зі знижкою і бейдж знижки */
  --pc-old: #b4b4b4;        /* стара ціна */
  --pc-cta: #111111;        /* кнопка, гліфи степера, серце */
  --pc-chip: #f6f6f6;       /* кружечки серця і «плюса» */
  --pc-chip-minus: #f6f5f3;  /* кружечок «мінус» — у макеті тепліший за «плюс» */
  --pc-star: #ffe540;
  /* Пропорція фото-бокса — НАМАЛЬОВАНА: деск 327x346 (фото вище за ширину),
     моб 233x228. До цього тут стояв квадрат 1/1 — свідоме відхилення задачі
     439 заради нуля обрізання кадру. Власник подивився на живу картку й
     скасував його: картка має бути як у макеті. Квадрат повернути = один
     рядок тут, решта геометрії картки від пропорції не залежить. */
  --pc-photo-ar: 327 / 346;

  /* ── ТЕКСТОВИЙ БЛОК ФІКСОВАНОЇ ВИСОТИ (рішення власника) ──────────────
     Вимога: ціна, степер, кнопка й рейтинг стоять на ОДНІЙ лінії у всіх
     картках ряду, бо інакше око не ловить ціну. Отже блок «назва + опис»
     має однакову висоту незалежно від довжини текстів - навіть коли опису
     взагалі немає (метаполе `card_description` заповнене не всюди).

     Висота виводиться, а не вписується числом: вона дорівнює намальованому
     в макеті випадку «назва в один рядок + опис у три»

         деск  24 + 4 + 3x20 = 88        моб  20 + 4 + 3x16 = 72

     тож кожен контекст (смуга «купують разом», каруселі головної) задає
     ТІЛЬКИ свої три числа - інтерліньяж назви, інтерліньяж опису й проміжок
     між ними, - а висота й обрізка опису перераховуються самі.

     Опис обрізаний 3 рядками; якщо назва лягла у ДВА рядки, опису лишається
     2 (пряма вимога власника). Щоб обидва випадки дали ту саму висоту,
     проміжок «назва - опис» у другому випадку зменшується рівно на різницю
     інтерліньяжів: gap' = gap + опис - назва. На базових числах це 4+20-24=0
     (деск) і 4+16-20=0 (моб), тобто проміжок схлопується; у смузі товару,
     де обидва інтерліньяжі 24, він лишається незмінним. `max(0px, ...)` -
     щоб у контексті з дуже тісним проміжком формула не дала відʼємне
     значення; переповнення там зрізає `overflow: hidden`. */
  --pc-title-lh: calc(24 * var(--u));
  --pc-blurb-lh: calc(20 * var(--u));
  --pc-info-gap: calc(4 * var(--u));

  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  background: var(--pc-bg);
  border: 1px solid var(--pc-line);
  /* pad [16,0,16,0] в макеті деска; на мобілці верхнього падінга немає */
  padding: calc(16 * var(--u)) 0;
  font-family: PCTL9600, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--pc-ink);
  text-align: left;
}
@media (min-width: 1921px) { .pcard { --u: calc(1920px / 1440); } }
@media (max-width: 768px)  {
  .pcard {
    --u: calc(100vw / 390);
    padding: 0 0 calc(16 * var(--u));
    --pc-title-lh: calc(20 * var(--u));
    --pc-blurb-lh: calc(16 * var(--u));
    --pc-photo-ar: 233 / 228;
  }
}

/* Обводка в макеті — [top, right, bottom, left] = [1,1,1,0]: лівого боку в
   картки НЕМА, бо в макеті вони стоять упритул (gap 0) і ліву межу малює
   сусідка. Стоїть така картка окремо — і в неї відкритий лівий бік, тому
   тут обводка повна, а суцільний ряд збирає `.pcard-strip` у кінці файла. */

/* ── фото ─────────────────────────────────────────────────────────────── */
/* Бейдж і серце лежать ПОВЕРХ фото, але поза посиланням: <button> усередині
   <a> — невалідна розмітка, а серце має лишатись кнопкою. */
.pcard__media-wrap {
  position: relative;
  display: block;
  flex: 0 0 auto;
}
.pcard__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--pc-photo-ar);   /* рішення 439, обґрунтування — у шапці файла */
  overflow: hidden;
  background: var(--pc-chip);
}
.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* слот під фото — cover (§7.2.1 гайда) */
  display: block;
}
/* Друге фото на ховері — воно ЗАВЖДИ в DOM (як у донора), нічого не
   підвантажується по наведенню. */
.pcard__media-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
}
.pcard:hover .pcard__media-hover { opacity: 1; visibility: visible; }
.pcard__media-wrap--disabled .pcard__media { opacity: .5; }

/* ── бейдж знижки (Badge 38×22 @16,16, r5) ───────────────────────────── */
.pcard__badge {
  position: absolute;
  left: calc(16 * var(--u));
  top: calc(16 * var(--u));
  display: inline-flex;
  align-items: center;
  /* У макеті падінги [3,6,3,6] і текст 16 → пігулка 22. Тут 4/2 замість 3/3:
     та сама висота 22, але гліф опускається на 1 px — це вже знайома класова
     поправка «PCTL9600 | 12 | 16px» (див. опис під описом картки й
     `redesign/html/text-shift.json`). Заміряно: без неї напис бейджа стоїть
     на 1 px вище за рендер Figma і на деску, і на мобілці. Робимо падінгом, а
     не зсувом усього бейджа: пігулка намальована рівно на (16,16), і рухати
     її разом із текстом означало б зіпсувати два її краї. */
  padding: calc(4 * var(--u)) calc(6 * var(--u)) calc(2 * var(--u));
  border-radius: calc(5 * var(--u));
  background: var(--pc-cta);
  color: #fff;
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  font-weight: 400;
  letter-spacing: calc(.5 * var(--u));
  white-space: nowrap;
}
/* Обчислений відсоток — червоний, ручний напис («2=3») — чорний. Колір
   випливає з того, ЩО написано: відсоток це завжди знижка. Так само було в
   старій плитці й у донора. */
.pcard__badge--sale { background: var(--pc-sale); }

/* ── серце вішліста (Icon 32, кружечок 32 + гліф 16×15) ──────────────── */
/* Позиція в макеті РІЗНА у двох варіантів компонента, і це не описка:
   деск — впритул до верху фото і 28 від правого краю, моб — 16/16.
   Відтворено як намальовано; зводити їх до одного числа — зміна дизайну. */
.pcard__wish {
  position: absolute;
  top: 0;
  right: calc(28 * var(--u));
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pc-chip);
  color: var(--pc-cta);
  cursor: pointer;
}
@media (max-width: 768px) { .pcard__wish { top: calc(16 * var(--u)); right: calc(16 * var(--u)); } }
.pcard__wish .iconSvg { display: block; width: calc(16 * var(--u)); height: calc(15 * var(--u)); }
.pcard__wish .iconSvg svg { display: block; width: 100%; height: 100%; }
/* Два гліфи, перемикає клас стану — контракт `wishlist.js` і сніпета
   `wishlist-heart.liquid`, він тут не міняється. */
.pcard__wish .iconSvg--on { display: none; }
.pcard__wish.is-active .iconSvg--off { display: none; }
.pcard__wish.is-active .iconSvg--on { display: block; fill: currentColor; }

/* ── тіло картки ──────────────────────────────────────────────────────── */
/* Product Details — 262 деск / 242 моб, justify-between.
   У макеті блок НЕ приліплений до вмісту: верхня частина (текст + рейтинг)
   стоїть угорі, нижня (ціна + кнопка) — унизу, а різниця лягає порожнім
   місцем між рейтингом і ціною: 262 - 130 (верх) - 100 (ціна 44 + 8 + кнопка
   48) = 32 на деску, 242 - 114 - 100 = 28 на мобілці.
   `min-height`, а не `height`: у сітці картку розтягує сусідка, і жорстка
   висота там дала б переповнення замість росту. Слабину збирає
   `margin-top: auto` на ціновому ряду (redesign.css), тож вона завжди між
   рейтингом і ціною — як намальовано. Gap 0: єдиний проміжок нижньої
   частини (8 між ціною і кнопкою) ставить сама кнопка. */
.pcard__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: calc(262 * var(--u));
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 768px) { .pcard__body { min-height: calc(242 * var(--u)); } }

/* Content: pad [16,16,0,16], V gap 12 */
.pcard__content {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  padding: calc(16 * var(--u)) calc(16 * var(--u)) 0;
  min-width: 0;
}

/* Product Information: V gap 4, висота ЖОРСТКА (деск 88, моб 72) */
/* `height`, а не `min-height`: блок не має ні рости під довгий текст, ні
   сідати під короткий - інакше ціна поїде. Діти не стискаються
   (`flex: 0 0 auto`), бо інакше flex підібʼє назву під фіксовану висоту й
   обрізка опису міряла б уже спотворений рядок. */
.pcard__info {
  display: flex;
  flex-direction: column;
  gap: var(--pc-info-gap-eff, var(--pc-info-gap));
  height: calc(var(--pc-title-lh) + var(--pc-info-gap) + 3 * var(--pc-blurb-lh));
  overflow: hidden;
  min-width: 0;
}
.pcard__info > .pcard__title,
.pcard__info > .pcard__blurb { flex: 0 0 auto; }
/* Назва у два рядки -> опису лишається два, а проміжок добирає різницю
   інтерліньяжів, щоб висота блока не змінилась. Атрибут ставить
   `assets/product-card.js` (назву доводиться МІРЯТИ: чистим CSS «скільки
   рядків зайняв сусідній елемент» не питається). */
.pcard[data-title-lines="2"] .pcard__info {
  --pc-info-gap-eff: max(0px, calc(var(--pc-info-gap) + var(--pc-blurb-lh) - var(--pc-title-lh)));
  --pc-blurb-lines: 2;
}
.pcard__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--pc-ink);
  font-size: calc(16 * var(--u));
  line-height: var(--pc-title-lh);
  font-weight: 700;
  text-decoration: none;
}
.pcard__blurb {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--pc-blurb-lines, 3);
  overflow: hidden;
  color: var(--pc-mute);
  font-size: calc(14 * var(--u));
  line-height: var(--pc-blurb-lh);
  font-weight: 400;
}
@media (max-width: 768px) {
  .pcard__title { font-size: calc(14 * var(--u)); line-height: var(--pc-title-lh); }
  .pcard__blurb {
    font-size: calc(12 * var(--u));
    letter-spacing: calc(.2 * var(--u));
    /* КЛАСОВА ПОПРАВКА «PCTL9600 | 12 | 16px» — та сама, що в конвеєрі рівняння
       (`redesign/html/text-shift.json`). База цього класу падає рівно на
       ПІВПІКСЕЛЯ (контент-бокс 12×1.2 = 14.4, півінтерліньяжу (16−14.4)/2 = 0.8,
       база 0.8 + 11.7 = 12.5), WebKit округлює вниз, Figma малює пікселем нижче.
       Заміряно й тут: без поправки опис картки стояв на 1 px вище за рендер
       Figma, решта класів (14/20, 16/24) зсуву не мають. `relative` — щоб
       зсунувся ГЛІФ, а не коробка: висоти блока це не міняє. */
    position: relative;
    top: calc(1 * var(--u));
  }
}
/* Опис може бути порожній (метаполе `card_description` заповнене не в усіх
   товарів) — тоді рядок просто зникає разом зі своїм gap. */

/* Rating: H gap 4, висота 14; зірки 68×12 із зсувом на 1 вниз */
/* У макеті рядок рейтингу 88×14, і діти в ньому вирівняні ПО ВЕРХУ, а не по
   центру: `Stars` 68×12 стоїть на y=1, `Rating Value` 16×14 — на y=0.
   Центрування тут дало б зіркам 1.5 замість 1 (вільного місця 2, поправка 1),
   тобто пів пікселя на рівному місці. Тому `flex-start` + явний зсув. */
.pcard__rating {
  display: flex;
  align-items: flex-start;
  gap: calc(4 * var(--u));
  height: calc(14 * var(--u));
}
.pcard__stars {
  display: flex;
  gap: calc(2 * var(--u));
  margin-top: calc(1 * var(--u));
}
.pcard__stars svg {
  display: block;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  color: var(--pc-star);
}
.pcard__rating-value {
  color: var(--pc-mute);
  font-size: calc(12 * var(--u));
  line-height: 1.2;              /* AUTO у Figma = 1.200 для PCTL9600 */
}

/* ── рядок «ціна + кількість» (Price and Quantity, pad [8,16,8,16]) ──── */
.pcard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  min-height: calc(44 * var(--u));
  box-sizing: border-box;
}
.pcard__prices {
  display: flex;
  align-items: baseline;
  gap: calc(6 * var(--u));
  min-width: 0;
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
}
.pcard__price-now { font-weight: 700; color: var(--pc-ink); white-space: nowrap; }
.pcard__price-now.is-sale { color: var(--pc-sale); }
.pcard__price-old {
  font-weight: 400;
  color: var(--pc-old);
  text-decoration: line-through;
  white-space: nowrap;
}
/* Розпродано / промо-плашка — не з макета картки, а з даних магазину: у
   макеті намальований лише «звичайний» стан. Обидва лягають у той самий
   рядок, тому й кегль у них той самий. */
.pcard__stock { color: var(--pc-mute); font-size: calc(12 * var(--u)); }
.pcard__promo {
  color: var(--pc-cta);
  font-size: calc(12 * var(--u));
  font-weight: 600;
  white-space: nowrap;
}

/* ── ВИБІР КІЛЬКОСТІ ПРЯМО В КАРТЦІ (вимога власника) ────────────────── */
/* У макеті це `Price and Quantity` → `Frame` 85×28: кружечок −, число,
   кружечок +, gap 10. Механіку не пишемо заново: в темі вже є
   `<quantity-input>` (assets/quantity-input.js) з контрактом
   [data-qty-minus] / [data-qty-value] / [data-qty-plus], валідацією min/max
   і подією `quantity:change`. Тут лише вигляд. */
.pcard__qty {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  flex: 0 0 auto;
}
.pcard__qty-btn {
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pc-chip);
  color: var(--pc-cta);
  cursor: pointer;
}
.pcard__qty-btn[data-qty-minus] { background: var(--pc-chip-minus); }
.pcard__qty-btn svg { display: block; width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.pcard__qty-btn[disabled] { opacity: .35; cursor: default; }
/* Число — справжній <input type=number>: значення має бути читабельним для
   форми й для скрінрідера, а не текстом у <span>. Стрілки браузера зняті,
   ширина тримає двозначні кількості (у макеті бокс 9 під однозначну). */
.pcard__qty-value {
  /* У макеті під число відведено 9 (бокс HUG навколо однієї цифри «1»), і
     весь степер там 85. Тут 16: однією цифрою кількість не обмежена, а
     двозначне «12» на кеглі 14 просить рівно 16. Ціна — рядок степера 92
     замість 85, тобто кружечок «−» починається на 7 лівіше; ціна, кнопка й
     жодна висота не рухаються. Це свідоме відхилення, а не промах. */
  width: calc(16 * var(--u));
  padding: 0;
  border: 0;
  background: none;
  color: var(--pc-cta);
  font: inherit;
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.pcard__qty-value::-webkit-outer-spin-button,
.pcard__qty-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── кнопка «До кошика» (Add to Cart Button, pad [0,16,0,16]) ─────────── */
.pcard__cta {
  padding: 0 calc(16 * var(--u));
  margin-top: auto;             /* кнопка внизу — ряд лишається рівним */
}
.pcard__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  width: 100%;
  height: calc(48 * var(--u));
  box-sizing: border-box;
  padding: 0 calc(24 * var(--u));
  border: 0;
  border-radius: calc(10 * var(--u));
  background: var(--pc-cta);
  color: #fff;
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  font-weight: 600;
  letter-spacing: calc(.5 * var(--u));
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.pcard__add--muted { background: var(--pc-old); cursor: default; }
.pcard__add[disabled] { opacity: .6; }

/* ── суцільний ряд карток (макетний gap 0) ───────────────────────────── */
/* У макеті картки стоять упритул і між ними одна волосина, а не дві: кожна
   несе обводку без лівого боку. У темі картку ставлять і в сітку з
   проміжками, і впритул, тому повна обводка лишається в базі, а суцільний
   ряд склеює сусідів негативним полем — лінія знову одна. */
.pcard-strip { display: flex; }
.pcard-strip > * + * { margin-left: -1px; }

/* ── господарі, які вже малюють шви самі ─────────────────────────────── */
/* Частина сіток старого дизайну малює волосини НЕ на картці, а на комірці:
   `.collection__grid > li { border-bottom; border-right }` (#e8e8e8),
   `.collection__viewed .recently-viewed__slide` — з трьох боків. Нова
   картка носить обводку сама, тож у цих господарів вийшла б подвійна лінія.
   Прибираємо свою — шов лишається один, і саме той, який намалював
   господар. Це поправка на СТАРІ сітки; коли їхній редизайн дійде до них,
   шов перейде на картку разом із рештою. */
.collection__grid > li > .pcard,
.collection__viewed .recently-viewed__slide > .pcard,
.article__products-grid > li > .pcard,
.hcl__grid > li > .pcard,
.lkPage .main .wrapCardItem > li > .pcard { border: 0; }

/* ── місця, де стара плитка мала точкові поправки ─────────────────────── */
/* Еквіваленти правил, що адресувались `.product-card` із чужих файлів
   (`blog.css` 605/616, `cart-drawer.css` 588/725). Тримаю їх тут, бо тепер
   це геометрія цієї картки, а не тих секцій. */
.article__products-grid .pcard,
.quantityNullWrap .recently-viewed__slide .pcard { width: 100%; }
.quantityNullWrap .carouselViewedWrap .pcard { border: 0; }

/* Задача 539: решта двійників `width: 100%`. Клас `.product-card` уже ніде не
   рендериться, тож його правила мертві, а в клітинках із `display: flex`
   картка стискалась за вмістом. Області дії — рівно як в оригіналів:
   collection.css 569 (сітка колекції й пошуку), home.css 181, page-hairclip.css 112,
   page-wishlist.css 52, product-reco.css 104 і design.css 98 (там не дублюю:
   геометрія картки живе в цьому файлі). Без двійника лишається
   `.collection__viewed .recently-viewed__slide` (collection.css 407): після
   §312/§313 там <product-recommendations> зі слайдами `.recommendations__slide`,
   і їх бере останній рядок нижче. */
.collection__grid .pcard,
.embla__slide.collection-carousel__slide .pcard,
.hcl__grid .pcard,
.lkPage .main .wrapCardItem > li .pcard,
.product-reco .reco-band .embla__slide .pcard,
.embla__slide.recommendations__slide .pcard { width: 100%; }

/* ── пошукова видача: картка в контейнері `.ss-products` ─────────────── */
/* Контейнер лишився від старої мінікартки (сітка 3/2/1 колонки) і несе
   правило `.ss-products a { display: flex }` — воно б перебило
   `display:-webkit-box` на назві (0,1,1 проти 0,1,0) і назва перестала б
   обрізатись двома рядками. Гасимо точково, підвищивши специфічність до
   0,2,1; чіпати `search.css` не можна — це файл власника секції пошуку. */
.ss-products .pcard a { display: block; }
.ss-products .pcard .pcard__title { display: -webkit-box; }
.ss-products .pcard .pcard__add { display: flex; }
.ss-products .pcard { width: 100%; }

/* Виділення товару (`custom.highlight`) — градієнтна рамка донора. У новому
   дизайні картка має власну обводку, тому градієнт іде поверх країв
   псевдоелементом і розмітка лишається одна для всіх карток. */
.pcard--highlight { position: relative; }
.pcard--highlight::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(90deg, #96e6ef, #66dcc9, #f8c56c, #f2a6ba);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* ── вузька картка каталогу: рядок ціни не має налазити на степер ─────── */
/* Макет малює картку 234 завширшки, і там 16 падінгів + проміжок 10 у
   степері вміщають «82 zł 109 zł» разом із кнопками. У каталозі на 390
   сітка у дві колонки, картка виходить 194, і тій самій парі цін бракує
   9 px: стара ціна лізла під кружечок «мінус». Тому саме для сітки
   каталогу на мобілці трохи стискаємо падінги й проміжки - текст цілий,
   решта місць лишається з намальованими числами. */
@media (max-width: 768px) {
  .collection__grid .pcard__row { padding-left: calc(12 * var(--u)); padding-right: calc(12 * var(--u)); }
  .collection__grid .pcard__prices { gap: calc(4 * var(--u)); }
  .collection__grid .pcard__qty { gap: calc(6 * var(--u)); }
}

/* ── у сітці каталогу фото починається від самого верху картки ───────── */
/* Вимога власника 15.10: у колекції картка має бути трохи нижча, а фото -
   діставати до верхівки. У макеті картка має верхній падінг 16, і в
   каруселях та смугах він лишається; знімаємо його лише в сітці. */
.collection__grid .pcard { padding-top: 0; }

/* ---------- cart-attention.css ---------- */
/* §248. Блок «YOU MAY ALSO LIKE:» — `cardProductsAttentionWrap`.
   Правила зняті з кешованого `donor-src/donor-css/home.css` (селектори
   `.cardProductsAttention*`, `.attention*`) разом із їхніми брейкпоінтами.
   Це НОВА форма блока: стару (`.alsoAttention` з мінікарткою «фото 52 |
   текст», §205) донор перемалював — тепер картка з фото 94×110, бейджем
   знижки, парою цін і чорною кнопкою, і без каруселі. */
.cardProductsAttentionWrap {
  background: #f5f0e8; display: flex; flex-direction: column;
  gap: .9114583333vw; padding: .9114583333vw .5208333333vw;
}
@media (max-width: 1536px) { .cardProductsAttentionWrap { gap: 14px; padding: 14px 8px; } }
.cardProductsAttentionWrap.hide { display: none; }
/* Стрічку карток донор більше не крутить — стовпчик із тим самим гепом. */
.cardProductsAttentionWrap .alsoAttentionWrap {
  display: flex; flex-direction: column; gap: .9114583333vw;
}
@media (max-width: 1536px) { .cardProductsAttentionWrap .alsoAttentionWrap { gap: 14px; } }

.cardProductsAttentionTitle { color: #000; font-size: .9114583333vw; font-weight: 500; line-height: .78125vw; }
@media (max-width: 1536px) { .cardProductsAttentionTitle { font-size: 14px; line-height: 12px; } }

.cardProductsAttentionItem {
  align-items: flex-end; background: #fff; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.039), 0 24px 16px rgba(0,0,0,.02),
              0 16px 8px rgba(0,0,0,.012), 0 8px 8px rgba(0,0,0,.012),
              0 4px 4px rgba(0,0,0,.039), 0 1px 8px rgba(0,0,0,.039);
  display: flex; gap: .5208333333vw; padding: .5208333333vw; position: relative;
}
@media (max-width: 1536px) { .cardProductsAttentionItem { gap: 8px; padding: 8px; } }

.cardProductsAttentionItem .attentionPhotoLink {
  align-self: center; aspect-ratio: unset; display: block; flex-shrink: 0;
  height: 110px; width: 94px;
}
.cardProductsAttentionItem .attentionPhoto {
  display: block; height: 100%; object-fit: contain; object-position: center; width: 100%;
}

/* У донора `.attentionInfo` оголошено ДВІЧІ, і друге правило перебиває
   геп 4px на 44px, а `align-items:flex-start` — на `stretch`. Переносимо
   як є: це його порядок, а не наш вибір. */
.cardProductsAttentionItem .attentionInfo {
  align-self: stretch; display: flex; flex: 1 1 0%; flex-direction: column;
  gap: 2.8645833333vw; justify-content: center; min-height: 0;
}
@media (max-width: 1536px) { .cardProductsAttentionItem .attentionInfo { gap: 44px; } }

.cardProductsAttentionItem .attentionHeader {
  align-items: self-start; display: flex; flex-direction: column; gap: .2604166667vw;
}
@media (max-width: 1536px) { .cardProductsAttentionItem .attentionHeader { gap: 4px; } }
.cardProductsAttentionItem .attentionName {
  color: #333; cursor: pointer; display: block; font-size: .9114583333vw;
  font-weight: 600; line-height: 1.0416666667vw; text-decoration: none;
}
@media (max-width: 1536px) { .cardProductsAttentionItem .attentionName { font-size: 14px; line-height: 16px; } }

.cardProductsAttentionItem .attentionPrices { align-items: center; display: flex; gap: .5208333333vw; }
@media (max-width: 1536px) { .cardProductsAttentionItem .attentionPrices { gap: 8px; } }
.cardProductsAttentionItem .attentionPriceNew {
  color: #757575; font-size: .9765625vw; font-weight: 700; line-height: 1.0416666667vw;
}
.cardProductsAttentionItem .attentionPriceOld {
  color: #757575; font-size: .9765625vw; font-weight: 400;
  line-height: 1.0416666667vw; text-decoration: line-through;
}
@media (max-width: 1536px) {
  .cardProductsAttentionItem .attentionPriceNew,
  .cardProductsAttentionItem .attentionPriceOld { font-size: 15px; line-height: 16px; }
}
/* §329: був освітлений `#ff8d78`, ціна читалась як неактивна.
   Акцент у проєкті один — `#ff5f4a`, той самий, що на товарі й у дравері. */
.cardProductsAttentionItem .sale { color: #ff5f4a; }

.cardProductsAttentionItem .attentionAddBtn {
  background: #111; border: none; border-radius: 4px; color: #fff; cursor: pointer;
  font-size: .78125vw; font-weight: 600; height: 1.6927083333vw;
  line-height: 1.1067708333vw; margin-left: auto;
  min-height: 1.6927083333vw; min-width: 5.5989583333vw;
  padding: .2604166667vw .6510416667vw; width: 5.5989583333vw;
}
@media (max-width: 1536px) {
  /* §331. `nowrap` і вужчі бічні падінги.

     Донорська коробка 86×26 і кегль 12 лишаються, але наш шрифт малює
     «Add to basket» на 75.4 px, а падінги 10+10 лишали всередині 66 —
     підпис переносився на другий рядок, і той обрізався (вміст 38 у
     коробці 26). Саме це власник бачив як «Add to» без продовження.

     Падінги 4+4 дають 78 — підпис уміщається із запасом 2.6, а зовнішній
     розмір кнопки не змінюється. `nowrap` — щоб перенос не повернувся на
     довшому підписі в іншій мові: краще хай вилізе видимо, ніж обріжеться. */
  .cardProductsAttentionItem .attentionAddBtn {
    font-size: 12px; height: 26px; line-height: 17px;
    min-height: 26px; min-width: 86px; padding: 4px 4px; width: 86px;
    white-space: nowrap;
  }
}
.cardProductsAttentionItem .attentionAddBtn[disabled] { opacity: .6; cursor: default; }
.cardProductsAttentionItem .attentionBadge {
  background: #ff5d3f; border-radius: 30px; color: #fff; font-size: .6510416667vw;
  font-weight: 500; left: 0; line-height: .9765625vw; padding: .1953125vw .390625vw;
  position: absolute; top: 0; transform: translate(10px, -10px); z-index: 2;
}
@media (max-width: 1536px) {
  .cardProductsAttentionItem .attentionBadge { font-size: 10px; line-height: 15px; padding: 3px 6px; }
}

/* §262. На СТОРІНЦІ КОШИКА цей блок стоїть не в боковушці, а окремою
   смугою внизу: там ширина не 350, тож картки кладемо в сітку. */
.cart-attention-bottom { margin: 24px 0 0; }
.cart-attention-bottom .alsoAttentionWrap {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 1000px) { .cart-attention-bottom .alsoAttentionWrap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cart-attention-bottom .alsoAttentionWrap { grid-template-columns: 1fr; } }

/* ---------- cart-drawer.css ---------- */
/* ============================================================
   САЙДБАР КОШИКА — CSS ДОНОРА
   ------------------------------------------------------------
   Правила зняті з його home.css (селектори `.cardModal`, `.cardWrapper`
   і нащадки) і перенесені як є. Три відступи від оригіналу, кожен
   з причини:

   1. `.cardModal.active` → `.cardModal.drawer--open`. Клас `.active`
      у донора вішає його скрипт; у нас той самий стан уже позначає
      `side-drawer`, і заводити другий клас заради збігу імені —
      зайвий вузол у механіці.
   2. z-index. У донора `.cardModal` має 999999999999, тобто «поверх
      усього». У нас над кошиком мусить лишатися модалка меню, тож
      беремо наш рівень драверів (90) — інакше кошик накрив би меню.
   3. Іконки `+`/`−`/кошик у донора — окремі файли з /images. Ми
      малюємо ті самі контури інлайновим data:URI: 200 байт кожен,
      але без трьох запитів і без залежності від чужого домену.
   ============================================================ */

.cardModal { position: relative; }

/* §333. Дравер має лежати ПОВЕРХ віджета Бінотела.

   Перша спроба була хибна, і замір це показав: я підняв z-index ПАНЕЛІ
   (`.cardModal .modal`) до мільйона, але сам `<cart-drawer>` має
   `position: relative` і `z-index: 90` з `.drawer` у `base.css`, тобто
   САМ СТВОРЮЄ КОНТЕКСТ НАКЛАДАННЯ. Мільйон усередині нього нічого не
   означає: назовні весь дравер лишався на 90, і будь-який віджет вище
   за 90 накривав його. Заміряно: `position=relative z-index=90`,
   панель `z-index=1000000` — і все одно замкнена.

   Тому піднімаємо ЗМІННУ на самому елементі: `.drawer` бере z-index
   саме з неї, і правило лишається одне, без дублювання.

   Тільки кошик, не всі шухляди: меню й пошук у цю бійку не втягнуті.

   Верхню межу не займаємо навмисно: `packagesModalWrap` стоїть на
   2147483647, і попап пакування відкривається САМЕ З ДРАВЕРА — має
   лишатись над ним. Порядок: пакування → дравер → віджети → сторінка.

   Заміряти справжній шар Бінотела не вдалось — на дев-магазині
   `settings.binotel_hash` порожній, віджета в DOM немає. Якщо на
   бойовому він усе одно перекриє, число тут піднімати ЗАМІРЯНИМ. */
cart-drawer.cardModal { --drawer-z: 1000000; }

/* УВАГА, ЗБІГ ІМЕН. `.modal` — це і клас донорської панелі, і власний
   компонент теми (base.css): центрована модалка з `inset:0`, `padding:16px`,
   `place-items:center` і `pointer-events:none`. Наш селектор специфічніший,
   але успадковує все, чого сам не задає, — і панель через це прилипала до
   лівого краю (inset тягнув `left:0`), втрачала 32px на чужий padding і не
   ловила кліки. Тому кожну з цих властивостей гасимо явно. */
.cardModal .modal {
  display: block;
  place-items: normal;
  height: 100%;
  opacity: 0;
  padding: 0;
  pointer-events: auto;
  position: fixed;
  left: auto;
  bottom: auto;
  right: 0;
  top: 0;
  visibility: hidden;
  width: 25vw;
  z-index: 90;
  transition: .3s;
  /* Загальний `.modal` донора дає панелі рамку, фон, радіус і тінь —
     `.cardModal .modal` їх не скасовує, тож вони є і в кошику. Саме через
     рамку його `.cardWrapper` виходить 382 при панелі 384. */
  background: #fff;
  border: 1px solid hsla(0, 0%, 7%, .1);
  border-radius: 2px;
  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, .08);
}
@media (max-width: 1536px) { .cardModal .modal { width: 384px; } }
@media (max-width: 768px)  { .cardModal .modal { width: 100%; } }

.cardModal .blurCard {
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  background: transparent;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: .5s;
  visibility: hidden;
  width: 100%;
  z-index: 89;
}
.cardModal.drawer--open .blurCard,
.cardModal.drawer--open .modal { opacity: 1; visibility: visible; }
.cardModal.drawer--open .blurCard {
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
  background: hsla(0, 0%, 40%, .5);
}

.cardWrapper {
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  width: 100%;
}

/* ---------- шапка панелі ---------- */
.cardWrapper .head {
  align-items: center;
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  padding: 1.0416666667vw;
}
@media (max-width: 1536px) { .cardWrapper .head { padding: 16px; } }
.cardWrapper .head .title { align-items: center; display: flex; gap: .3255208333vw; }
@media (max-width: 1536px) { .cardWrapper .head .title { gap: 5px; } }
.cardWrapper .head .title .text {
  color: #111;
  font-size: 1.0416666667vw;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.0416666667vw;
  text-transform: uppercase;
}
@media (max-width: 1536px) { .cardWrapper .head .title .text { font-size: 16px; line-height: 16px; } }
.cardWrapper .head .title .quantity { color: #999; }
.cardWrapper .head .close {
  background: none;
  border: 0;
  padding: 0;
  color: #111;
  cursor: pointer;
  opacity: .8;
  transition: .3s;
}
.cardWrapper .head .close:hover { opacity: 1; transform: scale(1.2); }
.cardWrapper .head .close .iconSvg {
  cursor: pointer;
  display: block;
  height: 1.3020833333vw;
  width: 1.3020833333vw;
}
@media (max-width: 1536px) { .cardWrapper .head .close .iconSvg { height: 20px; width: 20px; } }
.cardWrapper .head .close .iconSvg svg { display: block; height: 100%; width: 100%; }

/* ---------- список позицій ---------- */
.cardWrapper .main { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: clip; }
.cardWrapper .main .cardProductsWrap {
  border-top: 1px solid #dedede;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.cardWrapper .main .cardProductsWrap .cardProducts {
  border: none;
  height: 100%;
  overflow-y: scroll;
  scrollbar-width: none;
}
.cardWrapper .main .cardProductsWrap .cardProducts::-webkit-scrollbar { display: none; width: 0; }

.cardWrapper .main .cardProducts .product {
  grid-gap: 1.0416666667vw;
  border-top: 1px solid #dedede;
  display: grid;
  grid-template-columns: 5.46875vw 1fr;
  padding: .9114583333vw;
  position: relative;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts .product { grid-gap: 16px; grid-template-columns: 84px 1fr; padding: 14px; }
}
.cardWrapper .main .cardProducts .product:first-child { border-top: none; }
.cardWrapper .main .cardProducts .product:last-child { border-bottom: 1px solid #dedede; }
.cardWrapper .main .photoProduct img,
.cardWrapper .main .photoProduct video { display: block; height: auto; width: 100%; }

.cardWrapper .main .infoProduct { display: flex; flex-direction: column; gap: .2604166667vw; min-height: 100%; }
@media (max-width: 1536px) { .cardWrapper .main .infoProduct { gap: 4px; } }
.cardWrapper .main .infoProduct .nameWrap {
  align-items: flex-start;
  display: flex;
  gap: 1.0416666667vw;
  justify-content: space-between;
  position: relative;
}
@media (max-width: 1536px) { .cardWrapper .main .infoProduct .nameWrap { gap: 16px; } }
.cardWrapper .main .infoProduct .nameWrap .name { flex: 1 1 auto; min-width: 0; }
.cardWrapper .main .infoProduct .nameWrap .name a {
  color: #111;
  font-size: .9114583333vw;
  font-weight: 600;
  line-height: 1.0416666667vw;
  text-decoration: none;
}
@media (max-width: 1536px) { .cardWrapper .main .infoProduct .nameWrap .name a { font-size: 14px; line-height: 16px; } }
.cardWrapper .main .infoProduct .nameWrap .name a:hover { text-decoration: underline; }

/* §289, ЗВІРЕНО НА 1440 І 1920: 19×19 у донора СТАЛЕ на обох ширинах —
   це його фіксований розмір, а не заморожена половина. Не чіпати.
   Кнопка видалення: підпис усередині, але схований `font-size:0` — так
   контур лишається іконкою, а читалка все одно читає слово. Це прийом
   донора, не наш.

   §249. Іконку замінено на донорський `/assets/ignor/trash.svg` цілком.
   Наш інлайн мав ЧОТИРИ контури з п'яти: бракувало дужки кришки
   (`M6.33203 4.74967V3.16634…`), тобто кошик малювався без ручки. Решта
   чотирьох збігалася до символу, тому підміна помітна лише в деталі. */
.cardWrapper .main .infoProduct .nameWrap .delete.deleteIcon {
  background: url("data:image/svg+xml,%3Csvg%20width%3D%2219%22%20height%3D%2219%22%20viewBox%3D%220%200%2019%2019%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M7.91797%208.70801V13.458%22%20stroke%3D%22%23999999%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M11.082%208.70801V13.458%22%20stroke%3D%22%23999999%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M15.0404%204.75V15.8333C15.0404%2016.2533%2014.8735%2016.656%2014.5766%2016.9529C14.2797%2017.2499%2013.877%2017.4167%2013.457%2017.4167H5.54036C5.12044%2017.4167%204.71771%2017.2499%204.42078%2016.9529C4.12385%2016.656%203.95703%2016.2533%203.95703%2015.8333V4.75%22%20stroke%3D%22%23999999%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M2.375%204.75H16.625%22%20stroke%3D%22%23999999%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M6.33203%204.74967V3.16634C6.33203%202.74641%206.49885%202.34369%206.79578%202.04676C7.09271%201.74982%207.49544%201.58301%207.91536%201.58301H11.082C11.502%201.58301%2011.9047%201.74982%2012.2016%202.04676C12.4985%202.34369%2012.6654%202.74641%2012.6654%203.16634V4.74967%22%20stroke%3D%22%23999999%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3C%2Fsvg%3E") 50%/contain no-repeat;
  background-size: 19px 19px !important;
  border: 0;
  box-sizing: content-box !important;
  position: static;
  max-width: 19px;
  max-height: 19px;
  min-height: 19px;
  color: #999;
  cursor: pointer;
  font-size: 0;
  height: 19px;
  line-height: 0;
  margin-left: 8px;
  min-width: 19px;
  opacity: .9;
  padding: 0;
  transition: opacity .2s;
  width: 19px;
}
.cardWrapper .main .infoProduct .nameWrap .delete.deleteIcon:hover { opacity: 1; }

.cardWrapper .main .infoProduct .optionPrise { display: flex; flex-direction: column; gap: .5208333333vw; }
@media (max-width: 1536px) { .cardWrapper .main .infoProduct .optionPrise { gap: 8px; } }
.cardWrapper .main .infoProduct .option {
  color: #333;
  font-size: .9114583333vw;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.0416666667vw;
}
@media (max-width: 1536px) { .cardWrapper .main .infoProduct .option { font-size: 14px; line-height: 16px; } }

.cardWrapper .main .infoProduct .controls {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}
.cardWrapper .main .infoProduct .controls .quantityWrap { align-items: center; display: flex; }
.cardWrapper .main .infoProduct .controls .quantityWrap .quantity {
  background: none;
  border: none;
  color: #111;
  /* Донор ставить тут `font-family:Inter,sans-serif` — і оскільки Inter
     він не вантажить, число малюється системним sans-serif, а не PCTL9600.
     Повторюємо саме його стек: цифри в цьому полі помітно вужчі. */
  font-family: Inter, sans-serif;
  font-size: 1.0416666667vw;
  font-weight: 700;
  height: auto;
  letter-spacing: 0;
  line-height: 1.0416666667vw;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 2.2786458333vw;
  -moz-appearance: textfield;
}
.cardWrapper .main .infoProduct .controls .quantityWrap .quantity::-webkit-outer-spin-button,
.cardWrapper .main .infoProduct .controls .quantityWrap .quantity::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
@media (max-width: 1536px) {
  .cardWrapper .main .infoProduct .controls .quantityWrap .quantity { font-size: 16px; line-height: 16px; width: 35px; }
}
.cardWrapper .main .infoProduct .controls .quantityWrap .mines,
.cardWrapper .main .infoProduct .controls .quantityWrap .plus {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  display: block;
  height: 1.0416666667vw;
  overflow: hidden;
  position: relative;
  transition: .2s;
  width: 1.0416666667vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .infoProduct .controls .quantityWrap .mines,
  .cardWrapper .main .infoProduct .controls .quantityWrap .plus { height: 16px; width: 16px; }
}
.cardWrapper .main .infoProduct .controls .quantityWrap .mines:hover,
.cardWrapper .main .infoProduct .controls .quantityWrap .plus:hover { transform: scale(1.2); }
.cardWrapper .main .infoProduct .controls .quantityWrap .mines:active,
.cardWrapper .main .infoProduct .controls .quantityWrap .plus:active { transform: scale(1); }
.cardWrapper .main .infoProduct .controls .quantityWrap .mines {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7.5H14V8.5H2V7.5Z' fill='%23333333'/%3E%3C/svg%3E");
}
.cardWrapper .main .infoProduct .controls .quantityWrap .plus {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.5 8.5V14H8.5V8.5H14V7.5H8.5V2H7.5V7.5H2V8.5H7.5Z' fill='%23333333'/%3E%3C/svg%3E");
}

/* §250. Самі іконки в нас БУЛИ вже точні — звірив байт у байт із
   `/images/Plus.svg` і `/images/Minus.svg` донора, розбіжностей нема.
   Бракувало іншого: у донора для позицій КОШИКА є окреме, вужче правило,
   яке садить іконку в сіре коло. Це не рамка (`border`), а заливка з
   радіусом — тому на око й читалось як обводка:

     .cardWrapper .main .cardProducts .product .infoProduct .controls
       .quantityWrap .plus/.mines {
         background-color:#f3f2f3; border-radius:50%;
         background-size:.7161458333vw; height:1.6276041667vw; width:… }
     @media(max-width:1536px){ background-size:11px 11px; height:25px; width:25px }

   Переношу правило цілим і з тим самим селектором: воно вужче за загальне
   (0,8,0 проти 0,6,0), тож розмір 16→25 і фон беруть саме позиції кошика,
   а інші місця з `.quantityWrap` лишаються як були. */
.cardWrapper .main .cardProducts .product .infoProduct .controls .quantityWrap .mines,
.cardWrapper .main .cardProducts .product .infoProduct .controls .quantityWrap .plus {
  background-color: #f3f2f3;
  background-size: .7161458333vw .7161458333vw;
  border-radius: 50%;
  height: 1.6276041667vw;
  width: 1.6276041667vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts .product .infoProduct .controls .quantityWrap .mines,
  .cardWrapper .main .cardProducts .product .infoProduct .controls .quantityWrap .plus {
    background-size: 11px 11px;
    height: 25px;
    width: 25px;
  }
}

.cardWrapper .main .infoProduct .prise {
  display: flex;
  font-size: .9114583333vw;
  gap: .5208333333vw;
  line-height: 1.0416666667vw;
  text-align: center;
  text-transform: lowercase;
}
@media (max-width: 1536px) { .cardWrapper .main .infoProduct .prise { font-size: 14px; gap: 8px; line-height: 16px; } }
.cardWrapper .main .infoProduct .prise div { color: #111; }
/* §329. Акційна ціна в дравері — той самий акцент, що на сторінці товару.

   Тут стояв `#ff8d78` — освітлений відтінок, через який ціна читалась як
   неактивна (скарга власника з живого телефона). Бренд-акцент у проєкті
   один: `#ff5f4a`, і саме він на новій ціні товару (заміряно на живій
   сторінці: `rgb(255, 95, 74)`). Перекреслена лишається `#999`, як і була. */
.cardWrapper .main .infoProduct .prise .sale { color: #ff5f4a; }
.cardWrapper .main .infoProduct .prise .old { color: #999; font-weight: 400; text-decoration: line-through; }

/* ---------- порожній кошик ---------- */
/* Правила донора як є. Клас `quantityNull` на `.cardWrapper` одночасно
   показує цей поверх і ховає список, підвал та лічильник у заголовку —
   тобто порожній стан у нього не «рядок замість товарів», а інший екран. */
.cardWrapper .quantityNullWrap { display: none; flex: 2 0 auto; flex-direction: column; justify-content: space-between; }
.cardWrapper .quantityNullWrap .carouselViewedWrapHead {
  align-items: center;
  display: flex;
  flex: 2 0 auto;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}
.cardWrapper .quantityNullWrap .carouselViewedWrapHead > .text { padding: 0 20%; text-align: center; }
.cardWrapper .quantityNullWrap .carouselViewedWrapHead .btn { padding: 0 20px; }
.cardWrapper .quantityNullWrap .linkWrap { display: inline-flex; }
.cardWrapper.quantityNull .quantityNullWrap { display: flex; }
.cardWrapper.quantityNull .footer,
.cardWrapper.quantityNull .head .title .quantity,
.cardWrapper.quantityNull .main { display: none; }

/* Кнопка порожнього екрана — світла, `.btn.btn__white`: у донора вона
   з рамкою #333, на відміну від чорної кнопки оформлення.
   §289, ЗВІРЕНО НА 1440 І 1920. Число 40 нижче стосується ЧОРНОЇ кнопки
   донора (radius 4, 40→50), а описана тут БІЛА має 48→60 і radius 2→2.5 —
   у нашому дравері діє саме вона (через `.btn__large` нижче). Обом дописано
   vw-базу; висота 40 лишається для не-`__large` варіанта, вона теж тече. */
.cardWrapper .quantityNullWrap .btn {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 2.6041666667vw;
  justify-content: center;
  text-decoration: none;
  transition: .3s;
  border-radius: .1302083333vw;
  border: 1px solid #333;
  background: #fff;
  color: #111;
}
@media (max-width: 1536px) {
  .cardWrapper .quantityNullWrap .btn { height: 40px; border-radius: 2px; }
}
.cardWrapper .quantityNullWrap .btn:hover { background: #f6f6f6; }
/* §274. Донорський `.btn .text`: `.9114583333vw` / `1.0416666667vw` з
   гілкою `@media ≤1536 {14px / 16px}`. Стояла сама піксельна половина. */
.cardWrapper .quantityNullWrap .btn .text { font-size: .9114583333vw; line-height: 1.0416666667vw; white-space: nowrap; }
@media (max-width: 1536px) { .cardWrapper .quantityNullWrap .btn .text { font-size: 14px; line-height: 16px; } }

/* ---------- підвал ---------- */
.cardWrapper .footer { border-top: 1px solid #dedede; padding: 16px; }
.cardWrapper .footer .discount,
.cardWrapper .footer .sum { display: flex; justify-content: space-between; }
.cardWrapper .footer .discount {
  color: #767676;
  font-size: .9114583333vw;
  line-height: 1.0416666667vw;
  /* §274. `margin-bottom` у донора теж тече: `.5208333333vw` з гілкою
     `@media ≤1536 {8px}` (селектор `.footer .delivery,.discount,.mile`). */
  margin-bottom: .5208333333vw;
}
@media (max-width: 1536px) { .cardWrapper .footer .discount { font-size: 14px; line-height: 16px; margin-bottom: 8px; } }
/* Заміряно на живому донорі: підсумок у підвалі — 18px/700, колір #3c3c3c,
   а не 14px, як решта рядків. Раніше тут стояли 14 від сусіднього правила. */
.cardWrapper .footer .sum {
  color: #3c3c3c;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.0416666667vw;
  /* §251. Поля підсумку — донорські, ТРИ рівні. Верхнього в нас не було
     зовсім, і саме його бракувало під рядком доставки: у донора просвіт
     там 8 (поле доставки) + 16 (поле підсумку) = 24, у нас був самий
     восьмипіксельний. Звідси й «більший відступ знизу». */
  margin: 1.0416666667vw 0;
}
@media (max-width: 1536px) {
  .cardWrapper .footer .sum { line-height: 20px; margin: 16px 0; }
}
/* Третій рівень у донора — за ВИСОТОЮ вікна, а не шириною: на низькому
   екрані він підтискає підвал. Легко проґавити, шукаючи max-width. */
@media screen and (max-height: 700px) {
  .cardWrapper .footer .sum { margin: 10px 0; }
}
/* §251. Рядок доставки — це ПІДКАЗКА, а не посилання. У донора
   `<span class="value">`, без підкреслення й без переходу; ми малювали
   `<a>` з `text-decoration:underline`, і рядок читався як клікабельний.
   Вирівнювання й проміжок теж донорські: `align-items:flex-start; gap:8px`
   (у нас було 12 і розтяжка по висоті). */
.cardWrapper .footer .delivery {
  color: #767676;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  /* §274. Ті самі дві донорські пари, що й у `.discount`: кегль і крок
     `.9114583333vw`/`1.0416666667vw`, поле `.5208333333vw`. */
  font-size: .9114583333vw;
  line-height: 1.0416666667vw;
  margin-bottom: .5208333333vw;
}
@media (max-width: 1536px) {
  .cardWrapper .footer .delivery { font-size: 14px; line-height: 16px; margin-bottom: 8px; }
}
.cardWrapper .footer .delivery .value {
  color: #767676; text-align: right; text-decoration: none; text-transform: none;
}
.cardWrapper .footer .sum .value { text-transform: lowercase; }
/* Чорна кнопка донора — `.btn.btn__blank`; у нашій темі такого класу не
   було, бо кнопки досі жили на власних `.button*`. Беремо його правила
   разом з базовим `.btn`, інакше кнопка з'їхала б у голий текст. */
.cardWrapper .footer .btn {
  align-items: center;
  color: #111;
  cursor: pointer;
  display: flex;
  gap: .5208333333vw;
  height: 2.6041666667vw;
  justify-content: center;
  min-width: 2.6041666667vw;
  outline: none;
  position: relative;
  text-decoration: none;
  transition: .3s;
  width: 100%;
  border-radius: .1302083333vw;
  border-style: solid;
  border-width: .0651041667vw;
  padding: 0 .6510416667vw;
}
@media (max-width: 1536px) {
  .cardWrapper .footer .btn { height: 40px; min-width: 40px; gap: 8px; border-radius: 2px; border-width: 1px; padding: 0 10px; }
}
.cardWrapper .footer .btn__blank { background: #111; border-color: #111; color: #fff; }
.cardWrapper .footer .btn__blank:hover { opacity: .9; }
/* §274. Той самий донорський `.btn .text`. */
.cardWrapper .footer .btn .text { font-size: .9114583333vw; line-height: 1.0416666667vw; white-space: nowrap; }
@media (max-width: 1536px) { .cardWrapper .footer .btn .text { font-size: 14px; line-height: 16px; } }
/* `.btn__link` донора: без рамки й фону, підпис 13.33px, підкреслення
   немає взагалі — і в спокої, і на ховері. Перехід у нього спільний для
   всіх кнопок, .3s; окремої анімації в підвалі немає. */
.cardWrapper .footer .btn__link {
  background: none;
  border: none;
  color: #111;
  font-size: 13.3333px;
  /* §252. Верхнього поля тут у донора НЕМА: проміжок між кнопками задає
     `margin-bottom` у самої `.toOrder` (нижче). Ми тримали 13 px саме тут,
     і на низькому екрані виходило більше за донорські 8. */
  text-decoration: none;
  transition: .3s;
}
.cardWrapper .footer .btn__link:hover { text-decoration: none; opacity: .7; }
.cardWrapper .footer .btn__large { height: 3.125vw; }
@media (max-width: 1536px) { .cardWrapper .footer .btn__large { height: 48px; } }
/* §281. Тут стояло `font-size:16px` — і воно ГАСИЛО донорську пару з рядка
   вище (`.cardWrapper .footer .btn .text` = .9114583333vw + @1536:14px).
   Специфічність однакова, (0,4,0) проти (0,4,0), тож вигравав просто
   пізніший рядок. Наслідок було видно лише ШИРШЕ за 1536: донор давав
   14px@1440 і 17.5px@1920, ми — 16px на обох (заміряно, дравер із товаром).
   У донора власного правила на `.toOrder .text` НЕМАЄ — кегль приходить
   від `.btn .text`. Тому рядок прибрано, а не переписано у vw. */
/* §252. Проміжок «Make an order» → «Continue shopping», три рівні донора.
   Третій — знову за висотою вікна: саме на ньому користувач і бачив
   зайве, бо в нас там лишалось 13 px замість 8. */
.cardWrapper .footer .toOrder { margin-bottom: 1.0416666667vw; }
@media (max-width: 1536px) { .cardWrapper .footer .toOrder { margin-bottom: 16px; } }
@media screen and (max-height: 700px) { .cardWrapper .footer .toOrder { margin-bottom: 8px; } }

/* ---------- прелоадер ---------- */
.cardWrapper .lds-heartWrap {
  align-items: center;
  background: hsla(0, 0%, 100%, .8);
  display: none;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 9;
}
.cardWrapper.activeLoad .lds-heartWrap { display: flex; }

/* Помилку показуємо там, де донор нічого не малює: у нього мутації
   кошика йдуть його бекендом і помилка приходить окремим тостом. */
.cardWrapper .cart-drawer__error { margin: 0 16px; }

/* ═══════════ порожній кошик: карусель переглянутих ═══════════
   (доповнення до каркаса `.quantityNullWrap` вище — задача 87)

   Числа зняті з живого донора при відкритій панелі 382 px, з прогрітою
   історією переглядів:

     .carouselViewedWrapHead   382×291.03, gap 20, текст padding 0 20%
     кнопка «Go to promotions» 149.39×48, padding 0 20, gap 8, колір #111
     .productCarouselViewedCard 382×554.97
     .title                    18/24, 700, #333, UPPERCASE,
                               margin 0 0 22.5, padding 0 15
     .swiper                   382×508.47, overflow hidden
     слайд                     212.219 — це рівно 5/9 панелі (55.5556%),
                               тобто swiper тут крутить 1.8 картки, а не 1.7,
                               як у viewed на сторінці колекції

   Слайд задано ВІДСОТКОМ, а не 212.222px: панель у нас може відрізнятись
   від донорських 382, і відсоток тримає ту саму пропорцію 1.8 картки. */
.cardWrapper .quantityNullWrap .btn__large { height: 3.125vw; }
@media (max-width: 1536px) { .cardWrapper .quantityNullWrap .btn__large { height: 48px; } }

.quantityNullWrap .carouselViewedWrap,
.quantityNullWrap .productCarouselViewedCard { display: block; }

/* Заголовок віддає секція recently-viewed — там він `.recently-viewed__title`,
   тож перекриваємо саме його: на колекції той самий вузол має 40/50 із
   полем 76 зліва, а в кошику це 18/24 UPPERCASE з падінгом 15. */
.quantityNullWrap .recently-viewed__title {
  color: #333;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  margin: 0 0 22.5px;
  padding: 0 15px;
  text-transform: uppercase;
}

.quantityNullWrap embla-slider { display: block; position: relative; }
.quantityNullWrap .embla__viewport { overflow: hidden; }
.quantityNullWrap .embla__container { display: flex; }
.quantityNullWrap .recently-viewed__slide { flex: 0 0 55.5556%; min-width: 0; display: flex; }
.quantityNullWrap .recently-viewed__slide .product-card { width: 100%; }
/* `min-height:25vw` (360 на 1440) картка тягне із сітки каталогу, де колонка
   справді 360. У панелі 382 px колонка 212, і підлога роздувала кадр разом
   із карткою: слайд виходив 676 замість донорських 508.47. Кадр тут має
   бути квадратом за шириною слайда, тому підлогу знімаємо. */
.quantityNullWrap .product-card__media-wrap,
.cart-page .quantityNullWrap .product-card__media-wrap { min-height: 0; }
/* У донора в цьому блоці стрілок немає зовсім — карусель гортається змахом. */
.quantityNullWrap [data-embla-prev],
.quantityNullWrap [data-embla-next] { display: none; }

/* Сторінка /cart. Правила порожнього стану вище прив'язані до `.cardWrapper`
   (дравер), тож для сторінки повторюємо саме показ і центрування — решта
   (кнопка, карусель) уже описана селекторами без цього префікса. */
.cart-page .quantityNullWrap { display: flex; flex-direction: column; }
.cart-page .quantityNullWrap .carouselViewedWrapHead {
  align-items: center; display: flex; flex-direction: column; gap: 20px;
  justify-content: center; padding: 40px 0;
}
.cart-page .quantityNullWrap .carouselViewedWrapHead > .text { padding: 0 20%; text-align: center; }
.cart-page .quantityNullWrap .linkWrap { display: inline-flex; }
.cart-page .quantityNullWrap .btn {
  align-items: center; cursor: pointer; display: flex; height: 48px;
  justify-content: center; text-decoration: none; transition: .3s;
  border-radius: 2px; border: 1px solid #333; background: #fff; color: #111;
  padding: 0 20px; gap: 8px;
}
.cart-page .quantityNullWrap .btn:hover { background: #f6f6f6; }
/* §274. Той самий донорський `.btn .text` — порожній кошик на сторінці. */
.cart-page .quantityNullWrap .btn .text { font-size: .9114583333vw; line-height: 1.0416666667vw; white-space: nowrap; }
@media (max-width: 1536px) { .cart-page .quantityNullWrap .btn .text { font-size: 14px; line-height: 16px; } }
/* На широкій сторінці 1.8 картки виглядали б обрізком панелі — тут та сама
   драбина, що й у viewed на колекції. */
.cart-page .quantityNullWrap .recently-viewed__slide { flex: 0 0 58.8235%; }
@media (min-aspect-ratio: 3/4) { .cart-page .quantityNullWrap .recently-viewed__slide { flex: 0 0 37.037%; } }
@media (min-aspect-ratio: 1/1) { .cart-page .quantityNullWrap .recently-viewed__slide { flex: 0 0 30.303%; } }
@media (min-aspect-ratio: 3/2) { .cart-page .quantityNullWrap .recently-viewed__slide { flex: 0 0 23.2558%; } }

/* ---------- рейтинг позиції (донор) ---------- */
.cardWrapper .main .cardProducts .product .infoProduct .productRatingWrap {
  align-items: center; display: flex; gap: .6510416667vw; min-height: 1.0416666667vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts .product .infoProduct .productRatingWrap { gap: 10px; min-height: 16px; }
}
.cardWrapper .main .cardProducts .product .infoProduct .productRatingWrap .stars {
  align-items: center; display: flex; gap: .1953125vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts .product .infoProduct .productRatingWrap .stars { gap: 3px; }
}
/* Зірка — МАСКА, а не картинка: колір заливки міняється класом
   `stars_N` на батькові, тому сам контур мусить бути безбарвним. */
.cardWrapper .main .cardProducts .product .infoProduct .productRatingWrap .stars .item {
  background-color: #dedede;
  background-image: none;
  height: .78125vw;
  width: .78125vw;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m8 2.918 1.208 3.719.113.345h4.273l-3.163 2.299-.294.213.112.346 1.208 3.719-3.163-2.299L8 11.047l-.294.213-3.163 2.299 1.208-3.72.112-.345-.294-.213-3.163-2.299h4.273l.113-.345L8 2.918Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m8 2.918 1.208 3.719.113.345h4.273l-3.163 2.299-.294.213.112.346 1.208 3.719-3.163-2.299L8 11.047l-.294.213-3.163 2.299 1.208-3.72.112-.345-.294-.213-3.163-2.299h4.273l.113-.345L8 2.918Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts .product .infoProduct .productRatingWrap .stars .item { height: 12px; width: 12px; }
}
.cardWrapper .main .cardProducts .product .infoProduct .productRatingWrap .stars.stars_1 .item:nth-of-type(-n+1),
.cardWrapper .main .cardProducts .product .infoProduct .productRatingWrap .stars.stars_2 .item:nth-of-type(-n+2),
.cardWrapper .main .cardProducts .product .infoProduct .productRatingWrap .stars.stars_3 .item:nth-of-type(-n+3),
.cardWrapper .main .cardProducts .product .infoProduct .productRatingWrap .stars.stars_4 .item:nth-of-type(-n+4),
.cardWrapper .main .cardProducts .product .infoProduct .productRatingWrap .stars.stars_5 .item:nth-of-type(-n+5) {
  background-color: #f5b400;
}
.cardWrapper .main .cardProducts .product .infoProduct .productRatingWrap .quantity {
  color: #9c9c9c; font-family: Inter, sans-serif; font-size: .78125vw; font-weight: 400;
  letter-spacing: 0; line-height: .78125vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts .product .infoProduct .productRatingWrap .quantity { font-size: 12px; line-height: 12px; }
}

/* ---------- гарнітура донора в кошику (див. пояснення в header.css) ----------
   Точний перелік його декларацій: заголовок панелі, опція позиції, ціна
   рядка, кнопки підвалу й порожнього екрана. Інпут кількості та бал
   рейтингу вже мають цей стек — вони стоять вище. */
.cardWrapper .head .title .text,
.cardWrapper .main .infoProduct .option,
.cardWrapper .main .cardProducts .product .infoProduct .controls .prise,
.cardWrapper .footer .btn,
.cardWrapper .quantityNullWrap .btn { font-family: Inter, sans-serif; }

/* ---------- карусель переглянутих у порожньому кошику ----------
   Заміряно на донорі: обгортка 382×575.97, слайд 212.22×529.47,
   заголовок 18/700/24 з бічними 15, зірки 72×12 із проміжком 3.

   Наш слайд виходив на 4 px вищим (533.47), і причина не в картці:
   `body` тримає `line-height:1.71`, а в донора тут `normal`. Ті самі
   4 px тягнулися і у висоту обгортки. Скидаємо саме на картці, а не
   глобально — глобальний рядок зачепив би півсайту.

   Карусель у донора — Swiper зі `slidesPerView: 1.8` і БЕЗ freeMode:
   видно 1.8 картки, гортання йде по одній. Стрілок він не малює
   взагалі (`navigation` в ініціалізації не задано, у DOM їх нуль). */
.quantityNullWrap .carouselViewedWrap,
.quantityNullWrap .carouselViewedWrap .embla__slide,
.quantityNullWrap .carouselViewedWrap .product-card { line-height: normal; }

.quantityNullWrap .carouselViewedWrap .recently-viewed__title,
.quantityNullWrap .carouselViewedWrap .reco-band__title {
  /* §291, ЗВІРЕНО НА 1440 І 1920 (дравер донора, стан порожнього кошика):
     заголовок тече, і ДВОМА різними способами одразу —
       кегль 18 → 22.5 і рядок 24 → 30 — відношення 1.25, тобто пара з
         гілкою `@media ≤1536`;
       бічний падінг 15 → 20 — відношення 1.333, тобто чистий `vw` БЕЗ гілки.
     Було все три сталими. */
  font-size: 1.171875vw;
  font-weight: 700;
  line-height: 1.5625vw;
  padding: 0 1.0416666667vw;
  margin: 0;
  text-align: left;
  text-transform: none;
}
/* Зірки в кошиковій картці дрібніші за каталожні: 12 px замість 16 */
.quantityNullWrap .carouselViewedWrap .stars { gap: 3px; }
.quantityNullWrap .carouselViewedWrap .stars .item,
.quantityNullWrap .carouselViewedWrap .stars span { width: 12px; height: 12px; }

/* ---------- ширина слайда й стрілки каруселі в дравері ----------
   Донор показує 1.8 картки на 382 px панелі — звідси слайд 212.22.
   Embla ширину не задає, тож ставимо її тут; ділення 382/1.8 дає рівно
   донорське число, тому пишемо часткою, а не «на око». */
.quantityNullWrap .carouselViewedWrap .embla__slide {
  flex: 0 0 auto;
  width: 55.5555%;
  padding-right: 0;
}
/* Розділових ліній між картками в донора немає (пункт 112) */
.quantityNullWrap .carouselViewedWrap .embla__slide,
.quantityNullWrap .carouselViewedWrap .product-card { border: 0; }

/* Стрілки (пункт 111) — СВІДОМЕ ВІДХИЛЕННЯ: у донора їх немає взагалі,
   `navigation` в його ініціалізації Swiper не заданий. Замовив користувач.
   Вигляд тримаємо стриманий, щоб не сперечатися з карткою. */
.quantityNullWrap .carouselViewedWrap [data-embla-prev],
.quantityNullWrap .carouselViewedWrap [data-embla-next] {
  align-items: center;
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 50%;
  color: #111;
  cursor: pointer;
  display: flex;
  font-size: 18px;
  height: 32px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  top: 40%;
  width: 32px;
  z-index: 2;
}
.quantityNullWrap .carouselViewedWrap [data-embla-prev] { left: 6px; }
.quantityNullWrap .carouselViewedWrap [data-embla-next] { right: 6px; }
.quantityNullWrap .carouselViewedWrap [data-embla-prev]:disabled,
.quantityNullWrap .carouselViewedWrap [data-embla-next]:disabled { opacity: .3; pointer-events: none; }
.quantityNullWrap .carouselViewedWrap { position: relative; }

/* ---------- крос-сел «Also pay attention to» ----------
   ЦЕЙ БЛОК ПРАВИЛ БІЛЬШЕ НЕ СТОСУЄТЬСЯ ДРАВЕРА. Він лишається для двох
   інших місць, де стара форма справді жива: сторінка кошика
   (`main-cart.liquid`) і чекаут (`main-checkout.liquid`, там розмітка з
   `.alsoAttentionTitle`, і на неї спирається `checkout.css`). У дравері
   вузол більше не несе класу `alsoAttention` — див. пояснення в
   `sections/cart-drawer.liquid`.

   ЩО ТУТ БУЛО НАПИСАНО НЕПРАВДИВО. Стояло, що донор цей блок у дравері
   вимикає назавжди (`display:none!important`) і живим він буває лише на
   чекауті, тож вигляд треба брати звідти — рамки й падінг 16/32. Це
   половина правди: вимкнена в нього СТАРА форма `.alsoAttention`
   (заміряно на живому дравері — 0×0, `display:none`). НОВУ,
   `.cardProductsAttentionWrap`, він у дравері показує: 382×600, падінг
   14/8, без рамок, усередині скролера `.cardProducts`.

   Саме через цю помилку блок у нас стояв поза `.main` з падінгом 32 і
   рамками, з'їдав усю висоту й гасив список товарів. Правила нижче
   лишились незмінені — вони й далі правильні для кошика й чекауту. */
.cardWrapper .alsoAttention {
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  flex: 0 0 auto;
  padding: 1.0416666667vw 2.0833333333vw;
}
@media (max-width: 1536px) {
  .cardWrapper .alsoAttention { padding: 16px 32px; }
}
.cardWrapper .alsoAttention.hide { display: none; }
/* §274. Три донорські пари в одному правилі: кегль `.9114583333vw`, крок
   `1.0416666667vw`, поле `1.0416666667vw` — усі з гілкою
   `@media ≤1536 {14px / 16px / 16px}`. Стояли самі піксельні половини. */
.cardWrapper .alsoAttention .alsoAttentionTitle {
  color: #111;
  font-size: .9114583333vw;
  font-weight: 700;
  line-height: 1.0416666667vw;
  margin-bottom: 1.0416666667vw;
}
@media (max-width: 1536px) {
  .cardWrapper .alsoAttention .alsoAttentionTitle { font-size: 14px; line-height: 16px; margin-bottom: 16px; }
}
/* Коротке вікно — донор підтискає блок (його ж правило) */
@media screen and (max-height: 700px) {
  .cardWrapper .alsoAttention { padding: 8px 32px; }
  .cardWrapper .alsoAttention .alsoAttentionTitle { margin-bottom: 8px; }
}

/* ---------- §205. Стрічка мінікарток ----------
   БУЛО: `grid-auto-flow: column; grid-auto-columns: 46%` — горизонтальний
   скрол із двох повних `product-card`. Заміряно на живій темі: смуга
   **358×691** на 1440, бо в неї клали картку каталогу з фото 165, зірками,
   описом і кнопкою.

   СТАЛО: форма донора. Його рядок — двоколонкова сітка «фото 52 | текст»
   з падінгом 14, тобто ≈80 px заввишки; карусель — Swiper БЕЗ
   `slidesPerView` (типове 1), `spaceBetween: 30`, `loop`, автоплей 5 с.
   Конфіг знятий із його `/js/checkontEU.js`:
       new Swiper(".alsoAttentionWrap", { spaceBetween:30, loop:!0,
                                          autoplay:{ delay:5e3, ... } })
   Тому слайд тут на всю ширину кадру, а не 46 %. Проміжок 30 — це і є
   його `spaceBetween`. */
.cardWrapper .alsoAttentionWrap .embla__viewport { overflow: hidden; }
.cardWrapper .alsoAttentionWrap .embla__container { display: flex; }
.cardWrapper .alsoAttentionWrap .embla__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding-right: 30px;   /* spaceBetween: 30 донора */
}

/* Донорські правила рядка, дослівно */
.cardWrapper .alsoAttentionWrap .product {
  display: grid;
  grid-gap: 1.0416666667vw;
  grid-template-columns: 3.3854166667vw 1fr;
  padding: .9114583333vw;
  position: relative;
}
@media (max-width: 1536px) {
  .cardWrapper .alsoAttentionWrap .product { grid-gap: 16px; grid-template-columns: 52px 1fr; padding: 14px; }
}
.cardWrapper .alsoAttentionWrap .product .infoProduct .controls { justify-content: flex-end; }

/* Назва: правил для `.infoProduct .name` поза `.nameWrap` у донора НЕМАЄ
   (0 збігів у його CSS), тобто мінікартку він малює базовим посиланням.
   Беремо типографіку рядка кошика — найближче з наявного. */
.cardWrapper .alsoAttentionWrap .product .infoProduct .name a {
  color: #111;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  text-decoration: none;
}
.cardWrapper .alsoAttentionWrap .product .infoProduct .name a:hover { text-decoration: underline; }

/* `.info` і кнопка «Add» — теж його правила */
.cardWrapper .main .infoProduct .info { display: flex; align-items: center; gap: .5208333333vw; }
@media (max-width: 1536px) { .cardWrapper .main .infoProduct .info { gap: 8px; } }
.cardWrapper .main .infoProduct .controls .addToCard {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .9114583333vw;
  line-height: 1.0416666667vw;
  margin: 0;
  padding: 0;
  text-align: center;
  transition: .3s;
}
@media (max-width: 1536px) {
  .cardWrapper .main .infoProduct .controls .addToCard { font-size: 14px; line-height: 16px; }
}
.cardWrapper .main .infoProduct .controls .addToCard { color: #111; }
.cardWrapper .main .infoProduct .controls .addToCard:hover { text-decoration: underline; }
.cardWrapper .main .infoProduct .controls .soldOut { color: #999; font-size: 14px; line-height: 16px; }

/* §172 у новій формі картки: промо-плашка поруч із ціною. Зменшена копія
   плашки зі сторінки товару, як і в `product-card` (там `.product-card__promo`). */
.cardWrapper .alsoAttentionWrap .crossSellPromo {
  background: #000;
  border-radius: 2px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  padding: 1px 6px;
  white-space: nowrap;
}

/* §291. Піксельна половина пари для заголовка каруселі в порожньому кошику.
   У кінці файлу — тобто ПІСЛЯ свого правила. Падінг сюди НЕ входить: у
   донора він чистий vw, гілки на 1536 для нього немає. */
@media (max-width: 1536px) {
  .quantityNullWrap .carouselViewedWrap .recently-viewed__title,
  .quantityNullWrap .carouselViewedWrap .reco-band__title { font-size: 18px; line-height: 24px; }
}

/* ================= §333. ПРОМОКОД І «НЕ ТЕЛЕФОНУВАТИ» В ДРАВЕРІ =================
   Перенесені зі сторінки кошика: дравер став єдиним кошиком, а з нього
   людина йде одразу в чекаут.

   Рядок один на два елементи — це рішення про ВИСОТУ. Стосом тригер (16) і
   чекбокс із приміткою (72.73) забирали б 112.73 px у списку товарів, тобто
   при `.main` 522 і рядку 154 видимих позицій ставало б 2 замість 3. Разом
   вони коштують 16.

   `flex-wrap: wrap` — не косметика, а запасний шлях для довших мов: підпис
   «Промокод» + вміст чекбокса дають ~277 із 358 доступних на мобілці, але
   польська й німецька довші, і при переповненні рядок має розкластись на
   два, а не виштовхнути чекбокс за край. */
.cardWrapper .cartDrawerOpts {
  /* §335. Тригер промокоду й «do not call» — СТРОГО в один рядок.
     `wrap` лишав їх на різних рівнях, і власник це побачив. `baseline`,
     а не `center`: у чекбокса під ним може стояти примітка, і рівняння
     по центру блока опустило б тригер нижче за сам чекбокс. Базова лінія
     рівняє саме текст із текстом — те, що читається як «один рівень». */
  display: flex; flex-wrap: nowrap; align-items: baseline;
  gap: 8px 12px; margin: 12px 0;
}
/* Обидва елементи в рядку — блокові за замовчуванням, тож без цього
   `cart-options` розпирало б на всю ширину і тригер лишався б сам. */
.cardWrapper .cartDrawerOpts > .promo-gift,
.cardWrapper .cartDrawerOpts > cart-options { flex: 0 1 auto; margin: 0; min-width: 0; }
/* Тригер не стискаємо: підпис короткий, а обрізаний він виглядав би поломкою. */
.cardWrapper .cartDrawerOpts > .promo-gift { flex: 0 0 auto; }

/* Тригер: «мала кнопка з підкресленням» дослівно за описом власника. */
.cardWrapper .promoToggle {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #111; font: inherit; font-size: 14px; line-height: 16px;
  text-decoration: underline; text-underline-offset: 2px;
}
.cardWrapper .promoToggle:hover { opacity: .7; }

/* Згорнутий стан: полів немає в потоці зовсім, не просто приховані —
   інакше вони резервували б висоту, заради економії якої все й робиться. */
.cardWrapper .promo-gift--collapsible .promoInputsContent { display: none; }
/* Відкритий: тригер зникає (поле саме є ознакою стану), а блок забирає
   весь рядок і лягає під чекбокс, не стискаючи його. */
.cardWrapper .promo-gift--collapsible.is-open { flex: 1 1 100%; order: 2; }
/* nowrap з §335 тримав відкрите поле в одному рядку з чекбоксом (код обрізався) - відкрите переносимо. */
.cardWrapper .cartDrawerOpts:has(> .promo-gift--collapsible.is-open) { flex-wrap: wrap; }
.cardWrapper .cartDrawerOpts .promoInputGroup .inputGr { flex: 1 1 0; }
.cardWrapper .cartDrawerOpts .promoInputGroup .btn { flex: 0 0 auto; width: auto; }
/* Згорнутий тригер - до правого краю, на базовій лінії тексту галочки. */
.cardWrapper .cartDrawerOpts > .promo-gift--collapsible:not(.is-open) { margin-left: auto; padding-left: 12px; }
.cardWrapper .promo-gift--collapsible.is-open .promoToggle { display: none; }
.cardWrapper .promo-gift--collapsible.is-open .promoInputsContent { display: block; margin: 0; }

/* Кнопка чекауту — форма не має додавати власних відступів навколо. */
.cardWrapper .cart-drawer__checkout { display: block; margin: 0; }
.cardWrapper .cart-drawer__checkout .toOrder { width: 100%; }

/* Примітка під чекбоксом — текст власника, тому не вирізаємо, а ховаємо
   там, де вона коштує позицію кошика: 50.5 px на мобілці це рівно один
   рядок товару зі 154. На десктопі місця вистачає, і вона лишається. */
@media (max-width: 768px) {
  .cardWrapper .cart-options__note { display: none; }
}


/* §336. Підвал дравера на мобілці: відступи між кнопками врізані.

   Заміряно при 390 до правки: підвал 388×276 із 844 екрана, тобто майже
   третина вікна під три елементи. Проміжки: сума 16/16, кнопка чекауту
   16 знизу, рядок опцій 12/12 — разом 72 px повітря на 116 px змісту.

   Ріжемо саме ПОВІТРЯ, а не самі кнопки: висоту 48 лишаємо. Менше 44 px
   палець уже не влучає впевнено, і це та економія, за яку потім платить
   людина, а не макет. Виграні 32 px ідуть у видиму частину списку товарів. */
@media (max-width: 768px) {
  .cardWrapper .footer .sum { margin: 8px 0; }
  .cardWrapper .footer .cartDrawerOpts { margin: 8px 0; }
  .cardWrapper .footer .cart-drawer__checkout { margin-bottom: 8px; }
  .cardWrapper .footer [name='checkout'] { margin-bottom: 0; }
}


/* §339. Підпис «do not call» у дравері — дрібніший за тригер промокоду.

   Прохання власника. Це другорядна службова позначка, а не дія, тож вона
   й не має важити стільки ж, скільки клікабельний тригер поруч (14/16).
   Різниця в один крок: 13/14. Менше не беремо — 12 px на телефоні вже
   читається з натугою, а текст тут людина справді читає, а не впізнає. */
@media (max-width: 768px) {
  .cardWrapper .cartDrawerOpts .cart-options__row {
    font-size: 13px;
    line-height: 14px;
  }
}

/* ---------- cart-gift-ladder.css ---------- */
/* ДРАБИНА ПОДАРУНКІВ у шапці шухляди кошика (snippets/cart-gift-ladder.liquid).

   Числа з макета: нода 2182:20874 (Progress Bar) у кадрах 2182:20681
   (десктоп) і 2182:20657 (мобілка), файл NJuUg48Ow6TuY6tyGfcmyC.
   Картка 358x92, усередині колонка з кроком 16; сама смуга 330x36, де
   верхні 16 - чипи з порогами, нижні 16 - підписи сум.

   ПРО ПАДІНГ 11/13, А НЕ 12/14. У Figma обводка намальована ВСЕРЕДИНІ
   рамки й ширини не їсть: при картці 358 і падінгу 14 вміст виходить 330.
   У CSS рамка ширину їсть (border-box), тому 14 давали 328 і висоту 94
   замість 92. Віднімаємо рамку з падінга - і картка сходиться з макетом
   до пікселя, а видимий просвіт від лінії до тексту лишається тим самим.

   Позиції порогів і заливка рахуються в ліквіді за формулою живого укр
   сайту (12% / 47% / 82%), і макет її підтверджує: у ньому чипи стоять
   на 11.8 / 47.3 / 82.1 відсотка.

   База vw - 1920, як у решти шухляди: піксельна гілка (<=1536) рівно
   в 1.25 раза менша. Мобілка ділить піксельну гілку з десктопом, бо 390
   менше за 1536; окремо в неї лише поля картки.

   Окремий файл, а не доважок до `cart-sheet.css`: драбина - самостійний
   блок зі своїм джерелом чисел, і подарунок за таймером (`cart-gift.css`)
   її не торкається. */

/* Картка-смуга. `flex: 0 0 auto` - бо `.main` у нас флекс-колонка, і без
   цього картку стискає скрол товарів. Порожній кошик ховає всю `.main`
   (`cart-drawer.css`, `.cardWrapper.quantityNull .main`), тож свого правила
   на порожній стан тут не треба. */
.cardWrapper .main .statusInfoWrap {
  background: #fff;
  border: 1px solid #dadada;
  border-radius: .9114583333vw;
  display: block;
  flex: 0 0 auto;
  margin: 1.0416666667vw 1.5625vw;
  padding: .7161458333vw .8463541667vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .statusInfoWrap {
    border-radius: 14px;
    margin: 16px 24px;
    padding: 11px 13px;
  }
}
/* Мобілка: поля картки 16, а вертикальний крок у макеті 24. */
@media (max-width: 768px) {
  .cardWrapper .main .statusInfoWrap { margin: 24px 16px; }
}

/* Рядок стану доставки. Значок стоїть ПЕРЕД текстом - так у макеті і так
   вимагає власник для польського ринку. На євро-ринку рядка просто немає:
   ліквід його не виводить, поки в адмінці не ввімкнули. */
.cardWrapper .main .statusInfoWrap_info {
  align-items: center;
  color: #111;
  display: flex;
  font-size: .78125vw;
  font-weight: 400;
  gap: .2604166667vw;
  letter-spacing: .2px;
  line-height: 1.0416666667vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .statusInfoWrap_info { font-size: 12px; gap: 4px; line-height: 16px; }
}
.cardWrapper .main .statusInfoWrap_info svg {
  display: block;
  flex: 0 0 auto;
  height: 1.0416666667vw;
  width: 1.0416666667vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .statusInfoWrap_info svg { height: 16px; width: 16px; }
}
/* Сума «ще стільки» загорнена в <b>, але жирною не стає: рядок читається
   як одне речення, а не як цінник. */
.cardWrapper .main .statusInfoWrap_info b { font-weight: inherit; }

/* Смуга. 36 заввишки: верхні 16 - чипи, нижні 16 - підписи сум, між ними 4. */
.cardWrapper .main .statusInfoWrap_track {
  height: 2.34375vw;
  margin-top: 1.0416666667vw;
  position: relative;
}
@media (max-width: 1536px) {
  .cardWrapper .main .statusInfoWrap_track { height: 36px; margin-top: 16px; }
}
/* Без порогів підписів сум нема, тож нижні 16 смузі ні до чого. */
.cardWrapper .main .statusInfoWrap:not(.withSteps) .statusInfoWrap_track { height: 1.171875vw; }
@media (max-width: 1536px) {
  .cardWrapper .main .statusInfoWrap:not(.withSteps) .statusInfoWrap_track { height: 18px; }
}

/* Без рядка доставки (євро-ринок із вимкненим налаштуванням) верхній
   відступ смузі нема від чого відбивати - картка інакше кособока. */
.cardWrapper .main .statusInfoWrap.noDelivery .statusInfoWrap_track { margin-top: 0; }

/* Лінія стоїть по центру верхніх 16, тобто на 8 від верху смуги. */
.cardWrapper .main .statusInfoWrap_line {
  background: #f6f5f3;
  border-radius: 999px;
  height: .2604166667vw;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: .5208333333vw;
  transform: translateY(-50%);
}
@media (max-width: 1536px) {
  .cardWrapper .main .statusInfoWrap_line { height: 4px; top: 8px; }
}
.cardWrapper .main .statusInfoWrap_line span { background: #beee91; display: block; height: 100%; }

/* Поріг: чип над лінією і сума під нею, однією колонкою по центру позиції.
   `translateX(-50%)` ставить центр чипа рівно на свій відсоток. */
.cardWrapper .main .statusInfoWrap_step {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: .2604166667vw;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}
@media (max-width: 1536px) {
  .cardWrapper .main .statusInfoWrap_step { gap: 4px; }
}

/* Чип 32 з макета як мінімум. Довгий власний підпис ланки чип розширює -
   тож підписи варто тримати короткими, інакше на близьких порогах сусідні
   чипи зійдуться. */
.cardWrapper .main .statusInfoWrap_gift {
  align-items: center;
  background: #f6f5f3;
  border-radius: .5208333333vw;
  color: #9c9c9c;
  display: flex;
  font-size: .5859375vw;
  font-weight: 700;
  gap: .0651041667vw;
  height: 1.0416666667vw;
  justify-content: center;
  line-height: 1;
  /* Ширина - МІНІМУМ 32 з макета, а не жорстка: власник задає свій підпис
     на кожну ланку («2 gifts», «2 prezenty»), і жорсткі 32 його різали.
     Короткі чипи («+2», «-10%») лишаються рівно 32. */
  min-width: 2.0833333333vw;
  padding: 0 .2604166667vw;
  white-space: nowrap;
  width: auto;
}
@media (max-width: 1536px) {
  .cardWrapper .main .statusInfoWrap_gift {
    border-radius: 8px;
    font-size: 9px;
    /* 1 - як у макеті: іконка й «+2» стоять упритул. */
    gap: 1px;
    height: 16px;
    min-width: 32px;
    padding: 0 4px;
  }
}
.cardWrapper .main .statusInfoWrap_gift svg {
  display: block;
  flex: 0 0 auto;
  height: .6510416667vw;
  width: .6510416667vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .statusInfoWrap_gift svg { height: 10px; width: 10px; }
}

.cardWrapper .main .statusInfoWrap_price {
  color: #9c9c9c;
  font-size: .78125vw;
  letter-spacing: .5px;
  line-height: 1.0416666667vw;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 1536px) {
  .cardWrapper .main .statusInfoWrap_price { font-size: 12px; line-height: 16px; }
}

/* Набраний поріг: чип зеленіє, цифри чорніють. Те саме робить кружок
   доставки, коли сума доросла до безкоштовної. */
.cardWrapper .main .statusInfoWrap_step.active .statusInfoWrap_gift { background: #beee91; color: #161616; }
.cardWrapper .main .statusInfoWrap_step.active .statusInfoWrap_price { color: #161616; }

/* Кружок доставки: 18 на 18, по центру лінії, тобто на 1 вище за чипи. */
.cardWrapper .main .statusInfoWrap_finish {
  align-items: center;
  background: #f6f5f3;
  border-radius: 50%;
  color: #9c9c9c;
  display: flex;
  height: 1.171875vw;
  justify-content: center;
  position: absolute;
  right: 0;
  top: -.0651041667vw;
  width: 1.171875vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .statusInfoWrap_finish { height: 18px; top: -1px; width: 18px; }
}
.cardWrapper .main .statusInfoWrap_finish svg {
  display: block;
  height: .6510416667vw;
  width: .6510416667vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .statusInfoWrap_finish svg { height: 10px; width: 10px; }
}
.cardWrapper .main .statusInfoWrap_finish.active { background: #beee91; color: #161616; }

/* Точка доставки на смузі - кругла 18x18, як «Check Dot» у макеті 2182:20667:
   сіра з сірою вантажівкою, поки поріг не взято, зелена з темною - коли взято.
   Стоїть за своїм порогом, тобто при «доставка з 0» - на самому початку. */
.cardWrapper .main .statusInfoWrap_step--ship .statusInfoWrap_gift {
  border-radius: 50%;
  height: 1.171875vw;
  margin-top: -.0651041667vw;
  min-width: 0;
  padding: 0;
  width: 1.171875vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .statusInfoWrap_step--ship .statusInfoWrap_gift { height: 18px; margin-top: -1px; width: 18px; }
}
.cardWrapper .main .statusInfoWrap_step--ship .statusInfoWrap_gift svg { height: .6510416667vw; width: .6510416667vw; }
@media (max-width: 1536px) {
  .cardWrapper .main .statusInfoWrap_step--ship .statusInfoWrap_gift svg { height: 10px; width: 10px; }
}

/* Півширини першої точки: від неї рахуються позиції всіх точок, щоб перша
   стояла впритул до лівого краю смуги (сніпет пише calc() від --c0).
   Чип 32 -> 16, кружок доставки 18 -> 9. */
.cardWrapper .main .statusInfoWrap_track { --c0: 1.0416666667vw; }
.cardWrapper .main .statusInfoWrap_track--ship0 { --c0: .5859375vw; }
@media (max-width: 1536px) {
  .cardWrapper .main .statusInfoWrap_track { --c0: 16px; }
  .cardWrapper .main .statusInfoWrap_track--ship0 { --c0: 9px; }
}

/* ---------- cart-gift.css ---------- */
/* Подарунок від суми з таймером у дравері кошика.
   Макет: 2096:16991 (дравер) і 2096:16789 (сам рядок, мобілка).

   Рядок навмисно НЕ успадковує .cardProducts .product: у макета в нього
   своя підкладка, рамка і скруглення, а всередині немає ні лічильника
   кількості, ні кнопки видалення. Тягнути сюди сітку товару означало б
   потім половину її відмикати.

   Розміри в vw рахуються від 1920 (як решта дравера), на 1536 і нижче -
   пікселі з макета. */

.cardWrapper .main .cardProducts .cartGift { display: block; }
.cardWrapper .main .cardProducts .cartGift[hidden] { display: none; }

/* Поля з боків: у макеті (2166:17725) фото подарунка стоїть на 8 від краю
   картки, а фото звичайного рядка - на 0 від краю списку. У нашому дравері
   звичайний рядок має власний падінг .9114583333vw (14 px), тож картці
   лишається різниця, мінус 1 px власної рамки, - інакше вона впирається в
   край шухляди, а фото всіх рядків стоять по різних вертикалях. */
.cardWrapper .main .cardProducts .cartGift__row {
  align-items: flex-start;
  background: #e0e7ff;
  border: 1px solid #9ab0fd;
  border-radius: .5208333333vw;
  display: flex;
  gap: .625vw;
  /* Зверху - відступ, інакше картка впирається в шапку шухляди. */
  margin: .625vw calc(.4947916667vw - 1px) 0;
  padding: .4166666667vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts .cartGift__row {
    border-radius: 10px;
    gap: 12px;
    margin: 12px 5px 0;
    padding: 8px;
  }
}

.cardWrapper .main .cardProducts .cartGift__photo {
  border-radius: .4166666667vw;
  flex-shrink: 0;
  height: 5vw;
  overflow: hidden;
  width: 4.1666666667vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts .cartGift__photo { border-radius: 8px; height: 96px; width: 80px; }
}
.cardWrapper .main .cardProducts .cartGift__photo img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* min-width: 0 - інакше довга назва розпирає флекс і обрізання не спрацьовує */
.cardWrapper .main .cardProducts .cartGift__info {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  height: 5vw;
  justify-content: space-between;
  min-width: 0;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts .cartGift__info { height: 96px; }
}

.cardWrapper .main .cardProducts .cartGift__head {
  align-items: center;
  display: flex;
  gap: .2083333333vw;
  min-width: 0;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts .cartGift__head { gap: 4px; }
}

.cardWrapper .main .cardProducts .cartGift__icon {
  color: #ff5c42;
  display: block;
  flex-shrink: 0;
  height: .7291666667vw;
  width: .7291666667vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts .cartGift__icon { height: 14px; width: 14px; }
}
.cardWrapper .main .cardProducts .cartGift__icon svg { display: block; height: 100%; width: 100%; }

.cardWrapper .main .cardProducts .cartGift__name {
  color: #111;
  font-size: .7291666667vw;
  font-weight: 700;
  line-height: 1.0416666667vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts .cartGift__name { font-size: 14px; line-height: 20px; }
}

.cardWrapper .main .cardProducts .cartGift__note {
  color: #6c6c6c;
  font-size: .625vw;
  letter-spacing: .2px;
  line-height: .8333333333vw;
  margin: .1041666667vw 0 0;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts .cartGift__note { font-size: 12px; line-height: 16px; margin-top: 2px; }
}

.cardWrapper .main .cardProducts .cartGift__bottom {
  align-items: center;
  display: flex;
  gap: .625vw;
  justify-content: space-between;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts .cartGift__bottom { gap: 12px; }
}

.cardWrapper .main .cardProducts .cartGift__prise {
  align-items: center;
  display: flex;
  gap: .3125vw;
  font-size: .7291666667vw;
  line-height: 1.0416666667vw;
  min-width: 0;
  white-space: nowrap;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts .cartGift__prise { font-size: 14px; gap: 6px; line-height: 20px; }
}
.cardWrapper .main .cardProducts .cartGift__prise .old { color: #b4b4b4; text-decoration: line-through; }
.cardWrapper .main .cardProducts .cartGift__prise .new { color: #ff5c42; font-weight: 700; }

/* Відлік: ширина зафіксована під «00:00», інакше кожна зміна секунди
   смикає рядок із ціною - цифри в цьому шрифті різної ширини. */
.cardWrapper .main .cardProducts .cartGift__timer {
  background: #9ab0fd;
  border-radius: .3125vw;
  color: #fff;
  flex-shrink: 0;
  font-size: .7291666667vw;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.0416666667vw;
  padding: .1041666667vw .3125vw;
  text-align: center;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts .cartGift__timer {
    border-radius: 6px;
    font-size: 14px;
    line-height: 20px;
    padding: 2px 6px;
  }
}

/* На мобілці рядок лишається тим самим: у макеті 2166:17717 це той самий
   блок 358 завширшки, тож окремих розмірів тут не треба - вистачає
   піксельної гілки вище.

   Лінії під подарунком немає: у макеті рядки розділені нею між собою, але
   картку подарунка відділяє власна рамка, і друга межа поряд із нею читається
   як помилка. `.product` малює `border-top` усім, крім першого, тож тут його
   знімаємо вручну. */
.cardWrapper .main .cardProducts .cartGift + .product { border-top: none; }

/* ---------- cart-packages.css ---------- */
/* §257 + §259. Подарункове пакування - кнопка в підвалі кошика і попап.
   Попап з 23.10 перероблено за макетом Figma (`.pkgSheet`, див. нижче); донорські
   правила попапа прибрано разом зі старою розміткою. Блок нижче про донора
   стосується лише кнопки «Add gift packaging».

   ЗВІДКИ ЩО ВЗЯТО. Правила попапа (`.packagesModalWrap`, `.productCarousel`,
   `.head`, `.cardItem__product`, `.blurAvailability`) — донорські, зняті з
   його `home.css` разом із брейкпоінтами.

   А от КНОПКИ й плитки `.hover` у донора не існує як стилю: у всій його
   таблиці рівно одне правило про ці класи —
   `.cardWrapper .footer .promoBlock{display:none}` — і воно ховає весь блок
   і в шухляді, і на чекауті (перевірено на живому сайті: бокс 0×0). Тобто
   копіювати нема чого, і ці кілька правил дописані мною в його мові:
   рамка 1px #333, радіус 2, висота 40 і `.btn__white` — як у решти його
   кнопок. Позначено, щоб ніхто потім не шукав оригінал.
   ─────────────────────────────────────────────────────────────────────── */

/* ---------- кнопка «Add gift packaging» ---------- */
.packages { margin-bottom: 8px; }
.packages .packageOptionHead {
  align-items: center;
  background: #fff;
  border: 1px solid #333;
  border-radius: 2px;
  color: #111;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 14px;
  height: 40px;
  justify-content: center;
  line-height: 16px;
  padding: 0 10px;
  transition: .3s;
  width: 100%;
}
.packages .packageOptionHead:hover { background: #f6f6f6; }
/* Іконка й відступ — з inline-стилю самого донора: width:20 height:22
   margin-right:4. Файл його ж, `/assets/ignor/packaging.svg`, інлайном. */
.packages .packageOptionIcon {
  background: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2222%22%20viewBox%3D%220%200%2020%2022%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M16.6654%2010.083V17.4163C16.6654%2017.9026%2016.4898%2018.3689%2016.1772%2018.7127C15.8646%2019.0565%2015.4407%2019.2497%2014.9987%2019.2497H4.9987C4.55667%2019.2497%204.13275%2019.0565%203.82019%2018.7127C3.50763%2018.3689%203.33203%2017.9026%203.33203%2017.4163V10.083%22%20stroke%3D%22%23474B50%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M6.2513%206.41675C5.69877%206.41675%205.16886%206.1753%204.77816%205.74553C4.38746%205.31576%204.16797%204.73287%204.16797%204.12508C4.16797%203.51729%204.38746%202.93439%204.77816%202.50462C5.16886%202.07485%205.69877%201.83341%206.2513%201.83341C7.05521%201.818%207.84299%202.24706%208.51192%203.06464C9.18084%203.88222%209.69987%205.05037%2010.0013%206.41675C10.3027%205.05037%2010.8218%203.88222%2011.4907%203.06464C12.1596%202.24706%2012.9474%201.818%2013.7513%201.83341C14.3038%201.83341%2014.8337%202.07485%2015.2244%202.50462C15.6151%202.93439%2015.8346%203.51729%2015.8346%204.12508C15.8346%204.73287%2015.6151%205.31576%2015.2244%205.74553C14.8337%206.1753%2014.3038%206.41675%2013.7513%206.41675%22%20stroke%3D%22%23474B50%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M16.6667%206.41699H3.33333C2.8731%206.41699%202.5%206.8274%202.5%207.33366V9.167C2.5%209.67326%202.8731%2010.0837%203.33333%2010.0837H16.6667C17.1269%2010.0837%2017.5%209.67326%2017.5%209.167V7.33366C17.5%206.8274%2017.1269%206.41699%2016.6667%206.41699Z%22%20stroke%3D%22%23474B50%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3C%2Fsvg%3E") 50% / contain no-repeat;
  display: block;
  height: 22px;
  margin-right: 4px;
  width: 20px;
}

/* ---------- попап «Оберіть упаковку» ----------
   Макет: Figma «work in progress (Copy)», сторінка cards, секція 2243:42935.
   Деск - нода 2243:43052 (600 × 474, модалка по центру), моб - 2243:42959
   (390 × 398, аркуш знизу). Усі числа нижче - з дерева макета (./fg tree).
   Класи нові (`pkgSheet`), щоб не зачепити `.modal` з base.css і донорські
   `.productCarousel`/`.packagesModalWrap` у fix-chrome.css. */
.pkgSheet {
  position: fixed; inset: 0; z-index: 9999999999999;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  visibility: hidden; pointer-events: none;
  font-family: PCTL9600, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #111;
  transition: visibility 0s linear .25s;
}
.pkgSheet.is-open { visibility: visible; pointer-events: auto; transition: none; }

/* підкладка: Container 2243:43051 / 2243:42958 - #111 з прозорістю .42, без блюру */
.pkgSheet__overlay {
  position: absolute; inset: 0;
  background: rgba(17, 17, 17, .42);
  opacity: 0; transition: opacity .25s ease;
}
.pkgSheet.is-open .pkgSheet__overlay { opacity: 1; }

/* Modal container: VERTICAL, gap 24, padding 36/40/40/40, радіус 24, #f6f6f6 */
.pkgSheet__panel {
  position: relative;
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: 24px;
  width: 600px; max-width: 100%;
  max-height: 100%; overflow-x: hidden; overflow-y: auto;
  padding: 36px 40px 40px;
  background: #f6f6f6; border-radius: 24px;
  opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.pkgSheet.is-open .pkgSheet__panel { opacity: 1; transform: none; }
.pkgSheet__panel:focus { outline: none; }

/* Modal Header: VERTICAL, gap 16; верхній рядок - назва + хрестик, SPACE_BETWEEN */
.pkgSheet__head { display: flex; flex-direction: column; gap: 16px; }
.pkgSheet__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
/* Modal Title: 32/36, 700, трекінг -0.5px */
.pkgSheet__title {
  margin: 0; padding: 0;
  font-family: inherit; font-size: 32px; font-weight: 700; line-height: 36px;
  letter-spacing: -.5px; text-transform: none; color: #111;
}
/* Close Button: 32 × 32, радіус 14, гліф 10 × 10 у фреймі 12, обведення 1.4 */
.pkgSheet__close {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; margin: 0;
  border: 0; border-radius: 14px; background: transparent; color: #111;
  cursor: pointer; transition: background-color .2s ease;
}
.pkgSheet__close svg { display: block; width: 12px; height: 12px; }
@media (hover: hover) { .pkgSheet__close:hover { background: rgba(17, 17, 17, .06); } }
/* Modal Description: 16/24, 400, #6c6c6c */
.pkgSheet__note { margin: 0; font-size: 16px; font-weight: 400; line-height: 24px; color: #6c6c6c; }

/* Ряд плиток: HORIZONTAL, gap 13, плитка 150 × 150, радіус 10.
   У макеті ряд виходить за правий падінг до краю модалки (остання плитка
   обрізана краєм), тому трек виходить на 40 праворуч і має такий самий
   внутрішній запас, щоб остання плитка доїжджала до падінга. */
.pkgSheet__track {
  display: flex; gap: 13px;
  margin-right: -40px; padding-right: 40px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-padding-right: 40px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.pkgSheet__track::-webkit-scrollbar { display: none; }
.pkgSheet__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.pkgSheet__track.is-dragging .pkgSheet__tile { pointer-events: none; }

.pkgSheet__tile {
  position: relative; flex: 0 0 150px;
  width: 150px; height: 150px; padding: 0; margin: 0;
  border: 0; border-radius: 10px; overflow: hidden;
  background: #fff; cursor: pointer;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
}
.pkgSheet__tile img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-user-drag: none; user-select: none;
}
/* State=Selected: обведення 2 всередину, #dadada. Окремим шаром над фото,
   бо inset-тінь самої кнопки лягла б під зображення. */
.pkgSheet__tile::after {
  content: ""; position: absolute; inset: 0;
  border: 2px solid transparent; border-radius: inherit;
  pointer-events: none; transition: border-color .2s ease;
}
.pkgSheet__tile.is-selected::after { border-color: #dadada; }
.pkgSheet__tile:focus-visible { outline: 2px solid #111; outline-offset: -2px; }

/* Selected Detail: HORIZONTAL SPACE_BETWEEN, padding 16, радіус 10, білий.
   Назва 14/20 400, ціна 14/20 700. */
.pkgSheet__detail {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px; border-radius: 10px; background: #fff;
  font-size: 14px; line-height: 20px; color: #111;
}
.pkgSheet__name { min-width: 0; font-weight: 400; }
.pkgSheet__price { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }

.pkgSheet__error {
  margin: -8px 0 0; padding: 10px 12px;
  border: 1px solid #ff5f4a; border-radius: 10px;
  color: #ff5f4a; font-size: 14px; line-height: 20px;
}
.pkgSheet__error[hidden] { display: none; }

/* Button Primary: висота 48 (14 + 20 + 14), padding 14/24, радіус 10, #111;
   підпис 14/20, 600, трекінг 0.5px, білий */
.pkgSheet__add {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; padding: 14px 24px; margin: 0;
  border: 0; border-radius: 10px; background: #111; color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 20px;
  letter-spacing: .5px; text-transform: none;
  cursor: pointer; transition: background-color .2s ease, opacity .2s ease;
}
@media (hover: hover) { .pkgSheet__add:hover { background: #333; } }
.pkgSheet__add[disabled] { opacity: .6; cursor: default; }

/* ---------- мобілка: аркуш знизу (2243:42959) ----------
   390 на всю ширину, радіус 20 20 0 0, padding 24/18/40/18, gap 18;
   шапка gap 8, назва 18/24, опис 14/20; плитки 100 × 100, gap 8. */
@media screen and (max-width: 768px) {
  .pkgSheet { align-items: flex-end; padding: 0; }
  .pkgSheet__panel {
    width: 100%; max-height: calc(100% - 40px);
    gap: 18px;
    padding: 24px 18px calc(40px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0;
    opacity: 1; transform: translateY(100%);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  }
  .pkgSheet.is-open .pkgSheet__panel { transform: none; }
  .pkgSheet__head { gap: 8px; }
  .pkgSheet__top { gap: 16px; }
  .pkgSheet__title { font-size: 18px; line-height: 24px; letter-spacing: 0; }
  .pkgSheet__note { font-size: 14px; line-height: 20px; }
  .pkgSheet__track { gap: 8px; margin-right: -18px; padding-right: 18px; scroll-padding-right: 18px; }
  .pkgSheet__tile { flex-basis: 100px; width: 100px; height: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .pkgSheet__overlay, .pkgSheet__panel { transition: none; }
}

/* ---------- cart-page.css ---------- */
/* Сторінка «Оформлення замовлення» (/cart): sections/main-cart.liquid +
 * snippets/cart-page-rows.liquid + assets/cart-page.js.
 *
 * Еталон - Figma NJuUg48Ow6TuY6tyGfcmyC, секція 2243:42935:
 *   деск 1440: кадр 2243:42985, лейаут 2243:42998 (ліва 759, права 427,
 *              space-between, верх 154 = шапка 122 + 32), картки r16 pad 32 gap 24
 *   моб 390:   кадр 2243:42974, поля 16, картки pad 24/18
 * Усі числа нижче - з дерева макета (./fg tree), не на око.
 */

.ckPage {
  background: #f6f6f6;
  color: #111;
  display: block;
  padding: 32px 0 80px;
}
.ckPage__in { box-sizing: border-box; margin: 0 auto; max-width: 1440px; padding: 0 64px; }
.ckPage *, .ckPage *::before, .ckPage *::after { box-sizing: border-box; }
.ckPage button { font-family: inherit; }

/* ---------- сітка: ліва колонка + права «Ваше замовлення» ---------- */
.ckGrid {
  align-items: start;
  column-gap: 32px;
  display: grid;
  grid-template-areas:
    "title    sum"
    "help     sum"
    "contacts sum"
    "delivery sum"
    "payment  sum"
    ".        sum";
  grid-template-columns: minmax(0, 759px) 427px;
  grid-template-rows: auto auto auto auto auto 1fr;
  justify-content: space-between;
  row-gap: 24px;
}
.ckTitle { grid-area: title; }
.ckHelp { grid-area: help; }
.ckSum { grid-area: sum; }
.ckCard--contacts { grid-area: contacts; }
.ckCard--delivery { grid-area: delivery; }
.ckCard--payment { grid-area: payment; }

.ckTitle {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 36px;
  margin: 0 0 8px;  /* 32 до картки «Допомогти» = 24 зазору сітки + 8 */
}

/* ---------- «Допомогти з оформленням? Із радістю!» ---------- */
.ckHelp {
  align-items: center;
  background: #e0e7ff;
  border-radius: 16px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 32px;
}
.ckHelp__title { color: #1a1a1a; font-size: 18px; font-weight: 700; line-height: 24px; margin: 0; }
.ckHelp__btn {
  align-items: center;
  background: #fff;
  border: 0;
  border-radius: 10px;
  color: #111;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  gap: 4px;
  height: 48px;
  justify-content: center;
  letter-spacing: .5px;
  line-height: 20px;
  padding: 8px 32px;
  transition: background-color .15s ease;
}
.ckHelp__btn:hover { background: #f6f6f6; }
.ckHelp__btn svg { display: block; flex: 0 0 auto; height: 24px; width: 24px; }
.ckHelp__btn.is-loading { opacity: .6; pointer-events: none; }

/* ---------- білі картки лівої колонки ---------- */
.ckCard {
  background: #fff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
}
.ckCard__title { color: #111; font-size: 18px; font-weight: 700; letter-spacing: 0; line-height: 24px; margin: 0; }

.ckReg { display: flex; flex-direction: column; gap: 16px; }
.ckReg__top { display: flex; flex-direction: column; gap: 16px; }
.ckReg__new { display: flex; flex-direction: column; gap: 12px; }
.ckReg__new.is-folded .ckFields { display: none; }
.ckDivider { background: #e9e9e9; display: block; height: 1px; width: 100%; }
.ckDivider--mob { display: none; }

.ckToggle {
  align-items: center;
  background: none;
  border: 0;
  color: #111;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 400;
  gap: 24px;
  justify-content: space-between;
  line-height: 20px;
  min-height: 28px;
  padding: 0;
  text-align: left;
  width: 100%;
}
.ckToggle--strong { font-weight: 700; }
.ckRound {
  align-items: center;
  background: #f6f6f6;
  border-radius: 999px;
  color: #111;
  display: flex;
  flex: 0 0 auto;
  height: 28px;
  justify-content: center;
  transition: background-color .15s ease;
  width: 28px;
}
.ckToggle:hover .ckRound { background: #e9e9e9; }
.ckRound svg { display: block; fill: none; height: 12px; width: 12px; }
.ckReg__new:not(.is-folded) .ckRound__v { display: none; }

/* ---------- поля ---------- */
.ckFields { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ckFields--one { grid-template-columns: minmax(0, 1fr); }
.ckField { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.ckField__label { color: #111; font-size: 12px; letter-spacing: .5px; line-height: 16px; }
.ckField__label i { color: #6c6c6c; font-style: normal; margin-left: 2px; }
.ckInput {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border: 1px solid #b4b4b4;
  border-radius: 10px;
  color: #111;
  font: inherit;
  font-size: 14px;
  height: 48px;
  letter-spacing: 0;
  line-height: 20px;
  margin: 0;
  outline: none;
  padding: 0 16px;
  transition: border-color .15s ease;
  width: 100%;
}
.ckInput::placeholder { color: #b4b4b4; opacity: 1; }
.ckInput:hover { border-color: #9c9c9c; }
.ckInput:focus { border-color: #111; }
.ckField.is-error .ckInput { border-color: #ff5c42; }
.ckField__err { color: #ff5c42; font-size: 12px; letter-spacing: .2px; line-height: 16px; }

.ckSelect { display: block; position: relative; }
.ckSelect .ckInput { cursor: pointer; padding-right: 44px; text-overflow: ellipsis; }
.ckSelect .ckInput:has(option[value=""]:checked) { color: #b4b4b4; }
.ckSelect option { color: #111; }
.ckSelect svg { height: 8px; pointer-events: none; position: absolute; right: 16px; top: 20px; width: 12px; }

/* ---------- чекбокси ---------- */
.ckCheck {
  align-items: center;
  color: #1e1e1e;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  gap: 10px;
  letter-spacing: .2px;
  line-height: 16px;
  margin: 0;
  position: relative;
}
.ckCheck--lg { color: #111; font-size: 14px; letter-spacing: 0; line-height: 20px; }
.ckCheck input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.ckCheck__box {
  background: #fff;
  border: 1.5px solid #b4b4b4;
  border-radius: 5px;
  flex: 0 0 auto;
  height: 20px;
  position: relative;
  transition: background-color .15s ease, border-color .15s ease;
  width: 20px;
}
.ckCheck input:checked + .ckCheck__box { background: #1e1e1e; border-color: #1e1e1e; }
.ckCheck input:checked + .ckCheck__box::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.1 4.3 8.5 11 1.5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 10px no-repeat;
  content: "";
  inset: 0;
  position: absolute;
}
.ckCheck input:focus-visible + .ckCheck__box { outline: 2px solid #9ab0fd; outline-offset: 2px; }

.ckOpts { display: flex; flex-direction: column; gap: 16px; }
.ckConsult { display: flex; flex-direction: column; gap: 12px; }
.ckConsult__title { color: #111; font-size: 14px; font-weight: 700; line-height: 20px; margin: 0; }
.ckConsult__list { display: flex; flex-direction: column; gap: 8px; }

.ckTerms { color: #727272; font-size: 12px; letter-spacing: .2px; line-height: 16px; margin: 0; }
.ckTerms__star { color: #ff0505; }
.ckTerms__links { text-decoration: underline; }
.ckTerms a { color: inherit; text-decoration: underline; }
.ckTerms a:hover { color: #111; }

/* ---------- права колонка «Ваше замовлення» ---------- */
.ckSum {
  align-self: start;
  background: #fff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  position: sticky;
  top: calc(var(--header-height, 80px) + 24px);  /* під липкою шапкою */
}
.ckSum.is-loading .ckSum__list,
.ckSum.is-loading .ckSum__totals { opacity: .55; pointer-events: none; transition: opacity .15s ease; }

.ckSum__items { display: flex; flex-direction: column; gap: 24px; }
.ckSum__head { display: flex; flex-direction: column; gap: 8px; }
.ckSum__toggle {
  align-items: center;
  background: none;
  border: 0;
  color: #111;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 0;
  text-align: left;
  width: 100%;
}
.ckSum__title { font-size: 18px; font-weight: 700; line-height: 24px; }
.ckChevron { display: block; flex: 0 0 auto; height: 9px; transition: transform .2s ease; width: 14px; }
.ckSum.is-collapsed .ckChevron { transform: rotate(180deg); }
.ckSum.is-collapsed .ckSum__list { display: none; }
.ckSum__ship { align-items: center; color: #111; display: flex; font-size: 12px; gap: 4px; letter-spacing: .2px; line-height: 16px; margin: 0; }
.ckSum__ship svg { color: #f07fc7; display: block; flex: 0 0 auto; height: 16px; width: 16px; }

.ckSum__list { display: flex; flex-direction: column; gap: 12px; }

/* рядок товару - «Cart Line Item»: 80×96, зазор 12, низ 12 + лінія #e9e9e9 */
.ckRow {
  border-bottom: 1px solid #e9e9e9;
  display: flex;
  gap: 12px;
  padding-bottom: 12px;
  transition: opacity .18s ease;
}
.ckRow.is-pending { opacity: .45; pointer-events: none; }
.ckRow__photo { border-radius: 8px; display: block; flex: 0 0 auto; height: 96px; overflow: hidden; width: 80px; }
.ckRow__photo img { display: block; height: 100%; object-fit: cover; width: 100%; }
.ckRow__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-width: 0; }
.ckRow--bare .ckRow__body { gap: 24px; }
.ckRow__info { display: flex; flex-direction: column; gap: 6px; }
.ckRow__text { display: flex; flex-direction: column; gap: 2px; }
.ckRow__name {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #111;
  display: -webkit-box;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  overflow: hidden;
  text-decoration: none;
}
a.ckRow__name:hover { text-decoration: underline; }
.ckRow--gift .ckRow__name, .ckRow--gift .ckRow__photo { cursor: default; }
.ckRow__desc {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #6c6c6c;
  display: -webkit-box;
  font-size: 12px;
  letter-spacing: .2px;
  line-height: 16px;
  margin: 0;
  overflow: hidden;
}
.ckRow__opts { color: #6c6c6c; font-size: 12px; letter-spacing: .2px; line-height: 16px; }
.ckRow__opts a { color: inherit; }
.ckRow__rating { align-items: center; display: flex; gap: 6px; }
.ckStars { display: flex; gap: 2px; }
.ckStars__i {
  background-color: #ffe540;
  display: block;
  height: 12px;
  width: 12px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0L7.76336 3.57295L11.7063 4.1459L8.85317 6.92705L9.52671 10.8541L6 9L2.47329 10.8541L3.14683 6.92705L0.293661 4.1459L4.23664 3.57295L6 0Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0L7.76336 3.57295L11.7063 4.1459L8.85317 6.92705L9.52671 10.8541L6 9L2.47329 10.8541L3.14683 6.92705L0.293661 4.1459L4.23664 3.57295L6 0Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ckStars__i--empty {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M7.31543 3.79395L7.43164 4.03027L7.69141 4.06738L10.6318 4.49414L8.50391 6.56934L8.31641 6.75293L8.36035 7.01172L8.8623 9.93945L6.23242 8.55762L6 8.43555L5.76758 8.55762L3.13672 9.93945L3.63965 7.01172L3.68359 6.75293L3.49609 6.56934L1.36719 4.49414L4.30859 4.06738L4.56836 4.03027L4.68457 3.79395L6 1.12891L7.31543 3.79395Z' stroke='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M7.31543 3.79395L7.43164 4.03027L7.69141 4.06738L10.6318 4.49414L8.50391 6.56934L8.31641 6.75293L8.36035 7.01172L8.8623 9.93945L6.23242 8.55762L6 8.43555L5.76758 8.55762L3.13672 9.93945L3.63965 7.01172L3.68359 6.75293L3.49609 6.56934L1.36719 4.49414L4.30859 4.06738L4.56836 4.03027L4.68457 3.79395L6 1.12891L7.31543 3.79395Z' stroke='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ckRow__rate { color: #9c9c9c; font-size: 12px; letter-spacing: .2px; line-height: 16px; }

.ckRow__bottom { align-items: center; display: flex; gap: 8px; justify-content: space-between; margin-top: auto; }
.ckRow__price { align-items: center; display: flex; flex-wrap: wrap; font-size: 14px; gap: 0 6px; line-height: 20px; }
.ckRow__old { color: #b4b4b4; text-decoration: line-through; }
.ckRow__new { color: #111; font-weight: 600; letter-spacing: .5px; }
.ckRow__new--sale { color: #ff5c42; font-weight: 700; letter-spacing: 0; }

.ckQty { align-items: center; display: flex; flex: 0 0 auto; gap: 10px; }
.ckQty__btn {
  align-items: center;
  background: #f6f6f6;
  border: 0;
  border-radius: 999px;
  color: #111;
  cursor: pointer;
  display: flex;
  height: 28px;
  justify-content: center;
  padding: 0;
  transition: background-color .15s ease;
  width: 28px;
}
.ckQty__btn:hover { background: #e9e9e9; }
.ckQty__btn svg { display: block; fill: none; height: 12px; width: 12px; }
.ckQty--min .ckQty__btn--minus { background: #f6f5f3; color: #b7b2ac; }
.ckQty__val {
  -moz-appearance: textfield;
  background: none;
  border: 0;
  color: #111;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  padding: 0;
  text-align: center;
  width: calc(var(--d, 1) * .62em + 1px);
}
.ckQty__val::-webkit-inner-spin-button, .ckQty__val::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ckQty__val:focus { outline: 1px solid #b4b4b4; outline-offset: 2px; }

.ckRow__gift {
  align-items: center;
  background: #f6f6f6;
  border-radius: 6px;
  color: #43c400;
  display: flex;
  flex: 0 0 auto;
  font-size: 12px;
  gap: 6px;
  letter-spacing: .5px;
  line-height: 16px;
  padding: 4px 8px 6px;
  white-space: nowrap;
}
.ckRow__gift svg { display: block; flex: 0 0 auto; height: 16px; width: 16px; }

/* ---------- промокод (snippets/promo-gift) під макет «Promo Code Field» ---------- */
.ckSum__promo .promo-gift { display: block; margin: 0; padding: 0; }
.ckSum__promo .promoInputsContent { display: block; margin: 0; max-height: none; overflow: visible; padding: 0; }
.ckSum__promo .promoInputGroup {
  align-items: center;
  background: #fff;
  border: 1px solid #b4b4b4;
  border-radius: 10px;
  display: flex;
  gap: 12px;
  height: 48px;
  margin: 0;
  padding: 0 16px;
  transition: border-color .15s ease;
  width: 100%;
}
.ckSum__promo .promoInputGroup:focus-within { border-color: #111; }
.ckSum__promo .promoInputGroup .inputGr { flex: 1 1 auto; margin: 0; min-width: 0; padding: 0; position: relative; }
.ckSum__promo .promoInputGroup .mileUseClose { display: none; }
.ckSum__promo .promoInputGroup input {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #111;
  font: inherit;
  font-size: 14px;
  height: 46px;
  line-height: 20px;
  margin: 0;
  outline: none;
  padding: 0;
  width: 100%;
}
.ckSum__promo .promoInputGroup input::placeholder { color: #9c9c9c; opacity: 1; }
.ckSum__promo .promoInputGroup .btn {
  background: none;
  border: 0;
  border-radius: 0;
  color: #9c9c9c;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  height: auto;
  letter-spacing: 0;
  line-height: 20px;
  margin: 0;
  min-height: 0;
  padding: 0;
  text-decoration: underline;
  text-transform: none;
  width: auto;
}
.ckSum__promo .promoInputGroup .btn .text { color: inherit; font: inherit; text-decoration: inherit; text-transform: none; }
.ckSum__promo .promoInputGroup:has(input:not(:placeholder-shown)) .btn { color: #111; }
.ckSum__promo .promo-gift__msg { color: #ff5c42; font-size: 12px; letter-spacing: .2px; line-height: 16px; margin: 8px 0 0; }
.ckSum__promo .promo-gift__msg.is-ok { color: #43c400; }
.ckSum__promo .promo-gift__msg[hidden] { display: none; }
.ckSum__promo .cart-page__discount {
  align-items: center;
  color: #6c6c6c;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  letter-spacing: .2px;
  line-height: 16px;
  margin-top: 8px;
}
.ckSum__promo .cart-page__discount .label { align-items: center; display: inline-flex; gap: 6px; text-transform: uppercase; }
.ckSum__promo .cart-discount__remove {
  background: #f6f6f6;
  border: 0;
  border-radius: 999px;
  color: #111;
  cursor: pointer;
  font-size: 14px;
  height: 18px;
  line-height: 18px;
  padding: 0;
  width: 18px;
}
.ckSum__promo .cart-giftcard__status { color: #6c6c6c; font-size: 12px; line-height: 16px; margin-top: 2px; }

/* ---------- Знижка / Сума ---------- */
.ckSum__totals { border-top: 1px solid #e9e9e9; display: flex; flex-direction: column; gap: 8px; padding-top: 24px; }
.ckSum__row { align-items: center; display: flex; justify-content: space-between; }
.ckSum__row--disc { color: #6c6c6c; font-size: 14px; line-height: 20px; }
.ckSum__row--disc span:first-child { font-size: 12px; letter-spacing: .2px; line-height: 16px; }
.ckSum__row--total { color: #111; font-size: 16px; font-weight: 700; line-height: 24px; }

/* ---------- кнопки ---------- */
.ckSum__actions { display: flex; flex-direction: column; gap: 16px; }
.ckPack {
  align-items: center;
  background: #fff;
  border: 1px solid #b4b4b4;
  border-radius: 10px;
  color: #111;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  height: 48px;
  justify-content: center;
  letter-spacing: .5px;
  line-height: 20px;
  padding: 0 24px 0 20px;
  transition: border-color .15s ease;
  width: 100%;
}
.ckPack:hover { border-color: #111; }
.ckPack svg { display: block; flex: 0 0 auto; height: 16px; width: 16px; }
.ckGo {
  align-items: center;
  background: #111;
  border: 0;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 16px;
  justify-content: center;
  letter-spacing: .5px;
  line-height: 20px;
  min-height: 48px;
  padding: 12px 16px;
  transition: background-color .15s ease;
  width: 100%;
}
.ckGo:hover { background: #333; }
.ckGo.is-loading { opacity: .7; pointer-events: none; }
.ckGo__sep { align-self: center; background: #fff; display: block; height: 24px; width: 1px; }
.ckGo--mob { display: none; }

/* ---------- порожній кошик ---------- */
.ckEmpty { background: #fff; border-radius: 16px; padding: 32px; }
.ckPage__in > .ckTitle { margin-bottom: 32px; }
.ckEmpty .quantityNullWrap, .ckEmpty .carouselViewedWrapHead { margin: 0; padding: 0; }
.ckEmpty .text { color: #111; font-size: 16px; line-height: 24px; }
.ckEmpty .linkWrap { margin-top: 16px; }
.ckEmpty .continueShopping {
  align-items: center;
  border: 1px solid #b4b4b4;
  border-radius: 10px;
  color: #111;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  height: 48px;
  justify-content: center;
  letter-spacing: .5px;
  line-height: 20px;
  padding: 0 24px;
  text-decoration: none;
  transition: border-color .15s ease;
}
.ckEmpty .continueShopping:hover { border-color: #111; }
.ckApps { margin-top: 24px; }

/* ---------- вужчий деск / планшет ---------- */
@media (max-width: 1279px) {
  .ckPage__in { padding: 0 32px; }
  .ckGrid { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 24px; }
  .ckHelp { flex-wrap: wrap; }
}
@media (max-width: 999px) {
  .ckPage__in { max-width: 760px; }
  .ckGrid {
    grid-template-areas: "title" "help" "sum" "contacts" "delivery" "payment";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .ckSum { position: static; }
  .ckGo--sum, .ckSum__terms { display: none; }
  .ckGo--mob { display: flex; }
}

/* ---------- мобілка (макет 390: поля 16, картки 24/18) ---------- */
@media (max-width: 767px) {
  .ckPage { padding: 16px 0 48px; }
  .ckPage__in { padding: 0 16px; }
  .ckGrid { grid-template-areas: "help" "sum" "contacts" "delivery" "payment"; row-gap: 24px; }
  .ckTitle { display: none; }
  .ckPage__in > .ckTitle { display: block; font-size: 24px; line-height: 32px; margin-bottom: 16px; }
  .ckHelp { flex-direction: column; gap: 16px; margin-bottom: -8px; padding: 16px; }
  .ckHelp__title { text-align: center; }
  .ckHelp__title span { display: block; }
  .ckHelp__btn { width: 100%; }
  .ckCard, .ckSum { padding: 24px 18px; }
  .ckFields { grid-template-columns: minmax(0, 1fr); }
  .ckToggle--strong { font-weight: 600; letter-spacing: .5px; }
  .ckReg__new { gap: 16px; }
  .ckDivider--mob { display: block; }
  .ckReg__new.is-folded .ckDivider--mob { display: none; }
}

/* ---------- cart-reminder.css ---------- */
/* ============================================================
   ПЛАШКА КОШИКА (`.homeCartReminder`) - НОВИЙ ДИЗАЙН
   ------------------------------------------------------------
   Джерело чисел: нода 2168:20458 «Cart Summary Bar» у тому самому
   файлі, що й шухляда (кадри 2182:20681 / 2182:20657), плюс
   контрольний знімок власника clip040 (кадри «Попап «Додано в
   кошик» - моб / - десктоп»).

   Що з чого взято. Усі числа - з ноди 2205:25152 (її дав власник):
   картка 375x80, поля 16, проміжок 24 між групою значка й кнопкою,
   8 усередині групи, кнопка 134x48 з радіусом 10, рамка #dadada,
   радіус 14, тінь 0 12 12 rgba(0,0,0,.05), хрестик 24 над правим
   верхнім кутом. Попередня версія брала поля 12 з clip040 - власник
   попросив рівняння саме на ноду. Ряд «До подарунка» з ноди НЕ
   переносимо: подарункова драбина живе в шухляді.

   Масштаб - як у решти кошика: vw рахується від 1536 (гілка
   `<=1536` фіксує ті самі числа в пікселях, вище 1536 картка
   росте разом зі сторінкою). Мобілка ділить піксельну гілку з
   десктопом, окремо в неї лише положення: з `fixed` праворуч
   плашка стає звичайним блоком у потоці під шапкою.

   Старий вигляд донора (сіра плитка 300 px, значок і лічильник
   псевдоелементами `:before`/`:after`, дві кнопки-підписи) знято
   повністю: значок тепер справжній `<svg>` у розмітці, бо
   лічильник мусить оновлюватись наживо через `[data-cart-count]`.
   ============================================================ */

/* ---------- картка ---------- */
.homeCartReminder {
  background: #fff;
  border: 1px solid #dadada;
  border-radius: .9114583333vw;
  box-shadow: 0 .78125vw .78125vw rgba(0, 0, 0, .05);
  box-sizing: border-box;
  display: block;
  isolation: isolate;
  /* 15, а не 16: у Figma обведення намальоване всередині рамки й розміру
     не їсть, а тут border-box додає свої 2. З 15+рамка картка виходить
     рівно 375x80, як у ноді. */
  padding: .9765625vw;
  position: fixed;
  right: 2.8645833333vw;
  /* +34, а не +22 як у донора: у нову картку хрестик переїхав НАД
     неї (-28), і при +22 він наповзав би на шапку. */
  top: calc(var(--home-cart-reminder-top, 0px) + 2.2135416667vw);
  /* 375 з макета як МІНІМУМ, а не як жорстка ширина: з українським
     рядком картка виходить рівно 375, а довший переклад (PL «3
     produkty | 398,10 zl») розсуває її вліво, бо вона притиснута
     правим краєм. Інакше ціна різалась би трикрапкою. */
  min-width: 24.4140625vw;
  width: max-content;
  max-width: calc(100vw - 5.7291666667vw);
  z-index: 25;
}
@media (max-width: 1536px) {
  .homeCartReminder {
    border-radius: 14px;
    box-shadow: 0 12px 12px rgba(0, 0, 0, .05);
    padding: 15px;
    right: 44px;
    top: calc(var(--home-cart-reminder-top, 0px) + 34px);
    min-width: 375px;
    max-width: calc(100vw - 88px);
  }
}
.homeCartReminder[hidden] { display: none; }

/* ---------- рядок ---------- */
/* Значок і кнопка не стискаються, тексти забирають решту. Підпис
   кнопки беремо короткий (`cart.checkout_short`: «Оформити»,
   «Zamów», «Checkout») - довгий у 134 з макета не влазить. */
.homeCartReminder__row {
  align-items: center;
  display: flex;
  /* Нода 2205:25152: між групою «значок + текст» і кнопкою 24,
     усередині групи - 8. Поля картки 16, звідси 375 = 16+185+24+134+16
     і висота 80 = 16+48+16. */
  gap: 1.5625vw;
  justify-content: space-between;
}
@media (max-width: 1536px) { .homeCartReminder__row { gap: 24px; } }

/* ---------- значок із лічильником ---------- */
.homeCartReminder__icon {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  height: 2.4739583333vw;
  justify-content: center;
  position: relative;
  width: 2.4739583333vw;
}
@media (max-width: 1536px) { .homeCartReminder__icon { height: 38px; width: 38px; } }

.homeCartReminder__icon svg {
  display: block;
  /* viewBox 18x20 обрізає обведення 1.2857: половина товщини лежить за межею
     рамки, і в сумки зрізало верх дужки. Не чіпаємо розміри - просто даємо
     штриху малюватись за межі viewBox. */
  overflow: visible;
  height: 1.5190972222vw;
  width: 1.3671875vw;
}
@media (max-width: 1536px) { .homeCartReminder__icon svg { height: 23.33px; width: 21px; } }

/* У макеті кружечок стоїть у нижній правій чверті значка 28 -
   тобто рівно від середини рамки 38 вниз і вправо. */
.homeCartReminder__badge {
  align-items: center;
  background: #beee91;
  border-radius: 1000px;
  box-sizing: border-box;
  color: #000;
  display: inline-flex;
  font-size: .5208333333vw;
  font-weight: 600;
  height: .9114583333vw;
  justify-content: center;
  left: 50%;
  line-height: 1;
  min-width: .9114583333vw;
  padding: 0 .1302083333vw;
  position: absolute;
  top: 50%;
}
@media (max-width: 1536px) {
  .homeCartReminder__badge {
    font-size: 8px;
    height: 14px;
    min-width: 14px;
    padding: 0 2px;
  }
}
.homeCartReminder__badge[hidden] { display: none; }

/* ---------- тексти ---------- */
.homeCartReminder__texts {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.homeCartReminder__title,
.homeCartReminder__text {
  color: #111;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homeCartReminder__title {
  font-size: .9114583333vw;
  font-weight: 400;
  line-height: 1.3020833333vw;
}
@media (max-width: 1536px) { .homeCartReminder__title { font-size: 14px; line-height: 20px; } }

.homeCartReminder__text {
  font-size: 1.0416666667vw;
  font-weight: 700;
  line-height: 1.5625vw;
}
@media (max-width: 1536px) { .homeCartReminder__text { font-size: 16px; line-height: 24px; } }

/* ---------- кнопка ---------- */
/* У макеті кнопка 134 при підписі «Оформити» ~73 - тобто поля по 30.
   Пишемо саме поля 30, а 134 лишаємо як `min-width`: українська
   кнопка виходить рівно 134, а коротший підпис (PL «Zamow») кнопку
   не роздуває. На мобілці `min-width` знімаємо (див. нижче): там
   ширина картки 358 жорстка, і зайві 20 px кнопки з'їдали б ціну. */
.homeCartReminder__button {
  align-items: center;
  background: #111;
  border-radius: .6510416667vw;
  box-sizing: border-box;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .9114583333vw;
  font-weight: 600;
  height: 3.125vw;
  justify-content: center;
  letter-spacing: .5px;
  line-height: 1.3020833333vw;
  min-width: 8.7239583333vw;
  padding: 0 1.0416666667vw;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 1536px) {
  .homeCartReminder__button {
    border-radius: 10px;
    font-size: 14px;
    height: 48px;
    line-height: 20px;
    min-width: 134px;
    /* Поля 16 - з ноди; ширину 134 тримає min-width, а не роздуті поля.
       На мобілці min-width знімається, і кнопка стискається до підпису. */
    padding: 0 16px;
  }
}
.homeCartReminder__button:hover { opacity: 1; text-decoration: none; }

/* ---------- хрестик ---------- */
/* У макеті він висить над карткою праворуч і виходить за її правий
   край на 17. На 390 це вилізло б за екран, тому в clip040 власник
   притиснув його ПО правому краю картки: рамка 24 закінчується за 4
   над карткою. Беремо варіант із clip040 - він новіший і однаково
   придатний для обох ширин. */
.homeCartReminder__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  height: 1.5625vw;
  padding: 0;
  position: absolute;
  /* Нода 2205:25152: рамка хрестика 24x24 стоїть на x=369,y=-18 при картці
     375 - тобто центр хреста припадає на правий верхній кут картки
     (6 праворуч, 6 вище). Звідси -18 з обох боків. */
  right: -1.1393229167vw;
  top: -1.26953125vw;
  width: 1.5625vw;
}
@media (max-width: 1536px) {
  .homeCartReminder__close { height: 24px; right: -17.5px; top: -19.5px; width: 24px; }
}
.homeCartReminder__close svg { display: block; height: 100%; width: 100%; }

/* ---------- мобілка ---------- */
/* Макет 390: картка 358 з полями 16, у потоці під шапкою. Відступ
   згори 32 - щоб під хрестик (24 + 4 просвіту) лишалось місце. */
@media (max-width: 768px) {
  .homeCartReminder {
    left: auto;
    /* Власник: смуга між шапкою й хлібними крихтами - 25 згори, 12 знизу,
       16 з боків. */
    margin: 25px 16px 12px;
    /* Компактний варіант (нода 2206:25273 / 2205:25135): картка 358x72,
       поля 12, тексти дрібніші за десктопні. 11 замість 12 - бо рамка
       border-box додає свої 2. */
    padding: 11px;
    /* десктопні min/max ширини тут тільки заважають: на 390 картка
       мусить бути рівно 358, тобто ширина батька мінус поля. */
    max-width: none;
    min-width: 0;
    position: relative;
    right: auto;
    top: auto;
    width: auto;
  }
  /* 358 - ширина жорстка, розсунути картку нікуди. Щоб рядок із
     сумою не різався в польському ринку (довші слова й «zl»),
     кнопка тут міряється по підпису, а не по 134 з макета. */
  .homeCartReminder__button { min-width: 0; }
  /* Проміжок між групою значка й кнопкою у компактному варіанті 15,
     але при довгому перекладі рядок важливіший за проміжок. */
  .homeCartReminder__row { gap: 12px; }
  .homeCartReminder__title { font-size: 12px; letter-spacing: .2px; line-height: 16px; }
  .homeCartReminder__text { font-size: 14px; line-height: 20px; }
  /* Хрестик у компактному варіанті стоїть НАД карткою (y -30), майже по
     її правому краю (3.5 всередину), а не вилазить за нього. */
  .homeCartReminder__close { right: 3.5px; top: -30px; }
}

/* ---------- cart-sheet.css ---------- */
/* ШУХЛЯДА КОШИКА ЗА МАКЕТОМ. Ноди 2182:20681 (десктоп, 1440) і 2182:20657
   (мобілка, 390) у файлі NJuUg48Ow6TuY6tyGfcmyC.

   Чому окремий файл, а не правки в `cart-drawer.css`: той веде побудовну
   звірку з ДОНОРОМ старої шухляди, і його правила досі годують сторінку
   кошика (`sections/main-cart.liquid` використовує ті самі `.product`,
   `.infoProduct`, `.nameWrap`). Тому рядок у шухляді дістав СВОЇ імена
   (`cartRow__*`), донорські правила на нього просто не наводяться, а
   сторінка кошика лишається недоторканою. Ім'я файла підібране так, щоб
   у збірці (`migrate/build_css.py`, порядок за іменем) він ліг ПІСЛЯ
   `cart-drawer.css`: кілька донорських правил тут перебиваються.

   Каркас макета (десктоп): шухляда 406, усередині колонка 358 з полями 24;
   шапка на y18 висотою 32; смуга прогресу на y66, 358x92; список з y174,
   проміжок рядків 12; липкий низ 406x208.
   Мобілка: 390 на всю ширину, поля 16, вертикальний крок 24 замість 16.

   База vw - 1920, як у решти шухляди: піксельна гілка (<=1536) рівно в
   1.25 раза менша. 406 -> 26.4322916667vw, 14 -> .9114583333vw і так далі. */

/* ---------- панель ---------- */
/* Макет дає 406 замість донорських 384.

   Рамку донора знімаємо: вона всередині ширини (box-sizing: border-box),
   тому з нею вміст виходив 404, а колонка - 356 замість 358, і весь макет
   їхав на два пікселі. У макеті шухляда й так відбита від сторінки
   затемненням і тінню, окремої волосини по краю там нема. */
.cardModal .modal { border: none; width: 26.4322916667vw; }
@media (max-width: 1536px) { .cardModal .modal { width: 406px; } }
/* Макет 2182:20657: на мобілці шухляда НЕ накриває верхню смугу акції -
   вона лишається видимою, а панель починається під нею. Висоту смуги міряє
   `cart-drawer.js` і кладе в `--cart-drawer-top` (коли смугу прокрутили,
   там 0 і панель знову на весь екран). */
@media (max-width: 768px)  {
  .cardModal .modal {
    height: calc(100% - var(--cart-drawer-top, 0px));
    top: var(--cart-drawer-top, 0px);
    width: 100%;
  }
}

/* ---------- шапка ---------- */
/* У макеті лічильника «(3)» біля назви нема. Вузол лишаємо в розмітці на
   випадок, якщо за нього зачепиться сторонній скрипт, але ховаємо. */
.cardWrapper .head {
  align-items: center;
  /* Нода 2182:20867: контейнер панелі має поле 24, а блок шапки відступає
     ще на 18 - разом 42 від верху панелі. На мобілці контейнера нема, там
     лишаються 18 (нода 2182:20657). */
  padding: 2.734375vw 1.5625vw 0;
}
@media (max-width: 1536px) { .cardWrapper .head { padding: 42px 24px 0; } }
@media (max-width: 768px)  { .cardWrapper .head { padding: 18px 16px 0; } }

.cardWrapper .head .title .text {
  font-size: 1.0416666667vw;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.5625vw;
  text-transform: none;
}
@media (max-width: 1536px) { .cardWrapper .head .title .text { font-size: 16px; line-height: 24px; } }
.cardWrapper .head .title .quantity { display: none; }

.cardWrapper .head .close {
  align-items: center;
  display: flex;
  height: 2.0833333333vw;
  justify-content: center;
  opacity: 1;
  width: 2.0833333333vw;
}
@media (max-width: 1536px) { .cardWrapper .head .close { height: 32px; width: 32px; } }
.cardWrapper .head .close .iconSvg { height: 1.0416666667vw; width: 1.0416666667vw; }
@media (max-width: 1536px) { .cardWrapper .head .close .iconSvg { height: 16px; width: 16px; } }

/* ---------- список ---------- */
/* Поля списку тримає сам скрол-контейнер, а не рядок: інакше смуга скролу
   йшла б усередині полів і рядки «пливли» б при її появі. */
.cardWrapper .main .cardProductsWrap { border-top: none; }
/* Порожнє місце під картками в макеті 2182:20657 - сіре #f6f5f3, білим
   лишається лише сам список. Тому колір і поля роз'їхались по двох вузлах:
   сірий тримає скрол-контейнер, білий - внутрішній блок.
   Відступ від шапки до списку: у десктопній ноді 2182:20867 він 16,
   у мобільній 2182:20657 - 24. Знизу білий блок закінчується через 16
   після останньої картки. */
.cardWrapper .main .cardProductsWrap .cardProducts { background: #f6f5f3; padding: 0; }
.cardWrapper .main .cardProductsWrap .cardProducts__list {
  background: #fff;
  padding: 1.0416666667vw 1.5625vw 1.0416666667vw;
}
@media (max-width: 1536px) { .cardWrapper .main .cardProductsWrap .cardProducts__list { padding: 16px 24px 16px; } }
@media (max-width: 768px)  { .cardWrapper .main .cardProductsWrap .cardProducts__list { padding: 24px 16px 16px; } }

.cardWrapper .main .cardProducts__list .cartRow {
  align-items: flex-start;
  border-bottom: 1px solid #e9e9e9;
  display: flex;
  gap: .78125vw;
  padding-bottom: .78125vw;
  position: relative;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts__list .cartRow { gap: 12px; padding-bottom: 12px; }
}
/* Проміжок 12 між рядками дає верхній відступ наступного, а не margin
   знизу: так остання лінія лишається притиснутою до кінця списку. */
.cardWrapper .main .cardProducts__list .cartRow + .cartRow { margin-top: .78125vw; }
@media (max-width: 1536px) { .cardWrapper .main .cardProducts__list .cartRow + .cartRow { margin-top: 12px; } }
.cardWrapper .main .cardProducts__list .cartRow:last-child { border-bottom: none; }

.cardWrapper .main .cardProducts__list .cartRow__photo {
  border-radius: .5208333333vw;
  display: block;
  flex: 0 0 auto;
  height: 6.25vw;
  overflow: hidden;
  width: 5.2083333333vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts__list .cartRow__photo { border-radius: 8px; height: 96px; width: 80px; }
}
.cardWrapper .main .cardProducts__list .cartRow__photo img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* min-width: 0 - інакше довга назва розпирає флекс і обрізання не працює */
.cardWrapper .main .cardProducts__list .cartRow__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: .5208333333vw;
  min-width: 0;
}
@media (max-width: 1536px) { .cardWrapper .main .cardProducts__list .cartRow__body { gap: 8px; } }

.cardWrapper .main .cardProducts__list .cartRow__info {
  display: flex;
  flex-direction: column;
  gap: .390625vw;
}
@media (max-width: 1536px) { .cardWrapper .main .cardProducts__list .cartRow__info { gap: 6px; } }

.cardWrapper .main .cardProducts__list .cartRow__text {
  display: flex;
  flex-direction: column;
  gap: .1302083333vw;
  min-width: 0;
}
@media (max-width: 1536px) { .cardWrapper .main .cardProducts__list .cartRow__text { gap: 2px; } }

/* Назва - максимум два рядки: у макеті довга назва саме так і загорнена,
   а третій рядок уже зсував би ціну за межі картки. */
.cardWrapper .main .cardProducts__list .cartRow__name {
  color: #111;
  display: -webkit-box;
  font-size: .9114583333vw;
  font-weight: 700;
  line-height: 1.3020833333vw;
  overflow: hidden;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts__list .cartRow__name { font-size: 14px; line-height: 20px; }
}
.cardWrapper .main .cardProducts__list .cartRow__name:hover { text-decoration: underline; }
/* Картка подарунка не клікається: без підкреслення й без руки на наведенні. */
.cardWrapper .main .cardProducts__list .cartRow--gift .cartRow__name:hover { text-decoration: none; }
.cardWrapper .main .cardProducts__list .cartRow--gift .cartRow__name,
.cardWrapper .main .cardProducts__list .cartRow--gift .cartRow__photo { cursor: default; }

.cardWrapper .main .cardProducts__list .cartRow__desc {
  color: #6c6c6c;
  display: -webkit-box;
  font-size: .78125vw;
  letter-spacing: .2px;
  line-height: 1.0416666667vw;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts__list .cartRow__desc { font-size: 12px; line-height: 16px; }
}

/* Варіант (обʼєм, набір) у макеті не намальований, але з каталогу він не
   зникає: 50 і 10 мл - різні товари в кошику, і не підписати їх не можна. */
.cardWrapper .main .cardProducts__list .cartRow__opts {
  color: #111;
  display: flex;
  flex-direction: column;
  font-size: .78125vw;
  gap: .1302083333vw;
  line-height: 1.0416666667vw;
  margin-top: .1302083333vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts__list .cartRow__opts { font-size: 12px; gap: 2px; line-height: 16px; margin-top: 2px; }
}

/* Порожні діти текстового блоку (рядок опцій, коли опцій нема) все одно брали
   свій проміжок - рейтинг з'їжджав на 4 вниз, і над зірками виходило 12
   замість 8. У макеті над зірками 8 (6 + 2 усередині рамки рейтингу), під
   ними 10 (2 + 8 до рядка з ціною) - відступи РІЗНІ. */
.cardWrapper .main .cardProducts__list .cartRow__text > *:empty { display: none; }

.cardWrapper .main .cardProducts__list .cartRow__rating {
  align-items: center;
  /* У макеті рядок рейтингу обіймає вміст (90), а не тягнеться на всю
     ширину колонки - інакше ловить кліки на порожньому місці. */
  align-self: flex-start;
  display: flex;
  gap: .390625vw;
}
@media (max-width: 1536px) { .cardWrapper .main .cardProducts__list .cartRow__rating { gap: 6px; } }
.cardWrapper .main .cardProducts__list .cartRow__rating .stars {
  align-items: center;
  display: flex;
  gap: .1302083333vw;
}
@media (max-width: 1536px) { .cardWrapper .main .cardProducts__list .cartRow__rating .stars { gap: 2px; } }
/* Зірка - МАСКА, а не картинка: колір заливки міняє клас `stars_N`
   на батькові, тому сам контур мусить бути безбарвним. Прийом і сам
   контур - ті самі, що в донорському правилі для сторінки кошика. */
.cardWrapper .main .cardProducts__list .cartRow__rating .stars .item {
  background-color: #ffe540;
  height: .78125vw;
  width: .78125vw;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0L7.76336 3.57295L11.7063 4.1459L8.85317 6.92705L9.52671 10.8541L6 9L2.47329 10.8541L3.14683 6.92705L0.293661 4.1459L4.23664 3.57295L6 0Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0L7.76336 3.57295L11.7063 4.1459L8.85317 6.92705L9.52671 10.8541L6 9L2.47329 10.8541L3.14683 6.92705L0.293661 4.1459L4.23664 3.57295L6 0Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts__list .cartRow__rating .stars .item { height: 12px; width: 12px; }
}
/* Зірки точно з макета 2182:20876: жовтий #ffe540, повна зірка - заливка,
   решта - той самий контур обведенням. 4.9 у макеті намальовано як чотири
   повні й одна контурна, тобто ціла частина оцінки, а не округлення. */
.cardWrapper .main .cardProducts__list .cartRow__rating .stars .item--empty {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M7.31543 3.79395L7.43164 4.03027L7.69141 4.06738L10.6318 4.49414L8.50391 6.56934L8.31641 6.75293L8.36035 7.01172L8.8623 9.93945L6.23242 8.55762L6 8.43555L5.76758 8.55762L3.13672 9.93945L3.63965 7.01172L3.68359 6.75293L3.49609 6.56934L1.36719 4.49414L4.30859 4.06738L4.56836 4.03027L4.68457 3.79395L6 1.12891L7.31543 3.79395Z' stroke='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M7.31543 3.79395L7.43164 4.03027L7.69141 4.06738L10.6318 4.49414L8.50391 6.56934L8.31641 6.75293L8.36035 7.01172L8.8623 9.93945L6.23242 8.55762L6 8.43555L5.76758 8.55762L3.13672 9.93945L3.63965 7.01172L3.68359 6.75293L3.49609 6.56934L1.36719 4.49414L4.30859 4.06738L4.56836 4.03027L4.68457 3.79395L6 1.12891L7.31543 3.79395Z' stroke='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
}

.cardWrapper .main .cardProducts__list .cartRow__rating .value {
  color: #9c9c9c;
  font-size: .78125vw;
  letter-spacing: .2px;
  line-height: 1.0416666667vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts__list .cartRow__rating .value { font-size: 12px; line-height: 16px; }
}

.cardWrapper .main .cardProducts__list .cartRow__bottom {
  align-items: center;
  display: flex;
  gap: .5208333333vw;
  justify-content: space-between;
}
@media (max-width: 1536px) { .cardWrapper .main .cardProducts__list .cartRow__bottom { gap: 8px; } }

.cardWrapper .main .cardProducts__list .cartRow__price {
  align-items: center;
  display: flex;
  font-size: .9114583333vw;
  gap: .390625vw;
  line-height: 1.3020833333vw;
  min-width: 0;
  white-space: nowrap;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts__list .cartRow__price { font-size: 14px; gap: 6px; line-height: 20px; }
}
.cardWrapper .main .cardProducts__list .cartRow__price .old { color: #b4b4b4; text-decoration: line-through; }
.cardWrapper .main .cardProducts__list .cartRow__price .new { color: #111; font-weight: 700; }
/* Акційна ціна - той самий бренд-акцент, що на сторінці товару. */
.cardWrapper .main .cardProducts__list .cartRow__price .new.sale { color: #ff5c42; }

/* Плашка подарунка стоїть там, де в звичайного рядка лічильник: кількість
   подарунка людина не міняє. */
.cardWrapper .main .cardProducts__list .cartRow__giftLabel {
  align-items: center;
  background: #f6f6f6;
  border-radius: .390625vw;
  color: #43c400;
  display: flex;
  flex: 0 0 auto;
  font-size: .78125vw;
  gap: .390625vw;
  letter-spacing: .5px;
  line-height: 1.0416666667vw;
  padding: .2604166667vw .5208333333vw .390625vw;
  white-space: nowrap;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts__list .cartRow__giftLabel {
    border-radius: 6px;
    font-size: 12px;
    gap: 6px;
    line-height: 16px;
    padding: 4px 8px 6px;
  }
}
.cardWrapper .main .cardProducts__list .cartRow__giftLabel svg {
  display: block;
  flex: 0 0 auto;
  height: 1.0416666667vw;
  width: 1.0416666667vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts__list .cartRow__giftLabel svg { height: 16px; width: 16px; }
}

/* ---------- лічильник ---------- */
/* Кружки 28 з іконкою 12 всередині. Імена `mines`/`plus` і `input.quantity`
   лишаються донорські: за них тримається `assets/cart-drawer.js`. */
.cardWrapper .main .cardProducts__list .cartRow .quantityWrap {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: .6510416667vw;
}
@media (max-width: 1536px) { .cardWrapper .main .cardProducts__list .cartRow .quantityWrap { gap: 10px; } }

.cardWrapper .main .cardProducts__list .cartRow .quantityWrap .mines,
.cardWrapper .main .cardProducts__list .cartRow .quantityWrap .plus {
  background-color: #f6f5f3;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: .78125vw .78125vw;
  border-radius: 50%;
  cursor: pointer;
  display: block;
  flex: 0 0 auto;
  height: 1.8229166667vw;
  transition: .2s;
  width: 1.8229166667vw;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts__list .cartRow .quantityWrap .mines,
  .cardWrapper .main .cardProducts__list .cartRow .quantityWrap .plus {
    background-size: 12px 12px;
    height: 28px;
    width: 28px;
  }
}
.cardWrapper .main .cardProducts__list .cartRow .quantityWrap .plus { background-color: #f6f6f6; }
.cardWrapper .main .cardProducts__list .cartRow .quantityWrap .mines:hover,
.cardWrapper .main .cardProducts__list .cartRow .quantityWrap .plus:hover { background-color: #ededeb; }
.cardWrapper .main .cardProducts__list .cartRow .quantityWrap .mines {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5.5H10.5V6.5H1.5V5.5Z' fill='%23111111'/%3E%3C/svg%3E");
}
.cardWrapper .main .cardProducts__list .cartRow .quantityWrap .plus {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.5 6.5V11H6.5V6.5H11V5.5H6.5V1H5.5V5.5H1V6.5H5.5Z' fill='%23111111'/%3E%3C/svg%3E");
}
.cardWrapper .main .cardProducts__list .cartRow .quantityWrap input.quantity {
  background: none;
  border: none;
  color: #111;
  font-family: inherit;
  font-size: .9114583333vw;
  font-weight: 400;
  height: auto;
  line-height: 1.3020833333vw;
  margin: 0;
  padding: 0;
  text-align: center;
  /* Макет 2182:20876: лічильник - це ТЕКСТ шириною 9 при «1», тож уся
     трійка виходить 85 (28 + 10 + 9 + 10 + 28). Фіксовані 20 робили 96.
     Кількість цифр приходить інлайном у `--d`, щоб «10» не обрізало. */
  width: calc(var(--d, 1) * .5859375vw);
  -moz-appearance: textfield;
}
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts__list .cartRow .quantityWrap input.quantity {
    font-size: 14px;
    line-height: 20px;
    width: calc(var(--d, 1) * 9px);
  }
}
.cardWrapper .main .cardProducts__list .cartRow .quantityWrap input.quantity::-webkit-outer-spin-button,
.cardWrapper .main .cardProducts__list .cartRow .quantityWrap input.quantity::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* Картка подарунка за таймером живе в тому самому списку. Поля їй тепер
   дає `.cardProducts`, тож власні бічні відступи знімаємо. */
.cardWrapper .main .cardProducts__list .cartGift__row { margin-left: 0; margin-right: 0; margin-top: 0; }
/* `:not([hidden])` тут обовʼязковий. Елемент `<cart-gift-timer>` лишається
   в розмітці й тоді, коли подарунка нема (`hidden`), а сусідський селектор
   `+` на приховане теж наводиться - і перший рядок списку з'їжджав на 12
   вниз без жодної картки над ним (заміряно: список починався на 188
   замість 176). */
.cardWrapper .main .cardProducts__list .cartGift:not([hidden]) + .cartRow { border-top: none; margin-top: .78125vw; }
@media (max-width: 1536px) {
  .cardWrapper .main .cardProducts__list .cartGift:not([hidden]) + .cartRow { margin-top: 12px; }
}

/* ---------- низ ---------- */
.cardWrapper .footer {
  border-top: none;
  box-shadow: 0 -4px 16px 0 rgba(0, 0, 0, .12);
  display: flex;
  flex-direction: column;
  gap: 1.0416666667vw;
  padding: 1.0416666667vw;
}
@media (max-width: 1536px) { .cardWrapper .footer { gap: 16px; padding: 16px; } }
/* На мобілці під останньою кнопкою в макеті 2182:20657 лишається більше
   повітря: сам низ 16 плюс 6 хвоста кадру - разом 22. */
/* На мобілці низ тісніший: крок між блоками 10 замість 16 - власник просив
   компактніше між кнопкою пакування, галочкою і сумами. Власні відступи
   галочки (8 згори й знизу) і кнопки замовлення (8 знизу) тут знімаємо,
   інакше замість 10 виходило 18. */
@media (max-width: 768px)  {
  .cardWrapper .footer { gap: 10px; padding: 16px 16px 22px; }
  .cardWrapper .footer .cartDrawerOpts { margin: 0; }
  .cardWrapper .footer .cart-drawer__checkout { margin-bottom: 0; }
  /* Пара кнопок лишається з кроком 12 при загальному 10. */
  .cardWrapper .footer .cart-drawer__checkout + .btn.continueShopping { margin-top: 2px; }
}

/* Порожні діти футера (наприклад блок сертифікатів, коли їх нема) все одно
   з'їдали свій проміжок 16 - над «Сума товарів» виходив подвійний відступ. */
.cardWrapper .footer > *:empty { display: none; }

.cardWrapper .footer .cartSum__saved,
.cardWrapper .footer .sum {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0;
  width: 100%;
}
/* Знижка і сума - одна пара рядків із кроком 8, тому власний проміжок
   колонки (16) між ними знімаємо негативним відступом. */
.cardWrapper .footer .cartSum__saved + .sum { margin-top: calc(.5208333333vw - 1.0416666667vw); }
@media (max-width: 1536px) { .cardWrapper .footer .cartSum__saved + .sum { margin-top: -8px; } }
/* Крок у парі «знижка - сума» лишається 8, тож на мобілці від'ємний відступ
   рахується вже від 10. */
@media (max-width: 768px)  { .cardWrapper .footer .cartSum__saved + .sum { margin-top: -2px; } }

.cardWrapper .footer .cartSum__saved { color: #6c6c6c; }
.cardWrapper .footer .cartSum__saved .label {
  font-size: .78125vw;
  letter-spacing: .2px;
  line-height: 1.0416666667vw;
}
.cardWrapper .footer .cartSum__saved .value {
  font-size: .9114583333vw;
  line-height: 1.3020833333vw;
}
@media (max-width: 1536px) {
  .cardWrapper .footer .cartSum__saved .label { font-size: 12px; line-height: 16px; }
  .cardWrapper .footer .cartSum__saved .value { font-size: 14px; line-height: 20px; }
}

.cardWrapper .footer .sum {
  color: #111;
  font-size: 1.0416666667vw;
  font-weight: 700;
  line-height: 1.5625vw;
}
@media (max-width: 1536px) { .cardWrapper .footer .sum { font-size: 16px; line-height: 24px; } }
.cardWrapper .footer .sum .value { text-transform: none; }

/* ---------- кнопки низу ---------- */
.cardWrapper .footer .btn.toOrder,
.cardWrapper .footer .btn.continueShopping {
  border-radius: .6510416667vw;
  margin: 0;
  width: 100%;
}
@media (max-width: 1536px) {
  .cardWrapper .footer .btn.toOrder,
  .cardWrapper .footer .btn.continueShopping { border-radius: 10px; }
}
/* Кнопки йдуть парою з кроком 12, а не 16 як решта низу. */
.cardWrapper .footer .cart-drawer__checkout { width: 100%; }
.cardWrapper .footer .cart-drawer__checkout + .btn.continueShopping {
  margin-top: calc(.78125vw - 1.0416666667vw);
}
@media (max-width: 1536px) {
  .cardWrapper .footer .cart-drawer__checkout + .btn.continueShopping { margin-top: -4px; }
}

.cardWrapper .footer .btn.toOrder {
  background: #111;
  border-color: #111;
  color: #fff;
  height: 3.125vw;
  padding: 0 1.0416666667vw;
}
@media (max-width: 1536px) { .cardWrapper .footer .btn.toOrder { height: 48px; padding: 0 16px; } }
.cardWrapper .footer .btn.toOrder .wrap {
  align-items: center;
  display: flex;
  gap: 1.0416666667vw;
  justify-content: center;
}
@media (max-width: 1536px) { .cardWrapper .footer .btn.toOrder .wrap { gap: 16px; } }
.cardWrapper .footer .btn.toOrder .text {
  font-size: .9114583333vw;
  font-weight: 600;
  letter-spacing: .5px;
  line-height: 1.3020833333vw;
}
.cardWrapper .footer .btn.toOrder .amount {
  font-size: .9114583333vw;
  font-weight: 700;
  line-height: 1.3020833333vw;
  white-space: nowrap;
}
@media (max-width: 1536px) {
  .cardWrapper .footer .btn.toOrder .text,
  .cardWrapper .footer .btn.toOrder .amount { font-size: 14px; line-height: 20px; }
}
.cardWrapper .footer .btn.toOrder .sep {
  background: #fff;
  display: block;
  flex: 0 0 auto;
  height: 1.5625vw;
  opacity: .25;
  width: 1px;
}
@media (max-width: 1536px) { .cardWrapper .footer .btn.toOrder .sep { height: 24px; } }

.cardWrapper .footer .btn.continueShopping {
  background: #fff;
  border: 1px solid #b4b4b4;
  color: #111;
  height: 3.125vw;
  text-decoration: none;
}
@media (max-width: 1536px) { .cardWrapper .footer .btn.continueShopping { height: 48px; } }
.cardWrapper .footer .btn.continueShopping .text {
  font-size: .9114583333vw;
  font-weight: 600;
  letter-spacing: .5px;
  line-height: 1.3020833333vw;
}
@media (max-width: 1536px) { .cardWrapper .footer .btn.continueShopping .text { font-size: 14px; line-height: 20px; } }
.cardWrapper .footer .btn.continueShopping:hover { opacity: 1; background: #f6f5f3; text-decoration: none; }

/* Галочка «не дзвонити» лишилась єдиним, що вціліло з блока опцій: поле
   промокоду з шухляди прибране (переїхало на оплату). Вписуємо її у новий
   низ тим самим дрібним кеглем, що й рядок знижки. */
.cardWrapper .cartDrawerOpts { margin: 0; padding: 0; }
.cardWrapper .footer .cart-options { margin: 0; }
.cardWrapper .footer .cart-options__row {
  align-items: center;
  color: #6c6c6c;
  cursor: pointer;
  display: flex;
  font-size: .78125vw;
  gap: .5208333333vw;
  letter-spacing: .2px;
  line-height: 1.0416666667vw;
}
@media (max-width: 1536px) {
  .cardWrapper .footer .cart-options__row { font-size: 12px; gap: 8px; line-height: 16px; }
}
.cardWrapper .footer .cart-options__row input[type="checkbox"] {
  accent-color: #111;
  flex: 0 0 auto;
  height: 1.0416666667vw;
  margin: 0;
  width: 1.0416666667vw;
}
@media (max-width: 1536px) {
  .cardWrapper .footer .cart-options__row input[type="checkbox"] { height: 16px; width: 16px; }
}
.cardWrapper .footer .cart-options__note {
  color: #9c9c9c;
  font-size: .6510416667vw;
  line-height: .9114583333vw;
  margin: .2604166667vw 0 0;
}
@media (max-width: 1536px) {
  .cardWrapper .footer .cart-options__note { font-size: 10px; line-height: 14px; margin-top: 4px; }
}

/* Кнопка подарункового пакування лишається: це жива механіка зі своїм
   попапом, у макет цього екрана вона просто не потрапила. */
.cardWrapper .footer .promoBlock { margin: 0; }

/* Пара кнопок низу на мобілці: загальний крок там 10, а між кнопками треба
   12 - правило мусить стояти ПІСЛЯ гілки 1536, інакше її -4 перемагає. */
@media (max-width: 768px) {
  .cardWrapper .footer .cart-drawer__checkout + .btn.continueShopping { margin-top: 2px; }
}

/* Серце-завантажувач як на оригіналі. Його стилі жили лише в CSS конструктора
   наборів, тож у шухляді на інших сторінках оверлей був порожнім білим. */
.cardWrapper .lds-heart { display: inline-block; height: 5.2083333333vw; position: relative; transform: rotate(45deg); transform-origin: 2.6041666667vw 2.6041666667vw; width: 5.2083333333vw; }
.cardWrapper .lds-heart div { animation: cart-lds-heart 1.2s cubic-bezier(.215, .61, .355, 1) infinite; background: #999; height: 2.0833333333vw; left: 2.0833333333vw; position: absolute; top: 2.0833333333vw; width: 2.0833333333vw; }
.cardWrapper .lds-heart div:before, .cardWrapper .lds-heart div:after { background: #999; content: " "; display: block; height: 2.0833333333vw; position: absolute; width: 2.0833333333vw; }
.cardWrapper .lds-heart div:before { border-radius: 50% 0 0 50%; left: -1.5625vw; }
.cardWrapper .lds-heart div:after { border-radius: 50% 50% 0 0; top: -1.5625vw; }
@media (max-width: 1536px) {
  .cardWrapper .lds-heart { height: 80px; transform-origin: 40px 40px; width: 80px; }
  .cardWrapper .lds-heart div { height: 32px; left: 32px; top: 32px; width: 32px; }
  .cardWrapper .lds-heart div:before, .cardWrapper .lds-heart div:after { height: 32px; width: 32px; }
  .cardWrapper .lds-heart div:before { left: -24px; }
  .cardWrapper .lds-heart div:after { top: -24px; }
}
@keyframes cart-lds-heart { 0% { transform: scale(.95); } 5% { transform: scale(1.1); } 39% { transform: scale(.85); } 45% { transform: scale(1); } 60% { transform: scale(.95); } 100% { transform: scale(.9); } }

/* ---------- низ шухляди за макетом 2243:43006 / 2243:42942 (23.10) ----------
   Сума → 24 → дві кнопки (gap 16, по 48) → 24 → текст згоди → низ 32 (моб 24).
   Крок колонки футера 16 (моб 10), тож до 24 добираємо відступом зверху.
   Над 1536 усе в vw, як і решта шухляди (px / 15.36). */
.cardWrapper .footer { padding-bottom: 2.0833333333vw; }
.cardWrapper .footer .cartDrawerActions { display: flex; flex-direction: column; gap: 1.0416666667vw; margin-top: .5208333333vw; width: 100%; }
.cardWrapper .footer .cartDrawerTerms { margin: .5208333333vw 0 0; }
@media (max-width: 1536px) {
  .cardWrapper .footer { padding-bottom: 32px; }
  .cardWrapper .footer .cartDrawerActions { gap: 16px; margin-top: 8px; }
  .cardWrapper .footer .cartDrawerTerms { margin-top: 8px; }
}
@media (max-width: 768px) {
  .cardWrapper .footer { padding-bottom: 24px; }
  .cardWrapper .footer .cartDrawerActions { margin-top: 14px; }
  .cardWrapper .footer .cartDrawerTerms { margin-top: 14px; }
}
.cardWrapper .footer .cartDrawerPack {
  align-items: center;
  background: #fff;
  border: 1px solid #b4b4b4;
  border-radius: .6510416667vw;
  color: #111;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: .9114583333vw;
  font-weight: 600;
  gap: .5208333333vw;
  height: 3.125vw;
  justify-content: center;
  letter-spacing: .5px;
  line-height: 1.3020833333vw;
  margin: 0;
  padding: 0 1.5625vw 0 1.3020833333vw;
  transition: border-color .15s ease;
  width: 100%;
}
.cardWrapper .footer .cartDrawerPack:hover { border-color: #111; }
.cardWrapper .footer .cartDrawerPack svg { display: block; flex: 0 0 auto; height: 1.0416666667vw; width: 1.0416666667vw; }
@media (max-width: 1536px) {
  .cardWrapper .footer .cartDrawerPack { border-radius: 10px; font-size: 14px; gap: 8px; height: 48px; line-height: 20px; padding: 0 24px 0 20px; }
  .cardWrapper .footer .cartDrawerPack svg { height: 16px; width: 16px; }
}
/* «Оформити замовлення | сума»: у макеті риска біла без прозорості, сума 600. */
.cardWrapper .footer .btn.toOrder .sep { opacity: 1; }
.cardWrapper .footer .btn.toOrder .amount { font-weight: 600; letter-spacing: .5px; }

.cardWrapper .footer .cartDrawerTerms {
  color: #727272;
  font-size: .78125vw;
  letter-spacing: .2px;
  line-height: 1.0416666667vw;
  width: 100%;
}
@media (max-width: 1536px) { .cardWrapper .footer .cartDrawerTerms { font-size: 12px; line-height: 16px; } }
.cardWrapper .footer .cartDrawerTerms__star { color: #ff0505; }
.cardWrapper .footer .cartDrawerTerms__links { text-decoration: underline; }
.cardWrapper .footer .cartDrawerTerms a { color: inherit; text-decoration: underline; }
.cardWrapper .footer .cartDrawerTerms a:hover { color: #111; }

/* Під галочкою «не дзвонити» відступ 8, як між рядками сум: загальний gap
   низу (16 / 10 на мобілці) тут завеликий. */
.cardWrapper .footer .cartDrawerOpts { margin-bottom: -.5208333333vw; }
@media (max-width: 1536px) { .cardWrapper .footer .cartDrawerOpts { margin-bottom: -8px; } }
@media (max-width: 768px)  { .cardWrapper .footer .cartDrawerOpts { margin-bottom: -2px; } }

/* ---------- cart.css ---------- */
/* Стани позиції кошика: клік має бути видно одразу.

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

   Джерело: migrate/AGENT-BRIEF.md, пункт «стани кошика» з переліку правок. */
.cart-item { transition: opacity .18s ease; }
.cart-item.is-pending { opacity: .45; pointer-events: none; position: relative; }
.cart-item.is-pending::after {
  content: ""; position: absolute; top: 50%; right: 12px; width: 16px; height: 16px;
  margin-top: -8px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: cart-spin .7s linear infinite;
}
.cart-item button:disabled, .cart-item input:disabled { cursor: default; opacity: .6; }
.cart-item [data-cart-remove] { transition: opacity .12s ease, transform .12s ease; }
.cart-item [data-cart-remove]:active,
.cart-item [data-cart-remove].is-clicked { transform: scale(.96); opacity: .7; }
@keyframes cart-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cart-item.is-pending::after { animation: none; }
}

/* §261/§262. Сторінка кошика повторює розмітку рядка з шухляди
   (`.cardWrapper > .main > .cardProducts > .product`), щоб узяти готовий
   донорський CSS звідти й не дублювати правила. Але сама `.cardWrapper`
   у шухляді — це панель на всю висоту екрана; на сторінці це просто
   контейнер, тому панельні властивості знімаємо. */
.cart-page .cardWrapper.cart-page__card {
  background: none;
  border: none;
  box-shadow: none;
  display: block;
  height: auto;
  max-height: none;
  position: static;
  width: auto;
}
.cart-page .cardWrapper.cart-page__card .main { overflow: visible; padding: 0; }

/* §260. Поле промокоду. Донор дає лише розмітку — правил для
   `.promoInputsContent` у нього немає (блок у нього схований цілком),
   тож вигляд зібрано в його ж мові: рамка 1px #dedede, радіус 2,
   висота 40, кнопка `.btn__white`.

   §333. ДВА КОНТЕКСТИ, А НЕ ОДИН. Поле переїхало ще й у дравер кошика, а
   всі правила нижче були заскоплені на `.cart-page` — тобто в дравері не
   діяло ЖОДНЕ. Заміряно на стенді, та сама розмітка, ширина 390:

       у `.cart-page`   блок 390×40,    хрестик × 16×16
       у `.cardWrapper` блок 358×645.45, хрестик × 358×556.09

   Роздувався саме хрестик: `.mileUseClose svg { height: 100% }` без
   правила на самому `.mileUseClose` не має від чого рахувати відсоток,
   і забирав 556 px там, де всього 522 доступно.

   Префікс НЕ знімаю, а дублюю: сторінка `/cart` лишається запасним входом
   (без JS дравер не відкривається), тож обидва контексти живі й обидва
   мусять малюватись однаково. `.cardWrapper` — корінь дравера. */
.cart-page .promoInputsContent,
.cardWrapper .promoInputsContent { margin: 24px 0 0; max-width: 420px; }
.cart-page .promoInputGroup,
.cardWrapper .promoInputGroup { display: flex; gap: 8px; }
.cart-page .promoInputGroup .inputGr,
.cardWrapper .promoInputGroup .inputGr { flex: 1 1 auto; position: relative; }
.cart-page .promoInputGroup input,
.cardWrapper .promoInputGroup input {
  border: 1px solid #dedede; border-radius: 2px; color: #111;
  font: inherit; font-size: 14px; height: 40px; padding: 0 34px 0 12px; width: 100%;
}
.cart-page .promoInputGroup .mileUseClose,
.cardWrapper .promoInputGroup .mileUseClose {
  cursor: pointer; height: 16px; opacity: .6; position: absolute;
  right: 10px; top: 12px; width: 16px;
}
.cart-page .promoInputGroup .mileUseClose:hover,
.cardWrapper .promoInputGroup .mileUseClose:hover { opacity: 1; }
.cart-page .promoInputGroup .mileUseClose .iconSvg,
.cart-page .promoInputGroup .mileUseClose svg,
.cardWrapper .promoInputGroup .mileUseClose .iconSvg,
.cardWrapper .promoInputGroup .mileUseClose svg { display: block; height: 100%; width: 100%; }
.cart-page .promoInputGroup .btn,
.cardWrapper .promoInputGroup .btn {
  background: #fff; border: 1px solid #333; border-radius: 2px; color: #111;
  cursor: pointer; font: inherit; font-size: 14px; height: 40px; padding: 0 16px; transition: .3s;
}
.cart-page .promoInputGroup .btn:hover,
.cardWrapper .promoInputGroup .btn:hover { background: #f6f6f6; }
.cart-page .promoMessage,
.cardWrapper .promoMessage { color: #767676; font-size: 13px; line-height: 18px; margin-top: 8px; }
.cart-page .promoMessage.is-error,
.cardWrapper .promoMessage.is-error { color: #ff5f4a; }
.cart-page__packages { margin: 16px 0 0; max-width: 420px; }

/* ================= §316. `hidden` на блоці рекомендацій кошика =================
   ДЕФЕКТ, ЯКИЙ БАЧИВ ВЛАСНИК. Секція `cart-recommendations` ховає свою
   оболонку атрибутом — `<div class="cart-recos" hidden …>` — і покладалась
   на типове браузерне `[hidden] { display: none }`. У коментарі секції так
   і було написано: «на `.cart-recos` жодного правила `display` немає, тож
   типове `[hidden]` браузера тут надійне й не потребує ані рядка CSS».

   Правило Є, і воно живе в `base.css` (рядок 677):

       .cart-recos { display: block; margin-top: var(--s-40); }

   Браузерне `[hidden]` належить таблиці КОРИСТУВАЦЬКОГО АГЕНТА, а будь-яке
   авторське оголошення її перебиває — незалежно від ваги селектора. Тобто
   `hidden` на цьому вузлі не робив НІЧОГО: заголовок «Also pay attention to»
   і порожня карусель зі стрілками стояли на сторінці завжди, зокрема тоді,
   коли `cross-sell.js` навмисно ховав блок — при порожньому наборі
   рекомендацій і при впалому запиті (429, а вітрина віддає його регулярно).

   `cross-sell.js` при цьому справний: `hide()` ставить і клас `hide`, і
   атрибут. Але клас теж не рятував — `.hide` описаний лише як
   `.cardProductsAttentionWrap.hide`, а `.cart-recos` це інший вузол.

   Лікуємо вагою, а не `!important` і не правкою `base.css` (файл спільний):
   `.cart-recos[hidden]` це (0,2,0) проти (0,1,0) у base.css. Той самий
   прийом уже двічі застосований у проєкті з тієї ж причини —
   `header.css` (список локалізації) і `card-tile.css` (лічильник на ховері). */
.cart-recos[hidden] { display: none; }

/* ============================================================
   §332. КНОПКА ЧЕКАУТУ НА СТОРІНЦІ КОШИКА — ЗАКРІПЛЕНА НАД НИЖНЬОЮ ПАНЕЛЛЮ

   Прохання власника. До цього кнопка їхала в потоці й стояла праворуч
   (`justify-content: flex-end` у батька): заміряно зсув від центру
   126 px на 390 і 611 на 1440. Тепер на мобілці вона фіксована над
   `.mobile-bar` і на всю ширину — щоб не доводилось прокручувати
   довгий кошик до низу.

   Три речі, які тут важливі:

   1. `--mb-h` — висота нижньої панелі. Вона фіксована й перекриває низ
      сторінки; кнопка сідає РІВНО над нею, а не на неї. Задача 507: панелі
      більше немає, тож `--mb-h: 0px` — кнопка стоїть над краєм екрана, а
      формули лишились, щоб не переписувати їх, якщо панель повернеться.
   2. `env(safe-area-inset-bottom)` — на айфонах із домашньою смугою низ
      екрана з'їдається системою. Без цього кнопка частково опинялась би
      під нею.
   3. Нижній падінг сторінці — на висоту кнопки плюс панель. Інакше
      останній рядок кошика назавжди лишався б під закріпленою кнопкою,
      і до нього не можна було б домотати.
   ============================================================ */
@media (max-width: 1000px) {
  .cart-page { --mb-h: 0px; --ck-h: 52px; --ck-gap: 12px;
    padding-bottom: calc(var(--mb-h) + var(--ck-h) + var(--ck-gap) * 2 + env(safe-area-inset-bottom, 0px)); }

  .cart-page [name='checkout'] {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--mb-h) + var(--ck-gap) + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    width: auto;
    min-width: 0;
    height: var(--ck-h);
    margin: 0;
  }
}

/* ---------- collection.css ---------- */
/* Сторінка колекції: верхня смуга (крихти · заголовок · опис · лічильник ·
 * сортування й фільтр) і низ (плашки суміжних категорій · SEO-блок).
 * Плитка товару сюди НЕ входить — вона в card-tile.css, у свого агента.
 *
 * Джерело правди — `original/site-assets/css/catalog.css`, блоки
 * `.catalogHeaderWrap`, `.productCarouselViewed.otherCategoriesTabs`,
 * `.seoTextWrap`. Сайт намальований під базу **1536**, і майже кожне
 * значення має дві гілки: `Nvw` (вище 1536) і те саме число в пікселях
 * усередині `@media (max-width:1536px)`. Тому на 1440 заголовок — рівно
 * 64px, а не 4.1666vw (=60px): працює піксельна гілка. Відступи-падінги
 * при цьому лишаються у vw і тягнуться з шириною вікна.
 *
 * Порядок медіа-блоків повторює оригінал (base → 1536 → 1000 → 768 → 599):
 * там пізніші правила перекривають ранні, і будь-яка перестановка міняє
 * результат на 900 і 415.
 */

/* ─────────────────────────── корінь секції ─────────────────────────── */

/* base.css дає `.collection{margin:40px auto}` для всіх шаблонів разом;
   у оригіналі каталог іде впритул до шапки й на всю ширину вікна. */
.collection {
  margin: 0;
  padding: 0;
  max-width: none;
  width: 100%;
}

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

/* `.catalogHeaderWrap .catalogHeader` — власного падінга не має:
   бокові відступи задає `.collection__intro` (8.3333vw), а не шапка.
   У design.css тут стояло `padding:0 4.1666vw`, і через нього вся верхня
   смуга була на 60px вужча й зсунута вправо. */
.collection__header {
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

/* `.catalogHeader.noPhoto .infoWrapper` — падінг однаковий з усіх боків:
   8.3333vw = 120px на 1440, 112.5px на 1350. Саме ці 120px зверху й знизу
   і були найбільшою дірою у верхній смузі. */
.collection__intro {
  align-items: center;
  display: flex;
  padding: 8.3333333333vw;
  width: 100%;
}

/* `.infoWrapper .infoWrap` + `.catalogHeader .textWrap` */
.collection__intro-inner {
  position: relative;
  width: 100%;
}

/* ── крихти ── `.breadcrumbsWrap`
   Хитрість оригіналу: посилання 14/16, а поточна сторінка й роздільник —
   16px від body. Через це рядок 20px заввишки в контейнері з min-height 22.5. */
.collection__intro .breadcrumbs {
  color: #333;
  font-size: 16px;
  line-height: normal;
  margin: 0 0 1.5625vw;
  min-height: 1.5625vw;
  overflow-x: auto;
  padding: 0;
  scrollbar-width: none;
  white-space: nowrap;
}
.collection__intro .breadcrumbs::-webkit-scrollbar { display: none; }
.collection__intro .breadcrumbs a {
  color: #333;
  display: inline-block;
  font-size: .9114583333vw;
  line-height: 1.0416666667vw;
  text-decoration: none;
}
.collection__intro .breadcrumbs a:hover { color: #333; text-decoration: underline; }
/* Роздільник «/» — у оригіналі це `.item:before{content:"/";padding:0 4px}`.
   Плюс 0.2778em ліворуч: крихти оригіналу — це `inline-block` елементи,
   між якими в HTML стоїть перенос рядка, і він малюється пробілом 16px-шрифту
   (в Inter це рівно 0.2778em = 4.45px). У нашій розмітці елементи стоять
   впритул, тож пробіл доводиться повертати відступом — без нього вся друга
   крихта стоїть на 4.45px лівіше за еталон. */
.collection__intro .breadcrumbs > span { color: #333; margin: 0 0 0 .2778em; padding: 0 4px; }
.collection__intro .breadcrumbs > span[aria-current] { color: #999; margin: 0; padding: 0; }

/* ── заголовок ── `.textWrap .title` */
.collection__title {
  color: #111;
  font-size: 4.1666666667vw;
  font-weight: 700;
  line-height: 4.6875vw;
  margin: 0 0 1.6276041667vw;
  text-transform: none;
}

/* ── опис ── `.textWrap .subTitle`; власних відступів не має:
   зверху працює margin-bottom заголовка, знизу — margin-top рядка керування */
.collection__description {
  color: #333;
  font-size: .9765625vw;
  line-height: 1.5625vw;
  margin: 0;
}
.collection__description > :first-child { margin-top: 0; }
.collection__description > :last-child { margin-bottom: 0; }

/* ── рядок керування ── `.controlsWrap`
   margin-bottom нема: низ смуги тримає падінг `.collection__intro`. */
.collection__controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.0416666667vw;
  justify-content: space-between;
  margin: 1.0416666667vw 0 0;
}
.collection__count {
  color: #333;
  flex: 2 0 auto;
  font-size: 1.0416666667vw;
  line-height: 1.5;
  margin: 0;
}

/* `.catalogHeaderButtonWrap`; у варіанті noPhoto оригінал розвертає ряд —
   зліва «Filter», справа «Sort», хоча в розмітці порядок зворотний. */
.collection__controls-buttons {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
  gap: 1.0416666667vw;
  justify-content: center;
}

/* ── кнопки ── `.catalogHeaderButton`
   ШРИФТ ARIAL — не помилка. Старий сайт ніде не робить `font:inherit`
   для `<button>`, тож ці дві кнопки (і тільки вони) малюються дефолтним
   шрифтом браузера. Заміряно на живому сайті: «Sort» 14px = 25.69px,
   що збігається з Arial і не збігається з Inter (27.45px). Різниця
   ~2px на підпис зсуває всю праву групу, бо ряд вирівняний по правому краю. */
.catalog-button {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 2.6041666667vw;
  cursor: pointer;
  display: flex;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13.3333px;
  font-weight: 400;
  gap: .78125vw;
  height: 2.734375vw;
  justify-content: center;
  min-height: 0;
  padding: 0 1.0416666667vw;
  transition: .3s;
}
.catalog-button > span {
  font-size: .9114583333vw;
  line-height: 1.0416666667vw;
}
.catalog-button svg {
  display: block;
  flex: 0 0 auto;
  height: 1.0416666667vw;
  width: 1.0416666667vw;
}
.catalog-button--light { background: #f6f6f6; color: #333; }
.catalog-button--dark { background: #333; color: #fff; }
/* Ховер міняє ТІЛЬКИ фон: `.catalogHeaderButton.light:hover{background:#999}`
   і те саме для `.dark`. Колір тексту лишається своїм — заміряно на живому
   донорі, «Sort» тримає rgb(51,51,51) і в спокої, і під курсором.
   Колір доводиться писати явно: design.css:560 має правило тієї ж
   специфічності з `color:#fff`, і без цього рядка воно виграє за порядком —
   у нас підпис на ховері білів. */
.catalog-button--light:hover { background: #999; color: #333; }
.catalog-button--dark:hover { background: #999; color: #fff; }
.catalog-button__value { display: none; }
.catalog-button__value.is-active { display: inline; }
.catalog-button__value::before { content: "("; }
.catalog-button__value::after { content: ")"; }

/* ── шапка з банером ── `.catalogHeader.imgRight`
   Банер мають 6 колекцій: accessories · aromaty-dlya-domu · doglyad-za-tilom ·
   make-up · parfumy · travel-versii. На деску коробка задана жорстко (31.2vw),
   тож пропорції файлу не видно. На мобілці — навпаки, і саме там ховалась
   найдорожча діра шаблону: див. коментар у гілці ≤1000. */
.collection__header--banner {
  align-items: stretch;
  flex-direction: row-reverse;
  gap: 0;
  height: 31.2vw;
  margin-bottom: 0;
}
/* `order` тут не косметика, а ЛІВО/ПРАВО. У design.css лишилось
   `.collection__header--banner .collection__banner{order:2}`, і в ряду
   `row-reverse` воно клало банер ЛІВОРУЧ, а текст праворуч — дзеркально до
   оригіналу, де клас так і зветься `imgRight` (фото 720…1440, текст 0…720).
   Заміряно на 1440: еталон `.photo`@720 / `.infoWrapper`@0, у нас було
   навпаки. Коштувало 310 тис. px — 82% усієї розбіжності `accessories`
   на деску, бо дзеркальна половина не збігається сама з собою ніде. */
.collection__header--banner .collection__banner {
  display: block;
  height: 100%;
  order: 0;
  position: relative;
  width: 50%;
}
/* Ряд кнопок розвернутий ЛИШЕ у варіанті без фото. Заміряно на 1440:
   noPhoto — Filter@1128, Sort@1234 (тобто row-reverse), з банером —
   Sort@408, Filter@509 (звичайний порядок). */
.collection__header--banner .collection__controls-buttons { flex-direction: row; }
.collection__header--banner .collection__banner img {
  border-radius: 0;
  display: block;
  height: 31.2vw;
  object-fit: cover;
  width: 100%;
}
.collection__header--banner .collection__intro {
  padding: 0 8.3333333333vw;
  padding-right: 8.3333333333vw;
  width: 50%;
}

/* ───────────────────── сітка: обгортки навколо плитки ───────────────────── */

.collection__layout { display: block; grid-template-columns: none; gap: 0; margin: 0; }
.collection__sidebar { display: none; }
.collection__apps, .collection__main { grid-column: auto; margin: 0; min-width: 0; }
.collection__list { display: block; margin: 0; }

/* ───────── кнопка «ще товари» ───────── `.pagination` + `.btn.btn__blank`
   Оригінал: секція на всю ширину з `padding-top:2.4739vw` (35.6px на 1440)
   і чорна кнопка-прямокутник 40px по центру, ширина — по тексту.
   `.btn` тут ЯВНО задає `font-family:Inter`, на відміну від кнопок фільтра
   й сортування, які лишились на дефолтному Arial. */
.collection__layout .pagination {
  align-items: center;
  display: flex;
  gap: 0;
  justify-content: center;
  margin: 0;
  padding-top: 2.4739583333vw;
}
.collection__more {
  align-items: center;
  background: #111;
  border: .0651041667vw solid #111;
  border-radius: .1302083333vw;
  color: #fff;
  display: flex;
  font-family: inherit;
  font-size: .9114583333vw;
  font-weight: 400;
  gap: .5208333333vw;
  height: 2.6041666667vw;
  justify-content: center;
  line-height: 1.0416666667vw;
  margin: 0;
  min-width: 2.6041666667vw;
  padding: 0 .6510416667vw;
  text-align: center;
  text-decoration: none;
  transition: .3s;
}
.collection__more:hover { background: #111; color: #fff; opacity: .9; }
.collection__more.is-loading { opacity: .5; pointer-events: none; }

/* base.css трактує `data-infinite="false"` як «JS не вантажить, показуємо
   числову пагінацію»: ховає `.collection__more` і показує `.pagination__fallback`.
   Старий сайт поводиться інакше — кнопка «More products» є завжди, а номерів
   сторінок нема; довантаження відбувається по НАТИСКАННЮ, не саме по собі
   (`infinite-list.js` чіпляє клік завжди, спостерігач — лише коли auto).
   Тому на сторінці колекції перевертаємо обидва правила назад. */
.collection .collection__layout infinite-list:not([data-infinite="true"]) .collection__more { display: flex; }
.collection .collection__layout infinite-list .pagination__fallback { display: none; }

/* ───────── плашки суміжних категорій ───────── `.otherCategoriesTabs`
   Секція окрема, ПЕРЕД SEO-блоком і поза його падінгами.
   margin-top фіксовані 85px (гілка ≤1921), margin-bottom тягнеться у vw. */
.related-collections {
  display: block;
  margin: 85px 0 3.90625vw;
}
.related-collections__title { display: none; }
.related-collections__list {
  -webkit-overflow-scrolling: touch;
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  /* 16px, як у оригіналі (успадковані від body): у режимі `display:block`
     на мобілці проміжок між плашками дає ПРОБІЛ між тегами, і його ширина
     рахується від шрифту контейнера, а не плашки. Наш body — 14px, і без
     цього рядка кожна наступна плашка стояла б на 0.55px ближче. */
  font-size: 16px;
  list-style: none;
  margin: 0 0 0 36px;
  overflow-x: auto;
  padding: 0 0 4px;
  scrollbar-width: none;
}
.related-collections__list::-webkit-scrollbar { display: none; }
.related-collections__item {
  align-items: center;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(107.63deg, #93e5ed -3.37%, #93d5ac 34.89%, #f7c175 69.38%, #f2a6b7 105.18%) border-box;
  border: 1px solid transparent;
  border-radius: 24px;
  color: #111;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 17px;
  font-weight: 500;
  gap: 10px;
  justify-content: center;
  letter-spacing: 0;
  line-height: 20px;
  margin-right: 8px;
  padding: 11px 24px;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}
.related-collections__item:last-child { margin-right: 0; }
.related-collections__item:hover { color: #111; opacity: .8; }
.related-collections__item img { display: none; }

/* ───────── «Viewed products» ───────── `.productCarouselViewed.jsProductCarouselViewed`
   Заміряно на живому сайті у прогрітій сесії (1440, дві картки в історії):
   секція y=1872 h=729, заголовок 40/50 з `margin-left:76px` і `margin-bottom:40px`,
   смуга карток від самого краю вікна (x=0), картка 334.88 = 100vw/4.3 —
   тобто swiper віддає 4.3 слайда, а не 25vw із таблиці стилів.
   Власний `margin-top:85px` схлопується з `margin-bottom:56.25` плашок
   категорій, тому чистий приріст сторінки — рівно 814.

   `:empty` — запобіжник: без історії <recently-viewed> прибирає себе сам,
   але якщо скрипт не доїхав, порожній елемент не має права принести свої
   85px у холодний знімок. */
.collection__viewed:empty { display: none; }
.collection__viewed {
  display: block;
  margin: 85px 0 3.90625vw;
  max-width: none;
  overflow: hidden;
}
.collection__viewed .recently-viewed__title {
  color: #111;
  font-size: 40px;
  font-weight: 700;
  line-height: 50px;
  margin: 0 0 40px 76px;
  padding: 0;
  text-transform: none;
}
.collection__viewed embla-slider { display: block; position: relative; }
.collection__viewed .embla__viewport { overflow: hidden; }
.collection__viewed .embla__container { display: flex; }
.collection__viewed .recently-viewed__slide {
  display: flex;
  min-width: 0;
  padding: 0;
}

/* ---------- Скільки карток у кадрі ----------

   Це та сама карусель, що й у смузі рекомендацій на товарі: в оригіналі
   один `.productCarouselViewed` з одним swiper, і пороги в нього НЕ по
   ширині вікна, а по співвідношенню сторін:

     new Swiper('.jsProductCarouselViewedSwiper',
       { slidesPerView: 1.7,
         breakpoints: { '@0.75': 2.7, '@1.00': 3.3, '@1.50': 4.3 } })

   `@`-поріг у Swiper — множник ВИСОТИ вікна, який порівнюється з шириною,
   тобто «@1.50» = `(min-aspect-ratio: 3/2)`. Драбина взята дослівно з
   product-reco.css, де агент рекомендацій довів її на семи ширинах.

   Мій попередній варіант був на порогах по ширині й без щабля 3.3 зовсім:
   на 1024×900 він давав слайд 238px там, де оригінал дає 310. Ширинами
   це не виражається в принципі — тому пороги саме такі. */
.collection__viewed .recently-viewed__slide { flex: 0 0 58.8235%; }         /* 1.7 */
@media (min-aspect-ratio: 3/4) {
  .collection__viewed .recently-viewed__slide { flex: 0 0 37.037%; }        /* 2.7 */
}
@media (min-aspect-ratio: 1/1) {
  .collection__viewed .recently-viewed__slide { flex: 0 0 30.303%; }        /* 3.3 */
}
@media (min-aspect-ratio: 3/2) {
  .collection__viewed .recently-viewed__slide { flex: 0 0 23.2558%; }       /* 4.3 */
}
/* Волосини у каруселі — з ТРЬОХ боків, і це не примха: у оригіналі
   `.cardItem__product` уже несе `border-bottom` і `border-right`, а
   `.productCarouselViewedSwiper` доважує зверху `border-top`. Через це
   картка в каруселі на 1px вища за ту саму картку в сітці: 638.5 проти
   637.5. У нас низ і правий бік у сітці малює `li`, тож тут їх треба
   повернути явно — інакше блок недобирає рівно піксель. */
.collection__viewed .recently-viewed__slide .product-card {
  border-bottom: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
  width: 100%;
}
/* стрілки — як у смузі рекомендацій товару: сховані, поки нема наведення,
   тож на знімок вони не потрапляють з жодного боку */
.collection__viewed [data-embla-prev],
.collection__viewed [data-embla-next] {
  background: #fff; border: 0; border-radius: 50%; cursor: pointer;
  height: 40px; width: 40px; opacity: 0; position: absolute; top: 50%;
  transform: translateY(-50%); transition: opacity .2s; z-index: 5;
}
.collection__viewed [data-embla-prev] { left: 12px; }
.collection__viewed [data-embla-next] { right: 12px; }
.collection__viewed:hover [data-embla-prev],
.collection__viewed:hover [data-embla-next] { opacity: 1; }
.collection__viewed [data-embla-prev][disabled],
.collection__viewed [data-embla-next][disabled] { opacity: 0 !important; pointer-events: none; }

/* ───────── нижній SEO-блок ───────── `.seoTextWrap`
   Дві колонки 45/55 із gap 3.90625vw. Сума 100% + gap ширша за контейнер,
   тому flex їх стискає — і саме через це заголовок ліворуч отримує
   514.69px на 1440 і лягає у ДВА рядки. Права колонка виводиться завжди,
   навіть порожня: без неї ліва отримала б усі 45% і рядок був би один. */
.collection__seo { padding: 4.1666666667vw 8.3333333333vw; }
.collection__seo-inner {
  display: flex;
  gap: 3.90625vw;
  justify-content: center;
  margin-bottom: 4.1666666667vw;
}
.collection__seo-left { width: 45%; }
.collection__seo-right { width: 55%; }
.collection__seo-title {
  /* #333, а не #111: у оригіналі `.seoTextWrap .left .title` кольору не
     задає взагалі й успадковує #333 від body — на відміну від заголовка
     верхньої смуги, який явно #111. Різниця давала +14% маси чорнила. */
  color: #333;
  font-size: 4.1666666667vw;
  font-weight: 700;
  line-height: 4.6875vw;
  margin: 0 0 3.90625vw;
  max-width: none;
  text-transform: none;
}
.collection__seo-text {
  color: #333;
  font-size: .9765625vw;
  line-height: 1.5625vw;
  margin-bottom: 2.0833333333vw;
  max-width: none;
}

/* ─────────────────────────── ≤1536: піксельна гілка ─────────────────────── */
@media (max-width: 1536px) {
  .collection__intro .breadcrumbs a { font-size: 14px; line-height: 16px; }
  .collection__title { font-size: 64px; line-height: 72px; }
  .collection__description { font-size: 15px; line-height: 24px; }
  .collection__count { font-size: 14px; }
  .catalog-button { border-radius: 40px; gap: 12px; height: 42px; padding: 0 16px; }
  .catalog-button > span { font-size: 14px; line-height: 16px; }
  .catalog-button svg { height: 16px; width: 16px; }
  .collection__seo-title { font-size: 64px; line-height: 72px; }
  .collection__seo-text { font-size: 15px; line-height: 24px; }
  .collection__more {
    border-radius: 2px; border-width: 1px; font-size: 14px; gap: 8px;
    height: 40px; line-height: 16px; min-width: 40px; padding: 0 10px;
  }
}

/* ─────────────────────────────── ≤1000 ─────────────────────────────────── */
@media (max-width: 1000px) {
  .collection__intro { padding: 20px; }
  .collection__intro .breadcrumbs { margin-bottom: 20px; }
  .collection__title { font-size: 4.1666666667vw; line-height: 4.6875vw; }
  .collection__controls { gap: 12px; margin-top: 8px; }
  .collection__controls-buttons { flex-direction: row; gap: 12px; }
  /* сортування згортається у круглу кнопку-іконку 42×42 */
  .catalog-button--sort { height: 42px; padding: 0; width: 42px; }
  .catalog-button--sort > span { display: none; }

  .collection__header--banner { height: auto; flex-direction: column-reverse; }
  .collection__header--banner .collection__banner { width: 100%; z-index: 5; }
  /* Пропорція банера НЕ довільна: оригінал робить арт-дирекцію через
     `<picture>` і під мобілку віддає власний кроп `1200_756` (1.5873), а не
     той самий файл, що на деску. Один файл із Shopify має свою пропорцію
     (у accessories 1.781), і при `height:auto` банер виходив 233 замість 261 —
     уся сітка нижче з'їжджала на 28px, а це на мобільній сторінці 2800px
     зсунутого каталогу. Сусідні смуги оригіналу дають майже те саме число
     (600…799 → 1600_1004 = 1.5936, 800…1199 → 2000_1256 = 1.5924), тож одна
     пропорція покриває всю гілку: на 900 різниця 2px. */
  .collection__header--banner .collection__banner img {
    aspect-ratio: 1200 / 756;
    height: auto;
    position: relative;
  }
  .collection__header--banner .collection__intro { padding: 20px; width: 100%; }

  .related-collections__list { display: block; margin-left: 16px; padding-right: 16px; }
  .related-collections__item { font-size: 14px; line-height: 20px; margin-bottom: 8px; padding: 7px 22px; }

  .collection__seo { padding: 4.1666666667vw 8.3333333333vw; }
  .collection__seo-title { font-size: 32px; line-height: 40px; margin-bottom: 24px; }
  .collection__seo-text { margin-bottom: 24px; }
}

/* ─────────────────────────────── ≤768 ──────────────────────────────────── */
@media (max-width: 768px) {
  .collection__title { font-size: 32px; line-height: 40px; text-transform: uppercase; }

  /* Секція стає flex-колонкою — так само, як `.productCarouselViewed` в
     оригіналі. Це не косметика: у block-контексті верхній margin списку
     схлопується з margin-ом секції й зникає, а у flex — ні. Саме через
     цей flex порожній `.title` оригіналу дає рівно 20px над рядом плашок. */
  .related-collections { display: flex; flex-direction: column; margin: 40px 0; overflow: hidden; }
  .related-collections__list { margin-top: 20px; }

  .collection__viewed { margin: 40px 0; }
  .collection__viewed .recently-viewed__title {
    font-size: 18px; line-height: 24px; margin: 0 0 20px 16px; text-transform: uppercase;
  }

  .collection__seo-inner { flex-direction: column; gap: 40px; margin-bottom: 24px; }
  .collection__seo-left, .collection__seo-right { width: 100%; }
  .collection__seo-title { font-size: 18px; line-height: 24px; text-transform: uppercase; }
}

/* ─────────────────────────────── ≤599 ──────────────────────────────────── */
@media (max-width: 599px) {
  .collection__title { margin-bottom: 12px; }
  .collection__layout .pagination { padding-top: 24px; }
}

/* ───────────────────── сітка колекції (перенесено з design.css) ──────────
   Оригінал: `.cardItemWrap{background:#e8e8e8;border:1px solid #e8e8e8;
   border-bottom:none;border-right:none}` + `.cardItem__product{border-bottom;
   border-right}`. У нас волосина стояла `border-top` на кожному `li` — це
   на один рядок менше ліній і рівно −1px на всю сітку. Колонки рахуються
   від ширини ЗА мінусом лівої волосини (1439/4 = 359.75), як в оригіналі,
   де `.cardItem{width:25%}` бере 25% від внутрішньої ширини обгортки. */
.collection__grid {
  background: #e8e8e8;
  border: 1px solid #e8e8e8;
  border-bottom: 0;
  border-right: 0;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  list-style: none;
  padding: 0;
}
.collection__grid > li {
  border-bottom: 1px solid #e8e8e8;
  border-left: 0;
  border-right: 1px solid #e8e8e8;
  border-top: 0;
  display: flex;
  min-width: 0;
}
.collection__grid .product-card { width: 100%; }

/* Поріг переходу на дві колонки — 768, а не 1000: в оригіналі
   `.cardItemWrap .cardItem{width:25%}` і `@media ≤768{width:50%}`.
   Заміряно на 900: оригінал 4 колонки (картка 224.75), сітка 1333. */
@media (max-width: 768px) {
  .collection__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ───────── панель фільтрів і сортування ───────── `section.filtersWrapper`
   У знімки не потрапляє (знімалка ховає `side-drawer`), але це та сама
   панель оригіналу, тож геометрію беремо звідти:
     .filterWrap  — фіксована праворуч, 25vw на деску, 100% на мобілці;
     .headFilter  — «Filters» 18/24 uppercase, падінг 24px 8.3333vw;
     .sectionFilter — група з рамкою знизу, падінг 27/27/30/0;
     .footerFilter — «Set» на всю ширину, падінг 32px 8.3333vw.
   Групу сортування («Show») малюємо тими самими правилами, що й фасети. */
#filters-drawer .drawer__panel {
  width: 25vw;
  /* Панель оригіналу НЕ виїжджає: `.filterWrap` не має ні transform, ні
     transition — вона просто з'являється разом із підложкою через
     opacity+visibility. Наш side-drawer тягнув її translateX(100%) з
     переходом, і рух був там, де у донора його нема.

     Прибрати сам transform мало: у теми це ЄДИНИЙ спосіб сховати закриту
     панель (`.drawer--right .drawer__panel{transform:translateX(100%)}`),
     тож замість нього ставимо донорську пару opacity+visibility — інакше
     панель висіла б розкритою на кожній сторінці колекції. */
  transform: none; transition: none;
  opacity: 0; visibility: hidden;
  z-index: 995;
}
#filters-drawer.drawer--open .drawer__panel { opacity: 1; visibility: visible; }
/* УВАГА до гілок: 8.3333vw у падінгах панелі — це МОБІЛЬНЕ число оригіналу
   (`@media ≤768`), а не десктопне. Тут стояло воно на всіх ширинах, і на
   1440 давало 120 px поля з кожного боку: заголовок їхав до середини, група
   фасетів стискалась до 120 px, а кнопка «Set» — до 14 px завширшки.
   Десктоп у донора: `.headFilter{padding:1.5625vw 1.0416666667vw 1.5625vw
   2.0833333333vw}` → 22.5 / 15 / 22.5 / 30. */
#filters-drawer .drawer__header {
  padding: 1.5625vw 1.0416666667vw 1.5625vw 2.0833333333vw;
  border-bottom: 1px solid #dedede;
}
#filters-drawer .drawer__header h2 {
  color: #000; font-size: 18px; font-weight: 700; line-height: 24px;
  margin: 0; text-transform: uppercase;
}
/* Хрестик: `.closeFilter` 20×20, приглушений і збільшується на ховері. */
#filters-drawer .drawer__header [data-drawer-close] {
  width: 20px; height: 20px; padding: 0; border: 0; background: none;
  color: #111; opacity: .8; cursor: pointer; transition: .3s;
  font-size: 0; line-height: 0;
}
#filters-drawer .drawer__header [data-drawer-close]:hover { opacity: 1; transform: scale(1.2); }
#filters-drawer .drawer__header .iconSvg { display: block; width: 100%; height: 100%; cursor: pointer; }
#filters-drawer .drawer__header .iconSvg svg { display: block; width: 100%; height: 100%; }
/* Підложка: `blurFilter` — сірий напівпрозорий шар із розмиттям 2.5 px і
   переходом 0.5s (панель з'являється миттєво, анімовано саме його). */
#filters-drawer .drawer__overlay {
  background: hsla(0, 0%, 40%, .5);
  -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
  transition: .5s; z-index: 990;
}
/* Скролиться в оригіналі САМЕ список (`.mainFilter`), а підвал із кнопкою
   стоїть поза ним, прямим нащадком панелі. У нас між ними ще два вузли —
   `.drawer__body` і `<form>`, — тож поля переносимо на список, а проміжні
   обгортки робимо прозорими колонками. Поки падінги висіли на
   `.drawer__body`, вони додавались до падінгів підвалу, і кнопка «Set»
   виходила 270 px замість 300 і стояла на 30 px правіше. */
#filters-drawer .drawer__body { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
#filters-drawer facet-filters,
#filters-drawer facet-filters > form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#filters-drawer .facets__list {
  flex: 2 0 auto; height: 1%; overflow: auto;
  padding: 1.7578125vw 0 0 2.0833333333vw;
}
/* `.sectionFilter{padding:1.7578125vw 1.7578125vw 2.2786458333vw 0}`
   → 25.3125 / 25.3125 / 32.8125 / 0; фіксовані 27/27/30 — теж гілка ≤768 */
#filters-drawer .facets__group { border-bottom: 1px solid #dedede; padding: 1.7578125vw 1.7578125vw 2.2786458333vw 0; }
#filters-drawer .facets__group-title {
  color: #111; font-size: .9114583333vw; line-height: 1.0416666667vw;
  margin-bottom: 1.171875vw; text-transform: none; font-weight: 400; display: block;
}
/* Значення стоять У РЯДОК і переносяться, а не стовпчиком:
   `.list{display:flex;flex-wrap:wrap;column-gap:16px;row-gap:8px}`. */
#filters-drawer .facets__values {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 1.0416666667vw; row-gap: .5208333333vw;
  max-height: none; overflow: visible; margin: 0; padding: 0;
}
#filters-drawer .facets__value {
  display: flex; align-items: center; gap: 5px; padding: 0; cursor: pointer;
}
/* Сам чекбокс прихований — стан читається з тексту: вибране чорне з
   підкресленням, решта сіра. Нативних квадратиків у оригіналі нема. */
#filters-drawer .facets__value input { display: none; }
#filters-drawer .facets__value .text {
  color: #999; font-size: 1.171875vw; line-height: 1.5625vw; transition: .3s;
}
#filters-drawer .facets__value:hover .text { color: #111; }
#filters-drawer .facets__value input:checked ~ .text { color: #111; text-decoration: underline; }
/* Хрестик зняття значення з'являється лише у вибраного. */
#filters-drawer .facets__value .disable { display: none; color: #111; opacity: .8; transition: .3s; }
#filters-drawer .facets__value .disable:hover { opacity: 1; transform: scale(1.2); }
#filters-drawer .facets__value input:checked ~ .disable { display: block; }
#filters-drawer .facets__value .disable .iconSvg { display: block; width: .9114583333vw; height: .9114583333vw; cursor: pointer; }
#filters-drawer .facets__value .disable .iconSvg svg { display: block; width: 100%; height: 100%; }
/* `.footerFilter{padding:2.0833333333vw}` → 30 з усіх боків */
.facets__footer { padding: 2.0833333333vw; }
.facets__apply {
  background: #111; border: 1px solid #111; border-radius: 2px; color: #fff;
  cursor: pointer; font: inherit; font-size: 14px; line-height: 16px;
  /* `.filtersSend` несе ще й `btn__large`, а він перебиває базові 40 px
     власними 3.125vw → 48 при ≤1536. У нас стояла базова висота. */
  height: 3.125vw; min-height: 0;
  transition: .3s; width: 100%;
}
.facets__apply:hover { opacity: .9; }

@media screen and (max-width: 1536px) {
  #filters-drawer .facets__group-title { font-size: 14px; line-height: 16px; }
  #filters-drawer .facets__value .text { font-size: 18px; line-height: 24px; }
  #filters-drawer .facets__value .disable .iconSvg { width: 14px; height: 14px; }
  .facets__apply { height: 48px; }
}
/* Мобільна гілка оригіналу — саме 768, а не 1000: панель стає на весь екран,
   а бокові поля переходять на 8.3333vw. */
@media screen and (max-width: 768px) {
  #filters-drawer .drawer__panel { width: 100%; }
  #filters-drawer .drawer__header { padding: 24px 8.3333333333vw; }
  #filters-drawer .facets__list { padding: 27px 0 0 8.3333333333vw; }
  #filters-drawer .facets__group { padding: 27px 27px 30px 0; }
  #filters-drawer .facets__group-title { margin-bottom: 18px; }
  #filters-drawer .facets__values { column-gap: 16px; row-gap: 8px; }
  .facets__footer { padding: 32px 8.3333333333vw; }
}

/* ───────── порожній блок FAQ ───────── `section.faq.pageInfoContent`
   Останній блок сторінки перед підвалом, ПІСЛЯ SEO-тексту. Правила лежать
   не в `catalog.css`, а у `faq.css`, який категорія теж підвантажує:

     .pageInfoContent { padding: 5.0130208333vw 8.3333333333vw 5.2083333333vw }
     .pageInfoContent .pageTitle { border-bottom:1px solid #dedede;
        font-size:1.171875vw; line-height:1.5625vw; font-weight:700;
        margin-bottom:4.7526041667vw; padding-bottom:2.7994791667vw;
        text-transform:uppercase }
     .faq .content { padding: 0 16.6666666667vw }

   Вміст порожній, тож уся висота — це падінги плюс рядок заголовка:
   заміряно на донорі 295.9 на 1440 і 286.9 на 415.

   Верхні 0.83em заголовка — БРАУЗЕРНА маржа `<h2>`, і в оригіналі вона
   вціліла (14.94 = .83 × 18). У нас `base.css` збиває заголовкам margin у
   нуль, тому її доводиться повертати руками: без неї блок нижчий на 15 px.
   Схлопування нема з обох боків — секція має власний падінг. */
.collection__faq { padding: 5.0130208333vw 8.3333333333vw 5.2083333333vw; }
.collection__faq h2 {
  border-bottom: 1px solid #dedede;
  font-size: 1.171875vw;
  font-weight: 700;
  line-height: 1.5625vw;
  margin: .83em 0 4.7526041667vw;
  padding-bottom: 2.7994791667vw;
  text-transform: uppercase;
}
.collection__faq-content { padding: 0 16.6666666667vw; }

@media (max-width: 1536px) {
  .collection__faq h2 { font-size: 18px; line-height: 24px; }
}
@media (max-width: 768px) {
  .collection__faq { padding: 13px 8.3333333333vw 168px; }
  .collection__faq h2 { margin-bottom: 39px; padding-bottom: 27px; }
  .collection__faq-content { padding: 0; }
}

/* ═══════════ карусель категорій ═══════════ `section.categoryCarousel`

   Числа зняті з живого донора на /parfumy/ (1440 і 415). Геометрія там
   справна — зламаний саме вміст, тож розміри переносяться дослівно:

     секція        margin-top 85 / 40 (≤1000)
     head          flex, space-between; висота 90 / 44
     title         40/50 700 #111, margin 0 0 40 76      (десктоп)
                   18/24 700 #111 UPPERCASE, margin 0 0 20 16  (≤768)
     стрілки       48×48, gap 12, opacity .9 → 1, вимкнена .5; ≤1000 сховані
     слайд         288×288 на 1440 (20vw), стеля 25vw; 33.33vw ≤768; 55vw ≤599
     textWrapper   absolute, bottom/left 30 (2.0833vw); 20 при ≤1000
     name          16/24 700 #fff UPPERCASE, margin-bottom 11.25; 8 при ≤1000
     link          inline-flex, gap 7.5, padding-bottom 7.5, підкреслення 1px #fff
     link .text    14/16

   Заголовок у донора має ПОДВІЙНЕ перекриття: базові 1.171875vw/1.5625vw
   перебиваються гілкою `@media (max-width:1921px)` з 40/50, яка стоїть у
   файлі нижче. Тому на 1440 це саме 40/50, а не 16.875 — заміряно.

   §283. Перенесено ЦІЛКОМ, разом із поведінкою понад 1921 px. Донорська
   база — vw, і вона МЕНША за піксельну гілку: на 2560 заголовок у нього
   стискається з 40 до 30, а відступ секції з 85 до 133 (`5.2083333333vw`
   росте, кегль падає). Це його недогляд, а не задум, але правило проєкту
   однозначне — недогляди донора теж наші. Занесено в
   MIGRATION-DEVIATIONS.md, щоб власник міг скасувати одним рядком.

   Порядок блоків важливий: `@media ≤1921` мусить стояти ДО гілок ≤1000 і
   ≤768 — вага однакова, тож на мобільних виграє та, що нижче у файлі. */
.categoryCarousel { margin-top: 5.2083333333vw; }
.categoryCarousel .head { align-items: center; display: flex; justify-content: space-between; }
.categoryCarousel .head .title {
  color: #111; font-size: 1.171875vw; font-weight: 700; line-height: 1.5625vw;
  margin: 0 0 1.3020833333vw 76px; padding: 0; text-transform: none;
}
@media screen and (max-width: 1921px) {
  .categoryCarousel { margin-top: 85px; }
  .categoryCarousel .head .title { font-size: 40px; line-height: 50px; margin-bottom: 40px; }
}
.categoryCarousel .head .buttons { align-items: center; display: flex; gap: 12px; justify-content: flex-end; }
/* Стрілки — рецепт товарних каруселей головної (`.collection-carousel__arrow`):
   білий круг 40×40, шеврон 18×18, проявляється на ховері секції. Раніше тут
   стояли донорські плашки 48×48 — замінено на прохання користувача. */
.categoryCarousel .head .buttons .carouselBTN {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .8); border: 0; border-radius: 50%;
  color: var(--c-ink); cursor: pointer; padding: 0; outline: none;
  opacity: 0; transition: opacity var(--dur-base);
}
.categoryCarousel:hover .head .buttons .carouselBTN { opacity: 1; }
.categoryCarousel .head .buttons .carouselBTN svg { display: block; }
/* embla позначає край атрибутом disabled там, де swiper вішав
   `.swiper-button-disabled` */
.categoryCarousel .head .buttons .carouselBTN[disabled] { opacity: 0; pointer-events: none; }
.categoryCarousel:hover .head .buttons .carouselBTN[disabled] { opacity: .35; }

.categoryCarousel .mein { display: block; }
.categoryCarousel .embla__viewport { overflow: hidden; }
.categoryCarousel .embla__container { display: flex; }
/* Слайд: 288 на 1440 — це 20vw, а `max-width:25vw` з таблиці стилів донора
   лишається стелею й на 1440 не досягається. */
.categoryCarousel .categoryCarouselItem { flex: 0 0 20vw; max-width: 25vw; min-width: 0; }
.categoryCarousel .categoryCarouselItem .wrapper {
  position: relative; display: block; text-decoration: none; color: inherit;
}
.categoryCarousel .categoryCarouselItem .photo { position: relative; }
.categoryCarousel .categoryCarouselItem .photo img {
  display: block; height: auto; max-width: 100%; width: 100%;
}
/* Заглушка замість відсутнього фото: білий квадрат рівно того самого
   розміру. `aspect-ratio` замість висоти — щоб квадрат тримався на будь-якій
   ширині слайда (288 на 1440, 228.25 на 415) і ряд не складався. */
.categoryCarousel .categoryCarouselItem .photo__blank {
  display: block; width: 100%; aspect-ratio: 1 / 1; background: #fff;
}
/* Підкладка під підпис — нижня третина картки, прозорий → темний знизу
   вгору. Не порт: у донора підпис лежить просто на фото, і на світлих
   кадрах білий текст на ньому пропадає. Градієнт замість затемнення всієї
   картинки — фото лишається чистим, а читабельність тримається на обох
   типах кадрів. `pointer-events:none`, щоб не перехоплювати клік із
   посилання-обгортки. */
.categoryCarousel .categoryCarouselItem .photoShade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 33.333%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .28) 45%, rgba(0, 0, 0, 0) 100%);
}
.categoryCarousel .categoryCarouselItem .textWrapper { bottom: 2.0833333333vw; left: 2.0833333333vw; position: absolute; z-index: 2; }
/* §274. Тут пара НЕ «те саме число двічі»: у донора база `1.5625vw`, а
   гілка `@media ≤1536` дає 16px — тобто 24 і 16, різні значення. Крок
   безрозмірний (1.5), тож своєї гілки не потребує. Стояло 16/24 намертво,
   і на 1920 замість донорських 30/45 лишалось 16/24. */
.categoryCarousel .categoryCarouselItem .name {
  color: #fff; font-size: 1.5625vw; font-weight: 700; line-height: 1.5;
  margin-bottom: .78125vw; text-transform: uppercase;
}
@media (max-width: 1536px) {
  .categoryCarousel .categoryCarouselItem .name { font-size: 16px; }
}
.categoryCarousel .categoryCarouselItem .link {
  align-items: center; border-bottom: 1px solid #fff; color: #fff; cursor: pointer;
  display: inline-flex; gap: .5208333333vw; justify-content: flex-start; padding-bottom: .5208333333vw;
}
/* §274. Донор пише крок ДВІЧІ в одному правилі — `line-height:1.0416666667vw`
   і одразу `line-height:20px`; виграє другий. Тобто вище 1536 кегль тече, а
   крок лишається 20. Повторюємо разом із цим недоглядом. */
.categoryCarousel .categoryCarouselItem .link .text {
  font-size: .9114583333vw;
  line-height: 1.0416666667vw;
  line-height: 20px;
}
@media (max-width: 1536px) {
  .categoryCarousel .categoryCarouselItem .link .text { font-size: 14px; line-height: 16px; }
}
.categoryCarousel .categoryCarouselItem .link .iconSvg { display: block; }
.categoryCarousel .categoryCarouselItem .link .iconSvg svg { display: block; }
.categoryCarousel .categoryCarouselItem .wrapper:hover .link { border-color: transparent; }

@media screen and (max-width: 1000px) {
  .categoryCarousel { margin-top: 40px; }
  .categoryCarousel .head .buttons .carouselBTN { display: none; }
  .categoryCarousel .categoryCarouselItem .textWrapper { bottom: 20px; left: 20px; }
  .categoryCarousel .categoryCarouselItem .name { margin-bottom: 8px; }
  .categoryCarousel .categoryCarouselItem .link { gap: 4px; padding-bottom: 5px; }
}
@media screen and (max-width: 768px) {
  .categoryCarousel .head .title {
    font-size: 18px; line-height: 24px; margin: 0 0 20px 16px;
    text-transform: uppercase; width: 100%;
  }
  .categoryCarousel .categoryCarouselItem { flex: 0 0 33.33vw; max-width: 33.33vw; }
}
@media screen and (max-width: 599px) {
  .categoryCarousel .categoryCarouselItem { flex: 0 0 55vw; max-width: 55vw; }
}

/* ═══════════ ПУНКТ 145 — поля ціни в панелі фільтрів ═══════════
   Базовий кегль полів піднято в `design.css` (13→16). У самій панелі
   решта тексту масштабується у vw (`.facets__value .text` — 1.171875vw,
   тобто 18px на 1440), тож поля ціни ведемо до того самого ряду, інакше
   вони лишаються помітно дрібнішими за значення фасетів поруч. */
#filters-drawer .facets__price { gap: .5208333333vw; margin-top: .78125vw; }
#filters-drawer .facets__price input {
  font-size: 1.171875vw; line-height: 1.5625vw; padding: .5208333333vw .78125vw;
}
@media screen and (max-width: 1536px) {
  #filters-drawer .facets__price input { font-size: 18px; line-height: 24px; padding: 8px 12px; }
  #filters-drawer .facets__price { gap: 8px; margin-top: 12px; }
}

/* ═══════════ ПУНКТ 146 — «нічого не знайдено» ═══════════
   СВІДОМО КРАЩЕ ЗА ОРИГІНАЛ (позначено в задачі).

   Причина скарги про «сірий фон» — не колір блока, а те, що напис
   лежав ВСЕРЕДИНІ сітки: `.collection__grid` має `background:#e8e8e8`
   і волосини рамок на кожній комірці, тож порожня сітка малювалась
   сірим прямокутником із написом у першій комірці.

   Лікування: порожній стан виноситься за сітку окремим блоком
   (`main-search.liquid` вже так робить). Для каталогу, чию розмітку
   веде інший агент, той самий блок працює й усередині сітки — тут
   гасяться фон і рамки, а сама комірка розтягується на всі колонки.
   Іконка — псевдоелементом, щоб обидва місця обходились одним CSS. */
.collection__grid:has(> .collection__empty) { background: none; border: 0; }
.collection__grid > .collection__empty { border: 0; grid-column: 1 / -1; }
.collection__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 12px; background: none;
  padding: 5.2083333333vw 8.3333333333vw;
}
.collection__empty::before {
  content: ""; display: block; width: 64px; height: 64px; margin-bottom: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='21' cy='21' r='13'/%3E%3Cpath d='M30.5 30.5 43 43'/%3E%3Cpath d='M16.5 16.5 25.5 25.5M25.5 16.5 16.5 25.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* «Більший текст» — від 13px базового до 24/16 (у донора цим кеглем
   набрані заголовки другого рівня, тож ряд не випадає з типографіки). */
.collection__empty-title { color: #333; font-size: 24px; font-weight: 700; line-height: 32px; margin: 0; }
.collection__empty-text { color: #999; font-size: 16px; line-height: 24px; margin: 0; max-width: 42ch; }
@media screen and (max-width: 768px) {
  .collection__empty { padding: 48px 8.3333333333vw; }
  .collection__empty::before { width: 48px; height: 48px; }
  .collection__empty-title { font-size: 18px; line-height: 24px; }
  .collection__empty-text { font-size: 14px; line-height: 20px; }
}

/* ---------- collection_catalog.css ---------- */
/* Каталог v2 - таби категорій, панель «кількість / сортування / фільтр»,
 * шторки фільтрів і сортування. Figma NJuUg48Ow6TuY6tyGfcmyC, секція 2307:26873:
 *   деск 2307:26923 (1440), моб 2307:26874 (390), стани таба 2307:26969,
 *   кнопки 2307:26982 / 2307:26995, шторки 2307:27247 / 27062 / 27181 / 27369.
 * Одиниця --u = 1px макета: 100vw/1440 на деску, 100vw/390 до 768 (як redesign.css).
 * Сітка й картки тут НЕ стилізуються - вони в collection.css / card-tile.css.
 */
.cat, .cat-drawer {
  --u: calc(100vw / 1440);
  --cat-ink: #1a1a1a;
  --cat-line: #dadada;
  font-family: PCTL9600, system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (min-width: 1921px) { .cat, .cat-drawer { --u: calc(1920px / 1440); } }
@media (max-width: 768px)  { .cat, .cat-drawer { --u: calc(100vw / 390); } }

/* ---------- верх: крихти (лише моб), банер, підпис/таймер ---------- */
.cat-head { background: #fff; }
.cat-crumbs { display: none; }
.cat-crumbs .breadcrumbs {
  display: flex; align-items: center; gap: calc(4 * var(--u));
  margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(.2 * var(--u));
  color: #9c9c9c;
}
.cat-crumbs .breadcrumbs::-webkit-scrollbar { display: none; }
.cat-crumbs .breadcrumbs a { color: #9c9c9c; font-size: inherit; line-height: inherit; text-decoration: none; }
.cat-crumbs .breadcrumbs > span { color: #b7b2ac; margin: 0; padding: 0; }
.cat-crumbs .breadcrumbs > span[aria-current] { color: #1e1e1e; }

.cat-banners { display: block; }
.cat-banner {
  aspect-ratio: 1440 / 405; overflow: hidden; position: relative; width: 100%;
  background: #fff;
}
.cat-banner[hidden] { display: none; }
.cat-banner picture { display: block; height: 100%; width: 100%; }
.cat-banner__img { display: block; height: 100%; object-fit: cover; width: 100%; border-radius: 0; }
/* Акційний банер - з текстом, його не обрізаємо: вписується в ту саму коробку. */
.cat-banner--promo .cat-banner__img { object-fit: contain; }
/* Широкий банер зібраний під пропорції макета - заповнює коробку. */
.cat-banner--promo.cat-banner--wide { background: #fdf2ea; }
.cat-banner--promo.cat-banner--wide .cat-banner__img { object-fit: cover; }
/* Black Friday - картинка власника у своїх пропорціях (юридичний текст унизу не зрізаємо).
   Подвійний клас - щоб мобільна aspect-ratio коробки нижче не перебила. */
.cat-banner.cat-banner--bf { aspect-ratio: auto; background: #000; }
.cat-banner.cat-banner--bf picture,
.cat-banner.cat-banner--bf .cat-banner__img { height: auto; }
/* Промобанер з метаполів колекції (бальзами 2=3: 1920x601 / 960x601) - так само у своїх
   пропорціях; у коробці 1440x405 через contain він стояв малим посередині з білими полями. */
.cat-banner.cat-banner--promo:not(.cat-banner--wide) { aspect-ratio: auto; }
.cat-banner.cat-banner--promo:not(.cat-banner--wide) picture,
.cat-banner.cat-banner--promo:not(.cat-banner--wide) .cat-banner__img { height: auto; }

.cat-note {
  padding: calc(16 * var(--u)) calc(64 * var(--u)) 0;
  color: var(--cat-ink);
  font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u));
}
.cat-note__caption { margin: 0; }

/* ---------- таби (Tab Pill 2307:26969) ---------- */
.cat-tabs { padding: calc(16 * var(--u)) calc(64 * var(--u)) 0; }
.cat-tabs__list {
  display: flex; gap: calc(8 * var(--u));
  list-style: none; margin: 0; padding: calc(12 * var(--u)) 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cat-tabs__list::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cat-tabs__list { cursor: grab; }
  .cat-tabs__list.is-dragging { cursor: grabbing; user-select: none; }
  .cat-tabs__list.is-dragging .cat-tab { pointer-events: none; }
}
.cat-tabs__list > li { flex: 0 0 auto; }
.cat-tab {
  align-items: center; background: #f6f5f3; border-radius: calc(8 * var(--u)); box-sizing: border-box;
  color: var(--cat-ink); display: flex; height: calc(48 * var(--u));
  font-size: calc(14 * var(--u)); font-weight: 600; letter-spacing: calc(.5 * var(--u)); line-height: calc(20 * var(--u));
  padding: 0 calc(24 * var(--u)); text-decoration: none; transition: background-color .2s ease; white-space: nowrap;
}
.cat-tab:hover { background: #e9e9e9; color: var(--cat-ink); }
.cat-tab.is-active, .cat-tab.is-active:hover { background: var(--cat-ink); color: #fff; }
.cat-tab:focus-visible { outline: 2px solid var(--cat-ink); outline-offset: 2px; }

/* ---------- панель: кількість / сортування / фільтр, липка ---------- */
.cat-body { position: relative; }
.cat-bar {
  align-items: center; background: #fff; box-sizing: border-box; display: flex; justify-content: space-between;
  gap: calc(16 * var(--u)); margin: 0 0 calc(16 * var(--u));
  padding: calc(12 * var(--u)) calc(64 * var(--u));
  position: sticky; top: var(--sa-top-chrome, 0px); z-index: 60;
}
.cat-bar__count {
  color: var(--cat-ink); margin: 0;
  font-size: calc(14 * var(--u)); font-weight: 400; line-height: calc(20 * var(--u)); letter-spacing: 0;
}
.cat-bar__controls { align-items: center; display: flex; gap: calc(16 * var(--u)); }
.cat-btn {
  align-items: center; background: #fff; border: 1px solid var(--cat-line); box-sizing: border-box; color: var(--cat-ink);
  cursor: pointer; display: inline-flex; font: inherit; justify-content: center; margin: 0; min-height: 0;
  transition: background-color .2s ease;
}
.cat-btn:hover { background: #e9e9e9; color: var(--cat-ink); }
.cat-btn:focus-visible { outline: 2px solid var(--cat-ink); outline-offset: 2px; }
.cat-btn svg { display: block; flex: 0 0 auto; }
.cat-btn--sort { border-radius: 99px; height: calc(48 * var(--u)); padding: 0; width: calc(48 * var(--u)); }
.cat-btn--sort svg { height: calc(20 * var(--u)); width: calc(20 * var(--u)); }
.cat-btn--filter {
  border-radius: 1000px; gap: calc(8 * var(--u)); height: calc(48 * var(--u));
  padding: 0 calc(21 * var(--u)) 0 calc(19 * var(--u));
  font-size: calc(14 * var(--u)); font-weight: 400; line-height: calc(20 * var(--u)); letter-spacing: 0; white-space: nowrap;
}
.cat-btn--filter svg { height: calc(18 * var(--u)); width: calc(18 * var(--u)); }
.cat.is-loading [data-facet-results] { opacity: .5; pointer-events: none; transition: opacity .15s; }

/* порожній результат фільтра */
.cat-empty { gap: calc(12 * var(--u)); }
.cat-empty .cat-empty__reset { flex: 0 0 auto; margin-top: calc(8 * var(--u)); min-width: calc(140 * var(--u)); width: auto; }

/* ---------- шторки (деск: праворуч 440; моб: знизу) ---------- */
.cat-drawer .drawer__overlay { background: rgba(0, 0, 0, .42); }
.cat-drawer .cat-drawer__panel {
  background: #fff; box-sizing: border-box; display: flex; flex-direction: column; gap: calc(16 * var(--u));
  padding: calc(32 * var(--u)); width: calc(440 * var(--u)); max-width: 100%;
}
.cat-drawer .cat-drawer__panel:focus { outline: none; }
.cat-drawer__head { align-items: center; display: flex; flex: 0 0 auto; justify-content: space-between; min-height: calc(32 * var(--u)); }
.cat-drawer__title {
  color: #111; margin: 0; text-transform: none;
  font-size: calc(18 * var(--u)); font-weight: 700; line-height: calc(24 * var(--u)); letter-spacing: 0;
}
.cat-drawer__close {
  align-items: center; background: none; border: 0; border-radius: calc(14 * var(--u)); color: #111; cursor: pointer;
  display: flex; flex: 0 0 auto; height: calc(32 * var(--u)); justify-content: center; margin: 0; padding: 0; width: calc(32 * var(--u));
}
.cat-drawer__close svg { display: block; height: calc(12 * var(--u)); width: calc(12 * var(--u)); }
.cat-drawer__close:hover { background: #f6f5f3; }
.cat-drawer__form { display: flex; flex: 1 1 auto; flex-direction: column; margin: 0; min-height: 0; }
.cat-drawer__inner { display: flex; flex: 1 1 auto; flex-direction: column; gap: calc(16 * var(--u)); min-height: 0; }
.cat-drawer__form.is-loading .cf__count, .cat-drawer__form.is-loading [data-cat-show] { opacity: .5; }

.cf__body, .cs__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cf__foot { display: flex; flex: 0 0 auto; gap: calc(12 * var(--u)); }
.cs__foot { flex: 0 0 auto; }
.cf__btn {
  align-items: center; border: 1px solid var(--cat-ink); border-radius: calc(10 * var(--u)); box-sizing: border-box; cursor: pointer;
  display: inline-flex; font: inherit; height: calc(48 * var(--u)); justify-content: center; margin: 0; min-height: 0;
  padding: 0 calc(24 * var(--u)); text-decoration: none; transition: opacity .2s ease, background-color .2s ease; white-space: nowrap;
  font-size: calc(14 * var(--u)); font-weight: 600; line-height: calc(20 * var(--u)); letter-spacing: calc(.5 * var(--u));
}
.cf__btn--ghost { background: #fff; color: var(--cat-ink); flex: 0 0 calc(140 * var(--u)); width: calc(140 * var(--u)); }
.cf__btn--ghost:hover { background: #f6f5f3; color: var(--cat-ink); }
.cf__btn--dark { background: #111; border-color: #111; color: #fff; flex: 1 1 auto; min-width: 0; }
.cf__btn--dark:hover { color: #fff; opacity: .9; }
.cf__btn--wide { width: 100%; }

/* групи фільтрів */
.cf__group { border-top: 1px solid var(--cat-line); padding: calc(16 * var(--u)) 0; }
.cf__group:first-of-type { border-top: 0; }
.cf__head {
  align-items: center; cursor: pointer; display: flex; justify-content: space-between; list-style: none;
  min-height: calc(24 * var(--u)); gap: calc(12 * var(--u));
}
.cf__head::-webkit-details-marker, .cf__head::marker { display: none; content: ""; }
.cf__title { color: var(--cat-ink); font-size: calc(16 * var(--u)); font-weight: 700; line-height: calc(24 * var(--u)); }
.cf__chev { color: #111; display: block; flex: 0 0 auto; height: calc(8 * var(--u)); transition: transform .2s ease; width: calc(12 * var(--u)); }
.cf__group[open] .cf__chev { transform: rotate(180deg); }
.cf__opts { display: flex; flex-direction: column; gap: calc(14 * var(--u)); list-style: none; margin: calc(16 * var(--u)) 0 0; padding: 0; }
.cf__opts > li { display: flex; }
.cf__opt { align-items: center; cursor: pointer; display: inline-flex; gap: calc(12 * var(--u)); position: relative; }
.cf__opt input { height: 1px; margin: 0; opacity: 0; position: absolute; width: 1px; }
.cf__check {
  align-items: center; border: 1.5px solid #b4b4b4; border-radius: calc(5 * var(--u)); box-sizing: border-box;
  display: flex; flex: 0 0 auto; height: calc(20 * var(--u)); justify-content: center; width: calc(20 * var(--u));
  transition: background-color .15s ease, border-color .15s ease;
}
.cf__check svg { display: block; height: calc(10 * var(--u)); opacity: 0; width: calc(12 * var(--u)); }
.cf__opt input:checked + .cf__check { background: #111; border-color: #111; }
.cf__opt input:checked + .cf__check svg { opacity: 1; }
.cf__opt input:focus-visible + .cf__check { outline: 2px solid var(--cat-ink); outline-offset: 2px; }
.cf__opt:hover .cf__check { border-color: var(--cat-ink); }
.cf__label { color: var(--cat-ink); font-size: calc(14 * var(--u)); font-weight: 400; line-height: calc(20 * var(--u)); }
.cf__opt input:checked ~ .cf__label { font-weight: 700; }
.cf__count { color: var(--cat-ink); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(.2 * var(--u)); }
.cf__opt.is-off { cursor: default; opacity: .4; }
.cf__opt.is-off:hover .cf__check { border-color: #b4b4b4; }

/* ціна */
.cf__price { display: flex; flex-direction: column; gap: calc(20 * var(--u)); margin-top: calc(16 * var(--u)); }
.cf__inputs { display: flex; gap: calc(12 * var(--u)); }
.cf__box {
  align-items: center; background: #fff; border: 1px solid var(--cat-line); border-radius: calc(10 * var(--u)); box-sizing: border-box;
  cursor: text; display: flex; flex: 1 1 0; gap: calc(6 * var(--u)); height: calc(48 * var(--u)); min-width: 0; padding: 0 calc(14 * var(--u));
  transition: border-color .15s ease;
}
.cf__box:focus-within { border-color: var(--cat-ink); }
.cf__pre, .cf__cur, .cf__box input {
  color: var(--cat-ink); font-family: inherit; font-size: calc(14 * var(--u)); font-weight: 400; line-height: calc(20 * var(--u)); letter-spacing: 0;
}
.cf__cur { margin-left: calc(-6 * var(--u) + .25em); }
.cf__box input {
  -moz-appearance: textfield; appearance: textfield; background: none; border: 0; border-radius: 0; box-shadow: none;
  height: auto; margin: 0; max-width: 100%; min-height: 0; min-width: 1ch; outline: 0; padding: 0; width: 5ch;
}
.cf__box input::-webkit-outer-spin-button, .cf__box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cf__box input::placeholder { color: var(--cat-ink); opacity: 1; }
.cf__range { --lo: 0; --hi: 1; height: calc(20 * var(--u)); position: relative; }
.cf__range::before, .cf__range::after { content: ""; height: calc(4 * var(--u)); position: absolute; top: calc(8 * var(--u)); }
.cf__range::before { background: #e9e9e9; border-radius: calc(2 * var(--u)); left: 0; right: 0; }
.cf__range::after {
  background: var(--cat-ink);
  left: calc(10 * var(--u) + (100% - 20 * var(--u)) * var(--lo));
  right: calc(10 * var(--u) + (100% - 20 * var(--u)) * (1 - var(--hi)));
}
.cf__range input {
  -webkit-appearance: none; appearance: none; background: none; height: calc(20 * var(--u)); left: 0; margin: 0;
  pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 1;
}
.cf__range input::-webkit-slider-runnable-track { background: none; border: 0; height: calc(20 * var(--u)); }
.cf__range input::-moz-range-track { background: none; border: 0; height: calc(20 * var(--u)); }
.cf__range input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; background: #fff; border: 2px solid var(--cat-ink); border-radius: 50%;
  box-sizing: border-box; cursor: grab; height: calc(20 * var(--u)); pointer-events: auto; width: calc(20 * var(--u));
}
.cf__range input::-moz-range-thumb {
  background: #fff; border: 2px solid var(--cat-ink); border-radius: 50%; box-sizing: border-box; cursor: grab;
  height: calc(20 * var(--u)); pointer-events: auto; width: calc(20 * var(--u));
}

/* сортування */
.cs__opts { list-style: none; margin: 0; padding: 0; }
.cs__opt { align-items: center; cursor: pointer; display: flex; height: calc(48 * var(--u)); justify-content: space-between; position: relative; }
.cs__opt input { height: 1px; margin: 0; opacity: 0; position: absolute; width: 1px; }
.cs__label { color: #1e1e1e; font-size: calc(14 * var(--u)); font-weight: 400; line-height: calc(20 * var(--u)); }
.cs__opt input:checked ~ .cs__label { color: #111; font-weight: 700; }
.cs__check {
  align-items: center; border: 1px solid #b4b4b4; border-radius: calc(8 * var(--u)); box-sizing: border-box; display: flex;
  flex: 0 0 auto; height: calc(32 * var(--u)); justify-content: center; width: calc(32 * var(--u));
  transition: background-color .15s ease, border-color .15s ease;
}
.cs__check svg { display: block; height: calc(10.53 * var(--u)); opacity: 0; width: calc(12.5 * var(--u)); }
.cs__opt input:checked ~ .cs__check { background: #111; border-color: #111; }
.cs__opt input:checked ~ .cs__check svg { opacity: 1; }
.cs__opt input:focus-visible ~ .cs__check { outline: 2px solid var(--cat-ink); outline-offset: 2px; }
.cs__opt:hover .cs__check { border-color: var(--cat-ink); }

/* ---------- мобілка (макет 390) ---------- */
@media (max-width: 768px) {
  .cat-crumbs { display: block; padding: calc(16 * var(--u)); }
  .cat-banner { aspect-ratio: 390 / 215; }
  .cat-note { padding: calc(12 * var(--u)) calc(16 * var(--u)) 0; }

  .cat-tabs { padding: 0; }
  .cat-tabs__list { padding: calc(12 * var(--u)) calc(16 * var(--u)); scroll-padding-inline: calc(16 * var(--u)); }
  .cat-tab { height: calc(40 * var(--u)); padding: 0 calc(16 * var(--u)); }

  .cat-bar { margin: 0; padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)); }
  .cat-bar__count { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(.5 * var(--u)); }
  .cat-btn--sort { height: calc(42 * var(--u)); width: calc(42 * var(--u)); }
  .cat-btn--filter { height: calc(42 * var(--u)); padding: 0 calc(16 * var(--u)) 0 calc(14 * var(--u)); }

  .cat-drawer.drawer--right .cat-drawer__panel {
    border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0; bottom: 0; left: 0; right: 0; top: auto;
    height: auto; max-height: calc(100% - 74 * var(--u));
    padding: calc(24 * var(--u)) calc(18 * var(--u)) calc(40 * var(--u));
    transform: translateY(100%); width: 100%;
  }
  .cat-drawer.drawer--open .cat-drawer__panel { transform: none; }
  .cf__btn--ghost { flex-basis: calc(120 * var(--u)); width: calc(120 * var(--u)); }
}

/* ---------- countdown.css ---------- */
/* ============================================================
   ПЛАШКА-ЛІЧИЛЬНИК АКЦІЇ — CSS ДОНОРА (пункт 154)
   ------------------------------------------------------------
   Правила зняті з `original/site-assets/css/product.css`, селектор
   донора — `.productGeneralSlider .productGeneral.right .info .countdown`.
   У нас плашка стоїть у тій самій колонці, але дерево інше, тож
   селектор скорочено до самого класу; числа, кольори й порядок —
   донорські, один в один.

   Дві дрібниці донора, які повторюємо свідомо:
   · `align-items` у нього оголошено двічі (flex-start, потім center) —
     виграє друге, тож лишаємо center;
   · `line-height` у `.value` теж двічі (100%, потім 30px) — лишаємо 30px.
   ============================================================ */
.countdown{align-items:center;background:#dbe9ff;border-radius:10px;display:none;gap:.78125vw;justify-content:space-between;margin-bottom:1.3020833333vw;margin-top:22px;opacity:0;padding:17px 25px;transition:.3s;visibility:hidden}
.countdown.active{display:flex;opacity:1;visibility:visible}
/* `countdownOFF` — стан «акція скінчилась»: донор ховає плашку цілком. */
.countdown.countdownOFF{align-items:center;display:none}
.countdown .countdownTitle{color:#4d73f6;font-size:17.5px;font-weight:700;line-height:25px;max-width:360px}
.countdown .countdownMain{display:flex;gap:.5208333333vw;max-width:16.2760416667vw}
.countdown .countdownMain .item{align-items:center;display:flex;flex-direction:column;justify-content:center}
.countdown .countdownMain .item.secondsWR{width:3.5807291667vw}
.countdown .countdownMain .item .value{color:#4d73f6;font-size:30px;font-weight:600;line-height:30px}
.countdown .countdownMain .item .text{color:#4d73f6;font-size:15px;line-height:30px}
.countdown .countdownMain .seporator{color:#4d73f6;font-size:24px;line-height:1;padding-bottom:26px}

@media screen and (max-width:1536px){
.countdown{border-radius:10px;margin-bottom:20px}
.countdown .countdownTitle{font-size:17.5px;line-height:25px}
.countdown .countdownMain{gap:8px;justify-content:space-between;max-width:250px;width:100%}
.countdown .countdownMain .item .value{font-size:24px}
.countdown .countdownMain .item .text{font-size:12px;line-height:24px}
}
@media screen and (max-width:1000px){
.countdown{align-items:flex-start;flex-direction:column;margin-bottom:20px;padding:11px 19px}
.countdown .countdownTitle{border-bottom:1px solid #4d73f6;font-size:15px;line-height:15px;margin-bottom:5px;padding-bottom:8px;width:100%}
.countdown .countdownMain{gap:14px}
.countdown .countdownMain .item.secondsWR{width:55px}
}
@media screen and (max-width:768px){
.countdown{margin-bottom:10px}
}

/* ---------- footer.css ---------- */
/* ============================================================
   ШАБЛОН — ФУТЕР  (сіра підкладка з колонками + смуга копірайту)
   Наскрізна секція: ті самі 309 сторінок, один агент.

   Еталон — СТАРИЙ САЙТ eu.sistersaroma.com, а не макет. Числа зняті
   двома шляхами й зведені: з його ж CSS (original/site-assets/css/product.css)
   і з computed-геометрії живого DOM на 1440 і на 415.

   Сайт намальований у vw від 1536, але на ≤1536 вмикається піксельна
   гілка — тому нижче скрізь пара «vw за замовчуванням → px у ≤1536»,
   як і в шапці.

   Еталонна геометрія на 1440 (від верху .site-footer):
     mainWrap        padding 85.3125 / 120 / 112.5   (5.9245vw / 8.3333vw / 7.8125vw)
                     grid 480 · 240 · 240 · 240, gap 0, фон #f6f6f6, висота 968
     колонка 1 ряд 1 contacts  h158 + margin-bottom 49.6875 (3.4505vw)
     колонка 1 ряд 2 modeOperation (Working hours) h562
     колонка 2       categories  18 пунктів → 615
     колонка 3       support     14 пунктів (один у 3 рядки) → 515
     колонка 4       language    Country/Language, grid 80 · 1fr, row-gap 24
     copyrightWrap   height 75 (5.2083vw), padding 0 120, 14/16, фон білий
     разом           968 + 75 = 1043

   Еталон на 415 (mainWrap 1103 + copyright 101 = 1204):
     mainWrap        padding 40 / 34.5833(8.3333vw), одна колонка
     порядок         contacts · hours · language · categories · support
     categories/support — акордеон: заголовок 20/24/20 = 64 + волосяна лінія

   Чому це важливо: до правки наша смуга була 736 замість 1043 — не тому,
   що щось «трохи з'їхало», а тому, що бракувало третини вмісту (колонки
   Country/Language) і всіх відступів оригіналу. Хвіст 307 px добивався
   білим проти сірого 246 — різниця рівно 10…12, тобто ховалась у смузі
   amp 8…16 і не червонила карту.

   Пишемо ТІЛЬКИ сюди (figma-html-guide §7.3): design.css спільний,
   sections.css підвантажується після нього — тож звідси перекриваємо.
   Пастка специфічності: у design.css лежить `.site-footer a` (0,1,1),
   і воно б'є будь-який одиночний клас — тому тут скрізь `.site-footer …`
   попереду.
   ============================================================ */

/* ---------- Каркас ---------- */
.site-footer {
  background: #f6f6f6;
  margin-top: 0;
}

.site-footer .site-footer__inner {
  max-width: none;
  margin-inline: 0;
  padding: 5.9244791667vw 8.3333333333vw 7.8125vw;
  display: grid;
  grid-template-columns: 33.3333333333vw 16.6666666667vw 16.6666666667vw 16.6666666667vw;
  gap: 0;
}

/* Розкладка колонок — рівно як grid-column-start/grid-row-* оригіналу:
   контакти й години стоять одна під одною в першій колонці, а три
   решта колонок перекривають обидва ряди. */
.site-footer__contacts      { grid-column: 1; grid-row: 1; margin-bottom: 3.4505208333vw; }
.site-footer__hours-col     { grid-column: 1; grid-row: 2; }
.site-footer__group--1      { grid-column: 2; grid-row: 1 / 3; }
.site-footer__group--2      { grid-column: 3; grid-row: 1 / 3; }
.site-footer__lang          { grid-column: 4; grid-row: 1 / 3; }

/* ---------- Заголовки колонок ---------- */
/* У design.css вони дрібні сірі капсом — в оригіналі це чорний жирний
   14/16 без капсу (капс з'являється тільки на мобілці). */
.site-footer .site-footer__title {
  color: #111;
  font-weight: 700;
  font-size: .9114583333vw;
  line-height: 1.0416666667vw;
  letter-spacing: normal;
  text-transform: none;
  margin: 0 0 1.953125vw;   /* 28.125 на 1440 — у оригіналі не має px-гілки */
}

/* ---------- Контакти ---------- */
.site-footer .site-footer__phone {
  margin: 0;
  display: block;
  font-size: 2.0833333333vw;
  line-height: 2.6041666667vw;
}
.site-footer .site-footer__phone a {
  color: #111;
  font-weight: 700;
  font-size: 2.0833333333vw;
  line-height: 2.6041666667vw;
  letter-spacing: normal;
  text-decoration: none;
}
.site-footer .site-footer__phone a:hover { text-decoration: underline; }

.site-footer .site-footer__mail { margin-top: .9114583333vw; }
.site-footer .site-footer__mail a {
  color: #333;
  font-size: .9765625vw;
  line-height: 1.5625vw;
  text-decoration: none;
}
.site-footer .site-footer__mail a:hover { text-decoration: underline; }

/* ---------- Години роботи ---------- */
.site-footer .site-footer__hours {
  color: #333;
  font-size: .9114583333vw;
  line-height: 1.5625vw;
  padding-right: 1.3020833333vw;
}
.site-footer .site-footer__hours > p,
.site-footer .site-footer__hours > .site-footer__hours-block { margin: 0 0 1.5625vw; }
.site-footer .site-footer__hours > :last-child { margin-bottom: 0; }
.site-footer .site-footer__hours a {
  color: #333;
  font-size: inherit;
  line-height: inherit;
  text-decoration: underline;
}
.site-footer .site-footer__hours a:hover { text-decoration: none; }

/* Рядки, які в оригіналі несуть інлайновий `font-size: 0.88rem` (=14.08px):
   візуальний редактор старого сайту проставив його майже на кожному рядку
   блоку годин. При перенесенні в налаштування ці інлайни згорнули в клас
   `.fs88`, але правила для нього не було — рядки малювались базовими 14px
   і до кінця рядка «уповзали» від еталона на 1–2 px. Різниця в 0.08px на
   гліф не видно оком, зате вона червонила КОЖЕН такий рядок футера на всіх
   309 сторінках (і на деску, і на мобілці). Рядки без інлайну — «Telegram
   chat», «Rozmaitości 2…» — збігались піксель у піксель і тут не чіпаються. */
.site-footer .site-footer__hours .fs88 { font-size: 14.08px; }

/* Блок «Warehouse» в оригіналі зверстаний візуальним редактором: заголовок
   іде рядком 24, а дві адресні строки — це <p> з line-height:normal і
   верхнім полем 1em. Разом 24 + 2×(14+17) = 86, і саме ці 86 (а не 72)
   тримають висоту всієї першої колонки. Відтворюємо як є. */
.site-footer .site-footer__hours-block > p {
  margin: 1em 0 0;
  line-height: normal;
}

/* ---------- Колонки меню ---------- */
/* На широкому екрані заголовка нема зовсім: у оригіналі .mobileTitle
   показується лише на ≤768. */
.site-footer .site-footer__group { border: 0; }
.site-footer .site-footer__summary { display: none; }

/* Тіло колонки. `overflow:hidden` — з ним працює slideDown/slideUp: висоту
   веде JS, CSS ховає вміст, що вилазить за межі.

   Гачки JS ми взяли, а стильовий клас `slideToggleContent` — НІ: у
   `product-card.css` він глобально `display:none`, і футер на широкому
   екрані лишився б без посилань. Тому обидва стани оголошені тут.

   `!important` у широкій гілці вимушений: slide-toggle.js пише `display`
   інлайном, і якщо колонку закрили на телефоні, а потім розтягнули вікно,
   інлайновий `none` пережив би злам — заголовка там уже нема, відкрити
   нічим. Те саме з `height` на випадок зміни ширини посеред анімації. */
.site-footer .site-footer__links { display: block; overflow: hidden; }
@media (min-width: 769px) {
  .site-footer .site-footer__links { display: block !important; height: auto !important; }
}

.site-footer .site-footer__group ul {
  display: flex;
  flex-direction: column;
  gap: 1.0416666667vw;
  list-style: none;
  margin: 0;
  padding: 0 .6510416667vw 0 0;
}
.site-footer .site-footer__group li {
  position: relative;
  font-size: 16px;
  line-height: 20px;   /* висота пункту 20, у три рядки — 60: так в оригіналі */
}
.site-footer .site-footer__group li > a {
  color: #333;
  font-size: .9114583333vw;
  line-height: 1.0416666667vw;
  margin-right: .5208333333vw;
  text-decoration: none;
}
.site-footer .site-footer__group li > a:hover { text-decoration: underline; }
.site-footer .site-footer__group li > a.site-footer__link--bold { font-weight: 700; }

/* Стрілка вкладеного списку. Офсетів left/right нема свідомо: з
   position:absolute і auto по горизонталі блок лишається на своєму
   статичному місці — одразу за посиланням із його margin-right 8. */
.site-footer .site-footer__arr {
  position: absolute;
  top: .1302083333vw;
  width: 1.0416666667vw;
  height: 1.0416666667vw;
  padding: 0;
  border: 0;
  background: none;
  color: #333;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-base);
}
.site-footer .site-footer__arr svg { display: block; width: 100%; height: 100%; }
.site-footer .site-footer__item--open > .site-footer__arr { transform: rotate(180deg); }

.site-footer .site-footer__group ul.site-footer__sub {
  display: none;
  padding: .3255208333vw 0 .3255208333vw .9765625vw;
  gap: 0;
}
.site-footer .site-footer__item--open > ul.site-footer__sub { display: block; }
.site-footer .site-footer__sub li { padding: .1953125vw; line-height: 1.0416666667vw; font-size: inherit; }
.site-footer .site-footer__sub li > a { font-size: .9114583333vw; line-height: 1.0416666667vw; margin-right: 0; }

/* ---------- Країна / мова ---------- */
.site-footer .site-footer__lang {
  display: grid;
  grid-template-columns: 5.2083333333vw 1fr;
  row-gap: 24px;
  column-gap: 0;
  align-content: start;
}
/* Підпис НЕ центруємо: в оригіналі це звичайний блок, розтягнутий на
   висоту ряду, і рядок тексту стоїть під його верхом. Центрування
   опускало «Country» на 1 px, а «Language» — на 2. */
.site-footer .site-footer__lang-label {
  color: #333;
  font-size: .9114583333vw;
  line-height: 1.0416666667vw;
  min-height: 18px;
}
.site-footer .site-footer__lang .localization,
.site-footer .site-footer__lang-value { position: relative; display: flex; align-items: center; }
/* висоти рядків узяті з оригіналу: 18 під країною, 20 під мовою —
   разом із row-gap 24 це рівно 62, висота колонки на мобілці */
.site-footer .site-footer__lang .localization { min-height: 18px; }
.site-footer .site-footer__lang-value { min-height: 20px; }
.site-footer .site-footer__lang-value { color: #333; font-size: .9114583333vw; line-height: 1.0416666667vw; }
.site-footer .site-footer__lang .localization__form { width: 100%; }
.site-footer .site-footer__lang .localization__toggle {
  display: flex;
  align-items: center;
  gap: .5208333333vw;
  padding: 0;
  border: 0;
  background: none;
  color: #333;
  font: inherit;
  font-size: .9114583333vw;
  line-height: 1.0416666667vw;
  cursor: pointer;
}
.site-footer .site-footer__lang .localization__toggle svg { flex: none; }
.site-footer .site-footer__lang .localization__list {
  position: absolute;
  z-index: 9;
  top: 100%;
  left: 0;
  min-width: 9.765625vw;
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  box-shadow: var(--sh-lift);
  display: block;
}
.site-footer .site-footer__lang .localization__list[hidden] { display: none; }
.site-footer .site-footer__lang .localization__option {
  display: block;
  width: 100%;
  padding: 6px 16px;
  border: 0;
  background: none;
  color: #333;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}
.site-footer .site-footer__lang .localization__option:hover { background: #f6f6f6; }

/* ---------- Смуга копірайту ---------- */
/* Вона вже НЕ на сірому: у оригіналі фон #f6f6f6 висить на mainWrap,
   а copyrightWrap лишається білим — і роздільної лінії між ними нема. */
.site-footer .site-footer__bottom {
  border: 0;
  max-width: none;
  margin-inline: 0;
  background: #fff;
  height: 5.2083333333vw;
  padding: 0 8.3333333333vw;
  gap: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333;
  font-size: .9114583333vw;
  line-height: 1.0416666667vw;
}
.site-footer .site-footer__copy { color: #333; }

.site-footer .site-footer__payments {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.171875vw;
  width: 16.6666666667vw;
}
/* Логотип лежить у блоці як рядковий елемент — рівно як в оригіналі.
   base.css робить усі svg блоковими, і тоді плашка виходить 20 замість
   23: зникає підрядковий хвіст, і на мобілці смуга копірайту коротшає
   на ці 3 px. */
.site-footer .site-footer__logo { line-height: 1.0416666667vw; }
.site-footer .site-footer__payments svg { display: inline; height: auto; }

/* ============================================================
   ≤1536 — піксельна гілка оригіналу (сюди потрапляє й наша база 1440)
   ============================================================ */
@media (max-width: 1536px) {
  .site-footer .site-footer__title { font-size: 14px; line-height: 16px; }
  .site-footer .site-footer__phone,
  .site-footer .site-footer__phone a { font-size: 32px; line-height: 40px; }
  .site-footer .site-footer__mail a { font-size: 15px; line-height: 24px; }
  .site-footer .site-footer__hours { font-size: 14px; line-height: 24px; padding-right: 20px; }
  .site-footer .site-footer__hours > p,
  .site-footer .site-footer__hours > .site-footer__hours-block { margin-bottom: 24px; }
  .site-footer .site-footer__group li > a { font-size: 14px; line-height: 16px; margin-right: 8px; }
  .site-footer .site-footer__arr { top: 3px; width: 16px; height: 16px; }
  .site-footer .site-footer__sub { padding: 5px 0 5px 15px; }
  .site-footer .site-footer__sub li { padding: 3px; line-height: 16px; }
  .site-footer .site-footer__sub li > a { font-size: 14px; line-height: 16px; }
  .site-footer .site-footer__lang { grid-template-columns: 80px 1fr; }
  .site-footer .site-footer__lang-label { font-size: 14px; line-height: 16px; }
  .site-footer .site-footer__lang .localization__toggle { font-size: 14px; line-height: 16px; gap: 8px; }
  .site-footer .site-footer__lang-value { font-size: 14px; line-height: 16px; }
  .site-footer .site-footer__lang .localization__list { min-width: 150px; }
  .site-footer .site-footer__bottom { font-size: 14px; line-height: 16px; }
  .site-footer .site-footer__logo { line-height: 16px; }
}

/* ============================================================
   ≤1000 — три колонки, країна/мова їде під контакти
   ============================================================ */
@media (max-width: 1000px) {
  .site-footer .site-footer__inner {
    grid-template-columns: 33.3333333333vw 25vw 25vw;
  }
  .site-footer__group--1 { grid-column: 2; grid-row: 1 / 4; }
  .site-footer__group--2 { grid-column: 3; grid-row: 1 / 4; }
  .site-footer__lang { grid-column: 1; grid-row: 3 / 4; padding: 40px 0; }

  .site-footer .site-footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    height: auto;
    padding: 23px 8.3333333333vw;
  }
  .site-footer .site-footer__payments { width: auto; justify-content: center; gap: 1.171875vw; }
}

/* ============================================================
   ≤768 — одна колонка, меню згортаються в акордеон
   ============================================================ */
@media (max-width: 768px) {
  .site-footer .site-footer__inner {
    grid-template-columns: 1fr;
    padding: 40px 8.3333333333vw;
  }
  .site-footer__contacts       { grid-column: 1; grid-row: 1; margin-bottom: 40px; }
  .site-footer__hours-col      { grid-column: 1; grid-row: 2; }
  .site-footer__lang           { grid-column: 1; grid-row: 3; padding: 40px 0; }
  .site-footer__group--1 { grid-column: 1; grid-row: 4; }
  .site-footer__group--2 { grid-column: 1; grid-row: 5; }

  .site-footer .site-footer__title {
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  /* обгортка пошти на мобілці — 16/20, як у оригіналі: без цього вона
     бере базовий рядок теми 23.94 і кожна адреса тягне зайві 4 px */
  .site-footer .site-footer__mail { margin-top: 16px; font-size: 16px; line-height: 20px; }
  .site-footer .site-footer__mail a { font-size: 14px; line-height: 16px; }

  /* Заголовок колонки меню стає рядком акордеона */
  .site-footer .site-footer__group { border-top: 1px solid #dedede; }
  .site-footer .site-footer__group--2 { border-bottom: 1px solid #dedede; }
  .site-footer .site-footer__links { display: none; }
  .site-footer .site-footer__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    border: 0;
    cursor: pointer;
    list-style: none;
    transition: background var(--dur-base) var(--ease-base);
  }
  .site-footer .site-footer__summary:hover { background: #f6f6f6; }
  /* ПУНКТ 54 — СВІДОМО КРАЩЕ ЗА ОРИГІНАЛ (позначено в задачі).
     На десктопі колонки вже збігаються з донором до пікселя (14/16,
     крок по Y 35 — заміряно з обох боків), тож мова саме про мобільні
     розкривні списки. Донорський рядок акордеона — 24 + 20 + 20 = 64 px,
     і пункти всередині йшли кроком 24. Розводимо: рядок 72 px, крок
     пунктів 28, підвал списку 32 — палець перестає влучати в сусідній
     пункт, а самі списки читаються як окремі блоки. */
  .site-footer .site-footer__summary .site-footer__title {
    color: #333;
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 24px 20px 24px 0;
    margin: 0;
  }
  .site-footer .site-footer__group--2 .site-footer__summary .site-footer__title { color: #000; }

  .site-footer .site-footer__group ul { gap: 28px; padding: 4px 0 32px; }

  /* Плюс 13×13 з двох волосин: у розгорнутому стані горизонтальна
     зникає, а вся іконка повертається — виходить мінус, як в оригіналі. */
  /* Тепер це справжня <button> (як `mobileTitle__button` у донора), тож
     знімаємо з неї власне оформлення кнопки. */
  .site-footer .site-footer__plus {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
    flex: 0 0 13px;
    width: 13px;
    height: 13px;
    transition: transform var(--dur-base) var(--ease-base);
  }
  .site-footer .site-footer__plus::before,
  .site-footer .site-footer__plus::after {
    content: "";
    position: absolute;
    background: #111;
    transition: var(--dur-base) var(--ease-base);
  }
  .site-footer .site-footer__plus::before { left: 0; top: 6px; width: 13px; height: 1px; }
  .site-footer .site-footer__plus::after  { left: 6px; top: 0; width: 1px; height: 13px; }
  /* Відкритий стан у донора позначає клас `.active` на обгортці
     (`.item.mobileHide.active`), який ставить slide-toggle.js, а не
     атрибут [open] нативного <details>. */
  .site-footer .site-footer__group.active .site-footer__plus { transform: rotate(90deg); }
  .site-footer .site-footer__group.active .site-footer__plus::before { left: 6px; width: 0; }
}

/* ---------- form-state.css ---------- */
/* ============================================================
   СТАН КНОПКИ ВІДПРАВКИ У ФОРМАХ (пункт 196)
   ------------------------------------------------------------
   Правило донора, як є:
     .btn[disabled]{background:#e8e8e8;border-color:#e8e8e8;color:#999;opacity:1}
   Тобто «сірувата, поки не заповнено» — у нього це звичайний `disabled`,
   а не окремий клас. `opacity:1` там навмисне: воно гасить типове
   притлумлення браузера, щоб колір був рівно #999, а не блідіший.
   ============================================================ */
.btn[disabled] {
  background: #e8e8e8 !important;
  border-color: #e8e8e8 !important;
  color: #999 !important;
  opacity: 1;
}
.btn[disabled] .text { color: #999 !important; }

/* ---------- header.css ---------- */
/* ============================================================
   ШАБЛОН — ШАПКА  (промо-смуга акції + хедер)
   Наскрізна секція: ті самі 309 сторінок, один агент.

   Еталон — СТАРИЙ САЙТ eu.sistersaroma.com, а не макет.
   Усі числа зняті з його ж CSS (original/site-assets/css/product.css):
   сайт намальований у vw від 1440, але має брейкпоінт 1536, і на
   1440 працює саме гілка `max-width:1536px` з піксельними значеннями.
   Тому нижче теж скрізь пара «vw за замовчуванням → px у ≤1536».

   Ключові рядки оригіналу:
     .header               height:5.2083333333vw → 80px; border-bottom:1px solid #e5e5e5
     .header .left/.right  padding:0 1.5625vw    → 20px 24px
     .header .headerCel    display:flex; gap:.5208333333vw            (7.5px на 1440)
     .header .logo         2.9296875vw × 2.6041666667vw → 45×40; margin-right:.9765625vw
     .btn                  height:2.6041666667vw → 40px; min-width:40px; gap:8px
     .btn__white           padding:0 10px; border-width:1px  (у шапці border-color:transparent)
     .btn .text            font-size:14px; line-height:16px
     .btn .iconSvg         16×16
     .burger               16×16, смуги 2px, radius 2px
     .langWrapPC           height:2.6041666667vw; padding:.6510416667vw; border-radius:…
     .customSelectHead     gap:.5208333333vw;  .text → 14px/16px, «World» — успадковані 16px
     .siteTestBanner       border-bottom:1px solid #e5e5e5
     .siteTestBanner .slideWrap  padding:5px, flex-center

   Пишемо ТІЛЬКИ сюди (figma-html-guide §7.3): design.css спільний,
   sections.css підвантажується після нього — тож звідси перекриваємо.

   Смуга оголошень поїхала звідси в announcement.css: вона перестала бути
   одним рядком і стала окремою секцією зі слайдами.
   ============================================================ */

/* ---------- Каркас шапки ---------- */
/* site-header — кастомний елемент: без display він inline, і 1px рамка
   знизу малювалась по інлайн-боксах, тобто не малювалась зовсім. */
site-header.site-header {
  display: block;
  box-sizing: border-box;
  height: 5.2083333333vw;
  border-bottom: 1px solid #e5e5e5;
}

.site-header__inner {
  height: 100%;
  min-height: 0;
  /* Оригінал: `.header` — grid `1fr 2fr 1fr` (на 1440 це рівно 360/720/360).
     Не `1fr auto 1fr`: середня колонка там ЧАСТКА, а не вміст, тож коли
     бічна колонка переростає свою частку власним min-content, логотип
     їде вбік. Саме це видно на 1350: у старій шапці права комірка тримає
     ДВІ пігулки («World ˅» 86.06 + «EN ˅» 60.53) і виходить 342.72 при
     частці 337.5 — нестача 5.22 знімається з 1fr+2fr, і центр середньої
     колонки зсувається на 3.48 px вліво. У нас пігулка одна, права
     комірка в частку влазить, і логотип лишається по центру сторінки. */
  grid-template-columns: 1fr 2fr 1fr;
  gap: 0;
  align-items: center;
  padding: 0 1.5625vw;
}

@media (max-width: 1536px) {
  site-header.site-header { height: 80px; }
  .site-header__inner { padding: 0 24px; }
}

/* ---------- Ліва група: меню + пошук ---------- */
/* Оригінальний .headerCel.left — звичайний flex; наш попередній
   `margin-left:84px` на пошуку був підпоркою під ту саму відстань. */
.site-header__lead {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: .5208333333vw;
}

/* ---------- Кнопка-«пігулка»: спільна для меню, іконок і кошика ---------- */
.site-header__burger,
.site-header__lead .site-header__action,
.site-header__actions .site-header__action,
.site-header__actions .cart-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  /* `.btn{gap:.5208333333vw}` і `.btn__blank,.btn__white{padding:0 .6510416667vw}`
     — обидва з гілкою `@media ≤1536 { gap:8px; padding:0 10px }`. Піксельна
     половина стояла тут як база, тож на 1920 кнопка «Menu» виходила 93.8
     замість донорських 100.8 (§253). */
  gap: .5208333333vw;
  box-sizing: border-box;
  height: 2.6041666667vw;
  min-width: 2.6041666667vw;
  padding: 0 .6510416667vw;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 2.6041666667vw;
  /* Донор: `.header .btn.btn__white{background:transparent;border-color:transparent}`
     — саме в шапці біла заливка знімається. Загальний `.btn__white` справді
     білий (#fff з рамкою #333), але до шапки він не доходить. З білим фоном
     кнопки проступали світлими плямами, щойно шапка сіріла під відкритим
     меню (`body.active .header{background:#f6f6f6}`). */
  background: transparent;
  color: #111;
  line-height: 1;
}

@media (max-width: 1536px) {
  .site-header__burger,
  .site-header__lead .site-header__action,
  .site-header__actions .site-header__action,
  .site-header__actions .cart-icon {
    height: 40px;
    min-width: 40px;
    border-radius: 40px;
    gap: 8px;
    padding: 0 10px;
  }
}

/* ГАРНІТУРА КНОПОК — ДОНОРСЬКА, РАЗОМ З ЙОГО НЕДОГЛЯДОМ.
   У його `home.css` стоїть `.btn{font-family:Inter,sans-serif}`, але сам
   Inter він не підключає: ні @font-face, ні Google Fonts. Тому в нього
   кнопки малюються системним Arial, і це не помилка знімка, а справжній
   вигляд сайту. Користувач сказав робити 1 в 1, тож повторюємо стек як є
   і Inter НЕ підключаємо — інакше літери поїдуть у інший бік.
   Заміряно: підпис «Menu» 14px/16/400, бокс 35×16 — числа тотожні з
   обох боків, різниця була рівно в гарнітурі. */
.site-header__burger,
.site-header__burger-label,
.site-header__lead .site-header__action,
.site-header__actions .site-header__action,
.site-header__actions .cart-icon,
.site-header__search-label { font-family: Inter, sans-serif; }

/* §253. Кегль підпису — `.btn .text` донора, і він написаний ДВІЧІ:
     `.btn .text{font-size:.9114583333vw;line-height:1.0416666667vw}`
     `@media (max-width:1536px){.btn .text{font-size:14px;line-height:16px}}`
   Тут стояла лише піксельна половина, тож на 1440 і 415 усе сходилось
   (заміряно: 81×40, підпис 35×16 — Д=Н), а на вікні ширшому за 1536
   у донора підпис 17.5/20, у нас лишався 14/16. Саме це й було видно. */
.site-header__burger-label {
  font-size: .9114583333vw;                /* 14 на 1536 · 17.5 на 1920 */
  line-height: 1.0416666667vw;             /* 16 на 1536 · 20 на 1920 */
  color: #111;
  white-space: nowrap;
}
@media (max-width: 1536px) {
  .site-header__burger-label { font-size: 14px; line-height: 16px; }
}

/* Бургер — три смуги, як в оригіналі (а не svg-«гамбургер» з рівними лініями).
   Дві нижні смуги в оригіналі пульсують шириною: 2s, нескінченно.
   Тому цей квадрат 16×16 у піксельній звірці завжди залежить від фази. */
.site-header__burger-icon {
  position: relative;
  display: block;
  width: 1.0416666667vw;
  min-width: 1.0416666667vw;
  height: 1.0416666667vw;
}
.site-header__burger-icon span {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #111;
}
.site-header__burger-icon span:nth-child(1) { top: 0; }
.site-header__burger-icon span:nth-child(2) { top: calc(50% - 1px); animation: sa-burger-2 2s infinite; }
.site-header__burger-icon span:nth-child(3) { bottom: 0; animation: sa-burger-3 2s infinite; }

@keyframes sa-burger-2 { 0% { width: 100%; } 50% { width: 50%; } 100% { width: 100%; } }
@keyframes sa-burger-3 { 0% { width: 50%; } 50% { width: 100%; } 100% { width: 50%; } }

@media (prefers-reduced-motion: reduce) {
  .site-header__burger-icon span { animation: none; }
  .site-header__burger-icon span:nth-child(3) { width: 50%; }
}

/* ЗАКРИТИЙ ХРЕСТИК. Донор не підставляє символ `Close` зі спрайта — він
   складає хрестик із тих самих трьох смуг: перша повертається на 45°,
   середня стискається до нуля, третя на −45°, і обидві крайні з'їжджаються
   в одну точку. Пульсацію при цьому глушить (`animation:none`), інакше
   смуги смикали б ширину вже в хрестику.

   Числа донора: top/bottom 45% на широких екранах і рівно 7px на ≤1536 —
   у 16-піксельній коробці 45% дало б 7.2, тобто півпікселя розсинхрону
   між двома смугами хрестика.

   Гачок наш: у донора клас `.active` вішає його ж скрипт, а в нас стан
   кнопки вже описаний доступністю — `aria-expanded`. Другий клас заводити
   нема сенсу. */
[data-menu-toggle][aria-expanded='true'] .site-header__burger-icon span { animation: none; }
[data-menu-toggle][aria-expanded='true'] .site-header__burger-icon span:nth-child(1) {
  top: 45%;
  transform: rotate(45deg);
}
[data-menu-toggle][aria-expanded='true'] .site-header__burger-icon span:nth-child(2) { width: 0; }
[data-menu-toggle][aria-expanded='true'] .site-header__burger-icon span:nth-child(3) {
  bottom: 45%;
  transform: rotate(-45deg);
}
@media (max-width: 1536px) {
  [data-menu-toggle][aria-expanded='true'] .site-header__burger-icon span:nth-child(1) { top: 7px; }
  [data-menu-toggle][aria-expanded='true'] .site-header__burger-icon span:nth-child(3) { top: 7px; bottom: auto; }
}
/* `.burger span{transition:.3s}` донора — без нього смуги не повертались би,
   а стрибали. І `:hover` у нього паузить пульсацію, а не пришвидшує її. */
.site-header__burger-icon span { transition: .3s; }
.site-header__burger:hover .site-header__burger-icon span { animation-play-state: paused; }

/* ХОВЕР ІКОНОК ШАПКИ. Донор: `.header .btn.btn__white .iconSvg{transition:.2s}`
   і `:hover .iconSvg{transform:scale(1.2)}` — жодних змін кольору, фону чи
   прозорості, тільки збільшення. Заміряно на живому сайті: 16×16 → 19.2×19.2,
   перехід 0.2s, колір лишається rgb(17,17,17).

   Бургер сюди НЕ входить: у донора він `.burger`, а не `.iconSvg`, і на
   ховері не росте — заміряно, transform лишається none. */
.site-header__lead .site-header__action svg,
.site-header__actions .site-header__action svg,
.site-header__actions .cart-icon svg { transition: .2s; }
.site-header__lead .site-header__action:hover svg,
.site-header__actions .site-header__action:hover svg,
.site-header__actions .cart-icon:hover svg { transform: scale(1.2); }

@media (max-width: 1536px) {
  .site-header__burger-icon { width: 16px; min-width: 16px; height: 16px; }
}

/* Пошук більше не тримається на відступі — він у .site-header__lead */
.site-header__search-left { margin-left: 0; }

/* ---------- Логотип ---------- */
/* margin-right в оригіналі зсуває монограму на 7px лівіше центру сторінки */
.site-header__logo {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: flex;
  align-items: center;
  margin-right: .9765625vw;
  line-height: 0;
}
.site-header__logo svg {
  display: block;
  width: 2.9296875vw;
  height: 2.6041666667vw;
  color: #111;
}
/* margin-right лишається у vw і на ≤1536 — в оригіналі його ніхто не
   перекриває, а 14.0625 замість 14 зсуває монограму рівно на той піксель,
   яким наша чорнильна маска не збігалася зі старою. */
@media (max-width: 1536px) {
  .site-header__logo svg { width: 45px; height: 40px; }
}

/* ---------- Права група ---------- */
.site-header__actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .5208333333vw;
}

/* Перемикачі країни/мови — біла «пігулка» .langWrapPC оригіналу */
.site-header__actions .localization {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 2.6041666667vw;
  padding: .6510416667vw;
  border-radius: 2.6041666667vw;
  background: #fff;
}
.site-header__actions .localization + .localization { margin-left: 0; }

/* §325. ПЕРЕМИКАЧІ НА МОБІЛЦІ ЛИШАЮТЬСЯ У ШАПЦІ.

   Тут стояло `display:none` на ≤768 — я його схвалив, і це була помилка:
   власник просив прибрати НАКЛАДАННЯ, а не самі перемикачі. Донор на
   телефонах їх справді ховає, але рівняння з ним не було завданням.

   Справжня причина накладання (заміряно на всіх семи айфонівських
   ширинах): у закритому стані все чисто, проміжок +5 px скрізь. Ламається
   ВІДКРИТИЙ список: він має фіксовані 150 px і якір `right: 0`, а пігулка
   мови вужча (74 px «English»), тож різниця звисає ліворуч і накриває
   пігулку ринку на всі 63.5 px, тобто на 100%.

   Скорочення підпису до «EN» це НЕ лікує — заміряно: ті самі 63.5 px,
   бо ширина списку фіксована й від підпису не залежить.

   Лікуємо якорем: нижче 769 список притискається до ЛІВОГО краю своєї
   пігулки, тож росте вправо, у вільне поле, а не вліво на сусіда.
   Заміряний ефект: накладання 63.5 → 0 на всіх семи ширинах. */
@media (max-width: 768px) {
  .site-header__actions .localization__list { right: auto; left: 0; }
}
}
.localization .localization__form { display: flex; align-items: center; }

.localization__toggle {
  /* .customSelectHead: gap на 1440 рахується як 8px, а не 7.5px,
     а рядок має нормальну висоту 20px — з нею базова лінія «World»
     стоїть там само, де в оригіналі. */
  gap: 8px;
  font-size: 16px;
  line-height: 20px;
  color: #333;
}
.localization__toggle svg { width: 1.0416666667vw; height: 1.0416666667vw; }

@media (max-width: 1536px) {
  .localization__toggle svg { width: 16px; height: 16px; }
}

/* ЧОМУ ШЕВРОН ЗНИКАВ. Правило `flex:none` стояло тільки в мобільному
   блоці (≤1000), а `.localization__toggle` — flex і на десктопі. У вікні
   1001–1400 права група не влазить у свою колонку, flex стискає дітей, і
   першим здається саме svg: у нього немає власного вмісту, тож `min-width:auto`
   для нього дорівнює нулю. Заміряно: на 1024, 1100 і 1280 ширина стрілки
   виходила рівно 0 при незмінній висоті 16 — тобто вона не ховалась, а
   схлопувалась. Розмір іконки — не те, чим має жертвувати розкладка, тож
   забороняємо стискання на всіх ширинах, а не лише на телефоні. */
.localization__toggle svg,
.site-header__action svg,
.site-header__actions .cart-icon svg { flex: none; }

/* ---------- Іконки ---------- */
.site-header__action svg,
.site-header__actions .cart-icon svg {
  display: block;
  width: 1.0416666667vw;
  height: 1.0416666667vw;
}
@media (max-width: 1536px) {
  .site-header__action svg,
  .site-header__actions .cart-icon svg { width: 16px; height: 16px; }
}

/* Лічильники — `.btn .quantity` оригіналу.

   §280. Усі п'ять чисел у донора — пари з гілкою `@media ≤1536`:

     .btn .quantity { font-size:.6510416667vw; width:.9114583333vw;
                      height:.9114583333vw; top:-.1953125vw; right:-.1953125vw }
     @media ≤1536   { font-size:10px; width:14px; height:14px;
                      top:-3px; right:-3px }

   Стояли самі піксельні половини. Заміряно на живому донорі: кружечок
   14×14 при кеглі 10 на 1440 і **17.5×17.5 при 12.5** на 1920. */
.site-header .site-header__badge,
.site-header .cart-icon__bubble {
  position: absolute;
  top: -.1953125vw;
  right: -.1953125vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: .9114583333vw;
  height: .9114583333vw;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: .6510416667vw;
  line-height: 1;
}
@media (max-width: 1536px) {
  .site-header .site-header__badge,
  .site-header .cart-icon__bubble {
    top: -3px; right: -3px; width: 14px; height: 14px; font-size: 10px;
  }
}
.site-header__wishlist, .site-header__actions .cart-icon { position: relative; }

/* ============================================================
   МОБІЛКА (≤1000) — це ІНША секція, а не стиснута десктопна
   ------------------------------------------------------------
   В оригіналі на ≤1000 десктопна шапка ховається зовсім
   (`.header{display:none}`), а зверху стає `.mobHeadLine`:

     .mobHeadLine .wrap   grid-template-columns:55px 5fr 1fr; height:55px;
                          background:#fff; border-bottom:1px solid #f2f1f6
     .wrap .logo          flex-center, border-right:1px solid #f2f1f6
                          img /assets/ignor/mob-logo.svg — 46×46
     .wrap .mobSearchBtn  flex; gap:14px; height:100%; padding:0 16px; width:100%
                          .iconSvg 20×20 (icon-mob-search.svg, контурна)
                          .text 14px/normal #999 «What will we look for?»
     .wrap .locationBtn   flex-center; gap:5px; padding:0 8px;
                          border-left:1px solid #f2f1f6
                          .item 16px/normal #333;  .icon 16×16 chevron

   Заміряно на живому eu.sistersaroma.com, вьюпорт 415, computed:
     колонки 55 / 277.5 / 82.5;  логотип svg (4,4) 46×46;
     лупа x=71 20×20;  підпис x=105 14px #999 h=17;
     «World» x=341.5 w=44.5 h=20;  chevron x=391 16×16.
   Третя колонка — це `1fr`, підтиснутий власним min-content: 1px рамки
   + 16 падінгів + (44.5 + 5 + 16) вмісту = 82.5. Тому ширину третьої
   колонки задає ДОВЖИНА НАЗВИ РИНКУ, а не число в CSS: у нас маркет
   резолвиться в «Georgia», в еталоні — «World», і межа між пошуком і
   країною стоїть на ~14 px лівіше. Це різниця даних, не геометрії:
   правило `55px 5fr 1fr` те саме, що в оригіналі.

   Бургер, акаунт, обране й кошик у мобільній шапці НЕ живуть — вони
   в нижній панелі `mobile-bar` (Menu / Search / Basket / Discounts /
   Cabinet), яка вже є в темі й показується на тій самій межі 1000.
   Тому тут вони просто ховаються, а не переносяться.
   ============================================================ */
@media (max-width: 1000px) {
  site-header.site-header {
    height: 55px;
    border-bottom-color: #f2f1f6;
    background: #fff;
  }

  /* .mobHeadLine .wrap */
  .site-header__inner {
    grid-template-columns: 55px 5fr 1fr;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }

  /* ---- колонка 1: логотип ---- */
  .site-header__logo {
    grid-column: 1;
    justify-self: stretch;
    justify-content: center;
    height: 100%;
    margin-right: 0;
    box-sizing: border-box;
    border-right: 1px solid #f2f1f6;
  }
  /* десктопна монограма 45×40 — інший файл і інша пропорція ® до S */
  .site-header__logo > svg:not(.site-header__logo-mob),
  .site-header__logo img { display: none; }
  /* Селектор із тегом навмисне: вище в цьому ж файлі стоїть
     `.site-header__logo svg{width:45px;height:40px}` (0,1,1) — воно
     сильніше за самий клас і чавило мобільну монограму в 45×40,
     тобто розтягувало квадратний viewBox 46 у прямокутник. */
  .site-header__logo svg.site-header__logo-mob {
    display: block;
    width: 46px;
    height: 46px;
    color: #000;
  }

  /* ---- колонка 2: рядок пошуку ---- */
  .site-header__lead {
    grid-column: 2;
    justify-self: stretch;
    align-items: stretch;
    gap: 0;
    min-width: 0;
  }
  /* бургер переїхав у нижню панель */
  .site-header__burger { display: none; }

  .site-header__lead .site-header__action.site-header__search-left {
    /* <button> без `font:inherit` малюється шрифтом UA (Arial), і підпис
       виходив на 9.3 px вужчим за еталон при однаковій масі чорнила.
       На десктопі це не було видно: там кнопка порожня.
       У design.css `font:inherit` є тільки в .site-header__burger. */
    font: inherit;
    flex: 1;
    min-width: 0;
    height: 100%;
    justify-content: flex-start;
    gap: 14px;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: left;
    cursor: pointer;
  }
  .site-header__search-left .site-header__glyph-desk { display: none; }
  .site-header__search-left .site-header__glyph-mob {
    display: block;
    flex: none;
    width: 20px;
    height: 20px;
    color: #000;
  }
  .site-header__search-label {
    display: block;
    overflow: hidden;
    font-size: 14px;
    line-height: normal;
    font-weight: 400;
    color: #999;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* ---- колонка 3: країна ---- */
  .site-header__actions {
    grid-column: 3;
    justify-self: stretch;
    justify-content: center;
    gap: 5px;
    height: 100%;
    padding: 0 8px;
    box-sizing: border-box;
    border-left: 1px solid #f2f1f6;
  }
  /* акаунт, обране й кошик — у нижній панелі */
  .site-header__actions .site-header__action,
  .site-header__actions .cart-icon,
  .site-header__actions [data-section-mount='cart-icon-bubble'] { display: none; }

  .site-header__actions .localization {
    height: auto;
    padding: 0;
    background: none;
  }
  .localization__toggle {
    gap: 5px;
    font-size: 16px;
    line-height: 20px;
    color: #333;
  }
  .localization__toggle svg { width: 16px; height: 16px; }

  /* Іконки не стискаємо ніколи — flex-контейнер вужчий за вміст тисне
     саме svg, і лупа виходила 13–15px замість 20. */
  .site-header__action svg,
  .localization__toggle svg { flex: none; }
}

/* Мобільні вузли не існують ширше за 1000: на десктопі шапка інша.
   Пишемо це ПІСЛЯ медіа-блока, щоб не залежати від порядку.

   Селектори з тегом навмисне. `.site-header__logo svg{display:block}`
   вище в цьому ж файлі має специфічність (0,1,1) і перебиває голий клас
   (0,1,0): монограма 46×46 лишалась видимою на 1440 поруч із десктопною,
   і дві літери S ставали одним чорним кавалком — 1 601 червоний піксель
   рівно посередині шапки. */
@media (min-width: 1001px) {
  .site-header__logo svg.site-header__logo-mob,
  .site-header__action svg.site-header__glyph-mob,
  .site-header__search-left .site-header__search-label { display: none; }
}

/* Задача 508: гілку 769…999 з `#MainContent { padding-top: 43px }` прибрано.
   Вона відтворювала подвійний резерв донора під його ФІКСОВАНУ мобільну шапку
   (43 плашки над 55 шапки ще раз). Нова шапка йде в потоці на всіх ширинах,
   і ці 43 px лишались порожньою смугою над контентом лише в цьому діапазоні. */

/* ============================================================
   ПРИКРІПЛЕННЯ ШАПКИ — вона має лишатись на екрані, як в оригіналі
   ------------------------------------------------------------
   Заміряно на живому сайті, скрол 0 → 1200 → 900, обидва режими:

     оригінал @1440   .headerWrap  position:fixed  h=123  y=0   — завжди видно
     оригінал @415    .mobHeadLine position:fixed  h=55   y=43  — завжди видно
     наша @1440/@415  site-header  position:sticky       y=-937 — їде геть

   Тобто плашка + шапка в оригіналі прибиті до верху на будь-якому
   скролі й ніколи не ховаються. У нас вони зникали зовсім — і жоден
   піксельний діф цього не бачив, бо всі знімки робляться на скролі 0.

   Дві причини, обидві полагоджені тут:

   1. ПАСТКА STICKY. `.site-header--sticky{position:sticky;top:0}` у
      base.css висить на самому `site-header`, а його контейнер —
      `<div class="shopify-section shopify-section-group-header-group">`
      рівно тієї ж висоти. Липкому елементу нема куди їхати всередині
      власного контейнера, тож він поводиться як статичний і зникає
      разом із ним. Липким має бути КОНТЕЙНЕР, чий батько — `<body>`.
   2. РЕЖИМ. `sticky_mode` типово був `scroll-up`, тобто шапка навмисне
      ховалась на скролі вниз (клас `is-hidden`, `translateY(-100%)`).
      В оригіналі такої поведінки нема — типове значення тепер `always`.

   Робимо через `sticky`, а НЕ через `fixed`: fixed вийняв би шапку з
   потоку, сторінка стала б на 98 (моб) / 123 (деск) px коротшою, і
   поїхали б УСІ смуги нижче. Sticky місце в потоці зберігає.

   z-index: дравери 90, модалки 100 — лишаються поверх шапки.
   ============================================================ */
/* Саме закріплення групи й відступ під смугою оголошень тепер задає
   announcement.css — там, де живе сама смуга; тримати правило про її
   висоту окремо від неї означало правити у двох місцях. */

/* В оригіналі під шапкою рамка-волосина, а не тінь: `.header` має
   `border-bottom:1px solid #e5e5e5`, і на скролі нічого не додається.
   base.css вішав `box-shadow` на `.is-scrolled` — прибираємо. */
.site-header--sticky.is-scrolled { box-shadow: none; }

/* ============================================================
   НИЖНЯ МОБІЛЬНА ПАНЕЛЬ — `.mobBottomLine` оригіналу
   ------------------------------------------------------------
   Мобільний двійник шапки: меню, пошук і кошик, яких у верхньому
   рядку немає, живуть тут. Тому веде її той самий агент.

   Заміряно на живому eu.sistersaroma.com, 415 і 900 — числа однакові:

     .mobBottomLine   fixed bottom:0; h=62; display:flex;
                      justify-content:space-around; align-items:center;
                      background:#fff; рамки НЕМА — п'ятишарова тінь угору
     .item            flex-column; align-items:center; padding:8px; gap:5px;
                      font-size:12px; line-height:normal (текст h=15); color:#333
     .item .iconSvg img  26×26, opacity:.5 (на :hover 1, transition .3s)
     .item .quantity  17×17, коло, фон #000, білий 10px, top:16px right:11px
     body             padding-bottom:62px

   Було в нас: h=58.09 (grid 5×1fr, padding 8/4, gap 4, шрифт 10px,
   line-height 17.1, іконки 20×20 при opacity 1, рамка зверху замість тіні).
   Звідси й систематичні +3.9 по `top` та −3.9 по висоті: 62 − 58.09.

   Висота збирається так: 8 + 26 + 5 + 15 + 8 = 62.

   Підписи виправлені в `mobile-bar.liquid`: «Basket» замість «Cart» і
   «Cabinet» замість «Account» — це власний англійський текст старого
   сайту. Ключі додані окремі (`general.basket`, `general.cabinet`), бо
   `cart.title` і `general.account` використовуються ще в кошику,
   у шапці й на сторінках акаунта, і чіпати їх не можна.
   ============================================================ */
@media (max-width: 1000px) {
  .mobile-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #fff;
    border-top: 0;
    /* оригінальна тінь угору замість рамки — саме вона, а не border,
       дає ту межу, яку видно над панеллю */
    box-shadow:
      0 -157px 44px 0 transparent,
      0 -100px 40px 0 rgba(0, 0, 0, .01),
      0 -56px 34px 0 rgba(0, 0, 0, .03),
      0 -25px 25px 0 rgba(0, 0, 0, .04),
      0 -6px 14px 0 rgba(0, 0, 0, .05);
  }

  .mobile-bar__item {
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px;
    font-size: 12px;
    line-height: normal;
    color: #333;
  }

  .mobile-bar__icon {
    display: block;
    flex: none;
    width: 26px;
    height: 26px;
    /* Гліфи в оригіналі — окремі файли зі `stroke="black"`, і `opacity:.5`
       накладається вже на чорне: 50% #000 по білому = #808080.
       У нас вони інлайнові й беруть `currentColor`, тобто #333 підпису,
       і те саме півпрозоре виходило #999 — світліше на всіх контурах
       одразу. Колір гліфа задаємо явно, він не колір тексту. */
    color: #000;
    opacity: .5;
    transition: opacity .3s;
  }
  .mobile-bar__item:hover .mobile-bar__icon { opacity: 1; }

  /* У base.css лежить глобальне `a:hover{color:var(--c-accent)}`, і пункти
     панелі — це посилання, тож на дотик і ховер вони червоніли. В оригіналі
     колір не змінюється взагалі: там реагує лише прозорість іконки.
     Тримаємо #333 у всіх станах, зокрема :active — на телефоні саме він
     і спрацьовує при тапі. */
  .mobile-bar__item,
  .mobile-bar__item:hover,
  .mobile-bar__item:focus,
  .mobile-bar__item:active,
  .mobile-bar__item:visited { color: #333; }
  .mobile-bar__item:hover .mobile-bar__text,
  .mobile-bar__item:active .mobile-bar__text { color: #333; }

  /* Підміна гліфа при відкритому меню — донорські
     `.item .iconSvg.open{display:none}` і
     `.item.active .iconSvg.open{display:block}`, тільки замість класу
     `.active`, який там вішає скрипт, у нас уже є `aria-expanded`. */
  .mobile-bar__icon--open { display: none; }
  [data-menu-toggle][aria-expanded='true'] .mobile-bar__icon { display: none; }
  [data-menu-toggle][aria-expanded='true'] .mobile-bar__icon--open { display: block; }

  .mobile-bar__text { line-height: normal; }

  /* .mobBottomLine .item .quantity */
  .mobile-bar .mobile-bar__badge {
    position: absolute;
    top: 16px;
    right: 11px;
    left: auto;
    width: 17px;
    height: 17px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    background: #000;
    color: #fff;
    font-size: 10px;
    line-height: 17px;
    text-align: center;
    transform: none;
  }

  /* Задача 507: саму панель знято з `theme.liquid` — у мобільному макеті її
     немає, а меню, пошук і кошик живуть у новому хедері. Резерв 62 px під неї
     знятий нулем, а не видаленим правилом: без нього ожив би
     `body { padding-bottom: 60px }` із тієї самої гілки design.css. */
  body { padding-bottom: 0; }
}

/* Банер згоди на cookie (`snippets/cookie-consent.liquid`).

   Оригінал показує його модалкою по центру з затемненням; кнопки в ряд,
   налаштування — другим екраном тієї самої модалки. Ширина 640 як у донора,
   на мобілці — на всю ширину з полями 16. */
.cookie-consent { position: fixed; inset: 0; z-index: 120; display: flex;
  align-items: center; justify-content: center; }
.cookie-consent[hidden] { display: none; }
.cookie-consent__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.cookie-consent__modal { position: relative; width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 64px); overflow-y: auto; background: #fff;
  padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.cookie-consent__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cookie-consent__title { font-size: 18px; line-height: 24px; font-weight: 700;
  text-transform: uppercase; margin: 0; }
.cookie-consent__skip { background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 13px; line-height: 18px; color: var(--c-muted); text-decoration: underline; }
.cookie-consent__welcome { font-weight: 700; text-transform: uppercase; margin: 0 0 8px; }
.cookie-consent__body p, .cookie-consent__prefs p { font-size: 14px; line-height: 20px; margin: 0 0 12px; }
.cookie-consent__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.cookie-consent__group { display: grid; grid-template-columns: 20px 1fr; gap: 4px 12px;
  align-items: start; padding: 12px 0; border-top: 1px solid var(--c-line, #e6e6e6); }
.cookie-consent__group input { grid-row: span 2; margin-top: 2px; }
.cookie-consent__group-name { font-weight: 700; font-size: 14px; line-height: 20px; }
.cookie-consent__group-text { font-size: 13px; line-height: 18px; color: var(--c-ink-2); }
@media (max-width: 599px) {
  .cookie-consent__modal { padding: 20px 16px; gap: 12px; }
  .cookie-consent__title { font-size: 16px; }
}

/* ============================================================
   ПОПАП СЕЛЕКТОРА МОВИ — СТИЛІ ДОНОРА (пункт 171)
   ------------------------------------------------------------
   У донора це `.customSelectWrapper > .customSelectWrap >
   .customSelectHead + .customSelectContent`. Наші класи інші
   (`.localization__toggle` + `.localization__list`), тож переносимо
   правила на них, лишаючи його числа.

   Обертання стрілки в нього вішає клас на обгортці:
     .customSelectWrap.active .customSelectHead .icon { rotate(180deg) }
   Наш гачок — `aria-expanded` на самій кнопці (його ж ставить
   localization.js), тому другого класу не заводимо.
   ============================================================ */
.localization__toggle svg { transition: transform .3s; }
.localization__toggle[aria-expanded='true'] svg { transform: rotate(180deg); }

.site-header__actions .localization__list,
.site-footer .site-footer__lang .localization__list {
  background: #fff;
  border: none;
  border-radius: .1302083333vw;
  box-shadow: 0 0 .6510416667vw hsla(0, 0%, 87%, .5), inset 0 0 0 1px #e8e8e8;
  padding: .8333333333vw;
  width: 7.8125vw;
  position: absolute;
  right: 0;
  top: 160%;
  left: auto;
  margin: 0;
  max-height: 13.0208333333vw;
  overflow: hidden;
  overflow-y: auto;
  list-style: none;
  z-index: 20;
}
@media (max-width: 1536px) {
  .site-header__actions .localization__list,
  .site-footer .site-footer__lang .localization__list {
    border-radius: 2px;
    box-shadow: 0 0 10px hsla(0, 0%, 87%, .5), inset 0 0 0 1px #e8e8e8;
    padding: 16px;
    width: 150px;
    max-height: 200px;
  }
}
/* Список у донора — flex-колонка з великим проміжком, а не щільний ul */
.site-header__actions .localization__list,
.site-footer .site-footer__lang .localization__list { display: flex; flex-direction: column; gap: 1.5625vw; }
/* ПОПАП МУСИТЬ ЗАЛИШАТИСЬ ЗАКРИТИМ, ПОКИ ЙОГО НЕ ВІДКРИЛИ.
   Розмітка тримає його на атрибуті `hidden` (`<ul class="localization__list" hidden>`),
   і `localization.js` перемикає саме його (`list.toggleAttribute('hidden', !open)`).
   Але правило вище задає `display: flex` беззастережно, а це перебиває
   типове `[hidden] { display: none }` браузера — і список висів РОЗКРИТИМ
   на кожній сторінці. Заміряно на 415: попап 150×200 у координатах 92…292,
   `display:flex / visibility:visible / opacity:1`, з видимим ланцюгом предків;
   на десктопі те саме (видно на знімку partners-store).
   У підвалі такий запобіжник уже стояв (`footer.css`), у шапці його забули. */
.site-header__actions .localization__list[hidden] { display: none; }
@media (max-width: 1536px) {
  .site-header__actions .localization__list,
  .site-footer .site-footer__lang .localization__list { gap: 24px; }
}
.site-header__actions .localization__option,
.site-footer .site-footer__lang .localization__option {
  align-items: center;
  background: none;
  border: 0;
  color: #333;
  cursor: pointer;
  display: flex;
  font-size: .9114583333vw;
  gap: .5208333333vw;
  line-height: 1.0416666667vw;
  padding: 0;
  text-align: left;
  text-decoration: none;
  width: 100%;
}
@media (max-width: 1536px) {
  .site-header__actions .localization__option,
  .site-footer .site-footer__lang .localization__option { font-size: 14px; gap: 8px; line-height: 16px; }
}
/* Наведення в донора не підсвічує фон, а робить напис чорним і жирним */
.site-header__actions .localization__option:hover,
.site-footer .site-footer__lang .localization__option:hover { background: none; color: #111; font-weight: 700; }
.site-header__actions .localization__option[aria-selected='true'],
.site-footer .site-footer__lang .localization__option[aria-selected='true'] { background: none; font-weight: 400; }

/* §326. Підпис мови в шапці: повна назва від 769, дволітерний код нижче.
   Донор у шапці друкує код і показує назву лише у списку. На телефоні дві
   пігулки поруч не лишають місця для «English» — підпис упирався в край. */
.localization__current--short { display: none; }
@media (max-width: 768px) {
  .site-header__actions .localization__current--full { display: none; }
  .site-header__actions .localization__current--short { display: inline; }
}


/* §337. Пошук на мобілці — сама лупа, без поля.

   Було: кнопка розтягувалась на весь вільний простір (`flex: 1`) і несла
   підпис «What will we look for?». Це не справжній інпут — під ним усе
   одно відкривається модалка пошуку, — але виглядало як широке поле і
   з'їдало середину шапки. Власник попросив лишити тільки лупу.

   Тому підпис ховаємо, а кнопку повертаємо до розміру іконки. Поведінка
   не змінюється: `data-search-open` як відкривав модалку з полем, так і
   відкриває — «натиснув і з'явилось поле» вже працює саме так.

   Ширину лишаємо 40 px: це нижня межа зручної цілі для пальця, і саме
   стільки має сусідній бургер — інакше дві кнопки поруч були б різні. */
@media (max-width: 1000px) {
  .site-header__lead .site-header__action.site-header__search-left {
    flex: none;
    width: 40px;
    min-width: 40px;
    justify-content: center;
    /* §339. ПАДІНГИ ЗНЯТІ, інакше лупа лишається розчавленою.

       Кнопка `border-box`, і правило вище дає їй `padding: 0 16px`. При
       ширині 40 px це лишає вмісту рівно 40 − 32 = 8 px, і лупа міряється
       8×20 замість 20×20 донора. Тобто зменшив іконку не розмір кнопки,
       а падінги всередині неї.

       Ціль для пальця від цього не страждає: 40×54 лишається, просто
       тепер це 40 px під іконку, а не під поля. */
    padding: 0;
  }
  .site-header__search-left .site-header__search-label { display: none; }
}

/* ---------- home.css ---------- */
/* Головна сторінка — уся геометрія.
 *
 * Джерело істини — заміри живого eu.sistersaroma.com у 27 точках ширини
 * (375…1600). Головне, що з них випливає: у оригіналу НЕМА єдиної межі 1000.
 * Він перемикається на трьох різних порогах, і кожен блок — на своєму:
 *
 *   хіро            599   (31.2vw → 110vw)
 *   шапка каруселі  768   (vw-рецепт → 30/15/18 + 18/24 UPPERCASE)
 *   заголовок блогу 1000 і 768 (два різні перемикання)
 *   SEO-врізка      768
 *   ширина слайда   1441 · 1440 · 1024 · 768  (пороги swiper по ширині)
 *   стрічка блогу   min-aspect-ratio 3/4 і 1/1 (пороги swiper по ВИСОТІ вікна)
 *
 * Плюс два верхні кепи, невидимі на 1440: заголовки перестають рости у vw
 * вище 1536 (шапка каруселі) і в діапазоні 1001…1536 (заголовок блогу).
 * `max()` відтворює обидва без медіа-гілки.
 */

/* Шрифт стрілок swiper — скопійований байт у байт зі swiper-bundle.min.css
 * оригіналу (data-URI, зовнішніх запитів нема). Тримає лігатури 'prev' і
 * 'next', якими swiper малює шеврони; без нього ::after кнопок хіро
 * показував би самі слова. */
@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}

/* ================= Хіро (.sliderFullPage) ================= */

/* Оригінал: height:31.2vw, єдине перекриття — @media(max-width:599px){110vw}.
   Було 110vw під ≤1000 — саме звідси +709 px на 900 і +552 на 700. */
.hero, .hero__slide { height: 31.2vw; }
@media (max-width: 599px) { .hero, .hero__slide { height: 110vw; } }

/* `height:100%` на <img> нічого не давало: між слайдом і картинкою стоять
   <a> і <picture> з висотою auto, тож відсоток не мав від чого рахуватись
   і кадр малювався у власній пропорції (450.5 замість 449.3). */
.hero .embla__viewport, .hero .embla__container { height: 100%; }
.hero__link, .hero__link picture { display: block; height: 100%; }
.hero__image { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Стрілки — `.sliderFullPage .sliderArrow` оригіналу, перенесені разом із
   базовими правилами swiper-бандла (без них розміри й центрування кнопки
   не сходяться).

   ФОНУ В КНОПКИ НЕМА ЗОВСІМ: круг 48×48 прозорий, а «підкладка» — це
   backdrop-filter:blur(6px), тобто розмитий кадр слайда під кнопкою.
   Саме його ми й губили: у нас був просто прозорий круг, і стрілка
   пропадала на строкатому кадрі.

   По вертикалі swiper ставить `top:50%` мінус половину СВОГО розміру
   (--swiper-navigation-size 44 / 2 = 22), а не половину переоприділених 48,
   тож центр кнопки виходить на 2 px нижче центра хіро. Відтворюємо тим
   самим способом, а не translateY.

   z-index:10 — з бандла; base.css дає 2, чого мало б забракло, якби над
   хіро лежав ще один шар. На ≤768 стрілок нема зовсім. */
.hero__arrow {
  position: absolute; top: 50%; margin-top: -22px; transform: none; z-index: 10;
  width: 48px; height: 48px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer;
  /* Оригінал показує стрілки лише після ініціалізації слайдера
     (`.sliderFullPage.is-ready`) — до того вони не блимають поверх кадру. */
  opacity: 0; visibility: hidden; transition: opacity .3s ease;
}
embla-slider.is-ready .hero__arrow { opacity: 1; visibility: visible; }
.hero__arrow--prev { left: 20px; }
.hero__arrow--next { right: 20px; }

/* Іконка — не мальований вектор, а той самий гліф шрифту swiper-icons, що й
   у оригіналі: swiper пише `content:'prev'/'next'`, і шрифт підміняє слово
   лігатурою-шевроном. Наш SVG-шеврон 20×32 зі stroke-width:2 давав іншу
   форму й іншу вагу (гліф оригіналу — 16.44×32 з тонким штрихом). */
.hero__arrow::after {
  font-family: swiper-icons;
  font-size: 32px;
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
  color: rgba(0, 0, 0, .55);
}
.hero__arrow--prev::after { content: 'prev'; }
.hero__arrow--next::after { content: 'next'; }
.hero__arrow:hover::after { color: #000; }
@media (max-width: 768px) { .hero__arrow { display: none; } }

/* Риски внизу зліва. Ліва межа й крок у оригіналі однакові на всіх ширинах
   (8.3333vw і 16 px), у vw переходить лише сама риска — і тільки на ≤599.
   Ширина смуги пагінації в оригіналі обмежена (пів екрана мінус поле, на
   мобільному — весь екран мінус поле), тож риски не можуть розповзтися під
   праву стрілку. justify-content:flex-start обов'язковий саме через цю
   ширину: base.css центрує `.embla__dots`, і поки контейнер був по контенту,
   центрування ні на що не впливало — а з фіксованою шириною воно віднесло
   риски на середину смуги (120 → 285 px на 1440). */
.hero__dots {
  /* Знаки після коми — як в оригіналі: обрізані 8.33333vw дають на 1440
     119.9995 замість рівних 120, і риски стають на 0.016 px лівіше. */
  left: 8.3333333333vw; right: auto; bottom: 2.8645833333vw;
  width: calc(50% - 8.33333vw);
  display: flex; align-items: center; justify-content: flex-start; gap: 0;
  transform: translateZ(0); transition: opacity .3s; z-index: 10;
}
/* АКТИВНА РИСКА В ОРИГІНАЛІ НЕ МІНЯЄ ГЕОМЕТРІЮ — різниця тільки в
   непрозорості: .2 → 1. Базовий `.embla__dot.is-active` теми (base.css:126)
   додає transform:scale(1.25), і саме він роздував нашу активну риску до
   28.125×2.5 замість 22.5×2 та зсував її на 2.83 px ліворуч від сітки
   (масштаб рахується від центра, а не від лівого краю).
   transition:all 0s — теж як в оригіналі: перемикання миттєве, тоді як
   base.css анімував background і transform по 150 ms. */
.hero__dots .embla__dot {
  width: 1.5625vw; height: 2px; margin-right: 16px; padding: 0;
  border: 0; border-radius: 0; background: #000; opacity: .2; cursor: pointer;
  transform: none; transition: all 0s ease 0s;
}
.hero__dots .embla__dot.is-active { opacity: 1; background: #000; transform: none; }
@media (max-width: 599px) {
  .hero__dots { left: 8.3333333333vw; bottom: 11.11vw; width: calc(100% - 8.33333vw); }
  .hero__dots .embla__dot { width: 6.66vw; margin-right: 2.77vw; }
}

/* ================= Каруселі товарів (.productCarouselMod) ================= */

.collection-carousel { position: relative; margin: 0 auto; }

/* Шапка. Падінги у vw живуть до 768 включно (не до 1000!), а розмір тексту
   зверху впирається в 32/40: вище 1536 це 2.0833vw/2.6041vw, нижче — фікс.
   max() дає рівно ту саму криву без другої медіа-гілки.
   margin-bottom:0 гасить base.css:318 — у оригіналу шапка й ряд стикуються. */
.collection-carousel__head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 2.60417vw 4.16667vw 2.08333vw;
  margin-bottom: 0;
}
.collection-carousel__title {
  margin: 0;
  font-size: max(32px, 2.08333vw);
  line-height: max(40px, 2.60417vw);
  font-weight: var(--fw-bold); color: var(--c-ink); text-transform: none;
}
.collection-carousel__title a { color: inherit; text-decoration: none; }
.collection-carousel__all { font-size: var(--fs-13); color: var(--c-muted-2); }
@media (max-width: 768px) {
  /* На ≤768 оригінал розсуває сусідні каруселі на 40 px (і так само відділяє
     останню від блока статей), а хіро від першої каруселі — ні. У самої
     `.productCarouselMod` margin нульовий: 40 приходять зсередини й
     виштовхуються схлопуванням. Тут це просто margin-bottom на секції —
     коробка секції лишається тієї самої висоти, як і в оригіналі,
     а просвіт з'являється. Четверо гейтів × 40 = 160 px, яких нам бракувало
     на 700 і на 415. */
  .collection-carousel { margin-bottom: 40px; }
  .collection-carousel__head { padding: 30px 15px 18px; justify-content: center; }
  .collection-carousel__title {
    font-size: 18px; line-height: 24px; text-transform: uppercase; text-align: center;
  }
}

/* Ряд карток.
 *
 * `.productCarouselModSwiper` має breakpointsBase:"window" і ЧИСЛОВІ пороги
 * {768:2.7, 1024:3.3, 1440:4.3} — тобто по ширині вікна, як звичайні медіа.
 * (Стрічка блогу нижче — навпаки, на ratio. Не переплутати.)
 *
 * Заміряно на живому сайті, ширина слайда:
 *   ≥1441        23vw            (CSS оригіналу перебиває інлайн swiper-а)
 *   1440         (W−1)/4.3       = 23.2558% контенту контейнера
 *   1024…1439    (W−1)/3.3       = 30.3030%
 *    768…1023    (W−1)/2.7       = 37.0370%
 *   ≤767         58vw            (знову CSS, а не swiper)
 * «−1» — це border-left самого контейнера, тому відсотки беруться від
 * контенту й збігаються з оригіналом до сотої.
 *
 * padding-right:16px з base.css:324 не скидався ніде: слайди сходились точно,
 * а картка всередині виходила на 16 px вужча — і, оскільки кадр квадратний,
 * рівно на стільки ж нижча. Правило чіпає тільки цю секцію (клас більше
 * ніде не використовується), тож гасимо його тут, а не в base.css. */
.embla__slide.collection-carousel__slide {
  flex: 0 0 23vw; min-width: 0; display: flex; padding-right: 0;
  border-top: 1px solid var(--c-line-2); border-right: 1px solid var(--c-line-2);
}
.embla__slide.collection-carousel__slide .product-card { width: 100%; }
@media (max-width: 1440px) { .embla__slide.collection-carousel__slide { flex-basis: 23.2558%; } }
@media (max-width: 1439px) { .embla__slide.collection-carousel__slide { flex-basis: 30.3030%; } }
@media (max-width: 1023px) { .embla__slide.collection-carousel__slide { flex-basis: 37.0370%; } }
@media (max-width:  767px) { .embla__slide.collection-carousel__slide { flex-basis: 58vw; } }

.collection-carousel__slider { display: block; position: relative; }
.collection-carousel .embla__container { border-left: 1px solid var(--c-line-2); }
.collection-carousel .embla__slide:last-child { border-bottom: 0; }
.collection-carousel__slider::after {
  content: ""; display: block; height: 1px; background: var(--c-line-2);
}
.collection-carousel__arrow {
  position: absolute; top: 40%; z-index: 6;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .8); border: 0; border-radius: 50%;
  color: var(--c-ink); cursor: pointer; opacity: 0; transition: opacity var(--dur-base);
}
.collection-carousel:hover .collection-carousel__arrow { opacity: 1; }
.collection-carousel__arrow--prev { left: var(--s-12); }
.collection-carousel__arrow--next { right: var(--s-12); }
/* Гілка ≤768 стоїть саме тут, а не в блоці шапки вище: там вона йшла ПЕРЕД
   базовим `display:grid` і мовчки програвала йому на всіх ширинах. */
@media (max-width: 768px) { .collection-carousel__arrow { display: none; } }

/* ================= Статті (.newsItems) ================= */

/* Падінги 5.0130vw / 8.3333vw однакові на ВСІХ ширинах — у оригіналу тут
   немає жодного перекриття, ні на 1000, ні на 768. */
.blog-posts { margin: 0 auto; padding: 5.01302vw 8.33333vw; max-width: none; }

/* Заголовок перемикається двічі: у 1001…1536 він фіксовані 64/72 (max()),
   на ≤1000 повертається у vw, на ≤768 стає 32/40 UPPERCASE.
   margin-bottom:60px тримається на всіх ширинах, зокрема й на мобілці. */
.blog-posts__head { display: block; padding: 0; margin: 0 0 60px; }
.blog-posts__title {
  margin: 0;
  font-size: max(64px, 4.16667vw);
  line-height: max(72px, 4.6875vw);
  font-weight: var(--fw-bold); color: #333;
}
@media (max-width: 1000px) {
  .blog-posts__title { font-size: 4.16667vw; line-height: 4.6875vw; }
}
@media (max-width: 768px) {
  .blog-posts__title { font-size: 32px; line-height: 40px; text-transform: uppercase; }
}

/* Стрічка. `.newsItemsSwiper` — {slidesPerView:1, spaceBetween:40,
 * breakpoints:{"@0.75":2,"@1.00":3,"@1.50":3}}. `@`-пороги swiper рахує як
 * `innerHeight × ratio` і порівнює з ШИРИНОЮ, тобто «@0.75» — це буквально
 * `width ≥ height×0.75`, він же `@media (min-aspect-ratio: 3/4)`.
 * Переноситься один в один, без прив'язки до висоти знімка.
 *
 * spaceBetween:40 swiper реалізує як margin-right на КОЖНОМУ слайді, зокрема
 * й на останньому, — тому тут margin, а не gap: тоді стрічка виїжджає за
 * правий край рівно так само, як у оригіналі, і ширина слайда збігається
 * з формулою swiper-а (W − sb×(spv−1))/spv до сотої. */
.blog-posts__slider { display: block; position: relative; }
.blog-posts__grid {
  display: flex; margin: 0; padding: 0; list-style: none;
  grid-template-columns: none; gap: 0;
}
.blog-posts__item {
  flex: 0 0 100%; min-width: 0; margin-right: 40px;
}
/* Swiper при підрахунку довжини стрічки віднімає останній spaceBetween
   (`virtualSize -= spaceBetween`), тому на деску стрічка рівно в контейнер
   і не тягнеться (`isLocked: true`, один снап). Без цього рядка наша
   стрічка мала два снапи й їздила на 40 px там, де оригінал стоїть. */
.blog-posts__item:last-child { margin-right: 0; }
@media (min-aspect-ratio: 3/4) { .blog-posts__item { flex-basis: calc((100% - 40px) / 2); } }
@media (min-aspect-ratio: 1/1) { .blog-posts__item { flex-basis: calc((100% - 80px) / 3); } }

/* Смужки пагінації під стрічкою. У оригіналі вузол у DOM завжди, а
   display:flex вмикається лише на ≤599; рецепт риски той самий, що в хіро. */
.blog-posts__dots { display: none; }
@media (max-width: 599px) {
  /* justify-content і gap глушимо з тієї ж причини, що й у хіро: base.css
     центрує `.embla__dots` і розсуває їх на 8 px, а в оригіналі смуга
     починається від лівого поля й крок тримає лише margin-right риски.
     Заміряно на 415: перша риска стояла на 137.38 замість 34.58, крок
     47.11 замість 39.11. */
  .blog-posts__dots {
    display: flex; align-items: center; position: static;
    justify-content: flex-start; gap: 0;
    margin-top: 24px; left: auto; right: auto; bottom: auto;
  }
  /* Активна риска в оригіналі не змінює геометрію — тільки непрозорість.
     `.embla__dot.is-active{transform:scale(1.25)}` з base.css роздував її до
     34.531×2.5 замість 27.625×2 і зсував із сітки. */
  .blog-posts__dots .embla__dot {
    width: 6.66vw; height: 2px; margin-right: 2.77vw; padding: 0;
    border: 0; border-radius: 0; background: #000; opacity: .2; cursor: pointer;
    transform: none; transition: all 0s ease 0s;
  }
  .blog-posts__dots .embla__dot.is-active { opacity: 1; background: #000; transform: none; }
}

/* Картка статті: фото → 32 → дата → 16 → заголовок.

   §271. «Дата 14/16 — фіксовані px на всіх ширинах» було НЕПРАВДОЮ, і
   вона трималась рівно тому, що знімки робляться на 1440. У донора:

     .newsItems .item .itemInfo { font-size:.9114583333vw;
                                  line-height:1.0416666667vw;
                                  margin-bottom:16px; gap:8px }
     @media (max-width:1536px) { font-size:14px; line-height:16px }

   Тобто кегль і крок ТЕЧУТЬ (на 1920 у нього 17.5/20), а поле й геп
   справді сталі. Заміряно на живому донорі: 1440 — 14/16 в обох,
   1920 — донор 17.5/20, у нас лишалось 14/16. */
.blog-posts__link { display: block; text-decoration: none; color: inherit; }
.blog-posts__image, .blog-posts__link img {
  display: block; width: 100%; height: auto; border-radius: 0; margin: 0 0 32px;
}
.blog-posts__date {
  display: block; color: #999; margin: 0 0 16px;
  font-size: .9114583333vw;                /* 14 на 1536 · 17.5 на 1920 */
  line-height: 1.0416666667vw;             /* 16 на 1536 · 20 на 1920 */
}
@media (max-width: 1536px) {
  .blog-posts__date { font-size: 14px; line-height: 16px; }
}
.blog-posts__name {
  display: block; color: #333; font-weight: var(--fw-bold);
  font-size: max(32px, 2.08333vw); line-height: max(40px, 2.60417vw);
}
@media (max-width: 768px) {
  .blog-posts__name { font-size: 18px; line-height: 24px; text-transform: uppercase; }
}

/* ================= SEO-врізка (.homeSeoIntro) ================= */

/* Бокові 8.3333vw не міняються ніде; вертикальні перемикаються на 768.
   Заголовок на мобілці стає 13/16.9 з колонкою 320 px. */
.rich-text { margin: 0 auto; padding: 32px 8.33333vw 24px; max-width: none; }
.rich-text__heading {
  margin: 0; max-width: 760px;
  font-size: 28px; line-height: 1.3; font-weight: var(--fw-bold); color: var(--c-ink);
}
.rich-text__body { max-width: 760px; }
@media (max-width: 768px) {
  .rich-text { padding: 24px 8.33333vw 16px; }
  .rich-text__heading { font-size: 13px; line-height: 1.3; max-width: 320px; }
}

/* ---------- login-modal.css ---------- */
/* ============================================================
   ПОПАП ВХОДУ — порт `#modalLogin.modal.modalSmall` донора
   ------------------------------------------------------------
   ЗВІДКИ ЧИСЛА. Усе нижче дослівно з `migrate/donor-src/donor-css/home.css`
   і підтверджено заміром живого донора (клас `openModal` руками,
   getBoundingClientRect + getComputedStyle) на 1440 і 415:

     #modalLogin       fixed, top 92, right 72, 336×354      (1440)
                       fixed, top 115, right 5%, 373.5×354   (415)
     > .wrap           padding 32/40/40
     .title            18/24 700 uppercase #333, mb 32   (14/24 на ≤768)
     .inputGroup       position:relative, margin-bottom 8
     input             40 висота, padding 0 16, 1px #e8e8e8, r2, 15/24 #333
     .validateStar:after  «*» 15×15, #999, 20px, right 10, top -5
     .customInput      flex, pl 24, gap 8, 14/16, margin-top 16
     .checkmark        16×16, 1px #333, r2, inset 0 0 0 2px #fff
     .errorTextWrap    #ff5f4a 14/16, margin 15 0, display:none → .active
     .buttonWrap       margin 32 0 16, .btn всередині на всю ширину
     .btn              flex 40 висоти, gap 8, r2, 1px; __blank = #111/#fff
     .links            flex space-between, .item 14/16 #111, hover underline

   Драбина одиниць донорська: до 1536 значення у vw (1536 px = 100vw його
   макета), нижче — фіксовані px. Тому кожне vw-правило має пару
   в `@media (max-width: 1536px)`.

   ЧОМУ ВСЕ ЗАКРІПЛЕНО ЗА `#modalLogin`. Донор тримає ці правила глобально
   (`.modal`, `.btn`, `input[type=text]`, `.customInput`), а в нашій темі
   таких глобальних класів немає — кожна секція везе свій порт. Глобальні
   `.btn` чи `input[type=text]` перефарбували б чужі шаблони, тож весь блок
   живе під id попапа.

   ПАСТКА `[hidden]` (розділ 5 брифу). Атрибута `hidden` тут НЕМАЄ навмисно:
   у донора показ вмикає клас (`display:none` → `.openModal{display:block}`),
   і якби ми додали ще й `hidden`, авторський `display:block` переміг би
   браузерне `[hidden]{display:none}` — попап висів би відкритим. Стан для
   читалок несе `aria-hidden`, а не `hidden`.
   ============================================================ */

/* ---------- коробка попапа ---------- */
/* УВАГА, вада родини «інший клас того самого елемента» (пастка 5 брифу).
   Класи донора `modal modalSmall` лишаємо, щоб порт упізнавався, — але в
   `base.css` уже є СВІЙ `.modal` для `<modal-dialog>`:
     .modal{position:fixed;inset:0;display:grid;place-items:center;
            padding:16px;visibility:hidden;pointer-events:none}
   Специфічність `#modalLogin` (1,0,0) перебиває тільки ті властивості, які
   ми оголосили. Тому чотири «зайві» гасимо руками: без `inset:auto` попап
   розтягнувся б на весь екран (bottom/left з `inset:0`), а без
   `visibility`/`pointer-events` був би невидимий і непіклабельний. */
#modalLogin {
  background: #fff;
  border: 1px solid hsla(0, 0%, 7%, .1);
  border-radius: 2px;
  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, .08);
  display: none;
  position: fixed;
  z-index: 9999999999;
  inset: auto;
  place-items: normal;
  padding: 0;
  visibility: visible;
  pointer-events: auto;
  right: 4.6875vw;
  /* Задача 509: верх попапа — низ шапки (`--sa-top-chrome` пише header.js), а
     не донорські 92 px. Нова шапка з плашкою закінчується на 99 px, і попап
     накривав її нижні 7 px разом із волосиною. Донорське число лишається
     запасним, поки header.js не відпрацював. */
  top: var(--sa-top-chrome, 5.9895833333vw);
  width: 21.875vw;
}
#modalLogin.openModal { display: block; }

@media screen and (max-width: 1536px) {
  #modalLogin { right: 72px; top: var(--sa-top-chrome, 92px); width: 336px; }
}
@media screen and (max-width: 768px) {
  /* мобільна шапка закінчується на 107 — попап, як і раніше, на 8 нижче */
  #modalLogin { right: 5%; top: calc(var(--sa-top-chrome, 107px) + 8px); width: 90%; }
}

/* ---------- хрестик ---------- */
/* `cursor` у донора стоїть на іконці, а не на самому `.closeModal` — так і лишаємо */
#modalLogin .closeModal {
  color: #111;
  opacity: .8;
  padding: 1.0416666667vw;
  position: absolute;
  right: 0;
  top: 0;
  transition: .3s;
}
#modalLogin .closeModal:hover { opacity: 1; transform: scale(1.2); }
#modalLogin .closeModal .iconSvg {
  cursor: pointer;
  display: block;
  height: 1.3020833333vw;
  width: 1.3020833333vw;
}
#modalLogin .closeModal .iconSvg svg { display: block; height: 100%; width: 100%; }

@media screen and (max-width: 1536px) {
  #modalLogin .closeModal { padding: 16px; }
  #modalLogin .closeModal .iconSvg { height: 20px; width: 20px; }
}

/* ---------- вміст ---------- */
#modalLogin > .wrap { padding: 2.0833333333vw 2.6041666667vw 2.6041666667vw; }

#modalLogin > .wrap .title {
  color: #333;
  font-size: 1.171875vw;
  font-weight: 700;
  line-height: 1.5625vw;
  margin-bottom: 2.0833333333vw;
  text-transform: uppercase;
}

@media screen and (max-width: 1536px) {
  #modalLogin > .wrap { padding: 32px 40px 40px; }
  #modalLogin > .wrap .title { font-size: 18px; line-height: 24px; margin-bottom: 32px; }
}
@media screen and (max-width: 768px) {
  #modalLogin > .wrap .title { font-size: 14px; line-height: 24px; }
}

/* ---------- поле ---------- */
#modalLogin .inputGroup { margin-bottom: .5208333333vw; position: relative; }

#modalLogin input[type="text"] {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: .1302083333vw;
  color: #333;
  font-size: .9765625vw;
  height: 2.6041666667vw;
  line-height: 1.5625vw;
  padding: 0 1.0416666667vw;
  transition: .3s;
  width: 100%;
}
/* Стан фокуса донора: рамка темніє до #333, а браузерне кільце знімається
   (`input:focus,textarea:focus{outline:none}` у його `home.css`). Без цього
   рядка наш попап малював синій обвід — попап відкривається з фокусом у
   полі, як у донора (`$('#loginUserEmail').focus()`), і різниця вилазила
   на першому ж кадрі. */
#modalLogin input[type="text"]:active,
#modalLogin input[type="text"]:focus { border: 1px solid #333; outline: none; }

/* Плейсхолдер у донора ДРІБНІШИЙ за текст поля: 14 проти 15 — заміряно
   на живому сайті (getComputedStyle(el,'::placeholder')). Це його
   недогляд, але відтворюємо як є.
   На фокусі донор його ховає: `input:focus::-webkit-input-placeholder
   {opacity:0;transition:opacity .3s ease}`. */
#modalLogin input[type="text"]::placeholder {
  color: #999;
  font-size: .9114583333vw;
  opacity: 1;
  transition: opacity .3s ease;
}
#modalLogin input[type="text"]:focus::placeholder { opacity: 0; }

/* Зірочка обов'язкового поля — `.validateStar:after` донора: сірий «*»
   на білому кружку, що сидить верхи на рамці поля. */
#modalLogin .validateStar { position: relative; }
#modalLogin .validateStar:after {
  background: #fff;
  border-radius: 50%;
  color: #999;
  content: "*";
  font-size: 1.3020833333vw;
  height: .9765625vw;
  line-height: 1;
  position: absolute;
  right: .6510416667vw;
  text-align: center;
  top: -.3255208333vw;
  width: .9765625vw;
  z-index: 8;
}

@media screen and (max-width: 1536px) {
  #modalLogin .inputGroup { margin-bottom: 8px; }
  #modalLogin input[type="text"] {
    border-radius: 2px;
    font-size: 15px;
    height: 40px;
    line-height: 24px;
    padding: 0 16px;
  }
  #modalLogin input[type="text"]::placeholder { font-size: 14px; }
  #modalLogin .validateStar:after {
    font-size: 20px;
    height: 15px;
    right: 10px;
    top: -5px;
    width: 15px;
  }
}

/* ---------- «Remember Me» ---------- */
#modalLogin .customInput {
  align-items: center;
  color: #333;
  cursor: pointer;
  display: flex;
  font-size: .9114583333vw;
  gap: 8px;
  line-height: 1.0416666667vw;
  padding-left: 1.5625vw;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}
#modalLogin > .wrap form .customInput { margin-top: 1.0416666667vw; }
#modalLogin .customInput input {
  cursor: pointer;
  height: 0;
  opacity: 0;
  position: absolute;
  width: 0;
}
#modalLogin .customInput .checkmark {
  background: #fff;
  border: 1px solid #333;
  border-radius: .1302083333vw;
  box-shadow: inset 0 0 0 .1302083333vw #fff;
  height: 1.0416666667vw;
  left: 0;
  position: absolute;
  top: 0;
  transition: .3s;
  width: 1.0416666667vw;
}
#modalLogin .customInput input:checked ~ .checkmark { background-color: #333; }

@media screen and (max-width: 1536px) {
  #modalLogin .customInput { font-size: 14px; line-height: 16px; padding-left: 24px; }
  #modalLogin > .wrap form .customInput { margin-top: 16px; }
  #modalLogin .customInput .checkmark {
    border-radius: 2px;
    box-shadow: inset 0 0 0 2px #fff;
    height: 16px;
    width: 16px;
  }
}

/* ---------- рядок помилки форми ---------- */
#modalLogin > .wrap form .errorTextWrap {
  color: #ff5f4a;
  display: none;
  font-size: .9114583333vw;
  line-height: 1.0416666667vw;
  margin: .9765625vw 0;
}
#modalLogin > .wrap form .errorTextWrap.active { display: block; }

@media screen and (max-width: 1536px) {
  #modalLogin > .wrap form .errorTextWrap { font-size: 14px; line-height: 16px; margin: 15px 0; }
}

/* Напис під конкретним полем — контракт `form-validate.js` (`[data-err]`).
   Донор малює його класом `error inputGroupMessage` усередині `.inputGroup`:
   той самий #ff5f4a 14/16, а рамка поля стає червоною. */
#modalLogin .inputGroup [data-err] {
  color: #ff5f4a;
  display: block;
  font-size: .9114583333vw;
  line-height: 1.0416666667vw;
  width: 100%;
}
#modalLogin .inputGroup [data-err][hidden] { display: none; }
#modalLogin .inputGroup:has([data-err]:not([hidden])) input[type="text"] { border: 1px solid #ff5f4a; }

@media screen and (max-width: 1536px) {
  #modalLogin .inputGroup [data-err] { font-size: 14px; line-height: 16px; }
}

/* ---------- кнопка ---------- */
#modalLogin > .wrap form .buttonWrap {
  margin-bottom: 1.0416666667vw;
  margin-top: 2.0833333333vw;
}
#modalLogin > .wrap form .buttonWrap .btn { width: 100%; }

/* ГАРНІТУРА КНОПКИ — ДОНОРСЬКА, РАЗОМ З ЙОГО НЕДОГЛЯДОМ (те саме, що вже
   описано в `header.css`): у `home.css` стоїть `.btn{font-family:Inter,
   sans-serif}`, але сам Inter донор не підключає — ні @font-face, ні
   Google Fonts, — тож напис малюється системним Arial. Без цього рядка
   кнопка успадковувала брендовий PCTL9600 і напис «Sign in» виходив
   43.19 замість донорських 42.81 px. */
#modalLogin .btn {
  align-items: center;
  border: 0;
  color: #111;
  cursor: pointer;
  display: flex;
  font-family: Inter, sans-serif;
  outline: none;
  gap: .5208333333vw;
  height: 2.6041666667vw;
  justify-content: center;
  min-width: 2.6041666667vw;
  outline: none;
  position: relative;
  text-decoration: none;
  transition: .3s;
}
#modalLogin .btn__blank {
  background: #111;
  border-color: #111;
  border-radius: .1302083333vw;
  border-style: solid;
  border-width: .0651041667vw;
  color: #fff;
  padding: 0 .6510416667vw;
}
#modalLogin .btn__blank:hover { opacity: .9; }
#modalLogin .btn .wrap {
  align-items: center;
  display: flex;
  gap: .5208333333vw;
  justify-content: center;
  padding: 0;
}
#modalLogin .btn .text { font-size: .9114583333vw; line-height: 1.0416666667vw; }

@media screen and (max-width: 1536px) {
  #modalLogin > .wrap form .buttonWrap { margin-bottom: 16px; margin-top: 32px; }
  #modalLogin .btn { gap: 8px; height: 40px; min-width: 40px; }
  #modalLogin .btn__blank { border-radius: 2px; border-width: 1px; padding: 0 10px; }
  #modalLogin .btn .wrap { gap: 8px; }
  #modalLogin .btn .text { font-size: 14px; line-height: 16px; }
}

/* ---------- нижні посилання ---------- */
#modalLogin > .wrap .links {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
#modalLogin > .wrap .links .item,
#modalLogin > .wrap .links a {
  color: #111;
  cursor: pointer;
  font-size: .9114583333vw;
  line-height: 1.0416666667vw;
  text-decoration: none;
}
#modalLogin > .wrap .links .item:hover,
#modalLogin > .wrap .links a:hover { text-decoration: underline; }

@media screen and (max-width: 1536px) {
  #modalLogin > .wrap .links .item,
  #modalLogin > .wrap .links a { font-size: 14px; line-height: 16px; }
}

/* Іконка акаунту в шапці стала `<button>` — у донора це теж кнопка
   (`<button class="btn btn__white jsLogin">`), а не посилання. Вигляд
   «пігулки» їй дає загальне правило `.site-header__actions
   .site-header__action` (0,2,0) — воно специфічніше за цей селектор і
   перебиває і фон, і рамку, і падінги. Тут лишається тільки те, чого
   браузер кнопці не дає сам. */
.site-header__action--login { cursor: pointer; font: inherit; }

/* ---------- menu-modal.css ---------- */
/* ============================================================
   МОДАЛЬНЕ МЕНЮ — ПОРТ CSS ДОНОРА, А НЕ ВЛАСНА ВЕРСТКА
   ------------------------------------------------------------
   Звідки: eu.sistersaroma.com, /css/home.css (256 КБ, мініфікований).
   Узяті ВСІ правила, у селекторі яких є корінь `.pcModal` (десктопна
   модалка `.menuPc.pcModal.jsPcModal`) або `.mobileModal` — 70 + 62 = 132
   правила, у тому самому порядку, що в донора, і з тими самими
   медіазапитами. Кожне правило переписане один-в-один: жодне число не
   підбиралося на око.

   Чому дослівно, а не «схоже»: у донора власна система одиниць — базові
   розміри у vw (`.close .iconSvg{height:1.3020833333vw}`), а нижче
   1536 px їх перебиває px-двійник у медіазапиті. Плитка на десктопі —
   `height:14vw`, на мобілці — `height:20vh`. Перевести це в статичні
   px означає зламати всі проміжні ширини: правильно на 1440 і криво на
   1280, 1600, 1920. Тому медіазапити перенесені разом із правилами, а
   кожне правило з медіазапиту загорнуте у власний `@media`, щоб
   не поламався порядок каскаду (у донора є селектори-дублі, де важить
   саме те, який іде останнім — напр. `#tabInfoPC .listWrap`).

   Що НЕ переносилося: `.mobileModalSearch` (це модалка пошуку, вона
   потрапила в попередній витяг помилково через схожу назву кореня) і
   `#tabRegionPC` (у розмітці донора на десктопі третьої вкладки немає —
   перемикач мов там живе в шапці; правила лишені, бо вони частина
   кореня `.pcModal`, і зайвими не шкодять).

   З 16.09 так само мертві, але лишені `.tabRegion`/`#tabRegion` мобілки:
   вкладку регіону й мови прибрано з розмітки, бо її дублює глобус мобільної
   шапки, а правила донора — частина кореня `.mobileModal`.

   Правити треба ТУТ, а не в theme/assets/sections.css — той файл
   збирається `python3 migrate/build_css.py`.
   ============================================================ */

/* ── 1. Правила донора, дослівно ─────────────────────────────── */
.mobileModal,body.mobileModalOpen{overflow:hidden}
.mobileModal{background:#fff;display:none;height:calc(100% - 66px);left:0;position:fixed;top:0;width:100%;z-index:99999999998}
.mobileModal.active{display:block}
/* Колонки рахуються самі, і це єдиний відступ від донора в цьому блоці.
   У донора тут жорстко `1fr 1fr 1fr` під три вкладки. 16.09 третю
   (регіон/мова) прибрали з розмітки — лишилися дві, і три колонки давали б
   порожню третину ряду, тому тоді поставили `1fr 1fr`. 12.10 вкладку
   повернули (`menu-modal.liquid`, гілка `variant == 'mob'`), а сітку назад
   не віддали — і третя вкладка поїхала на другий рядок.

   Щоб це не повторювалося на кожне вмикання-вимикання вкладки, колонки
   більше не задаються числом: `grid-auto-flow: column` розкладає стільки
   колонок, скільки реально вкладок, а `grid-auto-columns: 1fr` робить їх
   рівними. Дві вкладки — два рівні стовпці, три — три. */
.mobileModal .tabHead{grid-gap:5px;background:#efefef;border-radius:4px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin:15px 18px 13px;padding:5px}
.mobileModal .tabHead .tabItem{font-size:14px;font-weight:500}
.mobileModal .tabHead .tabItem .item{align-items:center;color:#333;display:flex;gap:5px;justify-content:center;padding:10px 20px}
.mobileModal .tabHead .tabItem .item .icon{height:17px;width:17px}
.mobileModal .tabHead .tabItem .item .icon svg{display:block;height:auto;width:100%}
.mobileModal .tabHead .tabItem.active{background:#fff;border-radius:4px;box-shadow:0 27px 8px 0 transparent,0 18px 7px 0 transparent,0 10px 6px 0 rgba(0,0,0,.02),0 4px 4px 0 rgba(0,0,0,.03),0 1px 2px 0 rgba(0,0,0,.03)}
.mobileModal .tabHead .tabItem.tabRegion .item .text{text-transform:uppercase}
.mobileModal .tabMain{height:calc(100% - 77px);overflow:hidden}
.mobileModal .tabMain .tabItem{display:none;height:100%;position:relative}
.mobileModal .tabMain .tabItem .tabItemTitle{align-items:center;color:#333;display:flex;font-size:18px;font-style:normal;font-weight:700;gap:5px;justify-content:flex-start;line-height:24px;padding:0 18px 9px;text-transform:uppercase}
.mobileModal .tabMain .tabItem.active{display:block}
.mobileModal .tabMain .tabItem .close{color:#111;opacity:.8;position:absolute;right:20px;top:0;transition:.3s;z-index:3}
.mobileModal .tabMain .tabItem .close:hover{opacity:1;transform:scale(1.2)}
.mobileModal .tabMain .tabItem .close .iconSvg{cursor:pointer;display:block;height:1.3020833333vw;width:1.3020833333vw}
@media screen and (max-width:1536px){.mobileModal .tabMain .tabItem .close .iconSvg{height:20px;width:20px}}
.mobileModal .tabMain .tabItem .close .iconSvg svg{display:block;height:100%;width:100%}
.mobileModal .tabMain .tabItem#tabCatalog .listWrap{height:calc(100% - 33px);overflow:auto}
.mobileModal .tabMain .tabItem#tabCatalog .list{grid-gap:6px;display:grid;grid-template-columns:1fr 1fr 1fr;padding:0 18px}
.mobileModal .tabMain .tabItem#tabCatalog .list .item{background:#efefef;border-radius:4px;height:20vh;position:relative}
.mobileModal .tabMain .tabItem#tabCatalog .list .item .linkRow{height:100%;position:relative;width:100%}
.mobileModal .tabMain .tabItem#tabCatalog .list .item .linkRow .link{align-items:center;display:flex;height:100%;justify-content:center;text-decoration:none;width:100%}
.mobileModal .tabMain .tabItem#tabCatalog .list .item .linkRow .link .photo{position:relative;width:80%;z-index:1}
.mobileModal .tabMain .tabItem#tabCatalog .list .item .linkRow .link .photo img{display:block;height:auto;margin:0 auto;max-width:100px;width:100%}
.mobileModal .tabMain .tabItem#tabCatalog .list .item .linkRow .link .text{bottom:8px;color:#333;font-size:10px;font-style:normal;font-weight:500;left:8px;line-height:1.2;position:absolute;z-index:2}
.mobileModal .tabMain .tabItem#tabCatalog .wrapChildren{background:#fff;display:none;height:100%;left:0;position:absolute;top:0;width:100%;z-index:10}
.mobileModal .tabMain .tabItem#tabCatalog .wrapChildren.active{display:block}
.mobileModal .tabMain .tabItem#tabCatalog .wrapChildren .tabItemTitle{align-items:center;color:#333;display:flex;font-size:18px;font-style:normal;font-weight:700;gap:5px;justify-content:flex-start;line-height:24px;padding:0 18px 9px;text-transform:uppercase}
.mobileModal .tabMain .tabItem#tabInfo .listWrap{height:100%;overflow:auto}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listHead{display:flex;flex-direction:column;gap:12px;list-style:none;margin:0 18px 15px;padding:0}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listHead .item a{color:#333;font-size:20px;font-style:normal;font-weight:500;line-height:1.2;text-decoration:none}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listHead .item a:hover{text-decoration:underline}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listSocial{display:flex;flex-wrap:wrap;gap:15px 28px;margin:26px 18px}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listSocial .item{height:40px;width:40px}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listBottom{display:flex;flex-direction:column;gap:20px;list-style:none;margin:0 18px 15px;padding:0}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listBottom .item a{color:#333;font-size:15px;font-style:normal;font-weight:500;line-height:normal;opacity:.5;text-decoration:none}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listBottom .item a:hover{text-decoration:underline}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listBottom .item:first-of-type{order:10}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listBottom .item:nth-of-type(2){order:20}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listBottom .item:nth-of-type(3){order:30}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listBottom .item:nth-of-type(4){order:40}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listBottom .item:nth-of-type(5){order:50}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listBottom .item:nth-of-type(6){order:60}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listBottom .item:nth-of-type(7){order:70}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listBottom .item:nth-of-type(8){order:80}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listBottom .item:nth-of-type(9){order:31}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listBottom .item:nth-of-type(10){order:100}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listBottom .item:nth-of-type(11){order:110}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listBottom .item:nth-of-type(12){order:120}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listBottom .item:nth-of-type(13){order:130}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listBottom .item:nth-of-type(14){order:140}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listBottom .item:nth-of-type(15){order:150}
.mobileModal .tabMain .tabItem#tabInfo .listWrap .listBottom .item:nth-of-type(16){order:160}
.mobileModal .tabMain .tabItem#tabRegion .listWrap{height:100%;overflow:auto}
.mobileModal .tabMain .tabItem#tabRegion .listWrap .itemWrap{align-items:center;display:flex;flex-direction:column;gap:30px;justify-content:center;min-height:100%}
.mobileModal .tabMain .tabItem#tabRegion .listWrap .itemWrap .itemW{text-align:center}
.mobileModal .tabMain .tabItem#tabRegion .listWrap .itemWrap .itemW .title{color:#333;font-size:20px;font-style:normal;font-weight:500;line-height:41px;margin-bottom:10px}
.mobileModal .tabMain .tabItem#tabRegion .listWrap .itemWrap .itemW .item a{color:#999;font-size:15px;font-style:normal;font-weight:500;line-height:250%;text-decoration:none}
.mobileModal .tabMain .tabItem#tabRegion .listWrap .itemWrap .itemW .item a:hover{text-decoration:underline}
.mobileModal .tabMain .tabItem#tabRegion .listWrap .itemWrap .itemW .item span{color:#333;font-size:15px;font-style:normal;font-weight:500;line-height:250%;text-align:center;-webkit-text-decoration-line:underline;text-decoration-line:underline}
.pcModal{background:#fff;display:none;height:calc(100% - 66px);left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:200002}
.pcModal.active{display:block}
.pcModal .tabHeadWrap{align-items:center;display:flex;justify-content:center}
.pcModal .tabHead{grid-gap:5px;background:#efefef;border-radius:4px;display:grid;grid-template-columns:1fr 1fr;margin:15px 18px 13px;padding:5px}
.pcModal .tabHead .tabItem{font-size:14px;font-weight:500}
.pcModal .tabHead .tabItem .item{align-items:center;color:#333;cursor:pointer;display:flex;gap:5px;justify-content:center;min-width:154px;padding:10px 20px}
.pcModal .tabHead .tabItem .item .icon{height:17px;width:17px}
.pcModal .tabHead .tabItem .item .icon svg{display:block;height:auto;width:100%}
.pcModal .tabHead .tabItem.active{background:#fff;border-radius:4px;box-shadow:0 27px 8px 0 transparent,0 18px 7px 0 transparent,0 10px 6px 0 rgba(0,0,0,.02),0 4px 4px 0 rgba(0,0,0,.03),0 1px 2px 0 rgba(0,0,0,.03)}
.pcModal .tabHead .tabItem.tabRegionPc .item .text{text-transform:uppercase}
.pcModal .tabMain{height:calc(100% - 77px);overflow:hidden}
.pcModal .tabMain .tabItem{display:none;height:100%;position:relative}
.pcModal .tabMain .tabItem .tabItemTitle{align-items:center;color:#333;display:flex;font-size:18px;font-style:normal;font-weight:700;gap:5px;justify-content:flex-start;line-height:24px;padding:0 18px 9px;text-transform:uppercase}
.pcModal .tabMain .tabItem.active{display:block}
.pcModal .tabMain .tabItem .close{color:#111;display:none;opacity:.8;position:absolute;right:20px;top:0;transition:.3s;z-index:3}
.pcModal .tabMain .tabItem .close:hover{opacity:1;transform:scale(1.2)}
.pcModal .tabMain .tabItem .close .iconSvg{cursor:pointer;display:block;height:1.3020833333vw;width:1.3020833333vw}
@media screen and (max-width:1536px){.pcModal .tabMain .tabItem .close .iconSvg{height:20px;width:20px}}
.pcModal .tabMain .tabItem .close .iconSvg svg{display:block;height:100%;width:100%}
.pcModal .tabMain .tabItem#tabCatalogPC .listWrap{height:calc(100% - 33px);overflow:auto}
.pcModal .tabMain .tabItem#tabCatalogPC .list{grid-gap:12px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;padding:0 18px}
.pcModal .tabMain .tabItem#tabCatalogPC .list .item{background:#efefef;border-radius:4px;height:14vw;position:relative}
.pcModal .tabMain .tabItem#tabCatalogPC .list .item .linkRow{height:100%;position:relative;width:100%}
.pcModal .tabMain .tabItem#tabCatalogPC .list .item .linkRow .link{align-items:center;display:flex;height:100%;justify-content:center;text-decoration:none;width:100%}
.pcModal .tabMain .tabItem#tabCatalogPC .list .item .linkRow .link .photo{position:relative;width:100%;z-index:1}
.pcModal .tabMain .tabItem#tabCatalogPC .list .item .linkRow .link .photo img{display:block;height:auto;margin:0 auto;width:100%}
.pcModal .tabMain .tabItem#tabCatalogPC .list .item .linkRow .link .text{bottom:8px;color:#333;font-size:14px;font-style:normal;font-weight:500;left:8px;line-height:1.2;position:absolute;right:8px;text-transform:uppercase;z-index:2}
.pcModal .tabMain .tabItem#tabCatalogPC .wrapChildren{background:#fff;display:none;height:100%;left:0;position:absolute;top:0;width:100%;z-index:10}
.pcModal .tabMain .tabItem#tabCatalogPC .wrapChildren.active{display:block}
.pcModal .tabMain .tabItem#tabCatalogPC .wrapChildren .tabItemTitle{align-items:center;color:#333;display:flex;font-size:18px;font-style:normal;font-weight:700;gap:5px;justify-content:flex-start;line-height:24px;padding:0 18px 9px;text-transform:uppercase}
.pcModal .tabMain .tabItem#tabCatalogPC .wrapChildren .listWrap .list>.item>.linkRow>.link>.text{text-transform:inherit}
.pcModal .tabMain .tabItem#tabInfoPC{align-items:flex-start;display:flex;justify-content:center}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap{overflow:auto}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listHead{display:flex;flex-direction:column;gap:12px;list-style:none;padding:0}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listHead .item a{color:#333;font-size:20px;font-style:normal;font-weight:700;line-height:1.2;text-decoration:none}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listHead .item a:hover{text-decoration:underline}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listSocial{display:flex;flex-wrap:wrap;gap:15px 28px}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listSocial .item{height:40px;width:40px}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom{display:flex;flex-direction:column;gap:20px;list-style:none;margin:0;padding:0}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom .item a{color:#333;font-size:15px;font-style:normal;font-weight:500;line-height:normal;opacity:.5;text-decoration:none}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom .item a:hover{text-decoration:underline}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom .item:first-of-type{order:10}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom .item:nth-of-type(2){order:20}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom .item:nth-of-type(3){order:30}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom .item:nth-of-type(4){order:40}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom .item:nth-of-type(5){order:50}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom .item:nth-of-type(6){order:60}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom .item:nth-of-type(7){order:70}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom .item:nth-of-type(8){order:80}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom .item:nth-of-type(9){order:31}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom .item:nth-of-type(10){order:100}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom .item:nth-of-type(11){order:110}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom .item:nth-of-type(12){order:120}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom .item:nth-of-type(13){order:130}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom .item:nth-of-type(14){order:140}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom .item:nth-of-type(15){order:150}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom .item:nth-of-type(16){order:160}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:space-between;padding:40px;width:750px}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .leftCol{display:flex;flex-direction:column;justify-content:space-between}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listHead{flex:2 0 auto;margin:0}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listSocial{margin:0}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .leftCol{width:54%}
.pcModal .tabMain .tabItem#tabInfoPC .listWrap .listBottom{width:46%}
.pcModal .tabMain .tabItem#tabRegionPC .listWrap{height:100%;overflow:auto}
.pcModal .tabMain .tabItem#tabRegionPC .listWrap .itemWrap{align-items:center;display:flex;flex-direction:column;gap:30px;justify-content:center;min-height:100%}
.pcModal .tabMain .tabItem#tabRegionPC .listWrap .itemWrap .itemW{text-align:center}
.pcModal .tabMain .tabItem#tabRegionPC .listWrap .itemWrap .itemW .title{color:#333;font-size:20px;font-style:normal;font-weight:500;line-height:41px;margin-bottom:10px}
.pcModal .tabMain .tabItem#tabRegionPC .listWrap .itemWrap .itemW .item a{color:#999;font-size:15px;font-style:normal;font-weight:500;line-height:250%;text-decoration:none}
.pcModal .tabMain .tabItem#tabRegionPC .listWrap .itemWrap .itemW .item a:hover{text-decoration:underline}
.pcModal .tabMain .tabItem#tabRegionPC .listWrap .itemWrap .itemW .item span{color:#333;font-size:15px;font-style:normal;font-weight:500;line-height:250%;text-align:center;-webkit-text-decoration-line:underline;text-decoration-line:underline}

/* ── 2. Те, що донор тримає поза коренями меню ───────────────────
   Ці речі в донора лежать у глобальній частині home.css, тож у витяг за
   коренями `.pcModal`/`.mobileModal` вони не потрапили. Без них меню не
   працює як у нього.
   ─────────────────────────────────────────────────────────────── */

/* ЦЕ ГОЛОВНЕ, ЧОГО БРАКУВАЛО. У донора корінь сторінки —
   `body,html{color:#333;font-style:normal;font-weight:400;font-family:PCTL9600}`
   і НІЯКОГО line-height, тобто `normal`. Майже жодне правило меню
   line-height не задає: вкладки, підписи плиток, посилання «Інформації»
   успадковують його від body. Наш base.css ставить body
   `line-height: var(--lh-base)` = 1.71, і меню тихо їхало:
   вкладка виходила 43.94 замість 37 (14 × 1.71 = 23.94 проти ≈17),
   уся модалка нижче зсувалась на ~7 px, а рядки «About us / Blog / FAQ»
   розходились на 38 замість 36. Повертаємо кореням меню саме те, що
   успадковує донорська розмітка — далі його ж правила лягають самі. */
.pcModal,
.mobileModal {
  color: #333;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  /* І розмір теж успадкований: донорський `body` font-size не задає взагалі,
     тобто це браузерні 16 px, а наш base.css ставить 14. Видно це рівно в
     одному місці — `li.item` правового списку: власного font-size у нього
     нема, а висоту рядка тримає СТРУТ самого `li`, не вкладене посилання.
     У донора струт 16 px дає рядок 20, у нас 14 px давав 19 — і колонка
     з восьми пунктів «недобирала» 8 px, тягнучи за собою соцмережі
     (`.leftCol` розтягується по висоті сусідньої колонки). */
  font-size: 16px;
}

/* Глобальне правило донора `.iconSvg img,.iconSvg svg{height:100%;width:100%}`
   переїхало у `00-icons.css` — воно стосується всього сайту, а не меню, і в
   файлі однієї секції його ніхто не знаходив. Сенс той самий: розмір задає
   бокс над іконкою (`.close .iconSvg`, `.listSocial .item`), а svg його
   заповнює; наш base.css має `img,svg{height:auto}`, і правило перебиває
   його специфічністю, як і в донора. */

/* Донор: `body.active{overflow:hidden;padding-right:5px}`.
   `padding-right` НЕ переносимо свідомо: у донора шапка `position:fixed`
   і зсув body її не чіпає, а наша шапка `sticky`, тобто в потоці —
   ті 5 px поїхали б по всій шапці й дали б розбіжність там, де її нема.
   Компенсація смуги прокрутки в нас не потрібна: `scrollbar-width:thin`
   донора ми не повторюємо. */
body.active, body.mobileModalOpen { overflow: hidden; }

/* Донор: `body.active .header{background:#f6f6f6;z-index:991}`.
   Ось чому в еталоні шапка при відкритому меню сіра, а не біла:
   це НЕ накладання і не напівпрозорість — донор явно перефарбовує
   шапку у #f6f6f6, поки модалка відкрита. У нас шапка лишалась білою,
   через це вона й «не сходилась» із донором. Наш відповідник
   `.header` — `.site-header`. */
body.active .site-header { background: #f6f6f6; }

/* ПРИЧИНА, ЧОМУ МОДАЛКА ЛІЗЛА ПІД РОЖЕВУ ПЛАШКУ.
   `menu-modal.liquid` рендериться всередині секції header, тобто всередині
   `.shopify-section-group-header-group`, а та має `position:sticky;z-index:80`
   — тобто СТВОРЮЄ власний контекст накладання. Через це `z-index:200002`
   самої модалки рахується вже всередині цього контексту й ніяк не піднімає
   її над `.promo-bar` (z-index:81, прямий нащадок body). Саме тому на 415
   плашка малювалась ПОВЕРХ вкладок меню.
   Лікується не z-index'ом модалки, а z-index'ом контексту: у донора
   `.headerWrap` має рівно `z-index:200003` — на одиницю більше за модалку.
   Піднімаємо тільки поки меню відкрите, щоб не накрити дравери (90),
   модалки (100) і банер cookie (120) у звичайному стані. */
body.active .shopify-section-group-header-group,
body.mobileModalOpen .shopify-section-group-header-group { z-index: 200003; }


/* Регіон у меню: «інший» регіон - це submit-кнопка.

   Перемкнути ринок можна лише POST-ом у /localization, тому сусідній регіон
   у розмітці йде як `<button type="submit">`, тоді як мови того самого ринку
   і посилання на український сайт - звичайні `<a>`. Стилів для `button` у
   цьому блоці не було ніколи: він діставався з браузерною рамкою і сірою
   заливкою, тобто єдиний пункт у списку виглядав як кнопка, а решта як текст.
   На світовому ринку так само виглядала «Польща», на польському - «Світ».

   Рівняємо кнопку на `.item a` з рядків вище: ті самі 15px/250%, вага 500,
   колір #999, підкреслення лише на наведенні. Поточний регіон лишається
   `<span>` і далі підкреслений - це його стан, а не стиль кнопки. */
.mobileModal .tabMain .tabItem#tabRegion .listWrap .itemWrap .itemW .item button,
.pcModal .tabMain .tabItem#tabRegionPC .listWrap .itemWrap .itemW .item button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #999;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 250%;
  text-align: center;
  text-decoration: none;
}
.mobileModal .tabMain .tabItem#tabRegion .listWrap .itemWrap .itemW .item button:hover,
.pcModal .tabMain .tabItem#tabRegionPC .listWrap .itemWrap .itemW .item button:hover {
  text-decoration: underline;
}

/* ---------- newsletter.css ---------- */
/* ============================================================================
   Смуга розсилки над футером — перенос `.newsWrap` зі старого сайту.

   Джерело правди — мініфікований CSS оригіналу (`original/site-assets/css/*.css`,
   селектор `.newsWrap`) і computed-геометрія живого eu.sistersaroma.com.
   Одиниці лишені такими, як у оригіналі: vw + пікселеві гілки на 1536/1000/768/599.
   Сайт побудований на брейкпойнті 1536, а не 1440 — тому на 1440 працює вже
   пікселева гілка (заголовок 52px, а не 3.3854vw=48.75px), і будь-яка спроба
   «спростити» це до одного vw ламає деск.

   Розкладка `.newsWrap`: flex + wrap + space-between + align-items:flex-end.
   Заголовок width:100% забирає перший рядок, поле й соцмережі стають у другий
   і вирівнюються НИЖНІМИ краями. Тому колонка соцмереж (вища) задає висоту
   рядка, а поле «висить» від низу — і 8px під полем (margin групи) є частиною
   цієї геометрії, без них підкреслення стає на 8px нижче.

   Все, що нижче, свідомо перекриває `theme/assets/design.css`: `sections.css`
   вантажиться після нього, специфічність та сама, виграє порядок.
   ========================================================================== */

/* ---------- корінь ---------- */

.newsletter { background: #fff; }

.newsletter__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0;
  padding: 0 8.3333333333vw 7.2916666667vw;
}

/* Оригінал НЕ перемикає падінги смуги на пікселі — вони лишаються у vw
   аж до найвужчих екранів. У design.css на ≤1000 стоїть `0 15px 40px`,
   що дає 34.58 → 15 по боках і 30.26 → 40 знизу. Повертаємо vw. */
@media (max-width: 1000px) {
  .newsletter__inner { padding: 0 8.3333333333vw 7.2916666667vw; align-items: flex-end; }
}

/* ---------- заголовок ---------- */

.newsletter__title {
  display: block;
  width: 100%;
  margin: 7.6171875vw 0 4.5572916667vw;
  color: #111;
  font-weight: 700;
  font-size: 3.3854166667vw;
  line-height: 1.4;
  text-transform: none;
}
@media (max-width: 1536px) { .newsletter__title { font-size: 52px; } }
@media (max-width: 1000px) { .newsletter__title { margin: 7.6171875vw 0 4.5572916667vw; font-size: 52px; } }
@media (max-width:  768px) { .newsletter__title { font-size: 32px; } }
@media (max-width:  599px) { .newsletter__title { margin-bottom: 34px; } }

/* ---------- поле підписки ---------- */

/* `.subscriptionWrap` і `form` оригіналу злиті в один вузол: обгортка давала
   лише ширину, форма — систему координат для абсолютної кнопки. */
.newsletter__form {
  position: relative;
  width: 41.6666666667vw;
  margin: 0;
}
@media (max-width: 1000px) { .newsletter__form { width: 33.3333333333vw; margin: 0; } }
@media (max-width:  599px) { .newsletter__form { width: 100%; margin-bottom: 48px; } }

/* 8px під групою — це та сама відстань, на яку підкреслення поля піднято
   над нижнім краєм рядка. Форма — флекс-елемент, тож відступ не схлопується
   назовні й чесно входить у висоту. */
.newsletter__group { position: relative; margin: 0 0 8px; }

/* Оригінал ховає підпис поля (`display:none`) і плейсхолдера не має — поле
   в еталоні порожнє. Ховаємо доступно: скрін-рідер підпис бачить, чорнила нема. */
.newsletter__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.newsletter__group input[type="email"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 3.2552083333vw;
  padding: 0 2.6041666667vw 0 1.3020833333vw;
  border: none;
  border-bottom: 2px solid #111;
  border-radius: 0;
  background: none;
  outline: none;
  color: #111;
  font-family: inherit;
  font-size: .9765625vw;
  line-height: 1.5625vw;
}
@media (max-width: 1536px) { .newsletter__group input[type="email"] { font-size: 15px; line-height: 24px; } }
@media (max-width: 1000px) { .newsletter__group input[type="email"] { height: 32px; padding: 0 40px 0 10px; } }

/* Кнопка-стрілка: абсолют у правому краї поля, значок утоплений на 2px
   з кожного боку (у оригіналі це падінги `.btn`). */
.newsletter__btn {
  position: absolute;
  right: 0;
  top: -2px;
  padding: 2px;
  line-height: 0;
}
.newsletter__btn button {
  display: block;
  margin: 0; padding: 0;
  border: 0;
  background: none;
  color: #111;
  cursor: pointer;
  line-height: 0;
}
.newsletter__btn svg {
  display: block;
  width: 1.5625vw;
  height: 1.5625vw;
  transition: .2s;
}
@media (max-width: 1000px) { .newsletter__btn svg { width: 20px; height: 20px; } }
.newsletter__btn button:hover svg { transform: scale(1.1); }

/* Стани — абсолютні, як `.error_wr` оригіналу: жоден із них не рухає смугу,
   тож висота блока однакова і до відправки, і після. */
.newsletter__err,
.newsletter__ok {
  position: absolute;
  left: 0;
  top: 110%;
  margin: 0;
  font-size: .9114583333vw;
  line-height: 1.0416666667vw;
}
.newsletter__err { color: #ff5f4a; }
.newsletter__ok  { color: #111; }
@media (max-width: 1536px) {
  .newsletter__err, .newsletter__ok { font-size: 14px; line-height: 16px; }
}
.newsletter__err[hidden], .newsletter__ok[hidden] { display: none; }

/* ---------- соцмережі ---------- */

.newsletter__socials {
  width: 25vw;
  align-self: flex-end;
}
@media (max-width: 1000px) { .newsletter__socials { width: 33.3333333333vw; } }
@media (max-width:  768px) { .newsletter__socials { width: 41.6666666667vw; } }
@media (max-width:  599px) { .newsletter__socials { width: 100%; } }

.newsletter__socials-title {
  margin: 0 0 2.9296875vw;
  color: #111;
  font-weight: 700;
  font-size: .9114583333vw;
  line-height: 1.0416666667vw;
}
@media (max-width: 1536px) {
  .newsletter__socials-title { font-size: 14px; line-height: 16px; }
}

.newsletter__socials-list {
  display: flex;
  align-items: center;
  gap: 1.0416666667vw;
}
@media (max-width: 599px) {
  .newsletter__socials-list { flex-wrap: wrap; gap: 12px; justify-content: space-around; }
}

/* Значок цілісний (коло вже намальоване в контурі), тож ніяких кіл із фону:
   у design.css тут стоїть чорний кружок 32×32 з 16px гліфом усередині. */
.newsletter__socials-list a {
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #333;
  transition: .2s;
}
.newsletter__socials-list a:hover { background: none; color: #333; transform: scale(1.1); }
.newsletter__socials-list a svg {
  display: block;
  width: 3.125vw;
  height: 3.125vw;
}
@media (max-width: 1000px) {
  .newsletter__socials-list a svg { width: 40px; height: 40px; }
}

/* ---------- page-404.css ---------- */
/* ============================================================
   СТОРІНКА 404 (пункт 181)
   ------------------------------------------------------------
   CSS донора для `.errorPage` у нашій копії стилів відсутній — він у
   бандлі, якого ми не маємо (те саме, що з checkout). Тому числа нижче
   ЗАМІРЯНІ з живої сторінки, а не переписані:
     .errorPage      1440×137, padding 0 120, text-align center
     .errorTitle     32/700/40
     .errorSubTitle  15/400/24
     .productCarousel.error .head .title  18/700/24, ліворуч
   ============================================================ */
.errorPage {
  padding: 0 8.3333333333vw;
  text-align: center;
}
@media (max-width: 1536px) { .errorPage { padding: 0 120px; } }
@media (max-width: 1000px) { .errorPage { padding: 0 20px; } }

/* §286. Обидва заголовки течуть: у донора 32/40 і 15/24 на 1440,
   **40/50 і 18.75/30** на 1920. Стояли самі піксельні половини.
   Гілка ≤1000 нижче лишається — вона з іншими числами (24/30 і 14/20). */
.errorPage .errorTitle {
  font-size: 2.0833333333vw;
  font-weight: 700;
  line-height: 2.6041666667vw;
  margin: 0;
  text-align: center;
}
.errorPage .errorSubTitle {
  font-size: .9765625vw;
  font-weight: 400;
  line-height: 1.5625vw;
  margin: 8px 0 0;
  text-align: center;
}
@media (max-width: 1536px) {
  .errorPage .errorTitle { font-size: 32px; line-height: 40px; }
  .errorPage .errorSubTitle { font-size: 15px; line-height: 24px; }
}
@media (max-width: 1000px) {
  .errorPage .errorTitle { font-size: 24px; line-height: 30px; }
  .errorPage .errorSubTitle { font-size: 14px; line-height: 20px; }
}

.productCarousel.error { padding: 0 8.3333333333vw 40px; position: relative; }
@media (max-width: 1536px) { .productCarousel.error { padding: 0 120px 40px; } }
@media (max-width: 1000px) { .productCarousel.error { padding: 0 20px 32px; } }
.productCarousel.error .head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 16px; }
/* §286. Заголовок смуги теж тече — у донора 18/24 на 1440 і 22.5/30 на 1920.
   §295. І він ВЕЛИКИМИ: `text-transform:uppercase`. Це та властивість, що
   міняє вигляд, не змінюючи жодного числа, — ані статичний прохід, ані
   перевірка кеглів її не бачать. */
.productCarousel.error .head .title { font-size: 1.171875vw; font-weight: 700; line-height: 1.5625vw; text-align: left; text-transform: uppercase; }
@media (max-width: 1536px) {
  .productCarousel.error .head .title { font-size: 18px; line-height: 24px; }
}
/* §274. Поле у донора тече: 22.5 на 1440 і 30 на 1920, тобто `1.5625vw`
   з гілкою `@media ≤768 {24px}`. Стояло 16 — мимо навіть на 1440.
   Кегль посилання нижче НЕ чіпаємо: у донора він сталий 16 на обох
   ширинах (заміряно), тобто це успадкований розмір, а не заморожена
   половина — приклад хибної тривоги зі списку `font-size:16px`. */
.productCarousel.error .bottom { margin-top: 1.5625vw; }
@media (max-width: 768px) { .productCarousel.error .bottom { margin-top: 24px; } }
/* §295. `line-height` ОБОВ'ЯЗКОВИЙ: у донора посилання йде з `normal`
   (≈19 при 16px), а наша тема віддає успадковані 27.36 — плюс вісім
   пікселів на рядок. Того самого роду, що адреса в картці точки: у
   нашому правилі властивості просто НЕМА, тож статичний прохід
   розбіжність не бачить у принципі. */
.productCarousel.error .bottom .link { color: #333; font-size: 16px; line-height: normal; text-decoration: underline; }
.productCarousel.error .bottom .link:hover { text-decoration: none; }
.productCarousel.error .productCarousePrev,
.productCarousel.error .productCarouseNext {
  background: #fff; border: 1px solid #dedede; border-radius: 50%;
  cursor: pointer; height: 32px; width: 32px; position: absolute; top: 45%; z-index: 2;
}
.productCarousel.error .productCarousePrev { left: 6px; }
.productCarousel.error .productCarouseNext { right: 6px; }

/* Задача 546: рівні клітинки каруселі бестселерів. У донора ширину слайда давав Swiper
   (error.js: `slidesPerView: 1`, "@0.75" → 2, "@1.00" → 3, "@1.50" → 5 — пороги за
   ВІДНОШЕННЯМ сторін вікна, як у смуг рекомендацій товару); CSS-правила для слайда чи
   картки тут не було ніколи. У нас Embla без інлайнових ширин, і слайд лишався
   `flex: 0 0 auto` з base.css — клітинка дорівнювала природній ширині картки й
   залежала від того, які товари випали. Пороги перенесено тими самими
   min-aspect-ratio, картка — на всю клітинку; область дії лише ця карусель. */
.productCarousel.error .embla__slide { flex: 0 0 100%; min-width: 0; display: flex; }
@media (min-aspect-ratio: 3/4) { .productCarousel.error .embla__slide { flex-basis: 50%; } }
@media (min-aspect-ratio: 1/1) { .productCarousel.error .embla__slide { flex-basis: 33.3333333333%; } }
@media (min-aspect-ratio: 3/2) { .productCarousel.error .embla__slide { flex-basis: 20%; } }
.productCarousel.error .embla__slide .pcard { width: 100%; }

/* ---------- page-about.css ---------- */
/* ===========================================================================
 * СТОРІНКА «ПРО НАС» (`templates/page.about.json` + `sections/main-page-about`)
 * ---------------------------------------------------------------------------
 * Переїхало сюди з `pages.css` 29.08: один шаблон — один файл, інакше правку
 * зʼїдає наступна чужа збірка (`migrate/build_css.py` зшиває
 * `theme-sections-css/*.css` за іменем; `page-about.css` іде ПЕРЕД `pages.css`,
 * тож лишати дублікат правил там не можна — він перебивав би цей файл).
 *
 * Оригінал (`about.css`) — не полотно тексту, а чотири різні розкладки.
 * Заміряно на 1440 і 415, обидва боки, холодною сесією:
 *
 *   блок  розкладка              .text          .photo       колонок тексту
 *   1     текст | фото           41.6666vw      33.3333vw    1
 *   2     фото | текст           33.3333vw      50vw         1
 *   3     широкий, фото під ним  1200 (100%)    1200 (100%)  2
 *   4     тільки текст, відступ  1080, зліва 240 —            3
 *
 * Усі розміри — vw, як в оригіналі, з px-стелею на ≤1536 для кеглів (саме так
 * зроблено в них: база `2.0833vw`, а `@media(max-width:1536px)` фіксує 32px).
 * Писати одразу px означало б розійтися з еталоном вище 1536.
 *
 * Порядок складання на ≤1000 задає DOM, а не `row-reverse`: блоки 1 і 3 —
 * `column-reverse` (фото зверху), блок 2 — `column` (фото і так перше в DOM).
 * =========================================================================== */

/* Колір тексту. В оригіналі він приходить із `body,html{color:#333}` — тобто
   #333 на ВСЬОМУ сайті, і на цій сторінці іншого кольору тексту просто нема.
   У нас `base.css` дає `body{color:var(--c-ink)}` = #111. Різниця 34/255 на
   кожному пікселі чорнила, а на цій сторінці чорнило — це майже весь контент:
   заміряно по знімках, наші гліфи стоять рівно там само (ліві й праві межі
   кожного рядка збігаються до пікселя), але маса чорнила на 3–5% більша.
   Правлю ЛОКАЛЬНО, бо `--c-ink` — спільний токен: змінити його означало б
   зрушити цифри всіх 309 сторінок посеред сесії інших агентів. Розбіжність
   глобальна, її винесено в підсумок для оркестратора. */
.about { color: #333; }

/* ---------------------------------------------------------------------------
 * ВЕРХНІЙ ВІДСТУП — свідоме відхилення від оригіналу (правка користувача).
 *
 * У донора його нема: `.aboutSection.aboutDescription1{padding:0 8.3333vw
 * 7.8125vw}` — нуль зверху, і банера над текстом сторінка теж не має (у
 * `about.css` описано `.aboutSection.aboutHead`, але в розмітці /about/ його
 * НЕМА — там рівно чотири секції, aboutDescription1…4). Тобто заголовок
 * упирається в нижню межу шапки: заміряно y=123 при висоті шапки 123.
 *
 * Число не вигадане: беремо рівно той відступ, який донор дає КОЖНІЙ іншій
 * текстовій сторінці — `.pageInfoContent{padding-top:5.0130208333vw}` (72.19
 * на 1440) з мобільною гілкою 13px при ≤768. Так «Про нас» стає на одну
 * вертикаль із faq, contacts і delivery, а не отримує власне число.
 * ------------------------------------------------------------------------- */
.about { padding-top: 5.0130208333vw; }

.about__row--split {
  display: flex; align-items: center; justify-content: center;
  gap: 8.3333333333vw; padding: 0 8.3333333333vw 7.8125vw;
}
.about__row--split > .about__text  { width: 41.6666666667vw; }
.about__row--split > .about__photo { width: 33.3333333333vw; }

.about__row--split-reverse {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 8.3333333333vw; padding: 0 0 6.0546875vw;
}
.about__row--split-reverse > .about__photo { width: 50vw; }
.about__row--split-reverse > .about__text  { width: 33.3333333333vw; }

.about__row--wide { padding: 0 8.3333333333vw 6.7708333333vw; }
.about__row--wide > .about__text { padding: 0 0 6.9661458333vw; }

.about__row--indent { padding: 0 8.3333333333vw 10.7421875vw 16.6666666667vw; }

.about__photo { display: flex; align-items: center; justify-content: center; }
/* `--ar` ставить секція з природних розмірів майстра (див. коментар у
   `sections/main-page-about.liquid`). Без неї висота коробки береться від
   округленої бітмапи Shopify і розходиться з оригіналом на пів пікселя —
   на банері блока 3 це округлялось у зайвий піксель під усім блоком 4.
   Фолбек `auto` лишає звичайну поведінку там, де розмірів нема. */
.about__photo img { display: block; height: auto; width: 100%;
                    aspect-ratio: var(--ar, auto); }

.about__title {
  margin: 0 0 2.6041666667vw; font-weight: 700;
  font-size: 1.171875vw; line-height: 1.5625vw; text-transform: uppercase;
}
/* Заголовок першого блока: `text-transform` у донора тут нема до 768, тобто
   капслок на екрані — це САМ ТЕКСТ, він лежить капслоком і в розмітці
   /about/, і донедавна в нашому json. Користувач попросив прибрати капслок
   (правка 52), тому рядок у `page.about.json` переписано природним регістром.
   Ціна відома й очікувана: 600 px колонки тримають рівно 4 рядки капслоку
   (160 px, як у донора) і 3 рядки мішаного (120), тож сторінка стала на 40 px
   коротшою за еталон — це відхилення на вимогу, а не регрес. */
.about__row--split .about__title {
  margin-bottom: 3.125vw;
  font-size: 2.0833333333vw; line-height: 2.6041666667vw; text-transform: none;
}

/* ---------------------------------------------------------------------------
 * Текст опису — портовано 1:1 з `.description` оригіналу.
 *
 *   .description            {font-size:.9765625vw; line-height:1.5625vw;
 *                            margin-bottom:.9765625vw; margin-top:0}
 *   .description div,
 *   .description p          {те саме}
 *   .description b          {font-size:1.171875vw; line-height:1.5625vw}
 *   @media(max-width:1536px) — 15/24 для тексту, 18/24 для b
 *   @media(max-width:768px)  — margin-bottom:15px
 *
 * Ключове: відступ висить на КОЖНОМУ `div`/`p` усередині, без винятку для
 * останнього. Це не косметика, а висота: при `column-count` (блоки 3 і 4)
 * контейнер мультиколонки НЕ пропускає нижній маргін останньої дитини назовні,
 * тож на ≤1000 (де колонка одна) ці 15 px входять у висоту `.description`.
 * З нашим колишнім `:last-child{margin-bottom:0}` блок 4 виходив 486 замість
 * еталонних 501, а блок 3 — на 15 нижчим. На деску балансування колонок ці
 * маргіни зʼїдає, і висота там збігалась і без правила — тому помилку було
 * видно тільки на мобілці.
 * ------------------------------------------------------------------------- */
.about__desc { margin: 0 0 .9765625vw; font-size: .9765625vw; line-height: 1.5625vw; }
.about__desc div,
.about__desc p { margin: 0 0 .9765625vw; }

/* Жирні зачини списку «For us, S-beauty is» в оригіналі більші за текст:
   `.description b` — 18/24 проти 15/24. У нас richtext віддає `<strong>`,
   тому селектор називає обидва теги. Заміряно: без цього кожен абзац блока 3
   був на 1 px нижчий (рядок веде інлайн-бокс 18 px), сім абзаців = −7 px. */
.about__desc b,
.about__desc strong { font-size: 1.171875vw; line-height: 1.5625vw; }

/* Нероздільний потік: саме він лишає текст у першій колонці, як в оригіналі
   (`.aboutDescription3/4 .text .description > *{break-inside:avoid}`).
   Без нього наші абзаци чесно розтікаються по колонках і блок виходить удвічі
   нижчим (заміряно: 192 проти 475.4 у блоці 3 на 1440). */
.about__desc > .about__desc-flow { break-inside: avoid; }
.about__desc--cols-2 { column-count: 2; column-gap: 5.2083333333vw; }
.about__desc--cols-3 { column-count: 3; column-gap: 5.2083333333vw; }

@media (max-width: 1536px) {
  .about__title { font-size: 18px; line-height: 24px; }
  .about__row--split .about__title { font-size: 32px; line-height: 40px; }
  .about__desc { font-size: 15px; line-height: 24px; }
  .about__desc b,
  .about__desc strong { font-size: 18px; line-height: 24px; }
}

@media (max-width: 1000px) {
  .about__row--split { flex-direction: column-reverse; gap: 24px; padding: 0 0 40px; }
  .about__row--split > .about__text  { padding: 0 8.3333333333vw; width: 100%; }
  /* Верхній відступ до фото на мобільному прибрано (пункт 190): текст і кадр
     стоять упритул, як просив користувач. Десктопна гілка не зачеплена. */
  .about__row--split > .about__photo { padding: 0 0 4.1666666667vw; width: 66.6666666667vw; }

  .about__row--split-reverse { flex-direction: column; gap: 24px; padding: 0 0 24px; }
  .about__row--split-reverse > .about__text  { padding: 0 8.3333333333vw; width: 100%; }
  .about__row--split-reverse > .about__photo { padding: 0 0 4.1666666667vw; width: 66.6666666667vw; }

  .about__row--wide {
    display: flex; flex-direction: column-reverse; align-items: center;
    justify-content: center; gap: 24px; padding: 0 0 24px;
  }
  .about__row--wide > .about__text  { padding: 0 8.3333333333vw; width: 100%; }
  .about__row--wide > .about__photo { width: 100%; }

  .about__row--indent { padding: 0 8.3333333333vw 24px; width: 100%; }

  .about__desc--cols-2, .about__desc--cols-3 { column-count: 1; }
}

@media (max-width: 768px) {
  /* Мобільна гілка того самого донорського відступу сторінок. */
  .about { padding-top: 13px; }

  .about__row--split > .about__photo,
  .about__row--split-reverse > .about__photo { padding: 0; width: 100%; }
  .about__title { font-size: 14px; line-height: 24px; }
  .about__row--split .about__title { font-size: 18px; line-height: 24px; text-transform: uppercase; }
  /* Крок рядка на ≤768 фіксований, а не vw: заміряно 15 px на 700 і на 415,
     при .9765625vw на 900 (8.789). Блок 1 на 700: 393 + 6×15 = 483.0 при
     еталонних 483.0; на 415: 647 + 6×15 = 737.0 при 737.0. */
  .about__desc,
  .about__desc div,
  .about__desc p { margin-bottom: 15px; }
}

/* ---------- page-contact.css ---------- */
/* Сторінка «Контакти» (`templates/page.contact.json` + `sections/main-page-contact.liquid`).
 *
 * Еталон — `section.contactsWrap.pageInfoContent` старого сайту. Заміряно на
 * 1440 і 415, обидва боки, холодною сесією:
 *
 *   вузол            деск 1440                      моб 415
 *   .contactsWrap    pad 72.19 / 120 / 75           pad 13 / 34.58 / 168
 *   .pageTitle       18/24, uppercase, 700          те саме, 4 рядки
 *                    mt 12.06 (UA 0.67em), pb 40.31 mt 12.06, pb 27
 *                    mb 68.44, лінія 1px            mb 39
 *   .content         mb 93.75                       mb 13.51
 *   .contactItem     grid 50% / 50%                 1 колонка, gap 16
 *   .cell            padding-right 23.44            6.76
 *   .title           32/40, 700, mb 51.56           14/16, mb 8
 *   .generalPhone    gap 15, mb 60.94; текст 50.6/67.5  gap 8, mb 0; 32/40 caps
 *   .phoneList       порожній, mb 22.5              mb 16
 *   .mailList        mb 22.5; посилання 18/24       mb 16
 *   .info            14/16, mb 22.5, h 390          14/16, mb 16, h 390
 *   .telegram        mb 22.5                        mt 24, mb 24
 *
 * Контрольні суми еталона: `.contactsWrap` 1112.2 (деск) і 1027.5 (моб),
 * `.cell` 725.5 / 550 і 92, `.info` 390 на обох ширинах.
 *
 * ПРИВ'ЯЗКА ДО РОЗМІТКИ. Тіло сторінки прийшло з донора в чистому вигляді:
 * Shopify зрізав класи, але структура лишилась побітово тією самою, тож
 * селектори тут структурні (`section > div > div > div`), а не за класами.
 * Порядок вузлів у комірках фіксований імпортом:
 *
 *   cell 1: title · generalPhone · phoneList(порожній) · mailList · info
 *   cell 2: title · telegram · mailList(порожній)
 *
 * Якщо тіло сторінки колись перезаллють — звірити цей порядок наново.
 *
 * Розміри — vw, як в оригіналі, з px-стелею на ≤1536: саме так зроблено в них.
 */

.page--contact {
  padding: 5.0130208333vw 8.3333333333vw 5.2083333333vw;
}

/* design.css звужує `.page > .rte` до 72ch — тут смуга на всю ширину секції. */
.page--contact > .rte { max-width: none; color: #111; }

/* ---- .pageTitle ---------------------------------------------------------
   Верхній відступ у донора не обнулений (на відміну від faq і delivery), тож
   лишається типовий 0.67em заголовка — 12.06 px при 18 px. */
.page--contact .rte section > h1 {
  margin: 0.67em 0 4.7526041667vw;
  padding: 0 0 2.7994791667vw;
  border-bottom: 1px solid #dedede;
  font-size: 1.171875vw;
  line-height: 1.5625vw;
  font-weight: 700;
  text-transform: uppercase;
  color: #333;
}

/* ---- .content / .contactItem / .cell ----------------------------------- */
.page--contact .rte section > div { margin-bottom: 6.5104166667vw; }

.page--contact .rte section > div > div {
  display: grid;
  grid-template-columns: 50% 50%;
}

/* Комірка успадковує донорський контекст 16/normal: саме він задає висоту
   рядків із посиланнями (inline-flex `a` рахується від базової лінії строки,
   тож 14/23.94 нашої теми давало +1.9 на пошті й +2.9 на телеграмі). */
.page--contact .rte section > div > div > div {
  padding-right: 1.6276041667vw;
  font-size: 16px;
  line-height: normal;
}

/* Перший рядок комірки — заголовок «For general / cooperation queries». */
.page--contact .rte section > div > div > div > div:first-child {
  color: #111;
  margin-bottom: 3.5807291667vw;
  font-size: 2.0833333333vw;
  line-height: 2.6041666667vw;
  font-weight: 700;
}

/* Решта рядків комірки — однаковий нижній відступ 1.5625vw; далі точкові. */
.page--contact .rte section > div > div > div > div {
  margin-bottom: 1.5625vw;
}

/* Порожній `.phoneList` донора — флекс-контейнер, тож його 22.5 px НЕ
   схлопуються крізь порожній блок. Звичайний div тут з'їдав ці 22.5. */
.page--contact .rte section > div > div > div:first-child > div:nth-child(3) {
  display: flex;
  flex-direction: column;
}

/* Телефон: власна колонка з великим кеглем. */
.page--contact .rte section > div > div > div:first-child > div:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 1.0416666667vw;
  margin-bottom: 4.2317708333vw;
  color: #111;
}
.page--contact .rte section > div > div > div:first-child > div:nth-child(2) a {
  font-size: 4.1666666667vw;
  line-height: 4.6875vw;
  font-weight: 700;
}

/* Блок реквізитів (останній рядок першої комірки) — дрібний 14/16. */
.page--contact .rte section > div > div > div:first-child > div:nth-child(5) {
  font-size: 0.9114583333vw;
  line-height: 1.0416666667vw;
  color: #111;
}

/* Посилання пошти й телеграма. */
.page--contact .rte section > div > div > div a {
  display: inline-flex;
  align-items: center;
  gap: 0.5208333333vw;
  color: #111;
  text-decoration: none;
  font-size: 1.171875vw;
  line-height: 1.5625vw;
}
.page--contact .rte section > div > div > div a:hover { text-decoration: underline; }

/* Телеграм-рядок другої комірки: менший зазор і синя іконка. */
.page--contact .rte section > div > div > div:last-child > div:nth-child(2) a {
  gap: 0.390625vw;
}
.page--contact .rte section > div > div > div:last-child > div:nth-child(2) i {
  display: block;
  width: 1.5625vw;
  height: 1.5625vw;
  color: #4b97d0;
}
/* Сам контур (правка 69) — символ `#Telegram` донорського спрайта, вкладений
   у розмітку секцією: `<use xlink:href>` на cdn.shopify.com крос-доменний і
   не малюється. Донор скрізь дає значкам `.iconSvg svg{display:block;
   height:100%;width:100%}` — заливка йде `currentColor`, тобто той самий
   #4b97d0 з правила вище, окремого кольору дублювати не треба. */
.page--contact .rte section > div > div > div:last-child > div:nth-child(2) i svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Абзаци адреси складу прийшли з Word із інлайновими `margin-bottom:0` і
   `line-height:normal`; ВЕРХНІЙ відступ у них типовий, 1em — саме він дає
   28 px висоти блока реквізитів (78 проти 50 без нього). Тема його обнуляє,
   тому повертаємо. */
.page--contact .rte section p { margin: 1em 0 0; }

/* Стеля кеглів — так само, як в оригіналі: нижче 1536 vw заміняються на px. */
@media (max-width: 1536px) {
  .page--contact .rte section > h1 { font-size: 18px; line-height: 24px; }
  .page--contact .rte section > div > div > div > div:first-child {
    font-size: 32px; line-height: 40px;
  }
  .page--contact .rte section > div > div > div:first-child > div:nth-child(2) a {
    font-size: 3.515625vw; line-height: 4.6875vw;
  }
  .page--contact .rte section > div > div > div:first-child > div:nth-child(5) {
    font-size: 14px; line-height: 16px;
  }
  .page--contact .rte section > div > div > div a { font-size: 18px; line-height: 24px; }
}

@media (max-width: 1000px) {
  .page--contact .rte section > div > div > div > div { margin-bottom: 24px; }
  .page--contact .rte section > div > div > div > div:first-child { margin-bottom: 24px; }
  .page--contact .rte section > div > div > div:first-child > div:nth-child(2) {
    gap: 16px; margin-bottom: 24px;
  }
  .page--contact .rte section > div > div > div:first-child > div:nth-child(2) a {
    font-size: 32px; line-height: 40px;
  }
  .page--contact .rte section > div > div > div a { gap: 8px; }
  .page--contact .rte section > div > div > div:last-child > div:nth-child(2) i {
    width: 24px; height: 24px;
  }
}

@media (max-width: 768px) {
  .page--contact { padding: 13px 8.3333333333vw 168px; }
  .page--contact .rte section > h1 {
    margin-bottom: 39px;
    padding-bottom: 27px;
  }
  .page--contact .rte section > div { margin-bottom: 3.2552083333vw; }
  .page--contact .rte section > div > div {
    grid-template-columns: 100%;
    grid-gap: 16px;
  }
  .page--contact .rte section > div > div > div > div { margin-bottom: 16px; }
  .page--contact .rte section > div > div > div > div:first-child {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 16px;
    text-transform: none;
  }
  .page--contact .rte section > div > div > div:first-child > div:nth-child(2) {
    gap: 8px; margin-bottom: 0;
  }
  .page--contact .rte section > div > div > div:first-child > div:nth-child(2) a {
    font-size: 32px; line-height: 40px; text-transform: uppercase;
  }
  .page--contact .rte section > div > div > div:last-child > div:nth-child(2) {
    margin-top: 24px; margin-bottom: 24px;
  }
}

/* ---------- page-delivery.css ---------- */
/* Сторінка «Доставка й оплата» (`templates/page.delivery.json` +
 * `sections/main-page-delivery.liquid`).
 *
 * Еталон — дві сусідні секції старого сайту:
 * `section.deliveryPaymentWrap.pageInfoContent` і `section.deliveryTable`.
 * Заміряно на 1440 і 415, обидва боки, холодною сесією:
 *
 *   вузол                деск 1440                    моб 415
 *   .deliveryPaymentWrap pad 72.19 / 120 / 20         pad 13 / 34.58 / 20
 *   .pageTitle           18/24 caps 700, mt 0         те саме
 *                        pb 40.31, mb 68.44, лінія    pb 27, mb 39
 *   .content             grid 480 + 480, зазор 120    одна колонка
 *   .description         15/24, mb 14.06              15/24, mb 15
 *     h3                 32/40, mt 0, mb 32           18/24 caps
 *     b у h3             18/24                        те саме
 *     div/p              15/24, mb 14.06              15/24, mb 15
 *   .deliveryTable       pad 0 / 240 / 75             pad 0 / 34.58 / 168
 *     select             260×40, mb 30                100%×40, mb 30
 *                        (це ЄДИНИЙ контрол донора — ні поля ваги, ні кнопки)
 *     .tableWrap         рядок 34.4, сітка 2fr 1fr 1fr 1fr   картка 133
 *
 * Контрольні суми еталона: `.deliveryPaymentWrap` 1262.8 (деск) і 1372 (моб),
 * `.content` 1036.9 / 1248, ліва `.description` 1022.8 / 1113,
 * `.deliveryTable` 489.8 / 1615.
 *
 * ПРИВ'ЯЗКА ДО РОЗМІТКИ. Тіло сторінки прийшло з донора без класів, але зі
 * збереженою структурою: `section > div:first-child` — дубль заголовка
 * («Shipping & Billing»), `section > div:last-child` — контейнер двох
 * `.description`. Заголовок сторінки друкує сама секція (`page.title`), тож
 * дубль у тілі приховано.
 *
 * Калькулятор (`.dc`) стоїть на місці донорської `section.deliveryTable` і
 * повторює її геометрію: селект країни зверху, під ним таблиця з тими самими
 * рамками, кеглями й висотою рядка. Дані інші — вони живі (воркер читає зони
 * Shopify), тому збігається розкладка, а не числа.
 */

.page--delivery {
  padding: 5.0130208333vw 8.3333333333vw 1.3020833333vw;
}

.page--delivery > .rte { max-width: none; color: #111; }

.page--delivery > h1 {
  margin: 0 0 4.7526041667vw;
  padding: 0 0 2.7994791667vw;
  border-bottom: 1px solid #dedede;
  font-size: 1.171875vw;
  line-height: 1.5625vw;
  font-weight: 700;
  text-transform: uppercase;
  color: #333;
}

/* Дубль заголовка в тілі сторінки — заголовок друкує секція. */
.page--delivery .rte section > div:first-child { display: none; }

/* .content — дві колонки по 33.3333vw із зазором 8.3333vw. */
.page--delivery .rte section > div:last-child {
  margin-bottom: 0;
  display: grid;
  grid-template-columns: 33.3333333333vw 33.3333333333vw;
  grid-column-gap: 8.3333333333vw;
}

/* .description */
.page--delivery .rte section > div:last-child > div {
  margin: 0 0 0.9765625vw;
  font-size: 0.9765625vw;
  line-height: 1.5625vw;
}

.page--delivery .rte section div,
.page--delivery .rte section p {
  margin: 0 0 0.9765625vw;
  font-size: 0.9765625vw;
  line-height: 1.5625vw;
}

.page--delivery .rte section h1,
.page--delivery .rte section h2,
.page--delivery .rte section h3,
.page--delivery .rte section h4,
.page--delivery .rte section h5,
.page--delivery .rte section h6 {
  margin: 0 0 1em;
  font-size: 2.0833333333vw;
  line-height: 2.6041666667vw;
  font-weight: 700;
  text-transform: uppercase;
  color: inherit;
}

.page--delivery .rte section b {
  font-size: 1.171875vw;
  line-height: 1.5625vw;
}

.page--delivery .rte section a {
  color: #111;
  font-size: 0.9765625vw;
  line-height: 1.5625vw;
  text-decoration: underline;
}
.page--delivery .rte section a:hover { text-decoration: none; }
.page--delivery .rte section span { font-size: inherit !important; }

/* ===========================================================================
 * ПУНКТ 178 — ТАБЛИЦЯ ТАРИФІВ, CSS ДОНОРА
 * ---------------------------------------------------------------------------
 * Правила зняті з `original/site-assets/css/deliveryAndPayment.css`,
 * селектор донора — `section.deliveryTable`. Перенесено дослівно, включно
 * з його недоглядом: дві останні колонки голови мають клас `price`.
 * Сітка `2fr 1fr 1fr 1fr`; на ≤768 рядок стає карткою в один стовпець,
 * і тоді проявляються підписи `.text`, які на десктопі приховані.
 * =========================================================================== */
.deliveryTable{padding:0 16.6666666667vw 5.2083333333vw}
.deliveryTable .countryVacancyWrap .inputGroup{margin:0 0 1.953125vw;width:16.9270833333vw}
.deliveryTable .tableWrap{border-left:1px solid #dedede;border-top:1px solid #dedede}
.deliveryTable .tableWrap .row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr}
.deliveryTable .tableWrap .row.head{text-align:center}
.deliveryTable .tableWrap .row.head .col .text{display:block;font-size:1.171875vw;font-weight:700;line-height:1.5625vw}
.deliveryTable .tableWrap .row .col{align-items:center;border-bottom:1px solid #dedede;border-right:1px solid #dedede;display:flex;justify-content:center;padding:.3255208333vw .9765625vw}
.deliveryTable .tableWrap .row .col .text{display:none;font-size:.9765625vw;line-height:1.5625vw}
.deliveryTable .tableWrap .row .col .value{font-size:.9765625vw;line-height:1.5625vw}
.deliveryTable .tableWrap .row .shipping{align-items:center;display:flex;gap:.5208333333vw;justify-content:flex-start}
.deliveryTable .tableWrap .row .shipping .name{font-size:.9765625vw;line-height:1.5625vw}
/* Підказки й помилки поза таблицею — донор їх не має (у нього таблиця
   завжди заповнена), тож беремо кегль його ж рядка. */
.dcHint{font-size:.9765625vw;line-height:1.5625vw;margin:0}
.dcHint--error{color:#c0392b}

/* ===========================================================================
 * ПУНКТ 179 — ВИБІР КРАЇНИ З ПРАПОРАМИ Й ПОШУКОМ
 * ---------------------------------------------------------------------------
 * Донор бере select2 + jQuery і малює `.flagWrap > .flag > img` з
 * `/assets/flags/<iso>.png`. Зовнішніх бібліотек у темі не тримаємо, тож
 * список свій, але класи донорські, а кегль і відступи — його:
 *   `.flagWrap{display:flex;align-items:center;gap:8px}`
 *   `.flagWrap .flag img{width:1.3020833333vw}` → 20px від 1536 і нижче.
 * ВІДМІННІСТЬ: прапор не `<img>`, а комірка спрайта `country-flags.png`
 * (190 країн — це були б 190 асетів теми). Розмір і вигляд ті самі.
 * =========================================================================== */
.deliveryTable .countryVacancyWrap .select2Wrap{position:relative}
/* Нативний select лишається носієм значення й запасним шляхом без JS. */
.deliveryTable .countryVacancyWrap .select2Wrap select{width:100%}
.deliveryTable .countryVacancyWrap .select2Wrap:has(.dcCountry) select{position:absolute;opacity:0;pointer-events:none;height:0}
.flagWrap{align-items:center;display:flex;gap:8px;min-width:0}
.flagWrap .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flag{display:block;flex:none;width:20px;height:15px;background-image:var(--flags);background-repeat:no-repeat;background-size:20px auto}
.dcCountry{position:relative;width:100%}
.dcCountry__button{align-items:center;background:#fff;border:1px solid #dedede;border-radius:2px;color:#333;cursor:pointer;display:flex;font:inherit;font-size:.9765625vw;gap:8px;justify-content:space-between;line-height:1.5625vw;padding:.5208333333vw .78125vw;text-align:left;width:100%}
.dcCountry__button:hover{border-color:#999}
.dcCountry__arrow{border-bottom:1px solid #333;border-right:1px solid #333;flex:none;height:7px;transform:rotate(45deg) translateY(-2px);width:7px;transition:transform .2s}
.dcCountry.is-open .dcCountry__arrow{transform:rotate(-135deg) translateY(-2px)}
.dcCountry__panel{background:#fff;border:1px solid #dedede;border-top:0;left:0;max-height:320px;overflow:hidden;position:absolute;right:0;top:100%;z-index:20;display:flex;flex-direction:column}
/* `display:flex` перебиває браузерне `[hidden]{display:none}`, і панель
   висіла розкритою на завантаженні. Гасимо явно. */
.dcCountry__panel[hidden]{display:none}
.dcCountry__option[hidden]{display:none}
.dcCountry__empty[hidden]{display:none}
.dcCountry__search{border:0;border-bottom:1px solid #dedede;font:inherit;font-size:14px;line-height:16px;outline:none;padding:12px 16px;width:100%}
.dcCountry__list{list-style:none;margin:0;overflow:auto;padding:4px 0}
.dcCountry__option{cursor:pointer;font-size:14px;line-height:16px;padding:8px 16px}
.dcCountry__option:hover,.dcCountry__option[aria-selected="true"]{background:#f6f6f6}
.dcCountry__empty{color:#999;font-size:14px;line-height:16px;margin:0;padding:12px 16px}

@media screen and (max-width: 1536px) {
  /* §295. Таблиця нижче була заморожена правильно, а ВЛАСНА типографіка
     сторінки — ні: ті самі `1.171875vw / .9765625vw / 1.5625vw` стояли без
     піксельної половини, тож на 1440 виходило 16.875 / 14.06 / 22.5 замість
     донорських 18 / 15 / 24. Заміряно на живому донорі:
       h1        18/24 на 1440 → 22.5/30 на 1920
       текст     15/24         → 18.75/30
       таблиця   18/24 і 15/24 → 22.5/30 і 18.75/30
     Поле абзаца при цьому НЕ заморожене — у донора `margin-bottom`
     14.0625 на 1440 і 18.75 на 1920, тобто чистий `.9765625vw`. Класика
     «порядково, а не пофайлово»: в одному правилі кегль треба заморозити,
     а поле — ні. */
  .page--delivery > h1{font-size:18px;line-height:24px}
  .page--delivery .rte section > div:last-child > div{font-size:15px;line-height:24px}
  .page--delivery .rte section div,
  .page--delivery .rte section p{font-size:15px;line-height:24px}
  .page--delivery .rte section h1,
  .page--delivery .rte section h2{font-size:32px;line-height:40px}
  .page--delivery .rte section b{font-size:18px;line-height:24px}
  .page--delivery .rte section a{font-size:15px;line-height:24px}

  .deliveryTable .countryVacancyWrap .inputGroup{margin:0 0 30px;width:260px}
  .deliveryTable .tableWrap .row.head .col .text{font-size:18px;line-height:24px}
  .deliveryTable .tableWrap .row .col .text{font-size:15px;line-height:24px}
  .deliveryTable .tableWrap .row .col .value{font-size:15px;line-height:24px}
  .deliveryTable .tableWrap .row .shipping{gap:8px}
  .deliveryTable .tableWrap .row .shipping .name{font-size:15px;line-height:24px}
  .dcHint{font-size:15px;line-height:24px}
  .dcCountry__button{font-size:15px;line-height:24px;padding:8px 12px}
}
@media screen and (max-width: 1000px) {
  .deliveryTable{padding:0 8.3333333333vw 168px}
}
@media screen and (max-width: 768px) {
  .deliveryTable .countryVacancyWrap .inputGroup{margin:0 0 30px;width:100%}
  .deliveryTable .tableWrap{border-left:none;border-top:none}
  .deliveryTable .tableWrap .row{border-left:1px solid #dedede;border-top:1px solid #dedede;grid-template-columns:1fr;margin:20px 0;overflow:hidden}
  .deliveryTable .tableWrap .row.head{display:none}
  .deliveryTable .tableWrap .row .col{justify-content:space-between;padding:4px 7px}
  .deliveryTable .tableWrap .row .col .text{display:block;font-weight:700}
  .deliveryTable .tableWrap .row .shipping .name{font-weight:700}
}

/* Позиції прапорів у спрайті `country-flags.png`: 190 країн по 15px.
   Згенеровано разом зі спрайтом, порядок — за ISO за абеткою. */
.flag[data-code="ad"]{background-position:0 -0px}.flag[data-code="ae"]{background-position:0 -15px}.flag[data-code="ag"]{background-position:0 -30px}.flag[data-code="ai"]{background-position:0 -45px}.flag[data-code="al"]{background-position:0 -60px}.flag[data-code="am"]{background-position:0 -75px}.flag[data-code="ao"]{background-position:0 -90px}.flag[data-code="ar"]{background-position:0 -105px}.flag[data-code="at"]{background-position:0 -120px}.flag[data-code="au"]{background-position:0 -135px}.flag[data-code="aw"]{background-position:0 -150px}.flag[data-code="az"]{background-position:0 -165px}.flag[data-code="ba"]{background-position:0 -180px}.flag[data-code="bb"]{background-position:0 -195px}.flag[data-code="bd"]{background-position:0 -210px}.flag[data-code="be"]{background-position:0 -225px}.flag[data-code="bf"]{background-position:0 -240px}.flag[data-code="bg"]{background-position:0 -255px}.flag[data-code="bh"]{background-position:0 -270px}.flag[data-code="bi"]{background-position:0 -285px}.flag[data-code="bj"]{background-position:0 -300px}.flag[data-code="bm"]{background-position:0 -315px}.flag[data-code="bn"]{background-position:0 -330px}.flag[data-code="bo"]{background-position:0 -345px}.flag[data-code="bq"]{background-position:0 -360px}.flag[data-code="br"]{background-position:0 -375px}.flag[data-code="bs"]{background-position:0 -390px}.flag[data-code="bt"]{background-position:0 -405px}.flag[data-code="bw"]{background-position:0 -420px}.flag[data-code="bz"]{background-position:0 -435px}.flag[data-code="ca"]{background-position:0 -450px}.flag[data-code="cd"]{background-position:0 -465px}.flag[data-code="ch"]{background-position:0 -480px}.flag[data-code="ci"]{background-position:0 -495px}.flag[data-code="ck"]{background-position:0 -510px}.flag[data-code="cl"]{background-position:0 -525px}.flag[data-code="cm"]{background-position:0 -540px}.flag[data-code="cn"]{background-position:0 -555px}.flag[data-code="co"]{background-position:0 -570px}.flag[data-code="cr"]{background-position:0 -585px}.flag[data-code="cv"]{background-position:0 -600px}.flag[data-code="cw"]{background-position:0 -615px}.flag[data-code="cy"]{background-position:0 -630px}.flag[data-code="cz"]{background-position:0 -645px}.flag[data-code="de"]{background-position:0 -660px}.flag[data-code="dj"]{background-position:0 -675px}.flag[data-code="dk"]{background-position:0 -690px}.flag[data-code="dm"]{background-position:0 -705px}.flag[data-code="do"]{background-position:0 -720px}.flag[data-code="dz"]{background-position:0 -735px}.flag[data-code="ec"]{background-position:0 -750px}.flag[data-code="ee"]{background-position:0 -765px}.flag[data-code="eg"]{background-position:0 -780px}.flag[data-code="er"]{background-position:0 -795px}.flag[data-code="es"]{background-position:0 -810px}.flag[data-code="et"]{background-position:0 -825px}.flag[data-code="fi"]{background-position:0 -840px}.flag[data-code="fj"]{background-position:0 -855px}.flag[data-code="fo"]{background-position:0 -870px}.flag[data-code="fr"]{background-position:0 -885px}.flag[data-code="ga"]{background-position:0 -900px}.flag[data-code="gb"]{background-position:0 -915px}.flag[data-code="gd"]{background-position:0 -930px}.flag[data-code="ge"]{background-position:0 -945px}.flag[data-code="gf"]{background-position:0 -960px}.flag[data-code="gh"]{background-position:0 -975px}.flag[data-code="gi"]{background-position:0 -990px}.flag[data-code="gl"]{background-position:0 -1005px}.flag[data-code="gm"]{background-position:0 -1020px}.flag[data-code="gn"]{background-position:0 -1035px}.flag[data-code="gp"]{background-position:0 -1050px}.flag[data-code="gr"]{background-position:0 -1065px}.flag[data-code="gt"]{background-position:0 -1080px}.flag[data-code="gy"]{background-position:0 -1095px}.flag[data-code="hk"]{background-position:0 -1110px}.flag[data-code="hn"]{background-position:0 -1125px}.flag[data-code="hr"]{background-position:0 -1140px}.flag[data-code="ht"]{background-position:0 -1155px}.flag[data-code="hu"]{background-position:0 -1170px}.flag[data-code="id"]{background-position:0 -1185px}.flag[data-code="ie"]{background-position:0 -1200px}.flag[data-code="il"]{background-position:0 -1215px}.flag[data-code="in"]{background-position:0 -1230px}.flag[data-code="iq"]{background-position:0 -1245px}.flag[data-code="is"]{background-position:0 -1260px}.flag[data-code="it"]{background-position:0 -1275px}.flag[data-code="jm"]{background-position:0 -1290px}.flag[data-code="jo"]{background-position:0 -1305px}.flag[data-code="jp"]{background-position:0 -1320px}.flag[data-code="ke"]{background-position:0 -1335px}.flag[data-code="kg"]{background-position:0 -1350px}.flag[data-code="kh"]{background-position:0 -1365px}.flag[data-code="kn"]{background-position:0 -1380px}.flag[data-code="kr"]{background-position:0 -1395px}.flag[data-code="kw"]{background-position:0 -1410px}.flag[data-code="ky"]{background-position:0 -1425px}.flag[data-code="kz"]{background-position:0 -1440px}.flag[data-code="la"]{background-position:0 -1455px}.flag[data-code="lb"]{background-position:0 -1470px}.flag[data-code="lc"]{background-position:0 -1485px}.flag[data-code="li"]{background-position:0 -1500px}.flag[data-code="lk"]{background-position:0 -1515px}.flag[data-code="lr"]{background-position:0 -1530px}.flag[data-code="ls"]{background-position:0 -1545px}.flag[data-code="lt"]{background-position:0 -1560px}.flag[data-code="lu"]{background-position:0 -1575px}.flag[data-code="lv"]{background-position:0 -1590px}.flag[data-code="ly"]{background-position:0 -1605px}.flag[data-code="ma"]{background-position:0 -1620px}.flag[data-code="mc"]{background-position:0 -1635px}.flag[data-code="md"]{background-position:0 -1650px}.flag[data-code="me"]{background-position:0 -1665px}.flag[data-code="mf"]{background-position:0 -1680px}.flag[data-code="mg"]{background-position:0 -1695px}.flag[data-code="mk"]{background-position:0 -1710px}.flag[data-code="ml"]{background-position:0 -1725px}.flag[data-code="mn"]{background-position:0 -1740px}.flag[data-code="mo"]{background-position:0 -1755px}.flag[data-code="mq"]{background-position:0 -1770px}.flag[data-code="mr"]{background-position:0 -1785px}.flag[data-code="ms"]{background-position:0 -1800px}.flag[data-code="mt"]{background-position:0 -1815px}.flag[data-code="mu"]{background-position:0 -1830px}.flag[data-code="mv"]{background-position:0 -1845px}.flag[data-code="mw"]{background-position:0 -1860px}.flag[data-code="mx"]{background-position:0 -1875px}.flag[data-code="my"]{background-position:0 -1890px}.flag[data-code="mz"]{background-position:0 -1905px}.flag[data-code="na"]{background-position:0 -1920px}.flag[data-code="nc"]{background-position:0 -1935px}.flag[data-code="ne"]{background-position:0 -1950px}.flag[data-code="ng"]{background-position:0 -1965px}.flag[data-code="ni"]{background-position:0 -1980px}.flag[data-code="nl"]{background-position:0 -1995px}.flag[data-code="no"]{background-position:0 -2010px}.flag[data-code="np"]{background-position:0 -2025px}.flag[data-code="nz"]{background-position:0 -2040px}.flag[data-code="om"]{background-position:0 -2055px}.flag[data-code="pa"]{background-position:0 -2070px}.flag[data-code="pe"]{background-position:0 -2085px}.flag[data-code="pf"]{background-position:0 -2100px}.flag[data-code="pg"]{background-position:0 -2115px}.flag[data-code="ph"]{background-position:0 -2130px}.flag[data-code="pk"]{background-position:0 -2145px}.flag[data-code="pl"]{background-position:0 -2160px}.flag[data-code="ps"]{background-position:0 -2175px}.flag[data-code="pt"]{background-position:0 -2190px}.flag[data-code="py"]{background-position:0 -2205px}.flag[data-code="qa"]{background-position:0 -2220px}.flag[data-code="re"]{background-position:0 -2235px}.flag[data-code="ro"]{background-position:0 -2250px}.flag[data-code="rs"]{background-position:0 -2265px}.flag[data-code="rw"]{background-position:0 -2280px}.flag[data-code="sa"]{background-position:0 -2295px}.flag[data-code="sc"]{background-position:0 -2310px}.flag[data-code="se"]{background-position:0 -2325px}.flag[data-code="sg"]{background-position:0 -2340px}.flag[data-code="si"]{background-position:0 -2355px}.flag[data-code="sk"]{background-position:0 -2370px}.flag[data-code="sm"]{background-position:0 -2385px}.flag[data-code="sn"]{background-position:0 -2400px}.flag[data-code="sr"]{background-position:0 -2415px}.flag[data-code="sv"]{background-position:0 -2430px}.flag[data-code="sx"]{background-position:0 -2445px}.flag[data-code="sz"]{background-position:0 -2460px}.flag[data-code="tc"]{background-position:0 -2475px}.flag[data-code="td"]{background-position:0 -2490px}.flag[data-code="tg"]{background-position:0 -2505px}.flag[data-code="th"]{background-position:0 -2520px}.flag[data-code="tl"]{background-position:0 -2535px}.flag[data-code="tn"]{background-position:0 -2550px}.flag[data-code="to"]{background-position:0 -2565px}.flag[data-code="tr"]{background-position:0 -2580px}.flag[data-code="tt"]{background-position:0 -2595px}.flag[data-code="tw"]{background-position:0 -2610px}.flag[data-code="tz"]{background-position:0 -2625px}.flag[data-code="ug"]{background-position:0 -2640px}.flag[data-code="us"]{background-position:0 -2655px}.flag[data-code="uy"]{background-position:0 -2670px}.flag[data-code="uz"]{background-position:0 -2685px}.flag[data-code="va"]{background-position:0 -2700px}.flag[data-code="vc"]{background-position:0 -2715px}.flag[data-code="vg"]{background-position:0 -2730px}.flag[data-code="vn"]{background-position:0 -2745px}.flag[data-code="vu"]{background-position:0 -2760px}.flag[data-code="wf"]{background-position:0 -2775px}.flag[data-code="ws"]{background-position:0 -2790px}.flag[data-code="za"]{background-position:0 -2805px}.flag[data-code="zm"]{background-position:0 -2820px}.flag[data-code="zw"]{background-position:0 -2835px}

/* ---------- page-faq.css ---------- */
/* Сторінка FAQ (`templates/page.faq.json` + `sections/main-page-faq.liquid`).
 *
 * Еталон — `section.faq.pageInfoContent` старого сайту. Заміряно на 1440 і 415,
 * обидва боки, холодною сесією:
 *
 *   вузол                деск 1440                     моб 415
 *   .pageInfoContent     pad 72.19 / 120 / 75          pad 13 / 34.58 / 168
 *   .pageTitle           18/24, uppercase, 700         18/24, uppercase, 700
 *                        pb 40.31 + 1px лінія          pb 27 + 1px лінія
 *                        mb 68.44                      mb 39
 *   .faq .content        додатковий відступ 240 з боків  0
 *   .slideToggleWrap     pb 22.5, mb 22.5, лінія знизу  pb 19, mb 21
 *   .slideToggle .text   32/40, 700                     18/24, 700, uppercase
 *   .buttonSlideToggle   18×18, «плюс» із двох рисок 1px
 *   .description         15/24, margin-top 22.5         15/24, margin-top 21
 *
 * Розміри — vw, як в оригіналі, з px-стелею на ≤1536: саме так зроблено в них
 * (база `2.0833vw`, а `@media(max-width:1536px)` фіксує 32px). Писати одразу px
 * означало б розійтися з еталоном вище 1536.
 *
 * Розмітка тепер донорська (`.slideToggleWrap` → `.slideToggle` → `.text` +
 * `.buttonSlideToggle` → `.slideToggleContent` → `.description`), а анімацію
 * тягне спільний `assets/slide-toggle.js` — той самий файл, що на сторінці
 * товару. Тому нижче лишається сам порт стилів донорського `faq.css`.
 *
 * ЧОМУ КОЖНЕ ПРАВИЛО ПОЧИНАЄТЬСЯ З `.page--faq`. Ті самі класи носять
 * акордеони товару, і в `product-card.css` вони описані ГЛОБАЛЬНО (рамка
 * зверху #d9d9d9, падінг 1.302vw, кнопка 13×13). Значення там інші, а файл
 * складається ПІСЛЯ цього (`page-…` < `product-…` за абеткою), тож на рівній
 * специфічності виграв би він. Зайвий рівень дає 0,4,0 проти 0,1,0 і знімає
 * залежність від порядку складання.
 *
 * ЧОМУ `.slideToggleContent{overflow:hidden}`, чого в донора НЕМА. Без нього
 * верхнє поле `.description` (22.5) схлопується назовні, і jQuery анімує
 * висоту до 108.56 замість 72 — на живому /faq/ видно, як наприкінці блок
 * стрибком СІДАЄ з 106.84 до 72 (заміряно покадрово). Підсумкова геометрія
 * однакова в обох випадках (40 + 22.5 + 72 + 14.06 + 22.5 + 1 = 172.06), а
 * стрибок — чистий артефакт; на сторінці товару його теж нема.
 */

/* Поля секції — донорські vw; `.page` з design.css дає 24/4.1666vw/40, тому
   правило мусить стояти тут, у файлі, який збирається після design.css. */
.page--faq {
  padding: 5.0130208333vw 8.3333333333vw 5.2083333333vw;
}

.page--faq > h1 {
  margin: 0 0 4.7526041667vw;
  padding: 0 0 2.7994791667vw;
  border-bottom: 1px solid #dedede;
  font-size: 1.171875vw;
  line-height: 1.5625vw;
  font-weight: 700;
  text-transform: uppercase;
  color: #333;
}

/* `.faq .content{padding:0 16.6666vw}` — колонка акордеона вужча за смугу
   заголовка рівно на 240 px з кожного боку (заміряно 720 при 1200). */
.page--faq .faq__list {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0 16.6666666667vw;
  gap: 0;
}

/* Рядок акордеона. Порт `faq.css` донора:
   `.slideToggleWrap{border-bottom:1px solid #dedede;margin-bottom:1.5625vw;
   padding-bottom:1.5625vw}`. Роздільник знизу, а не зверху, як у товару. */
.page--faq .slideToggleWrap {
  border: 0;
  border-bottom: 1px solid #dedede;
  border-radius: 0;
  margin: 0 0 1.5625vw;
  padding: 0 0 1.5625vw;
}

/* Шапка: `align-items:center;cursor:pointer;display:flex;gap:.5208333333vw;
   justify-content:space-between`. Падінга тут нема — на відміну від товару. */
.page--faq .slideToggleWrap .slideToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5208333333vw;
  padding: 0;
  cursor: pointer;
}

.page--faq .slideToggleWrap .slideToggle .text {
  font-size: 2.0833333333vw;
  line-height: 2.6041666667vw;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: #333;
}

/* Знак +/− — дві риски по 1 px усередині квадрата, а не гліф: вертикальна
   `::after` і горизонтальна `::before`. Відкритий стан не підміняє символ —
   уся кнопка повертається на 90°, а горизонтальна риска стискається в нуль
   від точки .5208vw. Тут квадрат 1.171875vw (18 px при ≤1536) проти 13 px
   на товарі — це різниця самого донора, не наша. */
.page--faq .slideToggleWrap .slideToggle .buttonSlideToggle {
  display: block;
  position: relative;
  width: 1.171875vw;
  height: 1.171875vw;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transform: rotate(0deg);
  transition: 0.3s;
  flex: none;
}
.page--faq .slideToggleWrap .slideToggle .buttonSlideToggle::before,
.page--faq .slideToggleWrap .slideToggle .buttonSlideToggle::after {
  content: "";
  display: block;
  position: absolute;
  background: #111;
  transition: 0.3s;
}
.page--faq .slideToggleWrap .slideToggle .buttonSlideToggle::after {
  top: 0; left: 0.5208333333vw; width: 1px; height: 1.171875vw;
}
.page--faq .slideToggleWrap .slideToggle .buttonSlideToggle::before {
  top: 0.5208333333vw; left: 0; width: 1.171875vw; height: 1px;
}
.page--faq .slideToggleWrap.active .slideToggle .buttonSlideToggle {
  transform: rotate(90deg);
}
.page--faq .slideToggleWrap.active .slideToggle .buttonSlideToggle::before {
  left: 0.5208333333vw; width: 0;
}

/* Тіло. `display:none` — з донора; `overflow:hidden` — наше, причина в
   шапці файлу. Саме з цією парою працює slideDown/slideUp: висоту анімує
   JS, CSS лише ховає вміст, що вилазить за межі. */
.page--faq .slideToggleWrap .slideToggleContent { display: none; overflow: hidden; }

/* `.slideToggleContent .description{margin-top:1.5625vw}` плюс наскрізне
   донорське `.description{font-size:.9765625vw;line-height:1.5625vw;
   margin-bottom:.9765625vw;margin-top:0}`. */
.page--faq .slideToggleWrap .slideToggleContent .description {
  margin: 1.5625vw 0 0.9765625vw;
  padding: 0;
  color: #333;
  font-size: 0.9765625vw;
  line-height: 1.5625vw;
}

.page--faq .description > *,
.page--faq .description p,
.page--faq .description div {
  margin: 0 0 0.9765625vw;
  font-size: 0.9765625vw;
  line-height: 1.5625vw;
}

/* У донора відповідь — голий текст без абзаців, тож його `.description`
   несе нижнє поле САМ. Наш richtext загортає текст у <p>, і без цього
   рядка поле рахувалось би двічі. */
.page--faq .description > :last-child { margin-bottom: 0; }
.page--faq .description span { font-size: inherit !important; }
.page--faq .description a { color: #111; text-decoration: underline; }
.page--faq .description a:hover { text-decoration: none; }

/* Стеля кеглів — так само, як в оригіналі: нижче 1536 vw заміняються на px. */
@media (max-width: 1536px) {
  .page--faq > h1 { font-size: 18px; line-height: 24px; }
  .page--faq .slideToggleWrap .slideToggle .text { font-size: 32px; line-height: 40px; }
  /* `.buttonSlideToggle{height:18px;width:18px}` і риски 18×1 / 1×18 на 8. */
  .page--faq .slideToggleWrap .slideToggle .buttonSlideToggle { width: 18px; height: 18px; }
  .page--faq .slideToggleWrap .slideToggle .buttonSlideToggle::after {
    top: 0; left: 8px; width: 1px; height: 18px;
  }
  .page--faq .slideToggleWrap .slideToggle .buttonSlideToggle::before {
    top: 8px; left: 0; width: 18px; height: 1px;
  }
  .page--faq .slideToggleWrap .slideToggleContent .description,
  .page--faq .description > *,
  .page--faq .description p,
  .page--faq .description div { font-size: 15px; line-height: 24px; }
}

@media (max-width: 768px) {
  .page--faq { padding: 13px 8.3333333333vw 168px; }
  .page--faq > h1 {
    margin-bottom: 39px;
    padding-bottom: 27px;
    font-size: 18px;
    line-height: 24px;
  }
  .page--faq .faq__list { padding: 0; }
  .page--faq .slideToggleWrap { margin-bottom: 21px; padding-bottom: 19px; }
  .page--faq .slideToggleWrap .slideToggle .text {
    font-size: 18px;
    line-height: 24px;
    text-transform: uppercase;
  }
  /* Квадрат знака на мобілці НЕ зменшується — у донора 18×18 і на 1440,
     і на 415 (заміряно на живому /faq/). */
  .page--faq .slideToggleWrap .slideToggleContent .description {
    margin-top: 21px;
    margin-bottom: 15px;
  }
  .page--faq .description > *,
  .page--faq .description p,
  .page--faq .description div { margin-bottom: 15px; }
  .page--faq .description > :last-child { margin-bottom: 0; }
}

/* ---------- page-hairclip.css ---------- */
/* ===========================================================================
 * ЛЕНДІНГ HAIR-CLIP — сім секцій із власним медіа
 * ---------------------------------------------------------------------------
 * Оригінал (`.wrapperCustomLandingPage`): три відео-банери, смуга «2 SIZES»,
 * добірка товару, банер-картинка і карусель UGC. Заміряно на 1440:
 * відео-банер 421.9 (ролик 1454.4×426.1, тобто природна пропорція 3.413,
 * секція його обрізає), банер-картинка на всю ширину 421.9 при кадрі 450.8,
 * банер природної ширини 710×263 по центру, картка товару 360×556 — чотири
 * в ряд.
 *
 * Смуги еталона (1440 / 415), від яких рахуються всі числа нижче:
 *   lenP1    123.0 / 421.9   ·   98.0 / 456.5
 *   mediaC   591.8 / 555.7   ·  586.5 / 546.7
 *   товар   1147.5 / 1227.4  · 1133.2 / 1292.5
 *   banner3 2374.8 / 421.9   · 2425.7 / 448.2
 *   banner4 2796.7 / 263.0   · 2873.8 / 296.9
 *   mediaC2 3125.3 / 549.3   · 3230.7 / 863.9
 *   banner8 3704.7 / 421.9   · 4150.6 / 701.3
 *
 * Файл ведеться ТУТ, а не в `theme/assets/sections.css`: той зшивається
 * `migrate/build_css.py` із `theme-sections-css/*.css`, і правка руками
 * зникає з першою ж наступною збіркою (так уже сталось — разом із нею
 * поверталось +200 px висоти й діф 43.7% замість 21.2%).
 * =========================================================================== */

/* Відео в оригіналі обрізане: елемент 1454.4×426.1 у секції 1440×421.9, тобто
   ширший за неї на 1% і підрізаний. Коробку задає пропорція секції (інакше
   `height:auto` дає природні 450 замість 421.9, +28.1 на кожен банер, а їх
   три), сам ролик — рівно `101%/101%`, як в оригіналі
   (`.lenP1 .item .video-container .video-js .vjs-tech`). На 100% масштаб
   різнився на 1%: біля лівої кромки збіг, до правої розбіжність доростала
   до 14.4 px. `max-width:none` — бо `base.css` тримає `img,svg,video
   { max-width:100% }` і без нього ширина лишалась 100%.
   Пропорція приходить із блока: 3.4133 на деску (сходиться на
   1440/1350/900/700 до 0.0003) і 0.9091 на 415 — те саме, що `29.2969vw`
   і `110vw` в оригіналі. */
.hcl__video { overflow: hidden; aspect-ratio: var(--ar, 3.4133); }
.hcl__video video { display: block; width: 101%; max-width: none;
                    height: 101%; object-fit: cover; }

.hcl__banner { overflow: hidden; }
.hcl__banner--full { aspect-ratio: var(--ar); }
/* object-position top: оригінал кладе кадр потоком і ріже НИЗ overflow'ом
   (шапка кадру на місці, зайве зникає знизу); центрований cover зсував
   увесь банер на 14.4 px догори. */
.hcl__banner--full img { display: block; width: 100%; height: 100%;
                         object-fit: cover; object-position: top; }
/* пропорція 0 = природна: секція без aspect-ratio, кадр не розтягується */
.hcl__banner--full[style*="--ar: 0"] { aspect-ratio: auto; }
.hcl__banner--full[style*="--ar: 0"] img { height: auto; object-fit: fill; }
.hcl__banner--natural img { display: block; width: 100%; max-width: calc(var(--nat) * 1px);
                            height: auto; margin-inline: auto; }

/* «2 SIZES»: в оригіналі `.mediaC { padding:0 2.0833vw }` (30 на 1440),
   слайд із радіусом 1.5625vw (22.5), під стрічкою — пігулка пагінації. */
.hcl__duo { padding-inline: 2.0833333333vw; }
/* Ширина стрічки — ЦІЛЕ число пікселів: Swiper оригіналу пише слайду цілу
   ширину (на 415 — 406 при контейнері 406.354). Ті 0.354 px робили нашу
   картинку 447.1 замість 446.7, і зайві 0.4 px котились униз — банер
   «free delivery» стояв на 2426.1 проти 2425.7 в еталона. На 1440 контейнер
   і так рівний (1380), тож правило там нічого не міняє. Браузер без
   `round()` просто ігнорує рядок і повертається до 100%. */
/* Стрічка стала каруселлю (`<embla-slider>`): `overflow:hidden` переїхав
   на вʼюпорт, бо Embla рухає саме контейнер усередині нього, а решта
   геометрії лишилась незмінною — ті самі 100% на слайд і 30 px між ними,
   тож кадр і висота блока не поїхали. */
.hcl__duo-viewport { overflow: hidden; width: round(down, 100%, 1px); }
.hcl__duo-slider { position: relative; display: block; }
.hcl__duo-track { display: flex; gap: 30px; }
/* Embla читає ширину слайда з `flex-basis`; курсор «хапнути» — щоб було
   видно, що стрічку можна тягнути. */
.hcl__duo-viewport { cursor: grab; }
.hcl__duo-viewport:active { cursor: grabbing; }
.hcl__duo-slide { flex: 0 0 100%; border-radius: 1.5625vw; overflow: hidden; }
.hcl__duo-slide img { display: block; width: 100%; height: auto; }

/* Обидва заголовки — один `.secTitle` оригіналу: 2.0833vw/2.6041vw (30/37.5
   на 1440), жирний, капсом, маржа 3.2552vw 3.90625vw 2.0833vw
   (46.875 56.25 30). «2 SIZES» стоїть у падінгу 30 секції → сумарно 86.25
   зліва, «Hair clips» — у секції без падінгу → 56.25, як в еталона. */
.hcl__duo-title, .hcl__products-title {
  margin: 3.2552083333vw 3.90625vw 2.0833333333vw;
  color: #111; font-size: 2.0833333333vw; line-height: 2.6041666667vw;
  font-weight: 700; text-transform: uppercase;
}
.hcl__duo-title { margin-top: 0; }
/* маржа-верх «2 SIZES» — 46.875 від героя; сам заголовок перший у секції,
   а секція йде одразу за відео, тож маржа живе на секції */
.hcl__duo { margin-top: 3.2552083333vw; }

/* Пігулка пагінації свайпера: фон #e9e9e9, актив — чорна рисочка. Числа
   оригіналу: висота 2.34375vw (33.75), маржа-верх 1.5625vw (22.5), падінг
   .651vw 1.4322vw, крапка .4557vw, актив 2.34375vw завширшки. */
.hcl__dots {
  display: flex; align-items: center; justify-content: center;
  gap: 1.5625vw; width: max-content; height: 2.34375vw;
  margin: 1.5625vw auto 0; padding: .6510416667vw 1.4322916667vw;
  background: #e9e9e9; border-radius: 999px; box-sizing: border-box;
}
.hcl__dots span { width: .4557291667vw; height: .4557291667vw;
                  border-radius: 50%; background: #fff; flex: none; }
.hcl__dots .is-on { width: 2.34375vw; border-radius: 999px; background: #000; }

/* Сітка товарів в еталоні на всю ширину, `.itemWrap { border-top:#dde6e8 }`,
   а лінії між картками — бордери самої `.cardItem__product` (#e8e8e8). */
.hcl__products { padding-inline: 0; }
.hcl__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
             list-style: none; margin: 0; padding: 0;
             border-top: 1px solid #dde6e8; }
.hcl__grid > li { border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
                  display: flex; min-width: 0; }
.hcl__grid .product-card { width: 100%; }

/* Карусель UGC (`.mediaC2`). Заміряно на живому еталоні, але НЕ звірено
   рендером: чотири ролики `lendClipUgc1-4.mp4` у Files магазину відсутні,
   секція вимкнена галочкою (див. коментар у `main-page-hairclip.liquid`).
   1440: секція 549.3 = висота ролика (слайд 309, відео 720×1280 → 549.33),
   маржа 65.6 зверху (28.125 порожньої `.banner-reviews-wrap` + 37.5 самої
   секції) і 30 знизу; падінг-ліворуч 72, крок слайдів 329 → зазор 20;
   підпис `.lr2-item` на деску `display:none`.
   415: слайд 383, зазор 26, падінг-ліворуч 16, відео 680.9, підпис 97
   (маржа 16/16), слайд 809.9, плюс пігулка 36 з маржею 18 → секція 863.9;
   маржа 60 зверху і 56 знизу. */
.hcl__ugc { margin: 4.5555555556vw 0 2.0833333333vw; }
/* Стрічка — контейнер `<embla-slider>` (задача 475). Обрізає вьюпорт, а не
   сам трек: рушій зсуває трек трансформом, і `overflow: hidden` на ньому
   обрізав би ролики, що в'їжджають у кадр. Лівий падінг Embla враховує сам. */
.hcl__ugc-track { display: flex; gap: 1.3888888889vw;
                  padding-inline: 5vw 0; }
.hcl__ugc-slide { flex: 0 0 21.4583333333vw; margin: 0; }
/* Радіус на ролику — `.video-wrapper` оригіналу: 1.5625vw (22.5 на 1440),
   24 px на мобільному зламі. Був загублений: відео йшло прямим кутом. */
.hcl__ugc-slide video { display: block; width: 100%; height: auto;
                        /* Пропорція ролика в донора 1296×2304, тобто рівно 9:16
                           (заміряно на `/lending/hair-clip/`). Задаємо явно, щоб
                           слайд мав правильну висоту ще до того, як браузер
                           прочитає метадані файла. */
                        aspect-ratio: 9 / 16;
                        border-radius: 1.5625vw; overflow: hidden; }
.hcl__ugc-slide figcaption { display: none; }

/* Підпис під роликом — `article.lr2-item` оригіналу. На 1440 його не
   видно (чотири ролики стоять у ряд і підпис прихований), тому всі числа
   тут — з мобільного зламу, де він і малюється. */
.hcl__ugc-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
/* Ім'я автора: в оригіналі НЕ жирне, а капсом — у нас стояло 700 без
   капсу, тобто інша вага й інша форма рядка. */
.hcl__ugc-name { display: block; font-weight: 400; text-transform: uppercase; }
.hcl__ugc-text { display: block; color: #333; }

/* Зірки: `.lr2-stars` — п'ять `span.star` 16×14 з gap 4 і маржею-низом 12,
   гліф — той самий /assets/star.svg оригіналу (залитий #333). Погашена
   зірка в оригіналі не малюється зовсім, тож неактивні лишаємо
   прозорими — місце вони тримають, кольору не дають. */
.hcl__ugc-stars { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; }
.hcl__ugc-star { display: block; flex: none; width: 16px; height: 14px; }
/* Гліф — контур із /assets/star.svg оригіналу, узятий дослівно й
   вкладений data-URI, як решта іконок теми: відносний `url()` у
   зібраному sections.css розвʼязується від адреси CSS на CDN, і
   покладатись на це не варто. */
.hcl__ugc-star.is-on {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14' fill='none'><path d='M8 0.299988L9.68386 5.48236H15.1329L10.7245 8.68524L12.4084 13.8676L8 10.6647L3.59161 13.8676L5.27547 8.68524L0.867076 5.48236H6.31614L8 0.299988Z' fill='%23333333'/></svg>") center / contain no-repeat;
}
/* Лічильник відгуків «(1)» — `.lr-stars-text` праворуч від зірок. */
.hcl__ugc-count { color: #333; }

.hcl__ugc .hcl__dots { display: none; }

@media (max-width: 1000px) {
  .hcl__grid { grid-template-columns: repeat(2, 1fr); }
  /* оригінал: `.mediaC { padding:0 1.0416vw }` (4.3 на 415) і радіус 24 */
  .hcl__duo { padding-inline: 1.0416666667vw; margin-top: 32px; }
  .hcl__duo-slide { border-radius: 24px; }
  /* mob-`.secTitle`: 18/24, маржа 32 12 22, по центру */
  .hcl__duo-title, .hcl__products-title {
    font-size: 18px; line-height: 24px; margin: 32px 12px 22px;
    text-align: center;
  }
  .hcl__duo-title { margin-top: 0; }
  /* mob-пігулка: висота 36, крапки 7, актив 36×7, gap 24, маржа-верх 18 */
  .hcl__dots { gap: 24px; height: 36px; margin: 18px auto 0; padding: 10px 22px; }
  .hcl__dots span { width: 7px; height: 7px; }
  .hcl__dots .is-on { width: 36px; }
  .hcl__ugc { margin: 60px 0 56px; }
  /* Зазор між роликами — `spaceBetween: 10` свайпера оригіналу; у нас
     стояло 26, тобто крок стрічки був інший. */
  .hcl__ugc-track { gap: 10px; padding-inline: 16px 0; }
  .hcl__ugc-slide { flex: 0 0 383px; }
  .hcl__ugc-slide video { border-radius: 24px; }
  /* Підпис 383×97: маржа 16 зверху й знизу, падінг-низ 25 і волосина
     #e8e8e8 — саме її видно на мобільному знімку еталона. */
  .hcl__ugc-slide figcaption { display: block; margin: 16px 0; padding-bottom: 25px;
                               border-bottom: 1px solid #e8e8e8; }
  .hcl__ugc-name { font-size: 14px; line-height: 16px; }
  .hcl__ugc-text, .hcl__ugc-count { font-size: 14px; line-height: 16px; }
  .hcl__ugc .hcl__dots { display: flex; }
}
@media (max-width: 599px) {
  .hcl__video { aspect-ratio: var(--ar-mob, 0.9091); }
  /* банер із мобільною пропорцією (free delivery: 108vw заввишки в еталоні) */
  .hcl__banner--full { aspect-ratio: var(--ar-mob, var(--ar)); }
}

/* ============================================================
   СТРІЛКИ Й ПІГУЛКА КАРУСЕЛІ «2 SIZES»
   ------------------------------------------------------------
   Стрілки — той самий рецепт, що на головній (`.hero__arrow`,
   theme-sections-css/home.css): круг 48×48 БЕЗ фону, підкладка — це
   `backdrop-filter: blur(6px)`, тобто розмитий кадр під кнопкою; шеврон
   малює не вектор, а гліф шрифту swiper-icons (`content:'prev'/'next'`).
   Сам `@font-face` шрифту оголошений у home.css і потрапляє в той самий
   зібраний sections.css, тож окремо його підключати не треба.

   Дублюємо правила, а не тягнемо клас `.hero__arrow`: хіро — чужа
   секція, і зачепити її звідси не можна. Числа однакові навмисно.

   По вертикалі swiper ставить `top:50%` мінус половину СВОГО розміру
   (44/2 = 22), а не половину переоприділених 48 — повторюємо той самий
   зсув, інакше кнопка стане на 2 px вище за оригінальну.
   ============================================================ */
.hcl__arrow {
  position: absolute; top: 50%; z-index: 10;
  /* −22 — це swiper-івська половина ЙОГО розміру (44/2), як у хіро.
     Плюс власна поправка: на головній пігулка накладена на кадр
     абсолютом, тож висота слайдера дорівнює висоті кадру; тут пігулка
     стоїть у потоці під стрічкою й додає слайдеру 3.90625vw
     (2.34375 висота + 1.5625 маржа). Через це `top:50%` рахувався б від
     кадру РАЗОМ із пігулкою, і кнопки сідали б нижче середини картинки.
     Віднімаємо половину цієї добавки — 1.953125vw. */
  margin-top: calc(-22px - 1.953125vw); z-index: 10;
  width: 48px; height: 48px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer;
  /* показуємо лише після ініціалізації слайдера — до того кнопки
     блимали б поверх ще не розкладеного кадру */
  opacity: 0; visibility: hidden; transition: opacity .3s ease;
}
embla-slider.is-ready .hcl__arrow { opacity: 1; visibility: visible; }
.hcl__arrow.is-hidden { display: none; }
/* Стрічка лежить у секції з боковим падінгом, тож кнопки ставимо
   всередині кадру — по 20 px від його країв, як у хіро. */
.hcl__arrow--prev { left: 20px; }
.hcl__arrow--next { right: 20px; }
.hcl__arrow::after {
  font-family: swiper-icons;
  font-size: 32px;
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
  color: rgba(0, 0, 0, .55);
}
.hcl__arrow--prev::after { content: 'prev'; }
.hcl__arrow--next::after { content: 'next'; }
.hcl__arrow:hover::after { color: #000; }
/* На телефоні стрілок немає — там гортають пальцем, як і в оригіналі. */
@media (max-width: 768px) { .hcl__arrow { display: none; } }

/* Пігулка: раніше це були два нерухомі `<span>`, тепер їх будує слайдер
   і це `<button class="embla__dot">`. Розміри лишаються ті самі, що були
   в статичної пігулки, тому блок не змінив висоту.
   З задачі 475 так само будує пігулку й блок UGC. Його мобільний злам —
   1000, а не 768 (там і раніше жили його `span`), тому розміри крапок UGC
   перемикаються окремим правилом. Правила для `span` лишились без носія. */
.hcl__duo .hcl__dots .embla__dot,
.hcl__ugc .hcl__dots .embla__dot {
  width: .4557291667vw; height: .4557291667vw; min-width: 0;
  padding: 0; margin: 0; border: 0;
  border-radius: 50%; background: #fff; flex: none;
  opacity: 1; transform: none;
  cursor: pointer; transition: width .3s ease, background-color .3s ease;
}
.hcl__duo .hcl__dots .embla__dot.is-active,
.hcl__ugc .hcl__dots .embla__dot.is-active {
  width: 2.34375vw; border-radius: 999px; background: #000; transform: none;
}
@media (max-width: 768px) {
  .hcl__duo .hcl__dots .embla__dot { width: 7px; height: 7px; }
  .hcl__duo .hcl__dots .embla__dot.is-active { width: 36px; }
}
@media (max-width: 1000px) {
  .hcl__ugc .hcl__dots .embla__dot { width: 7px; height: 7px; }
  .hcl__ugc .hcl__dots .embla__dot.is-active { width: 36px; }
}

/* ---------- page-legal.css ---------- */
/* ============================================================
   ЮРИДИЧНІ СТОРІНКИ — ШИРИНА РЯДКА
   ------------------------------------------------------------
   ЦЕ СВІДОМЕ ВІДХИЛЕННЯ ВІД ОРИГІНАЛУ, а не порт.

   Заміряно на 1440 по обидва боки: і в нас, і в донора абзац тягнеться
   на всю ширину вікна — `max-width:none`, бокових полів нема (`padding:0`),
   кегль 15/24. Тобто копіювання донора один-в-один зберегло б ваду:
   при 15 px і смузі 1440 px у рядку виходить близько 190 знаків, а око
   гарантовано губить початок наступного рядка вже після ~90.

   §73. Колонка була 760 px; користувач вирішив ширше — **1520**. Поля
   лишаються й стають головними: на вікні вужчому за 1520 стеля вже не
   працює, і без полів текст ліг би впритул до країв.

   Поле лишилось 20 px, і це заміряний вибір, а не звичка. Пробували
   `4.1666vw` (бічний відступ решти сторінок теми, 60 на 1440): смуга
   тексту виходить 1320 замість 1400, переноси рядків розходяться сильніше
   й сторінка стає на 126 px вища за донорську. З 20 px:

       висота донора 8298 · наша 8280  (різниця 0.2 %, було 1.5 %)
       піксельний діф деск 16.6 проти 16.9

   Донор тут малює текст НА ВСЮ ширину вікна (заміряно: `p` = 1440×,
   `padding:0`), тож будь-яке поле віддаляє від нього — і чим воно менше,
   тим ближче переноси. 20 px — компроміс: край не липне, а розкладка
   лишається донорською.

   Що доводиться гасити окремо: заголовок документа має ВЛАСНІ поля
   `margin:0 160px` (у мобільному зламі 32) — вони стояли замість
   відсутньої колонки. Усередині нової колонки вони зайві: заголовок
   поїхав би на 160 px правіше за текст під ним.

   Шаблон один — `templateSuffix: legal`, на ньому шість сторінок:
   privacy, oferta, yurydychni-dokumenty, certificates-up,
   returns-and-exchanges, data-sharing-opt-out. Правка накриває всі.
   `.legal--plain` (сторінка без донорської обгортки) уже мала свою
   колонку `68ch` у base.css — її не чіпаємо.
   ============================================================ */

/* ЄДИНЕ МІСЦЕ, ДЕ ЗАДАНА ШИРИНА КОЛОНКИ.
   Смуга тексту = `--legal-col` мінус бокові поля (20+20 на деску,
   16+16 на телефоні). Правка «зробити колонку ширшою» міняє
   РІВНО це число — за ним самі поїдуть і тіло документа, і дата оновлення,
   і сітка карток. Саме тому §73 обійшовся однією цифрою. */
.legal { --legal-col: 1520px; }

.legal__content {
  max-width: var(--legal-col);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Заголовок документа лежить усередині тіла (`> section > div:first-child`)
   і носить свої 160 px полів — усередині колонки їх треба зняти,
   інакше він не стане на одну вертикаль із текстом. */
.legal__content > section > div:first-child { margin-inline: 0; }

/* Дата оновлення живе поза `.legal__content`, тож центруємо її окремо
   тією самою колонкою — інакше вона висіла б на своїх 160 px. */
.legal__updated {
  max-width: var(--legal-col);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (max-width: 768px) {
  /* На телефоні колонка ширша за екран, працюють самі поля.
     16 — рівно стільки ж, скільки в решти сторінок теми; 4.1666vw тут
     дало б 17 і різнилося б від сусідніх сторінок. */
  .legal__content,
  .legal__updated { padding-inline: 16px; }
  .legal__content > section > div:first-child { margin-inline: 0; }
}

/* ============================================================
   ЮРИДИЧНІ СТОРІНКИ — ШРИФТ
   ------------------------------------------------------------
   `certificates-up` малювався Times New Roman, а не фірмовим шрифтом —
   саме це користувач назвав «там навіть шрифту нема». Причина: тіло цієї
   сторінки вставлене з Google Docs, і експорт лишив на КОЖНОМУ `<span>`
   інлайновий `font-family:'Times New Roman',serif` — 58 разів. base.css
   гасив тільки `font-size` (`.legal__content span{font-size:inherit}`),
   бо на решті п'яти сторінок інлайнових шрифтів немає — там ця вада
   просто не виявлялась.

   Гасимо в CSS, а не чисткою контенту: наступна вставка з Google Docs
   принесе те саме, і правило вже стоятиме. `!important` — бо
   перебиваємо інлайновий стиль, інакше ніяк.
   ============================================================ */
.legal__content span { font-family: inherit !important; }

/* ============================================================
   `yurydychni-dokumenty` — КАРТКИ ДОКУМЕНТІВ
   ------------------------------------------------------------
   ЗАВДАННЯ НА СМАК, а не порт: в оригіналі це суцільний стовпчик із
   чотирнадцяти однакових рядків, де кожне посилання підписане
   «available via link» — тобто всі чотирнадцять підписів однакові й не
   кажуть нічого. Стало: картка на документ, клікабельна вся, з типом
   документа дрібним капітелем і назвою товару великим рядком.

   Тримаємось типографіки самої сторінки, щоб не вийшов чужорідний
   острів: та сама колонка 720 px, той самий кегль 15/24, той самий
   #e8e8e8 на рамках, що в сітках карток товару по всій темі.

   Іконку малює CSS, а не розмітка: інакше в тіло сторінки довелося б
   покласти 14 копій одного SVG. Звідси `::before` з data-URI, і та сама
   причина для стрілки в `::after`.

   Специфічність скрізь `.legal__content …` — інакше програємо
   базовим `.legal__content a` і `.legal__content ul` з base.css.
   ============================================================ */

/* ДВІ КОЛОНКИ (правка 74). Чотирнадцять однорядкових карток одна під одною
   тягнулись на 1084 px — стовпчик, у якому нічого не порівняти. Сітка
   лишається всередині тієї самої смуги 720 px, тобто типографіка сторінки не
   змінилась: ті самі рамки #e8e8e8, той самий капітель 11px #999 і назва
   15/22, змінилась тільки кількість колонок.
   `minmax(0,1fr)` замість `1fr` — щоб довга назва без пробілів не розсовувала
   колонку (в назвах є склейки через косу риску, «SEA SALT\CALAMANSI\AMBER»). */
.legal__content .legal-docs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
}

.legal__content .legal-doc { margin: 0; font-size: 15px; line-height: 24px; }

/* `height:100%` — сусіди в рядку сітки мають різну кількість рядків назви
   (36…60 знаків), і без цього рамки в парі кінчались на різній висоті. */
.legal__content .legal-doc__link {
  height: 100%;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 16px;
  gap: 2px 16px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background: #fff;
  color: #111;
  font-size: 15px;
  line-height: 24px;
  text-decoration: none;
  transition: border-color .2s, background-color .2s;
}

/* Іконка документа й стрілка «назовні» — обидві на всю висоту картки,
   щоб не залежати від того, скільки рядків заняла назва. */
.legal__content .legal-doc__link::before,
.legal__content .legal-doc__link::after {
  content: "";
  grid-row: 1 / span 2;
  align-self: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.legal__content .legal-doc__link::before {
  grid-column: 1;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><path d='M14 3v5h5'/><path d='M9 13h6'/><path d='M9 17h4'/></svg>");
}

/* Стрілка з кутом — знак, що документ відкриється в новій вкладці
   (посилання ведуть на Google Docs, `target="_blank"`). */
.legal__content .legal-doc__link::after {
  grid-column: 3;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12 12 4'/><path d='M6 4h6v6'/></svg>");
}

/* `!important` тут вимушений: base.css має
   `.legal__content span{font-size:inherit!important}` — правило проти
   інлайнових 11pt зі вставок Word, і воно ж накривало ці два підписи.
   Перебити важливе можна тільки важливим. */
.legal__content .legal-doc__kind {
  grid-column: 2;
  grid-row: 1;
  font-size: 11px !important;
  line-height: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #999;
}

.legal__content .legal-doc__name {
  grid-column: 2;
  grid-row: 2;
  font-size: 15px !important;
  line-height: 22px;
  font-weight: 700;
  color: #111;
  /* Назви складені з косих рисок («SEA SALT\CALAMANSI\AMBER») і в
     вузькій колонці рвуться абияк — дозволяємо перенос по будь-якому
     місцю, інакше рядок вилазить за картку. */
  overflow-wrap: anywhere;
}

.legal__content .legal-doc__link:hover {
  border-color: #111;
  background: #f6f6f6;
  text-decoration: none;
}

@media (max-width: 768px) {
  /* На телефоні смуга ~383 px: дві колонки дали б по 187, у яких назва
     розлазиться на пʼять-шість рядків. Повертаємось до стовпчика. */
  .legal__content .legal-docs { grid-template-columns: minmax(0, 1fr); }
  .legal__content .legal-doc__link { padding: 12px 14px; gap: 2px 12px; }
}

/* ---------- page-partners.css ---------- */
/* §291, ЗВІРЕНО НА 1440 І 1920 — ВАД У ЦЬОМУ ФАЙЛІ НЕМАЄ.
   Сторінка партнерів у донора НЕ тече: заміряно з обох боків.
     · форма Bitrix24 — стороння, фіксована: обгортка 700×721 і поле
       638×52 ОДНАКОВІ на 1440 і 1920, тож усі px форми (15/17, поля 15,
       висота 52, радіус 4) правильні саме як сталі;
     · підпис лічильника `.counters .text` — 15/24 сталі, бокс 100.8×24 →
       163.3×24; у нас те саме число в число;
     · `.perks-text padding-left:84` — правильний: наш контент-бокс
       656−84 = 572 на 1440 і 896−84 = 812 на 1920, а донорський
       `.wrapInfo` рівно 572 і 812;
     · заголовок пункту в донора 18/30 стале.
   Не переміряти. Мобільні гілки цього файлу з порівняння випадають. */
/* ===========================================================================
 * СТОРІНКА PARTNERS (`sections/main-page-partners.liquid`)
 * ---------------------------------------------------------------------------
 * Оригінал: `section.publicOffer.pageInfoContent` у /partners/, стилі —
 * `original/site-assets/css/publicOffer.css`. Там п'ять смуг:
 *
 *   .pageTitle    заголовок з нижньою лінією
 *   b24-форма     вбудований веб-форм Bitrix24 (обгортка 700 по центру)
 *   .opt1         текст | чотири лічильники
 *   .opt2         фото 50% | заголовок + чотири переваги
 *   .sTraining8   «As for now…» + сітка логотипів мереж
 *
 * Заміряно на живому еталоні (`_pmeasure.mjs`), обидва в'юпорти. Ключові
 * опори, до яких зведена наша розкладка:
 *
 *            1440                                  415
 *   .publicOffer   y=123   h=2796.7  60/80      y=98    h=2639.8  20/40
 *   .pageTitle     y=183   h=91.3    40/50      y=118   h=51.4    18/130%
 *   форма          y=274.3 h=721                y=169.4 h=706
 *   .opt1          y=995.3 h=456.5              y=875.4 h=494
 *   .opt2          y=1451.8 h=907               y=1369.4 h=1074
 *   .sTraining8    y=2443.2 h=312.1             y=2467.7 h=205.8
 *   footer         y=2919.7                     y=2737.8
 *
 * Межа мобільної гілки — 768, як в оригіналі (не 1000: на цій сторінці всі
 * перемикання в `publicOffer.css` зроблені саме на 768).
 *
 * Розміри: там, де оригінал ставить vw без px-стелі (поля секцій,
 * відступи `.sTraining8`), лишаємо vw — інакше розійдемось вище 1536.
 * Там, де оригінал сам фіксує px у `@media (max-width:1536px)` (кеглі),
 * пишемо px: на 1440 і на 415 діє саме він.
 *
 * Іменний простір `partners-page__*` навмисно НЕ збігається зі старими
 * `.partners*` у `design.css`: там лишились правила першої версії сторінки,
 * і власні класи прибирають будь-яке перекриття без правок спільного файла.
 * =========================================================================== */

.partners-page { padding: 60px 0 80px; color: #111; }

.partners-page__title {
  margin: 0 160px;
  padding-bottom: 2.7994791667vw;
  border-bottom: 1px solid #dedede;
  font-size: 40px; line-height: 50px; font-weight: 700;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * ФОРМА ЗАЯВКИ
 *
 * В оригіналі це віджет Bitrix24; ми повторюємо його геометрію рідною
 * contact-формою Shopify. Опорні числа з еталона (1440):
 *
 *   обгортка   x=370  w=700
 *   шапка      h=159  (padding 15/5, лінія знизу)
 *     титул    fs 24 / lh 33, знизу 9
 *     контакти fs 15 / lh 17, крок рядків 32
 *   тіло       padding 14 по вертикалі
 *     поле     638×52, крок 67 (mb 15)
 *     підпис   зверху 17.5, у заповненому полі — 8 і 13 px
 *     текстове поле 638×104, після нього 18 (щоб кнопка сіла на 904.3)
 *     кнопка   обгортка 648×62 → сама кнопка 638×52
 *   підпис форми — чорна смуга 5 px за 10 px під тілом
 * ------------------------------------------------------------------------- */
/* Віджет Bitrix24 малюється СВОЇМ шрифтом, не шрифтом сайту: заміряно на
 * еталоні — `"Helvetica Neue", Helvetica, Arial, sans-serif`, заголовок 400,
 * кнопка 600. Тому обгортка форми навмисно виходить із загальної типографіки
 * теми: інакше кожен рядок форми виїжджає по ширині. */
.partners-page__form-wrap {
  width: 700px; margin: 0 auto;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.partners-page__form-head {
  padding: 15px 31px 5px;
  border-bottom: 1px solid #ededed;
  text-align: center;
}
/* §295. `letter-spacing:.6px` — донор його оголошує, ми покладались на
   успадкування (`normal`). Заміряно на живому: заголовок «Ask for details
   of cooperation» у нього з розрядкою, у нас без. Ще одна властивість, що
   міняє вигляд, не чіпаючи жодного нашого числа. */
.partners-page__form-title { font-size: 24px; line-height: 33px; font-weight: 400; letter-spacing: .6px; margin: 0 0 9px; }
.partners-page__form-desc { font-size: 15px; line-height: 17px; }
.partners-page__form-desc > * { margin: 15px 0; }
.partners-page__form-desc > :first-child { margin-top: 0; }
.partners-page__form-desc > :last-child { margin-bottom: 15px; }
.partners-page__form-desc a { color: inherit; text-decoration: underline; }

.partners-page__form { padding: 14px 31px; margin: 0; }
.partners-page__form-ok { margin: 0 0 15px; color: #111; }
.partners-page__form-err { margin: 0 0 15px; color: #e2574c; }

.partners-page__field {
  position: relative; display: block; height: 52px; margin: 0 0 15px;
  background: rgba(0, 0, 0, .04); border-radius: 4px;
}
.partners-page__field input,
.partners-page__field textarea {
  display: block; box-sizing: border-box;
  width: 100%; height: 100%;
  margin: 0; padding: 17px 12px 0;
  border: 0; border-radius: 4px; background: transparent;
  font-size: 15px; line-height: 17px; color: #111;
  resize: none;
}
.partners-page__field input:focus,
.partners-page__field textarea:focus { outline: 0; }
.partners-page__label {
  position: absolute; left: 12px; right: 12px; top: 17.5px;
  font-size: 15px; line-height: 17px; color: #6a6a6a;
  pointer-events: none; text-align: left;
  transition: top .15s ease, font-size .15s ease;
}
.partners-page__label i { color: #f00; font-style: normal; }
/* заповнене поле — підпис їде вгору й меншає, як у формі оригіналу */
.partners-page__field input:not(:placeholder-shown) ~ .partners-page__label,
.partners-page__field textarea:not(:placeholder-shown) ~ .partners-page__label,
.partners-page__field input:focus ~ .partners-page__label,
.partners-page__field textarea:focus ~ .partners-page__label { top: 8px; font-size: 13px; }
.partners-page__field input:not(:placeholder-shown),
.partners-page__field textarea:not(:placeholder-shown),
.partners-page__field input:focus,
.partners-page__field textarea:focus { padding-top: 26px; }

/* Напис про помилку поля (правка 59). Абсолютний навмисно: коробка поля має
   фіксовану висоту 52 px, і напис у потоці розсовував би форму на кожній
   помилці. Він лягає рівно в проміжок 15 px між полями, тож розкладка не
   рухається взагалі. Колір той самий, що в серверного `.partners-page__form-err`. */
.partners-page__err {
  position: absolute; left: 12px; right: 12px; top: 100%;
  font-size: 13px; line-height: 15px; color: #e2574c;
  pointer-events: none; text-align: left;
}

.partners-page__field--area { height: 104px; margin-bottom: 18px; }
.partners-page__field--area textarea { padding-top: 23px; }
.partners-page__field--area .partners-page__label { top: 23.5px; }

.partners-page__actions { margin: 0 -5px; padding: 5px; }
.partners-page__actions button {
  display: block; box-sizing: border-box; width: 100%; height: 52px;
  padding: 15px; border: 0; border-radius: 4px;
  background: #000; color: #fff;
  font-size: 15px; line-height: 22px; font-weight: 600;
  cursor: pointer;
}
.partners-page__form-sign { height: 5px; margin-top: 10px; background: #000; }

/* ---------------------------------------------------------------------------
 * .opt1 — текст ліворуч, лічильники праворуч
 * ------------------------------------------------------------------------- */
.partners-page__about {
  display: grid; grid-template-columns: 50% 50%;
  margin: 0 10.4166666667vw; padding: 80px 0;
  border-bottom: 1px solid #e8e8e8;
}
.partners-page__about-title { font-size: 40px; line-height: 50px; font-weight: 700; margin: 0 0 36px; }
.partners-page__about-body { font-size: 18px; line-height: 30px; }
.partners-page__about-body > * { margin: 0; }
.partners-page__about-stats { padding: 0 5.46875vw; }
.partners-page__stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 5.2083333333vw 1.5625vw;
  list-style: none; margin: 0; padding: 0;
}
.partners-page__stat-value {
  display: block; white-space: nowrap; font-weight: 700;
  font-size: min(5.2083333333vw, 80px);
  line-height: min(5.3385416667vw, 82px);
  margin-bottom: min(0.6510416667vw, 10px);
}
/* Підпис лічильника — ЗАВЖДИ один рядок.
 *
 * В еталоні колонки сітки виходять по вмісту й кожен підпис лишається в
 * одному рядку («Cosmetics stores» — 131.6 px у колонці 131.6). Наш Inter
 * ширший за фірмовий PCTL9600 старого сайту на 4–7%, тож при вільному
 * переносі «Cosmetics stores» ламався на два рядки й тягнув ряд лічильників
 * з 295.5 до 319.5 — а це +24 px на ВСЮ сторінку нижче (фото opt2, логотипи,
 * увесь футер). `nowrap` прибирає саме цю залежність від ширини шрифта:
 * колонки беруть ширину напису, ряд лишається 110.25, сторінка сходиться
 * по висоті з еталоном до пікселя. */
.partners-page__stat-label { display: block; font-size: 15px; line-height: 24px; font-weight: 700; white-space: nowrap; }

/* ---------------------------------------------------------------------------
 * .opt2 — фото на половину ширини, текст і переваги праворуч
 *
 * Колонки рахуються від внутрішньої ширини: `padding-right:128px` +
 * `50% 50%` дають 656 на 1440. Фото — жорсткі 875 px висоти з `cover`
 * (у діапазоні 769…1339 оригінал віддає його на 100%).
 *
 * Переваги в еталоні розкладені ПО КОЛОНКАХ (`grid-auto-flow: column`,
 * два рядки), тому порядок блоків у шаблоні — саме порядок DOM оригіналу:
 * Recognition, Loyal conditions, Marketing support, Fast delivery. На
 * мобільній гілці цей же порядок читається згори вниз одним стовпчиком.
 * ------------------------------------------------------------------------- */
.partners-page__perks { display: grid; grid-template-columns: 50% 50%; padding-right: 128px; }
.partners-page__perks-media { margin-top: 32px; }
.partners-page__perks-media img { display: block; width: 100%; height: 875px; object-fit: cover; }
@media (min-width: 769px) and (max-width: 1339px) {
  .partners-page__perks-media img { height: 100%; }
}
.partners-page__perks-text {
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  padding-left: 84px;
}
/* колонка — флекс, тож блокові діти самі по собі стискаються до вмісту;
   еталон тримає їх на всю ширину (572 на 1440, 351 на 415) */
.partners-page__perks-text > * { width: 100%; }
.partners-page__perks-title { font-size: 40px; line-height: 50px; font-weight: 700; margin: 0 0 64px; }
.partners-page__perks-intro { font-size: 18px; line-height: 30px; margin: 0; }
.partners-page__perk-list {
  display: grid; gap: 50px;
  grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  list-style: none; margin: 40px 0 0; padding: 0; width: 100%;
}
.partners-page__perk-icon {
  display: flex; align-items: center; justify-content: center;
  width: 120px; height: 120px; margin-bottom: 10px;
  background: #f5ede5; border-radius: 50%;
}
.partners-page__perk-icon img { display: block; width: 60px; height: 60px; }
.partners-page__perk-title { font-size: 18px; line-height: 30px; font-weight: 700; margin: 0 0 10px; }
.partners-page__perk-text { font-size: 18px; line-height: 30px; margin: 0; }

/* ---------------------------------------------------------------------------
 * .sTraining8 — логотипи мереж
 * ------------------------------------------------------------------------- */
.partners-page__brands { margin: 5.859375vw 0; padding: 0 8.3333333333vw; }
/* §271. Кегль і крок ТЕЧУТЬ: у донора це пара `2.0833333333vw` /
   `2.6041666667vw` з гілкою `@media ≤1536 { 32px / 40px }`. Тут стояла
   сама піксельна половина — на 1440 збігалось (32/40 в обох), на 1920
   донор давав 40/50, а ми лишались на 32/40. Заміряно на живому донорі,
   заголовок «As for now, they represent». */
.partners-page__brands-title {
  font-size: 2.0833333333vw;               /* 32 на 1536 · 40 на 1920 */
  line-height: 2.6041666667vw;             /* 40 на 1536 · 50 на 1920 */
  font-weight: 700;
  margin: 0 0 2.6041666667vw; text-align: center;
}
@media (max-width: 1536px) {
  .partners-page__brands-title { font-size: 32px; line-height: 40px; }
}
.partners-page__brand-list {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8;
  list-style: none; margin: 0; padding: 0;
}
.partners-page__brand-list li {
  display: flex; align-items: center; justify-content: center; padding: 10%;
  border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
}
.partners-page__brand-list img { display: block; width: 100%; height: auto; filter: grayscale(100%); }

/* ===========================================================================
 * МОБІЛЬНА ГІЛКА — межа 768, як в оригіналі
 * =========================================================================== */
@media (max-width: 768px) {
  .partners-page { padding: 20px 0 40px; }
  .partners-page__title { margin: 0 32px; padding-bottom: 27px; font-size: 18px; line-height: 130%; }

  .partners-page__form-wrap { width: auto; }
  .partners-page__form-head { padding: 15px 18px 5px; }
  .partners-page__form-title { font-size: 18px; line-height: 18px; }
  .partners-page__form { padding: 14px 18px; }

  .partners-page__about {
    grid-template-columns: 100%; margin: 0 32px; padding: 32px 0;
    border-bottom: 0;
  }
  .partners-page__about-text { margin-bottom: 48px; }
  .partners-page__about-title { font-size: 24px; line-height: 32px; margin-bottom: 16px; }
  .partners-page__about-body { font-size: 15px; line-height: 24px; }
  .partners-page__about-stats { padding: 0; }
  .partners-page__stats { grid-template-columns: 1fr 1fr; gap: 30px; }
  .partners-page__stat-value { font-size: 40px; line-height: 48px; margin-bottom: 8px; }

  .partners-page__perks { display: flex; flex-direction: column-reverse; padding-right: 0; }
  .partners-page__perks-media { margin-top: 0; }
  .partners-page__perks-media img { height: 388px; }
  .partners-page__perks-text { padding: 32px; }
  .partners-page__perks-title { font-size: 24px; line-height: 32px; margin-bottom: 16px; }
  .partners-page__perks-intro { font-size: 15px; line-height: 24px; }
  .partners-page__perk-list { display: flex; flex-direction: column; gap: 40px; margin-top: 30px; }
  .partners-page__perk-list li {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
    column-gap: 24px; align-items: center;
  }
  .partners-page__perk-icon {
    grid-column: 1; grid-row: 1 / 3;
    width: 80px; height: 80px; margin-bottom: 0;
  }
  .partners-page__perk-icon img { width: 48px; height: 48px; }
  .partners-page__perk-title { grid-column: 2; grid-row: 1; font-size: 15px; line-height: 24px; margin-bottom: 8px; }
  .partners-page__perk-text { grid-column: 2; grid-row: 2; font-size: 15px; line-height: 24px; }

  .partners-page__brands-title { font-size: 18px; line-height: 24px; text-transform: uppercase; }
  .partners-page__brand-list { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---------- page-stores.css ---------- */
/* ===========================================================================
 * СТОРІНКА «ДЕ КУПИТИ» (`sections/main-page-stores.liquid`)
 * ---------------------------------------------------------------------------
 * Оригінал: `section.storesList` у /partners_store/, стилі —
 * `original/site-assets/css/storesList.css`. Сторінка складається рівно з
 * двох речей: карта на всю ширину і біла панель поверх неї.
 *
 * Заміряно на живому еталоні (`_pmeasure.mjs`):
 *
 *                        1440                      415
 *   .storesList     y=123  w=1440  h=800      y=98  w=415  h=733
 *   .mapWrapper     ті самі 800                calc(100vh-167), min 420
 *   панель          x=40 y=153 342×720         fixed, x=12 y=780 391×888
 *   .titleWrap      h=78.8 (40 + 18.75 + 20)   h=64 (24 + 20 + 20)
 *   .itemsWrap      h=601.3                    h=784
 *   footer          y=923                      —
 *   висота сторінки 2422                       2394
 *
 * `1.3020833333vw` під шапкою панелі лишається vw НЕ випадково: в оригіналі
 * `.titleWrap{padding-bottom}` має px-стелю на ≤1536 (20), а
 * `.cityNameWrap{margin-top}` — тільки на ≤1000 (20). Тому на 1440 виходить
 * 20 + 18.75, і саме ця пара дає h=78.8.
 *
 * Межа мобільної гілки — 768, як в оригіналі.
 * =========================================================================== */

.stores-map { display: block; position: relative; z-index: 8; }

.stores-map__frame {
  /* Над кадром карти НІЧОГО не вішати: ні `filter`, ні елемента з
     `mix-blend-mode`. Chrome тоді не растеризує кросдоменний iframe у знімок
     на всю сторінку — карта виходить білою (у в'юпорті малюється правильно).
     Деталі й цифри — у коментарі секції. */
  position: relative; z-index: 10; width: 100%; height: 800px;
}
/* §335. Полотно Maps JS замість keyless-iframe. Висоту дає обгортка
   `.stores-map__frame`; сам вузол мусить її забрати повністю —
   контейнер нульової висоти дає у Google Maps мовчазну сіру пляму,
   і це найчастіша причина «карта не працює», яка насправді про CSS.
   Тло на час завантаження — донорський колір землі, щоб перший кадр
   не блимав білим. */
.stores-map__canvas { display: block; width: 100%; height: 100%; background: #f2f2f2; }

.stores-map__panel {
  position: absolute; left: 2.6041666667vw; top: 1.953125vw;
  width: 22.265625vw; height: calc(100% - 5.20833vw);
  display: flex; flex-direction: column;
  padding: 1.3020833333vw .6510416667vw 1.3020833333vw 1.3020833333vw;
  background: #fff; border-radius: .8463541667vw;
  box-shadow: 0 392px 110px 0 transparent, 0 251px 100px 0 rgba(0, 0, 0, .01),
              0 141px 85px 0 rgba(0, 0, 0, .03), 0 63px 63px 0 rgba(0, 0, 0, .04),
              0 16px 34px 0 rgba(0, 0, 0, .05);
  z-index: 9999;
}
@media (max-width: 1536px) {
  .stores-map__panel {
    left: 40px; top: 30px; width: 342px; height: calc(100% - 80px);
    padding: 20px 10px 20px 20px; border-radius: 13px;
  }
}

.stores-map__head { padding-bottom: 1.3020833333vw; }
@media (max-width: 1536px) { .stores-map__head { padding-bottom: 20px; } }
/* §280. Заголовок панелі тече: у донора 32/40 на 1440 і **40/50** на 1920,
   тобто пара `2.0833333333vw` / `2.6041666667vw` + `@media ≤1536 {32/40}`.
   Стояла сама піксельна половина. */
.stores-map__title { margin: 0; font-size: 2.0833333333vw; line-height: 2.6041666667vw; font-weight: 700; color: #111; }
@media (max-width: 1536px) { .stores-map__title { font-size: 32px; line-height: 40px; } }

/* Рядок «назад + назва міста» порожній до вибору міста — і саме тому шапка
   панелі в еталоні має 78.8, а не 60: порожній рядок усе одно приносить
   свій верхній відступ. */
.stores-map__crumb {
  display: flex; align-items: center;
  gap: .6510416667vw; margin-top: 1.3020833333vw;
}
@media (max-width: 1000px) { .stores-map__crumb { gap: 10px; margin-top: 20px; } }
.stores-map__crumb-name { flex: 1; font-size: 18px; line-height: 24px; font-weight: 700; color: #111; }
.stores-map__back {
  flex: none; width: 1.5625vw; height: 1.5625vw; padding: 0;
  border: 0; background: none; cursor: pointer; position: relative;
}
@media (max-width: 1000px) { .stores-map__back { width: 24px; height: 24px; } }
.stores-map__back::before {
  content: ''; position: absolute; left: 30%; top: 50%;
  width: 40%; height: 40%; margin-top: -20%;
  border-left: 2px solid #111; border-bottom: 2px solid #111;
  transform: rotate(45deg);
}
.stores-map__back[hidden] { display: none; }

/* Перемикач ринків — горизонтальний ряд чипів по країнах над списком міст.
   Палітра та сама, що в картках міста (#f4f8f8 / #dde6e8 / #111). Ряд
   прокручується вбік, смуга прокрутки схована.
   Синхронізовано з `theme/assets/sections.css` 22.09 — блок жив лише в
   зібраному файлі й губився б при наступному `build_css.py`. */
.stores-map__markets {
  display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
  margin: 0 10px 14px 0; padding-bottom: 4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.stores-map__markets::-webkit-scrollbar { display: none; }
.stores-map__markets[hidden] { display: none; }
.stores-map__market {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; cursor: pointer; white-space: nowrap;
  font-size: 14px; line-height: 18px; font-weight: 600; color: #111;
  background: #f4f8f8; border: 1px solid #f4f8f8; border-radius: 999px;
  transition: background .15s, border-color .15s, color .15s;
}
.stores-map__market:hover { background: rgba(221, 230, 232, .5); border-color: #dde6e8; }
.stores-map__market.is-active { background: #111; border-color: #111; color: #fff; }
.stores-map__market-count {
  font-size: 12px; line-height: 16px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, .06); color: #72777e;
}
.stores-map__market.is-active .stores-map__market-count { background: rgba(255, 255, 255, .22); color: #fff; }

.stores-map__scroll { overflow: auto; }
.stores-map__list {
  display: flex; flex-direction: column;
  gap: .4557291667vw; margin: 0 .6510416667vw 0 0; padding: 0; list-style: none;
}
@media (max-width: 1536px) { .stores-map__list { gap: 7px; margin-right: 10px; } }

.stores-map__item {
  flex: none;
  padding: 1.3020833333vw; cursor: pointer;
  background: #f4f8f8; border: 1px solid #f4f8f8; border-radius: .390625vw;
}
@media (max-width: 1536px) { .stores-map__item { padding: 20px; border-radius: 6px; } }
.stores-map__item:hover { background: rgba(221, 230, 232, .5); border-color: #dde6e8; }
.stores-map__item.is-active { background: #dcebeb; border-color: #dcebeb; cursor: default; }

/* §280. Назва міста й лічильник точок теж течуть: у донора 16/24 на 1440
   і **20/30** на 1920 — пара `1.0416666667vw` / `1.5625vw` з гілкою
   `@media ≤1536 {16/24}`. Це рівно той випадок, коли `font-size:16px`
   виявився НЕ успадкованим сталим кеглем body, а замороженою половиною:
   87 рядків списку міст на 1920 були на чверть дрібніші за донорські. */
.stores-map__item-title { display: block; font-size: 1.0416666667vw; line-height: 1.5625vw; font-weight: 700; color: #111; }
.stores-map__item-count { display: block; font-size: 1.0416666667vw; line-height: 1.5625vw; color: #72777e; }
@media (max-width: 1536px) {
  .stores-map__item-title,
  .stores-map__item-count { font-size: 16px; line-height: 24px; }
}

/* Картка окремої точки — інша типографіка, ніж у картки міста */
.stores-map__point-title { display: block; font-size: 13px; line-height: 1.5; font-weight: 700; color: #111; }
.stores-map__point-addr { display: block; color: #72777e; margin-bottom: 10px; }
.stores-map__point-line { display: block; font-size: 13px; line-height: 1.5; color: #72777e; margin-top: 4px; }

.stores-map__empty { margin: 0; padding: 20px 0; color: #72777e; }

/* ===========================================================================
 * МОБІЛЬНА ГІЛКА — панель стає нижнім аркушем, як в оригіналі
 * =========================================================================== */
@media (max-width: 768px) {
  .stores-map__frame { height: calc(100vh - 167px); min-height: 420px; }
  .stores-map__panel {
    position: fixed; left: 12px; top: calc(100% - 120px);
    width: calc(100% - 24px); height: calc(100% - 12px);
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, .22);
    transition: top .3s;
  }
  .stores-map__panel.is-open { top: 12px; }
  .stores-map__head { cursor: pointer; }
  .stores-map__title { font-size: 18px; line-height: 24px; text-transform: uppercase; }

  /* ПУНКТ 193 — «попап відкривається криво». ПРИЧИНА, знайдена кадром.
     Аркуш має `z-index:9999`, але лежить УСЕРЕДИНІ `stores-map`, а та —
     `position:relative;z-index:8`, тобто власний контекст накладання.
     Через це 9999 нічого не важить: назовні весь блок важить 8, і в
     розгорнутому стані (`top:12px`) заголовок із хрестиком ховався за
     шапкою (80). На кадрі 31.08 замість «OUR STORES» угорі стояла смуга
     оголошень і логотип.

     У донора ТА САМА пастка — `.storesList{position:relative;z-index:8}` —
     і він її лікує окремим правилом, яке ми не перенесли:
        @media (max-width:768px){ body.activeMap .storesList{
          position:relative; z-index:100000000000 } }
     Тобто на час роботи з картою ВЕСЬ блок піднімається над усім, разом
     із нижньою смугою. Переносимо саме це; ознака «активного» стану в нас
     не клас на body, а `.is-open` на аркуші, який ставить той самий
     скрипт, тож читаємо його через `:has`.

     Мою вчорашню спробу (опустити аркуш до 30) знято: вона не лікувала
     нічого, бо назовні блок і так важив 8, а не 9999. */
  body:has(.stores-map__panel.is-open) .stores-map { position: relative; z-index: 100000000000; }

  /* Хрестик у розгорнутому стані — `.where_find_us_wrap .titleWrap .close`
     донора: 24×24, absolute right/top 20, зʼявляється лише з `.mobActive`
     і росте на дотик (`transform:scale(1.1)`). Без нього згорнути аркуш
     можна було тільки повторним дотиком по заголовку. */
  .stores-map__close {
    position: absolute; right: 20px; top: 20px;
    width: 24px; height: 24px; padding: 0; border: 0; background: none;
    cursor: pointer; color: #111; display: none;
    transition: transform .3s;
  }
  .stores-map__close:hover { transform: scale(1.1); }
  .stores-map__panel.is-open .stores-map__close { display: block; }
  .stores-map__close svg { display: block; width: 24px; height: 24px; }
}

/* ============================================================
   КАРТКА ТОЧКИ — РЯДКИ З ІКОНКАМИ
   ------------------------------------------------------------
   В оригіналі `.infoWrap` має два останні рядки не текстом, а парою
   «іконка + значення»: `.item.phone` з `icon-phone` і `<a href="tel:">`,
   `.item.timeWork` з `icon-time`. Обидва — flex із gap 4 (заміряно на
   живій сторінці). У нас ці рядки були простим текстом: телефон не
   дзвонив із мобільного, і рядки не відрізнялись один від одного.

   Розміри іконки 20×20 — з viewBox символів оригіналу; колір той самий,
   що в тексту рядка, тож `currentColor`.
   ============================================================ */
.stores-map__point-line {
  display: flex;
  align-items: center;
  gap: 4px;
}
.stores-map__ico {
  flex: none;
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
  color: inherit;
}
/* Телефон — посилання, але виглядає як звичайний рядок картки:
   в оригіналі він теж без підкреслення й того самого кольору. */
.stores-map__point-value { color: inherit; text-decoration: none; }
.stores-map__point-line--phone a.stores-map__point-value:hover { text-decoration: underline; }

/* ===========================================================================
 * КАРТКА ТОЧКИ НА КАРТІ — `.mapWindowModal` оригіналу
 * ---------------------------------------------------------------------------
 * Правила перенесені з `/css/storesList.css` донора дослівно; змінено лише
 * предка: у нього `.storesList`, у нас корінь секції `.stores-map`. Класи
 * всередині лишились донорські (`close`, `photoWrap`, `infoWrap`, `title`,
 * `addr`, `item`, `value`) — вони узагальнені, тому кожне правило скоупиться
 * через `.stores-map .mapWindowModal`, і назовні нічого не тече.
 *
 * ЩО ТУТ ПОКАЗУЄТЬСЯ. Знімок точки має рівно ВІСІМ точок із 211 — стільки в
 * донора непорожнє поле `image` (решта, що виглядає як фото партнерів —
 * `/files/Partners/garage-dnipro.jpg` і подібні, — лежить у закоментованому
 * демо-масиві розробника й на сервері дає 404). Тим 203, що без знімка,
 * донор підставляє спільну заглушку `/assets/ignor/mapInfoModal.jpg` — вона
 * перенесена в `assets/mapInfoModal.jpg`, розмір 342×244, тобто рівно
 * ширина картки; самі знімки віддаються у 684×488, тобто ×2 під ретіну.
 * =========================================================================== */

.stores-map .mapWindowModal {
  display: none;
  position: fixed; right: calc(50% - 400px); top: 30%;
  width: 342px; overflow: hidden;
  background: #fff; border-radius: 15px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, .1);
  z-index: 9999999999;
}
.stores-map .mapWindowModal.active { display: block; }

/* ТА САМА ПАСТКА, ЩО В ПУНКТІ 193 (див. коментар вище про аркуш).
   `z-index:9999999999` у картки нічого не важить: вона лежить усередині
   `stores-map`, а та — `position:relative;z-index:8`, тобто власний контекст
   накладання, і назовні весь блок важить 8 — менше за шапку (80). Донор
   лікує це тим самим прийомом, що й для аркуша: на час роботи з картою
   піднімає ВЕСЬ блок (`body.activeMap .storesList{z-index:100000000000}`).
   Ознака «картка відкрита» в нас — клас `.active` на ній самій. */
body:has(.stores-map .mapWindowModal.active) .stores-map {
  position: relative; z-index: 100000000000;
}

.stores-map .mapWindowModal .close {
  position: absolute; right: 15px; top: 15px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; cursor: pointer;
  background: #fff; border-radius: 50%;
  transform: scale(1); transition: .3s;
}
.stores-map .mapWindowModal .close:hover { transform: scale(1.1); }
.stores-map .mapWindowModal .close .iconSvg svg { display: block; width: 24px; height: 24px; }

.stores-map .mapWindowModal .photoWrap img { display: block; width: 100%; height: auto; }

.stores-map .mapWindowModal .infoWrap { padding: 20px; }
.stores-map .mapWindowModal .infoWrap .title { font-size: 24px; line-height: 1.5; font-weight: 700; }
/* §290. `line-height` тут ОБОВ'ЯЗКОВИЙ: у донора адреса йде з `normal`
   (≈19.2 при 16px), а наша тема віддає успадковані 27.36 — це +8 px на
   кожен рядок адреси. Кегль і поле, навпаки, сталі: заміряно на 1440,
   1920 і 2200 — донор скрізь 24/36 у заголовку і 14px поля, тож обидва
   кандидати зі списку §280 виявились хибними. */
.stores-map .mapWindowModal .infoWrap .addr { color: #72777e; line-height: normal; margin-bottom: 14px; }
.stores-map .mapWindowModal .infoWrap .item {
  display: flex; align-items: center; gap: 5px; margin-top: 5px; color: #72777e;
}
.stores-map .mapWindowModal .infoWrap .item .iconSvg { width: 20px; height: 20px; }
.stores-map .mapWindowModal .infoWrap .item .iconSvg svg { display: block; width: 100%; height: 100%; }
.stores-map .mapWindowModal .infoWrap .item .value { font-size: 1.0416666667vw; line-height: 1.5625vw; }
/* Телефон у донора — звичайне посилання без власного кольору й підкреслення */
.stores-map .mapWindowModal .infoWrap .item .value a { color: inherit; text-decoration: none; }

@media (max-width: 1536px) {
  .stores-map .mapWindowModal { width: 342px; border-radius: 15px; }
  .stores-map .mapWindowModal .close { right: 15px; top: 15px; width: 40px; height: 40px; }
  .stores-map .mapWindowModal .infoWrap { padding: 20px; }
  .stores-map .mapWindowModal .infoWrap .title { font-size: 24px; }
  .stores-map .mapWindowModal .infoWrap .addr { margin-bottom: 14px; }
  .stores-map .mapWindowModal .infoWrap .item { gap: 5px; margin-top: 5px; }
  .stores-map .mapWindowModal .infoWrap .item .iconSvg { width: 20px; height: 20px; }
  .stores-map .mapWindowModal .infoWrap .item .value { font-size: 16px; line-height: 24px; }
}

@media (max-width: 768px) {
  /* На телефоні картка притискається до низу, а не до `top`. Задача 507:
     раніше вона сідала на нижню панель (62 px, `.mobile-bar`); панелі немає —
     картка стоїть на краю екрана з поправкою на домашню смугу айфона. */
  .stores-map .mapWindowModal {
    top: inherit; bottom: env(safe-area-inset-bottom, 0px); left: calc(50% - 171px);
    max-width: calc(100% - 24px); border-radius: 15px 15px 0 0;
  }
  /* `.where_find_us_wrap.hide` донора: поки картка відкрита, список
     відводиться за екран, щоб не лежав поверх неї. */
  .stores-map__panel.is-hidden { left: -9999px; }
}

@media (max-width: 400px) {
  .stores-map .mapWindowModal { left: 12px; width: calc(100% - 24px); }
}

/* ============================================================
   ПУНКТ 263 — ДОНОРСЬКИЙ ШАР КЛАСІВ
   ------------------------------------------------------------
   Каркас панелі жив у власному просторі імен `stores-map__*`, і саме тому
   8.6 px не дошукувались: ми міряли схожість двох різних верстань. Тепер на
   ті самі вузли накладено класи донора (`storesList`, `where_find_us_wrap`,
   `titleWrap`, `text city`, `cityNameWrap`, `cityName`, `close`, `itemsWrap`,
   `wrapCountry`, `mapWrapper`), а розміри задані ЙОГО значеннями.

   ЗВІДКИ ЧИСЛА. Цих класів немає в жодному з `donor-css/*.css` (перевірено
   грепом по всіх десяти файлах), тож зняті `getComputedStyle` з живого
   `/partners_store/` на 1440 і складені в `harvested.css`:

     .storesList          relative, z-index 8, 1440×800
     .where_find_us_wrap  absolute top30 left40 bottom50, 342×720, z 9999,
                          flex-column, padding 20/10/20/20, radius 13, білий,
                          пʼятишарова тінь
     .titleWrap           312×78.75, padding-bottom 20
     .text.city           312×40, 32/40, 700, #111
     .text.coraner        0×0 (другий заголовок, схований на десктопі)
     .cityNameWrap        312×0, flex, align center, gap 9.375, margin-top 18.75
     .titleWrap .close    absolute top20 right20, 24×24, transition .3s
     .itemsWrap           312×601.25
     .wrapCountry         302×8432, flex-column, gap 7
     .mapWrapper          relative, z-index 10, 1440×800

   КЛЮЧОВЕ: `margin-top:18.75` на рядку міста у донора Є навіть коли рядок
   порожній — саме тому шапка 78.75, а не 60. Минулого заходу я прибрав цей
   відступ, і це було лікування симптому: зайві пікселі давав не він, а
   ПОРОЖНІ ДІТИ рядка, які тримали власну висоту рядка. Донор має там рівно
   нуль, тож нуль і забезпечуємо — сховавши порожні вузли, а не відступ.
   ============================================================ */
.storesList { position: relative; z-index: 8; }

.where_find_us_wrap {
  /* значення вже задані вище через `.stores-map__panel`; тут лише те,
     чого в нашому наборі не було */
  overflow: hidden;
}

/* Порожній рядок міста має бути рівно 312×0, як у донора. Відступ зверху
   лишається донорський (18.75) — прибирати його не можна. */
.cityNameWrap > .cityName:empty { display: none; }
.cityNameWrap:not(:has(.cityName:not(:empty))) { line-height: 0; min-height: 0; }

/* Другий заголовок `.text.coraner` донор тримає в розмітці й ховає на
   десктопі. У нас його немає взагалі — вузол не додаємо, бо він порожній
   бокс і нічого не малює; відмінність записана в MEASUREMENTS.md. */

.titleWrap .close { position: absolute; top: 20px; right: 20px; width: 24px; height: 24px; transition: .3s; }

.wrapCountry { display: flex; flex-direction: column; gap: 7px; }
.mapWrapper { position: relative; z-index: 10; }

/* ПОШУК У ПАНЕЛІ. Типово прихований (галочка `show_search` у секції) — у донора
   блок теж є в розмітці й теж згорнутий. Числа зняті з живого донора:
   поле 15px/400, падінги 0 16px, рамка 1px #e8e8e8, радіус 2px, білий фон,
   текст #333; обгортка має нижній відступ 20px, заголовок 16px.
   vw-варіанти рахуються від 1536, як і решта файлу. */
.stores-map__search { padding: 0 0 1.3020833333vw; }
.stores-map__search-title { font-size: 1.0416666667vw; line-height: 1.3; color: #333; padding-bottom: .5208333333vw; }
.stores-map__search-input {
  width: 100%; height: 2.6041666667vw; padding: 0 1.0416666667vw;
  font: 400 .9765625vw/1 inherit; color: #333;
  background: #fff; border: 1px solid #e8e8e8; border-radius: 2px;
  appearance: none; -webkit-appearance: none;
}
.stores-map__search-input::placeholder { color: #999; }
@media (max-width: 1536px) {
  .stores-map__search { padding-bottom: 20px; }
  .stores-map__search-title { font-size: 16px; padding-bottom: 8px; }
  .stores-map__search-input { height: 40px; padding: 0 16px; font-size: 15px; }
}

/* ---------- page-vacancy.css ---------- */
/* Сторінка «Вакансії» (`templates/page.vacancy.json` +
 * `sections/main-page-vacancy.liquid`).
 *
 * Еталон — `section.vacancyWrap.pageInfoContent` старого сайту. Заміряно на
 * 1440 і 415, обидва боки, холодною сесією:
 *
 *   вузол              деск 1440                    моб 415
 *   .vacancyWrap       pad 72.19 / 120 / 75         pad 13 / 34.58 / 168
 *   .pageTitle         flex, 18/24 caps 700         те саме, 18/24
 *                      pb 40.31, mb 68.44, лінія    pb 27, mb 0, БЕЗ лінії
 *   .content           grid 240 | 720 | 240         одна колонка
 *   .filterVacancyWrap 240: селект 40 + mb 15,      прихована
 *                      список міст 16/24/16 = 111
 *   .mainVacancyWrap   порожній, padding 0 22.5     padding 0, ряд 2
 *   .sendResumeWrap    240, текст 14/16 праворуч    кнопка 100%×40, mb 24, ряд 1
 *
 * Контрольні суми еталона: `.vacancyWrap` 391.9 (деск) і 312 (моб),
 * `.content` 111 / 64, `.pageTitle` 65.3 / 67.
 *
 * СВІДОМІ ВІДХИЛЕННЯ (обидва описані в підсумку):
 *   1. Колонка фільтрів порожня. У донора там селект країн і список міст із
 *      єдиним пунктом «Warsaw» — фільтр для вакансій, яких на сторінці нема
 *      (`.mainVacancyWrap` донора порожній). Малювати селект і місто, не
 *      маючи жодної вакансії, означало б вигадати дані. Ціна — 111 px висоти
 *      колонки на деску.
 *   2. На деску колонка фільтрів донора вища за наш вміст, тож секція
 *      виходить на ~87 px нижчою. На мобілці, де фільтр прихований самим
 *      донором, висоти сходяться.
 */

/* `.page-width` з base.css звужує до 1360 і додає бокові 20 — у донора
   секція на всю ширину вікна, поля дає лише власний падінг. */
.vacancy {
  max-width: none;
  padding: 5.0130208333vw 8.3333333333vw 5.2083333333vw;
  margin-block: 0;
}

.vacancy__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 4.7526041667vw;
  padding: 0 0 2.7994791667vw;
  border-bottom: 1px solid #dedede;
}

.vacancy__title {
  margin: 0;
  font-size: 1.171875vw;
  line-height: 1.5625vw;
  font-weight: 700;
  text-transform: uppercase;
  color: #333;
}

.vacancy__intro { margin: 0 0 1.5625vw; max-width: none; }

.vacancy__grid {
  display: grid;
  grid-template-columns: 16.6666666667vw 1fr 16.6666666667vw;
}

.vacancy__main {
  padding: 0 1.5625vw;
  grid-column-start: 2;
}

.vacancy__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  max-width: none;
}

.vacancy__empty {
  margin: 0;
  color: #111;
  font-size: 0.9765625vw;
  line-height: 1.5625vw;
}

/* «Send CV» — права колонка донора: текст 14/16, притиснутий до правого краю
   й до верху. Сітковою коміркою є сам `<form>`, бо `form.posted_successfully?`
   живе тільки всередині тега `{% form %}` — інакше після відправки нічим було
   б розкрити `details`, щоб показати відповідь. Розкрита форма розтягується
   на всю ширину сітки, щоб не тулитись у 240 px. */
.vacancy__cvform {
  grid-column-start: 3;
  text-align: right;
  font-size: 0.9114583333vw;
  line-height: 1.0416666667vw;
  max-width: none;
  margin: 0;
}

.vacancy__cv > summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  padding: 3px 8px;
  color: #111;
}
.vacancy__cv > summary::-webkit-details-marker { display: none; }
.vacancy__cv > summary:hover { text-decoration: underline; }

.vacancy__cvform:has(.vacancy__cv[open]) {
  grid-column: 1 / -1;
  text-align: left;
}

.vacancy__cv .vacancy-form { max-width: 560px; margin-top: 16px; text-align: left; }

@media (max-width: 1536px) {
  .vacancy__title { font-size: 18px; line-height: 24px; }
  .vacancy__empty { font-size: 15px; line-height: 24px; }
  .vacancy__cvform { font-size: 14px; line-height: 16px; }
}

@media (max-width: 1000px) {
  .vacancy__grid { grid-template-columns: 25vw 1fr; }
  .vacancy__main { padding: 0 0 0 24px; }
  .vacancy__cvform { grid-column-start: 1; grid-row-start: 1; }
  .vacancy__main { grid-column-start: 2; }
}

@media (max-width: 768px) {
  .vacancy { padding: 13px 8.3333333333vw 168px; }
  .vacancy__head {
    margin-bottom: 0;
    padding-bottom: 27px;
    border-bottom: none;
  }
  .vacancy__grid { grid-template-columns: 100%; }
  .vacancy__cvform {
    grid-column: 1 / -1;
    grid-row-start: 1;
    text-align: center;
  }
  .vacancy__cv > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    margin-bottom: 24px;
    padding: 0;
    border: 1px solid #333;
  }
  .vacancy__main {
    grid-column: 1 / -1;
    grid-row-start: 2;
    padding: 0;
  }
}

/* Підказка під полем «посилання на резюме». Решту форми малює base.css
   (`.vacancy-form*`), тут лише новий вузол — щоб не чіпати спільний файл. */
.vacancy-form__hint { color: #767676; font-size: 12px; line-height: 16px; }

/* ---------- page-wishlist.css ---------- */
/* ============================================================
   СТОРІНКА ОБРАНОГО — ПОРТ CSS ДОНОРА
   ------------------------------------------------------------
   Звідки: eu.sistersaroma.com, /css/defence.css (це окремий файл, у
   home.css цих правил НЕМАЄ — сторінки кабінету підключають свій).
   Узяті правила кореня `.lkPage`, що стосуються саме обраного:
   відступи сторінки, сітка `content`, шапка з назвою, сітка карток.
   Одиниці донора (vw) і його зламrи (1536 / 1000 / 768) перенесені як є.

   Не переносилось: сайдбар кабінету (`.content .sidebar`), поля, кнопки
   й select2 — це решта сторінок особистого кабінету, на обраному їх нема.

   Дві правки проти оригіналу — обидві пояснені нижче на місці:
   селектори `.main .wrapCardItem` / `.main .products` у донора глобальні,
   ми їх скоупимо під `.lkPage`; і мобільна розкладка карток береться з
   його ж `.products`, бо ми не дублюємо список у два контейнери.
   ============================================================ */

/* ── 1. Каркас сторінки: правила донора, дослівно ──────────────── */

.lkPage{padding:5.0130208333vw 8.3333333333vw}
.lkPage .head{align-items:center;display:flex;gap:10px;justify-content:space-between;padding-bottom:2.0833333333vw}
@media screen and (max-width:768px){.lkPage .head{align-items:flex-start;flex-direction:column;justify-content:flex-start;padding-bottom:20px}}
.lkPage .head .title{align-items:center;display:flex;gap:4px}
.lkPage .head .title .text{color:#4d73f6;font-size:1.171875vw;font-style:normal;font-weight:700;line-height:1.3;text-transform:uppercase}
@media screen and (max-width:768px){.lkPage .head .title .text{font-size:18px}}
.lkPage .head .title .icon img{display:block;height:auto;max-width:100%}
.lkPage .head .balls{color:#111;font-size:1.171875vw;line-height:1.5625vw}
@media screen and (max-width:1536px){.lkPage .head .balls{font-size:18px;line-height:24px}}
@media screen and (max-width:768px){.lkPage .head .balls{color:#999;font-size:.9765625vw;line-height:1.5625vw}}
@media screen and (max-width:768px) and (max-width:1536px){.lkPage .head .balls{font-size:15px;line-height:24px}}
.lkPage .content{display:grid;grid-template-columns:1fr 4fr}
@media screen and (max-width:1000px){.lkPage .content{grid-template-columns:100%}}

/* ── 2. Сітка карток ────────────────────────────────────────────
   У донора селектор глобальний — `.main .wrapCardItem`. У нашій темі
   клас `main` зустрічається і в інших місцях, тож скоупимо під `.lkPage`:
   значення ті самі, зона дії вужча.
   ─────────────────────────────────────────────────────────────── */
.lkPage .main .wrapCardItem{border-left:1px solid #e8e8e8;border-top:1px solid #e8e8e8;display:grid;grid-template-columns:1fr 1fr 1fr}

/* Список — `<ul>`, тож знімаємо його типові поля й маркери. Донору це
   не було потрібно, бо в нього тут `div`. */
.lkPage .main .wrapCardItem{list-style:none;margin:0;padding:0}

/* Рамки клітинок. У донора вони на самій картці
   (`.cardItem__product{border-bottom:1px solid #e8e8e8;border-right:1px solid #e8e8e8}`),
   у нас картка — вміст `<li>`, тож рамку несе `li`. Так само зроблено
   в сітці колекції (`.collection__grid > li`), щоб обидві сітки
   лишались однією системою. */
.lkPage .main .wrapCardItem > li{border-bottom:1px solid #e8e8e8;border-right:1px solid #e8e8e8;display:flex;min-width:0}
.lkPage .main .wrapCardItem > li .product-card{width:100%}

/* ── 3. Мобільна розкладка ──────────────────────────────────────
   Донор на 768 ховає `.wrapCardItem` і показує `.products` — а в
   `.products` лежать ТІ САМІ картки. Ми список не дублюємо, тож замість
   `display:none` віддаємо єдиному контейнеру значення його ж `.products`:
     .main .products{display:flex;flex-direction:column;gap:1.0416666667vw}
     @media(max-width:1536px){.main .products{gap:16px;padding:24px 0 16px}}
   Рамки сітки на цій розкладці зайві — у `.products` їх нема.
   ─────────────────────────────────────────────────────────────── */
@media screen and (max-width:768px){
  .lkPage .main .wrapCardItem{display:flex;flex-direction:column;gap:16px;padding:24px 0 16px;border:0}
  .lkPage .main .wrapCardItem > li{border:0}
}

/* ── 4. Наше: порожній стан і кнопка «очистити» ─────────────────
   У донора порожня сторінка обраного не пише нічого — лише лінія
   верхньої рамки сітки. Ми лишаємо підпис (інакше сторінка виглядає
   як помилка завантаження), але кладемо його на всю ширину сітки,
   щоб він не став першою клітинкою з рамками.
   ─────────────────────────────────────────────────────────────── */
/* §246. Порожній стан — БЕЗ ЛІВОЇ ЛІНІЇ.
   Сама плитка повідомлення має `border:0`, але лінію малює КОНТЕЙНЕР:
   `.wrapCardItem{border-left:1px solid #e8e8e8;border-top:…}`. Через це
   зліва від тексту стояла самотня вертикальна волосина на всю висоту
   блока. Знімаємо її рівно тоді, коли в сітці лежить повідомлення, а не
   картки, — верхня лінія лишається (у донора порожня сторінка малює
   саме її й більше нічого).

   `:has()` тут обов'язковий: список наповнює браузер (`wishlist.js`
   підмінює `innerHTML`), тож жодного класу стану на сервері нема, а
   `:has()` перераховується сам після кожної підміни. */
.lkPage .main .wrapCardItem:has(> li.wishlist__empty) { border-left: 0; }

/* ПУНКТ 139 — СВІДОМО КРАЩЕ ЗА ОРИГІНАЛ (позначено в задачі).
   Було: сірий рядок 15px у першій клітинці — сторінка читалась як
   помилка завантаження. Стало: сердечко, заголовок, пояснення і кнопка
   в каталог, усе по центру на всю ширину сітки й без її рамок. */
.lkPage .main .wrapCardItem > li.wishlist__empty{
  grid-column:1 / -1;
  border:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:12px;
  padding:64px 24px 72px;
}
.wishlist__empty-icon{display:block;width:56px;height:56px;color:#dedede;margin-bottom:4px}
.wishlist__empty-icon svg{display:block;width:100%;height:100%}
.wishlist__empty-title{color:#333;font-size:24px;font-weight:700;line-height:32px}
.wishlist__empty-text{color:#999;font-size:16px;line-height:24px;max-width:42ch}
/* Кнопка — той самий рецепт, що й `.btn` донора: чорна плашка 48px,
   радіус 2, 14/16, ховер зміною прозорості. */
.wishlist__empty-cta{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:12px;min-height:48px;padding:0 32px;
  background:#111;border:1px solid #111;border-radius:2px;color:#fff;
  font-size:14px;line-height:16px;text-decoration:none;transition:.3s;
}
.wishlist__empty-cta:hover{opacity:.9;color:#fff}
@media screen and (max-width:768px){
  .lkPage .main .wrapCardItem > li.wishlist__empty{padding:48px 16px 56px}
  .wishlist__empty-icon{width:44px;height:44px}
  .wishlist__empty-title{font-size:18px;line-height:24px}
  .wishlist__empty-text{font-size:14px;line-height:20px}
}

/* Кнопка «очистити» стоїть у правому слоті шапки й носить донорський
   клас `.balls` — від нього бере колір і кегль. Лишається зняти
   браузерні стилі кнопки. */
.lkPage .head .wishlist__clear{
  border:0;
  background:none;
  padding:0;
  font-family:inherit;
  font-weight:400;
  text-decoration:underline;
  cursor:pointer;
}
.lkPage .head .wishlist__clear[hidden]{display:none}
.lkPage .head .wishlist__clear:hover{text-decoration:none}

/* Поки картки їдуть по мережі — приглушуємо, як і решта сіток теми. */
.lkPage .main .wrapCardItem.is-loading{opacity:.5}

/* ---------- pages.css ---------- */
/* Статичні сторінки: about, faq, contacts, delivery, partners, partners-store,
 * vacancy, hair-clip, certificates та юридичні.
 *
 * Файл підключається останнім (build_css.py зшиває theme-sections-css/*.css
 * у sections.css, а він іде після base.css і design.css), тож правила тут
 * перебивають спільні за порядком, без нарощування специфічності.
 */

/* ---------------------------------------------------------------------------
 * Нуль зовнішнього відступу навколо сторінки.
 *
 * base.css дає `.page,.customer,.search,.collection,.wishlist,.article,.blog
 * { margin: 40px auto }` — одним рядком на сім різних шаблонів. На сторінках
 * ці 40 px нагорі й 40 внизу відхиляються від оригіналу: там контент
 * починається РІВНО під шапкою і футер стоїть впритул. Заміряно на всіх
 * 13 парах на 1440 (`.wrapper` оригіналу → перша секція = 123.0, остання
 * секція → `footer` = 0.0 просвіту; у нас було 163.0 і 40.0).
 *
 * Ціна помилки не в самих 80 px: вони зсувають УВЕСЬ футер, а він займає
 * 1499.3 px — від 58% (partners-store) до 30% (about) висоти сторінки.
 * Смуга «ньюслетер+футер» partners-store, зрізана по власних межах кожної
 * сторони, дає 14 253 px розбіжності (0.66%); та сама смуга з нашим зсувом
 * 140.5 px — 122 650 px (5.68%). Тобто зсув коштує 108 397 px на порожньому
 * місці, у 8.6 раза більше за справжню розбіжність футера.
 *
 * Селектор навмисно вужчий за базовий: `.collection`, `.blog`, `.article`,
 * `.search`, `.customer` і `.wishlist` — чужі шаблони, їхні 40 px не чіпаємо.
 * Клас `.page` у темі носять тільки секції сторінок (main-page, -contact,
 * -delivery, -faq, -stores).
 */
.page { margin-block: 0; }

/* Сторінка «Про нас» переїхала у `theme-sections-css/page-about.css`.
   Дублювати ці правила тут НЕ можна: `pages.css` зшивається ПІЗНІШЕ за
   `page-*.css` і перебивав би їх за порядком. */

/* Лендінг hair-clip переїхав у `theme-sections-css/page-hairclip.css`:
   один шаблон — один файл, щоб правки не гинули при збірці. */

/* ---------- pdp-home.css ---------- */
/* Сторінка аромату для дому: блоки pdp-home-scent і pdp-home-rooms.
   Макет 2289:21635 (деск) і 2289:21346 (моб). Числа - пікселі макета через --u:
   100vw/1440 на деску (зі стелею 1920, як у всій темі), 100vw/390 на мобілці. */

.pdph {
  --u: calc(min(100vw, 1920px) / 1440);
  box-sizing: border-box;
  margin: 0 0 calc(120 * var(--u));
  padding: 0 calc(64 * var(--u));
  color: #161616;
}
.pdph *, .pdph *::before, .pdph *::after { box-sizing: border-box; }
.pdph :where(p, h2, h3, ul, blockquote) { margin: 0; padding: 0; }

.pdph__head { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.pdph__sub {
  font-size: calc(16 * var(--u));
  line-height: calc(24 * var(--u));
  font-weight: 400;
  color: #6c6c6c;
}
.pdph__title {
  font-size: calc(32 * var(--u));
  line-height: calc(36 * var(--u));
  letter-spacing: calc(-.5 * var(--u));
  font-weight: 700;
  color: #161616;
  text-transform: none;
}
.pdph__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Крапки каруселей: у макеті активна МЕНША за решту */
.pdph .pdph-dots {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  margin: 0;
}
.pdph .pdph-dots .embla__dot {
  flex: none;
  width: var(--dot);
  height: var(--dot);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #161616;
  opacity: 1;
  transform: none;
  cursor: pointer;
}
.pdph .pdph-dots .embla__dot.is-active { width: var(--dot-on); height: var(--dot-on); }
.pdph .pdph-dots--center {
  --dot: calc(10 * var(--u));
  --dot-on: calc(8 * var(--u));
  left: 0;
  right: 0;
  bottom: calc(23 * var(--u));
  justify-content: center;
  gap: calc(8 * var(--u));
}
.pdph .pdph-dots--corner {
  --dot: calc(8 * var(--u));
  --dot-on: calc(6 * var(--u));
  right: calc(22 * var(--u));
  bottom: calc(30 * var(--u));
  gap: calc(6 * var(--u));
}

/* ---------- Аромат ---------- */
.pdph-scent {
  display: grid;
  grid-template-columns: minmax(0, 600fr) minmax(0, 648fr);
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: calc(64 * var(--u));
}
.pdph-scent__head { grid-column: 1; grid-row: 2; }
.pdph-scent__char {
  grid-column: 1;
  grid-row: 3;
  margin-top: calc(32 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--u));
}
.pdph-scent__media { grid-column: 2; grid-row: 1 / -1; min-width: 0; align-self: center; }
.pdph-scent__media--photos { background: #fff; }
.pdph-scent--no-media { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
.pdph-scent--no-media .pdph-scent__head { grid-row: 1; }
.pdph-scent--no-media .pdph-scent__char { grid-row: 2; }

.pdph-scent__slide { flex: 0 0 100%; aspect-ratio: 648 / 760; }

.pdph-scent__about { display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.pdph-scent__char-title {
  font-size: calc(24 * var(--u));
  line-height: calc(32 * var(--u));
  font-weight: 700;
  color: #161616;
}
.pdph-scent__quote {
  max-width: calc(638 * var(--u));
  padding-left: calc(14 * var(--u));
  border-left: calc(2 * var(--u)) solid #f07fc7;
  font-size: calc(16 * var(--u));
  line-height: calc(24 * var(--u));
  font-style: normal;
  color: #1e1e1e;
  overflow-wrap: anywhere;
}
.pdph-scent__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u));
  list-style: none;
}
.pdph-scent__chip {
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border-radius: calc(8 * var(--u));
  background: #f6f6f6;
  font-size: calc(16 * var(--u));
  line-height: calc(24 * var(--u));
  color: #1e1e1e;
}

/* Картка нот: колажів у товара нема. Деск - шари tabs/content з макета, це мобільні
   розміри ×1.6615, тому дробові числа */
.pdph-notes { width: calc(531.69 * var(--u)); max-width: 100%; }
.pdph-notes__tabs {
  display: flex;
  gap: calc(6.65 * var(--u));
  margin-bottom: calc(19.94 * var(--u));
  padding: calc(6.65 * var(--u));
  border-radius: calc(16.62 * var(--u));
  background: #f6f6f6;
}
.pdph-notes__tab {
  flex: 1 1 0;
  min-width: 0;
  padding: calc(16.62 * var(--u)) calc(13.29 * var(--u));
  border: 0;
  border-radius: calc(9.97 * var(--u));
  background: transparent;
  font: inherit;
  font-size: calc(23.26 * var(--u));
  line-height: calc(33.23 * var(--u));
  color: #161616;
  cursor: pointer;
}
.pdph-notes__tab.is-active { background: #161616; color: #fff; font-weight: 700; }
.pdph-notes__slide { flex: 0 0 100%; }
.pdph-notes__card {
  display: flex;
  align-items: center;
  gap: calc(26.58 * var(--u));
  height: 100%;
  padding: calc(26.58 * var(--u));
  border-radius: calc(23.26 * var(--u));
  background: #f6f6f6;
}
.pdph-notes__badge {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(79.75 * var(--u));
  height: calc(79.75 * var(--u));
  border-radius: 999px;
  background: #fff;
  color: #161616;
}
.pdph-notes__badge svg { display: block; width: calc(33.23 * var(--u)); height: calc(33.23 * var(--u)); }
.pdph-notes__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: calc(3.32 * var(--u)); }
.pdph-notes__label {
  font-size: calc(19.94 * var(--u));
  line-height: calc(26.58 * var(--u));
  letter-spacing: calc(.33 * var(--u));
  color: #6c6c6c;
}
.pdph-notes__value {
  font-size: calc(23.26 * var(--u));
  line-height: calc(33.23 * var(--u));
  font-weight: 700;
  color: #161616;
  overflow-wrap: anywhere;
}

/* ---------- Кімнати ---------- */
.pdph-rooms { display: flex; flex-direction: column; gap: calc(32 * var(--u)); }
.pdph-rooms__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: calc(16 * var(--u));
}
.pdph-rooms__media { min-width: 0; }
.pdph-rooms__slide { position: relative; flex: 0 0 100%; aspect-ratio: 648 / 760; overflow: hidden; }
.pdph-rooms__slide::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(127 * var(--u));
  background: linear-gradient(to bottom, rgba(22, 22, 22, 0), #1e1e1e);
  pointer-events: none;
}
.pdph-rooms__caption {
  position: absolute;
  z-index: 1;
  left: calc(16 * var(--u));
  right: calc(90 * var(--u));
  bottom: calc(24 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: calc(24 * var(--u));
  font-weight: 700;
  color: #fff;
}
.pdph-rooms--no-photos .pdph-rooms__row { grid-template-columns: minmax(0, 1fr); }

.pdph-sticks { display: flex; flex-direction: column; gap: calc(24 * var(--u)); padding: calc(32 * var(--u)); }
.pdph-rooms--no-photos .pdph-sticks { padding: 0; }
.pdph-sticks__title { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.pdph-sticks__badge {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  border-radius: 999px;
  background: #fff;
  color: #161616;
}
.pdph-sticks__badge svg { display: block; width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.pdph-sticks__heading {
  min-width: 0;
  font-size: calc(24 * var(--u));
  line-height: calc(32 * var(--u));
  font-weight: 700;
  color: #161616;
}
.pdph-sticks__bar { display: flex; gap: calc(6 * var(--u)); }
.pdph-sticks__bar i { flex: 1 1 0; height: calc(10 * var(--u)); border-radius: 999px; background: #9ab0fd; }
.pdph-sticks__labels {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 calc(16 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(24 * var(--u));
  color: #6c6c6c;
}
.pdph-sticks__tip {
  padding-top: calc(24 * var(--u));
  border-top: 1px solid #dadada;
  font-size: calc(16 * var(--u));
  line-height: calc(24 * var(--u));
  color: #1e1e1e;
}

/* ---------- Відгуки: медіа за макетом 2289:21851, лише з налаштуванням v2_media_fit ---------- */
@media (min-width: 769px) {
  .sa-rev.sa-rev--media-fit .sa-rev__in {
    grid-template-columns: calc(537.33 * var(--u)) calc(712.67 * var(--u));
    column-gap: calc(126 * var(--u));
    align-items: start;
  }
  .sa-rev.sa-rev--media-fit .sa-rev__media {
    width: calc(712.67 * var(--u));
    height: calc(853 * var(--u));
    min-height: 0;
    align-self: start;
  }
  .sa-rev.sa-rev--media-fit .pdp-caption {
    justify-content: flex-end;
    min-height: calc(416 * var(--u));
    background: linear-gradient(to bottom, rgba(22, 22, 22, 0), #1e1e1e);
  }
  .sa-rev.sa-rev--media-fit .pdp-caption__title { max-width: none; }
}

/* ---------- «Sis, знайомтеся ближче»: крапки 2289:21858, активна менша ---------- */
.ig-rev--dots .ig-rev__dots {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(8 * var(--u));
  margin: calc(32 * var(--u)) 0 0;
  padding-left: calc(64 * var(--u));
}
.ig-rev--dots .ig-rev__dots .embla__dot {
  flex: none;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #161616;
  opacity: 1;
  transform: none;
  cursor: pointer;
}
.ig-rev--dots .ig-rev__dots .embla__dot.is-active { width: calc(8 * var(--u)); height: calc(8 * var(--u)); }
.ig-rev.ig-rev--dots .ig-rev__card--media::after {
  height: 37.1%;
  background: linear-gradient(to bottom, rgba(22, 22, 22, 0), #1e1e1e);
}
.ig-rev.ig-rev--dots .ig-rev__arrow,
.ig-rev.ig-rev--dots .ig-rev__arrow[disabled] { opacity: 1; color: #161616; background: #f6f6f6; }

/* ---------- Мобілка ---------- */
@media (max-width: 768px) {
  .pdph {
    --u: calc(100vw / 390);
    margin-bottom: calc(48 * var(--u));
    padding: 0 calc(16 * var(--u));
  }
  .pdph__head { gap: 0; }
  .pdph__sub { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
  .pdph__title { font-size: calc(24 * var(--u)); line-height: calc(32 * var(--u)); letter-spacing: 0; }

  .pdph .pdph-dots--center {
    --dot: calc(8 * var(--u));
    --dot-on: calc(6 * var(--u));
    bottom: calc(16 * var(--u));
    gap: calc(6 * var(--u));
  }

  .pdph-scent { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
  .pdph-scent__char { margin-top: 0; gap: calc(12 * var(--u)); }
  .pdph-scent__media--photos { margin-inline: calc(-16 * var(--u)); align-self: auto; }
  .pdph-scent__slide { aspect-ratio: 390 / 457; }

  .pdph-scent__about { gap: calc(12 * var(--u)); }
  .pdph-scent__char-title { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
  .pdph-scent__quote { max-width: none; font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); color: #1e1e1e; }
  .pdph-scent__chips { gap: calc(8 * var(--u)); }
  .pdph-scent__chip {
    padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u));
    border-radius: calc(6 * var(--u));
    font-size: calc(12 * var(--u));
    line-height: calc(16 * var(--u));
    letter-spacing: calc(.5 * var(--u));
    color: #161616;
  }

  .ig-rev--dots .ig-rev__dots { display: none; }

  .pdph-notes { width: 100%; }
  .pdph-notes__tabs {
    gap: calc(4 * var(--u));
    margin-bottom: calc(12 * var(--u));
    padding: calc(4 * var(--u));
    border-radius: calc(10 * var(--u));
  }
  .pdph-notes__tab {
    padding: calc(10 * var(--u)) calc(8 * var(--u));
    border-radius: calc(6 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: calc(20 * var(--u));
  }
  .pdph-notes__card { gap: calc(16 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(14 * var(--u)); }
  .pdph-notes__badge { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
  .pdph-notes__badge svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  .pdph-notes__text { gap: calc(2 * var(--u)); }
  .pdph-notes__label { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(.2 * var(--u)); }
  .pdph-notes__value { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }

  .pdph-rooms { gap: calc(16 * var(--u)); }
  .pdph-rooms__row { display: flex; flex-direction: column; align-items: stretch; gap: calc(16 * var(--u)); }
  .pdph-rooms__media { margin-inline: calc(-16 * var(--u)); }
  .pdph-rooms__slide { aspect-ratio: 390 / 457; }

  .pdph-sticks, .pdph-rooms--no-photos .pdph-sticks { gap: calc(12 * var(--u)); padding: 0; }
  .pdph-sticks__badge { width: calc(20 * var(--u)); height: calc(20 * var(--u)); background: none; }
  .pdph-sticks__badge svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
  .pdph-sticks__heading { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
  .pdph-sticks__bar { gap: calc(4 * var(--u)); }
  .pdph-sticks__bar i { height: calc(6 * var(--u)); }
  .pdph-sticks__labels {
    font-size: calc(12 * var(--u));
    line-height: calc(16 * var(--u));
    letter-spacing: calc(.2 * var(--u));
  }
  .pdph-sticks__tip {
    padding-top: 0;
    border-top: 0;
    font-size: calc(14 * var(--u));
    line-height: calc(20 * var(--u));
  }
}

/* ---------- pdp-lotion.css ---------- */
/* Нова сторінка товару - блоки лосьйону: «Ефект» (2289:22264) і «Шкіра до і
 * після» (2289:22296). Спільне лежить у pdp.css. */

/* ---------- ефект ---------- */
.pdp-fx {
  --k: 1;
  display: grid;
  grid-template-columns: calc(537.33 * var(--u)) calc(648 * var(--u));
  grid-template-rows: 1fr auto auto 1fr;
  justify-content: space-between;
  row-gap: calc(32 * var(--u));
}
.pdp-fx__head { grid-column: 1; grid-row: 2; }
.pdp-fx__body { grid-column: 1; grid-row: 3; display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.pdp-fx__media { grid-column: 2; grid-row: 1 / 5; position: relative; display: block; aspect-ratio: 648 / 760; border-radius: calc(14 * var(--u)); overflow: hidden; background: #f2f0eb; }
.pdp-fx__viewport { height: 100%; overflow: hidden; }
.pdp-fx__track { display: flex; height: 100%; }
.pdp-fx__slide { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; margin: 0; }
.pdp-fx__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp-fx__tag {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: calc(var(--tag-w) * var(--k) * var(--u));
  color: #955e51;
  text-transform: uppercase;
}
.pdp-fx__tag-title { font-size: calc(23.95 * var(--k) * var(--u)); line-height: calc(23.24 * var(--k) * var(--u)); font-weight: 700; }
.pdp-fx__tag-sub { margin-top: calc(4 * var(--k) * var(--u)); font-size: calc(15.5 * var(--k) * var(--u)); line-height: calc(15 * var(--k) * var(--u)); }
.pdp-fx__dots { position: absolute; left: 50%; bottom: calc(26 * var(--u)); transform: translateX(-50%); display: flex; align-items: center; gap: calc(8 * var(--u)); }
.pdp-fx__dots .embla__dot { width: calc(10 * var(--u)); height: calc(10 * var(--u)); padding: 0; border: 0; border-radius: 999px; background: #161616; opacity: .35; cursor: pointer; }
.pdp-fx__dots .embla__dot.is-active { opacity: 1; }
.pdp-fx__feel { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.pdp-fx__when { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.pdp-scale { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.pdp-scale__name { margin: 0; font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); color: #161616; }
.pdp-scale__bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(4 * var(--u)); }
.pdp-scale__seg { height: calc(6 * var(--u)); border-radius: 999px; background: #e9e9e9; }
.pdp-scale__seg.is-on { background: #9ab0fd; }
.pdp-scale__ends { display: flex; justify-content: space-between; gap: calc(8 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(0.2 * var(--u)); color: #6c6c6c; }

/* без колажу: заголовок ліворуч, шкала й чипи праворуч */
.pdp-fx--text { grid-template-rows: auto; align-items: start; grid-template-columns: calc(537.33 * var(--u)) calc(648 * var(--u)); }
.pdp-fx--text .pdp-fx__head { grid-row: 1; }
.pdp-fx--text .pdp-fx__body { grid-column: 2; grid-row: 1; }

/* ---------- до і після ---------- */
.pdp-ba {
  display: grid;
  grid-template-columns: calc(648 * var(--u)) calc(537.33 * var(--u));
  justify-content: space-between;
  align-items: center;
}
.pdp-ba__col { grid-column: 1; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.pdp-ba__head { grid-column: 2; grid-row: 1; }
.pdp-ba__frame {
  position: relative;
  aspect-ratio: 648 / 760;
  border-radius: calc(14 * var(--u));
  overflow: hidden;
  background: #c8b7a4;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}
.pdp-ba__pic { position: absolute; inset: 0; }
.pdp-ba__pic img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pdp-ba__pic--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.pdp-ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: calc(2 * var(--u)); margin-left: calc(-1 * var(--u)); background: #ffffff; pointer-events: none; }
.pdp-ba__handle {
  position: absolute;
  left: var(--pos);
  top: 50%;
  display: grid;
  place-items: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  margin: calc(-20 * var(--u)) 0 0 calc(-20 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #f6f6f6;
  color: #111111;
  cursor: ew-resize;
  touch-action: none;
}
.pdp-ba__handle svg { display: block; width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.pdp-ba__tag {
  position: absolute;
  top: calc(16 * var(--u));
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #ffffff;
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  letter-spacing: calc(0.2 * var(--u));
  color: #1e1e1e;
  pointer-events: none;
}
.pdp-ba__tag--before { left: calc(16 * var(--u)); }
.pdp-ba__tag--after { right: calc(16 * var(--u)); }
.pdp-ba__note { margin: 0; font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(0.2 * var(--u)); color: #9c9c9c; }

@media (max-width: 768px) {
  .pdp-sec.pdp-fx { --k: .6; display: block; padding: 0; }
  .pdp-sec.pdp-fx--text .pdp-fx__body { padding-top: 0; }
  .pdp-fx__head { padding: 0 calc(16 * var(--u)); margin-bottom: calc(16 * var(--u)); }
  .pdp-fx__media { width: 100%; aspect-ratio: 390 / 457; border-radius: 0; }
  .pdp-fx__body { padding: calc(16 * var(--u)) calc(16 * var(--u)) 0; gap: calc(20 * var(--u)); }
  .pdp-fx__feel { gap: calc(16 * var(--u)); }
  .pdp-fx__dots { bottom: calc(16 * var(--u)); }

  .pdp-sec.pdp-ba { display: block; }
  .pdp-ba__head { margin-bottom: calc(24 * var(--u)); }
  .pdp-ba__head .pdp-eyebrow { color: #161616; }
  .pdp-ba__col { gap: calc(12 * var(--u)); }
  .pdp-ba__frame { aspect-ratio: 358 / 521; }
}

/* ---------- pdp.css ---------- */
/* Нова сторінка товару - спільні блоки (макет Figma 2289:21905 і 2289:21345).
 * Секції: pdp-facts, pdp-bundle, pdp-faq, pdp-more, вигляд v2 у product-hero,
 * reviews-video, brand-story, instagram-reviews.
 *
 * sections.css вантажиться РАНІШЕ за redesign.css, parity-pdp.css і fix-*.css,
 * тому правила v2 мають вагу section.p-hero.p-hero--v2 і перекривають ті файли
 * без правок у них. Числа - px макета через --u, як скрізь у темі. */

.pdp-sec {
  --u: calc(100vw / 1440);
  --pdp-ink: #161616;
  --pdp-mute: #6c6c6c;
  --pdp-line: #dadada;
  --pdp-soft: #f6f6f6;
  --pdp-sand: #f6f5f3;
  box-sizing: border-box;
  margin: 0 0 calc(120 * var(--u));
  padding: 0 calc(64 * var(--u));
  font-family: PCTL9600, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--pdp-ink);
}
.pdp-sec *, .pdp-sec *::before, .pdp-sec *::after { box-sizing: border-box; }
@media (min-width: 1921px) { .pdp-sec { --u: calc(1920px / 1440); } }

.pdp-head { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.pdp-eyebrow { margin: 0; font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); color: var(--pdp-mute); }
.pdp-eyebrow--sm { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
.pdp-h2 {
  margin: 0;
  font-size: calc(32 * var(--u));
  line-height: calc(36 * var(--u));
  letter-spacing: calc(-0.5 * var(--u));
  font-weight: 700;
  color: var(--pdp-ink);
  text-transform: none;
}
.pdp-h3 { margin: 0; font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); font-weight: 700; color: var(--pdp-ink); }

.pdp-chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); list-style: none; margin: 0; padding: 0; }
.pdp-chip {
  background: var(--pdp-soft, #f6f6f6);
  border-radius: calc(6 * var(--u));
  padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(24 * var(--u));
  color: #1e1e1e;
}
.pdp-chip--sm { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(0.5 * var(--u)); }
.pdp-rule { width: 100%; height: 1px; border: 0; margin: 0; background: var(--pdp-line); }

/* ---------- факти ---------- */
.pdp-facts__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(20 * var(--u)) calc(16 * var(--u));
  list-style: none;
  margin: 0;
  padding: 0;
}
.pdp-facts__item { display: flex; flex-direction: column; gap: calc(12 * var(--u)); min-width: 0; }
.pdp-facts__ic {
  display: grid;
  place-items: center;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  border-radius: 999px;
  background: #e0e7ff;
  color: var(--pdp-ink);
  flex: none;
}
.pdp-facts__ic svg, .pdp-facts__ic img { display: block; width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.pdp-facts__text { display: flex; flex-direction: column; gap: calc(2 * var(--u)); min-width: 0; }
.pdp-facts__title { font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); font-weight: 700; color: var(--pdp-ink); overflow-wrap: anywhere; }
.pdp-facts__sub { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); color: var(--pdp-mute); overflow-wrap: anywhere; }

/* ---------- картка ---------- */
.pdp-card { display: flex; flex-direction: column; gap: calc(6 * var(--u)); min-width: 0; height: 100%; }
.pdp-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: calc(12 * var(--u));
  overflow: hidden;
  background: #ffffff;
}
.pdp-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp-card__flag {
  position: absolute;
  left: calc(8 * var(--u));
  top: calc(8 * var(--u));
  background: #ffffff;
  border-radius: calc(6 * var(--u));
  padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u));
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  letter-spacing: calc(0.5 * var(--u));
  color: #1e1e1e;
}
.pdp-card__flag--inline { display: none; position: static; background: var(--pdp-soft); }
.pdp-card__info { display: flex; flex-direction: column; gap: calc(2 * var(--u)); padding: calc(2 * var(--u)) calc(8 * var(--u)) 0; flex: 1 1 auto; min-height: calc(72 * var(--u)); }
.pdp-card__label-row { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.pdp-card__label { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); color: var(--pdp-mute); }
.pdp-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: calc(16 * var(--u));
  line-height: calc(24 * var(--u));
  font-weight: 700;
  color: var(--pdp-ink);
  text-decoration: none;
}
.pdp-card__desc { display: none; margin: 0; }
.pdp-card__buy { display: flex; align-items: center; min-height: calc(48 * var(--u)); justify-content: space-between; gap: calc(8 * var(--u)); padding: 0 calc(8 * var(--u)); }
.pdp-card__price { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.pdp-card__now { font-size: calc(24 * var(--u)); line-height: calc(32 * var(--u)); font-weight: 700; color: var(--pdp-ink); white-space: nowrap; }
.pdp-card__was { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); color: #b4b4b4; white-space: nowrap; }
.pdp-card__add {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #000000;
  color: #ffffff;
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease;
}
.pdp-card__add svg { display: block; width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.pdp-card__add-bag, .pdp-card__add-ok { grid-area: 1 / 1; transition: opacity .18s ease; }
.pdp-card__add-ok { opacity: 0; }
.pdp-card__add.is-added .pdp-card__add-bag { opacity: 0; }
.pdp-card__add.is-added .pdp-card__add-ok { opacity: 1; }
.pdp-card__add.is-busy { opacity: .6; pointer-events: none; }
.pdp-card__add[disabled] { opacity: .35; cursor: not-allowed; }
@media (hover: hover) { .pdp-card__add:not([disabled]):hover { transform: scale(1.06); } }

/* ---------- ритуал ---------- */
.pdp-bundle .pdp-head { margin-bottom: calc(32 * var(--u)); }
.pdp-bundle__body { display: flex; flex-direction: column; gap: calc(32 * var(--u)); }
.pdp-bundle__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(16 * var(--u)); }
.pdp-bundle__bar {
  display: flex;
  align-items: center;
  gap: calc(32 * var(--u));
  padding: calc(24 * var(--u));
  border-radius: calc(14 * var(--u));
  background: var(--pdp-sand);
}
.pdp-bundle__gift { display: flex; align-items: center; gap: calc(12 * var(--u)); flex: 1 1 0; min-width: 0; }
.pdp-bundle__gift-pics { display: flex; flex: none; }
.pdp-bundle__gift--many .pdp-bundle__gift-pic { box-shadow: 0 0 0 calc(2 * var(--u)) var(--pdp-sand); }
.pdp-bundle__gift--many .pdp-bundle__gift-pic + .pdp-bundle__gift-pic { margin-left: calc(-20 * var(--u)); }
.pdp-bundle__gift-pic {
  flex: none;
  width: calc(40 * var(--u));
  height: calc(48 * var(--u));
  border-radius: calc(8 * var(--u));
  overflow: hidden;
  background: #ffffff;
}
.pdp-bundle__gift-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp-bundle__gift-text { display: flex; flex-direction: column; align-items: flex-start; gap: calc(4 * var(--u)); flex: 1 1 auto; min-width: 0; }
.pdp-bundle__gift-name {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  font-weight: 700;
}
.pdp-bundle__gift-label {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #ffffff;
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  color: #43c400;
}
.pdp-bundle__gift-label svg { display: block; width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.pdp-bundle__gift-price { flex: none; font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 700; white-space: nowrap; }
.pdp-bundle__rule { flex: none; width: 1px; align-self: stretch; margin: 0; background: var(--pdp-line); }
.pdp-bundle__sum { display: flex; align-items: center; gap: calc(32 * var(--u)); flex: none; }
.pdp-bundle__sum-text { display: flex; flex-direction: column; gap: calc(2 * var(--u)); width: calc(220 * var(--u)); }
.pdp-bundle__sum-label { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 700; }
.pdp-bundle__sum-meta { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(0.2 * var(--u)); color: var(--pdp-mute); }
.pdp-bundle__sum-value { font-size: calc(24 * var(--u)); line-height: calc(24 * var(--u)); font-weight: 700; white-space: nowrap; }
.pdp-bundle__btn {
  flex: none;
  width: calc(316 * var(--u));
  height: calc(48 * var(--u));
  padding: 0 calc(24 * var(--u));
  border: 0;
  border-radius: calc(10 * var(--u));
  background: #111111;
  color: #ffffff;
  font: inherit;
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  font-weight: 600;
  letter-spacing: calc(0.5 * var(--u));
  cursor: pointer;
  transition: filter .18s ease, opacity .18s ease;
}
.pdp-bundle__btn.is-busy { opacity: .6; }
.pdp-bundle__btn-m { display: none; }
@media (hover: hover) { .pdp-bundle__btn:not([disabled]):hover { filter: brightness(1.2); } }

/* ---------- часті питання ---------- */
.pdp-faq { display: grid; grid-template-columns: calc(424 * var(--u)) minmax(0, 1fr); column-gap: calc(112 * var(--u)); align-items: start; }
.pdp-faq__head { display: flex; flex-direction: column; gap: calc(24 * var(--u)); }
.pdp-faq__lead { margin: 0; font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); color: var(--pdp-mute); }
.pdp-faq .pdp-h2 { color: #111111; }
.pdp-acc { border-bottom: 1px solid var(--pdp-line); }
.pdp-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  width: 100%;
  padding: calc(20 * var(--u)) 0;
  border: 0;
  background: none;
  color: #111111;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pdp-acc__title { font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); font-weight: 700; }
.pdp-acc__sign { position: relative; flex: none; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 999px; background: var(--pdp-soft); }
.pdp-acc__sign::before, .pdp-acc__sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #111111;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .2s ease;
}
.pdp-acc__sign::before { width: calc(12 * var(--u)); height: calc(1.6 * var(--u)); }
.pdp-acc__sign::after { width: calc(1.6 * var(--u)); height: calc(12 * var(--u)); }
.pdp-acc.is-open .pdp-acc__sign::after { transform: translate(-50%, -50%) scaleY(0); }
.pdp-acc.is-open .pdp-acc__head { border-bottom: 1px solid var(--pdp-line); }
.pdp-acc__body { overflow: hidden; }
.pdp-acc__body[hidden] { display: none; }
.pdp-acc__body p { margin: 0; padding: calc(23 * var(--u)) 0 calc(16 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); color: #292929; }

/* ---------- ще з лінійки ---------- */
.pdp-more .pdp-head { margin-bottom: calc(32 * var(--u)); }
.pdp-more__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(16 * var(--u)); }

/* ---------- МОБІЛКА ---------- */
@media (max-width: 768px) {
  .pdp-sec { --u: calc(100vw / 390); margin-bottom: calc(48 * var(--u)); padding: 0 calc(16 * var(--u)); }

  .pdp-eyebrow { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
  .pdp-head { gap: 0; }
  .pdp-h2 { font-size: calc(24 * var(--u)); line-height: calc(32 * var(--u)); letter-spacing: 0; }
  .pdp-h3 { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
  .pdp-chip { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(0.5 * var(--u)); }

  .pdp-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp-facts__ic { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
  .pdp-facts__ic svg, .pdp-facts__ic img { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
  .pdp-facts__title { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
  .pdp-facts__sub { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(0.2 * var(--u)); }

  .pdp-bundle .pdp-head { margin-bottom: calc(16 * var(--u)); }
  .pdp-bundle__body { gap: calc(16 * var(--u)); }
  .pdp-bundle__cards {
    display: block;
    padding: calc(4 * var(--u)) calc(16 * var(--u));
    border: 1px solid var(--pdp-line);
    border-radius: calc(14 * var(--u));
    background: #ffffff;
  }
  .pdp-bundle .pdp-card {
    display: grid;
    grid-template-columns: calc(64 * var(--u)) minmax(0, 1fr) calc(40 * var(--u));
    grid-template-areas: "pic info add" "pic buy add";
    grid-template-rows: auto auto;
    column-gap: calc(12 * var(--u));
    row-gap: 0;
    align-items: start;
    height: auto;
    padding: calc(12 * var(--u)) 0;
  }
  .pdp-bundle .pdp-card + .pdp-card { border-top: 1px solid var(--pdp-line); }
  .pdp-bundle .pdp-card__media { grid-area: pic; width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: calc(10 * var(--u)); }
  .pdp-bundle .pdp-card__media .pdp-card__flag { display: none; }
  .pdp-bundle .pdp-card__flag--inline { display: inline-block; }
  .pdp-bundle .pdp-card__info { grid-area: info; gap: calc(2 * var(--u)); padding: 0; min-height: 0; }
  .pdp-bundle .pdp-card__label { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(0.2 * var(--u)); }
  .pdp-bundle .pdp-card__title { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
  .pdp-bundle .pdp-card__buy { display: contents; }
  .pdp-bundle .pdp-card__price { grid-area: buy; flex-direction: row; align-items: baseline; gap: calc(6 * var(--u)); margin-top: calc(2 * var(--u)); }
  .pdp-bundle .pdp-card__now { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
  .pdp-bundle .pdp-card__was { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); }
  .pdp-bundle .pdp-card__add { grid-area: add; align-self: center; }

  .pdp-card__add { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
  .pdp-card__add svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

  .pdp-bundle__bar { flex-direction: column; align-items: stretch; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)); }
  .pdp-bundle__gift { flex: none; align-items: flex-end; }
  .pdp-bundle__gift-label { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(0.2 * var(--u)); }
  .pdp-bundle__rule { width: auto; height: 1px; align-self: stretch; }
  .pdp-bundle__sum { justify-content: space-between; gap: calc(12 * var(--u)); }
  .pdp-bundle__sum-text { width: auto; min-width: 0; }
  .pdp-bundle__btn { width: 100%; }
  .pdp-bundle__btn-d { display: none; }
  .pdp-bundle__btn-m { display: inline; }

  .pdp-faq { display: block; }
  .pdp-faq__lead { display: none; }
  .pdp-faq__head { margin-bottom: calc(16 * var(--u)); }
  .pdp-acc__head { padding: calc(12 * var(--u)) 0; }
  .pdp-acc.is-open .pdp-acc__head { border-bottom: 0; }
  .pdp-acc__body p { padding: 0 0 calc(16 * var(--u)); }

  .pdp-more .pdp-head { margin-bottom: calc(16 * var(--u)); }
  .pdp-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(24 * var(--u)) calc(8 * var(--u)); }
  .pdp-more .pdp-card { gap: calc(8 * var(--u)); }
  .pdp-more .pdp-card__buy { margin-top: calc(8 * var(--u)); min-height: calc(40 * var(--u)); }
  .pdp-more .pdp-card__media { aspect-ratio: 175 / 166; }
  .pdp-more .pdp-card__label { display: none; }
  .pdp-more .pdp-card__info { gap: calc(4 * var(--u)); min-height: calc(92 * var(--u)); padding-top: calc(2 * var(--u)); }
  .pdp-more .pdp-card__title { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
  .pdp-more .pdp-card__desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: calc(12 * var(--u));
    line-height: calc(16 * var(--u));
    letter-spacing: calc(0.2 * var(--u));
    color: var(--pdp-mute);
  }
  .pdp-more .pdp-card__now { font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); }
}

/* ---------- ХІРО v2 ---------- */
section.p-hero.p-hero--v2 { padding-bottom: calc(120 * var(--u)); column-gap: calc(127 * var(--u)); grid-template-columns: calc(712 * var(--u)) calc(537 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__dots { align-items: center; }
section.p-hero.p-hero--v2 .p-hero__dot { width: calc(8 * var(--u)); height: calc(8 * var(--u)); background: #161616; -webkit-backdrop-filter: none; backdrop-filter: none; }
section.p-hero.p-hero--v2 .p-hero__dot.is-active { width: calc(10 * var(--u)); height: calc(10 * var(--u)); background: #161616; }
section.p-hero.p-hero--v2 .p-hero__crumbs { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(0.2 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__crumbs .breadcrumbs > span:not([aria-current]) { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__crumbs + .p-hero__form { margin-top: calc(24 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__form > * + * { margin-top: 0; }
section.p-hero.p-hero--v2 .p-hero__form { gap: 0; }
section.p-hero.p-hero--v2 .p-hero__details { gap: calc(8 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__top { gap: calc(12 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__head { gap: calc(8 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__meta { min-height: calc(20 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__category { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(0.2 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__rating { gap: calc(5 * var(--u)); margin-top: 0; }
section.p-hero.p-hero--v2 .p-hero__rating-value { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__rating-count { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(0.2 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__title { font-size: calc(24 * var(--u)); line-height: calc(24 * var(--u)); letter-spacing: 0; }
section.p-hero.p-hero--v2 .p-hero__tag { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(0.5 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__desc { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__opts { margin-top: calc(12 * var(--u)); min-height: calc(40 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: calc(20 * var(--u)); width: calc(358 * var(--u)); max-width: 100%; }
section.p-hero.p-hero--v2 .p-hero__form { position: relative; }
section.p-hero.p-hero--v2 .p-hero__opts--solo { position: absolute; right: 0; top: calc(22 * var(--u)); width: auto; min-height: 0; margin: 0; }
section.p-hero.p-hero--v2 .p-hero__form:has(.p-hero__opts--solo) .p-hero__title { padding-right: calc(48 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__opts-chips { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--u)); min-width: 0; }
section.p-hero.p-hero--v2 .p-hero__promo { margin: 0; }
section.p-hero.p-hero--v2 .p-hero__promo span { display: inline-flex; align-items: center; height: calc(32 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(6 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 700; }
section.p-hero.p-hero--v2 .p-hero__volchip { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--hero-soft); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); color: var(--hero-ink-2); white-space: nowrap; }
section.p-hero.p-hero--v2 .p-hero__volchip-ic { display: block; width: calc(16 * var(--u)); height: calc(16 * var(--u)); flex: none; }
section.p-hero.p-hero--v2 .p-hero__volchip-ic svg { display: block; width: 100%; height: 100%; }

.p-hero__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); }
.p-hero__tile,
.p-hero__chip.p-hero__tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(2 * var(--u));
  min-width: 0;
  padding: calc(12 * var(--u));
  border: 1px solid #b4b4b4;
  border-radius: calc(10 * var(--u));
  background: var(--hero-soft, #f6f6f6);
  box-shadow: none;
  color: #161616;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s ease;
}
.p-hero__tile.is-on,
.p-hero__chip.p-hero__tile.is-on { border-color: #161616; box-shadow: none; cursor: default; }
.p-hero__tile.is-off { opacity: .45; text-decoration: none; }
.p-hero__tile-name { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
.p-hero__tile.is-on .p-hero__tile-name { font-weight: 700; }
.p-hero__tile-note { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(0.2 * var(--u)); color: #6c6c6c; }
.p-hero__tile-price { margin-top: auto; font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 700; color: #161616; }
.p-hero__tile-price s { font-weight: 400; color: #b4b4b4; }
@media (hover: hover) { a.p-hero__tile:hover { border-color: #161616; } }

section.p-hero.p-hero--v2 .p-hero__tiles { margin-top: calc(12 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__buy { display: flex; }
section.p-hero.p-hero--v2 .p-hero__buy .p-hero__atc { flex: 1 1 100%; width: 100%; max-width: none; }
section.p-hero.p-hero--v2 .p-hero__price-row--tiles { display: none; }
section.p-hero.p-hero--v2 .p-hero__price-row { min-height: 0; }
section.p-hero.p-hero--v2 .p-hero__pricing { margin-top: calc(24 * var(--u)); gap: calc(12 * var(--u)); order: 3; }
section.p-hero.p-hero--v2 .p-hero__atc { min-height: calc(48 * var(--u)); height: calc(48 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__benefits {
  order: 4;
  margin-top: calc(24 * var(--u));
  grid-template-columns: minmax(0, 1fr) calc(80 * var(--u));
  gap: calc(10 * var(--u));
}
section.p-hero.p-hero--v2 .p-hero__perks {
  grid-template-columns: 1fr;
  gap: calc(16 * var(--u));
  padding: calc(16 * var(--u));
  border-radius: calc(14 * var(--u));
}
section.p-hero.p-hero--v2 .p-hero__perk { min-height: calc(20 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); letter-spacing: 0; max-width: calc(235 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__perk-more { width: calc(28 * var(--u)); height: calc(28 * var(--u)); margin: 0; }
section.p-hero.p-hero--v2 .p-hero__pays {
  grid-template-columns: calc(32 * var(--u));
  gap: calc(2.6 * var(--u));
  padding: calc(16 * var(--u)) calc(14 * var(--u));
  align-content: space-between;
  justify-content: center;
  border-radius: calc(14 * var(--u));
}
section.p-hero.p-hero--v2 .p-hero__pay { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__pay svg { width: 100%; height: 100%; display: block; }
section.p-hero.p-hero--v2 .p-hero__delivery { order: 5; margin-top: calc(24 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__accs { margin-top: calc(24 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__acc-head { padding: calc(12 * var(--u)) 0; }
section.p-hero.p-hero--v2 .p-hero__acc.is-open .p-hero__acc-head { border-bottom: 1px solid var(--hero-line); }
section.p-hero.p-hero--v2 .p-hero__acc-body { padding-top: calc(23 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__acc-body .rte p { margin: 0 0 calc(8 * var(--u)); }
section.p-hero.p-hero--v2 .p-hero__acc-body .rte p:last-child { margin-bottom: 0; }
section.p-hero.p-hero--v2 .p-hero__acc-sign::before,
section.p-hero.p-hero--v2 .p-hero__acc-sign::after { background: #111111; }

@media (max-width: 768px) {
  section.p-hero.p-hero--v2 { padding-bottom: calc(48 * var(--u)); }
  section.p-hero.p-hero--v2 .p-hero__col { margin-top: calc(24 * var(--u)); padding: 0 calc(16 * var(--u)); }
  section.p-hero.p-hero--v2 .p-hero__crumbs.p-hero__crumbs--top { padding: 0 calc(16 * var(--u)) calc(16 * var(--u)); }
  section.p-hero.p-hero--v2 .p-hero__crumbs + .p-hero__form { margin-top: 0; }
  section.p-hero.p-hero--v2 .p-hero__opts { width: 100%; }
  section.p-hero.p-hero--v2 .p-hero__opts--solo { width: auto; }
  .p-hero__tiles {
    display: flex;
    gap: calc(8 * var(--u));
    margin-right: calc(-16 * var(--u));
    padding-right: calc(16 * var(--u));
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .p-hero__tiles::-webkit-scrollbar { display: none; }
  .p-hero__tile, .p-hero__chip.p-hero__tile { flex: 0 0 calc(150 * var(--u)); }
  section.p-hero.p-hero--v2 .p-hero__benefits { grid-template-columns: calc(267 * var(--u)) calc(80 * var(--u)); gap: calc(11 * var(--u)); margin-top: calc(24 * var(--u)); }
  section.p-hero.p-hero--v2 .p-hero__sticky { height: calc(var(--hero-sticky-h) + env(safe-area-inset-bottom, 0px)); padding: calc(12 * var(--u)) calc(16 * var(--u)); padding-bottom: calc(12 * var(--u) + env(safe-area-inset-bottom, 0px)); box-shadow: none; border-top: 1px solid #dadada; }
  section.p-hero.p-hero--v2 .p-hero__sticky { display: flex; align-items: center; gap: calc(8 * var(--u)); }
  section.p-hero.p-hero--v2 .p-hero__sticky[hidden] { display: none; }
  section.p-hero.p-hero--v2 .p-hero__sticky-wish { flex: none; }
  section.p-hero.p-hero--v2 .p-hero__sticky-atc { flex: 1 1 auto; min-width: 0; height: calc(48 * var(--u)); border-radius: calc(10 * var(--u)); }
}

/* ---------- ВІДГУКИ v2 ---------- */
.sa-rev.sa-rev--v2 { --rev-fill: #9ab0fd; --rev-star: #ffe540; --rev-link: #161616; }
.sa-rev--v2 .sa-rev__in { grid-template-columns: calc(537.33 * var(--u)) calc(696 * var(--u)); column-gap: calc(142.67 * var(--u)); padding-left: calc(64 * var(--u)); align-items: start; }
.sa-rev--v2 .sa-rev__col { gap: calc(32 * var(--u)); }
.sa-rev--v2 .sa-rev__head { gap: calc(32 * var(--u)); }
.sa-rev--v2 .sa-rev__title { text-align: center; font-size: calc(32 * var(--u)); line-height: calc(36 * var(--u)); letter-spacing: calc(-0.5 * var(--u)); }
.sa-rev--v2 .sa-rev__score { font-size: calc(24 * var(--u)); line-height: calc(24 * var(--u)); font-weight: 700; color: #111111; }
.sa-rev--v2 .sa-rev__media { width: calc(696 * var(--u)); height: calc(857 * var(--u)); }
.sa-rev--v2 .sa-rev__bars { gap: calc(8 * var(--u)); }
.sa-rev--v2 .sa-rev__bar-row { height: calc(24 * var(--u)); min-height: calc(24 * var(--u)); }
.sa-rev--v2 .sa-rev__write { height: calc(48 * var(--u)); min-height: calc(48 * var(--u)); }
.sa-rev--v2 .sa-rev__text { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
.sa-rev--v2 .sa-rev__sort { display: none; }
.sa-rev--v2 .sa-rev__body { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.sa-rev--v2 .sa-rev__chips { order: 0; display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.sa-rev--v2 .sa-rev__chips-title { margin: 0; font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 700; color: #161616; }
.sa-rev--v2 .pdp-chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.sa-rev--v2 .pdp-chip { background: #f6f6f6; border-radius: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(0.5 * var(--u)); color: #1e1e1e; }
.sa-rev--v2 .sa-rev__list { order: 1; gap: calc(16 * var(--u)); }
.sa-rev--v2 .sa-rev__author { font-weight: 700; color: #111111; }
.sa-rev--v2 .sa-rev__tools { order: 2; justify-content: center; margin: 0; }
.sa-rev--v2 .sa-rev__more { font-weight: 600; }
.sa-rev--v2 .sa-rev__more svg path { stroke: #161616; }
.pdp-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  padding: calc(64 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
  color: #ffffff;
  pointer-events: none;
  z-index: 1;
}
.pdp-caption__sub { font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); letter-spacing: calc(0.5 * var(--u)); }
.pdp-caption__title { max-width: calc(272 * var(--u)); font-size: calc(18 * var(--u)); line-height: calc(24 * var(--u)); font-weight: 700; }

/* ---------- БРЕНД v2 ---------- */
.bstory--v2 .bstory__in { justify-content: space-between; align-items: center; padding-right: calc(64 * var(--u)); }
.bstory--v2 .bstory__media { width: calc(599 * var(--u)); height: calc(810 * var(--u)); margin: 0; }
.bstory--v2 .bstory__slide img { width: 100%; height: 100%; object-fit: cover; }
.bstory--v2 .bstory__desc { min-height: 0; }
.bstory--v2 .bstory__tagline { max-width: none; }
.bstory--v2 .bstory__tagline, .bstory--v2 .bstory__tagline p { max-width: none; width: auto; }
@media (min-width: 769px) {
  .bstory--v2 .bstory__text { padding-top: calc(14 * var(--u)); width: calc(534 * var(--u)); }
  .bstory--v2 .bstory__tagline { margin-top: calc(24 * var(--u)); }
  .bstory--v2 .bstory__tagline, .bstory--v2 .bstory__tagline p { line-height: calc(24 * var(--u)); }
  .bstory--v2 .bstory__collage { top: calc(192.5 * var(--u)); width: calc(601 * var(--u)); height: calc(506 * var(--u)); overflow: hidden; }
  .bstory--v2 .bstory__founders { left: calc(151 * var(--u)); top: 0; width: calc(461 * var(--u)); height: calc(504 * var(--u)); }
  .bstory--v2 .bstory__sign { left: 0; top: calc(419.5 * var(--u)); }
}

/* ---------- ВІДЕО-ВІДГУКИ v2 ---------- */
.ig-rev--v2 .ig-rev__head { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); min-height: 0; margin-bottom: calc(32 * var(--u)); padding: 0 calc(64 * var(--u)); }
.ig-rev--v2 .ig-rev__title {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  font-size: calc(32 * var(--u));
  line-height: calc(36 * var(--u));
  letter-spacing: calc(-0.5 * var(--u));
  font-weight: 700;
  color: #111111;
  text-transform: none;
}
.ig-rev.ig-rev--v2 { padding-bottom: calc(120 * var(--u)); }
.ig-rev--v2 .ig-rev__slider .embla__viewport { margin-top: 0; }
.ig-rev--v2 .ig-rev__card { aspect-ratio: 426 / 639; }
.ig-rev--v2 .ig-rev__slide { flex: 0 0 calc(426 * var(--u)); max-width: calc(426 * var(--u)); }
.ig-rev--v2 .ig-rev__card--media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  top: auto;
  height: 37%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .55));
  pointer-events: none;
}
.ig-rev--v2 .ig-rev__arrows { display: flex; }
.ig-rev--v2 .ig-rev__arrow { display: block; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border: 0; border-radius: 999px; background: #f6f6f6; padding: 0; }
.ig-rev--v2 .ig-rev__arrow svg { width: 100%; height: 100%; display: block; }
.ig-rev--v2 .ig-rev__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: calc(32 * var(--u)) calc(24 * var(--u));
  color: #ffffff;
  font-size: calc(14 * var(--u));
  line-height: calc(20 * var(--u));
  font-weight: 700;
  pointer-events: none;
}

@media (max-width: 768px) {
  .sa-rev--v2 .sa-rev__in { display: flex; flex-direction: column; padding-left: 0; gap: calc(48 * var(--u)); }
  .sa-rev--v2 .sa-rev__col { order: 1; gap: calc(16 * var(--u)); padding: 0 calc(16 * var(--u)); width: 100%; }
  .sa-rev--v2 .sa-rev__head { gap: calc(16 * var(--u)); padding: 0; }
  .sa-rev--v2 .sa-rev__body { padding: 0; }
  .sa-rev--v2 .sa-rev__title { text-align: left; font-size: calc(24 * var(--u)); line-height: calc(32 * var(--u)); letter-spacing: 0; }
  .sa-rev--v2 .sa-rev__media { order: 2; width: 100%; height: calc(521 * var(--u)); }
  .bstory--v2 .bstory__in { padding-right: 0; gap: 0; }
  .bstory--v2 .bstory__content { min-height: calc(527 * var(--u)); padding-top: calc(68 * var(--u)); }
  .bstory--v2 .bstory__desc, .bstory--v2 .bstory__desc p { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
  .bstory--v2 .bstory__tagline { margin-top: calc(16 * var(--u)); max-width: calc(240 * var(--u)); }
  .bstory--v2 .bstory__tagline, .bstory--v2 .bstory__tagline p { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); }
  .bstory--v2 .bstory__sign { top: calc(383 * var(--u)); }
  .bstory--v2 .bstory__media { width: 100%; height: calc(521 * var(--u)); }
  .ig-rev.ig-rev--v2 { padding-bottom: calc(48 * var(--u)); }
  .ig-rev--v2 .ig-rev__slide { flex: 0 0 calc(266 * var(--u)); max-width: calc(266 * var(--u)); }
  .ig-rev--v2 .ig-rev__card { aspect-ratio: 266 / 399; }
  .ig-rev--v2 .ig-rev__head { padding: 0 calc(16 * var(--u)); margin-bottom: calc(16 * var(--u)); align-items: flex-start; }
  .ig-rev--v2 .ig-rev__title { font-size: calc(24 * var(--u)); line-height: calc(32 * var(--u)); letter-spacing: 0; max-width: calc(260 * var(--u)); }
  .ig-rev--v2 .ig-rev__caption { padding: calc(24 * var(--u)) calc(16 * var(--u)); }
}

/* ---------- product-card.css ---------- */
/* ================= товар — картка + блок 50/50 =================
 *
 * Еталон — стара сторінка eu.sistersaroma.com/accessories/clip-big-pink/,
 * знята на 1440. Стара верстка плинна (усе в vw від ширини вікна), тож
 * кожне число тут — це піксель еталона, поділений на 14.4:
 *
 *     14.4 px = 1vw  (1440 / 100)
 *
 * Поруч із кожним значенням у дужках стоїть той самий розмір у пікселях
 * еталона — щоб правку можна було звірити з виміром, а не з інтуїцією.
 *
 * Файл підключається після design.css (див. migrate/build_css.py), тому
 * ті самі селектори тут перебивають спільну таблицю без !important.
 */

/* ---------- секція цілком ---------- */
/* Стара `.productGeneralSlider`: падінги 13.125 / 58.125 / 40.
   Крихти лежать окремим елементом сітки: перший рядок правої колонки
   на десктопі, а на мобілці — перший блок згори, над галереєю. */
.product {
  padding: .911458vw 4.036458vw 2.777778vw;
  grid-template-rows: auto 1fr;
}
/* Десктопні крихти живуть усередині `.product__info` (пункт 169), тож слота
   в сітці їм більше не треба — падінг колонки задає сам блок info.
   Мобільний дубль ховаємо тут і показуємо у своїй гілці. */
.product__crumbs-phone { display: none; }
.product__crumbs-desk { display: block; }
.product > .product__gallery { grid-column: 1; grid-row: 1 / span 2; }
.product > .product__info { grid-column: 2; grid-row: 2; }

/* Під галереєю в оригіналі стоїть порожня смуга `productAdvantages` 19 px —
   саме вона робить ліву колонку 707 замість 688 і опускає рядок акордеонів. */
.product__gallery { padding-bottom: 1.319444vw; }

/* Кадр галереї — КВАДРАТ на всю ширину колонки: старий swiper мав жорсткі
   688×688, і без цього перший портретний кадр (1600×2100) робить колонку
   на 216 px вищою — на tulip саме через це бракувало майже цілого екрана.
   Кадрування `cover`, а не `fill`: у старій CMS у слот галереї лягала вже
   квадратна похідна (2800×2800), у нас майстер зберігає пропорцію оригіналу,
   і розтягування помітно сплющило б флакон. На квадратних майстрах
   (а це більшість) `cover` і `fill` дають той самий піксель. */
.product__gallery .product__media { aspect-ratio: 1 / 1; overflow: hidden; }
.product__gallery .product__media img,
.product__gallery .product__media video {
  display: block; width: 100%; height: 100%; object-fit: cover;
}

/* ---------- галерея ---------- */
/* В оригіналі кадр гортався ТІЛЬКИ мініатюрами: ні стрілок, ні крапок під
   кадром не було — тож і тут вони не показуються. */
.product__gallery [data-embla-prev],
.product__gallery [data-embla-next],
.product__gallery .embla__dots { display: none; }

/* Стрічка мініатюр: 59×59 з білою рамкою, відступ 22.5 від кутка кадру.
   §291: чотири декларації звідси були МЕРТВІ — їх повністю перебиває
   `product-gallery.css` (той файл іде пізніше у збірці й описує ту саму
   стрічку точніше: `left:23px`, `top:1.497396vw`, `width`, `gap:16px`).
   Заміром підтверджено: до видалення й після — 59×134, gap 16 на обох
   ширинах. Прибрано, щоб арифметичний скан класу C більше не показував
   на текст, який не виконується, і щоб ніхто не «полагодив» його в дію. */
.product__thumb { border: 2px solid #fff; }
/* активна мініатюра в оригіналі — той самий білий кант, а не темна рамка */
.product__thumb.is-active { border-color: #fff; }

/* ---------- права колонка ---------- */
/* Крихти: 16 px, активна сторінка сіра.

   §273. Стояло `1.111111vw / 1.597222vw` — тобто 16 і 23, поділені на
   14.4. Кожна половина вимагала свого лікування:

   · КЕГЕЛЬ у донора СТАЛИЙ — 16px і на 415, і на 1440, і на 1920
     (коробка посилання 43×20 на обох). `1.111111vw` давало 21.33 на 1920;
   · КРОК у донора ТЕЧЕ, але від бази 1536: його `.breadcrumbsWrap` має
     22.5 на 1440 і 30 на 1920, тобто рівно `1.5625vw` (= 24/15.36).
     `1.597222vw` (= 23/14.4) було близько на 1440 і на пів пікселя мимо,
     а на 1920 давало 30.67. `line-height:normal` теж не годиться: у
     донора зайві 2.5 px беруться від інлайн-блокових дітей, а в нашій
     пласкій розмітці їх нема, і рядок сідав на 20. */
.product__crumbs .breadcrumbs {
  margin: 0; padding: 0;
  font-size: 16px;
  line-height: 1.5625vw;                   /* 22.5 на 1440 · 30 на 1920 */
  color: #333;
}
.product__crumbs .breadcrumbs a { color: #333; text-decoration: none; }
.product__crumbs .breadcrumbs span { margin: 0 .277778vw; color: #999; }  /* 4 */
.product__crumbs .breadcrumbs > span[aria-current] { margin-left: 0; }

/* Рядок бренду: ліворуч назва бренду, праворуч серце — так було в оригіналі */
.product__brand-row {
  display: flex; align-items: center; justify-content: space-between;
  /* §291, КЛАС C + замір. Донор: gap 8 СТАЛИЙ (8→8), висота 22→26,
     верхнє поле 28.125→37.5. Було 8/14.4 і 22/14.4 — на 1920 давало
     10.67 і 29.3 замість 8 і 26. Поле вже було правильне. */
  gap: 8px;
  height: 1.3541666667vw;                  /* 22@≤1536 → 26@1920 */
  margin-top: 1.953125vw;                  /* 28.125 → 37.5, чистий vw */
}
.product__vendor {
  margin: 0; padding: 0;
  font-size: .972222vw;                    /* 14 — під висоту гліфів логотипа */
  line-height: 1.527778vw;                 /* 22 */
  /* логотип оригіналу — вузький накреслений напис завширшки 107 px;
     звичайним шрифтом та сама висота дає 121, тож підтискаємо трекінг */
  font-weight: 800; letter-spacing: -.07em;
  text-transform: uppercase; color: #111;
}
.product__wishlist {
  /* §291, КЛАС C. Донор 32×22 → 36×26 (збігається з §244). Було 32/14.4
     і 22/14.4 — на 1920 виходило 42.7×29.3. */
  width: 1.875vw; height: 1.3541666667vw;  /* 32×22 @≤1536 → 36×26 @1920 */
  padding: 0; border: 0; border-radius: 0; background: none;
  display: grid; place-items: center; color: #111;
}
/* Іконка. Оригінал бере розмір із `.btn .iconSvg{height:1.0416666667vw}` і
   зупиняє його на ≤1536 фіксованими 16 px — тобто на 1440 це рівно 16, а не
   19, які давав наш 1.319444vw. Обведення теж типове (1), у нас стояло 1.6:
   серце виглядало більшим і жирнішим за оригінальне. */
.product__wishlist .iconSvg { display: block; width: 1.0416666667vw; height: 1.0416666667vw; }
.product__wishlist .iconSvg svg { display: block; width: 100%; height: 100%; stroke-width: 1; }
/* base.css заливає активне серце через `fill:currentColor`, тобто кольором
   тексту. В оригіналі заливка інша — типовий чорний SVG-дефолт самого
   символа (`#Favorites` не має атрибута fill), а `currentColor` там працює
   лише на обведенні. Тому гасимо саме перекрашування, а не заливку. */
.product__wishlist.is-active .iconSvg svg { fill: initial; }
/* Два стани, як у донора: порожній контур і контур «у списку». */
.product__wishlist .iconSvg--on { display: none; }
.product__wishlist.is-active .iconSvg--off { display: none; }
.product__wishlist.is-active .iconSvg--on { display: block; }
.product__wishlist:hover, .product__wishlist.is-active { border: 0; color: var(--c-accent); }

@media screen and (max-width: 1536px) {
  .product__wishlist .iconSvg { width: 16px; height: 16px; }
}

/* Назва товару: 22.5/24 напівжирна великими.
   Колір — #111, а не наскрізний #333 теми: заміряно на живому донорі
   rgb(17,17,17) і на 1440, і на 415. */
.product__title {
  margin: 1.666667vw 0 0;                  /* 24 — у оригіналі 24.375, але з
                                              нього виходить 233.5 і браузер
                                              округляє рядок на піксель нижче */
  /* §279, клас B. Кегль тут СТАЛИЙ: у донора 22.5/24 і на 1440, і на
     1920, і навіть на 2200 — жодного vw. `1.5625vw` збігалося рівно на
     1440, а на 1920 роздувало H1 до 30/32.
     Знайдено лише після того, як зіставлення перестало викидати
     повторені рядки: назва товару на сторінці зустрічається двічі
     (крихти + заголовок), і детектор відкидав її як неоднозначну. */
  font-size: 22.5px; line-height: 24px;
  color: #111;
}

/* Мітка стану після назви — стара `.newLabelWrap` у `.titleWrap`:
   «Sold out» — сірий текст 16px без капсу одразу за назвою; «SALE» —
   червона плашка `.newSellLabel` (#ff5f4a, радіус 2, 4×12). На ≤1000
   титульна мітка ховається, замість неї — окрема над галереєю. */
.product__label {
  /* §296, ЗВІРЕНО НА 1440 І 1920 у стані «немає в наявності»
     (товар `clip-chocolate`, у донора `/accessories/clip-chocolate/`):
     мітка «Sold out» у донора **СТАЛА** — `.newLabelWrap` 59.5×20 і кегль 16
     на ОБОХ ширинах. Тут стояло 16/14.4 і 24/14.4, тобто на 1920 мітка
     розросталась до 79.3×26 і кегля 21.33. Третій випадок, де правильна
     правка — ПРИБРАТИ `vw`, а не перерахувати базу.
     `margin-left` тут мертвий: діє 3.9px із `product-options.css`. */
  margin-left: .694444vw;                  /* мертвий рядок, див. вище */
  font-size: 16px; line-height: 24px;      /* сталі, як у донора */
  font-weight: 400; text-transform: none; color: #999;
  vertical-align: middle;
}
.product__label--sale {
  display: inline-block; padding: .260417vw .78125vw;   /* 4 / 12 (від 1536) */
  border-radius: 2px; background: #ff5f4a; color: #fff;
  /* §291, КЛАС C — база рахувалась від 1440, а не від 1536, і то В ОДНОМУ
     правилі з падінгом, який порахований правильно. .833333×19.2 = 16,
     а в донора заміряно 15 (12@1440 → 15@1920). Правильна база 12/15.36.
     `line-height:1.3` безрозмірний, тож він виправляється сам: 15×1.3 = 19.5
     — рівно донорські 19.5. */
  font-size: .78125vw; line-height: 1.3;                /* 12@1536 → 15@1920 */
  /* ГІЛКА ОБОВʼЯЗКОВА: сама база .78125vw дає на 1440 лише 11.25, а донор
     там 12 — це пара 1.25, а не чистий vw. Спіймано власною перевіркою на
     ДВОХ ширинах уже після правки: на 1920 сходилось, на 1440 роз'їхалось. */
}
/* Мітка над галереєю (телефонний блок оригіналу): абсолютна, потоку не
   займає — `.productGeneral.phone .newLabelWrap{position:absolute;z-index:10}`.
   Поза мобілкою не існує. */
.product__label-phone { display: none; }

/* ---------- рядок «оцінка · об'єм» і промо-плашка ----------
 * Стара `.ratingInfoRow` + `.customLabel` між назвою і коротким описом.
 * Обидва рядки в колонці були відсутні, і на мобілці (де колонка йде
 * потоком, а не збоку від галереї) їхній брак зсував УСЕ нижче:
 * 34 + 11 + 20 = 65 px об'єму (37 товарів) і 24 + 25 + 16 = 65 px
 * плашки (28 товарів).
 *
 * Заміряно на живому донорі 29.08.2026 у п'яти ширинах
 * (1440 · 1350 · 900 · 700 · 415) — звідси і межі гілок:
 *
 *                       1440     1350     900      700     415
 *   .ratingInfoRow gap    17       17      18        8       8
 *              mt / mb  12.19/20.63  11.43/19.34  11/20  11/20  11/20
 *   volume item gap        3        3      10        5       5
 *   зірка                 16       16      16       15      15
 *   .ratingWrap gap       7.5     7.03      8        4       4
 *   .customLabel mb        20       20      16       16      16
 *          span pad      7.5     7.03   4/12     4/12    4/12
 *              span fs    16       16      12       12      12
 *
 * Тобто відступи рядка — vw до 1000 і фікс нижче; gap рядка — 17 фікс
 * (гілка ≤1536), 2vw у смузі 769…1000 (на 900 це рівно 18) і 8 нижче.
 */
.product__meta-row {
  display: flex; align-items: center;
  gap: 17px;                               /* фікс: гілка ≤1536 донора */
  /* Рядок є на КОЖНІЙ сторінці, часто порожній (height 0). `display:flex`
     тут не косметика: власні поля flex-контейнера не схлопуються самі з
     собою, тож 23.4375 зверху й 20.625 знизу тримають відстань «назва →
     короткий опис» = 44 і «назва → плашка» = 48.44 навіть коли всередині
     нічого нема. Так само поводиться донорська `.ratingInfoRow`. */
  margin: 1.627604vw 0 1.432292vw;         /* 23.4375 / 20.625 */
}

/* Оцінка зліва в рядку — донорська `.ratingWrap`: п'ять зірок 16×16 з
   кроком 3 і число 14/16 через 7.5 (0.520833vw: на 1350 це 7.03, як у
   донора). Малюється там, де в `reviews_cache` є самі відгуки.
   Зірки — ті самі файли старого сайту (/assets/rate_star.svg і
   rate_star_filled.svg), вкладені data-URI; часткова зірка в донора —
   окремі файли _half/_three_quarter, тут це та сама заливка, обрізана
   по ширині. */
.product__rating {
  --pr-star: url("data:image/svg+xml,%3Csvg width='16' height='15' viewBox='0 0 16 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.61328 5L9.73047 5.23438L9.98926 5.27148L14.292 5.8916L11.1816 8.90234L10.9912 9.08594L11.0361 9.34668L11.7715 13.6006L7.91699 11.5898L7.68555 11.4688L7.4541 11.5898L3.59863 13.6006L4.33398 9.34668L4.37891 9.08594L4.18848 8.90234L1.07715 5.8916L5.38086 5.27148L5.64062 5.23438L5.75684 5L7.68457 1.12207L9.61328 5Z' stroke='%23F5B400'/%3E%3C/svg%3E");
  --pr-star-on: url("data:image/svg+xml,%3Csvg width='16' height='15' viewBox='0 0 16 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.68525 0L10.061 4.77702L15.3733 5.54305L11.5293 9.26145L12.4367 14.5119L7.68525 12.033L2.93378 14.5119L3.84123 9.26145L-0.00279331 5.54305L5.30952 4.77702L7.68525 0Z' fill='%23F5B400'/%3E%3C/svg%3E");
  --pr-star-size: 16px;
  display: flex; align-items: center;
  gap: .520833vw;                          /* 7.5 */
  text-decoration: none; color: #333;
}
.product__rating-stars { display: flex; align-items: center; gap: 3px; }
.product__rating-star {
  position: relative; flex: none;
  width: var(--pr-star-size); height: var(--pr-star-size);
  background: var(--pr-star) 50% / 100% 100% no-repeat;
}
.product__rating-star::after {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0;
  width: var(--fill, 0); overflow: hidden;
  background: var(--pr-star-on) 0 0 / var(--pr-star-size) var(--pr-star-size) no-repeat;
}
.product__rating-value { font-size: 14px; line-height: 16px; color: #333; }

/* Об'єм: іконка келиха 20×20 і текст 12/10 з полями 12 — саме вони
   роблять рядок 34 заввишки, а не сам кегль. */
.product__volume { display: flex; align-items: center; gap: 3px; }
.product__volume-icon {
  flex: none; display: block; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3.33337L4.89583 16.4904C4.96942 17.0053 5.22979 17.4761 5.62842 17.8152C6.02706 18.1543 6.53675 18.3384 7.0625 18.3333H11.9808C12.5066 18.3384 13.0163 18.1543 13.4149 17.8152C13.8135 17.4761 14.0739 17.0053 14.1475 16.4904L16 3.33337' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 3.33337H17' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 10.8334C4.87092 10.5033 5.80574 10.3334 6.75 10.3334C7.69426 10.3334 8.62908 10.5033 9.5 10.8334C10.3709 11.1634 11.3057 11.3334 12.25 11.3334C13.1943 11.3334 14.1291 11.1634 15 10.8334' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% / 100% 100% no-repeat;
}
.product__volume-text { display: block; font-size: 12px; line-height: 10px; color: #333; }
.product__volume-text p { margin: 12px 0; font-size: 12px; line-height: 10px; }

/* Промо-плашка «2=3»: чорна капсула, білий жирний текст, радіус 2.
   `display:flex`, а не block: у блоці капсулу піднімає лінія тексту
   колонки (23.94) і рядок виходить 25 замість 24 донорських. */
.product__promo-label { display: flex; align-items: flex-start; margin: 25px 0 0; }
.product__promo-label span {
  display: inline-flex; align-items: center;
  padding: .520833vw;                      /* 7.5 */
  border-radius: 2px; background: #000; color: #fff;
  font-size: 16px; line-height: 16px; font-weight: 700;
}

/* Відступ до короткого опису задає ОСТАННІЙ із вставлених рядків:
   у донора це схлопнуті поля (20.625 і 19 → 20.625; 20 і 19 → 20). */
.product__info .product__meta-row + .product__description { margin-top: 1.432292vw; }   /* 20.625 */
.product__info .product__promo-label + .product__description { margin-top: 20px; }

/* Короткий опис під назвою — стара `.subTitle .description`: сам блок 15/30,
   а абзац усередині 15/24. У частини товарів короткий опис приїхав із
   тегом `<p>`, у частини — голим текстом, і в оригіналі це давало різну
   висоту рядка: тут відтворені обидва випадки. */
.product__info .product__description {
  margin: 3.055556vw 0 0;                  /* 44 */
  /* §273, клас C. Кегль ТЕЧЕ, але від бази 1536, а не 1440: у донора
     15 на 1440 і 18.75 на 1920, тобто `.9765625vw` (= 15/15.36).
     Стояло `1.041667vw` (= 15/14.4) — на 1440 ті самі 15, на 1920 вже 20.
     Власний `line-height` натомість СТАЛИЙ: у донора 30 на обох ширинах,
     а `2.083333vw` давало 40 на 1920. */
  font-size: .9765625vw;                   /* 15 на 1536 · 18.75 на 1920 */
  line-height: 30px;
  color: #333;
}
/* Крок абзацу теж тече від 1536: донор 24 на 1440 і 30 на 1920.
   `1.666667vw` (= 24/14.4) давало 32. */
.product__info .product__description p { line-height: 1.5625vw; }   /* 24 на 1536 · 30 на 1920 */
/* Заморожена половина донора. Вона тут Є (на відміну від кнопки відгуків,
   де донор лишив чистий vw): на 1440 у нього рівно 15 і 24, а не 14.06 і
   22.5. Стоїть ДО мобільної гілки, щоб на ≤1000 вигравали її 15/20. */
@media screen and (max-width: 1536px) {
  .product__info .product__description { font-size: 15px; }
  .product__info .product__description p { line-height: 24px; }
}

/* Ціна: 33.75/47.25 */
.product__info .product__price {
  margin: 2.361111vw 0 0;                  /* 34 */
  line-height: 3.28125vw;                  /* 47.25 */
  color: #333;
}
/* Ціна на акції. У донора перекреслена стоїть ОКРЕМИМ рядком НАД новою:
   `.oldPriceWrap` 14 px заввишки, кегль 14, а нова ціна тримає свій рядок
   47.25 (деск) / 50.4 (415) — разом 61.3 і 64.4. Заміряно на живому донорі
   `/aromaty-dlya-domu/refill-basil-and-black-pepper/` у 1440 і 415.
   У нас обидві ціни стояли в один ряд (`display:flex` із design.css) —
   блок виходив 51.3 / 54.4, тобто на 10 px нижчий, і перекреслена стояла
   ліворуч від нової замість того, щоб бути над нею. */
.product__info .product__price { display: block; }
.product__info .product__price s {
  display: block; margin: 0;
  height: 14px; font-size: 14px; line-height: 14px;
}

/* Кнопка купівлі на всю ширину колонки: 50 заввишки, радіус 2 */
.product__buy-row { margin: 1.041667vw 0 0; gap: 0; }   /* 15 */
/* Гарнітура кнопки — Inter, як у `.btn{font-family:Inter,sans-serif}` донора.
   Кнопки в оригіналі свідомо НЕ переведені на бренд-шрифт: на живому сайті
   «Add to basket» рендериться Inter-ом і займає 85.63 px, тоді як у нас
   PCTL9600 давав 87.02. Стек беремо той самий, щоб рендер сходився за
   побудовою, а не за збігом. */
.product__buy-row .button { font-family: Inter, sans-serif; }

/* Ціна всередині кнопки. Стара (перекреслена) з'являється лише на мобільному:
   на десктопі знижку показує блок ціни над кнопкою, і дублювати її там
   оригінал не став. */
.product__atc-price { display: inline-flex; align-items: center; gap: 6px; }
.product__atc-old { display: none; text-decoration: line-through; opacity: .6; }
@media (max-width: 1000px) {
  .product__atc-old { display: inline; }
}
.product__info .product__atc {
  /* §291, КЛАС C + замір на живій кнопці донора `.addToCardProduct`:
     висота 50 СТАЛА на 1440 і 1920 (а не «50 на 1440»), радіус 2 сталий,
     падінг 10→12.5, підпис 14/16 → 17.5/20. Було все поділене на 14.4,
     тому кнопка росла до 66.7 замість донорських 50. */
  min-height: 0; height: 50px;
  padding: 0 .6510416667vw;                /* 10 → 12.5 */
  border-radius: 2px;
  font-size: .9114583333vw; line-height: 1.0416666667vw;   /* 14/16 → 17.5/20 */
  font-weight: 400; gap: .5208333333vw;                    /* 8 → 10 */
}
/* Ціна всередині кнопки в оригіналі показана тільки на мобілці */
.product__atc-sep, .product__atc-price { display: none; }

/* Розпроданий товар. Оригінал: `.btn[disabled]{background:#e8e8e8;
   border-color:#e8e8e8;color:#999;opacity:1}` — світло-сіра плашка з сірим
   текстом. У нас кнопка глушилась напівпрозорістю чорного (темно-сіра з
   білим текстом) і світилась у діфі всією площею на кожному sold-out. */
.product__info .product__atc[disabled] {
  background: #e8e8e8; border-color: #e8e8e8; color: #999; opacity: 1;
}
/* Інлайнової підписки «Notify me» на старому сайті нема (там лише модалка
   «Report availability»): блок додавав ~130 px під кнопкою і зсував усю
   мобільну сторінку кожного sold-out товару. Ховаємо, доки не буде рішення
   про свідоме відхилення; розмітка і скрипт лишаються на місці. */
.product__info .bis { display: none; }

/* Рядок допомоги: іконка 34, під нею два рядки 16/17.

   §273, клас B. Кегль і крок у донора СТАЛІ: `.textWrap .text` і
   `.subText` дають 16px/17px і на 1440, і на 1920 (заміряно, коробка
   367×17 на обох). У нас стояло 16/14.4 і 17/14.4, тож на 1920 виходило
   21.33/22.67. Гап, поле й іконка течуть — їх не чіпаємо. */
.product__help {
  display: flex; align-items: center; gap: .520833vw;   /* 7.5 */
  margin: 1.041667vw 0 0;                               /* 15 */
  font-size: 16px; line-height: 17px;
  color: #333;
}
.product__help-icon { flex: none; display: block; width: 2.361111vw; height: 2.361111vw; }  /* 34 */
.product__help-icon svg { display: block; width: 100%; height: 100%; }
.product__help-text { display: block; }
.product__help-title { display: block; font-weight: 700; }
.product__help-sub, .product__help-sub p { display: block; margin: 0; }
.product__help a { color: #999; text-decoration: underline; }

/* ---------- рядок акордеонів і великого фото ---------- */
/* Стара `.featureProduct`: дві половини вікна, ліворуч рамка з акордеонами,
   праворуч фото 720×720 у край сторінки. */
.product__detail-row {
  display: flex; align-items: flex-start;
  width: 100%; max-width: none; margin: 0; padding: 0;
}
.product__detail-col {
  width: 50%;
  /* §282. ЧЕТВЕРТИЙ ВЗІРЕЦЬ, якого детектор не бачить у принципі: у донора
     тут пара «vw + vw з ІНШИМ коефіцієнтом», а не «vw + px». Знято
     поточково з живої сторінки (правила нема в кешованому CSS — товарна
     сторінка донора підключає власний файл):

        бокові:  >1536 → 6.8359375vw   ·  ≤1536 → 5.7291666667vw  ·  ≤1000 → 0
        нижнє:   >1921 → 3.90625vw     ·  ≤1921 → 40px            ·  ≤1000 → 0

     Перевірено на 1000/1440/1536/1537/1600/1920/1921/1922/2200 — злам
     рівно на 1536 і рівно на 1921. Стояло саме `5.729167vw` без стелі,
     тож на 1440 усе сходилось, а на 1920 поле було 110 замість 131.25 і
     колонка тексту виходила на 42.5 px ширшою за донорську. */
  padding: 0 6.8359375vw 3.90625vw;
}
/* §291, ЗВІРЕНО НА 1440 І 1920: це НАШ відступ колонки. У донора
   `.productBuyInfo` має `padding-bottom:0` на обох ширинах, пари бути не
   може. Не чіпати. */
@media screen and (max-width: 1921px) { .product__detail-col { padding-bottom: 40px; } }
@media screen and (max-width: 1536px) {
  .product__detail-col { padding-left: 5.729167vw; padding-right: 5.729167vw; }
}
.product__detail-row .product__details {
  /* gap: 0 — у оригіналі акордеони йдуть суцільним стовпчиком, а базові
     стилі теми розсовують їх на 8 px, і на товарі з чотирма акордеонами
     рамка стає на 24 px вища */
  /* 26 і 10 в оригіналі — px без vw-гілки взагалі
     (`.textInfoWrapper{padding-left:26px;padding-right:26px;border-radius:10px}`
     у корені файлу). vw збігався лише на 1440. */
  margin: 0; padding: 0 26px;
  /* `.textInfoWrapper{display:flex;flex-direction:column;justify-content:flex-start}`
     — база теми ставить сюди grid із gap:8px, і на товарі з чотирма
     акордеонами рамка ставала на 24 px вища. */
  display: flex; flex-direction: column; justify-content: flex-start; gap: 0;
  border: 1px solid #d9d9d9; border-radius: 10px;
}
/* Рядок акордеона. Роздільник у оригіналі — `border-top` з відміною на
   ПЕРШОМУ (`.slideToggleWrap:first-child{border-top:none}`), а не border-bottom
   з відміною на останньому: різниця видна, коли останній блок відкритий. */
.slideToggleWrap { border-top: 1px solid #d9d9d9; }
.slideToggleWrap:first-child { border-top: none; }

/* Шапка. Падінг vw (`.slideToggle{padding:1.3020833333vw 0}` без px-гілки),
   кегль — px: `.slideToggle .text{font-size:18px;line-height:24px}` при ≤1536.
   gap між текстом і кнопкою — .5208333333vw (7.5 на 1440). */
.slideToggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5208333333vw;
  padding: 1.302083vw 0;                   /* 18.75 */
  cursor: pointer;
}
.slideToggle .text {
  font-size: 1.171875vw; line-height: 1.5625vw;
  font-weight: 400; text-transform: none; letter-spacing: 0; color: #333;
}
@media screen and (max-width: 1536px) {
  .slideToggle .text { font-size: 18px; line-height: 24px; }
}

/* Знак +/−. Це не гліф, а дві риски по 1 px усередині квадрата 13×13:
   вертикальна `::after` (13×1, зсунута на 6 праворуч) і горизонтальна
   `::before` (1×13, зсунута на 6 вниз).

   Відкритий стан НЕ підміняє символ: уся кнопка повертається на 90°, а
   горизонтальна риска одночасно стискається в нуль від точки 7.5 px. Тобто
   від плюса лишається одна риска, і вона доїжджає до горизонталі поворотом —
   рух, якого текстовий «+»/«−» не давав узагалі. Обидва переходи по .3s. */
.buttonSlideToggle {
  display: block; position: relative;
  width: 0.8463541667vw; height: 0.8463541667vw;
  padding: 0; border: none; background: none; cursor: pointer;
  transform: rotate(0deg); transition: .3s;
  flex: none;
}
.buttonSlideToggle::before,
.buttonSlideToggle::after {
  content: ""; display: block; position: absolute;
  background: #111; transition: .3s;
}
.buttonSlideToggle::after  { top: 0; left: 0.390625vw; width: 1px; height: 0.8463541667vw; }
.buttonSlideToggle::before { top: 0.390625vw; left: 0; width: 0.8463541667vw; height: 1px; }
@media screen and (max-width: 1536px) {
  .buttonSlideToggle { width: 13px; height: 13px; }
  .buttonSlideToggle::after  { top: 0; left: 6px; width: 1px; height: 13px; }
  .buttonSlideToggle::before { top: 6px; left: 0; width: 13px; height: 1px; }
}
.slideToggleWrap.active .buttonSlideToggle { transform: rotate(90deg); }
.slideToggleWrap.active .buttonSlideToggle::before { left: 0.5208333333vw; width: 0; }

/* Тіло. `display:none` + `overflow:hidden` — саме те, з чим працює
   slideDown/slideUp: висоту анімує JS, CSS лише ховає вміст, що вилазить. */
.slideToggleContent { display: none; overflow: hidden; }

.product__detail-row .slideToggleContentWrap {
  /* Вікно відкритого акордеона в оригіналі — рівно 235 px зі скролом, і це
     НЕ мінімум і не vw: `product.js` робить
     `$(".featureProduct .textInfoWrapper .jsSlideToggleWrap .slideToggleContentWrap").height(235)`
     на будь-якій ширині, а CSS знімає це лише на ≤599 (`height:auto!important`).
     Поки тут стояв `min-height:16.319444vw`, довгий текст розсовував вікно
     (у оригіналі він просто скролиться), а на 1350 мінімум падав до 220.3. */
  height: 235px; overflow: auto;
  margin: 0; padding: 0;
  color: #333;
  /* Скролбар усередині відкритого пункту в оригіналі кастомний — заміряно
     на живому донорі: `scrollbar-width: thin`, `scrollbar-color:
     rgb(221,230,232) rgb(255,255,255)`. У нас стояв типовий системний. */
  scrollbar-width: thin;
  scrollbar-color: rgb(221, 230, 232) rgb(255, 255, 255);
}
/* WebKit не читає scrollbar-color, тож ті самі кольори дублюємо йому. */
.product__detail-row .slideToggleContentWrap::-webkit-scrollbar { width: 8px; }
.product__detail-row .slideToggleContentWrap::-webkit-scrollbar-track { background: #fff; }
.product__detail-row .slideToggleContentWrap::-webkit-scrollbar-thumb {
  background: rgb(221, 230, 232); border-radius: 4px;
}
.product__detail-photo { width: 50%; }
.product__detail-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
}

/* ---------- 50/50 «Technology» ---------- */
/* Стара `.technology`: фото на пів вікна ліворуч, праворуч бежеве поле
   з текстом; висота 714 задана саме текстовою половиною. */
.product-features {
  display: block; max-width: none; margin: 0; padding: 0;
}
.product-feature {
  display: flex; align-items: stretch; gap: 0;
  width: 100%; background: #f5f0e8;
}
.product-feature--right .product-feature__media { order: 2; }
/* Фото не має задавати висоту ряду: у оригіналі її задає текстова половина,
   а фото просто розтягується під неї. Тому кадр — абсолютний усередині. */
.product-feature__media { width: 50%; position: relative; overflow: hidden; }
.product-feature__media img {
  /* саме `fill`, а не `cover`: половина тут 720×714, і будь-яке кадрування
     зсуває вміст на 3 px відносно оригіналу, який просто розтягує кадр */
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; border-radius: 0; object-fit: fill;
}
.product-feature__text {
  /* висота половини — формула оригіналу `calc(50vw - 6px)`: на 1440 це 714.
     Саме `height`, а не `min-height`: у оригіналі половина НЕ росте під довгий
     текст, а скролить його всередині (`.technologyTextInfoWrapper{overflow:auto}`).
     З `min-height` товар із довгою статтею робив смугу вищою за еталонну. */
  width: 50%; height: calc(50vw - 6px);
  padding: 6.380208vw 8.333333vw;          /* 91.875 / 120 */
  color: #333;
}
/* Кегль, крок і поля тексту плашки живуть у `product-text.css` — це той самий
   `.description`, що й в акордеоні, тож правила одні на два місця.
   Заголовок плашки в оригіналі — не окремий елемент, а `<b>` у потоці
   (110 блоків зі 138); тепер він приходить розміткою і має власні 18/24.

   `.product-feature__title` — запасний шлях: `<h2>` малюється лише коли
   `body` порожній (див. `main-product.liquid`). */
.product-feature__title {
  margin: 0 0 .138889vw;                   /* 2 */
  font-size: 15px; line-height: 24px; font-weight: 400; color: #333;
}
.product-feature__text .rte { color: #333; }
/* Під текстом — власне поле `.description`:
   `.technology … .description{margin-bottom:3.515625vw}` (10px при ≤1000).
   Нижнє поле ОСТАННЬОГО абзацу при цьому лишається всередині, бо
   `.description` у оригіналі — flex-елемент, тобто BFC; у нас цю роль
   грає `display:flow-root` з `product-text.css`. */
.product-feature__text .rte { padding-bottom: 3.515625vw; }   /* 50.625 */
/* Роль `.technologyTextInfoWrapper{height:100%;overflow:auto}`: текст живе
   у вікні заданої висоти й скролиться, а не розсовує плашку. Нижче 600
   висоти нема — там вікно за вмістом. */
@media (min-width: 600px) {
  .product-feature__text .rte { height: 100%; overflow: auto; }
}


/* ======================= мобілка (еталон 415) =======================
 * На 415 стара сторінка перебудовується в одну колонку: крихти згори,
 * квадратний кадр у край екрана, під ним інформація, далі рамка
 * акордеонів БЕЗ фото, а 50/50 стає просто бежевою плашкою з текстом.
 * Числа — з живого DOM старого сайту на 415.
 */
@media (max-width: 1000px) {
  .product {
    display: flex; flex-direction: column; gap: 0;
    padding: .911458vw 4.036458vw 40px;    /* 3.78 / 16.75 / 40 */
    /* ОБОВ'ЯЗКОВО. `align-items:start` оголошений у базі (`base.css:388`,
       `design.css:229`) для десктопної СІТКИ, де це вертикальне вирівнювання
       колонок. Тут напрямок колонковий, тож та сама властивість стає
       ПОПЕРЕЧНОЮ віссю — і кожен елемент стискається до `max-content`
       замість ширини контейнера.
       Ціна: `.product__info` давала 443.406 px на будь-якій ширині — 650,
       700, 900, 999 те саме число, — при еталонних 597.5 / 643.5 / 827.3 /
       918.4. Кнопка «Add to basket» і рядок «Need help?» їхали ліворуч на
       154…475 px. У висоті це не видно (371.4 з обох боків, бо текст
       короткий і не переносить рядків), тому смуги дефект не ловили.
       Та сама причина ламала галерею на 999: без розтягу вона стискалась
       до 499.5 замість 918.4.
       Оригінал: `.productGeneralSlider .productGeneral.right{padding:0;width:100%}`
       при ≤1000. */
    align-items: stretch;
  }

  /* На мобільному працює ДРУГИЙ блок крихт — той, що над галереєю, як у
     донора (`.productGeneral.phone > .breadcrumbsWrap`). Десктопний, що
     всередині `.info`, тут ховається. */
  .product__crumbs-phone { display: block; order: -1; width: 100%; }
  .product__crumbs-desk { display: none; }
  .product__crumbs .breadcrumbs {
    width: 100%;
    padding-left: 0; margin: 0 0 10px;
    font-size: 16px; line-height: 20px;
    /* Оригінал НІКОЛИ не переносить крихти: `.breadcrumbsWrap{overflow-x:auto;
       white-space:nowrap; scrollbar-width:none}`. Довга назва товару в нас
       давала другий рядок (+20 px) на самому верху сторінки — і зсувала все
       нижче на кожній товарній мобілці. */
    white-space: nowrap; overflow-x: auto;
    scrollbar-width: none;
  }
  .product__crumbs .breadcrumbs::-webkit-scrollbar { display: none; }
  .product__crumbs .breadcrumbs span { margin: 0 4px; }
  /* Саме посилання в оригіналі дрібніше за контейнер: заміряно на живому
     донорі при 415 — `.breadcrumbsWrap` 381.5×20 з успадкованими 16 px, а
     `.breadcrumbsWrap a` — 14 px, висота 17. У нас лінк успадковував
     контейнерні 16. */
  .product__crumbs .breadcrumbs a { font-size: 14px; line-height: 17px; }


  /* УВАГА. У оригіналі мобільний кадр займав не весь екран, коли слайдів
     більше одного: слайд 355 з 415, наступний визирає праворуч. Правило
     готове, але НЕ ввімкнене: у нас у `product.media` лежать зайві файли
     (галерея зібрана з усіх шести колонок замість самої «Слайдер PC»),
     тож «слайдів більше одного» зараз істинне майже скрізь, а в оригіналі
     206 товарів із 381 мали рівно один кадр. Вмикати РАЗОМ із переливкою
     медіа — тоді воно стане правильним для обох випадків:
       .product__gallery .embla__slide { flex: 0 0 85.5422%; margin-right: 10px }
       .product__gallery .embla__slide:only-child { flex-basis: 100%; margin-right: 0 } */
  .product__info { padding-left: 0; }

  /* Рядок бренду на мобілці ховається, серце переїжджає до назви */
  .product__brand-row {
    height: auto; margin: 18px 0 0;
    align-items: flex-start;
  }
  .product__vendor { display: none; }
  /* `@media(max-width:1000px){.btnFavorites .iconSvg{height:22px;width:22px}}`,
     а сама кнопка в донора 26×26 — іконка сидить у ній із полем 2 px з
     кожного боку. Правий край збігається в обох (398.25), тож із боксом 26
     іконка стає рівно на донорські 374.25 / 526.78. */
  .product__wishlist { width: 26px; height: 26px; margin-left: auto; }
  .product__wishlist .iconSvg { width: 22px; height: 22px; }

  /* Назва стоїть у тому ж рядку, що й серце: у оригіналі кнопка лежить
     усередині `titleWrapper`. Тут — від'ємний відступ на висоту серця.
     padding-right: 0 — як в оригіналі (`.titleWrap{padding-right:0}` при
     ≤1000, серце абсолютне й ЛЯГАЄ на останні літери). З падінгом 28 назва
     на ширину серця вужча і переносилась на другий рядок (+24 px зсуву). */
  /* Мітка стану: титульна ховається (як `.titleWrap .newLabelWrap` при
     ≤1000), працює окрема над галереєю — нульової висоти, текст лягає
     поверх верху кадру, як абсолютна мітка оригіналу. */
  .product__label { display: none; }
  .product__label-phone {
    display: block; order: -1;
    height: 0; overflow: visible;
    position: relative; z-index: 2;
    font-size: 16px; line-height: 24px; color: #999;
  }
  .product__label-phone .product__label--sale {
    display: inline-block; padding: 4px 12px;
    border-radius: 2px; background: #ff5f4a; color: #fff;
    font-size: 16px; line-height: 1.3;
  }

  .product__title {
    /* від'ємне поле точно на висоту кнопки серця: у донора вона абсолютна
       (`.titleWrapper .btnFavorites{position:absolute;top:0;right:0}`) і
       місця в потоці не займає. Число ходить за боксом кнопки: було 20 під
       стару іконку 20×20, стало 26 під донорські 26×26. */
    margin: -26px 0 0; padding-right: 0;
    font-size: 20px; line-height: 24px;
  }
  /* Рядок «оцінка · об'єм» і промо-плашка: усі відступи стають фіксованими,
     а `gap` самого рядка — 2vw (на 900 це рівно 18, як у донора). */
  /* 18 зверху, а не 11: у донора це схлопнута пара `.titleWrap{margin:18px 0}`
     і `.ratingInfoRow{margin-top:11px}`, тобто max(18,11)=18. Замір на живому
     донорі при 1000 / 900 / 700 / 415 — скрізь 18 і 20. 11 було взято з
     самого `margin-top` рядка, без поля назви, і давало −7 px на 38
     сторінках з об'ємом та −18 px там, де під назвою стоїть плашка. */
  .product__meta-row { gap: 2vw; margin: 18px 0 20px; }
  .product__volume { gap: 10px; }
  .product__promo-label span { padding: 4px 12px; font-size: 12px; }
  .product__info .product__meta-row + .product__description { margin-top: 20px; }
  /* 19, а не 16: у донора це схлопнута пара `.customLabel{margin-bottom:16}`
     і `.subTitle{margin-top:19}`, тобто max(16,19)=19. Замір на живому
     `/alcohol-collection-eu/aromat-dlya-domu-brandy-eu/` при 415: плашка
     664.9+24=688.9, короткий опис 707.9 — рівно 19. 16 було взято з самого
     `margin-bottom` плашки, без поля опису, і давало −3 px на 27 сторінках. */
  .product__info .product__promo-label + .product__description { margin-top: 19px; }

  /* Знизу 19, а не 0. У донора короткий опис — це `.subTitle{margin:19px 0}`,
     тобто поле є з ОБОХ боків, і воно входить у висоту `.info`.
     Помітно лише там, де під описом більше нічого немає (набори без якоря
     «+ N products of your choice»): `sisters-care-set` виходив на 19 px
     коротшим, і весь низ сторінки їхав угору. Де далі йде якір (`mt:20`) або
     ціна (`mt:35`), поля схлопуються в max() і відступ не міняється. */
  .product__info .product__description { margin: 38px 0 19px; font-size: 15px; line-height: 20px; }
  .product__info .product__description p { line-height: 24px; }
  .product__info .product__price {
    margin: 35px 0 0; font-size: 36px; line-height: 50.4px;
  }
  /* та сама перекреслена окремим рядком: 14 px і на мобілці */
  .product__info .product__price s { height: 14px; font-size: 14px; line-height: 14px; }
  .product__buy-row { margin: 18px 0 0; }
  .product__info .product__atc {
    height: 46px; padding: 0 10px; gap: 11px;
    font-size: 14px; line-height: 16px;
  }
  /* На мобілці кнопка в оригіналі показує ціну за розділювачем.
     Колір — `currentColor`, а не прибитий білий: на світлій кнопці
     (`custom.cta_color`) напис темний, і роздільник мусить іти за ним.
     Для білого напису це той самий білий під .2, що й у донора
     (rgba(255,255,255,.2) — заміряно на `clip-big-gold-eu`, 390). */
  .product__atc-sep { display: block; width: 1px; height: 30px; align-self: center;
                      background: currentColor; opacity: .2; }
  .product__atc-price { display: block; font-weight: 400; }
  /* На мобілці іконка стоїть окремим рядком по центру, текст — під нею */
  .product__help {
    flex-direction: column; align-items: center;
    margin: 20px 0; gap: 8px; font-size: 15px; line-height: 17px;
  }
  .product__help-icon { width: 36px; height: 36px; }
  /* Блок тексту стискається по вмісту й центрується — інакше рядок
     «Message us on…» не влазить у ширину колонки на волосину й переноситься */
  .product__help-text { width: auto; max-width: 100%; padding: 0; }

  /* Акордеони: одна колонка, фото поруч із ними на мобілці не показувалось */
  .product__detail-row { display: block; }
  .product__detail-col { width: auto; padding: 30px 4.166667vw 40px; }   /* 17.29 */
  .product__detail-photo { display: none; }
  .product__detail-row .product__details { border-radius: 10px; padding: 0 26px; }
  .slideToggle { padding: 20px 0; }
  .slideToggle .text { font-size: 18px; line-height: 24px; }
  /* Вікно акордеона: `.slideToggleContentWrap{margin-bottom:20px}` при ≤1000.
     Разом із нижнім полем останнього абзацу (15, тримає flow-root) це рівно
     ті 35 px, що в оригіналі стоять під текстом. Раніше тут було 34 —
     число зібране з десктопної гілки (20 + 14.06) і на мобілці занижене. */
  .product__detail-row .slideToggleContentWrap { margin-bottom: 20px; }

  /* 50/50 → плашка з текстом, фото на мобілці ховається.
     Ховається саме зображення, а не бік: в оригіналі
     `@media (max-width:768px){.technology .photo .picture,.technology .photo img
     {display:none}}` — і це для ВСІХ 138 блоків, а не лише для тих 10, що
     мають `.photo.ss`. Показувати на 415 лишалося тільки `<video>`
     (`height:100vw;width:100vw` на ≤599), а відео нема в жодному з блоків. */
  .product-feature { display: block; background: none; }
  .product-feature__media { display: none; }
  .product-feature__text {
    width: auto; height: auto; margin: 0 16px;
    padding: 30px 4.166667vw;              /* 17.29 */
    background: #f5f0e8; border-radius: 10px;
  }
  .product-feature__title { margin-bottom: 2px; font-size: 15px; line-height: 24px; }
  /* `.technology … .description{margin-bottom:10px}` при ≤1000. Нижнє поле
     останнього абзацу (15) лишається над ним, а не замість нього. */
  .product-feature__text .rte { padding-bottom: 10px; }
}

/* =================== проміжна смуга 769…1000 ===================
 * Старий сайт має ТРИ пороги, не один: 1000, 768 і 599. Наш блок вище
 * перемикає все на 1000, тож на 900 сторінка вже мобільна, а оригінал там
 * ще ні. Замір на 900 (smart-body-cream-seasalt): блок акордеонів 586 проти
 * 449.75 в оригіналі (+136.25 = 70 зайвого падінга колонки + 4 × 16.56
 * зайвого падінга шапок), плашка 319 проти 1344 — бо в оригіналі на 900
 * фото ще показане й лежить над текстом.
 *
 * Правила нижче стоять ПІСЛЯ блока ≤1000 і повертають цій смузі значення
 * оригіналу. Нижче 769 і вище 1000 не змінюється нічого.
 */
@media (min-width: 769px) and (max-width: 1000px) {
  /* `.featureProduct .textInfo{padding:0;width:100%}` при ≤1000 */
  .product__detail-col { width: 100%; padding: 0; }
  /* `.slideToggle{padding:1.3020833333vw 0}` — px-гілки 20px тут ще нема,
     вона починається з ≤599 */
  .slideToggle { padding: 1.302083vw 0; }

  /* `.ratingWrap` донора на 900: проміжок зірки→число 8 фікс, зірка ще 16 */
  .product__rating { gap: 8px; }

  /* Плашка: фото ще видиме (`display:none` у оригіналі лише при ≤768) і
     стоїть НАД текстом, обидві половини на всю ширину. */
  .product-feature { display: flex; flex-wrap: wrap; background: #f5f0e8; }
  .product-feature__media {
    display: block; width: 100%; position: static; overflow: visible;
  }
  .product-feature__media img {
    position: static; width: 100%; height: auto;
    aspect-ratio: 1 / 1; object-fit: cover;
  }
  /* `.technologyTextInfo{padding:40px 8.3333333333vw;width:100%}` при ≤1000;
     висота `calc(50vw - 6px)` з кореня тут ще діє — на 900 це 444. */
  .product-feature__text {
    width: 100%; height: calc(50vw - 6px); margin: 0;
    padding: 40px 8.333333vw; background: none; border-radius: 0;
  }
}

/* ---------- кадр на всю ширину екрана: тільки ≤768 ---------- */
/* Оригінал бокових падінгів `.productGeneralSlider` не міняє ніде
   (`padding:.9114vw 4.0364vw 4.0364vw`), а повний виліт вмикає рівно на
   ≤768 — там `.productGeneral.left{width:100vw}`. Поки це стояло в блоці
   ≤1000, на 900 кадр був 900×920 замість еталонних 827.3×838.7, і весь
   низ сторінки — акордеони, плашка, відгуки, промо — їхав на +81.3 px.
   Нижнє поле теж належить цій смузі: на 900 і 999 під кадром лишається
   `padding-bottom:1.319444vw` десктопного правила (11.9 і 13.2), а 20 px
   з'являються тільки разом із повним вильотом. */
@media (max-width: 768px) {
  .product > .product__gallery {
    margin: 0 -4.036458vw; padding-bottom: 20px;
  }

  /* Рядок «оцінка · об'єм» на третьому порозі донора: проміжки вдвічі
     менші, зірка 15 замість 16. */
  .product__meta-row { gap: 8px; }
  .product__volume { gap: 5px; }
  .product__rating { gap: 4px; --pr-star-size: 15px; }
}

/* =================== смуга 600…768 ===================
 * Третій поріг оригіналу. Тут рамка вже одноколонкова (падінги ті самі, що
 * й на 415), але шапка акордеона ще дрібніша:
 *   @media(max-width:768px){.slideToggle{padding:10px 0}  .text{font-size:15px}}
 *   @media(max-width:599px){.slideToggle{padding:20px 0}  .text{font-size:18px}}
 * Тобто 20px/18px — це гілка ≤599, а не ≤768.
 */
@media (min-width: 600px) and (max-width: 768px) {
  .slideToggle { padding: 10px 0; }
  .slideToggle .text { font-size: 15px; line-height: 24px; }
  /* `height:auto` у `.technologyTextInfo` з'являється лише при ≤599 — до того
     половина тримає `calc(50vw - 6px)` (на 700 це 344) і скролить текст. */
  .product-feature__text { height: calc(50vw - 6px); }
}

/* ---------- вікно акордеона: висота ---------- */
/* `height:235px` ставить JS оригіналу на будь-якій ширині, а CSS скасовує
   його рівно на ≤599 (`height:auto!important`). Тому і в нас межа саме 599,
   а не 1000: на 900 вікно так само 235 зі скролом. */
@media (max-width: 599px) {
  /* `height:auto!important` — єдине, що оригінал знімає на ≤599; overflow
     лишається `auto` з базового правила, і саме він тримає BFC для нижнього
     поля останнього абзацу. */
  .product__detail-row .slideToggleContentWrap { height: auto !important; }
}

/* §291. Піксельні гілки для щойно перерахованих вузлів картки. У кінці
   файлу — тобто ПІСЛЯ своїх правил (вага однакова, вирішує порядок). */
@media (max-width: 1536px) {
  .product__label--sale { font-size: 12px; }
  .product__brand-row { height: 22px; }
  .product__wishlist { width: 32px; height: 22px; }
  .product__info .product__atc { padding: 0 10px; font-size: 14px; line-height: 16px; gap: 8px; }
}

/* ---------- product-gallery.css ---------- */
/* ================= товар — галерея =================
 *
 * Кадр, стрічка мініатюр і мобільний слайдер. Джерело правди —
 * `original/site-assets/css/product.css` (`.gallery-main`, `.gallery-thumbs`)
 * і конфіг swiper'а в `original/site-assets/js/`, звірені з живим
 * eu.sistersaroma.com через `getBoundingClientRect` на 1440 · 1350 · 900 · 415.
 *
 * Файл іде після `product-card.css` у збірці `migrate/build_css.py`
 * (сортування за іменем), тому ті самі селектори тут перебивають його без
 * `!important`. Правила галереї, що лишились там, — мертві; перелік у звіті.
 *
 * ── Чому це стало можливим аж тепер ───────────────────────────────────
 * До переливки медіа в `product.media` лежали всі шість колонок вивантаження
 * (4–6 кадрів у товарі), тож «слайдів більше одного» було істинне майже
 * скрізь. Тепер галерея зведена з тим, що реально малював старий сайт:
 * 1 кадр у 119 товарів, 2 у 85, 3 у 13. Правила нижче розрізняють ці випадки
 * так само, як розрізняв оригінал.
 * ========================================================================= */

/* ---------- кадр ---------- */
/* БЕЗ заокруглення кутів. `base.css` дає всім кадрам товару
 * `.product__media img{border-radius:12px}`, а в оригіналі `.gallery-main`
 * і його слайди прямокутні: жодного `border-radius` у `.gallery-main`,
 * `.allPhoto` чи `.swiper-slide` немає.
 *
 * Дрібниця, але вона трималась у діфі окремими скупченнями по кутах:
 * (58,13) 10×10 і (58,693) 8×8 на деску, (0,441) 8×8 на мобілці — маса
 * чорнила в цих коробках розходилась на −12…−16%, тобто це не растеризація,
 * а зайвий елемент форми. Перекриваємо у своєму файлі, бо `base.css`
 * спільний і його зараз править інший агент. */
.product__gallery .product__media img,
.product__gallery .product__media video { border-radius: 0; }

/* ---------- стрічка мініатюр ---------- */
/* Оригінал:
 *   .gallery-thumbs{left:1.4973958333vw; top:1.4973958333vw; width:3.8411458333vw}
 *   @media(max-width:1536px){.gallery-thumbs{left:23px; width:59px}}
 *
 * Тобто `left` і `width` при ≤1536 стають ФІКСОВАНИМИ, а `top` гілки на 1536
 * не має і лишається текучим. Було записано все трьома vw-числами від бази
 * 1440 — на 1440 це майже збігалось, а на 1350 розходилось: ширина 55.3
 * замість 59, ліворуч 75.6 замість 77.5. Класичний забутий `px` із §7.2,
 * тільки навпаки — фікс, записаний як vw.
 *
 * Заміряно на живому оригіналі:
 *   1440 — стрічка 59×284 у (81,158), кадр 688×688 у (58,136) → left 23, top 21.6
 *   1350 — стрічка 59×284 у (77,156), кадр 645×645 у (54,135) → left 23, top 20.2
 *    900 — стрічка 59×209 у (59,193), кадр 827×827 у (36,179) → left 23, top 13.5
 */
.product__thumbs {
  left: 23px;                 /* фікс: гілка ≤1536 в оригіналі */
  top: 1.497396vw;            /* текуче: гілки на 1536 в оригіналі НЕМА (21.56 на 1440) */
  /* §291: тут стояла ЛИШЕ піксельна половина, хоч коментар і називав гілку.
     Заміряно на живому донорі: `.gallery-thumbs` 59@1440 → 73.8@1920, тобто
     пара 1.25. База 59/15.36; сам слайд при цьому 59×59 СТАЛИЙ на обох. */
  width: 3.8411458333vw;      /* 59 @≤1536 → 73.75 @1920 */
  gap: 16px;                  /* swiper spaceBetween:16 — це px, а не vw */
}
@media (max-width: 1536px) { .product__thumbs { width: 59px; } }

/* Мініатюра — жорсткі 59×59 з білим кантом 2 px:
   `.gallery-thumbs .swiper-slide{height:59px!important;width:59px;border:2px solid #fff}`.
   Заміряно: слайд 59×59, картинка всередині 55×55 зі зсувом +2/+2. */
.product__thumb { width: 59px; height: 59px; }

/* Активна мініатюра має ДРУГИЙ білий кант, усередині:
 *   .gallery-thumbs .swiper-slide .borderActive{position:absolute;inset:0;z-index:2}
 *   .gallery-thumbs .swiper-slide-thumb-active .borderActive{border:3px solid #fff}
 * тобто поверх картинки лежить окремий шар із рамкою 3 px. Разом із зовнішніми
 * 2 px активна мініатюра має 5 px білого по колу, неактивна — 2 px.
 *
 * Знайдено не на око: маса чорнила в коробці мініатюри розходилась на
 * +15.0% при нульовому зсуві, тобто це не растеризація (там ±5%), а
 * відсутній елемент. Після канта маса сходиться.
 *
 * Робимо псевдоелементом, а не рамкою й не `box-shadow: inset`:
 *   — рамка забрала б місце в картинки й зсунула б коробку;
 *   — внутрішня тінь малюється НАД тлом, але ПІД вмістом, тож `<img>`
 *     всередині її повністю перекриває (перевірено: маса чорнила не змінилась).
 * В оригіналі це окремий шар із `z-index:2` — тобто саме поверх картинки. */
.product__thumb { position: relative; }

/* Прев'ю відео на мініатюрі — `.gallery-thumbs .swiper-slide .videoPrev`:
   напівпрозорий білий шар на всю мініатюру з кнопкою play 30×30 по центру.
   `z-index:1` — під кантом активної мініатюри (::after, z-index виший). */
.product__thumb .videoPrev {
  position: absolute; inset: 0; z-index: 1;
  align-items: center; display: flex; justify-content: center;
  background: hsla(0, 0%, 100%, .27);
}
.product__thumb .videoPrev svg { display: block; height: 30px; width: 30px; }

/* CROSSFADE. Оригінал міняє кадр плавним перетіканням, а не зсувом стрічки.
   Embla зсуває контейнер трансформом, тож кладемо слайди один на одного й
   лишаємо йому саму лічбу: індекс, події й перетягування працюють як були,
   а видно тільки активний кадр, що проявляється за .4s.

   Висоту тримає перший слайд (він у потоці), решта — абсолютні; інакше
   контейнер із самих absolute схлопнувся б у нуль. */
[data-product-gallery] .embla__container { position: relative; }
[data-product-gallery] .embla__slide {
  transition: opacity .4s ease;
}
[data-product-gallery] .embla__slide:not(:first-child) {
  position: absolute; inset: 0;
}
[data-product-gallery] .embla__slide { opacity: 0; }
[data-product-gallery] .embla__slide.is-current { opacity: 1; }
/* Поки JS не проставив клас (перший кадр до ініціалізації) — показуємо
   перший слайд, щоб галерея не блимала порожнечею. */
[data-product-gallery]:not(.is-ready) .embla__slide:first-child { opacity: 1; }
.product__thumb.is-active::after {
  content: ""; position: absolute; inset: 0;
  border: 3px solid #fff; pointer-events: none;
}

/* §338. СТРІЧКА МІНІАТЮР НИЖЧЕ 1001 — БУЛА ЗГАШЕНА ЗОВСІМ.
 *
 * §328 зробив головне фото на всю ширину й пообіцяв «мініатюри перемикачами
 * в кутку». Мініатюри при цьому не малювались: заміряно на 390 —
 * `.product__thumbs` 0×0, `display: none`. Ані `position: static` з §327,
 * ані flex-basis тут ні до чого — гасило окреме правило в `design.css`:
 *
 *     @media (max-width: 1000px) { .product__thumbs { display: none } }
 *
 * Решта геометрії доїжджала як слід (обчислені `left: 23px`, `width: 59px`,
 * `gap: 16px`, `z-index: 3`) — саме тому «нуль» виглядав як порожнеча, а не
 * як зсунута стрічка.
 *
 * Межа 1000 у тому правилі не збігається з донорською. Заміряно на живому
 * eu.sistersaroma.com, той самий товар:
 *   900 — `.gallery-thumbs` 59×209 у (59.3, 192.7), `top: 13.4766px`, ВИДНО
 *   390 — `.gallery-thumbs` `display: none`
 * Тобто донор ховає стрічку лише на своїй мобільній межі, а в 769…1000 вона
 * в нього на місці. Наше правило гасило і цю смугу теж — тобто ламало
 * рівняння там, де про мобілку не йшлося зовсім.
 *
 * Повертаємо `display` на всю смугу ≤1000: у 769…1000 це просто відновлює
 * донора (перевірено — (59.3, 192.7) сходиться в нуль), нижче 769 виконує
 * §328. `top` у цій смузі НЕ чіпаємо: там текуча донорська 1.497396vw, і
 * будь-яке інше число одразу дає 9.5 px розбіжності на 900.
 *
 * Перекриваємо у своєму файлі, а не правимо `design.css`: він спільний,
 * а `sections.css` іде після нього в `layout/theme.liquid`. */
@media (max-width: 1000px) {
  .product__thumbs { display: grid; }
}

/* ---------- мобільний слайдер ---------- */
/* Оригінал, `@media(max-width:768px)`:
 *   .gallery-main .swiper-slide{width:calc(100vw - 60px)}
 *   .gallery-main .swiper-slide:only-child{width:100%!important}
 *   swiper: slidesPerView:'auto', spaceBetween:10, effect:'slide'
 *
 * Тобто при двох і більше кадрах кадр вужчий за екран рівно на 60 px, і
 * наступний слайд визирає праворуч через 10 px. Один кадр — на всю ширину.
 * Заміряно на живому оригіналі при 415:
 *   2 кадри — .gallery-main 415×355, слайди 355×355 у x=0 і x=365
 *   1 кадр  — .gallery-main 415×415, слайд 415×415
 * У нас досі було 415×415 в обох випадках, тобто мобільна сторінка 98 товарів
 * була на 60 px вища за оригінал.
 *
 * Пишемо `calc(100vw - 60px)`, а не 85.5422%: відсоток збігається з
 * оригіналом рівно на 415 і розходиться на будь-якій іншій ширині
 * (на 390 оригінал дає 330, а відсоток — 333.6).
 *
 * Межа 768, а не 1000: у оригіналі повноекранна галерея вмикається саме на
 * 768. Проміжок 769…1000, де наш `.product` уже мобільний, а оригінал ще
 * десктопний, цим правилом не чіпається — він належить сітці картки. */
@media (max-width: 768px) {
  /* Обов'язково разом із фіксованою шириною слайда.
     `.product__gallery` — флекс-елемент у `.product`, і поки слайд був
     `flex-basis:100%`, ширина замикалась сама на себе й давала 415. Щойно
     базис став `calc(100vw - 60px)`, максимальний вміст рядка став 3×365,
     і коробка галереї роздулась до 1095: другий кадр показувався цілком,
     а не визирав на 50 px, бо `overflow:hidden` у в'юпорті різав по 1095.
     В оригіналі те саме зроблено на `.productGeneral.left{width:100vw}`. */
  .product__gallery { width: 100vw; flex: none; }

  /* §327. НА МОБІЛЦІ ФЕЙД-ГАЛЕРЕЮ ВИМИКАЄМО.

     Вище описана десктопна поведінка донора: видно лише активний кадр,
     решта — `position: absolute; inset: 0; opacity: 0`, і зміна йде
     проявленням. Але те правило не обмежене брейкпойнтом і діяло скрізь.

     На мобілці донор має ІНШУ галерею — горизонтальний свайпер, де слайд
     вужчий за екран (`100vw - 60`) саме для того, щоб наступний кадр
     визирав праворуч. З абсолютними слайдами визирати нема чому: у ряду
     лишався один кадр, а зарезервовані 60 px стояли порожньою білою
     смугою. Виглядало як «фото не на всю ширину».

     Тому нижче 769 повертаємо слайди в потік і робимо їх видимими; рух
     бере на себе трансформація контейнера, як у звичайного свайпера. */
  [data-product-gallery] .embla__container { position: static; }
  [data-product-gallery] .embla__slide,
  [data-product-gallery] .embla__slide:not(:first-child) {
    position: static; inset: auto; opacity: 1; transition: none;
  }

  /* §328. ГОЛОВНЕ ФОТО НА ВСЮ ШИРИНУ, мініатюри перемикачами в кутку.

     Рішення власника, свідоме відхилення від донора. У донора на мобілці
     слайд `100vw - 60`, щоб наступний кадр визирав праворуч смугою 50 px;
     власник подивився на це живцем і сказав робити як на десктопі —
     кадр на всю ширину, а перемикання мініатюрами.

     Мініатюри вже стоять абсолютно в лівому верхньому куті кадру
     (`left:23`, `top`), тобто десктопна розкладка тут працює як є —
     міняємо лише ширину слайда й прибираємо поле між кадрами. */
  .product__gallery .embla__slide,
  .product__gallery .embla__slide:only-child,
  .product__gallery--narrow .embla__slide:only-child {
    flex: 0 0 100%;
    margin-right: 0;
  }

  /* `nowrap` лишається обов'язковим. Слайд 100vw−60 плюс поле 10 не влазить
     у в'юпорт удвох, і флекс за замовчуванням загортав другий кадр на
     НОВИЙ РЯДОК: у ряду лишався один слайд, а зарезервовані 60 px праворуч
     стояли порожні білою смугою. Виглядало як «зображення не на всю
     ширину», хоча ширина слайда правильна — не було сусіда, який мав
     туди визирати. */
  .product__gallery .embla__container { flex-wrap: nowrap; }

  /* §328: було `calc(100vw - 60px)` + поле 10 — донорське визирання
     наступного кадру. Замінено на повну ширину рішенням власника. */
  .product__gallery .embla__slide,
  .product__gallery .embla__slide:only-child {
    flex: 0 0 100%;
    margin-right: 0;
  }

  /* Дев'ять карток, де донор при одному фото все одно тримає у свайпері
     порожній другий слайд: кадр там 355, а не 415, і праворуч біла смуга.
     Список і замір — у коментарі `narrow_gallery_handles`
     (sections/main-product.liquid). Знімаємо для них дію `:only-child`. */
  /* §328: дев'ять «вузьких» карток донора теж ідуть на всю ширину —
     біла смуга праворуч була саме тим, від чого власник відмовився. */
  .product__gallery--narrow .embla__slide:only-child {
    flex-basis: 100%;
    margin-right: 0;
  }

  /* §338. Кут стрічки на мобілці — рівний, 23 на 23.
   *
   * `left` у смузі ≤1536 фіксований 23 px, а `top` лишався текучим
   * (1.497396vw) — донорська десктопна пара. На 390 це дає 5.84 px згори
   * проти 23 px ліворуч: стрічка притиснута до верхньої кромки кадру й
   * висить криво. Тут звіряти нема з чим — донор на 390 стрічки не має
   * взагалі (`display: none`, заміряно), тож це вже смуга §328, де форму
   * задає рішення власника «у кутику як на десктопі». На десктопі кут
   * майже рівний (23 / 21.56 при 1440), тому й тут беремо рівний.
   *
   * Смуги 769…1000 це НЕ стосується: там донор стрічку показує і `top`
   * має лишитись текучим. */
  .product__thumbs { top: 23px; }

  /* §338. ОДИН КАДР — СТРІЧКИ НА МОБІЛЦІ НЕМА.
   *
   * Рішення власника. Одна мініатюра нічого не перемикає, а займає 59 px
   * із 390 — 15 % ширини екрана; одним кадром живуть 119 товарів із 217.
   * На десктопі стрічка лишається (донор її показує і при одному слайді),
   * тож правило заскоплене саме на мобільну смугу.
   *
   * Клас ставить Liquid із `media_all.size`, а не JS після рендера —
   * інакше стрічка блимнула б перед зникненням. Вага та сама, що в
   * `.product__thumbs { display: grid }` вище, тож вирішує порядок:
   * цей блок іде пізніше й перебиває. */
  .product__thumbs--single { display: none; }
}

/* ---------- product-options.css ---------- */
/* ============================================================
   ВИБІР ВАРІАНТА НА СТОРІНЦІ ТОВАРУ (пункт 240)
   ------------------------------------------------------------
   ЗВІДКИ ЧИСЛА. У збережених `migrate/donor-src/donor-css/*.css` цих класів
   немає жодного разу — блок стилюється окремим файлом сторінки товару, який
   попередники не знімали. Тому всі значення зняті `getComputedStyle` з
   ЖИВОЇ сторінки донора `make-up/lip-hydrater-halva-eu/` на 1440.

   §289/291, ПЕРЕЗВІРЕНО НА 1440 І 1920. Числа нижче були правильні для 1440
   і ЗАМОРОЖЕНІ вище 1536. Донор пише тут ДВА різні типи, на око однакові —
   розрізняє лише відношення 1920/1440:
     · 1.333 — чистий `vw` без гілки (падінги плиток, gap-и, відступи);
     · 1.25  — `vw` + гілка `@media ≤1536` (кегль і рядок заголовка, gap .wrap).
   Сталим виявився тільки радіус плитки (8 на обох ширинах). Замір нижче:

     .optionsWrapper   display:flex; gap 9.375; margin 0 0 15
     .optionWrap       display:flex; gap 12.1875
     .optionRow        display:flex
     .radioOptionWrap  display:block            бокс 306.91 × 72.13
     .optionTitle      display:inline; 15/24 #333; margin-bottom 4.6875
     .wrap             display:flex; flex-wrap:wrap; gap 8   306.91 × 48.13
     .item             display:block
     label             padding 14.0625 18.75; radius 8; text-align:center;
                       cursor:pointer; 16px          137.69 × 48.13
     input             display:none

   ДВІ ДРІБНИЦІ, ЧЕРЕЗ ЯКІ БЛОК ВИГЛЯДАВ БИ НЕ ТАК:
   · рамка плитки — це НЕ `border`, а `box-shadow: inset 0 0 0 2px rgb(51,51,51)`.
     У донора `border` дорівнює `0px none`, тож бокс 137.69 не має враховувати
     товщину рамки — з `border:2px` плитка стала б на 4 px ширшою;
   · неактивний варіант відрізняється ЛИШЕ прозорістю `opacity:.5` — ні колір,
     ні рамка, ні фон не міняються (заміряно на обох плитках: активна 1,
     неактивна 0.5, box-shadow однаковий).
   ============================================================ */

.product__variants .optionsWrapper {
  display: flex;
  gap: .6510416667vw;          /* §291: 9.375@1440 → 12.5@1920 */
  margin: 0 0 1.0416666667vw;  /* 15 → 20 */
}
.product__variants .optionWrap { display: flex; gap: .8463541667vw; } /* §291: 12.1875 → 16.25 */
.product__variants .optionRow { display: flex; }
.product__variants .radioOptionWrap {
  display: block;
  /* висоту рядка заголовка задає strut контейнера: з успадкованими 27.36
     блок виходив 75.48 замість донорських 72.13 */
  line-height: 1.5625vw;   /* §291: слідує за заголовком, 24 → 30 */
}

.product__variants .optionTitle {
  display: inline;
  font-size: .9765625vw;        /* §291: 15@1440 → 18.75@1920, гілка ≤1536 є */
  line-height: 1.5625vw;        /* 24 → 30 */
  color: #333;
  margin-bottom: .3255208333vw; /* 4.6875 → 6.25, чистий vw, гілки НЕМА */
}

.product__variants .radioOptionWrap .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .5208333333vw;           /* §291: 8@1440 → 10@1920, гілка ≤1536 є */
}
.product__variants .radioOptionWrap .item { display: block; }

/* Сам радіо-вхід донор ховає цілком — клікабельність несе `label[for]` */
.product__variants .radioOptionWrap .item input { display: none; }

.product__variants .radioOptionWrap .item label {
  display: block;
  padding: .9765625vw 1.3020833333vw;  /* §291: 14.0625/18.75 → 18.75/25 */
  /* §291, ЗВІРЕНО НА 1440 І 1920: радіус 8 у донора СТАЛИЙ. Не чіпати. */
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgb(51, 51, 51);
  text-align: center;
  cursor: pointer;
  font-size: 16px;
  /* `line-height` донора — `normal`, а не успадковані від теми 27.36px:
     з ними плитка виходила 55.48 замість 48.13, і весь блок опцій ставав
     на 10.7 px вищим (82.84 проти 72.13) */
  line-height: normal;
  color: #333;
  opacity: .5;
  transition: all .3s;
}
.product__variants .radioOptionWrap .item input:checked + label { opacity: 1; }

/* ============================================================
   ПУНКТ 241 — правки правої колонки цілими донорськими правилами
   ------------------------------------------------------------
   Усе заміряно `getComputedStyle` на живому донорі
   `make-up/lip-hydrater-halva-eu/` на 1440. Файл цей, а не
   `product-card.css`, щоб не воювати за рядки з іншим агентом.
   ============================================================ */

/* §291, НЕ ПІДДАЛОСЬ ЗАМІРУ (не «звірено», а саме не вдалось): чотири
   місця нижче потребують станів, яких на заміряному товарі донора немає —
   логотип вендора (у донора це SVG, наш текстовий кегль ніколи не малюється),
   зазор `.product__label` 3.9 і мітка «Sold out» (потрібен товар БЕЗ
   наявності), стара ціна `s`/`del` (потрібен товар З РОЗПРОДАЖЕМ: на
   заміряному вузол донора 0×0). Лишаються відкритими, не переміряти на
   цьому ж товарі. */
/* ---------- вендор: логотип замість тексту ---------- */
/* Донор: `.info svg` 107×10 у рядку `.shopLogoWrapWrapper`
   (display:flex; gap:8; margin:28.125px 0 24.375px; height:22). */
.product__vendor { margin: 0; padding: 0; line-height: 0; }
.product__vendor .product__vendor-logo {
  display: block;
  width: 107px;
  height: 10px;
}

/* ---------- плашка SALE ---------- */
/* Радіус у донора 1.875px, не 2: `border-radius:.1302083333vw` рахується
   від 1440, а не від 1536, як вважав попередній підбір. */
/* §291: 1.875@1440 → 2.5@1920, чистий vw. */
.product__label--sale { border-radius: .1302083333vw; }

/* ---------- кнопка «Add to basket» ---------- */
/* Донор: висота 50, фон rgb(17,17,17), gap 11, padding 0 10, радіус 2.
   У нас фон був #333 — кнопка виглядала сірішою за донорську, і саме це
   видно на кадрі; висота вже збігалась (49.98 проти 50).

   ЗАДАЧА C (10.09): САМЕ ЦЕ ПРАВИЛО Й З'ЇДАЛО КОЛІР КНОПКИ. Колір товару
   (`custom.cta_color`) приходить інлайном як `--button-bg`/`--button-border`,
   а тут стояв прибитий `background:#111` з вагою (0,1,1) — він перебивав
   `.product__atc` і `.button--primary` (0,1,0), які читають змінну. Рамку
   ніхто не перебивав, тож фарбувалась лише вона. Заміряно в WebKit 26 на
   `clip-big-gold-eu` (#eec468): фон rgb(17,17,17), рамка rgb(238,196,104),
   і на 1440, і на 390; переможця знайдено перебором `document.styleSheets`.

   Тепер #111 — ТИПОВЕ ЗНАЧЕННЯ ЗМІННОЇ, а не властивості: інлайновий
   `--button-bg` на самій кнопці сильніший за будь-яке правило таблиці, тож
   колір товару виграє, а без нього лишається донорський #111. Саме #111,
   а не `var(--c-ink)` з base.css: той #333, сіріший. */
.product-form__submit,
button[name="add"] {
  --button-bg: #111;
  background: var(--button-bg);
  /* §291, ЗВІРЕНО НА 1440 І 1920: висота 50, gap 11 і радіус 2 у донора
     СТАЛІ на обох ширинах — не заморожена половина. Не чіпати. */
  gap: 11px;
}
/* Напис — під колір фону. `--button-fg` рахує Liquid (main-product.liquid,
   `color_contrast`: білий чи #111 — що контрастніший із фоном). Без кольору
   товару змінної нема, і лишається білий, як і було (`.button{color:var(--c-bg)}`).
   Ховер окремо, бо `.button:hover` (0,2,0) повертав би білий. Вимкнену
   кнопку не чіпаємо: її сірий #999 веде `.product__atc[disabled]` (0,3,0). */
.product__info .product__atc { color: var(--button-fg, #fff); }
.product__info .product__atc:not([disabled]):hover { color: var(--button-fg, #fff); }

/* ---------- блок ціни ---------- */
/* Донор: `.priseWrapper` має ширину ЗА ВМІСТОМ — 68.42, не на всю колонку,
   а нова ціна пофарбована в акцент. Наш блок розтягувався на 552.92 і був
   вищий (61.25 проти 54.88), бо стара ціна займала цілий рядок. */
.product__info .product__price {
  width: -moz-fit-content;
  width: fit-content;
}
.product__info .product__price s,
.product__info .product__price del { display: block; height: .9114583333vw; }

/* ---------- заголовок і мітка в одному рядку ---------- */
/* Донор: `.titleWrapper{margin:23.4375px 0;position:relative}` →
   `h1.title{display:inline}` + `.newLabelWrap{display:inline-block}`.
   Саме `inline` дає h1 ширину за текстом (296.94), а не на колонку. */
/* §291: 23.4375@1440 → 31.25@1920, чистий vw. */
.product__title-wrap { margin: 1.6276041667vw 0 0; position: relative; }
.product__title-wrap .product__title {
  display: inline;
  margin: 0;
}
/* зазор до плашки — у донора це звичайний пробіл між inline-вузлами,
   заміряний як 3.9 px, а не наші 10 */
.product__title-wrap .product__label { margin-left: 3.9px; }

/* ---------- кнопка: gap 11 ---------- */
/* окремим правилом із вищою вагою: базові .555556vw (8) інакше виграють */
.product__form .product-form__submit,
.product__form button[name="add"],
form[action*="/cart/add"] button[name="add"] { gap: 11px; }

/* ---------- висота блоку ціни ---------- */
/* §326. ТУТ БУЛО `line-height: 1`, І ЦЕ КОРІНЬ УСІЄЇ ПОЛОМКИ.
   Знято живі правила донора з його ж таблиці стилів (не з боксів):
     .prise            { font-size: 2.34375vw; line-height: 1.4 }
       @≤1000          { font-size: 36px }
     .prise .sell_priceWrap  { color:#FF5F4A }        ← ВЛАСНОГО РЯДКА НЕМА
     .prise .sell_price      { line-height: 1.1; margin-top: .260417vw;
                               display: inline }
   Тобто коробку нової ціни в донора робить УСПАДКОВАНИЙ `1.4` від `.prise`,
   а `1.1` і `.260417vw` сидять на ВКЛАДЕНОМУ `inline`-вузлі, де вертикальні
   поля не діють і рядок не створюється — це декорація, а не геометрія.
   Попередній порт узяв саме ці два числа й повісив їх на наш `display:block`
   вузол, де вони СТАЛИ коробкою: 37.125 замість 47.25 на 1440 (звідси −6.4,
   записані вище як «ВІДКРИТЕ»), і, головне, `2.578125vw` далі стискався з
   шириною — 25.78 на 1000 і 10.7 на 415 при кеглі 36. Саме це власник
   бачить як «поплив текст»: гліф 36 px у рядку 10.7 px.
   Повертаємо донорську формулу — множник на контейнері, а рядок нової ціни
   успадковується. Число, а не піксель: діти перераховують його від свого
   кегля, як і в донора. */
.product__info .product__price { line-height: 1.4; }
/* §296. СТАН РОЗПРОДАЖУ ВІДТВОРЮЄТЬСЯ НА `refill-basil-and-black-pepper`
   (донор `/aromaty-dlya-domu/refill-basil-and-black-pepper/`) — 29.00 при
   compare_at 34.00. У магазині таких товарів 19, шукати не треба.
   Заміряно там: рядок старої ціни 14→17.5 з обох боків — сходиться.
   ЗАКРИТО §326. Було: донор 61.3 @1440, ми 54.9 — нижче на 6.4. Діагноз
   «потрібне окреме правило саме для розпродажу» виявився хибним, і разом
   із ним хибним був висновок, що БЕЗ розпродажу ми сходимось до пікселя.
   Заміряно донора на `home-blackberry` (не-акційний товар):
       .prise без акції   1440 47.3 · 1000 50.4 · 415 50.4
       наш блок           1440 37.1 · 1000 25.8 · 415 10.7
   тобто не-акційний стан їхав НА ТІ САМІ величини, просто без старої ціни
   зверху його ніхто не помічав. Один множник `1.4` на контейнері (див.
   §326 нижче) закриває обидва стани й усі три ширини — окреме правило під
   розпродаж не потрібне.

   §291. Стара ціна текла разом із блоком: у донора `.priseWrapper` 54.9@1440
   → 72@1920, а нова ціна й відступ дають 49.5+5 = 54.5, тобто на рядок старої
   лишається рівно 17.5 (а не 14). Пара 1.25, база 14/15.36. */
/* §324. `vw` тут ТІЛЬКИ на десктопі. На 375 `.9114583333vw` = 3.4 px —
   стара ціна стискалась у нечитабельну смужку над новою, і саме це власник
   бачив як «текст знижки поплив». Донор на 375 тримає **36 px** на обох
   цінах, а коробку старої — 14 px заввишки (гліфи обрізає навмисно).
   Тому нижче 769 вага піднята до (0,3,0), щоб правило не залежало від
   порядку файлів у збірці: `product-card.css` і цей файл описують той
   самий вузол, і хто виграє — вирішував випадок. */
@media (min-width: 769px) {
  .product__info .product__price s,
  .product__info .product__price del { line-height: .9114583333vw; font-size: .9114583333vw; }
}
@media (max-width: 768px) {
  .product__info .product__price.product__price s,
  .product__info .product__price.product__price del {
    height: 14px; font-size: 14px; line-height: 14px; }
  .product__info .product__price.product__price {
    font-size: 36px; line-height: 50.4px; }
}

/* мітка сидить на базовій лінії заголовка, як у донора: наш
   `vertical-align:middle` опускав її на 3 px нижче (237 проти 234) */
.product__title-wrap .product__label { vertical-align: baseline; }

/* вага: у `product-card.css` блок описаний як `.product__info .product__price`
   (0,2,0), тож голий `.product__price` (0,1,0) до нього не доходив */
.product__info .product__price { row-gap: 0; }
/* §326. Нова ціна БЕЗ власного рядка й без відступу — рівно як донорський
   `.sell_priceWrap`, у якого свого `line-height` немає взагалі: коробку йому
   дає `1.4` з `.prise`. Разом із рядком старої (14) виходить донорська сума
   14 + 1.4·кегль:
       1440  14 + 47.25 = 61.25   донор 61.3
       1000  14 + 50.40 = 64.40   донор 64.4
        415  14 + 50.40 = 64.40   донор 64.4
   Знятий `margin-top` теж донорський: 3.75 сиділо на `inline`-вузлі й у
   донора не давало нічого, а в нас додавалось до висоти блока.
   `display:block` лишається: `.sell_priceWrap` у донора теж блок, і без
   нього стара й нова ціни стають в один рядок. */
.product__info .product__price > span:last-child {
  display: block;
}

/* §291. Гілки ≤1536 для трьох властивостей, де донор їх ПИШЕ (відношення
   1.25). Стоять у кінці файлу, тобто ПІСЛЯ своїх правил: вага однакова,
   вирішує порядок — пастка з §284. */
@media (max-width: 1536px) {
  .product__variants .optionTitle { font-size: 15px; line-height: 24px; }
  .product__variants .radioOptionWrap { line-height: 24px; }
  .product__variants .radioOptionWrap .wrap { gap: 8px; }
}

/* §291. Піксельна половина пари для старої ціни — у кінці файлу, тобто
   ПІСЛЯ своїх правил. */
@media (max-width: 1536px) {
  .product__info .product__price s,
  .product__info .product__price del { height: 14px; line-height: 14px; font-size: 14px; }
}

/* ---------- product-promo.css ---------- */
/* ================= товар — промо-банер =================
   Еталон — старий сайт: секція `.product_banner` на сторінці товару
   eu.sistersaroma.com (напр. /accessories/clip-big-pink). Числа взяті
   просто з його product.css: vw там, де в оригіналі vw (база 1920 —
   ці правила працюють лише ширше за 1921), px там, де px. Межі
   медіа-запитів теж оригінальні: 1921 / 1536 / 1280 / 1000 / 768,
   а не наші 1000.

   Геометрія, знята з живого оригіналу при 1440 (для контролю):
     .product_banner            0,0    1440×300, margin-top 40
     .banner_content          360,22.1  720×255.8   (left/top 50% + translate)
     .banner_title            360,22.1  495×72     33/36 600, mb 11.25
     .banner_subtitle         360,105.4 495×46     18/23 400, mb 30
     .banner_contact          360,181.4 495×96.5   pad 11.25/16.875, r12
     .banner_contact_text     376.9,205.6 202.1×48 16/24 500
     .vertical_line           607,192.6  1×74      #000, margin 0 28
     .flex_item.row           636,192.6 202.1×74   space-between
     .banner_contact_phone    636,192.6 162.8×32   22/32 600
     .banner_contact_schedule 636,224.6 162.8×42   14/21 500
     .banner_contact_telegram 798.8,192.6 39.4×74  (img 39.4×39.4)
   і при 415:
     .product_banner            0,0    415×666    margin 0
     img                        0,0    415×666    cover, object-position 50% 20px
     .banner_content            0,36   415×230    padding 0 19
     .banner_contact          65.5,147 284×119    колонка, pad 12/21, r12

   Кольори: усе успадковує #333 з body старого сайту — білого тексту
   в оригіналі нема, фон намальовано під темний текст.

   Контроль по вьюпортах (DOM проти живого оригіналу, той самий товар,
   перезаміряно 26.08 після переносу 40 px):
     1440 — коробка 1440×300 @2967, усі вузли 0.0 px, крім наслідків
            довшого номера (нижче); смуга дає 1.21%, з них 99.6% —
            саме номер
     1350 — коробка 1350×281.25, x/w/шрифти всіх вузлів 0.0 px; висоти
            розходяться, бо на 1350 ОРИГІНАЛ сам переносить свій номер
            на два рядки (заміряно: `.banner_contact` 127.09 і
            `.banner_contact_phone` 143.78×64 проти наших 95.09 і ×32),
            а ми тримаємо nowrap. Через центрування плашки весь вміст
            їде на 16 px — смуга на 1350 дає 9.01%
      900 — коробка 900×666, margin 0, усі вузли 0.0 px (гілка ≤1000);
            смуга 0.30%, і все це номер
      415 — коробка 415×666, margin 0, усі вузли 0.0 px (гілка ≤768);
            смуга 0.51%, з них 90.5% — номер

   Свідомі відхилення (інший контент, не дефект):
   • телефон +48 833 131 973 і європейський Telegram-бот замість
     українського 0 800 310 418 / Sisters_Aroma_online_ua_bot;
   • через це — nowrap на телефоні (див. MIGRATION-DEVIATIONS.md).

   Блока «Промо-банер під відгуками» у спільному theme/assets/design.css
   більше нема (`grep promo-banner design.css` — нуль збігів), тож цей файл
   лишається єдиним джерелом стилів банера. Патч на видалення знято.
*/

/* ---------- секція і фон ---------- */

.promo-banner {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* `.product_banner{margin-top:40px;margin-bottom:140px}`, а на сторінці
     товару margin-bottom збитий інлайном у 0. Гілка ≤1000 у оригіналі
     обнуляє обидва поля.

     ІСТОРІЯ ЦЬОГО РЯДКА. Раніше верхні 40 px ми «переносили» у відгуки
     (`padding-bottom` на `.reviews--summary`), щоб посекційні смуги діфу
     не бачили просвіт між коробками секцій. Задум був у тому, що рендер
     не зміниться — але не спрацював: висоту `.reviews-feature` задає
     медіа-колонка з фото (720), і падінг усередині її не збільшує.
     Через це 40 px просто зникали. Заміряно на 1440:
       донор  відгуки 1603…2323, банер 2363  → просвіт 40
       наш    відгуки 1603…2325, банер 2326  → просвіт 1
     Тобто сторінка недобирала 39 px рівно тут. Повертаємо поле банеру,
     як у оригіналі. */
  margin: 40px 0 0;
}
@media screen and (max-width: 1000px) { .promo-banner { margin: 0; } }

.promo-banner__bg { display: inline; }

.promo-banner__bg img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  object-position: center;
}

/* ---------- блок тексту поверх фону ---------- */

.promo-banner__content {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  max-width: 1200px;
  display: block;
  padding: 0;
  gap: 0;
}

@media screen and (max-width: 1921px) {
  .promo-banner__content { max-width: 900px; }
}

.promo-banner__inner { padding: 0 400px 0 0; background: none; }

@media screen and (max-width: 1921px) {
  .promo-banner__inner { padding-right: 335px; }
}

@media screen and (max-width: 1536px) {
  .promo-banner__inner { padding-right: 225px; }
}

@media screen and (max-width: 1280px) {
  .promo-banner__inner {
    background: linear-gradient(90deg, rgba(255, 255, 255, .2) -4.82%, rgba(255, 255, 255, 0) 109.49%);
    padding: 12px;
  }
}

/* ---------- заголовок ---------- */

.promo-banner__title {
  margin: 0 0 .78125vw;
  color: #333;
  font-size: 1.4322916667vw;
  font-weight: 600;
  line-height: 1.6927083333vw;
}

@media screen and (max-width: 1921px) {
  .promo-banner__title { font-size: 36px; line-height: 38px; }
}

@media screen and (max-width: 1536px) {
  .promo-banner__title { font-size: 33px; line-height: 36px; }
}

@media screen and (max-width: 1280px) {
  .promo-banner__title { font-size: 27px; line-height: 30px; }
}

/* ---------- підзаголовок ---------- */

.promo-banner__text {
  margin: 0 0 .8463541667vw;
  color: #333;
  font-size: .9114583333vw;
  font-weight: 400;
  line-height: 1.1067708333vw;
}

@media screen and (max-width: 1921px) {
  .promo-banner__text { font-size: 18px; line-height: 23px; margin-bottom: 40px; }
}

@media screen and (max-width: 1536px) {
  .promo-banner__text { margin-bottom: 30px; }
}

@media screen and (max-width: 1280px) {
  .promo-banner__text { font-size: 16px; line-height: 19px; margin-bottom: 13px; }
}

/* ---------- плашка з контактами ---------- */

.promo-banner__contact {
  align-items: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, .2) -4.82%, rgba(255, 255, 255, 0) 109.49%);
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  width: auto;
  padding: .78125vw 1.171875vw;
}

.promo-banner__label {
  flex: 1;
  color: #333;
  font-size: .9114583333vw;
  font-weight: 500;
  line-height: 1.3671875vw;
}

@media screen and (max-width: 1921px) {
  .promo-banner__label { font-size: 17px; line-height: 24px; }
}

@media screen and (max-width: 1536px) {
  .promo-banner__label { font-size: 16px; }
}

@media screen and (max-width: 1280px) {
  .promo-banner__label { font-size: 15px; line-height: 19px; }
}

/* .vertical_line — волосина між текстом і телефоном */
.promo-banner__rule {
  align-self: stretch;
  background-color: #000;
  margin: 0 28px;
  width: 1px;
  flex: none;
}

.promo-banner__col {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.promo-banner__row {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: space-around;
}

@media screen and (max-width: 1921px) {
  .promo-banner__row { font-size: 14px; justify-content: space-between; }
}

.promo-banner__phone-block { display: block; }

.promo-banner__phone {
  display: block;
  cursor: pointer;
  color: #333;
  text-decoration: none;
  font-size: 1.171875vw;
  font-weight: 600;
  line-height: 1.8229166667vw;
  /* nowrap лишається з часів, коли ми показували «+48 833 131 973» —
     форматований номер був на 25 px ширший за слот і рвався на два рядки.
     Тепер у полі стоїть той самий рядок, що й у донора («48833131973»,
     без пробілів і плюса), але правило тримаємо: колонка вузька, а будь-який
     розрив номера піднімає плашку на 32 px і зсуває весь банер. */
  white-space: nowrap;
}

/* Ховера на номері в оригіналі НЕМА — колір не міняється, підкреслення теж.
   Наш приходив з наскрізного правила посилань: заміряно rgb(255,95,74)
   проти незмінного rgb(51,51,51) у донора. */
.promo-banner__phone:hover,
.promo-banner__phone:focus,
.promo-banner__phone:active { color: #333; text-decoration: none; }

@media screen and (max-width: 1921px) {
  .promo-banner__phone { font-size: 22px; line-height: 32px; }
}

.promo-banner__schedule {
  display: block;
  color: #333;
  font-size: .8463541667vw;
  font-weight: 500;
  line-height: 1.3671875vw;
}

@media screen and (max-width: 1921px) {
  .promo-banner__schedule { font-size: 14px; line-height: 21px; }
}

.promo-banner__telegram {
  display: block;
  /* в оригіналі тут <img> з власним інтринсиком — він не стискається;
     інлайновий svg стискається, тож фіксуємо явно */
  flex: none;
  place-items: normal;
  cursor: pointer;
  color: #333;
}

.promo-banner__telegram svg {
  display: block;
  width: 2.734375vw;
  height: 2.734375vw;
  object-position: center;
}

/* ---------- ≤1000: фон намальовано з місцем під текст угорі ---------- */

@media screen and (max-width: 1000px) {
  .promo-banner { margin: 0; }

  .promo-banner__bg img { max-height: 666px; object-position: top; }

  .promo-banner__content {
    inset: 36px auto auto 50%;
    transform: translate(-50%);
    max-width: unset;
    padding: 0 19px;
    width: 100%;
  }

  .promo-banner__inner { background: none; padding: 0; }

  .promo-banner__contact {
    background: linear-gradient(90deg, rgba(255, 255, 255, .4) -4.82%, rgba(255, 255, 255, .4) 109.49%);
    flex-direction: column;
    justify-content: normal;
    width: auto;
    padding: 12px 21px;
  }

  .promo-banner__rule { height: 1px; margin: 12px auto; width: 80px; }

  .promo-banner__phone { text-align: left; }

  .promo-banner__telegram svg { width: 42px; height: 42px; }
}

@media screen and (max-width: 768px) {
  /* висота кадру фіксована, а картинку зсунуто на 20px вниз —
     згори лишається смуга фону сторінки, як в оригіналі */
  .promo-banner__bg img { height: 666px; object-position: center 20px; }

  .promo-banner__title {
    font-size: 22px;
    line-height: 26px;
    margin-bottom: 12px;
    text-align: center;
  }

  .promo-banner__text { font-size: 14px; line-height: 17px; text-align: center; }

  .promo-banner__contact { margin: 0 auto; max-width: 284px; }

  .promo-banner__label { font-size: 15px; line-height: 21px; }

  .promo-banner__phone { font-size: 18px; line-height: 28px; }

  .promo-banner__schedule { font-size: 13px; line-height: 21px; }
}

/* ---------- product-reco.css ---------- */
/* ============================================================
   Товар — рекомендації (смуга product--reco)
   ============================================================

   Оригінал (`eu.sistersaroma.com`, десктоп 1440):

     .product_banner            margin-bottom 140
     .productCarouselViewed     margin 85 / 56.25 ; «Viewed products»
       .title                   40/50, bold, #111, margin 0 0 40 76
       .swiper                  width 100vw, slidesPerView 4.3 → картка 334.88
     .productCarouselMini       margin-top 60      ; «Buy with this product»
       .title, .swiper          такі самі

   Тобто обидві каруселі — на всю ширину вікна, від краю до краю, а не в
   контейнері сторінки; від краю відступає лише заголовок (76px).
   Картка — `.cardItem__product`: border-top/right/bottom, без лівого.

   Три межі, і вони РІЗНІ — не одна на все:
     > 1000       просвіт 140 (банер віддає свої `margin-bottom:140`)
     769…1000     просвіт 85 (банер уже без відступів, лишається власний 85)
     ≤ 768        просвіт 40, заголовок 18/24 UPPERCASE з відступом 16
     ≤ 1000       окремо — рецепт КАРТКИ (`ratingWrap` 44), як у design.css
   Кількість карток у кадрі не залежить від ширини взагалі — див. нижче.

   Що тут НЕ править: сама картка (`.product-card`) спільна з каталогом.
   Правки під оригінал зроблені точково і тільки в межах цієї смуги;
   те, що варто винести в design.css, перелічено в звіті.
   ============================================================ */

/* ---------- Смуга цілком ----------

   Коробка `.product-reco` має збігатися зі СМУГОЮ, а не з вмістом.
   `measure_bands` міряє `getBoundingClientRect`, а зовнішні відступи в нього
   не входять — тож поки 140 зверху й 56.25 знизу висіли маргінами, вони
   випадали зі смуги просвітами: сама смуга читалась −51, а нижні 56
   зараховувались розсилці (+69 у сусіда). Еталонні межі зняті з видимих
   країв і порожнечу включають, тож тримаємо обидва відступи ВСЕРЕДИНІ:
   верхній — падінгом, нижній — через `flow-root` (він не дає маргіну
   останньої каруселі вилізти з коробки).

   Верхні 140 — це не наш блок, а відступ банера: в оригіналі
   `.product_banner{margin-bottom:140px}` схлопується з
   `.productCarouselViewed{margin-top:85px}` у 140. Перевірено по знімку
   еталона: низ банера 3266, коробка заголовка 3406. Наш банер свого
   відступу не має (`margin: 40px 0 0`), тому всі 140 несемо ми.
   УВАГА: падінг не схлопується. Якщо агент промо колись дасть банеру
   `margin-bottom`, тут вийде сума — тоді ці 140 треба зменшити на стільки ж. */
.product-reco {
  display: flow-root;
  padding-top: 140px;
}

.product-reco .reco-band {
  display: block;
  width: 100%;
  max-width: none;
  margin: 4.1666666667vw 0 3.90625vw;   /* 60 / 56.25 на 1440 */
  padding: 0;
}

/* Верхній відступ першої каруселі вже віддано падінгу смуги. */
.product-reco .reco-band:first-child { margin-top: 0; }

/* НИЖНІЙ ВІДСТУП 56.25 — НЕ ЗАЙВИЙ, не прибирати.
   В оригіналі `.productCarouselViewed{margin-bottom:3.90625vw}` (85px зверху
   перебиває медіазапит, знизу лишається 3.90625vw = 56.25). Живий старий сайт
   віддає `margin: 85px 0px 56.25px`. Еталонна смуга розсилки починається на
   4106 при низу карток 4050 — це рівно ці 56.25.
   Два якорі в еталонному PNG, які це тримають (clip, деск):
     підкреслення поля вводу  еталон 4240 · ми 4241
     сірий #f6f6f6 футера     еталон 4562 · ми 4563
   Занулиш — усе нижче підскочить на 55 (деск) і 39 (моб). Посекційний діф
   цього не покаже: кроп ріже кожен бік по своїх межах і спільний зсув з'їдає.

   `.productCarouselMini` — інша річ: коли супутні товари є, вона остання і
   нижнього відступу справді не має, під нею одразу футер. */
.product-reco .buy-with-carousel { margin-bottom: 0; }

/* Заголовок каруселі: 40/50 з відступом 76 від краю вікна. */
.product-reco .reco-band__title {
  margin: 0 0 40px 76px;
  padding: 0;
  font-size: 40px;
  line-height: 50px;
  font-weight: var(--fw-bold);
  color: #111;
  text-transform: none;
  letter-spacing: normal;
}

/* ---------- Карусель ---------- */

.product-reco .reco-band embla-slider { display: block; position: relative; }
.product-reco .reco-band .embla__viewport { overflow: hidden; }

.product-reco .reco-band .embla__slide {
  min-width: 0;
  display: flex;
  padding: 0;                                  /* base.css дає 16px справа */
  border-top: 1px solid var(--c-line-2);
  border-right: 1px solid var(--c-line-2);
  border-bottom: 1px solid var(--c-line-2);    /* в оригіналі картка має і нижню лінію */
}
.product-reco .reco-band .embla__slide .product-card { width: 100%; }

/* ---------- Скільки карток у кадрі ----------

   Обидві каруселі в оригіналі — Swiper з ratio-порогами:

     new Swiper('.jsProductCarouselViewedSwiper',
       { slidesPerView: 1.7,
         breakpoints: { '@0.75': 2.7, '@1.00': 3.3, '@1.50': 4.3 } })

   `@`-поріг у Swiper — це МНОЖНИК ВИСОТИ вікна, який порівнюється з шириною
   (`value = innerHeight * ratio`, далі `matchMedia('(min-width: value)')`).
   Тобто «@1.50» означає width ≥ height × 1.5 — а це рівно CSS-запит
   `(min-aspect-ratio: 3/2)`. Тож пороги переносяться дослівно, без прив'язки
   до висоти знімка: у покупця з будь-яким вікном буде те саме, що на старому
   сайті. Ширинами це виразити не можна було — саме тому попередній варіант
   (37.037% на всьому ≤1000) розходився на 650, 900 і 1100.

   Ширина слайда = 100% / slidesPerView. */
.product-reco .reco-band .embla__slide { flex: 0 0 58.8235%; }              /* 1.7 */
@media (min-aspect-ratio: 3/4) {
  .product-reco .reco-band .embla__slide { flex: 0 0 37.037%; }             /* 2.7 */
}
@media (min-aspect-ratio: 1/1) {
  .product-reco .reco-band .embla__slide { flex: 0 0 30.303%; }             /* 3.3 */
}
@media (min-aspect-ratio: 3/2) {
  .product-reco .reco-band .embla__slide { flex: 0 0 23.2558%; }            /* 4.3 */
}

/* Стрілок у старій каруселі не було — тримаємо їх поверх кадру
   і показуємо лише під курсором, щоб знімок лишався тим самим. */
.product-reco .reco-band [data-embla-prev],
.product-reco .reco-band [data-embla-next] {
  position: absolute; top: 40%; z-index: 6;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .8); border: 0; border-radius: 50%;
  color: var(--c-ink); font-size: var(--fs-20); line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity var(--dur-base);
}
.product-reco .reco-band:hover [data-embla-prev],
.product-reco .reco-band:hover [data-embla-next] { opacity: 1; }
.product-reco .reco-band [data-embla-prev] { left: var(--s-12); }
.product-reco .reco-band [data-embla-next] { right: var(--s-12); }
.product-reco .reco-band [data-embla-prev][disabled],
.product-reco .reco-band [data-embla-next][disabled] { opacity: 0 !important; pointer-events: none; }

/* ---------- Картка ----------
   Тут її більше нема. Рейтинг 41.25/44, кнопка 40, рядок ціни 16 і знята
   стеля фото переїхали в спільний `card-tile.css` — локальні копії лишились
   би тінню, яка тихо розходиться з оригіналом.

   Опис теж прибрано з-під `display:none`. Попереднє прочитання було хибне:
   `with_description` — це клас на НАЗВІ всередині картки, а не модифікатор
   блока, тож у прогрітій сесії стара `.productCarouselViewed` опис показує
   (42px на VANILLA і PUR PUR) і не показує там, де його в товару нема.
   Тепер це вирішує метаполе `custom.card_description`, і глушити ціле
   поле по секції означало б ховати те, що в оригіналі є. */

/* ---------- Проміжна смуга 769…1000 ----------

   Оригінал перемикає рецепт БЛОКА на 768, а не на 1000 — раніше тут стояла
   одна межа 1000 на все, і вікно 769…1000 діставало мобільний рецепт замість
   десктопного (на 900 це давало слот 634.3 замість 659.9).

   Що саме змінюється на 1000, а що на 768:
     `@media(max-width:1000px){.product_banner{margin-bottom:0;margin-top:0}}`
        → банер втрачає свої 140, і просвіт над каруселлю дає вже її власний
          `margin-top:85px`;
     `@media(max-width:1000px){.cardItem__product .ratingWrap{min-height:44px}}`
        → рецепт КАРТКИ (він і в design.css на 1000);
     `@media(max-width:768px){.productCarouselViewed{margin:40px 0}}` і заголовок
        18/24 UPPERCASE → рецепт БЛОКА, і тільки він на 768.

   Заголовок 40/50, відступи між каруселями 4.1666666667vw і нижній 3.90625vw
   у цій смузі лишаються десктопні. */
@media (max-width: 1000px) {
  .product-reco { padding-top: 85px; }
}

/* ---------- Мобілка (≤768) ---------- */
@media (max-width: 768px) {
  .product-reco { padding-top: 40px; }

  .product-reco .reco-band { margin: 40px 0; }
  .product-reco .reco-band:first-child { margin-top: 0; }

  .product-reco .reco-band__title {
    margin: 0 0 20px 16px;
    font-size: 18px;
    line-height: 24px;
    text-transform: uppercase;
  }

  /* `.productCarouselMini` тут уже не остання — під нею розсилка,
     і в оригіналі в неї `margin-bottom:40px`. */
  .product-reco .buy-with-carousel { margin-bottom: 40px; }
}

/* ---------- product-reviews.css ---------- */
/* ================= товар — відгуки =================
   Еталон — старий сайт: секція `.featureProduct.reviewsFeature` на
   eu.sistersaroma.com/accessories/clip-big-pink. Розкладка там така:
   два стовпці по 50 % ширини вікна; ліворуч — список відгуків (порожній,
   доки відгуків нема), праворуч по центру — заголовок «USER REVIEWS»
   і сіра картка зі зведенням: велика оцінка, зірки, підпис, стовпчик
   розподілу 5…1 і кнопка «Write a review» всередині картки.

   Числа взяті просто з product.css старого сайту: vw там, де в оригіналі
   vw (база 1440), px там, де px. Межі медіа-запитів — теж оригінальні:
   1536 / 1000 / 768 / 599, а не наші 1000.

   Іконки зірок і чату — ті самі файли старого сайту
   (/assets/rate_star.svg, rate_star_filled.svg, reviews.svg), вкладені
   data-URI, щоб не тягти окремі запити.

   Свідомі відхилення від оригіналу:
   • рядок `main.reviews_summary_caption` — незакрита локалізація старого
     сайту; на його місці стоїть наш чесний підпис «N reviews»;
   • форма відкривається <details> просто під кнопкою, а не модалкою;
   • нуль відгуків → нуль зірок (див. MIGRATION-DEVIATIONS.md).
*/

.reviews-feature {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

/* Сам блок — рядок із двох стовпців; поверх базових .reviews з base.css/design.css */
.reviews.reviews--summary {
  --rv-star: url("data:image/svg+xml,%3Csvg width='16' height='15' viewBox='0 0 16 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.61328 5L9.73047 5.23438L9.98926 5.27148L14.292 5.8916L11.1816 8.90234L10.9912 9.08594L11.0361 9.34668L11.7715 13.6006L7.91699 11.5898L7.68555 11.4688L7.4541 11.5898L3.59863 13.6006L4.33398 9.34668L4.37891 9.08594L4.18848 8.90234L1.07715 5.8916L5.38086 5.27148L5.64062 5.23438L5.75684 5L7.68457 1.12207L9.61328 5Z' stroke='%23F5B400'/%3E%3C/svg%3E");
  --rv-star-on: url("data:image/svg+xml,%3Csvg width='16' height='15' viewBox='0 0 16 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.68525 0L10.061 4.77702L15.3733 5.54305L11.5293 9.26145L12.4367 14.5119L7.68525 12.033L2.93378 14.5119L3.84123 9.26145L-0.00279331 5.54305L5.30952 4.77702L7.68525 0Z' fill='%23F5B400'/%3E%3C/svg%3E");
  --rv-chat: url("data:image/svg+xml,%3Csvg width='17' height='16' viewBox='0 0 17 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 1H3.5C2.39543 1 1.5 1.89543 1.5 3V13.83L3.14819 11.9383C3.71793 11.2844 4.54279 10.9091 5.41008 10.9091H13.5C14.6046 10.9091 15.5 10.0137 15.5 8.90909V3C15.5 1.89543 14.6046 1 13.5 1ZM16.5 3C16.5 1.34315 15.1569 0 13.5 0H3.5C1.84315 0 0.5 1.34315 0.5 3V15.165C0.5 15.6272 1.07335 15.8419 1.37698 15.4935L3.90215 12.5953C4.28198 12.1593 4.83188 11.9091 5.41008 11.9091H13.5C15.1569 11.9091 16.5 10.5659 16.5 8.90909V3ZM5.25 6.5C5.66421 6.5 6 6.16421 6 5.75C6 5.33579 5.66421 5 5.25 5C4.83579 5 4.5 5.33579 4.5 5.75C4.5 6.16421 4.83579 6.5 5.25 6.5ZM9.5 5.75C9.5 6.16421 9.16421 6.5 8.75 6.5C8.33579 6.5 8 6.16421 8 5.75C8 5.33579 8.33579 5 8.75 5C9.16421 5 9.5 5.33579 9.5 5.75ZM12.25 6.5C12.6642 6.5 13 6.16421 13 5.75C13 5.33579 12.6642 5 12.25 5C11.8358 5 11.5 5.33579 11.5 5.75C11.5 6.16421 11.8358 6.5 12.25 6.5Z' fill='%23333333'/%3E%3C/svg%3E");

  /* Іконки картки відгуку — ті самі файли старого сайту
     (/assets/verified.svg, up.svg, down.svg). Кольори в них
     зашиті (#60B238 / #9C9C9C), currentColor нема, тож вкладення
     data-URI відтворює їх один в один. */
  --rv-verified: url("data:image/svg+xml,%3Csvg width='29' height='29' viewBox='0 0 29 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.15 25.9392C20.6618 25.9392 25.9406 20.6603 25.9406 14.1485C25.9406 7.63675 20.6618 2.35791 14.15 2.35791C7.63822 2.35791 2.35938 7.63675 2.35938 14.1485C2.35938 20.6603 7.63822 25.9392 14.15 25.9392Z' fill='%2360B238'/%3E%3Cpath d='M10.6172 14.1487L12.9753 16.5068L17.6916 11.7905' stroke='white' stroke-width='3.14417' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rv-up: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7185 6.1624L14.6704 10.4804H20.7806C21.106 10.4804 21.4269 10.5562 21.718 10.7017C22.009 10.8472 22.2622 11.0585 22.4575 11.3188C22.6527 11.5792 22.7847 11.8814 22.8429 12.2015C22.9011 12.5217 22.884 12.851 22.7928 13.1634L20.3509 21.5479C20.2239 21.9832 19.9591 22.3657 19.5963 22.6378C19.2334 22.91 18.7921 23.0571 18.3386 23.0571H4.18986C3.63394 23.0571 3.10078 22.8362 2.70769 22.4431C2.31459 22.05 2.09375 21.5169 2.09375 20.9609V12.5765C2.09375 12.0206 2.31459 11.4874 2.70769 11.0943C3.10078 10.7012 3.63394 10.4804 4.18986 10.4804H7.08249C7.47246 10.4802 7.85463 10.3712 8.18605 10.1657C8.51747 9.96017 8.78498 9.66627 8.95851 9.31705L12.5743 2.09595C13.0685 2.10207 13.555 2.2198 13.9974 2.44033C14.4397 2.66087 14.8265 2.97852 15.1288 3.36955C15.4312 3.76057 15.6412 4.21486 15.7433 4.69848C15.8455 5.1821 15.8369 5.68253 15.7185 6.1624Z' stroke='%239C9C9C' stroke-width='1.57208' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.32812 10.4807V23.0574' stroke='%239C9C9C' stroke-width='1.57208' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rv-down: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.42384 18.9906L10.4719 14.6726H4.36174C4.03633 14.6726 3.71538 14.5968 3.42433 14.4513C3.13327 14.3058 2.88009 14.0945 2.68485 13.8342C2.4896 13.5738 2.35765 13.2716 2.29944 12.9515C2.24122 12.6313 2.25835 12.302 2.34947 11.9896L4.79144 3.60515C4.91843 3.16975 5.18321 2.78729 5.54604 2.51517C5.90887 2.24305 6.35017 2.09595 6.80371 2.09595H20.9525C21.5084 2.09595 22.0415 2.31679 22.4346 2.70988C22.8277 3.10298 23.0486 3.63613 23.0486 4.19206V12.5765C23.0486 13.1324 22.8277 13.6656 22.4346 14.0587C22.0415 14.4518 21.5084 14.6726 20.9525 14.6726H18.0598C17.6699 14.6728 17.2877 14.7818 16.9563 14.9873C16.6249 15.1928 16.3573 15.4867 16.1838 15.836L12.568 23.0571C12.0738 23.0509 11.5873 22.9332 11.145 22.7127C10.7026 22.4921 10.3158 22.1745 10.0135 21.7835C9.71114 21.3924 9.50107 20.9381 9.39897 20.4545C9.29686 19.9709 9.30537 19.4705 9.42384 18.9906Z' stroke='%239C9C9C' stroke-width='1.57208' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.8203 14.6726V2.09595' stroke='%239C9C9C' stroke-width='1.57208' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rv-chevron: url("data:image/svg+xml,%3Csvg width='19' height='11' viewBox='0 0 19 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.9324 1L9.14302 9.19145L1 1' stroke='%23231F20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* .textInfo старого сайту: половина ширини, відступ згори 105 і знизу 85 */
.reviews--summary .reviews__col {
  display: flex;
  flex-direction: column;
  width: 50%;
  margin-top: 105px;
  padding: 0 3.90625vw 85px;
}
@media (min-width: 1922px) {
  .reviews--summary .reviews__col { padding-bottom: 5.5338541667vw; }
}

/* ---------- 40 px межі «відгуки → промо-банер» ----------
   В оригіналі цей просвіт намальовано зовнішнім відступом банера
   (`.product_banner{margin-top:40px}`, знімається в @media ≤1000).
   Заміряно на живому старому сайті:
     1440  .featureProduct.reviewsFeature h 609.6 → .product_banner top 2966.5 (mt 40)
     1350  h 596.2 → 2818.0 (mt 40)
      900  h 649.1 → 3775.3 (mt 0, стик впритул)
      415  h 369.0 → 2013.2 (mt 0, стик впритул)
   `margin` не входить у коробку жодної із секцій, тож у посекційних смугах
   ці 40 px читались як просвіт, якого нема в еталонному розбитті (еталонна
   смуга відгуків 650 проведена по видимому краю фото банера). Тримаємо їх
   усередині відгуків — рендер той самий до пікселя, а коробки збігаються:
   `.reviews` 650, `.promo-banner` 300, просвіту нема.

   Саме на `.reviews`, а не на `.reviews-feature`: смуга міряється селектором
   `.reviews` (migrate/bands/product.json). На сторінках із фото-колонкою
   (`reviews-feature--media`) висоту рядка так само задає ця колонка, тож
   падінг додається до загальної висоти й там. */
@media screen and (min-width: 1001px) {
  /* Було `padding-bottom: 40px` — спроба потримати тут поле банера. Воно
     не працювало (висоту блока задає колонка з фото) і тепер живе там,
     де його ставить оригінал, — на самому банері. */
}

/* ---------- права колонка: заголовок + картка ---------- */
.reviews--summary .reviews__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8229166667vw;
  margin: 0;
  padding: 0;
}

.reviews--summary .reviews__title {
  margin: 0;
  color: #111;
  font-size: 1.1067708333vw;
  font-weight: 700;
  letter-spacing: -.13px;
  line-height: 32.75px;
  text-align: center;
  text-transform: uppercase;
}

.reviews--summary .reviews__card {
  display: flex;
  flex-direction: column;
  gap: 1.3020833333vw;
  width: 100%;
  max-width: 29.296875vw;
  padding: 1.3020833333vw;
  background: #f7f7f7;
  border-radius: 12px;
}

/* оцінка + зірки + підпис */
.reviews--summary .reviews__rating-row {
  display: flex;
  align-items: center;
  gap: .9114583333vw;
}
.reviews--summary .reviews__score {
  flex-shrink: 0;
  color: #111;
  font-size: 2.6041666667vw;
  font-weight: 500;
  line-height: 1;
}
.reviews--summary .reviews__rating-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}
.reviews--summary .reviews__stars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: inherit;
  letter-spacing: normal;
}
@media (min-width: 1537px) {
  .reviews--summary .reviews__stars { gap: .1953125vw; }
}
/* design.css малює зірку маскою по кольору; тут — реальні іконки старого сайту.
   Розмір саме 1.0416666667vw: у product.css правило з `height:16px` стоїть у
   @media(max-width:1536px) ВИЩЕ за безмедійне з vw, тож на 1440 виграє vw,
   а 16px лишається тільки для мобільної межі 768. */
.reviews--summary .reviews__star {
  width: 1.0416666667vw;
  height: 1.0416666667vw;
  background-color: transparent;
  background-image: var(--rv-star);
  background-position: 50%;
  background-repeat: no-repeat;
  /* В оригіналі це <img src="/assets/rate_star.svg"> із width/height по
     коробці, тобто object-fit:fill — SVG 16×15 РОЗТЯГУЄТЬСЯ у квадрат.
     `contain` дає лист-бокс і робить зірку на 1 px вужчою й вищою. */
  background-size: 100% 100%;
  -webkit-mask: none;
          mask: none;
}
.reviews--summary .reviews__star.is-on { background-image: var(--rv-star-on); }

.reviews--summary .reviews__caption {
  color: #767676;
  font-size: .9114583333vw;
  line-height: 26.2px;
}

/* стовпчик розподілу 5…1 */
.reviews--summary .reviews__bars {
  display: flex;
  flex-direction: column;
  gap: .9765625vw;
  list-style: none;
  margin: 0;
  padding: 0;
}
.reviews--summary .reviews__bars li {
  display: grid;
  align-items: center;
  gap: .6510416667vw;
  grid-template-columns: 18px 22px minmax(0, 1fr) 52px;
}
.reviews--summary .reviews__bar-label,
.reviews--summary .reviews__bar-count {
  color: #767676;
  font-size: 1.0416666667vw;
  line-height: 26px;
}
.reviews--summary .reviews__bar-count { text-align: right; }
.reviews--summary .reviews__bar-star {
  width: 1.0416666667vw;
  height: 1.0416666667vw;
  background: var(--rv-star-on) 50% / 100% 100% no-repeat;
}
.reviews--summary .reviews__bar {
  display: block;
  height: .78125vw;
  overflow: hidden;
  background: #d9d9d9;
  border-radius: 999px;
}
.reviews--summary .reviews__bar > span {
  display: block;
  height: 100%;
  background: #4d73f6;
  border-radius: inherit;
}
/* Заливка: рядки 5 і 4 — синя `rgb(77,115,246)`, рядки 3…1 — сіра
   `rgb(160,160,160)`. Обидва числа зняті з живого донора. Я був помилково
   прибрав сіру, бо заміряв тільки перший рядок; у розмітці донора нижні три
   несуть окремий клас `summaryDistributionRow--muted`. */
.reviews--summary .reviews__bars li.is-muted .reviews__bar > span { background: #a0a0a0; }

/* кнопка «Write a review» — .btn.btn__white.reviews_btn старого сайту */
.reviews--summary .reviews__write { display: block; }
.reviews--summary .reviews__write > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Заміряно на живому оригіналі (.reviews_btn) на 1440 / 1350 / 900:
     gap 8px, padding 0 10px, border 1px, radius 2px — НЕ vw, скрізь однакові.
     Висота лишається vw: 42.19 / 39.55 / 26.36 = 2.9296875vw. */
  gap: 8px;
  width: 100%;
  height: 2.9296875vw;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #333;
  border-radius: 2px;
  color: #111;
  cursor: pointer;
  list-style: none;
  transition: .3s;
}
.reviews--summary .reviews__write > summary::-webkit-details-marker { display: none; }
.reviews--summary .reviews__write > summary::marker { content: ''; }
.reviews--summary .reviews__write > summary:hover { background: #f6f6f6; }
/* design.css ховає кнопку, коли форма відкрита; у картці це лишає дірку */
.reviews--summary .reviews__write[open] > summary { display: flex; }
.reviews--summary .reviews__btn-icon {
  flex: none;
  width: 1.0416666667vw;
  height: 1.0416666667vw;
  background: var(--rv-chat) 50% / 100% 100% no-repeat;
}
.reviews--summary .reviews__btn-text {
  font-size: .9765625vw;
  font-weight: 400;
  line-height: 26.2px;
}
.reviews--summary .review-form { margin-top: 1.0416666667vw; text-align: left; }

/* ---------- ліва колонка: список відгуків ---------- */
.reviews--summary .reviews__content {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.reviews--summary .reviews__sort {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 1.6276041667vw;
  text-align: center;
}
.reviews--summary .reviews__sort-label {
  color: #999;
  font-size: .9114583333vw;
  font-weight: 400;
  line-height: 25.15px;
}
.reviews--summary .reviews__sort select {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111;
  font: inherit;
  font-size: .9114583333vw;
  font-weight: 700;
  line-height: 25.15px;
  cursor: pointer;
}
.reviews--summary .reviews__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6510416667vw;
  list-style: none;
  margin: 0;
  padding: 0;
}
.reviews--summary .review {
  display: flex;
  flex-direction: column;
  gap: .4557291667vw;
  width: 100%;
  max-width: 29.296875vw;
  padding: 1.3020833333vw;
  background: #f9f9f9;
  border: 0;
  border-radius: 15px;
}
/* Рядки понад поріг «show more» ховаються атрибутом: їх ставить і сам Liquid
   (`reviews.liquid`, `{% if forloop.index > vis %}hidden{% endif %}`), і скрипт
   після сортування (`reviews.js`, `li.toggleAttribute('hidden', …)`).

   Захист від цього формально був — `.review[hidden] { display: none }` у
   `assets/base.css`. Але ВАГА в нього така сама (0,2,0), як у правила вище,
   а `sections.css` підключений у `theme.liquid` ПІСЛЯ `base.css` — і при
   рівній вазі виграє пізніший файл. Тобто `display: flex` перемагав, і жоден
   рядок понад поріг не ховався: покупець бачив би всі відгуки одразу, а
   кнопка «show more» нічого б не робила.

   Поки не видно лише тому, що відгуків максимум два на товар при порозі
   чотири (`reviews_visible` за замовчуванням 4) — тобто вада спляча, і
   прокинеться разом із першим товаром, у якого відгуків стане більше.
   Модифікатор `reviews--summary` стоїть на блоці завжди, тож це стосується
   і сторінки товару, і `main-article.liquid` — снипет у них один.

   Пишемо захист саме тут і саме з класом-предком: вага (0,3,0) виграє в
   (0,2,0) незалежно від порядку файлів, тож правило не зламається, якщо
   черговість підключення колись зміниться. */
.reviews--summary .review[hidden] { display: none; }
.reviews--summary .review__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5625vw;
  margin: 0;
}
.reviews--summary .review__author {
  color: #111;
  font-size: 1.0416666667vw;
  font-weight: 500;
  line-height: 1.1;
}
.reviews--summary .review__stars {
  display: flex;
  align-items: center;
  gap: 3px;
  color: inherit;
  letter-spacing: normal;
}
.reviews--summary .review__star {
  width: .78125vw;
  height: .78125vw;
  background: var(--rv-star) 50% / 100% 100% no-repeat;
}
.reviews--summary .review__star.is-on { background-image: var(--rv-star-on); }
.reviews--summary .review__date {
  margin: 0;
  color: #a6a6a6;
  font-size: .78125vw;
  line-height: 1.2;
}

/* ---------- рядки картки, яких бракувало ----------
   Заміряно на живому оригіналі (.itemReviews на
   /doglyad-za-tilom/smart-body-cream-seasalt) на 1440 / 1350 / 900 / 415.
   Усе, що масштабується, — vw від бази 1440; фіксовані px там, де в
   оригіналі px на всіх ширинах (перевірено по чотирьох знімках):
     .reviewMeta gap 8px         — 8 / 8 / 8 / 8
     .verifiedBuyer gap 4.6875   — .3255208333vw (4.6875 / 4.3945 / 2.9297)
     .verifiedBuyer img 16.875   — 1.171875vw    (16.875 / 15.820 / 10.547)
     .name margin-bottom 7.5     — .5208333333vw (7.5 / 7.031 / 4.688)
     .reviewFooter gap 9.375     — .6510416667vw (9.375 / 8.789 / 5.859)
     .reviewReaction gap 1.875   — .1302083333vw (1.875 / 1.758 / 1.172)
     .reviewReaction img 15      — 1.0416666667vw (15 / 14.063 / 9.375)
   Кольори: підпис і дата #a6a6a6, лічильники голосів #8f8f8f. */

/* блок «імʼя + Verified buyer» ліворуч у шапці картки */
.reviews--summary .review__identity { display: block; }
.reviews--summary .review__author { display: block; }
/* Відступ живе на сусідстві, а не на `.review__author`: у оригіналі це
   `.name{margin-bottom:7.5px}`, але там verified є завжди. У нас відгук
   може бути без нього, і тоді голий margin лишив би мертві 7.5 px. */
.reviews--summary .review__author + .review__verified { margin-top: .5208333333vw; }
.reviews--summary .review__verified {
  display: flex;
  align-items: center;
  gap: .3255208333vw;
  color: #a6a6a6;
  font-size: .78125vw;
  line-height: 1.2;
}
.reviews--summary .review__verified-icon {
  flex: none;
  width: 1.171875vw;
  height: 1.171875vw;
  /* як і зірки: в оригіналі це <img> з width/height по коробці, тобто
     object-fit:fill — `contain` дав би лист-бокс */
  background: var(--rv-verified) 50% / 100% 100% no-repeat;
}

/* права колонка шапки: зірки над датою */
.reviews--summary .review__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* футер «Was this review helpful?» + два лічильники */
.reviews--summary .review__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .6510416667vw;
}
.reviews--summary .review__helpful {
  color: #a6a6a6;
  font-size: .78125vw;
  line-height: 1.2;
}
.reviews--summary .review__reaction {
  display: flex;
  align-items: center;
  gap: .1302083333vw;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #8f8f8f;
  /* Шрифт кнопки — UA-дефолтний, а не тема. В оригіналі `.reviewReaction`
     сімейство не чіпає, і воно лишається кнопковим (обчислюється в Arial):
     цифра «0» виходить 6.27 px. Наш `base.css:27` робить глобальний
     `button{font-family:inherit}` → Inter → «0» 7.11 px, кнопка 23.98
     замість 23.14, і підпис ліворуч зсувався на 1.69 px. `revert` знімає
     саме авторське правило, лишаючи UA. Не `inherit` і не хардкод Arial. */
  font-family: revert;
  font-size: .78125vw;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}
.reviews--summary .review__reaction-icon {
  flex: none;
  width: 1.0416666667vw;
  height: 1.0416666667vw;
  background: var(--rv-up) 50% / 100% 100% no-repeat;
}
.reviews--summary .review__reaction--down .review__reaction-icon {
  background-image: var(--rv-down);
}
.reviews--summary .review__body {
  margin: 0;
  color: #111;
  font-size: .9114583333vw;
  line-height: 1.1067708333vw;
}
/* ---------- пагінація «More reviews» ----------
   В оригіналі `.pagination > .paginationButton` малюється ЗАВЖДИ, навіть коли
   всі відгуки вже на екрані. Заміряно на живому оригіналі:
     1440  .pagination 600×25   mt 23.4375   кнопка 99.27×25  fs 13.125
     1350  569.53×25            mt 21.97             93.69×25  fs 12.3047
      900  350×25               mt 14.65             65.80×25  fs 8.203
      415  383×25               mt 20               105.25×25  fs 14
   Отже mt і font-size — vw від 1440 (1.6276041667vw і .9114583333vw),
   а висота, line-height і gap — фіксовані px на всіх ширинах.
   Розмітка: <span> з текстом + <img chevron_bottom.svg> 11.25×8.4375;
   SVG там 19×11, тобто його РОЗТЯГУЮТЬ (як зірки) — звідси 100% 100%. */
.reviews--summary .reviews__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.6276041667vw 0 0;
}
.reviews--summary .reviews__more {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #767676;
  /* те саме, що на кнопках голосів: оригінал сімейство не чіпає, і кнопка
     лишається на UA-шрифті (обчислюється в Arial). Наш base.css:27 робить
     глобальний button{font-family:inherit} — знімаємо його `revert`ом. */
  font-family: revert;
  font-size: .9114583333vw;
  font-weight: 400;
  line-height: 25px;
  text-decoration: none;
  cursor: pointer;
}
.reviews--summary .reviews__more-icon {
  flex: none;
  width: .78125vw;
  height: .5859375vw;
  background: var(--rv-chevron) 50% / 100% 100% no-repeat;
}

/* ---------- колонка з медіа (сторінки `reviewsFeature--with-media`) ---------- */
.reviews-feature--media .reviews.reviews--summary {
  flex-direction: column-reverse;   /* зведення згори, список під ним */
  gap: 3.6458333333vw;
  width: 50%;
}
.reviews-feature--media .reviews--summary .reviews__col {
  width: 100%;
  margin-top: 0;
  padding: 20px 3.90625vw 85px;
}
.reviews-feature__media {
  align-self: stretch;
  display: flex;
  width: 50%;
  max-height: 960px;
}
.reviews-feature__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================= мобілка ================= */
/* межі — оригінальні: 1000 (перевертання стовпців), 768 (розміри), 599 (ширина) */
@media (max-width: 1000px) {
  .reviews-feature { flex-direction: column-reverse; align-items: center; }
  /* до 599 стовпці лишаються 50 % завширшки — оригінал центрує їх по горизонталі */
  .reviews.reviews--summary { flex-direction: column-reverse; align-items: center; }
  .reviews--summary .reviews__col { padding: 0 50px 50px; }
}

@media (max-width: 768px) {
  .reviews-feature__media { display: none; }
  .reviews-feature--media .reviews.reviews--summary { width: 100%; gap: 32px; }

  .reviews--summary .reviews__col,
  .reviews-feature--media .reviews--summary .reviews__col {
    margin-top: 0;
    padding: 16px 16px 0;
  }

  .reviews--summary .reviews__head { gap: 15px; padding: 0; }
  .reviews--summary .reviews__title { font-size: 17px; line-height: 20px; }
  .reviews--summary .reviews__card { gap: 20px; max-width: none; padding: 20px; border-radius: 12px; }
  .reviews--summary .reviews__rating-row { align-items: flex-start; gap: 14px; margin-bottom: 0; }
  .reviews--summary .reviews__score { font-size: 40px; }
  .reviews--summary .reviews__rating-meta { gap: 6px; padding-top: 4px; }
  .reviews--summary .reviews__star { width: 16px; height: 16px; }
  .reviews--summary .reviews__caption { font-size: 14px; line-height: 16px; }
  .reviews--summary .reviews__bars { gap: 15px; }
  .reviews--summary .reviews__bars li { gap: 10px; grid-template-columns: 18px 18px minmax(0, 1fr) 40px; }
  .reviews--summary .reviews__bar-label,
  .reviews--summary .reviews__bar-count { font-size: 16px; line-height: 16px; }
  .reviews--summary .reviews__bar-star { width: 16px; height: 16px; }
  .reviews--summary .reviews__bar { height: 10px; }
  .reviews--summary .reviews__write > summary {
    height: 40px;
    gap: 8px;
    padding: 0 10px;
    border-width: 1px;
    border-radius: 2px;
  }
  .reviews--summary .reviews__btn-icon { width: 16px; height: 16px; }
  .reviews--summary .reviews__btn-text { font-size: 14px; line-height: 16px; }
  .reviews--summary .review-form { margin-top: 16px; }

  .reviews--summary .reviews__sort { margin-bottom: 20px; }
  .reviews--summary .reviews__sort-label,
  .reviews--summary .reviews__sort select { font-size: 14px; line-height: 20px; }
  .reviews--summary .reviews__list { gap: 10px; }
  .reviews--summary .review { gap: 7px; max-width: none; padding: 20px; }
  /* заміряно на оригіналі при 415: .itemReviewsHead gap 8px, а не 24 */
  .reviews--summary .review__head { gap: 8px; }
  .reviews--summary .review__author { font-size: 16px; }
  .reviews--summary .review__author + .review__verified { margin-top: 8px; }
  .reviews--summary .review__verified { gap: 5px; font-size: 12px; }
  .reviews--summary .review__verified-icon { width: 18px; height: 18px; }
  .reviews--summary .review__star { width: 12px; height: 12px; }
  .reviews--summary .review__date { font-size: 12px; }
  .reviews--summary .review__footer { gap: 10px; }
  .reviews--summary .review__helpful { font-size: 12px; }
  .reviews--summary .review__reaction { gap: 2px; font-size: 12px; }
  .reviews--summary .review__reaction-icon { width: 16px; height: 16px; }
  .reviews--summary .review__body { font-size: 14px; line-height: 17px; }
  .reviews--summary .reviews__pagination { margin-top: 20px; }
  .reviews--summary .reviews__more { font-size: 14px; }
  .reviews--summary .reviews__more-icon { width: 12px; height: 9px; }
}

@media (max-width: 599px) {
  .reviews--summary .reviews__col { width: 100%; }
}

/* ═══════ модалка «Write a review» ═══════ `section.reviewsModal.modalWrapper`
   Правила зняті з САМОГО донора — читанням його CSSOM на живій сторінці,
   а не намальовані на око:

     .reviewsModal            { display:none; position:relative; z-index:2147483647 }
     .reviewsModal.openModal  { display:block }
     .reviewsModal .modal     { position:fixed; left:16.6667vw; top:8.33333vw;
                                width:66.6667vw; height:auto; background:#fff;
                                display:flex; flex-direction:column; z-index:999 }
     .reviewsModal .blurReviewsModal — ПІДКЛАДКА ОКРЕМИМ ЕЛЕМЕНТОМ, а не фоном
                                обгортки: у донора вона `position:fixed`,
                                z-index 990, і вмикається класом на обгортці.

   На 1440 це дає рівно те, що заміряно в донора: вікно 960 завширшки,
   left 240, top 120.

   ─────────────────────────────────────────────────────────────────────────
   ПАСТКА №5, ПʼЯТИЙ ВИПАДОК У ПРОЄКТІ — і вперше не про `[hidden]`, а про
   зіткнення ІМЕН. `.modal` це не лише клас донора: це ще й власний компонент
   теми в `base.css`:

       .modal { position:fixed; inset:0; z-index:var(--modal-z);
                display:grid; place-items:center; padding:16px;
                visibility:hidden; pointer-events:none }

   Наше правило `.reviewsModal .modal` (0,2,0) виграє в нього (0,1,0) — але
   ЛИШЕ по тих властивостях, які саме оголошує. `visibility` і
   `pointer-events` воно не оголошувало, тож із базового компонента
   застосовувались `hidden` і `none`. Симптом рівно той, що описав
   користувач: підкладка є, вікна немає. Заміряно на живій сторінці після
   кліку: обгортка display=flex visible 1440×900, а `.modal`
   visibility=hidden, pointer-events=none, display=grid — і разом з ним
   `.modalTitle` і `.main` теж hidden, бо `visibility` успадковується.

   Тому нижче базовий компонент гаситься ЯВНО. `inset` — теж обовʼязково:
   з `inset:0` разом із `top` виходить пара top+bottom, і вікно розтяглося б
   на весь екран замість висоти за вмістом. Той самий конфлікт імен уже
   ламав дравер кошика (панель липла до лівого краю й не ловила кліки). */
.reviewsModal {
  display: none; position: relative; z-index: 2147483647;
}
.reviewsModal.openModal { display: block; }

/* Підкладка — окремий елемент, точно як у донора. */
.reviewsModal .blurReviewsModal {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 990;
  background: transparent; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  opacity: 0; visibility: hidden; transition: .5s;
}
.reviewsModal.openModal .blurReviewsModal {
  background: rgba(102, 102, 102, .5);
  -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
  opacity: 1; visibility: visible;
}

.reviewsModal .modal {
  /* гасимо компонент `.modal` з base.css — див. пастку вище */
  inset: auto; place-items: normal; padding: 0;
  visibility: visible; pointer-events: auto;

  position: fixed; left: 16.6667vw; top: 8.33333vw;
  width: 66.6667vw; height: auto; max-width: none; max-height: none;
  display: flex; flex-direction: column;
  /* Рамка, радіус і тінь — з БАЗОВОГО `.modal` донора: `.reviewsModal .modal`
     їх не перевизначає, тож вони застосовуються. Саме через рамку в донора
     заголовок 958 при вікні 960. */
  background: #fff; border: 1px solid rgba(18, 18, 18, .1); border-radius: 2px;
  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, .08); z-index: 999;
}
@media screen and (max-width: 1000px) {
  .reviewsModal .modal { left: 8.33333vw; width: 83.3333vw; }
}
@media screen and (max-width: 768px) {
  .reviewsModal .modal { left: 0; top: 0; width: 100%; height: 100%; }
}

/* Хрестик: у донора він у КУТІ з падінгом, а не відсунутий координатами —
   клікабельна зона виходить 52×52, а не 20×20. */
.reviewsModal .closeModal {
  position: absolute; right: 0; top: 0; z-index: 2;
  padding: 1.04167vw; color: #111; opacity: .8; transition: .3s; cursor: pointer;
}
.reviewsModal .closeModal:hover { opacity: 1; transform: scale(1.2); }
.reviewsModal .closeModal .iconSvg {
  display: block; width: 1.30208vw; height: 1.30208vw; cursor: pointer;
}
.reviewsModal .closeModal .iconSvg svg { display: block; width: 100%; height: 100%; }
@media screen and (max-width: 1536px) {
  .reviewsModal .closeModal { padding: 16px; }
  .reviewsModal .closeModal .iconSvg { width: 20px; height: 20px; }
}

.reviewsModal .modalTitle {
  font-size: 1.17188vw; font-weight: 700; line-height: 1.5625vw;
  padding: 1.5625vw; text-transform: uppercase; color: #111;
}
@media screen and (max-width: 1536px) {
  .reviewsModal .modalTitle { font-size: 18px; line-height: 24px; padding: 24px; }
}
@media screen and (max-width: 768px) {
  .reviewsModal .modalTitle { font-size: 14px; line-height: 24px; }
}

/* §291, ЗВІРЕНО НА 1440 І 1920: `padding-top:6` у донора СТАЛИЙ на обох
   ширинах — не заморожена половина, чіпати не треба.
   `height:1%` разом із `flex:2 0 auto` — донорський рецепт: так блок отримує
   висоту від флекс-контейнера, а власний вміст скролиться всередині. */
.reviewsModal .main { flex: 2 0 auto; height: 1%; overflow: auto; padding-top: 6px; }

/* ═══════ §232. Форма всередині модалки ═══════
   Правила зняті з CSSOM живого донора, як і рама. Його розкладка:

     .reviewsModal .modal .main form { display:grid; grid-template-columns:1fr 1fr;
                                       gap:1.04167vw; padding:0 1.5625vw 1.5625vw }
     @media(max-width:1536px) { gap:24px; padding:0 24px 24px }
     @media(max-width:768px)  { grid-template-columns:1fr; padding:0 8.33333vw 24px }

   На 1440 це дає колонки 443+443 при гепі 24 — заміряно в донора рівно так.

   Наш склад полів вужчий (воркер зберігає лише author/body/rating/images),
   тож донорські `grid-row: 3/5` для коментаря не підходять — з чотирма
   полями вони лишили б дірки. Ставимо коментар у праву колонку на всю
   висоту явно, а ліворуч стовпчик: ім'я → фото → оцінка. */
.reviewsModal .main form {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.04167vw; padding: 0 1.5625vw 1.5625vw; position: relative;
  max-width: none; margin: 0;
}
@media screen and (max-width: 1536px) {
  .reviewsModal .main form { gap: 24px; padding: 0 24px 24px; }
}
@media screen and (max-width: 768px) {
  .reviewsModal .main form { grid-template-columns: 1fr; padding: 0 8.33333vw 24px; }
}

.reviewsModal .main form .inputGroup { margin-bottom: 0; }

/* Поля: у донора підпис схований, а видно placeholder. */
.reviewsModal .main form input[type="text"],
.reviewsModal .main form textarea {
  width: 100%; font: inherit; color: #111;
  background: #fff; border: 1px solid #e5e5e5; border-radius: 2px;
  padding: 8px 12px;
}
.reviewsModal .main form input[type="text"] { height: 40px; }
.reviewsModal .main form textarea { height: 100%; min-height: 128px; resize: vertical; }

/* Коментар — права колонка на всю висоту стовпчика полів. */
.reviewsModal .main form .commentReviews { grid-column: 2; grid-row: 1 / 4; }
@media screen and (max-width: 768px) {
  .reviewsModal .main form .commentReviews { grid-column: auto; grid-row: auto; }
}

/* Ряд «фото | оцінка»: у донора це `.fileReviewsWrap` — flex із розсуванням
   по краях, тому оцінка притиснута праворуч. */
.reviewsModal .main form .fileReviewsWrap {
  display: flex; align-items: center; justify-content: space-between;
  grid-column: 1;
}
@media screen and (max-width: 768px) {
  .reviewsModal .main form .fileReviewsWrap {
    flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  }
}
.reviewsModal .main form .fileReviews { width: 100%; }

/* Скріпка донора (`/assets/paperClip.svg`) — інлайном, бо його хост нам
   не доступний. Сам `input[type=file]` схований, клікає підпис. */
.reviewsModal .main form .fileReviews .inputfile {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.reviewsModal .main form .fileReviews label.visible-flex {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; color: #111; font-size: 15px; line-height: 24px;
}
.reviewsModal .main form .fileReviews label .iconSvg {
  display: block; width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20clip-path%3D%22url%28%23clip0_1349_6766%29%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.4274%202.18418C16.053%204.06406%2015.8469%206.90583%2013.967%208.53146L6.30062%2015.161C4.78894%2016.4682%202.50376%2016.3025%201.19654%2014.7908C1.17155%2014.7619%201.15045%2014.731%201.13321%2014.6986C1.10356%2014.6768%201.07587%2014.6514%201.05079%2014.6224C-0.21359%2013.1603%20-0.0532824%2010.95%201.40885%209.68564L8.58238%203.48231C9.62676%202.57918%2011.2055%202.69369%2012.1087%203.73807C13.0118%204.78244%2012.8973%206.36121%2011.8529%207.26434L6.93527%2011.5169C6.72639%2011.6975%206.41064%2011.6746%206.23002%2011.4657C6.04939%2011.2568%206.07229%2010.9411%206.28117%2010.7605L11.1988%206.50793C11.8254%205.96605%2011.8941%205.01879%2011.3522%204.39217C10.8104%203.76554%209.86311%203.69684%209.23649%204.23871L2.06295%2010.442C1.01857%2011.3452%200.904066%2012.9239%201.80719%2013.9683C1.83219%2013.9972%201.85328%2014.0282%201.87053%2014.0605C1.90017%2014.0823%201.92786%2014.1077%201.95294%2014.1367C2.89892%2015.2307%204.55259%2015.3506%205.64651%2014.4046L13.3129%207.77506C14.7751%206.51068%2014.9354%204.30041%2013.671%202.83828L13.3066%202.41693C12.0974%201.01854%2010.0091%200.801789%208.53839%201.92203L3.18223%206.00193C2.96256%206.16926%202.64884%206.12683%202.48151%205.90716C2.31418%205.68748%202.35661%205.37376%202.57628%205.20643L7.93244%201.12653C9.8233%20-0.313783%2012.5083%20-0.0351088%2014.063%201.76283L14.4274%202.18418Z%22%20fill%3D%22%23333333%22%2F%3E%20%3C%2Fg%3E%20%3Cdefs%3E%20%3CclipPath%20id%3D%22clip0_1349_6766%22%3E%20%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%20%3C%2FclipPath%3E%20%3C%2Fdefs%3E%20%3C%2Fsvg%3E") center / contain no-repeat;
}
.reviewsModal .main form .fileReviews__hint {
  display: block; margin-top: 4px; color: #999; font-size: 13px; line-height: 18px;
}
/* Коли прев'ю ще немає, порожня стрічка не має додавати відступу. */
.reviewsModal .main form .filePreviewList:empty { display: none; }

/* §284. Прев'ю доданих файлів. Числа були зняті з донора на 1440 і там
   ЗАМОРОЖЕНІ — на 1920 він росте, ми стояли. Стан відтворено `SET_FILE`
   (без прикріпленого файлу цих вузлів у DOM немає взагалі, тому кандидат
   і висів неперевіреним). Заміряно 1440→1920: плитка 64→80, радіус 8→10,
   геп 8→10, відступ 10→12.5, хрестик 20→25, його зсув 4→5. */
.reviewsModal .main form .filePreviewList {
  display: flex; flex-wrap: wrap; gap: .5208333333vw; margin-top: .6510416667vw;
}
.reviewsModal .main form .filePreviewItem {
  position: relative; width: 4.1666666667vw; height: 4.1666666667vw;
  background: #f5f5f5; border-radius: .5208333333vw; overflow: hidden;
}
@media (max-width: 1536px) {
  .reviewsModal .main form .filePreviewList { gap: 8px; margin-top: 10px; }
  .reviewsModal .main form .filePreviewItem { width: 64px; height: 64px; border-radius: 8px; }
}
.reviewsModal .main form .filePreviewImg {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.reviewsModal .main form .filePreviewDelete {
  position: absolute; right: .2604166667vw; top: .2604166667vw;
  width: 1.3020833333vw; height: 1.3020833333vw;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: rgba(18, 18, 18, .75);
  color: #fff; font-size: 14px; line-height: 1; cursor: pointer; padding: 0;
}
@media (max-width: 1536px) {
  .reviewsModal .main form .filePreviewDelete { right: 4px; top: 4px; width: 20px; height: 20px; }
}

/* ОЦІНКА. Донорський рецепт без жодного JS:
   · сам радіо винесений за екран (`left:-100vw`), клікає підпис;
   · підпис за замовчуванням — ЗАПОВНЕНА зірка;
   · порожніють ті, що ПІСЛЯ обраної (`input:checked ~ input + label`)
     і після наведеної (`input:hover ~ input + label`);
   · поки не обрано нічого, група в стані `:indeterminate` — порожніють усі.
   Через це розмітка мусить чергуватись input→label без обгорток. */
.reviewsModal .main form .rating {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
}
.reviewsModal .main form .rating input { position: absolute; left: -100vw; }
.reviewsModal .main form .rating label {
  display: block; width: 1.5625vw; height: 1.5625vw;
  background: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2215%22%20viewBox%3D%220%200%2016%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M7.68525%200L10.061%204.77702L15.3733%205.54305L11.5293%209.26145L12.4367%2014.5119L7.68525%2012.033L2.93378%2014.5119L3.84123%209.26145L-0.00279331%205.54305L5.30952%204.77702L7.68525%200Z%22%20fill%3D%22%23F5B400%22%2F%3E%20%3C%2Fsvg%3E") 50% center / 1.30208vw no-repeat;
  overflow: hidden; text-indent: -10000000px; cursor: pointer;
}
@media screen and (max-width: 1536px) {
  .reviewsModal .main form .rating label {
    width: 24px; height: 24px; background-size: 20px;
  }
}
.reviewsModal .main form .rating:not(:hover) input:indeterminate + label,
.reviewsModal .main form .rating:not(:hover) input:checked ~ input + label,
.reviewsModal .main form .rating input:hover ~ input + label {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2215%22%20viewBox%3D%220%200%2016%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M9.61328%205L9.73047%205.23438L9.98926%205.27148L14.292%205.8916L11.1816%208.90234L10.9912%209.08594L11.0361%209.34668L11.7715%2013.6006L7.91699%2011.5898L7.68555%2011.4688L7.4541%2011.5898L3.59863%2013.6006L4.33398%209.34668L4.37891%209.08594L4.18848%208.90234L1.07715%205.8916L5.38086%205.27148L5.64062%205.23438L5.75684%205L7.68457%201.12207L9.61328%205Z%22%20stroke%3D%22%23F5B400%22%2F%3E%20%3C%2Fsvg%3E");
}

/* Кнопка: у донора через обидві колонки, по центру, 16.9271vw (243.8 на 1440).
   §291, ЗВІРЕНО НА 1440 І 1920: ширина `vw` була правильна (243.8→325), а
   висота і падінг — заморожені: у донора 40→50 і 10→12.5. */
.reviewsModal .main form .buttonWrap {
  display: flex; align-items: center; justify-content: center; grid-column: 1 / 3;
}
@media screen and (max-width: 768px) {
  .reviewsModal .main form .buttonWrap { grid-column: 1 / 2; }
}
.reviewsModal .main form .buttonWrap .btn {
  width: 16.9271vw; height: 2.6041666667vw; padding: 0 .6510416667vw;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 1536px) {
  .reviewsModal .main form .buttonWrap .btn { height: 40px; padding: 0 10px; }
}
@media screen and (max-width: 768px) {
  .reviewsModal .main form .buttonWrap .btn { width: 200px; }
}

/* Службові рядки під кнопкою — через обидві колонки, щоб не ламали сітку.
   На мобілці колонка ОДНА, і `1 / 3` тут створював НЕЯВНУ другу: сітка
   лишалась двоколонковою попри `grid-template-columns:1fr`, а причина була
   не в самому правилі колонок (воно застосовувалось — падінг із того ж
   блоку доїжджав), а в елементах, що просили другу колонку. Тому кожен
   такий елемент має власне скидання на 768. */
.reviewsModal .main form .review-form__note,
.reviewsModal .main form .review-form__status { grid-column: 1 / 3; margin: 0; }
@media screen and (max-width: 768px) {
  .reviewsModal .main form .review-form__note,
  .reviewsModal .main form .review-form__status { grid-column: 1 / 2; }
  .reviewsModal .main form .fileReviewsWrap { grid-column: 1 / 2; }
}

/* Кнопка «Write a review» — `.reviews_btn.btn.btn__white` донора.
   Заміряно на 1440: бокс 384.38 × 42.1875, `padding: 0 10px`, `gap: 8px`,
   білий фон, рамка 1px `rgb(51,51,51)` (не #111), радіус 2.
   Усередині `.wrap` (flex, gap 8) з іконкою 15×15 і текстом 14.0625/26.2.

   ПУНКТ 238, ЧОМУ ТЕКСТ З ІКОНКОЮ БУВ НЕ ПО ЦЕНТРУ. Це родина вад №5 з
   брифу — «інший клас того самого елемента» плюс вага. Вище в цьому ж
   файлі стоїть правило застарілої `<details>`-гілки
   `.reviews--summary .reviews__write{display:block}` — (0,2,0), а тут було
   `button.reviews__write` — (0,1,1). Блочне вигравало: кнопка не ставала
   flex, `.wrap` розтягувався на всю ширину (заміряно 362.38 замість
   донорських 111.83) і `justify-content:center` не мав на що діяти.
   Тому селектор піднято до `.reviews--summary button.reviews__write`
   (0,2,1) — і саме з класом-предком, як велить рецепт брифу.

   Гарнітура — донорська разом з його недоглядом: `.btn{font-family:Inter,
   sans-serif}` у `home.css` є, а сам Inter не підключений, тож напис
   малюється системним Arial. Без цього рядка «Write a review» виходив
   91 px замість донорських 88.83. */
.reviews--summary button.reviews__write,
button.reviews__write {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 42.1875px; padding: 0 10px;
  background: #fff; border: 1px solid #333; border-radius: 2px;
  color: #111; cursor: pointer; gap: 8px;
  /* донорські значення на самій кнопці: 13.3333px/normal Arial (Inter не
     підключений), а не успадковані 16/27.36 від теми */
  font: 13.3333px Inter, sans-serif; line-height: normal;
}
/* §289, звірено на 1440 і 1920: у донора `.reviews_btn .wrap` gap 8 → 10. */
button.reviews__write .wrap { display: flex; align-items: center; justify-content: center; gap: .5208333333vw; }
@media (max-width: 1536px) { button.reviews__write .wrap { gap: 8px; } }
/* колір іконки в донора #111, не #333 — заміряно на живій кнопці */
button.reviews__write .iconSvg { display: block; width: 1.0416666667vw; height: 1.0416666667vw; color: #111; }
/* §281, клас A. База саме 1.0416666667vw, а не 15/15.36=0.9765625: заміряно
   на живій кнопці донора — 15×15 @1440 і 20×20 @1920. 0.9765625 дало б 18.75.
   Тобто в донора vw-база (16 на 1536) і px-гілка (15) РОЗХОДЯТЬСЯ — переносимо
   як є, це його число, а не наше округлення. */
@media (max-width: 1536px) {
  button.reviews__write .iconSvg { width: 15px; height: 15px; }
}
button.reviews__write .iconSvg svg { display: block; width: 100%; height: 100%; }
/* §273, клас A. Кегль тут ТЕЧЕ і в донора гілки на 1536 не має взагалі:
   `.9765625vw` дає 14.0625 на 1440 і 18.75 на 1920 — заміряно на живій
   кнопці. Стояла заморожена піксельна половина 14.0625, тож на широкому
   екрані підпис лишався дрібним. Крок 26.2 у нього сталий. */
button.reviews__write .text { font-size: .9765625vw; line-height: 26.2px; color: #111; }
/* Долівка донора стоїть на 768, а не на 1000 (заміряно поточково: 769 →
   7.51px, 768 → 14px). Вище неї кегль тече чистим vw без гілки на 1536 —
   тобто на 900 у нього справді 8.79px. Повторюємо як є: без цієї гілки
   `.9765625vw` давало на 415 рівно 4.05px. */
@media screen and (max-width: 768px) {
  button.reviews__write .text { font-size: 14px; line-height: 16px; }
}
@media screen and (max-width: 1000px) {
  .reviews--summary button.reviews__write,
  button.reviews__write { height: 40px; }
}

/* ═══════ кастомний дропдаун сортування (пункт 105) ═══════
   Голова з поточним значенням і стрілка, що повертається на 180° за .3s —
   той самий рецепт, що у фільтрі блогу. Розкриванням керує slide-toggle.js
   через донорські класи `jsSlideToggle*`. */
.reviews__sort { --rv-chevron-down: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/></svg>"); }
.reviews__sort-select { position: relative; }
.reviews__sort-head {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  color: #111; font-size: 15px; line-height: 24px;
}
.reviews__sort-arrow {
  flex: 0 0 auto; width: 16px; height: 16px; background: currentColor;
  transform: rotate(0deg); transition: transform .3s;
  -webkit-mask: var(--rv-chevron-down) center / contain no-repeat;
          mask: var(--rv-chevron-down) center / contain no-repeat;
}
.reviews__sort.active .reviews__sort-arrow { transform: rotate(180deg); }
.reviews__sort-list {
  display: none; position: absolute; top: 100%; left: 0; z-index: 20;
  min-width: 100%; margin-top: 6px; padding: 6px 0;
  background: #fff; border: 1px solid #dedede; border-radius: 2px;
}
.reviews__sort.active .reviews__sort-list { display: block; }
.reviews__sort-option {
  display: block; width: 100%; padding: 8px 14px;
  background: none; border: 0; cursor: pointer; text-align: left;
  color: #767676; font: inherit; font-size: 15px; line-height: 24px; white-space: nowrap;
}
.reviews__sort-option:hover { color: #111; }
.reviews__sort-option.is-active { color: #111; text-decoration: underline; }

/* ============================================================
   ПУНКТ 237 — зірочки обовʼязкових полів і рядок помилки оцінки
   ------------------------------------------------------------
   Донор позначає обовʼязкове поле класом `validateStar` на `.inputGroup`, а
   сама зірка — псевдоелемент. Правило взяте з `donor-css/home.css` дослівно
   (там воно глобальне; у нас скоупимо на форму відгуку, бо глобальний
   `.validateStar` зачепив би чужі шаблони):

     .validateStar:after{background:#fff;border-radius:50%;color:#999;
       content:"*";font-size:1.3020833333vw;height:.9765625vw;line-height:1;
       position:absolute;right:.6510416667vw;text-align:center;
       top:-.3255208333vw;width:.9765625vw;z-index:8}
     @media (max-width:1536px){…font-size:20px;height:15px;right:10px;
       top:-5px;width:15px}
   ============================================================ */
.review-form .validateStar { position: relative; }
.review-form .validateStar:after {
  background: #fff;
  border-radius: 50%;
  color: #999;
  content: "*";
  font-size: 1.3020833333vw;
  height: .9765625vw;
  line-height: 1;
  position: absolute;
  right: .6510416667vw;
  text-align: center;
  top: -.3255208333vw;
  width: .9765625vw;
  z-index: 8;
}
@media screen and (max-width: 1536px) {
  .review-form .validateStar:after {
    font-size: 20px; height: 15px; right: 10px; top: -5px; width: 15px;
  }
}

/* Рядок помилки під зірками — донорський `.errorText > small` (#ff5f4a 14/16).
   Показується так само, як решта підказок форми: поки поле не чіпали, він
   прихований. */
/* §285. Донор не ставить на `small` НІЧОГО: кегль там — браузерні 0.8333em
   типового `<small>`, а vw-пара живе на БАТЬКОВІ. Заміряно на трьох ширинах:
   батько 14/16 @1440, 17.5/20 @1920, 14/16 @415; `small` рівно 0.8333 від
   нього — 11.6667 / 14.5833 / 11.6667. Окремої мобільної гілки в донора
   НЕМАЄ: 415 збігається з 1440 до пікселя (317.2×17 і 197.2×14), тож
   11.67px на мобілці — його власне число, а не наш недогляд.
   Тому кегль із `small` знято, а пара перенесена туди, де вона в донора. */
.review-form .rating .errorText {
  display: none; width: 100%;
  font-size: .9114583333vw; line-height: 1.0416666667vw;
}
.review-form .rating .errorText small { color: #ff5f4a; }
@media (max-width: 1536px) {
  .review-form .rating .errorText { font-size: 14px; line-height: 16px; }
}
.review-form .rating.is-invalid .errorText { display: block; }

/* Напис під полем e-mail — контракт `form-validate.js` (`[data-err]`) */
.review-form .inputGroup [data-err] {
  color: #ff5f4a; display: block; font-size: 14px; line-height: 16px; width: 100%;
}
.review-form .inputGroup [data-err][hidden] { display: none; }

/* Підпис «Attach photos» і напис кнопки — донорські метрики (пункт 237).
   Заміряно спільним зондом на відкритій модалці донора:
     label[for=fileReviews] span   14/16 PCTL9600   88.6×16
     button[type=submit]           13.3333/normal Inter
     button[type=submit] .text     14/16 Inter      32.7×16
   У нас було 15/24 і 13/22.23 на брендовому шрифті — звідси і «не той
   текст додавання фото» на вигляд. Гарнітура кнопки донорська разом з
   недоглядом: `.btn{font-family:Inter}` при непідключеному Inter дає Arial. */
/* §281, клас A. Донор: 14/16 @1440 → 17.5/20 @1920 (88.6×16 → 110.8×20). */
.review-form .fileReviews label[for="reviewFiles"] span {
  font-size: .9114583333vw;
  line-height: 1.0416666667vw;
}
@media (max-width: 1536px) {
  .review-form .fileReviews label[for="reviewFiles"] span { font-size: 14px; line-height: 16px; }
}
.review-form button[type="submit"] {
  font: 13.3333px Inter, sans-serif;
  line-height: normal;
}
/* §281, клас A. Донор: 14/16 @1440 → 17.5/20 @1920 (32.7×16 → 40.9×20). */
.review-form button[type="submit"] .text {
  font-family: Inter, sans-serif;
  font-size: .9114583333vw;
  line-height: 1.0416666667vw;
}
@media (max-width: 1536px) {
  .review-form button[type="submit"] .text { font-size: 14px; line-height: 16px; }
}

/* ---------- product-text.css ---------- */
/* Тексти товару: вміст акордеонів і плашки 50/50.
 *
 * Обидва місця на старому сайті — той самий блок `.description`, тому й
 * метрики тут одні на два контексти. Джерело: `original/site-assets/css/product.css`.
 *
 * Акордеони віддають РОЗМІТКУ (rich text) замість чистого рядка, і разом із
 * нею з'явились справжні абзаци, списки та жирні заголовки. Доти там був один
 * суцільний блок, і крок між абзацами був байдужий; тепер він визначає висоту
 * секції.
 *
 * ЩО ЗАМІРЯНО НА ЖИВОМУ ОРИГІНАЛІ (`original/site/*` + `site-assets/css`,
 * підняте локально й зняте headless-хромом — воно відтворює заморожений
 * еталон 1 в 1: `.featureProduct` 475, рамка 405, `.technology` 167 на 415):
 *
 *   .description                    font 15/24 (≤1536), .9765625vw/1.5625vw вище
 *   .description div, .description p  margin-bottom .9765625vw; 15px тільки ≤768
 *   .description b                  18/24 (≤1536), 1.171875vw/1.5625vw вище
 *   ul                              ПРАВИЛА НЕМА ЗОВСІМ — тобто браузерні
 *                                   типові `margin:1em 0; padding-left:40px`,
 *                                   а `li` успадковує line-height від
 *                                   `.description`, тобто 24, а не `normal`
 *
 * `padding-left:40px` і `margin:1em 0` у списку — це px і em, не vw: на 1350
 * vw-варіант давав 37.5 і 14.06 замість 40 і 15.
 *
 * ПАСТКА, НА ЯКІЙ СТОЯЛИ ЧИСЛА: `li{line-height:normal}` було знято з
 * `clip-big-pink`, а це один із 24 товарів, де текст вставлений із Word і
 * несе інлайновий `line-height:normal` на КОЖНОМУ абзаці й пункті. У чистих
 * товарах крок пункту — 24. Правило коштувало 40 px на одному лише
 * `smart-body-cream-seasalt` (список із 4 пунктів, 152 замість 192).
 * Артефакт вставки: 48 блоків із 1027 в акордеонах, 7 зі 138 у плашках.
 *
 * BFC. У оригіналі текст завжди лежить у блоці, який НЕ пропускає крайні
 * поля назовні: в акордеоні це `.slideToggleContentWrap{overflow:auto}`,
 * у плашці — `.description`, яка є flex-елементом. Тому нижнє поле
 * останнього абзацу лишається ВСЕРЕДИНІ, і під текстом стоїть
 * 15 + 20 = 35 в акордеоні і 15 + 10 = 25 у плашці. Наш бік давав 34 і 10,
 * бо `p:last-child{margin-bottom:0}` з `base.css` це поле зрізав.
 * Звідси `display:flow-root` і явне поле в `:last-child`.
 */

/* Розмітка акордеонів — донорська (`.slideToggleWrap` → `.slideToggleContentWrap`),
 * тож селектори тут ідуть по ній, а не по знятому <details class="product__accordion">.
 */

/* ---------- спільне: обгортка metafield_tag і BFC ---------- */
/* `metafield_tag` загортає розмітку в `.metafield-rich_text_field` — це теж
   `div`, і правило «кожен div має поле 15» вішало відступ на неї саму. */
.slideToggleWrap .rte > .metafield-rich_text_field,
.product-feature__text .rte > .metafield-rich_text_field { margin: 0; }

.product__detail-row .slideToggleContentWrap > .rte,
.product-feature__text .rte { display: flow-root; }

/* ---------- кегль і крок ---------- */
.slideToggleWrap .rte,
.slideToggleWrap .rte p,
.slideToggleWrap .rte div,
.slideToggleWrap .rte li,
.product-feature__text .rte,
.product-feature__text .rte p,
.product-feature__text .rte div,
.product-feature__text .rte li {
  font-size: 0.9765625vw;
  line-height: 1.5625vw;
}
.slideToggleWrap .rte b,
.slideToggleWrap .rte strong,
.product-feature__text .rte b,
.product-feature__text .rte strong {
  /* `.description b{font-size:18px}` — саме так оригінал робить заголовок
     усередині тексту. Це не окремий елемент, а жирний рядок у потоці:
     110 блоків зі 138 у плашці починаються саме ним. */
  font-size: 1.171875vw;
  line-height: 1.5625vw;
  font-weight: 700;
}

@media screen and (max-width: 1536px) {
  .slideToggleWrap .rte,
  .slideToggleWrap .rte p,
  .slideToggleWrap .rte div,
  .slideToggleWrap .rte li,
  .product-feature__text .rte,
  .product-feature__text .rte p,
  .product-feature__text .rte div,
  .product-feature__text .rte li {
    font-size: 15px;
    line-height: 24px;
  }
  .slideToggleWrap .rte b,
  .slideToggleWrap .rte strong,
  .product-feature__text .rte b,
  .product-feature__text .rte strong {
    font-size: 18px;
    line-height: 24px;
  }
}

/* ---------- поля між абзацами ---------- */
/* `.description div,.description p{margin-bottom:.9765625vw}` — vw аж до 768,
   і тільки там стає 15px. На 1440 це 14.06, на 1350 — 13.18. */
.slideToggleWrap .rte p,
.slideToggleWrap .rte div,
.product-feature__text .rte p,
.product-feature__text .rte div { margin: 0 0 0.9765625vw; }
/* base.css має наскрізне `p:last-child{margin-bottom:0}`; в оригіналі це поле
   лишається — його тримає BFC (див. шапку). */
.slideToggleWrap .rte > .metafield-rich_text_field { margin-bottom: 0; }
.product-feature__text .rte > .metafield-rich_text_field { margin-bottom: 0; }

@media screen and (max-width: 768px) {
  .slideToggleWrap .rte p,
  .slideToggleWrap .rte div,
  .product-feature__text .rte p,
  .product-feature__text .rte div { margin-bottom: 15px; }
}

/* ---------- списки ---------- */
/* Правил на `ul` в оригіналі нема — працюють типові браузерні. Виписуємо їх
   явно, бо тема має власні скиди списків. */
.slideToggleWrap .rte ul,
.slideToggleWrap .rte ol,
.product-feature__text .rte ul,
.product-feature__text .rte ol {
  margin: 1em 0;
  padding-left: 40px;
  list-style: disc outside;
}
.slideToggleWrap .rte ol,
.product-feature__text .rte ol { list-style: decimal outside; }
.slideToggleWrap .rte li,
.product-feature__text .rte li { margin: 0; display: list-item; }

/* Перенос рядка всередині абзацу.
 *
 * Схема `rich_text_field` не має вузла `<br>` — перенос лишається символом
 * `\n` усередині тексту, а звичайний HTML його схлопує в пробіл. Без цього
 * правила «• Avoid direct contact with water<br>• Avoid contact…» злипається
 * в один рядок. 116 фрагментів каталогу несуть такі переноси.
 *
 * Саме `pre-line`, а не `pre-wrap`: перший схлопує зайві пробіли й тримає
 * перенос рядків, другий зберіг би ще й відступи з вихідного HTML. */
.slideToggleWrap .rte p,
.product-feature__text .rte p { white-space: pre-line; }


/* Тексти, набрані у Word.

   На 24 товарах донор несе інлайновий `line-height:normal` на кожному `<p>`
   і `<li>` описів — крок виходить ~18 px замість 24. У нашому
   `rich_text_field` інлайнових стилів немає й структура JSON у Word- і
   не-Word-текстах однакова, тож розрізнити їх у темі нічим: сигнал живе лише
   в метаполі `custom.tight_lh`. Заміряно на живому донорі: 24 сторінки,
   +1973 px різниці (акордеони 1560, плашки 413), від +30 до +132 на сторінку.
   Глобальне правило зіпсувало б решту 193 сторінки. */
/* Клас `product--tight` висить на ТРЬОХ коробках, а не на одній.

   Спершу він стояв лише на `section.product` — і правило не діяло НІДЕ:
   ряд акордеонів (`.product__detail-row`) і плашки (`.product-features`)
   лежать ПОЗА `.product`, сусідніми секціями (див. коментар про ряд у
   sections/main-product.liquid). `.product--tight .slideToggleWrap`
   вимагає предка, якого там нема, тож усі 24 сторінки лишались із кроком
   24 px. Перевірено на `parfum-peonyholic-50-ml-eu`: клас на сторінці був
   (`.product--tight` знаходився), а обчислений line-height абзацу — 24px.
   Тепер клас дублюється на обидві сусідні секції, і предок є завжди. */
.product--tight .slideToggleWrap .rte p,
.product--tight .slideToggleWrap .rte li,
.product--tight .product-feature__text .rte p,
.product--tight .product-feature__text .rte li { line-height: normal; }

/* ---------- search.css ---------- */
/* §305, ЯК ВІДКРИТИ МОДАЛКУ ПОШУКУ ДЛЯ ЗАМІРУ — не шукати вдруге.
   Наш десктопний вузол — `<side-drawer id="search-modal">`, мобільний —
   `#search-modal-mob`; який із двох, вирішує `predictive-search.js` за
   `window.innerWidth >= 1001`. Тригер — будь-який `[data-search-open]`,
   на десктопі це `.site-header__search-left`.

     OPEN_SEL='.site-header__search-left' node _pmeasure.mjs new / 1440 '[…]'
     --click='.site-header__search-left' --type='[data-search-input]::zzzqqq'

   У донора модалку відкриває КЛАС: `OPEN_CLASS='.searchModal:active'`,
   тригер — `.jsSearch`, поле — `.searchInput`.

   ПАСТКА, через яку §291 записав це як «стан не відтворюється»: зонд глушив
   `side-drawer` і знімав маску лише для `--click`/`--type`, а для
   `OPEN_SEL`/`OPEN_CLASS` — ні. Модалка чесно відкривалась і мовчки лишалась
   0×0. Виправлено в `_pmeasure.mjs`. Кошик цього не зачепило: його
   `.cardWrapper` — звичайний div, не `side-drawer`.

   §291/§305, ЗВІРЕНО НА 1440 І 1920 — ВАД У ЦЬОМУ ФАЙЛІ НЕМАЄ:
     · `.searchModal .iconSvg` 20×20 → 25×25 — **Д=Н**;
     · `.ss-item` 291.5→389, нижнє поле 30→40 — **Д=Н**;
     · іконки `.ss-popular`/`.ss-recent` не рендеряться з ЖОДНОГО боку;
     · кнопка порожнього стану — свідоме відхилення (§256, наша `.button`
       на пряме прохання користувача), тому донорські 2→2.5 і 10→12.5 до
       неї не застосовуються. */
/* ============================================================
   ПОШУК — CSS ДОНОРА
   ------------------------------------------------------------
   Знято з eu.sistersaroma.com: `.searchModal` (десктоп) і
   `.mobileModalSearch` (телефон). Правила його, порядок його,
   числа його — файл перенесено цілком, без переверстки.

   Два відступи, обидва вимушені:

   1. `.searchModal.active` → `.searchModal.drawer--open`. Клас `.active`
      у донора вішає його власний скрипт; у нас відкриттям керує
      `side-drawer`, і він ставить `drawer--open`. Внутрішні `.active`
      (список результатів, «нічого не знайдено», розгорнута категорія)
      лишились як є — їх так само ставить скрипт.
   2. Стрілка категорій ішла `url(/images/SelectChevronDown.svg)` з його
      домену. Той самий контур лежить тут інлайном: чужий хост у CSS
      теми означав би зовнішній запит на кожне відкриття пошуку.
   ============================================================ */

.searchModal{height:auto;left:0;max-height:calc(100% - 6.57552vw);opacity:0;overflow:auto;position:fixed;visibility:hidden;width:100%;z-index:995}
@media screen and (max-width:1536px) {
.searchModal{max-height:calc(100% - 101px)}
}
@media screen and (max-width:1000px) {
.searchModal{max-height:calc(100% - 124px)}
}
@media screen and (max-width:560px) {
.searchModal{max-height:calc(100% - 140px)}
}
.searchModal .searchInputWrap{align-items:center;background:#fff;display:flex;height:8.3333333333vw;justify-content:space-between;padding:0 3.3854166667vw 0 4.1666666667vw}
@media screen and (max-width:768px) {
.searchModal .searchInputWrap{flex-wrap:wrap;height:70px;padding:0 10px 0 20px}
}
.searchModal .searchInputWrap .searchInput{width:100%}
@media screen and (max-width:768px) {
.searchModal .searchInputWrap .searchInput{width:calc(100% - 40px)}
}
.searchModal .searchInputWrap .searchInput input{caret-shape:block;border:none;border-radius:0;color:#333;font-size:2.0833333333vw;font-weight:700;height:auto;line-height:2.6041666667vw;padding:0;width:100%}
@media screen and (max-width:1536px) {
.searchModal .searchInputWrap .searchInput input{font-size:32px;line-height:40px}
}
@media screen and (max-width:768px) {
.searchModal .searchInputWrap .searchInput input{font-size:18px;line-height:24px;text-transform:uppercase}
}
.searchModal .searchInputWrap .searchInput input::-webkit-input-placeholder{-webkit-transition:opacity .3s ease;transition:opacity .3s ease}
.searchModal .searchInputWrap .searchInput input:-moz-placeholder,.searchModal .searchInputWrap .searchInput input::-moz-placeholder{-moz-transition:opacity .3s ease;transition:opacity .3s ease}
.searchModal .searchInputWrap .searchInput input:-ms-input-placeholder{-ms-transition:opacity .3s ease;transition:opacity .3s ease}
.searchModal .searchInputWrap .searchInput input:focus::-webkit-input-placeholder{opacity:0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}
.searchModal .searchInputWrap .searchInput input:focus:-moz-placeholder,.searchModal .searchInputWrap .searchInput input:focus::-moz-placeholder{opacity:0;-moz-transition:opacity .3s ease;transition:opacity .3s ease}
.searchModal .searchInputWrap .searchInput input:focus:-ms-input-placeholder{opacity:0;-ms-transition:opacity .3s ease;transition:opacity .3s ease}
.searchModal .searchInputWrap .searchInput input::-webkit-input-placeholder{color:#999;color:#dedede;font-family:PCTL9600,sans-serif;font-size:.9114583333vw;font-size:2.0833333333vw;font-weight:700;line-height:1.0416666667vw;line-height:2.6041666667vw;opacity:1;text-indent:8px}
@media screen and (max-width:1536px) {
.searchModal .searchInputWrap .searchInput input::-webkit-input-placeholder{font-size:14px;font-size:32px;line-height:16px;line-height:40px}
}
@media screen and (max-width:768px) {
.searchModal .searchInputWrap .searchInput input::-webkit-input-placeholder{font-size:18px;line-height:24px;text-transform:uppercase}
}
.searchModal .searchInputWrap .searchInput input:-moz-placeholder{color:#999;color:#dedede;font-family:PCTL9600,sans-serif;font-size:.9114583333vw;font-size:2.0833333333vw;font-weight:700;line-height:1.0416666667vw;line-height:2.6041666667vw;opacity:1;text-indent:8px}
@media screen and (max-width:1536px) {
.searchModal .searchInputWrap .searchInput input:-moz-placeholder{font-size:14px;font-size:32px;line-height:16px;line-height:40px}
}
@media screen and (max-width:768px) {
.searchModal .searchInputWrap .searchInput input:-moz-placeholder{font-size:18px;line-height:24px;text-transform:uppercase}
}
@media screen and (max-width:1536px) {
.searchModal .searchInputWrap .searchInput input::-moz-placeholder{font-size:14px;font-size:32px;line-height:16px;line-height:40px}
}
@media screen and (max-width:768px) {
.searchModal .searchInputWrap .searchInput input::-moz-placeholder{font-size:18px;line-height:24px;text-transform:uppercase}
}
.searchModal .searchInputWrap .searchInput input:-ms-input-placeholder{color:#999;color:#dedede;font-family:PCTL9600,sans-serif;font-size:.9114583333vw;font-size:2.0833333333vw;font-weight:700;line-height:1.0416666667vw;line-height:2.6041666667vw;opacity:1;text-indent:8px}
@media screen and (max-width:1536px) {
.searchModal .searchInputWrap .searchInput input:-ms-input-placeholder{font-size:14px;line-height:16px}
}
@media screen and (max-width:1536px) {
.searchModal .searchInputWrap .searchInput input:-ms-input-placeholder{font-size:32px;line-height:40px}
}
@media screen and (max-width:768px) {
.searchModal .searchInputWrap .searchInput input:-ms-input-placeholder{font-size:18px;line-height:24px;text-transform:uppercase}
}
.searchModal .searchInputWrap .searchInput input::-ms-input-placeholder{color:#999;color:#dedede;font-family:PCTL9600,sans-serif;font-size:.9114583333vw;font-size:2.0833333333vw;font-weight:700;line-height:1.0416666667vw;line-height:2.6041666667vw;opacity:1;text-indent:8px}
@media screen and (max-width:1536px) {
.searchModal .searchInputWrap .searchInput input::-ms-input-placeholder{font-size:14px;line-height:16px}
}
@media screen and (max-width:1536px) {
.searchModal .searchInputWrap .searchInput input::-ms-input-placeholder{font-size:32px;line-height:40px}
}
@media screen and (max-width:768px) {
.searchModal .searchInputWrap .searchInput input::-ms-input-placeholder{font-size:18px;line-height:24px;text-transform:uppercase}
}
.searchModal .searchInputWrap .searchInput input::-moz-placeholder{color:#999;color:#dedede;font-family:PCTL9600,sans-serif;font-size:.9114583333vw;font-size:2.0833333333vw;font-weight:700;line-height:1.0416666667vw;line-height:2.6041666667vw;opacity:1;text-indent:8px}
.searchModal .searchInputWrap .searchInput input::placeholder{color:#999;color:#dedede;font-family:PCTL9600,sans-serif;font-size:.9114583333vw;font-size:2.0833333333vw;font-weight:700;line-height:1.0416666667vw;line-height:2.6041666667vw;opacity:1;text-indent:8px}
@media screen and (max-width:1536px) {
.searchModal .searchInputWrap .searchInput input::-moz-placeholder{font-size:14px;line-height:16px}
.searchModal .searchInputWrap .searchInput input::placeholder{font-size:14px;line-height:16px}
}
@media screen and (max-width:1536px) {
.searchModal .searchInputWrap .searchInput input::-moz-placeholder{font-size:32px;line-height:40px}
.searchModal .searchInputWrap .searchInput input::placeholder{font-size:32px;line-height:40px}
}
@media screen and (max-width:768px) {
.searchModal .searchInputWrap .searchInput input::-moz-placeholder{font-size:18px;line-height:24px;text-transform:uppercase}
.searchModal .searchInputWrap .searchInput input::placeholder{font-size:18px;line-height:24px;text-transform:uppercase}
}
.searchModal .searchInputWrap .close{color:#111;opacity:.8;transition:.3s}
.searchModal .searchInputWrap .close:hover{opacity:1;transform:scale(1.2)}
.searchModal .searchInputWrap .close .iconSvg{cursor:pointer;display:block;height:1.3020833333vw;width:1.3020833333vw}
@media screen and (max-width:1536px) {
.searchModal .searchInputWrap .close .iconSvg{height:20px;width:20px}
}
.searchModal .searchInputWrap .close .iconSvg svg{display:block;height:100%;width:100%}
@media screen and (max-width:768px) {
.searchModal .searchInputWrap .close{align-items:center;display:flex;flex:1 40px;height:40px;justify-content:center;width:40px}
}
.searchModal .searchResult{background:#fff;display:none;padding:0 3.3854166667vw 4.5572916667vw 4.1666666667vw}
@media screen and (max-width:1000px) {
.searchModal .searchResult{padding:0 8.3333333333vw 43px}
}
@media screen and (max-width:768px) {
.searchModal .searchResult .searchResultItem{margin-bottom:8px}
}
.searchModal .searchResult .searchResultItem a{color:#333;font-size:1.171875vw;line-height:1.5625vw;line-height:2.6041666667vw;text-decoration:none}
@media screen and (max-width:1536px) {
.searchModal .searchResult .searchResultItem a{font-size:18px;line-height:24px;line-height:40px}
}
@media screen and (max-width:768px) {
.searchModal .searchResult .searchResultItem a{font-size:16px;line-height:1.5}
}
.searchModal .searchResult .searchResultItem a:hover{color:#111;text-decoration:underline}
.searchModal .searchResult .searchResultItem a span{color:#3d50ff}
.searchModal .searchResult.active{display:block}
.searchModal.drawer--open{opacity:1;visibility:visible}
.searchModal .searchResultWrap{background:#fff;display:grid;grid-template-columns:1fr 3fr;padding:0 4.1666666667vw 4.1666666667vw}
@media screen and (max-width:1000px) {
.searchModal .searchResultWrap{padding:20px}
}
.searchModal .searchResultWrap .left{border-right:1px solid #e7e7e7;padding-right:2.6041666667vw}
@media screen and (max-width:1000px) {
.searchModal .searchResultWrap .left{border-right:none;padding-right:0}
}
.searchModal .searchResultWrap .left .ss-item{margin-bottom:2.0833333333vw}
@media screen and (max-width:1000px) {
.searchModal .searchResultWrap .left .ss-item{margin-bottom:32px}
}
.searchModal .searchResultWrap .left .ss-item .title{font-size:.9114583333vw;font-weight:700;line-height:1.0416666667vw;margin-bottom:.78125vw;text-transform:uppercase}
@media screen and (max-width:1536px) {
.searchModal .searchResultWrap .left .ss-item .title{font-size:14px;line-height:16px}
}
@media screen and (max-width:1000px) {
.searchModal .searchResultWrap .left .ss-item .title{margin-bottom:12px}
}
.searchModal .searchResultWrap .left .ss-categories .list .item .linkRow{padding:.5208333333vw 0;position:relative}
@media screen and (max-width:1000px) {
.searchModal .searchResultWrap .left .ss-categories .list .item .linkRow{padding:8px 0}
}
.searchModal .searchResultWrap .left .ss-categories .list .item .linkRow .text{font-size:.9114583333vw;line-height:1.0416666667vw;text-decoration:none}
@media screen and (max-width:1536px) {
.searchModal .searchResultWrap .left .ss-categories .list .item .linkRow .text{font-size:14px;line-height:16px}
}
.searchModal .searchResultWrap .left .ss-categories .list .item .linkRow .text:hover{text-decoration:underline}
.searchModal .searchResultWrap .left .ss-categories .list .item .linkRow .arr{background:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 6.5L8 10L11.5 6.5' stroke='%23333333' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 no-repeat;background-size:cover;bottom:.5208333333vw;cursor:pointer;display:inline-block;height:1.0416666667vw;position:absolute;transform:rotate(0deg);transition:.3s;width:1.0416666667vw;z-index:20}
@media screen and (max-width:1536px) {
.searchModal .searchResultWrap .left .ss-categories .list .item .linkRow .arr{bottom:8px;height:16px;width:16px}
}
.searchModal .searchResultWrap .left .ss-categories .list .item .linkRow .arr.active{transform:rotate(180deg)}
.searchModal .searchResultWrap .left .ss-categories .list .listSubItem{display:none}
.searchModal .searchResultWrap .left .ss-categories .list .listSubItem .item{padding-left:.9114583333vw}
@media screen and (max-width:1000px) {
.searchModal .searchResultWrap .left .ss-categories .list .listSubItem .item{padding-left:14px}
}
.searchModal .searchResultWrap .left .ss-categories .list .listSubItem .item .text{font-size:.9114583333vw;line-height:1.0416666667vw;text-decoration:none}
@media screen and (max-width:1536px) {
.searchModal .searchResultWrap .left .ss-categories .list .listSubItem .item .text{font-size:14px;line-height:16px}
}
.searchModal .searchResultWrap .left .ss-categories .list .listSubItem .item .text:hover{text-decoration:underline}
.searchModal .searchResultWrap .left .ss-popular .list .item,.searchModal .searchResultWrap .left .ss-recent .list .item{cursor:pointer;display:flex;gap:.5208333333vw;padding:.5208333333vw 0}
@media screen and (max-width:1000px) {
.searchModal .searchResultWrap .left .ss-popular .list .item,.searchModal .searchResultWrap .left .ss-recent .list .item{gap:8px;padding:8px 0}
}
.searchModal .searchResultWrap .left .ss-popular .list .item .icon .iconSvg svg,.searchModal .searchResultWrap .left .ss-recent .list .item .icon .iconSvg svg{display:block;height:16px;width:16px}
/* ТЕ САМЕ ДЛЯ МОБІЛЬНОЇ МОДАЛКИ. Її дравер — СУСІД десктопної
   (`#search-modal.searchModal` і `#search-modal-mob.mobileModalSearch`,
   `snippets/search-modal.liquid` рядки 40 і 161), тож правило вище до неї
   не дотягується. Розмір ставимо боксу НАД іконкою, як робить донор: у
   списку недавніх запитів іконку малює JS (`predictive-search.js`, рядок
   169) свгшкою з `viewBox` і без width/height, тому без розміру зверху
   вона розтягувалась на всю ширину — заміряно 335×335 на 375. */
.mobileModalSearch .ss-recent .list .item .icon .iconSvg,
.mobileModalSearch .ss-popular .list .item .icon .iconSvg { display: block; height: 16px; width: 16px; }
.searchModal .searchResultWrap .left .ss-popular .list .item .text,.searchModal .searchResultWrap .left .ss-recent .list .item .text{font-size:.9114583333vw;line-height:1.0416666667vw}
@media screen and (max-width:1536px) {
.searchModal .searchResultWrap .left .ss-popular .list .item .text,.searchModal .searchResultWrap .left .ss-recent .list .item .text{font-size:14px;line-height:16px}
}
.searchModal .searchResultWrap .left .ss-popular .list .item .text b,.searchModal .searchResultWrap .left .ss-recent .list .item .text b{font-weight:700}
.searchModal .searchResultWrap .left .ss-popular .list .item:hover .text,.searchModal .searchResultWrap .left .ss-recent .list .item:hover .text{text-decoration:underline}
.searchModal .searchResultWrap .right{padding-left:2.6041666667vw}
@media screen and (max-width:1000px) {
.searchModal .searchResultWrap .right{padding-left:0}
}
.searchModal .searchResultWrap .right .productsShow{display:none}
.searchModal .searchResultWrap .right .productsShow.active{display:block}
.searchModal .searchResultWrap .right .productsHide{align-items:center;display:none;flex-direction:column;gap:1.5625vw;height:100%;justify-content:center}
@media screen and (max-width:1000px) {
.searchModal .searchResultWrap .right .productsHide{gap:24px}
}
.searchModal .searchResultWrap .right .productsHide.active{display:flex}
.searchModal .searchResultWrap .right .productsHide .textInfo{font-size:1.0416666667vw;line-height:1.5625vw}
@media screen and (max-width:1536px) {
.searchModal .searchResultWrap .right .productsHide .textInfo{font-size:16px;line-height:24px}
}
.searchModal .searchResultWrap .right .titleWrap{align-items:center;display:flex;justify-content:space-between;margin-bottom:1.3020833333vw}
@media screen and (max-width:1000px) {
.searchModal .searchResultWrap .right .titleWrap{margin-bottom:20px}
}
.searchModal .searchResultWrap .right .titleWrap .title{font-size:.9114583333vw;font-weight:700;line-height:1.0416666667vw;text-transform:uppercase}
@media screen and (max-width:1536px) {
.searchModal .searchResultWrap .right .titleWrap .title{font-size:14px;line-height:16px}
}
.searchModal .searchResultWrap .right .titleWrap .allResults{color:#4d73f6;cursor:pointer;display:none;font-size:.9114583333vw;line-height:1.0416666667vw}
@media screen and (max-width:1536px) {
.searchModal .searchResultWrap .right .titleWrap .allResults{font-size:14px;line-height:16px}
}
.searchModal .searchResultWrap .right .titleWrap .allResults:hover{text-decoration:underline}
.searchModal .searchResultWrap .right .ss-products{grid-gap:1.0416666667vw 3.125vw;display:grid;grid-template-columns:1fr 1fr 1fr}
@media screen and (max-width:1000px) {
.searchModal .searchResultWrap .right .ss-products{grid-gap:16px 48px;grid-template-columns:1fr 1fr}
}
@media screen and (max-width:768px) {
.searchModal .searchResultWrap .right .ss-products{grid-gap:16px;grid-template-columns:1fr}
}
.searchModal .searchResultWrap .right .ss-products .searchProductCard{align-items:flex-end;display:flex;gap:.78125vw}
@media screen and (max-width:1000px) {
.searchModal .searchResultWrap .right .ss-products .searchProductCard{gap:12px}
}
.searchModal .searchResultWrap .right .ss-products .searchProductCard>a{flex:1;min-width:0}
.searchModal .searchResultWrap .right .ss-products .searchProductCard .attentionAddBtn{background:#111;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.78125vw;font-weight:600;height:1.6927083333vw;line-height:1.1067708333vw;margin-left:auto;min-height:1.6927083333vw;min-width:5.5989583333vw;padding:.2604166667vw .6510416667vw;width:5.5989583333vw}
@media screen and (max-width:1000px) {
.searchModal .searchResultWrap .right .ss-products .searchProductCard .attentionAddBtn{font-size:12px;height:26px;line-height:17px;min-height:26px;min-width:86px;padding:4px 10px;width:86px}
}
.searchModal .searchResultWrap .right .ss-products a{display:flex;text-decoration:none}
.searchModal .searchResultWrap .right .ss-products a .photo{padding-right:.78125vw}
@media screen and (max-width:1000px) {
.searchModal .searchResultWrap .right .ss-products a .photo{padding-right:12px}
}
.searchModal .searchResultWrap .right .ss-products a .photo img{display:block;height:auto;width:4.6875vw}
@media screen and (max-width:1000px) {
.searchModal .searchResultWrap .right .ss-products a .photo img{width:60px}
}
.searchModal .searchResultWrap .right .ss-products a .wrap{display:flex;flex-direction:column;gap:.390625vw;justify-content:center}
@media screen and (max-width:1000px) {
.searchModal .searchResultWrap .right .ss-products a .wrap{gap:6px}
}
.searchModal .searchResultWrap .right .ss-products a .wrap .name{font-size:.9114583333vw;font-weight:600;line-height:1.0416666667vw}
@media screen and (max-width:1536px) {
.searchModal .searchResultWrap .right .ss-products a .wrap .name{font-size:14px;line-height:16px}
}
.searchModal .searchResultWrap .right .ss-products a .wrap .prise{display:flex;font-size:.9114583333vw;gap:.5208333333vw;line-height:1.0416666667vw}
@media screen and (max-width:1536px) {
.searchModal .searchResultWrap .right .ss-products a .wrap .prise{font-size:14px;line-height:16px}
}
@media screen and (max-width:1000px) {
.searchModal .searchResultWrap .right .ss-products a .wrap .prise{gap:8px}
}
.searchModal .searchResultWrap .right .ss-products a .wrap .prise .old{color:#999;text-decoration:line-through}
.searchModal .searchResultWrap .right .ss-products a:hover .name{text-decoration:underline}
.searchModal .load_mass{align-items:center;background:hsla(0,0%,100%,.78);display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:10}
.mobileModalSearch{background:#fff;display:none;height:100%;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:100000000000}
.mobileModalSearch.drawer--open{display:block}
.mobileModalSearch .head{background:#fff;border-bottom:1px solid #f2f1f6;display:grid;grid-template-columns:55px 1fr 55px;height:55px}
.mobileModalSearch .head .btnBack{align-items:center;border-right:1px solid #f2f1f6;display:flex;justify-content:center}
.mobileModalSearch .head .btnBack .iconSvg{display:block;height:20px;width:20px}
.mobileModalSearch .head .btnBack .iconSvg .icon{display:block;height:auto;width:100%}
.mobileModalSearch .head .searchForm .input-field{height:100%;position:relative;width:100%}
.mobileModalSearch .head .searchForm .input-field .searchInputMob{border:none;font-size:14px;font-style:normal;font-weight:400;height:100%;line-height:normal;outline:none;width:100%}
.mobileModalSearch .head .searchForm .input-field .jsMobSearchPlaceholder{color:#999;font-size:14px;font-style:normal;font-weight:400;left:16px;line-height:normal}
.mobileModalSearch .head .searchModalBtn{align-items:center;background:#000;border-left:1px solid #f2f1f6;display:flex;justify-content:center}
.mobileModalSearch .head .searchModalBtn .iconSvg{display:block;height:20px;width:20px}
.mobileModalSearch .head .searchModalBtn .iconSvg .icon{display:block;height:auto;width:100%}
.mobileModalSearch .main{height:calc(100% - 55px);overflow:auto;padding:20px}
.mobileModalSearch .main .productsHide{align-items:center;display:none;flex-direction:column;gap:1.5625vw;justify-content:center;padding:20px 0 40px}
@media screen and (max-width:1000px) {
.mobileModalSearch .main .productsHide{gap:24px}
}
.mobileModalSearch .main .productsHide.active{display:flex}
.mobileModalSearch .main .productsHide .textInfo{font-size:1.0416666667vw;line-height:1.5625vw}
@media screen and (max-width:1536px) {
.mobileModalSearch .main .productsHide .textInfo{font-size:16px;line-height:24px}
}
.mobileModalSearch .main .productsShow .titleWrap{margin-bottom:1.3020833333vw}
@media screen and (max-width:1000px) {
.mobileModalSearch .main .productsShow .titleWrap{margin-bottom:20px}
}
.mobileModalSearch .main .productsShow .titleWrap .title{font-size:.9114583333vw;font-weight:700;line-height:1.0416666667vw;text-transform:uppercase}
@media screen and (max-width:1536px) {
.mobileModalSearch .main .productsShow .titleWrap .title{font-size:14px;line-height:16px}
}
.mobileModalSearch .main .allResults{margin-top:20px}
/* ============================================================
   ІЗОЛЯЦІЯ ВІД БАЗОВОГО `.drawer`
   ------------------------------------------------------------
   Обидві модалки — це `side-drawer`, тож окрім донорських класів вони
   отримують `drawer` і `drawer--top|right` з base.css: `position:fixed`,
   `inset:0`, `pointer-events:none`. Донорські правила задають власні
   координати, але не гасять `inset` і не повертають кліки — без цього
   десктопна модалка розтягувалась на весь екран і не ловила мишу.
   ============================================================ */
.searchModal.drawer,
.mobileModalSearch.drawer { pointer-events: none; }
.searchModal.drawer--open,
.mobileModalSearch.drawer--open { pointer-events: auto; }
/* `top` десктопній модалці НЕ задаємо. У донора `.searchModal` — це
   `position:fixed` без `top`, тобто вона лишається там, де стояла б у
   потоці: одразу під шапкою, і шапка над нею видима. З `top:0` вона
   накривала шапку, чого в донора немає. Мобільна навпаки — на весь
   екран, там `top:0` його власний. */
.searchModal.drawer { inset: auto; left: 0; }
.mobileModalSearch.drawer { inset: auto; left: 0; top: 0; }

/* Хрестик і «назад» у донора — це `<div>`, у нас `<button>` заради
   клавіатури. Через це вони підхопили рамку й фон із базових стилів
   кнопок — роздягаємо назад до голої іконки. */
.searchModal .searchInputWrap .close,
.mobileModalSearch .head .btnBack {
  background: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
/* ПУНКТ 187 — «немає розділення від кнопки назад».
   Причина знайдена тут-таки: цей блок гасив рамку цілком (`border: 0`),
   а в донора `.btnBack` тримає роздільник `border-right:1px solid #f2f1f6`,
   і саме він відділяє кнопку від поля. Тепер рамку гасимо тільки там, де
   вона й не потрібна — у десктопного хрестика. */
.searchModal .searchInputWrap .close { border: 0; }
.mobileModalSearch .head .btnBack { border: 0; border-right: 1px solid #f2f1f6; }
/* ПУНКТ 187 — «не той колір іконки пошуку».
   У донора це `<img>` з готовим БІЛИМ контуром (`icon-mob-search-b.svg`)
   на чорному квадраті `.searchModalBtn{background:#000}`. У нас іконка
   інлайнова й малюється `currentColor`, а він успадковується від тексту
   сторінки (#333) — темний контур на чорному тлі. Задаємо колір явно. */
.mobileModalSearch .head .searchModalBtn { color: #fff; border-radius: 0; }
.mobileModalSearch .head .searchModalBtn svg { stroke: currentColor; }

/* ============================================================
   БЕЗПРЕФІКСНІ ПРАВИЛА ДОНОРА: .ss-products / .ss-item
   ------------------------------------------------------------
   У витягу `donor-search.css` були тільки селектори, прив'язані до
   `.searchModal …`, і через це мобільна модалка лишалась без сітки:
   картки розтягувались на всю ширину замість рядка «фото — назва —
   кнопка». Виявилось, донор тримає базові правила БЕЗ префікса, а
   десктопні лише уточнюють їх. Дописуємо саме ці, з home.css.
   ============================================================ */
.ss-products{grid-gap:1.0416666667vw 3.125vw;display:grid;grid-template-columns:1fr 1fr 1fr}
@media screen and (max-width:1000px){
.ss-products{grid-gap:16px 48px;grid-template-columns:1fr 1fr}
}
@media screen and (max-width:768px){
.ss-products{grid-gap:16px;grid-template-columns:1fr}
}
.ss-products .searchProductCard{align-items:center;display:flex;gap:.78125vw}
@media screen and (max-width:1000px){
.ss-products .searchProductCard{gap:12px}
}
.ss-products .searchProductCard>a{flex:1;min-width:0}
.ss-products .searchProductCard .attentionAddBtn{background:#111;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.78125vw;font-weight:600;height:1.6927083333vw;line-height:1.1067708333vw;margin-left:auto;min-height:1.6927083333vw;min-width:5.5989583333vw;padding:.2604166667vw .6510416667vw;width:5.5989583333vw}
@media screen and (max-width:1000px){
.ss-products .searchProductCard .attentionAddBtn{font-size:12px;height:26px;line-height:17px;min-height:26px;min-width:86px;padding:4px 10px;width:86px}
}
.ss-products a{display:flex;text-decoration:none}
.ss-products a .photo{padding-right:.78125vw}
@media screen and (max-width:1000px){
.ss-products a .photo{padding-right:12px}
}
.ss-products a .photo img{display:block;height:auto;width:4.6875vw}
@media screen and (max-width:1000px){
.ss-products a .photo img{width:60px}
}
.ss-products a .wrap{display:flex;flex-direction:column;gap:.390625vw;justify-content:center}
@media screen and (max-width:1000px){
.ss-products a .wrap{gap:6px}
}
.ss-products a .wrap .name{font-size:.9114583333vw;font-weight:600;line-height:1.0416666667vw}
@media screen and (max-width:1536px){
.ss-products a .wrap .name{font-size:14px;line-height:16px}
}
.ss-products a .wrap .prise{display:flex;font-size:.9114583333vw;gap:.5208333333vw;line-height:1.0416666667vw}
@media screen and (max-width:1536px){
.ss-products a .wrap .prise{font-size:14px;line-height:16px}
}
@media screen and (max-width:1000px){
.ss-products a .wrap .prise{gap:8px}
}
.ss-products a .wrap .prise .old{color:#999;text-decoration:line-through}
.ss-products a:hover .name{text-decoration:underline}
.ss-item{margin-bottom:2.0833333333vw}
@media screen and (max-width:1000px){
.ss-item{margin-bottom:32px}
}
.ss-item .title{font-size:.9114583333vw;font-weight:700;line-height:1.0416666667vw;margin-bottom:.78125vw;text-transform:uppercase}
@media screen and (max-width:1536px){
.ss-item .title{font-size:14px;line-height:16px}
}
@media screen and (max-width:1000px){
.ss-item .title{margin-bottom:12px}
}

/* ============================================================
   КОНТЕКСТ НАКЛАДАННЯ
   ------------------------------------------------------------
   Обидві модалки рендеряться всередині секції header, тобто всередині
   `.shopify-section-group-header-group` з `position:sticky;z-index:80`.
   Ця група створює власний контекст, і донорський `z-index` модалки
   (100000000000) усередині нього нічого не вирішує: смуга оголошень
   (81, прямий нащадок body) малювалась ПОВЕРХ мобільного пошуку.
   Лікується не числом на модалці, а підняттям самого контексту —
   рівно так, як це вже зроблено для модалки меню.
   ============================================================ */
body:has(#search-modal.drawer--open) .shopify-section-group-header-group,
body:has(#search-modal-mob.drawer--open) .shopify-section-group-header-group { z-index: 200003; }

/* Кнопки пошуку — той самий донорський `.btn{font-family:Inter,sans-serif}` */
.searchModal .btn,
.mobileModalSearch .btn { font-family: Inter, sans-serif; }

/* ============================================================
   ПУНКТ 160 — ПІДКАЗКА В ПОЛІ, А НЕ ПІД НИМ
   ------------------------------------------------------------
   Скарга: «What will we look for?» висить ПІД полем.
   Причина: донор малює підказку не атрибутом `placeholder`, а окремим
   вузлом (`.jsSearchPlaceholder` на десктопі, `.jsMobSearchPlaceholder`
   на телефоні — перевірено по дампу: у самого `<input>` там
   `placeholder=""`). Розмітку ми перенесли, а ці ДВА правила донора —
   ні, бо їх не було у витягу `donor-search.css`. Без них `<div>`
   лишається блоковим і падає під поле.
   Взято дослівно з `/css/search.css` донора (файл дозавантажено в
   `migrate/donor-src/donor-css/search.css`).
   Мобільна модалка має власне, специфічніше правило нижче в цьому файлі
   (колір #999, 14px, left:16px) — воно перебиває кегль і колір, а
   позиціювання лишається звідси.
   ============================================================ */
.searchInputWrapper{position:relative}
.jsMobSearchPlaceholder,.jsSearchPlaceholder{color:#e8e8e8;font-size:2.0833333333vw;font-weight:700;left:.6510416667vw;line-height:2.6041666667vw;opacity:.5;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}
@media screen and (max-width:1536px){
.jsMobSearchPlaceholder,.jsSearchPlaceholder{font-size:32px;line-height:40px}
}
@media screen and (max-width:1000px){
.jsMobSearchPlaceholder,.jsSearchPlaceholder{left:10px}
}
@media screen and (max-width:768px){
.jsMobSearchPlaceholder,.jsSearchPlaceholder{font-size:18px;line-height:24px;text-transform:uppercase}
}

/* ============================================================
   ПУНКТ 161 — «Add to basket» вилазить за межі кнопки: ПОЛАГОДЖЕНО
   ------------------------------------------------------------
   СВІДОМЕ ВІДХИЛЕННЯ ВІД ДОНОРА, на пряме прохання користувача.
   У донора та сама вада, і вона перенесена була дослівно:
     `width:86px; height:26px; min-height:26px;
      font-size:12px; line-height:17px; padding:4px 10px`
   «Add to basket» у 12px не влазить у 66px внутрішньої ширини,
   переходить на два рядки (2×17=34) і вилазить із коробки 26px.
   У польській («Dodaj do koszyka») запас іще менший.

   Лікуємо КОРОБКОЮ, а не кеглем: гарнітура й розмір кнопок уже
   приведені до донорських, зменшувати текст не можна.
     · ширина лишається донорською (86px / 5.5989vw) — сітка карток
       не рухається ані на піксель;
     · `height:auto` при збереженому `min-height` дає коробці вирости
       рівно на стільки, скільки треба рядкам;
     · flex із центруванням тримає текст усередині при будь-якій мові.
   Одноряд­кові переклади («В корзину») лишаються рівно 86×26, як у донора.
   ============================================================ */
.ss-products .searchProductCard .attentionAddBtn,
.searchModal .searchResultWrap .right .ss-products .searchProductCard .attentionAddBtn,
.mobileModalSearch .main .ss-products .searchProductCard .attentionAddBtn {
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

/* ============================================================
   ПУНКТ 157 — СТОРІНКА РЕЗУЛЬТАТІВ `/search?q=…`
   ------------------------------------------------------------
   Правила донора з `/css/search.css`, дослівно. Раніше цього файлу в
   `migrate/donor-src/` не було — звідси й висновок «у донора класи
   `.searchPageMod` без стилів». Файл дозавантажено.
   `.productList` у донора власних правил НЕ має: це гола обгортка, а
   сітку малює `.cardItemWrap` — наш `.collection__grid`.
   ============================================================ */
.searchPageMod{padding:8.3333333333vw}
.searchPageMod .title{font-size:2.0833333333vw;font-weight:700;line-height:2.6041666667vw;line-height:1.5;margin-bottom:2.0833333333vw;text-transform:uppercase}
@media screen and (max-width:1536px){
.searchPageMod .title{font-size:32px;line-height:40px}
}
@media screen and (max-width:1000px){
.searchPageMod .title{margin-bottom:20px}
}
@media screen and (max-width:768px){
.searchPageMod .title{font-size:18px;line-height:24px;text-transform:uppercase}
}
.searchPageMod .subTitleWrap{align-items:center;display:flex;justify-content:space-between}
.searchPageMod .subTitleWrap .subTitle{font-size:1.0416666667vw;line-height:1.5625vw}
@media screen and (max-width:1536px){
.searchPageMod .subTitleWrap .subTitle{font-size:16px;line-height:24px}
}
/* Донорський падінг 8.3333vw стоїть на ВСІХ боках секції-заголовка, і
   між нею та сіткою виходить 120px порожнечі. Повторним заголовкам
   («Collections», «Popular Products») верхній падінг зайвий — вони йдуть
   одразу за попереднім блоком. */
/* Донорський падінг 8.3333vw (120px на 1440) стоїть на всіх боках, і між
   заголовком та наступним блоком виходило пів екрана порожнечі. У донора
   `.searchPageMod` рівно одна на сторінку, тож для НАШИХ додаткових секцій
   (колекції, популярні) лишаємо тільки бокові поля. */
.searchPageMod--collections,
.searchPageMod--popular{padding:0 8.3333333333vw 1.3020833333vw}
.searchPageMod--collections .title,
.searchPageMod--popular .title{font-size:.9114583333vw;line-height:1.0416666667vw;margin-bottom:1.3020833333vw}
@media screen and (max-width:1536px){
.searchPageMod--collections .title,
.searchPageMod--popular .title{font-size:14px;line-height:16px}
}
@media screen and (max-width:1000px){
.searchPageMod--collections .title,
.searchPageMod--popular .title{margin-bottom:20px}
}
/* Списки колекцій і популярних товарів на сторінці — та сама донорська
   сітка `.ss-products`, тільки з боковими полями сторінки (у модалці їх
   дає сама модалка). */
.productList--collections,
.productList--popular{padding:0 8.3333333333vw 8.3333333333vw}

/* ============================================================
   ПУНКТ 162 — КАРТКА КОЛЕКЦІЇ
   ------------------------------------------------------------
   Тієї ж будови, що й товарна, але без ціни й без кнопки. Через це в
   `.wrap` лишається один рядок, і флексовий `align-items:flex-end`
   донорської картки притискав би назву до низу фото.
   ============================================================ */
.searchCollectionCard{align-items:center}
.searchCollectionCard>a{align-items:center}

/* Донор гасить фокусну рамку глобально: `input:focus,textarea:focus{outline:none}`
   у catalog.css. Ми переносимо це ТІЛЬКИ на поля пошуку, а не на весь сайт:
   глобальний скид прибрав би видимий фокус із усіх форм теми (контакти,
   партнери, підписка), а це втрата доступності з клавіатури в чужих зонах.
   Там, де користувач бачить донора, вигляд той самий. */
.searchModal .searchInputWrap .searchInput input:focus,
.mobileModalSearch .head .searchForm .input-field input:focus { outline: none; }

/* ============================================================
   §254 — КНОПКА ДОДАВАННЯ В КАРТЦІ ПОШУКУ: ІКОНКА ЗАМІСТЬ ТЕКСТУ
   ------------------------------------------------------------
   СВІДОМЕ ВІДХИЛЕННЯ ВІД ДОНОРА, на пряме прохання користувача.
   У донора це текстова плашка `86×26` («Add to basket»), і саме через
   неї текст не влазив у 66 px внутрішньої ширини (пункт 161 вище).

   Коробка стає квадратною: ширина = донорській висоті
   (`1.6927083333vw`, на ≤1000 — 26). Фіксовану ширину `5.5989583333vw`
   (86) знімаємо — 16-піксельна іконка посеред 86-піксельної плашки
   виглядала б як помилка. Решта — донорські: тло #111, радіус 4,
   `margin-left:auto`.

   Іконка — та сама, що на кнопці картки товару: `.btn .iconSvg`
   донора, `1.0416666667vw` з гілкою `@media ≤1536 { 16px }`.
   ============================================================ */
.ss-products .searchProductCard .attentionAddBtn--icon,
.searchModal .searchResultWrap .right .ss-products .searchProductCard .attentionAddBtn--icon,
.mobileModalSearch .main .ss-products .searchProductCard .attentionAddBtn--icon {
  width: 1.6927083333vw;
  min-width: 1.6927083333vw;
  padding: 0;
  flex: none;
}
.ss-products .searchProductCard .attentionAddBtn--icon svg,
.searchModal .searchResultWrap .right .ss-products .searchProductCard .attentionAddBtn--icon svg,
.mobileModalSearch .main .ss-products .searchProductCard .attentionAddBtn--icon svg {
  display: block;
  flex: none;
  width: 1.0416666667vw;
  height: 1.0416666667vw;
}
@media screen and (max-width:1536px){
  .ss-products .searchProductCard .attentionAddBtn--icon svg,
  .searchModal .searchResultWrap .right .ss-products .searchProductCard .attentionAddBtn--icon svg,
  .mobileModalSearch .main .ss-products .searchProductCard .attentionAddBtn--icon svg { width: 16px; height: 16px; }
}
/* Донорська піксельна гілка цієї кнопки стоїть на ≤1000, а не ≤1536 —
   тому й квадрат перемикається там же. */
@media screen and (max-width:1000px){
  .ss-products .searchProductCard .attentionAddBtn--icon,
  .searchModal .searchResultWrap .right .ss-products .searchProductCard .attentionAddBtn--icon,
  .mobileModalSearch .main .ss-products .searchProductCard .attentionAddBtn--icon { width: 26px; min-width: 26px; }
}

/* ============================================================
   §255 — ВІДСТУП МІЖ `products` І `collections` у випадайці
   ------------------------------------------------------------
   Блоки стоять один під одним (`productsShow` → `collectionsShow`) і
   злипались: заголовок «Collections» починався одразу під останньою
   карткою товару. Число не вигадане — це власний міжблоковий ритм
   донорської модалки: `.ss-item{margin-bottom:2.0833333333vw}` з гілкою
   `@media ≤1000 { 32px }`. Обидва блоки видимі лише з класом `.active`,
   тож і відступ вішаємо на цю пару — інакше він з'являвся б над
   прихованим блоком.
   ============================================================ */
.searchModal .searchResultWrap .right .productsShow.active + .collectionsShow.active,
.mobileModalSearch .main .productsShow.active + .collectionsShow.active { margin-top: 2.0833333333vw; }
@media screen and (max-width:1000px){
  .searchModal .searchResultWrap .right .productsShow.active + .collectionsShow.active,
  .mobileModalSearch .main .productsShow.active + .collectionsShow.active { margin-top: 32px; }
}

/* ============================================================
   §256 — ПОРОЖНІЙ СТАН ПОШУКУ
   ------------------------------------------------------------
   СВІДОМЕ ВІДХИЛЕННЯ ВІД ДОНОРА, на пряме прохання користувача.
   Кнопка «Try Again» тепер наша `.button` (design.css) і нашим шрифтом.
   Тут лишається тільки розмір: у донорському блоці `.productsHide` вона
   стоїть окремо по центру, тож тримаємо її компактною, а не на всю
   ширину колонки.
   ============================================================ */
.searchModal .searchResultWrap .right .productsHide .button,
.mobileModalSearch .main .productsHide .button {
  min-height: 40px;
  padding: 0 24px;
  font-size: 14px;
  line-height: 16px;
  border-radius: 2px;
}

/* ---------- subscription-popup.css ---------- */
/* Попап підписки. Геометрія донорського `#modalSubscription`.
   Донор має ДВІ різні розкладки, і це не косметика:
     до 768 px — картинка зверху, форма під нею (`.imgWrap{width:100%}`);
     від 769 px — дві колонки (`max-width:840`, `.imgWrap{width:50%}`,
                  `>.wrap{width:50%;padding:0 40px}`, `align-items:center`).
   Саме тому десктопний кадр донора вертикальний (1280×1418) — це половина
   картки, а не смуга зверху. Поки картинок не було, різниці не було видно:
   порожній `.imgWrap` має нульову висоту. Із картинкою одноколонкова
   розкладка дає 690×1025 при вікні 900 — форма з кнопкою їде під обріз
   `max-height`, і людина бачить лише фото. Заміряно 02.09.
   vw-числа рахуються від 1536, як і в решті портованих файлів. */

/* ЗБІГ ІМЕН, НА ЯКОМУ ПОПАП НЕ БУЛО ВИДНО ЖОДНОГО РАЗУ.
   Донорська розмітка несе клас `modal`, а в `base.css` під тим самим іменем
   живе наш власний компонент модалки: `.modal{visibility:hidden;
   pointer-events:none}`, що вмикається класом `.modal--open`. Наш попап
   вмикається класом `is-open`, тож `visibility` лишалась `hidden` — разом із
   усіма дітьми, бо вона успадковується. У DOM усе виглядало живим (атрибут
   `hidden` знято, клас `is-open` стоїть, `getBoundingClientRect` дає
   840×465), а на екрані не було нічого: `checkVisibility()` = false,
   `elementFromPoint` у центрі картки повертав абзац сторінки під нею.
   Той самий конфлікт імен уже ламав дравер кошика й вікно відгуків —
   див. коментар у `product-reviews.css`.
   Тому гасимо базовий компонент ЯВНО й із запасом за вагою
   (`.subscription-popup.modal` = 0,2,0 проти `.modal` = 0,1,0), щоб правило
   не залежало від порядку файлів. Заміряно 02.09. */
/* ПОЗИЦІЯ ПО ВЕРТИКАЛІ (п.6). Донор НЕ центрує картку у вікні: у нього
   `#modalSubscription.modal{top:calc(30% - 124px)}` при `position:fixed`,
   тобто верх картки на 1440×900 стоїть на 146 px — нижче шапки (вона
   0…123). Ми центрували, і картка виходила на 217 px.
   Беремо формулу донора, а НЕ висоту шапки: у донора вона в розрахунку не
   бере участі взагалі, а в нас шапка різна по брейкпойнтах (98/141/98/123),
   і прив'язка до неї дала б чотири різні числа там, де в оригіналі одне.
   `max()` — запобіжник на низьких вікнах, щоб картка не полізла за верх. */
.subscription-popup { position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  /* §340. ЦЕНТРУЄМО У ВІЛЬНОМУ МІСЦІ ПІД ШАПКОЮ, а не від верху вікна.

     Було: відступ від верху `max(20px, calc(30vh - 124px))` — донорське
     число, зняте з `top: calc(30% - 124px)`. Воно рахує 30% ВІКНА і про
     шапку не знає взагалі. На високому екрані це збігалось випадково, а
     щойно вікно нижчало, 30vh ставало меншим за шапку — і картка заповзала
     під неї. Власник це й побачив на десктопі.

     Тепер верхній падінг дорівнює реальному низу обв'язки, а `align-items:
     center` центрує в тому, що лишилось. Тобто попап завжди посередині
     ВІЛЬНОГО місця, і на будь-якій висоті вікна поводиться однаково.

     `--sa-top-chrome` пише `header.js` живим `getBoundingClientRect().bottom`
     (§340 там же): він враховує і липкість, і сховану шапку, і прокрутку.
     Запасний вираз лишається на випадок, якщо скрипт не встиг: висота
     шапки плюс найбільша заміряна акційна смуга. */
  --sp-chrome: var(--sa-top-chrome, calc(var(--header-height, 55px) + 57px));
  padding-top: calc(var(--sp-chrome) + 20px); }

/* §323. Мій перший варіант цього правила (жорсткі 98 px) прибраний:
   виконавець заміряв і показав, що на 320 акційна смуга займає 57 px
   замість 43 — текст переноситься на два рядки, — тож константа 98 не
   дотягувала б 14 px і картка знову лізла б під шапку. Робоче правило
   нижче: воно бере живу висоту шапки зі змінної, а в запас кладе
   найбільший заміряний випадок. */

.subscription-popup.modal { visibility: hidden; pointer-events: none; }
.subscription-popup.modal.is-open { visibility: visible; pointer-events: auto; }
.subscription-popup[hidden] { display: none; }

.subscription-popup__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; transition: opacity .25s ease; }
.subscription-popup.is-open .subscription-popup__overlay { opacity: 1; }

.subscription-popup__box { position: relative; width: 100%; max-width: 690px;
  background: #fff; border-radius: 2px; overflow: hidden;
  /* тінь донора: box-shadow:0 0 8px 0 rgba(0,0,0,.15) на самій картці */
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, .15);
  margin-top: 0;   /* §340: місце під шапку тримає падінг обгортки */
  opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease;
  max-height: calc(100vh - var(--sp-chrome) - 40px); overflow-y: auto; }
.subscription-popup.is-open .subscription-popup__box { opacity: 1; transform: none; }

.subscription-popup .imgWrap img { display: block; width: 100%; height: auto; }

/* ХРЕСТИК (п.4). Донор: `.modal .closeModal{padding:16px;right:0;top:0;
   opacity:.8;color:#111}` плюс `.iconSvg{20×20}` — разом вузол 52×52 при
   іконці 20×20. У нас було 32×32 при іконці 14×14, тобто помітно дрібніше.
   Круглої білої підкладки в донора немає взагалі. */
.subscription-popup .closeModal { position: absolute; top: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 0; cursor: pointer;
  color: #111; opacity: .8; padding: 16px; transition: .3s; }
.subscription-popup .closeModal:hover { opacity: 1; transform: scale(1.2); }
.subscription-popup .closeModal .iconSvg { display: block; width: 20px; height: 20px; }
.subscription-popup .closeModal svg { display: block; width: 100%; height: 100%; }

/* ТЕКСТ ЛІВОРУЧ, А НЕ ПО ЦЕНТРУ (п.5). Заміряно в донора: `.wrap` і
   заголовок мають `text-align:start`, у нас стояв `center` — саме через це
   рядки заголовка ламались інакше (донор 297+142 px, ми 290+227). */
.subscription-popup .wrap.logon,
.subscription-popup .modalSubscriptionSuccess { padding: 0 40px; text-align: start; }

/* ЗАГОЛОВОК (п.5). Донор: 17/24, колір #333, відступ знизу 14.
   Було 20/25 і #111 — через розмір і центрування переноси не збігались. */
.subscription-popup .title { font-size: 17px; line-height: 24px; font-weight: 700;
  text-transform: uppercase; color: #333; margin-bottom: 14px; }
.subscription-popup .regular { margin-bottom: 14px; }
.subscription-popup .regular:empty { display: none; }
.subscription-popup .subText { font-size: 14px; line-height: 20px; color: #333;
  margin-bottom: 14px; }

/* ІНПУТ (п.2). Донор: висота 40 (у нас було 44), плейсхолдер 14 (було 15),
   відступ між групами 8 знизу (у нас було 12 зверху). */
.subscription-popup .inputGroup { position: relative; margin-top: 0; margin-bottom: 8px; }
.subscription-popup .inputGroup input { width: 100%; height: 40px; padding: 0 16px;
  font-size: 15px; color: #333; background: #fff;
  border: 1px solid #e8e8e8; border-radius: 2px; appearance: none; }
.subscription-popup .inputGroup input::placeholder { color: #999; font-size: 14px; }

/* ЗІРОЧКА ОБОВ'ЯЗКОВОГО ПОЛЯ (п.2). У донора це НЕ окремий вузол і не фон,
   а `::after` на `.validateStar`: біле коло 15×15 із зірочкою 20 px, яке
   сидить у ПРАВОМУ ВЕРХНЬОМУ куті групи й наполовину виступає за рамку
   поля (`right:10px; top:-5px`). У нас її не було зовсім. */
.subscription-popup .validateStar { position: relative; }
.subscription-popup .validateStar::after { content: "*"; position: absolute;
  right: 10px; top: -5px; width: 15px; height: 15px; z-index: 8;
  background: #fff; border-radius: 50%; color: #999;
  font-size: 20px; line-height: 1; text-align: center; }

/* КНОПКА (п.3). Донор: `.btn{height:40;min-width:40;gap:8}` +
   `.btn__blank{padding:0 10px;border-radius:2px;border-width:1px}` +
   `.btn .text{font-size:14;line-height:16}`, БЕЗ uppercase, БЕЗ
   letter-spacing і вагою 400. Плюс `.modal>.wrap form .buttonWrap .btn
   {width:100%}` — кнопка на всю колонку (заміряно 339 px при колонці 339).
   Було: 180×44, uppercase, 600, letter-spacing .02em, падінг 0 24. */
.subscription-popup .buttonWrap,
.subscription-popup .btnWrap { margin-top: 16px; }
.subscription-popup .btn { display: flex; align-items: center; justify-content: center;
  gap: 8px; min-width: 40px; height: 40px; padding: 0 10px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 400;
  text-transform: none; letter-spacing: normal;
  color: #fff; background: #111; border: 1px solid #111; border-radius: 2px;
  transition: .3s; }
.subscription-popup .btn .text { font-size: 14px; line-height: 16px; font-weight: 400;
  text-transform: none; letter-spacing: normal; }
.subscription-popup .buttonWrap .btn,
.subscription-popup .btnWrap .btn { width: 100%; }
.subscription-popup .btn:hover { opacity: .9; background: #111; border-color: #111; }

/* Промокод показується лише коли він заданий у налаштуваннях. */
.subscription-popup__promo { margin-top: 14px; padding: 10px 16px; display: inline-block;
  font: 700 18px/1 "SF Mono", Menlo, monospace; letter-spacing: .08em; color: #111;
  background: #f7f7f5; border: 1px dashed #bbb; border-radius: 2px; }

.subscription-popup__err { margin-top: 10px; font-size: 13px; color: #d33; }

body.subscription-popup-open { overflow: hidden; }

/* ДЕСКТОП — дві колонки донора. Картинка ліворуч, форма праворуч, обидві
   вирівняні по центру за вертикаллю. Екран успіху й форма — сусіди, у якийсь
   момент видно лише один із них, тож другу колонку займає той, що видимий. */
@media (min-width: 769px) {
  .subscription-popup__box { max-width: 840px; display: flex; flex-wrap: wrap;
    align-items: center; }
  .subscription-popup .imgWrap { width: 50%; }
  /* донор: `>.wrap{padding:0 40px;width:50%}`, а екран успіху окремо —
     `padding:2.6041666667vw` (37.5 на 1440) при тій самій половині */
  .subscription-popup .wrap.logon { width: 50%; padding: 0 40px; }
  .subscription-popup .modalSubscriptionSuccess { width: 50%; padding: 2.6041666667vw; }
}

/* МОБІЛКА. Донор: `#modalSubscription.modal{right:5vw;top:5vw;width:90vw}`,
   `>.wrap{padding:40px;width:100%}`, заголовок 14/16, підтекст 12/18.
   У нас було 12 px падінгу обгортки, 20/20/26 у колонці й заголовок 17. */
@media (max-width: 768px) {
  /* ВЕРХ КАРТКИ НИЖЧЕ ЗА ЗАКРІПЛЕНУ ШАПКУ.
     Донор на мобілці ставить картку на `top: 5vw` (20.75 на 415) і своєю
     шапкою її накриває — ми це повторювали. Але наша шапка на мобілці
     ЗАКРІПЛЕНА (`position: sticky` і в акційної смуги, і в `site-header`),
     тобто нікуди не дівається при прокрутці, і картка ховала під нею
     власний заголовок із хрестиком.

     Одним числом це не закривається. Заміряно на живому магазині:
       320  акційна смуга 57 (текст у два рядки) + site-header 55 → низ 112
       375…430  акційна смуга 43 + site-header 55 → низ 98
     Тобто «98», зняте на 415, на 320 не спрацювало б: там треба 112.

     Джерело числа — змінна `--sa-top-chrome`, куди має лягати РЕАЛЬНИЙ низ
     закріпленої обв'язки. Поки її не проставлено, працює запасний вираз:
     `--header-height` (його пише `header.js` живим `offsetHeight` через
     ResizeObserver) плюс найбільша заміряна висота акційної смуги. Запас
     узято НАЙБІЛЬШИЙ навмисно: помилитись убік «нижче» безпечно, картка
     лишається цілою, а помилитись убік «вище» означає знову сховати
     заголовок під шапкою. */
  .subscription-popup {
    padding: 12px;
    /* §340: та сама логіка, лише менший власний падінг обгортки */
    padding-top: calc(var(--sp-chrome) + 12px);
  }
  .subscription-popup__box {
    max-width: 90vw;
    max-height: calc(100vh - var(--sp-chrome) - 24px);
  }
  /* ХРЕСТИК ЗБОКУ ВІД ФОТО, А НЕ НА НЬОМУ (прохання власника, §325).
     На мобілці картка складається в СТОВПЧИК — картинка на всю ширину,
     форма під нею, — тож абсолютний хрестик у правому верхньому куті
     картки лягав РІВНО на фото. Заміряно на локальному стенді з цим самим
     CSS: перекриття кнопки з `img` = 52×52 із 52×52, тобто 100 % на всіх
     п'яти ширинах (320/375/390/414/430). На темному кадрі він там зникав.
     Це НЕ вихід за межі: `right` кнопки збігався з `right` картки (0 px
     назовні), і за екран вона теж не виходила — «вилазить» на слух
     означало саме «лежить на фото».

     Виводимо кнопку з абсолютного потоку у ВЛАСНУ БІЛУ СМУГУ НАД ФОТО.
     У потоці вона за побудовою не може ні вилізти за картку, ні за екран,
     а фото й заголовок ідуть НИЖЧЕ неї — перекривати нічого.

     СМУГА САМЕ НАД ФОТО, А НЕ ПІД НИМ. Варіант «під фото» я зібрав і
     заміряв першим: він дешевший на 40 px, бо дозволяє зняти верхній падінг
     колонки. Але на 320×568 із портретним фото 3:4 кнопка опинялась на
     y 508…560 при видимому вікні картки 124…556 — тобто на 4 px нижче за
     обріз, і щоб закрити попап, треба було спершу його прокрутити. Смуга
     над фото не залежить від висоти картинки взагалі: кнопка завжди перша
     й завжди у вікні. Ціна — картка вища на 52 px.

     `order: -1` замість зміни розмітки: кнопка в DOM стоїть ПІСЛЯ `.imgWrap`
     (і так треба лишити — на десктопі вона абсолютна й порядок не важить).
     Тому на мобілці робимо картку flex-колонкою й піднімаємо кнопку
     порядком. `align-self: flex-end` обов'язковий: у колонковому flex
     поперечний розмір за замовчуванням `stretch`, і кнопка розтяглась би на
     всю ширину картки замість того, щоб стати праворуч.

     Розмір лишаємо 52×52 (падінг 16 + іконка 20) — зона дотику з запасом
     над мінімумом 44×44.

     ДЕСКТОП НЕ ЧІПАЄМО: там дві колонки, фото ліворуч, і хрестик стоїть на
     БІЛІЙ половині — перекриття з фото 0 px по горизонталі (заміряно на
     1440). Тому правило живе тільки в мобільній гілці. */
  .subscription-popup__box { display: flex; flex-direction: column; }
  .subscription-popup .closeModal {
    position: static;
    order: -1;
    align-self: flex-end;
  }
  .subscription-popup .wrap.logon,
  .subscription-popup .modalSubscriptionSuccess { padding: 40px; }
  .subscription-popup .title { font-size: 14px; line-height: 16px; }
  .subscription-popup .subText { font-size: 12px; line-height: 18px; }
  .subscription-popup .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .subscription-popup__overlay,
  .subscription-popup__box { transition: none; }
}