@keyframes fade-in{
    from{ opacity: 0; display: block;}
    to{ opacity: 1; display: block;}
}

article.product-page{
    .recently-viewed-products, .recommended-products{
        .recently_viewed_product, .recommended_product{
            @extend .mb-5;
            .add_to_basket_form_compact{
                display: none;
            }
        }
    }
    .product-description{
        p:last-of-type{
            margin-bottom: 0;
        }
    }
    .product-info{
        @extend .mb-5, .pe-lg-5;
        .product-gallery{
            display: block;
            margin: 0 auto;
            width: 100%;
            overflow: hidden;
            img{
                margin: 0 auto;
                display: block;
            }
            .tns-ovh{
                overflow: visible;
            }
            .tns-outer{
                display: flex;
                flex-direction: column-reverse;
                align-items: center;
            }
        }
        .product-thumbnails{
            display: flex;
            flex-wrap: wrap;
            margin: 0 -.5rem;
            justify-content: flex-start;
            margin-top: 1rem;
            .thumbnail-item{
                width: calc(20% - 1rem);
                margin: .5rem .5rem ;
                cursor: pointer;
                position: relative;
                transform-origin:center center;
                &:tns-nav-active, &:hover{
                    transform: scale(1.2);
                }
                &:after{
                    content: "";
                    display: block;
                    padding-top: 100%;
                    height: 0;
                }
                img{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                }
            }
        }
        .product-slider{
            @extend .tns-slider;
            .popuplink{
                margin: 0 auto;
            }
            .slider-item{
                &[aria-hidden="true"] a{
                    display: none;
                }
                &:not([aria-hidden="true"]) a{
                    display: block;
                }
            }
        }
    }
    .product-main{
        .btn-review{
            @extend .mb-3;
        }
        .stock-alert{
            @extend .my-3, .small, .text-primary;
        }
        .add-to-basket-wrapper{
            @extend .my-3;
            .product-options{
                @extend .mb-4;
                .form-group{
                    @extend .mb-3;
                    label{
                        @extend .pt-0;
                        @extend .pb-1;
                    }
                }
                .checkbox-product-option{
                    list-style: none;
                }
                .paid_product_option{
                    display: flex;
                    align-items: stretch;
                    justify-content: flex-start;
                    width: auto;
                    height: auto;
                    flex-wrap: wrap;
                    -webkit-box-shadow: none;
                    list-style-type: none;
                    border: none;
                    padding: 0;
                    margin: 0 -8px;
                    & > li{
                        flex: 1 1 auto;
                        max-width: calc(33% - 16px);
                        margin: 8px;
                        position: relative;
                        input{
                        opacity: 0;
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        border-radius: 0;
                        z-index: 9;
                        cursor: pointer;
                            &:checked+label{
                                box-shadow: 0 0 20px -10px $primary;
                                border-color: $primary!important;
                                &:after{
                                    content: "\f06a";
                                    color: $primary;
                                }
                            }
                        }
                        label{
                            padding: 0 10px 0 0;
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: space-around;
                            padding: .75em;
                            border: 1px solid $gray-200;
                            position: relative;
                            transition: .2s ease;
                            img{
                                width: 100%!important;
                                height: auto!important;
                            }
                            &:after{
                                content: "\f020";
                                color: $gray-300;
                                font-family: "Highbiza";
                                font-size: 18px;
                                position: absolute;
                                top: 10px;
                                right: 15px;
                                -webkit-font-smoothing: antialiased;
                            }
                        }
                    }
                }
            }
            .basket-button-wrapper{
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                @extend .mt-3;
                .wishlist-wrapper, .basket-inline{
                    @extend .mb-3;
                }
                .basket-inline{
                    display: flex;
                    align-items: center;
                    input{
                        max-width: 4.5rem;
                        @extend .me-3;
                    }
                }
                .btn-add-to-basket{
                    @extend .me-3;
                }
                .btn-notify{
                    @extend .btn-primary;
                    @extend .me-3, .mb-3;
                }
                .btn{
                    i{
                        @extend .me-2;
                    }
                }
            }
            .availability-message{
                &.alert{
                    @extend .py-1, .px-2, .small;
                    display: inline-block;
                }
                i{
                    @extend .me-1;
                }
            }
        }
    }

    .product-info-tabs{
        @extend .pt-2;
        table{
            @extend .mb-0;
            width: 100%;
            max-width: 100%;
            tbody {
                tr{
                    td[colspan="2"]:not(.group-devider){
                        @extend .pb-0, .ps-0;
                    }
                    td:not([colspan="2"]), th{
                        &:first-child{
                            @extend .pb-0, .ps-0;
                            padding-right: 2rem;
                            position: relative;
                            min-width: 50%;
                            &:after{
                                content: ":";
                                position: absolute;
                                top: 0;
                                right: 0;
                                opacity: .5;
                                padding: .5rem 0;
                            }
                        }
                    }
                }
            }
            .group-devider{
                @extend .py-4, .px-0;
                &:after{
                    display: block;
                    width: 100%;
                    content: "";
                    border-top: 1px solid $gray-300;
                }
            }
        }
        .grouped-attribute{
            .grouped-attribute-header{
                @extend .h3;
                display: flex;
                align-items: center;
                width: 100%;
                i{
                    @extend .small;
                    margin-left: auto;
                    transform-origin: center center;
                    font-size: 70%;
                    transition: .2s ease;
                    line-height: 1;
                    height: 17px;
                }
                &:not(.collapsed){
                    i{
                        transform: rotate(-180deg);
                    }
                }
            }
            .table{
                @extend .pt-4;
            }
        }
    }
    .left-row{@extend .pe-lg-5;}
    .right-row{@extend .ps-lg-5;}
    .left-row, .right-row{
        .sub-header{
            @extend .mb-3;
            span{
                @extend .mb-0, .h3;
            }
        }
        .recently-viewed-products{
            .sub-header{
                @extend .mb-3;
            }
        }
        .row-box{
            &:not(:last-child){
                border-bottom: 1px solid $gray-300;
            }
            position: relative;
            @extend .pb-4;
            @extend .mb-4;
            .readmore-wrapper{
                overflow: hidden;
                position: relative;
                transition: .5s ease;
                &:after{
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 0;
                    transition: .5s ease;
                    background: linear-gradient(to bottom, rgba($white, 0), $white);
                }
                &:not(.show){
                    display: block;
                    height: 14rem;
                    &:after{
                        height: 4rem;
                    }
                }
            }
            .btn-read-more{
                background: $white;
                border: 1px solid $gray-300;
                text-decoration: unset;
                color: $black;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%) translateY(50%);
                i{
                    @extend .me-1;
                }
                &:not(.collapsed){
                    span:nth-child(1){
                        display: none;
                    }
                }
                &.collapsed{
                    span:nth-child(2){
                        display: none;
                    }
                }
            }
        }
    }
    .dropdown{
        .dropdown-item{
            background: transparent;
            display: flex;
            align-items: center;
            text-align: left;
            outline: unset;
            box-shadow: unset;
            i{
                margin-right: 1rem;
                font-weight: bold;
            }
            .dropdown-text{
                width: 100%;
                display: block;
                text-align: left;
            }
        }
    }
}


.tns-outer{
    position:relative;
    .tns-controls{
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        display: flex;
        width: 100%;
        justify-content: space-between;
        z-index: 99;
        pointer-events: none;
        button{
            width: 2.25rem;
            height: 2.25rem;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            border-radius: 100%;
            background: white;
            box-shadow: 0 0 1rem rgba(0,0,0,.1);
            border: 0;
            outline: 0;
            pointer-events: all;
        }
    }
}

.quotation{
    @extend .my-5;
    .quotation-header{
        @extend .mb-3;
    }
    article.product{
        border: 1px solid $gray-300;
        border-radius: $border-radius;
        overflow: hidden;
        height: auto;
        img{
            width: 100%;
        }
        .product-description-wrapper{
            @extend .p-3;
            .product-description{
                @include media-breakpoint-down(lg){
                    display: block;
                }
            }
        }
    }
    .quotation-form-wrapper{
        @extend .ps-lg-3;
        .quotation-form{
            @include media-breakpoint-down(sm){
                margin-top: 2rem;
            }
            .row{
                & > div{
                    & > .form-group{
                        &:nth-child(1){
                            label{
                                padding-top: 0;
                            }
                        }
                    }
                    &:nth-child(2){
                        .form-group{
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            & > div{
                                height: 100%;
                            }
                            textarea{
                                height: 100%;
                            }
                        }
                    }
                }
            }
            .quotation-button-wrapper{
                @extend .mt-4;
            }
        }
    }
}