/* Keep the existing category design; constrain the grid tracks, not just its shell. */
[data-header-category-menu] .nav-category-main-list,
[data-header-category-menu] .nav-category-subarea,
[data-header-category-menu] .nav-category-subpanel {
  min-height: 0;
}

[data-header-category-menu] .nav-category-main-list {
  overflow-x: hidden;
  overflow-y: scroll;
}

[data-header-category-menu] .nav-category-main-list,
[data-header-category-menu] .nav-category-subpanel {
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 761px) {
  [data-header-category-menu] .nav-category-browser-layout {
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    height: min(466px, calc(100vh - 264px));
    max-height: min(466px, calc(100vh - 264px));
  }

  [data-header-category-menu] .nav-category-main-list,
  [data-header-category-menu] .nav-category-subpanel {
    max-height: 100%;
  }
}

/* The tablet navigation already has its own scroll viewport. Fit inside it. */
@media (min-width: 768px) and (max-width: 1024px) {
  [data-header-category-menu] .nav-category-browser-layout {
    height: min(466px, calc(min(62vh, 560px) - 112px));
    max-height: min(466px, calc(min(62vh, 560px) - 112px));
  }
}

@media (min-width: 761px) and (max-width: 767px) {
  [data-header-category-menu] .nav-category-browser-layout {
    height: min(466px, calc(65vh - 116px));
    max-height: min(466px, calc(65vh - 116px));
  }
}

@media (max-width: 760px) {
  [data-header-category-menu] .nav-category-browser-layout {
    grid-template-rows: minmax(0, min(250px, 55%)) minmax(0, 1fr);
    height: min(560px, calc(65vh - 116px));
    max-height: none;
  }

  [data-header-category-menu] .nav-category-main-list,
  [data-header-category-menu] .nav-category-subpanel {
    max-height: 100%;
  }
}

@media (max-width: 430px) {
  [data-header-category-menu] .nav-category-browser-layout {
    grid-template-rows: minmax(0, min(230px, 55%)) minmax(0, 1fr);
    height: min(540px, calc(65vh - 116px));
  }
}

[data-header-category-menu] .nav-category-main-list::-webkit-scrollbar,
[data-header-category-menu] .nav-category-subpanel::-webkit-scrollbar {
  width: 8px;
}

[data-header-category-menu] .nav-category-main-list::-webkit-scrollbar-track,
[data-header-category-menu] .nav-category-subpanel::-webkit-scrollbar-track {
  background: #f0eeea;
}

[data-header-category-menu] .nav-category-main-list::-webkit-scrollbar-thumb,
[data-header-category-menu] .nav-category-subpanel::-webkit-scrollbar-thumb {
  border: 2px solid #f0eeea;
  border-radius: 8px;
  background: #8b9198;
}