#shopping-new-product{
    background-color: #fff;
}

/* =========== foto ===========*/
#shopping-foto{
    position: relative;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: bottom;
    overflow: hidden;
    }
#shopping-foto img{
    z-index: 0;
    width: 100%;
    object-fit: cover;
    object-position: top;
    transition: all .3s ease;
    overflow: hidden;
    }
    #shopping-foto img:hover{
    opacity: .9;
    transform: scale(1.1);
    transition: all .3s ease;
    }


/* =========== cajon detalle ===========*/
        #shopping-description-box{
            align-items: flex-start;
            justify-content: flex-start;
            width: 100%;
            height: auto;
            padding: 10px 15px;
            margin:0;
            box-sizing: border-box;
            }


            .shopping-product-title{
                justify-content: flex-start;
                width: 100%;
                font-size: 1.7em;
                line-height: 1em;
                font-weight: bold;
                font-family: 'lato';
                text-transform: uppercase;
                }
                .shopping-product-title::first-letter{text-transform: uppercase;}
                .shopping-product-title::after{
                    display: inline-block;
                    content: '';
                    width: 90px;
                    height: 18px;
                    margin: 0 0 -3px 0;
                    padding: 0 0 -0 0;
                    background-image: url('../iconos/five-stars.svg');
                    background-size: cover;	
                }





            .shopping-product-description{
                width: 100%;
                margin: 8px 0 25px 0;
                font-size: 1em;
                line-height: 1.1em;
                font-family: 'Roboto', sans-serif;
                }



























/* =========== cajon precio ===========*/


#flecha_precio_box{
    position: absolute;
    top: 0;
    left: 0;
    margin-top:-35px;
    margin-left: 85px;
    width: 35px;
    height: 35px;
}

#flecha_precio_box svg { width: 100%;}





                #shopping_price_box{
                    position: relative;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    align-items: center;
                    flex-wrap: nowrap;
                    justify-content: space-between;
                    width: 100%;
                    height: 70px;
                    padding: 8px;
                    margin-bottom: 15px;
                    box-sizing: border-box;
                    border-bottom: 1px dotted rgba(160,85,179, .8);
                    }
            
                    #shopping-price_group{
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    width: auto;
                    height: auto;
                    text-align: right;
                    padding-right:8px ;
                    border-right: 1px dotted grey;
                    }
            
/* =========== ficha precio ===========*/                    
                    #price_detalle{
                    width: 100%; min-width: 20px;
                    height: 100%; min-height: 10px;
                    margin: 0 2px -5px 0;
                    font-size: .7em;
                    letter-spacing: .01em;
                    text-align: right;
                    }


                    #price_box_current{
                        display: flex;
                        flex-wrap: nowrap;
                        justify-content: flex-end;
                        align-items: center;
                        width: 100%; min-width: 20px;
                        height: 100%; min-height: 10px;
                        }
                        #price_current{
                        width: auto; min-width: 20px;
                        height: 100%; min-height: 10px;
                        padding-left: 4px;
                        padding-bottom: 5px;
                        font-family: 'Fira Sans', sans-serif;
                        font-weight: bold;
                        font-size: 2em;
                        }
                
                        #price_box_moneda{
                        display: flex;
                        flex-wrap: wrap;
                        width: 40px; min-width: 5px;
                        height: 100%; min-height: 10px;
                        text-align: right;
                        }
                
                        #price_moneda,
                        #price_desde,
                        #price_original,
                        #price_discount{
                        width: 100%; min-width: 20px;
                        height: 100%; min-height: 5px;
                        font-size: .6em;
                        font-weight: bold;
                        }
                
                        #price_desde{margin-top: -3px; font-size: .6em;}
                        
                
                        #price_box_original{
                        display: flex;
                        flex-wrap: nowrap;
                        width: 100%; min-width: 20px;
                        height: 100%; min-height: 10px;
                        margin-top: -10px;
                        }
                        #price_original del{
                            width: auto;
                            font-size: 1.1rem;
                            font-weight: 600; 
                            color: orange;
                        }
                        /* #price_original::after{ 
                            content: '';
                            margin-left: 5px;
                        } */
                        #price_discount{
                        width: auto; min-width: 20px;
                        height: 100%; min-height: 10px;
                        padding-left:5px;
                        color: orange;
                        }
                
                
                
                            



























                
/* =========== Caja menu botones ===========*/
                        #shopping_btn_box{
                            margin-top: 0px;
                            display: flex;
                            justify-content: center;
                            height: auto;
                            text-align: center;	
                            margin: 0 0 0 10px;
                        }
                            
                
                            #shopping_btn_group{
                                display: flex;
                                flex-wrap: wrap;
                                justify-content: center;
                                align-items: center;
                                width: 50%;
                                max-width: 55px;
                                box-sizing: border-box;
                            }
                
                            #shopping_btn a img:hover{
                                transform: scale(1.1);
                                transition: all .3s ease;
                            }
                            #shopping_btn{
                            width: 35px;
                            height: 35px;
                            background-color: rgba(160,85,179, 1);
                            padding: 5px;
                            border-radius: 3px;
                            box-sizing: border-box;
                            transition: all .3s ease;
                            }
                            #shopping_btn img{width: 100%; height: 100%;}


                            .btn_uno{
                                animation-name:bg_ordenar; 
                                animation-duration: 4s;
                                animation-timing-function: linear;
                                animation-iteration-count: infinite;
                            }
                            @keyframes bg_ordenar{
                                0% { background-color:#4FCE5D;}
                                49% { background-color:#4FCE5D; transform: scale(1); opacity: 1;}
                                50% {background-color:#115e1a; transform: scale(1.1); opacity: .5;}
                                58% {background-color:#4FCE5D; transform: scale(1); opacity: 1;}
                                100% { background-color:#4FCE5D;}
                            }
                
                            


                            #ordenar {
                            animation-name: ordenar;
                            animation-duration: 4s;
                            animation-timing-function: linear;
                            animation-iteration-count: infinite;
                            }
                                @keyframes ordenar{
                                    00.0% {transform: rotate(  0deg);}
                                    50.0% {transform: rotate(  0deg);}
                                    50.1% {transform: scale(1.3)}
                                    /* =========== shake1 ===========*/
                                    51.0% {transform: rotate( 20deg);}
                                    52.0% {transform: rotate(-20deg);}
                                    /* =========== shake2 ===========*/
                                    53.0% {transform: rotate( 20deg);}
                                    54.0% {transform: rotate(-20deg);}
                                    /* =========== shake3 ===========*/
                                    55.0% {transform: rotate( 20deg);}
                                    56.0% {transform: rotate(-20deg);}
                                    /* ===========  ===========*/
                                    57.0% {transform: rotate(  0deg);}
                                    58.0% {transform: scale(1)}
                                    100%  {transform: rotate(  0deg);}
                                }
                
                            #shopping_btn_texto{
                                width: 100%;
                                font-size: .8em;
                                font-weight: bold;
                                font-family: 'Roboto', sans-serif;
                                color: purple;
                                margin: 0;
                                padding: 0 4px;
                            }

































/* =========== hides and shows ===========*/