I am trying to develop a package product page. Person can add a different variable product. It all seems good, just the image gallery is behaving strange. When selecting the variation options the gallery gets duplicated. Seems like a JS conflict of duplicate coding?? I cannot figure out how I can overcome this. See this loom: https://www.loom.com/share/5dbd5378566e4b4090a3cfe19adc72ff

add_shortcode('rlt_product', function($atts) {
        ob_start();
        $atts = shortcode_atts(array(
                'product_id' => 0,
            ), $atts);
            if ($atts['product_id'] === 0) {
            return;
            }
        $q = new WP_Query(array(
            'post_type' => 'product',
            'p'         => $atts['product_id'],
        ));
        ?>
        <?php while ( $q->have_posts() ) : ?>
            <?php $q->the_post();
            ?>
            <div class="product-template-default single single-product woocommerce-page woocommerce woocommerce-page woocommerce-js">
            <style>.woocommerce-product-gallery{opacity: 1!important;display:block!important;}</style>            
            <?php
            global $product;
            do_action( 'woocommerce_before_single_product' );

            if ( post_password_required() ) {
                echo get_the_password_form(); // WPCS: XSS ok.
                return;
            }
            ?>
            <div id="product-<?php the_ID(); ?>" <?php wc_product_class( '', $product ); ?>>
                <?php do_action( 'woocommerce_before_single_product_summary' ); ?>
                <div class="summary entry-summary">
                    <?php do_action( 'woocommerce_single_product_summary' ); ?>
                </div>
                
            </div>  
</div>
            <?php do_action( 'woocommerce_after_single_product' ); ?>

        <?php endwhile; // end of the loop. ?>

        
        <div style="margin-top: 30rem;"></div>
        <?php
        wp_reset_postdata();
        $html = ob_get_clean();
        return $html;
    });