/* ------------------------------------------------------------------
   TIRZE LAB — стиль за UI/UX Pro Max (design-system + medical teal)
   Патерн: мінімалізм/trust • ефект: скло поверх насиченого мʼятного фону
------------------------------------------------------------------ */

:root {
  /* Design system palette (Healthcare / pharma premium) */
  --primary: #00707D;
  --primary-deep: #004E58;
  --cyan-soft: #3FA9B4;
  --cta-from: #00707D;
  --cta-to: #00707D;
  --bg-base: #E7EAEE;
  --surface: #FFFFFF;
  --surface-strong: #FFFFFF;
  --text: #10151C;
  --text-muted: #4E5A69;
  --stroke: rgba(16, 21, 28, 0.12);
  --stroke-strong: rgba(16, 21, 28, 0.22);
  --radius: 4px;
  /* Внутрішні відступи першого екрану на ПК (відносно вікна) */
  --shell-pad-x: clamp(14px, 1.85vw, 28px);
  --shell-pad-y: clamp(12px, 1.5vh, 24px);
  --split-gap: clamp(14px, 1.35vw, 24px);
  --hdr-gap: clamp(14px, 1.5vw, 26px);
  --hdr-pad-x: clamp(14px, 2vw, 32px);
  /* Було clamp(14px, 2.1vh, 28px) — на 1440 це давало 82px смуги при логотипі
     34px, тобто половина висоти шапки була порожньою. Стеля знижена: смуга
     тримає ~68px, палець і фокус не страждають (кнопки в ній 40–44px). */
  --hdr-pad-y: clamp(12px, 1.5vh, 18px);
  /* Бурштин застережної етикетки — не тривожний червоний. З _lab/tokens.css. */
  /* Одна ширина контенту на всю сторінку — як у макеті v9 (--shell: 1120px).
     До цього кожна секція мала свою: 1387px у більшості, 1100 у «Двох шляхах»,
     1345 у калькуляторі — через це ширина стрибала при гортанні. */
  --shell: 1120px;
  --warn: #9C5500;
  --warn-bg: #F6E9D8;
  /* Семантична палітра стану — заведено 2026-07-31, щоб не плодити хардкод-кольори по файлу */
  --danger: #DC2626;
  --danger-strong: #B91C1C;
  --success: #047857;
  --surface-sunk: #F8FAFC;
  --font-display: "Days One", system-ui, sans-serif;
  --font-body: "Golos Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Легші тіні — менша робота композитора під hover / scroll */
  --shadow: 0 1px 2px rgba(16,21,28,.06), 0 8px 24px -18px rgba(16,21,28,.28);
  --shadow-hover: 0 1px 2px rgba(16,21,28,.08), 0 12px 28px -18px rgba(16,21,28,.34);
  /* Єдиний «зачавлений» фон без blur під модалки та кошик (легше для GPU) */
  --overlay-dimmer: rgba(13, 40, 38, 0.58);
  /* Відступи блоку «Для кого» від секції форматів (симетрія з повітрям після карток) */
  --audience-outer-gap: clamp(2.75rem, 7vw, 5rem);
  --products-section-bottom: clamp(2rem, 5vw, 4rem);
  /* Єдина ширина для всіх блоків landing */
  /* Один короб на всю сторінку. Було 1100 тут і фактичні 1387 у решти секцій
     через !important-блок нижче — саме звідси стрибала ширина. */
  --container-max-w: var(--shell);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-scroll-offset);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-synthesis-weight: none;
  font-weight: 400;
  color: var(--text);
  line-height: 1.56;
  background-color: var(--bg-base);
  /* Два бірюзових свічення зверху + вертикальний перехід. Без них сторінка
     сіра: саме це зчитувалось як «тьмяно». Це атмосфера фону, а не «скло» —
     тут немає ані blur, ані напівпрозорих панелей. */
  background-image:
    radial-gradient(ellipse 90% 55% at 8% -5%, rgba(0, 112, 125, 0.10), transparent 52%),
    radial-gradient(ellipse 75% 50% at 92% 5%, rgba(0, 112, 125, 0.06), transparent 48%),
    linear-gradient(170deg, var(--bg-base) 0%, #F4F6F8 38%, var(--surface-sunk) 100%);
  min-height: 100vh;
  min-height: 100dvh;
}

.page-shell {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: var(--shell-pad-y) var(--shell-pad-x);
  box-sizing: border-box;
}

/* Якірні переходи: додатковий відступ від верху (підпись до scroll-padding на html для сумісності) */
.page-shell > section[id],
.page-shell > footer[id] {
  scroll-margin-top: var(--anchor-scroll-offset);
}

.screen-one {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vh, 22px);
}

/* Перший блок (#hero): фонова картинка на всю секцію — файл img/hero-storefront-bg.jpg */
#hero.screen-one {
  position: relative;
  overflow: clip;
  /* Фон до країв вікна: компенсуємо padding .page-shell зверху та по боках */
  margin-inline: calc(-1 * var(--shell-pad-x));
  margin-top: calc(-1 * var(--shell-pad-y));
  width: calc(100% + 2 * var(--shell-pad-x));
  padding-top: var(--shell-pad-y);
  box-sizing: border-box;
  isolation: isolate;
  /* Прозоро під ::before — після маски зчепляється з тим же body-фоном, що під наступними секціями */
  background-color: transparent;
}

#hero.screen-one > .hero-storefront {
  position: relative;
  z-index: 1;
}

/* Фото + градієнти в одному шарі під контентом; mask знизу прибирає різкий край картинки і накладок */
#hero.screen-one::before {
  content: "";
  position: absolute;
  /* Висота фото НЕ залежить від контенту: інакше розкривашка «Чому бренд коштує
     дорожче» подовжує секцію, background-size:cover переобрізає картинку — і фон
     смикається на кожен клік. Низ і так розчинено маскою. */
  inset: 0 0 auto 0;
  height: clamp(560px, 76vh, 880px);
  z-index: 0;
  pointer-events: none;
  background-color: #e5f9fb;
  background-image:
    linear-gradient(
      168deg,
      rgba(236, 254, 255, 0.82) 0%,
      rgba(207, 250, 254, 0.52) 32%,
      rgba(204, 251, 241, 0.42) 58%,
      rgba(236, 254, 255, 0.14) 78%,
      rgba(248, 252, 252, 0) 100%
    ),
    radial-gradient(ellipse 120% 75% at 10% -8%, rgba(34, 211, 238, 0.26), transparent 58%),
    radial-gradient(ellipse 95% 55% at 50% 100%, rgba(8, 145, 178, 0.08), transparent 48%),
    url("img/hero-storefront-bg.webp");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* Плавний вихід у фон сторінки (~останні 26% висоти блоку розчинення) */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 62%,
    rgba(0, 0, 0, 0.88) 72%,
    rgba(0, 0, 0, 0.45) 84%,
    rgba(0, 0, 0, 0.12) 94%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 62%,
    rgba(0, 0, 0, 0.88) 72%,
    rgba(0, 0, 0, 0.45) 84%,
    rgba(0, 0, 0, 0.12) 94%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

/* Десктоп: фон hero edge-to-edge, шапка над фоном; бокові поля збігаються з .page-shell.
   Поле шапці більше не задається тут: #hero.screen-one вже повертає собі
   padding-inline (нижче по файлу), і додаткове поле на .site-header подвоювало
   відступ шапки — на 980/1120px це давало 36/41px замість 18/21 в решти поверхонь,
   бо margin:auto на .site-header__bar вже не мав запасу компенсувати подвоєння. */
.site-header {
  position: relative;
  z-index: 10;
}

/* Смуга шапки — рама сторінки, а не ще одна картка.
   Було: той самий білий, той самий радіус, та сама рамка по колу й та сама
   тінь, що в паспорта за 40px нижче. Дві однакові білі плити підряд — і шапка
   читалась як картка, а не як навігація.
   Стало: поверхня лишається білою (за нею фото геро, прозорість тут не
   годиться), але об'єм знято — ні тіні, ні рамки по колу. Межу знизу тримає
   та сама лінійка, що ділить підвал: гасне до країв, тому не замикає смугу
   в прямокутник. */
.site-header__bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr minmax(0, auto);
  align-items: center;
  gap: var(--hdr-gap);
  padding: var(--hdr-pad-y) var(--hdr-pad-x);
  border-radius: var(--radius);
  border: 0;
  background: var(--surface);
  box-shadow: none;
}

.site-header__bar::after {
  content: "";
  position: absolute;
  left: var(--hdr-pad-x);
  right: var(--hdr-pad-x);
  bottom: 0;
  height: 1px;
  /* Ті самі значення, що в .site-footer__rule — один прийом на обидва краї
     сторінки, а не два схожі. */
  background: linear-gradient(90deg, transparent 0%, rgba(0, 112, 125, 0.22) 50%, transparent 100%);
}

.glass {
  background: var(--surface);
}

/** Картка «скло»: спільний вигляд для модулів із легким blur (може комбінуватись з контекстними класами) */
/* Пласка картка — єдина поверхня сайту (еталон _lab/v9: .card).
   Ім'я класу лишаємо історичним, щоб не переписувати розмітку; «скла» більше немає:
   ані градієнта, ані blur, ані кольорової тіні — саме воно й читалось як другий дизайн. */
.glass-popup {
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--surface);
  box-shadow: none;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  text-decoration: none;
  line-height: 0;
  min-width: 0;
}

.site-header__logo img {
  display: block;
  /* Було до 34px. У підвалі той самий знак іде 36–48px і читається як блок,
     а в шапці лишався дрібним значком у кутку. Стеля піднята до 38 — смуга
     стала нижчою, і бренд тепер займає її по висоті, а не плаває в порожнечі. */
  height: clamp(26px, 4vw, 38px);
  width: auto;
  max-width: min(184px, 42vw);
  object-fit: contain;
  object-position: left center;
}

.site-header__nav {
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 20px);
}

.site-header__nav a {
  position: relative;
  /* Текстовий шрифт, а не заголовковий: Days One у меню читається важко
     й брудно на дрібному кеглі — у підвалі ті самі пункти набрані Golos Text
     і виглядають чистіше. */
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  padding: 7px 8px;
  cursor: pointer;
  background: transparent;
  transition: color 0.26s var(--ease);
}

.site-header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100%;
  height: 2px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--primary-deep), var(--primary));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.38s var(--ease);
}

.site-header__nav a:hover,
.site-header__nav a:focus-visible {
  color: var(--primary-deep);
}

.site-header__nav a:hover::after,
.site-header__nav a:focus-visible::after {
  transform: scaleX(1);
}

.site-header__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 14px);
  align-self: center;
}

/* Перемикач мови. Вигляд лишається тим самим — блідий, приглушений: рішення
   власника (31.07), RU не має конкурувати з меню за увагу. Змінилось тільки
   те, що ці правила більше не дублюються інлайном у чотирьох файлах розмітки.
   Прозорий сірий тут навмисно не токен: жоден із наявних не дає такої блідості,
   а заводити токен заради одного елемента — зайве. */
.site-header__lang {
  align-self: center;
  font-size: 0.85em;
  font-weight: 600;
  color: rgba(100, 116, 139, 0.45);
  text-decoration: none;
  padding: 0 6px;
  transition: color 0.26s var(--ease);
}

.site-header__lang:hover,
.site-header__lang:focus-visible {
  color: rgba(100, 116, 139, 0.75);
}

/* Зворотний перехід — з RU-сторінки на українську — навмисно ЯСКРАВІШИЙ, а не
   блідий: іде війна, українська версія головніша (рішення власника 31.07).
   Тому правило «блідий» тут не діє, і модифікатор існує саме заради цього.
   Було #0e7490 інлайном — тепер токен `--primary` і повна насиченість. */
.site-header__lang--ua {
  color: var(--primary);
  font-weight: 700;
  font-size: 1em;
  opacity: 1;
}

.site-header__lang--ua:hover,
.site-header__lang--ua:focus-visible {
  color: var(--primary-deep);
}

/* Кружок Telegram. Було 48px — найбільший об'єкт у шапці при логотипі 34px,
   тому він тягнув на себе увагу замість меню. 40px ставить його в один зріст
   з рядком меню. Рамка й тон — ті самі значення, що в плашок месенджерів у
   підвалі (.site-footer__msg-ico), щоб верх і низ сторінки говорили однією
   мовою, а не двома схожими. */
.site-header__telegram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0, 112, 125, 0.14);
  background: rgba(0, 112, 125, 0.08);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  transition:
    transform 0.22s var(--ease),
    border-color 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}

.site-header__telegram:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 112, 125, 0.38);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

.site-header__telegram img {
  display: block;
  width: 22px;
  height: 22px;
}

.site-header__cta {
  white-space: nowrap;
}

.site-header__bar .site-header__cta.btn {
  font-size: 0.92rem;
  padding: 14px 24px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.site-header__bar .site-header__cta .btn__ico {
  flex-shrink: 0;
}

a.btn {
  text-decoration: none;
}

.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  padding: 11px 20px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}

/* Стиль без нескінченної ripple-анімації (мінус постійний GPUTask/шари) */
.btn--primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  color: #fff;
  background: linear-gradient(135deg, var(--cta-from) 0%, var(--cta-to) 100%);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

.btn--primary > * {
  position: relative;
  z-index: 1;
}

.btn--primary::before {
  content: none;
  display: none;
}

.btn--primary:hover {
  transform: translate3d(0, -1px, 0);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

/* Кнопка, якій ще нема чого робити (порожнє або зіпсоване поле), не має
   виглядати живою: інакше вона обіцяє дію, замість якої прилетить докір.
   Картка товару має власне, суворіше правило для «немає в наявності».
   Контраст навмисно ПОЛОВИННИЙ від звичайного («не должно вообще в глаза
   бросаться»): рамка вполовину слабша за --stroke, підпис — приглушений
   текст ще на 55%. Неактивний стан має читатись периферійним зором як
   «тут поки нічого», а не тягнути погляд на себе. */
.btn--primary:disabled {
  background: var(--bg-base);
  color: color-mix(in srgb, var(--text-muted) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--stroke) 50%, transparent);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.btn--primary:disabled:hover {
  transform: none;
}

/* Поле, у яке ще нічого не ввели, глушимо разом із кнопкою. Живе поле поруч
   із сірою кнопкою читається як зламана кнопка; сірі обидва читаються як
   «спочатку введи». Клас знімає script.js на першому ж символі. */
input.is-idle {
  background: var(--bg-base);
  color: color-mix(in srgb, var(--text-muted) 55%, transparent);
  border-color: color-mix(in srgb, var(--stroke) 50%, transparent);
}

input.is-idle::placeholder,
.zn-check.is-blank input::placeholder {
  color: color-mix(in srgb, var(--text-muted) 45%, transparent);
}

input.is-idle:focus {
  background: var(--surface);
  color: var(--text);
}

/* Код країни «+380» стоїть у полі від початку, тому воно формально не порожнє
   і само по собі не гасилось — біла коробка поруч із сірою читалась як збій.
   Дивимось на СТАН ФОРМИ (is-blank ставить script.js), а не на вміст поля:
   поки нічого не ввели, приглушений увесь контрол. */
.zn-check.is-blank input {
  background: var(--bg-base);
  color: color-mix(in srgb, var(--text-muted) 55%, transparent);
  border-color: color-mix(in srgb, var(--stroke) 50%, transparent);
}

.zn-check.is-blank input:focus {
  background: var(--surface);
  color: var(--text);
}

.btn--lg {
  font-size: 0.95rem;
  padding: 14px 28px;
}

.hero-actions .btn--hero-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  padding: 14px 24px;
  min-height: 48px;
}

.hero-actions .btn__ico {
  flex-shrink: 0;
}

.btn:focus-visible,
.site-header__nav a:focus-visible,
.site-header__telegram:focus-visible,
.site-header__logo:focus-visible,
.nav-toggle:focus-visible,
.mobile-nav__close:focus-visible,
.mobile-nav__links a:focus-visible,
.mobile-nav__telegram:focus-visible,
.faq-card__trigger:focus-visible,
.consultation-modal__close-x:focus-visible,
.consultation-channel__btn:focus-visible,
[data-review-open]:focus-visible,
.review-rating__btn:focus-visible {
  outline: 2px solid var(--cyan-soft);
  outline-offset: 3px;
}

.faq-card__trigger:focus-visible .faq-card__chev {
  background: rgba(0, 112, 125, 0.2);
  color: var(--primary);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-toggle.nav--mob {
  display: none;
}

@media (max-width: 900px) {
  .site-header .nav--desktop {
    display: none !important;
  }

  .nav-toggle.nav--mob {
    display: inline-flex;
    align-self: center;
    /* В останню колонку смуги. На сторінках зі статейною шапкою сітка має три
       колонки, меню й дії сховані, і кнопка сідала в ДРУГУ — після неї лишались
       порожня третя колонка й проміжок, тобто зайві 14px справа (29 проти 15
       зліва в логотипа). `-2 / -1` бере останню колонку незалежно від того,
       скільки їх у цієї шапки: на головній їх дві, і поведінка не змінюється. */
    grid-column: -2 / -1;
    justify-self: end;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    margin: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: opacity 0.26s var(--ease);
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-toggle.nav--mob:hover {
    opacity: 0.78;
  }

  .nav-toggle__lines {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 7px;
    width: 30px;
  }

  /* Лінії фіксованої ширини: лише transform/opacity у transition (без ширини / translate окремими властивостями). */
  .nav-toggle__lines span {
    display: block;
    width: 28px;
    height: 3px;
    border-radius: var(--radius);
    background: var(--primary-deep);
    transition: transform 0.42s var(--ease), opacity 0.3s var(--ease);
  }

  .nav-toggle__lines span:nth-child(1),
  .nav-toggle__lines span:nth-child(2),
  .nav-toggle__lines span:nth-child(3) {
    transform-origin: right center;
  }

  /* Коротша → повна → середня; скейл від правого краю */
  .nav-toggle__lines span:nth-child(1) {
    transform: scaleX(calc(13 / 28));
  }

  .nav-toggle__lines span:nth-child(2) {
    transform: scaleX(1);
  }

  .nav-toggle__lines span:nth-child(3) {
    transform: scaleX(calc(18 / 28));
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__lines {
    align-items: center;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__lines span:nth-child(1) {
    transform-origin: center;
    transform: translateY(10px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__lines span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__lines span:nth-child(3) {
    transform-origin: center;
    transform: translateY(-10px) rotate(-45deg);
  }

  /* Мобільне меню overlay */
  .mobile-nav {
    display: block;
    position: fixed;
    inset: 0;
    /* Над корзиною (.site-cart-root z-index: 1150), під офорленням замовлення (checkout 1250+) */
    z-index: 1180;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0.45s var(--ease);
  }

  .mobile-nav.is-open {
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-nav__backdrop {
    position: absolute;
    inset: 0;
    background: var(--overlay-dimmer);
    opacity: 0;
    transition: opacity 0.42s var(--ease);
  }

  .mobile-nav.is-open .mobile-nav__backdrop {
    opacity: 1;
  }

  .mobile-nav__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(100%, 400px);
    padding: clamp(14px, 4vw, 22px);
    padding-top: clamp(18px, 5vw, 28px);
    display: flex;
    flex-direction: column;
    border-radius: var(--radius) 0 0 var(--radius);
    border: 1px solid var(--stroke);
    border-right: none;
    background: var(--surface);
    box-shadow:
      0 1px 2px rgba(16, 21, 28, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transform: translateX(104%);
    transition: transform 0.52s var(--ease);
  }

  .mobile-nav.is-open .mobile-nav__panel {
    transform: translateX(0);
  }

  .mobile-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: clamp(18px, 4vh, 28px);
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 112, 125, 0.12);
  }

  .mobile-nav__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
    min-width: 0;
  }

  .mobile-nav__logo img {
    display: block;
    height: clamp(28px, 7vw, 38px);
    width: auto;
    max-width: min(200px, 62vw);
    object-fit: contain;
    object-position: left center;
  }

  .mobile-nav__close {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: opacity 0.26s var(--ease);
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav__close:hover {
    opacity: 0.72;
  }

  .mobile-nav__close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 3px;
    border-radius: var(--radius);
    background: var(--primary-deep);
    margin-top: -1.5px;
    margin-left: -13px;
  }

  .mobile-nav__close span:first-child {
    transform: rotate(45deg);
  }

  .mobile-nav__close span:last-child {
    transform: rotate(-45deg);
  }

  .mobile-nav__links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    overflow-y: auto;
  }

  .mobile-nav__links a {
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(1.06rem, 4.2vw, 1.25rem);
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    padding: 14px 14px 14px 20px;
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    transition:
      color 0.28s var(--ease),
      background 0.28s var(--ease),
      transform 0.42s var(--ease),
      opacity 0.42s var(--ease);
    opacity: 0;
    transform: translateX(28px);
  }

  .mobile-nav.is-open .mobile-nav__links a {
    opacity: 1;
    transform: translateX(0);
  }

  .mobile-nav.is-open .mobile-nav__links a:nth-child(1) {
    transition-delay: 0.05s;
  }
  .mobile-nav.is-open .mobile-nav__links a:nth-child(2) {
    transition-delay: 0.09s;
  }
  .mobile-nav.is-open .mobile-nav__links a:nth-child(3) {
    transition-delay: 0.13s;
  }
  .mobile-nav.is-open .mobile-nav__links a:nth-child(4) {
    transition-delay: 0.17s;
  }
  .mobile-nav.is-open .mobile-nav__links a:nth-child(5) {
    transition-delay: 0.21s;
  }
  .mobile-nav.is-open .mobile-nav__links a:nth-child(6) {
    transition-delay: 0.25s;
  }
  .mobile-nav.is-open .mobile-nav__links a:nth-child(7) {
    transition-delay: 0.29s;
  }
  .mobile-nav.is-open .mobile-nav__links a:nth-child(8) {
    transition-delay: 0.33s;
  }
  .mobile-nav.is-open .mobile-nav__links a:nth-child(9) {
    transition-delay: 0.37s;
  }
  .mobile-nav.is-open .mobile-nav__links a:nth-child(10) {
    transition-delay: 0.41s;
  }

  .mobile-nav__links a::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 3px;
    height: 60%;
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--cta-from), var(--primary));
    transform: translateY(-50%) scaleY(0);
    transform-origin: center;
    transition: transform 0.32s var(--ease);
    pointer-events: none;
  }

  .mobile-nav__links a:hover,
  .mobile-nav__links a:focus-visible {
    color: var(--primary-deep);
    background: rgba(0, 112, 125, 0.08);
  }

  .mobile-nav__links a:hover::before,
  .mobile-nav__links a:focus-visible::before {
    transform: translateY(-50%) scaleY(1);
  }

  .mobile-nav__cta-wrap {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2vh, 14px);
    margin-top: auto;
    padding-top: clamp(16px, 3vh, 24px);
    border-top: 1px solid rgba(0, 112, 125, 0.1);
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 0.42s var(--ease) 0.35s,
      transform 0.46s var(--ease) 0.35s;
  }

  .mobile-nav__telegram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 10px 16px;
    border-radius: var(--radius);
    border: 1px solid rgba(0, 112, 125, 0.14);
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
    color: var(--primary-deep);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.93rem;
    letter-spacing: -0.02em;
    transition:
      transform 0.28s var(--ease),
      border-color 0.28s var(--ease),
      box-shadow 0.28s var(--ease),
      color 0.2s var(--ease);
  }

  .mobile-nav__telegram:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 112, 125, 0.38);
    box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
    color: var(--primary);
  }

  .mobile-nav__telegram-ico {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
  border-radius: 999px;
    background: rgba(0, 112, 125, 0.07);
  }

  .mobile-nav__telegram-ico img {
    display: block;
    width: 24px;
    height: 24px;
  }

  .mobile-nav.is-open .mobile-nav__cta-wrap {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.55rem;
    min-height: 50px;
    font-size: 0.93rem;
  }

  .mobile-nav .btn__ico {
    flex-shrink: 0;
    display: block;
  }

  body.nav-open-mobile {
    overflow: hidden !important;
  }
}

@media (min-width: 901px) {
  .mobile-nav {
    display: none !important;
  }
}

/* --- Перший екран: центрований заголовок + дві картки товарів --- */
.hero-storefront {
  display: flex;
  flex-direction: column;
  gap: clamp(1.15rem, 3vw, 2.25rem);
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  padding-inline: var(--shell-pad-x);
}

.hero-intro {
  text-align: center;
  max-width: var(--container-max-w);
  margin-inline: auto;
  /* Без бічного поля: колонку вже задає .hero-storefront. Власний padding зсував
     H1 на 28px правіше за решту сторінки — саме через нього «скакала» ліва межа. */
  padding: clamp(8px, 1.8vw, 18px) 0 clamp(6px, 1.5vw, 14px);
  border: none;
  border-radius: var(--radius);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.hero-intro .hero-title {
  margin: 0 0 clamp(0.45rem, 1.2vh, 0.75rem);
  text-shadow:
    0 1px 22px rgba(255, 255, 255, 0.72),
    0 1px 3px rgba(255, 255, 255, 0.55);
}

/* text-shadow успадковується на span і «біліє» градієнт Tirzepatide */
.hero-intro .hero-title span {
  text-shadow: none;
}

.hero-intro .hero-lead {
  margin: 0;
  max-width: 40rem;
  margin-inline: auto;
  text-shadow:
    0 1px 16px rgba(255, 255, 255, 0.68),
    0 1px 2px rgba(255, 255, 255, 0.45);
}

.hero-catalog {
  width: 100%;
}

.hero-catalog-grid {
  align-items: stretch;
  min-height: clamp(240px, 35vw, 380px);
}

.hero-catalog .product-card__media img {
  height: clamp(156px, 20vw, 214px);
}

.hero-catalog .product-card__body {
  gap: 0.72rem;
  padding: clamp(0.82rem, 2vw, 1.12rem);
}

/* --- Hero (старий split): на поточній версії сайту не використовується --- */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--split-gap);
  align-items: stretch;
}

.hero-panel {
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--surface);
  overflow: hidden;
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  aspect-ratio: 1;
  min-height: 0;
}

.hero-panel--visual {
  padding: 0;
  position: relative;
}

.hero-panel--visual::before {
  display: none;
}

.hero-panel__figure {
  margin: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  border: none;
  box-shadow: none;
}

.hero-panel__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-panel--content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3.2vw, 36px);
}

.hero-panel__inner {
  width: 100%;
  max-width: 430px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hero-title {
  margin: 0 0 clamp(0.55rem, 1vh, 0.85rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.75vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
}

.hero-title span {
  color: var(--primary-deep);
  background: linear-gradient(135deg, var(--primary-deep), var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-lead {
  margin: 0 0 clamp(1.35rem, 2.75vh, 2.25rem);
  font-size: 0.94rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.hero-perks {
  list-style: none;
  margin: 0 0 clamp(1.15rem, 2.15vh, 1.85rem);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 520px) {
  .hero-perks {
    grid-template-columns: 1fr;
  }
}

.perk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-radius: var(--radius);
  background: transparent;
  border: none;
  font-family: var(--font-display);
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--text);
  cursor: default;
  box-shadow: none;
  transition: color 0.26s var(--ease);
}

.perk:hover {
  background: transparent;
  color: var(--primary-deep);
}

.perk:hover .perk__icon {
  transform: scale(1.14) rotate(-7deg);
  color: var(--primary-deep);
  background: rgba(0, 112, 125, 0.22);
}

.perk__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary-deep);
  transition:
    transform 0.42s var(--ease),
    color 0.26s var(--ease),
    background 0.26s var(--ease);
}

.perk__icon svg {
  width: 16px;
  height: 16px;
}

.perk__text {
  line-height: 1.35;
}

.hero-actions {
  margin-top: clamp(14px, 2.75vh, 32px);
}

/* --- ПК: перший екран ≈ висота вікна; решта сторінки скролиться звичайно --- */
@media (min-width: 901px) {
  html {
    height: auto;
  }

  body {
    min-height: 100%;
    overflow-x: clip;
    overflow-y: auto;
  }

  .page-shell {
    height: auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .screen-one {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.1vh, 16px);
    min-height: auto;
  }

  .site-header {
    flex-shrink: 0;
  }

  .hero-storefront {
    flex: 1 1 auto;
    min-height: 0;
    justify-content: center;
    /* Зазор під героєм = зазор над ним. Зверху 56px дає padding-top у .hero-top,
       знизу до краю наступної картки лишалось 52 — тепер обидва по 66. */
    padding-bottom: clamp(10px, 1.4vw, 18px);
  }

  /* Помітно більше повітря над заголовком у першому блоці (ПК) */
  .hero-intro {
    /* Без верхнього поля: воно зсувало H1 на 44px нижче за паспорт, і колонки
       героя починались на різній висоті. Повітря над героєм дає .hero-storefront. */
    padding: 0 0 clamp(6px, 1.5vw, 14px);
  }

  .hero-split {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr);
    align-self: stretch;
  }

  .hero-panel {
    height: 100%;
    width: 100%;
    min-height: 0;
    aspect-ratio: unset;
    box-shadow:
      0 1px 2px rgba(16, 21, 28, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .hero-panel--visual {
    padding: 0;
  }

  .hero-panel--content {
    padding: clamp(12px, 2vh, 32px) 5%;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }

  .hero-panel__inner {
    max-width: none;
    width: 94%;
    margin-inline: auto;
    gap: 0;
  }

  /* Стеля тут перебивала базове правило й тримала логотип на 34px навіть після
     того, як його підняли до 38. Піднято синхронно — інакше правка вище просто
     не діє на десктопі. */
  .site-header__logo img {
    height: clamp(22px, 3.2vw, 38px);
    max-width: min(184px, 20vw);
  }

  .site-header__nav {
    gap: clamp(6px, 0.95vw, 18px);
  }

  .site-header__nav a {
    font-size: clamp(11px, 0.88vw, 14px);
    padding: clamp(4px, 0.65vh, 10px) clamp(4px, 0.65vw, 12px);
  }

  .site-header__nav a::after {
    bottom: clamp(2px, 0.55vh, 8px);
  }

  .btn {
    font-size: clamp(12px, 0.87vw, 15px);
    padding: clamp(8px, 1.05vh, 13px) clamp(14px, 1.65vw, 28px);
  }

  .site-header__bar .site-header__cta.btn {
    font-size: clamp(13px, 0.95vw, 16px);
    padding: clamp(12px, 1.65vh, 18px) clamp(16px, 2vw, 34px);
    min-height: clamp(46px, 5vh, 56px);
    gap: clamp(8px, 0.95vw, 12px);
  }

  .site-header__bar .site-header__cta .btn__ico {
    width: clamp(18px, 1.6vw, 22px);
    height: clamp(18px, 1.6vw, 22px);
  }

  .hero-actions .btn--hero-order {
    font-size: clamp(13px, 0.95vw, 16px);
    padding: clamp(12px, 1.65vh, 18px) clamp(16px, 2vw, 34px);
    min-height: clamp(46px, 5vh, 56px);
    gap: clamp(8px, 0.95vw, 12px);
  }

  .hero-actions .btn__ico {
    width: clamp(18px, 1.6vw, 22px);
    height: clamp(18px, 1.6vw, 22px);
  }

  .hero-title {
    font-size: clamp(1.2rem, 2.95vw, 3.15rem);
    margin-bottom: clamp(0.35rem, 0.95vh, 0.65rem);
  }

  .hero-lead {
    font-size: clamp(13px, 1.05vw, 17px);
    line-height: 1.55;
    margin-bottom: clamp(1.5rem, 3.25vh, 2.85rem);
  }

  .hero-intro .hero-lead {
    margin-bottom: 0;
  }

  .hero-perks {
    gap: clamp(8px, 0.95vw, 14px);
    margin-bottom: clamp(1rem, 1.85vh, 1.55rem);
  }

  .hero-actions {
    margin-top: clamp(14px, 2.35vh, 30px);
  }

  .perk {
    gap: clamp(7px, 0.8vw, 12px);
    padding: clamp(4px, 0.65vh, 8px) 0;
    font-size: clamp(11px, 0.8vw, 13px);
    border-radius: var(--radius);
    background: transparent;
  }

  .perk:hover {
    background: transparent;
  }

  .perk__icon {
    width: clamp(26px, 2.4vw, 34px);
    height: clamp(26px, 2.4vw, 34px);
    border-radius: 999px;
  }

  .perk__icon svg {
    width: clamp(14px, 1.35vw, 18px);
    height: clamp(14px, 1.35vw, 18px);
  }
}

@media (max-width: 900px) {
  html,
  body {
    overflow: auto;
    height: auto;
  }

  /* Повноширинний hero під в’юпорт: оболонка без верхнього падінгу, бокові залишаємо для решти секцій */
  .page-shell {
    padding-top: 0;
    padding-bottom: var(--shell-pad-y);
    padding-inline: var(--shell-pad-x);
  }

  .screen-one {
    position: relative;
    gap: 0;
    width: calc(100% + 2 * var(--shell-pad-x));
    max-width: none;
    margin-inline: calc(-1 * var(--shell-pad-x));
  }

  .hero-storefront {
    padding-top: calc(
      max(var(--shell-pad-y), env(safe-area-inset-top, 0px)) + clamp(40px, 9vw, 54px) + clamp(42px, 11vw, 58px)
    );
    padding-bottom: clamp(2.75rem, 11vw, 4.75rem);
    gap: clamp(1rem, 4vw, 1.65rem);
  }

  /* Менший зазор над h1 усередині блоку заголовка (видиміше порівняно з попереднім «+100px») */
  .hero-intro {
    border-radius: var(--radius);
    padding: clamp(3px, 1vw, 8px) 0 clamp(6px, 1.5vw, 14px);
  }

  .hero-intro .hero-lead {
    margin-bottom: 0;
  }

  /*
    Хедер на всю ширину екрану + симетричні поля через padding (ще й safe-area для «островів»).
    Інакше right/left лише звужують блок, але зовнішня геометрія браузера/кастомних тем може дати асиметрію.
  */
  #hero.screen-one > .site-header {
    position: absolute;
    top: max(var(--shell-pad-y), env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    width: auto;
    box-sizing: border-box;
    padding-left: max(var(--shell-pad-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--shell-pad-x), env(safe-area-inset-right, 0px));
    z-index: 40;
    pointer-events: none;
  }

  #hero.screen-one > .site-header * {
    pointer-events: auto;
  }

  #hero.screen-one .site-header__bar.glass {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(12px, 3vw, 18px);
    text-align: left;
    padding: var(--hdr-pad-y) var(--hdr-pad-x);
  }

  .hero-split {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .hero-panel {
    aspect-ratio: auto;
  }

  /* Фото на всю ширину екрана: +50% висоти, зона під хедер (картка не під ним), плавний вихід у фон сторінки знизу */
  .hero-panel--visual {
    --hero-mob-header-slot: calc(max(var(--shell-pad-y), env(safe-area-inset-top, 0px)) + clamp(48px, 11vw, 64px));
    --hero-mob-visual-main: min(76vw, 400px);
    order: -1;
    position: relative;
    z-index: 1;
    padding-top: var(--hero-mob-header-slot);
    min-height: calc(var(--hero-mob-header-slot) + var(--hero-mob-visual-main));
    height: calc(var(--hero-mob-header-slot) + var(--hero-mob-visual-main));
    border: none;
    border-radius: var(--radius);
    box-shadow: none;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Коротка зона розчинення лише біля низу фото — решта залишається повністю видимою */
  .hero-panel--visual .hero-panel__figure img {
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 76%,
      rgba(0, 0, 0, 0.62) 88%,
      rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 76%,
      rgba(0, 0, 0, 0.62) 88%,
      rgba(0, 0, 0, 0) 100%
    );
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
  }

  .hero-panel--visual .hero-panel__figure {
    z-index: 1;
  }

  /* Вузький легкий відблиск знизу (узгоджено з коротшою маскою) */
  .hero-panel--visual::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(28%, 120px);
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      to top,
      transparent 0%,
      rgba(255, 255, 255, 0.14) 55%,
      transparent 100%
    );
  }

  /* Легкий нахлест тексту під коротший fade */
  .hero-panel--content {
    min-height: auto;
    aspect-ratio: auto;
    justify-content: flex-start;
    align-items: stretch;
    overflow: visible;
    border: none !important;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
    margin-top: clamp(-18px, -4vw, -8px);
    padding: clamp(18px, 4vw, 32px) var(--shell-pad-x) var(--shell-pad-y);
    position: relative;
    z-index: 2;
  }

  .hero-panel__inner {
    max-width: none;
    width: 100%;
    margin-inline: 0;
  }

  .hero-actions .btn--hero-order {
    width: 100%;
  }

  .site-header__logo img {
    max-width: min(160px, 56vw);
  }
}

@media (max-width: 640px) {
  .site-header__nav {
    gap: 8px 14px;
  }
}

/* --- Інформаційні вкладки — компактніше, узгоджено з текстом блоку «Як діє Tirzepatide?» --- */
.product-info-tabs {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(94vw, 1060px);
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(1.5rem, 4vw, 2.75rem);
  padding-bottom: clamp(1.65rem, 5vw, 3rem);
}

.product-info-tabs__tablist-wrap {
  display: flex;
  /* Було по центру — таби висіли посеред порожньої смуги, ні з чим не
     вирівняні, а текст під ними починався ліворуч. Тепер вони стоять на тій
     самій вертикалі, що й вміст панелі. */
  justify-content: flex-start;
  margin-bottom: clamp(0.65rem, 2vw, 1rem);
}

.product-info-tabs__tablist {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 4px 14px rgba(16, 21, 28, 0.05);
}

.product-info-tabs__tablist[role="tablist"]:focus-visible {
  outline: none;
}

.product-info-tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(0.78rem, 1.85vw, 0.88rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-muted);
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius);
  padding: 8px clamp(11px, 2.8vw, 17px);
  min-height: 40px;
  transition:
    background 0.28s var(--ease),
    color 0.24s var(--ease),
    border-color 0.24s var(--ease);
}

.product-info-tabs__tab:hover:not(.is-active) {
  color: var(--primary-deep);
  background: rgba(0, 112, 125, 0.06);
}

.product-info-tabs__tab:focus-visible {
  outline: 2px solid var(--cyan-soft);
  outline-offset: 3px;
}

.product-info-tabs__tab.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--cta-from) 0%, var(--cta-to) 100%);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: none;
}

.product-info-tabs__panels {
  padding: clamp(0.85rem, 2.2vw, 1.2rem);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 8px 22px rgba(16, 21, 28, 0.06);
}

.product-info-tabs__panel[hidden] {
  display: none !important;
}

.product-info-tabs__prose {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.35vw, 0.97rem);
  line-height: 1.72;
  color: var(--text-muted);
}

.product-info-tabs__prose h3 {
  font-family: var(--font-display);
  font-size: clamp(0.88rem, 1.7vw, 0.96rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--text);
  margin: 1rem 0 0.4rem;
}

.product-info-tabs__prose h3:first-child {
  margin-top: 0;
}

.product-info-tabs__prose p {
  margin: 0 0 0.72rem;
}

.product-info-tabs__prose p:last-child {
  margin-bottom: 0;
}

.product-info-tabs__prose strong {
  color: var(--text);
  font-weight: 600;
}

.product-info-tabs__prose ul {
  margin: 0.28rem 0 0.75rem;
  padding-left: 1.05rem;
  list-style: disc;
}

.product-info-tabs__prose ul:last-child {
  margin-bottom: 0;
}

.product-info-tabs__prose li {
  margin: 0.28rem 0;
  padding-left: 0.1rem;
}

.product-info-tabs__prose li::marker {
  color: var(--primary);
}

.product-info-tabs__facts {
  list-style: none;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

.product-info-tabs__facts li::marker {
  content: "";
}

/* Картки-списки — як за щільністю .how-benefit */
.product-info-tabs__prose ul.product-info-tabs__list--cols,
.product-info-tabs__facts.product-info-tabs__facts--cols {
  list-style: none;
  padding: 14px 18px !important;
  margin: 0.5rem 0 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  background: rgba(248, 250, 252, 0.85);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: var(--radius);
}

.product-info-tabs__prose ul.product-info-tabs__list--cols:last-child,
.product-info-tabs__facts.product-info-tabs__facts--cols:last-child {
  margin-bottom: 0;
}

.product-info-tabs__prose ul.product-info-tabs__list--cols > li,
.product-info-tabs__facts.product-info-tabs__facts--cols > li {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  padding: 6px 10px;
  border: none;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  transition: background-color 0.18s var(--ease);
}

.product-info-tabs__prose ul.product-info-tabs__list--cols > li:hover,
.product-info-tabs__facts.product-info-tabs__facts--cols > li:hover {
  background: var(--bg-base);
}

.product-info-tabs__facts.product-info-tabs__facts--cols strong {
  font-size: inherit;
  color: var(--primary-deep);
}

.product-info-tabs__facts.product-info-tabs__facts--cols > li.dose-fact {
  grid-column: 1 / -1;
  background: rgba(0, 112, 125, 0.05);
  border: 1px solid rgba(0, 112, 125, 0.12);
}

.dose-links a,
.dose-links a:link,
.dose-links a:visited {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: none;
}

.dose-links a:hover {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* Немає в наявності — той самий візуальний код, що й у чипів картки (.product-card__chip.is-oos) */
.dose-links a.is-oos,
.dose-links a.is-oos:link,
.dose-links a.is-oos:visited {
  opacity: 0.5;
  text-decoration: line-through !important;
  text-decoration-thickness: 1.5px;
}

.dose-links a.is-oos:hover {
  text-decoration: line-through underline !important;
}

@media (max-width: 640px) {
  .product-info-tabs__prose ul.product-info-tabs__list--cols,
  .product-info-tabs__facts.product-info-tabs__facts--cols {
    grid-template-columns: 1fr;
    padding: 10px 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-info-tabs__prose ul.product-info-tabs__list--cols > li,
  .product-info-tabs__facts.product-info-tabs__facts--cols > li {
    transition: none;
  }

  .product-info-tabs__prose ul.product-info-tabs__list--cols > li:hover,
  .product-info-tabs__facts.product-info-tabs__facts--cols > li:hover {
    border-color: rgba(0, 112, 125, 0.14);
  }
}

@media (max-width: 560px) {
  .product-info-tabs__tablist {
    width: 100%;
    justify-content: stretch;
    border-radius: var(--radius);
  }

  .product-info-tabs__tab {
    flex: 1 1 auto;
    min-width: calc(33.333% - 6px);
    justify-content: center;
    text-align: center;
    padding-inline: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-info-tabs__tab {
    transition: none;
  }
}

/* --- «Як діє Tirzepatide»: прилипаючий текст + повний список переваг --- */
.how-it-works {
  position: relative;
  overflow-x: hidden;
  overflow-x: clip;
  isolation: isolate;
  margin-top: 24px;
  margin-bottom: 24px;
  padding-bottom: 0;
}

.how-it-works::before {
  display: none;
}

.how-it-works__layout {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.how-it-works__aside {
  position: relative;
  min-width: 0;
  width: 100%;
}

.how-it-works__copy {
  position: relative;
  top: auto;
  padding: 0;
}

.how-it-works__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.5vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.18;
  margin: 0 0 4px;
  color: var(--primary-deep);
  max-width: 100%;
}


.how-it-works__prose {
  font-size: clamp(0.9rem, 1.35vw, 0.97rem);
  line-height: 1.72;
  color: var(--text-muted);
  max-width: 100%;
}

.how-it-works__prose p {
  margin: 0 0 0.5rem;
}

.how-it-works__prose p:last-child {
  margin-bottom: 0;
}

.how-it-works__benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

@media (max-width: 900px) {
  .how-it-works__benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .how-it-works__benefits {
    grid-template-columns: 1fr;
  }
}

.how-benefit {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(12px, 2vw, 15px) clamp(14px, 2vw, 17px);
  margin: 0;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 112, 125, 0.14);
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 0 6px 22px rgba(16, 21, 28, 0.05);
}

.how-benefit__ico {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--primary-deep);
  background: rgba(0, 112, 125, 0.11);
}

.how-benefit__ico svg {
  width: 22px;
  height: 22px;
}

.how-benefit__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
  color: var(--text);
}

.how-benefit__desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-muted);
}

@media (max-width: 960px) {
  .how-it-works__layout {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2.25rem);
  }

  .how-it-works__title {
    max-width: none;
  }

  .how-it-works__copy {
    position: relative;
    top: auto;
    padding-bottom: 0;
  }
}

/* --- Перед курсом: сітка з 6 карток на ПК + кольорова виноска --- */
.course-know {
  margin-top: 24px;
  margin-bottom: 24px;
  padding-bottom: 0;
  position: relative;
  isolation: isolate;
}

.course-know::before {
  display: none;
}

.course-know__wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
}

.course-know__head {
  margin-bottom: clamp(0.85rem, 2.2vw, 1.25rem);
}

.course-know__title {
  font-family: var(--font-display);
  font-size: clamp(1.38rem, 3.8vw, 1.92rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.18;
  margin: 0;
  color: var(--text);
}

.course-know__lead {
  max-width: var(--container-max-w);
  margin: 0 0 clamp(1rem, 2.8vw, 1.35rem);
  font-size: clamp(0.9rem, 1.35vw, 0.97rem);
  line-height: 1.72;
  color: var(--text-muted);
}

.course-know__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.65rem, 1.6vw, 1rem);
  width: 100%;
}

.course-know__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  min-height: 100%;
  margin: 0;
  padding: clamp(11px, 1.85vw, 15px) clamp(8px, 1.2vw, 10px);
  border-radius: var(--radius);
  border: 1px solid rgba(0, 112, 125, 0.14);
  background: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 6px 22px rgba(16, 21, 28, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  transition:
    transform 0.32s var(--ease),
    border-color 0.28s var(--ease),
    box-shadow 0.32s var(--ease);
}

.course-know__card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 112, 125, 0.32);
  box-shadow:
    0 1px 2px rgba(16, 21, 28, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.course-know__ico {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--primary-deep);
  background: rgba(0, 112, 125, 0.1);
}

.course-know__ico svg {
  width: 22px;
  height: 22px;
  display: block;
}

.course-know__text {
  margin: 0;
  font-size: clamp(0.78rem, 1.05vw, 0.82rem);
  line-height: 1.46;
  color: var(--text-muted);
  hyphens: auto;
}

/* Це дисклеймер §6, отже той самий вигляд, що й у решти плашок «Увага»:
   янтарний, компактний. Бірюзова рамка вводила в оману — бірюза в нас
   означає дію, а не попередження. */
.course-know__remark {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: clamp(0.9rem, 2vw, 1.25rem);
  padding: 9px 12px;
  max-width: 62ch;
  border: 0;
  border-left: 3px solid var(--warn);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--warn-bg);
  box-shadow: none;
}
.course-know__remark-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--warn);
  font-weight: 600;
  margin: 0;
  flex: none;
}
.course-know__remark-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text);
}

.course-know__remark-title {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.95vw, 1rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  margin: 0 0 0.5rem;
  color: var(--primary-deep);
}

.course-know__remark-text {
  margin: 0;
  font-size: clamp(0.88rem, 1.3vw, 0.94rem);
  line-height: 1.68;
  color: var(--text-muted);
}

@media (max-width: 1100px) {
  .course-know__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.7rem, 2vw, 0.95rem);
  }
}

@media (max-width: 640px) {
  .course-know__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }
}

@media (max-width: 360px) {
  .course-know__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .course-know__card:hover {
    transform: none;
    border-color: rgba(0, 112, 125, 0.14);
    box-shadow:
      0 1px 2px rgba(16, 21, 28, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.88);
  }
}

@media (max-width: 960px) {
  .course-know {
    padding-bottom: calc(var(--products-section-bottom) + var(--audience-outer-gap));
  }
}
/* --- Як використовувати: «журнальна» колонка + виноска --- */
.usage-guide {
  margin-top: 24px;
  margin-bottom: 24px;
  position: relative;
  isolation: isolate;
}

.usage-guide::before {
  display: none;
}

.usage-guide__wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: min(94vw, 1060px);
  margin-left: auto;
  margin-right: auto;
  padding: 20px 24px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid rgba(0, 112, 125, 0.16);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

.usage-guide__mast {
  position: relative;
  top: auto;
  padding-right: 0;
}

.usage-guide__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0;
  color: var(--primary-deep);
}

.usage-guide__columns {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: center;
}

@media (max-width: 850px) {
  .usage-guide__columns {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.usage-guide__steps {
  counter-reset: ug-step;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  border-left: none;
}

@media (max-width: 600px) {
  .usage-guide__steps {
    grid-template-columns: 1fr;
  }
}

.usage-guide__step {
  counter-increment: ug-step;
  position: relative;
  margin: 0;
  padding: 8px 12px 8px 36px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid rgba(226, 232, 240, 0.8);
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.usage-guide__step:last-child {
  margin-bottom: 0;
}

.usage-guide__step::before {
  content: counter(ug-step, decimal-leading-zero);
  position: absolute;
  left: 10px;
  top: 8px;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--primary);
}

.usage-guide__callout {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-top: 0;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 112, 125, 0.45);
  background: var(--surface-sunk);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

.usage-guide__callout-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.38rem;
  line-height: 1;
  color: #fff;
  background: linear-gradient(145deg, var(--primary-deep) 0%, var(--primary) 55%, var(--cyan-soft) 100%);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  margin-top: 0.06em;
}

.usage-guide__callout-text {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: clamp(0.92rem, 1.4vw, 1rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--text);
  text-align: left;
}

@media (max-width: 900px) {
  .usage-guide__wrap {
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 3.5vw, 1.85rem);
  }

  .usage-guide__mast {
    position: relative;
    top: auto;
    padding-right: 0;
  }
}

/* --- Відгуки --- */
.usage-guide + .testimonials-section {
  margin-top: 0;
}

@media (min-width: 961px) {
  .usage-guide + .testimonials-section {
    margin-top: clamp(1.5rem, 3.4vw, 2.35rem);
  }
}

.testimonials-section {
  --tst-star: clamp(13px, 2.45vw, 17px);
  --tst-slide-gap: clamp(11px, 2.2vw, 18px);
  position: relative;
  overflow: visible;
  display: grid;
  gap: clamp(1.05rem, 2.75vw, 1.65rem);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title nav"
    "viewport viewport"
    "cta cta";
  align-items: center;
  padding-bottom: var(--audience-outer-gap);
}

/* Не стилізувати всіх дітей через `> *` — ламає .visually-hidden (absolute → relative перекриває сітку) */
.testimonials-section__title,
.testimonials-section__nav {
  position: relative;
  z-index: 2;
}

.testimonials-section__toolbar {
  display: contents;
}

.testimonials-section__title {
  grid-area: title;
  font-family: var(--font-display);
  font-size: clamp(1.38rem, 3.8vw, 1.92rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.18;
  margin: 0;
  color: var(--text);
  max-width: 18ch;
}

.testimonials-section__nav {
  grid-area: nav;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

.testimonials-section__ctrl {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid var(--stroke-strong);
  color: var(--primary-deep);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
}

.testimonials-section__ctrl:not(:disabled):hover {
  color: var(--primary);
  border-color: rgba(0, 112, 125, 0.45);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

.testimonials-section__ctrl:not(:disabled):active {
  transform: scale(0.94);
}

.testimonials-section__ctrl:disabled {
  opacity: 0.52;
}

.testimonials-section__ctrl:focus-visible {
  outline: 2px solid var(--cyan-soft);
  outline-offset: 3px;
}

.testimonials-section__viewport-wrap {
  grid-area: viewport;
  min-width: 0;
  position: relative;
  z-index: 1;
  padding-block: clamp(6px, 1.4vw, 12px);
  /* Full-bleed: на всю ширину вікна, поверх падінгу shell — крайні слайди «заглядають» без «внутрішньої обрізки» */
  width: calc(100% + 2 * var(--shell-pad-x));
  margin-left: calc(-1 * var(--shell-pad-x));
  margin-right: calc(-1 * var(--shell-pad-x));
  max-width: 100vw;
}

.testimonials-section__cta-wrap {
  grid-area: cta;
  display: flex;
  justify-content: center;
  padding-top: clamp(0.35rem, 1.6vw, 0.95rem);
  position: relative;
  z-index: 2;
}

/* Такий же розмір, як у головній кнопці в шапці */
.testimonials-section__cta-wrap .btn.btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  padding: 14px 24px;
  min-height: 48px;
}

/* Зовні — без overflow:hidden: тіні карток не «роздмухують» секцію; трек кліпає лише внутрішній шар */
.testimonials-section__viewport {
  width: 100%;
  overflow: visible;
  padding-block: clamp(8px, 1.8vw, 14px);
}

.testimonials-section__viewport-clip {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
  overflow-y: visible;
  /* Після full-bleed горизонтальний край уже край екрана — лише легкий зазор під тінь */
  padding-inline: clamp(8px, 2.5vw, 20px);
  contain: paint;
}

@supports not (overflow: clip) {
  .testimonials-section__viewport-clip {
    overflow-x: hidden;
  }
}

.testimonials-section__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--tst-slide-gap);
  transition: transform 0.4s var(--ease);
}

.testimonial-card {
  flex: 0 0 var(--slide-w, 280px);
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 0.72rem;
  padding: clamp(1rem, 2.6vw, 1.35rem);
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  background: var(--surface);
}

.testimonial-card__media {
  display: inline-flex;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  padding: 2px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

.testimonial-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  background: var(--surface-sunk);
}

.testimonial-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.42rem;
  width: 100%;
}

.testimonial-card__person {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-size: clamp(0.93rem, 2.1vw, 1rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text);
}

.testimonial-card__name {
  color: var(--primary-deep);
}

.testimonial-card__instagram {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
}

.testimonial-card__instagram:hover,
.testimonial-card__instagram:focus-visible {
  color: var(--primary-deep);
  text-decoration: underline;
}

.testimonial-card__age {
  font-weight: 600;
  color: var(--text-muted);
}

.testimonial-card__stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.t-star svg {
  display: block;
  width: var(--tst-star);
  height: var(--tst-star);
}

/* Повні/порожні зірки рендеряться через <use href="#t-star-shape"> — path у DOM відсутній */
.t-star--full use {
  fill: url(#reviews-star-fill);
}

.t-star--empty use {
  fill: rgba(16, 21, 28, 0.08);
  stroke: rgba(16, 21, 28, 0.35);
  stroke-width: 1.1;
}

.t-star-half {
  position: relative;
  display: block;
  width: var(--tst-star);
  height: var(--tst-star);
}

.t-star-half__mute,
.t-star-half__slice svg {
  position: absolute;
  inset: 0;
  width: var(--tst-star);
  height: var(--tst-star);
}

.t-star-half__slice {
  position: absolute;
  inset: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
  pointer-events: none;
}

.t-star-half__slice svg {
  position: absolute;
  left: 0;
  top: 0;
}

.testimonial-card__quote {
  margin: 0;
  padding: 0;
  border: none;
  width: 100%;
  flex: 1 1 auto;
}

.testimonial-card__quote p {
  margin: 0;
  font-size: clamp(0.815rem, 1.82vw, 0.895rem);
  line-height: 1.62;
  color: var(--text-muted);
}

.testimonial-card__reply {
  width: 100%;
  margin: 0;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(0, 112, 125, 0.07);
}

.testimonial-card__reply strong {
  display: block;
  margin-bottom: 0.22rem;
  font-size: clamp(0.72rem, 1.6vw, 0.78rem);
  color: var(--primary-deep);
}

.testimonial-card__reply p {
  margin: 0;
  font-size: clamp(0.8rem, 1.78vw, 0.87rem);
  line-height: 1.55;
  color: var(--text-muted);
}

.testimonial-card__reply-date {
  display: block;
  margin-top: 0.4rem;
  font-size: clamp(0.68rem, 1.4vw, 0.72rem);
  color: var(--text-muted);
  opacity: 0.7;
}

.testimonial-card__date {
  display: block;
  margin-top: 0.55rem;
  font-size: clamp(0.7rem, 1.5vw, 0.76rem);
  color: var(--text-muted);
  opacity: 0.7;
}

.testimonials-section + .faq-section {
  margin-top: 0;
}

@media (min-width: 961px) {
  .testimonials-section + .faq-section {
    margin-top: clamp(1.5rem, 3.4vw, 2.35rem);
  }
}

/* --- FAQ --- */
.faq-section {
  padding-bottom: clamp(2rem, 5vw, 4rem);
}

.faq-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.38rem, 3.8vw, 1.92rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.18;
  margin: 0 0 clamp(1.35rem, 3vw, 1.85rem);
  color: var(--text);
  max-width: 22ch;
}

.faq-section__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid rgba(0, 112, 125, 0.16);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  align-items: start;
}

@media (max-width: 768px) {
  .faq-section__grid {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 8px;
  }
}

.faq-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid rgba(226, 232, 240, 0.8);
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
  overflow: hidden;
  transition: all 0.2s ease;
  contain: layout;
}

.faq-card:hover {
  border-color: rgba(0, 112, 125, 0.3);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

.faq-card.is-open {
  border-color: rgba(0, 112, 125, 0.35);
  background: var(--bg-base);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

.faq-card__trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.85rem, 2vw, 1.25rem);
  margin: 0;
  padding: clamp(1rem, 2.4vw, 1.28rem) clamp(1rem, 2.35vw, 1.32rem);
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
}

.faq-card__trigger:hover .faq-card__question {
  color: var(--primary-deep);
}

.faq-card__question {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(0.93rem, 2vw, 1.035rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.32;
  color: var(--primary-deep);
  transition: color 0.28s var(--ease);
}

.faq-card__chev {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  color: var(--primary-deep);
  background: rgba(0, 112, 125, 0.11);
  border: none;
  box-shadow: none;
  transition: color 0.28s var(--ease), background 0.28s var(--ease);
}

.faq-card__chev svg {
  grid-area: 1 / 1;
  display: block;
  width: 22px;
  height: 22px;
}

.faq-card__chev-arrow {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.18s var(--ease),
    transform 0.18s var(--ease);
}

.faq-card__chev-close {
  opacity: 0;
  transform: scale(0.88);
  pointer-events: none;
  transition:
    opacity 0.18s var(--ease),
    transform 0.18s var(--ease);
}

.faq-card.is-open .faq-card__chev-arrow {
  opacity: 0;
  transform: scale(0.88);
  pointer-events: none;
}

.faq-card.is-open .faq-card__chev-close {
  opacity: 1;
  transform: scale(1);
  pointer-events: none;
}

.faq-card.is-open .faq-card__chev {
  color: var(--primary);
  background: rgba(0, 112, 125, 0.18);
}

/* Без transition на grid-template-rows: його інтерполяція дає дорогий layout-кожний-кадр на слабких GPU */
.faq-card__collapse {
  display: grid;
  grid-template-rows: 0fr;
}

.faq-card.is-open .faq-card__collapse,
.faq-slim-card.is-open .faq-card__collapse {
  grid-template-rows: 1fr;
}

.faq-card__panel,
.faq-slim-panel {
  overflow: hidden;
  min-height: 0;
}

.faq-card__panel p {
  margin: 0;
  padding: 0 clamp(1rem, 2.35vw, 1.32rem) clamp(1rem, 2.35vw, 1.35rem);
  padding-top: 2px;
  font-size: clamp(0.86rem, 1.82vw, 0.935rem);
  line-height: 1.62;
  color: var(--text-muted);
}

@media (max-width: 740px) {
  .faq-section__grid {
    grid-template-columns: 1fr;
  }

  .faq-section__title {
    max-width: none;
  }
}

/* --- Футер --- */
.faq-section + .site-footer {
  margin-top: clamp(1.75rem, 4.5vw, 2.75rem);
}

.site-footer {
  padding-bottom: clamp(0.85rem, 2.2vw, 1.5rem);
}

.site-footer__panel {
  position: relative;
  overflow: hidden;
  /* Трохи щільніше: було до 2.85rem поля з усіх боків. */
  padding: clamp(1.25rem, 3vw, 2.1rem);
  /* Той самий кут, що в шапки. Об'ємність лишається — тінь нижче. */
  border-radius: var(--radius);
  border: 1px solid rgba(0, 112, 125, 0.16);
  background: var(--surface);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.site-footer__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.88fr) minmax(200px, 1.08fr);
  gap: clamp(1.85rem, 4.5vw, 3.15rem);
  align-items: start;
}

@media (min-width: 901px) {
  .site-footer__grid {
    /* Перша колонка ширша; 2 і 3 — однакові fr (баланс без «улипання» упритул вправо) */
    grid-template-columns:
      minmax(min(248px, 30vw), 2.08fr)
      minmax(0, 0.82fr)
      minmax(0, 0.82fr);
    column-gap: clamp(1.05rem, 2.5vw, 1.85rem);
    row-gap: clamp(1.85rem, 4.5vw, 3.15rem);
    width: 100%;
  }

  /*
    Усередині широких колонок 2–3: меню впирається в межу до контактів,
    Telegram — із протилежної сторони, щоб проміж між ними ≈ лише column-gap
  */
  .site-footer__brand + .site-footer__col {
    justify-self: end;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
  }

  .site-footer__grid > .site-footer__col.site-footer__col--contact {
    justify-self: start;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    /* Лише між «Меню» і «Контакти» — без збільшення зазору після блоку лого */
    margin-inline-start: clamp(1.05rem, 3vw, 2.05rem);
  }

  .site-footer__brand {
    min-width: 0;
    padding-right: clamp(0.75rem, 2.2vw, 1.75rem);
  }

  .site-footer__tagline {
    max-width: min(70ch, 100%);
  }

  .site-footer__logo img {
    max-width: min(220px, 100%);
  }
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.site-footer__logo img {
  display: block;
  height: clamp(36px, 4.8vw, 48px);
  width: auto;
  max-width: min(192px, 52vw);
  object-fit: contain;
  object-position: left center;
}

.site-footer__tagline {
  margin: clamp(0.92rem, 2.1vw, 1.22rem) 0 0;
  max-width: min(58ch, 100%);
  font-size: clamp(0.78rem, 1.48vw, 0.86rem);
  line-height: 1.58;
  color: var(--text-muted);
}

.site-footer__col-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-deep);
  margin: 0 0 1rem;
  opacity: 0.92;
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.site-footer__links a {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  padding: 7px 8px;
  margin: 0;
  cursor: pointer;
  background: transparent;
  transition: color 0.26s var(--ease);
}

.site-footer__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100%;
  height: 2px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--primary-deep), var(--primary));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.38s var(--ease);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--primary-deep);
}

.site-footer__links a:hover::after,
.site-footer__links a:focus-visible::after {
  transform: scaleX(1);
}

.site-footer__messengers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.site-footer__messenger {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 15px 10px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 112, 125, 0.14);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  color: var(--primary-deep);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.02em;
  transition: transform 0.28s var(--ease);
}

.site-footer__messenger:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 112, 125, 0.38);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  color: var(--primary);
}

.site-footer__msg-ico {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0, 112, 125, 0.11);
  color: var(--primary-deep);
}

.site-footer__msg-img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.site-footer__rule {
  position: relative;
  z-index: 1;
  height: 1px;
  margin: clamp(1.55rem, 3.8vw, 2.35rem) 0 clamp(1.22rem, 2.85vw, 1.72rem);
  background: linear-gradient(90deg, transparent 0%, rgba(0, 112, 125, 0.22) 50%, transparent 100%);
}

.site-footer__bottom {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.05rem, 2.3vw, 1.42rem);
}

.site-footer__copyright {
  margin: 0;
  font-size: 0.852rem;
  font-weight: 600;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2rem);
  }
}



.site-footer__logo:focus-visible,
.site-footer__links a:focus-visible,
.site-footer__messenger:focus-visible {
  outline: 2px solid var(--cyan-soft);
  outline-offset: 3px;
}

/* --- Секція товарів (формати Tirzepatide) --- */
.products-section {
  /* Відступ між секціями задає лінійка-роздільник (main > section + section::before),
     а не власний margin секції. Разом вони давали 160px порожнечі між останнім
     рядком «Двох шляхів» і першою карткою. */
  margin-top: 0;
  padding-bottom: var(--products-section-bottom);
}

/* Відступ уже задає padding-bottom у .how-it-works — без подвійного margin */
.how-it-works + .products-section {
  margin-top: 0;
}

/* Один алгоритм «повітря між секціями», як між «Перед курсом» і «Рекомендаціями»: padding-bottom попереднього + цей margin */
.how-it-works + .course-know {
  margin-top: 0;
}

.products-section + .course-know {
  margin-top: var(--audience-outer-gap);
}

@media (min-width: 961px) {
  .how-it-works + .course-know {
    margin-top: clamp(1.5rem, 3.4vw, 2.35rem);
  }
}

.course-know + .usage-guide {
  margin-top: 0;
}

@media (min-width: 961px) {
  .course-know + .usage-guide {
    margin-top: clamp(1.5rem, 3.4vw, 2.35rem);
  }
}

.products-section__head {
  text-align: left;
  max-width: none;
  margin: 0 0 clamp(2rem, 4.5vw, 3rem);
}

.products-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.38rem, 3.8vw, 1.92rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.18;
  margin: 0;
  color: var(--text);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.15rem, 2.8vw, 2rem);
  width: 100%;
  max-width: none;
  margin: 0;
}

.product-card {
  --tst-star: clamp(11px, 2vw, 15px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  /* Картка не біла, а з м'ятним переходом донизу — так вона відділяється від
     фону сторінки й не читається як діра. Плаский білий, поставлений при
     зведенні палітри, робив каталог блідим. */
  background: linear-gradient(
    158deg,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(236, 254, 255, 0.94) 100%
  );
  transition: transform 0.46s var(--ease);
  contain: layout;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  /* Рамка як у звичайному стані — без темнішої «обводки» при hover */
  border-color: var(--stroke);
}

.product-card__badge {
  position: absolute;
  top: clamp(12px, 2vw, 18px);
  right: clamp(12px, 2vw, 18px);
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(135deg, var(--cta-from) 0%, var(--primary) 100%);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  pointer-events: none;
}

.product-card__media {
  display: block;
  width: 100%;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  border: none;
  cursor: default;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  /* Плитка з фото — єдине місце картки, де тил працює як підкладка, а не як дія.
     Після зведення палітри тон осів у сіро-блакитний: той самий відсоток, але
     глухіший відтінок. Піднято до помітного, щоб квадрат читався бірюзовим. */
  background: color-mix(in srgb, var(--primary) 11%, var(--surface));
  box-shadow: inset 0 -1px 0 rgba(0, 112, 125, 0.16);
}

.product-card__media:hover {
  box-shadow: inset 0 -1px 0 rgba(16, 21, 28, 0.14);
}

.product-card__media img {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center;
}

.product-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 0;
  padding: clamp(1rem, 2.4vw, 1.35rem);
}

/* Рядок назви — назва зліва, бейдж дослідницького класу праворуч.
   §6 вимагає бейдж саме на картці: там, де ухвалюють рішення купити. */
.product-card__title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
/* Бейдж «дослідницький клас» переїхав у верхній правий кут плитки з фото —
   на місце знятого «Популярно». Так він не тисне назву й не ламає ряд, коли
   назва переноситься на два рядки. */
.product-card__media {
  position: relative;
}
.product-card__media .product-card__research {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: var(--surface);
}
.product-card__research {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--warn);
  background: transparent;
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  padding: 2px 6px;
  white-space: nowrap;
}

.product-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.4vw, 1.22rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
  color: var(--text);
}

.product-card__stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 0 2px;
  opacity: 0.75;
  transform: scale(0.88);
  transform-origin: left center;
}

.product-card__desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Чипи варіантів — рівна сітка, а не «різнокаліберні» прямокутники: усі однакової
   ширини й вирівняні в стовпці. Раніше ширина йшла від тексту («2 мг» вужче за «2,5 мг»),
   і на шприці 8 варіантів розсипались рваними рядками. */
.product-card__chips {
  /* Один ряд завжди. auto-fill набирав стільки колонок по 64px, скільки влізе —
     8 варіантів шприца не вміщались і падали другим рядом. Тепер колонок рівно
     стільки, скільки чипів, і вони ділять ширину порівну. Якщо варіантів колись
     стане забагато — ряд прокрутиться вбік, а не розсиплеться. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(46px, 1fr);
  gap: 6px;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  /* Блок покупки притиснуто до низу картки. Картки в ряду мають різну кількість
     розкривашок, тому зверху вони заповнюються по-різному — а чипи й ціна в обох
     стають на одну лінію. Порожнеча збирається в одному місці, а не розсипається
     між рядками. */
  margin-top: auto;
}
.product-card__chips::-webkit-scrollbar { display: none; }

.product-card__chip {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 5px 4px;
  min-height: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  line-height: 1.2;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.product-card__chip-oos {
  font-size: 0.58rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.product-card__chip:hover {
  border-color: rgba(0, 112, 125, 0.55);
  background: rgba(255, 255, 255, 0.96);
}

.product-card__chip.is-selected {
  border-color: transparent;
  background: linear-gradient(135deg, var(--cta-from) 0%, var(--primary) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

.product-card__chip:focus-visible {
  outline: 2px solid var(--cyan-soft);
  outline-offset: 2px;
}

.product-card__chip.is-oos {
  opacity: 0.5;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.product-card__chip.is-oos.is-selected {
  background: var(--text-muted);
  box-shadow: none;
  opacity: 0.75;
}

.product-card__no-variants {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.product-card__price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-areas: "price cta" "permg cta";
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  /* margin-top:auto НЕ ставимо: він уже стоїть на .product-card__chips.
     Два auto-margini поспіль ділять вільне місце навпіл — саме через це між
     чипами й ціною в шприці зависала порожнеча. Тепер увесь запас іде вгору,
     а блок покупки в обох картках стоїть впритул до низу. */
  padding-top: 10px;
}
.product-card__price-main { grid-area: price; display: flex; align-items: baseline; gap: 8px; }
.product-card__permg { grid-area: permg; }
.product-card .btn.btn--primary.product-card__cta {
  width: auto;
  margin-top: 0;
  /* 42 → 44: головна кнопка покупки не повинна бути нижчою за пальцевий мінімум. */
  min-height: 44px;
  font-size: 0.88rem;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.product-card__price-old {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.78;
}

.product-card__permg {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border-radius: var(--radius);
  padding: 0;
  white-space: nowrap;
}

.product-card__permg[hidden] {
  display: none;
}

.product-card .btn.btn--primary.product-card__cta {
  width: auto;
  margin-top: 0;
  /* 42 → 44: головна кнопка покупки не повинна бути нижчою за пальцевий мінімум. */
  min-height: 44px;
  font-size: 0.88rem;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.product-card .product-card__cta .btn__ico {
  flex-shrink: 0;
  display: block;
}

.product-card .btn.btn--primary.product-card__cta.is-out-of-stock,
.product-card .btn.btn--primary.product-card__cta:disabled {
  background: var(--surface-sunk);
  color: var(--text-muted);
  box-shadow: none;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

@media (max-width: 820px) {
  .products-grid {
    grid-template-columns: 1fr;
  }
}

body.consultation-open,
body.review-open {
  overflow: hidden !important;
}

/* --- Модалка «Замовити консультацію» + модалка відгуку --- */
.consultation-modal,
.review-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 28px);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.38s var(--ease),
    visibility 0.38s var(--ease);
}

.consultation-modal.is-open,
.review-modal.is-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

.consultation-modal__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  background: var(--overlay-dimmer);
  z-index: 0;
}

.consultation-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  /* Жорсткий кап 620px не давав вмісту (≈673px) влізти навіть там, де екран
     дозволяє: заголовок зрізало зверху або кнопку «Залишити заявку» знизу —
     видно було щось одне. Лишаємо тільки відносні межі. */
  max-height: min(90vh, 90dvh);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 1px 2px rgba(16, 21, 28, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  background: var(--surface);
  color: var(--text);
  transform: scale(0.96) translateY(10px);
  opacity: 0;
  transition:
    transform 0.42s var(--ease),
    opacity 0.42s var(--ease);
}

.consultation-modal.is-open .consultation-modal__panel,
.review-modal.is-open .consultation-modal__panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.review-modal {
  transition: opacity 0.16s ease, visibility 0.16s ease;
}

.review-modal .consultation-modal__backdrop {
  background: var(--overlay-dimmer);
}

.review-modal .consultation-modal__panel {
  width: min(100%, 420px);
  max-height: min(86vh, 560px);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateY(8px);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.review-modal.is-open .consultation-modal__panel {
  transform: translateY(0);
}

.review-modal .consultation-modal__scroll {
  padding: 22px;
  padding-top: 26px;
}

.review-modal .consultation-modal__field input,
.review-modal .consultation-modal__field textarea,
.review-modal .review-rating__btn {
  box-shadow: none;
}

.review-modal .consultation-modal__field input:focus,
.review-modal .consultation-modal__field textarea:focus {
  box-shadow: 0 0 0 3px rgba(16, 21, 28, 0.22);
}

.review-modal .review-rating__btn.is-active {
  box-shadow: none;
}

.consultation-modal__close-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 999px;
  background: rgba(0, 112, 125, 0.1);
  cursor: pointer;
  box-sizing: border-box;
  transition: opacity 0.22s var(--ease), background 0.22s var(--ease);
  z-index: 2;
}

.consultation-modal__close-x:hover {
  opacity: 1;
  background: rgba(0, 112, 125, 0.16);
}

.consultation-modal__close-x span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  margin: 0;
  border-radius: 999px;
  background: var(--text);
}

.consultation-modal__close-x:hover span {
  background: var(--text);
}

.consultation-modal__close-x span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.consultation-modal__close-x span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.consultation-modal__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(22px, 5vw, 28px);
  padding-top: clamp(26px, 5.5vw, 32px);
  max-height: inherit;
}

.consultation-modal__hero {
  margin-bottom: 1.15rem;
  padding-right: 2rem;
}

@media (min-width: 400px) {
  .consultation-modal__hero {
    padding-right: 2.5rem;
  }
}

.consultation-modal__title {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.45rem);
  font-weight: 700;
  line-height: 1.28;
  color: var(--text);
}

.consultation-modal__subtitle {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.54;
  color: var(--text-muted);
}

.consultation-modal__order {
  margin-bottom: 1.05rem;
  padding-right: 0.35rem;
}

.consultation-modal__order-heading {
  margin: 0 0 0.72rem;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 2.9vw, 1.28rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

.consultation-modal__order-summary {
  display: flex;
  align-items: flex-start;
  gap: 12px 14px;
}

.consultation-modal__order-thumb {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  background: rgba(255, 255, 255, 0.92);
}

.consultation-modal__order-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.consultation-modal__order-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.96rem;
  line-height: 1.35;
  color: var(--text);
}

.consultation-modal__order-snippet {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.42;
  color: var(--text-muted);
}

.consultation-modal__rule {
  margin: 1rem 0 1.08rem;
  height: 0;
  border: none;
  border-top: 1px solid rgba(0, 112, 125, 0.22);
  background: none;
}

.consultation-modal__form {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}

.consultation-modal__hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.consultation-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.consultation-modal__label {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
}

.consultation-modal__field input {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke-strong);
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  transition:
    border-color 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}

.consultation-modal__field input::placeholder {
  color: var(--text-muted);
}

.consultation-modal__field input:hover {
  border-color: rgba(0, 112, 125, 0.32);
}

.consultation-modal__field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(16, 21, 28, 0.15);
}

.consultation-modal__optional {
  font-weight: 500;
  color: var(--text-muted);
}

.consultation-modal__field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke-strong);
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  resize: vertical;
  min-height: 4.5rem;
  transition:
    border-color 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}

.consultation-modal__field textarea::placeholder {
  color: var(--text-muted);
}

.consultation-modal__field textarea:hover {
  border-color: rgba(0, 112, 125, 0.32);
}

.consultation-modal__field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(16, 21, 28, 0.15);
}

.consultation-channel {
  margin: 0;
  padding: 0;
  border: none;
  min-inline-size: 0;
}

.consultation-modal__legend {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0;
  margin: 0 0 0.65rem;
  color: var(--text);
}

.consultation-channel__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.consultation-channel__btn {
  flex: 1 1 calc(33.333% - 10px);
  min-width: 96px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.015em;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke-strong);
  cursor: pointer;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}

.consultation-channel__btn:hover {
  border-color: rgba(0, 112, 125, 0.35);
  color: var(--primary-deep);
  transform: translateY(-1px);
}

.consultation-channel__btn.is-active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, var(--cta-from) 0%, var(--cta-to) 100%);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

.consultation-channel__btn.is-active:hover {
  color: #fff;
  transform: translateY(-2px);
  opacity: 0.97;
}

.consultation-modal__submit {
  width: 100%;
  min-height: 50px;
  font-size: 0.93rem;
  margin-top: 0.35rem;
}

/* Форма відгуку: кнопки оцінки 1–5 */
.review-rating-fieldset {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}

.review-rating__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.35rem;
}

.review-rating__btn {
  flex: 1 1 calc(20% - 8px);
  min-width: 44px;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  border-radius: var(--radius);
  border: 1px solid var(--stroke-strong);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-muted);
  cursor: pointer;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

.review-rating__btn:hover {
  border-color: rgba(0, 112, 125, 0.42);
  color: var(--primary-deep);
}

.review-rating__btn.is-active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, var(--cta-from) 0%, var(--cta-to) 100%);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

.review-rating__btn:active {
  transform: scale(0.96);
}

.consultation-modal__success {
  text-align: center;
  padding: 0.5rem 0 0;
}

.consultation-modal__success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  font-size: 1.85rem;
  line-height: 1;
  color: #fff;
  background: linear-gradient(145deg, var(--cta-from), var(--cta-to));
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

.consultation-modal__success-mark::before {
  content: "✓";
  font-family: var(--font-display);
  transform: translateY(1px);
}

.consultation-modal__success-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text);
}

.consultation-modal__success-desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* --- Поява при завантаженні --- */
.enter-anim {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.72s var(--ease), transform 0.72s var(--ease);
  will-change: opacity, transform;
}

.enter-anim[data-reveal] {
  transition:
    opacity 0.78s var(--ease) var(--reveal-delay, 0s),
    transform 0.78s var(--ease) var(--reveal-delay, 0s);
}

.enter-anim.is-ready {
  opacity: 1;
  transform: translateY(0);
}

.enter-item {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.52s var(--ease),
    transform 0.52s var(--ease);
  transition-delay: calc(0.08s + var(--i, 0) * 0.07s);
}

.is-ready .enter-item {
  opacity: 1;
  transform: translateY(0);
}

.hero-panel[data-enter-order="1"].is-ready {
  transition-delay: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  /* Без підйому при hover під глобальним скороченням transition */
  .site-footer__messenger:hover {
    transform: none;
  }

  .enter-anim,
  .enter-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .course-know__card:hover {
    transform: none;
    border-color: rgba(0, 112, 125, 0.14);
    box-shadow:
      0 1px 2px rgba(16, 21, 28, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.88);
  }

  .testimonials-section__track {
    transition-duration: 0.18s !important;
  }

  .perk,
  .perk__icon {
    transition-duration: 0.15s !important;
  }

  .btn--primary:hover {
    transform: none;
  }

  .site-header__nav a::after {
    transition: none;
  }

  body {
    background-image: linear-gradient(180deg, var(--bg-base), var(--surface-sunk));
  }

  .nav-toggle.nav--mob[aria-expanded="true"] .nav-toggle__lines span {
    transition-duration: 0.12s;
  }

  .mobile-nav__panel {
    transition-duration: 0.15s !important;
  }

  .mobile-nav__backdrop {
    transition-duration: 0.12s !important;
  }

  .mobile-nav__links a {
    opacity: 1 !important;
    transform: none !important;
    transition: color 0.15s ease, background 0.15s ease !important;
    transition-delay: 0s !important;
  }

  .mobile-nav__cta-wrap {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 0.15s ease !important;
    transition-delay: 0s !important;
  }

  .product-card:hover {
    transform: none;
    box-shadow: var(--shadow);
  }

  .product-card:hover .product-card__media img {
    transform: none !important;
  }

  .consultation-modal,
  .review-modal,
  .consultation-modal.is-open .consultation-modal__panel,
  .review-modal.is-open .consultation-modal__panel {
    transition: none !important;
  }

  .consultation-modal.is-open .consultation-modal__panel,
  .review-modal.is-open .consultation-modal__panel {
    transform: none !important;
    opacity: 1 !important;
  }

  .consultation-channel__btn:hover,
  .consultation-channel__btn.is-active:hover {
    transform: none !important;
  }

  .consultation-modal__close-x:hover {
    transform: none;
  }

  .site-cart-panel,
  .checkout-modal__panel {
    transition: none !important;
  }
}

/* ------------------------------------------------------------------
   Кошик, оформлення замовлення, каталог з API
------------------------------------------------------------------ */

.catalog-loading,
.catalog-error-msg {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-muted);
  font-weight: 600;
}

.catalog-error-msg {
  color: var(--warn);
}

.catalog-retry-btn {
  display: inline-flex;
  margin-top: 12px;
}

.product-card__price-old[hidden] {
  display: none !important;
}

body.site-cart-open {
  overflow: hidden !important;
}

body.checkout-open {
  overflow: hidden !important;
}

/* ------------------------------------------------------------------
   Оновлення + roadmap: постійний HTML-розділ і компактний віджет
------------------------------------------------------------------ */

.updates-roadmap-section {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.35fr);
  gap: clamp(20px, 3vw, 34px);
  width: 100%;
  max-width: 100%;
  margin: 10px auto;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(0, 112, 125, 0.22);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

.updates-roadmap-section__head {
  align-self: start;
}

.updates-roadmap-section__eyebrow,
.updates-widget__eyebrow {
  margin: 0 0 6px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.updates-roadmap-section h2 {
  margin: 0 0 10px;
  color: var(--primary-deep);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  line-height: 1.12;
}

.updates-roadmap-section__goal {
  max-width: 56ch;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.62;
}

.updates-roadmap {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.updates-milestone {
  overflow: clip;
  border: 1px solid rgba(0, 112, 125, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.78);
}

.updates-milestone--current {
  border-color: rgba(0, 112, 125, 0.46);
  box-shadow: inset 3px 0 0 var(--primary);
}

.updates-milestone summary {
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 10px 13px;
  cursor: pointer;
  list-style: none;
}

.updates-milestone summary::-webkit-details-marker {
  display: none;
}

.updates-milestone__state {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.updates-milestone--current .updates-milestone__state {
  color: var(--primary);
}

.updates-milestone__title {
  color: var(--text);
  font-weight: 750;
  line-height: 1.3;
}

.updates-milestone__chevron {
  color: var(--primary);
  font-size: 1.15rem;
  transition: transform 0.2s var(--ease);
}

.updates-milestone[open] .updates-milestone__chevron {
  transform: rotate(180deg);
}

.updates-milestone__body {
  padding: 0 13px 14px 129px;
}

.updates-milestone__body > p,
.updates-feed-item p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.updates-milestone__status {
  margin-bottom: 10px !important;
  color: var(--text) !important;
  font-weight: 650;
}

.updates-feed {
  display: grid;
  gap: 8px;
}

.updates-feed-item {
  padding: 10px 12px;
  border-left: 2px solid rgba(0, 112, 125, 0.5);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(0, 112, 125, 0.055);
}

.updates-feed-item time {
  display: block;
  margin-bottom: 3px;
  color: var(--primary-deep);
  font-size: 0.75rem;
  font-weight: 750;
}

.updates-widget {
  position: fixed;
  right: max(84px, calc(env(safe-area-inset-right, 0px) + 84px));
  bottom: max(18px, env(safe-area-inset-bottom, 18px));
  z-index: 1100;
  pointer-events: none;
}

.updates-widget__toggle,
.updates-widget__panel {
  pointer-events: auto;
}

.updates-widget__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--primary-deep), var(--primary));
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 750;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.updates-widget__toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

.updates-widget__badge {
  position: absolute;
  top: -6px;
  right: -4px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 17px;
  text-align: center;
}

.updates-widget__badge[hidden],
.updates-widget__panel[hidden] {
  display: none !important;
}

.updates-widget__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 11px);
  width: min(360px, calc(100vw - 24px));
  max-height: min(56vh, 410px);
  overflow-y: auto;
  padding: 17px;
  border: 1px solid rgba(0, 112, 125, 0.28);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

.updates-widget__head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.updates-widget__head h2 {
  margin: 0;
  color: var(--primary-deep);
  font-family: var(--font-display);
  font-size: 1.14rem;
  line-height: 1.2;
}

.updates-widget__close {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
}

.updates-widget__date {
  display: block;
  margin: 13px 0 5px;
  color: var(--primary);
  font-size: 0.76rem;
  font-weight: 750;
}

.updates-widget__status {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.52;
}

.updates-widget__link {
  display: inline-flex;
  margin-top: 13px;
  color: var(--primary-deep);
  font-size: 0.86rem;
  font-weight: 750;
  text-decoration: none;
}

.updates-widget__link:hover,
.updates-widget__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.site-cart-open .updates-widget,
body.checkout-open .updates-widget,
body.consultation-open .updates-widget,
body.nav-open-mobile .updates-widget {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .updates-roadmap-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 18px 14px;
    border-radius: var(--radius);
  }

  .updates-milestone summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    padding: 11px 12px;
  }

  .updates-milestone__state {
    grid-column: 1;
  }

  .updates-milestone__title {
    grid-column: 1;
  }

  .updates-milestone__chevron {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .updates-milestone__body {
    padding: 0 12px 13px;
  }

  .updates-widget {
    right: max(12px, env(safe-area-inset-right, 12px));
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .updates-widget__toggle {
    width: 50px;
    min-width: 50px;
    height: 50px;
    min-height: 50px;
    padding: 0;
  }

  .updates-widget__toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .updates-widget__panel {
    position: fixed;
    right: 12px;
    bottom: calc(144px + env(safe-area-inset-bottom, 0px));
    max-height: min(52vh, 380px);
  }
}

/* Плаваючий кошик */
.site-cart-root {
  position: fixed;
  inset: 0;
  z-index: 1150;
  pointer-events: none;
}

.site-cart-backdrop {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--overlay-dimmer);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s var(--ease),
    visibility 0.35s var(--ease);
  pointer-events: none;
  cursor: pointer;
  z-index: 2;
}

body.site-cart-open .site-cart-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.site-cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  max-width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  border-right: none;
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  display: flex;
  flex-direction: column;
  transform: translateX(104%);
  transition: transform 0.42s var(--ease);
  pointer-events: auto;
  background: var(--surface);
  z-index: 3;
}

body.site-cart-open .site-cart-panel {
  transform: translateX(0);
}

.site-cart-panel[hidden] {
  display: none !important;
}

.site-cart-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--stroke);
}

.site-cart-panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text);
}

.site-cart-panel__close {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 112, 125, 0.1);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.site-cart-panel__close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: var(--text);
  border-radius: var(--radius);
}

.site-cart-panel__close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.site-cart-panel__close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.site-cart-panel__body {
  flex: 1;
  overflow: auto;
  padding: 12px 16px 18px;
  min-height: 0;
}

.site-cart-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-cart-lines:empty + .site-cart-empty {
  display: block;
}

.site-cart-lines:not(:empty) + .site-cart-empty {
  display: none;
}

.site-cart-empty {
  display: block;
  margin: 1rem 0 0;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.site-cart-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 10px;
  align-items: start;
  padding: 12px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.86);
}

.site-cart-line__title {
  font-weight: 700;
  font-size: 0.92rem;
  margin: 0 0 4px;
  color: var(--text);
}

.site-cart-line__meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.site-cart-line__price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--primary-deep);
}

.site-cart-line__controls {
  display: flex;
  align-items: center;
  gap: 6px;
  grid-column: 1 / -1;
}

.site-cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.site-cart-qty button {
  width: 34px;
  height: 32px;
  border: none;
  background: var(--surface-sunk);
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

.site-cart-qty span {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  min-width: 2rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
}

.site-cart-remove {
  margin-inline-start: auto;
  padding: 6px 10px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--danger-strong);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-cart-panel__foot {
  padding: 14px 16px 20px;
  border-top: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.55);
}

.site-cart-total {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  margin: 0 0 12px;
  font-size: 1rem;
  color: var(--text);
}

.site-cart-panel__order {
  width: 100%;
  min-height: 50px;
}

.site-cart-panel__order[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.site-cart-fab {
  position: fixed;
  right: max(14px, env(safe-area-inset-right, 14px));
  bottom: max(18px, env(safe-area-inset-bottom, 18px));
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(145deg, var(--cta-from) 0%, var(--primary) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: transform 0.22s var(--ease);
  /* Нижче backdrop і панелі в межах .site-cart-root — не перекриває відкритий кошик */
  z-index: 1;
}

.site-cart-fab[hidden] {
  display: none !important;
}

/* Під час відкритої панелі кнопка не показується поверх кошика (мобільний і десктоп) */
body.site-cart-open .site-cart-fab {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Мобільне меню (z вище FAB) — додатково ховаємо віджет, щоб він не промальовувавсь під час анімацій */
@media (max-width: 900px) {
  body.nav-open-mobile .site-cart-fab {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

.site-cart-fab:hover {
  transform: scale(1.05);
}

.site-cart-fab__ico {
  display: block;
}

.site-cart-fab__badge {
  position: absolute;
  top: 6px;
  right: 7px;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.35rem;
  text-align: center;
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

/* Checkout */
.checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 28px);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.38s var(--ease),
    visibility 0.38s var(--ease);
}

.checkout-modal.is-open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

.checkout-modal__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  background: var(--overlay-dimmer);
  z-index: 0;
}

.checkout-modal__panel {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(88vh, 720px);
  border-radius: var(--radius);
  border: 1px solid var(--stroke-strong);
  box-shadow: var(--shadow-hover);
  display: flex;
  flex-direction: column;
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition:
    transform 0.45s var(--ease),
    opacity 0.4s var(--ease);
  background: var(--surface);
}

.checkout-modal.is-open .checkout-modal__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.checkout-modal__close-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 112, 125, 0.1);
  cursor: pointer;
  z-index: 2;
}

.checkout-modal__close-x span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: var(--text);
  border-radius: 999px;
}

.checkout-modal__close-x span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.checkout-modal__close-x span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.checkout-modal__scroll {
  padding: clamp(18px, 3.5vw, 26px) clamp(18px, 4vw, 28px);
  overflow: auto;
  max-height: min(76vh, 620px);
}

.checkout-modal__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3vw, 1.42rem);
  font-weight: 700;
  color: var(--text);
}

.checkout-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.checkout-sum-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.92rem;
  padding: 8px 0;
  border-bottom: 1px solid var(--stroke);
}

.checkout-total {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.02rem;
  margin: 0 0 16px;
}

.checkout-modal__next {
  width: 100%;
  min-height: 52px;
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.checkout-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
}

.checkout-form__field input {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 11px 13px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke-strong);
  background: rgba(255, 255, 255, 0.95);
}

.checkout-promo {
  padding-top: 0.2rem;
}

.checkout-promo__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

.checkout-promo__controls input {
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.checkout-promo__apply.btn {
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--stroke-strong);
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary-deep);
}

.checkout-promo__message {
  min-height: 1.25em;
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.checkout-promo__message.is-success {
  color: var(--success);
}

.checkout-promo__message.is-error {
  color: var(--danger-strong);
}

/* Тихі рядки перед підсумком: без фону й рамки, щоб не читались як банер.
   Блок від сесії lab-redesign (візуальний шар — їхня зона), вставлено сюди
   за їхньою ж вказівкою; у їхній гілці його немає, щоб дві гілки не правили
   один файл того самого дня. */
.checkout-extras {
  display: grid;
  gap: 0.35rem;
  padding-top: 0.15rem;
}

.checkout-extras__row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-height: 40px;
  padding: 0.3rem 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
}

.checkout-extras__row input[type="checkbox"] {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0.2rem 0 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.checkout-extras__row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.checkout-extras__row:has(input:disabled) {
  color: var(--text-muted);
  cursor: default;
}

.checkout-extras__row input[type="checkbox"]:disabled {
  cursor: default;
}

.checkout-extras__hint {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.78rem;
  font-style: normal;
  color: var(--text-muted);
}

/* Вихід на сторінку умов — з місця, де знижка й застосовується. Тихий рядок,
   не кнопка: він для тих, хто хоче перевірити арифметику, а не для всіх. */
.checkout-extras__link {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
}

.checkout-extras__link a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.checkout-extras__link a:hover {
  color: var(--primary-deep);
}

.checkout-pricing {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: rgba(248, 250, 252, 0.86);
}

.checkout-pricing p {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font-size: 0.9rem;
}

/* `display:flex` вище перебиває вбудоване браузерне `[hidden]{display:none}`,
   тож рядки знижок ніколи не ховались і показували «−0 ₴» при нулі. */
.checkout-pricing p[hidden] {
  display: none;
}

.checkout-pricing p + p {
  margin-top: 0.4rem;
}

.checkout-pricing [data-checkout-discount-row] strong {
  color: var(--success);
}

.checkout-pricing__total {
  padding-top: 0.45rem;
  border-top: 1px solid var(--stroke);
  font-size: 1rem !important;
}

.checkout-form__channel.consultation-channel {
  margin-top: 0.25rem;
}

.checkout-form__actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  margin-top: 14px;
}

.checkout-form__actions .checkout-form__submit.btn.btn--primary {
  align-self: stretch;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 15px 22px;
  font-size: 1.06rem;
  font-weight: 700;
}

@media (max-width: 820px) {
  .checkout-form__actions .checkout-form__submit.btn.btn--primary {
    min-height: 56px;
    padding: 16px 22px;
  }
}

.checkout-step--done {
  text-align: center;
}

/* ===== Інформаційні / правові сторінки (Про нас, Доставка, Оферта, Конфіденційність) ===== */
.legal-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--stroke);
}
.legal-header__bar {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
  flex-wrap: wrap;
}
.legal-header__logo img {
  display: block;
  height: 38px;
  width: auto;
}
.legal-header__nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 500;
}
.legal-header__nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
}
.legal-header__nav a:hover,
.legal-header__nav a:focus-visible {
  color: var(--primary);
}
.legal-header__tg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--stroke);
}
.legal-header__tg img {
  width: 22px;
  height: 22px;
}
/* Одна ширина на весь інтерфейс — та сама, що в блоці "ОДНА КОЛОНКА НА ВСЮ
   СТОРІНКУ" нижче за файлом (.two-paths__inner і сусіди): max-width var(--shell),
   margin:auto, padding-inline: 0. Раніше тут був padding-inline: var(--hdr-pad-x)
   на самому .legal-main — він тиснув ЗСЕРЕДИНИ на всіх дітей одразу, і поверхні
   (.legal-card, .legal-disclaimer, «← На головну») зсувались углиб разом із
   текстом, замість стояти вровень із краєм .site-header__bar/.site-footer__panel.
   Правильно: поверхня своєю ЗОВНІШНЬОЮ межею стоїть на краю колонки (як шапка й
   підвал), а відступ у неї свій власний (border+padding картки). Текст без
   поверхні (заголовки, абзаци, «← На головну») теж стоїть на краю колонки —
   без додаткового поля, так само як заголовки секцій на головній. Тому
   контейнер сам ніякого горизontального відступу не додає; бокове поле на
   мобільних дає .page-shell (padding-inline: var(--shell-pad-x)), в якому
   .legal-main і так лежить.

   Рядок при цьому не розтягується на всю ширину — довжину рядка тримає
   не колонка, а обмеження на самі абзаци нижче. */
.legal-main {
  max-width: var(--shell);
  width: 100%;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) 0 64px;
  /* .page-shell — flex-колонка (@media 901px+, рядок ~1068), а .legal-main —
     прямий flex-елемент у ній (на відміну від .site-header__bar/.site-footer__panel,
     які центруються ЗСЕРЕДИНИ звичайних block-обгорток .site-header/.site-footer,
     а не самі є flex-елементами). У flex-контейнері `margin: 0 auto` при
     width:auto вимикає розтягування: елемент стискається під свій вміст
     (shrink-to-fit) і центрується у ВСІЙ ширині сторінки, а не в колонці
     --shell. Для простих сторінок різниці не видно — текст однаково просить
     всю доступну ширину. Але .legal-main--with-outline містить CSS Grid із
     фіксованими треками (minmax(210,240) + minmax(0,820)) вужчими за --shell,
     і без явного width:100% «← На головну» й хлібні крихти з'їжджали на
     ~12px ліворуч від краю шапки. align-self:stretch тут НЕ рятує — авто-поля
     виграють у нього за специфікацією; рятує лише явний width, який прибирає
     двозначність auto. */
}
.legal-main--with-outline {
  max-width: var(--shell);
}

/* Довжина рядка. Без цього проза розтяглась би на 1064px — це ~150 знаків
   у рядку, око губить початок наступного. Стосується лише прямих дітей:
   текст усередині карток і таблиць має власну ширину від них. */
.legal-main > p,
.legal-main > ul,
.legal-main > ol {
  max-width: 74ch;
}
.article-with-outline {
  display: grid;
  grid-template-columns: minmax(210px, 240px) minmax(0, 820px);
  gap: clamp(24px, 3vw, 36px);
  align-items: start;
  justify-content: center;
}
.article-with-outline__content {
  min-width: 0;
}
.article-outline {
  position: sticky;
  top: 104px;
  max-height: calc(100vh - 128px);
  overflow-y: auto;
  padding: 18px;
  border: 1px solid rgba(0, 112, 125, 0.24);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}
.article-outline__label {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.article-outline__nav {
  display: grid;
  gap: 2px;
}
.legal-main .article-outline__nav a {
  display: block;
  padding: 7px 9px;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}
.legal-main .article-outline__nav a:hover,
.legal-main .article-outline__nav a:focus-visible {
  color: var(--primary-deep);
  background: rgba(0, 112, 125, 0.08);
}
.article-body h2[id] {
  scroll-margin-top: 110px;
}

@media (max-width: 900px) {
  .legal-main--with-outline {
    max-width: 820px;
  }
  .article-with-outline {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .article-outline {
    position: static;
    max-height: none;
    overflow: hidden;
    padding: 14px;
  }
  .article-outline__label {
    margin-bottom: 8px;
  }
  .article-outline__nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 1px 1px 6px;
    scrollbar-width: thin;
  }
  .legal-main .article-outline__nav a {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid rgba(0, 112, 125, 0.18);
    background: rgba(0, 112, 125, 0.05);
    white-space: nowrap;
  }
}

/* Застереження «тільки для досліджень» — угорі кожної контентної сторінки */
.research-note {
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid var(--warn);
  border-left: 4px solid var(--warn);
  border-radius: var(--radius);
  background: var(--warn-bg);
}
.research-note__text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text);
}
.research-note__text strong {
  color: var(--warn);
}
.legal-breadcrumb {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.legal-breadcrumb a {
  color: var(--primary);
  text-decoration: none;
}
.legal-main h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--text);
}
.legal-updated {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 26px;
}
.legal-main h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 26px);
  margin: 34px 0 12px;
  color: var(--primary-deep);
}
.legal-main h3 {
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 19px);
  margin: 22px 0 6px;
  color: var(--text);
}
.legal-main p,
.legal-main li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}
.legal-main ul {
  padding-left: 22px;
  margin: 10px 0;
}
.legal-main li {
  margin: 6px 0;
}
.legal-main a {
  color: var(--primary);
}
.legal-card {
  background: var(--surface-strong);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 18px 0;
}
.legal-disclaimer {
  background: rgba(0, 112, 125, 0.06);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 30px 0 0;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.62;
}
.legal-back {
  display: inline-block;
  margin-top: 30px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.legal-back:hover {
  text-decoration: underline;
}
/* Рядок правових посилань у підвалі головної */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 14px;
}
.site-footer__legal a {
  color: var(--text-muted);
  text-decoration: none;
}
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: var(--primary);
}
/* Таблиця порівняння та картки статей */
.legal-article__meta {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 26px;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15px;
}
.legal-table th,
.legal-table td {
  border: 1px solid var(--stroke);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.legal-table th {
  background: rgba(0, 112, 125, 0.06);
  font-family: var(--font-display);
  color: var(--primary-deep);
}
.legal-card-link {
  display: block;
  background: var(--surface-strong);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 14px 0;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.18s var(--ease);
}
.legal-card-link:hover {
  border-color: var(--primary);
}
.legal-card-link h2 {
  margin: 0 0 6px;
  font-size: 20px;
  color: var(--primary-deep);
}
.legal-card-link p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
}

/* ==========================================================================
   MOBILE REDESIGN "НА ЛАДОНИ" (Thumb Dock & Bottom Sheet UI)
   ========================================================================== */

/* Sticky Mobile Bottom Dock */
.mobile-bottom-dock {
  display: none;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 76px; /* Prevents dock from covering page content */
  }

  .mobile-bottom-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--stroke);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  }

  /* Hide dock when scrolling or popup/dialog/menu is open */
  .mobile-bottom-dock.is-hidden-scroll,
  html.dialog-open .mobile-bottom-dock,
  html.mobile-nav-open .mobile-bottom-dock,
  body.consultation-open .mobile-bottom-dock,
  body.nav-open-mobile .mobile-bottom-dock,
  body.checkout-open .mobile-bottom-dock,
  body.brand-popup-lock .mobile-bottom-dock {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
  }

  /* Кошик не порожній: FAB (58px + 14px відступ) висить над правим краєм
     плашки — звільняємо під нього місце, щоб кнопка не опинилась під ним. */
  .mobile-bottom-dock.has-cart {
    padding-right: 80px;
  }

  .mobile-bottom-dock__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
  border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    outline: none;
    transition: transform 0.12s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-bottom-dock__btn:active {
    transform: scale(0.96);
  }

  .mobile-bottom-dock__btn--tg {
    flex: 0 0 48px;
    width: 48px;
    background: rgba(0, 112, 125, 0.08);
    border: 1px solid rgba(0, 112, 125, 0.2);
    color: var(--primary-deep);
    padding: 0;
  }

  .mobile-bottom-dock__btn--tg span {
    display: none;
  }

  .mobile-bottom-dock__btn--primary {
    flex: 1;
    background: linear-gradient(135deg, var(--primary) 0%, var(--cyan-soft) 100%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  /* Stage 2: Native Mobile Bottom-Sheet for Checkout & Modal */
  .consultation-dialog[open] .consultation-modal__panel,
  .checkout-modal__panel {
    border-radius: var(--radius) var(--radius) 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    max-height: 90vh !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    animation: mobileBottomSheetSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
  }

  /* Mobile Sheet Drag Handle Indicator */
  .consultation-modal__panel::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: var(--radius);
    background: rgba(16, 21, 28, 0.25);
    margin: 0 auto 12px auto;
  }

  /* Stage 3: Product Card Dosage Chips horizontal scroll on mobile */
  /* Чипи переносяться рядками, а не їдуть стрічкою: доза визначає ціну, тож усі
     варіанти мають бути видні одразу, без горизонтального скролу з прихованою
     смугою. */
  .product-card__chips {
    display: flex;
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 6px;
    padding-bottom: 0;
  }
  .product-card__chip {
    /* width:auto ОБОВ'ЯЗКОВИЙ: базове правило ставить чипу width:100% заради
       desktop-сітки, і при переході на flex кожен чип роздувався на всю ширину
       картки — по одній дозі в рядок на весь екран. */
    flex: 0 1 auto;
    width: auto;
    min-width: 3.6rem;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 0.92rem;
    font-weight: 600;
  }

  /* Prevent iOS automatic zoom on focus by ensuring font-size is at least 16px */
  .checkout-form__field input,
  .consultation-modal__panel input,
  .consultation-modal__panel select,
  .consultation-modal__panel textarea {
    font-size: 16px !important;
    min-height: 48px;
  }

  /* Mobile bottom sheet submit button */
  .checkout-form__actions .checkout-form__submit.btn.btn--primary {
    min-height: 52px;
  border-radius: var(--radius);
    font-size: 1.05rem;
  }

  /* Clean Light Mobile Product Info Tablist */
  .product-info-tabs__tablist-wrap {
    position: relative;
    top: auto;
    z-index: 1;
    margin-bottom: 12px;
  }

  .product-info-tabs__tablist {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius);
    background: var(--surface) !important;
    border: 1px solid rgba(0, 112, 125, 0.2) !important;
    box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  }

  .product-info-tabs__tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 6px 10px !important;
    border-radius: var(--radius) !important;
    color: var(--text-muted) !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-align: center !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-info-tabs__tab.is-active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--cyan-soft) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05) !important;
  }

  /* Active Panel Smooth Fade */
  .product-info-tabs__panel.is-active {
    animation: panelFadeIn 0.28s ease forwards;
  }

  /* Mobile Product Card Enhancements */
  .product-card {
  border-radius: var(--radius);
    padding: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 112, 125, 0.15);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  }
}

@keyframes mobileBottomSheetSlideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes panelFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   DESKTOP REDESIGN ("Премиальный десктоп")
   ========================================================================== */

@media (min-width: 992px) {
  /* Sticky Header Depth */
  .site-header__bar.glass {
    transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .site-header__bar.glass:hover {
    box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
    border-color: rgba(0, 112, 125, 0.25);
  }

  /* Catalog Cards Desktop Glass & Hover Lift */
  .product-card {
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.32s ease !important;
  }

  .product-card:hover {
    transform: translateY(-8px) scale(1.008) !important;
    border-color: rgba(0, 112, 125, 0.32) !important;
    box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05) !important;
  }

  .product-card__media img {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .product-card:hover .product-card__media img {
    transform: scale(1.04) !important;
  }

  /* Product Card CTA Button Hover Glow */
  .product-card .btn.btn--primary.product-card__cta {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
  }

  .product-card .btn.btn--primary.product-card__cta:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05) !important;
  }

  /* Desktop Variant Chips */
  .product-card__chip {
    transition: all 0.18s ease !important;
  }

  .product-card__chip:hover:not(.is-oos) {
    transform: translateY(-1px);
    border-color: var(--primary);
    box-shadow: none;
  }
}

/* Interactive Course Calculator Widget - Compact & Dense */
.desktop-course-calc {
  max-width: min(94vw, 1060px);
  margin: 20px auto;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid rgba(0, 112, 125, 0.18);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

/* Надзаголовок стоїть НАД назвою, як в еталоні _lab/v9. Раніше він займав
   першу колонку сітки — і зсував заголовок на ~95px правіше за заголовки решти
   секцій, тобто ламав спільну ліву межу сторінки. */
.desktop-course-calc__head {
  text-align: left;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 2px;
}
.desktop-course-calc__head > .calc-eyebrow,
.desktop-course-calc__head > .desktop-course-calc__title,
.desktop-course-calc__head > .desktop-course-calc__desc,
.desktop-course-calc__head > .warn-plate { grid-column: 1 / -1; }
.desktop-course-calc__head > .warn-plate { margin-top: 8px; margin-bottom: 0; }

/* Пояснення «чому віала без назви» на картці — в один клік, не попапом.
   POSITIONING.md §8b: додаткове завжди доступне, але не займає місця. */
.card-why { margin: 4px 0 8px; }
.card-why summary {
  display: flex; align-items: center; gap: 6px; list-style: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  color: var(--primary-deep); padding: 2px 0;
}
.card-why summary::-webkit-details-marker { display: none; }
.card-why summary::before { content: '▸'; color: var(--primary); transition: transform .15s; flex: none; }
.card-why[open] summary::before { transform: rotate(90deg); }
.card-why p { margin: 6px 0 0; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
/* Риска — під заголовком, а не навколо нього; відповідь інакше зливається
   з описом товару під нею. */
.card-why[open] > *:not(summary) {
  border-left: 2px solid color-mix(in srgb, var(--primary) 34%, transparent);
  padding-left: 11px;
}

/* Плашка-застереження біля чутливого блоку. Карта — POSITIONING.md §6:
   видимий текст звичайним контрастом, ніякого прихованого тексту. */
.warn-plate {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 0 14px; padding: 9px 12px; max-width: 62ch;
  background: var(--warn-bg); border-left: 3px solid var(--warn);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.82rem; line-height: 1.5; color: var(--text);
}
.warn-plate b {
  font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--warn); flex: none;
}
.checkout-form__research-note {
  margin: 0 0 10px; font-size: 0.78rem; line-height: 1.45; color: var(--text-muted);
}

/* Бейдж статусу. Янтарний контур = «дослідницький / ще не факт» (v9 .badge--research),
   бірюзовий = звичайний акцент. Один примітив, два модифікатори. */
/* Янтарний контур на білому — статус, а не дія: «дослідницький клас»,
   «впроваджуємо». Бірюза лишається кольором продукту й кнопок.
   Той самий бейдж, що в еталоні _lab/v9 (.badge--research). */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  background: transparent;
  color: var(--warn);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}


.desktop-course-calc__title {
  font-size: 1.24rem;
  font-weight: 400;
  font-family: var(--font-display);
  color: var(--text);
  margin: 0 0 6px;
}

.desktop-course-calc__desc {
  display: none;
}

.desktop-course-calc__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  align-items: center;
}

@media (max-width: 768px) {
  .desktop-course-calc__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .desktop-course-calc__pills[data-calc-doses] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .desktop-course-calc__pills[data-calc-doses] .desktop-course-calc__pill {
    min-width: 0;
  }
}

/* Підпис кроку — моно капсом, як решта службових написів системи.
   Жирний основний шрифт сперечався за увагу з самими контролами. */
.desktop-course-calc__label {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.calc-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.desktop-course-calc__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.desktop-course-calc__pill {
  flex: 0 1 auto;
  min-height: 30px;
  padding: 4px 11px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.desktop-course-calc__pill.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: none;
}

.desktop-course-calc__select {
  width: auto;
  min-width: 160px;
  min-height: 32px;
  padding: 5px 30px 5px 10px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
}

.desktop-course-calc__confirm {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.35;
  cursor: pointer;
}

.desktop-course-calc__confirm input {
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--primary);
  flex: 0 0 auto;
}

.desktop-course-calc__result-sub a {
  color: var(--primary-deep);
  font-weight: 700;
}

.desktop-course-calc__result-card {
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--surface-sunk);
  border: 1px solid rgba(0, 112, 125, 0.18);
  text-align: center;
}

.desktop-course-calc__result-badge {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  margin-bottom: 2px;
}

.desktop-course-calc__result-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--primary-deep);
  margin-bottom: 2px;
}

.desktop-course-calc__result-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.desktop-course-calc__result-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--primary-deep);
  margin-bottom: 10px;
}

.desktop-course-calc__result-btn {
  width: 100%;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 0.88rem;
  border-radius: var(--radius);
  justify-content: center;
}

/* ==========================================================================
   FAQ VARIANTS (v1, v2, v3, v4)
   ========================================================================== */

/* Variant 1: Minimalist 1-Column */
.faq-v1-container {
  max-width: 780px;
  margin: 0 auto;
}

.faq-v1-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.faq-v1-list .faq-card {
  border: none;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: var(--radius);
  box-shadow: none;
  background: transparent;
}

.faq-v1-list .faq-card:hover {
  background: var(--surface-sunk);
}

/* Variant 2: Split-Screen with Support Card */
.faq-v2-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 900px) {
  .faq-v2-grid {
    grid-template-columns: 1fr;
  }
}

.faq-v2-support-card {
  padding: 24px;
  border-radius: var(--radius);
  background: var(--surface-sunk);
  border: 1px solid rgba(0, 112, 125, 0.2);
  text-align: center;
  position: sticky;
  top: 90px;
}

.faq-v2-support-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary-deep);
  margin-bottom: 6px;
}

.faq-v2-support-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* Variant 3: Tabbed Categories */
.faq-v3-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.faq-v3-tab {
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke-strong);
  background: var(--surface);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.faq-v3-tab.is-active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

/* Variant 4: Live Searchable FAQ */
.faq-v4-search-wrap {
  max-width: 560px;
  margin: 0 auto 24px auto;
  position: relative;
}

.faq-v4-search-input {
  width: 100%;
  height: 48px;
  padding: 10px 16px 10px 44px;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 112, 125, 0.25);
  background: rgba(255, 255, 255, 0.95);
  font-size: 0.95rem;
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  outline: none;
}

/* ==========================================================================
   UNIFIED COMPACT FAQ TOOLBAR & SLIM ACCORDION
   ========================================================================== */
.faq-compact-wrap {
  max-width: min(94vw, 1060px);
  margin: 0 auto;
  padding: 10px 20px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid rgba(0, 112, 125, 0.16);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

.faq-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.faq-search-box {
  position: relative;
  width: 100%;
}

.faq-search-input {
  width: 100%;
  height: 40px;
  padding: 8px 14px 8px 38px;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 112, 125, 0.22);
  background: rgba(248, 250, 252, 0.8);
  font-size: 0.88rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.faq-search-input:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(16, 21, 28, 0.15);
}

.faq-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  pointer-events: none;
}

.faq-cat-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Чипи-категорії: тонка рамка, без заливки й без емодзі. Були білими
   плашками з іконками — п'ять різнокольорових значків поруч із полем пошуку
   читались як панель інструментів, хоча це фільтр, який чіпають зрідка. */
.faq-cat-btn {
  padding: 5px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.faq-cat-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Клавіатурний фокус. Знайдено зовнішнім ревʼю і підтверджено перебором правил:
   жодне `:focus-visible` чипи не ловило, а типову обведення гасить загальний
   скид. Поки чипи були білими плашками, фокус хоч якось читався по фону —
   я фон зняв, і стан зник зовсім. Обведення те саме, що в чипів каталогу. */
.faq-cat-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Активний — кольором і рамкою, а не заливкою: суцільна бірюзова плашка
   важила більше за самі питання під нею. */
.faq-cat-btn.is-active {
  background: transparent;
  border-color: var(--primary);
  color: var(--primary-deep);
  box-shadow: inset 0 -2px 0 var(--primary);
}

/* Ultra-Slim Accordion List */
.faq-slim-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* П'ятнадцять питань у рамках з фоном давали п'ятнадцять коробок підряд —
   найважчий блок сторінки, хоча це довідка «на всяк випадок». Тепер список:
   рядки розділені волосяною лінією, поверхні немає. */
.faq-slim-card {
  border: 0;
  border-bottom: 1px solid var(--stroke);
  border-radius: 0;
  background: transparent;
  transition: background-color 0.15s ease;
  overflow: hidden;
}

.faq-slim-card:last-child {
  border-bottom: 0;
}

.faq-slim-card:hover {
  background: transparent;
}

.faq-slim-card.is-open {
  background: transparent;
}

.faq-slim-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

/* Маркер ліворуч замість шеврона праворуч — той самий трикутник, що в
   розкривашок «.info» по всій сторінці й у прототипі. Один прийом на всі
   розкривні місця, а не два різні. */
.faq-slim-trigger::before {
  /* Ескейп, а не символ: styles.css віддається без charset, і браузер читав
     «▸» як latin-1 — у списку питань замість трикутника стояло «â–,».
     Інлайнові правила в index.html такої проблеми не мають, бо там кодування
     оголошене в <head>. */
  /* Порожній alt: трикутник — декор, стан і так несе aria-expanded. */
  content: "\25B8" / "";
  flex: none;
  font-size: 0.8em;
  line-height: 1;
  color: var(--primary);
  transition: transform 0.18s var(--ease);
}

.faq-slim-card.is-open .faq-slim-trigger::before {
  transform: rotate(90deg);
}

/* Шеврон праворуч більше не потрібен — маркер один. */
.faq-slim-icon {
  display: none;
}

.faq-slim-title {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-deep);
  line-height: 1.4;
}

.faq-slim-icon {
  width: 16px;
  height: 16px;
  color: var(--primary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.faq-slim-card.is-open .faq-slim-icon {
  transform: rotate(180deg);
}

/* Було max-height 0 → 500px за 0.25s. Відповідь займає ~120px, тож більшу
   частину часу коробка росла вхолостую — і це читалось як гальмо. Тепер
   анімується грид-рядок, який тягнеться рівно на висоту вмісту. */
/* Без анімації. Спершу тут був max-height 0→500px (коробка росла вхолостую),
   потім анімований грид-рядок — обидва читались як гальмо. Розкриття тепер
   миттєве; рух лишився тільки в стрілці. */
/* Закрито — display:none, без жодних трюків. `grid-template-rows: 0fr` не
   згортає рядок сам по собі (fr-трек має автоматичний мінімум за контентом),
   через це з кожної картки стирчала смужка тексту на 25px. */
.faq-slim-card .faq-card__collapse {
  display: none;
  max-height: none;
  overflow: hidden;
  transition: none;
}

.faq-slim-card.is-open .faq-card__collapse {
  display: block;
}

/* Рядок 0fr сам по собі НЕ ховає вміст: дитина гриду має мінімальну висоту за
   своїм контентом. Без цього з кожної закритої картки стирчала смужка тексту. */
.faq-slim-card .faq-card__collapse > * {
  min-height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .faq-slim-card .faq-card__collapse {
    transition: none;
  }
}

.faq-slim-panel {
  padding: 0 14px 12px 14px;
  font-size: 0.84rem;
  color: var(--text);
  line-height: 1.55;
  border-top: 1px solid rgba(0, 112, 125, 0.1);
  margin-top: 4px;
  padding-top: 8px;
}

.faq-slim-panel p {
  margin: 0;
}

/* ==========================================================================
   COLLAPSIBLE PROSE FOR CLEAN MINIMALIST UX & 100% GOOGLE SEO COMPLIANCE
   ========================================================================== */
.prose-collapsible {
  position: relative;
  max-height: 90px;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.prose-collapsible::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 100%);
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.prose-collapsible {
  position: relative;
  max-height: 140px;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.prose-collapsible::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 100%);
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.prose-collapsible.is-expanded {
  max-height: 3000px;
}

.prose-collapsible.is-expanded::after {
  opacity: 0;
}

.btn-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 112, 125, 0.25);
  background: var(--surface);
  color: var(--primary-deep);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  transition: all 0.18s ease;
}

/* ==========================================================================
   100% FULL-WIDTH LAYOUT (Matching Top Header & Product Cards Exactly)
   ========================================================================== */
/* Обгортка шапки тягнеться на всю ширину вікна, а сама смуга всередині живе
   в колонці --shell (правило нижче). Підвал звідси прибрано: він має стояти
   рівно під шапкою, а не ширше за неї. */
.site-header__panel {
  max-width: 100%;
  width: 100%;
  margin-inline: 0;
  box-sizing: border-box;
}

/* ==========================================================================
   STATTI PAGE DESIGN SYSTEM (Matching Main Landing Page)
   ========================================================================== */
.statti-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 24px var(--shell-pad-x) 64px;
  box-sizing: border-box !important;
}

.statti-layout {
  display: grid;
  grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 38px);
  width: min(1180px, 100%);
  margin: 0 auto;
  align-items: start;
}

.statti-layout__content {
  min-width: 0;
}

.statti-chips {
  width: min(1180px, 100%);
  margin: 0 auto 20px;
}

.statti-outline {
  position: sticky;
  top: 104px;
  align-self: start;
  max-height: calc(100vh - 128px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.statti-outline__details {
  border: 1px solid rgba(0, 112, 125, 0.2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

.statti-outline__details summary {
  padding: 15px 16px;
  color: var(--primary-deep);
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  list-style-position: inside;
}

.statti-outline__nav {
  display: grid;
  gap: 14px;
  padding: 0 12px 14px;
}

.statti-outline__group {
  display: grid;
  gap: 4px;
}

.statti-outline__category {
  margin: 0;
  padding: 0 6px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.statti-outline__nav a {
  display: block;
  padding: 7px 8px;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
}

.statti-outline__nav a:hover,
.statti-outline__nav a:focus-visible {
  background: rgba(0, 112, 125, 0.09);
  color: var(--primary-deep);
  outline: none;
}

.article-card[id] {
  scroll-margin-top: 96px;
}

.article-card.is-filtered-out {
  display: none;
}

.statti-hero {
  text-align: center;
  margin-bottom: 32px;
  padding: 28px 24px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid rgba(0, 112, 125, 0.24);
  outline: 1px solid rgba(0, 112, 125, 0.12);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
}

.statti-hero__badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary-deep);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.statti-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--primary-deep);
  margin: 0 0 10px;
}

.statti-hero__desc {
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto;
}

.articles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .articles-grid {
    grid-template-columns: 1fr;
  }
}

.article-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid rgba(0, 112, 125, 0.22);
  outline: 1px solid rgba(0, 112, 125, 0.14);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  text-decoration: none;
  color: inherit;
  transition: all 0.25s var(--ease);
}

.article-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  outline: 1.5px solid var(--primary);
  box-shadow: 0 1px 2px rgba(16, 21, 28, 0.05);
  background: var(--surface);
}

.article-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.article-card__cat {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius);
  background: rgba(0, 112, 125, 0.08);
  color: var(--text-muted);
}

.article-card__time {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.article-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.35;
  transition: color 0.2s ease;
}

.article-card:hover .article-card__title {
  color: var(--primary);
}

.article-card__excerpt {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 16px;
  flex: 1;
}

.article-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary-deep);
  margin-top: auto;
}

.article-card:hover .article-card__link {
  color: var(--primary);
}

@media (max-width: 900px) {
  .statti-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .statti-outline {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .statti-outline__nav {
    max-height: min(52vh, 430px);
    overflow-y: auto;
  }

  .statti-outline__details summary {
    padding: 13px 14px;
  }

  /* Стрічка чипів, що їде вбік. Той самий прийом для статей і для FAQ:
     п'ять фільтрів у ряд не влазять у 400px і падали другим рядом, з'їдаючи
     екран перед самими питаннями. */
  .statti-chips,
  .faq-cat-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }

  .statti-chips .faq-cat-btn,
  .faq-cat-tabs .faq-cat-btn {
    flex: 0 0 auto;
  }
}

/* ==========================================================================
   ОДНА КОЛОНКА НА ВСЮ СТОРІНКУ
   Кожна секція мала власну обгортку з власним полем: ліві краї стояли на
   26 / 156 / 160 / 166 / 255 px — око читає п'ять різних полів і ширина «скаче».
   Тут одна геометрія на всі обгортки: ширина --shell, поле --shell-pad-x.
   Специфічність 0,1,0 і позиція в кінці файлу — правило виграє за порядком,
   !important не потрібен.
   ========================================================================== */
.two-paths__inner,
.how-it-works__layout,
.course-know__wrap,
.usage-guide__wrap,
.faq-compact-wrap,
.product-info-tabs__tablist-wrap,
.product-info-tabs__panels,
.testimonials-section,
.testimonials-section__viewport-wrap,
.testimonials-section__cta-wrap {
  max-width: var(--shell);
  margin-inline: auto;
  /* Текст без поверхні під ним іде врівень із краєм поверхонь — 160.
     Поле тут було б зайвим: воно відсувало б такий текст на 187, і поруч
     із плашкою чи карткою, що стоїть на 160, це читалось як збій.
     Текст ВСЕРЕДИНІ поверхні відступ отримує від самої поверхні. */
  padding-inline: 0;
  box-sizing: border-box;
}

/* Шапка й підвал — та сама колонка й те саме поле, що й решта сторінки.
   Раніше вони жили на всю ширину вікна: логотип стояв на 55px, а H1 під
   ним — на 166px, і верх сторінки читався ширшим за все інше. */
.site-header__bar,
.site-footer__panel {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--shell-pad-x);
  box-sizing: border-box;
}

/* Обидві секції живуть у тій самій колонці, що й уся сторінка. Раніше тут
   стояло «мінус бічне поле» — воно лишилось від старої межі 187px і робило
   ці два блоки вужчими за решту на 54px. */
.desktop-course-calc,
.product-info-tabs {
  max-width: var(--shell);
  margin-inline: auto;
}

/* ==========================================================================
   ЗАГОЛОВКИ СЕКЦІЙ — ОДИН РІВЕНЬ, ОДИН ВИГЛЯД
   Було п'ять розмірів (19.8 / 21.6 / 27.2 / 28.8 / 30.7px), дві ваги (700/800)
   і два кольори: три заголовки світились бірюзою, решта стояли темними. Бірюза
   в заголовку читається як посилання й тягне увагу на себе — вона лишається
   кольором дії, а не тексту.
   ========================================================================== */
.two-paths__title,
.how-it-works__title,
.course-know__title,
.usage-guide__title,
.testimonials-section__title,
.faq-section__title,
.desktop-course-calc__title {
  font-family: var(--font-display);
  font-size: clamp(1.38rem, 3.8vw, 1.92rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.18;
  color: var(--text);
}

/* ==========================================================================
   ПОВЕРХНІ СЕКЦІЙ — ОДНЕ ПРАВИЛО
   Частина секцій була білими картками з рамкою, частина лежала прямо на фоні:
   при гортанні сторінка то «в коробці», то ні. Карткою лишається тільки те,
   з чим ВЗАЄМОДІЮТЬ (калькулятор), решта — плаский текст на фоні сторінки.
   ========================================================================== */
.usage-guide__wrap,
.faq-compact-wrap {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-block: 0;
}

/* ==========================================================================
   ШАПКА В ОДИН РЯД
   Після того як смуга сіла в колонку контенту (1068px), сімом пунктам меню
   стало тісно й «Розведення»/FAQ падали другим рядом. Тут відвойовано місце:
   дрібніший кегль, менші проміжки, вужчі поля — без викидання пунктів.
   ========================================================================== */
@media (min-width: 1000px) {
  .site-header__bar {
    /* Було 18px — логотип ставав на 179, тоді як текст сторінки на 188.
       Поле шапки має бути те саме, що й у решти поверхонь. */
    padding-inline: var(--shell-pad-x);
    gap: 12px;
  }
  .site-header__nav {
    flex-wrap: nowrap;
    gap: 9px;
    font-size: 0.88rem;
  }
  .site-header__nav a {
    white-space: nowrap;
    letter-spacing: -0.005em;
  }
  .site-header__actions {
    gap: 10px;
  }
  /* Кнопку заявки зі смуги прибрано (рішення власника): вона з'їдала ~200px і
     через неї FAQ налазив на RU. У розмітці лишається — вмикається одним рядком.
     Заявку на десктопі й далі можна лишити з блоку консультації нижче на сторінці
     та через Telegram у самій шапці. */
  .site-header__bar .site-header__cta.btn {
    display: none;
  }
  .site-header__nav {
    gap: 14px;
  }
  /* Явний кегль на самому посиланні: розмір на контейнері перемножувався
     з розміром на <a> і давав 12.7px замість 13.8. */
  .site-header__nav a {
    font-size: 0.86rem;
  }
}

/* ==========================================================================
   КАЛЬКУЛЯТОР — ОСТАННЯ КАРТКА, ЯКУ ЗВОДИМО ДО ЗАГАЛЬНОГО ВИГЛЯДУ
   Секція була білою коробкою: усередині неї малювалась лінійка-роздільник
   сусідньої секції, а картка результату висіла по центру рядка, не заповнюючи
   висоту. Тепер секція пласка, як решта, а результат тягнеться на всю область.
   ========================================================================== */
/* ==========================================================================
   СЕКЦІЇ-КАРТКИ — ОДНЕ ПРАВИЛО НА ВСІ
   Біла поверхня лишається за блоками, які ВИДІЛЯЮТЬСЯ зі стрічки тексту:
   пояснення «за що ціна» і калькулятор. Геометрія в них та сама, що в решти
   секцій: край картки — на межі колонки, текст усередині — на спільній лівій
   лінії. Роздільник-лінійку всередину не малюємо, межу тримає рамка.
   ========================================================================== */
#two-paths,
.desktop-course-calc {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--shell-pad-x);
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  box-sizing: border-box;
}
#two-paths::before,
.desktop-course-calc::before {
  content: none !important;
}
/* Внутрішня обгортка своє поле віддає — його вже задала сама картка. */
#two-paths > .two-paths__inner {
  max-width: none;
  padding-inline: 0;
}
.desktop-course-calc__grid {
  align-items: stretch;
}
.desktop-course-calc__result-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  height: 100%;
}
/* Раніше тут стояв margin-top:auto — він відтискав ціну вниз і посеред картки
   зяяла дірка. Тепер вміст стоїть суцільним блоком по центру вертикалі. */
.desktop-course-calc__result-price {
  margin-top: 0;
}

/* ==========================================================================
   ПОСИЛАННЯ В ТЕКСТІ
   П'ять посилань у тілі сторінки лишались дефолтним браузерним синім (#0000EE):
   їм ніхто не задав кольору. Поруч із бірюзовою палітрою це читалось як чужий
   елемент, а довгі назви в лапках рвались посеред слова.
   ========================================================================== */
.product-info-tabs__prose a,
.usage-guide__callout-text a,
.faq-item__body a,
.faq-answer a,
.course-know__text a,
.info p a,
.card-why p a {
  color: var(--primary-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(0, 112, 125, 0.45);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.product-info-tabs__prose a:hover,
.usage-guide__callout-text a:hover,
.faq-item__body a:hover,
.faq-answer a:hover,
.course-know__text a:hover,
.info p a:hover,
.card-why p a:hover {
  text-decoration-color: var(--primary);
}

/* ==========================================================================
   КРОКИ Й ВРІЗКА — ОДНА ВИСОТА
   Колонки стояли по центру, тож врізка «!» висіла коротшою за стовпчик кроків
   (154 проти 182px), а самі кроки були різної висоти залежно від довжини рядка.
   ========================================================================== */
.usage-guide__columns {
  align-items: stretch;
}
.usage-guide__callout {
  height: 100%;
  box-sizing: border-box;
}
.usage-guide__steps {
  align-items: stretch;
}
.usage-guide__step {
  height: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   ВКЛАДКИ «ДЕТАЛІ» — ПІД ЗАГАЛЬНИЙ ДИЗАЙН-КОД
   Була пігулка по центру з власною тінню й скляним фоном — окремий дизайн
   посеред пласкої сторінки. Тепер це рядок підписів на спільній лівій лінії,
   активний тримає бірюзова риска знизу.
   ========================================================================== */
.product-info-tabs__tablist {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--stroke);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.product-info-tabs__tab {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 8px 12px;
  min-height: 36px;
  margin-bottom: -1px;
}
.product-info-tabs__tab.is-active,
.product-info-tabs__tab[aria-selected="true"] {
  color: var(--primary-deep);
  background: transparent;
  border-bottom-color: var(--primary);
}
.product-info-tabs__tab:hover {
  color: var(--primary-deep);
}
.product-info-tabs__panels {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding-inline: 0;
}

/* ==========================================================================
   РИТМ СТОРІНКИ — ОДИН КРОК МІЖ СЕКЦІЯМИ
   Кожна секція мала власні margin/padding, і вони складались: між сусідніми
   блоками виходило то 54px, то 309px. Око читає це як «сторінку хитає».
   Тут крок задано ОДИН раз; хто має власний внутрішній відступ (картки),
   лишається зі своїм полем усередині, але зовнішній ритм у всіх спільний.
   ========================================================================== */
main > section:not(#hero) {
  margin-block: 0;
  /* Після згортання полотен ці секції стали короткими — часто це один рядок
     тригера. Зі старим кроком між двома згорнутими розкривашками виходило
     88px порожнечі на 20px тексту. */
  padding-block: clamp(8px, 1vw, 12px);
}

/* Плашка й розкривашка, до якої вона належить, — це одна пара. Стандартний
   крок між ними читався як «плашка сама по собі, тригер сам по собі», і
   застереження зависало в порожнечі. Ховати його не можна (§8b канону:
   «Дисклеймери в <details> не ховати ніколи»), тож замість ховання —
   зв'язуємо їх відстанню. */
.warn-plate + details.info,
.warn-plate + .info {
  margin-top: 6px;
}

main > section > .warn-plate:first-child,
main > section > * > .warn-plate:first-child {
  margin-bottom: 6px;
}
main > section + section::before {
  margin-bottom: clamp(8px, 1vw, 12px);
}
/* Роздільник до країв колонки, а не до країв вікна. */
main > section + section::before {
  max-width: var(--shell);
}

/* Шапка калькулятора живе в лівій колонці, а не на всю ширину картки:
   праворуч від неї стоїть картка результату, і довгий рядок над обома
   читався як окремий блок. */
@media (min-width: 900px) {
  /* Картка результату піднята в сітку САМОЇ секції й тягнеться від верхнього
     краю до нижнього. Раніше вона лежала всередині нижнього гриду, тому
     починалась під шапкою й праворуч від заголовка зяяла порожнеча.
     `display: contents` розчиняє проміжну обгортку, щоб її діти стали
     елементами цієї ж сітки. */
  .desktop-course-calc {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: max-content 1fr;
    column-gap: 16px;
    align-items: start;
  }
  .desktop-course-calc__head {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
  }
  .desktop-course-calc__grid {
    display: contents;
  }
  .desktop-course-calc__col {
    grid-column: 1;
    grid-row: 2;
  }
  .desktop-course-calc__result-card {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
  }
}

/* ==========================================================================
   КРОКИ Й ВРІЗКА — ПІД ЗАГАЛЬНИЙ ДИЗАЙН-КОД
   Було: сітка в два стовпці з білих коробок у рамках, третій крок висів сам,
   а поруч стояла окрема картка з великим бірюзовим кружком «!». Три різні
   поверхні на чотири рядки тексту.
   Стало: рівний ряд, номери — моно-підписи, як решта службових написів,
   жодних коробок. Примітка — рядок із бірюзовою рискою, без кружка.
   Правило спільне для «Схеми дозування» і «Як замовити».
   ========================================================================== */
/* Кроки ліворуч, доставка й оплата праворуч. Одна колонка розганяла блок на
   пів-екрана, хоча тексту тут на кілька рядків. Пропорція 1.35/1 підібрана
   так, щоб жоден крок не переносився на другий рядок на 1280 і ширше —
   перенесення розбиває «одна дія = один рядок», заради чого кроки й робились.
   Поріг 1000px, а не 900: заміряно, що на 940 у дві колонки кроки вже
   ламаються на два рядки, а в одну — ні. */
.usage-guide__columns {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

@media (max-width: 999.98px) {
  .usage-guide__columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}
/* Кроки — послідовність, а не таблиця. Три колонки поруч читались як три
   незалежні пункти: очей не бачив порядку, а «спершу оформити, потім оплатити»
   тут і є весь зміст. Тепер стовпчик, номер у кружку зліва — як у прототипі
   другого прогону. */
.usage-guide__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  border-top: 0;
}
.usage-guide__step {
  padding: 0 0 0 42px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text);
  height: auto;
}
.usage-guide__step + .usage-guide__step {
  border-left: 0;
  padding-left: 42px;
}
.usage-guide__step::before {
  content: counter(ug-step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-bottom: 0;
  border-radius: 999px;
  border: 1px solid rgba(0, 112, 125, 0.3);
  background: rgba(0, 112, 125, 0.07);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  color: var(--primary-deep);
}
.usage-guide__callout {
  display: block;
  height: auto;
  padding: 8px 0 8px 14px;
  border: 0;
  border-left: 2px solid var(--primary);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.usage-guide__callout-icon {
  display: none;
}
.usage-guide__callout-text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-muted);
  font-weight: 400;
  max-width: 72ch;
}

/* Правило лишилось від старої розкладки, де кроки стояли В РЯД і ділились
   вертикальною рискою: на вузькому екрані риску знімали, а разом з нею й
   відступ. Тепер номер лежить ліворуч абсолютом — обнулений відступ клав
   текст просто на кружок (видно на 400px, кроки 2 і 3). Відступ тримаємо,
   роздільники прибираємо: у стовпчику з номерами вони зайві. */
@media (max-width: 700px) {
  .usage-guide__steps {
    grid-template-columns: 1fr;
  }
  .usage-guide__step + .usage-guide__step {
    border-left: 0;
    border-top: 0;
    padding-left: 42px;
  }
}

/* ==========================================================================
   ПЛАШКИ «УВАГА» — ОДНА ШИРИНА
   Були по 62ch кожна, але ch залежить від кегля й контексту, тож на сторінці
   виходило три різні довжини. Тепер усі на всю ширину колонки.
   ========================================================================== */
.warn-plate,
.course-know__remark {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
/* Підпис плашки завжди янтарний — інакше «Важливо!» світилось бірюзою,
   тобто кольором дії, а не попередження. */
.course-know__remark .course-know__remark-title,
.course-know__remark-title {
  color: var(--warn);
}

/* ==========================================================================
   ЗАБУТІ ПОСИЛАННЯ
   13 посилань стояли дефолтним синім rgb(0,0,238) — їх просто не оформили.
   Синій браузера не належить палітрі й читається як «чужий» елемент.
   ========================================================================== */
.mobile-nav__links a,
.faq-slim-panel a,
.product-info-tabs__prose a,
.course-know__grid a,
.usage-guide__steps a {
  color: var(--primary-deep);
}

.faq-slim-panel a,
.product-info-tabs__prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.mobile-nav__links a {
  text-decoration: none;
}

.site-header__logo,
.site-footer__logo,
.mobile-nav__logo,
.site-header__telegram,
.mobile-nav__telegram,
.mobile-bottom-dock__btn {
  color: inherit;
}

/* ==========================================================================
   РАДІУСИ — ОДНЕ ЗНАЧЕННЯ
   Система --radius: 4px стоїть у 179 місцях, але п'ять елементів жили своїм
   життям: 2, 3, 8 і 10px. Круги (50%) і пігулки (999px) — це форма, а не
   радіус, їх не чіпаємо.
   ========================================================================== */
.psp-ghost,
.psp-unit,
.hero-plate,
.hero-passport,
.mfr-cert__img {
  border-radius: var(--radius);
}

.hero-plate {
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ==========================================================================
   ПАЛЬЦЕВІ РОЗМІРИ
   Пункти меню були 31px заввишки, чипи каталогу 40, пігулки калькулятора 30,
   фільтри FAQ 29 — усе нижче за 44px, з якого починається надійне влучання
   пальцем. Ростуть тільки поля, кегль не змінюється.
   ========================================================================== */
.site-header__nav a,
.product-card__chip,
.desktop-course-calc__pill,
.faq-cat-btn,
.product-card__cta,
.modal__close,
.consult-modal__close {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal__close,
.consult-modal__close {
  min-width: 44px;
}

/* Пальцевий мінімум 44px потрібен там, де справді тикають пальцем. На мишачому
   курсорі він робив із фільтра FAQ смугу заввишки з саме поле пошуку: ряд, який
   чіпають зрідка, важив як головний контрол блоку. Тому на точному вказівнику
   чипи стискаються, на сенсорному лишаються 44px — доступність не втрачається. */
@media (pointer: fine) {
  .faq-cat-btn {
    min-height: 30px;
    padding: 3px 12px;
  }
}

/* Кнопкоподібні контроли — теж 44px. Текстові посилання у списках (підвал,
   мобільне меню) навмисно лишаються меншими: там влучання забезпечує відстань
   між рядками, а 44px на кожен пункт роздуло б підвал удвічі. Дрібні контроли
   паспорта (.psp-ghost, .psp-name) сидять у щільній таблиці — їм тримаємо
   мінімум 24px за WCAG 2.2 AA, 44 зламало б саму таблицю. */
.faq-slim-trigger,
.product-info-tabs__tab,
.consultation-channel__btn,
.checkout-modal__close-x,
.consultation-modal__close-x,
.site-header__lang,
.btn {
  min-height: 44px;
}

/* Мова в мобільному меню — та сама логіка, що в шапці: RU ледь помітний, UA
   яскравий. Іде війна, українська версія головніша (рішення власника 01.08).
   Селектор по hreflang, а не по класу: на головній це просто посилання в
   списку меню, у статтях — .mobile-nav__lang, а поведінка потрібна одна. */
.mobile-nav__links a[hreflang="ru"],
.mobile-nav__lang[hreflang="ru"] {
  color: rgba(100, 116, 139, 0.45);
  font-weight: 500;
}

.mobile-nav__links a[hreflang="ru"]:hover,
.mobile-nav__lang[hreflang="ru"]:hover {
  color: rgba(100, 116, 139, 0.75);
}

.mobile-nav__links a[hreflang="uk"],
.mobile-nav__lang[hreflang="uk"] {
  color: var(--primary);
  font-weight: 700;
}

/* Перемикач мови отримав пальцевий мінімум 44px, але лишився інлайновим —
   і текст «RU» осідав угорі 44-піксельної коробки, тобто спливав над
   телеграм-кнопкою поруч. Мінімум має бути в коробки, а текст — по центру. */
.site-header__lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.checkout-modal__close-x,
.consultation-modal__close-x {
  min-width: 44px;
}

.psp-ghost,
.psp-name {
  min-height: 24px;
}


/* ==========================================================================
   ДВА РІВНІ ВИРІВНЮВАННЯ — І КОЖЕН ЕЛЕМЕНТ НАЛЕЖИТЬ РІВНО ОДНОМУ
   Рівень 1 — поверхня (картка, шапка, підвал, секція-картка): 160…1280.
   Рівень 2 — текст: 187…1253, тобто поверхня мінус її власне поле.
   Плутанина була в тому, що обгортки, які тримають КАРТКИ, теж отримали поле:
   картки товару й паспорт з'їжджали на рівень тексту й ставали на 187, тоді як
   шапка, калькулятор і таби лишались на 160. Око бачило дві ліві межі за 27px
   одна від одної по всій сторінці.
   Тому: обгортка з картками — без поля, обгортка з текстом — з полем.
   ========================================================================== */
.hero-storefront,
.hero-catalog,
/* Стрічка відгуків вилазила за колонку: ширина 1120 стояла жорстко, а ліворуч
   лишалось поле — правий край опинявся на 27px далі за всі інші. Обидва
   оголошення були двома блоками поспіль (7025 і 7055) — знайшла сесія знижок
   під час розбору дублів, злито в один. */
.testimonials-section__viewport-wrap {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
}

/* Пари «підпис: значення» в характеристиках — підпис теж службовий.
   Був жирним темним інлайном, тобто важив як заголовок і сперечався з ним. */
.product-info-tabs__facts strong {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #78828C;
}

/* Плашка §6 під картками каталогу — теж текст. Обгортка каталогу поля не має
   (в ній лежать картки-поверхні), тож плашка бере поле на себе. */
/* Плашка §6 під картками — врівень із самими картками, 160…1280,
   з невеликим зазором, щоб не злипалась із нижнім краєм карток. */
#formats .warn-plate {
  width: auto;
  margin-inline: 0;
  margin-top: 14px;
}

/* Коли тригером розкривашки став САМ заголовок секції, риска навколо нього
   зайва: вона зсувала заголовок на 17px праворуч від усіх інших заголовків
   сторінки — знову дві вертикалі. Тут риска лишається тільки на розкритому
   тілі, а воно в цих секціях одне, тож лінія все одно суцільна до низу. */
.info--head[open] {
  border-left: 0;
  padding-left: 0;
  margin-left: 0;
}

.info--head[open] > summary { margin-left: 0; }

.info--head[open] > *:not(summary) {
  border-left: 2px solid color-mix(in srgb, var(--primary) 34%, transparent);
  padding-left: 14px;
  margin-left: 2px;
}


/* «Факти» затиснуло між плашкою каталогу згори й карткою калькулятора знизу:
   три колонки тексту без власного повітря, та ще й лінійка-роздільник упритул
   зверху. Блок читався як шум між двома блоками, а не як окремий рядок доказів.
   Роздільник тут зайвий — межу вже задає плашка над ним. */
/* Два питання в картці стояли за 24px одне від одного — між ними зяяла
   порожня смуга, хоча це один список. */
.product-card .card-why + .card-why {
  margin-top: -2px;
}


/* Маркер розкривашки висить у лівому полі (-17px), а `#how-it-works` тримала
   `overflow-x: clip` — і зрізала його. Тому шеврон був у всіх секцій, крім
   цієї. Кліп лишився від старого «прилипаючого» макета з горизонтальним
   виносом; макета вже немає, а обрізання лишилось. Перевірено: без нього
   горизонтальний скрол не з'являється. */
.how-it-works {
  overflow-x: visible;
}


/* Лінійка-роздільник перед секціями-картками.
   У картки власний `::before` вимкнений: він малювався б УСЕРЕДИНІ картки, на її
   поверхні. Тому риску малює попередня секція своїм `::after` — так вона лишається
   на тлі сторінки, між блоками, як і решта роздільників. */
#hero::after,
#formats::after {
  content: '';
  display: block;
  width: 100%;
  max-width: var(--shell);
  margin: clamp(14px, 2vw, 24px) auto clamp(8px, 1vw, 12px);
  height: 14px;
  border-top: 1px solid var(--stroke);
  background-image: repeating-linear-gradient(to right,
    rgba(16, 21, 28, .26) 0 1px, transparent 1px 10px);
  background-size: 10px 5px;
  background-repeat: repeat-x;
}


/* Лінійки-роздільники мали різну довжину: 1041 у більшості, 912 у відгуків,
   1081 у hero — бо кожна успадковувала ширину від власної секції. Роздільник
   один на всю сторінку, отже й геометрія в нього одна. */
main > section#reviews::before,
main > section#faq::before,
main > section#formats::before,
main > section#product-info::before,
main > section + section::before,
#hero::after,
#formats::after {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  box-sizing: border-box;
}


/* Причина, чому текст hero не тримав поле сторінки, — рядок нижче в
   `#hero.screen-one`: секція зсунута на `-(--shell-pad-x)`, щоб фото йшло до
   країв вікна. Разом із полем поїхав і ВЕСЬ вміст. Лікується не полем на
   обгортці (воно зсувало б текст ще й на широкому екрані, де його не треба),
   а поверненням секції рівно того поля, яке вона скасувала. */
#hero.screen-one {
  padding-inline: var(--shell-pad-x);
}


/* Роздільник перед відгуками прибраний: він єдиний виходив коротшим за решту
   (913 проти 1041) — довжину йому задавала власна секція, а не сторінка. Межу
   тут і без нього видно: вище закінчується ряд розкривашок, нижче починається
   заголовок «Відгуки клієнтів». */
main > section#reviews::before { content: none; }


/* Нижче 1000px шапка брала власне поле поверх поля сторінки — її край стояв на
   36px, тоді як усі інші поверхні на 18.
   ⚠ Перше лікування було неправильним: занулили ВНУТРІШНЄ поле смуги
   (`padding-inline: 0`), хоча зайвим було ЗОВНІШНЄ подвоєння. Смуга — поверхня,
   і без внутрішнього поля логотип ставав упритул до її ж рамки: 1px зліва
   проти 15px у бургера справа (заміряно на 400px 31.07).
   Канон (docs/PITFALLS.md #21): поверхня стоїть на краю шелла, а вміст
   ВСЕРЕДИНІ неї відступає на її власний padding. Зовнішній край тут уже
   правильний — 14px, рівно `--shell-pad-x`, тому повертаємо тільки відступ
   усередині. */
@media (max-width: 999.98px) {
  .site-header__bar { padding-inline: var(--hdr-pad-x); }
}


/* Панель бургера була зроблена під телефон: 400px завширшки, посилання 20px
   з рядком у 59px і власним логотипом. На 1000px це читалось як окремий сайт,
   що виїхав збоку. Стискаємо на планшетній ширині: вужча панель, кегль ближче
   до меню в шапці, рядки щільніші, дубль логотипа геть — логотип видно в шапці
   за панеллю. */
@media (min-width: 641px) and (max-width: 900px) {
  .mobile-nav__panel { width: min(78vw, 296px); max-width: 296px; }
  .mobile-nav__links a { font-size: 0.95rem; min-height: 44px; padding-block: 8px; }
  .mobile-nav__head .mobile-nav__logo { display: none; }
  .mobile-nav__head { justify-content: flex-end; min-height: 44px; }
}


/* НЕ ЗМІШУВАТИ ДВА ІНТЕРФЕЙСИ. Бургер вмикається там само, де сторінка вже
   перебудована в одну колонку — на 900px. Вище 900 лишається десктопний
   інтерфейс, і меню має в нього ВМІЩАТИСЬ, а не переноситись у два рядки.
   Замір: ряду посилань треба 714px, решті шапки 217 — на 900–1120 не влазило.
   Тому в цьому діапазоні меню стискається, а кнопка-заявка ховається: вона
   дублює «Дивитись товар» у першому екрані, тож втрати немає. */
@media (min-width: 901px) and (max-width: 1120px) {
  .site-header__nav { gap: 6px; }
  .site-header__nav a { font-size: 0.78rem; padding-inline: 4px; }
  .site-header__bar .site-header__cta.btn { display: none; }
  .site-header__bar { gap: 8px; }
}

/* Підпис під полем замість нативної бульбашки браузера: форми стоять з
   novalidate, а рідне повідомлення приходить англійською й зникає само.
   Вузол створює script.js у момент помилки. */
.field-error {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--danger-strong);
}

input.is-invalid,
textarea.is-invalid {
  border-color: var(--danger);
  /* Колір рамки самотужки читається погано на вузьких полях, тому ще й тінь. */
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.14);
}

/* Телефон двома полями: вузький код країни + номер. Код рідко міняють, тому
   він фіксованої ширини й не забирає місце в номера. */
.phone-split {
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  gap: 0.5rem;
  align-items: start;
}

.phone-split__code {
  text-align: center;
}

/* Перевірка коду й балансу на сторінці знижок. Пройшла два заходи: спершу
   отримала поверхню картки (surface/stroke/radius), потім власник попросив
   протилежне — рядок має читатись «як строчка», врівень із заголовком
   секції (див. .zn-check-head в інлайновому <style> самої сторінки), тому
   картку-панель знято: жодного фону/бордера/паддінгу на самій формі,
   лишається тільки геометрія. */
.zn-check {
  margin: 0 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.zn-check__hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.zn-check__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.zn-check__input,
.zn-check .phone-split {
  flex: 1 1 15rem;
  min-width: 0;
}

.zn-check__btn {
  flex: 0 0 auto;
}

/* Порожній результат не має резервувати рядок висоти (раніше min-height
   1.25em тримав місце навіть до першого запиту) — колапс через
   line-height:0 на :empty, а не display:none, щоб aria-live лишався в
   акцесибіліті-дереві й міг оголосити відповідь, коли вона з'явиться. */
.zn-check__out {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text);
}

.zn-check__out:empty {
  line-height: 0;
}

.zn-check__out.is-error {
  color: var(--danger-strong);
}

/* Барабан цифр — та сама механіка, що в «паспорті» героя: вікно фіксованої
   висоти й зсув внутрішнього стовпчика кроками, тому цифри клацають, як на
   одометрі. Тут винесено в перевикористовуваний вигляд: висота рядка задається
   змінною, а зсув рахується з неї, тож кадрів може бути скільки завгодно.
   (У паспорті свій інлайновий варіант із жорсткими 14px — не чіпаю, це зона
   сесії редизайну.) */
.reel {
  --reel-h: 14px;
  --reel-frames: 4;
  display: inline-block;
  overflow: hidden;
  height: var(--reel-h);
  line-height: var(--reel-h);
  vertical-align: bottom;
}

.reel__inner {
  display: block;
  transform: translateY(0);
  transition: transform 0.34s steps(4, end);
}

.reel__num {
  display: block;
  height: var(--reel-h);
  line-height: var(--reel-h);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.is-rolling .reel__inner {
  transform: translateY(calc(-1 * var(--reel-h) * var(--reel-frames)));
}

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

/* Ціна зі знижкою більше НЕ окреме число поруч: замість другої цифри на
   наведенні меншає сама ціна (і ₴/мг разом із нею). Окреме число власник
   прибрав — воно змушувало читати два числа там, де питання одне: «а скільки
   буде мені».
   Посилання накриває обидва рядки ціни й займає в сітці рядки price+permg —
   самі .product-card__price-main / __permg свої grid-area зберігають, бо ту саму
   розмітку використовує демо-сторінка в _lab/. */
.product-card__price-link {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* Числа їдуть згори вниз, тож рівняємо їх по лівому краю: інакше при переході
   з «18 000 ₴» на «14 400 ₴» цифри стрибали б уліво-управо. */
.product-card__price-link .reel__num {
  text-align: left;
}

.product-card__price .reel {
  --reel-h: 1.3em;
}

.product-card__permg .reel {
  --reel-h: 1.35em;
}

/* Знак питання біля ціни. Раніше тут була стрілка «↓» — вона показувала на
   число нижче; числа більше немає, показувати нема на що. Лишається питання:
   «чому може бути дешевше» — відповідь за кліком. */
.product-card__disc-mark {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border: 1px solid var(--stroke, rgba(0, 0, 0, 0.18));
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-muted);
  transition: color 0.15s, border-color 0.15s;
}

.product-card__disc-mark::before {
  content: "?";
}

.product-card__price-link:hover .product-card__disc-mark,
.product-card__price-link:focus-visible .product-card__disc-mark,
.product-card__price-link.is-rolling .product-card__disc-mark,
.product-card__price-link.is-returning .product-card__disc-mark {
  color: var(--primary);
  border-color: currentColor;
}

/* Повернення після пальця — повільне НАВМИСНО. Мишу забирають і одразу бачать
   звичайну ціну; палець же прибирають ЩОБ подивитись, і за звичні 0.34 с
   знижка зникала б швидше, ніж людина встигне її прочитати. Дві секунди — це
   ще й вікно, у якому посилання лишається живим: перший тап показує ціну,
   другий (доки вона повзе назад) веде на умови знижок. */
.product-card__price-link.is-returning .reel__inner {
  transition: transform 2s steps(4, end);
}


/* ==========================================================================
   РОЗКРИВАШКА .info — ЄДИНИЙ ПРИМІТИВ
   Жила інлайном у _src/index.html і дослівною копією в _src/ru/index.html:
   62 рядки, однакові до символу. Будь-яка правка мусила робитись двічі, і
   одного разу вони вже розійшлись.

   СТОЇТЬ У КІНЦІ ФАЙЛА НАВМИСНО. Інлайновий <style> сторінки йде ПІСЛЯ
   підключення styles.css, тому раніше ці правила вигравали в пізніх блоків
   (.info p a на 6945, .warn-plate + .info на 7054, .info--head на 7425).
   Поклади їх у секцію примітивів на початку — і ті блоки почнуть перемагати,
   а вигляд зміниться. Тому місце тут, після них.

   Варіант .zn-details на сторінках знижок НЕ зведений: у нього свої відступи
   й кегль (margin 14px/17px, текст .93rem проти .86rem) — це навмисна
   розбіжність, а не копія. Зводити — окремим рішенням власника.
   ========================================================================== */
/* ---- ЄДИНА розкривашка сторінки. Один примітив на всі місця, де суть видно,
   а пояснення — по кліку (POSITIONING.md §0b: ховати можна, викидати не можна).
   Модифікатор .info--sm — дрібний моно-варіант усередині паспорта/картки. ---- */
.info{margin-top:8px;}
/* Плашка й розкривашка, до якої вона належить, — одна пара. Ховати
   застереження не можна (§8b канону), тож зв'язуємо їх відстанню:
   інакше воно висить у порожнечі й читається як нічийне. */
.warn-plate + .info{margin-top:6px;}
.warn-plate:has(+ .info){margin-bottom:8px;}
.info>summary{display:flex;align-items:center;gap:7px;list-style:none;cursor:pointer;
  font-size:.9rem;font-weight:600;color:var(--primary-deep);padding:4px 0;}
.info>summary::-webkit-details-marker{display:none;}
/* Трикутник СТОЇТЬ У КОЛОНЦІ, а не звисає в поле ліворуч.
   Раніше він висів на -17px: там, де розкривашка йде на самому краю
   колонки (а не всередині картки), маркер вилітав за край вікна — на 865px
   його центр опинявся на -1px і його різало. Тепер маркер тримає ліву межу,
   а текст тригера відступає на його ширину. Так само, як у списку питань
   FAQ — один прийом на всі розкривні місця. */
.info>summary{position:relative;padding-left:17px;}
.info>summary::before{content:'▸';color:var(--primary);transition:transform .15s;
  flex:none;position:absolute;left:0;top:50%;transform:translateY(-50%);}
.info[open]>summary::before{transform:translateY(-50%) rotate(90deg);}
.info[open]>summary{margin-bottom:10px;}
/* Розкритий текст має читатись як відповідь на те, що щойно натиснули.
   Без позначки він зливається з рештою сторінки, і зв'язок «питання →
   відповідь» доводиться відновлювати очима. Риска ліворуч — той самий
   прийом, що вже стоїть на примітках у кроках, тож нового словника
   не заводимо. */
/* Риска починається ПІД заголовком і йде до самого низу розкритої області,
   стоячи рівно під першою літерою тригера — маркер для цього винесений у
   ліве поле. Тіло розкривашки завжди одне (у табах діти спеціально
   загорнуті в .info__body), тому лінія не рветься посередині. */
.info[open]>*:not(summary){
  border-left:2px solid color-mix(in srgb, var(--primary) 34%, transparent);
  padding-left:14px;
  margin-left:0;
}
.info--sm[open]>*:not(summary){padding-left:11px;}
/* Заголовок секції САМ став тригером. Раніше поруч стояли H2 «Що важливо
   знати перед курсом?» і розкривашка «Що саме важливо врахувати?» — два
   рядки про одне й те саме, один під одним. Тепер один. */
.info>summary>h2{margin:0;font-size:inherit;font-weight:inherit;
  letter-spacing:inherit;line-height:inherit;color:inherit;font-family:inherit;}
/* Заголовок-тригер виглядає так само, як усі інші тригери. Великий кегль
   тут не потрібен: розкривашка вже сама позначає, що це початок блоку, а
   два різні розміри тригерів на одній сторінці читались як дубль. */
.info>summary:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:2px;}
/* Тільки ПРЯМІ абзаци розкривашки. Було `.info p` — і воно чіпляло геть усе
   вкладене: панелі табів, картки переваг, кроки. Абзац у табах отримував
   чужий кегль, чужий колір і стелю 62ch, через що текст обривався на
   половині широкої панелі. Розкривашка має оформлювати свій текст, а не
   все, що всередині неї опинилось. */
.info>p{margin:0 0 8px;font-size:.86rem;color:var(--text-muted);line-height:1.55;max-width:62ch;}
.info>p:last-child{margin-bottom:0;}
/* SEO-речення: приглушене й дрібніше, але ВИДИМЕ. Ховати його не можна —
   невидимий текст заради ключових слів це клоакінг (CLAUDE.md, п.4).
   Колір #667485 на світлому тлі дає 4.77:1 — вище порогу 4.5:1. */
.info--sm{margin-top:12px;}
.info--sm>summary{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.01em;padding:2px 0;gap:6px;}
.info--sm[open]>summary{margin-bottom:6px;}
.info--sm>p{font-size:.8rem;line-height:1.5;}
@media (prefers-reduced-motion: reduce){.info>summary::before{transition:none;}}