/* ================================================================
   KALAI SHARED CART — "Your Bag" drawer + toast
   Shared by every page that isn't women.html (which already has this
   in women.css). Uses the same CSS variables defined in styles.css.
   ================================================================ */

.cart-overlay{
  position:fixed;
  inset:0;
  z-index:250;
  background:rgba(42,36,32,.4);
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}

.cart-overlay.open{
  opacity:1;
  visibility:visible;
}

.cart-drawer{
  position:absolute;
  top:0;
  right:0;
  width:min(500px,100%);
  height:100%;
  display:flex;
  flex-direction:column;
  background:var(--cream);
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}

.cart-overlay.open .cart-drawer{
  transform:translateX(0);
}

.cart-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:32px;
  border-bottom:1px solid var(--line);
}

.cart-header h2{
  margin-top:7px;
  font-size:34px;
  font-family:'Playfair Display',Georgia,serif;
}

.cart-header > button{
  font-size:28px;
  font-weight:200;
}

.cart-empty{
  padding:50px 32px;
  text-align:center;
}

.cart-empty p{
  font-family:'Playfair Display',Georgia,serif;
  font-size:24px;
}

.cart-empty button{
  margin-top:22px;
  padding-bottom:7px;
  border-bottom:1px solid var(--ink);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.cart-items{
  flex:1;
  overflow-y:auto;
  padding:0 32px;
}

.cart-line{
  position:relative;
  display:grid;
  grid-template-columns:86px 1fr auto;
  gap:16px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}

.cart-line-image{
  width:86px;
  height:112px;
  object-fit:cover;
  background:var(--cream-2);
}

.cart-line-info h3{
  font-family:'Inter',sans-serif;
  font-size:11px;
  font-weight:500;
}

.cart-line-info p{
  margin-top:7px;
  font-size:9px;
  line-height:1.7;
  color:rgba(42,36,32,.55);
}

.cart-line-bottom{
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:16px;
}

.qty-control{
  display:flex;
  align-items:center;
  border:1px solid var(--line);
}

.qty-control button{
  width:26px;
  height:25px;
  font-size:14px;
}

.qty-control span{
  width:25px;
  text-align:center;
  font-size:9px;
}

.remove-line{
  font-size:8px;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:underline;
  text-underline-offset:3px;
  color:rgba(42,36,32,.55);
}

.cart-line-price{
  font-size:9px;
  white-space:nowrap;
}

.cart-footer{
  padding:25px 32px 32px;
  border-top:1px solid var(--line);
  background:var(--cream);
}

.cart-subtotal{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
}

.cart-subtotal strong{
  font-weight:500;
}

.cart-note{
  margin-top:10px;
  font-size:8px;
  color:rgba(42,36,32,.5);
}

.checkout-btn{
  width:100%;
  margin-top:22px;
  padding:16px;
  background:var(--ink);
  color:var(--white);
  font-size:9px;
  letter-spacing:.13em;
  text-transform:uppercase;
}

body.no-scroll{
  overflow:hidden;
}

/* ================================================================
   TOAST
   ================================================================ */

.toast{
  position:fixed;
  z-index:500;
  left:50%;
  bottom:25px;
  max-width:calc(100% - 40px);
  padding:13px 18px;
  background:var(--ink);
  color:var(--white);
  font-size:9px;
  letter-spacing:.06em;
  transform:translate(-50%,20px);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, transform .3s cubic-bezier(.22,.61,.36,1), visibility .3s ease;
}

.toast.show{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}

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