/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* Wrapper for the carousel */
.slider_wrapper {
    margin:0 3px; /* Center the carousel horizontally */
    width: 100%; /* Take up the full width of the parent */
    max-width: 100%; /* Prevent exceeding the parent's width */
    display: flex;
    position: relative;
    overflow: hidden; /* Ensure content stays inside */
    align-items: center; /* Vertically center carousel */
    justify-content: center; /* Center the carousel content */
    box-sizing: border-box; /* Include padding and border in width/height calculations */
  }
  

/* Navigation buttons */
.slider_wrapper i {
  top: 50%;
  height: 30px;
  width: 30px;
  color: #343F4F;
  cursor: pointer;
  font-size: 1.3rem;
  position: absolute;
  text-align: center;
  line-height: 30px;
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: transform 0.1s linear;
  z-index: 2;
}

.slider_wrapper i:active {
  transform: translateY(-50%) scale(0.9);
}

.slider_wrapper i:hover {
  background: #f2f2f2;
}

.slider_wrapper i:first-child {
  left: 5px; /* Positioned outside the carousel */
}

.slider_wrapper i:last-child {
  right: 5px; /* Positioned outside the carousel */
}

/* Carousel styles */
.slider_wrapper .carousel {
  display: flex;
  gap: 5px; /* Space between slides */
  width: 100%;
  scroll-behavior: smooth;
  background: #fff;
  overflow: hidden;
  justify-content: flex-start; /* Align items to the left */
  flex-wrap: nowrap; /* Prevent wrapping, keep slides in a row */
  transition: transform 0.3s ease; /* Smooth transition for sliding */
}
/* Slide container for each image */
.carousel .slide {
  flex: 0 0 auto; /* Prevent the slides from stretching */
  width: 15%; /* Adjust this for 3 slides per row on larger screens */
  min-width: 120px; /* Ensure the slide doesn't shrink below 150px */
  height: 120px; /* Fixed height for slides */
  position: relative;
  background: #ddd; /* Fallback background for testing */
  box-sizing: border-box;
}

/* Image styles */
.carousel .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

/* Caption styles */
.carousel .caption {
  width: 90%;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 8pt;
  text-transform: uppercase;
  border-radius: 4px;
  font-family: 'Roboto', 'Poppins', 'Inter', Arial, sans-serif; /* Best fonts for small pricing text */
}

/* Dragging state */
.carousel.dragging {
  cursor: grab;
  scroll-behavior: auto;
}

.carousel.dragging img {
  pointer-events: none;
}
.most_selling_slide .brand-sync.checkboxfilter {
    position: absolute;
    top: 8px;       /* distance from top */
    right: 8px;     /* distance from right */
    z-index: 2;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Responsive styles for smaller screens */
@media screen and (max-width: 1200px) {
  .carousel .slide {
    width: 15%; /* Three slides per row */
    height: 120px; /* Fixed height */
  }
  .slider_wrapper {
    width: calc(100vw - 10px); 
}
}

@media screen and (max-width: 900px) {
  .carousel .slide {
    width: calc(20% - 10px); /* Three slides per row */
    height: 120px; /* Fixed height */
  }
  .slider_wrapper {
    width: calc(100vw - 10px); 
}
}

@media screen and (max-width: 550px) { 
  .carousel .slide {
    width: calc(25% - 10px); /* Two slides per row */
    height: 120px; /* Adjust height */
  }
  .slider_wrapper {
    width: calc(100vw - 10px); 
}
}

@media screen and (max-width: 400px) {
  .carousel .slide {
    width: calc(25% - 10px); /* Three slides per row */
    height: 120px; /* Adjust height */
  }
  .slider_wrapper {
    width: calc(100vw - 10px); 
}
}

@media screen and (max-width: 375px) {
  .carousel .slide {
    width: calc(25% - 10px); /* Three slides per row */
    min-width: 120px; /* Reduced minimum width */
    height: 120px; /* Adjust height */
  }
  .slider_wrapper {
    width: calc(100vw - 10px); 
}
}