/* ASSIL storefront — palette taken from the logo: deep Atlas green + parchment cream, oud-gold accent */
:root{
  --green:#042A2B; --green-2:#0A3C3D; --green-3:#031F20;
  --cream:#EFE8DF; --paper:#F7F2EB; --gold:#C9A96A; --gold-2:#E3CD96;
  --muted:#4b6465; --line:rgba(4,42,43,.14); --on-dark:rgba(239,232,223,.74);
  --display:'Bodoni Moda','Playfair Display',Georgia,serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --arabic:'Amiri','Noto Naskh Arabic','Traditional Arabic',serif;
  --hh:68px; --ah:36px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hh);-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--cream);color:var(--green);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
ul{list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{width:min(1240px,92%);margin:0 auto}
.ar{font-family:var(--arabic);font-weight:400;unicode-bidi:isolate}
.gold{color:var(--gold)}
.h1,.h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.012em}
.h1{font-size:clamp(2.5rem,5.2vw,4.8rem);line-height:1.04}
.h2{font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.1}
.lead{font-size:1.06rem;line-height:1.7;color:var(--on-dark);max-width:46ch}
.sub{color:var(--muted);max-width:52ch;margin-top:.6rem}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.7rem;border-radius:999px;font-weight:500;font-size:.95rem;border:1px solid transparent;transition:background .25s,color .25s,border-color .25s}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-gold{background:var(--gold);color:var(--green)} .btn-gold:hover{background:var(--gold-2)}
.btn-line{border-color:rgba(239,232,223,.4);color:var(--cream)} .btn-line:hover{border-color:var(--cream);background:rgba(239,232,223,.08)}
.btn-dark{background:var(--green);color:var(--cream)} .btn-dark:hover:not([disabled]){background:var(--green-2)}
.btn-line-dark{border-color:var(--line);color:var(--green)} .btn-line-dark:hover{border-color:var(--green)}
.btn-block{width:100%}

/* announcement + header */
.announce{background:var(--green-3);color:var(--on-dark);text-align:center;font-size:.85rem;height:var(--ah);line-height:var(--ah);padding:0 1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-header{position:sticky;top:0;z-index:50;height:var(--hh);background:rgba(4,42,43,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(239,232,223,.1);color:var(--cream)}
.nav{display:flex;align-items:center;justify-content:space-between;height:100%;gap:1rem}
.brand img{height:44px;width:auto}
.links{display:flex;gap:2.2rem;font-size:.95rem}
.links a{padding:.3rem 0;border-bottom:1px solid transparent;transition:border-color .25s}
.links a:hover{border-color:var(--gold)}
.nav-r{display:flex;align-items:center;gap:.55rem}
.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.48rem 1rem;border:1px solid rgba(239,232,223,.35);border-radius:999px;font-size:.92rem;line-height:1.3;color:var(--cream);transition:border-color .25s,background .25s;white-space:nowrap}
.pill:hover{border-color:var(--gold)}
.bag-btn em{display:grid;place-items:center;min-width:22px;height:22px;border-radius:99px;background:var(--gold);color:var(--green);font-size:.75rem;font-style:normal;font-weight:600;padding:0 5px}
.bag-btn.bump em{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.35)}}
.burger{display:none;width:42px;height:42px;position:relative}
.burger i{position:absolute;left:10px;right:10px;height:1.5px;background:var(--cream);transition:.3s}
.burger i:first-child{top:16px}.burger i:last-child{top:25px}
.burger[aria-expanded=true] i:first-child{top:20px;transform:rotate(45deg)}
.burger[aria-expanded=true] i:last-child{top:20px;transform:rotate(-45deg)}

/* ---------- hero + scroll ritual ---------- */
.stage{height:560vh;position:relative;background:var(--green);color:var(--cream)}
.pin{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));height:calc(100svh - var(--hh));overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;
  background:radial-gradient(120% 90% at 78% 55%,var(--green-2) 0%,var(--green) 55%,var(--green-3) 100%)}
.glyph{position:absolute;inset-inline-start:-2vw;bottom:-14vh;font-family:var(--arabic);font-size:min(62vw,720px);line-height:1;color:rgba(239,232,223,.035);pointer-events:none;user-select:none}
.stage-bgs{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.stage-bg{position:absolute;inset:0;opacity:0;background-color:var(--cat,#0A3C3D);background-size:cover;background-position:center;will-change:opacity}
.stage-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 105% at 50% 45%,rgba(4,42,43,.38) 0%,rgba(4,42,43,.68) 62%,rgba(4,42,43,.92) 100%),
  radial-gradient(60% 50% at 72% 34%,rgba(239,232,223,.13),transparent 62%)}
.copy{grid-column:1;grid-row:1;position:relative;z-index:4;padding-inline-start:max(4vw,calc((100vw - 1240px)/2));padding-inline-end:2rem;height:100%}
.panels{position:absolute;inset-inline-start:max(4vw,calc((100vw - 1240px)/2));inset-inline-end:2rem;top:50%;height:0}
.panel{position:absolute;left:0;right:0;top:0;transform:translateY(-50%);will-change:transform,opacity}
.panel .ar.gold{font-size:1.7rem;line-height:1.2}
.slides{display:grid;margin:.5rem 0 1.3rem}
.slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}
.slide.is-on{opacity:1;visibility:visible}
.slide .lead{margin-top:1.1rem}
.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.step-no{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem;color:var(--gold);font-family:var(--display);font-style:italic;font-size:1.3rem}
.step-no::after{content:"";width:64px;height:1px;background:var(--gold);opacity:.6}
.step-no .cat-kicker{font-family:var(--sans);font-size:.72rem;font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark)}
.cat-step .h2{margin-bottom:.9rem}
.cat-meta{font-size:.85rem;color:var(--gold);margin-top:1rem;letter-spacing:.04em}
.cat-step .actions{margin-top:1.2rem}
.step .h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2em 1rem;margin-bottom:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.chips li{display:flex;align-items:baseline;gap:.6rem;padding:.45rem 1rem;border:1px solid rgba(239,232,223,.25);border-radius:999px;font-size:.92rem}
.chips .alt{color:var(--gold);font-size:1.05rem}
.hint{position:absolute;inset-inline-start:max(4vw,calc((100vw - 1240px)/2));bottom:calc(2rem + var(--ah));display:flex;align-items:center;gap:.9rem;font-size:.88rem;color:var(--on-dark)}
.hint i{width:1.5px;height:38px;background:linear-gradient(var(--gold),transparent);animation:drip 2s ease-in-out infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

.bottle-col{grid-column:2;grid-row:1;position:relative;height:100%;display:grid;align-items:end;justify-items:center;padding-bottom:calc(6% + var(--ah));z-index:2}
.arch{position:absolute;left:50%;bottom:0;width:min(88%,470px);height:96%;transform:translateX(-50%);border:1px solid rgba(239,232,223,.22);border-bottom:0;border-radius:999px 999px 0 0;overflow:hidden}
.arch::before{content:"";position:absolute;inset:14px 14px 0;border:1px solid rgba(239,232,223,.1);border-bottom:0;border-radius:999px 999px 0 0}
.aura{position:absolute;inset:0}
.aura i{position:absolute;inset:0;opacity:0}
.aura i:nth-child(1){background:radial-gradient(70% 55% at 50% 72%,rgba(201,169,106,.30),transparent 70%)}
.aura i:nth-child(2){background:radial-gradient(70% 55% at 50% 72%,rgba(231,203,124,.38),transparent 70%)}
.aura i:nth-child(3){background:radial-gradient(70% 55% at 50% 72%,rgba(217,154,139,.36),transparent 70%)}
.aura i:nth-child(4){background:radial-gradient(70% 55% at 50% 72%,rgba(176,112,52,.42),transparent 70%)}
.aura i:nth-child(5){background:radial-gradient(70% 55% at 50% 72%,rgba(216,176,140,.4),transparent 70%)}
.floor{position:absolute;left:50%;bottom:calc(6% + var(--ah) - 8px);width:min(62%,320px);height:26px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);z-index:1}
.bottle{position:relative;z-index:2;transform-origin:50% 72%;will-change:transform}
.bottle svg{height:min(66vh,600px);height:min(66svh,600px);width:auto;aspect-ratio:300/440;overflow:visible;filter:drop-shadow(0 30px 50px rgba(0,0,0,.4))}
#mist{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

.rail{position:absolute;inset-inline-end:max(2.4vw,18px);top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:1.4rem;padding-inline-start:14px}
.rail b{position:absolute;inset-inline-start:0;top:0;bottom:0;width:1.5px;background:rgba(239,232,223,.2)}
.rail b::after{content:"";position:absolute;inset-inline-start:0;top:0;width:100%;height:calc(var(--p,0)*100%);background:var(--gold)}
.rail button{font-size:.8rem;color:var(--on-dark);text-align:start;transition:color .25s;max-width:120px;line-height:1.25}
.rail button.is-on,.rail button:hover{color:var(--gold)}

/* ---------- sections ---------- */
.shop{padding:7rem 0 6rem;background:var(--cream)}
.shop-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:3rem}
.shop-filters{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-end;max-width:100%}
.filter-group{display:flex;flex-direction:column;gap:.45rem;align-items:flex-end;max-width:100%}
html[dir=rtl] .shop-filters,html[dir=rtl] .filter-group{align-items:flex-start}
.filter-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.filters{display:flex;gap:.5rem;flex-wrap:wrap}
.filters button{padding:.5rem 1.05rem;border:1px solid var(--line);border-radius:999px;font-size:.9rem;transition:.2s}
.filters button:hover{border-color:var(--green)}
.filters button.is-on{background:var(--green);color:var(--cream);border-color:var(--green)}
.filters button .alt{margin-inline-start:.4rem;font-size:.82em;color:#8a6a2f}
.filters button.is-on .alt{color:var(--gold-2)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.card{display:flex;flex-direction:column}
.card[hidden]{display:none}
.card-art{position:relative;aspect-ratio:4/5;border-radius:999px 999px 6px 6px;overflow:hidden;background:radial-gradient(90% 60% at 50% 70%,var(--green-2),var(--green));display:grid;place-items:end center;padding-bottom:7%}
.card-art::before{content:"";position:absolute;inset:10px 10px 0;border:1px solid rgba(239,232,223,.16);border-bottom:0;border-radius:999px 999px 0 0;pointer-events:none}
.card-art svg{height:78%;width:auto;aspect-ratio:300/440;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card:hover .card-art svg{transform:translateY(-6px)}
.tag{position:absolute;top:18%;left:50%;transform:translateX(-50%);z-index:2;background:var(--gold);color:var(--green);font-size:.74rem;font-weight:600;padding:.22rem .7rem;border-radius:99px;white-space:nowrap}
.card-body{padding-top:1.1rem;display:flex;flex-direction:column;flex:1}
.card-cat{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:#8a6a2f;font-weight:500;margin-bottom:.25rem}
.card-title{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.card-title h3{font-size:1.55rem}
.card-title .alt{font-size:1.2rem;color:var(--muted)}
.card-notes{font-size:.88rem;color:var(--muted);margin-top:.15rem}
.card-desc{font-size:.9rem;margin:.7rem 0 0;color:var(--green);opacity:.82;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin:auto 0 .9rem;padding-top:1rem}
.price{font-family:var(--display);font-size:1.3rem}
.price s{font-family:var(--sans);font-size:.88rem;color:var(--muted);margin-inline-start:.55rem}
.few{font-size:.82rem;color:#9a5b12;font-weight:500}
.empty{margin-top:2rem;color:var(--muted)}

.notes{background:var(--green);color:var(--cream);padding:6.5rem 0}
.notes .sub{color:var(--on-dark)}
.note-list{display:grid;grid-template-columns:repeat(6,1fr);margin-top:3.2rem;border-top:1px solid rgba(239,232,223,.18)}
.note-list li{border-inline-end:1px solid rgba(239,232,223,.12)}
.note-list li:last-child{border-inline-end:0}
.note-list button{width:100%;padding:2.2rem 1rem 2rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;transition:background .3s}
.note-list button:hover{background:rgba(239,232,223,.05)}
.note-list .ar{font-size:3rem;line-height:1.15;color:var(--gold)}
.note-list b{font-family:var(--display);font-weight:500;font-size:1.25rem}
.note-list small{font-size:.82rem;color:var(--on-dark)}

.story{background:var(--paper);padding:7rem 0}
.story-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:5rem;align-items:center}
.story-mark{background:var(--green);border-radius:28px;aspect-ratio:1;display:grid;place-items:center;padding:16%}
.story-mark img{width:56%}
.story p{color:var(--muted);margin-top:1.1rem;max-width:56ch;line-height:1.75}
.story p .ar{font-size:1.25em;color:var(--green)}
.story .h2{margin-bottom:.8rem}

.reviews{background:var(--cream);padding:7rem 0}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);margin-top:3rem;border-top:1px solid var(--line)}
.quotes blockquote{padding:2rem 0 0;padding-inline-end:2rem;margin-inline-end:2rem;border-inline-end:1px solid var(--line)}
.quotes blockquote:last-child{border-inline-end:0;margin-inline-end:0}
.quotes p{font-family:var(--display);font-size:1.3rem;line-height:1.45}
.quotes footer{margin-top:1.3rem;font-size:.9rem;color:var(--muted)}

.news{background:var(--green);color:var(--cream);padding:5.5rem 0}
.news-in{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.news .lead{margin-top:.7rem}
.news-row{display:flex;border:1px solid rgba(239,232,223,.3);border-radius:999px;padding:5px;gap:.4rem}
.news-row input{flex:1;min-width:0;background:none;border:0;padding:.7rem 1.1rem;color:var(--cream);font:inherit;outline:none}
.news-row input::placeholder{color:rgba(239,232,223,.5)}
.news-row:focus-within{border-color:var(--gold)}
.form-msg{min-height:1.3em;margin-top:.7rem;font-size:.88rem}
.form-msg.ok{color:var(--gold-2)} .form-msg.bad{color:#e57b6c}
.drawer .form-msg.ok{color:#1f7a45} .drawer .form-msg.bad{color:#b3392b}

.foot{background:var(--green-3);color:var(--on-dark);padding:4.5rem 0 2rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid rgba(239,232,223,.12)}
.foot-grid p{font-size:.92rem;margin-top:.5rem;max-width:34ch}
.foot-grid h4{font-family:var(--display);font-weight:500;font-size:1.15rem;color:var(--cream);margin-bottom:.9rem}
.foot-grid a{display:block;font-size:.92rem;margin-bottom:.5rem;transition:color .2s;overflow-wrap:anywhere}
.foot-grid a:hover{color:var(--gold)}
.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.6rem;font-size:.82rem;color:rgba(239,232,223,.5)}

/* ---------- bag drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(3,31,32,.55);z-index:80;opacity:0;transition:opacity .3s}
.scrim.show{opacity:1}
.drawer{position:fixed;top:0;inset-inline-end:0;bottom:0;width:min(440px,100%);background:var(--paper);color:var(--green);z-index:90;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.7,.2,1);visibility:hidden;outline:0}
html[dir=rtl] .drawer:not(.open){transform:translateX(-100%)}
.drawer.open{transform:none;visibility:visible}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:1.5rem}
.x{font-size:1.9rem;line-height:1;width:40px;height:40px;border-radius:50%}
.x:hover{background:rgba(4,42,43,.07)}
.view{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.view[hidden]{display:none}
.lines{flex:1;padding:.5rem 1.5rem}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line);align-items:center}
.line-art{width:64px;height:80px;border-radius:32px 32px 4px 4px;background:var(--green);display:grid;place-items:end center;overflow:hidden;padding-bottom:4px}
.line-art svg{height:86%;width:auto}
.line-art img{width:100%;height:100%;object-fit:cover}
.line h4{font-family:var(--display);font-weight:500;font-size:1.15rem}
.line small{color:var(--muted);display:block}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:99px;margin-top:.4rem}
.qty button{width:30px;height:30px;font-size:1.1rem}
.qty button:hover{background:rgba(4,42,43,.07);border-radius:50%}
.qty span{min-width:22px;text-align:center;font-size:.9rem}
.line-r{text-align:end;font-weight:500}
.line-r button{display:block;margin:.4rem 0 0;margin-inline-start:auto;font-size:.8rem;color:var(--muted);text-decoration:underline}
.bag-empty{padding:3rem 0;text-align:center;color:var(--muted)}
.drawer-foot{padding:1.2rem 1.5rem 1.5rem;border-top:1px solid var(--line);background:var(--cream)}
.ship-note{font-size:.88rem;margin-bottom:.9rem}
.meter{height:4px;border-radius:9px;background:var(--line);margin-top:.5rem;overflow:hidden}
.meter i{display:block;height:100%;background:var(--gold);width:0;transition:width .5s}
.coupon{display:flex;gap:.5rem}
.coupon input,.f-row input,.f-row select{width:100%;padding:.75rem .95rem;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;color:var(--green)}
.coupon .btn{padding:.6rem 1.1rem}
.sum{display:flex;justify-content:space-between;padding:.35rem 0;font-size:.95rem}
.sum em{font-style:normal;color:var(--muted);font-size:.85rem}
.sum.total{font-size:1.1rem;border-top:1px solid var(--line);margin-top:.5rem;padding-top:.8rem}
.mini{font-size:.82rem;color:var(--muted);margin:.4rem 0 .9rem}
#orderForm{padding:1.2rem 1.5rem 1.6rem}
.back{font-size:.88rem;text-decoration:underline;margin-bottom:1rem;color:var(--muted)}
.f-row{margin-bottom:.9rem;border:0}
.f-row label,.f-row legend{display:block;font-size:.85rem;margin-bottom:.35rem;font-weight:500}
.f-row input:focus,.f-row select:focus,.coupon input:focus{outline:2px solid var(--gold);border-color:transparent}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.seg legend{grid-column:1/-1}
.seg label{margin:0;font-weight:400}
.seg input{position:absolute;opacity:0;width:0}
.seg span{display:block;padding:.75rem .9rem;border:1px solid var(--line);border-radius:12px;font-size:.92rem;background:#fff;cursor:pointer}
.seg small{display:block;color:var(--muted);font-size:.8rem}
.seg input:checked+span{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.seg input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;opacity:0;pointer-events:none}
.done{padding:3rem 1.8rem;align-items:center;text-align:center;gap:1rem;justify-content:center}
.done h3{font-size:1.8rem}.done p{color:var(--muted)}
.done .btn{margin-top:.2rem}
.done-mark{width:64px;height:64px;border-radius:50%;background:var(--green);color:var(--gold);display:grid;place-items:center;font-size:1.8rem}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);background:var(--green);color:var(--cream);padding:.75rem 1.3rem;border-radius:99px;font-size:.92rem;opacity:0;pointer-events:none;transition:.3s;z-index:120;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media(max-width:1050px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .note-list{grid-template-columns:repeat(3,1fr)}
  .note-list li:nth-child(3){border-inline-end:0}
  .note-list li:nth-child(-n+3){border-bottom:1px solid rgba(239,232,223,.12)}
  .story-grid{gap:3rem}
}
@media(max-width:820px){
  .burger{display:block}
  .links{position:fixed;top:var(--hh);left:0;right:0;background:var(--green);flex-direction:column;gap:0;padding:.5rem 0 1rem;transform:translateY(-120%);opacity:0;visibility:hidden;transition:.35s;border-bottom:1px solid rgba(239,232,223,.15);z-index:-1}
  .links.open{transform:none;opacity:1;visibility:visible}
  .links a{padding:1rem 6%;font-size:1.1rem;border:0}
  .pin{grid-template-columns:1fr;grid-template-rows:47% 53%}
  .bottle-col{grid-column:1;grid-row:1;padding-bottom:var(--ah)}
  .floor{bottom:calc(var(--ah) - 8px)}
  .arch{width:min(66vw,320px);height:100%}
  .bottle svg{height:min(40vh,360px);height:min(40svh,360px)}
  .copy{grid-column:1;grid-row:2;padding:0 6%;position:relative}
  .panels{inset-inline:6%;top:50%}
  .h1{font-size:clamp(2rem,9vw,2.8rem)}
  .h2{font-size:clamp(1.8rem,8vw,2.4rem)}
  .lead{font-size:.98rem;line-height:1.6}
  .chips{gap:.4rem;margin-top:1rem}.chips li{padding:.3rem .75rem;font-size:.85rem}
  .actions{margin-top:1.1rem}.btn{padding:.8rem 1.4rem}
  .hint{display:none}
  #panelHero .btn-line{display:none}
  .rail{inset-inline-end:10px;gap:1rem;top:24%}
  .stage{height:520vh}
  .shop,.notes,.story,.reviews{padding:4.5rem 0}
  .shop-head{align-items:flex-start}
  .shop-filters,.filter-group{align-items:flex-start;width:100%}
  .grid{gap:1.1rem .9rem}
  .card-title h3{font-size:1.25rem}.card-title .alt{font-size:1rem}
  .card-desc{display:none}
  .story-grid,.news-in{grid-template-columns:1fr}
  .story-mark{max-width:300px}
  .quotes{grid-template-columns:1fr}
  .quotes blockquote{border-inline-end:0;margin:0;padding:1.6rem 0;border-bottom:1px solid var(--line)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .note-list{grid-template-columns:repeat(2,1fr)}
  .note-list li{border-inline-end:1px solid rgba(239,232,223,.12)!important;border-bottom:1px solid rgba(239,232,223,.12)}
  .note-list li:nth-child(2n){border-inline-end:0!important}
  .card-notes{font-size:.8rem}
  .price{font-size:1.1rem}
  .brand img{height:34px}
}
@media(max-width:420px){.grid{grid-template-columns:1fr}.card-art{aspect-ratio:1/1.05}}

/* ---------- language + RTL ---------- */
.alt{color:var(--gold);font-weight:400}
html[lang=en] .alt{font-family:var(--arabic);font-size:.55em}
html[lang=ar] .alt{font-family:'Bodoni Moda',Georgia,serif;font-style:italic;font-size:.5em}
.step .h2 .alt{font-size:.5em}
html[lang=en] .step .h2 .alt{font-size:.55em}
html[lang=ar]{--display:'Amiri','Bodoni Moda',Georgia,serif;--sans:'Tajawal','Instrument Sans',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif}
html[lang=ar] body{line-height:1.8}
html[lang=ar] .h1,html[lang=ar] .h2,html[lang=ar] h3{letter-spacing:0;font-weight:400}
html[lang=ar] .h1{line-height:1.3;font-size:clamp(2.4rem,5vw,4.3rem)}
html[lang=ar] .h2{line-height:1.35}
html[lang=ar] .lead{line-height:1.9}
html[lang=ar] .card-title h3{font-size:1.75rem}
html[lang=ar] .card-title .alt,html[lang=ar] .price s{font-size:1rem}
html[lang=ar] .price,html[lang=ar] .sum b,html[lang=ar] .line-r{font-family:var(--sans)}
html[dir=rtl] input[dir=ltr]{text-align:right}
html[dir=rtl] .f-row input[type=tel]{direction:ltr;text-align:right}
.size{font-size:.85rem;color:var(--muted)}

/* ---------- account ---------- */
dialog{border:0;padding:0;border-radius:22px;background:var(--paper);color:var(--green);width:min(440px,94vw);max-height:92vh;box-shadow:0 40px 90px rgba(0,0,0,.45);overflow:hidden;margin:auto}
dialog::backdrop{background:rgba(3,31,32,.6)}
.dlg-in:focus{outline:0}
.dlg-in{position:relative;padding:2rem 1.8rem 1.8rem;max-height:92vh;overflow-y:auto}
.dlg-x{position:absolute;top:.6rem;inset-inline-end:.6rem}
dialog h3{font-size:1.8rem;margin-bottom:.2rem;padding-inline-end:2rem}
.dlg-in .sub{margin:0 0 1.2rem}
.switch{margin-top:1.1rem;text-align:center;font-size:.92rem;color:var(--muted)}
.switch button,.guest-hint button{text-decoration:underline;color:var(--green);font-weight:500}
.guest-hint{font-size:.88rem;color:var(--muted);margin-bottom:1rem}
.guest-hint[hidden]{display:none}
.tabs{display:flex;gap:.4rem;border-bottom:1px solid var(--line);margin:1rem 0}
.tabs button{padding:.6rem .9rem;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--muted)}
.tabs button.is-on{color:var(--green);border-color:var(--gold)}
.orders-list{margin-bottom:1rem}
.ord{border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem;margin-bottom:.7rem;background:#fff}
.ord-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.ord small{display:block;color:var(--muted);font-size:.84rem}
.ord-items{font-size:.9rem;margin:.5rem 0 .3rem}
.ord-total{font-weight:600}
.chip-st{font-size:.75rem;padding:.15rem .65rem;border-radius:20px;white-space:nowrap}
.chip-st.pending{background:rgba(214,137,16,.16);color:#9a5b12}.chip-st.confirmed{background:rgba(125,60,152,.13);color:#7D3C98}
.chip-st.shipped{background:rgba(36,113,163,.13);color:#2471A3}.chip-st.delivered{background:rgba(39,174,96,.14);color:#1E8449}.chip-st.cancelled{background:rgba(192,57,43,.12);color:#B3392B}
.none{color:var(--muted);text-align:center;padding:1.6rem 0}
#pwForm{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line)}
#pwForm h4{font-family:var(--display);font-weight:500;font-size:1.2rem;margin-bottom:.8rem}
.dlg-in .btn-block+.btn-block,.dlg-in #tabProfile+.btn-block{margin-top:.6rem}
#authDlg .btn-block{margin-top:.2rem}
#adminLink{margin-top:.8rem}
@media(max-width:640px){.pill .lbl{display:none}.acct-btn{padding:.48rem .7rem}}
@media(max-width:480px){.brand img{height:34px}.nav-r{gap:.35rem}.pill{padding:.4rem .7rem;font-size:.82rem}.burger{width:38px}}

/* reduced motion: no pinned animation, everything readable in normal flow */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage{height:auto}
  .pin{position:relative;top:0;height:auto;min-height:calc(100svh - var(--hh));padding:4rem 0}
  .panels{position:static;transform:none;height:auto}
  .panel{position:static;transform:none!important;opacity:1!important;visibility:visible!important;margin-bottom:2.6rem}
  .copy{height:auto}.hint,.rail,#mist,.stage-bgs{display:none}
  .slide{transition:none}.hint i{animation:none}
}
html[lang] .chips .alt{font-size:.9rem}
html[lang=ar] .chips .alt{letter-spacing:.02em}