Customize the "Out of stock" Product Status Tag beyond just words

Site URL: https://www.stevansaz.com/maitland-smith

I am looking to customize the "Out of Stock" label that shows in my product summary block.

Currently it is just black with the words "Not Available" at the top right of the item photo. We would like to change the color, location, font. However, with coding, I'm not sure where to start as I don't know what the specific code for this tag is. I found one that will edit its font and color but unfortunately it also changed anything that is on sale.

I have gained some knowledge in CSS that with the right code block names I could probably figure it out, so any help would be appreciated!

We have found that people (our clientele is less tech savy than most) don't see this and we've gotten calls lately of people interested in the product.

We are a consignment store, so we only ever have one of each product (sometimes we have two but they each have a different stock number). If these products are from one of our top brands we have a dedicated page for these brands. This is mainly for SEO purposes and it is amazing how many people find us on google through these brands. For this reason, if we sell a brand item, we prefer to keep that listed on the brand page to show people the type of items we carry regularly but maybe don't have in stock right now. Hence the "Not Available". 

Thanks in advance!!

Add to Page Settings > Advanced > Header

<style>
  .product-mark.sold-out {
    background: red !important;
    font-size: 10px !important;
    font-family: monospace;
}
</style>