Product Header Image Css Coding Issues SOS!

Hello there,

I have been struggling for weeks trying to figure this out. First, kindve off topic but I had to make a new account just to be able to post on here. For some reason I was unable to log in with the same log in I use for my wp admin on a2hosting.
But anyways my true concerns with my post is this. In this theme it will make the product header image the same image that is being used for the product. I have been attempting to
a.) entirely remove the product header image with css codes into simple css plug in and also in theme editor. Below are the codes I have used so far.

.woocommerce-page .custom-header-media img {
display: none;
}
.single-product header#header {
background: none !important;
}
header#masthead {
display: none;
}
.woocommerce-page .site-branding {
display: none;
}

b.) try to figure out how to be able to add a custom image for EACH product page and keep the product image only for the product image and not the header (I have 4) I have used the inspector tool in chrome to identify the html codes that have the image url but the inspector tool doesn’t save changes. I’m totally lost. I tried an html plug in but it wasnt applying the image as the header it would apply the image to where ever I entered the short code.

I have no web developing experience or knowledge. I’m watching tutorials and learning this all on my own. Everything on my end is up to date. I’m truly stuck and would appreciate any help. I know how to access php and css I’m just truly stuck on how to accomplish either of the two goals. Remove header all together on product pages only(not the shop home page). Or be able to add a custom header image for each product page. Thank you so much! This will be a huge lifesaver for me.

The page I need help with: [log in to see the link]