/* Menu page */
.menu-hero{background:var(--tomato);color:var(--cheese);padding:2.5rem 0 2rem}
.menu-hero h1{font-size:clamp(2.4rem,6vw,4rem);margin-bottom:.2em}
.menu-hero p{margin:0;font-size:1.1rem}

.menu-bar{position:sticky;top:var(--header-h);z-index:50;background:var(--cheese);border-bottom:2px solid var(--line);padding:.75rem 0}
.tabs{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.6rem;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;position:relative}
.tab input,.toggle input{position:absolute;opacity:0;inset:0;cursor:pointer}
.tab span{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:.4rem 1rem;border-radius:var(--radius-pill);background:#fff;border:2px solid var(--line);font-weight:700;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.tab i{font-style:normal}
.tab input:checked+span{background:var(--oven);color:var(--cheese);border-color:var(--oven)}
.tab input:focus-visible+span,.toggle input:focus-visible+span{outline:3px solid var(--ember);outline-offset:2px}

.tools{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.tools .field{margin:0}
.tools__search{flex:1 1 220px}
.toggle{position:relative}
.toggle span{display:inline-flex;align-items:center;min-height:44px;padding:.4rem 1rem;border-radius:var(--radius-pill);border:2px solid var(--line);background:#fff;font-weight:600;transition:background .15s,color .15s}
.toggle input:checked+span{background:var(--basil);color:#fff;border-color:var(--basil)}
.toggle input:checked+span::before{content:"\2713\00a0"}
.tools .select{width:auto;min-width:150px}

.menu-page{padding-top:1.5rem}
.menu-count{color:var(--muted);font-weight:600;margin-bottom:1rem}
.menu-group{margin-bottom:3rem;scroll-margin-top:calc(var(--header-h) + 150px)}
.menu-group h2{font-size:clamp(1.6rem,3vw,2.2rem)}

/* Loading skeleton */
.skeleton{background:#fff;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow)}
.skeleton div{background:linear-gradient(90deg,#efe5d2 25%,#f8f1e3 50%,#efe5d2 75%) 0 0/200% 100%;animation:shimmer 1.2s linear infinite}
.skeleton .sk-img{height:190px}
.skeleton .sk-line{height:14px;margin:1rem 1.15rem 0;border-radius:7px}
.skeleton .sk-line:last-child{width:45%;margin-bottom:1.2rem}
@keyframes shimmer{to{background-position:-200% 0}}

/* Empty state */
.empty{text-align:center;padding:3rem 1rem;background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow)}
.empty p{margin-inline:auto}
.empty__icon{font-size:3.5rem;filter:grayscale(.6)}

@media (max-width:640px){
  .menu-bar{position:static}
  .tools .select{flex:1 1 140px}
}
@media (prefers-reduced-motion:reduce){.skeleton div{animation:none}}