@font-face{font-family:"Tajawal";src:url("fonts/Tajawal-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Tajawal";src:url("fonts/Tajawal-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Tajawal";src:url("fonts/Tajawal-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Tajawal";src:url("fonts/Tajawal-ExtraBold.ttf") format("truetype");font-weight:800;font-display:swap}

:root{
  --paper:#FBF8F4;
  --ink:#1B1512;
  --soft:#6F6259;
  --line:#E3D9CE;
  --greige:#B5A898;
  --wine:#6A1F2C;
  --tint:rgb(233,213,198);
  --ease:cubic-bezier(.2,.75,.2,1);
  --panel-w:clamp(340px,29vw,420px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Tajawal",system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.15;font-weight:800}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
svg path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.page{height:100svh;min-height:540px;display:grid;grid-template-rows:auto minmax(0,1fr)}

/* ---------- Header ---------- */
.top{position:relative;z-index:6;display:flex;align-items:center;justify-content:space-between;height:68px;padding-inline:28px;background:var(--paper);border-bottom:1px solid var(--line)}
.brand img{height:34px;width:auto}
.top__end{display:flex;align-items:center;gap:14px}
.lang{min-width:44px;height:38px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;font-weight:700;font-size:.9rem}
.lang:hover{border-color:var(--ink)}
.bag{position:relative;width:56px;height:56px;display:grid;place-items:center;border-radius:16px;transition:transform .2s var(--ease)}
.bag:hover{transform:translateY(-2px)}
.bag svg{overflow:visible}
.bag__body{fill:var(--paper);stroke-width:1.7}
.bag__handle{stroke-width:1.7}
.bag__flap{stroke-width:1.4}
.bag__clasp{fill:var(--ink);stroke:none}
#bagPeek rect{stroke:var(--ink);stroke-width:1}
.bag__n{position:absolute;bottom:2px;inset-inline-end:0;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--wine);color:#fff;font-size:.78rem;font-weight:700;display:grid;place-items:center;line-height:1}
.bag__n[hidden]{display:none}
.bag.bump{animation:bump .5s var(--ease)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.18) rotate(-5deg)}70%{transform:scale(.96) rotate(3deg)}100%{transform:scale(1)}}

/* ---------- Layout ---------- */
.main{display:grid;grid-template-columns:minmax(0,1fr) var(--panel-w);min-height:0}

/* ---------- Stage ---------- */
.stage{position:relative;overflow:hidden;min-width:0;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;background-color:var(--tint)}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(255,255,255,.78),rgba(255,255,255,0) 44%),linear-gradient(90deg,rgba(255,255,255,.6),rgba(255,255,255,0) 58%)}
[dir=rtl] .stage::before{background:linear-gradient(to top,rgba(255,255,255,.78),rgba(255,255,255,0) 44%),linear-gradient(270deg,rgba(255,255,255,.6),rgba(255,255,255,0) 58%)}
.stage.drag{cursor:grabbing}
.line{position:absolute;inset:0;z-index:1;isolation:isolate}
.m{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform,filter;perspective:1600px;cursor:pointer;--fb:0%}
.m::before{content:"";position:absolute;left:6%;right:6%;bottom:calc(var(--fb) - 1.500%);height:3.400%;border-radius:50%;background:radial-gradient(closest-side,rgba(60,40,30,.26),rgba(60,40,30,0))}
.flip{position:absolute;inset:0}
.flip img{position:absolute;left:50%;max-width:none;width:auto;transform:translateX(-50%);opacity:0;-webkit-user-drag:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0),#000 5.500%);mask-image:linear-gradient(to top,rgba(0,0,0,0),#000 5.500%)}
.flip img.on{opacity:1}

.intro{position:absolute;z-index:2;inset-inline-start:36px;top:30px;max-width:min(380px,46%);pointer-events:none}
.intro h1{font-size:clamp(1.500rem,2.600vw,2.500rem)}
.intro p{margin-top:10px;color:var(--soft);font-size:.98rem;line-height:1.7}

.tag{position:absolute;z-index:3;inset-inline-start:36px;bottom:28px;display:grid;gap:12px;justify-items:start}
.look{display:flex;align-items:baseline;gap:.4em;font-weight:800;font-size:clamp(1.500rem,2.400vw,2.200rem);line-height:1.3;direction:inherit}
.win{display:inline-block;height:1.3em;overflow:hidden;direction:ltr}
.roll{display:block;will-change:transform}
.roll b{display:block;height:1.3em;font-weight:800}
.of{color:var(--soft);font-weight:500;font-size:.6em;direction:ltr}
.ctl{display:flex;align-items:center;gap:10px}
.arrow{width:44px;height:44px;border-radius:50%;background:var(--paper);border:1.5px solid var(--line);display:grid;place-items:center;transition:border-color .2s,transform .2s var(--ease)}
.arrow:hover{border-color:var(--ink)}
.arrow:active{transform:scale(.94)}
.arrow--prev svg{transform:scaleX(-1)}
[dir=rtl] .arrow--prev svg{transform:none}
[dir=rtl] .arrow--next svg{transform:scaleX(-1)}
.dots{display:flex;gap:8px;padding:0 4px}
.dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--paper);box-shadow:0 0 0 1px rgba(27,21,18,.25);transition:transform .25s var(--ease),box-shadow .25s}
.dot[aria-current=true]{transform:scale(1.2);box-shadow:0 0 0 2px var(--ink)}
.t-name h2{font-size:clamp(1.250rem,1.800vw,1.700rem)}
.t-name p{display:flex;align-items:center;gap:8px;color:var(--soft);font-weight:500;font-size:.95rem;margin-top:2px}
.hint{font-size:.86rem;color:var(--soft);transition:opacity .4s}
.hint.gone{opacity:0}

.turn{position:absolute;z-index:4;left:0;top:0;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:700;font-size:.9rem;white-space:nowrap;transform:translate(-50%,-50%);transition:opacity .25s,transform .2s var(--ease)}
.turn[hidden]{display:none}
.turn.off{opacity:0;pointer-events:none}
.turn:active{transform:translate(-50%,-50%) scale(.95)}
.turn.spin svg{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Panel ---------- */
.panel{position:relative;z-index:5;background:var(--paper);border-inline-start:1px solid var(--line);overflow-y:auto;min-height:0}
.p-in{padding:26px 28px;display:flex;flex-direction:column;gap:13px;min-height:100%;justify-content:center;transition:opacity .16s linear}
.p-in.swap{opacity:0}
.p-kind{color:var(--soft);font-weight:500;font-size:.92rem}
.p-name{font-size:clamp(1.700rem,2.300vw,2.200rem);margin-top:-8px}
.p-color{display:flex;align-items:center;gap:9px;color:var(--soft);font-weight:500}
.sw{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:2px}
.price strong{font-size:1.800rem;font-weight:800;line-height:1.1}
.price s{color:var(--soft)}
.badge{align-self:center;background:var(--wine);color:#fff;font-size:.78rem;font-weight:700;padding:2px 11px;border-radius:999px}
.sizes{display:flex;align-items:center;gap:12px;min-width:0}
.sizes__l{font-weight:700;font-size:.95rem;white-space:nowrap}
.size-row{flex:1;display:flex;gap:8px;min-width:0}
.size-row.shake{animation:shake .4s}
.size-row.shake .size{border-color:var(--wine)}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.m-link{display:none;text-decoration:underline;text-underline-offset:3px;font-size:.84rem;font-weight:500;white-space:nowrap;padding:8px 0}
.size{flex:1;min-height:48px;padding:6px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.25;direction:ltr;transition:border-color .15s,background .15s,color .15s}
.size small{font-weight:500;color:var(--wine);font-size:.74rem;direction:inherit}
.size:hover{border-color:var(--ink)}
.size[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.size[aria-pressed=true] small{color:#f0c9ce}
.size:disabled{opacity:.5;cursor:not-allowed}
.err{color:var(--wine);font-weight:500;font-size:.9rem;min-height:1.3em;margin:-4px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:700;font-size:1.050rem;border:1.5px solid var(--ink);transition:transform .2s var(--ease),opacity .2s}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--block{width:100%}
.btn svg{flex:none}
.note{color:var(--soft);font-size:.88rem;text-align:center;margin-top:-4px}
.chart{border-collapse:collapse;width:100%;font-size:.9rem;margin-top:4px}
.chart caption{text-align:start;font-weight:700;font-size:.95rem;padding-bottom:4px}
.chart th,.chart td{padding:7px 8px;text-align:center;border-bottom:1px solid var(--line)}
.chart th{font-weight:500;color:var(--soft)}
.chart td:first-child{direction:ltr}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
.thumbs button{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--line)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs .more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(27,21,18,.55);color:#fff;font-weight:700;direction:ltr}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(20,14,12,.94);display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(94vw,900px);max-height:92vh;border-radius:8px;object-fit:contain}
.lb-close,.lb-nav{position:absolute;background:rgba(255,255,255,.14);color:#fff;width:48px;height:48px;border-radius:50%;font-size:1.800rem;line-height:1;display:grid;place-items:center}
.lb-close{top:14px;right:14px}
.lb-nav{top:50%;margin-top:-24px}
.lb-prev{left:12px}
.lb-next{right:12px}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.26)}

/* ---------- Bag drawer ---------- */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(20,14,12,.5)}
.scrim[hidden]{display:none}
.drawer{position:fixed;left:50%;top:50%;z-index:50;width:min(520px,calc(100% - 24px));max-height:min(88svh,860px);background:var(--paper);border-radius:22px;display:flex;flex-direction:column;overflow:hidden;visibility:hidden;opacity:0;transform:translate(-50%,-47%) scale(.97);transition:transform .3s var(--ease),opacity .25s,visibility 0s linear .3s}
.drawer.open{transform:translate(-50%,-50%);opacity:1;visibility:visible;transition-delay:0s;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line)}
.drawer__head h2{font-size:1.300rem}
.icon-btn{width:44px;height:44px;font-size:1.800rem;line-height:1;border-radius:50%}
.drawer__body{flex:1;overflow-y:auto;padding:0 20px 24px}
.backlink{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--soft);font-weight:500;font-size:.92rem}
.backlink svg{transform:scaleX(-1)}
[dir=rtl] .backlink svg{transform:none}
.sum{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 4px;padding:12px 14px;border-radius:12px;background:#F1E9DF}
.sum strong{font-size:1.150rem}
.or{display:flex;align-items:center;gap:12px;color:var(--soft);font-size:.86rem}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.btn--wa{background:#fff;color:#0B6B3A;border-color:#1FA855}
a.btn{text-decoration:none}
#waAfter a{color:var(--wine);font-weight:700}
.pop{position:fixed;inset:0;z-index:55;background:rgba(20,14,12,.5);display:grid;place-items:center;padding:16px}
.pop[hidden]{display:none}
.pop__box{position:relative;width:min(420px,100%);background:var(--paper);border-radius:18px;padding:22px 20px 18px}
.pop__box .icon-btn{position:absolute;top:6px;inset-inline-end:6px}

.baghero{position:relative;height:190px;margin:4px auto 0;width:230px;zoom:.8}
.baghero svg{position:absolute;left:0;bottom:0;width:230px;height:190px;overflow:visible}
.baghero .bh-back path{fill:#EFE6DB}
.baghero .bh-front .b{fill:#F4EDE4}
.baghero .bh-front .c{fill:var(--ink);stroke:none}
.baghero .items{position:absolute;left:36px;right:36px;bottom:78px;height:112px;display:flex;justify-content:center;align-items:flex-end;overflow:hidden}
.baghero .items img{height:150px;width:auto;max-width:none;margin:0 -12px -52px;transform-origin:50% 100%}
.baghero .items img:nth-child(1){transform:rotate(-9deg)}
.baghero .items img:nth-child(2){transform:rotate(5deg) translateY(-8px)}
.baghero .items img:nth-child(3){transform:rotate(12deg)}
.baghero .items img:nth-child(4){transform:rotate(-3deg) translateY(-4px)}
.empty{text-align:center;color:var(--soft);padding:6px 0 30px}
.empty p{margin-bottom:16px}
.item{display:grid;grid-template-columns:60px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.item .pic{width:60px;height:80px;border-radius:10px;display:grid;place-items:end center;overflow:hidden}
.item .pic img{height:76px;width:auto;max-width:none}
.item h3{font-size:1rem;font-weight:700;line-height:1.35}
.item small{color:var(--soft)}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;margin-top:6px;direction:ltr}
.qty button{width:36px;height:36px;font-size:1.200rem;line-height:1}
.qty span{min-width:22px;text-align:center;font-weight:700}
.item .rm{color:var(--soft);font-size:.8rem;text-decoration:underline;padding:4px}
.totals{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 6px;font-weight:700}
.totals strong{font-size:1.400rem}
.fine{color:var(--soft);font-size:.86rem;margin-bottom:16px}
.form{display:grid;gap:12px;margin-top:10px}
.field{display:grid;gap:5px}
.field label{font-weight:500;font-size:.92rem}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font:inherit;color:inherit}
.field textarea{min-height:76px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field .bad{border-color:var(--wine)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.done{text-align:center;padding:10px 8px 30px}
.done h3{font-size:1.500rem;margin-bottom:8px}
.done p{color:var(--soft);margin-bottom:6px}
.fallback{padding:14px;border:1.5px dashed var(--wine);border-radius:12px;font-size:.92rem}
.fallback a{color:var(--wine);font-weight:700}

.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,30px);z-index:70;background:var(--ink);color:var(--paper);padding:12px 22px;border-radius:999px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease);max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.fly{position:fixed;z-index:80;left:0;top:0;pointer-events:none;max-width:none;width:auto}
.wait{position:fixed;inset:0;z-index:90;background:var(--paper);transition:opacity .5s;pointer-events:none}
.wait.gone{opacity:0}
body.lock{overflow:hidden}

/* ---------- شاشات قصيرة على الديسكتوب: اللوحة تفضل من غير سكرول ---------- */
@media (min-width:821px) and (max-height:740px){
  .p-in{padding:16px 26px;gap:9px}
  .note{display:none}
  .thumbs button{aspect-ratio:1/1}
  .chart th,.chart td{padding:5px 8px}
  .btn{min-height:50px}
}
@media (min-width:821px) and (max-height:640px){
  .thumbs button{aspect-ratio:4/3}
  .price strong{font-size:1.500rem}
}

/* ---------- Phones: كل حاجة في شاشة واحدة ---------- */
@media (max-width:820px){
  body{overflow:auto}
  .page{height:100svh;min-height:560px;display:flex;flex-direction:column}
  .top{height:56px;flex:none;padding-inline:16px}
  .brand img{height:28px}
  .bag{width:50px;height:50px}
  .main{flex:1;min-height:0;display:flex;flex-direction:column}
  .stage{flex:1;min-height:0;cursor:auto}
  .intro{inset-inline-start:16px;top:14px;max-width:60%}
  .intro h1{font-size:1.250rem}
  .intro p{display:none}
  .tag{inset-inline-start:16px;bottom:12px;gap:6px}
  .look{font-size:1.200rem}
  .t-name h2{font-size:1.250rem}
  .t-name p{font-size:.86rem}
  .arrow{width:40px;height:40px}
  .dots{display:none}
  .hint{font-size:.78rem;max-width:44vw;line-height:1.4}
  .turn{height:36px;padding:0 13px;font-size:.84rem}
  .panel{flex:none;border:0;border-top:1px solid var(--line);overflow:visible}
  .p-in{padding:10px 16px calc(12px + env(safe-area-inset-bottom));gap:9px;min-height:0}
  .price strong{font-size:1.400rem}
  .size{min-height:42px;flex-direction:row;gap:6px;padding:4px 8px}
  .m-link{display:inline-block}
  .err,.note,.panel .chart{display:none}
  .thumbs{margin-top:0;gap:6px}
  .thumbs button{aspect-ratio:5/4}
  .thumbs img{object-position:50% 22%}
  .add{order:9;min-height:52px}
  .drawer{left:0;top:auto;bottom:0;width:100%;max-height:92svh;border-radius:22px 22px 0 0;transform:translateY(102%);opacity:1}
  .drawer.open{transform:none}
  .pop{place-items:end center;padding:0}
  .pop__box{width:100%;border-radius:18px 18px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .p-in,.drawer,.btn,.bag,.arrow,.dot{transition:none}
  .bag.bump,.turn.spin svg{animation:none}
}