/* <----- STICKY NAVIGATION: behavior only; existing colors, sizes and spacing remain unchanged -----> */
/* Keep the department shortcuts visually in the same header area after separating them structurally. */
.site-header { border-bottom: 0; }
.quick-bar { background: #fff; border-bottom: 1px solid var(--line); }

/* Desktop/tablet: only the logo, search, and categories/menu row remains on screen. */
@media (min-width: 681px) {
  .site-header { position: sticky; top: 0; z-index: 30; }
  html { scroll-padding-top: 112px; }
}

/* Phone: the header scrolls normally, while subcategory navigation stays above the grid. */
@media (max-width: 680px) {
  #departments > .subcategory-nav {
    position: sticky;
    top: 0;
    z-index: 9;
    background: var(--paper);
  }
}