body{margin:0;background:#EEECE7;color:#0F0F10;font-family:'Inter','IBM Plex Sans Arabic',sans-serif}
body.pl[dir="rtl"]{font-family:'IBM Plex Sans Arabic','Inter',sans-serif}
a{color:#0F0F10}a:hover{color:#C53A0C}
.pl *{box-sizing:border-box}
.pl img{display:block}
.pl .xd{font-family:'Archivo','Noto Kufi Arabic',sans-serif;font-stretch:125%;font-weight:800;letter-spacing:-.02em}
.pl .mono{font-family:'JetBrains Mono','IBM Plex Sans Arabic',monospace;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.pl .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pl .btn{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 28px;border-radius:999px;font:700 15px 'Inter','IBM Plex Sans Arabic',sans-serif;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .35s cubic-bezier(.2,.7,.1,1),background .3s,color .3s}
.pl .btn:hover{transform:translateY(-2px)}
.pl .b-ink{background:#0F0F10;color:#FFFFFF}.pl .b-ink:hover{background:#FF4F1A;color:#0F0F10}
.pl .b-or{background:#FF4F1A;color:#0F0F10}.pl .b-or:hover{background:#0F0F10;color:#FFFFFF}
.pl .b-ln{border-color:#0F0F10;color:#0F0F10;background:transparent}.pl .b-ln:hover{background:#0F0F10;color:#FFFFFF}

/* ---------- HEADER ---------- */
.pl .util{display:flex;width:max-content;animation:marq 40s linear infinite}
.pl .hdr{position:sticky;top:0;z-index:50;padding:10px 16px 0}
.pl .bar{position:relative;max-width:1400px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:10px 10px 10px 18px;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-radius:24px;box-shadow:0 1px 0 rgba(15,15,16,.04),0 18px 50px -30px rgba(40,30,20,.55)}
.pl .logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#0F0F10}
.pl .logo:hover{color:#0F0F10}
.pl .mark{position:relative;width:42px;height:42px;border-radius:13px;background:#0F0F10;display:flex;align-items:center;justify-content:center;color:#FFFFFF;font:900 14px 'Archivo',sans-serif;font-stretch:125%}
.pl .mark i{position:absolute;top:7px;inset-inline-end:7px;width:7px;height:7px;border-radius:9px;background:#FF4F1A}
.pl .nav{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.pl .nl{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border-radius:12px;border:0;background:transparent;color:#0F0F10;text-decoration:none;font:600 15px 'Inter','IBM Plex Sans Arabic',sans-serif;cursor:pointer}
.pl .nl:hover,.pl .nl.on{background:#F1EEE8;color:#0F0F10}
.pl .nl svg{transition:transform .3s}
.pl .nl.on svg{transform:rotate(180deg)}
.pl .nb{padding:3px 7px;border-radius:99px;background:#FF4F1A;color:#0F0F10;font:700 10px 'JetBrains Mono',monospace}
.pl .srch{display:flex;align-items:center;gap:0;height:48px;border-radius:999px;background:#F3F1EC;border:1px solid #E4E0D8;flex:1 1 300px;max-width:460px;margin-inline-start:auto;overflow:hidden}
.pl .srch:focus-within{border-color:#0F0F10;background:#FFFFFF}
.pl .srch select{height:100%;border:0;background:transparent;padding:0 12px 0 16px;font:600 13px 'Inter','IBM Plex Sans Arabic',sans-serif;color:#0F0F10;border-inline-end:1px solid #E4E0D8;cursor:pointer;outline:none}
.pl .srch input{flex:1;min-width:0;border:0;background:transparent;outline:none;padding:0 14px;font:500 14px 'Inter','IBM Plex Sans Arabic',sans-serif;color:#0F0F10}
.pl .srch button{width:40px;height:40px;margin:3px;border-radius:50%;border:0;background:#0F0F10;color:#FFFFFF;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pl .srch button:hover{background:#FF4F1A;color:#0F0F10}
.pl .ib{position:relative;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:999px;border:1px solid #E4E0D8;background:#FFFFFF;color:#0F0F10;cursor:pointer}
.pl .ib:hover{border-color:#0F0F10}
.pl .ib b{position:absolute;top:-3px;inset-inline-end:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:#FF4F1A;color:#0F0F10;font:700 10px 'JetBrains Mono',monospace;display:flex;align-items:center;justify-content:center}
.pl .cartb{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 8px 0 18px;border-radius:999px;border:0;background:#0F0F10;color:#FFFFFF;cursor:pointer;font:600 14px 'Inter','IBM Plex Sans Arabic',sans-serif}
.pl .cartb:hover{background:#26262A}
.pl .cartb span.n{min-width:32px;height:32px;padding:0 8px;border-radius:99px;background:#FF4F1A;color:#0F0F10;display:flex;align-items:center;justify-content:center;font:700 12px 'JetBrains Mono',monospace}
.pl .seg{display:flex;padding:3px;border-radius:999px;background:#F1EEE8}
.pl .seg button{height:40px;padding:0 13px;border-radius:999px;border:0;background:transparent;color:#4F4C47;font:700 13px 'Inter','IBM Plex Sans Arabic',sans-serif;cursor:pointer}
.pl .seg button.on{background:#FFFFFF;color:#0F0F10;box-shadow:0 2px 8px -3px rgba(40,30,20,.4)}
.pl .mega{position:absolute;left:0;right:0;top:calc(100% + 8px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr) minmax(0,1fr);gap:14px;padding:14px;border-radius:24px;background:#FFFFFF;box-shadow:0 40px 80px -40px rgba(40,30,20,.6);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .4s cubic-bezier(.2,.7,.1,1),visibility .3s}
.pl .mega.open{opacity:1;visibility:visible;transform:none}
.pl .mega::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.pl .ml{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border-radius:12px;color:#0F0F10;text-decoration:none;font-weight:600}
.pl .ml:hover{background:#F3F1EC;color:#0F0F10}
.pl .mt{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:200px;padding:16px;border-radius:18px;background:#F3F1EC;text-decoration:none;color:#0F0F10}
.pl .mt:hover{color:#0F0F10}
.pl .mt img{position:absolute;top:14px;left:50%;height:128px;width:auto;max-width:80%;object-fit:contain;transform:translateX(-50%);transition:transform .6s cubic-bezier(.2,.7,.1,1);filter:drop-shadow(0 16px 16px rgba(40,30,20,.25))}
.pl .mt:hover img{transform:translateX(-50%) scale(1.1) rotate(-6deg)}
@media (max-width:980px){.pl .mega{grid-template-columns:minmax(0,1fr)}.pl .mega .mtiles{display:none}}

/* ---------- HERO ---------- */
.pl .stage{position:relative;height:600px;margin-top:6px}
.pl .giant{position:absolute;left:0;right:0;top:20px;text-align:center;font:900 clamp(120px,20vw,330px)/.8 'Archivo',sans-serif;font-stretch:125%;letter-spacing:-.05em;color:#FFFFFF;user-select:none;pointer-events:none}
.pl .herogl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab;opacity:0;transition:opacity 1s}
.pl .herogl:active{cursor:grabbing}
.gl-h .herogl{opacity:1}
.pl .herofb{position:absolute;left:50%;top:40px;height:500px;width:auto;transform:translateX(-50%);filter:drop-shadow(0 30px 30px rgba(40,30,20,.3));transition:opacity .6s}
.gl-h .herofb{opacity:0}
.pl .hovl{position:absolute;z-index:6;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:8px 8px 8px 18px;border-radius:999px;background:#FFFFFF;color:#0F0F10;text-decoration:none;font-size:14px;white-space:nowrap;box-shadow:0 20px 40px -20px rgba(40,30,20,.55);animation:pop .35s cubic-bezier(.3,1.5,.5,1)}
.pl .hovl:hover{color:#0F0F10}
.pl .hovgo{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;background:#0F0F10;color:#FFFFFF;font-weight:700;font-size:13px}
@keyframes pop{from{opacity:0;transform:translateX(-50%) translateY(8px) scale(.95)}to{opacity:1;transform:translateX(-50%)}}
@media (max-width:820px){.pl .hovl{max-width:94%;white-space:normal}}
.pl .hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.85);font-size:11px;pointer-events:none}
.pl .swb{display:flex;align-items:center;gap:10px;height:52px;padding:0 16px 0 8px;border-radius:999px;border:1px solid #DDD9D1;background:#FFFFFF;color:#0F0F10;font:600 14px 'Inter','IBM Plex Sans Arabic',sans-serif;cursor:pointer;transition:border-color .3s,transform .3s}
.pl .swb:hover{border-color:#0F0F10;transform:translateY(-2px)}
.pl .swb.on{border-color:#0F0F10;box-shadow:inset 0 0 0 1px #0F0F10}
.pl .swb i{display:block;width:36px;height:36px;border-radius:50%}
@media (max-width:820px){.pl .stage{height:460px}}

.pl .track{display:flex;width:max-content;animation:marq 30s linear infinite}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- categories ---------- */
.pl .tile{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:26px;border-radius:28px;text-decoration:none;color:#0F0F10;transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.pl .tile:hover{color:#0F0F10;transform:translateY(-4px)}
.pl .tile img{position:absolute;inset-inline-end:6%;bottom:8%;height:62%;width:auto;max-width:60%;object-fit:contain;filter:drop-shadow(0 22px 22px rgba(40,30,20,.25));transition:transform .8s cubic-bezier(.2,.7,.1,1)}
.pl .tile:hover img{transform:rotate(-8deg) scale(1.1) translateY(-4%)}
.pl .tile .go{width:44px;height:44px;border-radius:50%;background:#0F0F10;color:#FFFFFF;display:flex;align-items:center;justify-content:center;transition:background .3s}
.pl .tile:hover .go{background:#FF4F1A;color:#0F0F10}
.pl .tab{height:44px;padding:0 18px;border-radius:999px;border:1px solid #D8D4CB;background:transparent;color:#0F0F10;font:600 14px 'Inter','IBM Plex Sans Arabic',sans-serif;cursor:pointer}
.pl .tab:hover{border-color:#0F0F10}
.pl .tab.on{background:#0F0F10;border-color:#0F0F10;color:#FFFFFF}

/* ---------- CINEMATIC 3D CARD ---------- */
.pl .pcard{position:relative;display:flex;flex-direction:column;border-radius:26px;background:#FFFFFF;overflow:hidden;transition:transform .6s cubic-bezier(.2,.7,.1,1),box-shadow .6s}
.pl .pcard:hover,.pl .pcard:focus-within{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(40,30,20,.55)}
.pl .ps{position:relative;display:block;aspect-ratio:1/1.08;overflow:hidden;background:#F3F1EC;text-decoration:none;color:#0F0F10;transition:background .7s;margin:8px;border-radius:20px}
.pl .pcard:hover .ps,.pl .pcard:focus-within .ps{background:var(--hot)}
.pl .rays{position:absolute;inset:-60%;opacity:0;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.2) 0deg 5deg,rgba(255,255,255,0) 5deg 16deg);transition:opacity .8s}
.pl .pcard:hover .rays,.pl .pcard:focus-within .rays{opacity:1;animation:spinr 12s linear infinite}
@keyframes spinr{to{transform:rotate(360deg)}}
.pl .ring2{position:absolute;left:50%;top:50%;width:70%;aspect-ratio:1;margin:-35% 0 0 -35%;border-radius:50%;border:2px solid rgba(255,255,255,0)}
.pl .pcard:hover .ring2,.pl .pcard:focus-within .ring2{animation:ring 6.5s ease-out infinite}
@keyframes ring{0%,28%{transform:scale(.4);border-color:rgba(255,255,255,0)}32%{transform:scale(.6);border-color:rgba(255,255,255,.9)}50%{transform:scale(1.5);border-color:rgba(255,255,255,0)}100%{transform:scale(1.5);border-color:rgba(255,255,255,0)}}
.pl .flr{position:absolute;left:22%;right:22%;bottom:7%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,30,20,.3),rgba(40,30,20,0));transition:opacity .4s}
.pl .ph{position:absolute;inset:12% 16% 12%;width:68%;height:76%;object-fit:contain;animation:idle 6s ease-in-out infinite alternate;transition:opacity .35s;filter:drop-shadow(0 18px 18px rgba(40,30,20,.22))}
@keyframes idle{from{transform:translateY(1.5%) rotate(-1.5deg)}to{transform:translateY(-1.5%) rotate(1.5deg)}}
.pl .gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .35s}
.gl-c .pcard:hover .gl,.gl-c .pcard:focus-within .gl{opacity:1}
.gl-c .pcard:hover .ph,.gl-c .pcard:focus-within .ph{opacity:0}
.gl-c .pcard:hover .flr,.gl-c .pcard:focus-within .flr{opacity:0}
html:not(.gl-c) .pcard:hover .ph{animation:flat 6.5s cubic-bezier(.65,0,.35,1) infinite}
@keyframes flat{0%{transform:none}30%{transform:perspective(800px) rotateY(360deg) scale(1.1)}55%{transform:perspective(800px) rotateY(360deg) scale(1.7) translateY(12%)}100%{transform:none}}
.pl .flash{position:absolute;inset:0;z-index:4;background:#FFFFFF;opacity:0;pointer-events:none}
.pl .pcard:hover .flash,.pl .pcard:focus-within .flash{animation:flash 6.5s linear infinite}
@keyframes flash{0%,30%{opacity:0}33%{opacity:.5}39%{opacity:0}100%{opacity:0}}
.pl .lb{position:absolute;left:0;right:0;height:0;background:#0F0F10;z-index:5;transition:height .7s cubic-bezier(.2,.7,.1,1)}
.pl .lb-t{top:0}.pl .lb-b{bottom:0}
.pl .pcard:hover .lb,.pl .pcard:focus-within .lb{height:8%}
.pl .spec{position:absolute;z-index:6;display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;background:#FFFFFF;color:#0F0F10;font:700 11px 'JetBrains Mono','IBM Plex Sans Arabic',monospace;letter-spacing:.04em;text-transform:uppercase;opacity:0;transform:translateY(12px) scale(.9);transition:opacity .4s,transform .6s cubic-bezier(.3,1.6,.5,1);white-space:nowrap;box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.pl .spec i{display:block;width:7px;height:7px;border-radius:9px;background:var(--hot)}
.pl .s1{top:12%;inset-inline-start:6%}
.pl .s2{top:44%;inset-inline-end:6%}
.pl .s3{bottom:26%;inset-inline-start:7%}
.pl .pcard:hover .s1,.pl .pcard:focus-within .s1{opacity:1;transform:none;transition-delay:1s}
.pl .pcard:hover .s2,.pl .pcard:focus-within .s2{opacity:1;transform:none;transition-delay:2.3s}
.pl .pcard:hover .s3,.pl .pcard:focus-within .s3{opacity:1;transform:none;transition-delay:3.4s}
.pl .cap{position:absolute;z-index:6;inset-inline:6%;bottom:11%;padding:11px 15px;border-radius:16px;background:#FFFFFF;color:#0F0F10;opacity:0;transform:translateY(16px);transition:opacity .6s .5s,transform .8s .5s cubic-bezier(.2,.7,.1,1)}
.pl .pcard:hover .cap,.pl .pcard:focus-within .cap{opacity:1;transform:none}
.pl .tagp{position:absolute;z-index:6;top:14px;inset-inline-start:14px;display:flex;gap:6px;transition:opacity .4s}
.pl .pcard:hover .tagp,.pl .pcard:focus-within .tagp{opacity:0}
.pl .b3d{position:absolute;z-index:6;top:14px;inset-inline-end:14px;padding:6px 9px;border-radius:999px;background:#0F0F10;color:#FFFFFF;font:700 10px 'JetBrains Mono',monospace;letter-spacing:.08em;transition:opacity .4s}
.pl .pcard:hover .b3d,.pl .pcard:focus-within .b3d{opacity:0}
.pl .pill{padding:6px 10px;border-radius:999px;background:#FFFFFF;color:#0F0F10;font:700 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.pl .pill-or{background:#FF4F1A}
.pl .add{width:46px;height:46px;border-radius:50%;border:0;background:#0F0F10;color:#FFFFFF;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .3s,transform .3s}
.pl .add:hover{background:#FF4F1A;color:#0F0F10;transform:rotate(90deg)}

.pl .hs{position:absolute;z-index:3;display:flex;align-items:center;gap:10px}
.pl .hs b{position:relative;display:block;width:16px;height:16px;border-radius:50%;background:#FF4F1A;box-shadow:0 0 0 4px #FFFFFF}
.pl .hs b::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid #FF4F1A;animation:ping 2.2s ease-out infinite}
@keyframes ping{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}
.pl .hs span{padding:9px 14px;border-radius:12px;background:#FFFFFF;font:600 14px 'Inter','IBM Plex Sans Arabic',sans-serif;box-shadow:0 14px 30px -18px rgba(40,30,20,.5);white-space:nowrap}
.pl .spot-img{animation:bob 7s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(-10px) rotate(-12deg)}to{transform:translateY(12px) rotate(-7deg)}}
.pl .deal{display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:20px;background:#FFFFFF;text-decoration:none;color:#0F0F10;transition:transform .4s}
.pl .deal:hover{transform:translateX(6px);color:#0F0F10}
[dir="rtl"] .pl .deal:hover, .pl[dir="rtl"] .deal:hover{transform:translateX(-6px)}
.pl .field{display:flex;gap:8px;padding:6px;border-radius:999px;background:#FFFFFF;border:1px solid #DDD9D1;max-width:460px}
.pl .field input{flex:1;min-width:0;border:0;outline:none;background:transparent;padding:0 16px;font:500 15px 'Inter','IBM Plex Sans Arabic',sans-serif;color:#0F0F10}
.pl .flink{color:#0F0F10;text-decoration:none;font-weight:500}
.pl .flink:hover{color:#C53A0C}
@media (prefers-reduced-motion: reduce){
.pl .util,.pl .track,.pl .spot-img,.pl .hs b::after,.pl .ph{animation:none}
.pl .pcard:hover .rays,.pl .pcard:hover .flash,.pl .pcard:hover .ring2{animation:none}}

/* ---------- PHP storefront additions ---------- */
.pcard.no3d:hover .ph,.pcard:not([data-model]):hover .ph,.gl-c .pcard.no3d:hover .ph,.gl-c .pcard:not([data-model]):hover .ph{opacity:1 !important;animation:flat 6.5s cubic-bezier(.65,0,.35,1) infinite}
.pcard.no3d .gl,.pcard:not([data-model]) .gl{display:none}
.pcard .ps .ph[src$=".svg"]{filter:none}
.wrap{max-width:1400px;margin:0 auto;padding:0 24px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:#5E5A54;margin:28px 0 14px}
.crumbs a{color:#5E5A54;text-decoration:none}.crumbs a:hover{color:#0F0F10}
.crumbs span[aria-hidden]{opacity:.5}
.shop{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;padding-bottom:90px}
.shop-side{flex:0 1 270px;min-width:0;position:sticky;top:110px;display:flex;flex-direction:column;gap:14px}
.shop-main{flex:999 1 560px;min-width:0}
.side-box{background:#FFFFFF;border-radius:22px;padding:18px}
.side-box h3{margin:0 0 10px;font:700 11px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#C53A0C}
.cat-link{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;color:#0F0F10;text-decoration:none;font-weight:600}
.cat-link:hover{background:#F3F1EC;color:#0F0F10}
.cat-link.on{background:#0F0F10;color:#FFFFFF}
.cat-link small{opacity:.6;font-family:'JetBrains Mono',monospace;font-size:11px}
.cat-link.sub{padding-inline-start:26px;font-weight:500}
.toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.toolbar select{height:46px;border-radius:999px;border:1px solid #DDD9D1;background:#FFFFFF;padding:0 16px;font:600 14px 'Inter','IBM Plex Sans Arabic',sans-serif}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{height:40px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;border:1px solid #D8D4CB;color:#0F0F10;text-decoration:none;font-weight:600;font-size:14px}
.chips a:hover{border-color:#0F0F10}
.chips a.on{background:#0F0F10;color:#FFFFFF;border-color:#0F0F10}
.pager{display:flex;gap:6px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.pager a,.pager span{min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:#FFFFFF;text-decoration:none;font-weight:700;color:#0F0F10}
.pager span{background:#0F0F10;color:#FFFFFF}
.empty-state{background:#FFFFFF;border-radius:26px;padding:60px 24px;text-align:center;color:#5E5A54}
.prod{display:flex;flex-wrap:wrap;gap:30px;align-items:flex-start;padding-bottom:60px}
.prod-media{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:12px}
.prod-info{flex:1 1 380px;min-width:0;position:sticky;top:110px;display:flex;flex-direction:column;gap:18px}
.viewer{position:relative;aspect-ratio:1/1;border-radius:30px;overflow:hidden;background:#F3F1EC;transition:background .6s}
.viewer.cine{background:var(--hot)}
.viewer canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;opacity:0;transition:opacity .6s}
.viewer.ready canvas{opacity:1}
.viewer .vimg{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain;transition:opacity .6s;filter:drop-shadow(0 20px 20px rgba(40,30,20,.25))}
.viewer.ready .vimg{opacity:0}
.viewer .vtools{position:absolute;z-index:3;bottom:16px;inset-inline:16px;display:flex;justify-content:space-between;align-items:center;gap:10px;pointer-events:none}
.viewer .vtools > *{pointer-events:auto}
.vbtn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;border:0;background:#FFFFFF;color:#0F0F10;font:700 13px 'Inter','IBM Plex Sans Arabic',sans-serif;cursor:pointer;box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
.vbtn.on{background:#0F0F10;color:#FFFFFF}
.viewer .vhint{font-size:11px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.85)}
.viewer:not(.ready) .vtools{display:none}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px}
.thumbs button{aspect-ratio:1;border-radius:16px;border:2px solid transparent;background:#FFFFFF;padding:8px;cursor:pointer}
.thumbs button.on,.thumbs button:hover{border-color:#0F0F10}
.thumbs img{width:100%;height:100%;object-fit:contain}
.price-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.price-row .now{font:900 36px 'Archivo',sans-serif;font-stretch:125%}
.price-row s{color:#6A665F;font-size:18px}
.specs{display:flex;flex-wrap:wrap;gap:8px}
.specs span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:#FFFFFF;font:700 12px 'JetBrains Mono','IBM Plex Sans Arabic',monospace;text-transform:uppercase;letter-spacing:.04em}
.specs i{display:block;width:8px;height:8px;border-radius:9px;background:var(--hot)}
.qty{display:flex;align-items:center;gap:0;height:56px;border-radius:999px;background:#FFFFFF;border:1px solid #DDD9D1}
.qty button{width:52px;height:100%;border:0;background:transparent;font-size:22px;cursor:pointer;color:#0F0F10}
.qty input{width:50px;border:0;text-align:center;font:700 16px 'Inter',sans-serif;background:transparent}
.stock{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.stock i{width:9px;height:9px;border-radius:9px;background:#1C7C4A}
.stock.out i{background:#B42318}
.desc{background:#FFFFFF;border-radius:22px;padding:20px 22px;line-height:1.8;color:#3E3B37}
.foot-links a{color:#0F0F10;text-decoration:none;font-weight:600}.foot-links a:hover{color:#C53A0C}
@media (max-width:820px){.shop-side,.prod-info{position:static}}
.pl .dd{display:inline-flex}
.pl .dd:hover .mega,.pl .dd:focus-within .mega{opacity:1;visibility:visible;transform:none}
.pl .dd:hover > .nl svg,.pl .dd:focus-within > .nl svg{transform:rotate(180deg)}
.pl .seg a{display:inline-flex;align-items:center;height:40px;padding:0 13px;border-radius:999px;color:#4F4C47;font:700 13px 'Inter','IBM Plex Sans Arabic',sans-serif;text-decoration:none}
.pl .seg a.on{background:#FFFFFF;color:#0F0F10;box-shadow:0 2px 8px -3px rgba(40,30,20,.4)}
.pl a.add{text-decoration:none}
.pl .hovl[hidden]{display:none}
.pl .tab-panel .pcard[hidden]{display:none}