/* The rack (index.html → #drop), after the owner's reference (snugwrld): a studio wall with a thin chrome rail across
   ~65% of it, a bracket at each end, and the shop's shirts hanging SIDEWAYS on it like in a real shop: each turned 72°,
   evenly spaced, not overlapping (their side photos). The one under the pointer (on a phone: the one in front) turns to
   face you and grows, the others slide a little aside and stay sideways. The hook never turns. Transforms only. */
.rk-wall{--wall:#e9e9e9;--ink:#111;
  --W:min(15.5vw,225px,calc((100svh - 330px) / 1.6));   /* a shirt's width when it faces you, at the common shoulder width */
  --step:clamp(76px,6.2vw,90px);                       /* hook to hook */
  --collar:28px;         /* the hook is 28px tall: the collar starts right under it, the same for every shirt */
  --pt:22px;             /* space above the hooks */
  --ease:cubic-bezier(.22,1,.36,1);
  --t:'Archivo Black','IBM Plex Sans Arabic',system-ui,sans-serif;--m:'IBM Plex Mono',ui-monospace,monospace;
  background-color:var(--wall);background-image:linear-gradient(180deg,#efefef 0%,#e9e9e9 42%,#dddddd 100%);
  color:var(--ink);font-family:var(--m);display:flex;flex-direction:column;align-items:center;padding:96px 0 72px;overflow:hidden}
.rk-wall *{box-sizing:border-box}
html[lang="ar"] .rk-wall{--m:'IBM Plex Sans Arabic',system-ui,sans-serif}
.rk-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the rail: a thin silver tube (6px), centred, ~65% of the screen, a wall bracket (plate + short arm) at each end */
.rk-rack{position:relative;width:65vw;max-width:1200px;direction:ltr}
.rk-bar{position:absolute;left:0;right:0;top:calc(var(--pt) + 7px);height:6px;border-radius:3px;z-index:0;
  background:linear-gradient(180deg,#e6e6e6 0%,#a3a3a3 55%,#cdcdcd 100%);box-shadow:0 8px 9px -5px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.6) inset}
.rk-br{position:absolute;z-index:0;top:calc(var(--pt) - 2px);width:15px;height:24px}
.rk-br.l{left:-14px}.rk-br.r{right:-14px}
.rk-br::before{content:"";position:absolute;top:0;width:6px;height:24px;border-radius:2px;background:linear-gradient(90deg,#9a9a9a,#e2e2e2 45%,#a3a3a3);box-shadow:0 3px 5px rgba(0,0,0,.2)}
.rk-br.l::before{left:0}.rk-br.r::before{right:0}
.rk-br::after{content:"";position:absolute;top:8px;width:10px;height:8px;border-radius:2px;background:linear-gradient(180deg,#d4d4d4,#8f8f8f 60%,#b8b8b8)}
.rk-br.l::after{left:5px}.rk-br.r::after{right:5px}
.rk-sc{position:relative;z-index:1;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-top:var(--pt);padding-bottom:calc(var(--W) * .38 + 10px)}
.rk-sc::-webkit-scrollbar{display:none}
.rk-row{list-style:none;margin:0 auto;padding:0 calc(var(--W) * .65);display:flex;align-items:flex-start;width:max-content;transform:translateX(var(--gx,0px));transition:transform .45s var(--ease)}   /* --gx: rack.js centres the group under the rail */

/* one garment: slot (evenly spaced, slides aside) → swing (around the hook on the rail) → group (hook + shirt, grows)
   → turn (only the shirt: 72° sideways, 0° when it faces you) */
.rk-g{position:relative;flex:0 0 var(--step);width:var(--step);min-width:0;display:flex;justify-content:center;cursor:pointer;
  transform:translateX(var(--dx,0px));transition:transform .55s var(--ease)}
.rk-g.on{z-index:50 !important}
.rk-hit{display:block;width:calc(var(--W) * var(--k,1));flex:none;padding:0;border:0;background:none;cursor:pointer;pointer-events:none;-webkit-tap-highlight-color:transparent;color:inherit}
.rk-hit:focus-visible{outline:none}
.rk-sw{position:relative;display:block;transform-origin:var(--cx) 10px;
  animation:rksway var(--sd,5s) ease-in-out infinite;animation-delay:var(--sdl,0s)}
@keyframes rksway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
/* every movement turns or grows around the point where the hook holds the rail (x = collar centre, y = 10px = the
   rail's middle), so the hook never leaves the rail and the shirt grows downward */
.rk-kick{display:block;transform-origin:var(--cx) 10px}
.rk-kick.go{animation:rkkick .9s linear}                       /* a small damped swing once the turn has ended */
@keyframes rkkick{0%{transform:rotate(0)}16%{transform:rotate(2deg)}42%{transform:rotate(-1.2deg)}68%{transform:rotate(.6deg)}100%{transform:rotate(0)}}
.rk-grp{position:relative;display:block;padding-top:var(--collar);transform-origin:var(--cx) 10px;transition:transform .55s var(--ease);will-change:transform}
.rk-g.on .rk-grp{transform:scale(1.25)}
.rk-grp{transition-duration:.5s}
/* the hanger: a short dark metal "?" hook: up from the collar, over the top of the rail and down behind it (the rail
   passes inside the curve); under it the hanger's wooden neck going into the collar. It never turns. */
.rk-hook{position:absolute;z-index:3;left:var(--cx);top:0;width:16px;height:28px;margin-left:-6px;overflow:visible}
.rk-hook path{fill:none;stroke:#4f5154;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.rk-hook .hl{stroke:#a4a7ab;stroke-width:.8}
.rk-neck{position:absolute;z-index:0;left:var(--cx);top:21px;width:10px;height:12px;margin-left:-5px;border-radius:3px 3px 1px 1px;
  background:linear-gradient(90deg,#4b2f1c,#7d5434 45%,#53341f)}
/* the shirt: its side photo on the rack; under the hand it turns on its hook to face you: the side photo closes
   (scaleX 1 → 0, 250ms), then the front photo opens (0 → 1, 250ms), while the whole group grows. Reverse on leave. */
.rk-fc{position:relative;display:block;pointer-events:none}
.rk-g.on .rk-fc{pointer-events:auto}            /* the front under the hand keeps the hover while the pointer is on it */
.rk-fc img{display:block;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.12))}   /* light from the front-top: the shadow falls down */
.rk-fc .rk-front{width:100%;transform:scaleX(0);transform-origin:var(--cx) 0;
  transition:transform .25s cubic-bezier(.55,0,1,.45),filter .5s var(--ease)}
.rk-g.on .rk-fc .rk-front{transform:scaleX(1);filter:drop-shadow(0 24px 30px rgba(0,0,0,.22));
  transition:transform .25s cubic-bezier(0,.55,.45,1) .25s,filter .5s var(--ease)}
.rk-fc .rk-side{position:absolute;top:0;transform-origin:var(--sh,50%) 0;transition:transform .25s cubic-bezier(0,.55,.45,1) .25s}
.rk-g.on .rk-fc .rk-side{transform:scaleX(0);transition:transform .25s cubic-bezier(.55,0,1,.45)}
.rk-fc:not(:has(.rk-side)) .rk-front{transform:none}          /* a shirt without a side photo: its front, as before */

/* under the rack: name + price of the piece in front, then the availability button */
.rk-cap{margin:0;min-height:18px;transition:opacity .2s;padding:0 20px;text-align:center;font:500 11px/1.5 var(--m);letter-spacing:.06em;text-transform:uppercase}
.rk-cap b{font:400 12px/1.3 var(--t);letter-spacing:.04em}
.rk-cap span{margin-inline-start:8px;color:#555}
html[lang="ar"] .rk-cap,html[lang="ar"] .rk-cap b{font-family:'IBM Plex Sans Arabic',sans-serif;letter-spacing:0;font-weight:700;font-size:13px}
html[lang="ar"] .rk-cap span{font-weight:500}
.rk-avail{margin-top:10px;display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border:1.5px solid var(--ink);border-radius:999px;color:var(--ink);text-decoration:none;
  font:400 11px/1 var(--t);letter-spacing:.1em;text-transform:uppercase;transition:background .2s,color .2s}
.rk-avail:hover{background:var(--ink);color:var(--wall)}
html[lang="ar"] .rk-avail{font:700 14px/1 'IBM Plex Sans Arabic',sans-serif;letter-spacing:0}

/* phone: the whole rack stays on screen; the shirt in front changes with a swipe or a tap */
@media (max-width:860px){
  .rk-wall{--W:min(29vw,calc((100svh - 330px) / 1.6));--step:13vw;padding-top:64px}
  .rk-row{padding:0 calc(var(--W) * .3)}
  .rk-rack{width:84vw;touch-action:pan-y}
  .rk-cap b{display:block}.rk-cap span{margin:0}
}
@media (prefers-reduced-motion:reduce){.rk-sw,.rk-kick.go{animation:none}.rk-g,.rk-grp,.rk-fc img{transition:none}}