/* category_chips — a list's categories as a row of chips: «All», then each category with its count. */

.catalog-cats {
  position: sticky;
  top: var(--header-sticky-h, 0px);
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.2rem;
}

.catalog-cats .container { position: relative; }

.catalog-cats .chip { flex: none; white-space: nowrap; }

@media (max-width: 560px) {
  .catalog-cats { position: static; }
}

/* The row: one line that scrolls sideways when it does not fit. */
.catalog-cats__row {
  display: flex; gap: .5rem;
  padding: .8rem 0;
  overflow-x: auto; scrollbar-width: none;
  scroll-behavior: smooth;
}

.catalog-cats__row::-webkit-scrollbar { display: none; }

/* ‹ › — only while there is somewhere to scroll, fading into the ground. */
.catalog-cats__scroll {
  position: absolute; top: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center;
  width: 3.2rem; padding: 0; border: 0;
  color: var(--ink); font-size: 1.3rem; line-height: 1;
  cursor: pointer;
}

.catalog-cats__scroll--left { left: 24px; justify-content: flex-start; background: linear-gradient(to right, var(--bg) 45%, transparent); }

.catalog-cats__scroll--right { right: 24px; justify-content: flex-end; background: linear-gradient(to left, var(--bg) 45%, transparent); }

.catalog-cats__scroll:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: -2px; }

/* A category with nothing in it under the chosen filters. */
.chip.is-disabled { opacity: .45; cursor: default; pointer-events: none; }