/* ▼ 1a. toggle button – white chevron always visible on right */
button.filter-toggle {
    position: relative;          /* anchor the pseudo element   */
    padding-right: 34px;         /* room for the arrow          */
    color:#fff;                  /* make sure text stays white  */
}

button.filter-toggle::after{
    content:"\25BC";             /* ▼ down-arrow by default     */
    font-size: 0.9em;
    position:absolute;
    right:12px;                  /* far right                   */
    top:50%;
    transform:translateY(-50%);
    transition:transform .2s;
}

/* ▲ flip arrow when drawer is open */
button.filter-toggle[aria-expanded="true"]::after{
    content:"\25B2";             /* ▲ up-arrow                  */
}

/* ▼ 1b. force a vertical scrollbar & style it (WebKit) */
.filter-content{
    max-height:130px;            /* whatever height you prefer  */
    overflow-y:auto;             /* scrollbar only when needed  */
    scrollbar-gutter:stable;     /* keeps layout from shifting  */
}

/* optional thin scrollbar for WebKit browsers */
.filter-content::-webkit-scrollbar{
    width:6px;
}
.filter-content::-webkit-scrollbar-track{
    background:#f1f1f1;
}
.filter-content::-webkit-scrollbar-thumb{
    background:#c7c7c7;
    border-radius:3px;
}
.filter-content::-webkit-scrollbar-thumb:hover{
    background:#a9a9a9;
}




button.filter-toggle {
    width: 100%;
    text-align: left;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #ff0000;
    border-radius: 5px;
	font-weight: 600;
}
.filter-group {
    width: 100%;
}
.button.filter-submit-button {
width: 100%;
background-color: #000!important;
color: #fff!important;
}
.filter-content {
	max-height: 200px;
	padding-top: 10px;
	overflow: auto;
	width: 100%;
    color: #000;
}
.my-basic-product-filter .filter-price {
    flex-basis: 250px; /* Give price filter some base width */
    flex-grow: 1;
}
.my-basic-product-filter .price-slider-container {
     padding: 10px 5px 0 5px; /* Add some padding around slider */
}

.my-basic-product-filter .ui-slider {
    position: relative;
    text-align: left;
    background: #e9e9e9;
    border-radius: 3px;
    border: 1px solid #d3d3d3;
    height: 6px; /* Slimmer track */
    margin-bottom: 5px; /* Space below track */
}
.my-basic-product-filter .ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 16px;
    height: 16px;
    cursor: pointer; /* Use pointer */
    background: #666; /* Darker handle */
    border-radius: 50%;
    border: 1px solid #555;
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Precise vertical center */
    margin-left: -8px; /* Center handle horizontally */
    touch-action: none;
    outline: none;
}
.my-basic-product-filter .ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background: #999; /* Darker range */
    border-radius: 3px;
    height: 100%;
}
.my-basic-product-filter .price-slider-amount {
    font-size: 0.9em;
    color: #555;
}
.my-basic-product-filter .price-slider-amount span {
    font-weight: bold;
    display: inline-block;
    min-width: 45px; /* Give labels space */
    text-align: center;
}
.my-basic-product-filter {
    margin-bottom: 2em;
    padding: 15px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}
.my-basic-product-filter .filter-section {
	color: #000;
}
 .my-basic-product-filter label {
     margin-right: 5px;
     font-weight: bold;
 }
 .my-basic-product-filter select,
 .my-basic-product-filter input[type="number"] {
     padding: 8px;
     border: 1px solid #ccc;
     border-radius: 3px;
     vertical-align: middle; /* Align nicely in flex */
 }
 .my-basic-product-filter input[type="number"].price-filter-input {
     width: 90px; /* Adjust width */
 }
 .my-basic-product-filter button.filter-submit-button {
     padding: 8px 15px;
     cursor: pointer;
 }