/* =========================================================
   Beauty Blog Widgets — Carousel (flush-left + right peek)
   ========================================================= */

/* Base Swiper box */
.bbw-posts.carousel .swiper,
.bbw-posts.carousel .swiper-container {
  width: 100%;
  overflow: hidden; /* contained by default */
}

/* Let Swiper manage spacing; don't set CSS gap here */
.bbw-posts.carousel .swiper-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box;
}

/* Fixed slide width */
.bbw-posts.carousel .swiper-slide {
  flex: 0 0 430px !important;
  width: 430px !important;
  height: auto;
}
.bbw-posts.carousel .swiper-slide > * { width: 100%; }

/* Card images */
.bbw-posts.carousel .car-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

/* Navigation (scoped) */
.bbw-posts.carousel .swiper-button-prev,
.bbw-posts.carousel .swiper-button-next {
  position: unset;
  border: 1px solid #000;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
}

.bbw-posts.carousel .swiper-button-next:after, .bbw-posts.carousel .swiper-button-prev:after {
  display: none;
}

.bbw-posts.carousel .swiper-button-next { margin-left: 5px; }

.bbw-posts.carousel .bbw-car-navs {
  display: flex;
  justify-content: flex-end;
      margin-top: 70px;
}

.bbw-posts.carousel.has-peek { --peek: 80px; }

.bbw-posts.carousel.has-peek .swiper,
.bbw-posts.carousel.has-peek .swiper-container {
  overflow: visible !important;          /* allow the peek */
  margin-right: calc(-1 * var(--peek));  /* extend track right */
  padding-right: var(--peek);            /* keep content readable */
  margin-left: 0 !important;             /* keep left edge flush */
  padding-left: 0 !important;
  -webkit-clip-path: inset(0 -9999px 0 0);
          clip-path: inset(0 -9999px 0 0);
}

/* Keep controls visually aligned with the container edge */
.bbw-posts.carousel.has-peek .swiper-pagination,
.bbw-posts.carousel.has-peek .swiper-button-prev,
.bbw-posts.carousel.has-peek .swiper-button-next {
  transform: translateX(var(--peek));
}

.bbw-posts.carousel .bbw-pill {
  display:inline-block;
  padding: 8px 14px;
  font-size:20px;
  line-height:1;
  color:#fff;
  background:#C65FA9; /* default; customize via nth-child or global tokens */
  height: max-content;
  margin-top: 20px;
}
 
.bbw-posts.carousel .car-title a {
  font-size: 24px;
  color: #000;
  font-weight: 500px;
}

:root {
  --cp-pill-1: #ff6b6b;
  --cp-pill-2: #ffb86c;
  --cp-pill-3: #f8e16c;
  --cp-pill-4: #6cff9b;
  --cp-pill-5: #6ccaff;
  --cp-pill-6: #d76cff;
}

.bbw-posts.carousel .swiper-slide:nth-child(6n+1) .bbw-pill { background-color: var(--cp-pill-1); }
.bbw-posts.carousel .swiper-slide:nth-child(6n+2) .bbw-pill { background-color: var(--cp-pill-2); }
.bbw-posts.carousel .swiper-slide:nth-child(6n+3) .bbw-pill { background-color: var(--cp-pill-3); }
.bbw-posts.carousel .swiper-slide:nth-child(6n+4) .bbw-pill { background-color: var(--cp-pill-4); }
.bbw-posts.carousel .swiper-slide:nth-child(6n+5) .bbw-pill { background-color: var(--cp-pill-5); }
.bbw-posts.carousel .swiper-slide:nth-child(6n+6) .bbw-pill { background-color: var(--cp-pill-6); }

body .bbw-posts.carousel .swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev {
  display: flex !important;
}

@media (max-width: 991px) {
  .bbw-posts.carousel .swiper-slide {
      flex: 0 0 327px !important;
      width: 327px !important;
  }

  .bbw-posts.carousel .bbw-pill {
    font-size: 14px;
    padding: 5px 12px;
    margin-top: 8px;
  }

  .bbw-posts.carousel .car-title a {
    font-size: 18px;
  }

  .bbw-posts.carousel .bbw-car-navs {
    margin-top: 30px;
  }

}

@media (max-width: 767px) {
  .bbw-posts.carousel .swiper-slide {
      flex: 0 0 185px !important;
      width: 185px !important;
  }

  .bbw-posts.carousel .car-title a {
    font-size: 14px;
  }

  .bbw-posts.carousel .bbw-car-navs {
    margin-top: 20px;
  }
}