.fairvilla-carousel-wrapper {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    /* Dark rounded panel — matches the site's original carousel section (#333, 10px radius). */
    background: #333;
    border-radius: 10px;
    padding: 12px;
}

.fairvilla-carousel-container {
    overflow: hidden;
    /* Reserve space BELOW the slides (inside the swiper box) for the pagination dots,
       so they sit under the artwork instead of overlapping it. */
    padding-bottom: 34px;
}

.fairvilla-carousel-container .swiper-slide {
    width: 235px;
    flex-shrink: 0;
}

.fairvilla-carousel-container .swiper-slide a {
    display: block;
    text-decoration: none;
}

.fairvilla-carousel-container .swiper-slide img {
    display: block;
    width: 235px;
    height: 330px;
    object-fit: cover;
}

.fairvilla-carousel-container .swiper-button-prev,
.fairvilla-carousel-container .swiper-button-next {
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* Center on the 330px slide row (not the padded box, which is taller). */
    top: 165px;
    margin-top: -20px;
}

.fairvilla-carousel-container .swiper-button-prev::after,
.fairvilla-carousel-container .swiper-button-next::after {
    font-size: 16px;
}

.fairvilla-carousel-container .swiper-pagination {
    /* Sit inside the container's 34px bottom padding, clearly below the slides. */
    bottom: 6px !important;
}

/* Bullet colors come from the inline --swiper-pagination-* vars set by the shortcode
   (active = active_dot_color, inactive = inactive_dot_color). Just tune opacity so the
   inactive dots read on the dark panel. */
.fairvilla-carousel-container .swiper-pagination-bullet {
    opacity: 0.6;
}

.fairvilla-carousel-container .swiper-pagination-bullet-active {
    opacity: 1;
}