@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;1,500&display=swap');
* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
    font-family: "poppins", sans-serif;
    outline: none;
    border: none;
    color: var(--text-color);
}

body {
    font-size: 16px; /* Base estándar */
    overflow-x: hidden; /* Evita el desplazamiento horizontal */
}

:root {
    --bg-color: #fff;
    --text-color: #000;
    --main-color: #f0f0f0;
    --other-color: #ffc633;
    --sec-text-color: #616060;
    --h1-font: 4.125rem; /* 66px / 16 */
    --h2-font: 2.1875rem; /* 35px / 16 */
    --p-font: 1.125rem; /* 18px / 16 */
}

header {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 2rem 10%;
    background: var(--bg-color);
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.1);
    z-index: 100;
}

header a {
    text-decoration: none;
}

.logo {
    font-size: 1.9375rem; /* 31px / 16 */
    font-weight: 600;
    letter-spacing: 0.02rem;
}

.navbar a {
    display: inline-block;
    font-size: var(--p-font);
    margin-left: 1.8rem;
    background: transparent;
    font-weight: 500;
    border-bottom: 2px solid #fff;
    transition: 0.5s ease;
}

.navbar a:hover {
    color: #000;
    border-bottom: 2px solid var(--text-color);
}

.activity {
    display: flex;
    align-items: center;
    font-size: var(--p-font);
}

.activity i {
    margin: 0 1.5rem;
    cursor: pointer;
}

#menu {
    display: none;
}

.btn {
    background: var(--text-color);
    color: #fff;
    padding: 1.4rem 4.2rem;
    border-radius: 0.5rem;
    font-size: var(--p-font);
    border: 0.2rem solid var(--text-color);
    letter-spacing: 0.1rem;
    cursor: pointer;
    font-weight: 500;
    transition: 0.5s ease;
}

.navbar a.active {
    color: #AB9453;
    font-weight: bold;
}

.header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

body {
    padding-top: 70px;
}

@media (max-width: 768px) {
    .header {
        padding: 10px 15px;
    }

    .navbar a {
        font-size: 0.875rem; /* 14px / 16 */
        padding: 5px 10px;
    }

    .activity i {
        font-size: 1.125rem; /* 18px / 16 */
        margin: 0 5px;
    }

    #menu {
        font-size: 1.25rem; /* 20px / 16 */
    }
}

.fa,.fa-brands,.fa-classic,.fa-regular,.fa-sharp,.fa-solid,.fab,.far,.fas {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto
}

.fa-classic,.fa-regular,.fa-solid,.far,.fas {
    font-family: "Font Awesome 6 Free"
}
.btn1 {
    background: var(--text-color);
    color: #fff;
    padding: 1.4rem 4.2rem;
    border-radius: .5rem;
    font-size: var(--p-font);
    border: .2rem solid var(--text-color);
    letter-spacing: .1rem;
    cursor: pointer;
    font-weight: 500;
    transition: .5s ease;
}

#cartPanel {
    position: fixed;
    right: -350px; 
    top: 0;
    width: 350px; 
    height: 100%;
    background: white;
    box-shadow: -2px 0 5px rgba(0,0,0,0.5);
    transition: right 0.3s ease;
    z-index: 1000;
    padding: 25px; 
    overflow-y: auto;
}

#cartPanel.open {
    right: 0;
}
.cart-item .close-icon {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    color: red;
    background-color: white;
    width: 30px;  
    height: 30px; 
    border-radius: 50%;  
    z-index: 10;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;  
}

    .cart-item-info h4 {
        margin: 0;
        font-size: 1.5em; 
    }

    .cart-item-info p {
        margin: 5px 0 0;
        font-size: 1.5em; 
    }
    @media(max-width:788px) {
        #menu {
            display: block;
        }
        .navbar{
            position: absolute;
            left: 0;
            top: 100%;
            width: 100%;
            padding: 1rem 3%;
            background: var(--bg-color);
            border-top: 1px solid rgba(0,0,0,.1);
            box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
            display: none;
        }
        .navbar.active{
            display: block;
        }
        .navbar a{
            font-size: 2rem;
            margin: 3rem 0;
            display: block;
        }
        .product-sec{
            grid-template-columns: repeat(2,1fr);
        }
        .seller-row{
            grid-template-columns: repeat(2,1fr);
        }
        
    }
    a:last-child {
        margin-right: 0; 
    }
    .logo {
        font-size: 1.5rem;
        font-weight: 600;
        letter-spacing: .02rem;
    }
    

@media(max-width:788px) {
    #menu {
        display: block;
    }
    .navbar{
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        padding: 1rem 3%;
        background: var(--bg-color);
        border-top: 1px solid rgba(0,0,0,.1);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
        display: none;
    }
    .navbar.active{
        display: block;
    }
    .navbar a{
        font-size: 2rem;
        margin: 3rem 0;
        display: block;
    }
    .product-sec{
        grid-template-columns: repeat(2,1fr);
    }
    .seller-row{
        grid-template-columns: repeat(2,1fr);
    }
    .footer{
        grid-template-columns: repeat(2,1fr);
    }
}

#totalAmount {
    font-size: 1.8em; 
    text-align: right;
    margin-top: 25px; 
}

.delete-item {
    display: none; 
}


.activity {
display: flex;
align-items: center;
justify-content: space-between;
}

#cartIcon, #menu {
cursor: pointer;
}
.header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px; /* Ajusta el padding según sea necesario */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

body {
    padding-top: 70px; 
}

#cartIcon {
position: relative;
font-size: 18px; /* Adjust as needed */
}

#cartIcon .cart-notification {
display: none; /* Por defecto, no se muestra */
position: absolute;
top: -5px; /* Adjust to position the dot correctly */
right: -5px;
background-color: red;
color: white;
width: 15px;
height: 15px;
border-radius: 50%;
font-size: 10px;
text-align: center;
line-height: 15px;
font-weight: bold;
}

.navbar a.active {
    color: black;
    font-weight: bold;
}

#closeCart {
position: static;
top: 10px;
right: 10px;
cursor: pointer;
color: black;
background-color: white;
padding: 5px;
border-radius: 50%;
font-size: 20px;
font-weight: bold;
border: none;
z-index: 10;
}

#closeCart:hover {
background-color: rgba(255, 0, 0, 0.2); /* Un poco de feedback al hacer hover */
}
/* Estilo del contenedor del ítem en el carrito */
/*
.cart-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
padding: 10px;
position: relative;
padding-right: 40px; /* Espacio adicional para el botón */
/* } */

/* Imagen del producto en el carrito */
/*.cart-item img {
width: 80px; 
    height: 80px; 
    object-fit: cover;
    border-radius: 4px;
}*/

/* Información del producto en el carrito */
.cart-item-info {
flex: 1;
margin-left: 10px;
}

/* Botón de eliminar producto */
.remove-from-cart {
position: absolute;
top: 10px;
right: 10px; /* Botón fijo en la esquina superior derecha del contenedor */
background-color: #000000;
color: white;
border: none;
border-radius: 50%;
width: 15px;
height: 15px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 10px;
line-height: 1;
transition: background-color 0.3s ease;
}

/* Hover del botón de eliminar */
.remove-from-cart:hover {
background-color: #e60000;
}
@media (max-width: 768px) {
.header {
    padding: 10px 15px; /* Reduce el padding */
}

.logo-container img {
    width: 70px; /* Reduce el tamaño del logo */
}

.navbar a {
    font-size: 14px; /* Reduce el tamaño de las fuentes en los enlaces */
    padding: 5px 10px; /* Ajusta el padding de los enlaces */
}

.activity i {
    font-size: 18px; /* Ajusta el tamaño de los íconos */
    margin: 0 5px; /* Reduce el espacio entre los íconos */
}

#menu {
    font-size: 20px; /* Ajusta el tamaño del icono del menú */
}

}
#cartPanel {
position: fixed;
right: -350px;
top: 0;
width: 350px;
height: 100%;
background: white;
box-shadow: -2px 0 5px rgba(0,0,0,0.5);
transition: right 0.3s ease;
z-index: 1000;
padding: 25px;
overflow-y: auto;

/* 🔹 Resetear tamaño de fuente dentro del carrito */
font-size: 10px !important; 
}

#cartPanel h2,
#cartPanel div,
#cartPanel a,
#cartPanel button {
font-size: 16px !important; /* 🔹 Evitar herencia de tamaños exagerados */
}

/* Ajustar el botón de cerrar */
#closeCart {
position: absolute;
top: 10px;
right: 10px;
font-size: 18px !important; 
width: 30px;
height: 30px;
}

/* Ajustar los ítems del carrito */
.cart-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
padding: 10px;
position: relative;
padding-right: 40px; 
}

/* Imagen del producto en el carrito */
.cart-item img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 4px;
}

/* Ajustar los textos dentro del carrito */
.cart-item-info h4, 
.cart-item-info p, 
#totalAmount {
font-size: 16px !important; /* 🔹 Evitar agrandamiento */
}
/* 🔹 Reducir el tamaño del botón SOLO dentro del carrito */
#cartPanel .btn1 {
padding: 0.8rem 2rem !important;  /* Reducimos el padding */
font-size: 1rem !important; /* Ajustamos el tamaño de fuente */
border-radius: 0.5rem !important;
letter-spacing: 0.05rem !important;
}

/* 🔹 Ajuste adicional para el botón de checkout */
#cartPanel .viewBtn {
margin-top: 1rem !important; /* Reducimos el espacio superior */
border-radius: 10rem !important; /* Ajuste en el radio de borde */
}
.viewBtn:hover{
    background: #fff;
}
.btn1:hover {
    background-color: white; /* Cambia a blanco al pasar el mouse */
    color: #000; /* Texto dorado */
    border-color: #000; /* Mantiene el borde dorado */
}