/* =====================================================================
   We Mate — Shared cart drawer (slide-in) stylesheet
   --------------------------------------------------------------------
   Self-contained (literal brand colours, scoped to .cart-* classes), so any
   page can get the canonical cart drawer by linking this file + including the
   cart-overlay/cart-drawer DOM. Mirrors the inline cart-drawer styles used by
   the content pages (blog/account/…). Used by presale (storefront) so its
   canonical navbar cart button opens the same drawer.
   ===================================================================== */
.cart-overlay { position: fixed; inset: 0; background: rgba(27,58,75,.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 400; opacity: 0; pointer-events: none; transition: opacity .3s; }
.cart-overlay.open { opacity: 1; pointer-events: all; }
.cart-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 380px; max-width: 95vw; background: #F7F5F1; z-index: 401; transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(27,58,75,.14); }
.cart-drawer.open { transform: translateX(0); }
.cart-drawer-header { padding: 24px 24px 20px; border-bottom: 1px solid #ECE7DE; display: flex; align-items: center; justify-content: space-between; }
.cart-drawer-title { font-family: 'Merriweather', Georgia, serif; font-size: 1.35rem; color: #1B3A4B; }
.cart-close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #5A6A72; padding: 4px; }
.cart-items { flex: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.cart-empty { text-align: center; padding: 48px 0; color: #5A6A72; font-size: .9rem; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cart-item { display: flex; align-items: center; gap: 12px; background: #FFFFFF; border: 1px solid rgba(27,58,75,.3); border-radius: 12px; padding: 12px; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-size: .85rem; font-weight: 500; color: #1B3A4B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-price { font-size: .8rem; color: #5A6A72; }
.cart-item-qty { display: flex; align-items: center; gap: 6px; }
.qty-btn { background: #ECE7DE; border: none; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: .95rem; color: #1B3A4B; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.qty-btn:hover { background: #2E6E4E; color: #fff; }
.qty-num { font-size: .85rem; font-weight: 600; min-width: 16px; text-align: center; }
.cart-footer { padding: 16px 24px 28px; border-top: 1px solid #ECE7DE; }
.cart-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.cart-total-label { font-size: .88rem; color: #5A6A72; }
.cart-total-amount { font-size: 1.2rem; font-weight: 700; color: #1B3A4B; }
.checkout-btn { width: 100%; padding: 14px; border-radius: 999px; background: #D9B871; color: #1B3A4B; font-family: 'Inter', sans-serif; font-size: .92rem; font-weight: 700; cursor: pointer; border: none; transition: background .2s, transform .2s; letter-spacing: .04em; }
.checkout-btn:hover { background: #E4C588; transform: translateY(-1px); }