@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.skeleton {
  height: 125px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.5s infinite ease-in-out;
  border-radius: 8px;
}
.skeleton::after {
  content: "Loading...";
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.loading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 16px;
  width: 100%;
}
.skeleton-product {
  display: inline-block;
  width: calc((100% - 40px) * 0.2);
  flex: 0 0 calc((100% - 40px) * 0.2);
  padding: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 4px;
}
.skeleton-product.swiper-slide {
  display: block;
  margin-right: 10px;
}
.skeleton-product .skeleton-image {
  height: auto;
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.5s infinite ease-in-out;
  aspect-ratio: 1;
  width: calc(100% - 28px);
  margin: 14px auto 12px;
}
.skeleton-product .skeleton-title {
  height: 13px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.5s infinite ease-in-out;
  position: relative;
  width: 34%;
  margin: 0 10px 34px;
}
.skeleton-product .skeleton-title::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 0;
  display: block;
  width: min(210%, calc(100vw - 44px));
  height: 28px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%) 0 0 / 200% 12px no-repeat, linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%) 0 18px / 150% 10px no-repeat;
  animation: shimmer 1.5s infinite ease-in-out;
}
.skeleton-product .skeleton-price {
  height: 12px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.5s infinite ease-in-out;
  position: relative;
  width: 46%;
  margin: 0 10px 12px;
}
.skeleton-product .skeleton-price::after {
  content: "";
  position: absolute;
  right: calc(-100% - 10px);
  top: -4px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: inherit;
  background-size: inherit;
  animation: inherit;
}
.product-swiper-slider-wrapper .lazy-load-section > .swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
}
.product-swiper-slider-wrapper .lazy-load-section .skeleton-product {
  width: calc((100% - 40px) * 0.2);
  flex: 0 0 calc((100% - 40px) * 0.2);
}
.promotion-swiper-slider-wrapper .skeleton-product {
  width: calc((100% - 17px) * 0.37037);
  flex: 0 0 calc((100% - 17px) * 0.37037);
}
.skeleton-promotion-grid {
  padding: 0;
  border-radius: 0;
}
.skeleton-promotion-grid .image {
  height: 200px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.5s infinite ease-in-out;
  margin-bottom: 10px;
  border-radius: 0;
}
.skeleton-promotion-grid .content-container {
  padding: 10px;
}
.skeleton-promotion-grid .content-container .title {
  height: 20px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.5s infinite ease-in-out;
  margin-bottom: 10px;
}
.skeleton-promotion-grid .content-container .subtitle {
  height: 10px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.5s infinite ease-in-out;
}
.product-cats-logo-wrappers .swiper-wrapper .swiper-slide {
  width: 96px !important;
  flex: 0 0 96px;
}
.product-cats-logo-wrappers .swiper-wrapper .swiper-slide.brand {
  width: 120px !important;
  flex-basis: 120px;
}
.product-cats-logo-wrappers .swiper-wrapper .swiper-slide.skeleton {
  height: auto;
  margin-right: 10px;
  background: transparent;
  animation: none;
}
.product-cats-logo-wrappers .swiper-wrapper .swiper-slide.skeleton .skeleton-image {
  margin: 0 auto 8px;
  border-radius: 50%;
}
.product-cats-logo-wrappers .swiper-wrapper .swiper-slide.skeleton .skeleton-title {
  width: 72%;
  margin: 0 auto;
}
.product-cats-logo-wrappers .swiper-wrapper .swiper-slide.skeleton.product_cat {
  width: 96px !important;
  flex-basis: 96px;
}
.product-cats-logo-wrappers .swiper-wrapper .swiper-slide.skeleton.product_cat .skeleton-image {
  height: 80px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.5s infinite ease-in-out;
  width: 80px;
  height: 80px;
}
.product-cats-logo-wrappers .swiper-wrapper .swiper-slide.skeleton.product_cat .skeleton-title {
  height: 16px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.5s infinite ease-in-out;
}
.product-cats-logo-wrappers .swiper-wrapper .swiper-slide.skeleton.brand {
  width: 120px !important;
  flex-basis: 120px;
}
.product-cats-logo-wrappers .swiper-wrapper .swiper-slide.skeleton.brand .skeleton-image {
  height: 76px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.5s infinite ease-in-out;
  width: 100%;
  border-radius: 3px;
}
.product-cats-logo-wrappers .swiper-wrapper .swiper-slide.skeleton.brand .skeleton-title {
  display: none;
}
.custom-tags-list-home .swiper-wrapper .skeleton {
  height: 136px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: shimmer 1.5s infinite ease-in-out;
  width: calc((100% - 65px) * 0.133333);
  flex: 0 0 calc((100% - 65px) * 0.133333);
}
.herlan-product-groups-section .skeleton-product {
  width: calc((100% - 40px) * 0.2);
  flex: 0 0 calc((100% - 40px) * 0.2);
  padding: 15px;
}
.herlan-product-groups-section .skeleton-product .skeleton-title {
  height: 19px;
  margin: 0 0 15px !important;
}
.herlan-product-groups-section .skeleton-product .skeleton-title::after {
  content: none;
}
.herlan-product-groups-section .skeleton-product .group-grid .skeleton-image {
  aspect-ratio: 1;
  height: auto !important;
  margin: 0 !important;
}
@media (max-width: 991px) {
  .skeleton-product {
    width: calc((100% - 11.25px) * 0.4);
    flex-basis: calc((100% - 11.25px) * 0.4);
  }
  .product-swiper-slider-wrapper .lazy-load-section .skeleton-product {
    width: calc((100% - 11.25px) * 0.4);
    flex-basis: calc((100% - 11.25px) * 0.4);
  }
  .promotion-swiper-slider-wrapper .skeleton-product {
    width: calc((100% - 7px) * 0.588235);
    flex-basis: calc((100% - 7px) * 0.588235);
  }
  .herlan-product-groups-section .skeleton-product {
    width: calc((100% - 11.25px) * 0.4);
    flex-basis: calc((100% - 11.25px) * 0.4);
  }
  .product-cats-logo-wrappers .swiper-wrapper .swiper-slide {
    width: 96px !important;
  }
  .custom-tags-list-home .swiper-wrapper .skeleton {
    width: calc((100% - 35px) * 0.222222);
    flex-basis: calc((100% - 35px) * 0.222222);
  }
}
@media (max-width: 575px) {
  .skeleton-product {
    width: calc((100% - 11.25px) * 0.4);
    flex-basis: calc((100% - 11.25px) * 0.4);
  }
  .product-cats-logo-wrappers .swiper-wrapper .swiper-slide {
    width: 60px !important;
    flex-basis: 60px;
  }
  .product-cats-logo-wrappers .swiper-wrapper .swiper-slide.brand {
    width: 84px !important;
    flex-basis: 84px;
  }
  .product-cats-logo-wrappers .swiper-wrapper .swiper-slide.skeleton.product_cat {
    width: 60px !important;
    flex-basis: 60px;
  }
  .product-cats-logo-wrappers .swiper-wrapper .swiper-slide.skeleton.product_cat .skeleton-image {
    height: 45px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: shimmer 1.5s infinite ease-in-out;
    width: 45px;
    height: 45px;
  }
  .product-cats-logo-wrappers .swiper-wrapper .swiper-slide.skeleton.product_cat .skeleton-title {
    height: 10px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: shimmer 1.5s infinite ease-in-out;
    width: 90%;
  }
  .product-cats-logo-wrappers .swiper-wrapper .swiper-slide.skeleton.brand {
    width: 84px !important;
    flex-basis: 84px;
  }
  .product-cats-logo-wrappers .swiper-wrapper .swiper-slide.skeleton.brand .skeleton-image {
    height: 62px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: shimmer 1.5s infinite ease-in-out;
  }
  .custom-tags-list-home .swiper-wrapper .skeleton {
    height: 85px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: shimmer 1.5s infinite ease-in-out;
    width: calc((100% - 10px) * 0.333333);
    flex-basis: calc((100% - 10px) * 0.333333);
  }
  .home-page-campaign-shortcuts .skeleton {
    height: 25px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f4f4f4 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: shimmer 1.5s infinite ease-in-out;
  }
}
@media (max-width: 400px) {
  .skeleton-product {
    width: calc((100% - 11.25px) * 0.4);
    flex-basis: calc((100% - 11.25px) * 0.4);
    margin-bottom: 10px;
  }
  .loading-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton, .skeleton-image, .skeleton-title, .skeleton-price, .skeleton-promotion-grid .image, .skeleton-promotion-grid .title, .skeleton-promotion-grid .subtitle {
    background: #e0e0e0;
    animation: none;
  }
}