.discount-timer{
  background: var(--blue-F9);
  font-size: 16px;
  color: white;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 24px;
  display:flex;
  align-items: center;
  gap: 4px;
}
.popular_item {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.popular_item__top {
  position: relative;
  background: var(--grey-FA);
  border-radius: 24px;
  overflow: hidden;
  max-height: 295px;
}

.popular_item__img {
  object-fit: contain;
  width: 100%;
  max-height: 295px;
  min-height:295px;
  mix-blend-mode: darken;
}

.popular_item__discount {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: var(--blue-F9);
  font-size: 16px;
  color: white;
  font-weight: 500;
  border-radius: 9999px;
  padding: 2px 8px;
}

.popular_item__like, .popular_item__comparison, .compare-label,
.compare_item {
  position: absolute;
  top: 10px;
  z-index: 1;
  cursor: pointer;
}

.compare_item {
  top: 70px;
}

.compare-label,
.popular_item__comparison {
  content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.26385 14.6796V13.7323C5.26385 12.8391 5.26385 12.3926 4.98639 12.1151C4.70892 11.8376 4.26236 11.8376 3.36923 11.8376C2.47609 11.8376 2.02953 11.8376 1.75207 12.1151C1.47461 12.3926 1.47461 12.8391 1.47461 13.7323V14.6796C1.47461 15.5727 1.47461 16.0193 1.75207 16.2967C2.02953 16.5742 2.47609 16.5742 3.36923 16.5742C4.26236 16.5742 4.70892 16.5742 4.98639 16.2967C5.26385 16.0193 5.26385 15.5727 5.26385 14.6796Z' fill='%23E5E5E5'/%3E%3Cpath d='M11.8947 14.6795V9.94296C11.8947 9.04983 11.8947 8.60327 11.6172 8.32581C11.3398 8.04834 10.8932 8.04834 10.0001 8.04834C9.10696 8.04834 8.6604 8.04834 8.38294 8.32581C8.10547 8.60327 8.10547 9.04983 8.10547 9.94296V14.6795C8.10547 15.5726 8.10547 16.0192 8.38294 16.2967C8.6604 16.5741 9.10696 16.5741 10.0001 16.5741C10.8932 16.5741 11.3398 16.5741 11.6172 16.2967C11.8947 16.0192 11.8947 15.5726 11.8947 14.6795Z' fill='%23E5E5E5'/%3E%3Cpath d='M18.5256 14.6797V6.1539C18.5256 5.26076 18.5256 4.8142 18.2481 4.53673C17.9706 4.25928 17.5241 4.25928 16.6309 4.25928C15.7378 4.25928 15.2913 4.25928 15.0138 4.53673C14.7363 4.8142 14.7363 5.26076 14.7363 6.1539V14.6797C14.7363 15.5728 14.7363 16.0194 15.0138 16.2968C15.2913 16.5743 15.7378 16.5743 16.6309 16.5743C17.5241 16.5743 17.9706 16.5743 18.2481 16.2968C18.5256 16.0194 18.5256 15.5728 18.5256 14.6797Z' fill='%23E5E5E5'/%3E%3C/svg%3E");
  right: 38px;
}

.compare-label:has(input:checked),
.popular_item__comparison:hover,
.compare-label:hover,
.compare-label:active,
.popular_item__comparison:active {
  content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.26385 14.6796V13.7323C5.26385 12.8391 5.26385 12.3926 4.98639 12.1151C4.70892 11.8376 4.26236 11.8376 3.36923 11.8376C2.47609 11.8376 2.02953 11.8376 1.75207 12.1151C1.47461 12.3926 1.47461 12.8391 1.47461 13.7323V14.6796C1.47461 15.5727 1.47461 16.0193 1.75207 16.2967C2.02953 16.5742 2.47609 16.5742 3.36923 16.5742C4.26236 16.5742 4.70892 16.5742 4.98639 16.2967C5.26385 16.0193 5.26385 15.5727 5.26385 14.6796Z' fill='%238D31F9'/%3E%3Cpath d='M11.8947 14.6795V9.94296C11.8947 9.04983 11.8947 8.60327 11.6172 8.32581C11.3398 8.04834 10.8932 8.04834 10.0001 8.04834C9.10696 8.04834 8.6604 8.04834 8.38294 8.32581C8.10547 8.60327 8.10547 9.04983 8.10547 9.94296V14.6795C8.10547 15.5726 8.10547 16.0192 8.38294 16.2967C8.6604 16.5741 9.10696 16.5741 10.0001 16.5741C10.8932 16.5741 11.3398 16.5741 11.6172 16.2967C11.8947 16.0192 11.8947 15.5726 11.8947 14.6795Z' fill='%238D31F9'/%3E%3Cpath d='M18.5256 14.6797V6.1539C18.5256 5.26076 18.5256 4.8142 18.2481 4.53673C17.9706 4.25928 17.5241 4.25928 16.6309 4.25928C15.7378 4.25928 15.2913 4.25928 15.0138 4.53673C14.7363 4.8142 14.7363 5.26076 14.7363 6.1539V14.6797C14.7363 15.5728 14.7363 16.0194 15.0138 16.2968C15.2913 16.5743 15.7378 16.5743 16.6309 16.5743C17.5241 16.5743 17.9706 16.5743 18.2481 16.2968C18.5256 16.0194 18.5256 15.5728 18.5256 14.6797Z' fill='%238D31F9'/%3E%3C/svg%3E");
}

.popular_item__like {
  content: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='50' height='50' rx='25' fill='white'/%3E%3Cpath d='M32.4626 16.9942C29.7809 15.3492 27.4404 16.0121 26.0344 17.068C25.4578 17.501 25.1696 17.7174 25 17.7174C24.8304 17.7174 24.5422 17.501 23.9656 17.068C22.5596 16.0121 20.2191 15.3492 17.5374 16.9942C14.0181 19.1529 13.2217 26.2749 21.3395 32.2834C22.8857 33.4278 23.6588 34 25 34C26.3412 34 27.1143 33.4278 28.6605 32.2834C36.7783 26.2749 35.9819 19.1529 32.4626 16.9942Z' stroke='%238D31F9' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  right: 10px;
}

.popular_item__like:hover, .popular_item__like:active, .popular_item__like.i_prod_active {
  content: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='50' height='50' rx='25' fill='white'/%3E%3Cpath d='M32.4626 16.9942C29.7809 15.3492 27.4404 16.0121 26.0344 17.068C25.4578 17.501 25.1696 17.7174 25 17.7174C24.8304 17.7174 24.5422 17.501 23.9656 17.068C22.5596 16.0121 20.2191 15.3492 17.5374 16.9942C14.0181 19.1529 13.2217 26.2749 21.3395 32.2834C22.8857 33.4278 23.6588 34 25 34C26.3412 34 27.1143 33.4278 28.6605 32.2834C36.7783 26.2749 35.9819 19.1529 32.4626 16.9942Z' fill='%23E3327F'/%3E%3C/svg%3E");
}

.compare_item {
  content: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='50' height='50' rx='25' fill='white'/%3E%3Cpath d='M20 30V29C20 28.0572 20 27.5858 19.7071 27.2929C19.4142 27 18.9428 27 18 27C17.0572 27 16.5858 27 16.2929 27.2929C16 27.5858 16 28.0572 16 29V30C16 30.9428 16 31.4142 16.2929 31.7071C16.5858 32 17.0572 32 18 32C18.9428 32 19.4142 32 19.7071 31.7071C20 31.4142 20 30.9428 20 30Z' stroke='%238D31F9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M27 30V25C27 24.0572 27 23.5858 26.7071 23.2929C26.4142 23 25.9428 23 25 23C24.0572 23 23.5858 23 23.2929 23.2929C23 23.5858 23 24.0572 23 25V30C23 30.9428 23 31.4142 23.2929 31.7071C23.5858 32 24.0572 32 25 32C25.9428 32 26.4142 32 26.7071 31.7071C27 31.4142 27 30.9428 27 30Z' stroke='%238D31F9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M34 30V21C34 20.0572 34 19.5858 33.7071 19.2929C33.4142 19 32.9428 19 32 19C31.0572 19 30.5858 19 30.2929 19.2929C30 19.5858 30 20.0572 30 21V30C30 30.9428 30 31.4142 30.2929 31.7071C30.5858 32 31.0572 32 32 32C32.9428 32 33.4142 32 33.7071 31.7071C34 31.4142 34 30.9428 34 30Z' stroke='%238D31F9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  right: 10px;
}

@media (hover: hover) {
  .compare_item:hover {
    content: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='50' height='50' rx='25' fill='white'/%3E%3Cpath d='M20 30V29C20 28.0572 20 27.5858 19.7071 27.2929C19.4142 27 18.9428 27 18 27C17.0572 27 16.5858 27 16.2929 27.2929C16 27.5858 16 28.0572 16 29V30C16 30.9428 16 31.4142 16.2929 31.7071C16.5858 32 17.0572 32 18 32C18.9428 32 19.4142 32 19.7071 31.7071C20 31.4142 20 30.9428 20 30Z' fill='%238D31F9'/%3E%3Cpath d='M27 30V25C27 24.0572 27 23.5858 26.7071 23.2929C26.4142 23 25.9428 23 25 23C24.0572 23 23.5858 23 23.2929 23.2929C23 23.5858 23 24.0572 23 25V30C23 30.9428 23 31.4142 23.2929 31.7071C23.5858 32 24.0572 32 25 32C25.9428 32 26.4142 32 26.7071 31.7071C27 31.4142 27 30.9428 27 30Z' fill='%238D31F9'/%3E%3Cpath d='M34 30V21C34 20.0572 34 19.5858 33.7071 19.2929C33.4142 19 32.9428 19 32 19C31.0572 19 30.5858 19 30.2929 19.2929C30 19.5858 30 20.0572 30 21V30C30 30.9428 30 31.4142 30.2929 31.7071C30.5858 32 31.0572 32 32 32C32.9428 32 33.4142 32 33.7071 31.7071C34 31.4142 34 30.9428 34 30Z' fill='%238D31F9'/%3E%3C/svg%3E");
  }
}

.compare_item:active, .compare_item.i_prod_active, .compare_item:has(input:checked) {
  content: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='50' height='50' rx='25' fill='white'/%3E%3Cpath d='M20 30V29C20 28.0572 20 27.5858 19.7071 27.2929C19.4142 27 18.9428 27 18 27C17.0572 27 16.5858 27 16.2929 27.2929C16 27.5858 16 28.0572 16 29V30C16 30.9428 16 31.4142 16.2929 31.7071C16.5858 32 17.0572 32 18 32C18.9428 32 19.4142 32 19.7071 31.7071C20 31.4142 20 30.9428 20 30Z' fill='%238D31F9'/%3E%3Cpath d='M27 30V25C27 24.0572 27 23.5858 26.7071 23.2929C26.4142 23 25.9428 23 25 23C24.0572 23 23.5858 23 23.2929 23.2929C23 23.5858 23 24.0572 23 25V30C23 30.9428 23 31.4142 23.2929 31.7071C23.5858 32 24.0572 32 25 32C25.9428 32 26.4142 32 26.7071 31.7071C27 31.4142 27 30.9428 27 30Z' fill='%238D31F9'/%3E%3Cpath d='M34 30V21C34 20.0572 34 19.5858 33.7071 19.2929C33.4142 19 32.9428 19 32 19C31.0572 19 30.5858 19 30.2929 19.2929C30 19.5858 30 20.0572 30 21V30C30 30.9428 30 31.4142 30.2929 31.7071C30.5858 32 31.0572 32 32 32C32.9428 32 33.4142 32 33.7071 31.7071C34 31.4142 34 30.9428 34 30Z' fill='%238D31F9'/%3E%3C/svg%3E");
}

.popular_item__comparison.i_prod_active {
  content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.26385 14.6796V13.7323C5.26385 12.8391 5.26385 12.3926 4.98639 12.1151C4.70892 11.8376 4.26236 11.8376 3.36923 11.8376C2.47609 11.8376 2.02953 11.8376 1.75207 12.1151C1.47461 12.3926 1.47461 12.8391 1.47461 13.7323V14.6796C1.47461 15.5727 1.47461 16.0193 1.75207 16.2967C2.02953 16.5742 2.47609 16.5742 3.36923 16.5742C4.26236 16.5742 4.70892 16.5742 4.98639 16.2967C5.26385 16.0193 5.26385 15.5727 5.26385 14.6796Z' fill='%238D31F9'/%3E%3Cpath d='M11.8947 14.6795V9.94296C11.8947 9.04983 11.8947 8.60327 11.6172 8.32581C11.3398 8.04834 10.8932 8.04834 10.0001 8.04834C9.10696 8.04834 8.6604 8.04834 8.38294 8.32581C8.10547 8.60327 8.10547 9.04983 8.10547 9.94296V14.6795C8.10547 15.5726 8.10547 16.0192 8.38294 16.2967C8.6604 16.5741 9.10696 16.5741 10.0001 16.5741C10.8932 16.5741 11.3398 16.5741 11.6172 16.2967C11.8947 16.0192 11.8947 15.5726 11.8947 14.6795Z' fill='%238D31F9'/%3E%3Cpath d='M18.5256 14.6797V6.1539C18.5256 5.26076 18.5256 4.8142 18.2481 4.53673C17.9706 4.25928 17.5241 4.25928 16.6309 4.25928C15.7378 4.25928 15.2913 4.25928 15.0138 4.53673C14.7363 4.8142 14.7363 5.26076 14.7363 6.1539V14.6797C14.7363 15.5728 14.7363 16.0194 15.0138 16.2968C15.2913 16.5743 15.7378 16.5743 16.6309 16.5743C17.5241 16.5743 17.9706 16.5743 18.2481 16.2968C18.5256 16.0194 18.5256 15.5728 18.5256 14.6797Z' fill='%238D31F9'/%3E%3C/svg%3E");
}

.popular_item__bot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.popular_item__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.popular_item__price_box {
  display: flex;
  flex-direction: column;
}

.popular_item__price {
  font-size: 24px;
  font-weight: 500;
}

.popular_item__old_price {
  font-size: 18px;
  color: var(--grey-AF);
  text-decoration: line-through;
}

.popular_item__info_block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.popular_item__availability {
  color: var(--black-22);
  font-size: 14px;
  font-weight: 500;
  line-height: 17.85px;
  display: flex;
  align-items: center;
  gap: 10px;
  &::before{
    content: "";
    width: 10px;
    height: 10px;
    background-color: var(--green-08);
    border-radius: 50%;
  }
}

.popular_item__grade {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
}

.popular_item__grade:before {
  content: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99577 1.54102C10.8702 1.54102 11.5589 2.20146 11.9986 3.09261L13.467 6.05365C13.5115 6.14529 13.6171 6.27433 13.7758 6.39238C13.9343 6.51031 14.0895 6.57536 14.1916 6.59252L16.8496 7.03779C17.8098 7.19912 18.6145 7.66976 18.8758 8.48927C19.1368 9.3081 18.7544 10.159 18.0639 10.8507L18.0632 10.8514L15.9983 12.9334C15.9164 13.0159 15.8248 13.1713 15.7673 13.3738C15.7102 13.575 15.7051 13.7583 15.731 13.8766L15.7314 13.8783L16.3221 16.4538C16.5672 17.5258 16.4859 18.5888 15.7299 19.1445C14.9713 19.7021 13.9346 19.4549 12.9928 18.894L10.5012 17.4068C10.3965 17.3443 10.2169 17.2937 9.99994 17.2937C9.7846 17.2937 9.60119 17.3437 9.48969 17.4085L9.4881 17.4094L7.00142 18.8937C6.06073 19.4566 5.0253 19.6993 4.26661 19.1412C3.5111 18.5854 3.4258 17.5243 3.67161 16.4533L4.26227 13.8783L4.26263 13.8766C4.28853 13.7583 4.28346 13.575 4.22635 13.3738C4.16885 13.1713 4.07718 13.0159 3.99534 12.9334L1.9289 10.8498C1.2429 10.1582 0.861696 9.30802 1.12065 8.49039C1.38035 7.67039 2.18355 7.19918 3.1443 7.03773L5.80012 6.59284L5.80096 6.5927C5.89833 6.57581 6.05127 6.51148 6.20942 6.39325C6.36786 6.2748 6.47368 6.14547 6.51829 6.05365L6.52054 6.04907L7.98704 3.09182L7.98762 3.09066C8.43152 2.20025 9.12236 1.54102 9.99577 1.54102Z' fill='%23F5AF40'/%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.popular_item__title {
  font-size: 16px;
  font-weight: 400;
  line-height: 20.4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.radio, .checkbox {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  z-index: 10;
}

/*popular_item__comparison*/

@media (max-width: 576px) {
  /* common style */
  .s_prod_container {
    padding: 20px 0;
  }

  .prod_container {
    gap: 20px;
  }

  /* template style */
  .popular_container {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    grid-gap: 24px 8px;
  }

  .popular_item {
    gap: 16px;
  }
  .popular_item__discount {
    left: 16px;
    bottom: 16px;
    font-size: 12px;
    padding: 2px 6px;
  }

  .popular_item__info {
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    gap: 6px;
  }

  .popular_item__price_box {
    order: 2;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .popular_item__price {
    font-size: 18px;
  }

  .popular_item__old_price {
    font-size: 14px;
  }

  .popular_item__info_block {
    order: 1;
  }

  .popular_item__grade {
    padding-left: 18px;
    font-size: 12px;
  }

  .popular_item__grade:before {
    content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99577 1.54102C10.8702 1.54102 11.5589 2.20146 11.9986 3.09261L13.467 6.05365C13.5115 6.14529 13.6171 6.27433 13.7758 6.39238C13.9343 6.51031 14.0895 6.57536 14.1916 6.59252L16.8496 7.03779C17.8098 7.19912 18.6145 7.66976 18.8758 8.48927C19.1368 9.3081 18.7544 10.159 18.0639 10.8507L18.0632 10.8514L15.9983 12.9334C15.9164 13.0159 15.8248 13.1713 15.7673 13.3738C15.7102 13.575 15.7051 13.7583 15.731 13.8766L15.7314 13.8783L16.3221 16.4538C16.5672 17.5258 16.4859 18.5888 15.7299 19.1445C14.9713 19.7021 13.9346 19.4549 12.9928 18.894L10.5012 17.4068C10.3965 17.3443 10.2169 17.2937 9.99994 17.2937C9.7846 17.2937 9.60119 17.3437 9.48969 17.4085L9.4881 17.4094L7.00142 18.8937C6.06073 19.4566 5.0253 19.6993 4.26661 19.1412C3.5111 18.5854 3.4258 17.5243 3.67161 16.4533L4.26227 13.8783L4.26263 13.8766C4.28853 13.7583 4.28346 13.575 4.22635 13.3738C4.16885 13.1713 4.07718 13.0159 3.99534 12.9334L1.9289 10.8498C1.2429 10.1582 0.861696 9.30802 1.12065 8.49039C1.38035 7.67039 2.18355 7.19918 3.1443 7.03773L5.80012 6.59284L5.80096 6.5927C5.89833 6.57581 6.05127 6.51148 6.20942 6.39325C6.36786 6.2748 6.47368 6.14547 6.51829 6.05365L6.52054 6.04907L7.98704 3.09182L7.98762 3.09066C8.43152 2.20025 9.12236 1.54102 9.99577 1.54102Z' fill='%23F5AF40'/%3E%3C/svg%3E");
    width: 14px;
    height: 14px;
  }

  .popular_item__title {
    font-size: 12px;
  }
}