/* ==========================================================================
   The Fried Hangover 1.2 — DYNAMIC MENU + CART + CHECKOUT  (closeout C/B/E)
   Replaces the old static menu image with a data-driven premium card set,
   plus an add-to-cart / cart-drawer / checkout flow. Self-contained tokens so
   it works on index.html (which doesn't load the premium layer).
   ========================================================================== */
:root {
  --mn-bg: #0b0b0c;
  --mn-card: rgba(255,255,255,.035);
  --mn-brd: rgba(255,255,255,.10);
  --mn-gold: #E8C15A;
  --mn-orange: #E5392C;
  --mn-grad: linear-gradient(120deg, #FF7A5C 0%, #E5392C 55%, #CC2A20 100%);
  --mn-grad-gold: linear-gradient(120deg, #F6D98A 0%, #D4AF37 55%, #B8962E 100%);
}

/* ---- Section shell ------------------------------------------------------ */
.menu-live { background: radial-gradient(120% 90% at 50% 0%, #141414 0%, #0a0a0a 60%, #050505 100%); color:#fff; padding: clamp(48px,7vw,96px) 0; }
.menu-live__inner { max-width: 1220px; margin: 0 auto; padding: 0 clamp(16px,4vw,32px); }
.menu-live__head { text-align:center; margin-bottom: clamp(26px,4vw,44px); }
.menu-live__eyebrow { font-family:'Bungee',sans-serif; letter-spacing:.28em; font-size:.72rem; text-transform:uppercase; color:var(--mn-gold); margin:0 0 12px; }
.menu-live__title { font-family:'Bungee',sans-serif; text-transform:uppercase; font-size:clamp(2rem,6vw,3.6rem); line-height:1.04; margin:0; color:#fff; letter-spacing:.01em; }
.menu-live__title .accent { background:var(--mn-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.menu-live__sub { color:rgba(255,255,255,.62); max-width:56ch; margin:14px auto 0; line-height:1.6; }
.menu-live__gf { display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:8px 16px; border:1px solid rgba(34,197,94,.4); border-radius:999px; background:rgba(34,197,94,.08); color:#7CE0A0; font-size:.82rem; font-weight:600; letter-spacing:.02em; }
/* Prominent avocado-oil callout — every fried item is cooked in avocado oil. */
.menu-live__avocado { display:flex; align-items:center; gap:12px; max-width:60ch; margin:18px auto 0; padding:14px 20px; border:1.5px solid rgba(124,224,107,.55); border-radius:16px; background:linear-gradient(120deg,rgba(124,224,107,.12),rgba(240,69,58,.08)); color:#eafff0; font-size:.95rem; line-height:1.5; text-align:left; box-shadow:0 6px 22px rgba(0,0,0,.28); }
.menu-live__avocado b { color:#8fe6a0; }
.menu-live__avocado svg { flex:0 0 auto; color:#8fe6a0; }
@media (max-width:520px){ .menu-live__avocado { flex-direction:row; align-items:flex-start; font-size:.88rem; padding:12px 14px; } }

.menu-full-photo { max-width:min(720px, 100%); margin:0 auto clamp(30px,5vw,52px); border-radius:22px; overflow:hidden;
  border:1px solid rgba(255,255,255,.16); background:#0d0d0d; box-shadow:0 28px 80px rgba(0,0,0,.55); }
.menu-full-photo img { display:block; width:100%; height:auto; }


/* ---- Category filter chips (sticky) ------------------------------------ */
.menu-nav { position:sticky; top:60px; z-index:20; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:12px; margin:0 auto clamp(26px,4vw,40px); max-width:960px;
  background:rgba(10,10,10,.72); backdrop-filter:blur(12px); border:1px solid var(--mn-brd); border-radius:16px; }
.menu-nav__chip { appearance:none; cursor:pointer; border:1px solid var(--mn-brd); background:rgba(255,255,255,.04); color:rgba(255,255,255,.78);
  font-family:'Bungee',sans-serif; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; padding:9px 14px; border-radius:999px; transition:all .2s ease; }
.menu-nav__chip:hover { color:#fff; border-color:var(--mn-orange); }
.menu-nav__chip.is-active { background:var(--mn-grad); color:#161009; border-color:transparent; box-shadow:0 6px 18px rgba(229,57,44,.3); }

/* ---- Category block ---------------------------------------------------- */
.menu-cat { margin-bottom: clamp(40px,6vw,68px); scroll-margin-top:130px; }
.menu-cat__head { display:flex; align-items:baseline; gap:16px; margin-bottom:22px; }
.menu-cat__title { font-family:'Bungee',sans-serif; text-transform:uppercase; font-size:clamp(1.3rem,3.4vw,2.1rem); margin:0; color:#fff; letter-spacing:.02em; }
.menu-cat__rule { flex:1; height:2px; background:linear-gradient(90deg,var(--mn-orange),transparent); border-radius:2px; opacity:.6; }

/* ---- Grid + cards ------------------------------------------------------ */
.menu-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:clamp(18px,2.2vw,26px); }
.menu-card { display:flex; flex-direction:column; background:var(--mn-card); border:1px solid var(--mn-brd); border-radius:20px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s, box-shadow .28s; }
.menu-card:hover { transform:translateY(-6px); border-color:rgba(229,57,44,.5); box-shadow:0 20px 44px rgba(0,0,0,.5); }
.menu-card__media { position:relative; aspect-ratio:4/3; overflow:hidden; background:#161616; }
.menu-card__media img { width:100%; height:100%; object-fit:cover; background:#0d0d0d; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.menu-card:hover .menu-card__media img { transform:scale(1.06); }
.menu-card__price { position:absolute; top:12px; right:12px; font-family:'Bungee',sans-serif; font-size:.92rem; color:#161009;
  background:var(--mn-grad-gold); padding:6px 12px; border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,.4); }
.menu-card__body { display:flex; flex-direction:column; gap:8px; padding:18px 18px 20px; flex:1; }
.menu-card__name { font-family:'Bungee',sans-serif; text-transform:uppercase; font-size:1.02rem; line-height:1.15; margin:0; color:#fff; }
.menu-card__desc { color:rgba(255,255,255,.66); font-size:.9rem; line-height:1.55; margin:0; flex:1; }
.menu-card__opts { display:flex; flex-direction:column; gap:5px; margin-top:2px; }
.menu-card__opt { font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:var(--mn-gold); border:1px solid rgba(232,193,90,.3); padding:3px 8px; border-radius:6px; }
.menu-card__opts-label { font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mn-gold); }
.menu-card__sauce { appearance:none; -webkit-appearance:none; cursor:pointer; width:100%; color:#fff;
  background:rgba(255,255,255,.05) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e8c15a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center;
  border:1px solid rgba(232,193,90,.4); border-radius:10px; padding:9px 34px 9px 12px; font-size:.86rem; font-family:inherit; }
.menu-card__sauce:focus-visible { outline:2px solid var(--mn-gold); outline-offset:1px; }
.menu-card__sauce option { color:#161009; }
.menu-card__add { appearance:none; cursor:pointer; margin-top:6px; border:0; border-radius:12px; padding:12px 14px; width:100%;
  font-family:'Bungee',sans-serif; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#161009; background:var(--mn-grad);
  transition:filter .2s, transform .1s; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.menu-card__add:hover { filter:brightness(1.07); }
.menu-card__add:active { transform:scale(.98); }
.menu-card__add svg { width:16px; height:16px; }

/* ---- Combo feature card ------------------------------------------------ */
.menu-combo { display:grid; grid-template-columns:1.1fr 1fr; gap:0; border:1px solid rgba(232,193,90,.4); border-radius:24px; overflow:hidden;
  background:linear-gradient(120deg, rgba(232,193,90,.08), rgba(229,57,44,.05)); box-shadow:0 16px 44px rgba(0,0,0,.5); }
.menu-combo__media { position:relative; min-height:240px; }
.menu-combo__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#0d0d0d; }
.menu-combo__body { padding:clamp(24px,3.5vw,40px); display:flex; flex-direction:column; justify-content:center; gap:12px; }
.menu-combo__tag { font-family:'Bungee',sans-serif; letter-spacing:.16em; font-size:.66rem; text-transform:uppercase; color:var(--mn-gold); }
.menu-combo__title { font-family:'Bungee',sans-serif; text-transform:uppercase; font-size:clamp(1.6rem,3.6vw,2.4rem); margin:0; color:#fff; }
.menu-combo__price { font-family:'Bungee',sans-serif; font-size:2rem; background:var(--mn-grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.menu-combo__desc { color:rgba(255,255,255,.72); line-height:1.6; margin:0; }
@media (max-width:720px){ .menu-combo { grid-template-columns:1fr; } .menu-combo__media { min-height:200px; } }

/* ---- Xtra toppings note block ----------------------------------------- */
.menu-toppings { border:1px dashed var(--mn-brd); border-radius:16px; padding:18px 22px; margin-top:8px; background:rgba(255,255,255,.02); }
.menu-toppings__h { font-family:'Bungee',sans-serif; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mn-gold); margin:0 0 10px; }
.menu-toppings__list { display:flex; flex-direction:column; gap:7px; margin:0; padding:0; list-style:none; }
.menu-toppings__list li { color:rgba(255,255,255,.72); font-size:.86rem; display:flex; justify-content:space-between; gap:12px; border-bottom:1px dashed rgba(255,255,255,.08); padding-bottom:6px; }
.menu-toppings__list li:last-child { border-bottom:0; padding-bottom:0; }
.menu-toppings__list b { color:#fff; }

/* ---- Floating cart button --------------------------------------------- */
.cart-fab { position:fixed; right:20px; bottom:20px; z-index:60; display:inline-flex; align-items:center; gap:10px; cursor:pointer; border:0;
  font-family:'Bungee',sans-serif; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:#161009; background:var(--mn-grad);
  padding:14px 20px; border-radius:999px; box-shadow:0 12px 30px rgba(229,57,44,.4); transition:transform .2s, box-shadow .2s; }
.cart-fab:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(229,57,44,.5); }
.cart-fab svg { width:20px; height:20px; }
.cart-fab__count { min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:#111; color:#fff; font-size:.72rem; display:inline-flex; align-items:center; justify-content:center; }
.cart-fab[hidden]{ display:none; }

/* ---- Cart drawer + checkout modal ------------------------------------- */
.cart-scrim { position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.cart-scrim.is-open { opacity:1; visibility:visible; }
.cart-drawer { position:fixed; top:0; right:0; bottom:0; z-index:80; width:min(420px,92vw); background:#0e0e0f; border-left:1px solid var(--mn-brd);
  transform:translateX(100%); transition:transform .34s cubic-bezier(.2,.7,.2,1); display:flex; flex-direction:column; box-shadow:-20px 0 60px rgba(0,0,0,.6); }
.cart-drawer.is-open { transform:translateX(0); }
.cart-drawer__head { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--mn-brd); }
.cart-drawer__title { font-family:'Bungee',sans-serif; text-transform:uppercase; font-size:1.1rem; margin:0; color:#fff; }
.cart-drawer__close { appearance:none; cursor:pointer; background:none; border:0; color:rgba(255,255,255,.7); font-size:1.5rem; line-height:1; padding:4px 8px; }
.cart-drawer__close:hover { color:#fff; }
.cart-drawer__body { flex:1; overflow-y:auto; padding:16px 22px; }
.cart-empty { color:rgba(255,255,255,.5); text-align:center; padding:50px 10px; }
.cart-line { display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.cart-line__img { width:56px; height:56px; border-radius:10px; object-fit:cover; background:#1a1a1a; }
.cart-line__name { font-weight:700; color:#fff; font-size:.9rem; margin:0 0 2px; }
.cart-line__meta { color:rgba(255,255,255,.5); font-size:.76rem; }
.cart-line__right { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.cart-line__price { color:var(--mn-gold); font-weight:700; font-variant-numeric:tabular-nums; }
.cart-qty { display:inline-flex; align-items:center; border:1px solid var(--mn-brd); border-radius:8px; overflow:hidden; }
.cart-qty button { appearance:none; cursor:pointer; background:rgba(255,255,255,.05); border:0; color:#fff; width:26px; height:26px; font-size:1rem; line-height:1; }
.cart-qty button:hover { background:var(--mn-orange); color:#161009; }
.cart-qty span { min-width:28px; text-align:center; font-size:.85rem; color:#fff; }
.cart-drawer__foot { padding:18px 22px 24px; border-top:1px solid var(--mn-brd); }
.cart-total { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.cart-total b { font-family:'Bungee',sans-serif; font-size:1.3rem; color:#fff; }
.cart-total .amt { font-family:'Bungee',sans-serif; font-size:1.5rem; background:var(--mn-grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cart-pay-note { font-size:.74rem; color:rgba(255,255,255,.5); margin:0 0 14px; }
.cart-checkout { appearance:none; cursor:pointer; width:100%; border:0; border-radius:14px; padding:15px; font-family:'Bungee',sans-serif; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:#161009; background:var(--mn-grad); transition:filter .2s; }
.cart-checkout:hover { filter:brightness(1.07); }
.cart-checkout:disabled { opacity:.5; cursor:not-allowed; }

/* checkout form */
.co-form { display:grid; gap:14px; }
.co-field label { display:block; font-family:'Bungee',sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:.6rem; color:var(--mn-gold); margin:0 0 6px; }
.co-field input, .co-field textarea, .co-field select { width:100%; background:rgba(255,255,255,.04); border:1px solid var(--mn-brd); border-radius:10px; padding:12px 14px; color:#fff; font-size:.95rem; font-family:inherit; }
.co-field input:focus, .co-field textarea:focus, .co-field select:focus { outline:none; border-color:rgba(229,57,44,.6); box-shadow:0 0 0 3px rgba(229,57,44,.14); }
.co-status { font-size:.85rem; color:rgba(255,255,255,.65); margin:0; min-height:1em; }
.co-back { background:none; border:0; color:rgba(255,255,255,.6); cursor:pointer; font-size:.82rem; padding:0; margin-bottom:4px; }
.co-back:hover { color:#fff; }

/* per-item Square checkout */
.co-pay-intro { font-size:.82rem; color:rgba(255,255,255,.62); margin:10px 0 14px; line-height:1.45; }
.co-pay-line { display:flex; align-items:center; gap:12px; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--mn-brd); }
.co-pay-line__info { min-width:0; }
.co-pay-line .cart-line__name { margin:0 0 2px; }
.co-pay-btn { flex:none; appearance:none; text-decoration:none; white-space:nowrap; cursor:pointer; border:0; border-radius:12px; padding:11px 16px; font-family:'Bungee',sans-serif; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:#161009; background:var(--mn-grad); transition:filter .2s; }
.co-pay-btn:hover { filter:brightness(1.07); }
.co-pay-line--soon { opacity:.7; }
.co-pay-line--soon .cart-line__meta { color:var(--mn-gold); }

/* confirmation */
.co-confirm { text-align:center; padding:20px 6px; }
.co-confirm__badge { width:64px; height:64px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.5); }
.co-confirm__badge svg { width:32px; height:32px; color:#22C55E; }
.co-confirm__num { font-family:'Bungee',sans-serif; font-size:1.6rem; color:var(--mn-gold); margin:6px 0; letter-spacing:.04em; }
.co-confirm p { color:rgba(255,255,255,.72); line-height:1.6; }

@media (prefers-reduced-motion: reduce){
  .menu-card, .menu-card__media img, .cart-drawer, .cart-scrim, .cart-fab { transition:none !important; }
}