/* --- Variables de Color (Basadas en el logo) --- */
:root {
    --color-primary-red: #E60000;  /* Rojo principal del logo */
    --color-primary-yellow: #FFC300; /* Amarillo/Dorado del logo */
    --color-text-light: #FFFFFF;
    --color-text-dark: #333333;
    --color-background: #f4f4f4;
    --shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* --- Estilos Globales --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* --- Variables de Color (Basadas en el logo) --- */
:root {
    --color-primary-red: #E60000;  /* Rojo principal del logo */
    --color-primary-yellow: #FFC300; /* Amarillo/Dorado del logo */
    --color-text-light: #FFFFFF;
    --color-text-dark: #333333;
    --color-background: #f4f4f4;
    --shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* --- Estilos Globales --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* outline: 0.5px solid black; */
}

body {
    font-family: "Inter", sans-serif;
    color: var(--color-text-dark);
    
    /* --- FONDO PREMIUM --- */
    /* Un gris muy suave que se va aclarando hacia abajo */
    background: linear-gradient(180deg, #f0f2f5 0%, #ffffff 100%);
    
    /* Esto asegura que el degradado cubra toda la pantalla y no se repita feo */
    background-attachment: fixed; 
    background-size: cover;
    min-height: 100vh;
}
button, input, select, textarea {
    font-family: "Inter", sans-serif;
}
button { 
    cursor: pointer;
    letter-spacing: 0.2px;
}
[class*="price"] {
    letter-spacing: 0.4px;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- 1. Encabezado --- */
.main-header {
    /* 1. DEGRADADO: Crea profundidad (de rojo oscuro a rojo brillante) */
    background: linear-gradient(135deg, #B71C1C 0%, #F44336 100%);
    
    color: var(--color-text-light);
    padding: 15px 0;
    
    /* 2. SOMBRA: Hace que el encabezado "flote" sobre la tienda */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    
    /* 3. BORDE DORADO: El detalle que conecta con tu marca */
    border-bottom: 5px solid #FFC300; 
    
    position: relative;
    z-index: 100; /* Para que la sombra caiga sobre el banner */
}

/* NUEVOS ESTILOS PARA LA INFORMACIÓN DEL ENCABEZADO */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-info {
    text-align: left;
}

/* TÍTULO DEL NEGOCIO (MÁS GRANDE Y CON ESTILO) */
.store-name { 
    font-size: 1.2rem !important; /* Aumentamos tamaño (antes 1.1rem) */
    font-weight: 900 !important;  /* Letra muy gruesa (Black) */
    text-transform: uppercase;    /* Todo mayúsculas */
    letter-spacing: 1px;          /* Espacio entre letras para elegancia */
    line-height: 1.1;             /* Altura de línea ajustada */
    margin-bottom: 5px;
    
    /* Efecto de Texto Premium */
    text-shadow: 2px 2px 0px rgba(0,0,0,0.2); /* Sombra dura sutil */
}

/* SUBTÍTULO / SLOGAN */
.store-slogan { 
    font-size: 0.9rem !important; 
    font-style: italic;
    opacity: 0.9;
    margin-bottom: 12px;
    font-weight: 300;
}

.contact-info {
    font-size: 0.85rem;
    opacity: 0.8;
}

.contact-info a {
    color: var(--color-text-light); /* Enlaces blancos */
    text-decoration: none;
    font-weight: bold;
}

.contact-info a:hover {
    text-decoration: underline;
}
/* FIN DE NUEVOS ESTILOS */

.logo-and-cart {
    display: flex;
    align-items: center; /* Alinea verticalmente el logo y el carrito */
    gap: 30px; /* Espacio entre el logo y el carrito */
}

.header-logo {
    height: 150px; /* Altura definida para el logo */
    width: auto; /* Mantiene la proporción */
}


.cart-widget {
    font-size: 1.5rem;
    font-weight: bold;
}

/* --- 2. Contenido Principal (Layout) --- */
.page-content {
    display: grid;
    /* Corrección: Definir 3 columnas explícitas */
    grid-template-columns: 200px 1fr 300px; 
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* --- Cuadrícula de Productos --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.product-card {
    /* --- Estilos Base (Layout) --- */
    background-color: var(--color-text-light);
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    
    /* --- LA MAGIA VISUAL (NUEVO) --- */
    /* Borde transparente listo para pintarse de dorado */
    border: 1px solid transparent; 
    
    /* Animación "Cubic Bezier": Es un movimiento matemático más natural que el 'ease' normal */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
    
    /* Aceleración de hardware para que no se trabe en celulares viejos */
    transform: translateZ(0); 
    position: relative; /* Para que el z-index funcione al flotar */
}

/* 1. ESTADO FLOTANTE (PC) */
.product-card:hover {
    /* Sube 8 pixeles y crece un 2% */
    transform: translateY(-8px) scale(1.02); 
    
    /* Sombra difusa y grande (da sensación de altura) */
    box-shadow: 0 15px 30px rgba(0,0,0,0.2); 
    
    /* El borde dorado elegante */
    border-color: #FFC300; 
    
    /* Se pone por encima de las tarjetas vecinas */
    z-index: 10; 
}

/* 2. ESTADO PRESIONADO (CELULAR) */
.product-card:active {
    /* Efecto de botón presionado (se hunde un poco) */
    transform: scale(0.97); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.1s; /* Respuesta inmediata */
}

/* --- RESTO DE TUS ESTILOS (NO TOCAR) --- */
.product-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    background-color: #eee;
    border-radius: 8px 8px 0 0;
}

.product-card-info {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.product-card-info h3 {
    flex: 1;
    font-size: 1rem;
    margin-bottom: 10px;
    min-height: 50px;
}

.product-card-details {
    display: flex; 
    justify-content: space-between; 
    align-items: end;
    margin-bottom: 10px;
}
.product-price {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-primary-red);
    margin-bottom: 15px;
}

.btn-add-cart {
    background-color: var(--color-primary-red);
    color: var(--color-text-light);
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    /* text-transform: uppercase; */
    margin-top: auto; /* Empuja el botón al fondo */
    transition: background-color 0.2s;
}


.cart-sidebar h2 {
    flex-shrink: 0; /* No permitimos que se encoja */
    margin: 0 !important;
    padding: 20px;
    background-color: var(--color-primary-yellow);
    color: var(--color-text-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#close-cart-btn {
    position: static !important; /* Ya no flota, es parte del header */
    font-size: 2rem;
    line-height: 1;
    padding: 0 10px;
}

#cart-items {
    flex-grow: 1;      /* Ocupa todo el espacio disponible en el medio */
    overflow-y: auto;  /* Si hay muchos productos, activa scroll AQUÍ */
    padding: 10px 20px; /* Espacio interno */
    margin: 0 !important;
    max-height: none !important; /* Quitamos límites viejos */
}

.cart-footer-area {
    /* Nota: Debes envolver el total y el botón en un div si no lo están,
       o aplicamos estilos a los elementos sueltos al final */
    flex-shrink: 0; /* No se encoge */
    padding: 20px;
    background: white;
    border-top: 1px solid #eee;
    box-shadow: 0 -4px 10px rgba(0,0,0,0.05); /* Sombra hacia arriba */
}

#cart-items li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.cart-empty {
    color: #888;
    text-align: center;
}

/* Aseguramos que el total y el botón estén pegados al fondo */
.cart-total {
    margin-bottom: 10px !important;
    font-size: 1.2rem;
}

.btn-checkout {
    background-color: #008000; /* Verde para finalizar compra */
    color: white;
    border: none;
    padding: 12px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    /* text-transform: uppercase; */
    width: 100%;
    font-size: 1.1rem;
    transition: background-color 0.2s;
}

.btn-checkout:hover {
    background-color: #006400; /* Verde más oscuro */
}

/* --- Estilos Adicionales para el Carrito --- */

/* Sobrescribimos el 'li' básico para que use Flexbox */
#cart-items li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.cart-item-info {
    flex-grow: 1; /* Ocupa el espacio disponible */
    font-size: 0.9rem;
    display: grid;
    gap: 3px;
}

/* Pone el precio total del item debajo del nombre */
.cart-item-info span {
    display: block; 
    font-size: 0.75rem;
    color: #555;
    letter-spacing: 0.1px;
}

.cart-item-controls {
    display: flex;
    align-items: center;
}

.quantity-controls {
    display: flex;
    align-items: center;
    /* margin-right: 10px; */
    flex-direction: column;
}

/* Estilo para los botones [+] y [-] */
.quantity-controls button {
    background-color: transparent;
    border: none;
    width: 100%;
    height: 15px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.1s;
    line-height: 0.7;
    text-align: center;
    padding: 4px 3px;
    color: #787878;
    display: flex;
    justify-content: center;
    align-items: center;
}
.quantity-controls button svg {
    fill: #959595;
    pointer-events: none;
}


.quantity-controls button:hover {
    background-color: #ddd;
}

/* El número de la cantidad (ej: "3") */
.quantity-controls span {
    padding: 0 5px;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
    white-space: nowrap;
}

/* Estilo para el botón de Quitar [X] */
.btn-remove-item {
    background-color: transparent;
    /* color: var(--color-primary-red); */
    border: none;
    width: 25px;
    height: 20px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
    font-size: 1rem;
    line-height: 25px; /* Centra la 'x' */
    transition: all 0.1s;
    color: #959595;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0.7;
}

.btn-remove-item:hover {
    background-color: #ddd;
    color: var(--color-primary-red);
}
.product-grid-header {
    font-size: 1.5rem;
    margin-bottom: 20px; /* Le da espacio antes de la cuadrícula */
    color: var(--color-text-dark);
}

/* --- Estilos para los Filtros --- */
.filter-controls {
    display: flex;
    gap: 15px; /* Espacio entre la barra y el select */
    margin-bottom: 20px; /* Espacio antes de la cuadrícula */
}

.filter-controls input,
.filter-controls select {
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
}

.filter-controls input[type="text"] {
    flex-grow: 1; /* Hace que la barra de búsqueda ocupe el espacio */
}

.filter-controls select {
    background-color: white;
}

/* --- Estilo para el botón "Cargar Más" --- */
.btn-load-more {
    display: block; /* Ocupa todo el ancho */
    width: 100%;
    padding: 15px;
    margin-top: 20px; /* Espacio después de la cuadrícula */
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--color-primary-red);
    background-color: white;
    border: 2px solid var(--color-primary-red);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-load-more:hover {
    background-color: var(--color-primary-red);
    color: white;
}

/* Para ocultar el botón si no hay más productos */
.btn-load-more.hidden {
    display: none;
}

/* --- Barra lateral del Carrito --- */
.cart-sidebar {
    background-color: var(--color-text-light);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 20px;
    align-self: flex-start; 
    position: sticky;
    top: 20px;

    /* --- LÍNEAS NUEVAS --- */
    display: flex;             /* 1. Activa Flexbox */
    flex-direction: column;    /* 2. Apila los hijos (título, lista, total) */
    max-height: 90vh;          /* 3. Altura máxima = 90% de la altura de la pantalla */
                               /* (vh = viewport height) */
}

/* --- Estilos para controles de peso --- */
.weight-controls {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: auto; /* Empuja al fondo */
}
.weight-input {
    width: 60%; /* Ocupa la mayoría del espacio */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.weight-controls span {
    font-weight: bold;
}
.btn-add-weight {
    background-color: var(--color-primary-red);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    flex-grow: 1; /* Ocupa espacio restante */
}

/* --- Estilos del Modal de Checkout --- */

.modal-overlay {
    /* Oculto por defecto */
    display: none; 
    
    /* Fondo oscuro semitransparente */
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);

    /* Centrado (movido a la clase .active) */
    justify-content: center;
    align-items: center;
}

/* Clase que le pondremos con JS para mostrarlo */
.modal-overlay.active {
    display: flex;
}

.modal-content {
    background-color: white;
    padding: 20px; /* Reduje un poco el padding para ganar espacio */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    
    width: 95%; /* Ocupa más ancho en celulares (antes 90%) */
    max-width: 500px;
    position: relative;

    /* --- ESTAS SON LAS LÍNEAS MÁGICAS --- */
    max-height: 90vh; /* Altura máxima: 90% del alto de la pantalla */
    overflow-y: auto; /* Si es muy alto, activa el SCROLL vertical */
    
    /* Ajuste para que el teclado del celular no lo rompa */
    display: flex;
    flex-direction: column; 
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.close-modal {
    font-size: 2.5rem;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    line-height: 1;
}
.close-modal:hover {
    color: #333;
}

/* Estilos del Formulario */
#checkout-form p {
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #555;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input, .form-group select {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.btn-checkout-submit {
    /* Reutilizamos el estilo del botón verde */
    background-color: #008000;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    /* text-transform: uppercase; */
    width: 100%;
    font-size: 1.1rem;
    margin-top: 10px;
}

.btn-checkout-submit:hover {
    background-color: #006400;
}

/* --- Estilos para el Stock --- */
.stock-info {
    display: grid;
    /* justify-content: flex-end; */
}
.product-code {
    font-size: 0.5rem;
    text-align: end;
}   
.product-stock {
    font-size: 0.75rem;
    /* margin-bottom: 5px; */
    font-weight: bold;
}

/* Stock normal (Verde oscuro o Gris) */
.stock-normal {
    color: #28a745; /* Verde confianza */
}

/* Stock bajo (Rojo urgencia) */
.stock-low {
    color: #dc3545; /* Rojo alerta */
    animation: pulse 2s infinite; /* (Opcional) Un efecto sutil */
}

/* (Opcional) Animación para llamar la atención si hay poco */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* --- Estilos para Notificaciones Toast --- */
#toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2000; /* Asegura que esté por encima de todo */
}

.toast {
    background-color: var(--color-text-dark);
    color: var(--color-text-light);
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0; /* Empieza invisible */
    transition: opacity 0.3s, transform 0.3s;
    transform: translateY(10px);
    min-width: 250px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* Tipos de Toast */
.toast.success { background-color: #28a745; } /* Verde para éxito */
.toast.warning { background-color: var(--color-primary-yellow); color: var(--color-text-dark); } /* Amarillo para alerta */
.toast.error { background-color: var(--color-primary-red); } /* Rojo para errores */

/* --- Nuevos estilos para la barra lateral de anuncios --- */
.ad-sidebar {
    background-color: var(--color-text-light);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 20px;
    align-self: flex-start; 
    position: sticky;
    top: 20px;
    /* --- CAMBIOS PARA EL TÍTULO FIJO --- */
    display: flex;
    flex-direction: column; /* Organiza verticalmente (Título arriba, anuncios abajo) */
    max-height: calc(100vh - 40px); /* Altura máxima fija */
    overflow: hidden; /* Oculta lo que se salga */
    /* ----------------------------------- */

    /* --- NUEVO: Habilitar Scroll si hay muchos anuncios --- */
    max-height: calc(100vh - 40px); /* Altura máxima: El alto de la pantalla menos un poco de margen */
    overflow-y: auto;               /* Activa la barra de desplazamiento vertical */
    
    /* Opcional: Ocultar la barra de scroll fea y dejarla funcional pero invisible o delgada */
    scrollbar-width: thin;          /* Para Firefox */
    /* ---------------------------------------------------- */
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}

.ad-sidebar::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* (Opcional) Estilo para que la barra de scroll se vea bonita en Chrome/Edge */
.ad-sidebar::-webkit-scrollbar {
    width: 6px;
}
.ad-sidebar::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}
.ad-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
/* --- ESTILO PREMIUM PARA EL HEADER DE ANUNCIOS --- */

/* 1. El Contenedor Amarillo */
.ad-sidebar-header {
    /* Degradado idéntico al carrito para coherencia */
    background: linear-gradient(135deg, #FFC300 0%, #FFB300 100%);
    
    /* Espaciado interno */
    padding: 15px 20px;
    
    /* Flexbox para alinear ícono y texto */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alineado a la izquierda */
    
    /* TRUCO DE MAGIA: Márgenes negativos para cubrir los bordes */
    margin: -20px -20px 15px -20px; 
    
    /* Bordes redondeados SOLO arriba (coincide con el contenedor padre) */
    border-radius: 8px 8px 0 0; 
    
    /* Sombra sutil y posición */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    flex-shrink: 0;
    z-index: 2;
}

/* 2. Grupo Ícono + Texto */
.ad-header-title-group {
    display: flex;
    align-items: center;
    gap: 12px; /* Espacio entre el megáfono y las letras */
}

/* 3. El Ícono (Megáfono) */
.ad-header-icon {
    font-size: 1.8rem;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2)); /* Sombra 3D */
}

/* 4. Textos (Título y Subtítulo) */
.ad-text-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.ad-text-info h2 {
    margin: 0 !important; /* Forzamos margin 0 para quitar estilos viejos */
    padding: 0 !important; /* Quitamos padding viejo */
    background: none !important; /* Quitamos fondo viejo */
    font-size: 1.1rem !important;
    font-weight: 900;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left; /* Aseguramos que se lea de izq a der */
}

.ad-text-info small {
    font-size: 0.75rem;
    color: #444; /* Un poco más oscuro para contraste */
    font-weight: 600;
}

/* El Contenedor de las Fotos (Lo que se va a mover) */
#left-ads-container {
    flex-grow: 1; /* Ocupa todo el espacio restante */
    overflow-y: auto; /* Permite scroll interno */
    
    /* Ocultar barra de scroll */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#left-ads-container::-webkit-scrollbar {
    display: none;
}

.ad-card {
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.ad-placeholder {
    padding: 15px;
    text-align: center;
    color: #888;
}

.ad-content img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- LÍNEA SEPARADORA (AJUSTADA) --- */
.header-separator {
    width: 2px;              
    height: 70px;            
    background-color: #FFC300; 
    
    /* --- CAMBIO AQUÍ: Aumentamos el espacio a los lados --- */
    margin: 0 40px;          /* 40px a la izquierda y 40px a la derecha */
    /* ----------------------------------------------------- */
    
    opacity: 0.7;            
    box-shadow: 0 0 5px rgba(255, 195, 0, 0.5); 
}

/* Ocultar la línea en celulares */
@media (max-width: 900px) {
    .header-separator {
        display: none;
    }
}

.open-cart-button {
    display: none; /* Oculto por defecto */
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--color-primary-red);
    color: var(--color-text-light);
    border: none;
    padding: 15px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: var(--shadow);
    z-index: 1500; /* Por encima de otros elementos */
}

.mobile-logo-title { display: none; }

.mobile-logo-title div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-logo-title div:nth-child(2) {
  justify-content: space-between;  
}

/* --- Estilos para las Ofertas y Precios (Actualizados) --- */

/* Contenedor relativo para posicionar el badge sobre la imagen */
.product-card .image-container {
    position: relative;
    /* overflow: hidden; */
}

/* 1. BADGE DE DESCUENTO (Forma Rectangular Inclinada) */
.offer-discount-badge {
    position: absolute;
    /* Movemos la posición inicial para que al rotar quede en el lugar correcto */
    top: -2px;
    right: -5px;
    width: 65px;
    height: 35px;
    z-index: 10;
    
    /* Centrado del texto */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Nueva Rotación: 20 grados en diagonal hacia arriba y a la izquierda */
    transform: rotate(-10deg); 
    
    /* Sombra para resaltar */
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.4));
    
    /* Fondo Sólido Rectangular Rojo */
    /* background-color: #FF9800; */
    background: linear-gradient(to bottom right, #FFD700 0%, #FFEC8B 25%, #DAA520 50%, #FFEC8B 75%, #FFD700 100%);; /* Rojo fuerte para la etiqueta */
    border-radius: 6px;
    border: 1px solid #fffc33; /* Borde más claro para el efecto 3D */
}

/* Texto del Descuento (-XX%) */
.offer-discount-badge .discount-text {
    position: relative; 
    font-size: 1.05rem;
    font-weight: 900;
    color: #FFFFFF; /* Texto Blanco/Claro */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); /* Sombra para mejor legibilidad */
    line-height: 1.1;
}

/* 2. ESTILOS DE PRECIO (Original vs. Descuento) */

/* Contenedor principal de los precios */
.product-price-wrapper {
    /* Mantiene el estilo por defecto del precio normal */
    /* padding-top: 5px;  */
    /* margin-bottom: 10px; */
    flex: 1;
    align-items: end;
    display: flex;
}

/* Estilo para el precio normal (sin oferta) */
.product-price-wrapper .price-normal {
    font-size: 1.1rem;
    font-weight: 700;
    color: #E60000;
}

/* Estilos aplicados cuando hay oferta */
.product-price-wrapper.has-offer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

/* Contenedor para el tag de descuento y precio original */
.product-price-wrapper.has-offer .price-original-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 2px;
}

/* Tag de Descuento (-XX%) junto al precio original */
.product-price-wrapper .discount-tag {
    /* Fondo oscuro, texto blanco */
    background: #444; 
    color: #FFF;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Precio Original Tachado (Gris) */
.product-price-wrapper .original-price-strikethrough {
    font-size: 0.8rem;
    color: #888;
    text-decoration: line-through; /* Tachado */
    font-weight: 400;
}

/* Precio con Descuento (Grande y Dorado/Naranja Oscuro) */
.product-price-wrapper .discounted-price {
    font-size: 1.1rem; /* Más grande para impactar */
    font-weight: 700;
    color: #FF9800; /* Usamos el mismo rojo para el precio final */
    line-height: 1;
}

/* Texto de la unidad (x Kilo) */
.product-price-wrapper .price-unit {
    font-size: 0.75rem;
    color: #666;
    margin-left: 4px;
}

@media (max-width: 1034px) {
    .page-content {
        grid-template-columns: 1fr 300px; /* Dos columnas en pantallas medianas */
    }
    .ad-sidebar {
        display: none; /* Oculta la barra lateral de anuncios */
    }
}

@media (max-width: 810px) {
    .page-content {
        grid-template-columns: 1fr;
    }
    .cart-sidebar {
      position: fixed;  
      margin-left: 20px; 
      right: 20px;
    }
    .cart-sidebar { display: none; }
    .cart-sidebar.active { display: block; }
    .open-cart-button {
      display: block;
    }

    .main-header { padding-bottom: 15px; }
}

@media (max-width: 650px) {
    .logo-and-cart{
      flex-direction: column;
      gap: 0;
    }
    .header-logo { height: 90px; }
    .store-name { font-size: 1.4rem; }
    
}

@media (max-width: 525px) {
    .header-info-instagram {
        display: none;
    }
}

@media (max-width: 475px) {
    .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .header-info-wrapper { display: none; }
    .header-separator, .header-content > .logo-and-cart { display: none; }
    .logo-and-cart { flex-direction: row; }

    .mobile-logo-title { display: block; }
    .mobile-logo-title img { display: block; height: 70px; }
    .store-slogan { margin-bottom: 0; }
}

@media (max-width: 385px) {
  .store-name { font-size: 1.6rem; }
}

/* --- ESTILOS "APP-LIKE" PARA EL CLIENTE --- */
@media (max-width: 480px) {
    /* 1. Grilla de 2 columnas (Estilo MercadoLibre/Amazon) */
    .product-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 productos por fila */
        gap: 8px; /* Menos espacio entre ellos */
    }

    /* 2. Ajuste de la tarjeta de producto */
    .product-card {
        background-color: white; /* Asegura que sea blanco puro */
        box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Sombra sutil */
    }
    
    .product-card img {
        height: 120px; /* Imagen un poco más baja */
    }

    .product-card-info {
        padding: 10px; /* Menos relleno interno */
    }

    .product-card-info h3 {
        font-size: 0.85rem; /* Texto más pequeño pero legible */
        min-height: 40px; /* Altura fija para alineación */
        margin-bottom: 5px;
        line-height: 1.2;
    }

    .product-card:hover {
        transform: translateY(-5px); /* Se mueve hacia arriba */
        box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* Sombra más fuerte */
        border-color: var(--color-primary-yellow); /* Borde dorado sutil */
    }
    
    .product-price {
        font-size: 1rem;
    }

    /* 3. Botón de agregar más compacto */
    .btn-add-cart {
        padding: 8px;
        font-size: 0.9rem;
    }
    
    /* 4. Ocultar elementos innecesarios en el header móvil */
    .store-slogan, .contact-info {
        display: none; /* Limpia el encabezado */
    }
}

.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 90px; /* Arriba del carrito */
    right: 20px;  /* A la derecha */
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.whatsapp-float img {
    width: 35px !important;  /* Forzamos el tamaño pequeño */
    height: 35px !important;
    object-fit: contain;
}

.top-bar {
    background-color: #333;
    color: white;
    text-align: center;
    font-size: 0.8rem;
    padding: 5px;
    font-weight: bold;
    letter-spacing: 1px;
}

/* === BANNER MODERNO CON FOTO === */
.modern-hero {
    /* Foto de fondo genérica de alimentos frescos (oscura) */
    background-image: url('https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
    background-size: cover;
    background-position: center;
    height: 250px; /* Altura fija elegante */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    margin-bottom: 30px;
    border-bottom: 5px solid #FFC300; /* Línea dorada decorativa abajo */
}

/* Capa oscura para que se lea el texto */
.hero-overlay {
    background: rgba(0, 0, 0, 0.6); /* Negro semitransparente */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    color: white;
}

.modern-hero h1 {
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.modern-hero p {
    font-size: 1.1rem;
    margin-bottom: 20px;
    opacity: 0.9;
}

.modern-hero button {
    background-color: #E60000; /* Tu Rojo de marca */
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(230, 0, 0, 0.4);
    transition: transform 0.2s;
    display: flex; /* Para alinear icono y texto */
    align-items: center;
    gap: 10px; /* Espacio entre la lupa y la letra */
    justify-content: center;
}

.modern-hero button:hover {
    transform: scale(1.1);
    background-color: #ff1a1a;
}

/* Ajuste para celular */
@media (max-width: 600px) {
    .modern-hero { height: 200px; }
    .modern-hero h1 { font-size: 1.5rem; }
}

@media (max-width: 600px) {
    /* Ocultar info secundaria en celular para que no se rompa el header */
    .contact-info {
        display: none;
    }
    /* Centrar el logo y el nombre */
    .header-content {
        justify-content: center;
        text-align: center;
    }
}

/* Si el botón tiene una clase específica, úsala. Si no, puedes usar esto: */
.header-content button, .btn-mis-pedidos { 
    background: #FFF;
    color: #D32F2F; /* Letra roja para contraste */
    border: 2px solid #FFC300; /* Borde dorado */
    border-radius: 50px; /* Redondo es más moderno */
    padding: 8px 20px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-content button:hover {
    background: #FFC300; /* Al pasar el mouse se pone amarillo */
    color: #000;
    transform: translateY(-2px); /* Se levanta un poquito */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* =========================================
   CARRUSEL DE OFERTAS (SOLO MÓVIL) - ESTILO OSCURO LIMPIO
   ========================================= */

/* Por defecto oculto */
.mobile-ads-container {
    display: none;
}

/* Solo en celulares */
/* --- ARREGLO DEL HEADER MÓVIL --- */
@media (max-width: 768px) {
    
    /* 1. Contenedor principal en columna */
    .header-content {
        flex-direction: column;
        align-items: center !important;
        text-align: center;
        gap: 10px !important;
        padding-bottom: 10px;
    }

    /* 2. LOGO Y CARRITO (Orden 1: Lo primero que se ve) */
    .logo-and-cart {
        width: 100%;
        display: flex;
        justify-content: space-between !important; /* Logo izquierda, Carrito derecha */
        align-items: center;
        order: 1; 
        padding: 0 10px; /* Un poco de margen a los lados */
    }

    /* Ajuste del Logo en Móvil */
    .header-logo {
        height: 150px !important; /* Tamaño controlado para celular */
        margin: -80 !important;    /* Quitamos márgenes negativos raros */
        width: auto;
    }

    /* 3. TÍTULO Y MENSAJE (Orden 2: Debajo del logo) */
    .header-info-wrapper {
        order: 1;
        width: 100%;
        text-align: center;
        padding: 5px 15px; /* Margen interno para que no toque los bordes de la pantalla */
    }

    /* Ajuste del Título en Móvil */
    .store-name { 
        font-size: 1.2rem !important; 
        display: block !important;
        margin-bottom: 5px;
    }
    
    .store-slogan {
        font-size: 0.8rem !important;
        display: block !important;
    }

    /* 4. MENSAJE DE BIENVENIDA (Orden 3) */
    .header-client-msg {
        width: 100%;
        order: 3;
        text-align: center !important; /* Centrado en celular */
        padding: 0 !important;
        margin-top: 10px;
    }
    
    /* Ocultar elementos decorativos que estorban en móvil */
    .header-separator { display: none; }
}
    
.mobile-ads-container::-webkit-scrollbar {
    display: none;
}

/* 1. LA TARJETA (El Contenedor Maestro) */
.mobile-ad-card {
    min-width: 160px; 
    max-width: 160px;
    
    /* --- COLOR POR DEFECTO (Negro Transparente) --- */
    /* Si no pones color en el texto, usará este: */
    background-color: rgba(0, 0, 0, 0.85); 
    
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    
    display: flex;
    flex-direction: column;
    border: none;
    padding: 0;
    
    /* Suavizamos el cambio de color */
    transition: background-color 0.3s ease;
}

/* 2. LA IMAGEN (Fondo Transparente para heredar el color del padre) */
.mobile-ad-card img {
    width: 100%;
    height: 120px; 
    object-fit: contain; 
    
    /* IMPORTANTE: Transparente para que se vea el color de atrás */
    background-color: transparent; 
    display: block;
}

/* 3. EL TEXTO (Fondo Transparente) */
.mobile-ad-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
    padding: 8px 4px;
    margin: 0;
    
    /* IMPORTANTE: Transparente */
    background-color: transparent;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================
   CORRECCIONES DE CAPAS (Z-INDEX)
   ========================================= */

/* 1. EL MODAL DE FINALIZAR COMPRA (Debe ser lo más alto de todo) */
.modal-overlay {
    z-index: 99999 !important; /* Número absurdamente alto para ganar siempre */
}

/* 2. LA BARRA LATERAL DEL CARRITO (También encima de todo) */
.cart-sidebar {
    z-index: 99990 !important; /* Un poquito menos que el modal, pero más que el resto */
}

/* 3. EL BOTÓN FLOTANTE (Encima del contenido normal) */
.open-cart-button {
    z-index: 99980 !important;
}

/* 4. EL ENCABEZADO (Lo bajamos a la realidad) */
.main-header {
    position: relative;
    z-index: 100; /* Se queda bajo comparado con los modales */
}

/* =========================================
   DISEÑO MÓVIL FINAL (TÍTULO VISIBLE + BOTÓN CENTRAL)
   ========================================= */
   @media (max-width: 900px) {

    /* 1. Limpieza de escritorio */
    .header-promos-container, .header-separator, .header-promo-banner, #btn-history-desktop {
        display: none !important;
    }

    /* 2. Contenedor Principal */
    .header-content {
        flex-direction: column;
        padding-top: 15px;
        padding-bottom: 15px;
        gap: 10px !important;
    }

    /* 3. TÍTULO DEL SUPERMERCADO (Arriba) */
    .header-info-wrapper {
        display: block !important; /* 🔥 ESTO OBLIGA A QUE APAREZCA 🔥 */
        order: 1; /* Va de primero */
        width: 100%;
        text-align: center;
        margin-bottom: 5px;
    }
    
    .store-name { 
        display: block !important;
        font-size: 1.4rem !important; /* Tamaño grande */
        font-weight: 900 !important;
        line-height: 1.1;
        margin: 0;
        text-transform: uppercase;
        text-shadow: 2px 2px 0px rgba(0,0,0,0.2);
    }
    
    /* Ocultamos slogan y contacto en móvil para no saturar */
    .store-slogan, .contact-info { display: none !important; }


    /* Logo */
    .header-logo {
        height: 120px !important; /* Tamaño ideal móvil */
        width: auto;
        margin: -60!important;
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    }
    
    /* Botón Central "Mis Pedidos" */
    #btn-history-mobile { 
        display: flex !important; /* 🔥 OBLIGA A QUE APAREZCA 🔥 */
        
        background: rgba(0, 0, 0, 0.2) !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        color: white;
        padding: 8px 12px !important;
        border-radius: 50px !important;
        font-size: 0.8rem !important;
        font-weight: bold;
        white-space: nowrap; /* Que no se parta el texto */
        
        /* Centrado */
        margin: 0 5px !important;
    }

    /* B. BOTÓN "MIS PEDIDOS" (VERSIÓN IRRESISTIBLE) */
    #btn-history-mobile {
        justify-self: center; /* Centrado */
        grid-column: 2;       /* En el medio */
        
        /* 1. EL COLOR DORADO POTENTE */
        background: linear-gradient(180deg, #FFD700 0%, #FFC300 100%) !important;
        color: #B71C1C !important; /* Letra Roja Oscura (Contraste perfecto) */
        
        /* 2. FORMA Y TAMAÑO */
        border: 2px solid #FFFFFF !important; /* Borde blanco para separarlo del fondo rojo */
        padding: 8px 16px !important;
        border-radius: 50px !important;
        
        /* 3. TIPOGRAFÍA */
        font-size: 0.85rem !important;
        font-weight: 900 !important; /* Letra bien gorda */
        text-transform: uppercase;
        letter-spacing: 0.5px;
        
        /* 4. EFECTOS 3D Y SOMBRA */
        box-shadow: 0 4px 0px #C79600, /* Efecto de "botón físico" (borde inferior) */
                    0 10px 10px rgba(0,0,0,0.2) !important; /* Sombra difusa */
        
        /* 5. ANIMACIÓN "LÁTEME" */
        animation: pulseButton 2s infinite ease-in-out;
        
        margin: 0 !important;
        white-space: nowrap;
        cursor: pointer;
        z-index: 30; /* Encima de todo */
    }


    /* Animación suave para llamar la atención sin molestar */
    @keyframes pulseButton {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); } /* Crece un poquito */
        100% { transform: scale(1); }
    }
    

    /* 5. SALUDO "HOLA VECINO" (Abajo) */
    .header-client-msg {
        order: 3;
        display: block !important;
        width: 100%;
        text-align: center !important;
        padding: 5px 0;
    }

    /* 6. OFERTAS MÓVILES (Tu diseño amarillo) */
    .mobile-ads-container {
        display: flex !important;
        width: 100%;
        margin-top: 10px;
        margin-bottom: 20px;
        padding: 20px 10px;
        background-color: rgba(255, 251, 0, 0.26);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Habilita el impulso suave en iPhone/Android */
        gap: 15px;
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }
    .cart-widget {
        position: relative; /* Necesario para que el z-index funcione */
        z-index: 50 !important; /* Más alto que el logo (que tiene 20) */
    }

    .mobile-ads-container::-webkit-scrollbar { display: none; }
    .ad-sidebar { display: none !important; }
}

/* === CORRECCIÓN DEL CARRITO EN MÓVIL (Botón Flotante) === */
@media (max-width: 810px) {
    
    /* 1. Aseguramos que el carrito ocupe toda la pantalla y sea FLEXIBLE */
    .cart-sidebar.active {
        display: flex !important;      /* IMPORTANTE: Usar Flex, no Block */
        flex-direction: column;        /* Orden vertical */
        
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;                 /* Ocupa el 100% de la altura del celular */
        width: 85%;                    /* Ancho cómodo */
        max-width: 400px;              /* Que no sea gigante en tablets */
        
        background-color: white;
        z-index: 99999;                /* Por encima de todo */
        box-shadow: -5px 0 15px rgba(0,0,0,0.5);
        margin: 0;                     /* Quitamos márgenes viejos */
        padding: 0;                    /* Quitamos padding para manejarlo dentro */
    }

    /* 2. El título se queda fijo arriba */
    .cart-sidebar h2 {
        flex-shrink: 0;                /* No se encoge */
        padding: 15px;
        margin: 0;
        background: #FFC300;           /* Tu color amarillo */
        color: #333;
    }

    /* 3. La lista de productos es la ÚNICA que hace scroll */
    #cart-items {
        flex-grow: 1;                  /* Ocupa todo el espacio sobrante */
        overflow-y: auto;              /* Scroll vertical activado */
        padding: 15px;
        margin: 0;
        
        /* Ajuste para scroll suave en iOS */
        -webkit-overflow-scrolling: touch; 
    }

    /* 4. El pie de página (Total + Botón) se queda fijo abajo */
    .cart-sticky-footer {
        flex-shrink: 0;                /* No se encoge */
        background: white;
        padding: 15px;
        border-top: 1px solid #ddd;
        box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
        
        /* Asegura que esté siempre visible abajo */
        position: relative; 
        z-index: 10;
    }

    /* Opcional: Para que el botón flotante no estorbe cuando el carrito está abierto */
    .cart-sidebar.active ~ .open-cart-button {
        display: none;
    }
}

/* === MEJORA DE DISTRIBUCIÓN HEADER MÓVIL (LOGO GRANDE) === */
@media (max-width: 768px) {

    /* 1. Contenedor Principal: Compacto */
    .main-header .container {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        gap: 5px !important;
    }

    /* 2. TÍTULO */
    .header-info-wrapper { margin-bottom: 5px !important; }
    .store-name { 
        font-size: 1.1rem !important; 
        margin-bottom: 2px !important;
    }
    .store-slogan { display: none !important; } 

    /* 3. BARRA CENTRAL */
    .logo-and-cart {
        width: 100%;
        padding: 0 10px !important;
        display: grid !important;
        /* Logo - Espacio - Botón - Espacio - Carrito */
        grid-template-columns: auto 1fr auto !important; 
        align-items: center;
        margin-bottom: 5px !important;
        position: relative;
        /* Altura mínima para asegurar que el logo quepa visualmente */
        min-height: 60px; 
    }
    /* A. LOGO GIGANTE (ESTILO "POP-OUT") */
    .header-logo {
        height: 135px !important;  /* ¡Mucho más grande! (antes 95px) */
        width: auto;
        
        /* TRUCO AGRESIVO: Márgenes negativos fuertes */
        /* Esto "engaña" al navegador para que crea que el logo es pequeño */
        margin-top: -40px !important;    
        margin-bottom: -40px !important; 
        
        /* Lo pegamos bien a la izquierda */
        margin-left: -15px !important;    
        
        /* Aseguramos que flote ENCIMA de todo lo demás */
        position: relative;
        z-index: 50; 
        
        /* Sombra más fuerte para que se note que está flotando */
        filter: drop-shadow(0 5px 8px rgba(0,0,0,0.4));
        
        /* Evita que deforme la celda de la grilla */
        max-width: none; 
    }


    /* C. CARRITO */
    .cart-widget {
        grid-column: 3;
        transform: scale(0.95);
    }

    /* 4. SALUDO */
    .header-client-msg h3 { font-size: 1.1rem !important; }
    .header-client-msg p { font-size: 0.9rem !important; }
    .header-client-msg small { display: none !important; }
}

/* =========================================
   DISEÑO DEL CARRITO MEJORADO (MODERNO)
   ========================================= */

   .cart-sidebar {
    background-color: #ffffff;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1); /* Sombra suave a la izquierda */
    display: flex;
    flex-direction: column;
    /* En escritorio ya no necesitamos bordes redondeados ni márgenes raros */
}

.cart-header {
    background: linear-gradient(135deg, #FFC300 0%, #FFB300 100%); /* Degradado sutil */
    padding: 15px 20px;
    display: flex;
    justify-content: space-between; /* Texto a la izq, X a la der */
    align-items: center;
    flex-shrink: 0;
    border-radius: 15px 15px 0 0; /* Tus esquinas redondeadas */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Sombra suave interna */
}

/* Agrupa el ícono y el texto */
.cart-header-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* El ícono (Bolsa/Carrito) */
.cart-header-icon {
    font-size: 1.8rem;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}

/* Contenedor del texto vertical */
.cart-text-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.cart-text-info h2 {
    margin: 0;
    font-size: 1.1rem; /* Un poco más compacto */
    font-weight: 900;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cart-text-info small {
    font-size: 0.75rem;
    color: #555; /* Gris oscuro para el subtítulo */
    font-weight: 500;
}

/* Ajuste del botón cerrar para que encaje mejor */
#close-cart-btn {
    display: none;
    font-size: 2rem;
    color: #333;
    opacity: 0.6;
    transition: all 0.2s;
    line-height: 0.8;
    cursor: pointer;
}

#close-cart-btn:hover {
    opacity: 1;
    transform: scale(1.1) rotate(90deg); /* Pequeño giro al pasar el mouse */
    color: #E60000;
}
/* 2. LISTA DE PRODUCTOS */
#cart-items {
    padding: 20px;
    background-color: #f9f9f9; /* Fondo gris muy clarito para diferenciar */
}

/* Estilo para cuando está vacío */
.cart-empty {
    text-align: center;
    color: #999;
    font-size: 1rem;
    margin-top: 30px;
    font-style: italic;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
/* Truco: Agregamos un emoji gigante con CSS si está vacío */
.cart-empty::before {
    content: "🛒"; 
    font-size: 3rem;
    opacity: 0.5;
    margin-bottom: 10px;
}

/* 3. PIE DE PÁGINA (Sticky Footer Moderno) */
.cart-sticky-footer {
    background: white;
    padding: 20px;
    border-top: 1px solid #eee;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.05); /* Sombra hacia arriba elegante */
}

.cart-total {
    display: flex;
    justify-content: space-between; /* Total a la izq, Precio a la der */
    align-items: center;
    font-size: 1.4rem;
    color: #333;
    margin-bottom: 15px;
}

.cart-total span:first-child {
    font-weight: 400; /* Texto "Total:" normal */
    font-size: 1.1rem;
    color: #666;
}

.cart-total span:last-child {
    font-weight: 900; /* Precio en negrita */
    color: #E60000;   /* Rojo precio */
}

/* Botón Finalizar mejorado */
.btn-checkout {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    box-shadow: 0 4px 6px rgba(40, 167, 69, 0.3);
    border-radius: 50px; /* Redondo y moderno */
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
}

.btn-checkout:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(40, 167, 69, 0.4);
}

/* ==========================================================================
   1. REGLAS GLOBALES (APLICAN A TODO)
   ========================================================================== */

/* Por defecto, el banner de ofertas móvil NO EXISTE en ningún lado */
.mobile-offers-header {
    display: none;
}

/* Ajustes base para el panel de búsqueda moderno */
.product-search-panel {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 25px;
    overflow: hidden;
    border: 1px solid #eee;
}

.product-search-header {
    background: linear-gradient(135deg, #FFC300 0%, #FFB300 100%);
    padding: 15px 20px;
}

.search-header-group { display: flex; align-items: center; gap: 12px; }
.search-header-icon { font-size: 1.8rem; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1)); }
.search-text-info h2 { margin: 0; font-size: 1.2rem; font-weight: 900; text-transform: uppercase; color: #333; line-height: 1; }
.search-text-info small { font-size: 0.85rem; color: #444; font-weight: 600; }

.filter-controls-modern { padding: 20px; display: flex; gap: 15px; background: #fff; }
.input-wrapper { position: relative; flex-grow: 1; display: flex; align-items: center; }
.input-wrapper .input-icon { position: absolute; left: 15px; font-size: 1rem; z-index: 10; pointer-events: none; opacity: 0.6; }

.filter-controls-modern input, 
.filter-controls-modern select {
    width: 100%;
    padding: 12px 15px 12px 40px;
    font-size: 1rem;
    border: 2px solid #eee;
    border-radius: 50px;
    background-color: #f9f9f9;
    outline: none;
    transition: all 0.3s ease;
    appearance: none;
}

.filter-controls-modern input:focus, 
.filter-controls-modern select:focus {
    border-color: #FFC300;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 195, 0, 0.1);
}

/* ==========================================================================
   2. ESTILOS EXCLUSIVOS DE ESCRITORIO (PC)
   (Solo se activan si la pantalla es GRANDE > 901px)
   ========================================================================== */
@media (min-width: 901px) {

    /* --- Header Rojo Premium (Glassmorphism) --- */
    .main-header {
        background: linear-gradient(90deg, #8B0000 0%, #D32F2F 50%, #B71C1C 100%) !important;
        padding: 20px 0;
        box-shadow: 0 4px 20px rgba(0,0,0,0.25);
        border-bottom: 4px solid #FFC300;
    }

    /* Las cajas de promo transparentes */
    .promo-box {
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(5px);
        padding: 10px 20px !important;
        border-radius: 12px !important;
        flex: 1;
        text-align: center;
        transition: transform 0.3s ease, background 0.3s;
        cursor: default;
        display: block !important; 
    }

    .promo-box:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: translateY(-3px);
    }

    .promo-box h3 {
        color: #FFC300 !important;
        font-weight: 900;
        font-size: 0.95rem !important;
        margin-bottom: 4px !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .promo-box p {
        color: white !important;
        font-size: 0.8rem !important;
        opacity: 0.9;
        margin: 0 !important;
    }

    /* Botón Mis Pedidos Desktop */
    #btn-history-desktop {
        background: linear-gradient(180deg, #FFC300 0%, #FFB300 100%) !important;
        color: #8B0000 !important;
        border: none !important;
        font-weight: 800 !important;
        text-transform: uppercase;
        padding: 8px 15px !important;
        border-radius: 50px !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        display: flex !important;
    }

    .header-separator {
        background-color: rgba(255, 255, 255, 0.2) !important;
        width: 1px !important;
        box-shadow: none !important;
        display: block !important;
    }
}

/* ==========================================================================
   3. ESTILOS EXCLUSIVOS DE MÓVIL (CELULAR)
   (Solo se activan si la pantalla es PEQUEÑA < 900px)
   ========================================================================== */
@media (max-width: 900px) {

    /* --- A. CARRITO FLOTANTE Y SU "X" --- */
    .cart-sidebar { display: none; }

    .cart-sidebar.active {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0; right: 0;
        height: 100vh; width: 85%; max-width: 400px;
        background-color: white;
        z-index: 99999;
        box-shadow: -5px 0 15px rgba(0,0,0,0.5);
        margin: 0; padding: 0;
    }

    #close-cart-btn {
        display: block !important;
        font-size: 2.2rem;
        cursor: pointer;
        color: #333;
        line-height: 1;
        padding-left: 15px;
    }

    .cart-header { padding: 15px 20px; }
    #cart-items { flex-grow: 1; overflow-y: auto; }

    /* --- B. BANNER DE OFERTAS MÓVIL (EL QUE TE DABA PROBLEMAS) --- */
    
    .mobile-offers-header {
        display: block !important; /* Activamos el banner */
        background: linear-gradient(135deg, #FFC300 0%, #FFB300 100%);
        color: #333;
        padding: 12px 20px;
        margin: 15px 10px 5px 10px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(255, 195, 0, 0.3);
        border: 1px solid rgba(255,255,255,0.2);
    }

    .mobile-header-content {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }

    .mobile-header-icon {
        font-size: 2rem;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
        animation: pulseIcon 2s infinite;
    }

    .mobile-text-info {
        display: flex;
        flex-direction: column;
        text-align: left;
    }

    .mobile-text-info h2 {
        margin: 0;
        font-size: 1.3rem;
        font-weight: 900;
        text-transform: uppercase;
        line-height: 1;
        color: #222;
    }

    .mobile-text-info small {
        font-size: 0.8rem;
        font-weight: 600;
        color: #444;
        margin-top: 2px;
    }

    /* --- C. AJUSTES VARIOS MÓVIL --- */
    .filter-controls-modern {
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }
    
    .search-text-info h2 { font-size: 1.1rem; }
    .mobile-ads-container { margin-top: 10px !important; }

} /* <--- CIERRE DEL MEDIA QUERY DE 900px */

/* Animación Global para el fuego */
@keyframes pulseIcon {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}