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

.productSlider{
    display:flex;
    overflow-x:auto;
    gap:12px;
    padding:0 5px 10px;
    scroll-behavior:smooth;
    scrollbar-width:none;
}

.productSlider::-webkit-scrollbar{
    display:none;
}

.productSlider2{
    display:flex;
    overflow-x:auto;
    gap:12px;
    padding:0 15px 10px;
    scroll-behavior:smooth;
    scrollbar-width:none;
}

.productSlider2::-webkit-scrollbar{
    display:none;
}


/* ==========================================
   PRODUCT CARD
========================================== */

.productCard{

    min-width:190px;
    max-width:190px;

    background:transparent;

    /* border-radius:5px; */

    overflow:hidden;

    position:relative;

    cursor:pointer;

    transition:.35s;

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

    flex-shrink:0;

}

.productCard:hover{

    transform:translateY(-5px);

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

}


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

.productImage{

    width:100%;

    height:210px;

    /* background-image: url(../img/appimages/bg.jpg); */

    background-size: 100% 100%;
     background-repeat: no-repeat;
    background:#fafafa;

    overflow:hidden;

    position:relative;

}

.productImage img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.productCard:hover img{

    transform:scale(1.08);

}


/* ==========================================
   PRODUCT INFO
========================================== */

.productInfo{

    padding:1px;

}



.productInfo h4{

    font-size:12px;

    font-weight:500;

    color:#343330;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    margin: 5px 5px!important;

}

.productInfo p{

    margin:5px 5px;

    font-size:13px;

    color:#343330;
    line-height: 1;

}


/* ==========================================
   PRICE
========================================== */

.price{

    margin:5px;

    color:#343330;

    font-size:15px;

    font-weight:700;

}


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

.wishlist{

    position:absolute;

    top:12px;

    right:12px;

    width:36px;

    height:36px;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

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

    z-index:2;

}

.wishlist i{

    color:#ff4b7d;

    font-size:16px;

}


/* ==========================================
   BADGE
========================================== */

.badge{

    position:absolute;

    left:12px;

    top:12px;

    background:#d4af37;

    color:#fff;

    padding:5px 10px;

    font-size:11px;

    border-radius:20px;

    font-weight:600;

    z-index:2;

}




/* ==========================================
   BESTSELLER RIBBON
========================================== */

.bestsellerRibbon{

    position:absolute;
    top:0;
    left:0;
    width:76px;
    height:28px;
    background:#ea718b;
    color:#fff;
    font-size:9px;
    font-weight:500;
    line-height:18px;
    text-align:center;
    z-index:4;
    letter-spacing:0;
    box-sizing:border-box;
    clip-path: polygon(100% 0,0 0,0 calc(100% - 1rem),1rem 100%,1rem calc(100% - 1rem),100% calc(100% - 1rem),calc(100% - 1.1rem) calc(50% - 1rem/2));

    border-image: linear-gradient(92.91deg, #AF594D 5.07%, #D185D2 114.1%);
    border-image-slice: 1;
    background: rgba(233, 113, 139, 1);
}

.bestsellerRibbon:before{

    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0;
    height:0;
    border-top:5px solid #cf5972;
    border-right:5px solid transparent;

}

.bestsellerRibbon:after{

    content:"";
    position:absolute;
    top:0;
    right:-11px;
    width:0;
    height:0;
    border-top:9px solid transparent;
    border-bottom:9px solid transparent;
    border-left:11px solid #ea718b;

}

/* ==========================================
   ADD TO CART
========================================== */

.cartBtn{

    position:absolute;

    bottom:15px;

    right:15px;

    width:40px;

    height:40px;

    border-radius:50%;

    background:#d4af37;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

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

}

.cartBtn i{

    font-size:16px;

}


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

.sectionHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0px 16px 12px;

}

.sectionHeader h2{

    font-size:21px;

    font-weight:700;

}

.sectionHeader span{

    color:#343330;

    font-size:14px;

    cursor:pointer;

}


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

@media(max-width:420px){

.productCard{

    min-width:170px;
    max-width:170px;

}

.productImage{

    height:190px;

}

.price{

    font-size:13px;

}

.productInfo h4{

    font-size:12px;

}

}
/* ==============================================================
   IPAD / TABLET PRODUCT CARDS
================================================================ */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
    .productSlider {
        gap: 20px;
        padding: 4px 18px 24px;
        scroll-padding-left: 18px;
    }
    .productSlider2 {
        gap: 20px;
        padding: 4px 18px 24px;
        scroll-padding-left: 18px;
    }


    .productCard {
        min-width: 220px;
        max-width: 220px;
        /* border-radius: 20px; */
    }

    .productImage {
        height: 235px;
    }

    .productInfo {
        padding: 8px 9px 10px;
    }

    .productInfo h4 {
        font-size: 15px;
        margin: 6px 5px !important;
    }

    .price {
        font-size: 17px;
        margin: 6px 5px;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1366px) {
    .productCard {
        min-width: 240px;
        max-width: 240px;
    }

    .productImage {
        height: 255px;
    }
}