/* --- Imagem do produto no Loop/Grid (sem Swiper/Lightbox) --- */

/*
 * O Elementor embrulha o widget de Shortcode em várias divs sem largura própria
 * (.elementor-widget-shortcode > .elementor-widget-container > .elementor-shortcode).
 * Como todas as fotos abaixo são position:absolute (fora do fluxo normal), elas não
 * emprestam tamanho pra essas divs, e a cadeia inteira colapsa pra 0x0 dentro de
 * containers flex do Loop Grid/Carousel. Forçamos a largura só onde o nosso
 * shortcode está presente, sem afetar outros widgets de Shortcode do site.
 */
.elementor-widget-shortcode:has(.csl-prod-loop-image),
.elementor-widget-shortcode:has(.csl-prod-loop-image) .elementor-widget-container,
.elementor-widget-shortcode:has(.csl-prod-loop-image) .elementor-shortcode {
    width: 100%;
}

.csl-prod-loop-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--csl-prod-main-radius, 16px);
    background: var(--csl-t-bg-muted, #f8fafc);
}

/* Carregando: brilho suave até a primeira foto chegar (classe is-ready, adicionada no onload da imagem) */
.csl-prod-loop-image:not(.is-ready) {
    background: linear-gradient(100deg, var(--csl-t-bg-muted, #f1f5f9) 30%, rgba(255, 255, 255, 0.65) 50%, var(--csl-t-bg-muted, #f1f5f9) 70%);
    background-size: 300% 100%;
    animation: csl-loop-shimmer 1.4s linear infinite;
}

@keyframes csl-loop-shimmer {
    from { background-position: 100% 0; }
    to   { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .csl-prod-loop-image:not(.is-ready) { animation: none; }
}

.csl-prod-loop-image .csl-loop-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.csl-prod-loop-image .csl-loop-img.is-active.is-loaded {
    opacity: 1;
}