.floating-header {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  padding: 16px;
  overflow: hidden;
  background: var(--header-bg);
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}

.category-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Full-bleed like .product-grid / .basket-suggestions: .floating-header pads
     16px, which clips the tab strip 16px short of the screen edge. Cancel that
     with negative side margins so the tabs scroll all the way to the header
     edge (where .floating-header's overflow:hidden + rounded corners clip them
     cleanly), then re-add 16px inside so the first/last tab keeps its gutter. */
  margin: 0 -16px;
  padding: 0 16px;
}

.category-tabs::-webkit-scrollbar {
  display: none;
}

.category-tab {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--tab-tint-10);
  border: 1.5px solid var(--tab-tint-10);
  /* --text-on-header (#C9D5FF) on --header-bg is Lc −62 (Content Text) for 16px
     nav. Was #B6C5FF = Lc −53 (Large only). See maga-shared/apca-contrast. */
  color: var(--text-on-header);
  font-size: var(--font-nav);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease,
    transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.category-tab:active {
  transform: scale(0.96);
}

.category-tab:not(.active):hover {
  background: var(--tab-tint-18);
  border-color: var(--tab-tint-25);
}

.category-tab.active {
  background: var(--accent);
  color: var(--text-on-accent);
}