/* ═══════════════════════════════════════════
   SHAAD CART PLUGIN v5
   Matches the premium SHAAD dark UI style
   Dark charcoal · Orange · Gold
═══════════════════════════════════════════ */

/* ── TOKENS ── */
:root{
  --sc-bg:    #0A0806;
  --sc-surf:  #141008;
  --sc-surf2: #1C1510;
  --sc-or:    #FF6A00;
  --sc-or2:   #E05500;
  --sc-go:    #D4AF37;
  --sc-cr:    #F5E6C8;
  --sc-mu:    #7A6A52;
  --sc-mu2:   #5A4A35;
  --sc-bd:    rgba(212,175,55,.12);
  --sc-bd2:   rgba(255,106,0,.2);
  --sc-ease:  cubic-bezier(.4,0,.2,1);
  --sc-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ── OVERLAY ── */
.sc-overlay{
  /* Direct child of body — no stacking context can trap this */
  position:fixed;inset:0;
  /* Raised alongside the drawer's own z-index fix (see .sc-drawer) - the
     overlay should dim the WHOLE screen while the cart is open, including
     visually behind the site header (confirmed z-index:9500), otherwise
     the header would stay undimmed while everything else darkens. Kept
     correctly below the drawer's own z-index so the drawer still renders
     on top of its own backdrop. */
  z-index:9750;
  /* Isolate stacking context */
  isolation:isolate;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:opacity .4s var(--sc-ease);
  /* Prevent touch bleed-through */
  touch-action:none;
}
.sc-overlay.open{opacity:1;pointer-events:all;}

/* ── DRAWER ── */
.sc-drawer{
  /* Direct child of body — bypasses all Elementor stacking contexts */
  position:fixed;
  /* Confirmed via the site's own header source: a fixed site header
     genuinely occupies the top 68px of the screen at all times (--hh:68px
     in the theme's own header code). The drawer's own header content was
     starting at top:0 - directly underneath/behind that same 68px strip,
     regardless of z-index (which only resolves stacking order for
     elements that overlap, not their actual position). Pushing the
     drawer's top edge down by that same real, confirmed height, so its
     own header genuinely starts below the site header rather than
     behind it. */
  top:68px;right:0;bottom:0;
  /* Use safe-area for notched phones - top AND bottom, so the header
     (with the real close button) is never clipped by a device's own
     notch/dynamic-island/status-bar intrusion, matching the same
     real-world category of fix already correctly applied to the bottom. */
  padding-top:env(safe-area-inset-top,0);
  padding-bottom:env(safe-area-inset-bottom,0);
  /* Confirmed via direct DevTools inspection: the site's own header is
     z-index:9500 and its mobile nav drawer is z-index:9700 - both were
     genuinely higher than this drawer's old 9200, meaning the real site
     header visually sat on top of the cart drawer's own header for its
     full height, clipping the close button. Raised comfortably above
     both real, confirmed values. */
  z-index:9800;
  width:min(420px,96vw);
  background:linear-gradient(180deg,#0f0d08,#0a0806);
  border-left:1px solid var(--sc-bd);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .45s var(--sc-ease);
  box-shadow:-30px 0 80px rgba(0,0,0,.7);
  overflow:hidden;
  /* Own GPU compositing layer */
  will-change:transform;
  /* Isolate from any ancestor stacking context */
  isolation:isolate;
}
.sc-drawer.open{transform:translateX(0);}

/* ── HEAD ── */
.sc-head{
  padding:1.4rem 1.5rem;
  border-bottom:1px solid var(--sc-bd);
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.02);
  flex-shrink:0;
}
.sc-head-l{display:flex;align-items:center;gap:.8rem;}
.sc-head-ico{
  font-size:1.3rem;
  width:38px;height:38px;border-radius:9px;
  background:linear-gradient(135deg,var(--sc-or),var(--sc-or2));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 16px rgba(255,106,0,.3);
  flex-shrink:0;
}
.sc-head-title{
  font-family:'Cinzel',serif;
  font-size:1.1rem;font-weight:700;
  color:var(--sc-cr);
}
.sc-head-count{font-size:.72rem;color:var(--sc-mu);margin-top:.1rem;}
.sc-x{
  width:34px;height:34px;border-radius:8px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--sc-bd);
  color:var(--sc-mu);font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;flex-shrink:0;
}
.sc-x:hover{border-color:var(--sc-bd2);color:var(--sc-or);}

/* ── ORDER TYPE ── */
.sc-order-type{
  padding:1rem 1.5rem;
  border-bottom:1px solid var(--sc-bd);
  flex-shrink:0;
}
.sc-type-label{
  font-size:.62rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--sc-mu);margin-bottom:.7rem;display:block;
}
.sc-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
.sc-type-btn{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sc-mu);background:var(--sc-surf);
  border:1px solid var(--sc-bd);border-radius:8px;
  padding:.65rem;cursor:pointer;transition:all .25s var(--sc-ease);
}
.sc-type-btn.active{
  color:var(--sc-cr);background:rgba(255,106,0,.12);
  border-color:var(--sc-or);box-shadow:0 0 18px rgba(255,106,0,.15);
}
.sc-type-btn.sc-type-disabled{
  opacity:.4;cursor:not-allowed;
  background:var(--sc-surf);border-color:var(--sc-bd);
}
.sc-type-btn.sc-type-disabled:hover{opacity:.5;}
.sc-type-ic{font-size:1rem;flex-shrink:0;}

/* Delivery unavailable note */
.sc-delivery-note{
  font-size:.7rem;color:var(--sc-or);
  background:rgba(255,106,0,.08);
  border:1px solid rgba(255,106,0,.2);
  border-radius:7px;padding:.6rem .8rem;
  margin-top:.6rem;line-height:1.5;
  display:none;
}
.sc-delivery-note.show{display:block;}

/* ── BODY ── */
.sc-body{
  flex:1;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.sc-body::-webkit-scrollbar{width:3px;}
.sc-body::-webkit-scrollbar-thumb{background:var(--sc-or);border-radius:99px;}

/* ── EMPTY STATE ── */
.sc-empty{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  height:100%;gap:1rem;padding:3rem 2rem;
  text-align:center;
}
.sc-empty-icon{font-size:3.5rem;opacity:.25;}
.sc-empty-txt{font-size:.85rem;color:var(--sc-mu);line-height:1.7;}
.sc-empty-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Jost',sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:#fff;text-decoration:none;
  background:linear-gradient(135deg,var(--sc-or),var(--sc-or2));
  border-radius:8px;padding:.7rem 1.4rem;margin-top:.5rem;
  transition:all .2s;
}
.sc-empty-btn:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(255,106,0,.4);}

/* ── FEATURED (empty state) ── */
.sc-featured{
  padding:1.2rem 1.5rem 0;width:100%;
}
.sc-feat-label{
  font-size:.62rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--sc-mu);margin-bottom:.65rem;display:block;
}
.sc-rec-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.55rem;
  margin-bottom:1.2rem;
}
.sc-rec-card{
  background:var(--sc-surf);border:1px solid var(--sc-bd);
  border-radius:10px;overflow:hidden;cursor:pointer;
  transition:all .25s var(--sc-ease);
}
.sc-rec-card:hover{border-color:var(--sc-bd2);transform:translateY(-2px);}
.sc-rec-img-wrap{width:100%;height:78px;overflow:hidden;background:var(--sc-surf2);position:relative;}
.sc-rec-img{width:100%;height:100%;object-fit:cover;display:block;}
.sc-rec-img-fb{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:78px;font-size:2.2rem;background:var(--sc-surf2);
}
.sc-rec-badge{
  position:absolute;top:5px;left:5px;
  font-size:.56rem;font-weight:700;letter-spacing:.06em;
  background:var(--sc-or);color:#fff;
  border-radius:99px;padding:.12rem .45rem;
  z-index:1;
}
.sc-rec-body{padding:.55rem .65rem;}
.sc-rec-name{
  font-size:.74rem;font-weight:600;color:var(--sc-cr);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:.12rem;
}
.sc-rec-cat{font-size:.6rem;color:var(--sc-mu);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.35rem;}
.sc-rec-stars{font-size:.6rem;color:var(--sc-go);margin-bottom:.3rem;}
.sc-rec-foot{display:flex;align-items:center;justify-content:space-between;}
.sc-rec-price{font-family:'Cinzel',serif;font-size:.76rem;font-weight:700;color:var(--sc-or);}
.sc-rec-add{
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,var(--sc-or),var(--sc-or2));
  border:none;color:#fff;font-size:1rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;
}
.sc-rec-add:hover{transform:scale(1.18);}

/* ── UPSELL ── */
.sc-upsell{
  padding:.85rem 0;border-top:1px solid var(--sc-bd);
}
.sc-upsell-head{
  display:flex;align-items:center;gap:.5rem;
  font-size:.62rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--sc-go);margin-bottom:.7rem;
  padding:0 1.5rem;
}

/* ── CART ITEMS ── */
.sc-items{padding-bottom:.5rem;}
.sc-item{
  display:flex;gap:.9rem;align-items:flex-start;
  padding:1rem 1.5rem;
  border-bottom:1px solid rgba(212,175,55,.07);
  transition:background .18s;
}
.sc-item:hover{background:rgba(255,255,255,.01);}
.sc-item-img-wrap{
  width:60px;height:60px;flex-shrink:0;
  border-radius:10px;overflow:hidden;
  border:1px solid var(--sc-bd);background:var(--sc-surf2);
}
.sc-item-img{width:100%;height:100%;object-fit:cover;display:block;}
.sc-item-img-fb{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
}
.sc-item-info{flex:1;min-width:0;}
.sc-item-name{
  font-family:'Cinzel',serif;
  font-size:.85rem;font-weight:600;color:var(--sc-cr);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:.18rem;
}
.sc-item-price-line{font-size:.8rem;color:var(--sc-or);margin-bottom:.45rem;}
.sc-item-ctrl{display:flex;align-items:center;gap:.5rem;}
.sc-qty{
  width:24px;height:24px;border-radius:50%;
  background:var(--sc-surf2);border:1px solid var(--sc-bd);
  color:var(--sc-cr);font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;flex-shrink:0;
}
.sc-qty:hover{background:rgba(255,106,0,.2);border-color:var(--sc-or);}
.sc-qty-n{
  font-family:'Cinzel',serif;font-size:.85rem;font-weight:700;
  color:var(--sc-go);min-width:22px;text-align:center;
}
.sc-item-rm{
  font-size:.75rem;color:var(--sc-mu2);
  cursor:pointer;margin-left:auto;transition:color .2s;
}
.sc-item-rm:hover{color:#f44;}
.sc-item-note{
  width:100%;background:rgba(255,255,255,.03);
  border:1px solid rgba(212,175,55,.08);border-radius:6px;
  padding:.28rem .55rem;margin-top:.35rem;
  font-family:'Jost',sans-serif;font-size:.7rem;
  color:var(--sc-mu);outline:none;transition:border-color .18s;
}
.sc-item-note:focus{border-color:var(--sc-bd2);}
.sc-item-note::placeholder{color:var(--sc-mu2);}

/* ── FOOTER ── */
.sc-foot{
  border-top:1px solid var(--sc-bd);
  padding:1.2rem 1.5rem;
  background:rgba(255,255,255,.015);
  flex-shrink:0;
}
.sc-totals{margin-bottom:1rem;}
.sc-tot-row{
  display:flex;justify-content:space-between;
  font-size:.78rem;color:var(--sc-mu);padding:.22rem 0;
}
.sc-tot-final{
  font-size:.95rem;font-weight:600;color:var(--sc-cr);
  border-top:1px solid var(--sc-bd);
  padding-top:.5rem;margin-top:.28rem;
}
.sc-tot-final span:last-child{
  font-family:'Cinzel',serif;color:var(--sc-go);
}
.sc-foot-btns{display:flex;gap:.6rem;}

/* ── BUTTONS ── */
.sc-btn-primary{
  flex:1;display:inline-flex;align-items:center;justify-content:center;
  font-family:'Jost',sans-serif;font-size:.76rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,var(--sc-or),var(--sc-or2));
  border:none;border-radius:8px;padding:.9rem 1.1rem;
  cursor:pointer;transition:all .22s;
  box-shadow:0 0 20px rgba(255,106,0,.3);
}
.sc-btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 24px rgba(255,106,0,.5);}
.sc-btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Jost',sans-serif;font-size:.74rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--sc-cr);background:rgba(255,255,255,.04);
  border:1px solid var(--sc-bd);border-radius:8px;
  padding:.9rem .95rem;cursor:pointer;white-space:nowrap;transition:all .2s;
}
.sc-btn-ghost:hover{border-color:var(--sc-bd2);}

/* ── SPINNER / SKELETON ── */
.sc-feat-loading{
  display:flex;align-items:center;justify-content:center;
  gap:.6rem;padding:1.5rem;color:var(--sc-mu);font-size:.76rem;
}
.sc-spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(212,175,55,.2);border-top-color:var(--sc-go);
  animation:sc-spin .7s linear infinite;
}
@keyframes sc-spin{to{transform:rotate(360deg);}}
.sc-rec-grid.skeleton .sc-skeleton{
  background:var(--sc-surf);border:1px solid var(--sc-bd);border-radius:10px;overflow:hidden;
}
.sc-skel-img{height:78px;background:linear-gradient(90deg,var(--sc-surf2) 25%,#201810 50%,var(--sc-surf2) 75%);background-size:200% 100%;animation:sc-shimmer 1.4s ease infinite;}
.sc-skel-body{padding:.55rem .65rem;}
.sc-skel-line{height:9px;border-radius:4px;margin-bottom:.4rem;background:linear-gradient(90deg,var(--sc-surf2) 25%,#201810 50%,var(--sc-surf2) 75%);background-size:200% 100%;animation:sc-shimmer 1.4s ease infinite;}
.sc-skel-line.short{width:55%;}
@keyframes sc-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ── CHECKOUT MODAL ── */
.sc-checkout-modal{
  /* Appended by JS directly to document.body.
     No Elementor/footer stacking context can affect this. */
  position:fixed;
  inset:0;
  /* Above everything including Elementor, WooCommerce, admin bar */
  z-index:999997;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
  /* Own GPU layer */
  will-change:opacity;
  isolation:isolate;
  /* Prevent page scroll bleed */
  touch-action:none;
  /* Real mobile viewport height (not affected by browser chrome) */
  height:100vh;
  height:100dvh;
}
.sc-co-box{
  background:#0f0d08;border:1px solid var(--sc-bd);
  border-radius:14px;width:100%;max-width:520px;
  max-height:90vh;overflow-y:auto;
  position:relative;-webkit-overflow-scrolling:touch;
}
.sc-co-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--sc-or) 30%,var(--sc-go) 50%,var(--sc-or) 70%,transparent);
  border-radius:14px 14px 0 0;
}
.sc-co-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.4rem;border-bottom:1px solid var(--sc-bd);
  position:sticky;top:0;background:#0f0d08;z-index:2;
}
.sc-co-title{
  display:flex;align-items:center;gap:.65rem;
  font-family:'Cinzel',serif;font-size:.92rem;font-weight:700;color:var(--sc-cr);
}
.sc-co-ic{font-size:1.1rem;}
.sc-co-body{padding:1.1rem 1.4rem;display:flex;flex-direction:column;gap:.85rem;}
.sc-co-pickup-info{
  background:rgba(212,175,55,.05);border:1px solid rgba(212,175,55,.1);
  border-radius:8px;padding:.7rem 1rem;
}
.sc-co-pi-row{display:flex;align-items:flex-start;gap:.55rem;font-size:.75rem;color:var(--sc-mu);margin-bottom:.22rem;}
.sc-co-pi-row:last-child{margin-bottom:0;}
.sc-signup-prompt{
  background:rgba(255,106,0,.05);border:1px solid rgba(255,106,0,.15);
  border-radius:8px;padding:.7rem 1rem;
  display:flex;align-items:center;gap:.6rem;
}
.sc-signup-ic{font-size:1.1rem;flex-shrink:0;}
.sc-signup-txt p{font-size:.72rem;color:var(--sc-mu);line-height:1.5;margin-bottom:.25rem;}
.sc-signup-txt a{font-size:.7rem;color:var(--sc-or);font-weight:600;text-decoration:none;}
.sc-co-field{display:flex;flex-direction:column;gap:.28rem;}
.sc-co-label{
  font-size:.68rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sc-go);
}
.sc-co-hint{font-size:.62rem;color:var(--sc-mu);text-transform:none;letter-spacing:0;font-weight:400;}
.sc-co-input{
  background:var(--sc-surf);border:1px solid var(--sc-bd);
  border-radius:8px;padding:.7rem .95rem;
  font-family:'Jost',sans-serif;font-size:16px;
  color:var(--sc-cr);outline:none;
  transition:border-color .2s;width:100%;
}
.sc-co-input:focus{border-color:rgba(255,106,0,.35);}
.sc-co-input::placeholder{color:var(--sc-mu2);}
select.sc-co-input{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23D4AF37' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;
  padding-right:2.2rem;cursor:pointer;
}
.sc-co-ta{resize:vertical;min-height:60px;}
.sc-addr-wrap{position:relative;}
.sc-addr-suggestions{
  position:absolute;top:100%;left:0;right:0;z-index:999999;
  background:#1a1510;border:1px solid var(--sc-bd);
  border-top:none;border-radius:0 0 8px 8px;
  max-height:200px;overflow-y:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.6);
}
.sc-sugg-item{
  display:flex;align-items:flex-start;gap:.5rem;
  padding:.65rem .95rem;font-size:.76rem;color:var(--sc-cr);
  cursor:pointer;border-bottom:1px solid rgba(212,175,55,.06);
  transition:background .15s;-webkit-tap-highlight-color:transparent;
  line-height:1.4;
}
.sc-sugg-item:last-child{border-bottom:none;}
.sc-sugg-item:hover,.sc-sugg-item:active{background:rgba(255,106,0,.1);}
.sc-sugg-ic{font-size:.8rem;flex-shrink:0;margin-top:.05rem;}
.sc-sugg-none{padding:.75rem 1rem;font-size:.74rem;color:var(--sc-mu);text-align:center;}
.sc-addr-status{font-size:.7rem;margin-top:.25rem;}
.sc-addr-ok{color:#22c55e;}
.sc-addr-warn{color:#f59e0b;}
.sc-addr-err{color:#f44;}

/* Allergy chips */
.sc-allergy-chips{display:flex;flex-wrap:wrap;gap:.4rem;}
.sc-allergy-chip{
  display:flex;align-items:center;gap:.35rem;
  padding:.32rem .65rem;border-radius:99px;
  border:1.5px solid var(--sc-bd);background:var(--sc-surf);
  font-family:'Jost',sans-serif;font-size:.7rem;
  color:var(--sc-mu);cursor:pointer;transition:all .2s;
  -webkit-tap-highlight-color:transparent;
}
.sc-allergy-chip:hover{border-color:var(--sc-bd2);}
.sc-allergy-chip.active{border-color:var(--sc-or);background:rgba(255,106,0,.1);color:var(--sc-or);}
.sc-allergy-ic{font-size:.9rem;line-height:1;}
.sc-allergy-lbl{font-size:.68rem;font-weight:500;}

/* Payment options */
.sc-pay-opts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.sc-pay-opt{
  display:flex;align-items:center;gap:.5rem;
  padding:.65rem .85rem;border-radius:8px;
  border:1.5px solid var(--sc-bd);background:var(--sc-surf);
  font-family:'Jost',sans-serif;font-size:.76rem;
  color:var(--sc-mu);cursor:pointer;transition:all .2s;
  -webkit-tap-highlight-color:transparent;
}
.sc-pay-opt:hover{border-color:var(--sc-bd2);}
.sc-pay-opt.active{border-color:var(--sc-or);background:rgba(255,106,0,.1);color:var(--sc-cr);}
.sc-pay-opt-ic{font-size:1.1rem;flex-shrink:0;}

/* Promo */
.sc-promo-wrap{display:flex;gap:.5rem;}
.sc-promo-apply{
  font-family:'Jost',sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--sc-or);background:rgba(255,106,0,.08);
  border:1px solid rgba(255,106,0,.2);border-radius:7px;
  padding:.45rem .85rem;cursor:pointer;white-space:nowrap;transition:all .2s;
}
.sc-promo-apply:hover{background:rgba(255,106,0,.18);}
.sc-promo-result{font-size:.7rem;margin-top:.25rem;}

/* Summary */
.sc-co-summary{
  background:rgba(255,255,255,.015);border:1px solid var(--sc-bd);
  border-radius:8px;padding:.8rem .95rem;
}
.sc-co-sum-title{font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sc-go);margin-bottom:.5rem;}
.sc-co-sum-row{display:flex;justify-content:space-between;font-size:.76rem;color:var(--sc-mu);padding:.16rem 0;}
.sc-co-sum-fee{color:var(--sc-cr);}
.sc-co-sum-total{
  display:flex;justify-content:space-between;
  font-size:.88rem;font-weight:600;color:var(--sc-cr);
  border-top:1px solid var(--sc-bd);padding-top:.45rem;margin-top:.28rem;
}
.sc-co-sum-total span:last-child{font-family:'Cinzel',serif;color:var(--sc-go);}
.sc-co-err{
  background:rgba(244,68,68,.08);border:1px solid rgba(244,68,68,.2);
  border-radius:7px;padding:.5rem .85rem;font-size:.74rem;color:#f44;
}
.sc-co-submit{
  width:100%;margin-top:.2rem;padding:1rem;
  font-size:.82rem;border-radius:8px;
}
.sc-co-legal{font-size:.62rem;color:var(--sc-mu2);text-align:center;margin-top:.25rem;}

/* ── SUCCESS MODAL ── */
.sc-success-box{padding:2.2rem 1.6rem;text-align:center;}
.sc-success-ani{font-size:2.8rem;margin-bottom:.7rem;display:block;}
.sc-success-h{font-family:'Cinzel',serif;font-size:1.1rem;font-weight:700;color:var(--sc-cr);margin-bottom:.3rem;}
.sc-success-num{font-family:'Cinzel',serif;font-size:1.8rem;font-weight:900;color:var(--sc-or);margin-bottom:.5rem;text-shadow:0 0 18px rgba(255,106,0,.35);}
.sc-success-msg{font-size:.78rem;color:var(--sc-mu);line-height:1.7;margin-bottom:.9rem;}
.sc-success-track{background:rgba(212,175,55,.05);border:1px solid rgba(212,175,55,.12);border-radius:8px;padding:.7rem 1rem;margin-bottom:.7rem;font-size:.74rem;color:var(--sc-mu);}
.sc-success-track a{color:var(--sc-or);font-weight:600;text-decoration:none;}
.sc-track-box{background:rgba(212,175,55,.05);border:1px solid rgba(212,175,55,.12);border-radius:9px;padding:.85rem 1rem;margin-bottom:.8rem;text-align:left;}
.sc-track-title{font-family:'Cinzel',serif;font-size:.8rem;font-weight:700;color:var(--sc-cr);margin-bottom:.28rem;}
.sc-track-sub{font-size:.7rem;color:var(--sc-mu);margin-bottom:.65rem;line-height:1.5;}
.sc-track-btns{display:flex;flex-direction:column;gap:.45rem;margin-bottom:.7rem;}
.sc-track-btns .sc-btn-primary{font-size:.72rem;padding:.7rem;border-radius:8px;text-decoration:none;}
.sc-track-guest{display:flex;align-items:center;justify-content:center;padding:.65rem;border-radius:8px;border:1px solid var(--sc-bd);font-family:'Jost',sans-serif;font-size:.72rem;font-weight:600;color:var(--sc-cr);text-decoration:none;background:rgba(255,255,255,.03);transition:all .2s;}
.sc-track-guest:hover{border-color:var(--sc-bd2);}
.sc-track-url span{display:block;font-size:.63rem;color:var(--sc-mu);margin-bottom:.22rem;}
.sc-track-input{width:100%;background:var(--sc-surf);border:1px solid var(--sc-bd);border-radius:6px;padding:.4rem .65rem;font-size:.66rem;color:var(--sc-mu);font-family:'Jost',sans-serif;cursor:pointer;outline:none;}
.sc-track-input:focus{border-color:var(--sc-or);}
.sc-success-addr .sc-co-pi-row{justify-content:center;}

/* ── FLOATING CART BUTTON ── */
#sc-scroll-btn{
  position:fixed !important;
  bottom:2rem !important;
  right:1.5rem !important;
  left:auto !important;
  top:auto !important;
  z-index:999999 !important;
  display:none;
  align-items:center;
  gap:.5rem;
  background:linear-gradient(135deg,#FF6A00,#C84800) !important;
  border:none !important;
  border-radius:50px;
  padding:.72rem 1.1rem .72rem .85rem;
  color:#fff !important;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 8px 28px rgba(255,106,0,.55),0 2px 8px rgba(0,0,0,.4) !important;
  font-family:'Jost',sans-serif;
  animation:sc-btn-pop .35s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes sc-btn-pop{
  from{transform:scale(.7) translateY(16px);opacity:0;}
  to{transform:scale(1) translateY(0);opacity:1;}
}
#sc-scroll-btn:hover{transform:scale(1.05);box-shadow:0 10px 32px rgba(255,106,0,.7) !important;}
#sc-scroll-btn:active{transform:scale(.97);}
.sc-scroll-ic{font-size:1.1rem;flex-shrink:0;line-height:1;}
.sc-scroll-badge-pill{
  background:rgba(0,0,0,.28);border-radius:99px;
  min-width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-size:.7rem;font-weight:800;
  color:#fff;padding:0 5px;flex-shrink:0;
}
.sc-scroll-total{font-family:'Cinzel',serif;font-size:.74rem;font-weight:700;color:#FFE0A0;}

/* Desktop: round icon only */
@media(min-width:769px){
  #sc-scroll-btn{
    border-radius:50% !important;
    width:54px !important;height:54px !important;
    padding:0 !important;
    justify-content:center;
    bottom:2rem !important;right:1.5rem !important;
  }
  .sc-scroll-badge-pill{display:none !important;}
  .sc-scroll-total{display:none !important;}
  #sc-scroll-btn[data-count]:not([data-count=""])::after{
    content:attr(data-count);
    position:absolute;top:-4px;right:-4px;
    min-width:19px;height:19px;
    background:#fff;color:#FF6A00;
    border-radius:99px;font-size:.56rem;font-weight:800;
    font-family:'Cinzel',serif;
    display:flex;align-items:center;justify-content:center;
    border:2px solid #FF6A00;padding:0 3px;
    box-shadow:0 0 8px rgba(255,106,0,.5);
  }
}

/* Safe area (iPhone notch) */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  #sc-scroll-btn{bottom:calc(2rem + env(safe-area-inset-bottom)) !important;}
}

#sc-scroll-badge{display:none !important;}
.sc-mob-bar{display:none !important;}

/* ── FLY ANIMATION ── */
#sc-fly-stage{position:fixed;inset:0;z-index:99996;pointer-events:none;}
.sc-fly-dot{
  position:fixed;width:30px;height:30px;border-radius:50%;
  background:#FF6A00;color:#fff;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;box-shadow:0 0 12px rgba(255,106,0,.6);
  transition:left .65s cubic-bezier(.25,.46,.45,.94),
             top  .65s cubic-bezier(.25,.46,.45,.94),
             opacity .65s ease,transform .65s ease;
}

/* ── TOAST ── */
.sc-toast{
  position:fixed;bottom:5.5rem;left:50%;
  transform:translateX(-50%) translateY(10px);
  z-index:999998;padding:.75rem 1.4rem;
  background:#141008;color:var(--sc-cr);
  border:1px solid rgba(212,175,55,.15);
  border-left:3px solid #FF6A00;
  border-radius:10px;font-size:.76rem;
  font-family:'Jost',sans-serif;
  white-space:nowrap;max-width:90vw;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;
  transition:all .3s var(--sc-spring);
}
.sc-toast.on{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0);}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .sc-drawer{width:100%;max-width:100%;border-left:none;}

  /* Checkout sheet — slides from bottom, uses real viewport height */
  .sc-checkout-modal{
    align-items:flex-end;
    padding:0;
    /* Use visual viewport so sheet isn't hidden behind address bar */
    height:100vh;
    height:100dvh;
  }
  .sc-co-box{
    border-radius:18px 18px 0 0;
    max-width:100%;
    width:100%;
    /* Cap at 94% of visual viewport height */
    max-height:94vh;
    max-height:94dvh;
    /* The box itself scrolls — not the page */
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    /* Own scroll container so page never scrolls */
    display:flex;
    flex-direction:column;
    /* Reserve genuine space at the true bottom of the real scroll
       container so the last real content (notes field, legal text) can
       fully scroll up and clear the sticky button's own height before
       reaching the actual end - rather than passing underneath/behind it
       while scrolling. Sticky correctly, intentionally stays fixed while
       scrolling (that's its real purpose) - the missing piece was always
       this reserved space, not the button's own position. Sized to
       comfortably exceed the button's real height (padding 1.1rem top+
       bottom + text + safe-area inset). */
    padding-bottom:4.5rem;
  }
  /* Prevent iOS auto-zoom on input focus (requires font-size >= 16px) */
  .sc-co-input,.sc-co-ta,select.sc-co-input{font-size:16px !important;}
  .sc-co-body{
    flex:1;
    /* Do NOT declare overflow-y here - .sc-co-box above is the single,
       genuine scroll container (per its own comment: "The box itself
       scrolls — not the page"). This element previously ALSO declared
       overflow-y:auto, creating two independently-scrollable nested
       containers - which meant the submit button's position:sticky was
       resolving against this smaller, wrong scroll boundary instead of
       the real checkout sheet, causing it to float mid-content rather
       than genuinely anchor to the true bottom edge.
       The submit button itself now lives OUTSIDE this element (moved to
       be a direct sibling inside .sc-co-box), so padding reserved here
       no longer does anything useful for it - the real fix for content
       overlapping the sticky button while scrolling is on the sticky
       button's own container below, not here. */
  }
  /* Submit button sticks to bottom of the box — always visible */
  .sc-co-submit{
    position:sticky;
    bottom:0;
    /* Extend to edge of padding */
    margin-left:-1.4rem;margin-right:-1.4rem;
    width:calc(100% + 2.8rem);
    border-radius:0;
    padding:1.1rem;
    /* Safe area for iPhone home indicator */
    padding-bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));
    z-index:2;
    flex-shrink:0;
  }
  .sc-co-head{
    flex-shrink:0;
  }
  .sc-foot-btns{flex-direction:column;}
  /* Toast above keyboard */
  .sc-toast{bottom:5rem;}
}
@media(max-width:380px){
  .sc-rec-grid{grid-template-columns:1fr;}
}


/* ═══════════════════════════════════════════
   v6.5 ADDITIONS
   1. the "choose meat / sauce / side" window            (.sc-pk-*)
   2. basket lines that need a choice / show the choice  (.sc-item-need, .sc-item-choices, .sc-item-edit)
   3. basket parts the script always used but the stylesheet never described
      (status line, minimum-order bar, text column of a line, orange button, "closed" notes)
   The buttons below repeat their hover / focus colours on purpose: the theme paints every button
   pink on hover / focus and these rules have to win over that.
═══════════════════════════════════════════ */

/* ── Basket: "open / closed" line and the waiting time ── */
.sc-status-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:.45rem .8rem;flex-wrap:wrap;
  padding:.65rem 1.5rem;border-bottom:1px solid var(--sc-bd);
  flex-shrink:0;
}
.sc-status-badge{
  display:inline-flex;align-items:center;
  font-size:.7rem;font-weight:600;letter-spacing:.03em;line-height:1.3;
  padding:.28rem .7rem;border-radius:99px;
  border:1px solid var(--sc-bd);color:var(--sc-cr);background:rgba(255,255,255,.03);
}
.sc-status-badge.open{color:#86efac;background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.28);}
.sc-status-badge.closed{color:#fca5a5;background:rgba(244,68,68,.08);border-color:rgba(244,68,68,.28);}
.sc-status-eta{font-size:.7rem;color:var(--sc-mu);white-space:nowrap;}

/* ── Basket: two small glitches of the old stylesheet ──
   the "Popular" label of a suggestion card floated to the top corner of the whole basket, and the
   suggestion cards under the basket lines touched both edges of the window */
.sc-rec-card{position:relative;}
.sc-upsell .sc-rec-grid{padding:0 1.5rem;margin-bottom:.4rem;}

/* ── Basket: minimum order for delivery ── */
.sc-threshold{padding:.65rem 1.5rem;border-bottom:1px solid var(--sc-bd);flex-shrink:0;}
.sc-thr-label{font-size:.72rem;color:var(--sc-mu);margin-bottom:.4rem;}
.sc-thr-label strong{color:var(--sc-or);font-weight:700;}
.sc-thr-bar{height:4px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;}
.sc-thr-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--sc-or),var(--sc-go));transition:width .35s var(--sc-ease);}

.sc-feat-group{margin-bottom:.2rem;}

/* ── Basket: one line (text column, category, price column) ── */
.sc-item-body{flex:1;min-width:0;}
.sc-item-cat{
  font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sc-mu);margin-bottom:.4rem;
}
.sc-item-opts{font-size:.7rem;line-height:1.4;color:var(--sc-mu);margin-bottom:.4rem;}
.sc-item-right{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;flex-shrink:0;}
.sc-item-price{font-family:'Cinzel',serif;font-size:.82rem;font-weight:700;color:var(--sc-go);white-space:nowrap;}
.sc-item-rm{background:none;border:0;padding:.15rem;line-height:1;margin-left:0;}
.sc-item-rm:hover,.sc-item-rm:focus{background:none;color:#f44;}

/* a dish with required choices: what was chosen ... */
.sc-item-choices{
  font-size:.74rem;line-height:1.45;color:var(--sc-cr);
  margin:0 0 .45rem;padding-left:.55rem;border-left:2px solid var(--sc-or);
}
/* ... or what is still missing */
.sc-item.need{background:rgba(245,158,11,.04);box-shadow:inset 3px 0 0 #f59e0b;}
.sc-item-need{
  font-size:.72rem;font-weight:600;line-height:1.4;color:#fbbf24;
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);
  border-radius:6px;padding:.32rem .55rem;margin:0 0 .45rem;
}
.sc-item-edit{
  display:inline-flex;align-items:center;
  font-family:'Jost',sans-serif;font-size:.68rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--sc-or);background:rgba(255,106,0,.08);
  border:1px solid rgba(255,106,0,.25);border-radius:6px;
  padding:.3rem .65rem;margin:0 0 .55rem;cursor:pointer;transition:all .2s;
}
.sc-item-edit:hover,.sc-item-edit:focus{color:var(--sc-or);background:rgba(255,106,0,.18);border-color:var(--sc-or);}
.sc-item-edit.need{color:#fff;background:linear-gradient(135deg,var(--sc-or),var(--sc-or2));border-color:transparent;}
.sc-item-edit.need:hover,.sc-item-edit.need:focus{
  color:#fff;background:linear-gradient(135deg,var(--sc-or),var(--sc-or2));
  border-color:transparent;box-shadow:0 2px 14px rgba(255,106,0,.45);
}

/* ── Buttons: keep their look on hover / focus ── */
.sc-btn-primary:focus{color:#fff;}
.sc-btn-ghost:hover,.sc-btn-ghost:focus{color:var(--sc-cr);background:rgba(255,255,255,.04);border-color:var(--sc-bd2);}
.sc-btn-orange{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:'Jost',sans-serif;font-size:.8rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:#fff;text-decoration:none;
  background:linear-gradient(135deg,var(--sc-or),var(--sc-or2));
  border:none;border-radius:8px;padding:.95rem 1.2rem;
  cursor:pointer;transition:all .22s;
  box-shadow:0 0 20px rgba(255,106,0,.3);
}
.sc-btn-orange:hover,.sc-btn-orange:focus{
  color:#fff;text-decoration:none;
  background:linear-gradient(135deg,var(--sc-or),var(--sc-or2));
  transform:translateY(-1px);box-shadow:0 4px 24px rgba(255,106,0,.5);
}
.sc-btn-orange:disabled,.sc-btn-orange[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}

/* ── Checkout: delivery asked outside delivery hours, and the lines of the summary ── */
.sc-co-closed{
  font-size:.76rem;line-height:1.55;color:#fbbf24;
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.28);
  border-radius:8px;padding:.7rem .95rem;margin-bottom:.55rem;
}
.sc-co-closed strong{color:#fde68a;}
.sc-co-switch{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;width:100%;padding:.7rem .85rem;}
.sc-co-switch:hover,.sc-co-switch:focus{color:var(--sc-or);background:rgba(255,106,0,.18);border-color:rgba(255,106,0,.35);}
.sc-co-sum-row > span:first-child{min-width:0;padding-right:.8rem;}
.sc-co-sum-opts{display:block;margin-top:.15rem;font-size:.66rem;line-height:1.4;color:var(--sc-mu);}

/* ═══════════════════════════════════════════
   CHOICE WINDOW  (meat / sauce / side - one option per group)
═══════════════════════════════════════════ */
.sc-picker{
  position:fixed;inset:0;z-index:999990;
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  height:100vh;height:100dvh;
  isolation:isolate;
  animation:sc-pk-fade .2s ease;
}
@keyframes sc-pk-fade{from{opacity:0;}to{opacity:1;}}
.sc-pk-box{
  position:relative;display:flex;flex-direction:column;
  width:100%;max-width:460px;
  max-height:90vh;max-height:90dvh;
  overflow:hidden;
  background:#0f0d08;border:1px solid var(--sc-bd);border-radius:14px;
  box-shadow:0 24px 80px rgba(0,0,0,.7);
  outline:none;
  animation:sc-pk-rise .28s var(--sc-spring);
}
@keyframes sc-pk-rise{from{transform:translateY(14px) scale(.97);opacity:0;}to{transform:none;opacity:1;}}
.sc-pk-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--sc-or) 30%,var(--sc-go) 50%,var(--sc-or) 70%,transparent);
}
.sc-pk-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.3rem 1rem;border-bottom:1px solid var(--sc-bd);
  flex-shrink:0;
}
.sc-pk-ttl{min-width:0;}
.sc-pk-kicker{font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sc-or);margin-bottom:.3rem;}
.sc-pk-name{font-family:'Cinzel',serif;font-size:1.05rem;font-weight:700;line-height:1.3;color:var(--sc-cr);}
.sc-pk-body{
  flex:1;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:1.05rem 1.3rem .35rem;
}
.sc-pk-group{border:0;margin:0 0 1.15rem;padding:0;min-width:0;}
.sc-pk-legend{display:block;width:100%;padding:0;margin:0 0 .6rem;}
.sc-pk-legend::after{content:'';display:table;clear:both;}
.sc-pk-lt{float:left;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sc-go);}
.sc-pk-req{float:right;font-size:.66rem;color:var(--sc-mu);padding-top:.12rem;}
.sc-pk-group.done .sc-pk-lt::after{content:' \2713';color:#4ade80;}
.sc-pk-group.done .sc-pk-req{visibility:hidden;}

.sc-pk-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:.5rem;}
.sc-pk-opt{position:relative;display:block;margin:0;cursor:pointer;}
.sc-pk-opt input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:pointer;z-index:1;
}
.sc-pk-lbl{
  display:flex;align-items:center;justify-content:center;
  min-height:46px;padding:.55rem .6rem;
  font-family:'Jost',sans-serif;font-size:.86rem;font-weight:600;line-height:1.25;
  text-align:center;color:var(--sc-cr);
  background:var(--sc-surf);border:1.5px solid var(--sc-bd);border-radius:10px;
  transition:border-color .18s,background .18s,box-shadow .18s,color .18s;
  -webkit-tap-highlight-color:transparent;
}
.sc-pk-opt:hover .sc-pk-lbl{border-color:var(--sc-bd2);background:var(--sc-surf2);}
.sc-pk-opt input:checked + .sc-pk-lbl{
  color:#fff;border-color:var(--sc-or);background:rgba(255,106,0,.16);
  box-shadow:0 0 18px rgba(255,106,0,.18);
}
.sc-pk-opt input:checked + .sc-pk-lbl::before{content:'\2713';margin-right:.4rem;color:var(--sc-or);font-weight:800;}
.sc-pk-opt input:focus-visible + .sc-pk-lbl{outline:2px solid var(--sc-go);outline-offset:2px;}

/* tried to add without choosing everything: the missing groups shake and turn red */
.sc-pk-group.miss{animation:sc-pk-shake .45s ease;}
.sc-pk-group.miss .sc-pk-lbl{border-color:rgba(244,68,68,.55);}
.sc-pk-group.miss .sc-pk-req{color:#f87171;font-weight:600;}
@keyframes sc-pk-shake{
  10%,90%{transform:translateX(-1px);}20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-4px);}40%,60%{transform:translateX(4px);}
}

.sc-pk-foot{
  flex-shrink:0;display:flex;flex-direction:column;gap:.65rem;
  padding:.9rem 1.3rem 1.15rem;border-top:1px solid var(--sc-bd);background:#0f0d08;
}
.sc-pk-hint{min-height:1.15em;text-align:center;font-size:.74rem;font-weight:600;line-height:1.35;color:#fbbf24;}
.sc-pk-hint.ok{color:#4ade80;}
.sc-pk-add{flex:none;width:100%;padding:1rem;font-size:.8rem;border-radius:8px;}
.sc-pk-add:hover,.sc-pk-add:focus{color:#fff;}
.sc-pk-add.is-off{opacity:.45;box-shadow:none;cursor:not-allowed;}
.sc-pk-add.is-off:hover,.sc-pk-add.is-off:focus{transform:none;box-shadow:none;}

/* while the window is open the round basket button would only be in the way */
body.sc-pk-open #sc-scroll-btn{display:none !important;}

@media(max-width:768px){
  .sc-picker{align-items:flex-end;padding:0;}
  .sc-pk-box{
    max-width:100%;border-radius:18px 18px 0 0;
    max-height:92vh;max-height:92dvh;
    animation:sc-pk-sheet .3s var(--sc-ease);
  }
  .sc-pk-foot{padding-bottom:calc(1.15rem + env(safe-area-inset-bottom,0px));}
}
@keyframes sc-pk-sheet{from{transform:translateY(40px);opacity:0;}to{transform:none;opacity:1;}}

@media(prefers-reduced-motion:reduce){
  .sc-picker,.sc-pk-box,.sc-pk-group.miss{animation:none;}
  .sc-pk-lbl{transition:none;}
}
