.vertical-card-wrapper {
  width: 20rem;
  border: 1px solid lightgray;
  border-radius: 10px;
}

.responsive-image {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.add-btn,
.wishlist-btn {
  margin: 0.5rem;
  width: 95%;
  border-radius: 5px;
  font-size: calc(1.2 * var(--default-font-size));
}

.product-discount-price {
  font-size: calc(1.3 * var(--default-font-size));
  font-weight: 900;
}

.product-original-price {
  font-size: calc(1.3 * var(--default-font-size));
  text-decoration: line-through;
}

.product-discount {
  font-weight: 900;
  font-size: calc(1.3 * var(--default-font-size));
  color: var(--success-dark-color);
}

.horizontal-card-wrapper {
  width: 35rem;
  border: 1px solid lightgray;
  border-radius: 10px;
}

.vertical-card-badge-wrapper {
  position: absolute;
  background-color: var(--primary-color);
  color: var(--white-color);
  top: 0;
  left: 0;
}

.dismiss-badge-wrapper {
  position: absolute;
  font-size: calc(2.5 * var(--default-font-size));
  background-color: var(--primary-color);
  color: var(--white-color);
  top: 5px;
  right: 5px;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  cursor: pointer;
}

.out-stock-wrapper {
  position: absolute;
  color: var(--white-color);
  border-radius: 10px;
  background-color: rgba(62, 67, 75, 0.5);
  font-size: calc(3 * var(--default-font-size));
  width: 20rem;
  height: 100%;
  top: 0;
  text-align: center;
  padding-top: 10rem;
  font-weight: 900;
}

.box-shadow {
  box-shadow: 4px 6px 5px 0px rgba(0, 0, 0, 0.19);
}