/* =====================================================
   Botón favorito — corazón arriba derecha
   Usa sources/icons/favorite/outline.svg (inactivo) y filled.svg (activo)
   ===================================================== */
.product {
    position: relative;
    cursor: pointer;
}

.fav-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.96);
    color: #bababa;
    border: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, opacity 0.2s ease, visibility 0.2s ease;
    z-index: 2;
    flex-shrink: 0;
    /* Por defecto oculto cuando está inactivo (req. 4) */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.92);
    pointer-events: none;
}

.fav-btn:hover {
    transform: scale(1.07);
}

.fav-btn:active {
    transform: scale(0.96);
}

.fav-btn svg {
    width: 1.6rem;
    height: 1.6rem;
    display: block;
    fill: currentColor;
    stroke: none;
    transition: fill 0.2s ease, transform 0.15s ease;
}

.fav-btn.is-fav {
    color: #f02004;
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
}

/* Mostrar botón inactivo solo al hacer hover sobre el producto */
/* Fix: solo hover muestra el botón inactivo; focus-within causaba que quedara frizado tras desmarcar (el botón retenía foco) */
.product:hover .fav-btn:not(.is-fav) {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
    color: #8a8a8a;
}

.product:hover .fav-btn:not(.is-fav):hover {
    color: #f02004;
    transform: scale(1.07);
}

.fav-btn:focus-visible {
    outline: 2px solid #f02004;
    outline-offset: 2px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* En dispositivos táctiles o sin hover, asegurar accesibilidad:
   si el usuario navega con teclado, el botón será visible via focus-within */
@media (hover: none) {
    .fav-btn:not(.is-fav) {
        opacity: 0;
        visibility: hidden;
    }
    .product:active .fav-btn:not(.is-fav) {
        opacity: 1;
        visibility: visible;
    }
}

/* =====================================================
   Burbuja de favoritos en el menú
   ===================================================== */
#menu menu a.has-badge,
#menu nav a.has-badge {
    position: relative;
}

.fav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.32rem;
    margin-left: 0.4rem;
    font-size: 0.70rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: #f02004;
    border-radius: 999px;
    vertical-align: middle;
    transform: translateY(-1px);
    animation: favBadgeIn 0.25s ease;
}

@keyframes favBadgeIn {
    from { transform: translateY(-1px) scale(0.6); opacity: 0; }
    to   { transform: translateY(-1px) scale(1); opacity: 1; }
}

/* Variante absoluta tipo notificación (si se prefiere burbuja flotante) */
#menu menu li {
    position: relative;
}

/* =====================================================
   Animación al marcar como favorito — flash blanco + corazón palpitante (1s)
   Solo se activa al AÑADIR a favoritos (.image.fav-animating)
   Efecto solo sobre la imagen, centrado en la imagen
   ===================================================== */
.product .image.fav-animating::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 1rem;
    z-index: 4;
    pointer-events: none;
    animation: favFlash 1s ease forwards;
}

.product .image .fav-heart-burst {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}

.product .image .fav-heart-burst svg {
    width: 6rem;
    height: 6rem;
    animation: favHeartPulse 1s ease forwards;
    will-change: transform, opacity;
    filter: none;
}

.product .image .fav-heart-burst svg path {
    fill: hsla(5, 90%, 92%, 0.75);
    stroke: #f02004;
    stroke-width: 1rem;
    stroke-linejoin: round;
    paint-order: fill;
    filter: none;
}

@keyframes favFlash {
    0%   { opacity: 0; }
    22%  { opacity: 0.7; }
    85%  { opacity: 0.5; }
    100% { opacity: 0; }
}

@keyframes favHeartPulse {
    0%  { transform: scale(0.18); opacity: 0; }
    22% { transform: scale(1.18); opacity: 1; }
    34% { transform: scale(0.92); opacity: 1; }
    48% { transform: scale(1.06); opacity: 1; }
    68% { transform: scale(1);    opacity: 1; }
    85% { transform: scale(1);    opacity: 1; }
    100%{ transform: scale(1);    opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .product .image.fav-animating::after,
    .product .image .fav-heart-burst svg {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}