/* Start:/local/templates/MODELAKS/ui/css/00-tokens.css?17920703266597*/
/* =========================================================
   Modelax UI — design tokens
   Источник: Figma «modelax.ru» → страница ❖ UI-KIT
   (Color Styles, Text Styles, Header/Footer, Button)
   Все значения — из макета, без округлений.
   ========================================================= */

:root {
  /* ---------- Цвета: Neutral ---------- */
  --c-dark:        #253E3B;   /* Neutral/Dark — основной текст */
  --c-grey:        #56605E;   /* Neutral/Grey — вторичный текст, пункты меню на светлом */
  --c-beige-dark:  #CFC4A9;   /* Neutral/Beige-dark — hover/pressed бежевых кнопок, активная пагинация */
  --c-beige:       #F3EBE0;   /* Neutral/Beige — фон секций, бежевая кнопка, чип */
  --c-beige-light: #F9F7F3;   /* Neutral/Beige-light — фон страницы, третичная кнопка */
  --c-white:       #FFFFFF;
  --c-white-24:    rgba(255, 255, 255, .24);   /* Neutral/White-24 — разделители на зелёном, hover пунктов на тёмном */
  --c-white-40:    rgba(255, 255, 255, .40);   /* подписи в футере (opacity 40%) */

  /* ---------- Цвета: Brand ---------- */
  --c-green-dark:  #3E7D28;   /* Brand/Green/Green-dark — hover primary, активный пункт */
  --c-green:       #579940;   /* Brand/Green/Green-main — primary, футер */
  --c-green-light: #87BF56;   /* Brand/Green/Green-light */
  --c-green-16:    rgba(87, 153, 64, .16);     /* Brand/Green/Green-16 — disabled primary, активный чип */
  --c-orange:      #F6B63F;   /* Brand/Orange/Orange */
  --c-yellow:      #FDCD52;   /* Brand/Orange/Yellow */

  /* ---------- Цвета: карточки ---------- */
  --c-card-beige:  rgba(255, 255, 255, .60);   /* Neutral/Cards/Beige Card Blure Background */
  --c-card-green:  rgba(117, 161, 78, .12);    /* Neutral/Cards/Green Card Blur Background */
  --c-green-glass: rgba(135, 191, 86, .65);    /* стеклянная плашка на зелёном — плашки-факты в хиро */
  --c-green-track: rgba(135, 191, 86, .40);    /* трек пагинации на зелёном */

  /* ---------- Семантика ---------- */
  --bg-page:       var(--c-beige-light);
  --bg-section:    var(--c-beige);
  --text:          var(--c-dark);
  --text-muted:    var(--c-grey);
  --text-on-dark:  var(--c-beige-light);

  /* ---------- Шрифты ---------- */
  --ff:            'Montserrat', 'Arial', sans-serif;
  --ff-accent:     'Alumni Sans', 'Arial Narrow', sans-serif;   /* только дисклеймер в футере */
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;   /* акцентные фразы в плитках (Figma: Bold) */

  /* ---------- Типографика: Desktop (≥1280) ---------- */
  --fs-h1: 56px;  --lh-h1: 1.2;   --fw-h1: var(--fw-semibold);
  --fs-h2: 56px;  --lh-h2: 1.2;   --fw-h2: var(--fw-medium);
  --fs-h3: 36px;  --lh-h3: 1.24;  --fw-h3: var(--fw-medium);
  --fs-xl: 24px;  --lh-xl: 1.26;  /* Body/X-lg */
  --fs-lg: 20px;  --lh-lg: 1.4;   /* Body/Lg main */
  --fs-md: 18px;  --lh-md: 1.4;   /* Body/Md */
  --fs-xs: 14px;  --lh-xs: 1.4;   /* Body/Xs */
  --fs-item: 20px;                /* Controls/Item — пункты меню, чипы */
  --fs-btn: 16px;                 /* Controls/Button */
  --fs-badge: 14px;               /* Controls/Badge */
  --ls: .02em;                    /* letter-spacing 2% у всех текстов макета */

  /* ---------- Радиусы ---------- */
  --r-pill:    40px;
  --r-badge:   29px;
  --r-section: 40px;              /* скруглённые «шапки» секций (футер) */

  /* ---------- Контролы ---------- */
  --btn-h:      56px;  --btn-px: 32px;  --btn-gap: 20px;
  --btn-h-sm:   48px;  --btn-px-sm: 24px;
  --icon:       20px;
  --icon-sm:    12px;

  /* ---------- Сетка ---------- */
  --container:  1920px;           /* макет 1920, контент не растягивается шире (ТЗ) */
  --gutter:     60px;             /* боковые поля desktop */
  --header-pt:  32px;
  --header-h:   88px;

  /* ---------- Вертикальный ритм секций (главная) ----------
     Все отступы секций берутся отсюда, а не из чисел в CSS секций: так одна ступень
     (ноутбук 1280–1599) задаётся в одном месте. Значения макета: desktop 140 / 80 / 40 */
  --sp-section: 140px;            /* padding секции сверху/снизу */
  --sp-head:    80px;             /* заголовок секции → контент */
  --sp-tile:    40px;             /* внутренний отступ плиток и карточек */
  --sp-gap:     20px;             /* шаг между плитками/карточками */

  /* ---------- Анимация ---------- */
  --t-fast: .2s ease;
  --t-base: .35s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Laptop (1280–1599): в макетах ступени нет, у клиента — основные машины.
     Desktop-раскладка, но типографика и ритм ужаты на ступень ---------- */
@media (min-width: 1280px) and (max-width: 1599px) {
  :root {
    --fs-h1: 44px;
    --fs-h2: 44px;
    --fs-h3: 28px;
    --fs-xl: 22px;
    --fs-lg: 18px;
    --fs-item: 18px;
    --gutter: 40px;
    --sp-section: 100px;
    --sp-head: 56px;
    --sp-tile: 32px;
  }
}

/* ---------- Tablet (768–1279) ---------- */
@media (max-width: 1279px) {
  :root {
    --fs-h1: 48px;
    --fs-h2: 48px;
    --fs-h3: 28px;
    --fs-xl: 22px;
    --fs-lg: 18px;
    --fs-md: 16px;
    --fs-xs: 14px;
    --fs-item: 20px;
    --gutter: 24px;
    --r-section: 32px;
    --sp-section: 96px;
    --sp-head: 48px;
    --sp-tile: 24px;
    --sp-gap: 16px;
  }
}

/* ---------- Mobile (<768) ---------- */
@media (max-width: 767px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 32px;
    --fs-h3: 22px;
    --fs-xl: 20px;
    --fs-lg: 16px;
    --fs-md: 16px;
    --fs-xs: 12px;
    --fs-item: 18px;
    --fs-btn: 14px;
    --fs-badge: 12px;
    --r-section: 24px;
    --btn-h: 48px;  --btn-px: 24px;
    --btn-h-sm: 48px;
    --gutter: 16px;
    --header-pt: 16px;
    --header-h: 64px;
    --sp-section: 72px;
    --sp-head: 32px;
    --sp-tile: 16px;
    --sp-gap: 16px;
  }
}

/* End */


/* Start:/local/templates/MODELAKS/ui/css/01-base.css?17920703266134*/
/* =========================================================
   Modelax UI — base: шрифты, reset, типографика
   ========================================================= */

/* ---------- Шрифты (только используемые в макете начертания) ---------- */
@font-face {
  font-family: 'Montserrat';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/local/templates/MODELAKS/ui/css/../../fonts/Montserrat-Medium.woff2') format('woff2'),
       url('/local/templates/MODELAKS/ui/css/../../fonts/Montserrat-Medium.woff') format('woff');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/local/templates/MODELAKS/ui/css/../../fonts/Montserrat-SemiBold.woff2') format('woff2'),
       url('/local/templates/MODELAKS/ui/css/../../fonts/Montserrat-SemiBold.woff') format('woff');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/local/templates/MODELAKS/ui/css/../../fonts/Montserrat-Bold.woff2') format('woff2'),
       url('/local/templates/MODELAKS/ui/css/../../fonts/Montserrat-Bold.woff') format('woff');
}
/* Alumni Sans ExtraLight (Google Fonts, self-hosted) — только строка «Имеются противопоказания…» в футере */
@font-face {
  font-family: 'Alumni Sans';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/local/templates/MODELAKS/ui/css/../fonts/AlumniSans-ExtraLight-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Alumni Sans';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('/local/templates/MODELAKS/ui/css/../fonts/AlumniSans-ExtraLight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Reset ----------
   Область: body.is-ui (страницы с define('MODELAX_UI')) + обвязка на legacy-страницах
   (шапка, меню, футер, дисклеймер, cookie). Legacy-контент не затрагивается. */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html:has(body.is-ui) { scroll-behavior: smooth; }

body { margin: 0; min-width: 320px; }
body.is-ui {
  min-height: 100vh;
  color: var(--text);
  background: var(--bg-page);
  -webkit-tap-highlight-color: transparent;
}
/* Базовая типографика. :where() — нулевая специфичность, чтобы сбросы
   не перебивали одноклассовые правила компонентов (не менять на :is()) */
:where(body.is-ui, .ui-header, .ui-menu, .ui-footer, .ui-disclaimer, .ui-cookie) {
  color: var(--text);
  font-family: var(--ff);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  letter-spacing: var(--ls);
}

:where(body.is-ui, .ui-header, .ui-menu, .ui-footer, .ui-disclaimer, .ui-cookie) :is(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
:where(body.is-ui, .ui-header, .ui-menu, .ui-footer, .ui-disclaimer, .ui-cookie) :is(ul, ol) { padding: 0; list-style: none; }
:where(body.is-ui, .ui-header, .ui-menu, .ui-footer, .ui-disclaimer, .ui-cookie) :is(img, svg, video) { display: block; max-width: 100%; }
:where(body.is-ui, .ui-header, .ui-menu, .ui-footer, .ui-disclaimer, .ui-cookie) img { height: auto; }
:where(body.is-ui, .ui-header, .ui-menu, .ui-footer, .ui-disclaimer, .ui-cookie) a { color: inherit; text-decoration: none; }
:where(body.is-ui, .ui-header, .ui-menu, .ui-footer, .ui-disclaimer, .ui-cookie) :is(a, button, [role="button"], label, summary) { cursor: pointer; }
:where(body.is-ui, .ui-header, .ui-menu, .ui-footer, .ui-disclaimer, .ui-cookie) :is(button, input, textarea, select) {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
:where(body.is-ui, .ui-header, .ui-menu, .ui-footer, .ui-disclaimer, .ui-cookie) :is(button, a):focus-visible {
  outline: 2px solid var(--c-green-dark);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: 0; }
:where(body.is-ui) sup { font-size: .5em; line-height: 0; vertical-align: super; }

:where(body.is-ui) ::selection { color: var(--c-white); background: var(--c-green); }

/* ---------- Типографика ---------- */
.ui-h1, .ui-h2, .ui-h3 { color: var(--text); }
.ui-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); }
.ui-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); }
.ui-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); }

.ui-text-xl { font-size: var(--fs-xl); line-height: var(--lh-xl); }
.ui-text-lg { font-size: var(--fs-lg); line-height: var(--lh-lg); }
.ui-text-md { font-size: var(--fs-md); line-height: var(--lh-md); }
.ui-text-xs { font-size: var(--fs-xs); line-height: var(--lh-xs); }
.ui-text-muted { color: var(--text-muted); }

/* Контентный текст (статьи, инструкция): заголовки/абзацы/списки внутри */
.ui-prose > * + * { margin-top: 1em; }
.ui-prose h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); margin-top: 1.6em; }
.ui-prose h3 { font-size: var(--fs-xl); line-height: var(--lh-xl); margin-top: 1.4em; }
.ui-prose ul { list-style: disc; padding-left: 1.2em; }
.ui-prose ol { list-style: decimal; padding-left: 1.2em; }
.ui-prose li + li { margin-top: .4em; }
.ui-prose a { color: var(--c-green-dark); text-decoration: underline; text-underline-offset: .15em; }
.ui-prose a:hover { color: var(--c-green); }

/* ---------- Утилиты ---------- */
.ui-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.ui-center { text-align: center; }
[hidden] { display: none !important; }

/* End */


/* Start:/local/templates/MODELAKS/ui/css/02-layout.css?17920703262670*/
/* =========================================================
   Modelax UI — layout: обёртка страницы, контейнер, секции
   ========================================================= */

/* Страница: шапка сверху, футер прижат к низу */
.ui-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: clip;               /* горизонтальный скролл от «выезжающих» элементов исключён */
}
.ui-page__main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* Контейнер: ширина макета 1920 + боковые поля, по ТЗ шире 1920 не растягиваем */
.ui-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Секция страницы (вертикальные отступы задаются в конкретных блоках) */
.ui-section { position: relative; }
.ui-section--beige { background: var(--bg-section); }
.ui-section--green { background: var(--c-green); color: var(--text-on-dark); }

/* Скруглённый «наплыв» верхнего блока на нижний (как беж-шапка над футером):
   у нижнего блока сверху 40px полоса цвета верхнего блока с радиусом снизу */
.ui-section--cap-top::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--r-section);
  background: var(--cap-color, var(--bg-page));
  border-radius: 0 0 var(--r-section) var(--r-section);
}

/* Горизонтальный ряд */
.ui-row { display: flex; align-items: center; gap: var(--row-gap, 20px); }
.ui-row--between { justify-content: space-between; }
.ui-row--wrap { flex-wrap: wrap; }

/* Иконка: внешний бокс 20×20 (или 12×12), глиф внутри уже центрирован в SVG-файле */
.ui-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--icon);
  height: var(--icon);
  color: currentColor;
}
.ui-icon--12 { width: var(--icon-sm); height: var(--icon-sm); }
.ui-icon svg { width: 100%; height: 100%; display: block; }

/* Неразрывный фрагмент (название препарата «Моделакс®-Н» и т. п.) */
.ui-nowrap { white-space: nowrap; }

/* Перенос строки только на планшете/мобильном (макет 768/360 рвёт фразу иначе, чем десктоп) */
.ui-br-t { display: none; }
@media (max-width: 1279px) { .ui-br-t { display: inline; } }

/* End */


/* Start:/local/templates/MODELAKS/ui/css/03-components/button.css?17920703263412*/
/* =========================================================
   Button — Figma: Button (Style × State × Size), Icon Button
   Ховер в макете — заливка «наезжает» слева (слой Bg 274px
   с мягкой кромкой white-24 12px). Здесь это ::before.
   ========================================================= */

.ui-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  height: var(--btn-h);
  padding: 12px var(--btn-px);
  border-radius: var(--r-pill);
  overflow: hidden;
  isolation: isolate;
  font-size: var(--fs-btn);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--btn-color);
  background: var(--btn-bg);
  transition: color var(--t-fast), background-color var(--t-fast);
  -webkit-user-select: none;
  user-select: none;
}

/* Наезжающая заливка */
.ui-btn::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0; left: 0;
  width: calc(100% + 12px);
  border-radius: var(--r-pill);
  background: var(--btn-bg-hover);
  border-right: 12px solid var(--c-white-24);
  transform: translateX(-100%);
  transition: transform var(--t-base);
}
.ui-btn:hover::before,
.ui-btn:active::before,
.ui-btn.is-active::before { transform: translateX(0); }

.ui-btn > * { position: relative; }
.ui-btn .ui-icon { color: currentColor; }

/* --- Style=Primary --- */
.ui-btn--primary {
  --btn-bg: var(--c-green);
  --btn-bg-hover: var(--c-green-dark);
  --btn-color: var(--c-white);
}

/* --- Style=Tertianary (в макете так) --- */
.ui-btn--tertiary {
  --btn-bg: var(--c-beige-light);
  --btn-bg-hover: var(--c-beige-dark);
  --btn-color: var(--c-dark);
}
.ui-btn--tertiary:hover { background: var(--c-white); }

/* --- Style=Beige --- */
.ui-btn--beige {
  --btn-bg: var(--c-beige);
  --btn-bg-hover: var(--c-beige-dark);
  --btn-color: var(--c-dark);
}

/* --- Size=Small --- */
.ui-btn--sm {
  height: var(--btn-h-sm);
  padding-inline: var(--btn-px-sm);
}

/* --- State=Disabled --- */
.ui-btn:disabled,
.ui-btn.is-disabled {
  pointer-events: none;
  cursor: default;
}
.ui-btn:disabled > *,
.ui-btn.is-disabled > * { opacity: .2; }
.ui-btn--primary:disabled,
.ui-btn--primary.is-disabled { background: var(--c-green-16); color: var(--c-dark); }
.ui-btn--tertiary:disabled,
.ui-btn--tertiary.is-disabled,
.ui-btn--beige:disabled,
.ui-btn--beige.is-disabled { background: var(--c-beige-dark); }

/* --- Icon Button (только иконка): Large 84×56, Small 68×48 (замеры тестировщика по Figma) --- */
.ui-btn--icon {
  --btn-gap: 0;
  width: 84px; height: 56px;
  padding: 16px 32px;
}
.ui-btn--icon.ui-btn--sm {
  width: 68px; height: 48px;
  padding: 12px 24px;
}
@media (max-width: 1279px) {
  .ui-btn--icon { width: 72px; height: 56px; padding: 16px 26px; }
}
@media (max-width: 767px) {
  .ui-btn--icon { width: 68px; height: 48px; padding: 12px 24px; }
  .ui-btn--icon.ui-btn--sm { width: 56px; height: 40px; padding: 8px 18px; }
}

/* Бургер в шапке — primary с иконкой меню, размеры кнопки Large/Small */
.ui-btn--burger { --btn-gap: 0; }

/* Блочная кнопка (мобильные формы) */
.ui-btn--block { display: flex; width: 100%; }

/* End */


/* Start:/local/templates/MODELAKS/ui/css/03-components/controls.css?17920703263314*/
/* =========================================================
   Chip · Badge · Pagination · Breadcrumbs
   ========================================================= */

/* --- Chip (фильтры): Active=Off/On, Size=Large/Small --- */
.ui-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 12px var(--btn-px);
  border-radius: var(--r-pill);
  overflow: hidden;
  isolation: isolate;
  font-size: var(--fs-item);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: var(--ls);
  white-space: nowrap;
  color: var(--c-dark);
  background: var(--c-beige);
  transition: color var(--t-fast), background-color var(--t-fast);
}
.ui-chip::before {                 /* hover-заливка как у кнопок, цвет из макета #DDD3B9 */
  content: '';
  position: absolute; z-index: -1; inset: 0; left: 0;
  width: calc(100% + 12px);
  border-radius: var(--r-pill);
  background: #DDD3B9;
  transform: translateX(-100%);
  transition: transform var(--t-base);
}
.ui-chip:hover::before { transform: translateX(0); }
.ui-chip > * { position: relative; }
.ui-chip--sm { height: var(--btn-h-sm); padding-inline: var(--btn-px-sm); }
.ui-chip.is-active,
.ui-chip[aria-pressed="true"] {
  color: var(--c-green-dark);
  background: var(--c-green-16);
}
.ui-chip.is-active::before { display: none; }

/* --- Badge (метки на карточках): Size=Large 40px / Small 28px --- */
.ui-badge {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 10px 20px;
  border-radius: var(--r-badge);
  background: var(--c-white);
  color: var(--c-dark);
  font-size: var(--fs-badge);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-badge--sm { height: 28px; padding-inline: 12px; font-size: 12px; }

/* --- Pagination (слайдеры): полоски 4px, активная 32px beige-dark --- */
.ui-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding-top: 32px;
}
.ui-pagination__dot {
  display: block;
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: var(--c-beige);
  transition: width var(--t-base), background-color var(--t-fast);
}
.ui-pagination__dot.is-active { width: 32px; background: var(--c-beige-dark); }
@media (max-width: 767px) {
  .ui-pagination { padding-top: 20px; }
  .ui-pagination__dot { width: 8px; height: 2px; }
  .ui-pagination__dot.is-active { width: 24px; }
}

/* --- Breadcrumbs: Size=Large 16px / Small 14px, стрелка 12px --- */
.ui-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-btn);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--c-grey);
}
.ui-breadcrumbs__item { display: inline-flex; align-items: center; gap: 12px; }
.ui-breadcrumbs__item .ui-icon { color: var(--c-dark); }
.ui-breadcrumbs a { color: var(--c-dark); transition: color var(--t-fast); }
.ui-breadcrumbs a:hover { color: var(--c-green-dark); }
.ui-breadcrumbs [aria-current="page"] { color: var(--c-grey); }

/* End */


/* Start:/local/templates/MODELAKS/ui/css/03-components/header.css?17920703266976*/
/* =========================================================
   Header — Figma: Header (Device × Type), Header Item
   Прозрачная шапка поверх первого экрана; при скролле
   фиксируется (ТЗ). Type=White → светлый текст на тёмном
   фоне (.ui-header--light), по умолчанию тёмный текст.
   ========================================================= */

.ui-header {
  position: absolute;
  z-index: 100;
  top: 0; left: 0; right: 0;
  padding-top: var(--header-pt);
  color: var(--c-grey);
  transition: background-color var(--t-base), padding var(--t-base), box-shadow var(--t-base);
}
.ui-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Логотип: 249×32 (desktop/tablet), 156×20 (mobile) */
.ui-header__logo {
  display: block;
  flex: 0 0 auto;
  width: 249px;
  height: 32px;
  color: var(--c-dark);
  transition: color var(--t-fast), opacity var(--t-fast);
}
.ui-header__logo svg { width: 100%; height: 100%; }
.ui-header__logo:hover { opacity: .8; }

/* Пункты + кнопка */
.ui-header__nav {
  display: flex;
  align-items: center;
  gap: 48px;
}
.ui-header__item {
  display: inline-flex;
  align-items: center;
  height: var(--btn-h);
  padding: 12px 0;
  font-size: var(--fs-item);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: var(--ls);
  white-space: nowrap;
  color: var(--c-grey);
  transition: color var(--t-fast);
}
.ui-header__item:hover,
.ui-header__item.is-current { color: var(--c-green-dark); }

/* Бургер (tablet/mobile) */
.ui-header__burger { display: none; }

/* --- Type=White: на тёмном фоне --- */
.ui-header--light .ui-header__logo { color: var(--c-beige-light); }
.ui-header--light .ui-header__item { color: var(--c-beige-light); }
.ui-header--light .ui-header__item:hover,
.ui-header--light .ui-header__item.is-current { color: var(--c-white-24); }
/* На тёмном хиро кнопка «Где купить» и бургер — светлые (Tertiary); в зафиксированной шапке — снова primary */
.ui-header--light:not(.is-fixed) .ui-header__cta,
.ui-header--light:not(.is-fixed) .ui-header__burger {
  --btn-bg: var(--c-beige-light);
  --btn-bg-hover: var(--c-beige-dark);
  --btn-color: var(--c-dark);
}

/* --- Фиксация при скролле (класс ставит ui.js). Figma (Tablet/Mobile «Фиксированная шапка»):
       фон страницы, без тени, скругление снизу 40. Если под шапкой прилипает подменю
       (чипы инструкции) — скругление переходит к подменю. --- */
.ui-header.is-fixed {
  position: fixed;
  background: var(--bg-page);
  padding-bottom: 16px;
  border-radius: 0 0 var(--r-section) var(--r-section);
  color: var(--c-grey);
}
.ui-header.is-fixed:has(~ .ui-page__main .ui-subnav) { border-radius: 0; padding-bottom: 8px; }
.ui-header.is-fixed .ui-header__logo { color: var(--c-dark); }
.ui-header.is-fixed .ui-header__item { color: var(--c-grey); }
.ui-header.is-fixed .ui-header__item:hover,
.ui-header.is-fixed .ui-header__item.is-current { color: var(--c-green-dark); }
/* плавное появление при возврате наверх */
.ui-header.is-fixed { animation: ui-header-in var(--t-base) both; }
@keyframes ui-header-in { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ui-header.is-fixed { animation: none; } }

/* Место под шапку у страниц без хиро (внутренние): отступ = высота шапки */
.ui-header-offset { padding-top: calc(var(--header-pt) + var(--btn-h)); }

/* --- Tablet: пункты уходят в бургер --- */
@media (max-width: 1279px) {
  .ui-header__nav .ui-header__item,
  .ui-header__nav .ui-header__cta { display: none; }
  .ui-header__burger { display: inline-flex; }
}

/* --- Mobile --- */
@media (max-width: 767px) {
  .ui-header__logo { width: 156px; height: 20px; }
}

/* =========================================================
   Мобильное меню — Figma: Tablet/Mobile | Главная | Меню.
   Оверлей (зелёный, блюр) + карточка сверху с отступом 8: разделы, кнопка
   «Где купить», разделитель, телефон и адрес. Крестик — простая иконка.
   ========================================================= */
.ui-menu {
  position: fixed;
  z-index: 200;
  inset: 0;
  padding: 0 8px 8px;                /* карточка прижата к верху: верхние углы прямые */
  background: rgba(87, 153, 64, .55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility 0s linear var(--t-base);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ui-menu.is-open { opacity: 1; visibility: visible; transition: opacity var(--t-base); }
body.ui-menu-open { overflow: hidden; }

.ui-menu__sheet {
  position: relative;
  min-height: 640px;                 /* макет Tablet | Главная | Меню */
  border-radius: 0 0 24px 24px;
  background: var(--c-beige-light);
  color: var(--c-dark);
  padding: 24px;
  transform: translateY(-16px);
  transition: transform var(--t-base);
}
.ui-menu.is-open .ui-menu__sheet { transform: none; }
.ui-menu__close {
  position: absolute;
  top: 16px; right: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: var(--c-dark);
  border-radius: 50%;
  transition: background-color var(--t-fast);
}
.ui-menu__close:hover { background: var(--c-beige); }

.ui-menu__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 64px 0 40px; }
.ui-menu__item {
  font-size: var(--fs-item);
  line-height: 1.4;
  font-weight: var(--fw-medium);
  color: var(--c-dark);
  transition: color var(--t-fast);
}
.ui-menu__item:hover, .ui-menu__item.is-current { color: var(--c-green-dark); }
.ui-menu__cta { margin-top: 8px; min-width: 240px; }

.ui-menu__contacts {
  display: flex; flex-direction: column; gap: 16px;
  padding-top: 40px;
  border-top: 1px solid var(--c-beige);
}
.ui-menu__label { display: block; font-size: var(--fs-xs); line-height: 1.4; color: var(--c-grey); margin-bottom: 4px; }
.ui-menu__value { font-size: var(--fs-md); line-height: 1.4; color: var(--c-dark); }
.ui-menu__value a:hover { color: var(--c-green-dark); }

@media (max-width: 767px) {
  .ui-menu__sheet { padding: 16px; min-height: 440px; }
  .ui-menu__cta { min-width: 158px; font-size: 16px; }
  .ui-menu__nav { padding: 56px 0 32px; gap: 20px; }
  .ui-menu__contacts { padding-top: 24px; }
}

/* End */


/* Start:/local/templates/MODELAKS/ui/css/03-components/footer.css?17920703266736*/
/* =========================================================
   Footer — Figma: Footer (Device=Desktop/Tablet/Mobile)
   Desktop: зелёный фон, сверху беж-«шапка» 40px со скруглением,
   pt 100 (включая шапку) · gap 60 · pb 60 · px 60
   ========================================================= */

.ui-footer {
  position: relative;
  background: var(--c-green);
  color: var(--c-beige-light);
  padding-top: 100px;
  --footer-pb: 60px;
  padding-bottom: var(--footer-pb);
  overflow: hidden;
}
/* скруглённый наплыв предыдущего блока */
.ui-footer::before {
  content: '';
  position: absolute;
  inset: -1px 0 auto 0;                 /* на 1px выше: без шва при дробном положении футера */
  height: calc(var(--r-section) + 1px);
  background: var(--footer-cap, var(--bg-page));
  border-radius: 0 0 var(--r-section) var(--r-section);
}
.ui-footer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* --- Верх: лого + навигация + контакты --- */
.ui-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.ui-footer__logo {
  display: block;
  flex: 0 0 auto;
  width: 282px;
  height: 36px;
  color: var(--c-beige-light);
  transition: opacity var(--t-fast);
}
.ui-footer__logo svg { width: 100%; height: 100%; }
.ui-footer__logo:hover { opacity: .8; }

.ui-footer__cols {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.ui-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 435px;
  flex: 0 1 435px;
}
.ui-footer__nav a {
  display: flex;
  align-items: center;
  height: 32px;
  font-size: var(--fs-item);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: var(--ls);
  color: var(--c-beige-light);
  transition: color var(--t-fast);
}
.ui-footer__nav a:hover { color: var(--c-white-24); }

.ui-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 738px;
  flex: 0 1 738px;
}
.ui-footer__phones {
  display: flex;
  gap: 20px;
  width: 586px;
  max-width: 100%;
}
.ui-footer__phones > * { flex: 1 0 0; min-width: 0; }
.ui-footer__label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  letter-spacing: var(--ls);
  color: var(--c-white-40);
}
.ui-footer__value {
  font-size: var(--fs-md);
  line-height: 1.4;
  letter-spacing: var(--ls);
  color: var(--c-beige-light);
  white-space: nowrap;
}
.ui-footer__value a { transition: color var(--t-fast); }
.ui-footer__value a:hover { color: var(--c-white); }
.ui-footer__address .ui-footer__value { white-space: normal; }

/* --- Дисклеймер-строка: Alumni Sans ExtraLight 75px, 40%, линия white-24 --- */
.ui-footer__warning {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-white-24);
  text-align: center;
  font-family: var(--ff-accent);
  font-weight: 200;
  /* макет 75px в контейнере 1800 (1800/75 = 24); на 1280–1919 размер считается от ширины контейнера
     (100vw − 2 gutter), чтобы строка оставалась одной. При 75px текст ≈1803px — ровно по краю,
     поэтому трекинг чуть ужат (-0.01em ≈ −50px) */
  font-size: min(75px, calc((100vw - 2 * var(--gutter)) / 24));
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;   /* если Alumni Sans не загрузился, фолбэк шире — пусть переносится, а не вылезает */
  color: var(--c-white-40);
}

/* --- Низ: реквизиты + ссылки + лого Промомед --- */
.ui-footer__bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.ui-footer__info {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  letter-spacing: var(--ls);
  color: var(--c-white-40);
}
.ui-footer__info > * {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 587px;
  flex: 0 1 587px;
}
.ui-footer__info a { transition: color var(--t-fast); }
.ui-footer__info a:hover { color: var(--c-white); }
.ui-footer__promomed {
  display: block;
  flex: 0 0 auto;
  width: 158px;
  height: 44px;
  transition: opacity var(--t-fast);
}
.ui-footer__promomed:hover { opacity: .8; }
.ui-footer__promomed img,
.ui-footer__promomed svg { width: 100%; height: 100%; object-fit: contain; }

/* --- Tablet (макет 768 × 679): лого сверху, ниже ряд nav | контакты,
       предупреждение в 2 строки ~44px, реквизиты стопкой, лого Промомед справа --- */
@media (max-width: 1599px) {   /* планшетная раскладка футера действует и на ноутбуках 1280–1599: в одну строку колонки не влезают */
  .ui-footer { padding-top: 80px; --footer-pb: 32px; }   /* 32 наплыв + 48 */
  .ui-footer__inner { gap: 48px; }
  .ui-footer__top { flex-direction: column; gap: 48px; }
  .ui-footer__cols { width: 100%; gap: 20px; }
  .ui-footer__nav { flex: 0 0 244px; width: 244px; }
  .ui-footer__contacts { flex: 1 1 auto; width: auto; gap: 24px; }
  .ui-footer__phones { width: auto; }
  .ui-footer__value { white-space: normal; }
  .ui-footer__phones .ui-footer__value { white-space: nowrap; }   /* телефон не переносить */
  .ui-footer__warning { font-size: 48px; white-space: normal; text-align: left; }
  .ui-footer__bottom { align-items: flex-end; }
  .ui-footer__info { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ui-footer__info > * { flex: none; width: auto; }
}

/* --- Mobile (макет 360 × 756): всё стопкой, лого Промомед слева --- */
@media (max-width: 767px) {
  .ui-footer { padding-top: 64px; --footer-pb: 24px; }
  .ui-footer__inner { gap: 32px; }
  .ui-footer__top { gap: 32px; }
  .ui-footer__logo { width: 156px; height: 20px; }
  .ui-footer__cols { flex-direction: column; gap: 28px; }
  .ui-footer__nav { flex: none; width: auto; gap: 8px; }
  .ui-footer__phones { gap: 16px; }
  .ui-footer__phones > * { flex: 0 1 auto; }   /* колонки по содержимому: номер в одну строку */
  .ui-footer__warning { font-size: 32px; }
  .ui-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }   /* макет 360: лого Промомед сразу под ссылками */
  .ui-footer__promomed { width: 118px; height: 33px; }
}

/* End */


/* Start:/local/templates/MODELAKS/ui/css/03-components/notice.css?17920703263813*/
/* =========================================================
   Notices: дисклеймер (ТЗ: закреплён внизу, крестик, sessionStorage),
   cookie-уведомление (перенос из старого футера).
   В UI-ките отсутствуют — собраны из токенов кита.
   ========================================================= */

/* --- Дисклеймер --- */
/* Плашка в контейнере (в макете 1800 при 1920), не во всю ширину экрана */
.ui-disclaimer {
  position: fixed;
  z-index: 150;
  left: 0; right: 0; bottom: 0;
  padding-bottom: 20px;
  transform: translateY(100%);
  transition: transform var(--t-base);
  pointer-events: none;
}
.ui-disclaimer.is-visible { transform: none; }
.ui-disclaimer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 104px;                 /* макет Desktop | Главная | Дисклеймер: 1800×104, низ 20 */
  padding: 12px 24px 12px 36px;
  border-radius: 24px;
  background: var(--c-green-glass);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--c-beige-light);
  pointer-events: auto;
}
/* Текст — Alumni Sans, как строка «Имеются противопоказания» в футере: 64 / 36 / 22 */
.ui-disclaimer__text {
  font-family: var(--ff-accent);
  font-weight: 200;
  font-size: 64px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
/* Кнопка закрытия — светлая заливка, тёмная иконка */
.ui-disclaimer__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px; height: 56px;
  border-radius: var(--r-pill);
  background: var(--c-beige-light);
  color: var(--c-dark);
  transition: background-color var(--t-fast);
}
.ui-disclaimer__close:hover { background: var(--c-beige); }
/* Запас под плашку добавляем футеру, а не body: на body он открывал полосу фона
   страницы под футером ровно в высоту плашки, когда доскроллишь до конца. */
body.ui-has-disclaimer .ui-footer { padding-bottom: calc(var(--footer-pb, 40px) + var(--disclaimer-h, 64px)); }

/* --- Cookie --- */
.ui-cookie {
  position: fixed;
  z-index: 160;
  left: var(--gutter); right: var(--gutter); bottom: 20px;
  max-width: 900px;
  margin-inline: auto;
  padding: 24px 32px;
  border-radius: 24px;
  background: var(--c-white);
  color: var(--c-dark);
  box-shadow: 0 12px 40px rgba(37, 62, 59, .12);
  font-size: var(--fs-xs);
  line-height: 1.4;
  display: none;
}
.ui-cookie.is-visible { display: block; }
.ui-cookie a { color: var(--c-green-dark); text-decoration: underline; }
.ui-cookie__actions { margin-top: 16px; display: flex; gap: 12px; flex-wrap: wrap; }
body.ui-has-disclaimer .ui-cookie { bottom: calc(var(--disclaimer-h, 64px) + 20px); }


@media (min-width: 1280px) and (max-width: 1599px) {
  .ui-disclaimer__text { font-size: 40px; }   /* ноутбук: 64px в контейнер 1160–1480 не влезает в строку; 40 — одна строка и на 1280 */
}
@media (max-width: 1279px) {
  .ui-disclaimer__inner { min-height: 112px; gap: 16px; padding: 12px 16px 12px 24px; }
  .ui-disclaimer__text { font-size: 36px; }
}
@media (max-width: 767px) {
  .ui-cookie { left: var(--gutter); right: var(--gutter); padding: 20px; }
  .ui-disclaimer { padding-bottom: 16px; }
  .ui-disclaimer__inner { min-height: 98px; padding: 12px 12px 12px 16px; border-radius: 16px; }
  .ui-disclaimer__text { font-size: 22px; }
  .ui-disclaimer__close { width: 68px; height: 48px; }
}


/* End */


/* Start:/local/templates/MODELAKS/ui/css/03-components/card.css?17920703264313*/
/* =========================================================
   Article card — Figma: New Card (Device=Desktop 890×460 /
   Tablet 720×420 / Mobile 328×503, State=Default/Hover)
   Desktop: беж, radius 40, padding 20; фото 320×420 radius 24;
   контент: padding 20 40 20 40; бейджи → заголовок X-lg → анонс Md (3 строки);
   кнопка-стрелка (tertiary icon 68×48) в правом нижнем углу.
   Mobile: фото сверху 296×230 radius 16, бейджи small, кнопка small.
   ========================================================= */

.ui-card {
  position: relative;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
  border-radius: 40px;
  background: var(--c-beige);
  color: var(--c-dark);
  transition: background-color var(--t-base);
}
.ui-card:hover { background: #EFE5D6; }         /* State=Hover — чуть темнее беж */

.ui-card__media {
  display: block;
  width: 320px;
  height: 420px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--c-beige-dark);
}
.ui-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-base);
}
.ui-card:hover .ui-card__media img { transform: scale(1.03); }

.ui-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 20px 20px 20px;
}
.ui-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}
.ui-card__title {
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  font-weight: var(--fw-medium);
  color: var(--c-dark);
}
.ui-card__title a { color: inherit; }
/* вся карточка кликабельна через «растянутую» ссылку заголовка */
.ui-card__title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.ui-card__text {
  margin-top: 16px;
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  color: var(--c-dark);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.ui-card__more {
  margin-top: auto;
  align-self: flex-end;
  padding-top: 20px;
}
.ui-card__more .ui-btn { --btn-bg: var(--c-white); --btn-bg-hover: var(--c-beige-dark); --btn-color: var(--c-dark); }

/* --- Laptop (1280–1599): карточка в двух колонках ~570–700 — фото уже, чтобы тексту осталось место --- */
@media (min-width: 1280px) and (max-width: 1599px) {
  .ui-card { grid-template-columns: 240px minmax(0, 1fr); }
  .ui-card__media { width: 240px; height: 380px; }
  .ui-card__body { padding: 16px 16px 16px 8px; }
  .ui-card__badges { margin-bottom: 24px; }
}

/* --- Tablet: 720×420, фото 290×380 --- */
@media (max-width: 1279px) {
  .ui-card { grid-template-columns: 290px minmax(0, 1fr); }
  .ui-card__media { width: 290px; height: 380px; }
  .ui-card__body { padding: 20px 20px 20px 10px; }
  .ui-card__badges { margin-bottom: 32px; }
  .ui-card__more .ui-btn--icon { width: 84px; height: 56px; padding: 16px 32px; }   /* макет Tablet | News: стрелка карточки 84×56, а не 72 как у прочих кнопок-иконок */
}

/* --- Mobile: 328×503, фото сверху --- */
@media (max-width: 767px) {
  .ui-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;   /* бейджи / фото / заголовок / текст (тянется) / стрелка — при общей высоте слайдов стрелка остаётся внизу */
    gap: 0;
    padding: 16px;
    border-radius: 24px;
  }
  .ui-card__media { width: 100%; height: 230px; border-radius: 16px; order: 2; }
  .ui-card__body { display: contents; }
  .ui-card__badges { order: 1; margin-bottom: 16px; }
  .ui-card__title { order: 3; margin-top: 20px; }
  .ui-card__text { order: 4; margin-top: 12px; }
  .ui-card__more { order: 5; padding-top: 16px; justify-self: end; }   /* стрелка справа */
  .ui-card__more .ui-btn--icon { width: 68px; height: 48px; padding: 12px 24px; }   /* мобильный размер кнопки-иконки (планшетное правило выше его перебивало бы) */
}

/* End */


/* Start:/local/templates/MODELAKS/ui/css/03-components/slider.css?17920703264427*/
/* =========================================================
   Slider — горизонтальная лента карточек со scroll-snap
   и кнопками prev/next (Figma: «Читайте также», «Полезно знать»).
   Без библиотек: нативный скролл + ui.js для кнопок/пагинации.
   ========================================================= */

.ui-slider { position: relative; }
.ui-slider__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 80px;             /* заголовок → карточки (Figma) */
}
.ui-slider__controls { display: flex; gap: 8px; flex: 0 0 auto; }
.ui-slider__controls .ui-btn { --btn-bg: var(--c-white); --btn-bg-hover: var(--c-beige-dark); --btn-color: var(--c-dark); }
.ui-slider__controls .ui-btn:disabled { opacity: .4; }
.ui-slider__controls .ui-btn:disabled > * { opacity: 1; }

/* лента: вылезает за контейнер до края экрана, слайды 890 (карточка) */
.ui-slider__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  padding-bottom: 4px;
}
.ui-slider__track::-webkit-scrollbar { display: none; }
.ui-slider__slide {
  display: flex;                         /* карточка растягивается на высоту ряда — все слайды одной высоты */
  /* Ширина от ленты (контейнер + 2 гаттера), а не от 100vw: 100vw включает полосу прокрутки,
     и на Windows два слайда по 890 вылезали за сетку на её ширину (15px) */
  flex: 0 0 min(var(--slide-w, 890px), calc((100% - (var(--slides, 1) - 1) * 20px) / var(--slides, 1)));   /* 100% здесь — контентная ширина ленты = ширина контейнера */
  scroll-snap-align: start;
}
/* Две карточки в ряд — только когда контейнер их вмещает (1800 = 2×890 + 20); на 1280–1799 одна карточка 890 */
@media (min-width: 1800px) { .ui-slider__slide { --slides: 2; } }
.ui-slider__slide > .ui-card { flex: 1 1 auto; }

@media (max-width: 1279px) {
  .ui-slider__head { margin-bottom: 48px; }
  .ui-slider__slide { --slide-w: 720px; --slides: 1; }
  .ui-slider__controls { display: none; }   /* на планшете и ниже вместо стрелок — полоса прогресса */
}
@media (max-width: 767px) {
  .ui-slider__head { margin-bottom: 32px; }
  .ui-slider__slide { --slide-w: 328px; }
}

/* Точечную пагинацию заменила полоса прогресса (.ui-swipe) */
.ui-slider .ui-pagination { display: none; }

/* =========================================================
   Сегментная пагинация свайп-ленты (макет Tablet/Mobile: «— · · ·»). Добавляется
   скриптом (UI.swipe) после каждой ленты — по чёрточке на карточку, активная длиннее;
   показывается только там, где лента реально не влезает по ширине.
   ========================================================= */
.ui-swipe { display: none; }
@media (max-width: 1279px) {
  .ui-swipe {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 24px;
    cursor: pointer;
  }
  .ui-swipe i {
    display: block;
    width: 8px; height: 3px;
    border-radius: 2px;
    background: var(--c-beige);          /* неактивная — трек */
    transition: width var(--t-fast), background-color var(--t-fast);
  }
  .ui-swipe i.is-active { width: 24px; background: var(--c-beige-dark); }
}

/* ссылка «Ко всем статьям» под лентой */
.ui-slider__all { display: flex; justify-content: center; margin-top: 40px; }   /* макет 1920: карточки 7916–8376, кнопка 8411 → 35 */
@media (max-width: 1279px) { .ui-slider__all { margin-top: 48px; } }
@media (max-width: 767px) { .ui-slider__all { margin-top: 32px; } .ui-slider__all .ui-btn { min-width: 216px; font-size: 16px; } }

/* End */


/* Start:/local/templates/MODELAKS/ui/css/04-pages/404.css?17920703262019*/
/* =========================================================
   404 — Figma: ✅ 404 (Desktop 1920 / Tablet 768 / Mobile 360)
   Геометрия из макета:
   Desktop: content 806 · title pt 100 · «404» 618×200 (mt 60) ·
            текст 586 (mt 60) · кнопка 240×56 (mt 40)
   Tablet:  content 658 · pt 80 · «404» 494×160 (mt 48) · текст mt 48 · кнопка mt 40
   Mobile:  content 544 · pt 60 · «404» 254×82 (mt 40) · текст 328 (mt 40) · кнопка 168×48 (mt 32)
   ========================================================= */

.ui-404 {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: calc(var(--header-h) + 100px);
  padding-bottom: 100px;
}
.ui-404__title {
  max-width: 1000px;            /* в макете заголовок в две строки */
  margin-inline: auto;
}
.ui-404__figure {
  width: 618px;                 /* макет: «4 0 4» одной картинкой 618×200 (экспорт из Figma, @2x 1236×400) */
  height: 200px;
  margin-top: 60px;
}
.ui-404__figure img { display: block; width: 100%; height: 100%; }

.ui-404__text {
  max-width: 586px;
  margin-top: 60px;
  color: var(--c-dark);
}
.ui-404__action { margin-top: 40px; }
.ui-404__action .ui-btn { min-width: 240px; }

@media (max-width: 1279px) {
  .ui-404__title { max-width: none; }
  .ui-404 { padding-top: calc(var(--header-h) + 80px); padding-bottom: 60px; }
  .ui-404__figure { width: 494px; height: 160px; margin-top: 48px; }
  .ui-404__text { margin-top: 48px; }
}

@media (max-width: 767px) {
  .ui-404 { padding-top: calc(var(--header-h) + 60px); padding-bottom: 40px; }
  .ui-404__title { max-width: 328px; }
  .ui-404__figure { width: 254px; height: 82px; margin-top: 40px; }
  .ui-404__text { margin-top: 40px; max-width: 328px; }
  .ui-404__action { margin-top: 32px; }
  .ui-404__action .ui-btn { min-width: 168px; font-size: 16px; }   /* макет Mobile: 16px */
}

/* End */


/* Start:/local/templates/MODELAKS/ui/css/04-pages/instruction.css?17920703269557*/
/* =========================================================
   Инструкция — Figma: Desktop | Instruction (+ Scroll), Tablet, Mobile
   Desktop 1920: хиро 0–520 (градиент беж, скругление снизу 40), крошки y138,
   H1 56 две строки, кнопка «Скачать» 56, факты 2×2 (x 818 / 1348);
   контент: сайдбар 435 | gap 323 | текст 1042; чипы 435×56 gap 12;
   карточка рисунка 697 wide, radius 24, белая.
   Tablet 768 / Mobile 360: хиро стопкой, чипы — горизонтальный скролл,
   прилипают под фиксированной шапкой (блок шапка+чипы: bg page, radius 0 0 40 40).
   ========================================================= */

/* ---------- Хиро ---------- */
.ui-instruction__hero {
  position: relative;
  padding-top: calc(var(--header-h) + 50px);
  padding-bottom: 60px;              /* макет: после кнопки «Скачать» 60 */
  background: linear-gradient(118deg, #F6F0E7 0%, var(--c-beige) 55%, #EEE3D4 100%);
  border-radius: 0 0 var(--r-section) var(--r-section);
}
.ui-instruction__hero .ui-breadcrumbs { margin-bottom: 80px; }   /* макет: крошки → H1 80 */
.ui-instruction__hero-grid {
  display: grid;
  /* правая колонка = ширина текстовой колонки ниже (1042), факты начинаются с x=818 как в макете */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1042px);
  column-gap: 40px;
  align-items: start;
}
.ui-instruction__title { max-width: 560px; }
.ui-instruction__download { margin-top: 40px; }

.ui-instruction__facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 40px;
  padding-top: 8px;
}
.ui-instruction__fact-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--c-grey);
}
.ui-instruction__fact-value {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--c-dark);
}

/* ---------- Тело: сайдбар + текст ---------- */
.ui-instruction__body {
  display: grid;
  grid-template-columns: minmax(280px, 435px) minmax(0, 1fr);
  column-gap: clamp(60px, 16.8vw, 323px);
  padding-top: 60px;
  padding-bottom: 120px;
}

.ui-instruction__aside { position: relative; }
.ui-instruction__nav {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.ui-instruction__nav-label {
  display: block;
  margin-bottom: 20px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--c-grey);
}
.ui-instruction__chips {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Чип-навигация: на всю ширину сайдбара, текст слева */
.ui-chip--nav {
  width: 100%;
  justify-content: flex-start;
  padding: 12px 28px;
  text-align: left;
  white-space: normal;
}
.ui-chip--nav > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Кнопка «Скачать инструкцию», липнущая внизу после первого экрана (desktop) */
.ui-instruction__sticky-download {
  position: fixed;
  z-index: 120;
  left: var(--gutter);
  bottom: var(--gutter);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--t-base), transform var(--t-base), visibility 0s linear var(--t-base), bottom var(--t-base);
}
.ui-instruction__sticky-download.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--t-base), transform var(--t-base), bottom var(--t-base);
}
body.ui-has-disclaimer .ui-instruction__sticky-download { bottom: calc(var(--gutter) + var(--disclaimer-h, 64px)); }

/* ---------- Контент ---------- */
.ui-instruction__content { min-width: 0; }
.ui-instruction__section + .ui-instruction__section { margin-top: 48px; }
.ui-instruction__section {
  /* якорь останавливается под фиксированной шапкой */
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.ui-instruction__section-title { margin-bottom: 24px; }

/* Типографика текста инструкции (DETAIL_TEXT из инфоблока) */
.ui-instruction__text {
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--c-dark);
}
.ui-instruction__text > * + * { margin-top: 12px; }
.ui-instruction__text p + p { margin-top: 12px; }
.ui-instruction__text b, .ui-instruction__text strong { font-weight: var(--fw-semibold); }
.ui-instruction__text h3, .ui-instruction__text h4 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin-top: 24px;
}
.ui-instruction__text ul, .ui-instruction__text ol { padding-left: 0; }
.ui-instruction__text ul li {
  position: relative;
  padding-left: 26px;
}
.ui-instruction__text ul li::before {
  content: '';
  position: absolute;
  left: 10px; top: .62em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.ui-instruction__text ul li + li, .ui-instruction__text ol li + li { margin-top: 6px; }
.ui-instruction__text ol { counter-reset: li; }
.ui-instruction__text ol li { position: relative; padding-left: 26px; counter-increment: li; }
.ui-instruction__text ol li::before { content: counter(li) '.'; position: absolute; left: 0; }
.ui-instruction__text a { color: var(--c-green-dark); text-decoration: underline; text-underline-offset: .15em; }
.ui-instruction__text a:hover { color: var(--c-green); }
/* Рисунки: белая карточка со скруглением */
.ui-instruction__text img {
  display: block;
  width: 100%;
  max-width: 697px;
  height: auto;
  margin: 12px 0 20px;
  padding: 40px;
  background: var(--c-white);
  border-radius: 24px;
}
.ui-instruction__text figure { margin: 24px 0; }
.ui-instruction__text figcaption { font-size: var(--fs-xs); color: var(--c-grey); }
.ui-instruction__text table { width: 100%; border-collapse: collapse; }
.ui-instruction__text td, .ui-instruction__text th { padding: 12px 16px; border-bottom: 1px solid var(--c-beige-dark); text-align: left; vertical-align: top; }
.ui-instruction__table-wrap { overflow-x: auto; }

/* ---------- Laptop (1280–1599): правая колонка фактов не шире 60%, заголовку остаётся место ---------- */
@media (min-width: 1280px) and (max-width: 1599px) {
  .ui-instruction__hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 58%); }
}

/* ---------- Tablet ---------- */
@media (max-width: 1279px) {
  .ui-instruction__hero { padding-top: calc(var(--header-h) + 20px); padding-bottom: 60px; }
  .ui-instruction__hero .ui-breadcrumbs { margin-bottom: 48px; }
  .ui-instruction__hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .ui-instruction__title { max-width: none; }
  .ui-instruction__download { margin-top: 32px; }
  .ui-instruction__facts { padding-top: 0; gap: 32px 20px; }
  .ui-instruction__fact-value { font-size: var(--fs-lg); }

  .ui-instruction__body {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 40px;
    padding-top: 48px;
    padding-bottom: 80px;
  }
  /* Чипы прилипают под фиксированной шапкой.
     aside → display:contents, иначе sticky считается от своей строки грида */
  .ui-instruction__aside { display: contents; }
  .ui-instruction__nav {
    position: sticky;
    top: calc(var(--header-h) + 8px);
    z-index: 90;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 16px;
    background: var(--bg-page);
    border-radius: 0 0 var(--r-section) var(--r-section);
  }
  .ui-instruction__nav.is-stuck .ui-instruction__nav-label { display: none; }
  .ui-instruction__nav-label { margin-bottom: 16px; }
  .ui-instruction__chips {
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .ui-instruction__chips::-webkit-scrollbar { display: none; }
  .ui-chip--nav { width: auto; flex: 0 0 auto; scroll-snap-align: start; padding-inline: 32px; }
  .ui-instruction__sticky-download { display: none; }
  .ui-instruction__section { scroll-margin-top: calc(var(--header-h) + 88px); }
  .ui-instruction__section + .ui-instruction__section { margin-top: 40px; }
  .ui-instruction__text img { padding: 32px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .ui-instruction__hero { padding-top: calc(var(--header-h) + 16px); padding-bottom: 40px; }
  .ui-instruction__hero .ui-breadcrumbs { margin-bottom: 32px; }
  .ui-instruction__hero-grid { row-gap: 40px; }
  .ui-instruction__download { margin-top: 32px; }
  .ui-instruction__download .ui-btn { display: flex; width: 100%; font-size: 16px; }   /* макет Mobile: 16px, не 14 из кита */
  .ui-instruction__facts { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ui-instruction__body { padding-top: 32px; padding-bottom: 60px; row-gap: 32px; }
  .ui-instruction__nav { padding-bottom: 12px; }
  .ui-chip--nav { padding-inline: 24px; }
  .ui-instruction__section { scroll-margin-top: calc(var(--header-h) + 76px); }
  .ui-instruction__section + .ui-instruction__section { margin-top: 32px; }
  .ui-instruction__section-title { margin-bottom: 16px; }
  .ui-instruction__text img { padding: 20px; border-radius: 16px; }
}

/* End */


/* Start:/local/templates/MODELAKS/ui/css/04-pages/articles.css?179207032615792*/
/* =========================================================
   Статьи — Figma: Desktop/Tablet/Mobile | News (список),
   News | Детальная (+ Поделиться, Содержание на мобиле), Сниппеты.
   ========================================================= */

/* ---------- Шапка внутренней страницы: крошки + H1 ---------- */
.ui-page-head {
  padding-top: calc(var(--header-h) + 50px);
}
.ui-page-head .ui-breadcrumbs { margin-bottom: 60px; }
.ui-page-head__title { margin-bottom: 60px; }

@media (max-width: 1279px) {
  .ui-page-head { padding-top: calc(var(--header-h) + 20px); }
  .ui-page-head .ui-breadcrumbs { margin-bottom: 40px; }   /* макет Tablet: крошки → H1 40 */
  .ui-page-head__title { margin-bottom: 48px; }
}
@media (max-width: 767px) {
  .ui-page-head { padding-top: calc(var(--header-h) + 16px); }
  .ui-page-head .ui-breadcrumbs { margin-bottom: 32px; }
  .ui-page-head__title { margin-bottom: 32px; }
}

/* ---------- Список статей ---------- */
.ui-articles { padding-bottom: 120px; }
.ui-articles__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.ui-articles__empty { color: var(--c-grey); }
/* «сторож» бесконечной подгрузки (ТЗ: по 10 при скролле) */
.ui-articles__more {
  display: flex;
  justify-content: center;
  padding-top: 40px;
  min-height: 1px;
}
.ui-articles__more.is-loading .ui-btn { pointer-events: none; opacity: .6; }

@media (max-width: 1279px) {
  .ui-articles { padding-bottom: 80px; }
  .ui-articles__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .ui-articles { padding-bottom: 60px; }
  .ui-articles__grid { gap: 16px; }
}

/* ---------- Детальная ---------- */
.ui-article {
  display: grid;
  /* макет 1920: 435 | 172 | 890; на 1280–1919 колонки и зазор сжимаются */
  grid-template-columns: minmax(280px, 435px) minmax(0, 890px);
  column-gap: clamp(40px, 9vw, 172px);
  padding-bottom: 100px;
}
.ui-article__aside { position: relative; }
.ui-article__toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.ui-article__toc-label {
  display: block;
  margin-bottom: 20px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--c-grey);
}
.ui-article__toc-list { display: flex; flex-direction: column; gap: 12px; }
.ui-article__toc-toggle, .ui-article__toc-close, .ui-article__toc-head { display: none; }

.ui-article__main { min-width: 0; }
.ui-article__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--c-grey);
}
.ui-article__share {
  position: relative;
  display: inline-flex;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  margin: -10px -10px -10px 0;
  border-radius: 50%;
  color: var(--c-dark);
  transition: color var(--t-fast), background-color var(--t-fast);
}
.ui-article__share:hover { color: var(--c-green-dark); background: var(--c-green-16); }
/* тост «Ссылка скопирована» */
.ui-article__toast {
  position: absolute;
  right: 0; top: calc(100% + 8px);
  padding: 20px 32px;
  border-radius: 12px;
  background: var(--c-beige-dark);
  color: var(--c-dark);
  font-size: var(--fs-lg);
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s linear var(--t-fast);
}
.ui-article__toast.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-fast), transform var(--t-fast); }

.ui-article__title { margin-bottom: 60px; }
.ui-article__cover {
  display: block;
  width: 100%;
  aspect-ratio: 890 / 618;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 60px;
  background: var(--c-beige);
}
.ui-article__cover img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Контент статьи (DETAIL_TEXT + сниппеты) ---------- */
.ui-article__content {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  color: var(--c-dark);
}
.ui-article__content > * + * { margin-top: 20px; }
.ui-article__content h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-medium);
  margin-top: 60px;
  margin-bottom: 24px;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.ui-article__content h3 {
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  font-weight: var(--fw-medium);
  margin-top: 40px;
}
.ui-article__content h2 + *, .ui-article__content h3 + * { margin-top: 20px; }
.ui-article__content b, .ui-article__content strong { font-weight: var(--fw-semibold); }
.ui-article__content a { color: var(--c-green-dark); text-decoration: underline; text-underline-offset: .15em; }
.ui-article__content a:hover { color: var(--c-green); }

/* Списки */
.ui-article__content ul, .ui-article__content ol { padding-left: 0; font-size: var(--fs-md); line-height: var(--lh-md); }
.ui-article__content li { position: relative; padding-left: 26px; }
.ui-article__content li + li { margin-top: 8px; }
.ui-article__content ul li::before { content: ''; position: absolute; left: 10px; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.ui-article__content ol { counter-reset: li; }
.ui-article__content ol li { counter-increment: li; }
.ui-article__content ol li::before { content: counter(li) '.'; position: absolute; left: 0; }

/* Цитата / сноска: линия слева */
.ui-article__content blockquote, .ui-quote {
  margin: 20px 0;
  padding-left: 24px;
  border-left: 2px solid var(--c-green);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}

/* Тег/шильдик */
.ui-article__content .ui-badge { background: var(--c-beige); }
.ui-article__content .ui-badge.ui-snippet-badge { background: var(--c-white); }

/* Изображения: одно и пара */
.ui-article__content img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}
.ui-article__content figure { margin: 40px 0; }
.ui-article__content figcaption { margin-top: 12px; font-size: var(--fs-xs); color: var(--c-grey); }
.ui-images-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 40px 0; }
.ui-images-2 img { aspect-ratio: 435 / 320; object-fit: cover; }

/* Выделение текста: беж / зелёный блок, с картинкой слева/справа */
.ui-note {
  margin: 40px 0;
  padding: 32px;
  border-radius: 24px;
  background: var(--c-beige);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}
.ui-note--green { background: var(--c-green-16); }
.ui-note__title { font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: var(--fw-medium); margin-bottom: 16px; }
.ui-note__title + * { margin-top: 0; }
.ui-note--img { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: stretch; }
.ui-note--img-right { grid-template-columns: minmax(0, 1fr) 200px; }
.ui-note--img > img { width: 200px; height: 100%; min-height: 240px; object-fit: cover; border-radius: 16px; margin: 0; }
.ui-note--img-right > img { order: 2; }
.ui-note__body { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }

/* Карточки (плитка 2×N): номер-бейдж или заголовок + текст */
.ui-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 40px 0;
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}
.ui-tile {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 200px;
  padding: 32px;
  border-radius: 24px;
  background: var(--c-beige);
}
.ui-tile--green { background: var(--c-green-16); }
.ui-tile--bottom { justify-content: flex-end; }
.ui-article__content .ui-tile__num {
    background: var(--c-white);
}
.ui-tile__num { align-self: flex-start; }        /* .ui-badge.ui-badge--sm */
.ui-tile__title { font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: var(--fw-medium); }
.ui-tile__text { margin-top: auto; }
/* Двойной класс: иначе padding из медиазапросов ниже (.ui-tile { padding }) перебьёт обнуление */
.ui-tile.ui-tile--img { padding: 0; overflow: hidden; background: var(--c-beige-dark); }
.ui-tile--img img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; border-radius: 24px; }

/* Карточка только с текстом */
.ui-tile--text .ui-tile__text {
    margin-top: 0;
}

/* Компактная карточка */
.ui-tile--compact {
    min-height: 96px;
    justify-content: center;
    gap: 0;
}

.ui-tile--compact .ui-tile__text {
    margin-top: 0;
}

/* Карточка с текстом и изображением внутри */
.ui-tile--with-image {
    padding-bottom: 16px;
}

.ui-tile--with-image .ui-tile__text {
    margin-top: 0;
}

.ui-tile__image {
    margin: auto -16px 0;
    overflow: hidden;
    border-radius: 16px;
}

.ui-tile__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 371 / 200;
    object-fit: cover;
    border-radius: 16px;
}

/* Список источников (аккордеон) */
.ui-sources {
  margin: 40px 0;
  padding: 32px;
  border-radius: 24px;
  background: var(--c-beige);
}
.ui-sources__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  font-weight: var(--fw-medium);
  color: var(--c-dark);
  text-align: left;
}
.ui-sources__toggle .ui-btn { --btn-gap: 0; flex: 0 0 auto; }
.ui-sources__toggle .ui-icon { transition: transform var(--t-base); }
.ui-sources__toggle[aria-expanded="true"] .ui-icon { transform: rotate(180deg); }
.ui-sources__body {
  display: none;
  margin-top: 24px;
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}
.ui-sources__body.is-open { display: block; }
.ui-sources__body ol { counter-reset: li; }
.ui-sources__body ol li { position: relative; padding-left: 26px; counter-increment: li; }
.ui-sources__body ol li + li { margin-top: 8px; }
.ui-sources__body ol li::before { content: counter(li) '.'; position: absolute; left: 0; }

/* ---------- «Читайте также» ---------- */
.ui-article-related { padding-bottom: 120px; }
.ui-article-related .ui-slider__head .ui-h2 { margin: 0; }

/* ---------- Tablet ---------- */
@media (max-width: 1279px) {
  .ui-article { grid-template-columns: minmax(0, 1fr); column-gap: 0; padding-bottom: 80px; }
  .ui-article__aside { display: contents; }
  .ui-article__toc { position: static; margin-bottom: 40px; }
  .ui-article__toc-list { flex-direction: row; flex-wrap: wrap; }
  .ui-article__title { margin-bottom: 40px; }
  .ui-article__cover { margin-bottom: 40px; }
  .ui-article__content h2 { margin-top: 48px; scroll-margin-top: calc(var(--header-h) + 24px); }
  .ui-article-related { padding-bottom: 80px; }
}

/* ---------- Mobile: содержание — шторка снизу ---------- */
@media (max-width: 767px) {
  .ui-article { padding-bottom: 60px; }
  .ui-article__title { margin-bottom: 32px; }
  .ui-article__cover { margin-bottom: 32px; border-radius: 16px; }
  .ui-article__content { font-size: var(--fs-lg); }
  .ui-article__content h2 { margin-top: 40px; margin-bottom: 16px; }
  .ui-article__content img, .ui-article__cover { border-radius: 16px; }
  .ui-images-2 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ui-note { padding: 20px; border-radius: 16px; }
  .ui-note--img, .ui-note--img-right { grid-template-columns: minmax(0, 1fr); }
  .ui-note--img > img { width: 100%; height: 200px; min-height: 0; order: 0; }
  .ui-tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ui-tile { padding: 20px; min-height: 0; border-radius: 16px; }
    .ui-tile--compact {
        min-height: 72px;
    }

    .ui-tile--with-image {
        padding-bottom: 12px;
    }

    .ui-tile__image {
        margin-left: -8px;
        margin-right: -8px;
        border-radius: 12px;
    }

    .ui-tile__image img {
        border-radius: 12px;
    }
  .ui-sources { padding: 20px; border-radius: 16px; }
  .ui-article__toast { font-size: var(--fs-md); padding: 14px 20px; }

  /* Кнопка «Содержание статьи ···» — закреплена внизу; шторка — оверлей */
  .ui-article__toc-label { display: none; }
  .ui-article__toc-toggle {
    position: fixed;
    z-index: 140;
    left: var(--gutter); right: var(--gutter); bottom: var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 56px;
    padding: 12px 24px;
    border-radius: var(--r-pill);
    background: var(--c-white);
    color: var(--c-dark);
    font-size: var(--fs-item);
    box-shadow: 0 8px 24px rgba(37, 62, 59, .12);
  }
  body.ui-has-disclaimer .ui-article__toc-toggle { bottom: calc(var(--gutter) + var(--disclaimer-h, 64px)); }
  .ui-article__toc {
    position: fixed;
    z-index: 210;
    inset: 0;
    margin: 0;
    padding: 0;
    background: rgba(87, 153, 64, .35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: none;
  }
  .ui-article__toc.is-open { display: block; }
  .ui-article__toc-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 32px var(--gutter) 40px;
    border-radius: 24px 24px 0 0;
    background: var(--c-beige-light);
    max-height: 80vh;
    overflow-y: auto;
  }
  .ui-article__toc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
  .ui-article__toc-head .ui-h3 { margin: 0; }
  .ui-article__toc-close { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--c-dark); }
  .ui-article__toc-list { flex-direction: column; gap: 0; }
  .ui-article__toc-list .ui-chip { background: none; padding: 12px 0; height: auto; border-radius: 0; justify-content: flex-start; font-size: var(--fs-item); }
  .ui-article__toc-list .ui-chip::before { display: none; }
  body.ui-toc-open { overflow: hidden; }
}

/* DEMO: временный блок (inc/articles/_demo.php). Удалить вместе с ним */
.ui-demo {
  margin-top: 120px;
  padding: 32px;
  border: 2px dashed var(--c-grey);
  border-radius: 32px;
}
.ui-demo__label {
  margin-bottom: 32px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--c-orange);
  color: var(--c-white);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}
.ui-demo__title { margin-top: 40px; font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: var(--fw-medium); }
.ui-demo__title:first-of-type { margin-top: 0; }
.ui-demo__title code { font-family: monospace; font-size: .9em; }
.ui-demo__note { margin-top: 8px; font-size: var(--fs-md); line-height: var(--lh-md); color: var(--c-grey); }
.ui-demo__grid { margin-top: 24px; }
.ui-demo__grid .ui-card__media { display: block; }
.ui-demo__prose { margin-top: 24px; }
.ui-demo .ui-sources { margin-top: 24px; }

.ui-demo__article { max-width: 890px; margin-top: 24px; }
.ui-demo__code { margin-top: 40px; }
.ui-demo__code pre {
  margin: 0;
  max-height: 420px;
  overflow: auto;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre;
  tab-size: 2;
}

@media (max-width: 767px) {
  .ui-demo { margin-top: 56px; padding: 20px; border-radius: 24px; }
  .ui-demo__code pre { font-size: 11px; }
}
.ui-demo__link { margin-top: 40px; }
.ui-demo__link + .ui-btn { margin-top: 16px; }

/* End */


/* Start:/local/templates/MODELAKS/ui/css/04-pages/stores.css?17920703261729*/
/* =========================================================
   Где купить — Figma: Desktop/Tablet/Mobile | Stores; UI-KIT: Pharm store Card
   Desktop: интро Lg (max ~870), сетка 4 × 435×160, gap 20, radius 24, фон Green-16
   Tablet: 2 × 350×160, gap 16 · Mobile: 1 × 328×140, gap 16
   ========================================================= */
.ui-stores { padding-bottom: 120px; }
.ui-stores__intro {
  max-width: 870px;
  margin: -20px 0 64px;          /* заголовок .ui-page-head__title даёт 60, в макете до текста ~40 */
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  color: var(--c-dark);
}
.ui-stores__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.ui-store {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  padding: 24px 40px;
  border-radius: 24px;
  background: var(--c-green-16);
  transition: background-color var(--t-base), transform var(--t-base);
}
.ui-store:hover { background: rgba(87, 153, 64, .24); transform: translateY(-2px); }
.ui-store img {
  max-width: min(100%, 260px);
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 1279px) {
  .ui-stores { padding-bottom: 80px; }
  .ui-stores__intro { margin-bottom: 48px; }
  .ui-stores__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ui-store { padding: 24px 32px; }
}
@media (max-width: 767px) {
  .ui-stores { padding-bottom: 60px; }
  .ui-stores__intro { margin: -8px 0 40px; }
  .ui-stores__grid { grid-template-columns: minmax(0, 1fr); }
  .ui-store { height: 140px; padding: 20px 32px; }
  .ui-store img { max-height: 48px; }
}

/* End */


/* Start:/local/templates/MODELAKS/ui/css/04-pages/home.css?179207032645601*/
/* =========================================================
   Главная — Figma: Desktop/Tablet/Mobile | Главная (+ Дисклеймер, Меню), FAQ | Ответы
   Секции (desktop css, y): хиро 0–960 · линейка 1104–1936 · две формы 2064–2528 ·
   преимущества 2656–3728 (parallax «под») · когда применять 3888–5064 ·
   способ применения 5240–5900 · механизм 5968–7048 (parallax «под») ·
   где купить 7224–7600 · полезно знать 7776–8500 · FAQ 8608–9744 (reveal) · футер.
   Параллакс: sticky-секции с z-index ниже соседей; только ≥1280.
   ========================================================= */

/* ---------- общие для главной ---------- */
.ui-home .ui-section { position: relative; z-index: 2; background: var(--bg-page); }
.ui-home__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(560px, 46.5vw, 894px));
  column-gap: 40px;
  align-items: start;
  margin-bottom: var(--sp-head);
}
.ui-home__head .ui-h2 { max-width: 560px; }
.ui-home__lead { font-size: var(--fs-lg); line-height: var(--lh-lg); }
.ui-home .ui-h2--light, .ui-home .ui-h2--light + .ui-home__lead { color: var(--c-beige-light); }

/* ---------- Хиро-слайдер ---------- */
.ui-hero {
  position: relative;
  z-index: 2;
  min-height: 760px;
  height: clamp(760px, 50vw, 960px);
  border-radius: 0 0 var(--r-section) var(--r-section);
  overflow: hidden;
  background: linear-gradient(160deg, #3F6829 0%, #4E8033 45%, #5C9543 100%);
  color: var(--c-beige-light);
}
.ui-hero__slides { position: absolute; inset: 0; }
/* KV: один кадр на всю площадь хиро, текст поверх */
.ui-hero__kv { position: absolute; inset: 0; }
.ui-hero__kv img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ui-hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.ui-hero__slide.is-active { opacity: 1; pointer-events: auto; }
.ui-hero__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: var(--header-h);
  padding-bottom: 64px;
}
.ui-hero__text {
  position: absolute;
  top: min(32.5%, calc(100% - 610px));   /* 312 на 960; на низком хиро поднимается над плашками */
  /* У абсолютного блока margin: auto не центрирует — прижимаем к левому краю контейнера вручную.
     При left: 0 на экранах шире контейнера текст уезжал к краю экрана, а не к колонке контента. */
  left: max(0px, calc((100% - var(--container)) / 2));
  max-width: 820px;                      /* .ui-container: 60 + 700 текста + 60 — подзаголовок в одну строку, как в макете */
}
.ui-hero__title { max-width: 560px; }
.ui-hero__title { color: var(--c-beige-light); }   /* вес H1 — SemiBold из токена */
.ui-hero__subtitle { margin-top: 24px; font-size: var(--fs-xl); line-height: var(--lh-lg); }

/* плашки-факты: иконка выезжает над верхним краем карточки */
.ui-hero__facts {
  display: flex;
  gap: 24px;
  margin-top: auto;
}
.ui-hero__fact {
  position: relative;
  width: clamp(280px, 18.5vw, 356px);   /* 356 на 1920, уже — на промежуточных ширинах */
  min-height: 132px;
  padding: 48px 24px 28px;
  border-radius: 24px;
  background: var(--c-green-glass);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
}
.ui-hero__fact img {
  position: absolute;
  top: -40px; left: 10px;
  width: 120px; height: auto;
}
/* пагинация «01 ——— 02» */
.ui-hero__pager {
  position: absolute;
  right: var(--gutter);
  bottom: 64px;
  display: flex;
  gap: 2px;
  width: 890px;
  max-width: calc(50% - 40px);
}
.ui-hero__dot {
  flex: 1 1 0;
  padding: 0;
  text-align: left;
  color: var(--c-beige-light);
  font-size: var(--fs-xs);
  line-height: 1.4;
  letter-spacing: var(--ls);
}
.ui-hero__dot:last-child { text-align: right; }
.ui-hero__dot i {
  display: block;
  height: 2px;
  margin-top: 5px;
  background: var(--c-green-track);
  overflow: hidden;
}
.ui-hero__dot i::after {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  background: var(--c-beige-light);
  transform: scaleX(0);
  transform-origin: left;
}
.ui-hero__dot.is-active i::after { animation: ui-hero-progress var(--hero-delay, 5s) linear forwards; }
.ui-hero__pager:hover .ui-hero__dot.is-active i::after { animation-play-state: paused; }
@keyframes ui-hero-progress { to { transform: scaleX(1); } }

/* ---------- Линейка препаратов ---------- */
.ui-products { padding-top: var(--sp-section); padding-bottom: var(--sp-section); }
/* Подводка без заголовка — во всю ширину, крупнее обычной */
.ui-products__lead { font-size: var(--fs-xl); line-height: var(--lh-lg); margin-bottom: var(--sp-head); }
.ui-products__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-gap);
  margin-top: var(--sp-head);
  padding-top: 144px;             /* место под выезжающие вверх упаковки */
}
.ui-product {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 464px;
  padding: var(--sp-tile);
  --r-card: 40px;
  border-radius: var(--r-card);
  background: var(--c-green-16);
}
.ui-product--kids { background: var(--c-beige); }
/* Упаковки: размер задан ВЫСОТОЙ — оба кропа одной высоты (671 в 2x), поэтому коробки
   выходят в одном масштабе и стоят на общей базовой линии. Ширина у детской больше:
   в кадр входят шарик и паровозики. */
.ui-product__img {
  position: absolute;
  left: var(--pack-left, 220px);
  bottom: var(--pack-bottom, 271px);
  height: var(--pack-h, 331px);
  width: auto;
  max-width: none;
  pointer-events: none;
}
.ui-product--kids { --pack-left: 72px; }   /* в детском кадре слева паровозики, коробка правее */
/* Свечение у верхнего края карточки: нижняя половина эллипса 810×382 из макета,
   плоский край лежит на ВЕРХНЕМ крае карточки. Полукруг + blur, а не радиальный
   градиент: у градиента нет ровной кромки, а SVG из Figma выгрузился с stdDeviation="0".
   Цвета из тех же SVG: зелёный #579940, оранжевый #F4AB22.
   clip-path режет размытие по контуру карточки — overflow: hidden тут нельзя,
   упаковка сознательно выходит за верхний край. */
.ui-product::before {
  content: '';
  position: absolute; z-index: 0;
  inset: 0 0 auto 0;
  height: 191px;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: rgba(87, 153, 64, .20);
  filter: blur(40px);
  clip-path: inset(0 0 -140px 0 round var(--r-card) var(--r-card) 0 0);
  pointer-events: none;
}
.ui-product--kids::before { background: rgba(244, 171, 34, .24); }
.ui-product > *:not(img) { position: relative; z-index: 1; }   /* контент поверх свечения; упаковка исключена — у неё своё absolute */
/* .ui-product впереди селектора — иначе `.ui-product > *:not(img)` выше по специфичности и вернёт relative */
.ui-product .ui-product__packs {
  position: absolute;
  z-index: 2;
  right: 40px; top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;      /* бейджи одной ширины */
}
.ui-product__packs .ui-badge { justify-content: center; min-width: 72px; }
.ui-product__age {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; align-items: center;
  height: 40px; padding: 10px 20px;
  border-radius: var(--r-pill);
  background: var(--c-green-light);
  color: var(--c-white);
  font-size: var(--fs-badge); font-weight: var(--fw-semibold); line-height: 1.4; letter-spacing: var(--ls); text-transform: uppercase;
}
.ui-product--kids .ui-product__age { background: var(--c-orange); }
.ui-product__name { margin-top: 20px; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); }   /* H3 Medium; без явного веса h3 берёт bold браузера */
.ui-product__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 12px; }
.ui-product__desc { font-size: var(--fs-lg); line-height: var(--lh-lg); max-width: 420px; }
.ui-product__row .ui-btn { min-width: 200px; }

/* ---------- Две формы — одно действие ---------- */
.ui-forms { padding-bottom: 100px; }
.ui-forms__card {
  position: relative;
  min-height: 464px;
  padding: var(--sp-tile);
  border-radius: 40px;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;   /* текст прижат к низу карточки (макет: низ лида в 40 от края) */
  /* Задник карточки — ассет из макета (1800×460 в 2x), под ним заливка на случай незагрузки */
  background: url('/local/templates/MODELAKS/ui/css/04-pages/../../img/home/forms-bg.webp') center / cover no-repeat, linear-gradient(100deg, #5C9543 0%, #4C8038 100%);
  color: var(--c-beige-light);
}
/* Иллюстрация наконечников: ассет ровно в половину карточки и в её высоту, поэтому
   ставим натуральным размером у правого края. Ни cover, ни маски — в ассете своя альфа. */
.ui-forms__bg {
  position: absolute; right: 0; top: 0;
  height: 100%; width: auto;
}
.ui-forms__body { position: relative; max-width: 640px; }
.ui-forms__title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-medium); color: var(--c-beige-light); }
.ui-forms__text { margin-top: 24px; font-size: var(--fs-xl); line-height: var(--lh-lg); }
.ui-forms__mobile, .ui-forms__fig { display: none; }

/* ---------- Преимущества (parallax «под») ---------- */
.ui-advantages {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--r-section) + var(--sp-section));   /* беж-шапка (наплыв) + отступ секции */
  padding-bottom: var(--sp-section);
  /* Фон: рендер секции из макета (2x) во всю ширину, прижат к верху; ниже — заливка #448625 */
  background: url('/local/templates/MODELAKS/ui/css/04-pages/../../img/home/advantages-bg.webp') top center / 100% auto no-repeat, #448625;
  color: var(--c-beige-light);
}
.ui-advantages::before {          /* скруглённый наплыв предыдущей секции */
  content: '';
  /* на 1px выше верха секции: при дробном положении секции (зум 75%, планшет) между
     фоном предыдущей секции и картинкой фона проступала светлая линия */
  position: absolute; inset: -1px 0 auto 0; height: calc(var(--r-section) + 1px);
  background: var(--bg-page);
  border-radius: 0 0 var(--r-section) var(--r-section);
}
.ui-advantages .ui-h2 { color: var(--c-beige-light); margin-bottom: var(--sp-head); }
.ui-tiles-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
/* Плитка — subgrid на две строки родителя (заголовок / текст): в одном ряду заголовки и тексты
   всех плиток начинаются на одной линии, зона заголовка = самый длинный в ряду (просьба клиента) */
.ui-adv {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  align-content: start;
  row-gap: 32px;
  --tile-h: 296px;               /* минимальная высота плитки: min-height у subgrid-элемента Chromium игнорирует,
                                    поэтому держит её невидимый ::before на все строки */
  padding: var(--sp-tile);
  border-radius: 32px;
  background: var(--c-beige);
  color: var(--c-dark);
}
.ui-adv:not(.ui-adv--photo)::before { content: ''; grid-row: 1 / -1; grid-column: 1; width: 0; min-height: calc(var(--tile-h) - 2 * var(--sp-tile)); }
.ui-adv > * { grid-column: 1; }
.ui-adv__title { grid-row: 1; }
.ui-adv__text { grid-row: 2; }
.ui-adv__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-medium); }
.ui-adv__text { font-size: var(--fs-xl); line-height: var(--lh-lg); }
.ui-adv--orange { background: linear-gradient(160deg, var(--c-orange) 0%, #EC9F0D 100%); color: var(--c-white); }   /* макет: заливка с уходом в тёмный оранжевый к правому низу */
/* .ui-adv.ui-adv--photo — двойной класс специально: у брейкпоинтов .ui-adv { padding } идёт позже и иначе перебивает padding: 0 */
.ui-adv.ui-adv--photo { display: block; padding: 0; overflow: hidden; background: var(--c-beige-dark); }
.ui-adv--photo img { width: 100%; height: 100%; min-height: 296px; object-fit: cover; }

/* ---------- Когда применять ---------- */
.ui-when {
  padding-top: var(--sp-section);
  padding-bottom: var(--sp-section);
  border-radius: var(--r-section) var(--r-section) 0 0;   /* наезжает на секцию «под» */
}
.ui-when .ui-h2 { margin-bottom: var(--sp-head); }
.ui-tiles-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.ui-case {
  display: grid;
  grid-template-rows: subgrid;   /* иконка / заголовок / текст — строки общие для ряда плиток */
  grid-row: span 3;
  align-content: start;
  --tile-h: 520px;
  padding: var(--sp-tile);
  border-radius: 32px;
  background: var(--c-beige);
  color: var(--c-dark);
}
.ui-case:not(.ui-case--photo)::before { content: ''; grid-row: 1 / -1; grid-column: 1; width: 0; min-height: calc(var(--tile-h) - 2 * var(--sp-tile)); }
.ui-case > * { grid-column: 1; }
.ui-case__icon { grid-row: 1; }
.ui-case__title { grid-row: 2; }
.ui-case__text { grid-row: 3; }
.ui-case__icon { width: 80px; height: 80px; object-fit: contain; }   /* без белого круга (баг-лист 16.09, стр. 72); вернуть при желании: padding 8, radius 50%, фон белый */
.ui-case__title { margin-top: 24px; font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: var(--fw-medium); }
.ui-case__text { margin-top: 0; padding-top: 32px; font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--c-grey); }
/* Оранжевая плашка: подложка с завитком (870×1040 = плитка 435×520 в 2x).
   Завиток в левом верхнем углу — отсюда top left. Заливка вторым слоем — фолбэк. */
.ui-case--orange {
  background: url('/local/templates/MODELAKS/ui/css/04-pages/../../img/home/when-bg.webp') top left / cover no-repeat, var(--c-orange);
  color: var(--c-white);
}
.ui-case--orange .ui-case__text { color: var(--c-white); }
/* .ui-case.ui-case--photo — двойной класс по той же причине, что у .ui-adv--photo */
.ui-case.ui-case--photo { display: block; padding: 0; overflow: hidden; background: var(--c-beige-dark); }
.ui-case--photo img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.ui-tiles-4 + .ui-tiles-4 { margin-top: 20px; }

/* ---------- Способ применения ---------- */
.ui-howto { padding-bottom: var(--sp-section); border-radius: 0 0 var(--r-section) var(--r-section); }
.ui-howto .ui-h2 { margin-bottom: var(--sp-head); }
.ui-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ui-step { position: relative; }
.ui-step__img { display: block; width: 100%; aspect-ratio: 435 / 300; object-fit: cover; border-radius: 32px; background: var(--c-green); }
/* Номер шага — чип поверх картинки (в экспортах картинки чистые, номер не запечён) */
.ui-step__num {
  position: absolute; z-index: 1; top: 24px; left: 24px;
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--c-beige-light); color: var(--c-dark);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls);
}
.ui-step__text { margin-top: 32px; max-width: 385px; font-size: var(--fs-lg); line-height: var(--lh-lg); }   /* макет: текст уже картинки (435), переносы как в Figma */

/* ---------- Механизм действия (parallax «под») ---------- */
.ui-mechanism {
  position: relative;
  z-index: 1;
  /* Низ секции — 120px воздуха под карточкой: пока секция залипла, следующая уезжает
     поверх неё, и без этого запаса она срезала последние строки карточки.
     1168 — предел, при котором кадр видео не меняется: cover при 1920 задаётся шириной,
     пока высота бокса <= 1124 * (1920/1840) = 1172. */
  min-height: 1168px;
  padding-top: 400px;
  padding-bottom: 120px;
  margin-top: -40px;              /* заходим под скругление предыдущей секции */
  background: #F6EFE6;
}
/* Видео-фон секции (desktop) */
.ui-mechanism__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ui-mechanism > .ui-container { position: relative; z-index: 1; }
.ui-mechanism__card {
  margin-left: auto;
  width: 890px;
  max-width: 100%;
  min-height: 648px;              /* как в макете: 400–1048 */
  padding: var(--sp-tile);
  border-radius: 40px;
  background: var(--c-beige-light);   /* непрозрачно — поверх видео */
  color: var(--c-dark);
}
.ui-mechanism__title { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-medium); }
.ui-mechanism__lead { margin-top: 56px; font-size: var(--fs-xl); line-height: var(--lh-xl); }
.ui-mechanism__list { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; font-size: var(--fs-lg); line-height: var(--lh-lg); }
.ui-mechanism__list li { position: relative; padding-left: 32px; }
.ui-mechanism__list li::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 24px; height: 24px;
  background: url('/local/templates/MODELAKS/ui/css/04-pages/../../img/home/mechanism-point.webp') 0 0 / 100% 100% no-repeat;
}
.ui-mechanism__list b { font-weight: var(--fw-bold); }
.ui-mechanism__note { margin-top: 32px; font-size: var(--fs-lg); line-height: var(--lh-lg); }

/* ---------- Где купить (главная) ---------- */
.ui-home-stores {
  padding-top: var(--sp-section);
  padding-bottom: var(--sp-section);
  border-radius: var(--r-section) var(--r-section) 0 0;
}
.ui-home-stores__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
    scroll-padding-inline: var(--gutter);
  }
.ui-store-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 192px;
  padding: var(--sp-tile);
  border-radius: 32px;
  background: var(--c-green-16);
  color: var(--c-dark);
  transition: background-color var(--t-base);
}
.ui-store-card:hover { background: rgba(87, 153, 64, .24); }
.ui-store-card img { max-height: 40px; width: auto; max-width: 220px; object-fit: contain; object-position: left; }
.ui-store-card__title { font-size: var(--fs-xl); line-height: var(--lh-xl); }
.ui-store-card__more { align-self: flex-end; }
.ui-store-card__more .ui-btn { --btn-bg: var(--c-white); --btn-bg-hover: var(--c-beige-dark); --btn-color: var(--c-dark); }
.ui-store-card--all { background: var(--c-green); color: var(--c-beige-light); }
.ui-store-card--all:hover { background: var(--c-green-dark); }

/* ---------- Полезно знать ---------- */
.ui-home-articles { padding-bottom: var(--sp-section); }
.ui-home-articles .ui-article-related { padding-bottom: 0; }

/* ---------- Вопросы и ответы (reveal снизу) ---------- */
.ui-faq {
  position: relative;
  z-index: 1;
  padding-top: var(--sp-section);
  padding-bottom: var(--sp-section);
  overflow: hidden;
  /* фон макета: беж с мягким светом справа; пузыри-декор — у CTA-карточки */
  background:
    radial-gradient(ellipse 45% 60% at 75% 45%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, #EFE5D7 0%, #F3ECE2 50%, #F0E7DA 100%);
  color: var(--c-dark);
}
.ui-faq__grid {
  display: grid;
  grid-template-columns: minmax(280px, 435px) minmax(0, 890px);
  justify-content: space-between;
  column-gap: 40px;
}
.ui-faq__aside { display: flex; flex-direction: column; }
.ui-faq__lead { margin-top: var(--sp-head); font-size: var(--fs-xl); line-height: var(--lh-lg); }
.ui-faq__cta {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 244px;
  margin-top: auto;
  padding: 32px;
  border-radius: 32px;
  background: linear-gradient(135deg, #F6B63F 0%, #F2A93A 100%);
  color: var(--c-white);
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
}
.ui-faq__cta .ui-btn { margin-top: auto; min-width: 200px; }
.ui-faq__cta > span { display: block; margin-bottom: 32px; }
/* Декор: большой пузырь в левом нижнем углу секции, маленький — у CTA-карточки */
.ui-faq__grid { position: relative; z-index: 1; }
/* Большой пузырь (правая половина шара, ассет faq-bubble-1 412×654) привязан к CTA-карточке.
   Макет 1920: верх на 30 ниже верха карточки, высота 315 (ширина 198), низ на 110 ниже низа
   карточки — при padding-bottom секции 140 не режется. Левым краем стоит у края ЭКРАНА.
   Секция с overflow: hidden, поэтому геометрия на каждой ширине подобрана так, чтобы шар
   целиком оставался внутри секции (см. планшет/мобильный ниже). */
.ui-faq__cta::after {
  content: '';
  position: absolute; z-index: -1;
  /* выше 1920 контейнер центрируется — вычитаем половину перелива, иначе шар отрывается от края */
  left: calc(-1 * var(--gutter) - max(0px, (100vw - var(--container)) / 2));
  top: 30px;
  width: 198px; aspect-ratio: 412 / 654;
  background: url('/local/templates/MODELAKS/ui/css/04-pages/../../img/home/faq-bubble-1.webp') 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.ui-faq__cta::before {
  content: '';
  position: absolute; z-index: -1;
  right: -30px; top: -54px;                /* из-за верхнего правого угла карточки */
  width: 98px; height: 100px;
  background: url('/local/templates/MODELAKS/ui/css/04-pages/../../img/home/faq-bubble-2.webp') 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.ui-faq__list { display: flex; flex-direction: column; gap: 16px; }
.ui-faq__item { padding: 32px; border-radius: 24px; background: rgba(249, 247, 243, .92); }
.ui-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; text-align: left;
  font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: var(--fw-medium); color: var(--c-dark);
}
.ui-faq__q .ui-btn { --btn-gap: 0; flex: 0 0 auto; }
.ui-faq__q .ui-icon { transition: transform var(--t-base); }
.ui-faq__q[aria-expanded="true"] .ui-icon { transform: rotate(180deg); }
.ui-faq__q[aria-expanded="true"] .ui-btn { --btn-bg: var(--c-green-dark); }   /* макет FAQ | Ответы: у раскрытого вопроса кнопка тёмно-зелёная */
.ui-faq__a { display: none; margin-top: 24px; font-size: var(--fs-lg); line-height: var(--lh-lg); }
/* ® в вопросах — мельче и выше базовой линии */
.ui-faq__q sup, .ui-faq__a sup, .ui-faq__lead sup { font-size: .5em; line-height: 0; vertical-align: baseline; position: relative; top: -.7em; }
.ui-faq__a.is-open { display: block; }

/* ---------- Parallax (desktop) ----------
   Скоуп `.ui-home` — класс на <main> из index.php: define('MODELAX_MAIN_CLASS', 'ui-home') */
.ui-home__reveal { position: relative; }
/* Футер сразу за FAQ: его скруглённый «наплыв» (.ui-footer::before) красим в нижний цвет фона FAQ,
   иначе между бежевым блоком и зелёным футером остаётся полоса цвета страницы */
.ui-home + .ui-footer { --footer-cap: #F0E7DA; }
@media (min-width: 1280px) {
  /* Зазор под липкими секциями: высота прилипшей плашки дисклеймера (--disclaimer-h
     ставит UI.disclaimer, при закрытии снимает) плюс воздух. Без него низ секции
     оказывается под плашкой и его приходится доскролливать назад. */
  .ui-home { --sticky-gap: calc(var(--disclaimer-h, 0px) + 40px); }
  /* Секция ниже экрана — липнет верхним краем (top: 0); выше экрана — нижним,
     чтобы был виден её конец, а не начало. --sticky-h отдаёт UI.parallax. */
  .ui-home .ui-advantages,
  .ui-home .ui-mechanism {
    position: sticky;
    top: min(0px, calc(100vh - var(--sticky-h, 1080px) - var(--sticky-gap)));
  }
  /* FAQ выезжает из-под «Полезно знать» (reveal снизу): прижата нижним краем. Если секция
     выше окна (низкое окно, раскрытые ответы), нижний край уходит в минус — тогда прижат
     ВЕРХ секции под шапкой, иначе её верх при залипании увидеть нельзя. --sticky-h ставит
     UI.parallax (и пересчитывает при раскрытии ответов). */
  .ui-home .ui-faq {
    position: sticky;
    bottom: min(0px, calc(100vh - var(--sticky-h, 0px) - var(--header-h)));
  }
}

/* ---------- Laptop (1280–1599) ----------
   Ступени нет в макетах, но это основные машины заказчика. Типографика и ритм — токенами
   (00-tokens.css), здесь — то, что не решается размером: хиро стопкой (как на планшете, но
   с десктопным KV-кадром), упаковки и наконечники меньше, футер планшетный. */
@media (min-width: 1280px) and (max-width: 1599px) {
  /* Хиро как на десктопе (текст слева, упаковки справа — просьба клиента 18.09): кадр 1920×960
     целиком, высота 50vw = пропорция кадра, обрезки нет. Поэтому здесь не нужны ни KV-полоса,
     ни растворяющий её низ градиент, ни заливка под ней. Отличия от десктопа — только размеры:
     кегль из токенов, плашки и пагинация компактнее. */
  .ui-hero { height: 50vw; min-height: 0; }
  .ui-hero__text { top: min(30%, calc(100% - 470px)); max-width: 640px; }
  .ui-hero__title { max-width: 520px; }
  .ui-hero__subtitle { margin-top: 16px; }
  .ui-hero__inner { padding-bottom: 40px; }
  .ui-hero__facts { gap: 20px; }
  .ui-hero__fact { width: clamp(260px, 22vw, 340px); min-height: 116px; padding: 40px 20px 20px; font-size: var(--fs-md); }
  .ui-hero__fact img { width: 100px; top: -32px; left: 8px; }
  .ui-hero__pager { bottom: 40px; max-width: calc(45% - 40px); }

  /* Линейка: две колонки остаются, упаковка меньше — иначе наезжала на бейджи и текст */
  .ui-products__grid { padding-top: 120px; }
  .ui-product { --pack-h: 250px; --pack-bottom: 190px; --pack-left: 32px; }
  .ui-product--kids { --pack-left: 0px; }

  /* Две формы: наконечники шириной в половину карточки (высота от ширины), текст — до них */
  .ui-forms__bg { top: auto; bottom: 0; height: auto; width: 52%; }
  .ui-forms__body { max-width: 46%; }

  /* Карточки аптек — 4 в ряд узкие: логотип и стрелка компактнее */
  .ui-store-card { min-height: 176px; }

  /* Шар FAQ (см. HANDOFF §5o): padding секции на ноутбуке 100, поэтому шар меньше —
     172×273, верх +24 от карточки, низ на 53 ниже неё, до конца секции остаётся 47 */
  .ui-faq__cta::after { width: 172px; top: 24px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1279px) {
  .ui-home__head { grid-template-columns: minmax(0, 1fr); row-gap: 32px; margin-bottom: 48px; }
  .ui-home__head .ui-h2 { max-width: none; }

  /* Хиро стопкой: KV во всю секцию, текст ниже упаковок.
     Слайды в одной grid-ячейке — высота секции по активному слайду */
  .ui-hero { height: auto; min-height: 0; }
  .ui-hero__slides { position: relative; inset: auto; display: grid; }
  .ui-hero__slide { position: relative; inset: auto; grid-area: 1 / 1; }
  /* KV: планшетный кадр 768×1008 во всю ширину, прижат к верху, без обрезки.
     Не cover: режет упаковки по бокам. Заливка под кадром — своя для 768–1279 и для мобилки
     (цвет нижней кромки кадра отличается), см. блоки ниже. */
  .ui-hero__kv { inset: 0 0 auto 0; }
  .ui-hero__kv img { height: auto; }
  .ui-hero__inner { height: auto; justify-content: flex-start; padding-top: 0; padding-bottom: 24px; }
  .ui-hero__text { position: static; max-width: none; }   /* отступ сверху — в блоках 768–1279 и ≤767 */
  .ui-hero__title { max-width: none; }
  .ui-hero__facts { margin-top: 80px; }
  .ui-hero__fact { flex: 1 1 0; width: auto; min-height: 114px; padding: 40px 24px 24px; }
  .ui-hero__fact img { width: 90px; top: -28px; left: 8px; }
  .ui-hero__pager { position: static; width: auto; max-width: none; margin-top: 24px; }

  .ui-products { padding-top: 96px; padding-bottom: 96px; }
  .ui-products__grid { grid-template-columns: minmax(0, 1fr); gap: 128px; padding-top: 128px; margin-top: 48px; }
  .ui-product { min-height: 380px; padding: 32px; --pack-h: 257px; --pack-bottom: 209px; --pack-left: 184px; }
  .ui-product--kids { --pack-left: 68px; }

  .ui-forms { padding-bottom: 60px; }
  .ui-forms__card { min-height: 0; padding: 32px; border-radius: 32px; justify-content: flex-start; background-image: url('/local/templates/MODELAKS/ui/css/04-pages/../../img/home/forms-bg-tab.webp'); }
  .ui-forms__bg { display: none; }
  /* Иллюстрация наконечников: во всю ширину карточки, нижним краем вплотную к её низу */
  .ui-forms__body { max-width: none; }
  .ui-forms__mobile {
    display: block;
    width: 100%;
    height: auto;
    margin: 32px 0 -32px;
  }

  .ui-advantages { padding-top: 136px; padding-bottom: 96px; background-image: url('/local/templates/MODELAKS/ui/css/04-pages/../../img/home/advantages-bg-tab.webp'); }
  .ui-advantages .ui-h2 { margin-bottom: 48px; }
  .ui-tiles-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ui-adv { --tile-h: 320px; padding: 24px; border-radius: 24px; }
  .ui-adv__text, .ui-case__text { align-self: end; }   /* планшет/мобильный по макету: текст у низа плитки (ряды всё равно общие через subgrid) */
  .ui-adv__text { font-size: var(--fs-lg); }   /* макет Tablet: 18px (десктоп — 24) */
  .ui-adv--photo img { min-height: 320px; }

  .ui-when { padding-top: 96px; padding-bottom: 96px; }
  .ui-when .ui-h2 { margin-bottom: 48px; }
  .ui-tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ui-tiles-4 + .ui-tiles-4 { margin-top: 16px; }
  .ui-case { --tile-h: 451px; padding: 24px; border-radius: 24px; }
  .ui-case--photo img { min-height: 451px; }

  .ui-howto { padding-bottom: 96px; }
  .ui-howto .ui-h2 { margin-bottom: 48px; }
  /* Способ применения на планшете — свайп-лента (в макете видно две карточки и полосу) */
  .ui-steps {
    display: flex; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .ui-steps::-webkit-scrollbar { display: none; }
  .ui-step { flex: 0 0 413px; scroll-snap-align: start; }   /* Figma: карточка 413, картинка 413×285 */
  .ui-step__img { border-radius: 24px; }
  .ui-step__num { top: 16px; left: 16px; }
  .ui-step__text { margin-top: 32px; max-width: 330px; }

  /* KV во всю ширину экрана, карточка наезжает на его нижний край */
  /* Видео остаётся фоном секции (Figma: 768 Fill × 1264), карточка лежит на его нижней части.
     object-position по X сдвинут: при cover кадр 1840×1124 масштабируется по высоте и обрезается
     по бокам (перелив 1301px), при center тюбик уходит из кадра. Значение выведено из замера:
     при 21% центр тюбика попадал на 45.3% ширины, нужный центр 50% даёт 18%. */
  /* Видео — полосой сверху (по макету 768×791), карточка ниже на бежевом фоне секции */
  .ui-mechanism { min-height: 0; margin-top: calc(-1 * var(--r-section)); padding: 624px 0 40px; background: var(--c-beige); }
  .ui-mechanism__video { inset: 0 0 auto 0; height: calc(791px + var(--r-section)); object-position: 3% center; }
  .ui-mechanism__card { position: relative; width: 100%; min-height: 0; padding: 32px; border-radius: 32px; background: var(--c-beige-light); }
  .ui-mechanism__lead { margin-top: 48px; }

  .ui-home-stores { padding-top: 96px; padding-bottom: 96px; }
  .ui-home-stores__grid {
    display: flex; gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .ui-home-stores__grid::-webkit-scrollbar { display: none; }
  .ui-store-card { flex: 0 0 412px; scroll-snap-align: start; min-height: 184px; padding: 24px; border-radius: 24px; }

  .ui-home-articles { padding-bottom: 96px; }

  .ui-faq { padding-top: 96px; padding-bottom: 96px; }
  /* одна колонка: заголовок, подводка, список, CTA-карточка в конце (aside → display: contents) */
  .ui-faq__grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .ui-faq__aside { display: contents; }
  .ui-faq .ui-h2 br { display: none; }             /* «Вопросы и ответы» в одну строку */
  .ui-faq__lead { margin-top: 24px; max-width: 330px; font-size: var(--fs-lg); }   /* подводка 18px в две строки, перенос после «вопросы» */
  .ui-faq__list { margin-top: 48px; }
  .ui-faq__item { min-height: 120px; }
  /* CTA-карточка во всю ширину: текст слева, кнопка справа (Figma: Tablet | FAQ) */
  .ui-faq__cta {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 24px; margin-top: 48px; order: 3; min-height: 0;
  }
  .ui-faq__cta > span { margin-bottom: 0; }
  .ui-faq__cta .ui-btn { margin-top: 0; flex: 0 0 auto; }
  .ui-faq__cta::after { width: 151px; top: -63px; }                       /* макет 768: 151×240, низ на 55 ниже карточки */
  .ui-faq__cta::before { right: -15px; top: -53px; width: 65px; height: 60px; }
  .ui-faq__item { padding: 24px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .ui-home__head { row-gap: 20px; margin-bottom: 32px; }

  /* Хиро: кадр 360×735 во всю секцию, текст ниже упаковок.
     Отступ в vw, а не в px: кадр тянется по ширине экрана, упаковки вместе с ним —
     на 767 фиксированные 300px клали текст прямо на коробки. Заливка — цвет нижней кромки кадра. */
  .ui-hero { border-radius: 0 0 24px 24px; background: #548535; }
  .ui-hero__text { margin-top: 74vw; }
  .ui-hero__subtitle { margin-top: 16px; }
  .ui-hero__inner { padding-bottom: 16px; }
  .ui-hero__facts { gap: 16px; margin-top: 64px; }   /* макет 360: карточки в 64 от подзаголовка, иконки (вылет 40) — в 24–30 */
  .ui-hero__fact { min-height: 127px; padding: 20px 16px 16px; border-radius: 16px; }
  .ui-hero__fact img { width: 90px; top: -40px; left: 0; }
  .ui-hero__pager { margin-top: 16px; }

  .ui-products { padding-top: 72px; padding-bottom: 72px; }
  /* Карточка препарата: упаковка выходит за верхний край карточки, бейджи фасовок поверх неё справа */
  .ui-products__grid { gap: 84px; padding-top: 72px; margin-top: 32px; }
  .ui-product { min-height: 0; padding: 124px 20px 12px; --r-card: 24px; }   /* макет 360: карточка 328×341, бейдж возраста в 130 от верха, кнопка в 10 от низа */
  .ui-product { --pack-h: 160px; --pack-left: 14px; }
  .ui-product--kids { --pack-left: 0px; }
  .ui-product__img { top: -60px; bottom: auto; left: var(--pack-left); height: var(--pack-h); }
  .ui-product::before { height: 120px; }
  .ui-product .ui-product__packs { right: 16px; top: 20px; gap: 5px; }       /* бейджи фасовок внутри карточки: 24px, шаг 29 */
  .ui-product__packs .ui-badge { height: 24px; min-width: 56px; padding: 4px 12px; }
  .ui-product__age { margin-top: 0; height: 32px; padding: 6px 12px; }
  .ui-product__name { margin-top: 16px; }
  .ui-product__row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ui-product__row .ui-btn { min-width: 160px; font-size: 16px; }

  .ui-forms { padding-bottom: 72px; }
  .ui-forms__card { min-height: 600px; padding: 24px 20px; border-radius: 24px; background-image: url('/local/templates/MODELAKS/ui/css/04-pages/../../img/home/forms-bg-mob.webp'); }
  /* Иллюстрация на 360 собирается из кадра без подписей (forms-mobile-crop) + HTML-подписи:
     мобильного кадра в выгрузке нет, а в макете подписи крупнее и стоят над наконечниками */
  .ui-forms__mobile { display: none; }
  .ui-forms__fig { display: block; position: relative; margin: 32px -20px -48px; }   /* низ наконечников срезается карточкой (макет: карточка 600) */
  .ui-forms__fig img { display: block; width: 83%; height: auto; margin: 0 auto; }   /* макет: наконечники почти во всю ширину карточки */
  .ui-forms__label {
    position: absolute; width: 40%;
    font-size: 16px; line-height: 1.4; letter-spacing: var(--ls);
  }
  .ui-forms__label--kids  { left: 2%; top: 14%; text-align: right; }
  .ui-forms__label--adult { left: 54%; top: 0; }

  .ui-advantages { padding-top: 96px; padding-bottom: 96px; background-image: url('/local/templates/MODELAKS/ui/css/04-pages/../../img/home/advantages-bg-mob.webp'); }
  .ui-advantages .ui-h2 { margin-bottom: 32px; }
  .ui-tiles-3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ui-adv { --tile-h: 180px; row-gap: 24px; padding: 16px; }      /* макет 360: плитка 328×180, шаг 16, текст 16px */
  .ui-adv__text { font-size: var(--fs-lg); }
  .ui-adv--photo img { height: 180px; min-height: 0; }   /* макет 360: фото-плитка 180, как и остальные */

  /* На 360 параллакса нет — секция сама заходит на зелёную на радиус, чтобы скругление было видно */
  .ui-when { margin-top: calc(-1 * var(--r-section)); padding-top: 72px; padding-bottom: 72px; }
  .ui-when .ui-h2 { margin-bottom: 32px; }
  .ui-tiles-4 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ui-tiles-4 + .ui-tiles-4 { margin-top: 16px; }
  .ui-case { --tile-h: 385px; padding: 16px; }
  .ui-case__text { padding-top: 24px; }
  .ui-case--photo img { min-height: 385px; }

  .ui-howto { padding-bottom: 72px; }
  .ui-howto .ui-h2 { margin-bottom: 32px; }
  .ui-steps {
    display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);   /* обязателен при padding-inline у snap-ленты */
  }
  .ui-steps::-webkit-scrollbar { display: none; }
  .ui-step { flex: 0 0 304px; scroll-snap-align: start; }   /* Figma: 304×210 */
  .ui-step__text { margin-top: 16px; }

  /* Figma: 360 Fill × 1284 */
  .ui-mechanism { padding: 448px 0 16px; }   /* макет 360: карточка почти вплотную к следующей секции */
  .ui-mechanism__video { height: calc(424px + var(--r-section)); object-position: 11% center; }
  .ui-mechanism__card { padding: 16px; border-radius: 24px; }
  .ui-mechanism__lead { margin-top: 32px; }
  .ui-mechanism__note { margin-top: 16px; }

  .ui-home-stores { padding-top: 72px; padding-bottom: 72px; }
  .ui-store-card { flex-basis: 304px; min-height: 140px; padding: 16px; }
  .ui-home-articles { padding-bottom: 72px; }

  .ui-faq { padding-top: 72px; padding-bottom: 108px; }   /* макет 360: под карточкой 109 — место под шар */
  .ui-faq__item { padding: 16px; border-radius: 16px; }
  .ui-faq__q { font-size: var(--fs-xl); }
  .ui-faq .ui-h2 br { display: none; }
  .ui-faq__list { margin-top: 32px; }
  .ui-faq__q { gap: 16px; }
  .ui-faq__q .ui-btn { width: 48px; height: 32px; padding: 6px 14px; }   /* макет 360: кнопка-стрелка 48×32 */
  .ui-faq__lead { max-width: 280px; }   /* макет 360: подводка 16px в три строки */
  .ui-faq__cta .ui-btn { min-width: 158px; }                            /* макет 360: «Где купить» 158×48 */
  .ui-faq__cta {
    flex-direction: column; align-items: flex-start; gap: 0;
    margin-top: 32px; padding: 24px 20px; border-radius: 24px;
  }
  .ui-faq__cta > span { margin-bottom: 24px; }
  .ui-faq__cta::after { width: 110px; top: 95px; }                        /* макет 360: 110×175, низ на 100 ниже карточки */
  .ui-faq__cta::before { right: -20px; top: -35px; width: 65px; height: 65px; }
}

/* ---------- Tablet only (768–1279) ---------- */
@media (min-width: 768px) and (max-width: 1279px) {
  /* H1 хиро: в макете на планшете 2 строки — строка шире, текст ложится сам */
  .ui-hero__title br { display: none; }

  /* Хиро: кадр 1279×959 (hero-kv-lap, от клиента 18.09), высота 75vw, упаковки в верхних 56 %.
     Кадр начинается под шапкой (иначе логотип ложится на коробку): над ним — верхняя кромка того же
     кадра, растянутая по вертикали (верхние строки кадра по вертикали однородны, шва нет).
     Заливка секции — цвет нижней кромки кадра (слева темнее, справа светлее). */
  .ui-hero { background: linear-gradient(90deg, #5A853C 0%, #5F933D 100%); }
  .ui-hero__kv { padding-top: var(--header-h); background: url('/local/templates/MODELAKS/ui/css/04-pages/../../img/home/hero-kv-lap.webp') top center / 100% 4000% no-repeat; }
  .ui-hero__text { margin-top: calc(45vw + var(--header-h)); }   /* ниже упаковок в кадре */
}

/* End */
/* /local/templates/MODELAKS/ui/css/00-tokens.css?17920703266597 */
/* /local/templates/MODELAKS/ui/css/01-base.css?17920703266134 */
/* /local/templates/MODELAKS/ui/css/02-layout.css?17920703262670 */
/* /local/templates/MODELAKS/ui/css/03-components/button.css?17920703263412 */
/* /local/templates/MODELAKS/ui/css/03-components/controls.css?17920703263314 */
/* /local/templates/MODELAKS/ui/css/03-components/header.css?17920703266976 */
/* /local/templates/MODELAKS/ui/css/03-components/footer.css?17920703266736 */
/* /local/templates/MODELAKS/ui/css/03-components/notice.css?17920703263813 */
/* /local/templates/MODELAKS/ui/css/03-components/card.css?17920703264313 */
/* /local/templates/MODELAKS/ui/css/03-components/slider.css?17920703264427 */
/* /local/templates/MODELAKS/ui/css/04-pages/404.css?17920703262019 */
/* /local/templates/MODELAKS/ui/css/04-pages/instruction.css?17920703269557 */
/* /local/templates/MODELAKS/ui/css/04-pages/articles.css?179207032615792 */
/* /local/templates/MODELAKS/ui/css/04-pages/stores.css?17920703261729 */
/* /local/templates/MODELAKS/ui/css/04-pages/home.css?179207032645601 */