/* v0.12 · 10-hdr1 — reglas nuevas de este frente (se cargan después de theme.css; al final se pegan a theme.css en este orden). */

/* Franja superior: espaciado de letras del wireframe en escritorio (en celular sigue en -.01em) */
@media (min-width:782px){.emx-topbar p{letter-spacing:.02em}}

/* Header de escritorio: grilla 1fr / 460 / 1fr para que el buscador quede centrado en la página; cuenta y carrito a 6px */
@media (min-width:1000px){
	.emx-hdr .emx-hdr-row{display:grid;grid-template-columns:1fr minmax(0,460px) 1fr}
	.emx-hdr-row > .emx-logo{justify-self:start}
	.emx-hdr-row > .emx-hdr-icons{justify-self:end;gap:6px}
	/* Línea entre la franja azul y el menú de categorías */
	.emx-nav-row{border-top:1px solid var(--line)}
}

/* Foco con teclado sobre la franja azul: anillo blanco (el azul oscuro casi no se ve sobre #2695D1).
   Lo que va sobre blanco (sugerencias y buscador abierto del celular) conserva el anillo azul oscuro */
.emx-hdr-main :focus-visible,.emx-hdr-main a:focus-visible,.emx-burger:focus-visible{outline-color:#fff}
.emx-hdr-main .emx-spop :focus-visible,.emx-hdr-main .emx-spop a:focus-visible{outline-color:var(--sky-deep)}

/* Celular y tablet: la barra azul se queda en 60px aunque se abra la lupa; el buscador va debajo, en una franja blanca */
@media (max-width:999px){
	.emx-hdr .emx-hdr-row{grid-template-rows:60px auto;row-gap:0}
	.emx-hdr > .emx-hdr-main{border-bottom:1px solid var(--line)}
	.emx-hdr.is-search-open > .emx-hdr-main{background-image:linear-gradient(transparent 60px,#fff 0)}
	.emx-hdr-row > .emx-search{max-width:none;margin:0;padding-bottom:12px}
	.emx-hdr-row > .emx-search .emx-sfield{border-color:var(--gray);box-shadow:none}
	.emx-hdr-row > .emx-search .emx-sfield:focus-within{border-color:var(--ink);box-shadow:none}
	.emx-hdr-row > .emx-search :focus-visible,.emx-hdr-row > .emx-search a:focus-visible{outline-color:var(--sky-deep)}
	/* ☰ 8px dentro del margen lateral, como en el celular del wireframe (a 768 el margen es de 30px) */
	.emx-hdr > .emx-nav-row{padding-left:calc(var(--wp--style--root--padding-left,16px) - 8px)!important}
}
/* Celulares de menos de 360px: el logo se achica a 150px para no montarse sobre el ☰ (a 320 empezaba en x=43, dentro de su área de toque) */
@media (max-width:359px){.emx-logo-svg,.emx-logo-img{width:min(var(--emx-logo-wm,169px),150px)}}

/* Menú de categorías entre 1000 y 1099px: la lista de "Sonido" se abre hacia la izquierda para no salirse de la pantalla */
@media (min-width:1000px) and (max-width:1099px){.emx-dnav > li.emx-dd:nth-last-child(-n+2) .emx-dd-panel{left:auto;right:0}}

/* Panel "Computadores usados": títulos en 20px (escala del wireframe), chips de DEALS Black oscuros al pasar el mouse,
   "Ver todos…" de las tarjetas sin subrayado y "Ver todos los computadores usados" alineado con la retícula de 1120px */
.emx-mc-h{font-size:20px}
.emx-mcol.black .emx-mchips a:hover{background:var(--ink);border-color:var(--muted);color:#fff}
.emx-mcol .all:hover{text-decoration:none}
.emx-mega-all{max-width:1120px}
.emx-mega-all .all{text-underline-offset:auto}

/* Menú ☰: flecha que gira con transición, "Ver todos" de las tarjetas pegados a los chips,
   "Ingresar" con el ícono relleno en tinta y "Hablar con un asesor" con borde de 2px */
.emx-acc-btn .chev{transition:transform .2s}
/* Interlineado del cajón: 1.45, el del wireframe (theme.css usa 1.5 y cada fila quedaba 0,8px más alta) */
.emx-drawer,.emx-dr-nav > li > a,.emx-acc-btn,.emx-acc-panel ul a{line-height:1.45}
.emx-mc-all{padding-top:0}
/* "Ingresar" va como renglón de la lista (.emx-dr-acct) y "Hablar con un asesor" como enlace celestial de 16/700, subrayado,
   centrado y de 44px de alto, sin ícono ni borde (dueño, 10 nov 2026) */
.emx-dr-help{justify-items:center}
.emx-dr-help .emx-menu-asesor{display:inline-flex;align-items:center;min-height:44px;margin-inline:auto;padding:8px 4px;font-size:16px;font-weight:700;line-height:1.45;color:var(--wp--preset--color--celestial,#2695D1);text-decoration:underline;text-underline-offset:3px}
.emx-dr-help .emx-menu-asesor:hover{color:var(--wp--preset--color--tinta,#212427)}