Cannot change custom badge CSS

Hello! 

I followed this  tutorial to get a custom status badge but i can't seem to be able to change the css. I put the code provided in the tutorial but it doesn't do anything.

https://fife-corn-tfef.squarespace.com/shop

password: square00

Thank you in advance! 🙂

Where you've added your pre-order badges, you should be able to use:

.product-mark.sf-pre-order {

}

For example:

.product-mark.sf-pre-order {
    position: absolute;
    top: 0;
    background: #f7634f;
    font-weight: bold;
    padding: 5px;
    font-size: 11px;
    line-height: .8;
    margin-top: 0.5rem;
    color: #fff;
}

Oh thank you so much that worked perfectly ! I was also wondering why Coming soon, low in stock and Pre-order are all in different text size and font ?