.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  z-index: 0;
}

.card-wrapper {
  color: inherit;
  height: 100%;
  position: relative;
  text-decoration: none;
}

.card .card__inner--wrapper {
  background-color: rgba(var(--color-image-background));
  padding: var(--card-image-padding, 0px);
}

.card.collection-card-wrapper .card__inner .card__media {
  border-radius: calc(
    var(--collection-card-border-radius) -
      var(--collection-card-border-thickness)
  );
}

.card.collection-card-wrapper .card__inner.card__inner--round .card__media {
  border-radius: 50%;
}

.card.collection-card-wrapper.collection-card-style-card {
  background-color: rgba(var(--color-card-background));
}

.card.collection-card-wrapper.collection-card-style-card .card__inner--wrapper {
  background-color: transparent;
}

.card.collection-card-wrapper.collection-card-style-card
  .card__inner--wrapper
  .card__inner.card__inner--round {
  margin: 8px;
}

@media (max-width: 959px) {
  .card.collection-card-wrapper.collection-card-style-card
    .card__inner--wrapper
    .card__inner.card__inner--round {
    margin: 4px;
  }
}

.card.collection-card-wrapper.collection-card-style-card
  .card__inner--wrapper
  .card__inner:not(.card__inner--round)
  .card__media {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.card.collection-card-wrapper.collection-card-style-card .card__content {
  padding: 8px;
  margin-top: 0;
}

@media (max-width: 959px) {
  .card.collection-card-wrapper.collection-card-style-card .card__content {
    padding-bottom: 4px;
  }
}

.card.collection-card-wrapper.collection-card-style-card
  .card__content.collection__item__name {
  color: rgba(var(--color-card-text));
}

.card.product-card-wrapper .card__inner--wrapper.card__visible {
  overflow: visible;
}

.card.product-card-wrapper .card__inner--wrapper .card__inner .card__media {
  border-radius: calc(
    var(--product-card-border-radius) - var(--product-card-border-thickness)
  );
}

.card.product-card-wrapper
  .card__inner--wrapper
  .card__inner.card__inner--round
  .card__media {
  border-radius: 50%;
}

.card.product-card-wrapper.product-card-style-card {
  background-color: rgba(var(--color-card-background));
}

.card.product-card-wrapper.product-card-style-card .card__inner--wrapper {
  background-color: transparent;
}

.card.product-card-wrapper.product-card-style-card
  .card__inner--wrapper
  .card__inner.card__inner--round {
  margin: 8px;
}

@media (max-width: 959px) {
  .card.product-card-wrapper.product-card-style-card
    .card__inner--wrapper
    .card__inner.card__inner--round {
    margin: 4px;
  }
}

.card.product-card-wrapper.product-card-style-card
  .card__inner--wrapper
  .card__inner:not(.card__inner--round)
  .card__media {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.card.product-card-wrapper.product-card-style-card .card__content {
  padding: 0 24px 24px 24px;
}

@media (max-width: 959px) {
  .card.product-card-wrapper.product-card-style-card .card__content {
    padding: 0 8px 8px 8px;
  }
}

.card.product-card-wrapper.product-card-style-card
  .card__content
  .product__title {
  color: rgba(var(--color-card-text));
}

.card .card__media {
  position: absolute;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  z-index: 0;
  background-color: rgb(var(--color-image-background));
}

.card .card__media > img {
  height: 100%;
  object-fit: var(--image-fill-type, cover);
  object-position: var(--image-object-position, center center);
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card .card__media > .placeholder {
  width: 100%;
  height: 100%;
  background-color: rgb(var(--color-image-background));
  display: flex;
  align-items: center;
  justify-content: center;
}

.card .card__media.mobile--media--hover-effect > img + img,
.card .card__media.media--hover-effect > img + img {
  opacity: 0;
}

.card .card__badge:not(:empty) {
  position: absolute;
  padding: 4px 12px;
  background-color: rgb(
    var(--card-badge-bg, var(--color-discount-tag-background))
  );
  color: rgb(var(--card-badge-text-color, var(--color-discount-tag-text)));
  border-radius: var(--badge-border-radius);
}

.card .card__badge.sold-out-message {
  --card-badge-text-color: var(--color-page-background);
  --card-badge-bg: var(--color-text);
}

.card .card__badge.left_top {
  top: 20px;
  left: 20px;
}

.card .card__badge.left_bottom {
  bottom: 20px;
  left: 20px;
}

.card .card__badge.right_top {
  top: 20px;
  right: 20px;
}

.card .card__badge.right_bottom {
  bottom: 20px;
  right: 20px;
}

@media (max-width: 959px) {
  .card .card__badge.left_top {
    top: 10px;
    left: 10px;
  }
  .card .card__badge.left_bottom {
    bottom: 10px;
    left: 10px;
  }
  .card .card__badge.right_top {
    top: 10px;
    right: 10px;
  }
  .card .card__badge.right_bottom {
    bottom: 10px;
    right: 10px;
  }
}

.card .card__content {
  margin-top: 8px;
}

.card .card__content .product__title {
  margin: 0;
  margin-bottom: 8px;
}

.card .quick-add {
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
}

@media (max-width: 959px) {
  .card .quick-add {
    padding: 10px;
  }
}

.card .quick-add__submit {
  border-radius: 50px;
  padding: 2px;
  width: 40px;
  height: 40px;
  background-color: rgb(var(--color-button-secondary-background));
  color: rgb(var(--color-button-secondary-text));
  border: 1px solid rgb(var(--color-button-secondary-border));
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.card .quick-add__submit .icon-cart {
  width: 14px;
  height: 16px;
}

.card .quick-add__submit.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.card .quick-add__submit.loading > .icon-cart {
  display: none;
}

@media (min-width: 960px) {
  .card:hover
    .card__media.media--hover-effect
    > img:first-child:not(:only-child) {
    opacity: 0;
  }

  .hover-effect-container .hover-effect-target,
  .card .card__media.media--hover-effect > img:only-child,
  .card:hover .card__media.media--hover-effect > img + img {
    --duration-long: 400ms;
    transition: transform var(--duration-long) ease;
  }

  .hover-effect-container:hover .hover-effect-target,
  .card:hover .card__media.media--hover-effect > img:only-child,
  .card:hover .card__media.media--hover-effect > img + img {
    opacity: 1;
    transform: scale(1.1);
  }
}

@media (max-width: 959px) {
  .card:hover
    .card__media.mobile--media--hover-effect
    > img:first-child:not(:only-child) {
    opacity: 0;
  }

  .card .card__media.mobile--media--hover-effect > img:only-child,
  .card:hover .card__media.mobile--media--hover-effect > img + img {
    --duration-long: 400ms;
    transition: transform var(--duration-long) ease;
  }

  .card:hover .card__media.mobile--media--hover-effect > img:only-child,
  .card:hover .card__media.mobile--media--hover-effect > img + img {
    opacity: 1;
    transform: scale(1.1);
  }
}

.display-1-row,
.display-2-rows {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  padding-right: 4px;
  -webkit-box-orient: vertical;
}

.display-1-row {
  -webkit-line-clamp: 1;
}

.display-2-rows {
  -webkit-line-clamp: 2;
}
.product-card-wrapper .collect-btn-icon svg{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.4681 16.3307L7.14542 16.7127L7.4681 16.3307ZM9.99999 4.35389L9.62799 4.68797C9.72282 4.79357 9.85806 4.85389 9.99999 4.85389C10.1419 4.85389 10.2772 4.79357 10.372 4.68797L9.99999 4.35389ZM12.5319 16.3307L12.8546 16.7127L12.5319 16.3307ZM7.79079 15.9488C5.26862 13.8179 2.16666 11.6627 2.16666 7.60166H1.16666C1.16666 12.2269 4.76375 14.7005 7.14542 16.7127L7.79079 15.9488ZM2.16666 7.60166C2.16666 5.59836 3.22326 3.92984 4.6471 3.23231C6.02837 2.55564 7.87682 2.73806 9.62799 4.68797L10.372 4.0198C8.3733 1.79427 6.05509 1.429 4.20716 2.33428C2.40179 3.21872 1.16666 5.26181 1.16666 7.60166H2.16666ZM7.14542 16.7127C7.57326 17.0741 8.02474 17.4527 8.48062 17.7382C8.93539 18.0231 9.44736 18.25 9.99999 18.25V17.25C9.7193 17.25 9.39793 17.1328 9.01139 16.8907C8.62597 16.6494 8.22817 16.3183 7.79079 15.9488L7.14542 16.7127ZM12.8546 16.7127C15.2362 14.7005 18.8333 12.2269 18.8333 7.60166H17.8333C17.8333 11.6627 14.7314 13.8179 12.2092 15.9488L12.8546 16.7127ZM18.8333 7.60166C18.8333 5.26181 17.5982 3.21872 15.7928 2.33428C13.9449 1.429 11.6267 1.79427 9.62799 4.0198L10.372 4.68797C12.1232 2.73806 13.9716 2.55564 15.3529 3.23231C16.7767 3.92984 17.8333 5.59836 17.8333 7.60166H18.8333ZM12.2092 15.9488C11.7718 16.3183 11.374 16.6494 10.9886 16.8907C10.6021 17.1328 10.2807 17.25 9.99999 17.25V18.25C10.5526 18.25 11.0646 18.0231 11.5194 17.7382C11.9752 17.4527 12.4267 17.0741 12.8546 16.7127L12.2092 15.9488Z' fill='black'/%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
}
.product-card-wrapper .collect-btn-icon svg path{
  opacity: 0;  
}
.product-card-wrapper .collect-btn-icon svg:has(path[fill="#C20000"]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17' fill='none'%3E%3Cpath d='M8.83301 1.7558C10.7428 -0.120128 12.8918 -0.389635 14.626 0.459906C16.4313 1.34433 17.6659 3.38774 17.666 5.72748C17.666 10.3527 14.0691 12.8266 11.6875 14.8388C11.2597 15.2001 10.8083 15.5788 10.3525 15.8642C9.89775 16.1491 9.3856 16.3759 8.83301 16.3759C8.28043 16.3759 7.76821 16.1491 7.31348 15.8642C6.85769 15.5787 6.40627 15.2001 5.97852 14.8388C3.59686 12.8266 5.7042e-05 10.3527 0 5.72748C7.34113e-05 3.38775 1.23475 1.34433 3.04004 0.459906C4.77428 -0.389679 6.92318 -0.120088 8.83301 1.7558Z' fill='%23CA0000'/%3E%3C/svg%3E");
}
/* The ipad end responds to the mobile end in vertical screen */

/* @custom-media --tablet (max-width: 959px); */

/* @custom-media --gt-mobile (min-width: 751px); */

/* detectingScreen need to consider the configuration of the tablet */