{% comment %} Load Google Fonts only when valid & required {% endcomment %}
{% if section.settings.italic_font_family == 'georgia-pro'
  or section.settings.italic_font_family == 'bodoni-moda'
  or section.settings.italic_font_family == 'instrument-serif'
  or section.settings.italic_font_family == 'custom_google_font'
%}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  {% if section.settings.italic_font_family == 'georgia-pro' %}
    <link
      href="https://fonts.googleapis.com/css2?family=Georgia+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap"
      rel="stylesheet"
    >
  {% endif %}
  {% if section.settings.italic_font_family == 'bodoni-moda' %}
    <link
      href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700&display=swap"
      rel="stylesheet"
    >
  {% endif %}
  {% if section.settings.italic_font_family == 'instrument-serif' %}
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
  {% endif %}
  {% if section.settings.italic_font_family == 'custom_google_font'
    and section.settings.custom_google_font_name != blank
  %}
    <link
      href="https://fonts.googleapis.com/css2?family={{ section.settings.custom_google_font_name | replace: ' ', '+' }}:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet"
    >
  {% endif %}
{% endif %}

{%- style -%}
  .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;
  }

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

  #steps-multicolumn-{{ section.id }} {
    --text-boxes-radius: {{ section.settings.cards_corner_radius }}px;
    --step-number-size: {{ section.settings.number_size_desktop }}px;
    --step-number-size-mobile: {{ section.settings.number_size_mobile }}px;
    --step-number-circle-size: {{ section.settings.number_circle_size_desktop }}px;
    --step-number-circle-size-mobile: {{ section.settings.number_circle_size_mobile }}px;
  }

  /* Heading alignment — map flex-start/center/flex-end to valid text-align values
     base.css hardcodes text-align:center on .title-wrapper-with-link so we need !important */
  {%- liquid
    assign text_align = 'center'
    if section.settings.heading_alignment == 'flex-start'
      assign text_align = 'left'
    elsif section.settings.heading_alignment == 'flex-end'
      assign text_align = 'right'
    endif
  -%}
  #steps-multicolumn-{{ section.id }} .title-wrapper-with-link {
    justify-content: {{ section.settings.heading_alignment }} !important;
    text-align: {{ text_align }} !important;
    display: block !important;
  }
  #steps-multicolumn-{{ section.id }} .title {
    text-align: {{ text_align }} !important;
  }
  #steps-multicolumn-{{ section.id }} .steps-subtitle {
    text-align: {{ text_align }} !important;
    {% if text_align == 'center' %}
      margin-left: auto !important;
      margin-right: auto !important;
    {% elsif text_align == 'right' %}
      margin-left: auto !important;
      margin-right: 0 !important;
    {% else %}
      margin-left: 0 !important;
      margin-right: auto !important;
    {% endif %}
  }

  #steps-multicolumn-{{ section.id }} .steps-card h3 {
    font-size: {{ section.settings.desktop_heading_size }}px;
  }
  #steps-multicolumn-{{ section.id }} .steps-card .rte {
    font-size: {{ section.settings.desktop_text_size }}px;
  }
  #steps-multicolumn-{{ section.id }} .steps-card h3 + .rte {
    margin-top: {{ section.settings.desktop_text_top_margin }}px;
  }
  #steps-multicolumn-{{ section.id }} .steps-card__info {
    padding: {{ section.settings.desktop_container_padding_y }}px {{ section.settings.desktop_container_padding_x }}px;
  }

  #steps-multicolumn-{{ section.id }} .steps-subtitle {
    font-size: {{ section.settings.subtitle_desktop_size }}px !important;
  }

  @media screen and (max-width: 749px) {
    #steps-multicolumn-{{ section.id }} .steps-card h3 {
      font-size: {{ section.settings.mobile_heading_size }}px;
    }
    #steps-multicolumn-{{ section.id }} .steps-card .rte {
      font-size: {{ section.settings.mobile_text_size }}px;
    }
    #steps-multicolumn-{{ section.id }} .steps-card h3 + .rte {
      margin-top: {{ section.settings.mobile_text_top_margin }}px;
    }
    #steps-multicolumn-{{ section.id }} .steps-card__info {
      padding: {{ section.settings.mobile_container_padding_y }}px {{ section.settings.mobile_container_padding_x }}px;
    }
    #steps-multicolumn-{{ section.id }} .steps-subtitle {
      font-size: {{ section.settings.subtitle_mobile_size }}px !important;
    }
  }

  .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 }};
  }

  .cards-color-scheme-{{ section.id }}.color-custom {
    --color-background: {{ section.settings.custom_cards_colors_background.red }}, {{ section.settings.custom_cards_colors_background.green }}, {{ section.settings.custom_cards_colors_background.blue }};
    --gradient-background: {% if section.settings.custom_cards_gradient_background != blank %}{{ section.settings.custom_cards_gradient_background }}{% else %}{{ section.settings.custom_cards_colors_background }}{% endif %};
    --color-foreground: {{ section.settings.custom_cards_colors_text.red }}, {{ section.settings.custom_cards_colors_text.green }}, {{ section.settings.custom_cards_colors_text.blue }};
  }
  .cards-color-scheme-{{ section.id }}.color-custom h3 {
    --color-foreground: {{ section.settings.custom_cards_colors_heading.red }}, {{ section.settings.custom_cards_colors_heading.green }}, {{ section.settings.custom_cards_colors_heading.blue }};
  }

  /* Heading italic styling */
  .steps-heading-{{ section.id }} em {
    {% if section.settings.italic_style == 'italic' %}
      text-decoration: none !important;
      font-style: italic !important;
    {% elsif section.settings.italic_style == 'font_family' and section.settings.italic_font_family != 'inherit' %}
      text-decoration: none !important;
      font-style: italic !important;
      {% if section.settings.italic_font_family == 'serif' %}
        font-family: serif !important;
      {% elsif section.settings.italic_font_family == 'georgia-pro' %}
        font-family: 'Georgia Pro', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'bodoni-moda' %}
        font-family: 'Bodoni Moda', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'instrument-serif' %}
        font-family: 'Instrument Serif', Georgia, serif !important;
      {% elsif section.settings.italic_font_family == 'custom_google_font' and section.settings.custom_google_font_name != blank %}
        font-family: '{{ section.settings.custom_google_font_name }}', sans-serif !important;
      {% elsif section.settings.italic_font_family == 'cursive' %}
        font-family: cursive !important;
      {% endif %}
      {% if section.settings.italic_font_weight != 'inherit' %}
        font-weight: {{ section.settings.italic_font_weight }} !important;
      {% endif %}
    {% else %}
      text-decoration: underline !important;
      font-style: normal !important;
      text-decoration-color: {{ section.settings.underlinetextcolor }} !important;
      text-decoration-thickness: {{ section.settings.underlinethickness }}px !important;
    {% endif %}
  }

  {% if section.settings.enable_gradient %}
    .steps-heading-{{ section.id }} strong {
      background: {{ section.settings.title_gradient_background }};
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-style: normal;
    }
  {% endif %}

  .steps-heading-{{ section.id }} strong {
    color: {{ section.settings.title_highlight_color }};
    font-weight: var(--font-heading-weight);
  }

  /* Step number styling */
  #steps-multicolumn-{{ section.id }} .steps-number-icon {
    width: var(--step-number-circle-size);
    height: var(--step-number-circle-size);
    border-radius: {{ section.settings.number_border_radius }}px;
    border: {{ section.settings.number_border_width }}px {{ section.settings.number_border_style }} {{ section.settings.number_border_color }};
    background-color: {{ section.settings.number_background_color }};
    color: {{ section.settings.label_color }};
    font-weight: {{ section.settings.number_font_weight }};
    font-size: var(--step-number-size);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 12px;
  }

  @media screen and (max-width: 749px) {
    #steps-multicolumn-{{ section.id }} .steps-number-icon {
      width: var(--step-number-circle-size-mobile);
      height: var(--step-number-circle-size-mobile);
      font-size: var(--step-number-size-mobile);
      margin-right: 8px;
    }
  }

  {% unless section.settings.show_step_numbers %}
    #steps-multicolumn-{{ section.id }} .steps-number-icon {
      display: none;
    }
  {% endunless %}

  {% unless section.settings.show_step_images %}
    #steps-multicolumn-{{ section.id }} .steps-card__image-wrapper {
      display: none !important;
    }
  {% endunless %}
{%- endstyle -%}

<style>
    /* ── Steps card: structural CSS mirroring multicolumn-card from base.css ── */

    /* Image wrapper widths — identical to multicolumn-card__image-wrapper--*-width */
    .steps-card__image-wrapper--third-width {
      width: 33%;
    }
    .steps-card__image-wrapper--half-width {
      width: 50%;
    }

    /* Card base — mirrors multicolumn-card */
    .steps-card {
      max-width: 72rem;
      position: relative;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }
    .steps-card--media-bottom {
      flex-direction: column-reverse;
    }
    .splide--align-stretch .splide__slide__container,
    .splide--align-stretch .steps-card {
      height: 100%;
    }
    .splide--align-stretch .steps-card__info {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      justify-content: var(--stretched-cards-alignment);
    }
    /* Centre non-full-width wrappers when card alignment is center */
    .steps-card,
    .steps-card.center .steps-card__image-wrapper:not(.steps-card__image-wrapper--full-width) {
      margin-left: auto;
      margin-right: auto;
    }
    .steps-card.color-bg-overlay {
      background: rgb(var(--color-background))
        linear-gradient(
          rgba(var(--color-foreground), 0.04),
          rgba(var(--color-foreground), 0.04)
        );
    }
    .steps-card h3 {
      line-height: calc(1 + 0.5 / max(1, var(--font-heading-scale)));
      margin: 0;
    }
    .steps-card p { margin: 0; }

    /* Card spacing for non-full-width / circle images — mirrors multicolumn-card-spacing */
    .steps-card-spacing {
      padding-top: 2.5rem;
      margin-left: 2.5rem;
      margin-right: 2.5rem;
    }
    .steps-card__info > :nth-child(2) {
      margin-top: 1rem;
    }

    /*
      media--adapt override:
      base.css sets `.media > :not(.zoom)` to position:absolute, which collapses
      an adapt container (no padding-bottom) to 0 height.
      This override puts the img back into normal flow so it sets its own height.
      Matches: .multicolumn-card .media--adapt .multicolumn-card__image { width: auto; }
    */
    .steps-card .media--adapt {
      /* no padding-bottom — height comes from the image itself */
      background-color: transparent;
    }
    .steps-card .media--adapt > img {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      width: 100% !important;
      height: auto !important;
      object-fit: contain;
      display: block;
    }

    /* Same-bg / diff-bg spacing — mirrors multicolumn--same-bgs */
    .steps-multicolumn--same-bgs .steps-card-spacing {
      padding: 0;
      margin: 0;
    }
    .steps-card__info {
      padding: 2.5rem;
    }
    .steps-multicolumn--same-bgs .steps-card__info {
      padding-top: 0;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
    .is-active .steps-multicolumn--same-bgs .steps-card__info {
      padding-bottom: 0;
    }
    .steps-multicolumn--same-bgs .steps-card__image-wrapper + .steps-card__info {
      padding-top: 2.5rem;
    }
    .steps-multicolumn--same-bgs .steps-card__image-wrapper .media {
      border-radius: calc(var(--text-boxes-radius) - var(--text-boxes-border-width));
      overflow: hidden;
    }
    @media screen and (min-width: 750px) {
      .steps-multicolumn--same-bgs .steps-card__image-wrapper {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
      }
      .steps-multicolumn .steps-multicolumn--same-bgs .steps-card__info,
      .splide:not(.is-active) .steps-multicolumn--same-bgs.center .steps-card__info {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
      }
    }

    /* Border radius on full-width image wrappers */
    .steps-card:not(.steps-card--media-bottom)
      > .steps-card__image-wrapper--full-width:not(.steps-card-spacing) {
      border-top-left-radius: calc(var(--text-boxes-radius) - var(--text-boxes-border-width));
      border-top-right-radius: calc(var(--text-boxes-radius) - var(--text-boxes-border-width));
      overflow: hidden;
    }
    .steps-card--media-bottom
      > .steps-card__image-wrapper--full-width:not(.steps-card-spacing) {
      border-bottom-left-radius: calc(var(--text-boxes-radius) - var(--text-boxes-border-width));
      border-bottom-right-radius: calc(var(--text-boxes-radius) - var(--text-boxes-border-width));
      overflow: hidden;
    }
    .steps-multicolumn--same-bgs.steps-card {
      border-radius: 0;
    }

    /* Steps-specific: title row with number badge */
    .steps-title-container {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }
    .steps-title-container h3 {
      margin: 0;
      flex: 1;
    }
    .steps-number-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      text-align: center;
      line-height: 1;
    }

    /* Section heading & subtitle */
    .steps-multicolumn .title-wrapper-with-link {
      margin-top: 0;
    }
    .steps-multicolumn .steps-subtitle {
      max-width: 800px;
      font-size: 1.4rem;
      line-height: 1.5;
      display: block;
      margin-top: 1rem;
      margin-bottom: 2rem;
    }
    @media screen and (max-width: 749px) {
      .steps-multicolumn .title-wrapper-with-link {
        margin-bottom: 3rem;
      }
      .steps-multicolumn .steps-subtitle {
        font-size: 1.125rem;
        margin-bottom: 1.5rem;
        padding: 0 1rem;
      }
    }

    /* Button spacing */
    .steps-multicolumn .button { margin-top: 1.5rem; }
    @media screen and (min-width: 750px) {
      .steps-multicolumn .button { margin-top: 4rem; }
    }

    /* Accessibility */
    .steps-card:focus-within {
      outline: 2px solid rgb(var(--color-button));
      outline-offset: 2px;
    }

    /* Print */
    @media print {
      .steps-multicolumn .splide__arrows,
      .steps-multicolumn .splide__pagination { display: none !important; }
    }
    /* ── Horizontal card layout — mobile only ── */
  @media screen and (max-width: 749px) {
  #steps-multicolumn-{{ section.id }}.steps--layout-horizontal .steps-card h3 {
      font-size: {{ section.settings.horizontal_heading_size }}px !important;
    }

    #steps-multicolumn-{{ section.id }}.steps--layout-horizontal .steps-card {
      flex-direction: row !important;
      align-items: stretch;
    }
    #steps-multicolumn-{{ section.id }}.steps--layout-horizontal.steps--image-right .steps-card {
      flex-direction: row-reverse !important;
    }
    #steps-multicolumn-{{ section.id }}.steps--layout-horizontal .steps-card__image-wrapper {
      width: {{ section.settings.horizontal_image_width }}% !important;
      min-width: {{ section.settings.horizontal_image_width }}% !important;
      flex-shrink: 0;
      margin: 0 !important;
      padding: 0 !important;
      border-radius: 0 !important;
    }
    #steps-multicolumn-{{ section.id }}.steps--layout-horizontal .steps-card__image-wrapper .media {
      height: 100% !important;
      padding-bottom: 0 !important;
    }
    #steps-multicolumn-{{ section.id }}.steps--layout-horizontal .steps-card__image-wrapper .media img,
    #steps-multicolumn-{{ section.id }}.steps--layout-horizontal .steps-card__image-wrapper .media > img {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
    }
    #steps-multicolumn-{{ section.id }}.steps--layout-horizontal .steps-card .media--adapt {
      padding-bottom: 100% !important;
    }
    #steps-multicolumn-{{ section.id }}.steps--layout-horizontal .steps-card__info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    #steps-multicolumn-{{ section.id }}.steps--layout-horizontal:not(.steps--image-right) .steps-card__image-wrapper {
      border-top-left-radius: var(--text-boxes-radius) !important;
      border-bottom-left-radius: var(--text-boxes-radius) !important;
      overflow: hidden;
    }
    #steps-multicolumn-{{ section.id }}.steps--layout-horizontal.steps--image-right .steps-card__image-wrapper {
      border-top-right-radius: var(--text-boxes-radius) !important;
      border-bottom-right-radius: var(--text-boxes-radius) !important;
      overflow: hidden;
    }
    /* Single-column stacking for the non-slider grid */
    #steps-multicolumn-{{ section.id }}.steps--layout-horizontal .splide:not(.is-active) .splide__list {
      display: flex !important;
      flex-direction: column !important;
      gap: {{ section.settings.mobile_spacing | divided_by: 10.0 }}rem;
    }
    #steps-multicolumn-{{ section.id }}.steps--layout-horizontal .splide:not(.is-active) .splide__slide {
      width: 100% !important;
    }
  }
</style>

<div
  id="steps-multicolumn-{{ section.id }}"
  class="steps-multicolumn animate-section animate--hidden color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient{% if section.settings.title == blank %} no-heading{% endif %} content-for-grouping {{ section.settings.visibility }}{% if section.settings.card_layout == 'horizontal' %} steps--layout-horizontal{% if section.settings.horizontal_image_side == 'right' %} steps--image-right{% endif %}{% endif %}"
  data-mobile-columns="{{ section.settings.columns_mobile }}"
>
  {% 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 %}

  {%- liquid
    assign has_mobile_slider = false
    assign has_desktop_slider = false
    if section.settings.slider_mobile and section.settings.card_layout != 'horizontal'
      assign has_mobile_slider = true
      if section.settings.mobile_dots_position == 'under' or section.settings.mobile_arrows_position == 'under'
        assign has_mobile_controls = true
      endif
    endif
    if section.settings.slider_desktop
      assign has_desktop_slider = true
      if section.settings.desktop_dots_position == 'under' or section.settings.desktop_arrows_position == 'under'
        assign has_desktop_controls = true
      endif
    endif

    assign bg_diff_class = ' steps-multicolumn--same-bgs'
    unless section.settings.color_scheme == section.settings.cards_color_scheme
      assign bg_diff_class = ' steps-multicolumn--diff-bgs'
    endunless
    if section.settings.color_scheme == 'custom' and section.settings.cards_color_scheme == 'custom'
      unless section.settings.custom_colors_background == section.settings.custom_cards_colors_background
        assign bg_diff_class = ' steps-multicolumn--diff-bgs'
      endunless
    endif
  -%}

  <div
    class="page-width{% if section.settings.desktop_full_page %} desktop-full-page{% endif %}{% if has_mobile_slider %} mobile-full-page{% endif %} section-{{ section.id }}-padding isolate"
    style="--columns-desktop:{{ section.settings.columns_desktop }};--columns-mobile:{{ section.settings.columns_mobile }};--gap-desktop:{{ section.settings.desktop_spacing }}px;--gap-mobile:{{ section.settings.mobile_spacing }}px;--grid-desktop-horizontal-spacing:{{ section.settings.desktop_spacing }}px;--grid-desktop-vertical-spacing:{{ section.settings.desktop_spacing }}px;--grid-mobile-horizontal-spacing:{{ section.settings.mobile_spacing }}px;--grid-mobile-vertical-spacing:{{ section.settings.mobile_spacing }}px;--stretched-cards-alignment:{{ section.settings.stretched_cards_content_alignment }};"
  >
    {% assign content_index = 0 %}

    {%- unless section.settings.title == blank -%}
      {% assign content_index = 1 %}
      <div class="title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin animate-item animate-item--child index-0">
        <h2
          class="title {{ section.settings.heading_size }} title-with-highlight steps-heading-{{ section.id }}"
          style="--hightlight-color:{{ section.settings.title_highlight_color }};--gradient-text: {{ section.settings.title_gradient_background }};"
        >
          {{ section.settings.title }}
        </h2>
        {%- if section.settings.subtitle != blank -%}
          <p class="steps-subtitle">{{ section.settings.subtitle }}</p>
        {%- endif -%}
        {%- if section.settings.button_label != blank -%}
          <a
            href="{{ section.settings.button_link }}"
            class="link underlined-link{% unless has_mobile_controls %} mobile-hidden{% endunless %}{% unless has_desktop_controls %} desktop-hidden{% endunless %}"
          >
            {{- section.settings.button_label | escape -}}
          </a>
        {%- endif -%}
      </div>
    {%- endunless -%}

    {% if has_mobile_slider or has_desktop_slider %}
      <splide-component
        data-type="{{ section.settings.type }}"
        data-autoplay="{{ section.settings.autoplay }}"
        data-autoplay-speed="{{ section.settings.autoplay_speed }}"
        data-arrows-color="{{ section.settings.arrows_color_scheme }}"
        data-dots-color="{{ section.settings.dots_color_scheme }}"
        data-slides-desktop="{{ section.settings.columns_desktop }}"
        data-per-move-desktop="{{ section.settings.per_move_desktop }}"
        data-gap-desktop="{{ section.settings.desktop_spacing }}"
        data-side-padding-desktop="{{ section.settings.desktop_side_padding }}"
        data-padding-calc-desktop="{{ section.settings.desktop_padding_calc }}"
        data-slides-mobile="{{ section.settings.columns_mobile }}"
        data-gap-mobile="{{ section.settings.mobile_spacing }}"
        data-vertical-alignment="{{ section.settings.vertical_alignment }}"
        {% if section.settings.enable_mobile_preview %}
          data-side-padding-mobile="24"
        {% else %}
          data-side-padding-mobile="15"
        {% endif %}
        {% if has_desktop_slider == false %}
          data-destroy-desktop="true"
        {% elsif has_mobile_slider == false %}
          data-destroy-mobile="true"
        {% endif %}
        data-pause-videos="true"
      >
    {% endif %}

    <div
      class="
        splide
        splide--desktop-dots-{{ section.settings.desktop_dots_position }}
        splide--mobile-dots-{{ section.settings.mobile_dots_position }}
        splide--desktop-arrows-{{ section.settings.desktop_arrows_position }}
        splide--desktop-arrows-outside
        splide--mobile-arrows-{{ section.settings.mobile_arrows_position }}
        {% if section.settings.transparent_arrows %} splide--transparent-arrows{% endif %}
        {% if section.settings.vertical_alignment == 'center' %} splide--vertically-centered{% endif %}
        {% if has_desktop_slider == false %} splide--destroy-desktop{% endif %}
        {% if has_mobile_slider == false %} splide--destroy-mobile{% endif %}
        {% if section.settings.stretch_cards %} splide--align-stretch{% endif %}
      "
      style=""
      {% if section.settings.desktop_adaptive_height and section.settings.columns_desktop == 1 and has_desktop_slider %}
        data-desktop-adaptive-height="true"
      {% endif %}
      {% if section.settings.mobile_adaptive_height and has_mobile_slider %}
        data-mobile-adaptive-height="true"
      {% endif %}
    >
      <div class="splide__track">
        <ul class="splide__list">
          {%- for block in section.blocks -%}
            {%- assign empty_content = '' -%}
            {%- if block.settings.step_title == blank and block.settings.step_description == blank -%}
              {%- assign empty_content = ' hidden' -%}
            {%- endif -%}
            {%- liquid
              assign spaced_image = false
              if section.settings.image_ratio == 'circle'
                assign spaced_image = true
              endif
            -%}
            <li class="splide__slide">
              <div
                class="splide__slide__container splide__slide__container--card"
                style="--index:{{ forloop.index0 | plus: content_index }};"
                {{ block.shopify_attributes }}
              >
                <div
                  class="steps-card steps-card--media-{{ section.settings.media_position }} content-container color-{{ section.settings.cards_color_scheme }} cards-color-scheme-{{ section.id }} gradient{{ bg_diff_class }} {{ section.settings.column_alignment }} animate-item animate-item--child"
                  style="border-radius: var(--text-boxes-radius) !important;"
                >
                  {%- if section.settings.show_step_images and block.settings.step_image != blank -%}
                    <div class="steps-card__image-wrapper steps-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} steps-card-spacing{% endif %}">
                      <div
                        class="media media--transparent media--{{ section.settings.image_ratio }}"
                        style="background-color: {{ block.settings.image_background_color }};"
                      >
                        {%- capture sizes -%}
                          (min-width: 990px) {% if section.blocks.size <= 2 %}710px{% else %}550px{% endif %}, (min-width: 750px) {% if section.blocks.size == 1 %}710px{% else %}550px{% endif %}, calc(100vw - 30px)
                        {%- endcapture -%}
                        {{
                          block.settings.step_image
                          | image_url: width: 1420
                          | image_tag:
                            loading: 'lazy',
                            sizes: sizes,
                            widths: '275, 550, 710, 1420',
                            alt: block.settings.step_title
                        }}
                      </div>
                    </div>
                  {%- endif -%}

                  <div class="steps-card__info{{ empty_content }}">
                    {%- if block.settings.step_title != blank -%}
                      <div class="steps-title-container">
                        {% if section.settings.show_step_numbers %}
                          <div class="steps-number-icon" aria-hidden="true">{{ forloop.index }}</div>
                        {% endif %}
                        <h3>{{ block.settings.step_title }}</h3>
                      </div>
                    {%- endif -%}
                    {%- if block.settings.step_description != blank -%}
                      <div class="rte">{{ block.settings.step_description }}</div>
                    {%- endif -%}
                  </div>
                </div>
              </div>
            </li>
          {%- endfor -%}
        </ul>
      </div>
      <div class="splide__dots-and-arrows">
        <ul class="splide__pagination"></ul>
        <div class="splide__arrows"></div>
      </div>
    </div>

    {% if has_mobile_slider or has_desktop_slider %}
      </splide-component>
    {% endif %}

    <div class="center{% if has_mobile_controls %} mobile-hidden{% endif %}{% if has_desktop_controls %} desktop-hidden{% endif %} animate-item animate-item--child index-{{ content_index | plus: 1 }}">
      {%- if section.settings.button_label != blank -%}
        <a
          class="button button--primary"
          {% if section.settings.button_link == blank %}
            role="link" aria-disabled="true"
          {% else %}
            href="{{ section.settings.button_link }}"
          {% endif %}
        >
          {{ section.settings.button_label | escape }}
        </a>
      {%- endif -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Step results",
  "class": "section",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID is used in the Sections group section to merge 2 sections. ID can also be put inside any button link and the button will scroll to this section.",
      "default": false
    },
    {
      "type": "select",
      "id": "visibility",
      "options": [
        { "value": "desktop-hidden", "label": "Mobile only" },
        { "value": "mobile-hidden", "label": "Desktop only" },
        { "value": "always-display", "label": "All devices" }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "General"
    },
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "How It Works",
      "label": "Heading",
      "info": "Bold certain words to highlight them with a different color."
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        { "value": "h2", "label": "Small" },
        { "value": "h1", "label": "Medium" },
        { "value": "h0", "label": "Large" }
      ],
      "default": "h1",
      "label": "Heading size"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "Heading alignment",
      "options": [
        { "value": "flex-start", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "flex-end", "label": "Right" }
      ],
      "default": "center"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Heading highlight color",
      "default": "#6D388B"
    },
    {
      "type": "checkbox",
      "id": "enable_gradient",
      "label": "Enable gradient for bold text",
      "default": false,
      "info": "Override solid color with gradient for bold text"
    },
    {
      "type": "color_background",
      "id": "title_gradient_background",
      "label": "Gradient highlight",
      "default": "linear-gradient(45deg, #5d5aaf 0%, #ff6b9d 100%)",
      "info": "Used when gradient is enabled"
    },
    {
      "type": "header",
      "content": "Italic Text Styling",
      "info": "Choose how italic text (created with *text*) should be displayed"
    },
    {
      "type": "select",
      "id": "italic_style",
      "label": "Italic Text Style",
      "options": [
        { "value": "italic", "label": "Normal Italic" },
        { "value": "underline", "label": "Underline" },
        { "value": "font_family", "label": "Custom Font Family" }
      ],
      "default": "underline",
      "info": "Choose to either underline italic text or use a custom font family"
    },
    {
      "type": "color",
      "id": "underlinetextcolor",
      "label": "Underline color",
      "default": "#FF0000",
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "range",
      "id": "underlinethickness",
      "min": 1,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Underline thickness",
      "default": 3,
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "select",
      "id": "italic_font_family",
      "label": "Italic Text Font Family",
      "options": [
        { "value": "inherit", "label": "Default (Inherit)" },
        { "value": "serif", "label": "Serif" },
        { "value": "instrument-serif", "label": "Instrument Serif" },
        { "value": "georgia-pro", "label": "Georgia Pro" },
        { "value": "bodoni-moda", "label": "Bodoni Moda" },
        { "value": "cursive", "label": "Cursive" },
        { "value": "custom_google_font", "label": "Custom Google Font" }
      ],
      "default": "serif",
      "info": "Used when 'Custom Font Family' style is selected"
    },
    {
      "type": "text",
      "id": "custom_google_font_name",
      "label": "Custom Google Font Name",
      "info": "Enter the exact Google Font family name (e.g., 'Roboto', 'Open Sans', 'Playfair Display'). Browse fonts at https://fonts.google.com/"
    },
    {
      "type": "select",
      "id": "italic_font_weight",
      "label": "Italic Text Font Weight",
      "options": [
        { "value": "inherit", "label": "Default (Inherit)" },
        { "value": "300", "label": "Light (300)" },
        { "value": "400", "label": "Normal (400)" },
        { "value": "500", "label": "Medium (500)" },
        { "value": "600", "label": "Semi Bold (600)" },
        { "value": "700", "label": "Bold (700)" },
        { "value": "800", "label": "Extra Bold (800)" },
        { "value": "900", "label": "Black (900)" }
      ],
      "default": "inherit",
      "info": "Used when 'Custom Font Family' style is selected"
    },
    {
      "type": "textarea",
      "id": "subtitle",
      "label": "Subtitle",
      "default": "Follow these simple steps to get started"
    },

    {
      "type": "range",
      "id": "subtitle_desktop_size",
      "min": 12,
      "max": 18,
      "step": 1,
      "unit": "px",
      "label": "Subtitle font size (desktop)",
      "default": 15
    },
    {
      "type": "range",
      "id": "subtitle_mobile_size",
      "min": 10,
      "max": 17,
      "step": 1,
      "unit": "px",
      "label": "Subtitle font size (mobile)",
      "default": 14
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    },
    {
      "type": "header",
      "content": "Color scheme"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        { "value": "accent-1", "label": "Accent 1" },
        { "value": "accent-2", "label": "Accent 2" },
        { "value": "background-1", "label": "Background 1" },
        { "value": "background-2", "label": "Background 2" },
        { "value": "inverse", "label": "Inverse" },
        { "value": "custom", "label": "Custom" }
      ],
      "default": "background-1",
      "label": "Color scheme"
    },
    {
      "type": "header",
      "content": "Step Cards"
    },
    {
      "type": "select",
      "id": "cards_color_scheme",
      "options": [
        { "value": "bg-overlay", "label": "Light overlay" },
        { "value": "accent-1", "label": "Accent 1" },
        { "value": "accent-2", "label": "Accent 2" },
        { "value": "background-1", "label": "Background 1" },
        { "value": "background-2", "label": "Background 2" },
        { "value": "inverse", "label": "Inverse" },
        { "value": "custom", "label": "Custom" }
      ],
      "default": "bg-overlay",
      "label": "Cards color scheme"
    },
    {
      "type": "range",
      "id": "cards_corner_radius",
      "min": 0,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Corner radius",
      "default": 20
    },
    {
      "type": "select",
      "id": "card_layout",
      "label": "Card layout",
      "options": [
        { "value": "vertical", "label": "Vertical (image top)" },
        { "value": "horizontal", "label": "Horizontal (image side)" }
      ],
      "default": "vertical",
      "info": "Horizontal layout stacks cards in a single column with the image on the left or right. Mobile slider is automatically disabled in this mode."
    },
    {
      "type": "select",
      "id": "horizontal_image_side",
      "label": "Image side (horizontal layout)",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left",
      "visible_if": "{{ section.settings.card_layout == 'horizontal' }}"
    },
    {
      "type": "range",
      "id": "horizontal_heading_size",
      "label": "Heading size (horizontal mobile layout)",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "default": 15,
      "visible_if": "{{ section.settings.card_layout == 'horizontal' }}"
    },
    {
      "type": "range",
      "id": "horizontal_image_width",
      "label": "Image width % (horizontal layout)",
      "min": 20,
      "max": 60,
      "step": 5,
      "unit": "%",
      "default": 35,
      "visible_if": "{{ section.settings.card_layout == 'horizontal' }}"
    },
    {
      "type": "checkbox",
      "id": "stretch_cards",
      "default": true,
      "label": "Make all cards same height"
    },
    {
      "type": "select",
      "id": "stretched_cards_content_alignment",
      "label": "Vertical alignment of stretched cards",
      "options": [
        { "label": "Top", "value": "flex-start" },
        { "label": "Center", "value": "center" },
        { "label": "Bottom", "value": "flex-end" }
      ],
      "default": "center"
    },
    {
      "type": "header",
      "content": "Step Images"
    },
    {
      "type": "checkbox",
      "id": "show_step_images",
      "label": "Show Step Images",
      "default": true
    },
    {
      "type": "select",
      "id": "image_width",
      "options": [
        { "value": "third", "label": "One-third width of column" },
        { "value": "half", "label": "Half width of column" },
        { "value": "full", "label": "Full width of column" }
      ],
      "default": "full",
      "label": "Image width"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        { "value": "adapt", "label": "Adapt to image" },
        { "value": "portrait", "label": "Portrait" },
        { "value": "square", "label": "Square" },
        { "value": "circle", "label": "Circle" }
      ],
      "default": "adapt",
      "label": "Image ratio"
    },
    {
      "type": "select",
      "id": "media_position",
      "options": [
        { "value": "top", "label": "Top" },
        { "value": "bottom", "label": "Bottom" }
      ],
      "default": "top",
      "label": "Image position"
    },
    {
      "type": "header",
      "content": "Step Numbers"
    },
    {
      "type": "checkbox",
      "id": "show_step_numbers",
      "label": "Show Step Numbers",
      "default": true
    },
    {
      "type": "range",
      "id": "number_size_desktop",
      "min": 16,
      "max": 30,
      "step": 1,
      "unit": "px",
      "label": "Number Size (Desktop)",
      "default": 20
    },
    {
      "type": "range",
      "id": "number_size_mobile",
      "min": 14,
      "max": 28,
      "step": 1,
      "unit": "px",
      "label": "Number Size (Mobile)",
      "default": 24
    },
    {
      "type": "range",
      "id": "number_circle_size_desktop",
      "min": 30,
      "max": 70,
      "step": 5,
      "unit": "px",
      "label": "Number Circle Size (Desktop)",
      "default": 40
    },
    {
      "type": "range",
      "id": "number_circle_size_mobile",
      "min": 30,
      "max": 60,
      "step": 5,
      "unit": "px",
      "label": "Number Circle Size (Mobile)",
      "default": 40
    },
    {
      "type": "color",
      "id": "label_color",
      "label": "Number Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "number_border_color",
      "label": "Number Border Color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "number_border_width",
      "min": 0,
      "max": 5,
      "step": 1,
      "unit": "px",
      "label": "Number Border Width",
      "default": 2
    },
    {
      "type": "select",
      "id": "number_border_style",
      "label": "Number Border Style",
      "options": [
        { "value": "solid", "label": "Solid" },
        { "value": "dashed", "label": "Dashed" },
        { "value": "dotted", "label": "Dotted" },
        { "value": "none", "label": "None" }
      ],
      "default": "solid"
    },
    {
      "type": "color",
      "id": "number_background_color",
      "label": "Number Background Color",
      "default": "#FFFFFF"
    },
    {
      "type": "range",
      "id": "number_border_radius",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Number Border Radius",
      "default": 50
    },
    {
      "type": "select",
      "id": "number_font_weight",
      "label": "Number Font Weight",
      "options": [
        { "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": "600"
    },
    {
      "type": "header",
      "content": "Step Content"
    },
    {
      "type": "select",
      "id": "column_alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left",
      "label": "Card text alignment"
    },
    {
      "type": "range",
      "id": "desktop_heading_size",
      "min": 14,
      "max": 36,
      "step": 2,
      "unit": "px",
      "label": "Desktop headings size",
      "default": 18
    },
    {
      "type": "range",
      "id": "mobile_heading_size",
      "min": 12,
      "max": 32,
      "step": 1,
      "unit": "px",
      "label": "Mobile headings size",
      "default": 20
    },
    {
      "type": "range",
      "id": "desktop_text_size",
      "min": 12,
      "max": 24,
      "step": 1,
      "unit": "px",
      "label": "Desktop text size",
      "default": 12
    },
    {
      "type": "range",
      "id": "mobile_text_size",
      "min": 8,
      "max": 22,
      "step": 1,
      "unit": "px",
      "label": "Mobile text size",
      "default": 13
    },
    {
      "type": "range",
      "id": "desktop_text_top_margin",
      "min": 0,
      "max": 30,
      "step": 2,
      "unit": "px",
      "label": "Desktop spacing between the heading & text",
      "default": 8
    },
    {
      "type": "range",
      "id": "mobile_text_top_margin",
      "min": 0,
      "max": 30,
      "step": 2,
      "unit": "px",
      "label": "Mobile spacing between the heading & text",
      "default": 8
    },
    {
      "type": "range",
      "id": "desktop_container_padding_y",
      "min": 0,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Desktop vertical padding",
      "default": 24
    },
    {
      "type": "range",
      "id": "desktop_container_padding_x",
      "min": 0,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Desktop horizontal padding",
      "default": 24
    },
    {
      "type": "range",
      "id": "mobile_container_padding_y",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Mobile vertical padding",
      "default": 24
    },
    {
      "type": "range",
      "id": "mobile_container_padding_x",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Mobile horizontal padding",
      "default": 24
    },
    {
      "type": "header",
      "content": "Slider"
    },
    {
      "type": "select",
      "id": "type",
      "options": [
        { "value": "slide", "label": "Classic" },
        { "value": "loop", "label": "Infinite" }
      ],
      "default": "slide",
      "label": "Type"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Enable autoplay",
      "default": false
    },
    {
      "type": "range",
      "id": "autoplay_speed",
      "min": 1,
      "max": 15,
      "step": 0.5,
      "default": 5,
      "unit": "sec",
      "label": "Autoplay speed"
    },
    {
      "type": "select",
      "id": "arrows_color_scheme",
      "options": [
        { "value": "accent-1", "label": "Accent 1" },
        { "value": "accent-2", "label": "Accent 2" },
        { "value": "background-1", "label": "Background 1" },
        { "value": "background-2", "label": "Background 2" },
        { "value": "inverse", "label": "Inverse" }
      ],
      "default": "inverse",
      "label": "Arrows color scheme"
    },
    {
      "type": "checkbox",
      "id": "transparent_arrows",
      "label": "Transparent arrows",
      "default": true
    },
    {
      "type": "select",
      "id": "dots_color_scheme",
      "options": [
        { "value": "accent-1", "label": "Accent 1" },
        { "value": "accent-2", "label": "Accent 2" },
        { "value": "background-1", "label": "Background 1" },
        { "value": "background-2", "label": "Background 2" },
        { "value": "inverse", "label": "Text" }
      ],
      "default": "inverse",
      "label": "Dots color scheme"
    },
    {
      "type": "header",
      "content": "Desktop"
    },
    {
      "type": "checkbox",
      "id": "desktop_full_page",
      "label": "Full page width",
      "default": false
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "Columns desktop"
    },
    {
      "type": "checkbox",
      "id": "slider_desktop",
      "label": "Enable desktop slider",
      "default": false
    },
    {
      "type": "range",
      "id": "per_move_desktop",
      "min": 1,
      "max": 10,
      "step": 1,
      "default": 1,
      "label": "Slides to scroll on one move"
    },
    {
      "type": "range",
      "id": "desktop_spacing",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Spacing",
      "default": 40
    },
    {
      "type": "range",
      "id": "desktop_side_padding",
      "min": 0,
      "max": 150,
      "step": 5,
      "unit": "px",
      "label": "Preview of prev & next slide",
      "default": 0
    },
    {
      "type": "checkbox",
      "id": "desktop_padding_calc",
      "label": "Disable empty preview on first & last slide",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "desktop_adaptive_height",
      "label": "Adaptive height",
      "default": false
    },
    {
      "type": "select",
      "id": "desktop_dots_position",
      "options": [
        { "value": "hidden", "label": "Hidden" },
        { "value": "under", "label": "Under the slider" }
      ],
      "default": "under",
      "label": "Dots position"
    },
    {
      "type": "select",
      "id": "desktop_arrows_position",
      "options": [
        { "value": "hidden", "label": "Hidden" },
        { "value": "under", "label": "Under the slider" },
        { "value": "sides", "label": "On sides of the slider" }
      ],
      "default": "sides",
      "label": "Arrows position"
    },
    {
      "type": "header",
      "content": "Mobile"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "options": [{ "value": "1", "label": "1 column" }],
      "default": "1",
      "label": "Columns mobile"
    },
    {
      "type": "checkbox",
      "id": "slider_mobile",
      "label": "Enable mobile slider",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "enable_mobile_preview",
      "label": "Preview of prev & next slides",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "mobile_adaptive_height",
      "label": "Adaptive height",
      "default": false
    },
    {
      "type": "select",
      "id": "mobile_dots_position",
      "options": [
        { "value": "hidden", "label": "Hidden" },
        { "value": "under", "label": "Under the slider" }
      ],
      "default": "under",
      "label": "Dots position"
    },
    {
      "type": "select",
      "id": "mobile_arrows_position",
      "options": [
        { "value": "hidden", "label": "Hidden" },
        { "value": "under", "label": "Under the slider" },
        { "value": "sides", "label": "On sides of the slider" }
      ],
      "default": "under",
      "label": "Arrows position"
    },
    {
      "type": "range",
      "id": "mobile_spacing",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Mobile spacing",
      "default": 16
    },
    {
      "type": "header",
      "content": "Section Padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Top padding",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Bottom padding",
      "default": 36
    },
    {
      "type": "header",
      "content": "Custom color scheme",
      "info": "Applied if Color scheme setting is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "default": "#FFFFFF",
      "label": "Background color"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Gradient background"
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "default": "#2E2A39",
      "label": "Text"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_background",
      "default": "#dd1d1d",
      "label": "Solid button background"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_text",
      "default": "#ffffff",
      "label": "Solid button label"
    },
    {
      "type": "color",
      "id": "custom_colors_outline_button",
      "default": "#dd1d1d",
      "label": "Outline button"
    },
    {
      "type": "header",
      "content": "Custom cards color scheme",
      "info": "Applied if Cards color scheme setting is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_cards_colors_background",
      "default": "#F3F3F3",
      "label": "Background color"
    },
    {
      "type": "color_background",
      "id": "custom_cards_gradient_background",
      "label": "Gradient background"
    },
    {
      "type": "color",
      "id": "custom_cards_colors_heading",
      "default": "#222126",
      "label": "Headings"
    },
    {
      "type": "color",
      "id": "custom_cards_colors_text",
      "default": "#2E2A39",
      "label": "Text"
    }
  ],
  "blocks": [
    {
      "type": "step",
      "name": "Step",
      "settings": [
        {
          "type": "image_picker",
          "id": "step_image",
          "label": "Step Image"
        },
        {
          "type": "color",
          "id": "image_background_color",
          "label": "Image Background Color",
          "default": "#F5F5F5"
        },
        {
          "type": "text",
          "id": "step_title",
          "label": "Step Title",
          "default": "Step Title"
        },
        {
          "type": "richtext",
          "id": "step_description",
          "label": "Step Description",
          "default": "<p>Add your step description here to explain this part of the process.</p>"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Step results",
      "category": "Stats / Results",
      "settings": {
        "title": "How It Works",
        "subtitle": "Follow these simple steps to get started",
        "show_step_numbers": true,
        "show_step_images": true,
        "columns_desktop": 3,
        "slider_desktop": false,
        "slider_mobile": false
      },
      "blocks": [
        {
          "type": "step",
          "settings": {
            "step_title": "Choose Your Product",
            "step_description": "<p>Browse our collection and select the perfect product for your needs.</p>"
          }
        },
        {
          "type": "step",
          "settings": {
            "step_title": "Customize Options",
            "step_description": "<p>Personalize your selection with available customization options.</p>"
          }
        },
        {
          "type": "step",
          "settings": {
            "step_title": "Complete Purchase",
            "step_description": "<p>Secure checkout process with fast shipping to your door.</p>"
          }
        }
      ]
    }
  ]
}
{% endschema %}