{% comment %}
  render in collection grid
  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: {Boolean} Show the secondary image on hover. Default: false (optional)
  - show_vendor: {Boolean} Show the product vendor. 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)
  - 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 %}

{%- unless skip_styles -%}
  {{ 'component-rating.css' | asset_url | stylesheet_tag }}
  {% comment %}
    {{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
    {{ 'quick-order-list.css' | asset_url | stylesheet_tag }}
    {{ 'quantity-popover.css' | asset_url | stylesheet_tag }}
  {% endcomment %}

  {{ 'component-price.css' | asset_url | stylesheet_tag }}
{%- endunless -%}

{%- 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 == null
      assign ratio = 1
    endif

    assign show_info = true
    if hide_info
      assign show_info = false
    endif

    assign show_card_badge = true
    if hide_card__badge
      assign show_card_badge = false
    endif

    if settings.show_meta_badge
      assign meta_badges = card_product.metafields.product.badges.value
      assign sorted_meta_badges = meta_badges | sort: 'position'
    endif
  -%}

  <div
    class="card-wrapper card-product-snippet product-card-wrapper underline-links-hover"
    {% if card_product.metafields.combined_listings.parent_product_handle %}
      data-parent-handle="{{ card_product.metafields.combined_listings.parent_product_handle.value.handle }}"
    {% endif %}
  >
    <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_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 %}
      "
      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
    >
      <a href="{{ card_product.url | within: collection }}" class="full-unstyled-link">
        <div
          class="card__inner{% if card_product.featured_media or settings.card_style == 'standard' %} ratio{% endif %}"
          style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
        >
          {%- if card_product.featured_media -%}
            <div class="card__media{% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
              <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"
                  {% 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] != null 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="lazy"
                    width="{{ card_product.media[1].width }}"
                    height="{{ card_product.media[1].height }}"
                  >
                {%- endif -%}
              </div>
            </div>
          {%- endif -%}
          <div class="card__content card__content__alpha">
            <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 %}
              >
                {{ card_product.title | escape }}
              </h3>
            </div>
            {% 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_count > 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{% 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 | within: collection }}"
                    >
                      {{ '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>
                  <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 }}"
                      >
                        {% render 'icon-close' %}
                      </button>
                      <div id="QuickAddInfo-{{ card_product.id }}" class="quick-add-modal__content-info"></div>
                    </div>
                  </quick-add-modal>
                {%- 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{% 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 -%}
              </div>
            {% elsif quick_add == 'bulk' %}
              {% if card_product.variants_count == 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"
                      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"
                      aria-haspopup="dialog"
                      aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
                      data-product-url="{{ card_product.url | within: collection }}"
                    >
                      {{ '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.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 }}"
                      >
                        {% render 'icon-close' %}
                      </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"
                                    {% 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 %}
                                </div>
                              </div>
                            {%- endif -%}
                            <a
                              {% if card_product == blank %}
                                role="link" aria-disabled="true"
                              {% else %}
                                href="{{ card_product.url | within: collection }}"
                              {% endif %}
                              class="link product__view-details animate-arrow small-hide medium-hide"
                            >
                              {{ 'products.product.view_full_details' | t -}}
                              {{- '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 | within: collection }}" class="full-unstyled-link">
                              <h3>
                                {{ card_product.title | escape }}
                              </h3>
                            </a>
                            {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
                            {%- 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 | within: collection }}" class="full-unstyled-link">
                              <h3 class="h2">
                                {{ card_product.title | escape }}
                              </h3>
                            </a>
                            {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
                            {%- 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 | within: collection }}"
                            data-section-id="{{ section_id }}"
                            data-product-id="{{ card_product.id }}"
                          >
                          </bulk-modal>
                        </div>
                      </div>
                    </div>
                  </modal-dialog>
                </div>
              {% endif %}
            {% endif %}

            {% for badge in sorted_meta_badges %}
              {% assign position = badge.position | default: 'bottom right' | downcase %}
              {% assign position_handle = position | handleize %}
              {% assign text_color = badge.text_color %}
              {% assign background = badge.background | default: '#00000000' %}
              {% unless position == 'below price' or position == settings.badge_position %}
                <div class="meta_badge card__badge {{ position }}">
                  <span
                    id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }} "
                    class="badge badge--{{ position_handle }}{% if badge.icon != blank %} image-badge{% endif %}"
                    style="--color-foreground: {{ text_color }}; --color-badge-background: {{ background }}"
                  >
                    {% if badge.icon != blank %}
                      {{ badge.icon | image_url: width: badge.icon.width | image_tag: alt: 'image-badge' }}
                    {% else %}
                      {{ badge.text }}
                    {% endif %}
                  </span>
                </div>
              {% endunless %}
            {% endfor %}

            {% if show_card_badge %}
              {% assign color_variants = 0 %}
              {% for option in card_product.options_with_values %}
                {% if option.name == 'Color' or option.name == 'Team' %}
                  {% assign color_variants = option.values | size %}
                {% endif %}
              {% endfor %}

              <div class="card__badge card_badge_media {{ settings.badge_position }}">
                {% if color_variants > 1 %}
                  <span
                    id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                    class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
                  >
                    {{- color_variants | append: ' COLORS' -}}
                  </span>
                {% endif %}

                {%- if card_product.available == false -%}
                  <span
                    id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                    class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
                  >
                    {{- 'products.product.sold_out' | t -}}
                  </span>
                {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
                  <span
                    id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                    class="badge badge--bottom-left {% if settings.enable_custom_sale_badge_colors %} custom-sale-badge {% else %}color-{{ settings.sale_badge_color_scheme }}{% endif %}"
                  >
                    {{- 'products.product.on_sale' | t -}}
                  </span>
                {%- endif -%}

                {% for badge in meta_badges %}
                  {% assign position = badge.position | default: 'bottom right' | downcase %}
                  {% assign text_color = badge.text_color %}
                  {% assign background = badge.background | default: '#00000000' %}
                  {% unless position == 'below price' or position != settings.badge_position %}
                    <span
                      id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                      class="badge meta-with-default badge--{{ position | handleize }}{% if badge.icon != blank %} image-badge{% endif %}"
                      style="--color-foreground: {{ text_color }}; --color-badge-background: {{ background }}"
                    >
                      {% if badge.icon != blank %}
                        {{ badge.icon | image_url: width: '20px' | image_tag }}
                      {% else %}
                        {{ badge.text }}
                      {% endif %}
                    </span>
                  {% endunless %}
                {% endfor %}
              </div>
            {% endif %}

            {% if card_product.metafields.custom.product_card_subtext %}
              <span
                class="subtext"
                style="
                  bottom: 7px;
                  position: absolute;
                  right: 26px;
                  font-size: 11px;
                  color: grey;
                "
              >
                {{- card_product.metafields.custom.product_card_subtext -}}
              </span>
            {% endif %}
          </div>
        </div>
      </a>
      <div class="card__content card__content__bravo">
        <div class="card__information">
          <h3
            class="card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} h4{% endif %}"
            {% if card_product.featured_media or settings.card_style == 'card' %}
              id="title-{{ section_id }}-{{ card_product.id }}"
            {% endif %}
          >
            <a
              href="
                {% if card_product.metafields.combined_listings.parent_product_handle %}
                /products/{{ card_product.metafields.combined_listings.parent_product_handle.value.handle }}
                {%else%}{{ card_product.url | within: collection }}{% endif %}
              "
              id="CardLink-{{ section_id }}-{{ card_product.id }}"
              class="full-unstyled-link"
              aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }}{% if show_card_badge and card_product.available == false %} Badge-{{ section_id }}-{{ card_product.id }}{% elsif show_card_badge and card_product.compare_at_price > card_product.price and card_product.available %} Badge-{{ section_id }}-{{ card_product.id }}{% endif %}"
            >
              {% if card_product.metafields.combined_listings.parent_product_handle %}
                {% assign cn = card_product.selected_or_first_available_variant.option1 %}
                {{ card_product.title | remove: cn | escape }}
              {% else %}
                {{ card_product.title | escape }}
              {% endif %}
            </a>
          </h3>
          {% if show_info %}
            <div
              class="card-information card-information__alpha"
              {% if color_variants > 1 %}
                style="    margin-bottom: 58px;"
              {% endif %}
            >
              {%- if show_vendor -%}
                <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 and card_product.metafields.reviews.rating.value != blank -%}
                {% 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"
                    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>
              {%- endif -%}

              {% render 'price',
                product: card_product,
                price_class: '',
                show_compare_at_price: true,
                from_price_html: true
              %}

              {% assign below_price_badges = sorted_meta_badges | where: 'position', 'Below price' %}

              {% if below_price_badges.size > 0 %}
                <div class="meta_badge content-meta-badge">
                  {% for badge in below_price_badges %}
                    {% assign position = badge.position | default: 'bottom right' | downcase %}
                    {% assign position_handle = position | handleize %}
                    {% assign text_color = badge.text_color %}
                    {% assign background = badge.background | default: '#00000000' %}
                    {% if position == 'below price' %}
                      <span
                        id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                        class="badge badge--{{ position_handle }}{% if badge.icon != blank %} image-badge{% endif %}"
                        style="--color-foreground: {{ text_color }}; --color-badge-background: {{ background }}"
                      >
                        {% if badge.icon != blank %}
                          {{ badge.icon | image_url: width: badge.icon.width | image_tag: alt: 'image-badge' }}
                        {% else %}
                          {{ badge.text }}
                        {% endif %}
                      </span>
                    {% endif %}
                  {% endfor %}
                </div>
              {% endif %}

              {%- if card_product.quantity_price_breaks_configured? -%}
                {% if card_product.variants_count == 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_count == 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 -%}
            </div>
          {% endif %}

          {% comment %}
            START COLOR IMAGES
          {% endcomment %}
          {%- if color_variants > 1 -%}
            <div
              class="card__color-variants-container"
              style="position: absolute; bottom:0; left: 0; display: flex; justify-content: left; padding: 12px 1rem; z-index: 2; width: 100%;"
            >
              {%- if color_variants > 4 -%}
                <button
                  class="color-slider-btn color-slider-prev"
                  style="position: absolute; left: 8px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.9); border: 0px solid #ddd; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; outline: none;"
                  onclick="slideColorVariants(this, -1)"
                >
                  ‹
                </button>
              {%- endif -%}

              <div
                class="card__color-variants"
                style="display: flex; gap: 8px; flex-wrap: nowrap; overflow: hidden; position: relative; z-index: 2;"
              >
                {%- assign displayed_colors = '' -%}
                {% if card_product.metafields.combined_listings.parent_product_handle %}
                  {%- for variant in card_product.metafields.combined_listings.parent_product_handle.value.variants -%}
                    {%- assign variant_color = '' -%}
                    {%- for option in variant.options -%}
                      {%- assign option_name = card_product.metafields.combined_listings.parent_product_handle.value.options_with_values[forloop.index0].name -%}
                      {%- if option_name == 'Color' or option_name == 'Team' -%}
                        {%- assign variant_color = option -%}
                        {%- break -%}
                      {%- endif -%}
                    {%- endfor -%}

                    {%- assign color_delimiter = '|' | append: variant_color | append: '|' -%}
                    {%- unless displayed_colors contains color_delimiter -%}
                      {%- if variant.featured_image -%}
                        <div
                          class="color-variant-image"
                          style="width: 50px; height: 50px; border-radius: 4px; overflow: hidden; border: 0px solid #e0e0e0; cursor: pointer; z-index: 2; position: relative; flex-shrink: 0;"
                          onclick="switchProductImage('{{ card_product.metafields.combined_listings.parent_product_handle.value.id }}', '{{ variant.featured_image | image_url }}', '{{ variant.featured_image.width }}', '{{ variant.featured_image.height }}', '{{ variant_color | escape }}', '{{ variant.id }}')"
                        >
                          <img
                            src="{{ variant.featured_image | image_url: width: 100, height: 100 }}"
                            alt="{{ variant_color | escape }}"
                            style="width: 100%; height: 100%; object-fit: cover; outline: none;"
                            width="100"
                            height="100"
                            loading="lazy"
                          >
                        </div>
                        {%- assign displayed_colors = displayed_colors | append: color_delimiter -%}
                      {% elsif variant.product.featured_image %}
                        <div
                          class="color-variant-image"
                          style="width: 50px; height: 50px; border-radius: 4px; overflow: hidden; border: 0px solid #e0e0e0; cursor: pointer; z-index: 2; position: relative; flex-shrink: 0;"
                          onclick="switchProductImage('{{ card_product.metafields.combined_listings.parent_product_handle.value.id }}', '{{ variant.product.featured_image | image_url }}', '{{ variant.featured_image.width }}', '{{ variant.featured_image.height }}', '{{ variant_color | escape }}', '{{ variant.id }}')"
                        >
                          <img
                            src="{{ variant.product.featured_image | image_url: width: 100, height: 100 }}"
                            alt="{{ variant_color | escape }}"
                            style="width: 100%; height: 100%; object-fit: cover; outline: none;"
                            width="100"
                            height="100"
                            loading="lazy"
                          >
                        </div>
                        {%- assign displayed_colors = displayed_colors | append: color_delimiter -%}
                      {%- endif -%}
                    {%- endunless -%}
                  {%- endfor -%}

                {% else %}
                  {%- for variant in card_product.variants -%}
                    {%- assign variant_color = '' -%}
                    {%- for option in variant.options -%}
                      {%- assign option_name = card_product.options_with_values[forloop.index0].name -%}
                      {%- if option_name == 'Color' or option_name == 'Team' -%}
                        {%- assign variant_color = option -%}
                        {%- break -%}
                      {%- endif -%}
                    {%- endfor -%}

                    {%- assign color_delimiter = '|' | append: variant_color | append: '|' -%}
                    {%- unless displayed_colors contains color_delimiter -%}
                      {%- if variant.featured_image -%}
                        <div
                          class="color-variant-image"
                          style="width: 50px; height: 50px; border-radius: 4px; overflow: hidden; border: 0px solid #e0e0e0; cursor: pointer; z-index: 2; position: relative; flex-shrink: 0;"
                          onclick="switchProductImage('{{ card_product.id }}', '{{ variant.featured_image | image_url }}', '{{ variant.featured_image.width }}', '{{ variant.featured_image.height }}', '{{ variant_color | escape }}', '{{ variant.id }}')"
                        >
                          <img
                            src="{{ variant.featured_image | image_url: width: 100, height: 100 }}"
                            alt="{{ variant_color | escape }}"
                            style="width: 100%; height: 100%; object-fit: cover; outline: none;"
                            width="100"
                            height="100"
                            loading="lazy"
                          >
                        </div>
                        {%- assign displayed_colors = displayed_colors | append: color_delimiter -%}
                      {%- elsif variant.product.featured_image -%}
                        <div
                          class="color-variant-image"
                          style="width: 50px; height: 50px; border-radius: 4px; overflow: hidden; border: 0px solid #e0e0e0; cursor: pointer; z-index: 2; position: relative; flex-shrink: 0;"
                          onclick="switchProductImage('{{ card_product.id }}', '{{ variant.product.featured_image | image_url }}', '{{ variant.product.featured_image.width }}', '{{ variant.product.featured_image.height }}', '{{ variant_color | escape }}', '{{ variant.id }}')"
                        >
                          <img
                            src="{{ variant.product.featured_image | image_url: width: 100, height: 100 }}"
                            alt="{{ variant_color | escape }}"
                            style="width: 100%; height: 100%; object-fit: cover; outline: none;"
                            width="100"
                            height="100"
                            loading="lazy"
                          >
                        </div>
                        {%- assign displayed_colors = displayed_colors | append: color_delimiter -%}
                      {%- endif -%}
                    {%- endunless -%}
                  {%- endfor -%}
                {% endif %}
              </div>

              {%- if color_variants > 4 -%}
                <button
                  class="color-slider-btn color-slider-next"
                  style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.9); border: 0px solid #ddd; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; outline: none;"
                  onclick="slideColorVariants(this, 1)"
                >
                  ›
                </button>
              {%- endif -%}
            </div>

            <script>
              // Initialize image links when page loads
              document.addEventListener('DOMContentLoaded', function () {
                const productCards = document.querySelectorAll('.card-wrapper');
                productCards.forEach((card) => {
                  const cardInner = card.querySelector('.card__inner.ratio');
                  const productLink = card.querySelector('a[href*="/products/"]');

                  if (cardInner && productLink && cardInner.parentElement.tagName !== 'A') {
                    // Check if there's a parent handle in the data attribute
                    const parentHandle = card.getAttribute('data-parent-handle');
                    const linkHref = parentHandle ? `/products/${parentHandle}` : productLink.href;

                    // Wrap the entire card__inner.ratio in a link
                    const imageLink = document.createElement('a');
                    imageLink.href = linkHref;
                    imageLink.style.display = 'block';
                    imageLink.style.position = 'relative';
                    imageLink.style.zIndex = '2';
                    imageLink.className = 'card__inner-link';

                    cardInner.parentNode.insertBefore(imageLink, cardInner);
                    imageLink.appendChild(cardInner);
                  }
                });
              });

              function switchProductImage(productId, newImageUrl, imageWidth, imageHeight, colorName, variantId) {
                // Find the main product image for this specific product card
                const productCard = event.target.closest('.card-wrapper');
                const mainImage = productCard.querySelector('.card__media img:first-child');
                const hoverImage = productCard.querySelector('.card__media img:nth-child(2)');

                if (mainImage) {
                  // Update the main image source with multiple sizes for responsive images
                  const baseUrl = newImageUrl.split('?')[0];
                  const versionParam = newImageUrl.includes('?v=') ? '&' + newImageUrl.split('?v=')[1] : '';

                  // Build srcset for responsive images
                  const srcset = [
                    `${baseUrl}?width=165${versionParam} 165w`,
                    `${baseUrl}?width=360${versionParam} 360w`,
                    `${baseUrl}?width=533${versionParam} 533w`,
                    `${baseUrl}?width=720${versionParam} 720w`,
                    `${baseUrl}?width=940${versionParam} 940w`,
                    `${baseUrl}?width=1066${versionParam} 1066w`,
                    `${baseUrl}${versionParam ? '?' + versionParam.substring(1) : ''} ${imageWidth}w`,
                  ].join(',');

                  mainImage.srcset = srcset;
                  mainImage.src = `${baseUrl}?width=533${versionParam}`;
                  mainImage.alt = colorName;
                  mainImage.width = imageWidth;
                  mainImage.height = imageHeight;

                  // Also update the hover image if it exists
                  if (hoverImage) {
                    hoverImage.srcset = srcset;
                    hoverImage.src = `${baseUrl}?width=533${versionParam}`;
                    hoverImage.alt = colorName;
                    hoverImage.width = imageWidth;
                    hoverImage.height = imageHeight;
                  }
                }

                // Check if there's a parent handle to use
                const parentHandle = productCard.getAttribute('data-parent-handle');
                const baseProductUrl = parentHandle
                  ? `/products/${parentHandle}`
                  : productCard.querySelector('a[href*="/products/"]').href.split('?')[0];

                // Update all card links to include the variant ID
                const cardLinks = productCard.querySelectorAll('a[href*="/products/"]');
                cardLinks.forEach((link) => {
                  // Use the parent handle URL if it exists
                  const newHref = `${baseProductUrl}?variant=${variantId}`;
                  link.setAttribute('href', newHref);
                });

                // Update the inner link specifically
                const innerLink = productCard.querySelector('.card__inner-link');
                if (innerLink) {
                  const newHref = `${baseProductUrl}?variant=${variantId}`;
                  innerLink.setAttribute('href', newHref);
                }
              }
            </script>
          {%- endif -%}

          {% comment %}
            END COLOR IMAGES
          {% endcomment %}
        </div>

        {%- if show_card_badge -%}
          <div class="card__badge card_badge_content {{ settings.badge_position }}">
            {%- if card_product.available == false -%}
              <span
                id="Badge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
              >
                {{- 'products.product.sold_out' | t -}}
              </span>
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              <span
                id="Badge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left {% if settings.enable_custom_sale_badge_colors %} custom-sale-badge {% else %}color-{{ settings.sale_badge_color_scheme }}{% endif %}"
              >
                {{- 'products.product.on_sale' | t -}}
              </span>
            {%- endif -%}
          </div>
        {%- endif -%}
      </div>
    </div>
  </div>
{%- else -%}
  {%- liquid
    assign ratio = 1
    assign placeholder = true
    if media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    endif
  -%}
  <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_color_scheme }} gradient{% endif %}
      "
      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
    >
      <div
        class="card__inner{% if settings.card_style == 'standard' %} color-{{ settings.card_color_scheme }} gradient{% endif %} ratio"
      >
        <div
          class="card__media {% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}"
        >
          <div
            class="media media--transparent"
          >
            {%- 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 card__content__charlie">
        <div class="card__information">
          <h3 class="card__heading card__heading--placeholder{% if settings.card_style == 'standard' %} h4{% endif %}">
            <a role="link" aria-disabled="true" class="full-unstyled-link">
              {{ 'onboarding.product_title' | t }}
            </a>
          </h3>
          <div class="card-information card-information__beta">
            {%- 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', placeholder: placeholder, show_compare_at_price: true %}
          </div>
        </div>
      </div>
    </div>
  </div>
{%- endif -%}