/* Gallery START*/



/* Gallery */
    .gallery-col { position: relative; min-width: 0; }
    .gallery-wrapper {
    width: 100%;
    max-width: 700px;
    margin-bottom: 40px;
}

.gallery-main {
    position: relative;
    width: 100%;
    height: 550px;
    background: #fff;
    border: 1px solid #eee;
    overflow: visible;
}

.gallery-media {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gallery-media img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.gallery-media video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}


/* =========================================================
   THUMBNAILS
========================================================= */

.gallery-thumbs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 15px;
    overflow-x: auto;
}

.gallery-thumb {
    width: 68px;
    height: 68px;
/*    flex: 0 0 80px;*/
    border: 1px solid #ddd;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.2s ease, transform 0.2s ease;
}



.gallery-thumb.active {
    border: 2px solid var(--brand-blue);
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    /* object-fit: contain; */
    display: block;
}


/* =========================================================
   TAP TO VIEW BUTTON
========================================================= */

.tap-view-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
width:auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 11px;

    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;

    background: rgba(255, 255, 255, 0.92);
    color: #222;

    font-size: 13px;
    line-height: 1;

    cursor: pointer;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);

    transition:
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.tap-view-btn:hover {
    background: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
}

.tap-view-icon {
    width: 12px;
    line-height: 1;
}    

.mini-review-carousel-wrap .owl-dots button, .review-carousel .owl-dots button{width:auto;display: inline-block;}


/* =========================================================
   AMAZON STYLE ZOOM LENS
========================================================= */

.gallery-zoom-lens {
    position: absolute;
    display: none;
    pointer-events: none;
    z-index: 10;

    /* Amazon dotted-grid look */
    background-color: rgba(255, 255, 255, 0.35);
    background-image: radial-gradient(rgba(0, 0, 0, 0.30) 1px, transparent 1.2px);
    background-size: 3px 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.gallery-zoom-result { 
    position: absolute;
    top: 0;
    left: calc(100% + 40px);   /* 40px = .product-grid gap → sits over right column */

     width: calc(100% + 80px);               /* same width as right column */
    height: 500px;             /* landscape box like Amazon */

    display: none;
    pointer-events: none;
    z-index: 50;

    background-color: #fff;
    background-repeat: no-repeat;

    border: 1px solid #d5d9d9;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   FULLSCREEN LIGHTBOX
========================================================= */

.image-lightbox {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 30px;

    background: rgba(0, 0, 0, 0.88);

}


.image-lightbox.active {

    display: flex;

}


/* =========================================================
   LIGHTBOX INNER
========================================================= */

.lightbox-inner {

    position: relative;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

}


/* =========================================================
   LIGHTBOX MEDIA
========================================================= */

.lightbox-media {

    width: 100%;

    height: calc(100% - 110px);

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}


/* =========================================================
   LIGHTBOX IMAGE
========================================================= */

.lightbox-media img {

    max-width: 95%;

    max-height: 100%;

    width: auto;

    height: auto;

    object-fit: contain;

    display: none;

    animation: imageLightboxIn 0.25s ease;

}


/* =========================================================
   LIGHTBOX VIDEO
========================================================= */

.lightbox-media video {

    max-width: 95%;

    max-height: 100%;

    width: auto;

    height: auto;

    object-fit: contain;

    display: none;

    animation: imageLightboxIn 0.25s ease;

}


/* =========================================================
   LIGHTBOX ANIMATION
========================================================= */

@keyframes imageLightboxIn {

    from {

        opacity: 0;

        transform: scale(0.96);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.lightbox-close {

    position: absolute;

    top: 10px;

    right: 10px;

    padding: 5px;

    width: 44px;

    height: 44px;

    border: 0;

    border-radius: 50%;

    background: #fff;

    color: #111;

    font-size: 30px;

    line-height: 37px;

    text-align: center;

    cursor: pointer;

    z-index: 100;

    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.25);

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.lightbox-close:hover {

    background: #f1f1f1 !important;

    transform: scale(1.05);

}


/* =========================================================
   LIGHTBOX THUMBNAIL WRAPPER
========================================================= */

.lightbox-thumbnails-wrapper {

    position: relative;

    width: min(700px, 90%);

    height: 78px;

    margin-top: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================================
   LIGHTBOX THUMBNAILS CONTAINER
========================================================= */

.lightbox-thumbnails {

    width: calc(100% - 90px);

    height: 72px;

    display: flex;

    align-items: center;
    
    justify-content: center;

    gap: 8px;

    overflow-x: auto;

    overflow-y: hidden;

    scroll-behavior: smooth;

    scrollbar-width: none;

}


/* Hide scrollbar Chrome / Safari */

.lightbox-thumbnails::-webkit-scrollbar {

    display: none;

}


/* =========================================================
   LIGHTBOX THUMBNAIL
========================================================= */

.lightbox-thumb {

    position: relative;

    flex: 0 0 68px;

    width: 68px;

    height: 68px;

    padding: 0;

    border: 2px solid transparent;

    background: transparent;

    cursor: pointer;

    overflow: hidden;

    transition:
        border-color 0.2s ease,
        transform 0.2s ease;

}


.lightbox-thumb:hover {

    transform: scale(1.04);

}


.lightbox-thumb.active {

    border-color: #fff;

}


/* =========================================================
   LIGHTBOX THUMBNAIL IMAGE
========================================================= */

.lightbox-thumb img {

    width: 100%;

    height: 100%;

    display: block;

}


/* =========================================================
   VIDEO THUMBNAIL
========================================================= */

.lightbox-video-thumb {

    position: relative;

}


.lightbox-video-thumb::after {

    content: " ";

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    width: 28px;

    height: 28px;

    border-radius: 50%;

    /* background: rgba(0, 0, 0, 0.7); */

    color: #fff;

    font-size: 12px;

    line-height: 28px;

    text-align: center;

    pointer-events: none;

}


/* =========================================================
   THUMBNAIL ARROWS
========================================================= */

.lightbox-thumb-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 36px;

    height: 36px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #fff;

    color: #111;

    font-size: 20px;

    line-height: 36px;

    text-align: center;

    cursor: pointer;

    z-index: 5;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

}


.lightbox-thumb-arrow:hover {

    background: #f1f1f1 !important;

}


/* Previous */

.lightbox-thumb-prev {

    left: 0;

}


/* Next */

.lightbox-thumb-next {

    right: 0;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .image-lightbox {

        padding: 15px;

    }


    .lightbox-inner {

        justify-content: center;

    }


    .lightbox-media {

        height: calc(100% - 100px);

    }


    .lightbox-media img,
    .lightbox-media video {

        max-width: 100%;

        

    }


    .lightbox-close {

        top: 5px;

        right: 5px;

        width: 40px;

        height: 40px;

        padding: 2px;

        font-size: 27px;

    }


    .lightbox-thumbnails-wrapper {

        width: 100%;

        height: 65px;

        margin-top: 8px;

    }


    .lightbox-thumbnails {

        width: calc(100% - 70px);

        height: 60px;

        gap: 6px;

    }


    .lightbox-thumb {

        flex: 0 0 55px;

        width: 55px;

        height: 55px;

    }


    .lightbox-thumb-arrow { 

        width: 30px;

        height: 30px;

        line-height: 30px;

        font-size: 16px;

    }
    .gallery-thumb, .gallery-thumb img{height: auto;}

}
/* =========================================================
   CLICKABLE MAIN IMAGE
========================================================= */

.gallery-media #galleryMainImg {
    cursor: pointer;
}

.gallery-media #galleryMainVideo {
    cursor: pointer;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .gallery-wrapper {
        width: 100%;
        margin: 20px auto;
    }

    .gallery-main {
        height: 420px;
    }

    /*
       Disable Amazon magnifier on mobile.
       Tap to View remains available.
    */

    .gallery-zoom-lens,
    .gallery-zoom-result {
        display: none !important;
    }

    .tap-view-btn {
        top: 10px;

        padding: 7px 10px;

        font-size: 12px;
    }

    .image-lightbox {
        padding: 15px;
    }

    .lightbox-inner img,
    .lightbox-inner video {
        max-width: 100%;
       
    }

    .lightbox-close {
        top: 5px;
        right: 5px;
padding: 2px;
        width: 40px;
        height: 40px;

        font-size: 27px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {

    .gallery-zoom-result {
        display: none !important;
    }

    .gallery-zoom-lens {
        display: none !important;
    }

}


/* =========================================================
   DESKTOP
========================================================= */


.image-lightbox {
    cursor: pointer;
}

.lightbox-inner {
    cursor: default;
}

.lightbox-inner img,
.lightbox-inner video {
    cursor: default;
}


@media (max-width: 991px) {
  
  .gallery-thumb{
      
      height: auto;
  }

  .gallery-main{
     height: 440px;
  }

}

@media (max-width: 370px) {

   .ups1 .pic img{

       width: 90% !important;
   }
}





#galleryZoomLens {
    transition: none !important;
    animation: none !important;
    pointer-events: none !important;
    will-change: transform;
    box-sizing: border-box;
}

#galleryZoomResult {
    transition: none !important;
    animation: none !important;
    pointer-events: none !important;
    will-change: background-position;
}

#galleryMainImg {
    transition: none;
}








#galleryZoomLens {
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100%;
    transition: none !important;
    z-index: 10;
}