/************************************/
/****** Marina 18/07/2019 ***********/
/*Ficha con los productos relacionados debajo de la ficha ampliada*/
@import '../wordpress.scss';
@import '../banner';
@import '../aside';

@mixin FichAmpliadaTecnica(){
   
    .contenedor_article{
        .container{
            padding: 0;   
        }
    }
    .contenedor_minificha{
        @media(max-width: 1199px){
            width: 25%;
        }
        @media(max-width: 650px){
            width: 50%;
        }
        @media(max-width: 400px){
            width: 100%;
        }
    }
    @media (max-width: 1199px) {
        .column{
            margin-top: 20px;
        }
    }


    .columna-categorias, .columna-blog, .columna-banner{
        @media(max-width: 1199px) and (min-width: 651px){
            margin-top:30px;
            h4.title_block, .blog{
                margin-top:0px;
            }
        }
        @media(max-width: 650px){
            width: 100%;
        }
    }
    .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus, .pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus, .pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus, .pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus, #header .cart_block, .left-block .tab_button a:hover, ul.product_list.list > li .right-block .button-container .tab_button a:hover, #buy_block .box-cart-bottom a.add_to_compare:hover, #wishlist_button_nopop:hover, #wishlist_button:hover, #thumbs_list .owl-controls div.owl-nav > div:hover, #thumbs_list .owl-controls div.owl-nav > div:hover i, #more_info_tabs li a.selected, #more_info_tabs li a:hover, .box-info-product .exclusive:hover, #view_scroll_left:hover, #view_scroll_right:hover, .bottom-pagination-content ul.pagination li:not(.active):not(.pagination_next):not(.pagination_previous) > a:hover, .post-page .pagination .page-active {
        border-color: $gris;
    }
    body:not(#index) #columns {
        position: relative;
        margin-top: 10px;
    }

    .bloque_ficha{
        margin-top: 22px;
        @media(max-width:767px){
            margin-top:65px;
        }

        /*
        * Social Sharing
        */
        /* -------*--------------------------------------------------------------------------------------------------------
                                                                                         Social Sharing 
        ------------------------------------------------------------------------------------------------------------------- */
        .socialsharing_product  {
            text-align: center;
            a{
                width: auto;
                height: auto;
                &:hover{
                    color:$blanco;

                }
                &.twitter{
                    &:hover{
                        background: $twitter;
                    }
                }
                &.facebook{
                    &:hover{
                        background: $facebook;
                    }
                }
                &.pinterest{
                    &:hover{
                        background: $pinterest;
                    }
                }
                &.wasap{
                    @media(min-width:992px){
                        display:none;
                    }
                    &:hover{
                        background: $wasap;
                    }
                }
            }
        }
        .pb-center-column{
            float: right;
            h2 {
                color: $primario;
                font-size: 2.3em;
                font-weight: bold;
                font-family: $fuente2;
                line-height: 1;
                margin-top: 0px;
                margin-bottom: 7px;
            } 
            .ean{

                strong{
                    font-family: $fuente2;
                }
            }

            p {
                margin: 8px 12px 5px 0px;

                &.label{
                    margin-bottom: 25px;
                    margin-left: 7px;
                }
            }
            .box-info-product{
                margin-top: 8px;
                //border-left:1px solid $primario;
                margin-left:-1px;
                .titulo{
                    font-weight: 600;
                }
                @media (max-width:1500px){
                    width:100%;
                    border-left:0px;
                }
            }
            .box-precio{
                //border-left: 1px solid $primario;
                margin-top: 10px;
                .stock{
                    .pocos_articulos{
                        color: $pocos_articulos;
                    }
                    .disponible{
                        color: $disponible;
                    }
                    .no_disponible{
                        color: $no_disponible;
                    }
                }
                .no-print{
                    display:block;
                    //text-align: left;
                    .box-cart-bottom{
                        display: inline-block;
                        .btnComprar{
                            .cantidadBtnComprar{
                                display:none;
                            }
                        }
                        .buttons_bottom_block{
                            margin-top: 0px;
                            width: 100%;
                            text-align: center;
                            .boton{
                                width: auto;
                                height: auto;
                                margin: 0px;
                            }
                        }
                    }
                }
                @media (max-width:1500px){
                    border-right:0;
                    //border-bottom:1px solid $primario;
                    width:100%;
                    .semaforo, .no-print, #add_to_cart{
                        text-align: left;
                    }
                }
            }
        }
        .pb-left-column{
            .datos_extra{
                border: 1px solid $gris;
                padding: 10px;
                margin-bottom: 20px;
                .title_datos{
                    font-size: 14px;
                    font-weight: bold;
                    margin-bottom: 10px;
                    display: block;
                }
                .box-datos{
                    .titulo{
                        font-weight: 600;
                    }
                }
            }
        }

        #product .pb-center-column .price {
            font-size: 24px;
            font-weight: bold;
        }
        #more_info_tabs {
            margin-bottom: 30px;
            padding-right: 40px;
        }
        #more_info_tabs li {
            float: left;
            list-style: outside none none;
            margin: 0 30px 0 0;
            text-align: center;
        }
        #buy_block .box-cart-bottom #add_to_cart, #buy_block .box-cart-bottom .buttons_bottom_block {
            display: inline-block;
            float: left;
        }
        p {
            margin: 0 0 9px;
        }
        .our_price_display, #old_price {
            display: inline-block;
        }
        #old_price{
            color: $colorDelDemonio;
            text-decoration: line-through;
            font-size: 0.8em;
            .price{
                font-size: 1.2em;
                color: $colorDelDemonio;
                font-weight: normal;
            }
        }

        .exclusive {
            background: $botones_color;
            border: 0;
            color: $botones_fuente;
            display: block;
            margin-right: 3px;
            font-weight: normal;
            line-height: 35px;
            padding: 0 10px;
            position: relative;
            transition: all 0.4s ease-in-out 0s;
            -webkit-transition: all 0.4s ease-in-out 0s;
            -moz-transition: all 0.4s ease-in-out 0s;
            height: 35px;
            &:hover, &:focus{
                background: $botones_color_hover;
                color: $botones_fuente_hover;
            }
        }
        .resetimg {
            padding: 10px 0 0;
        }
        #page p {
            color: $colorDelDemonio;
            font-size: 13px;
            line-height: 21px;
            margin: 0;
            min-height: 1px;
            border: 1px solid $blancoRoto;
            padding: 26px 20px;
            text-align: justify;
        }
        .page-product-box {
            padding-bottom: 10px;
        }
        .table-data-sheet {
            border-left: 1px solid $blancoRoto;
            border-right: 1px solid $blancoRoto;
            border-top: 1px solid $blancoRoto;
            width: 100%;
            margin: 0 0 20px;
            tr{
                td{
                    &:nth-child(2){
                        border-right: 0;
                    }
                }
            }
        }

        .pb-left-column #image-block {
            position: relative;
            display: block;
            border: 1px solid $border_imagen;
            cursor: pointer;
        }
        /*-+----+-+-+-+-+-++-+-+-+-+-+-+-+-+-+-+-
        * quantity_wanted
        *+-+-+-+-+-+--+-++-+-+-+-+-+-+-+-+-+-+-*/
        // input.cantidad_compra {
        //     width: 100%;
        //     border: none;
        // }
        .pb-center-column p#quantity_wanted_p {
            margin-bottom: 5px;
            display: inline-block;
            margin-right: 10px;
            margin-top: 8px;
            float: left;
        }

        #quantity_wanted_p input {
            width: 40px;
            height: 33px;
            padding: 0 3px 0 5px;
            float: left;
            border: 0px solid $gris;
            line-height: 27px;
            padding: 0;
            text-align: center;
            /*padding-left: 15px;*/
            margin: 0;
        }
        .abc {
            width: 21px;
            height: 32px;
            margin-left: -14px;
            float: left;
            border-color: $blanco;
            border-style: solid;
            border-width: 1px 1px 1px 0;
            span {
                width: 20px;
                height: 15px;
                display: block;
                text-align: center;
                color: $colorDelDemonio;
            }
        }

        /*-----------------------------------------------
        * Boton comprar
        *-----------------------------------------------*/
        p#add_to_cart {
            display: inline-block;
            text-align: right;
        }
        /**
        * Label de stock
        **/
        #availability_value, #last_quantities {
            color: $blanco;
            display: inline-block;
            font-weight: normal;
            line-height: 18px;
            margin-left: 5px;
            padding: 3px 8px 4px;
            border: 0;
            background: $verde;
        }
        #availability_statut, #pQuantityAvailable {
            display: inline-block;
            margin-bottom: 25px;
        }

        .label{
            white-space: normal;
            vertical-align: baseline;
            border-radius: 0;
        }
        /*
        * Sombricas y cosas para las imagenes
        */
        figure{
            text-align: center;
            padding: 30px 0 30px 0;
            img{
                width:auto;
                //@include sombraPortada();
                max-width: 70%;
                height: auto;
            }
        }
        /**----------------------------------------------------------------------------
        * Precios
        * ----------------------------------------------------------------------------**/
        .product-name {
            font: 300 14px/22px $fuente;
            color: $gris8;
            margin-bottom: 0; }
        .product-name a {
            font: 300 14px/22px $fuente;
            color:$gris8; }
        .product-name a:hover {
            color: $primario; }

        a.product-name {
            font: 300 14px/22px $fuente;
            color: $gris8;
            margin-bottom: 0; }
        a.product-name:hover {
            color: $primario; }
        .primary_block {
            margin-bottom: 15px;
            h2 {
                color: $terciario2;
                font-size: 1.8em;
                font-weight: bold;
                font-family: $fuente;
                line-height: 1;
                margin: 0px 7px 5px;
                padding: 5px 0px;
            }
            .price {
                font-size: 24px;
                font-weight: bold;
                color: $precio_ficha;
                white-space: nowrap; 
                em{
                    font-size:0.6em;
                    color:$color_gris_oscuro;
                }
            }

            .price .product-price {
                font: bold 16px/22px $fuente;
                color: $precio_ficha;
            }

            .old-price {
                color: $gris8;
                text-decoration: line-through;
            }

            .old-price.product-price {
                font-size: 12px;
            }

            .special-price {
                color: $grisPesado;
            }
        }
        /*-----------------------------------------------------------------------------
        * TABS 
        *-----------------------------------------------------------------------------*/

        #more_info_tabs li a {
            color: $colorDelDemonio;
            display: inline-block;
            font-size: 16px;
            font-weight: bold;
            line-height: 1;
            padding: 5px 0 9px;
            text-decoration: none;
            &.selected{
                color: $primario;
                border-bottom: 1px solid $primario;
            }
            &:hover{
                border-bottom: 1px solid $primario;
            }
        }
        tr {
            td {
                border-color:$border_ficha_tecnica;
                border-style: solid;
                border-width: 0 1px 1px 0;
                color: $colorDelDemonio;
                padding: 10px 20px 11px;
                background: $blanco;
            }
        }
        .page-product-box{
            p{
                color: $colorDelDemonio;
                font-size: 13px;
                line-height: 21px;
                margin: 0;
                min-height: 1px;
                border: 1px solid $border_descripcion;
                padding: 26px 20px;
                text-align: justify;
            }
        }



        #product_sub {
            font-size: 1.1em;
            font-weight: 600;
            margin: 0 0 12px;
            color: $colorDelDemonio;
        }
        .primary_block{
            .info_total {
                //border-top: 1px solid $terciario2;
                /* overflow: hidden; */
                width: 100%;
                //margin-top: 50px;
                float: left;
                //border-bottom: 1px solid $terciario2;
                padding-bottom: 25px;
                .titulo{
                    font-weight: 600;
                }
                span.title_info_total {
                    display: block;
                    text-align: center;
                    margin: -12px auto 25px;
                    background: $blanco;
                    width: 180px;
                    font-size: 1.2em;
                    color:$primario;
                }
                .box-description{
                    p{
                        text-align: justify;
                    }

                }

            } 
        }

        /**-------------------------------------------------------------------------
        * Side
        -------------------------------------------------------------------------**/
        .cabecera_lista_escaparates, .headRelated{
            font-family: $fuente;
            color: $gris_chocolate;
            background: $gris;
            font-size: 16px;
            line-height: 16px;
            margin: 0 0 20px;
            padding: 14px 40px 16px 20px;
            position: relative;
            text-transform: uppercase;
            font-weight: 700;
        }

        .lista_escaparates{
            border: 1px solid $gris_borde_subtitulo;
            padding: 9px 20px 8px;
            &> ul > li > a {
                font-family: $fuente;
                font-size: 16px;
                font-weight: bold;
                line-height: 16px;
                border-top: 1px solid $gris_borde_subtitulo;
                padding: 12px 0 7px;
                &:nth-child(1){
                    border-top: none;
                }
            }
            li{
                list-style: none;
            }
        }
        div#productos_relacionados{
            float:left;
            width:100%;
            .block_content {
                border: 1px solid $blancoRoto;
                padding: 0 20px;

            }
            .lista_articulos {
                padding: 0 20px;

                @include fichaDatosHover();
            }
        }

        // .ficha_aside .lista_articulos {
        //     @include nano_ficha();
        // }

        @media (max-width: 767px){
            .pb-center-column {
                float: left;
                overflow: hidden;
            }
        }
        .pb-center-column {

            p{
                display: inline-block;

                padding: 6px;
                font-weight: 600;
                letter-spacing: 0.4px;
                &.our_price_display{
                    margin:0;
                }
            }
            .bg-danger{
                color: red;
            }
            .bg-warning{
                background-color: orange;
            }
            .label-success{
                background: green;
            }    
            .ean{
                strong{
                    font-size:1.3em;
                }
                margin-bottom:5px;
                font-size:12px;
            }
            p.descripcion_corta {
                display: block;
                font-weight: 400;
                text-align: justify;
            }
        }

        .block_hidden_only_for_screen {
            display: none;
        }
        .semaforo {
            flex: 1 1;
            -webkit-flex: 1 1;
            margin-left: 15px;
            text-align:right;
            padding-right:8px;
            .red{
                color:red;
            }
            .yellow{
                color:orange;
            }
            .green{
                color: green;
            }
        }
    }
    /**----------------------------------------------------------------------------
    * ESTILOS COLUMNA ASIDE
    -----------------------------------------------------------------------------*/

    @include aside();

    /*************************************************
        Banner
    **************************************************/
    @include bannersMultiples();

    h4.title_block{
        border-bottom: 1px solid $primario;
        margin-top: 18px;
        padding: 10px;
    }

    /*************************************************
        Blog
    **************************************************/
    @include post_home();
    
    /**
       *-------------------------------------------------------------------------------
       * lupa_articulo
       *-------------------------------------------------------------------------------
       **/
    article .lupa_articulo {
        position:relative;
        overflow: hidden;
    }
    article .lupa_articulo img {
        display: block;
        height: auto;
        cursor:crosshair;
    }
    article .lupa_articulo img:hover {
        cursor:crosshair;
    }
    .lupa_articulo figure:hover figcaption {
        visibility:hidden;
        transition: all 0.1s linear 0s;
    }
    .lupa{
        position: absolute;
        z-index: 100;
        width: 22%;
        height: 454px;
        overflow: hidden;
        border: 1px solid $gris;
        top: 37%;
        left: 50%;
    }
    .LupaTrans{
        width:150px;
        height:150px;
        border: 1px solid $grisClaro;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.5);
        -moz-box-shadow:    0px 0px 10px 0px rgba(50, 50, 50, 0.5);
        box-shadow:         0px 0px 10px 0px rgba(50, 50, 50, 0.5);
        cursor:crosshair;
        background: -moz-linear-gradient(top,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 48%, rgba(255,255,255,0.5) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.2) 48%,rgba(255,255,255,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.2) 48%,rgba(255,255,255,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80ffffff',GradientType=0 ); /* IE6-9 */
    }
}
