/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:0 Unexpected "{"
Line 17:1 Expected identifier but found "%"
Line 18:0 Unexpected "{"
Line 18:1 Expected identifier but found "%"
Line 19:0 Unexpected "{"
Line 19:1 Expected identifier but found "%"
Line 20:0 Unexpected "{"
Line 20:1 Expected identifier but found "%"
... and 98 more hidden warnings

**/
{%- assign per_row = section.settings.per_row -%}
{%- assign product_limit = per_row | times: section.settings.rows -%}
{%- assign collection = collections[section.settings.home_featured_products] -%}
{%- assign mobile_scrollable = section.settings.mobile_scrollable -%}
{%- if per_row == 1 and product_limit == 1 -%}
  {%- assign mobile_scrollable = false -%}
{%- endif -%}

{%- if section.settings.divider -%}<div class="section--divider">{%- endif -%}

{%- style -%}
  #CollectionSection-{{ section.id }} .grid-product__price--savings {
    display: inline-block;
    white-space: nowrap;
    line-height: 1.4;
    vertical-align: middle;
    padding: 3px 12px;
    margin-top: 4px;
  }
{%- endstyle -%}

<div
  id="CollectionSection-{{ section.id }}"
  data-section-id="{{ section.id }}"
  data-section-type="collection-grid"
  data-context="featured-collection">
  {%- if section.settings.title != blank or section.settings.view_all -%}
    <div class="page-width">
      <div class="section-header{% if section.settings.view_all %}{% unless settings.type_headers_align_text == 'center' %} section-header--with-link{% endunless %}{% endif %}">
        <h2 class="section-header__title {{ section.settings.heading_size }}">
          {{ section.settings.title }}
        </h2>
        {%- if section.settings.view_all -%}
          {%- if section.settings.rows == 1 or section.settings.mobile_scrollable -%}
            <a href="{{ collections[section.settings.home_featured_products].url }}" class="btn btn--secondary btn--small section-header__link{% if section.settings.mobile_scrollable and section.settings.rows > 1 %} medium-up--hide{% endif %}">{{ 'collections.general.all_of_collection' | t }}</a>
          {%- endif -%}
        {%- endif -%}
      </div>
    </div>
  {%- endif -%}

  <div class="page-width{% if mobile_scrollable %} page-width--flush-small{% endif %}">
    <div{% if mobile_scrollable %} class="grid-overflow-wrapper{% if product_limit == 1 %} grid-overflow-wrapper--single{% endif %}"{% endif %}>
      <div class="grid grid--uniform"{% if mobile_scrollable %} data-aos="overflow__animation"{% endif %}>
        {%- liquid
          capture gridView
            render 'products_per_row', products_per_row: per_row, style: 'fractions'
          endcapture

          if mobile_scrollable
            assign fallback = '84vw'
          else
            assign fallback = 'variable'
          endif
        -%}

        {%- if section.settings.home_featured_products == blank or collections[section.settings.home_featured_products].empty? or collections[section.settings.home_featured_products].products_count == 0 -%}

          {%- unless emptyState -%}
            {%- assign emptyState = true -%}
          {%- endunless -%}

          <div class="grid__item">
            <div class="grid grid--uniform 1">
              {%- for i in (1..product_limit) -%}
                <div class="grid__item grid-product {{ gridView }}" data-aos="row-of-{{ per_row }}">
                  <div class="grid-product__content">
                    <a href="{{ product.url | within: collection }}" class="grid-product__link">
                      <div class="grid-product__image-mask">
                        {%- capture current -%}{% cycle 1, 2, 3, 4, 5, 6 %}{%- endcapture -%}
                        <div class="image-wrap">{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}</div>
                      </div>
                      <div class="grid-product__meta">
                        <div class="grid-product__title">{{ 'home_page.onboarding.product_title' | t }}</div>
                        <div class="grid-product__price">$29</div>
                        
                      </div>
                    </a>
                  </div>
                </div>
              {%- endfor -%}
            </div>
          </div>

        {%- else -%}

          {%- for product in collections[section.settings.home_featured_products].products limit: product_limit -%}
            {%- render 'product-grid-item',
              product: product,
              collection: collection,
              per_row: per_row,
              quick_shop_enable: settings.quick_shop_enable,
              fallback: fallback,
            -%}
          {%- endfor -%}

          {%- if section.settings.view_all -%}

            {%- if section.settings.rows > 1 -%}
              <div class="grid__item text-center{% if mobile_scrollable %} small--hide{% endif %}">
                <a href="{{ collections[section.settings.home_featured_products].url }}" class="btn">{{ 'collections.general.all_of_collection' | t }}</a>
              </div>
            {%- endif -%}

          {%- endif -%}

        {%- endif -%}
      </div>
    </div>
  </div>
</div>

{%- if section.settings.divider -%}</div>{%- endif -%}

{% schema %}
{
  "name": "t:sections.featured-collection.name",
  "class": "index-section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "t:sections.featured-collection.settings.title.label",
      "default": "Featured collection"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "t:common.heading_size.label",
      "default": "h2",
      "options": [
        {
          "value": "h3",
          "label": "t:common.heading_size.options.small.label"
        },
        {
          "value": "h2",
          "label": "t:common.heading_size.options.medium.label"
        },
        {
          "value": "h1",
          "label": "t:common.heading_size.options.large.label"
        }
      ]
    },
    {
      "type": "collection",
      "id": "home_featured_products",
      "label": "t:sections.featured-collection.settings.home_featured_products.label"
    },
    {
      "type": "range",
      "id": "per_row",
      "label": "t:sections.featured-collection.settings.per_row_desktop.label",
      "default": 4,
      "min": 1,
      "max": 5,
      "step": 1
    },
    {
      "type": "range",
      "id": "rows",
      "label": "t:sections.featured-collection.settings.rows_desktop.label",
      "default": 1,
      "min": 1,
      "max": 5,
      "step": 1
    },
    {
      "type": "checkbox",
      "id": "mobile_scrollable",
      "label": "t:sections.featured-collection.settings.mobile_scrollable.label",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "view_all",
      "label": "t:sections.featured-collection.settings.view_all.label",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "divider",
      "label": "t:sections.featured-collection.settings.divider.label",
      "default": false
    }
  ],
  "presets": [
    {
      "name": "t:sections.featured-collection.presets.featured_collection.name",
      "category": "t:sections.categories.collections"
    }
  ],
  "blocks": [],
  "disabled_on": {
    "groups": ["footer", "header", "custom.popups"]
  }
}
{% endschema %}

