:root{--bg:#F6E3D3;--ink:#2a1710;--glow:#ff9a3c;--r:18px;--serif:'Instrument Serif',Georgia,serif;--sans:'Manrope',system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans);transition:background .8s ease,color .8s ease;overflow-x:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.top{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(16px,4vw,48px);mix-blend-mode:normal}
.logo{font:400 1.7rem var(--serif);color:var(--ink);text-decoration:none;transition:color .8s}
.cart-btn{background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:10px 20px;font-weight:700;transition:background .8s,color .8s,transform .2s}
.cart-btn:active{transform:scale(.94)}
.cart-btn #cartCount{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-inline-start:6px;border-radius:50%;background:var(--bg);color:var(--ink);font-size:.8rem}
.cart-btn.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.18)}}

.sec{min-height:100svh;padding:110px clamp(20px,6vw,90px) 70px}
.btn{display:inline-block;background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:14px 30px;font-weight:700;text-decoration:none;transition:transform .2s,background .8s,color .8s}
.btn:hover{transform:translateY(-2px)}
.btn.wide{width:100%}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid currentColor}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,60px);align-items:center}
.hero h1{font:400 clamp(4.5rem,15vw,13rem)/.82 var(--serif);letter-spacing:-.03em}
.hero .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero .w{display:block;transform:translateY(110%);animation:rise 1.2s cubic-bezier(.2,.8,.2,1) .2s forwards}
.hero .w.d2{animation-delay:.45s;font-style:italic;padding-left:.4em}
@keyframes rise{to{transform:none}}
.tag{margin:28px 0 28px;max-width:30ch;font-size:1.2rem;opacity:0;animation:fade 1s ease 1.2s forwards}
.hero .btn{opacity:0;animation:fade 1s ease 1.4s forwards}
@keyframes fade{to{opacity:1}}
.hero-img{position:relative;justify-self:center;width:min(100%,460px)}
.arch{border-radius:999px 999px 24px 24px;overflow:hidden;aspect-ratio:3/4;box-shadow:0 40px 80px -30px rgba(80,30,10,.5);clip-path:inset(100% 0 0 0 round 999px 999px 24px 24px);animation:reveal 1.4s cubic-bezier(.2,.8,.2,1) .3s forwards}
@keyframes reveal{to{clip-path:inset(0 0 0 0 round 999px 999px 24px 24px)}}
.arch img{width:100%;height:112%;object-fit:cover;will-change:transform}
.flame{position:absolute;right:-14px;top:12%;width:26px;height:46px;border-radius:50% 50% 50% 50%/65% 65% 35% 35%;background:radial-gradient(circle at 50% 70%,#fff6c2,#ffb347 55%,#ff6a1f);filter:blur(.4px) drop-shadow(0 0 22px #ff9a3c);animation:flick 1.6s ease-in-out infinite,fade 1s 1.6s backwards;transform-origin:50% 100%}
@keyframes flick{0%,100%{transform:scale(1,1) rotate(-2deg)}30%{transform:scale(.92,1.08) rotate(3deg)}60%{transform:scale(1.05,.95) rotate(-3deg)}}

.marquee{overflow:hidden;border-block:2px solid currentColor;padding:14px 0;font:italic 2.2rem var(--serif);white-space:nowrap}
.track{display:inline-block;animation:slide 28s linear infinite}
.track span{margin-right:3rem}
.track span:nth-child(3n+2){font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}

/* products */
.product{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,90px);align-items:center}
.product.flip .p-img{order:2}
.p-img{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;max-height:80svh;justify-self:center;width:100%;max-width:520px;box-shadow:0 30px 70px -30px rgba(60,20,5,.55);transform:perspective(900px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transition:transform .25s ease-out}
.p-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.p-img.in img{transform:scale(1)}
.grain{position:absolute;pointer-events:none;border-radius:50%;filter:blur(30px);opacity:.5;mix-blend-mode:soft-light;width:60%;aspect-ratio:1;background:#fff;inset:auto auto -20% -10%;animation:drift 9s ease-in-out infinite alternate}
.g2{background:#ffd27a}.g3{background:#ffe0e8}
@keyframes drift{to{transform:translate(40%,-30%)}}
.scent{font-weight:700;font-size:.95rem;opacity:.75}
.product h2,.how h2{font:400 clamp(3.2rem,8vw,7rem)/.9 var(--serif);letter-spacing:-.02em;margin:10px 0 18px}
.split .ch{display:inline-block;transform:translateY(60%) rotate(6deg);opacity:0;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s;transition-delay:calc(var(--i)*35ms)}
.split.in .ch{transform:none;opacity:1}
.blurb{max-width:42ch;font-size:1.1rem}
.made{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.made li{border:1.5px solid currentColor;border-radius:999px;padding:4px 14px;font-size:.88rem}
.buy{display:flex;align-items:center;gap:24px;margin:8px 0 14px}
.price{font:400 2.4rem var(--serif)}
.qty{display:flex;align-items:center;border:2px solid currentColor;border-radius:999px}
.qty button{background:none;border:0;width:42px;height:42px;font-size:1.3rem}
.qty output{min-width:30px;text-align:center;font-weight:700}
.note-l{display:block;font-weight:700;font-size:.9rem;margin-bottom:16px;max-width:460px}
textarea,input:not([type=file]){display:block;width:100%;margin-top:6px;padding:12px 14px;border-radius:12px;border:2px solid currentColor;background:rgba(255,255,255,.35);color:inherit;font:inherit}
textarea{resize:vertical}

.how{display:flex;flex-direction:column;justify-content:center}
.how ol{list-style:none;padding:0;display:grid;gap:14px;max-width:560px;font-size:1.25rem}
.how li b{font:italic 400 1.9rem var(--serif);margin-inline-end:8px}
.pay-line{margin:30px 0;opacity:.8}
.flat{border-radius:var(--r);max-width:620px;width:100%;margin-top:10px}

.foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:26px clamp(20px,6vw,90px);background:#2a1710;color:#F6E3D3;font-size:.9rem}
.admin-btn{background:none;border:1px solid rgba(246,227,211,.35);color:#F6E3D3;opacity:.55;border-radius:8px;padding:4px 12px;font-size:.78rem}
.admin-btn:hover{opacity:1}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(20,8,4,.55);opacity:0;pointer-events:none;transition:opacity .35s;z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,100%);background:#fff7ef;color:#2a1710;z-index:50;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.drawer.on{transform:none}
.d-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid #ecd9c8}
.d-head h3,.card h3{font:400 2rem var(--serif)}
.x{background:none;border:0;font-size:2rem;line-height:1;color:inherit}
.lines{flex:1;overflow:auto;padding:12px 24px}
.empty{padding:40px 0;text-align:center;opacity:.7}
.line-item{padding:16px 0;border-bottom:1px solid #ecd9c8;display:grid;grid-template-columns:64px 1fr auto;gap:14px;animation:in .4s ease}
@keyframes in{from{opacity:0;transform:translateX(20px)}}
.line-item img{width:64px;height:80px;object-fit:cover;border-radius:10px}
.line-item h4{font:400 1.4rem var(--serif)}
.line-item .qty{transform:scale(.8);transform-origin:left;margin:2px 0}
.line-item textarea{font-size:.85rem;padding:6px 10px;border-width:1px}
.line-item .rm{background:none;border:0;opacity:.6;font-size:.8rem;text-decoration:underline}
.d-foot{padding:20px 24px;border-top:1px solid #ecd9c8}
.row{display:flex;justify-content:space-between;font-size:1.2rem;margin-bottom:14px}

/* modals */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(20,8,4,.6);opacity:0;pointer-events:none;transition:opacity .3s}
.modal.on{opacity:1;pointer-events:auto}
.card{position:relative;background:#fff7ef;color:#2a1710;border-radius:22px;padding:30px;width:min(480px,100%);max-height:92svh;overflow:auto;transform:translateY(24px) scale(.97);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.modal.on .card{transform:none}
.wide-card{width:min(900px,100%)}
.card .x{position:absolute;right:16px;top:12px}
.card label{display:block;font-weight:700;font-size:.9rem;margin:14px 0}
.card .btn{margin-top:6px}
.steps{display:flex;gap:10px;margin-bottom:14px;font-weight:700;font-size:.85rem}
.steps span{padding:4px 14px;border-radius:999px;border:1.5px solid #d9bfa8;opacity:.6}
.steps span.on{background:#2a1710;color:#fff7ef;opacity:1}
.pay-sum{background:#f6e3d3;border-radius:14px;padding:14px 16px;margin:12px 0;font-size:.92rem}
.pay-sum div{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.pay-sum small{display:block;opacity:.7}
.insta{background:#2a1710;color:#fff7ef;border-radius:14px;padding:16px;margin:12px 0}
.insta p{margin-bottom:8px}
.insta b{font:400 1.8rem var(--serif)}
.insta-row{display:flex;gap:10px;align-items:center;justify-content:space-between}
.insta code{font-size:1.1rem;word-break:break-all}
.mini{background:#f6e3d3;color:#2a1710;border:0;border-radius:8px;padding:6px 14px;font-weight:700;font-size:.82rem}
.file input{border:2px dashed #b99a82;background:#fff;padding:18px}
.shot-prev{max-height:200px;border-radius:12px;margin:8px auto}
.err{color:#b3261e;font-weight:700;min-height:1.4em;font-size:.9rem}
.two{display:grid;grid-template-columns:1fr 2fr;gap:10px}
.done{text-align:center;padding:10px 0}
.check{width:72px;height:72px;border-radius:50%;background:#2a1710;color:#fff7ef;display:grid;place-items:center;font-size:2.2rem;margin:0 auto 14px;animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(0)}}
.done p{margin:10px 0 20px}

/* admin */
.p-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.p-head h3{margin-right:auto}
.order{border:1.5px solid #e3cdb9;border-radius:14px;padding:16px;margin-bottom:14px;display:grid;grid-template-columns:1fr 150px;gap:16px}
.order h4{font:400 1.4rem var(--serif)}
.order .meta{font-size:.88rem;opacity:.8;margin:2px 0 8px}
.order ul{padding-left:18px;font-size:.92rem}
.order .note{font-style:italic;opacity:.8}
.order img{width:150px;height:200px;object-fit:cover;border-radius:10px;cursor:zoom-in}
.order .acts{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.badge{font-size:.75rem;font-weight:700;border-radius:999px;padding:3px 12px;background:#eee}
.badge.pending{background:#ffe3a3}.badge.confirmed{background:#bfe8c4}.badge.rejected{background:#f5b9b4}.badge.delivered{background:#b9d6f5}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,120px);background:#2a1710;color:#fff7ef;padding:12px 22px;border-radius:999px;z-index:90;transition:transform .4s cubic-bezier(.2,.8,.2,1);font-weight:700}
.toast.on{transform:translate(-50%,0)}
.fly{position:fixed;z-index:80;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#fff6c2,#ff9a3c);box-shadow:0 0 20px #ff9a3c;pointer-events:none}

@media (max-width:820px){
  .hero,.product{grid-template-columns:1fr}
  .product.flip .p-img{order:0}
  .sec{padding-top:90px}
  .hero-img{width:min(80%,360px)}
  .order{grid-template-columns:1fr}
  .order img{width:100%;height:auto;max-height:260px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero .w,.tag,.hero .btn{transform:none;opacity:1}
  .arch{clip-path:none}
}

/* ---- extras ---- */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;z-index:70;transition:background .8s}
.cursor{position:fixed;left:0;top:0;width:260px;height:260px;margin:-130px 0 0 -130px;border-radius:50%;background:radial-gradient(circle,rgba(255,170,70,.35),rgba(255,170,70,0) 65%);pointer-events:none;z-index:20;mix-blend-mode:soft-light;opacity:0;transition:opacity .4s}
.cursor.on{opacity:1}
@media (pointer:coarse){.cursor{display:none}}
.embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero{position:relative}
.hero-words,.hero-img{position:relative;z-index:1}
.btn,.cart-btn{will-change:transform}

.light{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,90px);align-items:center}
.l-text h2{font:400 clamp(3.2rem,8vw,7rem)/.9 var(--serif);margin:0 0 18px}
.lstate{font:italic 2rem var(--serif);margin:22px 0 10px}
.meltbar{height:8px;border-radius:99px;background:rgba(246,227,211,.15);overflow:hidden;max-width:360px}
.meltbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb347,#ff6a1f);transition:width .3s linear}
.jar{position:relative;justify-self:center;width:220px;height:300px;background:none;border:0;padding:0;margin-top:90px}
.glass{position:absolute;bottom:0;left:0;right:0;height:210px;border:3px solid rgba(246,227,211,.55);border-radius:10px 10px 28px 28px;background:linear-gradient(100deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 40%,rgba(255,255,255,.1));overflow:hidden}
.wax{position:absolute;inset:auto 0 0 0;height:78%;background:linear-gradient(#f4e2c4,#e6c996)}
.pool{position:absolute;top:0;left:0;right:0;height:0;background:linear-gradient(#ffcf7a,#e9a548);transition:height 10s linear;box-shadow:inset 0 6px 14px rgba(255,255,255,.4)}
.jar.lit .pool{height:46%}
.wick{position:absolute;left:50%;bottom:196px;width:4px;height:34px;margin-left:-2px;background:#2a1710;border-radius:2px;z-index:2}
.flame2{position:absolute;left:50%;bottom:222px;width:34px;height:70px;margin-left:-17px;border-radius:50% 50% 50% 50%/65% 65% 35% 35%;background:radial-gradient(circle at 50% 72%,#fff8cf,#ffb347 55%,#ff6a1f);filter:drop-shadow(0 0 28px #ff9a3c);transform-origin:50% 100%;transform:scale(0);transition:transform .5s cubic-bezier(.2,1.6,.4,1);z-index:3}
.jar.lit .flame2{transform:scale(1);animation:flick 1.4s ease-in-out infinite .5s}
.glowhalo{position:absolute;left:50%;bottom:150px;width:520px;height:520px;margin-left:-260px;border-radius:50%;background:radial-gradient(circle,rgba(255,150,60,.5),rgba(255,150,60,0) 62%);opacity:0;transition:opacity 1s;pointer-events:none}
.jar.lit .glowhalo{opacity:1}
.drip{position:absolute;top:0;width:8px;height:0;border-radius:0 0 8px 8px;background:#ffcf7a;opacity:0}
.d1{left:22%}.d2{left:58%}.d3{left:80%}
.jar.lit .drip{opacity:1;animation:drip 3.4s ease-in infinite}
.jar.lit .d2{animation-delay:1.1s}.jar.lit .d3{animation-delay:2.2s}
@keyframes drip{0%{height:0;transform:translateY(0)}40%{height:26px}100%{height:26px;transform:translateY(120px);opacity:0}}
.jar:focus-visible{outline-offset:12px}
@media (max-width:820px){.light{grid-template-columns:1fr}}

/* ---- language picker + Arabic / RTL ---- */
.top-r{display:flex;gap:10px;align-items:center}
.lang-btn{background:transparent;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:8px 16px;font-weight:700;font-family:'Cairo',var(--sans);transition:color .8s,border-color .8s,transform .2s}
.lang-btn:active{transform:scale(.94)}
#langPick{z-index:95}
#langPick .card{text-align:center}
#langPick h3{font:400 1.8rem var(--serif)}
#langPick p{margin-top:4px;opacity:.7}
.lang-opts{display:grid;gap:12px;margin-top:20px}
.lang-opts .btn{font-size:1.15rem;margin:0}
.lang-opts [data-lang=ar]{font-family:'Cairo',var(--sans)}
.marquee{direction:ltr}
.insta code{direction:ltr}
html[lang=ar]{--serif:'Cairo',Georgia,serif;--sans:'Cairo',system-ui,sans-serif}
html[lang=ar] body{line-height:1.75}
html[lang=ar] *{font-style:normal}
html[lang=ar] .logo,html[lang=ar] .hero h1{font-family:'Instrument Serif',Georgia,serif}
html[lang=ar] .hero .w.d2{font-style:italic;padding-left:0;padding-right:.4em}
html[lang=ar] .product h2,html[lang=ar] .how h2,html[lang=ar] .l-text h2{font-size:clamp(2.6rem,6.5vw,5rem);line-height:1.3;letter-spacing:0}
html[lang=ar] .tag{max-width:34ch}
html[dir=rtl] .drawer{right:auto;left:0;transform:translateX(-105%)}
html[dir=rtl] .drawer.on{transform:none}
html[dir=rtl] .modal:not(#admin) .card .x{right:auto;left:16px}
html[dir=rtl] .line-item .qty{transform-origin:right}
html[dir=rtl] input[type=tel]{direction:ltr;text-align:right}

.sound-btn{padding:8px 12px;line-height:1.4}
.sound-btn.pulse{animation:ping 2s ease-in-out infinite}
@keyframes ping{50%{box-shadow:0 0 0 8px rgba(255,154,60,.35)}}

/* ---- shop grid + quick view ---- */
.shop{padding-top:100px}
.shop-in{max-width:1200px;margin:0 auto}
.shop h2{font:400 clamp(3.2rem,8vw,7rem)/.9 var(--serif);letter-spacing:-.02em;margin:0 0 36px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px)}
.pcard{cursor:pointer}
.pcard .p-img{max-width:none;max-height:none;aspect-ratio:3/4;border-radius:14px;background:rgba(255,255,255,.35);box-shadow:0 24px 50px -28px rgba(60,20,5,.5)}
.pcard .p-img img{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.pcard:hover .p-img.in img{transform:scale(1.05)}
.acts-ov{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px;z-index:2}
.sq{width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:8px;background:var(--ink);color:var(--bg);transition:transform .2s,background .8s,color .8s}
.sq:hover{transform:translateY(-2px)}
.sq svg{width:20px;height:20px}
.pinfo{padding:14px 2px 0}
.pscent{font-size:.85rem;font-weight:700;opacity:.7;line-height:1.4}
.pname{font:400 clamp(1.5rem,2.6vw,2.1rem)/1.1 var(--serif);margin:3px 0 4px}
.pcard .price{font:700 1.05rem var(--sans)}
.qv-card{width:min(900px,100%);display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:26px;align-items:center}
.qv-img{border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;max-height:70svh;width:100%}
.qv-img img{width:100%;height:100%;object-fit:cover}
.qv-card h2{font:400 clamp(2.4rem,5vw,3.6rem)/.95 var(--serif);letter-spacing:-.02em;margin:6px 0 12px}
html[lang=ar] .qv-card h2,html[lang=ar] .shop h2{line-height:1.3;letter-spacing:0}
html[lang=ar] .shop h2{font-size:clamp(2.6rem,6.5vw,5rem)}
@media (max-width:820px){
  .grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .sq{width:38px;height:38px}
  .qv-card{grid-template-columns:1fr;gap:16px;padding:20px}
  .qv-img{max-height:38svh}
}

/* ---- reviews ---- */
.reviews{min-height:0;padding-top:30px}
.reviews h2{font:400 clamp(2.4rem,6vw,4.5rem)/1 var(--serif);letter-spacing:-.02em;margin:0 0 26px}
html[lang=ar] .reviews h2{line-height:1.3;letter-spacing:0}
.rev-box{border-radius:32px;padding:clamp(14px,3vw,34px);background:rgba(255,255,255,.4);box-shadow:0 30px 70px -40px rgba(60,20,5,.45);column-width:200px;column-gap:14px}
.rev-box img{display:block;width:100%;border-radius:14px;margin:0 0 14px;break-inside:avoid;cursor:zoom-in;transition:transform .3s}
.rev-box img:hover{transform:scale(1.02)}
#lightbox{cursor:zoom-out;z-index:65}
#lightbox img{max-width:min(94vw,900px);max-height:90svh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}

/* ---- coming soon ad ---- */
.ad-card{padding:0;width:min(520px,100%);background:#000;overflow:hidden;line-height:0}
.ad-card img{width:100%;height:auto;display:block}
.ad-card .x{color:#fff;background:rgba(0,0,0,.45);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;z-index:2;top:10px;right:10px}
html[dir=rtl] .modal .ad-card .x{left:10px;right:auto}

/* hero slideshow: candles <-> lip gloss */
.arch .slides{position:relative;width:100%;height:112%}
.arch .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1s ease,transform 3.4s ease}
.arch .slide.on{opacity:1;transform:scale(1)}

/* teaser slide: show the whole image (no cropping) on a blurred backdrop */
.arch .slide.fit{background:#2a1710;overflow:hidden}
.arch .slide.fit img{position:absolute;inset:0;width:100%;height:100%}
.arch .slide.fit .bgimg{object-fit:cover;filter:blur(24px) brightness(.8);transform:scale(1.2)}
.arch .slide.fit .fgimg{object-fit:contain;padding:6%}

/* ---- spin the wheel + coupons ---- */
.wheel-fab{position:fixed;left:16px;bottom:16px;z-index:25;display:flex;align-items:center;gap:8px;background:#2a1710;color:#fff7ef;border:0;border-radius:999px;padding:12px 18px;font-weight:700;box-shadow:0 10px 30px -10px rgba(40,15,5,.6);transition:transform .2s}
.wheel-fab:hover{transform:translateY(-2px)}
.wheel-fab .wf-ic{font-size:1.2rem}
.wheel-fab.ready{animation:fabglow 2.4s ease-in-out infinite}
@keyframes fabglow{0%,100%{box-shadow:0 10px 30px -10px rgba(40,15,5,.6),0 0 0 0 rgba(255,154,60,.55)}50%{box-shadow:0 10px 30px -10px rgba(40,15,5,.6),0 0 0 12px rgba(255,154,60,0)}}
html[dir=rtl] .wheel-fab{left:auto;right:16px}
.wheel-card{width:min(430px,100%);text-align:center}
.wheel-card h3{font:400 2.2rem var(--serif)}
.wsub{opacity:.8;margin:2px 0 12px}
.wheel-wrap{position:relative;width:min(78vw,320px);aspect-ratio:1;margin:18px auto 14px}
#wheelSvg{width:100%;height:100%;transition:transform 5s cubic-bezier(.12,.62,.1,1);filter:drop-shadow(0 12px 18px rgba(60,20,5,.35))}
.wpointer{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:26px solid #2a1710;z-index:3;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.wheel-hub{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;border:4px solid #fff7ef;background:#2a1710;color:#fff7ef;font-weight:800;font-size:.95rem;z-index:2;transition:transform .2s}
.wheel-hub:not(:disabled):hover{transform:scale(1.07)}
.wheel-hub:disabled{opacity:.55;cursor:not-allowed}
.wphone{display:block;text-align:start;font-weight:700;font-size:.9rem;margin:8px 0}
.wwait{font-weight:700;min-height:1.4em;font-variant-numeric:tabular-nums}
.wwin{background:#f6e3d3;border-radius:16px;padding:14px 16px;margin-top:8px}
.ww-title{font:400 1.5rem var(--serif)}
.ww-code{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:10px 0 4px}
.ww-code b{font:700 1.15rem monospace;background:#2a1710;color:#fff7ef;border-radius:8px;padding:6px 12px;direction:ltr;letter-spacing:.05em}
.ww-note{font-size:.88rem;opacity:.8}
.cpn{margin-bottom:12px}
.cpn-form{display:flex;gap:8px}
.cpn-form input{margin-top:0;flex:1;padding:9px 12px;text-transform:uppercase}
.cpn-form .mini{white-space:nowrap}
.cpn-chip{display:flex;justify-content:space-between;align-items:center;background:#f6e3d3;border-radius:10px;padding:8px 12px;font-weight:700;font-size:.9rem}
.cpn-chip button{background:none;border:0;font-size:1.3rem;line-height:1}
.cpn-msg{color:#b3261e;font-size:.85rem;min-height:1.2em;margin-top:4px}
.row.sub{font-size:1rem;opacity:.85}
.free-note{background:#2a1710;color:#fff7ef;border-radius:14px;padding:16px;margin:12px 0;text-align:center;font-weight:700}
@media (prefers-reduced-motion:reduce){#wheelSvg{transition-duration:.01ms}.wheel-fab.ready{animation:none}}

/* sold out */
.so-badge{position:absolute;top:12px;inset-inline-start:12px;z-index:3;background:#d62828;color:#fff;font:800 .74rem var(--sans);letter-spacing:.07em;text-transform:uppercase;padding:7px 14px;border-radius:999px;box-shadow:0 8px 22px -6px rgba(214,40,40,.7);animation:soPulse 2.4s ease-in-out infinite}
@keyframes soPulse{50%{box-shadow:0 8px 30px -2px rgba(214,40,40,1)}}
.pcard.soldout .p-img img{filter:grayscale(.9) brightness(.8)}
.pcard.soldout .qa{opacity:.35}
.pcard.soldout .price{text-decoration:line-through;opacity:.5}
#qvAdd.so,#qvAdd:disabled{background:#d62828;color:#fff;opacity:1;cursor:not-allowed;transform:none}