/**
 * CITYCOND — слайдер «Бестселлеры CITYCOND» (только главная витрины CityCond).
 * Карточки — тот же partial product-card.phtml; здесь только механика ленты:
 * обрезка по горизонтали, раскладка 1 / 2 / 4 карточки, стрелки.
 * Цвета и тени — переменные темы из cc.css, собственных значений нет.
 */
.cc-bs__viewport {
  /* Именно overflow: hidden, не clip-path — clip-path прячет карточки визуально, но
     уехавшая лента остаётся в scrollable overflow и рождает горизонтальную прокрутку
     страницы (проверено живьём: docScrollWidth 2345 при окне 500).
     Вертикальный padding оставляет место подъёму и тени карточки при наведении
     (translateY(-5px) и --shadow-card). */
  overflow: hidden;
  padding: 6px 0 22px;
}
.cc-bs__track {
  display: flex;
  gap: 1rem;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.cc-bs__track > .cc-product-card {
  flex: 0 0 100%;
  min-width: 0;
}
@media (min-width: 640px) {
  .cc-bs__track > .cc-product-card { flex-basis: calc((100% - 1rem) / 2); }
}
@media (min-width: 1280px) {
  .cc-bs__track > .cc-product-card { flex-basis: calc((100% - 3rem) / 4); }
}
.cc-bs-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  transition: transform .3s, border-color .3s, color .3s, box-shadow .3s;
}
.cc-bs-arrow:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.cc-bs-arrow:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring);
}
.cc-bs-arrow[disabled] {
  opacity: .4;
  pointer-events: none;
}
/* «Назад» — та же иконка arrow-right, развёрнутая: cc-icons.php шевронов не содержит,
   а утилиты -rotate-180 в сборке cc.css нет. */
.cc-bs-arrow--prev svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .cc-bs__track { transition: none; }
  .cc-bs-arrow { transition: none; }
}