{% comment %} interactive-card-v2.liquid {% endcomment %}

{% if section.settings.italic_font_family == 'georgia-pro' or section.settings.italic_font_family == 'bodoni-moda' or section.settings.italic_font_family == 'instrument-serif' or section.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 section.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 section.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,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700&display=swap" rel="stylesheet">
  {% endif %}
  {% if section.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 section.settings.italic_font_family == 'custom_google_font' and section.settings.custom_google_font_name != blank %}
    <link href="https://fonts.googleapis.com/css2?family={{ section.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 %}
{% endif %}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.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 }}-margin {
      margin-top: {{ section.settings.desktop_margin_top }}px;
      margin-bottom: {{ section.settings.desktop_margin_bottom }}px;
    }
  }

  .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 }};
  }

  {% if section.settings.custom_mobile_image_background != blank %}
    @media screen and (max-width: 740px) {
      .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 %}

  /* Heading italic style */
  #InteractiveCardV2-{{ section.id }} .icv2-heading em {
    {% if section.settings.italic_style == 'italic' %}
      text-decoration: none !important;
      font-style: italic !important;
    {% elsif section.settings.italic_style == 'font_family' %}
      font-style: italic !important;
      text-decoration: none !important;
      {% if section.settings.italic_font_family == 'georgia-pro' %}
        font-family: 'Georgia Pro', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'bodoni-moda' %}
        font-family: 'Bodoni Moda', serif !important;
      {% elsif section.settings.italic_font_family == 'instrument-serif' %}
        font-family: 'Instrument Serif', serif !important;
      {% elsif section.settings.italic_font_family == 'custom_google_font' and section.settings.custom_google_font_name != blank %}
        font-family: '{{ section.settings.custom_google_font_name }}', sans-serif !important;
      {% endif %}
      {% unless section.settings.italic_font_weight == 'inherit' %}
        font-weight: {{ section.settings.italic_font_weight }} !important;
      {% endunless %}
    {% else %}
      text-decoration: underline !important;
      font-style: normal !important;
      text-decoration-color: {{ section.settings.underlinetextcolor }} !important;
      text-decoration-thickness: {{ section.settings.underlinethickness }}px !important;
    {% endif %}
  }

  {% if section.settings.enable_gradient %}
    #InteractiveCardV2-{{ section.id }} .icv2-heading strong {
      background: {{ section.settings.title_gradient_background }};
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-style: normal;
    }
  {% endif %}

  /* ── Section layout ── */
  #InteractiveCardV2-{{ section.id }} .icv2-inner {
    text-align: {{ section.settings.heading_alignment }};
  }

  #InteractiveCardV2-{{ section.id }} .icv2-heading-wrap {
    margin-bottom: 40px;
  }

  #InteractiveCardV2-{{ section.id }} .icv2-heading {
    --hightlight-color: {{ section.settings.title_highlight_color }};
    --gradient-text: {{ section.settings.title_gradient_background }};
  }

  /* ── Eyebrow ── */
  #InteractiveCardV2-{{ section.id }} .icv2-eyebrow-wrap {
    text-align: {{ section.settings.heading_alignment }};
    margin-bottom: {{ section.settings.eyebrow_bottom_margin }}px;
  }

  #InteractiveCardV2-{{ section.id }} .icv2-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: {{ section.settings.eyebrow_bg_color }};
    color: {{ section.settings.eyebrow_text_color }};
    font-size: {{ section.settings.eyebrow_font_size }}px;
    height: {{ section.settings.eyebrow_height }}px;
    border-radius: {{ section.settings.eyebrow_border_radius }}px;
    padding: 0 16px;
    font-weight: 500;
    line-height: 1;
  }

  /* ── Cards grid ── */
  #InteractiveCardV2-{{ section.id }} .icv2-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: {{ section.settings.card_gap }}px;
    align-items: stretch;
  }

  #InteractiveCardV2-{{ section.id }} .icv2-card {
    background: {{ section.settings.card_bg_color }};
    border-radius: {{ section.settings.card_border_radius }}px;
    border: {{ section.settings.card_border_width }}px solid {{ section.settings.card_border_color }};
    padding: {{ section.settings.card_padding }}px;
    width: calc({{ 100.0 | divided_by: section.settings.cards_per_row }}% - {{ section.settings.card_gap }}px);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    /* Flex column so image fills top, label+title are always at the same vertical start */
    display: flex;
    flex-direction: column;
  }

  @media screen and (max-width: 991px) {
    #InteractiveCardV2-{{ section.id }} .icv2-card {
      width: 100%;
      text-align: left;
      border-radius: {{ section.settings.card_border_radius | times: 0.5 | round: 0 }}px;
      padding: 9px 16px 9px 8px;
      display: block; /* reset to block for mobile row layout */
    }
  }

  /* Card image — fixed aspect ratio so all images are identical height */
  #InteractiveCardV2-{{ section.id }} .icv2-card-img-wrap {
    width: 100%;
    border-radius: {{ section.settings.card_image_radius }}px;
    overflow: hidden;
    display: block;
    aspect-ratio: {{ section.settings.card_image_aspect_ratio }};
  }

  #InteractiveCardV2-{{ section.id }} .icv2-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: {{ section.settings.card_image_radius }}px;
    display: block;
  }

  @media screen and (max-width: 991px) {
    #InteractiveCardV2-{{ section.id }} .icv2-card-img-wrap {
      max-width: 88px;
      flex-shrink: 0;
      aspect-ratio: 1 / 1;
    }
    #InteractiveCardV2-{{ section.id }} .icv2-card-img {
      max-width: 88px;
    }
  }

  /* Card label pill */
  #InteractiveCardV2-{{ section.id }} .icv2-card-label {
    display: inline-block;
    background: {{ section.settings.label_bg_color }};
    color: {{ section.settings.label_text_color }};
    border-radius: {{ section.settings.label_border_radius }}px;
    font-size: {{ section.settings.label_font_size }}px;
    line-height: {{ section.settings.label_height }}px;
    min-width: 90px;
    padding: 0 8px;
    font-weight: 500;
    margin-top: {{ section.settings.label_margin_top }}px;
    margin-bottom: {{ section.settings.label_margin_bottom }}px;
  }

  @media screen and (max-width: 991px) {
    #InteractiveCardV2-{{ section.id }} .icv2-card-label {
      font-size: {{ section.settings.label_font_size | times: 0.75 | round: 0 }}px;
      line-height: 20px;
      min-width: 76px;
      margin-top: 0;
      margin-bottom: 6px;
    }
  }

  /* Card heading */
  #InteractiveCardV2-{{ section.id }} .icv2-card-title {
    font-size: {{ section.settings.card_title_size_desktop }}px;
    line-height: 1.24;
    font-weight: {{ section.settings.card_title_weight }};
    margin: 0 0 6px;
    text-align: center;
  }

  @media screen and (max-width: 991px) {
    #InteractiveCardV2-{{ section.id }} .icv2-card-title {
      font-size: {{ section.settings.card_title_size_mobile }}px;
      text-align: left;
      margin-bottom: 0;
    }
  }

  /* Toggle button */
  #InteractiveCardV2-{{ section.id }} .icv2-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 11px;
    position: relative;
    z-index: 2;
    pointer-events: none; /* entire card is clickable */
  }

  #InteractiveCardV2-{{ section.id }} .icv2-toggle svg {
    background: #fff;
    border: 0.22px solid rgba(0,0,0,0.3);
    width: 27px;
    height: 27px;
    border-radius: 50%;
    padding: 6px;
    display: block;
  }

  @media screen and (max-width: 991px) {
    #InteractiveCardV2-{{ section.id }} .icv2-toggle {
      position: absolute;
      right: 16px;
      {% if section.settings.mobile_toggle_position == 'top' %}
        top: 12px;
        transform: none;
      {% else %}
        top: 50%;
        transform: translateY(-50%);
      {% endif %}
      width: auto;
      margin: 0;
      left: auto;
    }
  }

  /* Details panel */
  #InteractiveCardV2-{{ section.id }} .icv2-details {
    font-size: {{ section.settings.details_font_size }}px;
    line-height: 1.4;
    font-weight: 400;
    text-align: left;
    color: {{ section.settings.details_text_color }};
  }

  #InteractiveCardV2-{{ section.id }} .icv2-details p {
    margin-bottom: 18px;
  }

  #InteractiveCardV2-{{ section.id }} .icv2-details p:last-child {
    margin-bottom: 0;
  }

  /* ── Desktop reveal effect ── */
  @media screen and (min-width: 992px) {
    #InteractiveCardV2-{{ section.id }} .icv2-card-front {
      display: flex;
      flex-direction: column;
      flex: 1;
      transition: opacity 0.25s ease;
    }

    #InteractiveCardV2-{{ section.id }} .icv2-details-overlay {
      position: absolute;
      inset: 0;
      background: {{ section.settings.card_bg_color }};
      padding: {{ section.settings.card_padding }}px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    }

    #InteractiveCardV2-{{ section.id }} .icv2-card.active .icv2-card-front {
      opacity: 0;
      pointer-events: none;
    }

    #InteractiveCardV2-{{ section.id }} .icv2-card.active .icv2-details-overlay {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 0.25s ease, visibility 0s linear 0s;
    }

    #InteractiveCardV2-{{ section.id }} .icv2-toggle {
      pointer-events: none;
      margin-top: auto;
    }
  }

  /* ── Mobile layout ── */
  @media screen and (max-width: 991px) {
    #InteractiveCardV2-{{ section.id }} .icv2-card-front {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    #InteractiveCardV2-{{ section.id }} .icv2-card-front-text {
      flex: 1;
      min-width: 0;
    }

    /* Hide overlay by default on mobile — JS slides it open */
    #InteractiveCardV2-{{ section.id }} .icv2-details-overlay {
      display: none;
    }

    /* JS adds this class to show it via max-height animation */
    #InteractiveCardV2-{{ section.id }} .icv2-details-overlay.icv2-mobile-open {
      display: block;
      padding: 16px 15px;
    }
  }

  /* Hardware acceleration for scroll */
  .color-scheme-{{ section.id }}.color-custom {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
{%- endstyle -%}

<div
  id="InteractiveCardV2-{{ section.id }}"
  class="color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient content-for-grouping animate-section{% unless request.design_mode %} animate--hidden{% endunless %} {{ section.settings.visibility }} 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="icv2-inner animate-item{% unless request.design_mode %} animate-item--child{% endunless %}" style="--index: 0;">

      {%- if section.settings.enable_eyebrow and section.settings.eyebrow != blank -%}
        <div class="icv2-eyebrow-wrap animate-item{% unless request.design_mode %} animate-item--child{% endunless %}" style="--index: 0;">
          <span class="icv2-eyebrow">{{ section.settings.eyebrow | escape }}</span>
        </div>
      {%- endif -%}

      {%- unless section.settings.title == blank -%}
        {%- if section.settings.heading_two_lines and section.settings.heading_line_two != blank -%}
          {%- assign heading_line_two_with_br = '<br>' | append: section.settings.heading_line_two -%}
          {%- assign heading_output = section.settings.title
            | replace: section.settings.heading_line_two, heading_line_two_with_br
          -%}
        {%- else -%}
          {%- assign heading_output = section.settings.title -%}
        {%- endif -%}
        <div class="icv2-heading-wrap animate-item{% unless request.design_mode %} animate-item--child{% endunless %}" style="--index: 1;">
          <h2
            class="icv2-heading title-with-highlight {{ section.settings.heading_size }}"
            style="--hightlight-color: {{ section.settings.title_highlight_color }}; --gradient-text: {{ section.settings.title_gradient_background }};"
          >
            {{ heading_output }}
          </h2>
        </div>
      {%- endunless -%}

      {%- if section.blocks.size > 0 -%}
        <div class="icv2-grid animate-item{% unless request.design_mode %} animate-item--child{% endunless %}" style="--index: 2;">
          {%- for block in section.blocks -%}
            <div
              class="icv2-card"
              data-index="{{ forloop.index0 }}"
              {{ block.shopify_attributes }}
            >
              {%- comment -%} Front face {%- endcomment -%}
              <div class="icv2-card-front">
                {%- if block.settings.image != blank -%}
                  <div class="icv2-card-img-wrap">
                    <img
                      class="icv2-card-img"
                      src="{{ block.settings.image | img_url: '300x' }}"
                      alt="{{ block.settings.image.alt | escape }}"
                      width="auto"
                      height="auto"
                      loading="{% if forloop.first %}eager{% else %}lazy{% endif %}"
                      {% if forloop.first %}fetchpriority="high"{% endif %}
                    >
                  </div>
                {%- endif -%}

                <div class="icv2-card-front-text">
                  {%- if block.settings.label != blank -%}
                    <div class="icv2-card-label">{{ block.settings.label | escape }}</div>
                  {%- endif -%}

                  {%- if block.settings.heading != blank -%}
                    <h3 class="icv2-card-title">{{ block.settings.heading }}</h3>
                  {%- endif -%}
                </div>
              </div>

              {%- comment -%} Details overlay (desktop flip / mobile accordion) {%- endcomment -%}
              <div class="icv2-details-overlay">
                {%- if block.settings.details != blank -%}
                  <div class="icv2-details rte">{{ block.settings.details }}</div>
                {%- endif -%}
              </div>

              {%- comment -%} Toggle button (visual only on desktop; functional on mobile) {%- endcomment -%}
              <button class="icv2-toggle" aria-expanded="false" aria-label="Toggle details" tabindex="-1">
                <span class="icv2-icon-plus">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M5.72069 11.033V5.96898H0.656637V5.38515H5.72069V0.321103H6.30451V5.38515H11.3686V5.96898H6.30451V11.033H5.72069Z" fill="currentColor"/>
                  </svg>
                </span>
                <span class="icv2-icon-minus" style="display: none;">
                  <svg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M7.97719 0.0678547V0.65168H0.920525V0.0678547H7.97719Z" fill="currentColor"/>
                  </svg>
                </span>
              </button>
            </div>
          {%- endfor -%}
        </div>
      {%- endif -%}

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

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

  function isMobile() {
    return window.innerWidth < 992;
  }

  function closeAll() {
    sectionEl.querySelectorAll('.icv2-card').forEach(function (card) {
      var overlay = card.querySelector('.icv2-details-overlay');
      card.classList.remove('active');
      card.querySelector('.icv2-toggle').setAttribute('aria-expanded', 'false');
      card.querySelector('.icv2-icon-plus').style.display = '';
      card.querySelector('.icv2-icon-minus').style.display = 'none';
      if (overlay) {
        // Collapse mobile accordion
        overlay.style.maxHeight = '0';
        overlay.classList.remove('icv2-mobile-open');
        overlay.addEventListener('transitionend', function handler() {
          if (!overlay.classList.contains('icv2-mobile-open')) {
            overlay.style.maxHeight = '';
            overlay.style.overflow = '';
          }
          overlay.removeEventListener('transitionend', handler);
        });
      }
    });
  }

  sectionEl.querySelectorAll('.icv2-card').forEach(function (card) {
    card.addEventListener('click', function () {
      var isActive = card.classList.contains('active');

      closeAll();

      if (!isActive) {
        card.classList.add('active');
        card.querySelector('.icv2-toggle').setAttribute('aria-expanded', 'true');
        card.querySelector('.icv2-icon-plus').style.display = 'none';
        card.querySelector('.icv2-icon-minus').style.display = '';

        if (isMobile()) {
          var overlay = card.querySelector('.icv2-details-overlay');
          if (overlay) {
            overlay.classList.add('icv2-mobile-open');
            overlay.style.overflow = 'hidden';
            overlay.style.maxHeight = '0';
            overlay.style.transition = 'max-height 0.35s ease';
            requestAnimationFrame(function () {
              overlay.style.maxHeight = overlay.scrollHeight + 'px';
              overlay.addEventListener('transitionend', function handler() {
                overlay.style.maxHeight = '';
                overlay.style.overflow = '';
                overlay.removeEventListener('transitionend', handler);
              });
            });
          }
        }
      }
    });
  });

  // Reset on resize across breakpoint
  var lastMobile = isMobile();
  window.addEventListener('resize', function () {
    var nowMobile = isMobile();
    if (nowMobile !== lastMobile) {
      closeAll();
      lastMobile = nowMobile;
    }
  });
})();
</script>

{% schema %}
{
  "name": "Interactive cards V2",
  "class": "section",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID is used in the Sections group section to merge 2 sections. ID can also be put inside any button link and the button will scroll to this section.",
      "default": false
    },
    {
      "type": "select",
      "id": "visibility",
      "options": [
        { "value": "desktop-hidden", "label": "Mobile only" },
        { "value": "mobile-hidden",  "label": "Desktop only" },
        { "value": "always-display", "label": "All devices" }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "Eyebrow label"
    },
    {
      "type": "checkbox",
      "id": "enable_eyebrow",
      "label": "Show eyebrow label",
      "default": true
    },
    {
      "type": "text",
      "id": "eyebrow",
      "label": "Eyebrow text",
      "default": "3 Reasons Why",
      "visible_if": "{{ section.settings.enable_eyebrow == true }}"
    },
    {
      "type": "color",
      "id": "eyebrow_bg_color",
      "label": "Background color",
      "default": "#009370",
      "visible_if": "{{ section.settings.enable_eyebrow == true }}"
    },
    {
      "type": "color",
      "id": "eyebrow_text_color",
      "label": "Text color",
      "default": "#ffffff",
      "visible_if": "{{ section.settings.enable_eyebrow == true }}"
    },
    {
      "type": "range",
      "id": "eyebrow_font_size",
      "min": 10,
      "max": 32,
      "step": 1,
      "unit": "px",
      "label": "Font size",
      "default": 18,
      "visible_if": "{{ section.settings.enable_eyebrow == true }}"
    },
    {
      "type": "range",
      "id": "eyebrow_height",
      "min": 20,
      "max": 72,
      "step": 2,
      "unit": "px",
      "label": "Height",
      "default": 30,
      "visible_if": "{{ section.settings.enable_eyebrow == true }}"
    },
    {
      "type": "range",
      "id": "eyebrow_border_radius",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Border radius",
      "default": 10,
      "visible_if": "{{ section.settings.enable_eyebrow == true }}"
    },
    {
      "type": "range",
      "id": "eyebrow_bottom_margin",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Bottom margin",
      "default": 14,
      "visible_if": "{{ section.settings.enable_eyebrow == true }}"
    },
    {
      "type": "header",
      "content": "Heading"
    },
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "Resilia is Different From Everything You've Tried",
      "label": "Heading",
      "info": "Bold certain words to highlight them with a different color."
    },
    {
      "type": "checkbox",
      "id": "heading_two_lines",
      "label": "Split heading onto two lines",
      "default": false,
      "info": "Breaks the heading at the exact word(s) you specify below."
    },
    {
      "type": "text",
      "id": "heading_line_two",
      "label": "Start of second line",
      "info": "Type the plain text of the word or phrase where the line break should begin. The break will be inserted before that text, preserving any bold or italic styling. Note: the phrase must not straddle a bold/italic boundary.",
      "visible_if": "{{ section.settings.heading_two_lines == true }}"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        { "value": "h2", "label": "Small" },
        { "value": "h1", "label": "Medium" },
        { "value": "h0", "label": "Large" }
      ],
      "default": "h1",
      "label": "Heading size"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "options": [
        { "value": "left",   "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right",  "label": "Right" }
      ],
      "default": "center",
      "label": "Heading alignment"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Heading highlight color",
      "default": "#009370"
    },
    {
      "type": "checkbox",
      "id": "enable_gradient",
      "label": "Enable gradient for bold text",
      "default": false,
      "info": "Override solid color with gradient for bold text"
    },
    {
      "type": "color_background",
      "id": "title_gradient_background",
      "label": "Gradient highlight",
      "default": "linear-gradient(45deg, #5d5aaf 0%, #ff6b9d 100%)",
      "info": "Used when gradient is enabled"
    },
    {
      "type": "header",
      "content": "Italic Text Styling",
      "info": "Choose how italic text (created with *text*) should be displayed"
    },
    {
      "type": "select",
      "id": "italic_style",
      "label": "Italic Text Style",
      "options": [
        { "value": "italic",      "label": "Normal Italic" },
        { "value": "underline",   "label": "Underline" },
        { "value": "font_family", "label": "Custom Font Family" }
      ],
      "default": "underline",
      "info": "Choose to either underline italic text or use a custom font family"
    },
    {
      "type": "color",
      "id": "underlinetextcolor",
      "label": "Underline color",
      "default": "#FF0000",
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "range",
      "id": "underlinethickness",
      "min": 1,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Underline thickness",
      "default": 3,
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "select",
      "id": "italic_font_family",
      "label": "Italic Text Font Family",
      "options": [
        { "value": "inherit",          "label": "Default (Inherit)" },
        { "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": "inherit",
      "info": "Font will be loaded from Google Fonts automatically. Browse fonts at https://fonts.google.com/"
    },
    {
      "type": "text",
      "id": "custom_google_font_name",
      "label": "Custom Google Font name",
      "info": "e.g. Playfair Display"
    },
    {
      "type": "select",
      "id": "italic_font_weight",
      "label": "Italic Text Font Weight",
      "options": [
        { "value": "inherit", "label": "Default (Inherit)" },
        { "value": "300",     "label": "Light (300)" },
        { "value": "400",     "label": "Normal (400)" },
        { "value": "500",     "label": "Medium (500)" },
        { "value": "600",     "label": "Semi Bold (600)" },
        { "value": "700",     "label": "Bold (700)" },
        { "value": "800",     "label": "Extra Bold (800)" },
        { "value": "900",     "label": "Black (900)" }
      ],
      "default": "inherit",
      "info": "Used when 'Custom Font Family' style is selected"
    },
    {
      "type": "header",
      "content": "Cards"
    },
    {
      "type": "range",
      "id": "cards_per_row",
      "min": 2,
      "max": 5,
      "step": 1,
      "label": "Cards per row (desktop)",
      "default": 3
    },
    {
      "type": "range",
      "id": "card_gap",
      "min": 4,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Gap between cards",
      "default": 12
    },
    {
      "type": "color",
      "id": "card_bg_color",
      "label": "Card background color",
      "default": "#F3F3F3"
    },
    {
      "type": "range",
      "id": "card_border_radius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Card border radius",
      "default": 12
    },
    {
      "type": "range",
      "id": "card_border_width",
      "min": 0,
      "max": 4,
      "step": 1,
      "unit": "px",
      "label": "Card border width",
      "default": 0
    },
    {
      "type": "color",
      "id": "card_border_color",
      "label": "Card border color",
      "default": "rgba(0,0,0,0.3)"
    },
    {
      "type": "range",
      "id": "card_padding",
      "min": 8,
      "max": 48,
      "step": 2,
      "unit": "px",
      "label": "Card padding",
      "default": 22
    },
    {
      "type": "range",
      "id": "card_image_radius",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Card image border radius",
      "default": 4
    },
    {
      "type": "select",
      "id": "card_image_aspect_ratio",
      "label": "Card image aspect ratio",
      "info": "Forces all card images to the same height so labels stay aligned",
      "options": [
        { "value": "1 / 1",   "label": "1:1 (Square)" },
        { "value": "4 / 3",   "label": "4:3 (Landscape)" },
        { "value": "3 / 4",   "label": "3:4 (Portrait)" },
        { "value": "16 / 9",  "label": "16:9 (Wide)" },
        { "value": "2 / 3",   "label": "2:3 (Tall)" }
      ],
      "default": "1 / 1"
    },
    {
      "type": "select",
      "id": "mobile_toggle_position",
      "label": "Toggle button position (mobile)",
      "options": [
        { "value": "center", "label": "Vertically centered" },
        { "value": "top",    "label": "Top right" }
      ],
      "default": "top"
    },
    {
      "type": "header",
      "content": "Label pill"
    },
    {
      "type": "color",
      "id": "label_bg_color",
      "label": "Label background",
      "default": "#009370"
    },
    {
      "type": "color",
      "id": "label_text_color",
      "label": "Label text color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "label_font_size",
      "min": 10,
      "max": 22,
      "step": 1,
      "unit": "px",
      "label": "Label font size",
      "default": 16
    },
    {
      "type": "range",
      "id": "label_height",
      "min": 18,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Label height",
      "default": 24
    },
    {
      "type": "range",
      "id": "label_border_radius",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Label border radius",
      "default": 5
    },
    {
      "type": "range",
      "id": "label_margin_top",
      "min": 0,
      "max": 30,
      "step": 2,
      "unit": "px",
      "label": "Label top margin",
      "default": 18
    },
    {
      "type": "range",
      "id": "label_margin_bottom",
      "min": 0,
      "max": 20,
      "step": 2,
      "unit": "px",
      "label": "Label bottom margin",
      "default": 6
    },
    {
      "type": "header",
      "content": "Card title"
    },
    {
      "type": "range",
      "id": "card_title_size_desktop",
      "min": 14,
      "max": 36,
      "step": 1,
      "unit": "px",
      "label": "Title font size (desktop)",
      "default": 21
    },
    {
      "type": "range",
      "id": "card_title_size_mobile",
      "min": 12,
      "max": 28,
      "step": 1,
      "unit": "px",
      "label": "Title font size (mobile)",
      "default": 18
    },
    {
      "type": "select",
      "id": "card_title_weight",
      "label": "Title font weight",
      "options": [
        { "value": "300", "label": "Light (300)" },
        { "value": "400", "label": "Normal (400)" },
        { "value": "500", "label": "Medium (500)" },
        { "value": "600", "label": "Semi Bold (600)" },
        { "value": "700", "label": "Bold (700)" }
      ],
      "default": "400"
    },
    {
      "type": "header",
      "content": "Details text"
    },
    {
      "type": "range",
      "id": "details_font_size",
      "min": 12,
      "max": 22,
      "step": 1,
      "unit": "px",
      "label": "Details font size",
      "default": 16
    },
    {
      "type": "color",
      "id": "details_text_color",
      "label": "Details text color",
      "default": "#121212"
    },
    {
      "type": "header",
      "content": "Color scheme"
    },
    {
      "type": "select",
      "id": "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",
      "label": "Color scheme",
      "info": "Custom color scheme is edited at the bottom of section settings."
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 40
    },
    {
      "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 if Color scheme setting is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "default": "#F1F3EA",
      "label": "Background color"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Gradient background",
      "info": "If added, replaces Background color when applicable."
    },
    {
      "type": "image_picker",
      "id": "custom_image_background",
      "label": "Image background"
    },
    {
      "type": "image_picker",
      "id": "custom_mobile_image_background",
      "label": "Mobile image background",
      "info": "If empty, the Image background will also be applied to mobile devices"
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "default": "#2E2A39",
      "label": "Text"
    }
  ],
  "blocks": [
    {
      "type": "card",
      "name": "Card",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Card image"
        },
        {
          "type": "text",
          "id": "label",
          "label": "Label",
          "default": "Reason 1",
          "info": "Short pill label shown above the heading"
        },
        {
          "type": "inline_richtext",
          "id": "heading",
          "label": "Heading",
          "default": "Thoughtfully Dosed for Daily Wellness"
        },
        {
          "type": "richtext",
          "id": "details",
          "label": "Details (revealed on click)",
          "default": "<p>Most supplements underdose their key ingredients. Add your compelling detail text here to reveal when clicked.</p>"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Interactive cards V2",
      "category": "Content",
      "blocks": [
        {
          "type": "card",
          "settings": {
            "label": "Reason 1",
            "heading": "Thoughtfully Dosed for Daily Wellness",
            "details": "<p>Most supplements underdose their key ingredients. Resilia® delivers 6,000 mg of oregano oil and 200 mg of black seed oil per serving — two clinically studied botanicals in meaningful daily amounts.</p>"
          }
        },
        {
          "type": "card",
          "settings": {
            "label": "Reason 2",
            "heading": "Two Powerful Plants. One Clean Formula.",
            "details": "<p>Oregano oil and black seed oil have been studied for centuries and researched in modern science for their roles in supporting immune health, gut comfort, and antioxidant activity. Together in one softgel — no synthetic fillers, no aftertaste.</p>"
          }
        },
        {
          "type": "card",
          "settings": {
            "label": "Reason 3",
            "heading": "No Taste. No Burn. No Nonsense.",
            "details": "<p>Forget the bitter drops, burps, or reflux. Our <strong>plant-based softgels</strong> are easy to swallow, completely tasteless, and gentle on your stomach.</p>"
          }
        }
      ]
    }
  ]
}
{% endschema %}