Woo commerce single product page customization not working properly

Question

I want to customize the single product page in woocommerce for a particular category. I created a folder called woocommerce in the child theme and added single-product.php and changed the following line

    <?php //wc_get_template_part( 'content', 'single-product' ); ?>

in to

    <?php $terms      = wp_get_post_terms( $post->ID, 'product_cat' );
            $categories = wp_list_pluck( $terms, 'slug' );
        
            if ( in_array( 'calculators', $categories ) ) {
                wc_get_template_part( 'content', 'single-product-calculators' );
            } else {
                wc_get_template_part( 'content', 'single-product' );
            }
        ?>

this

I created a page in my child theme woocommerce folder called "content-single-product-calculators.php" and copied the exact content in the original "content-single-product.php". But when I view single prduct page of category "calculators" items some CSS seems to be off even I have the same exact content in both product content pages. What is the reason for that?

I tried to make calculators category items to load from a different product content file. It worked but CSS seems to be off when calculator category items are being loaded in the browser. specially the owl-carousel applied to gallery images is no longer working in the calculator category item pages.