:root {
            --primary-color: #ff0000;
            --secondary-color: #28a745;
            --dark-color: #1b1e21;
            --light-color: #f8f9fa;
            --gray-color: #6c757d;
            --accent-color: #d63447;
        }

        body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: var(--light-color);
            color: var(--dark-color);
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: auto;
            overflow: hidden;
            padding: 0 2rem;
        }

        /* Encabezado y Navegación */
        .header-main {
            background-color: #000000;
            color: var(--light-color);
            padding: 1rem 0;
            border-bottom: 3px solid var(--primary-color);
        }

        .header-main .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-color);
            text-decoration: none;
        }

        .nav ul {
            list-style: none;
            display: flex;
            margin: 0;
            padding: 0;
        }

        /* Nav toggle (hamburger) */
        .nav-toggle {
            display: none;
            background: transparent;
            border: none;
            color: var(--light-color);
            font-size: 1.25rem;
            padding: 8px;
            border-radius: 6px;
            cursor: pointer;
        }

        /* Responsive header: mobile menu */
        @media (max-width: 900px) {
            .nav-toggle { display: inline-flex; }
            .header-main .container { align-items: center; }
            .nav { position: fixed; top: 0; right: 0; height: 100%; width: 80%; max-width: 320px; background: #000; transform: translateX(100%); transition: transform .22s ease; padding: 2.25rem 1rem; z-index: 9999; }
            .nav.open { transform: translateX(0); }
            .nav ul { display: flex; flex-direction: column; gap: 1rem; }
            .nav ul li { margin-left: 0; }
        }

        .nav ul li {
            margin-left: 20px;
        }

        .nav ul li a {
            color: var(--light-color);
            text-decoration: none;
            font-weight: 400;
            padding: 5px 10px;
            transition: color 0.3s ease;
        }

        .nav ul li a:hover {
            color: var(--primary-color);
        }

        /* Layout de la tienda (3 columnas: filtros, productos, carrito) */
        .store-layout {
            display: grid;
            grid-template-columns: 280px 1fr 360px; /* sidebar - productos - carrito */
            gap: 1.25rem;
            align-items: start;
        }

        /* Responsive: pasar a 1 columna en pantallas pequeñas */
        @media (max-width: 1980px) {
            .store-layout {
                grid-template-columns: 1fr;
                padding: 1rem 0;
                gap: 1rem;
            }
        }

        /* Barra lateral de filtros */
        .sidebar {
            background: #fff;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            height: fit-content;
            display: none; /* oculto por defecto; se muestra via .open */
        }

        /* Toggle button wrapper (visible por defecto) */
        .filters-toggle-wrapper { display: block; margin-bottom: 0.75rem; }
        .filters-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--primary-color);
            color: #fff;
            border: 0;
            padding: 8px 12px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 700;
        }

        /* Backdrop overlay for the filters panel */
        .filters-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            z-index: 9998;
            opacity: 0;
            transition: opacity .18s ease;
        }
        .filters-backdrop.open { display:block; opacity:1; }

        /* Sidebar as centered panel when open */
        .sidebar.open {
            display: block;
            position: fixed;
            left: 50%;
            top: 12vh;
            transform: translateX(-50%);
            width: min(92%, 720px);
            max-height: 76vh;
            overflow: auto;
            z-index: 9999;
            box-shadow: 0 18px 40px rgba(0,0,0,0.18);
            animation: slideDown .18s ease;
        }

        @keyframes slideDown { from { transform: translateY(-6px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
        

        /* Si el sidebar está abierto en móvil, evitar que el layout rompa */
        .store-layout { position: relative; }

        .sidebar h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: var(--primary-color);
        }
        
        .sidebar label {
            display: block;
            margin-top: 1rem;
            margin-bottom: 0.5rem;
            font-weight: 700;
        }

        .sidebar input, .sidebar select {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-family: 'Roboto', sans-serif;
        }

        .price-range {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .price-range input {
            flex: 1;
            padding: 0.5rem;
            border-radius: 6px;
            border: 1px solid #ddd;
        }

        .filter-actions {
            margin-top: 10px;
            display: flex;
            gap: 8px;
            justify-content: flex-end;
        }
        
        .filter-actions .btn {
            background: var(--primary-color);
            color: #fff;
            border: 0;
            padding: .5rem .75rem;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 700;
        }

        /* Contenido principal de la tienda */
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.25rem;
        }

        /* GRID RESPONSIVE: Productos adaptables */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

/* Ajustes por tamaño de pantalla */
@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(1980px, 1fr));
    }
}

@media (max-width: 900px) {
    .store-layout {
        grid-template-columns: 1fr;
    }
    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0.75rem;
    }
}

/* Si el carrito está flotando (ocupa la derecha), la layout pasa a 2 columnas: sidebar + productos */
.store-layout.floating-cart {
    grid-template-columns: 280px 1fr;
}

/* Ajuste extra para evitar que el carrito flotante tape el contenido */
.main-products, .products-grid, .products-list {
    padding-bottom: 240px;
}

        .product-card {
            background: #fff;
            border-radius: 8px;
            padding: 12px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
            display: flex;
            flex-direction: column;
            gap: 8px;
            overflow: hidden;
            transition: transform .15s ease, box-shadow .15s ease;
        }

        .product-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.08);
        }

        .product-card img {
            max-width: 100%;
            height: 160px;
            object-fit: cover;
            border-radius: 6px;
        }

        .product-card h4 {
            margin: 0;
            font-size: 1.05rem;
            color: var(--dark-color);
        }

        .product-card .price {
            color: var(--primary-color);
            font-weight: 700;
            font-size: 1rem;
        }

        .product-card .btn {
            padding: 8px 12px;
            border-radius: 6px;
            background: var(--primary-color);
            color: #fff;
            border: 0;
            cursor: pointer;
            font-weight: 700;
        }

        .product-card .btn:hover {
            background-color: #cc0000;
            color: #fff;
        }

        /* aplicar posicion a cards sólo dentro de la zona de productos */
.main-products .product-card,
.products-grid .product-card {
    position: relative; /* para posicionar el badge */
}

/* Badge "¡DISPONIBLE!" solo en productos (no en menú u otras secciones) */
.main-products .product-card .product-badge,
.products-grid .product-card .product-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--secondary-color);
    color: #fff;
    font-weight: 700;
    font-size: 0.72rem;
    padding: 4px 8px;
    border-radius: 6px;
    z-index: 10;
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
    letter-spacing: 0.2px;
    text-transform: uppercase;
    line-height: 1;
}

/* Available - green */
.product-badge.available { background: #28a745; }

/* Low stock - orange */
.product-badge.low { background: #fd7e14; }

/* No stock - red */
.product-badge.none { background: #dc3545; }

/* Ajuste responsive para pantallas pequeñas (badge más pequeño) */
@media (max-width: 480px) {
    .main-products .product-card .product-badge,
    .products-grid .product-card .product-badge {
        font-size: 0.65rem;
        padding: 3px 6px;
        top: 6px;
        right: 6px;
    }
}

/* Carrito de compras */
        /* Carrito flotante en esquina inferior, con posiciones y minimizado */
.cart {
    position: relative;
    width: 100%;
    max-height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    padding: 12px;
    overflow: auto;
}

/* Hacer el carrito sticky para que permanezca visible al hacer scroll */
.cart.sticky {
    position: sticky;
    top: 16px;
}

/* Quitar estilos de carrito flotante / minimizado / posiciones (ya no aplican) */
.cart.minimized,
#cart-toggle,
.cart.position-bottom-left,
.cart.position-bottom-right,
.cart.position-bottom-center {
    display: none;
}

/* Ajuste para que el contenido no tenga padding extra (no hay carrito flotante) */
.products-grid, .products-list, .productos, .main-products {
    padding-bottom: 10px; /* reducido a 10px */
}

/* Estructura interna del carrito */
.cart .cart-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom: 8px;
}
.cart .cart-body {
    padding: 8px 0;
    overflow-y: auto;
    max-height: calc(100vh - 360px);
}
.cart .cart-footer {
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:space-between;
    border-top: 1px solid #eee;
    padding-top: 12px;
}

/* Items y botones */
.cart .cart-item {
    display:flex;
    justify-content:space-between;
    gap:8px;
    padding:10px 0;
    border-bottom:1px solid #f2f2f2;
}
.cart .cart-item .cart-item-title { font-weight:600; }
.cart .cart-item .cart-item-meta { color: var(--gray-color); font-size:0.9rem; text-align:right; }

.cart .checkout-btn {
    background: var(--secondary-color);
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
}
.cart .empty-cart-btn {
    background: #fff;
    border: 1px solid #ddd;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
}

/* Botón de cerrar se mantiene simple (no minimización) */
#cart-close {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
}

/* Carrito: flotante en esquina inferior derecha (mantiene diseño actual) */
.cart.floating {
    position: right;
    bottom: 20px;
    right: 20px;
    width: 360px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    z-index: 9999;
    overflow: hidden;
    padding: 12px;
}

/* Scroll interno del cuerpo del carrito */
.cart.floating .cart-body {
    max-height: calc(70vh - 120px);
    overflow-y: auto;
    padding: 8px 0;
}

/* Si usas sticky, no aplica al diseño flotante */
.cart.floating.sticky { position: fixed; top: auto; }

/* Evitar que el carrito flotante tape el contenido principal (reducido) */
.main-products, .products-grid, .products-list {
    padding-bottom: 10px;
}

/* Responsive: en móviles evitar padding extra */
@media (max-width: 700px) {
    .main-products, .products-grid, .products-list {
        padding-bottom: 10px; /* reducido a 10px */
    }
}

/* Pie de página */
        .footer {
            background-color: black;
            color: var(--light-color);
            padding: 2rem 0;
            text-align: center;
            margin-top: 2rem;
        }


     /* Botón de WhatsApp */
        .whatsapp-button {
            position: fixed,left;
            bottom: 20px;
            right: 20px;
            background-color: var(--secondary-color);
            color: var(--light-color);
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            transition: transform 0.3s ease;
        }

        .whatsapp-button:hover {
            transform: scale(1.1);
        }