@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap");

/*
section.inner-promo(
  style="background-image: image-set(url('./img/inner-promo.webp') 1x, url('./img/inner-promo@2x.webp') 2x);
         -webkit-background-image: -webkit-image-set(url('./img/inner-promo.webp') 1x, url('./img/inner-promo@2x.webp') 2x);"
)
 @media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{background:url('images/box-bg@2x.png') no-repeat top left;}
}
 */

*,
*:after,
*:before {
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center;
}

.prod-card {
  display: block;
  display: flex;
  flex-direction: column;
  position: relative;
  font-family: "Montserrat", sans-serif;
  background-color: #fff;
  text-decoration: none;
}

.prod-card *,
.prod-card *:after,
.prod-card *:before {
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: center;
}

.prod-card .prod-card-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.prod-card p,
.prod-card h2,
.prod-card h3,
.prod-card h4,
.prod-card h5,
.prod-card h6,
.prod-card ol,
.prod-card ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
}

.prod-card .badge-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: absolute;
  z-index: 4;
  gap: 3px;
  top: 10px;
  left: 10px;
  right: 40px;
}

.prod-card .swiper {
  position: relative;
  z-index: 3;
  min-height: 0;
  aspect-ratio: 3/4;
  width: 100%;
}

.prod-card .swiper .swiper-slide {
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  height: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3/4;
}

.prod-card .swiper .swiper-slide img {
  border-radius: 8px;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.prod-card .swiper .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background-color: #CCCCCC;
  opacity: 1;
  margin: 0 2px;
  transition: 0.3s;
  vertical-align: middle;
}

.prod-card .swiper .swiper-pagination-bullet-active {
  width: 4px;
  height: 4px;
}

.prod-card .swiper-slide a {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.prod-card .badge-green,
.prod-card .badge-red,
.prod-card .badge-orange,
.prod-card .badge-blue {
  color: white;
  border-radius: 4px;
  white-space: nowrap;
  padding: 2px 5px;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 600;
  font-size: 10px;
  text-transform: capitalize;
}

.prod-card .btn-compare {
  display: inline-block;
  border-radius: 2px;
  width: 20px;
  height: 20px;
  border: 0;
  top: 10px;
  right: 10px;
  position: absolute;
  z-index: 4;
  background-color: #acacac;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3095 1.78571C11.4674 1.78571 11.6188 1.84843 11.7304 1.96006C11.842 2.07168 11.9048 2.22309 11.9048 2.38095V11.9048H10.7143V2.38095C10.7143 2.22309 10.777 2.07168 10.8886 1.96006C11.0003 1.84843 11.1517 1.78571 11.3095 1.78571ZM7.73809 3.57143C7.89596 3.57143 8.04736 3.63414 8.15899 3.74577C8.27062 3.8574 8.33333 4.0088 8.33333 4.16667V11.9048H7.14286V4.16667C7.14286 4.0088 7.20557 3.8574 7.3172 3.74577C7.42883 3.63414 7.58023 3.57143 7.73809 3.57143ZM4.16667 0C4.32453 0 4.47593 0.0627124 4.58756 0.174341C4.69919 0.28597 4.7619 0.437371 4.7619 0.595238V11.9048H3.57143V0.595238C3.57143 0.437371 3.63414 0.28597 3.74577 0.174341C3.8574 0.0627124 4.0088 0 4.16667 0ZM0.595238 4.7619C0.753105 4.7619 0.904506 4.82462 1.01613 4.93625C1.12776 5.04787 1.19048 5.19928 1.19048 5.35714V11.9048H0V5.35714C0 5.19928 0.0627124 5.04787 0.174341 4.93625C0.28597 4.82462 0.437371 4.7619 0.595238 4.7619Z' fill='white' /%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  background-size: 12px;
  transition: 0.3s;
}

.prod-card .btn-compare.is-active,
.prod-card .btn-compare:hover {
  background-color: #858585;
}

.prod-card .btn-compare .prod-tooltip {
  left: -30px;
}

.prod-card .badge-green {
  background: #4caf50;
}

.prod-card .badge-red {
  background: #e53935;
}

.prod-card .badge-orange {
  background: #fb8c00;
}

.prod-card .badge-blue {
  background: #00bcd4;
}

.prod-card .prod-body {
  padding: 7px;
  padding-bottom: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  row-gap: 7px;
}

.prod-card .prod-price {
  display: flex;
  -moz-column-gap: 8px;
  column-gap: 8px;
  align-items: center;
  padding-left: 5px;
}

.prod-card .prod-price .bold-17 {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.29;
  color: #000;
  white-space: nowrap;
}

.prod-card .prod-price .bold-12 {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.67;
  color: #d51825;
  white-space: nowrap;
}

.prod-card .prod-price .muted-12 {
  text-decoration: line-through;
  white-space: nowrap;
}

.prod-card .muted-12 {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.67;
  color: #858585;
}

.prod-card .prod-title {
  flex: 1;
}

.prod-card .prod-title .fs-13 {
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  color: #000;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.prod-card .prod-articul-copy {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  display: inline-block;
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8.85463 0H2.75702C2.52119 0.000268806 2.2951 0.0940683 2.12835 0.260821C1.9616 0.427573 1.8678 0.653661 1.86753 0.889484V1.86753H0.888875C0.653197 1.86775 0.427233 1.96146 0.260583 2.12811C0.0939333 2.29476 0.000215133 2.52073 0 2.75641V8.85503C0.000215133 9.09071 0.0939333 9.31667 0.260583 9.48332C0.427233 9.64997 0.653197 9.74369 0.888875 9.74391H6.9875C7.22318 9.74369 7.44914 9.64997 7.61579 9.48332C7.78244 9.31667 7.87616 9.09071 7.87638 8.85503V7.87638H8.85442C9.09023 7.87605 9.31629 7.78224 9.48303 7.6155C9.64977 7.44875 9.74358 7.2227 9.74391 6.98689V0.889484C9.74369 0.65368 9.64994 0.427591 9.48322 0.260833C9.3165 0.0940749 9.09043 0.000268901 8.85463 0ZM7.47013 8.85503C7.47002 8.983 7.41914 9.10569 7.32865 9.19618C7.23816 9.28667 7.11547 9.33755 6.9875 9.33766H0.888875C0.760908 9.33755 0.638213 9.28667 0.547726 9.19618C0.45724 9.10569 0.406358 8.983 0.40625 8.85503V2.75641C0.406358 2.62844 0.45724 2.50574 0.547726 2.41526C0.638213 2.32477 0.760908 2.27389 0.888875 2.27378H6.9875C7.11547 2.27389 7.23816 2.32477 7.32865 2.41526C7.41914 2.50574 7.47002 2.62844 7.47013 2.75641V8.85503ZM9.33786 6.98689C9.33775 7.11502 9.28681 7.23787 9.19621 7.32847C9.10561 7.41907 8.98275 7.47002 8.85463 7.47013H7.87658V2.75641C7.87636 2.52073 7.78265 2.29476 7.616 2.12811C7.44935 1.96146 7.22338 1.86775 6.9877 1.86753H2.27378V0.889484C2.27389 0.761356 2.32484 0.638506 2.41544 0.547905C2.50604 0.457304 2.62889 0.406358 2.75702 0.40625H8.85463C8.98275 0.406358 9.10561 0.457304 9.19621 0.547905C9.28681 0.638506 9.33775 0.761356 9.33786 0.889484V6.98689Z' fill='%23858585' /%3e%3c/svg%3e");
}

.prod-card .prod-articul {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.prod-card .prod-articul .muted-12 {
  line-height: 1;
}

.prod-card .prod-articul {
  z-index: 3;
  position: relative;
}

.prod-card .prod-tooltip {
  position: absolute;
  top: -24px;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.prod-card .prod-tooltip p {
  border-radius: 2px;
  padding: 2px 4px;
  position: absolute;
  top: 0;
  z-index: 2;
  background: #acacac;
  color: white;
  font-weight: 500;
  font-size: 10px;
  margin: 0;
}

.prod-card .prod-tooltip p:after {
  content: "";
  z-index: 1;
  width: 10px;
  height: 7px;
  display: inline-block;
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.05299 6.6819C4.85387 6.9652 4.43401 6.9652 4.23488 6.6819L0.0917349 0.787527C-0.141135 0.456227 0.0958385 0 0.500793 0L8.78708 0C9.19204 0 9.42901 0.456226 9.19614 0.787526L5.05299 6.6819Z' fill='%23ACACAC' /%3e%3c/svg%3e");
}

.prod-card .prod-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}

.prod-card .prod-stock-block {
  display: flex;
  align-items: center;
  -moz-column-gap: 6px;
  column-gap: 6px;
}

.prod-card .prod-stock-block .muted-12 {
  flex-shrink: 0;
  line-height: 1;
}

.prod-card .prod-stock {
  display: flex;
  align-items: center;
  -moz-column-gap: 1.5px;
  column-gap: 1.5px;
}

.prod-card .prod-stock span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #ccc;
}

.prod-card .prod-stock span.dot-green {
  background-color: #008F0A;
}

.prod-card .prod-stock span.dot-yell {
  background-color: #EF7F00;
}

.prod-card .prod-stock span.dot-red {
  background-color: #EF0000;
}

.prod-card .open-drop-btn {
  width: 16px;
  height: 16px;
  position: relative;
  z-index: 3;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 9px 5px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='9' height='5' viewBox='0 0 9 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8.3999 0.400006L4.3999 3.90001L0.399902 0.400005' stroke='%23858585' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
  display: none;
}

.prod-card .muted-10 {
  font-size: 10px;
  line-height: 100%;
  color: #858585;
}

.prod-card .prod-stock-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  padding: 5px;
}

.prod-card .prod-stock-item {
  display: flex;
}

.prod-card .prod-stock-item > .muted-10 {
  flex: 1;
}

.prod-card .prod-stock-item .prod-stock-block {
  flex-shrink: 0;
  width: 107px;
  -moz-column-gap: 3px;
  column-gap: 3px;
}

.prod-card .prod-stock-item .prod-stock-block .muted-10 {
  text-align: left;
}

.prod-card .prod-stock-item .prod-stock {
  width: 28px;
  -moz-column-gap: 1px;
  column-gap: 1px;
}

.prod-card .prod-stock-item .prod-stock span {
  width: 6px;
  height: 6px;
}

.prod-card .prod-card__drop {
  height: 0;
  overflow: hidden;
  transition: 0.3s;
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.products-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  -moz-column-gap: 10px;
  column-gap: 10px;
  row-gap: 30px;
}

@media (min-width: 1200px) {
  .prod-card:hover .prod-card__drop {
    height: auto;
    opacity: 1;
  }
}

@media (max-width: 1199px) {
  .prod-card .open-drop-btn {
    display: block;
  }

  .prod-card .prod-card__drop.is-open {
    height: auto;
    opacity: 1;
  }
}

@media (max-width: 1023px) {
  .prod-card .prod-body {
    padding: 4px;
  }

  .prod-card .prod-price {
    padding: 0;
    -moz-column-gap: 6px;
    column-gap: 6px;
  }
}

@media (max-width: 767px) {
  .prod-card .prod-price .bold-17 {
    font-size: 13px;
    line-height: 1.69;
  }

  .prod-card .prod-price .bold-12 {
    font-size: 10px;
    line-height: 2;
  }

  .prod-card .muted-12 {
    font-size: 10px;
    line-height: 2;
  }

  .prod-card .prod-title .fs-13 {
    font-size: 11px;
  }

  .prod-card .prod-articul .muted-12 {
    font-size: 8px;
  }

  .prod-card .prod-stock-block .muted-12 {
    font-size: 9px;
  }

  .prod-card .prod-stock span {
    width: 5px;
    height: 5px;
  }

  .prod-card .prod-stock-list {
    gap: 4px;
    padding: 4px;
  }

  .prod-card .prod-stock-item .prod-stock-block .muted-10 {
    font-size: 8px;
  }

  .prod-card .prod-stock-item > .muted-10,
  .prod-card .prod-stock-item .prod-stock-block .muted-10 {
    font-size: 8px;
  }

  .prod-card .prod-stock-item .prod-stock-block {
    width: 90px;
    -moz-column-gap: 3px;
    column-gap: 3px;
  }

  .prod-card .prod-stock-item .prod-stock {
    width: 25px;
  }

  .products-cards-grid {
    row-gap: 10px;
  }
}

@media (max-width: 575px) {
  .prod-card .swiper .swiper-slide {
    aspect-ratio: 16/23;
  }

  .products-cards-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}