/* ============================================================
   Размеры. Два исполнения, один язык:
   ПК (.sizes--col): вертикальная колонка у правого края,
   fixed — интерфейс, как хедер. Спайн-линия справа.
   ТЕЛЕФОН (.sizes--row): горизонтальный ряд под кнопками,
   в потоке витрины, полосочка под рядом.

   Буквы везде: Cormorant без рамок-капсул, покой 1s,
   отклик .75s, активная — вес 400 и letter-spacing.
   Каскад входа: ПК — справа налево, телефон — снизу.

   ВАЖНО: граница видимости (что где показывать) — в самом
   КОНЦЕ файла, после полных блоков: иначе поздний
   display:flex перебивает раннее display:none (урок
   сегодняшнего дубля на телефоне).
   ============================================================ */

/* --- общее: буквы --- */
.sz{
  position:relative;
  user-select:none;-webkit-user-select:none;
}
.sz-w{
  display:block;
  font-family:'Cormorant',serif;font-weight:300;
  line-height:1;letter-spacing:.01em;
  color:var(--cream);
  opacity:.55;
  will-change:transform,opacity;
  transition:transform 1s var(--ease-io),
             opacity 1s ease,
             letter-spacing 1s var(--ease-io);
}
@media (hover:hover){
  .sz:hover .sz-w{
    transition:transform .75s var(--ease-out),
               opacity .75s ease,
               letter-spacing .75s var(--ease-out);
    opacity:1;letter-spacing:.05em;
  }
}
.sz.active .sz-w{
  transition:transform .75s var(--ease-out),
             opacity .75s ease,
             letter-spacing .75s var(--ease-out);
  opacity:1;font-weight:400;letter-spacing:.05em;
}

/* ============================================================
   ПК: КОЛОНКА. Прежние правила, прежние значения.
   ============================================================ */

.sizes--col{
  position:fixed;
  right:var(--mx);
  top:50%;
  z-index:70;pointer-events:none;
  display:flex;flex-direction:column;align-items:flex-end;
  gap:clamp(2px,.8vh,8px);
  padding-right:6px;
  opacity:0;transform:translate(14px,-50%);
  transition:opacity .45s var(--ease-io),
             transform .45s var(--ease-io);
}
body.ready .sizes--col{
  opacity:1;transform:translate(0,-50%);pointer-events:auto;
  animation:sizesIn .6s ease 1.15s backwards;
}
@keyframes sizesIn{from{opacity:0}}
body.scrolled .sizes--col{
  opacity:0;transform:translate(14px,-50%);pointer-events:none;
  transition:opacity .45s var(--ease-io),
             transform .45s var(--ease-io);
}
body.menu-open .sizes--col,
body.search-open .sizes--col,
body.cart-open .sizes--col{
  opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease-io),
             transform .45s var(--ease-io);
}

/* спайн-линия справа — как у барабана меню */
.sizes--col::after{
  content:'';position:absolute;
  right:0;top:-16px;bottom:-16px;width:1px;
  background:linear-gradient(to bottom,
    transparent,var(--cream-35) 22%,var(--cream-35) 78%,transparent);
}

.sizes--col .sz{
  padding:7px 12px 7px 30px;
  transition:transform .5s var(--ease-out);
}
.sizes--col .sz-w{
  font-size:clamp(1.5rem,3.2vw,2.4rem);
  transform-origin:100% 50%;
}
@media (hover:hover){
  .sizes--col .sz:hover .sz-w{transform:translateX(-10px) scale(1.08)}
}
.sizes--col .sz.active .sz-w{transform:translateX(-10px) scale(1.08)}

/* каскад: буквы въезжают СПРАВА НАЛЕВО, задержка = 1.25s +
   номер буквы × .1s. --i стоит на кнопке в index.html */
body.ready .sizes--col .sz-w{
  animation:szInCol .6s var(--ease-out) backwards;
  animation-delay:calc(1.25s + var(--i,0) * .1s);
}
@keyframes szInCol{
  from{opacity:0;transform:translateX(14px)}
}

/* ============================================================
   ТЕЛЕФОН: РЯД под кнопками, в потоке .p-right — едет и
   гаснет вместе со стадией. Полосочка ПОД рядом, с
   растворёнными концами, проявляется вместе с буквами.
   ============================================================ */

.sizes--row{
  position:relative;
  display:flex;flex-direction:row;
  justify-content:center;align-items:center;
  gap:clamp(4px,1.5vw,10px);
  margin-top:clamp(8px,1.2vh,14px);
  padding-bottom:clamp(8px,1.2vh,12px);
  user-select:none;-webkit-user-select:none;
}

.sizes--row::after{
  content:'';position:absolute;
  left:calc(-1 * clamp(10px,1.5vw,16px));
  right:calc(-1 * clamp(10px,1.5vw,16px));
  bottom:0;height:1px;
  background:linear-gradient(to right,
    transparent,var(--cream-35) 22%,var(--cream-35) 78%,transparent);
}
body.ready .sizes--row::after{
  animation:lineIn .6s var(--ease-out) 1.15s backwards;
}
@keyframes lineIn{from{opacity:0}}

.sizes--row .sz{padding:8px 10px}
.sizes--row .sz-w{
  font-size:clamp(1.3rem,6vw,1.9rem);
  transform-origin:50% 100%;
}
@media (hover:hover){
  .sizes--row .sz:hover .sz-w{transform:translateY(-6px) scale(1.08)}
}
.sizes--row .sz.active .sz-w{transform:translateY(-6px) scale(1.08)}

/* каскад: буквы въезжают снизу */
body.ready .sizes--row .sz-w{
  animation:szInRow .6s var(--ease-out) backwards;
  animation-delay:calc(1.25s + var(--i,0) * .1s);
}
@keyframes szInRow{
  from{opacity:0;transform:translateY(14px)}
}

/* ============================================================
   ГРАНИЦА ВИДИМОСТИ — в самом конце, ПОСЛЕ полных блоков:
   иначе поздний display:flex колонки перебьёт раннее
   display:none (так и случилось — дубль на телефоне).
   ============================================================ */

.sizes--row{display:none}

@media (max-width:799px){
  .sizes--col{display:none}
  .sizes--row{display:flex}
}