/* =================================================== ACOMODO LIMPIO DE HEADER EN MÓVIL =================================================== */ /* 1. Contenedor principal de la cabecera */ #Header, .header { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 10px 0 !important; } /* 2. Logo grande y centrado hasta arriba */ .header-logo, #Header .header-logo { order: 1 !important; float: none !important; width: 100% !important; margin: 0 auto 10px auto !important; text-align: center !important; } .header-logo img { max-width: 220px !important; height: auto !important; margin: 0 auto !important; display: block !important; } /* 3. Links de Log In / Join the Force en una sola línea horizontal */ .header-secondary, #Header .header-secondary { order: 2 !important; float: none !important; width: 100% !important; margin: 5px 0 12px 0 !important; text-align: center !important; font-size: 11px !important; } .header-secondary ul, .header-secondary div { display: inline-block !important; float: none !important; } .header-secondary a { color: #CCCCCC !important; text-transform: uppercase !important; font-weight: bold !important; padding: 0 5px !important; } /* 4. Buscador centrado abajo de los links */ #SearchForm, .header-search, #HeaderSearch { order: 3 !important; float: none !important; width: 90% !important; margin: 0 auto 10px auto !important; display: flex !important; justify-content: center !important; } #SearchForm input[type="text"], #search_query { width: 70% !important; background: #111111 !important; color: #FFFFFF !important; border: 1px solid #333333 !important; padding: 8px 10px !important; font-size: 12px !important; } #SearchForm input[type="submit"], #SearchForm button { width: 30% !important; background: #FFFF00 !important; color: #000000 !important; font-weight: bold !important; border: none !important; padding: 8px 5px !important; font-size: 11px !important; text-transform: uppercase !important; } /* 5. Carrito de compras discreto centrado o ajustado */ #cart-amount, .Cart { order: 4 !important; float: none !important; margin: 5px auto !important; }