Change "Sold Out" design

I don't like how the "Sold Out"  tag is displayed.  It is shown with small caps and a brown color. I want it like I've written it (the S and the O as capitals, and the rest lowercase), in italic and white color.

I also don't like how it's on the very right of the image, making it too close to the next product's name. I'd like to have it next to the product's name, like this:

Futur solitari    Sold Out

Can I do both changes?

I have managed to change some of these things. Right now, I've changed the typeface, the color, and from regular to italic.

For some reason I still can't change the text to lowercase, eventhough I selected the option. I also can't seem to find how to move the text to the left, and leaving it AFTER the product name.

mirelha.xyz/shop

#1. Add to Design > Custom CSS

.product-mark.sold-out {
    text-transform: uppercase;
}

#2. Move it to after name like this?

#1

I want the "sold out" to be LOWERCASE or SENTENCE CASE. I've tried your code, putting lowercase

On 11/21/2022 at 6:34 AM, tuanphan said:

#1. Add to Design > Custom CSS

.product-mark.sold-out {
    text-transform: uppercase;
}

 

but it doesn't change. And as i have shown in my previous screenshot, i've marked the lowercase option. So basically, although i have the lowercase design option and your code, it somehow still shows up in uppercase.

#2

On 11/21/2022 at 6:34 AM, tuanphan said:

#2. Move it to after name like this?

Yes! That would be ideal!! 

Could it look like that only in desktop version? And in mobile version leave it as it is now in the right corner?

thank you so much!!