@import "@css[shared]/page/product/_product-gallery";

.product-photo-main, .product-gallery {
   margin-bottom: 0;
}

.product-photo-main {
   position: relative;

   .col-sm-6 {
      padding: 0 5px;
   }

   .row > div {
      aspect-ratio: 1;
   }

   @media screen and (max-width: $sm - 1) {
      .row > div {
         aspect-ratio: 500 / 656;
      }
   }

   .gallery-item:nth-child(3),
   .gallery-item:nth-child(4) {
      margin-top: 10px;
   }

   .gallery-item-hidden {
      display: none;
   }

   .gallery-item {
      margin-bottom: 0;

      &::before {
         background-color: rgba(0, 0, 0, .025);
         content: "";
         display: block;
         opacity: 1;
         pointer-events: none;
         position: absolute;
         top: 0;
         left: 5px;
         right: 5px;
         bottom: 0;
         transition: background-color .3s ease;
         z-index: 2;
         border-radius: 10px;
      }

      img {
         border-radius: 10px;
         aspect-ratio: 1;
      }

      .gallery-more-photos-resp {
         display: none;
      }

      @media screen and (max-width: $sm - 1) {
         .gallery-more-photos-resp {
            display: block;
            position: absolute;
            bottom: 10px;
            right: 15px;
            padding: 9px 12px;
            background-color: $white;
            border-radius: 5px;

            img {
               display: none;
            }

            .fc {
               font-size: 18px;
               position: relative;
               top: -1px;
               margin-right: 10px;
            }
         }
      }
   }

   .gallery-more-photos {
      position: absolute;
      bottom: 20px;
      right: 5px;
      padding: 9px 12px;
      background-color: $white;
      border-radius: 5px;

      img {
         display: none;
      }

      .fc {
         font-size: 18px;
         position: relative;
         top: -1px;
         margin-right: 10px;
      }

      @media screen and (max-width: $sm - 1) {
         display: none;
      }
   }

   @media screen and (max-width: $sm - 1) {
      .gallery-item {
         &:first-child {
            width: 100%;

            img {
               width: 100%;
            }
         }

         &:nth-child(3), &:nth-child(4) {
            width: 33.3%;
         }

         &:nth-child(2) {
            width: 33.3%;
            margin-top: 10px;
         }
      }
   }
}

.product-photos {
   display: none;
}

.product-gallery-sets {
   margin-bottom: $spacer-lg;

   .gallery-item:nth-child(3) {
      margin-top: 0;
   }

   @media screen and (max-width: $md - 1) {
      .gallery-item:first-child {
         margin-bottom: 20px;
      }
   }
}

.pswp__scroll-wrap {
   //border-radius: $border-radius-md;

   .pswp__counter {
      //@include title-default;

      top: 10px;
      left: 20px;
   }

   .pswp__button {
      @include fonticon;

      &::before {
         background-color: transparent;
      }
   }

   .pswp__button--arrow--left {
      left: 10px;

      &::before {
         content: $icons_caret-left;
         background-image: none;
      }
   }

   .pswp__button--arrow--right {
      right: 10px;

      &::before {
         content: $icons_caret-right;
         background-image: none;
      }
   }

   .pswp__caption {
      color: $black;
      text-transform: none;
   }

   .pswp__button--close {
      text-underline-offset: 5px;
      right: 10px;
      font: unset;

      &:hover {
         text-decoration: underline;

         &::after {
            text-decoration: none;
         }
      }

      &::after {
         position: relative;
         top: 3px;
         font-size: 16px;
      }
   }

   .pswp__button--zoom {
      right: 10px;
   }
}

@media screen and (max-width: $sm - 1) {
   /* .gallery-item {
      &:nth-child(2) {
         display: none;
      }
   } */
}
