/* ElectroPC · El encabezado, con el lenguaje del rediseño.
 *
 * Solo estilos: el marcado es del tema y tiene JavaScript colgado —el buscador
 * de FiboSearch, el cajón del carrito, el menú de celular, el interruptor de
 * tema—. Tocar el HTML rompería todo eso; acá se le cambia la piel y nada más.
 *
 * Se aplica **únicamente** bajo `body.eph-alt`, o sea dentro de la vista
 * previa. Un cliente sigue viendo el encabezado de siempre.
 *
 * `--mn-panel` es el unico opaco a proposito: la barra puede ser translucida
 * porque atras solo pasa la pagina al hacer scroll, pero el mega menu se abre
 * arriba del hero y con transparencia se leia el titulo por detras de los 47
 * enlaces.
 *
 * Los colores salen de tokens propios porque el encabezado vive fuera de
 * `.eph-home` y de `.epa`, donde están los de cada pantalla. Se declaran para
 * los dos modos siguiendo el interruptor del tema, que es `data-theme`.
 */

body.eph-alt{
  --mn-fondo:rgba(11,15,26,.88);
  --mn-borde:#253149;
  --mn-tinta:#E9EEF6;
  --mn-texto:#A2B0C6;
  --mn-azul:#3B82F6;
  --mn-campo:#151D35;
  --mn-panel:#0D1424;
  --mn-hover:rgba(255,255,255,.06);
}
[data-theme="light"] body.eph-alt,
body.eph-alt[data-theme="light"]{
  --mn-fondo:rgba(255,255,255,.94);
  --mn-borde:#E2E8F0;
  --mn-tinta:#0F172A;
  --mn-texto:#475569;
  --mn-campo:#F1F5F9;
  --mn-panel:#FFFFFF;
  --mn-hover:rgba(15,23,42,.05);
}

/* ── La barra de arriba ──
   Sin sombra: una línea de un píxel separa igual y no ensucia el borde del
   hero, que arranca justo debajo. */
body.eph-alt .site-header{
  background:var(--mn-fondo);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--mn-borde);
  box-shadow:none}
body.eph-alt .header-top{border:0;box-shadow:none;background:transparent}
body.eph-alt .header-top__inner{gap:1.2rem;padding-block:.7rem}

/* ── El buscador ──
   Es el mismo campo que los del catálogo: mismo radio, mismo borde, y un anillo
   azul al enfocar. Hoy era el único control del sitio con otra forma.

   Los selectores van largos a propósito. FiboSearch trae los suyos con cuatro
   clases y una hoja *inline* —`.dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp
   input[type="search"].dgwt-wcas-search-input`—, que pesa más que un
   `.header-search input` y deja el campo blanco sobre el encabezado oscuro.
   Se le gana por peso y no con `!important`, que después no hay cómo pisar. */
body.eph-alt .header-search .dgwt-wcas-search-wrapp{max-width:none}
body.eph-alt .header-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp{
  background:transparent;border:0;box-shadow:none}
body.eph-alt .header-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input,
body.eph-alt .header-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:hover,
body.eph-alt .header-search input[type="search"]{
  height:2.75rem;
  background:var(--mn-campo);
  border:1px solid var(--mn-borde);
  border-radius:999px;
  color:var(--mn-tinta);
  font-size:1rem;
  padding-inline:2.6rem 1rem;
  box-shadow:none;
  transition:border-color .15s var(--ep-suave,ease),box-shadow .15s var(--ep-suave,ease)}
body.eph-alt .header-search input[type="search"]::placeholder{color:var(--mn-texto);opacity:1}
body.eph-alt .header-search .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus{
  outline:none;
  background:var(--mn-campo);
  border-color:var(--mn-azul);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mn-azul) 22%,transparent)}

/* La lupa vive adentro del campo y tiene que leerse sobre el fondo nuevo. */
body.eph-alt .header-search .dgwt-wcas-search-submit,
body.eph-alt .header-search .dgwt-wcas-search-submit:hover{
  background:transparent;border:0;color:var(--mn-texto)}
body.eph-alt .header-search .dgwt-wcas-ico-magnifier{fill:var(--mn-texto)}
body.eph-alt .header-search .dgwt-wcas-preloader,
body.eph-alt .header-search .dgwt-wcas-close{background:transparent}

/* ── Los botones de la derecha ──
   Redondos, del mismo tamaño, y con un fondo al pasar por encima: hoy no tenían
   ningún estado y no se sabía que eran botones hasta hacer clic. */
body.eph-alt .header-actions{gap:.3rem}
body.eph-alt .header-actions__btn,
body.eph-alt .header-actions > a{
  width:2.5rem;height:2.5rem;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;
  color:var(--mn-texto);
  background:transparent;border:0;
  transition:background .15s var(--ep-suave,ease),color .15s var(--ep-suave,ease)}
body.eph-alt .header-actions__btn:hover,
body.eph-alt .header-actions > a:hover{background:var(--mn-hover);color:var(--mn-tinta)}
body.eph-alt .header-actions__btn:focus-visible,
body.eph-alt .header-actions > a:focus-visible{
  outline:2px solid var(--mn-azul);outline-offset:2px}

/* "Mi cuenta" con texto es más ancho que el resto: se le deja su ancho. */
body.eph-alt .header-actions a[href*="mi-cuenta"],
body.eph-alt .header-actions a[href*="my-account"]{
  width:auto;gap:.4rem;padding-inline:.7rem;font-size:.875rem;font-weight:600}

/* El contador del carrito: chico, redondo y sobre el ícono. */
body.eph-alt .header-actions__cart-count{
  background:var(--mn-azul);color:#fff;
  min-width:1.15rem;height:1.15rem;line-height:1.15rem;
  font-size:.75rem;font-weight:600;border-radius:999px;
  border:2px solid var(--mn-fondo)}
body.eph-alt .header-actions__cart-count.is-empty{display:none}

/* ── La fila del menú ──
   Ojo con el alcance: adentro de esta fila cuelga el mega menú de "Ver todo",
   que son 47 enlaces de 11 y 12px. Un `.header-nav a` los agarra a todos y les
   pone el tamaño y el espaciado de una pestaña —el panel pasó de entrar en
   pantalla a medir 653px—. Por eso se apunta al hijo directo de la píldora. */
body.eph-alt .header-nav{border-top:1px solid var(--mn-borde);background:transparent}

/* Los ítems ya son píldoras (`.nav-pill`), que es la misma forma que usan los
   filtros del catálogo nuevo. No hay que reemplazarlas por otra cosa: alcanza
   con darles los colores del rediseño y un estado activo que se lea.

   El primer intento las cambiaba por un subrayado y les sacaba el relleno
   horizontal; quedaban seis palabras apretadas contra el borde. */
body.eph-alt .nav-pill{
  color:var(--mn-texto);
  border:1px solid transparent;
  font-size:.875rem;font-weight:600;
  transition:background .15s var(--ep-suave,ease),color .15s var(--ep-suave,ease),border-color .15s var(--ep-suave,ease)}
body.eph-alt .nav-pill:hover{
  color:var(--mn-tinta);
  background:var(--mn-hover);
  border-color:var(--mn-borde)}

/* Activo y desplegado abierto comparten estado: el azul del rediseño en vez
   del gris translúcido, que casi no se distinguía del hover. */
body.eph-alt .nav-pills__item.is-active .nav-pill,
body.eph-alt .nav-pill.is-active,
body.eph-alt .nav-pill--dropdown[aria-expanded="true"]{
  color:var(--mn-azul);
  background:color-mix(in srgb,var(--mn-azul) 13%,transparent);
  border-color:color-mix(in srgb,var(--mn-azul) 32%,transparent)}

/* El logo de ASUS es de la marca y no se le tocan los colores. */
body.eph-alt .nav-pill--asus,
body.eph-alt .nav-pill--asus:hover{color:#111;font-weight:400}

/* ── El mega menú ──
   Sus tamaños son suyos y no se tocan: entran 47 destinos en una pantalla y
   cualquier cosa más grande los deja afuera. Lo que se cambia es la piel —el
   borde, el radio y la sombra del resto del rediseño— y sobre todo que un
   enlace se ilumine al pasar, que hoy no pasaba nada. */
body.eph-alt .mega-dropdown{
  background:var(--mn-panel);
  border:1px solid var(--mn-borde);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(2,6,23,.45)}
body.eph-alt .mega-dropdown__header{border-bottom:1px solid var(--mn-borde)}
body.eph-alt .mega-col > a{color:var(--mn-tinta);letter-spacing:0}
body.eph-alt .mega-col__subs > li > a,
body.eph-alt .mega-col__subsubs > li > a{
  color:var(--mn-texto);border-radius:8px;
  transition:background .12s var(--ep-suave,ease),color .12s var(--ep-suave,ease)}
body.eph-alt .mega-col__subs > li > a:hover,
body.eph-alt .mega-col__subsubs > li > a:hover{
  background:var(--mn-hover);color:var(--mn-tinta)}

/* -- El logo en celular --
   El tema lo baja de 38 a 30px debajo de 768px de ancho, y deja 19px entre el
   logo, la lupa y los iconos: en un telefono de 375px el logo tenia 6px para
   crecer. Aca se achican esos espacios y el logo vuelve a la altura de
   escritorio, fija: no cambia al scrollear, porque un logo que cambia de tamaño
   corre los iconos justo cuando se los va a tocar.
   El alto sale del ancho libre: la pantalla menos los iconos, la lupa y los
   margenes (245px), dividido por la proporcion del logo (3,37). En un telefono
   angosto se achica solo en vez de empujar los iconos fuera de la barra. */
@media (max-width:768px){
  body.eph-alt .header-top__inner{gap:8px}
  body.eph-alt .site-branding img{height:clamp(26px,calc((100vw - 245px) / 3.37),38px)}
}

/* -- Ofertas, fuera del menu --
   La categoria no tiene ningun producto publicado: el link llevaba a una
   pagina vacia. Vuelve sacando esta regla cuando haya ofertas cargadas. */
body.eph-alt .site-header a[href*="/categoria/ofertas"],
body.eph-alt .mobile-nav a[href*="/categoria/ofertas"]{display:none}

/* -- Arriba del menu: WhatsApp y el local --
   El pie del tema sube entero (assets/menu-alt.js): la linea que lo separaba
   de la lista pasa de arriba a abajo. */
body.eph-alt .mobile-nav .mobile-nav__footer.eph-arriba{border-top:0;border-bottom:1px solid var(--mn-borde)}
body.eph-alt .mobile-nav .eph-menu-local{margin-top:.85rem;display:grid;gap:.45rem;font-size:14px;line-height:1.45;color:var(--mn-texto)}
body.eph-alt .mobile-nav .eph-menu-local p{display:flex;align-items:flex-start;gap:.5rem;margin:0}
body.eph-alt .mobile-nav .eph-menu-local svg{flex:none;width:16px;height:16px;margin-top:1px;color:var(--mn-azul)}
body.eph-alt .mobile-nav .eph-menu-local a{justify-self:start;font-weight:600;color:var(--mn-azul);text-decoration:none}