/* ===== Storefront additions: cart button, drawer, catalogue states =====
   Reuses the tokens defined in site.css so the shop layer stays on-brand. */

/* The [hidden] attribute only sets display:none in the UA stylesheet, so any
   explicit display rule below (e.g. .cart-drawer{display:flex}) would beat it
   and leave the drawer open on load. Make the attribute authoritative. */
[hidden]{display:none !important;}

/* --- Cart button in the header --- */
.cart-button{
  position:relative;
  border:2px solid var(--pink-soft);
  background:#fff;
  border-radius:999px;
  width:46px;height:46px;
  display:grid;place-items:center;
  cursor:pointer;
  font-size:1.15rem;
  transition:transform .15s ease, border-color .15s ease;
}
.cart-button:hover{transform:translateY(-2px);border-color:var(--pink);}
.cart-button:focus-visible{outline:3px solid var(--pink);outline-offset:2px;}
.cart-count{
  position:absolute;top:-6px;right:-6px;
  min-width:22px;height:22px;padding:0 6px;
  background:var(--pink);color:#fff;
  border-radius:999px;
  font-family:'Baloo 2',sans-serif;font-size:.78rem;font-weight:700;
  display:grid;place-items:center;
}

/* --- Catalogue loading / error states --- */
.grid-loading,.grid-error{
  grid-column:1 / -1;
  text-align:center;padding:32px 0;
  color:var(--green-deep);
}
.grid-error{color:#B3245F;}
.product-card.is-sold-out{opacity:.62;}
.btn-tiny.is-added{background:var(--mint);border-color:var(--mint);color:#fff;}

/* --- Drawer --- */
.cart-backdrop{
  position:fixed;inset:0;
  background:rgba(58,50,48,.45);
  z-index:40;
}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:min(420px,100vw);
  background:var(--cream);
  border-left:3px solid var(--pink-soft);
  box-shadow:-18px 0 40px -20px rgba(244,79,155,.4);
  z-index:50;
  display:flex;flex-direction:column;
}
.cart-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 24px;
  border-bottom:2px dashed var(--pink-soft);
}
.cart-head h2{font-size:1.5rem;}
.cart-close{
  border:none;background:transparent;
  font-size:2rem;line-height:1;color:var(--pink);
  cursor:pointer;padding:0 4px;
}
.cart-close:focus-visible{outline:3px solid var(--pink);outline-offset:2px;}

.cart-body{flex:1;overflow-y:auto;padding:16px 24px;}
.cart-empty{text-align:center;padding:40px 8px;color:var(--green-deep);}

.cart-line{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"name price" "qty remove";
  gap:6px 12px;
  padding:14px 0;
  border-bottom:1px solid var(--pink-soft);
}
.cart-line-name{grid-area:name;font-weight:600;}
.cart-line-price{grid-area:price;color:var(--pink);font-weight:700;}
.cart-qty{grid-area:qty;display:flex;align-items:center;gap:10px;}
.cart-qty button{
  width:30px;height:30px;
  border:2px solid var(--pink-soft);background:#fff;
  border-radius:999px;cursor:pointer;
  font-size:1rem;line-height:1;color:var(--pink);
}
.cart-qty button:focus-visible{outline:3px solid var(--pink);outline-offset:1px;}
.cart-qty-value{min-width:2ch;text-align:center;font-weight:700;}
.cart-remove{
  grid-area:remove;justify-self:end;
  border:none;background:transparent;
  color:var(--green-deep);text-decoration:underline;
  cursor:pointer;font-size:.85rem;font-family:inherit;
}

/* --- Totals --- */
.cart-foot{padding:18px 24px 24px;border-top:2px dashed var(--pink-soft);}
.cart-totals{margin:0 0 14px;}
.cart-totals div{display:flex;justify-content:space-between;padding:3px 0;}
.cart-totals dt{color:var(--green-deep);}
.cart-totals dd{margin:0;font-weight:600;}
.cart-grand{
  border-top:1px solid var(--pink-soft);
  margin-top:8px;padding-top:10px !important;
  font-family:'Baloo 2',sans-serif;font-size:1.2rem;
}
.cart-grand dd{color:var(--pink);font-weight:800;}
.cart-note{min-height:1.3em;font-size:.88rem;color:#B3245F;margin-bottom:8px;}
.cart-checkout{width:100%;justify-content:center;}
.cart-checkout:disabled{opacity:.55;cursor:not-allowed;}
.cart-secure{
  margin-top:10px;text-align:center;
  font-size:.76rem;color:var(--green-deep);opacity:.85;
}
.join-status{margin-top:8px;font-size:.85rem;color:var(--green-deep);}

/* --- Order status page --- */
.order-page{max-width:640px;margin:60px auto;padding:0 24px;}
.order-card{
  background:#fff;border-radius:var(--radius-lg);
  padding:32px;box-shadow:var(--shadow-soft);
  border:2px solid var(--pink-soft);
}
.order-status{
  display:inline-block;padding:5px 14px;border-radius:999px;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:.85rem;
}
.order-status.is-paid{background:var(--mint-soft);color:var(--green-deep);}
.order-status.is-pending{background:var(--yellow-soft);color:#8A6A12;}
.order-status.is-failed,.order-status.is-cancelled{background:var(--pink-soft);color:#B3245F;}
.order-items{list-style:none;padding:0;margin:20px 0;}
.order-items li{
  display:flex;justify-content:space-between;
  padding:9px 0;border-bottom:1px solid var(--pink-soft);
}