/* The rail (new drop): pieces hang on wooden hangers from a chrome rail, like the reference reel.
   They swing a little when the rail is swiped, and a tap hangs the piece alone on the wall. */
.hd .logo.plz{font:500 19px/1 'Bodoni Moda',Georgia,serif;letter-spacing:.2em;text-transform:uppercase;display:inline-flex;flex-direction:column;align-items:center;direction:ltr;margin-inline-end:-.2em}
.hd .logo.plz::after{content:none}
.hd .logo.plz small{font:600 7px/1 Geist,system-ui,sans-serif;letter-spacing:.34em;margin-top:4px}
@media (max-width:860px){.hd .logo.plz{font-size:17px}}

.rail{--S:27vw;--G:40vw;--gap:34px;background:#fff;padding:56px 0 34px;overflow:hidden}
@media (min-width:860px){.rail{--S:142px;--G:216px}}
.rl-head{padding:0 20px;text-align:center}
.rl-head .label{display:block;color:#7a7a7a}
.rl-head h2{margin:8px 0 0}
.rl-head p{margin:8px auto 0;max-width:420px;color:#6b6b6b;font-size:14px}
.rl{position:relative;margin-top:26px;direction:ltr}
.rl-sc{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-bottom:26px}
.rl-sc::-webkit-scrollbar{display:none}
.rl-tr{position:relative;display:flex;align-items:flex-start;width:max-content;padding-inline:calc(50vw - var(--S) / 2)}
@media (min-width:860px){.rl-tr{padding-inline:calc(50% - var(--S) / 2)}}

/* chrome rail with wall brackets */
.rbar{position:absolute;top:8px;height:7px;border-radius:4px;left:calc(50vw - var(--S) / 2 - 26px);right:calc(50vw - var(--S) / 2 - 26px);
  background:linear-gradient(#fdfdfd 0%,#c9ccd0 36%,#878a8f 58%,#d6d8db 82%,#f4f4f5 100%);box-shadow:0 5px 8px rgba(0,0,0,.13);z-index:0}
.rbar::before,.rbar::after{content:"";position:absolute;top:-6px;width:9px;height:19px;border-radius:3px;background:linear-gradient(90deg,#a8abaf,#eceef0 45%,#9da0a5);box-shadow:0 3px 6px rgba(0,0,0,.18)}
.rbar::before{left:-4px}.rbar::after{right:-4px}

/* one piece: slot → swing wrapper → garment with its hanger */
.rg{position:relative;flex:0 0 var(--S);min-width:0;display:flex;justify-content:center;scroll-snap-align:center;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;z-index:1}
.rg:focus-visible{outline:none}
.rg:focus-visible .gm img{outline:2px solid #111;outline-offset:6px}
.sw{position:relative;width:var(--G);padding-top:var(--gap);transform-origin:50% 11px;transform:translateX(var(--tx,0px));will-change:transform}
.gm{position:relative;display:block;width:100%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.gm img{display:block;width:100%;height:auto;filter:drop-shadow(-8px 14px 12px rgba(0,0,0,.14));pointer-events:none;user-select:none;-webkit-user-drag:none}
.rg:hover .gm{transform:translateY(-4px)}

/* the hanger: chrome hook over the rail, a nut, and the wooden bar seen inside the collar */
.hk-curl{position:absolute;left:50%;top:calc(-1 * var(--gap));width:22px;height:18px;margin-left:-4px;overflow:visible;z-index:3}
.hk-curl path{fill:none;stroke:url(#chromeH);stroke-width:2.4;stroke-linecap:round}
.hk-stem{position:absolute;z-index:3;left:50%;width:2.4px;margin-left:-1.2px;top:calc(-1 * var(--gap) + 9px);height:calc(var(--gap) - 9px + var(--ny));
  background:linear-gradient(90deg,#7c8085,#f2f3f4 45%,#9a9da1);border-radius:2px}
.hk-nut{position:absolute;z-index:4;left:50%;top:calc(var(--ny) - 9px);width:7px;height:7px;margin-left:-3.5px;border-radius:2px;background:linear-gradient(90deg,#868a8f,#f4f5f6 45%,#8f9297)}
.wood{position:absolute;z-index:2;left:50%;top:calc(var(--ny) - 3px);width:var(--nw);height:10px;transform:translateX(-50%);border-radius:5px 5px 6px 6px;
  background:linear-gradient(180deg,#e2b47a 0%,#c18a4e 45%,#8c5a2c 100%);box-shadow:0 2px 3px rgba(0,0,0,.25);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%)}
.wood::before{content:"";position:absolute;inset:2px 8% auto;height:1.5px;border-radius:2px;background:rgba(255,236,205,.55)}
.rl-cap{margin:2px 0 0;text-align:center;font-size:14px;color:#6b6b6b;min-height:22px;padding:0 20px}
.rl-cap b{color:#111;font-weight:600}
.rl-cap .pz{margin-inline-start:6px;color:#111}
.rl-hint{display:flex;justify-content:center;gap:8px;align-items:center;margin-top:6px;font-size:12px;color:#8a8a8a;letter-spacing:.06em;text-transform:uppercase}
html[lang="ar"] .rl-hint{letter-spacing:0;text-transform:none}

/* ---------- focus: one piece alone on the wall ---------- */
.rf{position:fixed;inset:0;z-index:55;background:#fff;color:#111;display:flex;flex-direction:column;--F:min(74vw,380px,calc((100svh - 380px) * .78));--gap:46px;
  padding-bottom:env(safe-area-inset-bottom,0px);overflow-y:auto;overscroll-behavior:contain}
.rf[hidden]{display:none}
.rf-top{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 0}
.rf-back,.rf-bag{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border-radius:999px;border:1px solid #e3e3e3;background:#fff;color:#111;font:500 13px/1 Geist,system-ui,sans-serif;letter-spacing:.04em;cursor:pointer}
.rf-bag{width:42px;padding:0;justify-content:center;position:relative;font-size:18px}
.rf-bag b{position:absolute;top:-4px;inset-inline-end:-4px;min-width:17px;height:17px;border-radius:9px;background:#111;color:#fff;font:600 10px/17px Geist,sans-serif;text-align:center;padding:0 4px}
.rf-n{font:500 12px/1 Geist,sans-serif;letter-spacing:.12em;color:#777}
.rf-st{position:relative;flex:none;margin-top:auto;overflow:hidden;direction:ltr;touch-action:pan-y}   /* as tall as the shirt: the name and buttons sit right under it */
.rf-st .rbar{left:-20px;right:-20px;top:16px}
.rf-st .rbar::before,.rf-st .rbar::after{content:none}
.rf-main{position:relative;width:var(--F);margin:56px auto 14px;z-index:2}
.rf-main .sw,.rf-side .sw{width:100%}
.rf-main .gm img{filter:drop-shadow(-14px 22px 18px rgba(0,0,0,.16))}
.rf-main .wb{position:absolute;left:0;top:0;width:100%;height:auto;-webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0)}
.rf-main .wb.go{transition:clip-path .75s cubic-bezier(.65,0,.25,1),-webkit-clip-path .75s cubic-bezier(.65,0,.25,1);-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}
.rf-side{position:absolute;top:56px;left:50%;width:calc(var(--F) * .8);z-index:1;filter:blur(5px);opacity:.45;pointer-events:none}
.rf-side.p{margin-left:calc(var(--F) * -1.32)}
.rf-side.n{margin-left:calc(var(--F) * .52)}
.rf-arr{position:absolute;z-index:4;top:40%;left:8px;right:8px;display:flex;justify-content:space-between;pointer-events:none}
.rf-arr button{pointer-events:auto;width:44px;height:44px;border-radius:50%;border:1px solid #cfcfcf;background:rgba(255,255,255,.75);color:#111;font-size:18px;display:grid;place-items:center;cursor:pointer}
/* colour tags hanging next to the hook */
.rf-tags{position:absolute;z-index:4;top:18px;left:calc(50% + var(--F) * .26);display:flex;gap:3px;align-items:flex-start}
.ctag{display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;background:none;border:0;padding:0 1px;cursor:pointer;min-height:44px;-webkit-tap-highlight-color:transparent}
.ctag i{display:block;width:1px;height:var(--l,22px);background:#9a978f;transition:height .3s}
.ctag b{position:relative;width:18px;height:54px;border-radius:3px 3px 5px 5px;background:var(--c);box-shadow:0 4px 7px rgba(0,0,0,.18),inset 0 0 0 1px rgba(0,0,0,.1)}
.ctag b::before{content:"";position:absolute;top:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#fff;box-shadow:inset 0 1px 1px rgba(0,0,0,.3)}
.ctag[aria-pressed="true"] i{height:calc(var(--l,22px) + 12px)}
.ctag[aria-pressed="true"] b{box-shadow:0 6px 10px rgba(0,0,0,.24),0 0 0 2px #fff,0 0 0 3.5px #111}
.ctag.swing{animation:tagswing .9s cubic-bezier(.3,.6,.3,1)}
@keyframes tagswing{0%{transform:rotate(0)}25%{transform:rotate(9deg)}50%{transform:rotate(-6deg)}75%{transform:rotate(3deg)}100%{transform:rotate(0)}}
.rf-in{position:relative;z-index:4;text-align:center;padding:4px 16px 18px;margin-bottom:auto}
.rf-in h3{margin:0;font:600 clamp(22px,6vw,32px)/1.1 Geist,system-ui,sans-serif;letter-spacing:-.01em;text-transform:uppercase}
html[lang="ar"] .rf-in h3{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;text-transform:none}
.rf-meta{margin-top:4px;font-size:14px;color:#666}
.rf-meta .pz{color:#111;font-weight:600}
.rf-seg{display:inline-flex;margin-top:12px;border:1.5px solid #111;border-radius:999px;padding:3px;gap:2px}
.rf-seg button{min-width:78px;min-height:34px;padding:0 12px;border-radius:999px;border:0;background:none;color:#111;font:600 11px/1 Geist,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
html[lang="ar"] .rf-seg button{font:600 13px/1 'IBM Plex Sans Arabic',sans-serif;letter-spacing:0}
.rf-seg button[aria-pressed="true"]{background:#111;color:#fff}
.rf-av{display:inline-block;margin-top:14px;font:600 12px/1.3 Geist,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#111;text-decoration:none;border-bottom:1.5px solid #111;padding-bottom:3px}
html[lang="ar"] .rf-av{font:600 14px/1.4 'IBM Plex Sans Arabic',sans-serif;letter-spacing:0}
@media (min-width:860px){.rf{--F:min(30vw,380px,calc((100vh - 370px) * .8))}.rf-side{opacity:.55}.rf-side.p{margin-left:calc(var(--F) * -1.62)}.rf-side.n{margin-left:calc(var(--F) * .82)}.rf-arr{left:max(24px,calc(50% - var(--F) * 1.5));right:max(24px,calc(50% - var(--F) * 1.5))}}
/* the shop's own shirts (products.json → rail): a thin hook and a small nut, a wooden hanger drawn from each photo's
   shoulder line (arms just above the shoulders, the middle inside the collar) */
.gm.hg-on .hk-curl{left:var(--cx);width:15px;height:13px;margin-left:-3px;top:calc(-1 * var(--gap) + 4px)}
.gm.hg-on .hk-curl path{stroke-width:1.7}
.gm.hg-on .hk-stem{left:var(--cx);width:1.7px;margin-left:-.85px;top:calc(-1 * var(--gap) + 11px);height:calc(var(--gap) - 11px + var(--ny))}
.gm.hg-on .hk-nut{left:var(--cx);top:calc(var(--ny) - 6px);width:5px;height:6px;margin-left:-2.5px}
/* front / back (js/rail.js): two faces on the same canvas, one shown at a time with a short fade, no turn (owner, 2026-11-03) */
.tw{position:relative;display:block}
.tw .fc{position:relative;display:block;transition:opacity .25s ease,visibility .25s}
.tw .fc.b{position:absolute;left:0;top:0;width:100%}
.tw[data-s="f"] .fc.b,.tw[data-s="b"] .fc.f{opacity:0;visibility:hidden}
.tw img{position:relative;z-index:1}
.tw .hgw,.tw .hgn{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tw .hgw{z-index:0}
.tw .hgn{z-index:2;-webkit-mask-image:linear-gradient(90deg,transparent 33%,#000 41%,#000 59%,transparent 67%);mask-image:linear-gradient(90deg,transparent 33%,#000 41%,#000 59%,transparent 67%)}
/* focus: «أمام» · «خلف» */
.rf-seg button[hidden]{display:none}
@media (max-width:400px){.rf-seg button{min-width:0;padding:0 11px}}
/* the rail itself reads clearly, in the focus view too */
.rbar{height:8px;background:linear-gradient(#ffffff 0%,#c3c6ca 34%,#74777c 60%,#c9cbce 84%,#efeff0 100%);box-shadow:0 6px 9px rgba(0,0,0,.17)}
@media (prefers-reduced-motion:reduce){.tw .fc{transition:none}.sw{transition:none}.rf-main .wb.go{transition:none}.ctag.swing{animation:none}}