/**
 * Prevent Slick FOUC: keep carousels horizontal (not vertically stacked)
 * until .slick-initialized, then soft-fade in as a complete unit.
 */

@keyframes slickLayoutFallbackReveal {
  to {
    opacity: 1;
  }
}

/* ---- Shared pre-init shell ---- */
.slide-1:not(.slick-initialized),
.slide-2:not(.slick-initialized),
.slide-3:not(.slick-initialized),
.slide-4:not(.slick-initialized),
.slide-5:not(.slick-initialized),
.slide-6:not(.slick-initialized),
.slide-6-veg:not(.slick-initialized),
.slide-6-product:not(.slick-initialized),
.slide-7:not(.slick-initialized),
.slide-7-demo:not(.slick-initialized),
.slide-8:not(.slick-initialized),
.slide-9:not(.slick-initialized),
.slide-center:not(.slick-initialized),
.category-5:not(.slick-initialized),
.category-7:not(.slick-initialized),
.product-3:not(.slick-initialized),
.product-4:not(.slick-initialized),
.product-5:not(.slick-initialized),
.product_4:not(.slick-initialized),
.product-slider-5:not(.slick-initialized),
.brand-6:not(.slick-initialized),
.team-4:not(.slick-initialized),
.vector-slide-8:not(.slick-initialized),
.vector-slide-center:not(.slick-initialized),
.center:not(.slick-initialized),
.center-slider-bicycle:not(.slick-initialized),
.tools-product-4:not(.slick-initialized),
.slider-3:not(.slick-initialized) {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;
  overflow: hidden !important;
  width: 100%;
  max-width: 100%;
  opacity: 0;
  animation: slickLayoutFallbackReveal 0s linear 2.8s forwards;
}

.slide-1.slick-initialized,
.slide-2.slick-initialized,
.slide-3.slick-initialized,
.slide-4.slick-initialized,
.slide-5.slick-initialized,
.slide-6.slick-initialized,
.slide-6-veg.slick-initialized,
.slide-6-product.slick-initialized,
.slide-7.slick-initialized,
.slide-7-demo.slick-initialized,
.slide-8.slick-initialized,
.slide-9.slick-initialized,
.slide-center.slick-initialized,
.category-5.slick-initialized,
.category-7.slick-initialized,
.product-3.slick-initialized,
.product-4.slick-initialized,
.product-5.slick-initialized,
.product_4.slick-initialized,
.product-slider-5.slick-initialized,
.brand-6.slick-initialized,
.team-4.slick-initialized,
.vector-slide-8.slick-initialized,
.vector-slide-center.slick-initialized,
.center.slick-initialized,
.center-slider-bicycle.slick-initialized,
.tools-product-4.slick-initialized,
.slider-3.slick-initialized,
.home-slider.slick-initialized,
.slider-animate.slick-initialized,
.center-home-slider.slick-initialized {
  opacity: 1;
  animation: none;
  transition: opacity 0.32s ease;
}

/* Generic flex children before init */
.slide-1:not(.slick-initialized) > *,
.slide-2:not(.slick-initialized) > *,
.slide-3:not(.slick-initialized) > *,
.slide-4:not(.slick-initialized) > *,
.slide-5:not(.slick-initialized) > *,
.slide-6:not(.slick-initialized) > *,
.slide-6-veg:not(.slick-initialized) > *,
.slide-6-product:not(.slick-initialized) > *,
.slide-7:not(.slick-initialized) > *,
.slide-7-demo:not(.slick-initialized) > *,
.slide-8:not(.slick-initialized) > *,
.slide-9:not(.slick-initialized) > *,
.slide-center:not(.slick-initialized) > *,
.category-5:not(.slick-initialized) > *,
.category-7:not(.slick-initialized) > *,
.product-3:not(.slick-initialized) > *,
.product-4:not(.slick-initialized) > *,
.product-5:not(.slick-initialized) > *,
.product_4:not(.slick-initialized) > *,
.product-slider-5:not(.slick-initialized) > *,
.brand-6:not(.slick-initialized) > *,
.team-4:not(.slick-initialized) > *,
.vector-slide-8:not(.slick-initialized) > *,
.vector-slide-center:not(.slick-initialized) > *,
.center:not(.slick-initialized) > *,
.center-slider-bicycle:not(.slick-initialized) > *,
.tools-product-4:not(.slick-initialized) > *,
.slider-3:not(.slick-initialized) > * {
  flex: 0 0 auto;
  box-sizing: border-box;
  float: none !important;
  max-width: 100%;
}

/* ---- Category / hikaye circular row (slide-9) ---- */
.slide-9:not(.slick-initialized) {
  min-height: 148px;
}

.slide-9:not(.slick-initialized) > * {
  flex: 0 0 11.111111%;
  width: 11.111111%;
  max-width: 11.111111%;
  display: block;
  padding: 0 6px;
}

@media (max-width: 1199px) {
  .slide-9:not(.slick-initialized) > * {
    flex-basis: 14.285714%;
    width: 14.285714%;
    max-width: 14.285714%;
  }
}

@media (max-width: 991px) {
  .slide-9:not(.slick-initialized) > * {
    flex-basis: 16.666667%;
    width: 16.666667%;
    max-width: 16.666667%;
  }
}

@media (max-width: 575px) {
  .slide-9:not(.slick-initialized) {
    min-height: 132px;
  }

  .slide-9:not(.slick-initialized) > * {
    flex-basis: 25%;
    width: 25%;
    max-width: 25%;
  }
}

/* Stable circular placeholders — keeps layout while images lazy-load */
.slide-9 .img-category .pattern-bg,
.slide-9 .img-category .img-sec {
  aspect-ratio: 1 / 1;
}

.slide-9 .img-category .img-sec img,
.slide-9 .img-category .pattern-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.category-5:not(.slick-initialized),
.category-7:not(.slick-initialized),
.category-width .slide-9:not(.slick-initialized) {
  min-height: 140px;
}

.category-5:not(.slick-initialized) > * {
  flex: 0 0 20%;
  width: 20%;
  max-width: 20%;
}

.category-7:not(.slick-initialized) > * {
  flex: 0 0 14.285714%;
  width: 14.285714%;
  max-width: 14.285714%;
}

.vector-slide-8:not(.slick-initialized) > * {
  flex: 0 0 12.5%;
  width: 12.5%;
  max-width: 12.5%;
}

/* ---- Product / brand / team rows ---- */
.product-5:not(.slick-initialized),
.product-4:not(.slick-initialized),
.product-3:not(.slick-initialized),
.product_4:not(.slick-initialized),
.slide-4:not(.slick-initialized),
.brand-6:not(.slick-initialized),
.team-4:not(.slick-initialized) {
  min-height: 280px;
}

.product-5:not(.slick-initialized) > * {
  flex: 0 0 20%;
  width: 20%;
  max-width: 20%;
}

.product-4:not(.slick-initialized) > *,
.product_4:not(.slick-initialized) > *,
.slide-4:not(.slick-initialized) > *,
.team-4:not(.slick-initialized) > * {
  flex: 0 0 25%;
  width: 25%;
  max-width: 25%;
}

.product-3:not(.slick-initialized) > * {
  flex: 0 0 33.333333%;
  width: 33.333333%;
  max-width: 33.333333%;
}

.brand-6:not(.slick-initialized) > * {
  flex: 0 0 16.666667%;
  width: 16.666667%;
  max-width: 16.666667%;
}

.slide-7:not(.slick-initialized) > *,
.slide-7-demo:not(.slick-initialized) > * {
  flex: 0 0 14.285714%;
  width: 14.285714%;
  max-width: 14.285714%;
}

@media (max-width: 1024px) {
  .product-5:not(.slick-initialized) > * {
    flex-basis: 33.333333%;
    width: 33.333333%;
    max-width: 33.333333%;
  }

  .product-4:not(.slick-initialized) > *,
  .slide-4:not(.slick-initialized) > *,
  .team-4:not(.slick-initialized) > * {
    flex-basis: 50%;
    width: 50%;
    max-width: 50%;
  }
}

@media (max-width: 767px) {
  .product-5:not(.slick-initialized) > *,
  .product-4:not(.slick-initialized) > *,
  .slide-4:not(.slick-initialized) > *,
  .team-4:not(.slick-initialized) > * {
    flex-basis: 50%;
    width: 50%;
    max-width: 50%;
  }

  .brand-6:not(.slick-initialized) > * {
    flex-basis: 33.333333%;
    width: 33.333333%;
    max-width: 33.333333%;
  }
}

/* ---- Hero / home slider: reserve height, show first slide only ---- */
.home-slider:not(.slick-initialized),
.slider-animate:not(.slick-initialized),
.center-home-slider:not(.slick-initialized) {
  display: block !important;
  overflow: hidden !important;
  width: 100%;
  min-height: clamp(280px, 48vw, 560px);
  opacity: 0;
  animation: slickLayoutFallbackReveal 0s linear 2.8s forwards;
}

.home-slider:not(.slick-initialized) > *:not(:first-child),
.slider-animate:not(.slick-initialized) > *:not(:first-child),
.center-home-slider:not(.slick-initialized) > *:not(:first-child) {
  display: none !important;
}

.home-slider-section {
  min-height: clamp(280px, 48vw, 560px);
}

/* ---- Page sections: optional soft reveal when body.is-ready is set ---- */
/* Default: sections stay visible. Only soft-settle transform when JS marks ready. */
body.is-ready .metro > section,
body.is-ready .home-slider-section,
body.is-ready .metro .container > section,
body.is-ready .metro .container-lg > section {
  animation: pageSectionRevealSoft 0.38s ease both;
}

@keyframes pageSectionRevealSoft {
  from {
    opacity: 0.92;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide-1:not(.slick-initialized),
  .slide-2:not(.slick-initialized),
  .slide-3:not(.slick-initialized),
  .slide-4:not(.slick-initialized),
  .slide-5:not(.slick-initialized),
  .slide-6:not(.slick-initialized),
  .slide-7:not(.slick-initialized),
  .slide-8:not(.slick-initialized),
  .slide-9:not(.slick-initialized),
  .category-5:not(.slick-initialized),
  .category-7:not(.slick-initialized),
  .product-5:not(.slick-initialized),
  .product-4:not(.slick-initialized),
  .brand-6:not(.slick-initialized),
  .team-4:not(.slick-initialized),
  .vector-slide-8:not(.slick-initialized),
  .home-slider:not(.slick-initialized),
  .slider-animate:not(.slick-initialized) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .slide-9.slick-initialized,
  .product-5.slick-initialized,
  .home-slider.slick-initialized,
  body.is-ready .metro > section {
    transition: none !important;
    animation: none !important;
  }
}