Change Header Color on Product Page

Can anyone help me 

I would like the site header to be black on the product item page (picture of the wheels) and the page background to be white,

but I cant seem to figure it out 😞. I can either make both of them white or both black -_-  

its on Squarespace 7.1  

The rest of the site I have managed to make the header black.

Can you share link to product page?

Thanks 🙂

https://besquared-probike.squarespace.com/hjulsett/s35/275-carbon-logo

password: besquared

Add to Home > Design > Custom CSS

.collection-type-products.view-item header#header {
    background: black;
}
.collection-type-products.view-item header#header * {
    color: white;
    stroke: white;
}

Thanks,

It works when the header is at the top but when you scroll down it changes back to white 

https://besquared-probike.squarespace.com/hjulsett/s35/275-carbon-logo

edit first code to

.collection-type-products.view-item header#header, .header-announcement-bar-wrapper.white-bold.shrink {
    background: #000 !important;
}

Amazing!! It worked perfect

🙌 Seriously thank you so much  🙌

Do you have like a donate page on your website?

Just used this on my site.  Worked like a dream.  Thanks @tuanphan!!  You are truly awesome!

body[class*="collection-type-product"].view-item header#header {
   background: #271E77!important;
}

This also worked for me based on @tuanphan code for blogs with similar issue