.most-sold-products-widget {
    margin: 1.5rem 0;
}

.most-sold-products-widget .title {
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

/* Arrows live in side gutters outside the clipped track so they never cover cards */
.msp-carousel {
    position: relative;
    padding: 0 44px 2.5rem;
}

.msp-most-sold-swiper {
    position: relative;
    height: auto;
}

/* Equal-height cards: slides stretch to the tallest one.
   Theme styles.css gives every .swiper-slide a white background, centred 18px text and centred flex items. */
.msp-most-sold-swiper > .swiper-wrapper > .swiper-slide {
    height: auto;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    background: transparent;
    text-align: left;
    font-size: inherit;
    box-sizing: border-box;
}

/* Theme sets .item-box { width: auto !important }, which shrinks cards to their content inside the flex slide */
.most-sold-products-widget .swiper-slide > .item-box {
    float: none;
    margin: 0 !important;
    flex: 1 1 100%;
    width: 100% !important;
    min-width: 0;
    height: auto;
}

.most-sold-products-widget .swiper-slide > .item-box > .product-item {
    height: 100%;
}

.msp-carousel > .msp-carousel__prev,
.msp-carousel > .msp-carousel__next {
    top: calc(50% - 1.25rem);
    width: 36px;
    height: 36px;
    margin-top: -18px;
    border-radius: 999px;
    background: var(--sep-card, #FFFFFF);
    border: 1px solid var(--sep-border, #E3E7EE);
    color: var(--sep-ink, #22293A);
}

.msp-carousel > .msp-carousel__prev {
    left: 0;
}

.msp-carousel > .msp-carousel__next {
    right: 0;
}

.msp-carousel > .msp-carousel__prev::after,
.msp-carousel > .msp-carousel__next::after {
    font-size: 14px;
    font-weight: 700;
}

.msp-carousel > .msp-carousel__prev.swiper-button-disabled,
.msp-carousel > .msp-carousel__next.swiper-button-disabled {
    opacity: .35;
}

.msp-carousel > .msp-carousel__pagination {
    bottom: 0.5rem;
}

.msp-carousel > .msp-carousel__pagination .swiper-pagination-bullet {
    padding: 0;
    background: var(--sep-border-strong, #d5dae3);
    opacity: 1;
}

.msp-carousel > .msp-carousel__pagination .swiper-pagination-bullet-active {
    background: var(--sep-ink, #22293A);
}

@media (max-width: 575px) {
    .msp-carousel {
        padding-left: 0;
        padding-right: 0;
    }

    .msp-carousel > .msp-carousel__prev,
    .msp-carousel > .msp-carousel__next {
        display: none;
    }
}