How do I replace the "Sale" text for the product labels in collections page?

Site URL: https://bit.ly/2WGvguN

I'm trying to replace the "SALE" text with "SAVE".
The outer yellow box is fine as-is, I just want to replace the copy/text.

So far I've tried the below codes each on their own in my custom css with no luck:

<div class="product-mark sale">SAVE</div>

or

<div class="ProductList-statusWrapper sqs-product-mark-wrapper">
            <div class="product-mark sale">SAVE</div>
          </div>

or

/*Replaces SALE text*/
<figure class="ProductList-outerImageWrapper" id="yui_3_17_2_1_1630441403606_985">
          <div class="ProductList-statusWrapper sqs-product-mark-wrapper">
            <div class="product-mark sale">SAVE</div>
          </div>

        </figure>

None seem to work.

Any idea what I'm missing here?

Best,
Kaila

Add to Design > Custom CSS

.product-mark.sale {
    visibility: hidden;
}

.product-mark.sale:before {
    visibility: visible;
    content: "SAVE";
    background: #cda447;
    padding: 5px;
    font-family: Montserrat;
    font-weight: 700;
    font-style: normal;
}

Ah, that makes sense! I was using the wrong code type.

Thank you @tuanphan!!

This was the final code I used:

/*Replaces SALE text*/
.product-mark.sale {
    visibility: hidden;
}

.product-mark.sale:before {
    visibility: visible;
    content: "SAVE";
	display: flex;
	align-items: center;
    justify-content: center;  
    background: #cda447;
	border-radius: 100%;
    font-family: Montserrat;
    font-weight: 600;
    font-style: normal;
    width: 3em;
    height: 3em;
    min-width: 3em;
    min-height: 3em;
    padding: 1em;
}