.thumbs-slider1,
.thumbs-slider2,
.thumbs-slider3,
.thumbs-slider4,
.thumbs-slider {
  display: flex;
  gap: 10px;
}

.tf-product-media-thumbs {
  width: calc(14% - 10px);
  max-height: 500px;
}
.tf-product-media-thumbs .swiper-slide {
  height: max-content;
}
.tf-product-media-thumbs .swiper-slide .item {
  position: relative;
  height: 100%;
}
.tf-product-media-thumbs .swiper-slide .item img {
  border-radius: 5px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tf-product-media-thumbs .swiper-slide .item::after {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 2px solid transparent;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-radius: 5px;
}
.tf-product-media-thumbs .swiper-slide.swiper-slide-thumb-active .item::after {
  border: 2px solid #000000;
}

.thumbs-bottom .thumbs-slider {
  flex-direction: column;
}
.thumbs-bottom .thumbs-slider .tf-product-media-thumbs {
  order: 1;
  width: 100%;
}
.thumbs-bottom .thumbs-slider .tf-product-media-thumbs .swiper-slide {
  width: 119px;
}
.thumbs-bottom .thumbs-slider .tf-product-media-main {
  width: 100%;
}
.thumbs-bottom .thumbs-slider1 {
  flex-direction: column;
}
.thumbs-bottom .thumbs-slider1 .tf-product-media-thumbs {
  order: 1;
  width: 100%;
}
.thumbs-bottom .thumbs-slider1 .tf-product-media-thumbs .swiper-slide {
  width: 119px;
}
.thumbs-bottom .thumbs-slider1 .tf-product-media-main1 {
  width: 100%;
}
.thumbs-bottom .thumbs-slider2 {
  flex-direction: column;
}
.thumbs-bottom .thumbs-slider2 .tf-product-media-thumbs {
  order: 1;
  width: 100%;
}
.thumbs-bottom .thumbs-slider2 .tf-product-media-thumbs .swiper-slide {
  width: 119px;
}
.thumbs-bottom .thumbs-slider2 .tf-product-media-main2 {
  width: 100%;
}
.thumbs-bottom .thumbs-slider3 {
  flex-direction: column;
}
.thumbs-bottom .thumbs-slider3 .tf-product-media-thumbs {
  order: 1;
  width: 100%;
}
.thumbs-bottom .thumbs-slider3 .tf-product-media-thumbs .swiper-slide {
  width: 119px;
}
.thumbs-bottom .thumbs-slider3 .tf-product-media-main3 {
  width: 100%;
}
.thumbs-bottom .thumbs-slider4 {
  flex-direction: column;
}
.thumbs-bottom .thumbs-slider4 .tf-product-media-thumbs {
  order: 1;
  width: 100%;
}
.thumbs-bottom .thumbs-slider4 .tf-product-media-thumbs .swiper-slide {
  width: 119px;
}
.thumbs-bottom .thumbs-slider4 .tf-product-media-main4 {
  width: 100%;
}

.tf-product-media-main1,
.tf-product-media-main2,
.tf-product-media-main3,
.tf-product-media-main4,
.tf-product-media-main {
  width: 86%;
  max-height: 500px;
}
.tf-product-media-main1 .item,
.tf-product-media-main2 .item,
.tf-product-media-main3 .item,
.tf-product-media-main4 .item,
.tf-product-media-main .item {
  width: 100%;
  height: 100%;
  max-height: 500px;
}
.tf-product-media-main1 .item img,
.tf-product-media-main2 .item img,
.tf-product-media-main3 .item img,
.tf-product-media-main4 .item img,
.tf-product-media-main .item img {
  border-radius: 10px;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.stagger-wrap .stagger-item {
  transition: 0.3s ease-in-out;
  transform: scale(0.5) rotate(90deg) skew(15deg);
  opacity: 0;
}
.stagger-wrap .stagger-item.stagger-finished {
  transform: scale(1) rotate(0deg) skew(0deg);
  opacity: 1;
}
.tf-zoom-main {
  position: sticky;
  top: 30px;
  z-index: 9999;
}
.tf-zoom-main .drift-zoom-pane {
  top: 0;
  left: 0;
  height: 520px;
  max-width: 520px;
  width: 100%;
  background: #fff;
  -webkit-transform: translate3d(0, 0, 0);
  box-shadow: 0 1px 5px rgba(127, 127, 127, 0.0196078431), 0 5px 18px rgba(127, 127, 127, 0.2);
  z-index: 3;
}

.drift-bounding-box.drift-open {
  background: rgba(255, 255, 255, 0.2509803922);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
  z-index: 5000;
}

.drift-zoom-pane {
  z-index: 5000;
}

.section-image-zoom .other-image-zoom {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.section-image-zoom.zoom-active .other-image-zoom {
  opacity: 0.3;
}

.pswp__bg {
  background: #ffffff;
}

.pswp__icn {
  fill: rgb(34, 34, 34);
  color: #ffffff;
}
.pswp__icn .pswp__icn-shadow {
  stroke: #ffffff;
  stroke-width: 1px;
  fill: none;
}

.pswp__counter {
  color: #222;
  text-shadow: 1px 1px 3px #ffffff;
}

.tf-model-viewer {
  width: 100%;
  height: 100%;
  position: relative;
}
.tf-model-viewer model-viewer {
  display: block;
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
}
.tf-model-viewer model-viewer.disabled {
  pointer-events: none;
}
.tf-model-viewer.active model-viewer {
  pointer-events: all;
}
.tf-model-viewer.active .wrap-btn-viewer {
  display: none;
}
.stagger-wrap .stagger-item.stagger-finished {
    transform: scale(1) rotate(0deg) skew(0deg);
    opacity: 1;
}
.swiper-wrapper { /* height: auto !important; */ }
.swiper-slide { height: fit-content !important; }
.swiper-button-next, .swiper-button-prev { color: #706f6e; }
.tf-product-media-thumbs .thumbs-prev,
.tf-product-media-thumbs .thumbs-next {
    position: absolute;
    z-index: 999999;
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
}

.tf-product-media-thumbs .thumbs-prev {
    top: 5px; /* Position for the previous button */
    left: 50%;
    transform: translateX(-50%);
}

.tf-product-media-thumbs .thumbs-next {
    bottom: 5px; /* Position for the next button */
    left: 50%;
    transform: translateX(-50%);
}

.tf-product-media-thumbs .thumbs-prev i,
.tf-product-media-thumbs .thumbs-next i {
    font-size: 16px; /* Adjust icon size */
}
@media only screen and (max-width: 767px) {
    .tf-product-media-wrap {
        margin-bottom: 15px;
    }
    .tf-product-media-thumbs .thumbs-prev {
        top: 50%;
        left: 10px;
        transform: rotate(-90deg) translateX(50%);
    }
    .tf-product-media-thumbs .thumbs-next {
        top: 50%;
        right: 10px;
        transform: rotate(-90deg) translateX(50%);
        left: auto;
    }
    .tf-product-media-main1, .tf-product-media-main2, .tf-product-media-main3, .tf-product-media-main4, .tf-product-media-main {
        max-height: 350px;
    }
}
@media only screen and (max-width: 1149px) {
    .thumbs-slider1, .thumbs-slider2, .thumbs-slider3, .thumbs-slider4, .thumbs-slider {
        flex-direction: column !important;
    }
    .thumbs-slider1 .tf-product-media-thumbs, 
    .thumbs-slider2 .tf-product-media-thumbs, 
    .thumbs-slider3 .tf-product-media-thumbs, 
    .thumbs-slider4 .tf-product-media-thumbs, 
    .thumbs-slider .tf-product-media-thumbs {
        order: 1;
    }
    .thumbs-slider1 > div, .thumbs-slider2 > div, .thumbs-slider3 > div, .thumbs-slider4 > div, .thumbs-slider > div {
        width: 100%;
    }
}