.fstore-carousel {
  --carousel-gap: 20px;
  --carousel-card-basis: var(--carousel-desktop-basis, calc((100% - (var(--carousel-gap) * 5)) / 6));
  position: relative;
}

.fstore-carousel__viewport {
  overflow: hidden;
  touch-action: pan-y;
}

.fstore-carousel__track {
  display: flex;
  gap: var(--carousel-gap);
  transition: transform 420ms ease;
  will-change: transform;
}

.fstore-carousel__track > * {
  flex: 0 0 var(--carousel-card-basis);
  min-width: 0;
}

.fstore-carousel__controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.fstore-carousel__control {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-ink);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.fstore-carousel__control:hover,
.fstore-carousel__control:focus {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-white);
}

.fstore-carousel__control:disabled {
  cursor: default;
  opacity: 0.38;
}

.fstore-carousel.is-static .fstore-carousel__controls {
  display: none;
}

@media (max-width: 920px) {
  .fstore-carousel {
    --carousel-card-basis: var(--carousel-tablet-basis, calc((100% - var(--carousel-gap)) / 2));
  }
}

@media (max-width: 640px) {
  .fstore-carousel {
    --carousel-gap: 14px;
    --carousel-card-basis: var(--carousel-mobile-basis, 100%);
  }
}