{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{%- liquid
  assign container = 'li'
  assign placeholder_int = placeholder_int | default: 1
  assign width_class = width_class | default: ''
  assign sizes = sizes | default: false
  assign slider = slider | default: false
  assign type = type | default: 'grid'
  assign no_lazyload = no_lazyload | default: false
  assign enable_image_choice = enable_image_choice | default: false
  assign img_view = img_view | default: 'first'
  if fill_images == null
    assign fill_images = settings.fill_product_images
  endif
  if quick_buy_compact == null
    assign quick_buy_compact = false
  endif
  if enable_quick_buy_drawer == null
    if settings.layout_productcard == 'quickshop'
      assign enable_quick_buy_drawer = true
    else
      assign enable_quick_buy_drawer = false
    endif
  endif
  if enable_quick_buy_desktop == null
    assign enable_quick_buy_desktop = true
  endif
  if enable_quick_buy_mobile == null
    assign enable_quick_buy_mobile = true
  endif
  if enable_quick_buy_qty_selector == null
    assign enable_quick_buy_qty_selector = false
  endif
  if enable_variant_picker == null
    assign enable_variant_picker = true
  endif
  if enable_color_picker == null
    assign enable_color_picker = settings.show_color_swatches
  endif
  if show_image == null
    assign show_image = true
    assign show_labels = true
    assign show_title = true
    assign show_price = true
    assign show_stock = true
    assign show_vendor = settings.show_vendor
    assign show_rating = settings.show_product_rating
  endif
  if layout == 'list-compact'
    assign show_labels = false
    assign show_stock = false
    assign show_vendor = false
    assign show_rating = false
  endif
  if layout == 'hotspot'
    assign show_labels = false
    assign show_image = false
    assign container = 'div'
    if product.variants.size > 1 or product.available == false
      assign enable_quick_buy_drawer = true
    endif
  endif
  assign current_variant = product.selected_or_first_available_variant
  if custom_height_ratio == null
    assign custom_height_ratio = settings.custom_product_image_ratio
  endif
  assign custom_height_ratio = custom_height_ratio | divided_by: 100.0
  assign image_width = 430
  assign image_height = image_width | times: custom_height_ratio | round
  assign image_width_2 = image_width | times: 1.5
  assign image_height_2 = image_height | times: 1.5
  assign image_width_small = image_width | divided_by: 3
  assign image_height_small = image_height | divided_by: 3
  if product == blank
    assign vendor = 'Vendor name'
    assign title = 'Product title'
    assign price = 0 | money
  else
    assign vendor = product.vendor
    if vendor == 'vendor-unknown' or vendor == shop.name
      assign show_vendor = false
    endif
    assign title = product.title
    if layout == 'list-compact'
      assign price = current_variant.price | money
    else
      assign price = product.price | money
    endif
  endif
  assign total_stock = 0
  for variant in product.variants
    if variant.matched and variant.inventory_quantity > 0
      assign total_stock = total_stock | plus: variant.inventory_quantity
    endif
  endfor
  if total_stock <= 0
    assign total_stock = current_variant.inventory_quantity
  endif
  if total_stock <= 0 and current_variant.inventory_management != null and current_variant.inventory_policy == 'continue' and current_variant.available and current_variant.inventory_quantity <= 0 and settings.preorder
    assign preorder = true
    unless settings.show_preorder_inventory
      assign show_stock = false
    endunless
  endif
  assign static_color_picker = false
  if settings.layout_productcard == 'variant_picker' or settings.layout_productcard == 'quickshop' or settings.layout_productcard == 'add_to_cart'
    assign static_color_picker = true
  elsif settings.color_swatch_behavior == 'static' and settings.layout_productcard == 'standard'
    assign static_color_picker = true
  endif
  assign overlay_static = false
  if settings.quickshop_behavior == 'static'
    if settings.layout_productcard == 'quickshop' or settings.layout_productcard == 'add_to_cart'
      assign overlay_static = true
    endif
  elsif settings.color_swatch_behavior == 'static' and settings.layout_productcard == 'standard'
    assign overlay_static = true
  endif
  assign collection_page = false
  if origin == 'collection' or origin == 'search'
    assign collection_page = true
  endif
  assign quickshop = false
  if settings.layout_productcard == 'quickshop'
    assign quickshop = true
  elsif settings.layout_productcard != 'standard'
    if layout == 'list' or layout == 'hotspot' or layout == 'grid'
      assign quickshop = true
    endif
  endif
  assign fixed_text_alignment_left = false
  if layout == 'list'
    assign fixed_text_alignment_left = true
  endif

  assign color_triggers = settings.color_swatch_name | newline_to_br | strip_newlines | replace: '<br />', '|' | split: '|'
  assign color_option = false
  if enable_color_picker
    if settings.enable_color_swatches
      for option in product.options_with_values
        if color_triggers contains option.name
          assign color_option = option
          break
        endif
      endfor
    endif
    assign colors_size = color_option.values | size
    if settings.color_swatches_single and colors_size < 2
      assign color_option = false
    endif
  endif

  assign size_triggers = settings.variant_picker_name | newline_to_br | strip_newlines | replace: '<br />', '|' | split: '|'
  assign size_option = false
  if settings.layout_productcard == 'variant_picker'
    for option in product.options_with_values
      if size_triggers contains option.name
        assign size_option = option
        assign size_option_index = forloop.index0
        break
      endif
    endfor
  endif

  if product.options_with_values.first.values.first.product_url
    assign size_option = false
  endif
  if product.variants.size == 250
    assign quickshop = true
    assign enable_color_picker = false
    assign size_option = false
  endif

  assign rating_value = false
  assign rating_count = false
  if product.metafields.syncer.reviews
    assign locale_ratings = product.metafields.syncer.reviews.value.reviews[localization.language.iso_code]
    if locale_ratings
      assign rating_value = locale_ratings.rating
      assign rating_count = locale_ratings.count
    else
      assign rating_value = product.metafields.syncer.reviews.value.cumulative_rating
      assign rating_count = product.metafields.syncer.reviews.value.total_reviews
    endif
  elsif product.metafields.reviews.rating
    assign rating_value = product.metafields.reviews.rating.value
    assign rating_count = product.metafields.reviews.rating_count
  endif
-%}
{%- if enable_quick_buy_desktop or enable_quick_buy_mobile -%}
  {%- liquid
    assign product_form_class = 'f8pr form-card ' | append: settings.productcards_text_alignment
    if settings.layout_productcard == 'variant_picker' and layout != 'list-compact'
      assign product_form_class = product_form_class | append: ' no-border'
    endif
    assign product_form_id = 'quick-add-' | append: section.id | append: product.id | append: '-quick-add-form_x'
  -%}
  {%- capture quick_buy -%}
    {%- if layout == 'list-compact' -%}
      {%- form 'product', product, id: product_form_id, class: product_form_class, novalidate: 'novalidate' -%}
        {%- assign available_variants = product.variants | where: "available" -%}
        {%- if enable_variant_picker and available_variants.size > 1 and product.variants.size < 250 -%}
          <p>
            <select name="id" id="{{ product_form_id }}-id">
              {%- for variant in product.variants -%}
                {%- unless variant.available -%}{% continue %}{%- endunless -%}
                {%- liquid
                  if variant.featured_image
                    assign product_image = variant.featured_image
                   else
                    assign product_image = product.featured_image
                  endif
                -%}
                <option
                  value="{{ variant.id }}"
                  data-variantinfo='{ {% if product_image %}"image":"{%- if fill_images -%}{{ product_image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }}{%- else -%}{{ product_image | image_url: width: image_width_2, height: image_height_2 }}{%- endif -%}",{% endif %}"price_old":"{%- if variant.compare_at_price > variant.price -%}{{ variant.compare_at_price | money }}{%- endif -%}","price":"{{ variant.price | money }}"}'
                  {% unless variant.available %}disabled data-class="disabled"{% endunless %}
                  {% if variant == current_variant %}selected{% endif %}
                >{{ variant.title }}</option>
              {%- endfor -%}
            </select>
          </p>
        {%- else -%}
          <input type="hidden" name="id" value="{{ current_variant.id }}">
        {%- endif -%}
        <p class="submit">
          <button type="submit" class="{% if preorder %}overlay-preorder m0{% elsif current_variant.available %}overlay-buy_button{% else %}overlay-unavailable-buy-button{% endif %}{% if settings.buy_button_style == 'inv' %} inv{% endif %}">
            {% if preorder %}{%- if layout == 'list-compact' -%}<i aria-hidden="true" class="icon-cart" aria-label="{{ settings.preorder_button_text }}"></i> {%- else -%}{{ settings.preorder_button_text }}{%- endif -%}{% else %}<i aria-hidden="true" class="icon-cart" aria-label="{{ 'product.form.add_to_cart' | t }}"></i> {{ 'product.form.add_to_cart' | t }}{% endif %}
          </button>
        </p>
      {%- endform -%}
    {%- else -%}
      {% if quickshop %}
        <p class="link-btn
            {% unless layout == 'list' or origin == 'complementary' %}text-end{% endunless %}
            quickshop
            {% if layout == 'list' or layout == 'hotspot' or layout == 'grid' %}
              {% if layout == 'grid' %}visible mobile-text-end{% endif %}
            {% else %}
              {% if settings.quickshop_behavior == 'static' %}visible{% endif %}
            {% endif %}
          ">
          <a href="{{ product.url }}" class="circle {% if preorder %}overlay-preorder{% else %}overlay-buy_button{% endif %}{% if settings.buy_button_style == 'inv' %} inv{% endif %}" data-quickshop aria-label="{{ 'product.form.add_to_cart' | t }}" style="--s: 45px;"><i aria-hidden="true" class="icon-cart"></i> <span class="hidden">{{ 'product.form.add_to_cart' | t }}</span></a>
        </p>
      {% elsif settings.layout_productcard == 'add_to_cart' and product.id %}
        <p class="link-btn text-end quickshop visible mobile-hide">
          <a href="{{ product.url }}" class="circle {% if preorder %}overlay-preorder{% else %}overlay-buy_button{% endif %}{% if settings.buy_button_style == 'inv' %} inv{% endif %}" data-quickshop aria-label="{{ 'product.form.add_to_cart' | t }}" style="--s: 45px;"><i aria-hidden="true" class="icon-cart"></i> <span class="hidden">{{ 'product.form.add_to_cart' | t }}</span></a>
        </p>
        {% if current_variant.available or preorder %}
          {% unless collection_page %}
            {% assign product_form_class = product_form_class %}
          {% endunless %}
          {%- form 'product', product, id: product_form_id, class: product_form_class, novalidate: 'novalidate' -%}
            {%- assign available_variants = product.variants | where: "available" -%}
            {%- if available_variants.size > 1 -%}
              <fieldset>
                <p class="submit">
                  <span class="has-select" style="--main_fz: {{ settings.product_button_fontsize }}; font-size: {{ settings.product_button_fontsize }};">
                    <select name="id" id="{{ product_form_id }}-id">
                      {%- for variant in product.variants -%}
                        {%- unless variant.available -%}{% continue %}{%- endunless -%}
                        {%- liquid
                          assign featured_media_position = variant.featured_media.position
                          unless featured_media_position
                            assign featured_media_position = 1
                          endunless

                          if variant.featured_image
                            assign product_image = variant.featured_image
                          else
                            assign product_image = product.featured_image
                          endif
                        -%}
                        <option
                          value="{{ variant.id }}"
                          data-variantinfo='{ {% if product_image %}"image":"{%- if fill_images -%}{{ product_image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }}{%- else -%}{{ product_image | image_url: width: image_width_2, height: image_height_2 }}{%- endif -%}",{% endif %}"price_old":"{%- if variant.compare_at_price > variant.price -%}{{ variant.compare_at_price | money }}{%- endif -%}","price":"{{ variant.price | money }}"}'
                          {% unless variant.available %}disabled data-class="disabled"{% endunless %}
                          {% if variant == current_variant %}selected{% endif %}
                          data-slide-to="{{ featured_media_position | minus: 1 }}"
                        >{{ variant.title }}</option>
                      {%- endfor -%}
                    </select>
                  </span>
                  <button type="submit" class="{% if preorder %}overlay-preorder m0{% elsif current_variant.available %}overlay-buy_button{% else %}overlay-unavailable-buy-button{% endif %}{% if settings.buy_button_style == 'inv' %} inv{% endif %}" aria-label="{% if preorder %}{{ settings.preorder_button_text }}{% else %}{{ 'product.form.add_to_cart' | t }}{% endif %}">
                    <span><i aria-hidden="true" class="icon-cart"></i></span>
                  </button>
                </p>
              </fieldset>
            {%- else -%}
              <p class="submit">
                <input type="hidden" name="id" value="{{ current_variant.id }}">
                <button type="submit" class="{% if preorder %}overlay-preorder m0{% elsif current_variant.available %}overlay-buy_button{% else %}overlay-unavailable-buy-button{% endif %}{% if settings.buy_button_style == 'inv' %} inv{% endif %}" aria-label="{% if preorder %}{{ settings.preorder_button_text }}{% else %}{{ 'product.form.add_to_cart' | t }}{% endif %}">
                  <span>{% if settings.cart_icon_no_text == false %}<i aria-hidden="true" class="icon-cart"></i>{% else %}{% if preorder %}{{ settings.preorder_button_text }}{% else %}{{ 'product.form.add_to_cart' | t }}{% endif %}{% endif %} {{ 'product.form.add_to_cart' | t }}</span>
                </button>
              </p>
            {%- endif -%}
          {%- endform -%}
        {% else %}
          <p class="link-btn{% unless collection_page %} {% endunless %}"><a href="{{ product.url }}" aria-label="{{ 'product.form.not_in_stock' | t }}" class="overlay-unavailable_buy_button{% if settings.buy_button_style == 'inv' %} inv{% endif %}">{{ 'product.form.not_in_stock' | t }}</a></p>
        {% endif %}
      {% elsif settings.layout_productcard == 'variant_picker' %}
        <p class="link-btn text-end quickshop visible">
          <a href="{{ product.url }}" class="circle overlay-buy_button{% if settings.buy_button_style == 'inv' %} inv{% endif %}" data-quickshop aria-label="{{ 'product.form.add_to_cart' | t }}"><i aria-hidden="true" class="icon-cart"></i> <span class="hidden">{{ 'product.form.add_to_cart' | t }}</span></a>
        </p>

        {% if size_option %}
          {%- assign product_form_class = product_form_class | append: ' hidden' -%}
          {% if size_option.values %}
            {% comment %}Redirect to product if it has a third option or color swatch is disabled and there is a second option{% endcomment %}
            {%- liquid
              assign go_to_product = false
              if color_option and product.options.size < 3
                assign go_to_product = true
              elsif color_option == false and product.options.size < 2
                assign go_to_product = true
              endif
              if enable_color_picker
                if settings.color_swatches_single and colors_size < 2
                  assign go_to_product = false
                endif
              endif
              if go_to_product
                assign product_form_class = product_form_class | append: ' product-options'
              endif
            %}
            {% assign product_form_class = product_form_class | append: ' mobile-hide' %}
            {%- form 'product', product, id: product_form_id, class: product_form_class, novalidate: 'novalidate' -%}
              <select name="id" id="id-{{ section.id }}-{{ product.id }}" data-url="{{ product.url }}" data-template="{{ section.id }}" required class="{% comment %}js-hidden{% endcomment %}" form="{{ product_form_id }}">
                {%- for variant in product.variants -%}
                  {%- liquid
                    assign featured_media_position = variant.featured_media.position
                    unless featured_media_position
                      assign featured_media_position = 1
                    endunless

                    if variant.featured_image
                      assign product_image = variant.featured_image
                    else
                      assign product_image = product.featured_image
                    endif
                  -%}
                  {% if block.settings.show_unavailable_variants == false and variant.available == false %}{% continue %}{% endif %}
                    <option
                      value="{{ variant.id }}"
                      data-variantinfo='{ {% if product_image %}"image":"{%- if fill_images -%}{{ product_image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }}{%- else -%}{{ product_image | image_url: width: image_width_2, height: image_height_2, pad_color: 'fff' }}{%- endif -%}",{% endif %}"price_old":"{%- if variant.compare_at_price > variant.price -%}{{ variant.compare_at_price | money }}{%- endif -%}","price":"{{ variant.price | money }}"}' data-options='{"id":{{ variant.id }},"options":{{ variant.options | json | escape }}}'
                          {% unless variant.available %}disabled data-class="disabled"{% endunless %}
                      data-slide-to="{{ featured_media_position | minus: 1 }}"
                    >{{ variant.title }}</option>
                {%- endfor -%}
              </select>
              <p class="submit m10 {% unless current_variant.available %}unavailable{% endunless %}">
                {%- if current_variant.available -%}
                  <button type="submit" class="overlay-buy_button{% if block.settings.button_style == 'inv' %} inv{% endif %}">{{ 'product.form.add_to_cart' | t }}</button>
                {%- else -%}
                  <button type="submit" class="disabled overlay-unavailable-buy-button{% if block.settings.button_style == 'inv' %} inv{% endif %}">{{ 'product.form.not_in_stock' | t }}</button>
                {%- endif -%}
              </p>
            {%- endform -%}

            <ul class="check inline plain text-center variant-picker mobile-hide" name="id" id="{{ product_form_id }}-id">
              {% if settings.button_label %}<li class="wide">{{ settings.button_label }}</li>{% endif %}
                {%- for value in size_option.values -%}
                  <li>
                    <input type="radio"
                           id="option-{{ product.id }}--{{ forloop.index0 }}"
                           value="{{ value.name | escape }}"
                           name="options[{{ section.id }}-{{ size_option.name | escape }}]"
                           title="{{ value.name }}"
                           data-url="{{ product.url }}"
                           data-template="{{ section.id }}"
                           form="{{ form_id }}"
                           autocomplete="off"
                    >
                    <label{% unless value.variant.available %} class="disabled-style"{% endunless %} for="option-{{ product.id }}--{{ forloop.index0 }}">
                      {{ value.name }}
                    </label>
                  </li>
                {%- endfor -%}
            </ul>

          {%  endif %}
        {% endif %}
      {% endif %}
    {%- endif -%}
  {%- endcapture %}
{%- endif -%}

{%- capture color_picker -%}
  {%- if enable_color_picker -%}
    {% if color_option %}
      <ul class="check color" data-limit="6">
        {% for color in color_option.values %}
          {%- liquid
            for variant in product.variants
              assign options = variant.options | map: 'name'
              if options contains color
                assign color_variant = variant
                break
              endif
            endfor
          -%}
          {% capture swatch %}
            {% if color_variant and color_variant.featured_media and settings.color_swatches_variant_image %}
              <img src="{{ color_variant.featured_media | image_url: width: image_width_small, height: image_height_small, crop: 'center' }}" alt="{{ color }}" width="30" height="23" loading="lazy" class="color-variant-img filled">
            {% elsif color.swatch.image %}
              <i aria-hidden="true" class="icon-circle" style="background-image: url('{{ color.swatch.image | image_url }}');"></i>
            {% elsif color.swatch.color %}
              <i aria-hidden="true" class="icon-circle" style="background-color: {{ color.swatch.color }};"></i>
            {% else %}
              <i aria-hidden="true"
                 class="icon-circle swatch-custom-color-{{ color | split: ' ' | handleize }}"
                 style="background-color:{{ color | split: ' ' | last }}"
              ></i>
            {% endif %}
          {% endcapture %}
          <li {% if color_variant and color_variant.featured_media %}
            data-img="
                  {%- if fill_images -%}
                    {{ color_variant.featured_media | image_url: width: image_width_2, height: image_height_2, crop: 'center' }}
                  {%- else -%}
                    {{ color_variant.featured_media | image_url: height: image_height_2 }}
                  {%- endif -%}
                  "
          {% endif %}
          >
            {% if settings.layout_productcard == 'variant_picker' and size_option %}
                {% comment %}Find match between color and size / add available sizes as data attribute{% endcomment %}
                {%- liquid
                  if size_option.values
                    assign data_sizes = ''
                    assign data_sizes_availability = ''

                    for variant in product.variants
                      assign options = variant.options | map: 'name'
                      if options contains color
                        assign found_size = false

                        for size in data_sizes
                          if options contains size
                            assign found_size = true
                          endif
                        endfor

                        unless found_size
                          assign data_sizes = data_sizes | append: variant.options[size_option_index] | append: '/'
                          assign data_sizes_availability = data_sizes_availability | append: variant.available | append: '/'
                        endunless
                      endif
                    endfor
                  endif
                -%}
                <input type="radio"
                     id="color-{{ product.id }}-{{ variant.id }}-{{ forloop.index0 }}"
                     value="{{ color }}"
                     name="options[{{ section.id }}-{{ product.id }}]"
                     title="{{ value }}"
                     {% if forloop.index0 == 0 %}checked{% endif %}
                     data-url="{{ product.url }}"
                     data-template="{{ section.id }}"
                     form="{{ form_id }}"
                     data-sizes="{{ data_sizes | remove_last: '/' }}"
                     data-sizes-availability="{{ data_sizes_availability | remove_last: '/' }}"
                >
                <label for="color-{{ product.id }}-{{ variant.id }}-{{ forloop.index0 }}">
                 {{ swatch }}
                </label>
            {% else %}
              <input type="radio" id="color-{{ product.id }}-{{ variant.id }}-{{ forloop.index }}" name="color-{{ product.id }}-{{ variant.id }}-{{ forloop.index }}">
              <label for="color-{{ product.id }}-{{ variant.id }}-{{ forloop.index }}">
                <a href="{% if color_variant %}{{ color_variant.url }}{% else %}{{ product.url }}{% endif %}" aria-label="{{ color }}">
                  {{ swatch }}
                </a>
              </label>
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  {%- endif -%}
{%- endcapture %}

<{{ container }}
  class="
    product-card {{ width_class }}{% if quick_buy %} has-form{% endif %}
    {% unless current_variant.available %}unavailable{% endunless %}
    {% unless layout contains 'list' or layout == 'hotspot' %}{% if settings.productcards_text_alignment == 'left' or fixed_text_alignment_left %}text-start{% elsif settings.productcards_text_alignment == 'center' %}text-center{% elsif settings.productcards_text_alignment == 'right' %}text-end{% endif %}{% endunless %}
    {% if settings.image_behaviour != 'slider' and product.media[1] != nil %}second-img-hover{% endif %}
    {% if collection_img_view != 'first' and product.media[1] != nil and collection_page %}second-img-first{% endif %}
    {% if settings.layout_productcard == 'add_to_cart' or settings.layout_productcard == 'variant_picker' %}update-variants dynamic-quickshop{% endif %}
    {% if product == blank %}placeholder-product{% endif %}
  "
  {% if layout == 'list-compact' %}
    data-product-id="{{ product.id }}"
  {% endif %}
  style="--ratio:{{ custom_height_ratio }};{% if settings.layout_productcard == 'variant_picker' %} --check_plain_bg: var(--{{ settings.variant_color_palette }}_bg); --check_plain_fg: var(--{{ settings.variant_color_palette }}_fg); --check_plain_o: {{ settings.background_opacity | divided_by: 100.0 }};{% endif %}"
>
  {%- if show_image -%}
    <figure
      class="{% if overlay_static %}overlay-static {% endif %}"
      {% if img_padding and img_vertical_position %}
        style="--img_padding:{{ img_padding }}%;--img_vertical_position:{{ img_vertical_position }}%;"
      {% endif %}
    >
      {% if show_labels %}{%- render 'product-labels', product: product, origin: 'productitem' -%}{% endif %}
      {%- liquid
        if layout == 'list-compact' and current_variant.featured_image
          assign product_image = current_variant.featured_image
        else
          assign product_image = product.featured_media
        endif
        assign first_image = product_image
        assign second_image = product.media[1]
        if collection_page and img_view == 'last'
          assign second_image = product.media | last
        elsif collection_page == false and settings.image_behaviour == 'last_image'
          assign second_image = product.media | last
        endif
        if settings.layout_productcard == 'variant_picker' and size_option
        elsif second_image != null and settings.image_behaviour != 'slider' and layout != 'list-compact'
          assign show_secondary_image = true
        elsif second_image != null and enable_image_choice
          assign show_secondary_image = true
        endif
      -%}
      {%- if product != blank and first_image -%}
        {%- if collection_page and settings.image_behaviour == 'slider' -%}
          <picture class="{% if product.media.size > 1 and settings.image_behaviour == 'slider' %}slider{% endif %}{% if settings.multiply_product_images == 'multiply' %} img-multiply{% elsif settings.multiply_product_images == 'multiply-bg' %} img-multiply-bg{% endif %}">
            {% if collection_img_view != 'first' and product.media[1] != null %}
              {% assign show_product = false %}
              {%- for image in product.media -%}
                {% if img_view == 'last' %}
                  {% if forloop.last == true %}
                    {% assign show_product = true %}
                  {% endif %}
                {% else %}
                  {% if forloop.index == 2 %}
                    {% assign show_product = true %}
                  {% else %}
                    {% assign show_product = false %}
                  {% endif %}
                {% endif %}
                {% unless show_product %}{% continue %}{% endunless %}
                {% unless layout == 'list-compact' -%}
                  <a href="{{ product.url }}" aria-label="{{ title | escape }}">
                {%- endunless %}
                <img
                  src="{%- if fill_images -%}{{ image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }}{%- else -%}{{ image | image_url: height: image_height_2 }}{%- endif -%}"
                  {%- if sizes -%}
                    srcset="
                      {%- if fill_images -%}
                        {%- render 'image-srcset', image: image, format: 'custom', image_height: custom_height_ratio, max_width: 640, crop: 'center' -%}
                      {%- else -%}
                        {%- render 'image-srcset', image: image, max_width: 640 -%}
                      {%- endif -%}
                    "
                    sizes="{{ sizes }}"
                  {%- else -%}
                    srcset="
                      {%- if fill_images -%}
                        {{ first_image | image_url: width: image_width, height: image_height, crop: 'center' }} 1x, {{ image | image_url: height: image_height_2, crop: 'center' }} 2x
                      {%- else -%}
                        {{ first_image | image_url: height: image_height }} 1x, {{ image | image_url: height: image_height_2 }} 2x
                      {%- endif -%}
                    "
                  {%- endif -%}
                  width="{{ image_width }}"
                  height="{{ image_height }}"
                  alt="{{ image.alt | default: product.title | escape }}"
                  loading="{% if section.index > 2 or no_lazyload == false or section.location == 'footer' %}lazy{% else %}eager{% endif %}"
                  data-index="2"
                  class="second-first{% if fill_images %} filled{% endif %}"
                >
                {% unless layout == 'list-compact' %}</a>{% endunless %}
              {%- endfor -%}
            {% endif %}
            {% assign show_product = true %}
            {% if img_view == 'last' and collection_img_view == 'first' %}
              {% assign product_images_size = product.media | size | minus: 1 %}
              {% assign product_image_first = product.media | slice: 0 %}
              {% assign product_image_last = product.media | slice: product_images_size %}
              {% assign product_images_new = product_image_first | concat: product_image_last %}
              {% if product_images_size > 1 %}
                {% assign product_rest_size = product_images_size | minus: 1 %}
                {% assign product_image_rest = product.media | slice: 1, product_rest_size %}
                {% assign product_images_new = product_images_new | concat: product_image_rest %}
              {% endif %}
            {% else %}
              {% assign product_images_new = product.media %}
            {% endif %}
            {%- for image in product_images_new -%}
              {% if collection_img_view != 'first' %}
                {% if img_view == 'last' %}
                  {% if forloop.last == true %}
                    {% assign show_product = false %}
                  {% endif %}
                {% elsif img_view == 'second' %}
                  {% if forloop.index == 2 %}
                    {% assign show_product = false %}
                  {% else %}
                    {% assign show_product = true %}
                  {% endif %}
                {% endif %}
              {% elsif img_view == 'last' %}

              {% endif %}
              {% unless show_product %}{% continue %}{% endunless %}
              {% unless layout == 'list-compact' %}<a href="{{ product.url }}">{% endunless %}
              <img
                src="{%- if fill_images -%}{{ image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }}{%- else -%}{{ image | image_url: height: image_height_2 }}{%- endif -%}"
                {%- if sizes -%}
                  srcset="
                    {%- if fill_images -%}
                      {%- render 'image-srcset', image: image, format: 'custom', image_height: custom_height_ratio, max_width: 640, crop: 'center' -%}
                    {%- else -%}
                      {%- render 'image-srcset', image: image, max_width: 640 -%}
                    {%- endif -%}
                  "
                  sizes="{{ sizes }}"
                {%- else -%}
                  srcset="
                    {%- if fill_images -%}
                      {{ first_image | image_url: width: image_width, height: image_height, crop: 'center' }} 1x, {{ image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }} 2x
                    {%- else -%}
                      {{ first_image | image_url: height: image_height }} 1x, {{ image | image_url: height: image_height_2 }} 2x
                    {%- endif -%}
                  "
                {%- endif -%}
                width="{{ image_width }}"
                height="{{ image_height }}"
                alt="{{ image.alt | default: product.title | escape }}"
                loading="{% if section.index > 2 or no_lazyload == false or forloop.first == false or section.location == 'footer' %}lazy{% else %}eager{% endif %}"
                data-index="{{ forloop.index }}"
                {% if fill_images %}
                  class="filled"
                {% endif %}
              >
              {% unless layout == 'list-compact' %}</a>{% endunless %}
            {%- endfor -%}
          </picture>
        {%- else -%}
          {% unless layout == 'list-compact' %}<a href="{{ product.url }}">{% endunless %}
          <picture class="{% if settings.multiply_product_images == 'multiply' %}img-multiply{% elsif settings.multiply_product_images == 'multiply-bg' %}img-multiply-bg{% endif %}">
            <img
              src="{%- if fill_images -%}{{ first_image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }}{%- else -%}{{ first_image | image_url: height: image_height_2 }}{%- endif -%}"
              {%- if sizes -%}
                srcset="
                  {%- if fill_images -%}
                    {%- render 'image-srcset', image: first_image, format: 'custom', image_height: custom_height_ratio, max_width: 640, crop: 'center' -%}
                  {%- else -%}
                    {%- render 'image-srcset', image: first_image, max_width: 640 -%}
                  {%- endif -%}
                "
                sizes="{{ sizes }}"
              {%- else -%}
                srcset="
                  {%- if fill_images -%}
                    {{ first_image | image_url: width: image_width, height: image_height, crop: 'center' }} 1x, {{ first_image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }} 2x
                  {%- else -%}
                    {{ first_image | image_url: height: image_height }} 1x, {{ first_image | image_url: height: image_height_2 }} 2x
                  {%- endif -%}
                "
              {%- endif -%}
              width="{{ image_width }}"
              height="{{ image_height }}"
              alt="{{ first_image.alt | default: product.title | escape }}"
              loading="{% if section.index > 2 or no_lazyload == false or forloop.first == false or section.location == 'footer' %}lazy{% else %}eager{% endif %}"
              {% if fill_images %}
                class="filled"
              {% endif %}
            >
          </picture>
          {% if show_secondary_image and settings.image_behaviour != 'slider' %}
            <picture class="{% if settings.multiply_product_images == 'multiply' %}img-multiply{% elsif settings.multiply_product_images == 'multiply-bg' %}img-multiply-bg{% endif %}">
              <img
                src="{%- if fill_images -%}{{ second_image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }}{%- else -%}{{ second_image | image_url: height: image_height_2 }}{%- endif -%}"
                {%- if sizes -%}
                  srcset="
                    {%- if fill_images -%}
                      {%- render 'image-srcset', image: second_image, format: 'custom', image_height: custom_height_ratio, max_width: 640, crop: 'center' -%}
                    {%- else -%}
                      {%- render 'image-srcset', image: second_image, max_width: 640 -%}
                     {%- endif -%}
                  "
                  sizes="{{ sizes }}"
                {%- else -%}
                  srcset="
                    {%- if fill_images -%}
                      {{ second_image | image_url: width: image_width, height: image_height, crop: 'center' }} 1x, {{ second_image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }} 2x
                    {%- else -%}
                      {{ second_image | image_url: height: image_height }} 1x, {{ second_image | image_url: height: image_height_2 }} 2x
                    {%- endif -%}
                  "
                {%- endif -%}
                width="{{ image_width }}"
                height="{{ image_height }}"
                alt="{{ second_image.alt | default: product.title | escape }}"
                loading="lazy"
                {% if fill_images %}
                  class="filled"
                {% endif %}
              >
            </picture>
          {% endif %}
          {% unless layout == 'list-compact' %}</a>{% endunless %}
        {%- endif -%}
      {%- elsif product.media[0].media_type == 'video' or product.media[0].media_type == 'external_video' -%}
        {% unless layout == 'list-compact' %}<a href="{{ product.url }}">{% endunless %}
        <picture class="{% if settings.multiply_product_images == 'multiply' %}img-multiply{% elsif settings.multiply_product_images == 'multiply-bg' %}img-multiply-bg{% endif %}">
          <img
            src="{{ product.media[0].preview_image | image_url: width: image_width_2, height: image_height_2 }}"
            srcset="
              {%- if fill_images -%}
                {{ product.media[0].preview_image | image_url: width: image_width, height: image_height, crop: 'center' }} 1x, {{ product.media[0].preview_image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }} 2x
              {%- else -%}
                {{ product.media[0].preview_image | image_url: height: image_height }} 1x, {{ product.media[0].preview_image | image_url: height: image_height_2 }} 2x
              {%- endif -%}
            "
            width="{{ image_width }}"
            height="{{ image_height }}"
            alt="{{ product.title }}"
            loading="lazy"
            {% if fill_images %}
              class="filled"
            {% endif %}
          >
        </picture>
        {% unless layout == 'list-compact' %}</a>{% endunless %}
      {% else %}
        <picture class="{% if settings.multiply_product_images == 'multiply' %}img-multiply{% elsif settings.multiply_product_images == 'multiply-bg' %}img-multiply-bg{% endif %}"
          ><a href="{{ product.url }}">
            {{- 'product-' | append: placeholder_int | placeholder_svg_tag: 'placeholder-svg' -}}
          </a></picture
        >
      {%- endif -%}
      {%- if static_color_picker == false -%}
        {{ color_picker }}
      {%- endif -%}
      <button
        class="wishlist-productcard hidden"
        title="Wishlist"
        data-product-id="{{ product.id }}"
        data-variant-id="{{ current_variant.id }}"
      >
        <i class="icon-heart-outline"></i>
      </button>
      {% comment %} {%- if quick_buy
        and layout != 'list-compact'
        and settings.layout_productcard != 'standard'
        and layout != 'list'
      -%}
        {{ quick_buy | replace: '-quick-add-form_x', '1' }}
      {%- endif -%} {% endcomment %}
    </figure>
  {%- endif -%}
  {% if layout == 'list-compact' %}<section>{% else %}<div>{% endif %}
  {%- if show_title or show_vendor -%}
    <h3
      {% unless show_vendor %}
        class="p0"
      {% endunless %}
    >
      {%- if show_vendor -%}
        <span class="small">
          {{ vendor }}
        </span>
      {%- endif -%}
      {%- if show_title -%}
        <a href="{{ product.url }}" class="product-card-title">{{ title }}</a>
      {%- endif -%}
      {%- if layout == 'list-compact' and product.has_only_default_variant == false -%}
        {% if enable_variant_picker == false or enable_variant_picker and available_variants.size == 1 %}
          <span class="small">
            {{ current_variant.title }}
          </span>
        {%- endif -%}
      {%- endif -%}
    </h3>
  {%- endif -%}
  {%- if rating_value and show_rating -%}
    <p class="r6rt" data-val="{{ rating_value }}" data-of="5">
      <a href="{{ product.url }}">
        {%- if rating_count -%}
          {{ rating_count }}
          <span>{{ 'product.reviews.count' | t: count: rating_count }}</span>
        {%- endif -%}
      </a>
    </p>
  {%- endif -%}
  {%- if show_stock -%}
    {%- render 'product-deliverytime',
      product: product,
      show_stock: false,
      current_variant: current_variant,
      container: 'p',
      extra_class: 'list-hide',
      origin: 'productitem'
    -%}
  {%- endif -%}
  {%- if show_price -%}
    <p class="price s1pr yagi">
      {%- liquid
        comment
          start Yagi app code
        endcomment
        assign product_price_min = product.price_min
        assign product_price_max = product.price_max
        assign current_variant_price = current_variant.price
        assign current_variant_compare_at_price = current_variant_compare_at_price

        assign public_or_tags_matched = true

        if product.metafields.app--168074346497.segment_tags.value.size > 0
          assign public_or_tags_matched = false
        endif

        for etag in product.metafields.app--168074346497.segment_tags.value
          if customer.tags contains etag
            assign public_or_tags_matched = true
            break
          endif
        endfor

        if public_or_tags_matched
          assign current_variant_price = current_variant.metafields.app--168074346497.auto_discounted_price.value | default: current_variant.price
          assign current_variant_compare_at_price = current_variant.compare_at_price

          assign product_price_min = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price_min
          
          if shop.metafields.app--168074346497.discount_percentage.value > 0.005
            assign discount_percentage = shop.metafields.app--168074346497.discount_percentage.value | times: 1.0
            assign deducted_percentage = 1.0 | minus: discount_percentage
            assign current_variant_price = current_variant.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
          endif

          if current_variant_price < current_variant.price and current_variant_compare_at_price == 0 or current_variant_compare_at_price == blank
            assign current_variant_compare_at_price = current_variant.price
          endif

          if layout == 'list-compact'
            assign price = current_variant_price | money
          else
            assign price = product_price_min | money
          endif
        endif

        assign price_min = product_price_min | money
        assign price_max = product_price_max | money

        comment
          end Yagi app code
        endcomment
      -%}

      {%- if product.price_varies and settings.show_price_varies and layout != 'list-compact' -%}
        
        {{ price_min -}}
        <span class="price-varies">&nbsp;- {{ price_max }}</span>
      {%- else -%}
        {%- if current_variant_compare_at_price > current_variant_price -%}
          <span class="old-price">{{ current_variant_compare_at_price | money }}</span>&nbsp;
        {%- endif -%}
        {{ price }}
      {%- endif -%}
      {%- if current_variant.unit_price_measurement -%}
        <span class="small">
          {{ 'product.unit_price_label' | t }}&nbsp;{{ current_variant.unit_price | unit_price_with_measurement: current_variant.unit_price_measurement }}
        </span>
      {%- endif -%}
    </p>
  {%- endif -%}

{%- if quick_buy
  and layout != 'list-compact'
  and settings.layout_productcard != 'standard'
  and layout != 'list'
-%}
  <div class="product-card-add-to-cart">
    {{ quick_buy | replace: '-quick-add-form_x', '1' }}
  </div>
{%- endif -%}


  {%- if color_picker and static_color_picker -%}
    {{ color_picker }}
  {%- endif -%}
  {% if layout == 'list-compact' %}
    <section>
  {% elsif settings.layout_productcard != 'variant_picker' %}
    <div class="static">
  {% endif %}

  {% if quick_buy %}
    {% if layout == 'hotspot' or layout == 'list' or layout == 'grid' %}
      {{ quick_buy | replace: '-quick-add-form_x', '1' }}
    {% endif %}
  {% endif %}

  {% comment %}
    {%- if quick_buy and settings.layout_productcard != 'variant_picker' -%}
      {% if layout == 'list-compact' %}<footer>{% endif %}
      {{ quick_buy | replace: '-quick-add-form_x', '2' }}
      {% if layout == 'list-compact' %}</footer>{% endif %}
    {%- endif -%}
  {% endcomment %}
  {%- if quick_buy and layout == 'list-compact' -%}
    <footer>
      {{ quick_buy | replace: '-quick-add-form_x', '2' }}
    </footer>
  {%- endif -%}
  {% if layout == 'list-compact' %}
    </section>
  {% elsif settings.layout_productcard != 'variant_picker' %}
    </div>
  {% endif %}
</{{ container }}>