/*=========================================================
CARRITO DE COMPRAS
=========================================================*/

.carrito-compras{

    margin-top:140px;
    margin-bottom:100px;

}

.carrito-contenedor{

    width:90%;
    max-width:1400px;
    margin:auto;

}

.carrito-header{

    margin-bottom:50px;

}

.carrito-header h1{

    font-size:3rem;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:700;
    color:#111;

}

.carrito-grid{

    display:grid;
    grid-template-columns:2fr 420px;
    gap:40px;
    align-items:start;

}

/*=========================================================
RESUMEN
=========================================================*/

.resumen-carrito{

    background:#f8f8f8;

    padding:30px;

    position:sticky;

    top:130px;

    font-family: Arial, Helvetica, sans-serif;

}

.resumen-carrito h2{

    font-size:1.7rem;

    margin-bottom:35px;

    font-family:Arial, Helvetica, sans-serif;
    text-align: center;

}

.fila-resumen{

    display:flex;

    justify-content:space-between;

    margin-bottom:25px;

    font-size:1.2rem;

    color:#333;

}

.fila-resumen.total{

    margin-top:35px;

    padding-top:25px;

    border-top:1px solid #d9d9d9;

}

.fila-resumen.total strong{

    color:#dc0014;

    font-size:1.7rem;

}

.btn-pagar{

    display:block;

    width:90%;

    margin-top:30px;

    padding:20px;

    background:#dc0014;

    color:#fff;

    text-decoration:none;

    text-align:center;

    font-size:18px;

    font-weight:700;

    transition:.3s;

    font-family: Arial, Helvetica, sans-serif;

}

.btn-pagar:hover{

    background:#b90011;

}

.btn-seguir-comprando{

    display:block;

    text-align:center;

    margin-top:25px;

    color:#111;

    text-decoration:none;

    font-size:1rem;

    font-weight:500;

    

}

.btn-seguir-comprando:hover {
    color: #dc0014;
}

/*=========================================================
PANEL IZQUIERDO - PRODUCTOS
=========================================================*/

.cart-item{

    display:grid;

    grid-template-columns:180px 1fr;

    gap:35px;

    align-items:center;

    padding:25px;

    margin-bottom:25px;

    border:1px solid #e8e8e8;

    border-radius:8px;

    background:#fff;

}

/*=========================================================
IMAGEN
=========================================================*/

.cart-image{

    width:220px;

    height:220px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.cart-image img{

    width:100%;

    height:100%;

    object-fit:contain;

}

/*=========================================================
CONTENIDO
=========================================================*/

.cart-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    height:220px;


}

/*=========================================================
DATOS
=========================================================*/

.cart-data{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.cart-title{

    margin:0;

    font-size:1.8rem;

    font-weight:400;

    color:#111;

    line-height:1.3;

    font-family:Arial, Helvetica, sans-serif;

}

.cart-price{

    margin-top:15px;

    margin-bottom:0;

    font-size:1.5rem;

    font-weight:700;

    color:#dc0014;

    font-family:Arial, Helvetica, sans-serif;

}

/*=========================================================
ACCIONES
=========================================================*/

.cart-actions{

    margin-top: 45px;
    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:15px;
    
}

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

.cart-quantity{

    display:flex;

    align-items:center;

    border: 1px solid #ddd;
    

}

.cart-quantity button{

    width:38px;

    height:38px;

   border: none;

    background:#fff;

    cursor:pointer;

    font-size:18px;

    transition:.3s;

}

.cart-quantity button:hover{

    background:#f5f5f5;

}

.cart-quantity input{

    width:48px;

    height:38px;

    border: none;
   
    
    
    text-align:center;

    font-size:14px;

    font-weight:400;

    outline:none;

}

/*=========================================================
ELIMINAR
=========================================================*/

.cart-delete{

    width:40px;

    height:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    border:1px solid #ddd;

    border-radius:6px;

    color:#dc0014;

    text-decoration:none;

    transition:.3s;

}

.cart-delete:hover{

    background:#dc0014;

    color:#fff;

    border-color:#dc0014;

}

.cart-delete .material-symbols{

    font-size:22px;

    color:inherit;

}



.carrito-vacio{
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
}

.carrito-vacio h2{
    color: #dc0014;
}

/*=========================================================
RESPONSIVE - CARRITO
=========================================================*/

@media screen and (max-width:480px){

   .carrito-compras {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
   }

   
   .carrito-header h1{
    font-size: 2.5rem;
   }

   .carrito-grid{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-top: 10px;
    overflow: hidden;
   }

   .productos-carrito{
    width: 100%;
   }

   .resumen-carrito{
    width: 80%;
    display: block;
    margin: auto;
   }

   .cart-item{
    display: flex;
   }
   .cart-title{
    font-weight: 400;
    
   }
}