Pipeline 7 sold out badge product page

gistfile1.txt

<!-- Liquid - Add product sold label -->                       
{% assign current_variant = product.selected_or_first_available_variant %}
<p class="badge-wrapper"><span class="sold-out uppercase" {% if current_variant.available == "" %}style="display:none;" {% endif %}>{{ 'products.product.sold_out' | t }}</span></p>

<script>
  document.addEventListener('theme:variant:change', function(event) {
    const variant = event.detail.variant;
    let container = event.target;

    if(event.target.outerWrapper){
      container = event.target.outerWrapper;
    }

    const skuWrapper = container.querySelectorAll(".badge-wrapper");

    if (skuWrapper.length) {
      skuWrapper.forEach((element) => {
        const sku = element.querySelector(".sold-out");
        if (variant) {
          if (variant.available) {
            element.style.display = "none"
          } else {
            element.style.display = "block";
          }
        } else {
          element.style.display = "none";
        }
      });
    }  
  });
</script>
<!-- end -->