/* One masthead in normal flow; its measured height also clears anchor targets. */
:root { --site-header-height: 220px; }
html { scroll-padding-top: calc(var(--site-header-height) + 16px); }
.premium-home .site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--card);
  backdrop-filter: none;
  box-shadow: none;
}
.premium-home .site-header.is-stuck { box-shadow: 0 3px 10px rgb(53 27 16 / 8%); }
.header-scroll-marker { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.premium-home .skip-link { z-index: 1001; }
.premium-home :is(main[id], main [id]) { scroll-margin-top: 0; }
.premium-home .shop-sidebar { top: calc(var(--site-header-height) + 16px); }

@media (min-width: 981px) {
  .premium-home .shop-sidebar {
    max-height: calc(100vh - var(--site-header-height) - 32px);
    max-height: calc(100dvh - var(--site-header-height) - 32px);
    overflow-y: auto;
  }
}

@media (max-width: 980px) {
  :root { --site-header-height: 188px; }
  .premium-home .nav-links {
    position: absolute;
    inset: 100% 0 auto;
    max-height: calc(100vh - var(--site-header-height));
    max-height: calc(100dvh - var(--site-header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--card);
    box-shadow: 0 3px 10px rgb(53 27 16 / 8%);
  }
}
@media (max-width: 640px) {
  :root { --site-header-height: 178px; }
  .premium-home .topbar {
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
  }
  .premium-home .topbar > span { flex: 1; min-width: 0; gap: 4px; line-height: 1.25; }
  .premium-home .topbar .icon { width: 16px; height: 16px; }
  .premium-home .topbar a { display: inline-flex; flex: 0 0 auto; min-height: 44px; gap: 4px; white-space: nowrap; }
  .premium-home .nav-row { gap: 6px; padding: 6px 16px; }
  .premium-home .site-header .brand { width: 112px; }
  .premium-home .search input { min-height: 44px; }
}