/*
|--------------------------------------------------------------------------
| AMOREA — BOTONES
|--------------------------------------------------------------------------
*/

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-lg);
	font-weight: 600;
	font-size: var(--text-base);
	transition: background var(--transition-fast), color var(--transition-fast),
		box-shadow var(--transition-fast);
}

.btn--primary {
	background: var(--color-primary);
	color: var(--color-surface);
	box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
	background: var(--color-primary-hover);
	color: var(--color-surface);
}

.btn--secondary {
	background: transparent;
	color: var(--color-primary);
	border: 1px solid var(--color-primary);
}

.btn--secondary:hover {
	background: var(--color-accent);
}

.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-primary);
	box-shadow: var(--shadow-sm);
	transition: background var(--transition-fast), color var(--transition-fast),
		transform var(--transition-fast);
	position: relative;
}

.btn-icon:hover {
	background: var(--color-primary);
	color: var(--color-surface);
}

/*
 * El corazón de favoritos (único consumidor de .is-active hoy) ya no
 * invierte el fondo del botón en su estado activo — ver
 * assets/css/wishlist.css (.wishlist-heart). El círculo blanco se
 * mantiene igual en ambos estados; sólo cambia el relleno del ícono.
 */

/*
 * Reportado en vivo: la animación de hover/foco del corazón de
 * favoritos (fondo rosado + ícono blanco, `.btn-icon:hover` de arriba)
 * se veía bien en la ficha individual pero NO estaba estandarizada en
 * el resto del sitio — en Home "Los más amados" el hover no hacía
 * nada, y en "Completa tu regalo"/"¿Olvidaste algo?" (carrito) el
 * corazón se ponía blanco sobre un círculo que también se quedaba
 * blanco (invisible). Causa real, misma en los 3 casos: cada tarjeta
 * de producto fija su PROPIO `background`/`color` para ese contexto
 * (tamaño/borde/sombra distintos: cards.css .featured-products__carousel,
 * archive.css .shop-grid, cart.css .cart-forgot-card__media) con una
 * regla incondicional (sin `:hover`) que EMPATA en especificidad con
 * `.btn-icon:hover` (2 clases contra 2 clases) — como esas hojas cargan
 * después de ésta en la cascada real (buttons.css es de las primeras,
 * ver AMOREA_MAIN_CSS_PARTS en theme-assets.php), ganan el empate
 * incluso durante el hover, sin relación con si el mouse está encima o
 * no. En vez de repetir este parche en cada hoja (y depender de en qué
 * orden cargue la próxima tarjeta que se agregue), esta única regla usa
 * `[data-wishlist-toggle]` (el atributo real del botón, ver
 * wishlist-hooks.php) SUMADO a la clase — 3 selectores de especificidad
 * en vez de 2 — para ganarle a cualquier regla de contexto sin importar
 * en qué hoja ni en qué orden cargue. Mismo `:focus-visible` que el
 * resto del sitio usa para foco por teclado (nunca sólo mouse).
 */
[data-wishlist-toggle].product-card-toolbar__wishlist:hover,
[data-wishlist-toggle].product-card-toolbar__wishlist:focus-visible {
	background: var(--color-primary);
	color: var(--color-surface);
}

.btn-icon--sm {
	width: 32px;
	height: 32px;
}

/*
 * Mi cuenta / Favoritos / Carrito — ícono plano (sin círculo de fondo)
 * con etiqueta de texto debajo, igual que el mockup. Mi cuenta/Favoritos
 * son items de texto/HTML propios inyectados vía theme_mod
 * 'header_placements' (Blocksy free no tiene esos elementos nativos);
 * Carrito SÍ es el elemento nativo de Blocksy (para mantener el conteo
 * dinámico real vía AJAX), sólo restyleado para verse igual.
 */
.header-icon-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-text);
	margin-inline-end: var(--space-6);
}

.header-icon-link__icon {
	position: relative;
	font-size: var(--text-xl);
	line-height: 1;
	display: inline-flex;
}

.header-icon-link__icon img {
	width: 20px;
	height: 20px;
	max-width: none;
}

.header-icon-link__label {
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-text-muted);
}

.header-icon-link__badge {
	position: absolute;
	top: -6px;
	right: -10px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: var(--color-surface);
	font-size: 10px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * Insignia numérica de Favoritos: SÓLO se muestra con un total > 0. El
 * bloque del header (Blocksy Content Block) se renderiza con
 * `data-wishlist-count` sin valor (cadena vacía), así que server-side ya
 * queda OCULTA — no hay destello del "0" antes de que corra el JS.
 * `assets/js/wishlist.js` fija `data-wishlist-count="N"` (N > 0) para
 * mostrarla y la vuelve a vaciar al bajar a 0. El icono y el enlace
 * "Favoritos" nunca se ocultan — sólo la insignia.
 */
.header-icon-link[data-wishlist-count=""] .header-icon-link__badge,
.header-icon-link[data-wishlist-count="0"] .header-icon-link__badge,
.header-icon-link:not([data-wishlist-count]) .header-icon-link__badge,
.header-icon-link__badge[hidden] {
	display: none;
}

/*
 * Carrito nativo de Blocksy, restyleado para verse IGUAL a Mi cuenta/
 * Favoritos: el contenedor exterior (.ct-header-cart) es el que arma la
 * columna ícono+etiqueta con el mismo gap — no .ct-cart-item — porque el
 * "Carrito" (::after) es hermano de .ct-cart-item, no hijo suyo; si el
 * flex-column vive sólo en .ct-cart-item, la etiqueta queda fuera de esa
 * columna y no hereda ni el espaciado ni el centrado.
 */
.ct-header-cart {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
}

.ct-header-cart .ct-cart-item {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text);
	position: relative;
}

.ct-header-cart .ct-label {
	display: none;
}

.ct-header-cart::after {
	content: "Carrito";
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-text-muted);
	text-align: center;
}

/*
 * El SVG nativo del carrito de Blocksy es un ícono RELLENO (fill sólido),
 * mientras que Mi cuenta/Favoritos son de línea fina — se veían
 * distintos aunque midieran igual. Se oculta el SVG de Blocksy y se
 * reemplaza por nuestro propio ícono de bolsa, mismo estilo de trazo.
 */
.ct-header-cart .ct-icon-container svg {
	display: none;
}

.ct-header-cart .ct-icon-container::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/icons/bag.svg") center / contain no-repeat;
}

/*
 * En pantallas medianas no entran los 3 íconos con su etiqueta de texto
 * al lado del buscador (ver bug: se superponían) — se ocultan las
 * etiquetas y queda ícono + badge, patrón común en headers de e-commerce.
 */
@media (max-width: 1300px) {
	.header-icon-link {
		margin-inline-end: var(--space-4);
	}

	.header-icon-link__label,
	.ct-header-cart::after {
		display: none;
	}
}

.ct-header-cart .ct-icon-container {
	display: inline-flex;
	position: relative;
	width: 20px;
	height: 20px;
	color: var(--color-text);
}

.ct-header-cart .ct-dynamic-count-cart {
	position: absolute;
	top: -6px;
	right: -10px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: var(--color-surface);
	font-size: 10px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}