header on product pages are overlapping the main page

[emekayode]

URL: https://efpqlt6kjr4cbg3d-17240367.shopifypreview.com

Password: testcode123

I have made my headers fixed when you are not on the homepage but the headers seem to be overlapping the product page, how do I make it not do that?

@media only screen and (min-width: 1025px) {
#main-navigation {
    background-color: transparent;
}
}
header-main, header {
    background-color: transparent !important;
}

header {
    position: absolute !important;
    width: 100%;
    border: none !important;
    top: 0 !important;
    z-index: 50 !important;
}
{%else %}
header {
    position: fixed !important;
    width: 100%;
    border: none !important;
    top: 50 !important;
    z-index: 50 !important;
}
{% endif %}

[emekayode]

I tried changing it to static instead of fixed and this still did not fix the issue