/* =========================================================
   Spinner de carga para la imagen principal de las tarjetas
   (product-card-shop / product-card-category)

   - La imagen está OCULTA y con spinner hasta que js/image-loading-spinner.js
     confirma que está descargada y decodificada (añade .rvx-img-ready).
   - Todo va bajo html.rvx-img-js, clase que se pone con un script inline en el
     <head> (ver inc/rvx-image-loader.php). Sin JS, las imágenes se ven normal.
   - El spinner dura lo que tarde cada imagen (sin límite por página). Cada
     tarjeta tiene su propio seguro de tiempo en el JS, que empieza a contar
     cuando la tarjeta se acerca a la pantalla, no al cargar la página.
   - Seguro de último recurso (solo si el archivo JS nunca llega a ejecutarse):
     a los 30 s se muestran las imágenes. Si el JS funciona, este seguro se
     desactiva solo (html.rvx-img-ok).
   ========================================================= */

html.rvx-img-js .custom-product-card .product-image:not(.rvx-img-ready)::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid #dcdcdc;
    border-top-color: #111;
    border-radius: 50%;
    z-index: 4;
    pointer-events: none;     /* no bloquea el clic en el producto */
    animation: rvx-img-spin .7s linear infinite;
}

html.rvx-img-js .custom-product-card .product-image:not(.rvx-img-ready) .img-main {
    opacity: 0;
}

/* Último recurso: solo si el JS no se ejecutó */
html.rvx-img-js:not(.rvx-img-ok) .custom-product-card .product-image:not(.rvx-img-ready)::before {
    animation:
        rvx-img-spin .7s linear infinite,
        rvx-img-spinner-off 0s linear 30s forwards;
}
html.rvx-img-js:not(.rvx-img-ok) .custom-product-card .product-image:not(.rvx-img-ready) .img-main {
    animation: rvx-img-failsafe 0s linear 30s forwards;
}

@keyframes rvx-img-spin {
    to { transform: rotate(360deg); }
}
@keyframes rvx-img-spinner-off {
    to { opacity: 0; visibility: hidden; }
}
@keyframes rvx-img-failsafe {
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    html.rvx-img-js .custom-product-card .product-image:not(.rvx-img-ready)::before {
        animation-duration: 1.6s;
    }
}