/* وودي v2 — الأساس: الخطوط، الألوان، والمكوّنات المشتركة */
@font-face{font-family:"TS";src:url("../fonts/thmanyahserifdisplay-Black.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"TS";src:url("../fonts/thmanyahserifdisplay-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"AX";src:url("../fonts/Alexandria-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"AX";src:url("../fonts/Alexandria-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"AX";src:url("../fonts/Alexandria-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"AX";src:url("../fonts/Alexandria-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"AX";src:url("../fonts/Alexandria-ExtraBold.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"MO";src:url("../fonts/Montserrat-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"MO";src:url("../fonts/Montserrat-Medium.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --wood:#2B2724;--wood2:#3A332E;--wood3:#1C1917;--ink:#14110f;
  --peach:#F8D2B6;--orange:#F2A066;--cream:#FFF5EC;--ember:#C9521F;--glow:#FFE3B0;
  --p1:#FFB375;--p2:#FFCEA6;--p3:#FFD8B7;--sand:#EFE2D6;--mute:#7A6D63;
  --line:rgba(43,39,36,.12);--lineD:rgba(248,210,182,.16);
  --r-xl:30px;--r-lg:24px;--r-md:18px;--r-sm:12px;
  --ease:cubic-bezier(.2,.7,.2,1);--vh:100vh;
}
@supports(height:100svh){:root{--vh:100svh}}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{font-family:"AX",system-ui,sans-serif;color:var(--wood);background:var(--cream);direction:rtl;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.nw{white-space:nowrap}
.wrap{position:relative;width:100%;max-width:1240px;margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}
h1,h2,h3{font-family:"TS",serif;font-weight:900;line-height:1.45;letter-spacing:0}
h2{font-size:2.4rem}
.hl{display:inline-block;background:var(--orange);color:var(--wood);padding:0 .22em .06em;border-radius:.16em;line-height:1.3}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:.8rem;font-weight:600;color:#B5461A}
.eyebrow:before{content:"";width:.55em;height:.55em;border-radius:2px;background:currentColor;transform:rotate(45deg);flex:none}
.skip{position:fixed;top:-60px;inset-inline-start:14px;z-index:300;background:var(--orange);color:var(--wood);padding:.6em 1em;border-radius:10px;font-weight:700;transition:top .2s}
.skip:focus{top:14px}
:focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:6px}
.grain{position:relative}
.grain:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* logo: official artwork, recoloured by mask only */
.mark{display:block;aspect-ratio:550/355;background:url(../img/mark.webp) center/contain no-repeat}
.word{display:block;aspect-ratio:830/175;background:var(--c,var(--wood));-webkit-mask:url(../img/word.webp) center/contain no-repeat;mask:url(../img/word.webp) center/contain no-repeat}
.brand{display:flex;align-items:center;gap:9px;direction:ltr}
.brand .mark{width:36px}.brand .word{width:92px;transition:background .4s}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:50px;padding:0 1.4em;border-radius:14px;border:0;
  background:var(--orange);color:var(--wood);font-weight:700;font-size:.98rem;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s,background .25s;box-shadow:0 10px 24px -12px rgba(201,82,31,.7)}
.btn:hover{transform:translateY(-2px);background:var(--p1)}
.btn:active{transform:translateY(0)}
.btn.sm{min-height:40px;font-size:.88rem;padding:0 1.05em;border-radius:12px}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;color:inherit}
.btn.ghost:hover{background:rgba(242,160,102,.16)}
.btn.dark{background:var(--wood);color:var(--cream);box-shadow:none}.btn.dark:hover{background:var(--wood2)}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.tlink{display:inline-flex;align-items:center;gap:.5em;font-size:.86rem;font-weight:600;color:var(--orange);background:none;border:0;padding:.4em 0}
.tlink:hover{text-decoration:underline}

/* price planks */
.ladder{display:flex;flex-wrap:wrap;gap:8px}
.pl{display:inline-flex;align-items:baseline;gap:.4em;padding:.36em .8em .28em;border-radius:10px;background:var(--p3);color:var(--wood);white-space:nowrap;font-size:.84rem;font-weight:500}
.pl:nth-child(2){background:var(--p2)}.pl:nth-child(3){background:var(--p1)}
.pl b{font-family:"TS";font-weight:900;font-size:1.2rem;line-height:1}
.pl span{direction:ltr;unicode-bidi:isolate}

/* plank shapes */
.planks{position:absolute;width:calc(var(--t)*4);height:calc(var(--t)*3.42);transform:rotate(-45deg);pointer-events:none}
.planks i{position:absolute;left:0;height:var(--t);border-radius:calc(var(--t)*.17)}
.planks i:nth-child(1){top:0;width:calc(var(--t)*1.2);background:var(--a,var(--p1))}
.planks i:nth-child(2){top:calc(var(--t)*1.21);width:calc(var(--t)*2.7);background:var(--b,var(--p2))}
.planks i:nth-child(3){top:calc(var(--t)*2.42);width:calc(var(--t)*4);background:var(--c,var(--p3))}

/* floating 3D renders */
.o3{position:absolute;pointer-events:none;will-change:transform;z-index:2}
.o3 img{width:100%;height:auto;filter:drop-shadow(0 26px 22px rgba(43,39,36,.22));animation:bob var(--s,7s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes bob{from{transform:translateY(-9px) rotate(var(--r0,-3deg))}to{transform:translateY(9px) rotate(var(--r1,3deg))}}

/* inputs */
.field{display:flex;align-items:center;gap:10px;background:rgba(255,245,236,.06);border:1.5px solid rgba(248,210,182,.28);border-radius:16px;padding:0 18px;height:58px;max-width:460px;direction:ltr;transition:border-color .2s,background .2s}
.field:focus-within{border-color:var(--orange);background:rgba(255,245,236,.1)}
.field>span{font-family:"MO";font-weight:700;font-size:1.2rem;color:var(--orange)}
.field input{flex:1;min-width:0;background:none;border:0;outline:0;font-family:"MO";font-weight:700;font-size:1.15rem;color:var(--cream);direction:ltr}
.field input::placeholder{color:rgba(255,245,236,.3)}
.field.ar{direction:rtl}.field.ar input{font-family:"AX";direction:rtl;font-size:1.05rem}.field.ar>span{font-family:"AX";font-weight:800}
.lbl{display:block;font-size:.8rem;font-weight:600;color:rgba(255,245,236,.6);margin:20px 0 9px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{border:1.5px solid rgba(248,210,182,.25);background:rgba(28,25,23,.5);border-radius:14px;padding:9px 15px;display:flex;flex-direction:column;align-items:flex-start;min-width:110px;transition:background .2s,border-color .2s,color .2s;color:var(--cream)}
.chip small{font-family:"MO";font-weight:500;font-size:.8rem;opacity:.75;direction:ltr}
.chip b{font-family:"TS";font-weight:900;font-size:1.35rem;line-height:1.35;white-space:nowrap}
.chip b i{font-family:"AX";font-style:normal;font-weight:500;font-size:.76rem}
.chip:hover{border-color:rgba(248,210,182,.6)}
.chip[aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:var(--wood)}
.chip.row{flex-direction:row;align-items:center;gap:9px;min-width:0;font-weight:600;font-size:.92rem}
.total{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid var(--lineD)}
.total .sum small{display:block;font-size:.78rem;color:rgba(255,245,236,.6)}
.total .sum b{font-family:"TS";font-weight:900;font-size:2.7rem;line-height:1.15;color:var(--orange);direction:ltr;display:inline-block}
.total .sum em{font-style:normal;font-size:.95rem;font-weight:600;margin-inline-start:6px}
.fine{font-size:.8rem;color:rgba(255,245,236,.55);margin-top:10px}
.qty{display:inline-flex;align-items:center;background:rgba(255,245,236,.08);border-radius:12px;direction:ltr}
.qty button{width:42px;height:42px;border:0;background:none;font-size:1.3rem;font-weight:600;border-radius:12px;color:var(--cream)}
.qty button:hover{background:rgba(242,160,102,.25)}
.qty b{min-width:30px;text-align:center;font-family:"MO";font-weight:700}

/* the mirror: real production header/footer artwork + glass */
.mirror{position:relative;width:var(--w);height:calc(var(--w)*var(--r,2));font-size:calc(var(--w)/100);direction:ltr;border-radius:11em;flex:none;transition:height .5s var(--ease),width .5s var(--ease)}
.mirror:before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 5em 1em rgba(255,226,176,.95),0 0 22em 6em rgba(255,190,120,.45),0 0 60em 20em rgba(242,160,102,.16);opacity:1}
.mirror .body{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:#fff}
.mirror .glass{position:absolute;left:0;right:0;top:30em;bottom:30em;background:#bbb center/cover no-repeat}
.mirror .glass:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.05) 28%,rgba(255,255,255,0) 52%,rgba(255,255,255,.12) 78%,rgba(255,255,255,0) 100%)}
.mirror .hd{position:absolute;left:0;top:0;width:100%;height:36.75em;background:url(../img/h.webp) top/100% no-repeat}
.mirror .ft{position:absolute;left:0;bottom:0;width:100%;height:36.75em;background:url(../img/f.webp) bottom/100% no-repeat}
.mirror .prof{position:absolute;left:1.2em;right:1.2em;top:15.2em;height:19.6em;background:#fff;border-radius:0 0 2.6em 2.6em}
.mirror .av{position:absolute;left:5.2em;top:2.6em;width:13em;height:13em;border-radius:50%;background:var(--wood);box-shadow:0 0 0 .5em #fff,0 0 0 .9em var(--orange)}
.mirror .av .mark{position:absolute;left:19%;top:26%;width:62%}
.mirror .nm{position:absolute;left:21.5em;top:3.6em;height:6em;display:flex;align-items:center;font-size:1em;color:#111;white-space:nowrap}
.mirror .nm .h{font:700 var(--nf,5.2em)/1 "MO";letter-spacing:-.01em}
.mirror .nm b{display:inline-block;font-size:5.2em;width:.82em;height:.82em;margin-left:.14em;border-radius:50%;background:#3897F0;position:relative;flex:none}
.mirror .nm b:after{content:"";position:absolute;left:.3em;top:.14em;width:.2em;height:.4em;border:solid #fff;border-width:0 .11em .11em 0;transform:rotate(45deg)}
.mirror .sb{position:absolute;left:6.55em;top:3.21em;font:500 3.3em/1.2 "AX";color:#333;direction:rtl;white-space:nowrap}
.mirror .qr{position:absolute;right:9em;top:1.6em;width:13.5em;height:13.5em;border-radius:1.4em;border:.15em solid #e6e6e6;background:#fff center/92% no-repeat;image-rendering:pixelated}
.mirror .dots{position:absolute;right:4.4em;top:4.6em;width:1.5em;height:1.5em;border-radius:50%;background:#333;box-shadow:0 2.8em 0 #333,0 5.6em 0 #333}
@keyframes lit{0%{opacity:0}18%{opacity:.75}24%{opacity:.1}38%{opacity:.9}46%{opacity:.35}60%,100%{opacity:1}}
.mirror.on:before{animation:lit .95s linear both}
.mirror.off:before{opacity:0}
.mirror .body{transition:filter 1s ease}
.mirror.off .body{filter:brightness(.2) saturate(.4)}

/* the social stand (same cut for every order; only the print changes) */
.sstand{position:relative;width:220px;border-radius:24px 24px 6px 6px;padding:54px 20px 22px;text-align:center;color:var(--stx,#fff);background:var(--sg,linear-gradient(165deg,#FBA63C 0%,#F0556B 48%,#8A3FD6 100%));box-shadow:0 30px 40px -18px rgba(0,0,0,.7);margin-top:42px;transition:background .4s}
.sstand .tab{position:absolute;top:-40px;left:50%;width:98px;height:98px;margin-left:-49px;border-radius:50%;background:var(--st,#FBA63C);display:grid;place-items:center;transition:background .4s}
.sstand .tab svg{width:52px;height:52px;padding:11px;border-radius:50%;background:#fff;color:var(--si,#E8437A)}
.sstand .cta2{font-weight:800;font-size:1.05rem;margin-bottom:10px;white-space:nowrap}
.sstand .qbox{background:#fff;border-radius:16px;padding:11px;display:grid;place-items:center;position:relative;overflow:hidden}
.sstand .qbox img{width:100%;height:auto;image-rendering:pixelated;display:block}
.sstand .shop{margin-top:11px;font-weight:800;font-size:1.02rem;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sstand .snm{font-family:"MO";font-weight:700;font-size:.8rem;opacity:.92;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;direction:ltr}
.acc{direction:ltr;unicode-bidi:isolate}
.sbase{width:264px;height:24px;background:linear-gradient(#fff,#e9e4de);border-radius:7px;box-shadow:0 18px 22px -8px rgba(0,0,0,.6)}

/* story phone */
.sphone{position:relative;width:220px;aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:#000 center/cover;box-shadow:0 0 0 6px #0c0a09,0 30px 40px -18px rgba(0,0,0,.7)}
.sphone:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 22%,transparent 70%,rgba(0,0,0,.4))}
.sphone .bars{position:absolute;z-index:2;top:12px;left:12px;right:12px;display:flex;gap:4px;direction:ltr}
.sphone .bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.4)}.sphone .bars i:first-child{background:#fff}
.sphone .who{position:absolute;z-index:2;top:26px;right:14px;display:flex;align-items:center;gap:8px;font-size:.76rem;font-weight:600;color:#fff;direction:rtl}
.sphone .who b{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#FBA63C,#E8437A);border:2px solid #fff}
.sphone .tagm{position:absolute;z-index:2;left:50%;bottom:20%;transform:translateX(-50%) rotate(-5deg);background:#fff;border-radius:10px;padding:.35em .7em;font-family:"MO";font-weight:700;font-size:.9rem;max-width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 8px 16px rgba(0,0,0,.35);color:#E8437A}

/* reveal: opacity + movement only */
[data-rv]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s var(--ease);transition-delay:var(--d,0s)}
[data-rv].in{opacity:1;transform:none}
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.sw>i{display:inline-block;font-style:normal;transform:translateY(110%);transition:transform .8s var(--ease);transition-delay:calc(var(--i)*55ms)}
.split.in .sw>i{transform:none}

/* toast + floating order button */
.toast{position:fixed;left:50%;bottom:26px;z-index:150;transform:translate(-50%,30px);background:var(--wood3);color:var(--cream);padding:.7em 1.2em;border-radius:12px;font-size:.9rem;font-weight:600;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease);box-shadow:0 14px 30px -10px rgba(0,0,0,.6);white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
.fab{position:fixed;inset-inline-start:16px;bottom:16px;z-index:70;transform:translateY(90px);transition:transform .4s var(--ease);box-shadow:0 14px 28px -10px rgba(201,82,31,.8)}
.fab.show{transform:none}

@media(prefers-reduced-motion:reduce){
  [data-rv],.sw>i{opacity:1!important;transform:none!important;transition:none!important}
  .o3 img,.mirror.on:before{animation:none!important}
}
html.shot [data-rv],html.shot .sw>i{opacity:1!important;transform:none!important;transition:none!important}
html.shot .fab,html.shot .loader{display:none!important}