/* Hang rail: original implementation. Widths and turn angles are painted by JS each frame;
   neighbours move because the live garment's width grows in normal flex flow. */
hang-rail {
  --garment-h: 320px;
  --gap: 10px;
  --rod: #b9bcc2;
  display: block;
  position: relative;
  overflow: hidden;
  padding: 56px 0 40px;
  color: var(--text);
  background: var(--surface);
  isolation: isolate;
}

/* "Scene" variant: full-bleed background image/art with an overlay. */
hang-rail[data-background] { color: #fff; min-height: min(100vh, 760px); }
.rail-bg { display: none; position: absolute; inset: 0; z-index: -1; }
hang-rail[data-background] .rail-bg { display: block; }
.rail-bg svg, .rail-bg img { width: 100%; height: 100%; display: block; object-fit: cover; }

.rail-head { text-align: center; padding: 0 16px; margin-bottom: 18px; }
.rail-eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.rail-eyebrow .dim { opacity: .55; }
.rail-title { font-size: clamp(30px, 6vw, 64px); font-weight: 500; letter-spacing: -.03em; margin: 10px 0 0; }

.rail-stage { position: relative; padding: 0 16px; }
.rail-rod { position: absolute; left: 0; right: 0; top: 8px; width: 100%; height: 120px; pointer-events: none; overflow: visible; }
.rail-rod path { fill: none; stroke: var(--rod); stroke-width: 7; stroke-linecap: round; }
.rail-rod .rod-shine { stroke: rgba(255,255,255,.75); stroke-width: 1.5; transform: translateY(-1.5px); }

.rail-list {
  list-style: none; margin: 0; padding: 14px 0 0;
  display: flex; justify-content: center; gap: var(--gap);
  min-height: calc(var(--garment-h) + 24px);
}
.rail-item {
  flex: 0 0 auto;
  width: calc(var(--garment-h) * var(--side-a, .28));
  height: var(--garment-h);
  position: relative;
  transform: translateY(var(--sag, 0px));
}
.garment { all: unset; cursor: pointer; display: block; position: absolute; inset: 0; }
.garment:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 8px; }
.garment-swing { position: absolute; inset: 0; transform-origin: 50% 0; pointer-events: none; }
.face {
  position: absolute; top: 0; left: 50%; height: 100%;
  transform-origin: 50% 50%; will-change: transform, opacity;
}
.face-side { width: calc(var(--garment-h) * var(--side-a, .28)); margin-left: calc(var(--garment-h) * var(--side-a, .28) / -2); }
.face-front { width: calc(var(--garment-h) * var(--front-a, .8)); margin-left: calc(var(--garment-h) * var(--front-a, .8) / -2); opacity: 0; transform: scale(.92); }
.face svg, .face img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(0,0,0,.16)); }

.garment-tag {
  position: absolute; top: 12%; left: 50%; margin-left: 4px;
  font-size: 10px; font-weight: 800; background: #fbfaf6; color: #111;
  padding: 3px 6px; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transform: rotate(-4deg); pointer-events: none; white-space: nowrap;
}
.rail-item.is-live .garment-tag { left: 50%; margin-left: 8%; }

/* Drop onto the rail when scrolled into view. */
hang-rail[data-drop] .rail-item { opacity: 0; }
hang-rail[data-drop].is-in-view .rail-item { animation: rail-drop 900ms cubic-bezier(.3,1.4,.4,1) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes rail-drop { from { opacity: 0; translate: 0 -140px; } to { opacity: 1; translate: 0 0; } }

.rail-foot { display: grid; justify-items: center; gap: 12px; padding: 18px 16px 0; text-align: center; }
.rail-caption { font-weight: 600; min-height: 1.4em; }
.rail-cta { color: inherit; text-decoration: none; border: 1px solid currentColor; border-radius: 999px; padding: 9px 20px; font-size: 14px; }
hang-rail[data-background] .rail-foot { justify-items: start; text-align: left; position: relative; }
.rail-hint { font-size: 13px; opacity: .85; }
.rail-dots { display: none; gap: 5px; justify-content: center; margin-top: 12px; }
.rail-dots span { width: 6px; height: 6px; border-radius: 3px; background: currentColor; opacity: .25; transition: width .3s, opacity .3s; }
.rail-dots span.on { width: 18px; opacity: 1; }

/* Focus view ("lift off the rail") */
.rail-focus {
  border: 0; padding: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  background: rgba(255,255,255,.96); color: #111;
  backdrop-filter: blur(26px);
}
.rail-focus::backdrop { background: rgba(255,255,255,.4); backdrop-filter: blur(26px); }
.rail-focus .close { position: absolute; top: 18px; right: 22px; z-index: 2; border: 0; background: none; cursor: pointer; font-size: 14px; }
.rail-focus .close span { font-size: 20px; margin-left: 6px; vertical-align: -2px; }
.rail-focus-inner { display: grid; justify-items: center; align-content: start; height: 100%; overflow: auto; padding: 0 16px 32px; text-align: center; }
.rail-focus-art { position: relative; width: min(420px, 80vw); height: min(52vh, 500px); perspective: 1200px; padding-top: 28px; margin-bottom: 22px; }
.hang-line { position: absolute; top: 0; left: 50%; width: 1.5px; height: 40px; background: #555; }
.rail-focus-art .flip { position: relative; width: 100%; height: 100%; transition: transform .7s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.rail-focus-art .flip.is-back { transform: rotateY(180deg); }
.rail-focus-art .face { position: absolute; inset: 0; left: 0; width: 100%; margin: 0; opacity: 1; transform: none; backface-visibility: hidden; }
.rail-focus-art .face--back { transform: rotateY(180deg); }
.rail-focus-info { display: grid; justify-items: center; gap: 6px; }
.rail-focus .count { font-size: 11px; letter-spacing: .2em; color: #888; }
.rail-focus h2 { font-size: 26px; margin: 0; font-weight: 500; letter-spacing: -.01em; }
.rail-focus .price { font-weight: 700; }
.view-tabs { display: inline-flex; gap: 22px; margin: 6px 0; }
.view-tabs button { border: 0; background: none; padding: 4px 0; cursor: pointer; font-size: 13px; color: #999; border-bottom: 1px solid transparent; }
.view-tabs button[aria-pressed=true] { color: #111; border-color: #111; }
.sizes { border: 0; padding: 0; margin: 4px 0 10px; }
.sizes legend { font-size: 10px; letter-spacing: .2em; color: #888; margin: 0 auto 6px; text-transform: uppercase; }
.size-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.size-row label { position: relative; }
.size-row input { position: absolute; opacity: 0; }
.size-row span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #ccc; border-radius: 50%; cursor: pointer; background: #fff; font-size: 13px; }
.size-row input:checked + span { background: #111; color: #fff; border-color: #111; }
.size-row input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rail-focus [data-add] { min-width: 260px; border-radius: 999px; }
.rail-focus .shop-link { color: #111; font-size: 13px; }
.rail-focus .status { min-height: 1.4em; font-size: 13px; color: var(--accent); }

/* Below 600px: swipeable, auto-playing slider of side views with dots. */
@media (max-width: 599px) {
  hang-rail { --garment-h: 240px; padding: 32px 0 28px; }
  hang-rail[data-background] { min-height: 0; }
  .rail-stage { padding: 0; }
  .rail-rod { display: none; }
  .rail-list {
    justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding: 14px 16px 0; gap: 18px;
    border-top: 6px solid var(--rod);
  }
  .rail-list::-webkit-scrollbar { display: none; }
  .rail-item { scroll-snap-align: start; transform: none; width: 26vw; }
  .face-side { width: 100%; left: 0; margin-left: 0; }
  .rail-dots { display: flex; }
  .rail-focus-art { height: 46vh; }
}

@media (prefers-reduced-motion: reduce) {
  hang-rail[data-drop] .rail-item { opacity: 1; animation: none !important; }
}