/* ============================================================
   MegaNut — PRODUCT / Tovar (DESIGN_SPEC §4). База 1920, ±2px.
   Обёртка страницы белая (design wrapper background:#fff).
   Брейкпоинты: 1199 / 767.
   ============================================================ */

/* Правка заказчика: на странице товара всё НАД CTA — один белый цвет.
   В макете (Tovar.dc.html) вся страница обёрнута в <div background:#fff>, поэтому
   полоса за sticky-шапкой и промежуток перед CTA — белые. У нас шапка — сиблинг вне
   .mn-main, за ней просвечивал body (#EFEFEF). Красим body товара в белый: это делает
   белой и полосу за шапкой, и 70px-зазор перед CTA. Другие страницы не затрагиваются. */
body[data-page="product"] {
  background: var(--mn-white);
}
body[data-page="product"] .mn-main {
  background: var(--mn-white);
}
/* CTA товара: отступ сверху (DESIGN_SPEC §4.3) — теперь на белом фоне body. */
body[data-page="product"] .mn-cta {
  margin-top: 70px;
}

/* ── 4.1 Секция товара ─────────────────────────────────────── */
.mn-product {
  /* content-box: max-width 1580 + padding 68×2 = 1716 (макет rect x=102 w=1716). */
  box-sizing: content-box;
  max-width: var(--mn-container);
  margin: 0 auto;
  padding: 44px var(--mn-pad-side-fixed) 0;
  /* макет: секция без line-height → normal. body:1.6 давал завышенный line-box-strut
     вокруг inline-flex ссылки «Назад» (+3px) → сдвиг grid Y. Текст секции в макете тоже normal. */
  line-height: normal;
  background: var(--mn-white);
}
.mn-product__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--mn-ink);
  font-size: var(--mn-t-body-15);
  /* макет: ссылка без line-height → normal (body:1.6 давал +6px высоты → сдвиг product grid Y) */
  line-height: normal;
  margin-bottom: 28px;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
}
.mn-product__back:hover {
  color: var(--mn-ink);
  border-bottom-color: var(--mn-on-ink-35);
}

.mn-product__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
/* P2-1: без описания правая колонка характеристик короче галереи — на ≥1200
   центрируем её по вертикали, чтобы не было «пустоты» под карточкой.
   На ≤1199 сетка в 1 колонку, выравнивание не влияет (оставляем как было). */
@media (min-width: 1200px) {
  .mn-product__grid {
    align-items: center;
  }
}

/* ── Галерея ───────────────────────────────────────────────── */
.mn-product__main {
  border-radius: var(--mn-r-24);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.mn-product__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mn-product__thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.mn-product__thumb {
  border-radius: var(--mn-r-16);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.mn-product__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--mn-dur-620) var(--mn-ease);
}
.mn-product__thumb:hover .mn-product__thumb-img {
  transform: var(--mn-hover-img);
}

/* ── Карточка характеристик ────────────────────────────────────
   Правка заказчика: убрать тень/градиент-подложку — на белом фоне box-shadow +
   backdrop-blur читались как грязное серое пятно под карточкой. Делаем чистую
   сплошную белую карточку, радиус 28 сохраняем. Меняем только карточку товара
   (класс .mn-product__card используется лишь здесь). */
.mn-product__card {
  background: var(--mn-white);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--mn-r-28);
  padding: 36px 34px;
}
.mn-product__tag-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mn-product__tag {
  background: var(--mn-ink);
  color: var(--mn-bg);
  border-radius: var(--mn-r-pill);
  padding: 7px 16px;
  font-size: var(--mn-eyebrow-11);
  letter-spacing: var(--mn-ls-eyebrow-16);
  text-transform: uppercase;
}
.mn-product__title {
  margin-top: 22px;
  font-family: var(--mn-font-display);
  font-weight: var(--mn-fw-regular);
  font-size: var(--mn-h2-product);
  line-height: var(--mn-h2-product-lh);
  letter-spacing: var(--mn-h2-product-ls);
}
.mn-product__specs-title {
  margin-top: 28px;
  font-size: var(--mn-eyebrow-12);
  letter-spacing: var(--mn-ls-eyebrow-16);
  text-transform: uppercase;
  color: var(--mn-gold);
}
.mn-product__specs {
  margin-top: 16px;
}
.mn-product__spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mn-on-ink-10);
}
.mn-product__spec-label {
  font-size: var(--mn-t-body-15);
  color: var(--mn-muted);
}
.mn-product__spec-value {
  font-size: var(--mn-t-body-sm);
  text-align: right;
}

/* ── 4.2 Другие позиции ────────────────────────────────────── */
.mn-related {
  /* content-box: max-width 1580 + padding 68×2 = 1716 (макет rect x=102 w=1716). */
  box-sizing: content-box;
  max-width: var(--mn-container);
  margin: 0 auto;
  padding: 110px var(--mn-pad-side-fixed) 0;
  background: var(--mn-white);
}
.mn-related__heading {
  font-family: var(--mn-font-display);
  font-weight: var(--mn-fw-regular);
  font-size: var(--mn-h2-related);
  /* макет: заголовок без line-height → normal (body:1.6 давал +14.8px высоты секции) */
  line-height: normal;
  letter-spacing: var(--mn-h2-related-ls);
}
.mn-related__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 36px;
}

/* ==========================================================================
   ≤1199px — галерея стек, «Другие позиции» 4→2 кол.
   ========================================================================== */
@media (max-width: 1199px) {
  .mn-product__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .mn-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mn-related {
    padding-top: clamp(64px, 9vh, 110px);
  }
}

/* ==========================================================================
   ≤767px — узкие боковые отступы; миниатюры 3 в ряд остаются.
   ========================================================================== */
@media (max-width: 767px) {
  .mn-product,
  .mn-related {
    padding-left: var(--mn-pad-side);
    padding-right: var(--mn-pad-side);
  }
  .mn-product__card {
    padding: 28px 22px;
  }
}