/**
 * PRIDO Favorites — estilos de la wishlist custom.
 * Depende de prido-design-tokens (--prido-secondary, --hs-page, --hs-ink, --prido-font-heading).
 */

/* ============================================ Header: ícono + badge de Favoritos */

/* El corazón del header estaba oculto (display:none) porque el wishlist de WoodMart
   quedó muerto. Ya con el sistema propio funcionando, lo mostramos para navegar a
   /lista-deseos/ y ver el contador (igual que el botón Comparar de al lado). */
.prido-hs-tools__wishlist {
	position: relative;
	display: inline-flex !important;
}

.prido-hs-tools__badge.prido-hs-wishlist-count:not(.is-visible) {
	display: none !important;
}

/* ============================================================ Botón base */

.prido-fav-btn {
	--pfav-accent: var(--prido-secondary, #2dc6c1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	line-height: 0;
	-webkit-appearance: none;
	appearance: none;
}

.prido-fav-btn__icon {
	display: inline-flex;
	line-height: 0;
}

.prido-fav-btn svg {
	display: block;
	transition: transform .18s ease, fill .18s ease, stroke .18s ease;
}

.prido-fav-btn:hover svg {
	transform: scale(1.08);
}

.prido-fav-btn.is-favorited svg {
	fill: var(--pfav-accent);
	stroke: var(--pfav-accent);
}

.prido-fav-btn.is-loading {
	opacity: .55;
	pointer-events: none;
}

.prido-fav-btn.is-loading svg {
	animation: prido-fav-pulse .7s ease-in-out infinite;
}

.prido-fav-btn.prido-fav-confirm svg {
	animation: prido-fav-pop .5s ease;
}

@keyframes prido-fav-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}

@keyframes prido-fav-pulse {
	0%, 100% { opacity: .5; }
	50%      { opacity: 1; }
}

/* ============================================== Corazón overlay en la card */

.prido-product-card__media {
	position: relative;
}

/* El corazón de las cards del catálogo/favoritos es el botón de la barra de acciones de
   la grilla (.prido-grilla-btn-wish) — mismo glass-ui/hover/tooltip/estado activo que
   Comparar. Lo cablea prido-favorites.js; su estilo lo da prido-grilla.css. Por eso NO
   hay estilos propios de corazón de card aquí. */

/* ============================================================ Single product */

/* El corazón del single se inyecta por JS DENTRO de .prido-pi-meta-row (la fila de
   reseñas/SKU/stock, debajo del título): es una píldora inline alineada a la derecha.
   Antes era position:absolute top:0, que quedaba detrás del header fijo y no se podía clickear. */
.prido-fav-single-btn {
	position: static;
	margin-left: auto;
	gap: .4rem;
	padding: .35rem .7rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--prido-secondary, #2dc6c1) 12%, transparent);
	color: var(--prido-theme-ink, var(--hs-ink, #1a2a3a));
	border: 1px solid color-mix(in srgb, var(--prido-secondary, #2dc6c1) 22%, transparent);
	font-family: var(--prido-font-heading, inherit);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.prido-fav-single-btn .prido-fav-btn__icon svg {
	width: 16px;
	height: 16px;
}

.prido-fav-single-btn .prido-fav-btn__label {
	line-height: 1;
}

.prido-fav-single-btn:hover {
	background: color-mix(in srgb, var(--prido-secondary, #2dc6c1) 20%, transparent);
}

.prido-fav-single-btn.is-favorited {
	background: var(--pfav-accent);
	color: #0c1219;
}

.prido-fav-single-btn.is-favorited svg {
	fill: #0c1219;
	stroke: #0c1219;
}

/* (El corazón de la grilla .prido-grilla-btn-wish queda VISIBLE: ahora está cableado a
   nuestro backend por prido-favorites.js — es el corazón de favoritos homogéneo con Comparar.) */

/* ============================ Botón huérfano de relacionados (barra flotante) */

.prido-wishlist-wrapper.is-favorited .prido-bs-action-btn svg,
.prido-wishlist-wrapper .prido-bs-action-btn.is-favorited svg {
	fill: var(--prido-secondary, #2dc6c1);
	stroke: var(--prido-secondary, #2dc6c1);
}

.prido-wishlist-wrapper .prido-bs-action-btn.is-loading {
	opacity: .55;
	pointer-events: none;
}

/* ============================================================ Página favoritos */

.prido-favorites-app {
	width: 100%;
}

.prido-favorites-empty {
	max-width: 540px;
	margin: 2.5rem auto;
	padding: 2.5rem 1.5rem;
	text-align: center;
}

.prido-favorites-empty__eyebrow {
	display: inline-block;
	margin-bottom: .75rem;
	font-family: var(--prido-font-heading, inherit);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--prido-secondary, #2dc6c1);
}

.prido-favorites-empty h2 {
	margin: 0 0 .5rem;
	font-family: var(--prido-font-heading, inherit);
}

.prido-favorites-empty p {
	margin: 0 0 1.5rem;
	color: var(--prido-theme-muted, var(--hs-muted, #66788d));
}

.prido-favorites-shop-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.4rem;
	border-radius: 999px;
	background: var(--prido-secondary, #2dc6c1);
	color: #0c1219;
	font-family: var(--prido-font-heading, inherit);
	font-weight: 700;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}

.prido-favorites-shop-link:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(45, 198, 193, .3);
}

.prido-favorites-grid[hidden] {
	display: none;
}