.common-product-card {
  --button-background-color: 51, 51, 51;
  --button-text-color: 255, 255, 255;
  --common-product-card-padding: 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: rgb(var(--color-product-card-background-color));
}

.common-product-card__media {
  
}

.common-product-card__image-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.common-product-card__image-wrapper {
  display: block;
  width: 100%;
  aspect-ratio: var(--common-product-card-aspect-ratio);
  overflow: hidden;
  background-color: rgb(243 243 243 / 100%);
}

.common-product-card__image-wrapper > svg {
  width: 100%;
  height: 100%;
}

.common-product-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--common-product-card-fit);
  transition: opacity 0.3s ease;
}

.common-product-card__image--next {
  opacity: 0;
  position: absolute;
  inset: 0;
}

@media (min-width: 960px) {
  .common-product-card__image-wrapper.hover:hover .common-product-card__image:first-child {
    opacity: 0;
  }

  .common-product-card__image-wrapper.hover:hover .common-product-card__image--next {
    opacity: 1;
  }
}

.product-card-fixed {
  position: absolute;
  inset-block-start: var(--common-product-card-padding);
  inset-inline-start: var(--common-product-card-padding);
  z-index: 1;
}

.common-product-card__badge {
  position: static;
}

.common-product-card__badge-tag {
  display: inline-flex;
  padding: 4px 15px;
  border-radius: var(--product-discount-radius, 3px);
}

.common-product-card__badge-tag--sale {
  color: #000;
  background-color: #ffe600;
}

.common-product-card__badge-tag--sold-out {
  color: #000;
  background-color: #fff;
}

.common-product-card__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-end;
  padding: var(--common-product-card-padding);
}

.common-product-card__title {
  overflow: hidden;
  color: #321e1e;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.common-product-card__price {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.common-product-card__price-item {
  color: rgb(var(--color-sale));
}

.common-product-card__price-item--compare {
  color: rgb(51 51 51 / 70%);
  text-decoration: line-through;
}

.common-product-card__button {
  position: absolute;
  inset-inline: var(--common-product-card-padding);
  inset-block-end: 0;
  z-index: 2;
  text-align: center;
  opacity: 0;
  transition: inset-block-end 0.3s ease, opacity 0.3s ease;
}

.common-product-card__button .button {
  background-color: rgb(var(--button-background-color));
  color: rgb(var(--button-text-color));
  width: 100%;
}

.common-product-card__button .button:hover {
  background-color: rgb(var(--button-background-color));
  color: rgb(var(--button-text-color));
}

.common-product-card__button .button.loading button-content {
  opacity: 0;
}

.common-product-card__button .button.loading svg {
  display: block;
}

.common-product-card__title,
.common-product-card__price {
  transition: opacity 0.3s ease;
}

@media (min-width: 960px) {
  .common-product-card:hover .common-product-card__title,
  .common-product-card:hover .common-product-card__price {
    opacity: 0;
  }

  .common-product-card:hover .common-product-card__button {
    inset-block-end: 20px;
    opacity: 1;
  }
}

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

  .common-product-card__button {
    position: static;
    padding: 0;
    opacity: 1;
  }

  .common-product-card__badge-tag {
    padding: 4px 10px;
  }
}