.slider-with-arrow .swiper:not(.swiper-initialized) .swiper-slide {
  margin-right: var(--space-between) px;
}
.product-image-thumb:not(.swiper-initialized) .swiper-slide {
  width: 122px;
  margin-right: 15px;
}
@media (min-width: 1200px) {
  .slider-with-arrow .swiper:not(.swiper-initialized) .swiper-slide {
    width: calc(100% / var(--desktop-grid));
  }
}
@media (max-width: 1199px) {
  .slider-with-arrow .swiper:not(.swiper-initialized) .swiper-slide {
    width: calc(100% / var(--mini-desktop-grid));
  }
}
@media (max-width: 991px) {
  .slider-with-arrow .swiper:not(.swiper-initialized) .swiper-slide {
    width: calc(100% / var(--tablet-grid));
  }
}
@media (max-width: 767px) {
  .slider-with-arrow .swiper:not(.swiper-initialized) .swiper-slide {
    width: calc(100% / var(--mobile-grid));
  }
}
@-webkit-keyframes lazy-image-animation {
  0% {
    background-position-x: 200%;
  }
  100% {
    background-position-x: -150%;
  }
}
@keyframes lazy-image-animation {
  0% {
    background-position-x: 200%;
  }
  100% {
    background-position-x: -150%;
  }
}
@keyframes lazy-fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.res-image {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  overflow: hidden;
  position: relative;
}
[style*="--aspect-ratio"]:before {
  display: block;
  width: 100%;
  content: "";
  height: 0;
  padding-top: calc(100% / (var(--aspect-ratio, 16/9)));
}
.svg-placeholder,
image-srcset img {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: 0.3s;
}
image-srcset img:not(.hongo-alternate-image) {
  opacity: 0;
}
.svg-placeholder,
image-srcset .res-img-loaded:not(.hongo-alternate-image) {
  animation: 1s cubic-bezier(0.26, 0.54, 0.32, 1) forwards lazy-fadeIn;
  -webkit-animation: 1s cubic-bezier(0.26, 0.54, 0.32, 1) forwards lazy-fadeIn;
}
[data-image-loading]:not(.placeholder-img) {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0)
  );
  background-color: var(--lazyload_bg_color);
  --lazyload_bg_color: #f7f7f7;
  transition: 0.3s;
}
[data-image-loading]:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  -webkit-background-size: 200% 100%;
  background-size: 200% 100%;
  height: 100%;
  -webkit-animation: 1.5s cubic-bezier(0, 0, 1, 1) infinite lazy-image-animation;
  animation: 1.5s cubic-bezier(0, 0, 1, 1) infinite lazy-image-animation;
  background-image: linear-gradient(
    90deg,
    rgba(22, 24, 35, 0) 0,
    rgba(22, 24, 35, 0.04) 50%,
    rgba(22, 24, 35, 0) 100%
  );
  background-repeat: no-repeat;
  width: 100%;
}
image-srcset.placeholder-img:after {
  display: none;
}