/* ============================================================
   08 · Продукт — витрина упаковки
   Все селекторы с префиксом .section--product
   ============================================================ */

.section--product {
  overflow: clip;
  background:
    radial-gradient(900px 640px at 26% 56%, rgba(227, 164, 41, .07), transparent 70%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 55%, var(--bg-0));
}

/* ---------- Сетка ---------- */
.section--product .product-grid {
  display: grid;
  grid-template-columns: minmax(0, 10fr) minmax(0, 11fr);
  gap: clamp(48px, 6vw, 110px);
  align-items: center;
}

/* Десктоп: грид поднят в «мёртвую зону» справа от заголовка —
   лид входит на уровень последней строки h2; сцена с пакетом
   компенсирована собственным отступом, чтобы не наехать на заголовок. */
@media (min-width: 1025px) {
  .section--product .product-grid {
    align-items: start;
    margin-top: calc(-1 * clamp(48px, 8vw, 140px));
  }
  .section--product .product-stage {
    margin-top: clamp(32px, 5vw, 80px);
  }
}

/* ---------- Сцена с упаковкой ---------- */
.section--product .product-stage {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: clamp(24px, 3vw, 48px);
}

.section--product .product-rings {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(46vw, 720px);
  aspect-ratio: 1;
  margin: 0;
  translate: -50% -50%;
  pointer-events: none;
}

/* Водяной знак привязан к пакету: «0,» выходит слева от силуэта,
   «5» скрыта за ним, «г» целиком справа — с зазором от вертикальной
   размерной линии «150 мм», чтобы глиф не наезжал на чертёжную деталь. */
.section--product .product-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: calc(-50% - 48px) -60%;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(380px, 30vw, 440px);
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(242, 236, 223, .09);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ---------- Пакет 150 × 60 мм ---------- */
.section--product .pack-wrap {
  position: relative;
  width: clamp(208px, 16.4vw, 240px);
}

.section--product .pack {
  position: relative;
  width: 100%;
  aspect-ratio: 60 / 150;
  border-radius: 10px 10px 16px 16px;
  border: 1px solid rgba(242, 236, 223, .14);
  background:
    linear-gradient(168deg, rgba(242, 236, 223, .045), transparent 22%),
    /* шейдинг фольги — промежуточные тона, выраженные через токены bg-0/bg-2 */
    linear-gradient(100deg,
      color-mix(in srgb, var(--bg-2), var(--bg-0) 20%) 0%,
      color-mix(in srgb, var(--bg-0), var(--bg-2) 33%) 38%,
      var(--bg-2) 62%,
      color-mix(in srgb, var(--bg-0), var(--bg-2) 33%) 100%);
  box-shadow:
    0 60px 90px -50px rgba(6, 5, 3, .85),
    0 24px 48px -24px rgba(6, 5, 3, .6),
    inset 0 1px 0 rgba(242, 236, 223, .07),
    inset 8px 0 24px -16px rgba(6, 5, 3, .9),
    inset -8px 0 24px -16px rgba(6, 5, 3, .9);
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
}

/* медленный наклон пакета при наведении на сцену — «живость» витрины */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .section--product .pack {
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
  }
  .section--product .product-stage:hover .pack {
    transform: perspective(1200px) rotateY(-3deg) rotateX(1.5deg);
  }
}

/* блик по фольге */
.section--product .pack::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 34%, rgba(242, 236, 223, .05) 46%, transparent 58%);
  pointer-events: none;
}

/* зип-замок */
.section--product .pack-zip {
  width: 100%;
  padding: 10px 0 0;
  flex: none;
}
.section--product .pack-zip i {
  display: block;
  height: 9px;
  margin-inline: 7%;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg,
      rgba(242, 236, 223, .06) 0 1px,
      rgba(6, 5, 3, .45) 1px 4px);
  box-shadow: inset 0 1px 1px rgba(6, 5, 3, .8);
}
.section--product .pack-zip::after {
  content: "";
  display: block;
  margin: 7px 0 0;
  border-top: 1px solid rgba(242, 236, 223, .09);
}

/* золотая этикетка */
.section--product .pack-label {
  position: relative;
  width: 78%;
  margin-top: 13%;
  padding: 11% 6% 9%;
  border-radius: 6px;
  background: linear-gradient(150deg,
    var(--gold-bright) 0%,
    var(--gold) 52%,
    color-mix(in srgb, var(--gold), var(--gold-deep) 45%) 100%);
  box-shadow:
    0 14px 28px -14px rgba(6, 5, 3, .8),
    inset 0 1px 0 rgba(255, 244, 214, .55);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: color-mix(in srgb, var(--bg-0), var(--gold-deep) 8%);
}
.section--product .pack-label::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(13, 11, 8, .4);
  border-radius: 3px;
  pointer-events: none;
}

.section--product .pack-crocus {
  width: clamp(30px, 2.6vw, 38px);
  margin-bottom: 8%;
}

.section--product .pack-brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.16rem, 1.35vw, 1.42rem);
  line-height: 1.12;
  letter-spacing: .01em;
  text-wrap: balance;
}

.section--product .pack-sep {
  width: 34%;
  height: 1px;
  margin: 9% 0 7%;
  background: rgba(13, 11, 8, .45);
}

.section--product .pack-species {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(13, 11, 8, .72);
  white-space: nowrap;
}

.section--product .pack-weight {
  margin-top: 6%;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 1.7vw, 1.85rem);
  line-height: 1;
}

/* окно с рыльцами */
.section--product .pack-window {
  position: relative;
  width: 44%;
  aspect-ratio: 1;
  margin-top: 12%;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line-gold);
  box-shadow:
    0 0 0 5px rgba(6, 5, 3, .5),
    0 0 0 6px rgba(242, 236, 223, .07),
    inset 0 0 24px rgba(6, 5, 3, .75);
}
.section--product .pack-window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  transform: scale(2.1);
  filter: saturate(.9) contrast(1.1) brightness(.82) sepia(.06);
}
.section--product .pack-window::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(closest-side, transparent 55%, rgba(6, 5, 3, .4));
  pointer-events: none;
}

/* нижняя строка на пакете */
.section--product .pack-origin {
  margin-top: auto;
  margin-bottom: 9%;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ivory-35);
  white-space: nowrap;
}

/* ---------- Размерные линии (чертёж) ---------- */
.section--product .pack-dim {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  color: var(--ivory-35);
}
.section--product .pack-dim b {
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .2em;
  white-space: nowrap;
}
.section--product .pack-dim i {
  flex: 1;
  position: relative;
  background: rgba(242, 236, 223, .18);
}

.section--product .pack-dim--v {
  flex-direction: column;
  top: 0;
  bottom: 0;
  right: calc(-1 * clamp(40px, 4vw, 64px));
}
.section--product .pack-dim--v b { writing-mode: vertical-rl; }
.section--product .pack-dim--v i { width: 1px; }
.section--product .pack-dim--v i::before,
.section--product .pack-dim--v i::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 9px;
  height: 1px;
  translate: -50% 0;
  background: rgba(242, 236, 223, .28);
}
.section--product .pack-dim--v i:first-child::before { top: 0; }
.section--product .pack-dim--v i:first-child::after { display: none; }
.section--product .pack-dim--v i:last-child::before { display: none; }
.section--product .pack-dim--v i:last-child::after { bottom: 0; }

.section--product .pack-dim--h {
  left: 0;
  right: 0;
  bottom: calc(-1 * clamp(34px, 3vw, 48px));
}
.section--product .pack-dim--h i { height: 1px; }
.section--product .pack-dim--h i::before,
.section--product .pack-dim--h i::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  height: 9px;
  translate: 0 -50%;
  background: rgba(242, 236, 223, .28);
}
.section--product .pack-dim--h i:first-child::before { left: 0; }
.section--product .pack-dim--h i:first-child::after { display: none; }
.section--product .pack-dim--h i:last-child::before { display: none; }
.section--product .pack-dim--h i:last-child::after { right: 0; }

/* ---------- Инфо-колонка ---------- */
.section--product .product-lead {
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  font-weight: 300;
  line-height: 1.65;
  max-width: 52ch;
}

.section--product .product-specs {
  margin-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--line);
}

.section--product .product-spec {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  align-items: baseline;
  gap: 24px;
  padding-block: clamp(16px, 1.8vw, 22px);
  border-bottom: 1px solid var(--line);
}

.section--product .product-spec dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.section--product .product-spec dd {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  line-height: 1.15;
  color: var(--ivory);
}

/* каналы продаж */
.section--product .product-channels {
  margin-top: clamp(32px, 3.6vw, 48px);
}

.section--product .product-channels-label {
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ivory-50);
}

/* строка mono-текста с разделителями «·» — без ложной аффорданс кнопок */
.section--product .product-channels-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
}

.section--product .product-channels-list li {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ivory-50);
  white-space: nowrap;
}

.section--product .product-channels-list li:not(:last-child)::after {
  content: "·";
  margin-left: 14px;
  color: var(--ivory-35);
}

.section--product .product-cta {
  margin-top: clamp(36px, 4vw, 52px);
}

/* ---------- Адаптив ---------- */
@media (max-width: 1024px) {
  .section--product .product-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 64px);
  }
  .section--product .pack-wrap { width: clamp(200px, 26vw, 240px); }
  /* на узких раскладках гигантской цифре не хватает сцены — прячем,
     чтобы не оставлять обрезанных фрагментов */
  .section--product .product-watermark { display: none; }
}

@media (max-width: 768px) {
  .section--product .product-grid {
    grid-template-columns: 1fr;
    gap: 64px;
  }
  .section--product .product-stage {
    padding-block: 16px 8px;
    /* место под нижнюю размерную линию */
    margin-bottom: 8px;
  }
  .section--product .pack-wrap { width: min(58vw, 224px); }
  .section--product .product-rings { width: min(120vw, 560px); }
  .section--product .pack-dim--v { right: -52px; }
  .section--product .pack-dim--h { bottom: -40px; }
}

@media (max-width: 480px) {
  .section--product .product-spec {
    grid-template-columns: minmax(88px, 104px) 1fr;
    gap: 16px;
  }
  .section--product .product-spec dd { font-size: 1.25rem; }
  .section--product .product-cta .btn {
    width: 100%;
    text-align: center;
  }
}