{% 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)
    - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
    - show_vendor: {Boolean} Show the product vendor. Default: false
    - show_new_tag: {Boolean} Show the new tag. Default: false    
    - show_rating: {Boolean} Show the product rating. Default: false
    - extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
    - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
    - show_quick_add: {Boolean} Show the quick add button.
    - section_id: {String} The ID of the section that contains this card.
    

    Usage:
    {% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}
  {%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}  
{%- if card_product and card_product != empty -%}
  {%- liquid
    assign ratio = 1
    if card_product.featured_media and media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    elsif card_product.featured_media and media_aspect_ratio == 'adapt'
      assign ratio = card_product.featured_media.aspect_ratio
    endif
    if ratio == 0 or ratio == nil
      assign ratio = 1
    endif
  -%}

  <style>
 .product-icons li a:not(.adding).add-wishlist+tooltip.tooltip:after { content: "{{ 'products.wishlist.addToWishList' | t }}";  position: relative; opacity: 0; transition: all .3s linear;}
  .product-icons li:hover a:not(.adding).add-wishlist+tooltip.tooltip:after {opacity:1;}
  .product-icons li a:not(.adding).added.add-wishlist+tooltip.tooltip:after { content: "{{ 'products.wishlist.addedToWishList' | t }}";  position: relative; opacity: 0; transition: all .3s linear;}
  .product-icons li:hover a:not(.adding).added.add-wishlist+tooltip.tooltip:after {opacity:1}
  .product-icons.right-aligned li:hover  .add-wishlist.adding+tooltip.tooltip{opacity:0;}

   .product-icons li a:not(.adding).add-compare+tooltip.tooltip:after { content: "{{ 'products.compare.add_to_compare' | t }}";  position: relative; opacity: 0; transition: all .3s linear;}
  .product-icons li:hover a:not(.adding).add-compare+tooltip.tooltip:after {opacity:1;}
  .product-icons li a:not(.adding).added.add-compare+tooltip.tooltip:after { content: "{{ 'products.compare.added_to_compare' | t }}";  position: relative; opacity: 0; transition: all .3s linear;}
  .product-icons li:hover a:not(.adding).added.add-compare+tooltip.tooltip:after {opacity:1}
  .product-icons.right-aligned li:hover  .add-compare.adding ~ tooltip.tooltip{display:none;}
  
  </style>
  
  <div class="card-wrapper product-card-wrapper underline-links-hover">
    <div class="card
      card--card
      {% if card_product.featured_media %} card--media{% else %} card--text{% endif %}
      color-{{ settings.card_color_scheme }} gradient
      {% if extend_height %} card--extend-height{% endif %}
      {% if card_product.featured_media == nil  %} ratio{% endif %}"
      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
    >
      <div class="card__inner {% if card_product.featured_media %} ratio{% endif %}" style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;">
        {%- if card_product.featured_media -%}
          <div class="card__media">
            <a href="{{ card_product.url }}">
            <div class="media media--transparent media--hover-effect">
              {% 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  loading-image"                
                {% unless lazy_load == false %}loading="lazy"{% endunless %}
                width="{{ card_product.featured_media.width }}"
                height="{{ card_product.featured_media.height }}"
              >
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

              {%- if card_product.media[1] != nil and show_secondary_image -%}
                <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="{{ card_product.media[1].alt | escape }}"
                  class="motion-reduce  loading-image secondary-image"
                  loading="lazy"
                  width="{{ card_product.media[1].width }}"
                  height="{{ card_product.media[1].height }}"
                >
              {%- endif -%}
           
            </div>
           </a>

          </div>
        {%- endif -%}
       
        <div class="card__content">
          <div class="card__information">
            <h4 class="card__heading">
              <a href="{{ card_product.url | within: collection }}" class="full-unstyled-link">
                {{ card_product.title | escape }}
              </a>
            </h4>
              <ul class="product-icons bottom-aligned">          
        {%- if settings.enable_compare -%}
        <li class="mobile-hide"><dtx-compare>
          <a href="javascript:void(0);" class="add-compare" data-product_handle="{{ card_product.handle }}"></a>
          <tooltip class="tooltip"></tooltip></dtx-compare>
          </li>
        {%- endif -%}
         
           
           {%- if settings.enable_quickview -%}
        <li class="mobile-hide">          
             <modal-opener data-modal="#QuickAdd-{{ card_product.id }}">
                <button
                  id="{{ product_form_id }}-submit"
                  type="submit"
                  name="add"
                  class="quick-add__submit  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 }}"
                >
                   {% render 'icon-eye' %}
                  <div class="loading-overlay__spinner hidden">
                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background:transparent; display: block; shape-rendering: auto; animation-play-state: running; animation-delay: 0s;" width="40px" height="40px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
                    <circle cx="50" cy="50" fill="none" stroke="currentColor" stroke-width="6" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" style="animation-play-state: running; animation-delay: 0s;">
                      <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="0.819672131147541s" values="0 50 50;360 50 50" keyTimes="0;1" style="animation-play-state: running; animation-delay: 0s;"></animateTransform>
                    </circle>
                    </svg>
                  </div>
                </button>
              </modal-opener>
              <quick-add-modal id="QuickAdd-{{ card_product.id }}" class="quick-add-modal" data-aos="flip-left">
                <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 }}"
                  >
                    {% render 'icon-close' %}
                    
                  </button>
                  <div id="QuickAddInfo-{{ card_product.id }}" class="quick-add-modal__content-info"></div>
                </div>
              </quick-add-modal>
             <tooltip class="tooltip">{{ 'products.product.quick_buy' | t }}</tooltip>
        </li>
             {%-  endif -%}
            {%- if settings.enable_quickadd -%}
  <li>
            <product-form>
                {%- form 'product', card_product, id: product_form_id, class: 'form shopify-product-form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                  <input type="hidden" name="id" class="variant-push" value="{{ card_product.selected_or_first_available_variant.id }}" disabled>
                  <button
                    id="{{ product_form_id }}-submit"
                    type="submit"
                    name="add"
                    class="quick-add__submit  button--full-width button--secondary"
                    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 %}
                  >
                      {%- if card_product.selected_or_first_available_variant.available -%}
                       {% render 'icon-cart' %}
                      {%- else -%}
                    {% render 'icon-cart' %}
                      {%- endif -%}

                    <span class="sold-out-message hidden">
                      {{ 'products.product.sold_out' | t }}
                    </span>
                    <div class="loading-overlay__spinner hidden">
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background:transparent; display: block; shape-rendering: auto; animation-play-state: running; animation-delay: 0s;" width="40px" height="40px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
                    <circle cx="50" cy="50" fill="none" stroke="currentColor" stroke-width="6" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" style="animation-play-state: running; animation-delay: 0s;">
                      <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="0.819672131147541s" values="0 50 50;360 50 50" keyTimes="0;1" style="animation-play-state: running; animation-delay: 0s;"></animateTransform>
                    </circle>
                  </svg>
                    </div>
                  </button>
                {%- endform -%}
              </product-form>  
              <tooltip class="tooltip">{{ 'products.product.add_to_cart' | t }}</tooltip>
           </li>     
               {%-  endif -%}  
             
        
        {%- if settings.enable_wishlist -%}
        <li><dtx-wishlist>
          {%- render 'button-wishlist', product: card_product -%}        
          </dtx-wishlist>
          </li>        
        {%- endif -%} 
        </ul>          
          </div>
           <div class="offer-new-badge {{ settings.badge_position }}">
       {%- if settings.offer_price_enable -%}
          
            {%- if card_product.available == false -%}
              <div class="card__badge {{ settings.badge_position }}">
              <span class="badge badge--bottom-left badge-sold">{{ 'products.product.sold_out' | t }}</span>
              </div>
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              <div class="card__badge {{ settings.badge_position }}">
              <span class="badge badge--bottom-left badge-sale">
              {{ card_product.compare_at_price | minus: card_product.price | times:100 | divided_by: card_product.compare_at_price }}% {{ 'products.product.on_sale' | t }}
              </span>
              </div>
            {%- endif -%}
          
      {%- endif -%}
          {%- if show_new_tag -%}    
        <div class="card-information new--tag">
                             
            {% for tag in card_product.tags %}  
            {% assign tag = tag | handleize  %}              
            {% if tag contains 'Tag_New' %}
            <span class="badge badge--new">
             <span class="badge__text">{{ 'promo.label.new' | t }}</span> 
            </span>
            {% endif %}
            {% endfor %}
                 
          </div>
          {%  endif %} 
          </div>
         
        </div>
     {%  render 'deal-snippet', product: card_product %} 
      </div>
      <div class="card__content for-arrow-alignment {{ loop }} {%  if from_page != blank %}{%  if loop == 1 %}{{ from_page }} {% else %}other-pages{% endif -%}{% endif -%}">
      <div class="card-swatch">
        <div class="card__information">
         
          {%- if show_vendor -%}
          <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
          <div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
          {%- endif -%}
          <h4 class="card__heading " id="title-{{ section_id }}-{{ card_product.id }}">
            <a href="{{ card_product.url | within: collection }}" class="full-unstyled-link">
              {{ card_product.title | escape }} <span class="choosen-swatch"></span>
            </a>
          </h4>
        {% render 'price', product: card_product, price_class: '' %}      
         <span class="caption-large light">{{ block.settings.description | escape }}</span>
       {%- if show_rating -%}

       <div class="card-information review">   
              {% liquid
                assign rating_decimal = 0
                assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
                if decimal >= 0.3 and decimal <= 0.7
                  assign rating_decimal = 0.5
                elsif decimal > 0.7
                  assign rating_decimal = 1
                endif
              %}
              <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: card_product.metafields.reviews.rating.value, rating_max: card_product.metafields.reviews.rating.value.scale_max }}">
                <span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
              </div>
              <p class="rating-text caption">
                <span aria-hidden="true">{{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}</span>
              </p>
              <p class="rating-count caption">
                <span aria-hidden="true">({{ card_product.metafields.reviews.rating_count }})</span>
                <span class="visually-hidden">{{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
              </p>
       </div>
               {%- endif -%}  
          
         {%  unless card_product.metafields.custom.short_description.value == blank %}
        <div class="rte grid-view-hidden">{{ card_product.metafields.custom.short_description.value }}</div>
        {% endunless %}

          
        </div>
          
       {% render 'item-swatch', product: card_product %}
      </div>
         
        <div class="card__badge {{ settings.badge_position }}">
          {%- if card_product.available == false -%}
            <span class="badge badge--bottom-left badge-sold">{{ 'products.product.sold_out' | t }}</span>
          {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
            <span class="badge badge--bottom-left badge-sale">
            {{ card_product.compare_at_price | minus: card_product.price | times:100 | divided_by: card_product.compare_at_price }}% {{ 'products.product.on_sale' | t }}
            </span>
          {%- endif -%}
        </div>        
         
      
         
  <div class="view_link">
            <a href="{{ product.url}}" id="underline-link">view </a>
          </div>
      </div>     
    </div>      
  </div>
{%- else -%}
  <div class="card-wrapper underline-links-hover">
    <div class="card
      card--card
      card--text
      {% if extend_height %} card--extend-height{% endif %}
      color-{{ settings.card_color_scheme }} gradient
      ratio"
      style="--ratio-percent: 100%;"
    >
      <div class="card__inner radio" style="--ratio-percent: 100%;">
        <div class="card__content">
          <div class="card__information">
            <h3 class="card__heading">
              <a role="link" aria-disabled="true" class="full-unstyled-link">
                {{ 'onboarding.product_title' | t }}
              </a>
            </h3>
          </div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h4 class="card__heading">
            <a role="link" aria-disabled="true" class="full-unstyled-link">
              {{ 'onboarding.product_title' | t }}
            </a>
          </h4>
          <div class="card-information">
           <div class="card-information new--tag">
           {%- if show_new_tag -%}                      
            {% for tag in card_product.tags %}  
            {% assign tag = tag | handleize  %}              
            {% if tag contains 'Tag_New' %}
            <span class="badge badge--new">
             <span class="badge__text">{{ 'promo.label.new' | t }}</span> 
            </span>
            {% endif %}
            {% endfor %}
             {%  endif %}
            {%- if show_vendor -%}
              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
              <div class="caption-with-letter-spacing light">{{ 'products.product.vendor' | t }}</div>
            {%- endif -%}
            {% render 'price' %}         
          </div>
        </div>
      </div>
    </div>     
  </div>
  </div>  
{%- endif -%}