/* Главная: лента каталога «вешалкой» (js/rail.js). Размеры --F/--H (полотно вырезки 4:5),
   --slot (шаг крючков), --figTop и --jun (где вещь садится на плечики), --bar (ось трубы)
   ставит скрипт. Вырезки на прозрачном, без теней: объём дают труба, плечики и поворот. */
.hang { --F: 280px; --H: 350px; --slot: 124px; --bar: 44px; position: relative; }
.hang__stage {
  position: relative; overflow: hidden; overflow: clip;
  height: 520px; touch-action: pan-y;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  cursor: grab;
}
.hang__stage.is-drag { cursor: grabbing; }

/* Трос: тонкий светло-серый кабель с бликом, цепная линия через всю ширину */
.hang__bar { position: absolute; left: 0; top: 0; height: 100%; pointer-events: none; overflow: visible; }
.hang__bar path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hang__cable { stroke: #BDBDBD; stroke-width: 2.6; }
.hang__cable-hi { stroke: #F2F2F2; stroke-width: .9; }

.hang__list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.hang__item {
  position: absolute; left: 0; top: 0; width: var(--slot); height: calc(var(--low, 300px) + 10px);
  transform-origin: 50% 0; will-change: transform;
}
.hang__item.is-on { z-index: 2; }
.hang__link {
  position: relative; display: block; width: var(--slot); height: 100%; outline: none;
  -webkit-tap-highlight-color: transparent;
}
/* Зона наведения: у развёрнутой вещи — во всю ширину переда, чтобы не перескакивать на соседей */
.hang__hit {
  position: absolute; left: 0; right: 0; top: -14px; bottom: 0;
  transition: transform .44s var(--ease);
}
.is-on .hang__hit { transform: scaleX(var(--hit, 2)); }

/* Вещь: два вида — профиль (side-v1) и перед (cut-v4-1); у каждого свои плечики и крючок
   (SVG за вещью) и прищепки (SVG поверх). Скрипт ставит вид так, что шейка крючка — на оси
   вещи (точка .hang__fig), а дуга крючка охватывает трубу. Общая перспектива 2200px.
   Поворот на крючке: профиль 0 → −90° за 160 мс, на ребре виды сменяются за 40 мс,
   перед +90° → 0 за 280 мс. Высота одна — меняется только ширина */
.hang__fig {
  position: absolute; left: 50%; top: 0; width: 0; height: 0;
  perspective: 2200px; pointer-events: none;
}
.hang__face { position: absolute; width: var(--F); height: var(--H); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hang__face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* 1 px белого по переднему краю — соседи в нахлёсте читаются раздельно, без теней */
.hang__face--side img { filter: drop-shadow(-1px 0 0 #fff) drop-shadow(-2px 0 3px rgba(11, 11, 11, .07)); }
.hang__face svg { position: absolute; left: 0; top: 0; overflow: visible; }
.hang__clips { z-index: 1; }
.hang__hook { fill: none; stroke: #8C8C8C; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.hang__hook-hi { fill: none; stroke: #E6E6E6; stroke-width: .6; stroke-linecap: round; }
.hang__end { fill: #1E1E1E; }
.hang__arc { fill: none; stroke: #2A2A2A; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hang__clips rect { fill: #3A3A3A; }
.hang__clips path { fill: none; stroke: #8C8C8C; stroke-width: 1; }

.hang__face--side {
  transform: rotate(var(--cap-tilt, 0deg)) rotateY(var(--yaw, 0deg)) scaleX(var(--sx, 1)); opacity: 1;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1) .16s, opacity .04s linear .14s;
}
.hang__face--front {
  transform: rotateY(90deg); opacity: 0;
  transition: transform .16s cubic-bezier(.4, 0, .8, .4), opacity .04s linear .14s;
}
.is-on .hang__face--side {
  transform: rotate(var(--cap-tilt, 0deg)) rotateY(-90deg); opacity: 0;
  transition: transform .16s cubic-bezier(.4, 0, .8, .4), opacity .04s linear .14s;
}
.is-on .hang__face--front {
  transform: rotateY(0deg); opacity: 1;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1) .16s, opacity .04s linear .14s;
}
/* вещь без профиля висит передом, без поворота */
.no-side .hang__face--side { display: none; }
.no-side .hang__face--front { opacity: 1; transform: none; transition: none; }

/* Низ блока: название и цена развёрнутой вещи, ход ленты, коллекция и размеры */
.hang__foot {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px;
  min-height: 44px; margin-top: 8px;
}
.hang__now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-width: 0; }
.hang__name { font-size: 15px; line-height: 1.3; }
.hang__now .price { font-size: 14px; }
.hang__now s { color: var(--muted); }
.hang__prog { visibility: hidden; /* полоска хода убрана по просьбе; место в раскладке сохраняется */ position: relative; width: 120px; height: 1px; background: var(--grey); overflow: hidden; align-self: center; }
.hang__prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
.hang__prog i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 24px; background: var(--ink); }
.hang__aux { justify-self: end; text-align: right; color: var(--muted); }

@media (max-width: 767px) {
  .hang__foot { grid-template-columns: 1fr auto; min-height: 52px; }
  .hang__aux { grid-column: 1; grid-row: 2; justify-self: start; text-align: left; }
  .hang__prog { width: 72px; grid-column: 2; grid-row: 1; }
  .hang__stage { cursor: auto; }
  .hang__arc { stroke-width: 2.5; }
}

/* «Уменьшить движение»: штанга прямая, вещи сразу лицом, обычная прокрутка ряда */
.hang.is-still .hang__stage { cursor: auto; touch-action: auto; }
.hang.is-still .hang__list {
  display: flex; overflow-x: auto; scrollbar-width: none; padding-top: var(--bar);
  padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); height: 100%;
}
.hang.is-still .hang__list::-webkit-scrollbar { display: none; }
.hang.is-still .hang__item { position: relative; flex: 0 0 var(--slot); transform: none; will-change: auto; }
.hang.is-still .hang__face--side { display: none; }
.hang.is-still .hang__face--front { opacity: 1; transform: none; transition: none; }
.hang.is-still .hang__hit { transition: none; transform: none; }
.hang.is-still .hang__prog { visibility: hidden; }



/* без движения — обычный ряд: только первый проход, без повторов */
.hang.is-still [data-dup] { display: none; }
/* фокус с клавиатуры: бирок больше нет — рамка вокруг развёрнутой вещи / кепки */
.hang__link:focus-visible .hang__fig { outline: none; }
.hang__link:focus-visible .hang__face--front img, .hang.is-still .hang__link:focus-visible .hang__face--front img { outline: 2px solid var(--ink); outline-offset: 4px; }

/* кепка в профиль чуть клюёт козырьком вниз (висит за задний ремешок) */
.hang__item--cap { --cap-tilt: 15deg; } /* своё имя: --tilt занят гайдбуком в site.css */

/* Подпись под вешалкой — фиксированной высоты, чтобы блок (и всё ниже) не прыгал при смене вещи:
   название не больше 2 строк (дальше многоточие), цена своей строкой, коллекция/размеры — одной */
.hang__foot { align-items: start; }
.hang__now { display: grid; grid-template-rows: auto auto; align-content: start; gap: 2px; height: calc(2 * 1.3em + 1.4em + 2px); min-height: 0; overflow: hidden; }
.hang__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; max-height: calc(2 * 1.3em); }
.hang__now .price { line-height: 1.4; white-space: nowrap; }
.hang__now, .hang__name { font-size: 15px; }
.hang__aux { height: 1.2em; line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 767px) {
  .hang__foot { min-height: 0; }
  .hang__aux { justify-self: stretch; }
}

/* Разворот из видео (js/rail.js SPIN): вместо поворота плоских картинок на ребро — кадры спрайта
   с вырезанным фоном (webp с альфой). Крючок у таких вещей в обоих видах один и стоит на месте.
   is-spin — идут кадры: картинки профиля и переда скрыты (первый кадр = профиль, последний = перед),
   тёмный торец плечиков тает, как при повороте; is-front — разворот закончен, виден перед. */
.hang__spin {
  position: absolute; width: var(--F); height: var(--H); display: none; pointer-events: none;
  background: var(--spin) 50% 0 / 100% 2400% no-repeat;
}
.has-spin .hang__face--side, .has-spin .hang__face--front,
.has-spin.is-on .hang__face--side, .has-spin.is-on .hang__face--front { transition: none; }
.has-spin .hang__face--side, .has-spin.is-on .hang__face--side { transform: rotate(var(--cap-tilt, 0deg)) scaleX(var(--sx, 1)); opacity: 1; }
.has-spin .hang__face--front, .has-spin.is-on .hang__face--front { transform: none; opacity: 0; }
.has-spin .hang__end { transition: opacity .22s ease; }
.has-spin.is-spin .hang__spin { display: block; }
.has-spin.is-spin .hang__face--side img, .has-spin.is-spin .hang__end,
.has-spin.is-spin .hang__face--side .hang__clips { opacity: 0; } /* прищепки брюк и клипса кепки — у профиля */
.has-spin.is-front .hang__face--side { opacity: 0; }
.has-spin.is-front .hang__face--front { opacity: 1; }
.hang.is-still .has-spin .hang__face--front, .has-spin.no-side .hang__face--front { opacity: 1; }
.hang.is-still .has-spin .hang__face--side { opacity: 0; }
.hang.is-still .hang__spin { display: none; }