.card-item {
  position: relative;
}
.card-item .img {
  background-color: #fafafa;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  padding-bottom: 35px;
  margin-bottom: 16px;
  text-align: center;
}
.card-item .img .brand {
  padding: 24px 10px 30px;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  color: #afb6c3;
  text-align: center;
  margin: 0;
}
.card-item .img .brand span {
  border-radius: 8px;
  padding: 4px 6px;
  background-color: #fafafa;
}
.card-item .img .labels {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 20px;
  top: 20px;
  gap: 8px;
  --width: 40px;
  --font-size: 10px;
}
@media (max-width: 959px) and (min-width: 640px), (max-width: 389px) {
  .card-item .img .labels {
    left: 10px;
    top: 10px;
    --width: 30px;
    --font-size: 9px;
  }
}
.card-item .img .labels label {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  width: var(--width, 40px);
  height: var(--width, 40px);
  color: #fff;
  font-weight: 700;
  font-size: var(--font-size);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.card-item .img .labels label.discount {
  mask-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.3789 1.49615C20.1111 0.268513 21.889 0.268513 22.6212 1.49615C23.2249 2.50842 24.5984 2.72597 25.4853 1.94979C26.561 1.00847 28.2519 1.5579 28.5689 2.95169C28.8302 4.10097 30.0693 4.7323 31.1526 4.26819C32.4665 3.70535 33.905 4.75042 33.7757 6.17393C33.6691 7.34772 34.6524 8.33104 35.8262 8.22443C37.2497 8.09515 38.2948 9.53357 37.7319 10.8475C37.2678 11.9309 37.8991 13.1699 39.0484 13.4312C40.4422 13.7482 40.9916 15.4391 40.0503 16.5148C39.2741 17.4017 39.4917 18.7752 40.504 19.3789C41.7316 20.1111 41.7316 21.889 40.504 22.6212C39.4917 23.2249 39.2741 24.5984 40.0503 25.4853C40.9916 26.561 40.4422 28.2519 39.0484 28.5689C37.8991 28.8302 37.2678 30.0693 37.7319 31.1526C38.2948 32.4665 37.2497 33.905 35.8262 33.7757C34.6524 33.6691 33.6691 34.6524 33.7757 35.8262C33.905 37.2497 32.4665 38.2948 31.1526 37.7319C30.0693 37.2678 28.8302 37.8991 28.5689 39.0484C28.2519 40.4422 26.561 40.9916 25.4853 40.0503C24.5984 39.2741 23.2249 39.4917 22.6212 40.504C21.889 41.7316 20.1111 41.7316 19.3789 40.504C18.7752 39.4917 17.4017 39.2741 16.5148 40.0503C15.4391 40.9916 13.7482 40.4422 13.4312 39.0484C13.1699 37.8991 11.9309 37.2678 10.8475 37.7319C9.53357 38.2948 8.09515 37.2497 8.22443 35.8262C8.33104 34.6524 7.34772 33.6691 6.17393 33.7757C4.75042 33.905 3.70535 32.4665 4.26819 31.1526C4.7323 30.0693 4.10097 28.8302 2.95169 28.5689C1.5579 28.2519 1.00847 26.561 1.94979 25.4853C2.72597 24.5984 2.50842 23.2249 1.49615 22.6212C0.268513 21.889 0.268513 20.1111 1.49615 19.3789C2.50842 18.7752 2.72597 17.4017 1.94979 16.5148C1.00847 15.4391 1.5579 13.7482 2.95169 13.4312C4.10097 13.1699 4.7323 11.9309 4.26819 10.8475C3.70535 9.53357 4.75042 8.09515 6.17393 8.22443C7.34772 8.33104 8.33104 7.34772 8.22443 6.17393C8.09515 4.75042 9.53357 3.70535 10.8475 4.26819C11.9309 4.7323 13.1699 4.10097 13.4312 2.95169C13.7482 1.5579 15.4391 1.00847 16.5148 1.94979C17.4017 2.72597 18.7752 2.50842 19.3789 1.49615Z' fill='black'/%3E%3C/svg%3E%0A");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: #fa7a35;
}
.card-item .img .labels label.new {
  width: calc(var(--width, 40px) - 4px);
  height: calc(var(--width, 40px) - 4px);
  background-color: #2ecc71;
}
.card-item .img .colors {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  left: 12px;
  bottom: 12px;
  gap: 4px;
}
.card-item .img .colors a,
.card-item .img .colors span {
  border-radius: 100%;
  width: 16px;
  height: 16px;
  background-color: var(--clr);
  box-shadow: inset 0 -2px 8px 0 rgba(0, 0, 0, 0.05);
  font-size: 0;
}
.card-item .img .colors a {
  filter: drop-shadow(1px 1px 3px transparent);
  transition: filter 0.3s;
}
.card-item .img .colors a:hover {
  filter: drop-shadow(1px 1px 3px #888);
}
.card-item .img .colors span {
  position: relative;
}
.card-item .img .colors span:before {
  content: "";
  border-radius: 100%;
  display: block;
  margin: -2px;
  width: 18px;
  height: 18px;
  border: 1px solid #853103;
}
.card-item .img .btns {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  right: 16px;
  bottom: 16px;
  gap: 8px;
  --font-size: 20px;
  --padding: 10px;
}
@media (max-width: 959px) and (min-width: 640px), (max-width: 389px) {
  .card-item .img .btns {
    right: 10px;
    bottom: 10px;
    --padding: 8px;
    --font-size: 14px;
  }
}
.card-item .img .btns a {
  font-size: var(--font-size);
  backdrop-filter: blur(8px);
  background-color: rgba(11, 13, 15, 0.2);
  border-radius: 40px;
  padding: var(--padding);
  color: #fff;
  text-decoration: unset;
}
@media (max-width: 959px) {
  .card-item .img .btns a:first-child {
    display: none;
  }
}
@media (pointer: fine) {
  .card-item .img .btns a {
    opacity: 0;
    transition: background-color 0.3s, margin-bottom 0.3s, opacity 0.3s;
  }
  .card-item .img .btns a:not(:last-child) {
    margin-bottom: -40px;
  }
}
.card-item .img .btns a:hover {
  background-color: rgba(11, 13, 15, 0.5);
}
.card-item .img .btns a span {
  display: flex;
}
.card-item .img .btns a:has(.icon-add-to-cart) {
  background-color: #fa7a35;
}
.card-item .img .btns a:has(.icon-add-to-cart):hover {
  background-color: #f05806;
}
.card-item .img img {
  max-height: 232px;
  height: 100%;
  object-fit: contain;
  transform: scale(1);
  transition: transform 0.3s;
}
.card-item a.link-product {
  text-decoration: unset;
}
.card-item a.link-product:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.card-item a.link-product .name {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: #0b0d0f;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  height: 1.4em;
}
.card-item .description {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: #838da1;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  height: 1.4em;
}
.card-item .price {
  margin: 8px 0 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #0b0d0f;
}
.card-item .price .old-price {
  margin: 0 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #838da1;
  position: relative;
}
.card-item .price .old-price:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #838da1;
  transform: rotate(-20deg) translateY(-50%);
  transform-origin: center;
  z-index: 0;
  box-shadow: 0 0 1px #838da1;
}
.card-item .price[data-discount]:after {
  content: attr(data-discount);
  display: inline-block;
  padding: 1px 6px;
  border-radius: 12px;
  background-color: #fa7a35;
  font-weight: 400;
  font-size: 12px;
  text-align: center;
  color: #fff;
}
.card-item .stoc {
  font-weight: 700;
  font-size: 16px;
  color: #aa0800;
  margin: 8px 0 0;
}
@media (pointer: fine) {
  .card-item:hover img {
    transform: scale(1.1);
  }
}
.card-item:hover .btns a {
  margin-bottom: 0 !important;
  opacity: 1;
}

/*# sourceMappingURL=card-item.css.map */