Product page show custom badge

gistfile1.txt

{% if settings.badge_custom %}
    {% if product.metafields.theme.badge != blank and product.metafields.theme.badge.type == 'single_line_text_field' %}
      <div class="badge--custom"><span>{{ product.metafields.theme.badge.value }}</span>
        <style>
        .badge--custom {
            font-family: var(--FONT-STACK-ACCENT);
            font-weight: var(--FONT-WEIGHT-ACCENT-BOLD);
            text-transform: var(--FONT-ACCENT-TRANSFORM);
            letter-spacing: var(--FONT-ACCENT-LETTER-SPACING);
            font-size: calc(var(--font-2) * var(--FONT-ADJUST-ACCENT));
        width: fit-content;
            max-width: calc(100% - var(--inner));
            padding: 5px 10px;
            background: var(--COLOR-BADGE);
            color: var(--COLOR-BADGE-TEXT);
        }
        </style>
      </div>
    {% endif %}
{%  endif %}