/* =========================================================================
   COEXIST COFFEE CO. — CART UI
   Shares design tokens with the page's own inline <style> (--ink, --paper,
   Poppins/Urbanist), redeclared here since this file loads independently.
   ========================================================================= */

:root{
  --cart-ink:#0e0e0d;
  --cart-paper:#faf9f6;
  --cart-grey:#6f6c66;
  --cart-grey-light:#a8a59e;
  --cart-line:rgba(14,14,13,0.12);
}

/* ---------------- cart icon in nav ---------------- */
.cart-toggle{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-right:10px;
  color:var(--cart-paper);
  transition:color .4s ease, opacity .2s ease;
  opacity:.9;
}
.cart-toggle:hover{opacity:1;}
header.scrolled .cart-toggle{color:var(--cart-ink);}
.cart-count{
  position:absolute;top:-2px;right:-2px;
  min-width:16px;height:16px;padding:0 3px;
  border-radius:50%;
  background:var(--cart-ink);color:var(--cart-paper);
  font-family:'Urbanist',sans-serif;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}
.cart-count[hidden]{display:none;}
header.scrolled .cart-count{background:var(--cart-paper);color:var(--cart-ink);border:1px solid var(--cart-ink);}

/* ---------------- overlay ---------------- */
.cart-overlay{
  position:fixed;inset:0;background:rgba(14,14,13,.5);
  opacity:0;visibility:hidden;transition:opacity .35s ease, visibility .35s ease;
  z-index:2000;
}
.cart-overlay.open{opacity:1;visibility:visible;}

/* ---------------- drawer ---------------- */
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:min(420px, 100vw);
  background:var(--cart-paper);color:var(--cart-ink);
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
  z-index:2001;
  display:flex;flex-direction:column;
  box-shadow:-8px 0 32px rgba(0,0,0,.18);
}
.cart-drawer.open{transform:translateX(0);}

.cart-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 24px;border-bottom:1px solid var(--cart-line);
  flex-shrink:0;
}
.cart-drawer-head h3{
  font-family:'Poppins',sans-serif;font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:.02em;
}
.cart-close{
  font-size:26px;line-height:1;color:var(--cart-ink);opacity:.6;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  transition:opacity .2s ease;
}
.cart-close:hover{opacity:1;}

.cart-drawer-body{
  flex:1;overflow-y:auto;padding:20px 24px;
}
.cart-empty{
  font-family:'Urbanist',sans-serif;font-size:14.5px;color:var(--cart-grey);
  padding:40px 0;text-align:center;
}

.cart-line{
  display:grid;grid-template-columns:64px 1fr auto;gap:14px;
  padding:16px 0;border-bottom:1px solid var(--cart-line);
  align-items:flex-start;
}
.cart-line:first-child{padding-top:0;}
.cart-line-figure{
  width:64px;height:64px;border-radius:4px;background-size:cover;background-position:center;
  background-color:var(--cart-line);
}
.cart-line-info{min-width:0;}
.cart-line-title{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:13.5px;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cart-line-variant{font-size:12px;color:var(--cart-grey-light);margin-top:2px;}
.cart-line-price{font-size:13px;color:var(--cart-grey);margin-top:4px;}
.cart-line-qty{
  display:inline-flex;align-items:center;gap:10px;margin-top:10px;
  border:1px solid var(--cart-line);border-radius:100px;padding:4px 10px;
  font-family:'Urbanist',sans-serif;font-size:13px;font-weight:600;
}
.qty-btn{
  width:16px;height:16px;display:flex;align-items:center;justify-content:center;
  color:var(--cart-ink);font-size:14px;line-height:1;
  transition:opacity .2s ease;opacity:.6;
}
.qty-btn:hover{opacity:1;}
.cart-line-remove{
  font-size:18px;color:var(--cart-grey-light);line-height:1;
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  transition:color .2s ease;
}
.cart-line-remove:hover{color:var(--cart-ink);}

.cart-drawer-foot{
  flex-shrink:0;padding:20px 24px 26px;border-top:1px solid var(--cart-line);
}
.cart-subtotal{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;
  margin-bottom:16px;
}
.cart-checkout-btn{
  display:flex;width:100%;justify-content:center;
  background:var(--cart-ink);color:var(--cart-paper);border-color:var(--cart-ink);
}
.cart-checkout-btn:hover{background:transparent;color:var(--cart-ink);}

body.cart-open{overflow:hidden;}

@media(max-width:480px){
  .cart-drawer{width:100vw;}
}

/* ---------------- add-to-cart button on product cards ---------------- */
.add-to-cart{
  margin-top:auto;
  width:100%;justify-content:center;
}
.add-to-cart:disabled{
  opacity:.4;cursor:not-allowed;
}
.add-to-cart:disabled:hover{
  background:none;color:inherit;
}