/* Over Cafe QR menu. Every design value is a custom property on :root, redefined for dark (docs/DESIGN-SPEC.md). */
@font-face{font-family:"Albert Sans";src:url(/menu/fonts/AlbertSans_600SemiBold.woff) format("woff");font-weight:600 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201E,U+2022,U+2026,U+20AC,U+2122,U+2212}
@font-face{font-family:"Albert Sans";src:url(/menu/fonts/AlbertSans_400Regular.woff) format("woff");font-weight:300 500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201E,U+2022,U+2026,U+20AC,U+2122,U+2212}
@font-face{font-family:Cairo;src:url(/menu/fonts/Cairo_600SemiBold.woff) format("woff");font-weight:600 800;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Cairo;src:url(/menu/fonts/Cairo_400Regular.woff) format("woff");font-weight:300 500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}

:root{
  /* colour: the app's tokens (src/theme/tokens.ts) plus the plaster tone behind photos while they load */
  --canvas:#F3F2EC;--surface:#FAF9F5;--fill:#E9E7DF;
  --well-warm:#EBE4D8;--well-cool:#E3E5DF;
  --niche:#E2D7C6;--niche-lit:#F7F2E9;--niche-edge:rgba(78,58,58,.08);
  --ink:#121212;--ink-2:#5A4E4C;--ink-3:#6A6670;
  --tint:#A06B31;--tint-text:#845A2A;--tint-soft:#EEE4D6;
  --espresso:#4E3A3A;--on-esp:#F3F2EC;--on-esp-2:#D9C9B4;--brass:#E0B07A;--esp-line:rgba(243,242,236,.16);--esp-btn:rgba(243,242,236,.28);
  --border:rgba(18,18,18,.10);--border-strong:rgba(18,18,18,.20);
  --leader:rgba(78,58,58,.42);--press:rgba(233,231,223,.75);--hover:rgba(233,231,223,.45);
  --scrim:rgba(18,18,18,.42);--pill-bg:#FAF9F5;--pill-shadow:0 1px 3px rgba(43,31,28,.14);
  --e3:0 -2px 8px rgba(43,31,28,.06),0 -16px 40px rgba(43,31,28,.10);
  --photo-filter:none;
  /* type */
  --font:"Albert Sans",Cairo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --w-ui:600;--w-text:400;
  --fs-hero:17px;--fs-callout:15px;--fs-small:14px;--fs-meta:13px;--fs-label:12px;--fs-tiny:11px;--fs-title:20px;
  --fs-name:16px;--fs-price:17px;--fs-cur:12px;--fs-feat:19px;--fs-feat-price:18px;
  --fs-chap:22px;--fs-cat:18px;--fs-sheet-name:26px;--fs-sheet-price:26px;--fs-size-price:19px;--fs-body:16px;
  --lh:1.45;--lh-ar:1.7;
  /* space and size */
  --g:16px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;
  --touch:44px;--col:680px;--sheet-w:560px;
  --hero-w:152px;--logo-w:92px;
  --ph-w:72px;--ph-h:84px;--feat-w:104px;--feat-h:122px;--row-h:92px;
  /* shape */
  --r-md:14px;--r-lg:20px;--r-xl:28px;--r-pill:999px;
  /* motion: pours, never bounces */
  --fast:160ms;--base:280ms;--slow:480ms;--glide:340ms;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.4,0,1,1);--ease-io:cubic-bezier(.65,0,.35,1);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --canvas:#141110;--surface:#1D1918;--fill:#2A2422;
    --well-warm:#241E1B;--well-cool:#1E211F;
    --niche:#211B18;--niche-lit:#362B25;--niche-edge:rgba(243,242,236,.08);
    --ink:#F3F2EC;--ink-2:#B8B0A8;--ink-3:#A39A93;
    --tint:#C38D52;--tint-text:#C38D52;--tint-soft:#3A2C21;
    --border:rgba(243,242,236,.10);--border-strong:rgba(243,242,236,.20);
    --leader:rgba(243,242,236,.34);--press:rgba(42,36,34,.9);--hover:rgba(42,36,34,.6);
    --scrim:rgba(0,0,0,.6);--pill-bg:#1D1918;--pill-shadow:0 1px 3px rgba(0,0,0,.4);
    --e3:0 -12px 36px rgba(0,0,0,.55);
    --photo-filter:brightness(.9) contrast(1.02);
  }
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{overflow-anchor:none;background:var(--canvas);-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lock{overflow:hidden}
body{margin:0;min-height:100vh;background:var(--canvas);color:var(--ink);
  font:var(--w-ui) 16px/var(--lh) var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}
html[lang=ar] body{line-height:var(--lh-ar)}
::selection{background:var(--tint-soft);color:var(--ink)}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--tint);outline-offset:2px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:20px;height:20px;flex:none}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;z-index:30;top:-100px;inset-inline-start:8px;padding:10px 16px;border-radius:var(--r-pill);background:var(--ink);color:var(--canvas);text-decoration:none}
.skip:focus{top:8px}
.num{unicode-bidi:isolate}
/* First paint: lang-boot.js sets <html lang>; the static .pre-ar/.pre-en copy shows until applyChrome adds .ready. */
html:not([lang=en]) .pre-en,html.ready .pre-en,html[lang=en]:not(.ready) .pre-ar{display:none}
html[lang=en]:not(.ready) #q::placeholder{color:transparent}
/* Keyboard focus never lands under the sticky bar (WCAG 2.4.11): 103 px bar + a gap, plus any top inset. */
main button,main a,.visit a{scroll-margin-top:calc(112px + env(safe-area-inset-top,0px))}

/* ---------- Masthead: the cafe's studio shot of an Over cup in an arch window, then the logo, the line and the facts ---------- */
.mast{max-width:var(--col);margin:0 auto;padding:calc(10px + env(safe-area-inset-top)) var(--g) 10px}
.mast-row{display:flex;align-items:center;gap:var(--s4)}
.mast-photo{flex:none;display:block;width:var(--hero-w);height:auto;aspect-ratio:320/405;object-fit:cover;background:var(--niche);filter:var(--photo-filter);
  border-radius:calc(var(--hero-w) / 2) calc(var(--hero-w) / 2) var(--r-md) var(--r-md)}
.mast-logo{margin:0 0 6px;line-height:0}
.mast-logo img{display:block;width:var(--logo-w);height:auto}
.mast-tx{min-width:0}
.hero{margin:0;font-size:var(--fs-hero);line-height:1.35;color:var(--ink);text-wrap:balance}
html[lang=ar] .hero{line-height:1.55}
/* The way to order: the Over app. "Coming soon" until menu.json has app.url. */
.app-cta{display:flex;align-items:center;gap:10px;min-height:48px;margin-top:var(--s3);padding-block:6px;padding-inline:16px 7px;
  border-radius:var(--r-pill);background:var(--fill);color:var(--ink);text-decoration:none;font-size:var(--fs-callout)}
.app-cta .ic{width:20px;height:20px;color:var(--tint)}
.app-cta-t{flex:1;min-width:0}
.soon{display:inline-flex;align-items:center;flex:none;min-height:30px;padding:0 12px;border-radius:var(--r-pill);
  background:var(--pill-bg);box-shadow:var(--pill-shadow);color:var(--tint-text);font-size:var(--fs-label);white-space:nowrap}
.facts{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;margin:2px 0 0;font-size:var(--fs-small);color:var(--ink-2)}
.fact{display:inline-flex;align-items:center;gap:6px;min-height:30px}
.fact .ic{width:16px;height:16px;color:var(--tint)}
.fact.link{text-decoration:none;color:var(--tint-text);min-height:var(--touch);margin-block:-7px}
.fact.link span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,var(--tint-text) 45%,transparent)}

/* ---------- Sticky bar: search, language switch, category nav ---------- */
/* The bar sticks below the top safe-area inset (notch, Dynamic Island in standalone mode). */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--canvas);border-bottom:1px solid var(--border)}
.bar::before{content:"";position:absolute;inset-inline:0;bottom:100%;height:env(safe-area-inset-top,0px);background:var(--canvas);display:none}
.bar.stuck::before{display:block}
body.searching .bar{top:0;padding-top:env(safe-area-inset-top,0px)}
body.searching .bar::before{display:none}
.bar-a{display:flex;gap:var(--s2);max-width:var(--col);margin:0 auto;padding:8px var(--g) 4px}
.search{position:relative;flex:1;min-width:0;margin:0}
.search input{display:block;width:100%;height:var(--touch);margin:0;border:0;border-radius:var(--r-pill);background:var(--fill);color:var(--ink);
  font:inherit;font-size:var(--fs-body);line-height:var(--touch);padding:0 44px 0 42px;-webkit-appearance:none;appearance:none;caret-color:var(--tint);outline:none}
html[dir=rtl] .search input{padding:0 42px 0 44px}
.search input::placeholder{color:var(--ink-3);opacity:1}
.search input::-webkit-search-cancel-button,.search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.search input:focus{box-shadow:0 0 0 2px var(--tint)}
.s-ic{position:absolute;top:12px;inset-inline-start:14px;color:var(--ink-3);pointer-events:none}
.s-clear{position:absolute;top:0;inset-inline-end:0;width:var(--touch);height:var(--touch);display:grid;place-items:center;border:0;border-radius:var(--r-pill);background:none;color:var(--ink-2);cursor:pointer}
.lang{flex:none;min-width:var(--touch);height:var(--touch);padding:0 16px;border:1px solid var(--border-strong);border-radius:var(--r-pill);background:none;font-size:var(--fs-callout);line-height:1;cursor:pointer;white-space:nowrap}
.lang:lang(ar){font-size:var(--fs-body)}
.tabs{max-width:var(--col);margin:0 auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
/* Edge fade while the rail has more to scroll that way (classes from app.js), so Shop and Visit us read as more. */
.tabs{--fd:to right;--fs:#000;--fe:#000}
html[dir=rtl] .tabs{--fd:to left}
.tabs.more-start{--fs:transparent}
.tabs.more-end{--fe:transparent}
.tabs.more-start,.tabs.more-end{-webkit-mask-image:linear-gradient(var(--fd),var(--fs),#000 32px,#000 calc(100% - 56px),var(--fe));mask-image:linear-gradient(var(--fd),var(--fs),#000 32px,#000 calc(100% - 56px),var(--fe))}
.tabs-in{position:relative;display:inline-flex;align-items:center;gap:14px;min-width:100%;height:46px;padding:0 var(--g)}
.tab{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:var(--touch);height:var(--touch);padding:0 2px;white-space:nowrap;font-size:var(--fs-callout);color:var(--ink-3);text-decoration:none;transition:color var(--fast)}
.tab[aria-current]{color:var(--ink)}
.tab:focus-visible{outline-offset:-2px;border-radius:8px}
.tab .ic{width:16px;height:16px;color:var(--tint)}
.tab-visit{color:var(--tint-text)}
.tsep{flex:none;width:1px;height:18px;background:var(--border-strong)}
.ind{position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:2px;background:var(--tint);pointer-events:none}

/* ---------- Menu: chapters, categories, rows ---------- */
main{display:block;max-width:var(--col);margin:0 auto}
.menu{padding-bottom:var(--s2);outline:none}
.status{margin:14px var(--g) 2px;font-size:var(--fs-small);color:var(--ink-2)}
.status:empty{display:none}
.chapter,.cat{display:flow-root}
.chap{display:flex;align-items:center;gap:14px;margin:28px var(--g) 0;font-size:var(--fs-chap);line-height:1.3;font-weight:var(--w-ui);letter-spacing:-.01em}
html[lang=ar] .chap{letter-spacing:0;line-height:1.5}
.chap::before,.chap::after{content:"";flex:1;height:1px;background:var(--border-strong)}
.chap-t{display:inline-flex;align-items:center;gap:10px}
.chap .arch{width:17px;height:19px;color:var(--tint);flex:none}
.chapter:first-child .chap{margin-top:8px}
.chap-line{margin:0 var(--g) 2px;text-align:center;font-size:var(--fs-small);line-height:1.45;color:var(--ink-2);text-wrap:balance}
html[lang=ar] .chap-line{line-height:1.6}
.cat-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:8px var(--g) 0;font-size:var(--fs-cat);line-height:1.4;font-weight:var(--w-ui)}
html[lang=ar] .cat-h{line-height:1.6}
.cat-c{font-size:var(--fs-meta);color:var(--ink-3)}
.rows{list-style:none;margin:0;padding:0 0 6px}

.item{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:var(--row-h);margin:0;padding:4px var(--g);border:0;border-radius:0;
  background:none;text-align:start;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color var(--fast)}
.item:active{background:var(--press)}
@media (hover:hover){.item:hover{background:var(--hover)}}
.item:focus-visible{outline-offset:-2px;border-radius:var(--r-lg)}
/* the arch well: semicircular top, soft bottom (Najdi arch, cup silhouette) */
.ph{position:relative;flex:none;width:var(--ph-w);height:var(--ph-h);border-radius:calc(var(--ph-w) / 2) calc(var(--ph-w) / 2) var(--r-md) var(--r-md);overflow:hidden;background:var(--well-warm)}
.ph.cool{background:var(--well-cool)}
.ph img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.06);filter:var(--photo-filter)}
.fade{opacity:0;transition:opacity var(--base) var(--ease-out)}
.fade.in{opacity:1}
.fade.swap{transition:none} /* the sheet drops the last item's photo at once (sheet.js fill) */
.tx{flex:1;min-width:0}
/* name, dotted leader to the price column. */
.l1{display:flex;align-items:flex-end;gap:10px}
@supports (align-items:last baseline){.l1{align-items:last baseline}}
.nm{flex:1 1 auto;min-width:0;overflow:hidden;font-size:var(--fs-name);line-height:1.4;overflow-wrap:anywhere;text-wrap:pretty}
html[lang=ar] .nm{line-height:1.6}
.nm::after{content:"";display:inline-block;width:100vw;height:4px;margin-inline:8px calc(-100vw - 8px);vertical-align:baseline;
  background:radial-gradient(circle,var(--leader) 0 .9px,transparent 1.3px) 0 100%/6px 4px repeat-x}
.pr{flex:none;display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}
.amt{font-size:var(--fs-price);letter-spacing:-.01em;color:var(--ink);unicode-bidi:isolate}
.cur,.from{font-size:var(--fs-cur);color:var(--ink-2)}
.sep{font-size:var(--fs-meta);color:var(--ink-3)}
.pc{position:relative;display:inline-flex;flex-direction:column;align-items:center;min-width:22px}
.szl{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:1px;font-size:var(--fs-tiny);line-height:1.3;color:var(--ink-3);white-space:nowrap}
html[lang=ar] .szl{font-size:calc(var(--fs-tiny) + .5px);line-height:1.25}
.l2{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;margin-top:1px;font-size:var(--fs-meta);line-height:1.45;color:var(--ink-2)}
html[lang=ar] .l2{line-height:1.6}
.l2.sz{min-height:18px;padding-inline-end:84px}
.tag{display:inline-flex;align-items:center;gap:5px;color:var(--tint-text)}
.tag::before{content:"";flex:none;width:7px;height:9px;border-radius:3.5px 3.5px 1px 1px;background:currentColor}
.where{color:var(--ink-3)}

/* feature row: the category's tagged item gets a larger arch, its description and a tag pill on the photo */
.item.feat{align-items:center;gap:var(--s4);min-height:0;padding-block:8px 10px}
.feat .ph{width:var(--feat-w);height:var(--feat-h);border-radius:calc(var(--feat-w) / 2) calc(var(--feat-w) / 2) var(--r-lg) var(--r-lg)}
.pills{position:absolute;inset-inline:0;bottom:8px;display:flex;justify-content:center;gap:4px;pointer-events:none}
.pills:empty{display:none}
.pill{padding:1px 9px;border-radius:var(--r-pill);background:var(--pill-bg);color:var(--tint-text);font-size:var(--fs-label);line-height:18px;box-shadow:var(--pill-shadow);white-space:nowrap}
html[lang=ar] .pill{line-height:20px}
.f-nm{display:block;font-size:var(--fs-feat);line-height:1.3;letter-spacing:-.01em;overflow-wrap:anywhere;text-wrap:balance}
html[lang=ar] .f-nm{line-height:1.5;letter-spacing:0}
.f-ds{display:-webkit-box;margin-top:3px;font-size:var(--fs-small);line-height:1.45;color:var(--ink-2);-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
html[lang=ar] .f-ds{line-height:1.65}
.f-ft{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-top:6px;font-size:var(--fs-meta);color:var(--ink-2)}
.f-ft .amt{font-size:var(--fs-feat-price)}
.f-ft .sized{margin-bottom:16px}

/* skeleton */
.sk{display:block;padding:18px var(--g)}
.sk-h{display:block;width:40%;height:18px;margin:6px auto 20px;border-radius:9px;background:var(--fill)}
.sk-r{display:flex;align-items:center;gap:var(--s3);height:var(--row-h)}
.sk-p{width:var(--ph-w);height:var(--ph-h);border-radius:calc(var(--ph-w) / 2) calc(var(--ph-w) / 2) var(--r-md) var(--r-md);background:var(--fill)}
.sk-f{height:140px}
.sk-f .sk-p{width:var(--feat-w);height:var(--feat-h);border-radius:calc(var(--feat-w) / 2) calc(var(--feat-w) / 2) var(--r-lg) var(--r-lg)}
.sk-t{flex:1;display:grid;gap:10px}
.sk-t span{height:12px;border-radius:6px;background:var(--fill);width:70%}
.sk-t span+span{width:40%}
/* Loading: the skeleton fills the screen and the footer waits, so nothing jumps when the rows arrive (CLS). */
body.loading .menu{min-height:100vh;min-height:100svh}
body.loading .visit,body.loading .app,body.load-err .visit,body.load-err .app,body.load-err .tabs{display:none}
.err{padding:48px var(--g);text-align:center}
.err p{margin:6px 0 18px;color:var(--ink-2)}

/* ---------- Search results and the empty state ---------- */
.results{padding-bottom:var(--s8)}
.results .rows{padding-top:4px}
.empty{padding:36px var(--g) 48px;text-align:center}
.empty-arch{width:40px;height:44px;color:var(--tint)}
.empty-t{margin:10px 0 4px;font-size:var(--fs-title);line-height:1.45;font-weight:var(--w-ui);text-wrap:balance;overflow-wrap:anywhere}
.empty-b{margin:0 auto;max-width:30em;color:var(--ink-2);font-size:var(--fs-callout);text-wrap:balance}
.chips-l{margin:22px 0 0;font-size:var(--fs-meta);color:var(--ink-3)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:8px 0 10px}
.chip,.ghost,.btn-solid{min-height:var(--touch);padding:0 18px;border-radius:var(--r-pill);border:0;background:var(--fill);font-size:var(--fs-callout);cursor:pointer}
.ghost{background:none;color:var(--tint-text);text-decoration:underline;text-underline-offset:4px}
.btn-solid{background:var(--ink);color:var(--canvas)}
body.searching .mast,body.searching .visit,body.searching .app,body.searching .tabs{display:none}

/* ---------- AppCard: where the menu hands over to the Over app ---------- */
.app{max-width:var(--sheet-w);margin:40px auto 0;padding:0 var(--g)}
.app-card{display:grid;justify-items:center;gap:6px;padding:26px 20px 24px;border-radius:var(--r-xl);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border);text-align:center}
.app-ic{display:grid;place-items:center;width:52px;height:60px;border-radius:26px 26px var(--r-md) var(--r-md);background:var(--niche);color:var(--tint)}
.app-ic .ic{width:26px;height:26px}
.app-t{margin:6px 0 0;font-size:var(--fs-title);line-height:1.4;font-weight:var(--w-ui)}
html[lang=ar] .app-t{line-height:1.6}
.app-b{margin:0;max-width:26em;color:var(--ink-2);font-size:var(--fs-callout);text-wrap:balance}
.app-soon{display:block;margin:10px 0 0;padding:10px 18px;white-space:normal;text-align:center;font-size:var(--fs-small)}
.app-get{display:inline-flex;align-items:center;gap:8px;margin-top:12px;text-decoration:none}

/* ---------- Visit: the espresso arch that closes the page ---------- */
.visit{max-width:var(--sheet-w);margin:36px auto 0;padding:0 var(--g) calc(28px + env(safe-area-inset-bottom));color:var(--on-esp)}
.v-arch{display:flex;align-items:flex-end;justify-content:center;aspect-ratio:2/1;padding-bottom:6px;background:var(--espresso);border-radius:999px 999px 0 0}
.v-arch img{width:42%;height:auto;display:block}
.v-body{padding:14px 22px 26px;background:var(--espresso);border-radius:0 0 var(--r-xl) var(--r-xl);text-align:center}
.v-title{margin:0;font-size:var(--fs-chap);line-height:1.35;font-weight:var(--w-ui)}
html[lang=ar] .v-title{line-height:1.6}
.v-name{margin:0;font-size:var(--fs-small);color:var(--brass)}
.v-facts{margin:20px 0 0;padding:0;display:grid;gap:12px}
.v-facts div{display:grid;gap:0}
.v-facts dt{font-size:var(--fs-meta);color:var(--brass)}
.v-facts dd{margin:0;font-size:var(--fs-callout);color:var(--on-esp);text-wrap:pretty}
.v-facts .v-more{font-size:var(--fs-meta);color:var(--on-esp-2)}
.v-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 14px;border-radius:24px;border:1px solid var(--esp-btn);
  color:var(--on-esp);text-decoration:none;font-size:var(--fs-callout);white-space:nowrap}
.btn.pri{grid-column:1/-1;background:var(--on-esp);color:var(--espresso);border-color:transparent}
.btn:focus-visible,.v-top:focus-visible{outline-color:var(--brass)}
.v-review{margin-top:24px;padding-top:20px;border-top:1px solid var(--esp-line)}
.v-rv-t{margin:0;font-size:var(--fs-title);line-height:1.4}
html[lang=ar] .v-rv-t{line-height:1.6}
.v-rv-b{margin:2px auto 14px;max-width:26em;font-size:var(--fs-small);color:var(--on-esp-2);text-wrap:balance}
.btn.rv{border-color:var(--brass);color:var(--brass)}
.v-notes{margin-top:24px;padding-top:18px;border-top:1px solid var(--esp-line);font-size:var(--fs-meta);line-height:1.6;color:var(--on-esp-2)}
html[lang=ar] .v-notes{line-height:1.8}
.v-notes p{margin:0 0 6px;text-wrap:balance}
.v-notes p:last-child{margin:0}
.v-top{display:inline-block;margin-top:14px;color:var(--brass);font-size:var(--fs-small);text-underline-offset:4px;padding-block:12px}
.v-foot{margin:0;font-size:var(--fs-label);color:var(--on-esp-2)}

/* ---------- Detail sheet ---------- */
.sheet-d{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink);overflow:hidden;touch-action:pinch-zoom}
.sheet-d[open]{display:flex;align-items:flex-end;justify-content:center}
.sheet-d::backdrop{background:var(--scrim);opacity:0;transition:opacity .2s}
.sheet-d.in::backdrop{opacity:1}
.sheet{position:relative;display:flex;flex-direction:column;width:100%;max-width:var(--sheet-w);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px - env(safe-area-inset-top));
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--e3);
  transform:translateY(48px);opacity:0;transition:transform var(--fast) var(--ease-in),opacity var(--fast)}
.sheet-d.in .sheet{transform:none;opacity:1;transition:transform 420ms var(--ease-out),opacity 220ms}
/* The closing sheet's copy (sheet.js ghost): it plays the exit while the real dialog is already shut, and takes no taps. */
.sheet-ghost{display:flex;align-items:flex-end;justify-content:center;z-index:40;pointer-events:none;transition:background-color .2s}
.sheet-d.sheet-ghost.dim{background:var(--scrim)}
.sheet-ghost .sheet.pulled{transition:none}
@media (prefers-color-scheme:dark){.sheet{border:1px solid rgba(243,242,236,.08);border-bottom:0}}
.sheet:focus{outline:none}
.grab{position:absolute;top:8px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--border-strong)}
.s-x{position:absolute;top:12px;inset-inline-end:12px;z-index:2;width:var(--touch);height:var(--touch);display:grid;place-items:center;border:0;border-radius:50%;background:var(--fill);cursor:pointer}
.s-scroll{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;padding:22px 20px calc(22px + env(safe-area-inset-bottom));text-align:center}
.s-hero{position:relative;width:min(100%,300px,40vh);aspect-ratio:1/1;margin:14px auto 18px;border-radius:50% 50% var(--r-xl) var(--r-xl)/50% 50% var(--r-xl) var(--r-xl);overflow:hidden;background:var(--well-warm)}
@supports (height:1dvh){.s-hero{width:min(100%,320px,40dvh)}}
.s-hero.cool{background:var(--well-cool)}
.s-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--photo-filter)}
.s-hero .pills{bottom:14px}
.s-hero .pill{font-size:var(--fs-meta);padding:2px 12px}
.s-name{margin:0;font-size:var(--fs-sheet-name);line-height:1.25;font-weight:var(--w-ui);letter-spacing:-.015em;overflow-wrap:anywhere;text-wrap:balance}
html[lang=ar] .s-name{letter-spacing:0;line-height:1.5}
.s-alt{margin:2px 0 0;text-wrap:balance;font-size:var(--fs-callout);line-height:1.5;color:var(--ink-2)}
.s-price{margin:14px auto 0;max-width:300px}
.s-one{display:inline-flex}
.s-one .amt{font-size:var(--fs-sheet-price)}
.s-one .cur{font-size:var(--fs-callout)}
.s-sizes{list-style:none;margin:0;padding:0;text-align:start}
.s-sizes li{display:flex;align-items:baseline;gap:6px;min-height:40px;padding:6px 0;border-bottom:1px solid var(--border)}
.s-sizes li:last-child{border-bottom:0}
.s-sizes .szn{font-size:var(--fs-body)}
.s-sizes .ld{flex:1 1 0;min-width:12px;height:4px;margin-inline:2px;background:radial-gradient(circle,var(--leader) 0 .9px,transparent 1.3px) 0 100%/6px 4px repeat-x}
.s-sizes .amt{font-size:var(--fs-size-price)}
.s-sizes .cur{font-size:var(--fs-meta)}
.s-kcal{margin:10px 0 0;font-size:var(--fs-small);color:var(--ink-2)}
.s-kcal:empty{display:none}
.s-desc{margin:14px auto 0;max-width:30em;font-weight:var(--w-text);font-size:var(--fs-body);line-height:1.65;color:var(--ink-2);text-wrap:balance}
html[lang=ar] .s-desc{line-height:1.85}
.s-desc:empty{display:none}
.s-how{display:flex;align-items:center;justify-content:center;gap:8px;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--border);font-size:var(--fs-small);color:var(--ink-2)}
.s-how>span,.s-how>a{display:inline-flex;align-items:center;gap:8px;min-height:var(--touch)}
.s-how>a{color:var(--tint-text);text-underline-offset:4px}
.s-how .ic{width:18px;height:18px;color:var(--tint)}
.s-missing{padding:40px 8px 12px}
.s-missing .btn-solid{margin-top:22px}
.noscript{padding:32px var(--g);text-align:center}

@media (min-width:600px){
  :root{--g:24px}
  .sheet{border-radius:var(--r-xl);margin-bottom:24px}
  .sheet-d[open],.sheet-ghost{align-items:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important;scroll-behavior:auto!important}
  .sheet{transform:none}
  .fade{opacity:1}
}