/* =========================================================================
   كوخ المندي — Kookh Al Mandi | Digital QR Menu
   Vanilla CSS — mobile-first, RTL default, brand: burgundy + camel gold
   Navigation: category-browse grid  <->  chip bar + per-category items
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root{
  --burgundy:#881d2b; --gold:#cda06c; --walnut:#68230b; --teal:#1ca9c9;
  --cream:#f4efe6; --card:#fbf8f2; --ink:#2a1712; --on-dark:#f6efe4;
  --line:rgba(104,35,11,.14);

  --gold-soft:rgba(205,160,108,.18);
  --burgundy-d:#6e1623;
  --muted:#8a7468;
  --shadow-sm:0 2px 8px rgba(42,23,18,.08);
  --shadow-md:0 8px 26px rgba(42,23,18,.14);
  --shadow-lg:0 18px 50px rgba(42,23,18,.28);

  --font-display:"Amiri","Cormorant Garamond",Georgia,serif;
  --font-body:"Tajawal","Almarai","Inter",system-ui,-apple-system,sans-serif;

  --radius:16px; --radius-sm:12px;
  --header-h:56px;          /* sticky main tabs */
  --chips-h:56px;           /* sticky chip bar */
  --ease:cubic-bezier(.2,.7,.2,1);

  --strip-grad:
    repeating-linear-gradient(90deg,
      var(--burgundy) 0 10px, var(--gold) 10px 14px,
      var(--burgundy) 14px 18px, var(--teal) 18px 21px,
      var(--burgundy) 21px 25px, var(--gold) 25px 29px);
}
/* embroidery band — complete symmetric motif, shown UNCROPPED (top/bottom never clipped).
   The whole band is stretched to fill the strip; CSS gradient sits beneath as a fallback. */
.strip-band{
  display:block; width:100%; margin:0; padding:0; line-height:0;
  height:clamp(34px, 4vw, 56px);
  background-color:var(--cream);
  background-image:url("../img/pattern-strip.png"), var(--strip-grad);
  background-size:100% 100%, auto 100%;
  background-repeat:no-repeat, repeat;
  background-position:center;
}
html[lang="en"]{
  --font-display:"Cormorant Garamond","Amiri",Georgia,serif;
  --font-body:"Inter","Tajawal",system-ui,sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body); color:var(--ink); background:var(--cream);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; padding:0; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; border-radius:6px; }
[hidden]{ display:none !important; }

/* Warm linen texture background (mobile/tablet: app fills the screen) */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-color:var(--cream);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(206,160,109,.07), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(136,29,43,.05), transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
}

/* ---------- App shell + responsive width system ----------
   The app is the single width authority; .container only adds matching gutters,
   so hero, tabs, chips, search and content all share the same edges. */
:root{ --gutter:clamp(14px, 3vw, 30px); }
.app{
  max-width:min(100%, 1180px); margin-inline:auto;
  background:linear-gradient(var(--cream), #efe7d8 160%);
  min-height:100vh; position:relative; box-shadow:0 0 60px rgba(42,23,18,.06);
}
.container{ width:100%; padding-inline:var(--gutter); }

/* Responsive grid shared by category-browse + items: 2 / 3 / 4 / 5 cols */
.grid{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr); padding:14px 0 24px; }
@media (min-width:680px){  .grid{ grid-template-columns:repeat(3,1fr); gap:18px; } }
@media (min-width:1024px){ .grid{ grid-template-columns:repeat(4,1fr); gap:22px; } }
@media (min-width:1500px){ .grid{ grid-template-columns:repeat(5,1fr); } }

/* ---------- Laptop / desktop: render the app as a centered "menu card" ---------- */
@media (min-width:1200px){
  body{
    background:
      radial-gradient(circle at 50% -10%, rgba(206,160,108,.18), transparent 40%),
      linear-gradient(160deg, var(--burgundy) 0%, #6e1623 45%, var(--walnut) 100%);
    background-attachment:fixed;
  }
  body::before{ display:none; }            /* let the backdrop show around the card */
  .app{
    min-height:auto; margin-block:30px; border-radius:24px 24px 0 0; overflow:visible;
    box-shadow:0 36px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(206,160,108,.18);
  }
  .hero__stage{ border-radius:24px 24px 0 0; }   /* round hero top to match the card */
}

/* ===========================================================
   Intro splash
   =========================================================== */
.splash{
  position:fixed; inset:0; z-index:1000;
  background:radial-gradient(circle at 50% 40%, var(--burgundy), var(--burgundy-d));
  display:grid; place-items:center; transition:opacity .5s var(--ease), visibility .5s;
}
.splash.hide{ opacity:0; visibility:hidden; }
.splash__inner{ text-align:center; color:var(--on-dark); padding:24px; }
.splash__logo{ width:clamp(180px,52vw,240px); height:auto; margin-inline:auto; animation:popIn .7s var(--ease) both; }
.splash__logo img{ width:100%; height:auto; display:block; }
.splash__name{ font-family:var(--font-display); font-size:2rem; margin:.6rem 0 .2rem; letter-spacing:.5px; animation:fadeUp .6s .25s var(--ease) both; }
.splash__slogan{ color:var(--gold); font-size:1rem; letter-spacing:2px; animation:fadeUp .6s .4s var(--ease) both; }
.splash__strip{ height:14px; width:0; margin:18px auto 0; border-radius:3px; background:var(--strip-grad); animation:stripIn .8s .3s var(--ease) forwards; }
.splash__skip{ margin-top:22px; font-size:.8rem; color:rgba(244,239,230,.7); border:1px solid rgba(244,239,230,.3); padding:6px 16px; border-radius:999px; display:inline-block; }
@keyframes popIn{ from{ transform:scale(.5); opacity:0 } to{ transform:scale(1); opacity:1 } }
@keyframes fadeUp{ from{ transform:translateY(12px); opacity:0 } to{ transform:translateY(0); opacity:1 } }
@keyframes stripIn{ to{ width:min(280px,70%) } }

/* ===========================================================
   Hero — cinematic art stage + circular badge straddling the seam
   =========================================================== */
.hero{ position:relative; }

/* the art stage (full-bleed image + scrims + embers + slogan) */
.hero__stage{
  position:relative; overflow:hidden;
  height:clamp(260px, 40vh, 440px);
  display:flex; align-items:flex-start; justify-content:center;
}
.hero__media{ position:absolute; inset:0; overflow:hidden; }
.hero__art{
  position:absolute; inset:-6% -6%; /* extra bleed so scroll + pointer parallax never show an edge */
  background-position:center 42%; background-size:cover; background-repeat:no-repeat;
  transform:translate3d(var(--px,0px), calc(var(--parallax,0px) + var(--py,0px)), 0) scale(1.04);
  will-change:transform;
}
/* soft warm light that slowly drifts across the art */
.hero__media::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(circle at 32% 38%, rgba(255,214,150,.22), transparent 46%);
  mix-blend-mode:screen;
}
/* top scrim for the language button + slogan legibility */
.hero__scrim-top{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(40,12,8,.30), transparent 30%); }
/* bottom fade so the art melts seamlessly into the cream panel */
.hero__scrim-bottom{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, var(--cream) 0%, rgba(244,239,230,0) 26%); }
/* gold tagline lives in the cream panel under the name (not over the art) */
.identity__tagline{ margin-top:6px; }
.identity__tagline span{
  display:inline-block; color:var(--gold); font-weight:700;
  font-size:clamp(13px,1.5vw,17px); letter-spacing:3px;
  padding:4px 16px; border:1px solid rgba(205,160,108,.55); border-radius:999px;
  background:rgba(205,160,108,.08);
}

/* embers rising from the fire/dish area */
.hero__embers{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.hero__embers .ember{
  position:absolute; bottom:14%; border-radius:50%;
  background:radial-gradient(circle, #ffd9a0, #e8932f 60%, rgba(232,147,47,0));
  opacity:0; animation-name:emberRise; animation-iteration-count:infinite; animation-timing-function:ease-out;
}
@keyframes emberRise{
  0%{ opacity:0; transform:translate(0,0) scale(.7); }
  12%{ opacity:.9; }
  70%{ opacity:.55; }
  100%{ opacity:0; transform:translate(var(--drift,12px), -150px) scale(1.15); }
}

/* ambient cooking steam rising off the dish (center-lower of the art) */
.hero__steam{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.hero__steam .wisp{
  position:absolute; bottom:24%;            /* lower third, over the glowing dish */
  width:clamp(54px,9vw,90px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.5), rgba(255,255,255,0) 70%);
  filter:blur(18px); mix-blend-mode:screen; opacity:0;
  animation-name:steamRise; animation-iteration-count:infinite; animation-timing-function:ease-out;
}
@keyframes steamRise{
  0%{ opacity:0; transform:translate(0,0) scale(.7); }
  22%{ opacity:.20; }
  60%{ opacity:.16; }
  100%{ opacity:0; transform:translate(var(--sway,10px), -120px) scale(var(--wscale,1.3)); }
}

/* circular badge — fully visible, straddling the hero/cream seam */
.hero__badge{
  position:relative; z-index:5; margin:calc(-1 * clamp(43px,5.5vw,60px)) auto 0;
  width:clamp(86px,11vw,120px); height:clamp(86px,11vw,120px);
  border-radius:50%; background:var(--card); border:2px solid var(--gold);
  box-shadow:0 10px 30px rgba(42,23,18,.28); display:grid; place-items:center;
  overflow:hidden;
  animation:badgeIn .7s var(--ease) both;
}
/* tent mark occupies ~60% of the badge → clear padding to the gold ring (never touches it) */
.hero__badge img, .hero__badge svg{ width:60%; height:60%; object-fit:contain; }
/* gold shimmer sweep across the badge (on load + hover) */
.hero__badge::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(206,160,108,.35) 52%, transparent 70%);
  transform:translateX(-120%); animation:shimmer 1.1s .7s ease-out 1;
}
.hero__badge:hover::after{ animation:shimmer 1s ease-out 1; }
@keyframes shimmer{ to{ transform:translateX(120%); } }
@keyframes badgeIn{ 0%{ opacity:0; transform:translateY(8px) scale(.7); } 70%{ transform:translateY(0) scale(1.06); } 100%{ opacity:1; transform:none; } }

.identity{ text-align:center; padding:10px 20px 12px; }
.identity__name{ font-family:var(--font-display); font-size:clamp(22px,3vw,34px); margin:8px 0 0; color:var(--burgundy); line-height:1.2; }
.identity__branch{ color:var(--muted); font-size:clamp(12px,1.4vw,15px); margin-top:3px; }

.actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; padding:8px 16px 16px; }
.action{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:clamp(11px,1.1vw,13px); color:var(--ink); min-width:62px; transition:transform .15s var(--ease); }
.action:active{ transform:scale(.92); }
.action__ico{ width:clamp(46px,5vw,52px); height:clamp(46px,5vw,52px); border-radius:16px; display:grid; place-items:center; background:var(--card); box-shadow:var(--shadow-sm); border:1px solid var(--line); }
.action__ico svg{ width:23px; height:23px; }
/* WhatsApp uses the owner's official-style green tile as the whole icon */
.action--wa .action__ico{ background:none; border:none; box-shadow:none; padding:0; overflow:visible; }
.action--wa .action__ico .wa-icon{ width:100%; height:100%; display:block; filter:drop-shadow(0 3px 8px rgba(0,0,0,.18)); }
.action--call .action__ico{ background:var(--burgundy); color:var(--on-dark); border-color:transparent; }
.action--map .action__ico{ color:var(--burgundy); }
.action--share .action__ico{ color:var(--walnut); }

/* embroidery strip divider BELOW the content panel (never across the art) */
.hero__divider{ margin-top:2px; }

/* Cinematic motion — only when the user allows it */
@media (prefers-reduced-motion: no-preference){
  .hero__art{ animation:kenBurns 24s ease-in-out infinite alternate; }
  .hero__media::after{ animation:lightSweep 16s ease-in-out infinite alternate; }
  .identity{ animation:fadeUp .6s .12s var(--ease) both; }
  .actions{ animation:fadeUp .6s .26s var(--ease) both; }
  /* one-time soft pulse on badges when first shown */
  .item-card__badge{ animation:badgePulse 1.4s var(--ease) 1; }
  /* gold shine sweep across the price tag on appear */
  .price{ position:relative; overflow:hidden; }
  .price::before{
    content:""; position:absolute; top:0; bottom:0; width:40%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform:translateX(-180%); animation:priceShine 1.6s .35s ease-out 1;
  }
}
@keyframes badgePulse{ 0%{ transform:scale(1) } 18%{ transform:scale(1.12) } 36%{ transform:scale(1) } }
@keyframes priceShine{ to{ transform:translateX(320%) } }
@keyframes kenBurns{
  from{ transform:translate3d(var(--px,0px), calc(var(--parallax,0px) + var(--py,0px)), 0) scale(1.0); }
  to{   transform:translate3d(var(--px,0px), calc(var(--parallax,0px) + var(--py,0px)), 0) scale(1.08); }
}
@keyframes lightSweep{ from{ transform:translateX(-12%); opacity:.7; } to{ transform:translateX(16%); opacity:1; } }

/* ===========================================================
   Tabs (sticky) — active = gold fill + walnut text
   =========================================================== */
.tabs{ position:sticky; top:0; z-index:40; display:flex; background:var(--burgundy); box-shadow:var(--shadow-sm); }
.tab{ flex:1; padding:15px 8px; color:rgba(244,239,230,.78); font-weight:700; font-size:.95rem; position:relative; transition:color .2s, background .2s; }
.tab[aria-selected="true"]{ color:var(--walnut); background:var(--gold); }

/* ===========================================================
   Search
   =========================================================== */
.search{ position:relative; margin:14px 0 4px; }
.search input{ width:100%; padding:12px 42px 12px 16px; border:1px solid var(--line); border-radius:999px; background:var(--card); font-family:inherit; font-size:.95rem; color:var(--ink); }
html[dir="ltr"] .search input{ padding:12px 16px 12px 42px; }
.search__ico{ position:absolute; inset-inline-end:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--muted); pointer-events:none; }
html[dir="ltr"] .search__ico{ inset-inline-end:auto; inset-inline-start:14px; }

/* ===========================================================
   STATE A — category browse cards
   =========================================================== */
/* Category card: image on top + clean caption band below (text-free placeholders/photos) */
.cat-card{
  display:flex; flex-direction:column; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease), box-shadow .22s, border-color .22s;
}
.cat-card:hover{ box-shadow:var(--shadow-md), 0 0 0 2px rgba(205,160,108,.35); border-color:var(--gold); transform:translateY(-5px); }
.cat-card:active{ transform:scale(.97); }
.cat-card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.cat-card__media img, .cat-card__media .ph{ width:100%; height:100%; object-fit:cover; transition:transform .45s var(--ease); }
.cat-card:hover .cat-card__media img, .cat-card:hover .cat-card__media .ph{ transform:scale(1.06); }
/* depth gradient so any photo reads richly toward the caption */
.cat-card__scrim{ position:absolute; inset:0; background:linear-gradient(transparent 60%, rgba(40,12,8,.18)); pointer-events:none; }
.cat-card__cap{ padding:12px 10px 14px; display:flex; flex-direction:column; align-items:center; gap:6px; border-top:1px solid rgba(205,160,108,.45); }
.cat-card__name{ font-family:var(--font-display); font-size:clamp(15px,1.7vw,20px); color:var(--burgundy); line-height:1.25; }
/* short gold accent under the name; grows on hover */
.cat-card__name::after{
  content:""; display:block; height:3px; width:26px; margin:6px auto 0; border-radius:3px;
  background:var(--gold); transition:width .25s var(--ease);
}
.cat-card:hover .cat-card__name::after{ width:46px; }

/* ===========================================================
   STATE B — chip bar (sticky) + items
   =========================================================== */
.chips{
  position:sticky; top:var(--header-h); z-index:35;
  background:var(--cream); border-bottom:1px solid var(--line);
  box-shadow:0 4px 12px rgba(42,23,18,.04); margin-inline:calc(-1 * var(--gutter)); /* full-bleed within container */
}
.chips__track{ display:flex; gap:8px; overflow-x:auto; padding:10px var(--gutter); scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.chips__track::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto; padding:8px 16px; border-radius:999px;
  background:var(--card); border:1px solid var(--gold); color:var(--ink);
  font-size:.86rem; font-weight:600; white-space:nowrap; transition:all .2s var(--ease);
}
.chip.active{ background:var(--burgundy); border-color:var(--burgundy); color:var(--cream); box-shadow:var(--shadow-sm); }
/* leading "All / كل الأصناف" chip with back chevron */
.chip--all{ display:inline-flex; align-items:center; gap:6px; background:var(--gold-soft); border-color:var(--gold); color:var(--burgundy); font-weight:700; }
.chip--all svg{ width:15px; height:15px; }
html[dir="ltr"] .chip--all svg{ transform:scaleX(-1); } /* chevron points back in LTR */

/* items heading spans the whole grid */
.items-head{
  grid-column:1/-1; font-family:var(--font-display); font-size:clamp(18px,2.2vw,26px); color:var(--burgundy);
  text-align:center; margin:6px 0 0; padding:6px 0;
  position:relative;
}
.items-head::after{ content:""; display:block; width:90px; height:3px; margin:8px auto 0; border-radius:3px; background:var(--gold); }

/* Staggered reveal as cards enter the viewport (JS adds .in via IntersectionObserver) */
.reveal{ opacity:0; transform:translateY(14px) scale(.985); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ===========================================================
   Item card
   =========================================================== */
.item-card{
  background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  border:1px solid var(--line); display:flex; flex-direction:column; position:relative;
  transition:transform .15s var(--ease), box-shadow .2s, border-color .2s;
}
.item-card:hover{ box-shadow:var(--shadow-md), 0 0 0 2px rgba(205,160,108,.35); border-color:var(--gold); transform:translateY(-5px); }
.item-card:active{ transform:scale(.97); }
.item-card__media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.item-card__media img, .item-card__media .ph{ width:100%; height:100%; object-fit:cover; transition:transform .45s var(--ease); }
.item-card:hover .item-card__media img{ transform:scale(1.06); }
/* depth gradient at the image bottom (drawn under the badges/diet icons) */
.item-card__media::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(transparent 60%, rgba(40,12,8,.18)); }
.item-card__body{ border-top:1px solid rgba(205,160,108,.45); }
.item-card__badge{ position:absolute; z-index:2; top:8px; inset-inline-start:8px; background:var(--burgundy); color:var(--on-dark); font-size:.66rem; font-weight:700; padding:3px 9px; border-radius:999px; box-shadow:var(--shadow-sm); }
.item-card__diet{ position:absolute; z-index:2; top:8px; inset-inline-end:8px; display:flex; gap:4px; font-size:.9rem; }
.item-card__body{ padding:10px 11px 12px; display:flex; flex-direction:column; flex:1; }
.item-card__name{ font-family:var(--font-display); font-size:clamp(14px,1.6vw,18px); color:var(--ink); line-height:1.25; margin:0; }
.item-card__en{ color:var(--muted); font-size:.72rem; margin-bottom:4px; }
.item-card__desc{ font-size:.78rem; color:var(--muted); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:2px 0 0; }
.item-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:10px; }

/* gold price tag */
.price{ display:inline-flex; align-items:baseline; gap:4px; background:var(--gold-soft); color:var(--walnut); font-weight:700; font-size:clamp(13px,1.5vw,16px); padding:4px 10px; border-radius:8px; border:1px solid rgba(205,160,108,.4); white-space:nowrap; }
.price__cur{ font-size:.7rem; opacity:.85; }
.price__from{ font-size:.66rem; font-weight:600; opacity:.8; }
.price--from{ font-size:.82rem; }

.add-btn{ width:34px; height:34px; border-radius:50%; background:var(--burgundy); color:var(--on-dark); display:grid; place-items:center; box-shadow:var(--shadow-sm); transition:transform .15s var(--ease), background .2s; flex:0 0 auto; }
.add-btn:hover{ background:var(--walnut); }
.add-btn:active{ transform:scale(.85); }
.add-btn svg{ width:18px; height:18px; }

/* placeholder block (missing image) */
.ph{ display:grid; place-items:center; gap:6px; text-align:center; padding:8px;
  background:repeating-linear-gradient(135deg, rgba(206,160,109,.12) 0 8px, transparent 8px 16px), linear-gradient(135deg, var(--burgundy), var(--walnut));
  color:var(--gold); }
.ph svg{ width:40%; max-width:64px; height:auto; opacity:.8; }
.ph__label{ font-family:var(--font-display); font-size:.9rem; color:var(--cream); opacity:.9; padding:0 4px; }

/* empty state (search) */
.empty{ grid-column:1/-1; text-align:center; padding:60px 24px; color:var(--muted); }
.empty svg{ width:70px; height:70px; color:var(--gold); opacity:.6; margin-bottom:12px; }

/* optional signature rail */
.rail{ padding:8px 0 4px; }
.rail__head{ display:flex; align-items:center; gap:8px; padding:0 2px 8px; font-family:var(--font-display); color:var(--burgundy); font-size:1.25rem; }
.rail__head svg{ width:20px; height:20px; color:var(--gold); }
.rail__track{ display:flex; gap:14px; overflow-x:auto; padding:4px 2px 14px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.rail__track::-webkit-scrollbar{ display:none; }
.sig-card{ flex:0 0 78%; max-width:300px; scroll-snap-align:start; background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--line); position:relative; }
.sig-card__media{ aspect-ratio:16/10; position:relative; }
.sig-card__media img, .sig-card__media .ph{ width:100%; height:100%; object-fit:cover; }
.sig-card__ribbon{ position:absolute; top:12px; inset-inline-start:-1px; background:var(--gold); color:var(--walnut); font-weight:700; font-size:.72rem; padding:4px 12px; border-radius:0 999px 999px 0; }
html[dir="ltr"] .sig-card__ribbon{ inset-inline-start:auto; inset-inline-end:-1px; border-radius:999px 0 0 999px; }
.sig-card__body{ padding:12px 14px 14px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sig-card__name{ font-family:var(--font-display); font-size:1.2rem; color:var(--burgundy); }

/* ===========================================================
   Details panel
   =========================================================== */
.details{ padding:14px 0 20px; }
.about{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-sm); margin-bottom:14px; }
.about p{ margin:0; }
.status{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; font-weight:700; font-size:.9rem; margin-bottom:14px; }
.status--open{ background:rgba(38,166,91,.14); color:#1f8a4c; }
.status--closed{ background:rgba(106,32,11,.1); color:var(--muted); }
.status__dot{ width:9px; height:9px; border-radius:50%; background:currentColor; }
.status--open .status__dot{ animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(38,166,91,.5) } 50%{ box-shadow:0 0 0 6px rgba(38,166,91,0) } }
.status__next{ font-weight:400; opacity:.85; font-size:.82rem; }
.info-block{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow-sm); margin-bottom:14px; }
.info-block h3{ font-family:var(--font-display); color:var(--burgundy); font-size:1.2rem; margin:0 0 10px; display:flex; align-items:center; gap:8px; }
.info-block h3 svg{ width:18px; height:18px; color:var(--gold); }
.hours-list li{ display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px dashed var(--line); font-size:.9rem; }
.hours-list li:last-child{ border-bottom:none; }
.hours-list .today{ color:var(--burgundy); font-weight:700; }
.hours-list time{ direction:ltr; color:var(--muted); }
.hours-list .today time{ color:var(--burgundy); }
.contact-row{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px dashed var(--line); }
.contact-row:last-child{ border-bottom:none; }
.contact-row svg{ width:18px; height:18px; color:var(--burgundy); flex:0 0 auto; }
.contact-row img{ width:24px; height:24px; border-radius:6px; flex:0 0 auto; }
.contact-row a, .contact-row span{ font-size:.9rem; }
/* contact links in brand burgundy (not blue) */
.contact-row a{ color:var(--burgundy); font-weight:600; }
.socials{ display:flex; gap:12px; flex-wrap:wrap; }
.social{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--burgundy); color:var(--on-dark); box-shadow:var(--shadow-sm); transition:transform .15s var(--ease), background .2s; }
.social:hover{ background:var(--walnut); }
.social:active{ transform:scale(.9); }
.social svg{ width:22px; height:22px; }

/* ===========================================================
   Item modal
   =========================================================== */
.modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end; justify-content:center; visibility:hidden; }
.modal.open{ visibility:visible; }
.modal__overlay{ position:absolute; inset:0; background:rgba(42,23,18,.55); opacity:0; transition:opacity .3s; }
.modal.open .modal__overlay{ opacity:1; }
.modal__sheet{ position:relative; width:100%; max-width:520px; background:var(--card); border-radius:22px 22px 0 0; max-height:92vh; overflow-y:auto; transform:translateY(100%); transition:transform .35s var(--ease); box-shadow:var(--shadow-lg); }
.modal.open .modal__sheet{ transform:translateY(0); }
@media (min-width:560px){ .modal{ align-items:center; } .modal__sheet{ border-radius:22px; max-height:88vh; } }
.modal__media{ aspect-ratio:16/10; position:relative; }
.modal__media img, .modal__media .ph{ width:100%; height:100%; object-fit:cover; }
.modal__close{ position:absolute; top:12px; inset-inline-end:12px; width:36px; height:36px; border-radius:50%; background:rgba(42,23,18,.5); color:#fff; backdrop-filter:blur(4px); display:grid; place-items:center; }
.modal__close svg{ width:18px; height:18px; }
.modal__badge{ position:absolute; bottom:12px; inset-inline-start:16px; background:var(--gold); color:var(--walnut); font-weight:700; font-size:.76rem; padding:4px 12px; border-radius:999px; }
.modal__body{ padding:18px 20px 24px; }
.modal__name{ font-family:var(--font-display); font-size:1.7rem; color:var(--burgundy); margin:0; }
.modal__en{ color:var(--muted); font-size:.9rem; letter-spacing:.5px; }
.modal__diet{ display:flex; gap:8px; margin:10px 0; font-size:1.05rem; }
.modal__desc{ margin:12px 0 16px; color:var(--ink); line-height:1.7; }
.modal__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; }
.modal__price .price{ font-size:1.05rem; padding:6px 12px; }

/* size / variant selector */
.sizes{ margin:8px 0 4px; }
.sizes__label{ font-size:.82rem; color:var(--muted); margin-bottom:8px; }
.sizes__opts{ display:flex; gap:8px; flex-wrap:wrap; }
.size-pill{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; border:1px solid var(--gold); background:var(--card); border-radius:12px; padding:8px 14px; transition:all .18s var(--ease); }
.size-pill span{ font-size:.82rem; font-weight:600; color:var(--ink); }
.size-pill b{ font-size:.78rem; color:var(--walnut); }
.size-pill.active{ background:var(--burgundy); border-color:var(--burgundy); }
.size-pill.active span, .size-pill.active b{ color:var(--cream); }

.btn-wa{ display:inline-flex; align-items:center; gap:8px; background:#25D366; color:#fff; font-weight:700; font-size:.95rem; padding:12px 20px; border-radius:999px; box-shadow:var(--shadow-sm); transition:transform .15s var(--ease), filter .2s; }
.btn-wa:hover{ filter:brightness(.95); }
.btn-wa:active{ transform:scale(.96); }
.btn-wa svg{ width:20px; height:20px; }

/* ===========================================================
   Footer
   =========================================================== */
/* footer: no side padding on the footer itself so the band is full-bleed; content gets its own gutter */
.footer{ background:linear-gradient(var(--burgundy),var(--burgundy-d)); color:var(--on-dark); text-align:center; padding:0 0 26px; margin-top:10px; }
.footer > :not(.footer__strip):not(.footer__logo){ padding-inline:20px; }
/* band sits flush on the burgundy, edge-to-edge, complete motif uncropped */
.footer__strip{
  display:block; width:100%; margin:0; padding:0; line-height:0;
  height:clamp(34px, 4vw, 56px);
  background-color:var(--cream);
  background-image:url("../img/pattern-strip.png"), var(--strip-grad);
  background-size:100% 100%, auto 100%; background-repeat:no-repeat, repeat; background-position:center;
}
.footer__logo{ width:clamp(104px,14vw,132px); height:auto; margin:20px auto 8px; }
.footer__logo img, .footer__logo svg{ width:100%; height:auto; object-fit:contain; }
.footer__name{ font-family:var(--font-display); font-size:1.5rem; color:var(--gold); }
.footer__slogan{ font-size:.86rem; opacity:.85; letter-spacing:1px; }
.footer__socials{ display:flex; gap:14px; justify-content:center; margin:16px 0; }
.footer__socials .social{ background:rgba(244,239,230,.12); }
.footer__socials .social:hover{ background:rgba(244,239,230,.25); }
.footer__credit{ font-size:.76rem; opacity:.75; margin-top:10px; max-width:360px; margin-inline:auto; line-height:1.85; letter-spacing:.2px; }
.footer__by{ color:var(--gold); font-weight:700; white-space:nowrap; }
/* "All rights reserved" on its own subtle second line */
.footer__credit-line{ display:block; opacity:.7; font-size:.7rem; margin-top:3px; }

/* ===========================================================
   Floating controls + toast
   =========================================================== */
.lang-toggle{ position:fixed; top:10px; inset-inline-end:10px; z-index:60; background:var(--card); border:1px solid var(--gold); color:var(--burgundy); font-weight:700; font-size:.82rem; padding:7px 14px; border-radius:999px; box-shadow:var(--shadow-md); }
.to-top{ position:fixed; bottom:18px; inset-inline-start:18px; z-index:60; width:46px; height:46px; border-radius:50%; background:var(--gold); color:var(--walnut); display:grid; place-items:center; box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s, transform .25s var(--ease), visibility .25s; }
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top svg{ width:22px; height:22px; }
.toast{ position:fixed; bottom:80px; inset-inline:0; z-index:300; display:flex; justify-content:center; pointer-events:none; }
.toast__msg{ background:var(--ink); color:var(--on-dark); font-size:.86rem; padding:10px 20px; border-radius:999px; box-shadow:var(--shadow-md); opacity:0; transform:translateY(12px); transition:opacity .3s, transform .3s var(--ease); }
.toast.show .toast__msg{ opacity:1; transform:translateY(0); }

/* ===========================================================
   Reduced motion
   =========================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .hero__embers{ display:none; }
  .hero__steam{ display:none; }
  .hero__art{ transform:none !important; }
}