Update: Fixed it. For some reason my mobile browser didn't like the hex value with included alpha. Once I set that to a simple #FFFFFF it worked. So I googled and added the individual parameter for opacity which worked as well. I also decided to enable it on the desktop site for consistency.
Thanks again!
The code I landed on with regards to the arrows is:
/* product image arrows */
@media screen{
.ProductItem-gallery .enable-on-first-image-load.enabled>button {
background-color: #FFFFFF; opacity:0.5;
}
}
