/* Dubai Street Food — site styles */
/* base */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
:root{
  --red:#C62B32; --red-deep:#921F26; --red-tint:#FBE6E3;
  --bg:#FFF9F1; --cream:#F3E7D7; --marble-base:#F7F4EE; --card:#FFFFFF;
  --ink:#29211D; --ink-2:#4E423A; --caramel:#BE9368; --caramel-ink:#7A5536;
  --wa:#1F8A57; --wa-dark:#18704A;
  --line:#ECE1D2; --line-strong:#D9C8B2; --danger:#A3222A; --ok:#2E6B45;
  --brown:var(--red-deep);
  --marble:url("../images/marble.webp");
  --awning:repeating-linear-gradient(90deg, var(--red) 0 16px, #FFF9F1 16px 32px);
  --paper:repeating-linear-gradient(90deg, rgba(198,43,50,.92) 0 11px, #FFFDF8 11px 22px);
  --shadow-card:0 1px 2px rgba(41,33,29,.05), 0 14px 30px -22px rgba(41,33,29,.38);
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"Readex Pro","Segoe UI",system-ui,-apple-system,sans-serif;
  --head-h:68px; --tabs-h:58px;
  --r-lg:18px; --r-md:12px; --r-sm:10px;
  --wrap:1200px; --pad:20px;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  -webkit-text-size-adjust:100%;
}
html[lang="ar"]{ --font-display:"Readex Pro","Geeza Pro","Noto Sans Arabic",Tahoma,sans-serif; }
*,*::before,*::after{ box-sizing:inherit; }
[hidden]{ display:none!important; }
html{ scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--head-h) + var(--tabs-h) + 8px); background:var(--bg); }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:1rem; line-height:1.55; font-weight:400; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
html[lang="ar"] body{ line-height:1.75; }
img{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); line-height:1.1; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
bdi{ unicode-bidi:isolate; }
:focus-visible{ outline:3px solid var(--red-deep); outline-offset:2px; border-radius:6px; }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; inset-inline-start:12px; top:-60px; z-index:100; background:var(--ink); color:#fff; padding:10px 14px; border-radius:10px; text-decoration:none; }
.skip-link:focus{ top:calc(env(safe-area-inset-top,0px) + 8px); }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.boot{ min-height:70vh; display:grid; place-items:center; font-family:var(--font-display); color:var(--red); }
.noscript{ padding:24px; text-align:center; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 24px; border-radius:999px; border:1.5px solid transparent; font-weight:600; font-size:1rem; text-decoration:none; line-height:1.2; transition:background-color .15s, color .15s, border-color .15s; }
.btn-dark,.btn-red{ background:var(--red); color:#fff; }
.btn-dark:hover,.btn-red:hover{ background:var(--red-deep); }
.btn-line{ background:#fff; border-color:var(--ink); color:var(--ink); }
.btn-line:hover{ background:var(--bg); }
.btn-wa{ background:var(--wa); color:#fff; font-weight:700; font-size:1.1875rem; }
.btn-wa:hover{ background:var(--wa-dark); }
.btn-wa-line{ background:#fff; border-color:var(--wa); color:var(--wa-dark); }
.btn-wa-line:hover{ background:#EFF8F3; }
.btn-quiet{ background:none; border:0; min-height:44px; padding:0 8px; color:var(--red-deep); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }
.btn-dark[disabled]{ background:#B9A99A; }
.btn-block{ width:100%; }
.icon{ width:20px; height:20px; flex:none; }
html[dir="rtl"] .flip{ transform:scaleX(-1); }

/* ---------- header ---------- */
.topline{ height:12px; background:repeating-linear-gradient(90deg, var(--red) 0 14px, #FFF9F1 14px 28px); box-shadow:inset 0 -1px 0 rgba(146,31,38,.25); }
.site-head{ position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:rgba(255,249,241,.95); backdrop-filter:saturate(1.2) blur(10px); -webkit-backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--line); }
.head-row{ height:var(--head-h); display:flex; align-items:center; gap:12px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-inline-end:auto; min-width:0; }
.brand-words{ display:flex; flex-direction:column; min-width:0; }
.brand-lat{ white-space:nowrap; font-family:"Archivo","Helvetica Neue",Arial,sans-serif; font-stretch:122%; font-weight:900; font-size:.86rem; line-height:.94; letter-spacing:.005em; text-transform:uppercase; color:var(--red); }
.brand-ar{ white-space:nowrap; font-family:"Readex Pro",Tahoma,sans-serif; font-size:.74rem; font-weight:500; color:var(--ink); line-height:1.3; margin-top:3px; }
.lang{ display:flex; align-items:center; background:#fff; border:1.5px solid var(--red); border-radius:999px; padding:3px; box-shadow:0 4px 12px -8px rgba(198,43,50,.5); }
.lang button{ border:0; background:transparent; min-width:42px; min-height:38px; padding:0 10px; border-radius:999px; font-size:.84rem; font-weight:700; color:var(--ink); line-height:1; transition:background-color .15s,color .15s; }
.lang button:hover{ background:var(--red-tint); }
.lang button[lang="ar"]{ font-family:"Readex Pro",Tahoma,sans-serif; font-size:.9rem; font-weight:600; }
.lang button[aria-pressed="true"]{ background:var(--red); color:#fff; }
.cart-btn{ position:relative; flex:none; width:48px; height:48px; border-radius:50%; border:1.5px solid var(--ink); background:#fff; display:grid; place-items:center; color:var(--ink); }
.cart-btn:hover{ border-color:var(--red); color:var(--red); }
.cart-btn .badge{ position:absolute; top:-5px; inset-inline-end:-5px; min-width:23px; height:23px; padding:0 6px; border-radius:999px; background:var(--red); color:#fff; font-size:.76rem; font-weight:700; display:grid; place-items:center; line-height:1; border:2px solid var(--bg); }
@media (max-width:399px){ .head-row{ gap:8px; } .brand-lat{ font-size:.72rem; } .brand-ar{ font-size:.64rem; } .lang button{ min-width:36px; padding:0 7px; font-size:.78rem; } .lang button[lang="ar"]{ font-size:.82rem; } .cart-btn{ width:44px; height:44px; } }

/* ---------- preview banner ---------- */
.preview-bar{ background:var(--ink); color:#fff; font-size:.9rem; }
.preview-bar .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding-block:10px; }
.preview-bar strong{ margin-inline-end:auto; font-weight:600; }
.preview-bar button{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:999px; min-height:36px; padding:0 14px; }

/* ---------- hero ---------- */
.hero{ position:relative; background:var(--marble-base) var(--marble) 40% 30% / cover no-repeat; border-bottom:1px solid var(--line); overflow:hidden; }
.hero-grid{ display:grid; gap:26px; padding-block:22px 34px; align-items:center; }
.hero-visual{ order:-1; position:relative; padding:10px 10px 18px; }
.hero-place{ display:inline-flex; align-items:center; gap:8px; font-size:.92rem; font-weight:500; color:var(--red-deep); margin-bottom:14px; }
.hero-place::before{ content:""; width:22px; height:3px; border-radius:2px; background:var(--red); }
.hero-title{ font-weight:850; font-size:min(10vw,4.9rem); line-height:.92; letter-spacing:-.015em; color:var(--ink); }
.hero-title span{ display:block; font-stretch:100%; white-space:nowrap; }
.hero-title .l1{ font-stretch:125%; }
.hero-title .l2{ font-stretch:68%; font-size:1.2em; color:var(--red); }
html[lang="es"] .hero-title{ font-size:min(7.6vw,4.1rem); }
html[lang="ar"] .hero-title{ font-size:min(12.5vw,5.4rem); line-height:1.18; letter-spacing:0; }
html[lang="ar"] .hero-title .l1{ font-weight:700; }
html[lang="ar"] .hero-title .l2{ font-weight:300; font-size:1em; }
@media (prefers-reduced-motion:no-preference){
  .hero-title.anim .l1,.hero-title.anim .l2{ transition:font-stretch 1.1s cubic-bezier(.2,.7,.1,1), font-weight 1.1s cubic-bezier(.2,.7,.1,1); }
  .hero-title.anim:not(.settled) .l1,.hero-title.anim:not(.settled) .l2{ font-stretch:96%; }
  html[lang="ar"] .hero-title.anim:not(.settled) .l1,html[lang="ar"] .hero-title.anim:not(.settled) .l2{ font-weight:480; }
}
.hero-text{ margin-top:16px; font-size:1.08rem; color:var(--ink-2); max-width:36ch; }
.hero-actions{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; }
.hero-closed{ margin-top:14px; display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:var(--red-tint); color:var(--red-deep); font-size:.88rem; font-weight:500; }
.hero-closed::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--red); flex:none; }
/* hero food visual */
.hero-liner{ position:absolute; inset:18px 0 0 22px; border-radius:14px; background:var(--paper); transform:rotate(-3.5deg); box-shadow:0 10px 24px -18px rgba(41,33,29,.5); }
html[dir="rtl"] .hero-liner{ inset:18px 22px 0 0; transform:rotate(3.5deg); }
.hero-frame{ position:relative; aspect-ratio:16/10; border-radius:var(--r-lg); overflow:hidden; background:var(--marble-base) var(--marble) center / cover; border:6px solid #fff; box-shadow:0 22px 44px -26px rgba(41,33,29,.55); }
.hero-frame img,.hero-frame .img-wait{ display:block; width:100%; height:100%; object-fit:cover; object-position:100% 50%; }
.hero-ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--red); }
.hero-ph svg{ width:min(84%,470px); height:auto; }
.hero-ph span{ font-size:.82rem; font-weight:500; color:var(--ink); background:rgba(255,255,255,.88); padding:5px 12px; border-radius:999px; box-shadow:0 2px 8px -4px rgba(41,33,29,.3); }
.stamp{ position:absolute; z-index:2; top:-26px; right:-4px; width:78px; height:78px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; text-align:center; font-family:var(--font-display); font-weight:800; font-stretch:88%; font-size:.8rem; line-height:1.05; padding:12px; transform:rotate(8deg); box-shadow:0 10px 20px -12px rgba(146,31,38,.8); outline:2px dashed rgba(255,255,255,.55); outline-offset:-7px; }
html[lang="ar"] .stamp{ font-weight:700; font-size:.95rem; line-height:1.3; transform:rotate(-8deg); }
@media (min-width:880px){
  .hero-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); padding-block:52px 60px; gap:44px; }
  .hero-title{ font-size:min(4.3vw,3.7rem); }
  html[lang="es"] .hero-title{ font-size:min(3.55vw,3.05rem); }
  html[lang="ar"] .hero-title{ font-size:min(6.4vw,5.2rem); }
  .brand-lat{ font-size:1.08rem; }
  .brand-ar{ font-size:.8rem; }
  .lang button{ min-width:50px; min-height:42px; padding:0 14px; font-size:.92rem; }
  .lang button[lang="ar"]{ font-size:.98rem; }
  .hero-visual{ order:0; padding:14px 14px 26px; }
  .hero-frame{ aspect-ratio:16/10; }
  .hero-text{ font-size:1.2rem; }
  .stamp{ width:100px; height:100px; font-size:.98rem; top:-40px; right:-14px; }
  html[lang="ar"] .stamp{ font-size:1.08rem; }
}

/* ---------- category tabs ---------- */
.cats{ position:sticky; top:calc(env(safe-area-inset-top,0px) + var(--head-h)); z-index:25; background:rgba(255,249,241,.96); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.cats-row{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-block:10px; height:var(--tabs-h); align-items:center; scroll-snap-type:x proximity; }
.cats-row::-webkit-scrollbar{ display:none; }
.cats-row{ scroll-padding-inline:var(--pad); overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
.cats-row::after{ content:""; flex:0 0 1px; }
.cats a{ flex:none; scroll-snap-align:start; display:inline-flex; align-items:center; min-height:40px; padding:0 18px; border-radius:999px; text-decoration:none; font-weight:600; font-size:.95rem; color:var(--ink); border:1.5px solid var(--line-strong); background:#fff; white-space:nowrap; transition:background-color .15s,color .15s,border-color .15s; }
.cats a:hover{ border-color:var(--red); color:var(--red-deep); }
.cats a[aria-current="true"]{ background:var(--red); color:#fff; border-color:var(--red); }

/* ---------- menu ---------- */
.menu{ padding-block:4px 48px; }
.cat{ padding-top:36px; }
.cat-head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin-bottom:16px; }
.cat-head h2{ position:relative; font-size:clamp(1.7rem,5.6vw,2.6rem); font-weight:850; font-stretch:114%; letter-spacing:-.01em; padding-top:14px; }
.cat-head h2::before{ content:""; position:absolute; top:0; inset-inline-start:0; width:34px; height:5px; border-radius:3px; background:var(--red); }
html[lang="ar"] .cat-head h2{ font-weight:700; }
.cat-head .count{ color:var(--ink-2); font-size:.92rem; }
.grid{ display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } }
@media (min-width:1040px){ .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } }

.card{ height:100%; display:grid; grid-template-rows:auto 1fr auto; grid-template-areas:"media" "body" "foot"; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-card); }
.card-media{ grid-area:media; position:relative; aspect-ratio:4/3; background:var(--marble-base) var(--marble) center / 900px auto; }
.card-media img,.card-media .img-wait{ display:block; width:100%; height:100%; object-fit:cover; }
.card-body{ grid-area:body; min-width:0; padding:16px 18px 0; }
.card-name{ font-size:1.22rem; font-weight:800; font-stretch:106%; letter-spacing:-.005em; }
html[lang="ar"] .card-name{ font-weight:700; font-size:1.2rem; line-height:1.4; }
.card-desc{ margin-top:6px; font-size:.95rem; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.card-ings{ margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.card-ings li{ font-size:.84rem; font-weight:600; line-height:1.3; color:#4A2F1B; background:#FBF1E4; border:1px solid #E3CDB0; border-radius:999px; padding:5px 11px; }
.card-foot{ grid-area:foot; display:grid; gap:10px; padding:14px 18px 18px; }
.card-price{ display:flex; align-items:center; min-height:28px; }
.card-btns{ display:flex; flex-wrap:wrap; gap:6px; }
.card-btns .btn-cust{ padding:0 13px; }
.card-btns .btn-add{ padding:0 15px; gap:5px; }
.card-btns > button{ flex:1 1 auto; justify-content:center; }
.card-btns .btn-add.wide{ flex-basis:100%; }
.btn-cust{ -webkit-appearance:none; appearance:none; display:inline-flex; align-items:center; gap:6px; min-height:46px; padding:0 16px; border-radius:999px; border:2px solid #C62B32; border-color:var(--red); background:#fff; color:var(--red-deep); font-weight:700; font-size:.97rem; line-height:1.1; transition:background-color .15s; }
.btn-cust:hover,.btn-cust:active{ background:var(--red-tint); }
.price{ font-family:"Archivo","Helvetica Neue",Arial,sans-serif; font-weight:800; font-size:1.2rem; font-variant-numeric:tabular-nums; color:var(--ink); }
.price.pending{ font-family:var(--font-body); font-size:.9rem; font-weight:600; color:var(--red-deep); background:var(--red-tint); padding:5px 11px; border-radius:999px; line-height:1.25; }
.sheet-intro .price.pending{ display:inline-block; font-size:.92rem; color:var(--red-deep); }
.sheet-foot .btn-dark .price.pending-in{ font-family:var(--font-body); font-size:.86rem; font-weight:600; opacity:.95; }
.lt-tbc,.v-tbc{ font-family:var(--font-body); font-weight:600; font-size:.9rem; color:var(--red-deep); }
.cart-sum{ flex-wrap:wrap; }
.sum-note{ flex-basis:100%; font-size:.84rem; color:var(--ink-2); }
.btn-add{ -webkit-appearance:none; appearance:none; display:inline-flex; align-items:center; gap:6px; flex:none; min-height:46px; padding:0 20px; border-radius:999px; border:0; background:#C62B32; background:var(--red); color:#fff; font-weight:700; font-size:.97rem; line-height:1.1; box-shadow:0 8px 16px -10px rgba(146,31,38,.9); transition:background-color .15s; }
.btn-add:hover,.btn-add:active{ background:#921F26; background:var(--red-deep); }
.btn-add .icon{ width:18px; height:18px; margin-inline-start:-4px; }
.btn-add svg{ width:18px; height:18px; }
.btn-add[disabled]{ background:#EDE6DC; color:var(--ink-2); cursor:not-allowed; }
.tag{ display:inline-flex; align-items:center; min-height:26px; padding:0 10px; border-radius:999px; font-size:.78rem; font-weight:600; background:#fff; color:var(--ink); }
.tag.sold{ background:var(--ink); color:#fff; }
.card.is-sold .card-media > :not(.sold-flag){ opacity:.6; }
.card.is-sold .sold-flag{ position:absolute; inset-inline-start:12px; top:12px; z-index:2; }

/* photo placeholder: marble surface on a strip of red-and-white paper */
.ph{ position:absolute; inset:0; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:var(--marble-base) var(--marble) center / 900px auto; color:var(--red); text-align:center; padding:8px; }
.ph::after{ content:""; position:absolute; width:84px; height:84px; bottom:-42px; inset-inline-start:-42px; transform:rotate(45deg); background:repeating-linear-gradient(90deg, var(--red) 0 6px, #FFFDF8 6px 12px); box-shadow:0 0 0 1px rgba(146,31,38,.15); }
.ph svg{ width:30%; max-width:120px; height:auto; }
.ph span{ font-size:.78rem; font-weight:500; line-height:1.2; color:var(--ink); background:rgba(255,255,255,.9); padding:4px 10px; border-radius:999px; }

/* ---------- info + footer ---------- */
.info{ position:relative; background:var(--cream); padding-block:52px 48px; }
.info::before{ content:""; position:absolute; inset-inline:0; top:0; height:12px; background:repeating-linear-gradient(90deg, var(--red) 0 14px, #FFF9F1 14px 28px); }
.info h2{ font-size:clamp(1.6rem,4.8vw,2.3rem); font-weight:850; font-stretch:112%; margin-bottom:20px; }
html[lang="ar"] .info h2{ font-weight:700; }
.info-grid{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.info-grid.n2 .info-item:last-child,.info-grid.n4 .info-item:last-child{ grid-column:auto; }
.info-grid.n3 .info-item:last-child{ grid-column:1 / -1; }
@media (min-width:760px){ .info-grid{ gap:14px; } .info-grid.n3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .info-grid.n4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .info-grid .info-item:last-child{ grid-column:auto; } }
.info-how{ padding-block:40px 36px; }
.info-how h2{ margin-bottom:8px; }
.info-how p{ font-size:1.02rem; color:var(--ink-2); max-width:56ch; }
.info-item{ background:#fff; border-radius:var(--r-md); padding:16px; border:1px solid var(--line); box-shadow:var(--shadow-card); }
.info-item h3{ font-family:var(--font-body); font-size:.9rem; font-weight:700; color:var(--red); margin-bottom:6px; }
.info-item p{ white-space:pre-line; font-size:.98rem; }
.info-item .tbc{ color:var(--ink-2); }
.site-foot{ background:var(--red); color:#fff; padding-block:30px calc(100px + env(safe-area-inset-bottom,0px)); font-size:.9rem; }
.site-foot .wrap{ display:grid; gap:14px; }
@media (min-width:760px){ .site-foot .wrap{ grid-template-columns:auto 1fr auto; align-items:center; gap:14px 32px; } }
.foot-brand .brand-lat{ color:#fff; font-size:1.05rem; }
.foot-brand .brand-ar{ color:#FFE9E4; }
.site-foot a{ color:#fff; }
.site-foot .note{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.3); }
.site-foot .note::before{ background:#fff; }
.foot-meta{ display:grid; gap:4px; color:#FFE9E4; }
@media (min-width:760px){ .foot-meta{ text-align:end; } }

/* the one small status note (WhatsApp not yet active / provisional prices) */
.note{ display:inline-flex; align-items:flex-start; gap:8px; padding:7px 12px; border-radius:12px; font-size:.84rem; line-height:1.4; background:#fff; color:var(--ink); border:1px solid var(--line-strong); justify-self:start; }
.note::before{ content:""; width:7px; height:7px; margin-top:.45em; border-radius:50%; background:var(--caramel); flex:none; }
.cart-note{ margin:12px 16px 0; }

/* ---------- sticky order bar ---------- */
.cart-bar{ position:fixed; bottom:0; inset-inline:0; z-index:40; padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom,0px)); pointer-events:none; }
.cart-bar button{ pointer-events:auto; width:100%; max-width:560px; margin-inline:auto; display:flex; align-items:center; gap:12px; min-height:58px; padding-inline:20px 8px; border:0; border-radius:999px; background:var(--red); color:#fff; box-shadow:0 16px 34px -14px rgba(146,31,38,.65); font-size:1.02rem; font-weight:600; }
.cart-bar button:hover{ background:var(--red-deep); }
.cart-bar .n{ min-width:28px; height:28px; border-radius:999px; background:#fff; color:var(--red); display:grid; place-items:center; font-weight:800; font-size:.85rem; }
.cart-bar .lbl{ margin-inline-end:auto; }
.cart-bar .tot{ background:#fff; color:var(--ink); border-radius:999px; padding:9px 14px; font-weight:800; font-family:"Archivo",Arial,sans-serif; font-variant-numeric:tabular-nums; }

/* ---------- dialogs (sheet / drawer) ---------- */
dialog.sheet{ padding:0; border:0; margin:0; color:var(--ink); background:var(--card); width:100%; max-width:100%; max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px)); top:auto; bottom:0; inset-inline:0; border-radius:var(--r-lg) var(--r-lg) 0 0; overflow:hidden; }
dialog.sheet[open]{ display:flex; flex-direction:column; }
dialog.sheet::backdrop{ background:rgba(41,33,29,.5); }
@media (prefers-reduced-motion:no-preference){
  dialog.sheet[open]{ animation:sheet-up .3s cubic-bezier(.2,.8,.2,1); }
  @keyframes sheet-up{ from{ transform:translateY(40px); opacity:.2; } to{ transform:none; opacity:1; } }
}
@media (min-width:760px){
  dialog.sheet{ top:0; bottom:0; margin:auto; width:min(660px,92vw); max-height:min(90vh,920px); border-radius:var(--r-lg); }
  dialog.sheet.drawer{ margin:0; top:0; bottom:0; inset-inline-start:auto; inset-inline-end:0; width:min(480px,100vw); height:100%; max-height:100%; border-radius:0; }
  html[dir="ltr"] dialog.sheet.drawer{ border-radius:var(--r-lg) 0 0 var(--r-lg); }
  html[dir="rtl"] dialog.sheet.drawer{ border-radius:0 var(--r-lg) var(--r-lg) 0; }
}
.sheet-top{ display:flex; align-items:center; gap:10px; padding-block:10px; padding-inline:20px 12px; border-bottom:1px solid var(--line); flex:none; position:relative; }
.sheet-top::before{ content:""; position:absolute; inset-inline:0; top:0; height:5px; background:var(--awning); }
.drawer .sheet-top{ padding-top:15px; }
.sheet-top h2{ font-size:1.3rem; font-weight:850; font-stretch:110%; margin-inline-end:auto; }
html[lang="ar"] .sheet-top h2{ font-weight:700; }
.x-btn{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); background:#fff; display:grid; place-items:center; flex:none; color:var(--ink); }
.x-btn:hover{ border-color:var(--red); color:var(--red); }
.sheet-scroll{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.sheet-foot{ flex:none; border-top:1px solid var(--line); padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); background:#fff; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.sheet-media{ position:relative; aspect-ratio:4/3; background:var(--marble-base) var(--marble) center / 900px auto; }
.sheet-media img,.sheet-media .img-wait{ display:block; width:100%; height:100%; object-fit:cover; }
@media (min-width:760px){ .sheet-media{ aspect-ratio:16/11; } }
.sheet-media .ph svg{ width:22%; }
.sheet-close-float{ position:absolute; top:12px; inset-inline-end:12px; z-index:2; }
.sheet-intro{ padding:18px 20px 6px; }
.sheet-intro h2{ font-size:1.7rem; font-weight:850; font-stretch:108%; }
html[lang="ar"] .sheet-intro h2{ font-weight:700; }
.sheet-intro .price{ display:block; margin-top:6px; font-size:1.25rem; color:var(--red); }
.sheet-intro p{ margin-top:10px; color:var(--ink-2); }
.opt{ margin:0; border:0; padding:16px 20px 4px; min-width:0; }
.opt + .opt{ border-top:1px solid var(--line); margin-top:10px; }
.opt legend{ float:left; padding:0; display:flex; width:100%; align-items:baseline; gap:8px; flex-wrap:wrap; }
.opt legend .t{ font-family:var(--font-display); font-weight:800; font-size:1.1rem; margin-inline-end:auto; }
html[lang="ar"] .opt legend .t{ font-weight:700; }
.opt legend .h{ font-size:.84rem; color:var(--ink-2); }
.opt legend .req{ font-size:.76rem; font-weight:700; background:var(--red-tint); color:var(--red-deep); padding:2px 9px; border-radius:999px; }
.opt .req.err{ background:var(--red); color:#fff; }
.opt-list{ margin-top:8px; }
.opt > :not(legend){ clear:both; }
.opt .err-text{ padding-top:6px; }
.row{ display:flex; align-items:center; gap:12px; min-height:52px; border-bottom:1px solid #F3EADF; }
.row:last-child{ border-bottom:0; }
.row label{ flex:1; display:flex; align-items:center; gap:12px; min-height:52px; cursor:pointer; }
.row input[type="checkbox"],.row input[type="radio"]{ width:22px; height:22px; accent-color:var(--red); flex:none; margin:0; }
.row .nm{ flex:1; }
.row .muted{ font-size:.82rem; color:var(--ink-2); }
.row .px{ font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600; font-size:.92rem; white-space:nowrap; }
.row.locked .nm{ color:var(--ink-2); }
.row.off .nm{ text-decoration:line-through; color:var(--ink-2); }
.removing{ margin:6px 0 0; font-size:.88rem; color:var(--red-deep); font-weight:500; min-height:1.2em; }
.step{ display:inline-flex; align-items:center; border:1.5px solid var(--line-strong); border-radius:999px; background:#fff; flex:none; }
.step button{ width:40px; height:40px; border:0; background:transparent; border-radius:50%; display:grid; place-items:center; font-size:1.2rem; line-height:1; color:var(--red); font-weight:700; }
.step button:hover:not([disabled]){ background:var(--red-tint); }
.step button[disabled]{ opacity:.3; cursor:not-allowed; color:var(--ink); }
.step output,.step .v{ min-width:24px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.step.lg button{ width:46px; height:46px; }
.field{ display:grid; gap:6px; }
.field label,.field .lab{ font-weight:600; font-size:.94rem; }
.field .opt-note{ font-weight:400; color:var(--ink-2); font-size:.84rem; }
.inp{ width:100%; min-height:48px; padding:11px 14px; border:1.5px solid var(--line-strong); border-radius:var(--r-sm); background:#fff; font-size:16px; line-height:1.4; }
textarea.inp{ min-height:84px; resize:vertical; }
.inp:focus-visible{ outline:3px solid var(--red-deep); outline-offset:1px; }
.inp[aria-invalid="true"]{ border-color:var(--danger); }
.err-text{ color:var(--danger); font-size:.86rem; font-weight:500; }
.sheet-note{ padding:16px 20px 22px; }
.sheet-foot .btn-dark{ flex:1; min-height:54px; justify-content:space-between; padding-inline:22px; font-size:1.02rem; }
.sheet-foot .btn-dark .price{ font-size:1.05rem; color:#fff; }
.sheet-err{ width:100%; color:var(--danger); font-size:.9rem; }
.sold-msg{ margin:12px 20px 0; padding:10px 14px; border-radius:var(--r-sm); background:var(--red-tint); color:var(--red-deep); font-size:.92rem; font-weight:500; }

/* cart */
.cart-lines{ padding:6px 16px; }
.cline{ display:grid; grid-template-columns:68px minmax(0,1fr); gap:12px; padding:16px 0; border-bottom:1px solid var(--line); }
.cline:last-child{ border-bottom:0; }
.cline .thumb{ position:relative; width:68px; height:68px; border-radius:12px; overflow:hidden; background:var(--marble-base); }
.cline .thumb img{ width:100%; height:100%; object-fit:cover; }
.cline .thumb .ph{ padding:4px 4px 8px; }
.cline .thumb .ph::after{ width:36px; height:36px; bottom:-18px; inset-inline-start:-18px; }
.cline .thumb .ph span{ display:none; }
.cline .thumb .ph svg{ width:58%; }
.cline h3{ font-size:1.05rem; font-weight:800; font-stretch:104%; }
html[lang="ar"] .cline h3{ font-weight:700; }
.cline .mods{ margin-top:4px; font-size:.87rem; color:var(--ink-2); display:grid; gap:2px; }
.cline .mods b{ font-weight:600; color:var(--ink); }
.cline .money{ margin-top:8px; font-size:.85rem; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:2px 14px; font-variant-numeric:tabular-nums; }
.cline .ctrl{ margin-top:10px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cline .ctrl .lt{ margin-inline-start:auto; font-family:"Archivo",Arial,sans-serif; font-weight:800; font-variant-numeric:tabular-nums; }
.cline .warn{ margin-top:6px; font-size:.85rem; color:var(--danger); font-weight:600; }
.cart-sum{ padding:14px 20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.cart-sum .lbl{ font-weight:700; }
.cart-sum .v{ font-family:"Archivo",Arial,sans-serif; font-weight:850; font-size:1.4rem; font-variant-numeric:tabular-nums; color:var(--red); }
.cart-clear{ padding:0 12px 12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.confirm{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px; margin:0 12px 12px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md); }
.confirm p{ flex-basis:100%; font-size:.94rem; }
.btn-sm{ min-height:40px; padding:0 14px; font-size:.9rem; }
.empty{ padding:40px 24px; text-align:center; display:grid; gap:12px; justify-items:center; }
.empty .big{ font-family:var(--font-display); font-weight:850; font-size:1.35rem; }
.details{ padding:18px 20px 24px; display:grid; gap:16px; }
.details .hint{ color:var(--ink-2); font-size:.94rem; }
.seg{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.seg label{ position:relative; display:flex; align-items:center; justify-content:center; min-height:50px; border:1.5px solid var(--line-strong); border-radius:var(--r-sm); background:#fff; cursor:pointer; font-weight:600; text-align:center; padding:6px; }
.seg input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.seg label:has(input:checked){ border-color:var(--red); background:var(--red); color:#fff; }
.seg label:has(input:focus-visible){ outline:3px solid var(--red-deep); outline-offset:2px; }
.msg-preview{ white-space:pre-wrap; font-size:.86rem; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px; max-height:220px; overflow:auto; font-family:var(--font-body); }
details.pv summary{ cursor:pointer; color:var(--red-deep); font-weight:600; min-height:40px; display:flex; align-items:center; }
.foot-note{ width:100%; font-size:.86rem; color:var(--ink-2); }
.foot-note.bad{ color:var(--danger); font-weight:500; }

/* toast */
.toast{ position:fixed; z-index:60; inset-inline:0; bottom:calc(86px + env(safe-area-inset-bottom,0px)); display:flex; justify-content:center; pointer-events:none; padding-inline:16px; }
.toast div{ background:var(--ink); color:#fff; padding:12px 18px; border-radius:999px; font-size:.94rem; box-shadow:0 12px 28px -12px rgba(41,33,29,.5); }
@media (prefers-reduced-motion:no-preference){ .toast div{ animation:toast-in .25s ease-out; } @keyframes toast-in{ from{ transform:translateY(10px); opacity:0; } } }

/* ---------- admin ---------- */
.admin{ min-height:100vh; background:var(--bg); padding-bottom:60px; }
.adm-head{ position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:var(--card); border-bottom:1px solid var(--line); }
.adm-head .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding-block:12px; }
.adm-head h1{ font-size:1.2rem; font-weight:850; font-stretch:115%; margin-inline-end:auto; }
.adm-status{ font-size:.86rem; color:var(--ink-2); display:flex; align-items:center; gap:8px; }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--ok); flex:none; }
.dot.draft{ background:var(--caramel); }
.adm-tabs{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-block:0 12px; }
.adm-head .adm-tabs{ flex-wrap:nowrap; }
@media (max-width:819px){ .adm-head{ position:static; } .adm-head h1{ flex-basis:100%; } }
.adm-tabs a{ flex:none; text-decoration:none; min-height:38px; display:inline-flex; align-items:center; padding:0 14px; border-radius:999px; border:1px solid var(--line-strong); font-size:.92rem; font-weight:500; color:var(--ink-2); background:var(--bg); }
.adm-tabs a[aria-current="page"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.adm-main{ padding-block:22px; display:grid; gap:22px; }
.panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; }
.panel > h2{ font-size:1.15rem; font-weight:800; font-stretch:108%; margin-bottom:4px; }
.panel > .sub{ color:var(--ink-2); font-size:.9rem; margin-bottom:14px; }
.adm-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #F1E8DB; flex-wrap:wrap; }
.adm-row:last-child{ border-bottom:0; }
.adm-thumb{ position:relative; width:52px; height:52px; border-radius:10px; overflow:hidden; background:var(--cream); flex:none; }
.adm-thumb img{ width:100%; height:100%; object-fit:cover; }
.adm-thumb .ph span{ display:none; }
.adm-name{ flex:1 1 180px; min-width:0; }
.adm-name strong{ display:block; font-weight:600; }
.adm-name small{ color:var(--ink-2); }
.adm-actions{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ibtn{ min-width:40px; height:40px; border-radius:10px; border:1px solid var(--line-strong); background:var(--bg); display:inline-grid; place-items:center; padding:0 10px; font-size:.88rem; font-weight:500; }
.ibtn[disabled]{ opacity:.35; cursor:not-allowed; }
.ibtn.danger{ color:var(--danger); border-color:#E3B9B0; }
.ibtn.primary{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.switch{ display:inline-flex; align-items:center; gap:8px; font-size:.88rem; cursor:pointer; min-height:40px; }
.switch input{ width:20px; height:20px; accent-color:var(--brown); margin:0; }
.badges{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.badge-s{ font-size:.72rem; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--cream); color:var(--ink); }
.badge-s.warn{ background:#F6E7C9; color:#6A4A12; }
.badge-s.bad{ background:#F3DED8; color:#7A2A1E; }
.tri{ display:grid; gap:10px; }
@media (min-width:820px){ .tri{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.form-grid{ display:grid; gap:14px; }
@media (min-width:820px){ .form-grid.two{ grid-template-columns:repeat(2,minmax(0,1fr)); } .form-grid.four{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.sub-list{ display:grid; gap:10px; }
.sub-item{ border:1px solid var(--line); border-radius:var(--r-md); padding:12px; background:var(--bg); display:grid; gap:10px; }
.sub-item .flags{ display:flex; flex-wrap:wrap; gap:4px 16px; align-items:center; }
.sub-item .flags .adm-actions{ margin-inline-start:auto; }
.photo-edit{ display:grid; gap:14px; }
@media (min-width:820px){ .photo-edit{ grid-template-columns:260px 1fr; align-items:start; } }
.photo-box{ position:relative; aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden; background:var(--cream); border:1px solid var(--line); }
.photo-box img{ width:100%; height:100%; object-fit:cover; }
.file-btn{ position:relative; overflow:hidden; }
.file-btn input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.file-btn:focus-within{ outline:3px solid var(--brown); outline-offset:2px; }
.note-ok{ color:var(--ok); font-size:.88rem; }
.note-warn{ color:#6A4A12; font-size:.88rem; }
.note-bad{ color:var(--danger); font-size:.88rem; }
.issues{ display:grid; gap:6px; margin:0; padding-inline-start:20px; list-style:disc; }
.changes{ display:grid; gap:4px; margin:0; padding-inline-start:20px; list-style:disc; color:var(--ink-2); }
.adm-foot{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.gate{ min-height:80vh; display:grid; place-items:center; text-align:center; padding:24px; }
.gate > div{ max-width:460px; display:grid; gap:14px; justify-items:center; }
.gate h1{ font-size:1.6rem; font-weight:850; font-stretch:112%; }
.adm-thumb .ph{ padding:4px 4px 6px; }
.adm-thumb .ph::after{ width:28px; height:28px; bottom:-14px; inset-inline-start:-14px; }
.adm-thumb .ph svg{ width:60%; }
.adm-head{ border-top:5px solid var(--red); }
.img-wait{ display:block; width:100%; height:100%; }
.sheet-foot .btn-dark > span:only-child{ margin-inline:auto; }
@media (max-width:360px){ .btn-add{ padding:0 16px; font-size:.93rem; } .card-body{ padding-inline:16px; } .card-foot{ padding-inline:16px; } }
[tabindex="-1"]:focus{ outline:none; }
.hero-notice{ margin-top:16px; max-width:46ch; padding:10px 14px; border-radius:var(--r-sm); background:#fff; border:1px solid var(--line); border-inline-start:4px solid var(--red); font-size:.96rem; color:var(--ink); white-space:pre-line; }
@media (max-width:360px){ .btn-cust{ padding:0 12px; font-size:.93rem; } }
@media (max-width:399px){ .card-body{ padding-inline:16px; } .card-foot{ padding-inline:16px; } .card-btns .btn-cust{ padding:0 11px; font-size:.92rem; } .card-btns .btn-add{ padding:0 12px; font-size:.92rem; } .card-btns .btn-add .icon{ width:16px; height:16px; } }

/* ---------- allergens ---------- */
.card-alg{ margin-top:10px; display:grid; gap:5px; }
.alg-row{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }
.alg-lab{ font-size:.78rem; font-weight:700; color:var(--ink-2); }
.alg-tags{ display:flex; flex-wrap:wrap; gap:4px; }
.alg-tags li{ font-size:.76rem; font-weight:600; line-height:1.2; color:var(--red-deep); background:#fff; border:1px solid #EDC2BE; border-radius:999px; padding:3px 9px; }
.alg-row.may .alg-tags li{ color:var(--ink-2); border-style:dashed; border-color:var(--line-strong); }
.alg-box{ margin:12px 20px 2px; padding:12px 14px; border-radius:var(--r-md); background:#fff; border:1px solid var(--line); border-inline-start:4px solid var(--red); display:grid; gap:4px; }
.alg-box h3{ font-family:var(--font-display); font-size:1rem; font-weight:800; }
html[lang="ar"] .alg-box h3{ font-weight:700; }
.alg-box p{ font-size:.93rem; }
.alg-box b{ font-weight:700; }
.alg-inform{ color:var(--ink-2); font-size:.86rem!important; }
.row .x-alg{ color:var(--red-deep); font-weight:500; }
.alg-notice{ margin-top:40px; padding:16px 18px; border-radius:var(--r-md); background:#fff; border:1px solid var(--line); border-inline-start:4px solid var(--red); box-shadow:var(--shadow-card); display:grid; gap:6px; max-width:860px; }
.alg-notice h2{ font-size:1.12rem; font-weight:850; font-stretch:108%; }
html[lang="ar"] .alg-notice h2{ font-weight:700; }
.alg-notice p{ font-size:.94rem; color:var(--ink-2); }
.alg-check{ font-size:.86rem; color:var(--ink-2); background:var(--bg); border:1px solid var(--line); border-inline-start:4px solid var(--red); border-radius:var(--r-sm); padding:10px 12px; }
/* dashboard */
.alg-pick{ border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px 12px; margin:0 0 12px; }
.alg-pick legend{ font-weight:700; padding:0 6px; }
.alg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:0 12px; }
.alg-internal{ display:grid; gap:8px; padding:12px; border-radius:var(--r-md); background:#FBF6EC; border:1px dashed var(--line-strong); }
.alg-x summary{ cursor:pointer; min-height:40px; display:flex; align-items:center; font-size:.9rem; color:var(--ink-2); }
.alg-x summary span{ color:var(--ink); font-weight:600; margin-inline-start:4px; }
.alg-table-wrap{ overflow-x:auto; }
.alg-table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.alg-table th,.alg-table td{ text-align:start; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.alg-table thead th{ font-size:.8rem; color:var(--ink-2); font-weight:700; }
.alg-table tbody th{ font-weight:600; }
.alg-names > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; min-height:40px; }
.alg-names > summary::-webkit-details-marker{ display:none; }
.alg-names > summary::after{ content:"Show"; font-size:.84rem; color:var(--red-deep); font-weight:600; text-decoration:underline; }
.alg-names[open] > summary::after{ content:"Hide"; }
.alg-names > summary h2{ font-size:1.15rem; font-weight:800; font-stretch:108%; }
/* ---------- official logo (master artwork, never recoloured) ---------- */
.brand{ flex:none; line-height:0; }
.brand-logo{ display:block; width:135px; height:auto; max-width:none; aspect-ratio:640/248; }
@media (max-width:399px){ .brand-logo{ width:125px; } .head-row{ gap:6px; } .lang button{ min-width:34px; padding:0 6px; } .cart-btn{ width:42px; height:42px; } }
@media (max-width:359px){ :root{ --pad:12px; } .lang{ padding:2px; } .lang button{ min-width:32px; padding:0 5px; font-size:.76rem; } .lang button[lang="ar"]{ font-size:.78rem; } }
@media (min-width:360px){ .brand-logo{ width:135px; } }
@media (min-width:400px){ .brand-logo{ width:140px; } }
@media (min-width:760px){ :root{ --head-h:80px; } .brand-logo{ width:170px; } }
@media (min-width:880px){ :root{ --head-h:88px; } .brand-logo{ width:200px; } }
.foot-brand{ line-height:0; }
.foot-logo{ display:inline-block; background:#FFF6EA; border-radius:14px; padding:12px 16px; box-shadow:0 8px 18px -12px rgba(0,0,0,.45); }
.foot-logo img{ display:block; width:170px; height:auto; max-width:none; aspect-ratio:640/248; }
.adm-brand{ display:flex; align-items:center; gap:12px; margin-inline-end:auto; min-width:0; }
.adm-brand h1{ margin:0; flex-basis:auto!important; }
.adm-logo{ display:block; width:104px; height:auto; flex:none; max-width:none; aspect-ratio:640/248; }
@media (max-width:819px){ .adm-brand{ flex-basis:100%; } }