/************************************/
/****** Marina 18/07/2019 ***********/
/*nano ficha clásica*/


@mixin nano_ficha(){
    .nano_ficha{
        border:1px solid $gris;
        padding: 9px 15px;
        margin-bottom:20px;
        display: flex;
        overflow: hidden;
        float: left;
        @media(min-width:1199px){
            width: 100%;
        }
        @media(max-width:1198px){
            width: 47%;
            margin: 10px;
        }
        @media(max-width:741px){
            width: 46%;
        }
        @media(max-width:574px){
            width: 100%;
        }
        .left-content{
            height: 90px;
            display: flex;
            width: 80px;
            margin-right: 12px;
            min-width: 80px;
            max-width: 80px;
            figure{
                align-content: center;
                align-items: center;
                display: flex;
                padding: 0;
                flex: 1 1;
                max-height: 100%;
                overflow: hidden;
                img{
                    max-width: 100%;
                    height: auto;
                    max-height: 100%;
                    width: auto;
                }
            }
            @media (max-width:1200px){

            }
        }
        .right-content{
            flex:1 1 ;
            max-width: 57%;
            min-width: 57%;
            width: 57%;

            @media(max-width: 574px){
                max-width: 80%;
                min-width: 80%;
                width: 80%;
            }
            @media(max-width: 510px){
                max-width: 75%;
                min-width: 75%;
                width: 75%;
            }
            @media(max-width:500px){
                max-width: 70%;
                min-width: 70%;
                width: 70%;
            }
            @media(max-width:382px){
                max-width: 60%;
                min-width: 60%;
                width: 60%;
            }
            @media(max-width:449px){
                display: initial;
            }
            @media(max-width:400px){
                display: initial;
            }
            h3{
                font-size: 1.1em;
                margin-top: 1px;
                margin-bottom:5px;
                display: block;
                height: 35px;
                overflow: hidden;
                font-weight: bold;
                a{
                    line-height: 1.25em;
                }
            }
            .product-name{
                color: $primario;
                overflow: hidden;
                text-overflow: ellipsis;
                &:hover{
                    color: $secundarioHover;
                }
            }
            .comments_note{
                display: block;
                margin-bottom: 3px;
                overflow: hidden;
                max-width: 100%;
                height: 20px;
                a{
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: block;
                }
            }
            .content_price{
                height:auto;
                text-align: right;
                position: relative;
                span.price.product-price{
                    margin: 5px 15px;
                    display: inline-block;
                    font-family: $fuente2;
                }
                .cart-button {
                    display:inline-block;
                    & > div{

                        a{
                            background-color: $secundario;
                            color:$primario;
                            font-weight: bold;
                            letter-spacing: 1.2px;
                            border: 1px solid $gris;
                            line-height: 1.4em;
                            .mdi{
                                vertical-align: text-top;
                            }
                            &:hover{
                                color:$secundario;
                                background-color: $primario;
                                border: 1px solid $primario;
                            }
                        }
                    }
                }
                &:hover{
                    .cart-button {

                        & > div {

                        }

                    }
                }
            }
            .tachado{
                font-size: 12px;
                text-decoration: line-through;
                color: #666;
            }

        }
    }
}
