/* ==========================================================
   Product Filters — Browse Panel
========================================================== */

.catalog-filters{

    background:#111C2E;

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

    padding:22px;

    position:sticky;

    top:100px;

    max-height:calc(100vh - 120px);

    overflow-y:auto;

    overscroll-behavior:contain;

}

.catalog-filters::-webkit-scrollbar{

    width:6px;

}

.catalog-filters::-webkit-scrollbar-thumb{

    background:rgba(255,255,255,.15);

    border-radius:10px;

}

.catalog-filters::-webkit-scrollbar-track{

    background:transparent;

}

/* ---------- Browse Header ---------- */

.browse-header{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:20px;

    font-weight:700;

    color:#fff;

    padding-bottom:18px;

    margin-bottom:18px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.browse-header i{

    color:#06B6D4;

    font-size:18px;

}

.browse-mobile-caret{

    display:none;

    margin-left:auto;

    font-size:14px;

    color:#777;

    transition:transform .2s ease;

}

.browse-mobile-caret.open{

    transform:rotate(180deg);

}

/* ---------- Generic Section ---------- */

.browse-section{

    margin-bottom:18px;

}

.browse-label{

    display:flex;

    align-items:center;

    gap:8px;

    color:#aaa;

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.03em;

    margin-bottom:10px;

}

.browse-label i{

    color:#06B6D4;

    font-size:13px;

}

.browse-divider{

    height:1px;

    background:rgba(255,255,255,.08);

    margin:18px 0;

}

.catalog-filters .form-control,
.catalog-filters .form-select{

    background:#0B1220;

    border:1px solid rgba(255,255,255,.12);

    color:#fff;

    border-radius:10px;

}

.catalog-filters .form-control::placeholder{

    color:#777;

}

.catalog-filters .form-control:focus,
.catalog-filters .form-select:focus{

    background:#0B1220;

    border-color:#06B6D4;

    color:#fff;

    box-shadow:0 0 0 3px rgba(8,145,178,.15);

}

/* ---------- Collapsible Groups ---------- */

.filter-group{

    border-bottom:1px solid rgba(255,255,255,.06);

}

.filter-group:last-of-type{

    border-bottom:none;

}

.filter-toggle{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:none;

    border:none;

    color:#fff;

    font-size:15px;

    font-weight:600;

    padding:14px 0;

    cursor:pointer;

}

.filter-toggle:hover{

    color:#06B6D4;
}

.filter-title{

    display:flex;

    align-items:center;

    gap:10px;

}

.filter-title i{

    color:#06B6D4;

    font-size:15px;

    width:16px;

    text-align:center;

}

.filter-arrow{

    font-size:13px;

    color:#777;

    transition:transform .2s ease;

}

.filter-arrow.open{

    transform:rotate(90deg);

    color:#06B6D4;

}

.filter-content{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:max-height .25s ease, opacity .2s ease;

}

.filter-content.open{

    max-height:2400px;

    opacity:1;

    padding-bottom:12px;

}

.filter-content > .form-check:first-child{

    margin-top:2px;

}

/* ---------- Sub-Groups (Processor/Memory/Storage) ---------- */

.filter-subgroup{

    border-top:1px solid rgba(255,255,255,.05);
    border-bottom:none;

}

.filter-subgroup:first-child{

    border-top:none;

}

.filter-subheader-toggle{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:none;

    border:none;

    color:#93C5FD;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.04em;

    padding:10px 0;

    cursor:pointer;

}

.filter-subheader-toggle:hover{

    color:#06B6D4;

}

.filter-subheader-toggle .filter-arrow{

    font-size:11px;

}

.filter-subcontent{

    padding-left:10px;

}

.filter-subcontent .form-check{

    padding-left:1.8em;

}

/* ---------- Checkboxes ---------- */

.catalog-filters .form-check{

    margin-bottom:2px;

    padding-left:1.8em;

    padding-top:4px;

    padding-bottom:4px;

    padding-right:8px;

    border-radius:8px;

    transition:background .15s ease;

}

.catalog-filters .form-check:hover{

    background:rgba(255,255,255,.04);

}

.catalog-filters .form-check-input{

    cursor:pointer;

    background-color:#0B1220;

    border:1px solid rgba(255,255,255,.2);

    border-radius:4px;

    width:1.05em;

    height:1.05em;

    margin-top:.2em;

    transition:background-color .15s ease, border-color .15s ease;

}

.catalog-filters .form-check-input:checked{

    background-color:#06B6D4;

    border-color:#06B6D4;

}

.catalog-filters .form-check-input:focus{

    box-shadow:0 0 0 3px rgba(8,145,178,.15);

    border-color:#06B6D4;

}

.catalog-filters .form-check-label{

    cursor:pointer;

    color:#ccc;

    font-size:14px;

    padding:4px 0;

    display:inline-block;

}

.catalog-filters .form-check-label:hover{

    color:#06B6D4;

}

/* ---------- Price Range Slider ---------- */

.price-slider-values{

    display:flex;

    justify-content:space-between;

    font-size:14px;

    font-weight:600;

    color:#fff;

    margin-bottom:14px;

}

.price-slider-values span:nth-child(2){

    color:#666;

    font-weight:400;

}

.price-slider{

    position:relative;

    height:20px;

    margin-bottom:8px;

}

.price-slider-track{

    position:absolute;

    top:50%;

    left:0;

    right:0;

    height:4px;

    background:rgba(255,255,255,.15);

    border-radius:2px;

    transform:translateY(-50%);

}

.price-slider-range{

    position:absolute;

    top:50%;

    height:4px;

    background:#06B6D4;

    border-radius:2px;

    transform:translateY(-50%);

}

.price-range-input{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:20px;

    margin:0;

    background:transparent;

    -webkit-appearance:none;

    appearance:none;

    pointer-events:none;

}

.price-range-input::-webkit-slider-runnable-track{

    background:transparent;

}

.price-range-input::-moz-range-track{

    background:transparent;

}

.price-range-input::-webkit-slider-thumb{

    -webkit-appearance:none;

    pointer-events:auto;

    width:16px;

    height:16px;

    border-radius:50%;

    background:#06B6D4;

    border:2px solid #0B1220;

    cursor:pointer;

    margin-top:0;

}

.price-range-input::-moz-range-thumb{

    pointer-events:auto;

    width:16px;

    height:16px;

    border-radius:50%;

    background:#06B6D4;

    border:2px solid #0B1220;

    cursor:pointer;

}

/* ---------- Reset ---------- */

.browse-reset{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    color:#aaa;

    font-size:13px;

    font-weight:600;

    text-decoration:none;

    padding:10px 0;

    border:1px solid rgba(255,255,255,.12);

    border-radius:10px;

    transition:all .15s ease;

}

.browse-reset:hover{

    color:#fff;

    border-color:#06B6D4;

    background:rgba(8,145,178,.08);
}

.browse-reset-top{

    margin-bottom:18px;

}

@media(max-width:991px){

    .catalog-filters{

        position:static;

        margin-bottom:30px;

        max-height:none;

        overflow-y:visible;

    }

    .browse-header{

        cursor:pointer;

        margin-bottom:0;

        padding-bottom:0;

        border-bottom:none;

    }

    .browse-mobile-caret{

        display:inline-block;

    }

    .browse-body{

        display:none;

        padding-top:18px;

        margin-top:18px;

        border-top:1px solid rgba(255,255,255,.08);

    }

    .browse-body.mobile-open{

        display:block;

    }

}

/* ==========================================================
   Product Catalog Page
========================================================== */

.catalog-page .featured-products{

    padding-top:0;

}

/* ==========================================================
   Sort Dropdown
========================================================== */

.catalog-sort{

    min-width:260px;

}

.catalog-sort .form-select{

    background:#111C2E;

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    padding:12px 16px;

    border-radius:12px;

}

.catalog-sort .form-select:focus{

    border-color:#06B6D4;

    box-shadow:none;

}

@media(max-width:768px){

    .catalog-sort{

        width:100%;

        margin-top:20px;

    }

}