{% comment %}
  Renders product buy-buttons.
  Accepts:
  - product: {Object} product object.
  - block: {Object} passing the block information.
  - product_form_id: {String} product form id.
  - section_id: {String} id of section to which this snippet belongs.
  - show_pickup_availability:: {Boolean} for the pickup availability. If true the pickup availability is rendered, false - not rendered (optional).

  Usage:
  {% render 'ascendify-buy-buttons', block: block, product: product, product_form_id: product_form_id, show_pickup_availability: true %}
{% endcomment %}
<style>
    #ProductSubmitButton-{{ section_id }},
    #SectionAtcBtn-{{ section_id }} {
      --icon-scale: {{ block.settings.icon_scale | divided_by: 100.0 }}em;
      --icon-spacing: {{ block.settings.icon_spacing }}px;
    }

    /* Keep prefix icon and label text on the same line */
    {% unless block.settings.button_icon == 'none' or block.settings.button_icon == blank %}
    #ProductSubmitButton-{{ section_id }} .main-atc__label.button__label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-wrap: nowrap;
      gap: {{ block.settings.button_icon_spacing | default: 8 }}px;
    }
    {% endunless %}
    #ProductSubmitButton-{{ section_id }} .main-atc__prefix-icon {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      margin-right: {{ block.settings.button_icon_spacing | default: 8 }}px;
    }
    #ProductSubmitButton-{{ section_id }} .main-atc__prefix-icon svg,
    #ProductSubmitButton-{{ section_id }} .main-atc__prefix-icon img {
      width: {{ block.settings.button_icon_size | default: 20 }}px;
      height: {{ block.settings.button_icon_size | default: 20 }}px;
      flex-shrink: 0;
    }
    #ProductSubmitButton-{{ section_id }} .main-atc__prefix-icon i {
      font-size: {{ block.settings.button_icon_size | default: 20 }}px;
      line-height: 1;
    }
  {% if block.settings.enable_gradient %}
    #ProductSubmitButton-{{ section_id }} {
      background: {{ block.settings.button_gradient }} !important;
      background-color: transparent !important;
    }
  {% elsif block.settings.enable_custom_color %}
    #ProductSubmitButton-{{ section_id }} {
      --color-button: {{ block.settings.custom_color.red }}, {{ block.settings.custom_color.green }}, {{ block.settings.custom_color.blue }};
    }
  {% endif %}
    {% if block.settings.prefix_icon != blank %}
      #ProductSubmitButton-{{ section_id }} .button__label::before {
        background-image: url('{{ block.settings.prefix_icon | image_url }}');
      }
    {% endif %}
    {% if block.settings.suffix_icon != blank %}
      #ProductSubmitButton-{{ section_id }} .button__label::after {
        background-image: url('{{ block.settings.suffix_icon | image_url }}');
      }
    {% endif %}

    {% if block.settings.secondary_btn_enable_custom_color %}
      #SectionAtcBtn-{{ section_id }} {
        --color-base-accent-1: {{ block.settings.secondary_btn_custom_color.red }}, {{ block.settings.secondary_btn_custom_color.green }}, {{ block.settings.secondary_btn_custom_color.blue }};
        --color-base-outline-button-labels: {{ block.settings.secondary_btn_custom_color.red }}, {{ block.settings.secondary_btn_custom_color.green }}, {{ block.settings.secondary_btn_custom_color.blue }};
      }
    {% endif %}
    {% if block.settings.secondary_btn_prefix_icon != blank %}
      #SectionAtcBtn-{{ section_id }} .button__label::before {
        background-image: url('{{ block.settings.secondary_btn_prefix_icon | image_url }}');
      }
    {% endif %}
    {% if block.settings.secondary_btn_suffix_icon != blank %}
      #SectionAtcBtn-{{ section_id }} .button__label::after {
        background-image: url('{{ block.settings.secondary_btn_suffix_icon | image_url }}');
      }
    {% endif %}

    /* Font size control for button text and prices */
    {% if block.settings.button_font_size %}
      #ProductSubmitButton-{{ section_id }} .button__label {
        font-size: {{ block.settings.button_font_size }}rem;
      }
      #ProductSubmitButton-{{ section_id }} .main-atc-price {
        font-size: {{ block.settings.button_font_size }}rem;
      }
      #ProductSubmitButton-{{ section_id }} .main-atc-compare-price {
        font-size: 1.5rem;
      }
    {% endif %}

    /* Style for opposite layout when enabled */
    {% if block.settings.enable_opposite_layout %}
      #ProductSubmitButton-{{ section_id }} .main-atc__label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
      }
      #ProductSubmitButton-{{ section_id }} .main-atc__label__text {
        flex: 0 0 auto;
      }
      #ProductSubmitButton-{{ section_id }} .main-atc-price {
        flex: 0 0 auto;
        margin-left: auto;
      }
    {% endif %}

    /* Compare price styling in button */
    {% if block.settings.show_compare_price %}
      .main-atc-compare-price {
        text-decoration: line-through;
        opacity: 0.7;
        display: inline;
        margin-right: 0.5em;
        color: rgb(var(--color-button-text));
      }
      .main-atc-price-container {
        display: inline;
      }
      .main-atc-price-container > * {
        display: inline;
      }
      {% if block.settings.compare_price_position == 'after' %}
        .main-atc-compare-price {
          margin-right: 0;
        }
      {% endif %}

      /* Ensure the main label stays horizontal */
      #ProductSubmitButton-{{ section_id }} .main-atc__label {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
      }
      #ProductSubmitButton-{{ section_id }} .main-atc__label > * {
        white-space: nowrap;
      }

      /* Improved spacing for price separator when compare price is enabled */
      #ProductSubmitButton-{{ section_id }} .price-separator-spacing {
        margin-left: 0.25em;
        margin-right: 0.25em;
      }

    {% endif %}

  {% if block.settings.enable_shine_animation and settings.action_btn_hover == 'glow' %}
  #ProductSubmitButton-{{ section_id }} {
    position: relative;
    overflow: hidden;
  }

  #ProductSubmitButton-{{ section_id }}::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, {{ block.settings.shine_opacity }}),
      transparent
    );
    transition: left {{ block.settings.shine_duration }}s ease;
    z-index: 1;
  }

  #ProductSubmitButton-{{ section_id }}:hover::before {
    left: 100%;
  }

  #ProductSubmitButton-{{ section_id }} .button__label {
    position: relative;
    z-index: 2;
  }
  {% endif %}

  {% if block.settings.enable_spin_border %}
  /* Spin border wrapper — clips the spinning disc, exposes a thin glow ring around the button */
  .atc-spin-wrapper-{{ section_id }} {
    position: relative;
    display: block;
    /* Use the same theme variable the button itself uses — no JS, no flash */
    border-radius: var(--buttons-radius-outset);
    padding: {{ block.settings.spin_border_thickness }}px;
    overflow: hidden;
    /* Inherit full-width behaviour from the button container */
    width: 100%;
  }

  /* The spinning conic-gradient disc */
  .atc-spin-wrapper-{{ section_id }}::before {
    content: '';
    display: block;
    background: conic-gradient(
      {{ block.settings.spin_border_color }},
      {{ block.settings.spin_border_color }},
      {{ block.settings.spin_border_color }},
      {{ block.settings.spin_border_color }},
      color-mix(in srgb, {{ block.settings.spin_border_color }} 25%, #fff),
      #fff
    );
    width: 110%;
    padding-bottom: 216%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    z-index: 0;
    animation: atc-spin-{{ section_id }} {{ block.settings.spin_border_speed }}s linear infinite;
  }

  /* Button sits on top of the spinning disc, completely unaffected */
  .atc-spin-wrapper-{{ section_id }} > #ProductSubmitButton-{{ section_id }} {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0 !important;
    display: block;
  }

  @keyframes atc-spin-{{ section_id }} {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
  }

  /* Hide the spinning border while the button is loading or disabled */
  .atc-spin-wrapper-{{ section_id }}:has(#ProductSubmitButton-{{ section_id }}.loading)::before,
  .atc-spin-wrapper-{{ section_id }}:has(#ProductSubmitButton-{{ section_id }}[disabled])::before {
    animation: none;
    opacity: 0;
  }
  {% endif %}
/* Keep button surface opaque while loading — prevents FOMO bar bleed-through */
  #ProductSubmitButton-{{ section_id }}.loading {
    background: rgb(var(--color-button)) !important;
  }
  {% if block.settings.enable_gradient %}
  #ProductSubmitButton-{{ section_id }}.loading {
    background: {{ block.settings.button_gradient }} !important;
  }
  {% elsif block.settings.enable_custom_color %}
  #ProductSubmitButton-{{ section_id }}.loading {
    background: rgb({{ block.settings.custom_color.red }}, {{ block.settings.custom_color.green }}, {{ block.settings.custom_color.blue }}) !important;
  }
  {% endif %}
</style>
{% if block.settings.show_dynamic_checkout and block.settings.enable_dynamic_checkout_label %}
  {%- assign dco_label = block.settings.dynamic_checkout_label | default: 'Shop Now' -%}
  <style>
    .shopify-payment-button .shopify-payment-button__button--unbranded {
        position: relative;
    }
    .shopify-payment-button .shopify-payment-button__button--unbranded:after {
        content: "{{ dco_label | escape }}";
        background: inherit;
        font-size: inherit;
        color: inherit;
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
    }
  </style>
{% endif %}
<div
  {{ block.shopify_attributes }}
  style="--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;--margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;"
>
  {%- if product != blank -%}
    <product-form
      class="product-form main-product-form"
      data-section="{{ section.id }}"
      data-options="{{ product.options | join: ',' }}"
      data-main="{{ main_product }}"
    >
      <div class="product-form__error-message-wrapper" role="alert" hidden>
        <svg
          aria-hidden="true"
          focusable="false"
          class="icon icon-error"
          viewBox="0 0 13 13"
        >
          <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
          <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
          <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
          <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
        </svg>
        <span class="product-form__error-message"></span>
      </div>

      {%- form 'product',
        product,
        id: product_form_id,
        class: 'form',
        novalidate: 'novalidate',
        data-type: 'add-to-cart-form'
      -%}
        <div class="hidden product-form__variants" id="product-form-{{ section.id }}__variants" data-values=""></div>
        <input
          type="hidden"
          name="id"
          value="{{ product.selected_or_first_available_variant.id }}"
          class="product-variant-id"
          {% if block.settings.skip_cart %}
            data-skip-cart="true"
          {% endif %}
        >
        <div class="product-form__buttons{% if block.settings.uppercase_text %} product-form__buttons--uppercase{% endif %}">
          {%- liquid
            assign check_against_inventory = true
            if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue'
              assign check_against_inventory = false
            endif
            if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory
              assign quantity_rule_soldout = true
            endif
          -%}
          <div class="product-form__quantity-and-btn product-form__quantity-and-btn--{{ quantity_atc_append }} product-form__quantity-and-btn--{{ quantity_atc_append_heights }}">
            {% if quantity_selector_html != blank and quantity_atc_append != 'none' %}
              {{ quantity_selector_html }}
            {% endif %}

            {% if block.settings.enable_spin_border %}
              <div class="atc-spin-wrapper-{{ section_id }}">
            {% endif %}

            <button
              id="ProductSubmitButton-{{ section_id }}"
              type="submit"
              name="add"
              class="atc-button product-form__submit button button--full-width button--margin-x{% if main_product %} main-product-atc{% else %} featured-product-atc-{{ section.id }}{% endif %}{% if block.settings.prefix_icon != blank %} button--prefix-icon{% endif %}{% if block.settings.suffix_icon != blank %} button--suffix-icon{% endif %} {%- if block.settings.atc_icon == 'arrow_end' -%}arrow{%- endif -%} {%- if block.settings.atc_icon == 'none' -%} {%- endif -%}"
              {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
                disabled
                data-unavailable="true"
              {% endif %}
              data-required-fields="0"
              data-valid-fields="0"
              style="padding-top: {{block.settings.atcbuttonpadding}}px!important; padding-bottom: {{block.settings.atcbuttonpadding}}px;"
            >
              <span class="main-atc__error" style="display:none;"></span>
              <span class="main-atc__label button__label">
                {%- unless block.settings.button_icon == 'none' or block.settings.button_icon == blank -%}
                  <span class="main-atc__prefix-icon" aria-hidden="true">
                    {%- case block.settings.button_icon -%}
                      {%- when 'cart' -%}
                        <svg xmlns="http://www.w3.org/2000/svg" width="{{ block.settings.button_icon_size }}" height="{{ block.settings.button_icon_size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                          <circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                        </svg>
                      {%- when 'bag' -%}
                        <svg xmlns="http://www.w3.org/2000/svg" width="{{ block.settings.button_icon_size }}" height="{{ block.settings.button_icon_size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                          <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path>
                        </svg>
                      {%- when 'arrow' -%}
                        <svg xmlns="http://www.w3.org/2000/svg" width="{{ block.settings.button_icon_size }}" height="{{ block.settings.button_icon_size }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                          <line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline>
                        </svg>
                      {%- when 'cart_2' -%}
                        <i class="fa-solid fa-cart-shopping"></i>
                      {%- when 'bag_2' -%}
                        <i class="fa-solid fa-bag-shopping"></i>
                      {%- when 'custom' -%}
                        {%- if block.settings.prefix_icon != blank -%}
                          <img
                            src="{{ block.settings.prefix_icon | image_url: width: 40 }}"
                            alt=""
                            width="{{ block.settings.button_icon_size }}"
                            height="{{ block.settings.button_icon_size }}"
                            style="width:{{ block.settings.button_icon_size }}px;height:{{ block.settings.button_icon_size }}px;object-fit:contain;"
                          >
                        {%- endif -%}
                    {%- endcase -%}
                  </span>
                {%- endunless -%}
                {% comment %} Only show left price if NOT using opposite layout {% endcomment %}
                {% if block.settings.display_price and block.settings.price_position == 'left' %}
                  <span
                    id="main-atc-price-{{ section.id }}"
                    class="main-atc-price{% if product.selected_or_first_available_variant.available == false %} hidden{% endif %}"
                  >
                    {% if block.settings.show_compare_price
                      and product.selected_or_first_available_variant.compare_at_price
                        > product.selected_or_first_available_variant.price
                    %}
                      {% if block.settings.compare_price_position == 'before' %}
                        <span class="main-atc-compare-price main-atc-compare-price-span-{{ section.id }}{% if product.selected_or_first_available_variant.available == false %} hidden{% endif %}">
                          ({{ product.selected_or_first_available_variant.compare_at_price | money }})
                        </span>
                      {% endif %}
                      <span class="main-atc-price-span-{{ section.id }}">
                        {{- product.selected_or_first_available_variant.price | money -}}
                      </span>
                      {% if block.settings.compare_price_position == 'after' %}
                        <span class="main-atc-compare-price main-atc-compare-price-span-{{ section.id }}{% if product.selected_or_first_available_variant.available == false %} hidden{% endif %}">
                          ({{ product.selected_or_first_available_variant.compare_at_price | money }})
                        </span>
                      {% endif %}
                    {% else %}
                      <span class="main-atc-price-span-{{ section.id }}">
                        {{- product.selected_or_first_available_variant.price | money -}}
                      </span>
                    {% endif %}
                    <span class="price-separator-spacing">{{ block.settings.price_separator }}</span>
                  </span>
                {% endif %}
                <span class="main-atc__label__text">
                  {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
                    {{ 'products.product.sold_out' | t }}
                  {%- else -%}
                    {% if block.settings.atc_custom_label != blank %}
                      {{ block.settings.atc_custom_label }}
                    {% else %}
                      {{ 'products.product.add_to_cart' | t }}
                    {%- endif -%}
                  {%- endif -%}
                </span>
                {% comment %} Show right price for both regular right position and opposite layout {% endcomment %}
                {% if block.settings.display_price and block.settings.price_position == 'right' %}
                  <span
                    id="main-atc-price-{{ section.id }}"
                    class="main-atc-price{% if product.selected_or_first_available_variant.available == false %} hidden{% endif %}"
                  >
                    {% comment %} Only show separator if NOT using opposite layout {% endcomment %}
                    {% unless block.settings.enable_opposite_layout %}
                      <span class="price-separator-spacing">{{ block.settings.price_separator }}</span>
                    {% endunless %}
                    {% if block.settings.show_compare_price
                      and product.selected_or_first_available_variant.compare_at_price
                        > product.selected_or_first_available_variant.price
                    %}
                      {% if block.settings.compare_price_position == 'before' %}
                        <span class="main-atc-compare-price main-atc-compare-price-span-{{ section.id }}{% if product.selected_or_first_available_variant.available == false %} hidden{% endif %}">
                          ({{ product.selected_or_first_available_variant.compare_at_price | money }})
                        </span>
                      {% endif %}
                      <span class="main-atc-price-span-{{ section.id }}">
                        {{- product.selected_or_first_available_variant.price | money -}}
                      </span>
                      {% if block.settings.compare_price_position == 'after' %}
                        <span class="main-atc-compare-price main-atc-compare-price-span-{{ section.id }}{% if product.selected_or_first_available_variant.available == false %} hidden{% endif %}">
                          ({{ product.selected_or_first_available_variant.compare_at_price | money }})
                        </span>
                      {% endif %}
                    {% else %}
                      <span class="main-atc-price-span-{{ section.id }}">
                        {{- product.selected_or_first_available_variant.price | money -}}
                      </span>
                    {% endif %}
                  </span>
                {% endif %}

                {% comment %} Only show icons if NOT using opposite layout {% endcomment %}
                {% unless block.settings.enable_opposite_layout %}
                  {%- if block.settings.atc_icon == 'shopping_cart' -%}
                    <i class="fa-solid fa-cart-shopping" style="margin-left:10px;"></i>
                  {%- endif -%}

                  {%- if block.settings.atc_icon == 'shopping_bag' -%}
                    <i class="fa-solid fa-bag-shopping" style="margin-left:10px;"></i>
                  {%- endif -%}

                  {%- if block.settings.atc_icon == 'arrow_next_to_text' -%}
                    <i class="fa-solid fa-arrow-right" style="margin-left:10px;margin-bottom: 0px;"></i>
                  {%- endif -%}

                  {%- if block.settings.atc_icon == 'shopping_bag_2' -%}
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-left:10px;">
                      <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path>
                    </svg>
                  {%- endif -%}
                {% endunless %}
              </span>
              <div class="loading-overlay__spinner hidden">
                <svg
                  aria-hidden="true"
                  focusable="false"
                  class="spinner"
                  viewBox="0 0 66 66"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                </svg>
              </div>

              {%- if block.settings.atc_text -%}
                <div
                  class="atc-label-text"
                  style="position: absolute; display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 50px; font-size: {{ block.settings.atc_text_labelsize }}px; text-transform: {{ block.settings.atc_text_labeltransform }};"
                >
                  {%- if block.settings.atc_text_icon_enable -%}
                    {%- if block.settings.atc_text_icon_image != blank -%}
                      <img
                        src="{{ block.settings.atc_text_icon_image | image_url: width: 40 }}"
                        alt=""
                        style="height: {{ block.settings.atc_text_icon_size }}px; width: {{ block.settings.atc_text_icon_size }}px; object-fit: contain; display: inline-block;"
                      >
                    {%- elsif block.settings.atc_text_icon_name != blank -%}
                      <span
                        class="material-symbols-outlined"
                        style="font-size: {{ block.settings.atc_text_icon_size }}px; line-height: 1;"
                      >
                        {{- block.settings.atc_text_icon_name -}}
                      </span>
                    {%- endif -%}
                  {%- endif -%}
                  {{ block.settings.atc_text_label }}
                </div>

                <style>
                  .atc-button {
                    padding-bottom: 35px !important;
                  }
                </style>
              {%- endif -%}
            </button>

            {% if block.settings.enable_spin_border %}
              </div>
            {% endif %}
          </div>
          {%- if block.settings.enable_secondary_btn != blank -%}
            <button
              id="SectionAtcBtn-{{ section.id }}"
              type="button"
              class="button button--secondary{% if main_product %} main-product-atc{% else %} featured-product-atc-{{ section.id }}{% endif %} button--has-spinner button--full-width product-form__submit"
              data-skip-cart-button="true"
              {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
                disabled
              {% endif %}
            >
              <span class="button__label">
                {{ block.settings.secondary_btn_label }}
              </span>
              <div class="loading-overlay__spinner">
                <svg
                  aria-hidden="true"
                  focusable="false"
                  class="spinner"
                  viewBox="0 0 66 66"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                </svg>
              </div>
            </button>
          {%- endif -%}
          {%- if block.settings.show_dynamic_checkout -%}
            {{ form | payment_button }}
          {%- endif -%}
        </div>
      {%- endform -%}
    </product-form>
    {%- if block.settings.fomo_enable and block.settings.show_dynamic_checkout == false -%}
      <style>
        /* Ensure button sits above the FOMO bar */
        #ProductSubmitButton-{{ section_id }},
        .atc-spin-wrapper-{{ section_id }} {
          position: relative;
          z-index: 2;
          isolation: isolate;
        }

        .fomo-bar-{{ section_id }} {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          padding: calc({{ block.settings.fomo_padding_v }}px + var(--buttons-radius-outset)) {{ block.settings.fomo_padding_h }}px {{ block.settings.fomo_padding_v }}px;
          background-color: {{ block.settings.fomo_bg_color }};
          font-size: {{ block.settings.fomo_font_size }}px;
          color: {{ block.settings.fomo_text_color }};
          line-height: 1.4;
          border-radius: 0 0 var(--buttons-radius-outset) var(--buttons-radius-outset);
          margin-top: calc(var(--buttons-radius-outset) * -1);
          margin-bottom: {{ block.settings.fomo_margin_top }}px;
          position: relative;
          z-index: 0;
        }

        /* Ensure button sits above the FOMO bar */
        #ProductSubmitButton-{{ section_id }},
        .atc-spin-wrapper-{{ section_id }} {
          position: relative;
          z-index: 2;
          isolation: isolate;
        }

        /* Prevent aria-disabled opacity from making button transparent over FOMO bar */
        #ProductSubmitButton-{{ section_id }}[aria-disabled="true"] {
          opacity: 1;
        }

        .fomo-bar-{{ section_id }} svg path {
          fill: {{ block.settings.fomo_icon_color }};
        }

        .fomo-bar-{{ section_id }} .fomo-bar__icon {
          flex-shrink: 0;
          display: flex;
          align-items: center;
        }

        .fomo-bar-{{ section_id }} .fomo-bar__icon img {
          width: {{ block.settings.fomo_icon_size }}px;
          height: {{ block.settings.fomo_icon_size }}px;
          object-fit: contain;
        }

        .fomo-bar-{{ section_id }} .fomo-bar__icon svg {
          width: {{ block.settings.fomo_icon_size }}px;
          height: {{ block.settings.fomo_icon_size }}px;
        }

        .fomo-bar-{{ section_id }} .fomo-bar__count {
          font-weight: {{ block.settings.fomo_count_weight }};
          color: {{ block.settings.fomo_count_color }};
        }
      </style>
      <div class="fomo-bar-{{ section_id }}" id="FomoBar-{{ section_id }}">
        <span class="fomo-bar__icon">
          {%- if block.settings.fomo_custom_icon != blank -%}
            <img src="{{ block.settings.fomo_custom_icon | image_url: width: 40 }}" alt="">
          {%- else -%}
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
              <path d="M10.0514 1.72074C9.94606 1.67351 9.82868 1.6601 9.71541 1.68233C9.60214 1.70457 9.49855 1.76137 9.41889 1.84491C9.34125 1.92495 9.28493 2.02319 9.25509 2.13063C9.22524 2.23807 9.22283 2.35129 9.24806 2.45991C9.33056 2.82657 9.37389 3.20991 9.37389 3.60157C9.37389 4.49824 9.14806 5.12657 8.75889 5.64741C8.36389 6.17657 7.79222 6.60741 7.06972 7.09324C7.05848 7.10097 7.04789 7.10961 7.03806 7.11907L6.95056 7.20741C6.03692 7.79684 5.3137 8.63843 4.8684 9.63034C4.4231 10.6222 4.27481 11.7219 4.44149 12.7964C4.60816 13.8708 5.08265 14.8739 5.80753 15.6843C6.53241 16.4946 7.47662 17.0776 8.5259 17.3625C9.57517 17.6474 10.6845 17.6222 11.7198 17.2897C12.755 16.9573 13.6717 16.332 14.3589 15.4895C15.0461 14.6469 15.4744 13.6233 15.592 12.5424C15.7096 11.4615 15.5114 10.3697 15.0214 9.39907C15.0059 9.36846 14.9832 9.34213 14.9551 9.32243C14.927 9.30273 14.8945 9.29027 14.8605 9.28615C14.8264 9.28202 14.7919 9.28637 14.7599 9.2988C14.7279 9.31123 14.6995 9.33136 14.6772 9.35741L14.5039 9.55824C13.7722 10.4132 13.1814 11.1041 11.9706 11.4124C11.9189 11.4249 11.8872 11.4157 11.8647 11.4016C11.8288 11.3764 11.8021 11.3401 11.7889 11.2982C11.7671 11.2405 11.7613 11.178 11.7721 11.1172C11.783 11.0565 11.8101 10.9998 11.8506 10.9532C12.4981 10.2507 12.9581 9.29741 13.1222 7.94157C13.4306 5.40157 12.2764 2.69657 10.0514 1.72074Z"/>
            </svg>
          {%- endif -%}
        </span>
        <span class="fomo-bar__text">
          {%- assign fomo_parts = block.settings.fomo_text | split: '[count]' -%}
          {%- if fomo_parts.size > 1 -%}
            {{- fomo_parts[0] -}}
            <span class="fomo-bar__count" data-fomo-count>{{ block.settings.fomo_count_min }}</span>
            {{- fomo_parts[1] -}}
          {%- else -%}
            <span class="fomo-bar__count" data-fomo-count>{{ block.settings.fomo_count_min }}</span>
            {{ block.settings.fomo_text }}
          {%- endif -%}
        </span>
      </div>
      <script>
        (function() {
          var bar = document.getElementById('FomoBar-{{ section_id }}');
          if (!bar) return;
          var countEl = bar.querySelector('[data-fomo-count]');
          if (!countEl) return;
          var min = {{ block.settings.fomo_count_min }};
          var max = {{ block.settings.fomo_count_max }};
          var interval = {{ block.settings.fomo_update_interval }} * 1000;
          var storageKey = 'fomo_count_{{ section_id }}';
          function randBetween(a, b) {
            return Math.floor(Math.random() * (b - a + 1)) + a;
          }
          var stored = sessionStorage.getItem(storageKey);
          var current = stored ? parseInt(stored, 10) : randBetween(min, max);
          countEl.textContent = current;
          sessionStorage.setItem(storageKey, current);
          if (interval > 0) {
            setInterval(function() {
              var delta = randBetween(-3, 5);
              current = Math.min(max, Math.max(min, current + delta));
              countEl.textContent = current;
              sessionStorage.setItem(storageKey, current);
            }, interval);
          }
        })();
      </script>
    {%- endif -%}
  {%- else -%}
    <div class="product-form">
      <div class="product-form__buttons form">
        <button
          type="submit"
          name="add"
          class="product-form__submit button button--full-width button--primary"
          disabled
        >
          {{ 'products.product.sold_out' | t }}
        </button>
      </div>
    </div>
  {%- endif -%}

  {%- if show_pickup_availability -%}
    {{ 'component-pickup-availability.css' | asset_url | stylesheet_tag }}

    {%- assign pick_up_availabilities = product.selected_or_first_available_variant.store_availabilities
      | where: 'pick_up_enabled', true
    -%}

    <pickup-availability
      class="product__pickup-availabilities no-js-hidden quick-add-hidden"
      {% if product.selected_or_first_available_variant.available and pick_up_availabilities.size > 0 %}
        available
      {% endif %}
      data-root-url="{{ routes.root_url }}"
      data-variant-id="{{ product.selected_or_first_available_variant.id }}"
      data-has-only-default-variant="{{ product.has_only_default_variant }}"
    >
      <template>
        <pickup-availability-preview class="pickup-availability-preview">
          {% render 'icon-unavailable' %}
          <div class="pickup-availability-info">
            <p class="caption-large">{{ 'products.product.pickup_availability.unavailable' | t }}</p>
            <button class="pickup-availability-button link link--text underlined-link">
              {{ 'products.product.pickup_availability.refresh' | t }}
            </button>
          </div>
        </pickup-availability-preview>
      </template>
    </pickup-availability>

    <script src="{{ 'pickup-availability.js' | asset_url }}" defer="defer"></script>
  {%- endif -%}
</div>