:root{
  --accent:#C1502E;
  --font-display:'Archivo Expanded', sans-serif;
  --font-body:'Karla', sans-serif;
}
html[data-mode="dark"]{
  --ink:#1C1A17;
  --ink-soft:#2B2822;
  --cream:#FAF7F0;
  --gold:#C9A24B;
  --line: rgba(250,247,240,0.12);
  --muted: rgba(250,247,240,0.6);
}
html[data-mode="light"]{
  --ink:#FAF7F0;
  --ink-soft:#FFFFFF;
  --cream:#211E19;
  --gold:#9A6B22;
  --line: rgba(33,30,25,0.12);
  --muted: rgba(33,30,25,0.6);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
.display{font-family:var(--font-display);}

.page-loader{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink);
  transition:opacity .35s ease, visibility .35s ease;
}
.page-loader.page-loader-hidden{
  opacity:0; visibility:hidden; pointer-events:none;
}
.page-loader-logo{
  width:64px; height:64px; border-radius:50%; object-fit:cover;
  animation:page-loader-pulse 1.4s ease-in-out infinite;
}
.page-loader-spinner{
  width:40px; height:40px;
  border:3px solid var(--line);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:page-loader-spin 0.8s linear infinite;
}
@keyframes page-loader-pulse{
  0%, 100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(0.85); opacity:0.6; }
}
@keyframes page-loader-spin{
  to{ transform:rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .page-loader-logo, .page-loader-spinner{ animation:none; }
}

/* Arabic / RTL: swap in an Arabic-capable font regardless of the chosen
   Latin font pairing, since none of the presets include Arabic glyphs. */
html[dir="rtl"] body{ font-family:'Tajawal', var(--font-body); }
html[dir="rtl"] .display{ font-family:'Tajawal', var(--font-display); }
html[dir="rtl"] .item-name, html[dir="rtl"] .cat-pill, html[dir="rtl"] .cat-sidebar-item,
html[dir="rtl"] .tag, html[dir="rtl"] .item-desc,
html[dir="rtl"] .item-allergens, html[dir="rtl"] .promo-body, html[dir="rtl"] .footer-note{
  font-family:'Tajawal', var(--font-body);
}
/* .item-notes is deliberately excluded above -- it has its own
   configurable font (--notes-font) that would otherwise get silently
   overridden by this rule whenever the page is in Arabic. */
html[dir="rtl"] .item-notes{
  font-family:var(--notes-font, 'Tajawal', var(--font-body));
}
.muted{ color:var(--muted); line-height:1.5; }

/* Banner (single, no carousel) */
.banner{
  position:relative;
  aspect-ratio:var(--banner-aspect-ratio, 1200/400);
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.5) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, var(--ink)) 0%, var(--ink) 70%);
  background-size:cover;
  background-position:center;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:22px 22px 20px;
  overflow:hidden;
}
.banner h1, .banner-slide h1{
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,0.35);
  letter-spacing:0.01em;
}
.banner p, .banner-slide p{
  color:rgba(255,255,255,0.82);
  text-shadow:0 1px 6px rgba(0,0,0,0.3);
}
a.banner-slide{ text-decoration:none; display:flex; flex-direction:column; justify-content:flex-end; cursor:pointer; }

/* Banner carousel: same responsive aspect-ratio approach as the single banner */
.banner-carousel{ position:relative; aspect-ratio:var(--banner-aspect-ratio, 1200/400); overflow:hidden; }
.banner-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  background-color:transparent;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.5) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, var(--ink)) 0%, var(--ink) 70%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px 22px 20px;
  opacity:0; transition:opacity .5s ease;
  pointer-events:none;
}
.banner-slide.active{ opacity:1; pointer-events:auto; z-index:2; }
.banner-click-area{
  flex:1;
  display:flex; flex-direction:column; justify-content:flex-end;
  text-decoration:none; color:inherit;
  min-height:0;
}
.banner-view-btn{
  position:absolute; z-index:4;
  background:rgba(0,0,0,0.45); backdrop-filter:blur(4px);
  color:#fff; font-size:11.5px; font-weight:600; letter-spacing:0.03em;
  padding:6px 14px; border-radius:20px; border:1px solid rgba(255,255,255,0.4);
}
.banner-view-btn-top-right{ top:14px; right:14px; }
.banner-view-btn-top-left{ top:14px; left:14px; }
.banner-view-btn-bottom-right{ bottom:20px; right:14px; }
.banner-view-btn-bottom-left{ bottom:20px; left:14px; }
.banner-view-btn-center{ top:50%; left:50%; transform:translate(-50%, -50%); }
html[dir="rtl"] .banner-view-btn-top-right{ right:auto; left:14px; }
html[dir="rtl"] .banner-view-btn-top-left{ left:auto; right:14px; }
html[dir="rtl"] .banner-view-btn-bottom-right{ right:auto; left:14px; }
html[dir="rtl"] .banner-view-btn-bottom-left{ left:auto; right:14px; }
.banner-dots{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; z-index:5;
}
.banner-dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.4); cursor:pointer; }
.banner-dot.active{ background:#fff; }

.site-topbar{
  position:sticky; top:0; z-index:40;
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px;
  background:var(--topbar-bg, var(--ink));
  color:var(--topbar-text, var(--cream));
  font-family:var(--topbar-font, var(--font-display));
  border-bottom:0.5px solid var(--line);
}
.site-topbar .brand-mark{ color:var(--topbar-text, var(--gold)); }
.site-topbar .branch-pill{ color:var(--topbar-text, var(--cream)); }

.topbar-ticker{
  position:sticky; top:var(--topbar-height, 57px); z-index:39;
  overflow:hidden;
  background:var(--topbar-bg, var(--ink));
  color:var(--topbar-text, var(--cream));
  font-family:var(--topbar-font, var(--font-display));
  border-bottom:0.5px solid var(--line);
  padding:6px 0;
  white-space:nowrap;
}
.topbar-ticker-track{
  font-size:12.5px;
  font-weight:600;
}
.topbar-ticker-track.topbar-ticker-static{
  display:block;
  text-align:center;
}
.topbar-ticker-track.topbar-ticker-scrolling{
  display:inline-flex;
  animation-name:ticker-scroll;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  /* animation-duration is set per-message via an inline style in index.php
     (based on text length) -- deliberately not part of an `animation:`
     shorthand anywhere, so it's never at risk of being implicitly reset
     to 0s by a shorthand declaration elsewhere. */
}
.topbar-ticker-track span{ padding:0 32px; }
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .topbar-ticker-track.topbar-ticker-scrolling{ animation:none; }
}
.brand-mark{
  display:flex; align-items:center; gap:8px;
  font-size:13px; letter-spacing:0.08em;
  color:var(--gold);
}
.logo-img{ width:22px; height:22px; border-radius:50%; object-fit:cover; }
.back-to-landing-btn{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,0.08); color:var(--cream, #FAF7F0);
  font-size:15px; text-decoration:none; flex-shrink:0;
}
.back-to-landing-arrow{ display:flex; align-items:center; justify-content:center; line-height:0; }
.back-to-landing-btn-labeled{
  width:auto; height:auto; border-radius:14px; gap:5px;
  padding:5px 12px 5px 10px; font-size:12px; font-weight:600;
}
html[dir="rtl"] .back-to-landing-btn-labeled{ padding:5px 10px 5px 12px; }
.logo-size-small .logo-img{ width:16px; height:16px; }
.logo-size-medium .logo-img{ width:22px; height:22px; }
.logo-size-large .logo-img{ width:32px; height:32px; }
.branch-pill{
  background:var(--ink-soft);
  border:0.5px solid var(--line);
  color:var(--cream);
  font-size:12px;
  padding:6px 12px;
  border-radius:var(--pill-radius, 100px);
  display:flex; align-items:center; gap:6px;
  cursor:pointer;
}
.lang-switch{
  display:flex; background:var(--ink-soft); border:0.5px solid var(--line);
  border-radius:var(--pill-radius, 100px); overflow:hidden;
}
.lang-switch a{
  padding:6px 10px; font-size:11px; font-weight:700; color:var(--muted);
  text-decoration:none;
}
.lang-switch a.active{ background:var(--accent); color:#fff; }

.branch-menu{
  display:none;
  position:fixed;
  top:64px; right:16px;
  background:var(--ink-soft);
  border:0.5px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  z-index:30;
  min-width:160px;
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
}
html[dir="rtl"] .branch-menu{ right:auto; left:16px; }
.branch-menu.open{ display:block; }
.branch-menu a{
  display:block; padding:10px 14px; font-size:13px; color:var(--cream);
  text-decoration:none; border-bottom:0.5px solid var(--line);
}
.branch-menu a:last-child{ border-bottom:none; }
.branch-menu a.active{ color:var(--gold); }
.branch-menu a:hover{ background:rgba(128,128,128,0.08); }

.banner h1{ margin:0 0 4px; font-size:calc(34px * var(--banner-scale, 1)); line-height:0.95; letter-spacing:-0.01em; font-weight:700; text-shadow:0 2px 12px rgba(0,0,0,0.5); font-family:var(--banner-font, var(--font-display)); }
.banner-slide h1{ margin:0 0 4px; font-size:calc(34px * var(--banner-scale, 1)); line-height:0.95; letter-spacing:-0.01em; font-weight:700; text-shadow:0 2px 12px rgba(0,0,0,0.5); font-family:var(--banner-font, var(--font-display)); }
.banner p, .banner-slide p{ margin:0; font-size:calc(13px * var(--banner-scale, 1)); font-weight:500; font-family:var(--banner-font, var(--font-body)); }

/* Category bar */
.category-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  padding:16px;
}
@media (min-width: 640px){
  .category-grid{ grid-template-columns:repeat(3, 1fr); }
}
.category-grid-tile{
  display:flex; flex-direction:column; align-items:center;
  background:var(--card-bg, var(--ink-soft));
  border:0.5px solid var(--line);
  border-radius:var(--card-radius, 14px);
  padding:14px 10px 12px;
  cursor:pointer;
  font-family:inherit;
  color:var(--cream);
  transition:transform .12s ease;
}
.category-grid-tile:active{ transform:scale(0.96); }
.category-grid-img{
  width:100%; aspect-ratio:1/1;
  border-radius:calc(var(--card-radius, 14px) - 4px);
  background-size:cover; background-position:center;
  margin-bottom:10px;
}
.category-grid-img-empty{
  display:flex; align-items:center; justify-content:center;
  font-size:32px;
  background:var(--ink);
}
.category-grid-name{
  font-family:var(--cat-font, var(--font-display));
  font-size:calc(14px * var(--cat-scale, 1));
  font-weight:700;
  text-align:center;
}
.category-grid-count{
  font-size:11.5px; color:var(--muted); margin-top:2px;
}

.cat-bar-wrap{
  position:sticky; top:var(--topbar-height, 57px); z-index:10;
  background:var(--ink);
  border-bottom:0.5px solid var(--line);
}
.cat-bar-wrap::after{
  content:'';
  position:absolute; top:0; right:0; bottom:0; width:36px;
  background:linear-gradient(90deg, transparent, var(--ink));
  pointer-events:none;
}
.cat-bar{
  display:flex;
  gap:22px;
  overflow-x:auto;
  padding:16px 16px 14px;
  scrollbar-width:none;
}
.cat-bar::-webkit-scrollbar{display:none;}
.cat-pill{
  flex:0 0 auto;
  padding:8px 14px;
  border-radius:var(--card-radius, 6px);
  color:var(--muted);
  font-size:calc(13px * var(--cat-scale, 1));
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
  white-space:nowrap;
  cursor:pointer;
  transition:all .15s ease;
  font-family:var(--cat-font, var(--font-body));
}
.cat-pill.active{
  background:var(--accent);
  color:#151312;
}

/* Responsive nav: sliding top bar (mobile) vs sidebar (desktop) */
.page-layout{ display:flex; gap:28px; max-width:1100px; margin:0 auto; align-items:flex-start; }
.main-col{ flex:1; min-width:0; }
.cat-sidebar{ display:none; flex:0 0 220px; position:sticky; top:20px; padding:20px 0 20px 16px; }
.cat-sidebar-item{
  padding:11px 14px;
  border-radius:6px;
  font-size:calc(13px * var(--cat-scale, 1));
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--muted);
  cursor:pointer;
  margin-bottom:3px;
  font-family:var(--cat-font, var(--font-body));
}
.cat-sidebar-item.active{
  background:var(--accent);
  color:#151312;
}
.cat-sidebar-item:hover{ background:var(--ink-soft); }

/* nav_style: topbar (forced) */
body.nav-topbar .cat-sidebar{ display:none !important; }
body.nav-topbar .cat-bar-wrap{ display:block !important; }

/* nav_style: sidebar (forced) */
body.nav-sidebar .cat-sidebar{ display:block !important; }
body.nav-sidebar .cat-bar-wrap{ display:none !important; }

/* nav_style: auto (sliding bar under ~900px, sidebar above) */
body.nav-auto .cat-bar-wrap{ display:block; }
body.nav-auto .cat-sidebar{ display:none; }
@media (min-width: 900px){
  body.nav-auto .cat-bar-wrap{ display:none; }
  body.nav-auto .cat-sidebar{ display:block; }
}

/* Content */
/* Menu slider: one category per horizontally-swipeable page */
.menu-slider-wrap{ position:relative; }
.slider-arrow{
  display:none;
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  background:var(--ink-soft); border:0.5px solid var(--line); color:var(--cream);
  font-size:20px; line-height:1; cursor:pointer; z-index:5;
  align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
}
.slider-arrow-left{ left:-6px; }
.slider-arrow-right{ right:-6px; }
html[dir="rtl"] .slider-arrow-left{ left:auto; right:-6px; transform:translateY(-50%) scaleX(-1); }
html[dir="rtl"] .slider-arrow-right{ right:auto; left:-6px; transform:translateY(-50%) scaleX(-1); }
.slider-arrow:disabled{ opacity:0.3; cursor:default; }
@media (min-width: 700px){
  .slider-arrow{ display:flex; }
}

.menu-slider{
  display:flex;
  align-items:flex-start;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin:0 -16px;
  transition:height 0.25s ease;
}
.menu-slider::-webkit-scrollbar{ display:none; }
.menu-slide{
  flex:0 0 100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  padding:0 16px;
  min-width:0;
}
@media (min-width: 900px){
  .menu-slider{ margin:0; }
  .menu-slide{ padding:0; }
}

.content{ padding:20px 16px 40px; max-width:720px; margin:0 auto; }
@media (min-width: 900px){
  .cat-sidebar ~ .content, .main-col .content{ max-width:none; padding:20px 24px 40px; }
  .main-col .content:has(.layout-list){ max-width:640px; margin:0 auto; }
}
.section-title{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:28px 0 14px;
}
.section-title:first-child{ margin-top:0; }
.section-title h2{ font-size:calc(20px * var(--cat-scale, 1)); margin:0; letter-spacing:-0.01em; font-family:var(--cat-font, var(--font-display)); }
.section-title span{ font-size:12px; color:var(--muted); }
.subcategory-title{
  font-size:calc(15px * var(--cat-scale, 1));
  font-family:var(--cat-font, var(--font-display));
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin:22px 0 10px;
}
.item-grid + .subcategory-title{ margin-top:26px; }

/* Item grid: layout variants */
.item-grid{ display:grid; gap:12px; }
.item-grid.layout-grid2{ grid-template-columns:repeat(2, 1fr); }
.item-grid.layout-grid3{ grid-template-columns:repeat(2, 1fr); }
@media (min-width: 640px){
  .item-grid.layout-grid3{ grid-template-columns:repeat(3, 1fr); }
}
.item-grid.layout-list{ grid-template-columns:1fr; }

.item-card{
  border-radius:var(--card-radius, 12px);
  border:0.5px solid var(--line);
  background:var(--card-bg, var(--ink-soft));
  overflow:hidden;
  cursor:pointer;
  transition:transform .12s ease;
}
.item-card:active{ transform:scale(0.97); }
.layout-list .item-card{
  border-radius:var(--card-radius, 12px);
  margin-bottom:16px;
}
.layout-list .item-thumb{
  width:100%;
  aspect-ratio:var(--item-aspect-ratio, 16/10);
  border-radius:0;
}
.layout-list .item-info{ padding:14px 16px 16px; }
.item-top-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.item-top-row .item-name{
  font-size:calc(16px * var(--item-scale, 1)); font-weight:700; margin:0;
  -webkit-line-clamp:initial; display:block; overflow:visible;
  font-family:var(--item-font, var(--font-display));
}
.item-top-row .item-price{ font-size:calc(15px * var(--item-scale, 1)); font-weight:700; white-space:nowrap; font-family:var(--item-font, var(--font-body)); color:var(--gold); }
.item-desc{ font-size:calc(13px * var(--desc-scale, 1)); color:var(--desc-color, var(--muted)); line-height:1.6; margin:8px 0 0; font-family:var(--desc-font, var(--font-body)); opacity:var(--desc-opacity, 1); }
.item-notes{
  margin-top:8px;
  font-family:var(--notes-font, inherit);
  font-size:calc(13px * var(--notes-scale, 1));
  font-weight:var(--notes-weight, 400);
  color:var(--notes-color, var(--muted));
  opacity:var(--notes-opacity, 1);
  line-height:1.5;
}
.item-notes p{
  margin:2px 0; font-size:inherit; color:inherit; font-weight:inherit; font-style:italic; line-height:inherit;
}
.item-variant-picker{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:6px;
}
.item-variant-option{
  display:flex; align-items:center; gap:5px;
  padding:5px 10px; border-radius:100px;
  border:0.5px solid var(--line); background:var(--ink);
  font-size:12px; cursor:pointer;
}
.item-variant-option input{ accent-color:var(--accent); width:14px; height:14px; margin:0; }
.item-variant-option:has(input:checked){
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 14%, var(--ink));
}
.item-allergens{
  margin:6px 0 0; font-size:calc(11.5px * var(--allergens-scale, 1)); color:var(--allergens-color, var(--muted)); line-height:1.4;
  font-family:var(--allergens-font, var(--font-body)); opacity:var(--allergens-opacity, 1);
}
.item-modifiers-card{
  margin:8px 0 0; padding:8px 10px;
  background:rgba(128,128,128,0.08); border-radius:8px;
  opacity:var(--addons-opacity, 1);
}
.item-modifiers-card-label{
  margin:0 0 4px; font-size:calc(11px * var(--group-title-scale, 1)); font-weight:var(--group-title-weight, 700);
  text-transform:uppercase; letter-spacing:0.04em; color:var(--group-title-color, var(--gold));
  font-family:var(--group-title-font, var(--font-body));
  opacity:var(--group-title-opacity, 1);
}
.item-modifiers-card-row{
  display:flex; justify-content:space-between; gap:10px;
  font-size:calc(12.5px * var(--addons-scale, 1)); padding:2px 0;
  color:var(--addons-color, var(--cream));
  font-family:var(--addons-font, var(--font-body));
}

.item-thumb{
  width:100%; aspect-ratio:var(--item-aspect-ratio, 4/3);
  object-fit:cover; display:block;
  background-size:cover; background-position:center;
  background-color:rgba(128,128,128,0.08);
  opacity:0; transition:opacity .35s ease;
  filter:brightness(calc(1 - var(--item-darkness, 0) * 0.6));
}
.item-thumb.loaded{ opacity:1; }
.item-thumb-empty{ background-image:none; }
.item-thumb-wrap{ position:relative; }
.item-discount-badge{
  position:absolute; top:8px; left:8px; z-index:2;
  background:#D64545; color:#fff;
  font-size:11px; font-weight:700;
  padding:4px 8px; border-radius:6px;
  letter-spacing:0.02em;
}
html[dir="rtl"] .item-discount-badge{ left:auto; right:8px; }
.item-price-original{
  text-decoration:line-through; color:var(--muted); font-weight:400;
  font-size:0.85em; margin-inline-end:4px;
}
.item-price-final{ color:#D64545; }
#modalPrice .item-price-final{ font-size:1em; font-weight:700; }

.nutrition-facts{
  display:flex; gap:14px; flex-wrap:wrap;
  padding:12px 0; margin-bottom:6px;
  border-bottom:0.5px solid var(--line);
}
.nutrition-item{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-width:52px;
}
.nutrition-emoji{ font-size:20px; line-height:1; }
.nutrition-value{ font-size:13px; font-weight:700; color:var(--cream); }
.nutrition-label{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em; }

.item-stamps{ position:absolute; top:8px; left:8px; z-index:2; display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.item-stamp{
  padding:4px 10px; border-radius:4px;
  font-size:calc(10.5px * var(--tags-scale, 1)); font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  color:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.25);
  font-family:var(--tags-font, var(--font-body));
}
.item-info{ padding:10px 12px 12px; }
.item-name{
  font-size:calc(13.5px * var(--item-scale, 1)); font-weight:600; margin:0 0 6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-family:var(--item-font, var(--font-display));
}
.item-tags{ min-height:18px; margin-bottom:4px; display:flex; flex-wrap:wrap; gap:4px; }
.tag{
  display:inline-flex; align-items:center; gap:4px;
  font-size:calc(10px * var(--tags-scale, 1)); text-transform:uppercase; letter-spacing:0.04em;
  padding:2px 7px; border-radius:var(--pill-radius, 100px);
  font-family:var(--tags-font, var(--font-body));
}
.item-price{ font-size:calc(14px * var(--item-scale, 1)); font-weight:600; color:var(--gold); font-family:var(--item-font, var(--font-body)); }

/* Cart: quantity stepper + floating summary bar (visual only, no submission) */
.qty-stepper{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:8px; padding:4px; border-radius:var(--pill-radius, 100px);
  border:0.5px solid var(--line); background:var(--ink);
  width:fit-content;
}
.qty-stepper-modal{ margin-top:14px; }
.qty-btn{
  width:26px; height:26px; border-radius:50%; border:none;
  background:var(--ink-soft); color:var(--cream);
  font-size:16px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.qty-btn:active{ transform:scale(0.92); }
.qty-count{ min-width:16px; text-align:center; font-size:13px; font-weight:600; }
.btn-select-options{
  margin-top:8px; padding:8px 16px;
  border-radius:var(--pill-radius, 100px);
  border:0.5px solid var(--accent); background:transparent; color:var(--accent);
  font-size:12.5px; font-weight:600; cursor:pointer;
  width:fit-content;
}
.btn-select-options:active{ transform:scale(0.96); }

.cart-bar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:40;
  background:var(--accent); color:#fff;
  border-radius:var(--pill-radius, 100px); padding:12px 20px;
  display:none; align-items:center; justify-content:space-between;
  font-size:13.5px; font-weight:700;
  box-shadow:0 6px 20px rgba(0,0,0,0.3);
  max-width:480px; margin:0 auto;
  cursor:pointer;
}
.cart-bar.visible{ display:flex; }

.cart-summary-modal{
  display:none;
  position:fixed; inset:0; background:rgba(0,0,0,0.6);
  z-index:65;
  align-items:flex-start;
  justify-content:center;
  padding:6vh 16px 16px;
  overflow-y:auto;
}
.cart-summary-modal.open{ display:flex; }
.cart-summary-card{
  background:var(--ink-soft);
  width:100%; max-width:420px;
  border-radius:16px;
  padding:24px 20px 20px;
  position:relative;
  animation: modalDrop .2s ease;
}
.cart-summary-row{
  display:flex; align-items:baseline; gap:10px;
  padding:10px 0; border-bottom:0.5px solid var(--line);
  font-size:13.5px;
}
.cart-summary-qty{ font-weight:700; color:var(--gold); min-width:28px; }
.cart-summary-name{ flex:1; }
.cart-summary-price{ font-weight:600; white-space:nowrap; }
.cart-summary-remove{
  background:none; border:none; color:var(--muted);
  font-size:18px; line-height:1; cursor:pointer;
  padding:2px 4px; margin:0; flex-shrink:0;
}
.cart-summary-remove:hover{ color:var(--accent); }
.cart-summary-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  font-size:16px; font-weight:700;
}
.cart-summary-total span:last-child{ color:var(--gold); }

.footer-note{
  text-align:center;
  font-family:var(--footer-font, var(--font-display));
  font-size:14px;
  font-weight:var(--footer-weight, 700);
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--footer-color, var(--gold));
  margin-top:34px;
  padding-top:20px;
  border-top:1px solid var(--line);
  position:relative;
}
.footer-note::before{
  content:"";
  position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  width:48px; height:2px; background:var(--accent);
}
.empty-note{ text-align:center; color:var(--muted); padding:40px 0; }

/* Item modal: centered popup near the top, not a bottom sheet */
.item-modal{
  display:none;
  position:fixed; inset:0; background:rgba(0,0,0,0.6);
  z-index:50;
  align-items:flex-start;
  justify-content:center;
  padding:6vh 16px 16px;
  overflow-y:auto;
}
.item-modal.open{ display:flex; }
.item-modal-card{
  background:var(--ink-soft);
  width:100%; max-width:480px;
  border-radius:16px;
  overflow:hidden;
  position:relative;
  max-height:88vh;
  overflow-y:auto;
  animation: modalDrop .2s ease;
}
@keyframes modalDrop{
  from{ opacity:0; transform:translateY(-14px); }
  to{ opacity:1; transform:translateY(0); }
}
.item-modal-close{
  position:absolute; top:12px; right:12px;
  width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,0.5); color:#fff; border:none;
  font-size:20px; cursor:pointer; z-index:5;
}
.item-modal-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%;
  background:rgba(0,0,0,0.5); color:#fff; border:none;
  font-size:24px; line-height:1; cursor:pointer; z-index:5;
  display:flex; align-items:center; justify-content:center;
}
.item-modal-nav:disabled{ opacity:0; pointer-events:none; }
.item-modal-prev{ left:10px; }
.item-modal-next{ right:10px; }
html[dir="rtl"] .item-modal-prev{ left:auto; right:10px; transform:translateY(-50%) scaleX(-1); }
html[dir="rtl"] .item-modal-next{ right:auto; left:10px; transform:translateY(-50%) scaleX(-1); }
.item-modal-media{ position:relative; min-height:56px; }
.item-modal-img{
  width:100%; aspect-ratio:16/9;
  background-size:cover; background-position:center;
  background-color:rgba(128,128,128,0.08);
}
.item-modal-body{ padding:18px 20px 24px; }
.item-modal-body h3{ margin:6px 0 8px; font-size:calc(20px * var(--popup-scale, 1)); font-family:var(--popup-font, var(--font-display)); }
.item-modal-body p.muted{ font-size:calc(14px * var(--popup-scale, 1)); font-family:var(--popup-font, var(--font-body)); color:var(--desc-color, var(--muted)); }
.item-modal-price{ font-size:calc(20px * var(--popup-scale, 1)); font-weight:700; color:var(--gold); margin-top:14px; font-family:var(--popup-font, var(--font-body)); }
.item-modal-modifiers{ margin-top:10px; border-top:0.5px solid var(--line); padding-top:10px; }
.item-modal-modifiers .mod-row{ display:flex; justify-content:space-between; font-size:calc(13px * var(--popup-scale, 1)); padding:4px 0; color:var(--muted); }
.item-modal-modifiers .mod-title{ font-size:calc(12px * var(--popup-scale, 1)); text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); margin-bottom:4px; }
.item-modal-modifiers .mod-title-allergens{ color:var(--allergens-color, var(--muted)); font-family:var(--allergens-font, var(--font-body)); opacity:var(--allergens-opacity, 1); }
.item-modal-modifiers .mod-allergens-text{ font-family:var(--allergens-font, var(--font-body)); opacity:var(--allergens-opacity, 1); color:var(--allergens-color, var(--muted)); }
.item-modal-modifiers .mod-title-addons{
  color:var(--group-title-color, var(--gold));
  font-family:var(--group-title-font, var(--font-body));
  font-size:calc(12px * var(--group-title-scale, 1));
  font-weight:var(--group-title-weight, 700);
  opacity:var(--group-title-opacity, 1);
}
.item-modal-modifiers .mod-row-addons{ font-family:var(--addons-font, var(--font-body)); opacity:var(--addons-opacity, 1); color:var(--addons-color, var(--cream)); }

.variant-info-block{
  padding:12px 0; border-top:0.5px solid var(--line);
}
.variant-info-block:first-child{ border-top:none; padding-top:0; }
.variant-info-title{
  font-family:var(--font-display); font-weight:700;
  font-size:15px; /* smaller than the item's own name */
  margin:0 0 6px;
}
.variant-info-name-price{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  margin:0 0 6px;
}
.variant-info-name-price .variant-info-title{ margin:0; }
.variant-info-name-price .variant-info-addon-price{ font-size:15px; }
.variant-info-block .mod-row-addons{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:6px 0;
  font-size:calc(13px * var(--addons-scale, 1));
  font-family:var(--addons-font, var(--font-body));
  color:var(--addons-color, var(--cream));
}
.variant-info-addon-price{
  font-size:calc(14px * var(--addons-scale, 1));
  font-weight:600;
  color:var(--gold);
  font-family:var(--addons-font, var(--font-body));
  white-space:nowrap;
}
.variant-info-group-title{
  margin:8px 0 2px;
  font-size:calc(11px * var(--group-title-scale, 1));
  text-transform:uppercase; letter-spacing:0.04em;
  font-weight:var(--group-title-weight, 700);
  color:var(--group-title-color, var(--gold));
  font-family:var(--group-title-font, var(--font-body));
  opacity:var(--group-title-opacity, 1);
}
.variant-info-block .mod-title-allergens,
.variant-info-block .mod-allergens-text{
  font-size:12px;
  font-family:var(--allergens-font, var(--font-body));
  color:var(--allergens-color, var(--muted));
}
.item-modal-modifiers .mod-row-selectable{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 0; cursor:pointer;
  font-family:var(--addons-font, var(--font-body));
  color:var(--addons-color, var(--cream));
  border-bottom:0.5px solid var(--line);
}
.item-modal-modifiers .mod-row-selectable:last-child{ border-bottom:none; }
.mod-selectable-input{ display:flex; align-items:center; gap:8px; font-size:calc(13.5px * var(--popup-scale, 1)); }
.mod-selectable-input input{ width:17px; height:17px; accent-color:var(--accent); flex-shrink:0; }
.mod-selectable-price{ font-size:calc(12.5px * var(--popup-scale, 1)); color:var(--gold); white-space:nowrap; }

/* Promo popup */
.promo-modal{
  display:none;
  position:fixed; inset:0; background:rgba(0,0,0,0.6);
  z-index:60; align-items:flex-start; justify-content:center; padding:8vh 20px 20px;
  overflow-y:auto;
}
.promo-modal.open{ display:flex; }
.promo-card{
  background:var(--ink-soft);
  width:100%; max-width:min(88vw, var(--promo-max-width, 380px));
  border-radius:16px;
  border:none;
  outline:none;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
  position:relative;
  animation: promoPopIn .5s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-height:88vh;
  overflow-y:auto;
}
@keyframes promoPopIn{
  0%{ transform:scale(0.75) translateY(12px); opacity:0; }
  100%{ transform:scale(1) translateY(0); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .promo-card{ animation:modalDrop .2s ease; }
}
.promo-img{ width:100%; aspect-ratio:var(--promo-aspect-ratio, 800/450); background-size:cover; background-position:center; }
.promo-body{ padding:20px; text-align:center; }
.promo-body h3{ margin:0 0 8px; font-size:19px; }
.promo-cta{
  display:inline-block; margin-top:14px;
  background:var(--accent); color:#fff;
  padding:10px 20px; border-radius:var(--pill-radius, 100px);
  text-decoration:none; font-size:13.5px; font-weight:600;
  animation:promoCtaPulse 1.8s ease-in-out 0.6s infinite;
}
@keyframes promoCtaPulse{
  0%, 100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  50%{ box-shadow:0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce){
  .promo-cta{ animation:none; }
}

@media (min-width: 640px){
  .item-grid.layout-grid2{ grid-template-columns:repeat(2, 1fr); }
}

/* Menu Assistant chat widget */
#menuAssistantBtn{
  position:fixed; bottom:20px; right:20px; z-index:60;
  width:52px; height:52px; border-radius:50%; border:none;
  background:var(--gold, #C1502E); color:#fff;
  font-size:22px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.3); cursor:pointer;
}
html[dir="rtl"] #menuAssistantBtn{ right:auto; left:20px; }
.menu-assistant-panel{
  position:fixed; bottom:82px; right:20px; z-index:61;
  width:min(340px, calc(100vw - 32px)); height:min(460px, calc(100vh - 140px));
  background:var(--ink-soft, #2B2822); border:0.5px solid var(--line); border-radius:14px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,0.35);
  opacity:0; transform:translateY(12px) scale(0.98); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
html[dir="rtl"] .menu-assistant-panel{ right:auto; left:20px; }
.menu-assistant-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.menu-assistant-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:0.5px solid var(--line);
  font-weight:700; font-size:14px; color:var(--cream, #FAF7F0);
}
.menu-assistant-header button{
  background:none; border:none; color:var(--muted); font-size:20px; line-height:1; cursor:pointer; padding:2px 4px;
}
.menu-assistant-messages{ flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.menu-assistant-bubble{
  max-width:85%; padding:8px 12px; border-radius:12px; font-size:13.5px; line-height:1.45;
  white-space:pre-wrap; word-break:break-word;
}
.menu-assistant-bubble-assistant{ align-self:flex-start; background:rgba(255,255,255,0.08); color:var(--cream, #FAF7F0); border-bottom-left-radius:4px; }
.menu-assistant-bubble-user{ align-self:flex-end; background:var(--gold, #C1502E); color:#fff; border-bottom-right-radius:4px; }
html[dir="rtl"] .menu-assistant-bubble-assistant{ align-self:flex-end; border-bottom-left-radius:12px; border-bottom-right-radius:4px; }
html[dir="rtl"] .menu-assistant-bubble-user{ align-self:flex-start; border-bottom-right-radius:12px; border-bottom-left-radius:4px; }
.menu-assistant-typing{ opacity:0.6; }
.menu-assistant-input-row{
  display:flex; gap:8px; padding:10px; border-top:0.5px solid var(--line);
}
.menu-assistant-input-row input{
  flex:1; padding:9px 12px; border-radius:20px; border:0.5px solid var(--line);
  background:rgba(255,255,255,0.05); color:var(--cream, #FAF7F0); font-size:13.5px;
}
.menu-assistant-input-row input:focus{ outline:none; border-color:var(--gold, #C1502E); }
.menu-assistant-input-row button{
  padding:9px 16px; border-radius:20px; border:none; background:var(--gold, #C1502E); color:#fff;
  font-size:13px; font-weight:600; cursor:pointer;
}
.menu-assistant-input-row button:disabled{ opacity:0.5; cursor:default; }

.menu-assistant-item-cards{
  display:flex; flex-direction:column; gap:8px; margin-top:-2px;
}
.menu-assistant-item-card{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,0.06); border:0.5px solid var(--line); border-radius:10px;
  padding:6px; cursor:pointer; transition:background .12s ease;
}
.menu-assistant-item-card:active{ background:rgba(255,255,255,0.12); }
.menu-assistant-item-photo{
  width:44px; height:44px; border-radius:8px; flex-shrink:0;
  background-size:cover; background-position:center;
  background-color:rgba(255,255,255,0.08);
}
.menu-assistant-item-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.menu-assistant-item-name{ font-size:13px; font-weight:600; color:var(--cream, #FAF7F0); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.menu-assistant-item-price{ font-size:12px; color:var(--gold, #C1502E); font-weight:600; }

/* Floating "Rate us" button (bottom-left; the assistant button is bottom-right) */
#ratingBtn{
  position:fixed; bottom:20px; left:20px; z-index:60;
  display:flex; align-items:center; gap:8px; height:48px; padding:0 16px;
  border-radius:24px; background:var(--accent, #C1502E); color:#fff;
  font-size:15px; font-weight:600; text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,0.3);
}
#ratingBtn:active{ transform:scale(.97); }
html[dir="rtl"] #ratingBtn{ left:auto; right:20px; }
@media (max-width:360px){ .rating-btn-label{ display:none; } #ratingBtn{ padding:0; width:48px; justify-content:center; } }

.rating-modal{ position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:12px; }
.rating-modal[hidden]{ display:none; }
.rating-modal-box{ width:min(480px,100%); height:min(680px,100%); background:var(--ink-soft,#2B2822); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 12px 32px rgba(0,0,0,.4); }
.rating-modal-bar{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:0.5px solid var(--line); font-size:13px; }
.rating-modal-bar a{ color:var(--muted); text-decoration:none; }
.rating-modal-bar button{ background:none; border:0; color:inherit; font-size:26px; line-height:1; cursor:pointer; }
.rating-modal iframe{ flex:1; width:100%; border:0; background:#fff; }