/* =========================================================
   cls-safe.css (STABLE / NO-CONFLICT)
   Goal: reduce CLS without breaking layout
   Rules:
   - DO NOT hard-lock body padding here (leave to theme/common.js)
   - Keep ONLY ONE Owl pre-init block
   - Do NOT take over Sidr animation with transform
   ========================================================= */


/* ---------------------------------------------------------
   1) Featured / category image blocks (square placeholders)
   --------------------------------------------------------- */
.section-space.featured .featured-category-item-image,
.section-space.fcategory .featured-category-item-image {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  display: block;
  background-size: cover;
  background-position: center;
}


/* ---------------------------------------------------------
   2) Testimonials / Our Clients (Slick) reserve space
   --------------------------------------------------------- */
.section-space.testimonials .testimonial-slider { min-height: 220px; }
.section-space.our_clients .our-client-slider { min-height: 120px; }

.section-space.testimonials .slick-track,
.section-space.our_clients .slick-track {
  display: flex;
  align-items: stretch;
}


/* ---------------------------------------------------------
   3) Slideshow counter reserve height (avoid jump)
   --------------------------------------------------------- */
.slider-counter{
  min-height: 24px;
  line-height: 24px;
  visibility: hidden;
}

/* show once owl is ready */
.owl-carousel.owl-loaded .slider-counter,
.owl-loaded + .slider-counter,
.owl-carousel.owl-loaded ~ .slider-counter{
  visibility: visible;
}


/* ---------------------------------------------------------
   4) Home top slideshow (Owl) reserve height (min-height only)
   --------------------------------------------------------- */
.common-home #slideshow0,
.common-home #slideshow0 .owl-stage-outer,
.common-home #slideshow0 .owl-stage,
.common-home #slideshow0 .owl-item,
.common-home #slideshow0 .h100{
  min-height: 500px;
}

@media (max-width: 767px){
  .common-home #slideshow0,
  .common-home #slideshow0 .owl-stage-outer,
  .common-home #slideshow0 .owl-stage,
  .common-home #slideshow0 .owl-item,
  .common-home #slideshow0 .h100{
    min-height: 680px;
  }
}


/* ---------------------------------------------------------
   5) Cart dropdown: hide empty white box until opened
   --------------------------------------------------------- */
header.fixed-header #cart .dropdown-menu { display: none !important; }
header.fixed-header #cart.open .dropdown-menu { display: block !important; }

/* Hide visible "Cart" text only (keep icon) */
#cart .cart-header-text,
#cart a[href$="/cart"]{
  font-size: 0 !important;
  line-height: 0 !important;
}
#cart a[href$="/cart"]{
  display: inline-flex !important;
  align-items: center !important;
}


/* ---------------------------------------------------------
   6) Sidr overlay only (do not affect document flow)
   --------------------------------------------------------- */
#sidr{
  position: fixed !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  z-index: 1000000 !important;
}
#sidr-overlay,
.sidr-overlay{
  z-index: 999999 !important;
}


/* ---------------------------------------------------------
   7) Google rating size (ONLY this one)
   --------------------------------------------------------- */
header .google-rating img{
  width: 90px;
  height: 96px;
  max-width: 90px;
}


/* ---------------------------------------------------------
   8) Mobile: banner text avoid clipping
   (keep scoped to slideshow only)
   --------------------------------------------------------- */
@media (max-width: 767px){
  .common-home .section-space.slideshow .slider-slideshow-description-texts,
  .common-home .section-space.slideshow .slider-slideshow-description{
    bottom: 18px !important;
  }

  /* Allow caption area to breathe */
  .common-home .section-space.slideshow,
  .common-home .section-space.slideshow .owl-stage-outer,
  .common-home .section-space.slideshow .h100{
    overflow: visible !important;
  }
}


/* ---------------------------------------------------------
   9) OPTIONAL Owl pre-init assist (ONE block only)
   Purpose:
   - If theme hides carousel before .owl-loaded, show it
   - Before init, show ONLY first slide (prevent stacking)
   Notes:
   - Your tpl outputs slides as direct child <div> elements
   --------------------------------------------------------- */
.common-home #slideshow0.owl-carousel:not(.owl-loaded){
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  /* prevent weird overflow while owl not ready */
  overflow: hidden !important;
}

/* before init: hide all direct slides except first */
.common-home #slideshow0.owl-carousel:not(.owl-loaded) > div{
  display: none !important;
}
.common-home #slideshow0.owl-carousel:not(.owl-loaded) > div:first-child{
  display: block !important;
}

/* ===============================
   Hotfix: prevent hero image being invisible (opacity:0) which kills LCP
   =============================== */

/* Mobile hero image (LCP element) */
.common-home #slideshow0 img.img-responsive.visible-xs{
  opacity: 1 !important;
  visibility: visible !important;
}

/* Also ensure active slide isn't faded */
.common-home #slideshow0 .owl-item.active,
.common-home #slideshow0 .owl-item.active *{
  opacity: 1 !important;
  visibility: visible !important;
}

/* Stabilize top sliding announcement bar to reduce CLS */
.header_title.sliding-text{
  min-height: 32px;
  line-height: 32px;
  overflow: hidden;
}

/* ---------------------------------------------------------
   End
   --------------------------------------------------------- */