/*
|--------------------------------------------------------------------------
| Kwality / Generic WooCommerce Catalog
|--------------------------------------------------------------------------
*/


.kw-catalog-page {

    width: 100%;

    max-width: 1440px;

    margin: 0 auto;

    padding: 40px 30px 80px;

}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/


.kw-catalog-header {

    margin-bottom: 42px;

}


.kw-breadcrumb {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 18px;

    font-size: 13px;

    line-height: 1.5;

    color: #777;

}


.kw-breadcrumb a {

    color: #555;

    text-decoration: none;

    transition: color .2s ease;

}


.kw-breadcrumb a:hover {

    color: #111;

}


.kw-catalog-title {

    margin: 0 0 12px;

    font-size: clamp(
        32px,
        4vw,
        48px
    );

    line-height: 1.1;

    letter-spacing: -1.5px;

    font-weight: 700;

    color: #151515;

}


.kw-catalog-description {

    max-width: 780px;

    font-size: 15px;

    line-height: 1.75;

    color: #6b6b6b;

}


.kw-catalog-description p {

    margin: 0 0 8px;

}


.kw-catalog-description p:last-child {

    margin-bottom: 0;

}


/*
|--------------------------------------------------------------------------
| Main Layout
|--------------------------------------------------------------------------
*/


.kw-catalog-layout {

    display: grid;

    grid-template-columns:
        260px
        minmax(0, 1fr);

    gap: 34px;

    position: relative;

}


/*
|--------------------------------------------------------------------------
| Sidebar
|--------------------------------------------------------------------------
*/


.kw-catalog-sidebar {

    width: 100%;
    
    height: fit-content;
    position: sticky;
    top: 10%;

}


.kw-filter-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 8px;

}


.kw-filter-label {

    display: block;

    font-size: 18px;

    font-weight: 700;

    color: #161616;

}


.kw-filter-subtitle {

    display: block;

    margin-top: 3px;

    font-size: 12px;

    color: #888;

}


.kw-filter-mobile-close {

    display: none;

    width: 38px;

    height: 38px;

    border: 0;

    border-radius: 50%;

    background: #f2f2f2;

    font-size: 24px;

    cursor: pointer;

}


/*
|--------------------------------------------------------------------------
| Filter Groups
|--------------------------------------------------------------------------
*/


.kw-filter-group {

    padding: 20px 0;

    border-bottom: 1px solid #e9e9e9;

}


.kw-filter-group:first-of-type {

    border-top: 1px solid #e9e9e9;

}


.kw-filter-group-title {

    width: 100%;

    padding: 0;

    display: flex;

    justify-content: space-between;

    align-items: center;

    border: 0;

    background: transparent;

    color: #1a1a1a;

    font-size: 14px;

    font-weight: 700;

    text-align: left;

    cursor: pointer;

}


.kw-filter-arrow {

    font-size: 18px;

    line-height: 1;

    transition: transform .2s ease;

}


.kw-filter-group-title[aria-expanded="false"]
.kw-filter-arrow {

    transform: rotate(-90deg);

}


.kw-filter-group-content {

    margin-top: 16px;

    max-height: 500px;

    overflow: hidden;

    transition:
        max-height .25s ease,
        margin .25s ease;

}


.kw-filter-group-content.collapsed {

    max-height: 0;

    margin-top: 0;

}


/*
|--------------------------------------------------------------------------
| Category
|--------------------------------------------------------------------------
*/


.kw-filter-category-link {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    padding: 7px 0;

    color: #656565;

    font-size: 15px;

    line-height: 1.5;

    text-decoration: none;

    transition:
        color .2s ease,
        padding-left .2s ease;

}


.kw-filter-category-link span:last-child {

    color: #aaa;

    font-size: 11px;

}


.kw-filter-category-link:hover,
.kw-filter-category-link.active {

    color: #111;

    padding-left: 4px;

}


/*
|--------------------------------------------------------------------------
| Checkbox
|--------------------------------------------------------------------------
*/


.kw-filter-check {

    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 32px;

    cursor: pointer;

    font-size: 13px;

    color: #555;

}


.kw-filter-check input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}


.kw-check-box {

    width: 17px;

    height: 17px;

    flex: 0 0 17px;

    border: 1px solid #cfcfcf;

    border-radius: 4px;

    background: #fff;

    position: relative;

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

}


.kw-filter-check input:checked
+ .kw-check-box {

    border-color: #111;

    background: #111;

}


.kw-filter-check input:checked
+ .kw-check-box::after {

    content: "";

    position: absolute;

    left: 5px;

    top: 2px;

    width: 5px;

    height: 9px;

    border:
        solid #fff;

    border-width:
        0 2px 2px 0;

    transform: rotate(45deg);

}


.kw-check-label {

    flex: 1;

}


.kw-check-count {

    color: #aaa;

    font-size: 11px;

}


/*
|--------------------------------------------------------------------------
| Radio
|--------------------------------------------------------------------------
*/


.kw-filter-radio {

    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 34px;

    cursor: pointer;

    color: #555;

    font-size: 13px;

}


.kw-filter-radio input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}


.kw-radio-box {

    width: 17px;

    height: 17px;

    border: 1px solid #cfcfcf;

    border-radius: 50%;

    position: relative;

}


.kw-filter-radio input:checked
+ .kw-radio-box {

    border-color: #111;

}


.kw-filter-radio input:checked
+ .kw-radio-box::after {

    content: "";

    position: absolute;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #111;

    left: 4px;

    top: 4px;

}


/*
|--------------------------------------------------------------------------
| Price
|--------------------------------------------------------------------------
*/


.kw-price-fields {

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 7px;

}


.kw-price-field {

    height: 40px;

    display: flex;

    align-items: center;

    border: 1px solid #ddd;

    border-radius: 7px;

    background: #fff;

    overflow: hidden;

}


.kw-price-field > span {

    padding-left: 10px;

    color: #777;

    font-size: 14px;

}


.kw-price-field input {

    width: 100%;

    min-width: 0;

    height: 100%;

    padding: 0 8px;

    border: 0;

    outline: 0;

    background: transparent;

    color: #222;

    font-size: 14px;

}


.kw-price-field input:focus {

    outline: none;

}


.kw-price-separator {

    color: #999;

}


/*
|--------------------------------------------------------------------------
| Filter Actions
|--------------------------------------------------------------------------
*/


.kw-filter-actions {

    display: flex;

    align-items: center;

    gap: 10px;

    padding-top: 20px;

}


.kw-filter-apply {

    flex: 1;

    min-height: 44px;

    padding: 10px 14px;

    border: 0;

    border-radius: 8px;

    background: #111;

    color: #fff;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;

}


.kw-filter-apply:hover {

    background: #2a2a2a;

    transform: translateY(-1px);

}


.kw-filter-reset {

    min-height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 10px 13px;

    border: 1px solid #ddd;

    border-radius: 8px;

    color: #555;

    font-size: 12px;

    text-decoration: none;

}


.kw-filter-reset:hover {

    color: #111;

    border-color: #bbb;

}


/*
|--------------------------------------------------------------------------
| Main Content
|--------------------------------------------------------------------------
*/


.kw-catalog-main {

    min-width: 0;

}


/*
|--------------------------------------------------------------------------
| Toolbar
|--------------------------------------------------------------------------
*/


.kw-catalog-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;

    padding-bottom: 18px;

    border-bottom: 1px solid #e9e9e9;

}


.kw-toolbar-left,
.kw-toolbar-right {

    display: flex;

    align-items: center;

    gap: 12px;

}


.kw-product-count {

    color: #777;

    font-size: 13px;

}


.kw-sort-label {

    color: #777;

    font-size: 12px;
    width: 30%;

}


.kw-catalog-sort {

    min-width: 170px;

    height: 40px;

    padding:
        0 34px 0 12px;

    border: 1px solid #ddd;

    border-radius: 7px;

    background: #fff;

    color: #333;

    font-size: 12px;

    cursor: pointer;

}


.kw-mobile-filter-button {

    display: none;

}


/*
|--------------------------------------------------------------------------
| Product Grid
|--------------------------------------------------------------------------
*/


.kw-catalog-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 26px 18px;

}


/*
|--------------------------------------------------------------------------
| Empty
|--------------------------------------------------------------------------
*/


.kw-catalog-empty {

    padding: 90px 20px;

    text-align: center;

    border: 1px solid #eee;

    border-radius: 16px;

    background: #fafafa;

}


.kw-empty-icon {

    margin-bottom: 12px;

    font-size: 38px;

    color: #999;

}


.kw-catalog-empty h2 {

    margin: 0 0 8px;

    color: #222;

    font-size: 22px;

}


.kw-catalog-empty p {

    margin: 0 0 20px;

    color: #777;

    font-size: 14px;

}


.kw-empty-reset {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    padding: 0 18px;

    border-radius: 7px;

    background: #111;

    color: #fff;

    text-decoration: none;

    font-size: 13px;

}


/*
|--------------------------------------------------------------------------
| Pagination
|--------------------------------------------------------------------------
*/


.kw-catalog-pagination {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 50px;

}


.kw-catalog-pagination .page-numbers {

    min-width: 38px;

    height: 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 10px;

    border: 1px solid #e1e1e1;

    border-radius: 7px;

    color: #555;

    text-decoration: none;

    font-size: 12px;

    background: #fff;

}


.kw-catalog-pagination
.page-numbers:hover {

    border-color: #111;

    color: #111;

}


.kw-catalog-pagination
.page-numbers.current {

    border-color: #111;

    background: #111;

    color: #fff;

}


/*
|--------------------------------------------------------------------------
| Mobile Overlay
|--------------------------------------------------------------------------
*/


.kw-catalog-mobile-overlay {

    display: none;

}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/


@media (max-width: 1100px) {

    .kw-catalog-layout {

        grid-template-columns:
            220px
            minmax(0, 1fr);

        gap: 25px;

    }


    .kw-catalog-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 22px 15px;

    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/


@media (max-width: 900px) {

    .kw-catalog-page {

        padding:
            30px 18px 60px;

    }


    .kw-catalog-header {

        margin-bottom: 28px;

    }


    .kw-catalog-layout {

        display: block;

    }


    /*
    |--------------------------------------------------------------------------
    | Sidebar Mobile Drawer
    |--------------------------------------------------------------------------
    */

    .kw-catalog-sidebar {

        position: fixed;

        z-index: 10001;

        top: 0;

        left: 0;

        width: min(
            340px,
            88vw
        );

        height: 100vh;

        padding: 24px;

        overflow-y: auto;

        background: #fff;

        box-shadow:
            10px 0 40px rgba(
                0,
                0,
                0,
                .15
            );

        transform:
            translateX(-105%);

        transition:
            transform .3s ease;

    }


    .kw-catalog-sidebar.active {

        transform:
            translateX(0);

    }


    .kw-filter-mobile-close {

        display: block;

    }


    .kw-catalog-mobile-overlay {

        position: fixed;

        z-index: 10000;

        inset: 0;

        display: block;

        background:
            rgba(
                0,
                0,
                0,
                .45
            );

        opacity: 0;

        visibility: hidden;

        transition:
            opacity .25s ease,
            visibility .25s ease;

    }


    .kw-catalog-mobile-overlay.active {

        opacity: 1;

        visibility: visible;

    }


    body.kw-filter-open {

        overflow: hidden;

    }


    /*
    |--------------------------------------------------------------------------
    | Toolbar
    |--------------------------------------------------------------------------
    */

    .kw-catalog-toolbar {

        margin-bottom: 20px;

    }


    .kw-mobile-filter-button {

        display: inline-flex;

        align-items: center;

        gap: 7px;

        min-height: 40px;

        padding: 0 13px;

        border: 1px solid #ddd;

        border-radius: 7px;

        background: #fff;

        color: #333;

        font-size: 12px;

        cursor: pointer;

    }


    .kw-filter-icon {

        font-size: 14px;

    }


    .kw-sort-label {

        display: none;

    }


    .kw-catalog-sort {

        min-width: 145px;

    }


    .kw-catalog-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px 12px;

    }

}


/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/


@media (max-width: 480px) {

    .kw-catalog-page {

        padding:
            24px 14px 50px;

    }


    .kw-catalog-title {

        font-size: 32px;

        letter-spacing: -1px;

    }


    .kw-catalog-description {

        font-size: 13px;

        line-height: 1.65;

    }


    .kw-catalog-toolbar {

        align-items: center;

        gap: 8px;

    }


    .kw-toolbar-left,
    .kw-toolbar-right {

        gap: 7px;

    }


    .kw-product-count {

        font-size: 11px;

    }


    .kw-catalog-sort {

        min-width: 125px;

        padding-left: 8px;

        padding-right: 25px;

        font-size: 11px;

    }


    .kw-mobile-filter-button {

        padding: 0 10px;

        font-size: 11px;

    }


    .kw-catalog-grid {

        gap: 18px 9px;

    }


    .kw-catalog-pagination {

        margin-top: 35px;

    }

}