.elementor-widget-the7-woocommerce-product-images-slider {
  --offset-v-m-img: 50%;
  --offset-v-t-img: 0px;
  --top-b-img: 100%;
  --offset-v-b-img: 0px;
  --arrow-v-offset: 0px;
  --arrow-h-offset: 0px;

   --thumbs-offset-v-m-img: 50%;
  --thumbs-offset-v-t-img: 0px;
  --thumbs-offset-v-b-img: 0px;
  --thumbs-arrow-v-offset: 0px;
  --thumbs-arrow-h-offset: 0px;

  &.elementor-loading {
    opacity: 0.3 !important;
  }
  &.one-product-img {
    --overflow-x: hidden !important;
  }
  & .elementor-widget-container {
    position: relative;
    display: flex;
    flex-flow: var(--thumbs-swiper-direction);
  }
  
  & .dt-product-gallery {
    &.swiper {
      position: static;
    }
    & .swiper-wrapper {
      align-items: center;
    }
    --scrollbar-thumb-color: rgba(0, 0, 0, 0.4);
    --scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.6);
    scrollbar-color: var(--scrollbar-thumb-color) transparent;
    overflow-x: var(--overflow-x, hidden);
    overflow-y: var(--overflow-y, hidden);
  
    &.swiper-autoheight {
      height: auto;
    }
  }
  & .img-css-resize-wrapper {
    text-align: center;
  }
  & .the7-image-wrapper {
    display: flex;
    transition: all 0.3s;
    & img {
      transition: all 0.3s;
    }
  }
  
  & .gallery-video-wrap {
    display: flex;
    aspect-ratio: var(--aspect-ratio);
    position: relative;
    width: 100%;
    z-index: 3;
  }
  & video,
  & iframe {
    position: var(--position, static);
    top: 0;
    left: 0;
    width: var(--img-width, inherit);
    height: var(--height, auto);
    max-width: var(--max-width, 100%);
    max-height: var(--max-height);
    object-fit: var(--object-fit, cover);
    aspect-ratio: var(--aspect-ratio, auto);
    z-index: 3;
    border-radius: inherit;
    transition: 0.3s ease;
  }
  & video,
  & iframe {
    .elementor-widget:not(.video-autoplay-yes)&,
    body[data-elementor-device-mode="mobile"] .video-autoplay-yes:not(.video-mobile-autoplay-yes)& {
      opacity: 0;
    }
  }
  & .playing-video video,
  & .playing-video iframe {
    .elementor-widget:not(.video-autoplay-yes)&,
    body[data-elementor-device-mode="mobile"] .video-autoplay-yes:not(.video-mobile-autoplay-yes)& {
      opacity: var(--img-opacity, 1);
    }
  }
  & .the7-image-wrapper:hover .playing-video video,
  & .the7-image-wrapper:hover .playing-video iframe {
    &.elementor-widget:not(.video-autoplay-yes)&,
    body[data-elementor-device-mode="mobile"] .video-autoplay-yes:not(.video-mobile-autoplay-yes)& {
      opacity: var(--img-opacity-hover, 1);
    }
  }
  & iframe {
    max-height: 100%;
    background-color: #000000;
    aspect-ratio: var(--aspect-ratio, 16/9);
  }
  & .the7-video-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: var(--object-fit, contain);
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
    border-radius: inherit;
    transition: 0.3s ease;
    z-index: 4;
    .elementor-widget:not(.video-autoplay-yes)& {
      opacity: var(--img-opacity, 1);
    }
    body:not([data-elementor-device-mode="mobile"]) .video-autoplay-yes:not(.video-mobile-autoplay-yes)&,
    body:not([data-elementor-device-mode="mobile"]) .video-autoplay-yes.video-mobile-autoplay-yes& {
      display: none;
    }
    body[data-elementor-device-mode="mobile"] .video-autoplay-yes:not(.video-mobile-autoplay-yes)& {
      display: block;
    }
  }
  & .the7-image-wrapper:hover .the7-video-overlay {
    .elementor-widget:not(.video-autoplay-yes)& {
      opacity: var(--img-opacity-hover, 1);
    }
  }
  & .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 30px;
    min-height: 30px;
    z-index: 2;
    transition: all 0.3s;
    cursor: pointer;
  }
  & .play-icon i {
    transition: color 0.3s;
    color: rgba(255, 255, 255, 0.75);

  }
  & .play-icon svg {
    transition: fill 0.3s, color 0.3s;
    color: rgba(255, 255, 255, 0.75);
    fill: rgba(255, 255, 255, 0.75);
  }
/*Zoom*/
& .the7-zoom-on-hover {
  background-position: 50% 50%;
  position: relative;
  width: 100%;
  border-radius: inherit;
  cursor: url('../../../images/zoom-icon.svg'), zoom-in;
}
& .the7-zoom-on-hover img:hover {
  opacity: 0;
}
& .the7-zoom-on-hover img {
  transition: opacity .250s;
  display: block;
  width: 100%;
}

  /*Arrows*/
  & .the7-swiper-button,
  & .the7-thumbs-swiper-button {
    position: absolute;
    z-index: 2;
    display: var(--arrow-display, inline-flex);
    justify-content: center;
    align-items: center;
    opacity: var(--arrow-opacity, 1);
    transition: opacity 0.3s;
    color: var(--arrow-color);
    cursor: pointer;
    &.disabled {
      display: none;
    }
    transition: all 0.3s;
    --arrow-translate-y: -50%;
    & > i {
      transition: color 0.3s;
      &:before {
        color: inherit;
      }
    }
    & > svg {
      height: auto;
      transition: fill 0.3s, color 0.3s;
    }
    &:hover {
      color: var(--arrow-color);
    }
     &:hover svg {
      color: var(--arrow-color);
      fill: var(--arrow-color);
    }
  }
  & .thumbs-swiper:hover > .the7-thumbs-swiper-button {
    opacity: 1;
  }
   & .the7-swiper-button {
    top: calc(50% + var(--arrow-v-offset, 0px) + var(--offset-v-t-img));
    transform: translate3d(var(--arrow-translate-x, 0px), var(--arrow-translate-y), 0px);

    & > i {
      font-size: var(--arrow-icon-size);
    }
    & > svg {
      width: var(--arrow-icon-size);
    }
    & .the7-swiper-button-prev {
      left: var(--arrow-h-offset, 10px);
      --arrow-translate-x: 0;
    }
    & .the7-swiper-button-next {
      left: calc(100% - var(--arrow-h-offset, 10px) - var(--thumb-arrow-width, 40px));
      --arrow-translate-x: -100%;
    }
  }
  & .the7-thumbs-swiper-button {
    top: calc(50% + var(--arrow-v-offset, 0px) + var(--offset-v-t-img));
    transform: translate3d(var(--arrow-translate-x, 0px), var(--arrow-translate-y), 0px);

    & > i {
      font-size: var(--arrow-icon-size);
    }
    & > svg {
      width: var(--arrow-icon-size);
    }
    & .the7-swiper-button-prev {
      left: var(--arrow-h-offset, 10px);
      --arrow-translate-x: 0;
    }
    & .the7-swiper-button-next {
      left: calc(100% - var(--arrow-h-offset, 10px) - var(--thumb-arrow-width, 40px));
      --arrow-translate-x: -100%;
    }
  }
  & .swiper-pagination-nested .owl-dot {
    cursor: pointer;
    width: var(--bullet-size);
    height: var(--bullet-size);
    margin: 0 calc(var(--bullet-gap) / 2);
  }
  & .swiper-pagination.swiper-pagination-hidden {
    opacity: 0;
    visibility: hidden;
  }
  &.bullets-custom.bullets-stretch-y.bullets-horizontal .owl-dots  {
      left: var(--custom-bullets-position-left);
  }
  & .owl-dots {
    position: absolute;
    z-index: 2;
    display: var(--bullet-display);
    flex-flow: var(--bullets-direction, row);
    column-gap: var(--bullet-gap);
    row-gap: var(--bullet-gap);
    width: var(--bullets-width, max-content);
    opacity: var(--bullet-opacity, 1);
    transform: translate3d(
      var(--bullet-translate-x, 0),
      var(--bullet-translate-y, -50%),
      0
    );
    .bullets-custom.bullets-stretch-y& {
      top: var(--custom-bullets-position-top) !important;
      bottom: auto !important;
      width: var(--custom-bullets-width, max-content);
      height: var(--custom-bullets-height);
    }
    
    .bullets-custom& {
      & .owl-dot {
        width: 30px;
        height: 5px;
        background-color: var(--bullet-color);
        border-color: var(--the7-accent-color);
        transition: all 0.3s;
      }
    }
    transition: all 0.3s;
    & .owl-dot {
      position: relative;
      flex-grow: var(--bullet-flex-grow, initial);
      width: var(--bullet-size);
      height: var(--bullet-size);
      margin: 0;
      background: none;
      color: inherit;
      border: none;
      padding: 0 !important;
      font: inherit;
      outline: none;
      & span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        outline: none;
        border-radius: 50%;
      }
    }
  }

  &:hover .the7-swiper-button,
  &:hover .owl-dots {
    opacity: 1;
  }

/*bullet specific styles*/

  &.bullets-scale-up
  .owl-dot:not(.active):not(:hover)
  span {
    background: var(--bullet-color, var(--the7-accent-color));
  }

  &.bullets-scale-up
  .owl-dot:not(.active):hover
  span {
  background: var(--bullet-hover-color, var(--the7-accent-color));
}

  &.bullets-scale-up
  .owl-dot.active
  span {
  background: var(--bullet-active-color, var(--the7-accent-color));
}

  &.bullets-stroke
  .owl-dot:not(.active):not(:hover)
  span {
  background: var(--bullet-color, var(--the7-accent-color));
}

  &.bullets-stroke
  .owl-dot:not(.active):hover
  span {
  background: var(--bullet-hover-color, var(--the7-accent-color));
}

  &.bullets-stroke
  .owl-dot.active
  span {
  box-shadow: 0 0 0 var(--bullet-border-width, 2px)
    var(--bullet-active-color, var(--the7-accent-color)) !important;
}

  &.bullets-fill-in
  .owl-dot:not(.active):not(:hover)
  span {
  box-shadow: inset 0 0 0 var(--bullet-border-width, 2px)
    var(--bullet-color, var(--the7-accent-color)) !important;
}

  &.bullets-fill-in
  .owl-dot:not(.active):hover
  span {
  box-shadow: inset 0 0 0 var(--bullet-border-width, 2px)
    var(--bullet-hover-color, var(--the7-accent-color));
}

  &.bullets-fill-in
  .owl-dot.active
  span {
  box-shadow: inset 0 0 0 calc(var(--bullet-border-width, 2px) + 10px)
    var(--bullet-active-color, var(--the7-accent-color));
}

  &.bullets-small-dot-stroke
  .owl-dot:not(.active):not(:hover)
  span {
  background: var(--bullet-color, var(--the7-accent-color));
}

  &.bullets-small-dot-stroke
  .owl-dot:not(.active):hover
  span {
  background: var(--bullet-hover-color, var(--the7-accent-color));
}

  &.bullets-small-dot-stroke
  .owl-dot.active
  span {
  background: var(--bullet-active-color, var(--the7-accent-color));
}

  &.bullets-small-dot-stroke
  .owl-dot.active {
  box-shadow: 0 0 0 var(--bullet-border-width, 2px)
    var(--bullet-active-color, var(--the7-accent-color));
}


  &.bullets-ubax
  .owl-dot
  span {
  background: var(--bullet-color, var(--the7-accent-color));
  border-width: ~"min(calc(var(--bullet-size)/2), var(--bullet-border-width, 2px))";
}


  &.bullets-ubax
  .owl-dot.active
  span {
  border-color: var(--bullet-active-color, var(--the7-accent-color));
}


  &.bullets-ubax
  .owl-dot:not(.active):hover
  span {
  background: var(--bullet-hover-color, var(--the7-accent-color));
}
&.bullets-etefu .owl-dot span:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.5s;
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

  &.bullets-etefu
  .owl-dot
  span {
  background: var(--bullet-color, var(--the7-accent-color));
  border-radius: 0 !important;
}

  &.bullets-etefu
  .owl-dot:not(.active):hover
  span {
  background: var(--bullet-hover-color, var(--the7-accent-color));
}

  &.bullets-etefu
  .owl-dot
  span:before {
  background: var(--bullet-active-color, var(--the7-accent-color));
}

  &.bullets-etefu
  .owl-dot
  span:before {
  opacity: 0;
  transition: opacity 0.5s;
  transform: translate3d(0, 0, 0);
}


  &.bullets-etefu
  .owl-dot.active
  span:before {
  opacity: 1;
}

&.bullets-etefu {
  --bullet-border-width: 5px;
}

  &.bullets-etefu
  .owl-dot
  span {
  height: var(--bullet-border-width, 100%) !important;
  border-radius: 0 !important;
}

/*end of specific bullet styles*/

/*Thumbnails*/
&.one-product-img .thumbs-swiper {
  display: none;
}
& .elementor-swiper {
  order: 1;
  width: 100%;
  max-width: 100%;
}
   &.display-thumbs-outside-y .elementor-swiper {
    max-width: 100%;
    width: var(--elementor-slider-width);
   }
   &:not(.display-thumbs-outside-y) .thumbs-swiper {
    transform: translate3d( var(--thumbs-v-translate-x, 0), var(--thumbs-v-translate-y, 0), 0);
    top: var(--thumbs-v-top-position, 0px);
    bottom: var(--thumbs-v-bottom-position);
    left: var(--thumbs-h-left-position);
   }
   &.display-thumbs-outside-y .thumbs-swiper {
    align-self: var(--thumbs-vertical-alignment);
   }
  & .thumbs-swiper {
    display: var(--thumbs-display, none);
    order: var(--thumbs-order, 0);
    position: var(--thumbs-swiper-position, absolute);
    top: var(--thumbs-swiper-top-position);
    bottom: var(--thumbs-swiper-bottom-position);
    left: var(--thumbs-swiper-left-position);
    right: var(--thumbs-swiper-right-position);
    max-width: var(--thumbs-swiper-max-width);
    max-height: var(--thumbs-swiper-max-height);
    z-index: 2;
    width: var(--thumbs-wrap-width);
    height: var(--thumbs-wrap-height);
    & .swiper {
      width: 100%;
    }
  
    & .swiper-wrapper {
      align-items: center;
      height: auto;
    }
    & .the7-swiper-slide {
      &:last-child {
        margin-right: 0 !important;
        margin-bottom: 0 !important;
      }
    }
    & .swiper-button-disabled {
      display: none;
    }
  }
  & .thumbs-slides-wrapper {
    opacity: 0;
    & .play-icon {
      min-width: 32px;
      min-height: 32px;
    }
    &.swiper-horizontal {
      display: flex;
        justify-content: var(--justify-thumb-content, flex-start);
      & .swiper-wrapper {
        width: auto;
      }
      & .the7-swiper-slide {
        height: auto;
        max-width: var(--thumb-width);
        max-height: var(--thumb-height);
      }
    }
    &.swiper-initialized {
      opacity: 1;
    }
    &.swiper-vertical {
      position: relative;
      width: 100%;
      min-height: 100%;
      display: flex;
      align-items: var(--thumbs-vertical-alignment);
      & .swiper-wrapper {
        align-items: center;
        margin-top: var(--swiper-t-margin);
        margin-bottom: var(--swiper-b-margin);
      }
      & .the7-swiper-slide {
        max-width: var(--thumb-width);
      }
    }
    .img-css-resize-wrapper {
      width: 100%;
      height: 100%;
      aspect-ratio: var(--thumb-aspect-ratio);
      position: relative;
      display: flex;
      align-items: center;
      line-height: 0;
      & img {
       position: static;
        width: var(--img-width, inherit);
        height: var(--height, auto);
        max-width: 100%;
        object-fit: cover;
        aspect-ratio: var(--thumb-aspect-ratio, var(--ratio));
      }
    }
  } 
  & .the7-thumbs-swiper-button {
      top: var(--thumbs-swiper-button-position-top) !important;
      left: var(--thumbs-swiper-button-position-left);
      transform: var(--thumbs-swiper-button-transform);
     
      &.the7-thumbs-swiper-button-prev {
        left: var(--thumbs-swiper-button-prev-position-left) !important;
        top: var(--thumbs-swiper-button-prev-position-top) !important;
      }
      &.the7-thumbs-swiper-button-next {
        left: var(--thumbs-swiper-button-next-position-left);
        top: var(--thumbs-swiper-button-next-position-top) !important;
      }
    }
}

  /*Lighbox*/
.pswp {
  & .video-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    height: 100%;
    & video,
    & iframe {
      max-width: 100vw;
     max-height: 100vh;
    }
    & iframe {
      position: relative;
      min-width: 100%;
      min-height: 100%;
      object-fit: cover;
      aspect-ratio: 16/9;
    }
  }
}