/* ============================================================
   MenuCloud – Dark Neon Menu Theme (La Marucha style)
   All design tokens are CSS custom properties → fully
   overridable per-restaurant from the panel settings.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}

/* ── Design Tokens ─────────────────────────────────────────── */
:root{
  /* Colors */
  --mc-bg:#090909;
  --mc-surface:#0f0f0f;
  --mc-card:#141414;
  --mc-card-hover:#1c1c1c;
  --mc-border:#222;
  --mc-border-light:#2e2e2e;
  --mc-accent:#e8500a;
  --mc-accent-dk:#c03e00;
  --mc-accent-glow:rgba(232,80,10,.4);
  --mc-text:#f0f0f0;
  --mc-muted:#777;
  --mc-muted-light:#aaa;
  --mc-success:#4ade80;
  --mc-hero-bg:#000;
  --mc-nav-bg:rgba(9,9,9,.96);
  --mc-nav-accent:var(--mc-accent);
  --mc-price-color:var(--mc-accent);
  --mc-footer-bg:#000;
  --mc-neon-blur:10px;
  --mc-neon-spread:4px;
  /* Typography */
  --mc-font:'Oswald',system-ui,sans-serif;
  --mc-font-body:'Inter',system-ui,sans-serif;
  /* Layout */
  --mc-radius:12px;
  --mc-radius-sm:8px;
  --mc-max-width:780px;
  /* Shadows */
  --mc-shadow:0 1px 3px rgba(0,0,0,.6);
  --mc-shadow-md:0 4px 16px rgba(0,0,0,.7);
  --mc-shadow-lg:0 8px 32px rgba(0,0,0,.8);
  /* Legacy aliases so inline JS styles still work */
  --menu-accent:var(--mc-accent);
  --menu-accent-dk:var(--mc-accent-dk);
  --menu-muted:var(--mc-muted);
  --menu-border:var(--mc-border);
  --menu-surface:var(--mc-card);
  --menu-text:var(--mc-text);
  --menu-success:var(--mc-success);
  --menu-bg:var(--mc-bg);
  --menu-font:var(--mc-font-body);
  --menu-radius:var(--mc-radius);
  --menu-radius-sm:var(--mc-radius-sm);
  --menu-shadow:var(--mc-shadow);
  --menu-shadow-md:var(--mc-shadow-md);
  --menu-shadow-lg:var(--mc-shadow-lg);
}

/* ── Base ──────────────────────────────────────────────────── */
html{scroll-behavior:smooth;margin:0;padding:0;touch-action:pan-x pan-y}
body{margin:0;padding:0;background:var(--mc-bg);color:var(--mc-text);font-family:var(--mc-font-body);-webkit-font-smoothing:antialiased;touch-action:pan-x pan-y}
.mc-app{max-width:var(--mc-max-width);margin:0 auto;min-height:100vh}

/* ── Grain texture overlay (decorative) ────────────────────── */
.mc-grain{position:absolute;inset:0;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;z-index:0}

/* ══════════════════════════════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════════════════════════════ */
.mc-hero{position:relative;min-height:100dvh;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--mc-hero-bg);overflow:hidden;padding:2rem 1.5rem 5rem}
.mc-hero-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.18;z-index:0}
.mc-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.85) 100%);z-index:1}
.mc-hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.1rem;width:100%;max-width:560px}

/* Logo */
.mc-hero-logo-wrap{position:relative;display:inline-block}
.mc-hero-logo{width:150px;height:150px;border-radius:26px;object-fit:cover;display:block;filter:drop-shadow(0 0 var(--mc-neon-blur) var(--mc-accent-glow)) drop-shadow(0 0 var(--mc-neon-spread) var(--mc-accent));transition:filter .3s}
.mc-hero-logo:hover{filter:drop-shadow(0 0 26px var(--mc-accent-glow)) drop-shadow(0 0 10px var(--mc-accent))}
.mc-hero-logo-placeholder{width:150px;height:150px;border-radius:26px;background:rgba(255,255,255,.05);border:2px solid var(--mc-accent);display:flex;align-items:center;justify-content:center;font-size:3.8rem;filter:drop-shadow(0 0 var(--mc-neon-blur) var(--mc-accent-glow))}

/* Hero text */
.mc-hero-name{
  margin:0;
  font-family:var(--mc-font);
  font-size:clamp(2.2rem,9vw,3.8rem);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1;
  color:#fff;
  text-shadow:
    0 0 4px #fff,
    0 0 var(--mc-neon-blur) var(--mc-accent),
    0 0 var(--mc-neon-spread) var(--mc-accent-glow),
    0 0 60px var(--mc-accent-glow),
    0 2px 10px rgba(0,0,0,.9)
}
.mc-hero-tagline{margin:0;font-family:var(--mc-font-body);font-size:.95rem;color:var(--mc-muted-light);letter-spacing:.12em;text-transform:uppercase;font-weight:400}

/* Hero CTAs */
.mc-hero-ctas{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center;margin-top:.5rem}
/* ── Rotating conic border (La Marucha style) ──────────────── */
@property --btn-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes btn-border-spin {
  to { --btn-angle: 360deg; }
}
/* Subtle ambient glow pulse on idle */
@keyframes btn-glow-pulse {
  0%,100%{ box-shadow: 0 0 10px -2px var(--btn-glow), 0 6px 24px rgba(0,0,0,.55) }
  50%    { box-shadow: 0 0 22px  2px var(--btn-glow), 0 6px 28px rgba(0,0,0,.6)  }
}

.mc-btn{
  --btn-beam:#fff;
  --btn-fill:rgba(5,5,5,.82);
  --btn-glow:rgba(255,255,255,.12);
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.72rem 1.55rem;
  border-radius:var(--mc-btn-radius,10px);
  font-size:.88rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:transform .22s,filter .22s;
  border:none;
  font-family:var(--mc-font-body);white-space:nowrap;
  position:relative;
  isolation:isolate;
  z-index:0;
  /* Always-on faint dim ring under the beam */
  outline:1px solid color-mix(in srgb,var(--btn-beam) 18%,transparent);
  outline-offset:0px;
  animation:btn-glow-pulse 3s ease-in-out infinite
}
/* Spinning beam layer */
.mc-btn::before{
  content:'';
  position:absolute;
  inset:-2px;
  border-radius:calc(var(--mc-btn-radius,10px) + 2px);
  background:conic-gradient(
    from var(--btn-angle),
    transparent 0deg,
    /* lead fade-in */
    color-mix(in srgb,var(--btn-beam) 8%,transparent) 215deg,
    color-mix(in srgb,var(--btn-beam) 40%,transparent) 250deg,
    /* hot core — pure beam color, no white dot */
    color-mix(in srgb,var(--btn-beam) 80%,transparent) 270deg,
    var(--btn-beam) 282deg,
    var(--btn-beam) 292deg,
    color-mix(in srgb,var(--btn-beam) 75%,transparent) 304deg,
    /* trail fade-out */
    color-mix(in srgb,var(--btn-beam) 35%,transparent) 328deg,
    color-mix(in srgb,var(--btn-beam) 8%,transparent) 350deg,
    transparent 360deg
  );
  animation:btn-border-spin var(--btn-dur,2.4s) linear infinite var(--btn-delay,0s);
  z-index:-1
}
/* Inner fill — depth gradient so it's not flat black */
.mc-btn::after{
  content:'';
  position:absolute;
  inset:1.5px;
  border-radius:calc(var(--mc-btn-radius,10px) - 0.5px);
  background:linear-gradient(
    145deg,
    rgba(255,255,255,.045) 0%,
    var(--btn-fill) 35%,
    color-mix(in srgb,var(--btn-fill) 88%,#000) 100%
  );
  backdrop-filter:blur(6px);
  z-index:-1
}

/* Primary — accent beam, slower */
.mc-btn-primary{
  --btn-beam:var(--mc-accent);
  --btn-fill:color-mix(in srgb,var(--btn-beam) 8%,rgba(0,0,0,.8));
  --btn-glow:color-mix(in srgb,var(--btn-beam) 38%,transparent);
  --btn-dur:2.8s;
  --btn-delay:0s;
  color:var(--btn-beam);
  text-shadow:0 0 6px color-mix(in srgb,var(--btn-beam) 80%,transparent),0 0 20px color-mix(in srgb,var(--btn-beam) 55%,transparent);
  animation-duration:2.8s
}
.mc-btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.25) }

/* Outline — white beam, fastest */
.mc-btn-outline{
  --btn-beam:#ffffff;
  --btn-fill:rgba(255,255,255,.04);
  --btn-glow:rgba(255,255,255,.13);
  --btn-dur:1.9s;
  --btn-delay:-0.7s;
  color:#fff;
  text-shadow:0 0 7px rgba(255,255,255,.7),0 0 18px rgba(255,255,255,.3);
  animation-duration:1.9s;
  animation-delay:-0.7s
}
.mc-btn-outline:hover{ transform:translateY(-2px); filter:brightness(1.2) }

/* WhatsApp — green beam, medium-fast, different phase */
.mc-btn-wa{
  --btn-beam:#25d366;
  --btn-fill:color-mix(in srgb,var(--btn-beam) 8%,rgba(0,0,0,.8));
  --btn-glow:color-mix(in srgb,var(--btn-beam) 38%,transparent);
  --btn-dur:2.3s;
  --btn-delay:-1.4s;
  color:var(--btn-beam);
  text-shadow:0 0 8px color-mix(in srgb,var(--btn-beam) 80%,transparent),0 0 20px color-mix(in srgb,var(--btn-beam) 55%,transparent);
  animation-duration:2.3s;
  animation-delay:-1.4s
}
.mc-btn-wa:hover{ transform:translateY(-2px); filter:brightness(1.25) }

/* ── Button style variants (body class overrides) ────────────── */

/* Glass — no animation, frosted glass fill, static glow border */
body.btn-style-glass .mc-btn{
  animation:none;
  outline:1.5px solid color-mix(in srgb,var(--btn-beam) 50%,transparent);
  box-shadow:0 0 14px -3px color-mix(in srgb,var(--btn-beam) 35%,transparent),0 4px 20px rgba(0,0,0,.45)
}
body.btn-style-glass .mc-btn::before{ animation:none; background:none }
body.btn-style-glass .mc-btn::after{
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)
}
body.btn-style-glass .mc-btn:hover{
  outline-color:color-mix(in srgb,var(--btn-beam) 80%,transparent);
  box-shadow:0 0 24px -2px color-mix(in srgb,var(--btn-beam) 50%,transparent),0 4px 24px rgba(0,0,0,.5)
}

/* Solid — filled with beam color, white text */
body.btn-style-solid .mc-btn{
  animation:none;
  outline:none;
  box-shadow:0 4px 16px rgba(0,0,0,.4)
}
body.btn-style-solid .mc-btn::before{ animation:none; background:none }
body.btn-style-solid .mc-btn::after{
  background:var(--btn-beam);
  backdrop-filter:none
}
body.btn-style-solid .mc-btn{ color:#fff; text-shadow:none }
body.btn-style-solid .mc-btn:hover{
  filter:brightness(1.15);
  box-shadow:0 6px 22px -2px color-mix(in srgb,var(--btn-beam) 60%,transparent)
}

/* Plain — flat colored border, no fill, no animation */
body.btn-style-plain .mc-btn{
  animation:none;
  outline:2px solid color-mix(in srgb,var(--btn-beam) 70%,transparent);
  box-shadow:none
}
body.btn-style-plain .mc-btn::before{ animation:none; background:none }
body.btn-style-plain .mc-btn::after{ background:transparent; backdrop-filter:none }
body.btn-style-plain .mc-btn{ color:var(--btn-beam); text-shadow:none }
body.btn-style-plain .mc-btn:hover{
  outline-color:var(--btn-beam);
  background:color-mix(in srgb,var(--btn-beam) 10%,transparent)
}

/* Scroll-down indicator */
.mc-hero-scroll{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;color:var(--mc-muted);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;z-index:2;transition:color .2s}
.mc-hero-scroll:hover{color:var(--mc-text)}
.mc-scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,rgba(255,255,255,.4),transparent);animation:scroll-pulse 1.8s ease-in-out infinite}
@keyframes scroll-pulse{0%,100%{opacity:.4;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.15)}}
.mc-scroll-arrow{font-size:1rem;animation:bounce-down 1.6s ease-in-out infinite}
@keyframes bounce-down{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ══════════════════════════════════════════════════════════════
   MARQUEE ROWS
═══════════════════════════════════════════════════════════════ */
.mc-marquee-wrap{overflow:hidden;background:var(--mc-surface);border-top:1px solid var(--mc-border);border-bottom:1px solid var(--mc-border);padding:.5rem 0}
.mc-marquee{display:flex;overflow:hidden;white-space:nowrap;padding:.25rem 0}
.mc-marquee-track{display:inline-flex;gap:0;will-change:transform}
.mc-marquee-ltr .mc-marquee-track{animation:marquee-ltr 22s linear infinite}
.mc-marquee-rtl .mc-marquee-track{animation:marquee-rtl 26s linear infinite}
.mc-marquee-track span{display:inline-block;font-family:var(--mc-font);font-size:clamp(1.4rem,5vw,2rem);font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.08);padding:0 1rem}
.mc-marquee-ltr .mc-marquee-track span{text-shadow:0 0 30px var(--mc-accent-glow)}
.mc-marquee-rtl .mc-marquee-track span{color:rgba(255,255,255,.06)}
@keyframes marquee-ltr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-rtl{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.mc-marquee-track{animation:none}}

/* ══════════════════════════════════════════════════════════════
   MENU SECTION HEADER
═══════════════════════════════════════════════════════════════ */
.mc-menu-section{background:transparent;padding-bottom:120px}
.mc-menu-head{padding:2.5rem 1.5rem 1.2rem;text-align:center;position:relative}
.mc-menu-divider{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mc-muted);margin-bottom:.6rem;display:flex;align-items:center;justify-content:center;gap:.8rem}
.mc-menu-divider::before,.mc-menu-divider::after{content:'';flex:1;height:1px;background:linear-gradient(to right,transparent,var(--mc-border));max-width:60px}
.mc-menu-divider::after{background:linear-gradient(to left,transparent,var(--mc-border))}
.mc-menu-title{margin:0 0 .4rem;font-family:var(--mc-font);font-size:clamp(1.5rem,6vw,2.2rem);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mc-text)}
.mc-menu-subtitle{margin:0 0 .3rem;font-size:.95rem;color:var(--mc-muted-light);font-weight:500}
.mc-menu-helper{margin:0;font-size:.78rem;color:var(--mc-muted);letter-spacing:.02em}

/* ── Sticky nav bar (search + category chips) ──────────────── */
.mc-sticky-bar{
  position:sticky;top:0;z-index:30;
  background:var(--mc-nav-bg);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid color-mix(in srgb,var(--mc-nav-accent) 45%,transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--mc-nav-accent) 20%,transparent) inset,
    0 4px 24px color-mix(in srgb,var(--mc-nav-accent) 18%,transparent),
    0 1px 0 color-mix(in srgb,var(--mc-nav-accent) 30%,transparent)
}
.mc-search-row{padding:.55rem 1rem}
.mc-search-wrap{position:relative}
.mc-search-icon{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);opacity:.35;pointer-events:none;font-size:.9rem}
.mc-search-wrap input{width:100%;padding:.6rem 1rem .6rem 2.5rem;border-radius:999px;border:1.5px solid var(--mc-border-light);background:rgba(255,255,255,.05);color:var(--mc-text);font-size:.9rem;font-family:var(--mc-font-body);outline:none;transition:.2s}
.mc-search-wrap input::placeholder{color:var(--mc-muted)}
.mc-search-wrap input:focus{border-color:var(--mc-accent);background:rgba(255,255,255,.08);box-shadow:0 0 0 3px var(--mc-accent-glow)}

/* ── Category chips — always visible, scrollspy ─────────────── */
.cat-chips{display:flex;gap:.45rem;overflow-x:auto;padding:.5rem 1rem .65rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cat-chips::-webkit-scrollbar{display:none}
.cat-chip{
  white-space:nowrap;
  padding:.38rem 1rem;
  border-radius:999px;
  border:1.5px solid color-mix(in srgb,var(--mc-nav-accent) 35%,rgba(255,255,255,.12));
  background:rgba(255,255,255,.03);
  font-size:.78rem;
  font-family:var(--mc-font-body);
  cursor:pointer;
  font-weight:700;
  color:rgba(255,255,255,.6);
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:border-color .15s,color .15s,box-shadow .15s,background .15s;
  flex-shrink:0
}
.cat-chip:hover{
  border-color:var(--mc-nav-accent);
  color:var(--mc-nav-accent);
  box-shadow:0 0 8px color-mix(in srgb,var(--mc-nav-accent) 40%,transparent)
}
.cat-chip.active{
  background:var(--mc-nav-accent);
  color:#fff;
  border-color:var(--mc-nav-accent);
  box-shadow:0 0 14px color-mix(in srgb,var(--mc-nav-accent) 55%,transparent),0 0 30px color-mix(in srgb,var(--mc-nav-accent) 25%,transparent);
  text-shadow:0 0 8px rgba(255,255,255,.4)
}

/* ══════════════════════════════════════════════════════════════
   FEATURED STRIP
═══════════════════════════════════════════════════════════════ */
/* Featured strip – text-only */
.featured-section{padding:.8rem 1rem .5rem}
.featured-title{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--mc-muted);margin:0 0 .65rem;display:flex;align-items:center;gap:.5rem}
.featured-title::before,.featured-title::after{content:'';flex:1;height:1px;background:var(--mc-border)}
.featured-scroll{display:flex;gap:.55rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:.25rem}
.featured-scroll::-webkit-scrollbar{display:none}
.featured-card{flex-shrink:0;width:140px;background:var(--mc-card);border-radius:var(--mc-radius);border:1px solid var(--mc-border);border-left:3px solid var(--mc-accent);overflow:hidden;cursor:pointer;transition:border-color .18s,box-shadow .18s,background .18s;padding:.75rem .8rem}
.featured-card:hover{border-color:var(--mc-accent);background:var(--mc-card-hover);box-shadow:0 0 14px var(--mc-accent-glow)}
.featured-card:active{transform:scale(.97)}
/* Hide images in featured strip */
.featured-card-img,.featured-card-placeholder{display:none}
.featured-card-info{padding:0}
.featured-card-name{font-size:.84rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--mc-text);font-family:var(--mc-font);letter-spacing:.05em;text-transform:uppercase;text-shadow:0 0 var(--mc-neon-blur) var(--mc-accent-glow)}
.featured-card-price{font-size:.82rem;font-weight:800;color:var(--mc-accent);margin-top:.35rem}

/* ══════════════════════════════════════════════════════════════
   CATEGORY LANDING GRID
═══════════════════════════════════════════════════════════════ */
.cat-landing{padding:.75rem 1rem 1.5rem}
.cat-landing-title{margin:0 0 .85rem;font-size:.65rem;letter-spacing:.18em;font-weight:700;text-transform:uppercase;color:var(--mc-muted)}
/* Landing grid: 2-column pill grid like La Marucha catnav */
.cat-landing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.85rem;padding:.5rem 0 1.5rem;overflow:visible}
/* Text-only neon category card – pill style */
.cat-landing-card{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(rgba(22,17,38,.4),rgba(8,6,16,.5));
  cursor:pointer;
  transition:border-color .18s,box-shadow .18s,background .18s;
  -webkit-tap-highlight-color:transparent;
  padding:1.2rem 1rem
}
.cat-landing-card:hover{
  border-color:var(--mc-accent);
  background:color-mix(in srgb,var(--mc-accent) 12%,rgba(8,6,16,.6));
  box-shadow:0 0 14px var(--mc-accent-glow),inset 0 0 0 1px var(--mc-accent)
}
.cat-landing-card:active{opacity:.82;transform:scale(.97)}
/* Hide image elements */
.cat-landing-img,.cat-landing-img-empty{display:none}
.cat-landing-info{padding:0}
.cat-landing-name{
  font-weight:800;
  font-size:clamp(.9rem,3.5vw,1.2rem);
  color:#fff;
  line-height:1.2;
  font-family:var(--mc-font);
  letter-spacing:-.01em;
  text-transform:uppercase;
  /* Rainbow 3D shadow — depth scaled for pill size */
  text-shadow:
    rgb(255,210,14)  1px 1px 0px,
    rgb(236,132,1)   1px 2px 0px,
    rgb(230,92,4)    1px 3px 0px,
    rgb(229,46,6)    2px 4px 0px,
    rgb(222,0,107)   2px 5px 0px,
    rgb(202,3,158)   2px 6px 0px,
    rgb(162,3,203)   2px 7px 0px,
    rgb(109,1,201)   3px 8px 0px,
    rgb(34,0,143)    3px 9px 0px,
    rgb(0,69,172)    3px 10px 0px,
    rgb(0,125,178)   3px 11px 0px,
    rgb(0,184,217)   3px 12px 0px,
    rgba(0,0,0,.5)   3px 14px 4px
}
.cat-landing-count{font-size:.7rem;color:var(--mc-muted);margin-top:1.2rem}

/* ══════════════════════════════════════════════════════════════
   MENU CATEGORY SECTIONS & HEADINGS
═══════════════════════════════════════════════════════════════ */
.cat-section{padding:.5rem 1rem 2rem;scroll-margin-top:130px}
/* Category heading – La Marucha rainbow 3D text effect */
.cat-section-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1.1rem;padding-bottom:.6rem}
.cat-section-head h2{
  margin:0;
  font-family:var(--mc-font);
  font-size:clamp(2rem,8vw,2.8rem);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.02em;
  color:#fff;
  line-height:1;
  text-shadow:
    rgb(255,210,14)  1px 2px 0px,
    rgb(236,132,1)   1px 4px 0px,
    rgb(230,92,4)    2px 6px 0px,
    rgb(229,46,6)    2px 8px 0px,
    rgb(222,0,107)   3px 10px 0px,
    rgb(202,3,158)   3px 12px 0px,
    rgb(162,3,203)   4px 14px 0px,
    rgb(109,1,201)   4px 16px 0px,
    rgb(34,0,143)    5px 18px 0px,
    rgb(0,69,172)    5px 20px 0px,
    rgb(0,125,178)   6px 22px 0px,
    rgb(0,184,217)   6px 24px 0px,
    rgba(0,0,0,.55)  5px 27px 6px
}
.cat-count{font-size:.65rem;background:var(--mc-border);color:var(--mc-muted);border-radius:999px;padding:.12rem .55rem;font-weight:700;flex-shrink:0;align-self:flex-end;margin-bottom:.35rem}
.menu-empty{text-align:center;padding:4rem 2rem;color:var(--mc-muted)}
.menu-empty p:first-child{font-size:3rem;margin-bottom:.5rem}

/* ══════════════════════════════════════════════════════════════
   PRODUCT CARDS – La Marucha dish style
═══════════════════════════════════════════════════════════════ */
/* 2-column grid like La Marucha */
.products-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:.2rem 0 .5rem}
@media(max-width:440px){.products-grid{grid-template-columns:1fr}}
/* The dish card */
.prod-card{
  background:linear-gradient(rgba(22,17,38,.45),rgba(8,6,16,.6));
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:1.35rem 1.25rem 1.1rem;
  cursor:pointer;
  transition:border-color .18s,box-shadow .18s;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  position:relative;
  -webkit-tap-highlight-color:transparent
}
.prod-card:hover{border-color:var(--mc-accent);box-shadow:0 0 18px var(--mc-accent-glow),0 4px 24px rgba(0,0,0,.4)}
.prod-card:active{opacity:.88}
/* Name · leader dots · price row */
.dish__line{display:flex;align-items:baseline;gap:.35rem;min-width:0}
.prod-name{margin:0;font-weight:600;font-size:1.05rem;color:#fff;flex:0 1 auto;line-height:1.3;min-width:0}
/* Dotted leader – color of accent at 45% opacity */
.dish__leader{
  flex:1 1 0%;
  min-width:8px;
  border-bottom:1px dotted color-mix(in srgb,var(--mc-accent) 45%,transparent);
  margin-bottom:.25rem
}
/* Price with neon glow – exact La Marucha technique */
.prod-price{
  font-weight:800;
  font-size:1.2rem;
  color:#ffffff;
  white-space:nowrap;
  flex-shrink:0;
  text-shadow:
    0 0 3px rgba(255,255,255,.9),
    0 0 10px var(--mc-price-color),
    0 0 22px var(--mc-price-color),
    0 0 45px color-mix(in srgb,var(--mc-price-color) 50%,transparent)
}
.prod-price-old{color:var(--mc-muted);font-size:.75rem;text-decoration:line-through;flex-shrink:0;font-weight:400;margin-bottom:.15rem}
/* Description */
.prod-desc{color:var(--mc-muted);font-size:.8rem;margin:0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Badges */
.prod-badges-inline{display:flex;gap:.25rem;flex-wrap:wrap;pointer-events:none;margin-bottom:.1rem}
/* Add-to-cart button – La Marucha add-btn style */
.prod-add-btn-full{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.7rem 1rem;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  color:#fff;
  font-size:.88rem;
  font-weight:700;
  font-family:var(--mc-font-body);
  cursor:pointer;
  transition:background .15s,border-color .15s,box-shadow .15s;
  margin-top:auto;
  letter-spacing:.02em
}
.prod-add-btn-full:hover{
  background:color-mix(in srgb,var(--mc-accent) 18%,rgba(255,255,255,.07));
  border-color:var(--mc-accent);
  box-shadow:0 0 12px var(--mc-accent-glow)
}
.prod-add-btn-full:active{opacity:.8}
.prod-add-btn-full.prod-out{opacity:.4;cursor:not-allowed}
/* Legacy – hide old elements if any remain */
.prod-img-wrap,.prod-img-placeholder,.prod-add-btn,.prod-footer,.prod-info{display:none}

/* ══════════════════════════════════════════════════════════════
   STYLE VARIANTS — controlled by body class from settings
═══════════════════════════════════════════════════════════════ */

/* ── Button radius ── */
.mc-btn,.prod-add-btn-full,.add-btn { border-radius: var(--mc-btn-radius, 10px); }

/* ── Cat style: neon (body.cat-style-neon) ── */
body.cat-style-neon .cat-section-head h2,
body.cat-style-neon .cat-landing-name {
    text-shadow:
        0 0 4px #fff,
        0 0 12px var(--mc-accent),
        0 0 28px var(--mc-accent-glow),
        0 0 60px var(--mc-accent-glow);
}
/* ── Cat style: plain (body.cat-style-plain) ── */
body.cat-style-plain .cat-section-head h2,
body.cat-style-plain .cat-landing-name {
    text-shadow: none;
    color: var(--mc-accent);
}
/* (cat-style-rainbow = default, already in base CSS) */

/* ── Card style: glass (body.card-style-glass) ── */
body.card-style-glass .prod-card {
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.18);
}
/* ── Card style: solid (body.card-style-solid) ── */
body.card-style-solid .prod-card {
    background: var(--mc-card);
    border: 1px solid rgba(255,255,255,.1);
}
/* (card-style-gradient = default, already in base CSS) */
.badge-feat{background:var(--mc-accent);color:#fff;font-size:.6rem;padding:.18rem .45rem;border-radius:999px;font-weight:700}
.badge-out{background:#ef4444;color:#fff;font-size:.6rem;padding:.18rem .45rem;border-radius:999px;font-weight:700}
.badge-sale{background:#7c3aed;color:#fff;font-size:.6rem;padding:.18rem .45rem;border-radius:999px;font-weight:700}

/* ══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
.mc-footer{background:var(--mc-footer-bg);border-top:1px solid var(--mc-border);padding:2.5rem 1.5rem 2rem;text-align:center}
.mc-footer-logo{width:80px;height:80px;border-radius:16px;object-fit:cover;margin:0 auto .75rem;display:block;filter:drop-shadow(0 0 var(--mc-neon-blur) var(--mc-accent-glow))}
.mc-footer-logo-placeholder{font-size:3rem;margin-bottom:.6rem}
.mc-footer-name{margin:.5rem 0 .2rem;font-family:var(--mc-font);font-size:1.15rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mc-text)}
.mc-footer-tagline{margin:0 0 1rem;font-size:.78rem;color:var(--mc-muted);letter-spacing:.12em;text-transform:uppercase}
.mc-footer-info{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}
.mc-footer-info span{font-size:.82rem;color:var(--mc-muted-light)}
.mc-footer-social{display:flex;gap:.6rem;justify-content:center;margin-bottom:1.2rem;flex-wrap:wrap}
.mc-footer-social a{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;color:var(--mc-muted);text-decoration:none;padding:.3rem .7rem;border:1px solid var(--mc-border);border-radius:999px;transition:.15s;letter-spacing:.05em}
.mc-footer-social a:hover{border-color:var(--mc-accent);color:var(--mc-accent)}
.mc-footer-copy{margin:0;font-size:.7rem;color:var(--mc-muted);letter-spacing:.05em}
.mc-footer-divider{width:40px;height:1px;background:var(--mc-border);margin:.75rem auto}

/* ══════════════════════════════════════════════════════════════
   PRODUCT / CART SHEETS
═══════════════════════════════════════════════════════════════ */
.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:100;opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sheet-backdrop.open{opacity:1;pointer-events:all}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:110;background:var(--mc-surface);border-radius:20px 20px 0 0;max-height:92vh;overflow-y:auto;transform:translateY(100%);transition:transform .32s cubic-bezier(.32,.72,0,1);max-width:var(--mc-max-width);margin-inline:auto;box-shadow:0 -4px 40px rgba(0,0,0,.6),0 0 0 1px var(--mc-border)}
.sheet.open{transform:none}
.sheet-handle{width:40px;height:4px;border-radius:999px;background:var(--mc-border-light);margin:.8rem auto .4rem}
.sheet-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;opacity:.9}
.sheet-body{padding:1rem 1.25rem 2rem}
.sheet-name{font-size:1.2rem;font-weight:800;margin:0 0 .25rem;color:var(--mc-text)}
.sheet-price{font-size:1.4rem;font-weight:800;color:var(--mc-accent)}
.sheet-price-old{font-size:.92rem;color:var(--mc-muted);text-decoration:line-through;margin-left:.4rem}
.sheet-desc{color:var(--mc-muted);font-size:.86rem;line-height:1.6;margin:.5rem 0 .25rem}
.sheet-close{position:absolute;top:.9rem;right:1rem;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--mc-border);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--mc-muted-light);z-index:5;transition:.15s}
.sheet-close:hover{background:rgba(255,255,255,.14);color:var(--mc-text)}
.sheet-loading{padding:3rem;text-align:center;color:var(--mc-muted)}
.sheet-error{padding:2rem;text-align:center;color:#ef4444;font-size:.9rem}

/* Extras */
.extra-group{border-top:1px solid var(--mc-border);padding:.9rem 0}
.extra-group-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.extra-group-head h4{margin:0;font-size:.9rem;font-weight:700;color:var(--mc-text)}
.extra-opt input[type=checkbox],.extra-opt input[type=radio]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.extra-opt{display:flex;align-items:center;gap:.55rem;padding:.5rem .65rem;margin:.25rem 0;border-radius:var(--mc-radius-sm);border:1.5px solid var(--mc-border);background:var(--mc-card);cursor:pointer;transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent;user-select:none}
.extra-opt:hover{border-color:var(--mc-accent)}
.extra-opt.is-checked{border-color:var(--mc-accent);background:rgba(232,80,10,.08)}
.extra-indicator{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--mc-border-light);display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s;font-size:.8rem;color:transparent}
.extra-opt[data-type=checkbox] .extra-indicator{border-radius:5px}
.extra-opt.is-checked .extra-indicator{border-color:var(--mc-accent);background:var(--mc-accent);color:#fff}
.extra-opt-text{flex:1;font-size:.86rem;font-weight:500;color:var(--mc-text)}
.extra-price{font-size:.8rem;color:var(--mc-accent);font-weight:700;white-space:nowrap;margin-left:auto}
.extra-qty-ctrl{display:flex;align-items:center;gap:.3rem;margin-left:.4rem;flex-shrink:0}
.extra-qty-btn{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--mc-accent);background:transparent;color:var(--mc-accent);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.12s}
.extra-qty-btn:hover{background:var(--mc-accent);color:#fff}
.extra-qty-val{font-size:.85rem;font-weight:700;min-width:18px;text-align:center;color:var(--mc-text)}
.sheet-extra-total{display:none;font-size:.82rem;color:var(--mc-muted);margin-top:.18rem}

/* Qty row */
.qty-row{display:flex;align-items:center;gap:1rem;margin-top:.8rem}
.qty-btn{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--mc-border-light);background:transparent;color:var(--mc-muted-light);font-size:1.35rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.qty-btn:hover{border-color:var(--mc-accent);color:var(--mc-accent)}
.qty-val{font-size:1.25rem;font-weight:800;min-width:30px;text-align:center;color:var(--mc-text)}
.sheet-add-btn{width:100%;margin-top:1.1rem;padding:.9rem;border-radius:var(--mc-radius);background:var(--mc-accent);border:none;color:#fff;font-size:.95rem;font-weight:700;letter-spacing:.05em;font-family:var(--mc-font-body);cursor:pointer;transition:.15s;box-shadow:0 0 16px var(--mc-accent-glow)}
.sheet-add-btn:hover{background:var(--mc-accent-dk);box-shadow:0 0 24px var(--mc-accent-glow)}

/* ── Cart bar ────────────────────────────────────────────────── */
.cart-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:1.1rem;width:calc(100% - 2rem);max-width:calc(var(--mc-max-width) - 2rem);z-index:60;background:var(--mc-accent);color:#fff;border-radius:var(--mc-radius);padding:.9rem 1.3rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 0 20px var(--mc-accent-glow),0 6px 24px rgba(0,0,0,.5);cursor:pointer;transition:opacity .22s,transform .22s;user-select:none}
.cart-bar:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 0 28px var(--mc-accent-glow),0 8px 32px rgba(0,0,0,.6)}
.cart-bar.hidden{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(14px)}
.cart-badge{background:rgba(255,255,255,.28);border-radius:999px;padding:.17rem .6rem;font-weight:800;font-size:.86rem}
.cart-bar-total{font-weight:800;font-size:1.02rem}
.cart-bar-arrow{opacity:.85;font-size:.88rem}

/* ── Cart sheet body ─────────────────────────────────────────── */
.cart-sheet-body{padding:1rem 1.25rem 2rem}
.cart-sheet-body h3{margin:0 0 1rem;font-size:1.05rem;font-weight:800;color:var(--mc-text)}
.cart-empty{text-align:center;padding:2.5rem;color:var(--mc-muted)}
.cart-empty span{font-size:3.5rem;display:block;margin-bottom:.6rem}
.cart-line{display:flex;align-items:flex-start;gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--mc-border)}
.cart-line-info{flex:1;min-width:0}
.cart-line-name{font-weight:600;font-size:.88rem;color:var(--mc-text)}
.cart-line-extras{color:var(--mc-muted);font-size:.74rem;margin-top:.1rem}
.cart-line-right{text-align:right;white-space:nowrap}
.cart-line-price{font-weight:700;font-size:.88rem;color:var(--mc-accent)}
.cart-qty-row{display:flex;align-items:center;gap:.35rem;justify-content:flex-end;margin-top:.3rem}
.cart-qty-btn{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--mc-border-light);background:transparent;color:var(--mc-muted-light);font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.14s}
.cart-qty-btn:hover{border-color:var(--mc-accent);color:var(--mc-accent)}
.cart-summary{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--mc-border)}
.summary-row{display:flex;justify-content:space-between;padding:.22rem 0;font-size:.88rem;color:var(--mc-muted-light)}
.summary-total{display:flex;justify-content:space-between;font-size:1.1rem;font-weight:800;padding:.5rem 0;border-top:1px solid var(--mc-border);margin-top:.4rem;color:var(--mc-text)}

/* ── Order form ──────────────────────────────────────────────── */
.order-form{margin-top:1rem}
.order-type-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-bottom:1rem}
.ot-btn{padding:.6rem .25rem;border-radius:var(--mc-radius-sm);border:1.5px solid var(--mc-border-light);background:transparent;color:var(--mc-muted-light);cursor:pointer;font-size:.78rem;font-weight:600;font-family:var(--mc-font-body);text-align:center;transition:.14s;line-height:1.3}
.ot-btn:hover{border-color:var(--mc-accent);color:var(--mc-accent)}
.ot-btn.active{border-color:var(--mc-accent);background:rgba(232,80,10,.1);color:var(--mc-accent)}
.ot-icon{font-size:1.3rem;display:block;margin-bottom:.2rem}
.form-field{margin-bottom:.7rem}
.form-field label{display:block;font-size:.72rem;font-weight:800;color:var(--menu-muted);margin-bottom:.28rem;text-transform:uppercase;letter-spacing:.05em}
.form-field label .req-star{color:#ef4444;font-style:normal}
.form-field label .opt-label{color:var(--menu-muted);font-weight:400;text-transform:none;font-size:.68rem;letter-spacing:0}
.form-field input{width:100%;padding:.65rem .9rem;border:1.5px solid var(--menu-border);border-radius:var(--menu-radius-sm);background:var(--menu-surface);color:var(--menu-text);font-size:.9rem;font-family:var(--menu-font);outline:none;transition:.15s}
.form-field input:focus{border-color:var(--menu-accent)}
.delivery-fields{display:none}.delivery-fields.visible{display:block}
.delivery-fee-note{background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.06);border-left:3px solid var(--menu-accent);border-radius:var(--menu-radius-sm);padding:.55rem .85rem;font-size:.84rem;font-weight:700;color:var(--menu-accent);margin-bottom:.7rem}
.dine-in-field{display:none}
.gps-btn{width:100%;padding:.6rem;border-radius:var(--menu-radius-sm);border:1.5px dashed var(--menu-border);background:transparent;color:var(--menu-text);font-family:var(--menu-font);font-size:.88rem;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;gap:.4rem}
.gps-btn:hover{border-color:var(--menu-accent);color:var(--menu-accent)}
.gps-coords{font-size:.76rem;color:var(--menu-muted);margin:.35rem 0}
.map-preview{border-radius:var(--menu-radius-sm);overflow:hidden;margin-top:.4rem}
.map-preview iframe{width:100%;height:155px;border:0;display:block}
.submit-order-btn{width:100%;padding:.92rem;border-radius:var(--menu-radius);background:var(--menu-accent);border:none;color:#fff;font-size:1.02rem;font-weight:700;font-family:var(--menu-font);cursor:pointer;transition:.15s;margin-top:.5rem;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.submit-order-btn:hover{background:var(--menu-accent-dk);box-shadow:0 6px 22px rgba(0,0,0,.25)}
.submit-order-btn:disabled{opacity:.6;cursor:not-allowed}
.wa-btn{width:100%;padding:.8rem;border-radius:var(--menu-radius);background:#25d366;border:none;color:#fff;font-size:.93rem;font-weight:700;font-family:var(--menu-font);cursor:pointer;transition:.15s;margin-top:.6rem}
.wa-btn:hover{background:#1ebe5d}

/* Toast */
#toast-container{position:fixed;bottom:5.5rem;right:1rem;display:flex;flex-direction:column;gap:.4rem;z-index:999}
.toast{padding:.65rem 1rem;border-radius:var(--menu-radius-sm);color:#fff;font-family:var(--menu-font);font-size:.87rem;font-weight:600;max-width:280px;box-shadow:var(--menu-shadow-lg);transition:opacity .3s;animation:toastIn .25s ease}
@keyframes toastIn{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.toast-success{background:#16a34a}.toast-danger{background:#dc2626}.toast-warning{background:#d97706}.toast-info{background:#2563eb}

/* ── Delivery / order form fields ─────────────────────────── */
.delivery-fields{display:none}
.delivery-fields.visible{display:block}
.delivery-fee-note{font-size:.8rem;color:var(--mc-muted-light);background:var(--mc-card);border:1px solid var(--mc-border);border-radius:var(--mc-radius-sm);padding:.5rem .75rem;margin-bottom:.75rem}
.form-field{margin-bottom:.75rem}
.form-field label{display:block;font-size:.8rem;font-weight:600;color:var(--mc-muted-light);margin-bottom:.3rem;letter-spacing:.04em;text-transform:uppercase}
.form-field label .req-star{color:#ef4444;font-style:normal}
.form-field label .opt-label{color:var(--mc-muted);font-weight:400;text-transform:none;font-size:.74rem;letter-spacing:0}
.form-field input{width:100%;padding:.65rem .9rem;background:var(--mc-card);border:1.5px solid var(--mc-border);border-radius:var(--mc-radius-sm);color:var(--mc-text);font-size:.88rem;font-family:var(--mc-font-body);outline:none;transition:.15s}
.form-field input::placeholder{color:var(--mc-muted)}
.form-field input:focus{border-color:var(--mc-accent);box-shadow:0 0 0 3px var(--mc-accent-glow)}
.gps-btn{width:100%;padding:.55rem;background:transparent;border:1.5px dashed var(--mc-border-light);border-radius:var(--mc-radius-sm);color:var(--mc-muted-light);cursor:pointer;font-size:.85rem;transition:.15s}
.gps-btn:hover{border-color:var(--mc-accent);color:var(--mc-accent)}
.gps-coords{font-size:.75rem;color:var(--mc-muted);margin-top:.4rem;padding:.3rem .6rem;background:var(--mc-card);border-radius:var(--mc-radius-sm)}
.map-preview{margin-top:.5rem;border-radius:var(--mc-radius-sm);overflow:hidden;height:140px}
.map-preview iframe{width:100%;height:100%;border:none;display:block}
.dine-in-field{display:none}
.submit-order-btn{width:100%;margin-top:1rem;padding:.9rem;border-radius:var(--mc-radius);background:var(--mc-accent);border:none;color:#fff;font-size:.95rem;font-weight:700;letter-spacing:.05em;font-family:var(--mc-font-body);cursor:pointer;transition:.15s;box-shadow:0 0 16px var(--mc-accent-glow)}
.submit-order-btn:hover{background:var(--mc-accent-dk);box-shadow:0 0 24px var(--mc-accent-glow)}
.submit-order-btn:disabled{opacity:.55;cursor:not-allowed}

/* ── Toast notifications ─────────────────────────────────── */
#toast-container{position:fixed;bottom:5.5rem;right:1rem;z-index:200;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast{padding:.65rem 1rem;border-radius:var(--mc-radius-sm);font-size:.85rem;font-weight:600;background:var(--mc-surface);color:var(--mc-text);border:1px solid var(--mc-border);box-shadow:var(--mc-shadow-lg);opacity:1;transition:opacity .3s;max-width:280px;pointer-events:all}
.toast-success{border-color:var(--mc-success);color:var(--mc-success)}
.toast-danger{border-color:#ef4444;color:#ef4444}
.toast-warning{border-color:#f59e0b;color:#f59e0b}

/* ── Misc utilities ─────────────────────────────────────── */
.hidden{display:none!important}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET  (≥768px)
═══════════════════════════════════════════════════════════════ */
@media(min-width:768px){
  .mc-app{ max-width:960px }
  .mc-hero-inner{ max-width:660px }
  .mc-hero-logo{ width:160px;height:160px }
  .mc-hero-ctas{ flex-wrap:nowrap;gap:.75rem }
  .products-grid{ grid-template-columns:repeat(3,1fr);gap:1.1rem }
  .cat-section{ padding:.5rem 1.5rem 2rem }
  .mc-menu-head{ padding:2rem 1.5rem 1rem }
  .featured-section{ padding:.8rem 1.5rem .5rem }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — DESKTOP  (≥1024px) — sidebar layout
═══════════════════════════════════════════════════════════════ */
@media(min-width:1024px){
  /* ─ App container ─ */
  .mc-app{ max-width:1400px }

  /* ─ Menu section: no horizontal padding — handled per-child ─ */
  .mc-menu-section{ padding-bottom:0 }
  .mc-menu-head{
    padding:2.5rem 2.5rem 1.2rem;
    max-width:none
  }

  /* ─ Hero: shorter + wider ─ */
  .mc-hero{ min-height:64vh;padding:2.5rem 4rem 4rem }
  .mc-hero-inner{ max-width:860px;gap:1.5rem }
  .mc-hero-logo{ width:175px;height:175px;border-radius:30px }
  .mc-hero-name{ font-size:clamp(3rem,5.5vw,5.2rem) }
  .mc-hero-tagline{ font-size:1.05rem }
  .mc-hero-ctas{ gap:1.1rem }
  .mc-btn{ padding:.78rem 1.7rem;font-size:.9rem }

  /* ─ Menu section: sidebar + main ─ */
  .mc-menu-head{
    padding:2rem 2.5rem 1.2rem;
    max-width:1400px;
    margin:0 auto
  }
  .mc-menu-body{
    display:flex;
    align-items:flex-start;
    max-width:1400px;
    margin:0 auto
  }

  /* ─ Sidebar ─ */
  .mc-sticky-bar{
    width:250px;
    flex-shrink:0;
    position:sticky;
    top:0;
    height:100vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border-bottom:none;
    border-right:1px solid var(--mc-border);
    box-shadow:1px 0 12px -4px color-mix(in srgb,var(--mc-nav-accent) 25%,transparent)
  }
  .mc-search-row{ padding:.8rem .9rem .6rem }
  /* Vertical category list */
  .cat-chips{
    flex-direction:column;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    flex:1;
    padding:.3rem .7rem .9rem;
    gap:.22rem;
    scrollbar-width:thin;
    scrollbar-color:var(--mc-border) transparent
  }
  .cat-chip{
    border-radius:8px;
    text-align:left;
    font-size:.81rem;
    padding:.44rem .95rem;
    justify-content:flex-start
  }
  /* Sidebar header label */
  .mc-sticky-bar::before{
    content:'Categorías';
    display:block;
    font-size:.65rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--mc-muted);
    padding:.9rem 1rem .2rem;
    border-top:1px solid var(--mc-border)
  }

  /* ─ Main content ─ */
  .mc-menu-main{ flex:1;min-width:0;padding-bottom:4rem }
  .cat-section{ padding:.5rem 2.5rem 2.5rem;scroll-margin-top:20px }
  .featured-section{ padding:1rem 2.5rem .6rem }

  /* ─ Products grid: 3 columns ─ */
  .products-grid{ grid-template-columns:repeat(3,1fr);gap:1.15rem }

  /* ─ Cart bar: respects sidebar width ─ */
  .cart-bar{
    left:calc(50% + 125px);   /* shift right half of sidebar */
    max-width:calc(var(--mc-max-width) - 2rem)
  }

  /* ─ Sheet (product detail): also offset ─ */
  .sheet{ max-width:520px }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — LARGE DESKTOP  (≥1280px)
═══════════════════════════════════════════════════════════════ */
@media(min-width:1280px){
  .mc-sticky-bar{ width:275px }
  .mc-cart-bar{ left:calc(50% + 137px) }
  .products-grid{ grid-template-columns:repeat(4,1fr);gap:1.2rem }
  .mc-hero-name{ font-size:clamp(3.2rem,4.8vw,5.8rem) }
  .mc-hero-inner{ max-width:1020px }
  .cat-section{ padding:.5rem 3rem 2.5rem }
  .featured-section{ padding:1.1rem 3rem .6rem }
  .mc-menu-head{ padding:2rem 3rem 1.2rem }
}

/* ══════════════════════════════════════════════════════════════
   RESERVATION FAB + SHEET
═══════════════════════════════════════════════════════════════ */
.resv-fab{
  position:fixed;
  bottom:5.5rem;
  right:1.1rem;
  z-index:200;
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.65rem 1.1rem;
  border:none;
  border-radius:50px;
  background:var(--mc-accent);
  color:#fff;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.03em;
  cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.4), 0 0 18px color-mix(in srgb,var(--mc-accent) 50%,transparent);
  transition:transform .18s,box-shadow .18s;
}
.resv-fab:hover{ transform:translateY(-3px) scale(1.04) }
.resv-fab svg{ flex-shrink:0 }

/* backdrop */
.resv-backdrop{
  position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,0);
  pointer-events:none;
  transition:background .3s;
}
.resv-backdrop.open{
  background:rgba(0,0,0,.55);
  pointer-events:auto;
}

/* sheet */
.resv-sheet{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:301;
  background:var(--mc-surface,#111);
  border-radius:18px 18px 0 0;
  padding:1.2rem 1.4rem 2rem;
  max-height:90dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.32,1,.34,1);
}
.resv-sheet.open{ transform:translateY(0) }
@media(min-width:640px){
  .resv-sheet{
    left:50%;
    right:auto;
    width:min(520px,96vw);
    transform:translateX(-50%) translateY(100%);
    border-radius:18px;
    bottom:2rem;
  }
  .resv-sheet.open{ transform:translateX(-50%) translateY(0) }
}

.resv-handle{
  width:42px;height:4px;
  border-radius:4px;
  background:var(--mc-muted,#555);
  margin:0 auto .9rem;
}
.resv-close{
  position:absolute;top:.9rem;right:1rem;
  background:none;border:none;
  color:var(--mc-muted);font-size:1.2rem;
  cursor:pointer;line-height:1;
}
.resv-title{
  font-size:1.25rem;font-weight:800;
  margin-bottom:1rem;
  color:var(--mc-text);
}
.resv-form{ display:grid;gap:.75rem }
.resv-row{ display:grid;grid-template-columns:1fr 1fr;gap:.65rem }
@media(max-width:400px){ .resv-row{ grid-template-columns:1fr } }
.resv-label{ display:block;font-size:.78rem;font-weight:600;margin-bottom:.25rem;color:var(--mc-muted) }
.resv-input{
  width:100%;
  padding:.6rem .8rem;
  border-radius:8px;
  border:1px solid var(--mc-border,rgba(255,255,255,.12));
  background:var(--mc-card,#1a1a1a);
  color:var(--mc-text,#f0f0f0);
  font-size:.88rem;
  box-sizing:border-box;
}
.resv-input:focus{ outline:none;border-color:var(--mc-accent) }
.resv-submit{
  width:100%;
  margin-top:.4rem;
  justify-content:center;
  font-size:.92rem;
}
.resv-note{
  text-align:center;
  font-size:.72rem;
  color:var(--mc-muted);
  margin-top:.3rem;
}

/* ══════════════════════════════════════════════════════════════
   REELS FILMSTRIP  (carousel style – La Marucha)
═══════════════════════════════════════════════════════════════ */
.reels-section{
  overflow:hidden;
  background:transparent;
  border-top:1px solid rgba(255,255,255,.06);
}
.reels-inner{ padding:1.2rem 0 1rem }
.reels-label-row{
  padding:0 1.2rem .65rem;
  display:flex;
  align-items:center;
  gap:.7rem;
}
.reels-neon-tag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mc-accent);
  text-shadow:0 0 8px var(--mc-accent-glow);
  padding:.22rem .65rem;
  border:1px solid var(--mc-accent);
  border-radius:4px;
  box-shadow:0 0 10px color-mix(in srgb,var(--mc-accent) 30%,transparent),
             inset 0 0 6px color-mix(in srgb,var(--mc-accent) 15%,transparent);
}
.reels-track{
  display:flex;
  gap:.8rem;
  overflow-x:auto;
  padding:0 1.2rem .8rem;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.reels-track::-webkit-scrollbar{ display:none }
.reel-card{
  flex-shrink:0;
  width:150px;
  border-radius:10px;
  overflow:hidden;
  scroll-snap-align:start;
  position:relative;
  background:#000;
  border:1.5px solid var(--mc-border,rgba(255,255,255,.1));
  cursor:pointer;
  transition:border-color .25s,box-shadow .25s,transform .2s;
}
.reel-card:hover{
  border-color:var(--mc-accent);
  box-shadow:0 0 18px color-mix(in srgb,var(--mc-accent) 45%,transparent);
  transform:translateY(-3px) scale(1.03);
}
.reel-video{
  display:block;
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
}
.reel-label{
  position:absolute;
  bottom:0;left:0;right:0;
  padding:.45rem .55rem;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 100%);
  font-size:.7rem;
  font-weight:700;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.reel-card.paused::after{
  content:'▶';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-size:2rem;
  color:rgba(255,255,255,.7);
  pointer-events:none;
  text-shadow:0 0 12px rgba(0,0,0,.8);
}

/* ══════════════════════════════════════════════════════════════
   OFFERS NEON STRIP
═══════════════════════════════════════════════════════════════ */
.offers-section{
  overflow:hidden;
  background:transparent;
  border-top:1px solid rgba(255,255,255,.06);
}
.offers-inner{ padding:1.5rem 0 1.3rem }
.offers-hd{ padding:0 1.2rem .85rem }
.offers-neon-tag{
  font-size:clamp(1.3rem,4.5vw,2rem);
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mc-text);
  text-shadow:
    0 0 var(--mc-neon-blur,10px) var(--mc-accent-glow),
    0 0 30px var(--mc-accent-glow),
    0 0 2px rgba(255,255,255,.4);
  line-height:1.1;
}
.offers-neon-sub{
  font-size:.78rem;
  color:var(--mc-muted);
  margin-top:.3rem;
}
.offers-track{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  padding:0 1.2rem 1rem;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.offers-track::-webkit-scrollbar{ display:none }
.offer-card{
  flex-shrink:0;
  width:min(270px,78vw);
  border-radius:14px;
  overflow:hidden;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  background:var(--mc-card);
  border:1.5px solid color-mix(in srgb,var(--mc-accent) 30%,transparent);
  box-shadow:0 4px 24px rgba(0,0,0,.4);
  position:relative;
  transition:box-shadow .25s,border-color .25s,transform .2s;
}
.offer-card:hover{
  transform:translateY(-4px);
  border-color:var(--mc-accent);
  box-shadow:
    0 0 20px color-mix(in srgb,var(--mc-accent) 40%,transparent),
    0 8px 28px rgba(0,0,0,.5);
}
.offer-img-wrap{
  height:155px;
  overflow:hidden;
  position:relative;
}
.offer-img-wrap::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:45px;
  background:linear-gradient(to top,var(--mc-card),transparent);
}
.offer-img{ width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s }
.offer-card:hover .offer-img{ transform:scale(1.06) }
.offer-body{
  padding:.85rem 1rem 1rem;
  display:flex;
  flex-direction:column;
  gap:.38rem;
  flex:1;
}
.offer-name{
  font-size:.95rem;
  font-weight:800;
  color:var(--mc-text);
  margin:0;
  text-shadow:0 0 8px color-mix(in srgb,var(--mc-accent-glow) 40%,transparent);
}
.offer-desc{
  font-size:.78rem;
  color:var(--mc-muted);
  margin:0;
  line-height:1.45;
}
.offer-cond{
  font-size:.74rem;
  color:var(--mc-accent);
  text-shadow:0 0 6px var(--mc-accent-glow);
  margin:0;
}
.offer-validity{ font-size:.7rem;color:var(--mc-muted);margin:0 }
.offer-order-btn{
  margin-top:auto !important;
  font-size:.8rem !important;
  padding:.48rem .9rem !important;
  text-decoration:none;
  width:fit-content;
  display:inline-flex;
  align-items:center;
}

@media(min-width:1024px){
  .reels-label-row{ padding:0 2rem .65rem }
  .reels-track{ padding:0 2rem .8rem }
  .reel-card{ width:170px }
  .offers-hd{ padding:0 2rem .85rem }
  .offers-track{ padding:0 2rem 1rem;gap:1.2rem }
  .offer-card{ width:280px }
}
/* ══════════════════════════════════════════════════════════════
   DAILY SPECIALS – PUBLIC MENU
═══════════════════════════════════════════════════════════════ */
.ds-section{
  overflow:hidden;
  background:transparent;
  border-top:1px solid rgba(255,255,255,.06);
}
.ds-inner{ padding:1.5rem 0 1.3rem }
.ds-hd{ padding:0 1.2rem .6rem }
.ds-title{
  font-size:clamp(1.3rem,4.5vw,2rem);
  font-weight:900;
  letter-spacing:.04em;
  color:var(--mc-text);
  text-shadow:
    0 0 var(--mc-neon-blur,10px) var(--mc-accent-glow),
    0 0 28px var(--mc-accent-glow);
  margin:0;
  line-height:1.1;
}
.ds-sub{
  font-size:.78rem;
  color:var(--mc-muted);
  margin:.25rem 0 0;
}
/* Day tabs row */
.ds-tabs-row{
  display:flex;
  gap:.45rem;
  overflow-x:auto;
  padding:.2rem 1.2rem .8rem;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.ds-tabs-row::-webkit-scrollbar{ display:none }
.ds-pub-tab{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.35rem .75rem;
  border-radius:99px;
  border:1.5px solid var(--mc-border,rgba(255,255,255,.15));
  background:transparent;
  color:var(--mc-muted);
  font-size:.75rem;
  font-weight:700;
  cursor:pointer;
  transition:border-color .2s,color .2s,box-shadow .2s,background .2s;
  white-space:nowrap;
  scroll-snap-align:start;
}
.ds-pub-tab:hover{
  border-color:var(--mc-accent);
  color:var(--mc-accent);
}
.ds-pub-tab.active{
  border-color:var(--mc-accent);
  background:color-mix(in srgb,var(--mc-accent) 18%,transparent);
  color:var(--mc-accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--mc-accent) 35%,transparent);
  text-shadow:0 0 6px var(--mc-accent-glow);
}
.ds-tab-icon-sm{ font-size:.85rem }
/* Day panels */
.ds-pub-panel{ display:none }
.ds-pub-panel.active{ display:block }
/* Cards filmstrip */
.ds-cards-track{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  padding:0 1.2rem 1rem;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.ds-cards-track::-webkit-scrollbar{ display:none }
.ds-card{
  flex-shrink:0;
  width:min(230px,72vw);
  border-radius:14px;
  overflow:hidden;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  background:var(--mc-card);
  border:1.5px solid color-mix(in srgb,var(--mc-accent) 25%,transparent);
  box-shadow:0 4px 20px rgba(0,0,0,.35);
  transition:border-color .25s,box-shadow .25s,transform .2s;
}
.ds-card:hover{
  transform:translateY(-4px);
  border-color:var(--mc-accent);
  box-shadow:0 0 18px color-mix(in srgb,var(--mc-accent) 40%,transparent),0 8px 24px rgba(0,0,0,.4);
}
.ds-card-img-wrap{ height:140px;overflow:hidden }
.ds-card-img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s;
}
.ds-card:hover .ds-card-img{ transform:scale(1.06) }
.ds-card-body{
  padding:.8rem 1rem .9rem;
  display:flex;
  flex-direction:column;
  gap:.3rem;
  flex:1;
}
.ds-card-name{
  font-size:.93rem;
  font-weight:800;
  color:var(--mc-text);
  margin:0;
  text-shadow:0 0 8px color-mix(in srgb,var(--mc-accent-glow) 35%,transparent);
}
.ds-card-desc{
  font-size:.76rem;
  color:var(--mc-muted);
  margin:0;
  line-height:1.45;
}
.ds-card-price{
  font-size:.95rem;
  font-weight:900;
  color:var(--mc-accent);
  text-shadow:0 0 8px var(--mc-accent-glow);
  margin:0;
}
.ds-add-btn{
  margin-top:auto !important;
  font-size:.78rem !important;
  padding:.42rem .85rem !important;
  text-decoration:none;
  width:100%;
  white-space:normal;
  justify-content:center;
  text-align:center;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
/* Button on non-today cards looks muted */
.ds-add-btn[data-today="false"]{
  opacity:.6;
  filter:grayscale(.4);
}
/* Offer add button — allow text wrap */
.offer-add-btn.mc-btn{
  white-space:normal;
  justify-content:center;
  text-align:center;
  line-height:1.3;
}
@media(min-width:1024px){
  .ds-hd{ padding:0 2rem .6rem }
  .ds-tabs-row{ padding:.2rem 2rem .8rem }
  .ds-cards-track{ padding:0 2rem 1rem;gap:1.2rem }
  .ds-card{ width:250px }
}