/* Shared storefront. The selected vendor supplies these colour tokens. */
:root {
  --primary:#004B87; --primary-deep:#003C6C; --accent:#C59B27; --accent-ink:#1A2530;
  --soft:#F8EED5; --surface:#FCFAF5; --ink:#1A2530; --muted:#78818A; --line:#E8E9E9;
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:95px }
body { margin:0; background:var(--surface); color:var(--ink); font:14px/1.6 var(--font) }
button,input,select { font:inherit } button,a { touch-action:manipulation; -webkit-tap-highlight-color:transparent }
button { cursor:pointer; border:0; color:inherit } a { color:inherit; text-decoration:none }
img { display:block; max-width:100% } h1,h2,h3,p { margin:0 } button i,a i { pointer-events:none }
button:disabled { opacity:.5; cursor:not-allowed } [hidden] { display:none!important }
:is(a,button,input,select):focus-visible { outline:3px solid var(--primary); outline-offset:4px }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
.page-width { width:min(1460px,calc(100% - 80px)); margin-inline:auto }
.skip-link { position:fixed; top:-100px; left:20px; z-index:20; padding:14px 24px; border-radius:12px; background:white }
.skip-link:focus { top:12px }
.eyebrow { display:block; color:var(--primary); font-size:10px; letter-spacing:.15em; font-weight:600 }
.eyebrow.light { display:flex; align-items:center; gap:9px; color:#ffffffe0; letter-spacing:.08em }
.diamond { width:6px; height:6px; transform:rotate(45deg); background:var(--hero-accent,var(--accent)) }
.icon-button,.round-icon,.small-icon { width:44px; height:44px; flex-shrink:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#F4F5F5; font-size:18px }
.icon-button { transition:background .2s,transform .2s } .icon-button:hover { background:var(--soft); transform:translateY(-2px) }
.button { display:inline-flex; justify-content:center; align-items:center; gap:14px; padding:15px 24px; border-radius:40px; background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:13px; transition:transform .2s,filter .2s }
.button:hover { transform:translateY(-2px); filter:brightness(.96) }
.button.secondary { background:white; color:var(--primary); border:1px solid var(--line) }

/* Restaurant identity */
.mobile-cover,#vendorTagline { display:none }
.store-header { background:white; border-bottom:1px solid var(--line) }
.header-inner { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:24px }
.store-identity { display:flex; align-items:center; gap:13px; min-width:0 }
.store-identity>img { width:55px; height:55px; border:1px solid var(--line); border-radius:16px; object-fit:contain; background:white; padding:3px }
.store-identity strong { display:block; font-size:18px; font-weight:600; letter-spacing:-.5px }
.store-identity small { display:block; font-size:10px; color:var(--muted); margin-top:2px }
.desktop-nav { display:flex; align-items:center; gap:28px; font-size:12px }
.desktop-nav a,.desktop-nav button { background:none; color:var(--muted); padding:8px 0; white-space:nowrap }
.desktop-nav .active { color:var(--primary); font-weight:600; position:relative }
.desktop-nav .active::after { content:''; position:absolute; bottom:0; left:50%; width:4px; height:4px; border-radius:50%; background:var(--accent) }
.saved-count { display:inline-grid; place-items:center; width:19px; height:19px; border-radius:50%; background:var(--soft); color:var(--primary); font-size:10px; margin-left:4px }
.header-actions,.location { display:flex; align-items:center; gap:12px } .location { gap:10px; margin-right:8px }
.location small { display:block; font-size:10px; color:var(--muted) } .location strong { display:block; font-size:11px; font-weight:500 }
.location .round-icon { width:38px; height:38px; color:var(--primary) }
.header-cart { position:relative; background:var(--primary); color:white } .header-cart:hover { background:var(--primary-deep) }
.cart-count { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; min-width:18px; height:18px; border:2px solid white; background:var(--accent); color:var(--accent-ink); font-size:9px }
.header-cart .cart-count { position:absolute; right:-2px; top:-3px }

/* Original menu photography framed with CSS */
.hero { position:relative; isolation:isolate; display:grid; grid-template-columns:1.05fr 1fr; overflow:hidden; min-height:360px; margin-top:30px; padding:44px 52px; border-radius:30px; background:var(--primary); color:white }
.hero::before { content:''; position:absolute; width:550px; height:550px; right:-50px; top:-170px; border-radius:50%; background:#ffffff07; z-index:-1 }
.hero-copy { position:relative; z-index:2; max-width:530px }
.hero h1 { font-size:clamp(36px,3.4vw,52px); line-height:1.13; font-weight:600; letter-spacing:-2px; margin:18px 0 15px; white-space:pre-line }
.hero-copy>p { font-size:12px; line-height:1.9; max-width:350px; color:#ffffffe0 }
.hero-cta { display:inline-flex; align-items:center; gap:26px; background:var(--hero-button,var(--accent)); color:var(--hero-button-ink,var(--accent-ink)); border-radius:40px; padding:11px 20px; font-size:11px; font-weight:600; margin-top:22px }
.hero-cta i { font-size:17px } .hero-meta { display:flex; gap:20px; margin-top:24px; color:#ffffffc7; font-size:9px }
.hero-meta>span { display:flex; gap:7px; align-items:center } .hero-meta i { font-size:12px; color:var(--hero-accent,var(--accent)) }
.hero-art { position:relative; min-height:275px; align-self:center }
.orbit { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid #ffffff25; border-radius:50%; pointer-events:none }
.orbit-one { width:330px; height:330px } .orbit-two { width:400px; height:400px; border-style:dashed; border-color:#ffffff17 }
.hero-dish { position:absolute; border:7px solid #ffffffed; background:white; box-shadow:0 22px 50px #001f3930 }
.hero-dish img { width:100%; height:100%; object-fit:cover }
.main-dish { width:270px; height:270px; border-radius:50%; left:50%; top:50%; transform:translate(-48%,-50%) rotate(7deg) }
.main-dish>img { border-radius:50% }
.dish-label { position:absolute; bottom:9px; left:50%; transform:translateX(-50%) rotate(-7deg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:230px; background:white; color:var(--ink); border-radius:30px; padding:6px 12px; font-size:9px }
.small-dish { width:124px; height:124px; right:1%; bottom:7%; border-width:5px; border-radius:26px; transform:rotate(-10deg) }
.small-dish img { border-radius:20px }
.little-heart { position:absolute; right:-10px; top:-12px; display:grid; place-items:center; width:32px; height:32px; border:3px solid white; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-size:12px }
.hero-note { position:absolute; bottom:8%; left:0; display:flex; align-items:center; gap:9px; padding:12px 16px; border-radius:14px; background:white; color:var(--ink); box-shadow:0 10px 30px #00000010; transform:rotate(-5deg); font-size:9px }
.hero-note>i { font-size:22px; color:var(--primary) } .hero-note strong { font-weight:600 }
.hero-spark { position:absolute; color:var(--hero-accent,var(--accent)); font-size:40px } .spark-one { top:0; left:10% } .spark-two { bottom:-4%; right:30%; font-size:28px }

/* Discovery and responsive menu */
.discovery { display:flex; align-items:center; justify-content:space-between; gap:35px; margin:38px 0 30px }
.discovery h2 { font-size:22px; font-weight:600; letter-spacing:-.7px; margin-top:5px }
.search-bar { display:flex; align-items:center; gap:12px; width:min(560px,50%); height:58px; padding:8px 9px 8px 20px; border:1px solid var(--line); border-radius:50px; background:white }
.search-bar>i { font-size:19px; color:var(--primary) } .search-bar input { flex:1; min-width:0; border:0; background:none; color:var(--ink); font-size:11px }
.search-bar input:focus { outline:0 } .search-bar:focus-within { box-shadow:0 0 0 2px var(--soft); border-color:var(--primary) }
.search-bar input::placeholder { color:#8C9096 }
.filter-button { display:flex; align-items:center; gap:10px; background:#F5F5F4; border-radius:40px; padding:3px 3px 3px 14px; font-size:10px }
.filter-button i { display:grid; place-items:center; width:35px; height:35px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-size:16px }
.mobile-categories { display:none } .menu-layout { display:grid; grid-template-columns:180px minmax(0,1fr) 285px; gap:28px; align-items:start; scroll-margin-top:25px }
.category-sidebar { position:sticky; top:24px; min-width:0 }
.sidebar-heading { display:flex; align-items:center; gap:10px; margin:7px 0 20px; color:var(--primary) } .sidebar-heading h2 { font-size:14px; font-weight:600 }
.category-sidebar nav { max-height:65vh; overflow:auto; padding-right:5px; scrollbar-width:thin; scrollbar-color:var(--line) transparent }
.category-option { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; background:none; color:#707981; padding:11px 12px; margin-bottom:4px; border-radius:11px; font-size:11px }
.category-option>span { overflow-wrap:anywhere } .category-option small { font-size:9px; color:#9AA1A6; flex-shrink:0 }
.category-option:hover { background:white } .category-option.active { background:var(--soft); color:var(--primary); font-weight:600 } .category-option.active small { color:var(--primary) }
.sidebar-brand { padding:22px 12px; border-top:1px solid var(--line); margin-top:20px } .sidebar-brand>span { display:block; color:var(--muted); font-size:9px; margin-bottom:6px }
.sidebar-brand img { width:115px; height:auto; background:white; padding:2px }
.menu-content { min-width:0 } .menu-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:70px; margin:4px 0 23px }
.menu-heading h2 { font-size:24px; letter-spacing:-.8px; font-weight:600; margin:4px 0 } .menu-heading p { font-size:10px; color:var(--muted) }
.menu-tools { display:flex; gap:8px; align-items:center } .small-icon { width:31px; height:31px; font-size:14px; background:white; border:1px solid var(--line) }
.sort-control { display:flex; gap:6px; align-items:center; color:#67737F; font-size:10px; white-space:nowrap }
.sort-control select { border:0; background:none; color:inherit; font-size:10px; max-width:135px; cursor:pointer }
.product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.product-card { position:relative; display:flex; flex-direction:column; min-width:0; background:white; border:1px solid var(--line); border-radius:21px; padding:8px; transition:transform .2s,box-shadow .2s }
.product-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px #002f5510 }
.product-image-button { display:block; position:relative; width:100%; aspect-ratio:1.16; overflow:hidden; border-radius:15px; background:#F5F5F3; padding:0 }
.product-image-button img { width:100%; height:100%; object-fit:cover; transition:transform .4s } .product-image-button:hover img { transform:scale(1.045) }
.no-photo { display:grid; place-items:center; width:100%; height:100%; min-height:100px; background:var(--soft); color:var(--primary); font-size:35px }
.save-product { position:absolute; right:16px; top:16px; z-index:1; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#fffffff5; color:#425361; font-size:13px }
.save-product[aria-pressed=true] { color:var(--primary); background:var(--soft) }
.product-category { color:var(--muted); font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:13px 6px 4px }
.product-title { display:block; text-align:left; padding:0; margin:0 6px; min-height:37px; background:none; font-size:12px; line-height:1.55; font-weight:600 }
.product-name-ar { display:block; text-align:start; font-size:10px; color:#899198; margin:3px 6px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.product-card-description { font-size:9px; line-height:1.7; color:#8A9298; margin:7px 6px 12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.product-bottom { display:flex; justify-content:space-between; align-items:center; gap:6px; margin:12px 5px 5px; padding-top:10px; border-top:1px solid #F3F3F3; margin-top:auto }
.product-prices { min-width:0; padding-top:3px; white-space:nowrap } .price { color:var(--primary); font-size:12px; font-weight:600 } .price small { font-size:8px; margin-right:3px; font-weight:500 }
.old-price { display:block; font-size:9px; color:#9A8383; text-decoration:line-through } .options-label { display:block; font-size:8px; color:var(--muted) }
.add-button { display:grid; place-items:center; flex-shrink:0; width:31px; height:31px; border-radius:50%; background:var(--soft); color:var(--primary); font-size:20px; line-height:1 }
.add-button.has-quantity { background:var(--accent); color:var(--accent-ink); font-size:11px; font-weight:600 }
.product-rating { position:absolute; left:16px; top:16px; border-radius:20px; background:white; padding:4px 8px; font-size:9px } .product-rating i { color:var(--accent); margin-right:3px }
.load-more { display:flex; margin:28px auto 0; font-size:11px; padding:12px 24px } .menu-end { display:flex; align-items:center; justify-content:center; gap:8px; font-size:10px; color:#9BA1A5; margin-top:32px } .menu-end i { color:var(--accent) }
.empty-results { text-align:center; background:white; border-radius:24px; padding:60px 24px } .empty-icon { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; background:var(--soft); color:var(--primary); font-size:24px; margin:0 auto 20px }
.empty-results h3 { font-size:18px; font-weight:500 } .empty-results p { color:var(--muted); font-size:11px; margin:8px 0 22px }

/* Desktop order summary and shared cart components */
.order-sidebar { position:sticky; top:24px } .order-card { background:white; border:1px solid var(--line); border-radius:24px; padding:21px }
.order-heading { display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:20px }
.order-heading>span { display:grid; place-items:center; flex-shrink:0; width:36px; height:36px; border-radius:12px; background:var(--soft); color:var(--primary); font-size:18px }
.order-heading h2 { font-size:15px; font-weight:600; letter-spacing:-.5px } .order-heading p { color:var(--muted); font-size:8px; margin-top:2px }
.cart-empty { text-align:center; padding:20px 5px 15px } .cart-empty-art { position:relative; display:grid; place-items:center; width:105px; height:105px; border-radius:50%; background:var(--surface); color:var(--primary); font-size:44px; margin:0 auto 18px }
.cart-empty-art::after { content:'♡'; position:absolute; right:-3px; top:10px; width:33px; height:33px; border-radius:50%; background:var(--soft); font-size:21px; line-height:33px; transform:rotate(15deg) }
.cart-empty h3 { font-size:13px; font-weight:500 } .cart-empty p { color:var(--muted); font-size:10px; max-width:180px; margin:8px auto 18px; line-height:1.8 } .cart-empty .button { font-size:10px; padding:10px 18px }
.cart-note { text-align:center; color:#9A9FA5; border-top:1px dashed var(--line); font-size:8px; padding-top:18px; margin-top:20px }
.order-help { display:flex; justify-content:center; gap:6px; color:#969DA3; font-size:8px; margin-top:16px }
.cart-lines { max-height:390px; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent }
.cart-line { display:grid; grid-template-columns:47px 1fr; gap:10px; position:relative; background:#F7F7F6; border-radius:15px; padding:10px; margin-bottom:9px }
.cart-line>img { width:47px; height:47px; object-fit:cover; border-radius:10px } .cart-line h3 { font-size:10px; line-height:1.55; font-weight:500; padding-right:13px }
.cart-line-option { color:var(--muted); font-size:8px } .line-price { display:block; font-size:10px; font-weight:600; color:var(--primary); margin-top:4px }
.cart-line-controls { display:flex; align-items:center; justify-content:space-between; gap:5px; margin-top:7px }
.quantity-control { display:inline-flex; align-items:center; gap:12px; flex-shrink:0; background:#F4F5F4; padding:4px; border-radius:40px }
.quantity-control button { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:white; color:var(--ink); font-size:16px; line-height:1 }
.quantity-control output,.quantity-control>span { min-width:9px; text-align:center; font-size:11px; font-weight:600 }
.cart-line .quantity-control { padding:2px; gap:9px } .cart-line .quantity-control button { width:21px; height:21px; font-size:13px } .cart-line .quantity-control>span { font-size:9px }
.remove-line { position:absolute; right:9px; top:11px; background:none; color:#8D959B; font-size:10px; padding:0 }
.cart-subtotal { display:flex; justify-content:space-between; gap:12px; padding-top:16px; margin:20px 0 15px; border-top:1px dashed var(--line); font-size:11px }
.cart-subtotal strong { color:var(--primary); font-weight:600 } .checkout-button { width:100%; gap:8px; font-size:11px; padding:13px 14px }
.preview-note { color:#92999F; font-size:8px; text-align:center; margin-top:10px } .more-items { width:100%; background:none; color:var(--primary); border:1px dashed var(--line); border-radius:12px; padding:9px; font-size:10px; margin-top:10px }
.store-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid var(--line); margin-top:60px; padding:26px 0 32px }
.footer-identity { display:flex; align-items:center; gap:16px; min-width:0 }
.footer-vendor-link { display:block; flex:0 0 72px; border-radius:19px }
.footer-vendor-link img { display:block; width:72px; height:72px; padding:5px; object-fit:contain; border:1px solid var(--line); border-radius:19px; background:white }
.footer-vendor-copy { min-width:0; max-width:310px }
.footer-vendor-copy>strong { display:block; font-size:16px; font-weight:500; line-height:1.5 }
.footer-vendor-copy>span { display:block; margin-top:5px; color:var(--muted); font-size:10px; line-height:1.8 }
.store-footer nav { margin-left:auto }
.store-footer>div>strong { display:block; font-size:12px; font-weight:500 } .store-footer>div>span { font-size:9px; color:var(--muted) }
.store-footer nav { display:flex; align-items:center; gap:24px; font-size:9px; color:#7F888F } .store-footer nav button { background:none; font-size:inherit; padding:0 }
.powered-by { display:flex; align-items:center; gap:8px } .powered-by span { flex:0 0 auto; white-space:nowrap; font-size:8px } .powered-by img { display:block; flex:0 0 110px; width:110px; height:31px; max-width:none; padding:0; object-fit:contain }
.bottom-nav,.mobile-order { display:none }

/* Product, cart and filter views */
dialog { width:min(540px,calc(100% - 32px)); max-height:calc(100dvh - 40px); border:0; border-radius:28px; padding:0; background:white; color:var(--ink); box-shadow:0 30px 100px #001e3c40; overscroll-behavior:contain }
dialog::backdrop { background:#10243170; backdrop-filter:blur(5px) } body:has(dialog[open]) { overflow:hidden }
.product-dialog { display:none; width:min(680px,calc(100% - 48px)); overflow-x:hidden } .product-dialog[open] { display:block }
.detail-image { position:relative; height:340px; min-height:0; background:#F5F5F3; border-radius:0 0 24px 24px; overflow:hidden }
.detail-image>img { position:absolute; inset:0; width:100%; height:100%; padding:20px; object-fit:contain }
.detail-image .icon-button { position:absolute; top:17px; width:39px; height:39px; font-size:17px; background:#fffffff5; z-index:1 }
.detail-back { left:17px } .detail-save { right:17px } .detail-save[aria-pressed=true] { color:var(--primary) }
.detail-pill { position:absolute; left:50%; top:23px; transform:translateX(-50%); border-radius:40px; background:#fffffff2; padding:7px 14px; font-size:10px; white-space:nowrap }
.detail-body { padding:32px 27px 24px; min-width:0 } .detail-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-top:8px }
.detail-title>div:first-child { min-width:0 } .detail-title h2 { font-size:21px; line-height:1.4; font-weight:600; letter-spacing:-.6px }
.detail-title p { text-align:start; font-size:11px; color:var(--muted); margin-top:5px } .detail-title .quantity-control { gap:7px; margin-top:2px } .detail-title .quantity-control button { width:23px; height:23px }
.detail-description { white-space:pre-line; color:#7D878F; font-size:11px; line-height:1.9; margin:22px 0 }
.product-reviews { margin-top:23px; padding-top:20px; border-top:1px dashed var(--line) }
.product-reviews-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:9px; margin-bottom:13px }
.product-reviews-heading h3 { display:flex; align-items:center; gap:7px; font-size:14px; font-weight:500; letter-spacing:-.3px }
.product-reviews-heading h3 i { color:var(--primary); font-size:16px }
.product-reviews-heading>span { padding:3px 8px; background:var(--soft); color:var(--primary); border-radius:20px; font-size:9px }
.review-sample-note { margin:-3px 0 12px; color:var(--muted); font-size:10px; line-height:1.7 }
.review-overview,.reviews-empty { display:flex; align-items:center; gap:13px; padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:16px }
.review-overview>strong { display:flex; align-items:baseline; gap:4px; font-size:30px; font-weight:500; line-height:1.2; white-space:nowrap }
.review-overview>strong small { font-size:11px; font-weight:400; color:var(--muted) }
.review-overview p { color:var(--muted); font-size:10px; margin-top:5px }
.review-stars { display:inline-block; position:relative; flex-shrink:0; color:#DFE2E5; font-size:12px; line-height:1.2; vertical-align:middle; white-space:nowrap }
.review-stars>span { display:block; letter-spacing:2px }
.review-stars .review-stars-fill { position:absolute; top:0; left:0; overflow:hidden; color:var(--accent) }
.reviews-empty { align-items:flex-start; gap:11px }
.reviews-empty-icon { display:grid; place-items:center; flex-shrink:0; width:34px; height:34px; border-radius:10px; background:var(--soft); color:var(--primary); font-size:17px }
.reviews-empty strong { display:block; font-size:12px; font-weight:500 }
.reviews-empty p,.reviews-written-empty { margin-top:4px; font-size:10px; line-height:1.8; color:var(--muted) }
.reviews-written-empty { margin-top:12px }
.product-review-list { list-style:none; margin:0; padding:0 }
.product-review { padding:17px 0; border-bottom:1px solid var(--line) }
.product-review header { display:flex; align-items:center; flex-wrap:wrap; gap:9px }
.review-avatar { display:grid; place-items:center; flex-shrink:0; width:32px; height:32px; border-radius:50%; background:var(--soft); color:var(--primary); font-size:10px; font-weight:500 }
.review-author { flex:1; min-width:60px; overflow-wrap:anywhere }
.review-author strong { display:block; font-size:11px; font-weight:500 }
.review-author time { display:block; margin-top:1px; font-size:9px; color:var(--muted) }
.product-review header .review-stars { font-size:10px }
.product-review article>p { margin-top:10px; font-size:11px; line-height:1.85; color:#68747E; white-space:pre-line; overflow-wrap:anywhere }
.product-review article>.review-rating-only { color:var(--muted); font-size:10px }
.more-product-reviews summary { display:flex; align-items:center; justify-content:center; gap:9px; list-style:none; cursor:pointer; padding:12px; margin-top:12px; border:1px solid var(--line); border-radius:20px; color:var(--primary); font-size:10px }
.more-product-reviews summary::-webkit-details-marker { display:none }
.more-product-reviews summary:hover { background:var(--soft) }
.more-product-reviews summary:focus-visible { outline:3px solid var(--primary); outline-offset:3px }
.more-product-reviews summary i { transition:transform .2s }
.more-product-reviews[open] summary i { transform:rotate(180deg) }
.suggestions-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:23px } .suggestions-heading h3 { font-size:12px; font-weight:500 } .suggestions-heading>span { font-size:8px; color:var(--muted) }
.suggestions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px }
.suggestion { display:flex; align-items:center; text-align:left; gap:8px; min-width:0; background:#F6F6F5; border-radius:12px; padding:7px }
.suggestion img { width:45px; height:45px; object-fit:cover; border-radius:9px; flex-shrink:0 } .suggestion>span { min-width:0; font-size:9px; line-height:1.5 } .suggestion small { display:block; color:var(--primary); font-size:8px; margin-top:2px }
.detail-footer { position:sticky; bottom:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:15px; padding:20px 27px; border-top:1px solid var(--line); background:white }
.detail-footer>div>span { display:block; color:var(--muted); font-size:9px; margin-bottom:2px } .detail-footer>div>strong { font-size:20px; white-space:nowrap } .detail-footer .button { padding:13px 20px; gap:10px; font-size:11px; white-space:nowrap; flex-shrink:0 } .detail-footer .button i { font-size:17px }
.option-list { border:0; padding:0; margin:20px 0 0 } .option-list legend { font-size:11px; font-weight:500; margin-bottom:8px }
.option-list label { display:flex; align-items:center; gap:8px; padding:9px 10px; margin-top:6px; border-radius:10px; background:#F6F6F5; font-size:10px } .option-list label>span { flex:1 } .option-list strong { color:var(--primary); font-weight:500; font-size:10px }
input[type=radio],input[type=checkbox] { accent-color:var(--primary) }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:22px 24px; border-bottom:1px solid var(--line) }
.dialog-heading h2 { font-size:18px; font-weight:500; letter-spacing:-.5px } .dialog-heading .round-icon,.dialog-heading .icon-button { width:36px; height:36px; font-size:16px }
.cart-dialog { padding-bottom:24px } .cart-restaurant { display:flex; align-items:center; gap:12px; margin:24px }
.cart-restaurant>img { width:42px; height:42px; object-fit:contain; border-radius:12px; border:1px solid var(--line) } .cart-restaurant small { display:block; font-size:8px; letter-spacing:.1em; color:var(--muted) } .cart-restaurant strong { font-size:13px; font-weight:500 }
.cart-dialog>[data-cart-content] { padding:0 24px } .cart-dialog .cart-lines { max-height:none }
.cart-dialog .cart-line { padding:15px; grid-template-columns:78px 1fr; gap:14px; margin-bottom:12px } .cart-dialog .cart-line>img { width:78px; height:78px; border-radius:13px }
.cart-dialog .cart-line h3 { font-size:13px } .cart-dialog .line-price { font-size:12px } .cart-dialog .cart-line-option { font-size:10px }
.cart-dialog .quantity-control button { width:26px; height:26px; font-size:16px } .cart-dialog .quantity-control>span { font-size:11px } .cart-dialog .cart-line-controls { margin-top:8px }
.cart-dialog .remove-line { right:13px; top:14px; font-size:13px } .cart-dialog .cart-subtotal { background:#F7F7F6; border:0; border-radius:16px; padding:23px 18px; font-size:15px }
.cart-dialog .checkout-button { padding:17px; font-size:13px } .cart-dialog .preview-note { font-size:10px } .cart-dialog .cart-empty { padding:30px } .cart-dialog .cart-empty h3 { font-size:18px } .cart-dialog .cart-empty p { font-size:12px; max-width:240px }
.filter-dialog { width:min(430px,calc(100% - 32px)) } .filter-dialog form { padding:24px } .filter-dialog form>label:not(.checkbox-label) { display:block; font-size:12px; font-weight:500; margin-bottom:8px }
.filter-dialog select { width:100%; padding:12px; background:white; border:1px solid var(--line); border-radius:12px; font-size:12px; margin-bottom:20px }
.checkbox-label { display:flex; align-items:center; gap:10px; font-size:12px; margin:24px 0 } .filter-dialog .button { width:100% }
.notice-dialog { text-align:center; padding:42px 30px 30px; width:min(420px,calc(100% - 32px)) } .notice-close { position:absolute; right:14px; top:14px; width:31px; height:31px; font-size:13px }
.notice-icon { display:grid; place-items:center; width:70px; height:70px; background:var(--soft); color:var(--primary); border-radius:50%; font-size:32px; margin:0 auto 20px }
.notice-dialog h2 { font-size:23px; letter-spacing:-.7px; font-weight:600 } .notice-dialog p { font-size:12px; color:var(--muted); white-space:pre-line; margin:12px 0 24px; line-height:1.9 }
.toast { position:fixed; bottom:28px; left:50%; transform:translate(-50%,15px); max-width:calc(100% - 32px); background:var(--primary); color:white; border:1px solid #ffffff30; border-radius:40px; padding:12px 20px; font-size:11px; text-align:center; box-shadow:0 8px 30px #002f5520; opacity:0; pointer-events:none; z-index:50; transition:opacity .2s,transform .2s }
.toast.visible { opacity:1; transform:translate(-50%,0) }
.loading-state { height:100vh; display:flex; align-items:center; justify-content:center; gap:12px; color:var(--primary) } .loading-state span { width:12px; height:12px; background:var(--accent); border-radius:50%; animation:pulse 1s ease infinite }
@keyframes pulse { 50% { opacity:.3; transform:scale(.7) } }
.unavailable { max-width:620px; margin:12vh auto; padding:32px; text-align:center } .unavailable>img { margin:0 auto 35px } .unavailable h1 { font-size:32px; letter-spacing:-1px; line-height:1.3 } .unavailable p { color:var(--muted); margin:15px 0 25px }
#vendorChoices { display:flex; justify-content:center; gap:10px; flex-wrap:wrap } .vendor-choice { border:1px solid var(--line); border-radius:30px; padding:12px 24px; background:white; color:var(--primary); font-size:13px } .back-link { display:inline-flex; align-items:center; gap:10px; color:var(--primary); font-size:12px; margin-top:35px } .noscript { text-align:center; padding:30px }

@media(min-width:1600px) {
  .menu-layout { grid-template-columns:195px minmax(0,1fr) 310px; gap:32px } .product-grid { gap:20px }
  .hero { min-height:400px } .hero h1 { font-size:56px } .hero-art { min-height:240px } .main-dish { width:310px; height:240px } .small-dish { width:145px; height:145px } .hero-note { left:5% }
  .product-title { font-size:13px } .product-category { font-size:9px } .product-card-description { font-size:10px } .price { font-size:14px }
}
@media(max-width:1250px) {
  .page-width { width:calc(100% - 56px) } .header-inner { min-height:90px } .desktop-nav { gap:18px } .location { display:none }
  .menu-layout { grid-template-columns:155px minmax(0,1fr) 250px; gap:20px } .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .hero { padding:38px } .hero-note { left:-15px } .small-dish { right:-15px } .order-card { padding:17px } .discovery h2 { font-size:20px }
}
@media(max-width:1000px) {
  .menu-layout { grid-template-columns:155px minmax(0,1fr) } .order-sidebar { display:none } .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .hero { padding:35px } .hero h1 { font-size:39px } .hero-copy>p { max-width:290px; font-size:11px } .hero .eyebrow { font-size:8px }
  .hero-art { min-height:250px } .main-dish { width:225px; height:225px } .small-dish { width:105px; height:105px; right:-5px; bottom:9% }
  .orbit-one { width:280px; height:280px } .orbit-two { width:340px; height:340px } .hero-note { left:-16px; bottom:0; padding:10px; font-size:8px }
  .hero-meta { font-size:8px } .hero-meta>span:last-child { display:none } .discovery { gap:20px } .discovery h2 { font-size:18px } .search-bar { width:53% }
  .mobile-order:not([hidden]) { display:flex; align-items:center; gap:15px; position:fixed; left:50%; bottom:23px; transform:translateX(-50%); z-index:5; max-width:calc(100% - 36px); width:380px; padding:12px 18px; border-radius:50px; background:var(--primary); color:white; box-shadow:0 12px 30px #002f5530; text-align:left }
  .mobile-order-icon { display:flex; align-items:center; gap:6px; font-size:19px } .mobile-order .cart-count { background:white; color:var(--primary); border:0; min-width:20px; height:20px; font-size:10px }
  .mobile-order>span:nth-child(2) { flex:1; font-size:11px; font-weight:500 } .mobile-order small { display:block; font-size:8px; font-weight:400; opacity:.7 } .mobile-order strong { font-size:11px } .mobile-order>i { font-size:15px } .toast { bottom:100px }
}
@media(max-width:760px) {
  .page-width { width:calc(100% - 40px) } .header-inner { min-height:82px; gap:16px } .desktop-nav { display:none }
  .store-identity>img { width:45px; height:45px; border-radius:13px } .store-identity strong { font-size:15px } .store-identity small { font-size:8px } .header-actions { gap:8px } .icon-button { width:39px; height:39px; font-size:17px }
  .hero { margin-top:20px; min-height:300px; grid-template-columns:1.15fr 1fr; padding:28px; border-radius:24px } .hero h1 { font-size:33px; letter-spacing:-1.3px; margin:14px 0 }
  .hero-copy>p { font-size:10px; max-width:230px } .hero .eyebrow { font-size:7px; letter-spacing:.06em; gap:6px } .hero-cta { padding:10px 17px; gap:17px; font-size:10px; margin-top:18px } .hero-meta { margin-top:16px }
  .hero-art { min-height:230px } .main-dish { width:180px; height:180px; border-width:5px } .small-dish { width:85px; height:85px; right:-5px; bottom:10%; border-width:4px; border-radius:21px } .small-dish img { border-radius:16px }
  .orbit-one { width:210px; height:210px } .orbit-two { width:260px; height:260px } .hero-note { display:none } .dish-label { font-size:7px; max-width:155px; padding:5px 8px; bottom:5px }
  .little-heart { width:26px; height:26px; font-size:9px; right:-7px; top:-9px } .hero-spark { font-size:29px } .spark-one { left:0; top:10% } .spark-two { bottom:0; font-size:23px }
  .discovery { display:block; margin:27px 0 20px } .discovery h2 { font-size:22px } .discovery .eyebrow { font-size:8px } .search-bar { width:100%; height:54px; margin-top:17px }
  .menu-layout { display:block; scroll-margin-top:95px } .category-sidebar { display:none }
  .mobile-categories { display:flex; gap:9px; overflow:auto; position:sticky; top:0; z-index:4; background:var(--surface); margin:0 -20px 22px; padding:10px 20px 14px; scrollbar-width:none; border-bottom:1px solid var(--line) } .mobile-categories::-webkit-scrollbar { display:none }
  .category-chip { display:flex; flex:0 0 auto; align-items:center; gap:7px; min-height:42px; white-space:nowrap; padding:6px 13px 6px 6px; border:1px solid var(--line); border-radius:40px; background:white; font-size:11px }
  .category-chip img { width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0 } .chip-icon { display:grid; place-items:center; width:30px; height:30px; font-size:14px; flex-shrink:0 }
  .category-chip.active { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:500 }
  .menu-heading { margin:0 0 19px; min-height:64px } .menu-heading h2 { font-size:22px } .menu-heading .eyebrow { font-size:8px }
  .sort-control,.sort-control select { font-size:9px } .sort-control select { max-width:112px }
  .product-grid { gap:12px } .product-card { padding:7px; border-radius:19px } .product-image-button { border-radius:13px; aspect-ratio:1.03 }
  .product-title { font-size:12px; min-height:38px; margin:0 4px } .product-category { margin:11px 4px 4px } .product-card-description { display:none } .product-name-ar { font-size:10px; margin:3px 4px 12px }
  .product-bottom { margin:13px 3px 3px; margin-top:auto; padding-top:9px } .price { font-size:11px } .add-button { width:29px; height:29px } .save-product { width:27px; height:27px; top:13px; right:13px; font-size:12px }
  .store-footer { align-items:flex-start; margin-top:45px; padding-bottom:120px } .store-footer nav { flex-wrap:wrap; justify-content:flex-end; gap:15px; max-width:200px } .store-footer>div>span { display:block; max-width:170px; line-height:1.9 }
  .store-footer nav .powered-by { width:100%; justify-content:flex-end }
  .bottom-nav { display:flex; align-items:center; position:fixed; left:0; right:0; bottom:0; z-index:6; background:white; border:1px solid var(--line); border-radius:24px 24px 0 0; padding:11px 5px calc(10px + env(safe-area-inset-bottom,0px)); box-shadow:0 -6px 25px #002f5506 }
  .bottom-nav>a,.bottom-nav>button { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; min-height:42px; background:none; padding:0; font-size:8px; color:#828A92 }
  .bottom-nav i { font-size:20px; line-height:1.3 } .bottom-nav .active { color:var(--primary); font-weight:600 } .bottom-nav .active::before { content:''; position:absolute; top:-12px; width:18px; height:3px; border-radius:0 0 4px 4px; background:var(--accent) }
  .bottom-nav .cart-count { position:absolute; top:-4px; left:53%; min-width:17px; height:17px; font-size:8px }
  .mobile-order:not([hidden]) { bottom:calc(80px + env(safe-area-inset-bottom,0px)); padding:11px 17px; width:390px } .toast { bottom:155px }
  .product-dialog { grid-template-columns:1fr; max-width:480px } .detail-image { grid-column:auto; grid-row:auto; height:310px; min-height:0 }
  .detail-body { padding:25px } .detail-title h2 { font-size:22px } .detail-title .quantity-control { gap:12px } .detail-title .quantity-control button { width:28px; height:28px } .detail-description { max-height:none; font-size:12px }
  .detail-footer { position:sticky; bottom:0; z-index:2; padding:17px 25px } .detail-footer .button { font-size:12px; padding:14px 24px }
}
@media(max-width:480px) {
  .page-width { width:calc(100% - 36px) } .header-inner { min-height:83px } .store-identity { gap:10px } .store-identity>img { width:42px; height:42px }
  .store-identity strong { font-size:15px } .store-identity small { max-width:170px; font-size:8px } .share-button { display:none }
  .hero { grid-template-columns:1.12fr 1fr; padding:25px 20px; min-height:260px; border-radius:23px; margin-top:15px }
  .hero h1 { font-size:30px; line-height:1.16; letter-spacing:-1.1px; margin:0 0 12px } .hero .eyebrow { display:none } .hero-copy>p { font-size:10px; max-width:168px; line-height:1.8 }
  .hero-cta { font-size:9px; gap:10px; padding:10px 14px; margin-top:16px } .hero-meta { display:none }
  .hero-art { min-height:200px; margin-right:-20px } .main-dish { width:155px; height:155px; transform:translate(-45%,-50%) rotate(7deg); border-width:4px }
  .small-dish { width:75px; height:75px; bottom:0; right:7px; border-width:3px; border-radius:18px } .small-dish img { border-radius:14px }
  .orbit-one { width:190px; height:190px } .orbit-two { width:230px; height:230px } .dish-label { font-size:6px; max-width:135px; bottom:5px; padding:4px 7px }
  .little-heart { width:23px; height:23px; font-size:8px; border-width:2px } .spark-one { font-size:23px; top:0; left:20% } .spark-two { font-size:22px; bottom:-15px; right:55% }
  .discovery { margin:25px 0 10px } .discovery h2 { font-size:21px } .discovery .eyebrow { font-size:7px }
  .search-bar { margin-top:14px; padding-left:15px; gap:9px; height:52px } .search-bar>i { font-size:18px } .search-bar input { font-size:12px } .search-bar input::placeholder { font-size:11px }
  .filter-button { padding:3px } .filter-button span { display:none } .filter-button i { width:34px; height:34px; font-size:15px }
  .mobile-categories { margin:0 -18px 20px; padding:13px 18px; gap:8px } .category-chip { font-size:11px; padding:5px 14px 5px 5px; min-height:40px } .category-chip img,.chip-icon { width:28px; height:28px }
  .menu-heading { gap:10px; margin-bottom:17px } .menu-heading h2 { font-size:21px; max-width:210px; margin:5px 0 3px } .menu-heading p { font-size:9px } .menu-heading .eyebrow { font-size:7px }
  .sort-control>i { display:none } .sort-control select { font-size:8px; max-width:92px } .menu-tools { gap:4px; align-self:flex-start; margin-top:19px }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px } .product-card { padding:6px; border-radius:19px } .product-image-button { aspect-ratio:1.02; border-radius:14px }
  .product-title { font-size:13px; line-height:1.55; min-height:40px; margin:0 5px } .product-category { font-size:9px; margin:10px 5px 4px }
  .product-name-ar { font-size:11px; margin:3px 5px 12px } .product-bottom { margin:12px 4px 4px; margin-top:auto } .price { font-size:13px } .save-product { top:12px; right:12px; width:26px; height:26px; font-size:11px } .options-label { font-size:8px }
  .load-more { font-size:10px; padding:11px 22px; margin-top:24px } .menu-end { font-size:9px }
  .store-footer { display:block; text-align:center; margin-top:35px; padding:25px 0 180px } .store-footer>div>strong { font-size:13px } .store-footer>div>span { max-width:none; font-size:9px; margin-top:3px }
  .store-footer nav { max-width:none; justify-content:center; margin-top:18px } .store-footer nav .powered-by { justify-content:center; margin-top:3px }
  .mobile-order:not([hidden]) { bottom:calc(80px + env(safe-area-inset-bottom,0px)); max-width:calc(100% - 28px); padding:12px 16px; gap:12px }
  .product-dialog,.cart-dialog { width:100%; max-width:none; max-height:100dvh; height:100dvh; margin:0; border-radius:0 } .product-dialog[open] { display:block }
  .detail-image { height:355px; min-height:0; border-radius:0 0 28px 28px; overflow:hidden } .detail-image .icon-button { top:22px } .detail-pill { top:25px; font-size:11px }
  .detail-body { padding:25px 21px 30px } .detail-title h2 { font-size:23px; line-height:1.35 } .detail-title p { font-size:12px }
  .detail-title .quantity-control { gap:10px } .detail-title .quantity-control button { width:26px; height:26px } .detail-description { font-size:12px; line-height:1.9; margin:23px 0 }
  .suggestions-heading h3 { font-size:14px } .suggestions-heading>span { font-size:9px } .suggestions { gap:10px } .suggestion { padding:8px; gap:7px } .suggestion img { width:46px; height:46px }
  .detail-footer { padding:17px 21px calc(17px + env(safe-area-inset-bottom,0px)); box-shadow:0 -10px 25px #ffffffb0 } .detail-footer>div>strong { font-size:22px } .detail-footer>div>span { font-size:10px } .detail-footer .button { padding:15px 24px; font-size:13px }
  .cart-dialog { padding-bottom:calc(28px + env(safe-area-inset-bottom,0px)) } .cart-dialog .dialog-heading { border:0; padding:22px 20px } .cart-dialog .dialog-heading h2 { font-size:17px; background:#F7F7F6; padding:10px 20px; border-radius:40px } .cart-dialog .dialog-heading .round-icon { background:none }
  .cart-restaurant { margin:5px 21px 24px } .cart-dialog>[data-cart-content] { padding:0 20px } .cart-dialog .cart-line { padding:14px; grid-template-columns:78px 1fr; gap:12px; border-radius:19px; margin-bottom:15px }
  .cart-dialog .cart-line h3 { font-size:12px } .cart-dialog .line-price { font-size:11px } .cart-dialog .cart-line-option { font-size:9px } .cart-dialog .cart-subtotal { margin-top:25px; padding:25px 18px; font-size:14px } .cart-dialog .more-items { padding:12px; font-size:11px }
  .toast { bottom:150px; font-size:10px } body:has(dialog[open]) .toast { bottom:24px; z-index:100 }
  .unavailable { margin-top:8vh; padding:25px } .unavailable h1 { font-size:28px }
}
@media(max-width:350px) {
  .header-inner { gap:7px } .store-identity { gap:8px } .store-identity small { max-width:150px } .header-cart { width:36px; height:36px }
  .hero { padding:23px 17px; grid-template-columns:1.1fr 1fr; min-height:250px } .hero h1 { font-size:26px } .hero-copy>p { font-size:8px } .hero-cta { font-size:8px; padding:9px 12px }
  .main-dish { width:132px; height:132px } .small-dish { width:64px; height:64px; bottom:12px } .hero-art { margin-right:-22px } .dish-label { font-size:5px; max-width:112px }
  .discovery h2 { font-size:19px } .product-title { font-size:12px } .price { font-size:12px } .add-button { width:27px; height:27px } .product-name-ar { font-size:10px }
  .detail-title h2 { font-size:20px } .detail-title .quantity-control { gap:7px } .detail-footer .button { padding:14px 18px; font-size:12px } .detail-footer>div>strong { font-size:19px } .suggestion img { width:36px; height:36px }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto } *,*::before,*::after { animation:none!important; transition:none!important } }


/* Reference-led refinement: compact chrome, curved mobile categories and a floating dock. */
:root { --dock:#1A2530; --quiet:#F4F4F3; --card-shadow:0 5px 20px #18253104 }
body { font-size:14px }
textarea { font:inherit }
.page-width { width:min(1510px,calc(100% - 64px)) }
.store-header { position:relative; z-index:15; background:#ffffffed; backdrop-filter:blur(18px); border-bottom:1px solid #e8e9e980 }
.header-inner { min-height:90px; gap:20px }
.store-identity { gap:10px }
.store-identity>img { width:72px; height:72px; flex-shrink:0; border-radius:20px; padding:2px; border:1px solid color-mix(in srgb,var(--primary) 16%,var(--line)); box-shadow:0 3px 12px #18253108 }
.store-identity>span { display:flex; flex-direction:column }
.store-identity small { font-size:9px; margin:0; color:#92979B }
.store-identity strong { font-size:16px; line-height:1.5; letter-spacing:-.4px }
.header-actions { gap:8px }
.location { display:flex; gap:8px; margin-right:15px }
.location>i { width:31px; height:31px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--primary); font-size:14px }
.location small { font-size:8px }.location strong { font-size:10px }
.icon-button { width:36px; height:36px; font-size:16px; background:white; border:1px solid var(--line) }
.header-cart { color:var(--dock); background:white }
.header-cart:hover { color:var(--primary); background:var(--soft) }
.desktop-nav { gap:5px; background:var(--dock); padding:4px; border-radius:40px; position:absolute; left:50%; transform:translateX(-50%); height:46px }
.desktop-nav>a,.desktop-nav>button { display:flex; align-items:center; gap:7px; color:#ffffffa8; border-radius:30px; padding:9px 15px; font-size:10px; height:38px }
.desktop-nav i { font-size:16px }.desktop-nav .active { background:var(--accent); color:var(--accent-ink) }
.desktop-nav .active::after { display:none }.desktop-nav .saved-count { background:#ffffff22; color:inherit; width:15px; height:15px; font-size:8px; margin:0 }

/* Greeting and a compact desktop feature replace the tall promotional header. */
.intro-grid { display:grid; grid-template-columns:minmax(0,1fr) 430px; align-items:center; gap:65px; padding:34px 0 30px }
.discovery { display:block; margin:0; min-width:0 }
.intro-kicker { display:block; color:var(--primary); font-size:9px; letter-spacing:.16em; font-weight:600; margin-bottom:11px }
.discovery h1 { font-size:clamp(28px,2.6vw,39px); font-weight:600; letter-spacing:-1.6px; line-height:1.3 }
.discovery h1>span { color:#93979B; font-weight:400 }.discovery h1 sup { color:var(--accent); font-size:20px; margin-left:4px; top:-.45em; position:relative }
.discovery>div>p { color:var(--muted); font-size:12px; margin-top:9px }
.search-bar { width:100%; max-width:670px; height:51px; margin-top:24px; padding:6px 6px 6px 20px; gap:12px; border-color:#EDEEEE; box-shadow:0 6px 20px #16263303 }
.search-bar>i { color:var(--dock); font-size:17px }.search-bar input,.search-bar input::placeholder { font-size:12px }
.filter-button { padding:0; background:var(--dock); color:white; border-radius:50%; flex-shrink:0 }
.filter-button i { width:38px; height:38px; color:white; background:none; font-size:18px }
.hero { grid-template-columns:1.05fr .95fr; min-height:185px; margin:0; padding:26px; border-radius:24px; overflow:hidden }
.hero::before { width:280px; height:280px; top:-75px; right:-60px }
.hero-copy { max-width:220px }.hero-copy .eyebrow { font-size:8px; letter-spacing:.13em }
.hero h2 { font-size:25px; font-weight:500; line-height:1.15; letter-spacing:-.8px; margin:12px 0 15px; white-space:pre-line }
.hero-cta { background:transparent; color:white; padding:0; font-size:9px; gap:20px; margin:0; font-weight:400 }
.hero-cta i { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:var(--hero-button,var(--accent)); color:var(--hero-button-ink,var(--accent-ink)); font-size:13px }
.hero-art { min-height:140px }.hero-dish.main-dish { width:147px; height:147px; border-width:4px; transform:translate(-42%,-50%) rotate(8deg) }
.hero .orbit-one { width:177px; height:177px; border-style:dashed }.hero .spark-one { left:0; top:0; font-size:23px }

/* A straight category rail on desktop; the same items travel along an arc on mobile. */
.category-browser { margin:0 0 27px; min-width:0 }
.category-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:13px }
.category-heading h2 { font-size:15px; font-weight:500; letter-spacing:-.4px }
.category-arrows { display:flex; gap:7px }.category-arrows button { display:grid; place-items:center; width:29px; height:29px; border:1px solid var(--line); border-radius:50%; background:white; font-size:12px }
.category-viewport { position:relative; min-width:0 }
.category-track { position:relative; display:flex; align-items:flex-start; gap:11px; width:100%; overflow-x:auto; padding:4px 0 10px; scrollbar-width:none; overscroll-behavior-inline:contain; scroll-snap-type:x proximity }
.category-track::-webkit-scrollbar { display:none }
.category-chip { position:relative; display:flex; flex:0 0 auto; align-items:center; gap:10px; min-height:58px; max-width:none; padding:6px 21px 6px 7px; border-radius:19px; border:1px solid #ECEDED; background:white; white-space:nowrap; font-size:12px; font-weight:400; scroll-snap-align:center; box-shadow:0 3px 8px #18253102 }
.category-picture { display:grid; place-items:center; flex-shrink:0; width:42px; height:42px; border-radius:14px; background:#F8F8F7; color:var(--primary); font-size:18px }
.category-picture img { width:100%; height:100%; object-fit:cover; border-radius:inherit; flex-shrink:0 }
.category-chip.active { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:500 }
.category-chip.active .category-picture { background:#ffffffed }
.category-sidebar { display:none }.menu-layout { grid-template-columns:minmax(0,1fr) 285px; gap:28px; scroll-margin-top:90px }
.menu-heading { margin:0 0 28px; min-height:56px }.menu-heading h2 { font-size:24px; letter-spacing:-.8px; margin:0 0 5px }.menu-heading .eyebrow { display:none }.menu-heading p { font-size:10px }
.sort-control { border:1px solid var(--line); border-radius:30px; padding:8px 11px; background:white; font-size:10px }.sort-control select { font-size:10px; max-width:140px }
.sort-picker { position:relative }
.category-swipe-hint,.category-scroll-indicator { display:none }
.sort-native { display:none }
.sort-trigger { display:inline-flex; align-items:center; justify-content:space-between; gap:7px; min-height:40px; width:146px; padding:9px 10px; background:white; border:1px solid var(--line); border-radius:13px; color:var(--ink); font-size:11px }
.sort-trigger>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.sort-trigger>i { color:var(--primary); font-size:12px; flex-shrink:0 }
.sort-trigger>i:last-child { font-size:10px; transition:transform .2s }
.sort-trigger[aria-expanded=true] { border-color:var(--primary); background:var(--soft) }
.sort-trigger[aria-expanded=true]>i:last-child { transform:rotate(180deg) }
.sort-options { display:grid; gap:3px; position:absolute; z-index:14; top:calc(100% + 8px); right:0; width:min(244px,calc(100vw - 36px)); padding:6px; border:1px solid var(--line); border-radius:18px; background:white; box-shadow:0 12px 35px #1825311c }
.sort-option { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:52px; padding:10px 12px; border-radius:12px; background:white; color:var(--ink); font-size:12px; text-align:left }
.sort-option small { display:block; margin-top:3px; color:var(--muted); font-size:10px; font-weight:400 }
.sort-option>i { flex-shrink:0; color:var(--primary); font-size:16px; visibility:hidden }
.sort-option[aria-selected=true] { background:var(--soft); color:var(--primary); font-weight:500 }
.sort-option[aria-selected=true]>i { visibility:visible }
.sort-option:hover { background:var(--surface) }
.product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px }

/* Mirqab-inspired cards: a clear title, a generous dish image and a single basket action. */
.product-card { min-height:300px; border:1px solid #EBECEB; border-radius:22px; padding:15px; background:white; box-shadow:var(--card-shadow); overflow:hidden }
.product-card:hover { transform:translateY(-3px); box-shadow:0 9px 28px #1825310b }
.card-caption { position:relative; z-index:1; padding-right:16px }
.product-category { display:block; margin:0 0 6px; color:#91979C; font-size:9px; letter-spacing:.02em; line-height:1.4 }
.product-title { display:block; min-height:0; margin:0; padding:0; background:none; text-align:left; font-size:15px; line-height:1.4; letter-spacing:-.5px; font-weight:500 }
.save-product { right:12px; top:12px; width:25px; height:25px; font-size:11px; background:#F7F7F6; color:#737D83; box-shadow:none }
.save-product[aria-pressed=true] { color:var(--primary); background:var(--soft) }
.product-image-button { position:relative; flex-shrink:0; width:100%; max-width:180px; aspect-ratio:1; margin:10px auto; border-radius:16px; border:0; background:#F5F5F3; padding:0; box-shadow:0 7px 14px #18253109; overflow:hidden }
.product-image-button img { display:block; border-radius:inherit; width:100%; height:100%; object-fit:cover; transition:transform .35s }
.card-note { display:flex; align-items:center; justify-content:space-between; gap:5px; min-height:16px; margin:0 0 6px }
.product-name-ar { margin:0; color:#959CA1; font-size:10px; min-width:0; max-width:100%; text-align:start; line-height:1.6 }
.card-rating { font-size:10px; white-space:nowrap }.card-rating i { color:var(--accent) }
.product-bottom { margin:0; margin-top:auto; border-top:0; padding:0; gap:9px; min-height:39px }
.price { color:var(--dock); font-size:18px; font-weight:500; letter-spacing:-.5px }.price small { color:var(--primary); font-size:9px; font-weight:500; margin-right:4px; letter-spacing:0 }
.old-price { font-size:9px }.options-label { font-size:8px; margin-top:2px }.add-button { width:36px; height:36px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-size:17px; font-weight:400; box-shadow:0 3px 9px #18253105 }
.add-button.has-quantity { background:var(--dock); color:white; font-size:12px }.no-photo { border-radius:inherit; min-height:0 }
.load-more { padding:13px 22px; font-weight:400; font-size:11px }.menu-end { font-size:10px }
.order-sidebar { top:92px }.order-card { border-radius:25px; padding:20px; background:#fff; border:1px solid #ECEDED; box-shadow:var(--card-shadow) }
.order-heading { border-bottom:0; margin-bottom:8px; padding-bottom:10px; gap:10px }.order-heading>span { background:var(--quiet); color:var(--dock); border-radius:50%; width:34px; height:34px; font-size:17px }
.order-heading h2 { font-size:17px; font-weight:500 }.order-heading p { font-size:8px; color:#989DA2 }.cart-empty-art { width:84px; height:84px; font-size:35px; background:var(--surface) }
.cart-empty h3 { font-size:13px }.cart-empty p { font-size:10px; margin:10px auto 15px }.cart-empty .button { font-size:10px }
.order-help { font-size:8px }.store-footer { padding-bottom:36px }.store-footer>div>strong { font-size:13px }
.button { border-radius:40px; background:var(--dock); color:white; font-weight:400 }.button.secondary { background:#fff; color:var(--dock); border-color:var(--line) }

/* The floating capsule has the same four actions as the Mirqab reference. */
.bottom-nav { display:none }.mobile-order { display:none }
.bottom-nav .active::before { display:none }

/* Cart and checkout: airy cards, circular controls and a clear summary. */
.cart-dialog,.checkout-dialog { background:#FAFAF9; width:min(680px,calc(100% - 40px)); border-radius:30px; max-height:calc(100dvh - 40px) }
.dialog-heading { position:sticky; top:0; z-index:4; background:#FAFAF9; border:0; padding:21px 24px; min-height:80px }
.dialog-heading h2 { padding:0; background:none; border-radius:0; font-size:22px; font-weight:400; letter-spacing:-.8px }
.dialog-heading .icon-button,.dialog-heading .round-icon { width:39px; height:39px; border:1px solid #EAECEB; background:#FAFAF9; font-size:18px }
.cart-restaurant { margin:2px 25px 20px; gap:10px }.cart-restaurant>img { width:30px; height:30px; border-radius:9px }.cart-restaurant small { font-size:7px }.cart-restaurant strong { font-size:11px }
.cart-dialog>[data-cart-content] { padding:0 22px }.cart-lines { max-height:340px; padding:2px 0 }
.cart-line { display:grid; grid-template-columns:57px 1fr; gap:10px; border-radius:17px; border:1px solid #F0F0EF; padding:9px; margin-bottom:10px; background:#fff; box-shadow:0 3px 10px #18253103 }
.cart-line>img,.cart-no-photo { width:57px; height:66px; border-radius:13px; object-fit:cover; background:var(--quiet) }.cart-no-photo { display:grid; place-items:center; color:var(--primary) }
.cart-line h3 { font-size:11px; font-weight:400; line-height:1.4; padding-right:10px; letter-spacing:-.2px }.cart-line-option { color:#A0A4A7; font-size:8px; display:block; margin-top:3px }
.cart-line-bottom { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:12px }
.line-price { margin:0; color:var(--primary); font-size:11px; font-weight:500 }
.quantity-control { border-radius:40px; border:1px solid #F0F1F0; padding:3px; gap:9px; background:#FAFAF9 }
.quantity-control button { background:white; width:25px; height:25px; border-radius:50%; font-size:15px; font-weight:300; box-shadow:0 2px 4px #18253102 }
.quantity-control button:last-child { background:var(--dock); color:white }.quantity-control>span,.quantity-control output { font-weight:400 }
.cart-line .quantity-control { gap:6px; padding:2px }.cart-line .quantity-control button { width:19px; height:19px; font-size:12px }.cart-line .quantity-control>span { font-size:8px }
.remove-line { right:8px; top:8px; color:#AEB3B6; font-size:14px }
.more-items { border:0; padding:9px; margin:0 0 15px; font-size:9px; color:#8D9499 }
.promo-field { display:flex; align-items:center; gap:8px; border:1px solid #EEEFEF; background:#fff; border-radius:40px; padding:5px 6px 5px 14px; margin:3px 0 17px }
.promo-field input { background:none; border:0; min-width:0; flex:1; font-size:9px; color:var(--ink); outline:none }.promo-field button { display:flex; align-items:center; gap:6px; border-radius:30px; background:var(--soft); color:var(--primary); padding:8px 12px; font-size:9px }
.order-summary { background:#FAFAF9; border-radius:17px; padding:15px 12px 0; margin-bottom:17px }.order-summary h3 { font-size:14px; font-weight:400; letter-spacing:-.5px; margin-bottom:17px }
.order-summary>p { display:flex; justify-content:space-between; gap:10px; color:#9A9FA3; font-size:9px; margin:12px 0 }.order-summary>p strong { color:#767F86; font-weight:400 }.order-summary>p>span:last-child { text-align:right; font-size:8px }
.cart-subtotal { padding-top:17px; margin:17px 0 0; border-top:1px dashed #E0E3E3; font-size:10px; align-items:center; min-height:48px }.cart-subtotal strong { color:var(--dock); font-size:13px; font-weight:500 }
.checkout-button { font-size:10px; padding:13px 12px; justify-content:space-between; gap:8px }.checkout-button i { color:var(--accent) }.preview-note { color:#ADB1B4; font-size:8px; margin-top:11px }
.cart-dialog .cart-lines { max-height:none }.cart-dialog .cart-line { grid-template-columns:125px 1fr; gap:20px; padding:12px; border-radius:25px; margin-bottom:14px; min-height:150px }
.cart-dialog .cart-line>img,.cart-dialog .cart-no-photo { width:125px; height:125px; border-radius:20px }.cart-dialog .cart-line-body { padding:7px 6px 5px 0; display:flex; flex-direction:column }
.cart-dialog .cart-line h3 { font-size:18px; font-weight:400; line-height:1.4; letter-spacing:-.7px }.cart-dialog .cart-line-option { font-size:10px; margin-top:5px }
.cart-dialog .cart-line-bottom { margin-top:auto; padding-top:15px }.cart-dialog .line-price { font-size:15px; font-weight:400 }
.cart-dialog .cart-line .quantity-control { padding:3px; gap:10px }.cart-dialog .quantity-control button { width:29px; height:29px; font-size:20px }.cart-dialog .quantity-control>span { font-size:11px }
.cart-dialog .remove-line { top:9px; right:10px; font-size:17px }.cart-dialog .more-items { font-size:11px; padding:12px }
.cart-dialog .promo-field { margin-top:14px; padding:7px 8px 7px 18px }.cart-dialog .promo-field input { font-size:12px }.cart-dialog .promo-field button { font-size:11px; padding:10px 17px }
.cart-dialog .order-summary { background:white; border:1px solid #F0F1F0; padding:24px 20px; border-radius:25px; margin:18px 0 20px }.cart-dialog .order-summary h3 { font-size:20px; margin-bottom:24px }
.cart-dialog .order-summary>p { font-size:12px; margin:17px 0 }.cart-dialog .order-summary>p>span:last-child { font-size:11px }
.cart-dialog .cart-subtotal { background:none; border:0; border-top:1px dashed #E3E5E4; border-radius:0; margin:23px 0 0; padding:22px 0 0; font-size:13px }
.cart-dialog .cart-subtotal strong { font-size:21px }.cart-dialog .checkout-button { padding:18px 23px; font-size:13px }.cart-dialog .preview-note { font-size:9px }
.checkout-dialog { width:min(940px,calc(100% - 40px)) }.checkout-dialog .dialog-heading h2 { margin-right:auto; margin-left:12px }
.preview-badge { display:inline-flex; align-items:center; padding:4px 9px; border-radius:30px; font-size:8px; letter-spacing:.04em; color:var(--primary); background:var(--soft); font-weight:500 }
.checkout-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; padding:0 24px 26px; align-items:start }
.checkout-fields,.checkout-review { min-width:0 }.checkout-review { position:sticky; top:0; align-self:start }.checkout-card { background:white; border:1px solid #F0F1F0; border-radius:22px; padding:22px; margin-bottom:17px; box-shadow:0 3px 12px #18253103 }
.checkout-card h3 { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:15px; font-weight:400; letter-spacing:-.4px; margin-bottom:19px }
.checkout-card .eyebrow { font-size:8px; margin-bottom:7px }.checkout-card>.eyebrow+h3 { font-size:19px }
.fulfilment-options { display:grid; grid-template-columns:1fr 1fr; gap:9px }.fulfilment-options label { display:flex; align-items:center; gap:8px; border:1px solid var(--line); padding:12px 10px; border-radius:14px; font-size:11px; cursor:pointer }
.fulfilment-options label:has(input:checked) { background:var(--soft); border-color:var(--soft); color:var(--primary) }.fulfilment-options input { position:absolute; opacity:0; width:1px; height:1px }.fulfilment-options label:has(input:focus-visible) { outline:2px solid var(--primary); outline-offset:3px }.fulfilment-options i { font-size:18px }
.field-note { font-size:9px; color:#A0A6AA; line-height:1.8; margin-top:12px }
.contact-fields { display:grid; grid-template-columns:1fr; gap:14px }.contact-fields label,.address-field { display:block; font-size:10px; color:#7C858C }
.contact-fields input,.address-field textarea { display:block; width:100%; border:1px solid #EBEDED; border-radius:12px; background:#FDFDFC; color:var(--ink); padding:11px 12px; margin-top:6px; font-size:11px; resize:vertical }
.address-field { margin-top:16px }.address-field textarea { min-height:85px }
.address-field-head { display:flex; align-items:center; justify-content:space-between; gap:9px; flex-wrap:wrap }
.geo-locate { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:white; color:var(--primary); border-radius:30px; padding:6px 11px; font-size:9px; font-weight:600; cursor:pointer; line-height:1.3 }
.geo-locate:hover { background:var(--soft) }.geo-locate:disabled { opacity:.55; cursor:progress }
.geo-locate i { font-size:12px }
.geo-status { margin-top:8px }.geo-status.is-error { color:#B3261E }
.geo-map { margin-top:9px; border:1px solid #EBEDED; border-radius:14px; overflow:hidden; background:#F7F8F7 }
.geo-map iframe { display:block; width:100%; height:170px; border:0 }
.geo-map-link { display:inline-flex; align-items:center; gap:5px; padding:8px 12px; font-size:9px; font-weight:600; color:var(--primary); text-decoration:none }
.geo-map-link:hover { text-decoration:underline }
.payment-option { display:flex; align-items:center; gap:11px; padding:12px 0; cursor:pointer }.payment-option+.payment-option { border-top:1px solid #F3F3F2 }
.payment-icon { display:grid; place-items:center; flex-shrink:0; width:41px; height:41px; border-radius:14px; background:#F7F7F6; color:var(--primary); font-size:23px }
.payment-option>span:nth-child(2) { flex:1; min-width:0 }.payment-option strong { display:block; font-size:11px; font-weight:400 }.payment-option small { display:block; color:#A0A6AB; font-size:8px; line-height:1.7; margin-top:3px }.payment-option input { width:16px; height:16px }
.checkout-item { display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid #F3F3F2; font-size:11px }.checkout-item>span { min-width:0; flex:1 }.checkout-item strong { font-size:11px; font-weight:400; line-height:1.6 }.checkout-item>strong { white-space:nowrap; color:var(--primary) }.checkout-item small { display:block; font-size:9px; color:var(--muted); margin-top:3px }
.checkout-review .cart-subtotal { margin-top:18px; font-size:12px; min-height:58px }.checkout-review .cart-subtotal strong { font-size:19px }.checkout-review .preview-note { font-size:9px; text-align:left; padding:0 4px; margin:0 0 16px; line-height:1.8 }.review-button { width:100%; padding:17px; font-size:12px; justify-content:space-between }.review-button i { color:var(--accent) }
.review-dialog { width:min(440px,calc(100% - 32px)); text-align:center; padding:44px 29px 25px; border-radius:28px; background:#fff }
.review-check { width:90px; height:90px; display:grid; place-items:center; border:9px solid #F0F2F0; box-shadow:0 0 0 1px #E4E8E5,inset 0 3px 10px #00000015; border-radius:50%; background:var(--dock); color:white; margin:0 auto 28px; font-size:41px }
.review-dialog>.eyebrow { font-size:8px; letter-spacing:.15em }.review-dialog h2 { font-size:24px; font-weight:400; line-height:1.4; letter-spacing:-.8px; margin:12px 0 }
.review-dialog>p { font-size:12px; line-height:1.9; color:#979FA4 }.review-dialog>strong { display:block; font-size:24px; font-weight:400; color:var(--primary); margin:22px 0 }
.review-dialog .button { width:100%; font-size:12px }.review-back { display:block; width:100%; padding:16px; margin-top:10px; border-radius:35px; background:#F5F6F4; font-size:11px; color:#8B9297 }
.detail-image { background:#F7F7F5 }.detail-image>img { object-fit:contain }.detail-title h2 { font-weight:500 }.detail-pill { font-size:10px }.detail-save { color:var(--dock) }.detail-footer .button { background:var(--dock); color:white }.detail-footer .button i { color:var(--accent) }
.toast { background:var(--dock) }

@media(min-width:1600px) { .intro-grid { grid-template-columns:minmax(0,1fr) 480px; gap:95px }.hero { min-height:195px }.hero h2 { font-size:28px }.hero-art { min-height:145px }.hero .main-dish { width:160px; height:160px }.product-card { min-height:310px }.product-title { font-size:16px }.product-category { font-size:10px }.price { font-size:21px }.menu-layout { grid-template-columns:minmax(0,1fr) 300px; gap:32px } }
@media(max-width:1250px) { .page-width { width:calc(100% - 48px) }.intro-grid { grid-template-columns:minmax(0,1fr) 365px; gap:40px }.hero { padding:24px; min-height:174px }.hero h2 { font-size:22px }.hero .main-dish { width:131px; height:131px }.hero .orbit-one { width:155px; height:155px }.hero-art { min-height:125px }.menu-layout { grid-template-columns:minmax(0,1fr) 260px; gap:22px }.product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px }.product-card { padding:15px }.desktop-nav>button,.desktop-nav>a { padding:9px 12px }.location { display:none } }
@media(max-width:1000px) { .menu-layout { grid-template-columns:minmax(0,1fr) }.order-sidebar { display:none }.product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px }.product-card { padding:14px; min-height:280px }.product-title { font-size:15px }.product-image-button { margin-top:10px }.intro-grid { grid-template-columns:minmax(0,1fr) 315px; gap:30px; padding:28px 0 }.discovery h1 { font-size:29px }.discovery>div>p { font-size:10px }.intro-kicker { font-size:8px }.hero h2 { font-size:20px }.hero { padding:20px; min-height:166px }.hero .main-dish { width:115px; height:115px }.hero .orbit-one { width:140px; height:140px }.hero .hero-copy .eyebrow { font-size:6px }.hero .hero-cta { font-size:8px; gap:9px }.hero-art { min-height:115px }.store-footer { padding-bottom:130px } }
@media(max-width:760px) {
  html { scroll-padding-top:80px }.page-width { width:calc(100% - 36px) }.header-inner { min-height:76px; gap:10px }.store-identity { gap:8px }.store-identity>img { width:60px; height:60px; border-radius:17px }.store-identity small { font-size:8px; max-width:none }.store-identity strong { font-size:13px }.header-actions { gap:8px }.header-actions .icon-button { width:34px; height:34px; font-size:16px }.share-button { display:inline-flex }.location,.desktop-nav { display:none }
  .intro-grid { display:block; padding:27px 0 18px }.hero { display:none }.intro-kicker { display:none }.discovery { margin:0 }.discovery h1 { font-size:27px; letter-spacing:-1.1px; line-height:1.3 }.discovery h1>sup { font-size:17px; margin-left:3px }.discovery>div>p { display:none }.search-bar { margin-top:21px; max-width:none; height:48px; border:0; padding:5px 5px 5px 15px; background:white; box-shadow:0 5px 15px #18253103 }.search-bar input,.search-bar input::placeholder { font-size:11px }.search-bar>i { font-size:16px }.filter-button { margin-left:4px }.filter-button i { width:38px; height:38px; font-size:17px }
  .category-browser { margin:0 -18px 20px; width:calc(100% + 36px); position:relative }.category-heading { display:flex; align-items:center; margin:0 18px 7px }.category-viewport { height:118px; overflow:hidden; isolation:isolate }
  .category-viewport::before { content:''; position:absolute; z-index:-1; width:150%; height:160px; top:0; left:-25%; border-radius:50% 50% 0 0; background:var(--soft) }
  .category-viewport::after { content:''; position:absolute; z-index:-1; width:150%; height:150px; top:96px; left:-25%; border-radius:50% 50% 0 0; background:var(--surface) }
  .category-track { height:116px; padding:10px calc(50% - 34px) 12px; gap:6px; scroll-snap-type:x mandatory; touch-action:pan-x pan-y pinch-zoom; align-items:flex-start; overflow-y:hidden; box-sizing:border-box }
  .category-chip { display:flex; flex-direction:column; justify-content:flex-start; gap:6px; flex:0 0 68px; width:68px; min-height:86px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:#8D959B; font-size:10px; font-weight:400; transform:translateY(var(--arc-offset,0px)); will-change:transform; white-space:normal }
  .category-picture { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:white; border:3px solid white; color:var(--primary); font-size:20px; box-shadow:0 4px 12px #18253103; transition:border-color .2s }
  .category-picture img { width:100%; height:100%; border-radius:50%; object-fit:cover }
  .category-label { width:68px; line-height:1.25; font-size:10px; min-height:26px; display:flex; align-items:flex-start; justify-content:center; text-align:center; overflow-wrap:anywhere }
  .category-chip.active { background:none; border:0; color:var(--dock); font-weight:500 }.category-chip.active .category-picture { border-color:var(--accent); background:white }.category-chip.active::after { content:''; position:absolute; top:84px; left:25px; width:18px; height:3px; border-radius:3px; background:var(--primary) }
  .menu-layout { display:block; scroll-margin-top:85px }.menu-heading { margin:0 0 28px; min-height:46px; gap:10px }.menu-heading h2 { font-size:20px; font-weight:500; margin:0 0 4px; max-width:none }.menu-heading p { font-size:9px }.menu-tools { margin:0; align-self:center; gap:6px }.sort-control { padding:7px 9px; font-size:9px }.sort-control>i { display:block; font-size:10px }.sort-control select { font-size:9px; max-width:108px }.small-icon { width:27px; height:27px; font-size:12px }
  .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }.product-card { padding:12px; min-height:270px; border-radius:22px }.product-title { font-size:14px; min-height:0; line-height:1.4; margin:0 }.product-category { font-size:8px; margin:0 0 7px }.product-image-button { width:100%; max-width:160px; margin:10px auto 8px; aspect-ratio:1; border-radius:16px }.product-name-ar { margin:0; font-size:9px }.product-bottom { margin:0; margin-top:auto; padding:0 }.price { font-size:17px }.price small { font-size:8px }.add-button { width:32px; height:32px; font-size:15px }.save-product { width:24px; height:24px; right:10px; top:10px; font-size:10px }.options-label { font-size:7px }.card-note { min-height:15px; margin-bottom:6px }
  .bottom-nav { display:flex; align-items:center; justify-content:center; position:fixed; left:50%; right:auto; bottom:calc(18px + env(safe-area-inset-bottom,0px)); width:260px; transform:translateX(-50%); z-index:12; background:var(--dock); border:0; border-radius:50px; padding:5px; box-shadow:0 8px 24px #18253128; gap:5px; height:61px }
  .bottom-nav>a,.bottom-nav>button { display:flex; flex:none; align-items:center; justify-content:center; width:57px; height:51px; min-height:0; border-radius:50%; padding:0; color:#FFFFFF8c; background:none; font-size:0; gap:0; transition:background .2s,color .2s }.bottom-nav i { font-size:23px; line-height:1 }.bottom-nav>a>span,.bottom-nav>button>span { display:none }.bottom-nav .active { background:var(--accent); color:var(--accent-ink); box-shadow:0 0 0 4px var(--dock) }.bottom-nav .active::before { display:none }
  .mobile-order:not([hidden]) { display:flex; align-items:center; gap:12px; position:fixed; left:50%; bottom:calc(91px + env(safe-area-inset-bottom,0px)); z-index:11; transform:translateX(-50%); width:380px; max-width:calc(100% - 32px); border-radius:45px; background:var(--dock); color:white; padding:11px 14px; box-shadow:0 7px 22px #18253115 }
  .mobile-order>span:nth-child(2) { font-size:10px; font-weight:400; flex:1 }.mobile-order>span:nth-child(2)>small { font-size:8px; margin-top:2px }.mobile-order-icon { width:34px; height:34px; border-radius:50%; background:var(--accent); color:var(--accent-ink); justify-content:center; position:relative; font-size:16px }.mobile-order .cart-count { position:absolute; top:-6px; right:-3px; min-width:15px; height:15px; font-size:8px; background:white; color:var(--dock); border:0 }.mobile-order>strong { font-size:12px; font-weight:400 }.mobile-order>i { color:var(--accent); font-size:15px }
  .store-footer { padding-bottom:190px; margin-top:40px; text-align:center; display:block }.store-footer>div>span { max-width:none; font-size:9px }.store-footer nav { max-width:none; justify-content:center; margin-top:18px }.store-footer nav .powered-by { justify-content:center }
  .cart-dialog,.checkout-dialog { width:100%; max-width:none; height:100dvh; max-height:100dvh; margin:0; border-radius:0; padding-bottom:calc(25px + env(safe-area-inset-bottom,0px)) }
  .cart-dialog .dialog-heading,.checkout-dialog .dialog-heading { padding:17px 20px; min-height:77px; border:0 }.cart-dialog .dialog-heading h2,.checkout-dialog .dialog-heading h2 { font-size:22px; font-weight:400; background:none; padding:0; margin:0 }
  .checkout-dialog .dialog-heading h2 { margin-right:auto; margin-left:10px }.dialog-heading .icon-button { width:39px; height:39px }
  .cart-restaurant { margin:0 22px 17px }.cart-dialog>[data-cart-content] { padding:0 18px }.cart-dialog .cart-line { grid-template-columns:105px 1fr; gap:14px; padding:10px; min-height:135px; border-radius:24px; margin-bottom:12px }.cart-dialog .cart-line>img,.cart-dialog .cart-no-photo { width:105px; height:115px; border-radius:19px }.cart-dialog .cart-line-body { padding:7px 2px 5px 0 }.cart-dialog .cart-line h3 { font-size:16px; line-height:1.4; padding-right:7px; letter-spacing:-.5px }.cart-dialog .cart-line-option { font-size:9px; margin-top:6px }.cart-dialog .line-price { font-size:13px }
  .cart-dialog .cart-line .quantity-control { gap:7px; padding:3px }.cart-dialog .quantity-control button { width:24px; height:24px; font-size:18px }.cart-dialog .quantity-control>span { font-size:10px }.cart-dialog .cart-line-bottom { gap:5px; padding-top:10px }.cart-dialog .remove-line { font-size:14px; top:8px; right:8px }
  .cart-dialog .more-items { font-size:10px; margin-bottom:10px }.cart-dialog .promo-field input { font-size:11px }.cart-dialog .promo-field button { font-size:10px; padding:10px 14px }.cart-dialog .order-summary { padding:23px 20px; margin-top:16px }.cart-dialog .order-summary h3 { font-size:20px }.cart-dialog .order-summary>p { font-size:11px }.cart-dialog .order-summary>p>span:last-child { font-size:10px }.cart-dialog .cart-subtotal { font-size:12px; padding-top:22px }.cart-dialog .cart-subtotal strong { font-size:21px }.cart-dialog .checkout-button { font-size:12px; padding:18px 22px }
  .checkout-layout { grid-template-columns:1fr; gap:0; padding:0 18px 5px }.checkout-review { position:static }.checkout-card { border-radius:24px; padding:22px; margin-bottom:17px }.checkout-card h3 { font-size:16px }.contact-fields { grid-template-columns:1fr 1fr; gap:11px }.contact-fields input { font-size:11px; padding:11px 10px }.checkout-review .preview-note { margin:2px 8px 17px; font-size:9px }.review-button { padding:18px 21px; font-size:12px }.checkout-review .checkout-card { margin-bottom:12px }.payment-option strong { font-size:12px }.payment-option small { font-size:9px }.payment-option { gap:12px; padding:13px 0 }.payment-icon { width:43px; height:43px }.field-note { font-size:9px }
  .review-dialog { width:calc(100% - 28px); max-height:95dvh; border-radius:28px; padding:38px 26px 22px }.review-dialog h2 { font-size:25px }.review-dialog::backdrop { background:#10243191 }
  .detail-image { height:310px; min-height:0; background:#F4F5F3; border-radius:0 0 30px 30px }.detail-image>img { object-fit:contain; padding:15px }.detail-image .icon-button { width:37px; height:37px; background:#fffffff5; top:20px }.detail-pill { top:24px; font-size:10px }.detail-body { padding:23px 21px 28px }.detail-title h2 { font-size:23px; font-weight:500 }.detail-title .quantity-control { gap:8px }.detail-title .quantity-control button { width:27px; height:27px }.detail-title p { font-size:11px }.detail-footer { padding:16px 21px calc(16px + env(safe-area-inset-bottom,0px)) }.detail-footer>div>strong { font-size:22px; font-weight:500 }.detail-footer .button { font-size:12px; padding:15px 23px }.suggestion>span { font-size:9px }
  .toast { bottom:166px } body:has(dialog[open]) .toast { bottom:24px }
}
@media(max-width:480px) { .intro-grid { padding:26px 0 17px }.discovery h1 { font-size:25px; letter-spacing:-1.05px }.discovery h1 sup { font-size:16px }.search-bar { height:47px; margin-top:19px }.menu-heading h2 { font-size:20px }.sort-control>i { display:block }.sort-control select { max-width:92px; font-size:8px }.sort-control { padding:7px 9px; gap:5px }.product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }.product-card { min-height:260px; padding:12px; border-radius:21px }.card-caption { padding-right:9px }.product-title { font-size:14px; line-height:1.4; letter-spacing:-.4px }.product-category { font-size:8px; margin-bottom:7px }.product-image-button { width:100%; max-width:130px; margin:10px auto 8px; border-radius:14px }.card-note { margin-bottom:6px }.product-name-ar { font-size:9px }.price { font-size:19px }.price small { font-size:8px }.add-button { width:32px; height:32px; font-size:16px }.save-product { top:9px; right:9px; width:23px; height:23px; font-size:10px }.product-bottom { margin:0; margin-top:auto }.options-label { font-size:7px }.category-browser { margin-bottom:16px }.menu-heading { margin-bottom:24px }.load-more { font-size:11px; margin-top:25px }.store-footer { padding-bottom:190px } }
@media(max-width:350px) { .page-width { width:calc(100% - 28px) }.category-browser { width:calc(100% + 28px); margin-inline:-14px }.discovery h1 { font-size:22px; letter-spacing:-.9px }.discovery h1 sup { font-size:13px }.header-inner { min-height:60px }.product-card { padding:11px; min-height:250px }.product-title { font-size:13px }.product-category { font-size:7px }.product-name-ar { font-size:8px }.price { font-size:17px }.price small { font-size:7px }.product-grid { gap:10px }.card-caption { padding-right:12px }.save-product { width:21px; height:21px; font-size:9px }.add-button { width:29px; height:29px; font-size:14px }.menu-heading h2 { font-size:18px }.sort-control { padding:6px 8px }.sort-control select { max-width:84px }.cart-dialog .cart-line { grid-template-columns:88px 1fr; gap:10px }.cart-dialog .cart-line>img,.cart-dialog .cart-no-photo { width:88px; height:108px }.cart-dialog .cart-line h3 { font-size:14px }.cart-dialog .line-price { font-size:11px }.cart-dialog .cart-line .quantity-control { gap:5px }.cart-dialog .quantity-control button { width:22px; height:22px }.contact-fields { grid-template-columns:1fr } }
@media(prefers-reduced-motion:reduce) { .category-chip { will-change:auto } }

/* Shared hand-drawn artwork and interaction polish. */
.hero .hero-art { position:absolute; inset:0 0 0 52%; width:48%; height:100%; min-height:0; align-self:stretch; margin:0; background:transparent; clip-path:polygon(10% 0,100% 0,100% 100%,0 100%); overflow:hidden }
.hero .main-dish { inset:0; width:100%; height:100%; padding:0; border:0; background:transparent; box-shadow:none; border-radius:0; transform:none; overflow:hidden }
.hero .main-dish>img.hero-product-photo { display:block; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:0; transition:transform .35s ease }
.hero:hover .hero-product-photo { transform:scale(1.035) }
.hero .orbit-one { border-color:#ffffff15 }
.cart-empty-art:has(.empty-basket-art) { width:178px; height:125px; max-width:100%; border-radius:0; background:none; margin:0 auto 14px; font-size:0 }
.cart-empty-art:has(.empty-basket-art)::after { display:none }
.empty-basket-art { width:100%; height:100%; object-fit:contain }
.cart-dialog .cart-empty-art:has(.empty-basket-art) { width:235px; height:165px }
.empty-state-art { display:block; width:180px; height:120px; object-fit:contain; margin:0 auto 22px }
.product-grid .product-card:not(.is-established) { animation:storefront-card-enter .34s cubic-bezier(.2,.7,.3,1) backwards; animation-delay:calc(var(--card-index,0) * 25ms) }
.product-image-button:hover img { transform:scale(1.045) }
.save-product { transition:background .2s,color .2s,transform .2s }
.save-product:hover { color:var(--primary); transform:scale(1.07) }
.save-product:active,.category-arrows button:active { transform:scale(.94) }
.add-button { transition:width .22s cubic-bezier(.2,.8,.2,1),background .2s,box-shadow .2s,transform .2s; min-width:32px }
.add-button:hover { box-shadow:0 4px 11px color-mix(in srgb,var(--accent) 24%,transparent); transform:translateY(-1px) }
.add-button:active { transform:scale(.94) }
.card-cart-control { display:inline-flex; align-items:center; flex-shrink:0 }
.card-cart-control.has-quantity { gap:2px; padding:3px; border-radius:25px; background:var(--dock); color:white }
.card-cart-control button[hidden] { display:none }
.card-cart-control.has-quantity .add-button,.card-cart-decrease { display:grid; place-items:center; width:26px; min-width:26px; height:28px; padding:0; border-radius:50%; font-size:11px; box-shadow:none }
.card-cart-control.has-quantity .add-button { background:var(--accent); color:var(--accent-ink) }
.card-cart-decrease { background:transparent; color:white; transition:background .2s,transform .2s }
.card-cart-decrease:hover { background:#ffffff26 }
.card-cart-decrease:active { transform:scale(.9) }
.card-cart-summary { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:34px; height:28px; padding:0 2px; background:transparent; color:white; border-radius:12px }
.card-cart-summary i { font-size:12px; line-height:1 }
.card-cart-summary:hover { background:#ffffff18 }
.card-cart-count { font-size:11px; line-height:1; font-variant-numeric:tabular-nums; font-weight:500 }
.product-bottom:has(.has-quantity) { gap:7px }
.product-bottom:has(.has-quantity) .price { display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; line-height:1.15 }
.product-bottom:has(.has-quantity) .price small { font-size:7px; margin:0 }
.quantity-pop { animation:storefront-quantity-pop .28s ease-out }
.heart-pop { animation:storefront-heart-pop .34s cubic-bezier(.2,.8,.2,1) }
.cart-nudge { animation:storefront-cart-nudge .36s ease-out }
dialog[open] { animation:storefront-dialog-in .22s cubic-bezier(.2,.8,.2,1) }
dialog[open]::backdrop { animation:storefront-backdrop-in .2s ease-out }
.bottom-nav>a,.bottom-nav>button { transition:background .22s,color .22s,transform .22s }
.bottom-nav>a:active,.bottom-nav>button:active { transform:scale(.94) }
.category-heading h2 { margin-right:auto }
.category-drag-hint { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:9px; margin-right:15px }
.category-drag-hint i { color:var(--primary); font-size:12px }
@keyframes storefront-card-enter { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
@keyframes storefront-quantity-pop { 0%,100% { transform:scale(1) } 45% { transform:scale(1.1) } }
@keyframes storefront-heart-pop { 0%,100% { transform:scale(1) } 45% { transform:scale(1.26) rotate(-9deg) } }
@keyframes storefront-cart-nudge { 0%,100% { transform:rotate(0) } 30% { transform:rotate(-9deg) } 65% { transform:rotate(7deg) } }
@keyframes storefront-dialog-in { from { opacity:0; translate:0 9px } to { opacity:1; translate:0 0 } }
@keyframes storefront-backdrop-in { from { opacity:0 } to { opacity:1 } }
@media(min-width:761px) and (pointer:fine) {
  .category-track { cursor:grab; user-select:none }
  .category-track button { cursor:inherit }
  .category-track img { -webkit-user-drag:none; user-select:none }
  .category-track.is-dragging { cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto }
  .category-track.is-dragging .category-chip { transition:none }
}
@media(pointer:coarse) { .category-drag-hint { display:none } }
@media(max-width:760px) {
  .category-drag-hint { display:none }
  .product-bottom:has(.card-cart-control.has-quantity) { flex-direction:column; align-items:stretch; gap:11px }
  .product-bottom:has(.card-cart-control.has-quantity) .price { flex-direction:row; align-items:baseline; gap:4px; line-height:1.3 }
  .product-bottom:has(.card-cart-control.has-quantity) .price small { font-size:9px }
  .card-cart-control.has-quantity { width:100%; justify-content:space-between; gap:2px; padding:4px; border-radius:20px }
  .card-cart-control.has-quantity .add-button,.card-cart-decrease { width:32px; min-width:32px; height:32px; font-size:13px }
  .card-cart-control.has-quantity .card-cart-summary { flex:1; min-width:0; height:32px; gap:5px; padding:0 }
  .card-cart-summary i { font-size:14px }
  .card-cart-count { font-size:12px }
}
/* Small moments of joy, shared by every vendor theme. */
.intro-kicker { display:flex; align-items:center; gap:7px }
.intro-kicker i { font-size:15px; color:var(--accent) }
.discovery h1>span { color:var(--primary); background:linear-gradient(transparent 72%,var(--soft) 72%); text-decoration:underline wavy; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:6px }
.discovery h1 sup { display:inline-block; animation:storefront-spark-hello .7s ease-out both }
.hero { background:transparent }
.hero::before { inset:0; width:auto; height:auto; border-radius:inherit; background-color:var(--primary); background-image:radial-gradient(circle at 95% 8%,#ffffff26 1.5px,transparent 2px),radial-gradient(circle at 88% 90%,#ffffff1c 2px,transparent 2.5px); background-size:27px 27px,43px 43px; background-position:right top,right bottom; clip-path:polygon(0 0,57% 0,52.2% 100%,0 100%) }
.hero:has(.hero-art[hidden])::before { clip-path:none }
.hero .orbit-one { border:1px dashed #ffffff35 }
.hero .hero-spark { pointer-events:none }
.hero .joy-spark { bottom:-3px; right:0; font-size:25px; color:var(--hero-accent,var(--accent)) }
.hero-smile { position:absolute; width:35px; height:25px; bottom:-3px; left:0; color:#ffffffb3; pointer-events:none }
.hero-cta i { transition:transform .2s,box-shadow .2s }
.hero-cta:hover i { transform:translate(2px,-2px); box-shadow:-3px 3px 0 #ffffff33 }
.heading-spark { display:inline-block; margin-left:5px; color:var(--accent); font-size:18px; vertical-align:middle }
.category-chip { transition:background .2s,border-color .2s,box-shadow .2s }
.category-picture { transition:transform .2s,box-shadow .2s }
.product-category { display:inline-block; width:fit-content; max-width:100%; padding:3px 8px; border-radius:7px 10px 10px 4px; background:var(--soft); color:var(--primary); font-weight:500 }
.product-card { transition:transform .22s,box-shadow .22s,border-color .22s }
.save-product { background:var(--soft); color:var(--primary) }
.save-product[aria-pressed=true] { background:var(--primary); color:white; box-shadow:0 3px 8px color-mix(in srgb,var(--primary) 18%,transparent) }
.product-bottom { border-top:1px dashed color-mix(in srgb,var(--primary) 14%,transparent); padding-top:9px }
.order-heading>span { background:var(--soft); color:var(--primary); border-radius:11px 15px 15px 8px }
.order-card { border-top:3px solid var(--accent) }
.menu-end>i { color:var(--primary); background:var(--soft); padding:5px; border-radius:50%; margin-right:5px }
.search-bar:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 9%,transparent) }
@media(hover:hover) and (pointer:fine) {
  .category-chip:hover { border-color:var(--accent); box-shadow:0 3px 0 var(--soft) }
  .category-chip:hover .category-picture { transform:translateY(-2px) }
  .product-card:hover { border-color:color-mix(in srgb,var(--primary) 30%,white); box-shadow:0 9px 0 -5px var(--soft),0 12px 24px #1825310b }
  .product-card:hover .product-image-button img { transform:scale(1.045) }
}
@media(max-width:760px) {
  .intro-kicker { display:none }
  .footer-identity { flex-direction:column; justify-content:center; gap:12px }
  .footer-vendor-link { flex-basis:auto; border-radius:17px }
  .footer-vendor-link img { width:64px; height:64px; border-radius:17px }
  .footer-vendor-copy { max-width:290px; text-align:center }
  .footer-vendor-copy>strong { font-size:15px }
  .footer-vendor-copy>span { font-size:10px; margin-top:4px }
  .store-footer nav { margin-left:0 }
  .intro-grid { padding:14px 0 14px }
  .discovery h1 { font-size:23px; line-height:1.25; letter-spacing:-.8px }
  .discovery h1 sup { font-size:14px }
  .search-bar { height:44px; margin-top:12px; padding:4px 4px 4px 14px }
  .search-bar input { font-size:16px }
  .search-bar input::placeholder { font-size:12px }
  .filter-button i { width:34px; height:34px; font-size:16px }
  .category-heading h2 { font-size:13px; letter-spacing:-.3px }
  .category-heading .heading-spark { font-size:14px }
  .category-arrows { display:none }
  .category-swipe-hint { display:flex; align-items:center; gap:6px; margin-left:auto; color:var(--muted); font-size:9px }
  .category-swipe-hint i { color:var(--primary); font-size:12px }
  .category-scroll-indicator { display:block; position:relative; width:64px; height:3px; margin:4px auto 0; border-radius:5px; background:color-mix(in srgb,var(--primary) 12%,transparent); overflow:hidden }
  .category-scroll-indicator>span { position:absolute; top:0; left:0; width:12%; height:100%; border-radius:inherit; background:var(--primary) }
  .menu-heading { margin-bottom:18px }
  .menu-heading h2 { font-size:19px; line-height:1.3 }
  .sort-trigger { width:132px }
  .discovery h1>span { text-underline-offset:4px; text-decoration-thickness:1.5px }
  .product-category { padding:2px 6px; font-size:8px }
}
@media(max-width:350px) { .product-category { font-size:7px }.heading-spark { font-size:15px }.discovery h1 { font-size:21px }.category-heading { margin-inline:14px }.category-heading h2 { font-size:12px }.category-swipe-hint { font-size:8px }.sort-trigger { width:118px; padding-inline:8px; gap:5px }.menu-heading h2 { font-size:18px } }
@keyframes storefront-spark-hello { from { opacity:0; transform:scale(.4) } 65% { opacity:1; transform:scale(1.2) } to { transform:scale(1) } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important }.hero:hover .hero-product-photo { transform:none }.product-image-button:hover img,.product-card:hover .product-image-button img { transform:none } }

/* A menu photograph and overlapping identity card welcome mobile guests. */
@media(max-width:760px) {
  .has-mobile-cover .mobile-cover { display:block; position:relative; height:clamp(200px,55vw,280px); overflow:hidden; background:var(--primary-deep); isolation:isolate }
  .mobile-cover>img { width:100%; height:100%; object-fit:cover; object-position:center 48% }
  .mobile-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#1a25300a 20%,#1a253035 52%,var(--primary-deep) 100%); opacity:.85; z-index:1 }
  .mobile-cover-caption { position:absolute; left:22px; right:22px; bottom:53px; z-index:2; color:white; text-shadow:0 1px 8px #00000045 }
  .mobile-cover-caption>span { display:flex; align-items:center; gap:7px; font-size:8px; font-weight:500; letter-spacing:.15em; color:#ffffffe0 }
  .mobile-cover-caption i { color:var(--hero-accent,var(--accent)); font-size:13px }
  .mobile-cover-caption>strong { display:block; margin-top:3px; font-size:16px; font-weight:500; line-height:1.4 }
  .has-mobile-cover .store-header { margin-top:-32px; background:transparent; backdrop-filter:none; border:0; padding-top:5px }
  .has-mobile-cover .header-inner { min-height:104px; padding:12px 13px; gap:10px; background:white; border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:22px; box-shadow:0 8px 24px #1825310b }
  .has-mobile-cover .store-identity { flex:1; gap:10px }
  .has-mobile-cover .store-identity>img { width:72px; height:72px; border-radius:20px; flex-shrink:0 }
  .has-mobile-cover .store-identity>span { min-width:0 }
  .has-mobile-cover .store-identity strong { font-size:15px; line-height:1.4; overflow-wrap:anywhere }
  .has-mobile-cover .store-identity small { font-size:8px; margin-bottom:2px }
  .has-mobile-cover #vendorTagline { display:block; margin-top:3px; color:var(--muted); font-size:9px; line-height:1.5 }
  .has-mobile-cover .header-actions { gap:6px }
  .has-mobile-cover .header-actions .icon-button { width:40px; height:40px }
  .has-mobile-cover .header-cart { background:var(--soft); color:var(--primary); border-color:transparent }
  .has-mobile-cover .intro-grid { padding-top:20px }
}
@media(max-width:350px) {
  .has-mobile-cover .header-inner { min-height:96px; padding:12px 10px; gap:6px }
  .has-mobile-cover .store-identity { gap:7px }
  .has-mobile-cover .store-identity>img { width:60px; height:60px; border-radius:17px }
  .has-mobile-cover .store-identity strong { font-size:13px }
  .has-mobile-cover .header-actions { gap:4px }
  .has-mobile-cover .header-actions .icon-button { width:36px; height:36px }
}

/* ============================================================
   Language switch (EN / عربي)

   The storefront serves both languages from the same design; the
   toggle only changes ?lang= and the document direction.
   ============================================================ */
.lang-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 38px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 30px; background: white;
  color: var(--primary); font-size: 11px; font-weight: 600; line-height: 1;
  white-space: nowrap; transition: background .2s, border-color .2s, color .2s;
}
.lang-toggle:hover { background: var(--soft); border-color: var(--soft); }
@media (max-width: 767.98px) {
  .lang-toggle { min-width: 34px; height: 34px; padding: 0 9px; font-size: 10px; }
  /* Three header actions plus the language switch have to share a phone width. */
  .store-header .header-actions { gap: 6px; }
}

/* ============================================================
   Right-to-left layout (Arabic)

   Flex and grid order flip automatically with dir="rtl"; these rules
   cover the parts the design positions by hand: text alignment on
   buttons, the sort menu, drawer-side decorations and arrows.
   ============================================================ */
[dir="rtl"] body { font-family: 'Cairo', 'Segoe UI', Tahoma, system-ui, sans-serif; }
[dir="rtl"] .skip-link { left: auto; right: 20px; }
[dir="rtl"] .product-title,
[dir="rtl"] .sort-option,
[dir="rtl"] .category-option,
[dir="rtl"] .suggestion,
[dir="rtl"] .mobile-order { text-align: right; }
[dir="rtl"] .sort-options { right: auto; left: 0; }
[dir="rtl"] .review-stars .review-stars-fill { left: auto; right: 0; }
[dir="rtl"] .notice-close { right: auto; left: 14px; }
[dir="rtl"] .header-cart .cart-count { right: auto; left: -2px; }
[dir="rtl"] .saved-count { margin-left: 0; margin-right: 4px; }
[dir="rtl"] .cart-line h3 { padding-right: 0; padding-left: 13px; }
[dir="rtl"] .order-summary > p > span:last-child { text-align: left; }
[dir="rtl"] .cart-restaurant small,
[dir="rtl"] .eyebrow { letter-spacing: 0; }
[dir="rtl"] .hero .spark-one { left: auto; right: 0; }
[dir="rtl"] .hero-smile,
[dir="rtl"] .hero .joy-spark { left: auto; right: 0; }
[dir="rtl"] .dish-label { transform: translateX(50%) rotate(7deg); }
[dir="rtl"] .hero-note { transform: rotate(5deg); }
[dir="rtl"] .hero .orbit { left: auto; right: -50px; }
/* Hero split: the dish photo and the clipped brand panel are placed with
   physical left/right values, so RTL has to mirror both — otherwise the copy
   is drawn on top of the photo instead of on the brand panel. */
[dir="rtl"] .hero .hero-art { inset: 0 52% 0 0; clip-path: polygon(90% 0, 0 0, 0 100%, 100% 100%) }
[dir="rtl"] .hero::before { background-position: left top, left bottom; clip-path: polygon(100% 0, 43% 0, 47.8% 100%, 100% 100%) }
[dir="rtl"] .dialog-heading .bi-arrow-left,
[dir="rtl"] .category-arrows .bi-arrow-left,
[dir="rtl"] .category-arrows .bi-arrow-right { transform: scaleX(-1); }
[dir="rtl"] .product-prices small { letter-spacing: 0; }
[dir="rtl"] .cart-subtotal strong,
[dir="rtl"] .line-price { text-align: right; }

/* Keep the category rail's scroll coordinates consistent with storefront.js
   in RTL browsers (whose native scrollLeft origin is otherwise reversed). */
[dir="rtl"] .category-track { direction:ltr; }
[dir="rtl"] .category-chip { direction:rtl; }
[dir="rtl"] .category-swipe-hint i { transform:scaleX(-1); }
[dir="rtl"] .card-caption { padding-right:0; padding-left:16px; }
[dir="rtl"] .save-product { right:auto; left:12px; }
[dir="rtl"] .cart-line h3 { text-align:right; }

/* ============================================================
   In-page checkout

   The design ships the checkout dialog; these are the few pieces
   the live order form added to it (timing/notes selects, the
   terms row, the error and the receipt list).
   ============================================================ */
.checkout-dialog .address-field select,
.checkout-dialog .address-field input {
  display: block; width: 100%; border: 1px solid #EBEDED; border-radius: 12px;
  background: #FDFDFC; color: var(--ink); padding: 11px 12px; margin-top: 6px; font-size: 11px;
}
.checkout-dialog .address-field select { appearance: none; background-image: none; }
.terms-check { margin: 14px 0 16px; align-items: flex-start; font-size: 10px; color: #7C858C; line-height: 1.8; }
.terms-check input { margin-top: 2px; flex: none; }
.terms-check a { color: var(--primary); text-decoration: underline; }
.checkout-error { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: #FDECEC; color: #A3312B; font-size: 11px; line-height: 1.75; }
#otpCard .button { width: 100%; margin-top: 10px; }
.review-items { text-align: left; margin: 4px 0 10px; max-height: 34vh; overflow: auto; }
.review-items .checkout-item:last-child { border-bottom: 0; }
.review-dialog .button + .button { margin-top: 9px; }
.review-dialog .eyebrow { color: var(--muted); }
@media (max-width: 767.98px) {
  .checkout-review .field-note { text-align: center; }
}

/* ============================================================
   Fast checkout

   A second button under "Continue to checkout" and the short
   sheet behind it: phone number (plus OTP where the business
   requires it) and the defaults the customer is accepting.
   ============================================================ */
.fast-checkout-button {
  display: flex; align-items: center; gap: 11px; width: 100%; margin-bottom: 9px;
  background: var(--soft); color: var(--accent-ink); border: 1px solid #E7D3A1;
  border-radius: 18px; padding: 11px 14px; text-align: left; cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.fast-checkout-button:hover { background: #F5E7C6; transform: translateY(-1px); box-shadow: 0 6px 18px #C59B2724; }
.fast-checkout-icon {
  display: grid; place-items: center; flex: none; width: 33px; height: 33px;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: 14px;
}
.fast-checkout-text { flex: 1; min-width: 0; display: block; line-height: 1.35; }
.fast-checkout-text strong { display: block; font-size: 12px; font-weight: 600; letter-spacing: -.2px; }
.fast-checkout-text small { display: block; font-size: 9px; color: #8C7740; margin-top: 1px; }
.fast-checkout-button > .bi-arrow-right { flex: none; color: var(--accent); font-size: 12px; }
.cart-dialog .fast-checkout-button { padding: 13px 16px; margin-bottom: 10px; }
.cart-dialog .fast-checkout-text strong { font-size: 13px; }
.cart-dialog .fast-checkout-text small { font-size: 10px; }
.fast-checkout-dialog { width: min(460px, calc(100% - 40px)); }
.fast-checkout-body { padding: 0 24px 26px; }
.fast-checkout-body .checkout-card { padding: 20px; margin-bottom: 14px; }
.fast-checkout-body .checkout-card h3 { margin-bottom: 12px; }
.fast-checkout-body .contact-fields { margin-top: 12px; }
.fast-otp-actions { display: flex; gap: 10px; margin-top: 12px; }
.fast-otp-actions .button { flex: 1; justify-content: center; font-size: 11px; padding: 12px; }
.fast-checkout-body .review-button { font-size: 12px; }
.fast-summary-meta span:not(:last-child)::after { content: " · "; }
.fast-terms { text-align: center; margin-top: 12px; }
.fast-terms a { color: var(--primary); text-decoration: underline; }
@media (max-width: 767.98px) {
  .fast-checkout-body { padding: 0 18px 26px; }
  .cart-dialog .fast-checkout-button { padding: 14px 16px; }
}

/* Product choices: add-on, filling and box-meal cards */
.selection-dialog { width:min(620px,calc(100% - 32px)); max-height:calc(100dvh - 32px); }
.selection-dialog .dialog-heading { padding-bottom:12px; }
.selection-dialog-body { padding:22px 24px 20px; overflow:auto; background:linear-gradient(180deg,#FBF3DE 0%,#FCFAF5 34%); }
.selection-dialog-body>.eyebrow { color:#9A7B1E; }
.selection-dialog-body h3 { margin-top:6px; font-size:22px; font-weight:600; letter-spacing:-.5px; }
.selection-dialog-body .field-note { margin-top:6px; color:var(--muted); font-size:11px; line-height:1.7; }
.selection-dialog-footer { display:flex; justify-content:flex-end; gap:10px; padding:16px 24px 20px; border-top:1px solid var(--line); background:white; }
.selection-dialog-footer .button { min-width:0; padding-inline:24px; white-space:nowrap; }
.selection-dialog-footer .button:not(.secondary) { box-shadow:0 8px 18px rgba(26,37,48,.12); }
.builder-loading,.builder-error { margin-top:18px; padding:15px; border-radius:14px; background:white; color:var(--muted); font-size:11px; line-height:1.7; }
.builder-error { color:#9a554d; background:#fff3f0; }
.builder-steps { display:grid; gap:14px; margin-top:18px; }
.builder-step { border:1px solid color-mix(in srgb,var(--primary) 9%,var(--line)); border-radius:18px; background:white; overflow:hidden; box-shadow:0 2px 10px rgba(26,37,48,.045); }
.builder-step-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:13px 15px; background:linear-gradient(135deg,#FBF4E1,#F8EED5); border-bottom:1px solid color-mix(in srgb,var(--accent) 20%,#fff); }
.builder-step-heading h3 { margin-top:3px; font-size:15px; font-weight:600; letter-spacing:-.25px; }
.builder-step-heading .eyebrow { font-size:8px; letter-spacing:.16em; font-weight:700; color:#9A7B1E; }
.builder-step-hint { flex-shrink:0; padding:5px 10px; border-radius:20px; background:white; color:var(--primary); font-size:9.5px; font-weight:600; box-shadow:0 1px 2px rgba(26,37,48,.07); }
.builder-options { display:grid; gap:8px; margin:0; padding:12px; }
.builder-option { display:flex; align-items:center; gap:11px; min-width:0; padding:11px 12px; border:1px solid var(--line); border-radius:13px; background:white; font-size:12px; transition:border-color .18s,background .18s,box-shadow .18s,transform .18s; }
.builder-option:hover { border-color:color-mix(in srgb,var(--primary) 24%,var(--line)); }
.builder-option.selected { border-color:var(--primary); background:color-mix(in srgb,var(--primary) 5%,#fff); box-shadow:0 6px 16px rgba(0,75,135,.10); }
.builder-option:has(input:disabled) { opacity:.45; }
.builder-option input[type="checkbox"] { appearance:none; -webkit-appearance:none; width:20px; height:20px; margin:0; flex:none; border:1.5px solid #C7D0D8; border-radius:7px; background:#fff center/12px 12px no-repeat; transition:background-color .16s,border-color .16s; }
.builder-option input[type="checkbox"]:checked { border-color:var(--primary); background-color:var(--primary); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 8.6 6.4 11.8 12.8 4.6'/%3E%3C/svg%3E"); }
.builder-option-copy { display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.builder-option-copy>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.builder-option>strong { flex-shrink:0; padding:4px 9px; border-radius:20px; background:var(--soft); color:#8C7740; font-size:10px; font-weight:600; font-variant-numeric:tabular-nums; }
.builder-option.selected>strong { background:var(--primary); color:white; }
/* A row with a control (Yes / No, or a levels dropdown) puts the name and price
   on the first line and the control on its own full-width line — the sheet is
   too narrow to keep a readable name beside a wide control. */
.builder-option.addon-choice { flex-wrap:wrap; row-gap:9px; }
.builder-option.addon-choice .yesno-group,
.builder-option.addon-choice .addon-level-picker { flex:1 0 100%; max-width:none; }
/* Yes / No answer for toggle rows — both options stay visible, the chosen one
   fills with the brand colour, so "not added" reads as No instead of a blank box. */
.yesno-group { display:flex; gap:2px; padding:2px; border:1px solid var(--line); border-radius:20px; background:var(--soft); }
.yesno-btn { flex:1; padding:7px 12px; border:0; border-radius:16px; background:transparent; color:#7B8794; font-size:10.5px; font-weight:600; line-height:1.2; text-align:center; cursor:pointer; transition:background .16s,color .16s,box-shadow .16s; }
.yesno-btn:hover:not([aria-pressed="true"]):not(:disabled) { color:var(--primary); }
.yesno-btn[aria-pressed="true"] { background:var(--primary); color:white; box-shadow:0 4px 10px rgba(0,75,135,.18); }
.yesno-btn:disabled { cursor:default; }
/* Levels answer with one dropdown entry; the empty entry clears the row. */
.addon-level-picker { width:100%; padding:8px 32px 8px 12px; border:1px solid var(--line); border-radius:11px; background:white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237B8794' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E") no-repeat right 12px center/9px 9px; color:var(--primary); font-size:11px; font-weight:600; line-height:1.2; -webkit-appearance:none; appearance:none; cursor:pointer; }
.addon-level-picker:hover:not(:disabled) { border-color:color-mix(in srgb,var(--primary) 30%,var(--line)); }
.addon-level-picker:disabled { opacity:.55; cursor:default; }
[dir="rtl"] .addon-level-picker { padding:8px 12px 8px 32px; background-position:left 12px center; }
.builder-qty,.attached-qty { width:54px; height:33px; padding:4px 6px; border:1px solid var(--line); border-radius:10px; background:white; text-align:center; font-size:11px; font-variant-numeric:tabular-nums; }
.builder-qty,.attached-qty { -moz-appearance:textfield; }
.builder-qty::-webkit-outer-spin-button,.builder-qty::-webkit-inner-spin-button,.attached-qty::-webkit-outer-spin-button,.attached-qty::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.builder-option .attached-qty { display:none; }
.builder-option:has(.attached-addon-select:checked) .attached-qty,
.builder-option:has(.sheet-addon-select:checked) .attached-qty { display:block; }
/* − / + around the builder quantity: a step row is a tick box plus, once on,
   a small stepper, so a portion is one tap instead of the numeric keyboard. */
.builder-option:has(.builder-qty-group) { flex-wrap:wrap; row-gap:8px; }
.builder-qty-group { display:none; align-items:center; gap:2px; margin-inline-start:auto; padding:2px; border:1px solid var(--line); border-radius:11px; background:white; }
.builder-option:has(.builder-select:checked) .builder-qty-group { display:inline-flex; }
.builder-qty-btn { display:grid; place-items:center; width:23px; height:23px; padding:0; border:0; border-radius:8px; background:var(--soft); color:var(--primary); font-size:13px; font-weight:700; line-height:1; cursor:pointer; }
.builder-qty-btn:hover { background:color-mix(in srgb,var(--primary) 12%,white); }
.builder-qty-group .builder-qty { width:26px; height:23px; padding:0; border:0; background:transparent; }
.builder-section-label { display:flex; align-items:center; gap:9px; margin:4px 2px 0; color:#8C7740; font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.builder-section-label::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }
.builder-section-label::after { content:''; flex:1; height:1px; background:color-mix(in srgb,var(--accent) 26%,var(--line)); }
.cart-line-extras { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.cart-line-extras span { padding:3px 7px; border-radius:12px; background:var(--soft); color:var(--muted); font-size:9px; line-height:1.35; }
.checkout-item .cart-line-extras { margin-top:5px; }
@media(max-width:760px) {
  .selection-dialog { width:100%; max-width:none; height:100dvh; max-height:100dvh; margin:0; border-radius:0; }
  .selection-dialog-body { padding:24px 20px 12px; }
  .selection-dialog-footer { padding:15px 20px calc(15px + env(safe-area-inset-bottom,0px)); }
}