/*******************************************************/
/******************** ## Shop Area *********************/
/*******************************************************/ 
.product-item
    transition: 0.5s
    background: #F8FAFD
    margin-bottom: 30px
    .image
        img
            width: 100%
    .content
        padding: 28px 40px 40px 50px
        +res-bl(xs)
            +gapLR(padding, 25px)
        h5
            font-size: 22px
            line-height: 1.58
        .ratting-price
            .ratting
                i
                    color: #FF7425
                .price
                    font-size: 22px
                    font-weight: 600
                    color: $primary-color
                    margin-left: 10px
        .theme-btn
            margin-top: 34px
            +gapTB(padding, 9px)
    &:hover
        background: #0A1019
        .category
            color: rgba(255, 255, 255, 0.65)
        h5 a
            color: white
            
/* Shop Shorter */
.shop-shorter
    flex-wrap: wrap
    +flexcenter(space-between)
    .sort-text
        margin-right: 25px
        +res-ab(xs)
            font-size: 18px
    .products-dropdown
        .nice-select
            border: none
            font-size: 16px
            border-radius: 0
            min-width: 300px
            padding: 0 0 20px
            background: transparent
            border-bottom: 2px solid $border-color
            +res-bl(xs)
                min-width: 250px
            &:after
                right: 0
                top: 11px
                    

/* Product Details */
.preview-images
    margin-bottom: 30px
    img
        width: 100%
.thumb-images
    justify-content: space-between
    .thumb-item
        width: calc(33.3333% - 20px)
        img
            width: 100%
        
.product-details-content
    .section-title
        h2
            margin-bottom: 15px
    .ratting-price
        display: flex
        align-items: center
        .price
            font-size: 24px
            font-weight: 500
            color: $primary-color
            margin-left: 10px
            &:before
                content: '$'
    .category-tags
        li
            &:not(:last-child)
                margin-bottom: 8px
            b
                font-size: 18px
                font-weight: 600
                margin-right: 20px
                margin-bottom: 10px
                color: $heading-color
                +res-ab(sm)
                    min-width: 100px
                    display: inline-block
            a
                padding: 2px 25px
                margin-bottom: 10px
                display: inline-block
                border: 1px solid $border-color
                +res-bl(xs)
                    +gapLR(padding, 20px)
                &:not(:last-child)
                    margin-right: 10px
                &:hover
                    color: $heading-color
                    background: $primary-color
                    border-color: $border-color
    .add-to-cart
        display: flex
        flex-wrap: wrap
        align-items: center
        input
            width: 90px
            font-size: 20px
            border-radius: 0
            padding: 8px 20px
            margin: 10px 10px 0 0
            background: transparent
            border: 2px solid $border-color
        .theme-btn
            +gapTB(padding, 9px)
            margin: 10px 10px 0 0
        .wishlist
            margin-top: 10px
            padding: 8px 20px
            border-radius: 5px
            background: transparent
            border: 1px solid $border-color
            
.product-information-tab
    li
        &:not(:last-child)
            margin-right: 30px
            +res-bl(sm)
                margin-right: 15px
        a
            font-weight: 700
            color: $heading-color
            padding: 11px 40px
            margin-bottom: 15px
            display: inline-block
            border: 1px solid $border-color
            +res-bl(ms)
                padding: 8px 25px
            i
                margin-left: 10px
                transform: rotate(-45deg)
            &.active
                background: $primary-color
                border-color: $border-color
                
.review-form
    .ratting
        b
            font-size: 20px
            font-weight: 400
            margin-right: 20px
    .form-group
        margin-bottom: 30px
        .nice-select,
        .form-control
            line-height: 1.4
            background: red
            border-color: red
            +res-ab(ms)
                font-size: 20px
            &::placeholder
                color: red
            &:focus
                background: transparent
                border-color: red
            .current
                font-weight: 400
    .theme-btn
        +res-ab(md)
            padding: 14px 55px