:root {
    --header-height: 60px;        /* default header height */
    --cats-bar-height: 0px;       /* reserved space for categories */
  }
  
  /* Header stays pinned */
  header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    min-height: var(--header-height);
  }
  
  /* Categories bar pinned under header */
  #categoriesBar.categories {
    position: sticky;
    top: var(--header-height);
    z-index: 90;
    transition: transform 0.22s ease, opacity 0.18s ease;
  }
  
  /* Spacer ensures no content jump */
  #categoriesSpacer {
    height: var(--cats-bar-height);
  }
  
  /* Collapsed state (mobile only) */
  @media (max-width: 768px) {
    #categoriesBar.categories.collapsed {
      transform: translateY(-110%);
      opacity: 0;
      pointer-events: none;
    }
  }
  
  /* Toggle pill */
  .sections-toggle {
    display: none;
    position: sticky;
    top: calc(var(--header-height) + 6px);
    z-index: 95;
    margin: 6px auto 0;
    border: 1px solid #dfe9e3;
    background: #f2f6f4;
    color: #2a4e3c;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    gap: 8px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 12px rgba(0,0,0,.06);
    cursor: pointer;
  }
  
  .sections-toggle .icon {
    font-size: 16px;
    line-height: 1;
  }
  
  @media (max-width: 768px) {
    .sections-toggle {
      display: inline-flex;
    }
  }
  
  /* Visual state when categories are open */
  .sections-toggle[aria-expanded="true"] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }

/* Mobile: keep header always visible */
@media (max-width: 768px) {
  body.with-fixed-header {
    /* reserve space for the fixed header (fallback 56px) */
    padding-top: var(--header-h, 56px);
  }

  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    background: var(--header-bg, #fff);
    /* subtle separation while scrolling */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
}