Removing the zoom icon in WooCommerce single product page

Hi,
I have gone to other threads referring to the same problem and everyone else who used the code from those threads have had success removing the zoom icon. I, however, still cannot remove the icon using the code that has already been posted. I have also gone to Youtube to see if there was another way to do it but it seems most of the working code is the same CSS code from those earlier posts. I looked into functions since some people used that method and also had success with disabling the zoom feature.

I have no idea why I can’t remove the zoom icon after having disabled all pointer events. Please see image link.
Magnifying Glass Image from my product testing

Since all functionality is now disabled, I don’t know if the magnifying glass is autogenerated and is part of the image or if that’s also CSS that can be removed since I found a snippet of code from another thread this.$target.prepend( ‘🔍‘ ); in
woocommerce/assets/js/frontend/single-product.js. I deleted the emoji from the file and replaced it with a test img to see if there would be a difference but still nothing.

This is all my code I am using for the single products page:

/* shut off all pointer events */
.single-product-main-image {
pointer-events: none;
}

/* CSS not working for me but works for everyone else */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
display: none !important;
}

/* resizes image on single product pages using CSS instead of editing image display size in Woocommerce */
.single-product-main-image {
width: 44%;
}

I have flushed the cache and cleared out the history multiple times as well.

Please advise. Thanks.