Bom dia! Gostaria de saber como dar uma espaço entre as letras na bandeira de desconto no código CSS do meu site, uso este código para modificar a bandeira ( ela original do tema é uma bola, meio feinha 
)
.bandeiras-produto .bandeira-promocao::before {
content: " Desconto de ";
font-size: 10px;
}
.bandeiras-produto .bandeira-promocao{
width: 60px;
height: 20px
}
.bandeiras-produto .bandeira-frete-gratis, .bandeiras-produto .bandeira-promocao {
flex-direction: initial;
border-radius: 5px;
}
.cores-personalizadas .bandeiras-produto .bandeira-promocao {
background: Maroon;
color: Black;
}
O Site é: https://www.lojapegapega.com.br/
Vou mostrar uma imagem com o problema e como eu gostaria que ficasse, pode tanto ter o OFF quanto pode também não ter, o que for mais fácil
Não estou conseguindo colocar o código CSS certinho aqui no post então upei no Drive.
Espero que de certo
