Page specific CSS only works on refresh - 7.0

To apply certain page specific changes I use Page Header Code Injection on the index page, which then also get applied to the 'underlying' pages that are part of the index collection. Amongst others, the CSS changes the color and size of certain buttons and hides the quantity input for a product block. This works fine while still working in the editor, however, when I load the page separately, the CSS does not get applied until I reload the page.

I have tried adding the CSS to the underlying pages, but this doesn't seem to make any difference. I would really appreciate some insight into why this is happening and how I can make it so that the CSS gets applied immediately on first load.

Thanks!

The website is running on 7.0

One of the pages I'm working on:

https://www.maartenrots.nl/march-rock-29-la-aldea-azul

Code I'm using:

<style>
.product-quantity-input {
  display:none;
  visibility: hidden;
 }
  
 .product-block .sqs-add-to-cart-button-wrapper {
  margin: 0px 0;
  display: block;
}
  
.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
  color: #454545 !important;
  background-color: rgba(0,0,0,0);
 }
  
.sqs-block-button .sqs-block-button-element--large {
  padding: 1em 2.5em;
  font-size: 12px;
  color: #fff;
  background-color: #0299d8 !important;
}
  
  body:not(.button-style-default) .sqs-editable-button, body:not(.button-style-default) .sqs-editable-button-color, body:not(.button-style-default) .tock-block div#Tock_widget_container > div.TockWidgetWrapper .TockButton-blue {
  color: #fff;
  background-color: #0299d8 !important;
  border-color: #ebebeb;
  } 
  
</style>

1 hour ago, tuanphan said:

Design > Site Styles > Disable Ajax Loading

perfect, thanks!