:root{
  --bg:#efe8de; --bg2:#e6ddd0; --stone:#e2d8ca; --ink:#1c1814; --ink2:#2a2420; --muted:#7b7065; --line:#d4c9ba;
  --gold:#b08d57; --gold2:#d9bd8c; --metal1:#2b2724; --metal2:#5a534d; --cream:#f6f1ea;
  --ease:cubic-bezier(.22,.8,.24,1);
  --pad:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;color:var(--ink);
  background:radial-gradient(120% 60% at 50% 0%, #f6f1ea 0%, var(--bg) 45%, var(--bg2) 100%) fixed;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.lock{overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
img{user-select:none;-webkit-user-drag:none}
.en{font-family:"Cormorant Garamond",serif;direction:ltr;unicode-bidi:isolate}
.kicker{font-family:"Cormorant Garamond",serif;letter-spacing:.38em;font-size:12px;color:var(--gold);direction:ltr;display:block}
.h2{font-family:"Amiri",serif;font-weight:400;font-size:clamp(28px,3.6vw,46px);line-height:1.25}
.sub{color:var(--muted);font-size:14px;line-height:1.9}
.sec{padding:clamp(64px,10vw,120px) var(--pad)}
.sec-head{text-align:center;max-width:620px;margin:0 auto clamp(28px,5vw,56px)}
.sec-head .h2{margin:10px 0 8px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- الرأس ---------- */
header{
  position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);transition:background .4s,box-shadow .4s,padding .4s,opacity .4s;
}
header.solid{background:#f3ede4e6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 #00000010;padding-block:12px}
.brand{display:flex;flex-direction:column;align-items:flex-start;line-height:1;text-decoration:none}
.brand b{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:26px;letter-spacing:.32em;direction:ltr}
.brand small{font-family:"Cormorant Garamond",serif;font-size:10px;letter-spacing:.55em;color:var(--muted);margin-top:4px;direction:ltr}
nav.main{display:flex;gap:30px;font-size:14px;color:var(--muted)}
nav.main a{text-decoration:none;transition:color .3s;position:relative}
nav.main a::after{content:"";position:absolute;inset:auto 0 -6px 0;height:1px;background:var(--ink);transform:scaleX(0);transition:transform .4s var(--ease)}
nav.main a:hover{color:var(--ink)}
nav.main a:hover::after{transform:scaleX(1)}
.hd-actions{display:flex;gap:6px}
.icon-btn{position:relative;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;transition:background .3s}
.icon-btn:hover{background:#0000000a}
.badge{position:absolute;top:4px;left:3px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--ink);color:#fff;font-size:10px;display:grid;place-items:center;transform:scale(0);transition:transform .4s var(--ease)}
.badge.on{transform:scale(1)}
.badge.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.35)}}

/* ---------- الواجهة + الراك ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;padding-top:92px}
.intro{text-align:center;padding:10px 16px 0;transition:opacity .5s,transform .6s var(--ease)}
.intro h1{font-family:"Amiri",serif;font-weight:400;font-size:clamp(34px,4.6vw,56px);margin-top:6px}
.intro p{margin-top:6px;color:var(--muted);font-size:14px}
.rack-wrap{position:relative;margin-top:30px;flex:1}
/* الراك يتمرر أفقيًا تحت عمود ثابت: القطع تنزلق على العمود */
.rack{
  position:relative;display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;
  padding:14px calc(50% - var(--rackh) * .36) 44px;scrollbar-width:none;scroll-snap-type:x proximity;cursor:grab;
  --rackh:min(40vh,26vw,330px);--gap:max(-40px,-2.6vw);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.rack::-webkit-scrollbar{display:none}
.rack.drag{cursor:grabbing;scroll-snap-type:none}
.rack.drag .piece{pointer-events:none}
.rack .piece{scroll-snap-align:center}
.rack-ctrl{display:flex;justify-content:center;align-items:center;gap:10px;margin:-14px 0 6px}
.rack-ctrl .count{min-width:70px}
.rail{
  position:absolute;top:24px;right:clamp(10px,4vw,60px);left:clamp(10px,4vw,60px);height:7px;border-radius:4px;
  background:linear-gradient(180deg,var(--metal2),var(--metal1) 60%,#141210);box-shadow:0 6px 12px -6px #0006;z-index:0;
}
.rail::before,.rail::after{content:"";position:absolute;top:-4px;width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#e3c48f,var(--gold) 55%,#7a5e33)}
.rail::before{right:-6px}.rail::after{left:-6px}
.piece{position:relative;z-index:1;flex:0 0 auto;margin:0 var(--gap);transform-origin:50% 0;transition:transform .6s var(--ease),filter .6s,opacity .6s;outline:none}
.piece img{display:block;height:calc(var(--rackh) * var(--s,1));width:auto;pointer-events:none;filter:drop-shadow(0 18px 18px #3a2a1a2e)}
.piece .tag{position:absolute;bottom:-30px;left:50%;transform:translate(-50%,6px);white-space:nowrap;font-size:12px;color:var(--muted);opacity:0;transition:.4s var(--ease)}
.piece:hover,.piece:focus-visible{transform:translateY(-10px);z-index:3}
.piece:hover img{animation:sway 2.4s ease-in-out infinite}
.piece:hover .tag,.piece:focus-visible .tag{opacity:1;transform:translate(-50%,0)}
.piece:focus-visible img{outline:1px dashed var(--gold);outline-offset:6px}
@keyframes sway{0%,100%{transform:rotate(0)}25%{transform:rotate(1.2deg)}75%{transform:rotate(-1.2deg)}}
.rack:hover .piece:not(:hover){filter:saturate(.75) brightness(1.03);opacity:.82}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0 26px;color:var(--muted);font-size:12px;text-decoration:none}
.scroll-cue i{width:1px;height:34px;background:linear-gradient(var(--muted),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- الشريط ---------- */
.ticker{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:14px 0;background:#f4eee6}
.ticker div{display:inline-flex;gap:48px;animation:tick 40s linear infinite;padding-inline-start:48px}
.ticker span{font-family:"Cormorant Garamond",serif;letter-spacing:.3em;font-size:13px;color:var(--muted)}
.ticker span.ar{font-family:"IBM Plex Sans Arabic";letter-spacing:0}
.ticker b{color:var(--gold);font-weight:400}
@keyframes tick{to{transform:translateX(50%)}}

/* ---------- جرّب الإطلالة ---------- */
.looks{background:linear-gradient(180deg,var(--stone),#ebe3d7);position:relative;overflow:hidden}
.looks-stage{position:relative;display:grid;grid-template-columns:1fr;max-width:1280px;margin:0 auto}
.lineup{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(0px,1vw,14px);min-height:min(66vh,620px);transition:padding .7s var(--ease)}
.lineup::after{content:"";position:absolute;inset:auto 4% 6px 4%;height:18px;border-radius:50%;background:radial-gradient(closest-side,#3a2a1a22,transparent)}
.mq{position:relative;flex:0 1 auto;transition:transform .8s var(--ease),opacity .6s,filter .6s,flex-basis .8s var(--ease),width .8s var(--ease);outline:none;z-index:1}
.mq img{display:block;height:min(62vh,580px);width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 22px 22px #3a2a1a30);transition:height .8s var(--ease)}
.mq .lbl{position:absolute;bottom:-34px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;color:var(--muted);transition:opacity .4s}
.mq:hover{transform:translateY(-8px)}
.mq:focus-visible img{outline:1px dashed var(--gold);outline-offset:6px}
.lineup:hover .mq:not(:hover){opacity:.7}
.lineup.picked{justify-content:flex-start;padding-inline-end:clamp(320px,34vw,430px)}
.lineup.picked .mq{opacity:.16;filter:blur(2px) grayscale(.3);transform:scale(.9)}
.lineup.picked .mq .lbl{opacity:0}
.lineup.picked .mq.on{opacity:1;filter:none;transform:scale(1.08);z-index:3}
.lineup.picked .mq.on .lbl{opacity:0}
.look-panel{
  position:absolute;top:50%;left:0;width:min(400px,92vw);transform:translate(-30px,-50%);opacity:0;pointer-events:none;
  background:#f7f2eaee;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid #fff9;border-radius:24px;padding:26px 24px;
  box-shadow:0 40px 80px -40px #3a2a1a55;transition:opacity .5s .1s,transform .7s .1s var(--ease);z-index:5
}
.look-panel.on{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.look-panel h3{font-family:"Amiri",serif;font-weight:400;font-size:30px;margin:6px 0 2px}
.look-panel .styling{font-size:13px;color:var(--muted)}
.look-items{list-style:none;margin:18px 0 12px;display:grid;gap:10px}
.li{display:grid;grid-template-columns:62px 1fr;gap:12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:16px;background:#ffffff70;transition:border-color .3s}
.li:hover{border-color:var(--ink)}
.li .th{width:62px;height:72px;border-radius:12px;background:#efe8de;display:grid;place-items:center;overflow:hidden;cursor:pointer}
.li .th img{height:66px;width:auto}
.li .nm{font-size:14px;cursor:pointer}
.li .pr{font-size:13px;color:var(--muted);margin-top:2px}
.li .sz{display:flex;gap:5px;margin-top:8px;direction:ltr;justify-content:flex-end}
.li .sz button{min-width:34px;height:28px;border:1px solid var(--line);border-radius:999px;font-size:11px;background:#fff8;transition:.2s}
.li .sz button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.li .sz button:disabled{opacity:.3;text-decoration:line-through;cursor:not-allowed}
.look-total{display:flex;justify-content:space-between;align-items:baseline;padding:10px 4px 16px;border-top:1px solid var(--line);font-size:14px}
.look-total b{font-size:20px;font-weight:500}
.look-close{position:absolute;top:14px;left:14px}
.look-hint{text-align:center;margin-top:52px;font-size:13px;color:var(--muted);transition:opacity .4s}
.lineup.picked + .look-hint{opacity:0}

/* ---------- المجموعة ---------- */
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.chip{height:38px;padding:0 18px;border-radius:999px;border:1px solid var(--line);font-size:13px;transition:.3s;background:#ffffff40}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(14px,2vw,26px);max-width:1280px;margin:0 auto}
.card{text-align:start;display:flex;flex-direction:column;gap:12px;transition:opacity .4s,transform .5s var(--ease)}
.card.hide{display:none}
.card .ph{position:relative;aspect-ratio:4/5;border-radius:22px;background:linear-gradient(180deg,#f5f0e8,#e9e1d5);display:grid;place-items:center;overflow:hidden}
.card .ph::before{content:"";position:absolute;top:22px;left:18%;right:18%;height:4px;border-radius:3px;background:linear-gradient(180deg,var(--metal2),var(--metal1));opacity:.85}
.card .ph img{position:absolute;top:26px;left:50%;height:calc(100% - 52px);width:auto;max-width:88%;object-fit:contain;object-position:top;transform:translateX(-50%);filter:drop-shadow(0 16px 16px #3a2a1a26);transition:transform .8s var(--ease)}
.card:hover .ph img{transform:translateX(-50%) translateY(-6px) scale(1.03)}
.card .flag{position:absolute;top:44px;right:14px;font-size:11px;background:var(--ink);color:#fff;padding:4px 10px;border-radius:999px}
.card .flag.gold{background:var(--gold)}
.card .quick{position:absolute;bottom:14px;inset-inline:14px;height:42px;border-radius:999px;background:#fffd;display:grid;place-items:center;font-size:13px;opacity:0;transform:translateY(10px);transition:.4s var(--ease)}
.card:hover .quick{opacity:1;transform:none}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:0 6px}
.card .meta h4{font-weight:400;font-size:15px}
.card .meta span{font-size:14px;white-space:nowrap}
.card .meta small{display:block;color:var(--muted);font-size:12px;margin-top:2px}

/* ---------- القيم ---------- */
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center;max-width:1180px;margin:0 auto}
.about blockquote{font-family:"Amiri",serif;font-size:clamp(24px,2.8vw,36px);line-height:1.6}
.about blockquote em{color:var(--gold);font-style:normal}
.values{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.val{padding:22px 20px;border:1px solid var(--line);border-radius:20px;background:#ffffff4d}
.val svg{color:var(--gold)}
.val h5{font-size:15px;font-weight:500;margin:12px 0 4px}
.val p{font-size:13px;color:var(--muted);line-height:1.8}

/* ---------- زورنا ---------- */
.visit{background:var(--ink);color:var(--cream);position:relative;overflow:hidden}
.visit::before{content:"SHADOW";position:absolute;inset:auto 0 -4vw 0;text-align:center;font-family:"Cormorant Garamond",serif;font-size:22vw;letter-spacing:.15em;color:#ffffff06;line-height:1;direction:ltr;pointer-events:none}
.visit .sub{color:#c9bfb2}
.visit-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1080px;margin:0 auto}
.vcard{border:1px solid #ffffff1a;border-radius:22px;padding:26px 22px;display:flex;flex-direction:column;gap:10px;background:#ffffff05;text-decoration:none;transition:border-color .3s,background .3s}
.vcard:hover{border-color:var(--gold);background:#ffffff0a}
.vcard svg{color:var(--gold2)}
.vcard h5{font-size:16px;font-weight:500}
.vcard p{font-size:13px;color:#c9bfb2;line-height:1.8}
.vcard .go{margin-top:auto;font-size:13px;color:var(--gold2)}
footer{background:var(--ink);color:#8f857a;border-top:1px solid #ffffff12;padding:26px var(--pad);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px}

/* ---------- بطاقة القطعة (المسرح) ---------- */
.stage{position:fixed;inset:0;z-index:40;display:grid;grid-template-columns:1fr minmax(290px,370px);align-items:center;gap:clamp(20px,4vw,64px);
  padding:84px clamp(16px,6vw,96px) 40px;pointer-events:none;background:transparent;transition:background .5s,backdrop-filter .5s}
.stage.on{pointer-events:auto;background:#efe8dec7;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.stage .shot{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
.fly{position:fixed;z-index:41;pointer-events:none;filter:drop-shadow(0 30px 30px #3a2a1a40);object-fit:contain}
.panel{background:#f7f2eacc;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid #ffffff90;border-radius:22px;padding:26px 24px;box-shadow:0 30px 60px -30px #3a2a1a40;
  opacity:0;transform:translateX(-18px);transition:opacity .5s .15s,transform .7s .15s var(--ease)}
.stage.on .panel{opacity:1;transform:none}
.panel h2{font-family:"Amiri",serif;font-weight:400;font-size:clamp(26px,2.6vw,34px);margin:8px 0 4px;line-height:1.3}
.price{font-size:18px}
.price small{color:var(--muted);font-size:12px;margin-inline-start:4px}
.panel .desc{color:var(--muted);font-size:14px;line-height:1.9;margin:14px 0 18px}
.stock{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#8a5a2b;margin-top:8px}
.stock::before{content:"";width:7px;height:7px;border-radius:50%;background:#c4762f;box-shadow:0 0 0 4px #c4762f22}
.label{font-size:12px;color:var(--muted);margin-bottom:10px;display:flex;justify-content:space-between}
.label button{color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-size:12px}
.sizes{display:flex;gap:8px;direction:ltr;justify-content:flex-end;flex-wrap:wrap}
.sizes button{width:50px;height:42px;border:1px solid var(--line);border-radius:999px;font-size:13px;transition:.25s;background:#ffffff55}
.sizes button:hover{border-color:var(--ink)}
.sizes button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sizes button:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.cta{margin-top:22px;display:grid;gap:10px}
.btn{height:52px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:15px;transition:.3s;text-decoration:none;width:100%}
.btn.main{background:var(--ink);color:#fff}
.btn.main:hover{background:#000}
.btn.main[aria-disabled="true"]{background:#1c181455;cursor:not-allowed}
.btn.ghost{border:1px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.gold{background:var(--gold);color:#fff}
.btn.gold:hover{background:#9a7a48}
.note{font-size:12px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.8}
.in-look{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;display:flex;justify-content:space-between;align-items:center}
.in-look button{color:var(--gold);font-size:13px}
.ctrl{position:fixed;z-index:42;display:flex;gap:8px;opacity:0;pointer-events:none;transition:opacity .4s}
.stage.on ~ .ctrl{opacity:1;pointer-events:auto}
.ctrl.close{top:20px;left:var(--pad)}
.ctrl.nav{bottom:26px;left:50%;transform:translateX(-50%)}
.round{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;background:#ffffff80;backdrop-filter:blur(6px);transition:.3s}
.round:hover{border-color:var(--ink);background:#fff}
.count{min-width:64px;display:grid;place-items:center;font-size:12px;color:var(--muted);direction:ltr}
body.focus header,body.focus .fab{opacity:0;pointer-events:none}
body.focus .piece.sel,body.focus .src-hide{opacity:0 !important}

/* ---------- الدرج الجانبي (السلة) والنوافذ ---------- */
.scrim{position:fixed;inset:0;z-index:50;background:#1c181440;opacity:0;pointer-events:none;transition:opacity .4s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;left:0;z-index:51;width:min(420px,100vw);background:var(--cream);transform:translateX(-102%);transition:transform .6s var(--ease);display:flex;flex-direction:column;box-shadow:30px 0 60px -30px #0004}
.drawer.on{transform:none}
.dr-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line)}
.dr-head h3{font-family:"Amiri",serif;font-weight:400;font-size:26px}
.dr-body{flex:1;overflow:auto;padding:16px 22px}
.empty{text-align:center;color:var(--muted);font-size:14px;padding:60px 10px;line-height:2}
.ci{display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.ci .th{width:70px;height:84px;border-radius:14px;background:#ebe3d7;display:grid;place-items:center}
.ci .th img{height:76px;width:auto}
.ci h6{font-size:14px;font-weight:400}
.ci small{color:var(--muted);font-size:12px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;margin-top:8px;direction:ltr}
.qty button{width:28px;height:28px;font-size:15px}
.qty span{min-width:20px;text-align:center;font-size:13px}
.ci .rm{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;align-self:start}
.ci .lp{font-size:14px;align-self:end;white-space:nowrap}
.dr-foot{padding:18px 22px 22px;border-top:1px solid var(--line);display:grid;gap:12px;background:#f1ebe2}
.row{display:flex;justify-content:space-between;font-size:14px}
.row b{font-size:19px;font-weight:500}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fields input,.fields select,.fit input{height:44px;border-radius:12px;border:1px solid var(--line);background:#fff9;padding:0 12px;font:inherit;font-size:13px;color:var(--ink);width:100%}
.fields input:focus,.fields select:focus,.fit input:focus{outline:none;border-color:var(--ink)}
.fields .wide{grid-column:1/-1}
.modal{position:fixed;inset:0;z-index:52;display:grid;place-items:center;padding:16px;pointer-events:none}
.modal .box{width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--cream);border-radius:24px;padding:26px;opacity:0;transform:translateY(20px) scale(.98);transition:.5s var(--ease);box-shadow:0 40px 80px -30px #0006}
.modal.on{pointer-events:auto}
.modal.on .box{opacity:1;transform:none}
.modal h3{font-family:"Amiri",serif;font-weight:400;font-size:28px}
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px;direction:ltr}
th,td{padding:10px 6px;text-align:center;border-bottom:1px solid var(--line)}
th{font-weight:500;color:var(--muted);font-size:12px}
.fit{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:center;margin-top:8px}
.fit-out{margin-top:12px;font-size:14px;min-height:22px}
.fit-out b{font-size:18px;color:var(--gold)}
.toast{position:fixed;bottom:24px;right:50%;transform:translate(50%,30px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-size:13px;opacity:0;transition:.5s var(--ease);z-index:60;white-space:nowrap}
.toast.on{opacity:1;transform:translate(50%,0)}
.panel .kicker,.look-panel .kicker{text-align:right}
.fab{position:fixed;bottom:20px;right:20px;z-index:25;width:54px;height:54px;border-radius:50%;background:#1f9d55;color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -10px #1f9d5599;transition:transform .3s}
.fab:hover{transform:scale(1.06)}

/* ---------- الجوال ---------- */
@media (max-width:860px){
  nav.main{display:none}
  .about{grid-template-columns:1fr}
  .visit-grid{grid-template-columns:1fr}
  .lineup{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20vw 10px;min-height:auto;scrollbar-width:none;gap:0}
  .lineup::-webkit-scrollbar{display:none}
  .lineup::after{display:none}
  .mq{scroll-snap-align:center;flex:0 0 auto}
  .mq img{height:58vh}
  .mq .lbl{bottom:-26px}
  .lineup.picked{padding-inline-end:20vw}
  .lineup.picked .mq img{height:38vh}
  .lineup.picked .mq.on{transform:none}
  .look-panel{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;transform:translateY(105%);border-radius:24px 24px 0 0;max-height:54vh;overflow:auto;padding:20px 18px}
  .look-panel.on{transform:none}
  .look-hint{margin-top:40px}
}
@media (max-width:760px){
  .rack{scroll-snap-type:x mandatory;padding-bottom:50px;--rackh:300px;--gap:-14px}
  .rail{right:10px;left:10px}
  .rack-ctrl{margin-top:-20px}
  .piece .tag{display:none}
  .rack:hover .piece:not(:hover){filter:none;opacity:1}
  .stage{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;padding:64px 16px 80px;gap:12px}
  .panel{transform:translateY(16px);padding:18px 18px 16px}
  .panel h2{margin:4px 0 2px}
  .panel .desc,.panel .note,.in-look{display:none}
  .sizes{justify-content:center}
  .cta{margin-top:14px;grid-template-columns:1fr 1fr}
  .btn{height:48px;font-size:14px}
  .ctrl.nav{bottom:14px}
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .card .ph{border-radius:16px}
  .card .quick{display:none}
  .card .meta{flex-direction:column;gap:2px}
  .card .meta h4{font-size:13px}
  .values{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .fab{bottom:16px;right:16px}
  body.looking .fab{opacity:0;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition-duration:.01ms !important}.reveal{opacity:1;transform:none}}