.advpc-carousel.custom-carousel {
    position: relative;
    padding-bottom: 40px !important;
    width: 100%;
    --advpc-arrow-color: #000;
    --advpc-pagination-color: #000;
    --advpc-pagination-inactive: #ccc;
}

.advpc-carousel .swiper-wrapper.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    /* WooCommerce themes (including Blocksy) often add their own grid/flex gap
       to .products. Swiper already implements spacing via spaceBetween, so any
       theme gap would be counted a second time and break slide positions. */
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    grid-template-columns: none !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
}

.advpc-carousel .swiper-slide {
    height: auto;
    display: flex;
    box-sizing: border-box;
}

/* The WooCommerce product <li> itself is now the Swiper slide. */
.advpc-carousel .swiper-slide.product {
    flex-shrink: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    /* Swiper writes the configured spaceBetween as an inline margin-right.
       Do not override margin-right here. */
}

.advpc-carousel .swiper-slide .entry-meta {
    margin-bottom: 20px;
}

.advpc-carousel .swiper-button-prev,
.advpc-carousel .swiper-button-next {
    color: var(--advpc-arrow-color);
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    transition: opacity .3s ease;
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
}

.advpc-carousel .swiper-button-prev:hover,
.advpc-carousel .swiper-button-next:hover {
    opacity: .7;
}

.advpc-carousel .swiper-pagination-bullet {
    background: var(--advpc-pagination-inactive);
    opacity: 1;
    transition: background .3s ease;
}

.advpc-carousel .swiper-pagination-bullet-active {
    background: var(--advpc-pagination-color);
}

.advpc-carousel.advpc-not-scrollable .advpc-prev,
.advpc-carousel.advpc-not-scrollable .advpc-next,
.advpc-carousel.advpc-not-scrollable .advpc-pagination {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .advpc-carousel *,
    .advpc-carousel *::before,
    .advpc-carousel *::after {
        scroll-behavior: auto !important;
    }
}