:root{--sand: #F3EAD7;--paper: #FBF6EA;--ink: #2B1A12;--ink-soft: #6B5544;--sadu: #7A1E2B;--sadu-deep: #4E1019;--gold: #B9A779;--gold-deep: #8A7646;--teal: #057380;--line: rgba(122,30,43,.18);--display: "Aref Ruqaa", "Amiri", serif;--body: "Noto Naskh Arabic", "Amiri", "Times New Roman", serif;--ui: "Tajawal", "Segoe UI", Tahoma, sans-serif;color-scheme:light;--sadu-band: linear-gradient(135deg, var(--sadu) 25%, transparent 25%) 0 0 / 16px 16px, linear-gradient(225deg, var(--sadu) 25%, transparent 25%) 0 0 / 16px 16px, linear-gradient(315deg, var(--ink) 25%, transparent 25%) 8px 0 / 16px 16px, linear-gradient(45deg, var(--ink) 25%, transparent 25%) 8px 0 / 16px 16px, var(--gold)}*{box-sizing:border-box;margin:0;padding:0}html{background:var(--sand);-webkit-text-size-adjust:100%}body{font-family:var(--body);color:var(--ink);min-height:100dvh;overflow-x:hidden;background-color:var(--sand);background-image:radial-gradient(circle at 1px 1px,rgba(122,30,43,.08) 1px,transparent 0);background-size:18px 18px}body.lock{overflow:hidden}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:8px}img{display:block;max-width:100%}.app{max-width:520px;margin:0 auto;position:relative;padding-bottom:calc(110px + env(safe-area-inset-bottom,0px));background:var(--paper);min-height:100dvh;box-shadow:0 0 0 1px var(--line),0 30px 80px -40px #4e101959}.hd{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;background:var(--sadu-deep);padding:calc(10px + env(safe-area-inset-top,0px)) 16px 0;color:var(--paper)}.hd:after{content:"";flex-basis:calc(100% + 32px);height:14px;margin:10px -16px 0;background:var(--sadu-band);border-top:2px solid var(--gold);border-bottom:2px solid var(--gold)}.brand{display:flex;align-items:center;gap:10px}.brand img{height:44px;width:auto}.brand b{font:700 26px/1 var(--display);color:var(--gold);display:block}.brand small{font:600 10px var(--ui);letter-spacing:4px;color:#d9c9a6;direction:ltr;display:block;text-align:start;margin-top:4px}.lang{min-width:48px;height:44px;padding:0 14px;border-radius:22px;border:1px solid var(--gold);color:var(--gold);font:700 14px var(--ui)}.hi{text-align:center;padding:22px 16px 6px;position:relative}.hi small{font:500 15px var(--body);color:var(--ink-soft)}.hi h1{font:700 34px/1.4 var(--display);color:var(--sadu);text-wrap:balance}.hi:after{content:"";display:block;width:160px;height:1px;margin:12px auto 0;background:linear-gradient(90deg,transparent,var(--gold) 25%,var(--gold) 75%,transparent)}.hi:before{content:"";position:absolute;left:50%;bottom:1px;width:9px;height:9px;margin-left:-4.5px;transform:rotate(45deg);background:var(--teal);box-shadow:0 0 0 3px var(--paper);z-index:1}.tabs{display:flex;gap:4px;overflow-x:auto;padding:14px 12px 6px;scroll-snap-type:x proximity;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{flex:none;width:80px;text-align:center;scroll-snap-align:center;font:600 13px/1.3 var(--ui);color:var(--ink-soft);padding-bottom:6px}.tab i{display:grid;place-items:end center;width:58px;height:70px;margin:0 auto 8px;overflow:hidden;border-radius:999px 999px 10px 10px;background:var(--sand);border:1.5px solid var(--line);transition:background .25s,border-color .25s,transform .25s}.tab i img{width:56px;height:64px;object-fit:contain;object-position:bottom}.tab i img.lg{width:30px;height:30px;margin-bottom:18px;opacity:.5}.tab[aria-selected=true]{color:var(--sadu)}.tab[aria-selected=true] i{background:var(--sadu);border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 16px -8px #4e101999}.tab[aria-selected=true] i img.lg{opacity:1}.stage{position:relative;height:390px;perspective:900px;touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:hidden;margin-top:6px}.stage:before{content:"";position:absolute;left:50%;bottom:52px;width:230px;height:320px;transform:translate(-50%);border-radius:999px 999px 0 0;background:radial-gradient(circle at 50% 35%,#fff,var(--sand) 72%);border:1.5px solid var(--gold);box-shadow:inset 0 0 0 8px var(--paper),inset 0 0 0 9px var(--line)}.ped{position:absolute;left:50%;transform:translate(-50%);pointer-events:none}.ped.a{bottom:22px;width:280px;height:34px;border-radius:50%;background:radial-gradient(ellipse,rgba(78,16,25,.28),transparent 70%)}.ped.c{bottom:38px;width:250px;height:16px;background:var(--sadu-band);border-block:2px solid var(--gold)}.ped.b{display:none}.card{position:absolute;left:50%;bottom:56px;width:200px;height:290px;margin-left:-100px;display:flex;align-items:flex-end;justify-content:center;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s,filter .45s;will-change:transform}.stage.drag .card{transition:none}.card img{max-height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 16px 12px rgba(43,26,18,.32));pointer-events:none}.ph{width:150px;height:200px;border-radius:999px 999px 12px 12px;display:grid;place-items:center;background:var(--sadu);border:2px solid var(--gold);box-shadow:inset 0 0 0 7px var(--sadu),inset 0 0 0 8px var(--gold);position:relative;overflow:hidden}.ph:after{content:"";position:absolute;inset-inline:0;bottom:18px;height:14px;background:var(--sadu-band)}.ph img{width:56px}.nav{position:absolute;top:44%;z-index:120;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--gold);background:var(--paper);color:var(--sadu);display:grid;place-items:center;box-shadow:0 4px 10px -4px #0000004d}.nav.prev{right:8px}.nav.next{left:8px}.nav svg{width:18px;height:18px}.nav:disabled{opacity:.3;cursor:default}html[dir=ltr] .nav.prev{right:auto;left:8px}html[dir=ltr] .nav.next{left:auto;right:8px}html[dir=ltr] .nav svg{transform:scaleX(-1)}.info{text-align:center;padding:0 18px;min-height:160px}.info h2{font:700 34px/1.3 var(--display);color:var(--sadu);text-wrap:balance}.info .sub{font:400 15px/1.7 var(--body);color:var(--ink-soft);margin-top:2px;min-height:22px}.info .row{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}.price{font:800 22px var(--ui);color:var(--sadu);font-variant-numeric:tabular-nums}.price small{font:600 12px var(--ui);color:var(--ink-soft)}.btn{height:46px;padding:0 20px;border-radius:999px 999px 12px 12px;background:var(--sadu);color:var(--paper);font:700 15px var(--ui);display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--gold)}.btn.ghost{background:transparent;color:var(--sadu);border-color:var(--sadu)}.count{font:600 12px var(--ui);color:var(--ink-soft);margin-top:12px;font-variant-numeric:tabular-nums;letter-spacing:2px}.lst{padding:26px 16px 0}.lst h3{font:700 24px var(--display);color:var(--sadu);display:flex;align-items:center;gap:10px;padding-bottom:14px;margin-bottom:4px;position:relative}.lst h3:after{content:"";position:absolute;inset-inline:0;bottom:0;height:9px;opacity:.8;background:linear-gradient(135deg,var(--gold) 50%,transparent 50%) 0 0 / 14px 9px repeat-x,linear-gradient(225deg,var(--gold) 50%,transparent 50%) 0 0 / 14px 9px repeat-x}.dia{display:inline-block;width:9px;height:9px;transform:rotate(45deg);background:var(--teal);flex:none}.it{display:flex;gap:12px;align-items:center;width:100%;padding:12px 0;border-bottom:1px dashed var(--line)}.it.on .thumb{border-color:var(--sadu);background:#fff}.thumb{width:60px;height:74px;flex:none;border-radius:999px 999px 10px 10px;border:1.5px solid var(--gold);background:var(--sand);display:grid;place-items:end center;overflow:hidden;padding-top:4px}.thumb img{height:66px;width:54px;object-fit:contain;object-position:bottom}.thumb img.lg{height:26px;width:26px;margin-bottom:22px;opacity:.45}.it .t{flex:1;min-width:0;text-align:start}.it b{font:700 17px var(--body);display:block;color:var(--ink)}.it em{font-style:normal;font:400 13px var(--body);color:var(--ink-soft);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.it .price{font-size:17px}.add{width:44px;height:44px;flex:none;border-radius:50%;border:1.5px solid var(--sadu);color:var(--sadu);display:grid;place-items:center}.add svg,.btn svg{width:18px;height:18px}.ft{text-align:center;padding:34px 16px 10px;color:var(--ink-soft);font:500 13px var(--ui)}.ft:before{content:"";display:block;height:12px;margin:0 -16px 22px;background:var(--sadu-band)}.ft .soc{display:flex;justify-content:center;gap:12px;margin-bottom:12px}.ft a{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--sadu);display:grid;place-items:center;color:var(--sadu)}.ft a svg{width:20px;height:20px}.bar{position:fixed;z-index:40;left:50%;transform:translate(-50%,140%);bottom:calc(14px + env(safe-area-inset-bottom,0px));width:min(488px,calc(100% - 32px));height:64px;border-radius:18px;padding:0 10px 0 18px;display:flex;align-items:center;justify-content:space-between;border:2px solid var(--gold);background:var(--sadu-deep);color:var(--paper);box-shadow:0 16px 30px -12px #4e101999;transition:transform .35s cubic-bezier(.2,.8,.2,1)}.bar.show{transform:translate(-50%)}.bar .sum b{font:800 18px var(--ui);color:var(--gold);font-variant-numeric:tabular-nums}.bar .sum small{display:block;font:500 12px var(--ui);color:#e6d8bb}.bar .btn{background:var(--gold);color:var(--sadu-deep);border-color:var(--gold)}.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}.sheet[hidden]{display:none}.scrim{position:absolute;inset:0;background:#2b1a128c;animation:fade .25s}.panel{position:relative;width:min(520px,100%);max-height:92dvh;overflow-y:auto;background:var(--paper);border-top:4px solid var(--gold);border-radius:26px 26px 0 0;padding:12px 20px calc(24px + env(safe-area-inset-bottom,0px));animation:up .35s cubic-bezier(.2,.8,.2,1)}.grab{width:44px;height:5px;border-radius:5px;background:var(--line);margin:0 auto 8px}.x{position:absolute;top:12px;inset-inline-end:14px;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);color:var(--sadu);display:grid;place-items:center;z-index:3;background:var(--paper)}.x svg{width:18px;height:18px}.dstage{position:relative;height:330px}.halo{position:absolute;left:50%;bottom:34px;width:230px;height:285px;transform:translate(-50%);border-radius:999px 999px 0 0;background:radial-gradient(circle at 50% 35%,#fff,var(--sand) 75%);border:1.5px solid var(--gold)}.ring{position:absolute;left:50%;bottom:22px;width:260px;height:14px;transform:translate(-50%);background:var(--sadu-band);border-block:2px solid var(--gold)}.dstage .ped{display:none}.dimg{position:absolute;left:50%;bottom:38px;height:270px;transform:translate(-50%);display:flex;align-items:flex-end;z-index:2}.dimg img{max-height:100%;width:auto;filter:drop-shadow(0 16px 12px rgba(43,26,18,.32))}.dd{text-align:center}.dd .sec{font:600 13px var(--ui);color:var(--teal)}.dd h2{font:700 34px/1.3 var(--display);color:var(--sadu);text-wrap:balance}.dd .en{font:600 12px var(--ui);color:var(--ink-soft);letter-spacing:2px}.dd p{font:400 16px/1.8 var(--body);color:var(--ink);margin-top:6px}.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}.chips span{font:600 12px var(--ui);padding:6px 12px;border-radius:999px;background:var(--sand);color:var(--sadu);border:1px solid var(--line)}.buy{display:flex;align-items:center;gap:12px;margin-top:20px}.qty{display:flex;align-items:center;gap:4px;font:700 18px var(--ui);font-variant-numeric:tabular-nums}.qty button{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--sadu);color:var(--sadu);display:grid;place-items:center}.qty button svg{width:16px;height:16px}.qty output{min-width:28px;text-align:center}.buy .btn{flex:1;min-width:0;justify-content:center;height:52px;white-space:nowrap;font-size:14px;padding:0 12px}.oh{font:700 30px var(--display);color:var(--sadu);padding:6px 0 2px}.onote{font:400 14px var(--body);color:var(--ink-soft);margin-bottom:8px}.oi{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line)}.oi .t{flex:1;min-width:0}.oi b{display:block;font:700 16px var(--body)}.oi em{font-style:normal;font:500 13px var(--ui);color:var(--ink-soft);font-variant-numeric:tabular-nums}.tot{display:flex;justify-content:space-between;align-items:center;padding:16px 0 6px;font:600 16px var(--ui)}.tot b{font:800 24px var(--ui);color:var(--sadu);font-variant-numeric:tabular-nums}.empty{text-align:center;padding:30px 0;color:var(--ink-soft)}.clear{display:block;margin:10px auto 0;height:44px;padding:0 16px;color:var(--ink-soft);font:500 13px var(--ui);text-decoration:underline}.toast{position:fixed;z-index:80;left:50%;top:calc(90px + env(safe-area-inset-top,0px));transform:translate(-50%,-20px);opacity:0;pointer-events:none;background:var(--sadu);color:var(--paper);padding:10px 18px;border-radius:14px;font:700 14px var(--ui);transition:.3s;border:1.5px solid var(--gold)}.toast.show{opacity:1;transform:translate(-50%)}.loader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;align-content:center;gap:22px;background:var(--sadu-deep) radial-gradient(circle at 50% 42%,rgba(185,167,121,.25),transparent 55%);transition:clip-path .9s cubic-bezier(.7,0,.3,1);clip-path:inset(0 0 0 0)}.loader:before,.loader:after{content:"";position:absolute;inset-inline:0;height:14px;background:var(--sadu-band);border-block:2px solid var(--gold)}.loader:before{top:env(safe-area-inset-top,0px)}.loader:after{bottom:env(safe-area-inset-bottom,0px)}.loader.out{clip-path:inset(0 0 100% 0);pointer-events:none}.loader svg{width:min(190px,50vw);height:auto;overflow:visible;filter:drop-shadow(0 24px 24px rgba(0,0,0,.45))}.loader.full svg{animation:cheers .7s cubic-bezier(.3,1.6,.5,1)}@keyframes cheers{40%{transform:rotate(-7deg) scale(1.05)}to{transform:none}}#lLiquid{transition:transform .45s cubic-bezier(.3,1.2,.5,1)}#lWave{animation:wave 2.6s linear infinite}#lWave2{animation:wave 4s linear infinite reverse}@keyframes wave{to{transform:translate(220px)}}.lbub{animation:rise 2.2s ease-in infinite}@keyframes rise{0%{transform:translateY(0);opacity:0}15%{opacity:.9}to{transform:translateY(-200px);opacity:0}}.loader .lt{text-align:center;color:var(--gold)}.loader .lt b{display:block;font:700 36px/1.2 var(--display)}.loader .lt span{font:700 13px var(--ui);letter-spacing:3px;color:#e6d8bb;font-variant-numeric:tabular-nums;direction:ltr;display:inline-block;margin-top:4px}@keyframes up{0%{transform:translateY(100%)}}@keyframes fade{0%{opacity:0}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media (min-width: 700px){.stage{height:420px}.card{width:230px;height:330px;margin-left:-115px}}