@media (width >= 1024px) {
 header nav .nav-tools-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
  box-shadow: inset 0 -.3rem 0 0 transparent;
  transition: box-shadow .2s ease;
  cursor:pointer
 }

 header nav .nav-sections {
  display: block;
  visibility: visible;
 }

 header nav[aria-expanded='true'] .nav-sections {
  align-self: unset;
 }

 header nav .nav-tools {
  --nav-tools-gap: 20px;

  height: 100%;
 }

 header .pre-header-container {
  display: block;
 }

 /* hamburger */
 header nav .nav-hamburger {
  display: none;
  visibility: hidden;
 }

 header nav .nav-search {
  display: block;
 }

 header nav {
  box-sizing: border-box;
  display: grid;
  grid-template:
    'brand search tools' 88px
    'sections sections sections' auto / auto minmax(360px, 560px) auto;
  align-items: center;
  gap: 0 24px;
  /* max-width: 1360px; */
  width: 100%;
  padding: 0 40px !important;
  grid-template-columns: 1fr 4fr 7fr;
 }

 /* Este reset neutraliza el estado abierto del móvil por si el <nav> llega a desktop con
    aria-expanded="true". El cierre real lo hace ulta-header.js al cruzar el breakpoint; esto
    solo acota el frame intermedio. Faltaba height: sin él el nav se quedaba en 100svh (lo pone
    common.css junto a min-height) y el header, que es position: fixed, tapaba la página. */
 header nav[aria-expanded='true'] {
  height: auto;
  min-height: 0;
  overflow: visible;
 }

 header nav .nav-brand {
  justify-self: start;
 }

 header nav .nav-brand img {
  max-width: 96px;
 }

 header nav .nav-tool-label {
  display: inline;
  color: var(--color-neutral-black, #000);
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
 }

 header nav .nav-tools-wrapper:hover,
 header nav .nav-tools-wrapper:has(.nav-tool-action:hover) {
  box-shadow: inset 0 -.3rem 0 0 var(--color-neutral-black, #000);
 }

 header nav .account-wrapper {
  position: static;
  height: 100%;
 }

 /* PreHeader fallback if re-enabled */
 .pre-header-container {
  div:has(ul) {
   justify-content: flex-end;
  }

  ul {
   list-style: none;
   display: flex;
   column-gap: 28px;
   padding: 0;

   li,
   a {
    color: #ffffff;
    font: var(--type-details-caption-1-font);
    letter-spacing: var(--type-button-2-letter-spacing);
   }
  }

  .columns-2-cols {
   max-width: 1440px;
   padding: 0 40px;
   margin: 0 auto;
   box-sizing: border-box;

   > div {
    --pre-header-container-links-display: flex;

    justify-content: space-between;
   }
  }
 }

  .only-mobile {
    display: none;
  }
}

/* Escritorio angosto: entre el menú hamburguesa (1024px) y ~1340px la barra de
   categorías no cabe y se corta. El tope sale de medir: con los estilos originales
   a 1300px faltan 16px y a 1340px ya sobran 9, así que ahí está el borde real.

   En esa franja recortamos el aire entre buscador, favoritos, bolsa y cuenta, de
   26px a 12px: 42px de vuelta para las categorías. Arriba de 1340px sobra espacio
   y el espaciado se queda como estaba.

   No bajar de 12px: los iconos miden 24px y más juntos dejan de leerse como
   controles distintos. */
@media (width >= 1024px) and (width <= 1340px) {
 header nav .nav-tools {
  --nav-tools-gap: 12px;
 }
}