@media (max-width: 47.999rem) {
  .header-inner {
    position: relative;
    align-items: center;
    flex-direction: row;
    padding-block: 0.45rem;
  }

  .menu-toggle:not([hidden]) {
    display: inline-flex;
  }

  .site-header:not(.nav-enhanced) .header-inner {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .site-header:not(.nav-enhanced) .primary-nav {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .site-header:not(.nav-enhanced) .primary-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-enhanced .primary-nav {
    position: absolute;
    z-index: var(--z-menu);
    top: calc(100% + var(--space-2));
    right: max(var(--container-gutter), env(safe-area-inset-right, 0px));
    left: max(var(--container-gutter), env(safe-area-inset-left, 0px));
    display: grid;
    width: auto;
    max-width: none;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: rgba(255, 255, 255, 0.99);
    box-shadow: var(--shadow-menu);
    justify-content: flex-start;
    gap: var(--space-1);
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-0.625rem) scale(0.985);
    transform-origin: top right;
    visibility: hidden;
    transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
  }

  .nav-enhanced.is-menu-open .primary-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    visibility: visible;
  }

  .nav-enhanced .primary-nav a {
    width: 100%;
    justify-content: flex-start;
    padding-inline: var(--space-3);
  }

  .nav-enhanced .primary-nav a[aria-current="page"]::after {
    top: 0.55rem;
    right: auto;
    bottom: 0.55rem;
    left: 0.25rem;
    width: 0.125rem;
    height: auto;
  }

  .header-category-inner {
    padding-inline: 0;
  }

  .header-category-nav {
    justify-content: flex-start;
    padding-inline: max(1rem, env(safe-area-inset-left, 0px));
  }
}

@media (max-width: 24rem) {
  .brand {
    font-size: 0.92rem;
  }

  .nav-enhanced .primary-nav a {
    min-height: 2.625rem;
    padding-inline: 0.5rem;
    font-size: 0.875rem;
  }
}

@media (min-width: 80rem) {
  :root {
    --container-width: 90rem;
  }
}

@media (min-width: 120rem) {
  :root {
    --container-width: 96rem;
  }
}

@media (max-height: 31rem) and (orientation: landscape) {
  :root {
    --header-height: 4rem;
  }

  .page-inner {
    padding-block: var(--space-4);
  }
}