/* card style */

.card-info-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.card-info {
  display: flex;
  gap: 5px;
  flex-direction: column;
}

.card-descr {
  width: 100%;
  font-family: var(--fontSan);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: #aeaeb2;
}

.card-title {
  font-family: var(--fontSan);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.2;
  color: var(--white);
}

.card-price {
  font-family: var(--fontSan);
  font-weight: 400;
  font-size: 18px;
  line-height: 1, 3;
  color: var(--white);
}

.card {
  position: relative;
  width: 210px;
  padding: 18px 14px;
  background: url(../../image/cards/card-bd.png) 0 0 / cover no-repeat;
}

/* .deals__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../../image/cards/card-bd-hover.svg) 0% 0% / cover no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
} */

.card__img-cover-inner {
  width: 100%;
  height: 100%;
  /* display: flex;
  align-self: center; */
}

/* deals section */


.deals__cards {
  display: grid;
  gap: 20px;
  align-items: stretch;
  /* grid-template-columns: repeat(auto-fit, 234px); */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  justify-content: start;
}

.deals__card-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 285px;
}

.main-deals__card-inner .deals__card {
  height: 100% !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.main-deals__card-inner .card-info-inner {
  display: flex;
  flex-direction: column;
  justify-content: start;
  justify-content: space-between;
  padding-right: 5px;
  padding-left: 4px;
}

.deals__card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  transition: var(--transition);
  padding-top: 15px;
  padding-right: 14px;
}

.buttons__block {
  display: flex;
  gap: 6px;
  justify-content: space-between;
  margin-top: 19px;
}

.button__cart {
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  background: var(--targeted-skins-accent-black-raspberry);
}

.button__cart:hover {
  background: linear-gradient(180deg, #f13555 0%, #a2273c 100%);
}

/* .buttons__block,
.card__like-btn {
  transition: var(--transition);
  display: none;
  visibility: hidden;
  opacity: 0;
  max-height: 0;
} */

/*.button__buy-now {
  height: 31px;
  padding: 13px 28px;
  width: 100%;
  background: url(../../image/button-hover-bg.svg) 0% 0% / cover no-repeat;
  font-size: 14px;
}*/




.float-slider {
  width: 100%;
  padding: 4px 0;
}

.float-track {
  position: relative;
  height: 3px;
  border-radius: 4px;
  background: linear-gradient(to right,
      #00ff00 0%,
      /* green */
      #00ffff 25%,
      /* cyan */
      #ffff00 50%,
      /* yellow */
      #ffa500 75%,
      /* orange */
      #ff0000 100%
      /* red */
    );
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.5);
}

.float-indicator {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 14px;
  background: white;
  border-radius: 1px;
  box-shadow: 0 0 2px #000;
}

.margin-auto {
  margin: auto;
}


.img-holder {
  overflow: hidden;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: center;
}

.card__img-cover {
  position: relative;
  width: 80%;
  z-index: var(--z-index-2);
  /* background: url(../../image/cards/card-img-bg.webp) 0 0 / cover no-repeat; */
}

.card__img-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: var(--z-index-1);
}

/* .img-holder::after {
  content: url(../../image/cards/card-img-bg.webp);
  position: absolute;
  inset: 0;
  z-index: var(--z-index-0);
} */