.review-carousel {
  max-width: 100%;
  padding: 60px;
  background: var(--white-color);
}

/* Titelbalk */
.review-carousel .section-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

/* Wrapper met pijlen + track */
.review-carousel .carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Track + items */
.review-carousel .carousel-track {
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}
.review-carousel .carousel-track::-webkit-scrollbar {
  display: none;
}

/* Horizontale rij items */
.review-carousel .product-items {
  display: flex;
  gap: 20px;
  scroll-snap-type: x mandatory;
  width: fit-content;
  align-items: stretch;
}

/* Elke individuele slide */
.review-carousel .product-item {
  flex: 0 0 auto;
  width: 420px;
  scroll-snap-align: start;
  cursor: grab;
  display: flex;
  flex-direction: column;
}

/* De review card binnenin */
.review-carousel .review-card {
  background: var(--white-color);
  border-radius: 12px;
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* Teksten in de kaart */
.review-carousel .review-text {
  font-size: 1rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.review-carousel .review-author {
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.review-carousel .review-rating {
  color: var(--primary-color);
}

/* Drag styling */
.review-carousel .carousel-track.dragging {
  cursor: grabbing;
  user-select: none !important;
}

/* Navigatiepijlen */
.review-carousel .carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  background-color: var(--primary-color, #f4b32d);
  color: var(--secondary-color, #ffffff);
  height: 50px;
  width: 50px;
  margin: 0;
  border-radius: 30px;
  cursor: pointer;
  transform: translateY(-50%);
}

.review-carousel .carousel-arrow-prev {
  left: 0;
}

.review-carousel .carousel-arrow-next {
  right: 0;
}

/* Responsief */
@media (max-width: 768px) {
  .review-carousel .product-item {
    width: 80%;
  }

  .review-carousel .carousel-arrow {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
}