/* =======================================================
   🎅 MODO NAVIDAD: VERSIÓN ESTABLE (NO ROMPE MÓVIL) 🎅
   ======================================================= */

/* 1. REGLA DE ORO: CERO SCROLL HORIZONTAL */
html, body {
    overflow-x: hidden !important; /* Bloquea el baile lateral */
    width: 100%;
    position: relative;
}

/* 2. AMBIENTE Y NIEVE (GENERADA POR CÓDIGO - SIN IMÁGENES) */
body {
    background-color: #fffafa !important;
    /* Fondo sutil con puntitos festivos (CSS puro) */
    background-image: radial-gradient(#e60000 1px, transparent 1px), radial-gradient(#198754 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 999999;
    
    /* --- AQUÍ ESTÁ EL CAMBIO: NIEVE HECHA CON CSS (NO SE ROMPE NUNCA) --- */
    background-image: 
        radial-gradient(circle, rgba(255,255,255,0.8) 2.5px, transparent 3px), /* Copos grandes */
        radial-gradient(circle, rgba(255,255,255,0.5) 1.5px, transparent 2px); /* Copos pequeños */
    
    /* Tamaño del patrón de repetición */
    background-size: 400px 400px, 200px 200px;
    
    /* Animación de caída */
    animation: snow 10s linear infinite;
}

@keyframes snow {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 100px 400px, 50px 200px; } /* Mueve los dos patrones a diferente velocidad */
}

/* 3. BANNERS AMARILLOS (Decoración Segura) */
.mobile-offers-header, 
.product-search-header, 
.cart-header, 
.ad-sidebar-header {
    position: relative;
    /* Quitamos overflow visible peligroso en móvil, lo manejamos con cuidado */
    border-top: 6px solid white !important; /* Nieve acumulada */
    border-radius: 15px !important;
    box-shadow: 0 10px 20px rgba(230, 0, 0, 0.2) !important;
    z-index: 1; /* Nivel base */
}

/* El Adorno Colgante (Regalo) */
.mobile-offers-header::after, 
.product-search-header::after, 
.cart-header::after, 
.ad-sidebar-header::after {
    content: "🎁";
    font-size: 1.8rem;
    position: absolute;
    top: -18px;
    right: 5px; /* Lo metemos ADENTRO del contenedor para que no ensanche la pantalla */
    animation: swing 2s ease-in-out infinite;
    transform-origin: top center;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2));
    z-index: 50;
    pointer-events: none; /* No se puede clickear el adorno */
}

@keyframes swing {
    0% { transform: rotate(5deg); }
    50% { transform: rotate(-5deg); }
    100% { transform: rotate(5deg); }
}

/* 4. TARJETAS DE PRODUCTO */
.product-card {
    border: 1px solid #ffcccc !important;
}
.product-card:hover {
    border-color: #28a745 !important;
    box-shadow: 0 10px 25px rgba(25, 135, 84, 0.2) !important;
}
.product-card::before {
    content: "🎀";
    position: absolute;
    top: -5px; left: -2px; /* Ajustado para no salir del borde */
    font-size: 1.5rem;
    z-index: 20;
    pointer-events: none;
}

/* 5. BOTONES ROJOS (Nieve Superior) */
.btn-add-cart, .btn-checkout, .btn-checkout-submit, .modern-hero button {
    border-top: 3px dashed rgba(255,255,255,0.8) !important;
}

/* 6. LOGO CON GORRO (Ajustado) */
.logo-and-cart { position: relative; }
.logo-and-cart::after {
    content: "🎅";
    position: absolute;
    font-size: 3rem;
    top: -20px; 
    left: 10px; 
    z-index: 100;
    transform: rotate(-15deg);
    pointer-events: none; /* CRUCIAL: Para poder dar click al logo o menú */
}

/* 7. BOTÓN FLOTANTE CARRITO (Esfera) */
.open-cart-button {
    background: radial-gradient(circle at 30% 30%, #ff4d4d, #b30000) !important;
    border: 2px solid #FFD700 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4) !important;
}
.open-cart-button::before {
    content: "☊";
    position: absolute;
    top: -20px; left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    color: #FFD700;
    font-weight: bold;
    pointer-events: none;
}

/* 8. HEADER SUPERIOR (Luces Estáticas para rendimiento) */
.main-header::after {
    content: "";
    position: absolute;
    bottom: -5px; left: 0; width: 100%; height: 6px;
    background: repeating-linear-gradient(90deg, yellow, yellow 10px, red 10px, red 20px, blue 20px, blue 30px, green 30px, green 40px);
    z-index: 200;
    opacity: 0.8;
    pointer-events: none;
}

/* =========================================
   SOLO PC (Corrección del Trineo sin Bugs)
   ========================================= */
   @media (min-width: 901px) {
    
    /* 1. Aseguramos que nada pueda desbordar el ancho */
    html, body {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    footer {
        position: relative;
        overflow: visible !important; 
        z-index: 5;
    }

    /* 2. EL RENO (Optimizado para no generar scroll) */
    footer::before {
        content: "🦌🦌🛷💨";
        position: absolute;
        top: -35px; 
        right: 0; /* Empezamos DENTRO de la pantalla */
        font-size: 2.2rem;
        
        /* Usamos 'transform' para moverlo fuera sin afectar el ancho */
        transform: translateX(120%); /* Lo empujamos a la derecha visualmente */
        
        animation: flySleighGPU 18s linear infinite;
        pointer-events: none;
        will-change: transform; /* Avisamos al navegador para que sea fluido */
    }

    /* Animación basada en Transformación (No afecta el layout) */
    @keyframes flySleighGPU {
        0% { 
            transform: translateX(120%); /* Empieza fuera a la derecha */
            opacity: 0; /* Invisible al inicio para evitar flashes */
        }
        5% {
            opacity: 1; /* Aparece suavemente */
        }
        100% { 
            /* Cruza toda la pantalla hacia la izquierda */
            /* Calculamos un valor alto para asegurar que salga por el otro lado */
            transform: translateX(-100vw); 
        } 
    }

    /* Scrollbar de caramelo (Intacto) */
    ::-webkit-scrollbar { width: 12px; }
    ::-webkit-scrollbar-track { background: #fff; }
    ::-webkit-scrollbar-thumb {
        background: repeating-linear-gradient(45deg, #e60000, #e60000 10px, #ffffff 10px, #ffffff 20px);
        border-radius: 10px;
        border: 2px solid white;
    }
}