.category-slider {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid #222;
  background: #000; /* черный фон */
}

.category-slider::-webkit-scrollbar {
  display: none; /* скрыть полосу прокрутки */
}

.category {
  flex: 0 0 auto;
  text-decoration: none;
  background: #111;
  border: 1px solid #b80331;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 600;
  color: #b80331;
  white-space: nowrap;
  scroll-snap-align: start;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.category.active,
.category:hover {
  background: #b80331;
  color: #fff;
}