/* ============================================================
   SHOPICKS — RackStage (3D rail + pull-off-hanger inspect)
   ============================================================ */
.rack3d{ position:relative; border-radius:var(--r-xl); overflow:hidden;
  background:radial-gradient(130% 90% at 60% -8%, #F4EBDB 0%, #E8DBC4 46%, #D9C8AC 100%);
  box-shadow: inset 0 -70px 130px -50px rgba(90,64,30,.4), var(--sh-2); user-select:none; }
.r3-wall{ position:absolute; inset:0; background:radial-gradient(70% 60% at 50% 26%, rgba(255,250,240,.55), transparent 70%); mix-blend-mode:soft-light; }
.r3-light{ position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(26% 40% at 30% -4%, rgba(255,245,224,.8), transparent 70%),
             radial-gradient(26% 40% at 70% -4%, rgba(255,245,224,.8), transparent 70%); mix-blend-mode:screen; }
.r3-rail{ display:none; }
.r3-floor-line{ position:absolute; left:0; right:0; bottom:0; height:120px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(120,86,44,.2)); }

.r3-stage{ position:absolute; inset:0; z-index:5; perspective:1500px; perspective-origin:50% 44%; cursor:grab; }
.r3-stage:active{ cursor:grabbing; }
.r3-track{ position:absolute; inset:0; transform-style:preserve-3d; }

.r3-hang{ position:absolute; top:78px; left:50%; display:flex; flex-direction:column; align-items:center;
  transform-origin:50% 10px; transition:transform .5s var(--ease), opacity .4s; cursor:pointer; padding:0; }
.r3-hook{ position:relative; z-index:3; margin-bottom:-30px; pointer-events:none; filter:drop-shadow(0 5px 5px rgba(60,40,15,.22)); }
.r3-hooksvg{ display:block; }
/* No card frame — the garment image floats freely at its own aspect ratio. */
.r3-card{ position:relative; z-index:2; padding:0; background:none; border:none; box-shadow:none;
  transition:transform .3s var(--ease); }
.r3-card img{ width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; border-radius:var(--r-md);
  filter:drop-shadow(0 26px 30px rgba(45,30,12,.38)); }
/* SceneView (cropped real photo) filling a rack card */
.r3-card .sv{ width:100%; height:100%; border-radius:var(--r-md); box-shadow:0 26px 30px rgba(45,30,12,.30); }
/* graceful placeholder when an item has no photo at all */
.r3-gar-ph{ width:100%; height:100%; display:grid; place-items:center; background:var(--paper-warm,#F3EBDD);
  border-radius:var(--r-md); box-shadow:0 26px 30px rgba(45,30,12,.22); }
.r3-gar-ph img{ width:46%!important; height:auto!important; object-fit:contain; opacity:.5; filter:none!important; }
.r3-card-big{ padding:0; box-shadow:none; }
.r3-card-big img{ filter:drop-shadow(0 44px 56px rgba(20,12,4,.5)); }
.r3-hang.is-active:hover .r3-card{ transform:translateY(-10px); }
.r3-hang:not(.is-active){ filter:brightness(.95) saturate(.97); }
.r3-ground{ position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); height:18px;
  background:radial-gradient(closest-side, rgba(40,26,10,.34), transparent 76%); filter:blur(3px); z-index:1; pointer-events:none; }

.r3-tag{ position:absolute; top:-30px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:rgba(24,18,12,.94); color:#F4ECDC; padding:7px 15px; border-radius:var(--r-pill);
  display:flex; align-items:center; gap:10px; box-shadow:var(--sh-2); z-index:20; }
.r3-tag b{ font-size:13.5px; font-weight:600; } .r3-tag i{ font-style:normal; font-weight:700; color:var(--gold-soft); font-size:13.5px; }
.r3-tag::after{ content:''; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%) rotate(45deg); width:9px; height:9px; background:rgba(24,18,12,.94); }

.r3-arrow{ position:absolute; top:46%; z-index:14; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.82); backdrop-filter:blur(6px); box-shadow:var(--sh-2); color:var(--ink);
  font-size:26px; line-height:1; display:grid; place-items:center; transition:.18s;
  direction:ltr; } /* the ‹ › glyphs are bidi-mirrored in RTL; force LTR so they point outward */
.r3-arrow:hover{ background:#fff; transform:scale(1.06); }
.r3-arrow.left{ left:18px; } .r3-arrow.right{ right:18px; }
.r3-dots{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:14; display:flex; gap:8px; }
.r3-dots button{ width:8px; height:8px; border-radius:50%; background:rgba(60,42,20,.28); transition:.2s; }
.r3-dots button.on{ background:var(--gold-deep); width:22px; border-radius:99px; }

.r3-hero{ position:absolute; z-index:12; inset-inline-start:40px; bottom:40px; max-width:300px; text-align:start; pointer-events:none; }
.r3-hero::before{ content:''; position:absolute; inset:-26px -36px -24px -42px; z-index:-1; border-radius:36px;
  background:radial-gradient(70% 80% at 28% 60%, rgba(247,239,225,.92), rgba(247,239,225,.5) 55%, transparent 82%); filter:blur(4px); }
.r3-hero h1{ font-size:clamp(26px,3vw,40px); line-height:1.05; margin:8px 0 10px; color:var(--ink); }
.r3-hero p{ font-size:13.5px; line-height:1.6; color:var(--ink-2); margin:0 0 12px; }
.r3-hero p b{ color:var(--gold-deep); }
.r3-hint{ font-size:12px; color:var(--gold-deep); font-weight:600; }

/* dim rack while inspecting */
.rack3d.inspecting .r3-track{ filter:blur(7px) brightness(.62) saturate(.9); transform:scale(.95); transition:.5s var(--ease); }
.rack3d.inspecting .r3-rail{ opacity:.5; }

/* ---------- inspect (float & rotate) ---------- */
.r3-inspect{ position:absolute; inset:0; z-index:40; display:flex; }
.r3-scrim{ position:absolute; inset:0; background:radial-gradient(60% 60% at 42% 44%, rgba(20,13,7,.32), rgba(16,11,6,.6)); backdrop-filter:blur(2px); animation:fadeIn .4s ease both; }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
.r3-istage{ position:relative; flex:1; perspective:1400px; perspective-origin:50% 42%; display:flex; align-items:center; justify-content:center; z-index:2; }
.r3-float{ position:relative; transform-style:preserve-3d; cursor:grab; touch-action:none; z-index:2; }
.r3-float:active{ cursor:grabbing; }
.r3-float-rot{ width:100%; height:100%; transform-style:preserve-3d; }
.r3-floor-shadow{ position:absolute; bottom:8%; left:50%; width:46%; height:30px; z-index:1;
  background:radial-gradient(closest-side, rgba(10,6,2,.5), transparent 75%); filter:blur(5px); }
.r3-spin-hint{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); font-size:12px; color:var(--gold-soft); font-weight:600;
  background:rgba(20,13,7,.5); padding:5px 13px; border-radius:99px; }

/* entrance variants */
.var-lift .r3-float{ animation:pullLift .7s var(--ease) both; }
.var-swing .r3-float{ animation:pullSwing .8s var(--ease) both; }
.var-slide .r3-float{ animation:pullSlide .7s var(--ease) both; }
@keyframes pullLift{ from{opacity:.3; transform:translateY(70px) scale(.6);} to{opacity:1; transform:none;} }
@keyframes pullSwing{ 0%{opacity:.3; transform:translateY(40px) rotate(-10deg) scale(.7);} 60%{transform:translateY(-6px) rotate(4deg) scale(1.03);} 100%{opacity:1; transform:none;} }
@keyframes pullSlide{ from{opacity:.2; transform:translateZ(-200px) scale(.8);} to{opacity:1; transform:none;} }

.r3-info{ position:relative; z-index:3; width:min(36%,360px); align-self:center; margin-inline-end:42px;
  background:rgba(255,253,248,.94); backdrop-filter:blur(10px); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px 26px 22px; box-shadow:var(--sh-3); animation:infoIn .5s var(--ease) both; }
@keyframes infoIn{ from{opacity:0; transform:translateX(-20px);} to{opacity:1; transform:none;} }
.r3-close{ position:absolute; top:14px; left:14px; width:32px; height:32px; border-radius:50%; background:var(--cream-2); color:var(--ink-2); font-size:15px; display:grid; place-items:center; transition:.15s; }
.r3-close:hover{ background:var(--ink); color:#fff; }
.r3-info h2{ font-size:clamp(22px,2.4vw,30px); margin:10px 0 4px; line-height:1.06; }
.r3-brand{ font-size:14px; color:var(--muted); }
.r3-price{ display:flex; align-items:baseline; gap:10px; margin:14px 0; }
.r3-price b{ font-size:30px; font-family:var(--serif); font-weight:600; }
.r3-price s{ font-size:16px; color:var(--muted-2); }
.r3-desc{ font-size:13.5px; line-height:1.65; color:var(--ink-2); margin:0 0 16px; }
.r3-seller{ display:flex; align-items:center; gap:11px; padding:11px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:16px; }
.r3-seller b{ font-size:14px; } .r3-srate{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); margin-top:2px; }
.r3-cta{ display:grid; grid-template-columns:1.3fr 1fr; gap:10px; }
.r3-cta .btn{ width:100%; }
.r3-details{ display:block; width:100%; text-align:center; margin-top:12px; font-size:13.5px; font-weight:600; color:var(--gold-deep); }
.r3-details:hover{ color:var(--ink); }

@media(max-width:880px){
  .rack3d{ height:auto !important; }
  .r3-inspect{ flex-direction:column; }
  .r3-istage{ min-height:54vh; }
  .r3-info{ width:auto; margin:0 14px 16px; }
  .r3-hero{ left:16px; right:16px; bottom:46px; max-width:none; text-align:center; }
  .r3-hero::before{ inset:-20px -20px; background:radial-gradient(85% 90% at 50% 60%, rgba(247,239,225,.92), transparent 84%); }
}