/* ==========================================
   TRENDING NOW SECTION
   Premium Ecommerce Style
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.trending-section{

    width:100%;
    padding:70px 40px;
    background:#fff;
    overflow:hidden;

}

/* ===========================
   Section Header
=========================== */

.section-header{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;

}

.section-header h2{

    font-family:'League Spartan',sans-serif;
    font-size:38px;
    font-weight:700;
    color:#111;

}

.slider-controls{

    display:flex;
    gap:12px;

}

.slider-controls button{

    width:48px;
    height:48px;

    border:none;
    border-radius:50%;

    background:#fff;

    box-shadow:0 4px 15px rgba(0,0,0,.12);

    cursor:pointer;

    font-size:24px;

    transition:.3s;

}

.slider-controls button:hover{

    background:#111;
    color:#fff;

}

/* ===========================
   Slider
=========================== */

.trending-slider{

    display:flex;

    gap:22px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;

    -ms-overflow-style:none;

}

.trending-slider::-webkit-scrollbar{

    display:none;

}

/* ===========================
   Product Card
=========================== */

.product-card{

    flex:0 0 calc((100% - 44px)/3);

    min-width:420px;

    text-decoration:none;

    background:#fff;

    color:#111;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.35s;

}

.product-card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 35px rgba(0,0,0,.15);

}

/* ===========================
   Product Image
=========================== */

.product-image{

    width:100%;
    height:600px;

    background:#f7f7f7;

    overflow:hidden;

}

.product-image img{

    width:100%;
    height:100%;

    object-fit:contain;

    transition:.5s;

}

.product-card:hover img{

    transform:scale(1.05);

}

/* ===========================
   Product Info
=========================== */

.product-info{

    padding:22px;

}

.product-info h3{

    font-family:'League Spartan',sans-serif;

    font-size:26px;

    font-weight:600;

    line-height:1.2;

    margin-bottom:10px;

    color:#111;

}

.price{

    font-family:'League Spartan',sans-serif;

    font-size:24px;

    font-weight:700;

    margin-bottom:18px;

}

/* ===========================
   Colors
=========================== */

.color-swatches{

    display:flex;

    gap:10px;

    margin-bottom:18px;

}

.color-dot{

    width:20px;
    height:20px;

    border-radius:50%;

    cursor:pointer;

    border:2px solid #fff;

    box-shadow:0 0 0 1px #bbb;

    transition:.3s;

}

.color-dot:hover{

    transform:scale(1.15);

}

.color-dot.active{

    box-shadow:0 0 0 2px #111;

}

/* ===========================
   Description
=========================== */

.description{

    font-family:'League Spartan',sans-serif;

    font-size:18px;

    line-height:1.4;

    color:#555;

}

/* ===========================
   Tablet
=========================== */

@media(max-width:1200px){

.product-card{

    flex:0 0 calc((100% - 22px)/2);

    min-width:380px;

}

.product-image{

    height:500px;

}

}

/* ===========================
   Mobile
=========================== */

@media(max-width:768px){

.trending-section{

    padding:40px 16px;

}

.section-header{

    margin-bottom:25px;

}

.section-header h2{

    font-size:30px;

}

.slider-controls{

    display:none;

}

.trending-slider{

    gap:16px;

    scroll-snap-type:x mandatory;

}

.product-card{

    flex:0 0 88%;

    min-width:88%;

    scroll-snap-align:start;

}

.product-image{

    height:420px;

}

.product-info{

    padding:18px;

}

.product-info h3{

    font-size:22px;

}

.price{

    font-size:20px;

}

.description{

    font-size:16px;

}

.color-dot{

    width:18px;
    height:18px;

}

}

/* ===========================
   Large Screens
=========================== */

@media(min-width:1700px){

.product-image{

    height:720px;

}

.product-info h3{

    font-size:30px;

}

.price{

    font-size:28px;

}

}

.trending-slider.dragging{

    cursor:grabbing;

    user-select:none;

}

.product-image img{

    transition:
        transform .4s ease,
        opacity .25s ease;

}