/* ============================================================
   Витрина. Первый экран = 100svh, футер ниже в потоке —
   скролл существует по построению (механика не тронута:
   grid + 100svh, никаких flex-растягиваний).
   Размер фото вычисляет js/layout.js (--photo-h):
   честный остаток места. Фолбэк — прежние размеры.

   БЕЗ ОПИСАНИЯ (.p-text нет): stage центрируется сам —
   класс .solo на stage ставит main.js, дыры слева нет.
   ============================================================ */

.product{
  position:relative;z-index:1;
  height:100vh;
  height:100svh;
  display:grid;
  place-items:center;
  padding:0 var(--mx);
}

.product-stage{
  display:flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  gap:clamp(48px,6vw,120px);

  --p-sc:.84;

  opacity:0;
  transition:opacity .7s var(--ease-out),
             transform .7s var(--ease-out);
}
body.ready .product-stage{
  opacity:1;
  animation:stageIn 1.3s var(--ease-out) 1.05s backwards;
}
@keyframes stageIn{
  from{opacity:0;transform:scale(.95)}
}

body.scrolled .product-stage{
  opacity:0;
  transform:translateY(-4vh) scale(.97);
  transition:opacity .45s var(--ease-io),transform .45s var(--ease-io);
}

/* без описания: композиция одна, стоит по центру */
.product-stage.solo{margin:0 auto}

@media (min-width:1350px){
  body.menu-open .product-stage{
    transform:translateX(clamp(120px,
        calc(var(--m-slide,160px) + var(--mx) + 56px - 50vw + 50%),
        calc(50vw - 50% - var(--mx))))
      scale(var(--p-sc));
  }
}

@media (min-width:1350px) and (max-width:1599px){ .product-stage{--p-sc:.78} }

@media (min-width:800px) and (max-width:1349px){
  body.menu-open .product-stage{
    transform:translateX(clamp(24px,6vw,80px)) scale(.66);
    opacity:0;
    transition:opacity .45s var(--ease-io),
               transform .45s var(--ease-io);
  }
}

/* --- буфер воздуха между витриной и футером.
     Пустая секция ~полэкрана: интерфейс уходит, остаётся
     чистый шёлк, и только потом снизу выходит крем футера.
     Ровный поток, ноль JS --- */
.spacer{
  position:relative;z-index:1;
  height:48vh;
  height:48svh;
}

/* ============================================================
   Описание товара. Обёртка .p-text-wrap держит индикатор
   прокрутки (.p-scroll) — он НЕ скроллится вместе с текстом,
   стоит в зазоре между текстом и фото, язык спайна:
   дорожка с растворёнными концами, бегунок — позиция.

   Окно .p-text: внутренняя прокрутка, скрытый скроллбар,
   маска-затухание. Высота = фото (--photo-h из layout.js):
   рамки соосны, разъехаться не могут по построению.

   КАСКАД: абзацы .p-line въезжают после витрины,
   задержка = 1.35s + № × .12s — язык букв размеров.
   prefers-reduced-motion глушится глобально (base.css).
   ============================================================ */

.p-text-wrap{
  position:relative;
  max-width:34ch;
}
@media (min-width:800px){
  .p-text-wrap{min-width:34ch}
}

.p-text{
  max-height:var(--photo-h,50svh);
  overflow-y:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:22px 0 28px;
  font-family:'Cormorant',serif;font-style:italic;font-weight:300;
  font-size:clamp(1.12rem,1.85vw,1.5rem);
  line-height:1.5;
  color:var(--cream);
  opacity:.8;
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0,#000 22px,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(to bottom,
    transparent 0,#000 22px,#000 calc(100% - 28px),transparent 100%);
}
.p-text::-webkit-scrollbar{display:none}

.p-line{display:block}

body.ready .p-line{
  animation:pLineIn .6s var(--ease-out) backwards;
  animation-delay:calc(1.35s + var(--i,0) * .12s);
}
@keyframes pLineIn{
  from{opacity:0;transform:translateY(10px)}
}

/* индикатор: появляется только когда текст длиннее окна */
.p-scroll{
  position:absolute;
  top:22px;bottom:28px;
  right:-18px;
  width:1px;
  background:linear-gradient(to bottom,
    transparent,var(--cream-35) 20%,var(--cream-35) 80%,transparent);
  opacity:0;
  transition:opacity .6s ease;
}
.p-scroll.on{opacity:1}
.p-scroll i{
  position:absolute;
  left:0;top:0;
  width:1px;
  min-height:28px;
  background:var(--cream);
}

/* --- правая часть: фото + кнопки --- */
.p-right{
  display:flex;flex-direction:column;align-items:center;
}

.p-photo{
  position:relative;
  flex:0 0 auto;
  height:var(--photo-h,50vh);
  height:var(--photo-h,50svh);
  aspect-ratio:3/4;
  border:1px solid var(--cream-35);
  display:grid;place-items:center;
}
.p-photo img{
  width:100%;height:100%;
  object-fit:contain;display:block;
}
.p-photo-tag{
  font:400 10.5px/1 'IBM Plex Mono',monospace;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--cream-35);
}
.p-photo:has(img){border-color:transparent}
.p-photo:has(img) .p-photo-tag{display:none}

/* --- кнопки в рамке, по ширине фото.
     ДЕСКТОП: масштаб от --pw (ставит layout.js), опорная
     точка 280px, потолок шрифта 15px / паддинга 17px.
     Задержка подсветки .18s — только мышь. На таче
     отклик даёт :active — мгновенный, без transition --- */
.p-buy-row{
  display:flex;gap:10px;
  width:100%;
  margin-top:clamp(22px, calc(var(--photo-h,50vh) * .07), 48px);
}
.p-buy,
.p-add{
  flex:1;
  box-sizing:border-box;
  padding:clamp(14px, calc(var(--pw,280px) * .06), 17px) 0;
  background:transparent;
  color:var(--cream-35);
  font:400 clamp(13px, calc(var(--pw,280px) * .05), 15px)/1 'IBM Plex Mono',monospace;
  letter-spacing:calc(var(--pw,280px) * .011);
  text-indent:calc(var(--pw,280px) * .011);
  text-align:center;
  text-transform:uppercase;
  border:1px solid var(--cream-35);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  white-space:nowrap;
  transition:border-color .45s ease,color .45s ease;
}
.p-buy:active,
.p-add:active{
  transition:none;
  border-color:var(--cream);
  color:var(--cream);
}
@media (hover:hover){
  .p-buy:hover,
  .p-add:hover{
    transition:border-color .45s ease .18s,color .45s ease .18s;
    border-color:var(--cream);
    color:var(--cream);
  }
}

/* --- телефон в горизонтальной ориентации (800–999px) --- */
@media (min-width:800px) and (max-width:999px){
  .p-buy-row{flex-direction:column}
  .p-buy,.p-add{padding:14px 0}
}

/* ============================================================
   МОБАЙЛ — ДВЕ КОЛОНКИ, зеркало ПК: текст и фото на одном
   уровне, ниже ряд кнопок («Предзаказ» под текстом,
   «В корзину» под фото), ниже — размеры с полосочкой.

   Механика: stage становится сеткой 45/55 (фото — большая
   доля), .p-right растворяется (display:contents) — его
   дети встают в сетку напрямую. DOM и ПК не меняются.
   Высоту фото считает layout.js (грид-ветка): потолок по
   высоте с учётом кнопок и размеров, по ширине — колонка.
   Текст левым краем, окно той же высоты, что фото.
   ============================================================ */
@media (max-width:799px){
  .product-stage{
    display:grid;
    grid-template-columns:minmax(0,45fr) minmax(0,55fr);
    grid-template-areas:
      "text photo"
      "buy  buy"
      "sz   sz";
    column-gap:12px;
    row-gap:14px;
    align-items:center;
    width:100%;
  }
  body.menu-open .product-stage,
  body.search-open .product-stage,
  body.cart-open .product-stage{
    opacity:0;
    transform:translateY(clamp(18px,5vh,48px)) scale(.9);
    transition:opacity .45s var(--ease-io),
               transform .45s var(--ease-io);
  }

  /* колонка растворяется: фото, кнопки и размеры —
     прямые дети сетки витрины */
  .p-right{display:contents}

  .p-text-wrap{
    grid-area:text;
    max-width:none;min-width:0;
  }
  .p-text{
    max-height:var(--photo-h,44svh);
    padding:14px 0 18px;
    font-size:clamp(.8rem,3vw,1rem);
    line-height:1.45;
    -webkit-mask-image:linear-gradient(to bottom,
      transparent 0,#000 14px,#000 calc(100% - 18px),transparent 100%);
    mask-image:linear-gradient(to bottom,
      transparent 0,#000 14px,#000 calc(100% - 18px),transparent 100%);
  }
  .p-scroll{right:-8px;top:14px;bottom:18px}

  .p-photo{
    grid-area:photo;
    justify-self:center;
    height:var(--photo-h,44svh);
  }

  /* кнопки рядом: «Предзаказ» под текстом, «В корзину»
     под фото. Зазор = зазору колонок сетки */
  .p-buy-row{
    grid-area:buy;
    gap:12px;
    margin-top:0;
  }
  .p-buy,.p-add{
    padding:clamp(11px, calc(var(--pw,210px) * .06), 15px) 0;
    font-size:clamp(10.5px, calc(var(--pw,210px) * .058), 13px);
    letter-spacing:.08em;
    text-indent:.08em;
  }

  .sizes--row{
    grid-area:sz;
    margin-top:0;
  }
}

/* совсем узкие телефоны: «Предзаказ — 21 580 ₽» обязан
   влезть — сжимаем шрифт и трекинг */
@media (max-width:359px){
  .p-buy,.p-add{
    font-size:9.5px;
    letter-spacing:.04em;
    text-indent:.04em;
  }
}