{%- comment -%} ── GOOGLE FONT PRELOAD ── {%- endcomment -%}
{% for block in section.blocks %}
  {% if block.type == 'cta_column' %}
    {% if block.settings.italic_font_family == 'georgia-pro' or block.settings.italic_font_family == 'bodoni-moda' or block.settings.italic_font_family == 'instrument-serif' or block.settings.italic_font_family == 'custom_google_font' %}
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      {% if block.settings.italic_font_family == 'georgia-pro' %}
        <link href="https://fonts.googleapis.com/css2?family=Georgia+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
      {% endif %}
      {% if block.settings.italic_font_family == 'bodoni-moda' %}
        <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,700;1,6..96,400;1,6..96,700&display=swap" rel="stylesheet">
      {% endif %}
      {% if block.settings.italic_font_family == 'instrument-serif' %}
        <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
      {% endif %}
      {% if block.settings.italic_font_family == 'custom_google_font' and block.settings.custom_google_font_name != blank %}
        <link href="https://fonts.googleapis.com/css2?family={{ block.settings.custom_google_font_name | replace: ' ', '+' }}:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
      {% endif %}
      {% break %}
    {% endif %}
  {% endif %}
{% endfor %}

{%- liquid
  assign cta_block = nil
  for block in section.blocks
    if block.type == 'cta_column'
      assign cta_block = block
      break
    endif
  endfor
-%}

{%- style -%}
  /* ── Padding & Margin ── */
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.mobile_padding_top }}px;
    padding-bottom: {{ section.settings.mobile_padding_bottom }}px;
  }
  .section-{{ section.id }}-margin {
    margin-top: {{ section.settings.mobile_margin_top }}px;
    margin-bottom: {{ section.settings.mobile_margin_bottom }}px;
  }
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.desktop_padding_top }}px;
      padding-bottom: {{ section.settings.desktop_padding_bottom }}px;
    }
    .section-{{ section.id }}-margin {
      margin-top: {{ section.settings.desktop_margin_top }}px;
      margin-bottom: {{ section.settings.desktop_margin_bottom }}px;
    }
  }

  /* ── Custom color scheme ── */
  .color-scheme-{{ section.id }}.color-custom {
    --color-background: {{ section.settings.custom_colors_background.red }}, {{ section.settings.custom_colors_background.green }}, {{ section.settings.custom_colors_background.blue }};
    --gradient-background: {% if section.settings.custom_gradient_background != blank %}{{ section.settings.custom_gradient_background }}{% else %}{{ section.settings.custom_colors_background }}{% endif %};
    {% if section.settings.custom_image_background != blank %}
      {% # theme-check-disable %}
      --gradient-background: url('{{ section.settings.custom_image_background | img_url: 'master' }}') center center / cover no-repeat;
      {% # theme-check-enable %}
    {% endif %}
    --color-foreground: {{ section.settings.custom_colors_text.red }}, {{ section.settings.custom_colors_text.green }}, {{ section.settings.custom_colors_text.blue }};
    --color-button: {{ section.settings.custom_colors_button_bg.red }}, {{ section.settings.custom_colors_button_bg.green }}, {{ section.settings.custom_colors_button_bg.blue }};
    --color-button-text: {{ section.settings.custom_colors_button_text.red }}, {{ section.settings.custom_colors_button_text.green }}, {{ section.settings.custom_colors_button_text.blue }};
  }
  {% if section.settings.custom_mobile_image_background != blank %}
    @media screen and (max-width: 749px) {
      .color-scheme-{{ section.id }}.color-custom {
        {% # theme-check-disable %}
        --gradient-background: url('{{ section.settings.custom_mobile_image_background | img_url: 'master' }}') center center / cover no-repeat;
        {% # theme-check-enable %}
      }
    }
  {% endif %}

  /* ── Layout ── */
  #ClinicalStats-{{ section.id }} .cs-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 62px;
    align-items: flex-start;
  }
  #ClinicalStats-{{ section.id }} .cs-stats-grid {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    width: 100%;
    max-width: 55%;
    order: {% if section.settings.stats_position == 'right' %}2{% else %}1{% endif %};
  }
  #ClinicalStats-{{ section.id }} .cs-cta-col {
    width: calc(45% - 62px);
    order: {% if section.settings.stats_position == 'right' %}1{% else %}2{% endif %};
  }
  #ClinicalStats-{{ section.id }} .cs-stat-block {
    text-align: left;
    width: 50%;
    position: relative;
  }
  #ClinicalStats-{{ section.id }} .cs-stats-grid > .cs-stat-block:nth-child(n+3) {
    border-top: 1px solid {{ section.settings.stat_divider_color }};
    padding-top: 13px;
    margin-top: 13px;
  }
  #ClinicalStats-{{ section.id }} .cs-stat-percentage {
    font-family: 'Clash Grotesk', sans-serif;
    font-weight: 500;
    font-size: 39.86px;
    line-height: 42px;
    letter-spacing: 0;
    color: {{ section.settings.stat_number_color }};
  }
  {% if section.settings.stat_number_gradient != blank %}
    #ClinicalStats-{{ section.id }} .cs-stat-percentage {
      background: {{ section.settings.stat_number_gradient }};
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  {% endif %}
  #ClinicalStats-{{ section.id }} .cs-stat-head {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0;
    margin-bottom: 4px;
    width: 100%;
    display: inline-block;
  }
  #ClinicalStats-{{ section.id }} .cs-stat-caption {
    font-weight: 400;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0;
    margin-bottom: 0;
    display: inline-block;
  }

  /* ── CTA column — driven by block settings via Liquid assign ── */
  {% if cta_block %}
    /* ── Italic em styling on heading ── */
    #ClinicalStats-{{ section.id }} .cs-heading em {
      text-decoration: none !important;
      font-style: italic !important;
      {% if cta_block.settings.italic_font_family == 'georgia-pro' %}
        font-family: 'Georgia Pro', Georgia, serif !important;
      {% elsif cta_block.settings.italic_font_family == 'bodoni-moda' %}
        font-family: 'Bodoni Moda', Georgia, serif !important;
      {% elsif cta_block.settings.italic_font_family == 'instrument-serif' %}
        font-family: 'Instrument Serif', Georgia, serif !important;
      {% elsif cta_block.settings.italic_font_family == 'custom_google_font' and cta_block.settings.custom_google_font_name != blank %}
        font-family: '{{ cta_block.settings.custom_google_font_name }}', Georgia, serif !important;
      {% endif %}
    }

    #ClinicalStats-{{ section.id }} .cs-heading {
      font-weight: 500;
      line-height: 1.25;
      letter-spacing: 0;
      text-align: {{ cta_block.settings.heading_alignment }};
      text-transform: capitalize;
      margin-bottom: 20px;
    }
    {% if cta_block.settings.enable_heading_gradient %}
      #ClinicalStats-{{ section.id }} .cs-heading strong {
        background: {{ cta_block.settings.heading_highlight_gradient }};
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
    {% else %}
      #ClinicalStats-{{ section.id }} .cs-heading strong {
        color: {{ cta_block.settings.heading_highlight_color }};
        display: inline-block;
        width: 100%;
      }
    {% endif %}
    #ClinicalStats-{{ section.id }} .cs-subheading {
      font-weight: 400;
      font-size: 17px;
      line-height: 1.25;
      letter-spacing: 0;
      text-align: {{ cta_block.settings.heading_alignment }};
      margin-bottom: 25px;
      max-width: 430px;
      margin-left: auto;
      margin-right: auto;
    }
  {% endif %}

  #ClinicalStats-{{ section.id }} .cs-btn {
    display: flex;
    max-width: 100%;
    height: 45px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
  }
  #ClinicalStats-{{ section.id }} .cs-guarantee {
    display: flex;
    align-items: center;
    gap: 5.7px;
    font-size: 14px;
    line-height: 17.6px;
    margin: 8px 0 0;
    justify-content: center;
  }
  #ClinicalStats-{{ section.id }} .cs-guarantee .material-symbols-outlined {
    font-size: 18px;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
  }

  /* ── Mobile CTA (inside stats grid) ── */
  #ClinicalStats-{{ section.id }} .cs-cta-mobile {
    display: none;
    width: 100%;
    text-align: center;
    margin-top: 40px;
  }

  /* ── Responsive ── */
  @media screen and (max-width: 991px) {
    #ClinicalStats-{{ section.id }} .cs-inner {
      flex-direction: column-reverse;
      gap: 25px;
    }
    #ClinicalStats-{{ section.id }} .cs-stats-grid,
    #ClinicalStats-{{ section.id }} .cs-cta-col {
      width: 100%;
      max-width: 100%;
      order: unset;
    }
    #ClinicalStats-{{ section.id }} .cs-stat-block {
      width: 100%;
    }
    #ClinicalStats-{{ section.id }} .cs-stats-grid > .cs-stat-block:nth-child(n+2) {
      border-top: 1px solid {{ section.settings.stat_divider_color }};
      padding-top: 23px;
      margin-top: 25px;
    }
    #ClinicalStats-{{ section.id }} .cs-stats-grid > .cs-stat-block:first-child {
      border-top: none;
      padding-top: 0;
      margin-top: 0;
    }
    #ClinicalStats-{{ section.id }} .cs-stat-caption br {
      display: none;
    }
    {% if cta_block %}
      #ClinicalStats-{{ section.id }} .cs-heading {
        margin-bottom: 13px;
        text-align: {{ cta_block.settings.heading_alignment_mobile }};
      }
      #ClinicalStats-{{ section.id }} .cs-subheading {
        font-size: 16px;
        text-align: {{ cta_block.settings.heading_alignment_mobile }};
        margin-bottom: 0;
      }
    {% endif %}
    #ClinicalStats-{{ section.id }} .cs-btn--desktop { display: none; }
    #ClinicalStats-{{ section.id }} .cs-guarantee--desktop { display: none; }
    #ClinicalStats-{{ section.id }} .cs-cta-mobile { display: block; }
  }
  @media screen and (min-width: 992px) {
    #ClinicalStats-{{ section.id }} .cs-cta-mobile { display: none !important; }
  }
{%- endstyle -%}

{%- comment -%} ── Material Symbols ── {%- endcomment -%}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" media="print" onload="this.media='all'">

<div
  id="ClinicalStats-{{ section.id }}"
  class="clinical-stats color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient content-for-grouping animate-section animate--hidden {% unless section.settings.visibility == 'always-display' %}{{ section.settings.visibility }}{% endunless %} section-{{ section.id }}-margin"
>
  {% if section.settings.display_id %}
    <copy-button class="section-id-btn button" data-content="#shopify-section-{{ section.id }}" data-success="false">
      <span class="copy-text">Click to copy section ID</span>
      <span class="copy-success">ID copied successfully!</span>
    </copy-button>
  {% endif %}

  <div class="page-width section-{{ section.id }}-padding">
    <div class="cs-inner">

      {%- comment -%} ── STATS GRID ── {%- endcomment -%}
      <div class="cs-stats-grid">
        {%- for block in section.blocks -%}
          {%- if block.type == 'stat' -%}
            <div class="cs-stat-block animate-item animate-item--child" style="--index: {{ forloop.index0 }};" {{ block.shopify_attributes }}>
              <div
                class="cs-stat-percentage"
                data-target="{{ block.settings.percentage }}"
              >{{ block.settings.percentage }}%</div>
              <span class="cs-stat-head">{{ block.settings.heading }}</span>
              <span class="cs-stat-caption">{{ block.settings.caption }}</span>
            </div>
          {%- endif -%}
        {%- endfor -%}

        {%- comment -%} Mobile CTA — rendered inside stats grid so it sits below stats {%- endcomment -%}
        {%- if cta_block != nil and cta_block.settings.button_label != blank -%}
          <div class="cs-cta-mobile">
            <a href="{{ cta_block.settings.button_url }}" class="cs-btn button">
              {{ cta_block.settings.button_label }}
            </a>
            {% if cta_block.settings.guarantee_text != blank %}
              <div class="cs-guarantee">
                <span class="material-symbols-outlined">{{ cta_block.settings.guarantee_icon }}</span>
                {{ cta_block.settings.guarantee_text }}
              </div>
            {% endif %}
          </div>
        {%- endif -%}
      </div>

      {%- comment -%} ── CTA COLUMN ── {%- endcomment -%}
      {%- if cta_block != nil -%}
        <div class="cs-cta-col animate-item animate-item--child" style="--index: {{ section.blocks.size }};" {{ cta_block.shopify_attributes }}>
          {%- unless cta_block.settings.heading == blank -%}
            {%- liquid
              assign heading_tag = cta_block.settings.heading_size
              if heading_tag == 'h0'
                assign heading_tag = 'h1'
              endif
            -%}
            <{{ heading_tag }}
              class="cs-heading {{ cta_block.settings.heading_size }} title-with-highlight"
              style="--hightlight-color: {{ cta_block.settings.heading_highlight_color }}; --gradient-text: {% if cta_block.settings.enable_heading_gradient %}{{ cta_block.settings.heading_highlight_gradient }}{% else %}none{% endif %};"
            >
              {{- cta_block.settings.heading -}}
            </{{ heading_tag }}>
          {%- endunless -%}

          {% if cta_block.settings.subheading != blank %}
            <p class="cs-subheading">{{ cta_block.settings.subheading }}</p>
          {% endif %}

          {% if cta_block.settings.button_label != blank %}
            <a href="{{ cta_block.settings.button_url }}" class="cs-btn button cs-btn--desktop">
              {{ cta_block.settings.button_label }}
            </a>
            {% if cta_block.settings.guarantee_text != blank %}
              <div class="cs-guarantee cs-guarantee--desktop">
                <span class="material-symbols-outlined">{{ cta_block.settings.guarantee_icon }}</span>
                {{ cta_block.settings.guarantee_text }}
              </div>
            {% endif %}
          {% endif %}
        </div>
      {%- endif -%}

    </div>
  </div>
</div>

<script>
(function () {
  var section = document.getElementById('ClinicalStats-{{ section.id }}');
  if (!section) return;

  var counters = section.querySelectorAll('.cs-stat-percentage');

  function animateCount(el) {
    var target = parseInt(el.getAttribute('data-target'), 10);
    var current = 0;
    var stepTime = Math.max(10, 1000 / target);
    var step = function () {
      current++;
      el.textContent = current + '%';
      if (current < target) setTimeout(step, stepTime);
    };
    step();
  }

  var observer = new IntersectionObserver(function (entries, obs) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        counters.forEach(function (el) {
          if (!el.classList.contains('cs-counted')) {
            el.classList.add('cs-counted');
            animateCount(el);
          }
        });
        obs.unobserve(entry.target);
      }
    });
  }, { threshold: 0.5 });

  observer.observe(section);
})();
</script>

{% schema %}
{
  "name": "Clinical stats CTA",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "default": false,
      "info": "ID can also be put inside any button link and the button will scroll to this section."
    },
    {
      "type": "select",
      "id": "visibility",
      "label": "Display on",
      "options": [
        { "value": "always-display", "label": "All devices"  },
        { "value": "mobile-hidden",  "label": "Desktop only" },
        { "value": "desktop-hidden", "label": "Mobile only"  }
      ],
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "stats_position",
      "label": "Stats grid position (desktop)",
      "options": [
        { "value": "left",  "label": "Left"  },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },
    {
      "type": "header",
      "content": "Stat number style"
    },
    {
      "type": "color",
      "id": "stat_number_color",
      "label": "Stat number color",
      "default": "#2F465F"
    },
    {
      "type": "color_background",
      "id": "stat_number_gradient",
      "label": "Stat number gradient",
      "info": "If set, overrides the solid color above."
    },
    {
      "type": "color",
      "id": "stat_divider_color",
      "label": "Stat divider color",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "Color scheme"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "label": "Color scheme",
      "options": [
        { "value": "accent-1",     "label": "Accent 1"     },
        { "value": "accent-2",     "label": "Accent 2"     },
        { "value": "background-1", "label": "Background 1" },
        { "value": "background-2", "label": "Background 2" },
        { "value": "inverse",      "label": "Inverse"      },
        { "value": "custom",       "label": "Custom"       }
      ],
      "default": "background-1"
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "mobile_padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile top padding",
      "default": 40
    },
    {
      "type": "range",
      "id": "mobile_padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile bottom padding",
      "default": 40
    },
    {
      "type": "range",
      "id": "desktop_padding_top",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "Desktop top padding",
      "default": 84
    },
    {
      "type": "range",
      "id": "desktop_padding_bottom",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "Desktop bottom padding",
      "default": 80
    },
    {
      "type": "header",
      "content": "Section margin"
    },
    {
      "type": "range",
      "id": "mobile_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile top margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Mobile bottom margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Desktop top margin",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Desktop bottom margin",
      "default": 0
    },
    {
      "type": "header",
      "content": "Custom color scheme",
      "info": "Applied when Color scheme is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "label": "Background color",
      "default": "#014c3e",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Gradient background",
      "info": "Replaces Background color when set.",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "image_picker",
      "id": "custom_image_background",
      "label": "Image background",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "image_picker",
      "id": "custom_mobile_image_background",
      "label": "Mobile image background",
      "info": "If empty, the desktop image is used on mobile.",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "label": "Text color",
      "default": "#FFFFFF",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "color",
      "id": "custom_colors_button_bg",
      "label": "Button background color",
      "default": "#E3FFDE",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    },
    {
      "type": "color",
      "id": "custom_colors_button_text",
      "label": "Button text color",
      "default": "#014c3e",
      "visible_if": "{{ section.settings.color_scheme == 'custom' }}"
    }
  ],
  "blocks": [
    {
      "type": "stat",
      "name": "Stat item",
      "settings": [
        {
          "type": "range",
          "id": "percentage",
          "min": 1,
          "max": 100,
          "step": 1,
          "unit": "%",
          "label": "Percentage",
          "default": 94
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Stat heading",
          "default": "Said they felt fewer sick days"
        },
        {
          "type": "text",
          "id": "caption",
          "label": "Stat caption",
          "default": "after taking consistently for 2+ weeks"
        }
      ]
    },
    {
      "type": "cta_column",
      "name": "CTA column",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "label": "Heading",
          "default": "<strong>Clinically Proven.</strong> More Energy. A Healthier Gut.",
          "info": "Bold words are highlighted with the color set below."
        },
        {
          "type": "select",
          "id": "heading_size",
          "label": "Heading size",
          "options": [
            { "value": "h3", "label": "Small"       },
            { "value": "h2", "label": "Medium"      },
            { "value": "h1", "label": "Large"       },
            { "value": "h0", "label": "Extra large" }
          ],
          "default": "h2"
        },
        {
          "type": "select",
          "id": "heading_alignment",
          "label": "Heading alignment (desktop)",
          "options": [
            { "value": "left",   "label": "Left"   },
            { "value": "center", "label": "Center" },
            { "value": "right",  "label": "Right"  }
          ],
          "default": "center"
        },
        {
          "type": "select",
          "id": "heading_alignment_mobile",
          "label": "Heading alignment (mobile)",
          "options": [
            { "value": "left",   "label": "Left"   },
            { "value": "center", "label": "Center" },
            { "value": "right",  "label": "Right"  }
          ],
          "default": "left"
        },
        {
          "type": "header",
          "content": "Bold text highlight"
        },
        {
          "type": "color",
          "id": "heading_highlight_color",
          "label": "Highlight color",
          "default": "#2F465F"
        },
        {
          "type": "checkbox",
          "id": "enable_heading_gradient",
          "label": "Use gradient for bold text",
          "default": false,
          "info": "Overrides the solid highlight color with a gradient."
        },
        {
          "type": "color_background",
          "id": "heading_highlight_gradient",
          "label": "Bold text gradient",
          "visible_if": "{{ block.settings.enable_heading_gradient == true }}"
        },
        {
          "type": "header",
          "content": "Italic text styling",
          "info": "Controls how italic text in the heading is displayed."
        },
        {
          "type": "select",
          "id": "italic_font_family",
          "label": "Italic font family",
          "options": [
            { "value": "theme",             "label": "Theme default"    },
            { "value": "georgia-pro",       "label": "Georgia Pro"      },
            { "value": "bodoni-moda",       "label": "Bodoni Moda"      },
            { "value": "instrument-serif",  "label": "Instrument Serif" },
            { "value": "custom_google_font","label": "Custom Google Font" }
          ],
          "default": "theme"
        },
        {
          "type": "text",
          "id": "custom_google_font_name",
          "label": "Custom Google Font name",
          "info": "Exact font name as it appears on fonts.google.com, e.g. Playfair Display",
          "visible_if": "{{ block.settings.italic_font_family == 'custom_google_font' }}"
        },
        {
          "type": "header",
          "content": "Subheading"
        },
        {
          "type": "text",
          "id": "subheading",
          "label": "Subheading",
          "default": "When clean, plant-based ingredients meet clinical potency, the results speak for themselves."
        },
        {
          "type": "header",
          "content": "Button"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label",
          "default": "Try Risk-Free Today"
        },
        {
          "type": "url",
          "id": "button_url",
          "label": "Button URL"
        },
        {
          "type": "header",
          "content": "Guarantee badge"
        },
        {
          "type": "text",
          "id": "guarantee_text",
          "label": "Guarantee text",
          "default": "30-day money back guarantee"
        },
        {
          "type": "text",
          "id": "guarantee_icon",
          "label": "Material icon name",
          "default": "verified_user",
          "info": "Any icon name from fonts.google.com/icons — e.g. verified_user, shield, lock"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Clinical stats CTA",
      "category": "Stats / Results",
      "settings": {
        "visibility": "always-display",
        "stats_position": "left",
        "color_scheme": "background-1",
        "custom_colors_background": "#014c3e",
        "custom_colors_text": "#FFFFFF",
        "custom_colors_button_bg": "#E3FFDE",
        "custom_colors_button_text": "#014c3e",
        "stat_number_color": "#2F465F",
        "desktop_padding_top": 84,
        "desktop_padding_bottom": 80,
        "mobile_padding_top": 40,
        "mobile_padding_bottom": 40
      },
      "blocks": [
        {
          "type": "stat",
          "settings": {
            "percentage": 94,
            "heading": "Said they felt fewer sick days",
            "caption": "after taking consistently for 2+ weeks"
          }
        },
        {
          "type": "stat",
          "settings": {
            "percentage": 96,
            "heading": "Would recommend to a friend",
            "caption": "for natural immune and gut support"
          }
        },
        {
          "type": "stat",
          "settings": {
            "percentage": 92,
            "heading": "Noticed improved digestion & less bloating",
            "caption": "especially after meals"
          }
        },
        {
          "type": "stat",
          "settings": {
            "percentage": 89,
            "heading": "Prefer this formula",
            "caption": "over other oregano supplements they've tried"
          }
        },
        {
          "type": "cta_column",
          "settings": {
            "heading": "<strong>Clinically Proven.</strong> More Energy. A Healthier Gut.",
            "heading_size": "h2",
            "heading_alignment": "center",
            "heading_alignment_mobile": "left",
            "heading_highlight_color": "#2F465F",
            "subheading": "When clean, plant-based ingredients meet clinical potency, the results speak for themselves.",
            "button_label": "Try Risk-Free Today",
            "guarantee_text": "30-day money back guarantee",
            "guarantee_icon": "verified_user"
          }
        }
      ]
    }
  ]
}
{% endschema %}