/* ================= CART TOGGLE (nav icon) ================= */
.cart-toggle{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--ink-dim);
  cursor:pointer;
  transition:border-color .25s, color .25s;
  flex:none;
}
.cart-toggle:hover{ border-color:var(--accent); color:var(--accent-2); }
.cart-count{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 4px;
  border-radius:999px;
  background:var(--accent); color:var(--accent-ink);
  font-family:var(--font-mono); font-size:.66rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
}

/* ================= CART DRAWER ================= */
.cart-backdrop{
  position:fixed; inset:0; z-index:90;
  background:rgba(6,7,8,.6);
  backdrop-filter:blur(2px);
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease, ease);
}
.cart-backdrop.is-open{ opacity:1; pointer-events:auto; }

.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:91;
  width:min(420px,92vw);
  background:var(--bg);
  border-left:1px solid var(--line);
  box-shadow:-30px 0 60px -20px rgba(0,0,0,.6);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .38s var(--ease, ease);
}
.cart-drawer.is-open{ transform:translateX(0); }

.cart-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.3rem 1.4rem;
  border-bottom:1px solid var(--line-soft);
}
.cart-drawer-head h3{
  font-family:var(--font-display); font-size:1.05rem; margin:0;
}
.cart-drawer-close{
  width:32px; height:32px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--ink-dim); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; line-height:1;
}
.cart-drawer-close:hover{ color:var(--ink); border-color:var(--accent); }

.cart-drawer-items{
  flex:1; overflow-y:auto;
  padding:1rem 1.4rem;
  display:flex; flex-direction:column; gap:1rem;
}
.cart-item{
  display:grid; grid-template-columns:64px 1fr auto; gap:.9rem;
  align-items:start;
  padding-bottom:1rem; border-bottom:1px solid var(--line-soft);
}
.cart-item:last-child{ border-bottom:none; padding-bottom:0; }
.cart-item img{
  width:64px; height:64px; object-fit:cover; border-radius:10px;
  border:1px solid var(--line); background:var(--surface);
}
.cart-item-title{ font-size:.92rem; font-weight:700; color:var(--ink); margin-bottom:.15rem; }
.cart-item-variant{ font-size:.78rem; color:var(--ink-faint); font-family:var(--font-mono); margin-bottom:.6rem; }
.cart-item-qty{
  display:inline-flex; align-items:center; gap:0;
  border:1px solid var(--line); border-radius:999px;
  overflow:hidden;
}
.cart-item-qty button{
  width:26px; height:26px; background:var(--surface-2); border:none;
  color:var(--ink-dim); cursor:pointer; font-size:.9rem; line-height:1;
}
.cart-item-qty button:hover{ color:var(--accent-2); }
.cart-item-qty span{
  min-width:26px; text-align:center; font-family:var(--font-mono); font-size:.82rem;
}
.cart-item-price{ text-align:right; font-family:var(--font-mono); font-size:.92rem; color:var(--accent-2); font-weight:700; white-space:nowrap; }
.cart-item-remove{
  grid-column:3; justify-self:end; margin-top:.5rem;
  background:none; border:none; color:var(--ink-faint);
  font-family:var(--font-mono); font-size:.72rem; text-decoration:underline;
  cursor:pointer; padding:0;
}
.cart-item-remove:hover{ color:var(--ink); }

.cart-empty{
  text-align:center; padding:3rem 1rem; color:var(--ink-faint); font-size:.92rem;
}

.cart-drawer-foot{
  border-top:1px solid var(--line-soft);
  padding:1.2rem 1.4rem 1.5rem;
}
.cart-subtotal-row{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:.9rem; font-family:var(--font-mono);
}
.cart-subtotal-row span:first-child{ color:var(--ink-dim); font-size:.88rem; }
.cart-subtotal-row b{ color:var(--ink); font-size:1.2rem; }
.cart-drawer-foot .btn{ width:100%; justify-content:center; }
.cart-ship-note{
  margin-top:.8rem; font-family:var(--font-mono); font-size:.72rem;
  color:var(--ink-faint); text-align:center;
}
.cart-error{
  margin-top:.7rem; font-size:.78rem; color:#ff9d8a; text-align:center; min-height:1em;
}

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

/* Short-height viewports (phones rotated to landscape) leave very little
   room between the drawer's fixed header/footer chrome and the scrollable
   item list — enough that a cart line item could render clipped before a
   user scrolls to it. Tightening only the chrome's own padding (never the
   item card itself) reclaims that room without changing anything about
   the drawer's look at normal heights. */
@media (max-height:400px){
  .cart-drawer-head{ padding:.8rem 1.4rem; }
  .cart-drawer-foot{ padding:.8rem 1.4rem .9rem; }
  .cart-subtotal-row{ margin-bottom:.5rem; }
  .cart-ship-note{ margin-top:.4rem; }
}
@media (max-height:330px){
  .cart-drawer-head{ padding:.6rem 1.4rem; }
  .cart-drawer-foot{ padding:.6rem 1.4rem .7rem; }
  .cart-subtotal-row{ margin-bottom:.35rem; }
  .cart-ship-note{ margin-top:.25rem; }
}