{% 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 %}

<div class="interactive-cards-section animate-section animate--hidden {{ section.settings.visibility }}" id="section-{{ section.id }}" style="
  margin-top: {{ section.settings.margin_top }}px;
  margin-bottom: {{ section.settings.margin_bottom }}px;  
  padding-top: {{ section.settings.padding_top }}px;
  padding-bottom: {{ section.settings.padding_bottom }}px;
  background-color: {{ section.settings.background_color }};
">
  {% 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">
    {% if section.settings.heading != 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.heading
          | replace: section.settings.heading_line_two, heading_line_two_with_br
        -%}
      {%- else -%}
        {%- assign heading_output = section.settings.heading -%}
      {%- endif -%}
      <div class="interactive-cards-header" style="text-align: {{ section.settings.heading_alignment }}; margin-bottom: {{ section.settings.heading_spacing }}px;">
        <h2 class="interactive-cards-title title-with-highlight{% if section.settings.override_heading_size %} {{ section.settings.theme_heading_size }}{% endif %}" style="
          {% unless section.settings.override_heading_size %}font-size: {{ section.settings.heading_font_size_mobile }}px;{% endunless %}
          color: {{ section.settings.heading_color }};
          margin: 0;
          --hightlight-color:{{ section.settings.title_highlight_color }};
          --gradient-text: {{ section.settings.title_gradient_background }};
        ">
          {{ heading_output }}
        </h2>
        {% if section.settings.subheading != blank %}
          <div class="interactive-cards-subtitle rte" style="
            font-size: {{ section.settings.subheading_font_size_mobile }}px;
            color: {{ section.settings.subheading_color }};
            margin: 8px auto 0 auto;
            max-width: 800px;
          ">
            {{ section.settings.subheading }}
          </div>
        {% endif %}
      </div>
    {% endif %}

    <div class="interactive-cards-grid anim-flip" style="
      display: flex;
      flex-wrap: wrap;
      gap: {{ section.settings.grid_gap }}px;
      justify-content: center;
      margin-top: {{ section.settings.content_spacing }}px;
    ">
      {% for block in section.blocks %}
        <div class="interactive-card" {{ block.shopify_attributes }} style="
          background-color: {{ section.settings.card_bg }};
          border: {{ section.settings.card_border_width }}px solid {{ section.settings.card_border_color }};
          border-radius: {{ section.settings.border_radius }}px;
        ">
          <div class="interactive-card__content-wrapper">
            <div class="interactive-card__front">
              <div class="interactive-card__front-inner">
                {% if block.settings.card_image != blank %}
                  <img 
                    src="{{ block.settings.card_image | image_url: width: 400 }}"
                    srcset="{{ block.settings.card_image | image_url: width: 352 }} 352w, {{ block.settings.card_image | image_url: width: 400 }} 400w"
                    alt="{{ block.settings.card_image.alt | escape }}"
                    width="400"
                    height="400"
                    loading="lazy"
                    class="benefit-img"
                  >
                {% endif %}
                <div class="interactive-card__text-wrap">
                  {% if block.settings.card_title != blank %}
                    <h3 style="
                      color: {{ section.settings.card_title_color }};
                      font-size: {{ section.settings.card_title_fs_mobile }}px;
                    ">{{ block.settings.card_title }}</h3>
                  {% endif %}
                  {% if block.settings.card_description != blank %}
                    <p style="
                      color: {{ section.settings.card_desc_color }};
                      font-size: {{ section.settings.card_desc_fs_mobile }}px;
                    ">{{ block.settings.card_description }}</p>
                  {% endif %}
                </div>
              </div>
            </div>

            <div class="interactive-card__back">
              {% if block.settings.back_text != blank %}
                <div class="interactive-card__back-text rte">
                  {{ block.settings.back_text }}
                </div>
              {% endif %}
            </div>
          </div>

          <div class="interactive-card__icon-wrapper">
            <div class="interactive-card__icon-btn" style="
              background: {{ section.settings.icon_bg_color }};
              border-color: {{ section.settings.icon_border_color }};
            ">
              <span class="interactive-card__icon-plus" style="color: {{ section.settings.icon_color }};">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.72069 11.033V5.96898H0.656637V5.38515H5.72069V0.321103H6.30451V5.38515H11.3686V5.96898H6.30451V11.033H5.72069Z" fill="currentColor"/>
                </svg>
              </span>
              <span class="interactive-card__icon-minus" style="color: {{ section.settings.icon_color }};">
                <svg width="10" height="2" viewBox="0 0 8 1" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.97719 0.0678547V0.65168H0.920525V0.0678547H7.97719Z" fill="currentColor"/>
                </svg>
              </span>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>

<style>
  .interactive-cards-section {
    width: 100%;
    overflow: hidden;
  }

  /* Enhanced heading styles */
  .interactive-cards-title.title-with-highlight em {
    {% if section.settings.italic_style == 'italic' %}
      text-decoration: none !important;
      font-style: italic !important;
    {% elsif section.settings.italic_style == 'font_family' and section.settings.italic_font_family != 'inherit' %}
      text-decoration: none !important;
      font-style: italic !important;
      {% if section.settings.italic_font_family == 'serif' %}
        font-family: serif !important;
      {% elsif 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', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'instrument-serif' %}
        font-family: 'Instrument Serif', Georgia, 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;
      {% elsif section.settings.italic_font_family == 'cursive' %}
        font-family: cursive !important;
      {% endif %}
      {% if section.settings.italic_font_weight != 'inherit' %}
        font-weight: {{ section.settings.italic_font_weight }} !important;
      {% endif %}
    {% 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 %}
    .interactive-cards-title.title-with-highlight strong {
      background: {{ section.settings.title_gradient_background }};
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-style: normal;
    }
  {% else %}
    .interactive-cards-title.title-with-highlight strong {
      color: {{ section.settings.title_highlight_color }};
    }
  {% endif %}

  .interactive-cards-subtitle {
    line-height: 1.5;
  }

  .interactive-cards-subtitle p {
    margin: 0;
    padding: 0;
  }

  .interactive-cards-subtitle p:not(:last-child) {
    margin-bottom: 10px;
  }

  .interactive-cards-grid {
    width: 100%;
  }

  .interactive-card {
    width: 100%;
    flex: 0 0 100%;
    cursor: pointer;
    min-height: 120px;
    position: relative;
    overflow: hidden;
    perspective: 1000px;
    display: flex;
    align-items: center;
  }

  @media (min-width: 768px) {
    .interactive-card {
      flex: 0 0 calc(50% - ({{ section.settings.grid_gap }}px / 2));
    }
  }

  .interactive-card__content-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: all 0.6s ease;
    transform-style: preserve-3d;
  }

  .interactive-card__front,
  .interactive-card__back {
    position: relative;
    width: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    backface-visibility: hidden;
    background: transparent;
  }

  .interactive-card__back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }

  .interactive-card__front {
    z-index: 2;
  }

  .interactive-card__front-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    padding-right: 35px;
  }

  .benefit-img {
    width: {{ section.settings.img_width_mobile }}px;
    height: {{ section.settings.img_width_mobile }}px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    display: block;
  }

  @media(min-width: 768px) {
    .benefit-img {
      width: {{ section.settings.img_width_desktop }}px;
      height: {{ section.settings.img_width_desktop }}px;
    }
  }

  .interactive-card__text-wrap h3 {
    margin: 0 0 5px 0;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
  }

  .interactive-card__text-wrap p {
    margin: 0;
    line-height: 1.4;
  }

  .interactive-card__back {
    color: #2b2b2b;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
  }

  .interactive-card__back-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    padding-right: 35px;
  }

  @media(min-width: 768px) {
    .interactive-card__back-text {
      font-size: 17px;
    }
  }

  .interactive-card__back-text p {
    margin: 0;
    padding: 0;
  }

  .interactive-card__back-text p:not(:last-child) {
    margin-bottom: 8px;
  }

  .interactive-card__icon-wrapper {
    position: absolute;
    right: 19px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .interactive-card__icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }

  .interactive-card__icon-plus,
  .interactive-card__icon-minus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .interactive-card__icon-minus {
    display: none;
  }

  .interactive-card.active .interactive-card__icon-plus {
    display: none;
  }

  .interactive-card.active .interactive-card__icon-minus {
    display: flex;
  }

  /* Animation: Flip */
  .anim-flip .interactive-card__content-wrapper {
    transform-style: preserve-3d;
  }

  .anim-flip .interactive-card__back {
    transform: rotateY(180deg);
    opacity: 1;
  }

  .anim-flip .interactive-card.active .interactive-card__content-wrapper {
    transform: rotateY(180deg);
  }

  /* Desktop font sizes */
  @media (min-width: 751px) {
    {% unless section.settings.override_heading_size %}
    .interactive-cards-title {
      font-size: {{ section.settings.heading_font_size_desktop }}px !important;
    }
    {% endunless %}

    .interactive-cards-subtitle {
      font-size: {{ section.settings.subheading_font_size_desktop }}px !important;
    }

    .interactive-card__text-wrap h3 {
      font-size: {{ section.settings.card_title_fs_desktop }}px !important;
    }

    .interactive-card__text-wrap p {
      font-size: {{ section.settings.card_desc_fs_desktop }}px !important;
    }
  }

  @media (max-width: 750px) {
    .interactive-cards-section {
      padding-left: 15px;
      padding-right: 15px;
    }

    .interactive-cards-header[style*="left"] .interactive-cards-subtitle {
      margin-left: 0;
    }
  }
</style>

<script>
  function initInteractiveCards_{{ section.id | replace: '-', '_' }}() {
    const wrapper = document.querySelector('#section-{{ section.id }}');
    if (!wrapper) return;

    const cards = wrapper.querySelectorAll('.interactive-card');

    cards.forEach(card => {
      const newCard = card.cloneNode(true);
      card.parentNode.replaceChild(newCard, card);
    });

    const freshCards = wrapper.querySelectorAll('.interactive-card');
    freshCards.forEach(card => {
      card.addEventListener('click', function() {
        this.classList.toggle('active');
      });
    });
  }

  document.addEventListener("DOMContentLoaded", initInteractiveCards_{{ section.id | replace: '-', '_' }});
  document.addEventListener("shopify:section:load", function(e) {
    if (e.target.querySelector('#section-{{ section.id }}')) {
      initInteractiveCards_{{ section.id | replace: '-', '_' }}();
    }
  });
</script>

{% schema %}
{
  "name": "Interactive cards",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID is used to 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": "Section Header"
    },
    {
      "type": "inline_richtext",
      "id": "heading",
      "label": "Heading",
      "default": "<strong>Proven Benefits.</strong> Backed by Science.",
      "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 — e.g. if 'Science' is bolded, split on 'Science' alone rather than 'Backed Science'.",
      "visible_if": "{{ section.settings.heading_two_lines == true }}"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading Color",
      "default": "#2b2b2b"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "Heading Alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "type": "checkbox",
      "id": "override_heading_size",
      "label": "Use theme heading size",
      "default": false,
      "info": "Overrides the custom font size settings below with Ascendify's global heading scale"
    },
    {
      "type": "select",
      "id": "theme_heading_size",
      "label": "Theme heading size",
      "options": [
        { "value": "h2", "label": "Small" },
        { "value": "h1", "label": "Medium" },
        { "value": "h0", "label": "Large" }
      ],
      "default": "h1",
      "visible_if": "{{ section.settings.override_heading_size }}"
    },
    {
      "type": "range",
      "id": "heading_font_size_mobile",
      "min": 16,
      "max": 36,
      "step": 1,
      "unit": "px",
      "label": "Heading font size (Mobile)",
      "default": 26,
      "visible_if": "{{ section.settings.override_heading_size == false }}"
    },
    {
      "type": "range",
      "id": "heading_font_size_desktop",
      "min": 28,
      "max": 48,
      "step": 1,
      "unit": "px",
      "label": "Heading font size (Desktop)",
      "default": 31,
      "visible_if": "{{ section.settings.override_heading_size == false }}"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Heading highlight color",
      "default": "#9f3f3f"
    },
    {
      "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": "serif",
          "label": "Serif"
        },
        {
          "value": "instrument-serif",
          "label": "Instrument Serif"
        },
        {
          "value": "georgia-pro",
          "label": "Georgia Pro"
        },
        {
          "value": "bodoni-moda",
          "label": "Bodoni Moda"
        },
        {
          "value": "cursive",
          "label": "Cursive"
        },
        {
          "value": "custom_google_font",
          "label": "Custom Google Font"
        }
      ],
      "default": "serif",
      "info": "Used when 'Custom Font Family' style is selected"
    },
    {
      "type": "text",
      "id": "custom_google_font_name",
      "label": "Custom Google Font Name",
      "info": "Enter the exact Google Font family name (e.g., 'Roboto', 'Open Sans', 'Playfair Display'). Font will be loaded from Google Fonts automatically. Browse fonts at https://fonts.google.com/"
    },
    {
      "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": "richtext",
      "id": "subheading",
      "label": "Subheading",
      "default": "<p>Your body deserves more than empty claims. [Product name] supports key areas of daily wellness using ingredients studied in clinical research.</p>"
    },
    {
      "type": "range",
      "id": "subheading_font_size_mobile",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Subheading font size (Mobile)",
      "default": 17
    },
    {
      "type": "range",
      "id": "subheading_font_size_desktop",
      "min": 14,
      "max": 28,
      "step": 1,
      "unit": "px",
      "label": "Subheading font size (Desktop)",
      "default": 17
    },
    {
      "type": "color",
      "id": "subheading_color",
      "label": "Subheading Color",
      "default": "#2b2b2b"
    },
    {
      "type": "header",
      "content": "Background"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#fbf9f7"
    },
    {
      "type": "header",
      "content": "Card Settings"
    },
    {
      "type": "range",
      "id": "img_width_mobile",
      "min": 60,
      "max": 150,
      "step": 5,
      "unit": "px",
      "label": "Image Width (Mobile)",
      "default": 90
    },
    {
      "type": "range",
      "id": "img_width_desktop",
      "min": 80,
      "max": 200,
      "step": 5,
      "unit": "px",
      "label": "Image Width (Desktop)",
      "default": 125
    },
    {
      "type": "range",
      "id": "card_title_fs_mobile",
      "min": 14,
      "max": 28,
      "step": 1,
      "unit": "px",
      "label": "Card Title Font Size (Mobile)",
      "default": 18
    },
    {
      "type": "range",
      "id": "card_title_fs_desktop",
      "min": 18,
      "max": 36,
      "step": 1,
      "unit": "px",
      "label": "Card Title Font Size (Desktop)",
      "default": 24
    },
    {
      "type": "range",
      "id": "card_desc_fs_mobile",
      "min": 12,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Card Description Font Size (Mobile)",
      "default": 14
    },
    {
      "type": "range",
      "id": "card_desc_fs_desktop",
      "min": 14,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Card Description Font Size (Desktop)",
      "default": 18
    },
    {
      "type": "header",
      "content": "Card Colors"
    },
    {
      "type": "color",
      "id": "card_bg",
      "label": "Card Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "card_border_color",
      "label": "Card Border Color",
      "default": "#0000004d"
    },
    {
      "type": "range",
      "id": "card_border_width",
      "min": 0,
      "max": 5,
      "step": 1,
      "unit": "px",
      "label": "Card Border Width",
      "default": 1
    },
    {
      "type": "color",
      "id": "card_title_color",
      "label": "Card Title Color",
      "default": "#2b2b2b"
    },
    {
      "type": "color",
      "id": "card_desc_color",
      "label": "Card Description Color",
      "default": "#2b2b2b"
    },
    {
      "type": "range",
      "id": "border_radius",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Card Border Radius",
      "default": 8
    },
    {
      "type": "header",
      "content": "Card Icon"
    },
    {
      "type": "color",
      "id": "icon_bg_color",
      "label": "Icon Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "icon_border_color",
      "label": "Icon Border Color",
      "default": "rgba(0,0,0,0.3)"
    },
    {
      "type": "color",
      "id": "icon_color",
      "label": "Icon Color",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "grid_gap",
      "min": 10,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Gap Between Cards",
      "default": 16
    },
    {
      "type": "header",
      "content": "Spacing"
    },
    {
      "type": "range",
      "id": "heading_spacing",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Space Below Heading",
      "default": 40
    },
    {
      "type": "range",
      "id": "content_spacing",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Space Above Cards",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Top Padding",
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Bottom Padding",
      "default": 40
    },
    {
    "type": "range",
    "id": "margin_top",
    "min": 0,
    "max": 100,
    "step": 4,
    "unit": "px",
    "label": "Top Margin",
    "default": 0
    },
    {
    "type": "range",
    "id": "margin_bottom",
    "min": 0,
    "max": 100,
    "step": 4,
    "unit": "px",
    "label": "Bottom Margin",
    "default": 0
    }
  ],
  "blocks": [
    {
      "name": "Card",
      "type": "card",
      "settings": [
        {
          "type": "image_picker",
          "id": "card_image",
          "label": "Card Image"
        },
        {
          "type": "text",
          "id": "card_title",
          "label": "Card Title",
          "default": "Card Title"
        },
        {
          "type": "text",
          "id": "card_description",
          "label": "Card Description",
          "default": "Brief description"
        },
        {
          "type": "richtext",
          "id": "back_text",
          "label": "Back Side Text",
          "default": "<p>Detailed information appears when card is clicked.</p>"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Interactive cards",
      "category": "Content",
      "blocks": [
        {
          "type": "card",
          "settings": {
            "card_title": "Heart & Vascular Support",
            "card_description": "Supports healthy circulation",
            "back_text": "<p>Aged garlic extract is commonly used to support healthy blood flow, vascular function, and long-term heart wellness as part of a balanced lifestyle.</p>"
          }
        },
        {
          "type": "card",
          "settings": {
            "card_title": "Immune System Support",
            "card_description": "Supports the body's natural defenses*",
            "back_text": "<p>Naturally rich in antioxidant compounds, aged garlic helps support immune function and overall resilience when used consistently.</p>"
          }
        },
        {
          "type": "card",
          "settings": {
            "card_title": "Gentle Daily Digestion",
            "card_description": "Designed to be easy on the stomach*",
            "back_text": "<p>The aging process removes harsh garlic compounds, making this formula odorless, gentle, and suitable for daily use without digestive discomfort.</p>"
          }
        },
        {
          "type": "card",
          "settings": {
            "card_title": "Daily Vitality & Wellness",
            "card_description": "Supports energy and overall well-being*",
            "back_text": "<p>By supporting circulation and antioxidant balance, aged garlic extract fits naturally into daily routines focused on long-term wellness.</p>"
          }
        }
      ]
    }
  ]
}
{% endschema %}