Centre product variant field on shop front page only

I have some code to reduce the size and centre the Add To Cart button and product variant field on the shop front page.  Works exactly as I'd like: https://www.adamblyth.com.au/prints

However when I click into a product to view further details, the product variant field is also centred - I want this to stay left aligned for all products.

https://www.adamblyth.com.au/prints/p/style-01-ej5na-5k3ns-n9fkm

It sounds like you're close to getting the layout just right! To keep the variant field centered only on the shop front page, you might need to adjust your custom code to apply specifically to that page. On Squarespace, you can typically do this by targeting only the front page elements. For product pages, ensure your code isn’t applied globally.

Code isn't applied globally, I've added the following code via Page Header Code Injection for 

https://www.adamblyth.com.au/prints

// Reduce size of variant dropdown & centre //
<style>
.product-variants {
  	width: 40% !important;
	margin: 0 auto;
  	text-align: center !important;
}
</style>

But that code is also impacting:

https://www.adamblyth.com.au/prints/p/style-01-ej5na-5k3ns-n9fkm

which is causing the variant field to also centre on that page.