/* Woocommerce Product List Main and VC Shortcode - begin
========================================================================== */

.qodef-pl-main-holder,
.related.products,
.upsells.products,
.cross-sells,
.qodef-content .woocommerce {
    @include qodefRelativeHolderLayout();

    .qodef-woo-pl-info-below-image & {

        ul.products {

            > .product {

                .button,
                .added_to_cart {
                    margin: 0;
                }
            }
        }
    }
}

ul.products {
    list-style: none;
    margin: 0 -16px;
    clear: both;

    > .product {
        position: relative;
        float: left;
        display: inline-block;
        vertical-align: middle;            
        padding: 0 16px;
        margin: 0 0 78px;
        @include qodefBoxSizing(border-box);            

        .touch & {
            cursor: pointer;
        }

        transform: translateZ(0);
        .qodef-onsale,
        .qodef-out-of-stock {
            right: 17px;
        }
        .qodef-pl-image {
            position: relative;
            overflow: hidden;

            > a {
                display: block;
                width: 100%;
                height: 100%;
                z-index: 1;
                span {
                    display: block;
                    line-height: 0;
                    @include qodefTransition(.5s);
                    @include qodefTransform(translateY(0));
                }
            }

            .qodef-hover-image {
                position: absolute;
                top:0;
                left:0;
                width: 100%;
                height: 100%;
                @include qodefTransform(translateY(100%));
            }
        }

        .qodef-pl-button-holder {
            line-height: 0;
            display: inline-block;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            -webkit-background-size: cover;
            background-size: cover;
            background-repeat: no-repeat;
            @include qodefTransition(height 0.2s ease-out)
        }
        .button,
        .added_to_cart{
            width: 100%;
            position: absolute;
            bottom: -41px;
            @include qodefTransition(all 0.2s ease-out);
            text-align: center;
            height: 41px;
            line-height: 43px;
            padding: 0 26px;
            font-size: 11px;
            letter-spacing: 0.5px;
            font-weight: 700;
            color: #fff;
            background-color: $default-heading-color;
            border: 0;
            @include qodefBorderRadius(0);
            &:hover {
                color: $default-heading-color;
                background-color: $first-main-color;
            }
        }
        .button,
        .added_to_cart {
            &:before {
                content: "\f20b";
                padding-right: 9px;
                font-family: Ionicons;
                font-size: 16px;
                position: relative;
                display: inline-block;
                line-height: 1;
                vertical-align: middle;
                top: -1px;
            }
            &.add_to_cart_button,
            &.product_type_external {
                &:before {
                    content: "\f3f8";
                    top: -2px;
                }
            }
            &.product_type_variable,
            &.product_type_grouped {
                &:before {
                    content: "\f20e";
                    top: -1px;
                }
            }
        }
        .added_to_cart{
            &:before {
                content: "\f373";
                top: -1px;
            }
        }
        &:hover {
            .button,
            .added_to_cart{
                bottom: 0;
            }

            .qodef-pl-image > a span {
                -webkit-transform: translate3d(0,-100%,0);
                transform: translate3d(0,-100%,0);
                -webkit-transition: -webkit-transform 1s cubic-bezier(0.190,1.000,0.220,1.000);
                transition: transform 1s cubic-bezier(0.190,1.000,0.220,1.000);

                &.qodef-hover-image {
                    @include qodefTransform(translateY(0))
                }
            }
        }

        .qodef-pl-text-wrapper {
            @include qodefRelativeHolderLayout();

            .qodef-product-list-title {
                margin:33px 0 0;
            }

            .qodef-pl-categories-holder {
                display: inline-block;
                width: 100%;
                color: #444;
                line-height: 0;
                margin-top: 9px;
                a {
                    font-size: 14px;
                    font-weight: 700;
                    color: #969696;
                    line-height: 20px;
                    &:hover {
                        color: $first-main-color;
                    }
                }
            }

            .qodef-pl-rating-holder {
                @include qodefRelativeHolderLayout();
                line-height: 25px;
                position: absolute;
                bottom: 0;
                right: 0;
                text-align: right;
            }

            .price {
                position: relative;
                display: block;
                color: $default-heading-color;
                font-size: 14px;
                font-weight: 800;
                line-height: 22px;

                * {
                    font-size: inherit;
                    line-height: inherit;
                }

                del {
                    font-weight: 700;
                    font-size: 13px;
                    color: #969696;
                    padding-right: 13px;
                }

                ins {
                    text-decoration: none;
                    @media only screen and (min-width: 769px) and (max-width: 1024px) {
                        display: block;
                    }
                }
            }
        }
    }
}

.qodef-pl-main-holder,
.related.products,
.upsells.products,
.cross-sells {

    $product_list_columns: ('columns-3', 'columns-4');

    @for $i from 0 to length($product_list_columns) {
        $column_width: 100%/($i+3);

        > .products { 

            > .product {

                @media only screen and (min-width: $ipad-landscape-plus-pixel) {
                    
                    .qodef-woocommerce-#{nth($product_list_columns,$i+1)} & {
                        width: $column_width;

                        &:nth-child(#{$i+3}n+1) {
                            clear: both;
                        }
                    }
                }

                @media only screen and (min-width: $ipad-landscape-plus-pixel) {

                    .qodef-woocommerce-#{nth($product_list_columns,$i+1)} .qodef-woocommerce-with-sidebar & {
                        $column_width: 100%/($i+3-1);
                        width: $column_width;

                        &:nth-child(#{$i+3}n+1) {
                            clear: none;
                        }

                        &:nth-child(#{$i+3-1}n+1) {
                            clear: both;
                        }
                    }
                }            
            }
        }
    }
}

.woocommerce {

    &.columns-1 {

        > .products {

            > .product {
                float: none;
                width: 100%;
            }
        }
    }

    $product_list_vc_columns: ('columns-2', 'columns-3', 'columns-4', 'columns-5', 'columns-6');

    @for $i from 0 to length($product_list_vc_columns) { 
        &.#{nth($product_list_vc_columns,$i+1)} {
            $column_vc_width: 100%/($i+2);

            > .products { 

                > .product {
                    width: $column_vc_width;
                    $product_list_vc_columns_label: #{nth($product_list_vc_columns,$i+1)};

                    @if $product_list_vc_columns_label == 'columns-5' {
                        @media only screen and (min-width: $laptop-landscape-plus-pixel) {

                            &:nth-child(#{$i+2}n+1) {
                                clear: both;
                            }
                        }
                    } @else if $product_list_vc_columns_label == 'columns-6' {
                        @media only screen and (min-width: $laptop-landscape-large-plus-pixel) {

                            &:nth-child(#{$i+2}n+1) {
                                clear: both;
                            }
                        }
                    } @else if $product_list_vc_columns_label == 'columns-3' {
                        @media only screen and (min-width: $ipad-portrait-plus-pixel) {

                            &:nth-child(#{$i+2}n+1) {
                                clear: both;
                            }
                        }
                    } @else if $product_list_vc_columns_label == 'columns-2' {
                        @media only screen and (min-width: $phone-landscape-plus-pixel) {

                            &:nth-child(#{$i+2}n+1) {
                                clear: both;
                            }
                        }
                    } @else {
                        @media only screen and (min-width: $ipad-landscape-plus-pixel) {

                            &:nth-child(#{$i+2}n+1) {
                                clear: both;
                            }
                        }
                    }
                }
            }
        }
    }
}
/* Woocommerce Product List VC Shortcode - end
========================================================================== */