/* Hide the small thumbnail slider */
.slider-nav-thumbnails {
    display: none !important;
}

/* Hide the zoom icon */
.zoom-icon {
    display: none !important;
}

/* Main image container — responsive, no shadow */
.product-image-slider {
    width: 100% !important;
    max-width: 450px !important;   /* desktop max */
    margin: 0 auto !important;
    padding: 10px;
    border-radius: 12px;
    background: #fff;              /* keep clean background */
    box-shadow: none !important;   /* remove shadow */
}

/* Main image inside slick */
.product-image-slider img {
    width: 100% !important;
    max-width: 450px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Slick track + slide override */
.product-image-slider .slick-track,
.product-image-slider .slick-slide {
    width: auto !important;
    max-width: 450px !important;
    margin: 0 auto !important;
}

/* Gallery container adjust */
.detail-gallery {
    max-width: 470px !important;
    margin: 0 auto !important;
}

/* TABLET & SMALL LAPTOP */
@media (max-width: 768px) {
    .product-image-slider {
        max-width: 300px !important;
        padding: 8px;
    }

    .product-image-slider img,
    .product-image-slider .slick-slide,
    .product-image-slider .slick-track {
        max-width: 300px !important;
    }

    .detail-gallery {
        max-width: 320px !important;
    }
}










































/* ===== CSS: add to your stylesheet =====
   Scoped, minimal, and only active on mobile.
*/

/* Hide mobile slider on desktop, keep original grid visible */
@media (min-width: 768px) {
  .mobile-slider-wrapper { display: none; }
  .desktop-banners { display: flex; } /* keep existing behavior */
}

/* Hide desktop grid on small screens and show mobile slider */
@media (max-width: 767px) {
  .desktop-banners { display: none !important; } /* hide original grid on phones */
  .mobile-slider-wrapper { display: block; position: relative; overflow: hidden; padding: 0 10px; }

  .mobile-slider {
    display: flex;
    width: 100%;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 350ms ease;
  }

  .mobile-slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 8px 0;
    display: block;
    text-decoration: none;
  }

  .mobile-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
  }

  /* Dots */
  .mobile-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px 0 4px;
  }
  .mobile-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: #d0d0d0;
    opacity: 0.95;
    cursor: pointer;
    padding: 0;
  }
  .mobile-dot.active {
    background: #F16724;
  }
}

/* Accessibility focus */
.mobile-dot:focus { outline: 2px solid #f2c8b0; outline-offset: 2px; }








/* ========== SPICY MOBILE SLIDER ANIMATIONS ========== */
@media (max-width: 767px) {

  /* Smooth movement & easing */
  .mobile-slider {
    transition: transform 1000ms cubic-bezier(0.22, 1, 0.36, 1) !important; 
  }

  /* Slide animation: slight zoom + fade */
  .mobile-slide {
    opacity: 0.3;
    transform: scale(0.92);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .mobile-slide.active {
    opacity: 1;
    transform: scale(1);
  }

  /* Dot animation: scale up */
  .mobile-dot {
    transition: transform 0.25s ease, background 0.25s ease;
  }
  .mobile-dot.active {
    transform: scale(1.25);
  }

  /* Optional slide “glare shine” effect */
  .mobile-slide img {
    position: relative;
    overflow: hidden;
  }

  .mobile-slide img::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
      120deg,
      transparent 0%,
      rgba(255,255,255,0.45) 50%,
      transparent 100%
    );
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
  }

  .mobile-slide.active img::after {
    left: 120%; /* passes over the image */
  }
}




























/* Disable WOW default fade */
.wow {
  visibility: visible !important;
  animation-name: none !important;
}












/* ============================= */
/* Countdown image responsiveness */
/* ============================= */

/* Desktop: make image smaller */
@media (min-width: 992px) {
    .coming-soon-image {
        max-width: 80%;   /* adjust: 70%–85% if needed */
        height: auto;
        margin: 0 auto;
        display: block;
    }
}

/* Tablet: slightly smaller */
@media (min-width: 768px) and (max-width: 991px) {
    .coming-soon-image {
        max-width: 90%;
        height: auto;
    }
}

/* Mobile: hide image */
@media (max-width: 767px) {
    .coming-soon-image {
        display: none !important;
    }
}