<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

{%- liquid 
  assign padding_horizontal = section.settings.padding_horizontal
  assign padding_horizontal_mobile = section.settings.padding_horizontal_mobile
  assign padding_top = section.settings.padding_top
  assign padding_bottom = section.settings.padding_bottom
  assign border_color = section.settings.border_color
  assign border_thickness = section.settings.border_thickness
  assign margin_top = section.settings.margin_top
  assign margin_bottom = section.settings.margin_bottom
  assign background_color = section.settings.background_color
  assign background_gradient = section.settings.background_gradient
  assign full_width = section.settings.full_width
  assign content_width = section.settings.content_width
  assign lazy = section.settings.lazy

  assign heading = section.settings.heading
  assign heading_size = section.settings.heading_size
  assign heading_size_mobile = section.settings.heading_size_mobile
  assign heading_color = section.settings.heading_color
  assign heading_custom = section.settings.heading_custom
  assign heading_font = section.settings.heading_font
  assign heading_height = section.settings.heading_height
  assign heading_align = section.settings.heading_align
  assign heading_align_mobile = section.settings.heading_align_mobile

  assign body_gap_mobile = section.settings.body_gap_mobile
  assign body_gap = section.settings.body_gap
  assign body_mt_mobile = section.settings.body_mt_mobile
  assign body_mt = section.settings.body_mt

  assign use_slider = section.settings.use_slider
  assign slider_gap_mobile = section.settings.slider_gap_mobile
  assign slider_view_mobile = section.settings.slider_view_mobile

  assign image_border_color = section.settings.image_border_color
  assign image_border_thickness = section.settings.image_border_thickness
  assign image_radius = section.settings.image_radius
  assign image_ratio = section.settings.image_ratio
  assign image_ratio_mobile = section.settings.image_ratio_mobile

  assign circle_number_size_mobile = section.settings.circle_number_size_mobile
  assign circle_number_size = section.settings.circle_number_size
  assign circle_number_bg_color = section.settings.circle_number_bg_color

  assign number_size = section.settings.number_size
  assign number_size_mobile = section.settings.number_size_mobile
  assign number_color = section.settings.number_color
  assign number_custom = section.settings.number_custom
  assign number_font = section.settings.number_font

  assign text_size = section.settings.text_size
  assign text_size_mobile = section.settings.text_size_mobile
  assign text_color = section.settings.text_color
  assign text_custom = section.settings.text_custom
  assign text_font = section.settings.text_font
  assign text_height = section.settings.text_height
  assign text_mt = section.settings.text_mt
  assign text_align = section.settings.text_align
  assign text_align_mobile = section.settings.text_align_mobile

  assign button = section.settings.button
  assign button_url = section.settings.button_url
  assign button_size = section.settings.button_size
  assign button_size_mobile = section.settings.button_size_mobile
  assign button_color = section.settings.button_color
  assign button_hover_color = section.settings.button_hover_color
  assign button_custom = section.settings.button_custom
  assign button_font = section.settings.button_font
  assign button_height = section.settings.button_height
  assign button_mt = section.settings.button_mt
  assign button_mt_mobile = section.settings.button_mt_mobile
  assign button_width = section.settings.button_width
  assign button_width_mobile = section.settings.button_width_mobile
  assign button_padding_vertical = section.settings.button_padding_vertical
  assign button_padding_vertical_mobile = section.settings.button_padding_vertical_mobile
  assign button_padding_horizontal = section.settings.button_padding_horizontal
  assign button_padding_horizontal_mobile = section.settings.button_padding_horizontal_mobile
  assign button_radius = section.settings.button_radius
  assign button_border_thickness = section.settings.button_border_thickness
  assign button_border_color = section.settings.button_border_color
  assign button_border_hover_color = section.settings.button_border_hover_color
  assign button_bg_color = section.settings.button_bg_color
  assign button_bg_hover_color = section.settings.button_bg_hover_color
  assign button_align = section.settings.button_align
  assign button_align_mobile = section.settings.button_align_mobile
  assign button_style = section.settings.button_style
  
-%}

{%- style -%}

  {{  heading_font | font_face: font_display: 'swap' }}
  {{  number_font | font_face: font_display: 'swap' }}
  {{  text_font | font_face: font_display: 'swap' }}
  {{  button_font | font_face: font_display: 'swap' }}
  
  .section-{{ section.id }} {
    border-top: solid {{ border_color }} {{ border_thickness }}px;
    border-bottom: solid {{ border_color }} {{ border_thickness }}px;
    margin-top: {{ margin_top | times: 0.75 | round: 0 }}px;
    margin-bottom: {{ margin_bottom | times: 0.75 | round: 0 }}px;
  }
  
  .section-{{ section.id }}-settings {
    margin: 0 auto;
    padding-top: {{ padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ padding_bottom | times: 0.75 | round: 0 }}px;
    padding-left: {{ padding_horizontal_mobile }}rem;
    padding-right: {{ padding_horizontal_mobile }}rem;
  }

  .steps-heading-{{ section.id }} {
    width: 100%;
    text-align: {{ heading_align_mobile }};
  }

  .steps-heading-{{ section.id }} * {
    margin: 0;
    font-size: {{ heading_size_mobile }}px;
    color: {{ heading_color }};
    line-height: {{ heading_height }}%;
    text-transform: unset;
  }

  .steps-body-{{ section.id }} {
    gap: {{ body_gap_mobile }}px;
    margin-top: {{ body_mt_mobile }}px;
  }

  .steps-slider-{{ section.id }} {
    margin-left: -{{ padding_horizontal_mobile }}rem !important;
    margin-right: -{{ padding_horizontal_mobile }}rem !important;
    padding-top: {{ circle_number_size_mobile | times: 0.5 | round: 0 }}px !important;
    margin-top: {{ body_mt_mobile }}px !important;
    padding-left: {{ padding_horizontal_mobile }}rem !important;
    padding-right: {{ padding_horizontal_mobile }}rem !important;
  }

  .steps-image-wrapper-{{ section.id }} {
    position: relative;
  }

  .steps-image-{{ section.id }} {
    border-radius: {{ image_radius }}px;
    overflow: hidden;
    border: {{ image_border_thickness }}px solid {{ image_border_color }};
  }

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

  .steps-image-{{ section.id }} svg {
    background-color: #AFAFAF;
  }

  .steps-number-{{ section.id }} {
    position: absolute;
    top: -{{ circle_number_size_mobile | times: 0.5 | round: 0 }}px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: {{ circle_number_size_mobile }}px;
    height: {{ circle_number_size_mobile }}px;
    font-size: {{ number_size_mobile }}px;
    line-height: 100%;
    color: {{ number_color }};
    background-color: {{ circle_number_bg_color }};
    border-radius: 50%;
  }

  .steps-text-{{ section.id }} {
    text-align: {{ text_align_mobile }};
    margin-top: {{ text_mt | times: 0.75 | round: 0 }}px;
  }

  .steps-text-{{ section.id }} * {
    margin: 0;
    font-size: {{ text_size_mobile }}px;
    color: {{ text_color }};
    line-height: {{ text_height }}%;
    text-transform: unset;
  }

  .steps-button-{{ section.id }} {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: {{ button_width_mobile }}px;
    margin: 0;
    margin-top: {{ button_mt_mobile }}px;
    font-size: {{ button_size_mobile }}px;
    color: {{ button_color }};
    line-height: {{ button_height }}%;
    text-align: center;
    text-transform: unset;
    text-decoration: none;
    padding: {{ button_padding_vertical_mobile }}px {{ button_padding_horizontal_mobile }}px;
    border-radius: {{ button_radius }}px;
    transition: all 0.25s ease 0s;
    position: relative;
    font-weight: 700;
    z-index: 2;
  }

  .steps-button-{{ section.id }}:hover {
    color: {{ button_hover_color }};
    transition: all 0.25s ease 0s;
  }

  .steps-button-{{ section.id }} svg {
    width: 14px;
    height: 14px;
  }

  .steps-button-{{ section.id }} svg path {
    fill: {{ button_color }};
    transition: all 0.25s ease 0s;
  }

  .steps-button-{{ section.id }}:hover svg path {
    fill: {{ button_hover_color }};
    transition: all 0.25s ease 0s;
  }
  
  @media(min-width: 1024px) {

    .section-{{ section.id }} {
      margin-top: {{ margin_top }}px;
      margin-bottom: {{ margin_bottom }}px;
    }
    
    .section-{{ section.id }}-settings {
      padding: 0 5rem;
      padding-top: {{ padding_top }}px;
      padding-bottom: {{ padding_bottom }}px;
      padding-left: {{ padding_horizontal }}rem !important;
      padding-right: {{ padding_horizontal }}rem !important;
    }

    .steps-heading-{{ section.id }} {
      text-align: {{ heading_align }};
    }

    .steps-heading-{{ section.id }} * {
      font-size: {{ heading_size }}px;
    }

    .steps-body-{{ section.id }} {
      display: grid !important;
      gap: {{ body_gap }}px;
      margin-top: {{ body_mt }}px;
      grid-template-columns: repeat({{ section.settings.desktopsteps}}, 1fr);
    }

    .steps-slider-{{ section.id }} {
      display: none !important;
    }

    .steps-number-{{ section.id }} {
      top: -{{ circle_number_size | times: 0.5 | round: 0 }}px;
      width: {{ circle_number_size }}px;
      height: {{ circle_number_size }}px;
      font-size: {{ number_size }}px;
    }

    .steps-text-{{ section.id }} {
      margin-top: {{ text_mt }}px;
      text-align: {{ text_align }};
    }
  
    .steps-text-{{ section.id }} * {
      font-size: {{ text_size }}px;
    }

    .steps-button-{{ section.id }} {
      margin-top: {{ button_mt }}px;
      max-width: {{ button_width }}px;
      padding: {{ button_padding_vertical }}px {{ button_padding_horizontal }}px;
      font-size: {{ button_size }}px;
    }
  }
  
{%- endstyle -%}

{% unless full_width %}
  <style>
    .section-{{ section.id }}-settings {
      max-width: {{ content_width }}rem;
    }
  </style>
{% endunless %}

{% if heading_custom %}
  <style>
    .steps-heading-{{ section.id }} * {
      font-family: {{ heading_font.family }}, {{ heading_font.fallback_families }};
      font-weight: {{ heading_font.weight }};
      font-style: {{ heading_font.style }};
    }
  </style>
{% endif %}

{% if number_custom %}
  <style>
    .steps-number-{{ section.id }} {
      font-family: {{ number_font.family }}, {{ number_font.fallback_families }};
      font-weight: {{ number_font.weight }};
      font-style: {{ number_font.style }};
    }
  </style>
{% endif %}

{% if text_custom %}
  <style>
    .steps-text-{{ section.id }} {
      font-family: {{ text_font.family }}, {{ text_font.fallback_families }};
      font-weight: {{ text_font.weight }};
      font-style: {{ text_font.style }};
    }
  </style>
{% endif %}

{% if button_custom %}
  <style>
    .steps-button-{{ section.id }} {
      font-family: {{ button_font.family }}, {{ button_font.fallback_families }};
      font-weight: {{ button_font.weight }};
      font-style: {{ button_font.style }};
    }
  </style>
{% endif %}

{% if image_ratio_mobile == "portrait" %}
  <style>
    .steps-image-{{ section.id }} {
     aspect-ratio: 9.6/14; 
    }
  </style>
{% elsif image_ratio_mobile == "landscape" %}
  <style>
    .steps-image-{{ section.id }}{
     aspect-ratio: 12/10; 
    }
  </style>
{% elsif image_ratio_mobile == "square" %}
  <style>
    .steps-image-{{ section.id }} {
     aspect-ratio: 12/12; 
    }
  </style>
{% else%}
  <style>
    .steps-image-{{ section.id }} {
     aspect-ratio: auto; 
    }
  </style>
{% endif %}

{% if image_ratio == "portrait" %}
  <style>
    @media(min-width: 1024px) {
     .steps-image-{{ section.id }} {
       aspect-ratio: 9.6/14; 
      } 
    }
  </style>
{% elsif image_ratio == "landscape" %}
  <style>
    @media(min-width: 1024px) {
      .steps-image-{{ section.id }} {
       aspect-ratio: 12/10; 
      }
    }
  </style>
{% elsif image_ratio == "square" %}
  <style>
    @media(min-width: 1024px) {
      .steps-image-{{ section.id }} {
       aspect-ratio: 12/12; 
      }
    }
  </style>
{% else%}
  <style>
    @media(min-width: 1024px) {
      .steps-image-{{ section.id }} {
       aspect-ratio: auto; 
      }
    }
  </style>
{% endif %}

{% if button_align_mobile == "center" %}
  <style>
   .steps-button-{{ section.id }} {
      margin-left: auto;
      margin-right: auto;
    } 
  </style>
{% elsif button_align_mobile == "right" %}
  <style>
   .steps-button-{{ section.id }} {
      margin-left: auto;
    } 
  </style>
{% endif %}

{% if button_align == "center" %}
  <style>
    @media(min-width: 1024px) {
     .steps-button-{{ section.id }} {
        margin-left: auto !important;
        margin-right: auto !important;
      } 
    }
  </style>
{% elsif button_align == "right" %}
  <style>
    @media(min-width: 1024px) {
     .steps-button-{{ section.id }} {
        margin-left: auto !important;
        margin-right: 0px !important;
      } 
    }
  </style>
{% else %}
  <style>
    @media(min-width: 1024px) {
     .steps-button-{{ section.id }} {
        margin-left: 0px !important;
        margin-right: 0px !important;
      } 
    }
  </style>
{% endif %}

{% if button_style == "non_outline" or button_style == "non_outline_arrow" %}
  <style>
    .steps-button-{{ section.id }} {
      background-color: {{ button_bg_color }};
    }

    .steps-button-{{ section.id }}:hover {
      background-color: {{ button_bg_hover_color }};
    }
  </style>
{% elsif button_style == "outline" or button_style == "outline_arrow" %}
  <style>
    .steps-button-{{ section.id }} {
      background-color: {{ button_bg_color }};
      border: {{ button_border_thickness }}px solid {{ button_border_color }};
    }

    .steps-button-{{ section.id }}:hover {
      background-color: {{ button_bg_hover_color }};
      border: {{ button_border_thickness }}px solid {{ button_border_hover_color }};
    }
  </style>
{% endif %}

{% if use_slider %}
  <style>
    
    .steps-slider-{{ section.id }} {
      display: block;
    }

    .steps-body-{{ section.id }} {
      display: none;
    }
  </style>
{% else %}
  <style>
    .steps-slider-{{ section.id }} {
      display: none;
    }

    .steps-body-{{ section.id }} {
      display: grid;
    }
  </style>
{% endif %}

<div class="section-{{ section.id }} steps-{{ section.id }} animate-section animate--hidden {{ section.settings.visibility }}" style="background-color:{{ background_color }}; background-image: {{ background_gradient }};">
    <div class="section-{{ section.id }}-settings animate-item animate-item">
      
      {% if heading != blank %}
        <div class="steps-heading-{{ section.id }}">
          {{ heading }}
        </div>
      {% endif %}

      {% if use_slider %}
        <div class="steps-slider-{{ section.id }} swiper">
          <div class="swiper-wrapper">
            {% for block in section.blocks %}
              <div class="steps-item-{{ section.id }} swiper-slide">
                <div class="steps-image-wrapper-{{ section.id }}">
                  <div class="steps-number-{{ section.id }}">{{ forloop.index }}</div>
                  <div class="steps-image-{{ section.id }}">
                    {% if block.settings.image != blank %}
                      <img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.image.alt }}" {% if lazy %}loading="lazy"{% endif %}>
                    {% else %}
                      {{ 'image' | placeholder_svg_tag }}
                    {% endif %}
                  </div>
                </div>
                {% if block.settings.text != blank %}
                  <div class="steps-text-{{ section.id }}">
                    {{ block.settings.text }}
                  </div>
                {% endif %}
              </div>
            {% endfor %}
          </div>
        </div>
      {% endif %}
      
      <div class="steps-body-{{ section.id }}">
        {% for block in section.blocks %}
          <div class="steps-item-{{ section.id }}">
            <div class="steps-image-wrapper-{{ section.id }}">
              <div class="steps-number-{{ section.id }}">{{ forloop.index }}</div>
              <div class="steps-image-{{ section.id }}">
                {% if block.settings.image != blank %}
                  <img src="{{ block.settings.image | image_url }}" alt="{{ block.settings.image.alt }}" {% if lazy %}loading="lazy"{% endif %}>
                {% else %}
                  {{ 'image' | placeholder_svg_tag }}
                {% endif %}
              </div>
            </div>
            {% if block.settings.text != blank %}
              <div class="steps-text-{{ section.id }}">
                {{ block.settings.text }}
              </div>
            {% endif %}
          </div>
        {% endfor %}
      </div>
      
      {% if button != blank %}
        <a href="{{ button_url }}" class="steps-button-{{ section.id }}">
          {{ button }}
          {% if button_style == "non_outline_arrow" or button_style == "outline_arrow" %}
            <svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M187.827 98.7858C188.123 98.4749 188.123 98.4749 188.123 98.1761C188.419 97.8652 188.419 97.5663 188.704 97.5663C189 96.9566 189 96.6458 189 96.0361C189 95.4263 189 94.8166 188.704 94.5058C188.704 94.195 188.408 93.8961 188.123 93.5852C188.123 93.2744 187.827 93.2744 187.827 92.9755L103.287 4.21945C102.41 3.29889 101.533 3 100.668 3C99.791 3 98.6295 3.31083 98.0488 4.21945C97.1719 5.14 96.8872 6.06058 96.8872 6.96919C96.8872 7.88974 97.1833 9.10918 98.0488 9.7189L175.587 92.0539H6.79206C4.75371 92.0539 3 93.895 3 96.0351C3 98.1751 4.75365 100.016 6.79206 100.016H175.575L97.7543 182.042C96.2967 183.572 96.2967 186.322 97.7543 187.852C99.2119 189.383 101.831 189.383 103.288 187.852L187.827 98.7858Z" fill="black"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M188.607 97.5657C188.432 97.5657 188.365 97.6788 188.27 97.8382C188.211 97.9378 188.141 98.0554 188.027 98.1748C188.027 98.4734 188.027 98.4734 187.731 98.7839L103.281 187.759C101.825 189.287 99.2085 189.287 97.7524 187.759C96.2963 186.23 96.2963 183.483 97.7524 181.954L175.492 100.013L6.88489 100.013C4.8486 100.013 3.09677 98.1739 3.09677 96.036C3.09677 93.8982 4.84866 92.059 6.88489 92.059L175.504 92.059L98.0465 9.80878C97.182 9.19968 96.8862 7.9815 96.8862 7.0619C96.8862 6.15422 97.1706 5.2346 98.0465 4.315C98.6267 3.40732 99.787 3.0968 100.663 3.0968C101.527 3.0968 102.403 3.39539 103.279 4.315L187.731 92.9796C187.731 93.1274 187.804 93.2021 187.877 93.2774C187.952 93.3543 188.027 93.4319 188.027 93.5887C188.046 93.6098 188.066 93.6308 188.085 93.6518C188.338 93.9267 188.584 94.1935 188.606 94.4689C188.607 94.482 188.607 94.4951 188.607 94.5083C188.903 94.8188 188.903 95.4279 188.903 96.037C188.903 96.6461 188.903 96.9566 188.607 97.5657ZM191.489 93.2767C191.79 93.8661 191.89 94.4204 191.934 94.7363C192.001 95.2226 192 95.7194 192 95.9856L192 96.037C192 96.0544 192 96.0729 192 96.0926C192 96.3523 192.001 96.8096 191.924 97.2931C191.828 97.8884 191.64 98.41 191.393 98.9184L190.546 100.663H190.212C190.127 100.759 190.038 100.852 189.988 100.905L189.974 100.92L105.527 189.891C102.85 192.701 98.1865 192.704 95.51 189.895C94.1476 188.464 93.5636 186.587 93.5636 184.857C93.5636 183.128 94.1468 181.252 95.5071 179.822M191.489 93.2767C191.316 92.7908 191.078 92.4357 190.938 92.2406C190.903 92.1912 190.866 92.142 190.828 92.0939V91.7408L105.522 2.17912C104.076 0.661813 102.397 0 100.663 0C99.3914 0 97.0569 0.401401 95.6212 2.37737C94.3151 3.83819 93.7895 5.45521 93.7895 7.0619C93.7895 8.26663 94.1183 10.6061 95.9608 12.111L168.333 88.9622L6.88489 88.9622C2.9981 88.9622 0 92.3316 0 96.036C0 99.7405 2.99801 103.11 6.88489 103.11L168.285 103.11" fill="black"></path>
              <path d="M169.5 104L16.5 102.5V90H171L97.5 10.5V7L107.5 4.5C131.167 29.6667 180.2 81.5 187 87.5C193.8 93.5 191.5 99 189.5 101L105.5 184L94 181.5L169.5 104Z" fill="black"></path>
            </svg>
          {% endif %}
        </a>
      {% endif %}
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
  function initSteps4() {
    const slider = new Swiper(".steps-slider-{{ section.id }}", {
      speed: 300,
      spaceBetween: 20,
      centeredSlides: true,
      spaceBetween: {{ slider_gap_mobile }},
      slidesPerView: {{ slider_view_mobile }}
    });
  }

  document.addEventListener('DOMContentLoaded', initSteps4);
  
  if (Shopify.designMode) {
     document.addEventListener('shopify:section:unload', initSteps4);
     document.addEventListener('shopify:section:load', initSteps4);
  }
</script>

{% schema %}
  {
    "name": "Step instructions",
    "settings": [
           {
      "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": "Heading Settings"
      },
      {
        "type": "richtext",
        "id": "heading",
        "label": "Heading",
        "default": "<h2>How it works</h2>"
      },
       {
        "type": "range",
        "id": "desktopsteps",
        "min": 2,
        "max": 4,
        "step": 1,
        "label": "Desktop steps per row",
        "default": 3
      },
      {
        "type": "checkbox",
        "id": "heading_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "heading_font",
        "label": "Heading Font Family",
        "default": "josefin_sans_n4"
      },
      {
        "type": "range",
        "id": "heading_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Heading Size",
        "default": 44
      },
      {
        "type": "range",
        "id": "heading_size_mobile",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Heading Size - Mobile",
        "default": 32
      },
      {
        "type": "range",
        "id": "heading_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Heading Line Height",
        "default": 130
      },
      {
        "type": "text_alignment",
        "id": "heading_align",
        "label": "Heading Align",
        "default": "center"
      },
      {
        "type": "text_alignment",
        "id": "heading_align_mobile",
        "label": "Heading Align - Mobile",
        "default": "center"
      },
      {
        "type": "header",
        "content": "Body Settings"
      },
      {
        "type": "range",
        "id": "body_gap",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Body Gap",
        "default": 64
      },
      {
        "type": "range",
        "id": "body_gap_mobile",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Body Gap - Mobile",
        "default": 56
      },
      {
        "type": "range",
        "id": "body_mt",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Body Margin Top",
        "default": 72
      },
      {
        "type": "range",
        "id": "body_mt_mobile",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Body Margin Top - Mobile",
        "default": 50
      },
      {
        "type": "header",
        "content": "Slider Settings (Mobile)"
      },
      {
        "type": "checkbox",
        "id": "use_slider",
        "label": "Use Slider - Mobile",
        "default": false
      },
      {
        "type": "range",
        "id": "slider_view_mobile",
        "min": 1,
        "max": 2,
        "step": 0.1,
        "label": "Slides Per View",
        "default": 1.3
      },
      {
        "type": "range",
        "id": "slider_gap_mobile",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Slider Gap",
        "default": 20
      },
      {
        "type": "header",
        "content": "Card Image Settings"
      },
      {
        "type": "range",
        "id": "image_radius",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Image Roundness",
        "default": 16
      },
      {
        "type": "range",
        "id": "image_border_thickness",
        "min": 0,
        "max": 10,
        "step": 1,
        "unit": "px",
        "label": "Image Border Thickness",
        "default": 2
      },
      {
        "type": "select",
        "id": "image_ratio",
        "label": "Image Aspect Ratio",
        "default": "square",
        "options": [
          {
            "label": "Portrait",
            "value": "portrait"
          },
          {
            "label": "Square",
            "value": "square"
          },
          {
            "label": "Landscape",
            "value": "landscape"
          },
          {
            "label": "Original",
            "value": "original"
          }
        ]
      },
      {
        "type": "select",
        "id": "image_ratio_mobile",
        "label": "Image Aspect Ratio - Mobile",
        "default": "square",
        "options": [
          {
            "label": "Portrait",
            "value": "portrait"
          },
          {
            "label": "Square",
            "value": "square"
          },
          {
            "label": "Landscape",
            "value": "landscape"
          },
          {
            "label": "Original",
            "value": "original"
          }
        ]
      },
      {
        "type": "header",
        "content": "Circle Number Settings"
      },
      {
        "type": "range",
        "id": "circle_number_size",
        "min": 16,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Circle Number Size",
        "default": 40
      },
      {
        "type": "range",
        "id": "circle_number_size_mobile",
        "min": 16,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Circle Number Size - Mobile",
        "default": 40
      },
      {
        "type": "header",
        "content": "Number Settings"
      },
      {
        "type": "checkbox",
        "id": "number_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "number_font",
        "label": "Number Font Family",
        "default": "josefin_sans_n4"
      },
      {
        "type": "range",
        "id": "number_size",
        "min": 0,
        "max": 32,
        "step": 1,
        "unit": "px",
        "label": "Number Size",
        "default": 18
      },
      {
        "type": "range",
        "id": "number_size_mobile",
        "min": 0,
        "max": 32,
        "step": 1,
        "unit": "px",
        "label": "Number Size - Mobile",
        "default": 18
      },
      {
        "type": "header",
        "content": "Text Settings"
      },
      {
        "type": "checkbox",
        "id": "text_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "text_font",
        "label": "Text Font Family",
        "default": "josefin_sans_n4"
      },
      {
        "type": "range",
        "id": "text_size",
        "min": 0,
        "max": 40,
        "step": 1,
        "unit": "px",
        "label": "Text Size",
        "default": 18
      },
      {
        "type": "range",
        "id": "text_size_mobile",
        "min": 0,
        "max": 40,
        "step": 1,
        "unit": "px",
        "label": "Text Size - Mobile",
        "default": 18
      },
      {
        "type": "range",
        "id": "text_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Text Line Height",
        "default": 130
      },
      {
        "type": "range",
        "id": "text_mt",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Text Margin Top",
        "default": 24
      },
      {
        "type": "text_alignment",
        "id": "text_align",
        "label": "Text Align",
        "default": "center"
      },
      {
        "type": "text_alignment",
        "id": "text_align_mobile",
        "label": "Text Align - Mobile",
        "default": "center"
      },
      {
        "type": "header",
        "content": "Button"
      },
      {
        "type": "text",
        "id": "button",
        "label": "Button Text"
      },
      {
        "type": "url",
        "id": "button_url",
        "label": "Button URL"
      },
      {
        "type": "checkbox",
        "id": "button_custom",
        "label": "Use Custom Font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "button_font",
        "label": "Button Font Family",
        "default": "josefin_sans_n4"
      },
      {
        "type": "range",
        "id": "button_size",
        "min": 0,
        "max": 30,
        "step": 1,
        "unit": "px",
        "label": "Button Size",
        "default": 16
      },
      {
        "type": "range",
        "id": "button_size_mobile",
        "min": 0,
        "max": 30,
        "step": 1,
        "unit": "px",
        "label": "Button Size - Mobile",
        "default": 16
      },
      {
        "type": "range",
        "id": "button_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Button Line Height",
        "default": 100
      },
      {
        "type": "range",
        "id": "button_width",
        "min": 100,
        "max": 600,
        "step": 5,
        "unit": "px",
        "label": "Button Max-Width - Desktop",
        "default": 200
      },
      {
        "type": "range",
        "id": "button_width_mobile",
        "min": 100,
        "max": 600,
        "step": 5,
        "unit": "px",
        "label": "Button Max-Width - Mobile",
        "default": 200
      },
      {
        "type": "range",
        "id": "button_mt",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Button Margin Top",
        "default": 70
      },
      {
        "type": "range",
        "id": "button_mt_mobile",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Button Margin Top - Mobile",
        "default": 32
      },
      {
        "type": "range",
        "id": "button_padding_vertical",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Button Padding Vertical",
        "default": 14
      },
      {
        "type": "range",
        "id": "button_padding_vertical_mobile",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Button Padding Vertical - Mobile",
        "default": 14
      },
      {
         "type": "range",
         "id": "button_padding_horizontal",
         "min": 0,
         "max": 100,
         "step": 2,
         "unit": "px",
         "label": "Button Padding Horizontal",
         "default": 22
      },
      {
         "type": "range",
         "id": "button_padding_horizontal_mobile",
         "min": 0,
         "max": 100,
         "step": 2,
         "unit": "px",
         "label": "Button Padding Horizontal - Mobile",
         "default": 22
      },
      {
         "type": "range",
         "id": "button_radius",
         "min": 0,
         "max": 100,
         "step": 2,
         "unit": "px",
         "label": "Button Border Radius",
         "default": 100
      },
      {
         "type": "range",
         "id": "button_border_thickness",
         "min": 0,
         "max": 10,
         "step": 1,
         "unit": "px",
         "label": "Button Border Thickness",
         "default": 0
      },
      {
        "type": "select",
        "id": "button_align",
        "label": "Button Align",
        "default": "center",
        "options": [
          {
            "label": "Left",
            "value": "left"
          },
          {
            "label": "Center",
            "value": "center"
          },
          {
            "label": "Right",
            "value": "right"
          }
        ]
      },
      {
        "type": "select",
        "id": "button_align_mobile",
        "label": "Button Align - Mobile",
        "default": "center",
        "options": [
          {
            "label": "Left",
            "value": "left"
          },
          {
            "label": "Center",
            "value": "center"
          },
          {
            "label": "Right",
            "value": "right"
          }
        ]
      },
      {
        "type": "select",
        "id": "button_style",
        "label": "Button Style",
        "default": "non_outline",
        "options": [
          {
            "label": "Link",
            "value": "link"
          },
          {
            "label": "Non-Outline",
            "value": "non_outline"
          },
          {
            "label": "Non-Outline & Arrow",
            "value": "non_outline_arrow"
          },
          {
            "label": "Outline",
            "value": "outline"
          },
          {
            "label": "Outline & Arrow",
            "value": "outline_arrow"
          }
        ]
      },
      {
        "type": "header",
        "content": "Card Colors"
      },
      {
        "type": "color",
        "label": "Image Border Color",
        "id": "image_border_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Circle Number Background Color",
        "id": "circle_number_bg_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Number Color",
        "id": "number_color",
        "default": "#FFFFFF"
      },
      {
        "type": "color",
        "label": "Text Color",
        "id": "text_color",
        "default": "#000000"
      },
      {
        "type": "header",
        "content": "Button Colors"
      },
      {
        "type": "color",
        "label": "Button Text Color",
        "id": "button_color",
        "default": "#FFFFFF"
      },
      {
        "type": "color",
        "label": "Button Hover Text Color",
        "id": "button_hover_color",
        "default": "#FFFFFF"
      },
      {
        "type": "color",
        "label": "Button Background Color",
        "id": "button_bg_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Button Background Hover Color",
        "id": "button_bg_hover_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Button Border Color",
        "id": "button_border_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Button Border Hover Color",
        "id": "button_border_hover_color",
        "default": "#000000"
      },
      {
        "type": "header",
        "content": "Section Colors"
      },
      {
        "type": "color",
        "label": "Heading Color",
        "id": "heading_color",
        "default": "#000000"
      },
      {
        "type": "color",
        "label": "Section background",
        "id": "background_color",
        "default": "#FFFFFF"
      },
      {
        "type": "color_background",
        "id": "background_gradient",
        "label": "Section background gradient"
      },
      {
        "type": "color",
        "label": "Border",
        "id": "border_color",
        "default": "#000000"
      },
      {
        "type": "header",
        "content": "Section margin (outside)"
      },
      {
        "type": "range",
        "id": "margin_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Margin top",
        "default": 0
      },
      {
        "type": "range",
        "id": "margin_bottom",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Margin bottom",
        "default": 0
      },
      {
        "type": "header",
        "content": "Section padding (inside)"
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "Padding top",
        "default": 36
      },
      {
         "type": "range",
         "id": "padding_bottom",
         "min": 0,
         "max": 100,
         "step": 4,
         "unit": "px",
         "label": "Padding bottom",
         "default": 36
      },
      {
        "type": "range",
        "id": "padding_horizontal",
        "min": 0,
        "max": 30,
        "step": 1,
        "unit": "rem",
        "label": "Padding sides",
        "default": 5
      },
      {
        "type": "range",
        "id": "padding_horizontal_mobile",
        "min": 0,
        "max": 15,
        "step": 0.5,
        "unit": "rem",
        "label": "Padding sides mobile",
        "default": 1.5
      },
      {
        "type": "header",
        "content": "Section Settings"
      },
      {
        "type": "checkbox",
        "id": "full_width",
        "label": "Full Width",
        "default": false
      },
      {
        "type": "range",
        "id": "content_width",
        "min": 0,
        "max": 400,
        "step": 10,
        "unit": "rem",
        "label": "Section content width",
        "default": 130
      },
      {
        "type": "range",
        "id": "border_thickness",
        "min": 0,
        "max": 50,
        "step": 1,
        "unit": "px",
        "label": "Border thickness",
        "default": 0
      },
      {
        "type": "checkbox",
        "id": "lazy",
        "label": "Lazy load",
        "info": "Lazy load images for speed optimisation",
        "default": true
      }
    ],
    "blocks": [
      {
        "type": "step",
        "name": "Step",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "<p>Text for Step</p>"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Step instructions",
        "category": "Stats / Results",
        "blocks": [
          {
            "type": "step",
            "settings": {
              "text": "<p>Write a short sentence about step 1</p>"
            }
          },
          {
            "type": "step",
            "settings": {
              "text": "<p>Write a short sentence about step 2</p>"
            }
          },
          {
            "type": "step",
            "settings": {
              "text": "<p>Write a short sentence about step 3</p>"
            }
          }
        ]
      }
    ],
      "disabled_on": {
    "groups": ["header", "footer"]
  }
  }
{% endschema %}