/* Layout Fixes to Prevent CLS (Cumulative Layout Shift) and Improve LCP */

/* Font display settings to prevent layout shifts during font loading */
@font-face {
  font-family: 'FontAwesome';
  font-display: block; /* Ensures text remains invisible until font is loaded */
  src: url('/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2');
}

@font-face {
  font-family: 'themify';
  font-display: block;
  src: url('/fonts/themify.woff?-fvbane') format('woff');
}

/* Prevent layout shifts for images */
img.media {
  aspect-ratio: attr(width) / attr(height);
}

/* Ensure consistent spacing and dimensions for banner sections */
.discount-banner {
  min-height: 200px;
  overflow: hidden;
  position: relative;
}

.section-pb-space {
  min-height: 300px;
  overflow: hidden;
  position: relative;
}

/* Prevent text overflow causing layout shifts */
.product-box .product-detail h6 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
  margin-bottom: 5px;
}

.product-box .product-detail p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 5px;
}

/* Ensure consistent height for product boxes */
.product-box {
  min-height: 350px;
  display: flex;
  flex-direction: column;
}

.product-box .img-wrapper {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fix for product images to maintain aspect ratio */
.product-box .img-wrapper img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Optimizations for slider to improve LCP */
.theme-slider {
  min-height: 400px; /* Reserve space for slider */
  position: relative;
}

/* Ensure slider images have proper dimensions */
.slider-img {
  min-height: 400px;
  position: relative;
  overflow: hidden;
}

/* Optimize slider image loading */
.layout5-slide-1 li {
  position: relative;
  min-height: 400px;
  display: block;
}

/* Preload critical slider images */
.theme-slider::before {
  content: '';
  display: none;
  background-image: url('/images/slider-2.png');
}

/* Optimize slider animation performance */
.slider-banner-contain {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Optimize slider transitions */
.slick-slide {
  transition: opacity 0.5s ease;
  opacity: 0;
}

.slick-active {
  opacity: 1;
}