#filterSidebar {
            position: fixed;
            top: 0;
            right: -370px;
            width: 370px;
            height: 100vh;
            background: white;
            box-shadow: -2px 0 5px rgba(0,0,0,0.2);
            transition: right 0.3s ease-in-out;
            padding: 20px;
            z-index: 1050;
            overflow-y: auto;
        }
        .filter-open {
            right: 0 !important;
        }
        main.main.shop-page {
            padding: 20px 60px;
        }

        #mainContent {
            transition: margin-right 0.3s ease-in-out;
        }
        .collapsed-content {
            max-height:38px;
            overflow: hidden;
            transition: max-height 0.3s ease-in-out;
        }
        .expanded {
            max-height: 300px;
        }
        .collapsed-items {
            display: none;
        }
        .toggle-btn {
            background: none;
            border: none;
            cursor: pointer;
        }
        div#colorSection .badge {
            height: 35px;
            background: #000;
            display: block;
            width: auto;
            line-height: 27px;
            font-size: 10px;
            cursor: pointer;
        }
        .item-sort {
            display: block;
            width: 100%;
            border: 1px solid #e9e7e7;
            margin: 0px 0;
            text-align: right;
            padding: 5px 15px;
            border-radius: 5px;
            font-size: 14px;
        }

        .item-filter{
            border-bottom: 6px solid #e9e9e9;
            padding-bottom: 25px;

        }
        .item-filter.lastchild{
            border-bottom: 0;


        }
        .filter-btn .btn {
            padding: 17px;
        }
        .filter-btn {
            position: ABSOLUTE;
            width: 100% !important;
            padding: 15px;
            background: #e9e9e9;
            margin: auto;
            left: 0;
            right: 0;
        }

    .filter-btn-cat {
      margin: 5px;
      border-radius: 20px;
    }
    .filter-btn-cat {
        border-radius: 20px;
        background: #ddd;
        color: #000;
        border-radius: 0;
        padding: 5px 10px;
        border: 0;
    }

    .filter-btn.active {
      background-color: black;
      color: white;
    }
    .product-categrory {
      display: none;

    }
    .product-categrory.active-cat {
      display: block;

    }

    .filter-btn-cat.active {
        background:var(--dark-color);
        color: var(--white-color);
    }


@media (max-width: 768px) {
.filter-btn-box .filter-btn-cat {width:100%;}

}

.size-item.selected, .sort-item.selected {
    border: 1px solid #ccc;
}
span.badge.color-item.selected {
    box-shadow: 0px 2px 2px #000000;
    border: 1px solid #ccc;
}

.price-filter-container { direction: rtl; width: 300px;  }
.price-display { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.price-row { display: flex; justify-content: space-between; border-bottom: 1px solid #eee; padding: 5px 0; }

.range-slider { position: relative; height: 5px; background: #ddd; margin: 20px 0; }
.track { position: absolute; height: 100%; background: #007bff; }

.range-slider input {
    position: absolute; width: 100%; top: -7px; background: none; appearance: none; pointer-events: none;
}
.range-slider input::-webkit-slider-thumb {
    pointer-events: auto; appearance: none; height: 18px; width: 18px;
    border-radius: 50%; background: #007bff; cursor: pointer;
}
.range-labels { display: flex; justify-content: space-between; font-size: 12px; color: #888; }