{%- liquid
  assign card_count = 0
  if block.settings.stat_1_enabled
    assign card_count = card_count | plus: 1
  endif
  if block.settings.stat_2_enabled
    assign card_count = card_count | plus: 1
  endif
  if block.settings.stat_3_enabled
    assign card_count = card_count | plus: 1
  endif

  assign cert_count = 0
  if block.settings.cert_1_enabled
    assign cert_count = cert_count | plus: 1
  endif
  if block.settings.cert_2_enabled
    assign cert_count = cert_count | plus: 1
  endif
  if block.settings.cert_3_enabled
    assign cert_count = cert_count | plus: 1
  endif
  if block.settings.cert_4_enabled
    assign cert_count = cert_count | plus: 1
  endif
  if block.settings.cert_5_enabled
    assign cert_count = cert_count | plus: 1
  endif
-%}

{%- if card_count > 0 or cert_count > 0 -%}
<div class="no-mobile" style="margin-top: 20px;">
  {%- style -%}
    .proof-stats-{{ block.id }} {
      max-width: 100%;
    }

    /* ── STAT CARDS ── */
    .proof-stats-{{ block.id }} .proof-stats__grid {
      display: grid;
      grid-template-columns: repeat({{ card_count }}, 1fr);
      gap: 12px;
      margin-bottom: 16px;
    }

    .proof-stats-{{ block.id }} .proof-stats__card {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 18px 12px 14px;
      background: {{ block.settings.card_bg_color }};
      border-radius: {{ block.settings.card_border_radius }}px;
      border: 1px solid {{ block.settings.card_border_color }};
    }

    .proof-stats-{{ block.id }} .proof-stats__card-icon-wrap {
      width: {{ block.settings.card_icon_circle_size }}px;
      height: {{ block.settings.card_icon_circle_size }}px;
      border-radius: 50%;
      background: {{ block.settings.icon_circle_bg }};
      border: 1px solid {{ block.settings.card_border_color }};
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .proof-stats-{{ block.id }} .proof-stats__card-icon-wrap img {
      width: {{ block.settings.card_icon_size }}px;
      height: {{ block.settings.card_icon_size }}px;
      object-fit: contain;
    }

    .proof-stats-{{ block.id }} .proof-stats__card-icon-wrap .material-symbols-outlined,
    .proof-stats-{{ block.id }} .proof-stats__card-icon-wrap .material-symbols-rounded {
      font-size: {{ block.settings.card_icon_size }}px;
      color: {{ block.settings.card_icon_color }};
      line-height: 1;
    }

    .proof-stats-{{ block.id }} .proof-stats__number {
      font-size: {{ block.settings.number_font_size }}px;
      font-weight: {{ block.settings.number_font_weight }};
      color: {{ block.settings.number_color }};
      letter-spacing: -0.03em;
      line-height: 1;
      margin-bottom: 4px;
    }

    .proof-stats-{{ block.id }} .proof-stats__card-label {
      font-size: {{ block.settings.card_label_font_size }}px;
      font-weight: {{ block.settings.card_label_font_weight }};
      color: {{ block.settings.label_color }};
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    /* ── CERT BADGES ── */
    .proof-stats-{{ block.id }} .proof-stats__certs {
      display: grid;
      grid-template-columns: repeat({{ cert_count }}, 1fr);
      gap: 8px;
    }

    .proof-stats-{{ block.id }} .proof-stats__cert {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
      padding: 8px 4px 6px;
    }

    .proof-stats-{{ block.id }} .proof-stats__cert-icon-wrap {
      width: {{ block.settings.cert_icon_circle_size }}px;
      height: {{ block.settings.cert_icon_circle_size }}px;
      border-radius: 50%;
      background: {{ block.settings.cert_circle_bg }};
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      overflow: hidden;
    }

    .proof-stats-{{ block.id }} .proof-stats__cert-icon-wrap img {
      width: {{ block.settings.cert_icon_size }}px;
      height: {{ block.settings.cert_icon_size }}px;
      object-fit: contain;
    }

    .proof-stats-{{ block.id }} .proof-stats__cert-icon-wrap .material-symbols-outlined,
    .proof-stats-{{ block.id }} .proof-stats__cert-icon-wrap .material-symbols-rounded {
      font-size: {{ block.settings.cert_icon_size }}px;
      color: {{ block.settings.cert_icon_color }};
      line-height: 1;
    }

    .proof-stats-{{ block.id }} .proof-stats__cert-label {
      font-size: {{ block.settings.cert_label_font_size }}px;
      font-weight: {{ block.settings.cert_label_font_weight }};
      color: {{ block.settings.label_color }};
      letter-spacing: 0.01em;
      line-height: 1.3;
    }
  {%- endstyle -%}

  <div class="proof-stats-{{ block.id }}" {{ block.shopify_attributes }}>

    {%- comment -%} ── STAT CARDS ── {%- endcomment -%}
    {%- if card_count > 0 -%}
      <div class="proof-stats__grid">

        {%- if block.settings.stat_1_enabled -%}
          <div class="proof-stats__card">
            <div class="proof-stats__card-icon-wrap">
              {%- if block.settings.stat_1_icon_img != blank -%}
                <img src="{{ block.settings.stat_1_icon_img | image_url: width: 80 }}" alt="" loading="lazy" width="{{ block.settings.card_icon_size }}" height="{{ block.settings.card_icon_size }}">
              {%- elsif block.settings.stat_1_icon != blank -%}
                {% render 'material-icon', icon: block.settings.stat_1_icon, filled: block.settings.stat_1_icon_filled %}
              {%- endif -%}
            </div>
            <span class="proof-stats__number">{{ block.settings.stat_1_number }}</span>
            <span class="proof-stats__card-label">{{ block.settings.stat_1_label }}</span>
          </div>
        {%- endif -%}

        {%- if block.settings.stat_2_enabled -%}
          <div class="proof-stats__card">
            <div class="proof-stats__card-icon-wrap">
              {%- if block.settings.stat_2_icon_img != blank -%}
                <img src="{{ block.settings.stat_2_icon_img | image_url: width: 80 }}" alt="" loading="lazy" width="{{ block.settings.card_icon_size }}" height="{{ block.settings.card_icon_size }}">
              {%- elsif block.settings.stat_2_icon != blank -%}
                {% render 'material-icon', icon: block.settings.stat_2_icon, filled: block.settings.stat_2_icon_filled %}
              {%- endif -%}
            </div>
            <span class="proof-stats__number">{{ block.settings.stat_2_number }}</span>
            <span class="proof-stats__card-label">{{ block.settings.stat_2_label }}</span>
          </div>
        {%- endif -%}

        {%- if block.settings.stat_3_enabled -%}
          <div class="proof-stats__card">
            <div class="proof-stats__card-icon-wrap">
              {%- if block.settings.stat_3_icon_img != blank -%}
                <img src="{{ block.settings.stat_3_icon_img | image_url: width: 80 }}" alt="" loading="lazy" width="{{ block.settings.card_icon_size }}" height="{{ block.settings.card_icon_size }}">
              {%- elsif block.settings.stat_3_icon != blank -%}
                {% render 'material-icon', icon: block.settings.stat_3_icon, filled: block.settings.stat_3_icon_filled %}
              {%- endif -%}
            </div>
            <span class="proof-stats__number">{{ block.settings.stat_3_number }}</span>
            <span class="proof-stats__card-label">{{ block.settings.stat_3_label }}</span>
          </div>
        {%- endif -%}

      </div>
    {%- endif -%}

    {%- comment -%} ── CERT BADGES ── {%- endcomment -%}
    {%- if cert_count > 0 -%}
      <div class="proof-stats__certs">

        {%- if block.settings.cert_1_enabled -%}
          <div class="proof-stats__cert">
            <div class="proof-stats__cert-icon-wrap">
              {%- if block.settings.cert_1_icon_img != blank -%}
                <img src="{{ block.settings.cert_1_icon_img | image_url: width: 64 }}" alt="" loading="lazy" width="{{ block.settings.cert_icon_size }}" height="{{ block.settings.cert_icon_size }}">
              {%- elsif block.settings.cert_1_icon != blank -%}
                {% render 'material-icon', icon: block.settings.cert_1_icon, filled: block.settings.cert_1_icon_filled %}
              {%- endif -%}
            </div>
            <span class="proof-stats__cert-label">{{ block.settings.cert_1_label }}</span>
          </div>
        {%- endif -%}

        {%- if block.settings.cert_2_enabled -%}
          <div class="proof-stats__cert">
            <div class="proof-stats__cert-icon-wrap">
              {%- if block.settings.cert_2_icon_img != blank -%}
                <img src="{{ block.settings.cert_2_icon_img | image_url: width: 64 }}" alt="" loading="lazy" width="{{ block.settings.cert_icon_size }}" height="{{ block.settings.cert_icon_size }}">
              {%- elsif block.settings.cert_2_icon != blank -%}
                {% render 'material-icon', icon: block.settings.cert_2_icon, filled: block.settings.cert_2_icon_filled %}
              {%- endif -%}
            </div>
            <span class="proof-stats__cert-label">{{ block.settings.cert_2_label }}</span>
          </div>
        {%- endif -%}

        {%- if block.settings.cert_3_enabled -%}
          <div class="proof-stats__cert">
            <div class="proof-stats__cert-icon-wrap">
              {%- if block.settings.cert_3_icon_img != blank -%}
                <img src="{{ block.settings.cert_3_icon_img | image_url: width: 64 }}" alt="" loading="lazy" width="{{ block.settings.cert_icon_size }}" height="{{ block.settings.cert_icon_size }}">
              {%- elsif block.settings.cert_3_icon != blank -%}
                {% render 'material-icon', icon: block.settings.cert_3_icon, filled: block.settings.cert_3_icon_filled %}
              {%- endif -%}
            </div>
            <span class="proof-stats__cert-label">{{ block.settings.cert_3_label }}</span>
          </div>
        {%- endif -%}

        {%- if block.settings.cert_4_enabled -%}
          <div class="proof-stats__cert">
            <div class="proof-stats__cert-icon-wrap">
              {%- if block.settings.cert_4_icon_img != blank -%}
                <img src="{{ block.settings.cert_4_icon_img | image_url: width: 64 }}" alt="" loading="lazy" width="{{ block.settings.cert_icon_size }}" height="{{ block.settings.cert_icon_size }}">
              {%- elsif block.settings.cert_4_icon != blank -%}
                {% render 'material-icon', icon: block.settings.cert_4_icon, filled: block.settings.cert_4_icon_filled %}
              {%- endif -%}
            </div>
            <span class="proof-stats__cert-label">{{ block.settings.cert_4_label }}</span>
          </div>
        {%- endif -%}

        {%- if block.settings.cert_5_enabled -%}
          <div class="proof-stats__cert">
            <div class="proof-stats__cert-icon-wrap">
              {%- if block.settings.cert_5_icon_img != blank -%}
                <img src="{{ block.settings.cert_5_icon_img | image_url: width: 64 }}" alt="" loading="lazy" width="{{ block.settings.cert_icon_size }}" height="{{ block.settings.cert_icon_size }}">
              {%- elsif block.settings.cert_5_icon != blank -%}
                {% render 'material-icon', icon: block.settings.cert_5_icon, filled: block.settings.cert_5_icon_filled %}
              {%- endif -%}
            </div>
            <span class="proof-stats__cert-label">{{ block.settings.cert_5_label }}</span>
          </div>
        {%- endif -%}

      </div>
    {%- endif -%}

  </div>
</div>
{%- endif -%}