/*========================================================
        LUXURY FEATURED CAROUSEL CSS
        FINAL VERSION
========================================================*/


:root{

    --gold:#D4AF37;
    --gold-light:#F8E7A2;
    --pink:#F8D7E6;
    --black:#111;
    --white:#fff;

}




/*==============================
        SECTION
==============================*/


.featured-section{

    padding:60px 0 70px;

    background:

    linear-gradient(

        180deg,

        #ffffff,

        #fff8fb

    );

    overflow:hidden;

}




.featured-heading{

    text-align:center;

    margin-bottom:40px;

}




.featured-heading span{


    display:inline-block;


    padding:8px 22px;


    border-radius:50px;


    background:

    linear-gradient(

    135deg,

    #fff2c9,

    #ffe8f2

    );


    color:#9b7200;


    font-size:12px;


    letter-spacing:2px;


    font-weight:700;


}




.featured-heading h2{


    margin-top:18px;


    font-size:38px;


    font-weight:800;


    color:#111;


}






/*==============================
        WRAPPER
==============================*/


.featured-wrapper{


    position:relative;


    width:100%;


}






/*==============================
        CAROUSEL
==============================*/


.featured-carousel{


    overflow:hidden;


    width:100%;


}




.featured-track{


    display:flex;


    gap:25px;


    transition:

    transform 1s cubic-bezier(.22,.61,.36,1);


    will-change:transform;


}







/*==============================
        PRODUCT ITEM
==============================*/


.featured-item{


    flex:0 0 calc(50% - 12.5px);


    height:520px;


    position:relative;


    overflow:hidden;


    border-radius:30px;


    background:#fff;



    border:2px solid transparent;


    background-image:

    linear-gradient(#fff,#fff),

    linear-gradient(

        135deg,

        var(--gold),

        var(--pink),

        var(--gold)

    );


    background-origin:border-box;


    background-clip:

    padding-box,

    border-box;



    box-shadow:

    0 20px 50px rgba(0,0,0,.10);



    transition:.6s ease;


}





.featured-item:hover{


    transform:translateY(-8px);


    box-shadow:

    0 35px 80px rgba(212,175,55,.25);


}






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


.featured-item img{


    width:100%;


    height:100%;


    object-fit:cover;


    transition:

    transform 1.5s ease;


}



.featured-item:hover img{


    transform:scale(1.08);


}





/*==============================
        DARK OVERLAY
==============================*/


.featured-item::after{


    content:"";


    position:absolute;


    bottom:0;


    left:0;


    width:100%;


    height:45%;


    background:

    linear-gradient(

    transparent,

    rgba(0,0,0,.75)

    );


}






/*==============================
        PRICE + BUTTON
==============================*/


.featured-overlay{


    position:absolute;


    bottom:20px;


    left:50%;


    transform:translateX(-50%);


    width:88%;


    z-index:2;


}





.featured-info{


    padding:16px;


    border-radius:20px;


    background:

    rgba(255,255,255,.22);


    backdrop-filter:blur(20px);


    border:

    1px solid rgba(255,255,255,.4);


    text-align:center;


}






.featured-info h4{


    color:white;


    font-size:25px;


    font-weight:800;


    margin-bottom:12px;


    text-shadow:

    0 3px 10px #000;


}







.featured-info a{


    display:flex;


    justify-content:center;


    align-items:center;


    gap:8px;


    padding:12px;


    border-radius:50px;


    text-decoration:none;


    color:#111;


    font-weight:700;


    background:

    linear-gradient(

        135deg,

        white,

        #ffeec0

    );


    transition:.4s;


}




.featured-info a:hover{


    background:

    linear-gradient(

    135deg,

    var(--gold),

    var(--gold-light)

    );


    transform:translateY(-3px);


}








/*==============================
        ARROWS
==============================*/


.featured-prev,
.featured-next{


    position:absolute;


    top:50%;


    transform:translateY(-50%);


    width:50px;


    height:50px;


    border-radius:50%;


    border:none;


    background:white;


    cursor:pointer;


    z-index:5;


    box-shadow:

    0 10px 30px rgba(0,0,0,.15);


    transition:.4s;


}




.featured-prev{

left:15px;

}



.featured-next{

right:15px;

}



.featured-prev:hover,
.featured-next:hover{


background:var(--gold);


}





/*==============================
        DOTS
==============================*/


.featured-dots{


display:flex;


justify-content:center;


gap:10px;


margin-top:30px;


}



.featured-dot{


width:10px;


height:10px;


background:#ddd;


border-radius:20px;


transition:.4s;


}



.featured-dot.active{


width:30px;


background:

linear-gradient(

90deg,

var(--gold),

var(--pink)

);


}







/*==============================
        TABLET
==============================*/


@media(max-width:992px){


.featured-item{


height:450px;


}



}







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


@media(max-width:768px){


.featured-section{


padding:45px 15px;


}



.featured-item{


flex:0 0 100%;


height:420px;


}



.featured-heading h2{


font-size:30px;


}



}





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


@media(max-width:425px){


.featured-item{


height:360px;


border-radius:22px;


}



.featured-info h4{


font-size:20px;


}



.featured-info a{


padding:10px;


font-size:13px;


}



.featured-prev,
.featured-next{


width:40px;


height:40px;


}



}
/*========================================================
        FEATURED IMAGE FIT SYSTEM
========================================================*/


.featured-item{

    background:#ffffff;

}





.featured-item img{


    width:100%;


    height:100%;


    object-fit:contain;


    object-position:center;


    padding:15px;


    background:

    linear-gradient(

        180deg,

        #ffffff,

        #fffaf8

    );


    transition:

    transform 1.2s ease;


}




.featured-item:hover img{


    transform:scale(1.05);


}






/* keep overlay visible */


.featured-item::after{


    height:35%;


    background:

    linear-gradient(

        to top,

        rgba(0,0,0,.55),

        transparent

    );


}





/*========================================================
        CLOTHING IMAGE STYLE
========================================================*/


@media(max-width:768px){


.featured-item img{


    padding:10px;


}



}





@media(max-width:425px){


.featured-item img{


    padding:8px;


}



}