/* Feonix — shared category-nav pill tabs.
 *
 * Single source of truth for the filter-bar pills used by the treatments page
 * (treatments.html) and the conditions page (conditions.html) so the two stay
 * visually identical and never drift. Loaded via an explicit <link> on those
 * two pages only — deliberately NOT in the global head so it can't restyle the
 * unrelated .filter-btn usages on blog.html / for-her.html.
 *
 * Layout wrappers that legitimately differ per page (.filter-bar sticky offset,
 * .filter-search) stay in each page's own CSS. Only the pill component lives
 * here: .filter-btns spacing + .filter-btn states.
 *
 * Brand: cream/bordered inactive, rose-gold gradient filled active state.
 */

.filter-btns {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; scrollbar-width: none; flex: 1; padding: 14px 0;
}
.filter-btns::-webkit-scrollbar { display: none; }

.filter-btn {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mid); background: var(--cream); cursor: pointer;
  padding: 10px 18px; white-space: nowrap;
  border: 1px solid var(--border); border-radius: 999px;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.filter-btn:hover { color: var(--rg-dark); background: var(--white); border-color: var(--rg-mid); }
.filter-btn.active {
  color: #fff;
  background: linear-gradient(135deg, var(--rg-mid), var(--rg-dark));
  border-color: var(--rg-dark);
  box-shadow: 0 4px 14px rgba(136,80,48,0.22);
}

/* July Offers pill (treatments only) — accent hint while inactive; shares the
   filled gradient when active. Inert on conditions, which has no offers tab. */
.filter-btn-offers { color: var(--rg-dark); border-color: var(--rg-light); }
.filter-btn-offers:hover { border-color: var(--rg-mid); }

@media (max-width: 768px) {
  .filter-btn {
    padding: 11px 16px; font-size: 10px; letter-spacing: 0.08em;
    display: inline-flex; align-items: center; min-height: 44px; /* MOBILE-TAP-48 */
    white-space: nowrap; flex-shrink: 0;
  }
  .filter-btn.active {
    color: #fff;
    background: linear-gradient(135deg, var(--rg-mid), var(--rg-dark));
    border-color: var(--rg-dark);
  }
}