@media (width < 1024px) {
 :root {
  --mobile-header-side-width: 88px;
 }

 header {
  position: relative;
  z-index: 1000;
 }

 header nav[aria-expanded='false'] {
  padding: 0 12px 10px;
 }

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

 /* dvh y no svh: svh es el viewport "pequeño" (barra de direcciones desplegada), así que en
    cuanto el navegador la retrae al hacer scroll la pantalla crece y el overlay —position:
    fixed— se queda corto: banda blanca al fondo y el final del menú recortado. dvh sigue al
    viewport real en ambos estados. */
 header .nav-wrapper.active,
 header .nav-wrapper:has(nav[aria-expanded='true']) {
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  overflow-x: hidden;
  z-index: 1000;

  .nav-links {
   display: flex;
   flex-direction: column;
   margin-top: 16px;

   /* Colchón para que el último enlace no quede debajo de la barra inferior del navegador
      ni de la gesture bar del sistema. */
   padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }

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

 header .nav-wrapper:has(.search-bar.is-open) .pre-header-container {
  display: none;
 }

 header .nav-wrapper.active nav .nav-hamburger button,
 header .nav-wrapper:has(nav[aria-expanded='true']) nav .nav-hamburger button {
  position: static;
 }

 header nav {
  position: relative;
  grid-template:
   'hamburger brand tools' var(--nav-height)
   'search search search' auto
   'sections sections sections' 1fr / var(--mobile-header-side-width) 1fr var(--mobile-header-side-width);
 }

 header nav .nav-brand {
  inset-inline: 0;
  position: absolute;
  top: calc(var(--nav-height) / 2);
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
 }

 header nav .nav-brand a {
  pointer-events: auto;
 }

 header nav[aria-expanded='false'] .nav-hamburger {
  width: var(--mobile-header-side-width);
 }

 header nav:has(.search-bar.is-open) {
  grid-template:
   'brand' var(--nav-height)
   'search' auto
   'sections' 1fr / 1fr;
 }

 header nav:has(.search-bar.is-open) .nav-hamburger,
 header nav:has(.search-bar.is-open) .nav-tools {
  display: none;
 }

 header nav:has(.search-bar.is-open) .nav-brand {
  display: flex;
  justify-content: center;
 }

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

  width: var(--mobile-header-side-width);
 }

 header nav .account-wrapper {
  position: absolute;
  left: 44px;
  top: calc((var(--nav-height) - 24px) / 2);
 }

 header nav[aria-expanded='true'] {
  /* width: 100%; */

  /* El alto real lo pone .nav-wrapper (100dvh); el <nav> solo lo rellena y hace de contenedor
     con scroll. Repetir 100svh aquí era lo que dejaba el panel en el viewport pequeño. */
  height: 100%;
  max-height: 100%;
 }

 header nav[aria-expanded='true']:has(.nav-sections .nav-drop[aria-expanded='true']) {
  grid-template:
   'hamburger hamburger' max-content
   'sections sections' minmax(0, 1fr);
 }

 header nav[aria-expanded='true']:has(.nav-sections .nav-drop[aria-expanded='true']) .nav-links {
  display: none;
 }

 header nav[aria-expanded='true'] .nav-tools {
  display: none;
 }

 header nav[aria-expanded='true'] .nav-brand {
  display: none;
 }

 .nav-links .account-register-login .account::before {
  content: none;
  display: none;
 }
}