{% assign bundle_count = 0 %}
{% if block.settings.buy_1 != blank or block.settings.get_1 != blank or block.settings.add_1 != blank %}
  {% assign bundle_count = bundle_count | plus: 1 %}
{% endif %}
{% if block.settings.buy_2 != blank or block.settings.get_2 != blank or block.settings.add_2 != blank %}
  {% assign bundle_count = bundle_count | plus: 1 %}
{% endif %}
{% if block.settings.buy_3 != blank or block.settings.get_3 != blank or block.settings.add_3 != blank %}
  {% assign bundle_count = bundle_count | plus: 1 %}
{% endif %}

<div class="{{ block.settings.visibility }}"
  {{ block.shopify_attributes }}
  style="--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;--margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;"
>
<div class="bundle-offer-block-{{ block.id }}">

  {% if block.settings.layout_style == 'table' %}

    {% if block.settings.table_title != blank %}
      <div class="bmd-table-title">{{ block.settings.table_title }}</div>
    {% endif %}

    <table class="bmd-table">
      <thead>
        <tr>
          <th>{{ block.settings.table_col1_heading }}</th>
          <th>{{ block.settings.table_col2_heading }}</th>
        </tr>
      </thead>
      <tbody>
        {% if block.settings.table_row1_buy != blank %}
          <tr>
            <td>{{ block.settings.table_row1_buy }}</td>
            <td>{{ block.settings.table_row1_save }}</td>
          </tr>
        {% endif %}
        {% if block.settings.table_row2_buy != blank %}
          <tr>
            <td>{{ block.settings.table_row2_buy }}</td>
            <td>{{ block.settings.table_row2_save }}</td>
          </tr>
        {% endif %}
        {% if block.settings.table_row3_buy != blank %}
          <tr>
            <td>{{ block.settings.table_row3_buy }}</td>
            <td>{{ block.settings.table_row3_save }}</td>
          </tr>
        {% endif %}
        {% if block.settings.table_row4_buy != blank %}
          <tr>
            <td>{{ block.settings.table_row4_buy }}</td>
            <td>{{ block.settings.table_row4_save }}</td>
          </tr>
        {% endif %}
        {% if block.settings.table_row5_buy != blank %}
          <tr>
            <td>{{ block.settings.table_row5_buy }}</td>
            <td>{{ block.settings.table_row5_save }}</td>
          </tr>
        {% endif %}
      </tbody>
    </table>

    {% if block.settings.footer_note != blank %}
      <div class="footer-note">{{ block.settings.footer_note }}</div>
    {% endif %}

  {% else %}

    <div class="bundle-row">
      {% if block.settings.buy_1 != blank or block.settings.get_1 != blank or block.settings.add_1 != blank %}
        <div class="bundle-column">
          <div class="main-text">{{ block.settings.buy_1 }}</div>
          <div class="highlight">{{ block.settings.get_1 }}</div>
          <div class="small-text">{{ block.settings.add_1 }}</div>
        </div>
      {% endif %}

      {% if block.settings.buy_2 != blank or block.settings.get_2 != blank or block.settings.add_2 != blank %}
        <div class="bundle-column">
          <div class="main-text">{{ block.settings.buy_2 }}</div>
          <div class="highlight">{{ block.settings.get_2 }}</div>
          <div class="small-text">{{ block.settings.add_2 }}</div>
        </div>
      {% endif %}

      {% if block.settings.buy_3 != blank or block.settings.get_3 != blank or block.settings.add_3 != blank %}
        <div class="bundle-column">
          <div class="main-text">{{ block.settings.buy_3 }}</div>
          <div class="highlight">{{ block.settings.get_3 }}</div>
          <div class="small-text">{{ block.settings.add_3 }}</div>
        </div>
      {% endif %}
    </div>

    <div class="footer-note">{{ block.settings.footer_note }}</div>

  {% endif %}

</div>
</div>

{% style %}
  .bundle-offer-block-{{ block.id }} {
    border: 1px solid {{ block.settings.border_color }};
    border-radius: {{ block.settings.border_radius }}px;
    padding: 20px;
    font-family: inherit;
    background-color: {{ block.settings.bg_color }};
    overflow: hidden;
    box-sizing: border-box;
    margin-top: var(--margin-top);
    margin-bottom: var(--margin-bottom);
  }

  /* ── Card style ── */
  .bundle-offer-block-{{ block.id }} .bundle-row {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
  }

  .bundle-offer-block-{{ block.id }} .bundle-column {
    flex: 1 1 0;
    max-width: {{ 100 | divided_by: bundle_count }}%;
    padding: 0 10px;
    text-align: center;
    box-sizing: border-box;
  }

  .bundle-offer-block-{{ block.id }} .main-text {
    font-weight: bold;
    color: {{ block.settings.main_text_color }};
  }

  .bundle-offer-block-{{ block.id }} .highlight {
    color: {{ block.settings.highlight_color }};
    font-weight: bold;
  }

  .bundle-offer-block-{{ block.id }} .small-text {
    font-size: 0.9em;
    margin-top: 5px;
    white-space: nowrap;
  }

  .bundle-offer-block-{{ block.id }} .footer-note {
    margin-top: 15px;
    font-size: 0.8em;
    color: {{ block.settings.main_text_color }};
  }

  /* ── Table style ── */
  .bundle-offer-block-{{ block.id }} .bmd-table-title {
    font-size: {{ block.settings.table_title_size | divided_by: 10.0 }}rem;
    font-weight: bold;
    color: {{ block.settings.main_text_color }};
    margin-bottom: 10px;
  }

  .bundle-offer-block-{{ block.id }} .bmd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: {{ block.settings.table_font_size | divided_by: 10.0 }}rem;
  }

  .bundle-offer-block-{{ block.id }} .bmd-table th,
  .bundle-offer-block-{{ block.id }} .bmd-table td {
    border: 1px solid {{ block.settings.table_border_color }};
    padding: {{ block.settings.table_cell_padding }}px {{ block.settings.table_cell_padding | times: 2 }}px;
    text-align: left;
  }

  .bundle-offer-block-{{ block.id }} .bmd-table th {
    font-weight: bold;
    background-color: {{ block.settings.table_header_bg }};
    color: {{ block.settings.table_header_color }};
  }

  .bundle-offer-block-{{ block.id }} .bmd-table td {
    color: {{ block.settings.main_text_color }};
  }

  .bundle-offer-block-{{ block.id }} .bmd-table tbody tr:nth-child(even) td {
    background-color: {{ block.settings.table_stripe_color }};
  }

  @media screen and (max-width: 768px) {
    .bundle-offer-block-{{ block.id }} .bundle-column {
      flex: 1 1 0;
      max-width: {{ 100 | divided_by: bundle_count }}%;
    }

    .bundle-offer-block-{{ block.id }} .small-text {
      font-size: 0.8em;
    }
  }
{% endstyle %}