{% comment %}
  quantity-bundle-cards.liquid  ← upload to /snippets/
  Called from main-product.liquid via:
    {%- when 'quantity_bundle_cards' -%}
      {% render 'quantity-bundle-cards', block: block, product: product, product_form_id: product_form_id %}
{% endcomment %}

{% 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

  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
    assign has_badge = true
  endif

  assign has_any_image = false
  if block.settings.option_1_image != blank or block.settings.option_2_image != blank or block.settings.option_3_image != blank
    assign has_any_image = true
  endif
%}

{% style %}
/* === QUANTITY BUNDLE CARDS — {{ block.id }} === */
#quantity-bundle-cards-{{ block.id }} {
  width: 100%;
  font-family: var(--font-body-family);
  margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;
  margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;
  --card-gap: {{ block.settings.card_gap }}px;
  --border-radius: {{ block.settings.border_radius }}px;
}

/* Headline */
#quantity-bundle-cards-{{ block.id }} .qbc-headline {
  margin: 0 0 {{ block.settings.headline_margin_bottom }}px;
  line-height: 1;
  font-size: {{ block.settings.headline_font_size_desktop }}px;
  color: {{ block.settings.headline_color }};
}
#quantity-bundle-cards-{{ block.id }} .qbc-headline--centered {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
}
#quantity-bundle-cards-{{ block.id }} .qbc-headline--centered span:nth-of-type(1),
#quantity-bundle-cards-{{ block.id }} .qbc-headline--centered span:nth-of-type(3) {
  display: block;
  height: 2px;
  flex-grow: 1;
  background: {{ block.settings.headline_divider_color }};
}
#quantity-bundle-cards-{{ block.id }} .qbc-headline--left {
  display: block;
}

/* Container */
#quantity-bundle-cards-{{ block.id }} .qbc-container {
  display: flex;
  gap: var(--card-gap);
  flex-wrap: nowrap;
  width: 100%;
  {% if has_badge %}padding-top: 20px;{% else %}padding-top: 8px;{% endif %}
  align-items: flex-start;
}

/* Card */
#quantity-bundle-cards-{{ block.id }} .qbc-card {
  position: relative;
  flex: 1 1 calc((100% - ({{ item_count }} - 1) * var(--card-gap)) / {{ item_count }});
  min-width: 0;
  max-width: calc((100% - ({{ item_count }} - 1) * var(--card-gap)) / {{ item_count }});
  min-height: {{ block.settings.card_min_height }}px;
  background: {{ block.settings.card_background }};
  border: {{ block.settings.card_border_width }}px solid {{ block.settings.card_border_color }};
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  {% unless has_any_image %}justify-content: center;{% endunless %}
  padding: {{ block.settings.card_padding }}px;
  overflow: visible;
  margin-bottom: {{ block.settings.per_item_below_offset }}px;
}
#quantity-bundle-cards-{{ block.id }} .qbc-card:hover {
  transform: translateY(-2px) scale(1.02);
}
#quantity-bundle-cards-{{ block.id }} .qbc-radio:checked + .qbc-card {
  border-color: {{ block.settings.card_selected_border_color }};
  border-width: {{ block.settings.selected_border_width }}px;
  background: {{ block.settings.card_selected_bg_color }};
  transform: scale(1.03);
  {% if block.settings.selected_shadow != blank %}box-shadow: {{ block.settings.selected_shadow }};{% endif %}
}
#quantity-bundle-cards-{{ block.id }} .qbc-radio:checked + .qbc-card:hover {
  transform: translateY(-1px) scale(1.03);
}
#quantity-bundle-cards-{{ block.id }} .qbc-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Image */
#quantity-bundle-cards-{{ block.id }} .qbc-image-wrap {
  width: 100%;
  height: {{ block.settings.image_height }}px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}
#quantity-bundle-cards-{{ block.id }} .qbc-image-wrap img {
  height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
}

/* Title */
#quantity-bundle-cards-{{ block.id }} .qbc-title {
  font-size: {{ block.settings.title_font_size_desktop }}px;
  font-weight: var(--font-weight-bold);
  color: {{ block.settings.title_color }};
  margin: 0 0 4px;
  line-height: 1.2;
}

/* Description */
#quantity-bundle-cards-{{ block.id }} .qbc-description {
  font-size: {{ block.settings.description_font_size }}px;
  color: {{ block.settings.description_color }};
  margin: 0;
  opacity: 0.8;
  line-height: 1.3;
}

/* Per-item price below card */
#quantity-bundle-cards-{{ block.id }} .qbc-per-item {
  position: absolute;
  bottom: -{{ block.settings.per_item_below_offset | minus: 4 }}px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 1;
  font-size: {{ block.settings.per_item_font_size }}px;
  font-weight: 700;
  color: {{ block.settings.per_item_color }};
}

/* Badge */
#quantity-bundle-cards-{{ block.id }} .qbc-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  z-index: 2;
  display: inline-block;
  border-radius: {{ block.settings.badge_border_radius }}px;
  line-height: 1.4;
}

/* Mobile */
@media (max-width: 768px) {
  #quantity-bundle-cards-{{ block.id }} .qbc-headline {
    font-size: {{ block.settings.headline_font_size_mobile }}px;
  }
  #quantity-bundle-cards-{{ block.id }} .qbc-container {
    gap: calc(var(--card-gap) * 0.6);
  }
  #quantity-bundle-cards-{{ block.id }} .qbc-card {
    min-height: {{ block.settings.card_min_height | times: 0.85 | round }}px;
    padding: {{ block.settings.card_padding | times: 0.8 | round }}px;
  }
  #quantity-bundle-cards-{{ block.id }} .qbc-image-wrap {
    height: {{ block.settings.image_height | times: 0.85 | round }}px;
  }
  #quantity-bundle-cards-{{ block.id }} .qbc-title {
    font-size: {{ block.settings.title_font_size_mobile }}px;
  }
  #quantity-bundle-cards-{{ block.id }} .qbc-description,
  #quantity-bundle-cards-{{ block.id }} .qbc-per-item {
    font-size: {{ block.settings.description_font_size | times: 0.88 | round }}px;
  }
}
{% endstyle %}

<quantity-breaks
  id="quantity-bundle-cards-{{ block.id }}"
  class="quantity-bundle-cards"
  data-section="{{ section.id }}"
  data-items="{{ item_count }}"
  data-update-prices="false"
  data-money-format="{{ shop.money_format | escape }}"
  data-skip-non-existent="true"
  data-skip-unavailable="false"
  data-base-price="{{ product.selected_or_first_available_variant.price }}"
  data-base-compare-price="{{ product.selected_or_first_available_variant.compare_at_price }}"
  data-subscription-active="false"
  data-subscription-discount-type=""
  data-subscription-discount-value="0"
  style="--items-count:{{ item_count }};"
  {{ block.shopify_attributes }}
>
  {% assign price = product.selected_or_first_available_variant.price %}

  {% if block.settings.headline != blank %}
    {% if block.settings.headline_style == 'left' %}
      <h3 class="qbc-headline qbc-headline--left">{{ block.settings.headline }}</h3>
    {% else %}
      <h3 class="qbc-headline qbc-headline--centered">
        <span></span>
        <span>{{ block.settings.headline }}</span>
        <span></span>
      </h3>
    {% endif %}
  {% endif %}

  <div class="qbc-container">

    {%- comment -%}===== OPTION 1 ====={%- endcomment -%}
    {% if block.settings.option_1_quantity != 0 %}
      {%- liquid
        assign pct_1      = block.settings.option_1_percentage_off | plus: 0
        assign pct_left_1 = 100 | minus: pct_1 | divided_by: 100.00
        assign fixed_1    = block.settings.option_1_fixed_amount_off | times: 100
        assign option_1_price = price | times: block.settings.option_1_quantity | times: pct_left_1 | minus: fixed_1
        assign cp_base_1 = price
        if block.settings.option_1_compare_price_source == 'compare_price' and product.selected_or_first_available_variant.compare_at_price > price
          assign cp_base_1 = product.selected_or_first_available_variant.compare_at_price
        endif
        assign option_1_compare_price      = cp_base_1 | times: block.settings.option_1_quantity
        assign option_1_diff               = option_1_compare_price | minus: option_1_price
        assign option_1_diff_rounded       = option_1_diff | 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
      -%}
      <input id="qbc-qty1-{{ block.id }}" class="qbc-radio" 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="qbc-qty1-{{ block.id }}" class="qbc-card{% if block.settings.option_1_badge != blank %} qbc-card--has-badge{% endif %}" data-quantity="{{ block.settings.option_1_quantity }}" data-input="input_1" data-percentage-left="{{ pct_left_1 }}" data-fixed-discount="{{ fixed_1 }}">
        {%- if block.settings.option_1_badge != blank -%}
          {%- if block.settings.option_1_badge_bg_type == 'gradient' -%}
            {%- assign option_1_badge_bg = block.settings.option_1_badge_gradient -%}
          {%- else -%}
            {%- assign option_1_badge_bg = block.settings.option_1_badge_color -%}
          {%- endif -%}
          <span class="qbc-badge dynamic-price variant-price-update" data-text="{{ block.settings.option_1_badge }}" style="background:{{ option_1_badge_bg }}!important;color:{{ block.settings.option_1_badge_text_color }}!important;{%- if block.settings.option_1_badge_shadow != blank -%}box-shadow:{{ block.settings.option_1_badge_shadow }};{%- 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_diff, amount_saved_rounded: option_1_diff_rounded, price_each: option_1_price_each, compare_price_each: option_1_compare_price_each -%}
          </span>
        {%- endif -%}
        {%- if block.settings.option_1_image != blank -%}
          <div class="qbc-image-wrap"><img src="{{ block.settings.option_1_image | image_url: width: 300 }}" alt="{{ block.settings.option_1_image.alt | escape }}" width="300" height="300" loading="lazy"></div>
        {%- endif -%}
        {%- if block.settings.option_1_title != blank -%}
          <p class="qbc-title dynamic-price variant-price-update" data-text="{{ block.settings.option_1_title }}">{%- render 'text-with-price', text: block.settings.option_1_title, quantity: block.settings.option_1_quantity, price: option_1_price, compare_price: option_1_compare_price, amount_saved: option_1_diff, amount_saved_rounded: option_1_diff_rounded, price_each: option_1_price_each, compare_price_each: option_1_compare_price_each -%}</p>
        {%- endif -%}
        {%- if block.settings.option_1_description != blank -%}
          <p class="qbc-description dynamic-price variant-price-update" data-text="{{ block.settings.option_1_description }}">{%- render 'text-with-price', text: block.settings.option_1_description, quantity: block.settings.option_1_quantity, price: option_1_price, compare_price: option_1_compare_price, amount_saved: option_1_diff, amount_saved_rounded: option_1_diff_rounded, price_each: option_1_price_each, compare_price_each: option_1_compare_price_each -%}</p>
        {%- endif -%}
        {%- if block.settings.option_1_per_item_text != blank -%}
          <span class="qbc-per-item dynamic-price variant-price-update" data-text="{{ block.settings.option_1_per_item_text }}">{%- render 'text-with-price', text: block.settings.option_1_per_item_text, quantity: block.settings.option_1_quantity, price: option_1_price, compare_price: option_1_compare_price, amount_saved: option_1_diff, amount_saved_rounded: option_1_diff_rounded, price_each: option_1_price_each, compare_price_each: option_1_compare_price_each -%}</span>
        {%- endif -%}
      </label>
    {% endif %}

    {%- comment -%}===== OPTION 2 ====={%- endcomment -%}
    {% if block.settings.option_2_quantity != 0 %}
      {%- liquid
        assign pct_2      = block.settings.option_2_percentage_off | plus: 0
        assign pct_left_2 = 100 | minus: pct_2 | divided_by: 100.00
        assign fixed_2    = block.settings.option_2_fixed_amount_off | times: 100
        assign option_2_price = price | times: block.settings.option_2_quantity | times: pct_left_2 | minus: fixed_2
        assign cp_base_2 = price
        if block.settings.option_2_compare_price_source == 'compare_price' and product.selected_or_first_available_variant.compare_at_price > price
          assign cp_base_2 = product.selected_or_first_available_variant.compare_at_price
        endif
        assign option_2_compare_price      = cp_base_2 | times: block.settings.option_2_quantity
        assign option_2_diff               = option_2_compare_price | minus: option_2_price
        assign option_2_diff_rounded       = option_2_diff | 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
      -%}
      <input id="qbc-qty2-{{ block.id }}" class="qbc-radio" 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="qbc-qty2-{{ block.id }}" class="qbc-card{% if block.settings.option_2_badge != blank %} qbc-card--has-badge{% endif %}" data-quantity="{{ block.settings.option_2_quantity }}" data-input="input_2" data-percentage-left="{{ pct_left_2 }}" data-fixed-discount="{{ fixed_2 }}">
        {%- if block.settings.option_2_badge != blank -%}
          {%- if block.settings.option_2_badge_bg_type == 'gradient' -%}
            {%- assign option_2_badge_bg = block.settings.option_2_badge_gradient -%}
          {%- else -%}
            {%- assign option_2_badge_bg = block.settings.option_2_badge_color -%}
          {%- endif -%}
          <span class="qbc-badge dynamic-price variant-price-update" data-text="{{ block.settings.option_2_badge }}" style="background:{{ option_2_badge_bg }}!important;color:{{ block.settings.option_2_badge_text_color }}!important;{%- if block.settings.option_2_badge_shadow != blank -%}box-shadow:{{ block.settings.option_2_badge_shadow }};{%- 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_diff, amount_saved_rounded: option_2_diff_rounded, price_each: option_2_price_each, compare_price_each: option_2_compare_price_each -%}
          </span>
        {%- endif -%}
        {%- if block.settings.option_2_image != blank -%}
          <div class="qbc-image-wrap"><img src="{{ block.settings.option_2_image | image_url: width: 300 }}" alt="{{ block.settings.option_2_image.alt | escape }}" width="300" height="300" loading="lazy"></div>
        {%- endif -%}
        {%- if block.settings.option_2_title != blank -%}
          <p class="qbc-title dynamic-price variant-price-update" data-text="{{ block.settings.option_2_title }}">{%- render 'text-with-price', text: block.settings.option_2_title, quantity: block.settings.option_2_quantity, price: option_2_price, compare_price: option_2_compare_price, amount_saved: option_2_diff, amount_saved_rounded: option_2_diff_rounded, price_each: option_2_price_each, compare_price_each: option_2_compare_price_each -%}</p>
        {%- endif -%}
        {%- if block.settings.option_2_description != blank -%}
          <p class="qbc-description dynamic-price variant-price-update" data-text="{{ block.settings.option_2_description }}">{%- render 'text-with-price', text: block.settings.option_2_description, quantity: block.settings.option_2_quantity, price: option_2_price, compare_price: option_2_compare_price, amount_saved: option_2_diff, amount_saved_rounded: option_2_diff_rounded, price_each: option_2_price_each, compare_price_each: option_2_compare_price_each -%}</p>
        {%- endif -%}
        {%- if block.settings.option_2_per_item_text != blank -%}
          <span class="qbc-per-item dynamic-price variant-price-update" data-text="{{ block.settings.option_2_per_item_text }}">{%- render 'text-with-price', text: block.settings.option_2_per_item_text, quantity: block.settings.option_2_quantity, price: option_2_price, compare_price: option_2_compare_price, amount_saved: option_2_diff, amount_saved_rounded: option_2_diff_rounded, price_each: option_2_price_each, compare_price_each: option_2_compare_price_each -%}</span>
        {%- endif -%}
      </label>
    {% endif %}

    {%- comment -%}===== OPTION 3 ====={%- endcomment -%}
    {% if block.settings.option_3_quantity != 0 %}
      {%- liquid
        assign pct_3      = block.settings.option_3_percentage_off | plus: 0
        assign pct_left_3 = 100 | minus: pct_3 | divided_by: 100.00
        assign fixed_3    = block.settings.option_3_fixed_amount_off | times: 100
        assign option_3_price = price | times: block.settings.option_3_quantity | times: pct_left_3 | minus: fixed_3
        assign cp_base_3 = price
        if block.settings.option_3_compare_price_source == 'compare_price' and product.selected_or_first_available_variant.compare_at_price > price
          assign cp_base_3 = product.selected_or_first_available_variant.compare_at_price
        endif
        assign option_3_compare_price      = cp_base_3 | times: block.settings.option_3_quantity
        assign option_3_diff               = option_3_compare_price | minus: option_3_price
        assign option_3_diff_rounded       = option_3_diff | 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
      -%}
      <input id="qbc-qty3-{{ block.id }}" class="qbc-radio" 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="qbc-qty3-{{ block.id }}" class="qbc-card{% if block.settings.option_3_badge != blank %} qbc-card--has-badge{% endif %}" data-quantity="{{ block.settings.option_3_quantity }}" data-input="input_3" data-percentage-left="{{ pct_left_3 }}" data-fixed-discount="{{ fixed_3 }}">
        {%- if block.settings.option_3_badge != blank -%}
          {%- if block.settings.option_3_badge_bg_type == 'gradient' -%}
            {%- assign option_3_badge_bg = block.settings.option_3_badge_gradient -%}
          {%- else -%}
            {%- assign option_3_badge_bg = block.settings.option_3_badge_color -%}
          {%- endif -%}
          <span class="qbc-badge dynamic-price variant-price-update" data-text="{{ block.settings.option_3_badge }}" style="background:{{ option_3_badge_bg }}!important;color:{{ block.settings.option_3_badge_text_color }}!important;{%- if block.settings.option_3_badge_shadow != blank -%}box-shadow:{{ block.settings.option_3_badge_shadow }};{%- 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_diff, amount_saved_rounded: option_3_diff_rounded, price_each: option_3_price_each, compare_price_each: option_3_compare_price_each -%}
          </span>
        {%- endif -%}
        {%- if block.settings.option_3_image != blank -%}
          <div class="qbc-image-wrap"><img src="{{ block.settings.option_3_image | image_url: width: 300 }}" alt="{{ block.settings.option_3_image.alt | escape }}" width="300" height="300" loading="lazy"></div>
        {%- endif -%}
        {%- if block.settings.option_3_title != blank -%}
          <p class="qbc-title dynamic-price variant-price-update" data-text="{{ block.settings.option_3_title }}">{%- render 'text-with-price', text: block.settings.option_3_title, quantity: block.settings.option_3_quantity, price: option_3_price, compare_price: option_3_compare_price, amount_saved: option_3_diff, amount_saved_rounded: option_3_diff_rounded, price_each: option_3_price_each, compare_price_each: option_3_compare_price_each -%}</p>
        {%- endif -%}
        {%- if block.settings.option_3_description != blank -%}
          <p class="qbc-description dynamic-price variant-price-update" data-text="{{ block.settings.option_3_description }}">{%- render 'text-with-price', text: block.settings.option_3_description, quantity: block.settings.option_3_quantity, price: option_3_price, compare_price: option_3_compare_price, amount_saved: option_3_diff, amount_saved_rounded: option_3_diff_rounded, price_each: option_3_price_each, compare_price_each: option_3_compare_price_each -%}</p>
        {%- endif -%}
        {%- if block.settings.option_3_per_item_text != blank -%}
          <span class="qbc-per-item dynamic-price variant-price-update" data-text="{{ block.settings.option_3_per_item_text }}">{%- render 'text-with-price', text: block.settings.option_3_per_item_text, quantity: block.settings.option_3_quantity, price: option_3_price, compare_price: option_3_compare_price, amount_saved: option_3_diff, amount_saved_rounded: option_3_diff_rounded, price_each: option_3_price_each, compare_price_each: option_3_compare_price_each -%}</span>
        {%- endif -%}
      </label>
    {% endif %}

  </div>

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

<script>
(function() {

  // ─── PATCH 1: Fix ProductForm.quantityBreaks reference ───────────────────────
  (function patchProductFormQuantityBreaks() {
    var sectionId = '{{ section.id }}';
    var blockId   = '{{ block.id }}';

    function init() {
      var qbc = document.getElementById('quantity-bundle-cards-' + blockId);
      if (!qbc) return;

      if (document.getElementById('quantity-breaks-' + sectionId)) return;

      var proxy = {
        selectedQuantity: 1,
        formVariants: []
      };

      var checkedInput = qbc.querySelector('input[name="quantity"]:checked');
      if (checkedInput) {
        proxy.selectedQuantity = parseInt(checkedInput.value) || 1;
      }

      qbc.addEventListener('change', function(e) {
        if (e.target && e.target.name === 'quantity') {
          proxy.selectedQuantity = parseInt(e.target.value) || 1;
        }
      });

      var productFormEl = document.querySelector(
        'product-form[data-section="' + sectionId + '"]'
      );
      if (productFormEl) {
        productFormEl.quantityBreaks = proxy;
      }
    }

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

  // ─── PATCH 2: [price_each_rounded] dynamic replacement ───────────────────────
  (function patchPriceEachRounded() {
    var blockId  = '{{ block.id }}';
    var moneyFmt = {{ shop.money_format | json }};

    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) {
      var qbEl     = container.closest('quantity-breaks') || container;
      var basePrice = parseInt(qbEl.dataset.basePrice) || 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('.qbc-card');
        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 priceEach = Math.round((basePrice * pctLeft) - (fixedOff / qty));
        var formatted = formatMoneyRounded(priceEach, moneyFmt);

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

    function init() {
      var qbc = document.getElementById('quantity-bundle-cards-' + blockId);
      if (!qbc) return;

      applyPriceEachRounded(qbc);

      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-bundle-cards-' + blockId)) {
            affected = true;
            break;
          }
        }
        if (affected) applyPriceEachRounded(qbc);
      });

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

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

})();
</script>