Hide header (widgets) on WC shop page for bigger screens

Hey again, I'm back, so sorry.

I need filters on top of my shop page for mobile devices, for this purpose I have filter widgets in the left sidebar (for desktop/tablet view) and some in the header widget area (only for mobile). I hide them accordingly with a plugin.

The use of the header leaves additional space above my products on the shop page when viewing on desktop/tablet.

My thought: remove the header for devices with a screen above the size of a mobile phone.

The code I thought might work was:

@media (min-width: 768px) {
.generate-page-header {
display: none;
}
}

I'm not using any headers or header widgets on different pages, so I'm fine with removing the header for tablet/desktop on all pages, but it would be even better if I can hide it only on WooCommerce related pages (I might use it in the future).

So the real question:
What is the best way to show the filters above the products on my shop page? If placing it in the header is the right and only answer.
How can I hide the header on the shop page and other WC related pages (such as product category) on devices bigger than a mobile phone?