{% liquid
  assign item_count = 0
  if block.settings.option_1_quantity != 0
    assign item_count = item_count | plus: 1
  endif
  if block.settings.option_2_quantity != 0
    assign item_count = item_count | plus: 1
  endif
  if block.settings.option_3_quantity != 0
    assign item_count = item_count | plus: 1
  endif
  if block.settings.option_4_quantity != 0
    assign item_count = item_count | plus: 1
  endif

  assign has_second_option = false
  if product.options.size >= 2
    assign has_second_option = true
  endif

  assign has_badge = false
  if block.settings.option_1_badge != blank or block.settings.option_2_badge != blank or block.settings.option_3_badge != blank or block.settings.option_4_badge != blank
    assign has_badge = true
  endif

  assign variants_available_arr = product.variants | map: 'available'
  assign variants_option1_arr = product.variants | map: 'option1'
  assign variants_option2_arr = product.variants | map: 'option2'
  assign variants_option3_arr = product.variants | map: 'option3'

  assign has_compact_images = false
  if block.settings.style == 'compact'
    if block.settings.option_1_image != blank or block.settings.option_2_image != blank or block.settings.option_3_image != blank or block.settings.option_4_image != blank
      assign has_compact_images = true
    endif
  endif

%}

{% if block.settings.style == 'compact' %}
  {% assign has_badge_3 = false %}
  {% assign has_badge_4 = false %}
  {% assign has_any_benefit_bottom = false %}

  {% if block.settings.option_3_quantity != 0 and block.settings.option_3_badge != blank %}
    {% assign has_badge_3 = true %}
  {% endif %}
  {% if block.settings.option_4_quantity != 0 and block.settings.option_4_badge != blank %}
    {% assign has_badge_4 = true %}
  {% endif %}

  {% if block.settings.option_1_benefit != blank and block.settings.option_1_benefit_position == 'bottom' %}
    {% assign has_any_benefit_bottom = true %}
  {% endif %}
  {% if block.settings.option_2_benefit != blank and block.settings.option_2_benefit_position == 'bottom' %}
    {% assign has_any_benefit_bottom = true %}
  {% endif %}
  {% if block.settings.option_3_benefit != blank and block.settings.option_3_benefit_position == 'bottom' %}
    {% assign has_any_benefit_bottom = true %}
  {% endif %}
  {% if block.settings.option_4_benefit != blank and block.settings.option_4_benefit_position == 'bottom' %}
    {% assign has_any_benefit_bottom = true %}
  {% endif %}

  {% assign needs_margin = false %}
  {% if has_badge_3 or has_badge_4 or has_any_benefit_bottom %}
    {% assign needs_margin = true %}
  {% endif %}

  {% if needs_margin %}
    {% style %}
      label[for=quantity3],
      label[for=quantity4] {
        margin-top: 20px;
      }
      quantity-breaks {
        margin-bottom: 30px !important;
      }
    {% endstyle %}
  {% endif %}
{% endif %}

{% if block.settings.vertical_prices_layout == 'horizontal' %}
{% style %}
.quantity-break__right.dynamic-price {
    flex-direction: row;
    align-items: center;
}
{% endstyle %}
{% endif %}

{% style %}
.swatch-product-free--addon {
  width: 100%;
  {% if block.settings.enable_gift_label_states %}
    background: {{ block.settings.inactive_label_background_color | default: '#E5E7EB' }};
    color: {{ block.settings.inactive_label_text_color | default: '#6B7280' }};
  {% else %}
    background: {{ block.settings.backgroundcolor | default: '#A855F7' }};
    color: {{ block.settings.active_label_text_color | default: '#FFFFFF' }};
  {% endif %}
  border-radius: {{ block.settings.border_radius | divided_by: 10.0 }}rem;
  margin: 0px;
  max-width: 100%;
  margin-bottom: 4px;
  margin-top: -9px;
  transition: all 0.3s ease;
}

{% if block.settings.enable_gift_label_states %}
/* Active states for each quantity option */
input#quantity1:checked + label + .swatch-product-free--addon {
  background: {{ block.settings.backgroundcolor | default: '#A855F7' }} !important;
  color: {{ block.settings.active_label_text_color | default: '#FFFFFF' }} !important;
}

input#quantity2:checked + label + .swatch-product-free--addon {
  background: {{ block.settings.backgroundcolor | default: '#A855F7' }} !important;
  color: {{ block.settings.active_label_text_color | default: '#FFFFFF' }} !important;
}

input#quantity3:checked + label + .swatch-product-free--addon {
  background: {{ block.settings.backgroundcolor | default: '#A855F7' }} !important;
  color: {{ block.settings.active_label_text_color | default: '#FFFFFF' }} !important;
}

input#quantity4:checked + label + .swatch-product-free--addon {
  background: {{ block.settings.backgroundcolor | default: '#A855F7' }} !important;
  color: {{ block.settings.active_label_text_color | default: '#FFFFFF' }} !important;
}
{% endif %}

.strikethrough {
  text-decoration: line-through;
  font-size: {{ block.settings.labeltextsize }}px;
  color: {{ block.settings.inactive_label_text_color | default: '#6B7280' }};
}

/* Active strikethrough text color */
input#quantity1:checked + label + .swatch-product-free--addon .strikethrough,
input#quantity2:checked + label + .swatch-product-free--addon .strikethrough,
input#quantity3:checked + label + .swatch-product-free--addon .strikethrough,
input#quantity4:checked + label + .swatch-product-free--addon .strikethrough {
  color: {{ block.settings.active_label_text_color | default: '#FFFFFF' }} !important;
}
  .swatch-product-free--addon {
  cursor: pointer;
}

.quantity-break__badge.badge-shine {
  overflow: hidden !important;
}

.quantity-break__badge.badge-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, {{ block.settings.badge_shine_opacity | default: 0.4 }}),
    transparent
  );
  animation: badgeShine {{ block.settings.badge_shine_duration | default: 2 }}s ease-in-out {{ block.settings.badge_shine_delay | default: 3 }}s infinite;
  z-index: 999;
  pointer-events: none;
}

@keyframes badgeShine {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

 .quantity-break__sold-out-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(240, 240, 240, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: inherit;
}

.sold-out-message {
  background: {{ block.settings.sold_out_badge_background | default: '#000000' }};
  color: {{ block.settings.sold_out_badge_text | default: '#ffffff' }};
  padding: 8px 16px;
  border-radius: {{ block.settings.sold_out_badge_border_radius | default: 20 }}px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}

input[disabled] + label {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.quantity-break {
  position: relative;
}

{% if block.settings.enable_custom_quantity_break_background %}
.quantity-breaks-container input:checked+.quantity-break {
    background: {{ block.settings.custom_quantity_break_background | default: '#ffffff' }};
}
{% endif %}

{% if block.settings.enable_custom_quantity_break_gradient_background %}
.quantity-breaks-container input:checked+.quantity-break {
    background: {{ block.settings.custom_quantity_break_gradient_background }}!important;
}
{% endif %}

{% if block.settings.enable_dashed_border %}
    .quantity-break {
      border: dashed var(--border-width) rgba(var(--accent-color), .5) !important;
    }
    
    .quantity-breaks-container input:checked + .quantity-break {
      border: solid var(--border-width) rgb(var(--accent-color)) !important;
    }
    
    @media (hover: hover) {
      .quantity-break:hover {
        border: solid 2px rgb(var(--accent-color)) !important;
      }
    }
{% endif %}

.quantity-break__badge {
border-radius: {{settings.quantity_discount_badge_radius }}px;
}

{% if settings.enable_custom_benefit_color %}
.quantity-break__benefit--solid {
    background: {{settings.quantity_break__benefit_background }};
    border: {{settings.quantity_break__benefit_background }};
    color: {{settings.break__benefit_text_color }};
}
{% endif %}

{% if settings.enable_unselected_background %}
.quantity-break {
  background: {{ settings.unselected_background_color | default: '#F3F4F6' }} !important;
}
{% endif %}

{% if settings.enable_selected_background %}
.quantity-breaks-container input:checked + .quantity-break {
  background: {{ settings.selected_background_color | default: '#FFFFFF' }} !important;
}
{% endif %}

{% if settings.quantity_breaks_indicator_compact %}
  .quantity-breaks--show-indicator
    .quantity-breaks-container
    input:checked
    + .quantity-break::before {
    background: transparent;
    border: solid 0.2rem rgb(var(--accent-color));
    box-shadow: inset 0 0 0 0.25rem rgb(var(--color-background)),
                inset 0 0 0 0.75rem rgb(var(--accent-color)),
                0 0 0 0.1rem rgb(var(--accent-color));
  }
{% endif %}
{% if settings.enable_custom_benefit_border_radius %}
.quantity-break__benefit {
    --benefit-border-radius: {{ settings.quantity_break__benefit_border_radius | divided_by: 10.0 }}rem;
}
{% endif %}
{% if settings.enable_quantity_breaks_row_gap %}
.quantity-breaks--normal {
    --row-gap: 1.85rem;
}
{% endif %}

{% if settings.enable_quantitybreaks_content_topmargin %}
.quantity-break__image-and-content {
    margin-top: {{ settings.quantitybreaks_content_topmargin }}px;
}
{% endif %}

.quantity-breaks--normal .quantity-break--badge-style-7.quantity-break--badge {
  overflow: hidden;
}

.quantity-breaks--normal .quantity-break--badge-style-7 .quantity-break__badge {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  transform: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-size: 0;
  line-height: 0;
  overflow: visible;
}

.quantity-breaks--normal .quantity-break--badge-style-7 .quantity-break__badge-inner {
  display: block;
  position: relative;
  padding: 7px 14px;
  border-top-left-radius: 0;
  border-top-right-radius: {{ settings.badge_style_7_top_right_radius | divided_by: 10.0 }}rem;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: {{ settings.badge_style_7_bottom_left_radius | divided_by: 10.0 }}rem;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: rgb(var(--color-foreground));
  background-color: rgb(var(--color-background));
}

.quantity-breaks--normal .quantity-break--badge-style-7.quantity-break--badge .quantity-break__right {
  margin-top: {{ settings.badge_style_7_price_offset | divided_by: 10.0 }}rem;
}

{% if settings.quantity_breaks_badge_position == 'left' %}
.quantity-breaks--normal .quantity-break--badge-style-7 .quantity-break__badge {
  right: auto;
  left: 0;
}
.quantity-breaks--normal .quantity-break--badge-style-7 .quantity-break__badge-inner {
  border-top-right-radius: 0;
  border-bottom-right-radius: {{ settings.badge_style_7_bottom_left_radius | divided_by: 10.0 }}rem;
  border-bottom-left-radius: 0;
}
{% endif %}
{% if settings.quantity_breaks_vertical_equal_height %}
#quantity-breaks-{{ section.id }}.quantity-breaks--vertical .quantity-breaks-container,
#quantity-breaks-{{ section.id }}.quantity-breaks--compact .quantity-breaks-container {
  align-items: stretch;
}
#quantity-breaks-{{ section.id }}.quantity-breaks--vertical .quantity-break,
#quantity-breaks-{{ section.id }}.quantity-breaks--compact .quantity-break {
  height: 100%;
  justify-content: center;
}
#quantity-breaks-{{ section.id }}.quantity-breaks--vertical .quantity-break__image-and-content,
#quantity-breaks-{{ section.id }}.quantity-breaks--compact .quantity-break__image-and-content {
  flex: 1;
  justify-content: center;
}
#quantity-breaks-{{ section.id }}.quantity-breaks--vertical .quantity-break__content,
#quantity-breaks-{{ section.id }}.quantity-breaks--compact .quantity-break__content {
  flex: 1;
  align-items: center;
}
#quantity-breaks-{{ section.id }}.quantity-breaks--vertical .quantity-break__variants,
#quantity-breaks-{{ section.id }}.quantity-breaks--compact .quantity-break__variants {
  margin-top: auto;
}
{% endif %}
{% endstyle %}
<quantity-breaks
  class="quantity-breaks quantity-breaks--{{ block.settings.style }} accent-color-{{ block.settings.color_scheme }}{% if block.settings.space_images %} quantity-breaks--space-images{% endif %}{% if has_badge %} quantity-breaks--has-badge{% endif %}{% if block.settings.full_width_pickers %} quantity-breaks-full-width-pickers{% endif %} quantity-breaks--vertical-image-{{ block.settings.vertical_images_position }} quantity-breaks--vertical-prices-{{ block.settings.vertical_prices_layout }}{% unless has_compact_images %}{% if block.settings.display_selected_indicator %} quantity-breaks--show-indicator{% endif %}{% endunless %}{% if block.settings.image_width == 100 %} quantity-breaks--max-width-images{% endif %}{% if settings.quantity_breaks_badge_position == 'left' %} quantity-breaks--badge-left{% endif %}{% if has_compact_images %} quantity-breaks--has-compact-image{% endif %}"  id="quantity-breaks-{{ section.id }}"
  id="quantity-breaks-{{ section.id }}"
  data-section="{{ section.id }}"
  data-items="{{ item_count }}"
  {% if has_second_option %}
    data-update-unavailable="true"
  {% endif %}
  data-update-prices="{{ block.settings.update_prices }}"
  data-money-format="{{ shop.money_format | escape }}"
  data-skip-non-existent="true"
  data-skip-unavailable="{{ block.settings.skip_unavailable }}"
  data-base-price="{{ price }}"
  data-base-compare-price="{{ compare_price }}"
  data-subscription-active="false"
  data-subscription-discount-type=""
  data-subscription-discount-value="0"
  style="--items-count:{{ item_count }};--image-width:{{ block.settings.image_width }}%;--border-radius:{{ block.settings.border_radius | divided_by: 10.0 }}rem;--border-width:{{ block.settings.border_width | divided_by: 10.0 }}rem;{% if block.settings.hide_pickers_overlay %}--pickers-overlay-opacity:0;--pickers-hover-overlay-opacity:0;{% endif %}--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;--margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;{% if settings.enable_badge_font_size_override %}--badge-font-size: {{ settings.badge_font_size | divided_by: 10.0 }}rem;{% endif %}"
  {{ block.shopify_attributes }}
>
  {% assign has_variants = false %}
  {% assign price = product.selected_or_first_available_variant.price %}
  {% if block.settings.headline != blank %}
  {% if block.settings.headline_style == 'left' %}
    <div class="quantity-breaks__title-container" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.2rem;">
      <h3 class="quantity-breaks__title" style="margin: 0;">
        {{ block.settings.headline }}
      </h3>
      {% if sizing_chart_html and sizing_chart_append == 'headline' %}
        <div class="quantity-breaks__sizing-chart">
          {{ sizing_chart_html }}
        </div>
      {% endif %}
    </div>
  {% else %}
    <h3 class="quantity-breaks__title flex-center center">
      <span></span>
      <span>{{ block.settings.headline }}</span>
      <span></span>
    </h3>
  {% endif %}
{% endif %}
  <div class="quantity-breaks-container">
    {% if block.settings.option_1_quantity != 0 %}
      {% liquid
        assign percentage_discount = block.settings.option_1_percentage_off_text | plus: 0
        assign percentage_left = 100 | minus: percentage_discount | divided_by: 100.00
        assign fixed_amount_off = block.settings.option_1_fixed_amount_off | times: 100
        assign option_1_price = price | times: block.settings.option_1_quantity | times: percentage_left | minus: fixed_amount_off

        assign compare_price = price
        if block.settings.option_1_compare_price == 'compare_price' and product.selected_or_first_available_variant.compare_at_price > price
          assign compare_price = product.selected_or_first_available_variant.compare_at_price
        endif
        assign option_1_compare_price = compare_price | times: block.settings.option_1_quantity

        assign option_1_price_difference = option_1_compare_price | minus: option_1_price
        assign option_1_price_difference_rounded = option_1_price_difference | divided_by: 100.00 | round | times: 100
        assign option_1_price_each = option_1_price | divided_by: block.settings.option_1_quantity
        assign option_1_compare_price_each = option_1_compare_price | divided_by: block.settings.option_1_quantity
        assign option_1_percentage_saved = option_1_compare_price | minus: option_1_price | times: 100 | divided_by: option_1_compare_price | floor
      %}
      <input
        id="quantity1"
        aria-label="Quantity"
        type="radio"
        name="quantity"
        value="{{ block.settings.option_1_quantity }}"
        form="{{ product_form_id }}"
        {% if block.settings.preselected == 'option_1' %}
          checked
        {% endif %}
        data-input="input_1"
      >
      <label
        for="quantity1"
        class="quantity-break{% if block.settings.option_1_badge != blank %} quantity-break--badge{% else %} quantity-break--no-badge{% endif %} quantity-break--badge-style-{{ block.settings.option_1_badge_style }} quantity-break--benefit-{{ block.settings.option_1_benefit_position }}"
        data-quantity="{{ block.settings.option_1_quantity }}"
        data-input="input_1"
        data-percentage-left="{{ percentage_left }}"
        data-fixed-discount="{{ fixed_amount_off }}"
      >
        {% if block.settings.enable_sold_out and block.settings.sold_out_option == 'option_1' %}
    <div class="quantity-break__sold-out-overlay">
      <div class="sold-out-message">{{ block.settings.sold_out_message }}</div>
    </div>
  {% endif %}
        {% if block.settings.option_1_badge != blank %}
          <p
            class="quantity-break__badge dynamic-price variant-price-update color-{{ block.settings.option_1_badge_color }}{% if block.settings.enable_badge_shine %} badge-shine{% endif %}"
            data-text="{{ block.settings.option_1_badge }}"
          >
           {% if block.settings.style == 'normal' and block.settings.option_1_badge_style == '6' or block.settings.style == 'normal' and block.settings.option_1_badge_style == '7' %}
              <span class="quantity-break__badge-inner">
            {% endif %}
            {% render 'text-with-price',
              text: block.settings.option_1_badge,
              quantity: block.settings.option_1_quantity,
              price: option_1_price,
              compare_price: option_1_compare_price,
              amount_saved: option_1_price_difference,
              amount_saved_rounded: option_1_price_difference_rounded,
              price_each: option_1_price_each,
              compare_price_each: option_1_compare_price_each,
              percentage_saved: option_1_percentage_saved
            %}
           {% if block.settings.style == 'normal' and block.settings.option_1_badge_style == '6' or block.settings.style == 'normal' and block.settings.option_1_badge_style == '7' %}
              </span>
            {% endif %}
          </p>
        {% endif %}
        <div class="quantity-break__image-and-content">
          {% if block.settings.option_1_image != blank %}
            <div class="quantity-break__image">
              <img
                src="{{ block.settings.option_1_image | image_url }}"
                alt="{{ block.settings.option_1_image.alt }}"
                width="auto"
                height="auto"
                loading="lazy"
              >
            </div>
          {% endif %}
          <div class="quantity-break__content">
            <div class="quantity-break__left">
              <span class="quantity-break__label">
                {%- if block.settings.option_1_label != blank -%}
                  <span
                    class="quantity-break__label-text dynamic-price variant-price-update"
                    data-text="{{ block.settings.option_1_label }}"
                  >
                    {% render 'text-with-price',
                      text: block.settings.option_1_label,
                      quantity: block.settings.option_1_quantity,
                      price: option_1_price,
                      compare_price: option_1_compare_price,
                      amount_saved: option_1_price_difference,
                      amount_saved_rounded: option_1_price_difference_rounded,
                      price_each: option_1_price_each,
                      compare_price_each: option_1_compare_price_each,
                      percentage_saved: option_1_percentage_saved
                    %}
                  </span>
                {%- endif -%}
                {% if block.settings.option_1_benefit != blank %}
                  <span
                    class="quantity-break__benefit quantity-break__benefit--{{ block.settings.option_1_benefit_style }} accent-color-{{ block.settings.option_1_benefit_color }} dynamic-price variant-price-update"
                    data-text="{{ block.settings.option_1_benefit }}"
                  >
                    {% render 'text-with-price',
                      text: block.settings.option_1_benefit,
                      quantity: block.settings.option_1_quantity,
                      price: option_1_price,
                      compare_price: option_1_compare_price,
                      amount_saved: option_1_price_difference,
                      amount_saved_rounded: option_1_price_difference_rounded,
                      price_each: option_1_price_each,
                      compare_price_each: option_1_compare_price_each,
                      percentage_saved: option_1_percentage_saved
                    %}
                  </span>
                {% endif %}
              </span>
              {% if block.settings.option_1_caption != blank %}
                <span
                  class="quantity-break__caption dynamic-price variant-price-update"
                  data-text="{{ block.settings.option_1_caption }}"
                >
                  {% render 'text-with-price',
                    text: block.settings.option_1_caption,
                    quantity: block.settings.option_1_quantity,
                    price: option_1_price,
                    compare_price: option_1_compare_price,
                    amount_saved: option_1_price_difference,
                    amount_saved_rounded: option_1_price_difference_rounded,
                    price_each: option_1_price_each,
                    compare_price_each: option_1_compare_price_each,
                    percentage_saved: option_1_percentage_saved
                  %}
                </span>
              {% endif %}
            </div>
            <div class="quantity-break__right dynamic-price">
              {% if block.settings.option_1_price_text != blank %}
                <span
                  class="quantity-break__price variant-price-update"
                  data-text="{{ block.settings.option_1_price_text }}"
                >
                  {% render 'text-with-price',
                    text: block.settings.option_1_price_text,
                    quantity: block.settings.option_1_quantity,
                    price: option_1_price,
                    compare_price: option_1_compare_price,
                    amount_saved: option_1_price_difference,
                    amount_saved_rounded: option_1_price_difference_rounded,
                    price_each: option_1_price_each,
                    compare_price_each: option_1_compare_price_each,
                    percentage_saved: option_1_percentage_saved
                  %}
                </span>
              {% endif %}
              {% if block.settings.option_1_compare_price_text != blank %}
                <span
                  class="quantity-break__compare-price variant-price-update{% if option_1_compare_price <= option_1_price %} hidden{% endif %}"
                  data-text="{{ block.settings.option_1_compare_price_text }}"
                >
                  {% render 'text-with-price',
                    text: block.settings.option_1_compare_price_text,
                    quantity: block.settings.option_1_quantity,
                    price: option_1_price,
                    compare_price: option_1_compare_price,
                    amount_saved: option_1_price_difference,
                    amount_saved_rounded: option_1_price_difference_rounded,
                    price_each: option_1_price_each,
                    compare_price_each: option_1_compare_price_each,
                    percentage_saved: option_1_percentage_saved
                  %}
                </span>
              {% endif %}
            </div>

            {% if block.settings.style == 'normal' %}
              {% if block.settings.enable_extrainfoquantitybreaks %}
                <div class="quantity-break-extra-info">
                  <ul>
                    {% if block.settings.quantitybreaktext1 != blank %}
                      <li>{{ block.settings.quantitybreaktext1 }}</li>
                    {%- endif -%}
                    {% if block.settings.quantitybreaktext2 != blank %}
                      <li>{{ block.settings.quantitybreaktext2 }}</li>
                    {%- endif -%}

                    {% if block.settings.quantitybreaktext3 != blank %}
                      <li>{{ block.settings.quantitybreaktext3 }}</li>
                    {%- endif -%}

                    {% if block.settings.quantitybreaktext4 != blank %}
                      <li>{{ block.settings.quantitybreaktext4 }}</li>
                    {%- endif -%}
                  </ul>
                </div>
              {%- endif -%}
            {% endif %}
          </div>
        </div>
        {% if product.has_only_default_variant == false and block.settings.enable_variant_selectors %}
          {% if block.settings.option_1_quantity != 1 or block.settings.enable_variant_selectors_on_quantity_of_1 %}
            <div class="quantity-break__variants">
              {% assign has_variants = true %}
              {% if block.settings.pickers_label != blank %}
                <span class="quantity-break__variants__label">
                  {{ block.settings.pickers_label }}
                </span>
              {% endif %}
              {% for selectorItem in (1..block.settings.option_1_quantity) %}
                <div
                  class="quantity-break__selector-item quantity-break__selector-item--variant-images-{{ block.settings.variant_images_position }}"
                  data-select-index="{{ forloop.index0 }}"
                  data-selected-id="{{ product.selected_or_first_available_variant.id }}"
                >
                  <span class="quantity-break__selector-item__number">#{{ selectorItem }}</span>
                  {%- for option in product.options_with_values -%}
                    <div class="select select--small no-background color-{{ settings.pickers_color_scheme }} accent-color-{{ settings.pickers_overlay_color }} accent-2-color-{{ settings.pickers_text_color }}">
                      <select
                        class="quantity-break__variant-select select__select variant-dropdown"
                        name="options[{{ option.name | escape }}]"
                        data-product-id="{{ product.selected_or_first_available_variant.id }}"
                      >
                        {% for value in option.values %}
                          {%- liquid
                            assign option_class = ''
                            assign option_disabled = true
                            assign option_exists = false

                            for option1_name in variants_option1_arr
                              case option.position
                                when 1
                                  if variants_option1_arr[forloop.index0] == value
                                    assign option_exists = true
                                    if variants_available_arr[forloop.index0]
                                      assign option_disabled = false
                                    endif
                                  endif
                                when 2
                                  if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value
                                    assign option_exists = true
                                    if variants_available_arr[forloop.index0]
                                      assign option_disabled = false
                                    endif
                                  endif
                                when 3
                                  if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value
                                    assign option_exists = true
                                    if variants_available_arr[forloop.index0]
                                      assign option_disabled = false
                                    endif
                                  endif
                              endcase
                            endfor

                            if option_exists == false
                              assign option_class = 'non-existent'
                            elsif option_disabled == true
                              assign option_class = 'unavailable'
                            endif
                          -%}
                          <option
                            value="{{ value | escape }}"
                            {% if option.selected_value == value %}
                              selected="selected"
                            {% endif %}
                            class="{{ option_class }}"
                          >
                            {% if option_disabled -%}
                              {{- 'products.product.value_unavailable' | t: option_value: value -}}
                            {%- else -%}
                              {{- value -}}
                            {%- endif %}
                          </option>
                        {% endfor %}
                      </select>
                      {% render 'icon-caret' %}
                    </div>
                  {%- endfor -%}
                {% if block.settings.show_selected_variant_images %}
                        <div class="quantity-break__selector-item__image media media--transparent">
                          <img
                            src="{{ product.selected_or_first_available_variant.featured_image | image_url: width: 600 }}"
                            alt="{{ product.selected_or_first_available_variant.featured_image.alt }}"
                            width="auto"
                            height="auto"
                            loading="lazy"
                          >
                        </div>
                      {% endif %}
                </div>
              {% endfor %}
            </div>
          {% endif %}
        {% endif %}
      </label>
     {% if block.settings.style == 'normal' %}
  {% if block.settings.freegift1 and block.settings.labeltext != blank or block.settings.freegift1 and block.settings.labeltext_2 != blank or block.settings.freegift1 and block.settings.labeltext_3 != blank or block.settings.freegift1 and block.settings.labeltext_4 != blank %}
  <div class="swatch-product-free--addon add-border">

    {% assign label_count = 0 %}
    {% if block.settings.labeltext != blank %}{% assign label_count = label_count | plus: 1 %}{% endif %}
    {% if block.settings.labeltext_2 != blank %}{% assign label_count = label_count | plus: 1 %}{% endif %}
    {% if block.settings.labeltext_3 != blank %}{% assign label_count = label_count | plus: 1 %}{% endif %}
    {% if block.settings.labeltext_4 != blank %}{% assign label_count = label_count | plus: 1 %}{% endif %}

    {% for i in (1..4) %}
      {% if i == 1 %}
        {% assign giftimage = block.settings.giftimage %}
        {% assign labeltext = block.settings.labeltext %}
        {% assign strikethrough_text = block.settings.strikethrough_text %}
        {% assign show_timer = block.settings.show_timer %}
        {% assign end_date = block.settings.end_date %}
        {% assign reset_hours = block.settings.reset_hours %}
        {% assign reset_minutes = block.settings.reset_minutes %}
      {% elsif i == 2 %}
        {% assign giftimage = block.settings.giftimage_2 %}
        {% assign labeltext = block.settings.labeltext_2 %}
        {% assign strikethrough_text = block.settings.strikethrough_text_2 %}
        {% assign show_timer = false %}
      {% elsif i == 3 %}
        {% assign giftimage = block.settings.giftimage_3 %}
        {% assign labeltext = block.settings.labeltext_3 %}
        {% assign strikethrough_text = block.settings.strikethrough_text_3 %}
        {% assign show_timer = false %}
      {% elsif i == 4 %}
        {% assign giftimage = block.settings.giftimage_4 %}
        {% assign labeltext = block.settings.labeltext_4 %}
        {% assign strikethrough_text = block.settings.strikethrough_text_4 %}
        {% assign show_timer = false %}
      {% endif %}

      {% if labeltext != blank %}
      <div class="image-and-text-container"{% if i > 1 %} style="border-top: 1px white solid;"{% endif %}>
        <div class="image">
          {% if giftimage %}
          <img
            src="{{ giftimage | image_url }}"
            loading="lazy"
            style="width:50px; height:50px; margin-left: 10px;"
          >
          {% endif %}
        </div>
        <div class="text">
          <p>{{ labeltext }}</p>
          {% if show_timer and label_count == 1 %}
            <div
              class="countdown-timer"
              style="font-size:{{ block.settings.labeltextsize }}px;"
              data-timer-type="reset"
              data-end-date="{{ end_date }}"
              data-hours="{{ reset_hours }}"
              data-minutes="{{ reset_minutes }}"
              data-section-id="{{ section.id }}"
              data-block-id="{{ block.id }}"
            ></div>
          {% endif %}
        </div>
        {% if strikethrough_text != blank %}
          <div class="strikethrough-text">
            <span class="strikethrough">{{ strikethrough_text }}</span>
          </div>
        {% endif %}
      </div>
      {% endif %}
    {% endfor %}
  </div>

  <style>
    .swatch-product-free--addon .image-and-text-container {
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }
    .image-and-text-container .text {
      display: flex;
      gap: 5px;
      flex: 1;
    }
    .image-and-text-container p {
      margin: 0;
      font-size: {{ block.settings.labeltextsize }}px;
    }
    .image-and-text-container .text strong {
      font-weight: 700;
    }
    .strikethrough-text {
      margin-left: auto;
      padding-right: 10px;
    }
    .strikethrough {
      text-decoration: line-through;
      font-size: {{ block.settings.labeltextsize }}px;
      color: {{ block.settings.textcolor }};
      opacity: 0.7;
    }
    label[for=quantity1] {
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
      border-bottom: 0px;
    }
  </style>
  {% endif %}
{% endif %}

    {% endif %}
    {% if block.settings.option_2_quantity != 0 %}
      {% liquid
        assign percentage_discount = block.settings.option_2_percentage_off_text | plus: 0
        assign percentage_left = 100 | minus: percentage_discount | divided_by: 100.00
        assign fixed_amount_off = block.settings.option_2_fixed_amount_off | times: 100
        assign option_2_price = price | times: block.settings.option_2_quantity | times: percentage_left | minus: fixed_amount_off

        assign compare_price = price
        if block.settings.option_2_compare_price == 'compare_price' and product.selected_or_first_available_variant.compare_at_price > price
          assign compare_price = product.selected_or_first_available_variant.compare_at_price
        endif
        assign option_2_compare_price = compare_price | times: block.settings.option_2_quantity

        assign option_2_price_difference = option_2_compare_price | minus: option_2_price
        assign option_2_price_difference_rounded = option_2_price_difference | divided_by: 100.00 | round | times: 100
        assign option_2_price_each = option_2_price | divided_by: block.settings.option_2_quantity
        assign option_2_compare_price_each = option_2_compare_price | divided_by: block.settings.option_2_quantity
        assign option_2_percentage_saved = option_2_compare_price | minus: option_2_price | times: 100 | divided_by: option_2_compare_price | floor
      %}
      <input
        id="quantity2"
        aria-label="Quantity"
        type="radio"
        name="quantity"
        value="{{ block.settings.option_2_quantity }}"
        form="{{ product_form_id }}"
        {% if block.settings.preselected == 'option_2' %}
          checked
        {% endif %}
        data-input="input_2"
      >
      <label
        for="quantity2"
        class="quantity-break{% if block.settings.option_2_badge != blank %} quantity-break--badge{% else %} quantity-break--no-badge{% endif %} quantity-break--badge-style-{{ block.settings.option_2_badge_style }} quantity-break--benefit-{{ block.settings.option_2_benefit_position }}"
        data-quantity="{{ block.settings.option_2_quantity }}"
        data-input="input_2"
        data-percentage-left="{{ percentage_left }}"
        data-fixed-discount="{{ fixed_amount_off }}"
      >
        {% if block.settings.enable_sold_out and block.settings.sold_out_option == 'option_2' %}
    <div class="quantity-break__sold-out-overlay">
      <div class="sold-out-message">{{ block.settings.sold_out_message }}</div>
    </div>
  {% endif %}
        {% if block.settings.option_2_badge != blank %}
          <p
            class="quantity-break__badge dynamic-price variant-price-update color-{{ block.settings.option_2_badge_color }}{% if block.settings.enable_badge_shine %} badge-shine{% endif %}"
            data-text="{{ block.settings.option_2_badge }}"
          >
            {% if block.settings.style == 'normal' and block.settings.option_2_badge_style == '6' or block.settings.style == 'normal' and block.settings.option_2_badge_style == '7' %}

              <span class="quantity-break__badge-inner">
            {% endif %}
            {% render 'text-with-price',
              text: block.settings.option_2_badge,
              quantity: block.settings.option_2_quantity,
              price: option_2_price,
              compare_price: option_2_compare_price,
              amount_saved: option_2_price_difference,
              amount_saved_rounded: option_2_price_difference_rounded,
              price_each: option_2_price_each,
              compare_price_each: option_2_compare_price_each,
              percentage_saved: option_2_percentage_saved
            %}
           {% if block.settings.style == 'normal' and block.settings.option_2_badge_style == '6' or block.settings.style == 'normal' and block.settings.option_2_badge_style == '7' %}

              </span>
            {% endif %}
          </p>
        {% endif %}
        <div class="quantity-break__image-and-content">
          {% if block.settings.option_2_image != blank %}
            <div class="quantity-break__image">
              <img
                src="{{ block.settings.option_2_image | image_url }}"
                alt="{{ block.settings.option_2_image.alt }}"
                width="auto"
                height="auto"
                loading="lazy"
              >
            </div>
          {% endif %}
          <div class="quantity-break__content">
            <div class="quantity-break__left">
              <span class="quantity-break__label">
                {%- if block.settings.option_2_label != blank -%}
                  <span
                    class="quantity-break__label-text dynamic-price variant-price-update"
                    data-text="{{ block.settings.option_2_label }}"
                  >
                    {% render 'text-with-price',
                      text: block.settings.option_2_label,
                      quantity: block.settings.option_2_quantity,
                      price: option_2_price,
                      compare_price: option_2_compare_price,
                      amount_saved: option_2_price_difference,
                      amount_saved_rounded: option_2_price_difference_rounded,
                      price_each: option_2_price_each,
                      compare_price_each: option_2_compare_price_each,
                      percentage_saved: option_2_percentage_saved
                    %}
                  </span>
                {%- endif -%}
                {% if block.settings.option_2_benefit != blank %}
                  <span
                    class="quantity-break__benefit quantity-break__benefit--{{ block.settings.option_2_benefit_style }} accent-color-{{ block.settings.option_2_benefit_color }} dynamic-price variant-price-update"
                    data-text="{{ block.settings.option_2_benefit }}"
                  >
                    {% render 'text-with-price',
                      text: block.settings.option_2_benefit,
                      quantity: block.settings.option_2_quantity,
                      price: option_2_price,
                      compare_price: option_2_compare_price,
                      amount_saved: option_2_price_difference,
                      amount_saved_rounded: option_2_price_difference_rounded,
                      price_each: option_2_price_each,
                      compare_price_each: option_2_compare_price_each,
                      percentage_saved: option_2_percentage_saved
                    %}
                  </span>
                {% endif %}
              </span>
              {% if block.settings.option_2_caption != blank %}
                <span
                  class="quantity-break__caption dynamic-price variant-price-update"
                  data-text="{{ block.settings.option_2_caption }}"
                >
                  {% render 'text-with-price',
                    text: block.settings.option_2_caption,
                    quantity: block.settings.option_2_quantity,
                    price: option_2_price,
                    compare_price: option_2_compare_price,
                    amount_saved: option_2_price_difference,
                    amount_saved_rounded: option_2_price_difference_rounded,
                    price_each: option_2_price_each,
                    compare_price_each: option_2_compare_price_each,
                    percentage_saved: option_2_percentage_saved
                  %}
                </span>
              {% endif %}
            </div>
            <div class="quantity-break__right dynamic-price">
              {% if block.settings.option_2_price_text != blank %}
                <span
                  class="quantity-break__price variant-price-update"
                  data-text="{{ block.settings.option_2_price_text }}"
                >
                  {% render 'text-with-price',
                    text: block.settings.option_2_price_text,
                    quantity: block.settings.option_2_quantity,
                    price: option_2_price,
                    compare_price: option_2_compare_price,
                    amount_saved: option_2_price_difference,
                    amount_saved_rounded: option_2_price_difference_rounded,
                    price_each: option_2_price_each,
                    compare_price_each: option_2_compare_price_each,
                    percentage_saved: option_2_percentage_saved
                  %}
                </span>
              {% endif %}
              {% if block.settings.option_2_compare_price_text != blank %}
                <span
                  class="quantity-break__compare-price variant-price-update{% if option_2_compare_price <= option_2_price %} hidden{% endif %}"
                  data-text="{{ block.settings.option_2_compare_price_text }}"
                >
                  {% render 'text-with-price',
                    text: block.settings.option_2_compare_price_text,
                    quantity: block.settings.option_2_quantity,
                    price: option_2_price,
                    compare_price: option_2_compare_price,
                    amount_saved: option_2_price_difference,
                    amount_saved_rounded: option_2_price_difference_rounded,
                    price_each: option_2_price_each,
                    compare_price_each: option_2_compare_price_each,
                    percentage_saved: option_2_percentage_saved
                  %}
                </span>
              {%- endif -%}
            </div>

            {% if block.settings.style == 'normal' %}
              {% if block.settings.enable_extrainfoquantitybreaks2 %}
                <div class="quantity-break-extra-info">
                  <ul>
                    {% if block.settings.quantitybreaktext5 != blank %}
                      <li>{{ block.settings.quantitybreaktext5 }}</li>
                    {%- endif -%}
                    {% if block.settings.quantitybreaktext6 != blank %}
                      <li>{{ block.settings.quantitybreaktext6 }}</li>
                    {%- endif -%}

                    {% if block.settings.quantitybreaktext7 != blank %}
                      <li>{{ block.settings.quantitybreaktext7 }}</li>
                    {%- endif -%}

                    {% if block.settings.quantitybreaktext8 != blank %}
                      <li>{{ block.settings.quantitybreaktext8 }}</li>
                    {%- endif -%}
                  </ul>
                </div>
              {%- endif -%}
            {%- endif -%}
          </div>
        </div>
        {% if product.has_only_default_variant == false and block.settings.enable_variant_selectors %}
          {% if block.settings.option_2_quantity != 1 or block.settings.enable_variant_selectors_on_quantity_of_1 %}
            <div class="quantity-break__variants">
              {% assign has_variants = true %}
              {% if block.settings.pickers_label != blank %}
                <span class="quantity-break__variants__label">
                  {{ block.settings.pickers_label }}
                </span>
              {% endif %}
              {% for selectorItem in (1..block.settings.option_2_quantity) %}
                <div
                  class="quantity-break__selector-item quantity-break__selector-item--variant-images-{{ block.settings.variant_images_position }}"
                  data-select-index="{{ forloop.index0 }}"
                  data-selected-id="{{ product.selected_or_first_available_variant.id }}"
                >
                  <span class="quantity-break__selector-item__number">#{{ selectorItem }}</span>
                  {%- for option in product.options_with_values -%}
                    <div class="select select--small no-background color-{{ settings.pickers_color_scheme }} accent-color-{{ settings.pickers_overlay_color }}  accent-2-color-{{ settings.pickers_text_color }}">
                      <select
                        class="quantity-break__variant-select select__select variant-dropdown"
                        name="options[{{ option.name | escape }}]"
                        data-product-id="{{ product.selected_or_first_available_variant.id }}"
                      >
                        {% for value in option.values %}
                          {%- liquid
                            assign option_class = ''
                            assign option_disabled = true
                            assign option_exists = false

                            for option1_name in variants_option1_arr
                              case option.position
                                when 1
                                  if variants_option1_arr[forloop.index0] == value
                                    assign option_exists = true
                                    if variants_available_arr[forloop.index0]
                                      assign option_disabled = false
                                    endif
                                  endif
                                when 2
                                  if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value
                                    assign option_exists = true
                                    if variants_available_arr[forloop.index0]
                                      assign option_disabled = false
                                    endif
                                  endif
                                when 3
                                  if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value
                                    assign option_exists = true
                                    if variants_available_arr[forloop.index0]
                                      assign option_disabled = false
                                    endif
                                  endif
                              endcase
                            endfor

                            if option_exists == false
                              assign option_class = 'non-existent'
                            elsif option_disabled == true
                              assign option_class = 'unavailable'
                            endif
                          -%}
                          <option
                            value="{{ value | escape }}"
                            {% if option.selected_value == value %}
                              selected="selected"
                            {% endif %}
                            class="{{ option_class }}"
                          >
                            {% if option_disabled -%}
                              {{- 'products.product.value_unavailable' | t: option_value: value -}}
                            {%- else -%}
                              {{- value -}}
                            {%- endif %}
                          </option>
                        {% endfor %}
                      </select>
                      {% render 'icon-caret' %}
                    </div>
                  {%- endfor -%}
                {% if block.settings.show_selected_variant_images %}
                        <div class="quantity-break__selector-item__image media media--transparent">
                          <img
                            src="{{ product.selected_or_first_available_variant.featured_image | image_url: width: 600 }}"
                            alt="{{ product.selected_or_first_available_variant.featured_image.alt }}"
                            width="auto"
                            height="auto"
                            loading="lazy"
                          >
                        </div>
                      {% endif %}
                </div>
              {% endfor %}
            </div>
          {% endif %}
        {% endif %}
      </label>
      {% if block.settings.style == 'normal' %}
        {% if block.settings.freegift2 and block.settings.labeltext2 != blank or block.settings.freegift2 and block.settings.labeltext2_2 != blank or block.settings.freegift2 and block.settings.labeltext2_3 != blank or block.settings.freegift2 and block.settings.labeltext2_4 != blank %}
    <div class="swatch-product-free--addon add-border">
     
      {% comment %}
  Count how many labels have content first
{% endcomment %}
{% assign label_count = 0 %}
{% if block.settings.labeltext2 != blank %}{% assign label_count = label_count | plus: 1 %}{% endif %}
{% if block.settings.labeltext2_2 != blank %}{% assign label_count = label_count | plus: 1 %}{% endif %}
{% if block.settings.labeltext2_3 != blank %}{% assign label_count = label_count | plus: 1 %}{% endif %}
{% if block.settings.labeltext2_4 != blank %}{% assign label_count = label_count | plus: 1 %}{% endif %}

{% comment %}
  Loop through labels 1-4, only showing those that have content
  Timer only shows if there's exactly 1 label
{% endcomment %}

{% for i in (1..4) %}
  {% comment %} Build dynamic setting names {% endcomment %}
  {% if i == 1 %}
    {% assign giftimage = block.settings.giftimage2 %}
    {% assign labeltext = block.settings.labeltext2 %}
    {% assign show_timer = block.settings.show_timer2 %}
    {% assign end_date = block.settings.end_date2 %}
    {% assign reset_hours = block.settings.reset_hours2 %}
    {% assign reset_minutes = block.settings.reset_minutes2 %}
    {% assign strikethrough_text = block.settings.strikethrough_text2 %}
  {% elsif i == 2 %}
    {% assign giftimage = block.settings.giftimage2_2 %}
    {% assign labeltext = block.settings.labeltext2_2 %}
    {% assign show_timer = false %}
    {% assign strikethrough_text = block.settings.strikethrough_text2_2 %}
  {% elsif i == 3 %}
    {% assign giftimage = block.settings.giftimage2_3 %}
    {% assign labeltext = block.settings.labeltext2_3 %}
    {% assign show_timer = false %}
    {% assign strikethrough_text = block.settings.strikethrough_text2_3 %}
  {% elsif i == 4 %}
    {% assign giftimage = block.settings.giftimage2_4 %}
    {% assign labeltext = block.settings.labeltext2_4 %}
    {% assign show_timer = false %}
    {% assign strikethrough_text = block.settings.strikethrough_text2_4 %}
  {% endif %}

  {% comment %} Only render if there's content {% endcomment %}
  {% if labeltext != blank %}
    <div class="image-and-text-container"{% if i > 1 %} style="border-top: 1px white solid;"{% endif %}>
      <div class="image">
        {% if giftimage %}
          <img
            src="{{ giftimage | image_url }}"
            loading="lazy"
            style="width:50px; height:50px; margin-left: 10px;"
          >
        {% endif %}
      </div>
      <div class="text">
        <p>{{ labeltext }}</p>
        {% if show_timer and label_count == 1 %}
          <div
            class="countdown-timer"
            style="font-size:{{ block.settings.labeltextsize }}px;"
            data-timer-type="reset"
            data-end-date="{{ end_date }}"
            data-hours="{{ reset_hours }}"
            data-minutes="{{ reset_minutes }}"
            data-section-id="{{ section.id }}"
            data-block-id="{{ block.id }}"
          ></div>
        {% endif %}
      </div>
      {% if strikethrough_text != blank %}
        <div class="strikethrough-text">
          <span class="strikethrough">{{ strikethrough_text }}</span>
        </div>
      {% endif %}
    </div>
  {% endif %}
{% endfor %}
    </div>
    <style>
        .swatch-product-free--addon .image-and-text-container {
          width: 100%;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
          gap: 10px;
      }
        .image-and-text-container .text {
          display: flex;
          gap: 5px;
          flex: 1;
        }
        .image-and-text-container p {
          margin: 0;
           font-size: {{ block.settings.labeltextsize }}px;
        }
        .image-and-text-container .text strong {
          font-weight: 700;
        }
        .strikethrough-text {
          margin-left: auto;
          padding-right: 10px;
        }
      label[for=quantity2] {
          border-bottom-left-radius: 0px;
          border-bottom-right-radius: 0px;
          border-bottom: 0px;
      }
    </style>
  {% endif %}
{% endif %}
    {% endif %}
    {% if block.settings.option_3_quantity != 0 %}
      {% liquid
        assign percentage_discount = block.settings.option_3_percentage_off_text | plus: 0
        assign percentage_left = 100 | minus: percentage_discount | divided_by: 100.00
        assign fixed_amount_off = block.settings.option_3_fixed_amount_off | times: 100
        assign option_3_price = price | times: block.settings.option_3_quantity | times: percentage_left | minus: fixed_amount_off

        assign compare_price = price
        if block.settings.option_3_compare_price == 'compare_price' and product.selected_or_first_available_variant.compare_at_price > price
          assign compare_price = product.selected_or_first_available_variant.compare_at_price
        endif
        assign option_3_compare_price = compare_price | times: block.settings.option_3_quantity

        assign option_3_price_difference = option_3_compare_price | minus: option_3_price
        assign option_3_price_difference_rounded = option_3_price_difference | divided_by: 100.00 | round | times: 100
        assign option_3_price_each = option_3_price | divided_by: block.settings.option_3_quantity
        assign option_3_compare_price_each = option_3_compare_price | divided_by: block.settings.option_3_quantity
        assign option_3_percentage_saved = option_3_compare_price | minus: option_3_price | times: 100 | divided_by: option_3_compare_price | floor
      %}
      <input
        id="quantity3"
        aria-label="Quantity"
        type="radio"
        name="quantity"
        value="{{ block.settings.option_3_quantity }}"
        form="{{ product_form_id }}"
        {% if block.settings.preselected == 'option_3' %}
          checked
        {% endif %}
        data-input="input_3"
      >
      <label
        for="quantity3"
        class="quantity-break{% if block.settings.option_3_badge != blank %} quantity-break--badge{% else %} quantity-break--no-badge{% endif %} quantity-break--badge-style-{{ block.settings.option_3_badge_style }} quantity-break--benefit-{{ block.settings.option_3_benefit_position }}"
        data-quantity="{{ block.settings.option_3_quantity }}"
        data-input="input_3"
        data-percentage-left="{{ percentage_left }}"
        data-fixed-discount="{{ fixed_amount_off }}"
      >
        {% if block.settings.enable_sold_out and block.settings.sold_out_option == 'option_3' %}
    <div class="quantity-break__sold-out-overlay">
      <div class="sold-out-message">{{ block.settings.sold_out_message }}</div>
    </div>
  {% endif %}
        {% if block.settings.option_3_badge != blank %}
          <p
            class="quantity-break__badge dynamic-price variant-price-update color-{{ block.settings.option_3_badge_color }}{% if block.settings.enable_badge_shine %} badge-shine{% endif %}"
            data-text="{{ block.settings.option_3_badge }}"
          >
            {% if block.settings.style == 'normal' and block.settings.option_3_badge_style == '6' or block.settings.style == 'normal' and block.settings.option_3_badge_style == '7' %}

              <span class="quantity-break__badge-inner">
            {% endif %}
            {% render 'text-with-price',
              text: block.settings.option_3_badge,
              quantity: block.settings.option_3_quantity,
              price: option_3_price,
              compare_price: option_3_compare_price,
              amount_saved: option_3_price_difference,
              amount_saved_rounded: option_3_price_difference_rounded,
              price_each: option_3_price_each,
              compare_price_each: option_3_compare_price_each,
              percentage_saved: option_3_percentage_saved
            %}
           {% if block.settings.style == 'normal' and block.settings.option_3_badge_style == '6' or block.settings.style == 'normal' and block.settings.option_3_badge_style == '7' %}

              </span>
            {% endif %}
          </p>
        {% endif %}
        <div class="quantity-break__image-and-content">
          {% if block.settings.option_3_image != blank %}
            <div class="quantity-break__image">
              <img
                src="{{ block.settings.option_3_image | image_url }}"
                alt="{{ block.settings.option_3_image.alt }}"
                width="auto"
                height="auto"
                loading="lazy"
              >
            </div>
          {% endif %}
          <div class="quantity-break__content">
            <div class="quantity-break__left">
              <span class="quantity-break__label">
                {%- if block.settings.option_3_label != blank -%}
                  <span
                    class="quantity-break__label-text dynamic-price variant-price-update"
                    data-text="{{ block.settings.option_3_label }}"
                  >
                    {% render 'text-with-price',
                      text: block.settings.option_3_label,
                      quantity: block.settings.option_3_quantity,
                      price: option_3_price,
                      compare_price: option_3_compare_price,
                      amount_saved: option_3_price_difference,
                      amount_saved_rounded: option_3_price_difference_rounded,
                      price_each: option_3_price_each,
                      compare_price_each: option_3_compare_price_each,
                      percentage_saved: option_3_percentage_saved
                    %}
                  </span>
                {%- endif -%}
                {% if block.settings.option_3_benefit != blank %}
                  <span
                    class="quantity-break__benefit quantity-break__benefit--{{ block.settings.option_3_benefit_style }} accent-color-{{ block.settings.option_3_benefit_color }} dynamic-price variant-price-update"
                    data-text="{{ block.settings.option_3_benefit }}"
                  >
                    {% render 'text-with-price',
                      text: block.settings.option_3_benefit,
                      quantity: block.settings.option_3_quantity,
                      price: option_3_price,
                      compare_price: option_3_compare_price,
                      amount_saved: option_3_price_difference,
                      amount_saved_rounded: option_3_price_difference_rounded,
                      price_each: option_3_price_each,
                      compare_price_each: option_3_compare_price_each,
                      percentage_saved: option_3_percentage_saved
                    %}
                  </span>
                {% endif %}
              </span>
              {% if block.settings.option_3_caption != blank %}
                <span
                  class="quantity-break__caption dynamic-price variant-price-update"
                  data-text="{{ block.settings.option_3_caption }}"
                >
                  {% render 'text-with-price',
                    text: block.settings.option_3_caption,
                    quantity: block.settings.option_3_quantity,
                    price: option_3_price,
                    compare_price: option_3_compare_price,
                    amount_saved: option_3_price_difference,
                    amount_saved_rounded: option_3_price_difference_rounded,
                    price_each: option_3_price_each,
                    compare_price_each: option_3_compare_price_each,
                    percentage_saved: option_3_percentage_saved
                  %}
                </span>
              {% endif %}
            </div>
            <div class="quantity-break__right dynamic-price">
              {% if block.settings.option_3_price_text != blank %}
                <span
                  class="quantity-break__price variant-price-update"
                  data-text="{{ block.settings.option_3_price_text }}"
                >
                  {% render 'text-with-price',
                    text: block.settings.option_3_price_text,
                    quantity: block.settings.option_3_quantity,
                    price: option_3_price,
                    compare_price: option_3_compare_price,
                    amount_saved: option_3_price_difference,
                    amount_saved_rounded: option_3_price_difference_rounded,
                    price_each: option_3_price_each,
                    compare_price_each: option_3_compare_price_each,
                    percentage_saved: option_3_percentage_saved
                  %}
                </span>
              {% endif %}
              {% if block.settings.option_3_compare_price_text != blank %}
                <span
                  class="quantity-break__compare-price variant-price-update{% if option_3_compare_price <= option_3_price %} hidden{% endif %}"
                  data-text="{{ block.settings.option_3_compare_price_text }}"
                >
                  {% render 'text-with-price',
                    text: block.settings.option_3_compare_price_text,
                    quantity: block.settings.option_3_quantity,
                    price: option_3_price,
                    compare_price: option_3_compare_price,
                    amount_saved: option_3_price_difference,
                    amount_saved_rounded: option_3_price_difference_rounded,
                    price_each: option_3_price_each,
                    compare_price_each: option_3_compare_price_each,
                    percentage_saved: option_3_percentage_saved
                  %}
                </span>
              {%- endif -%}
            </div>

            {% if block.settings.style == 'normal' %}
              {% if block.settings.enable_extrainfoquantitybreaks3 %}
                <div class="quantity-break-extra-info">
                  <ul>
                    {% if block.settings.quantitybreaktext9 != blank %}
                      <li>{{ block.settings.quantitybreaktext9 }}</li>
                    {%- endif -%}
                    {% if block.settings.quantitybreaktext10 != blank %}
                      <li>{{ block.settings.quantitybreaktext10 }}</li>
                    {%- endif -%}

                    {% if block.settings.quantitybreaktext11 != blank %}
                      <li>{{ block.settings.quantitybreaktext11 }}</li>
                    {%- endif -%}

                    {% if block.settings.quantitybreaktext12 != blank %}
                      <li>{{ block.settings.quantitybreaktext12 }}</li>
                    {%- endif -%}
                  </ul>
                </div>
              {%- endif -%}
            {%- endif -%}
          </div>
        </div>
        {% if product.has_only_default_variant == false and block.settings.enable_variant_selectors %}
          {% if block.settings.option_3_quantity != 1 or block.settings.enable_variant_selectors_on_quantity_of_1 %}
            <div class="quantity-break__variants">
              {% assign has_variants = true %}
              {% if block.settings.pickers_label != blank %}
                <span class="quantity-break__variants__label">
                  {{ block.settings.pickers_label }}
                </span>
              {% endif %}
              {% for selectorItem in (1..block.settings.option_3_quantity) %}
                <div
                  class="quantity-break__selector-item quantity-break__selector-item--variant-images-{{ block.settings.variant_images_position }}"
                  data-select-index="{{ forloop.index0 }}"
                  data-selected-id="{{ product.selected_or_first_available_variant.id }}"
                >
                  <span class="quantity-break__selector-item__number">#{{ selectorItem }}</span>
                  {%- for option in product.options_with_values -%}
                    <div class="select select--small no-background color-{{ settings.pickers_color_scheme }} accent-color-{{ settings.pickers_overlay_color }}  accent-2-color-{{ settings.pickers_text_color }}">
                      <select
                        class="quantity-break__variant-select select__select variant-dropdown"
                        name="options[{{ option.name | escape }}]"
                        data-product-id="{{ product.selected_or_first_available_variant.id }}"
                      >
                        {% for value in option.values %}
                          {%- liquid
                            assign option_class = ''
                            assign option_disabled = true
                            assign option_exists = false

                            for option1_name in variants_option1_arr
                              case option.position
                                when 1
                                  if variants_option1_arr[forloop.index0] == value
                                    assign option_exists = true
                                    if variants_available_arr[forloop.index0]
                                      assign option_disabled = false
                                    endif
                                  endif
                                when 2
                                  if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value
                                    assign option_exists = true
                                    if variants_available_arr[forloop.index0]
                                      assign option_disabled = false
                                    endif
                                  endif
                                when 3
                                  if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value
                                    assign option_exists = true
                                    if variants_available_arr[forloop.index0]
                                      assign option_disabled = false
                                    endif
                                  endif
                              endcase
                            endfor

                            if option_exists == false
                              assign option_class = 'non-existent'
                            elsif option_disabled == true
                              assign option_class = 'unavailable'
                            endif
                          -%}
                          <option
                            value="{{ value | escape }}"
                            {% if option.selected_value == value %}
                              selected="selected"
                            {% endif %}
                            class="{{ option_class }}"
                          >
                            {% if option_disabled -%}
                              {{- 'products.product.value_unavailable' | t: option_value: value -}}
                            {%- else -%}
                              {{- value -}}
                            {%- endif %}
                          </option>
                        {% endfor %}
                      </select>
                      {% render 'icon-caret' %}
                    </div>
                  {%- endfor -%}
                {% if block.settings.show_selected_variant_images %}
                        <div class="quantity-break__selector-item__image media media--transparent">
                          <img
                            src="{{ product.selected_or_first_available_variant.featured_image | image_url: width: 600 }}"
                            alt="{{ product.selected_or_first_available_variant.featured_image.alt }}"
                            width="auto"
                            height="auto"
                            loading="lazy"
                          >
                        </div>
                      {% endif %}
                </div>
              {% endfor %}
            </div>
          {% endif %}
        {% endif %}
      </label>
      {% if block.settings.style == 'normal' %}
        {% if block.settings.freegift3 and block.settings.labeltext3 != blank or block.settings.freegift3 and block.settings.labeltext3_2 != blank or block.settings.freegift3 and block.settings.labeltext3_3 != blank or block.settings.freegift3 and block.settings.labeltext3_4 != blank %}
    <div class="swatch-product-free--addon add-border">
    
      {% comment %}
  Count how many labels have content first
{% endcomment %}
{% assign label_count = 0 %}
{% if block.settings.labeltext3 != blank %}{% assign label_count = label_count | plus: 1 %}{% endif %}
{% if block.settings.labeltext3_2 != blank %}{% assign label_count = label_count | plus: 1 %}{% endif %}
{% if block.settings.labeltext3_3 != blank %}{% assign label_count = label_count | plus: 1 %}{% endif %}
{% if block.settings.labeltext3_4 != blank %}{% assign label_count = label_count | plus: 1 %}{% endif %}

{% comment %}
  Loop through labels 1-4, only showing those that have content
  Timer only shows if there's exactly 1 label
{% endcomment %}

{% for i in (1..4) %}
  {% comment %} Build dynamic setting names {% endcomment %}
  {% if i == 1 %}
    {% assign giftimage = block.settings.giftimage3 %}
    {% assign labeltext = block.settings.labeltext3 %}
    {% assign show_timer = block.settings.show_timer3 %}
    {% assign end_date = block.settings.end_date3 %}
    {% assign reset_hours = block.settings.reset_hours3 %}
    {% assign reset_minutes = block.settings.reset_minutes3 %}
    {% assign strikethrough_text = block.settings.strikethrough_text3 %}
  {% elsif i == 2 %}
    {% assign giftimage = block.settings.giftimage3_2 %}
    {% assign labeltext = block.settings.labeltext3_2 %}
    {% assign show_timer = false %}
    {% assign strikethrough_text = block.settings.strikethrough_text3_2 %}
  {% elsif i == 3 %}
    {% assign giftimage = block.settings.giftimage3_3 %}
    {% assign labeltext = block.settings.labeltext3_3 %}
    {% assign show_timer = false %}
    {% assign strikethrough_text = block.settings.strikethrough_text3_3 %}
  {% elsif i == 4 %}
    {% assign giftimage = block.settings.giftimage3_4 %}
    {% assign labeltext = block.settings.labeltext3_4 %}
    {% assign show_timer = false %}
    {% assign strikethrough_text = block.settings.strikethrough_text3_4 %}
  {% endif %}

  {% comment %} Only render if there's content {% endcomment %}
  {% if labeltext != blank %}
    <div class="image-and-text-container"{% if i > 1 %} style="border-top: 1px white solid;"{% endif %}>
      <div class="image">
        {% if giftimage %}
          <img
            src="{{ giftimage | image_url }}"
            loading="lazy"
            style="width:50px; height:50px; margin-left: 10px;"
          >
        {% endif %}
      </div>
      <div class="text">
        <p>{{ labeltext }}</p>
        {% if show_timer and label_count == 1 %}
          <div
            class="countdown-timer"
            data-timer-type="reset"
            data-end-date="{{ end_date }}"
            data-hours="{{ reset_hours }}"
            data-minutes="{{ reset_minutes }}"
            data-section-id="{{ section.id }}"
            data-block-id="{{ block.id }}"
          ></div>
        {% endif %}
      </div>
      {% if strikethrough_text != blank %}
        <div class="strikethrough-text">
          <span class="strikethrough">{{ strikethrough_text }}</span>
        </div>
      {% endif %}
    </div>
  {% endif %}
{% endfor %}
    </div>
    <style>
        .swatch-product-free--addon .image-and-text-container {
          width: 100%;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
          gap: 10px;
      }
        .image-and-text-container .text {
          display: flex;
          gap: 5px;
          flex: 1;
        }
        .image-and-text-container p {
          margin: 0;
           font-size: {{ block.settings.labeltextsize }}px;
        }
        .image-and-text-container .text strong {
          font-weight: 700;
        }
        .strikethrough-text {
          margin-left: auto;
          padding-right: 10px;
        }
      label[for=quantity3] {
          border-bottom-left-radius: 0px;
          border-bottom-right-radius: 0px;
          border-bottom: 0px;
      }
    </style>
  {% endif %}
{% endif %}
    {% endif %}
    {% if block.settings.option_4_quantity != 0 %}
      {% liquid
        assign percentage_discount = block.settings.option_4_percentage_off_text | plus: 0
        assign percentage_left = 100 | minus: percentage_discount | divided_by: 100.00
        assign fixed_amount_off = block.settings.option_4_fixed_amount_off | times: 100
        assign option_4_price = price | times: block.settings.option_4_quantity | times: percentage_left | minus: fixed_amount_off

        assign compare_price = product.selected_or_first_available_variant.price
        if block.settings.option_4_compare_price == 'compare_price' and product.selected_or_first_available_variant.compare_at_price > 0
          assign compare_price = product.selected_or_first_available_variant.compare_at_price
        endif
        assign option_4_compare_price = compare_price | times: block.settings.option_4_quantity

        assign option_4_price_difference = option_4_compare_price | minus: option_4_price
        assign option_4_price_difference_rounded = option_4_price_difference | divided_by: 100.00 | round | times: 100
        assign option_4_price_each = option_4_price | divided_by: block.settings.option_4_quantity
        assign option_4_compare_price_each = option_4_compare_price | divided_by: block.settings.option_4_quantity
        assign option_4_percentage_saved = option_4_compare_price | minus: option_4_price | times: 100 | divided_by: option_4_compare_price | floor
      %}
      <input
        id="quantity4"
        aria-label="Quantity"
        type="radio"
        name="quantity"
        value="{{ block.settings.option_4_quantity }}"
        form="{{ product_form_id }}"
        {% if block.settings.preselected == 'option_4' %}
          checked
        {% endif %}
        data-input="input_4"
      >
      <label
        for="quantity4"
        class="quantity-break{% if block.settings.option_4_badge != blank %} quantity-break--badge{% else %} quantity-break--no-badge{% endif %} quantity-break--badge-style-{{ block.settings.option_4_badge_style }} quantity-break--benefit-{{ block.settings.option_4_benefit_position }}"
        data-quantity="{{ block.settings.option_4_quantity }}"
        data-input="input_4"
        data-percentage-left="{{ percentage_left }}"
        data-fixed-discount="{{ fixed_amount_off }}"
      >
        {% if block.settings.enable_sold_out and block.settings.sold_out_option == 'option_4' %}
    <div class="quantity-break__sold-out-overlay">
      <div class="sold-out-message">{{ block.settings.sold_out_message }}</div>
    </div>
  {% endif %}
        {% if block.settings.option_4_badge != blank %}
          <p
            class="quantity-break__badge dynamic-price variant-price-update color-{{ block.settings.option_4_badge_color }}{% if block.settings.enable_badge_shine %} badge-shine{% endif %}"
            data-text="{{ block.settings.option_4_badge }}"
          >
          {% if block.settings.style == 'normal' and block.settings.option_4_badge_style == '6' or block.settings.style == 'normal' and block.settings.option_4_badge_style == '7' %}

              <span class="quantity-break__badge-inner">
            {% endif %}
            {% render 'text-with-price',
              text: block.settings.option_4_badge,
              quantity: block.settings.option_4_quantity,
              price: option_4_price,
              compare_price: option_4_compare_price,
              amount_saved: option_4_price_difference,
              amount_saved_rounded: option_4_price_difference_rounded,
              price_each: option_4_price_each,
              compare_price_each: option_4_compare_price_each,
              percentage_saved: option_4_percentage_saved
            %}
           {% if block.settings.style == 'normal' and block.settings.option_4_badge_style == '6' or block.settings.style == 'normal' and block.settings.option_4_badge_style == '7' %}

              </span>
            {% endif %}
          </p>
        {% endif %}
        <div class="quantity-break__image-and-content">
          {% if block.settings.option_4_image != blank %}
            <div class="quantity-break__image">
              <img
                src="{{ block.settings.option_4_image | image_url }}"
                alt="{{ block.settings.option_4_image.alt }}"
                width="auto"
                height="auto"
                loading="lazy"
              >
            </div>
          {% endif %}
          <div class="quantity-break__content">
            <div class="quantity-break__left">
              <span class="quantity-break__label">
                {%- if block.settings.option_4_label != blank -%}
                  <span
                    class="quantity-break__label-text dynamic-price variant-price-update"
                    data-text="{{ block.settings.option_4_label }}"
                  >
                    {% render 'text-with-price',
                      text: block.settings.option_4_label,
                      quantity: block.settings.option_4_quantity,
                      price: option_4_price,
                      compare_price: option_4_compare_price,
                      amount_saved: option_4_price_difference,
                      amount_saved_rounded: option_4_price_difference_rounded,
                      price_each: option_4_price_each,
                      compare_price_each: option_4_compare_price_each,
                      percentage_saved: option_4_percentage_saved
                    %}
                  </span>
                {%- endif -%}
                {% if block.settings.option_4_benefit != blank %}
                  <span
                    class="quantity-break__benefit quantity-break__benefit--{{ block.settings.option_4_benefit_style }} accent-color-{{ block.settings.option_4_benefit_color }} dynamic-price variant-price-update"
                    data-text="{{ block.settings.option_4_benefit }}"
                  >
                    {% render 'text-with-price',
                      text: block.settings.option_4_benefit,
                      quantity: block.settings.option_4_quantity,
                      price: option_4_price,
                      compare_price: option_4_compare_price,
                      amount_saved: option_4_price_difference,
                      amount_saved_rounded: option_4_price_difference_rounded,
                      price_each: option_4_price_each,
                      compare_price_each: option_4_compare_price_each,
                      percentage_saved: option_4_percentage_saved
                    %}
                  </span>
                {% endif %}
              </span>
              {% if block.settings.option_4_caption != blank %}
                <span
                  class="quantity-break__caption dynamic-price variant-price-update"
                  data-text="{{ block.settings.option_4_caption }}"
                >
                  {% render 'text-with-price',
                    text: block.settings.option_4_caption,
                    quantity: block.settings.option_4_quantity,
                    price: option_4_price,
                    compare_price: option_4_compare_price,
                    amount_saved: option_4_price_difference,
                    amount_saved_rounded: option_4_price_difference_rounded,
                    price_each: option_4_price_each,
                    compare_price_each: option_4_compare_price_each,
                    percentage_saved: option_4_percentage_saved
                  %}
                </span>
              {% endif %}
            </div>
            <div class="quantity-break__right dynamic-price">
              {% if block.settings.option_4_price_text != blank %}
                <span
                  class="quantity-break__price variant-price-update"
                  data-text="{{ block.settings.option_4_price_text }}"
                >
                  {% render 'text-with-price',
                    text: block.settings.option_4_price_text,
                    quantity: block.settings.option_4_quantity,
                    price: option_4_price,
                    compare_price: option_4_compare_price,
                    amount_saved: option_4_price_difference,
                    amount_saved_rounded: option_4_price_difference_rounded,
                    price_each: option_4_price_each,
                    compare_price_each: option_4_compare_price_each,
                    percentage_saved: option_4_percentage_saved
                  %}
                </span>
              {% endif %}
              {% if block.settings.option_4_compare_price_text != blank %}
                <span
                  class="quantity-break__compare-price variant-price-update{% if option_4_compare_price <= option_4_price %} hidden{% endif %}"
                  data-text="{{ block.settings.option_4_compare_price_text }}"
                >
                  {% render 'text-with-price',
                    text: block.settings.option_4_compare_price_text,
                    quantity: block.settings.option_4_quantity,
                    price: option_4_price,
                    compare_price: option_4_compare_price,
                    amount_saved: option_4_price_difference,
                    amount_saved_rounded: option_4_price_difference_rounded,
                    price_each: option_4_price_each,
                    compare_price_each: option_4_compare_price_each,
                    percentage_saved: option_4_percentage_saved
                  %}
                </span>
              {%- endif -%}
            </div>

            {% if block.settings.style == 'normal' %}
              {% if block.settings.enable_extrainfoquantitybreaks4 %}
                <div class="quantity-break-extra-info">
                  <ul>
                    {% if block.settings.quantitybreaktext13 != blank %}
                      <li>{{ block.settings.quantitybreaktext13 }}</li>
                    {%- endif -%}
                    {% if block.settings.quantitybreaktext14 != blank %}
                      <li>{{ block.settings.quantitybreaktext14 }}</li>
                    {%- endif -%}

                    {% if block.settings.quantitybreaktext15 != blank %}
                      <li>{{ block.settings.quantitybreaktext15 }}</li>
                    {%- endif -%}

                    {% if block.settings.quantitybreaktext16 != blank %}
                      <li>{{ block.settings.quantitybreaktext16 }}</li>
                    {%- endif -%}
                  </ul>
                </div>
              {%- endif -%}
            {%- endif -%}
          </div>
        </div>
        {% if product.has_only_default_variant == false and block.settings.enable_variant_selectors %}
          {% if block.settings.option_4_quantity != 1 or block.settings.enable_variant_selectors_on_quantity_of_1 %}
            <div class="quantity-break__variants">
              {% assign has_variants = true %}
              {% if block.settings.pickers_label != blank %}
                <span class="quantity-break__variants__label">
                  {{ block.settings.pickers_label }}
                </span>
              {% endif %}
              {% for selectorItem in (1..block.settings.option_4_quantity) %}
                <div
                  class="quantity-break__selector-item quantity-break__selector-item--variant-images-{{ block.settings.variant_images_position }}"
                  data-select-index="{{ forloop.index0 }}"
                  data-selected-id="{{ product.selected_or_first_available_variant.id }}"
                >
                  <span class="quantity-break__selector-item__number">#{{ selectorItem }}</span>
                  {%- for option in product.options_with_values -%}
                    <div class="select select--small no-background color-{{ settings.pickers_color_scheme }} accent-color-{{ settings.pickers_overlay_color }}  accent-2-color-{{ settings.pickers_text_color }}">
                      <select
                        class="quantity-break__variant-select select__select variant-dropdown"
                        name="options[{{ option.name | escape }}]"
                        data-product-id="{{ product.selected_or_first_available_variant.id }}"
                      >
                        {% for value in option.values %}
                          {%- liquid
                            assign option_class = ''
                            assign option_disabled = true
                            assign option_exists = false

                            for option1_name in variants_option1_arr
                              case option.position
                                when 1
                                  if variants_option1_arr[forloop.index0] == value
                                    assign option_exists = true
                                    if variants_available_arr[forloop.index0]
                                      assign option_disabled = false
                                    endif
                                  endif
                                when 2
                                  if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value
                                    assign option_exists = true
                                    if variants_available_arr[forloop.index0]
                                      assign option_disabled = false
                                    endif
                                  endif
                                when 3
                                  if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value
                                    assign option_exists = true
                                    if variants_available_arr[forloop.index0]
                                      assign option_disabled = false
                                    endif
                                  endif
                              endcase
                            endfor

                            if option_exists == false
                              assign option_class = 'non-existent'
                            elsif option_disabled == true
                              assign option_class = 'unavailable'
                            endif
                          -%}
                          <option
                            value="{{ value | escape }}"
                            {% if option.selected_value == value %}
                              selected="selected"
                            {% endif %}
                            class="{{ option_class }}"
                          >
                            {% if option_disabled -%}
                              {{- 'products.product.value_unavailable' | t: option_value: value -}}
                            {%- else -%}
                              {{- value -}}
                            {%- endif %}
                          </option>
                        {% endfor %}
                      </select>
                      {% render 'icon-caret' %}
                    </div>
                  {%- endfor -%}
                {% if block.settings.show_selected_variant_images %}
                        <div class="quantity-break__selector-item__image media media--transparent">
                          <img
                            src="{{ product.selected_or_first_available_variant.featured_image | image_url: width: 600 }}"
                            alt="{{ product.selected_or_first_available_variant.featured_image.alt }}"
                            width="auto"
                            height="auto"
                            loading="lazy"
                          >
                        </div>
                      {% endif %}
                </div>
              {% endfor %}
            </div>
          {% endif %}
        {% endif %}
      </label>
      {% if block.settings.style == 'normal' %}
       {% if block.settings.freegift4 and block.settings.labeltext4 != blank or block.settings.freegift4 and block.settings.labeltext4_2 != blank or block.settings.freegift4 and block.settings.labeltext4_3 != blank or block.settings.freegift4 and block.settings.labeltext4_4 != blank %}
    <div class="swatch-product-free--addon add-border">
      
      {% comment %}
  Count how many labels have content first
{% endcomment %}
{% assign label_count = 0 %}
{% if block.settings.labeltext4 != blank %}{% assign label_count = label_count | plus: 1 %}{% endif %}
{% if block.settings.labeltext4_2 != blank %}{% assign label_count = label_count | plus: 1 %}{% endif %}
{% if block.settings.labeltext4_3 != blank %}{% assign label_count = label_count | plus: 1 %}{% endif %}
{% if block.settings.labeltext4_4 != blank %}{% assign label_count = label_count | plus: 1 %}{% endif %}

{% comment %}
  Loop through labels 1-4, only showing those that have content
  Timer only shows if there's exactly 1 label
{% endcomment %}

{% for i in (1..4) %}
  {% comment %} Build dynamic setting names {% endcomment %}
  {% if i == 1 %}
    {% assign giftimage = block.settings.giftimage4 %}
    {% assign labeltext = block.settings.labeltext4 %}
    {% assign show_timer = block.settings.show_timer4 %}
    {% assign end_date = block.settings.end_date4 %}
    {% assign reset_hours = block.settings.reset_hours4 %}
    {% assign reset_minutes = block.settings.reset_minutes4 %}
    {% assign strikethrough_text = block.settings.strikethrough_text4 %}
  {% elsif i == 2 %}
    {% assign giftimage = block.settings.giftimage4_2 %}
    {% assign labeltext = block.settings.labeltext4_2 %}
    {% assign show_timer = false %}
    {% assign strikethrough_text = block.settings.strikethrough_text4_2 %}
  {% elsif i == 3 %}
    {% assign giftimage = block.settings.giftimage4_3 %}
    {% assign labeltext = block.settings.labeltext4_3 %}
    {% assign show_timer = false %}
    {% assign strikethrough_text = block.settings.strikethrough_text4_3 %}
  {% elsif i == 4 %}
    {% assign giftimage = block.settings.giftimage4_4 %}
    {% assign labeltext = block.settings.labeltext4_4 %}
    {% assign show_timer = false %}
    {% assign strikethrough_text = block.settings.strikethrough_text4_4 %}
  {% endif %}

  {% comment %} Only render if there's content {% endcomment %}
  {% if labeltext != blank %}
    <div class="image-and-text-container"{% if i > 1 %} style="border-top: 1px white solid;"{% endif %}>
      <div class="image">
        {% if giftimage %}
          <img
            src="{{ giftimage | image_url }}"
            loading="lazy"
            style="width:50px; height:50px; margin-left: 10px;"
          >
        {% endif %}
      </div>
      <div class="text">
        <p>{{ labeltext }}</p>
        {% if show_timer and label_count == 1 %}
          <div
            class="countdown-timer"
            data-timer-type="reset"
            data-end-date="{{ end_date }}"
            data-hours="{{ reset_hours }}"
            data-minutes="{{ reset_minutes }}"
            data-section-id="{{ section.id }}"
            data-block-id="{{ block.id }}"
          ></div>
        {% endif %}
      </div>
      {% if strikethrough_text != blank %}
        <div class="strikethrough-text">
          <span class="strikethrough">{{ strikethrough_text }}</span>
        </div>
      {% endif %}
    </div>
  {% endif %}
{% endfor %}
    </div>
    <style>
        .swatch-product-free--addon .image-and-text-container {
          width: 100%;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
          gap: 10px;
      }
        .image-and-text-container .text {
          display: flex;
          gap: 5px;
          flex: 1;
        }
        .image-and-text-container p {
          margin: 0;
          font-size: {{ block.settings.labeltextsize }}px;
        }
        .image-and-text-container .text strong {
          font-weight: 700;
        }
        .strikethrough-text {
          margin-left: auto;
          padding-right: 10px;
        }
      label[for=quantity4] {
          border-bottom-left-radius: 0px;
          border-bottom-right-radius: 0px;
          border-bottom: 0px;
      }
    </style>
  {% endif %}
{% endif %}
    {% endif %}
  </div>

  <script data-has-variants="{{ has_variants }}" type="application/json">
    {{ product.variants | json }}
  </script>
</quantity-breaks>

<script src="{{ 'timer.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'quantity-breaks-variant-images.js' | asset_url }}" defer="defer"></script>

 {% if block.settings.quantity_discounts_gifts %}
{% render 'auto-add-gifts', block: block %} 
{% endif %}

<script>
document.addEventListener('DOMContentLoaded', function() {
  const quantityInputs = document.querySelectorAll('input[name="quantity"]');
  const giftAddons = document.querySelectorAll('.swatch-product-free--addon');
  
  function updateGiftLabels() {
    giftAddons.forEach((addon, index) => {
      if (quantityInputs[index] && quantityInputs[index].checked && !quantityInputs[index].disabled) {
        addon.classList.add('active');
        addon.classList.remove('inactive');
      } else {
        addon.classList.add('inactive');
        addon.classList.remove('active');
      }
    });
  }
  
  function updateAddToCartButton() {
    const selectedQuantityInput = document.querySelector('input[name="quantity"]:checked');
    const productFormButtons = document.querySelector('.product-form__buttons');
    
    if (selectedQuantityInput) {
      // Check if the selected option has a sold-out overlay
      const selectedLabel = document.querySelector('label[for="' + selectedQuantityInput.id + '"]');
      const hasSoldOutOverlay = selectedLabel && selectedLabel.querySelector('.quantity-break__sold-out-overlay');
      
      if (hasSoldOutOverlay) {
        // Make buttons not clickable when sold out option is selected
        if (productFormButtons) {
          productFormButtons.style.pointerEvents = 'none';
          productFormButtons.style.opacity = '0.5';
        }
      } else {
        // Re-enable buttons
        if (productFormButtons) {
          productFormButtons.style.pointerEvents = '';
          productFormButtons.style.opacity = '';
        }
      }
    }
  }
  
  quantityInputs.forEach(input => {
    input.addEventListener('change', function() {
      updateGiftLabels();
      updateAddToCartButton();
    });
  });
  
  // Initialize on load
  updateGiftLabels();
  updateAddToCartButton();

  // Add click functionality to gift labels
  giftAddons.forEach((addon, index) => {
    addon.addEventListener('click', function() {
      if (quantityInputs[index] && !quantityInputs[index].disabled) {
        quantityInputs[index].checked = true;
        updateGiftLabels();
        updateAddToCartButton();
        quantityInputs[index].dispatchEvent(new Event('change'));
      }
    });
  });
});
</script>

<script>
(function() {
  var sectionId    = '{{ section.id }}';
  var moneyFmt     = {{ shop.money_format | json }};
  var liquidPrice  = {{ product.selected_or_first_available_variant.price }};

  function formatMoneyRounded(cents, format) {
    var rounded = Math.round(cents / 100) * 100;
    var amount  = (rounded / 100).toFixed(0);
    return format
      .replace(/\{\{\s*amount\s*\}\}/,                                  amount)
      .replace(/\{\{\s*amount_with_comma_separator\s*\}\}/,             amount)
      .replace(/\{\{\s*amount_no_decimals\s*\}\}/,                      amount)
      .replace(/\{\{\s*amount_with_comma_separator_no_decimals\s*\}\}/, amount)
      .replace(/\{\{\s*amount_no_decimals_with_comma_separator\s*\}\}/, amount);
  }

  function applyPriceEachRounded(container, forcedBasePrice) {
    var qbEl      = container.closest('quantity-breaks') || container;
    var basePrice = forcedBasePrice
      || parseInt(qbEl.dataset.basePrice)
      || liquidPrice
      || 0;

    container.querySelectorAll('.variant-price-update').forEach(function(el) {
      var text = el.dataset.text;
      if (!text || text.indexOf('[price_each_rounded]') === -1) return;

      var card = el.closest('.quantity-break');
      if (!card) return;

      var qty      = parseInt(card.dataset.quantity)         || 1;
      var pctLeft  = parseFloat(card.dataset.percentageLeft) || 1;
      var fixedOff = parseInt(card.dataset.fixedDiscount)    || 0;

      var totalPrice = Math.round((basePrice * qty * pctLeft) - fixedOff);
      var priceEach  = Math.round(totalPrice / qty);
      var formatted  = formatMoneyRounded(priceEach, moneyFmt);

      el.innerHTML = el.innerHTML.replace(/\[price_each_rounded\]/g, formatted);
    });
  }

  function init() {
    var container = document.getElementById('quantity-breaks-' + sectionId);
    if (!container) return;

    // Initial pass using liquidPrice as the guaranteed correct base
    applyPriceEachRounded(container, liquidPrice);

    var observer = new MutationObserver(function(mutations) {
      var affected = false;
      for (var i = 0; i < mutations.length; i++) {
        var m  = mutations[i];
        var el = m.target && m.target.closest ? m.target.closest('.variant-price-update') : null;
        if (el && el.closest('#quantity-breaks-' + sectionId)) {
          affected = true;
          break;
        }
      }
      // On variant change, data-base-price will have been updated by global.js before
      // it mutates the innerHTML, so we can read it fresh from the element
      if (affected) applyPriceEachRounded(container);
    });

    observer.observe(container, { subtree: true, childList: true, characterData: true });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>

{% comment %}
Quantity breaks - variant picker synchronization fix below
{% endcomment %}

<script>
(function () {
  var sectionId = '{{ section.id }}';

  function getVariantData() {
    var qbEl = document.getElementById('quantity-breaks-' + sectionId);
    if (!qbEl) return null;
    var jsonEl = qbEl.querySelector('[type="application/json"]');
    if (!jsonEl) return null;
    try { return JSON.parse(jsonEl.textContent); } catch(e) { return null; }
  }

  function updateVariantPickerSilently(variantSelects, variant) {
    var inputGroups = Array.from(
      variantSelects.querySelectorAll('.product-form__input:not(.hidden)')
    );

    variant.options.forEach(function(value, index) {
      var group = inputGroups[index];
      if (!group) return;

      // Dropdown
      var dropdown = group.querySelector('select');
      if (dropdown) { dropdown.value = value; return; }

      // Pills
      var radio = group.querySelector('input[type="radio"][value="' + value.replace(/"/g, '\\"') + '"]');
      if (radio) { radio.checked = true; return; }

      // Vertical cards
      var cardRadio = group.querySelector('.vertical-card-option input[type="radio"][value="' + value.replace(/"/g, '\\"') + '"]');
      if (cardRadio) {
        cardRadio.checked = true;
        var card = cardRadio.closest('.vertical-card-option');
        var container = cardRadio.closest('.vertical-cards-container');
        if (card && container) {
          container.querySelectorAll('.vertical-card-option').forEach(function(c) { c.classList.remove('selected'); });
          card.classList.add('selected');
        }
      }
    });
  }

  function patchVariantSelects() {
    var variantSelects = document.getElementById('variant-selects-' + sectionId);
    if (!variantSelects) { setTimeout(patchVariantSelects, 50); return; }
    if (variantSelects._qbRenderPatched) return;

    // Wait for custom element upgrade
    if (typeof variantSelects.renderProductInfo !== 'function') {
      setTimeout(patchVariantSelects, 50);
      return;
    }

    variantSelects._qbRenderPatched = true;
    var origRender = variantSelects.renderProductInfo.bind(variantSelects);

    variantSelects.renderProductInfo = function() {
      var qbEl = document.getElementById('quantity-breaks-' + sectionId);

      // If QB exists and was changed by us, save all QB select values before AJAX
      // and restore them after
      if (qbEl && qbEl._preserveSelects) {
        // Snapshot current QB select values
        var snapshot = [];
        qbEl.querySelectorAll('.quantity-break__selector-item').forEach(function(item) {
          snapshot.push({
            item: item,
            selectedId: item.dataset.selectedId,
            selects: Array.from(item.querySelectorAll('.quantity-break__variant-select')).map(function(s) {
              return s.value;
            })
          });
        });

        // Call original (fires AJAX)
        origRender.call(this);

        // After AJAX completes, restore QB selects
        // We do this by wrapping the innerHTML assignments via MutationObserver
        var observer = new MutationObserver(function() {
          // Restore each selector-item's select values
          snapshot.forEach(function(snap) {
            // Re-find the item since DOM may have been partially replaced
            var item = snap.item;
            var selects = item.querySelectorAll('.quantity-break__variant-select');
            selects.forEach(function(sel, i) {
              if (snap.selects[i] !== undefined) {
                sel.value = snap.selects[i];
              }
            });
            item.dataset.selectedId = snap.selectedId;
          });
          // Also re-run initVariants to sync internal state to restored values
          if (qbEl.initVariants) qbEl.initVariants();
          observer.disconnect();
        });

        observer.observe(qbEl, { subtree: true, childList: true });

      } else {
        origRender.call(this);
      }
    };
  }

  function initQBToVariantPickerSync() {
    var qbEl = document.getElementById('quantity-breaks-' + sectionId);
    if (!qbEl) return;

    qbEl.addEventListener('change', function(e) {
      var selectorItem = e.target.closest('.quantity-break__selector-item');
      if (!selectorItem) return;

      setTimeout(function() {
        var variantId = selectorItem.dataset.selectedId;
        if (!variantId) return;

        var variantSelects = document.getElementById('variant-selects-' + sectionId);
        if (!variantSelects) return;

        var variants = getVariantData();
        if (!variants) return;

        var variant = variants.find(function(v) { return v.id == variantId; });
        if (!variant) return;

        // Set flag so renderProductInfo preserves QB selects
        qbEl._preserveSelects = true;
        setTimeout(function() { qbEl._preserveSelects = false; }, 500);

        // Update variant picker inputs silently
        updateVariantPickerSilently(variantSelects, variant);

        // Now call updateOptions/updateMasterId to set currentVariant
        if (variantSelects.updateOptions) variantSelects.updateOptions();
        if (variantSelects.updateMasterId) variantSelects.updateMasterId();

        if (variantSelects.currentVariant) {
          if (variantSelects.updateMedia)        variantSelects.updateMedia();
          if (variantSelects.updateURL)          variantSelects.updateURL();
          if (variantSelects.updateVariantInput) variantSelects.updateVariantInput();
          if (variantSelects.updateShareUrl)     variantSelects.updateShareUrl();
          if (variantSelects.renderProductInfo)  variantSelects.renderProductInfo();
        }
      }, 0);
    });
  }

  patchVariantSelects();

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initQBToVariantPickerSync);
  } else {
    initQBToVariantPickerSync();
  }
})();
</script>