/* =========================================================
   BEAUTY BY TMY
   FEATURE BANNER SLIDER
   ========================================================= */


.beauty-feature-slider {

    position:
        relative;

    display:
        block;

    width:
        100%;

    min-height:
        var(
            --feature-slider-min-height,
            460px
        );

    overflow:
        hidden;

    background:
        #f7eeee;

}


/* =========================================================
   TRACK
   ========================================================= */


.beauty-feature-slider__track {

    position:
        relative;

    display:
        block;

    width:
        100%;

    min-height:
        var(
            --feature-slider-min-height,
            460px
        );

}


/* =========================================================
   SLIDES
   ========================================================= */


.beauty-feature-slide {

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    display:
        flex;

    align-items:
        stretch;

    width:
        100%;

    min-height:
        var(
            --feature-slider-min-height,
            460px
        );

    overflow:
        hidden;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateX(30px);

    transition:
        opacity 0.45s ease,
        transform 0.45s ease,
        visibility 0s linear 0.45s;

}


.beauty-feature-slide.is-active {

    z-index:
        2;

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateX(0);

    transition:
        opacity 0.45s ease,
        transform 0.45s ease,
        visibility 0s linear 0s;

}


/* =========================================================
   BACKGROUND
   ========================================================= */


.beauty-feature-slide__background {

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    background-image:
        linear-gradient(
            var(
                --feature-banner-overlay,
                rgba(
                    244,
                    202,
                    211,
                    0.58
                )
            ),
            var(
                --feature-banner-overlay,
                rgba(
                    244,
                    202,
                    211,
                    0.58
                )
            )
        ),
        var(
            --feature-banner-background
        );

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

}


/* =========================================================
   CONTENT
   ========================================================= */


.beauty-feature-slide__content {

    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    width:
        52%;

    min-width:
        0;

    min-height:
        inherit;

    padding:
        58px 5vw;

    color:
        var(
            --feature-banner-text,
            #171313
        );

}


/* =========================================================
   HEADING
   ========================================================= */


.beauty-feature-slide__content h2 {

    max-width:
        520px;

    margin:
        0;

    color:
        var(
            --feature-banner-text,
            #171313
        );

    font-family:
        var(
            --feature-banner-heading-font,
            Georgia,
            "Times New Roman",
            serif
        );

    font-size:
        clamp(
            42px,
            5.3vw,
            72px
        );

    font-weight:
        400;

    line-height:
        0.94;

    letter-spacing:
        -0.045em;

}


/* =========================================================
   DESCRIPTION
   ========================================================= */


.beauty-feature-slide__content p {

    max-width:
        390px;

    margin:
        20px 0 0;

    color:
        var(
            --feature-banner-text,
            #171313
        );

    font-family:
        var(
            --feature-banner-body-font,
            Arial,
            Helvetica,
            sans-serif
        );

    font-size:
        17px;

    line-height:
        1.45;

}


/* =========================================================
   BUTTON
   ========================================================= */


.beauty-feature-slide__button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    min-height:
        48px;

    margin-top:
        24px;

    padding:
        0 24px;

    background:
        var(
            --feature-banner-button-background,
            #df2166
        );

    color:
        var(
            --feature-banner-button-text,
            #ffffff
        );

    border:
        1px solid
        var(
            --feature-banner-button-border,
            #df2166
        );

    border-radius:
        999px;

    font-family:
        var(
            --feature-banner-body-font,
            Arial,
            Helvetica,
            sans-serif
        );

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.08em;

    line-height:
        1;

    text-decoration:
        none;

    text-transform:
        uppercase;

}


.beauty-feature-slide__arrow {

    font-size:
        17px;

    line-height:
        1;

}


/* =========================================================
   FOREGROUND IMAGE
   ========================================================= */


.beauty-feature-slide__person {

    position:
        absolute;

    z-index:
        2;

    left:
        var(
            --feature-banner-person-x,
            82%
        );

    bottom:
        0;

    display:
        block;

    width:
        var(
            --feature-banner-person-width,
            48%
        );

    max-width:
        none;

    max-height:
        100%;

    object-fit:
        contain;

    object-position:
        center bottom;

    transform:
        translateX(-50%);

    pointer-events:
        none;

    user-select:
        none;

}


/* =========================================================
   INDICATORS
   ========================================================= */


.beauty-feature-slider__indicators {

    position:
        absolute;

    z-index:
        100;

    left:
        50%;

    bottom:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    transform:
        translateX(-50%);

    pointer-events:
        auto;

}


.beauty-feature-slider__indicator {

    position:
        relative;

    z-index:
        101;

    display:
        block;

    width:
        9px;

    height:
        9px;

    min-width:
        9px;

    min-height:
        9px;

    margin:
        0;

    padding:
        0;

    appearance:
        none;

    -webkit-appearance:
        none;

    background:
        var(
            --feature-slider-indicator,
            rgba(
                255,
                255,
                255,
                0.65
            )
        );

    border:
        1px solid
        rgba(
            23,
            19,
            19,
            0.2
        );

    border-radius:
        50%;

    cursor:
        pointer;

    pointer-events:
        auto;

    transition:
        width 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;

}


.beauty-feature-slider__indicator.is-active {

    width:
        24px;

    background:
        var(
            --feature-slider-indicator-active,
            #df2166
        );

    border-color:
        var(
            --feature-slider-indicator-active,
            #df2166
        );

    border-radius:
        999px;

}


/* =========================================================
   MOBILE
   ========================================================= */


@media (max-width: 767px) {

    .beauty-feature-slider {

        min-height:
            300px;

    }


    .beauty-feature-slider__track {

        min-height:
            300px;

    }


    .beauty-feature-slide {

        min-height:
            300px;

    }


    .beauty-feature-slide__content {

        width:
            58%;

        min-height:
            300px;

        padding:
            30px 10px 42px 20px;

    }


    .beauty-feature-slide__content h2 {

        max-width:
            250px;

        font-size:
            clamp(
                29px,
                8.5vw,
                42px
            );

    }


    .beauty-feature-slide__content p {

        max-width:
            190px;

        margin-top:
            12px;

        font-size:
            12px;

        line-height:
            1.35;

    }


    .beauty-feature-slide__button {

        min-height:
            38px;

        margin-top:
            16px;

        padding:
            0 16px;

        gap:
            7px;

        font-size:
            8px;

    }


    .beauty-feature-slide__arrow {

        font-size:
            13px;

    }


    .beauty-feature-slide__person {

        left:
            81%;

        width:
            49%;

    }


    .beauty-feature-slider__indicators {

        bottom:
            12px;

        gap:
            6px;

    }


    .beauty-feature-slider__indicator {

        width:
            7px;

        height:
            7px;

        min-width:
            7px;

        min-height:
            7px;

    }


    .beauty-feature-slider__indicator.is-active {

        width:
            20px;

    }

}


/* =========================================================
   DESKTOP WIDTH ALIGNMENT
   Match Shop by Category + New Arrivals
   ========================================================= */

@media (min-width: 1024px) {

    .beauty-feature-slider {

        width:
            calc(100% - 80px);

        max-width:
            1320px;

        margin-left:
            auto;

        margin-right:
            auto;

        border-radius:
            24px;

    }

}