/* =====================================================================
   Cherry Berry — storefront shell.

   Colours, spacing, radii, shadows, type scale and section order below
   are taken from the approved design (homepage-prototype.html). The page
   is MENU-FIRST: nav, a compact hero, then THE MENU, flavours, how to
   order, the story and the footer.

   Everything from "ORDER CONFIGURATOR + CART" downwards is the order
   sheet — configurator, cart and checkout — and is untouched by this
   redesign; it only inherits the tokens below.
   ===================================================================== */
:root{
  --plum:#49315D; --plum-deep:#382548; --plum-soft:#5E4275;
  --cherry:#A61C24; --cherry-deep:#8A141B; --cherry-bright:#C62839;
  --cream:#FBF6F3; --cream-2:#F3E9E2;
  --ink:#2A2130; --muted:#7A6E80;
  --card:#FFFFFF; --line:#EADFD8;
  /* the order sheet was built against these three names */
  --blush:#F3E9E2; --blush-2:#EADFD8; --gold:#C7A24B;
  --shadow:0 18px 44px -22px rgba(56,37,72,.45);
  --shadow-sm:0 8px 22px -14px rgba(56,37,72,.4);
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:"Jost",system-ui,sans-serif;color:var(--ink);background:var(--cream);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.1;
  font-variation-settings:"opsz" 144}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.script{font-family:"Parisienne",cursive;color:var(--cherry);font-weight:400}
/* the header is sticky: anchor targets must clear it */
section[id],div[id="top"],#offerHero{scroll-margin-top:84px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:"Jost",system-ui,sans-serif;
  font-weight:600;font-size:1rem;padding:.85em 1.6em;border-radius:999px;transition:.2s ease;
  cursor:pointer;border:1.5px solid transparent;white-space:nowrap}
.btn--cherry{background:var(--cherry);color:#fff;box-shadow:0 10px 24px -12px rgba(166,28,36,.7)}
.btn--cherry:hover{background:var(--cherry-deep);transform:translateY(-2px)}
.btn--plum{background:var(--plum);color:#fff}
.btn--plum:hover{background:var(--plum-deep);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--plum);border-color:#d9ccd6}
.btn--ghost:hover{border-color:var(--plum);background:#fff}
.btn svg{width:1.15em;height:1.15em;fill:currentColor}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* the arrow leans the way the language reads */
.arrow{display:inline-block;transition:transform .2s}
html[dir="rtl"] .arrow{transform:scaleX(-1)}
.btn:hover .arrow{transform:translateX(3px)}
html[dir="rtl"] .btn:hover .arrow{transform:scaleX(-1) translateX(3px)}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:60;background:rgba(251,246,243,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);transition:.3s}
.nav.scrolled{box-shadow:0 6px 24px -18px rgba(56,37,72,.55)}
.nav__in{max-width:var(--maxw);margin:0 auto;padding:0 22px;height:70px;display:flex;
  align-items:center;justify-content:space-between;gap:1rem}
.nav__logo{flex:none}
.nav__logo img{height:38px;width:auto}
.nav__links{display:flex;align-items:center;gap:28px;margin-inline-start:auto}
.nav__links a{font-size:.92rem;font-weight:500;color:var(--plum);opacity:.85;transition:.2s}
.nav__links a:hover{opacity:1;color:var(--cherry)}
/* My Account is not a section of this page, it is somewhere else — the pill
   says so without shouting over "Order now". */
.nav__acct{border:1.5px solid var(--blush-2);border-radius:999px;padding:.34em 1em;opacity:1!important}
.nav__acct:hover{border-color:var(--plum);background:#fff}

/* ---- the persistent account chip ----
   Signed in, on every page. Plum on blush so it reads as "yours" beside the
   cherry "Order now" without competing with it. The name is dropped on narrow
   screens and the star + points carry the meaning alone. */
.acctchip{display:inline-flex;align-items:center;gap:.4em;flex:none;
  background:#F1EAF6;border:1.5px solid #E0D0EA;border-radius:999px;
  padding:.3em .85em;font-size:.86rem;font-weight:500;color:var(--plum);
  transition:.2s;max-width:11rem;min-height:38px}
.acctchip:hover{border-color:var(--plum);background:#fff}
.acctchip:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.acctchip__star{color:var(--gold);font-size:.95em;line-height:1}
.acctchip__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:6.5rem}
.acctchip__pts{font-weight:600;color:var(--cherry)}

/* ---- the signed-in block in the nav ----
   Two shapes for two places. On a WIDE screen the chip beside it already says
   the name and the points, so all this contributes is the way out. In the
   MOBILE DRAWER (below) it becomes the full block, because the drawer is where
   a phone user looks for "who am I and how do I get out". */
.nav__me{display:flex;align-items:center;gap:.6rem}
.nav__me__in{display:none}
.nav__me__hi{font-weight:600}
.nav__me__pts{font-size:.86rem;color:var(--cherry);font-weight:500}
.nav__out{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:.86rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.nav__out:hover{color:var(--cherry)}
.nav__out:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.nav__act{display:flex;align-items:center;gap:12px;flex:none}
.nav__act .btn{padding:.62em 1.2em;font-size:.9rem}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;padding:6px}
.nav__toggle span{display:block;width:22px;height:2px;background:var(--plum);margin:4px 0;
  border-radius:2px;transition:.3s}

/* ---- AR/EN segmented toggle ---- */
.lang{display:inline-flex;align-items:center;border:1px solid #d9ccd6;border-radius:999px;
  overflow:hidden;background:#fff;cursor:pointer;font-family:"Jost",system-ui,sans-serif;
  font-weight:600;font-size:.78rem;line-height:1;flex:none;padding:0}
.lang span{padding:.55em .8em;color:var(--muted);transition:.25s;white-space:nowrap}
.lang span.on{background:var(--plum);color:#fff}
.lang:hover{border-color:var(--plum)}
.lang:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---- hero: compact, brand-forward, one tap from the menu ---- */
.hero{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 85% 0%,#5b3d73 0%,var(--plum) 42%,var(--plum-deep) 100%)}
.hero__wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
  padding-top:56px;padding-bottom:56px}
.hero__copy{position:relative;z-index:2}
.eyebrow,.sec-head .kicker{display:inline-block;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;color:var(--cherry)}
.hero .eyebrow{color:#F3C9B4}
.hero h1{font-size:clamp(2.5rem,5.4vw,3.9rem);line-height:1.04;margin:.34em 0 .5em;
  letter-spacing:-.01em;color:#fff}
.hero__sub{font-size:1.06rem;color:#EADCE9;max-width:30em;margin-bottom:1.7em}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* the WhatsApp path stays available, but as a quiet second door */
.wa-link{display:inline-flex;align-items:center;gap:.5em;color:#EADCE9;font-weight:500;
  font-size:.95rem;opacity:.9;transition:.2s;border-radius:999px;padding:.4em .2em}
.wa-link:hover{opacity:1;color:#fff}
.wa-link svg{width:18px;height:18px;fill:currentColor;flex:none}
.wa-link:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.hero__trust{margin-top:2.1em;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.82rem;color:#C9B6D6}
.hero__trust span{display:inline-flex;align-items:center;gap:.4em}
.hero__trust b{font-weight:600;color:#EADCE9}
.hero__trust .dot{width:5px;height:5px;border-radius:50%;background:#F3C9B4;flex:none}
.hero__art{position:relative;z-index:2}
.hero__photo{aspect-ratio:4/4.4;border-radius:22px;overflow:hidden;
  background:linear-gradient(135deg,#6b4a85,#3f2953);box-shadow:0 30px 60px -26px rgba(0,0,0,.6);
  border:5px solid rgba(255,255,255,.14)}
.hero__photo img{width:100%;height:100%;object-fit:cover}
.hero__badge{position:absolute;inset-inline-start:-16px;bottom:26px;background:#fff;color:var(--plum);
  border-radius:16px;padding:12px 16px;box-shadow:var(--shadow);text-align:center;line-height:1.1}
.hero__badge b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.5rem;
  color:var(--cherry)}
.hero__badge small{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  font-weight:600}
.wave{display:block;width:100%;height:44px;margin-top:-1px;position:relative;z-index:1}

/* ---- section shell ---- */
.section{padding:66px 0}
.sec-head{text-align:center;max-width:36em;margin:0 auto 42px}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);color:var(--plum);margin:.28em 0 .3em;line-height:1.1}
.sec-head p{color:var(--muted);font-size:1.02rem}

/* ---- THE MENU — the star of the page ----
   .cat / .cat__* are the classes main.js renders the live /api/products
   cards with, so the DB-driven cards and the authored fallback share this
   one card design. */
.menu-sec{background:linear-gradient(180deg,var(--cream) 0%,#fff 100%)}
/* the grid lives on .menu-grid, and #desserts dissolves into it, so the live
   product cards and the static occasion card share one set of tracks */
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cats{display:contents}
.cat{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:.22s ease}
.cat:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#e3d3ce}
.cat__img{position:relative;aspect-ratio:1/1;overflow:hidden;
  background:linear-gradient(135deg,#efe2dc,#e7d3ca)}
.cat__img img{width:100%;height:100%;object-fit:cover;transition:.6s}
.cat:hover .cat__img img{transform:scale(1.05)}
.cat__price{position:absolute;inset-inline-start:12px;top:12px;background:rgba(255,255,255,.94);
  color:var(--plum);font-weight:700;font-size:.82rem;padding:.32em .7em;border-radius:999px;
  backdrop-filter:blur(4px)}
/* the sticker price, struck through, when an offer is discounting this card */
.cat__price s{color:var(--muted);opacity:.75;text-decoration-color:var(--cherry);margin-inline-end:.35em}
/* "−10%" / "−2 JD", top corner opposite the price — an offer badge on a menu
   card or a size row in the configurator */
.cat__badge,.size-opt__badge{position:absolute;inset-inline-end:12px;top:12px;
  background:var(--cherry);color:#fff;font-weight:700;font-size:.78rem;
  padding:.3em .65em;border-radius:999px;letter-spacing:.01em}
.size-opt__badge{position:static;margin-inline-start:.5em}
.size-opt__p s{color:var(--muted);opacity:.8;margin-inline-end:.35em;font-weight:400}
.cat__body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.cat__body h3{font-size:1.2rem;font-weight:600;color:var(--plum);margin-bottom:.3em}
/* always present, even when empty: it carries flex:1, which keeps every
   "Order this" button on the same line across the row */
.cat__body p{font-size:.9rem;color:var(--muted);flex:1;margin-bottom:1em}
.cat__link{display:inline-flex;align-items:center;justify-content:center;gap:.4em;width:100%;
  background:var(--plum);color:#fff;border:0;border-radius:999px;padding:.7em 1em;
  font-family:"Jost",system-ui,sans-serif;font-weight:600;font-size:.92rem;line-height:1.4;
  cursor:pointer;transition:.2s ease;text-align:center}
.cat__link:hover{background:var(--plum-deep);transform:translateY(-1px)}
.cat__link:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cat__link span{transition:.25s}

/* the one static card in the menu: an occasion is a conversation, not a SKU */
.occ{background:linear-gradient(140deg,#f7efe9,#f0e2da);border:1.5px dashed #ddc9be;
  border-radius:20px;padding:26px 20px;text-align:center;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.35em}
.occ__ic{font-size:1.8rem;line-height:1;margin-bottom:.1em}
.occ h3{font-size:1.2rem;font-weight:600;color:var(--plum)}
.occ p{font-size:.9rem;color:var(--muted)}
.occ .btn{margin-top:.9em;width:100%;justify-content:center;padding:.7em 1em;font-size:.92rem;
  background:#fff}

/* ---- offer hero banner ----
   Ported value-for-value from prototypes/offer-hero-banner.html (the approved
   spec): plum gradient panel, gold hairline, faint cherry watermark, script
   eyebrow, big discount headline over a gold bar, cherry pill CTA, clean photo
   frame, stacking at 760px. Painted by main.js (#offerHero) from the featured
   active offer; hidden while there is none. */
.ohero-wrap{--o-plum:#49315D;--o-plum-deep:#372449;--o-cherry:#A61C24;--o-cream:#FBF6F3;--o-gold:#C8912F;
  --o-cream-dim:rgba(251,246,243,.82);
  padding:clamp(18px,4vw,40px) clamp(14px,4vw,32px) 8px;background:var(--cream)}
.ohero{max-width:1180px;margin:0 auto;position:relative;overflow:hidden;border-radius:28px;
  background:radial-gradient(120% 140% at 85% 0%,#5a3d73 0%,var(--o-plum) 42%,var(--o-plum-deep) 100%);
  border:1px solid rgba(200,145,47,.35);box-shadow:0 30px 60px -28px rgba(55,36,73,.75);
  display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;
  font-family:"Jost",system-ui,sans-serif}
html[lang="ar"] .ohero{font-family:"Cairo","Jost",system-ui,sans-serif}
.ohero__mark{position:absolute;inset-inline-end:-40px;top:-50px;width:300px;height:300px;
  color:rgba(200,145,47,.14);pointer-events:none;z-index:0}
.ohero__mark svg{width:100%;height:100%}
.ohero__copy{position:relative;z-index:1;padding:clamp(26px,4.2vw,54px);
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,1.6vw,18px);justify-content:center}
.ohero__eyebrow{font-family:"Parisienne",cursive;color:var(--o-gold);
  font-size:clamp(1.3rem,3.4vw,2rem);line-height:1;margin:0}
html[lang="ar"] .ohero__eyebrow{font-family:"Amiri",serif;font-weight:700}
.ohero__headline{margin:0;color:var(--o-cream);font-family:"Fraunces",Georgia,serif;font-weight:700;
  font-size:clamp(2.9rem,8vw,5.3rem);line-height:.92;letter-spacing:-.5px}
html[lang="ar"] .ohero__headline{font-family:"Amiri",serif}
.ohero__headline .pct{font-size:.62em;vertical-align:.08em;margin-inline-start:.04em}
.ohero__headline::after{content:"";display:block;width:clamp(56px,10vw,96px);height:4px;border-radius:4px;
  background:var(--o-gold);margin-top:clamp(10px,1.6vw,16px)}
.ohero__subline{margin:0;color:var(--o-cream-dim);font-size:clamp(1rem,2.6vw,1.26rem);line-height:1.5;
  max-width:34ch;font-weight:500}
.ohero__period{display:inline-flex;align-items:center;gap:7px;background:rgba(200,145,47,.16);color:#f0cd89;
  border:1px solid rgba(200,145,47,.4);padding:6px 14px;border-radius:999px;font-size:.84rem;font-weight:600}
.ohero__period::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--o-gold)}
.ohero__cta{margin-top:clamp(6px,1vw,10px);display:inline-flex;align-items:center;justify-content:center;
  background:var(--o-cherry);color:var(--o-cream);font-family:inherit;font-weight:700;
  font-size:clamp(1rem,2.6vw,1.15rem);padding:clamp(13px,1.7vw,16px) clamp(28px,4vw,40px);
  border:none;border-radius:999px;cursor:pointer;text-decoration:none;
  box-shadow:0 14px 26px -12px rgba(166,28,36,.8);
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease}
.ohero__cta:hover{transform:translateY(-2px);background:#bb2029;box-shadow:0 18px 30px -12px rgba(166,28,36,.85)}
.ohero__cta:focus-visible{outline:3px solid #f0cd89;outline-offset:3px}
.ohero__shot{position:relative;z-index:1;padding:clamp(18px,2.4vw,26px);
  display:flex;align-items:center;justify-content:center}
.ohero__frame{width:100%;aspect-ratio:1/1;border-radius:20px;overflow:hidden;
  background:linear-gradient(135deg,#f7efe9 0%,#ead9ce 60%,#e4d2c6 100%);
  box-shadow:0 18px 36px -20px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.5)}
.ohero__frame img{width:100%;height:100%;object-fit:cover}
/* no photo uploaded: the image column is dropped and the copy is centred */
.ohero--noimg{grid-template-columns:1fr}
.ohero--noimg .ohero__shot{display:none}
.ohero--noimg .ohero__copy{align-items:center;text-align:center;max-width:760px;margin:0 auto;width:100%}
.ohero--noimg .ohero__headline::after{margin-inline:auto}
@media (max-width:760px){
  .ohero{grid-template-columns:1fr}
  .ohero__copy{order:1;padding-bottom:clamp(18px,3vw,22px);align-items:center;text-align:center}
  .ohero__subline{max-width:38ch}
  .ohero__headline{align-self:center}
  .ohero__headline::after{margin-inline:auto}
  .ohero__shot{order:2;padding-top:0}
  .ohero__frame{aspect-ratio:16/10}
  .ohero__mark{width:200px;height:200px;top:-30px;inset-inline-end:-30px}
}

/* ---- offers ----
   Time-limited, occasion-based discounts (/api/offers), painted in and
   un-hidden by main.js only while at least one is active — see the note on
   #offers in index.html. A dark plum panel, on-brand rather than a generic
   "sale" banner: the first active offer is lifted onto a cream card so it
   pops against the panel, the rest sit as translucent glass cards beside it. */
.offers-panel{position:relative;overflow:hidden;border-radius:34px;color:#fff;
  padding:44px clamp(20px,5vw,56px) 48px;
  background:linear-gradient(135deg,var(--plum) 0%,var(--plum-deep) 100%);box-shadow:var(--shadow)}
.offers-panel__glow{position:absolute;inset-inline-start:-12%;top:-32%;width:62%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 70%);
  pointer-events:none}
.offers-panel__wm{position:absolute;inset-inline-end:-4px;bottom:-22px;line-height:1;
  font-size:clamp(6rem,16vw,11rem);opacity:.1;pointer-events:none;user-select:none}
.offers-head{position:relative;z-index:1}
.offers-head h2{color:#fff}
.offers-head p{color:#EADCE9}
.offers-eyebrow{display:block;font-size:1.7rem;margin-bottom:.05em;color:#F3C9B4}
.offers-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,1fr);
  gap:20px;margin-top:8px}
.offer-card{position:relative;border-radius:22px;padding:26px 24px;display:flex;
  flex-direction:column;transition:.22s ease}
.offer-card--feat{background:var(--cream);color:var(--ink);box-shadow:var(--shadow)}
.offer-card--glass{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(6px);color:#fff}
.offer-card:hover{transform:translateY(-4px)}
.offer-card__occ{display:flex;align-items:center;gap:.4em;font-weight:600;font-size:.92rem;
  margin-bottom:1em;color:var(--cherry)}
.offer-card--glass .offer-card__occ{color:#F7C9CE}
.offer-card__emoji{font-size:1.25rem;line-height:1}
.offer-card__disc{display:flex;align-items:baseline;gap:.5em;margin-bottom:.4em;
  direction:ltr;unicode-bidi:isolate}
.offer-card__disc b{font-family:"Fraunces",Georgia,serif;font-weight:700;color:var(--cherry);
  font-size:clamp(2.3rem,6vw,2.9rem);line-height:1}
.offer-card--glass .offer-card__disc b{color:#fff}
.offer-card__disc b small{font-size:.5em;font-weight:700;margin-inline-start:.05em}
.offer-card__disc>span{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;color:var(--muted);padding-bottom:.4em}
.offer-card--glass .offer-card__disc>span{color:#EADCE9}
.offer-card__name{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.15rem;
  color:var(--plum);margin-bottom:.25em;line-height:1.2}
.offer-card--glass .offer-card__name{color:#fff}
.offer-card__line{font-size:.86rem;color:var(--muted);margin-bottom:.5em}
.offer-card--glass .offer-card__line{color:#EADCE9}
.offer-card__meta{font-size:.78rem;font-weight:600;color:var(--cherry);margin-bottom:1.1em}
.offer-card--glass .offer-card__meta{color:#F7C9CE}
.offer-card__min{font-size:.8rem;color:var(--muted);margin-bottom:.9em}
.offer-card--glass .offer-card__min{color:#EADCE9}
.offer-card__cta{margin-top:auto;width:100%;justify-content:center;border:0}
.offer-card__cta--ghost{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff}
.offer-card__cta--ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;
  transform:translateY(-1px)}
html[lang="ar"] .offer-card__name,html[lang="ar"] .offer-card__disc b{font-family:"Amiri","Fraunces",serif}

/* ---- rewards: "The Cherry Club" ----
   Always on, unlike Offers above it — a light section on purpose, so the two
   read as a pair (a dark moment, then the everyday programme) rather than two
   competing banners. Data-driven from /api/prizes (the shelf, public) and the
   customer's own session for their balance and progress. */
.rewards-sec{background:linear-gradient(180deg,#fff 0%,var(--cream) 100%)}
.rewards-eyebrow{display:block;font-size:1.7rem;margin-bottom:.05em}

/* how it works */
.rwsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:46px}
.rwstep{background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:26px 22px;text-align:center;box-shadow:var(--shadow-sm)}
.rwstep__n{width:30px;height:30px;border-radius:50%;background:var(--cherry);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.88rem;
  margin:0 auto .7em;font-family:"Fraunces",Georgia,serif}
.rwstep__ic{font-size:2rem;line-height:1;margin-bottom:.4em}
.rwstep h4{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.06rem;
  color:var(--plum);margin-bottom:.35em}
.rwstep p{font-size:.87rem;color:var(--muted);line-height:1.55}

/* your points — signed-in balance + progress, or a guest invitation */
.rwstrip{margin-bottom:50px}
.rwstrip__in{background:linear-gradient(150deg,#F7F2FA 0%,#F3E9E2 100%);border:1px solid #E7DCE4;
  border-radius:24px;padding:28px clamp(20px,5vw,40px);display:flex;flex-wrap:wrap;
  align-items:center;gap:26px;box-shadow:var(--shadow-sm)}
.rwstrip__num{flex:none;text-align:center;direction:ltr;unicode-bidi:isolate}
.rwstrip__num b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:700;
  font-size:clamp(2.5rem,6vw,3.2rem);color:var(--cherry);line-height:1}
.rwstrip__num span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.rwstrip__body{flex:1 1 220px;min-width:220px}
.rwstrip__msg{font-size:.98rem;color:var(--plum);font-weight:500;margin-bottom:.65em}
.rwbar{height:9px;border-radius:999px;background:#E7DCE4;overflow:hidden;margin-bottom:.3em}
.rwbar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--cherry),var(--cherry-bright))}
.rwstrip__cta{flex:none}
.rwstrip--out{background:linear-gradient(150deg,#FDEFE9 0%,var(--cream-2) 100%);
  border-color:#EADFD8;justify-content:space-between}
.rwstrip--out .rwstrip__msg{font-size:1.05rem;margin-bottom:0}

/* the treat ladder */
.rwladder__head{margin-bottom:28px}
.rwladder__head h3{font-size:clamp(1.4rem,2.6vw,1.8rem);color:var(--plum);margin-bottom:.25em;
  line-height:1.15}
.rwladder__head p{color:var(--muted);font-size:.95rem}
.rwladder__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:18px;margin-bottom:46px}
.rwtier{position:relative;background:var(--card);border:1.5px solid var(--line);
  border-radius:18px;padding:24px 18px 20px;text-align:center;box-shadow:var(--shadow-sm);
  transition:.2s ease}
.rwtier:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.rwtier__ic{font-size:2rem;line-height:1;margin-bottom:.5em}
.rwtier__name{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1rem;
  color:var(--plum);margin-bottom:.3em;line-height:1.25;min-height:2.5em}
.rwtier__give{font-size:.8rem;color:var(--muted);margin-bottom:.8em}
.rwtier__badge{display:inline-flex;align-items:center;gap:.3em;background:var(--cherry);
  color:#fff;font-weight:700;font-size:.82rem;padding:.35em .85em;border-radius:999px;
  direction:ltr;unicode-bidi:isolate}
.rwtier--top{border-color:var(--gold);box-shadow:0 18px 40px -22px rgba(199,162,75,.55)}
.rwtier__ribbon{position:absolute;top:-11px;inset-inline-start:50%;transform:translateX(-50%);
  background:var(--gold);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:.35em .9em;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.35)}
.rwtier--top .rwtier__badge{background:linear-gradient(135deg,var(--gold),#B5872F)}

/* join / keep going */
.rwcta{text-align:center;margin-top:4px}
.rwcta p{color:var(--muted);margin-bottom:1em;font-size:.98rem}

/* ---- flavours ----
   A flavour sells on how it looks, so the photograph gets the whole top of
   the card. Names, photos and accent colours all come from the catalog
   (/api/products — each dessert carries its own flavours), and the accent
   colour stays an accent: a thin bar under the photo and a dot by the name —
   never the main visual.

   The showcase is TABBED, one tab per dessert that offers a flavour choice,
   because "which flavours can I have?" only has an answer once you have said
   what you are ordering. The tabs are a pill row — the same shape as every
   other chip on the site — and they wrap rather than scroll, so at 375px the
   three of them still read as one group. */
.flavours-sec{background:#fff}
.flavour-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 26px}
.flavour-tab{font-family:"Jost",system-ui,sans-serif;font-size:.95rem;font-weight:500;
  color:var(--muted);background:#fff;border:1.5px solid var(--line);border-radius:999px;
  padding:.6em 1.35em;min-height:44px;cursor:pointer;transition:.2s ease;white-space:nowrap}
.flavour-tab:hover{border-color:var(--plum);color:var(--plum)}
.flavour-tab[aria-selected="true"]{background:var(--plum);border-color:var(--plum);color:#fff;
  box-shadow:var(--shadow-sm)}
.flavour-tab:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.flavours{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.flavour{--fc:#7A2E52;background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow-sm);transition:.22s ease}
.flavour:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#e3d3ce}
.flavour__img{position:relative;aspect-ratio:1/1;overflow:hidden;
  background:linear-gradient(135deg,#efe2dc,#e7d3ca)}
.flavour__img img{width:100%;height:100%;object-fit:cover;transition:.6s}
.flavour:hover .flavour__img img{transform:scale(1.06)}
.flavour__img::after{content:"";position:absolute;inset-inline:0;bottom:0;height:4px;background:var(--fc);
  z-index:3}
/* ---- a flavour photographed more than once ----
   A strawberry cheesecake is sold as a mini AND as a whole cake: two pictures
   of one flavour. The card carries both, stacked, with only the lit one
   opaque — so turning it is a crossfade and never a fetch. The whole photo is
   the button, because on a phone the photo is what a thumb lands on, and the
   dots are the only thing that says there is more to see. A card with one
   photo gets none of this: no button, no dots, nothing to suggest a tap. */
.flavour__img--set img{position:absolute;inset:0;opacity:0;
  transition:opacity .45s ease,transform .6s ease}
.flavour__img--set img.is-on{opacity:1}
.flavour__flip{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;
  justify-content:center;padding:0 0 12px;border:0;background:transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.flavour__flip:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.flavour__dots{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;
  background:rgba(28,18,24,.38);transition:.2s ease}
.flavour__dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);
  transition:.2s ease}
.flavour__dots i.is-on{background:#fff;transform:scale(1.3)}
.flavour__flip:hover .flavour__dots{background:rgba(28,18,24,.55)}
/* A flavour with no photo yet is still a flavour the shop sells, so it keeps
   its card and wears its own colour: a tinted panel with its initial. */
.flavour__img--none{display:grid;place-items:center}
.flavour__img--none::before{content:"";position:absolute;inset:0;background:var(--fc);opacity:.13}
.flavour__img--none span{position:relative;font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:2.8rem;line-height:1;color:var(--fc);opacity:.55}
.flavour__meta{padding:14px 12px 16px;text-align:center}
.flavour__dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--fc);
  margin-bottom:.5em;transition:.2s}
.flavour:hover .flavour__dot{transform:scale(1.45)}
.flavour__meta h3{font-size:1rem;font-weight:600;color:var(--plum);line-height:1.3}
.flavour__meta p{font-size:.78rem;color:var(--muted);margin-top:.25em;line-height:1.45}
.flavours-note{text-align:center;margin-top:26px;color:var(--muted);font-size:.95rem}
.flavours-note b{color:var(--cherry);font-weight:600}

/* ---- how to order ---- */
.how-sec{background:linear-gradient(180deg,#fff,var(--cream))}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 20px;text-align:start}
.step__n{width:34px;height:34px;border-radius:50%;background:var(--cherry);color:#fff;
  font-family:"Fraunces",Georgia,serif;font-weight:600;display:grid;place-items:center;margin-bottom:14px}
.step h4{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.12rem;color:var(--plum);
  margin-bottom:.3em}
.step p{font-size:.9rem;color:var(--muted)}

/* ---- story ---- */
.story{background:var(--plum);color:#fff;text-align:center}
.story .eyebrow{color:#F3C9B4}
.story h2{font-size:clamp(1.9rem,3.6vw,2.6rem);margin:.3em auto .5em;max-width:14em;line-height:1.12;
  color:#fff}
.story p{color:#D9C7E4;max-width:34em;margin:0 auto;font-size:1.05rem}
.story__cta{margin-top:2em}

/* ---- footer ---- */
.foot{background:var(--plum-deep);color:#C9B6D6;padding:52px 0 30px}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;padding-bottom:30px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.foot__logo img{height:52px;margin-bottom:1rem}
.foot__tag{font-size:.9rem;color:#C9B6D6;max-width:34ch;line-height:1.7}
.foot h5{font-family:"Jost",system-ui,sans-serif;font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:#8f7ba0;font-weight:600;margin-bottom:.9em}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.foot li a,.foot li{font-size:.9rem;color:#C9B6D6;transition:.2s;line-height:1.6}
.foot li a:hover{color:#fff}
.foot__bottom{padding-top:22px;display:flex;justify-content:center;flex-wrap:wrap;gap:.4em;
  font-size:.82rem;color:#8f7ba0}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(22px);transition:.7s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ---- responsive ---- */
@media(max-width:900px){
  .nav__links{gap:18px}
  .acctchip{max-width:none;padding:.3em .7em}
  /* the header has the language pill, the cart and the hamburger to fit too;
     the star and the number carry the meaning, and the drawer says the rest */
  .acctchip__name{display:none}
  .nav__me{flex-direction:column;align-items:flex-start;gap:.35rem}
  .nav__me__in{display:flex;flex-direction:column;gap:.1rem;color:var(--plum)}
  .hero__wrap{grid-template-columns:1fr;gap:30px;text-align:center}
  .hero__sub{margin-inline:auto}
  .hero__cta,.hero__trust{justify-content:center}
  .hero__art{max-width:360px;margin:0 auto}
  .menu-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .rwsteps{grid-template-columns:1fr}
  .flavours{grid-template-columns:repeat(3,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__logo{grid-column:1/-1}
}
@media(max-width:620px){
  /* the links become an off-canvas panel; the language pill and the cart
     stay in the header, where they are always one tap away */
  .nav__links{position:fixed;top:0;right:0;left:auto;height:100vh;height:100dvh;
    width:min(80vw,300px);flex-direction:column;justify-content:center;gap:1.6rem;
    background:var(--cream);padding:2rem;margin:0;transform:translateX(100%);transition:transform .35s;
    box-shadow:-20px 0 60px -30px rgba(0,0,0,.4);z-index:65}
  .nav__links.open{transform:none}
  .nav__links a{font-size:1.12rem}
  .nav__toggle{display:block;z-index:70}
  .nav.menu-open .nav__toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav.menu-open .nav__toggle span:nth-child(2){opacity:0}
  .nav.menu-open .nav__toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .nav__act .btn{display:none}
  .section{padding:48px 0}
  .hero__wrap{padding-top:40px;padding-bottom:40px}
  .menu-grid{grid-template-columns:1fr 1fr;gap:14px}
  .cat__body{padding:14px}
  .cat__body h3{font-size:1.05rem}
  .cat__link{padding:.7em .6em;font-size:.86rem}
  .occ{padding:20px 14px;gap:.25em}
  .occ h3{font-size:1.05rem}
  .occ p{font-size:.84rem}
  .occ .btn{padding:.7em .6em;font-size:.86rem}
  .flavours{grid-template-columns:repeat(2,1fr);gap:12px}
  .flavour__meta{padding:12px 10px 14px}
  .flavour__meta h3{font-size:.94rem}
  .steps{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .foot__logo{grid-column:auto}
  .offers-panel{padding:32px 18px 36px;border-radius:26px}
  .offers-panel__wm{font-size:5rem}
  .offers-grid{grid-template-columns:1fr}
  .rwstrip__in,.rwstrip--out{flex-direction:column;text-align:center;justify-content:center}
  .rwstrip__cta{width:100%}
  .rwstrip__cta .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* =====================================================================
   Arabic / RTL
   Additive: with lang="en" / dir="ltr" none of this applies, so the
   English page is exactly as authored above.
   ===================================================================== */
html[lang="ar"] body{font-family:"Cairo","Jost",system-ui,sans-serif}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{
  font-family:"Amiri","Fraunces",serif;line-height:1.35;font-variation-settings:normal}
html[lang="ar"] .step h4,html[lang="ar"] .step__n,html[lang="ar"] .hero__badge b,
html[lang="ar"] .cat__price,html[lang="ar"] .rwstep h4,html[lang="ar"] .rwstep__n,
html[lang="ar"] .rwstrip__num b,html[lang="ar"] .rwtier__name{font-family:"Amiri","Fraunces",serif}
html[lang="ar"] .foot h5,html[lang="ar"] .lang,html[lang="ar"] .btn,
html[lang="ar"] .cat__link{font-family:"Cairo","Jost",system-ui,sans-serif}
/* Parisienne has no Arabic glyphs */
html[lang="ar"] .script{font-family:"Amiri",serif;font-weight:700}
/* Arabic is a connected script: tracking breaks the joins */
html[lang="ar"] .eyebrow,html[lang="ar"] .sec-head .kicker,html[lang="ar"] .foot h5,
html[lang="ar"] .hero__badge small,html[lang="ar"] .hero h1,
html[lang="ar"] .rwstrip__num span,html[lang="ar"] .rwtier__ribbon{letter-spacing:normal}
/* a little more air for ascenders and descenders */
html[lang="ar"] .hero h1{line-height:1.28}
html[lang="ar"] .sec-head h2,html[lang="ar"] .story h2,
html[lang="ar"] .offers-head h2,html[lang="ar"] .rwladder__head h3{line-height:1.4}
html[lang="ar"] .hero__sub,html[lang="ar"] .sec-head p,html[lang="ar"] .story p,
html[lang="ar"] .offers-head p,html[lang="ar"] .rwstep p,html[lang="ar"] .rwladder__head p{line-height:1.85}
html[lang="ar"] .flavour__meta h3{font-size:.96rem}
html[lang="ar"] .offers-eyebrow,html[lang="ar"] .rewards-eyebrow{font-size:1.2rem}
/* Latin fragments inside Arabic (prices, phone numbers, handles) keep their own run */
html[lang="ar"] .cat__price,html[lang="ar"] .hero__badge b,html[lang="ar"] .foot li a,
html[lang="ar"] .foot__bottom span,html[lang="ar"] .hero__trust b{unicode-bidi:isolate}

/* ---- RTL mirroring ---- */
html[dir="rtl"] .cat__link:hover span{transform:translateX(-4px)}
html[dir="rtl"] .step{text-align:start}
@media(max-width:620px){
  /* the off-canvas panel slides in from the left in RTL */
  html[dir="rtl"] .nav__links{right:auto;left:0;transform:translateX(-100%);
    box-shadow:20px 0 60px -30px rgba(0,0,0,.4)}
  html[dir="rtl"] .nav__links.open{transform:none}
}
/* =====================================================================
   ORDER CONFIGURATOR + CART (Step 3.2)
   Additive: every rule below is scoped to the new .cartbtn / .sheet
   components, so the hero, cards, flavours, story, order and footer are
   byte-for-byte unaffected. RTL and Arabic tweaks live at the end.
   ===================================================================== */

.hide{display:none!important}

/* ---- nav cart button: the round icon + count badge from the design ---- */
.cartbtn{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid #d9ccd6;background:#fff;color:var(--plum);cursor:pointer;transition:.25s;flex:none}
.cartbtn:hover{border-color:var(--cherry);transform:translateY(-1px)}
.cartbtn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cartbtn svg{width:19px;height:19px;fill:currentColor;flex:none}
.cartbtn__n{position:absolute;top:-5px;inset-inline-end:-5px;background:var(--cherry);color:#fff;
  font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:.66rem;line-height:1;min-width:18px;
  height:18px;border-radius:999px;display:grid;place-items:center;padding:0 4px;
  direction:ltr;unicode-bidi:isolate}
.cartbtn.bump{animation:bump .4s}
@keyframes bump{0%,100%{transform:none}30%{transform:scale(1.14)}}

/* The product card CTA is a <button> once the configurator is live, and an
   <a> in the authored fallback. Both wear the same pill: .cat__link already
   states its own font, so nothing needs resetting here. */

/* ---- shared bottom sheet ---- */
.sheet{position:fixed;inset:0;z-index:90}
.sheet[hidden]{display:none}
.sheet__bg{position:absolute;inset:0;background:rgba(36,28,43,.62);animation:fade .25s}
.sheet__panel{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;
  background:var(--cream);border-radius:22px 22px 0 0;max-height:92dvh;
  box-shadow:0 -24px 70px -30px rgba(0,0,0,.55);animation:sheetUp .32s cubic-bezier(.22,.61,.36,1)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.sheet__head{display:flex;align-items:center;gap:.8rem;padding:1.1rem 1.2rem .8rem;
  border-bottom:1px solid var(--blush-2);flex:none}
.sheet__head h3{font-size:1.24rem;color:var(--plum);flex:1;min-width:0}
.sheet__x{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:var(--blush);
  color:var(--plum);font-size:1.5rem;line-height:1;cursor:pointer;transition:.2s}
.sheet__x:hover{background:var(--blush-2)}
.sheet__x:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.sheet__body{padding:1.1rem 1.2rem;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1}
.sheet__foot{padding:.9rem 1.2rem 1.2rem;border-top:1px solid var(--blush-2);background:var(--cream);flex:none}
@media(min-width:640px){
  .sheet__panel{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);
    width:min(560px,calc(100vw - 40px));border-radius:20px;max-height:88dvh;animation:pop .28s cubic-bezier(.22,.61,.36,1)}
  @keyframes pop{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%)}}
}

/* ---- configurator ---- */
.cfg__hero{display:flex;gap:.9rem;align-items:center;margin-bottom:1.2rem}
.cfg__hero img{width:76px;height:76px;border-radius:14px;object-fit:cover;flex:none;background:var(--blush)}
.cfg__hero h4{font-family:"Fraunces",serif;font-weight:700;font-size:1.1rem;color:var(--ink);line-height:1.2}
.cfg__hero p{font-size:.86rem;color:var(--muted);font-weight:300;margin-top:.25em}
.cfg__step{margin-bottom:1.3rem}
.cfg__lab{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-bottom:.6rem}
.cfg__lab b{font-family:"Jost";font-weight:500;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cherry)}
.cfg__lab span{font-size:.82rem;color:var(--muted);font-weight:300}

/* size rows */
.sizes{display:flex;flex-direction:column;gap:.5rem}
.size-opt{display:flex;align-items:center;gap:.7rem;background:#fff;border:1.5px solid var(--blush-2);
  border-radius:12px;padding:.75rem .9rem;cursor:pointer;transition:.2s;min-height:52px;
  /* a <button> centres its text by default; these read as rows, not labels */
  text-align:start;font:inherit;color:inherit;width:100%}
.size-opt:hover{border-color:var(--plum-soft)}
.size-opt.on{border-color:var(--cherry);background:#FFF9FA;box-shadow:0 0 0 3px rgba(166,28,36,.09)}
.size-opt:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.size-opt__tick{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--blush-2);
  background:#fff;display:grid;place-content:center;transition:.2s}
.size-opt.on .size-opt__tick{border-color:var(--cherry);background:var(--cherry)}
.size-opt.on .size-opt__tick::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.size-opt__t{flex:1;min-width:0;font-size:.96rem}
.size-opt__t small{display:block;font-size:.78rem;color:var(--muted);font-weight:300;margin-top:.1em}
.size-opt__p{font-family:"Fraunces",serif;font-weight:700;font-size:1rem;color:var(--plum);
  direction:ltr;unicode-bidi:isolate;flex:none}

/* up_to_n flavour chips */
.fchips{display:flex;flex-wrap:wrap;gap:.5rem}
.fchip{--fc:var(--plum);display:inline-flex;align-items:center;gap:.45em;background:#fff;
  border:1.5px solid var(--blush-2);border-radius:999px;padding:.5em .95em;cursor:pointer;
  font-size:.9rem;min-height:42px;transition:.2s}
.fchip__dot{width:10px;height:10px;border-radius:50%;background:var(--fc);flex:none;transition:.2s}
.fchip:hover{border-color:var(--fc)}
.fchip.on{border-color:var(--fc);background:#FFF9FA;box-shadow:0 0 0 3px rgba(166,28,36,.09);font-weight:500}
.fchip.on .fchip__dot{transform:scale(1.35)}
.fchip.full:not(.on){opacity:.45;cursor:not-allowed}
.fchip:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* by_count flavour counters */
.fcounts{display:flex;flex-direction:column;gap:.4rem}
.fcount{--fc:var(--plum);display:flex;align-items:center;gap:.6rem;background:#fff;
  border:1.5px solid var(--blush-2);border-radius:12px;padding:.55rem .7rem .55rem .9rem;transition:.2s}
/* a chosen flavour should be unmistakable at a glance */
.fcount.on{border-color:var(--fc);background:#FFFCFD}
.fcount.on .fcount__n{font-weight:500}
.fcount.on .step2{background:#fff}
.fcount.on .step2 output{color:var(--cherry)}
.fcount__dot{width:11px;height:11px;border-radius:50%;background:var(--fc);flex:none;transition:.2s}
.fcount.on .fcount__dot{transform:scale(1.3)}
.fcount__n{flex:1;min-width:0;font-size:.94rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* +/- stepper, shared by flavour counters, quantity and cart lines */
.step2{display:inline-flex;align-items:center;gap:.15rem;flex:none;background:var(--blush);
  border-radius:999px;padding:2px}
.step2 button{width:34px;height:34px;border-radius:50%;border:0;background:#fff;color:var(--plum);
  font-size:1.15rem;line-height:1;cursor:pointer;transition:.18s;display:grid;place-content:center}
.step2 button:hover:not(:disabled){background:var(--cherry);color:#fff}
.step2 button:disabled{opacity:.35;cursor:not-allowed}
.step2 button:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.step2 output{min-width:30px;text-align:center;font-family:"Fraunces",serif;font-weight:700;
  font-size:1rem;color:var(--ink);direction:ltr;unicode-bidi:isolate}

/* ---- live selection read-out: what is picked, what is left ----
   Sits BELOW the flavour list on purpose: it is rebuilt on every tap, and
   anything above the list would shift the rows under the customer's thumb. */
.cfg__sel{margin-top:.8rem}
.cfg__meter{height:5px;border-radius:999px;background:var(--blush-2);overflow:hidden}
.cfg__meter i{display:block;height:100%;border-radius:999px;background:var(--plum-soft);
  transition:width .25s ease,background .25s}
.cfg__meter.done i{background:#3BA55C}
.cfg__meter.over i{background:var(--cherry)}
.cfg__selrow{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  margin-top:.5rem;flex-wrap:wrap}
.cfg__selrow b{font-family:"Fraunces",serif;font-weight:700;font-size:1rem;color:var(--plum)}
.cfg__selrow span{font-size:.84rem;color:var(--muted);font-weight:300}
.cfg__selrow.done b{color:#2E7D32}
.cfg__selrow.over b{color:var(--cherry)}

/* compact read-out of the current mix (by_count only) */
.mix{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
.mixchip{--fc:var(--plum);display:inline-flex;align-items:center;gap:.4em;background:#fff;
  border:1px solid var(--blush-2);border-radius:999px;padding:.3em .7em;font-size:.82rem;
  color:var(--ink);direction:ltr;unicode-bidi:isolate}
.mixchip i{width:8px;height:8px;border-radius:50%;background:var(--fc);flex:none}

/* live guidance — informative, never scolding */
.cfg__hint{display:flex;align-items:center;gap:.5em;margin-top:.7rem;font-size:.86rem;
  font-weight:300;color:var(--muted);border-radius:10px;padding:.55em .8em;background:var(--blush)}
.cfg__hint.ok{color:#2E7D32;background:#EAF5EA}
.cfg__hint.bad{color:var(--cherry);background:#FDF2F3}
.cfg__hint b{font-weight:500}

/* footer: total + add */
.cfg__tot{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.7rem}
.cfg__tot span{font-size:.86rem;color:var(--muted);font-weight:300}
.cfg__tot b{font-family:"Fraunces",serif;font-weight:700;font-size:1.5rem;color:var(--plum);
  direction:ltr;unicode-bidi:isolate}
.cfg__tot b s{color:var(--muted);opacity:.75;font-weight:400;margin-inline-end:.3em}
/* the offer applying to the current pick, right above the total it changed */
.cfg__offerline{font-size:.84rem;font-weight:600;color:#2E7D32;text-align:center;margin-bottom:.5rem}
.cfg__offerline:empty{display:none}
.btn--wide{width:100%;justify-content:center}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
/* secondary action on a light panel (.btn--ghost is for dark backgrounds) */
.btn--soft{background:#fff;border-color:var(--blush-2);color:var(--plum)}
.btn--soft:hover{border-color:var(--plum);background:#fff;transform:translateY(-2px)}

/* ---- "added to cart" confirmation ---- */
.added{text-align:center;padding:.6rem 0 .4rem}
.added__tick{width:54px;height:54px;margin:0 auto .8rem;border-radius:50%;background:#EAF5EA;
  color:#2E7D32;font-size:1.5rem;display:grid;place-content:center}
.added h4{font-family:"Fraunces",serif;font-weight:700;font-size:1.2rem;color:var(--plum);margin-bottom:.9rem}
.added__line{background:#fff;border:1px solid var(--blush-2);border-radius:12px;
  padding:.8rem .9rem;text-align:start}
.added__line b{display:block;font-size:.98rem;color:var(--ink)}
.added__line span{display:block;font-size:.84rem;color:var(--muted);font-weight:300;margin-top:.15em}
.added__line .added__f{color:var(--plum);font-weight:400;margin-top:.3em}
.added__cart{margin-top:.9rem;font-size:.88rem;color:var(--muted);font-weight:300}

/* ---- cart ---- */
.citem{display:flex;gap:.8rem;padding:.9rem 0;border-bottom:1px solid var(--blush-2)}
.citem:last-child{border-bottom:0}
.citem__img{width:58px;height:58px;border-radius:11px;object-fit:cover;flex:none;background:var(--blush)}
.citem__main{flex:1;min-width:0}
.citem__t{font-family:"Fraunces",serif;font-weight:700;font-size:1rem;color:var(--ink);line-height:1.25}
.citem__s{font-size:.82rem;color:var(--muted);font-weight:300;margin-top:.15em}
.citem__f{font-size:.82rem;color:var(--plum);margin-top:.3em;line-height:1.5}
.citem__row{display:flex;align-items:center;gap:.6rem;margin-top:.6rem;flex-wrap:wrap}
/* margin-inline-start resolves against THIS element's own `direction`. The
   price used to carry direction:ltr for its numerals, which turned the auto
   margin into margin-left even in an RTL row — pushing the price towards the
   other controls instead of away from them and bunching the whole row. The
   numerals are isolated on an inner span now, so the flex item inherits the
   row's direction and the auto margin pushes the right way in both languages. */
.citem__p{font-family:"Fraunces",serif;font-weight:700;font-size:1rem;color:var(--plum);
  margin-inline-start:auto;flex:none}
.citem__p .num{direction:ltr;unicode-bidi:isolate;display:inline-block}
/* An eligible offer's original price, struck through — same treatment as
   .cfg__tot b s and .size-opt__p s, so an item reads the same way here as it
   did in the configurator it was added from. */
.citem__p s{color:var(--muted);opacity:.75;font-weight:400;margin-inline-end:.35em}
.citem__off{font-size:.78rem;color:#2E7D32;font-weight:600;margin-top:.3em}
/* a real touch target: this was 24x23px in Arabic (52x23 in English), small
   enough that thumbs missed it and the remove looked broken */
.citem__x{flex:none;background:none;border:0;cursor:pointer;color:var(--muted);font-size:.8rem;
  text-decoration:underline;white-space:nowrap;padding:.5em .6em;margin-inline-start:-.6em;
  min-height:44px;min-width:44px;border-radius:9px;transition:.2s}
.citem__x:hover{color:var(--cherry);background:var(--blush)}
.citem__x:active{background:var(--blush-2)}
.citem__x:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.csum{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-top:.9rem;margin-top:.2rem;border-top:2px solid var(--blush-2)}
.csum span{font-size:.95rem;color:var(--muted)}
.csum b{font-family:"Fraunces",serif;font-weight:700;font-size:1.6rem;color:var(--plum);
  direction:ltr;unicode-bidi:isolate}
/* an active offer's estimated saving, above the subtotal line — the real
   figure is decided server-side and shown again on the receipt */
.csum__off{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-top:.5rem;font-size:.9rem}
.csum__off span{color:#2E7D32}
.csum__off b{color:#2E7D32;font-weight:600;direction:ltr;unicode-bidi:isolate}
.cempty{text-align:center;padding:2.4rem 1rem 2rem}
.cempty__ic{font-size:2.4rem;line-height:1;margin-bottom:.6rem}
.cempty h4{font-family:"Fraunces",serif;font-weight:700;font-size:1.15rem;color:var(--plum);margin-bottom:.4em}
.cempty p{font-size:.9rem;color:var(--muted);font-weight:300}
.csoon{text-align:center;font-size:.76rem;color:var(--muted);font-weight:300;margin-top:.7rem}

/* ---- Arabic / RTL for the new components ---- */
html[lang="ar"] .cfg__hero h4,html[lang="ar"] .citem__t,html[lang="ar"] .cempty h4,
html[lang="ar"] .sheet__head h3,html[lang="ar"] .added h4,
html[lang="ar"] .cfg__selrow b{font-family:"Amiri","Fraunces",serif}
/* the mix chips are "4× كرز": a Latin count leading an Arabic name */
html[dir="rtl"] .mixchip{direction:rtl}
html[dir="rtl"] .mixchip i{order:-1}
html[lang="ar"] .cfg__lab b{letter-spacing:normal}
/* prices and counters stay a Latin-numeral run inside Arabic text */
html[lang="ar"] .size-opt__p,html[lang="ar"] .cfg__tot b,html[lang="ar"] .csum b,
html[lang="ar"] .citem__p,html[lang="ar"] .step2 output,html[lang="ar"] .cartbtn__n{
  font-family:"Amiri","Fraunces",serif;unicode-bidi:isolate}
html[dir="rtl"] .fcount{padding:.55rem .9rem .55rem .7rem}

/* =======================================================================
   CHECKOUT (Step 3.3) — lives in the same bottom sheet as the cart, so it
   inherits .sheet__*, .btn, .cfg__lab, .cfg__step and the size-option tick.
   Only what is genuinely new is defined here.
   ======================================================================= */
.co__load{text-align:center;padding:2.6rem 1rem;color:var(--muted);font-weight:300}

/* ---- progress ---- */
.co__prog{margin-bottom:1.1rem}
.co__bar{height:5px;border-radius:999px;background:var(--blush-2);overflow:hidden}
.co__bar i{display:block;height:100%;border-radius:999px;background:var(--cherry);
  transition:width .35s cubic-bezier(.4,0,.2,1)}
.co__pm{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;margin-top:.5rem}
.co__pm span{font-family:"Jost";font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:400}
.co__pm b{font-family:"Fraunces",serif;font-weight:700;font-size:1rem;color:var(--plum);
  text-align:end}
.co__lead{font-size:1.02rem;color:var(--ink);margin-bottom:1.1rem;line-height:1.5}

/* ---- fields ---- */
.co__f{margin-bottom:1rem}
.co__f label{display:flex;align-items:baseline;gap:.5rem;font-family:"Jost";font-weight:500;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--plum);margin-bottom:.45rem}
.co__opt{font-size:.68rem;letter-spacing:.08em;color:var(--muted);font-weight:300;
  text-transform:none;letter-spacing:normal}
.co__f input,.co__f textarea{width:100%;font-family:"Jost";font-size:1rem;color:var(--ink);
  background:#fff;border:1.5px solid var(--blush-2);border-radius:12px;padding:.75em .9em;
  min-height:48px;transition:.2s;resize:vertical}
.co__f textarea{line-height:1.5}
.co__f input:focus,.co__f textarea:focus{outline:none;border-color:var(--plum);
  box-shadow:0 0 0 3px rgba(73,49,93,.1)}
.co__f input::placeholder,.co__f textarea::placeholder{color:#A99DB0;font-weight:300}
.co__f small{display:block;margin-top:.4rem;font-size:.8rem;color:var(--muted);font-weight:300;line-height:1.45}
.co__f.bad input,.co__f.bad textarea{border-color:var(--cherry);background:#FFFCFC}
.co__f small.bad{color:var(--cherry)}
.co__ferr{font-size:.84rem;color:var(--cherry);background:#FDF2F3;border-radius:10px;
  padding:.5em .8em;margin-bottom:.6rem}

/* ---- big option cards (delivery/pickup, cliq/cash) ---- */
.ocards{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.3rem}
.ocard{display:flex;align-items:center;gap:.85rem;background:#fff;border:1.5px solid var(--blush-2);
  border-radius:14px;padding:.85rem 1rem;cursor:pointer;text-align:start;transition:.2s;
  font-family:"Jost";color:var(--ink);width:100%}
.ocard:hover{border-color:var(--plum-soft)}
.ocard.on{border-color:var(--cherry);background:#FFF9FA;box-shadow:0 0 0 3px rgba(166,28,36,.09)}
.ocard:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.ocard__i{font-size:1.5rem;line-height:1;flex:none}
.ocard__t{flex:1;min-width:0}
.ocard__t b{display:block;font-size:1rem;font-weight:500;color:var(--ink)}
.ocard__t span{display:block;font-size:.82rem;color:var(--muted);font-weight:300;margin-top:.12em;line-height:1.4}
.ocard__tick{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--blush-2);
  display:grid;place-items:center;transition:.2s}
.ocard.on .ocard__tick{border-color:var(--cherry);background:var(--cherry)}
.ocard.on .ocard__tick::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}

/* ---- delivery zones (same row grammar as the size options) ---- */
.zones{display:flex;flex-direction:column;gap:.5rem}
.zone{display:flex;align-items:center;gap:.7rem;background:#fff;border:1.5px solid var(--blush-2);
  border-radius:13px;padding:.75rem .9rem;cursor:pointer;text-align:start;transition:.2s;
  font-family:"Jost";color:var(--ink);width:100%}
.zone:hover{border-color:var(--plum-soft)}
.zone.on{border-color:var(--cherry);background:#FFF9FA;box-shadow:0 0 0 3px rgba(166,28,36,.09)}
.zone:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.zone.on .size-opt__tick{border-color:var(--cherry);background:var(--cherry)}
.zone.on .size-opt__tick::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.zone__t{flex:1;min-width:0;font-size:.96rem}
.zone__p{font-family:"Fraunces",serif;font-weight:700;font-size:.98rem;color:var(--plum);
  flex:none;direction:ltr;unicode-bidi:isolate}

/* ---- notes / info cards ---- */
.co__note{font-size:.86rem;color:var(--muted);font-weight:300;line-height:1.55;
  background:var(--blush);border-radius:12px;padding:.75em .9em;margin-bottom:1rem}
.co__card{background:#fff;border:1.5px solid var(--blush-2);border-radius:14px;
  padding:.95rem 1rem;margin-bottom:1.1rem}
.co__card>b{display:block;font-family:"Jost";font-weight:500;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--plum);margin-bottom:.5rem}
.co__card p{font-size:.88rem;color:var(--muted);font-weight:300;line-height:1.6}
.co__kv{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.35rem 0;font-size:.92rem}
.co__kv span{color:var(--muted);font-weight:300}
.co__kv b{font-family:"Fraunces",serif;font-weight:700;color:var(--plum)}
.co__card .co__kv+p{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--blush-2)}
.num{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ---- date + time chips ---- */
.chiprow{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.35rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chiprow::-webkit-scrollbar{display:none}
.dchip{flex:none;min-width:78px;background:#fff;border:1.5px solid var(--blush-2);border-radius:13px;
  padding:.6rem .7rem;cursor:pointer;text-align:center;font-family:"Jost";color:var(--ink);transition:.2s}
.dchip b{display:block;font-size:.9rem;font-weight:500}
.dchip span{display:block;font-size:.76rem;color:var(--muted);font-weight:300;margin-top:.1em}
.dchip:hover{border-color:var(--plum-soft)}
.dchip.on{border-color:var(--cherry);background:#FFF9FA;box-shadow:0 0 0 3px rgba(166,28,36,.09)}
.dchip.on span{color:var(--cherry)}
.dchip:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.tchips{display:flex;flex-wrap:wrap;gap:.45rem}
.tchip{background:#fff;border:1.5px solid var(--blush-2);border-radius:999px;padding:.5em 1em;
  font-family:"Jost";font-size:.9rem;color:var(--ink);cursor:pointer;transition:.2s;
  direction:ltr;unicode-bidi:isolate;min-height:40px}
.tchip:hover{border-color:var(--plum-soft)}
.tchip.on{border-color:var(--cherry);background:var(--cherry);color:#fff;font-weight:500}
.tchip:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:-.4rem 0 1.1rem}
.ochip{background:var(--blush);border:1.5px solid transparent;border-radius:999px;padding:.4em .9em;
  font-family:"Jost";font-size:.84rem;color:var(--plum);cursor:pointer;transition:.2s}
.ochip:hover{border-color:var(--plum-soft);background:#fff}
.ochip:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---- review ---- */
.co__blk{background:#fff;border:1px solid var(--blush-2);border-radius:14px;
  padding:.9rem 1rem;margin-bottom:.7rem}
.co__blkh{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.5rem}
.co__blkh b{font-family:"Jost";font-weight:500;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--plum)}
.co__edit{background:none;border:0;cursor:pointer;color:var(--cherry);font-family:"Jost";
  font-size:.82rem;text-decoration:underline;padding:.4em .5em;margin-inline-end:-.5em;border-radius:8px}
.co__edit:hover{background:var(--blush)}
.co__edit:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.co__blk p{font-size:.94rem;line-height:1.55}
.co__dim{color:var(--muted);font-weight:300;font-size:.86rem!important;margin-top:.2em}
.co__item{display:flex;align-items:flex-start;justify-content:space-between;gap:.9rem;
  padding:.5rem 0;border-bottom:1px solid var(--blush-2)}
.co__item:last-child{border-bottom:0;padding-bottom:0}
.co__item b{font-size:.95rem;font-weight:500}
.co__item span{display:block;font-size:.82rem;color:var(--muted);font-weight:300;margin-top:.1em}
.co__item .co__fl{color:var(--plum);font-weight:400}
.co__item .co__offlabel{color:#2E7D32;font-weight:600}
.co__item>b{flex:none;font-family:"Fraunces",serif;font-weight:700;color:var(--plum)}
.co__item>b s{color:var(--muted);opacity:.75;font-weight:400;margin-inline-end:.3em}
.co__sums{margin-top:1rem;padding-top:.3rem;border-top:2px solid var(--blush-2)}
.co__kv--tot{padding-top:.5rem;margin-top:.3rem;border-top:1px solid var(--blush-2)}
.co__kv--tot span{color:var(--ink);font-weight:400}
.co__kv--tot b{font-size:1.4rem}

/* ---- errors ---- */
.co__bad{background:#FDF2F3;border:1px solid #E9C3C6;border-radius:14px;padding:.9rem 1rem;
  margin-bottom:1.1rem}
.co__bad b{display:block;font-family:"Fraunces",serif;font-weight:700;font-size:1rem;
  color:var(--cherry);margin-bottom:.3rem}
.co__bad p{font-size:.9rem;color:var(--ink);font-weight:300;line-height:1.55}
.co__badq{color:var(--muted)!important;font-size:.84rem!important;margin-top:.35rem}
.co__bad .btn{margin-top:.7rem}
.btn--sm{padding:.55em 1.1em;font-size:.86rem}

/* ---- footer nav ---- */
.co__nav{display:flex;gap:.6rem}
.co__nav .btn{flex:1;justify-content:center}
.co__nav #coBack{flex:0 0 auto;min-width:96px}
.co__fine{text-align:center;font-size:.78rem;color:var(--muted);font-weight:300;margin-top:.6rem}

/* the quiet second door under the cart's primary action */
.calt{display:flex;align-items:center;justify-content:center;gap:.45em;width:100%;
  background:none;border:0;cursor:pointer;color:var(--muted);font-family:"Jost";font-size:.85rem;
  font-weight:300;padding:.8em .6em .2em;text-decoration:underline;text-underline-offset:3px;
  border-radius:10px;transition:.2s}
.calt:hover{color:var(--cherry)}
.calt:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.calt svg{width:17px;height:17px;fill:currentColor;flex:none}

/* ---- the confirmation moment ---- */
.done{text-align:center;padding:.4rem 0 .6rem}
.done__tick{width:66px;height:66px;margin:0 auto 1rem;border-radius:50%;background:#EAF5EA;
  color:#2E7D32;display:grid;place-items:center;font-size:1.9rem;
  animation:pop .5s cubic-bezier(.2,1.3,.4,1) both}
@keyframes pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.done h4{font-family:"Fraunces",serif;font-weight:700;font-size:1.35rem;color:var(--plum);
  line-height:1.25;margin-bottom:.5rem}
.done__sub{font-size:.95rem;color:var(--muted);font-weight:300;line-height:1.6;
  max-width:34ch;margin:0 auto}
.done__no{margin:1.2rem auto;background:#fff;border:1.5px dashed var(--blush-2);border-radius:14px;
  padding:.8rem 1rem;display:inline-flex;flex-direction:column;gap:.2rem;min-width:min(100%,240px)}
.done__no span{font-family:"Jost";font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.done__no b{font-family:"Fraunces",serif;font-weight:700;font-size:1.35rem;color:var(--cherry)}
.done__next{text-align:start;background:var(--blush);border-radius:14px;padding:.95rem 1.1rem}
.done__next b{display:block;font-family:"Jost";font-weight:500;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--plum);margin-bottom:.55rem}
.done__next ul{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.done__next li{position:relative;padding-inline-start:1.5rem;font-size:.9rem;color:var(--ink);
  font-weight:300;line-height:1.55}
.done__next li::before{content:"";position:absolute;inset-inline-start:.35rem;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--cherry)}
/* The nudge towards the WhatsApp button in the footer: warm, quiet, and never
   alarming — the order is saved whether or not it is tapped. */
.done__wa{margin-top:1rem;background:#F1F8F1;border:1px solid #D6E8D6;border-radius:14px;
  padding:.7rem .9rem;font-size:.86rem;font-weight:300;line-height:1.55;color:var(--ink);
  text-align:start;max-width:min(100%,360px);margin-inline:auto}
.done__love{margin-top:1rem;font-size:1.25rem}

/* ---- REFERRALS -------------------------------------------------------------
   Three small pieces: the ribbon a referred friend lands on, the discount
   lines in the checkout summary, and the share card on the confirmation.
   All three flip with the page: nothing is pinned left or right, and the only
   thing forced to LTR is the link itself, which is a URL in both languages. */

/* the welcome ribbon — fixed to the bottom so it never covers the menu */
.refbar{position:fixed;inset-inline:12px;bottom:12px;z-index:60;display:flex;align-items:center;
  gap:.7rem;background:var(--plum);color:#fff;border-radius:16px;padding:.8rem .9rem;
  box-shadow:0 22px 46px -22px rgba(48,31,66,.85);max-width:min(100% - 24px,460px);
  margin-inline:auto;transform:translateY(140%);opacity:0;transition:transform .38s
  cubic-bezier(.2,.9,.3,1),opacity .38s}
.refbar.in{transform:none;opacity:1}
.refbar__ic{font-size:1.5rem;flex:none;line-height:1}
.refbar__t{display:flex;flex-direction:column;gap:.15rem;min-width:0;text-align:start}
.refbar__t b{font-family:"Fraunces",serif;font-weight:700;font-size:.98rem}
.refbar__t span{font-size:.84rem;font-weight:300;opacity:.9;line-height:1.45}
.refbar__x{flex:none;margin-inline-start:auto;background:rgba(255,255,255,.14);border:0;
  color:#fff;width:30px;height:30px;border-radius:50%;font-size:1.15rem;line-height:1;cursor:pointer}
.refbar__x:hover{background:rgba(255,255,255,.26)}
.refbar__x:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* a discount is good news, so it is green rather than another charge in black */
.co__kv--off b{color:#2E7D32}
.co__kv--off span{color:#2E7D32;font-weight:400}

/* what the rewards actually took off, printed on the confirmation */
.done__saved{margin:1rem auto 0;background:#EAF5EA;border-radius:14px;padding:.8rem 1rem;
  text-align:start;max-width:min(100%,340px)}
.done__kv{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  font-size:.9rem;padding:.15rem 0}
.done__kv span{color:#2E7D32;font-weight:300}
.done__kv b{font-family:"Fraunces",serif;font-weight:700;color:#2E7D32}
.done__kv--tot{margin-top:.35rem;padding-top:.45rem;border-top:1px solid #CFE6D0}
.done__kv--tot span{color:var(--ink);font-weight:400}
.done__kv--tot b{color:var(--plum);font-size:1.15rem}
.done__note{margin-top:.8rem;font-size:.86rem;font-weight:300;color:var(--muted);line-height:1.55;
  max-width:38ch;margin-inline:auto}
/* cashback: EARNED, not deducted — gold rather than the green of a discount,
   so the two can never be read as the same kind of number */
/* ---- checkout: collect your points ----
   A soft plum card around an optional field, so it reads as an invitation
   rather than another thing the customer has to fill in before they can eat. */
.co__pts{margin-top:1.1rem;background:linear-gradient(150deg,#F7F2FA 0%,#F3E9E2 100%);
  border:1px solid #E5D8EC;border-radius:16px;padding:.9rem 1rem .35rem}
.co__ptsh{display:flex;align-items:center;gap:.45rem;font-size:.95rem;color:var(--plum);
  margin-bottom:.25rem}
.co__ptsh b{font-family:"Fraunces",Georgia,serif;font-weight:600}
.co__ptse{font-size:.86rem;color:var(--cherry);font-weight:500;margin-bottom:.6rem}
.co__pts .co__f{margin-bottom:.6rem}
/* signed in: a greeting rather than a form */
.co__pts--in{background:linear-gradient(150deg,#F1EAF6 0%,#F6EEF3 100%);border-color:#E0D0EA;
  padding-bottom:.9rem}
.co__ptsin{font-size:.88rem;color:var(--plum);font-weight:500;margin-bottom:.15rem}
.co__pts input{letter-spacing:.5em;text-align:center;font-family:"Fraunces",Georgia,serif;
  font-size:1.15rem;font-weight:600;color:var(--plum);max-width:9rem}
html[dir="rtl"] .co__pts input{letter-spacing:.5em}

/* ---- checkout: spend your points ----
   Sits on the review step, just above the sums, so choosing a reward and seeing
   what it does to the total is one glance rather than two. */
.co__pz{margin:1.1rem 0 .6rem;background:linear-gradient(150deg,#F7F2FA 0%,#F3E9E2 100%);
  border:1px solid #E5D8EC;border-radius:16px;padding:.9rem 1rem 1rem}
.co__pz--out{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.co__pz--out p{font-size:.87rem;color:var(--muted);font-weight:300;flex:1;min-width:12rem;margin:0}
.co__pzh{display:flex;align-items:center;gap:.45rem;font-size:.95rem;color:var(--plum);margin-bottom:.15rem}
.co__pzh b{font-family:"Fraunces",Georgia,serif;font-weight:600}
.co__pzb{margin-inline-start:auto;font-size:.82rem;font-weight:500;color:var(--cherry);white-space:nowrap}
.co__pzp{font-size:.85rem;color:var(--muted);font-weight:300;margin-bottom:.6rem}
.co__pzn{font-size:.86rem;color:var(--muted);font-weight:300;margin-top:.3rem}
.pzlist{display:flex;flex-direction:column;gap:.45rem}
.pz{display:flex;align-items:center;gap:.6rem;width:100%;text-align:start;cursor:pointer;
  background:#fff;border:1.5px solid var(--blush-2);border-radius:14px;padding:.7rem .8rem;
  transition:.18s;position:relative;font:inherit;color:inherit}
.pz:hover{border-color:var(--plum)}
.pz.on{border-color:var(--cherry);background:#FFF8F9;box-shadow:0 0 0 3px rgba(166,28,36,.08)}
.pz.off{opacity:.55;cursor:not-allowed}
.pz:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.pz__i{font-size:1.5rem;line-height:1;flex:none}
.pz__b{flex:1;min-width:0;display:flex;flex-direction:column}
.pz__b b{font-weight:600;font-size:.95rem;color:var(--plum)}
.pz__w{font-size:.82rem;color:var(--muted);font-weight:300}
.pz__need{font-size:.78rem;color:var(--cherry);font-weight:400;margin-top:.15rem}
.pz__c{font-size:.82rem;font-weight:600;color:var(--cherry);white-space:nowrap;flex:none}
/* the ONE size a free-item prize covers: a row, not a dead button. A greyed-out
   list of things you cannot have reads as a fault; one item with a note reads
   as a rule. */
.size-opt--fixed{cursor:default}
.size-opt--fixed:hover{transform:none}
.cfg__fixed{margin-top:.5rem;font-size:.84rem;color:var(--plum);font-weight:400;
  background:#F1EAF6;border-radius:12px;padding:.55rem .75rem;line-height:1.5}

/* a prize and, under it, the way to make it usable */
.pzrow{display:flex;flex-direction:column;gap:.3rem}
.pzadd{display:flex;align-items:center;gap:.45rem;width:100%;cursor:pointer;font:inherit;
  background:#FFF6F8;border:1.5px dashed #E3BFCC;border-radius:12px;padding:.55rem .75rem;
  color:var(--cherry);font-size:.85rem;font-weight:500;text-align:start;transition:.18s;
  margin-inline-start:auto;width:calc(100% - 1.2rem)}
.pzadd:hover{background:#fff;border-color:var(--cherry)}
.pzadd:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.pzadd__i{font-size:1rem;line-height:1;flex:none}

.pz--none{background:transparent;border-style:dashed}
.pz--none .pz__b b{font-weight:400;color:var(--muted);font-size:.9rem}
/* the chosen one fills its tick, exactly as a size or a zone does */
.pz.on .size-opt__tick{border-color:var(--cherry);background:var(--cherry)}
.pz.on .size-opt__tick::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}

/* ---- checkout: who is this order for? ----
   Two cards, side by side, defaulting to "me". The recipient fields only exist
   when the gift is chosen, so the common order is not made to pay for the rare
   one. */
.co__gift{margin-top:1.1rem}
/* .ocards is a column; the gift pair sits side by side, because "me or
   someone else" is one question with two short answers and stacking it makes a
   simple choice look like a form. */
.ocards--two{flex-direction:row;gap:.5rem;margin-bottom:0}
.ocards--two .ocard{flex:1;min-width:0}
.ocards--two .ocard{flex-direction:column;align-items:flex-start;gap:.25rem;padding:.75rem .8rem}
.ocards--two .ocard__i{font-size:1.4rem}
.ocards--two .ocard__t b{font-size:.92rem}
.ocards--two .ocard__t span{font-size:.78rem}
.co__giftf{margin-top:.85rem;padding-top:.85rem;border-top:1px dashed var(--blush-2)}
.co__giftn{font-size:.83rem;color:var(--muted);font-weight:300;line-height:1.5;
  background:#F7F2FA;border-radius:12px;padding:.6rem .75rem;margin-top:-.2rem}
/* the tracker's first frame on the confirmation: a state and a promise */
.done__trk{margin:.8rem auto 0;max-width:min(100%,340px);background:#F1F8F1;border:1px solid #D6E8D6;
  border-radius:14px;padding:.7rem .95rem;display:flex;align-items:flex-start;gap:.6rem;text-align:start}
.done__trk b{display:block;font-size:.92rem;color:var(--ok);font-weight:600}
.done__trk span{display:block;font-size:.83rem;color:var(--muted);font-weight:300;line-height:1.5;
  margin-top:.15rem}
.done__trk__d{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none;margin-top:.45rem;
  box-shadow:0 0 0 0 rgba(46,125,50,.5);animation:livedot2 2.4s infinite}
@keyframes livedot2{0%{box-shadow:0 0 0 0 rgba(46,125,50,.45)}
  70%{box-shadow:0 0 0 8px rgba(46,125,50,0)}100%{box-shadow:0 0 0 0 rgba(46,125,50,0)}}

.done__gift{margin:.8rem auto 0;max-width:min(100%,340px);background:#FFF3F6;border:1px solid #EBD5E0;
  border-radius:14px;padding:.7rem .95rem;font-size:.9rem;color:var(--plum);line-height:1.5;
  display:flex;align-items:center;gap:.5rem;text-align:start}
.done__gift span{font-size:1.15rem;line-height:1;flex:none}

/* ---- checkout: the optional birthday ----
   Two selects and a warm line. Deliberately no year field: there is nowhere on
   the server to put one, and this is the shape that says so. */
.co__bd{margin-top:1.1rem;background:linear-gradient(150deg,#FFF6F8 0%,#F7EFF3 100%);
  border:1px solid #EBD9E2;border-radius:16px;padding:.9rem 1rem 1rem}
.co__bdh{display:flex;align-items:center;gap:.45rem;font-size:.95rem;color:var(--plum);margin-bottom:.2rem}
.co__bdh b{font-family:"Fraunces",Georgia,serif;font-weight:600}
.co__bdp{font-size:.85rem;color:var(--muted);font-weight:300;margin-bottom:.65rem}
.co__bdrow{display:flex;gap:.5rem}
.co__bdrow select{flex:1;min-width:0;padding:.7em .8em;border:1.5px solid var(--blush-2);
  border-radius:12px;background:#fff;font:inherit;color:var(--ink);cursor:pointer}
.co__bdrow select:focus{border-color:var(--plum);outline:none;box-shadow:0 0 0 3px rgba(73,49,93,.1)}
.co__bd--set{display:flex;align-items:center;gap:.55rem}
.co__bd--set span{font-size:1.3rem;line-height:1}
.co__bd--set p{font-size:.88rem;color:var(--plum);font-weight:500;margin:0}

/* ---- confirmation: the points, celebrated ----
   The biggest, warmest thing on the card after the tick. Points are a score,
   not a receipt line, and this is the moment they went up. */
.done__pts{margin:1rem auto 0;max-width:min(100%,360px);border-radius:18px;padding:1.05rem 1rem .95rem;
  color:#fff;text-align:center;
  background:radial-gradient(130% 130% at 80% 0%,#6B4A85 0%,var(--plum) 48%,var(--plum-deep) 100%);
  box-shadow:0 16px 34px -20px rgba(56,37,72,.75)}
.done__ptsh{display:block;font-family:"Fraunces",Georgia,serif;font-weight:700;
  font-size:1.35rem;line-height:1.2}
.done__ptst{display:block;margin-top:.25rem;font-size:.95rem;color:#F3E3EC;font-weight:400}
.done__ptssoon{margin-top:.7rem;font-size:.87rem;line-height:1.5;color:#F7EAF1;font-weight:300;
  border-top:1px solid rgba(255,255,255,.18);padding-top:.65rem}
.done__ptspin{margin-top:.5rem;font-size:.84rem;color:#EBD8E4;font-weight:300;line-height:1.5}
/* an unlock is the loudest line on the card; progress is the quiet nudge */
.done__ptsunlock{margin-top:.7rem;padding-top:.65rem;border-top:1px solid rgba(255,255,255,.18);
  font-size:.96rem;font-weight:500;color:#FFE9B8;line-height:1.45}
/* the birthday present: the loudest line on the card, and it has earned it */
.done__ptsbday{display:block;font-family:"Fraunces",Georgia,serif;font-weight:700;
  font-size:1.2rem;line-height:1.25;color:#FFE9B8;margin-bottom:.5rem;
  padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.18)}
body[dir="rtl"] .done__ptsbday{font-family:"Cairo",serif}
.done__ptswelcome{font-size:.92rem;font-weight:400;color:#F7DCE8;line-height:1.45;
  margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.18)}
.done__ptsnext{margin-top:.7rem;padding-top:.65rem;border-top:1px solid rgba(255,255,255,.18);
  font-size:.89rem;font-weight:300;color:#F7EAF1;line-height:1.5}
.done__bar{height:8px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden;
  margin-top:.55rem}
.done__bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#F0C9DC,#FFE9B8);transition:width .6s ease}
.done__ptsgo{margin-top:.75rem}

.done__earn{margin:.9rem auto 0;background:#FAF3E2;border:1px solid #EBDCB6;border-radius:14px;
  padding:.7rem .95rem;font-size:.9rem;color:#7A5E14;line-height:1.5;
  max-width:min(100%,340px);display:flex;align-items:center;gap:.5rem;text-align:start}
.done__earn span{font-size:1.1rem;line-height:1;flex:none}

/* the share card */
.share{margin-top:1.1rem;text-align:start;border-radius:16px;padding:1rem 1.05rem;
  background:var(--plum);
  background:radial-gradient(150% 130% at 88% 8%,#5E4275 0%,var(--plum) 55%,var(--plum-deep) 100%);
  color:#fff;box-shadow:0 24px 48px -30px rgba(48,31,66,.9)}
.share__h{display:flex;align-items:center;gap:.5rem;margin-bottom:.35rem}
.share__h span{font-size:1.15rem;line-height:1}
.share__h b{font-family:"Fraunces",serif;font-weight:700;font-size:1.05rem;line-height:1.25}
.share__p{font-size:.87rem;font-weight:300;opacity:.9;line-height:1.55;margin-bottom:.85rem}
.share__link input{width:100%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  border-radius:11px;padding:.6em .8em;color:#fff;font-size:.86rem;text-align:start;
  unicode-bidi:isolate;-webkit-user-select:all;user-select:all}
.share__link input:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.share__acts{margin-top:.7rem}
.share .calt{color:#fff;opacity:.92;margin-top:.35rem}
.share .calt:hover{color:#fff;opacity:1}
.share__credit--retired{margin-top:.75rem;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.2);
  font-size:.86rem;font-weight:300;opacity:.92}

/* ---- Arabic / RTL ---- */
html[lang="ar"] .co__pm b,html[lang="ar"] .done h4,html[lang="ar"] .done__no b,
html[lang="ar"] .co__kv b,html[lang="ar"] .zone__p,html[lang="ar"] .co__item>b{
  font-family:"Amiri","Fraunces",serif}
html[lang="ar"] .co__f label,html[lang="ar"] .co__blkh b,html[lang="ar"] .co__card>b,
html[lang="ar"] .done__next b,html[lang="ar"] .co__pm span,html[lang="ar"] .done__no span{
  letter-spacing:normal}
html[lang="ar"] .refbar__t b,html[lang="ar"] .share__h b,html[lang="ar"] .done__kv b{
  font-family:"Amiri","Fraunces",serif}
/* the link is a URL in both languages — it reads left to right, always */
.share__link input{direction:ltr}
html[dir="rtl"] .dchip,html[dir="rtl"] .tchip{text-align:center}