{% comment %}
  Renders a product card

  Accepts:
  - card_product: {Object} Product Liquid object (optional)
  - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
  - image_shape: {String} Image mask to apply to the product image card. Values are "arch", "blob", "chevronleft", "chevronright", "diamond", "parallelogram", and "round". (optional)
  - show_secondary_image: {String} Show the secondary image on hover. Values are "inherit" and "disabled". Default: inherit (optional)
  - show_carousel: {String} Show the product image carousel. Values are "inherit" and "disabled". Default: inherit (optional)
  - show_vendor: {Boolean} Show the product vendor. Default: false
  - show_rating: {Boolean} Show the product rating. Default: false
  - show_price: {Boolean} Show the product price. Default: True
  - custom_badge_label: {String} Custom label for the badge
  - extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
  - skip_styles: {Boolean} Don't include component styles. Useful when rendering multiple product cards in a loop. Default: false (optional)
  - quick_add: {Boolean} Show the quick add button.
  - section_id: {String} The ID of the section that contains this card.
  - horizontal_class: {Boolean} Add a card--horizontal class if set to true. Default: false (optional)
  - horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)
  - placeholder_image: {String} The placeholder image to use when no product exists. Default: 'product-apparel-2' (optional)

  Usage:
  {% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{% liquid
  if hide_price == blank
    assign hide_price = false
  endif

  if show_sold_out_badge == blank
    assign show_sold_out_badge = false
  endif

  if show_sale_badge == blank
    assign show_sale_badge = false
  endif
%}

{% comment %} hide for professionals {% endcomment %}
{% assign is_pro_customer = false %}

{% if customer %}
  {% if customer.tags contains 'Pro level 1'
    or customer.tags contains 'Pro level 2'
    or customer.tags contains 'Pro level 3' %}
    {% assign is_pro_customer = true %}
  {% endif %}
{% endif %}

{% assign is_professional_product = false %}
{% for c in card_product.collections %}
  {% if c.handle == 'professional-use' %}
    {% assign is_professional_product = true %}
    {% break %}
  {% endif %}
{% endfor %}

{% if media_aspect_ratio %}
  {% if media_aspect_ratio != 'inherit' %}
    {% assign image_aspect_ratio = media_aspect_ratio %}
    {% if media_aspect_ratio == 'circle' %}
      {% assign image_aspect_ratio = '100%' %}
    {% endif %}
    {% style %}
      #shopify-section-{{ section.id }}{
        --dbtfy-image-crop-ratio: {{ image_aspect_ratio }};
      }
    {% endstyle %}
  {% else %}
    {% assign media_aspect_ratio = settings.dbtfy_product_image_crop_ratio %}
  {% endif %}
{% endif %}

{% if image_crop_position and image_crop_position != 'inherit' %}
  {% style %}
    #shopify-section-{{ section.id }}{
      --dbtfy-image-crop-position: {{ image_crop_position }};
    }
  {% endstyle %}
{% endif %}

{%- unless skip_styles -%}
  {{ 'component-rating.css' | asset_url | stylesheet_tag }}
  {{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}

  {{ 'component-price.css' | asset_url | stylesheet_tag }}
  {{ 'quick-order-list.css' | asset_url | stylesheet_tag }}
  {{ 'quantity-popover.css' | asset_url | stylesheet_tag }}
{%- endunless -%}
{%- if card_product and card_product != empty -%}
  {%- liquid
    if show_secondary_image == 'inherit' and settings.dbtfy_show_second_image_on_hover
      assign show_secondary_image = true
    else
      assign show_secondary_image = false
    endif

    if show_carousel == 'inherit' and settings.dbtfy_show_product_card_carousel
      assign show_carousel = true
    else
      assign show_carousel = false
    endif
  -%}
  <div class="card-wrapper product-card-wrapper underline-links-hover">
    <div
      class="
        card card--{{ settings.card_style }}
        {% if card_product.featured_media %} card--media{% else %} card--text{% endif %}
        {% if settings.card_style == 'card' %} color-{{ settings.card_custom_color_scheme }} dbtfy-color-{{ settings.card_color_scheme }} gradient{% endif %}
        {% if image_shape and image_shape != 'default' %} card--shape{% endif %}
        {% if extend_height %} card--extend-height{% endif %}
        {% if card_product.featured_media == nil and settings.card_style == 'card' %} ratio{% endif %}
        {% if horizontal_class %} card--horizontal{% endif %}
         image--ratio
      "
    >
      <div
        class="card__inner ratio{% if card_product.featured_media or settings.card_style == 'standard' %} image--ratio{% endif %}"
      >
        <product-card-slider
          data-show-secondary-image="{{ show_secondary_image }}"
          data-size="{{ card_product.media | size }}"
          data-selector="{{ card_product.id }}"
          data-show-carousel="{{ show_carousel }}"
        >
          {%- if card_product.featured_media -%}
            <div class="card__media{% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_custom_color_scheme }} dbtfy-color-{{ settings.card_color_scheme }} gradient{% endif %}">
              <div class="media media--transparent media-{{ media_aspect_ratio }}">
                {% unless show_carousel and show_secondary_image %}
                  {% if card_product.featured_media.media_type == 'video'
                    or card_product.featured_media.media_type == 'external_video'
                  %}
                    {% assign media = card_product.featured_media %}
                    {%- liquid
                      capture video_media
                        case media.media_type
                          when 'external_video'
                            assign video_class = 'js-' | append: media.host
                            if media.host == 'youtube'
                              echo media | external_video_url: autoplay: false, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: 'lazy'
                            else
                              echo media | external_video_url: autoplay: false, loop: loop | external_video_tag: class: video_class, loading: 'lazy'
                            endif
                          when 'video'
                            echo media | media_tag: image_size: '2048x', autoplay: true, muted: true, loop: loop, controls: false, preload: 'none', class: 'motion-reduce'
                          when 'model'
                            echo media | media_tag: image_size: '2048x', toggleable: true
                        endcase
                      endcapture
                    -%}
                    {{ video_media }}
                  {% else %}
                    <img
                      srcset="
                        {%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
                        {%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
                        {%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
                        {%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
                        {%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
                        {%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
                        {{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
                      "
                      src="{{ card_product.featured_media | image_url: width: 533 }}"
                      sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                      alt="{{ card_product.featured_media.alt | escape }}"
                      class="motion-reduce"
                      width="{{ card_product.featured_media.width }}"
                      height="{{ card_product.featured_media.height }}"
                    >
                  {% endif %}
                {% endunless %}

                {% comment %} {{ card_product.media | size }} {% endcomment %}
                {% if show_carousel %}
                  {% for media in card_product.media %}
                    {% comment %} {% if media.id != card_product.featured_media.id %} {% endcomment %}
                    {% if media.media_type == 'video' or media.media_type == 'external_video' %}
                      {%- liquid
                        capture video_media
                          case media.media_type
                            when 'external_video'
                              assign video_class = 'js-' | append: media.host
                              if media.host == 'youtube'
                                echo media | external_video_url: autoplay: false, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: 'lazy'
                              else
                                echo media | external_video_url: autoplay: false, loop: loop | external_video_tag: class: video_class, loading: 'lazy'
                              endif
                            when 'video'
                              echo media | media_tag: image_size: '2048x', autoplay: true, muted: true, loop: loop, controls: false, preload: 'none', data-product-id: card_product.id, data-counter: forloop.index, class: 'hidden'
                            when 'model'
                              echo media | media_tag: image_size: '2048x', toggleable: true
                          endcase
                        endcapture
                      -%}
                      {{ video_media }}
                    {% else %}
                      <img
                        srcset="
                          {%- if media.width >= 165 -%}{{ media | image_url: width: 165 }} 165w,{%- endif -%}
                          {%- if media.width >= 360 -%}{{ media | image_url: width: 360 }} 360w,{%- endif -%}
                          {%- if media.width >= 533 -%}{{ media | image_url: width: 533 }} 533w,{%- endif -%}
                          {%- if media.width >= 720 -%}{{ media | image_url: width: 720 }} 720w,{%- endif -%}
                          {%- if media.width >= 940 -%}{{ media | image_url: width: 940 }} 940w,{%- endif -%}
                          {%- if media.width >= 1066 -%}{{ media | image_url: width: 1066 }} 1066w,{%- endif -%}
                          {{ media | image_url }} {{ media.width }}w
                        "
                        data-product-id="{{ card_product.id }}"
                        data-counter="{{ forloop.index }}"
                        src="{{ media | image_url: width: 533 }}"
                        sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                        alt="{{ media.alt | escape }}"
                        class="motion-reduce hidden"
                        width="{{ media.width }}"
                        height="{{ media.height }}"
                        media-id="{{ media.id }}"
                      >
                    {% endif %}
                    {% comment %} {% endif %} {% endcomment %}
                  {% endfor %}
                {% endif %}

                {%- if card_product.media[1] != null and show_secondary_image and show_carousel == false -%}
                  {% assign media = card_product.media[1] %}
                  {% if media.media_type == 'video' or media.media_type == 'external_video' %}
                    {%- liquid
                      capture video_media
                        case media.media_type
                          when 'external_video'
                            assign video_class = 'js-' | append: media.host
                            if media.host == 'youtube'
                              echo media | external_video_url: autoplay: false, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: 'lazy'
                            else
                              echo media | external_video_url: autoplay: false, loop: loop | external_video_tag: class: video_class, loading: 'lazy'
                            endif
                          when 'video'
                            echo media | media_tag: image_size: '2048x', autoplay: true, muted: true, loop: loop, controls: false, preload: 'none', class: 'motion-reduce'
                          when 'model'
                            echo media | media_tag: image_size: '2048x', toggleable: true
                        endcase
                      endcapture
                    -%}
                    {{ video_media }}
                  {% else %}
                    <img
                      srcset="
                        {%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
                        {%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
                        {%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
                        {%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
                        {%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
                        {%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
                        {{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w
                      "
                      src="{{ card_product.media[1] | image_url: width: 533 }}"
                      sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                      alt=""
                      class="motion-reduce"
                      loading="lazy"
                      width="{{ card_product.media[1].width }}"
                      height="{{ card_product.media[1].height }}"
                    >
                  {%- endif -%}
                {%- endif -%}
              </div>
            </div>
          {%- endif -%}
          <div class="card__content">
            <div class="card__information">
              <h3
                class="card__heading"
                {% if card_product.featured_media == null and settings.card_style == 'standard' %}
                  id="title-{{ section_id }}-{{ card_product.id }}"
                {% endif %}
              >
                <a
                  href="{{ card_product.url }}"
                  id="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }}"
                  class="full-unstyled-link"
                  aria-labelledby="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }} NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                >
                  {{ card_product.title | escape }}
                </a>
              </h3>
            </div>
            <div class="card__badge {{ settings.badge_position }}">
              {% liquid
              assign card_product_compare_at_price = card_product.compare_at_price
              assign card_product_price = card_product.price

              comment
                start Yagi app code
              endcomment
              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 card_product_price = card_product.metafields.app--168074346497.min_auto_discounted_price.value | default: card_product.price

                if card_product.metafields.app--168074346497.discount_percentage.value > 0.01
                  assign deducted_percentage = 1.0 | minus: card_product.metafields.app--168074346497.discount_percentage.value

                  assign card_product_price = card_product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil

                  assign card_product_compare_at_price = card_product.price

                  if card_product.compare_at_price > card_product_compare_at_price
                    assign card_product_compare_at_price = card_product.compare_at_price
                  endif
                endif

                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 card_product_price = card_product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil

                  assign card_product_compare_at_price = card_product.price

                  if card_product.compare_at_price > card_product_compare_at_price
                    assign card_product_compare_at_price = card_product.compare_at_price
                  endif
                endif
                
                if card_product_price < card_product.price and card_product_compare_at_price == blank
                  assign card_product_compare_at_price = card_product.price
                endif
              endif

              comment
                end Yagi app code
              endcomment
            %}
              {%- if card_product.available == false -%}
                {% unless show_sold_out_badge %}
                  <span
                    id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                    class="badge dbtfy-sold-out-badge"
                  >
                    {%- if settings.sold_out_badge_text != blank -%}
                      {{- settings.sold_out_badge_text -}}
                    {%- else -%}
                      {{- 'products.product.sold_out' | t -}}
                    {%- endif -%}
                  </span>
                {% endunless %}
              {%- elsif card_product_compare_at_price > card_product_price
                and card_product.available
                and show_sale_badge == false
              -%}
                {% if settings.dbtfy_discount_saved and section.settings.custom_badge_label == blank %}
                  {% render 'dbtfy-discount-saved',
                    product_compare_price: card_product_compare_at_price,
                    product_price: card_product_price
                  %}
                {% elsif section.settings.custom_badge_label == blank %}
                  <span
                    id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                    class="badge dbtfy-sale-badge"
                  >
                    {%- if settings.sale_badge_text != blank -%}
                      {{- settings.sale_badge_text -}}
                    {%- else -%}
                      {{- 'products.product.on_sale' | t -}}
                    {%- endif -%}
                  </span>
                {% endif %}
              {%- endif -%}
              {% if section.settings.custom_badge_label != blank %}
                <span
                  class="badge dbtfy-sale-badge"
                  style="color:{{ section.settings.custom_badge_color }};background-color:{{section.settings.custom_badge_bg_color }};"
                >
                  {% render 'material-icon', icon: custom_badge_icon %}
                  {{- section.settings.custom_badge_label -}}
                </span>
              {% endif %}
            </div>
            <div class="card__badge flex flex-column dbtfy-badges {% if settings.badge_position == 'top right' %}top left{% else %}top right{% endif %}">
              {% if settings.dbtfy_wish_list %}
                {% render 'dbtfy-wishlist-badge',
                  product_url: card_product.url,
                  dbtfy_wish_list_hover: settings.dbtfy_wish_list_hover
                %}
              {% endif %}
              {% if settings.dbtfy_quick_compare %}
                {% render 'dbtfy-compare-badge',
                  product_url: card_product.url,
                  dbtfy_compare_hover: settings.dbtfy_quick_compare_hover
                %}
              {% endif %}

              {% if settings.dbtfy_quick_view %}
                {% assign quick_add_modal = true %}
                <modal-opener class="quick-view-opener" data-modal="#QuickAdd-{{ card_product.id }}">
                  <button
                    class="quickview-badge badge {% if settings.dbtfy_quick_view_hover %} hidden{% endif %}"
                    data-product-url="{{ card_product.url }}"
                  >
                    {% render 'material-icon', icon: 'visibility' %}
                    {%- render 'loading-spinner' -%}
                  </button>
                </modal-opener>
              {% endif %}
            </div>
            {% if show_carousel %}
              <div class="card__badge flex flex-column dbtfy-badges bottom left">
                {% render 'dbtfy-arrow-prev', custom_selector: card_product.id, class: 'hidden' %}
              </div>
              <div class="card__badge flex flex-column dbtfy-badges bottom right">
                {% render 'dbtfy-arrow-next', custom_selector: card_product.id, class: 'hidden' %}
              </div>
            {% endif %}
          </div>
        </product-card-slider>
      </div>
      <div class="card__content">
        {% comment %}
          {% for options in card_product.options %}
            <p>
              {{ options | json }}
            </p>
          {% endfor %}

          {% for variant in card_product.variants -%}
            {% for option in variant.options -%}
              {{ option }}
            {%- endfor %}
          {%- endfor %}
        {% endcomment %}

        <div class="card__information">
          {%- if show_vendor and list_type -%}
            <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
            <div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
          {%- endif -%}
          <h3
            class="card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} {% if list_type %}h3{% else %} h5 {% endif %}  {% endif %}"
            {% if card_product.featured_media or settings.card_style == 'card' %}
              id="title-{{ section_id }}-{{ card_product.id }}"
            {% endif %}
          >
            <a
              href="{{ card_product.url }}"
              id="CardLink-{{ section_id }}-{{ card_product.id }}"
              class="full-unstyled-link"
              aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}"
            >
              {{ card_product.title | escape }}
            </a>
          </h3>
          <div class="card-information">
            {%- if show_vendor and list_type == false -%}
              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
              <div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
            {%- endif -%}

            <span class="caption-large light">{{ block.settings.description | escape }}</span>

            {%- if show_rating -%}
              {%- render 'product-rating', product: card_product, position: 'product_grid' -%}
            {%- endif -%}
            {% if show_description and card_product.description != blank %}
              <div class="card__description rte">
                {{ card_product.description }}
              </div>
            {% endif %}
            {% comment %} {% unless section.settings.hide_price_and_cart %}
              {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
            {% endunless %} {% endcomment %}


            {% assign show_price = false %}

            {% if customer %}
              {% if customer.tags contains 'Pro level 1'
                or customer.tags contains 'Pro level 2'
                or customer.tags contains 'Pro level 3'
              %}
                {% assign show_price = true %}
              {% endif %}
            {% endif %}

            {% if is_professional_product == false or is_pro_customer %}
              {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
            {% else %}
              <div class="price-hidden-message">
                {% comment %} <a href="/account/login">Login to see prices</a> {% endcomment %}
              </div>
            {% endif %}


            {%- if card_product.quantity_price_breaks_configured? -%}
              {% if card_product.variants.size == 1 and quick_add == 'bulk' %}
                {% liquid
                  assign quantity_rule = card_product.selected_or_first_available_variant.quantity_rule
                  assign has_qty_rules = false
                  if quantity_rule.increment > 1 or quantity_rule.min > 1 or quantity_rule.max != null
                    assign has_qty_rules = true
                  endif
                %}
                <quantity-popover>
                  <button class="card__information-volume-pricing-note card__information-volume-pricing-note--button card__information-volume-pricing-note--button-{{ settings.card_text_alignment }} quantity-popover__info-button--icon-only button button button--tertiary medium-hide small-hide">
                    <span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
                  </button>
                  <button class="card__information-volume-pricing-note card__information-volume-pricing-note--button card__information-volume-pricing-note--button-{{ settings.card_text_alignment }} quantity-popover__info-button--icon-with-label button button--tertiary large-up-hide">
                    <span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
                  </button>
              {% else %}
                <div class="card__information-volume-pricing-note">
                  <span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
                </div>
              {% endif %}
              {% if card_product.variants.size == 1 and quick_add == 'bulk' %}
                <div
                  class="global-settings-popup quantity-popover__info"
                  tabindex="-1"
                  hidden
                  id="quantity-popover-info-{{ card_product.selected_or_first_available_variant.id }}"
                >
                  {%- if has_qty_rules -%}
                    <div class="quantity__rules caption no-js-hidden">
                      {%- if quantity_rule.increment > 1 -%}
                        <span class="divider">
                          {{- 'products.product.quantity.multiples_of' | t: quantity: quantity_rule.increment -}}
                        </span>
                      {%- endif -%}
                      {%- if quantity_rule.min > 1 -%}
                        <span class="divider">
                          {{- 'products.product.quantity.min_of' | t: quantity: quantity_rule.min -}}
                        </span>
                      {%- endif -%}
                      {%- if quantity_rule.max != null -%}
                        <span class="divider">
                          {{- 'products.product.quantity.max_of' | t: quantity: quantity_rule.max -}}
                        </span>
                      {%- endif -%}
                    </div>
                  {%- endif -%}
                  <button
                    class="button-close button button--tertiary large-up-hide"
                    type="button"
                    aria-label="{{ 'accessibility.close' | t }}"
                  >
                    {{- 'icon-close.svg' | inline_asset_content -}}
                  </button>
                  {%- if card_product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
                    <volume-pricing class="parent-display">
                      <ul class="list-unstyled">
                        <li>
                          <span>{{ card_product.selected_or_first_available_variant.quantity_rule.min }}+</span>
                          {%- assign price = card_product.selected_or_first_available_variant.price
                            | money_with_currency
                          -%}
                          <span>{{ 'sections.quick_order_list.each' | t: money: price }}</span>
                        </li>
                        {%- for price_break in card_product.selected_or_first_available_variant.quantity_price_breaks -%}
                          <li>
                            <span>
                              {{- price_break.minimum_quantity -}}
                              <span aria-hidden="true">+</span></span
                            >
                            {%- assign price = price_break.price | money_with_currency -%}
                            <span> {{ 'sections.quick_order_list.each' | t: money: price }}</span>
                          </li>
                        {%- endfor -%}
                      </ul>
                    </volume-pricing>
                  {%- endif -%}
                </div>
                </quantity-popover>
              {% endif %}
            {%- endif -%}
            {% if show_variant_picker %}
              {% render 'product-card-variant-picker', product: card_product %}
            {% endif %}
          </div>
        </div>
        {% if list_type %}
          <div class="collecion-list-view-quick-add">
            {% unless hide_price %}
              {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
            {% endunless %}
        {% endif %}
        {% assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id %}
        {% if quick_add == 'standard' %}
          <div class="quick-add no-js-hidden">
            {%- liquid
              assign qty_rules = false
              if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
                assign qty_rules = true
              endif
            -%}
            {%- if card_product.variants.size > 1 or qty_rules -%}
              <modal-opener data-modal="#QuickAdd-{{ card_product.id }}">
                <button
                  id="{{ product_form_id }}-submit"
                  type="submit"
                  name="add"
                  class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}"
                  aria-haspopup="dialog"
                  aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
                  data-product-url="{{ card_product.url }}"
                >
                  {{ 'products.product.choose_options' | t }}
                  {%- if horizontal_quick_add -%}
                    <span class="icon-wrap">
                      {{- 'icon-arrow.svg' | inline_asset_content -}}
                    </span>
                  {%- endif -%}
                  {%- render 'loading-spinner' -%}
                </button>
              </modal-opener>
              {% assign quick_add_modal = true %}
            {%- else -%}


              {% comment %} Hide add to cart for specific collections {% endcomment %}

              {% assign hidden_collections = section.settings.hide_for_collections | split: ',' %}
              {% assign current_collection = collection.handle | strip %}
              {% assign product_collection_handles = product.collections | map: 'handle' %}

              {% assign hide_product = false %}
              {% for handle in product_collection_handles %}
                {% if handle == 'professional-use' %}
                  {% assign hide_product = true %}
                {% break %}
                {% endif %}
              {% endfor %}

              {% if is_professional_product and is_pro_customer == false %}

                <a href="{{ card_product.url }}" class="button button--secondary button--full-width">
                  View Details
                </a>
              {%- else -%}
                  <product-form data-section-id="{{ section.id }}">
                    {%- form 'product',
                      card_product,
                      id: product_form_id,
                      class: 'form',
                      novalidate: 'novalidate',
                      data-type: 'add-to-cart-form'
                    -%}
                      <input
                        type="hidden"
                        name="id"
                        value="{{ card_product.selected_or_first_available_variant.id }}"
                        class="product-variant-id"
                        {% if card_product.selected_or_first_available_variant.available == false %}
                          disabled
                        {% endif %}
                      >
                      <button
                        id="{{ product_form_id }}-submit"
                        type="submit"
                        name="add"
                        class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add{% endif %}"
                        aria-haspopup="dialog"
                        aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
                        aria-live="polite"
                        data-sold-out-message="true"
                        {% if card_product.selected_or_first_available_variant.available == false %}
                          disabled
                        {% endif %}
                      >
                        <span>
                          {%- if card_product.selected_or_first_available_variant.available -%}
                            {{ 'products.product.add_to_cart' | t }}
                          {%- else -%}
                            {{ 'products.product.sold_out' | t }}
                          {%- endif -%}
                        </span>
                        <span class="sold-out-message hidden">
                          {{ 'products.product.sold_out' | t }}
                        </span>
                        {%- if horizontal_quick_add -%}
                          <span class="icon-wrap">
                            {{- 'icon-plus.svg' | inline_asset_content -}}
                          </span>
                        {%- endif -%}
                        {%- render 'loading-spinner' -%}
                      </button>
                    {%- endform -%}
                  </product-form>
              {%- endif -%}
            {%- endif -%}
          </div>
        {% elsif quick_add == 'bulk' %}
          {% if card_product.variants.size == 1 %}
            <quick-add-bulk
              data-min="{{ card_product.selected_or_first_available_variant.quantity_rule.min }}"
              id="quick-add-bulk-{{ card_product.selected_or_first_available_variant.id }}-{{ section.id }}"
              class="quick-add-bulk"
              data-index="{{ card_product.selected_or_first_available_variant.id }}"
            >
              {% if card_product.selected_or_first_available_variant.available == false %}
                <button
                  id="{{ product_form_id }}-submit"
                  type="submit"
                  name="add"
                  class="quick-add__submit button button--full-width button--secondary"
                  aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
                  data-sold-out-message="true"
                  disabled
                >
                  <span>{{ 'products.product.sold_out' | t }}</span>
                  <span class="sold-out-message hidden">
                    {{ 'products.product.sold_out' | t }}
                  </span>
                </button>
              {% else %}
                {% render 'quantity-input', variant: card_product.selected_or_first_available_variant, min: 0 %}
              {% endif %}
            </quick-add-bulk>
          {% else %}
            <div class="quick-add no-js-hidden">
              {%- liquid
                assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id
                assign qty_rules = false
                if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
                  assign qty_rules = true
                endif
              -%}
              <modal-opener
                id="QuickBulk-{{ card_product.id }}-{{ section_id }}"
                data-modal="#QuickAddBulk-{{ card_product.id }}-{{ section.id }}"
              >
                <button
                  id="{{ product_form_id }}-submit"
                  type="submit"
                  name="add"
                  class="quick-add__submit button button--full-width button--secondary"
                  aria-haspopup="dialog"
                  aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
                  data-product-url="{{ card_product.url }}"
                >
                  {{ 'products.product.choose_options' | t }}
                  {%- render 'loading-spinner' -%}
                </button>
              </modal-opener>
              <modal-dialog
                id="QuickAddBulk-{{ card_product.id }}-{{ section_id }}"
                class="quick-add-modal color-{{ section.settings.custom_color_scheme }} dbtfy-color-{{ section.settings.color_scheme }}"
              >
                <div
                  role="dialog"
                  aria-label="{{ 'products.product.choose_product_options' | t: product_name: card_product.title | escape }}"
                  aria-modal="true"
                  class="quick-add-modal__content quick-add-modal__content--bulk global-settings-popup"
                  tabindex="-1"
                >
                  <button
                    id="ModalClose-{{ card_product.id }}"
                    type="button"
                    class="quick-add-modal__toggle"
                    aria-label="{{ 'accessibility.close' | t }}"
                  >
                    {{- 'icon-close.svg' | inline_asset_content -}}
                  </button>
                  <div
                    id="QuickAddInfo-{{ card_product.id }}"
                    class="quick-add-modal__content-info quick-add-modal__content-info--bulk"
                  >
                    <div class="quick-add__content-info__media">
                      <div class="quick-add__info">
                        {%- if card_product.featured_media -%}
                          <div
                            class="quick-add__product-media"
                          >
                            <div class="quick-add__product-container global-media-settings">
                              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
                              <img
                                srcset="
                                  {%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
                                  {%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
                                  {%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
                                  {%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
                                  {%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
                                  {%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
                                  {{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
                                "
                                src="{{ card_product.featured_media | image_url: width: 533 }}"
                                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                                alt="{{ card_product.featured_media.alt | escape }}"
                                class="motion-reduce"
                                width="{{ card_product.featured_media.width }}"
                                height="{{ card_product.featured_media.height }}"
                              >
                              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
                            </div>
                          </div>
                        {%- endif -%}
                        <a
                          {% if card_product == blank %}
                            role="link" aria-disabled="true"
                          {% else %}
                            href="{{ card_product.url }}"
                          {% endif %}
                          class="link product__view-details animate-arrow small-hide medium-hide button--link"
                        >
                          <span>
                            {{ 'products.product.view_full_details' | t -}}
                          </span>
                          {{- 'icon-arrow.svg' | inline_asset_content -}}
                        </a>
                      </div>
                      <div class="quick-add-modal__content-info--bulk-details large-up-hide">
                        <a href="{{ card_product.url }}" class="full-unstyled-link">
                          <h3>{{ card_product.title | escape }}</h3>
                        </a>
                        {% unless hide_price %}
                          {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
                        {% endunless %}
                        {%- if card_product.quantity_price_breaks_configured? -%}
                          <div class="card__information-volume-pricing-note">
                            <span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
                          </div>
                        {%- endif -%}
                      </div>
                    </div>
                    <div>
                      <div class="quick-add-modal__content-info--bulk-details small-hide medium-hide">
                        <a href="{{ card_product.url }}" class="full-unstyled-link">
                          <h3 class="h2">
                            {{ card_product.title | escape }}
                          </h3>
                        </a>
                        {% unless hide_price %}
                          {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
                        {% endunless %}
                        {%- if card_product.quantity_price_breaks_configured? -%}
                          <div class="card__information-volume-pricing-note">
                            <span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
                          </div>
                        {%- endif -%}
                      </div>
                      <bulk-modal
                        id="QuickBulkModal-{{ card_product.id }}-{{ section_id }}"
                        data-url="{{ card_product.url }}"
                        data-section-id="{{ section_id }}"
                        data-product-id="{{ card_product.id }}"
                      >
                      </bulk-modal>
                    </div>
                  </div>
                </div>
              </modal-dialog>
            </div>
          {% endif %}
        {% endif %}
        {% if list_type %}
          </div>
        {% endif %}

        <div class="card__badge {{ settings.badge_position }}">
          {%- if card_product.available == false -%}
            {% unless show_sold_out_badge %}
              <span
                id="Badge-{{ section_id }}-{{ card_product.id }}"
                class="badge dbtfy-sold-out-badge"
              >
                {%- if settings.sold_out_badge_text != blank -%}
                  {{- settings.sold_out_badge_text -}}
                {%- else -%}
                  {{- 'products.product.sold_out' | t -}}
                {%- endif -%}
              </span>
            {% endunless %}
          {%- elsif card_product_compare_at_price > card_product_price
            and card_product.available
            and show_sale_badge == false
          -%}
            <span
              id="Badge-{{ section_id }}-{{ card_product.id }}"
              class="badge dbtfy-sale-badge"
            >
              {%- if settings.sale_badge_text != blank -%}
                {{- settings.sale_badge_text -}}
              {%- else -%}
                {{- 'products.product.on_sale' | t -}}
              {%- endif -%}
            </span>
          {%- endif -%}
        </div>
      </div>

      {% if quick_add_modal == true %}
        <quick-add-modal id="QuickAdd-{{ card_product.id }}" class="quick-add-modal">
          <div
            role="dialog"
            aria-label="{{ 'products.product.choose_product_options' | t: product_name: card_product.title | escape }}"
            aria-modal="true"
            class="quick-add-modal__content global-settings-popup"
            tabindex="-1"
          >
            <button
              id="ModalClose-{{ card_product.id }}"
              type="button"
              class="quick-add-modal__toggle"
              aria-label="{{ 'accessibility.close' | t }}"
            >
              {{- 'icon-close.svg' | inline_asset_content -}}
            </button>
            <div id="QuickAddInfo-{{ card_product.id }}" class="quick-add-modal__content-info"></div>
          </div>
        </quick-add-modal>
      {% endif %}
    </div>
  </div>
{%- else -%}
  <div class="card-wrapper product-card-wrapper underline-links-hover">
    <div
      class="
        card card--{{ settings.card_style }}
        {% if extend_height %} card--extend-height{% endif %}
        {% if image_shape and image_shape != 'default' %} card--shape{% endif %}
        {% if settings.card_style == 'card' %} color-{{ settings.card_custom_color_scheme }} dbtfy-color-{{ settings.card_color_scheme }} gradient{% endif %}
         image--ratio
      "
    >
      <div
        class="card__inner{% if settings.card_style == 'standard' %} color-{{ settings.card_custom_color_scheme }} dbtfy-color-{{ settings.card_color_scheme }} gradient{% endif %} ratio image--ratio"
      >
        <div
          class="card__media {% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_custom_color_scheme }} dbtfy-color-{{ settings.card_color_scheme }} gradient{% endif %}"
        >
          <div
            class="media media--transparent media-{{ media_aspect_ratio }}"
          >
            {%- if placeholder_image -%}
              {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
            {%- else -%}
              {{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
          </div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading card__heading--placeholder{% if settings.card_style == 'standard' %} h5{% endif %}">
            <a role="link" aria-disabled="true" class="full-unstyled-link">
              {{ 'onboarding.product_title' | t }}
            </a>
          </h3>
          <div class="card-information">
            {%- if show_vendor -%}
              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
              <div class="caption-with-letter-spacing light">{{ 'products.product.vendor' | t }}</div>
            {%- endif -%}
            {% unless hide_price %}
              {% render 'price', placeholder: placeholder, show_compare_at_price: true %}
            {% endunless %}
          </div>
        </div>
      </div>
    </div>
  </div>
{%- endif -%}