/* QR Menu Page - Mobile First */
body[data-page="menu"]{background:var(--bg-primary)}

.menu-header{padding:1.25rem 0;text-align:center;background:var(--bg-secondary);border-bottom:1px solid var(--border-glass)}
.menu-header .container{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.menu-logo{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-heading);font-size:1.5rem;font-weight:700;color:var(--accent);justify-self:start}
.menu-header-copy{display:grid;justify-items:center;gap:.25rem;min-width:0}
.menu-welcome{color:var(--text-secondary);font-size:.9rem;margin:0}
.pickup-call{justify-self:end;display:inline-flex;align-items:center;gap:.65rem;padding:.55rem .78rem;border:1px solid rgba(212,164,76,.28);border-radius:var(--radius-full);background:rgba(212,164,76,.08);color:var(--text-primary);transition:all var(--transition-fast);white-space:nowrap}
.pickup-call:hover{border-color:rgba(212,164,76,.55);background:rgba(212,164,76,.14);transform:translateY(-1px)}
.pickup-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--bg-primary);flex:0 0 auto}
.pickup-icon svg{width:17px;height:17px}
.pickup-text{display:grid;gap:.05rem;text-align:left;line-height:1.05}
.pickup-text strong{font-size:.9rem;font-weight:800;color:var(--text-primary)}
.pickup-text small{font-size:.76rem;font-weight:700;color:var(--accent)}

.mobile-category-gate{display:none}
.mobile-category-current{display:none}

/* Search */
.menu-search-bar{padding:1rem 0;background:var(--bg-secondary);border-bottom:1px solid var(--border-glass);position:sticky;top:0;z-index:100}
.search-wrapper{position:relative;display:flex;align-items:center}
.search-icon{position:absolute;left:1rem;color:var(--text-muted);pointer-events:none}
.search-input{width:100%;padding:.85rem 2.5rem .85rem 3rem;background:var(--bg-tertiary);border:1px solid var(--border-glass);border-radius:var(--radius-full);color:var(--text-primary);font-size:.95rem;transition:all var(--transition-fast)}
.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.search-input::placeholder{color:var(--text-muted)}
.search-clear{position:absolute;right:1rem;font-size:1.3rem;color:var(--text-muted);cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center}

/* Category Tabs */
.category-tabs-wrapper{padding:.75rem 0;background:var(--bg-primary);border-bottom:1px solid var(--border-glass);position:sticky;top:56px;z-index:99}
.category-tabs{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.category-tabs::-webkit-scrollbar{display:none}
.category-tab{flex-shrink:0;padding:.5rem 1.2rem;border-radius:var(--radius-full);font-size:.85rem;font-weight:500;color:var(--text-secondary);border:1px solid var(--border-glass);background:transparent;transition:all var(--transition-fast);cursor:pointer;white-space:nowrap}
.category-tab:hover{color:var(--text-primary);border-color:var(--border-glass-hover)}
.category-tab.active{background:var(--accent);color:var(--bg-primary);border-color:var(--accent)}

/* Menu Grid */
.menu-main{padding:1.5rem 0 3rem;min-height:60vh}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.25rem}
.no-results{text-align:center;padding:3rem;color:var(--text-secondary);font-size:1rem}

/* Product Card */
.product-card{background:var(--bg-secondary);border:1px solid var(--border-glass);border-radius:var(--radius-xl);overflow:hidden;transition:all var(--transition-normal);cursor:pointer}
.product-card:hover{border-color:rgba(212,164,76,0.2);transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,0.3)}
.product-card-image{position:relative;height:200px;overflow:hidden;background:var(--bg-tertiary)}
.product-card-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}
.product-card:hover .product-card-image img{transform:scale(1.05)}
.product-card-tags{position:absolute;top:.75rem;left:.75rem;display:flex;gap:.3rem;flex-wrap:wrap}
.product-card-body{padding:1.25rem}
.product-card-body h3{font-size:1.15rem;font-family:var(--font-body);font-weight:600;margin-bottom:.35rem}
.product-card-body .product-desc{color:var(--text-secondary);font-size:.85rem;margin-bottom:.75rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-card-footer{display:flex;justify-content:space-between;align-items:center}
.product-card-price{font-size:1.25rem;font-weight:700;color:var(--accent)}
.product-card-ingredients{display:flex;gap:.25rem;flex-wrap:wrap}
.product-card-ingredients .badge{font-size:.65rem;padding:.15rem .5rem}

/* Product Modal */
.product-modal{max-width:500px;overflow:hidden}
.product-modal-image{position:relative;height:280px;overflow:hidden}
.product-modal-image img{width:100%;height:100%;object-fit:cover}
.product-modal-close{position:absolute;top:1rem;right:1rem;background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);color:white;font-size:1.5rem}
.product-modal-body{padding:1.5rem}
.product-modal-tags{display:flex;gap:.3rem;margin-bottom:.75rem;flex-wrap:wrap}
.product-modal-body h2{font-size:1.5rem;margin-bottom:.75rem;font-family:var(--font-body)}
.product-modal-desc{color:var(--text-secondary);line-height:1.7;margin-bottom:1.25rem;font-size:.95rem}
.product-modal-price{font-size:1.6rem;font-weight:700;color:var(--accent);margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-glass)}
.product-modal-section{margin-bottom:1.25rem}
.product-modal-section h4{font-family:var(--font-body);font-size:.85rem;font-weight:600;color:var(--text-secondary);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.5px}
.ingredient-list,.allergen-list{display:flex;gap:.4rem;flex-wrap:wrap}
.ingredient-chip{padding:.35rem .75rem;background:var(--bg-tertiary);border:1px solid var(--border-glass);border-radius:var(--radius-full);font-size:.8rem;color:var(--text-primary)}
.allergen-chip{padding:.35rem .75rem;background:rgba(243,156,18,0.1);border:1px solid rgba(243,156,18,0.2);border-radius:var(--radius-full);font-size:.8rem;color:var(--warning)}

/* Menu Footer */
.menu-footer{padding:1.5rem 0;background:var(--bg-secondary);border-top:1px solid var(--border-glass);text-align:center}
.menu-footer .container{display:flex;justify-content:space-between;align-items:center}
.menu-footer p{color:var(--text-muted);font-size:.85rem}

@media(max-width:480px){
  .menu-header{padding:.8rem 0;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),var(--bg-secondary)}
  .menu-header .container{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"brand call" "copy copy";text-align:left;gap:.62rem .75rem}
  .menu-logo{grid-area:brand;font-size:1.18rem;min-width:0}
  .menu-logo svg{width:22px;height:22px;padding:3px;border:1px solid rgba(212,164,76,.3);border-radius:50%;background:rgba(212,164,76,.08)}
  .menu-header-copy{grid-area:copy;justify-items:start;gap:.35rem;min-width:0;padding:.62rem .72rem;border:1px solid rgba(255,255,255,.075);border-radius:16px;background:rgba(255,255,255,.035)}
  .menu-welcome{font-size:.8rem;line-height:1.35;color:var(--text-secondary)}
  .menu-table-label{display:flex;align-items:center;gap:.45rem;margin:0;color:var(--text-muted);font-size:.72rem;font-weight:800}
  .menu-table-label strong{color:var(--accent);font-size:.78rem}
  .pickup-call{grid-area:call;align-self:center;padding:.42rem .5rem;gap:.45rem;border-radius:15px;background:rgba(212,164,76,.1)}
  .pickup-icon{width:28px;height:28px}
  .pickup-icon svg{width:15px;height:15px}
  .pickup-text strong{font-size:.76rem}
  .pickup-text small{font-size:.66rem}
  .mobile-category-gate{display:block;min-height:calc(100dvh - 94px);padding:1rem 0 2rem;background:
    radial-gradient(circle at 18% 0%,rgba(212,164,76,.16),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 34%),
    var(--bg-primary)}
  .mobile-category-gate-head{display:grid;gap:.35rem;margin:0 0 1rem}
  .mobile-category-gate-head span{color:var(--accent);font-size:.74rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
  .mobile-category-gate-head h1{margin:0;color:var(--text-primary);font-family:var(--font-heading);font-size:1.85rem;line-height:1.05;letter-spacing:0}
  .mobile-category-list{display:grid;gap:.68rem}
  .mobile-category-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:78px;border:1px solid rgba(255,255,255,.085);border-radius:18px;padding:0 1.1rem;background:
    linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
    color:var(--text-primary);box-shadow:0 18px 46px rgba(0,0,0,.26);text-align:left}
  .mobile-category-card span{font-size:1.05rem;font-weight:900;letter-spacing:.01em}
  .mobile-category-card svg{width:20px;height:20px;color:var(--accent);flex:0 0 auto}
  .mobile-category-card:active{transform:scale(.985);border-color:rgba(212,164,76,.36)}
  .mobile-category-current{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.7rem}
  .mobile-category-current button{display:inline-flex;align-items:center;gap:.45rem;min-height:36px;border:1px solid rgba(212,164,76,.28);border-radius:999px;padding:0 .82rem;background:rgba(212,164,76,.08);color:var(--accent);font-size:.78rem;font-weight:900}
  .mobile-category-current button svg{width:15px;height:15px}
  .mobile-category-current span{min-width:0;color:var(--text-secondary);font-size:.82rem;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .menu-page-content.mobile-gate-open .menu-search-bar,
  .menu-page-content.mobile-gate-open .category-tabs-wrapper,
  .menu-page-content.mobile-gate-open .menu-main,
  .menu-page-content.mobile-gate-open .menu-footer{display:none}
  .menu-page-content:not(.mobile-gate-open) .mobile-category-gate{display:none}
  .menu-grid{grid-template-columns:1fr}
  .product-card-image{height:180px}
  .modal-overlay[data-product-modal]{align-items:center;justify-content:center;padding:1rem}
  .product-modal{display:flex;flex-direction:column;width:100%;max-width:420px;height:min(680px,calc(100dvh - 2rem));max-height:calc(100dvh - 2rem);border-radius:22px;overflow:hidden}
  .product-modal-image{height:188px;min-height:188px;flex:0 0 auto}
  .product-modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:1.15rem 1.1rem 1.6rem}
  .product-modal-section:last-child{margin-bottom:0}
}