.discount-badge {
    display: flex;
    align-items: center;
    width: auto;
    border: 0;
    padding: 0 10px;
    font-size: 13px; 
    background: var(--discount-bg-color);
    color: var(--discount-text-color);
    border-radius: var(--discount-radius);
}

/* When a background image is configured, it replaces the solid color */
.discount-badge--image {
    background-color: transparent;
    background-image: var(--discount-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media(max-width:768px) {
    .discount-badge {
        font-size: 12px;
        line-height: 20px;
    }
}