{% comment %}
  block, margins (boolean), block_attributes (boolean)
{% endcomment %}

{% liquid
  assign item_count = 0
  if block.settings.text_1 != blank
    assign item_count = item_count | plus: 1
  endif
  if block.settings.text_2 != blank
    assign item_count = item_count | plus: 1
  endif
  if block.settings.text_3 != blank
    assign item_count = item_count | plus: 1
  endif
  if block.settings.text_4 != blank
    assign item_count = item_count | plus: 1
  endif

  comment
    Resolve global background first, then per-item based on bg_type select.
    bg_type values: 'global' (inherit global), 'solid' (use bg_color_N), 'gradient' (use gradient_bg_N)
  endcomment

  assign global_bg = block.settings.bg_color
  if block.settings.enable_gradient_bg and block.settings.gradient_bg != blank
    assign global_bg = block.settings.gradient_bg
  endif

  assign item_bg_1 = global_bg
  if block.settings.bg_type_1 == 'solid'
    assign item_bg_1 = block.settings.bg_color_1
  elsif block.settings.bg_type_1 == 'gradient'
    assign item_bg_1 = block.settings.gradient_bg_1
  endif

  assign item_bg_2 = global_bg
  if block.settings.bg_type_2 == 'solid'
    assign item_bg_2 = block.settings.bg_color_2
  elsif block.settings.bg_type_2 == 'gradient'
    assign item_bg_2 = block.settings.gradient_bg_2
  endif

  assign item_bg_3 = global_bg
  if block.settings.bg_type_3 == 'solid'
    assign item_bg_3 = block.settings.bg_color_3
  elsif block.settings.bg_type_3 == 'gradient'
    assign item_bg_3 = block.settings.gradient_bg_3
  endif

  assign item_bg_4 = global_bg
  if block.settings.bg_type_4 == 'solid'
    assign item_bg_4 = block.settings.bg_color_4
  elsif block.settings.bg_type_4 == 'gradient'
    assign item_bg_4 = block.settings.gradient_bg_4
  endif

  assign visible_index = 0
%}
<div
  class="product__text-container product__text-container--{{ block.settings.alignment }}{% if mobile_align %} product__text-container--mobile-{{ block.settings.mobile_alignment }}{% endif %} product__text-container--{{ block.settings.direction }} product__text-container--{{ block.settings.width }} product__text-container--styling-{{ block.settings.styling_container }}{% if block.settings.enable_bg %} product__text-container--background{% endif %}{% if block.settings.enable_gradient_bg %} product__text-container--gradient-background{% endif %}{% if item_count > 1 %} product__text-container--multiple{% endif %}{% if item_count == 4 and block.settings.grid_layout == '2x2' %} product__text-container--grid-2x2{% endif %}{% if block.settings.width == 'full_negative' %} side-margins-negative{% endif %}{% if block.settings.enable_separator %} product__text-container--separated{% endif %} {{ block.settings.visibility }}"
  style="--item-count:{{ item_count }};--mobile-text-size: {{ block.settings.mobile_text_size | divided_by: 10.0 }}rem;--desktop-text-size: {{ block.settings.desktop_text_size | divided_by: 10.0 }}rem;--icon-scale:{{ block.settings.icon_scale | divided_by: 100.0 }};--column-gap:{{ block.settings.column_gap | divided_by: 2.0 }}em;--row-gap:{{ block.settings.column_gap | divided_by: 5.0 }}em;--padding:{{ block.settings.padding | divided_by: 7.0 }}em;--bg-color:{{ block.settings.bg_color }};{% if block.settings.enable_gradient_bg %}--gradient-bg: {{ block.settings.gradient_bg }};{% endif %}--corner-radius:{{ block.settings.corner_radius | divided_by: 100.0 }}em;--border-size:{{ block.settings.border_size }}px;--border-color:{{ block.settings.border_color }};{% if block.settings.dashedborder %}border-style: dashed;{% endif %}{% if margins %}--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;--margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;{% endif %}"
  {% if block_attributes %}
    {{- block.shopify_attributes -}}
  {% endif %}
>
  {% if block.settings.text_1 != blank %}
    {% if block.settings.enable_separator and visible_index > 0 %}
      <span class="product__text-separator" aria-hidden="true">|</span>
    {% endif %}
    {% assign visible_index = visible_index | plus: 1 %}
    <p
      class="product__text product__text-{{ block.settings.alignment }}{% if mobile_align %} product__text-mobile-{{ block.settings.mobile_alignment }}{% endif %}"
      style="--text-color:{{ block.settings.text_color }};--icon-color:{{ block.settings.icon_color }};{% if block.settings.styling_container == 'text' and block.settings.enable_bg %}--bg-color:{{ item_bg_1 }};background:{{ item_bg_1 }};{% endif %}{% if block.settings.boxshadow and block.settings.styling_container == 'text' and block.settings.enable_bg %} box-shadow: 0 1px 3px rgba(0,0,0,0.2);{% endif %}"
    >
      {% if block.settings.custom_icon_1 != blank %}
        <img src="{{ block.settings.custom_icon_1 | image_url }}" alt="{{ block.settings.custom_icon_1.alt }}" width="auto" height="auto" loading="lazy">
      {% elsif block.settings.icon_1 != blank %}
        {% render 'material-icon', icon: block.settings.icon_1, filled: block.settings.filled_icon_1 %}
      {% endif %}
      <span>{{- block.settings.text_1 -}}</span>
    </p>
  {% endif %}
  {% if block.settings.text_2 != blank %}
    {% if block.settings.enable_separator and visible_index > 0 %}
      <span class="product__text-separator" aria-hidden="true">|</span>
    {% endif %}
    {% assign visible_index = visible_index | plus: 1 %}
    <p
      class="product__text product__text-{{ block.settings.alignment }}{% if mobile_align %} product__text-mobile-{{ block.settings.mobile_alignment }}{% endif %}"
      style="--text-color:{{ block.settings.text_color }};--icon-color:{{ block.settings.icon_color }};{% if block.settings.styling_container == 'text' and block.settings.enable_bg %}--bg-color:{{ item_bg_2 }};background:{{ item_bg_2 }};{% endif %}{% if block.settings.boxshadow and block.settings.styling_container == 'text' and block.settings.enable_bg %} box-shadow: 0 1px 3px rgba(0,0,0,0.2);{% endif %}"
    >
      {% if block.settings.custom_icon_2 != blank %}
        <img src="{{ block.settings.custom_icon_2 | image_url }}" alt="{{ block.settings.custom_icon_2.alt }}" width="auto" height="auto" loading="lazy">
      {% elsif block.settings.icon_2 != blank %}
        {% render 'material-icon', icon: block.settings.icon_2, filled: block.settings.filled_icon_2 %}
      {% endif %}
      <span>{{- block.settings.text_2 -}}</span>
    </p>
  {% endif %}
  {% if block.settings.text_3 != blank %}
    {% if block.settings.enable_separator and visible_index > 0 %}
      <span class="product__text-separator" aria-hidden="true">|</span>
    {% endif %}
    {% assign visible_index = visible_index | plus: 1 %}
    <p
      class="product__text product__text-{{ block.settings.alignment }}{% if mobile_align %} product__text-mobile-{{ block.settings.mobile_alignment }}{% endif %}"
      style="--text-color:{{ block.settings.text_color }};--icon-color:{{ block.settings.icon_color }};{% if block.settings.styling_container == 'text' and block.settings.enable_bg %}--bg-color:{{ item_bg_3 }};background:{{ item_bg_3 }};{% endif %}{% if block.settings.boxshadow and block.settings.styling_container == 'text' and block.settings.enable_bg %} box-shadow: 0 1px 3px rgba(0,0,0,0.2);{% endif %}"
    >
      {% if block.settings.custom_icon_3 != blank %}
        <img src="{{ block.settings.custom_icon_3 | image_url }}" alt="{{ block.settings.custom_icon_3.alt }}" width="auto" height="auto" loading="lazy">
      {% elsif block.settings.icon_3 != blank %}
        {% render 'material-icon', icon: block.settings.icon_3, filled: block.settings.filled_icon_3 %}
      {% endif %}
      <span>{{- block.settings.text_3 -}}</span>
    </p>
  {% endif %}
  {% if block.settings.text_4 != blank %}
    {% if block.settings.enable_separator and visible_index > 0 %}
      <span class="product__text-separator" aria-hidden="true">|</span>
    {% endif %}
    {% assign visible_index = visible_index | plus: 1 %}
    <p
      class="product__text product__text-{{ block.settings.alignment }}{% if mobile_align %} product__text-mobile-{{ block.settings.mobile_alignment }}{% endif %}"
      style="--text-color:{{ block.settings.text_color }};--icon-color:{{ block.settings.icon_color }};{% if block.settings.styling_container == 'text' and block.settings.enable_bg %}--bg-color:{{ item_bg_4 }};background:{{ item_bg_4 }};{% endif %}{% if block.settings.boxshadow and block.settings.styling_container == 'text' and block.settings.enable_bg %} box-shadow: 0 1px 3px rgba(0,0,0,0.2);{% endif %}"
    >
      {% if block.settings.custom_icon_4 != blank %}
        <img src="{{ block.settings.custom_icon_4 | image_url }}" alt="{{ block.settings.custom_icon_4.alt }}" width="auto" height="auto" loading="lazy">
      {% elsif block.settings.icon_4 != blank %}
        {% render 'material-icon', icon: block.settings.icon_4, filled: block.settings.filled_icon_4 %}
      {% endif %}
      <span>{{- block.settings.text_4 -}}</span>
    </p>
  {% endif %}
</div>