:root {
  --purple:#472e43;--purple-deep:#2d1b2c;--purple-mid:#5a3d55;
  --cream:#e5ceb5;--cream-s:rgba(229,206,181,.7);--cream-d:rgba(229,206,181,.4);--cream-dd:rgba(229,206,181,.18);
  --gold:#e9a953;--gold-h:#f0b86a;--gold-bg:rgba(233,169,83,.12);--gold-border:rgba(233,169,83,.35);
  --teal:#76aaa9;--teal-d:rgba(118,170,169,.5);
  --error:#e97373;--error-bg:rgba(233,115,115,.12);
  --line:rgba(229,206,181,.1);--line-s:rgba(229,206,181,.22);
  --r:6px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--purple);color:var(--cream);font-family:'Helvetica Neue',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* — Focus states — */
.brew-card:focus-visible,.blend-card:focus-visible,.prog-step:focus-visible,
.ready-card:focus-visible,.date-pill:focus-visible,.time-pill:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r);
}

/* — Typography — */
.serif{font-family:Georgia,'Times New Roman',Cambria,serif}
.mono{font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
h2.step-h{font-family:Georgia,serif;font-size:clamp(32px,5.5vw,56px);line-height:1.05;text-wrap:balance;margin-bottom:8px}
h2.step-h em{font-style:italic;color:var(--gold)}
.step-sub{color:var(--cream-s);font-size:clamp(15px,1.4vw,17px);margin-bottom:clamp(28px,4vw,48px)}

/* — Progress bar — */
.progress{position:sticky;top:0;z-index:60;background:var(--purple-deep);border-bottom:1px solid var(--line);padding:0 clamp(16px,3vw,40px);display:flex;align-items:center;gap:12px}
.progress-inner{flex:1;min-width:0;max-width:720px;margin:0 auto;display:flex;align-items:center;height:52px;gap:0}
.prog-step{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 4px;white-space:nowrap;transition:opacity .2s}
.prog-step .num{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--cream-d);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;transition:all .3s;font-family:'SF Mono',monospace}
.prog-step .lbl{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-d);transition:color .3s;display:none}
@media(min-width:600px){.prog-step .lbl{display:inline}}
.prog-line{flex:1;height:1px;background:var(--line-s);margin:0 4px}
.prog-step.active .num{background:var(--gold);border-color:var(--gold);color:var(--purple-deep)}
.prog-step.active .lbl{color:var(--cream)}
.prog-step.done .num{background:var(--teal);border-color:var(--teal);color:var(--purple-deep)}
.prog-step.done .lbl{color:var(--teal)}

/* — Language switcher (in the progress bar) — */
/* A button with the current language (flag + code) opening a menu of all
   three (flag + code + native name). A flag is a country, not a language,
   so it never appears without its language beside it. Targets are 36px
   (WCAG 2.2 asks for 24px); the current language is marked by a check and
   a tinted row, not by colour alone. */
.lang-switch{position:relative;flex-shrink:0}
.lang-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;background:transparent;color:var(--cream-s);border:1px solid var(--line-s);border-radius:var(--r);font-family:'SF Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.08em;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{color:var(--cream);border-color:var(--cream-d);background:var(--cream-dd)}
.lang-btn:focus-visible,.lang-menu a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lang-btn .chev{width:10px;height:6px;transition:transform .2s}
.lang-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lang-switch .flag{width:18px;height:12px;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px rgba(229,206,181,.25)}
.lang-menu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:80;min-width:176px;margin:0;padding:6px;list-style:none;background:var(--purple-deep);border:1px solid var(--line-s);border-radius:var(--r);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.lang-menu[hidden]{display:none}
.lang-menu a{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 10px;color:var(--cream-s);text-decoration:none;border-radius:calc(var(--r) - 2px);font-size:14px}
.lang-menu a:hover{background:var(--cream-dd);color:var(--cream)}
.lang-menu .lang-code{font-family:'SF Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--cream-d);min-width:18px}
/* "العربية" on /en/ and /fr/: a system font, so those pages never download
   Cairo for one word; on /ar/ it matches the page. */
.lang-menu .lang-name:lang(ar){font-family:'Segoe UI',Tahoma,'Noto Sans Arabic','Geeza Pro',sans-serif}
html:lang(ar) .lang-menu .lang-name{font-family:'Cairo',sans-serif}
.lang-menu a[aria-current="page"]{background:var(--gold-bg);color:var(--gold)}
.lang-menu a[aria-current="page"]::after{content:'✓';margin-inline-start:auto;font-size:13px}

/* — Layout — */
.page{display:flex;max-width:1280px;margin:0 auto;padding:0 clamp(16px,3vw,40px);gap:32px;position:relative}
.main{flex:1;min-width:0;padding-bottom:120px}
.sidebar{width:320px;flex-shrink:0;display:none;position:relative}
@media(min-width:1024px){.sidebar{display:block}}
.sidebar-inner{position:sticky;top:72px;background:var(--purple-deep);border:1px solid var(--line-s);border-radius:var(--r);padding:28px 24px;display:flex;flex-direction:column;gap:20px}

/* — Mobile bottom bar — */
.mobile-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--purple-deep);border-top:1px solid var(--line-s);padding:12px 20px;align-items:center;justify-content:space-between;gap:12px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
@media(min-width:1024px){.mobile-bar{display:none}}
.mobile-bar .price-big{font-family:Georgia,serif;font-size:22px;color:var(--gold);line-height:1.1}
.mobile-bar .price-big small{font-size:12px;color:var(--cream-d);font-family:'SF Mono',monospace;display:block;margin-top:2px}
.mobile-bar .mbtn{padding:14px 22px;background:var(--gold);color:var(--purple-deep);border:none;font-family:'SF Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;cursor:pointer;border-radius:var(--r);white-space:nowrap}
.mobile-bar .mbtn:disabled{opacity:.4;cursor:not-allowed}

/* — Sections — */
.sec{padding:clamp(48px,7vh,80px) 0;border-bottom:1px solid var(--line)}
.sec:last-child{border-bottom:none}
.step-label{font-family:'SF Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:12px}
.step-label::before{content:'';width:28px;height:1px;background:var(--teal-d)}

/* — Brew cards — */
.brew-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.brew-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
.brew-card{cursor:pointer;border:1.5px solid var(--line-s);border-radius:var(--r);overflow:hidden;transition:border-color .3s,transform .3s,box-shadow .3s;display:flex;flex-direction:column}
.brew-card:hover{border-color:var(--cream-d);transform:translateY(-4px)}
.brew-card.sel{border-color:var(--gold);box-shadow:0 0 28px rgba(233,169,83,.15)}
/* The photos are 2:3 portraits of each whole set; the frame takes the same
   shape so none of it is cropped away (cover then fills it exactly). */
.brew-img{aspect-ratio:2/3;position:relative;overflow:hidden}

.brew-card[data-b="expert"] .brew-img{background:url(images/expert-espresso.jpg) center/cover no-repeat}
.brew-card[data-b="retro"] .brew-img{background:url(images/retro-roast.jpg) center/cover no-repeat}
.brew-card[data-b="lounge"] .brew-img{background:url(images/lounge-latte.jpg) center/cover no-repeat}
/* A fade over the lower half that eases the photo into the card body below
   (same colour as .brew-body). The many stops trace an ease-in-out curve:
   a plain two- or three-stop gradient shows visible bands wherever its
   slope changes. */
.brew-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(45,27,44,0) 45%,rgba(45,27,44,.013) 50.5%,rgba(45,27,44,.049) 56%,rgba(45,27,44,.104) 61.5%,
  rgba(45,27,44,.175) 67%,rgba(45,27,44,.259) 72.5%,rgba(45,27,44,.352) 78%,rgba(45,27,44,.45) 83.5%,
  rgba(45,27,44,.55) 87.5%,rgba(45,27,44,.648) 90.5%,rgba(45,27,44,.741) 93%,rgba(45,27,44,.825) 95%,
  rgba(45,27,44,.896) 96.8%,rgba(45,27,44,.951) 98.3%,rgba(45,27,44,.987) 99.4%,var(--purple-deep) 100%)}
.brew-body{padding:20px 18px;display:flex;flex-direction:column;gap:10px;flex:1;background:var(--purple-deep)}
.brew-name{font-family:Georgia,serif;font-size:clamp(24px,3vw,32px);line-height:1}
.brew-name em{font-style:italic;color:var(--gold)}
.brew-for{font-size:13px;color:var(--cream-d);line-height:1.5}
.brew-for strong{color:var(--cream-s);font-weight:500}
.brew-check{position:absolute;top:12px;inset-inline-end:12px;width:28px;height:28px;border-radius:50%;background:var(--gold);display:none;align-items:center;justify-content:center;z-index:2}
.brew-card.sel .brew-check{display:flex}
.brew-price-badge{position:absolute;bottom:12px;inset-inline-end:12px;padding:6px 12px;background:rgba(45,27,44,.75);backdrop-filter:blur(6px);border:1px solid var(--line-s);border-radius:var(--r);font-family:'SF Mono',monospace;font-size:12px;color:var(--gold);z-index:2;font-weight:500}
/* Phones: same stacked card — text below the photo rather than over it, so
   the whole set stays visible. */
@media(max-width:639px){.brew-body{padding:16px 14px}.brew-name{font-size:22px}.brew-for{font-size:12px}}

/* — Included — */
.included{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:24px}
@media(min-width:500px){.included{grid-template-columns:repeat(4,1fr)}}
.incl-item{padding:14px;background:var(--purple-deep);border:1px solid var(--line);border-radius:var(--r);text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.incl-icon{font-size:22px;opacity:.8}
.incl-label{font-size:12px;color:var(--cream-s);line-height:1.3}
.incl-tag{display:inline-block;padding:4px 10px;font-family:'SF Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);border:1px solid var(--teal-d);border-radius:20px;margin-top:8px}

/* (table toggle removed — now a blend card) */

/* — Blend cards — */
.blend-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:500px){.blend-grid{grid-template-columns:repeat(2,1fr)}}
/* Between paid and free equipment (step 2). */
.blend-divider{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:4px 0}
.blend-divider span{font-family:'SF Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-d);white-space:nowrap}
.blend-divider::before,.blend-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.blend-card{padding:22px;background:var(--purple-deep);border:1.5px solid var(--line-s);border-radius:var(--r);cursor:pointer;transition:border-color .3s,transform .3s;display:flex;flex-direction:column;gap:10px}
.blend-card:hover{border-color:var(--cream-d);transform:translateY(-2px)}
.blend-card.sel{border-color:var(--gold);background:rgba(233,169,83,.06)}
.blend-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.blend-name{font-family:Georgia,serif;font-size:20px}
.blend-price{font-family:'SF Mono',monospace;font-size:13px;color:var(--gold);font-weight:500;white-space:nowrap}
.blend-price.free{color:var(--teal)}
/* Step 2's loading line, and the fail-open note when the catalog can't load. */
.blend-status{grid-column:1/-1;font-size:14px;color:var(--cream-d)}
.blend-desc{font-size:14px;color:var(--cream-d);line-height:1.4}
.blend-check{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-s);display:flex;align-items:center;justify-content:center;transition:all .3s;flex-shrink:0}
.blend-card.sel .blend-check{background:var(--gold);border-color:var(--gold)}

/* — Pour (duration) — */
.pour-stepper{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:24px}
.pour-btn{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line-s);background:transparent;color:var(--cream);font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-family:'SF Mono',monospace}
.pour-btn:hover:not(:disabled){background:var(--gold);border-color:var(--gold);color:var(--purple-deep)}
.pour-btn:disabled{opacity:.25;cursor:not-allowed}
.pour-val{font-family:Georgia,serif;font-size:clamp(56px,8vw,80px);line-height:1;min-width:100px;text-align:center}
.pour-val small{font-size:18px;color:var(--cream-d);display:block;margin-top:4px;font-family:'SF Mono',monospace;letter-spacing:.06em}
.pour-quick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:28px}
.pour-pill{padding:8px 16px;border:1px solid var(--line-s);border-radius:20px;font-family:'SF Mono',monospace;font-size:12px;cursor:pointer;background:transparent;color:var(--cream-d);transition:all .2s;letter-spacing:.04em}
.pour-pill:hover{border-color:var(--cream-d);color:var(--cream)}
.pour-pill.sel{background:var(--gold);border-color:var(--gold);color:var(--purple-deep);font-weight:600}
.pour-discount{text-align:center;padding:14px 20px;background:var(--gold-bg);border:1px solid rgba(233,169,83,.2);border-radius:var(--r);margin-bottom:16px}
.pour-discount .tier{font-family:'SF Mono',monospace;font-size:13px;color:var(--gold);font-weight:600;letter-spacing:.06em}
.pour-nudge{text-align:center;font-size:14px;color:var(--cream-s);margin-top:8px;min-height:20px;transition:opacity .3s}

/* — Price breakdown — */
.price-box{background:var(--purple-deep);border:1px solid var(--line-s);border-radius:var(--r);padding:24px;margin-top:20px}
.price-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;font-size:14px}
.price-row.dim{color:var(--cream-d)}
.price-row .old{text-decoration:line-through;color:var(--cream-d);font-family:'SF Mono',monospace;font-size:13px}
.price-row .save{color:var(--teal);font-family:'SF Mono',monospace;font-size:13px}
.price-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;margin-top:10px;border-top:1px solid var(--line-s)}
.price-total .label{font-size:14px;color:var(--cream-s)}
.price-total .val{font-family:Georgia,serif;font-size:28px;color:var(--gold)}

/* — Date picker — */
.date-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.date-scroll::-webkit-scrollbar{display:none}
.date-pill{padding:12px 14px;border:1px solid var(--line-s);border-radius:var(--r);cursor:pointer;text-align:center;min-width:64px;flex-shrink:0;transition:all .2s;background:var(--purple-deep)}
.date-pill:hover{border-color:var(--cream-d)}
.date-pill.sel{border-color:var(--gold);background:var(--gold-bg)}
.date-pill .day{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--cream-d);font-family:'SF Mono',monospace}
.date-pill .dn{font-family:Georgia,serif;font-size:22px;margin-top:2px}
.date-pill .mo{font-size:11px;color:var(--cream-d);font-family:'SF Mono',monospace}
.time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
@media(min-width:500px){.time-grid{grid-template-columns:repeat(5,1fr)}}
.time-pill{padding:12px;border:1px solid var(--line-s);border-radius:var(--r);cursor:pointer;text-align:center;font-family:'SF Mono',monospace;font-size:13px;background:var(--purple-deep);color:var(--cream-d);transition:all .2s}
.time-pill:hover{border-color:var(--cream-d);color:var(--cream)}
.time-pill.sel{border-color:var(--gold);background:var(--gold-bg);color:var(--gold);font-weight:600}
/* The rest of a multi-hour session's block once a start time is picked —
   deliberately a step below .sel so the actual start hour still reads as
   "the" selection and the rest reads as "included in it". */
.time-pill.in-range{border-color:var(--gold-border);background:var(--gold-bg);color:var(--cream)}
.time-pill.unavailable{cursor:not-allowed;pointer-events:none;opacity:.35;text-decoration:line-through;color:var(--cream-d)}
.time-pill.unavailable:hover{border-color:var(--line-s)}
.time-hint{font-family:'SF Mono',monospace;font-size:12px;color:var(--cream-d);margin-top:10px}
.time-hint.warn{color:var(--error)}

/* — Summary sidebar — */
.sum-title{font-family:Georgia,serif;font-size:20px;margin-bottom:4px}
.sum-section{display:flex;flex-direction:column;gap:4px}
.sum-label{font-family:'SF Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-d);margin-bottom:4px}
.sum-val{font-size:15px}
.sum-val em{color:var(--gold);font-style:normal}
.sum-items{display:flex;flex-direction:column;gap:6px}
.sum-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--cream-s)}
.sum-item .chk{color:var(--teal);font-size:14px}
.sum-divider{border:none;border-top:1px solid var(--line);margin:4px 0}
.sum-total-label{font-size:13px;color:var(--cream-d)}
.sum-total-val{font-family:Georgia,serif;font-size:32px;color:var(--gold)}
.sum-save{font-family:'SF Mono',monospace;font-size:12px;color:var(--teal);margin-top:2px}
.sum-old{font-family:'SF Mono',monospace;font-size:13px;text-decoration:line-through;color:var(--cream-d)}
.sum-cta{display:block;width:100%;padding:16px;background:var(--gold);color:var(--purple-deep);border:none;font-family:'SF Mono',monospace;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;cursor:pointer;border-radius:var(--r);text-align:center;transition:background .2s}
.sum-cta:hover{background:var(--gold-h)}
.sum-cta:disabled{opacity:.4;cursor:not-allowed}
.cta-hint{font-size:12px;color:var(--cream-d);line-height:1.4;min-height:16px}
.mobile-bar .cta-hint{margin-top:2px;font-size:11px}

/* — Contact form — */
.contact-form{margin-top:40px}
.contact-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px}
@media(min-width:500px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-field--full{grid-column:1/-1}
.contact-field label{display:block;font-family:'SF Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-d);margin-bottom:6px}
.contact-optional{text-transform:none;letter-spacing:0;opacity:.7}
.contact-required{color:var(--gold);text-transform:none}
.field-error{display:block;font-size:12px;color:#e97373;margin-top:6px;min-height:14px}
.contact-field input,.contact-field textarea{width:100%;padding:12px 14px;background:var(--purple-deep);border:1.5px solid var(--line-s);border-radius:var(--r);color:var(--cream);font-family:inherit;font-size:14px;transition:border-color .2s}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:var(--cream-d)}
.contact-field input:focus,.contact-field textarea:focus{outline:none;border-color:var(--gold)}
.contact-field input[aria-invalid="true"]{border-color:#e97373}
.contact-field input:disabled,.contact-field textarea:disabled{opacity:.5;cursor:not-allowed}
.contact-field textarea{resize:vertical;min-height:70px}
.contact-hint{font-size:13px;color:var(--cream-d);margin-top:14px}
.booking-status{margin-top:16px;padding:14px 16px;border-radius:var(--r);font-size:14px;line-height:1.5}
.booking-status.error{background:rgba(233,115,115,.12);border:1px solid rgba(233,115,115,.35);color:#e97373}
.booking-status.success{background:var(--gold-bg);border:1px solid var(--gold-border);color:var(--gold)}
.book-another-btn{display:block;width:100%;margin-top:16px;padding:14px 20px;background:transparent;color:var(--gold);border:1.5px solid var(--gold-border);font-family:'SF Mono',monospace;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;cursor:pointer;border-radius:var(--r);transition:all .2s}
.book-another-btn:hover{background:var(--gold-bg);border-color:var(--gold)}
/* Honeypot: hidden from sighted users; aria-hidden + tabindex=-1 on the
   input keep it out of the keyboard/AT tab order too. Real users never see
   or fill this — anything that does is treated as a bot (see script.js).
   Pushed off the inline-start edge, which is never scrollable (left in LTR,
   right in RTL) — a fixed left:-5000px became 5000px of sideways scroll on
   the Arabic page. */
.hp-field{position:absolute;inset-inline-start:-5000px;top:-5000px;width:1px;height:1px;overflow:hidden}

/* — Toast — */
.toast{position:fixed;top:70px;inset-inline-end:16px;z-index:70;max-width:min(360px,calc(100vw - 32px));
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  background:var(--purple-deep);border:1px solid var(--line-s);border-radius:var(--r);
  box-shadow:0 12px 32px rgba(0,0,0,.35);color:var(--cream);font-size:14px;line-height:1.4;
  opacity:0;transform:translateY(-12px);pointer-events:none;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translateY(0);pointer-events:auto}
.toast.success{border-color:var(--gold-border)}
.toast.success #toast-msg::before{content:'✓';display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;margin-inline-end:8px;border-radius:50%;background:var(--gold);color:var(--purple-deep);font-size:11px;font-weight:700;vertical-align:middle}
.toast-close{background:none;border:none;color:var(--cream-d);font-size:16px;line-height:1;cursor:pointer;padding:0;margin-inline-start:auto;flex-shrink:0}
.toast-close:hover{color:var(--cream)}

/* — Ready-made — */
.ready{margin-top:24px;padding:28px 24px;background:var(--purple-deep);border:1px solid var(--line);border-radius:var(--r)}
.ready summary{cursor:pointer;font-family:Georgia,serif;font-size:18px;color:var(--cream-s);list-style:none;display:flex;align-items:center;gap:10px}
.ready summary::before{content:'›';font-size:20px;transition:transform .2s;display:inline-block}
.ready[open] summary::before{transform:rotate(90deg)}
.ready-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:20px}
@media(min-width:500px){.ready-grid{grid-template-columns:repeat(3,1fr)}}
.ready-card{padding:18px;border:1px solid var(--line-s);border-radius:var(--r);cursor:pointer;transition:border-color .3s}
.ready-card:hover{border-color:var(--gold-border)}
.ready-card h4{font-family:Georgia,serif;font-size:18px;margin-bottom:6px}
.ready-card p{font-size:13px;color:var(--cream-d);margin-bottom:10px;line-height:1.4}
.ready-card .rprice{font-family:'SF Mono',monospace;font-size:14px;color:var(--gold);font-weight:500}

/* — Arabic (right-to-left) —
   dir="rtl" already mirrors the flex/grid layouts; logical properties
   (inset-inline-end, margin-inline-*) above handle the positioned bits.
   What's left is typographic: Georgia and SF Mono have no Arabic glyphs,
   and letter-spacing breaks the joins between Arabic letters.
   Fonts (both by Mohamed Gaber, SIL Open Font License, self-hosted from
   Google Fonts' subsets since the CSP blocks their stylesheet):
   - El Messiri stands in for Georgia (headings, large figures). It only
     covers Arabic, so Latin in the same text (digits, brand names) still
     falls through to Georgia.
   - Cairo stands in for Helvetica and SF Mono (body, labels, buttons),
     with its Latin subset so digits and prices match the Arabic around
     them.
   Only rules scoped to :lang(ar) use them, so /en/ and /fr/ never
   download either font. */
@font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url(fonts/cairo-arabic.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Cairo';font-style:normal;font-weight:200 1000;font-display:swap;src:url(fonts/cairo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'El Messiri';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/el-messiri-arabic.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:lang(ar) body,:lang(ar) .mono,:lang(ar) .step-label,
:lang(ar) .sum-label,:lang(ar) .contact-field label,:lang(ar) .time-hint,:lang(ar) .pour-val small,:lang(ar) .pour-pill,
:lang(ar) .pour-discount .tier,:lang(ar) .blend-price,:lang(ar) .blend-divider span,:lang(ar) .incl-tag,
:lang(ar) .brew-price-badge,:lang(ar) .ready-card .rprice,
:lang(ar) .sum-cta,:lang(ar) .mobile-bar .mbtn,:lang(ar) .book-another-btn,:lang(ar) .sum-save,:lang(ar) .sum-old,
:lang(ar) .price-row .old,:lang(ar) .price-row .save,:lang(ar) .date-pill .day,:lang(ar) .date-pill .mo,
:lang(ar) .contact-field input,:lang(ar) .contact-field textarea,:lang(ar) .prog-step .lbl{
  font-family:'Cairo',sans-serif;letter-spacing:0
}
:lang(ar) .serif,:lang(ar) h2.step-h,:lang(ar) .sum-title,:lang(ar) .blend-name,:lang(ar) .ready summary,:lang(ar) .ready-card h4,
:lang(ar) .sum-total-val,:lang(ar) .price-total .val,:lang(ar) .mobile-bar .price-big{
  font-family:'El Messiri',Georgia,serif;letter-spacing:0
}
:lang(ar) h2.step-h{line-height:1.3;font-weight:700}
/* Arabic has no italics — a browser would fake one by slanting the glyphs.
   The gold colour alone marks the key word. */
:lang(ar) h2.step-h em{font-style:normal}
[dir="rtl"] .ready summary::before{transform:scaleX(-1)}
[dir="rtl"] .ready[open] summary::before{transform:rotate(90deg)}

/* — Responsive — */
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}