$heading-color: #010101
$body-color: #777373
$primary-color: #005cff
$heading-font: 'Poppins', sans-serif
$body-font: 'Roboto', sans-serif
$script-font: 'Kaushan Script'
$testimonial-font: 'Lora'
=transition($transition)
    -webkit-transition: all $transition ease-in-out
    -moz-transition:    all $transition ease-in-out
    -ms-transition:     all $transition ease-in-out
    -o-transition:      all $transition ease-in-out
    transition:         all $transition ease-in-out
=borderradius($border)
    -webkit-border-radius: 0 0 0 0
    -moz-border-radius:    0 0 0 0
    border-radius:         0 0 0 0
@-webkit-keyframes nimbus-spin
    0%
        -webkit-transform: rotate(0deg)
        transform: rotate(0deg)
    100%
        -webkit-transform: rotate(359deg)
        transform: rotate(359deg)
@keyframes nimbus-spin
    0%
        -webkit-transform: rotate(0deg)
        transform: rotate(0deg)
    100%
        -webkit-transform: rotate(359deg)
        transform: rotate(359deg)
.nb-product-item
    position: relative
    overflow: hidden
    margin-bottom: 30px
    .onsale
        position: absolute
        top: 30px
        right: 30px
        color: #fff
        font-family: $heading-font
        font-size: 12px
        text-transform: uppercase
        font-weight: 700
        z-index: 2
        padding: 5px 15px
        display: block
        text-align: center
        background-color: red
        +borderradius(4px)
        +transition(0.3s)
    .back-img
        position: absolute
        top: 0
        left: 0
        opacity: 0
        z-index: 1
        +transition(0.3s)
    h4
        margin: 30px 0 0
        span
            font-style: normal
    ins
        text-decoration: none
    del
        color: rgba($body-color, 0.5)
    .button
        position: absolute
        opacity: 0
        top: 30px
        left: 30px
        z-index: 2
        background-color: rgba(white, 0.8)
        color: $body-color
        width: 50px
        height: 50px
        text-align: center
        padding: 13px 0 0
        +borderradius(4px)
        +transition(0.3s)
        span:before
            content: "\e035"
            font-family: "dripicons-v2"
            speak: none
            line-height: 1
            -webkit-font-smoothing: antialiased
            -moz-osx-font-smoothing: grayscale
            font-size: 26px
        &.loading
            span
                display: inline-block
                -webkit-animation: nimbus-spin 2s infinite linear
                animation: nimbus-spin 2s infinite linear
                &:before
                    content: "\e011"
        &.added
            color: $heading-color
            span:before
                content: "\53"
        &:hover
            background: $primary-color
            color: #fff
    .added_to_cart
        position: absolute
        top: 0
        left: 0
        opacity: 0
    &:hover
        .back-img,
        .button
            opacity: 1
        .onsale
            opacity: 0
.nb-single-product
    position: relative
    .top_posted_in
        font-size: 12px
        font-weight: 600
        text-transform: uppercase
    .onsale
        position: absolute
        top: 30px
        right: 30px
        color: #fff
        font-family: $heading-font
        font-size: 12px
        text-transform: uppercase
        font-weight: 700
        z-index: 2
        padding: 5px 15px
        display: block
        text-align: center
        background-color: red
        +borderradius(4px)
        +transition(0.3s)
    .top_posted_in a
        color: $body-color
    .price
        margin-bottom: 30px
        vertical-align: top
        .woocommerce-Price-currencySymbol
            font-size: 13px
            display: inline-block
        .amount
            font-size: 26px
            line-height: 1
            font-weight: 600
            color: $primary-color
            display: inline-block
        del .amount
            color: rgba($body-color, 0.25)
            text-decoration: line-through
    .product_meta
        margin-top: 60px
        font-size: 12px
        > span
            display: block
            border-bottom: 1px solid #f8f4f4
            margin-bottom: 5px
            padding-bottom: 5px
            font-weight: 600
            color: $heading-color
            span,a
                color: $body-color
                font-weight: 400
    form.cart
        overflow: hidden
        margin: 30px 0 0
        .quantity
            width: 35%
            float: left
        .button
            width: 60%
            float: right
            padding-left: 15px
            padding-right: 15px
            display: block
    .woocommerce-product-rating
        overflow: hidden
        margin-bottom: 30px
        font-size: 12px
        .woocommerce-review-link
            float: right
            color: $body-color
            text-transform: uppercase
.woocommerce-tabs
    margin-top: 60px
    .wc-tabs
        list-style: none
        margin: 0 0 15px
        padding: 0
        font-family: $heading-font
        li
            display: inline-block
            margin-right: 20px
            a
                text-transform: uppercase
                font-weight: 600
        li.active
            a
                color: $primary-color
    .wc-tab
        > h2
            font-size: 16px
            display: none
        .woocommerce-Reviews-title
            font-size: 14px
            color: $body-color
            span
                font-style: normal
.woocommerce
    .related.products
        border-top: 1px solid #f8f4f4
        margin-top: 60px
        padding-top: 30px
        h2
            font-size: 16px
            margin-bottom: 30px
    .nb-product-thumbnail-slider
        margin-top: 30px
        a
            pointer-events: none
            cursor: pointer