更改Wordpress商店父页面上的CSS而不是子页面

Question

I want to change the css on mywebsite.com/shop

but I don't want the css on mywebsite.com/shop/t-shirt to be effected.

Note that both the shop page and the shops products pages use the same css for the "ul" that are being called.

I have tried this method in css using the page ID 6602 (Shop Page):

.page-id-6602 ul.products li.product, .storefront-full-width-content.single-product .related ul.products li.product, .storefront-full-width-content.single-product .upsells ul.products li.product, .storefront-full-width-content .site-main .columns-4 ul.products li.product {
height: 295px;
min-height: 295px !important;
max-height: 295px !important;
margin-bottom: 1% !important;
width: 24%;
margin-right: 0.5% !important;
margin-left: 0.5% !important;
min-height: 550px;
height: 550px;
padding: 15px;
border-radius: 20px;
background: #f9f9f9;

but this changes the product pages also. So then I tried this method in php:

function correct_shop_category_size() {
if (is_page( 6602 ) ) {
    ?> <style>
    ul.products li.product, .storefront-full-width-content.single-product .related ul.products li.product, .storefront-full-width-content.single-product .upsells ul.products li.product, .storefront-full-width-content .site-main .columns-4 ul.products li.product { height:295px;min-height:295px!important;max-height:295px!important;margin-bottom:1%!important;width:24%;margin-right:0.5%!important;margin-left:0.5%!important;min-height:550px;height:550px;padding:15px;border-radius:20px;background:#f9f9f9; }
    </style> <?php
}
}

Which does the exact same. They both effect the product pages as well as the Shop page. Any one have any ideas on how I can change the css of only the parent shop page and not the child product pages too?

Thanks.