.crp45-carousel {
  --carousel-visible: var(--carousel-visible-mobile);
  clear: both;
  padding-block: var(--space-7) var(--space-8);
}

@media (min-width: 600px) {
  .crp45-carousel {
    --carousel-visible: var(--carousel-visible-tablet);
  }
}

@media (min-width: 1024px) {
  .crp45-carousel {
    --carousel-visible: var(--carousel-visible-desktop);
  }
}

.crp45-carousel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.crp45-carousel__head .crp45-section-title {
  margin-bottom: 0;
}

.crp45-carousel__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.crp45-carousel__controls--idle .crp45-carousel__button {
  display: none;
}

.crp45-carousel__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-size);
  height: var(--control-size);
  padding: 0;
  border: 1px solid var(--color-brand-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-brand-strong);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.crp45-carousel__button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crp45-carousel__button:hover:not([aria-disabled='true']),
.crp45-carousel__button:focus-visible {
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.crp45-carousel__button[aria-disabled='true'] {
  border-color: var(--color-line);
  color: var(--color-text-muted);
  cursor: default;
}

.crp45-carousel .crp45-carousel__track.products,
.crp45-carousel .crp45-carousel__track.products.columns-4 {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--carousel-gap);
  margin: 0;
  padding: 0 0 var(--space-3);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.crp45-carousel .crp45-carousel__track.products::-webkit-scrollbar {
  display: none;
}

.crp45-carousel .crp45-carousel__track.products li.product {
  flex: 0 0 calc((100% - (var(--carousel-visible) - 1) * var(--carousel-gap)) / var(--carousel-visible));
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  scroll-snap-align: start;
}