/*==================================================
    BEST SELLERS
==================================================*/

.best-sellers{

    padding:20px 0 70px;

    background:#F8F9FC;

}

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

.best-sellers__wrapper{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:50px;

    align-items:start;

}
.best-sellers__featured{

    display:grid;

    grid-template-columns:350px 1fr;

    gap:40px;

    align-items:center;

}

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

.best-sellers__image{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

    background:#ffffff;

    border-radius:16px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.best-sellers__image img{

    max-width:100%;

    max-height:360px;

    transition:transform .4s ease;

}

.best-sellers__image:hover img{

    transform:scale(1.05);

}

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

.best-sellers__content h2{

    margin:0 0 18px;

    color:#082C6C;

    font-size:38px;

    font-weight:800;

    line-height:1.2;

}

.best-sellers__content .product-card__rating{

    margin-bottom:20px;

}

.best-sellers__content .product-card__price{

    margin-bottom:30px;

}

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

.best-sellers__content .product-card__button{

    width:220px;

}

/*==================================================
    RESPONSIVE
==================================================*/
/*==================================================
    RESPONSIVE — LARGE TABLET
==================================================*/

@media (max-width:1200px){

    .best-sellers{

        padding:20px 0 60px;

    }

    .best-sellers__wrapper{

        grid-template-columns:290px 1fr;

        gap:30px;

    }

    .best-sellers__featured{

        grid-template-columns:280px 1fr;

        gap:30px;

    }

    .best-sellers__image{

        padding:30px;

    }

    .best-sellers__image img{

        max-height:300px;

    }

    .best-sellers__content h2{

        font-size:32px;

    }

}


/*==================================================
    RESPONSIVE — TABLET
==================================================*/

@media (max-width:992px){

    .best-sellers__wrapper{

        grid-template-columns:1fr;

        gap:35px;

    }

    .best-sellers__featured{

        grid-template-columns:300px 1fr;

        gap:35px;

    }

    .best-sellers__content{

        text-align:left;

    }

    .best-sellers__content h2{

        font-size:32px;

    }

    .best-sellers__content .product-card__button{

        margin-left:0;

    }

}


/*==================================================
    RESPONSIVE — SMALL TABLET
==================================================*/

@media (max-width:768px){

    .best-sellers{

        padding:15px 0 50px;

    }

    .best-sellers__wrapper{

        gap:25px;

    }

    .best-sellers__list{

        padding:24px;

    }

    .best-sellers__featured{

        grid-template-columns:240px 1fr;

        gap:25px;

    }

    .best-sellers__image{

        padding:25px;

    }

    .best-sellers__image img{

        max-height:260px;

    }

    .best-sellers__content h2{

        font-size:28px;

        margin-bottom:15px;

    }

}


/*==================================================
    RESPONSIVE — MOBILE
==================================================*/

@media (max-width:576px){

    .best-sellers{

        padding:10px 0 40px;

    }

    .best-sellers__wrapper{

        gap:20px;

    }

    .best-sellers__list{

        padding:18px;

        border-radius:12px;

    }

    .best-sellers__list h4{

        margin-bottom:18px;

        font-size:18px;

    }

    .best-sellers__list li{

        gap:10px;

        padding:13px 0;

    }

    .best-sellers__list .rank{

        width:32px;

        height:32px;

        font-size:12px;

    }

    .best-sellers__list img{

        width:50px;

        height:50px;

    }

    .best-sellers__list strong{

        font-size:14px;

        line-height:1.3;

    }

    .best-sellers__list small{

        font-size:12px;

    }

    .best-sellers__featured{

        grid-template-columns:1fr;

        gap:20px;

    }

    .best-sellers__image{

        padding:25px;

    }

    .best-sellers__image img{

        max-height:280px;

    }

    .best-sellers__content{

        text-align:center;

    }

    .best-sellers__content h2{

        font-size:26px;

        margin-bottom:14px;

    }

    .best-sellers__content .product-card__rating{

        justify-content:center;

        margin-bottom:15px;

    }

    .best-sellers__content .product-card__price{

        justify-content:center;

        margin-bottom:22px;

    }

    .best-sellers__content .product-card__button{

        width:200px;

        margin:0 auto;

    }

}


/*==================================================
    RESPONSIVE — SMALL MOBILE
==================================================*/

@media (max-width:400px){

    .best-sellers__list{

        padding:15px;

    }

    .best-sellers__list li{

        gap:8px;

        padding:11px 0;

    }

    .best-sellers__list .rank{

        width:30px;

        height:30px;

        font-size:11px;

    }

    .best-sellers__list img{

        width:44px;

        height:44px;

    }

    .best-sellers__list strong{

        font-size:13px;

    }

    .best-sellers__list small{

        font-size:11px;

    }

    .best-sellers__featured{

        gap:16px;

    }

    .best-sellers__image{

        padding:20px;

    }

    .best-sellers__image img{

        max-height:240px;

    }

    .best-sellers__content h2{

        font-size:23px;

    }

}

/*==================================================
    TOP LIST
==================================================*/

.best-sellers__list{

    background:#ffffff;

    border-radius:16px;

    padding:30px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.best-sellers__list h3{

    margin:0 0 25px;

    color:#082C6C;

    font-size:22px;

    font-weight:800;

}

.best-sellers__list ul{

    list-style:none;

    margin:0;

    padding:0;

}

.best-sellers__list li{

    display:flex;

    align-items:center;

    gap:15px;

    padding:16px 0;

    border-bottom:1px solid #eeeeee;

    cursor:pointer;

    transition:.3s;

}

.best-sellers__list li:last-child{

    border-bottom:none;

}

.best-sellers__list li:hover{

    transform:translateX(6px);

}

.best-sellers__list .rank{

    display:flex;

    justify-content:center;

    align-items:center;

    width:38px;

    height:38px;

    border-radius:50%;

    background:#082C6C;

    color:#ffffff;

    font-size:14px;

    font-weight:700;

    flex-shrink:0;

}

.best-sellers__list li.active .rank{

    background:#F5B51D;

    color:#082C6C;

}

.best-sellers__list img{

    width:60px;

    height:60px;

    object-fit:contain;

    flex-shrink:0;

}

.best-sellers__list strong{

    display:block;

    margin-bottom:6px;

    color:#082C6C;

    font-size:16px;

    font-weight:700;

}

.best-sellers__list small{

    color:#777;

    font-size:14px;

}

/*==================================================
    FEATURED PRODUCT ANIMATION
==================================================*/

.best-sellers__image img,
#featured-product-title,
#featured-product-price,
#featured-product-old-price{

    transition:opacity .25s ease;

}

.fade-out{

    opacity:0;

}

.fade-in{

    opacity:1;

}