/* ==================================================================
   THE RAIL: hanging clothes hero (used on rail.html and both landings)
   ================================================================== */
.rail-hero { position: relative; }
.hero { text-align: center; padding: 18px 16px 0; }
.tabs { display: inline-flex; gap: 4px; margin-top: 14px; padding: 4px; border-radius: 999px; }
.tabs button { border: 0; background: none; padding: 8px 20px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: .25s; }
.tabs button.sel { background: #fff; color: var(--ink); box-shadow: 0 1px 4px #0001; }

/* ---------- stage + rope ---------- */
.stage {
  position: relative; height: 400px; margin-top: 4px; user-select: none; -webkit-user-select: none;
  cursor: grab; touch-action: pan-y; overflow: hidden;
}
.stage.dragging { cursor: grabbing; }
.rope { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

/* ---------- hanging items ---------- */
.item { position: absolute; top: 0; left: 0; width: 240px; margin-left: -120px; perspective: 800px; will-change: transform; }
.item * { pointer-events: none; }
.item .hit { pointer-events: auto; position: absolute; left: 70px; right: 70px; top: 20px; height: 250px; cursor: pointer; }
.hook { display: block; margin: 0 auto; width: 20px; height: 28px; visibility: hidden; } /* photos carry their own hook; kept for spacing */
.tag {
  position: absolute; top: 22px; left: 50%; margin-left: 12px; z-index: 4; background: #fff; border-radius: 3px; font-size: 10px; font-weight: 700;
  padding: 2px 5px; box-shadow: 0 1px 3px #0002; transform-origin: 0 0; transform: rotate(9deg);
}
.swing { transform-origin: 50% 0; }
.turn { transform-origin: 50% 0; filter: brightness(.97); transition: transform .75s cubic-bezier(.2, .9, .25, 1.12), filter .5s; }
.item .art { margin-top: -26px; }
.item .garment img { height: calc(var(--gh, 225px) * var(--h, 1)); }
.item.on { z-index: 60 !important; }
.item.on .turn { transform: scale(1.18); filter: none; }

/* side view at rest -> swings round to the front on hover */
.dual { perspective: 700px; }
.dual img { transform-origin: 50% 0; backface-visibility: hidden; }
.dual .g-front {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%) rotateY(-90deg); opacity: 0;
  transition: transform .25s ease-in, opacity .18s;
}
.dual .g-side { transition: transform .4s cubic-bezier(.2, .9, .3, 1.1) .2s, opacity .2s .2s; }
.item.on .dual .g-side { transform: rotateY(90deg); opacity: 0; transition: transform .26s ease-in, opacity .18s .08s; }
.item.on .dual .g-front {
  transform: translateX(-50%) rotateY(0); opacity: 1;
  transition: transform .55s cubic-bezier(.2, .9, .3, 1.15) .22s, opacity .15s .22s;
}

/* ---------- footer row + scroll bar ---------- */
.foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; padding: 0 var(--pad) 22px; font-size: 12.5px; }
.info { min-height: 36px; }
.info b { display: block; font-size: 14px; font-family: var(--serif); font-size: 18px; font-weight: 600; }
.hint { color: var(--muted); }
.hint:before { content: ""; display: inline-block; width: 18px; height: 1px; background: #bbb; vertical-align: middle; margin-right: 8px; }
.bar { width: 120px; height: 14px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.track { position: relative; width: 100%; height: 2px; background: var(--line); border-radius: 2px; }
.thumb { position: absolute; top: -0.5px; height: 3px; border-radius: 2px; background: var(--ink); left: 0; width: 40%; }
.right { text-align: right; }
.right b { display: block; font-size: 13px; }
.right a { display: inline-flex; gap: 8px; margin-top: 8px; color: inherit; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

@media (max-width: 760px) {
  .hero .eyebrow span { display: block; border: 0; margin: 6px 0 0; padding: 0; }
  .stage { height: 310px; }
  .item { --gh: 200px; }
  .item .hit { left: 80px; right: 80px; height: 215px; }
  .foot { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .right { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .turn { transition: none; } }

/* ==================================================================
   JEWELRY ON THE RAIL: two display options (data-jewel on the mount)
   ================================================================== */
#ropePath, #ropeShadow { transition: opacity .6s, stroke-width .6s; }
.shelf { position: absolute; left: 0; right: 0; top: 300px; height: 18px; opacity: 0; transition: opacity .6s; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.35)); border-top: 1px solid #fff;
  box-shadow: 0 18px 30px -14px rgba(40,28,12,.28), inset 0 -1px 0 rgba(0,0,0,.05); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }

/* pedestals replace the rope */
.stage[data-mode="pedestal"] #ropePath, .stage[data-mode="pedestal"] #ropeShadow { opacity: 0; }
.stage[data-mode="pedestal"] .shelf { opacity: 1; }
.stage[data-mode="pedestal"] .tag { display: none; }
.jewel-item .tag { z-index: 5; }

/* shared jewelry sizing: --k scales everything up on the Jewelry tab */
.jewel-item { --k: .78; }
.stage.jw-big .jewel-item { --k: 1.15; }
@media (max-width: 760px) { .jewel-item { --k: .62; } .stage.jw-big .jewel-item { --k: .92; } }

/* ---- Option A: boutique props on hooks ---- */
.jw { display: flex; flex-direction: column; align-items: center; }
.jw .s-hook { width: calc(16px * var(--k)); height: calc(34px * var(--k)); margin-top: 2px; position: relative; z-index: 2; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.jw .piece { display: block; width: auto; height: auto; }
.jw-neck .neck-bar { width: calc(150px * var(--k)); margin-top: calc(-6px * var(--k)); position: relative; z-index: 1; }
.jw-neck .piece { width: calc(160px * var(--k)); margin-top: calc(-30px * var(--k)); }
.jw-ear .velvet-card {
  position: relative; margin-top: calc(-8px * var(--k)); width: calc(132px * var(--k)); height: calc(150px * var(--k)); border-radius: calc(12px * var(--k));
  background: radial-gradient(120% 90% at 30% 15%, #8a2c3c, #571521 55%, #3a0d15); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), inset 0 -10px 24px rgba(0,0,0,.25);
  display: grid; place-items: center; padding-top: calc(14px * var(--k));
}
.jw-ear .velvet-card::before { content: ""; position: absolute; top: calc(8px * var(--k)); left: 50%; width: calc(8px * var(--k)); height: calc(8px * var(--k)); transform: translateX(-50%); border-radius: 50%; background: #2a0910; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
.jw-ear .piece { width: calc(116px * var(--k)); }
.jw-bangle .ribbon { width: calc(54px * var(--k)); height: calc(70px * var(--k)); margin-top: calc(-6px * var(--k)); }
.jw-bangle .piece { width: calc(128px * var(--k)); margin-top: calc(-34px * var(--k)); }
.jw-tikka .piece { width: calc(66px * var(--k)); margin-top: calc(-10px * var(--k)); }
/* flat props turn like the original fake-3D rail: angled at rest, face you on hover */
.jewel-item.is-hook .turn { transform: rotateY(48deg) scale(.95); filter: brightness(.9); }
.jewel-item.is-hook.on .turn { transform: rotateY(0) scale(1.15); filter: none; }

/* ---- Option C: glass pedestals with a turntable spin ---- */
.ped { display: flex; flex-direction: column; align-items: center; width: calc(200px * var(--k)); margin-top: 10px; }
.ped-art { position: relative; width: 100%; height: calc(170px * var(--k)); perspective: 600px; }
.ped-art .v { position: absolute; left: 50%; bottom: calc(4px * var(--k)); max-width: 92%; max-height: 100%; width: auto; height: auto;
  transform: translateX(-50%) rotateY(-75deg); opacity: 0; transition: transform .5s var(--ease), opacity .35s; filter: drop-shadow(0 14px 12px rgba(30,20,10,.22)); }
.ped-art .v.on { transform: translateX(-50%) rotateY(0); opacity: 1; }
.ped-art .v.off { transform: translateX(-50%) rotateY(75deg); opacity: 0; }
.ped-base { position: relative; width: calc(150px * var(--k)); height: calc(96px * var(--k)); margin-top: calc(-10px * var(--k)); }
.ped-base i { position: absolute; left: 0; right: 0; display: block; }
.ped-top { top: 0; height: calc(26px * var(--k)); border-radius: 50%; z-index: 2;
  background: radial-gradient(70% 90% at 40% 30%, #fff, rgba(255,255,255,.55) 60%, rgba(220,210,195,.6)); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 -3px 6px rgba(150,130,100,.18); }
.ped-body { top: calc(13px * var(--k)); bottom: calc(6px * var(--k)); left: 3% !important; right: 3% !important; border-radius: 0 0 50% 50% / 0 0 18% 18%;
  background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.9) 30%, rgba(255,255,255,.5) 55%, rgba(255,255,255,.8) 85%, rgba(255,255,255,.3));
  border-left: 1px solid rgba(255,255,255,.9); border-right: 1px solid rgba(255,255,255,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 600 calc(12px * var(--k))/1 var(--sans); color: var(--ink-2); letter-spacing: .04em; box-shadow: inset 0 -12px 18px -12px rgba(150,130,100,.25), 0 10px 22px -16px rgba(40,28,12,.35); }
.ped-base .ped-body { display: grid; place-items: center; }
.ped-shadow { bottom: calc(-6px * var(--k)); height: calc(16px * var(--k)); border-radius: 50%; background: radial-gradient(closest-side, rgba(40,28,12,.28), transparent); z-index: -1; }
.jewel-item.is-pedestal .turn { transform: none; transition: transform .6s var(--ease); }
.jewel-item.is-pedestal.on .turn { transform: translateY(-6px) scale(1.08); }
.jewel-item.is-pedestal.on .ped-top { box-shadow: inset 0 -3px 6px rgba(150,130,100,.18), 0 0 24px 6px rgba(255,240,205,.8); }

/* variation switcher strip (variation pages only) */
.var-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin: 14px auto 0; padding: 8px 8px 8px 20px; border-radius: 999px; width: max-content; max-width: calc(100% - 32px); font-size: 13px; }
.var-strip b { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.var-strip nav { display: flex; gap: 4px; }
.var-strip nav a { padding: 7px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; color: var(--ink-2); }
.var-strip nav a.cur { background: var(--ink); color: #fff; }
.var-note { text-align: center; color: var(--muted); font-size: 13px; max-width: 640px; margin: 8px auto 0; padding: 0 16px; }
@media (max-width: 760px) { .var-strip { border-radius: 24px; padding: 10px 12px; } .shelf { top: 262px; } }