.wishlist-icon-button svg {
  display: block !important;
  width: var(--wishlist-icon-size, 32px) !important;
  height: var(--wishlist-icon-size, 32px) !important;
  cursor: pointer;
}

/* This targets the wrapper on product cards to make sure it's visible */
.collection-wishlist-icon-wrapper {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  line-height: 0;
} 
.product-item__image {
  position: relative !important;
}
  .product-title-with-wishlist .wishlist-icon-button svg { 
 width: 30px !important;  /* Adjust the size of the heart itself */
  height: 30px !important;
    margin-bottom: 5px;
}

/* 
  These rules ensure the icon wrapper is positioned correctly 
  within the now-relative parent. It also makes sure it's visible.
*/
.collection-wishlist-icon-wrapper {
  position: absolute !important;
  bottom: 10px; /* Adjust vertical position from the bottom */
  right: 10px;  /* Adjust horizontal position from the right */
  z-index: 5;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

  .product-title-with-wishlist .wishlist-icon-button svg { 
 width: 30px !important;  /* Adjust the size of the heart itself */
  height: 30px !important;
    margin-bottom: 5px;
}
.collection-wishlist-icon-wrapper {
  position: absolute !important;
  top: 10px;   /* Position from the top */
  right: 10px;    /* Position from the right */
  z-index: 10;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

/* Optional: Add a subtle hover effect */
.collection-wishlist-icon-wrapper:hover {
  transform: scale(1.1);
}

/* This ensures our SVG icon inside the button is sized correctly */
.wishlist-icon-button svg {
  width: 18px !important;  /* Adjust the size of the heart itself */
  height: 18px !important;
}