/* Secondary Product Image — Frontend */
.mbp-spi-enabled {
    position: relative;
}

.mbp-spi-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.mbp-spi-secondary-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.23, 1, 0.32, 1),
                visibility 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Lazy-load: evitar que el estado "lazyloaded" sobreescriba la opacidad */
.mbp-spi-secondary-img.lazyloaded {
    opacity: 0;
}

.mbp-spi-container.mbp-spi-visible .mbp-spi-secondary-img,
.mbp-spi-container.mbp-spi-visible .mbp-spi-secondary-img.lazyloaded {
    opacity: 1;
}

/* Compatibilidad con temas que usan overflow:hidden en la imagen principal */
.mbp-spi-enabled a img {
    position: relative;
    z-index: 0;
}