/* Haj Arafa — Natural Boutique · website demo 1 */
:root{
  --ink:#140C07;--ink2:#21140C;--ink3:#2E1D12;
  --or:#F06728;--or2:#FF8A3D;--ember:#C8461B;--gold:#E9A93A;
  --cream:#FBF5EC;--linen:#F3E7D6;--kraft:#D8B88B;--sand:#EADBC5;
  --teal:#108474;--line:rgba(20,12,7,.12);
  --ar:'Lalezar','Bebas Neue',sans-serif;--tx:'Cairo',system-ui,sans-serif;--disp:'Bebas Neue','Lalezar',sans-serif;
  --r:22px;--hdr:76px;
  --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:var(--or) transparent}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--tx);background:var(--cream);color:var(--ink);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}
img{display:block;max-width:100%;user-select:none;-webkit-user-drag:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--or);color:#fff}
.wrap{width:min(1320px,100% - 48px);margin-inline:auto}
html[lang=en] .t-ar{display:none}html[lang=ar] .t-en{display:none}
.disp{font-family:var(--ar);font-weight:400;line-height:.95;letter-spacing:0}
html[lang=en] .disp{font-family:var(--disp);letter-spacing:.01em;line-height:.9}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--or)}
html[lang=ar] .eyebrow{letter-spacing:0;font-size:15px}
.eyebrow:before{content:"";width:28px;height:2px;background:currentColor;border-radius:2px}
.grain:after{content:"";position:absolute;inset:-50%;pointer-events:none;opacity:.09;z-index:3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}

/* ---------- buttons ---------- */
.btn{--bg:var(--or);--fg:#fff;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;border-radius:999px;background:var(--bg);color:var(--fg);font-weight:800;font-size:16px;overflow:hidden;isolation:isolate;transition:transform .5s var(--spring),box-shadow .4s;white-space:nowrap}
.btn:before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);border-radius:inherit;transition:transform .55s var(--ease);z-index:-1}
.btn:hover:before{transform:none}
.btn:hover{box-shadow:0 14px 34px -12px rgba(240,103,40,.65)}
.btn.dark{--bg:var(--ink)}.btn.dark:before{background:var(--or)}
.btn.ghost{--bg:transparent;--fg:currentColor;box-shadow:inset 0 0 0 2px currentColor}
.btn.ghost:before{background:var(--or)}.btn.ghost:hover{color:#fff;box-shadow:inset 0 0 0 2px var(--or)}
.btn.light{--bg:var(--cream);--fg:var(--ink)}
.btn.sm{height:42px;padding:0 18px;font-size:14px}
.btn .arr{display:inline-block;transition:transform .45s var(--ease)}
html[dir=rtl] .btn .arr{transform:scaleX(-1)}
.btn:hover .arr{transform:translateX(5px)}html[dir=rtl] .btn:hover .arr{transform:scaleX(-1) translateX(5px)}
.ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-items:center;color:var(--cream)}
#loader canvas{position:absolute;inset:0;width:100%;height:100%}
#loader .lg{position:relative;width:min(380px,64vw);transform:scale(.6);opacity:0}
#loader .lg img{width:100%;filter:drop-shadow(0 20px 60px rgba(240,103,40,.35))}
#loader .ct{position:absolute;bottom:38px;inset-inline:0;text-align:center;font-family:var(--disp);font-size:20px;letter-spacing:.3em;color:rgba(251,245,236,.5)}
#loader .bar{position:absolute;bottom:26px;left:50%;width:160px;height:2px;margin-left:-80px;background:rgba(255,255,255,.12);overflow:hidden;border-radius:2px}
#loader .bar i{display:block;height:100%;width:0;background:var(--or)}

/* ---------- header ---------- */
#hdr{position:fixed;top:0;inset-inline:0;z-index:60;height:var(--hdr);transition:transform .5s var(--ease),background .4s,color .4s,box-shadow .4s;color:var(--cream)}
#hdr.solid{background:rgba(251,245,236,.86);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);color:var(--ink);box-shadow:0 1px 0 var(--line)}
#hdr.hide{transform:translateY(-100%)}
#hdr .in{height:100%;display:flex;align-items:center;gap:28px}
#hdr .logo{height:52px;flex:none;display:block;position:relative}
#hdr .logo img{height:100%;width:auto;transition:opacity .3s}
#hdr .logo .c{position:absolute;inset:0}
#hdr.solid .logo .c,#hdr:not(.solid) .logo .k{opacity:0}
#hdr nav{display:flex;gap:4px;flex:1}
#hdr nav a,#hdr nav button{position:relative;padding:8px 14px;font-weight:700;font-size:15px;border-radius:999px;transition:background .3s}
#hdr nav a:after,#hdr nav button:after{content:"";position:absolute;inset-inline:14px;bottom:4px;height:2px;background:var(--or);transform:scaleX(0);transition:transform .4s var(--ease);transform-origin:var(--o,left)}
html[dir=rtl] #hdr nav a:after{--o:right}
#hdr nav a:hover:after,#hdr nav a.on:after,#hdr nav button:hover:after{transform:none}
#hdr .act{display:flex;gap:6px;align-items:center}
.ib{position:relative;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;transition:background .3s,transform .4s var(--spring)}
.ib:hover{background:rgba(240,103,40,.14);transform:scale(1.08)}
.lang{font-weight:900;font-size:14px;width:auto;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px currentColor;height:36px}
.lang:hover{background:var(--or);color:#fff;box-shadow:none}
.bub{position:absolute;top:2px;inset-inline-end:0;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--or);color:#fff;font-size:11px;font-weight:900;display:grid;place-items:center;transform:scale(0);transition:transform .45s var(--spring)}
.bub.on{transform:scale(1)}
.burger{display:none}
#prog{position:fixed;top:0;inset-inline:0;height:3px;z-index:70;background:var(--or);transform-origin:left;transform:scaleX(0)}
html[dir=rtl] #prog{transform-origin:right}

/* mega menu */
#mega{position:fixed;top:var(--hdr);inset-inline:0;z-index:59;background:var(--cream);color:var(--ink);clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
#mega.on{clip-path:inset(0 0 0 0)}
#mega .in{display:grid;grid-template-columns:repeat(3,1fr) 1.2fr;gap:36px;padding:36px 0 44px}
#mega h4{font-family:var(--ar);font-weight:400;font-size:26px;margin-bottom:12px;color:var(--or)}
html[lang=en] #mega h4{font-family:var(--disp);font-size:28px;letter-spacing:.04em}
#mega li{list-style:none}
#mega li a{display:flex;justify-content:space-between;padding:7px 0;font-weight:700;border-bottom:1px dashed var(--line);transition:padding .35s var(--ease),color .3s}
#mega li a:hover{padding-inline-start:10px;color:var(--or)}
#mega li small{opacity:.45;font-weight:600}
#mega .feat{position:relative;border-radius:var(--r);overflow:hidden;min-height:260px;background:var(--ink);color:var(--cream);padding:24px;display:flex;flex-direction:column;justify-content:flex-end}
#mega .feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75;transition:transform 1.2s var(--ease)}
#mega .feat:hover img{transform:scale(1.06)}
#mega .feat b{position:relative;font-family:var(--ar);font-weight:400;font-size:30px;line-height:1}
#mega .feat span{position:relative;font-weight:700;opacity:.85}

/* ---------- views & transition ---------- */
#view{min-height:100vh}
#wipe{position:fixed;inset:0;z-index:150;pointer-events:none}
#wipe i{position:absolute;inset:0;visibility:hidden}
#wipe i:nth-child(1){background:var(--or)}
#wipe i:nth-child(2){background:var(--ink);display:grid;place-items:center}
#wipe img{width:min(260px,50vw);opacity:0;transform:scale(.8)}

/* reveal helpers (set by JS) */
.rv{opacity:0;transform:translateY(46px)}
.ln{display:inline-block;overflow:hidden;padding-bottom:.08em;vertical-align:top}
.hero h1 .ln{display:block}
.ln>span{display:inline-block;will-change:transform}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;background:radial-gradient(120% 90% at 50% 110%,#5a230c 0%,#2a140a 38%,var(--ink) 70%);color:var(--cream);overflow:hidden;display:flex;align-items:center;isolation:isolate}
.hero .sun{position:absolute;width:90vmin;height:90vmin;border-radius:50%;left:50%;top:58%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(240,103,40,.55) 0%,rgba(240,103,40,.18) 38%,transparent 66%);filter:blur(10px);z-index:-1}
.hero .rays{position:absolute;left:50%;top:58%;width:160vmax;height:160vmax;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,rgba(255,138,61,.07) 0 6deg,transparent 6deg 18deg);mask:radial-gradient(circle,#000 0,transparent 60%);-webkit-mask:radial-gradient(circle,#000 0,transparent 60%);z-index:-1;animation:spin 90s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hero .copy{position:relative;z-index:5;text-align:center;width:100%;padding:calc(var(--hdr) + 0px) 0 150px;pointer-events:none}
.hero .copy:before{content:"";position:absolute;left:50%;top:44%;width:min(980px,96vw);height:70%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(20,12,7,.72),rgba(20,12,7,0));z-index:-1;pointer-events:none}
.hero .copy>*{pointer-events:auto}
.hero h1{font-size:clamp(60px,11vw,178px);color:var(--cream);text-shadow:0 10px 60px rgba(0,0,0,.5)}
html[lang=en] .hero h1{font-size:clamp(58px,9.6vw,160px)}
.hero h1 .o{color:var(--or);-webkit-text-stroke:0}
.hero h1 .st{color:transparent;-webkit-text-stroke:2px var(--cream)}
.hero p.sub{max-width:560px;margin:22px auto 30px;font-size:clamp(16px,1.6vw,20px);font-weight:600;color:rgba(251,245,236,.78)}
.hero .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero .ctas .btn.ghost{color:var(--cream)}
.ring{position:absolute;inset:0;z-index:2;perspective:1400px;pointer-events:none}
.ring .it{position:absolute;left:50%;top:44%;width:clamp(110px,13vw,210px);height:clamp(150px,18vw,280px);margin:calc(clamp(150px,18vw,280px) / -2) 0 0 calc(clamp(110px,13vw,210px) / -2);will-change:transform,filter,opacity}
.ring .it img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 26px 30px rgba(0,0,0,.55))}
.hero .badges{position:absolute;bottom:34px;inset-inline:0;z-index:6;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:0 16px}
.badge{display:flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:rgba(251,245,236,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(251,245,236,.16);font-weight:700;font-size:14px}
.badge b{font-family:var(--disp);font-size:24px;color:var(--or2);line-height:1;font-weight:400}
.scrollhint{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);z-index:6;width:26px;height:42px;border-radius:14px;box-shadow:inset 0 0 0 2px rgba(251,245,236,.4)}
.scrollhint:after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--or);animation:sh 1.6s var(--ease) infinite}
@keyframes sh{0%{opacity:0;transform:translateY(-4px)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* ---------- marquee X ---------- */
.mx{position:relative;height:250px;overflow:hidden;background:var(--cream);display:grid;place-items:center;margin-top:-1px}
.band{position:absolute;width:120%;left:-10%;direction:ltr;padding:18px 0;white-space:nowrap;overflow:hidden;font-family:var(--ar);font-size:44px;line-height:1}
html[lang=en] .band{font-family:var(--disp);font-size:52px;letter-spacing:.04em}
.band.a{background:var(--or);color:var(--ink);transform:rotate(-4deg);z-index:2;box-shadow:0 20px 40px -20px rgba(0,0,0,.4)}
.band.b{background:var(--ink);color:var(--cream);transform:rotate(3deg)}
.band .tr{display:inline-flex;gap:40px;padding-inline-end:40px;will-change:transform}
.band .tr span{display:inline-flex;align-items:center;gap:40px}
.band .tr span:after{content:"✦";font-size:.6em;color:var(--cream)}
.band.b .tr span:after{color:var(--or)}

/* ---------- sections ---------- */
.sec{position:relative;padding:120px 0}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:46px;flex-wrap:wrap}
.sh h2{font-size:clamp(46px,6.4vw,96px)}
@media (min-width:861px){.sh h2{white-space:nowrap}}
.sh p{max-width:440px;color:rgba(20,12,7,.66);font-weight:600}
.dark{background:var(--ink);color:var(--cream)}
.dark .sh p{color:rgba(251,245,236,.66)}

/* worlds / category tiles */
.worlds{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.wt{--c:var(--or);position:relative;border-radius:var(--r);overflow:hidden;background:var(--linen);min-height:260px;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;transition:color .45s;grid-column:span 2}
.wt.big{grid-column:span 3;min-height:340px}
.wt:before{content:"";position:absolute;inset:0;background:var(--c);z-index:-2;clip-path:circle(0% at var(--mx,50%) var(--my,100%));transition:clip-path .8s var(--ease)}
.wt:hover{color:#fff}
.wt:hover:before{clip-path:circle(150% at var(--mx,50%) var(--my,100%))}
.wt .im{position:absolute;inset:18px 18px 88px;display:grid;place-items:center;z-index:-1}
.wt .im img{max-height:92%;max-width:70%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(0,0,0,.25));transition:transform .8s var(--spring)}
.wt:hover .im img{transform:translateY(-12px) rotate(-6deg) scale(1.08)}
.wt .im img+img{position:absolute;max-width:46%;max-height:70%;inset-inline-start:6%;bottom:0;transform:rotate(-12deg)}
.wt:hover .im img+img{transform:translate(-10px,-6px) rotate(-20deg) scale(1.1)}
.wt b{font-family:var(--ar);font-weight:400;font-size:32px;line-height:1}
html[lang=en] .wt b{font-family:var(--disp);font-size:36px;letter-spacing:.02em}
.wt small{font-weight:700;opacity:.55;display:flex;justify-content:space-between;align-items:center}
.wt .go{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:transform .5s var(--spring),background .3s}
.wt:hover .go{background:#fff;color:var(--ink);transform:rotate(-45deg)}
html[dir=rtl] .wt .go svg{transform:scaleX(-1)}

/* tabs */
.tabs{display:inline-flex;padding:5px;border-radius:999px;background:var(--linen);position:relative;gap:2px}
.tabs button{position:relative;z-index:1;padding:10px 20px;border-radius:999px;font-weight:800;font-size:15px;transition:color .35s}
.tabs button.on{color:#fff}
.tabs .pill{position:absolute;top:5px;bottom:5px;border-radius:999px;background:var(--ink);transition:all .55s var(--spring)}
.dark .tabs{background:rgba(251,245,236,.08)}.dark .tabs .pill{background:var(--or)}

/* product grid + card */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 66px)/4);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.card{--c:var(--or);position:relative;display:flex;flex-direction:column;border-radius:var(--r);background:#fff;box-shadow:0 1px 0 var(--line);transition:transform .6s var(--spring),box-shadow .5s;isolation:isolate}
.card:hover{transform:translateY(-8px);box-shadow:0 30px 50px -28px rgba(20,12,7,.35)}
.card .stage{position:relative;aspect-ratio:1/1.05;border-radius:var(--r) var(--r) 0 0;overflow:hidden;background:var(--linen);display:grid;place-items:center;perspective:700px}
.card .stage:before{content:"";position:absolute;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 38%,transparent),transparent 70%);transform:scale(.6);opacity:.6;transition:transform .8s var(--ease),opacity .6s}
.card:hover .stage:before{transform:scale(1.25);opacity:1}
.card .stage img{position:relative;width:74%;height:78%;object-fit:contain;filter:drop-shadow(0 18px 18px rgba(20,12,7,.22));transition:transform .8s var(--spring)}
.card .stage img.ph{width:100%;height:100%;object-fit:cover;filter:none}
.card:hover .stage img{transform:translateY(-8px) scale(1.06) rotate(-3deg)}
.card:hover .stage img.ph{transform:scale(1.06)}
.card .tg{position:absolute;top:12px;inset-inline-start:12px;z-index:2;display:flex;gap:6px}
.tag{padding:4px 10px;border-radius:999px;font-size:12px;font-weight:900;background:var(--ink);color:#fff}
.tag.s{background:var(--or)}.tag.n{background:var(--teal)}.tag.x{background:#8a8079}
.card .qa{position:absolute;bottom:12px;inset-inline-end:12px;z-index:2;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transform:scale(.6) rotate(-90deg);opacity:0;transition:all .5s var(--spring)}
.card:hover .qa,.card:focus-within .qa{transform:none;opacity:1}
.card .qa:hover{background:var(--or)}
.card .bd{padding:16px 18px 18px;display:flex;flex-direction:column;gap:4px;flex:1}
.card .nm{font-weight:800;font-size:16px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.card .sb{font-size:13px;color:rgba(20,12,7,.5);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .pr{margin-top:auto;padding-top:8px;display:flex;align-items:baseline;gap:8px}
.price{font-family:var(--disp);font-size:26px;line-height:1;letter-spacing:.02em}
.price small{font-family:var(--tx);font-size:12px;font-weight:800;margin-inline-start:3px;opacity:.6}
.was{font-size:14px;text-decoration:line-through;opacity:.45;font-weight:700}
.dark .card{background:var(--ink2);box-shadow:inset 0 0 0 1px rgba(251,245,236,.06)}
.dark .card .stage{background:var(--ink3)}
.dark .card .sb{color:rgba(251,245,236,.5)}
.dark .card .qa{background:var(--or)}

/* spice shelf (pinned horizontal) */
.shelf{position:relative;height:100vh;overflow:hidden;background:linear-gradient(180deg,var(--ink) 0%,#2b130a 100%);color:var(--cream)}
.shelf .big{position:absolute;top:50%;left:0;white-space:nowrap;font-family:var(--disp);font-size:34vh;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(240,103,40,.28);transform:translateY(-58%);will-change:transform}
.shelf .head{position:absolute;top:calc(var(--hdr) + 26px);inset-inline:0;z-index:3}
.shelf .head h2{font-size:clamp(44px,6vw,88px)}
.shelf .track{position:absolute;bottom:9vh;inset-inline-start:0;display:flex;gap:4vw;padding-inline:6vw;align-items:flex-end;will-change:transform}
.jar{flex:none;width:clamp(170px,19vw,280px);text-align:center;cursor:pointer}
.jar .jb{height:46vh;display:flex;align-items:flex-end;justify-content:center;position:relative}
.jar .jb:after{content:"";position:absolute;bottom:-10px;left:15%;right:15%;height:22px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.55),transparent 70%)}
.jar img{max-height:100%;max-width:100%;object-fit:contain;transition:transform .7s var(--spring);transform-origin:50% 100%}
.jar:hover img{transform:translateY(-14px) rotate(-4deg) scale(1.05)}
.jar .lbl{margin-top:22px}
.jar .lbl b{display:block;font-family:var(--ar);font-weight:400;font-size:26px;line-height:1.1}
html[lang=en] .jar .lbl b{font-family:var(--disp);font-size:30px;letter-spacing:.03em}
.jar .lbl .price{color:var(--or2)}
.shelf .plank{position:absolute;bottom:calc(9vh + 112px);left:0;right:0;height:14px;background:linear-gradient(#7a3f1d,#4a230f);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.shelf .hint{position:absolute;bottom:3vh;inset-inline:0;text-align:center;font-weight:700;font-size:13px;letter-spacing:.2em;opacity:.45}

/* honey */
.honey{position:relative;background:linear-gradient(180deg,#F7B733 0%,#E9921B 55%,#C96A10 100%);color:var(--ink);overflow:hidden}
.honey .drip{position:absolute;top:-1px;left:0;width:100%;height:110px;color:var(--cream)}
.honey .in{display:grid;grid-template-columns:1fr 1.25fr;gap:40px;align-items:center;min-height:100vh;padding:140px 0 80px}
.honey h2{font-size:clamp(64px,8vw,130px);color:var(--ink)}
.honey p{font-weight:700;font-size:18px;max-width:420px;margin:18px 0 26px;color:rgba(20,12,7,.75)}
.stairs{position:relative;height:72vh;display:flex;align-items:flex-end;gap:1.4vw}
.step{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;cursor:pointer}
.step img{width:100%;max-height:var(--h);object-fit:contain;object-position:bottom;filter:drop-shadow(0 20px 20px rgba(90,40,0,.4));transition:transform .6s var(--spring)}
.step:hover img{transform:translateY(-14px) scale(1.05)}
.step .base{width:100%;margin-top:10px;border-radius:14px 14px 0 0;background:linear-gradient(rgba(20,12,7,.9),rgba(20,12,7,.75));color:var(--cream);text-align:center;padding:10px 4px;height:var(--b);display:flex;flex-direction:column;justify-content:flex-start}
.step .base .price{font-size:22px;color:var(--gold)}
.step .base span{font-size:12px;font-weight:700;opacity:.8;line-height:1.25}

/* campaign bento */
.bento{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto;gap:16px}
.bx{position:relative;border-radius:var(--r);overflow:hidden;min-height:340px;background:var(--ink);clip-path:inset(0 0 0 0 round var(--r))}
.bx img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform;transition:scale 1.2s var(--ease)}
.bx:hover img{scale:1.05}
.bx .cap{position:absolute;inset:auto 0 0 0;padding:22px;background:linear-gradient(transparent,rgba(20,12,7,.85));color:var(--cream);display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.bx .cap b{font-family:var(--ar);font-weight:400;font-size:30px;line-height:1}
html[lang=en] .bx .cap b{font-family:var(--disp);font-size:34px}

/* scents */
.scents{position:relative;min-height:100vh;color:var(--cream);overflow:hidden;transition:background 1s var(--ease);background:#3b1a2a;display:flex;align-items:center}
.scents .glow{position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 60%,rgba(255,255,255,.22),transparent 70%);pointer-events:none}
.scents .in{position:relative;display:grid;grid-template-columns:1fr 1.4fr;gap:30px;align-items:center;padding:120px 0}
.scents h2{font-size:clamp(56px,7vw,110px)}
.scents .nm{font-family:var(--ar);font-size:clamp(70px,9vw,150px);line-height:1;margin:10px 0;min-height:1.1em}
html[lang=en] .scents .nm{font-family:var(--disp)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{padding:9px 16px;border-radius:999px;font-weight:800;font-size:14px;box-shadow:inset 0 0 0 1.5px currentColor;transition:all .35s var(--ease);opacity:.75}
.chip:hover{opacity:1}
.chip.on{background:var(--cream);color:var(--ink);box-shadow:none;opacity:1}
.bottles{position:relative;height:70vh;perspective:1200px}
.bottles .bt{position:absolute;bottom:0;left:50%;height:88%;transform-origin:50% 100%;transition:transform 1s var(--ease),opacity 1s var(--ease),filter 1s;cursor:pointer}
.bottles .bt img{height:100%;width:auto;filter:drop-shadow(0 40px 40px rgba(0,0,0,.45))}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{border-radius:var(--r);padding:30px 26px;background:var(--linen);position:relative;overflow:hidden}
.stat b{display:block;font-family:var(--disp);font-size:clamp(56px,6vw,96px);line-height:.9;color:var(--or)}
.stat span{font-weight:800;font-size:16px}
.stat:nth-child(2){background:var(--ink);color:var(--cream)}
.stat:nth-child(3){background:var(--or);color:#fff}.stat:nth-child(3) b{color:var(--ink)}
.stat:nth-child(4){background:var(--kraft)}

/* map */
.mapbox{position:relative;border-radius:28px;overflow:hidden;background:#140C07;aspect-ratio:16/10}
.mapbox svg{position:absolute;inset:0;width:100%;height:100%}
.pin{transform-box:fill-box;transform-origin:center}
.pin circle.p{fill:var(--or)}
.pin circle.r{fill:none;stroke:var(--or);stroke-width:1.2;opacity:0}
.pin.on circle.p{fill:#fff}
.pin.on circle.r,.pin:hover circle.r{animation:ripple 1.6s var(--ease) infinite}
@keyframes ripple{0%{opacity:.9;r:2}100%{opacity:0;r:16}}
.maptip{position:absolute;pointer-events:none;padding:8px 12px;border-radius:12px;background:var(--cream);color:var(--ink);font-weight:800;font-size:13px;transform:translate(-50%,-130%);white-space:nowrap;opacity:0;transition:opacity .25s;z-index:3}

/* newsletter + footer */
.news{position:relative;border-radius:32px;background:var(--or);color:var(--ink);padding:60px;display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;overflow:hidden}
.news h3{font-size:clamp(40px,4.8vw,70px)}
.news form{display:flex;gap:8px;background:var(--cream);border-radius:999px;padding:6px}
.news input{flex:1;border:0;background:none;outline:none;padding:0 18px;font-weight:700;min-width:0}
.news .pods{position:absolute;inset:0;pointer-events:none}
.news .pods img{position:absolute;width:120px;opacity:.9}
footer{position:relative;background:var(--ink);color:var(--cream);padding:90px 0 30px;margin-top:120px;overflow:hidden}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
footer h5{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin-bottom:14px}
html[lang=ar] footer h5{letter-spacing:0;font-size:16px}
footer li{list-style:none;padding:5px 0;font-weight:600;opacity:.8}
footer li a:hover{color:var(--or);opacity:1}
footer .giant{margin-top:70px;display:flex;justify-content:center}
footer .giant img{width:min(620px,80%);opacity:.95}
footer .base{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:40px;padding-top:22px;border-top:1px solid rgba(251,245,236,.12);font-size:13px;opacity:.6}
.soc{display:flex;gap:10px;margin-top:16px}
.soc a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(251,245,236,.3);transition:all .35s var(--spring)}
.soc a:hover{background:var(--or);box-shadow:none;transform:translateY(-4px)}
.pay{display:flex;gap:8px;flex-wrap:wrap}
.pay span{padding:5px 10px;border-radius:8px;background:rgba(251,245,236,.08);font-size:12px;font-weight:800}

/* ---------- category page ---------- */
.phero{--c:var(--or);position:relative;padding:calc(var(--hdr) + 70px) 0 70px;background:var(--c);color:#fff;overflow:hidden;isolation:isolate}
.phero:after{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 85% 20%,rgba(255,255,255,.22),transparent 60%),linear-gradient(transparent 60%,rgba(0,0,0,.18));z-index:-1}
.phero h1{font-size:clamp(70px,11vw,170px)}
.phero .crumb{font-weight:700;opacity:.8;font-size:14px;margin-bottom:10px}
.phero .crumb a:hover{text-decoration:underline}
.phero .fl{position:absolute;inset-inline-end:3vw;bottom:-30px;display:flex;align-items:flex-end;justify-content:flex-end;gap:10px;height:105%;width:min(52vw,760px);pointer-events:none;z-index:-1}
.phero .fl img{max-width:34%;object-fit:contain}
.phero .fl img{height:58%;width:auto;filter:drop-shadow(0 30px 30px rgba(0,0,0,.35))}
.phero .fl img:nth-child(2){height:78%}.phero .fl img:nth-child(3){height:48%}
.phero .cnt{display:inline-block;margin-top:14px;padding:6px 14px;border-radius:999px;background:rgba(0,0,0,.2);font-weight:800}
.bar{position:sticky;top:var(--hdr);z-index:20;background:rgba(251,245,236,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:top .5s var(--ease)}
body.hdrhide .bar{top:0}
.bar .in{display:flex;gap:12px;align-items:center;padding:12px 0}
.bar .cats{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:none;mask:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);padding:0 14px}
.bar .cats::-webkit-scrollbar{display:none}
.bar .chip{white-space:nowrap;opacity:1;box-shadow:inset 0 0 0 1.5px var(--line)}
.bar .chip.on{background:var(--ink);color:#fff}
.sel{height:42px;border-radius:999px;border:0;box-shadow:inset 0 0 0 1.5px var(--line);background:#fff;padding:0 16px;font-weight:700;outline:none;cursor:pointer}
.empty{text-align:center;padding:80px 0;font-weight:700;opacity:.6}

/* ---------- product page ---------- */
.pdp{padding:calc(var(--hdr) + 30px) 0 40px}
.pdp .crumb{font-size:14px;font-weight:700;opacity:.6;margin-bottom:22px}
.pdp .crumb a:hover{color:var(--or)}
.pdp .in{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.gal{position:sticky;top:calc(var(--hdr) + 20px)}
.gal .main{--c:var(--or);position:relative;border-radius:32px;background:var(--linen);aspect-ratio:1;display:grid;place-items:center;overflow:hidden;perspective:900px}
.gal .main:before{content:"";position:absolute;width:76%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 45%,transparent),transparent 68%)}
.gal .main .ringtxt{position:absolute;width:88%;aspect-ratio:1;animation:spin2 30s linear infinite;opacity:.35}
@keyframes spin2{to{transform:rotate(360deg)}}
.gal .main img{position:relative;width:70%;height:76%;object-fit:contain;filter:drop-shadow(0 34px 34px rgba(20,12,7,.3));transition:transform .2s linear;will-change:transform}
.gal .main img.ph{width:100%;height:100%;object-fit:cover;filter:none}
.gal .th{display:flex;gap:10px;margin-top:12px}
.gal .th button{width:78px;height:78px;border-radius:16px;background:var(--linen);overflow:hidden;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .3s}
.gal .th button.on{box-shadow:inset 0 0 0 2px var(--or)}
.gal .th img{width:100%;height:100%;object-fit:contain;padding:6px}
.info .cat{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--linen);font-weight:800;font-size:13px;margin-bottom:14px}
.info h1{font-size:clamp(44px,5vw,78px);margin-bottom:6px}
.info .en{font-weight:700;opacity:.5;font-size:18px}
.info .prow{display:flex;align-items:center;gap:14px;margin:22px 0}
.info .prow .price{font-size:46px}
.info .prow .w{padding:6px 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line);font-weight:800;font-size:14px}
.info .vars{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.info .vars .chip{opacity:1;box-shadow:inset 0 0 0 1.5px var(--line)}
.info .vars .chip.on{background:var(--ink);color:#fff}
.buy{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.qty{display:flex;align-items:center;height:54px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line);background:#fff}
.qty button{width:46px;height:100%;font-size:22px;font-weight:700;border-radius:999px;transition:background .25s}
.qty button:hover{background:var(--linen)}
.qty span{min-width:34px;text-align:center;font-weight:900;font-size:18px}
.buy .btn{flex:1;min-width:160px}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0}
.trust div{border-radius:16px;background:var(--linen);padding:14px;font-weight:800;font-size:13px;display:flex;flex-direction:column;gap:6px}
.trust svg{color:var(--or)}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:800;font-size:17px;display:flex;justify-content:space-between;align-items:center}
.acc summary::-webkit-details-marker{display:none}
.acc summary:after{content:"+";font-size:26px;font-weight:400;transition:transform .4s var(--ease);color:var(--or)}
.acc details[open] summary:after{transform:rotate(45deg)}
.acc .tx{padding:0 0 18px;color:rgba(20,12,7,.72);font-weight:600;white-space:pre-line}
.stickybuy{display:none}

/* ---------- cart drawer ---------- */
#scrim{position:fixed;inset:0;z-index:90;background:rgba(20,12,7,.5);opacity:0;pointer-events:none;transition:opacity .45s;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#scrim.on{opacity:1;pointer-events:auto}
#cart{position:fixed;top:0;bottom:0;inset-inline-end:0;z-index:95;width:min(460px,100%);background:var(--cream);display:flex;flex-direction:column;transform:translateX(105%);transition:transform .6s var(--ease)}
html[dir=rtl] #cart{transform:translateX(-105%)}
#cart.on{transform:none!important}
#cart .hd{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)}
#cart .hd b{font-family:var(--ar);font-weight:400;font-size:32px;line-height:1}
html[lang=en] #cart .hd b{font-family:var(--disp);font-size:36px}
#cart .fr{padding:14px 24px;background:var(--linen);font-weight:700;font-size:14px}
#cart .fr .tr{height:8px;border-radius:4px;background:rgba(20,12,7,.1);margin-top:8px;overflow:hidden}
#cart .fr .tr i{display:block;height:100%;background:linear-gradient(90deg,var(--or),var(--gold));border-radius:4px;transition:width .8s var(--ease)}
#cart .ls{flex:1;overflow-y:auto;padding:10px 24px;overscroll-behavior:contain}
.li{display:grid;grid-template-columns:76px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px dashed var(--line)}
.li .im{width:76px;height:76px;border-radius:16px;background:var(--linen);display:grid;place-items:center}
.li .im img{max-width:80%;max-height:80%;object-fit:contain}
.li .im img.ph{max-width:100%;max-height:100%;border-radius:16px;object-fit:cover;width:100%;height:100%}
.li b{font-weight:800;font-size:14px;line-height:1.35;display:block}
.li .qty{height:36px;margin-top:6px;width:max-content}
.li .qty button{width:32px;font-size:16px}
.li .qty span{min-width:24px;font-size:14px}
.li .rm{display:block;margin-inline-start:auto;font-size:12px;font-weight:800;opacity:.45;margin-top:4px}
.li .rm:hover{opacity:1;color:var(--ember)}
#cart .ft{padding:20px 24px 24px;border-top:1px solid var(--line);display:grid;gap:12px}
#cart .tot{display:flex;justify-content:space-between;align-items:baseline;font-weight:800}
#cart .tot .price{font-size:34px}
#cart .emp{text-align:center;padding:60px 10px;font-weight:700}
#cart .emp img{width:120px;margin:0 auto 18px;opacity:.9}

/* ---------- search ---------- */
#search{position:fixed;inset:0;z-index:96;background:var(--ink);color:var(--cream);clip-path:circle(0% at var(--sx,90%) 40px);transition:clip-path .8s var(--ease);overflow-y:auto}
#search.on{clip-path:circle(150% at var(--sx,90%) 40px)}
#search .in{padding:110px 0 60px}
#search .q{display:flex;align-items:center;gap:16px;border-bottom:2px solid rgba(251,245,236,.2);padding-bottom:14px}
#search input{flex:1;background:none;border:0;outline:none;font-family:var(--ar);font-size:clamp(36px,6vw,80px);color:var(--cream);min-width:0}
html[lang=en] #search input{font-family:var(--disp)}
#search input::placeholder{color:rgba(251,245,236,.25)}
#search .x{position:absolute;top:24px;inset-inline-end:24px}
#search .pop{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 34px}
#search .pop .chip{color:var(--cream)}
#search .grid{grid-template-columns:repeat(5,1fr)}
#search .card{color:var(--ink)}
.conf{z-index:1!important}.done>div{position:relative;z-index:2}

/* ---------- checkout ---------- */
.co{padding:calc(var(--hdr) + 40px) 0 40px}
.co h1{font-size:clamp(50px,6vw,90px);margin-bottom:24px;white-space:nowrap}
.co .in{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
.steps{display:flex;gap:8px;margin-bottom:26px}
.steps i{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden;position:relative}
.steps i:after{content:"";position:absolute;inset:0;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
html[dir=rtl] .steps i:after{transform-origin:right}
.steps i.on:after{transform:none}
.box{border-radius:24px;background:#fff;padding:26px;box-shadow:0 1px 0 var(--line);margin-bottom:16px}
.box h3{font-weight:900;font-size:20px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.box h3 i{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-style:normal;display:grid;place-items:center;font-size:14px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fields .w{grid-column:1/-1}
.fld{position:relative}
.fld input,.fld select,.fld textarea{width:100%;height:56px;border-radius:14px;border:0;background:var(--cream);box-shadow:inset 0 0 0 1.5px var(--line);padding:20px 16px 6px;font-weight:700;outline:none;transition:box-shadow .3s}
.fld textarea{height:90px;resize:none;padding-top:24px}
.fld label{position:absolute;top:17px;inset-inline-start:16px;font-weight:700;opacity:.5;pointer-events:none;transition:all .3s var(--ease)}
.fld input:focus,.fld select:focus,.fld textarea:focus{box-shadow:inset 0 0 0 2px var(--or)}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label,.fld select+label,.fld textarea:focus+label,.fld textarea:not(:placeholder-shown)+label{top:6px;font-size:11px;opacity:.7}
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;transition:all .3s}
.opt input{accent-color:var(--or);width:20px;height:20px}
.opt b{display:block}.opt small{opacity:.6;font-weight:600}
.opt:has(input:checked){box-shadow:inset 0 0 0 2px var(--or);background:rgba(240,103,40,.06)}
.opt .pr{margin-inline-start:auto;font-weight:900}
.sum{position:sticky;top:calc(var(--hdr) + 20px)}
.sum .rw{display:flex;justify-content:space-between;padding:6px 0;font-weight:700}
.sum .rw.t{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;font-size:18px}
.sum .rw.t .price{font-size:34px}
.note{font-size:12px;font-weight:700;opacity:.5;text-align:center;margin-top:10px}
.done{min-height:100vh;display:grid;place-items:center;text-align:center;padding:var(--hdr) 20px 40px}
.done .ck{width:130px;height:130px;margin:0 auto 26px}
.done h1{font-size:clamp(56px,8vw,120px)}
.done p{font-weight:700;opacity:.7;margin:10px 0 26px}

/* ---------- story ---------- */
.shero{position:relative;min-height:100svh;background:var(--ink);color:var(--cream);display:grid;place-items:center;text-align:center;overflow:hidden}
.shero .n{font-family:var(--disp);font-size:clamp(200px,40vw,560px);line-height:.8;color:transparent;-webkit-text-stroke:3px var(--or);position:absolute;opacity:.9}
.shero h1{position:relative;font-size:clamp(60px,9vw,140px)}
.shero p{position:relative;max-width:620px;margin:16px auto 0;font-weight:600;font-size:19px;opacity:.8}
.tl{position:relative;padding:120px 0}
.tl .line{position:absolute;top:120px;bottom:120px;left:50%;width:3px;margin-left:-1.5px;background:var(--line)}
.tl .line i{position:absolute;inset:0;background:var(--or);transform-origin:top;transform:scaleY(0)}
.tli{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-bottom:120px}
.tli:last-child{margin-bottom:0}
.tli .dot{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--cream);box-shadow:0 0 0 4px var(--or)}
.tli:nth-child(odd) .tx{order:2}
.tli .tx h3{font-size:clamp(40px,4.4vw,66px);margin:6px 0 12px}
.tli .tx p{font-weight:600;color:rgba(20,12,7,.7);font-size:17px}
.tli .vs{border-radius:28px;overflow:hidden;aspect-ratio:4/3;background:var(--linen);display:grid;place-items:center;position:relative}
.tli .vs img{max-width:70%;max-height:80%;object-fit:contain;filter:drop-shadow(0 26px 26px rgba(0,0,0,.25))}
.tli .vs img.ph{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:cover;filter:none}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.val{border-radius:var(--r);padding:34px;background:var(--ink2);min-height:240px;display:flex;flex-direction:column;justify-content:space-between}
.val b{font-family:var(--ar);font-weight:400;font-size:44px;color:var(--or2);line-height:1}
html[lang=en] .val b{font-family:var(--disp)}
.val p{opacity:.75;font-weight:600}
.logos{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.logos span{padding:14px 24px;border-radius:999px;background:var(--linen);font-weight:900;font-size:18px}

/* ---------- branches ---------- */
.bpage{padding:calc(var(--hdr) + 40px) 0 0}
.bpage h1{font-size:clamp(56px,8vw,120px)}
.bpage .in{display:grid;grid-template-columns:1fr 1.3fr;gap:30px;margin-top:30px;align-items:start}
.blist{max-height:72vh;overflow-y:auto;padding-inline-end:6px;overscroll-behavior:contain}
.blist h4{position:sticky;top:0;background:var(--cream);padding:10px 0;font-weight:900;color:var(--or);z-index:1}
.bi{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 14px;border-radius:14px;cursor:pointer;transition:background .25s;font-weight:700}
.bi:hover,.bi.on{background:var(--linen)}
.bi a{font-size:12px;font-weight:900;color:var(--or);white-space:nowrap}
.bsearch{width:100%;height:52px;border-radius:999px;border:0;box-shadow:inset 0 0 0 1.5px var(--line);background:#fff;padding:0 22px;font-weight:700;outline:none;margin-bottom:10px}
.bsearch:focus{box-shadow:inset 0 0 0 2px var(--or)}
.bpage .mapbox{position:sticky;top:calc(var(--hdr) + 20px);aspect-ratio:auto;height:72vh}

/* contact */
.ct{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:calc(var(--hdr) + 40px) 0 0}
.ct h1{font-size:clamp(56px,8vw,120px)}
.ccards{display:grid;gap:12px;margin-top:26px}
.cc{display:flex;gap:16px;align-items:center;padding:20px;border-radius:20px;background:#fff;box-shadow:0 1px 0 var(--line);transition:transform .5s var(--spring)}
.cc:hover{transform:translateX(6px)}html[dir=rtl] .cc:hover{transform:translateX(-6px)}
.cc .ib{background:var(--linen);flex:none}
.cc b{display:block}.cc small{opacity:.6;font-weight:700}

/* toast + cursor + flyer */
#toast{position:fixed;bottom:24px;left:50%;z-index:120;transform:translate(-50%,140%);background:var(--ink);color:var(--cream);padding:12px 14px 12px 22px;border-radius:999px;display:flex;align-items:center;gap:14px;font-weight:800;box-shadow:0 20px 40px -10px rgba(0,0,0,.45);transition:transform .6s var(--spring);max-width:calc(100% - 32px)}
#toast.on{transform:translate(-50%,0)}
#toast img{width:38px;height:38px;object-fit:contain;border-radius:50%;background:var(--cream);padding:3px}
#toast .btn{height:38px;font-size:13px;padding:0 16px}
.fly{position:fixed;z-index:130;pointer-events:none;object-fit:contain;filter:drop-shadow(0 16px 18px rgba(0,0,0,.35))}
#cur{position:fixed;top:0;left:0;z-index:140;pointer-events:none;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--or);mix-blend-mode:normal;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:900;opacity:0}
#cur.big{width:84px;height:84px;margin:-42px 0 0 -42px;background:rgba(240,103,40,.92)}
#cur.link{width:44px;height:44px;margin:-22px 0 0 -22px;background:rgba(240,103,40,.25)}
#cur span{opacity:0;transition:opacity .2s}#cur.big span{opacity:1}
@media (hover:none){#cur{display:none}}
.demo-pill{position:fixed;bottom:16px;inset-inline-start:16px;z-index:80;padding:7px 12px;border-radius:999px;background:rgba(20,12,7,.75);color:var(--cream);font-size:11px;font-weight:800;letter-spacing:.06em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .rail{grid-auto-columns:calc((100% - 44px)/3)}
  #search .grid{grid-template-columns:repeat(4,1fr)}
  .worlds{grid-template-columns:repeat(4,1fr)}.wt,.wt.big{grid-column:span 2}
  #mega .in{grid-template-columns:repeat(3,1fr)}#mega .feat{display:none}
}
@media (max-width:860px){
  :root{--hdr:64px;--r:18px}
  .wrap{width:calc(100% - 32px)}
  #hdr nav{display:none}.burger{display:grid}
  #hdr .logo{height:42px}
  #hdr .in{gap:8px;justify-content:space-between}
  #hdr .act{gap:0}
  .ib{width:40px;height:40px}
  #mega{top:0;bottom:0;overflow-y:auto;clip-path:inset(0 0 100% 0);padding-top:var(--hdr)}
  #mega .in{grid-template-columns:1fr;gap:20px;padding:20px 0 40px}
  #mega .mnav{display:flex!important}
  .sec{padding:80px 0}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .rail{grid-auto-columns:64%;gap:12px}
  #search .grid{grid-template-columns:repeat(2,1fr)}
  .card .bd{padding:12px 12px 14px}.card .nm{font-size:14px}.price{font-size:22px}
  .card .qa{opacity:1;transform:none;width:40px;height:40px}
  .worlds{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:46%;grid-template-rows:repeat(2,auto);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .worlds::-webkit-scrollbar{display:none}
  .wt,.wt.big{grid-column:auto;min-height:220px;scroll-snap-align:start}
  .wt b{font-size:26px}
  .hero .ring .it{top:46%}
  .hero .copy{padding-bottom:200px}
  .hero .badges{bottom:24px;gap:8px}.badge{padding:8px 12px;font-size:12px}.badge b{font-size:18px}
  .scrollhint{display:none}
  .mx{height:190px}.band{font-size:30px;padding:12px 0}html[lang=en] .band{font-size:36px}
  .honey .in{grid-template-columns:1fr;min-height:auto;padding:120px 0 60px}
  .stairs{height:46vh}
  .step .base span{display:none}.step .base .price{font-size:16px}
  .bento{grid-template-columns:1fr 1fr}.bx:first-child{grid-column:1/-1}.bx{min-height:240px}
  .scents .in{grid-template-columns:1fr;padding:100px 0 60px}.bottles{height:52vh}
  .stats{grid-template-columns:1fr 1fr}
  .news{grid-template-columns:1fr;padding:34px 24px}
  footer .cols{grid-template-columns:1fr 1fr}
  .phero{padding:calc(var(--hdr) + 40px) 0 50px}.phero .fl{opacity:.55;inset-inline-end:-6vw;height:90%}
  .bar .in{flex-wrap:wrap}.bar .cats{flex-basis:100%;order:2;margin-inline:-16px}
  .pdp .in{grid-template-columns:1fr;gap:26px}.gal{position:relative;top:0}
  .stickybuy{display:flex;position:fixed;bottom:0;inset-inline:0;z-index:50;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(251,245,236,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);gap:10px;align-items:center;border-top:1px solid var(--line);transform:translateY(110%);transition:transform .5s var(--ease)}
  .stickybuy.on{transform:none}.stickybuy .btn{flex:1}
  .co .in,.ct,.bpage .in{grid-template-columns:1fr}
  .sum{position:relative;top:0}
  .fields{grid-template-columns:1fr}
  .tl .line{left:22px}.tli{grid-template-columns:1fr;gap:24px;padding-inline-start:54px;margin-bottom:80px}.tli .dot{left:22px;top:0;margin-top:0}
  .tli:nth-child(odd) .tx{order:0}
  html[dir=rtl] .tl .line{left:auto;right:22px}html[dir=rtl] .tli .dot{left:auto;right:22px;margin-right:-11px}
  .vals{grid-template-columns:1fr}
  .bpage .mapbox{position:relative;top:0;height:46vh;order:-1}
  .blist{max-height:none}
  .shelf .jar .jb{height:38vh}
  .shelf .plank{bottom:calc(9vh + 104px)}
  .demo-pill{bottom:auto;top:calc(var(--hdr) + 8px);inset-inline-start:auto;inset-inline-end:10px;font-size:10px}
  #toast{bottom:calc(16px + env(safe-area-inset-bottom))}
  .pdp + .sec,.pdp ~ footer{padding-bottom:80px}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001s!important;transition-duration:.001s!important}}