/** Shopify CDN: Minification failed

Line 226:0 Unexpected "{"
Line 226:1 Expected identifier but found "%"
Line 229:10 Expected identifier but found whitespace
Line 230:2 Unexpected "-"
Line 230:25 Expected ":"
Line 230:49 Unexpected "("
Line 231:31 Expected ":"
Line 231:64 Expected identifier but found whitespace
Line 232:24 Expected ":"
Line 232:72 Expected identifier but found whitespace
... and 597 more hidden warnings

**/
/* .price {
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  color: rgb(var(--color-foreground));
  
  display: flex;
}

.price > * {
  display: inline-block;
  vertical-align: top;
}

.price.price--unavailable {
  visibility: hidden;
}


.price--end {
  text-align: right;
}

.price .price-item {
  display: inline-block;
  margin: 0 1rem 0 0;
  font-size: 24px;
  font-weight: 700px;
  font-style: bold;
  line-height: 100%;
  letter-spacing: 0%;
  color: #226609;
}

.price__regular .price-item--regular {
  margin-right: 0;
  font-size: 16px;
  color: #4B4B4B;
  font-weight: 400px;
  line-height: 100%;
  letter-spacing: 0%;
  height: 11px;
}

.price:not(.price--show-badge) .price-item--last:last-of-type {
  margin: 0;
}

@media screen and (min-width: 750px) {
  .price {
    margin-bottom: 0;
  }
}

.price--large {
  font-size: 1.6rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  letter-spacing: 0.13rem;
}

@media screen and (min-width: 750px) {
  .price--large {
    font-size: 1.8rem;
  }
}

.price--sold-out .price__availability,
.price__regular {
  display: block;
}

.price__sale,
.price__availability,
.price .price__badge-sale,
.price .price__badge-sold-out,
.price--on-sale .price__regular,
.price--on-sale .price__availability {
  display: none;
}

.price--sold-out .price__badge-sold-out,
.price--on-sale .price__badge-sale,
.volume-pricing--sale-badge .price__badge-sale {
  display: inline-block;
}

.volume-pricing--sale-badge .price__badge-sale {
  margin-left: 0.5rem;
}

.price--on-sale .price__sale {
  display: initial;
  flex-direction: row;
  flex-wrap: wrap;

}


.price--center {
  display: initial;
  justify-content: center;
}

.price--on-sale .price-item--regular {
  text-decoration: line-through;
  color: rgba(var(--color-foreground), 0.75);
  font-size: 1.68rem;

}

.unit-price {
  display: block;
  font-size: 1.1rem;
  letter-spacing: 0.04rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  margin-top: 0.2rem;
  color: rgba(var(--color-foreground), 0.7);
}

@media only screen and (max-width: 768px) {
  .price{
    width: 40vw;
    display:flex-start;
  } 
  .price-item {
    width: 30vw;
    display: flex;
    
  }

  .price__regular .price-item--regular {
    margin-right: 0;
    font-size: 16px;
    color: #4B4B4B;
    font-weight: 400px;
    line-height: 100%;
    letter-spacing: 0%;
    height: 11px;
  }
}

@media only screen and (max-width: 425px) {
  .price{
    width: 33vw;
    display:flex-start;
  } 
  .price-item {
    width: 32vw;
    display: flex;
    
  }

  .price__regular .price-item--regular {
    margin-right: 0;
    font-size: 16px;
    color: #4B4B4B;
    font-weight: 400px;
    line-height: 100%;
    letter-spacing: 0%;
    height: 11px;
  }
}
@media only screen and (max-width: 375px) {
  .price{
    width: 33vw;
    display:flex-start;
  } 
  .price-item {
    width: 32vw;
    display: flex;
    
  }

  .price__regular .price-item--regular {
    margin-right: 0;
    font-size: 16px;
    color: #4B4B4B;
    font-weight: 400px;
    line-height: 100%;
    letter-spacing: 0%;
    height: 11px;
  }
}

@media only screen and (max-width: 320px) {
  .price{
    width: 33vw;
    display:flex-start;
  } 
  .price-item {
    width: 32vw;
    display: flex;
    
  }

  .price__regular .price-item--regular {
    margin-right: 0;
    font-size: 16px;
    color: #4B4B4B;
    font-weight: 400px;
    line-height: 100%;
    letter-spacing: 0%;
    height: 11px;
  }
}  */





{% 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 %}
{% endcomment %}

<style>
  /* Custom Card Styling */

   :root {
    --grid-mobile-horizontal-spacing: 1rem;
    --grid-mobile-vertical-spacing: 1rem;
    --grid-desktop-horizontal-spacing: 1.5rem;
    --grid-desktop-vertical-spacing: 1.5rem;
  }


  /* Custom product badge styling */
.custom-product-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  z-index: 10;
  text-transform: uppercase;
}

/* Preset badge colors */
.badge-color-red { background-color: #FF0000 !important; }
.badge-color-green { background-color: #00FF00 !important; color: #000 !important; }
.badge-color-blue { background-color: #0000FF !important; }
.badge-color-gold { background-color: #FFD700 !important; color: #000 !important; }
.badge-color-orange { background-color: #FF8C00 !important; }
.badge-color-purple { background-color: #9B59B6 !important; }
.badge-color-pink { background-color: #FF69B4 !important; }
.badge-color-black { background-color: #000000 !important; }


  /* Custom card with 20px border radius */
  .custom-card-rounded {
    border-radius: 12px !important;
    display: flex;
    flex-direction: column;
    height: 100% !important;
        box-sizing: border-box !important;
  }

  .custom-card-rounded:after {
    border-radius: 12px !important;
  }

  .custom-card-rounded .card__inner {
    flex: none;
    padding: 0 !important;
    height: auto !important;
    position: static !important;
  }

  .custom-card-rounded .card__inner.ratio {
    padding: 0 !important;
    height: auto !important;
  }

  .custom-card-rounded .card__inner.ratio::before {
    display: none !important;
  }

  /* Custom image with top border radius only and full width */
  .custom-card-rounded .card__media {
    margin: 0 !important;
    width: 100% !important;
    border: none !important;
    border-radius: 12px 12px 0 0 !important;
    height: 280px !important;
    overflow: hidden;
    flex-shrink: 0;
  }

  .custom-card-rounded .card__media .media {
    height: 100%;
  }

  .custom-card-rounded .card__media .media img {
    border: none !important;
    border-radius: 12px 12px 0 0 !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Content section height */
  .custom-card-rounded .card__information {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0px;
    flex-shrink: 0;
      padding: 12px !important; /* Override default Shopify padding */
  }

  /* Ensure rating badge stays positioned on image */
  .custom-card-rounded .card__media {
    position: relative;
  }

  .custom-card-rounded .card__media .card__badge {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    z-index: 10 !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
  }
  
  .custom-card-rounded .card__media .card__badge .rating-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    pointer-events: auto;
  }
  
  .custom-card-rounded .card__media .card__badge .custom-product-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    pointer-events: auto;
  }

  
  /* Card height control */
  .card-wrapper {
    
  }


  /* Fix card height consistency with featured-collection */
  #product-grid .grid__item {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  #product-grid .card-wrapper {
    margin: 0 !important;
  }
  
  #product-grid .custom-card-rounded .card__information {
    padding: 12px !important;
    box-sizing: border-box !important;
  }
  
  /* Responsive image and content heights */
  
  /* Extra Small Mobile (< 375px) - iPhone SE, small phones */
  @media screen and (max-width: 374px) {
    .custom-card-rounded .card__media {
      height: 180px !important;
    }
    .custom-card-rounded .card__information {
      height: 100px !important;
    }
    .card-wrapper {
      height: 280px !important;
    }
  }
  
  /* Small Mobile (375px - 479px) - iPhone 12/13/14, Galaxy S21 */
  @media screen and (min-width: 375px) and (max-width: 479px) {
    .custom-card-rounded .card__media {
      height: 165px !important;
    }
    .custom-card-rounded .card__information {
      height: 97px !important;
    }
    .card-wrapper {
      height: 262px !important;
    }
  }
  
  /* Medium Mobile (480px - 599px) - Large phones */
  @media screen and (min-width: 480px) and (max-width: 599px) {
    .custom-card-rounded .card__media {
      height: 200px !important;
    }
    .custom-card-rounded .card__information {
      height: 105px !important;
    }
    .card-wrapper {
      height: 305px !important;
    }
  }
  
  /* Large Mobile (600px - 749px) - Phablets, small tablets portrait */
  @media screen and (min-width: 600px) and (max-width: 749px) {
    .custom-card-rounded .card__media {
      height: 205px !important;
    }
    .custom-card-rounded .card__information {
      height: 115px !important;
    }
    .card-wrapper {
      height: 320px !important;
    }
  }

  /* Tablet (750px - 989px) */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .custom-card-rounded .card__media {
      height: 245px !important;
    }
    .custom-card-rounded .card__information {
      height: 115px !important;
    }
    .card-wrapper {
      height: 360px !important;
    }
  }

  
  /* Custom breakpoint: 989px to 1200px (Between tablet and large desktop) */
  @media screen and (min-width: 990px) and (max-width: 1200px) {
    .custom-card-rounded .card__media {
      height: 198px !important;
    }
    .custom-card-rounded .card__information {
      height: 107px !important;
      padding: 12px !important;
    }
    .card-wrapper {
      height: 305px !important;

    }
  }


  @media screen and (min-width: 1201px) {
    .custom-card-rounded .card__media {
      height: 250px !important;
    }
    .custom-card-rounded .card__information {
      height: 125px !important;
    }
    .card-wrapper {
      height: 375px !important;

    }
  }

  /* Custom rating badge styling */
  .rating-badge {
      background-color: rgba(254, 250, 243, 0.9);

    opacity: 2px;
    padding: 0px 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: 12px;
    font-weight: 500;
      backdrop-filter: blur(4px); /* optional — adds a soft glass effect */

  }

  .rating-badge .rating-number {
    color: var(--color-heading);
    font-weight: 600;
    margin-right: 2px;
  }

  .rating-badge .star-icon {
    color: var(--color-secondary);
    font-size: 16px;
        margin-right: 4px;
  }

  .rating-badge .review-count {
    color: var(--color-heading);
    padding-left: 8px;
    margin-left: 2px;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: var(--color-heading);
    height: 14px;
    display: flex;
    align-items: center;
    font-size: 14px;


  }


    /* Responsive rating badge sizing */
  @media screen and (max-width: 749px) {
    .rating-badge {
      font-size: 10px !important;
      padding: 0px 4px !important;
    }
    .rating-badge .star-icon {
      font-size: 12px !important;
    }
    .rating-badge .review-count {
      font-size: 10px !important;
      padding-left: 4px !important;
    }
  }
  
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .rating-badge {
      font-size: 11px !important;
      padding: 0px 5px !important;
    }
    .rating-badge .star-icon {
      font-size: 14px !important;
    }
    .rating-badge .review-count {
      font-size: 11px !important;
      padding-left: 6px !important;
    }
  }
  
  @media screen and (min-width: 990px) and (max-width: 1200px) {
    .rating-badge {
      font-size: 10px !important;
      padding: 0px 4px !important;
    }
    .rating-badge .star-icon {
      font-size: 13px !important;
    }
    .rating-badge .review-count {
      font-size: 10px !important;
      padding-left: 5px !important;
    }
  }
  
  @media screen and (min-width: 1201px) {
    .rating-badge {
      font-size: 12px !important;
      padding: 0px 6px !important;
    }
    .rating-badge .star-icon {
      font-size: 16px !important;
    }
    .rating-badge .review-count {
      font-size: 14px !important;
      padding-left: 8px !important;
    }
  }

  /* Fix overflow on small screens */
  .custom-card-rounded {
    overflow: hidden;
  }

  /* Fix card information padding - align everything */
  .card__information {
    box-sizing: border-box !important;
    background-color: var(--color-primary)

  }

  /* Ensure card content doesn't overflow */
  .custom-card-rounded .card__content {
    background: inherit;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }

  /* Ensure vendor and title are left-aligned and full width */
 
  .card__information .caption-with-letter-spacing {
    text-align: left !important;
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }


  .caption-with-letter-spacing {
    font-size: 12px;
    color: var(--color-secondary);
    text-transform: capitalize;
    font-weight:800;

    letter-spacing: 0;
    flex-shrink: 0;
    margin-top:8px;
   font-family: "jost" ; /* or your desired font */


  }

   .card__heading {
    text-align: left !important;
    width: 100% !important;
    padding: 0 !important;
    margin-top:2px;
    font-size: 24px;
    font-weight: bold;
    color : var(--color-heading);
    letter-spacing: 0;
    flex-shrink: 0;
  }

  /* Price, size and button wrapper */
  .price-button-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    flex-shrink: 0;
  }

  /* Price and size container on left */
  .price-size-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
    max-width: 100%;
  }

  .price-size-container .price {
    max-width: 100%;
    overflow: hidden;
  }


  .plant-size-options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;

  }

  .plant-size-badge {
    font-size: 8px;
    padding: 4px 8px;
    border-radius: 2px;


      display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;


  }

  .plant-size-badge.size-small {
    background-color: var(--color-secondary);
    color:var(--color-primary1) ;
  }

  .plant-size-badge.size-medium {
    background-color: var(--color-white);
    color: var(--color-secondary);
    border: 0.5px solid var(--color-secondary);


  }

  /* Button positioned on right */
  .button-container {
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
  }


  /* Custom Add to Cart Button */
  .custom-add-to-cart-btn {
    background-color: var(--color-primary1);
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
   font-family: "jost" ; /* or your desired font */
    border-radius: 2px;
    padding: 10px 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-size: 13px;
    min-width: fit-content;
    flex-shrink: 0;
    text-decoration: none;
    display: inline-block;
  }



  .custom-add-to-cart-btn:active {
    transform: translateY(0);
  }

  .custom-add-to-cart-btn:disabled {
    background: #cccccc;
    cursor: not-allowed;
    box-shadow: none;
  }

  /* ========== RESPONSIVE STYLING FOR ALL BREAKPOINTS ========== */
  
  /* Extra Small Mobile (< 375px) */
  @media screen and (max-width: 374px) {
    .caption-with-letter-spacing {
      font-size: 9px !important;
    }
    .card__heading {
      font-size: 14px !important;
    }
    .plant-size-badge {
      font-size: 6px !important;
      padding: 2px 4px !important;
    }
    .custom-add-to-cart-btn {
      font-size: 7px !important;
      padding: 2px 8px !important;
    }
  }
  
  /* Small Mobile (375px - 479px) */
  @media screen and (min-width: 375px) and (max-width: 479px) {
    .caption-with-letter-spacing {
      font-size: 10px !important;
    }
    .card__heading {
      font-size: 14px !important;
    }
    .plant-size-badge {
      font-size: 6px !important;
      padding: 2px 6px !important;
    }
    .custom-add-to-cart-btn {
      font-size: 7px !important;
      padding: 2px 10px !important;
    }
  }
  
  /* Medium Mobile (480px - 599px) */
  @media screen and (min-width: 480px) and (max-width: 599px) {
    .caption-with-letter-spacing {
      font-size: 10px !important;
    }
    .card__heading {
      font-size: 16px !important;
    }
    .plant-size-badge {
      font-size: 7px !important;
      padding: 3px 6px !important;
    }
    .custom-add-to-cart-btn {
      font-size: 7px !important;
      padding: 2px 12px !important;
    }
  }
  
  /* Large Mobile (600px - 749px) */
  @media screen and (min-width: 600px) and (max-width: 749px) {
    .caption-with-letter-spacing {
      font-size: 11px !important;
    }
    .card__heading {
      font-size: 18px !important;
    }
    .plant-size-badge {
      font-size: 8px !important;
      padding: 3px 7px !important;
    }
    .custom-add-to-cart-btn {
      font-size: 7px !important;
      padding: 2px 14px !important;
    }
  }
  
  /* Tablet (750px - 989px) */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .caption-with-letter-spacing {
      font-size: 11px !important;
    }
    .card__heading {
      font-size: 18px !important;
    }
    .plant-size-badge {
      font-size: 8px !important;
      padding: 4px 8px !important;
    }
    .custom-add-to-cart-btn {
      font-size: 8px !important;
      padding: 2px 14px !important;
    }
  }
  
  /* Mid-range Desktop (990px - 1200px) */
  @media screen and (min-width: 990px) and (max-width: 1200px) {
    .caption-with-letter-spacing {
      font-size: 10px !important;
    }
    .card__heading {
      font-size: 16px !important;
    }
    .plant-size-badge {
      font-size: 7px !important;
      padding: 3px 6px !important;
    }
    .custom-add-to-cart-btn {
      font-size: 7px !important;
      padding: 2px 12px !important;
    }
  }
  
  /* Large Desktop (1201px+) */
  @media screen and (min-width: 1201px) {
    .caption-with-letter-spacing {
      font-size: 12px !important;
    }
    .card__heading {
      font-size: 20px !important;
    }
    .plant-size-badge {
      font-size: 8px !important;
      padding: 4px 8px !important;
    }
    .custom-add-to-cart-btn {
      font-size: 10px !important;
      padding: 2px 16px !important;
    }
  }

  /* Ensure all child elements respect boundaries */
  .card__information > * {
    max-width: 100%;
    box-sizing: border-box;
  }

     /* Fix carousel card width on mobile devices */
 
  /* Extra Small Mobile (< 375px) - iPhone SE, small phones */
  @media screen and (max-width: 374px) {
    .slider.slider--tablet .grid__item {
      width: 90vw !important;
      min-width: 90vw !important;
      max-width: 90vw !important;
      flex: 0 0 90vw !important;
    }

    
  }
  
  /* Small Mobile (375px - 479px) - iPhone 12/13/14, Galaxy S21 */
  @media screen and (min-width: 375px) and (max-width: 479px) {
    .slider.slider--tablet .grid__item {
      width: 60vw !important;
      min-width: 60vw !important;
      max-width: 60vw !important;
      flex: 0 0 60vw !important;
    }

   
  }
  
  /* Medium Mobile (480px - 599px) - Large phones */
  @media screen and (min-width: 480px) and (max-width: 599px) {
    .slider.slider--tablet .grid__item {
      width: 50vw !important;
      min-width: 50vw !important;
      max-width: 50vw !important;
      flex: 0 0 50vw !important;
    }

    
  }
  
  /* Large Mobile (600px - 749px) - Phablets, small tablets portrait */
  @media screen and (min-width: 600px) and (max-width: 749px) {
    .slider.slider--tablet .grid__item {
      width: 40vw !important;
      min-width: 40vw !important;
      max-width: 40vw !important;
      flex: 0 0 40vw !important;
    }

   
  }
  
  /* Fix carousel card width - TABLET ONLY (750px - 989px) */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .slider.slider--tablet .grid__item {
      width: 10vw !important;  /* TABLET WIDTH - Change this for tablet */
      min-width: 10vw !important;
      max-width: 10vw !important;
      flex: 0 0 10vw !important;
    }
          
 
  }
  
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .slider.slider--tablet .grid__item {
      width:32vw !important;
      min-width: 32vw !important;
      max-width: 32vw !important;
      flex: 0 0 32vw !important;
    }

     

 
  }
  
  @media screen and (min-width: 990px) {
    .slider.slider--desktop .grid__item {
      width: calc(25% - 0.75rem) !important;
      flex: 0 0 calc(25% - 0.75rem) !important;
    }


  }
</style>

{%- 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 }}
  {{ 'root.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
  -%}
  <div class="card-wrapper product-card-wrapper ">
    <div
      class="
        card card--{{ settings.card_style }} custom-card-rounded
        {% 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="card__inner {% 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{% 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 class="card__badge {{ settings.badge_position }}">

              <svg width="31" height="125" viewBox="0 0 31 125" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M31 0L31 123.714C31 124.223 30.4049 124.501 30.0144 124.173L15.8856 112.323C15.6625 112.136 15.3374 112.136 15.1144 112.323L0.985567 124.173C0.595124 124.501 2.92074e-07 124.223 3.14349e-07 123.714L5.72205e-06 -1.35505e-06L31 0Z" fill="url(#paint0_linear_17_664)"
              />
            
              <defs>
                <linearGradient id="paint0_linear_17_664" x1="15.5" y1="-6.77526e-07" x2="15.5" y2="125" gradientUnits="userSpaceOnUse">
                  <stop stop-color="#B32209" />
                  <stop offset="1" stop-color="#FFAD65" />
                </linearGradient>
              </defs>

             
            </svg>

              {%- 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>
              {% comment %} {%- elsif card_product.metafields.reviews.rating.value != blank -%} {% endcomment %}
                              {%- elsif show_rating and card_product.metafields.reviews.rating.value != blank -%}
                <span
                  id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                  class="rating-badge badge--bottom-left"
                >
                  <span class="rating-number">{{ card_product.metafields.reviews.rating.value }}</span>
                  <span class="star-icon">★</span>
                  <span class="review-count">{{ card_product.metafields.reviews.rating_count }}</span>
                </span>
              {%- endif -%}

              {%- comment -%} Custom product badge - supports both tags and metafields {%- endcomment -%}
              {%- assign badge_text = '' -%}
              {%- assign badge_bg_color = '' -%}
              
              {%- comment -%} Try metafields first {%- endcomment -%}
              {%- if card_product.metafields.custom.text != blank -%}
                {%- assign badge_text = card_product.metafields.custom.text -%}
                {%- if card_product.metafields.custom.color != blank -%}
                  {%- assign badge_bg_color = card_product.metafields.custom.color -%}
                {%- endif -%}
              {%- endif -%}
              
              {%- comment -%} Fall back to tags if no metafield {%- endcomment -%}
              {%- if badge_text == '' -%}
                {%- for tag in card_product.tags -%}
                  {%- if tag contains 'text:' -%}
                    {%- assign badge_text = tag | remove: 'text:' -%}
                  {%- endif -%}
                  {%- if tag contains 'color:' -%}
                    {%- assign badge_bg_color = tag | remove: 'color:' -%}
                  {%- endif -%}
                {%- endfor -%}
              {%- endif -%}
              
                {%- comment -%} DEBUG {%- endcomment -%}
              {% comment %} <div style="position: absolute; top: 50%; left: 0; background: yellow; padding: 5px; z-index: 999; font-size: 10px;">
                Text: {{ badge_text | default: 'EMPTY' }}<br>
                Color: {{ badge_bg_color | default: 'EMPTY' }}<br>
                Tags: {{ card_product.tags | join: ', ' }}
              </div> {% endcomment %}

              {%- if badge_text != '' -%}
                {%- comment -%} Determine icon based on badge text {%- endcomment -%}
                {%- assign badge_icon = '' -%}
                {%- assign badge_lower = badge_text | downcase -%}
                
                {%- if badge_lower contains 'price' or badge_lower contains 'sale' or badge_lower contains 'discount' or badge_lower contains 'drop' -%}
                  {%- assign badge_icon = '💰' -%}
                {%- elsif badge_lower contains 'new' or badge_lower contains 'arrival' -%}
                  {%- assign badge_icon = '✨' -%}
                {%- elsif badge_lower contains 'best' or badge_lower contains 'seller' or badge_lower contains 'popular' -%}
                  {%- assign badge_icon = '🏆' -%}
                {%- elsif badge_lower contains 'limited' or badge_lower contains 'exclusive' -%}
                  {%- assign badge_icon = '⚡' -%}
                {%- elsif badge_lower contains 'hot' or badge_lower contains 'trending' -%}
                  {%- assign badge_icon = '🔥' -%}
                {%- elsif badge_lower contains 'free' or badge_lower contains 'gift' -%}
                  {%- assign badge_icon = '🎁' -%}
                {%- else -%}
                  {%- assign badge_icon = '⭐' -%}
                {%- endif -%}
                
                <span 
                  class="custom-product-badge" 
                  {% if badge_bg_color != '' %}style="background-color: {{ badge_bg_color }};"{% else %}style="background-color: #FF0000;"{% endif %}
                >
                  {{ badge_icon }} {{ badge_text }}
                </span>
              {%- endif -%}


            </div>
          </div>
        {%- endif -%}
      </div>
      <div class="">
        <div class="card__information">
          {%- if show_vendor -%}
            <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
            <div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
          {%- endif -%}

          <h3
            class="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 %}
          >
            
              {{ card_product.title | escape }}
          </h3>

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

          <div class="price-button-wrapper">
            <div class="price-size-container">
              {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}

              {%- comment -%} Display first 2 plant sizes from option {%- endcomment -%}
              {%- for option in card_product.options_with_values -%}
                {%- if option.name contains 'SIZE' or option.name contains 'size' -%}
                  <div class="plant-size-options">
                    {%- assign size_count = 0 -%}
                    {%- for value in option.values -%}
                      {%- if size_count < 2 -%}
                        {%- assign size_class = value | downcase | replace: ' ', '-' -%}
                        <span class="plant-size-badge size-{{ size_class }}">{{ value }}</span>
                        {%- assign size_count = size_count | plus: 1 -%}
                      {%- endif -%}
                    {%- endfor -%}
                  </div>
                  {%- break -%}
                {%- endif -%}
              {%- endfor -%}
            </div>

            {% assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id %}
            {% if quick_add == 'standard' %}
              <div class="button-container">
                {%- 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 -%}
                  <a href="{{ card_product.url }}" class="custom-add-to-cart-btn{% if horizontal_quick_add %} card--horizontal__quick-add{% endif %}">
                    {{ 'products.product.choose_options' | t }}
                    {%- if horizontal_quick_add -%}
                      <span class="icon-wrap">
                        {{- 'icon-arrow.svg' | inline_asset_content -}}
                      </span>
                    {%- endif -%}
                  </a>
                {%- else -%}
                  <product-form data-section-id="{{ section.id }}">
                    {%- form 'product',
                      card_product,
                      id: product_form_id,
                      class: 'form',
                      novalidate: 'novalidate',
                      data-type: 'add-to-cart-form'
                    -%}
                      <input
                        type="hidden"
                        name="id"
                        value="{{ card_product.selected_or_first_available_variant.id }}"
                        class="product-variant-id"
                        {% if card_product.selected_or_first_available_variant.available == false %}
                          disabled
                        {% endif %}
                      >
                      <button
                        id="{{ product_form_id }}-submit"
                        type="submit"
                        name="add"
                        class="custom-add-to-cart-btn{% 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' %}
              <div class="button-container">
                {% 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 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 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>
                  </div>
                {% endif %}
              </div>
            {% endif %}
          </div>

          {%- 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>
      </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 ">
    <div
      class="
        card card--{{ settings.card_style }} custom-card-rounded
        {% 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>

          {%- 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>
{%- endif -%}