.trending,
.bestsellers {
    --pt: 1rem;
    padding-top: var(--pt);
    background-color: var(--bg2);
}

.trending {
    --ml: 0;
    margin-left: var(--ml);
}

.bestsellers {
    --mr: 0;
    margin-right: var(--mr);
}

.trending .products.splide .splide__arrows,
.bestsellers .products.splide .splide__arrows {
    top: var(--pt);
}

div:has(+.block-ProductBannerBlock),
.block-ProductBannerBlock,
.block-ProductBannerBlock + div {
    scroll-margin-top: var(--header-height);
}

@media screen and (min-width: 768px) {
    .bestsellers {
        --mr: 10%;
    }
}

@media screen and (min-width: 768px) {
    .trending {
        --ml: 10%;
    }
}