/* ==========================================================================
   All products page (/products/). Reuses .page-head, .product-grid and the
   product card from catalog.css; only the jump chips and section heads are new.
   ========================================================================== */

/* ---------- Category jump chips (wrap on small screens, never scroll the page) ---------- */
.cat-jump { margin-top: 20px; }
.cat-jump-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); max-width: 100%;
  padding: 8px 8px 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg);
  color: var(--navy); font-size: .9375rem; font-weight: 500; text-decoration: none; line-height: 1.3;
  transition: border-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.cat-chip:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.cat-chip:focus-visible { outline: none; border-color: var(--brand-blue); box-shadow: var(--focus-ring); }
.cat-chip-name { min-width: 0; }
/* Phones: one horizontally scrolling row (scroll stays inside the row; the page never scrolls sideways). */
@media (max-width: 719px) {
  .cat-jump { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .cat-jump-list {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    padding: 4px var(--gutter) 10px; scroll-padding-inline: var(--gutter); scrollbar-width: thin;
  }
  .cat-jump-list li { flex-shrink: 0; scroll-snap-align: start; }
  .cat-chip { white-space: nowrap; }
}
.cat-chip-count {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px;
  border-radius: 999px; background: var(--brand-blue-tint); color: var(--brand-blue); font-size: .8125rem; font-weight: 600;
}

/* ---------- Category sections ---------- */
.all-cat + .all-cat { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--border); }
@media (min-width: 960px) { .all-cat + .all-cat { margin-top: 64px; padding-top: 56px; } }

.all-cat-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 20px; }
.all-cat-title { margin: 0; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); scroll-margin-top: 8px; }
.all-cat-count { color: var(--muted); font-size: .9375rem; }
.all-cat-link {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap);
  font-weight: 500; font-size: .9375rem; text-decoration: none;
}
.all-cat-link:hover { text-decoration: underline; }
.all-cat-link svg { stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--ease); }
.all-cat-link:hover svg { transform: translateX(3px); }
@media (max-width: 559px) { .all-cat-link { margin-left: 0; flex-basis: 100%; } }

.all-cat-top { margin: 16px 0 0; text-align: right; }
.all-cat-top a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: .875rem; font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .all-cat-link:hover svg { transform: none; }
}