fostr-carousel-component,
fostr-nested-carousel-component {
    width: 100%;
    overflow: hidden;
    margin:auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    position: relative;
}

fostr-carousel-component fostr-slider-component,
fostr-nested-carousel-component fostr-nested-slider-component {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    padding-bottom: var(--spacing-base);
    /* margin-bottom: var(--spacing-xl); */
}

fostr-nested-carousel-component.no-slider fostr-nested-slider-component {
    width: 100%;
    left: 0;
}

@media (min-width: 767px) {
    fostr-carousel-component fostr-slider-component,
    fostr-nested-carousel-component fostr-nested-slider-component {
        -ms-overflow-style: none;
        scrollbar-width: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    fostr-carousel-component fostr-slider-component::-webkit-scrollbar {
        display: none;
    }
}

.quickbuy-shade-selector {
    width: 100%;
}


fostr-nested-carousel-component fostr-nested-slider-component {
    justify-content: flex-start;
    align-items: center;
    width: calc(100% - 64px);
    left: 32px;
    position: relative;
    padding-bottom: 0;
}

@media (min-width: 767px) {
    fostr-nested-carousel-component fostr-nested-slider-component {
        justify-content: center;
    }

    .trending-product-content fostr-nested-carousel-component fostr-nested-slider-component {
        justify-content: flex-start;
    }
}

fostr-nested-carousel-component fostr-nested-slider-component::-webkit-scrollbar {
    display: none;
}

fostr-carousel-component fostr-slide-component,
fostr-nested-carousel-component fostr-nested-slide-component {
    flex-shrink: 0;
    width: calc(100% - 2.4rem);
    position: relative;
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

@media (min-width: 600px) {
    fostr-carousel-component fostr-slide-component {
        width: calc(50% - 12px);
    }
}

@media (min-width: 1024px) {
    fostr-carousel-component fostr-slide-component {
        width: calc(33.33% - 8px);
    }
}

fostr-nested-carousel-component fostr-nested-slide-component {
    width: auto;
    border: none;
}

fostr-nested-carousel-component fostr-nested-slide-component .product-swatch {
    transform: none;
    margin: 0 10px 0 0;
}
fostr-nested-carousel-component fostr-nested-slide-component .product-swatch[disabled] {
    opacity: .4;
    pointer-events: none;
}

fostr-nested-carousel-component fostr-nested-slide-component:last-child .product-swatch {
    margin: 0;
}

fostr-carousel-component fostr-carousel-controls-component,
fostr-nested-carousel-component fostr-nested-carousel-controls-component {
    z-index: 1;
}

fostr-carousel-component slide-indicator,
fostr-nested-carousel-component slide-indicator {
    height: 10px;
    width: 10px;
    margin: 0 auto;
    border: 1px solid rgba(0,0,0,1);
    cursor: pointer;
    order:2;
    border-radius: 100%;
    display: none;
}

@media screen and (min-width: 750px) {
    fostr-carousel-component slide-indicator,
    fostr-nested-carousel-component slide-indicator {
        display: block;
    }
}

fostr-carousel-component slide-indicator:hover,
fostr-nested-carousel-component slide-indicator:hover {
    border: 1px solid rgba(0,0,0,0.5);
    background: rgba(0,0,0, 0.5);
}

fostr-carousel-component slide-indicator[data-current],
fostr-nested-carousel-component slide-indicator[data-current] {
    background-color: rgb(0,0,0);
}

fostr-carousel-component slide-button,
fostr-nested-carousel-component slide-button {
    height: 15px;
    width: var(--spacing-sm);
    padding: 5px;
    cursor: pointer;
    order:3;
    box-sizing: content-box;
    position: absolute;
    top: 50%;
    display: none;
    transform: translateY(-50%);
}

fostr-nested-carousel-component slide-button {
    height: var(--spacing-base);
    display: block;
}

@media (min-width: 767px) {
    fostr-carousel-component slide-button {
        display: block;
    }
}

fostr-carousel-component slide-button[data-next="true"] {
    right: 5px;
}

fostr-carousel-component slide-button[data-next="false"] {
    order:1;
    left: 5px;
}

fostr-nested-carousel-component slide-button[data-next="true"] {
    right: 0;
}

fostr-nested-carousel-component slide-button[data-next="false"] {
    order:1;
    left: 0;
}

@media (min-width: 1000px) {
    fostr-carousel-component slide-button[data-next="true"],
    fostr-nested-carousel-component slide-button[data-next="true"] {
        right: var(--spacing-xl);
    }
    
    fostr-carousel-component slide-button[data-next="false"],
    fostr-nested-carousel-component slide-button[data-next="false"] {
        left: var(--spacing-xl);
    }
}

fostr-carousel-component slide-button[data-next="false"]::after,
fostr-carousel-component slide-button[data-next="true"]::after,
fostr-nested-carousel-component slide-button[data-next="false"]::after,
fostr-nested-carousel-component slide-button[data-next="true"]::after {
    content: '';
    width: var(--spacing-sm);
    height: var(--spacing-sm);
    display: inline-block;
}

fostr-carousel-component slide-button[data-next="false"]::after,
fostr-nested-carousel-component slide-button[data-next="false"]::after  {
    background: var(--url-icon-arrow-left-long) no-repeat 0 0 / contain;
}

fostr-carousel-component slide-button[data-next="true"]::after,
fostr-nested-carousel-component slide-button[data-next="true"]::after {
    background: var(--url-icon-arrow-right-long) no-repeat 0 0 / contain;
}

fostr-carousel-component fostr-carousel-controls-component.large-arrows slide-button,
fostr-nested-carousel-component fostr-nested-carousel-controls-component.large-arrows slide-button {
    width: 43px;
}

fostr-carousel-component fostr-carousel-controls-component.large-arrows slide-button[data-next="false"]::after,
fostr-carousel-component fostr-carousel-controls-component.large-arrows slide-button[data-next="true"]::after,
fostr-nested-carousel-component fostr-nested-carousel-controls-component.large-arrows slide-button[data-next="false"]::after,
fostr-nested-carousel-component fostr-nested-carousel-controls-component.large-arrows slide-button[data-next="true"]::after {
    width: 43px;
}

fostr-carousel-component fostr-carousel-controls-component.large-arrows slide-button[data-next="false"]::after,
fostr-nested-carousel-component fostr-nested-carousel-controls-component.large-arrows slide-button[data-next="false"]::after {
    background: var(--url-icon-arrow-left-large) no-repeat 0 0 / contain;
}

fostr-carousel-component fostr-carousel-controls-component.large-arrows slide-button[data-next="true"]::after,
fostr-nested-carousel-component fostr-nested-carousel-controls-component.large-arrows slide-button[data-next="true"]::after {
    background: var(--url-icon-arrow-right-large) no-repeat 0 0 / contain;
}

fostr-nested-carousel-component.no-slider fostr-nested-carousel-controls-component {
    display: none;
}

.fostr-carousel-component-header-container {
    width: 100vw; 
    padding: 30px;
}

.fostr-carousel-component-media-text-container {
        position: absolute;
        width: 100%;
        max-width: 100%;
        padding: 30px;
    }

    .fostr-carousel-component-media-text-container h1, 
    .fostr-carousel-component-media-text-container h2,
    .fostr-carousel-component-media-text-container p {
        color: white;
        margin: 15px 0;
    }
    /* top-central, top-left, top-right, middle-central, middle-left, middle-right, bottom-central, bottom-left, bottom-right */

    .fostr-carousel-text-align-middle-central {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .fostr-carousel-text-align-middle-left {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .fostr-carousel-text-align-middle-right {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .fostr-carousel-text-align-top-central {
        top: 30px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .fostr-carousel-text-align-top-left {
        top: 30px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .fostr-carousel-text-align-top-right {
        top: 30px;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .fostr-carousel-text-align-bottom-central {
        bottom: 30px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .fostr-carousel-text-align-bottom-left {
        bottom: 30px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .fostr-carousel-text-align-bottom-right {
        bottom: 30px;
        left: 50%;
        transform: translate(-50%, 0);
    }



    @media screen and (min-width: 990px) {
         .fostr-carousel-component-media-container {
            /* height: {{section.settings.height}}; */
            width: 50vw; 
          
                padding-left: 15px;
                padding-top: 30px;
                padding-bottom: 30px; 
           
        }

        /* {% if section.settings.enable_padding %} */
             .fostr-carousel-component-media-container:first-of-type {
                padding-right: 15px;
                padding-bottom: 30px;
            }
        /* {% endif %} */

        .fostr-carousel-component-container {
            flex-direction: row;
        }

        .hide-on-mobile {
            display:block;
        }

        .fostr-carousel-component-media-text-container {
            position: absolute;
            width: calc(100%-60px);
            max-width: calc(100%-60px);
        }

        .fostr-carousel-text-align-middle-central {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .fostr-carousel-text-align-middle-left {
        top: 50%;
        left: 30px;
        transform: translate(0, -50%);
    }
    .fostr-carousel-text-align-middle-right {
        top: 50%;
        right: 30px;
        transform: translate(0, -50%);
    }

    .fostr-carousel-text-align-top-central {
        top: 30px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .fostr-carousel-text-align-top-left {
        top: 30px;
        left: 30px;
        transform: translate(0, 0);
    }
    .fostr-carousel-text-align-top-right {
        top: 30px;
        right: 30px;
        transform: translate(0, 0); 
    }

    .fostr-carousel-text-align-bottom-central {
        bottom: 30px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .fostr-carousel-text-align-bottom-left {
        bottom: 30px;
        left: 30px;
        transform: translate(0, 0);
    }
    .fostr-carousel-text-align-bottom-right {
        bottom: 30px;
        right: 30px;
    }
}