/** Shopify CDN: Minification failed

Line 211:0 Unexpected "{"
Line 211:1 Expected identifier but found "%"
Line 214:10 Expected identifier but found whitespace
Line 215:2 Unexpected "-"
Line 215:25 Expected ":"
Line 215:49 Unexpected "("
Line 216:31 Expected ":"
Line 216:64 Expected identifier but found whitespace
Line 217:24 Expected ":"
Line 217:72 Expected identifier but found whitespace
... and 1060 more hidden warnings

**/
.collection-main-category.selected, .collection-main-category:hover {
  border: 2px solid #75b3cb;
  border-radius: 100px;
  font-weight: 500;
  color: #75b3cb;
}

div#ProductGridContainer {
    margin-top: 0;
}
.custom-collection-categories {
  width: 100%;
  position: relative;
  top: 145px;
  height: fit-content;
}

.custom-collection-main-categories {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: center;
  padding: 10px 20px;
  gap: 12px;
  background-color: #fff6f3;
  visibility: visible;
  margin: 0;
}

.custom-collection-main-categories::-webkit-scrollbar {
  display: none;
}

.custom-categories-heading h3, .products-grid-title {
  margin: 2px 0 27px;
}

.collection-main-category {
  padding: 8.5px 33px;
  margin-bottom: 9px;
  cursor: pointer;
  text-transform: capitalize;
  color: #939393;
  list-style: none;
  background-color: #ffffff;
  border-radius: 100px;
  min-width: max-content;
  font-weight: 700;
}

.collection-main-category a {
  text-decoration: none;
}

.collection-main-category.selected,
.collection-main-category.active {
  border: 2px solid #75b3cb;
  border-radius: 100px;
  font-weight: 500;
  color: #75b3cb;
}

.collection-main-category-title {
  font-size: 15px;
  line-height: 27px;
  font-weight: inherit;
  color: inherit;
}

.selected .collection-main-category-title {
  /* Style if needed */
}

.products-grid-wrapper-cls {
  visibility: visible;
  width: 100%;
  /*padding-left: 25px;*/
}

.products-grid-wrapper {
  width: 100%;
}

.products-grid-title {
  text-transform: capitalize;
  color: #efa693;
}

.collection-products-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -12px;
  column-gap: normal;
}

.collection-products-grid .custom-card-wrapper {
  width: 25%;
  margin: 0 0 23px;
  padding: 0 12px;
  max-width: 25%;
}

.collection-products-grid .custom-card-wrapper a:hover,
.collection-products-grid .custom-card-wrapper:focus {
  text-decoration: none;
}

.custom-collection-wrapper .custom-card__inner {
  height: 292px;
  overflow: unset;
  display: block;
}

@media screen and (max-width: 749px) {
  .collection-products-grid .custom-card-wrapper {
    width: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 989px) {

  
  
  .mobile-no-padd {
    padding: 0;
  }

  .custom-collection-wrapper {
    flex-direction: column;
  }

  .custom-collection-categories {
    position: static;
    height: auto;
  }

  .custom-collection-categories,
  .products-grid-wrapper {
    width: 100%;
  }

  .products-grid-wrapper-cls {
    padding: 0 25px;
    width: auto;
  }

  .collection-products-grid {
    margin: 0;
  }

  .custom-categories-heading {
    display: none;
  }

  .products-grid-wrapper {
    padding: 0 10px;
  }

  .products-grid-title {
    display: none;
  }

  .custom-quick-add {
    display: none;
  }

  .card-btn-badge_wrapper {
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
  }

  .custom-collection-wrapper .custom-card__inner {
    height: calc(50vw - 32px);
  }
}

@media screen and (max-width: 640px) {
  .products-grid-wrapper-cls {
    padding: 0 15px;
  }
}

.custom-collection-wrapper.flex-box.justify-between {
  display: contents;
}

.use-products-container {
  padding-top: 12.4rem;
}

.no-disp-imp {
  display: none !important;
}
{% 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: {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 %}

  Reason of creating this file: On mobile view there were some scripts coming which we have to remove so, created the completed different file so as not to distrube the original one.
  
{% endcomment %}

<style>

.shopify-add-to-cart {
  display:none;
}  


@media screen and (max-width: 749px) { 

  .custom-card_price-container {
    display: flex;
    align-items: center; 
    justify-content: space-between; 
    gap: 8px; 
  }
  
  .custom-card_price-wrapper {
    display: flex;
    flex-direction: column; 
  }
  
  
  .shopify-add-to-cart {
    cursor: pointer;
    background: #333;
    padding: 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .shopify-add-to-cart {
    background-color:#D0F1FF; 
    border: none;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);*/
    /*transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;*/
  }
  
  .shopify-add-to-cart:hover {
    background-color: #D0F1FF; 
    transform: translateY(-2px) scale(1.05);
    /*box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);*/
  }
  
  .shopify-add-to-cart:active {
    background-color: #1e40af; 
    transform: translateY(0) scale(0.97);
    /*box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);*/
  }
  
  .shopify-add-to-cart svg {
    width: 22px;
    height: 22px;
    fill: #000;
  }
}  
</style>



{% assign juo_selling_plan_groups = card_product.selling_plan_groups | where: 'app_id', 'juo-subscriptions' %}
{%- 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
    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 first_variant = card_product.selected_or_first_available_variant
    assign discount_perc = first_variant.metafields.custom.black_friday_discount
    assign discount_amount = first_variant.price | times: discount_perc | divided_by: 100
    assign discounted_price = first_variant.price | minus: discount_amount

    if card_product.has_only_default_variant
      assign discount_percentage = card_product.metafields.custom.black_friday_discount
    else
      assign discount_percentage = first_variant.metafields.custom.black_friday_discount
    endif
  -%}
  <div class="card-wrapper card-wrapper1 product-card-wrapper underline-links-hover">
    <div
      class="
        custom-card
        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 }}%;"
    >
      <div
        class="custom-card__inner card-large_height {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% 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 custom-card__media size-3 group-SellingPlanGroupDrop {% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
            <div class="custom-media 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=""
                  class="motion-reduce"
                  loading="lazy"
                  width="{{ card_product.media[1].width }}"
                  height="{{ card_product.media[1].height }}"
                >
              {%- endif -%}
            </div>
            <div class="custom-card__badge-wrapper">
              {% if card_product.metafields.custom.bestseller != blank %}
                <span class="bestseller_badge badge{% if card_product.variants.size == 1 and juo_selling_plan_groups == blank %} bestseller_badge_marg_right{% endif %}">
                  {{- card_product.metafields.custom.bestseller -}}
                </span>
              {% endif %}
              {% if card_product.variants.size == 1 and juo_selling_plan_groups == blank %} {% endif %}
              {%- if card_product.compare_at_price_max != 0 -%}
                <span class="badge discount-badge">
                  {%- capture discount -%}
                {{-
                  card_product.compare_at_price_max
                  | minus: card_product.price
                  | times: 100
                  | divided_by: card_product.compare_at_price_max
                  | strip_html
                -}}
                %
              {%- endcapture -%}
                  -
                  {{- discount -}}
                </span>
              {%- endif -%}
            </div>
            {% if card_product.variants.size > 1 or juo_selling_plan_groups != blank %}
              <a href="{{ card_product.url }}" class="button custom-addToCartBtn new no-t-m"
                >MEER ONTDEKKEN
                {% if settings.is_sale_on and discount_percentage != blank -%}
                  {{- discounted_price | money -}}
                {% endif %}
              </a>
            {% else %}
              <product-form>
                {%- 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 }}"
                    disabled
                  >
                  <button
                    id="{{ product_form_id }}-submit"
                    type="submit"
                    name="add"
                    class="quick-add__submit button button--full-width custom-addToCartBtn{% if card_product.metafields.custom.hide_quantity_selector %} only-once-atc-home{% 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
                    {% elsif card_product.has_only_default_variant
                      and card_product.first_available_variant.metafields.custom.set_as_out_of_stock
                    %}
                      disabled
                    {% endif %}
                  >
                    <span>
                      {%- if card_product.has_only_default_variant
                        and card_product.first_available_variant.metafields.custom.set_as_out_of_stock
                      -%}
                        {{ 'products.product.sold_out' | t }}
                      {%- elsif card_product.selected_or_first_available_variant.available -%}
                        TOEVOEGEN AAN WINKELKAR
                      {%- else -%}
                        {{ 'products.product.sold_out_section' | t }}
                      {%- endif -%}
                    </span>
                    <span class="sold-out-message hidden">
                      {{ 'products.product.sold_out' | t }}
                    </span>
                    <div class="loading-overlay__spinner hidden">
                      <svg
                        aria-hidden="true"
                        focusable="false"
                        role="presentation"
                        class="spinner"
                        viewBox="0 0 66 66"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                      </svg>
                    </div>
                  </button>
                {%- endform -%}
              </product-form>
            {% endif %}
          </div>
          <!-- card__media closed -->
        {%- endif -%}
        {% if card_product.variants.size > 1 and juo_selling_plan_groups != blank %}
          <div class="card-btn-badge_wrapper">
            <div class="custom-card__badge">
              <span class="badge">
                {%- if card_product.compare_at_price_max != 0 -%}
                  {%- capture discount -%}
                {{-
                  card_product.compare_at_price_max
                  | minus: card_product.price
                  | times: 100
                  | divided_by: card_product.compare_at_price_max
                  | strip_html
                -}}
                %
              {%- endcapture -%}
                  -
                  {{- discount -}}
                {%- endif -%}
              </span>
            </div>
            <div class="custom-quick-add">
              {%- if card_product.variants.size == 1 and juo_selling_plan_groups == blank -%}
                <product-form>
                  {%- 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 }}"
                      disabled
                    >
                    <button
                      id="{{ product_form_id }}-submit"
                      type="submit"
                      name="add"
                      class="quick-add__submit button button--full-width custom-addToCartBtn{% if card_product.metafields.custom.hide_quantity_selector %} only-once-atc-home{% 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
                      {% elsif card_product.has_only_default_variant
                        and card_product.first_available_variant.metafields.custom.set_as_out_of_stock
                      %}
                        disabled
                      {% endif %}
                    >
                      <span>
                        {%- if card_product.has_only_default_variant
                          and card_product.first_available_variant.metafields.custom.set_as_out_of_stock
                        -%}
                          {{ 'products.product.sold_out' | t }}
                        {%- elsif card_product.selected_or_first_available_variant.available -%}
                          {{ 'products.product.add_to_cart_section' | t }}
                        {%- else -%}
                          {{ 'products.product.sold_out_section' | t }}
                        {%- endif -%}
                      </span>
                      <span class="sold-out-message hidden">
                        {{ 'products.product.sold_out' | t }}
                      </span>
                      <div class="loading-overlay__spinner hidden">
                        <svg
                          aria-hidden="true"
                          focusable="false"
                          role="presentation"
                          class="spinner"
                          viewBox="0 0 66 66"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                        </svg>
                      </div>
                    </button>
                  {%- endform -%}
                </product-form>
              {% else %}
                {% assign first_variant = card_product.selected_or_first_available_variant %}
                {% assign discount_perc = first_variant.metafields.custom.black_friday_discount %}
                {% assign discount_amount = first_variant.price | times: discount_perc | divided_by: 100 %}
                {% assign discounted_price = first_variant.price | minus: discount_amount %}
                <button class="button custom-addToCartBtn{% if card_product.metafields.custom.hide_quantity_selector %} only-once-product{% endif %}">
                  {{ 'products.product.more_section' | t }}
                  {% if settings.is_sale_on -%}
                    {%- if discount_percentage != blank -%}
                      {{- discounted_price | money -}}
                    {%- else -%}
                      {{- money_price_from -}}
                    {%- endif -%}
                  {%- else -%}
                    {{- money_price_from -}}
                  {%- endif %}
                </button>
              {%- endif -%}
            </div>
          </div>
        {% endif %}
        <div class="card__content" style="display:none">
          <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 }}">
            {%- 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 color-{{ settings.sale_badge_color_scheme }}"
              >
                {{- 'products.product.on_sale' | t -}}
              </span>
            {%- endif -%}
          </div>
        </div>
        <!-- card__content closed -->

        {% if card_product.variants.size > 1 or juo_selling_plan_groups != blank %}
          <div class="custom-card_hover_wrapper">
            <!-- Add to Cart Form with Selling Plan Selection -->
            <product-form>
              {%- 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 }}"
                  disabled
                >

                <div class="custom-card_variant-wrapper">
                  {%- unless card_product.has_only_default_variant -%}
                    <variant-radios
                      class="no-js-hidden"
                      data-section="{{ section.id }}"
                      data-cardsectionid="{{ section.id }}{{ card_product.id }}"
                      data-sellingplanid="{{ section.id }}{{ card_product.id }}"
                      data-url="{{ card_product.url }}"
                      data-update-Url="false"
                      {{ block.shopify_attributes }}
                    >
                      
{%- for option in card_product.options_with_values -%}
  <fieldset class="js product-form__input card-product-fieldset">
    <h4 class="card-variant-option_name">{{ option.name }}</h4>
    <div class="custom-card-variants flex-box">
      {%- for value in option.values -%}
        <div class="custom-card-variant flex-box align-center">

          {%- assign option_index = option.position | minus: 1 -%}
          {%- assign variant = nil -%}

          {%- for v in card_product.variants -%}
            {%- if v.options[option_index] == value -%}
              {%- assign variant = v -%}
              {%- break -%}
            {%- endif -%}
          {%- endfor -%}

          {%- if variant -%}
            {%- assign discount_percentage = variant.metafields.custom.black_friday_discount -%}
            {%- assign discount_amount = variant.price | times: discount_percentage | divided_by: 100 -%}
            {%- assign discounted_price = variant.price | minus: discount_amount -%}

            {%- assign sub_price = variant.selling_plan_allocations[5].price -%}
            {%- assign sub_discount_amount = sub_price | times: discount_percentage | divided_by: 100 -%}
            {%- assign sub_discounted_price = sub_price | minus: sub_discount_amount -%}
          {%- endif -%}

          <input
            type="radio"
            id="{{ variant_number }}{{ card_product.id }}-{{ option.position }}-{{ forloop.index0 }}"
            name="{{ option.name }}"
            value="{{ variant.id }}"
            data-name="id"
            class="visually-hidden radio-check"
            {% if option.selected_value == value %}
              checked="checked"
            {% endif %}
            {% if variant %}
              data-image="{{ variant.image | img_url: '533x' }}"
              data-price="{{ variant.price | money }}"
              data-subprice="{{ sub_price | money }}"
              {% if discount_percentage != blank %}
                data-pricediscountmeta="{{ discounted_price | money }}"
                data-subpricediscountmeta="{{ sub_discounted_price | money }}"
              {% endif %}
              data-avail="{% if variant.metafields.custom.set_as_out_of_stock %}false{% else %}{{ variant.available }}{% endif %}"
            {% endif %}
          >

          <label
            for="{{ variant_number }}{{ card_product.id }}-{{ option.position }}-{{ forloop.index0 }}"
            class="card-variant-name flex-box align-center"
          >
            {% if card_product.id == 14643482591606 or card_product.id == 9589929574748 or card_product.id == 15009541161334 or card_product.id == 14648679661942 %}
              <span
                class="card-variant-swatch v-swatch asx"
                style="background-image: url({{ value | replace: " ", "" | append: ".webp" | file_url }});"
              ></span>
            {% else %}
              <span
                class="card-variant-swatch v-swatch"
                style="{% if variant.image %}background-image: url({{ variant.image | img_url: '100x' }});{% endif %} background-color: {{ settings.variant_color1 }};"
              ></span>
            {% endif %}
            <span>{{ value }}</span>
          </label>
        </div>
      {%- endfor -%}
    </div>
  </fieldset>
{%- endfor -%}

                      
                    </variant-radios>
                  {%- endunless -%}
                </div>

                <!-- Selling Plan Selection -->
                {% if juo_selling_plan_groups and display_select == true %}
                  <label for="selling-plan-selector">{{ Sample | t }}</label>
                  <select name="selling_plan" id="selling-plan-selector">
                    {% for selling_plan_group in juo_selling_plan_groups %}
                      {% for selling_plan in selling_plan_group.selling_plans %}
                        {% if selling_plan.recurring_deliveries == true %}
                          <option value="{{ selling_plan.id }}">
                            {{ selling_plan.name }}
                          </option>
                        {% endif %}
                      {% endfor %}
                    {% endfor %}
                  </select>
                {% endif %}

                {%- if juo_selling_plan_groups != blank -%}
                  <div class="card-subscribe-form-wrapper">
                    <div class="card-subscribe-form">
                      <fieldset
                        id="selling-plan-fieldset-{{ section.id }}{{ card_product.id }}"
                        class="selling-plan-fieldset card-product-fieldset"
                        data-product="{{ card_product | json }}"
                      >
                        {% unless card_product.requires_selling_plan %}
                          <div
                            class="card--subscribe-input-wrapper one-time"
                            data-intervalunitofmeasure="default"
                          >
                            {% if discount_percentage != blank %}
                              {% assign discount_amount = card_product.price
                                | times: discount_percentage
                                | divided_by: 100
                              %}
                              {% assign discounted_price = card_product.price | minus: discount_amount %}
                            {% endif %}
                            <input
                              type="radio"
                              name="purchase_option"
                              class="custom-card-input plans-change one-time"
                              onclick="document.querySelector('select[name=\'selling_plan\']').disabled = true;"
                              data-price="
                                {% if settings.is_sale_on %}
                                  {% if discount_percentage != blank %}
                                    {{ discounted_price | money }}
                                  {% else %}
                                    {{ card_product.price | money }}
                                  {% endif %}
                                {% else %}
                                  {{ card_product.price | money }}
                                {% endif %}
                              "
                              id="{{ variant_number }}one_time-{{ card_product.id }}"
                              checked
                            >
                            <label
                              class="one_time custom-card-label rel"
                              for="{{ variant_number }}one_time-{{ card_product.id }}"
                            >
                              <span class="checkmark "></span>
                              <span>{{ 'products.product.one_time_section' | t }}</span>
                            </label>
                          </div>
                        {% endunless %}

                        {% for group in juo_selling_plan_groups %}
                          <div
                            class="card--subscribe-input-wrapper for-sub"
                            data-intervalunitofmeasure="months"
                          >
                            {% if discount_percentage != blank %}
                              {% assign discount_amount = card_product.selected_or_first_available_selling_plan_allocation.checkout_charge_amount
                                | times: discount_percentage
                                | divided_by: 100
                              %}
                              {% assign discounted_price = card_product.selected_or_first_available_selling_plan_allocation.checkout_charge_amount
                                | minus: discount_amount
                              %}
                            {% endif %}
                            <input
                              type="radio"
                              name="purchase_option"
                              class="custom-card-input plans-change"
                              onclick="document.querySelector('select[name=\'selling_plan\']').disabled = false;"
                              data-price="
                                 {% if settings.is_sale_on %}
                                   {% if discount_percentage != blank %}
                                     {{ discounted_price | money }}
                                   {% else %}
                                     {{ card_product.selected_or_first_available_selling_plan_allocation.checkout_charge_amount | money }}
                                   {% endif %}
                                {% else %}
                                     {% if card_product.selected_or_first_available_variant.selling_plan_allocations[5].price %}
                                     {{ card_product.selected_or_first_available_variant.selling_plan_allocations[5].price | money -}}
                                   {% else %}
                                      {{ card_product.selected_or_first_available_selling_plan_allocation.checkout_charge_amount | money }}
                                  {% endif %}
                                 {% endif %}
                              "
                              id="{{ variant_number }}{{ group.name | handleize }}-{{ card_product.id }}"
                              data-selector="custom-card-input-subscription"
                              data-id="{{ card_product.id }}"
                              
                            >
                            <label
                              class="subscribe_for custom-card-label rel pre-subscribe"
                              for="{{ variant_number }}{{ group.name | handleize }}-{{ card_product.id }}"
                            >
                              <span class="checkmark"></span>
                              <span>{{ 'products.product.subscripiton_card_text' | t }}</span>
                              <span class="subscribe_for-price"></span>
                            </label>

                            {% for option in group.options %}
                              <select
                                data-position="{{ option.position }}"
                                name="selling_plan"
                                data-card-product-select
                                disabled
                              >
                                {% for value in group.selling_plans %}
                                  {% if value.recurring_deliveries == true %}
                                    <!-- Filter fixed selling plans -->
                                    <option
                                      value="{{ value.id }}"
                                    >
                                      {{ value.name }}
                                    </option>
                                  {% endif %}
                                {% endfor %}
                              </select>
                            {% endfor %}
                          </div>
                        {% endfor %}
                      </fieldset>
                    </div>
                  </div>
                {%- endif -%}
                {% liquid
                  assign aic = false
                  for item in cart.items
                    if item.product.id == card_product.id
                      assign aic = true
                      break
                    else
                      assign aic = false
                    endif
                  endfor
                %}

                <script type="application/json" id="VariantData">
                  [
                    {% for variant in card_product.variants %}
                      {
                        "id": {{ variant.id }},
                        "title": {{ variant.title | downcase | remove: " " | remove: "/" | json }}
                      }{% unless forloop.last %},{% endunless %}
                    {% endfor %}
                  ]
                </script>
                
                <button
                  id="{{ product_form_id }}-submit"
                  type="submit"
                  name="add"
                  class="quick-add__submit button button--full-width margin_top-auto{% if card_product.metafields.custom.only_once == true or card_product.metafields.custom.hide_quantity_selector == true %} only-once-atc-home{% endif %}"
                  aria-haspopup="dialog"
                  aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
                  aria-live="polite"
                  data-sold-out-message="true"
                  data-ooatcid="{{ card_product.id }}"
                  {% if card_product.selected_or_first_available_variant.available == false %}
                    disabled
                  {% elsif aic == true and card_product.metafields.custom.only_once == true %}
                    disabled
                  {% elsif aic == true and card_product.metafields.custom.hide_quantity_selector == true %}
                    disabled
                  {% elsif card_product.has_only_default_variant
                    and card_product.first_available_variant.metafields.custom.set_as_out_of_stock
                  %}
                    disabled
                  {% endif %}
                >
                  <span class="instock-message {% unless card_product.selected_or_first_available_variant.available %}hidden{% endunless %}">
                    {%- if card_product.has_only_default_variant
                      and card_product.first_available_variant.metafields.custom.set_as_out_of_stock
                    -%}
                      {{ 'products.product.sold_out' | t }}
                    {%- elsif card_product.selected_or_first_available_variant.available -%}
                      {{ 'products.product.add_to_cart_section' | t }}
                    {%- else -%}
                      {{ 'products.product.sold_out_section' | t }}
                    {%- endif -%}
                    -
                    <span
                      id="price-card-{{ section.id }}{{ card_product.id }}"
                      class="product-card_updated-price"
                      data-id="{{ card_product.id }}"
                    >
                      {% # theme-check-disable %}
                      {% if settings.is_sale_on %}
                        {% if discount_percentage != blank %}
                          {% assign discount_percent = card_product.selected_or_first_available_variant.metafields.custom.black_friday_discount %}
                          {% assign discount_amount = card_product.selected_or_first_available_variant.price
                            | times: discount_percentage
                            | divided_by: 100
                          %}
                          {% assign discounted_price = card_product.selected_or_first_available_variant.price
                            | minus: discount_amount
                          %}
                          {{ discounted_price | money }}
                        {% else %}
                          {{ card_product.selected_or_first_available_variant.price | money -}}
                        {% endif %}
                      {% else %}
                        {{ card_product.selected_or_first_available_variant.price | money -}}
                        {% comment %}
                        {% if card_product.selected_or_first_available_variant.selling_plan_allocations[5].price %}
                          {{
                            card_product.selected_or_first_available_variant.selling_plan_allocations[5].price
                            | money
                          -}}
                        {% else %}
                           {{ card_product.selected_or_first_available_variant.price | money -}}
                        {% endif %}
                        {% endcomment %}
                      {% endif %}
                      {% # theme-check-enable %}
                    </span>
                  </span>
                  <span class="sold-out-message {% if card_product.selected_or_first_available_variant.available %}hidden{% endif %}">
                    {{ 'products.product.sold_out_section' | t }}
                  </span>
                  <div class="loading-overlay__spinner hidden">
                    <svg
                      aria-hidden="true"
                      focusable="false"
                      role="presentation"
                      class="spinner"
                      viewBox="0 0 66 66"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                    </svg>
                  </div>
                </button>
              {%- endform -%}
            </product-form>
          </div>
        {% endif %}
      </div>
      <!-- custom-card__inner closed -->
      <div class="custom-card__content">
        <div class="card__information nn">
          <h3
            class="card__heading1 custom-card__heading {% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %}"
            {% if card_product.featured_media or settings.card_style == 'card' %}
              id="title-{{ section_id }}-{{ card_product.id }}"
            {% endif %}
          >
            <a
              href="{{ card_product.url }}"              
              class="full-unstyled-link"              
            >
              {{ card_product.title | escape }}
            </a>
          </h3>
          <div class="card-information aa">
            {%- if show_vendor -%}
              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
              <div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
            {%- endif -%}

            {% comment %}
              <span class="caption-large light">{{ block.settings.description | escape }}</span>
            {% endcomment %}
            {% if card_product.metafields.custom.tagline %}
              <span class="product-tagline" style="color:grey">
                {{ card_product.metafields.custom.tagline | escape }}
              </span>
            {% endif %}

            {%- 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 -%}
            <div class="custom-card_price-container">
              <div class="custom-card_price-wrapper">
                {% render 'custom-price', product: card_product, price_class: '', show_compare_at_price: true %}
              </div>
              <div
  id="add-{{ card_product.variants.first.id }}"
  class="shopify-add-to-cart"
  data-variant-id="{{ card_product.variants.first.id }}"
  aria-label="Add to cart"
>
  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="white" viewBox="0 0 24 24">
    <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 
             0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zM7.01 
             9h12.45c.75 0 1.23-.82.95-1.51l-2.1-5.01A1.003 1.003 
             0 0 0 17.45 2H5.21L4.27 0H1v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 
             0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12L7.01 9z"/>
  </svg>  
</div>
            </div>  
            
            {% comment %}
              {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
            {% endcomment %}
            {% assign display_select = false %}

            {% if juo_selling_plan_groups %}
              {% for selling_plan_group in juo_selling_plan_groups %}
                {% for selling_plan in selling_plan_group.selling_plans %}
                  {% if selling_plan.recurring_deliveries == true %}
                    {% assign display_select = true %}
                  {% endif %}
                {% endfor %}
              {% endfor %}
            {% 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 -%}
          </div>
        </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.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>
              <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>
            {%- 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 aa 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 -%}
          </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.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"
                                {% 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 }}"
                          {% 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 }}" 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 }}" 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 }}"
                        data-section-id="{{ section_id }}"
                        data-product-id="{{ card_product.id }}"
                      >
                      </bulk-modal>
                    </div>
                  </div>
                </div>
              </modal-dialog>
            </div>
          {% endif %}
        {% endif %}
        {% comment %}
          <div class="card__badge {{ 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 color-{{ settings.sale_badge_color_scheme }}"
              >
                {{- 'products.product.on_sale' | t -}}
              </span>
            {%- endif -%}
          </div>
        {% endcomment %}
      </div>
      <!-- custom-card__content closed -->
    </div>
    <!-- custom-card closed -->
  </div>
  <!-- card-wrapper closed -->
  
<script>
document.addEventListener('DOMContentLoaded', function() {
  const button = document.getElementById('add-{{ card_product.variants.first.id }}');

  button.addEventListener('click', function() {    
    const variantId = this.dataset.variantId;

    fetch('/cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        id: variantId,
        quantity: 1
      })
    })
    .then(response => response.json())
    .then(data => {
      console.log('Added to cart:', data);
      //alert('Product added to cart!');
      // Optionally update cart count or mini-cart here
    })
    .catch(error => {
      console.error('Error adding to cart:', error);
      alert('Sorry, there was an error adding to the cart.');
    });
  });
});
</script>  
      
{%- 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 custom-card__inner card-large_height hello2">
    <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">
        <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 -%}
            {% render 'price', placeholder: placeholder, show_compare_at_price: true %}
          </div>
        </div>
      </div>
    </div>
  </div>
{%- endif -%}