.elementor-11507 .elementor-element.elementor-element-fef55af{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-11507 .elementor-element.elementor-element-fef55af:not(.elementor-motion-effects-element-type-background), .elementor-11507 .elementor-element.elementor-element-fef55af > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-11507 .elementor-element.elementor-element-d9cc12d{text-align:center;}.elementor-11507 .elementor-element.elementor-element-d9cc12d .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:24px;font-weight:600;text-transform:uppercase;font-style:normal;text-decoration:none;color:#000000;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-11507 .elementor-element.elementor-element-731af2e .elementor-button{background-color:#E31B4B;box-shadow:0px 0px 6px 0px rgba(0,0,0,0.5);border-radius:12px 12px 12px 12px;}.elementor-11507 .elementor-element.elementor-element-731af2e .elementor-button-content-wrapper{flex-direction:row;}.elementor-11507 .elementor-element.elementor-element-731af2e .elementor-button .elementor-button-content-wrapper{gap:20px;}#elementor-popup-modal-11507{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-11507 .dialog-message{width:640px;height:auto;}#elementor-popup-modal-11507 .dialog-close-button{display:flex;}#elementor-popup-modal-11507 .dialog-widget-content{box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}/* Start custom CSS for html, class: .elementor-element-2cb4a7c */<style>
    /* Contenedor de los botones */
    .color-.elementor-11507 .elementor-element.elementor-element-2cb4a7c-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        margin-top: 20px;
        padding: 10px;
        /* BORDE ROJO TEMPORAL: Para saber si el widget está cargando. 
           Cuando ya funcione, puedes borrar esta línea de abajo */
        border: 1px dashed red; 
        z-index: 9999;
        position: relative;
    }

    /* Las bolitas (botones) */
    .color-dot {
        display: block !important; /* Fuerza a que se muestre */
        width: 30px !important;    /* Tamaño fijo */
        height: 30px !important;   /* Tamaño fijo */
        border-radius: 50%;
        border: 2px solid #ddd;
        cursor: pointer;
        transition: transform 0.2s;
        background-position: center;
        background-size: cover;
    }

    .color-dot:hover {
        transform: scale(1.1);
        border-color: #999;
    }

    .color-dot.active {
        border: 2px solid #000;
        box-shadow: 0 0 0 2px #fff inset;
    }
</style>

<div class="color-.elementor-11507 .elementor-element.elementor-element-2cb4a7c-wrapper">
    
    <div class="color-dot active" 
         data-img="http://emobel.com.mx/wp-content/uploads/2026/01/Closet-2-ejemplo.jpg" 
         style="background-color: #f2f2ee;">
    </div>

    <div class="color-dot" 
         data-img="http://emobel.com.mx/wp-content/uploads/2026/01/Closet-1-ejemplo.jpg" 
         style="background-color: #c9cdd1;">
    </div>

    <div class="color-dot" 
         data-img="URL_IMAGEN_VERDE_AQUI" 
         style="background-color: #2f4638;">
    </div>
    
    <div class="color-dot" 
         data-img="URL_IMAGEN_NEGRA_AQUI" 
         style="background-color: #2b2b2b;">
    </div>

</div>

<script>
jQuery(document).ready(function($) {
    
    function activarSelectorDeColor() {
        // Buscamos los botones
        var buttons = $('.color-dot');
        
        // Buscamos la imagen principal por el ID que configuraste: main-product-image
        var mainImage = $('#main-product-image img');
        
        // Si no encuentra la imagen por ID, intenta buscar cualquier imagen grande en el popup
        if (mainImage.length === 0) {
             console.log("No encontré #main-product-image, buscando alternativa...");
             mainImage = $('.elementor-widget-image img').first();
        }

        buttons.on('click', function(e) {
            e.preventDefault();
            var $btn = $(this);
            var newSrc = $btn.attr('data-img');

            if (newSrc) {
                // Cambia la imagen
                mainImage.attr('src', newSrc);
                mainImage.attr('srcset', newSrc);
                
                // Cambia el estilo activo
                buttons.removeClass('active');
                $btn.addClass('active');
            }
        });
    }

    // Ejecutamos cuando Elementor abre el Popup
    $(document).on('elementor/popup/show', function () {
        setTimeout(activarSelectorDeColor, 300); // Pequeña espera para asegurar carga
    });
    
    // Ejecutamos por si acaso ya está cargado
    activarSelectorDeColor();
});
</script>/* End custom CSS */