/* Dependencies */
.featured-collection-custom {
    padding: 80px 5%;
}

.featured-collection-custom .page-width {
    padding: 0;
    max-width: unset !important;
}

.featured-collection-custom .card__bottom-actions {
    margin: 0 !important;
    line-height: 0;
    height: 0;
}

.featured-collection-custom-slider {
    position: relative;
    display: block;
}

.featured-collection-new .collection__description>* {
    margin: 0;
}

.featured-collection-new__title {
    text-align: center;
    font-family: Celias;
    font-size: 32px;
    font-style: normal;
    line-height: 38px;
    text-transform: capitalize;
}

.featured-collection-new .collection__view-all a:not(.link) {
    margin-block-start: 48px;
}

/* Slider related styles (preserved but might need JS updates for full breakpoint support) */
.featured-collection-new .splide__list {
    flex-wrap: nowrap;
}

/* Custom Grid Implementation */
.featured-collection-new .featured-collection-grid {
    display: grid;
    gap: 48px 8px;
    padding: 0;
    list-style: none;
}

/* Slider Active Override - Critical for correct slider display */
/* Using the new class added by JS */
.featured-collection-new .featured-collection-grid.is-slider-active {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
}

.featured-collection-new .featured-collection-grid.is-slider-active .splide__slide {
    width: auto;
    max-width: none;
    flex-shrink: 0;
}

/* Common overrides to ensure grid works */
.featured-collection-new .featured-collection-grid .grid__item {
    width: 100%;
    max-width: 100%;
}

/* Apply padding: 0 only when NOT in slider mode (Grid mode) */
.featured-collection-new .featured-collection-grid:not(.is-slider-active) .grid__item {
    padding: 0;
}

/* Desktop (Default) >= 1280px */
.featured-collection-new .featured-collection-grid {
    grid-template-columns: repeat(var(--desktop-cols, 4), 1fr);
}

.featured-collection-new .collection__title {
    margin-block-end: 48px;
}

.featured-collection-new .splide__list:not(.slider--desktop) {
    flex-wrap: wrap;
}

.splide[data-desktop-slider="false"] {
    visibility: unset;
}

.splide[data-desktop-slider="false"] .slider-buttons {
    display: none;
}

.featured-collection-new .slider--desktop {
    scroll-padding-left: var(--page-padding);
}

/* Tablet (768px - 1279px) */
@media screen and (max-width: 1279px) {
    .featured-collection-new .featured-collection-grid {
        grid-template-columns: repeat(var(--tablet-cols, 3), 1fr);
        gap: 32px 8px;
    }

    .featured-collection-custom {
        padding: 64px 5%;
    }

    .featured-collection-new .collection__title {
        margin-block-end: 32px;
    }

    .featured-collection-new__title {
        font-size: 28px;
        line-height: 32px;
    }

    .featured-collection-new .collection__view-all a:not(.link) {
        margin-block-start: 32px;
    }
}

/* Mobile < 768px */
@media screen and (max-width: 767px) {
    .featured-collection-new .featured-collection-grid {
        grid-template-columns: repeat(var(--mobile-cols, 2), 1fr);
        gap: 28px 8px;
    }

    .featured-collection-custom {
        padding: 48px 5% 64px;
    }

    .featured-collection-new .collection__view-all a:not(.link) {
        margin-block-start: 28px;
    }

    .featured-collection-new .slider.slider--tablet {
        margin-block-end: 15px;
    }

    .featured-collection-new .grid__item:only-child {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .featured-collection-new .splide__list:not(.slider--mobile) {
        flex-wrap: wrap;
    }

    .featured-collection-new .slider-buttons {
        display: none;
    }

    .splide[data-mobile-slider="false"] {
        visibility: unset;
    }

    /* Slider full width styles on mobile */
    .slider-mobile--full {
        padding-inline: 0 !important;
    }

    .slider--full {
        padding-inline: 0 !important;
        margin-inline: 0 !important;
        scroll-padding-left: 0;
        scroll-padding-right: 0;
    }

    .slider--full .slider__slide,
    .slider--full .grid__item {
        padding-inline: 0;
    }

    .slider--full.slider--mobile .slider__slide,
    .slider--full.slider--mobile .grid__item {
        width: calc((100% - (33.3% / var(--mobile-cols))) / var(--mobile-cols)) !important;
        flex-grow: 1;
    }

    .slider--full .card .card__content {
        padding: 0 8%;
    }

    .slider--full .card__bottom-actions {
        padding: 0 8%;
    }

    .slider--full .global-product-card-border-shadow,
    .slider--full .card__media {
        border-radius: 0 !important;
    }
}

/* Arrow buttons */
.featured-collection-new .product-card-wrapper .placeholder svg {
    width: 100%;
}

.featured-collection-new .featured-control__arrow-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    background-color: rgba(var(--color-page-background));
    box-shadow: 0 5px 5px rgb(0 0 0 / 10%);
    transition: transform 0.3s;
    border: none;
}

.featured-collection-new .featured-control__arrow-button svg {
    width: 12.5px;
    height: 12.5px;
}

.featured-collection-new .featured-control__arrow-button[name="previous"] {
    position: absolute;
    inset-inline-start: 42px;
    inset-block-start: 50%;
    transform: rotate(90deg);
    box-shadow: 5px 0 5px rgb(0 0 0 / 10%);
}

.featured-collection-new .featured-control__arrow-button[name="previous"]:hover {
    transform: scale(1.12) rotate(90deg);
}

.featured-collection-new .featured-control__arrow-button[name="next"] {
    position: absolute;
    inset-inline-end: 46px;
    inset-block-start: 50%;
    transform: rotate(-90deg);
    box-shadow: -5px 0 5px rgb(0 0 0 / 10%);
}

.featured-collection-new .featured-control__arrow-button[name="next"]:hover {
    transform: scale(1.12) rotate(-90deg);
}

.featured-collection-new .featured-control__arrow-button:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

.featured-collection__mb-view-all {
    position: relative;
    display: block;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--color-text), 0.05);
    border-radius: var(--product-card-border-radius);
}

.featured-collection__mb-view-all .mb-view-all__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    position: relative;
    background-color: rgb(var(--color-button-background));
    color: rgb(var(--color-button-text));
    transform: rotate(-90deg);
}

.featured-collection__mb-view-all .mb-view-all__text {
    margin-block-start: 16px;
    text-align: center;
    color: rgb(var(--color-text));
}