How to change the font color for "Sold Out" text on product page?

Site URL: https://www.lisafishcreative.com/

Hello! I would like to customize the 'Sold Out' mark/badge text color style on the product page of my website, specifically for when a size variant is sold out. Color is the most important factor here, however if possible I would also like to change the font to bold.

I'm hoping there is way to edit the 'sold out' label font color to red (#EC1313) without it affecting the 'Size' and 'Quantity' variant label colors. Seems they share the same color (blocks, I believe) as the variant labels.

At the moment, my online shop has a single product listed. The product itself isn't sold out, just the size variant. The Size variant 'Unisex S' is set to '0' quantity.

I've provided 2 separate screen shots to show the product page to which I'm referring.

I am using the York template 7.0 and I've found the only solution may be to customize with custom CSS. I did see a similar question posted, but I'm not sure it is exactly the same situation.

Eventually, I will have color variants for shirts that I will want to apply the same 'Sold Out' styling. However, it may be that I have to choose one variant over the other, unless it is possible to apply to both. Unless someone straight up tells me it's not possible!

I appreciate any help, thank you!

10 hours ago, lisaf13 said:

I'm hoping there is way to edit the 'sold out' label font color to red (#EC1313) without it affecting the 'Size' and 'Quantity' variant label colors. The Size variant 'Unisex S' is set to '0' quantity.

When I checked the S variant, it wasn't out of stock and so I couldn't see the label.

I am so sorry! I set the S variant back to '0' again. Thank you so much!

Paul, thank you so much! Done.