Customising the Category View

Hi Guys

I’d like to view both the Products and Subcategories when viewing a Category in the Shop. I have set this sample Category to BOTH. However the Products just seem to flow (flex) along with the Subcategories, I’d like to vertically seperate them.

I’ve been doing some custom css on the Subcategory items on this page. You can see the example in the private link.

I need the categories and the products to be separated, at the moment the products are simply sitting up with the subcategories and it looks odd. There needs to be some vertical separation.

The problem I’m finding is that it appears the DOM is simply appending the the products to the list of categories.

How can I separate them? What file would I need to edit so that I can make changes to the DOM output.

I’ve attached two images, before and after (what i want it to look like)