How do I keep my header from inverting on my product pages

I have this code put on in my custom css, which makes my header nav and title turn from white to black on hover.

#header:hover a,

#header:hover img,

#header:hover svg {

filter: invert(1);

}

But on my product page where the font is already black, it causes it to turn white on a white background. How do I keep my header from inverting on product pages?

super cool thank you!!