.BfAlgoliaCollectionCarousel {
    position: relative;
    width: 100%;
    overflow: visible;
}

.BfAlgoliaCollectionCarousel__loader[hidden] {
    display:none!important;
}
.BfAlgoliaCollectionCarousel__loader {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.BfAlgoliaCollectionCarousel__loader__inner {
    width: 36px;
    height: 36px;
    border: 3px solid #e0e0e0;
    border-top-color: #363636;
    border-radius: 50%;
    animation: bfacc-spin 0.7s linear infinite;
}

@keyframes bfacc-spin {
    to { transform: rotate(360deg); }
}

.BfAlgoliaCollectionCarousel__empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #999;
    font-size: 14px;
    width: 100%;
    margin: 0;
}

/* Clip happens on the track so arrows (inside .splide) are not cut off */
.BfAlgoliaCollectionCarousel .splide {
    overflow: visible;
    position: relative;
}

/* Ensure arrows are shown and slides fill height (previously provided by BfSlider.css) */
.BfAlgoliaCollectionCarousel .splide__arrows {
    display: block;
}

.BfAlgoliaCollectionCarousel .splide__slide {
    height: unset !important;
}

.BfAlgoliaCollectionCarousel .splide__track {
    overflow: hidden;
}

.BfAlgoliaCollectionCarousel .splide__list {
    display: flex;
    align-items: stretch;
}

.BfAlgoliaCollectionCarousel .splide__slide {
    display: flex;
    flex-shrink: 0;
    padding: 0;
}

.BfAlgoliaCollectionCarousel .splide__slide > * {
    width: 100%;
}

/* Flush card style — remove white tile borders to match homepage carousels */
.BfAlgoliaCollectionCarousel .BfProduct-card {
    --card-padding: 0px;
    --card-border: none;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    max-width: none;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.BfAlgoliaCollectionCarousel .BfProduct-card .BfProduct-card__image img.__primary {
    object-fit: cover !important;
}

/* Arrows stay in their natural DOM position inside .splide__arrows → .splide.
 * .splide is position:relative so they resolve against it (same visual as before). */
.BfAlgoliaCollectionCarousel .splide__arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background: white;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 3px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 1;
}

.BfAlgoliaCollectionCarousel .splide__arrow:disabled {
    display: none;
}

.BfAlgoliaCollectionCarousel .splide__arrow--prev { left:  50px; }
.BfAlgoliaCollectionCarousel .splide__arrow--next { right: 50px; }

.BfAlgoliaCollectionCarousel .splide__arrow svg {
    width: 14px;
    height: 14px;
    fill: #333;
}

/* Mobile: hide nav arrows entirely — rely on swipe + autoplay auto-swap */
@media (max-width: 767px) {
    .BfAlgoliaCollectionCarousel .splide__arrow,
    .BfAlgoliaCollectionCarousel .splide__arrows {
        display: none !important;
    }
}