.elementor-widget-the7-woocommerce-product-images-list {
  --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;
  &.one-product-img {
    --overflow-x: hidden !important;
  }
  & .gallery-swiper {
    position: relative;
    height: 100%;
  }
  &:not(.layout-slider) {
    overflow: hidden;
  }
  & .dt-product-gallery {
   
    --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);
  }
  .the7-scrollbar:hover {
    scrollbar-color: var(--scrollbar-thumb-hover-color) transparent;
  }
  .the7-scrollbar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  .the7-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 7px;
    background: var(--scrollbar-thumb-color);
  }
  .the7-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover-color);
  }
  & .product-list-wrap {
    display: grid;
    grid-auto-flow: var(--grid-auto-flow, unset);
    grid-auto-columns: var(--grid-auto-columns, 100%);
    grid-template-columns: var(
      --grid-template-columns,
      repeat(var(--grid-columns), 1fr)
    );
    align-items: center;
    //grid-template-areas: var(--grid-template-areas);
  }
  &.one-product-img .product-list-wrap {
    grid-template-areas: "img1";
    grid-template-columns: 1fr;
  }
  & .the7-image-wrapper {
    position: relative;
    display: flex;
    transition: all 0.3s;
    & img {
      transition: all 0.3s;
    }
  }
  
  &.alternation-yes .the7-grid-item {
    &:nth-child(1) {
      grid-area: var(--img-grid-area, var(--grid-area-img1));
    }
    &:nth-child(2) {
      grid-area: var(--img-grid-area, var(--grid-area-img2));
    }
    &:nth-child(3) {
      grid-area: var(--img-grid-area, var(--grid-area-img3));
    }
    &:nth-child(4) {
      grid-area: var(--img-grid-area, var(--grid-area-img4));
    }
    &:nth-child(5) {
      grid-area: var(--img-grid-area, var(--grid-area-img5));
    }
    &:nth-child(6) {
      grid-area: var(--img-grid-area, var(--grid-area-img6));
    }
    &:nth-child(7) {
      grid-area: var(--img-grid-area, var(--grid-area-img7));
    }
    &:nth-child(8) {
      grid-area: var(--img-grid-area, var(--grid-area-img8));
    }
    &:nth-child(9) {
      grid-area: var(--img-grid-area, var(--grid-area-img9));
    }
    &:nth-child(10) {
      grid-area: var(--img-grid-area, var(--grid-area-img10));
    }
    &:nth-child(11) {
      grid-area: var(--img-grid-area, var(--grid-area-img11));
    }
    &:nth-child(12) {
      grid-area: var(--img-grid-area, var(--grid-area-img12));
    }
  }

  
  & .post-thumbnail-rollover:before,
  & .post-thumbnail-rollover:after,
  & .the7-video-overlay:before,
  & .the7-video-overlay:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: 1;
    border-radius: inherit;
  }
  & .post-thumbnail-rollover:after,
  & .the7-image-wrapper:hover .post-thumbnail-rollover:before,
  & .the7-image-wrapper:hover .the7-video-overlay:before,
  & .the7-video-overlay:after {
    opacity: 0;
  }

  & .post-thumbnail-rollover:before,
  & .the7-image-wrapper:hover .post-thumbnail-rollover:after,
  & .the7-video-overlay:before,
  & .the7-image-wrapper:hover .the7-video-overlay:after {
    opacity: 1;
  }
  & .gallery-video-wrap {
    aspect-ratio: var(--the7-img-ratio);
    position: relative;
    width: 100%;
    z-index: 3;
  }
  & video,
  & iframe {
    position: var(--position, static);
    top: 0;
    left: 0;
    width: var(--the7-img-width, inherit);
    height: var(--the7-img-height, auto);
    max-width: var(--the7-img-max-width, 100%);
    max-height: var(--the7-img-max-height);
    object-fit: var(--the7-img-object-fit, cover);
    aspect-ratio: var(--the7-img-ratio, auto);

    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: 1;
    }
  }
  & iframe {
    max-height: 100%;
    background-color: #000000;
    aspect-ratio: var(--the7-img-ratio, 16/9);
  }
  & .the7-video-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: var(--the7-img-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: 1;
    }
    body[data-elementor-device-mode="desktop"] .video-autoplay-yes:not(.video-mobile-autoplay-yes)&,
    body[data-elementor-device-mode="desktop"] .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;
    }
  }
  & .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);
  }
 
}

  /*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;
    }
  }
}