body{font-family:Arial;margin:0;background:#f9fafb}
    .top{position:sticky;top:0;background:#dc2626;color:white;padding:14px;display:flex;justify-content:space-between;align-items:center;z-index:10}
    .wrap{max-width:1100px;margin:0 auto;padding:16px}
    .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .card{background:white;border-radius:12px;padding:12px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
    .btn{background:#dc2626;color:white;border:none;border-radius:10px;padding:10px 12px;cursor:pointer}
    .btn2{background:#111827;color:white;border:none;border-radius:10px;padding:10px 12px;cursor:pointer}
    .muted{color:#6b7280;font-size:14px;line-height:1.3}
    .secTitle{display:flex;align-items:center;gap:8px;margin:18px 0 10px 0}
    .secTitle h2{margin:0;font-size:20px}
    .pill{background:#fee2e2;color:#991b1b;font-weight:700;font-size:12px;padding:3px 8px;border-radius:999px}
    .modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;padding:16px;z-index:9999}
    .modal .box{background:white;border-radius:12px;max-width:760px;width:100%;max-height:90vh;overflow:auto;-webkit-overflow-scrolling:touch}
    @media (max-width: 520px){
      .modal{padding:0;align-items:stretch}
      .modal .box{max-width:none;max-height:100vh;border-radius:0;padding-top: env(safe-area-inset-top);padding-bottom: env(safe-area-inset-bottom)}
    }
    .row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
    .rowCenter{display:flex;gap:8px;align-items:center}
    input,textarea,select{width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
    .hr{border-top:1px solid #eee;margin:14px 0}
    .qtyBtn{background:#e5e7eb;border:none;border-radius:10px;padding:8px 10px;cursor:pointer}
    .danger{background:#dc2626;color:white}
    .badge{display:inline-flex;min-width:26px;height:26px;align-items:center;justify-content:center;border-radius:999px;background:#111827;color:#fff;font-weight:800}
    .bounce{animation:bounce .35s ease}
    @keyframes bounce{
      0%{transform:scale(1)}
      35%{transform:scale(1.25)}
      70%{transform:scale(.95)}
      100%{transform:scale(1)}
    }
    @media(max-width:800px){.grid{grid-template-columns:1fr}}

    /* Footer */
    .site-footer{margin-top:26px;background:#0f0f10;color:#fff;padding:26px 16px}
    .footer-wrap{max-width:1100px;margin:0 auto;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
    .footer-title{font-weight:900;margin-bottom:6px}
    .footer-brand{font-weight:1000;font-size:18px}
    .footer-muted{opacity:.85;font-size:14px;line-height:1.5}
    .site-footer a{color:#fff;text-decoration:none;opacity:.9}
    .site-footer a:hover{text-decoration:underline;opacity:1}
    .footer-bottom{max-width:1100px;margin:14px auto 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);opacity:.8;font-size:13px}

    /* Checkout disabled */
    .btn.disabled,
    .btn:disabled{
      background:#9ca3af !important;
      cursor:not-allowed !important;
      opacity:0.7;
    }

    /* Out of stock UI */
    .stockOff{
      opacity:.55;
      filter:grayscale(1);
    }
    .stockTag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:4px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:900;
      background:#111827;
      color:#fff;
      margin-top:6px;
    }
    
    /* Uber-style menu card layout */
.menuRow{
  align-items:flex-start;
}

.menuInfo{
  flex:1;
  min-width:0;
}

.menuName{
  font-weight:900;
  font-size:16px;
}

.menuDesc{
  margin-top:4px;
}

.menuPrice{
  margin-top:10px;
  font-weight:900;
}

.menuImgWrap{
  position:relative;
  width:130px;
  height:130px;
  flex:0 0 auto;
  border-radius:12px;
  overflow:hidden;
  background:#f3f4f6;
}

/* ✅ Skeleton loader while images load */
.menuImgWrap.skel{
  background:#e5e7eb;
}
.menuImgWrap.skel::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:menuShimmer 1.1s infinite;
}
@keyframes menuShimmer{ 100%{ transform:translateX(100%); } }

/* hide image until it loads, then fade in */
.menuImg{ opacity:0; transition:opacity .2s ease; }
.menuImgWrap.loaded .menuImg{ opacity:1; }
.menuImgWrap.loaded::after{ display:none; }
.menuImgWrap.noimg::after{ display:none; }

.menuImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.menuImgFallback{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#9ca3af;
  font-weight:800;
  font-size:12px;
}

.menuImgWrap.noimg .menuImgFallback{
  display:flex;
}

/* Floating + button */
.addPlus{
  position:absolute;
  right:8px;
  bottom:8px;
  width:38px;
  height:38px;
  border-radius:999px;
  padding:0;
  background:#fff !important;
  color:#111827 !important;
  font-size:22px;
  font-weight:900;
  box-shadow:0 3px 10px rgba(0,0,0,.2);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* keep disabled style consistent */
.addPlus.disabled,
.addPlus:disabled{
  opacity:.7;
  cursor:not-allowed;
}
.popBadge{
  display:inline-block;
  margin-left:6px;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background:#fff7ed;
  color:#9a3412;
  border:1px solid #fed7aa;
}

/* Desktop: header content aligns with menu width */
@media (min-width: 900px){
  .top{
    padding-left: calc((100vw - 1100px) / 2 + 16px);
    padding-right: calc((100vw - 1100px) / 2 + 16px);
  }
}

/* Keep STORE CLOSED banner visible while scrolling */
#closedBanner{
  position: sticky;
  z-index: 9; /* header is 10, so it stays above */
}

/* STORE STATUS COLORS */
#closedBanner.closing-soon{
  background:#f59e0b;   /* amber */
  color:#111827;
}

#closedBanner.closed{
  background:#111827;   /* dark */
  color:#ffffff;
}

/* ===== Layout utilities ===== */
.gap10{height:10px}
.mt6{margin-top:6px}
.mt8{margin-top:8px}
.mt10{margin-top:10px}
.mt14{margin-top:14px}
.mt16{margin-top:16px}
.mt18{margin-top:18px}
.wFull{width:100%}
.wAuto{width:auto !important}
.rowAlignCenter{align-items:center}

/* Meal promo */
.mealPromo{border:2px solid #fde68a;background:#fffbeb}
.mealPromo__title{font-weight:900}
.mealPromo__price{margin-top:8px;font-weight:900;font-size:18px}
.mealPromo__hint{margin-top:6px}

/* Modal parts */
.modalHeader{padding:14px;border-bottom:1px solid #eee;position:sticky;top:0;background:#fff;z-index:5}
.modalBody{padding:14px}

/* Soft sections inside forms */
.softRow{background:#f3f4f6;padding:12px;border-radius:10px}
.softCard{background:#f3f4f6;border:none}

/* Delivery */
.deliveryFields{display:none;margin-top:10px}
.deliveryError{color:#b91c1c !important}

/* Sticky cart footer */
.cartFooter{
  position: sticky;
  bottom: 0;
  background:#fff;
  padding-top:12px;
  border-top:1px solid #eee;
}

/* Totals */
.totalLabel,.totalValue{font-size:18px}

/* Success modal */
.successBox{text-align:center;padding:22px;max-width:520px}
.successIcon{font-size:46px}
.successTitle{font-weight:900;font-size:26px;margin-top:8px}
.bigOrderCode{font-weight:1000;font-size:36px;margin-top:10px;letter-spacing:1px}
.qrWrap{margin-top:14px;display:flex;justify-content:center}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  background:#111827;
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:99999;
}

/* A11y / polish */
.btn,.btn2{font-weight:900}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:rgba(220,38,38,.45);
  box-shadow:0 0 0 4px rgba(220,38,38,.10);
}
.top{box-shadow:0 2px 10px rgba(0,0,0,.10)}


.freeSauce {
  background: #f0fdf4;
  border-radius: 8px;
}
.freeBadge {
  background: #16a34a;
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 6px;
  font-weight: 700;
}