{% comment %} Google Font preloading for italic text style — mirrors icon-bar.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 -%}

  /* ============================================================
     Structural / responsive rules — section-specific overrides below
     ============================================================ */

  .four-cards-section { width: 100%; }

  .four-cards-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .four-cards-section .four-cards-header { margin-bottom: var(--heading-cards-spacing, 40px); }

  .four-cards-section .section-heading {
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
  }

  .four-cards-section .section-heading .global-accent-text,
  .four-cards-section .section-heading .custom-accent-text { display: inline; }

  .four-cards-section .four-cards-subtitle {
    margin: 8px 0 0 0;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: var(--letter-spacing-body);
    font-weight: var(--font-weight-regular);
  }

  /* Grid — default (mobile-first 2-col) */
  .four-cards-section .cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: stretch;
  }

  /* Horizontal layout overrides */
  .four-cards-section.horizontal-layout .cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .four-cards-section.horizontal-layout .card-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-radius: var(--card-border-radius, 12px);
    overflow: hidden;
  }

  .four-cards-section.horizontal-layout .card-image-container {
    width: 100px;
    min-width: 100px;
    height: 100%;
    aspect-ratio: auto;
    padding-bottom: 0;
    flex-shrink: 0;
    align-self: stretch;
  }

  .four-cards-section.horizontal-layout .card-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .four-cards-section.horizontal-layout .card-image-placeholder {
    position: static;
    width: 100%;
    height: 100%;
  }

  .four-cards-section.horizontal-layout .card-image-placeholder svg { width: 40px; height: 40px; }

  .four-cards-section.horizontal-layout .card-content {
    flex: 1;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* Card base */
  .four-cards-section .card-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background: var(--card-background, #ffffff);
    border-radius: var(--card-border-radius, 12px);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: var(--card-border-width, 1px) var(--card-border-style, solid) var(--card-border-color, #f0f0f0);
  }

  .four-cards-section .card-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgb(0 0 0 / .1);
  }

  /* Image container — vertical layout */
  .four-cards-section .card-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .four-cards-section .card-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .four-cards-section .card-item:hover .card-image { transform: scale(1.05); }

  .four-cards-section .card-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #f8f9fa;
    color: #dee2e6;
    position: absolute;
    top: 0; left: 0;
  }

  .four-cards-section .card-image-placeholder svg { opacity: .6; }

  /* Card content */
  .four-cards-section .card-content {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .four-cards-section .card-title {
    margin: 0 0 12px 0;
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-body);
    line-height: 1.2;
    font-size: var(--title-size-desktop);
  }

  .four-cards-section .card-description {
    margin: 0 0 8px 0;
    line-height: 1.5;
    letter-spacing: var(--letter-spacing-body);
    font-size: var(--description-size-desktop);
  }

  /* Bullets */
  .four-cards-section .card-bullets {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3px 3px;
    letter-spacing: var(--letter-spacing-body);
    margin-top: 0;
  }

  .four-cards-section .bullet-item {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
  }

  .four-cards-section .bullet-item.has-container {
    border-radius: var(--container-border-radius, 4px);
    padding: 2px 6px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
  }

  /* Material icon sizing inside bullet pill */
  .four-cards-section .bullet-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
  }

  .four-cards-section .bullet-icon .material-symbols-outlined {
    font-size: var(--bullet-icon-size, 14px);
    width: var(--bullet-icon-size, 14px);
    height: var(--bullet-icon-size, 14px);
    line-height: 1;
    max-width: none;
    overflow: visible;
  }

  .four-cards-section .bullet-text {
    flex-shrink: 0;
    font-size: var(--bullet-size-desktop);
    color: inherit;
    white-space: nowrap;
  }

  /* Tablet: 767px – 1022px */
  @media (min-width: 767px) and (max-width: 1022px) {
    .four-cards-section .container { padding: 0 30px; }
    .four-cards-section .four-cards-header { margin-bottom: var(--heading-cards-spacing, 40px); }
    .four-cards-section .four-cards-subtitle { font-size: 15px; }
    .four-cards-section .cards-grid {
      display: grid;
      grid-template-columns: repeat(var(--desktop-columns, 4), 1fr);
      gap: 25px;
    }
    .four-cards-section .card-content { padding: 15px; }
    .four-cards-section .card-title { margin-bottom: 15px; }

    .four-cards-section.horizontal-layout .cards-grid { gap: 18px; grid-template-columns: repeat(var(--desktop-columns, 2), 1fr); }
    .four-cards-section.horizontal-layout .card-image-container { width: 150px; min-width: 150px; }
    .four-cards-section.horizontal-layout .card-content { padding: 20px; }
    .four-cards-section.horizontal-layout .card-title { font-size: var(--title-size-desktop); margin-bottom: 10px; }
    .four-cards-section.horizontal-layout .card-description { font-size: var(--description-size-desktop); margin-bottom: 8px; }
    .four-cards-section.horizontal-layout .bullet-text { font-size: var(--bullet-size-desktop); }
  }

  /* Desktop: 1023px+ */
  @media (min-width: 1023px) {
    .four-cards-section .container { padding: 0 40px; }
    .four-cards-section .four-cards-header { margin-bottom: var(--heading-cards-spacing, 40px); }
    .four-cards-section .four-cards-subtitle { font-size: 18px; }
    .four-cards-section .cards-grid {
      display: grid;
      grid-template-columns: repeat(var(--desktop-columns, 4), 1fr);
      gap: 30px;
      align-items: stretch;
    }
    .four-cards-section .card-content { padding: 15px; }

    .four-cards-section.horizontal-layout .cards-grid { grid-template-columns: repeat(var(--desktop-columns, 2), 1fr); gap: 25px; }
    .four-cards-section.horizontal-layout .card-image-container { width: 200px; min-width: 200px; max-width: 200px; }
    .four-cards-section.horizontal-layout .card-content { padding: 25px; }
    .four-cards-section.horizontal-layout .card-title { font-size: var(--title-size-desktop); margin-bottom: 12px; }
    .four-cards-section.horizontal-layout .card-description { font-size: var(--description-size-desktop); line-height: 1.5; margin-bottom: 8px; }
    .four-cards-section.horizontal-layout .bullet-text { font-size: var(--bullet-size-desktop); }
  }

  /* Wide: 1200px+ */
  @media (min-width: 1200px) {
    .four-cards-section .cards-grid { gap: 35px; }
    .four-cards-section.horizontal-layout .card-image-container { width: 220px; min-width: 220px; max-width: 220px; }
  }

  /* Mobile: 480px and below */
  @media (max-width: 480px) {
    .four-cards-section .container { padding: 0 15px; }
    .four-cards-section .four-cards-header { margin-bottom: 30px; }
    .four-cards-section .four-cards-subtitle { font-size: 14px; }
    .four-cards-section .cards-grid { gap: 15px; }
    .four-cards-section .card-content { padding: 15px; }
    .four-cards-section .card-title { margin-bottom: 10px; font-size: var(--title-size-mobile); }
    .four-cards-section .card-description { font-size: var(--description-size-mobile); margin-bottom: 6px; }
    .four-cards-section .card-bullets { overflow: visible; }

    .four-cards-section.horizontal-layout .cards-grid { gap: 12px; }
    .four-cards-section.horizontal-layout .card-image-placeholder svg { width: 32px; height: 32px; }
    .four-cards-section.horizontal-layout .card-content { padding: 12px; }
    .four-cards-section.horizontal-layout .card-title { font-size: var(--title-size-mobile); margin-bottom: 6px; line-height: 1.2; }
    .four-cards-section.horizontal-layout .card-description { font-size: var(--description-size-mobile); line-height: 1.3; margin-bottom: 6px; }
    .four-cards-section .bullet-text { font-size: var(--bullet-size-mobile); }
    .four-cards-section .bullet-icon .material-symbols-outlined { font-size: var(--bullet-icon-size-mobile, 12px); width: var(--bullet-icon-size-mobile, 12px); height: var(--bullet-icon-size-mobile, 12px); }
    .four-cards-section.horizontal-layout .bullet-text { font-size: var(--bullet-size-mobile); }
    .four-cards-section.horizontal-layout .card-bullets { gap: 4px 6px; }
  }


  /* ============================================================
     SECTION-SPECIFIC OVERRIDES — scoped to #BenefitCards-{{ section.id }}
     ============================================================ */

  #BenefitCards-{{ section.id }} {
    margin-top: {{ section.settings.margin_top }}px;
    margin-bottom: {{ section.settings.margin_bottom }}px;
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    --heading-cards-spacing: {{ section.settings.heading_cards_spacing }}px;

    /* Typography scale */
    --title-size-desktop: {{ section.settings.title_size_desktop }}px;
    --title-size-mobile: {{ section.settings.title_size_mobile }}px;
    --description-size-desktop: {{ section.settings.description_size_desktop }}px;
    --description-size-mobile: {{ section.settings.description_size_mobile }}px;
    --bullet-size-desktop: {{ section.settings.bullet_size_desktop }}px;
    --bullet-size-mobile: {{ section.settings.bullet_size_mobile }}px;

    /* Card appearance */
    {% if section.settings.card_bg_gradient != blank %}
      --card-background: {{ section.settings.card_bg_gradient }};
    {% else %}
      --card-background: {{ section.settings.card_bg_color }};
    {% endif %}
    --card-border-color: {{ section.settings.card_border_color }};
    --card-border-width: {{ section.settings.card_border_width }}px;
    --card-border-style: {{ section.settings.card_border_style }};
    --card-border-radius: {{ section.settings.card_border_radius }}px;
  }

  @media screen and (min-width: 750px) {
    #BenefitCards-{{ section.id }} {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  /* Desktop column count → grid */
  @media screen and (min-width: 767px) {
    #BenefitCards-{{ section.id }} .cards-grid {
      --desktop-columns: {{ section.settings.desktop_columns }};
    }
  }

  /* Single vertical card — centered full-width */
#BenefitCards-{{ section.id }} .cards-grid.single-card {
  grid-template-columns: 1fr;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

  /* Custom color scheme — same pattern as icon-bar.liquid */
  .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 %}

  /* Italic em styling — mirrors icon-bar.liquid */
  #BenefitCards-{{ section.id }} .benefit-cards__heading em {
    {% if section.settings.italic_style == 'italic' %}
      text-decoration: none;
      font-style: italic;
    {% elsif section.settings.italic_style == 'font_family' and section.settings.italic_font_family != 'inherit' %}
      text-decoration: none;
      font-style: italic;
      {% if section.settings.italic_font_family == 'serif' %}
        font-family: serif;
      {% elsif section.settings.italic_font_family == 'georgia-pro' %}
        font-family: 'Georgia Pro', Georgia, serif;
      {% elsif section.settings.italic_font_family == 'bodoni-moda' %}
        font-family: 'Bodoni Moda', Georgia, serif;
      {% elsif section.settings.italic_font_family == 'instrument-serif' %}
        font-family: 'Instrument Serif', Georgia, serif;
      {% 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;
      {% elsif section.settings.italic_font_family == 'cursive' %}
        font-family: cursive;
      {% endif %}
      {% if section.settings.italic_font_weight != 'inherit' %}
        font-weight: {{ section.settings.italic_font_weight }};
      {% endif %}
    {% else %}
      text-decoration: underline;
      font-style: normal;
      text-decoration-color: {{ section.settings.underlinetextcolor }};
      text-decoration-thickness: {{ section.settings.underlinethickness }}px;
    {% endif %}
  }

  /* Bold / gradient highlight for inline_richtext — mirrors icon-bar.liquid */
  {% if section.settings.enable_gradient %}
    #BenefitCards-{{ section.id }} .benefit-cards__heading strong {
      background: {{ section.settings.title_gradient_background }};
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-style: normal;
    }
  {% endif %}

  /* Heading alignment */
  #BenefitCards-{{ section.id }} .benefit-cards__heading {
    text-align: {{ section.settings.heading_alignment }};
    overflow: visible;
    width: 100%;
    max-width: none;
  }

  /* Subtitle alignment */
  #BenefitCards-{{ section.id }} .four-cards-subtitle {
    text-align: {{ section.settings.heading_alignment }};
  }

  /* Animation fixes — mirrors icon-bar.liquid */
  #BenefitCards-{{ section.id }}.animate-section,
  #BenefitCards-{{ section.id }} .animate-item {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
  }

{%- endstyle -%}

<div
  id="BenefitCards-{{ section.id }}"
  class="four-cards-section animate-section animate--hidden color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient{% if section.settings.layout == 'horizontal' %} horizontal-layout{% endif %}{% if section.settings.has_bullet_containers %} has-bullet-containers{% endif %} {{ 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="container">

  {%- liquid
    assign content_index = 0
    if section.settings.title != blank or section.settings.subtitle != blank
      assign content_index = 1
    endif
  -%}

    {%- if section.settings.title != blank or section.settings.subtitle != blank -%}
      <div class="animate-item animate-item--child" style="--index: 0;">
        <div class="section-header four-cards-header">
          {%- if 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 -%}
            <h2
              class="benefit-cards__heading section-heading title {{ section.settings.heading_size }} title-with-highlight"
              style="--hightlight-color: {{ section.settings.title_highlight_color }}; --gradient-text: {{ section.settings.title_gradient_background }};"
            >
              {{ heading_output }}
            </h2>
          {%- endif -%}
          {%- if section.settings.subtitle != blank -%}
            <p class="four-cards-subtitle">{{ section.settings.subtitle }}</p>
          {%- endif -%}
        </div>
      </div>
    {%- endif -%}

    {%- liquid
  assign content_index = 0
  if section.settings.title != blank or section.settings.subtitle != blank
    assign content_index = 1
  endif
  assign card_block_count = 0
  for block in section.blocks
    if block.type == 'card'
      assign card_block_count = card_block_count | plus: 1
    endif
  endfor
-%}

    <div class="cards-grid{% if card_block_count == 1 and section.settings.layout == 'vertical' %} single-card{% endif %}">
      {%- for block in section.blocks -%}
        {%- if block.type == 'card' -%}
          <div class="animate-item animate-item--child" style="--index: {{ forloop.index0 | plus: content_index }};">
            <div class="card-item" {{ block.shopify_attributes }}>

              {%- if block.settings.image != blank -%}
                <div class="card-image-container">
                  <img
                    src="{{ block.settings.image | image_url: width: 400 }}"
                    alt="{{ block.settings.image.alt | default: block.settings.title | escape }}"
                    class="card-image"
                    loading="lazy"
                    width="400"
                    height="400"
                  >
                </div>
              {%- else -%}
                <div class="card-image-container">
                  <div class="card-image-placeholder">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                      <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/>
                    </svg>
                  </div>
                </div>
              {%- endif -%}

              <div class="card-content">

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

                {%- if block.settings.description != blank -%}
                  <p class="card-description">{{ block.settings.description }}</p>
                {%- endif -%}

                {%- unless block.settings.bullet_1 == blank
                      and block.settings.bullet_2 == blank
                      and block.settings.bullet_3 == blank
                      and block.settings.bullet_4 == blank -%}
                  <div class="card-bullets">
                    {%- assign raw_bullets = block.settings.bullet_1 | append: '|||'
                        | append: block.settings.bullet_2 | append: '|||'
                        | append: block.settings.bullet_3 | append: '|||'
                        | append: block.settings.bullet_4 -%}
                    {%- assign bullets = raw_bullets | split: '|||' -%}
                    {%- for bullet in bullets -%}
                      {%- if bullet != blank -%}
                        <div
                          class="bullet-item{% if section.settings.has_bullet_containers %} has-container{% endif %}"
                          {% if section.settings.has_bullet_containers %}
                            style="background-color: {{ block.settings.bullet_bg_color }}; border: {{ block.settings.bullet_border_width }}px solid {{ block.settings.bullet_border_color }}; border-radius: {{ block.settings.bullet_border_radius }}px; padding: {{ block.settings.bullet_padding_v }}px {{ block.settings.bullet_padding_h }}px;"
                          {% endif %}
                        >
                          <div class="bullet-icon" style="--bullet-icon-size: {{ block.settings.bullet_icon_size }}px; --bullet-icon-size-mobile: {{ block.settings.bullet_icon_size | minus: 2 }}px; color: {% if section.settings.has_bullet_containers %}{{ block.settings.bullet_icon_color }}{% else %}rgb(var(--color-foreground)){% endif %};">
                            <span class="material-symbols-outlined{% if block.settings.bullet_icon_filled %} filled{% endif %}">{{ block.settings.bullet_icon | downcase | replace: ' ', '_' }}</span>
                          </div>
                          <span class="bullet-text" style="color: {% if section.settings.has_bullet_containers %}{{ block.settings.bullet_text_color }}{% else %}rgb(var(--color-foreground)){% endif %};">
                            {{- bullet -}}
                          </span>
                        </div>
                      {%- endif -%}
                    {%- endfor -%}
                  </div>
                {%- endunless -%}

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

  </div>
</div>

{% schema %}
{
  "name": "Benefit cards",
  "class": "section",
  "tag": "section",
  "disabled_on": { "groups": ["header", "footer"] },
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID can also be put inside any button link and the button will scroll to this section.",
      "default": false
    },
    {
      "type": "select",
      "id": "visibility",
      "label": "Display on",
      "options": [
        { "value": "desktop-hidden", "label": "Mobile only" },
        { "value": "mobile-hidden",  "label": "Desktop only" },
        { "value": "always-display", "label": "All devices" }
      ],
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "layout",
      "label": "Card layout",
      "options": [
        { "value": "horizontal", "label": "Horizontal (image left, content right)" },
        { "value": "vertical",   "label": "Vertical (image top, content below)" }
      ],
      "default": "horizontal"
    },
    {
      "type": "select",
      "id": "desktop_columns",
      "label": "Cards per row (desktop)",
      "options": [
        { "value": "1", "label": "1" },
        { "value": "2", "label": "2" }
      ],
      "default": "2"
    },
    {
      "type": "checkbox",
      "id": "has_bullet_containers",
      "label": "Show bullet pill containers",
      "default": true
    },
    {
      "type": "range",
      "id": "heading_cards_spacing",
      "label": "Space above cards",
      "min": 12,
      "max": 60,
      "step": 4,
      "unit": "px",
      "default": 40
    },
    {
      "type": "header",
      "content": "Heading"
    },
    {
      "type": "inline_richtext",
      "id": "title",
      "label": "Heading",
      "default": "Act now to secure the <strong>Welcome Offer</strong>",
      "info": "Bold words are highlighted. Italic words use the italic style setting below."
    },
    {
      "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",
      "label": "Heading size",
      "options": [
        { "value": "h2", "label": "Small" },
        { "value": "h1", "label": "Medium" },
        { "value": "h0", "label": "Large" }
      ],
      "default": "h1"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Heading highlight color",
      "default": "#13341b"
    },
    {
      "type": "checkbox",
      "id": "enable_gradient",
      "label": "Enable gradient for bold text",
      "default": false,
      "info": "Overrides the solid highlight color above with a gradient"
    },
    {
      "type": "color_background",
      "id": "title_gradient_background",
      "label": "Gradient highlight",
      "default": "linear-gradient(45deg, rgba(19, 52, 27, 1), rgba(215, 237, 150, 1) 100%)",
      "info": "Used when gradient is enabled"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "Heading alignment",
      "options": [
        { "value": "left",   "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right",  "label": "Right" }
      ],
      "default": "center"
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "Subtitle"
    },
    {
      "type": "header",
      "content": "Italic Text Styling",
      "info": "Controls how italic text (*text*) in the heading is 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"
    },
    {
      "type": "color",
      "id": "underlinetextcolor",
      "label": "Underline color",
      "default": "#13341b",
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "range",
      "id": "underlinethickness",
      "label": "Underline thickness",
      "min": 1,
      "max": 8,
      "step": 1,
      "unit": "px",
      "default": 3,
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "select",
      "id": "italic_font_family",
      "label": "Italic 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": "Exact Google Fonts family name, e.g. 'Playfair Display'. Browse at https://fonts.google.com/"
    },
    {
      "type": "select",
      "id": "italic_font_weight",
      "label": "Italic 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": "Card appearance"
    },
    {
      "type": "color",
      "id": "card_bg_color",
      "label": "Card background color",
      "default": "#ffffff"
    },
    {
      "type": "color_background",
      "id": "card_bg_gradient",
      "label": "Card background gradient",
      "info": "Overrides Card background color."
    },
    {
      "type": "color",
      "id": "card_border_color",
      "label": "Card border color",
      "default": "#cccccc"
    },
    {
      "type": "range",
      "id": "card_border_width",
      "label": "Card border width",
      "min": 0,
      "max": 5,
      "step": 1,
      "unit": "px",
      "default": 1
    },
    {
      "type": "select",
      "id": "card_border_style",
      "label": "Card border style",
      "options": [
        { "value": "solid",  "label": "Solid" },
        { "value": "dashed", "label": "Dashed" },
        { "value": "dotted", "label": "Dotted" },
        { "value": "none",   "label": "None" }
      ],
      "default": "solid"
    },
    {
      "type": "range",
      "id": "card_border_radius",
      "label": "Card border radius",
      "min": 0,
      "max": 30,
      "step": 1,
      "unit": "px",
      "default": 4
    },
    {
      "type": "header",
      "content": "Typography Scale"
    },
    {
      "type": "range",
      "id": "title_size_desktop",
      "label": "Card title — desktop",
      "min": 10,
      "max": 25,
      "step": 1,
      "unit": "px",
      "default": 18
    },
    {
      "type": "range",
      "id": "title_size_mobile",
      "label": "Card title — mobile",
      "min": 8,
      "max": 20,
      "step": 1,
      "unit": "px",
      "default": 14
    },
    {
      "type": "range",
      "id": "description_size_desktop",
      "label": "Description — desktop",
      "min": 10,
      "max": 18,
      "step": 1,
      "unit": "px",
      "default": 14
    },
    {
      "type": "range",
      "id": "description_size_mobile",
      "label": "Description — mobile",
      "min": 8,
      "max": 16,
      "step": 1,
      "unit": "px",
      "default": 12
    },
    {
      "type": "range",
      "id": "bullet_size_desktop",
      "label": "Bullet text — desktop",
      "min": 8,
      "max": 20,
      "step": 1,
      "unit": "px",
      "default": 12
    },
    {
      "type": "range",
      "id": "bullet_size_mobile",
      "label": "Bullet text — mobile",
      "min": 6,
      "max": 13,
      "step": 1,
      "unit": "px",
      "default": 10
    },
    {
      "type": "header",
      "content": "Color scheme"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "label": "Color scheme",
      "info": "Custom color scheme is edited at the bottom of section settings.",
      "options": [
        { "value": "accent-1",    "label": "Accent 1" },
        { "value": "accent-2",    "label": "Accent 2" },
        { "value": "background-1","label": "Background 1" },
        { "value": "background-2","label": "Background 2" },
        { "value": "inverse",     "label": "Inverse" },
        { "value": "custom",      "label": "Custom" }
      ],
      "default": "background-1"
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding top",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding bottom",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 60
    },
    {
      "type": "header",
      "content": "Section margin"
    },
    {
      "type": "range",
      "id": "margin_top",
      "label": "Margin top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "margin_bottom",
      "label": "Margin bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "header",
      "content": "Custom color scheme",
      "info": "Applied if Color scheme setting is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "label": "Background color",
      "default": "#FFFFFF"
    },
    {
      "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",
      "label": "Text",
      "default": "#2E2A39"
    }
  ],
  "blocks": [
    {
      "type": "card",
      "name": "Card",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Card Title"
        },
        {
          "type": "text",
          "id": "description",
          "label": "Description",
          "default": "Short card description."
        },
        {
          "type": "header",
          "content": "Bullet points"
        },
        {
          "type": "text",
          "id": "bullet_1",
          "label": "Bullet 1",
          "default": "Bullet 1"
        },
        {
          "type": "text",
          "id": "bullet_2",
          "label": "Bullet 2",
          "default": "Bullet 2"
        },
        {
          "type": "text",
          "id": "bullet_3",
          "label": "Bullet 3",
          "default": "Bullet 3"
        },
        {
          "type": "text",
          "id": "bullet_4",
          "label": "Bullet 4"
        },
        {
          "type": "header",
          "content": "Bullet icon",
          "info": "Applies to all bullets on this card."
        },
        {
          "type": "text",
          "id": "bullet_icon",
          "label": "Icon name",
          "default": "verified",
          "info": "[Browse all icons](https://fonts.google.com/icons?icon.set=Material+Symbols&icon.platform=web)."
        },
        {
          "type": "checkbox",
          "id": "bullet_icon_filled",
          "label": "Filled icon",
          "default": true
        },
        {
          "type": "range",
          "id": "bullet_icon_size",
          "label": "Icon size",
          "min": 10,
          "max": 24,
          "step": 1,
          "unit": "px",
          "default": 14
        },
        {
          "type": "header",
          "content": "Bullet styling"
        },
        {
          "type": "color",
          "id": "bullet_bg_color",
          "label": "Pill background",
          "default": "#13341b"
        },
        {
          "type": "color",
          "id": "bullet_border_color",
          "label": "Pill border color",
          "default": "#13341b"
        },
        {
          "type": "range",
          "id": "bullet_border_width",
          "label": "Pill border width",
          "min": 0,
          "max": 5,
          "step": 1,
          "unit": "px",
          "default": 2
        },
        {
          "type": "range",
          "id": "bullet_border_radius",
          "label": "Pill border radius",
          "min": 0,
          "max": 50,
          "step": 2,
          "unit": "px",
          "default": 20
        },
        {
          "type": "range",
          "id": "bullet_padding_v",
          "label": "Pill vertical padding",
          "min": 0,
          "max": 20,
          "step": 1,
          "unit": "px",
          "default": 2
        },
        {
          "type": "range",
          "id": "bullet_padding_h",
          "label": "Pill horizontal padding",
          "min": 0,
          "max": 20,
          "step": 1,
          "unit": "px",
          "default": 6
        },
        {
          "type": "color",
          "id": "bullet_icon_color",
          "label": "Icon color",
          "default": "#d7ed96"
        },
        {
          "type": "color",
          "id": "bullet_text_color",
          "label": "Text color",
          "default": "#d7ed96"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Benefit cards",
      "category": "Features",
      "blocks": [
        {
          "type": "card",
          "settings": {
            "title": "AG1 Greens Powder",
            "description": "75 vitamins, minerals and whole-food sourced nutrients in one daily scoop.",
            "bullet_1": "Gut Health Support",
            "bullet_2": "Immune Support",
            "bullet_3": "Energy & Focus",
            "bullet_4": "Hormone Support",
            "bullet_icon": "verified",
            "bullet_icon_filled": true
          }
        },
        {
          "type": "card",
          "settings": {
            "title": "FREE Welcome Kit",
            "description": "Save over $120 on the Premium Welcome Kit — yours free on first order.",
            "bullet_1": "AG1 Shaker Bottle",
            "bullet_2": "Travel Packs (5-pack)",
            "bullet_3": "AG1 Canister",
            "bullet_4": "$10 Off Next Order",
            "bullet_icon": "verified",
            "bullet_icon_filled": true
          }
        }
      ]
    }
  ]
}
{% endschema %}