/* ---------- CART: nav icon + slide-in drawer ---------- */
/* Relies on the CSS custom properties already defined in each page's :root
   (--paper, --paper-deep, --ink, --ink-soft, --matcha, --matcha-bright, --matcha-deep, --cream, --line) */

.cart-toggle{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-left:14px; background:transparent; border:none; cursor:pointer;
  color:var(--ink); padding:0;
}
.cart-toggle svg{width:22px; height:22px;}
.cart-toggle .cart-badge{
  position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--matcha); color:var(--cream);
  font-family:'IBM Plex Mono', monospace; font-size:10px; font-weight:600;
  display:flex; align-items:center; justify-content:center; line-height:1;
  opacity:0; transform:scale(.6); transition:opacity .15s ease, transform .15s ease;
}
.cart-toggle .cart-badge.show{opacity:1; transform:scale(1);}

.cart-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:90;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.cart-overlay.open{opacity:1; pointer-events:auto;}

.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px, 100vw); z-index:91;
  background:var(--paper); border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .3s ease;
  box-shadow:-20px 0 60px -20px rgba(0,0,0,0.5);
}
.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(--line);
  font-family:'Fraunces', serif; font-size:19px; color:var(--ink);
}
.cart-drawer-head .cart-close{
  background:none; border:none; color:var(--ink-soft); font-size:26px; line-height:1; cursor:pointer; padding:0 4px;
}
.cart-drawer-head .cart-close:hover{color:var(--ink);}

.cart-drawer-body{flex:1; overflow-y:auto; padding:8px 24px;}
.cart-empty{
  padding:60px 10px; text-align:center; color:var(--ink-soft); font-size:14px;
}
.cart-empty a{color:var(--matcha-bright); text-decoration:underline;}

.cart-line{
  display:grid; grid-template-columns:1fr auto; gap:4px 12px;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.cart-line-info{display:flex; flex-direction:column; gap:3px;}
.cart-line-name{font-family:'Fraunces', serif; font-size:15.5px; color:var(--ink);}
.cart-line-variant{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--matcha-deep);}
.cart-line-price{font-size:12.5px; color:var(--ink-soft);}
.cart-line-total{font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--matcha-bright); text-align:right; align-self:start;}

.cart-line-controls{
  grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; margin-top:6px;
}
.cart-qty-stepper{display:flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.cart-qty-stepper button{
  width:28px; height:28px; background:var(--paper-deep); border:none; color:var(--ink); font-size:15px; cursor:pointer;
}
.cart-qty-stepper button:hover{background:var(--matcha); color:var(--paper);}
.cart-qty-stepper .qty-val{width:30px; text-align:center; font-family:'IBM Plex Mono', monospace; font-size:13px;}
.cart-line-remove{
  background:none; border:none; color:var(--ink-soft); font-size:12px; text-decoration:underline; cursor:pointer; font-family:'Work Sans', sans-serif;
}
.cart-line-remove:hover{color:var(--matcha-bright);}

.cart-drawer-foot{
  padding:20px 24px 26px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px;
}
.cart-subtotal-row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:'Fraunces', serif; font-size:17px; color:var(--ink);
}
.cart-subtotal-row span:last-child{color:var(--matcha-bright); font-family:'IBM Plex Mono', monospace; font-size:16px;}
.cart-note{font-size:11.5px; color:var(--ink-soft);}

.cart-btn{
  font-family:'Work Sans', sans-serif; font-weight:600; font-size:14px; letter-spacing:.02em;
  padding:14px 20px; border-radius:40px; text-decoration:none; text-align:center; cursor:pointer; border:none;
  transition:background .2s ease, color .2s ease;
}
.cart-btn-primary{background:var(--matcha); color:var(--cream);}
.cart-btn-primary:hover{background:var(--matcha-deep);}
.cart-btn-primary:disabled{opacity:.5; cursor:not-allowed;}
.cart-btn-secondary{background:transparent; color:var(--ink); border:1px solid var(--line);}
.cart-btn-secondary:hover{border-color:var(--ink-soft);}

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