@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

:root {
    --primario-2: #FBB700;
    --primario-1: #FBB700;
    --morado:#4D3A6D;
}
.item-product {
    display: grid;
    grid-template-columns: auto 3fr;
    grid-column-gap: 50px;
    padding: 50px;
}
item-product:hover {
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #3C3C3B;

}


.price-product {
    font-family: "Paytone One", sans-serif;
    display: inline-block;
}

.simbolo {
    font-size: 20px;
    vertical-align: top;
}
.cantidad {
    font-size: 40px;
    vertical-align: top;
}
.decimales {
    font-size: 20px;
    vertical-align: top;
}
.moneda {
    font-size: 40px;
    margin-left: 5px;
    vertical-align: top;
}
.title-product{
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    color: var(--primario-2);
    font-weight: bold;
    text-transform: uppercase;
}
.description-product{
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 500;
}
.texto {
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Limita a 4 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-product{
    display: grid;
    grid-template-rows: auto;

}

.boton-cuadrado {
    width: 260px;    /* Ancho del botón */

    height: 50px;   /* Altura del botón (igual al ancho para que sea cuadrado) */
    background-color: var(--primario-2); /* Color de fondo */
    border: none;    /* Quitar bordes por defecto */
    color: white;    /* Color del texto */
    font-size: 20px; /* Tamaño de fuente */
    text-align: center; /* Alinear el texto al centro */
     /* Centrar verticalmente el texto */
    cursor: pointer; /* Mostrar el cursor de mano al pasar sobre el botón */
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
}
.boton-cuadrado:hover{
    background-color: var(--morado); /* Color de fondo */

}

.boton-compartir, .boton-mas-info{
    background: none; /* Sin fondo */
    border: none; /* Sin bordes */
    color: #FBB700; /* Color amarillo */
    font-size: 24px; /* Tamaño del ícono */
    cursor: pointer; /* Mostrar cursor de mano */
    margin-left: 10px;
}

.boton-compartir:hover {
    background: none;
    color: #FFA500; /* Cambiar a un tono más oscuro al pasar el ratón */
}
.boton-mas-info{
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 16px;
}
.controls-product{
    display: flex;          /* Activa flexbox en el contenedor */
    justify-content: space-between; /* Espaciado entre los botones: el primero a la izquierda y los demás a la derecha */
    align-items: center;
}


/*
payment css
 */

.payment-summary {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #000;
    max-width: 300px;
}

.row {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.label {
    font-weight: normal;
}

.value {
    font-weight: bold;
}

.total .label {
    font-weight: bold;
}