.products-page {
  scroll-margin-top: 100px;
}

.products-page__tabs {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  background: var(--color-mist);
  border-radius: 999px;
  margin-bottom: 48px;
}

.products-page__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.products-page__tab.is-active {
  background: var(--color-white);
  color: var(--color-navy);
  box-shadow: var(--shadow-card);
}

.products-page__category {
  margin-top: 72px;
}

.products-page__category:first-of-type {
  margin-top: 0;
}

.products-page__category-title {
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-navy);
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 2px solid rgba(23, 47, 86, 0.15);
}

.products-page__group {
  margin-top: 56px;
}

.products-page__group:first-of-type {
  margin-top: 40px;
}

.products-page__category-title + .products-page__group {
  margin-top: 32px;
}

.products-page__group-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 24px;
  /* Deep-links from Home's "What We Make" land here via #anchor — the fixed
     92px header would otherwise cover the top of the heading when the
     browser (or scrollIntoView) jumps straight to it. */
  scroll-margin-top: 112px;
}

.products-page__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
}

@media (max-width: 1400px) {
  .products-page__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1000px) {
  .products-page__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 720px) {
  /* Previously this scrolled horizontally, which pushed "Outdoor" fully off
     screen with nothing to indicate it was there. Instead the row now spans
     the container and the tabs share the space, shrinking to fit rather than
     overflowing — and wrapping to a second line only if a screen is too
     narrow for even that. */
  .products-page__tabs {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 4px;
  }

  .products-page__tab {
    flex: 1 1 auto;
    justify-content: center;
    padding: 11px 12px;
    font-size: 0.84rem;
    gap: 6px;
  }

  .products-page__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .products-page__tab {
    padding: 11px 8px;
    font-size: 0.82rem;
  }
}

@media (max-width: 480px) {
  .products-page__grid {
    grid-template-columns: 1fr;
  }
}