{% liquid
  assign section_id = section.id
%}

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

{% if section.settings.use_material_icons %}
  <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">
{% endif %}

{%- style -%}

  .iss-section-{{ section_id }} {
  background-color: {{ section.settings.background_color }};
  padding: {{ section.settings.padding_top_mobile }}px 0 {{ section.settings.padding_bottom_mobile }}px;
}

@media screen and (min-width: 750px) {
  .iss-section-{{ section_id }} {
    padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;
  }
}

.iss-section-{{ section_id }} .iss-container {
  max-width: {{ section.settings.container_max_width }}px;
  margin: 0 auto;
  padding: 0;
}

@media screen and (min-width: 750px) {
  .iss-section-{{ section_id }} .iss-container {
    padding: 0 40px;
  }
}

{% if section.settings.full_width %}
  @media screen and (min-width: 750px) {
    .iss-section-{{ section_id }} .iss-container {
      max-width: 100%;
      padding: 0;
    }
  }
{% endif %}

  /* Header */
  .iss-section-{{ section_id }} .iss-header {
    text-align: {{ section.settings.heading_alignment }};
    margin-bottom: {{ section.settings.heading_margin_bottom }}px;
    padding: 0 20px;
  }

  @media screen and (min-width: 750px) {
    .iss-section-{{ section_id }} .iss-header {
      padding: 0 40px;
    }
  }

  .iss-section-{{ section_id }} .iss-header-inner {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    justify-content: {{ section.settings.heading_alignment }};
    width: 100%;
  }

  .iss-section-{{ section_id }} .iss-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .iss-section-{{ section_id }} .iss-header-icon .material-symbols-outlined,
  .iss-section-{{ section_id }} .iss-header-icon .material-symbols-rounded {
    font-size: 32px;
    color: {{ section.settings.heading_icon_color }};
  }

  @media screen and (min-width: 750px) {
    .iss-section-{{ section_id }} .iss-header-icon .material-symbols-outlined,
    .iss-section-{{ section_id }} .iss-header-icon .material-symbols-rounded {
      font-size: 40px;
    }
  }

  .iss-section-{{ section_id }} .iss-header-icon svg,
  .iss-section-{{ section_id }} .iss-header-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    color: {{ section.settings.heading_icon_color }};
    fill: {{ section.settings.heading_icon_color }};
  }

  @media screen and (min-width: 750px) {
    .iss-section-{{ section_id }} .iss-header-icon svg,
    .iss-section-{{ section_id }} .iss-header-icon img {
      width: 40px;
      height: 40px;
    }
  }

  .iss-section-{{ section_id }} .iss-heading {
    {% unless section.settings.override_heading_size %}
      font-size: {{ section.settings.heading_size_mobile }}px;
    {% endunless %}
    font-weight: {{ section.settings.heading_weight }};
    color: {{ section.settings.heading_color }};
    line-height: 1.2;
    margin: 0;
  }

  {% unless section.settings.override_heading_size %}
    @media screen and (min-width: 750px) {
      .iss-section-{{ section_id }} .iss-heading {
        font-size: {{ section.settings.heading_size_desktop }}px;
      }
    }
  {% endunless %}

  .iss-section-{{ section_id }} .iss-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 %}
  }

  /* Heading highlight (bold text) */
  .iss-section-{{ section_id }} .iss-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 %}
  }

  .iss-section-{{ section_id }} .iss-subheading {
    font-size: 14px;
    font-weight: 400;
    color: {{ section.settings.subheading_color }};
    line-height: 1.5;
    margin: 8px 0 24px;
    text-align: {{ section.settings.heading_alignment }};
    padding: 0 20px;
  }

  @media screen and (min-width: 750px) {
    .iss-section-{{ section_id }} .iss-subheading {
      font-size: 16px;
      padding: 0 40px;
    }
  }

  /* Images Wrapper */
  .iss-section-{{ section_id }} .iss-images-wrapper {
    display: flex;
    flex-direction: column;
    gap: {{ section.settings.gap_mobile }}px;
  }

  @media screen and (min-width: 750px) {
    .iss-section-{{ section_id }} .iss-images-wrapper {
      flex-direction: row;
      gap: {{ section.settings.gap_desktop }}px;
    }

  }

  /* Mobile Slider — data attribute driven so editor changes reflect instantly */
  .iss-section-{{ section_id }} .iss-images-wrapper[data-mobile-layout="slider"] {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .iss-section-{{ section_id }} .iss-images-wrapper[data-mobile-layout="slider"]::-webkit-scrollbar {
    display: none;
  }

  .iss-section-{{ section_id }} .iss-images-wrapper[data-mobile-layout="slider"] .iss-image-block {
    flex: 0 0 {{ section.settings.mobile_slide_width }}%;
    scroll-snap-align: start;
  }

  @media screen and (min-width: 750px) {
    .iss-section-{{ section_id }} .iss-images-wrapper[data-mobile-layout="slider"] {
      overflow-x: visible;
      scroll-snap-type: none;
      flex-wrap: nowrap;
    }

    .iss-section-{{ section_id }} .iss-images-wrapper[data-mobile-layout="slider"] .iss-image-block {
      flex: 1;
    }
  }

  /* Bento Layout — uses data attributes so CSS reacts instantly to editor changes */
  @media screen and (min-width: 750px) {

    /* ── 2-block bento: large left, small right ── */
    .iss-section-{{ section_id }} .iss-images-wrapper[data-desktop-layout="bento"][data-block-count="2"] {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: {{ section.settings.gap_desktop }}px;
    }

    /* 2-block reverse: small left, large right */
    .iss-section-{{ section_id }} .iss-images-wrapper[data-desktop-layout="bento"][data-block-count="2"][data-bento-reverse="true"] {
      grid-template-columns: 1fr 2fr;
    }

    /* ── 3-block bento: large left spanning 2 rows, 2 small stacked right ── */
    .iss-section-{{ section_id }} .iss-images-wrapper[data-desktop-layout="bento"][data-block-count="3"] {
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: {{ section.settings.gap_desktop }}px;
    }

    /* First block spans both rows on the left */
    .iss-section-{{ section_id }} .iss-images-wrapper[data-desktop-layout="bento"][data-block-count="3"] .iss-image-block:nth-child(1) {
      grid-column: 1;
      grid-row: 1 / span 2;
    }

    /* Second and third blocks sit in col 2, rows 1 and 2 */
    .iss-section-{{ section_id }} .iss-images-wrapper[data-desktop-layout="bento"][data-block-count="3"] .iss-image-block:nth-child(2) {
      grid-column: 2;
      grid-row: 1;
    }

    .iss-section-{{ section_id }} .iss-images-wrapper[data-desktop-layout="bento"][data-block-count="3"] .iss-image-block:nth-child(3) {
      grid-column: 2;
      grid-row: 2;
    }

    /* 3-block reverse: 2 small stacked left, large right spanning 2 rows */
    .iss-section-{{ section_id }} .iss-images-wrapper[data-desktop-layout="bento"][data-block-count="3"][data-bento-reverse="true"] {
      grid-template-columns: 1fr 2fr;
    }

    .iss-section-{{ section_id }} .iss-images-wrapper[data-desktop-layout="bento"][data-block-count="3"][data-bento-reverse="true"] .iss-image-block:nth-child(1) {
      grid-column: 2;
      grid-row: 1 / span 2;
    }

    .iss-section-{{ section_id }} .iss-images-wrapper[data-desktop-layout="bento"][data-block-count="3"][data-bento-reverse="true"] .iss-image-block:nth-child(2) {
      grid-column: 1;
      grid-row: 1;
    }

    .iss-section-{{ section_id }} .iss-images-wrapper[data-desktop-layout="bento"][data-block-count="3"][data-bento-reverse="true"] .iss-image-block:nth-child(3) {
      grid-column: 1;
      grid-row: 2;
    }

  }

  /* Image Block */
  .iss-section-{{ section_id }} .iss-image-block {
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: {{ section.settings.border_radius_mobile }}px;
    background-color: #e5e5e5;
  }

  @media screen and (min-width: 750px) {
    .iss-section-{{ section_id }} .iss-image-block {
      border-radius: {{ section.settings.border_radius_desktop }}px;
    }
  }

  .iss-section-{{ section_id }} .iss-image-block img,
  .iss-section-{{ section_id }} .iss-image-block .placeholder-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .iss-section-{{ section_id }} .iss-image-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
  }

  /* Overlay */
  .iss-section-{{ section_id }} .iss-overlay {
    position: absolute;
    padding: 16px;
    z-index: 1;
    pointer-events: none;
  }

  .iss-section-{{ section_id }} .iss-overlay-top-left     { top: 0; left: 0; }
  .iss-section-{{ section_id }} .iss-overlay-top-center   { top: 0; left: 50%; transform: translateX(-50%); text-align: center; }
  .iss-section-{{ section_id }} .iss-overlay-top-right    { top: 0; right: 0; text-align: right; }
  .iss-section-{{ section_id }} .iss-overlay-center-left  { top: 50%; left: 0; transform: translateY(-50%); }
  .iss-section-{{ section_id }} .iss-overlay-center       { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
  .iss-section-{{ section_id }} .iss-overlay-center-right { top: 50%; right: 0; transform: translateY(-50%); text-align: right; }
  .iss-section-{{ section_id }} .iss-overlay-bottom-left  { bottom: 0; left: 0; }
  .iss-section-{{ section_id }} .iss-overlay-bottom-center{ bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; }
  .iss-section-{{ section_id }} .iss-overlay-bottom-right { bottom: 0; right: 0; text-align: right; }

  .iss-section-{{ section_id }} .iss-overlay-icon {
    margin-bottom: 8px;
  }

  .iss-section-{{ section_id }} .iss-overlay-heading {
    margin: 0 0 8px 0;
    line-height: 1.2;
  }

  .iss-section-{{ section_id }} .iss-overlay-text {
    margin: 0;
    line-height: 1.4;
  }

  /* Button */
  .iss-section-{{ section_id }} .iss-button-wrapper {
    text-align: {{ section.settings.button_alignment }};
    margin-top: {{ section.settings.button_margin_top }}px;
    padding: 0 20px;
  }

  @media screen and (min-width: 750px) {
    .iss-section-{{ section_id }} .iss-button-wrapper {
      padding: 0 40px;
    }
  }

  .iss-section-{{ section_id }} .iss-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: {{ section.settings.button_padding_vertical }}px {{ section.settings.button_padding_horizontal }}px;
    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;
    font-size: {{ section.settings.button_font_size }}px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .iss-section-{{ section_id }} .iss-button:hover {
    background-color: {{ section.settings.button_bg_hover_color }};
    color: {{ section.settings.button_text_hover_color }};
    border-color: {{ section.settings.button_bg_hover_color }};
  }

  .iss-section-{{ section_id }} .iss-button-icon {
    display: flex;
    align-items: center;
  }

  .iss-section-{{ section_id }} .iss-button-icon .material-symbols-outlined,
  .iss-section-{{ section_id }} .iss-button-icon .material-symbols-rounded {
    font-size: 22px;
  }

  .iss-section-{{ section_id }} .iss-button-icon svg {
    width: 22px;
    height: 22px;
  }

  /* Per-block styles */
  {% for block in section.blocks %}
    {% if block.type == 'image' %}
      .iss-section-{{ section_id }} .iss-image-block-{{ block.id }} {
        aspect-ratio: {{ block.settings.aspect_ratio_mobile | replace: ':', '/' }};
      }

      @media screen and (min-width: 750px) {
        .iss-section-{{ section_id }} .iss-image-block-{{ block.id }} {
          aspect-ratio: {{ block.settings.aspect_ratio_desktop | replace: ':', '/' }};
        }
      }

      .iss-section-{{ section_id }} .iss-fade-mask-{{ block.id }} {
        display: {% if block.settings.fade_enabled %}block{% else %}none{% endif %};
        position: absolute;
        left: 0;
        right: 0;
        height: {{ block.settings.fade_height }}px;
        pointer-events: none;
        z-index: 1;
        {% if block.settings.fade_direction == 'bottom' %}
          bottom: 0;
          background: linear-gradient(to top, {{ block.settings.fade_color }} 0%, transparent 100%);
        {% else %}
          top: 0;
          background: linear-gradient(to bottom, {{ block.settings.fade_color }} 0%, transparent 100%);
        {% endif %}
      }

      /* Overlay text per block */
      .iss-overlay-{{ block.id }} .iss-overlay-heading {
        font-size: {{ block.settings.overlay_heading_size_mobile }}px;
        font-weight: {{ block.settings.overlay_heading_weight }};
        color: {{ block.settings.overlay_heading_color }};
      }

      .iss-overlay-{{ block.id }} .iss-overlay-text {
        font-size: {{ block.settings.overlay_text_size_mobile }}px;
        font-weight: {{ block.settings.overlay_text_weight }};
        color: {{ block.settings.overlay_text_color }};
      }

      @media screen and (min-width: 750px) {
        .iss-overlay-{{ block.id }} .iss-overlay-heading {
          font-size: {{ block.settings.overlay_heading_size_desktop }}px;
        }
        .iss-overlay-{{ block.id }} .iss-overlay-text {
          font-size: {{ block.settings.overlay_text_size_desktop }}px;
        }
      }

      .iss-overlay-icon-{{ block.id }} .material-symbols-outlined,
      .iss-overlay-icon-{{ block.id }} .material-symbols-rounded {
        font-size: 32px;
        color: {{ block.settings.overlay_icon_color }};
      }

      .iss-overlay-icon-{{ block.id }} svg {
        width: 32px;
        height: 32px;
        fill: {{ block.settings.overlay_icon_color }};
        color: {{ block.settings.overlay_icon_color }};
      }

      .iss-overlay-icon-{{ block.id }} img {
        width: 32px;
        height: 32px;
      }

      .iss-overlay-highlight-{{ block.id }} {
        color: {{ block.settings.overlay_highlight_color }};
      }

    {% endif %}
  {% endfor %}

{%- endstyle -%}

<section class="iss-section-{{ section_id }} gradient {{ section.settings.visibility }}">
  <div class="iss-container">

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

    {% unless section.settings.heading == blank %}
      <div class="iss-header">
        <div class="iss-header-inner">

          {% if section.settings.header_icon_type == 'material' and section.settings.header_icon_name != blank %}
            <div class="iss-header-icon">
              <span class="{{ section.settings.header_icon_style }}">{{ section.settings.header_icon_name }}</span>
            </div>
          {% elsif section.settings.header_icon_type == 'image' and section.settings.header_icon_image != blank %}
            <div class="iss-header-icon">
              <img src="{{ section.settings.header_icon_image | img_url: '80x80' }}" alt="" width="40" height="40">
            </div>
          {% endif %}

          <h2 class="iss-heading{% if section.settings.override_heading_size %} {{ section.settings.theme_heading_size }}{% endif %}">
            {{ section.settings.heading }}
          </h2>

        </div>
      </div>
    {% endunless %}

    {% unless section.settings.subheading == blank %}
      <p class="iss-subheading">{{ section.settings.subheading }}</p>
    {% endunless %}

    {% liquid
      assign block_count = section.blocks | where: 'type', 'image' | size
    %}

    <div
      class="iss-images-wrapper"
      data-desktop-layout="{{ section.settings.desktop_layout }}"
      data-bento-reverse="{{ section.settings.bento_reverse }}"
      data-block-count="{{ block_count }}"
      data-mobile-layout="{{ section.settings.mobile_layout }}"
    >
      {% for block in section.blocks %}
        {% if block.type == 'image' %}
          <div class="iss-image-block iss-image-block-{{ block.id }}" {{ block.shopify_attributes }}>

            {% if block.settings.link != blank %}
              <a href="{{ block.settings.link }}" class="iss-image-link" {% if block.settings.link_new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}>
            {% endif %}

            {% if block.settings.image != blank %}
              {%- liquid
                assign image_width = block.settings.image.width
                assign image_height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio
                assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000'
              -%}
              {{ block.settings.image | image_url: width: 3000 | image_tag:
                loading: 'lazy',
                width: image_width,
                height: image_height,
                widths: widths,
                alt: block.settings.image_alt | default: section.settings.heading
              }}
            {% else %}
              {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}

            {% if block.settings.link != blank %}
              </a>
            {% endif %}

            <div class="iss-fade-mask-{{ block.id }}"></div>

            {% if block.settings.overlay_heading != blank or block.settings.overlay_text != blank %}
              <div class="iss-overlay iss-overlay-{{ block.settings.overlay_position }} iss-overlay-{{ block.id }}">

                {% if block.settings.overlay_icon_type == 'material' and block.settings.overlay_icon_name != blank %}
                  <div class="iss-overlay-icon iss-overlay-icon-{{ block.id }}">
                    <span class="{{ block.settings.overlay_icon_style }} {% if block.settings.overlay_icon_filled %}iss-icon-filled{% endif %}">
                      {{ block.settings.overlay_icon_name }}
                    </span>
                  </div>
                {% endif %}

                {% if block.settings.overlay_heading != blank %}
                  <h3 class="iss-overlay-heading">
                    {% if block.settings.overlay_highlight != blank %}
                      <span class="iss-overlay-highlight iss-overlay-highlight-{{ block.id }}">{{ block.settings.overlay_highlight }}</span>
                    {% endif %}
                    {{ block.settings.overlay_heading }}
                  </h3>
                {% endif %}

                {% if block.settings.overlay_text != blank %}
                  <p class="iss-overlay-text">{{ block.settings.overlay_text }}</p>
                {% endif %}

              </div>
            {% endif %}

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

    {% if section.settings.button_label != blank %}
      <div class="iss-button-wrapper">
        <a
          href="{{ section.settings.button_link | default: '#' }}"
          class="iss-button"
          {% if section.settings.button_new_tab %}target="_blank" rel="noopener noreferrer"{% endif %}
        >
          {% if section.settings.button_icon_name != blank %}
            <span class="iss-button-icon">
              <span class="{{ section.settings.button_icon_style }}">{{ section.settings.button_icon_name }}</span>
            </span>
          {% endif %}
          {{ section.settings.button_label }}
        </a>
      </div>
    {% endif %}

  </div>
</section>

{% schema %}
{
  "name": "Image stack",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "header",
      "content": "General"
    },
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "default": false,
      "info": "ID is used to put inside any button link and the button will scroll to this section."
    },
    {
      "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": "color",
      "id": "background_color",
      "label": "Background color",
      "default": "#ffffff"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "Full width (remove container padding)",
      "default": true
    },
    {
      "type": "range",
      "id": "container_max_width",
      "min": 800,
      "max": 1800,
      "step": 100,
      "unit": "px",
      "label": "Container max width",
      "default": 1400
    },
    {
      "type": "header",
      "content": "Heading"
    },
    {
      "type": "inline_richtext",
      "id": "heading",
      "label": "Heading",
      "default": "Our Collection"
    },
    {
      "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": "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_size_mobile",
      "min": 14,
      "max": 48,
      "step": 1,
      "unit": "px",
      "label": "Heading size (mobile)",
      "default": 20,
      "visible_if": "{{ section.settings.override_heading_size == false }}"
    },
    {
      "type": "range",
      "id": "heading_size_desktop",
      "min": 16,
      "max": 72,
      "step": 1,
      "unit": "px",
      "label": "Heading size (desktop)",
      "default": 24,
      "visible_if": "{{ section.settings.override_heading_size == false }}"
    },
    {
      "type": "select",
      "id": "heading_weight",
      "label": "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": "600"
    },
    {
      "type": "range",
      "id": "heading_margin_bottom",
      "min": 0,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Heading bottom spacing",
      "default": 16
    },
    {
      "type": "color",
      "id": "heading_highlight_color",
      "label": "Heading highlight color",
      "default": "#6D388B",
      "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": "Subheading"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading"
    },
    {
      "type": "color",
      "id": "subheading_color",
      "label": "Subheading color",
      "default": "#666666"
    },
    {
      "type": "header",
      "content": "Header icon"
    },
    {
      "type": "select",
      "id": "header_icon_type",
      "label": "Icon type",
      "options": [
        { "value": "none", "label": "None" },
        { "value": "material", "label": "Material Symbol" },
        { "value": "image", "label": "Image" }
      ],
      "default": "none"
    },
    {
      "type": "text",
      "id": "header_icon_name",
      "label": "Material icon name",
      "info": "e.g. 'star', 'favorite', 'arrow_forward'. Browse at fonts.google.com/icons"
    },
    {
      "type": "select",
      "id": "header_icon_style",
      "label": "Material icon style",
      "options": [
        { "value": "material-symbols-outlined", "label": "Outlined" },
        { "value": "material-symbols-rounded", "label": "Rounded" }
      ],
      "default": "material-symbols-outlined"
    },
    {
      "type": "image_picker",
      "id": "header_icon_image",
      "label": "Icon image"
    },
    {
      "type": "color",
      "id": "heading_icon_color",
      "label": "Icon color",
      "default": "#000000"
    },
    {
      "type": "checkbox",
      "id": "use_material_icons",
      "label": "Load Material Symbols font",
      "default": false,
      "info": "Enable if using Material Symbol icons anywhere in this section"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "desktop_layout",
      "label": "Desktop layout",
      "options": [
        { "value": "row", "label": "Row (equal columns)" },
        { "value": "bento", "label": "Bento (first image larger)" }
      ],
      "default": "row"
    },
    {
      "type": "checkbox",
      "id": "bento_reverse",
      "label": "Bento reverse (large image on right)",
      "default": false,
      "info": "Only applies when Desktop layout is set to Bento"
    },
    {
      "type": "select",
      "id": "mobile_layout",
      "label": "Mobile layout",
      "options": [
        { "value": "stacked", "label": "Stacked (vertical)" },
        { "value": "slider", "label": "Horizontal slider" }
      ],
      "default": "slider"
    },
    {
      "type": "range",
      "id": "mobile_slide_width",
      "min": 50,
      "max": 100,
      "step": 5,
      "unit": "%",
      "label": "Mobile slide width",
      "default": 85,
      "info": "Only applies when Mobile layout is Horizontal slider"
    },
    {
      "type": "range",
      "id": "gap_desktop",
      "min": 0,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Gap between images (desktop)",
      "default": 0
    },
    {
      "type": "range",
      "id": "gap_mobile",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Gap between images (mobile)",
      "default": 0
    },
    {
      "type": "range",
      "id": "border_radius_desktop",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Image border radius (desktop)",
      "default": 0
    },
    {
      "type": "range",
      "id": "border_radius_mobile",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "label": "Image border radius (mobile)",
      "default": 0
    },
    {
      "type": "header",
      "content": "Button"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    },
    {
      "type": "checkbox",
      "id": "button_new_tab",
      "label": "Open in new tab",
      "default": false
    },
    {
      "type": "select",
      "id": "button_alignment",
      "label": "Button alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center"
    },
    {
      "type": "color",
      "id": "button_bg_color",
      "label": "Button background",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "button_bg_hover_color",
      "label": "Button hover background",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button text color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_text_hover_color",
      "label": "Button text hover 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": 12,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Button font size",
      "default": 14
    },
    {
      "type": "range",
      "id": "button_padding_vertical",
      "min": 6,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Button padding (top/bottom)",
      "default": 10
    },
    {
      "type": "range",
      "id": "button_padding_horizontal",
      "min": 12,
      "max": 80,
      "step": 2,
      "unit": "px",
      "label": "Button padding (left/right)",
      "default": 42
    },
    {
      "type": "text",
      "id": "button_icon_name",
      "label": "Button icon (Material Symbol name)",
      "info": "Optional. e.g. 'arrow_forward'. Leave blank for no icon."
    },
    {
      "type": "select",
      "id": "button_icon_style",
      "label": "Button icon style",
      "options": [
        { "value": "material-symbols-outlined", "label": "Outlined" },
        { "value": "material-symbols-rounded", "label": "Rounded" }
      ],
      "default": "material-symbols-outlined"
    },
    {
      "type": "header",
      "content": "Spacing"
    },
    {
      "type": "range",
      "id": "button_margin_top",
      "min": 0,
      "max": 80,
      "step": 4,
      "unit": "px",
      "label": "Button top spacing",
      "default": 28
    },
    {
  "type": "range",
  "id": "padding_top_mobile",
  "min": 0,
  "max": 120,
  "step": 4,
  "unit": "px",
  "label": "Padding top (mobile)",
  "default": 44
},
{
  "type": "range",
  "id": "padding_bottom_mobile",
  "min": 0,
  "max": 120,
  "step": 4,
  "unit": "px",
  "label": "Padding bottom (mobile)",
  "default": 0
},
{
  "type": "range",
  "id": "padding_top",
  "min": 0,
  "max": 120,
  "step": 4,
  "unit": "px",
  "label": "Padding top (desktop)",
  "default": 60
},
{
  "type": "range",
  "id": "padding_bottom",
  "min": 0,
  "max": 120,
  "step": 4,
  "unit": "px",
  "label": "Padding bottom (desktop)",
  "default": 60
}
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "image_alt",
          "label": "Image alt text"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link (optional)",
          "info": "Makes the entire image a clickable link."
        },
        {
          "type": "checkbox",
          "id": "link_new_tab",
          "label": "Open link in new tab",
          "default": false
        },
        {
          "type": "header",
          "content": "Aspect Ratio"
        },
        {
          "type": "select",
          "id": "aspect_ratio_mobile",
          "label": "Aspect ratio (mobile)",
          "options": [
            { "value": "1:1", "label": "Square (1:1)" },
            { "value": "4:3", "label": "Landscape (4:3)" },
            { "value": "3:4", "label": "Portrait (3:4)" },
            { "value": "16:9", "label": "Widescreen (16:9)" },
            { "value": "9:16", "label": "Vertical (9:16)" },
            { "value": "3:2", "label": "Photo (3:2)" },
            { "value": "2:3", "label": "Tall Photo (2:3)" }
          ],
          "default": "1:1"
        },
        {
          "type": "select",
          "id": "aspect_ratio_desktop",
          "label": "Aspect ratio (desktop)",
          "options": [
            { "value": "1:1", "label": "Square (1:1)" },
            { "value": "4:3", "label": "Landscape (4:3)" },
            { "value": "3:4", "label": "Portrait (3:4)" },
            { "value": "16:9", "label": "Widescreen (16:9)" },
            { "value": "9:16", "label": "Vertical (9:16)" },
            { "value": "3:2", "label": "Photo (3:2)" },
            { "value": "2:3", "label": "Tall Photo (2:3)" }
          ],
          "default": "1:1"
        },
        {
          "type": "header",
          "content": "Fade Mask"
        },
        {
          "type": "checkbox",
          "id": "fade_enabled",
          "label": "Enable fade mask",
          "default": true
        },
        {
          "type": "select",
          "id": "fade_direction",
          "label": "Fade direction",
          "options": [
            { "value": "bottom", "label": "Bottom (fade up)" },
            { "value": "top", "label": "Top (fade down)" }
          ],
          "default": "bottom"
        },
        {
          "type": "color",
          "id": "fade_color",
          "label": "Fade color",
          "default": "#000000",
          "info": "Should match the background behind the image for a seamless fade."
        },
        {
          "type": "range",
          "id": "fade_height",
          "min": 20,
          "max": 300,
          "step": 10,
          "unit": "px",
          "label": "Fade height",
          "default": 80
        },
        {
          "type": "header",
          "content": "Text Overlay"
        },
        {
          "type": "select",
          "id": "overlay_position",
          "label": "Overlay position",
          "options": [
            { "value": "top-left", "label": "Top left" },
            { "value": "top-center", "label": "Top center" },
            { "value": "top-right", "label": "Top right" },
            { "value": "center-left", "label": "Center left" },
            { "value": "center", "label": "Center" },
            { "value": "center-right", "label": "Center right" },
            { "value": "bottom-left", "label": "Bottom left" },
            { "value": "bottom-center", "label": "Bottom center" },
            { "value": "bottom-right", "label": "Bottom right" }
          ],
          "default": "bottom-left"
        },
        {
          "type": "text",
          "id": "overlay_highlight",
          "label": "Highlighted prefix text",
          "info": "Displayed before the heading in a highlight color."
        },
        {
          "type": "color",
          "id": "overlay_highlight_color",
          "label": "Highlight color",
          "default": "#ffcc00"
        },
        {
          "type": "text",
          "id": "overlay_heading",
          "label": "Overlay heading",
          "default": "@AscendifyTheme"
        },
        {
          "type": "textarea",
          "id": "overlay_text",
          "label": "Overlay text",
          "default": "The Best Shopify Theme Ever"
        },
        {
          "type": "color",
          "id": "overlay_heading_color",
          "label": "Heading color",
          "default": "#ffffff"
        },
        {
          "type": "range",
          "id": "overlay_heading_size_mobile",
          "min": 12,
          "max": 48,
          "step": 1,
          "unit": "px",
          "label": "Heading size (mobile)",
          "default": 18
        },
        {
          "type": "range",
          "id": "overlay_heading_size_desktop",
          "min": 14,
          "max": 64,
          "step": 1,
          "unit": "px",
          "label": "Heading size (desktop)",
          "default": 24
        },
        {
          "type": "select",
          "id": "overlay_heading_weight",
          "label": "Heading weight",
          "options": [
            { "value": "400", "label": "Normal (400)" },
            { "value": "500", "label": "Medium (500)" },
            { "value": "600", "label": "Semi Bold (600)" },
            { "value": "700", "label": "Bold (700)" }
          ],
          "default": "600"
        },
        {
          "type": "color",
          "id": "overlay_text_color",
          "label": "Body text color",
          "default": "#ffffff"
        },
        {
          "type": "range",
          "id": "overlay_text_size_mobile",
          "min": 10,
          "max": 24,
          "step": 1,
          "unit": "px",
          "label": "Body text size (mobile)",
          "default": 12
        },
        {
          "type": "range",
          "id": "overlay_text_size_desktop",
          "min": 12,
          "max": 28,
          "step": 1,
          "unit": "px",
          "label": "Body text size (desktop)",
          "default": 14
        },
        {
          "type": "select",
          "id": "overlay_text_weight",
          "label": "Body text weight",
          "options": [
            { "value": "300", "label": "Light (300)" },
            { "value": "400", "label": "Normal (400)" },
            { "value": "500", "label": "Medium (500)" },
            { "value": "600", "label": "Semi Bold (600)" }
          ],
          "default": "400"
        },
        {
          "type": "header",
          "content": "Overlay Icon"
        },
        {
          "type": "select",
          "id": "overlay_icon_type",
          "label": "Icon type",
          "options": [
            { "value": "none", "label": "None" },
            { "value": "material", "label": "Material Symbol" }
          ],
          "default": "none"
        },
        {
          "type": "text",
          "id": "overlay_icon_name",
          "label": "Material icon name",
          "info": "e.g. 'star', 'check_circle'. Browse at fonts.google.com/icons"
        },
        {
          "type": "select",
          "id": "overlay_icon_style",
          "label": "Icon style",
          "options": [
            { "value": "material-symbols-outlined", "label": "Outlined" },
            { "value": "material-symbols-rounded", "label": "Rounded" }
          ],
          "default": "material-symbols-outlined"
        },
        {
          "type": "checkbox",
          "id": "overlay_icon_filled",
          "label": "Filled icon",
          "default": false
        },
        {
          "type": "color",
          "id": "overlay_icon_color",
          "label": "Icon color",
          "default": "#ffffff"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image stack",
      "category": "Features",
      "blocks": [
        { "type": "image" },
        { "type": "image" },
        { "type": "image" }
      ]
    }
  ]
}
{% endschema %}