{%- 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 feature_row = section.settings.feature_row
  assign feature_row_mobile = section.settings.feature_row_mobile
  assign feature_gap_mobile = section.settings.feature_gap_mobile
  assign feature_gap = section.settings.feature_gap
  assign feature_padding_vertical = section.settings.feature_padding_vertical
  assign feature_padding_horizontal = section.settings.feature_padding_horizontal
  assign feature_border_thickness = section.settings.feature_border_thickness
  assign feature_border_color = section.settings.feature_border_color
  assign feature_bg = section.settings.feature_bg
  assign feature_radius = section.settings.feature_radius
  assign feature_shadow_color = section.settings.feature_shadow_color
  assign feature_shadow = section.settings.feature_shadow
  
  assign feature_heading_size = section.settings.feature_heading_size
  assign feature_heading_size_mobile = section.settings.feature_heading_size_mobile
  assign feature_heading_color = section.settings.feature_heading_color
  assign feature_heading_custom = section.settings.feature_heading_custom
  assign feature_heading_font = section.settings.feature_heading_font
  assign feature_heading_height = section.settings.feature_heading_height

  assign feature_text_size = section.settings.feature_text_size
  assign feature_text_size_mobile = section.settings.feature_text_size_mobile
  assign feature_text_color = section.settings.feature_text_color
  assign feature_text_custom = section.settings.feature_text_custom
  assign feature_text_font = section.settings.feature_text_font
  assign feature_text_height = section.settings.feature_text_height
  assign feature_text_mt = section.settings.feature_text_mt

  assign feature_icon_size_mobile = section.settings.feature_icon_size_mobile
  assign feature_icon_size = section.settings.feature_icon_size
  assign feature_icon_color = section.settings.feature_icon_color
   
-%}
{% style %}

  {{ feature_text_font | font_face: font_display: 'swap' }}
  {{ feature_heading_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;
  }

  .feature-{{ section.id }} .box__title {
    margin: 0px;
    font-size: {{ feature_heading_size_mobile }}px;
    color: {{ feature_heading_color }};
    line-height: {{ feature_heading_height }}%;
    text-transform: unset;
    font-weight: bold;
    margin-top: {{section.settings.feature_heading_mt}}px;
  }
  
  .feature-{{ section.id }} .box__description {
    margin-top: {{ feature_text_mt | times: 0.75 | round: 0 }}px;
  }

  .feature-{{ section.id }} .box__description * {
    margin: 0px;
    font-size: {{ feature_text_size_mobile }}px;
    color: {{ feature_text_color }};
    line-height: {{ feature_text_height }}%;
    text-transform: unset;
  }

  .feature-{{ section.id }} .wrapper-box {
    display: grid;
    grid-template-columns: repeat({{ feature_row_mobile}}, 1fr);
    background-color: {{ feature_bg }}; 
    border: {{ feature_border_thickness }}px solid {{ feature_border_color }};
    border-radius: {{ feature_radius }}px;
    padding: {{ feature_padding_vertical | times: 0.75 | round: 0 }}px {{ feature_padding_horizontal | times: 0.75 | round: 0 }}px;
    gap: {{ feature_gap_mobile }}px;
  }
  
  .feature-{{ section.id }} .box:not(:nth-child(2)) .box__content-wrapper {
    padding-right: 10px;
  }
  
  .feature-{{ section.id }} .box {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    text-align: center;
    text-decoration: none;
    gap: 5px;
  }
  
  .feature-{{ section.id }} .box__image {
    display:flex;
    margin-right: 10px;
    flex: 0 0 {{ feature_icon_size_mobile }}px;
    height: {{ feature_icon_size_mobile }}px;
  }

  .feature-{{ section.id }} .box__image img,
  .feature-{{ section.id }} .box__image svg {
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .feature-{{ section.id }} .box__image svg path {
    fill: {{ feature_icon_color }};
  }

  @media(min-width: 768px) {

    .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;
      padding-right: {{ padding_horizontal }}rem;
    }

    .feature-{{ section.id }} .wrapper-box {
      grid-template-columns: repeat({{ feature_row }}, 1fr);
      padding: {{ feature_padding_vertical }}px {{ feature_padding_horizontal }}px;
      gap: {{ feature_gap }}px;
    }

    .feature-{{ section.id }} .box {
      flex: 1 0 auto;
    }
    
    .feature-{{ section.id }} .box__title {
      font-size: {{ feature_heading_size }}px;
    }

    .feature-{{ section.id }} .box__description {
      margin-top: {{ feature_text_mt }}px;
    }

    .feature-{{ section.id }} .box__description * {
      font-size: {{ feature_text_size }}px;
    }

    .section-{{ section.id }}-settings .box__image {
      flex: 0 0 {{ feature_icon_size }}px;
      height: {{ feature_icon_size }}px;
    }
  }
{% endstyle %}

{% if feature_heading_custom %}
  
{% endif %}

{% if feature_text_custom %}
  
{% endif %}

{% unless full_width %}
  
{% endunless %}

{% if feature_shadow %}
  
{% endif %}

{% capture svg_example_1 %}
 <svg class='icon icon--medium icon--type-truck' stroke-width='1' aria-hidden='true' focusable='false' role='presentation' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M15.64 6.92L9.5 5.12V4a.5.5 0 00-.5-.5H1a.5.5 0 00-.5.5v8.5c0 .28.22.5.5.5h1.27a2.1 2.1 0 004.06 0h3.94a2.1 2.1 0 004.06 0h1.17a.5.5 0 00.5-.5V7.4a.5.5 0 00-.36-.48zM4.3 13.6a1.1 1.1 0 110-2.2 1.1 1.1 0 010 2.2zM6.33 12a2.1 2.1 0 00-4.06 0H1.5V4.5h7V12H6.33zm5.97 1.6a1.1 1.1 0 110-2.2 1.1 1.1 0 010 2.2zM15 12h-.67a2.1 2.1 0 00-4.06 0H9.5V6.17l5.5 1.6V12z'></path></svg>
{% endcapture %}
{% capture svg_example_2 %}
  <svg class='icon icon--medium icon--type-price_tag' stroke-width='1' aria-hidden='true' focusable='false' role='presentation' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M7.59 1.34a1 1 0 01.7-.29h5.66a1 1 0 011 1v5.66a1 1 0 01-.3.7L7.6 15.5a1 1 0 01-1.42 0L.52 9.83a1 1 0 010-1.42l7.07-7.07zm6.36 6.37l-7.07 7.07-5.66-5.66L8.3 2.05h5.66v5.66z' fill-rule='evenodd'></path><path d='M9.7 6.3a1 1 0 101.42-1.42 1 1 0 00-1.41 1.41zM9 7a2 2 0 102.83-2.83A2 2 0 009 7z' fill-rule='evenodd'></path></svg>
{% endcapture %}
{% capture svg_example_3 %}
  <svg class='icon icon--medium icon--type-return' stroke-width='1' aria-hidden='true' focusable='false' role='presentation' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M9 .5a.5.5 0 000 1h1a4.5 4.5 0 110 9H2.2l3.15-3.15a.5.5 0 10-.7-.7l-4 4a.5.5 0 000 .7l4 4a.5.5 0 00.7-.7L2.21 11.5H10a5.5 5.5 0 100-11H9z'></path></svg>
{% endcapture %}
{% capture svg_example_4 %}
  <svg class='icon icon--medium icon--type-star' stroke-width='1' aria-hidden='true' focusable='false' role='presentation' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1c.21 0 .4.13.47.33l1.62 4.54 4.92.1a.5.5 0 01.29.9l-3.92 2.9 1.42 4.58a.5.5 0 01-.75.56L8 12.17 3.95 14.9a.5.5 0 01-.75-.56l1.42-4.58L.7 6.87a.5.5 0 01.29-.9l4.92-.1 1.62-4.54A.5.5 0 018 1zm0 2L6.74 6.52a.5.5 0 01-.46.33l-3.8.08L5.5 9.17a.5.5 0 01.18.55l-1.1 3.56 3.14-2.13a.5.5 0 01.56 0l3.15 2.13-1.1-3.56a.5.5 0 01.17-.55l3.02-2.23-3.8-.08a.5.5 0 01-.46-.33L8 2.99z'></path></svg>
{% endcapture %}

<div class="section-{{ section.id }} feature-{{ section.id }}" style="background-color:{{ background_color }}; background-image: {{ background_gradient }};">
    <div class="section-{{ section.id }}-settings ">
      <div class="wrapper-box">
          {%- for block in section.blocks -%}
              <{% if block.settings.feature_url != blank %}a href="{{ block.settings.feature_url }}"{% else %}div{% endif %} class="box">
                  {% unless block.settings.hide_image %}
                  <div class="box__image">
                      {%- if block.settings.feature_image != blank -%}
                        <img decoding="async" src="{{ block.settings.feature_image | image_url }}" alt="feature-item-{{ forloop.index }}" {% if lazy %}loading="lazy"{% endif %}>
                      {%- else -%}
                       {% case forloop.index %}
                        {% when 1 %}
                          {{ svg_example_1 }}
                        {% when 2 %}
                          {{ svg_example_2 }}
                        {% when 3 %}
                          {{ svg_example_3 }}
                        {% when 4 %}
                          {{ svg_example_4 }}
                        {% else %}
                          {{ svg_example_1 }}
                        {% endcase %}
                      {%- endif -%}
                  </div>
                  {% endunless %}
                  <div class="box__content-wrapper">
                      <div class="box__title">{{ block.settings.feature_title }}</div>
                      <div class="box__description">{{ block.settings.feature_text }}</div>
                  </div>
              </{% if block.settings.feature_url != blank %}a{% else %}div{% endif %}>
          {%- endfor -%}
      </div>
  </div>
</div>

{% schema %}
{
    "name":"SS Feature #1",
    "tag":"section",
    "class":"feature-type1",
    "settings": [
      {
        "type":"header",
        "content":"Feature wrapper settings"
      },
      {
        "type": "range",
        "id": "feature_row",
        "min": 1,
        "max": 5,
        "step": 1,
        "label": "Feature per row",
        "default": 4
      },
      {
        "type": "range",
        "id": "feature_row_mobile",
        "min": 1,
        "max": 4,
        "step": 1,
        "label": "Feature per row - mobile",
        "default": 1
      },
      {
        "type": "range",
        "id": "feature_gap",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Gap",
        "default": 20
      },
      {
        "type": "range",
        "id": "feature_gap_mobile",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Gap - mobile",
        "default": 20
      },
      {
         "type": "range",
         "id": "feature_padding_horizontal",
         "min": 0,
         "max": 100,
         "step": 2,
         "unit": "px",
         "label": "Padding horizontal",
         "default": 0
      },
      {
        "type": "range",
        "id": "feature_padding_vertical",
        "min": 0,
        "max": 100,
        "step": 2,
        "unit": "px",
        "label": "Padding vertical",
        "default": 0
      },
      {
         "type": "range",
         "id": "feature_radius",
         "min": 0,
         "max": 100,
         "step": 2,
         "unit": "px",
         "label": "Roundness",
         "default": 16
      },
      {
         "type": "range",
         "id": "feature_border_thickness",
         "min": 0,
         "max": 10,
         "step": 1,
         "unit": "px",
         "label": "Border thickness",
         "default": 0
      },
      {
        "type": "checkbox",
        "id": "feature_shadow",
        "label": "Use shadow",
        "default": false
      },
      {
        "type":"header",
        "content":"Feature heading settings"
      },
      {
        "type": "checkbox",
        "id": "feature_heading_custom",
        "label": "Use custom font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "feature_heading_font",
        "label": "Font family",
        "default": "josefin_sans_n4"
      },
      {
        "type": "range",
        "id": "feature_heading_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Font size",
        "default": 14
      },
      {
        "type": "range",
        "id": "feature_heading_size_mobile",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Font size - mobile",
        "default": 12
      },
      {
        "type": "range",
        "id": "feature_heading_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Line height",
        "default": 130
      },
      {
        "type": "range",
        "id": "feature_heading_mt",
        "min": 0,
        "max": 50,
        "step": 2,
        "unit": "px",
        "label": "Margin top",
        "default": 8
      },
      {
        "type":"header",
        "content":"Feature text settings"
      },
      {
        "type": "checkbox",
        "id": "feature_text_custom",
        "label": "Use custom font",
        "default": false
      },
      {
        "type": "font_picker",
        "id": "feature_text_font",
        "label": "Font family",
        "default": "josefin_sans_n4"
      },
      {
        "type": "range",
        "id": "feature_text_size",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Font size",
        "default": 12
      },
      {
        "type": "range",
        "id": "feature_text_size_mobile",
        "min": 0,
        "max": 72,
        "step": 2,
        "unit": "px",
        "label": "Font size - mobile",
        "default": 12
      },
      {
        "type": "range",
        "id": "feature_text_height",
        "min": 50,
        "max": 200,
        "step": 10,
        "unit": "%",
        "label": "Line height",
        "default": 130
      },
      {
        "type": "range",
        "id": "feature_text_mt",
        "min": 0,
        "max": 50,
        "step": 2,
        "unit": "px",
        "label": "Margin top",
        "default": 4
      },
      {
        "type":"header",
        "content":"Feature icon settings"
      },
      {
        "type": "range",
        "id": "feature_icon_size",
        "min": 10,
        "max": 200,
        "step": 2,
        "unit": "px",
        "label": "Size",
        "default": 42
      },
      {
        "type": "range",
        "id": "feature_icon_size_mobile",
        "min": 10,
        "max": 200,
        "step": 2,
        "unit": "px",
        "label": "Size - mobile",
        "default": 42
      },
      {
        "type":"header",
        "content":"Feature wrapper colors"
      },
      {
        "type":"color",
        "id":"feature_bg",
        "label":"Background color",
        "default":"#FFFFFF"
      },
      {
        "type":"color",
        "id":"feature_border_color",
        "label":"Border color",
        "default":"#000000"
      },
      {
        "type":"color",
        "id":"feature_shadow_color",
        "label":"Shadow color",
        "default":"#000000"
      },
      {
        "type":"header",
        "content":"Feature content colors"
      },
      {
        "type":"color",
        "id":"feature_heading_color",
        "label":"Heading color",
        "default":"#000000"
      },
      {
        "type":"color",
        "id":"feature_text_color",
        "label":"Text color",
        "default":"#000000"
      },
      {
        "type":"color",
        "id":"feature_icon_color",
        "label":"Icon color",
        "default":"#000000"
      },
      {
        "type":"header",
        "content":"Section colors"
      },
      {
        "type": "color",
        "label": "Background color",
        "id": "background_color",
        "default": "#FFFFFF"
      },
      {
        "type": "color_background",
        "id": "background_gradient",
        "label": "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": 16
      },
      {
         "type": "range",
         "id": "padding_bottom",
         "min": 0,
         "max": 100,
         "step": 4,
         "unit": "px",
         "label": "Padding bottom",
         "default": 16
      },
      {
        "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": 120
      },
      {
        "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":"image",
          "name":"SS - Feature #1",
          "settings":[
             {
                "type":"text",
                "id":"feature_title",
                "label":"Item title text",
                "default":"Item title"
             },
             {
                "type":"richtext",
                "id":"feature_text",
                "label":"Item text (richtext)",
                "default":"<p>Item text</p>"
             },
             {
                "type":"image_picker",
                "id":"feature_image",
                "label":"Icon"
             },
             {
                "type":"url",
                "id":"feature_url",
                "label":"Item URL"
             },
             {
                "type":"checkbox",
                "id":"hide_image",
                "default": false,
                "label":"Hide Image"
             }
          ]
       }
    ],
    "presets":[
       {
          "name":"SS - Feature #1",
          "blocks":[
             {
                "type":"image",
                "settings":{
                   "feature_title":"Free Shipping",
                   "feature_text":"<p>Order today, receive tomorrow</p>",
                   "feature_url":"https://section.store/"
                }
             },
             {
                "type":"image",
                "settings":{
                   "feature_title": "Price-match guarantee",
                   "feature_text": "<p>Safe money when ordering with us</p>"
                }
             },
             {
                "type":"image",
                "settings":{
                   "feature_title": "Hassle-free exchange",
                   "feature_text": "<p>Receive a slip for exchanges</p>"
				}
             },
             {
                "type": "image",
                "settings": {
                    "feature_title": "5.0 Google Reviews",
                    "feature_text": "<p>Customer satisfaction #1 priority</p>"
                }
             }
          ]
       }
    ]
 }
{% endschema %}