body .badge {
    margin: unset;
    padding: 2px 6px; /*F*/
    font-size: 12px; /*F*/
    font-size: 1rem;
    border: 1px solid var(--alfa-black, black);
    /* the theme pill unless the flags ask for square corners via
       --abc-flag-radius (product-flags--square, set in custom.css) */
    border-radius: var(--abc-flag-radius, var(--alfa-border-radius, 15px));
    /* transparent unless the flags carry a --abc-flag-bg backing, set by the
       product-flags--bg-* modifiers in custom.css for the on-image placement */
    background-color: var(--abc-flag-bg, transparent);
    color: var(--alfa-black, black);

    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    max-height: 20px; /*F*/
}
.badge::before {
    /* width: 10px; F */
    /* height: 10px; F */
    margin-right: 6px; /*F*/
    margin-block: auto;
}
body .badge:not(:last-of-type) {
    margin-right: 0.5rem;
}

/* .discount-custom = discount badge showing a custom text (abcweb_theme
   settings); it takes the whole on-sale look, icon included */
body .badge.on-sale,
body .badge.discount,
body .badge.discount-custom {
    color: var(--alfa-sale, #ad1f00);
    border-color: var(--alfa-sale, #ad1f00);
}
.badge.on-sale::before,
.badge.discount-custom::before {
    content: url('/themes/abcweb/assets/img/icons/info.svg');
}

.badge.new::before {
    content: url('/themes/abcweb/assets/img/icons/diamond.svg');
}