/* Страница товара. Figma: prodyct card/pc 611:4041 (1920×6076), prodyct card/mb 611:4715 (390×8449).
   Секция идёт сразу под шапкой (pc 89, mb 82) и кончается там, где начинается
   «Обратите внимание» (pc 4871, mb 5563) → высота pc 4782, mb 5481.
   Координаты: left от контейнера (pc − 261, mb − 14), top от начала секции.
   Спека со всеми значениями — log-figma.md §22–23. */
.product {
  padding-bottom: 0;
}

/* Вертикаль страницы в потоке: высота секции больше не фиксируется (была 4782 pc /
   5481 mb), блоки идут колонкой. До рефактора каждый блок стоял на своём top, и
   удлинение описания или лишний пункт списка загоняли текст под аккордеон. */
.product .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* padding-top 24 убран: он воспроизводил макетную координату крошек, а теперь
     отступ от шапки задают сами крошки (css/crumbs.css) — иначе он складывался
     с ним и на странице товара зазор был на 18px больше остальных страниц. */
}

/* Блоб Ellipse 14 (611:4042): 1880×1383 на (20, 3) страницы → центр (960, 694.5).
   SVG 2680×2183 (поле 400 под blur 200), центр (1340, 1091.5). Тот же файл, что на странице каталога. */
.product__blob--1 {
  left: 50%;
  top: -486px;                   /* (694.5 − 89) − 1091.5 */
  width: 2680px;
  height: 2183px;
  margin-left: -1340px;
}

/* Блоб Ellipse 15 (611:4123): 1880×1472 на (20, 3099) → центр (960, 3835).
   SVG 2680×2272, центр (1340, 1136). Та же геометрия, что у блоба каталога на главной. */
.product__blob--2 {
  left: 50%;
  top: 2610px;                   /* (3835 − 89) − 1136 */
  width: 2680px;
  height: 2272px;
  margin-left: -1340px;
}

/* Единственный блоб mb-фрейма (611:4716) — только в mb */
.product__blob--mb {
  display: none;
}

/* Заголовок H1 (611:4043): 261/223, Rubik Bold 36px. В mb-макете H1 и крошек нет. */
.product__h1 {
  margin: 96px 0 72px;           /* от крошек 96, до карточки 72 */
  font-weight: 700;
  font-size: 36px;
  line-height: normal;
  color: var(--black);
  white-space: nowrap;
}

/* ============ Слайд товара (611:4049 pc / 611:4717 mb) ============ */
.product__card {
  position: relative;            /* стрелки и слайдер приколоты к карточке / галерее */
  display: flex;                 /* двухколоночный flex: фото-слой слева, информация справа */
  align-items: flex-start;
  margin-bottom: 62px;           /* до текстового блока */
  width: 1398px;
  min-height: 659px;             /* min-height вместо жесткой высоты: карточка раздвигается при длинном тексте */
  background: var(--white);
  border-radius: var(--r-card);
  overflow: hidden;
}

/* Фото-слой слайда: левая колонка в потоке карточки */
.product__gallery {
  position: relative;
  flex: 0 0 629px;
  width: 629px;
  height: 629px;
  margin: 15px 0 15px 15px;      /* 15 от левого и верхнего краев карточки */
}

/* Плашка под фото (611:4050): 629×629 на 15/15 карточки, заливка #F4F4F4.
   В Figma под заливкой лежит картинка, но заливка непрозрачная — картинка не нужна. */
.product__photo-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--r-card);
  background: var(--photo-bg);
}

/* Фото товара (611:4069): 484×522 на 88/71 карточки → 73/56 плашки (88−15 / 71−15) */
.product__photo {
  position: absolute;
  left: 73px;
  top: 56px;
  width: 484px;
  height: 522px;
  overflow: hidden;
}

/* Полный кадр, без кропа Figma: тот резал крышку флакона на клиентских фото. */
.product__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Слайды галереи лежат друг на друге: показан один, класс переключает JS.
   Точки заменили декоративный slider-dark-last.svg из макета — тот был картинкой
   и не мог отражать ни число фото, ни текущий кадр. */
.product__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

.product__slide--on {
  opacity: 1;
}

.product__dots {
  position: absolute;
  left: 278px;                   /* 293 − 15 */
  top: 583px;                    /* 598 − 15 */
  display: flex;
  align-items: center;
  gap: 8px;
}

.product__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--r-round);
  background: var(--brand);
  opacity: 0.3;
}

.product__dot--on {
  opacity: 1;
}

/* Стрелки слайдера фото: симметрично плашке — 34 от каждого её края (49−15 / 554−15) */
.product__arrow--prev {
  left: 34px;
  top: 287px;                    /* 302 − 15 */
  transform: rotate(180deg);
}

.product__arrow--next {
  left: 539px;
  top: 287px;                    /* 302 − 15 */
}

/* Правая колонка слайда в потоке (без абсолюта):
   отступ сверху 111px от карточки, отступ слева 106px от плашки фото (750 − 644).
   `min-height` равна высоте фото-слоя: она держит низ колонки на одной линии у всех
   товаров, даже когда описания нет совсем. */
.product__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 462px;
  min-height: 522px;
  margin: 111px 0 40px 106px;
}

.product__dose {
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--black);
}

/* Название (611:4053): Rubik Bold 32px, uppercase */
.product__name {
  margin: 0 0 20px;
  font-weight: 700;
  font-size: 32px;
  line-height: normal;
  text-transform: uppercase;
  color: var(--black);
}

/* Краткое описание: не более шести строк (6 × 24 = 144), дальше прокрутка.
   Иначе длинный текст растягивал бы карточку и уводил цену с кнопками под сгиб. */
.product__summary {
  max-height: 144px;
  margin-bottom: 37px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.product__desc {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  color: var(--black);
}

/* Счётчик, цена и кнопки — у нижнего края колонки: у товаров описания разной длины,
   и без этого ряд покупки гулял по вертикали от страницы к странице. */
.product__foot {
  margin-top: auto;
  width: 100%;
}

/* Ряд покупки: счётчик и две цены. Зазор счётчик→старая цена 24 (конец минуса 1152 →
   цена 1176), старая→новая 25 (1297 → 1322). Цены выровнены по центру со счётчиком. */
.product__buy {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 46px;           /* цены выше счётчика на 2 → до кнопок 46 */
}

/* Счётчик (611:4059): круги 36 с рамкой brand @10%, плашка 61×36 brand @5%.
   Внутренние зазоры 4 (плюс 1047 → плашка 1051, плашка 1112 → минус 1116). */
.qty {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: -1px;            /* до старой цены 24 при общем gap 25 */
}

.qty__btn {
  width: 36px;
  height: 36px;
  padding: 6px 0 0 12px;
  border: 1px solid var(--brand-10);
  border-radius: var(--r-round);
  font-weight: 700;
  font-size: 18px;
  line-height: normal;
  text-align: left;
  color: var(--brand);
}

/* Минус в Figma с opacity 0.5 — цвет brand @50% даёт тот же результат */
.qty__btn--minus {
  color: rgba(48, 86, 132, 0.5);
}

.qty__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 61px;
  height: 36px;
  border-radius: var(--r-round);
  background: var(--brand-05);
}

.qty__value {
  font-weight: 700;
  font-size: 16px;
  color: var(--brand);
}

.product__price-old {
  margin: 0;
  font-weight: 700;
  font-size: 32px;
  color: var(--brand);
  opacity: 0.5;
  text-decoration: line-through;
}

.product__price {
  margin: 0;
  font-weight: 700;
  font-size: 32px;
  color: var(--brand);
}

/* Кнопка «Добавить в корзину» (611:4066) 193×44 и сердце 40×40: зазор 24 (1204 → 1228) */
.product__actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.product__basket {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 193px;
  height: 44px;
  border-radius: var(--r-btn);
  background: var(--brand);
  font-weight: 600;
  font-size: 14px;
  color: var(--white);
}

.product__like {
  position: relative;
  left: auto;
  top: auto;
}

/* ============ Текстовый блок (в pc — прямо на фоне, в mb — белый слайд 611:4740) ============
   Вертикаль в потоке. В макете ~30 элементов стояли на своих top (10/106/226/277/345/…/1817)
   и блок держался фиксированной высотой 1865 (mb 3090): вставка одного предложения
   сдвигала смысл всех нижних координат, но не сами элементы — текст ниже наезжал.
   Замер исходной вёрстки: зазор между пунктами списка 20, «полка» → список 29,
   блок → «полка» 72. */
.product__text {
  position: relative;
  margin-bottom: 96px;           /* до аккордеона */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 1398px;
  padding-top: 10px;             /* лид начинался на 10 от верха блока */
}

/* Лид-заголовок (611:4075): Rubik Bold 32px. В Figma стоял lowercase, но он гасил
   заглавные в «Peptide Source» — это название бренда, а не оформление строки.
   Регистр задаётся текстом в MIGX. */
.product__lead {
  width: 994px;
  margin: 0 0 20px;
  font-weight: 700;
  font-size: 32px;
  line-height: normal;
  color: var(--black);
}

.product__lead-text {
  width: 994px;
  margin: 0 0 72px;
  font-size: 18px;
  line-height: 24px;
  color: var(--black);
}

/* Подзаголовки-«полки» (611:4105, 4106, 4107, 4108): Rubik Bold 18px.
   До следующего списка 29, поэтому отступ задаётся здесь. */
.product__eyebrow {
  margin: 0 0 29px;
  font-weight: 700;
  font-size: 18px;
  line-height: normal;
  color: var(--black);
  white-space: nowrap;
}

/* «Как работает Peptide Source:» (611:4079): Rubik Bold 32px */
.product__h2 {
  margin: 0 0 72px;
  font-weight: 700;
  font-size: 32px;
  line-height: normal;
  color: var(--black);
  white-space: nowrap;
}

/* Списки-маркеры (`.dot-list` в css/dot-list.css): текст 994 шириной,
   отступ маркера 27 → строка 967. Пункты идут потоком с зазором 20. */
.product__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 994px;
  margin: 0 0 72px;
  padding-left: 27px;
}

/* Перед «Противопоказаниями» в макете зазор шире: 82 против обычных 72 */
.product__list--indications {
  margin-bottom: 82px;
}

/* Перед плашкой противопоказаний зазор 71 */
.product__eyebrow--contra {
  margin-bottom: 71px;
}

.product__list li {
  position: relative;
  font-size: 18px;
  line-height: 24px;
  color: var(--black);
}

/* Ряд base-карточек (стиль в css/base-card.css): шаг 301 при ширине 280 → gap 21 */
.product__bases {
  display: flex;
  gap: 21px;
  margin-bottom: 72px;
}

/* Карточка кита позиционируется абсолютом (её же ставит слайд «Технология» на главной),
   поэтому в ряду возвращаем её в поток. Высота остаётся заданной: внутренности
   карточки — свой абсолют в css/base-card.css. */
.product__bases .base {
  position: relative;
  height: 198px;
}

/* Плашка противопоказаний (611:4121): 1398×175, #F6F6F6, radius 32.
   Иконка Danger приколота абсолютом (в mb её нет), список — в потоке рядом. */
.product__warn {
  position: relative;
  width: 1398px;
  min-height: 175px;
  margin-bottom: 72px;           /* до «Особых указаний» */
  padding: 63px 0 0 125px;
  border-radius: var(--r-card);
  background: var(--section-grey);
  overflow: hidden;
}

/* Иконка Danger (611:1087): вектор 54×60 в символе 72×72 на 306/2629 → 315/2635 страницы */
.product__warn-icon {
  position: absolute;
  left: 54px;                    /* 315 − 261 */
  top: 57px;                     /* 2635 − 2578 */
  width: 54px;
  height: 60px;
}

.product__warn-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 994px;
  padding-bottom: 63px;          /* нижнее поле плашки */
}

.product__warn-list li {
  position: relative;
  margin-left: 27px;
  width: 967px;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--black);
}

.product__special {
  width: 1109px;
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  color: var(--black);
}

/* ============ Аккордеон (611:4124 pc / 611:4791 mb) ============ */
/* Общий стиль — css/acc.css, здесь позиция блока и строка «Сертификаты».
   Аккордеон в потоке: он раскрывается по клику, поэтому фиксированный top под ним
   означал, что «Похожие товары» уезжают под раскрытую панель. */
.acc {
  position: relative;
  top: auto;
  margin-bottom: 100.2px;       /* до шапки «Похожих» */
}

/* Галерея сертификатов: ряд из трёх снимков.
   Шаг в макете 486.302 − 34 = 452.302 при ширине 414.123 → gap 38.179.
   В mb это горизонтальная лента: третий сертификат намеренно уходит за край
   экрана (карусельная аффорданса, у неё есть слайдер-индикатор). */
.acc__certs {
  display: flex;
  gap: 38.179px;
}

.acc__cert {
  flex: 0 0 auto;
  width: 414.123px;
  height: 585.784px;
  border-radius: var(--r-card);
  object-fit: cover;
}

.acc__slider {
  display: none;
}

/* ============ Похожие товары ============ */
/* Шапка: заголовок слева, стрелки в правом конце ряда (x 1512/1604 при контейнере 1398
   → правый край стрелок 1660 − 261 = 1399 ≈ край контейнера) */
.product__related-head {
  position: relative;            /* стрелки приколоты к ряду, а не к странице */
  display: flex;
  align-items: center;
  width: 1398px;
  margin-bottom: 72px;           /* заголовок 4190 + 43 → карточки 4305 */
}

.product__related-title {
  margin: 0;
  font-weight: 700;
  font-size: 36px;
  line-height: normal;
  color: var(--black);
  white-space: nowrap;
}

/* Стрелки приколоты к правому краю ряда (x 1512/1604 → 1251/1343 от контейнера) и
   стоят на 6 выше заголовка, поэтому из высоты ряда исключены. */
.product__arrow--rel-prev,
.product__arrow--rel-next {
  position: absolute;
  top: -6px;
}

.product__arrow--rel-prev {
  left: auto;
  right: 147px;                  /* 1398 − 1251 */
  transform: rotate(180deg);
}

.product__arrow--rel-next {
  left: auto;
  right: 55px;                   /* 1398 − 1343 */
}

/* Четыре карточки в ряд: x 261/616/971/1326 (шаг 355 → gap 21) */
.product__related {
  display: grid;
  grid-template-columns: repeat(4, 334px);
  gap: 21px;
}

.product__related-slider {
  display: none;
}

@media (max-width: 1199px) {
  /* mb: секция от 82 (шапка 24+58) до 5563 (начало «Обратите внимание») */
  .product {
    padding-bottom: 50px;        /* слайдер кончается на 5431, секция на 5481 */
  }

  /* В mb крошки и h1 скрыты, поэтому колонка начинается сразу с карточки на 18 */
  .product .container {
    padding-top: 18px;
  }

  .product__blob--1,
  .product__blob--2 {
    display: none;
  }

  /* Ellipse 14 (611:4716): 390×5946 на (0, 847) → центр (195, 3820), заливка @10%.
     SVG 1190×6746, центр (595, 3373). */
  .product__blob--mb {
    display: block;
    left: 50%;
    top: 365px;                  /* (3820 − 82) − 3373 */
    width: 1190px;
    height: 6746px;
    margin-left: -595px;
  }

  /* В mb-фрейме нет ни крошек, ни H1 */
  .crumbs,
  .product__h1 {
    display: none;
  }

  /* Карточка товара 611:4717: 362×796 на 14/100 страницы */
  .product__card {
    flex-direction: column;      /* в mb вертикальная колонка: фото сверху, инфо снизу */
    margin-bottom: 10px;         /* до текстового слайда; в pc 62 */
    width: 362px;
    min-height: 796px;           /* min-height вместо жесткой высоты: карточка раздвигается */
  }

  /* Фото-слой в mb: 350×296 с отступом 6px сверху и слева */
  .product__gallery {
    flex: 0 0 296px;
    width: 350px;
    height: 296px;
    margin: 6px 0 0 6px;
  }

  .product__photo-bg {
    left: 0;
    top: 0;
    width: 350px;
    height: 296px;
  }

  .product__photo {
    left: 69px;                  /* 75 − 6 */
    top: 34px;                   /* 40 − 6 */
    width: 212px;
    height: 228px;
  }

  .product__slider {
    left: 138px;                 /* 144 − 6 */
    top: 262px;                  /* 268 − 6 */
  }

  /* В mb у слайда фото нет стрелок */
  .product__arrow--prev,
  .product__arrow--next,
  .product__arrow--rel-prev,
  .product__arrow--rel-next {
    display: none;
  }

  /* Правая (нижняя) колонка в mb: в потоке под фото-слоем.
     Зазор 36px от плашки фото (338 − 302), отступ 36px от левого края карточки. */
  .product__info {
    width: 287px;
    margin: 36px 0 40px 36px;
  }

  .product__dose {
    margin-bottom: 16px;
  }

  /* В mb-инстансе название без uppercase (611:4723) */
  .product__name {
    margin-bottom: 20px;
    font-size: 28px;
    text-transform: none;
  }

  .product__desc {
    margin-bottom: 28px;
    font-size: 14px;
  }

  /* В mb ряд покупки переносится: счётчик в первой строке, цены во второй */
  .product__buy {
    flex-wrap: wrap;
    gap: 28px 25px;
    margin-bottom: 40px;
  }

  .qty {
    flex: 0 0 100%;              /* счётчик занимает всю строку, цены уходят вниз */
    margin-right: 0;
  }

  /* Кнопка 246 шириной начинается на 26 страницы, то есть на 10 левее колонки;
     сердце уходит правее колонки — так в макете (611:4738). */
  .product__actions {
    margin-left: -10px;
  }

  .product__basket {
    width: 246px;
  }

  /* Текстовый слайд 611:4740: белая карточка 362 шириной на 14/906 страницы.
     Замер mb-зазоров: лид→текст 22, текст→«полка» 38, пункт→пункт 20, список→блок 40,
     карточка→карточка 10. Высота больше не фиксируется (была 3090). */
  .product__text {
    margin-bottom: 9px;          /* до аккордеона; в pc 96 */
    width: 362px;
    padding: 64px 0 64px 36px;
    background: var(--white);
    border-radius: var(--r-card);
  }

  /* Лид в mb — Bold 28. */
  .product__lead {
    width: 287px;
    margin-bottom: 22px;
    font-size: 28px;
  }

  .product__lead-text {
    width: 287px;
    margin-bottom: 38px;
    font-size: 14px;
  }

  .product__eyebrow {
    margin-bottom: 19px;
    white-space: normal;
  }

  /* Перед списком «кому подходит» в макете зазор шире остальных */
  .product__eyebrow--who {
    margin-bottom: 40px;
  }

  /* «Как работает Peptide Source:» в mb — Bold 18/22 в две строки, ширина 199 */
  .product__h2 {
    width: 199px;
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 22px;
    white-space: normal;
  }

  /* Списки в mb: 14/20, отступ маркера 21 */
  .product__list {
    margin-bottom: 40px;
    padding-left: 21px;
  }

  .product__list--who { width: 275px; }

  .product__list--indications {
    width: 277px;
    margin-bottom: 40px;         /* в pc здесь 82 */
  }

  .product__eyebrow--contra {
    margin-bottom: 19px;         /* в pc здесь 71 */
  }

  .product__list li {
    font-size: 14px;
    line-height: 20px;
  }

  .product__list--who li { width: 254px; }
  .product__list--indications li { width: 256px; }

  /* Base-карточки в mb: колонка с зазором 10, порядок GMP → ISO → Микробиологический → Чистота */
  .product__bases {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 40px;
  }

  .product__bases .product__base--1 { order: 1; height: 174px; }
  .product__bases .product__base--2 { order: 2; height: 156px; }
  .product__bases .product__base--4 { order: 3; height: 193px; }
  .product__bases .product__base--3 { order: 4; height: 174px; }

  /* Плашка противопоказаний 611:4786: 338×175 на 12/2630, иконки Danger в mb нет.
     Плашка на 24 левее колонки текста (12 против 36). */
  .product__warn {
    width: 338px;
    margin-left: -24px;
    margin-bottom: 40px;
    padding: 38px 0 0 23px;
  }

  .product__warn-icon {
    display: none;
  }

  .product__warn-list {
    width: 291px;
    padding-bottom: 38px;
  }

  .product__warn-list li {
    margin-left: 21px;
    width: 270px;
    font-size: 14px;
    line-height: 20px;
  }

  .product__special {
    width: 281px;
    font-size: 14px;
    line-height: 20px;
  }


  /* Аккордеон 611:4791: 14/4006 страницы */
  .acc {
    margin-bottom: 100px;        /* до заголовка «Похожих»; в pc 100.2 */
  }

  /* Галерея сертификатов в mb: лента с шагом 271.818 − 34 = 237.818 при ширине
     217.745 → gap 20.073. Третий снимок уходит за край экрана — так в макете. */
  .acc__certs {
    gap: 20.073px;
  }

  .acc__cert {
    width: 217.745px;
    height: 308.003px;
    border-radius: 16.825px;
  }

  .acc__slider {
    display: block;
    width: 74px;
    height: 10px;
    margin: 4px auto 0;
  }

  /* Похожие товары: заголовок 28/4948, карточки 28 и 383 (вторая за краем экрана) */
  /* В mb стрелок «Похожих» нет, заголовок сдвинут на 14 от края слайда */
  .product__related-head {
    width: 100%;
    margin-left: 14px;
    margin-bottom: 36px;         /* заголовок 4866 + 33 → карточки 4935 */
  }

  .product__related-title {
    font-size: 28px;
  }

  /* Лента листается пальцем: две карточки по 334 с gap 21 дают 689 при контейнере 362,
     поэтому вторая уходила за край экрана и была недоступна — точки-индикатор внизу
     обещали прокрутку, которой не было. Приём тот же, что у ленты видео и табов каталога:
     полоса доходит до края экрана отрицательным отступом, скроллбар скрыт, шаг по снапу.
     `.container` здесь flex, поэтому без min-width: 0 и явной ширины элемент растягивается
     по контенту (689) вместо ширины родителя и прокрутка не включается. */
  .product__related {
    margin-left: 14px;
    margin-right: -14px;
    margin-bottom: 9px;          /* до слайдера-индикатора */
    display: flex;
    gap: 21px;
    width: calc(100% - 14px);
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

  .product__related::-webkit-scrollbar {
    display: none;
  }

  /* flex-shrink: 0 — иначе карточки сжимаются под ширину ленты и переполнения,
     а значит и прокрутки, не возникает: .card задаёт width, но не запрещает сжатие. */
  .product__related .card {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* Больше двух карточек в mb-макете нет */
  .product__related .card:nth-of-type(n + 3) {
    display: none;
  }

  .product__related-slider {
    display: block;
    margin-left: 144px;          /* 158 − 14 */
    width: 74px;
    height: 10px;
  }
}