/* ==========================================================
   MI PEDIDO - BEBÉ FELIZ
========================================================== */

.bf-card{

    display:flex;

    gap:30px;

    padding:25px;

    margin-bottom:30px;

    border:1px solid #e5e5e5;

    border-radius:8px;

    background:#fff;

}

.bf-card-img{

    width:170px;

    flex-shrink:0;

}

.bf-card-img img{

    width:100%;

    height:auto;

    display:block;

}

.bf-card-info{

    flex:1;

    display:flex;

    flex-direction:column;

}

.bf-card-titulo{

    font-size:34px;

    font-weight:700;

    margin:0 0 20px;

}

.bf-card-datos{

    margin-bottom:0;

    max-width:360px;

}

.bf-card-datos table{

    width:350px;

    border-collapse:collapse;

}

.bf-card-datos td{

    padding:5px 0;

    border:none;

}

.bf-card-variaciones{

    margin-top:-10px;

    margin-bottom:20px;

    max-width:300px;

}

.bf-card-variaciones table{

    width:260px;

    border-collapse:collapse;

}

.bf-card-variaciones td{

    padding:6px 0;

    border:none;

}

.bf-card-subtotal{

    margin-top:auto;

    padding-top:18px;

    border-top:1px solid #ececec;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:18px;

    font-weight:700;

}



/* ==========================
   CELULAR
========================== */

@media(max-width:768px){

    .bf-card{

        flex-direction:column;

    }

    .bf-card-img{

        width:130px;

    }

    .bf-card-titulo{

        font-size:26px;

    }

}
/* ==========================
   VARIACIONES
========================== */

.bf-variacion{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

    border-bottom:1px solid #f1f1f1;

}

.bf-variacion:last-child{

    border-bottom:none;

}

.bf-variacion-nombre{

    font-weight:500;

}


/* ==========================
   BOTONES CANTIDAD
========================== */


/* ==========================
   CONTROLES DE CANTIDAD
========================== */

.bf-variacion-cantidad{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:16px;

    font-size:18px;

}

.bf-btn-menos,
.bf-btn-mas{

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    cursor:pointer;

    user-select:none;

    transition:.20s;

    font-weight:700;

    color:#1c2b4a;

}

.bf-btn-menos:hover,
.bf-btn-mas:hover{

    background:#0b5ed7;

    color:#fff;

}
.bf-pedido-cantidad{

    display:flex;

    align-items:center;

    justify-content:center;

    width:28px;

    height:28px;

    flex:0 0 28px;

    font-size:16px;

    font-weight:600;

}

/* ============================
   RESUMEN DEL PEDIDO
============================ */

.bf-resumen{
    width:350px;
    margin-left:auto;
    margin-right:0;
}

.bf-actualizar{
    width:350px;
    margin-left:auto;
    margin-right:0;
    margin-bottom:20px;
}

.bf-btn-actualizar{
    width:100%;
}

/* ============================
   RESUMEN DEL PEDIDO
============================ */

.bf-resumen{

    font-size:18px;

}

.bf-resumen-fila{

    font-size:18px;

    margin-bottom:10px;

}

.bf-resumen-total{

    font-size:28px;

    font-weight:700;

    margin-top:10px;

}