/* ─────────────────────────────────────────────────────────────────────────
   Favorites (wishlist)
   The header drawer re-uses the cart drawer chrome (.drawer/.scrim/.cart-line);
   only the favorite-specific bits live here.
   ───────────────────────────────────────────────────────────────────────── */

/* PDP heart button — filled state when the product is saved.
   Material Symbols render as outline by default; FILL 1 fills the heart. */
.cta.secondary[data-cos-fav-toggle] .cta-icon {
	transition: font-variation-settings 0.15s ease;
}
.cta.secondary[data-cos-fav-toggle][aria-pressed="true"] .cta-icon {
	font-variation-settings: 'FILL' 1;
}

/* Header favorites icon stays a consistent outline heart regardless of count;
   the badge dot is what signals saved items. */
.nav-icon--fav .nav-icon-glyph .heart-fill {
	fill: transparent;
}

/* .cart-dot forces display:inline-flex, which beats the UA [hidden] rule — so
   the badge must be explicitly hidden when there are no favorites. */
.nav-icon--fav .cart-dot[hidden],
.cos-mobile-nav__action .cart-dot[hidden] {
	display: none;
}

/* ── Product card favorite button (archive/shop) ──────────────────────────
   Sits inside .cos-card__media (bottom-right of the photo); JS stops the click
   from bubbling to the card link. Revealed on hover; stays visible once saved
   or on touch. */
.cos-card__fav {
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 3;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--paper-92);
	color: var(--ink);
	cursor: pointer;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
.cos-card__fav-icon {
	width: 15px;
	height: 15px;
}
.cos-card:hover .cos-card__fav,
.cos-card__fav:focus-visible,
.cos-card__fav[aria-pressed="true"] {
	opacity: 1;
	transform: none;
}
.cos-card__fav:hover { background: var(--paper); }
.cos-card__fav:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.cos-card__fav .heart-fill {
	fill: transparent;
	transition: fill 0.15s ease;
}
.cos-card__fav[aria-pressed="true"] .heart-fill { fill: currentColor; }

/* No hover on touch devices (tablet/mobile) — there's no hover to reveal the
   button, so keep it always visible and a touch smaller. */
@media (hover: none) {
	.cos-card__fav { opacity: 1; transform: none; }
}