//
//  Common
//  _____________________________________________

@keyframes move-action-top{
    0% {
       transform: translateY(10px) perspective(1px);
       opacity:0;
    }
    100%{
       transform: translateY(0px) perspective(1px);
       opacity:1;
    }
}
@keyframes move-action-bottom{
    0% {
        transform: translateY(0px) perspective(1px);
        opacity:1;
    }
    100%{
       transform: translateY(10px) perspective(1px);
       opacity:0;
    }
}

& when (@media-common = true) {
    //  Product Lists
    .products {
        margin: 30px 0 20px 0;
    }
    .product-item__banner{
        height: 100%;
        [data-content-type]{
            height: 100%;
        }
    }
    .products-grid{
        .product{
            &-item {
                &:hover{
                    .price-box {
                        .action.map-show-info{
                            color:#ffffff;
                            &:after{
                                width: 100%;
                            }
                        }
                        .price-container{
                            transition-delay: 60ms;
                            color:#ffffff;                            
                            .price-wrapper,
                            .price-label{
                                color:#ffffff;
                            }
                            .price{
                                transition-delay: 90ms;
                                color:@main-color;
                            }
                            &:after{
                                width: 100%;
                            }
                        }
                        .minimal-price {
                            > .price-label{
                                transition-delay: 40ms;
                                color:#ffffff;   
                                &:after{
                                    width: 100%;
                                }
                                .price-container{
                                    transition-delay: 80ms;
                                }
                            }
                        }
                    }
                }
                .action.more{
                    font-weight: @font-weight__bold;
                    text-transform: uppercase;
                    letter-spacing: -0.03em;
                    display: block;
                    margin-top: 7px;
                }
                .product-item-description{
                    margin: 7px 0 7px 6px;
                }
            }
        }
    }
    .product {
        &-items {
            &:extend(.abs-reset-list all);
        }

        &-item {
            .price{
                 color: #a1a1a2;
            }
            vertical-align: top;
            .product-item-photo{
                display: block;
                text-align: center;
                margin-bottom: 9px;
            }
            .products-grid & {
                display: inline-block;
                .grid-col(2);
            }

            &:extend(.abs-add-box-sizing all);

            &-name {
                &:extend(.abs-product-link all);
                -moz-hyphens: auto;
                -ms-hyphens: auto;
                -webkit-hyphens: auto;
                display: block;
                hyphens: auto;
                margin: 0 0 10px 0;
                word-wrap: break-word;
            }

            &-info {
                max-width: 100%;
                padding:@grid-item-padding;
                position:relative;
            }

            &-actions {
                display: flex;
                flex-flow: column;
                .actions-secondary {
                    > button.action {
                        .lib-button-reset();
                    }

                    > .action {
                        &:before {
                            margin: 0;
                        }
                    }
                }
                &:not(.show-text){
                    .actions-secondary {
                        > .action {
                            span:not(.icon) {
                                &:extend(.abs-visually-hidden all);
                            }
                        }
                    }
                }
            }

            &-description {
                margin: @indent__m 0;
            }

            .product-reviews-summary {
                .rating-summary {
                    margin: 0 4px 0 0;
                }

                .reviews-actions {
                    font-family: @tiny-font;
                    font-size: @font-size__s;
                    margin-top: 5px;                    
                    padding-left: 10px;
                }
            }

            .price-box {
                .lib-clearfix();
                .action.map-show-info{
                    .lib-font-size(13);
                    text-transform: uppercase;
                    font-weight: @font-weight__bold;
                    line-height: 1.1;
                    top: -3px;
                    position: relative;
                    padding: 2px 6px 3px 5px;
                    letter-spacing: -0.03em;
                    display: inline-block;
                    transition: color 60ms;
                    float: left;
                    .move-bg-hover(@_trans_delay:100ms);
                }
                > span{
                    float: left;
                }
                .old-price{
                    text-decoration: none;
                }
                .price-container{
                    //margin: @indent__s 0 @indent__m;
                        .lib-font-size(15);
                        font-weight: @font-weight__bold;
                        line-height: 1.1;
                        .move-bg-hover(@_trans_delay:60ms);
                        margin: 0 0 0;
                        padding: 2px 6px 4px 5px;
                        top: -2px;
                        vertical-align: top;
                        display: inline-block;
                        position: relative;
                        z-index: 1;
                    .price {
                        .lib-font-size(15);
                        white-space: nowrap;                       
                        font-weight: @font-weight__semibold;
                    }

                    .price-label {
                        .lib-font-size(14);
                        letter-spacing:-1px;
                        /*&:after {
                            content: ':';
                        }*/
                    }
                }

            }

            .special-price,
            .minimal-price {
                .price {
                    .lib-font-size(14);
                    font-weight: @font-weight__bold;
                }

                .price-wrapper {
                    display: inline-block;
                }

                .price-including-tax + .price-excluding-tax {
                    display: block;
                }
            }

            .special-price {
                display: block;
            }

            .regular-price {
                .price-label {
                    display: none;
                }
            }
            
            .minimal-price {
                margin:0;
                /*.price-container {
                    display: block;
                }*/
                > .price-label{
                    font-size: 1.5rem;
                    letter-spacing: -1px;
                    font-weight: @font-weight__bold;
                    line-height: 1.1;
                    margin: 0 0 0;
                    padding: 0px 6px 4px 5px;
                    top: -2px;
                    vertical-align: top;
                    display: inline-block;
                    position: relative;
                    .move-bg-hover(@_trans_delay:60ms);
                }
            }

            .minimal-price-link,
            .price-excluding-tax,
            .price-including-tax {
                display: block;
                white-space: nowrap;
            }

            .price-from,
            .price-to {
                margin: 0;
            }
            .tocart {
                white-space: nowrap;
            }
        }
    }	

    .price-container {
        .price {
            .lib-font-size(14);
        }

        .price-including-tax + .price-excluding-tax,
        .weee {
            margin-top: @indent__xs;
        }

        .price-including-tax + .price-excluding-tax,
        .weee,
        .price-including-tax + .price-excluding-tax .price,
        .weee .price,
        .weee + .price-excluding-tax:before,
        .weee + .price-excluding-tax .price {
            .lib-font-size(11);
        }

        .weee {
            &:before {
                content: '('attr(data-label) ': ';
            }

            &:after {
                content: ')';
            }

            + .price-excluding-tax {
                &:before {
                    content: attr(data-label) ': ';
                }
            }
        }
    }

    .products-list {
        .product {
            &-item {
                width: 100%;
                position: relative;
                padding: 31px 0;
                margin: 0;
                border-bottom: 1px solid #f0f0f0;
                &:last-child{
                    border-bottom: none;
                }
                &:first-child{
                    padding-top: 0;
                }
                &-info {
                    display: flex;
                }

                &-photo {
                    display:block;
                    padding: 0;
                    vertical-align: top;
                    width: 100%;
                    margin-bottom: 0;
                }

                &-details {
                    width:65%;
                    padding-left: 6px;
                    padding-right: 30px;
                    flex: 1 1 65%;
                }
                .product-image-wrapper .product-image-photo{
                    position:absolute;
                }
                .ox-product-grid__categories > a{
                    padding: 2px 0 3px;
                }
                .product-reviews-summary{
                    margin-bottom: 18px;
                    margin-top: -6px;
                }
                .product-item-name{
                    margin-left: -5px;
                    margin-bottom: 9px;
                    font-size: 18px;
                }
                .product-item-description{
                    margin: 10px 0;
                }
                .action.more{
                    font-weight: @font-weight__bold;
                    text-transform: uppercase;
                    letter-spacing: -0.03em;
                    display: block;
                    margin-top: 7px;
                }
            }
        }
/*
        .product-image-wrapper {
            &:extend(.abs-reset-image-wrapper all);
        }*/
    }
    .products-grid {
        .mobile-products-grid();
    }
    
    .page-products{
        .products-grid {
            .mobile-products-grid();
        }
    }

    .products-grid {
        .product-items:not(.owl-carousel){
            display: flex;
            flex-flow: row wrap;
        }
    }
    .product-items:not(.owl-carousel){
        .product-item{
            width:100%;
        }
    }
}

//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .products-list {
        .product-item-info{
            display:block;
            &:after{
                content: '';
                display: table;
                clear: both;
            }
        }
            .product-item .product-list-view__right-wrapper{
                width: auto;
                display: inline-block;
                float: left;
                padding-left: 6px;
                padding-top: 15px;
                .actions-secondary {
                    margin-left: -5px;
                    .action {
                        display: inline-flex;
                    }
                }
            }
        .product-item .product-item-description{
            margin: 25px 0;
        }
            .product-item-details{
                display: inline-block;
                float: left;
                width:auto;
                padding-right:0;
                padding-bottom:0;
            }

        .product {
            &-item {
                table-layout: fixed;

                &-photo {
                    padding: 0;
                    width: 100%;
                }
            }
        }
    }
}
//640
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .product {
        &-item {
            .products-grid & {
                margin-bottom: @indent__l;
            }

            &-actions {
                .products-grid & {
                    margin: @indent__s 0;
                }

                .actions-primary + .actions-secondary {
                    > * {
                        white-space: normal;
                    }
                }

            }
        }
    }
    .products-list {
        .product-grid__image-wrapper {
            max-width: 35%;
            margin-right: 30px;
        }
    }
    .products-grid {
       .tablet-products-grid();
    }
    .page-products,
    .page-layout-1column,
    .page-layout-1column-fullwidth,
    .page-layout-3columns,
    .page-products.page-layout-1column-fullwidth,
    .page-products.page-layout-1column,
    .page-products.page-layout-3columns {
        .products-grid {
            .tablet-products-grid();
        }
    }
    .ox-clear-max-width();
}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .page-products {
        .products-grid {
            .product-item {
                .grid-col(3);
            }
            &.product-columns-l-8{
                .product-item {
                    .grid-col(7);
                }
            }
            &.product-columns-l-7{
                .product-item {
                    .grid-col(6);
                }
            }
            &.product-columns-l-6{
                .product-item {
                    .grid-col(5);
                }
            }
            &.product-columns-l-5{
                .product-item {
                    .grid-col(4);
                }
            }
            &.product-columns-l-4{
                .product-item {
                    .grid-col(4);
                }
            }
            &.product-columns-l-3{
                .product-item {
                    .grid-col(3);
                }
            }
            &.product-columns-l-2{
                .product-item {
                    .grid-col(2);
                }
            }
            &.product-columns-l-1{
                .product-item {
                    .grid-col(1);
                }
            }
        }
    }
    .page-products.page-layout-1column-fullwidth,
    .page-products.page-layout-1column {
        .products-grid {
            .product-item {
                .grid-col(4);
            }
            &.product-columns-l-8{
                .product-item {
                    .grid-col(8);
                }
            }
            &.product-columns-l-7{
                .product-item {
                    .grid-col(7);
                }
            }
            &.product-columns-l-6{
                .product-item {
                    .grid-col(6);
                }
            }
            &.product-columns-l-5{
                .product-item {
                    .grid-col(5);
                }
            }
            &.product-columns-l-4{
                .product-item {
                    .grid-col(4);
                }
            }
            &.product-columns-l-3{
                .product-item {
                    .grid-col(3);
                }
            }
            &.product-columns-l-2{
                .product-item {
                    .grid-col(2);
                }
            }
            &.product-columns-l-1{
                .product-item {
                    .grid-col(1);
                }
            }
        }
    }

    .page-products.page-layout-3columns {
        .products-grid {
            .product-item {
                .grid-col(2);
            }
            &.product-columns-l-8{
                .product-item {
                    .grid-col(6);
                }
            }
            &.product-columns-l-7{
                .product-item {
                    .grid-col(5);
                }
            }
            &.product-columns-l-6{
                .product-item {
                    .grid-col(4);
                }
            }
            &.product-columns-l-5{
                .product-item {
                    .grid-col(3);
                }
            }
            &.product-columns-l-4{
                .product-item {
                    .grid-col(3);
                }
            }
            &.product-columns-l-3{
                .product-item {
                    .grid-col(3);
                }
            }
            &.product-columns-l-2{
                .product-item {
                    .grid-col(2);
                }
            }
            &.product-columns-l-1{
                .product-item {
                    .grid-col(1);
                }
            }
        }
    }
    .ox-clear-max-width();
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__sm) {
    .products-list{
        .product-grid__image-wrapper{
            display: inline-block;
            float: left;
        }
    }
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {

    .products-grid {
        .product-item {
            .grid-col(5);
        }
        .desktop-products-grid-2col();
    }
    .page-layout-1column-fullwidth,
    .page-layout-1column {
        .products-grid {
            .product-item {
                .grid-col(6);
            }
            .desktop-products-grid();
        }
    }

    .page-layout-3columns {
        .products-grid {
            .product-item {
                .grid-col(3);
            }
        }
    }

    .page-products {
        .products-grid {
            .product-items {
                margin: 0;
            }
            .product-item {
                padding: 0;
                    .grid-col(4);
            }
            .desktop-products-grid-2col();
        }
    }

    .page-products {
        &.page-layout-1column-fullwidth,
        &.page-layout-1column {
            .products-grid {
                .product-item {
                    .grid-col(5);
                }
                .desktop-products-grid();
            }
        }

        &.page-layout-3columns {
            .products-grid {
                .product-item {
                    .grid-col(3);
                }
                .desktop-products-grid-3col();
            }
        }
    }
    .ox-clear-max-width();
}
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {
    .page-products.page-layout-3columns,
    .page-layout-3columns {
        .products-grid {
            .product-item {
                .grid-col(3);
            }
            .desktop-products-grid-2col();
        }
    }
    .ox-clear-max-width();
}