/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 20:1 Expected identifier but found "%"
Line 21:10 Unexpected "{"
Line 21:19 Expected ":"
Line 22:14 Expected identifier but found whitespace
Line 22:16 Unexpected "{"
Line 22:25 Expected ":"
Line 22:76 Expected ":"
Line 23:17 Expected identifier but found whitespace
Line 23:19 Unexpected "{"
... and 67 more hidden warnings

**/
<link rel="stylesheet" data-href="{{ 'section-collection-list.css' | asset_url }}">
<link rel="stylesheet" data-href="{{ 'component-card.css' | asset_url }}">
<link rel="stylesheet" data-href="{{ 'component-slider.css' | asset_url }}">

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

{%- liquid
  assign subcollections_info = collection.metafields.custom.subcollection_list.value | parse_json
  assign columns_mobile_int = section.settings.columns_mobile | plus: 0
  assign show_mobile_slider = false

  if section.settings.swipe_on_mobile and subcollections_info.size > columns_mobile_int
    assign show_mobile_slider = true
  endif
-%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="collection-list-wrapper subcollection-list page-width isolate
              {% if show_mobile_slider %} page-width-desktop{% endif %}
              {% if section.settings.title == blank %} no-heading{% endif %}
              section-{{ section.id }}-padding">

    <div class="collection-short-desc">
      <h2>
        <span class="visually-hidden">{{ 'sections.collection_template.title' | t }}:</span>
        {{ collection.title | escape }}
      </h2>

      <div class="desktop-content">
        {{ collection.metafields.custom.collection_short_description 
          | replace: '<b>', '<b class="desc-heading">' }}
      </div>

      <div class="mobile-content">
        {{ collection.metafields.custom.collection_short_description_mobile 
          | replace: '<b>', '<b class="desc-heading">' }}
      </div>
    </div>

    <slider-component class="slider-mobile-gutter">
      <ul class="collection-list contains-card contains-card--collection
                 grid grid--{{ section.settings.columns_desktop }}-col-desktop
                 grid--{{ section.settings.columns_mobile }}-col-tablet-down
                 {% if section.settings.swipe_on_mobile %} slider slider--tablet grid--peek{% endif %}">

        {%- for subcollection in subcollections_info -%}
          {%- assign current_collection = collections[subcollection.handle] -%}
          {%- if current_collection -%}
            <li class="collection-list__item grid__item{% if show_mobile_slider %} slider__slide{% endif %}">
              {% render 'card-collection',
                card_collection: current_collection,
                media_aspect_ratio: section.settings.image_ratio,
                columns: section.settings.columns_desktop %}
            </li>
          {%- endif -%}
        {%- endfor -%}

      </ul>
    </slider-component>

  </div>
</div>

{% schema %}
{
  "name": "Collection List Custom",
  "tag": "section",
  "class": "section section-collection-list",
  "max_blocks": 15,
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        { "value": "adapt", "label": "Adapt to image" },
        { "value": "portrait", "label": "Portrait" },
        { "value": "square", "label": "Square" }
      ],
      "default": "square",
      "label": "Image ratio"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 3,
      "label": "Columns on desktop"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color scheme",
      "default": "background-1"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": false,
      "label": "Show 'View all' link"
    },
    {
      "type": "header",
      "content": "Mobile settings"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        { "value": "1", "label": "1 column" },
        { "value": "2", "label": "2 columns" }
      ],
      "default": "1",
      "label": "Columns on mobile"
    },
    {
      "type": "checkbox",
      "id": "swipe_on_mobile",
      "default": false,
      "label": "Enable swipe on mobile"
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 36,
      "label": "Top padding"
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 36,
      "label": "Bottom padding"
    }
  ],
  "blocks": [
    {
      "type": "featured_collection",
      "name": "Featured Collection",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Collection"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Collections List Custom"
    }
  ]
}
{% endschema %}