<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
{%- style -%}

  /* ── Responsive padding ────────────────────────────────────── */
  .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;
    margin-top: {{ section.settings.margin_top }}px;
    margin-bottom: {{ section.settings.margin_bottom }}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;
    }
  }

  /* ── Custom colour 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_solid_button_background.red }}, {{ section.settings.custom_colors_solid_button_background.green }}, {{ section.settings.custom_colors_solid_button_background.blue }};
    --color-button-text: {{ section.settings.custom_colors_solid_button_text.red }}, {{ section.settings.custom_colors_solid_button_text.green }}, {{ section.settings.custom_colors_solid_button_text.blue }};
    --color-base-outline-button-labels: {{ section.settings.custom_colors_outline_button.red }}, {{ section.settings.custom_colors_outline_button.green }}, {{ section.settings.custom_colors_outline_button.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 %}

  /* ── Scroll / render optimisations for custom bg ──────────── */
  .color-scheme-{{ section.id }}.color-custom {
    background-attachment: scroll !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: auto;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
  }
  @media screen and (max-width: 750px) {
    .color-scheme-{{ section.id }}.color-custom {
      -webkit-overflow-scrolling: touch;
      transform: translateZ(0);
    }
  }
  @supports (-webkit-appearance: none) {
    .color-scheme-{{ section.id }}.color-custom {
      -webkit-transform: translateZ(0);
      -webkit-backface-visibility: hidden;
    }
  }
  .section-{{ section.id }}-padding .animate-section,
  .section-{{ section.id }}-padding .animate-item {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
  }

  /* ── Gradient bold highlight ───────────────────────────────── */
  {% if section.settings.enable_gradient %}
    #Ingredients-{{ section.id }} .ingr-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 ────────────────────────────────────────── */
  #Ingredients-{{ section.id }} .ingr-inner {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 3%;
    padding-right: 3%;
  }

  @media screen and (max-width: 479px) {
    #Ingredients-{{ section.id }} .ingr-inner {
      padding-left: 15px;
      padding-right: 15px;
    }
  }

  #Ingredients-{{ section.id }} .ingr-heading-wrap {
    text-align: {{ section.settings.heading_alignment }};
    margin-bottom: 48px;
  }

  /* ── Cards grid ────────────────────────────────────────────── */
  #Ingredients-{{ section.id }} .ingr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  @media screen and (max-width: 767px) {
    #Ingredients-{{ section.id }} .ingr-grid {
      grid-template-columns: 1fr;
      gap: 22px;
    }
  }

  {% if section.settings.center_last_odd %}
    @media screen and (min-width: 768px) {
      #Ingredients-{{ section.id }} .ingr-grid .ingr-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: calc(50% - 16px);
        margin-left: auto;
        margin-right: auto;
        width: 100%;
      }
    }
  {% endif %}

  /* ── Individual card ───────────────────────────────────────── */
  #Ingredients-{{ section.id }} .ingr-card {
    display: flex;
    flex-direction: column;
  }

  /* ══════════════════════════════════════════════════════════════
     DEFAULT STYLE
  ══════════════════════════════════════════════════════════════ */

  /* ── Card name bar ─────────────────────────────────────────── */
  #Ingredients-{{ section.id }} .ingr-card__name {
    background-color: {{ section.settings.name_bar_bg }};
    color: {{ section.settings.name_bar_text_color }};
    border-top-left-radius: {{ section.settings.card_corner_radius }}px;
    border-top-right-radius: {{ section.settings.card_corner_radius }}px;
    padding: 14px 40px 12px;
    font-size: {{ section.settings.name_font_size }}px;
    font-weight: 700;
    line-height: 1.2;
  }

  @media screen and (max-width: 479px) {
    #Ingredients-{{ section.id }} .ingr-card__name {
      padding-left: 22px;
      padding-right: 22px;
    }
  }

  /* ── Card body ─────────────────────────────────────────────── */
  #Ingredients-{{ section.id }} .ingr-card__body {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    border: 2px solid {{ section.settings.card_border_color }};
    border-top: none;
    border-bottom-left-radius: {{ section.settings.card_corner_radius }}px;
    border-bottom-right-radius: {{ section.settings.card_corner_radius }}px;
    padding: 20px 40px 30px 30px;
    background-color: {{ section.settings.card_body_bg }};
  }

  @media screen and (max-width: 991px) {
    #Ingredients-{{ section.id }} .ingr-card__body {
      flex-direction: column;
      padding-top: 14px;
    }
  }

  @media screen and (max-width: 767px) {
    #Ingredients-{{ section.id }} .ingr-card__body {
      flex-direction: row;
      padding: 20px 22px 24px 20px;
      gap: 10px;
    }
  }

  @media screen and (max-width: 479px) {
    #Ingredients-{{ section.id }} .ingr-card__body {
      flex-direction: column;
      align-items: center;
      padding-top: 16px;
      padding-left: 22px;
      gap: 20px;
    }
  }

  /* ── Card image ─────────────────────────────────────────────── */
  #Ingredients-{{ section.id }} .ingr-card__img-wrap {
    width: {{ section.settings.image_size }}px;
    height: {{ section.settings.image_size }}px;
    min-width: {{ section.settings.image_size }}px;
    border-radius: {{ section.settings.image_border_radius }}%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #Ingredients-{{ section.id }} .ingr-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  @media screen and (max-width: 991px) {
    #Ingredients-{{ section.id }} .ingr-card__img-wrap {
      width: 120px;
      height: 120px;
      min-width: 120px;
    }
  }

  @media screen and (max-width: 479px) {
    #Ingredients-{{ section.id }} .ingr-card__img-wrap {
      width: 100px;
      height: 100px;
      min-width: 100px;
    }
  }

  /* ── Bullets list ───────────────────────────────────────────── */
  #Ingredients-{{ section.id }} .ingr-card__bullets {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  #Ingredients-{{ section.id }} .ingr-card__bullet {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  #Ingredients-{{ section.id }} .ingr-card__bullet-icon {
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: flex-start;
  }
  #Ingredients-{{ section.id }} .ingr-card__bullet-icon.ingr-bullet-symbol {
    color: {{ section.settings.bullet_icon_color }};
    font-size: {{ section.settings.bullet_icon_size }}px;
    line-height: 1.4;
    font-variation-settings: 'FILL' {% if section.settings.bullet_icon_filled %}1{% else %}0{% endif %}, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  }
  #Ingredients-{{ section.id }} .ingr-card__bullet-icon.ingr-bullet-custom img {
    width: {{ section.settings.bullet_icon_size }}px;
    height: {{ section.settings.bullet_icon_size }}px;
    object-fit: contain;
    display: block;
  }

  #Ingredients-{{ section.id }} .ingr-card__bullet-text {
    font-size: {{ section.settings.bullet_text_size }}px;
    line-height: 1.5;
    color: {{ section.settings.bullet_text_color }};
    margin: 0;
  }

  @media screen and (max-width: 479px) {
    #Ingredients-{{ section.id }} .ingr-card__bullet-text {
      font-size: 14px;
    }
    #Ingredients-{{ section.id }} .ingr-card__bullets {
      gap: 18px;
    }
  }

  /* ══════════════════════════════════════════════════════════════
     COMPACT STYLE
  ══════════════════════════════════════════════════════════════ */

  #Ingredients-{{ section.id }} .ingr-card--compact {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 2px solid {{ section.settings.card_border_color }};
    border-radius: {{ section.settings.card_corner_radius }}px;
    padding: 24px 28px;
    background-color: {{ section.settings.card_body_bg }};
  }

  #Ingredients-{{ section.id }} .ingr-card--compact .ingr-card__compact-text {
    flex: 1;
    min-width: 0;
  }

  #Ingredients-{{ section.id }} .ingr-card--compact .ingr-card__compact-name {
    font-size: {{ section.settings.name_font_size }}px;
    font-weight: 700;
    line-height: 1.2;
    color: {{ section.settings.compact_name_color }};
    margin: 0 0 8px;
  }

  #Ingredients-{{ section.id }} .ingr-card--compact .ingr-card__compact-desc {
    font-size: {{ section.settings.bullet_text_size }}px;
    line-height: 1.5;
    color: {{ section.settings.bullet_text_color }};
    margin: 0;
  }

  #Ingredients-{{ section.id }} .ingr-card--compact .ingr-card__compact-img-wrap {
    width: {{ section.settings.compact_image_size }}px;
    height: {{ section.settings.compact_image_size }}px;
    min-width: {{ section.settings.compact_image_size }}px;
    border-radius: {{ section.settings.image_border_radius }}%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  #Ingredients-{{ section.id }} .ingr-card--compact .ingr-card__compact-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  @media screen and (max-width: 479px) {
    #Ingredients-{{ section.id }} .ingr-card--compact {
      padding: 18px 18px;
      gap: 14px;
    }
    #Ingredients-{{ section.id }} .ingr-card--compact .ingr-card__compact-img-wrap {
      width: 80px;
      height: 80px;
      min-width: 80px;
    }
    #Ingredients-{{ section.id }} .ingr-card--compact .ingr-card__compact-name {
      font-size: {{ section.settings.name_font_size | minus: 2 }}px;
    }
    #Ingredients-{{ section.id }} .ingr-card--compact .ingr-card__compact-desc {
      font-size: 14px;
    }
  }

{%- endstyle -%}

<div
  id="Ingredients-{{ section.id }}"
  class="ingredients-section animate-section animate--hidden color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient content-for-grouping {{ section.settings.visibility }}"
>
  {% 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="ingr-inner section-{{ section.id }}-padding">

    {% comment %} ── Section heading ─────────────────────────────── {% endcomment %}
    {%- 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="ingr-heading-wrap animate-item animate-item--child" style="--index: 0;">
        <h2
          class="ingr-heading title 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 -%}

    {% comment %} ── Ingredient cards grid ────────────────────────── {% endcomment %}
    <div class="ingr-grid">
      {%- for block in section.blocks -%}

        {%- if section.settings.card_style == 'compact' -%}

          {% comment %} ── COMPACT CARD ── {% endcomment %}
          <div
            class="ingr-card ingr-card--compact animate-item animate-item--child"
            style="--index: {{ forloop.index }};"
            {{ block.shopify_attributes }}
          >
            <div class="ingr-card__compact-text">
              {%- if block.settings.name != blank -%}
                <p class="ingr-card__compact-name">{{ block.settings.name }}</p>
              {%- endif -%}
              {%- if block.settings.bullet_1 != blank -%}
                <p class="ingr-card__compact-desc">{{ block.settings.bullet_1 }}</p>
              {%- endif -%}
            </div>
            {%- if block.settings.image != blank -%}
              <div class="ingr-card__compact-img-wrap">
                {{
                  block.settings.image
                  | image_url: width: 400
                  | image_tag:
                    loading: 'lazy',
                    widths: '80, 120, 160, 200, 300',
                    alt: block.settings.name
                }}
              </div>
            {%- endif -%}
          </div>

        {%- else -%}

          {% comment %} ── DEFAULT CARD ── {% endcomment %}
          <div
            class="ingr-card animate-item animate-item--child"
            style="--index: {{ forloop.index }};"
            {{ block.shopify_attributes }}
          >
            {% comment %} Name bar {% endcomment %}
            {%- if block.settings.name != blank -%}
              <div class="ingr-card__name">
                {{ block.settings.name }}
              </div>
            {%- endif -%}

            {% comment %} Card body: image + bullets {% endcomment %}
            <div class="ingr-card__body">

              {% comment %} Image {% endcomment %}
              {%- if block.settings.image != blank -%}
                <div class="ingr-card__img-wrap">
                  {{
                    block.settings.image
                    | image_url: width: 400
                    | image_tag:
                      loading: 'lazy',
                      widths: '100, 150, 200, 300, 400',
                      alt: block.settings.name
                  }}
                </div>
              {%- endif -%}

              {% comment %} Bullets {% endcomment %}
              {%- liquid
                assign use_custom_icon = false
                if section.settings.bullet_custom_icon != blank
                  assign use_custom_icon = true
                endif
              -%}
              <div class="ingr-card__bullets">
                {%- if block.settings.bullet_1 != blank -%}
                  <div class="ingr-card__bullet">
                    {%- if use_custom_icon -%}
                      <span class="ingr-card__bullet-icon ingr-bullet-custom">
                        {{ section.settings.bullet_custom_icon | image_url: width: 72 | image_tag: loading: 'lazy', widths: '24, 36, 48, 72', alt: '' }}
                      </span>
                    {%- else -%}
                      <span class="ingr-card__bullet-icon ingr-bullet-symbol material-symbols-rounded">{{ section.settings.bullet_icon }}</span>
                    {%- endif -%}
                    <p class="ingr-card__bullet-text">{{ block.settings.bullet_1 }}</p>
                  </div>
                {%- endif -%}
                {%- if block.settings.bullet_2 != blank -%}
                  <div class="ingr-card__bullet">
                    {%- if use_custom_icon -%}
                      <span class="ingr-card__bullet-icon ingr-bullet-custom">
                        {{ section.settings.bullet_custom_icon | image_url: width: 72 | image_tag: loading: 'lazy', widths: '24, 36, 48, 72', alt: '' }}
                      </span>
                    {%- else -%}
                      <span class="ingr-card__bullet-icon ingr-bullet-symbol material-symbols-rounded">{{ section.settings.bullet_icon }}</span>
                    {%- endif -%}
                    <p class="ingr-card__bullet-text">{{ block.settings.bullet_2 }}</p>
                  </div>
                {%- endif -%}
                {%- if block.settings.bullet_3 != blank -%}
                  <div class="ingr-card__bullet">
                    {%- if use_custom_icon -%}
                      <span class="ingr-card__bullet-icon ingr-bullet-custom">
                        {{ section.settings.bullet_custom_icon | image_url: width: 72 | image_tag: loading: 'lazy', widths: '24, 36, 48, 72', alt: '' }}
                      </span>
                    {%- else -%}
                      <span class="ingr-card__bullet-icon ingr-bullet-symbol material-symbols-rounded">{{ section.settings.bullet_icon }}</span>
                    {%- endif -%}
                    <p class="ingr-card__bullet-text">{{ block.settings.bullet_3 }}</p>
                  </div>
                {%- endif -%}
              </div>

            </div>
          </div>

        {%- endif -%}

      {%- endfor -%}
    </div>

  </div>
</div>

{% schema %}
{
  "name": "Ingredients",
  "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": "General"
    },
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "What Makes Our Formula Different?",
      "label": "Heading",
      "info": "Bold certain words to highlight them with a different color. Use italic for styled text."
    },
    {
      "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.",
      "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",
      "label": "Heading alignment",
      "options": [
        { "value": "left",   "label": "Left"   },
        { "value": "center", "label": "Center" },
        { "value": "right",  "label": "Right"  }
      ],
      "default": "center"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Heading highlight color",
      "default": "#6D388B"
    },
    {
      "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": "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": "Card style"
    },
    {
      "type": "select",
      "id": "card_style",
      "label": "Card style",
      "options": [
        { "value": "default", "label": "Default" },
        { "value": "compact", "label": "Compact" }
      ],
      "default": "default",
      "info": "Default: colored name bar on top with bullet list. Compact: single-line name + description with image on the right."
    },
    {
      "type": "header",
      "content": "Card styling"
    },
    {
      "type": "range",
      "id": "card_corner_radius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Card corner radius",
      "default": 14
    },
    {
      "type": "color",
      "id": "name_bar_bg",
      "label": "Name bar background",
      "info": "Default style only",
      "default": "#2a2552"
    },
    {
      "type": "color",
      "id": "name_bar_text_color",
      "label": "Name bar text color",
      "info": "Default style only",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "compact_name_color",
      "label": "Name text color",
      "info": "Compact style only",
      "default": "#1e1a47"
    },
    {
      "type": "range",
      "id": "name_font_size",
      "min": 14,
      "max": 25,
      "step": 1,
      "unit": "px",
      "label": "Name font size",
      "default": 20
    },
    {
      "type": "color",
      "id": "card_border_color",
      "label": "Card border color",
      "default": "#dbf4ff"
    },
    {
      "type": "color",
      "id": "card_body_bg",
      "label": "Card background",
      "default": "#ffffff"
    },
    {
      "type": "checkbox",
      "id": "center_last_odd",
      "label": "Center last card when odd count",
      "info": "When an odd number of cards is used, the final card will be centered below the row above.",
      "default": true
    },
    {
      "type": "header",
      "content": "Images"
    },
    {
      "type": "range",
      "id": "image_border_radius",
      "min": 0,
      "max": 50,
      "step": 5,
      "unit": "%",
      "label": "Image border radius",
      "info": "50% = circle, 0% = square",
      "default": 50
    },
    {
      "type": "range",
      "id": "image_size",
      "min": 80,
      "max": 200,
      "step": 10,
      "unit": "px",
      "label": "Image size (desktop) — Default style",
      "default": 150
    },
    {
      "type": "range",
      "id": "compact_image_size",
      "min": 80,
      "max": 200,
      "step": 10,
      "unit": "px",
      "label": "Image size (desktop) — Compact style",
      "default": 130
    },
    {
      "type": "header",
      "content": "Bullet points"
    },
    {
      "type": "text",
      "id": "bullet_icon",
      "label": "Bullet icon (Material Symbol name)",
      "default": "check_circle",
      "info": "Enter any Material Symbols Rounded icon name. Browse at https://fonts.google.com/icons — e.g. check_circle, verified, thumb_up, star"
    },
    {
      "type": "checkbox",
      "id": "bullet_icon_filled",
      "label": "Filled icon style",
      "default": true,
      "info": "When enabled, icons use the filled variant. When disabled, icons use the outlined variant."
    },
    {
      "type": "image_picker",
      "id": "bullet_custom_icon",
      "label": "Custom bullet icon image",
      "info": "Upload a custom icon (SVG, PNG, or WebP recommended). When set, this overrides the Material Symbol icon above. Icon size setting applies to both."
    },
    {
      "type": "color",
      "id": "bullet_icon_color",
      "label": "Bullet icon color",
      "default": "#3D348B"
    },
    {
      "type": "range",
      "id": "bullet_icon_size",
      "min": 16,
      "max": 36,
      "step": 2,
      "unit": "px",
      "label": "Bullet icon size",
      "default": 22
    },
    {
      "type": "range",
      "id": "bullet_text_size",
      "min": 12,
      "max": 22,
      "step": 1,
      "unit": "px",
      "label": "Bullet / description text size",
      "default": 16
    },
    {
      "type": "color",
      "id": "bullet_text_color",
      "label": "Bullet / description text color",
      "default": "#1e1a47"
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 148,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 32
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 148,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 32
    },
    {
      "type": "range",
      "id": "margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Margin top",
      "default": 0
    },
    {
      "type": "range",
      "id": "margin_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Margin bottom",
      "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": "#FFFFFF",
      "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"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_background",
      "default": "#dd1d1d",
      "label": "Solid button background"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_text",
      "default": "#ffffff",
      "label": "Solid button label"
    },
    {
      "type": "color",
      "id": "custom_colors_outline_button",
      "default": "#dd1d1d",
      "label": "Outline button"
    }
  ],
  "blocks": [
    {
      "type": "ingredient",
      "name": "Ingredient Card",
      "settings": [
        {
          "type": "header",
          "content": "Card content"
        },
        {
          "type": "text",
          "id": "name",
          "label": "Ingredient name",
          "default": "100% Real Coffee"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Ingredient image"
        },
        {
          "type": "header",
          "content": "Bullet points"
        },
        {
          "type": "textarea",
          "id": "bullet_1",
          "label": "Bullet point 1",
          "info": "In Compact style, only Bullet point 1 is shown as the card description.",
          "default": "Naturally rich in antioxidants that may help protect cells from damage and support overall wellness.*"
        },
        {
          "type": "textarea",
          "id": "bullet_2",
          "label": "Bullet point 2",
          "default": "May support a healthy metabolism, which can assist with energy levels.*"
        },
        {
          "type": "textarea",
          "id": "bullet_3",
          "label": "Bullet point 3",
          "default": "Can help promote cardiovascular health by supporting healthy circulation and heart function.*"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Ingredients",
      "category": "Content",
      "blocks": [
        {
          "type": "ingredient",
          "settings": {
            "name": "100% Real Coffee",
            "bullet_1": "Naturally rich in antioxidants that may help protect cells from damage and support overall wellness.*",
            "bullet_2": "May support a healthy metabolism, which can assist with energy levels.*",
            "bullet_3": "Can help promote cardiovascular health by supporting healthy circulation and heart function.*"
          }
        },
        {
          "type": "ingredient",
          "settings": {
            "name": "Premium Whey Protein",
            "bullet_1": "Delivers essential amino acids that support muscle growth and recovery—perfect for post-workout fuel.*",
            "bullet_2": "May help curb appetite, making it a great ally for fitness goals.*",
            "bullet_3": "Naturally rich in immunoglobulins, it can help support a healthy immune system and overall wellness.*"
          }
        },
        {
          "type": "ingredient",
          "settings": {
            "name": "Prebiotics for Gut Health",
            "bullet_1": "May help support healthy digestion and improve nutrient absorption.*",
            "bullet_2": "Can support immune function and help your body defend against everyday threats.*",
            "bullet_3": "May assist in regulating appetite and metabolism—supporting fitness goals.*"
          }
        },
        {
          "type": "ingredient",
          "settings": {
            "name": "Brain Boosting MCTs",
            "bullet_1": "Provides a fast-absorbing source of fuel that may support focus, memory, and mental clarity.*",
            "bullet_2": "Offers sustained energy for the brain—without the sugar crashes.*",
            "bullet_3": "May help support long-term cognitive health and brain function.*"
          }
        }
      ]
    }
  ]
}
{% endschema %}