  //cover
  .product-cover {
    position: relative;

    #product-images-large:not(.slick-initialized){
      min-height: 200px;
      }
    .expander {
      cursor: pointer;
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      padding: 0.6rem;
      z-index: 22;
       > span {
         background: #fff;
       }
    }
    img {
      margin: 0 auto;
      cursor: -webkit-grab;
      cursor: -moz-grab;
    }
    .slick-disabled{
      display: none !important;
    }
  }
  .product-cover:hover {
    .slick-arrow {
      opacity: 1;
      visibility: visible;
    }
    .slick-prev {
      left: 1rem;
    }
    .slick-next {
      right: 1rem;
    }
  }

  //thumbs
  .product-images {
    margin: 0 -0.5rem;
    .thumb-container {
      padding: 0 0.5rem;
    }
    img {
      cursor: pointer;
    }
    img:hover {
      opacity: .8;
    }
    .slick-disabled{
      display: none !important;
    }
  }

  .images-container {
    margin-bottom: 1.5rem;
    .slick-arrow {
      opacity: 0;
      visibility: hidden;
    }
  }
  //cover and thumb left
  .images-container-left {
    .product-images {
      margin: -0.5rem 0;
      margin-right: 1rem;
      .thumb-container {
        padding: 0.5rem 0;
      }
      .slick-arrow {
        transform: translateY(0);
        margin: auto;
        left: 0;
        right: 0;
        width: 100%;
        height: 2rem;
        padding: 0;
        &:before{
          font-size: 2rem;
          line-height: 2rem;
        }
      }
      .slick-prev {
        top: -20px;
        &:before {
          content: "\F106";
        }
      }
      .slick-next {
        top: auto;
        bottom: -20px;
        &:before {
          content: "\F107";
        }
      }
    }
    .product-images:hover {
      .slick-arrow {
        opacity: 1;
        visibility: visible;
      }
      .slick-prev {
        top: 1rem;
      }
      .slick-next {
        bottom: 1rem;
      }
    }
    .col-left-product-thumbs .mask, .col-left-product-thumbs .slick-vertical{
      height: 100%;
      overflow: hidden;
    }
    .col-left-product-thumbs  .slick-list{
      overflow: visible;
    }

  }
  //cover and thumb bottom
  .images-container-bottom {
    .product-cover {
      margin-bottom: 1rem;
    }
    .product-images {
      margin: 0 -0.5rem;
      .thumb-container {
        padding: 0 0.5rem;
      }
    }
    .product-images:hover {
      .slick-arrow {
        opacity: 1;
        visibility: visible;
      }
      .slick-prev {
        left: 1rem;
      }
      .slick-next {
        right: 1rem;
      }
    }
  }


//modal
#product-modal {
  .modal-dialog {
    max-width: 1000px;
    margin: auto;
    position: absolute;
  }
  &.fade .modal-dialog {
    top: 50%;
    transform: translateY(-50%);
  }
  .modal-header{
    z-index: 2;
  }
  .modal-content {
    height: 100%;
  }
  .modal-body {
    padding: 0;
  }
  .easyzoom-modal {
    text-align: center;
    > a {
      display: block;
      width: 100%;
    }
  }
  .product-cover-modal {
    width: auto;
    margin: 0 auto;
    max-height: calc(100vh - 300px);
  }
  .easyzoom-flyout {
    z-index: 1;
  }
  .slick-track {
    margin: 0 auto;
  }
  #thumbnails {
    .product-images {
      margin: .2rem -.1rem;
      visibility: hidden;
    }
    .product-images.slick-initialized {
      visibility: visible;
    }
    .thumb-container {
      padding: 0 .1rem;
    }
    .slick-arrow {
      opacity: 1;
      visibility: visible;
    }
    .slick-prev {
      left: 1rem;
    }
    .slick-next {
      right: 1rem;
    }
  }
}

//easy zoom
.easyzoom {
  position: relative;
  display: block;
}
.easyzoom-product{
  position: absolute;
  width: 100%;
  height: 100%;
}

.easyzoom-flyout {
  position: absolute;
  overflow: hidden;
  background: #FFF;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .3s $smooth-transition-timing;
  &:hover {
    opacity: 1;
  }
}

.touch-device{
  .easyzoom-flyout {
    opacity: 1;
  }
}

.easyzoom-notice {
  display: none !important;
}

//product flags

.product-flags {
  position: absolute;
  top: 0.5rem;
  z-index: 1;
  left: 1rem;
  transition: $default-transition;
}

li.product-flag {
  display: table;
  background: $brand-primary;
  padding: rem(5px) rem(7px);
  color: white;
  margin-top: .5rem;
  z-index: 2;
  line-height: 1.1em;
  &:after{
    content: "";
    display: block;
  }
  &.online-only {

  }
  &.on-sale, &.discount {

  }
}
.product-cover:hover{
  .product-flags{
    opacity: 0;
    visibility: hidden;
  }
}

#main {
  .images-container {
    .js-qv-mask {
      white-space: nowrap;
      overflow: hidden;
    }
  }
}

@include media-breakpoint-down(sm) {
  #product-modal {
    .modal-dialog{
      min-height: 100%;
      padding: 0;
    }
    .modal-content {
      min-height: 100%;
      position: absolute;
      left: 0;
      right: 0;
    }
    .modal-body {
      @include display(flex);
      -webkit-flex-direction: column;
      flex-direction: column;
      .easyzoom {
        flex: 1;
        @include display(flex);
        align-items: center;
      }
    }
  }
}
  @include media-breakpoint-down(md) {
    .easyzoom-flyout{
      opacity: 1;
    }
    .easyzoom-product{
      display: none;
    }
  }


  @media screen and (max-width: 768px){
    .images-container-d-leftd{
      .product-cover {
        margin-bottom: 1rem;
      }
      .product-images {
        margin: 0 -0.5rem;
        .thumb-container {
          padding: 0 0.5rem;
        }
        .slick-arrow {
          height: auto;
          padding: 1.4rem .7rem;
          transform: translateY(-50%);
          top: 50%;
          width: auto;
          left: auto;
          right: auto;
        }
        .slick-prev {
          top: 50%;
          left:0;
          &:before {
            content: "\F104";
          }
        }
        .slick-next {
          top: 50%;
          right: 0;
          &:before {
            content: "\F105";
          }
        }
      }
      .product-images:hover {
        .slick-arrow {
          opacity: 1;
          visibility: visible;
          width: auto;
        }
        .slick-prev {
          top: 50%;
          left: 1rem;
        }
        .slick-next {
          bottom: auto;
          right: 1rem;
        }
      }
    }
  }

