/* ========================= THEME LAYER (per-tenant) ======================
   The design tokens below are driven by the white-label config: App.razor
   reads appsettings.json into --wla-* custom properties, and we map them here.
   Each mapping keeps the original hardcoded value as a fallback (used when a
   tenant hasn't set that key). The neutral tokens (surface / line / muted /
   dark-soft) aren't in config — they're derived from the configured palette
   with color-mix() so they track the tenant's background/text colours. */
  :root,
body{
    /* mapped straight from config (BrandColor, BrandDarkColor, …) */
    --brand:        var(--wla-brand-color,            #c0612d);  /* the one accent color  */
    --brand-deep:   var(--wla-brand-darker-color,     #97461c);
    --brand-soft:   var(--wla-brand-color-hover,      #e9c9a8);
    --ink:          var(--wla-brand-fore-color,       #241a12);  /* warm near-black text  */
    --cream:        var(--wla-webapp-background-color, #f5ede0);  /* page background       */
    --dark:         var(--wla-webapp-footer-color,    #1c140d);  /* hero / footer bg      */

    /* derived neutrals — track the configured background/text/footer colours */
    --surface:      color-mix(in srgb, var(--cream) 55%, #fff);          /* cards / raised surfaces */
    --line:         color-mix(in srgb, var(--cream) 82%, var(--ink));    /* hairline borders        */
    --muted:        color-mix(in srgb, var(--ink) 52%, var(--cream));    /* secondary text          */
    --dark-soft:    color-mix(in srgb, var(--dark), #fff 8%);

    --font-display: 'Fraunces', Georgia, serif;
    --font-body:    'Hanken Grotesk', system-ui, sans-serif;

    --radius:       2px;       /* sharp & editorial; bump to 14px for soft brand */
    --maxw:         1180px;

    /* Food-icon texture SHAPE (fork/knife, coffee cup, pizza slice, cupcake, sparkles).
       Used as a CSS mask so the tint comes from --brand at render time — dynamic per
       tenant, no colour baked in. Stroke colour here is irrelevant (mask uses alpha). */
    --food-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 30 v16 M38 30 v16 M46 30 v16 M30 46 h16 M38 46 v34'/%3E%3Cpath d='M64 30 c10 4 10 26 0 32 M64 46 v18'/%3E%3Cpath d='M170 44 h30 v14 a15 15 0 0 1 -30 0 z'/%3E%3Cpath d='M200 47 a8 8 0 0 1 0 14'/%3E%3Cpath d='M166 76 h38'/%3E%3Cpath d='M180 34 q4 -5 0 -10 M190 34 q4 -5 0 -10'/%3E%3Cpath d='M40 176 L84 186 L54 214 Z'/%3E%3Ccircle cx='56' cy='188' r='2.6'/%3E%3Ccircle cx='66' cy='196' r='2.6'/%3E%3Ccircle cx='54' cy='200' r='2.6'/%3E%3Cpath d='M176 196 h30 l-5 24 h-20 z'/%3E%3Cpath d='M176 196 c0 -16 30 -16 30 0'/%3E%3Cpath d='M182 190 q9 -12 18 0'/%3E%3Ccircle cx='191' cy='178' r='3.4'/%3E%3Cpath d='M128 96 v10 M123 101 h10'/%3E%3Cpath d='M110 150 v8 M106 154 h8'/%3E%3Cpath d='M214 128 v8 M210 132 h8'/%3E%3C/g%3E%3C/svg%3E");
  }
  /* ========================================================================= */

  *{ margin:0; padding:0; box-sizing:border-box; }
  :root,
body{
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--cream);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    /* clip (not hidden) so it doesn't create a scroll container that breaks position:sticky on the nav */
    overflow-x:clip;
  }
  img{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; }
  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
  h1,h2,h3{ font-family:var(--font-display); font-weight:500; line-height:1.05; letter-spacing:-0.01em; }
  /* Headings and clickable chrome shouldn't turn into a text selection when clicked/tapped —
     clicking a heading or card was highlighting its text and drawing a selection box. Body copy,
     menu items, prices and addresses stay selectable. */
  h1,h2,h3,h4,.eyebrow,.sec-tag,.nav-links a,.mlink,.brand,.btn,.app-badge,
  .menu-tabs button,.bday,.bs-card,.bs-go{ -webkit-user-select:none; -moz-user-select:none; user-select:none; }
  /* Those same non-selectable headings must not paint a selection highlight either: a stray
     selection range carried over from navigation was making the big hero / "Choose a location"
     titles look pre-selected on load. Transparent ::selection removes the highlight regardless. */
  h1::selection,h1 *::selection,h2::selection,h2 *::selection,
  h3::selection,h3 *::selection,h4::selection,h4 *::selection,
  .eyebrow::selection,.sec-tag::selection,.brand::selection{ background:transparent; }
  /* Blazor's <FocusOnNavigate Selector="h1"> puts tabindex="-1" on the page heading and focuses
     it after every route change (so screen readers announce the new page). That draws a focus
     outline framing the big title. The heading isn't interactive, so hide the ring but keep the
     programmatic focus for accessibility. */
  h1[tabindex]:focus,h1[tabindex]:focus-visible{ outline:none; }

  /* subtle film grain overlay for atmosphere */
  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.04;
    background-image: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='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode:multiply;
  }

  /* ----------------------------- NAV -------------------------------------- */
  .nav{
    position:sticky; top:0; z-index:100;
    background:color-mix(in srgb, var(--cream) 72%, transparent);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
  .brand{ font-family:var(--font-display); font-size:25px; font-weight:600; letter-spacing:.02em; display:flex; align-items:baseline; gap:9px; }
  .brand small{ font-family:var(--font-body); font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); font-weight:600; }
  /* white-label logo image (replaces the text brand when AppLogo* is configured) */
  .brand-logo{ display:flex; align-items:center; }
  .nav .brand-logo img{ height:56px; width:auto; object-fit:contain; }
  footer .brand-logo img{ height:46px; width:auto; object-fit:contain; }
  .nav-links{ display:flex; align-items:center; gap:30px; }
  .nav-links a{ font-size:14px; font-weight:500; letter-spacing:.01em; position:relative; padding:4px 0; color:#4a3d30; transition:color .25s; }
  .nav-links a::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--brand); transition:width .3s ease; }
  .nav-links a:hover{ color:var(--brand); } .nav-links a:hover::after{ width:100%; }
  .nav-right{ display:flex; align-items:center; gap:18px; }
  .lang{ display:flex; align-items:center; gap:2px; font-size:12px; font-weight:600; border:1px solid var(--line); border-radius:40px; padding:4px; }
  .lang button{ padding:4px 11px; border-radius:40px; color:var(--muted); letter-spacing:.04em; transition:all .2s; }
  .lang button.on{ background:var(--ink); color:var(--cream); }
  /* In-nav language dropdown (same look as the chooser's .bs-lang, but inline instead of fixed). */
  .nav-lang{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:40px; padding:5px 12px; }
  .nav-lang i{ font-size:16px; color:var(--brand); }
  .nav-lang select{ border:none; background:transparent; font-family:inherit; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; }
  .nav-lang select:focus{ outline:none; }
  .btn{
    display:inline-flex; align-items:center; gap:8px; background:var(--brand); color:#fff;
    padding:12px 22px; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
    border-radius:var(--radius); transition:transform .2s, background .2s; white-space:nowrap;
  }
  .btn:hover{ background:var(--brand-deep); transform:translateY(-1px); }
  .btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
  .btn-ghost:hover{ background:var(--ink); color:var(--cream); }
  .burger{ display:none; font-size:26px; line-height:1; width:40px; height:40px; align-items:center; justify-content:center; color:var(--ink); }
  .mobile-menu{ display:none; }

  /* ----------------------------- HERO ------------------------------------- */
  .hero{ position:relative; background:var(--dark); color:var(--cream); overflow:hidden; }
  .hero-bg{ position:absolute; inset:0; z-index:0; }
  .hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.42; animation:kenburns 22s ease-in-out infinite alternate; }
  .hero-bg.fallback{ background:radial-gradient(120% 120% at 70% 10%, var(--brand-deep) 0%, #2a1a0e 45%, #140d07 100%); }
  @keyframes kenburns{ from{ transform:scale(1) translate(0,0);} to{ transform:scale(1.12) translate(-2%,-2%);} }
  .hero-inner{ position:relative; z-index:1; padding:118px 0 96px; text-align:center; }
  .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--brand-soft); font-weight:600; margin-bottom:26px; }
  .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:#43d17a; box-shadow:0 0 0 4px rgba(67,209,122,.2); }
  .eyebrow .dot.closed{ background:#d35a5a; box-shadow:0 0 0 4px rgba(211,90,90,.2); }
  .hero h1{ font-size:clamp(36px,8.5vw,118px); font-weight:400; letter-spacing:-0.02em; max-width:16ch; margin:0 auto; }
  .hero h1 em{ font-style:italic; color:var(--brand-soft); }
  .hero p.lead{ font-size:clamp(16px,2vw,20px); max-width:46ch; margin:28px auto 38px; color:#e7dccb; line-height:1.55; }
  .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
  .hero-meta{ display:flex; gap:40px; margin-top:64px; flex-wrap:wrap; justify-content:center; border-top:1px solid rgba(255,255,255,.14); padding-top:30px; }
  .hero-meta div span{ display:block; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--brand-soft); margin-bottom:6px; }
  .hero-meta div strong{ font-family:var(--font-display); font-size:21px; font-weight:500; }

  /* reveal animation */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
  .reveal.in{ opacity:1; transform:none; }
  .hero .reveal{ transition-delay:var(--d,0s); }

  /* ----------------------------- SECTION SHELL ---------------------------- */
  section{ padding:104px 0; }
  .sec-head{ margin-bottom:54px; }
  .sec-tag{ font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--brand); font-weight:700; display:block; margin-bottom:16px; }
  .sec-head h2{ font-size:clamp(34px,5vw,56px); font-weight:400; max-width:18ch; }
  .sec-head h2 em{ font-style:italic; color:var(--brand); }

  /* ----------------------------- ABOUT ------------------------------------ */
  .about{ background:var(--cream); }
  .about-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:72px; align-items:center; }
  .about-copy p{ color:#5b4d3f; margin-bottom:20px; font-size:16.5px; }
  .about-copy p.big{ font-family:var(--font-display); font-size:25px; line-height:1.4; color:var(--ink); margin-bottom:30px; }
  .about-feats{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
  .chip{ border:1px solid var(--line); border-radius:40px; padding:9px 18px; font-size:13px; font-weight:600; color:var(--brand-deep); background:var(--surface); }
  .about-img{ position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; box-shadow:24px 24px 0 -4px var(--brand-soft); }
  .about-img img{ width:100%; height:100%; object-fit:cover; }
  .ph{ width:100%; height:100%; display:grid; place-items:center; text-align:center; background:linear-gradient(135deg,var(--brand) 0%, var(--brand-deep) 100%); color:#fff; }
  .ph span{ font-family:var(--font-display); font-style:italic; font-size:18px; opacity:.85; padding:0 20px; }

  /* ----------------------------- MENU ------------------------------------- */
  .menu{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .menu-tabs{ display:flex; gap:8px; justify-content:center; margin:0 auto 14px; background:var(--cream); padding:6px; border-radius:50px; width:fit-content; border:1px solid var(--line); }
  .menu-tabs button{ padding:12px 30px; border-radius:50px; font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--muted); transition:all .25s; }
  .menu-tabs button.on{ background:var(--ink); color:var(--cream); }
  .menu-note{ text-align:center; color:var(--muted); font-size:14px; margin-bottom:48px; }
  .menu-panel{ display:none; } .menu-panel.on{ display:block; animation:fade .5s ease; }
  @keyframes fade{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

  .menu-cols{ display:grid; grid-template-columns:1fr 1fr; gap:56px 80px; }
  .mgroup h3{ font-size:24px; color:var(--brand-deep); margin-bottom:6px; }
  .mgroup .gline{ height:1px; background:var(--line); margin:14px 0 22px; }
  .mitem{ display:flex; align-items:baseline; gap:12px; margin-bottom:20px; }
  .mitem .mname{ font-weight:600; font-size:16px; }
  .mitem .mdesc{ display:block; font-size:13.5px; color:var(--muted); font-weight:400; margin-top:3px; }
  .mitem .leader{ flex:1; border-bottom:1.5px dotted var(--line); transform:translateY(-4px); }
  .mitem .mprice{ font-family:var(--font-display); font-weight:500; font-size:17px; color:var(--ink); white-space:nowrap; }
  .tag-v{ font-size:10px; font-weight:700; color:#4f8a3d; border:1px solid #bcd9af; border-radius:3px; padding:1px 5px; letter-spacing:.05em; vertical-align:middle; margin-left:6px; }

  /* lunch buffet feature card */
  .buffet{ display:grid; grid-template-columns:1.05fr 1fr; gap:0; border:1px solid var(--line);
    border-radius:20px; overflow:hidden; background:var(--surface); box-shadow:0 18px 50px rgba(28,20,13,.09); }
  .buffet-img{ min-height:440px; position:relative; }
  .buffet-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  /* soft vignette so text/badge always read on the photo */
  .buffet-img::after{ content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 42%); }
  /* floating price badge on the photo */
  .buffet-badge{ position:absolute; left:26px; bottom:26px; z-index:1; text-align:center;
    background:var(--dark); color:#fff; border-radius:16px; padding:14px 22px; box-shadow:0 14px 34px rgba(0,0,0,.34); }
  .buffet-badge small{ display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--brand-soft); }
  .buffet-badge b{ display:block; font-family:var(--font-display); font-size:34px; font-weight:500; line-height:1.15; }
  .buffet-badge span{ display:block; font-size:10.5px; letter-spacing:.06em; color:#cdbfae; }
  .buffet-body{ padding:52px 54px; display:flex; flex-direction:column; justify-content:center; }
  .buffet-body h2{ font-size:clamp(30px,3.6vw,42px); margin-top:14px; }
  .buffet-desc{ color:var(--muted); font-size:15px; line-height:1.65; margin-top:18px; max-width:46ch; }
  .buffet-hours{ margin-top:32px; border-top:1px solid var(--line); padding-top:24px; }
  .buffet-hours strong{ display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brand); margin-bottom:14px; }
  .bhours-list{ list-style:none; display:flex; flex-direction:column; gap:10px; max-width:340px; }
  .bhours-list li{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; font-size:14.5px; }
  .bhours-list .bh-day{ font-weight:700; color:var(--brand-deep); }
  .bhours-list .bh-time{ color:var(--ink); font-variant-numeric:tabular-nums; }

  /* -------- lunch buffet: day selector cards + themed category cards -------- */
  .bday-nav{ display:flex; flex-wrap:nowrap; justify-content:center; gap:12px; margin-top:36px; }
  /* Prefer 158px each but allow shrinking (flex-shrink:1, min-width:0) so all 7 days stay on
     one row when the buffet runs every day; few days keep their natural width and stay centered. */
  .bday{ position:relative; text-align:left; flex:0 1 158px; min-width:0; padding:15px 20px; border-radius:16px;
    border:1px solid var(--line); background:var(--surface);
    transition:transform .22s, box-shadow .22s, border-color .22s, background .22s; }
  .bday .bday-name,.bday .bday-theme{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bday:hover{ transform:translateY(-3px); border-color:var(--brand); box-shadow:0 14px 30px rgba(28,20,13,.11); }
  .bday .bday-name{ display:block; font-family:var(--font-display); font-size:20px; font-weight:500; color:var(--ink); line-height:1.1; }
  .bday .bday-theme{ display:block; margin-top:5px; font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--brand); }
  .bday.on{ background:var(--dark); border-color:var(--dark); box-shadow:0 18px 34px rgba(28,20,13,.24); }
  .bday.on .bday-name{ color:#fff; }
  .bday.on .bday-theme{ color:var(--brand-soft); }
  .bday-badge{ position:absolute; top:-9px; right:14px; font-size:9px; font-weight:800; letter-spacing:.12em;
    text-transform:uppercase; color:#fff; background:var(--brand); padding:3px 10px; border-radius:20px;
    box-shadow:0 5px 12px color-mix(in srgb, var(--brand) 55%, transparent); }

  .bday-head{ text-align:center; margin:38px 0 32px; }
  .bday-head h3{ font-family:var(--font-display); font-style:italic; font-weight:500;
    font-size:clamp(24px,3.4vw,34px); color:var(--brand-deep); }
  .bday-head h3 span{ color:var(--brand); font-style:normal; }
  .bday-price{ margin-top:10px; font-family:var(--font-display); font-size:26px; font-weight:500; color:var(--brand); }
  .bday-price small{ font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.04em; margin-left:2px; }

  .bmenu{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:start; }
  .bcat{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:18px;
    padding:30px 28px 24px; box-shadow:0 10px 30px rgba(28,20,13,.05); overflow:hidden;
    transition:transform .25s, box-shadow .25s; }
  .bcat::before{ content:''; position:absolute; left:0; top:0; width:100%; height:4px;
    background:linear-gradient(90deg, var(--brand), var(--brand-soft)); }
  .bcat:hover{ transform:translateY(-4px); box-shadow:0 24px 46px rgba(28,20,13,.13); }
  .bcat-title{ font-family:var(--font-display); font-size:22px; font-weight:500; color:var(--brand-deep);
    margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
  .bitem{ padding:13px 0; border-bottom:1px dashed color-mix(in srgb, var(--line) 65%, transparent); }
  .bitem:last-child{ border-bottom:none; padding-bottom:2px; }
  .bitem-main{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .bname{ font-weight:600; font-size:15.5px; color:var(--ink); }
  .bdesc{ font-size:13px; color:var(--muted); margin-top:4px; line-height:1.5; }
  /* dietary / protein chips, colour-coded from the tag code (see BuffetTagClass) */
  .btag{ font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    padding:2px 9px; border-radius:20px; white-space:nowrap; }
  .btag.veg  { color:#3f7d2e; background:#e8f2e0; }
  .btag.vegan{ color:#2f7d4f; background:#dcf1e5; }
  .btag.meat { color:#a6552a; background:#f6e7db; }
  .btag.sea  { color:#2f6d99; background:#dcebf5; }
  .btag.other{ color:var(--brand-deep); background:var(--cream); }

  /* ----------------------------- GALLERY ---------------------------------- */
  .gallery{ background:var(--cream); }
  .gal-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px; }
  .gcell{ overflow:hidden; border-radius:var(--radius); cursor:pointer; position:relative; }
  .gcell.tall{ grid-row:span 2; } .gcell.wide{ grid-column:span 2; }
  .gcell img,.gcell .ph{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
  .gcell:hover img,.gcell:hover .ph{ transform:scale(1.07); }
  .gcell::after{ content:'+'; position:absolute; inset:0; display:grid; place-items:center; font-size:30px; color:#fff; background:rgba(28,20,13,0); opacity:0; transition:.35s; }
  .gcell:hover::after{ background:rgba(28,20,13,.32); opacity:1; }

  /* lightbox */
  .lightbox{ position:fixed; inset:0; z-index:2000; background:rgba(20,13,7,.92); display:none; place-items:center; padding:40px; }
  .lightbox.on{ display:grid; }
  .lightbox img{ max-width:90vw; max-height:86vh; border-radius:var(--radius); }
  .lightbox .close{ position:absolute; top:24px; right:30px; color:#fff; font-size:34px; cursor:pointer; z-index:2; }
  .lightbox .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px;
    display:grid; place-items:center; font-size:40px; line-height:1; color:#fff;
    background:rgba(255,255,255,.12); border-radius:50%; cursor:pointer; transition:background .2s; z-index:2; }
  .lightbox .lb-nav:hover{ background:rgba(255,255,255,.26); }
  .lightbox .lb-prev{ left:24px; } .lightbox .lb-next{ right:24px; }
  .lightbox .lb-count{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); color:#fff;
    font-size:13px; letter-spacing:.06em; background:rgba(0,0,0,.42); padding:6px 15px; border-radius:40px; }

  /* --------------------- APP-STORE BADGES (universal) --------------------- */
  /* Solid-dark badges so they read on any background (dark hero + light chooser). */
  .app-badges{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
  .app-badge{ display:inline-flex; align-items:center; gap:10px; background:#000; color:#fff;
    border:1px solid rgba(255,255,255,.18); border-radius:11px; padding:9px 17px;
    transition:transform .2s, box-shadow .2s; }
  .app-badge:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.3); }
  .app-badge svg{ width:26px; height:26px; fill:#fff; flex-shrink:0; }
  .app-badge small{ display:block; font-size:10px; line-height:1.1; color:#cbcbcb; letter-spacing:.02em; }
  .app-badge b{ display:block; font-size:15px; font-weight:600; line-height:1.2; }
  .hero-badges{ margin-top:36px; }

  /* ----------------------------- APP STRIP -------------------------------- */
  .app{ background:var(--dark); color:var(--cream); }
  .app-grid{ display:grid; grid-template-columns:1fr auto; gap:50px; align-items:center; }
  /* Centered variant of the app strip. */
  .app-center{ max-width:640px; margin:0 auto; text-align:center; }
  .app-center h2{ margin:0 auto; }
  .app .app-center p{ margin-left:auto; margin-right:auto; }
  .app-center .stores{ justify-content:center; }
  .app h2{ font-size:clamp(30px,4vw,46px); font-weight:400; max-width:16ch; }
  .app h2 em{ font-style:italic; color:var(--brand-soft); }
  .app p{ color:#cdbfae; margin:18px 0 30px; max-width:42ch; }
  .stores{ display:flex; gap:14px; flex-wrap:wrap; }
  .store{ display:flex; align-items:center; gap:11px; border:1px solid rgba(255,255,255,.25); border-radius:8px; padding:11px 18px; transition:.2s; }
  .store:hover{ background:rgba(255,255,255,.08); }
  .store svg{ width:24px; height:24px; fill:var(--cream); }
  .store small{ display:block; font-size:10px; color:#b8a890; letter-spacing:.04em; }
  .store b{ font-size:15px; font-weight:600; }
  .app-vis{ font-family:var(--font-display); font-size:120px; color:var(--brand); opacity:.25; }

  /* ----------------------------- CONTACT ---------------------------------- */
  .contact{ background:var(--surface); }
  .contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:72px; }
  .info-block{ margin-bottom:30px; }
  .info-block span{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--brand); font-weight:700; display:block; margin-bottom:8px; }
  .info-block p,.info-block a{ font-size:16.5px; color:var(--ink); }
  .hours-row{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--line); font-size:14.5px; max-width:340px; }
  .hours-row.today{ color:var(--brand-deep); font-weight:700; }
  .hours-cols{ display:grid; grid-template-columns:1fr; gap:34px; }

  /* facilities / amenities icons (Car Parking, Wheelchair, Pet, Smoking) */
  .amenities{ display:grid; grid-template-columns:1fr 1fr; gap:24px 16px; max-width:340px; margin:6px 0 34px; }
  .amenity{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
  .amenity i{ font-size:30px; color:var(--brand); line-height:1; }
  .amenity span{ font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--brand); }

  form{ background:var(--cream); padding:40px; border-radius:var(--radius); border:1px solid var(--line); }
  .frow{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .field{ position:relative; margin-bottom:18px; }
  .field input,.field select,.field textarea{
    width:100%; padding:16px 14px 8px; border:1px solid var(--line); border-radius:var(--radius);
    background:var(--surface); font-family:inherit; font-size:15px; color:var(--ink); transition:border .2s;
  }
  .field textarea{ min-height:96px; resize:none; overflow:hidden; padding-top:22px; }
  .field label{ position:absolute; left:8px; top:14px; padding:0 6px; font-size:14px; color:var(--muted); pointer-events:none; transition:.18s; }
  .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--brand); }
  .field input:focus+label,.field input:not(:placeholder-shown)+label,
  .field textarea:focus+label,.field textarea:not(:placeholder-shown)+label,
  .field select:focus+label,.field select:valid+label{ top:5px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); background:var(--surface); }
  form .btn{ width:100%; justify-content:center; padding:16px; margin-top:6px; }
  .form-ok{ display:none; text-align:center; padding:30px; color:#4f8a3d; font-weight:600; }
  .form-ok.on{ display:block; }
  .form-err{ color:#c0392b; font-size:13.5px; font-weight:600; margin:4px 0 10px; }

  /* ----------------------------- BRANCH CHOOSER (BranchSelect page) ------- */
  .bs-lang{ position:fixed; top:20px; right:24px; z-index:200; display:inline-flex; align-items:center; gap:8px;
    background:var(--surface); border:1px solid var(--line); border-radius:40px; padding:8px 14px; box-shadow:0 4px 14px rgba(0,0,0,.06); }
  .bs-lang i{ font-size:18px; color:var(--brand); }
  .bs-lang select{ border:none; background:transparent; font-family:inherit; font-size:14px; font-weight:600;
    color:var(--ink); cursor:pointer; padding-right:2px; }
  .bs-lang select:focus{ outline:none; }
  .bs-wrap{ min-height:100vh; padding:clamp(48px,9vh,110px) 0 80px; }
  .bs-head{ text-align:center; max-width:680px; margin:0 auto 48px; }
  .bs-logo{ height:84px; width:auto; margin:0 auto 24px; object-fit:contain; }
  .bs-head h1{ font-size:clamp(34px,6vw,58px); margin:8px 0 14px; }
  .bs-head .lead{ color:var(--muted); }
  .bs-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; max-width:1140px; margin:0 auto; }
  .bs-card{ display:flex; flex-direction:column; text-align:left; padding:0; overflow:hidden;
    background:var(--cream,#fff); border:1px solid rgba(0,0,0,.08); border-radius:18px; cursor:pointer;
    transition:transform .2s, box-shadow .2s, border-color .2s; }
  .bs-card:hover{ transform:translateY(-4px); border-color:var(--brand); box-shadow:0 20px 44px rgba(0,0,0,.14); }
  .bs-banner{ position:relative; aspect-ratio:16/9; background:var(--brand-soft,#eee); overflow:hidden; }
  .bs-banner img{ width:100%; height:100%; object-fit:cover; }
  .bs-banner-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    color:var(--brand); font-size:46px; opacity:.55; }
  .bs-rating{ position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; gap:4px;
    background:rgba(0,0,0,.62); color:#fff; font-size:13px; font-weight:600; padding:5px 10px; border-radius:20px; }
  .bs-rating i{ color:#ffc83d; } .bs-rating small{ opacity:.8; font-weight:500; }
  .bs-discount{ position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:5px;
    background:var(--brand); color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.01em; padding:5px 11px; border-radius:20px; }
  .bs-discount i{ font-size:13px; }
  .bs-body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
  .bs-body h3{ font-size:21px; }
  .bs-addr,.bs-meta{ display:flex; align-items:flex-start; gap:6px; font-size:13.5px; color:var(--muted); }
  .bs-addr i,.bs-meta i{ color:var(--brand); margin-top:2px; }
  .bs-about{ font-size:14px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .bs-go{ margin-top:auto; padding-top:10px; display:inline-flex; align-items:center; gap:7px;
    color:var(--brand); font-weight:600; font-size:14.5px; }
  .bs-card:hover .bs-go i{ transform:translateX(4px); } .bs-go i{ transition:transform .2s; }
  .bs-loading{ display:flex; flex-direction:column; align-items:center; gap:18px; padding:70px 0; color:var(--muted); }
  .bs-empty{ text-align:center; padding:70px 0; color:var(--muted); } .bs-empty i{ font-size:46px; color:var(--brand); display:block; margin-bottom:14px; }
  .spinner{ width:46px; height:46px; border-radius:50%; border:4px solid var(--brand-soft,#e9c9a8);
    border-top-color:var(--brand); animation:bs-spin .8s linear infinite; }
  @keyframes bs-spin{ to{ transform:rotate(360deg); } }

  /* --------- dynamic food-icon texture on the branch chooser (/) only -------
     A masked overlay tinted with --brand (so it re-tints per tenant). The mask
     shape is --food-mask; the tile repeats to texture the page and slowly drifts
     so it feels alive rather than a static print. The overlay sits behind the
     content (which we lift to z-index:1). Only the chooser page uses it. */
  .bs-wrap{ position:relative; }
  .bs-wrap::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-color:var(--brand);
    opacity:.16;
    -webkit-mask-image:var(--food-mask); mask-image:var(--food-mask);
    -webkit-mask-repeat:repeat; mask-repeat:repeat;
    -webkit-mask-size:220px 220px; mask-size:220px 220px;
    -webkit-mask-position:0 0; mask-position:0 0;
    animation:food-drift 45s linear infinite;
  }
  /* keep the actual content above the texture */
  .bs-wrap > *{ position:relative; z-index:1; }
  /* seamless diagonal drift: move exactly one tile so the loop is invisible */
  @keyframes food-drift{
    from{ -webkit-mask-position:0 0; mask-position:0 0; }
    to{ -webkit-mask-position:220px 220px; mask-position:220px 220px; }
  }
  @media (prefers-reduced-motion: reduce){ .bs-wrap::before{ animation:none; } }

  /* ----------------------------- FOOTER ----------------------------------- */
  footer{ background:var(--dark); color:#cdbfae; padding:80px 0 30px; }
  .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:50px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.12); }
  footer .brand{ color:var(--cream); margin-bottom:18px; }
  footer h4{ color:var(--cream); font-family:var(--font-body); font-size:13px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:18px; }
  footer a{ color:#cdbfae; transition:color .2s; } footer a:hover{ color:var(--brand-soft); }
  .foot-hours div{ display:flex; justify-content:space-between; font-size:13.5px; padding:5px 0; max-width:230px; }
  .badges{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:20px; }
  .badge{ font-size:11px; letter-spacing:.06em; border:1px solid rgba(255,255,255,.2); border-radius:5px; padding:7px 12px; color:#cdbfae; display:inline-flex; align-items:center; gap:6px; }
  .foot-bottom{ display:flex; justify-content:space-between; padding-top:26px; font-size:12.5px; color:#897a68; flex-wrap:wrap; gap:10px; }

  /* "Powered by Eetify" white-label credit in the footer's bottom bar (replaces the old text). */
  .powered-by{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; transition:opacity .2s; }
  .powered-by:hover{ opacity:.82; }
  .powered-by span{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#b3a48f; }
  /* The PNG has transparent padding above the emblem; a negative top margin pulls it up so the
     logo doesn't sit low with a big gap. Bottom margin trimmed too so the footer bar stays tight. */
  .powered-by img{ height:64px; width:auto; display:block; margin-top:-14px; margin-bottom:-8px; }

  /* ----------------------------- RESPONSIVE ------------------------------- */
  @media(max-width:900px){
    .nav-links{ display:none; }
    .burger{ display:flex; }
    .nav-right > .btn{ display:none; }            /* book button moves into the menu */

    .mobile-menu{
      display:flex; flex-direction:column;
      position:fixed; top:74px; left:0; right:0; bottom:0; z-index:98;
      background:var(--cream); padding:32px 28px;
      transform:translateX(100%); transition:transform .38s cubic-bezier(.2,.7,.2,1);
      overflow-y:auto;
    }
    .mobile-menu.open{ transform:none; }
    .mobile-menu a.mlink{
      font-family:var(--font-display); font-size:28px; font-weight:500;
      padding:16px 0; border-bottom:1px solid var(--line); color:var(--ink);
    }
    .mobile-menu .btn{ margin-top:28px; justify-content:center; padding:17px; font-size:14px; }

    .bs-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:820px; }
    .about-grid,.menu-cols,.buffet,.app-grid,.contact-grid{ grid-template-columns:1fr; gap:40px; }
    footer{ padding:60px 0 30px; }
    .foot-grid{ grid-template-columns:1fr 1fr; gap:36px 32px; }

    /* category pills: one horizontally-scrollable row instead of wrapping to many lines.
       Uses the .alc-nav ancestor so it beats the base .alc-pills rule that's defined later in the file. */
    .alc-nav{ position:sticky; } /* keep it the containing block for the fade below */
    .alc-nav .alc-pills{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; }
    .alc-nav .alc-pills::-webkit-scrollbar{ display:none; }
    .alc-nav .alc-pill{ flex:0 0 auto; scroll-snap-align:start; }
    /* soft fade on the right edge hinting the row scrolls for more categories */
    .alc-nav::after{ content:''; position:absolute; top:1px; right:0; bottom:1px; width:46px; pointer-events:none;
      background:linear-gradient(to right, transparent, var(--surface)); z-index:2; }
    .bmenu{ grid-template-columns:1fr 1fr; gap:20px; }
    /* on smaller screens 7 days can't fit one row, so allow wrapping again */
    .bday-nav{ flex-wrap:wrap; }
    .bday{ flex:0 1 auto; min-width:132px; padding:13px 18px; }
    .about-img{ box-shadow:14px 14px 0 -4px var(--brand-soft); }
    .app-vis{ display:none; }
    .buffet-badge{ left:20px; bottom:20px; padding:12px 18px; }
    .buffet-badge b{ font-size:28px; }
    .buffet-body{ padding:38px 28px; }
    .gal-grid{ grid-template-columns:repeat(2,1fr); }
    .frow{ grid-template-columns:1fr; }
    section{ padding:72px 0; }
    .hero-inner{ padding:84px 0 64px; }
    .hero-meta{ gap:28px; margin-top:44px; }
    form{ padding:28px 22px; }

    /* lightbox: tighter padding, smaller arrows closer to the edges */
    .lightbox{ padding:20px; }
    .lightbox img{ max-width:94vw; max-height:82vh; }
    .lightbox .close{ top:14px; right:18px; font-size:30px; }
    .lightbox .lb-nav{ width:44px; height:44px; font-size:32px; }
    .lightbox .lb-prev{ left:12px; } .lightbox .lb-next{ right:12px; }
  }
  @media(max-width:520px){
    .wrap{ padding:0 20px; }
    .nav-inner{ height:64px; }
    .mobile-menu{ top:64px; }
    .brand{ font-size:21px; } .brand small{ display:none; }
    .bs-grid{ grid-template-columns:1fr; max-width:420px; }
    .foot-grid{ grid-template-columns:1fr; gap:34px; }
    .foot-hours div{ max-width:none; }
    .hero-cta{ flex-direction:column; align-items:stretch; }
    .hero-cta .btn{ justify-content:center; }
    .gal-grid{ grid-template-columns:1fr; grid-auto-rows:220px; }
    .gcell.tall,.gcell.wide{ grid-row:auto; grid-column:auto; }
    .buffet-price b{ font-size:44px; }
    .bmenu{ grid-template-columns:1fr; }
    .bday{ flex:1 1 auto; min-width:calc(50% - 7px); }

    /* lightbox: drop the arrows into a bottom bar so they never cover the photo */
    .lightbox{ padding:12px; }
    .lightbox img{ max-width:96vw; max-height:76vh; }
    .lightbox .lb-nav{ width:42px; height:42px; font-size:28px; top:auto; bottom:16px; transform:none; }
    .lightbox .lb-prev{ left:20px; } .lightbox .lb-next{ right:20px; }
    .lightbox .lb-count{ bottom:24px; }
  }

  /* ===================== À LA CARTE — category layout ===================== */
  /* sticky pill nav of categories */
  .alc-nav{ position:sticky; top:73px; z-index:60; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:0 -28px 0; padding:12px 28px; }
  .alc-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; list-style:none; max-width:var(--maxw); margin:0 auto; }
  .alc-pill{ font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); padding:8px 16px; border-radius:40px; cursor:pointer; transition:background .2s,color .2s; white-space:nowrap; }
  .alc-pill:hover{ background:var(--cream); }
  .alc-pill.on{ background:var(--brand); color:#fff; }

  /* per-category banner */
  .alc-cat{ padding-top:46px; scroll-margin-top:140px; }
  .alc-banner{ position:relative; height:300px; border-radius:var(--radius); overflow:hidden; display:grid; place-items:center; background:var(--dark); }
  .alc-banner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
  .alc-banner h3{ position:relative; z-index:1; color:var(--cream); font-family:var(--font-body); font-weight:700; font-size:clamp(26px,4vw,46px); text-transform:uppercase; letter-spacing:.12em; text-align:center; padding:14px 30px; border-top:1px solid rgba(255,255,255,.55); border-bottom:1px solid rgba(255,255,255,.55); }

  /* 2-column item list with circular thumbnails */
  .alc-items{ display:grid; grid-template-columns:1fr 1fr; gap:4px 48px; margin-top:30px; }
  .alc-item{ display:flex; align-items:center; gap:16px; padding:10px; border-radius:12px; transition:background .2s; }
  .alc-item:hover{ background:var(--cream); }
  .alc-thumb{ width:80px; height:80px; min-width:80px; border-radius:50%; background:var(--cream) center/cover no-repeat; box-shadow:0 4px 14px rgba(28,20,13,.08); }
  .alc-text{ flex:1 1 auto; min-width:0; }
  .alc-item .nm{ font-weight:600; font-size:16px; color:var(--ink); line-height:1.35; }
  .alc-desc{ display:block; margin-top:6px; font-size:13.5px; font-weight:400; color:var(--muted); line-height:1.45; }
  /* item badges — chef's special / new / discount % (matches admin) */
  .alc-badge{ display:inline-flex; align-items:center; gap:4px; vertical-align:middle; margin:1px 0 1px 6px; padding:2px 7px; border-radius:4px; background:var(--brand); color:#fff; font-size:10px; font-style:italic; font-weight:600; letter-spacing:.01em; white-space:nowrap; }
  .alc-badge i{ font-size:11px; color:#fff; font-style:normal; }
  .alc-item .pr{ display:block; margin-top:8px; font-family:var(--font-display); font-weight:500; font-size:18px; color:var(--brand-deep); }
  .alc-item .pr-old{ font-family:var(--font-body); font-size:14px; font-weight:500; color:var(--muted); text-decoration:line-through; margin-right:8px; }
  /* preparation time meta */
  .alc-prep{ display:inline-flex; align-items:center; gap:5px; margin-left:14px; font-family:var(--font-body); font-size:12.5px; font-weight:500; color:var(--muted); vertical-align:middle; }
  .alc-prep i{ font-size:14px; color:var(--muted); }
  /* add-to-cart button (opens the app / ordering web app) */
  .alc-cart{ flex:0 0 auto; align-self:flex-end; width:44px; height:44px; border-radius:10px; background:var(--brand); display:grid; place-items:center; cursor:pointer; border:none; text-decoration:none; transition:background .2s, transform .15s; }
  .alc-cart:hover{ background:var(--brand-deep); transform:translateY(-1px); }
  .alc-cart i{ font-size:20px; color:#fff; }

  /* loading skeletons (shown until the menu / timings responses arrive) */
  .skel{ position:relative; overflow:hidden; background:var(--line); border-radius:6px; }
  .skel::after{ content:''; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation:skelshimmer 1.3s ease-in-out infinite; }
  @keyframes skelshimmer{ 100%{ transform:translateX(100%); } }
  .alc-pill.skel{ color:transparent; }
  /* spice level — overlapping red chillies (Utility.GetSpice) */
  .alc-spice{ display:inline-flex; align-items:center; margin-left:6px; }
  .alc-spice img{ position:relative; vertical-align:middle; }

  @media(max-width:900px){
    .alc-nav{ top:73px; margin:0 -28px; }
    .alc-items{ grid-template-columns:1fr; gap:4px; }
    .alc-banner{ height:200px; }
  }
  @media(max-width:520px){
    .alc-nav{ margin:0 -20px; padding:10px 20px; }
    .alc-thumb{ width:74px; height:74px; min-width:74px; }
  }