/* Menu app — layered on the shared design system */
.app-header .brand img { height: 44px; }
.app-header__inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:var(--nav-h); }
.app-header__links { display:flex; align-items:center; gap:1rem; }
.app-header__links .back { color:var(--espresso-soft); text-decoration:none; font-size:var(--step--1); display:none; }
@media (min-width:700px){ .app-header__links .back { display:inline; } }
.cart-btn { position:relative; }
.cart-btn .count { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--ivory); color:var(--pomegranate); font-size:.8rem; font-variation-settings:"wght" 700; }

/* Welcome */
.welcome { min-height: calc(100vh - var(--nav-h)); display:grid; place-items:center; padding-block: var(--space-m); }
.welcome__card { max-width: 560px; }
.welcome__choices { display:grid; gap:.75rem; margin-top:1.5rem; }
.welcome__choices .btn { width:100%; }
.btn--disabled { opacity:.45; pointer-events:none; }
.welcome__meta { margin-top:1.5rem; color:var(--espresso-soft); font-size:var(--step--1); }

/* Menu layout */
.menu-layout { display:grid; gap: var(--space-m); padding-block: var(--space-m); }
.menu-layout > * { min-width:0; }
.cat-nav { max-width:100%; }
@media (min-width: 980px){ .menu-layout { grid-template-columns: 200px 1fr; align-items:start; } }
.cat-nav { position: sticky; top: calc(var(--nav-h) + .5rem); z-index:5; background: var(--ivory); }
.cat-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:.4rem; overflow-x:auto; padding-bottom:.5rem; scrollbar-width:none; }
.cat-nav ul::-webkit-scrollbar { display:none; }
@media (min-width: 980px){ .cat-nav ul { flex-direction:column; overflow:visible; } }
.cat-nav a { display:block; white-space:nowrap; padding:.5rem .9rem; border-radius:999px; text-decoration:none; color:var(--espresso); border:1.5px solid var(--linen); font-size:var(--step--1); font-variation-settings:"wght" 600; }
.cat-nav a.is-active, .cat-nav a:hover { background:var(--espresso); color:var(--ivory); border-color:var(--espresso); }

.rules-bar { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; padding:.9rem 1.1rem; border:1px solid var(--linen); border-radius:10px; background:var(--ivory-deep); font-size:var(--step--1); color:var(--espresso-soft); margin-bottom: var(--space-m); }
.rules-bar strong { color:var(--espresso); }

.category { scroll-margin-top: calc(var(--nav-h) + 4.5rem); padding-bottom: var(--space-m); }
.category h2 { font-size: var(--step-3); }
.category__blurb { color:var(--espresso-soft); }
.group + .group { margin-top: var(--space-s); }
.group__head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--linen); padding-bottom:.4rem; margin: 1rem 0 .25rem; }
.group__head h3 { font-size: var(--step-1); font-family:var(--sans); font-variation-settings:"wght" 680; margin:0; }
.group__price { color:var(--olive); font-variation-settings:"wght" 640; font-size: var(--step--1); }

.item { display:grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items:center; padding: .85rem 0; border-bottom: 1px solid color-mix(in srgb, var(--linen) 60%, transparent); }
.item__name { font-variation-settings:"wght" 640; }
.item__tr { color:var(--olive); font-family:var(--serif); font-style:italic; font-size: var(--step--1); margin-left:.35rem; }
.item__blurb { color:var(--espresso-soft); font-size: var(--step--1); margin:0; }
.item__price { color:var(--espresso-soft); font-size:var(--step--1); }
.item__action { display:flex; justify-content:flex-end; }
.stepper { display:inline-flex; align-items:center; border:1.5px solid var(--espresso); border-radius:999px; overflow:hidden; }
.stepper button { width:40px; height:40px; border:0; background:transparent; color:var(--espresso); font-size:1.2rem; cursor:pointer; }
.stepper button:hover { background:var(--ivory-deep); }
.stepper input { width:52px; height:40px; border:0; text-align:center; font:inherit; font-variation-settings:"wght" 640; background:transparent; -moz-appearance:textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance:none; }

/* Package builder */
.pkg { border:1.5px solid var(--olive); border-radius:12px; padding: clamp(1.25rem, 3vw, 2rem); background: var(--white); margin-bottom: var(--space-m); }
.pkg h2 { font-size: var(--step-2); margin-bottom:.25rem; }
.pkg__tiers { display:flex; flex-wrap:wrap; gap:.5rem; margin: 1rem 0; }
.pkg__grid { display:grid; gap:1rem; }
@media (min-width: 720px){ .pkg__grid { grid-template-columns: 1fr 1fr 1fr; } }
.pkg__foot { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:1.25rem; }
.pkg__total { margin-left:auto; font-variation-settings:"wght" 700; }

/* Cart drawer */
.drawer { position:fixed; inset:0 0 0 auto; width:min(100%, 440px); background:var(--ivory); z-index:60; transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column; box-shadow:-10px 0 40px rgba(43,29,20,.12); }
.drawer[data-open="true"] { transform:none; }
.drawer__head { display:flex; align-items:center; justify-content:space-between; padding:1rem var(--gutter); border-bottom:1px solid var(--linen); }
.drawer__head h2 { font-size:var(--step-2); margin:0; }
.drawer__body { flex:1; overflow-y:auto; padding: 1rem var(--gutter); }
.drawer__foot { padding:1rem var(--gutter) calc(1rem + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--linen); }
.drawer__foot .btn { width:100%; }
.scrim { position:fixed; inset:0; background:rgba(43,29,20,.35); z-index:55; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.scrim[data-open="true"] { opacity:1; pointer-events:auto; }
@media (prefers-reduced-motion: reduce){ .drawer, .scrim { transition:none; } }
.line { display:grid; grid-template-columns: 1fr auto; gap:.25rem 1rem; padding:.85rem 0; border-bottom:1px solid var(--linen); }
.line__name { font-variation-settings:"wght" 640; }
.line__sub { color:var(--espresso-soft); font-size:var(--step--1); }
.line__ctl { display:flex; align-items:center; gap:.5rem; grid-column:1 / -1; justify-content:space-between; }
.line__remove { background:none; border:0; color:var(--pomegranate); cursor:pointer; font:inherit; font-size:var(--step--1); padding:.25rem 0; text-decoration:underline; text-underline-offset:.15em; }
.totals { display:grid; gap:.35rem; margin-top:1rem; }
.totals div { display:flex; justify-content:space-between; font-size:var(--step--1); color:var(--espresso-soft); }
.totals div.grand { font-size:var(--step-0); color:var(--espresso); font-variation-settings:"wght" 700; border-top:1px solid var(--linen); padding-top:.5rem; margin-top:.25rem; }
.empty { color:var(--espresso-soft); padding:2rem 0; text-align:center; }

/* Checkout */
.checkout { display:grid; gap: var(--space-m); padding-block: var(--space-m); }
@media (min-width: 960px){ .checkout { grid-template-columns: 1.2fr .8fr; align-items:start; } .summary { position:sticky; top: calc(var(--nav-h) + 1.5rem); } }
.summary { border:1px solid var(--linen); border-radius:12px; padding: clamp(1.25rem,3vw,1.75rem); background:var(--white); }
.summary h2 { font-size:var(--step-2); }
.summary .line { padding:.6rem 0; }
.notice { background:var(--ivory-deep); border-radius:10px; padding:1rem 1.2rem; font-size:var(--step--1); color:var(--espresso-soft); }
.notice strong { color:var(--espresso); }
.done { max-width: 620px; padding-block: var(--space-l); }
.done ol { padding-left:1.2em; }
.done li + li { margin-top:.5rem; }
.toast { position:fixed; left:50%; bottom:calc(1.25rem + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--espresso); color:var(--ivory); padding:.7rem 1.1rem; border-radius:999px; font-size:var(--step--1); z-index:70; opacity:0; transition:opacity .2s ease; pointer-events:none; }
.toast[data-show="true"] { opacity:1; }