@media (max-width: 576px) {
     .video-box {
      position: relative;
      cursor: pointer;
    }
    
    .video-box::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 40%;
      height: 40%;
      transform: translate(-50%, -50%);
      
      background: rgba(0,0,0,0.4);
      border-radius: 50%;
    
      background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='48' fill='rgba(0,0,0,0.45)'/><polygon points='40,32 40,68 70,50' fill='white'/></svg>") center / contain no-repeat;

      background-color: white;
      opacity: 0.9;
      pointer-events: none;
    }

    .video-box.playing::after {
      display: none;
    }
}

 
     .video-box-main {
      position: relative;
      cursor: pointer;
    }
    
    .video-box-main::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 40%;
      height: 40%;
      transform: translate(-50%, -50%);
      
      background: rgba(0,0,0,0.4);
      border-radius: 50%;
    
      background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='48' fill='rgba(0,0,0,0.45)'/><polygon points='40,32 40,68 70,50' fill='white'/></svg>") center / contain no-repeat;

      background-color: white;
      opacity: 0.9;
      pointer-events: none;
    }

    .video-box-main.playing::after {
      display: none;
    }




 
 #product-swiper {
      width: 100%;
      height: 100%; /* Respect parent height */
    }
    #product-swiper .swiper-slide {
      width: 100%;
      aspect-ratio: 1 / 1; /* Square ratio */
      line-height: 0; /* Remove any line-height spacing */
    }
    #product-swiper .swiper-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Maintain aspect ratio */
      display: block; /* Prevent inline spacing */
      cursor: pointer;
    }

     @media (min-width: 576px) {
      #product-swiper {
        /*max-height: 300px;*/
        overflow: hidden; /* Prevent overflow */
      }
      #product-swiper .swiper-slide {
        height: auto;
      }
      #product-swiper .swiper-slide img {
        height: auto;
      }
      #product-swiper .swiper-slide-active img {
        border: 4px solid #f0f; /* Red border for active slide */
      }
      #product-swiper > .slider-nav-arrow {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
      }
      #product-swiper > .swiper-button-prev {
        top: 10px;
        bottom: auto;
      }
      #product-swiper > .swiper-button-next {
        top: auto;
        bottom: 10px;
      }
      #product-swiper > .swiper-button-prev::after {
        transform: translateY(2px) rotate(225deg);
      }
      #product-swiper > .swiper-button-next::after {
        transform: translateY(-2px) rotate(45deg);
      }
    }