* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Mantenemos tu fondo original    url('https://i.ibb.co/gbmRh9zg/fondillo.jpg'); */
/*    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,0.4)), */
	background: linear-gradient(to bottom, #c6c7c8, #f8f9fa); 
            
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    font-family: 'Segoe UI', sans-serif;
    color: white;
    min-height: 100vh;
    overflow-x: hidden; /* Evita scroll horizontal con el carrito */
}

/* --- Mantenemos tu Header Original con ajustes --- */
.main-header {
    width: 100%;
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    z-index: 1000;
    padding-top: 20px;
    background: linear-gradient(to bottom, #004d40 70%, transparent 100%);
	/*background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, transparent 100%);*/
}

.je{ position: fixed;
display: flex;
left: 0.5cm;
	width: auto;
    height: auto;
	
   
	    z-index: 4800;
		  top: 0;
}
.header-content {
    position: relative;
    padding-top: 70px;
    width: 98%;
    max-width: 1100px;
    display: flex;
    justify-content: center;
}

.brand-identity {
    position: absolute;
    margin-bottom: -180px; 
    top: -25px; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 3010;
}

#logo-hero {
    width: 175px;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.8));
}

.action-pill {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 0 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 70px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}

.nav-side {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.right-nav {
    justify-content: flex-end;
}

.nav-center-gap {
    width: 220px; 
}

/* Buscador */
.search-section {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.7);
    padding: 5px 12px;
    border-radius: 20px;
}

.search-section input {
    background: transparent;
    border: none;
    color: black;
    outline: none;
    margin-left: 8px;
    width: 100px;
    font-size: 14px;
}

/* Tabs */
.tab {
    padding: 10px 18px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.tab:hover {
    color: white;
    background: rgba(255,255,255,0.1);
}

.tab.active {
    background: #FFC107; /*#4B2E1E;*/
    color: black;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* --- NUEVO: Icono Carrito Superior --- */
.cart-icon-top {
    position: relative;
    font-size: 1.3rem;
    color: #FFC107; /*#4B2E1E;*/
    cursor: pointer;
    margin-left: 15px;
    padding: 5px;
    transition: transform 0.2s;
}

.cart-icon-top:hover {
    transform: scale(1.1);
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -10px;
    background: #FFC107; /*#4B2E1E;*/
    color: black;
    border: 1px solid #d4a373;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* CONTENEDOR DE PRODUCTOS (Ajustado) */
.content-wrapper {
    margin-top: 160px;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 222px));
	justify-content: center;
    gap: 25px;
    width: 100%;
    max-width: 1200px;
}

/* --- CARDS (Ajustadas) --- */


.card:hover {
    transform: translateY(-5px);
  
   border: 2px solid rgba(255, 204, 0, 0.9);/* rgba(212,163,115,0.3); */
}

.product-img {
    height: 240px; 
    background-size: cover; 
	background-repeat: no-repeat; /* EVITA QUE SE REPITAN LAS IMÁGENES */
    background-position: center; 
    border-radius: 10px; 
    margin-bottom: 10px; 
    background-color: #222;
}

.card h3 {
    color: white; 
    font-size: 1.1rem; 
    min-height: 45px;
    margin-bottom: 5px;
}

.card-price {
    color: #F4D03F;/*#d4a373; */
    font-weight: bold; 
    font-size: 1.2rem;
}

.card-bs {
    font-size: 0.9rem; 
    color: #fff; 
    opacity: 0.8;
}

/* Controles de Cantidad en la Card */
.card-controls {
    margin-top: 10px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 10px;
}

.btn-qty {
    background:  #FFC107; /*#4B2E1E; botones cantidad */
    color: white; 
    border: 1px solid #d4a373; 
    width: 35px; 
    height: 35px; 
    border-radius: 5px; 
    cursor: pointer;
    font-weight: bold;
}

.qty-display {
    color: white; 
    font-weight: bold; 
    min-width: 80px;
}

/* NUEVO: Botón Agregar al Carrito en la Card */
/* 1. Botón en estado normal (Dorado elegante y legible) */
.btn-add-card {
    margin-top: 15px;
    width: 100%;
    /* Cambiamos el fondo a un dorado sólido pero suave */
    background: linear-gradient(75deg, #a7f3d0, #ecfdf5, #6ee7b7); /*background: #faf764; */
    /* Texto oscuro para que resalte sobre el dorado */
    color: #1a1a1a; 
    border: 1px solid #B38728;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    text-transform: uppercase; /* Le da un toque más "Premium" */
    letter-spacing: 1px;
}

/* 2. Efecto al pasar el mouse (Dorado más brillante o "Brillo de Oro") */
.btn-add-card:hover {
    /* Usamos el degradado de tus etiquetas de oferta para unificar el diseño */
    background: linear-gradient(45deg, #BF953F, #FCF6BA, #B38728); 
    color: #000;
    border-color: #FCF6BA;
    box-shadow: 0 5px 15px rgba(179, 135, 40, 0.4);
    transform: translateY(-2px); /* Pequeño salto hacia arriba */
}

/* --- NUEVO: Carrito Lateral (Sidebar) --- */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -400px; /* Oculto */
    width: 380px;
    height: 100dvh;
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(10px);
    border-left: 1px solid rgba(212,163,115,0.3);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    padding: 15px;
}
.cart-sidebar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* REEMPLAZA ESTA URL POR TU IMAGEN */
   background-color: #158a7a;
   background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-light.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
    background-size: cover;
    background-position: center;
    opacity: 0.5; /* Ajusta este valor (0.1 a 0.9) para la transparencia */
    z-index: -1; /* Envía la imagen detrás del contenido */
}

.cart-sidebar.open {
    right: 0;
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(212,163,115,0.3);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.cart-header h2 {
    color: #d4a373;
}

.close-cart {
    background: transparent;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding-right: 10px;
	min-height: 0;
}

/* Estilo para cada item en el carrito */
.cart-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.05);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.cart-item-img {
    width: 50px;
    height: 50px;
    background-size: cover;
    background-position: center;
    border-radius: 5px;
}

.cart-item-info {
    flex: 1;
}

.cart-item-info h4 {
    font-size: 0.9rem;
}

.cart-item-info p {
    color: #d4a373;
    font-size: 0.8rem;
}

.cart-item-remove {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: color 0.3s;
}

.cart-item-remove:hover {
    color: #ff4444;
}

.cart-footer {
    border-top: 1px solid rgba(212,163,115,0.3);
    padding-top: 15px;
    margin-top: 15px;
}

.cart-totals {
    text-align: right;
    margin-bottom: 15px;
}

.cart-totals p {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

#cart-total-dolar {
    color: #d4a373;
    font-weight: bold;
}

#cart-total-bs {
    font-weight: bold;
}

.btn-finalizar {
    width: 100%;
    background: #128C7E; /* Verde WhatsApp */
    color: white;
    border: none;
    padding: 15px;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-finalizar:hover {
    background: #075E54;
}

/* --- NUEVO: Botón Flotante de WhatsApp Chat --- */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: white;
    border-radius: 50px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    z-index: 100;
    transition: all 0.3s;
    text-decoration: none;
}

.whatsapp-float:hover {
    background-color: #128C7E;
    transform: scale(1.1);
}

.float-tooltip {
    position: absolute;
    right: 70px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

.whatsapp-float:hover .float-tooltip {
    opacity: 1;
    visibility: visible;
}



/* --- NUEVAS ETIQUETAS EN DIAGONAL (RIBBON STYLE) --- */

/* 1. Contenedor de la Card: Aseguramos que nada se salga de ella */
.card {
    position: relative; 
    overflow: hidden; /* IMPORTANTE: Para que la cinta no flote fuera de la card */
    background: linear-gradient(135deg, #004d40 30%, #00897b 70%);/*background: rgba(0,0,0,0.6); */
    border-radius: 15px; 
    padding: 15px; 
    text-align: center; 
    /*border: 2px solid rgba(46, 204, 113,0.5); rgba(212,163,115,0.3); */
	
   border: 4px solid  rgba(0, 192, 192, 0.9); 
    transition: transform 0.3s, border-color 0.3s;
}

/* 2. Estilo Base del Ribbon (Cinta Diagonal) */
.badge {
    position: absolute;
    top: 15px; /* Ajuste para que se vea sobre la foto */
    right: -40px; /* Lo movemos a la esquina derecha y hacia afuera */
    width: 150px; /* Ancho de la cinta */
    padding: 6px 0; /* Padding arriba/abajo */
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    z-index: 50; /* Sobre la imagen */
    letter-spacing: 1px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    
    /* LA MAGIA: Rotación Diagonal */
    transform: rotate(45deg); 
    -webkit-transform: rotate(45deg);
}

/* 3. Colores por tipo de etiqueta */
.badge-oferta {
    background: linear-gradient(45deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C); /* Efecto Oro Metálico */
    color: #1a1a1a; /* Texto oscuro para máximo contraste */
    font-weight: 900;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.3);
    border: 1px solid rgba(0,0,0,0.1);
}

.badge-nuevo {
    background: #F5F264; /* Verde esmeralda */
    color: black;
}

.badge-custom {
    
	background: #50C878; /*2a9d8f Verde esmeralda */
    color: white;
}

.badge-agotado {
    background: #e63946; /* Rojo vibrante */
    color: white;
}



/* --- AGREGAR ESTO AL FINAL DE TU STYLE.CSS O REEMPLAZAR LA SECCIÓN DE NAV --- */

.mobile-menu-btn {
    display: none; /* Se activa en el media query */
    position: relative; 
    z-index: 12999 !important; /* Aumentamos a casi el máximo */
    background: none;
    border: none;
    color: #FFC107;
    font-size: 24px;
    cursor: pointer;
    margin-right: 15px;
    pointer-events: auto; /* Fuerza a que reconozca el clic */
}

.mobile-only-tabs { display: none; } /* Oculto por defecto */


#product-grid:empty {
    min-height: 400px;
    background: rgba(255,255,255,0.03);
    border-radius: 20px;
    position: relative;
}

#product-grid:empty::after {
    content: "Cargando catálogo premium...";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #d4a373;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
}


















/* Estilo para la tasa dentro del menú */
.tasa-pill-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    border: 1px solid rgba(212, 163, 115, 0.3);
    white-space: nowrap;
}

.tasa-label {
    font-size: 0.7rem;
    color: var(--dorado);
    font-weight: bold;
    text-transform: uppercase;
}

#tasa-valor-menu {
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
}




/* Contenedor del selector de peso */
.weight-selector {
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Botones de acceso rápido */
.quick-weights {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.quick-weights button {
    background: rgba(212, 163, 115, 0.2);
    border: 1px solid #d4a373;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.quick-weights button:hover {
    background: #d4a373;
    color: #1a1a1a;
}

/* Grupo de Input y +/- */
.input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.3);
    border-radius: 8px;
	
    padding: 5px;
}

.input-group input {
    width: 80px;
    background: transparent;
    border: none;
    color: #ffffff;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    outline: none;
}

/* Quitar flechas por defecto del input number */
.input-group input::-webkit-inner-spin-button,
.input-group input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.unit {
    color: rgba(255,255,255,0.5);
    font-size: 0.8rem;
    margin-right: 5px;
}

.quick-weights button {
    background: rgba(212, 163, 115, 0.15);
    border: 1px solid rgba(212, 163, 115, 0.5);
    color: #f5f5dc; /* Beige claro para legibilidad */
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-weights button:hover:not(:disabled) {
    background: #FFC107; /*#4B2E1E;*/
    color: white;
    border-color: #d4a373;
}

.quick-weights button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mensaje temporal (Toast) */
.toast-notificacion {
    position: fixed;
    top: 100px;
    right: 20px;
    background: #ECF0C1;
    color: #000000;
    padding: 12px 25px;
    border-radius: 50px;
    border: 1px solid #d4a373;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    z-index: 3000;
    font-weight: bold;
    animation: slideIn 0.5s ease-out;
}

.toast-notificacion.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}


/* --- ESTILOS PARA EL NUEVO FOOTER --- */
.main-footer {
    width: 100%;
    background: rgba(0, 0, 0, 0.85);
    border-top: 2px solid #d4a373; /* Una línea dorada más marcada arriba */
    padding: 30px 0;
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

.footer-content {
    width: 90%;
    max-width: 1200px;
    display: flex;
    flex-direction: column; /* Los apilamos para que se lea mejor en móvil */
    align-items: center;
    gap: 10px;
}

.aunenter-link {
    color: #d4a373; /* Dorado para que resalte tu marca */
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: 0.3s;
}

.aunenter-link:hover {
    color: #fff;
    text-shadow: 0 0 10px #d4a373;
}

.copyright {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6); /* Texto blanco suave */
}

.attribution {
    font-size: 13px;
    color: white;
}

.aunenter-link {
    color: #d4a373; /* El dorado de tu marca */
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.aunenter-link:hover {
    color: white; /* Resaltado blanco al pasar el mouse */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* --- Ajuste Responsive para el Footer --- */


.download-btn-top {
	position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000; /* Por encima de todo */
    background: rgba(0, 192, 192, 0.5); /* Fondo sutil para resaltar */
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 50%; /* Circular */
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
    color: #FFC107; /* Dorado */
    cursor: pointer;
    top: 15px;       /* Distancia exacta desde arriba */
    right: 15px;     /* Distancia exacta desde la derecha */
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.download-btn-top:hover {
    transform: scale(1.2);
    color: #ffffff;
}





.text-download-link {
    position: fixed;   /* Se queda fijo aunque hagas scroll */
    top: 15px;         /* Espacio desde arriba */
    right: 45px;       /* Espacio desde la derecha */
    z-index: 2000;     /* Valor alto para estar por encima de tu header (1000) */
    
    /* Estilos visuales que ya tenías */
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    font-size: 0.85rem;
    color: #FFC107;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.text-download-link:hover {
    color: #ffffff;              /* Cambia a blanco al pasar el mouse */
    transform: translateY(-2px); /* Pequeño salto hacia arriba */
    
    /* Efecto de iluminación (Glow) */
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.8), 
                 0 0 15px rgba(255, 193, 7, 0.5);
    
    filter: brightness(1.2);     /* Resalte extra de brillo */
}


/* Contenedor para dar espacio */
.input-container-cli {
    padding: 10px 15px;
    width: 220px;
    box-sizing: border-box;
}

.txtpedidocli {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.05); /* Fondo sutilmente oscuro */
    border: 2px solid #50C878; /* Verde Esmeralda Base */
    border-radius: 8px;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Efecto cuando el cliente hace clic para escribir */
.txtpedidocli:focus {
    border-color: #a0d8b0; /* Esmeralda Claro al enfocar */
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 12px rgba(160, 216, 176, 0.4); /* Resplandor suave */
}

/* Color del texto de sugerencia (placeholder) */
.txtpedidocli::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    font-style: italic;
}




/* ... (Todo tu código anterior hasta llegar al Bloque Móvil) ... */

/* --- BLOQUE UNIFICADO PARA MÓVILES (MAX 768px) --- */
@media (max-width: 768px) {
    
    /* 1. ESPACIADO DE CONTENIDO */
    .content-wrapper {
        margin-top: 150px; /* Reducido para móviles */
        padding: 20px 10px;
    }

    /* 2. OCULTAR ELEMENTOS DE PC */
    .je, .pc-only {
        display: none !important;
    }

    /* 3. HEADER Y LOGO */
    .brand-identity {
        top: -5px; 
    }
    
    #logo-hero {
        width: 130px; /* Logo un poco más pequeño en móvil */
    }

    .nav-side { 
        gap: 5px; 
    }

    /* 4. BOTÓN HAMBURGUESA */
    .mobile-menu-btn { 
        display: block !important; 
        z-index: 12000 !important;
        padding: 10px;
    }

    /* 5. MENÚ LATERAL (ESTADO BASE) */
    #nav-left {
        display: none; 
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
       
	 background: rgba(4, 60, 47, 0.90);
	   
        flex-direction: column;
        padding: 100px 20px 20px 20px;
        border-right: 2px solid #FFC107;
        z-index: 11998;
        overflow-y: auto;
        box-shadow: 5px 0 15px rgba(0,0,0,0.5);
    }

    /* 6. ACTIVACIÓN DEL MENÚ */
    #nav-left.active {
        display: flex !important; 
    }

    /* 7. ELEMENTOS INTERNOS */
    .mobile-only-tabs {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        margin-top: 20px;
    }

    .tab {
        width: 100%;
        text-align: left;
        padding: 15px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .tasa-pill-item {
        margin-left: 0;
        margin-top: 20px;
        justify-content: center;
        width: 100%;
        background: rgba(255, 193, 7, 0.1);
    }

    .search-section { 
        width: 100%; 
        margin-bottom: 15px; 
    }
    
    .search-section input { 
        width: 100% !important; 
    }

    /* 8. GRID DE PRODUCTOS (Para pantallas muy pequeñas) */
    .grid-container {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 15px;
    }

    /* 9. CARRITO SIDEBAR EN MÓVIL */
    .cart-sidebar {
        width: 100%;
        right: -100%;
    }

    /* 10. FOOTER MÓVIL */
    .main-footer {
        padding: 30px 15px;
        margin-top: 40px;
        background: rgba(0, 0, 0, 0.98);
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}

/* Ajuste extremo para pantallas menores a 400px (iPhone SE, etc) */

@media (max-height: 500px) {
    .cart-header h2 {
        display: none; /* Oculta el título "Tu Pedido" temporalmente para ganar espacio */
    }
    .cart-footer {
        padding-bottom: 5px;
    }
}
/* --- AJUSTE para asegurar que cuando el teclado esté activo, el botón de enviar se mantenga siempre por encima:) --- */
@media (max-width: 400px) {
    .grid-container {
        /* Forzamos una sola columna y centramos el contenido */
        grid-template-columns: 1fr !important; 
        padding: 10px;
        gap: 20px;
    }
    
    .card {
        /* Evita que la tarjeta se estire demasiado y la centra */
        max-width: 300px;
        margin: 0 auto;
    }

    .cart-sidebar {
        /* El carrito ocupa toda la pantalla en teléfonos mini */
        width: 100%;
        right: -100%;
    }
	
	
	
}