/* Shared cart + checkout styles — Bran's Butcher and Pure Physique Kefir.
   Colours come from --cart-* variables that each page defines, so the same
   drawer renders in butcher crimson or kefir pink without forking this file. */

/* ---------- cart icon + badge ---------- */
.cart-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:rgba(246,239,226,.1);
  border:1px solid rgba(246,239,226,.25);color:var(--cream);cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s;
}
.cart-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--crimson-deep)}
.cart-btn svg{width:22px;height:22px}
.cart-btn .cart-count{
  position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  background:var(--gold-bright);color:var(--crimson-deep);border-radius:20px;
  font-family:var(--cond);font-weight:700;font-size:.72rem;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center;line-height:1;
  border:2px solid var(--crimson-dark);
  transform:scale(0);transition:transform .25s cubic-bezier(.4,1.6,.6,1);
}
.cart-btn .cart-count.show{transform:scale(1)}
.cart-btn.bump{animation:cartBump .35s ease}
@keyframes cartBump{0%,100%{transform:scale(1)}40%{transform:scale(1.18)}}

/* ---------- cart drawer ---------- */
.cart-scrim{
  position:fixed;inset:0;background:rgba(28,20,17,.55);z-index:90;
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
}
.cart-scrim.open{opacity:1;visibility:visible}
.cart-drawer{
  /* top+bottom, not height:100vh — 100vh is the *large* viewport on mobile, so the
     drawer's footer ends up hidden behind the browser toolbar. */
  position:fixed;top:0;bottom:0;right:0;width:min(420px,87vw);z-index:100;
  background:var(--cream);box-shadow:-20px 0 60px -20px rgba(0,0,0,.4);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .32s cubic-bezier(.32,.72,0,1);
}
.cart-drawer.open{transform:none}
.cart-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.3rem 1.6rem;border-bottom:1px solid var(--line);background:var(--cream-soft);
}
.cart-head h3{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--ink);margin:0}
.cart-close{
  width:36px;height:36px;border-radius:50%;border:0;background:transparent;
  cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.cart-close:hover{background:rgba(74,12,20,.08)}
.cart-close svg{width:20px;height:20px}
.cart-body{flex:1;min-height:0;overflow-y:auto;padding:1rem 1.2rem;overscroll-behavior:contain}
.cart-empty{
  text-align:center;padding:3rem 1rem;color:rgba(28,20,17,.55);
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.18em;font-size:.9rem;
}
.cart-empty svg{width:48px;height:48px;color:rgba(74,12,20,.18);margin:0 auto 1rem;display:block}
.cart-line{
  display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;align-items:center;
  padding:.9rem 0;border-bottom:1px solid var(--line);
}
.cart-line:last-child{border-bottom:0}
.cart-line .ct-img{
  width:64px;height:64px;border-radius:10px;overflow:hidden;background:var(--emerald);
  display:flex;align-items:center;justify-content:center;
}
.cart-line .ct-img img{width:100%;height:100%;object-fit:cover}
.cart-line .ct-info h4{font-family:var(--display);font-weight:700;font-size:.98rem;color:var(--ink);margin:0 0 .15rem;line-height:1.2}
.cart-line .ct-info .ct-unit{font-family:var(--cond);text-transform:uppercase;letter-spacing:.06em;font-size:.75rem;color:rgba(28,20,17,.55);margin-bottom:.4rem}
.cart-line .ct-qty{display:inline-flex;align-items:center;gap:.4rem;background:var(--white);border:1px solid var(--line);border-radius:30px;padding:.1rem;width:max-content}
.cart-line .ct-qty button{width:24px;height:24px;border-radius:50%;border:0;background:transparent;cursor:pointer;font-size:1rem;line-height:1;color:var(--ink);display:flex;align-items:center;justify-content:center}
.cart-line .ct-qty button:hover{background:var(--cream-soft)}
.cart-line .ct-qty span{font-family:var(--display);font-weight:700;min-width:18px;text-align:center;color:var(--ink)}
.cart-line .ct-right{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem}
.cart-line .ct-price{font-family:var(--display);font-weight:800;color:var(--crimson);font-size:1rem}
.cart-line .ct-remove{
  background:transparent;border:0;cursor:pointer;color:rgba(28,20,17,.4);
  padding:0;font-family:var(--cond);text-transform:uppercase;font-size:.7rem;letter-spacing:.1em;
  transition:color .15s;
}
.cart-line .ct-remove:hover{color:var(--crimson)}
.cart-foot{
  border-top:1px solid var(--line);padding:1.2rem 1.6rem 1.4rem;background:var(--cream-soft);
}
.cart-foot .ct-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.4rem}
.cart-foot .ct-row.total{margin-top:.5rem;padding-top:.7rem;border-top:1px dashed rgba(74,12,20,.2)}
.cart-foot .ct-row .lbl{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;color:rgba(28,20,17,.7)}
.cart-foot .ct-row .val{font-family:var(--display);font-weight:700;color:var(--ink)}
.cart-foot .ct-row.total .lbl{color:var(--ink);font-weight:700}
.cart-foot .ct-row.total .val{color:var(--crimson);font-size:1.4rem}
.cart-foot .ct-note{font-size:.78rem;color:rgba(28,20,17,.55);margin:.4rem 0 1rem;line-height:1.5}
.cart-foot .ct-checkout{
  width:100%;background:var(--emerald);color:var(--cream);border:0;cursor:pointer;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  font-size:1rem;padding:.95rem 1.2rem;border-radius:40px;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  transition:background .2s,transform .15s;
}
.cart-foot .ct-checkout:hover{background:var(--emerald-bright);transform:translateY(-1px)}
.cart-foot .ct-checkout:disabled{background:rgba(74,12,20,.15);color:rgba(28,20,17,.4);cursor:not-allowed;transform:none}
.cart-foot .ct-checkout svg{width:18px;height:18px}
.cart-foot .ct-addmore{
  width:100%;background:transparent;color:var(--ink);border:1.5px solid rgba(74,12,20,.25);cursor:pointer;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:.95rem;
  padding:.78rem 1.2rem;border-radius:40px;margin-bottom:.6rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  transition:background .2s,border-color .2s,color .2s;
}
.cart-foot .ct-addmore:hover{background:var(--white);border-color:var(--crimson);color:var(--crimson)}
.cart-foot .ct-addmore svg{width:18px;height:18px}

/* ---------- checkout modal ---------- */
/* The modal is capped to the viewport and scrolls its own body. Do NOT make the
   scrim the scroller — a fixed ancestor scrolling a taller-than-viewport child is
   what kept breaking touch scroll on iOS. Keep the scroller INSIDE the modal. */
.checkout-scrim{
  position:fixed;inset:0;background:rgba(28,20,17,.62);z-index:110;
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
  display:flex;align-items:flex-start;justify-content:center;
  padding:1.2rem;overscroll-behavior:contain;
}
.checkout-scrim.open{opacity:1;visibility:visible}
.checkout-modal{
  background:var(--cream);border-radius:20px;width:min(540px,100%);
  max-height:100%;display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(20px);transition:transform .3s;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
}
.checkout-scrim.open .checkout-modal{transform:none}
.checkout-modal .chk-head{
  flex:none;
  padding:1.6rem 1.8rem 1.2rem;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.checkout-modal .chk-head h3{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--ink);margin:0;line-height:1.1}
.checkout-modal .chk-head p{font-size:.92rem;color:rgba(28,20,17,.6);margin:.3rem 0 0}
.checkout-modal .chk-close{
  flex:none;width:36px;height:36px;border-radius:50%;border:0;background:transparent;
  cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;
}
.checkout-modal .chk-close:hover{background:rgba(74,12,20,.08)}
.checkout-modal .chk-close svg{width:20px;height:20px}
/* min-height:0 is load-bearing — without it a flex child refuses to shrink and
   the form grows past the modal instead of scrolling. */
.checkout-modal form{
  padding:1.4rem 1.8rem 1.8rem;display:flex;flex-direction:column;gap:1rem;
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
}
.checkout-modal .chk-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.checkout-modal .chk-field label{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:.78rem;color:rgba(28,20,17,.7);font-weight:600;display:block;margin-bottom:.35rem;
}
.checkout-modal .chk-field input,
.checkout-modal .chk-field textarea{
  width:100%;background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:.75rem .9rem;font-family:var(--body);font-size:1rem;color:var(--ink);
  transition:border-color .15s,box-shadow .15s;
}
.checkout-modal .chk-field textarea{resize:vertical;min-height:72px;font-family:var(--body)}
.checkout-modal .chk-field input:focus,
.checkout-modal .chk-field textarea:focus{
  outline:none;border-color:var(--emerald);box-shadow:0 0 0 3px rgba(31,122,85,.15);
}
.checkout-modal .chk-summary{
  background:var(--cream-soft);border:1px dashed rgba(74,12,20,.2);
  border-radius:12px;padding:.9rem 1.1rem;font-size:.88rem;
}
.checkout-modal .chk-summary .s-line{display:flex;justify-content:space-between;color:rgba(28,20,17,.75);margin:.15rem 0}
.checkout-modal .chk-summary .s-total{display:flex;justify-content:space-between;margin-top:.5rem;padding-top:.5rem;border-top:1px solid rgba(74,12,20,.15);font-family:var(--display);font-weight:800;color:var(--ink)}
.checkout-modal .chk-summary .s-total span:last-child{color:var(--crimson)}
.checkout-modal .chk-summary .s-line sup{color:var(--crimson);font-weight:700}
.checkout-modal .chk-summary .s-note{font-size:.74rem;color:rgba(28,20,17,.6);line-height:1.45;margin-top:.6rem;padding-top:.55rem;border-top:1px dashed rgba(74,12,20,.18)}
.checkout-modal .chk-submit{
  background:var(--emerald);color:var(--cream);border:0;cursor:pointer;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  font-size:1rem;padding:1rem 1.2rem;border-radius:40px;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  transition:background .2s,transform .15s;margin-top:.2rem;
}
.checkout-modal .chk-submit:hover{background:var(--emerald-bright);transform:translateY(-1px)}
.checkout-modal .chk-submit svg{width:20px;height:20px}
.checkout-modal .chk-disclaimer{font-size:.78rem;color:rgba(28,20,17,.55);text-align:center;line-height:1.5;margin:.1rem 0 0}
.checkout-modal .chk-grace{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.85rem 1rem;border-radius:12px;
  background:rgba(31,122,85,.08);border:1px solid rgba(31,122,85,.2);
}
.checkout-modal .chk-grace svg{flex:none;width:20px;height:20px;color:var(--emerald);margin-top:.1rem}
.checkout-modal .chk-grace p{margin:0;font-size:.88rem;line-height:1.5;color:rgba(28,20,17,.78)}
.checkout-modal .chk-grace strong{color:var(--emerald);font-weight:700}

@media(max-width:560px){
  .checkout-modal .chk-row{grid-template-columns:1fr}
}

/* ---------- cross-sell: the other shop's products, offered at checkout ---------- */
.cart-cross{
  margin:.2rem 0 .9rem;padding:.85rem .9rem .9rem;border-radius:14px;
  background:var(--cream-soft);
  border:1px dashed var(--line);
}
.cart-cross .xs-title{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:.72rem;font-weight:700;color:var(--crimson);margin:0 0 .6rem;
}
.cart-cross .xs-row{display:flex;flex-direction:column;gap:.45rem}
.cart-cross .xs-item{
  display:flex;align-items:center;gap:.65rem;width:100%;cursor:pointer;text-align:left;
  background:var(--white);border:1px solid var(--line);
  border-radius:11px;padding:.45rem .6rem;transition:border-color .2s,transform .2s,box-shadow .2s;
}
.cart-cross .xs-item:hover{
  border-color:var(--crimson);transform:translateY(-1px);
  box-shadow:0 8px 18px -12px rgba(0,0,0,.5);
}
.cart-cross .xs-img{
  flex:none;width:38px;height:38px;border-radius:9px;overflow:hidden;
  background:var(--line);
}
.cart-cross .xs-img img{width:100%;height:100%;object-fit:cover;display:block}
.cart-cross .xs-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.cart-cross .xs-txt b{
  font-family:var(--display);font-weight:700;font-size:.84rem;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cart-cross .xs-txt i{
  font-style:normal;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.07em;font-size:.66rem;color:var(--ink-soft, rgba(0,0,0,.55));margin-top:.12rem;
}
.cart-cross .xs-add{
  flex:none;font-family:var(--display);font-weight:800;font-size:.8rem;
  color:var(--crimson);white-space:nowrap;
}