/**
 * Cart drawer, floating bag button and wishlist hearts.
 * Colours/type/motion all come from tokens.css.
 */

:root { --cb-pink-deep: color-mix(in srgb, var(--cb-color-dusty-rose) 78%, var(--cb-charcoal)); }

[data-cart-count][hidden],
[data-wishlist-count][hidden] { display: none; }

/* ============ Floating bag button ============ */
.cb-cart-fab {
	position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40;
	width: 3.5rem; height: 3.5rem; border-radius: var(--cb-radius-full);
	display: flex; align-items: center; justify-content: center;
	background: var(--cb-color-dusty-rose); color: var(--cb-color-button-text);
	box-shadow: var(--cb-shadow-ambient);
	transition: transform var(--cb-transition-fast), background var(--cb-transition-fast), box-shadow var(--cb-transition-fast);
}
.cb-cart-fab:hover { background: var(--cb-pink-deep); transform: translateY(-2px); box-shadow: var(--cb-shadow-md); }
.cb-cart-fab__count {
	position: absolute; top: -0.2rem; right: -0.2rem; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem;
	border-radius: var(--cb-radius-full); background: var(--cb-color-text); color: var(--cb-white);
	font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
body:has(.cb-cart-drawer.is-open) .cb-cart-fab { opacity: 0; pointer-events: none; }
@media (max-width: 640px) {
	.cb-cart-fab { right: 1rem; bottom: 1rem; width: 3.25rem; height: 3.25rem; }
}

/* ============ Cart drawer ============ */
.cb-cart-drawer { position: fixed; inset: 0; z-index: 110; visibility: hidden; pointer-events: none; }
.cb-cart-drawer.is-open { visibility: visible; pointer-events: auto; }
.cb-cart-drawer__scrim {
	position: absolute; inset: 0; background: rgba(45, 41, 38, 0.4);
	opacity: 0; transition: opacity var(--cb-transition);
}
.cb-cart-drawer.is-open .cb-cart-drawer__scrim { opacity: 1; }
.cb-cart-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: 100%; max-width: 420px;
	background: var(--cb-color-background); display: flex; flex-direction: column;
	transform: translateX(100%); transition: transform var(--cb-transition);
	box-shadow: var(--cb-shadow-md);
}
.cb-cart-drawer.is-open .cb-cart-drawer__panel { transform: translateX(0); }
.cb-cart-drawer__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--cb-space-md) var(--cb-space-lg); border-bottom: 1px solid var(--cb-color-border);
}
.cb-cart-drawer__head h2 { margin: 0; }
.cb-cart-drawer__qty { color: var(--cb-color-text-faint); font-family: var(--cb-font-body); font-size: var(--cb-text-body-md); }
.cb-cart-drawer__error {
	margin: var(--cb-space-md) var(--cb-space-lg) 0; padding: 0.6rem 0.9rem; border-radius: var(--cb-radius);
	background: color-mix(in srgb, var(--cb-color-error) 8%, transparent); color: var(--cb-color-error);
	font-size: var(--cb-text-body-md);
}
.cb-cart-drawer__error[hidden] { display: none; }
.cb-cart-drawer__body { flex: 1; overflow-y: auto; padding: var(--cb-space-md) var(--cb-space-lg); transition: opacity var(--cb-transition-fast); }
.cb-cart-drawer.is-busy .cb-cart-drawer__body { opacity: 0.5; pointer-events: none; }
.cb-cart-drawer__foot {
	display: flex; flex-direction: column; gap: var(--cb-space-sm);
	padding: var(--cb-space-md) var(--cb-space-lg) var(--cb-space-lg);
	border-top: 1px solid var(--cb-color-border); background: var(--cb-color-surface);
}
.cb-cart-drawer__foot:empty { display: none; }
.cb-cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--cb-text-body-lg); }
.cb-cart-subtotal strong { font-weight: 600; }
.cb-cart-note { margin: 0 0 var(--cb-space-xs); color: var(--cb-color-text-faint); font-size: var(--cb-text-body-sm); line-height: var(--cb-leading-body-sm); }

/* Line items */
.cb-cart-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cb-cart-item {
	position: relative; display: grid; grid-template-columns: 5rem 1fr; gap: var(--cb-space-md);
	padding: var(--cb-space-md) 0; border-bottom: 1px solid var(--cb-color-border);
}
.cb-cart-item:last-child { border-bottom: 0; }
.cb-cart-item__img { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--cb-radius); background: var(--cb-color-surface-alt); }
.cb-cart-item__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cb-cart-item__info { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; padding-right: 1.75rem; }
.cb-cart-item__name { font-family: var(--cb-font-heading); font-size: var(--cb-text-headline-sm); line-height: var(--cb-leading-headline-sm); }
a.cb-cart-item__name:hover { color: var(--cb-color-dusty-rose); }
.cb-cart-item__variation { font-size: var(--cb-text-body-sm); color: var(--cb-color-text-muted); text-transform: capitalize; }
.cb-cart-item__row { display: flex; align-items: center; justify-content: space-between; gap: var(--cb-space-sm); margin-top: auto; padding-top: var(--cb-space-xs); }
.cb-cart-item__price { font-size: var(--cb-text-body-md); font-weight: 500; }
.cb-cart-item__price .woocommerce-Price-amount { white-space: nowrap; }
.cb-cart-item__remove {
	position: absolute; top: var(--cb-space-md); right: 0; width: 1.75rem; height: 1.75rem;
	display: flex; align-items: center; justify-content: center; color: var(--cb-color-text-faint);
	transition: color var(--cb-transition-fast);
}
.cb-cart-item__remove:hover { color: var(--cb-color-error); }
.cb-qty--sm button { width: 1.9rem; height: 2rem; }
.cb-qty--sm input[type="number"] { width: 2.1rem; height: 2rem; font-size: var(--cb-text-body-md); padding: 0; }

/* Empty state */
.cb-cart-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--cb-space-sm); padding: var(--cb-space-xl) 0; color: var(--cb-color-text-muted); }
.cb-cart-empty svg { color: var(--cb-color-dusty-rose); margin-bottom: var(--cb-space-sm); }
.cb-cart-empty .cb-btn { margin-top: var(--cb-space-md); }

/* Product card quick-add feedback */
.cb-product-card__quick-add a.loading { opacity: 0.6; pointer-events: none; }
.cb-product-card__quick-add a.added::after { display: none; }

/* ============ Wishlist ============ */
.cb-wish-btn { color: var(--cb-color-text); cursor: pointer; }
.cb-wish-btn__icon { display: inline-flex; line-height: 0; }
.cb-wish-btn__icon--on { display: none; }
.cb-wish-btn.is-active .cb-wish-btn__icon--off { display: none; }
.cb-wish-btn.is-active .cb-wish-btn__icon--on { display: inline-flex; color: var(--cb-color-dusty-rose); }
.cb-wish-btn.is-pulse .cb-wish-btn__icon { animation: cb-heart-pop 380ms ease; }
@keyframes cb-heart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cb-wish-btn.is-pulse .cb-wish-btn__icon { animation: none; } }

/* Round heart over the product image (top-right; badges sit top-left). */
.cb-wish-btn--icon {
	position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3;
	width: 2.25rem; height: 2.25rem; border-radius: var(--cb-radius-full);
	display: flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, 0.92); box-shadow: var(--cb-shadow-card);
	transition: background var(--cb-transition-fast), transform var(--cb-transition-fast);
}
.cb-wish-btn--icon:hover { background: var(--cb-white); transform: scale(1.06); }

/* Labelled button on the product page. */
.cb-wish-btn--text {
	display: inline-flex; align-items: center; gap: 0.5rem; margin-top: var(--cb-space-md);
	font-size: var(--cb-text-label-md); letter-spacing: var(--cb-tracking-label-md); text-transform: uppercase;
	color: var(--cb-color-text-muted); padding: 0.25rem 0;
	transition: color var(--cb-transition-fast);
}
.cb-wish-btn--text:hover, .cb-wish-btn--text.is-active { color: var(--cb-color-text); }

/* Wishlist page */
.cb-wishlist-page { padding-block: var(--cb-space-xl); }
.cb-wishlist-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--cb-space-md); padding: var(--cb-space-xl) 0; color: var(--cb-color-text-muted); }
.cb-wishlist-empty[hidden] { display: none; }
.cb-wishlist-empty h2, .cb-wishlist-empty p { margin: 0; }
[data-wishlist-grid][hidden] { display: none; }

/* Cart accents stay pink everywhere (the site-wide primary-button hover is blue). */
.cb-cart-drawer .cb-btn--primary:hover { background: var(--cb-pink-deep); }
.cb-cart-fab:focus-visible,
.cb-cart-drawer :focus-visible { outline: 2px solid var(--cb-color-dusty-rose); outline-offset: 2px; }
.cb-cart-item__name:hover { color: var(--cb-color-dusty-rose); }

/* If the Modern Cart plugin's floating cart / slide-out is active, give it the
   same blush palette instead of its default blue and green. */
body {
	--moderncart-primary-color: var(--cb-color-dusty-rose);
	--moderncart-primary-color-light: color-mix(in srgb, var(--cb-color-dusty-rose) 7%, transparent);
	--moderncart-highlight-color: var(--cb-color-dusty-rose);
	--moderncart-highlight-color-light: color-mix(in srgb, var(--cb-color-dusty-rose) 7%, transparent);
	--moderncart-floating-icon-bg-color: var(--cb-color-dusty-rose);
	--moderncart-floating-icon-bg-color-light: color-mix(in srgb, var(--cb-color-dusty-rose) 7%, transparent);
	--moderncart-floating-icon-color: var(--cb-charcoal);
	--moderncart-floating-count-bg-color: var(--cb-charcoal);
	--moderncart-floating-count-text-color: #fff;
	--moderncart-button-font-color: var(--cb-charcoal);
}