/*
|--------------------------------------------------------------------------
| Favoritos
|--------------------------------------------------------------------------
| El "chrome" del botón (círculo, tamaño, sombra, colores) vive en
| buttons.css/cards.css/archive.css sin cambios — acá sólo el estado del
| ícono (corazón vacío vs relleno), estado de carga, utilitario para el
| live region de errores, y la página de Favoritos.
*/

/*
 * Corazón vacío (sólo contorno rosado) por defecto; relleno completo
 * cuando el botón está marcado como favorito. `currentColor` hereda el
 * rosado (o blanco en :hover) que ya define el botón — así el ícono nunca
 * cambia de tamaño/posición, sólo su relleno.
 */
.wishlist-heart {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8px;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

[data-wishlist-toggle].is-active .wishlist-heart {
	fill: currentColor;
}

[data-wishlist-toggle][aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Página de Favoritos */

.favorites-page__header {
	text-align: center;
	padding: var(--space-10) 0 var(--space-6);
}

.favorites-page__title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	color: var(--color-text);
	margin: 0 0 var(--space-2);
}

.favorites-page__subtitle {
	color: var(--color-text-muted);
	margin: 0;
}

.favorites-empty {
	text-align: center;
	padding: var(--space-16) var(--space-4);
	max-width: var(--container-reading);
	margin: 0 auto;
}

.favorites-empty__icon {
	font-size: var(--text-hero);
	color: var(--color-accent);
	line-height: 1;
	margin-bottom: var(--space-4);
}

.favorites-empty__text {
	color: var(--color-text-muted);
	margin: 0 0 var(--space-6);
}

/*
 * La cuadrícula de tarjetas en sí (.shop-grid, incluida su respuesta
 * responsive) es la misma de Shop/categorías — ver
 * template-parts/favorites/grid.php y assets/css/archive.css. Acá sólo
 * el espacio inferior de esta sección de la página.
 */
.favorites-products {
	padding: 0 0 var(--space-16);
}

.favorite-card__status {
	display: inline-block;
	margin-top: var(--space-2);
	font-size: var(--text-xs);
	color: var(--color-warning);
}

.favorite-card__status--out-of-stock {
	color: var(--color-error);
}