.filter_offcanvas .offcanvas-body::-webkit-scrollbar {
    width: 7px;
    background: var(--lightBg);
    border-radius: 10px;
}
  
.filter_offcanvas .offcanvas-body::-webkit-scrollbar-thumb{
    background-color: var(--outline);
    border-radius: 10px;
}


/* ========= wishlist here ========== */

.shop-section .first input, .shop-section .first select {
    box-shadow: none;
}

.shop-section .first .filter-data .applied-filters .filter{
    padding: 3px 15px;
    background-color: black;
    color: white;
    font-weight: 600;
    border-radius: 100px;
}

.shop-section .first .filter-data .clear-all{
    padding: 7px 20px;
    border-radius: 100px;
    border: 1px solid gray;
    color: gray;
    font-size: 18px;
}

.filter_offcanvas{
    width: 330px !important;
}

.filter_offcanvas .offcanvas-header{
    box-shadow: 0px 5px 7px -10px rgba(0,0,0,0.75);
    height: 70px;
}

.filter_offcanvas .offcanvas-title{
    font-size: 25px;
}

.filter_offcanvas .btn-close{
    color: black;
    font-size: 22px;
    display: grid;
    place-items: center;
    box-shadow: none !important;
}

.filter_offcanvas .offcanvas-body h2{
    font-size: 20px;
}

.filter_offcanvas .offcanvas-body .category-filter p{
    color: gray;
    margin-bottom: 15px;
    cursor: pointer;
}
  
.filter_offcanvas .offcanvas-body .price-range-filter .range-slider {
    position: relative;
}

.filter_offcanvas .offcanvas-body .price-range-filter .range-input {
    position: absolute;
    width: 100%;
    pointer-events: none;
    -webkit-appearance: none;
    z-index: 2;
    background: none;
    top: -7px;
    border: none !important;
}

.filter_offcanvas .offcanvas-body .price-range-filter .range-input::-webkit-slider-thumb {
    pointer-events: all;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: black;
    cursor: pointer;
    -webkit-appearance: none;
    z-index: 3;
    position: relative;
    border: 2px solid white;
}

.filter_offcanvas .offcanvas-body .price-range-filter .range-input::-moz-range-thumb {
    pointer-events: all;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: black;
    cursor: pointer;
    z-index: 3;
    position: relative;
}

.filter_offcanvas .offcanvas-body .price-range-filter .slider {
    position: relative;
    height: 5px;
    background: #ddd;
    z-index: 1;
    margin: 10px 0;
    border-radius: 30px;
}

.filter_offcanvas .offcanvas-body .price-range-filter .track,
.filter_offcanvas .offcanvas-body .price-range-filter .range {
    position: absolute;
    height: 5px;
    border-radius: 5px;
}

.filter_offcanvas .offcanvas-body .price-range-filter .track {
    width: 100%;
    background: #ddd;
}

.filter_offcanvas .offcanvas-body .price-range-filter .range {
    background: black;
}

.filter_offcanvas .offcanvas-body .price-range-filter .price-labels {
    display: flex;
    justify-content: space-between;
}

.filter_offcanvas .offcanvas-body .price-range-filter .price-labels span {
    font-size: 14px;
}

.filter_offcanvas input {
    box-shadow: none !important;
}

.filter_offcanvas .offcanvas-body .products-filter label{
    cursor: pointer;
}
.filter_offcanvas .offcanvas-body .tag-filter label{
    cursor: pointer;
}

.filter_offcanvas .offcanvas-footer{
    box-shadow: 0px -5px 7px -10px rgba(0,0,0,0.75);
    height: 70px;
}

.filter_offcanvas .offcanvas-footer .buttons{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.filter_offcanvas .offcanvas-footer .buttons button{
    padding: 7px 12px;
    font-size: 15px;
    border-radius: 8px;
    border: 2px solid var(--black);
    font-weight: 700;
}

.filter_offcanvas .offcanvas-footer .buttons .apply{
    background-color: black;
    color: white;
}

.filter_offcanvas .offcanvas-footer .buttons .apply:hover{
    background-color: transparent;
    color: black;
}

.filter_offcanvas .offcanvas-footer .buttons .clear:hover{
    background-color: black;
    color: white;
}

.shop-section .shop-products .product{
    position: relative;
}

/*.shop-section .shop-products .contain-tag::after{
    content: attr(data-tag);
    left: 10px;
    top: 10px;
    position: absolute;
    padding: 4px 7px;
    font-weight: 600;
    border-radius: 5px;
    background-color: var(--orange);
    color: black;
    border: 3px solid white;
}*/

.shop-section .shop-products .product .product-data .image{
    width: 100%;
    height: 250px;
    border-radius: 12px;
    background-color: var(--lightBg);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.shop-section .shop-products .product .product-data .image img{
    height: 75%;
    width: 75%;
    object-fit: contain;
    transition: 300ms;
}

.shop-section .shop-products .product .product-data .image:hover img{
    transform: scale(1.1);
}

.shop-section .shop-products .product .product-data .details{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.shop-section .shop-products .product .product-data .details h2{
    width: 100%;
}

.shop-section .shop-products .product .product-data .details .original_price{
    color: gray;
}

.shop-section .shop-products .product .product-data .details .discount{
    color: #F17732;
}

.shop-section .shop-products .product .product-data .cart-button{
    padding: 12px 20px;
    border-radius: 100px;
    background-color: black;
    color: white;
    font-weight: 600;
    transition: 300ms;
    font-size: 15px;
}

.shop-section .shop-products .product .product-data .cart-button:hover{
    background-color: var(--blue);
}

.shop-section .third a{
    box-shadow: none !important;
}


/* ============ MEDIA QUERY HERE ============= */


@media (max-width:500px){

    .filter_offcanvas{
        width: 300px !important;
    }

    .shop-section .shop-products .product .product-data .image{
        height: 170px;
    }
    
    .shop-section .shop-products .product .product-data .image img{
        height: 80%;
        width: 80%;
    }

    .shop-section .shop-products .product .product-data .cart-button{
        padding: 10px 18px;
        font-size: 14px;
    }

}