/* ═══════════════════════════════════════════
   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;
    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;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    /* Reserve genuine space for the sticky submit button below it
       (confirmed via screenshot: was overlapping the notes textarea).
       The button itself is padding:1.1rem top+bottom plus text plus a
       safe-area inset, so .5rem alone was nowhere near enough - this
       comfortably exceeds its real rendered height. */
    padding-bottom:5rem;
  }
  /* Submit button sticks to bottom of the box — always visible */
  .sc-co-submit{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    margin-left:0;margin-right:0;
    width:100%;
    border-radius:0;
    padding:1.1rem;
    padding-bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));
    z-index:9900;
  }
  .sc-co-box{
    padding-bottom:5rem;
  }
  .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;}
}