:root{
    --bg-dark:#17110D;
    --bg-dark-2:#221912;
    --red:#C6281D;
    --red-deep:#8F1B13;
    --gold:#F2A900;
    --gold-light:#FFCB4D;
    --green:#1F5C3D;
    --green-deep:#123C28;
    --cream:#FBF5E7;
    --cream-warm:#F3E7CE;
    --ink:#1C140E;
    --ink-soft:#4A3C2E;
    --shadow: 0 18px 40px -12px rgba(20,12,6,0.35);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Poppins', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4,.display{
    font-family:'Fredoka', sans-serif;
    margin:0;
  }
  img{max-width:100%; display:block;}
  button{
    font-family:inherit; cursor:pointer;
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    -webkit-tap-highlight-color:transparent;
    outline:none;
  }
  a{color:inherit; -webkit-tap-highlight-color:transparent;}
  .wrap{max-width:1100px; margin:0 auto; padding:0 24px;}
  section[id]{ scroll-margin-top:118px; }

  /* ===== NAV ===== */
  .nav{
    position:sticky; top:0; z-index:60;
    background:var(--bg-dark);
    border-bottom:3px solid var(--gold);
  }
  .nav-inner{
    max-width:1100px; margin:0 auto; padding:10px 24px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .nav-logo{ display:flex; align-items:center; gap:10px; }
  .nav-logo img{ height:44px; width:auto; }
  .cart-btn{
    position:relative;
    background:var(--red);
    border:2px solid var(--gold);
    color:var(--cream);
    border-radius:999px;
    padding:10px 18px 10px 14px;
    display:flex; align-items:center; gap:8px;
    font-weight:600; font-size:14px;
    transition:transform .15s ease, background .2s ease;
  }
  .cart-btn:hover{ transform:translateY(-1px); background:var(--red-deep); }
  .cart-btn svg{ width:20px; height:20px; }
  .cart-count{
    position:absolute; top:-8px; right:-8px;
    background:var(--gold); color:var(--ink);
    font-size:11px; font-weight:700;
    width:20px; height:20px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--bg-dark);
  }

  /* ===== ORDER MODE BAR ===== */
  .order-mode-bar{
    background:var(--gold); border-bottom:2px solid var(--red);
    padding:9px 0;
  }
  .order-mode-inner{
    max-width:1100px; margin:0 auto; padding:0 24px;
    display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  }
  .order-mode-label{
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:12.5px; color:var(--ink);
  }
  .mode-toggle{
    display:flex; background:rgba(0,0,0,0.12); border-radius:999px; padding:3px; gap:3px;
  }
  .mode-btn{
    background:transparent; border:none; color:var(--ink);
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:12.5px;
    padding:6px 14px; border-radius:999px; transition:background .15s ease, color .15s ease;
  }
  .mode-btn.active{ background:var(--bg-dark); color:var(--cream); }

  /* ===== TOP BANNER SLIDESHOW ===== */
  /* A floating, rounded banner: about 92% of the screen on phones, centred with side margins on larger screens.
     The slides sit in a horizontal scroll-snap track, so swiping is native (smooth, with momentum) and never blocks
     normal up/down page scrolling. Kept at the banners' own 1792:592 proportions so no image is cropped. */
  .banner-strip{
    position:relative; isolation:isolate;
    width:92%; max-width:1240px; margin:0 auto;
    aspect-ratio:1792 / 592;
    background:var(--bg-dark); border-radius:20px; overflow:hidden;
    box-shadow:0 0 0 1px rgba(242,169,0,0.32), 0 16px 36px rgba(0,0,0,0.6), 0 4px 10px rgba(0,0,0,0.4);
  }
  .strip-track{
    display:flex; width:100%; height:100%; border-radius:inherit;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .strip-track::-webkit-scrollbar{ display:none; }
  .strip-slide{
    flex:0 0 100%; width:100%; height:100%; object-fit:cover; display:block;
    scroll-snap-align:start; scroll-snap-stop:always;
    -webkit-user-drag:none; user-select:none; -webkit-user-select:none; pointer-events:none;
  }
  .banner-strip-dots{
    position:absolute; left:50%; bottom:9px; transform:translateX(-50%); z-index:2;
    display:flex; align-items:center; gap:6px; padding:5px 9px;
    background:rgba(23,17,13,0.38); border-radius:999px;
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  }
  .strip-dot{
    position:relative; width:6px; height:6px; border-radius:999px;
    background:rgba(255,255,255,0.65); cursor:pointer;
    transition:width .25s ease, background .25s ease;
  }
  .strip-dot::after{ content:""; position:absolute; inset:-9px -4px; }   /* bigger tap area, same look */
  .strip-dot.active{ width:20px; background:var(--gold); }
  .strip-arrow{
    display:none; position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:38px; height:38px; padding:0; border-radius:50%; cursor:pointer;
    align-items:center; justify-content:center; color:#fff;
    background:rgba(23,17,13,0.5); border:1px solid rgba(255,255,255,0.35);
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    transition:background .15s ease, border-color .15s ease;
  }
  .strip-arrow:hover, .strip-arrow:focus-visible{ background:var(--red); border-color:var(--gold); }
  .strip-prev{ left:12px; }
  .strip-next{ right:12px; }
  @media (hover:hover) and (pointer:fine) and (min-width:700px){ .strip-arrow{ display:flex; } }
  @media (min-width:700px){ .banner-strip-dots{ bottom:12px; } }
  @media (prefers-reduced-motion: reduce){ .strip-dot, .strip-arrow{ transition:none; } }

  /* ===== HOME TOP: floating carousel + compact intro ===== */
  /* One continuous dark section (the same dark as the header and the old hero) so the rounded carousel floats on it,
     followed by a slim intro with the Order Now / See Menu buttons. */
  .home-top{
    position:relative;
    background:radial-gradient(120% 140% at 50% -10%, #2A1F16 0%, var(--bg-dark) 55%, var(--bg-dark) 100%);
    padding:16px 0 0;
  }
  .hero{ position:relative; }
  .rays{
    position:absolute; inset:0;
    display:flex; align-items:flex-start; justify-content:center;
    pointer-events:none;
  }
  .rays svg{
    width:900px; max-width:220vw; opacity:0.5; margin-top:-120px;
  }
  .hero-inner{ width:92%; max-width:1240px; margin:0 auto; padding:18px 0 26px; }
  .hero-text{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
  /* The page keeps its main heading for screen readers and search engines; the header logo carries the brand visually. */
  .hero-title{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  .eyebrow-pill{
    display:inline-block;
    background:var(--green); color:var(--cream);
    font-weight:600; font-size:13px; letter-spacing:.4px;
    padding:6px 16px; border-radius:999px;
    border:2px solid var(--gold-light);
    transform:rotate(-2deg);
  }
  .hero-sub{
    margin:0; font-size:15px; line-height:1.55; color:#D9CBB8; max-width:34ch;
  }
  .hero-ctas{ margin-top:6px; width:100%; display:flex; justify-content:center; gap:12px; }
  .hero-ctas .btn-primary, .hero-ctas .btn-ghost{ flex:1 1 0; max-width:170px; text-align:center; }
  .btn-primary{
    background:var(--gold);
    color:var(--ink);
    border:none;
    font-weight:700; font-size:15px;
    padding:15px 30px;
    border-radius:14px;
    box-shadow:0 10px 0 0 var(--red-deep);
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .btn-primary:hover{ transform:translateY(2px); box-shadow:0 8px 0 0 var(--red-deep); }
  .btn-primary:active{ transform:translateY(10px); box-shadow:0 0 0 0 var(--red-deep); }
  .btn-ghost{
    background:transparent;
    color:var(--cream);
    border:2px solid #55483A;
    font-weight:600; font-size:15px;
    padding:13px 26px;
    border-radius:14px;
  }
  .hero-tag-strip{
    background:var(--red);
    border-top:3px solid var(--gold);
    border-bottom:3px solid var(--gold);
    padding:7px 0;
    overflow:hidden;
    white-space:nowrap;
  }
  .hero-tag-strip .track{ display:inline-flex; animation:scroll-left 22s linear infinite; }
  .hero-tag-strip span{
    color:var(--cream); font-family:'Fredoka', sans-serif; font-weight:600; font-size:15px;
    padding:0 22px; display:inline-flex; align-items:center; gap:22px;
  }
  @keyframes scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  @media (min-width: 700px){
    .home-top{ padding-top:24px; }
  }
  @media (min-width: 821px){
    .hero-inner{ padding:22px 0 32px; }
    .hero-text{ flex-direction:row; justify-content:space-between; text-align:left; gap:28px; }
    .hero-sub{ max-width:none; flex:1; font-size:16px; }
    .hero-ctas{ width:auto; margin-top:0; flex:0 0 auto; }
    .hero-ctas .btn-primary, .hero-ctas .btn-ghost{ flex:0 0 auto; max-width:none; }
  }

  /* ===== CATEGORY NAV ===== */
  .category-nav{
    position:sticky; top:65px; z-index:55;
    background:var(--cream-warm);
    border-bottom:2px solid #E9DCC3;
    padding:4px 0;
  }
  /* One row that scrolls sideways when the pills don't fit (padding keeps the pulsing glow from being clipped) */
  .category-nav-inner{
    max-width:1100px; margin:0 auto; padding:8px 24px;
    display:flex; gap:10px; flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .category-nav-inner::-webkit-scrollbar{ display:none; }
  .category-nav-inner > .cat-pill{ flex:0 0 auto; white-space:nowrap; }
  /* centred when everything fits, starts from the left and scrolls when it does not */
  .category-nav-inner > .cat-pill:first-child{ margin-left:auto; }
  .category-nav-inner > .cat-pill:last-child{ margin-right:auto; }
  .cat-pill{
    background:var(--bg-dark); color:var(--cream);
    border:2px solid transparent;
    padding:9px 22px; border-radius:999px;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px;
    transition:border-color .15s ease, background .15s ease;
  }
  .cat-pill.active{ border-color:var(--gold); background:var(--red); }
  .cat-pill-hot{
    background:linear-gradient(135deg, var(--red), var(--red-deep));
    border-color:var(--gold);
    animation:hotPulse 2.2s ease-in-out infinite;
  }
  @keyframes hotPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(198,40,29,0.45); }
    50%{ box-shadow:0 0 0 6px rgba(198,40,29,0); }
  }

  /* ===== WEB EXCLUSIVES ===== */
  .web-exclusive-section{
    position:relative;
    background:radial-gradient(120% 140% at 50% -10%, #2A1F16 0%, var(--bg-dark) 55%, var(--bg-dark) 100%);
    padding:20px 0 44px;
    overflow:hidden;
  }
  .web-exclusive-rays{
    position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center;
    pointer-events:none; z-index:1;
  }
  .web-exclusive-rays svg{ width:800px; max-width:200vw; opacity:0.35; margin-top:-100px; }
  .web-exclusive-section .web-exclusive-eyebrow{ color:var(--gold-light); }
  .web-exclusive-section .section-head .web-exclusive-h2{ color:var(--cream); }
  .web-exclusive-p{ color:#D9CBB8 !important; }

  .deal-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
  @media (min-width:720px){ .deal-grid{ grid-template-columns:repeat(2, 1fr); } }

  .deal-card{
    position:relative;
    background:linear-gradient(160deg, #241A12 0%, var(--bg-dark) 100%);
    border:3px solid var(--gold);
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 20px 50px -12px rgba(0,0,0,0.55);
  }
  .deal-badge{
    position:absolute; top:16px; left:16px; z-index:3;
    background:var(--gold); color:var(--ink);
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:11.5px;
    padding:6px 14px; border-radius:999px; border:2px solid var(--cream);
    box-shadow:0 4px 12px rgba(0,0,0,0.45);
    transform:rotate(-3deg);
  }
  .deal-save-badge{
    position:absolute; top:16px; right:16px; z-index:3;
    background:var(--green); color:var(--cream);
    font-family:'Fredoka', sans-serif; font-weight:700; font-size:12px;
    padding:7px 13px; border-radius:12px; border:2px solid var(--gold-light);
    transform:rotate(2deg);
  }
  .deal-media{
    position:relative; display:flex; align-items:flex-end; justify-content:center;
    gap:0; padding:44px 16px 10px; min-height:180px;
    background:radial-gradient(120% 100% at 50% 0%, rgba(242,169,0,0.12), transparent 70%);
  }
  .deal-media img{
    width:52%; object-fit:contain; filter:drop-shadow(0 14px 14px rgba(0,0,0,.5));
  }
  .deal-media img.deal-img-2{ margin-left:-14px; }
  .deal-media-full{
    padding:0; min-height:0; background:none; display:block;
  }
  .deal-media-full img{
    width:100%; height:auto; display:block; object-fit:cover; filter:none;
  }
  .deal-media-full .deal-badge{
    position:absolute; top:14px; left:14px; margin:0;
  }
  .deal-info{ padding:6px 22px 26px; text-align:center; }
  .deal-info h3{
    font-family:'Fredoka', sans-serif; font-weight:700; font-size:26px; color:var(--cream);
    margin-bottom:6px;
  }
  .deal-info .desc{ font-size:13.5px; color:#CBBBA5; line-height:1.55; margin-bottom:16px; }
  .deal-price-row{
    display:flex; align-items:baseline; justify-content:center; gap:10px; margin-bottom:18px;
  }
  .deal-price-now{ font-family:'Fredoka', sans-serif; font-weight:700; font-size:30px; color:var(--gold); }
  .deal-price-was{ font-size:15px; color:#8A7A63; text-decoration:line-through; }
  .deal-add-btn{
    width:100%; background:var(--gold); color:var(--ink); border:none;
    font-family:'Fredoka', sans-serif; font-weight:700; font-size:16px; padding:15px;
    border-radius:14px; box-shadow:0 8px 0 0 var(--red-deep);
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .deal-add-btn:hover{ transform:translateY(2px); box-shadow:0 6px 0 0 var(--red-deep); }

  /* ===== MENU ===== */
  .menu-section{ padding:56px 0 20px; }
  .menu-section.alt{ background:var(--cream-warm); }
  .section-head{ max-width:600px; margin:0 auto 20px; text-align:center; }
  .section-eyebrow{
    display:inline-block; font-weight:600; font-size:13px;
    color:var(--green); letter-spacing:1px; text-transform:uppercase;
    margin-bottom:8px;
  }
  .section-head h2{ font-size:clamp(28px, 4vw, 38px); color:var(--ink); }
  .section-head p{ margin-top:10px; color:var(--ink-soft); font-size:15px; line-height:1.6; }

  .subgroup-title{
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:16px;
    color:var(--red); margin:30px 0 14px; padding-left:2px;
  }
  .subgroup-note{ font-size:12px; color:var(--ink-soft); font-weight:400; margin-left:6px; }

  .item-grid{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;
  }
  @media (min-width: 620px){ .item-grid{ grid-template-columns:repeat(3, 1fr); } }

  .item-card{
    background:var(--bg-dark);
    border-radius:18px;
    border:2px solid #2B2118;
    overflow:hidden;
    display:flex; flex-direction:column;
    box-shadow:var(--shadow);
  }
  .item-thumb{
    aspect-ratio:1/1;
    background:radial-gradient(120% 120% at 30% 20%, #2A1F16, var(--bg-dark));
    display:flex; align-items:center; justify-content:center;
    font-size:38px;
    position:relative;
  }
  .item-thumb img{ width:78%; height:78%; object-fit:contain; filter:drop-shadow(0 10px 10px rgba(0,0,0,.4)); }
  .item-info{ padding:10px 11px 12px; flex:1; display:flex; flex-direction:column; }
  .item-info h4{ font-size:13.5px; color:var(--cream); line-height:1.25; margin-bottom:4px; }
  .item-info .desc{
    font-size:10.5px; color:#B9A98F; line-height:1.4; margin-bottom:8px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    flex:1;
  }
  .item-price-row{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
  .item-price{ font-weight:600; color:var(--gold-light); font-size:12.5px; }
  .add-mini{
    background:var(--red); border:2px solid var(--gold); color:var(--cream);
    border-radius:9px; padding:6px 11px; font-size:11.5px; font-weight:600;
    white-space:nowrap;
  }
  .add-mini:hover{ background:var(--red-deep); }

  /* ===== FOOTER ===== */
  footer{ background:var(--green-deep); color:var(--cream); padding:50px 24px 30px; margin-top:50px; }
  .footer-inner{ max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:26px; }
  .footer-brand img{ height:52px; margin-bottom:10px; }
  .footer-brand p{ color:#BFD3C6; font-size:14px; max-width:260px; line-height:1.6; }
  .footer-col h4{ font-family:'Fredoka', sans-serif; font-size:15px; color:var(--gold-light); margin-bottom:10px; }
  .footer-col p, .footer-col a{ display:block; color:#CFE0D5; font-size:14px; text-decoration:none; margin-bottom:6px; }
  .footer-bottom{ max-width:1100px; margin:34px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,0.12); font-size:12.5px; color:#9BB3A5; text-align:center; }

  /* ===== SHARED OVERLAY ===== */
  .overlay{
    position:fixed; inset:0; background:rgba(20,14,8,0.5);
    opacity:0; pointer-events:none; transition:opacity .25s ease;
    z-index:90;
  }
  .overlay.show{ opacity:1; pointer-events:auto; }

  /* ===== CART DRAWER ===== */
  .drawer{
    position:fixed; top:0; right:0; height:100%;
    width:min(400px, 92vw);
    background:var(--cream);
    z-index:95;
    transform:translateX(100%);
    transition:transform .3s ease;
    display:flex; flex-direction:column;
    box-shadow:-10px 0 30px rgba(0,0,0,0.25);
  }
  .drawer.show{ transform:translateX(0); }
  .drawer-head{
    background:var(--bg-dark); color:var(--cream); padding:20px 22px;
    display:flex; align-items:center; justify-content:space-between;
    border-bottom:3px solid var(--gold);
  }
  .drawer-head h3{ font-size:20px; }
  .drawer-close{ background:none; border:none; color:var(--cream); font-size:22px; line-height:1; }
  .drawer-scroll{ flex:1; overflow-y:auto; }
  .drawer-body{ padding:18px 22px 4px; }
  .drawer-foot{ padding:16px 22px 24px; border-top:2px solid #E9DCC3; background:var(--cream-warm); flex-shrink:0; }
  .delivery-form{ padding:6px 22px 18px; border-top:1px dashed #D9C7A3; margin-top:6px; }
  .empty-cart{ text-align:center; color:var(--ink-soft); margin-top:60px; font-size:14.5px; }
  .cart-item{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid #E9DCC3; }
  .cart-item .ci-thumb{
    width:56px; height:56px; border-radius:10px; background:var(--bg-dark);
    display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0;
  }
  .cart-item .ci-thumb img{ width:100%; height:100%; object-fit:contain; padding:6px; }
  .ci-info{ flex:1; }
  .ci-info .name{ font-weight:600; font-size:14.5px; }
  .ci-info .meta{ font-size:12px; color:var(--ink-soft); margin-top:2px; line-height:1.4; }
  .ci-row{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
  .ci-stepper{ display:flex; align-items:center; gap:8px; }
  .ci-stepper button{ width:24px; height:24px; border-radius:6px; border:1px solid #D9C7A3; background:#fff; font-weight:700; }
  .ci-price{ font-weight:600; color:var(--red); font-size:14px; }
  .ci-remove{ background:none; border:none; color:#A94A3E; font-size:12px; text-decoration:underline; margin-left:10px; }

  .delivery-form{ margin-bottom:16px; }
  .df-input{
    width:100%; font-family:'Poppins', sans-serif; font-size:13.5px;
    padding:11px 13px; margin-bottom:9px;
    border:2px solid #D9C7A3; border-radius:10px;
    background:#fff; color:var(--ink);
  }
  .df-input:focus{ outline:none; border-color:var(--red); }
  .df-input.invalid{ border-color:#C0392B; background:#FFF3F1; }
  .df-textarea{ resize:vertical; min-height:56px; font-family:'Poppins', sans-serif; }
  .df-select{
    appearance:none; -webkit-appearance:none;
    background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%234A3C2E" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 12px center;
    background-size:16px; padding-right:36px; cursor:pointer;
  }
  .df-select option[value=""]{ color:#999; }
  .area-note{ font-size:11px; color:var(--ink-soft); margin:-4px 0 9px; }
  .cart-mode-toggle{
    display:flex; background:var(--cream-warm); border:2px solid #D9C7A3; border-radius:999px;
    padding:3px; gap:3px; margin-bottom:12px;
  }
  .cart-mode-toggle .mode-btn{ flex:1; color:var(--ink); padding:8px 10px; }
  .cart-mode-toggle .mode-btn.active{ background:var(--red); color:var(--cream); }
  .pickup-note{
    background:var(--green); color:var(--cream); border-radius:12px; padding:12px 14px;
    font-size:13px; line-height:1.5; margin-bottom:10px;
  }
  .pickup-note strong{ color:var(--gold-light); }
  .df-error{
    display:none; color:#B3271A; font-size:12px; font-weight:600; margin:2px 0 4px;
  }
  .df-error.show{ display:block; }

  .map-toggle-btn{
    width:100%; background:var(--bg-dark); color:var(--cream); border:2px solid var(--gold);
    border-radius:10px; padding:11px; font-family:'Fredoka', sans-serif; font-weight:600; font-size:13.5px;
    margin-bottom:9px;
  }
  .map-toggle-btn:hover{ background:var(--bg-dark-2); }
  .map-picker{
    border:2px solid #D9C7A3; border-radius:12px; padding:12px; margin-bottom:10px; background:#fff;
  }
  .map-search-row{ display:flex; gap:8px; margin-bottom:6px; }
  .map-search-input{ margin-bottom:0; flex:1; font-size:12.5px; padding:9px 11px; }
  .map-search-btn{
    background:var(--red); color:var(--cream); border:2px solid var(--gold); border-radius:10px;
    padding:0 14px; font-weight:600; font-size:12.5px; white-space:nowrap;
  }
  .map-results{ margin-bottom:6px; }
  .map-result-item{
    padding:8px 10px; font-size:12px; color:var(--ink); background:var(--cream-warm);
    border-radius:8px; margin-bottom:5px; cursor:pointer; border:1px solid #E9DCC3;
  }
  .map-result-item:hover{ background:#EFE1C4; }
  .leaflet-map{
    width:100%; height:220px; border-radius:10px; overflow:hidden; border:2px solid #E9DCC3;
  }
  .map-actions{ margin-top:8px; }
  .map-locate-btn{
    width:100%; background:var(--green); color:#fff; border:none; border-radius:10px;
    padding:10px; font-weight:600; font-size:12.5px;
  }
  .map-locate-btn:hover{ background:var(--green-deep); }
  .map-pin-note{ font-size:11px; color:var(--ink-soft); margin:8px 0 0; text-align:center; }
  .map-status{ font-size:11.5px; color:var(--ink-soft); margin:6px 0 0; text-align:center; }
  .total-row{ display:flex; justify-content:space-between; align-items:center; font-family:'Fredoka', sans-serif; font-size:18px; font-weight:600; margin-bottom:14px; }
  .fee-breakdown{ margin-bottom:8px; }
  .fee-row{
    display:flex; justify-content:space-between; align-items:center;
    font-size:13.5px; color:var(--ink-soft); padding:3px 0;
  }
  .place-order-btn{
    width:100%; background:var(--red); color:var(--cream); border:2px solid var(--gold);
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:16.5px; padding:16px;
    border-radius:14px; transition:background .15s ease, transform .12s ease;
  }
  .place-order-btn:hover{ background:var(--red-deep); }
  .place-order-btn:disabled{ opacity:0.65; }
  .drawer-note{ font-size:12px; color:var(--ink-soft); margin-top:10px; text-align:center; }
  .drawer-note.warn{ color:var(--red); font-weight:600; font-size:12.5px; }

  /* ===== ORDER SUCCESS OVERLAY ===== */
  .order-success-overlay{
    position:fixed; inset:0; z-index:300;
    background:rgba(15,10,6,0.72);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
    padding:24px;
  }
  .order-success-overlay.show{ opacity:1; pointer-events:auto; }
  .order-success-card{
    background:var(--cream); border-radius:26px; padding:40px 30px 32px;
    max-width:360px; width:100%; text-align:center;
    box-shadow:0 30px 60px rgba(0,0,0,0.4);
    transform:scale(0.85) translateY(10px); transition:transform .35s cubic-bezier(.34,1.4,.5,1);
  }
  .order-success-overlay.show .order-success-card{ transform:scale(1) translateY(0); }
  .success-check{
    width:76px; height:76px; border-radius:50%;
    background:var(--green); color:#fff;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 20px; font-size:38px;
    animation:checkPop .5s cubic-bezier(.34,1.6,.5,1) .1s both;
  }
  @keyframes checkPop{ 0%{ transform:scale(0); } 70%{ transform:scale(1.15); } 100%{ transform:scale(1); } }
  .order-success-card h2{
    font-size:26px; color:var(--ink); margin-bottom:8px;
  }
  .order-success-card p{
    font-size:14.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:20px;
  }
  .success-order-id{
    display:inline-block; background:var(--bg-dark); color:var(--gold-light);
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:17px;
    padding:10px 22px; border-radius:12px; letter-spacing:.5px; margin-bottom:24px;
  }
  .success-done-btn{
    width:100%; background:var(--gold); color:var(--ink); border:none;
    font-family:'Fredoka', sans-serif; font-weight:700; font-size:15.5px; padding:14px;
    border-radius:12px;
  }
  .success-done-btn:hover{ background:var(--gold-light); }

  /* ===== ORDER TRACKING PILL ===== */
  .order-track-pill{
    position:fixed; left:16px; bottom:20px; z-index:140;
    background:var(--bg-dark); color:var(--cream); border:2px solid var(--gold);
    border-radius:999px; padding:11px 18px 11px 14px;
    display:flex; align-items:center; gap:9px;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:13px;
    box-shadow:0 10px 24px rgba(0,0,0,0.3);
    animation:pillIn .4s cubic-bezier(.34,1.4,.5,1);
  }
  @keyframes pillIn{ 0%{ transform:translateY(20px) scale(.9); opacity:0; } 100%{ transform:translateY(0) scale(1); opacity:1; } }
  .track-dot{
    width:9px; height:9px; border-radius:50%; background:#4CD97B;
    box-shadow:0 0 0 0 rgba(76,217,123,0.6);
    animation:trackPulse 1.6s ease-out infinite;
    flex-shrink:0;
  }
  @keyframes trackPulse{
    0%{ box-shadow:0 0 0 0 rgba(76,217,123,0.55); }
    70%{ box-shadow:0 0 0 8px rgba(76,217,123,0); }
    100%{ box-shadow:0 0 0 0 rgba(76,217,123,0); }
  }
  .track-id{ color:var(--gold-light); }

  /* ===== ORDER DETAILS SHEET ===== */
  .order-details-sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:145;
    background:var(--cream); border-radius:24px 24px 0 0;
    max-height:80vh; overflow-y:auto;
    transform:translateY(100%); transition:transform .3s ease;
    box-shadow:0 -10px 30px rgba(0,0,0,0.3);
  }
  .order-details-sheet.show{ transform:translateY(0); }
  .order-details-body{ padding:20px 22px 30px; }
  .od-row{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid #E9DCC3; font-size:13.5px; }
  .od-row .od-label{ color:var(--ink-soft); }
  .od-row .od-value{ font-weight:600; text-align:right; }
  .od-items{ margin:14px 0; }
  .od-item-line{ font-size:13px; padding:6px 0; border-bottom:1px dashed #E9DCC3; }
  .od-total-row{
    display:flex; justify-content:space-between; margin-top:14px; padding-top:12px;
    border-top:2px solid var(--ink); font-family:'Fredoka', sans-serif; font-weight:600; font-size:17px;
  }
  .od-note{ font-size:11.5px; color:var(--ink-soft); text-align:center; margin-top:18px; }
  .order-id-banner{
    background:var(--green); color:var(--cream); border:2px solid var(--gold-light);
    border-radius:12px; padding:10px 14px; margin-bottom:14px;
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px; text-align:center;
  }
  .order-id-banner .oid-code{ color:var(--gold-light); font-size:16px; letter-spacing:.5px; }
  .order-id-banner .oid-note{ display:block; font-family:'Poppins', sans-serif; font-weight:400; font-size:11.5px; color:#CFE0D5; margin-top:3px; }

  /* ===== ITEM MODAL (bottom sheet) ===== */
  .item-modal{
    position:fixed; left:0; right:0; bottom:0;
    background:var(--cream);
    z-index:96;
    border-radius:24px 24px 0 0;
    max-height:88vh; overflow-y:auto;
    transform:translateY(100%);
    transition:transform .3s ease;
    box-shadow:0 -10px 30px rgba(0,0,0,0.3);
  }
  .item-modal.show{ transform:translateY(0); }
  .modal-head{
    background:var(--bg-dark); color:var(--cream); padding:20px 22px;
    display:flex; align-items:center; justify-content:space-between;
    border-bottom:3px solid var(--gold);
    position:sticky; top:0; z-index:2;
  }
  .modal-head h3{ font-size:18px; }
  .modal-head .modal-close{ background:none; border:none; color:var(--cream); font-size:22px; line-height:1; }
  .modal-body{ padding:20px 22px 10px; }
  .modal-desc{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:18px; }

  .opt-label{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:14.5px; margin:0 0 10px; }
  .opt-label span{ color:#9C8B76; font-weight:400; font-size:12.5px; font-family:'Poppins', sans-serif; }

  .size-select{ display:flex; gap:12px; margin-bottom:22px; }
  .size-opt{
    flex:1; background:var(--bg-dark-2); background-color:var(--bg-dark-2);
    border:2px solid #423527; border-radius:14px;
    padding:14px 12px; text-align:left; color:var(--cream);
    transition:border-color .15s ease, background .15s ease;
  }
  .size-opt .lbl{ display:block; font-family:'Fredoka', sans-serif; font-weight:600; font-size:15px; color:var(--cream); }
  .size-opt .pr{ display:block; margin-top:4px; color:var(--gold-light); font-weight:600; font-size:14px; }
  .size-opt.active{
    border-color:var(--gold);
    background:linear-gradient(180deg, rgba(242,169,0,0.22), rgba(242,169,0,0.08)), var(--bg-dark-2);
    background-color:var(--bg-dark-2);
  }
  .size-opt.active .lbl{ color:var(--gold-light); }

  .sauce-grid{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:22px; }
  .sauce-chip{
    display:flex; align-items:center; gap:8px; background:var(--bg-dark-2);
    border:2px solid #423527; border-radius:999px; padding:8px 8px 8px 14px;
    color:var(--cream); font-size:13px; transition:border-color .15s ease, background .15s ease;
  }
  .sauce-chip .sc-price{ background:#00000040; border-radius:999px; padding:3px 9px; font-size:11.5px; font-weight:600; color:var(--gold-light); }
  .sauce-chip.active{ border-color:var(--gold); background-color:var(--bg-dark-2); background-image:linear-gradient(180deg, rgba(242,169,0,0.22), rgba(242,169,0,0.08)); color:var(--cream); }
  .sauce-chip.active .sc-price{ background:var(--gold); color:var(--ink); }
  .sauce-chip.active::before{ content:"✓"; font-weight:700; color:var(--gold); }

  .modal-qty-row{
    display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:6px;
  }
  .stepper{ display:flex; align-items:center; background:var(--bg-dark-2); border:2px solid #423527; border-radius:12px; overflow:hidden; }
  .stepper button{ background:none; border:none; color:var(--cream); width:40px; height:40px; font-size:18px; font-weight:700; }
  .stepper button:hover{ background:rgba(255,255,255,0.06); }
  .stepper span{ width:34px; text-align:center; font-weight:600; color:var(--cream); }

  .modal-foot{ padding:18px 22px 24px; border-top:2px solid #E9DCC3; background:var(--cream-warm); position:sticky; bottom:0; }
  .modal-total-row{ display:flex; justify-content:space-between; align-items:center; font-family:'Fredoka', sans-serif; font-size:17px; font-weight:600; margin-bottom:12px; }
  .modal-add-btn{
    width:100%; background:var(--red); color:var(--cream); border:2px solid var(--gold);
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:16px; padding:14px; border-radius:14px;
  }
  .modal-add-btn:hover{ background:var(--red-deep); }

  /* ===== FLY TO CART ANIMATION ===== */
  .fly-item{
    position:fixed; width:42px; height:42px; border-radius:50%;
    background:var(--gold); color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    font-size:20px; z-index:200; pointer-events:none;
    box-shadow:0 8px 18px rgba(0,0,0,.35);
    background-size:cover; background-position:center;
    transition:transform .55s cubic-bezier(.34,.02,.4,1), opacity .55s ease .05s;
  }
  .cart-count.bump{ animation:bump .4s ease; }
  @keyframes bump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.6); } 100%{ transform:scale(1); } }

  .toast{
    position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
    background:var(--bg-dark); color:var(--cream); border:2px solid var(--gold);
    padding:12px 22px; border-radius:999px; font-family:'Fredoka', sans-serif; font-weight:600; font-size:14px;
    box-shadow:var(--shadow); z-index:150; opacity:0; transition:opacity .25s ease, transform .25s ease;
    pointer-events:none;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  /* ============================================================
     ADDITIONS — auth, account button, live status, my orders
     (appended; nothing above modified)
     ============================================================ */

  /* Account button in nav */
  .nav-actions{ display:flex; align-items:center; gap:10px; }
  .account-wrap{ position:relative; }
  .account-btn{
    display:flex; align-items:center; gap:7px;
    background:transparent; border:2px solid rgba(251,245,231,0.55); color:var(--cream);
    font-family:'Poppins',sans-serif; font-weight:600; font-size:13.5px;
    padding:8px 14px; border-radius:999px; cursor:pointer;
    transition:all .2s ease;
  }
  .account-btn:hover{ background:var(--cream); border-color:var(--cream); color:var(--ink); }
  .account-btn svg{ width:17px; height:17px; }
  .account-menu{
    display:none; position:absolute; right:0; top:calc(100% + 8px);
    background:#fff; border:1.5px solid #E9DCC3; border-radius:14px;
    box-shadow:var(--shadow); min-width:160px; z-index:60; overflow:hidden;
  }
  .account-menu.show{ display:block; }
  .account-menu button{
    display:block; width:100%; text-align:left; background:none; border:none;
    font-family:'Poppins',sans-serif; font-size:13.5px; font-weight:500;
    padding:11px 16px; cursor:pointer; color:var(--ink);
  }
  .account-menu button:hover{ background:var(--cream); }

  /* Auth modal — reuses .item-modal positioning style */
  .auth-modal{
    position:fixed; left:50%; bottom:-100%; transform:translateX(-50%);
    width:min(430px, 94vw); background:#fff; border-radius:22px 22px 0 0;
    box-shadow:var(--shadow); z-index:96; transition:bottom .35s ease;
  }
  @media(min-width:640px){
    .auth-modal{ top:50%; bottom:auto; transform:translate(-50%, 60%); border-radius:22px; opacity:0; pointer-events:none; transition:all .3s ease; }
    .auth-modal.show{ transform:translate(-50%, -50%); opacity:1; pointer-events:auto; }
  }
  .auth-modal.show{ bottom:0; }
  @media(min-width:640px){ .auth-modal.show{ bottom:auto; } }
  .auth-body{ padding:6px 20px 22px; }
  .auth-sub{ font-size:13.5px; color:var(--ink-soft); margin:0 0 16px; }
  .auth-google-btn{
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; background:#fff; border:1.5px solid #E9DCC3; border-radius:12px;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:14.5px;
    padding:12px; cursor:pointer; color:var(--ink); margin-bottom:10px;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .auth-google-btn:hover{ border-color:var(--gold); box-shadow:0 4px 14px rgba(242,169,0,.18); }
  .auth-guest-btn{
    width:100%; background:var(--ink); color:var(--cream); border:none; border-radius:12px;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:14.5px;
    padding:12px; cursor:pointer; transition:background .2s ease;
  }
  .auth-guest-btn:hover{ background:var(--ink-soft); }
  .auth-guest-btn:disabled{ opacity:.6; cursor:default; }
  .auth-note{ font-size:12px; color:var(--ink-soft); margin:12px 0 0; text-align:center; }

  /* Live status stepper in Order Details */
  .od-stepper{
    margin:2px 0 16px; padding:14px 16px; background:var(--cream);
    border-radius:14px; border:1.5px solid #E9DCC3;
  }
  .od-step{ display:flex; align-items:center; gap:10px; padding:5px 0; font-size:13.5px; color:#B09B7E; }
  .od-step-dot{
    width:12px; height:12px; border-radius:50%; flex-shrink:0;
    border:2px solid #D8C8A8; background:#fff;
  }
  .od-step.done{ color:var(--green); }
  .od-step.done .od-step-dot{ background:var(--green); border-color:var(--green); }
  .od-step.current{ color:var(--ink); font-weight:600; }
  .od-step.current .od-step-dot{
    background:var(--gold); border-color:var(--gold);
    animation:odPulse 1.4s infinite;
  }
  @keyframes odPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(242,169,0,.45); }
    50%{ box-shadow:0 0 0 6px rgba(242,169,0,0); }
  }
  .od-status-banner{
    margin:2px 0 16px; padding:12px 16px; border-radius:14px;
    font-size:13.5px; font-weight:500;
  }
  .od-cancelled{ background:#FDECEA; color:var(--red); border:1.5px solid #F5B7B1; }

  /* My Orders sheet */
  .my-orders-sheet{ z-index:56; }
  .mo-empty{ text-align:center; color:var(--ink-soft); font-size:13.5px; padding:24px 0; }
  .mo-row{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:11px 0; border-bottom:1px solid #E9DCC3;
  }
  .mo-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .mo-id{ font-weight:700; font-size:14px; }
  .mo-meta{ font-size:12px; color:var(--ink-soft); }
  .mo-status{
    flex-shrink:0; font-size:11.5px; font-weight:600; padding:5px 10px;
    border-radius:999px; background:var(--cream); color:var(--ink-soft);
    border:1px solid #E9DCC3;
  }
  .mo-status-received{ background:#FFF3D6; color:#8a6200; border-color:#F2D38A; }
  .mo-status-confirmed{ background:#E3F0FD; color:#1a56a0; border-color:#B5D3F2; }
  .mo-status-preparing{ background:#FDEBD3; color:#a04a00; border-color:#F2C48D; }
  .mo-status-ready{ background:#E4F4E9; color:var(--green); border-color:#B5DFC4; }
  .mo-status-out-for-delivery{ background:#EDE7FD; color:#5b3aa8; border-color:#CFC0F0; }
  .mo-status-delivered{ background:#E4F4E9; color:var(--green); border-color:#B5DFC4; }
  .mo-status-cancelled{ background:#FDECEA; color:var(--red); border-color:#F5B7B1; }

  @media(max-width:560px){
    .account-btn span{ display:none; }
    .account-btn{ padding:8px 10px; }
  }

  /* ===== UNAVAILABLE MENU ITEMS (Menu Management) ===== */
  .unavail-badge{
    position:absolute; left:50%; top:50%; z-index:4;
    transform:translate(-50%,-50%) rotate(-6deg);
    background:var(--red); color:var(--cream); border:2px solid var(--cream);
    font-family:'Fredoka', sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.3px;
    padding:6px 14px; border-radius:999px; white-space:nowrap;
    box-shadow:0 6px 16px rgba(0,0,0,.5);
  }
  .item-card.unavailable .item-thumb img,
  .deal-card.unavailable .deal-media img{ filter:grayscale(1) opacity(.45); }
  .deal-card.unavailable .deal-media{ position:relative; }
  .item-card.unavailable .item-price-row{ flex-wrap:wrap; }
  .item-card.unavailable .item-price{ color:#8A7A63; }
  .add-mini:disabled, .deal-add-btn:disabled{
    background:#3A2E24; border-color:#5A4A3A; color:#B9A98F;
    box-shadow:none; cursor:not-allowed; transform:none;
  }
  .deal-add-btn:disabled:hover{ transform:none; box-shadow:none; }
  .cart-item.unavailable{ background:#FDECEA; border-radius:10px; padding-left:8px; padding-right:8px; }
  .cart-item.unavailable .ci-thumb img{ filter:grayscale(1) opacity(.5); }
  .ci-unavail{ color:var(--red); font-weight:600; font-size:12px; margin-top:2px; }