/*** 

====================================================================
    Product Section
====================================================================

***/

.product-section{
    position: relative;
    padding: 120px 0 90px;
}

.product-block{
    margin-bottom: 30px;
    .inner-box{
        &:hover{
            .image-box {
                .image{
                    &:before{
                        opacity: 1;
                        transform: scale(1);
                    }
                    img{
                        transform: scale(1.1);
                        opacity: .9;
                    }
                }
                .theme-btn {
                    .btn-title {
                        opacity: 1;
                        transform: scale(1);
                    }
                }
            }
        }
        .image-box{
            position: relative;
            .image{
                position: relative;
                overflow: hidden;
                a{
                    position: relative;
                    z-index: 1;
                }
                img{
                    transition: all 300ms ease;
                    @include media-breakpoint-down(lg){
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                &::before{
                    content: "";
                    position: absolute;
                    top: 20px;
                    left: 18px;
                    right: 18px;
                    bottom: 20px;
                    opacity: 0;
                    pointer-events: none;
                    border: 1px solid #f9eee5;
                    transform: scale(.8);
                    z-index: 2;
                    transition: all 400ms ease;
                }
            }
            .theme-btn{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 2;
                &:hover{
                    color: var(--theme-color-light);
                    .btn-title{
                        background-color: var(--bg-theme-color1);
                        color: var(--theme-color-light);
                        .title,
                        .icon{
                            color: var(--theme-color-light);
                        }
                    }
                }
                .btn-title {
                    width: 166px;
                    height: 46px;
                    opacity: 0;
                    transform: scale(0);
                    transition: all 300ms ease;
                    @include flex-center;
                    background-color: var(--theme-color-light);
                }
                .icon{
                    margin-right: 15px;
                    padding-right: 15px;
                    border-right: 1px solid #ebebeb;
                    color: var(--theme-color1);
                    transition: all 300ms ease;
                }
                .title{
                    font-weight: 700;
                    font-size: 14px;
                    margin-bottom: 0;
                    transition: all 300ms ease;
                }
            }
        }
        .content-box{
            padding-top: 22px;
            .title{
                margin-bottom: 2px;
                font-weight: 500;
                a:hover {
                    color: var(--theme-color1);
                }
            }
            .price{
                font-size: 18px;
                color: var(--theme-color1);
            }
        }
    }
}