/* ============================================================
   C'era una volta — Wishlist (Worker W)
   Owns: PDP wishlist button, /wishlist page grid + empty state,
   header count badge. Does NOT redefine .pcard internals — the
   active heart fill already lives in theme.css (.pcard__wish.is-active).
   B&W / monochrome, theme tokens only.
   ============================================================ */

/* ---------- PDP wishlist toggle button ---------- */
.cuv-wish-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 18px;
	padding: 13px 26px;
	width: 100%;
	justify-content: center;
	border: 1px solid var(--ink);
	background: transparent;
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .22s var(--ease), color .22s var(--ease);
}

.cuv-wish-btn:hover {
	background: var(--ink);
	color: var(--paper);
}

.cuv-wish-btn svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.4;
	flex: 0 0 auto;
	transition: fill .2s var(--ease);
}

/* Saved state — filled heart, inverted swatch to read as "active". */
.cuv-wish-btn.is-active svg {
	fill: currentColor;
}

.cuv-wish-btn.is-active {
	background: var(--ink);
	color: var(--paper);
}

.cuv-wish-btn.is-active:hover {
	background: var(--paper);
	color: var(--ink);
}

/* ---------- /wishlist (Preferiti) page ---------- */
.cuv-wishlist {
	margin-top: 8px;
}

/* The AJAX response uses <ul class="products columns-4">, which already
   inherits the grid from plp.css. Nothing to redefine here — just keep the
   loading + empty states consistent. */
.cuv-wishlist.is-loading {
	opacity: .5;
	transition: opacity .2s var(--ease);
	pointer-events: none;
}

.cuv-wishlist__empty {
	margin: 0;
	padding: 64px 0;
	text-align: center;
	color: var(--muted);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 300;
	letter-spacing: .04em;
}

/* On the wishlist page, the heart is a remove control — hint it on hover. */
.cuv-wishlist .pcard__wish.is-active:hover svg {
	fill: var(--muted);
	stroke: var(--muted);
}

/* ---------- Header wishlist count badge ---------- */
/* Mirrors the cart-count treatment; header.php / wiring owns the markup,
   we only ensure the count reads correctly when present. */
.cuv-wish-count {
	font-size: 10px;
	letter-spacing: .04em;
	color: var(--ink);
	vertical-align: super;
	margin-left: 1px;
}

.cuv-wish-count[data-count="0"] {
	opacity: 0;
}