/* ==========================================================================
   TEMA ESPECIAL DE HALLOWEEN - INTERBOX GLOBAL (TERROR APOCALÍPTICO)
   - Buscador 100% intacto y original (sin modificaciones)
   - Bordes del menú y tarjetas con efecto de goteo de sangre
   - Títulos con tipografía rasgada de terror y parpadeo tenebroso (luz rota)
   - Fondo panorámico de cementerio gótico
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

:root {
    --bg-main: #080512;
    --bg-header: rgba(15, 23, 42, 0.96);
    --bg-card: rgba(15, 23, 42, 0.96);
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --accent: #ff6a00;
    --accent-hover: #ff4500;
    --price-color: #ff7700;
    --green-success: #00ff88;
    --halloween-purple: #9d4edd;
}

/* ==========================================================================
   1. FONDO NOCTURNO CON SILUETA DEL CEMENTERIO
   ========================================================================== */
body.halloween-theme {
    background-color: #080512 !important;
    background-image: none !important;
    color: #f8fafc;
    position: relative;
    min-height: 100vh;
}

/* Capa de fondo fija acelerada por hardware (Visible y nítida en móvil y PC) */
body.halloween-theme::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/halloween_bg.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
    z-index: -2;
    pointer-events: none;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

body.halloween-theme .hero-section,
body.halloween-theme .catalog-section,
body.halloween-theme .catalog-container {
    background: transparent !important;
}

/* ==========================================================================
   2. HEADER & MENÚ CON EFECTO DE GOTEO DE SANGRE
   ========================================================================== */
body.halloween-theme .glass-header {
    background: rgba(15, 23, 42, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: none !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.8) !important;
    position: relative;
}

/* Goteo de sangre orgánico y realista (gotas largas, redondeadas y con brillo, sin dientes de sierra) */
body.halloween-theme .glass-header::after {
    content: "";
    position: absolute;
    bottom: -31px;
    left: 0;
    width: 100%;
    height: 32px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 50' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L800 0 L800 4 C780 4 772 15 768 28 C764 42 756 42 752 28 C748 15 740 4 710 4 C680 4 675 10 670 18 C666 26 660 26 656 18 C652 10 645 4 610 4 C580 4 570 20 564 36 C558 50 548 50 542 36 C536 20 525 4 490 4 C460 4 455 8 450 14 C446 20 440 20 436 14 C432 8 425 4 390 4 C360 4 350 22 344 38 C338 52 328 52 322 38 C316 22 305 4 270 4 C245 4 240 12 235 22 C230 32 224 32 220 22 C216 12 210 4 180 4 C150 4 142 18 138 32 C134 46 124 46 120 32 C116 18 108 4 70 4 C45 4 40 10 35 18 C30 26 24 26 20 18 C16 10 10 4 0 4 Z' fill='%23550000'/%3E%3Cpath d='M0 0 L800 0 L800 2 C780 2 772 13 768 26 C764 39 756 39 752 26 C748 13 740 2 710 2 C680 2 675 8 670 16 C666 24 660 24 656 16 C652 8 645 2 610 2 C580 2 570 18 564 34 C558 47 548 47 542 34 C536 18 525 2 490 2 C460 2 455 6 450 12 C446 18 440 18 436 12 C432 6 425 2 390 2 C360 2 350 20 344 36 C338 49 328 49 322 36 C316 20 305 2 270 2 C245 2 240 10 235 20 C230 30 224 30 220 20 C216 10 210 2 180 2 C150 2 142 16 138 30 C134 43 124 43 120 30 C116 16 108 2 70 2 C45 2 40 8 35 16 C30 24 24 24 20 16 C16 8 10 2 0 2 Z' fill='%23cc001f'/%3E%3Ccircle cx='760' cy='32' r='2' fill='%23ff6677' opacity='0.75'/%3E%3Ccircle cx='553' cy='40' r='2.5' fill='%23ff6677' opacity='0.8'/%3E%3Ccircle cx='333' cy='42' r='2.5' fill='%23ff6677' opacity='0.8'/%3E%3Ccircle cx='129' cy='36' r='2.2' fill='%23ff6677' opacity='0.75'/%3E%3C/svg%3E") repeat-x;
    background-size: 800px 32px;
    pointer-events: none;
    z-index: 999;
    filter: drop-shadow(0 4px 6px rgba(200, 0, 40, 0.7));
}

body.halloween-theme .logo h1 span {
    color: var(--accent) !important;
    text-shadow: 0 0 12px rgba(255, 106, 0, 0.8);
}

body.halloween-theme .logo a::after {
    content: "🎃";
    font-size: 1.3rem;
    margin-left: 6px;
    animation: pumpkinBob 2.5s ease-in-out infinite alternate;
    display: inline-block;
}

@keyframes pumpkinBob {
    0% { transform: translateY(0) rotate(-6deg); filter: drop-shadow(0 0 4px #ff6a00); }
    100% { transform: translateY(-4px) rotate(8deg); filter: drop-shadow(0 0 10px #ff4500); }
}


/* Buscador Redondo / Pill-shaped */
body.halloween-theme .search-container {
    border-radius: 30px !important;
}

body.halloween-theme .search-container input {
    border-radius: 30px 0 0 30px !important;
}

body.halloween-theme .search-btn {
    border-radius: 0 30px 30px 0 !important;
}


body.halloween-theme .cart-btn {
    background: linear-gradient(135deg, #ff5500, #b30000) !important;
    box-shadow: 0 0 15px rgba(255, 85, 0, 0.6) !important;
    border: 1px solid rgba(255, 200, 0, 0.4) !important;
    animation: cartPulseHalloween 2.5s infinite ease-in-out;
}

@keyframes cartPulseHalloween {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); box-shadow: 0 0 22px rgba(255, 85, 0, 0.8); }
}

/* ==========================================================================
   3. TÍTULOS CON TIPOGRAFÍA RASGADA Y PARPADEO TENEBROSO (LUZ ROTA)
   ========================================================================== */
body.halloween-theme .hero-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: transparent !important;
}

body.halloween-theme .video-hero {
    position: relative;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

body.halloween-theme .video-hero video {
    display: none !important;
}

body.halloween-theme .pill-badge {
    background: linear-gradient(90deg, #ff5500, #9d4edd) !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(255, 85, 0, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    letter-spacing: 2px !important;
}

/* Título principal con tipografía rasgada Creepster y efecto de luz rota */
body.halloween-theme .video-overlay h2 {
    font-family: 'Creepster', cursive, sans-serif !important;
    font-size: 3.4rem !important;
    letter-spacing: 2.5px !important;
    color: #ffffff !important;
    text-shadow: 
        0 0 12px #ff0044,
        0 0 25px #ff6a00,
        0 0 45px #9d4edd !important;
    animation: horrorFlickerBrokenLight 4.5s infinite !important;
    line-height: 1.15 !important;
}

@media (max-width: 768px) {
    body.halloween-theme .video-overlay h2 {
        font-size: 2.3rem !important;
    }
}

/* Animación de parpadeo tenebroso (flicker de tubo fluorescente roto de terror) */
@keyframes horrorFlickerBrokenLight {
    0%, 18.99%, 21.99%, 24.99%, 52.99%, 56.99%, 71.99%, 100% {
        opacity: 1;
        text-shadow: 
            0 0 12px #ff0044,
            0 0 25px #ff6a00,
            0 0 45px #9d4edd;
    }
    19%, 21.5% {
        opacity: 0.25;
        text-shadow: none;
    }
    22%, 24.5% {
        opacity: 0.08;
        text-shadow: none;
    }
    53%, 56.5% {
        opacity: 0.2;
        text-shadow: 0 0 6px rgba(255, 0, 68, 0.5);
    }
    72%, 73% {
        opacity: 0.45;
        text-shadow: none;
    }
}

body.halloween-theme .btn-glow {
    background: linear-gradient(90deg, #ff5500, #ff0055) !important;
    color: white !important;
    border: 1px solid rgba(255, 200, 100, 0.5) !important;
    box-shadow: 0 0 20px rgba(255, 85, 0, 0.6) !important;
    text-transform: uppercase;
    font-weight: 900;
}

body.halloween-theme .btn-glow:hover {
    box-shadow: 0 0 35px rgba(255, 0, 85, 0.9) !important;
    transform: translateY(-2px) scale(1.03);
}

/* Título de la sección "Nuestra Colección" con tipografía rasgada */
body.halloween-theme #catalog-title,
body.halloween-theme .catalog-section h2,
body.halloween-theme #catalog h2 {
    font-family: 'Creepster', cursive, sans-serif !important;
    font-size: 2.2rem !important;
    letter-spacing: 2px !important;
    color: #ff6a00 !important;
    text-shadow: 0 0 15px rgba(255, 106, 0, 0.6), 0 0 25px rgba(157, 78, 221, 0.4);
}

/* ==========================================================================
   4. TARJETAS DE PRODUCTOS CON GOTEO DE SANGRE SUPERIOR
   ========================================================================== */
body.halloween-theme .product-card,
body.halloween-theme .related-card {
    background: rgba(15, 23, 42, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

/* Efecto de goteo de sangre en la parte superior de cada tarjeta */
body.halloween-theme .product-card::before,
body.halloween-theme .related-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L400 0 L400 3 C370 3 365 14 358 14 C351 14 346 3 310 3 C280 3 275 16 268 16 C261 16 256 3 210 3 C180 3 175 11 168 11 C161 11 156 3 110 3 C80 3 75 15 68 15 C61 15 56 3 0 3 Z' fill='%23ff0033'/%3E%3C/svg%3E") repeat-x;
    background-size: 180px 12px;
    z-index: 12;
    pointer-events: none;
    opacity: 0.9;
    filter: drop-shadow(0 2px 3px rgba(255, 0, 50, 0.5));
}

body.halloween-theme .product-card:hover,
body.halloween-theme .related-card:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 10px 30px rgba(255, 106, 0, 0.35), 0 0 15px rgba(157, 78, 221, 0.3) !important;
    transform: translateY(-5px);
}

body.halloween-theme .badge-oferta {
    background: linear-gradient(90deg, #ff4500, #b30000) !important;
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.6) !important;
}

body.halloween-theme .badge-nuevo {
    background: linear-gradient(90deg, #00ff66, #9d4edd) !important;
    color: #0c0919 !important;
    font-weight: 900 !important;
    box-shadow: 0 0 10px rgba(0, 255, 102, 0.5) !important;
}

body.halloween-theme .price {
    color: #ff7700 !important;
    text-shadow: 0 0 10px rgba(255, 119, 0, 0.4);
}

body.halloween-theme #new-floating-shipping {
    background: linear-gradient(135deg, #ff5500, #7e22ce) !important;
    border: 2px solid rgba(255, 215, 0, 0.6) !important;
    box-shadow: 0 4px 20px rgba(255, 85, 0, 0.5) !important;
}

/* ==========================================================================
   5. RELÁMPAGOS, FANTASMA Y MURCIÉLAGOS
   ========================================================================== */
#halloween-atmosphere {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9998;
    overflow: hidden;
}

/* Capa de relámpago que destella en el fondo */
.halloween-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(180, 100, 255, 0.22);
    pointer-events: none;
    z-index: 1; /* Detrás de las tarjetas pero delante del cielo */
    opacity: 0;
    transition: opacity 0.07s ease;
}

.halloween-flash.active {
    opacity: 1;
}

/* Fantasma flotante */
.halloween-ghost {
    position: absolute;
    width: 95px;
    height: 115px;
    pointer-events: none;
    filter: drop-shadow(0 0 18px rgba(0, 255, 255, 0.8)) drop-shadow(0 0 32px rgba(157, 78, 221, 0.5));
    opacity: 0.9;
}

@keyframes ghostFlyAcross {
    0% {
        transform: translate(-140px, 60vh) scale(0.85);
        opacity: 0;
    }
    8% {
        opacity: 0.9;
    }
    30% {
        transform: translate(25vw, 30vh) scale(1) rotate(-5deg);
    }
    60% {
        transform: translate(60vw, 45vh) scale(1.05) rotate(6deg);
    }
    85% {
        opacity: 0.9;
    }
    100% {
        transform: translate(110vw, 25vh) scale(0.9);
        opacity: 0;
    }
}

.ghost-tail {
    animation: ghostTailWiggle 2s ease-in-out infinite alternate;
    transform-origin: center top;
}

@keyframes ghostTailWiggle {
    0% { transform: skewX(-6deg); }
    100% { transform: skewX(6deg); }
}

/* Murciélagos en bandada */
.halloween-bat-swarm {
    position: absolute;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.9));
    pointer-events: none;
    opacity: 0.92;
}

.bat-wings-path {
    animation: realBatFlap 0.2s ease-in-out infinite alternate;
    transform-origin: center 55%;
}

@keyframes realBatFlap {
    0% { transform: scaleY(1); }
    100% { transform: scaleY(0.35) translateY(5px); }
}

@keyframes batSwarmFly {
    0% {
        transform: translate(110vw, 20vh) scale(0.8) scaleX(-1);
        opacity: 0;
    }
    8% {
        opacity: 0.92;
    }
    50% {
        transform: translate(50vw, 45vh) scale(1) scaleX(-1) rotate(-8deg);
    }
    85% {
        opacity: 0.92;
    }
    100% {
        transform: translate(-150px, 15vh) scale(0.8) scaleX(-1);
        opacity: 0;
    }
}

/* Cursor de Halloween en PC */
@media (hover: hover) and (pointer: fine) {
    body.halloween-theme {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff7700' stroke='%23000' stroke-width='1.2' d='M12 2C7 2 3 6 3 11c0 3 1.5 5.5 3.5 7.5L6 22l4-2 2 1 2-1 4 2-.5-3.5C19.5 16.5 21 14 21 11c0-5-4-9-9-9zm-3 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm6 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E") 5 3, auto;
    }
    
    body.halloween-theme a,
    body.halloween-theme button,
    body.halloween-theme select,
    body.halloween-theme input,
    body.halloween-theme .product-card,
body.halloween-theme .related-card {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath fill='%2300ff88' stroke='%23000' stroke-width='1.2' d='M12 2C7 2 3 6 3 11c0 3 1.5 5.5 3.5 7.5L6 22l4-2 2 1 2-1 4 2-.5-3.5C19.5 16.5 21 14 21 11c0-5-4-9-9-9zm-3 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm6 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E") 5 3, pointer !important;
    }
}

/* ==========================================================================
   8. PANELES EN AZUL OSCURO PARA CONTRASTE ELEGANTE (INTERBOX DARK BLUE)
   ========================================================================== */

/* 1. Barra de Título del Catálogo (Nuestra Colección) */
body.halloween-theme .content-header {
    background: rgba(15, 23, 42, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6) !important;
}

body.halloween-theme .content-header .header-main-row {
    color: #f8fafc !important;
}

body.halloween-theme .content-header .product-count {
    color: #94a3b8 !important;
}

body.halloween-theme .content-header label {
    color: #cbd5e1 !important;
}

body.halloween-theme .sort-control {
    color: #cbd5e1 !important;
}

body.halloween-theme .sort-control select {
    background: #080d1a !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    outline: none !important;
}

body.halloween-theme #mobile-category-select {
    background: #080d1a !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    outline: none !important;
}

body.halloween-theme .share-filters-btn {
    background: #080d1a !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    transition: all 0.2s ease !important;
}

body.halloween-theme .share-filters-btn:hover {
    background: #ff6a00 !important;
    color: #ffffff !important;
    border-color: #ff6a00 !important;
}

body.halloween-theme .filter-badge {
    background: #080d1a !important;
    color: #ff6a00 !important;
    border: 1px solid rgba(255, 106, 0, 0.4) !important;
}

/* 2. Barra Lateral de Filtros (Sidebar) */
body.halloween-theme .catalog-sidebar {
    background: rgba(15, 23, 42, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6) !important;
    color: #f8fafc !important;
}

body.halloween-theme .catalog-sidebar h3,
body.halloween-theme .catalog-sidebar h4 {
    color: #f8fafc !important;
}

body.halloween-theme .filter-widget {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.halloween-theme #sidebar-video-container {
    background: rgba(15, 23, 42, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.halloween-theme .search-box-sidebar {
    background: #080d1a !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.halloween-theme .search-box-sidebar input {
    background: transparent !important;
    color: #f8fafc !important;
}

body.halloween-theme .search-box-sidebar button {
    background: #0b1120 !important;
    color: #cbd5e1 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body.halloween-theme .search-categories input {
    background: #080d1a !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
}

body.halloween-theme .search-categories input::placeholder {
    color: #64748b !important;
}

body.halloween-theme .categories-list,
body.halloween-theme .categories-list a,
body.halloween-theme .categories-list span,
body.halloween-theme .category-item,
body.halloween-theme .cat-item {
    color: #cbd5e1 !important;
}

body.halloween-theme .cat-item:hover,
body.halloween-theme .category-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

body.halloween-theme .cat-item.active,
body.halloween-theme .category-item.active {
    background: rgba(255, 106, 0, 0.2) !important;
    color: #ff6a00 !important;
}

body.halloween-theme .cat-count {
    background: #080d1a !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.halloween-theme .price-field input {
    background: #080d1a !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.halloween-theme .slider-track {
    background: #1e293b !important;
}

body.halloween-theme .clear-filters-btn {
    background: #080d1a !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
}

body.halloween-theme .clear-filters-btn:hover {
    background: #ff4500 !important;
    color: #ffffff !important;
    border-color: #ff4500 !important;
}

/* Botón Compartir Filtros / Búsqueda */
body.halloween-theme .share-filters-btn {
    background: rgba(15, 23, 42, 0.95) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 106, 0, 0.45) !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

body.halloween-theme .share-filters-btn i {
    color: #ff6a00 !important;
    transition: transform 0.2s ease !important;
}

body.halloween-theme .share-filters-btn:hover {
    background: rgba(255, 106, 0, 0.25) !important;
    border-color: #ff6a00 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(255, 106, 0, 0.5) !important;
}

body.halloween-theme .share-filters-btn:hover i {
    transform: scale(1.15);
}

/* 3. Modal de Producto en Azul Oscuro */
body.halloween-theme .modal-content {
    background: rgba(15, 23, 42, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}

body.halloween-theme .modal-details h2 {
    color: #f8fafc !important;
}

body.halloween-theme .stock-info {
    color: #00ff88 !important;
}

body.halloween-theme .quantity-selector span {
    color: #cbd5e1 !important;
}

body.halloween-theme #modal-qty-input {
    background: #080d1a !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* 4. Botón Compartir Producto en Modal (Texto blanco brillante e icono naranja) */
body.halloween-theme .share-btn,
.share-btn {
    margin-top: 12px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 106, 0, 0.45) !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

body.halloween-theme .share-btn i,
.share-btn i {
    color: #ff6a00 !important;
    font-size: 1.15rem !important;
    transition: transform 0.3s ease !important;
}

body.halloween-theme .share-btn:hover,
.share-btn:hover {
    background: rgba(255, 106, 0, 0.2) !important;
    border-color: #ff6a00 !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 106, 0, 0.5) !important;
}

body.halloween-theme .share-btn:hover i,
.share-btn:hover i {
    transform: scale(1.15);
    color: #ffaa00 !important;
}

/* 5. Banner de Envío Gratis dentro del Carrito */
body.halloween-theme #free-shipping-container-drawer {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(255, 106, 0, 0.35) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    margin: 12px 16px 8px 16px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

body.halloween-theme #free-shipping-container-drawer .banner-text {
    color: #f8fafc !important;
    font-size: 0.88rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}

body.halloween-theme #free-shipping-container-drawer .banner-text i {
    color: #ff6a00 !important;
    font-size: 1.15rem !important;
}

body.halloween-theme #free-shipping-container-drawer .banner-text strong {
    color: #ff9900 !important;
}

body.halloween-theme #free-shipping-container-drawer .free-shipping-msg-success strong {
    color: #00ff88 !important;
}

body.halloween-theme #free-shipping-container-drawer .progress-wrapper {
    background: rgba(255, 255, 255, 0.12) !important;
    height: 7px !important;
    border-radius: 5px !important;
    overflow: hidden !important;
}

body.halloween-theme #free-shipping-container-drawer .progress-bar {
    background: linear-gradient(90deg, #ff6a00, #00ff88) !important;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.5) !important;
    transition: width 0.4s ease-out;
}

/* ==========================================================================
   9. OPTIMIZACIONES DE ALTO RENDIMIENTO EN MÓVIL Y CARRITO FLOTANTE
   ========================================================================== */

#floating-mobile-cart-btn {
    display: none !important;
}

@media (max-width: 768px) {
    /* 1. Ocultar botón flotante de envío gratis en móvil (se mantiene dentro del carrito) */
    #new-floating-shipping {
        display: none !important;
    }

    /* 2. Video de cabecera desactivado para máximo rendimiento */
    body.halloween-theme .video-hero video {
        display: none !important;
    }

    /* 3. Evitar recálculo constante de desenfoque GPU en el header */
    body.halloween-theme .glass-header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* 4. Ocultar carrito del header en móvil para no desbordar el menú */
    body.halloween-theme .glass-header .cart-btn {
        display: none !important;
    }

    /* 5. Botón de Carrito Flotante fijo y visible SIEMPRE sobre WhatsApp */
    body.halloween-theme #floating-mobile-cart-btn,
    #floating-mobile-cart-btn {
        display: flex !important;
        position: fixed !important;
        bottom: 82px !important;
        right: 20px !important;
        width: 50px !important;
        height: 50px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        z-index: 10001 !important;
        justify-content: center !important;
        align-items: center !important;
        background: linear-gradient(135deg, #ff5500, #b30000) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 85, 0, 0.7) !important;
        border: 2px solid rgba(255, 200, 0, 0.5) !important;
        cursor: pointer !important;
        color: #ffffff !important;
        animation: cartPulseHalloween 2.5s infinite ease-in-out;
        will-change: transform;
        transform: translateZ(0);
    }

    #floating-mobile-cart-btn i {
        font-size: 1.25rem !important;
        color: #ffffff !important;
    }

    #floating-mobile-cart-btn #cart-count-mobile {
        position: absolute !important;
        top: -4px !important;
        right: -4px !important;
        font-size: 0.72rem !important;
        font-weight: 900 !important;
        background: #ff0044 !important;
        color: #ffffff !important;
        border: 2px solid #0f172a !important;
        border-radius: 12px !important;
        min-width: 20px !important;
        height: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 4px !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
    }

    /* 6. Aceleración por hardware en animaciones */
    .halloween-ghost {
        filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.6)) !important;
        will-change: transform;
        transform: translateZ(0);
    }

    body.halloween-theme .video-overlay h2 {
        text-shadow: 0 0 10px #ff0044, 0 0 20px #ff6a00 !important;
    }
}