/* Products left filter sidebar */

.shop-wrapper .sidebar {

    width: 300px;

    flex-shrink: 0;

    background: transparent;

    box-shadow: none;

    border-radius: 0;

    height: fit-content;

    align-self: flex-start;

}

@media (min-width: 769px) {

    .shop-wrapper > .container,

    .shop-wrapper .container {

        align-items: flex-start;

    }

    .shop-wrapper .desktop-filters {

        position: sticky;

        top: 12px;

        z-index: 5;

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

    }

    .shop-wrapper .mv-filter {

        display: flex;

        flex-direction: column;

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

        overflow: hidden;

        padding-bottom: 12px;

        box-sizing: border-box;

    }

    .shop-wrapper .mv-filter__head {

        flex-shrink: 0;

    }

    .shop-wrapper .mv-filter__scroll {

        flex: 1 1 auto;

        min-height: 0;

        overflow-y: auto;

        overscroll-behavior: contain;

        padding-right: 2px;

        margin-right: -2px;

    }

    .shop-wrapper .mv-filter__scroll::-webkit-scrollbar { width: 5px; }

    .shop-wrapper .mv-filter__scroll::-webkit-scrollbar-thumb {

        background: #d1d5db;

        border-radius: 999px;

    }

    .shop-wrapper .mv-filter__actions {

        flex-shrink: 0;

        margin-top: 4px;

        padding-top: 10px;

        background: #fff;

        border-top: 1px solid #f1f5f9;

    }

}

.mv-filter {

    --brand: #e31e24;

    --brand-soft: #fff1f2;

    background:

        radial-gradient(120% 80% at 0% 0%, rgba(227, 30, 36, .08), transparent 55%),

        linear-gradient(180deg, #fff 0%, #fcfcfd 100%);

    border: 1px solid #e8ecf1;

    border-radius: 22px;

    padding: 16px;

    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);

}

.mv-filter__head {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 14px;

    padding-bottom: 14px;

    border-bottom: 1px solid #eef1f5;

}

.mv-filter__brand {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;

}

.mv-filter__badge {

    width: 40px;

    height: 40px;

    border-radius: 14px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(145deg, #e31e24, #b91c1c);

    color: #fff;

    font-size: 15px;

    box-shadow: 0 8px 18px rgba(227, 30, 36, .28);

    flex-shrink: 0;

}

.mv-filter__brand h2,

.mv-filter__head h2 {

    margin: 0;

    font-size: 16px;

    font-weight: 800;

    color: #111827;

    letter-spacing: -.2px;

}

.mv-filter__brand p {

    margin: 2px 0 0;

    font-size: 11px;

    font-weight: 700;

    color: #6b7280;

}

.mv-filter__head h2 i { color: #e31e24; }

.mv-filter__reset {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    font-size: 12px;

    font-weight: 800;

    color: #9ca3af;

    text-decoration: none;

    white-space: nowrap;

    padding: 6px 8px;

    border-radius: 999px;

    transition: .15s ease;

}

.mv-filter__reset:hover,

.mv-filter__reset.is-active {

    color: #e31e24;

    background: #fff1f2;

}



.mv-filter__group {

    margin-bottom: 16px;

    padding-bottom: 16px;

    border-bottom: 1px solid #f1f5f9;

}

.mv-filter__group:last-of-type {

    border-bottom: 0;

    margin-bottom: 12px;

    padding-bottom: 0;

}

.mv-filter__label {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin: 0 0 10px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .07em;

    text-transform: uppercase;

    color: #9ca3af;

}

.mv-filter__label i {

    color: #e31e24;

    font-size: 12px;

}



.mv-filter__search {

    position: relative;

}

.mv-filter__search i {

    position: absolute;

    left: 12px;

    top: 50%;

    transform: translateY(-50%);

    color: #9ca3af;

    font-size: 13px;

}

.mv-filter__search input {

    width: 100%;

    border: 1.5px solid #e6eaf0;

    border-radius: 14px;

    padding: 11px 12px 11px 36px;

    background: #f8fafc;

    font-size: 14px;

    font-weight: 600;

    color: #111827;

    outline: none;

    transition: .15s ease;

}

.mv-filter__search input:focus {

    border-color: #e31e24;

    background: #fff;

    box-shadow: 0 0 0 3px rgba(227, 30, 36, .1);

}



.mv-filter__list {

    display: flex;

    flex-direction: column;

    gap: 6px;

    max-height: 260px;

    overflow-y: auto;

    padding-right: 2px;

}

.mv-filter__list::-webkit-scrollbar { width: 5px; }

.mv-filter__list::-webkit-scrollbar-thumb {

    background: #d1d5db;

    border-radius: 999px;

}

.mv-filter__option {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0;

    padding: 8px 10px;

    border: 1px solid #eef1f5;

    border-radius: 14px;

    background: #fff;

    cursor: pointer;

    font-size: 13px;

    font-weight: 700;

    color: #374151;

    transition: .15s ease;

}

.mv-filter__option:hover {

    border-color: #fecaca;

    background: #fff7f7;

}

.mv-filter__option:has(input:checked) {

    border-color: #e31e24;

    background: linear-gradient(135deg, #fff1f2, #fff);

    color: #9f1239;

    box-shadow: 0 6px 16px rgba(227, 30, 36, .08);

}

.mv-filter__option input {

    appearance: none;

    width: 0;

    height: 0;

    margin: 0;

    opacity: 0;

    position: absolute;

    pointer-events: none;

}

.mv-filter__ico {

    width: 34px;

    height: 34px;

    border-radius: 11px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background: #f3f4f6;

    color: #6b7280;

    font-size: 14px;

    overflow: hidden;

    transition: .15s ease;

}

.mv-filter__ico img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.mv-filter__option:hover .mv-filter__ico,

.mv-filter__option:has(input:checked) .mv-filter__ico {

    background: #fff1f2;

    color: #e31e24;

}

.mv-filter__option span:last-child {

    flex: 1;

    min-width: 0;

    line-height: 1.3;

}

.mv-filter__count {

    font-size: 11px;

    font-weight: 800;

    color: #9ca3af;

    background: #fff;

    border-radius: 999px;

    padding: 2px 7px;

}



.mv-filter__price {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;

}

.mv-filter__select-wrap {

    position: relative;

}

.mv-filter__select-wrap > i {

    position: absolute;

    left: 12px;

    top: 50%;

    transform: translateY(-50%);

    color: #e31e24;

    font-size: 13px;

    pointer-events: none;

    z-index: 1;

}

.mv-filter__select-wrap .mv-filter__select {

    padding-left: 36px;

}

.mv-filter__select {

    width: 100%;

    border: 1.5px solid #e8ecf1;

    border-radius: 14px;

    padding: 10px 12px;

    font-size: 13px;

    font-weight: 700;

    color: #111827;

    background: #fff;

}

.mv-filter__select:focus {

    outline: none;

    border-color: #fecaca;

    box-shadow: 0 0 0 3px rgba(227, 30, 36, .08);

}

.mv-filter__price label {

    display: flex;

    flex-direction: column;

    gap: 5px;

    margin: 0;

    font-size: 11px;

    font-weight: 800;

    color: #6b7280;

}

.mv-filter__price input {

    width: 100%;

    border: 1.5px solid #e6eaf0;

    border-radius: 12px;

    padding: 10px 11px;

    background: #f8fafc;

    font-size: 14px;

    font-weight: 700;

    color: #111827;

    outline: none;

}

.mv-filter__price input:focus {

    border-color: #e31e24;

    background: #fff;

}



.mv-filter__actions {

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.mv-filter__btn {

    width: 100%;

    border: 0;

    border-radius: 14px;

    padding: 12px;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    background: linear-gradient(135deg, #1f2937, #111827);

    color: #fff;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    text-decoration: none;

    transition: .15s ease;

}

.mv-filter__btn:hover {

    background: linear-gradient(135deg, #e31e24, #b91c1c);

}

.mv-filter__btn--ghost {

    display: inline-flex;

    text-align: center;

    text-decoration: none;

    background: #f3f4f6;

    color: #4b5563;

}

.mv-filter__btn--ghost:hover {

    background: #e5e7eb;

    color: #111827;

}



@media (max-width: 768px) {

    .shop-wrapper .sidebar { width: 100%; }

    .mv-filter { border-radius: 16px; }

}