:root{
  --img-r:18px;            /* one corner radius for every product image */
  --bg:var(--bg);
  --bg2:var(--bg);
  --cream:#f3e9d6;
  --gold:#E9A93A;
  --gold-2:#ffd27a;
  --muted:rgba(14,58,44,.64);
  --accent:#E9A93A;      /* shifts per variety */
  --accent-2:#b9641c;
  --line:rgba(14,58,44,.16);
  --disp:ARNUM,SAR,"Fraunces",Georgia,serif;
  --mono:ARNUM,SAR,"Space Mono",ui-monospace,monospace;
  --ar:"Amiri",serif;
  --maxw:1300px;
  --ease:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
/* Fluid root size — every rem in the sheet scales from here.
   ~17px on a phone, ~18px on a laptop (was a flat 16px).            */
/* overflow-x:clip, not hidden. `hidden` on one axis makes the other compute to `auto`,
   which turns html/body into scroll containers — and that silently kills position:sticky
   for every descendant. `clip` stops sideways overflow without that side effect.
   The `hidden` line stays first as a fallback for browsers without clip. */
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;max-width:100%;font-size:clamp(17px, 15.6px + .28vw, 18px);}
body{
  background:radial-gradient(120% 90% at 70% 0%, var(--bg), var(--bg) 60%);
  color:var(--cream);
  font-family:var(--mono);
  font-size:.95rem;
  overflow-x:hidden;
  overflow-x:clip;
  cursor:none;
}
html:not([dir="rtl"]) p{font-family:var(--disp);font-weight:400;}
@media(hover:none){ body{cursor:auto;} .cursor,.cursor-ring{display:none!important;} }
a{color:inherit;text-decoration:none;}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:none;}
img{max-width:100%;display:block;}
::selection{background:var(--accent);color:var(--on-fill);}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,64px);
  /* --gutter must always equal the padding on the line above it. Anything that
     wants to bleed past the content column — the product rails do — reads it
     from here rather than guessing 20px, which is only right below 561px. */
  --gutter:clamp(22px,5vw,64px);}
.disp{font-family:var(--disp);}
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--accent-ink);transition:color .6s var(--ease);}

/* ---- canvases ---- */
#shader{position:fixed;inset:0;z-index:0;width:100%;height:100%;opacity:.9;}

.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* The vignette darkens the corners. It now also carries a flat veil across the
   whole frame, and that veil is the fix for a problem nothing had measured.

   The shader canvas paints an animated amber field behind everything at 90%
   opacity. sweep.js could never see it — it skips any element with a painted
   ancestor, because backgroundColor cannot describe a moving canvas — so the type
   sitting on that field had gone unchecked since the page was built. Photographing
   the ground with every glyph hidden and reading the real pixels behind each text
   box (groundcontrast.js) found 43 elements below their contrast floor: the
   shipping line, the storage advice, the variety count, the section numbers, the
   footer, all small muted type on a wash bright enough that at rgb(153,115,55) not
   even pure white would have reached 4.5:1. The ground was the problem, not the
   text, so the ground is what changed.

   .55 was chosen by measurement, not by eye: 0 leaves 43 failures, .3 leaves 12,
   .5 leaves 5, .65 leaves 2 and starts flattening the warmth the shader is there
   for. The amber still moves; it just no longer sits between the reader and the
   words. */
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background-color:rgba(251,244,232,.55);
  background-image:radial-gradient(120% 100% at 50% 40%,transparent 55%,rgba(9,38,29,.75));}
main,header,footer{position:relative;z-index:3;}

/* ---- custom cursor ---- */
.cursor{position:fixed;top:0;left:0;width:7px;height:7px;border-radius:999px;background:var(--gold);z-index:9999;pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:width .3s,height .3s,background .3s,opacity .25s;mix-blend-mode:difference;}
.cursor-ring{position:fixed;top:0;left:0;width:38px;height:38px;border:1px solid var(--accent);border-radius:999px;z-index:9998;pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:width .35s var(--ease),height .35s var(--ease),border-color .5s,opacity .3s;}
body.hovering .cursor{width:0;height:0;}
body.hovering .cursor-ring{width:64px;height:64px;background:rgba(14,58,44,.08);}

/* ---- loader ---- */
#loader{position:fixed;inset:0;z-index:10000;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .9s var(--ease),visibility .9s;}
#loader.done{opacity:0;visibility:hidden;}
.loader-mark{width:clamp(76px,15vw,132px);height:auto;display:block;opacity:0;transform:translateY(14px) scale(.94);animation:markIn 1.05s var(--ease) .1s forwards;}
@keyframes markIn{to{opacity:1;transform:none;}}
.loader-word{font-family:var(--disp);font-size:clamp(3rem,12vw,9rem);font-weight:300;letter-spacing:.02em;line-height:1;overflow:hidden;padding-bottom:.16em;}
.loader-word span{display:inline-block;transform:translateY(140%);animation:riseIn .9s var(--ease) forwards;}
.loader-word span:nth-child(2){animation-delay:.06s}.loader-word span:nth-child(3){animation-delay:.12s}.loader-word span:nth-child(4){animation-delay:.18s}.loader-word span:nth-child(5){animation-delay:.24s}.loader-word span:nth-child(6){animation-delay:.3s}
@keyframes riseIn{to{transform:none;}}
.loader-bar{width:min(280px,60vw);height:1px;background:rgba(14,58,44,.2);position:relative;overflow:hidden;}
.loader-bar i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0);animation:load 1.75s var(--ease) forwards;}
@keyframes load{to{transform:scaleX(1);}}
.loader-sub{font-size:.66rem;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);opacity:0;animation:subIn .7s var(--ease) .95s forwards;}
@keyframes subIn{to{opacity:1;}}

/* ---- nav ---- */
header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,44px);padding:22px clamp(22px,5vw,64px);transition:padding .5s var(--ease);}
/* The scrolled header is glass over whatever is behind it, and what is behind it
   is now often a product photograph on a cream ground. At .5 the wordmark, the
   language switch and the cart measured 3.5-3.8:1 against that — below the floor,
   and invisible to sweep.js, which cannot see through a canvas or a photo.
   Measured with the ground instrument instead: .5 → 3.5, .65 → 5.9, .75 → 8.4.

   .7 cleared every control except one — the Arabic wordmark بالمير, which is set
   in `--accent` and so measured 4.2:1. That colour is not fixed either: setTheme
   repaints it per variety, so a dark variety would make it worse. .78 puts the
   wordmark at 5.6 with room to move and everything else past 9, and the blur
   still reads as glass. */
header.shrink{padding:14px clamp(22px,5vw,64px);background:rgba(251,244,232,.78);backdrop-filter:blur(12px);}
.logo{font-family:var(--disp);font-size:1.6rem;font-weight:500;letter-spacing:.04em;display:flex;align-items:center;gap:.55em;}
.logo-txt{display:flex;align-items:baseline;gap:8px;}
/* mark is sized in em so it tracks the wordmark at every breakpoint */
.logo-mark{width:1.5em;height:1.62em;flex:none;display:block;transition:transform .6s var(--ease),filter .6s var(--ease);}
.logo:hover .logo-mark{transform:translateY(-2px) scale(1.04);filter:drop-shadow(0 4px 14px rgba(14,58,44,.35));}
header.shrink .logo-mark{width:1.35em;height:1.46em;}
.logo .ar{font-family:var(--ar);font-size:1rem;color:var(--accent-ink);transition:color .6s var(--ease);}
/* ---- the desktop navigation ----

   Seven items — six links and the gifting pill — needed 882px of a 1075px row,
   and the way they used to fit was by breaking "TASTING FLIGHT" and "CORPORATE
   GIFTING" over two lines each. A header that wraps its own labels reads as one
   that ran out of room, because it had.

   Three things give the room back, in order of how little they cost: the tracking
   comes down from .16em to .1em (still generous for uppercase), the gaps from 30
   to 22, and below 1400 the two section links that are not part of buying — the
   virtues and the voices — step out of the bar. They stay in the phone menu and
   the page still scrolls to them; they are simply not what a header is for when
   the header is full. */
nav.links{display:flex;gap:22px;align-items:center;}
nav.links a{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;position:relative;
  opacity:.8;transition:opacity .3s;white-space:nowrap;}
@media(max-width:1399px){
  nav.links a[href="#benefits"],nav.links a[href="#voices"]{display:none;}
}
/* Below 1200 even five items and the pill run past the cart, in English — the
   Arabic labels are shorter and fit either way. Rather than shave the type until
   nobody can read it, the bar hands over to the menu button, which is the ordinary
   answer at this width and keeps every destination one tap away. */
@media(max-width:1199px){
  nav.links{display:none;}
  .menu-btn{display:inline-grid;}
}
.corp-pill{white-space:nowrap;}
/* A 20px-tall text link is a fine mouse target and a poor one for anything else,
   and a laptop is often a touchscreen. The link keeps its 20px line so the header
   keeps its height; what you actually click is the 44px box drawn over it. */
nav.links a{--hit-expanded:1;}
nav.links a::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;
  transform:translateY(-50%);}
nav.links a:hover{opacity:1;}
nav.links a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--accent);transition:width .4s var(--ease);}
nav.links a:hover::after{width:100%;}
.cartlink{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;transition:border-color .4s,background .4s;}
.cartlink:hover{border-color:var(--accent);background:rgba(14,58,44,.06);}
.cartlink .n{color:var(--accent-ink);font-weight:700;}
/* The bag only appears once the word is dropped, which happens on phones. It is drawn
   rather than typed: the first attempt used a box-drawing character and rendered as a
   tofu box in Space Mono, which on a shop header reads as a bug. */
.cartlink .cart-ic{display:none;width:17px;height:17px;flex:none;opacity:.85;}
.menu-btn{display:none;font-size:1.4rem;}

/* ---- hero ---- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:80px;}
.hero .kicker{display:flex;align-items:center;gap:14px;margin-bottom:26px;}
.hero .kicker .ln{width:52px;height:1px;background:var(--accent);transition:background .6s var(--ease);}
.hero h1{font-family:var(--disp);font-weight:300;font-size:clamp(3.6rem,12.5vw,11rem);line-height:.92;letter-spacing:-.02em;}
/* JS shrinks this until it fits its column — see fitHeadline() */
.hero h1.fitted{white-space:nowrap;}
/* fitOne() measures these, so they must never wrap while being measured */
.fitline{white-space:nowrap;display:block;overflow:hidden;}
/* A fitted line clips itself so it can never wrap. That is right sideways and wrong
   downwards: Arabic faces drop ي, ج and final ى well below the baseline, and those
   tails were being sliced off. `clip` is the one overflow value that may pair with
   `visible`, so the line still cannot spill sideways while the descenders survive.
   Older engines keep the old behaviour and are covered by the padding below. */
@supports (overflow:clip){ .fitline{overflow:visible;overflow-x:clip;overflow-y:visible;} }
.hero h1 .it{font-style:italic;font-weight:400;color:var(--gold-ink);}
.hero h1 .stroke{-webkit-text-stroke:1.2px var(--gold-ink);color:transparent;}
/* The mask that the hero lines rise out of. Latin has descenders too — "Molten gold,"
   and "grown in" were losing the tails of their g's, measured at a steady .16em past the
   mask from 360 to 1600. Room for them, and the same amount back as negative margin so
   the spacing between the three lines does not move. The RTL block further down needs
   more again, and overrides this. */
.h-line{overflow:hidden;display:block;padding-bottom:.18em;margin-bottom:-.18em;}
.h-line span{display:block;transform:translateY(150%);}
.hero.reveal .h-line span{transform:none;transition:transform 1.1s var(--ease);}
.hero.reveal .h-line:nth-child(2) span{transition-delay:.1s}.hero.reveal .h-line:nth-child(3) span{transition-delay:.2s}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:clamp(36px,6vw,64px);flex-wrap:wrap;gap:28px;}
.hero-lead{max-width:400px;font-size:.92rem;line-height:1.7;color:var(--muted);}
.mag{position:relative;display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;padding:18px 34px;border-radius:999px;background:var(--gold);color:var(--on-fill);font-weight:700;will-change:transform;transition:background .4s;}
.mag:hover{background:var(--gold-2);}
.mag .dot{width:7px;height:7px;border-radius:999px;background:var(--bg);}
.scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px;}
.scrollcue .ln{width:1px;height:40px;background:linear-gradient(var(--accent),transparent);animation:pulse 2s ease-in-out infinite;transform-origin:top;}
@keyframes pulse{0%,100%{transform:scaleY(.3);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---- marquee ---- */
.mq{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:18px 0;background:rgba(251,244,232,.55);}
/* soft edges so names enter and leave instead of popping */
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none;}
.mq::before{left:0;background:linear-gradient(90deg,var(--bg),transparent);}
.mq::after{right:0;background:linear-gradient(270deg,var(--bg),transparent);}
@media(max-width:620px){.mq{padding:14px 0;} .mq-track b{font-size:1.25rem;padding:0 18px;} html[dir="rtl"] .mq-track b{font-size:1.2rem;padding:0 16px;} .mq::before,.mq::after{width:34px;}}
.mq-track{display:flex;align-items:center;gap:0;width:max-content;white-space:nowrap;will-change:transform;transform:translate3d(0,0,0);}
/* A marquee has no reading direction, and it MUST be laid out left-to-right in both
   languages — including its container.
   Why the container matters: .mq-track is width:max-content, so it is wider than .mq and
   overflows. In an LTR parent it anchors to the LEFT edge and spills off to the right, so
   translating it leftwards pulls fresh names into view. In an RTL parent the very same box
   anchors to the RIGHT edge and spills off to the LEFT — so translating it leftwards moves
   it away from the viewer and leaves a growing blank gap on the right. Setting direction
   on the track alone did not help, because anchoring is decided by the PARENT.
   The Arabic words still read correctly: each name is a strong RTL run, and isolate keeps
   every name self-contained regardless of what sits beside it. */
html[dir="rtl"] .mq{direction:ltr;}
html[dir="rtl"] .mq-track{direction:ltr;}
html[dir="rtl"] .mq-track b{unicode-bidi:isolate;}

.mq-track b{font-family:var(--disp);font-style:italic;font-weight:400;font-size:1.7rem;display:inline-flex;align-items:center;white-space:nowrap;flex:none;color:var(--cream);padding:0 26px;}
html[dir="rtl"] .mq-track b{font-family:var(--ar-disp);font-style:normal;font-size:1.55rem;padding:0 22px;}
/* a small mark between names so they never run together */
.mq-track b::after{content:"";display:inline-block;width:.42em;height:.6em;border-radius:50%;background:currentColor;vertical-align:.05em;margin-inline-start:26px;font-size:.55em;color:var(--accent-ink);opacity:.75;}
html[dir="rtl"] .mq-track b::after{margin-inline-start:22px;}
.mq-track b::after{content:"※";color:var(--accent-ink);font-size:.9rem;}

/* ---- section frame ---- */
section{padding:clamp(80px,11vw,170px) 0;}
.sec-label{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:44px;}
.sec-label .num{font-family:var(--mono);font-size:.7rem;color:var(--accent-ink);letter-spacing:.2em;}
.sec-label h2{font-family:var(--disp);font-weight:300;font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.08;letter-spacing:-.01em;}
.reveal-up{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
.reveal-up.in{opacity:1;transform:none;}

/* ---- varieties (interactive index) ---- */
/* align-items:start is what makes position:sticky work on the stage: a centred grid item
   is sized to its own content and parked mid-row, so it has no room to travel. With start
   it stretches against the taller list column and can follow the scroll. */
.var-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start;}
.pr-u{font-size:.7em;color:var(--muted);font-family:var(--mono);letter-spacing:.02em;white-space:nowrap}
.var-intro{color:var(--muted);max-width:640px;margin:-24px 0 34px;font-size:.96rem;line-height:1.75;}

/* ═══════ the shop: categories + the Taste Line ═══════ */
.shop-cats{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 26px;}
.shop-cats:empty{display:none;}
.shop-cat{appearance:none;background:transparent;border:1px solid var(--line);color:var(--muted);
  font:500 .82rem/1 inherit;letter-spacing:.02em;padding:10px 16px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:baseline;gap:8px;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);}
.shop-cat .n{opacity:.5;font-size:.72rem;font-family:var(--mono);}
.shop-cat:hover{color:var(--cream);border-color:rgba(14,58,44,.4);}
.shop-cat[aria-selected="true"]{color:var(--on-fill);background:var(--gold);border-color:var(--gold);font-weight:600;}
.shop-cat[aria-selected="true"] .n{opacity:.55;}
/* The View all chip does something; the rest of the rail goes somewhere. It is a
   button among links, so it says so with a gold rule rather than by shouting —
   filled only while it is on, the way a pressed control should read. */
.shop-cat-all{border-color:rgba(14,58,44,.55);color:var(--gold-ink);font-weight:600;}
.shop-cat-all:hover{background:rgba(14,58,44,.1);border-color:var(--gold);color:var(--gold-ink);}
.shop-cat-all[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--on-fill);}
.shop-cat:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;}

/* the shelf reacts to the line */
.var-item{transition:opacity .45s var(--ease);}
.var-item.dim{opacity:.42;}
.var-item.match{position:relative;}
.var-item.match::after{content:"";position:absolute;inset:-1px;border-radius:inherit;
  border:1px solid rgba(14,58,44,.55);pointer-events:none;}

@media(max-width:620px){
  /* was .58rem — 9.9px on a phone, under the point where a tracked mono face stays
     readable at arm's length. Nothing a customer has to read sits below 11px now. */
}
@media (prefers-reduced-motion: reduce){
}


/* ---- find-your-date quiz ---- */
.quiz-card{border:1px solid var(--line);border-radius:22px;padding:clamp(24px,4vw,40px);background:linear-gradient(160deg,rgba(14,58,44,.07),rgba(251,244,232,.45));box-shadow:0 40px 110px -60px rgba(14,58,44,.16);}
.quiz-step{animation:fin .45s var(--ease);}
.quiz-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap;}
.quiz-count{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink);}
.quiz-dots{display:flex;gap:7px;}
.quiz-dots i{width:26px;height:3px;border-radius:99px;background:rgba(14,58,44,.22);transition:background .4s;}
.quiz-dots i.on{background:var(--accent);}
.quiz-q{font-family:var(--disp);font-weight:300;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.15;margin-bottom:22px;}
.quiz-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.quiz-opt{border:1px solid var(--line);border-radius:16px;padding:20px 18px;text-align:start;background:rgba(251,244,232,.28);transition:border-color .35s,background .35s,transform .45s var(--ease);cursor:none;}
@media(hover:hover){ .quiz-opt:hover{border-color:var(--accent);background:rgba(14,58,44,.09);transform:translateY(-4px);} }   /* a tap must not leave it stuck lifted */
.quiz-opt .ico{font-size:1.5rem;display:block;margin-bottom:9px;}
.quiz-opt b{display:block;font-family:var(--disp);font-weight:400;font-size:1.3rem;line-height:1.2;margin-bottom:4px;}
.quiz-opt span{font-size:.82rem;color:var(--muted);line-height:1.5;display:block;}
.quiz-result{display:grid;grid-template-columns:240px 1fr;gap:clamp(20px,3vw,34px);align-items:center;animation:fin .5s var(--ease);}
.quiz-photo{border-radius:18px;overflow:hidden;aspect-ratio:1/1;border:1px solid var(--line);}
.quiz-photo img,.quiz-photo svg{width:100%;height:100%;object-fit:cover;display:block;}
.quiz-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);border:1px solid var(--line);border-radius:999px;padding:6px 12px;margin-bottom:12px;}
.quiz-name{font-family:var(--disp);font-weight:400;font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.05;}
.quiz-name .ar{font-size:1.1rem;color:var(--accent-ink);}
.quiz-why{color:rgba(14,58,44,.84);font-size:.96rem;line-height:1.7;margin:10px 0 16px;max-width:46ch;}
.quiz-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:20px;font-size:.84rem;color:var(--muted);}
.quiz-meta .sweet{display:inline-flex;gap:4px;}
.quiz-meta .sweet i{width:9px;height:9px;border-radius:50%;background:rgba(14,58,44,.22);}
.quiz-meta .sweet i.on{background:var(--accent);}
.quiz-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.quiz-again{border:1px solid var(--line);border-radius:999px;padding:14px 22px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);transition:border-color .35s,background .35s;}
.quiz-again:hover{border-color:var(--accent);background:rgba(14,58,44,.07);}
@media(max-width:760px){
  .quiz-opts{grid-template-columns:1fr;}
  .quiz-result{grid-template-columns:1fr;}
  .quiz-photo{max-width:300px;margin:0 auto;}
}
.var-list{border-top:1px solid var(--line);display:flex;flex-direction:column;}
.var-item{border-bottom:1px solid var(--line);padding:26px 6px;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:none;position:relative;transition:padding-left .5s var(--ease);}
.var-item .idx{font-family:var(--mono);font-size:.68rem;color:var(--muted);width:34px;}
.var-item .nm{font-family:var(--disp);font-weight:300;font-size:clamp(1.7rem,3.6vw,3rem);line-height:1;flex:1;transition:color .4s,transform .5s var(--ease);}
.var-item .nm .ar{font-family:var(--ar);font-size:1.1rem;color:var(--muted);margin-left:14px;}
.var-item .pr{font-family:var(--mono);font-size:1.05rem;color:var(--gold-ink);font-weight:700;}
/* on a laptop the row stays one flex line, so the wrapper must not create a box */
.var-meta{display:contents;}
.var-item.out{opacity:.5;}
.var-item.out .add{border-color:var(--line);color:var(--muted);cursor:not-allowed;}
.var-item.out:hover{transform:none;border-color:var(--line);}
/* Out of season. Gold, not the per-variety accent: --accent shifts by variety
   and Ajwa's is a brown that makes the only available action look disabled.
   Out of season. This is the only place the shop asks a stranger for something,
   so it is built as an invitation rather than an error: the brand's gold, not
   the red of a failure, and a single field that states what it will accept. */
.out-note{border:1px solid rgba(14,58,44,.22);
  background:linear-gradient(180deg,rgba(14,58,44,.07),rgba(14,58,44,.03));
  border-radius:14px;padding:17px 18px 18px;margin-bottom:16px;}
.out-note b{display:flex;align-items:center;gap:9px;font-family:var(--disp);
  font-size:1.06rem;color:var(--gold-ink);margin-bottom:5px;font-weight:500;}
.out-note b:before{content:'';width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--gold);box-shadow:0 0 0 3px rgba(14,58,44,.16);}
html[dir="rtl"] .out-note b{font-family:var(--ar-disp);}
.out-note span{display:block;font-size:.79rem;color:var(--muted);line-height:1.7;}
/* The out-of-season card is the only place on the shop that asks for a contact
   detail. It gets one field, because two fields is where people stop. */
.ntf{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap;}
.ntf-in{flex:1 1 200px;min-width:0;background:rgba(0,0,0,.28);border:1px solid var(--line);
  border-radius:11px;padding:12px 14px;color:var(--ink);font-size:.84rem;font-family:inherit;
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);}
.ntf-in::placeholder{color:var(--muted);}
.ntf-in:hover{border-color:rgba(14,58,44,.3);}
.ntf-in:focus{outline:none;border-color:var(--gold);background:rgba(0,0,0,.34);
  box-shadow:0 0 0 3px rgba(14,58,44,.13);}
.ntf-go{flex:0 0 auto;border:1px solid var(--gold);color:var(--on-fill);background:var(--gold);
  border-radius:11px;padding:12px 18px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;font-weight:600;
  transition:filter .2s var(--ease),transform .12s var(--ease),opacity .2s var(--ease);}
.ntf-go:hover{filter:brightness(1.08);}
.ntf-go:active{transform:translateY(1px);}
.ntf-go[disabled]{opacity:.45;pointer-events:none;}
/* The confirmation replaces the form in place, so the answer lands where the
   question was rather than appearing somewhere else on the card. */
.ntf-msg{margin:12px 0 0;font-size:.82rem;color:var(--gold-ink);line-height:1.6;
  display:flex;align-items:flex-start;gap:8px;}
.ntf-msg:before{content:'';width:16px;height:16px;flex:none;margin-top:2px;border-radius:50%;
  background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.ntf-msg[hidden]{display:none;}   /* display:flex would otherwise beat [hidden] */
.ntf-msg.bad{color:#B42D3F;}
.ntf-msg.bad:before{background:#B42D3F;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v5M8 11.5v.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v5M8 11.5v.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;}
@media (prefers-reduced-motion:reduce){.ntf-in,.ntf-go{transition:none;}}
.mag[disabled],.add[disabled]{opacity:.45;pointer-events:none;}
.vthumb{display:none;position:relative;}
.var-item .add{opacity:0;transform:translateX(12px);transition:opacity .4s,transform .4s var(--ease);border:1px solid var(--accent);color:var(--accent-ink);border-radius:999px;padding:9px 16px;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;}
.var-item:hover{padding-left:22px;}
.var-item:hover .nm{color:var(--accent-ink);}
.var-item:hover .add{opacity:1;transform:none;}
.var-item.active .nm{color:var(--accent-ink);}
.var-stage{position:sticky;top:120px;aspect-ratio:1/1;border-radius:calc(var(--img-r) + 6px);overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at 50% 35%,rgba(14,58,44,.12),rgba(251,244,232,.6));display:flex;align-items:center;justify-content:center;box-shadow:0 40px 120px -40px rgba(14,58,44,.16);}
.var-stage .art{width:100%;height:100%;transition:opacity .6s var(--ease);}
.var-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(251,244,232,.82),rgba(251,244,232,.15) 42%,transparent 62%);pointer-events:none;z-index:1;}
.var-stage .meta{position:absolute;left:24px;bottom:24px;right:24px;z-index:2;}
.var-stage .flav{z-index:2;}
.var-stage .meta .t{font-family:var(--disp);font-size:2rem;font-weight:400;text-shadow:0 2px 10px rgba(14,58,44,.16);}
.var-stage .meta .d{font-size:.86rem;color:rgba(14,58,44,.85);margin-top:6px;max-width:80%;line-height:1.6;text-shadow:0 1px 6px rgba(14,58,44,.16);}
.var-stage .flav{position:absolute;top:22px;right:22px;font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(255,233,168,.7);border-radius:999px;padding:8px 15px;color:#FFF3D0;background:rgba(14,58,44,.1);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);text-shadow:0 1px 3px rgba(14,58,44,.16),0 0 14px rgba(14,58,44,.16);box-shadow:0 2px 10px rgba(0,0,0,.28);}
html[dir="rtl"] .var-stage .flav{font-family:var(--ar-ui);font-size:.76rem;font-weight:600;}
.var-item{cursor:none;}
.var-item .season-tag{margin-inline-start:12px;vertical-align:middle;}
.season-tag{display:inline-block;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#2a1a0c;background:linear-gradient(135deg,#F2D48F,#D9A441);border:none;padding:4px 10px;border-radius:999px;margin-left:14px;vertical-align:middle;transform:translateY(-3px);}
html[dir="rtl"] .season-tag{margin-left:0;margin-right:14px;font-family:var(--ar-ui);font-size:.68rem;}
/* Most-ordered mark. Deliberately quieter than the seasonal tag: it is a fact
   about our own order book, not a decoration, and it appears on exactly one
   variety or on none. A label worn by half the shelf is worth nothing. */
/* The most-ordered mark rides the top outer corner of the name and hangs off
   its edge, the way a marketing flash does — it belongs to the word, not to
   the row. `inset-inline-end` puts it after the word in either script, so it
   mirrors to the left in Arabic without a second rule. */
/* The most-ordered flash sits on the photograph, not on the name, and it is red.
   Gold already means "seasonal" on this shelf — a second gold pill read as the
   same kind of thing, which is the one job a flash must not fail at. Red is the
   only other colour the brand already owns (it is the console's "new order"
   hue), so it separates without importing a colour from nowhere. */
.top-tag{position:absolute;z-index:4;top:0;inset-inline-start:0;
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:.56rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#fdeee9;
  background:linear-gradient(135deg,#C1442C,#9C2E1E);
  padding:7px 12px 7px 11px;
  border-end-end-radius:10px;
  box-shadow:0 6px 18px -8px rgba(156,46,30,.9);
  white-space:nowrap;pointer-events:none;}
.top-tag i{width:5px;height:5px;border-radius:50%;background:#fdeee9;flex:none;opacity:.75;}
/* display:inline-flex outranks the browser's own display:none for [hidden], so
   without this the staged card wore an empty red flash whenever there was no
   top seller to name. */
.top-tag[hidden]{display:none;}
html[dir="rtl"] .top-tag{font-family:var(--ar-ui);font-size:.66rem;letter-spacing:0;
  padding:6px 11px 6px 12px;}
.top-note{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);}
@media(max-width:720px){
  .top-tag{font-size:.5rem;padding:6px 10px;letter-spacing:.12em;}
  html[dir="rtl"] .top-tag{font-size:.6rem;}
}


/* ---- the line masthead ----------------------------------------------------
   One component, rendered from LINES, used by every line the brand ever adds.
   The claims strip is the part that has to survive: three things only this line
   can say, in mono so they read as facts rather than as marketing. */
.line-head{margin:0 0 clamp(22px,3vw,34px);padding-bottom:clamp(16px,2.2vw,22px);
  border-bottom:1px solid var(--line);}
.lh-top{display:flex;align-items:baseline;gap:clamp(12px,1.6vw,18px);flex-wrap:wrap;}
.lh-count{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 11px;}
.lh-name{font-family:var(--disp);font-weight:300;font-size:clamp(2.1rem,5vw,3.4rem);
  line-height:1.05;color:var(--cream);margin:0;}
.lh-note{font-size:clamp(.92rem,1.5vw,1.05rem);line-height:1.6;color:var(--muted);
  margin:10px 0 clamp(15px,2vw,20px);max-width:52ch;}
.claims{display:flex;flex-wrap:wrap;gap:0;}
.claim{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(14,58,44,.82);padding:0 clamp(14px,2vw,20px);
  border-inline-start:1px solid var(--line);line-height:1.5;}
.claim:first-child{padding-inline-start:0;border-inline-start:none;}
html[dir="rtl"] .lh-count,html[dir="rtl"] .claim{
  font-family:var(--ar-ui);letter-spacing:0;text-transform:none;}
html[dir="rtl"] .lh-count,html[dir="rtl"] .claim{font-size:.8rem;}
html[dir="rtl"] .lh-name{font-family:var(--ar-disp);line-height:1.35;padding-bottom:.1em;}
@media(max-width:620px){
  .lh-note{font-size:.95rem;}
  .claims{gap:7px 0;}
  .claim{font-size:.74rem;padding:0 12px;}
  html[dir="rtl"] .claim{font-size:.82rem;}
}

/* ---- what is coming next --------------------------------------------------
   The honest version of an empty category. It states the line and takes a name.
   No countdown, no invented ship month, no fake stock — the rules that hold for
   reviews hold here too. */
.next-lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(14px,2vw,20px);margin-top:clamp(34px,5vw,58px);}
.next-line{border:1px dashed var(--line);border-radius:18px;
  padding:clamp(20px,2.6vw,26px);background:rgba(14,58,44,.025);
  display:flex;flex-direction:column;gap:11px;}
.nl-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.nl-soon{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);border:1px solid rgba(14,58,44,.4);border-radius:999px;padding:4px 10px;
  white-space:nowrap;}
.nl-name{font-family:var(--disp);font-weight:300;font-size:1.5rem;color:var(--cream);line-height:1.1;}
.nl-note{font-size:.86rem;line-height:1.6;color:var(--muted);margin:0;}
.nl-claims{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}
.nl-claims span{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 9px;}
.nl-cta{display:inline-flex;align-items:center;gap:9px;margin-top:auto;padding-top:6px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);min-height:44px;}
.nl-cta:hover{color:var(--gold-ink);}
.nl-cta i{font-style:normal;transition:transform .4s var(--ease);}
.nl-cta:hover i{transform:translateX(4px);}
html[dir="rtl"] .nl-cta i{transform:scaleX(-1);}
html[dir="rtl"] .nl-cta:hover i{transform:scaleX(-1) translateX(4px);}
html[dir="rtl"] .nl-name{font-family:var(--ar-disp);line-height:1.4;padding-bottom:.08em;}
html[dir="rtl"] .nl-soon,html[dir="rtl"] .nl-claims span,html[dir="rtl"] .nl-cta{
  font-family:var(--ar-ui);letter-spacing:0;text-transform:none;font-size:.76rem;}

/* ---- seasonal section ---- */
.seasonal-sub{color:var(--muted);max-width:520px;margin:-26px 0 32px;font-size:.92rem;line-height:1.7;}
.seasonal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media(max-width:760px){ .seasonal-grid{grid-template-columns:1fr;} }
.scard{position:relative;display:flex;gap:16px;align-items:center;text-align:start;width:100%;background:linear-gradient(180deg,rgba(14,58,44,.06),rgba(251,244,232,.35));border:1px solid var(--line);border-radius:18px;overflow:hidden;padding:16px;cursor:none;transition:border-color .4s,transform .5s var(--ease),box-shadow .5s;}
@media(hover:hover){ .scard:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 24px 60px -30px rgba(14,58,44,.16);} }   /* a tap must not leave it stuck lifted */
.scard-art{width:104px;height:104px;flex:none;border-radius:var(--img-r);overflow:hidden;}
.scard-badge{position:absolute;top:12px;right:12px;z-index:3;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(135deg,#F2D48F,#D9A441);color:#2a1a0c;font-weight:700;padding:5px 11px;border-radius:999px;box-shadow:0 3px 12px rgba(0,0,0,.45);}
html[dir="rtl"] .scard-badge{font-family:var(--ar-ui);font-size:.68rem;}
html[dir="rtl"] .scard-badge{right:auto;left:12px;}
.scard-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.scard-name{font-size:1.5rem;line-height:1.1;}
.scard-name .ar{font-size:.9rem;color:var(--accent-ink);margin-left:10px;}
html[dir="rtl"] .scard-name .ar{margin-left:0;margin-right:10px;}
.scard-flav{font-size:.84rem;color:rgba(14,58,44,.82);}
.scard-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;gap:10px;}
.scard .pr{font-family:var(--disp);color:var(--gold-ink);font-size:1.4rem;}
.scard-cta{font-size:.72rem;color:var(--accent-ink);white-space:nowrap;}

/* ---- info card ---- */
.info-card{position:relative;padding:0;overflow:hidden;}
.info-x{position:absolute;top:14px;right:14px;z-index:4;background:rgba(251,244,232,.55);backdrop-filter:blur(6px);border:1px solid var(--line);}
html[dir="rtl"] .info-x{right:auto;left:14px;}
.info-hero{position:relative;height:210px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.info-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,var(--glow),transparent 60%);opacity:.45;}
.info-art{position:relative;width:210px;height:210px;filter:drop-shadow(0 20px 42px rgba(14,58,44,.16));}
.date-photo{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
/* Product photos are square. A square frame + contain shows the whole date pack with
   nothing cropped away — the old fixed-height hero cut the top and bottom off. */

/* The photo is pinned to all four edges of a square frame. No flex centring, no
   percentage heights, no max-height fighting the aspect ratio — those are what let it
   drift off to one side (and in RTL a box narrower than its parent hugs the right edge).
   Frame and photo are both 1:1, so cover crops nothing. */
.info-hero.has-photo{display:block;position:relative;width:100%;max-width:100%;margin:0;padding:0;
  height:auto;aspect-ratio:1/1;max-height:none;overflow:hidden;background:var(--bg);}
/* Every dimension is stated. Anything left as `auto` can be shrunk to satisfy the aspect
   ratio, and a box narrower than its parent hugs the right edge in RTL — which is exactly
   how the photo kept ending up pushed to one side. */
.info-hero.has-photo .info-art{position:absolute;top:0;left:0;right:0;bottom:0;
  width:100%;height:100%;margin:0;filter:none;display:block;}
.info-hero.has-photo .date-photo{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;}
.info-hero.has-photo::before{opacity:.2;}


/* sits on top of a photo, so it needs solid fill rather than a translucent scrim */
.info-season{position:absolute;top:16px;left:16px;z-index:3;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(135deg,#F2D48F,#D9A441);color:#2a1a0c;border:none;padding:7px 14px;border-radius:999px;box-shadow:0 3px 12px rgba(0,0,0,.45);}
html[dir="rtl"] .info-season{font-family:var(--ar-ui);font-size:.7rem;font-weight:700;}
html[dir="rtl"] .info-season{left:auto;right:16px;}
.info-body{padding:22px 26px 26px;}
.info-body h3{font-family:var(--disp);font-weight:400;font-size:2.1rem;line-height:1.05;}
.info-ar{font-size:1.05rem;color:var(--accent-ink);margin-left:10px;}
html[dir="rtl"] .info-ar{margin-left:0;margin-right:10px;}
.info-hook{color:rgba(14,58,44,.8);font-size:.94rem;line-height:1.6;margin-top:8px;}
/* One column of rows, on every screen — but measured, not assumed.

   Two pairs across was the first idea: a 560px sheet looks like it has room for
   four tracks. It does not. Once the two label columns and the gaps are taken
   out each value gets about 118px, and "Pure caramel, extra sweet" breaks over
   three lines. What the desktop width is actually good for is a wider label
   column, more air per row and a slightly larger value; the phone rule below
   tightens all three. Same structure, different room — the honest way these two
   differ. */
.info-facts{display:grid;grid-template-columns:1fr;gap:0;margin:18px 0 6px;}
/* Two per row on phones as well. Stacking five facts one under another pushed the price
   and the size buttons far below the fold — the facts are short enough to pair up, and
   the customer sees taste, texture, pairing, sweetness and weight in one glance. */
@media(max-width:480px){ .info-body h3{font-size:1.35rem;} }
@media(max-width:620px){
  /* One column on a phone: five full-width rows read straight down, and no value
     can push its neighbour out of line because there is no neighbour. */
  .info-facts{grid-template-columns:1fr;gap:0;margin:10px 0 4px;}
  .info-facts .fact{display:grid;grid-template-columns:84px 1fr;gap:3px 12px;
    padding:8px 0;font-size:.8rem;line-height:1.4;
    border-top:1px solid rgba(14,58,44,.14);}
  .info-facts .fact > b,.info-facts .fact > span{padding:0;border-top:0;}
  .fact b{font-size:.72rem;}
  html[dir="rtl"] .fact{font-size:.85rem;}
  html[dir="rtl"] .fact b{font-size:.78rem;}
  /* the weight row reads better across the full width, right above the price */
  .info-facts .fact:last-child{grid-column:auto;}
  .info-body{padding:12px 16px 14px;}
  .info-hook{font-size:.82rem;line-height:1.5;margin-top:5px;}
}
/* pack-size chooser (500g / 1kg) */
.size-pick.nudge{animation:sizeNudge 1.5s var(--ease);}
@keyframes sizeNudge{
  0%,100%{transform:none}
  12%{transform:translateY(-4px)}
  24%{transform:none}
  36%{transform:translateY(-3px)}
  48%{transform:none}
}
.size-pick.nudge .szb{border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,58,44,.18);}
.size-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px;}
.size-pick .szb{position:relative;display:grid;grid-template-columns:1fr auto;align-items:baseline;
  gap:2px 10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;text-align:start;
  transition:border-color .35s,background .35s;}
.size-pick .szb b{grid-column:1;}
.size-pick .szb span{grid-column:2;justify-self:end;}
.size-pick .szb em{grid-column:1 / -1;justify-self:start;}
html[dir="rtl"] .size-pick .szb span{justify-self:start;}
html[dir="rtl"] .size-pick .szb em{justify-self:end;}
.size-pick .szb b{font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;transition:color .35s;}
.size-pick .szb span{font-family:var(--disp);font-size:1.35rem;color:var(--cream);}
.size-pick .szb em{font-style:normal;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);}
.size-pick .szb:hover{border-color:rgba(14,58,44,.4);}
.size-pick .szb.on{border-color:var(--accent);background:rgba(14,58,44,.07);}
.size-pick .szb.on b{color:var(--accent-ink);}
.fact{display:grid;grid-template-columns:118px 1fr;gap:4px 16px;align-items:baseline;
  padding:11px 0;border-top:1px solid rgba(14,58,44,.14);font-size:.9rem;color:var(--cream);}
.fact .fi{font-size:1.15rem;line-height:1.3;flex:none;}
/* Sentence case, normal weight. Five uppercase mono labels at .12em of tracking
   were shouting five different things at once — that was most of the noise. */
.fact b{color:var(--muted);font-size:.72rem;text-transform:none;letter-spacing:.01em;
  font-weight:400;margin:0;}
.sweet{display:inline-flex;gap:5px;align-items:center;transform:translateY(-1px);}
.sweet i{width:9px;height:9px;border-radius:50%;background:rgba(14,58,44,.22);}
.sweet i.on{background:var(--accent);}
.info-buy{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;}
.info-price{font-size:1.9rem;color:var(--gold-ink);}

/* ---- ritual / heritage ---- */
.ritual{position:relative;}
.ritual-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,6vw,80px);align-items:center;}
.ritual h3{font-family:var(--disp);font-weight:300;font-size:clamp(1.9rem,4.4vw,3.5rem);line-height:1.08;margin-bottom:24px;}
.ritual h3 em{font-style:italic;color:var(--gold-ink);}
.ritual p{color:var(--muted);line-height:1.8;margin-bottom:16px;max-width:52ch;font-size:.94rem;}
.ritual .signature{font-family:var(--disp);font-style:italic;font-size:1.5rem;color:var(--accent-ink);margin-top:22px;}
.orb-wrap{position:relative;display:flex;align-items:center;justify-content:center;animation:float 8s ease-in-out infinite;}
.orb{aspect-ratio:1/1;width:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-2),var(--accent) 38%,var(--accent-2) 70%,#2a1608);box-shadow:0 0 120px -20px var(--accent),inset -30px -30px 80px rgba(14,58,44,.16);}
@keyframes float{0%,100%{transform:translateY(-10px)}50%{transform:translateY(10px)}}
.orb-ring{position:absolute;inset:-7%;border:1px dashed rgba(14,58,44,.4);border-radius:50%;animation:spin 44s linear infinite;pointer-events:none;}
.orb-ring::before{content:"";position:absolute;top:-3px;left:50%;width:7px;height:7px;margin-left:-3.5px;background:var(--gold-2);border-radius:50%;box-shadow:0 0 14px 2px var(--gold-2);}
@keyframes spin{to{transform:rotate(360deg)}}
.orb-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#2a1608;padding:0 10%;}
.orb-label .est{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;opacity:.75;}
.orb-label .yr{font-family:var(--disp);font-weight:300;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1;margin:6px 0;}
.orb-label .sub{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;}
html[dir="rtl"] .orb-label .est,html[dir="rtl"] .orb-label .sub{letter-spacing:0;font-family:var(--ar-ui);text-transform:none;}
html[dir="rtl"] .orb-label .yr{font-family:var(--disp);}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:48px 0;}
.stat .v{font-family:var(--disp);font-weight:300;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1;color:var(--gold-ink);}
.stat .k{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:10px;}

/* ---- sweet science ---- */
.sweetband{border:1px solid var(--line);border-radius:22px;padding:clamp(30px,5vw,56px);background:radial-gradient(circle at 26% 18%,rgba(14,58,44,.08),transparent 62%);}
.sweetband-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,60px);align-items:center;}
.sweetband .eyebrow2{font-family:var(--mono);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:14px;display:block;}
.sweetband h3{font-family:var(--disp);font-weight:300;font-size:clamp(1.9rem,4vw,3rem);line-height:1.12;margin-bottom:18px;}
.sweetband h3 em{font-style:italic;color:var(--gold-ink);}
.sweetband p{color:var(--muted);line-height:1.85;margin-bottom:14px;font-size:.94rem;max-width:56ch;}
.sweetband .note{font-size:.78rem;color:var(--accent-ink);border-top:1px solid var(--line);padding-top:16px;margin-top:8px;}
.sweetstats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.sweetstats .stat{text-align:center;padding:18px 10px;border:1px solid var(--line);border-radius:14px;}
.sweetstats .stat .v{font-family:var(--disp);font-weight:300;font-size:clamp(1.7rem,3.2vw,2.5rem);color:var(--gold-ink);line-height:1;}
.sweetstats .stat .k{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:8px;line-height:1.45;}
/* One quiet band under the shelf, at the section-widget scale: label .68rem,
   text .8rem, nothing under 11px. It replaced a three-card grid inside a padded
   bordered panel that cost 371px on a phone to carry twenty words. */
.careband{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;
  margin:16px 0 4px;padding:12px 0 0;border-top:1px solid var(--line)}
.care-label{flex:0 0 auto;font:400 .68rem/1.4 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:rgba(14,58,44,.62)}
html[dir="rtl"] .care-label{font-family:var(--ar-ui,var(--ar));letter-spacing:0;font-size:.8rem}
.care-line{margin:0;font-size:.8rem;line-height:1.5;color:var(--ink-muted)}
.care-line b{font-weight:400;color:var(--gold-ink);margin-inline-end:7px}
html[dir="rtl"] .care-line{font-family:var(--ar-ui,var(--ar))}
@media(max-width:560px){.careband{gap:2px 14px}.care-line{flex:1 0 100%}}

/* ---- benefits ---- */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;}
.benefit{background:var(--bg);padding:34px 26px;transition:background .5s;}
.benefit:hover{background:rgba(14,58,44,.05);}
.benefit .bi{font-family:var(--disp);font-size:2.4rem;color:var(--accent-ink);margin-bottom:16px;transition:color .5s var(--ease);}
.benefit h4{font-family:var(--disp);font-weight:400;font-size:1.4rem;margin-bottom:8px;}
.benefit p{font-size:.84rem;color:var(--muted);line-height:1.65;}

/* ---- voices ---- */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.voice{border:1px solid var(--line);border-radius:18px;padding:30px;display:flex;flex-direction:column;gap:18px;transition:border-color .5s,transform .6s var(--ease);}
@media(hover:hover){ .voice:hover{border-color:var(--accent);transform:translateY(-6px);} }   /* a tap must not leave it stuck lifted */
.voice .stars{color:var(--accent-ink);letter-spacing:3px;font-size:.9rem;transition:color .5s;}
.voice q{font-family:var(--disp);font-style:italic;font-size:1.25rem;line-height:1.5;quotes:none;}
.voice .who{margin-top:auto;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.voice .who b{color:var(--cream);}

/* ---- write-a-review ---- */
.voice.pending{border-color:rgba(14,58,44,.45);background:rgba(14,58,44,.04);}
.pend-tag{display:inline-block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);border:1px solid var(--line);border-radius:999px;padding:4px 10px;align-self:flex-start;}
.rev-open{margin-top:28px;display:flex;justify-content:center;}
.rev-form{margin:26px auto 0;border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,32px);max-width:660px;display:none;}
.rev-form.show{display:block;}
.rev-form h4{font-family:var(--disp);font-weight:400;font-size:1.5rem;margin-bottom:4px;}
.rev-sub{color:var(--muted);font-size:.8rem;line-height:1.6;margin-bottom:20px;}
.rev-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
@media(max-width:560px){.rev-row{grid-template-columns:1fr;}}
.rev-form textarea{width:100%;background:rgba(14,58,44,.04);border:1px solid var(--line);border-radius:11px;padding:13px 15px;color:var(--cream);font-family:var(--mono);font-size:.88rem;line-height:1.6;outline:none;resize:vertical;min-height:110px;transition:border-color .4s;}
.rev-form textarea:focus{border-color:var(--accent);}
.rev-form textarea.err,.rev-form input.err{border-color:#B42D3F;}
@media(max-width:560px){.rev-form textarea{font-size:1rem;}}
.rate{display:flex;gap:6px;align-items:center;}
.rate button{font-size:1.7rem;line-height:1;color:rgba(14,58,44,.25);transition:color .25s,transform .25s;}
@media(hover:hover){ .rate button:hover{transform:translateY(-2px);} }   /* a tap must not leave it stuck lifted */
.rate button.on{color:var(--accent-ink);}
.rev-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:10px;}
.rev-hint{font-size:.66rem;color:var(--muted);line-height:1.65;margin-top:7px;}
.no-voices{max-width:600px;margin:0 auto;text-align:center;border:1px dashed var(--line);border-radius:18px;padding:38px 26px;}
.no-voices .nv-mark{color:var(--accent-ink);font-size:1.2rem;display:block;margin-bottom:12px;}
.no-voices p{font-family:var(--disp);font-size:1.35rem;color:var(--cream);margin-bottom:9px;line-height:1.4;}
.no-voices small{font-size:.8rem;color:var(--muted);line-height:1.8;display:block;}
.voices:empty{display:none;}
.rev-locked{max-width:560px;margin:28px auto 0;text-align:center;border:1px dashed var(--line);border-radius:18px;padding:26px 24px;}
.rev-locked .lock{color:var(--accent-ink);font-size:1.1rem;display:block;margin-bottom:10px;}
.rev-locked p{font-family:var(--disp);font-size:1.15rem;color:var(--cream);margin-bottom:8px;}
.rev-locked small{font-size:.76rem;color:var(--muted);line-height:1.7;display:block;}
.verified-strip{display:none;align-items:center;gap:10px;border:1px solid rgba(30,122,76,.4);background:rgba(30,122,76,.07);
 border-radius:999px;padding:10px 18px;margin-bottom:20px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#1E7A4C;}
.verified-strip.show{display:inline-flex;}
.verified-strip .vb{font-size:.9rem;}
.verified-strip b{color:var(--muted);letter-spacing:.08em;font-weight:400;}
.rev-note{font-size:.68rem;color:var(--muted);line-height:1.7;margin-top:16px;}




/* ---- location picker ---- */
.pin-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-bottom:8px;
  border:1px dashed rgba(14,58,44,.45);border-radius:10px;padding:11px 14px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);
  background:rgba(14,58,44,.05);transition:border-color .35s,background .35s;}
.pin-btn:hover{border-color:var(--accent);background:rgba(14,58,44,.1);}
.pin-ic{font-size:.95rem;}
.pin-done{display:none;align-items:center;gap:9px;margin-bottom:9px;padding:11px 14px;
  border:1px solid rgba(30,122,76,.4);background:rgba(30,122,76,.07);border-radius:11px;font-size:.74rem;color:var(--cream);}
.pin-done.show{display:flex;}
.pin-done .pd-c{color:#1E7A4C;}
.pin-done #pinTxt{flex:1;color:var(--muted);}
.pin-done a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;}
.modal.map-modal{z-index:500;}  /* two classes, so it beats .modal wherever it is declared */
.map-choose{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:18px clamp(20px,4vw,28px);}
@media(max-width:520px){.map-choose{gap:9px;}}
.mchoice{display:flex;align-items:center;gap:12px;text-align:start;border:1px solid var(--line);border-radius:14px;
  padding:14px 15px;background:rgba(14,58,44,.04);transition:border-color .3s,background .3s,transform .4s var(--ease);}
@media(hover:hover){ .mchoice:hover{border-color:var(--accent);background:rgba(14,58,44,.09);transform:translateY(-2px);} }   /* a tap must not leave it stuck lifted */
.mchoice.on{border-color:var(--accent);background:rgba(14,58,44,.13);}
.mchoice .mchoice-i{color:var(--accent-ink);font-size:1.05rem;flex:none;}
.mchoice .mchoice-t{display:block;}
.mchoice .mchoice-t b{display:block;font-weight:400;font-size:.86rem;color:var(--cream);line-height:1.3;}
.mchoice .mchoice-t small{display:block;font-size:.66rem;color:var(--muted);margin-top:3px;}
.mchoice.primary{border-color:rgba(14,58,44,.45);background:rgba(14,58,44,.09);}
.map-mc{max-width:620px;}
.map-wrap{position:relative;height:min(56vh,420px);background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
/* plain OpenStreetMap tiles are bright; tone them down so the sheet still reads as ours */
.map-wrap.light-tiles #mapCanvas{filter:brightness(.72) saturate(.85) contrast(1.05);}
.map-wrap.tiles-dead #mapCanvas{opacity:.25;}
#mapCanvas{position:absolute;inset:0;}
/* Leaflet paints its panes at z-index 400–700 inside #mapCanvas, so the pin has
   to sit above that or it simply never shows. */
.map-crosshair{position:absolute;left:50%;top:50%;pointer-events:none;z-index:1000;
  transform:translate(-50%,-100%);width:44px;height:58px;filter:drop-shadow(0 6px 10px rgba(14,58,44,.16));
  transition:transform .18s var(--ease);}
.map-wrap.dragging .map-crosshair{transform:translate(-50%,-118%);}
/* the exact point the pin refers to */
.map-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:999;
  width:12px;height:12px;border-radius:999px;background:rgba(14,58,44,.28);border:1.5px solid var(--gold);}
.map-dot::after{content:"";position:absolute;inset:-13px;border-radius:999px;border:1.5px solid rgba(14,58,44,.35);
  animation:pinPulse 2s ease-out infinite;}
@keyframes pinPulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.map-locate{position:absolute;right:14px;bottom:14px;z-index:1001;width:44px;height:44px;border-radius:999px;
  background:rgba(251,244,232,.82);border:1px solid var(--line);color:var(--accent-ink);font-size:1.05rem;backdrop-filter:blur(6px);}
html[dir="rtl"] .map-locate{right:auto;left:14px;}
.map-locate:hover{border-color:var(--accent);}
.map-out{display:none;padding:20px clamp(20px,4vw,28px);border-top:1px solid var(--line);
  background:rgba(200,52,74,.06);}
.map-out.show{display:block;}
.map-out p{font-family:var(--disp);font-size:1.2rem;color:var(--cream);margin-bottom:7px;}
html[dir="rtl"] .map-out p{font-family:var(--ar-disp);}
.map-out small{display:block;font-size:.78rem;color:var(--muted);line-height:1.75;margin-bottom:16px;}
.oa-btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
@media(max-width:520px){.oa-btns{flex-direction:column;align-items:stretch;}.oa-btns .mag{justify-content:center;}}
.map-read .oa b{color:#B42D3F;display:block;margin-bottom:3px;}
.map-foot{padding:18px clamp(20px,4vw,28px) 22px;}
.map-read{font-size:.8rem;color:var(--muted);line-height:1.65;margin-bottom:16px;min-height:2.6em;}
.map-read b{color:var(--cream);font-weight:400;}
.map-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.map-fallback{padding:26px 22px;text-align:center;color:var(--muted);font-size:.82rem;line-height:1.8;}
.map-fallback b{display:block;font-family:var(--disp);font-size:1.15rem;color:var(--cream);margin-bottom:8px;}
@media(max-width:560px){
  .map-wrap{height:46vh;}
  .map-actions{flex-direction:column;align-items:stretch;}
  .map-actions .mag{justify-content:center;}
}
/* ---- variety card on phones ----
   Same card as the desktop one, scaled down: a rounded square photo, then the details.
   Two things matter beyond size. First, real margin around the card — the backdrop is how
   you close it, and 16px is not a target anyone can hit with a thumb. Second, every
   variety must look identical, so the photo is inset and rounded on all four corners
   rather than bleeding into the card edge, which only looks right when the photo happens
   to have a pale background. */
@media(max-width:620px){
  .modal{padding:24px 22px;align-items:center;}    /* the tappable ring around the card */
  .modal .mc{width:100%;max-width:380px;margin:auto;border-radius:20px;}
  /* The photograph, whole and filling its frame.

     Two wrong answers came before this one. A landscape crop cut the edges off
     the dish. Containing the square photo inside that landscape box kept all of
     it but left a dark bar down each side — which is what a shop looks like when
     nobody checked. The frame is square because the photograph is square: no
     crop, no bars, edge to edge.

     That makes the sheet taller than the screen, so the price and Add to basket
     are pinned to the bottom of it instead — the picture gets its room and the
     button never leaves. */
  .info-hero.has-photo{width:calc(100% - 18px);margin:9px 9px 0;border-radius:15px;
    height:auto!important;max-height:none;aspect-ratio:1/1;overflow:hidden;flex:none;}
  .info-hero.has-photo .date-photo,
  .info-hero.has-photo .info-art img{object-fit:cover!important;}

  /* the card becomes a column: photo, then everything else scrolling under it */
  #infoModal .mc{max-height:calc(100dvh - 44px);display:flex;flex-direction:column;}
  #infoModal .info-card{display:flex;flex-direction:column;min-height:0;overflow:hidden;}
  #infoModal .info-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;}
  #infoModal .info-buy{position:sticky;bottom:0;z-index:2;margin:14px -16px 0;padding:11px 16px 4px;
    background:linear-gradient(180deg,rgba(251,244,232,0),var(--bg) 22%);}
  #infoModal .info-buymeta{margin-inline:-16px;padding-inline:16px;background:var(--bg);
    position:sticky;bottom:0;z-index:1;}
  #infoModal .info-card.is-out .info-buy,
  #infoModal .info-card.is-out .info-buymeta{position:static;background:none;}
  .info-hero.has-photo .info-art,
  .info-hero.has-photo .date-photo{border-radius:15px;}
  .info-x{top:11px;right:11px;width:34px;height:34px;font-size:.8rem;}
  html[dir="rtl"] .info-x{right:auto;left:11px;}
  .info-season{top:15px;left:15px;font-size:.55rem;padding:5px 11px;}
  html[dir="rtl"] .info-season{left:auto;right:15px;}
}
/* a very small phone still needs the ring, just a thinner one */
@media(max-width:380px){
  .modal{padding:18px 14px;}
  .modal .mc{width:calc(100% - 28px);}
}

/* ---- the same product sheet, on a desktop ----

   A phone is a column, so the sheet is a column: photograph, then the reading,
   with the price pinned to the bottom. Putting that same column on a 1280 screen
   made a 560px-tall photograph and pushed the price and Add to basket about 250px
   below the fold — the two things the sheet exists for, off screen, on the widest
   display we have. Width was going spare while height was the thing running out.

   So above 1024 the sheet turns on its side. The photograph takes one column at
   its true 1:1 — still whole, still uncropped, still no bars — and the reading
   takes the other, with the buy bar resting at the bottom of it. Same content,
   same type, same spec rows; only the arrangement answers to the screen. */
@media(min-width:1024px){
  #infoModal{align-items:center;padding:34px 24px;}
  /* Height comes from the photograph, not from the words.

     Side by side in a grid, the row is as tall as whichever column is taller — so
     a long description made the sheet 760px while the square photograph stayed
     558px, and the 200px left over showed as dark bands above and below it. Bars
     around the picture are the one thing this sheet is not allowed to have.

     So the photograph stays in flow and sets the height, and the reading is taken
     out of flow beside it: it can be shorter (space at the bottom) or longer (it
     scrolls), and neither changes the frame. 54% of the card, so 54% is also the
     height — which is why the width is also capped against the viewport: at 159vh
     the sheet is 86vh tall and still clears the screen on a short laptop. */
  #infoModal .mc{width:min(1040px,100%,159vh);}
  #infoModal .info-card{position:relative;display:block;}
  #infoModal .info-hero{width:54%;}
  #infoModal .info-hero.has-photo{aspect-ratio:1/1;height:auto;max-height:none;}
  /* inline-start/end rather than left/right, so Arabic mirrors without a second rule */
  #infoModal .info-body{position:absolute;inset-block:0;inset-inline-start:54%;inset-inline-end:0;
    display:flex;flex-direction:column;min-height:0;overflow-y:auto;
    overscroll-behavior:contain;padding:26px 28px 0;}
  /* the reading is what scrolls; the price does not leave */
  #infoModal .info-buy{position:sticky;bottom:0;z-index:2;margin:18px -28px 0;
    padding:14px 28px 6px;background:linear-gradient(180deg,rgba(251,244,232,0),var(--bg) 24%);}
  #infoModal .info-buymeta{position:sticky;bottom:0;z-index:1;margin:0 -28px;
    padding:10px 28px 16px;background:var(--bg);border-top:0;font-size:.6rem;gap:14px;}
  #infoModal .info-card.is-out .info-buy,
  #infoModal .info-card.is-out .info-buymeta{position:static;background:none;}
  #infoModal .info-x{top:16px;right:16px;}
  html[dir="rtl"] #infoModal .info-x{right:auto;left:16px;}
  /* mirrored: the photograph leads on the right in Arabic */
  html[dir="rtl"] #infoModal .info-hero{grid-column:1;}
  /* a desktop row can afford a wider label column and more air between rows */
  #infoModal .fact{grid-template-columns:112px 1fr;padding:12px 0;}
  /* The tasting-box sheet is one column on every screen. The two-column rule above
     takes .info-body out of flow and parks it beside a square photograph; this
     sheet's picture is a reel that runs the full width of the card, so there is no
     photograph to sit beside and the reading would otherwise be laid straight over
     the pictures. One column, and the buy bar rides in flow under it. */
  #infoModal .info-card.is-reel{display:flex;flex-direction:column;max-height:86vh;}
  #infoModal .info-card.is-reel .info-body{position:static;inset:auto;flex:1 1 auto;
    padding:22px 28px 22px;}
  #infoModal .info-card.is-reel .info-buy,
  #infoModal .info-card.is-reel .info-buymeta{position:static;background:none;margin-inline:0;
    padding-inline:0;}
}

/* ---- address search ----
   The one route that needs no permission, no GPS and no dragging: type where you live and
   pick it from a list. This is how most people expect to enter an address, and it is the
   answer when the browser refuses location. */
.addr-search{position:relative;display:flex;align-items:center;gap:9px;
  margin:14px clamp(20px,4vw,28px) 0;padding:0 14px;
  background:rgba(14,58,44,.05);border:1px solid var(--line);border-radius:14px;}
.addr-search:focus-within{border-color:var(--accent);}
.addr-search .as-i{color:var(--accent-ink);font-size:1.1rem;flex:none;}
.addr-search input{flex:1;min-width:0;background:none;border:none;padding:14px 0;
  color:var(--cream);font-family:var(--ar-ui),sans-serif;font-size:.95rem;}
html:not([dir="rtl"]) .addr-search input{font-family:inherit;}
.addr-search input:focus{outline:none;}
.addr-search input::-webkit-search-cancel-button{display:none;}
.as-x{display:none;flex:none;color:var(--muted);font-size:.85rem;padding:4px;}
.addr-search.has-text .as-x{display:block;}
.as-results{display:none;margin:8px clamp(20px,4vw,28px) 0;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;max-height:210px;overflow-y:auto;background:rgba(251,244,232,.6);}
.as-results.show{display:block;}
.as-results button{display:block;width:100%;text-align:start;padding:12px 15px;
  border-bottom:1px solid var(--line);background:none;color:var(--cream);
  font-family:var(--ar-ui),sans-serif;font-size:.86rem;line-height:1.5;}
html:not([dir="rtl"]) .as-results button{font-family:inherit;}
.as-results button:last-child{border-bottom:none;}
.as-results button:hover,.as-results button:focus{background:rgba(14,58,44,.1);outline:none;}
.as-results button b{display:block;font-weight:400;color:var(--cream);}
.as-results button small{display:block;color:var(--muted);font-size:.74rem;margin-top:2px;}
.as-note{padding:12px 15px;color:var(--muted);font-size:.78rem;}
@media(max-width:620px){
  .addr-search{margin:10px 12px 0;padding:0 12px;}
  .addr-search input{font-size:16px;padding:12px 0;}   /* 16px: no iOS zoom */
  .as-results{margin:7px 12px 0;max-height:170px;}
  .as-results button{padding:11px 13px;font-size:.82rem;}
}

/* ---- National Address short code ---- */
.mchoice-wide{grid-column:1 / -1;}
.na-box{display:none;padding:0 clamp(20px,4vw,28px) 16px;}
.na-box.show{display:block;}
.na-label{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
html[dir="rtl"] .na-label{font-family:var(--ar-ui);font-size:.72rem;letter-spacing:0;}
.na-row{display:flex;gap:10px;align-items:stretch;}
.na-row input{flex:1;min-width:0;background:rgba(14,58,44,.05);border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;color:var(--cream);font-family:var(--mono);
  font-size:1.05rem;letter-spacing:.22em;text-transform:uppercase;text-align:center;}
.na-row input:focus{outline:none;border-color:var(--accent);}
.na-row input.err{border-color:#B42D3F;}
.na-go{flex:none;}
.na-hint{margin-top:9px;font-size:.72rem;line-height:1.6;color:var(--muted);}
.na-hint.bad{color:#B42D3F;}
.na-hint.good{color:#8bc98b;}
@media(max-width:620px){
  .na-box{padding:0 13px 12px;}
  .na-row input{font-size:16px;padding:12px 12px;letter-spacing:.18em;}  /* 16px: no iOS zoom */
  .na-hint{font-size:.68rem;}
}

/* ---- permission priming sheet ----
   A web page cannot create the native iOS permission dialog, and it cannot add a reason
   line to Safari's own prompt — that string comes from a native app's Info.plist. What it
   CAN do, and what every serious app does on the web, is ask first in its own sheet, then
   call getCurrentPosition from inside that tap so Safari's prompt appears immediately
   after. The customer reads why, then answers one system prompt.
   Asking first also protects the one shot we get: Safari remembers a refusal. */
.perm-ov{position:fixed;inset:0;z-index:900;display:none;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);padding:0;}
.perm-ov.show{display:flex;}
@media(min-width:621px){ .perm-ov{align-items:center;padding:24px;} }
.perm-card{width:min(380px,100%);margin:0 0 max(10px,env(safe-area-inset-bottom));
  background:rgba(44,44,46,.86);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  border-radius:24px;overflow:hidden;color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  box-shadow:0 24px 60px rgba(14,58,44,.16);transform:translateY(18px) scale(.97);opacity:0;
  transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .28s;}
.perm-ov.show .perm-card{transform:none;opacity:1;}
html[dir="rtl"] .perm-card{font-family:var(--ar-ui),-apple-system,sans-serif;}
.perm-top{padding:20px 20px 0;}
.perm-icon{width:58px;height:58px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#4da2ff,#0a84ff);box-shadow:0 4px 14px rgba(10,132,255,.4);margin-bottom:15px;}
.perm-icon svg{width:32px;height:32px;fill:#fff;}
.perm-h{font-size:1.28rem;font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:0 0 7px;}
.perm-d{font-size:.94rem;line-height:1.4;color:rgba(235,235,245,.62);margin:0 0 16px;}
/* a still preview of the map, so it is obvious what the location is for */
.perm-map{position:relative;height:132px;border-radius:13px;overflow:hidden;margin:0 20px 6px;
  background:#2e3440;border:1px solid rgba(255,255,255,.08);}
.perm-map svg{position:absolute;inset:0;width:100%;height:100%;}
.perm-map .perm-dot{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  border-radius:999px;background:#0a84ff;border:3px solid #fff;box-shadow:0 1px 5px rgba(14,58,44,.16);}
.perm-map .perm-tag{position:absolute;top:9px;left:9px;background:rgba(0,0,0,.62);border-radius:999px;
  padding:4px 10px;font-size:.66rem;font-weight:600;color:#fff;}
html[dir="rtl"] .perm-map .perm-tag{left:auto;right:9px;}
.perm-btns{padding:14px 12px 12px;display:grid;gap:9px;}
.perm-btns button{width:100%;min-height:50px;border-radius:14px;font-size:1.02rem;font-weight:500;
  background:rgba(118,118,128,.32);color:#fff;border:none;
  font-family:inherit;transition:background .2s;}
.perm-btns button:active{background:rgba(118,118,128,.5);}
.perm-btns .perm-yes{font-weight:600;color:#4da2ff;}
.perm-note{padding:0 20px 16px;font-size:.72rem;line-height:1.5;color:rgba(235,235,245,.45);text-align:center;}

/* ---- location sheet on phones ----
   Header + two choices + a 46vh map + a footer added up to more than a phone screen.
   A centred modal that is taller than the viewport overflows equally in both directions,
   which pushes its own ✕ above the top of the screen and makes the thing hard to escape.
   So on phones the sheet is capped to the viewport and laid out as a column: everything
   keeps its natural height and the map absorbs whatever is left. */
@media(max-width:620px){
  .modal.map-modal{padding:8px;align-items:stretch;}
  .map-modal .map-mc{display:flex;flex-direction:column;margin:auto 0;
    max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);}
  .map-modal .dh{flex:0 0 auto;padding:13px 16px;}
  .map-modal .dh h3{font-size:1.15rem;}
  .map-choose{flex:0 0 auto;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px;}
  .map-modal .mchoice{padding:9px 10px;gap:9px;border-radius:12px;}
  .map-modal .mchoice .mchoice-i{font-size:.92rem;}
  .map-modal .mchoice .mchoice-t b{font-size:.76rem;line-height:1.25;}
  .map-modal .mchoice .mchoice-t small{font-size:.6rem;margin-top:2px;}
  .map-modal .map-wrap{flex:1 1 auto;height:auto;min-height:160px;}
  .map-modal .map-out{flex:0 0 auto;padding:14px 14px;overflow-y:auto;}
  .map-modal .map-out p{font-size:.98rem;}
  .map-modal .map-out small{font-size:.7rem;line-height:1.6;margin-bottom:11px;}
  .map-modal .map-foot{flex:0 0 auto;padding:11px 13px 13px;}
  .map-modal .map-read{min-height:0;margin-bottom:9px;font-size:.73rem;line-height:1.5;}
  .map-modal .map-actions{gap:8px;}
  /* a bigger, unmissable close target — this is the way out */
  .map-modal .dh .x{width:38px;height:38px;font-size:.95rem;}
}
/* the choice buttons stack on very small phones only if they truly cannot fit */
@media(max-width:360px){ .map-modal .map-choose{grid-template-columns:1fr;} }

/* ---- tasting flight ---- */
.flight-card{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(24px,4vw,52px);align-items:center;
  border:1px solid var(--line);border-radius:24px;padding:clamp(22px,3.5vw,40px);
  background:linear-gradient(150deg,rgba(14,58,44,.08),rgba(251,244,232,.4));margin-top:28px;}
@media(max-width:820px){.flight-card{grid-template-columns:1fr;}}
/* A grid item's min-width is auto, so the nowrap fitted line inside .fl-body set the
   track's floor and the whole card ran 73px off a 360px screen. The fitting code could
   not rescue it either — it shrinks to the space it is given, and the space was growing
   with the text. Bound the tracks and both problems go at once. */
.flight-card>*{min-width:0;}
.fl-visual{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.fl-visual{min-width:0;}
/* min-width:0 is not optional here: a grid item defaults to min-width:auto, so the
   photo's intrinsic 1200px width sets the track floor and the row overflows sideways. */
.fl-visual .fv{position:relative;display:block;min-width:0;aspect-ratio:1/1;border-radius:var(--img-r);overflow:hidden;border:1px solid var(--line);
  background:rgba(14,58,44,.05);transition:transform .5s var(--ease);}
@media(hover:hover){ .fl-visual .fv:hover{transform:translateY(-4px);} }   /* a tap must not leave a card stuck lifted */
.fl-visual .fv img,.fl-visual .fv svg{width:100%;height:100%;object-fit:cover;display:block;}
.fl-visual .fv span{position:absolute;left:9px;bottom:9px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cream);background:rgba(251,244,232,.72);border-radius:999px;padding:4px 9px;backdrop-filter:blur(4px);}
html[dir="rtl"] .fl-visual .fv span{left:auto;right:9px;}
.fl-lead{font-family:var(--disp);font-size:clamp(1.02rem,2vw,1.4rem);line-height:1.5;color:var(--cream);}
/* Two per row, on every screen and both languages. Stacked one-per-row the four varieties
   pushed the price and the Add button off the bottom of a phone. */
.fl-list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;}
@media(max-width:620px){
  .fl-list{gap:9px 12px;margin-top:15px;}
  .fl-list li{font-size:.78rem;gap:7px;}
  .fl-list li small{font-size:.68rem;}
  html[dir="rtl"] .fl-list li{font-size:.84rem;}
  html[dir="rtl"] .fl-list li small{font-size:.74rem;}
}
.fl-list li{display:flex;align-items:baseline;gap:9px;font-size:.86rem;color:rgba(14,58,44,.85);}
.fl-list li i{font-style:normal;color:var(--accent-ink);font-size:.7rem;}
.fl-list li b{font-weight:400;color:var(--cream);}
.fl-list li small{color:rgba(14,58,44,.78);font-size:.74rem;}
.fl-note{display:flex;gap:11px;align-items:flex-start;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.8rem;color:var(--muted);line-height:1.7;}
.fl-note .fl-i{color:var(--accent-ink);flex:none;}
.fl-buy{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px;}
.fl-price{font-size:2.1rem;color:var(--gold-ink);}
@media(max-width:560px){
  .fl-visual{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .fl-buy{gap:14px;}
  .fl-buy .mag{flex:1;justify-content:center;}
  .fl-price{font-size:1.85rem;}
}

/* ---- policy buttons + popup ---- */
.policy-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px;}
@media(max-width:820px){.policy-btns{grid-template-columns:1fr;}}
.policy-btn{display:flex;align-items:center;gap:16px;text-align:start;width:100%;
  border:1px solid var(--line);border-radius:18px;padding:22px 22px;background:rgba(14,58,44,.03);
  transition:border-color .4s,background .4s,transform .5s var(--ease);}
@media(hover:hover){ .policy-btn:hover{border-color:var(--accent);background:rgba(14,58,44,.07);transform:translateY(-3px);} }   /* a tap must not leave it stuck lifted */
.policy-btn .pb-i{color:var(--accent-ink);font-size:1rem;flex:none;}
.policy-btn .pb-t{flex:1;display:block;}
.policy-btn .pb-t b{display:block;font-family:var(--disp);font-weight:400;font-size:1.3rem;color:var(--cream);margin-bottom:4px;}
html[dir="rtl"] .policy-btn .pb-t b{font-family:var(--ar-disp);}
.policy-btn .pb-t small{display:block;font-size:.72rem;color:var(--muted);line-height:1.6;}
.policy-btn .pb-a{color:var(--accent-ink);font-size:1.05rem;flex:none;transition:transform .4s var(--ease);}
.policy-btn:hover .pb-a{transform:translateX(4px);}
html[dir="rtl"] .policy-btn .pb-a{transform:scaleX(-1);}
html[dir="rtl"] .policy-btn:hover .pb-a{transform:scaleX(-1) translateX(4px);}

.policy-mc{max-width:600px;}
.pol-dl{margin:0;}
.pol-dl dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:20px;}
.pol-dl dt:first-child{margin-top:0;}
.pol-dl dd{margin:6px 0 0;color:rgba(14,58,44,.88);font-size:.92rem;line-height:1.75;}
.pol-dl dd b{color:var(--gold-ink);}
.pol-note{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:.76rem;color:var(--muted);line-height:1.8;}
.pol-contact{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.pol-contact a{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;padding:12px 20px;font-size:.76rem;letter-spacing:.08em;transition:border-color .4s,background .4s;}
.pol-contact a:hover{border-color:var(--accent);background:rgba(14,58,44,.06);}
@media(max-width:560px){
  .policy-btn{padding:18px 18px;gap:13px;}
  .policy-btn .pb-t b{font-size:1.15rem;}
  .pol-contact a{width:100%;justify-content:center;}
}
.promo-nudge{margin:0 clamp(20px,4vw,28px);padding:11px 14px;border:1px dashed rgba(14,58,44,.35);
  border-radius:12px;background:rgba(14,58,44,.05);font-size:.72rem;line-height:1.55;color:var(--muted);}
.promo-nudge b{color:var(--gold-ink);letter-spacing:.06em;}
.promo-hint{font-size:.65rem;color:var(--muted);line-height:1.55;margin:0 0 6px;}
/* Where we deliver, said once, in the place the customer used to be asked. It carries
   the same ring as an input so it sits in the form's rhythm, but no border weight and
   no interaction — it is information, not a decision. */
.ship-fact{display:flex;align-items:center;gap:9px;margin:0 0 18px;padding:11px 14px;
  border:1px dashed var(--line);border-radius:12px;background:rgba(14,58,44,.04);
  font-size:.74rem;line-height:1.5;color:var(--muted);}
.ship-fact .sf-i{color:var(--accent-ink);font-size:.9rem;line-height:1;flex:none;}
html[dir="rtl"] .ship-fact{font-family:var(--ar-ui);font-size:.8rem;}
@media(max-width:720px){ .ship-fact{font-size:.78rem;padding:12px 14px;} }
.promo-row{display:flex;gap:9px;}
.promo-row input{flex:1;}
.promo-btn{border:1px solid var(--line);border-radius:11px;padding:0 18px;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);transition:border-color .4s,background .4s;}
.promo-btn:hover{border-color:var(--accent);background:rgba(14,58,44,.06);}
.fld .m.good{color:#1E7A4C;}
/* "optional" beside a field label. Quieter than the label, on the same line, so a
   customer who does not know their short code knows instantly they can skip it. */
.fld label .opt{font-family:var(--mono);font-size:.95em;letter-spacing:.06em;
  text-transform:lowercase;color:var(--muted);opacity:.8;margin-inline-start:8px;}
/* The short code is 8 characters and never a word — monospaced and tracked out so a
   mistyped character is visible before it is submitted. */
#q_na{font-family:var(--mono);letter-spacing:.22em;text-transform:uppercase;}
#q_na::placeholder{letter-spacing:.22em;opacity:.35;}
html[dir="rtl"] #q_na{direction:ltr;text-align:right;}


/* ---- phone polish for the newer pieces ---- */
@media(max-width:560px){
  .known-strip{font-size:.72rem;padding:9px 12px;gap:8px;align-items:flex-start;}
  .known-strip #knownTxt{line-height:1.5;}
  .promo-nudge{margin:0 18px;padding:10px 12px;font-size:.7rem;}
  .rc-sum{padding:12px 13px;}
  .rc-sum .row{font-size:.74rem;}
  .rc-sum .row.t{font-size:1.15rem;}
  .fp-code{flex-wrap:wrap;gap:8px;}
  .fp-code span{font-size:.95rem;letter-spacing:.1em;}
  .map-out p{font-size:1.05rem;}
  .map-out small{font-size:.74rem;}
  .mchoice{padding:12px 13px;gap:11px;}
  .mchoice .mchoice-t b{font-size:.82rem;}
  .mchoice .mchoice-t small{font-size:.64rem;}
  .pin-done{flex-wrap:wrap;font-size:.7rem;}
  .pin-done a{width:100%;text-align:center;padding-top:4px;}
  .paychips button{min-height:56px;padding:12px 14px;}
  .pay-mada{--mark-h:30px;}
  .pay-apple{--mark-h:23px;}
  .pay-stcbank{--mark-h:22px;}
      .fl-price{font-size:1.7rem;}
  .flight-card{border-radius:18px;}
  .policy-btn{border-radius:14px;}
  .rev-locked{padding:22px 18px;}
  .rev-locked p{font-size:1.05rem;}
  .no-voices{padding:28px 20px;}
  .no-voices p{font-size:1.15rem;}
  .sumr{font-size:.86rem;}
  .mch{padding:15px 18px;}
  .mch h3{font-size:1.2rem !important;}
  .done-box{max-width:100%;}
  .rowl{font-size:.78rem;}
}
@media(max-width:380px){
  .paychips{gap:8px;}
  .paychips button{min-height:54px;padding:11px 10px;}
  .pay-mada{--mark-h:27px;}
  .pay-apple{--mark-h:21px;}
  .pay-stcbank{--mark-h:20px;}
  .fp-code span{font-size:.88rem;}
  .mch h3{font-size:1.1rem !important;}
}

/* ---- receipt (styled after Saudi store invoices — Salla / Zid conventions) ---- */
.rc-ov{position:fixed;inset:0;z-index:600;background:rgba(9,38,29,.86);backdrop-filter:blur(8px);display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:26px 16px;}
.rc-ov.show{display:flex;}
.rc-sheet{position:relative;width:min(620px,100%);}
.rc-x{position:absolute;top:-6px;right:-6px;z-index:2;width:40px;height:40px;border:1px solid var(--line);border-radius:999px;background:var(--bg);}
html[dir="rtl"] .rc-x{right:auto;left:-6px;}
.rc-paper{background:#fff;color:#20180f;border-radius:14px;overflow:hidden;font-family:var(--mono);font-size:.78rem;line-height:1.7;}
html[dir="rtl"] .rc-paper{font-family:var(--ar-ui);}

/* header band — logo centred, the way Saudi stores print them */
.rc-top{background:var(--bg);padding:26px 24px 22px;text-align:center;}
.rc-top svg{width:52px;height:56px;display:block;margin:0 auto 10px;}
.rc-top .n{font-family:var(--disp);font-size:1.5rem;letter-spacing:.16em;color:#F3E9D6;}
.rc-top .ar{font-family:var(--ar);font-size:.95rem;color:#D9A441;margin-top:2px;}
.rc-top .s{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(14,58,44,.55);margin-top:8px;}

.rc-band{background:#F7F2E8;border-bottom:1px solid #E6DCC8;padding:14px 24px;text-align:center;}
.rc-band b{display:block;font-family:var(--disp);font-size:1.2rem;color:#20180f;letter-spacing:.02em;}
.rc-band span{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);}

.rc-body{padding:22px 24px 26px;}
.rc-kv{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid #E6DCC8;border-radius:10px;overflow:hidden;margin-bottom:18px;}
.rc-kv div{padding:11px 14px;border-bottom:1px solid #E6DCC8;}
.rc-kv div:nth-child(odd){border-right:1px solid #E6DCC8;}
html[dir="rtl"] .rc-kv div:nth-child(odd){border-right:0;border-left:1px solid #E6DCC8;}
.rc-kv div:nth-last-child(-n+2){border-bottom:0;}
@media(max-width:520px){
  .rc-kv{grid-template-columns:1fr;}
  .rc-kv div{border-right:0 !important;border-left:0 !important;}
  .rc-kv div:nth-last-child(2){border-bottom:1px solid #E6DCC8;}
}
.rc-kv span{display:block;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:3px;}
.rc-kv b{font-weight:400;color:#20180f;font-size:.8rem;}

.rc-tb{width:100%;border-collapse:collapse;border:1px solid #E6DCC8;border-radius:10px;overflow:hidden;}
.rc-tb thead th{background:#F7F2E8;text-align:left;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);font-weight:400;padding:11px 14px;}
html[dir="rtl"] .rc-tb thead th{text-align:right;}
.rc-tb td{padding:13px 14px;border-top:1px solid #EFE7D6;color:#20180f;vertical-align:top;}
.rc-tb .r{text-align:right;white-space:nowrap;}
html[dir="rtl"] .rc-tb .r{text-align:left;}
.rc-tb .nm{font-family:var(--disp);font-size:1rem;}
html[dir="rtl"] .rc-tb .nm{font-family:var(--ar-disp);}
.rc-tb .sz{display:block;color:var(--ink-muted);font-size:.68rem;letter-spacing:.06em;}

.rc-sum{margin-top:16px;border:1px solid #E6DCC8;border-radius:10px;padding:14px 16px;background:#FCFAF5;}
.rc-sum .row{display:flex;justify-content:space-between;padding:6px 0;color:#4a3f33;font-size:.78rem;}
.rc-sum .row.t{border-top:1px solid #E6DCC8;margin-top:8px;padding-top:12px;font-family:var(--disp);font-size:1.3rem;color:#20180f;}
html[dir="rtl"] .rc-sum .row.t{font-family:var(--ar-disp);}
.rc-sum .free{color:#2e7d32;}
.rc-paid{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:9px;background:#EDF7ED;border:1px solid #CBE5CB;color:#2e7d32;border-radius:999px;padding:10px 16px;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;}

.rc-thanks{text-align:center;margin-top:22px;padding-top:18px;border-top:1px dashed #E6DCC8;}
.rc-thanks b{display:block;font-family:var(--disp);font-size:1.25rem;color:#20180f;margin-bottom:5px;}
html[dir="rtl"] .rc-thanks b{font-family:var(--ar-disp);}
.rc-thanks p{font-size:.72rem;color:var(--ink-muted);line-height:1.8;}
.rc-contact{margin-top:14px;text-align:center;font-size:.66rem;color:var(--ink-muted);line-height:1.9;}
.rc-contact b{color:#20180f;font-weight:400;}
.rc-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:20px;}
.done-sub{font-size:.88rem;color:var(--muted);line-height:1.7;max-width:360px;margin:0 auto;}
/* a plain three-step tracker, the way a shop tells you where the order stands */
.track{list-style:none;display:flex;gap:0;margin:22px auto 4px;padding:0;max-width:400px;counter-reset:t;}
.track li{flex:1;position:relative;text-align:center;padding-top:22px;opacity:.45;}
.track li.done{opacity:1;}
.track li::before{content:"";position:absolute;top:6px;left:0;right:50%;height:1px;background:var(--line);}
.track li::after{content:"";position:absolute;top:6px;left:50%;right:0;height:1px;background:var(--line);}
.track li:first-child::before,.track li:last-child::after{display:none;}
.track li.done::before,.track li.done::after{background:var(--accent);}
.track .tk-d{position:absolute;top:0;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg);z-index:1;}
.track li.done .tk-d{border-color:var(--accent);background:var(--accent);}
.track b{display:block;font-family:var(--mono);font-weight:700;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);}
html[dir="rtl"] .track b{font-family:var(--ar-ui);font-size:.68rem;letter-spacing:0;}
.track small{display:block;font-size:.58rem;color:var(--muted);margin-top:3px;line-height:1.45;}
html[dir="rtl"] .track small{font-size:.64rem;}
.done-help{display:block;margin:16px auto 0;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);text-decoration:underline;text-underline-offset:4px;}
.done-help:hover{color:var(--accent-ink);}
html[dir="rtl"] .done-help{font-family:var(--ar-ui);font-size:.72rem;letter-spacing:0;}
@media(max-width:520px){
  .track{margin-top:18px;}
  .track b{font-size:.55rem;}
  html[dir="rtl"] .track b{font-size:.62rem;}
  .track small{display:none;}
}
.done-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center;}
/* Printing / "Save as PDF".
   This block used to start with body>*{display:none} — but the receipt overlay lives
   inside <main>, and a display:none ancestor can never be undone by a descendant, so
   every printed page came out completely blank. visibility is the right tool: it is
   inherited, and a descendant CAN switch it back on. */
@media print{
  @page{ size:A4 portrait; margin:10mm; }
  html,body{background:#fff !important;height:auto !important;min-height:0 !important;overflow:visible !important;}
  body *{visibility:hidden !important;}
  #rcOv,#rcOv *{visibility:visible !important;}
  #rcOv{display:block !important;position:absolute !important;top:0 !important;left:0 !important;right:auto !important;bottom:auto !important;
        width:100% !important;max-width:none !important;background:#fff !important;backdrop-filter:none !important;
        padding:0 !important;margin:0 !important;overflow:visible !important;z-index:auto !important;}
  #rcOv .rc-sheet{width:100% !important;max-width:none !important;margin:0 !important;box-shadow:none !important;}
  #rcOv .rc-paper{border-radius:0 !important;box-shadow:none !important;}
  /* fixed-position decoration would otherwise reserve empty pages of its own */
  #shader,.grain,.vignette,.cursor,.cursor-ring,header,footer,.cartbar,.shipbar,
  .rc-x,.rc-actions,.first-popup,.toast{display:none !important;}
  /* keep the gold header and the paper white — browsers strip backgrounds by default */
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;}
  /* one receipt, one page: never break a row across the fold */
  .rc-tb tr,.rc-sum .row,.rc-kv>div,.rc-thanks,.rc-contact{break-inside:avoid;page-break-inside:avoid;}
}

/* ---- cta band ---- */
.band{text-align:center;padding:clamp(90px,12vw,160px) 0;}
.band h2{font-family:var(--disp);font-weight:300;font-size:clamp(2.4rem,8vw,7rem);line-height:.95;letter-spacing:-.02em;}
.band h2 .it{font-style:italic;color:var(--gold-ink);}
.band .sub{color:var(--muted);margin:22px auto 34px;max-width:440px;line-height:1.7;font-size:.92rem;}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:60px 0 34px;}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px;padding-bottom:44px;}
.foot-top h5{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:16px;transition:color .5s;}
.foot-top a,.foot-top p{display:block;font-size:.82rem;color:var(--muted);margin-bottom:9px;transition:color .3s;}
/* A footer link is a line of text 16px tall — fine to read, too thin to hit. Padding
   gives the target its height without opening a gap between the lines, because the
   margin comes off by the same amount. */
/* This used to be a phone-only rule, on the assumption that a 22px-tall link is
   only awkward under a thumb. It is awkward under any pointer that is not a mouse,
   and plenty of laptops have a touchscreen — so the target is 44px everywhere now.
   The padding grows the box and the negative margin takes the same amount back, so
   the column keeps the 31px rhythm it had. */
.foot-top a{padding:11px 0;margin-bottom:-13px;min-height:44px;
  display:flex;align-items:center;}
@media(max-width:720px){
  .foot-top a{padding:14px 0;margin-bottom:-5px;}
}
.foot-top a:hover{color:var(--gold-ink);}
.foot-logo{font-family:var(--disp);font-size:2.4rem;font-weight:300;margin-bottom:14px;display:flex;align-items:center;gap:.5em;flex-wrap:wrap;}
.foot-mark{width:1.25em;height:1.35em;flex:none;display:block;}
.news{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-top:10px;}
.news input{flex:1;background:transparent;border:none;padding:13px 18px;color:var(--cream);font-family:var(--mono);font-size:.8rem;outline:none;}
.news button{padding:0 20px;background:var(--gold);color:var(--on-fill);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;}
.news-ok{font-size:.72rem;color:var(--accent-ink);margin-top:10px;min-height:1em;}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:26px;border-top:1px solid var(--line);font-size:.7rem;letter-spacing:.08em;color:var(--muted);}
/* The WhatsApp button is fixed 26px off the bottom corner, so at the end of the
   page it comes to rest on the copyright row — on the right in English, on the
   left in Arabic, because it mirrors. Room below the last line, and it lands on
   nothing. */
.foot-bottom{padding-bottom:76px;}
.foot-bottom .tag{font-family:var(--disp);font-style:italic;color:var(--accent-ink);font-size:.95rem;}

/* ---- cart drawer ---- */
.ov{position:fixed;inset:0;background:rgba(9,38,29,.72);backdrop-filter:blur(4px);z-index:200;opacity:0;visibility:hidden;transition:.4s;}
.ov.show{opacity:1;visibility:visible;}
/* Off-canvas: keep it fully hidden & inert when closed so it can't create a right-edge
   sliver, catch edge taps, or be reached by screen readers. */
.drawer{position:fixed;top:0;right:0;height:100%;width:min(430px,100%);z-index:210;background:var(--surface);border-left:1px solid var(--line);transform:translateX(101%);transition:transform .6s var(--ease),visibility .6s;display:flex;flex-direction:column;visibility:hidden;pointer-events:none;}
.drawer.show{transform:none;visibility:visible;pointer-events:auto;}
.dh{padding:26px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
.dh h3{font-family:var(--disp);font-weight:300;font-size:1.7rem;}
.x{width:38px;height:38px;border:1px solid var(--line);border-radius:999px;display:flex;align-items:center;justify-content:center;transition:background .3s;}
.x:hover{background:rgba(14,58,44,.08);}
.db{flex:1;overflow-y:auto;padding:14px 26px;}
.empty{text-align:center;padding:70px 20px;color:var(--muted);}
.empty .disp{font-size:1.5rem;color:var(--cream);margin-bottom:8px;}
.ci{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);}
.ci .th{width:60px;height:60px;border-radius:14px;overflow:hidden;flex:none;border:1px solid var(--line);}
.ci .in{flex:1;min-width:0;}
.ci .in b{font-family:var(--disp);font-weight:400;font-size:1.2rem;display:block;}
.ci .in small{color:var(--muted);font-size:.82rem;}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;margin-top:8px;}
.qty button{width:28px;height:28px;color:var(--accent-ink);font-size:1rem;}
.qty span{min-width:26px;text-align:center;font-size:.9rem;}
.ci .rt{text-align:right;display:flex;flex-direction:column;justify-content:space-between;}
.ci .rt .lp{font-family:var(--disp);color:var(--gold-ink);font-size:1.32rem;}
.rm{font-size:.66rem;color:var(--muted);text-decoration:underline;transition:color .3s;}
.rm:hover{color:#B42D3F;}
.df{padding:22px 26px;border-top:1px solid var(--line);}
.rowl{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);margin-bottom:8px;}
.rowl.tot{font-family:var(--disp);font-size:1.6rem;color:var(--cream);margin:12px 0 16px;}
.blockbtn{width:100%;justify-content:center;}

/* ---- free-shipping progress bar ---- */
.shipbar{margin:0 26px 4px;}
.shipbar .sb-label{display:flex;justify-content:space-between;font-size:.66rem;color:var(--muted);margin-bottom:7px;letter-spacing:.02em;}
.shipbar .sb-track{height:5px;background:rgba(14,58,44,.15);border-radius:3px;overflow:hidden;}
.shipbar .sb-fill{height:100%;background:var(--gold);border-radius:3px;transition:width .5s var(--ease);}
.shipbar.done .sb-label{color:var(--gold-ink);}

/* ---- info modal buy meta (delivery + payment) ---- */
.info-buymeta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:.64rem;color:var(--muted);letter-spacing:.02em;}

/* ---- WhatsApp floating button ---- */
.wa-fab{position:fixed;right:26px;bottom:26px;width:54px;height:54px;border-radius:999px;background:#25D366;display:flex;align-items:center;justify-content:center;z-index:150;transition:transform .3s;}
@media(hover:hover){ .wa-fab:hover{transform:scale(1.07);} }   /* a tap must not leave it stuck lifted */
.wa-fab svg{width:26px;height:26px;fill:#fff;}
html[dir="rtl"] .wa-fab{right:auto;left:26px;}
@media(max-width:760px){.wa-fab{right:16px;bottom:16px;width:48px;height:48px;} html[dir="rtl"] .wa-fab{left:16px;right:auto;}}

/* ---- corporate gifting nav pill ---- */
.corp-pill{border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);transition:border-color .4s,background .4s;}
.corp-pill:hover{border-color:var(--gold);background:rgba(14,58,44,.08);}

/* ---- corporate gifting section ---- */
.corp-band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:64px 0;}
.corp-inner{max-width:640px;margin:0 auto;text-align:center;padding:0 24px;}
.corp-inner h2{margin-bottom:14px;}
.corp-inner p{color:var(--muted);font-size:.92rem;line-height:1.7;margin-bottom:28px;}

/* ---- first-order popup ---- */
.first-popup{position:fixed;left:22px;bottom:22px;max-width:300px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;z-index:150;transform:translateY(140%);transition:transform .6s var(--ease);}
.first-popup.show{transform:none;}
html[dir="rtl"] .first-popup{left:auto;right:22px;}
.first-popup .fp-x{position:absolute;top:4px;right:4px;width:44px;height:44px;color:var(--muted);font-size:.95rem;
  display:flex;align-items:center;justify-content:center;}
html[dir="rtl"] .first-popup .fp-x{right:auto;left:4px;}
.first-popup h4{font-family:var(--disp);font-weight:400;font-size:1.15rem;margin-bottom:6px;color:var(--gold-ink);}
.first-popup p{font-size:.78rem;color:var(--muted);margin-bottom:12px;line-height:1.5;}
.first-popup .fp-row{display:flex;gap:8px;}
.first-popup .fp-row input,.first-popup .fp-row button{min-height:44px;}
.first-popup .fp-row button{font-size:.74rem;}
.first-popup input{flex:1;background:transparent;border:1px solid var(--line);border-radius:999px;padding:10px 14px;color:var(--cream);font-size:1rem;outline:none;min-width:0;}
.first-popup button{padding:0 16px;background:var(--gold);color:var(--on-fill);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;border-radius:999px;}
.first-popup .fp-ok{font-size:.7rem;color:var(--accent-ink);margin-top:8px;min-height:1em;}
@media(max-width:480px){.first-popup{left:12px;right:12px;max-width:none;} html[dir="rtl"] .first-popup{right:12px;left:12px;}}

/* ---- checkout ---- */
.modal{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;opacity:0;visibility:hidden;transition:.4s;}
.modal.show{opacity:1;visibility:visible;}
.mc{width:min(560px,100%);background:var(--surface);border:1px solid var(--line);border-radius:22px;margin:auto;overflow:hidden;transform:translateY(24px);transition:transform .5s var(--ease);}
.modal.show .mc{transform:none;}
.mch{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 24px;border-bottom:1px solid var(--line);}
.mch .sec{display:flex;align-items:center;gap:8px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);}
.mb{padding:20px 24px 24px;}
.fld{margin-bottom:12px;}
.fld label{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);
  opacity:.72;margin-bottom:6px;font-weight:500;}
/* The order, stated first. Sticky so it survives the scroll down the form. */
.co-top{position:sticky;top:0;z-index:4;margin:-2px -2px 18px;padding:14px 16px;
  background:linear-gradient(180deg,rgba(14,58,44,.10),rgba(14,58,44,.045));
  border:1px solid rgba(14,58,44,.26);border-radius:14px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.co-top-r{display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
.co-top-r span{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.co-top-r b{font-family:var(--disp);font-size:1.5rem;font-weight:400;color:var(--gold-ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.co-top-note{margin-top:6px;font-size:.76rem;color:var(--muted);line-height:1.45;
  display:flex;flex-direction:column;gap:2px;}
.co-top-note .l2{opacity:.82;}
.co-top-note b{color:var(--cream);font-weight:600;}
@media(max-width:520px){ .co-top{margin:-2px -2px 14px;padding:12px 14px;} .co-top-r b{font-size:1.3rem;} }
.fld input,.fld select{width:100%;background:rgba(14,58,44,.055);border:1px solid rgba(14,58,44,.24);
  border-radius:10px;padding:12px 14px;color:var(--cream);font-family:var(--mono);font-size:.85rem;outline:none;
  transition:border-color .22s ease, background .22s ease, box-shadow .22s ease;cursor:none;}
.fld input::placeholder{color:rgba(14,58,44,.34);}
.fld input:hover,.fld select:hover{border-color:rgba(14,58,44,.4);}
.fld input:focus,.fld select:focus{border-color:rgba(14,58,44,.75);background:rgba(14,58,44,.09);
  box-shadow:0 0 0 3px rgba(14,58,44,.13);}
.fld input:focus,.fld select:focus{border-color:var(--accent);}
.fld input.err{border-color:#B42D3F;}
.fld .m{font-size:.64rem;color:#B42D3F;margin-top:3px;min-height:0;line-height:1.5;}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
.paychips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 18px;}
.paychips button{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:1 1 auto;min-height:58px;border:1px solid var(--line);border-radius:12px;padding:12px 18px;font-size:.72rem;letter-spacing:.08em;transition:border-color .3s,background .3s,transform .35s var(--ease);}
@media(hover:hover){ .paychips button:hover{transform:translateY(-2px);} }   /* a tap must not leave it stuck lifted */
.paychips button.on{border-color:var(--accent);background:rgba(14,58,44,.08);}
/* payment marks — clean wordmarks in the brands' own style. Swap in the official
   SVGs from your gateway's brand kit when you go live. */
.fp-card{display:none;margin-top:14px;border-top:1px solid var(--line);padding-top:14px;}
.fp-card.show{display:block;}
html[dir="rtl"] .fp-code{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px dashed rgba(14,58,44,.5);
  background:rgba(14,58,44,.08);border-radius:11px;padding:11px 14px;}
.fp-code span{font-family:var(--mono);font-weight:700;font-size:1.05rem;letter-spacing:.14em;color:var(--gold-ink);}
.fp-copy{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px;transition:border-color .3s,background .3s;}
.fp-copy:hover{border-color:var(--accent);background:rgba(14,58,44,.1);}
.fp-fine{font-size:.66rem;color:var(--muted);margin-top:9px;line-height:1.6;}
/* The three marks have different aspects (mada 3.0, Apple Pay 2.34, stc bank
   3.97), so a shared height makes them look nothing alike. Each is given a width
   proportional to what it needs at the target optical height, which keeps all
   three in the same ratio as the cell shrinks, and a max-height so none grows
   past its intended size on a wide cell. Width is the binding constraint, so
   nothing can cross its border. */
/* Was an inline style at .64rem — 10.2px on a phone, and the only label in the form
   set differently from every other one. */
.pay-label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px;}
html[dir="rtl"] .pay-label{font-family:var(--ar-ui);font-size:.8rem;letter-spacing:0;}
.paychips svg{width:var(--mark-w);height:auto;max-height:var(--mark-h);
  display:block;flex:none;margin:0 auto;}
.pay-mada{--mark-w:100%;--mark-h:34px;}   /* stacks Arabic over Latin */
.pay-apple{--mark-w:60%;--mark-h:26px;}
.pay-stcbank{--mark-w:97%;--mark-h:25px;}
.pp-mark{display:block;margin:0 auto 10px;width:100%;}
.pp-mada{height:32px;}
.pp-apple{height:26px;}
.pp-stcbank{height:25px;}


.paychips button.on{border-color:var(--accent);background:rgba(14,58,44,.08);color:var(--gold-ink);}
.paypanel{display:none;}.paypanel.on{display:block;animation:fin .4s;}
@keyframes fin{from{opacity:0}to{opacity:1}}
.sums{border-top:1px solid var(--line);margin-top:6px;padding-top:16px;}
.sumr{display:flex;justify-content:space-between;font-size:.92rem;color:var(--muted);margin-bottom:8px;}
.sumr.tot{font-family:var(--disp);font-size:1.55rem;color:var(--gold-ink);margin-top:10px;}
.paybtn{width:100%;justify-content:center;margin-top:18px;}
.spin{width:18px;height:18px;border:2px solid rgba(251,244,232,.3);border-top-color:var(--on-fill);border-radius:999px;animation:sp .7s linear infinite;display:none;}
@keyframes sp{to{transform:rotate(360deg)}}
.paybtn.loading .spin{display:inline-block;}.paybtn.loading .lbl{opacity:.5;}
.done-view{text-align:center;padding:14px 4px 6px;display:none;}
.done-view.show{display:block;animation:fin .5s;}
.done-view .ring{width:68px;height:68px;border-radius:999px;border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;animation:popr .7s var(--ease);}
@keyframes popr{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.done-view .ring b{font-family:var(--disp);font-size:2rem;color:var(--accent-ink);}
.done-view h3{font-family:var(--disp);font-weight:300;font-size:1.9rem;margin-bottom:10px;}
.done-view p{color:var(--muted);font-size:.86rem;max-width:360px;margin:0 auto 8px;line-height:1.6;}
.done-box{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:18px auto;max-width:330px;text-align:start;}
.done-box .rowl{margin-bottom:9px;}

/* ---- toast ---- */
.toasts{position:fixed;bottom:24px;left:24px;z-index:400;display:flex;flex-direction:column;gap:10px;}
.toast{background:var(--bg);border:1px solid var(--accent);border-radius:12px;padding:13px 18px;font-size:.78rem;display:flex;align-items:center;gap:10px;transform:translateY(16px);opacity:0;transition:.4s var(--ease);}
.toast.show{transform:none;opacity:1;}
.toast .d{width:7px;height:7px;border-radius:999px;background:var(--accent);}

@media(max-width:900px){
  nav.links{display:none;}
  .menu-btn{display:inline-grid;}
  .var-wrap,.ritual-grid,.sweetband-grid{grid-template-columns:1fr;}
  .sweetband-grid .sweetstats{margin-top:8px;}
  /* One column: a sticky grid item can only travel inside its own grid row, and that row
     is exactly its own height — so it never moves. A flex column gives it the whole list
     to travel against, and keeps `order` working so it stays above the list. */
  .var-wrap{display:flex;flex-direction:column;}
  .var-stage{order:-1;position:sticky;top:84px;margin-bottom:24px;aspect-ratio:4/3;z-index:2;}
  .stats,.benefits,.voices,.foot-top{grid-template-columns:1fr 1fr;}
  .r2{grid-template-columns:1fr;}
  header{padding:16px 20px;}
  header.shrink{padding:12px 20px;}
}

/* ===== phone layout =====
   Phones are the whole audience here, so the product list becomes a proper
   gallery: two big square photos per row, price and Add underneath. A vertical
   screen shows pictures far better than a horizontal list of thumbnails. */
@media(max-width:620px){
  .var-wrap{display:block;}
  #varList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  /* see .fl-visual: without min-width:0 the photo's intrinsic width blows the track out */
  #varList>*{min-width:0;}
  .wrap{padding:0 12px;--gutter:12px;}
  .var-item{display:block;padding:0;border-bottom:none;border:1px solid var(--line);
    border-radius:calc(var(--img-r) + 4px);overflow:hidden;background:rgba(14,58,44,.03);position:relative;}
  .var-item:hover{padding:0;transform:none;}
  html[dir="rtl"] .var-item:hover{padding:0;}
  .var-item .idx{display:none;}
  .vthumb{display:block;aspect-ratio:1/1;border:none;border-radius:var(--img-r);overflow:hidden;
    background:rgba(14,58,44,.05);margin:4px 4px 0;width:calc(100% - 8px);}
  .vthumb img,.vthumb svg{width:100%;height:100%;object-fit:cover;display:block;}
  .var-item .nm{display:block;font-size:1.16rem;line-height:1.25;padding:10px 11px 0;min-width:0;}
  .var-item .nm .ar{display:block;font-size:.78rem;margin:2px 0 0;color:var(--muted);}
  html[dir="rtl"] .var-item .nm .ar{margin:2px 0 0;}
  /* Two cards across leaves about 161px inside a card, and "٨٥ ريال / ١ كجم" beside
     an Add button needs 172–187. They were not shrinking, so the button hung outside
     the card and got clipped by it — at 360px its left edge sat off-screen entirely,
     which means the buy button on the narrowest common phone was unreachable. Let the
     row wrap and give the button the full width when it does: a bigger tap target,
     and the same in both languages. */
  .var-meta{display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:8px;padding:7px 11px 11px;}
  .var-item .pr{min-width:0;}
  .var-item .add{flex:none;}
  .var-meta>.add:only-child,.var-meta>*+.add{flex:1 1 100%;text-align:center;}
  .var-item .pr{font-size:.95rem;}
  .var-item .add{opacity:1;transform:none;padding:11px 13px;font-size:.7rem;min-height:44px;border-radius:999px;}
  /* the seasonal tag rides on the photo, not in the text */
  .var-item .season-tag{position:absolute;top:9px;left:9px;margin:0;z-index:3;font-size:.66rem;padding:4px 9px;}
  html[dir="rtl"] .var-item .season-tag{left:auto;right:9px;}
  .var-item.out .vthumb{filter:grayscale(.7);}
  /* No pinned preview on phones. Every gallery card already carries its own photo, so a
     card floating over the top only covered the varieties you were trying to look at.
     The pinned preview is a desktop/tablet idea — it stays there. */
  .var-stage{display:none;}
}
@media(max-width:400px){
  #varList{gap:9px;}
  .var-item .nm{font-size:1.05rem;padding:9px 10px 0;}
  .var-item .nm .ar{font-size:.72rem;}
  .var-meta{padding:6px 10px 10px;gap:6px;}
  .var-item .pr{font-size:.88rem;}
  .var-item .add{padding:11px 11px;font-size:.68rem;min-height:44px;}
}

/* ---- benefits: three tall stacked blocks ate the screen on a phone.
        Two compact cards per row with the icon beside the text reads better. ---- */
@media(max-width:620px){
  .benefits{grid-template-columns:1fr 1fr;gap:1px;border-radius:16px;}
  .benefit{padding:16px 14px;display:flex;flex-direction:column;}
  .benefit .bi{font-size:1.5rem;margin-bottom:9px;}
  .benefit h4{font-size:1.02rem;line-height:1.3;margin-bottom:5px;}
  .benefit p{font-size:.74rem;line-height:1.6;}
  /* an odd one out shouldn't sit alone in half a row */
  .benefit:nth-child(3):last-child{grid-column:1 / -1;flex-direction:row;align-items:flex-start;gap:13px;}
  .benefit:nth-child(3):last-child .bi{margin-bottom:0;flex:none;}
}
@media(max-width:400px){
  .benefit{padding:14px 12px;}
  .benefit h4{font-size:.95rem;}
  .benefit p{font-size:.7rem;}
}
/* ---- other tall sections, trimmed for a vertical screen ---- */
@media(max-width:620px){
  .sec-label{margin-bottom:26px;gap:9px;}
  section.wrap{padding-top:6px;}
  /* ...except the hero. It is the one section that begins underneath the fixed header,
     and section.wrap outranks the .hero rule further down, so its 76px collapsed to 6
     and the "Est. 2016 · Buraydah" line sat behind the bar. */
  section.hero.wrap{padding-top:84px;}
  /* An in-page link lands a heading right under the header otherwise. */
  section[id]{scroll-margin-top:76px;}
  .sweetband-grid{gap:22px;}
  .sweetstats{gap:12px;}
  .flight-card{padding:14px;gap:13px;margin-top:18px;border-radius:18px;}
  .fl-visual{gap:8px}
  .fl-lead{font-size:.95rem;line-height:1.45}
  .fl-buy{margin-top:13px;gap:12px}
  .fl-price{font-size:1.5rem}
  .fl-note{margin-top:10px}
  .fl-lead{font-size:1.05rem;line-height:1.5;}   /* fitOne() shrinks this to one measured line */
  .fl-note{margin-top:16px;padding-top:14px;font-size:.74rem;}
  .quiz-card{padding:20px 16px;}
  .corp-inner{padding:0 18px;}
  .foot-top{gap:26px;padding-bottom:32px;}
}


/* ═══ phone readability pass ═══
   Text you have to READ gets a floor of ~.82rem (≈15px at a 17px root).
   Decorative micro-labels — eyebrows, uppercase mono tags — stay small on
   purpose; blowing those up looks wrong. Arabic sits a notch larger than Latin
   at the same nominal size, so it is lifted a little further. */
@media(max-width:620px){
  /* cart drawer */
  .dh h3{font-size:1.35rem;}
  .promo-nudge{font-size:.82rem;line-height:1.6;padding:11px 13px;margin:0 16px;}
  .sb-label{font-size:.82rem;margin-bottom:6px;}
  .sb-track{height:6px;}
  .df{padding:18px 16px;}
  .ci .in small{font-size:.8rem;}
  .tot{font-size:1.45rem;}
  /* checkout */
  .fld label{font-size:.7rem;letter-spacing:.1em;}
  .fld .m{font-size:.8rem;}
  .promo-hint{font-size:.76rem;line-height:1.6;}
  .express-note{font-size:.76rem;line-height:1.6;}
  .known-strip{font-size:.8rem;}
  .pin-btn{font-size:.78rem;}
  .pin-done{font-size:.8rem;}
  .pin-done a{font-size:.74rem;}
  .sumr{font-size:.88rem;}
  .sumr.tot{font-size:1.4rem;}
  .paypanel div{font-size:.82rem !important;}
  /* confirmation */
  .done-sub{font-size:.86rem;}
  .rowl{font-size:.82rem;}
  .done-help{font-size:.74rem;}
  /* map sheet */
  .mchoice .mchoice-t b{font-size:.88rem;}
  .mchoice .mchoice-t small{font-size:.72rem;}
  .map-read{font-size:.82rem;}
  .map-out small{font-size:.8rem;}
  /* receipt */
  .rc-kv span{font-size:.64rem;}
  .rc-kv b{font-size:.84rem;}
  .rc-tb thead th{font-size:.64rem;}
  .rc-tb td{font-size:.82rem;}
  .rc-sum .row{font-size:.82rem;}
  .rc-thanks p,.rc-contact{font-size:.76rem;}
  /* reviews + policies + flight */
  .rev-locked small,.no-voices small,.rev-sub{font-size:.84rem;}
  .rev-hint{font-size:.74rem;}
  .pol-dl dt{font-size:.7rem;}
  .pol-dl dd{font-size:.86rem;}
  .policy-btn .pb-t small{font-size:.76rem;}
  .fl-list li{font-size:.84rem;}
  .fl-list li small{font-size:.78rem;}
  .fl-note{font-size:.8rem;}
  .quiz-count{font-size:.72rem;}
  .quiz-opt span{font-size:.8rem;}
  .voice .who{font-size:.76rem;}
  .fp-fine{font-size:.74rem;}
  .first-popup p{font-size:.84rem;}
  /* Arabic reads smaller at the same size — give it a little more */
  html[dir="rtl"] .promo-nudge,html[dir="rtl"] .sb-label,html[dir="rtl"] .rowl,
  html[dir="rtl"] .sumr,html[dir="rtl"] .pol-dl dd,html[dir="rtl"] .done-sub,
  html[dir="rtl"] .map-read,html[dir="rtl"] .fl-list li{font-size:.9rem;}
  html[dir="rtl"] .fld label{font-size:.76rem;}
  html[dir="rtl"] .mchoice .mchoice-t b{font-size:.94rem;}
}
@media(max-width:400px){
  .promo-nudge{font-size:.8rem;margin:0 14px;}
  .sumr{font-size:.86rem;}
  .dh h3{font-size:1.22rem;}
  html[dir="rtl"] .promo-nudge{font-size:.85rem;}
}

@media(max-width:560px){
  /* cart lines: bigger photo so you can actually see what you bought */
  .ci .th{width:74px;height:74px;}
  .ci .in b{font-size:1.15rem;}
  .qty button{width:34px;height:34px;}            /* thumb-friendly */
  .rm{padding:6px 0;}
  /* seasonal cards */
  .scard{gap:13px;padding:14px;}
  .scard-art{width:88px;height:88px;}
  .scard-name{font-size:1.3rem;}
  /* product detail sheet */
  .info-hero{height:190px;}
  .info-body{padding:14px 16px 18px;}
  /* Two across, not two stacked. Stacked, the pair stood 150px tall and the
     lower one sat half under the pinned buy bar — a customer's first sight of
     the sheet was a price cut in half. Side by side they clear it. */
  .size-pick{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
  .size-pick .szb{padding:9px 11px;gap:1px 8px;}
  .size-pick .szb b{font-size:.66rem;letter-spacing:.06em;}
  .size-pick .szb span{font-size:1.1rem;}
  .size-pick .szb em{font-size:.6rem;letter-spacing:.04em;}
  /* .mag is the hero-sized button — 18px of padding and .18em of tracking. In a
     product sheet it dwarfed the price beside it. Sized to sit next to it. */
  .info-buy{flex-wrap:nowrap;gap:12px;align-items:center;}
  .info-buy .mag{padding:13px 18px;font-size:.7rem;letter-spacing:.1em;gap:8px;
    flex:1 1 auto;justify-content:center;min-height:48px;}
  .info-buy .info-price{flex:none;font-size:1.5rem;}
  .info-buy .mag{width:100%;justify-content:center;}
  /* quiz */
  .quiz-card{padding:22px 18px;}
  .quiz-opt{padding:16px 15px;}
  .quiz-actions{flex-direction:column;align-items:stretch;gap:10px;}
  .quiz-actions .mag{justify-content:center;}
  /* checkout + receipt */
  .paychips{gap:7px;}
  .paychips button{flex:1 1 calc(50% - 5px);min-height:56px;padding:10px 12px;}
  .promo-row{flex-wrap:nowrap;}
  .promo-btn{padding:0 14px;white-space:nowrap;}
  .done-actions,.rc-actions{flex-direction:column;align-items:stretch;}
  .done-actions .mag,.rc-actions .mag{justify-content:center;}
  .rc-top{padding:22px 18px 18px;}
  .rc-body{padding:18px 16px 22px;}
  .rc-tb td,.rc-tb thead th{padding-inline:10px;}
  /* reviews */
  .rate button{font-size:2rem;padding:4px 2px;}
  .rev-form{padding:22px 18px;}
  /* comfortable minimum tap target everywhere it matters */
  .mag{padding:16px 26px;}
  .quiz-again{min-height:44px;}
  .mobilenav a{min-height:44px;display:flex;align-items:center;}
  .mobilenav .x{width:44px;height:44px;display:flex;align-items:center;justify-content:center;}
  .logo{min-height:44px;display:flex;align-items:center;}
}
@media(max-width:380px){
  .logo{font-size:1.15rem;}
  .cartlink{padding:7px 9px;}
}

@media(max-width:560px){
    .stats,.benefits,.voices,.sweetstats{grid-template-columns:1fr;}
  /* The footer stayed a single column on phones, so four short link lists became
     one 1,066px ribbon with 88px between every link. Two columns and honest
     spacing carry the same links in half the height; the tap target is still 44px,
     it just is not 88. */
  .foot-top{grid-template-columns:1fr 1fr;gap:18px 16px;padding-bottom:22px;}
  .foot-top>:first-child{grid-column:1/-1;}
  .foot-top h5{margin-bottom:6px;}
  .foot-top a{padding:11px 0;margin-bottom:0;min-height:44px;}
  .foot-top p{margin-bottom:6px;}
  .foot-bottom{gap:9px;padding-top:18px;}
  .foot-bottom .tag{font-size:.82rem;}
  body{cursor:auto;}
  .wrap{padding:0 20px;--gutter:20px;}
  header{gap:8px;padding:10px 14px;}
  header>div{gap:6px!important;}
  .logo{font-size:1.25rem;gap:.45em;}
  .logo .ar{font-size:.85rem;}
  /* 44×44 is the smallest a finger reliably hits, and these three were 19×26, 49×32
     and 74×28. Raising them alone would have burst a 360px header — which was already
     9px over — so the word "Cart" goes and the count carries the meaning, the language
     button drops to the two characters that matter, and the padding comes in. Height is
     bought with padding, not with type size: the labels stay readable. */
  .langbtn{padding:0 12px;font-size:.66rem;min-height:44px;display:inline-flex;align-items:center;}
  .cartlink{padding:0 13px;font-size:.64rem;min-height:44px;gap:6px;}
  .cartlink [data-i18n="nav.cart"],.cartlink .sep{display:none;}
  .cartlink .cart-ic{display:block;}
  .menu-btn{font-size:1.35rem;min-width:44px;min-height:44px;display:flex;
    align-items:center;justify-content:center;margin-inline-end:-8px;}
  /* 100svh plus 100px of padding left a tall empty band under the button before the
     strip. The content is short on a phone — let the section be as tall as it needs. */
  section.hero.wrap{padding-top:84px;}
  .hero{min-height:auto;padding-bottom:30px;}
  .hero .kicker{margin-bottom:16px;}
  .scrollcue{display:none;}   /* on a phone you already know to scroll */
  .hero-foot{gap:22px;}
  .var-item{gap:10px;padding:20px 4px;}
  .var-item .nm{font-size:1.5rem;}
  .var-item .nm .ar{font-size:.85rem;}
  .var-item .idx{width:24px;}
  .var-item .pr{font-size:.95rem;white-space:nowrap;}
  .var-item .add{padding:11px 13px;font-size:.68rem;min-height:44px;}
  .benefit{padding:26px 22px;}
  .voice{padding:26px 22px;}
  .mc{border-radius:16px;}
  .mb{padding:20px 18px 24px;}
  .dh,.db,.df{padding-left:20px;padding-right:20px;}
  .fld input,.fld select,.news input{font-size:1rem;}  /* stop iOS zoom-on-focus */
  .toasts{left:16px;right:16px;}
  html[dir="rtl"] .toasts{left:16px;right:16px;}
}
/* iOS zooms the page whenever a focused field is under 16px. One rule, every field. */
@media(hover:none){
  input,select,textarea{font-size:16px !important;}
}
/* Touch devices have no hover — hover-only affordances must be shown */
@media(hover:none){
  .var-item .add{opacity:1;transform:none;}
  .var-item:hover{padding-left:6px;}
  html[dir="rtl"] .var-item:hover{padding-right:6px;}
}
.mobilenav{position:fixed;inset:0;z-index:220;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transform:translateY(-100%);transition:transform .6s var(--ease);}
.mobilenav.show{transform:none;}
.mobilenav a{font-family:var(--disp);font-size:2rem;}
.mnav-mark{width:64px;height:auto;opacity:.9;margin-bottom:6px;}
.mobilenav .x{position:absolute;top:22px;right:22px;}
.langbtn{border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:.72rem;letter-spacing:.1em;transition:border-color .4s,background .4s;font-family:var(--mono);}
.langbtn:hover{border-color:var(--accent);background:rgba(14,58,44,.06);}

/* ===== Arabic / RTL ===== */
:root{--ar-ui:ARNUM,SAR,"Tajawal",sans-serif;--ar-disp:ARNUM,SAR,"Amiri","Aref Ruqaa",serif;--ar:ARNUM,SAR,"Amiri",serif;}
/* Space Mono carries no Arabic glyphs, so every small mono label (badges, pills,
   eyebrows, prices) fell back to a system font and rendered the letters detached.
   Re-point the token itself in RTL and all 24 uses are fixed at once. */
html[dir="rtl"]{--mono:ARNUM,SAR,"Tajawal","Space Mono",sans-serif;}
/* Arabic script is cursive — letter-spacing detaches letters and their dots. Kill it everywhere in RTL. */
html[dir="rtl"] *{letter-spacing:0 !important;text-transform:none !important;}
html[dir="rtl"] .hero h1 .stroke{-webkit-text-stroke:0;color:var(--gold-ink);}
html[dir="rtl"] body{font-family:var(--ar-ui);}
html[dir="rtl"] .disp{font-family:var(--ar-disp);font-weight:400;}
html[dir="rtl"] .sec-label h2{font-size:clamp(1.6rem,3.6vw,2.65rem);line-height:1.45;letter-spacing:0;}
html[dir="rtl"] .eyebrow,html[dir="rtl"] .num,html[dir="rtl"] nav.links a,html[dir="rtl"] .cartlink,html[dir="rtl"] .langbtn,html[dir="rtl"] .foot-top h5,html[dir="rtl"] .fld label,html[dir="rtl"] .stat .k,html[dir="rtl"] .voice .who,html[dir="rtl"] .paychips button,html[dir="rtl"] .mch .sec,html[dir="rtl"] .eyebrow2,html[dir="rtl"] .sweetstats .stat .k{letter-spacing:0;text-transform:none;font-family:var(--ar-ui);}
html[dir="rtl"] .hero h1{font-family:var(--ar-disp);line-height:1.25;font-size:clamp(2rem,8vw,7rem);display:flex;flex-wrap:nowrap;align-items:baseline;gap:.2em;white-space:nowrap;}
html[dir="rtl"] .h-line{display:inline-block;}
/* The hero lines slide up out of a mask, so .h-line's overflow:hidden is doing real
   work and cannot be relaxed the way .fitline's can. Measured instead: Amiri's tails
   ran about .118em past the mask at every width, so the mask gets that much more room
   and the same amount back as negative margin — the gap between the three lines is
   unchanged, only the mask is taller. */
html[dir="rtl"] .hero .h-line{padding-bottom:.28em;margin-bottom:-.14em;}
/* A taller mask needs a longer run-up, or the line peeks out before the reveal. */
html[dir="rtl"] .hero .h-line span{transform:translateY(160%);}
html[dir="rtl"] .hero.reveal .h-line span{transform:none;}
html[dir="rtl"] .hero h1 .it{font-style:normal;}
html[dir="rtl"] .band h2 .it,html[dir="rtl"] .ritual h3 em{font-style:normal;}
html[dir="rtl"] .ritual h3{font-family:var(--ar-disp);line-height:1.65;letter-spacing:0;font-weight:400;}
html[dir="rtl"] .toasts{left:auto;right:24px;}
html[dir="rtl"] .drawer{right:auto;left:0;border-left:none;border-right:1px solid var(--line);transform:translateX(-101%);}
html[dir="rtl"] .drawer.show{transform:none;}
html[dir="rtl"] .ci .rt{text-align:left;}
html[dir="rtl"] .var-item:hover{padding-left:6px;padding-right:22px;}
html[dir="rtl"] .var-item .nm .ar{margin-left:0;margin-right:14px;}
/* Amiri sits low. At line-height:1 the line box is shorter than the letters, so
   سكري جلكسي lost the tails of its ي and ج — and the fitted line clipped what
   spilled. Same remedy the hero already uses (see .h-line above): room in the line
   box, and a little padding under it. Phone first — the shelf is two cards across
   there and this is the layout nearly everyone sees. */
html[dir="rtl"] .var-item .nm{line-height:1.42;}
html[dir="rtl"] .var-item .nm .nm-main{padding-bottom:.18em;}
html[dir="rtl"] .var-stage .meta .t{line-height:1.4;padding-bottom:.14em;}
html[dir="rtl"] .scard-name{line-height:1.4;padding-bottom:.12em;}
html[dir="rtl"] .var-stage .flav{right:auto;left:22px;}
html[dir="rtl"] .var-stage .meta{left:24px;right:24px;}
html[dir="rtl"] .mobilenav .x{right:auto;left:22px;}
html[dir="rtl"] .paypanel [style*="text-align:left"]{text-align:right!important;}
html[dir="rtl"] .hero-lead,html[dir="rtl"] .ritual p,html[dir="rtl"] .benefit p,html[dir="rtl"] .voice q{line-height:1.9;}
@supports not ((-webkit-text-stroke:1px #000)){ .hero h1 .stroke{color:var(--gold-ink);} }
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .reveal-up{opacity:1!important;transform:none!important;}
  .h-line span{transform:none!important;}
  
  .orb-wrap{animation:none;}
}
/* On a phone the founding badge filled 353 of 393px and 42% of the screen, and its
   120px glow washed the whole section brown — the paragraph above it and the next
   section's heading both sat on the haze. It is a mark, not a hero: smaller, and lit
   closely enough that the type around it keeps its own background. */
@media(max-width:900px){
  .orb-wrap{max-width:286px;margin-inline:auto;margin-bottom:26px;}
  .orb{box-shadow:0 0 64px -28px var(--accent),inset -24px -24px 64px rgba(14,58,44,.16);}
}
/* ---- palmir ORDER SYSTEM: live order tracking ---- */
.tk-msg{border:1px solid rgba(200,52,74,.35);background:rgba(200,52,74,.06);border-radius:14px;
  padding:14px 16px;margin-top:16px;font-size:.8rem;line-height:1.7;}
.tk-msg b{display:block;color:var(--cream);font-weight:400;margin-bottom:3px;}
.tk-msg span{color:var(--muted);}
.tk-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:20px 0 4px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.tk-head b{font-family:var(--mono);font-size:1rem;letter-spacing:.08em;color:var(--accent-ink);font-weight:700;}
.tk-head span{font-size:.66rem;color:var(--muted);}
.track.tk-live{max-width:none;margin-top:26px;align-items:flex-start;}
.track.tk-live li.now b{color:var(--accent-ink);}
.track.tk-live li small{min-height:0;}
.tk-lines{border-top:1px solid var(--line);margin-top:22px;padding-top:14px;font-size:.78rem;color:var(--muted);line-height:2;}
.tk-tot{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);
  margin-top:10px;padding-top:11px;color:var(--cream);}
.tk-tot b{color:var(--gold-ink);font-weight:400;font-family:var(--mono);}
.tk-cour{margin-top:14px;font-size:.74rem;color:var(--muted);}
.tk-hist{margin-top:22px;border-top:1px solid var(--line);padding-top:16px;}
.tk-hist .hh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.tk-hist .hh b{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);font-weight:700;}
html[dir="rtl"] .tk-hist .hh b{font-family:var(--ar-ui);letter-spacing:0;font-size:.76rem;}
.tk-hist .hh span{font-size:.72rem;color:var(--muted);}
.tk-ho{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.76rem;}
.tk-ho:last-child{border-bottom:none;}
.tk-ho .a{font-family:var(--mono);color:var(--accent-ink);flex:none;font-size:.72rem;}
.tk-ho .b{flex:1;min-width:0;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tk-ho .c{flex:none;color:var(--cream);font-family:var(--mono);font-size:.72rem;}
.tk-ho .d{flex:none;font-size:.62rem;color:var(--muted);}
.tk-cour b{font-family:var(--mono);color:var(--cream);}
.foot-track{background:none;border:none;color:inherit;font:inherit;text-decoration:underline;
  min-height:44px;display:inline-flex;align-items:center;
  text-underline-offset:4px;cursor:none;padding:0;}
.foot-track:hover{color:var(--accent-ink);}