/**
 * Favoritos — coração do card de produto (Figma Card/Produto 217:2222 › imagem › topo › favorito).
 *
 * Medidas do Dev Mode:
 *   favorito  área de toque 44×44, a 4 px do canto superior direito da foto
 *   círculo   36×36 · surface · pílula
 *   ícone     coração 16 (contorno) ink · marcado: coração cheio na cor da marca
 *   desktop   aparece com o mouse sobre o card (ou quando já está marcado); no toque, sempre visível
 *
 * Só tokens: as cores mudam pelo painel Sua Loja.
 */

.cdw-favorito {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: 16px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.cdw-favorito__circulo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--surface);
	transition:
		transform var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao),
		background-color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-favorito:hover .cdw-favorito__circulo {
	background: var(--wp--preset--color--surface-hover);
}

.cdw-favorito:active .cdw-favorito__circulo {
	transform: scale(0.92);
}

.cdw-favorito:focus-visible {
	outline: 0;
}

.cdw-favorito:focus-visible .cdw-favorito__circulo {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 2px;
}

.cdw-favorito__cheio,
.cdw-favorito[aria-pressed="true"] .cdw-favorito__vazio {
	display: none;
}

.cdw-favorito[aria-pressed="true"] .cdw-favorito__cheio {
	display: block;
	color: var(--wp--preset--color--brand);
}

.cdw-favorito.is-pulsando .cdw-favorito__circulo {
	animation: cdw-favorito-pulso var(--wp--custom--motion--duracao-lenta) var(--wp--custom--motion--ease-elastica);
}

@keyframes cdw-favorito-pulso {
	0% {
		transform: scale(1);
	}

	40% {
		transform: scale(1.18);
	}

	100% {
		transform: scale(1);
	}
}

/* No card: canto superior direito da foto. */
.cdw-produto__favorito {
	position: absolute;
	top: var(--wp--preset--spacing--space-4);
	right: var(--wp--preset--spacing--space-4);
	z-index: 1;
}

/* Com mouse (desktop), o coração só aparece ao passar no card, ao focar ou se já estiver marcado. */
@media (hover: hover) and (min-width: 782px) {
	.cdw-produto__favorito {
		opacity: 0;
		transition: opacity var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
	}

	.cdw-produto:hover .cdw-produto__favorito,
	.cdw-produto:focus-within .cdw-produto__favorito,
	.cdw-produto__favorito[aria-pressed="true"] {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cdw-favorito,
	.cdw-favorito__circulo {
		transition-duration: 0s !important;
		animation: none !important;
	}
}