/********************
	Part - Product cover layer
********************/
.product-cover .layer {
    display           : -webkit-box;
    display           : -ms-flexbox;
    display           : flex;
    -webkit-box-align : center;
    -ms-flex-align    : center;
    align-items       : center;
    -webkit-box-pack  : center;
    -ms-flex-pack     : center;
    justify-content   : center;
    width             : 100%;
    height            : 100%;
    background        : #fff;
    position          : absolute;
    left              : 0;
    top               : 0;
    opacity           : 0;
    background        : hsla(0, 0%, 100%, .7);
    text-align        : center;
    cursor            : pointer
}

.product-cover .layer:hover {
    opacity : 1
}

.product-cover .layer .zoom-in {
    font-size : 6.25rem;
    color     : var(--color-grey-font-default)
}

/********************
	Part - Product modal
********************/
#product-modal .modal-content {
    background : transparent;
    border     : none;
    padding    : 0;
    box-shadow : unset;
}

#product-modal .modal-content .modal-body {
    display     : -webkit-box;
    margin-left : -30%
}

#product-modal .modal-content .modal-body .product-cover-modal {
    background : #fff;
    max-height: 630px ;
}

#product-modal .modal-content .modal-body .image-caption {
    background : #fff;
    width      : 800px;
    padding    : .625rem 1.25rem;
    border-top : 1px solid var(--color-grey-default)
}

#product-modal .modal-content .modal-body .image-caption p {
    margin-bottom : 0
}

#product-modal .modal-content .modal-body .thumbnails {
    position : relative;
    width: 100% ;
    max-height: 630px ;
}

#product-modal .modal-content .modal-body .mask {
    position   : relative;
    overflow   : hidden;
    max-height : 49.38rem;
    z-index    : 1
}

#product-modal .modal-content .modal-body .mask.nomargin {
    margin-top : 0
}

#product-modal .modal-content .modal-body .product-images {
  margin-left: 10px;
  display: flex;
  min-height: 150px;
  max-height: 630px;
  width: 150px;
}

#product-modal .modal-content .modal-body .product-images img {
    cursor     : pointer;
    background : #fff;
    height: 150px;
    width: 150px;
}

#product-modal .modal-content .modal-body .product-images img:hover {
    border : 3px solid #2fb5d2
}

#product-modal .modal-content .modal-body .arrows {
    height     : 100%;
    width      : 100%;
    text-align : center;
    position   : absolute;
    top        : 0;
    color      : #fff;
    right      : 1.875rem;
    z-index    : 0;
    cursor     : pointer
}

#product-modal .modal-content .modal-body .arrows .arrow-up {
    position : absolute;
    top      : -2rem;
    opacity  : .2
}

#product-modal .modal-content .modal-body .arrows .arrow-down {
    position : absolute;
    bottom   : -2rem
}

#product-modal .modal-content .modal-body .arrows i {
    font-size : 6.25rem;
    display   : inline
}


@media (max-width : 991px) {
    #product-modal .modal-content .modal-body {
        -webkit-box-orient    : vertical;
        -webkit-box-direction : normal;
        -ms-flex-direction    : column;
        flex-direction        : column;
        margin-left           : 0
    }

    #product-modal .modal-content .modal-body img.product-cover-modal {
        width : 100%
    }

    #product-modal .modal-content .modal-body .arrows {
        display : none
    }

    #product-modal .modal-content .modal-body .image-caption {
        width : 100%
    }
}

/********************
	Part - Product modal images
********************/
.product-images > .thumb-container {
    display : inline
}

.product-images > .thumb-container > .thumb {
    box-shadow    : 2px 2px 8px 0 rgba(0, 0, 0, .2);
    cursor        : pointer;
    margin-bottom : .625rem
}

.images-container .product-images > .thumb-container > .thumb {
    margin-right : .8125rem
}

.product-images > .thumb-container > .thumb.selected,
.product-images > .thumb-container > .thumb:hover {
    border : 3px solid #2fb5d2
}