/**
 * Bouton favoris : trois états bien distincts.
 *
 * - Repos   : cœur vide, encre foncée, sur fond blanc.
 * - Survol  : fond teinté et cœur turquoise (« ajouter »).
 * - Actif   : cœur plein, rouge.
 * - Actif survolé : cœur vidé en rouge sur fond rosé (« retirer »).
 *
 * Les sélecteurs button.sc-wishlist passent devant les styles de bouton
 * d'Astra (fond plein et texte blanc au survol et au focus).
 */

.sc-wishlist {
	--sc-fav: #d6375b;
	--sc-fav-tint: #fdedf1;
	--sc-fav-border: #f2b8c6;
}

button.sc-wishlist,
button.sc-wishlist:focus {
	background: var(--sc-white);
	border: 1px solid var(--sc-border);
	color: var(--sc-ink);
	box-shadow: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/*
 * Taille fixe et sans marge intérieure : avec celle des boutons d'Astra
 * (15px 30px), il ne restait plus de place pour le cœur, écrasé à 0 px.
 */
button.sc-wishlist {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	padding: 0;
	margin: 0;
}

button.sc-wishlist svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	transition: fill 0.15s ease, transform 0.15s ease;
}

/* Barre d'ajout collante d'Astra : même hauteur que son bouton, un peu d'air. */
.ast-sticky-add-to-cart button.sc-wishlist {
	flex-basis: 41px;
	width: 41px;
	height: 41px;
	margin-left: 10px;
}

.ast-sticky-add-to-cart button.sc-wishlist svg {
	width: 18px;
	height: 18px;
}

/*
 * Quantité, « Ajouter au panier » et favori alignés : WooCommerce ajoute une
 * marge basse de 1em au bouton et à la quantité, une marge droite de 1em à la
 * quantité, et une marge gauche de -1em au bouton quand la quantité est masquée
 * (produit vendu à l'unité). La rangée du thème gère déjà l'espacement.
 */
.woocommerce div.product form.cart .sc-cart-row button.single_add_to_cart_button.button,
.woocommerce div.product form.cart .sc-cart-row div.quantity {
	margin: 0;
}

button.sc-wishlist:hover {
	background: var(--sc-tint);
	border-color: var(--sc-teal);
	color: var(--sc-teal);
}

button.sc-wishlist[aria-pressed="true"],
button.sc-wishlist[aria-pressed="true"]:focus {
	background: var(--sc-white);
	border-color: var(--sc-fav-border);
	color: var(--sc-fav);
}

button.sc-wishlist[aria-pressed="true"] svg {
	fill: currentColor;
	transform: scale(1.08);
}

button.sc-wishlist[aria-pressed="true"]:hover {
	background: var(--sc-fav-tint);
	border-color: var(--sc-fav);
	color: var(--sc-fav);
}

button.sc-wishlist[aria-pressed="true"]:hover svg {
	fill: none;
	transform: none;
}

button.sc-wishlist:focus-visible {
	outline: 2px solid var(--sc-teal);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	button.sc-wishlist,
	button.sc-wishlist svg {
		transition: none;
	}
}