/* =========================================================
   Spinner de carga para la imagen principal de las tarjetas
   ========================================================= */

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 #111;
    border-bottom-color: #dcdcdc;
    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;
    }
}