/* Entrada escalonada del catálogo y respuesta de sus botones.
 * Las imágenes permanecen quietas y la ficha de producto se abre directamente. */

/* ── Entrada escalonada ──────────────────────────────────────────────────── */
/* El retardo lo pone el JS en --i, y va topado: con 300 productos en pantalla
   un escalonado sin límite tardaría medio minuto en terminar. */
.product-card.pin-entra {
    animation: pin-sube .42s cubic-bezier(.22, .61, .36, 1) backwards;
    animation-delay: calc(var(--i, 0) * 28ms);
}

@keyframes pin-sube {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ── Hover de la ficha ───────────────────────────────────────────────────── */
.product-card {
    transition:
        transform .28s cubic-bezier(.22, .61, .36, 1),
        box-shadow .28s cubic-bezier(.22, .61, .36, 1);
}

/* `:hover` solo donde hay ratón de verdad. En una tableta, el hover se queda
   pegado tras el toque y la ficha se queda levantada. */
@media (hover: hover) and (pointer: fine) {
    .product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 34px rgba(0, 0, 0, .11);
    }

}

.card-img-wrapper img {
    transition: opacity .5s ease-in-out;
}

.product-card:active {
    transform: none;
    opacity: 1;
}

/* Los controles se quedan quietos: son objetivos de clic y moverlos con la
   ficha hace fallar el segundo toque. */
.product-card .btn-add-card,
.product-card .qty-pill,
.product-card .fav-btn-card,
.product-card .edit-btn-card { transition: none; }

/* ── Botón de añadir ─────────────────────────────────────────────────────── */
/* Respuesta al pulsar en el botón, no en la ficha entera. */
.btn-add-card {
    transition: transform .12s cubic-bezier(.22, .61, .36, 1), background-color .15s ease;
}
.btn-add-card:active { transform: scale(.95); }

.pin-flight {
    position: fixed; top: 0; left: 0; z-index: 10020;
    width: 44px; height: 44px; padding: 5px; border-radius: 12px;
    border: 1px solid #bfdbfe; background: #fff;
    box-shadow: 0 10px 24px #0f172a24; pointer-events: none; overflow: hidden;
}
.pin-flight img { width: 100%; height: 100%; object-fit: contain; }
.pin-flight-heart { background: #fff1f2; border-color: #fecdd3; border-radius: 50%; }
.pin-flight svg { width: 100%; height: 100%; color: #e60023; }

@media (prefers-reduced-motion: reduce) {
    .product-card.pin-entra { animation: none; }
    .product-card:hover,
    .product-card:active { transform: none; }
    .product-card:hover .card-img-wrapper img { transform: none; }
    .btn-add-card:active { transform: none; }
}