/* Let the shared header sit over the first hero on Home and category detail pages. */
:is(.home-page, .category-detail-page) {
  --integrated-header-height: 76px;
}

:is(.home-page, .category-detail-page) .site-header {
  position: fixed;
  inset: 0 0 auto;
  height: var(--integrated-header-height);
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color .24s ease, border-color .24s ease, box-shadow .24s ease;
}

:is(.home-page, .category-detail-page) .site-header.is-scrolled {
  background: rgb(255 255 255 / .78);
  border-bottom-color: rgb(148 163 184 / .2);
  box-shadow: 0 8px 28px rgb(15 23 42 / .08);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

[data-theme="dark"] :is(.home-page, .category-detail-page) .site-header.is-scrolled {
  background: rgb(15 23 42 / .78);
  border-bottom-color: rgb(152 185 255 / .12);
  box-shadow: 0 8px 28px rgb(0 0 0 / .2);
}

.category-detail-page .directory-page--category {
  padding-top: calc(var(--integrated-header-height) + var(--category-main-top-space, clamp(1.25rem, 3vw, 2.5rem)));
}

@media (width < 1025px) {
  :is(.home-page, .category-detail-page) { --integrated-header-height: 68px; }
}

@media (max-width: 768px) {
  .category-detail-page { --category-main-top-space: 1rem; }
}

@media (max-width: 480px) {
  :is(.home-page, .category-detail-page) { --integrated-header-height: 64px; }
}