Hello,
Thank you very much for the great question, I’m sorry to hear that you’ve lost so much time working on this issue.
The Product Page template is set to use whichever background you’ve selected in Customize -> Background, in your case the image background.
Here’s a custom CSS rule that you can paste into your Customize -> Advanced -> Custom JS & CSS menu:
.product-template-default #content > main { background-color: rgba(0,0,0,.7); }
This will add a black background at 70% opacity, which will make the products page look like this: