/* Shared cart widget — used on every customer-facing page so the cart
   icon and drawer are consistent no matter which page added the item.
   Falls back to House of Postiche's standard palette if a page hasn't
   defined one of these CSS variables itself. */

.nav-actions { display: flex; align-items: center; gap: 20px; margin-left: auto; }

.cart-btn { position: relative; background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; color: var(--medium, #4A443F); padding: 4px; }
.cart-btn:hover { color: var(--gold-dark, #956F45); }
.cart-badge {
    position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--gold-dark, #956F45); color: var(--white, #FAFAF8); border-radius: 999px;
    font-size: 9px; font-weight: 700; line-height: 16px; text-align: center; font-family: 'Inter', sans-serif;
}

.cart-overlay { position: fixed; inset: 0; background: rgba(44,40,37,.45); z-index: 400; display: none; }
.cart-overlay.show { display: block; }
.cart-drawer {
    position: fixed; top: 0; right: -400px; width: 380px; max-width: 90vw; height: 100%;
    background: var(--white, #FAFAF8); z-index: 401; display: flex; flex-direction: column;
    transition: right .3s ease; box-shadow: -8px 0 24px rgba(0,0,0,.15);
    font-family: 'Inter', sans-serif; color: var(--dark, #2C2825);
}
.cart-drawer.show { right: 0; }
.cart-drawer-header { padding: 22px 24px; border-bottom: 1px solid var(--border, #DDD5C5); display: flex; align-items: center; justify-content: space-between; }
.cart-drawer-header h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 20px; margin: 0; }
.cart-close { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--medium, #4A443F); line-height: 1; }
.cart-items { flex: 1; overflow-y: auto; padding: 6px 24px; }
.cart-empty-msg { font-size: 13px; color: var(--warm-gray, #8C8680); text-align: center; padding: 50px 0; }
.cart-line { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border-lt, #EDE7DC); }
.cart-line img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius, 2px); flex-shrink: 0; }
.cart-line-info { flex: 1; min-width: 0; }
.cart-line-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.cart-line-price { font-size: 12px; color: var(--warm-gray, #8C8680); margin-bottom: 10px; }
.cart-line-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cart-line-remove { background: none; border: none; font-size: 11px; color: var(--warm-gray, #8C8680); cursor: pointer; text-decoration: underline; padding: 0; font-family: inherit; }
.cart-line-remove:hover { color: #A34A3F; }
.cart-footer { padding: 20px 24px; border-top: 1px solid var(--border, #DDD5C5); }
.cart-subtotal-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; font-size: 14px; }
.cart-subtotal-row strong { font-family: 'Cormorant Garamond', serif; font-size: 22px; }
.cart-checkout-btn {
    width: 100%; padding: 13px; background: var(--dark, #2C2825); color: var(--white, #FAFAF8); border: none;
    font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    border-radius: var(--radius, 2px); cursor: pointer; font-family: inherit; transition: background .2s;
}
.cart-checkout-btn:hover:not(:disabled) { background: var(--gold-dark, #956F45); }
.cart-checkout-btn:disabled { background: var(--border, #DDD5C5); color: var(--warm-gray, #8C8680); cursor: not-allowed; }
.cart-continue-link { display: block; text-align: center; margin-top: 12px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--medium, #4A443F); text-decoration: none; }
.cart-continue-link:hover { color: var(--gold-dark, #956F45); }

.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--border, #DDD5C5); border-radius: var(--radius, 2px); }
.qty-stepper button { width: 30px; height: 34px; border: none; background: none; cursor: pointer; font-size: 14px; color: var(--dark, #2C2825); font-family: inherit; }
.qty-stepper button:hover { color: var(--gold-dark, #956F45); }
.qty-stepper span { width: 26px; text-align: center; font-size: 12.5px; font-weight: 600; }

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