.category-carousel {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  margin-block: 0 25px;
}
.carousel-arrow {
  width: 36px;
  min-width: 36px;
  height: 44px;
  font-size: 14px;
  border: 1px solid var(--line);
}
.carousel-arrow:disabled { opacity: .3; cursor: default; }
:dir(rtl) .carousel-arrow i { transform: scaleX(-1); }
.catalog-categories {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--brand) transparent;
  padding: 8px 4px 12px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-overflow-scrolling: touch;
}
.catalog-categories.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.catalog-categories .category-card { cursor: inherit; }
.category-card img { -webkit-user-drag: none; }
.category-card {
  position: relative;
  flex: 0 0 104px;
  height: 106px;
  padding: 7px 6px 25px;
  border: 1.5px solid transparent;
  border-radius: 40% 30% 38% 30% / 42% 35% 45% 34%;
  background: #fff;
  box-shadow: 0 4px 10px #24b2b31a;
  scroll-snap-align: start;
  transition: border-color .15s, background-color .15s;
}
.category-card img { width: 100%; height: 72px; object-fit: contain; }
.category-card span {
  position: absolute;
  inset-inline: -1px;
  bottom: -1px;
  min-height: 27px;
  display: grid;
  place-items: center;
  padding: 5px 3px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--brand-text);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.15;
  font-weight: 600;
}
.category-card[aria-pressed=true] { background: #e3fcfc; border-color: #24b2b3; }
.category-card[aria-pressed=true] span { background: var(--brand-text); color: #fff; }
.category-card:hover { border-color: #24b2b3; }
.category-card:focus-visible { outline-offset: 2px; }
@media (max-width: 760px) {
  .category-carousel { grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 4px; }
  .carousel-arrow { width: 28px; min-width: 28px; font-size: 12px; }
  .catalog-categories { gap: 10px; }
  .category-card { flex-basis: 94px; height: 98px; }
  .category-card img { height: 64px; }
  .category-card span { font-size: 10px; }
}