
.elementor-widget-the7-woocommerce-product-images-vertical-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;
  opacity: 0;
   overflow: scroll;
  scrollbar-width: none;
  --scrollbar-active-thumb-bg: #000000;
  --scrollbar-thumb-bg: transparent;
  scroll-behavior: smooth;
  max-height: 100dvh;
  transition: all .2s cubic-bezier(.4,0,.2,1);

  &.elementor-loading {
    opacity: 0.3 !important;
  }
  &.one-product-img {
    --overflow-x: hidden !important;
  }
  & .swiper-vertical  {
    flex-direction: column;
}
   & .vertical-slider-wrapper {
     display: flex;
     flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: flex-start;

   }
  & .mainImageList {
    display: flex;
    flex-flow: column nowrap;
    row-gap: var(--grid-column-gap);
  }
  & .img-css-resize-wrapper {
    text-align: center;
  }
  & .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;
    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);
  }
  & .dots-swiper-container {
    position: absolute;
    display: flex;
    flex-flow: column nowrap;
    column-gap: var(--bullet-gap);
    row-gap: var(--bullet-gap);
    top: 0;
    right: var(--bullets-oposition-right);
    left: var(--bullets-oposition-left);
    width: var(--bullets-width, max-content);
   // min-height: var(--widget-thumbs-height, 100%);
    height: calc(100dvh - var(--widget-thumbs-position-top));
    align-self: var(--justify-bullets-content);
    justify-content: var(--justify-bullets-content);
  }
  & .owl-dots {
    position: sticky;
    top: 0;
    right: var(--bullets-oposition-right);
    left: var(--bullets-oposition-left);
    z-index: 4;
    order: var(--bullets-order, 0);
    display: var(--bullet-display);
    opacity: var(--bullet-opacity, 1);
    transform: none;
    .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);
    }
    transition: all 0.3s;
    & .owl-dot {
      position: relative;
      flex-grow: var(--bullet-flex-grow, initial);
      width: 10px;
      height: 10px;
      background-color: var(--bullet-color, var(--the7-accent-color));
      border-color: var(--the7-accent-color);
      transition: all 0.3s;
      margin: 0;
      border: none;
      padding: 0 !important;
      font: inherit;
      outline: none;
    }
  }

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

/*Thumbnails*/
&.one-product-img .thumbs-swiper {
  display: none;
}
& .main-image-wrapper {
  width: var(--img-container-width);
  order: 1;
}
  & .thumbs-swiper {
    position: sticky;
    display: var(--thumbs-display, flex);
    order: var(--thumbs-order, 0);
    top: 0px;
    left: 0;
    z-index: 4;
    height: calc(100dvh - var(--widget-thumbs-position-top));
    .display-thumbs-outside-y& {
      width: calc((var(--thumb-item-size, 80px) + var(--thumbs-padding-right, 0px) + var(--thumbs-padding-left, 0px)));
    }
    & .swiper {
      width: 100%;
      height: 100%;
      max-height: var(--max-length, var(--widget-thumbs-height, 100%));
    }
  
    & .swiper-wrapper {
      align-items: center;
      height: auto;
    }
    & .the7-swiper-slide {
      transition: all 0.3s ease;
      &:last-child {
        margin-right: 0 !important;
        margin-bottom: 0 !important;
      }
    }
    & .swiper-button-disabled {
      display: none;
    }
  }
  & .thumbs-swiper-container {
    position: relative;
    display: flex;
    align-self: var(--justify-thumb-content);
    align-items: var(--justify-thumb-content);
    height: var(--max-length, calc(100dvh - var(--widget-thumbs-position-top)));
    //eight: calc(100dvh - var(--widget-thumbs-position-top))
    
  }
  &:not(.display-thumbs-outside-y) .thumbs-swiper-container {
      position: absolute;
      right: var(--thumbs-oposition-right);
      left: var(--thumbs-oposition-left);
      width: calc((var(--thumb-item-size, 80px) + var(--thumbs-padding-right, 0px) + var(--thumbs-padding-left, 0px)));
  }
  & .thumbs-slides-wrapper {
    opacity: 0;
    & .play-icon {
      min-width: 32px;
      min-height: 32px;
    }
    
    &.swiper-initialized {
      opacity: 1;
    }
    &.swiper-vertical {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: var(--justify-thumb-content);
      & .swiper-wrapper {
        align-items: center;
        margin-top: var(--swiper-t-margin);
        margin-bottom: var(--swiper-b-margin);
      }
      & .the7-swiper-slide {
        max-width: auto;
      }
    }
    .img-css-resize-wrapper {
      width: 100%;
      height: 100%;
      aspect-ratio: var(--thumb-aspect-ratio);
      position: relative;
      display: flex;
      align-items: center;
      line-height: 0;
      border-radius: inherit;
      & img {
       position: static;
        width: var(--img-width, inherit);
        height: var(--height, auto);
        max-width: 100%;
        object-fit: cover;
        border-radius: inherit;
        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: translate3d(-50%, 0px, 0);
     
      &.the7-thumbs-swiper-button-prev {
        left: calc(50% + var(--thumbs-arrow-prev-h-offset, 0px) + var(--thumbs-offset-v-t-img)) !important;
        top: var(--thumbs-arrow-prev-v-offset, 10px) !important;
      }
      &.the7-thumbs-swiper-button-next {
        left: calc(50% + var(--thumbs-arrow-next-h-offset, 0px) + var(--thumbs-offset-v-t-img));
        top: calc(100% - var(--thumb-arrow-height) - var(--thumbs-arrow-next-v-offset, 10px)) !important;
      }
    }

    & .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 {
    overflow: hidden;
    position: relative;
    width: 100%;
    border-radius: inherit;
    cursor: url('../../../images/zoom-icon.svg') 14 14, zoom-in;
  }
  & .the7-zoom-on-hover img {
    display: block;
    width: 100%;
    transition: transform 0.1s linear, opacity .250s;
    transform-origin: center;
  }
  
}
