﻿

.ProductPageContainer {
    display: flex;
    flex-direction: row;
}


.ProductPageImagesContainer {
    display: flex;
    flex-wrap: nowrap;
}


.ProductImages {
    width: 145px;
    margin-left: 0;
    margin-right: 5px;
}


.ProductImagesInnerContainer {
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 400px;
    width: 145px;
}


.ProductPreviewImageContainer {
    width: 140px;
    height: 140px;
    margin-bottom: 5px
}

    .ProductPreviewImageContainer:last-child {
        margin-bottom: 0;
    }

.ProductPreviewImage {
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.MainProductImage {
    margin-left: 0;
}



.MainProductImageContainer {
    width: 400px;
    height: 400px;
}

.MouseHoverImagePreview {
    position: absolute;
    height: 400px;
    width: 400px;
    display: none;
    background-repeat: no-repeat;
}

    .MouseHoverImagePreview.Active {
        display: block;
    }

.ProductBaseInfo {
    width: 540px;
    margin-right: 0;
    margin-left: auto;
}

.ProductDescription {
    overflow-y: auto;
    max-height: 350px;
}

.ProductInfoContainer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top: 20px;
}

.ProductInfoTabs {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}

.ProductDescriptionMenuItem {
    margin-right: 10px;
}

.ProductInfoContent {
    margin-top: 15px;
    margin-bottom: 30px;
}

.OuterVideoContainer {
    display: flex;
    flex-direction: column;
    min-height: 300px;
    max-height: 500px;
    overflow-y: scroll;
}

.VideoContainer {
    margin-bottom: 10px;
}

.ProductPriceContainer {
    display: flex;
    flex-wrap: nowrap;
    height: 50px;
    margin-bottom: 30px;
}

.ProductDiscountContainer {
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
    flex-direction: row;
}

.ProductPrice {
}

/*Animation*/
.ProductPageContainer {
}


.ProductPageImagesContainer {
    transition: ease-in-out, 0.3s;
}


.ProductImages {
}


.ProductImagesInnerContainer {
    transition: ease-in-out, 0.3s;
}


.ProductPreviewImageContainer {
}


.ProductPreviewImage {
    transition: ease-in-out, 0.3s;
}

.MainProductImage {
}


.MainProductImageContainer {
    transition: ease-in-out, 0.3s;
}


.ProductBaseInfo {
}

.ProductDescription {
    transition: ease-in-out, 0.3s;
}
/*Animation*/

@media only screen and (min-width: 1300px) {
    .ProductPageContainer {
        flex-wrap: nowrap;
    }


    .ProductPageImagesContainer {
        width: 550px;
    }


    .ProductImages {
    }


    .ProductImagesInnerContainer {
    }


    .ProductPreviewImageContainer {
    }

        .ProductPreviewImageContainer:last-child {
        }

    .ProductPreviewImage {
    }

    .MainProductImage {
    }


    .MainProductImageContainer {
        width: 400px;
        height: 400px;
    }

    .MouseHoverImagePreview {
        height: 400px;
        width: 400px;
    }

    .ProductBaseInfo {
        width: 550px;
    }

    .ProductDescription {
    }
}


@media only screen and (max-width: 1299px) and (min-width:800px) {
    .ProductPageContainer {
        flex-wrap: wrap;
    }


    .ProductPageImagesContainer {
        width: 348px;
    }


    .ProductImages {
        width: 95px;
        margin-left: 0;
        margin-right: 3px;
    }


    .ProductImagesInnerContainer {
        width: 95px;
    }


    .ProductPreviewImageContainer {
        width: 95px;
        height: 95px;
        margin-bottom: 5px;
    }


        .ProductPreviewImageContainer:last-child {
        }

    .ProductPreviewImage {
    }

    .MainProductImage {
    }


    .MainProductImageContainer {
        width: 250px;
        height: 250px;
    }

    .MouseHoverImagePreview {
        height: 250px;
        width: 250px;
    }

    .ProductBaseInfo {
        width: 348px;
        margin-right: 0;
        margin-left: auto;
    }

    .ProductDescription {
    }
}


@media only screen and (max-width: 799px) {
    .ProductPageContainer {
        flex-wrap: wrap;
    }


    .ProductPageImagesContainer {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }


    .ProductImages {
        width: 33.33333%;
    }


    .ProductImagesInnerContainer {
        width: auto;
    }


    .ProductPreviewImageContainer {
        width: auto;
        height: auto;
        aspect-ratio: 1/1;
        margin-bottom: 10px;
    }


    .ProductPreviewImage {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
    }

    .MainProductImage {
        width: 66.66666%;
    }


    .MainProductImageContainer {
        width: auto;
        height: auto;
        aspect-ratio: 1/1;
    }


    .ProductBaseInfo {
        margin-left: 0;
        margin-right: 0;
        margin-top: 40px;
        width: 100%;
    }

    .ProductDescription {
    }

    .MouseHoverImagePreview {
        display:none!important;
    }
}

.ProductPageQuantityContainer > .ProductStock {
    margin-top: 15px;
    margin-bottom: 0px;
}

.CartProductQuantityContainer > .ProductStock {
    margin-top: 10px;
    margin-bottom: 7px;
}
