/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:10 Expected identifier but found whitespace
Line 17:21 Unexpected "("
Line 22:1 Expected identifier but found "%"
Line 24:0 Unexpected "{"
Line 24:1 Unexpected "{"
Line 24:3 Expected identifier but found "'flickity.css'"
Line 25:0 Unexpected "<"
Line 30:1 Expected identifier but found "%"
... and 171 more hidden warnings

**/
{% comment %}
  Section: Icons Row (Flickity)
  - Slider mobiel (watchCSS), rij op desktop
  - Instelbare icon- en itemtitel-grootte + font (thema of custom)
  - Hoofdtitel: grootte mobiel/desktop + gewicht + apart lettertype
  - Hard reset van buitenmarges (toggle) zónder interne padding te breken
{% endcomment %}

{{ 'flickity.css' | asset_url | stylesheet_tag }}
<script>
  window.__flickityLoaded = !!window.Flickity || !!(window.themeVendor && window.themeVendor.Flickity);
</script>
<script src="{{ 'flickity.pkgd.min.js' | asset_url }}" defer onload="window.__flickityLoaded=true;document.dispatchEvent(new Event('flickity:ready'));"></script>

{%- comment -%} Itemtitel font (onder de iconen) {%- endcomment -%}
{% assign _title_font_css = 'inherit' %}
{% if section.settings.title_font_source == 'custom' and section.settings.title_font_family != blank %}
  {% assign _title_font_css = section.settings.title_font_family %}
{% else %}
  {% assign _title_font_css = 'var(--font-body-family, inherit)' %}
{% endif %}

{%- comment -%} Hoofdtitel font (boven de iconen) {%- endcomment -%}
{% assign _heading_font_css = 'inherit' %}
{% if section.settings.heading_font_source == 'custom' and section.settings.heading_font_family != blank %}
  {% assign _heading_font_css = section.settings.heading_font_family %}
{% else %}
  {% assign _heading_font_css = 'var(--font-heading-family, var(--font-body-family, inherit))' %}
{% endif %}

<section
  id="Section-{{ section.id }}"
  class="icons-row"
  style="
    --PT: {{ section.settings.pad_top }}px;
    --PB: {{ section.settings.pad_bottom }}px;
    --bg: {{ section.settings.bg }};
    --color: {{ section.settings.color }};
    --outline: {{ section.settings.outline_color }};
    --icon-size-mobile: {{ section.settings.icon_size_mobile }}px;
    --icon-size-desktop: {{ section.settings.icon_size_desktop }}px;

    /* Itemtitel (onder de iconen) */
    --title-size-m: {{ section.settings.title_size_mobile }}px;
    --title-size-d: {{ section.settings.title_size_desktop }}px;
    --title-weight: {{ section.settings.title_weight }};
    --title-font: {{ _title_font_css }};
    --gap-title: {{ section.settings.title_gap }}px;

    /* Hoofdtitel (boven de iconen) */
    --heading-size-m: {{ section.settings.heading_size_mobile }}px;
    --heading-size-d: {{ section.settings.heading_size_desktop }}px;
    --heading-weight: {{ section.settings.heading_weight }};
    --heading-font: {{ _heading_font_css }};
  "
>
  <div class="icons-row__background section-padding">
    <div class="container">
      {% if section.settings.heading != blank %}
        <h2 class="icons-row__heading">{{ section.settings.heading }}</h2>
      {% endif %}

      <div class="row">
        <div class="icons-row-wrapper {% if section.settings.center %}icons-row-wrapper--center{% endif %}" data-slider>
          {% for block in section.blocks %}
            {% assign img = block.settings.image %}
            <div class="icons-row__item icons-row__item--slider" data-slide data-slide-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
              <a class="icons-row__link" href="{{ block.settings.link | default: '#' }}">
                <div class="icons-row__image">
                  {% if img != blank %}
                    {{ img | image_url: width: 300 | image_tag:
                      widths: '45,60,90,120,150,180,240,300',
                      sizes: '(min-width:768px) 75px, 60px',
                      loading: 'lazy',
                      class: 'icons-row__img',
                      alt: block.settings.alt | default: img.alt | escape
                    }}
                  {% endif %}
                </div>
                {% if block.settings.title != blank %}
                  <h3 class="icons-row__title">{{ block.settings.title }}</h3>
                {% endif %}
              </a>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</section>

<style>
  {% if section.settings.reset_outer_spacing %}
  /* Hard reset van buitenspatiëring, maar laat interne padding met sliders intact */
  #shopify-section-{{ section.id }}{
    margin: 0 !important;
    padding: 0 !important;
    --section-spacing: 0;
    --section-spacing-block: 0;
    --section-vertical-spacing: 0;
  }
  /* geen extra marge tussen secties */
  #shopify-section-{{ section.id }} + .shopify-section{ margin-top: 0 !important; }
  {% endif %}

  /* container zijkant zoals eerder */
  #Section-{{ section.id }} .container{ padding-inline: 0 !important; }
  @media all and (max-width: 600px){
    #Section-{{ section.id }} .container{ padding-inline: 10px; }
  }

  /* ▼ Belangrijk: var-paddings met !important zodat sliders winnen van thema-regels */
  #Section-{{ section.id }} .icons-row__background{
    background: var(--bg);
    color: var(--color);
    padding-top: var(--PT) !important;
    padding-bottom: var(--PB) !important;
  }

  /* Hoofdtitel boven de iconen */
  #Section-{{ section.id }} .icons-row__heading{
    margin: 0 0 12px;
    font-family: var(--heading-font);
    font-weight: var(--heading-weight);
    font-size: var(--heading-size-m);
    line-height: 1.25;
    text-align: {% if section.settings.center %}center{% else %}left{% endif %};
  }
  @media all and (min-width: 768px){
    #Section-{{ section.id }} .icons-row__heading{
      font-size: var(--heading-size-d);
    }
  }

  /* Wrapper + watchCSS (mobiel slider, desktop rij) */
  #Section-{{ section.id }} .icons-row-wrapper{
    margin: 0 !important;
    display: flex; align-items: stretch;
  }
  #Section-{{ section.id }} .icons-row-wrapper--center{ justify-content: center; }

  /* Flickity aan by default */
  #Section-{{ section.id }} .icons-row-wrapper:after{
    content: 'flickity'; display: none;
  }
  /* Desktop: slider uit */
  @media screen and (min-width: 900px){
    #Section-{{ section.id }} .icons-row-wrapper:after{ content: ''; }
  }

  /* Items */
  #Section-{{ section.id }} .icons-row__item{
    min-width: fit-content;
    width: auto;
    padding-inline: 12px;
    padding-top: 4px;
  }
  @media all and (min-width: 768px){
    #Section-{{ section.id }} .icons-row__item{ padding-inline: 18px; }
  }
  /* adem aan start/einde */
  #Section-{{ section.id }} .icons-row-wrapper .icons-row__item:first-child{ padding-left: 20px; }
  #Section-{{ section.id }} .icons-row-wrapper .icons-row__item:last-child{ padding-right: 20px; }

  /* Link als kolom → image + titel gecentreerd */
  #Section-{{ section.id }} .icons-row__link{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
  }

  /* Ronde image met outline */
  #Section-{{ section.id }} .icons-row__image{
    width: var(--icon-size-mobile) !important;
    height: var(--icon-size-mobile) !important;
    overflow: hidden;
    outline: 1px solid var(--outline);
    outline-offset: 2px;
    border-radius: 100%;
    display: grid;
    place-items: center;
    background: transparent;
  }
  @media all and (min-width: 768px){
    #Section-{{ section.id }} .icons-row__image{
      width: var(--icon-size-desktop) !important;
      height: var(--icon-size-desktop) !important;
    }
  }
  #Section-{{ section.id }} .icons-row__img{
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 100%;
    display: block;
  }

  /* Hover: outline weg zoals voorbeeld */
  #Section-{{ section.id }} .icons-row__link:hover .icons-row__image{ outline: transparent; }

  /* Itemtitel onder icon – met instelbaar font/size/weight/gap, responsief */
  #Section-{{ section.id }} h3.icons-row__title{
    font-family: var(--title-font);
    color: var(--COLOR-TEXT, var(--color)) !important;
    font-size: var(--title-size-m);
    font-weight: var(--title-weight);
    margin: var(--gap-title) 0 0;
    text-align: center;
  }
  @media all and (min-width: 768px){
    #Section-{{ section.id }} h3.icons-row__title{
      font-size: var(--title-size-d);
    }
  }

  /* Failsafe */
  #Section-{{ section.id }} .flickity-viewport{ width: 100%; }
</style>

<script>
(function(){
  function initIconsRow(){
    var section = document.getElementById('Section-{{ section.id }}');
    if(!section) return;
    var sliderEl = section.querySelector('[data-slider]');
    if(!sliderEl) return;

    var FlickityCtor = (window.themeVendor && window.themeVendor.Flickity) ? window.themeVendor.Flickity : window.Flickity;
    if(!FlickityCtor) return;

    if(sliderEl.__flickity) return;

    sliderEl.__flickity = new FlickityCtor(sliderEl, {
      fade: false,
      percentPosition: false,
      prevNextButtons: false,
      freeScroll: false,
      pageDots: false,
      draggable: true,
      autoPlay: {{ section.settings.autoplay_ms | default: 3000 | json }}, /* 0 = uit */
      cellSelector: '[data-slide]',
      contain: true,
      watchCSS: true,
      imagesLoaded: true
    });
  }

  function ready(fn){
    if(document.readyState !== 'loading'){ fn(); }
    else document.addEventListener('DOMContentLoaded', fn);
  }

  ready(initIconsRow);
  document.addEventListener('flickity:ready', initIconsRow);
  document.addEventListener('shopify:section:load', initIconsRow);
  document.addEventListener('shopify:section:select', initIconsRow);
})();
</script>

{% schema %}
{
  "name": "Icons row mobile",
  "tag": "section",
  "class": "section",
  "settings": [
    { "type": "text", "id": "heading", "label": "Hoofdtitel" },
    { "type": "checkbox", "id": "center", "label": "Centreer rij", "default": true },

    { "type": "range", "id": "pad_top", "label": "Bovenmarge (px)", "min": 0, "max": 80, "step": 2, "default": 20 },
    { "type": "range", "id": "pad_bottom", "label": "Ondermarge (px)", "min": 0, "max": 80, "step": 2, "default": 0 },

    { "type": "color", "id": "bg", "label": "Achtergrond", "default": "#fcf6f6" },
    { "type": "color", "id": "color", "label": "Tekstkleur", "default": "#333333" },
    { "type": "color", "id": "outline_color", "label": "Ronde image-outline", "default": "#111111" },

    { "type": "range", "id": "icon_size_mobile", "label": "Icon-grootte mobiel (px)", "min": 36, "max": 140, "step": 2, "default": 60 },
    { "type": "range", "id": "icon_size_desktop", "label": "Icon-grootte desktop (px)", "min": 48, "max": 180, "step": 2, "default": 76 },

    /* Itemtitel (onder iconen) */
    { "type": "range", "id": "title_size_mobile", "label": "Itemtitel grootte mobiel (px)", "min": 10, "max": 28, "step": 1, "default": 14 },
    { "type": "range", "id": "title_size_desktop", "label": "Itemtitel grootte desktop (px)", "min": 12, "max": 32, "step": 1, "default": 16 },
    {
      "type": "select",
      "id": "title_weight",
      "label": "Itemtitel gewicht",
      "options": [
        { "value": "400", "label": "Normaal (400)" },
        { "value": "500", "label": "Medium (500)" },
        { "value": "600", "label": "Semi-bold (600)" },
        { "value": "700", "label": "Bold (700)" }
      ],
      "default": "500"
    },
    {
      "type": "select",
      "id": "title_font_source",
      "label": "Itemtitel lettertype",
      "options": [
        { "value": "theme", "label": "Thema (ervan erven)" },
        { "value": "custom", "label": "Aangepast (font-family)" }
      ],
      "default": "theme"
    },
    {
      "type": "text",
      "id": "title_font_family",
      "label": "Aangepaste itemtitel font-family",
      "info": "Voorbeeld: \"Poppins\", Arial, sans-serif. Alleen gebruiken als 'Aangepast' is gekozen.",
      "default": "inherit"
    },

    /* Hoofdtitel (boven iconen) */
    { "type": "range", "id": "heading_size_mobile",  "label": "Hoofdtitel grootte mobiel (px)",  "min": 12, "max": 40, "step": 1, "default": 22 },
    { "type": "range", "id": "heading_size_desktop", "label": "Hoofdtitel grootte desktop (px)", "min": 16, "max": 64, "step": 1, "default": 36 },
    {
      "type": "select",
      "id": "heading_weight",
      "label": "Hoofdtitel gewicht",
      "options": [
        { "value": "400", "label": "Normaal (400)" },
        { "value": "500", "label": "Medium (500)" },
        { "value": "600", "label": "Semi-bold (600)" },
        { "value": "700", "label": "Bold (700)" }
      ],
      "default": "700"
    },
    {
      "type": "select",
      "id": "heading_font_source",
      "label": "Hoofdtitel lettertype",
      "options": [
        { "value": "theme", "label": "Thema (ervan erven)" },
        { "value": "custom", "label": "Aangepast (font-family)" }
      ],
      "default": "theme"
    },
    {
      "type": "text",
      "id": "heading_font_family",
      "label": "Aangepaste hoofdtitel font-family",
      "info": "Voorbeeld: \"Quincy CF\", Georgia, serif. Alleen gebruiken als 'Aangepast' is gekozen.",
      "default": "inherit"
    },

    { "type": "range", "id": "title_gap", "label": "Afstand tussen icon en itemtitel (px)", "min": 0, "max": 32, "step": 1, "default": 8 },

    { "type": "number", "id": "autoplay_ms", "label": "Autoplay (ms, 0 = uit)", "default": 3000 },
    { "type": "checkbox", "id": "reset_outer_spacing", "label": "Hard reset buitenmarges", "default": true }
  ],
  "blocks": [
    {
      "type": "icon_item",
      "name": "Item",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Afbeelding (vierkant)" },
        { "type": "text", "id": "alt", "label": "Alt-tekst" },
        { "type": "text", "id": "title", "label": "Titel", "default": "Eat" },
        { "type": "url", "id": "link", "label": "Link" }
      ]
    }
  ],
  "max_blocks": 24,
  "presets": [
    { "name": "Icons row mobile" }
  ]
}
{% endschema %}