/* Страница карточки товара.
   Figma: pc 1091:1880 (1920×7412), mb 1091:1753 (390×10457).
   Все значения — из .design/spec/product.md; отклонения перечислены там же в §8.
   Реюз: .au-container / --au-gutter (base.css), .au-dots (home.css:19-35),
   .au-acc + .au-certs (experts.css:96-250), $header / $footer / $home.zayavka /
   $home.legal целиком. */

/* ─── Карточка товара + галерея ───────────────────────────────────────────
   pc: карточка 1089×615 на (96,325), галерея 615×615 на (1209,325) — в ряд,
   зазор 1209 − (96+1089) = 24. Секция кончается на 940, следующая начинается
   заголовком на 1084. */
/* .au-page (content.css) даёт padding-top 93 под крошки и padding-bottom 144
   под пагинацию. Здесь крошки внутри карточки, а легал стыкуется с футером
   вплотную (6332…6875, футер с 6875) — как на главной. */
.au-page--product {
  padding-top: 0;
  padding-bottom: 0;
}

/* Карточка на y325 при шапке 232 в потоке → 93. Совпадает с дефолтом .au-page,
   но задаю на секции: page-паддинги сняты выше ради стыка легала с футером. */
.au-product-hero {
  padding: 93px 0 0;
}

/* Паддинг не переопределяю: .au-container уже несёт гаттер 96 / 26 (base.css),
   а локальное правило перебивало бы mb-каскад по специфичности. */
.au-product-hero .au-container {
  display: flex;
  align-items: stretch;
  gap: 24px;
}

/* Кропы: в Figma у вложенной картинки left/top — смещение самой картинки,
   а CSS background-position в процентах выравнивает (контейнер − картинка).
   Пересчёт: pos = left·W / (W − W·scale) · 100. */

/* ─── Галерея 1091:1897 ─────────────────────────────────────────────────── */
.au-product-gallery {
  position: relative;
  flex: none;
  width: 615px;
  order: 2; /* на pc галерея справа, в DOM она первая — так на mb она сверху */
  height: auto;
  min-height: 615px;
  border: 1px solid var(--au-hairline-dark);
  border-radius: 20px;
  overflow: hidden;
}

/* Слайды лежат друг на друге и переключаются классом: галерея 615×615 с
   overflow hidden, горизонтальная лента дала бы прокрутку колесом там, где в
   макете только стрелки. Новые снимки — полный кадр с прозрачным фоном,
   contain показывает флакон целиком. */
.au-product-gallery__track {
  position: absolute;
  inset: 0;
}

.au-product-gallery__slide {
  position: absolute;
  inset: 0;
  background-image: url(../img/product/gallery-bg.webp);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.au-product-gallery__slide--active {
  opacity: 1;
}

/* Второе фото (фото при наведении): заполнение fill (cover) на всю карточку без отступов */
.au-product-gallery__slide--hover {
  background-size: cover;
  background-position: center center;
}

/* Зоны наведения: N вертикальных полос для переключения фото движением мыши */
.au-product-gallery__zones {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 3;
}

.au-product-gallery__zone {
  flex: 1 1 0;
  height: 100%;
  cursor: pointer;
}

@media (hover: none) {
  .au-product-gallery__zones {
    display: none;
  }
}

/* 1091:1900 — бейдж на (445,35), бокс 134×48 */
.au-product-gallery__badge {
  position: absolute;
  /* было left: calc(445/615*100%). Текст — productBadge из CMS, его ширина не
     масштабируется как макетные 134px: на узких экранах то, что держалось
     процентом от левого края, подъезжает к правому краю галереи и обрезается
     её overflow:hidden (сильнее на длинных бейджах — дефект списка round2,
     виден только там, где productBadge длиннее макетного). Правый отступ
     из макета: 613 (clientWidth border-box, тот же приём, что у стрелки
     next) − 445 − 134 = 34; max-width переносит длинный текст на строки
     вместо выезда за карточку и не подпускает его ближе стрелки prev (35px)
     к левому краю. */
  right: 34px;
  max-width: calc(100% - 34px - 35px);
  top: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px 14px;
  border-radius: 260px;
  background: #f4f4f4;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: 36px;
  color: var(--au-black);
}

/* Стрелки галереи: на десктопе скрыты (листание через зоны наведения мыши),
   на мобилке показываются в @media (max-width: 1023px). Иконка в разметке одна
   (Lucide arrow-left), поэтому стрелку «вперёд» отражает её же файл — как у
   стрелок похожих товаров и слайдера. */
.au-product-gallery__arrow {
  display: none;
}
.au-product-gallery__arrow--next img {
  transform: scaleX(-1);
}
.au-product-gallery__dots {
  position: absolute;
  left: 50%;
  bottom: 28px;
  top: auto;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
}

.au-product-gallery__dots .au-dots__item {
  position: relative; /* область нажатия растёт от самой точки, см. ::before */
  cursor: pointer;
  border: none;
  padding: 0;
  width: 6px;
  height: 6px;
  background: var(--au-dot-color, var(--au-black));
  opacity: 0.18;
  border-radius: 50%;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Точка — единственное управление галереей на десктопе: стрелки там скрыты и
   появляются только в @media (max-width: 1023px). Шесть пикселей — это размер
   рисунка по макету, а не цель для мыши: промах на три пикселя оставляет слайд
   прежним. Невидимая область нажатия доводит её до 12×24 на точку. Шире
   нельзя: шаг между точками 12px (6 точка + 6 зазор), соседние области
   наложились бы, и правая перехватывала бы левую. Рисунок, раскладка и
   таб-обход не меняются. */
.au-product-gallery__dots .au-dots__item::before {
  content: "";
  position: absolute;
  inset: -9px -3px;
}

.au-product-gallery__dots .au-dots__item--active {
  opacity: 1;
  transform: scale(1.15);
}

.au-product-gallery__dots .au-dots__item:hover,
.au-product-gallery__dots .au-dots__item:focus-visible {
  opacity: 0.6;
}

/* ─── Карточка 1091:1883 ────────────────────────────────────────────────── */
.au-product-card {
  position: relative;
  flex: none;
  width: 1089px;
  order: 1;
  height: 615px;
  border: 1px solid var(--au-hairline-dark);
  border-radius: 20px;
  overflow: hidden;
}

/* Ниже 1024 галерея и карточка не сжимаются вовсе (flex:none выше — исходное,
   допродуктовое состояние). Сжатие включено только на pc: их общий родитель
   .au-product-hero .au-container — flex без direction, а на mb (max-width:1023px)
   та же секция получает flex-direction:column БЕЗ сброса flex у детей. Если
   задать flex-basis (часть шорткода flex: N 1 0) в общем правиле, он и там
   станет управлять размером по главной оси — а на mb главная ось вертикальная,
   и flex-basis:0 в column перебивает mb-шные явные height, схлопывая оба
   блока почти до нуля (были подобраны опытным путём после того, как страж
   макета 390 показал сдвиг ~200 элементов — регрессия именно отсюда).
   Поэтому вес 1089:615 включаю только тут, под ≥1024. */
@media (min-width: 1024px) {
  .au-product-gallery {
    flex: 615 1 0;
    min-width: 0;
    max-width: 615px;
  }

  .au-product-card {
    flex: 1089 1 0;
    min-width: 0;
    max-width: 1089px;
  }
}

/* 1091:1884 — крошки на (71,68), Inter Regular 12, opacity .5 */
.au-product-card__crumbs {
  position: absolute;
  left: 71px;
  top: 68px;
  font-size: 12px;
  font-weight: 400;
  color: var(--au-black);
  /* Кегль 12/400 — не крупный, порог 4.5. При 0.5 было 3.98 на белом (чуть
     ниже порога), 0.56 — 4.94. */
  opacity: 0.56;
}

.au-product-card__crumbs a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

/* VIS-09: ховер и фокус ссылок крошек в карточке товара (паттерн cart.css:78) */
.au-product-card__crumbs a:hover,
.au-product-card__crumbs a:focus-visible {
  text-decoration: underline;
  text-underline-position: from-font;
}

/* 1091:1885 — H1 на (71,107), Inter SemiBold 48. На 1920 (эталон) и на mb —
   абсолют с фиксированным top, как в макете. На 1024–1919 карточка сжимается
   (см. .au-product-card) и колонка описания уже, текст переносится на больше
   строк и наезжает на фикс-top соседей — тот же баг, что чинили на mb
   (context/decisions.md §54). Лечение то же — обычный поток с макетным шагом
   вместо top, но только в этом промежуточном диапазоне (см. медиа-запрос
   ниже, после .au-product-forms): на 1920 трогать нельзя (страж макета), а
   position:static меняет алгоритм расчёта ширины у H1/цены с shrink-to-fit
   на «во всю ширину родителя» — на 1920 это увеличило бы их фактическую
   ширину и страж бы это заметил, поэтому в потоке они только там, где эта
   разница ни на что не влияет и не проверяется (детектор ловит только
   наложения/обрезки, а не «лишнюю» невидимую ширину блока). */
.au-product-card__title {
  position: absolute;
  left: 71px;
  top: 107px;
  margin: 0;
  /* Кегль едет вместе с карточкой (правило 2.5): 40 на 1920, 28 на 1024 — та же
     шкала, что у `.au-course__title`, потому что карточка сужается 1089 → 588,
     то есть 0.54, а колонка контента 1728 → 944, то есть 0.55: одна скорость,
     значит и шкала общая, а не своя.
     §137: волна — Inter Tight 400, кегль 48 → 40 (как `.au-course__title`). */
  font-size: calc(28px + 12px * var(--au-k));
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 400;
  line-height: normal;
  color: var(--au-black);
}

/* 1091:1886 — описание на (71,201), бокс 673, Inter Regular 18/24. */
.au-product-card__desc {
  position: absolute;
  left: 71px;
  top: 201px;
  /* было 673px; карточка теперь сжимается (см. .au-product-card) — тянем
     ширину описания вместе с ней в той же пропорции 673/1089, чтобы текст
     не вылезал за карточку и не схлопывался слишком резко.
     §137: волна — Inter Tight Regular 400, как у `.au-home-zayavka__message`. */
  width: calc(673 / 1089 * 100%);
  margin: 0;
  white-space: pre-line;
  font-size: 18px;
  font-weight: 400;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: 24px;
  color: var(--au-black);
}

/* Цены — две ноды макета с разными top (1091:1888 y321, 1091:1887 y348), но
   одна строка, а не два абсолюта: старая цена идёт за новой. Было
   `left: 343px` от кадра — цена с лишним разрядом налезала на старую
   (шестизначная на 390 уходила под неё, семизначная налезала и на pc).
   Потолок замерен: замеры и вывод — context/decisions.md §116.
   Зазор 24 = 343 − 71 − 248 из нод: 248 — бокс новой цены в макете.
   Верх строки 321 — координата ноды; она же единственная в карточке ценовая:
   строка стала первым элементом потока, до неё в потоке ничего нет. */
.au-product-card__price {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 321px 0 0 71px;
}

/* `flex: none` — ширина строго по тексту: цена не сжимается и не переносится,
   она толкает старую вправо. Тот же приём и та же причина, что были у
   `display` этой строки в полосе 1024…1919: бокс обязан остаться shrink-to-fit. */
.au-product-card__price-new {
  flex: none;
  font-size: 64px;
  font-weight: 500;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: normal;
  color: var(--au-black);
}

.au-product-card__price-old {
  flex: none;
  margin-top: 27px; /* 348 − 321 — ниже новой цены */
  font-size: 36px;
  font-weight: 500;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: normal;
  color: var(--au-black);
  /* Кегль крупный (36/500 на Inter Tight, на mb 24/500), порог 3.0:
     при 0.25 было 1.83, 0.47 — 3.59. */
  opacity: 0.47;
}

/* 1091:1664 — счётчик 173×68 на (71,470). Символы в макете по фиксированным
   долям бокса: + 19.65%, значение 42.77%, минус 66.47% — порядок в DOM другой
   (минус, значение, плюс), поэтому позиции задаются явно, а не flex-потоком. */
.au-product-count {
  position: absolute;
  left: 71px;
  top: 470px;
  width: 173px;
  height: 68px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 90px;
}

/* §137: счётчик количества — кнопки +/− и значение. Это «цифровые» элементы,
   не текст. На главной аналога по ярусу нет; на внутренних Inter Tight
   Medium 500, как у `.au-product-card__price-new` (цена — тот же ярус). */
.au-product-count__btn,
.au-product-count__value {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  font-weight: 500;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: normal;
  color: var(--au-black);
  /* Кегль 32/500 — крупный, порог 3.0: при 0.3 было 2.11 на белом, 0.47 — 3.59. */
  opacity: 0.47;
  transition: opacity 0.2s ease;
}

/* VIS-11: ховер кнопок количества товара (паттерн cart.css:137) */
.au-product-count__btn:not(:disabled):hover {
  opacity: 0.85;
}

/* Доли бокса из нод: + 19.65%, значение 42.77%, − 66.47% от 173 */
/* Выключенная кнопка должна быть видна, а не молчать (правило 8.8). Браузер
   свою отрисовку disabled задаёт, но color и opacity класса её перебивают —
   замерено: до этой правки состояние disabled не меняло ни цвета, ни
   прозрачности, ни курсора. 0.35 против рабочей 0.47 — предел читается глазом,
   а прежние 0.1 давали 1.25 на белом, то есть кнопки не было видно вовсе.
   Норму 3.0 здесь не требуем: WCAG 1.4.3 выводит неактивные элементы из-под
   требования, и поднимать состояние до рабочего значило бы стереть признак
   предела — за него отвечает 8.8. */
.au-product-count__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.au-product-count__btn--plus {
  left: 34px;
}

.au-product-count__value {
  left: 74px;
}

.au-product-count__btn--minus {
  left: 115px;
}

/* 1091:1889 — кнопка 269×68 на (281,470) */
/* Кнопка-ссылка: оформления заказа в макете нет, поэтому «Добавить в корзину»
   ведёт к форме заявки (context/decisions.md §5). Сброс подчёркивания — она
   должна выглядеть кнопкой, как в макете. */
.au-product-card__basket {
  position: absolute;
  left: 281px;
  top: 470px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 34px;
  border-radius: 260px;
  background: var(--au-black);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

/* VIS-05: ховер кнопки добавления в корзину (паттерн кнопок content.css:103) */
.au-product-card__basket:hover {
  opacity: 0.85;
}

/* Регистр берётся из текста, не из стиля (реестр, правило 2.7): в разметке уже
   «Добавить в корзину» (`product.hero.tpl:82`), прежний `capitalize` давал
   «Добавить В Корзину» — второй «заборчик» сайта. Снято по решению владельца
   от 2026-09-23 и спорит с макетом: у ноды 1091:1654 `capitalize` поставлен
   руками дизайнера. Цена — 3.25px ширины надписи (166.16 → 162.91) и столько
   же у кнопки: 274.16 → 270.91 при макетных 269, то есть к мамету ближе.
   Высота 68 не меняется: её держит `line-height: 36px` плюс паддинги.
   §137: подпись кнопки — ярлык-действие: Inter Tight 500, как у `.au-btn`. */
.au-product-card__basket-label {
  font-size: 16px;
  font-weight: 500;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: 36px;
  color: var(--au-white);
}

.au-product-card__basket img {
  display: block;
  width: 28px;
  height: 28px;
}

/* Пилюли 1091:1891/1895/1893 — x 795 / 869 / 955, все top 486, ширина ряда
   ~228px. Карточка (см. .au-product-card) сжимается вместе с галереей, а
   кнопка «в корзину» (281–550px) и счётчик слева не сжимаются вовсе — на
   1024–~1800 карточке физически не хватает ширины, чтобы после кнопки
   осталось место для пилюль без наложения на неё или обрезки правым краем
   карточки (overflow:hidden). Ни проценты, ни небольшой сдвиг это не лечат —
   единственный работающий вариант ниже design-ширины: увести пилюли под
   кнопку. Возврат в исходный ряд — в медиа-запросе ниже, там, где карточка
   снова достаточно широкая. */
.au-product-forms {
  position: absolute;
  left: 71px;
  top: 550px; /* 538 (низ кнопки «в корзину») + 12 */
  display: flex;
  gap: 8px; /* 869 − (795+66) = 8 и 955 − (869+78) = 8 */
}

/* ─── Промежуточный диапазон 1024–1919: карточка растёт по описанию/цене ──
   На 1920 (эталон) и на mb — абсолют с фиксированными top, как в макете и
   как выше по файлу. Здесь же карточка уже 1089 (см. .au-product-card) и
   колонка описания (calc(673/1089*100%)) уже настоящих 673px — длинный
   текст переносится на больше строк, чем в макете, и наезжает на фикс-top
   соседей снизу. Лечение — тот же приём, что на mb (context/decisions.md
   §54): title/desc/price уходят из абсолюта в обычный поток с макетным
   шагом вместо top (107 / 36 = 201−165 / 72 = 321−249, те же числа, что
   были в top). Только здесь, а не в общем правиле — на 1920 position:static
   поменял бы алгоритм ширины H1/цены с shrink-to-fit на «во всю ширину
   родителя» и страж бы это заметил (см. комментарий у .au-product-card__title
   выше), а на 1920 карточка и так не сжата — переноса ровно как в макете, и
   без перевода в поток фикс-top уже не наедет ни на что.
   Счётчик/кнопка/пилюли сами остаются absolute (независимые сиблинги в DOM,
   без общего wrapper — см. product.hero.tpl, менять шаблон нельзя), но
   получают top:auto — это включает алгоритм «статической позиции»: браузер
   считает, где бы стоял элемент, будь он position:static, т.е. сразу после
   последнего элемента в потоке (.au-product-card__price), полностью
   игнорируя других absolute-соседей. margin-top поверх этой позиции
   воспроизводит те же шаги, что были в top (72 = 470−398, 152 = 550−398),
   так что весь ряд покупки и пилюли уезжают вниз вместе с ценой, а не
   наезжают на неё. */
@media (min-width: 1024px) and (max-width: 1919px) {
  .au-product-card {
    height: auto;
    padding-bottom: 204px;
  }

  .au-product-card__title {
    position: static;
    margin: 107px 0 0 71px;
  }

  .au-product-card__desc {
    position: static;
    margin: 36px 0 0 71px;
  }

  .au-product-card__price {
    position: relative; /* якорь статической позиции для счётчика, кнопки и форм */
    margin: 72px 0 0 71px;
  }

  /* 343 − 71 = 272, 348 − 321 = 27 — та же старая цена: в потоке её держат
     зазор строки и margin-top базового правила, отдельных координат не нужно. */
  .au-product-count {
    top: auto;
    margin-top: 36px;
  }

  .au-product-card__basket {
    top: auto;
    margin-top: 36px;
  }

  .au-product-forms {
    top: auto;
    margin-top: 128px; /* 36 (до ряда покупки) + 68 (высота кнопки) + 24 (зазор до переключателя) */
  }
}

@media (min-width: 1850px) {
  /* С этой ширины карточка достаточно широкая (см. .au-product-card), чтобы
     кнопка и все три пилюли уместились в один ряд без наложения и без обрезки
     краем карточки — возвращаем исходное расположение макета 1091:1891. */
  .au-product-forms {
    left: 795px;
    top: 486px;
    margin-top: 0; /* сбрасываю margin-top:152px из промежуточного правила
       ниже (1024–1919) — тут top снова явный, а не auto */
  }
}

/* `capitalize` снят (реестр, правило 2.7) — и это была правка впрок, а не
   исправление: все три значения однословные и уже с заглавной, отрисовка не
   менялась ни на пиксель. Объявление убрано, чтобы не сработать на будущем
   многословном («Флакон 10 мг» → «Флакон 10 Мг»). */
.au-product-forms__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 90px;
  background: #f4f4f4;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: 36px;
  color: var(--au-black);
  /* Кегль 14/700 — не крупный (до 18.66 при 700 не хватает 4.66), порог 4.5:
     при 0.3 было 2.10 на своей подложке #f4f4f4, 0.56 — 4.85. */
  opacity: 0.56;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

/* VIS-04: ховер переключателя форм выпуска (паттерн пагинатора content.css:317) */
.au-product-forms__item:not(.au-product-forms__item--active):hover {
  background: #e8e8e8;
  opacity: 0.85;
}

.au-product-forms__item--active {
  background: var(--au-black);
  color: var(--au-white);
  opacity: 1;
}

/* ─── «Основная информация» + карточки «Кому подходит» ───────────────────
   Заголовок 1091:1905 на (96,1084) — Inter SemiBold 48, обе строки чёрные
   (НЕ паттерн .au-home-h2 с 72/70 и приглушением: сверено, см. спеку).
   Карточки 414×312 на y1272, шаг 438 → gap 438 − 414 = 24. */
.au-product-audience {
  /* 1084 − 940 (низ секции карточки) — вывод хвоста, но роль головы: зазор
     стоит перед своим содержимым, потому что выше уже идёт ряд карточки
     товара. Число — единица ритма (base.css:83-95), не местный просвет. */
  padding: var(--au-tail) 0 0;
}

/* Нода 1091:1905 — две строки при высоте 116, то есть 58 на строку. `normal`
   у Inter 48px даёт 59 и уводит карточки на 2px вниз.
   Кегль и интерлиньяж едут вместе с колонкой (правило 2.5): 40/58 на 1920,
   28/40 на 1024 — пара та же, что у `.au-course__title`.
   §137: волна — Inter Tight Regular 400, кегль 48 → 40. */
.au-product-audience__title {
  margin: 0;
  font-size: calc(28px + 12px * var(--au-k));
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 400;
  line-height: calc(34px + 14px * var(--au-k));
  color: var(--au-black);
}

.au-product-audience__title--mb {
  display: none;
}

.au-product-audience__grid {
  display: flex;
  gap: 24px;
  margin-top: var(--au-head-gap); /* 1272 − (1084 + 116) */
}

/* 1091:1907 — карточка 414×312. Высоту даёт содержимое: было `height: 312px`,
   и при семи строках текста (товар 01, «Хроническое воспаление») последняя
   строка упиралась в нижнюю кромку — текст кончался на 316 при боксе 312 и
   срезался `overflow: hidden`. Потолок старого бокса — пять строк текста при
   двух строках заголовка; шестая строка давала просвет 0, седьмая уходила под
   кромку (замер потолка — context/decisions.md §112).
   Внутренние отступы — прежние координаты детей: 47 сверху у заголовка, 33
   слева у обоих. Низ 47 — не выдуманное число: макетная карточка 312 при
   борте 1 и пяти строках текста (130) оставляет именно столько
   (312 − 1 − 47 − 40 − 46 − 130 − 1 = 47), а 47 же стоит сверху. */
.au-product-audience__card {
  flex: none;
  width: 414px;
  padding: 47px 33px;
  border: 1px solid var(--au-hairline-dark);
  border-radius: 20px;
  background: var(--au-white);
  /* hidden оставлен: содержимое теперь не переполняется, а углы карточки
     скруглены — декор, если появится, не вылезет за радиус. */
  overflow: hidden;
}

@media (min-width: 1024px) {
  /* 4×414 + 3×24 = 1728 — ровно ширина колонки на 1920, без запаса: на этой
     ширине карточки идут в один ряд впритык (как в макете). Ниже 1920 ряд
     не помещается — пробовали пропорционально СЖИМАТЬ карточки и текст внутри
     них (доля от 414), но при узкой карточке текст уходит на много больше
     строк, и карточка растягивала ряд. Вместо сжатия переносим лишние
     карточки на новую строку: текст/заголовок остаются на исходной ширине.
     Только для ≥1024 — на mb это уже свой вертикальный список
     (flex-direction:column), которому перенос не нужен. */
  .au-product-audience__grid {
    flex-wrap: wrap;
  }

  .au-product-audience__card {
    flex: 1 1 414px;
    max-width: 414px;
  }
}

/* 1091:1908 — заголовок на (33,47), Inter Medium 16, opacity .3.
   `line-height: 20px` вместо `normal`: тот же разбор, что у заголовков
   секций, — на `normal` высота строки плавает, а от неё отсчитан зазор до
   текста. 40 у двух строк заголовка + 46 = 133, макетный верх текста.
   §137: волна — Inter Tight Regular 400. Вес 500 → 400. */
.au-product-audience__card-title {
  margin: 0;
  width: 235px;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: 20px;
  color: var(--au-black);
  /* Кегль 16/400 — не крупный, порог 4.5: при 0.3 было 2.11 на белом, 0.56 — 4.94. */
  opacity: 0.56;
}

/* карточки 3-4 — заголовок шире (321 против 235) */
.au-product-audience__card--wide .au-product-audience__card-title {
  width: 321px;
}

/* 1091:1909 — текст на (33,133), Inter Medium 16/26.
   `margin-top: 46px` = 133 − 47 − 40: зазор считается от низа заголовка, а
   не от верха карточки, поэтому длинный заголовок сдвигает текст вниз, а не
   оказывается под ним.
   §137: волна — Inter Tight Regular 400. Вес 500 → 400. */
.au-product-audience__card-text {
  margin: 46px 0 0;
  width: 346px;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: 26px;
  color: var(--au-black);
}

.au-product-audience__card--wide .au-product-audience__card-text {
  width: 353px;
}

/* ─── Форма выпуска 1091:1919 ───────────────────────────────────────────── */
/* Секция в потоке: высоту даёт содержимое плюс хвост. Было `height: 935px`,
   и та высота была выводом из узла макета 1920 (144 координата заголовка +
   58 его строка + 72 до карточек + 517 карточка + 144 хвост), а не свойством
   контента — длинное название формы выпуска или лишняя карточка раздвигали
   содержимое, а секция добирала разницу пустотой внизу.
   Прежняя координата заголовка (144 от верха секции) отдана контейнеру как
   `padding-top`, а не `margin-top`: маргин схлопнулся бы сквозь контейнер и
   секцию и сдвинул всю страницу (правило 1.3, ловушка 1). */
.au-product-forms-section {
  margin-top: var(--au-tail);
  padding: var(--au-tail) 0;
  background: #686876;
}

/* 1091:1920 — заголовок на (96,144), Inter SemiBold 48, белый.
   Координаты сняты: в потоке левый край даёт гаттер контейнера, верхний —
   `padding-top` секции. `line-height` не `normal` (59): нода заголовка даёт
   58 на строку, и на `normal` карточки уехали бы на 1px вниз. Тот же приём,
   та же причина и та же рампа, что у `.au-product-audience__title`
   (правило 2.5): 40/58 на 1920, 28/40 на 1024.
   §137: волна — Inter Tight Regular 400, кегль 48 → 40. */
.au-product-forms-section__title {
  margin: 0;
  font-size: calc(28px + 12px * var(--au-k));
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 400;
  line-height: calc(34px + 14px * var(--au-k));
  color: var(--au-white);
}

/* карточки 560×517 на y274, x 96 / 680 / 1264 → шаг 584, gap 24.
   `margin-top: 72px` = 274 − (144 + 58): шаг «заголовок → сетка» тот же, что
   у карточек «Кому подходит» и у «Похожих товаров». */
.au-product-forms-section__grid {
  display: flex;
  gap: 24px;
  margin-top: var(--au-head-gap);
}

.au-product-form {
  position: relative;
  flex: none;
  width: 560px;
  height: 517px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.au-product-form:hover,
.au-product-form:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

.au-product-form--current {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* Иконка 48 и водяной знак 256 — один и тот же вектор, разница в размере
   и прозрачности (0.5 / 0.05); второй файл в макете не нужен. */
.au-product-form__icon {
  position: absolute;
  left: 48px;
  width: 48px;
  height: 48px;
  opacity: 0.5;
}

.au-product-form__watermark {
  position: absolute;
  width: 256px;
  height: 256px;
  opacity: 0.05;
}

.au-product-form__photo {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.au-product-form:hover .au-product-form__photo,
.au-product-form:focus-visible .au-product-form__photo {
  transform: scale(1.03);
}

.au-product-form__name {
  position: absolute;
  left: 48px;
  top: 348px;
  margin: 0;
  font-size: 32px;
  font-weight: 400;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: normal;
  color: var(--au-white);
}

.au-product-form__note {
  position: absolute;
  left: 48px;
  top: 407px;
  /* На 1920 (k=1) — ровно 262, как в макете. Карточка (см. .au-product-form)
     ниже 1920 сжимается, и на 1024 (k=0) её ширины не хватает на левые
     48 + 262 (не хватает 11px, текст резался overflow:hidden карточки) —
     250 оставляет запас. mb переопределяет width своим числом (249) ниже,
     этой формулы там не видно.
     §137: волна — Inter Tight Regular 400, как у `.au-home-zayavka__message`. */
  width: calc(250px + 12px * var(--au-k));
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: 23px;
  color: var(--au-white);
}

.au-product-form__note b {
  font-weight: 700;
}

/* Спрей 1091:1921: иконка y71, знак (375,95), фото (375,50) 169×417 */
.au-product-form--spray .au-product-form__icon {
  top: 71px;
}

/* right вместо left: знак на 1920 сам вылезает за край карточки (631 при
   ширине 560) — так и задумано, декоративный элемент. right держит тот же
   зазор от края независимо от того, насколько карточка сжалась; --au-k
   доводит его до вычисленного -71 только к 1920, на 1024 знак не вылезает
   за пределы вьюпорта (иначе на узких ширинах вылет за экран). */
.au-product-form--spray .au-product-form__watermark {
  right: calc(-71px * var(--au-k));
  top: 95px;
}

.au-product-form--spray .au-product-form__photo {
  right: 20px;
  top: -15px;
  width: 240px;
  height: 350px;
  background-size: auto 145%;
  background-position: center bottom;
}

/* Ампула 1091:1929: иконка y64, знак (405,118), фото (333,124) 186×349 */
.au-product-form--ampoule .au-product-form__icon {
  top: 64px;
}

.au-product-form--ampoule .au-product-form__watermark {
  right: calc(-101px * var(--au-k));
  top: 118px;
}

.au-product-form--ampoule .au-product-form__photo {
  right: 25px;
  top: 45px;
  width: 240px;
  height: 275px;
}

/* Ручка 1091:1938: иконка y64, знак (396,123), фото (387,84) 116×404 */
.au-product-form--pen .au-product-form__icon {
  top: 64px;
}

.au-product-form--pen .au-product-form__watermark {
  right: calc(-92px * var(--au-k));
  top: 123px;
}

.au-product-form--pen .au-product-form__photo {
  right: 30px;
  top: -15px;
  width: 150px;
  height: 350px;
  background-size: auto 145%;
  background-position: center bottom;
}

@media (min-width: 1024px) {
  /* Было `left/right: var(--au-gutter)` до перевода грида в поток (правило
     1.3): абсолютный грид надо было ограничивать справа, иначе ряд уходил за
     экран. В потоке грид занимает content-box контейнера сам, edge-объявления
     сняты. Правый `right` к тому же был опасен на mb: там он разворачивался
     вбок и сужал колонку карточек.

     3×560 + 2×24 = 1728 — ровно ширина колонки на 1920. Ниже 1920 ряд из трёх
     карточек по 560 физически не помещается. В отличие от карточек «Кому
     подходит» перенос строки здесь не подходит — соседние карточки разной
     высоты развалили бы ряд. Поэтому карточка именно сжимается; водяной
     знак и фото у неё зафиксированы по right (см. выше), а не по left,
     специально чтобы сжатие тянуло их вместе с правым краем карточки, а не
     оставляло на месте (и не срезало углом overflow:hidden). Только для
     ≥1024 — на mb (max-width:1023px) карточка получает собственные
     фиксированные width/height ниже и flex-direction:column у грида, где
     flex-basis:0 сломал бы высоту (см. аналогичную оговорку у
     .au-product-audience__card). */
  .au-product-form {
    flex: 1 1 0;
    min-width: 0;
    max-width: 560px;
  }
}

/* ─── Аккордеон ─────────────────────────────────────────────────────────
   Разметка и стили — реюз .au-acc / .au-certs (experts.css). Здесь отступ
   секции и правка вертикали панели: на «Специалистах» панель несёт
   padding 30/40, на этой странице ноды дают 20 сверху (2785 + строка 83
   → абзац 2888) и 40 снизу (абзац2 2958 + 66 → строка 3064). Разница в 10
   сверху копилась и уводила низ страницы на 138px. */
.au-product-details {
  padding: 122px 0 0;
}

.au-product-details .au-acc {
  margin-top: 0; /* .au-acc несёт margin-top 72 под свою страницу */
}

.au-product-details .au-acc__panel {
  padding-top: 20px;
}

/* Панель сертификатов: карточки на y3177 при строке 3062+83 = 3145 → 32 сверху
   (у текстовых панелей 20), снизу 50 как на «Специалистах» → строка 3714. */
.au-product-details .au-acc__panel--certs {
  padding-top: 32px;
}

/* ─── Похожие товары ────────────────────────────────────────────────────
   Заголовок 1091:1906 на (96,4288) — снова 48, не 72/70.
   Карточки 561×574 на y4418, x 96 / 681 / 1263 → шаг 585 и 582, gap 24. */
.au-product-similar {
  position: relative;
  /* Сверху 4288 − 4144 = хвост ритма; снизу до заявки на 5252 при низе
     типа/объёма 5115 — 137, и это НЕ хвост: 137 описывает замеренный просвет
     до следующей секции на этой странице (правило 1.1, «низ — 137, не 144»),
     поэтому вниз идёт литералом, а не токеном. */
  padding: var(--au-tail) 0 137px;
}

.au-product-similar .au-container {
  position: relative;
}

/* Кегль едет вместе с колонкой (правило 2.5) — та же рампа, что у остальных
   трёх заголовков страницы: 40 на 1920, 28 на 1024. `line-height: normal`
   оставлен: он уже едет за кеглем, а 59 на 1920 совпадает с прежней
   отрисовкой, то есть низ сетки не двигается.
   §137: волна — Inter Tight Regular 400, кегль 48 → 40. */
.au-product-similar__title {
  margin: 0;
  min-height: 68px;
  display: flex;
  align-items: center;
  font-size: calc(28px + 12px * var(--au-k));
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 400;
  line-height: normal;
  color: var(--au-black);
}

/* 1091:2007 — пара пилюль 240×68 на (1584,4288), правый край 1824 = гаттер */
.au-product-similar__nav {
  position: absolute;
  right: var(--au-gutter);
  top: 0;
  display: flex;
  width: 240px;
  height: 68px;
}

.au-product-similar__arrow {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;
  border: 1px solid var(--au-hairline-dark);
  border-radius: 260px;
  background: var(--au-white);
  opacity: 0.5;
  transition: opacity 0.2s;
}

.au-product-similar__arrow:hover,
.au-product-similar__arrow:focus-visible {
  opacity: 1;
}

.au-product-similar__arrow img {
  display: block;
  width: 36px;
  height: auto;
}

.au-product-similar__arrow--prev img {
  transform: scaleX(-1);
}

.au-product-similar__grid {
  display: flex;
  gap: 24px;
  margin-top: 40px; /* отступ от стрелочек слайдера (высота 68px) до слайдера — 40px */
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.au-product-similar__grid::-webkit-scrollbar {
  display: none;
}

/* 3 карточки плюс 2 зазора 24px в видимой области контейнера на десктопе */
.au-product-similar__card {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: calc((100% - 48px) / 3);
  max-width: calc((100% - 48px) / 3);
}

.au-product-similar__photo {
  /* relative — опора для слоя наведения au-card-hover (home.css): он тянется
     inset: 0 по фото. У карточки каталога такой опорой служит само фото. */
  position: relative;
  /* 561×574 в макете — соотношение 1:1.023. Ширину даёт карточка (ниже 1920
     она делит строку), высота идёт от неё, иначе фото вылезало за карточку
     и создавало горизонтальный скролл. */
  width: 100%;
  aspect-ratio: 561 / 574;
  border-radius: 20px;
  background-color: var(--au-band);
  background-repeat: no-repeat;
}

/* Снимки нормализованы под квадратный кадр (см. home.css), поэтому contain и
   файлы из `img/product/`. Правило видно, когда у товара не заполнено фото. */
.au-product-similar__photo--spray {
  background-image: url(../img/product/spray-01-refresh.webp);
  background-size: contain;
  background-position: 50% 50%;
}

/* Флакон вдвое ниже спрея и ручки, но нормализация снимков растянула все три
   объекта до одной высоты кадра, и в ряду «Похожих» он выглядел крупнейшим.
   Кроп уменьшен вдвое, флакон стоит на одной линии с соседями — как в карточках
   каталога (home.css). Спрей и ручка не затронуты.
   91%: проценты в background-position отсчитываются от разницы размеров бокса и
   фона, а низ изделия в файле лежит на 93% высоты кадра, не на самом краю. */
.au-product-similar__photo--ampoule {
  background-image: url(../img/product/dry-01-refresh.webp);
  background-size: auto 50%;
  background-position: 50% 91%;
}

.au-product-similar__photo--pen {
  background-image: url(../img/product/pen-01-refresh.webp);
  background-size: contain;
  background-position: 50% 50%;
}

/* 1091:1990 — название Inter Medium 32 с падом 10; y5012 при низе фото 4992.
   §137: волна — Inter Tight Regular 400, как у `.au-home-catalog__name`
   (Inter Regular 400 на главной, но у того кегль 26+6k, а здесь фикс 32). */
.au-product-similar__name {
  margin: 19px 0 0; /* фото кончается 4993, нода названия 5012, внутри ещё пад 10 */
  padding: 10px 0;
  font-size: 32px;
  font-weight: 400;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: normal;
  color: var(--au-black);
}

/* 1091:1998 — тип/объём Inter Medium 20, opacity .56, y5066.
   §137: волна — Inter Tight Regular 400, как у `.au-home-catalog__pack`. */
.au-product-similar__pack {
  margin: 0;
  padding: 10px 0;
  font-size: 20px;
  font-weight: 400;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  line-height: normal;
  color: var(--au-black);
  opacity: 0.56;
}

/* Цена в pc-макете отсутствует, появляется только на mb (1091:1801) */
.au-product-similar__price {
  display: none;
}

.au-product-similar__dots {
  display: none; /* точки только на mb (1091:1812) */
}

/* ─── Мобильный макет: 390px ─────────────────────────────────────────────
   Порядок секций на mb другой: галерея y129 → карточка y557 → заголовок
   «Кому подходит» y1217 → карточки y1321 → форма выпуска y2817 →
   похожие y4400 → аккордеон y5129. Смена местами похожих и аккордеона
   решается order на .au-page--product. */

@media (max-width: 1023px) {
  /* Похожие товары (y4400) на mb идут перед аккордеоном (y5129) — в DOM
     порядок pc-шный, поэтому переставляем флексом на уровне страницы. */
  .au-page--product {
    display: flex;
    flex-direction: column;
  }

  .au-page--product > .au-product-similar {
    order: 1;
  }

  .au-page--product > .au-product-details {
    order: 2;
  }

  .au-page--product > .au-home-zayavka {
    order: 3;
  }

  .au-page--product > .au-home-legal {
    order: 4;
  }

  .au-product-hero {
    padding: 64px 0 0; /* галерея 1091:1755 на y129 при шапке 65 */
  }

  .au-product-hero .au-container {
    flex-direction: column;
    gap: 24px; /* 557 − (129 + 404) = 24 */
  }

  /* 1091:1755 — 338×404. Слайды кроп не меняют: работает contain из базовых
     правил. Кроп 173.53% из макета (1091:1756) рисовал макетную картинку под
     размер бокса, а снимкам товара увеличивал кадр в 1.7 раза; фото при
     наведении свой кроп сохраняет — оно в базовых правилах отдельным классом. */
  .au-product-gallery {
    order: 1;
    width: 338px;
    height: 404px;
    min-height: 0;
  }

  /* 1091:1758 — бейдж на (180,32) */
  .au-product-gallery__badge {
    left: 180px;
    top: 32px;
  }

  /* Стрелки Lucide arrow-left на мобилке: белые, без фона и тени, большая зона нажатия */
  .au-product-gallery__arrow {
    display: flex;
    position: absolute;
    top: calc(50% - 24px);
    width: 48px;
    height: 48px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    cursor: pointer;
    z-index: 5;
    align-items: center;
    justify-content: center;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .au-product-gallery__arrow img {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  }

  .au-product-gallery__arrow:hover,
  .au-product-gallery__arrow:focus-visible {
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .au-product-gallery__arrow:active {
    opacity: 0.6;
  }

  .au-product-gallery__arrow--prev {
    left: 10px;
  }

  .au-product-gallery__arrow--next {
    left: auto;
    right: 10px;
  }

  .au-product-gallery__dots {
    left: 50%;
    top: auto;
    bottom: 20px;
    transform: translateX(-50%);
    gap: 6px;
  }

  .au-product-gallery__dots .au-dots__item {
    width: 6px;
    height: 6px;
  }

  /* 1091:1813 — карточка 338×588, фон белый. Описание приходит из CMS и бывает
     длиннее макетных пяти строк (281×115), поэтому заголовок, описание и цена
     стоят в потоке с макетным шагом 36 — в макете это и есть flex-колонка
     1091:1814, а не абсолют. Длинный текст сдвигает цену вниз, а не оказывается
     под ней. Ряд покупки прижат к низу, хвост держит padding-bottom. */
  .au-product-card {
    order: 2;
    width: 338px;
    height: auto;
    padding-bottom: 187px; /* 72 до ряда покупки + 68 его высота + 47 хвост */
    background: var(--au-white);
  }

  /* крошек на mb в макете нет */
  .au-product-card__crumbs {
    display: none;
  }

  /* Пилюли переезжают наверх: y47, x 23 / 97 / 183 (1091:1823/1827/1825) */
  .au-product-forms {
    left: 23px;
    top: 47px;
    gap: 8px;
  }

  /* 1091:1816 — H1 на (23,139), Inter SemiBold 28 */
  .au-product-card__title {
    position: static;
    margin: 139px 0 0 23px;
    width: 281px;
    font-size: 28px;
  }

  /* 1091:1818 — описание на (23,209), Inter Medium 16/23 */
  .au-product-card__desc {
    position: static;
    margin: 36px 0 0 23px; /* 209 − 173 (низ H1) */
    width: 281px;
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
  }

  /* 1091:1822 y360 / 1091:1821 (165,368). 360 − 324 (низ описания) = те же 36.
     Старая цена смещена относительно новой, а не карточки: 165 − 23 и 368 − 360,
     поэтому <p> цены стал для неё точкой отсчёта. */
  .au-product-card__price {
    position: relative;
    /* Зазор 18: нода старой цены стоит на x142 от края обёртки, новая цена в
       нашей гарнитуре занимает 123.67 — 142 − 123.67 = 18.33, округлено до 18,
       так отрисовка на 390 сохраняется в пределах 0.33px. */
    gap: 18px;
    margin: 36px 0 0 23px;
  }

  .au-product-card__price-new {
    font-size: 32px;
  }

  .au-product-card__price-old {
    margin-top: 8px;
    font-size: 24px;
  }

  .au-product-count {
    left: 23px;
    top: auto;
    bottom: 47px; /* 586 − (471 + 68): 588 борт-бокса минус две рамки */
  }

  /* 1091:1819 — кнопка 96×68 на (221,471), только иконка. Высоту на pc держит
     line-height подписи (36 + 16×2); подпись скрыта, поэтому задаю явно. */
  .au-product-card__basket {
    left: 221px;
    top: auto;
    bottom: 47px;
    height: 68px;
  }

  .au-product-card__basket-label {
    display: none;
  }

  /* ─── «Кому подходит» на mb ───────────────────────────────────────────
     Заголовок 1091:1763 на (26,1217) — свой текст, 28. Карточки 338×338
     в столбец, шаг 362 → gap 24. */
  .au-product-audience {
    padding: var(--au-tail-mb) 0 0; /* 1217 − (557 + 588) — голова */
  }

  .au-product-audience__title--pc {
    display: none;
  }

  /* 1091:1763 — нода 68 высотой при кегле 28, то есть две строки по 34.
     Высота от содержимого, а не `height: 68px`: на 390 заголовок занимает
     обе строки ровно (68 из 68), и третьей строке — от длинного названия
     товара — места нет; текст уходил бы под карточки. Снятие высоты на 390
     не меняет ничего, а в полосе 600…1023 заголовок ложится в одну строку,
     и бокс перестаёт держать под ним пустые 34. */
  .au-product-audience__title--mb {
    display: block;
    font-size: 28px;
    line-height: 34px;
  }

  .au-product-audience__grid {
    flex-direction: column;
    margin-top: var(--au-head-gap); /* 1321 − (1217 + 68) */
  }

  .au-product-audience__card {
    width: 338px;
    padding: 47px 23px;
  }

  /* Координаты сняты вместе с высотой карточки: место заголовка и текста в
     потоке даёт паддинг карточки и зазор 46 между ними, ширины остаются
     макетными. */
  .au-product-audience__card-title,
  .au-product-audience__card--wide .au-product-audience__card-title {
    width: 239px;
  }

  .au-product-audience__card--wide .au-product-audience__card-title {
    width: 281px;
  }

  .au-product-audience__card-text,
  .au-product-audience__card--wide .au-product-audience__card-text {
    width: 281px;
  }

  /* ─── Форма выпуска на mb 1091:1776 ─────────────────────────────────── */
  /* Как и на pc — в поток: `height: 1583px` была выводом из узла (72
     координата заголовка + 44 его строка + 72 до карточек + 1323 столбец
     + 72 хвост). Верхний отступ — паддинг секции, хвост — токен. */
  .au-product-forms-section {
    margin-top: var(--au-tail-mb); /* голова: 2817 − 2745 (низ последней карточки) */
    padding: var(--au-tail-mb) 0;
  }

  /* 1091:1777 — заголовок на (26,72), 36 */
  .au-product-forms-section__title {
    font-size: 36px;
    line-height: 44px;
  }

  /* карточки 338×425 в столбец на x26, y 188 / 637 / 1086 → шаг 449, gap 24 */
  .au-product-forms-section__grid {
    flex-direction: column;
  }

  .au-product-form {
    width: 338px;
    height: 425px;
  }

  /* На mb иконка уходит под текст (36,341), знак вылезает за левый край */
  .au-product-form__icon {
    left: 36px;
    top: 341px;
  }

  .au-product-form__name {
    left: 36px;
    top: 48px;
    font-size: 26px; /* не 32: сверено по 1091:1780 */
  }

  /* 1091:1781 — Inter Regular 16/26, ширина 249 (на pc Medium 16/23) */
  .au-product-form__note {
    left: 36px;
    top: 103px;
    width: 249px;
    font-weight: 400;
    line-height: 26px;
  }

  .au-product-form--spray .au-product-form__icon,
  .au-product-form--ampoule .au-product-form__icon,
  .au-product-form--pen .au-product-form__icon {
    top: 341px;
  }

  /* Знаки: спрей (−80,56), ампула (−128,73), ручка (−101,103) */
  .au-product-form--spray .au-product-form__watermark {
    left: -80px;
    top: 56px;
  }

  .au-product-form--ampoule .au-product-form__watermark {
    left: -128px;
    top: 73px;
  }

  .au-product-form--pen .au-product-form__watermark {
    left: -101px;
    top: 103px;
  }

  /* Фото: спрей (212,177) 117×289, ампула (182,196) 137×257,
     ручка (231,184) 82×284 — кропы те же, что на pc */
  .au-product-form--spray .au-product-form__photo {
    left: auto;
    right: 8px;
    top: 165px;
    width: 130px;
    height: 260px;
    background-size: auto 135%;
    background-position: center bottom;
  }

  .au-product-form--ampoule .au-product-form__photo {
    left: auto;
    right: 12px;
    top: 175px;
    width: 150px;
    height: 220px;
  }

  .au-product-form--pen .au-product-form__photo {
    left: auto;
    right: 14px;
    top: 155px;
    width: 110px;
    height: 275px;
    background-size: auto 140%;
    background-position: center bottom;
  }

  /* ─── Похожие товары на mb 1091:1796 ────────────────────────────────
     На mb этот блок стоит ПЕРЕД аккордеоном (y4400 против y5129) —
     порядок задаётся order на .au-page--product.
     Сверху 4472 − 4400 = 72; снизу точки кончаются на 5129, аккордеон
     стартует 5201 → тоже 72 (на pc снизу 137). */
  .au-product-similar {
    padding: var(--au-tail-mb) 0;
  }

  /* 1091:1797 — заголовок на (26,4472), 36, две строки по 44. Высота от
     содержимого, а не `height: 88px`: ширина 172 держит перенос сама, поэтому
     на всех ширинах полосы строк ровно две и снятие высоты не двигает низ —
     а третий строке от длинной копии будет куда расти. */
  .au-product-similar__title {
    width: 172px;
    min-height: auto;
    display: block;
    font-size: 36px;
    line-height: 44px;
  }

  /* стрелок на mb нет — вместо них точки */
  .au-product-similar__nav {
    display: none;
  }

  /* карточки 272×297 в ряд, x 26 и 322 → шаг 296, gap 24; третья за экраном */
  .au-product-similar__grid {
    margin-top: var(--au-head-gap); /* 4632 − (4472 + 88) */
    gap: 24px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .au-product-similar__grid::-webkit-scrollbar {
    display: none;
  }

  .au-product-similar__card {
    /* pc делит строку через flex — на mb карточки фиксированы и уезжают
       в горизонтальный скролл, поэтому сжатие отключено. */
    flex: none;
    width: 272px;
    max-width: none;
  }

  /* Нода 1091:1803 — бокс 272×297, внутренний 1091:1804 272×261 отцентрован,
     картинка в нём 279.02%×218.05% при left −89.51% top −59.17%.
     Пересчёт к боксу: высота 261·2.1805/297, смещение с учётом (297−261)/2. */
  .au-product-similar__photo {
    width: 272px;
    height: 297px;
    aspect-ratio: auto; /* pc тянет высоту от ширины — на mb бокс фиксирован */
    background-size: 279.02%;
    background-position: 50% 50.14%;
  }

  /* Ноды 1091:1799…1091:1802: фото кончается 4929, название 4939 (внутри ноды
     пад 10), тип/объём 4998, цена 5054. */
  .au-product-similar__name {
    margin: 0;
    padding: 10px 0;
    font-size: 26px;
  }

  .au-product-similar__pack {
    padding: 0;
    margin-top: 18px; /* нода 4998 при низе названия 4980 */
  }

  /* 1091:1801 — цена Inter Medium 24 на y5054; тип/объём кончается 5022 */
  .au-product-similar__price {
    display: block;
    margin: 32px 0 0;
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    color: var(--au-black);
  }

  /* 1091:1812 — точки на (158,5119), в макете три по 74px. Число точек —
     остановки ленты (slider.js), ряд центрируется по ширине колонки.
     Карточка кончается на 5114 (4632 + 482: фото 297 + название 51 + 18 +
     тип 24 + 32 + цена 29), → 5. */
  .au-product-similar__dots {
    display: flex;
    justify-content: center;
    margin-top: 5px;
  }

  /* ─── Аккордеон на mb ────────────────────────────────────────────────
     Разделителей нет: шаг закрытых строк 140 при высоте строки 68 → зазор 72
     (на pc вместо него линия + 13/14).
     Сертификатов ТРИ (1091:1849/1850/1851), на pc четыре — четвёртый скрыт,
     иначе низ страницы уезжает на 497 (карточка 473 + зазор 24). */
  .au-product-details {
    /* низ последней строки 7682, заявка стартует 7754 */
    padding: 0 0 72px;
  }

  .au-product-details .au-acc__item:not([open]) {
    padding-bottom: 0;
    border-bottom-width: 0;
  }

  .au-product-details .au-acc__item + .au-acc__item {
    margin-top: var(--au-item-gap);
  }

  /* 36 сверху: текст 5305 при строке 5201+68. Снизу 0 — зазор до следующей
     строки уже даёт margin-top 72 у .au-acc__item + .au-acc__item. */
  .au-product-details .au-acc__panel {
    padding: 36px 0 0;
  }

  /* На mb первая панель несёт только один абзац (1091:1836): предупреждения
     «Важно» в мобильном фрейме нет вообще. */
  .au-product-details .au-acc__panel p + p {
    display: none;
  }

  .au-product-details .au-cert:nth-child(4) {
    display: none;
  }
}

/* ─── Фокус с клавиатуры (реестр, правило 5.3) ─────────────────────────────
   Пары к :hover выше плюс кольцо каждому элементу, до которого доходит таб
   (список собран обходом карточки табом, а не поиском по файлу).
   Кольцо — то же, что в cart.css (коммит 778669e): 2px, отступ 2, один вид
   индикации на весь сайт. Браузерное кольцо не отключаем: outline виден
   только при клавиатуре, в покое разметка та же. */
.au-product-gallery__dots .au-dots__item:focus-visible,
.au-product-gallery__arrow:focus-visible,
.au-product-forms__item:focus-visible,
.au-product-count__btn:focus-visible,
.au-product-card__basket:focus-visible,
.au-product-card__crumbs a:focus-visible,
.au-product-similar__arrow:focus-visible,
.au-product-similar__card:focus-visible {
  outline: 2px solid var(--au-black);
  outline-offset: 2px;
}

/* Тёмная подложка карточек форм (rgb(104,104,118)) — кольцо белое, как у
   тёмной формы согласия в content.css. */
.au-product-form:focus-visible {
  outline: 2px solid var(--au-white);
  outline-offset: 2px;
}