/* ============================================================================
   oprep.css — страница «О препарате» Уролесан (Figma node 1876:1744, baseline 1920).
   Стили поверх base.css (болванка) + chrome.css (каркас). rem = px/16.
   Сгенерировано ИИ из дизайна Уролесан / «Для верстки» 134:2, 2026-07.
   Абсолютные координаты секций — из get_design_context (pixel-perfect по клиенту).
   Адаптивы 768/360 Вера отдаёт после десктопа — media-блоки заполнить тогда (не интерполировать).
   ============================================================================ */

/* --- ГЕРОЙ (node 1876:1803 «20», 1920×860) --------------------------------- */
.op-hero {
  position: relative;
  height: 44.7917vw;                              /* 860/1920: пропорция композита 1:1 — бейдж «50 лет» не кропится cover-скейлом и не лезет под меню (реш. Антона 13.07) */
  overflow: hidden;
}
.op-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  pointer-events: none;
}
/* Мобильная композиция героя — только ≤767 (см. media-блок), на десктопе/планшете скрыта */
.op-hero__bg-m, .op-hero__box-m, .op-hero__badge-m { display: none; }
.op-hero__title {
  position: absolute; left: 2.5rem; top: 12.25rem;   /* 40 / 196 */
  width: 69.5rem;                                    /* 1112px */
  margin: 0;
  font-family: var(--wm-font-head); font-weight: 600;
  font-size: 5.125rem; line-height: 1.1;             /* 82px */
  letter-spacing: -0.0625rem;                        /* -1px */
  text-transform: uppercase; color: var(--wm-brand);
  word-break: break-word;
}
.op-hero__lead {
  position: absolute; left: 2.5rem; top: 18.625rem;  /* 40 / 298 */
  width: 46.375rem;                                  /* 742px */
  display: flex; flex-direction: column; gap: 2rem;  /* gap-32 */
}
.op-hero__lead p {
  width: 31.125rem;                                  /* 498px — намеренная развесовка (класс A5) */
  margin: 0;
  font-family: var(--wm-font); font-weight: 500;
  font-size: 1.5rem; line-height: 1.24; color: var(--wm-ink);   /* 24px Inter Tight Medium */
}
.op-hero__lead hr {
  width: 100%; height: 0; margin: 0; border: 0; border-top: 1px solid var(--wm-line);
}
/* Табы форм выпуска (node 1876:1844) */
.op-hero__tabs {
  position: absolute; left: 0; right: 0; margin: auto; top: auto; bottom: 28px; width: fit-content;    /* 774 / 766 — линейка якорей: табы были −23px выше (743→766) */
  display: inline-flex; padding: 0.5rem;             /* p-8 */
  border-radius: 1.625rem;                           /* 26px */
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(182px);
          backdrop-filter: blur(182px);
  box-shadow: 0 6px 12px 0 rgba(71, 114, 4, 0.1);
}
.op-tab {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.4375rem 3rem 1.5rem;                    /* pt-23 px-48 pb-24 */
  border: 0; background: transparent; border-radius: 1.25rem;   /* 20px */
  font-family: var(--wm-font); font-weight: 500; font-size: 1.3125rem;   /* 21px */
  color: var(--wm-ink); white-space: nowrap;
}
.op-tab--active { background: var(--wm-brand); color: #fff; }
@media (hover: hover) {
  .op-tab:not(.op-tab--active):hover { color: var(--wm-brand); }
}

/* ============================================================================
   КОНТЕНТ-СЕКЦИИ «О препарате». Flow-layout на rem (fluid по base.css clamp).
   Секции стартуют от x≈79px → контейнер 1764px по центру, боковой отступ 79px.
   Вертикальные интервалы взяты из абсолютных Y-координат Figma (pixel-perfect).
   ============================================================================ */
body.wm { background: #fafafa; }

.op-h2 {
  margin: 0;
  font-family: var(--wm-font-head); font-weight: 600;
  font-size: 5.125rem; line-height: 1.1;              /* 82px */
  letter-spacing: -0.05125rem;                        /* -0.82px */
  text-transform: uppercase; color: var(--wm-ink);
}
.op-h2--center { text-align: center; }
.op-h2__brand { color: var(--wm-brand); }
.op-h2--lockup {                                      /* «почему / уролесан» — лок-ап в 2 строки */
  display: flex; flex-direction: column; align-items: center;
  font-size: 5.125rem; line-height: 1.1;              /* 82px (Figma 1886:3728/3729), НЕ 48 — правка Веры «кегль» */
}
.op-h2--lockup sup { font-size: 0.5em; vertical-align: super; }

/* общий контейнер контента секции */
.op-adv, .op-sostav, .op-shops, .op-faq, .op-useful, .op-refs {
  max-width: 120rem; margin-inline: auto;
  padding-inline: 4.9375rem;                          /* 79px */
}

/* --- ПРЕИМУЩЕСТВА (1876:1745) ------------------------------------------------ */
.op-adv { padding-top: 17.4375rem; }                  /* герой(860)→заголовок(1139) */
.op-adv .op-h2 { margin-bottom: 4.3125rem; }          /* лок-ап→верх карточек 102px по макету (69px здесь + сдвиг от отступа карточек) */
.op-adv__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;                                        /* 12px */
}
/* переключение состояний «Капсулы/Раствор» (правка Веры O-в): класс display:grid сильнее
   UA `[hidden]{display:none}`, поэтому скрытие сетки объявляем явно. */
.op-adv__grid[hidden] { display: none; }
/* крупная цифра «5-7 дней» в карточке «Короткий курс» состояния «Раствор» (node 1876:2055,
   правый-верхний угол карточки — как в макете). */
.op-adv__stat {
  position: absolute; top: 6.25rem; right: 2.9375rem;  /* 100px / 47px — по внутр. паддингу карточки */
  text-align: right; font-family: var(--wm-font); font-weight: 500;
  font-size: 2.15rem; line-height: 1; color: var(--wm-ink);   /* «дней» 34px */
}
.op-adv__stat-num { display: block; font-size: 3.5875rem; }    /* «5-7» 57.4px */
.op-adv__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  position: relative;
  min-height: 19.625rem;                              /* 314px — точная высота карточки в макете */
  padding: 6.25rem 2.9375rem 2.25rem;                 /* верх 100px / бок 47px / низ 36px — как в макете */
  border-radius: 1.5rem;                              /* 24px */
  background: #fff;
  overflow: hidden;
}
.op-adv__card:nth-child(n+4) { padding-top: 5.875rem; }  /* карточки 2-го ряда: отступ сверху по макету 94px */
.op-adv__title {
  margin: 0; max-width: 60%;
  font-family: var(--wm-font); font-weight: 500;
  font-size: 2.25rem; line-height: 1; color: var(--wm-ink);   /* 36px/36px — межстрочный ровно как в макете (был 1.05) */
}
.op-adv__lead {
  max-width: 15.5625rem;                              /* 249px — ширина текста в макете (переносы 1:1) */
  font-family: var(--wm-font); font-weight: 500;
  font-size: 1.75rem; line-height: 1.16; color: var(--wm-ink);   /* 28px */
}
.op-adv__text {
  font-family: var(--wm-font); font-weight: 500;
  font-size: 1.3125rem; line-height: 1.24;            /* 21px */
  color: var(--wm-ink); opacity: 0.6;
}
.op-adv__note {
  font-family: var(--wm-font); font-weight: 500;
  font-size: 1.3125rem; line-height: 1.24;
  color: var(--wm-ink); opacity: 0.6;
}
/* Зазоры между строками карточек — как в макете.
   Важно: приставка .wm обязательна — общий сброс «.wm p { margin: 0 }» сильнее
   одиночного класса и молча съедает отступы без неё (из-за этого прошлые правки не работали). */
.wm .op-adv__lead { margin: 0.5rem 0 0; }             /* заголовок → «Всего 8-10 капель»: 8px */
.wm .op-adv__text { margin: 1.125rem 0 0; }           /* заголовок → серый текст: 18px */
.wm .op-adv__card:nth-child(5) .op-adv__text { margin-top: 0.5rem; }  /* «Мочегонный эффект»: 8px */
.wm .op-adv__note { margin: 1.125rem 0 0; }           /* «Всего 8-10…» → примечание: 18px */
/* Ширины текстов — по макету, чтобы переносы строк совпадали 1:1 */
.op-adv__card:nth-child(1) .op-adv__title { max-width: 17.25rem; }   /* «Быстрое действие» 276px — 2 строки */
.op-adv__card:nth-child(2) .op-adv__title { max-width: none; }       /* «Удобное лечение» — 1 строка, как в макете */
.op-adv__card:nth-child(3) .op-adv__title { max-width: 20.5625rem; } /* 329px */
.op-adv__card:nth-child(4) .op-adv__title { max-width: 17.8125rem; } /* 285px */
.op-adv__card:nth-child(5) .op-adv__title { max-width: 20.625rem; }  /* 330px */
.op-adv__card:nth-child(6) .op-adv__title { max-width: none; }       /* «Короткий курс» — 1 строка */
.op-adv__card:nth-child(1) .op-adv__text { max-width: 23.625rem; }   /* 378px */
.op-adv__card:nth-child(3) .op-adv__text { max-width: 22.5625rem; }  /* 361px */
.op-adv__card:nth-child(4) .op-adv__text { max-width: 32.5rem; }     /* 520px */
.op-adv__card:nth-child(5) .op-adv__text { max-width: 27.875rem; }   /* 446px */
.op-adv__card:nth-child(6) .op-adv__text { max-width: 24.0625rem; }  /* 385px */
.op-adv__note { max-width: 28.125rem; }               /* 450px */
.op-ref { font-size: 0.55em; vertical-align: super; opacity: 0.7; }
.op-adv__icon {
  position: absolute; top: 18px; right: 25px; /* 39 / 20 */
  height: auto; pointer-events: none;
}

/* --- СОСТАВ / СИНЕРГИЯ 5 РАСТЕНИЙ (1876:1880 + карусель) --------------------- */
.op-sostav { padding-top: 16.125rem; }                /* карточки→«Синергия»: 258px (карточки стали макетные 314px — зазор пересчитан) */
.op-sostav .op-h2 { margin-bottom: 4.75rem; max-width: 61.25rem; margin-inline: auto; }  /* 76px, заголовок 980px */
.op-sostav__track {
  display: flex; align-items: center; gap: 0.75rem;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  padding: 1.5rem max(0px, calc(50% - 17.53125rem)); margin-block: -1.5rem;
  scrollbar-width: none; cursor: grab;
}
.op-sostav__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.op-sostav__track::-webkit-scrollbar { display: none; }
.op-plant {
  padding: 2.875rem 2.25rem;
  position: relative;
  flex: 0 0 35.0625rem;                               /* 561px */
  aspect-ratio: 1122 / 1276;
  scroll-snap-align: center; scroll-snap-stop: always;
  border-radius: 1.5rem; overflow: hidden;
  transform-origin: center; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
.op-plant img{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.op-plant .op_plant_title{
  position: relative;
  z-index: 2;
  margin-bottom: 1.5rem;
  font-family: var(--wm-font); font-weight: 500; font-size: 2.25rem;   /* 36px */
  line-height: 0.9; color: #fff;
}
.op-plant .op_plant_text{
  position: relative;
  z-index: 2;
  font-family: var(--wm-font); font-weight: 500; font-size: 1.313rem;   /* 16px */
  line-height: 28px; color: #fff;
}
.op-plant__card { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.op-plant--active {
  z-index: 1; transform: scaleY(1.08);
}
.op-sostav__pagination { display: none; }
.op-shops__pagination { display: none; }

/* ссылка-пилюля «Смотреть инструкцию / Узнать больше» (1876:1855 / 1876:1993) */
.op-link {
  display: flex; width: fit-content;
  margin: 2.5rem auto 0;                              /* по ЦЕНТРУ страницы — правка Веры «кнопка посередине» */
  align-items: center; gap: 1.25rem;                 /* 20px */
  padding: 0.375rem 0.375rem 0.375rem 1.75rem;        /* 6 / 28 */
  border-radius: 1.25rem;                             /* 20px */
  background: var(--wm-brand); text-decoration: none;
  font-family: var(--wm-font); font-weight: 500; font-size: 1rem;   /* 16px */
  line-height: 0.9; color: #fff;
}
/* НЕГАТИВНЫЙ КОНТРОЛЬ Д1 (@layer, реестр #30): точечный фикс специфичности
   `.wm a.op-link` УДАЛЁН — с резет-этажом в @layer base неслоёное `.op-link{color:#fff}`
   (0,1,0, строка 185) уже выигрывает у слоёного `.wm a{color:inherit}`. Кнопка остаётся
   белой БЕЗ патча → класс закрыт в источнике, а не в частном случае. То же для табов. */
.op-link--center { /* устар.: центрирование теперь по умолчанию через margin auto */ }
.op-link__arrow {                                     /* белый скруглённый КВАДРАТ + тёмная стрелка (Figma 1886:3533, rx16) — НЕ круг (правка Веры) */
  display: block; flex: 0 0 auto;
  width: 3rem; height: 3rem;                          /* 48px, ассет 1:1 из Figma */
}
@media (hover: hover) { .op-link:hover { filter: brightness(0.95); } }
.op-sostav .op-link { margin-top: 4.1875rem; }        /* «Смотреть инструкцию»: по макету на 27px ниже (67px) */

/* --- БАННЕР СПОСОБ ПРИМЕНЕНИЯ (1876:3168, full-bleed) ------------------------ */
.op-banner { margin-top: 16.5rem; }                   /* карусель→баннер(3630) */
.op-banner__img { display: block; width: 100%; height: auto; }

/* --- СВЕТЛАЯ ЗОНА: Где купить + FAQ + Полезное (Rectangle 63 1876:1881) ------ */
.op-lightzone {
  margin-top: 0;                                      /* без белой полосы: серая зона примыкает к баннеру (правка Веры) */
  background: #f4f4f5;                                /* светло-серая зона → белые плитки читаются */
  padding-block: 17rem 6rem;                          /* сверху 272px: по макету до «Где купить» на 128px больше, чем было (проверка «банер→Где купить» −128) */
}

/* --- ГДЕ КУПИТЬ (1876:1882) -------------------------------------------------- */
.op-shops .op-h2 { margin: 0 0 4.75rem; }             /* заголовок(4754)→сетка(4920) 166-90≈76 */
.op-shops__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;                                        /* 12px */
}
.op-shop {
  height: 15.5625rem;                                 /* 249px */
  border-radius: 1.625rem;                            /* 26px */
  background: #fff; overflow: hidden;                 /* клип углов под рендер-ячейку */
}
.op-shop img {                                        /* рендер-ячейка Figma 580×249 целиком → логотип в ИСХОДНОМ масштабе (правка Веры «масштаб»); прежний cap 55% ломал масштаб */
  display: block; width: 100%; height: 100%; object-fit: contain;
}

/* --- FAQ (1876:2011) -------------------------------------------------------- */
.op-faq { padding-top: 16.5rem; }                     /* где-купить(6213)→faq(6477) */
.op-faq .op-h2 { margin: 0 auto 6.875rem; max-width: 54.75rem; }   /* заголовок→Q1: линейка якорей −46px (64→110px); 876px перенос в 2 строки */
.op-faq__list { border-top: 1px solid var(--wm-line); }
.op-faq__item { border-bottom: 1px solid var(--wm-line); }
.op-faq__q {
  position: relative; list-style: none; cursor: pointer;
  padding: 2.9375rem 5.5rem 2.9375rem 4.125rem;       /* строка ~124px, место под кнопку справа */
  font-family: var(--wm-font); font-weight: 500;
  font-size: 1.75rem; line-height: 1; color: var(--wm-ink);   /* 28px/28px — истина Figma 1886:37xx, линейка якорей кегль+интерлиньяж (была регрессия 28→24, lh 1.24→1.0) */
}
.op-faq__q::-webkit-details-marker { display: none; }
.op-faq__q::before {                                  /* зелёный скруглённый квадрат-контрол (Figma 1886:3704: 60×60, cr18, #63c640 — бренд-акцент) */
  content: ""; position: absolute; right: 1.5rem; top: calc(50% - 1.875rem);
  width: 3.75rem; height: 3.75rem;                    /* 60×60 */
  border-radius: 1.125rem;                            /* 18px */
  background: var(--wm-brand);
}
.op-faq__q::after {                                   /* белый шеврон ВНУТРИ зелёного квадрата (Figma: white Line) */
  content: ""; position: absolute; right: 2.9375rem; top: calc(50% - 0.5rem);
  width: 0.875rem; height: 0.875rem;                  /* 14px */
  border-right: 0.1875rem solid #fff;
  border-bottom: 0.1875rem solid #fff;
  transform: rotate(45deg);                           /* ▼ закрыто */
  transition: transform 0.2s ease;
}
.op-faq__item[open] .op-faq__q::after {
  transform: rotate(-135deg);                         /* ▲ открыто */
  top: calc(50% - 0.25rem);
}
.op-faq__a {
  padding: 0 5.5rem 2.9375rem 4.125rem; max-width: 60.25rem;   /* 964px */
  font-family: var(--wm-font); font-weight: 500;     /* истина 1886:3703 */
  font-size: 1.3125rem; line-height: 1.2381;         /* 21px / 26px — по истине Figma (числовой гейт) */
  color: var(--wm-ink); opacity: 0.75;
}
.op-faq__a[data-needs-copy] { font-style: italic; opacity: 0.45; }

/* --- ПОЛЕЗНАЯ ИНФОРМАЦИЯ (1876:1978) ---------------------------------------- */
.op-useful { padding-top: 13.5625rem; text-align: center; }   /* FAQ→«Полезная»: линейка якорей +47px (264→217px) */
.op-useful .op-h2 { margin: 0 auto 4.875rem; max-width: 54.75rem; }   /* заголовок→карточки: линейка якорей −22px (56→78px); 876px перенос */
.op-useful__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 4rem 0.875rem;                                 /* ряд ~ / кол 14px */
  text-align: left;
}
.op-article { text-decoration: none; display: block; }
.op-article__photo {
  display: block; border-radius: 1.625rem; overflow: hidden;   /* 26px */
  aspect-ratio: 875 / 317; background: #efefef;
}
.op-article__photo img { width: 100%; height: 100%; object-fit: cover; }
.op-article__cap {
  display: block; margin-top: 1.625rem;
  font-family: var(--wm-font); font-weight: 500;
  font-size: 1.5rem; line-height: 1.24; color: var(--wm-ink);  /* 24px */
}
@media (hover: hover) {                               /* ховер: плавная смена цвета (реш. Антона 13.07, заменяет подчёркивание) */
  .op-article:hover .op-article__cap { color: var(--wm-brand); }
}
.op-useful > .op-link { margin-top: 4.71875rem; }     /* «Узнать больше»: 75.5px — по проверке до карточки выше 128px, как в макете */

/* --- СПИСОК ЛИТЕРАТУРЫ (1876:1998) ------------------------------------------ */
.op-refs {
  padding-top: 6.5625rem; padding-bottom: 13.375rem;  /* «Узнать больше»→лит: линейка якорей +95px (200→105); лит→футер +50px (264→214) */
  background: #f4f4f5;                                /* серый фон блока, НЕ белый (правка Веры) */
}
.op-refs__list { margin: 0; padding: 0; list-style: none; }
.op-refs__list li {
  padding: 1.125rem 0;                                /* строки ~59px, разделены линиями */
  border-top: 1px solid rgba(95, 95, 95, 0.15);      /* светлые тонкие разделители как в макете (правка Веры) */
  font-family: var(--wm-font); font-weight: 400;
  font-size: 1.125rem; line-height: 1.2222;          /* 18px / 22px — по истине Figma 1886:3678–3682 (числовой гейт) */
  color: var(--wm-ink); opacity: 0.85;
  text-align: center;                                /* выравнивание по центру (правка Веры) */
}
.op-refs__list li:first-child { border-top: 0 }
.op-refs__list li:last-child { border-bottom: 0 }
.op-refs__list a { color: inherit; text-decoration: none; }   /* без выделения цветом первой ссылки (правка Веры) */
@media (hover: hover) { .op-refs__list a:hover { color: var(--wm-brand); } }

/* ============================================================================
   АДАПТИВ — «О препарате» (2001:4282). rem=px ниже 1280. Hero: absolute→поток.
   ============================================================================ */
/* ── общее ≤1279: hero из absolute в поток (иначе координаты 1920 = гор.скролл) ── */
@media (max-width: 1000px) {
  .op-hero {
    height: auto; overflow: visible;
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .op-hero__title, .op-hero__lead, .op-hero__tabs {
    position: static; left: auto; top: auto; width: auto; max-width: 100%;
  }
  .op-hero__title { order: 1; }
  .op-hero__lead  { order: 2; align-items: center; }
  .op-hero__lead p { width: auto; max-width: 100%; }
  .op-hero__bg    { position: static; order: 3; width: 100%; height: auto; object-fit: contain; }
  .op-hero__tabs  { order: 4; }
  /* сброс намеренных max-width текстов карточек преимуществ (десктоп-развесовка) */
  .op-adv__title, .op-adv__text, .op-adv__lead, .op-adv__note { max-width: none !important; }
  .op-sostav .op-h2, .op-faq .op-h2, .op-useful .op-h2 { max-width: none; }
}

/* ── ПЛАНШЕТ 768–1279 ──────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .op-hero { padding: 128px 32px 40px; gap: 20px; }
  .op-hero__title { font-size: 56px; }
  .op-hero__lead p { font-size: 20px; }
  .op-hero__bg { max-width: 520px; }
  .op-hero__tabs { margin-top: 8px; }
  .op-tab { padding: 14px 32px; font-size: 18px; }

  .op-adv, .op-sostav, .op-shops, .op-faq, .op-useful, .op-refs { padding-inline: 32px; }
  .op-h2, .op-h2--lockup { font-size: 48px; }
  .op-adv { padding-top: 96px; }
  .op-adv .op-h2 { margin-bottom: 40px; }
  .op-adv__grid { grid-template-columns: repeat(2, 1fr); }
  .op-adv__card { padding: 40px 32px 32px; border-radius: 10px; }
  .op-adv__card:nth-child(n+4) { padding-top: 40px; }
  .op-sostav { padding-top: 96px; }
  .op-plant { flex-basis: 60%; }
  .op-banner { margin-top: 96px; }
  .op-lightzone { padding-block: 96px 48px; }
  .op-shops__grid { grid-template-columns: repeat(3, 1fr); }
  .op-shop { height: auto; aspect-ratio: 580 / 249; }
  .op-faq { padding-top: 96px; }
  .op-faq .op-h2 { margin-bottom: 48px; }
  .op-faq__q { font-size: 22px; }
  .op-faq__q::before { width: 36px; height: 36px; border-radius: 10px; right: 0; top: 22px}
  .op-faq__q::after { width: 10px; height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    right: 13px;
    top: 34px;
  }
  .op-faq__item[open] .op-faq__q::after{
    top: 37px;
  }
  .op-faq__a { font-size: 18px; }
  .op-useful { padding-top: 96px; }
  .op-useful .op-h2 { margin-bottom: 40px; }
  .op-refs { padding-top: 64px; padding-bottom: 96px; }
}

/* ── МОБИЛЬНЫЙ ≤767 ────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  main{background: linear-gradient(180deg, #FAFAFA 12.06%, #F4F4F4 19.01%), linear-gradient(180deg, #FAFAFA 12.06%, #F4F4F4 19.01%);}
  /* ГЕРОЙ 360 (кадр Веры 2001:4282): левое выравнивание + вертикальный стек
     ботаника→пачка + бейдж (десктоп-композит был «белый растянутый» 161px, §17). */
  .op-hero {
    position: relative;
    height: auto; padding: 84px 16px 24px; gap: 10px;
    align-items: flex-start; text-align: left;        /* оверрайд центрирования ≤1279 */
  }
  .op-hero__badge-m { display: block; position: absolute; top: 74px; right: 14px; width: 86px; height: auto; z-index: 3; }
  .op-hero__title { order: 1; width: 66%; font-size: 30px; line-height: 1.08; }   /* место под бейдж */
  .op-hero__lead  { order: 2; gap: 10px; align-items: flex-start; }   /* оверрайд ≤1279 center */
  .op-hero__lead p { width: auto; max-width: 240px; font-size: 15px; line-height: 1.3; }
  .op-hero__lead hr { display: none; }                /* линии в кадре Веры нет */
  .op-hero__bg { display: none; }                     /* десктоп-композит скрыт на 360 */
  .op-hero__bg-m  { display: block; order: 3; width: 100%; margin-top: -110px; }   /* обрезанная ботаника ~278px */
  .op-hero__box-m { display: block; order: 4; width: 58%; margin: -18px 0 0 0; } /* пачка ниже ботаники, лёгкий нахлёст */
  .op-hero__tabs  { order: 5; margin-top: 12px; }
  .op-tab { padding: 12px 24px; font-size: 14px; }

  .op-adv, .op-sostav, .op-shops, .op-faq, .op-useful, .op-refs { padding-inline: 16px; }
  .op-h2, .op-h2--lockup { font-size: 30px; line-height: 1.12; }
  .op-adv { padding-top: 64px; }
  .op-adv .op-h2 { margin-bottom: 52px; }
  .op-adv__grid { grid-template-columns: 1fr; gap: 12px; }
  .op-adv__card { min-height: 176px; padding: 24px; }
  .op-adv__card:nth-child(n+4) { padding-top: 24px; }
  .op-adv__title { font-size: 22px; }
  .op-adv__lead { font-size: 18px; }
  .op-adv__text, .op-adv__note { font-size: 14px; }
  .op-adv__icon { max-width: 64px; top: 10px; right: 14px; }

  .op-sostav { padding-top: 100px; }
  .op-sostav .op-h2 { margin-bottom: 52px; }
  .op-sostav__track {
    gap: 8px; margin: 0 -16px;
    padding: 0 16px;
  }
  .op-plant {
    flex: 0 0 calc(100vw - 64px);
    padding: 25px 19px; border-radius: 16px;
  }
  .op-plant .op_plant_title {
    display: block; margin-bottom: 14px;
    font-size: 20px; line-height: 0.95;
  }
  .op-plant .op_plant_text {
    display: block; font-size: 11px; line-height: 15px;
  }
  .op-plant--active { transform: none; }
  .op-sostav__pagination {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 32px;
  }
  .op-sostav__bullet {
    width: 5px; height: 5px; padding: 0; border: 0; border-radius: 8px;
    background: #5F5F5F; cursor: pointer;
    opacity: 0.5;
    transition: width 0.35s ease, background-color 0.35s ease;
  }
  .op-sostav__bullet.is-active { width: 34px; background: #5F5F5F;opacity: 0.5; }
  .op-shops__pagination {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 32px;
  }
  .op-shops__bullet {
    width: 5px; height: 5px; padding: 0; border: 0; border-radius: 8px;
    background: #5F5F5F; cursor: pointer;
    opacity: 0.5;
    transition: width 0.35s ease, background-color 0.35s ease;
  }
  .op-shops__bullet.is-active { width: 34px; background: #5F5F5F; opacity: 0.5; }
  .op-sostav .op-link {
    margin-top: 32px; gap: 14px;
    padding: 4px 4px 4px 16px; border-radius: 14px;
    font-size: 16px;
  }
  .op-sostav .op-link__arrow { width: 36px; height: 36px; }

  .op-banner { margin-top: 64px; }
  .op-lightzone { padding-block: 48px 40px; padding-top: 100px; }
  .op-shops .op-h2 { margin-bottom: 20px; }
  /* «Где купить» 360 (кадр Веры 2001:4381 w=940): горизонтальная карусель 1 карта + пик,
     не сетка из 15 логотипов (была 684px, §17). scroll-snap = свайп как в макете. */
  .op-shops__grid {
    display: flex; grid-template-columns: none; flex-wrap: nowrap;
    gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: -16px; padding: 0 16px 8px;        /* край-в-край свайп */
    scrollbar-width: none;
  }
  .op-shops__grid::-webkit-scrollbar { display: none; }
  .op-shops .op-h2{
    margin-bottom: 42px;
  }
  .op-shop {
    border-radius: 14px;
    flex: 0 0 82%; height: auto; aspect-ratio: 580 / 249;
    scroll-snap-align: center;
  }

  .op-faq { padding-top: 100px; }
  .op-faq .op-h2 { margin-bottom: 54px; }
  .op-faq__q { padding: 28px 36px 28px 0; font-size: 18px; }
  .op-faq__a { padding: 0 36px 20px 0; font-size: 15px; }

  .op-useful { padding-top: 100px; }
  .op-useful .op-h2 { margin-bottom: 24px; }
  .op-useful__grid { grid-template-columns: 1fr; gap: 28px; }
  /* карточки статей 360 (кадр Веры Frame 204 h=317, ширина ~328): почти квадрат,
     а не десктопный 875/317 (иначе на 360 фото сплющено до ~119px, §17 −777px). */
  .op-article__photo { aspect-ratio: 328 / 317; }
  .op-article__cap { margin-top: 14px; font-size: 16px; }
  .op-useful > .op-link { margin-top: 32px; }

  .op-refs { padding-top: 48px; padding-bottom: 64px; }
  .op-refs__list li { font-size: 14px; padding: 14px 0; }
}