Problem "Sold out" banner on product image

[FedericaFD]

Ciao!

Avrei un problema con un banner che sto cercando di inserire nel mio sito per quanto riguarda il "sold-out". Dovrei creare un banner come questo con scritta "esaurito"

Sono riuscita a creare questo codice .css

.grid-product__tag.grid-product__tag--sold-out{
position: absolute;
top: 35%;
left: 0;
background: #000000a8;
width: 100%;
color: #fff !important;
text-transform: uppercase;
text-align: center;
font-size: 16px;
letter-spacing: 2px;
z-index: 99;
padding: 8px 0;
}

e questo codice html:

Il problema sarebbe questo, il banner con scritta "esaurito" non rimane sopra la foto, ma qualsiasi finestra io apra viene "sovrascritta" da quel banner. Qualcuno può spiegare il motivo e aiutarmi con il codice?

Grazie

[PurplePartner]

Salve @FedericaFD,

Grazie per essere parte della Community di Shopify. Parlo anche italiano e vorrei aiutarti a correggere questo codice. Devo prima controllare il tuo online store e vedere che tema stai usando. Potrebbe andare bene?

[FedericaFD]

Ciao,

utilizzo il tema "Impulse" https://effediboutique.com/