Changing button appearance for Firefox

Site URL: https://mouse-trout-epjy.squarespace.com/

I have a custom button which is displaying fine in Safari & Chrome, but incorrectly on Firefox. 

I am trying to use @supports (-moz-appearance) but getting nowhere. 

First screenshot shows how it should be, with the arrow nicely padded:

Second screenshot shows what Firefox displays, arrow sitting behind text & not padded:

And here's my code: 

.sqs-block-button-element--small.sqs-block-button-element {
  font-family: 'Effra';
  font-weight: bold; 
  font-size: 44px;
  white-space: nowrap;
  background-color: transparent !important;
  background-image: url("//static1.squarespace.com/static/5f3690f6995b741710ab4824/t/5f58e97c7a515e6376f127c3/1599662460713/arrow.png"); 
  background-repeat: no-repeat;
  background-position: 90% 50%;
  background-size: 30%;
  padding-right: 5%;
  transition: all 0.3s ease 0s;
}


  //fix button display issues on firefox//

@supports (-moz-appearance) {
  .sqs-block-button-element--small.sqs-block-button-element {
  font-family: 'Effra';
  font-weight: bold; 
  font-size: 44px;
  white-space: nowrap;
  background-color: transparent !important;
  background-image: url("//static1.squarespace.com/static/5f3690f6995b741710ab4824/t/5f58e97c7a515e6376f127c3/1599662460713/arrow.png"); 
  background-repeat:no-repeat;

//this is the bit to be changed for FF//
  background-position: 10% 10%;
  background-size: 10%;
  transition: all 0.3s ease 0s;
}
}

Does Squarespace not allow moz supports queries or am I just not targeting the element correctly? 

Hi. What is access password?

spong123