/* Lavish Coffee — shared shell for the product pages.
   Tokens are the brand standards. Gold stays reserved for traceability. */
:root{
  --navy:#141B33; --navy-2:#1F2A4D; --navy-3:#2E3A63;
  --cream:#F5F1EA; --paper:#FCFCFB; --line:#E2DED6;
  --royal:#0126A0; --silver:#A7A9AB;
  --ink:#161A26; --muted:#5F6672;
  --gold:#A87400; --olive:#5F9440; --teal:#0E9B95; --clay:#D8552B;
  --blue:#3563D6; --violet:#8B4FC4;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --accent:var(--navy-3);            /* each product page overrides this */
}
html[lang="ar"]{ --sans:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif; }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html[lang="ar"] body{font-size:17px;line-height:1.9}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.display{font-weight:700;letter-spacing:-.035em;line-height:1.04}
html[lang="ar"] .display{letter-spacing:-.02em;line-height:1.42}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--muted)}
html[lang="ar"] .eyebrow{letter-spacing:0;font-size:13px}

/* ─── Header with a real mega menu ─── */
.announce{background:var(--navy);color:var(--cream);font-size:13.5px;min-height:38px;
  display:flex;align-items:center;justify-content:center;padding:8px 20px;text-align:center}
/* `position:sticky` only sticks inside its own parent's box. The header lives in the
   #chrome wrapper, which is just 123px tall, so it unstuck the moment you scrolled past
   the announcement bar. `display:contents` dissolves the wrapper so the header sticks to
   the viewport for the whole page — which keeps the cart button and its count reachable
   while you are actually browsing products. */
#chrome{display:contents}
header{position:sticky;top:0;z-index:60;background:rgba(252,252,251,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:clamp(16px,3vw,36px);height:84px}
.mark{display:flex;align-items:center;flex:none;text-decoration:none}
.mark img{height:62px;width:auto}
nav.main{display:flex;gap:clamp(12px,2vw,26px);margin-inline-start:auto;font-size:14.5px;font-weight:500}
nav.main > div{position:relative}
nav.main a,nav.main button{color:var(--ink);text-decoration:none;padding:10px 0;background:none;
  border:0;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
/* "Shop" is a link to the shop page AND a dropdown trigger. The caret is its own button
   so keyboard and touch users get an explicit toggle instead of a hover-only menu. */
.shopwrap{display:inline-flex;align-items:center;gap:2px}
.shopwrap > a{font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.caretbtn{padding:12px 10px!important;min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center}
nav.main .caret{width:6px;height:6px;border-inline-end:1.6px solid currentColor;
  border-block-end:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .25s var(--ease)}
nav.main [aria-expanded="true"] .caret{transform:rotate(-135deg) translateY(-2px)}
.tools{display:flex;align-items:center;gap:14px;margin-inline-start:auto}
.lang{font-size:13px;font-weight:600;background:none;border:1.5px solid var(--navy);color:var(--navy);
  padding:12px 16px;min-height:44px;border-radius:999px;cursor:pointer;font-family:var(--sans)}
.lang:hover{background:var(--navy);color:var(--cream)}
.cart{font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;background:none;border:0;
  cursor:pointer;font-family:var(--sans)}

.mega{position:absolute;inset-inline-start:50%;translate:-50% 0;top:calc(100% + 14px);
  width:min(1080px,94vw);background:var(--paper);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 26px 70px rgba(20,27,51,.16);padding:24px;z-index:70;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pgroup{min-width:0}
.pgroup .cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.mega-grid{grid-template-columns:1fr}.pgroup .cols{grid-template-columns:1fr 1fr}}
.mega .grp-h{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.mega .grp-h a{font-size:14.5px;font-weight:700;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px}
.mega .grp-h a:hover{text-decoration:underline;text-underline-offset:3px}
.mega .cnt{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
/* Deliberately a quiet inline word, not a pill. A padded chip made the two longer blend
   names wrap onto a second line in a menu column this narrow. */
.isoon{margin-inline-start:7px;font-size:11px;font-weight:600;color:#8A3E1C;white-space:nowrap}
.isoon::before{content:"· "}
.mega .soon{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#8A3E1C;background:#FBEEE8;padding:2px 7px;border-radius:999px}
html[lang="ar"] .mega .soon{letter-spacing:0;font-size:12px}
.pgroup .parent{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
html[lang="ar"] .pgroup .parent{letter-spacing:0;font-size:12.5px}
.mega ul{list-style:none;display:block}
.mega h5{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:12px}
html[lang="ar"] .mega h5{letter-spacing:0;font-size:13px}
.mega ul a{display:flex;align-items:center;gap:9px;padding:11px 9px;border-radius:9px;font-size:14px;min-height:44px;
  text-decoration:none;color:var(--ink);transition:background .18s}
.mega ul a:hover{background:var(--cream)}
.mega .dot{width:9px;height:9px;border-radius:3px;flex:none;background:var(--c,var(--navy-3))}
.mega .foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13.5px}
.mega .foot a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.mega .foot a:hover{color:var(--ink)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-inline-start:auto;
  min-width:44px;min-height:44px}
.burger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.sheet{position:fixed;inset:0;top:var(--sheet-top,122px);background:var(--paper);z-index:55;
  padding:26px clamp(20px,5vw,40px) 40px;overflow-y:auto;
  transform:translateY(-10px);opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.sheet.open{opacity:1;visibility:visible;transform:none}
.sheet h5{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin:22px 0 10px}
html[lang="ar"] .sheet h5{letter-spacing:0;font-size:13px}
.sheet ul{list-style:none;display:grid;gap:2px}
.sheet ul a{display:flex;align-items:center;gap:10px;padding:11px 10px;border-radius:10px;
  font-size:15.5px;text-decoration:none;color:var(--ink)}
.sheet ul a:active{background:var(--cream)}
.sheet .dot{width:10px;height:10px;border-radius:3px;flex:none;background:var(--c,var(--navy-3))}
.sheet .top{display:grid;gap:2px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sheet .top a{font-size:17px;font-weight:600;padding:12px 10px;border-radius:10px;
  text-decoration:none;color:var(--ink);display:block}
@media(max-width:960px){nav.main{display:none}.burger{display:block}.tools{margin-inline-start:0}}
@media(min-width:961px){.sheet{display:none}}

/* ─── Buttons ─── */
.btn{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;padding:14px 26px;
  border-radius:999px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  font-family:var(--sans);transition:transform .25s var(--ease),background .25s,color .25s}
.btn:hover{transform:translateY(-2px)}
/* Every other add button on the site dims when disabled; this one did not, so a product
   page rendered before Medusa answered showed a solid, inviting "Add to cart" that
   silently did nothing when clicked. A disabled control must look disabled. */
.btn[disabled],.btn[disabled]:hover{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-solid{background:var(--navy);color:var(--cream)}
.btn-accent{background:var(--accent);color:#fff}
.btn-ghost{background:transparent;color:var(--navy);border-color:#CFC8BC}
.btn-ghost:hover{border-color:var(--navy)}
.arrow{display:inline-block}
html[dir="rtl"] .arrow{transform:scaleX(-1)}

/* ─── Footer ─── */
footer{background:var(--navy);color:#C4CCE4;padding-block:60px 30px;font-size:14.5px;margin-top:90px}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
footer h4{color:var(--cream);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
html[lang="ar"] footer h4{letter-spacing:0;font-size:15px}
footer a{color:#C4CCE4;text-decoration:none;display:flex;align-items:center;min-height:44px}
footer a:hover{color:var(--cream)}
.fmark img{height:56px;margin-bottom:20px;filter:brightness(0) invert(1) opacity(.92)}
.nap{font-style:normal;line-height:1.85}
.nap .tel{font-family:var(--mono);font-size:15px;direction:ltr;unicode-bidi:isolate;
  display:inline;text-decoration:underline;text-underline-offset:3px}
.legal{border-top:1px solid rgba(245,241,234,.15);padding-top:22px;font-size:12.5px;color:#8C9AC0;
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between}
.legal .by{color:#8C9AC0;text-decoration:none;border-bottom:1px solid rgba(245,241,234,.25);
  padding-bottom:1px;transition:color .2s,border-color .2s}
.legal .by:hover{color:var(--cream);border-color:var(--cream)}
@media(max-width:820px){.fcols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fcols{grid-template-columns:1fr}}

/* ─── Reveal ───────────────────────────────────────────────────────────────
   A CSS animation that runs when the element is created, not a scroll listener.
   The previous JS version failed three separate ways — a re-render dropped its
   listeners, the scroll event never arrived, and the failsafe timer did not run —
   each time leaving real content invisible. An entrance animation is not worth a
   mechanism that can hide the page. This one has no failure mode: if the animation
   never runs, `forwards` never applies and the element is simply visible. */
@keyframes rvIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.rv{animation:rvIn .5s var(--ease) both}
@media(prefers-reduced-motion:reduce){.rv{animation:none}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ─── Cart drawer ─── */
.cart-btn{position:relative}
.cart-badge{position:absolute;inset-block-start:-6px;inset-inline-end:-10px;min-width:19px;height:19px;
  border-radius:999px;background:#3F6B28;color:#fff;font-size:11px;font-weight:700;
  display:grid;place-items:center;padding:0 5px;font-family:var(--mono);
  transform:scale(0);transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
.cart-badge.on{transform:scale(1)}
.scrim{position:fixed;inset:0;background:rgba(20,27,51,.45);z-index:80;opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease),visibility .25s}
.scrim.open{opacity:1;visibility:visible}
.drawer{position:fixed;inset-block:0;inset-inline-end:0;width:min(420px,100vw);background:var(--paper);
  z-index:81;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .32s var(--ease)}
html[dir="rtl"] .drawer{transform:translateX(-100%)}
.drawer.open{transform:none}
.drawer header{position:static;display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px;border-bottom:1px solid var(--line);background:none;backdrop-filter:none}
.drawer h2{font-size:19px;font-weight:700;letter-spacing:-.02em}
.drawer .x{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--muted);
  min-width:44px;min-height:44px;display:grid;place-items:center}
.drawer .lines{flex:1;overflow-y:auto;padding:8px 22px}
.dl{display:flex;gap:13px;padding:16px 0;border-bottom:1px solid var(--line)}
.dl img{width:62px;height:62px;object-fit:cover;border-radius:9px;flex:none;background:var(--cream)}
/* Products added in the admin may have no photograph yet. Hold the space rather than
   letting the line collapse or showing a broken-image icon. */
.dl .noimg{width:62px;height:62px;border-radius:9px;flex:none;background:var(--cream);
  border:1px dashed var(--line)}
.dl .n{font-size:15px;font-weight:600;line-height:1.3}
.dl .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.dl .row{display:flex;align-items:center;gap:10px;margin-top:9px}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.qty button{background:none;border:0;width:44px;height:44px;cursor:pointer;font-size:16px;color:var(--ink)}
.qty button:hover{background:var(--cream)}
.qty span{min-width:26px;text-align:center;font-family:var(--mono);font-size:13.5px}
.dl .pr{margin-inline-start:auto;font-family:var(--mono);font-size:14px;color:var(--ink);font-weight:600}
.dl .rm{background:none;border:0;color:var(--muted);font-size:12.5px;cursor:pointer;text-decoration:underline;
  min-height:44px;padding-inline:0;text-align:start}
.drawer footer{padding:20px 22px;border-top:1px solid var(--line);background:var(--paper);margin:0}
.drawer .tot{display:flex;justify-content:space-between;font-size:17px;font-weight:700;margin-bottom:4px}
.drawer .note{font-size:13px;color:var(--muted);margin-bottom:14px}
.drawer .btn{width:100%;justify-content:center}
.drawer .empty{padding:60px 22px;text-align:center;color:var(--muted)}