{{ 'https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone' | stylesheet_tag }}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
<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">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">

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

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

  .color-scheme-{{ section.id }} {
    background-color: {{ section.settings.background_color }};
  }

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

  .color-scheme-{{ section.id }}.color-custom {
    --color-background: {{ section.settings.custom_colors_background.red }}, {{ section.settings.custom_colors_background.green }}, {{ section.settings.custom_colors_background.blue }};
    --gradient-background: {% if section.settings.custom_gradient_background != blank %}{{ section.settings.custom_gradient_background }}{% else %}{{ section.settings.custom_colors_background }}{% endif %};
    --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 }};
  }

  .color-scheme-{{ section.id }}.content-for-grouping {
  isolation: auto;
  position: static;
}

  /* ===== Layout ===== */
  .itg-section-{{ section.id }} .itg-main-content {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  @media screen and (min-width: 750px) {
    .itg-section-{{ section.id }} .itg-main-content {
      flex-direction: row;
      align-items: center;
      gap: {{ section.settings.column_gap }}px;
    }

    .itg-section-{{ section.id }} .itg-icons-column.itg-icons-left {
      flex: 1;
      order: 1;
    }

    .itg-section-{{ section.id }} .itg-image-column {
      flex: 0 0 {{ section.settings.image_column_width }}%;
      order: 2;
    }

    .itg-section-{{ section.id }} .itg-icons-column.itg-icons-right {
      flex: 1;
      order: 3;
    }

    .itg-section-{{ section.id }} .itg-icons-left .itg-grid,
    .itg-section-{{ section.id }} .itg-icons-right .itg-grid {
      grid-template-columns: 1fr;
    }
  }

  /* ===== Grid ===== */
  .itg-section-{{ section.id }} .itg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: {{ section.settings.card_column_gap }}px;
    row-gap: {{ section.settings.card_row_gap }}px;
  }

  /* ===== Heading ===== */
  .itg-section-{{ section.id }} .itg-header-wrapper {
    text-align: {{ section.settings.heading_alignment }};
    margin-bottom: {{ section.settings.heading_margin_bottom }}px;
  }

  .itg-section-{{ section.id }} .itg-heading {
    color: {{ section.settings.heading_color }};
    {% unless section.settings.override_heading_size %}font-size: {{ section.settings.heading_font_size }}px;{% endunless %}
    font-weight: {{ section.settings.heading_font_weight }};
    line-height: 1.2;
    margin: 0;
  }

  {% unless section.settings.override_heading_size %}
    @media screen and (max-width: 749px) {
      .itg-section-{{ section.id }} .itg-heading {
        font-size: {{ section.settings.heading_font_size_mobile }}px;
      }
    }
  {% endunless %}

  /* Heading highlight (bold text) */
  .itg-section-{{ section.id }} .itg-heading strong {
    {% if section.settings.enable_heading_gradient %}
      background: {{ section.settings.heading_gradient }};
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: inherit;
    {% else %}
      color: {{ section.settings.heading_highlight_color }};
      font-weight: inherit;
    {% endif %}
  }

  /* Heading italic text */
  .itg-section-{{ section.id }} .itg-heading 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.underline_text_color }} !important;
      text-decoration-thickness: {{ section.settings.underline_thickness }}px !important;
    {% endif %}
  }

  /* ===== Card ===== */
  .itg-section-{{ section.id }} .itg-card {
    text-align: left;
    background: transparent;
    border: none;
    padding: 0;
  }

  @media screen and (min-width: 750px) {
    .itg-section-{{ section.id }} .itg-card {
      text-align: left;
    }
  }

  .itg-section-{{ section.id }} .itg-card-title {
    font-size: {{ section.settings.card_title_size }}px;
    font-weight: {{ section.settings.card_title_weight }};
    color: {{ section.settings.card_title_color }};
    margin: 0 0 {{ section.settings.card_title_margin_bottom }}px 0;
    line-height: 1.4;
  }

  .itg-section-{{ section.id }} .itg-card-content {
    font-size: {{ section.settings.card_text_size }}px;
    font-weight: 400;
    color: {{ section.settings.card_text_color }};
    margin: 0;
    line-height: 1.6;
  }

  .itg-section-{{ section.id }} .itg-card-content p { margin: 0; }

  @media screen and (min-width: 750px) {
    .itg-section-{{ section.id }} .itg-card-title {
      font-size: {{ section.settings.card_title_size_desktop }}px;
    }
    .itg-section-{{ section.id }} .itg-card-content {
      font-size: {{ section.settings.card_text_size_desktop }}px;
    }
  }

  /* ===== Card Header (icon + title layout) ===== */
  .itg-section-{{ section.id }} .itg-card-header {
    display: flex;
    flex-direction: column;
  }

  /* Mobile layout */
  {% if section.settings.icon_layout_mobile == 'inline' %}
    @media screen and (max-width: 749px) {
      .itg-section-{{ section.id }} .itg-card-header {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        margin-bottom: {{ section.settings.card_title_margin_bottom }}px;
      }
      .itg-section-{{ section.id }} .itg-card-header .itg-icon-wrapper {
        margin-bottom: 0;
        flex-shrink: 0;
      }
      .itg-section-{{ section.id }} .itg-card-header .itg-card-title {
        margin-bottom: 0;
      }
    }
  {% endif %}

  /* Desktop layout */
  {% if section.settings.icon_layout_desktop == 'inline' %}
    @media screen and (min-width: 750px) {
      .itg-section-{{ section.id }} .itg-card-header {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        margin-bottom: {{ section.settings.card_title_margin_bottom }}px;
      }
      .itg-section-{{ section.id }} .itg-card-header .itg-icon-wrapper {
        margin-bottom: 0;
        flex-shrink: 0;
      }
      .itg-section-{{ section.id }} .itg-card-header .itg-card-title {
        margin-bottom: 0;
      }
    }
  {% endif %}

  /* ===== Icons ===== */
  .itg-section-{{ section.id }} .itg-icon-wrapper {
    margin-bottom: {{ section.settings.icon_margin_bottom }}px;
    display: flex;
    justify-content: flex-start;
  }

  @media screen and (min-width: 750px) {
    .itg-section-{{ section.id }} .itg-icon-wrapper {
      justify-content: flex-start;
    }
  }

  .itg-section-{{ section.id }} .itg-material-icon,
  .itg-section-{{ section.id }} .material-icons,
  .itg-section-{{ section.id }} .material-icons-outlined,
  .itg-section-{{ section.id }} .material-icons-round,
  .itg-section-{{ section.id }} .material-symbols-outlined,
  .itg-section-{{ section.id }} .material-symbols-rounded {
    font-size: {{ section.settings.icon_size }}px;
    color: var(--itg-icon-color, #000000);
    user-select: none;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: {{ section.settings.icon_size }}px;
    height: {{ section.settings.icon_size }}px;
  }

  .itg-section-{{ section.id }} .itg-icon-image {
    width: {{ section.settings.icon_size }}px;
    height: {{ section.settings.icon_size }}px;
    object-fit: contain;
    border-radius: var(--itg-icon-img-radius, 0px);
  }

  @media screen and (min-width: 750px) {
    .itg-section-{{ section.id }} .itg-material-icon,
    .itg-section-{{ section.id }} .material-icons,
    .itg-section-{{ section.id }} .material-icons-outlined,
    .itg-section-{{ section.id }} .material-symbols-outlined,
    .itg-section-{{ section.id }} .material-symbols-rounded {
      font-size: {{ section.settings.icon_size_desktop }}px;
      width: {{ section.settings.icon_size_desktop }}px;
      height: {{ section.settings.icon_size_desktop }}px;
    }
    .itg-section-{{ section.id }} .itg-icon-image {
      width: {{ section.settings.icon_size_desktop }}px;
      height: {{ section.settings.icon_size_desktop }}px;
    }
  }

  /* ===== Image / Video Column ===== */
  .itg-section-{{ section.id }} .itg-image-block {
    width: 100%;
    position: relative;
  }

  .itg-section-{{ section.id }} .itg-video-wrapper {
    width: 100%;
    position: relative;
    border-radius: {{ section.settings.media_border_radius }}px;
    overflow: hidden;
  }

  .itg-section-{{ section.id }} .itg-feature-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: {{ section.settings.media_border_radius }}px;
  }

  .itg-section-{{ section.id }} .itg-feature-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
  }

  /* ===== Image fade overlays ===== */
  {% if section.settings.image_fade_sides %}
    @media screen and (min-width: 750px) {
      .itg-section-{{ section.id }} .itg-image-block::after {
        content: '';
        position: absolute;
        top: 0; bottom: 0; left: 0;
        width: 25%;
        pointer-events: none;
        z-index: 1;
        background: linear-gradient(to right, {{ section.settings.background_color }}, transparent) !important;
      }
      .itg-section-{{ section.id }} .itg-image-block::before {
        content: '';
        position: absolute;
        top: 0; bottom: 0; right: 0;
        width: 25%;
        pointer-events: none;
        z-index: 1;
        background: linear-gradient(to left, {{ section.settings.background_color }}, transparent) !important;
      }
    }
  {% endif %}

  /* ===== Mobile ===== */
  @media screen and (max-width: 749px) {
    .itg-section-{{ section.id }} .itg-main-content {
      flex-direction: column !important;
    }

    .itg-section-{{ section.id }} .itg-image-column {
      order: 1 !important;
      width: 100vw !important;
      margin-left: calc(-50vw + 50%) !important;
      margin-right: calc(-50vw + 50%) !important;
    }

    .itg-section-{{ section.id }} .itg-icons-column.itg-icons-left {
      order: 2 !important;
      flex: 1 !important;
      width: 100% !important;
      margin-top: -{{ section.settings.mobile_icon_overlap }}px;
      z-index: 2;
    }

    .itg-section-{{ section.id }} .itg-icons-column.itg-icons-right {
      order: 3 !important;
      flex: 1 !important;
      width: 100% !important;
    }

    .itg-section-{{ section.id }} .itg-icons-column.itg-icons-left {
      margin-bottom: {{ section.settings.card_row_gap }}px !important;
    }

    .itg-section-{{ section.id }} .itg-icons-left .itg-grid,
    .itg-section-{{ section.id }} .itg-icons-right .itg-grid {
      grid-template-columns: repeat(2, 1fr) !important;
    }

    .itg-section-{{ section.id }} .itg-image-block {
      margin-bottom: {{ section.settings.image_margin_bottom_mobile }}px;
    }

    {% if section.settings.image_fade_bottom_mobile %}
      .itg-section-{{ section.id }} .itg-image-block::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 35%;
        pointer-events: none;
        background: linear-gradient(to bottom, transparent, {{ section.settings.background_color }});
      }
    {% endif %}
  }

  /* ===== Button ===== */
  .itg-section-{{ section.id }} .itg-button-wrapper {
    margin-top: {{ section.settings.button_margin_top }}px;
    margin-bottom: {{ section.settings.button_margin_bottom }}px;
    text-align: {{ section.settings.button_alignment }};
  }

  .itg-section-{{ section.id }} .itg-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: {{ section.settings.button_bg_color }};
    color: {{ section.settings.button_text_color }};
    border: {{ section.settings.button_border_width }}px solid {{ section.settings.button_border_color }};
    border-radius: {{ section.settings.button_border_radius }}px;
    padding: {{ section.settings.button_padding_v }}px {{ section.settings.button_padding_h }}px;
    font-size: {{ section.settings.button_font_size }}px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .itg-section-{{ section.id }} .itg-button:hover {
    background-color: {{ section.settings.button_hover_bg_color }};
    color: {{ section.settings.button_text_color }};
    transform: translateY(-2px);
  }

  .itg-section-{{ section.id }} .itg-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px !important;
    color: {{ section.settings.button_text_color }} !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    -webkit-font-smoothing: antialiased;
  }

  .itg-section-{{ section.id }} .itg-button-icon--left { margin-right: 8px; }
  .itg-section-{{ section.id }} .itg-button-icon--right { margin-left: 8px; }

  @media screen and (max-width: 749px) {
    .itg-section-{{ section.id }} .itg-button-wrapper {
      text-align: center;
    }
    .itg-section-{{ section.id }} .itg-button {
      {% if section.settings.button_full_width_mobile %}width: 100%;{% endif %}
      font-size: {{ section.settings.button_font_size | minus: 2 }}px;
    }
  }
{%- endstyle -%}

<div class="color-scheme-{{ section.id }} content-for-grouping animate-section animate--hidden {{ 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 %}

  <section class="itg-section-{{ section.id }} section-{{ section.id }}-padding page-width">

    {%- comment -%} ===== Heading ===== {%- endcomment -%}
    {% 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="itg-header-wrapper animate-item">
        <h2 class="itg-heading{% if section.settings.override_heading_size %} {{ section.settings.theme_heading_size }}{% endif %}">{{ heading_output }}</h2>
      </div>
    {% endif %}

    <div class="itg-main-content">

      {%- comment -%} ===== LEFT ICON CARDS ===== {%- endcomment -%}
      <div class="itg-icons-column itg-icons-left animate-item">
        <div class="itg-grid">
          {% for block in section.blocks %}
            {% if block.type == 'icon_card' and block.settings.column_side == 'left' %}
              <div class="itg-card" style="--itg-icon-color: {{ block.settings.icon_color }}; --itg-icon-img-radius: {{ block.settings.icon_img_border_radius }}px;" {{ block.shopify_attributes }}>
                <div class="itg-card-header">
                  <div class="itg-icon-wrapper">
                    {% if block.settings.custom_icon != blank %}
                      <img
                        class="itg-icon-image"
                        src="{{ block.settings.custom_icon | image_url: width: 120 }}"
                        alt="{{ block.settings.custom_icon.alt | escape }}"
                        width="{{ section.settings.icon_size_desktop }}"
                        height="{{ section.settings.icon_size_desktop }}"
                        loading="lazy"
                      >
                    {% elsif block.settings.icon != blank %}
                      <span class="{% if block.settings.filled_icon %}material-icons{% else %}material-symbols-outlined{% endif %} itg-material-icon">{{ block.settings.icon }}</span>
                    {% endif %}
                  </div>
                  {% if block.settings.title != blank %}
                    <h3 class="itg-card-title">{{ block.settings.title }}</h3>
                  {% endif %}
                </div>
                {% if block.settings.text != blank %}
                  <div class="itg-card-content">{{ block.settings.text }}</div>
                {% endif %}
              </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>

           {%- comment -%} ===== CENTER IMAGE / VIDEO ===== {%- endcomment -%}
            <div class="itg-image-column animate-item">
              <div class="itg-image-block">
                {% assign has_media = false %}
                {% for block in section.blocks %}
                  {% if block.type == 'media' %}
                    {% if block.settings.video != blank or block.settings.image != blank %}
                      {% assign has_media = true %}
                    {% endif %}
                    {% if block.settings.video != blank %}
                      <div class="itg-video-wrapper" style="aspect-ratio: {{ block.settings.video_aspect_ratio }};" {{ block.shopify_attributes }}>
                        {% if block.settings.video.sources %}
                          <video
                            playsinline
                            autoplay
                            loop
                            muted
                            class="itg-feature-video"
                            preload="metadata"
                            {% if block.settings.video.preview_image %}
                              poster="{{ block.settings.video.preview_image | image_url: width: 1500 }}"
                            {% endif %}
                          >
                            {% for source in block.settings.video.sources %}
                              <source src="{{ source.url }}" type="{{ source.mime_type }}">
                            {% endfor %}
                            {% if block.settings.video.preview_image %}
                              <img src="{{ block.settings.video.preview_image | image_url: width: 1500 }}" alt="{{ block.settings.video.alt | escape }}">
                            {% endif %}
                          </video>
                        {% endif %}
                      </div>
                    {% elsif block.settings.image != blank %}
                      <img
                        class="itg-feature-image"
                        src="{{ block.settings.image | image_url: width: 1200 }}"
                        alt="{{ block.settings.image.alt | escape }}"
                        width="{{ block.settings.image.width }}"
                        height="{{ block.settings.image.height }}"
                        loading="lazy"
                        {{ block.shopify_attributes }}
                      >
                    {% endif %}
                  {% endif %}
                {% endfor %}
                {% unless has_media %}
                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                {% endunless %}
              </div>
            </div>

      {%- comment -%} ===== RIGHT ICON CARDS ===== {%- endcomment -%}
      <div class="itg-icons-column itg-icons-right animate-item">
        <div class="itg-grid">
          {% for block in section.blocks %}
            {% if block.type == 'icon_card' and block.settings.column_side == 'right' %}
              <div class="itg-card" style="--itg-icon-color: {{ block.settings.icon_color }}; --itg-icon-img-radius: {{ block.settings.icon_img_border_radius }}px;" {{ block.shopify_attributes }}>
                <div class="itg-card-header">
                  <div class="itg-icon-wrapper">
                    {% if block.settings.custom_icon != blank %}
                      <img
                        class="itg-icon-image"
                        src="{{ block.settings.custom_icon | image_url: width: 120 }}"
                        alt="{{ block.settings.custom_icon.alt | escape }}"
                        width="{{ section.settings.icon_size_desktop }}"
                        height="{{ section.settings.icon_size_desktop }}"
                        loading="lazy"
                      >
                    {% elsif block.settings.icon != blank %}
                      <span class="{% if block.settings.filled_icon %}material-icons{% else %}material-symbols-outlined{% endif %} itg-material-icon">{{ block.settings.icon }}</span>
                    {% endif %}
                  </div>
                  {% if block.settings.title != blank %}
                    <h3 class="itg-card-title">{{ block.settings.title }}</h3>
                  {% endif %}
                </div>
                {% if block.settings.text != blank %}
                  <div class="itg-card-content">{{ block.settings.text }}</div>
                {% endif %}
              </div>
            {% endif %}
          {% endfor %}
        </div>
      </div>

    </div>{%- comment -%} /.itg-main-content {%- endcomment -%}

    {%- comment -%} ===== BUTTON ===== {%- endcomment -%}
    {% if section.settings.button_label != blank %}
      <div class="itg-button-wrapper animate-item">
        <a
          href="{{ section.settings.button_link | default: '#' }}"
          class="itg-button"
        >
          {% if section.settings.button_icon_position == 'left' and section.settings.button_icon != blank %}
            <span class="material-symbols-outlined itg-button-icon itg-button-icon--left">{{ section.settings.button_icon }}</span>
          {% endif %}
          <span>{{ section.settings.button_label }}</span>
          {% if section.settings.button_icon_position == 'right' and section.settings.button_icon != blank %}
            <span class="material-symbols-outlined itg-button-icon itg-button-icon--right">{{ section.settings.button_icon }}</span>
          {% endif %}
        </a>
      </div>
    {% endif %}

  </section>
</div>

<script>
(function() {
  const section = document.querySelector('.itg-section-{{ section.id }}');
  if (!section) return;
  const scrollBtns = section.querySelectorAll('.scroll-to-section');
  scrollBtns.forEach(btn => {
    btn.addEventListener('click', function(e) {
      const targetClass = this.getAttribute('data-scroll-target');
      if (targetClass) {
        e.preventDefault();
        const target = document.querySelector('.' + targetClass);
        if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });
})();
</script>

{% schema %}
{
  "name": "Icon text grid",
  "tag": "section",
  "class": "section-icon-text-grid",
  "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": "color",
      "id": "background_color",
      "label": "Background color",
      "default": "#ffffff",
      "info": "Also used for image fade overlay color. Should match your section background."
    },
    {
      "type": "header",
      "content": "Heading"
    },
    {
      "type": "inline_richtext",
      "id": "heading",
      "label": "Heading",
      "default": "THE BEST XXX...",
      "info": "Bold certain words to highlight them with a different color."
    },
    {
      "type": "checkbox",
      "id": "heading_two_lines",
      "label": "Split heading onto two lines",
      "default": false,
      "info": "Breaks the heading at the exact word(s) you specify below."
    },
    {
      "type": "text",
      "id": "heading_line_two",
      "label": "Start of second line",
      "info": "Type the plain text of the word or phrase where the line break should begin. The break will be inserted before that text, preserving any bold or italic styling. Note: the phrase must not straddle a bold/italic boundary.",
      "visible_if": "{{ section.settings.heading_two_lines == true }}"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center",
      "label": "Heading alignment"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading color",
      "default": "#000000"
    },
    {
      "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",
      "min": 16,
      "max": 72,
      "step": 2,
      "unit": "px",
      "label": "Heading font size (desktop)",
      "default": 28,
      "visible_if": "{{ section.settings.override_heading_size == false }}"
    },
    {
      "type": "range",
      "id": "heading_font_size_mobile",
      "min": 14,
      "max": 48,
      "step": 2,
      "unit": "px",
      "label": "Heading font size (mobile)",
      "default": 24,
      "visible_if": "{{ section.settings.override_heading_size == false }}"
    },
    {
      "type": "select",
      "id": "heading_font_weight",
      "options": [
        { "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)" }
      ],
      "default": "700",
      "label": "Heading font weight"
    },
    {
      "type": "range",
      "id": "heading_margin_bottom",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Heading bottom spacing",
      "default": 16
    },
    {
      "type": "color",
      "id": "heading_highlight_color",
      "label": "Heading highlight color",
      "default": "#000000",
      "info": "Applied to bold text in the heading"
    },
    {
      "type": "checkbox",
      "id": "enable_heading_gradient",
      "label": "Enable gradient for bold text",
      "default": false,
      "info": "Overrides the solid highlight color with a gradient"
    },
    {
      "type": "color_background",
      "id": "heading_gradient",
      "label": "Gradient highlight",
      "default": "linear-gradient(45deg, #5d5aaf 0%, #ff6b9d 100%)",
      "info": "Used when gradient is enabled"
    },
    {
      "type": "header",
      "content": "Italic Text Styling"
    },
    {
      "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": "italic"
    },
    {
      "type": "color",
      "id": "underline_text_color",
      "label": "Underline color",
      "default": "#FF0000",
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "range",
      "id": "underline_thickness",
      "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 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": "inherit",
      "info": "Used when 'Custom Font Family' style is selected"
    },
    {
      "type": "text",
      "id": "custom_google_font_name",
      "label": "Custom Google Font name",
      "info": "Enter exact Google Font 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": "Layout"
    },
    {
      "type": "range",
      "id": "image_column_width",
      "min": 20,
      "max": 60,
      "step": 5,
      "unit": "%",
      "label": "Center image column width",
      "default": 40
    },
    {
      "type": "range",
      "id": "column_gap",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "label": "Gap between columns (desktop)",
      "default": 16
    },
    {
      "type": "range",
      "id": "card_column_gap",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Card horizontal gap",
      "default": 32
    },
    {
      "type": "range",
      "id": "card_row_gap",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "label": "Card vertical gap",
      "default": 44
    },
    {
      "type": "header",
      "content": "Icon Cards"
    },
    {
      "type": "select",
      "id": "icon_layout_mobile",
      "label": "Icon layout (mobile)",
      "options": [
        { "value": "above", "label": "Above title" },
        { "value": "inline", "label": "Inline (left of title)" }
      ],
      "default": "above"
    },
    {
      "type": "select",
      "id": "icon_layout_desktop",
      "label": "Icon layout (desktop)",
      "options": [
        { "value": "above", "label": "Above title" },
        { "value": "inline", "label": "Inline (left of title)" }
      ],
      "default": "above"
    },
    {
      "type": "range",
      "id": "icon_size",
      "min": 16,
      "max": 64,
      "step": 4,
      "unit": "px",
      "label": "Icon size (mobile)",
      "default": 40
    },
    {
      "type": "range",
      "id": "icon_size_desktop",
      "min": 24,
      "max": 80,
      "step": 4,
      "unit": "px",
      "label": "Icon size (desktop)",
      "default": 60
    },
    {
      "type": "range",
      "id": "icon_margin_bottom",
      "min": 0,
      "max": 24,
      "step": 2,
      "unit": "px",
      "label": "Icon bottom spacing",
      "default": 8
    },
    {
      "type": "color",
      "id": "card_title_color",
      "label": "Card title color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "card_title_size",
      "min": 12,
      "max": 28,
      "step": 1,
      "unit": "px",
      "label": "Card title size (mobile)",
      "default": 16
    },
    {
      "type": "range",
      "id": "card_title_size_desktop",
      "min": 14,
      "max": 36,
      "step": 1,
      "unit": "px",
      "label": "Card title size (desktop)",
      "default": 20
    },
    {
      "type": "select",
      "id": "card_title_weight",
      "options": [
        { "value": "400", "label": "Normal (400)" },
        { "value": "500", "label": "Medium (500)" },
        { "value": "600", "label": "Semi Bold (600)" },
        { "value": "700", "label": "Bold (700)" }
      ],
      "default": "500",
      "label": "Card title font weight"
    },
    {
      "type": "range",
      "id": "card_title_margin_bottom",
      "min": 0,
      "max": 20,
      "step": 2,
      "unit": "px",
      "label": "Card title bottom spacing",
      "default": 10
    },
    {
      "type": "color",
      "id": "card_text_color",
      "label": "Card text color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "card_text_size",
      "min": 10,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Card text size (mobile)",
      "default": 14
    },
    {
      "type": "range",
      "id": "card_text_size_desktop",
      "min": 12,
      "max": 22,
      "step": 1,
      "unit": "px",
      "label": "Card text size (desktop)",
      "default": 15
    },
    {
      "type": "header",
      "content": "Media (Center Column)"
    },
    {
      "type": "checkbox",
      "id": "image_fade_sides",
      "label": "Fade sides of image (desktop)",
      "default": true,
      "info": "Blends the image edges into the background color."
    },
    {
      "type": "checkbox",
      "id": "image_fade_bottom_mobile",
      "label": "Fade bottom of image (mobile)",
      "default": true
    },
    {
      "type": "range",
      "id": "image_margin_bottom_mobile",
      "min": 0,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Image bottom spacing (mobile)",
      "default": 32
    },
    {
      "type": "range",
      "id": "media_border_radius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Media border radius",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_icon_overlap",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "Mobile icon overlap on image",
      "info": "Pulls left icon group up over the bottom of the image on mobile.",
      "default": 0
    },
    {
      "type": "header",
      "content": "Button"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    },
    {
      "type": "text",
      "id": "button_icon",
      "label": "Button icon (Material Symbols name)",
      "default": "arrow_right_alt",
      "info": "Leave blank for no icon. Browse icons at https://fonts.google.com/icons"
    },
    {
      "type": "select",
      "id": "button_icon_position",
      "options": [
        { "value": "left", "label": "Left of text" },
        { "value": "right", "label": "Right of text" }
      ],
      "default": "right",
      "label": "Button icon position"
    },
    {
      "type": "select",
      "id": "button_alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center",
      "label": "Button alignment"
    },
    {
      "type": "color",
      "id": "button_bg_color",
      "label": "Button background color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "button_hover_bg_color",
      "label": "Button hover background color",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button text & icon color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_border_color",
      "label": "Button border color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "button_border_width",
      "min": 0,
      "max": 4,
      "step": 1,
      "unit": "px",
      "label": "Button border width",
      "default": 0
    },
    {
      "type": "range",
      "id": "button_border_radius",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Button border radius",
      "default": 4
    },
    {
      "type": "range",
      "id": "button_font_size",
      "min": 10,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Button font size",
      "default": 16
    },
    {
      "type": "range",
      "id": "button_padding_v",
      "min": 4,
      "max": 32,
      "step": 2,
      "unit": "px",
      "label": "Button vertical padding",
      "default": 16
    },
    {
      "type": "range",
      "id": "button_padding_h",
      "min": 8,
      "max": 100,
      "step": 2,
      "unit": "px",
      "label": "Button horizontal padding",
      "default": 24
    },
    {
      "type": "checkbox",
      "id": "button_full_width_mobile",
      "label": "Full width button on mobile",
      "default": true
    },
    {
      "type": "range",
      "id": "button_margin_top",
      "min": 0,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Button top spacing",
      "default": 24
    },
    {
      "type": "range",
      "id": "button_margin_bottom",
      "min": 0,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Button bottom spacing",
      "default": 24
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 80
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 80
    }
  ],
  "blocks": [
    {
      "type": "icon_card",
      "name": "Icon Card",
      "settings": [
        {
          "type": "select",
          "id": "column_side",
          "label": "Column side",
          "options": [
            { "value": "left", "label": "Left column" },
            { "value": "right", "label": "Right column" }
          ],
          "default": "left",
          "info": "Place this card in the left or right icon column."
        },
        {
          "type": "header",
          "content": "Icon"
        },
        {
          "type": "text",
          "id": "icon",
          "label": "Icon",
          "default": "check_circle",
          "info": "[View all available icons](https://fonts.google.com/icons?icon.set=Material+Symbols&icon.platform=web)."
        },
        {
          "type": "checkbox",
          "id": "filled_icon",
          "label": "Filled icon",
          "default": false
        },
        {
          "type": "image_picker",
          "id": "custom_icon",
          "label": "Custom icon",
          "info": "Overrides the icon above if set."
        },
        {
          "type": "range",
          "id": "icon_img_border_radius",
          "label": "Custom icon border radius",
          "min": 0,
          "max": 100,
          "step": 2,
          "unit": "px",
          "default": 0,
          "info": "Applies only to custom icon images, not Material icons."
        },
        {
          "type": "color",
          "id": "icon_color",
          "label": "Icon color",
          "default": "#000000"
        },
        {
          "type": "header",
          "content": "Content"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Card title",
          "default": "Feature Title"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Card description",
          "default": "<p>A short description of this feature or benefit.</p>"
        }
      ]
    },
    {
      "type": "media",
      "name": "Center Media",
      "limit": 1,
      "settings": [
        {
          "type": "header",
          "content": "Image"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image",
          "info": "Used if no video is set."
        },
        {
          "type": "header",
          "content": "Video"
        },
        {
          "type": "video",
          "id": "video",
          "label": "Video (Shopify-hosted)",
          "info": "Plays muted and autoplays in a loop. Overrides image if set."
        },
        {
          "type": "text",
          "id": "video_aspect_ratio",
          "label": "Video aspect ratio",
          "default": "1/1",
          "info": "e.g. 1/1, 4/3, 9/16, 16/9"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Icon text grid",
      "category": "Features",
      "blocks": [
        {
          "type": "icon_card",
          "settings": {
            "column_side": "left",
            "icon": "local_shipping",
            "title": "Fast Shipping",
            "text": "<p>Free delivery on orders over $50.</p>"
          }
        },
        {
          "type": "icon_card",
          "settings": {
            "column_side": "left",
            "icon": "favorite",
            "title": "Made with Love",
            "text": "<p>Crafted with premium materials.</p>"
          }
        },
        {
          "type": "media"
        },
        {
          "type": "icon_card",
          "settings": {
            "column_side": "right",
            "icon": "straighten",
            "title": "Made to Measure",
            "text": "<p>Our customer service team is available 24/7.</p>"
          }
        },
        {
          "type": "icon_card",
          "settings": {
            "column_side": "right",
            "icon": "autorenew",
            "title": "Easy Returns",
            "text": "<p>Not satisfied? Return your order no problem.</p>"
          }
        }
      ]
    }
  ],
  "disabled_on": {
    "groups": ["header", "footer"]
  }
}
{% endschema %}