/* Custom WooCommerce Category Layout */
:root {
    --cwcl-primary: #1c61e7;
    --cwcl-dark: #164fc0;
    --cwcl-line: #e8ebf1;
    --cwcl-bg: #f3f5f8
}

.cwcl-page {
    direction: rtl;
    background: var(--cwcl-bg);
    padding: 18px clamp(10px, 1.5vw, 24px) 40px;
    color: #303744;
    font-family: inherit
}

.cwcl-page * {
    box-sizing: border-box
}

.cwcl-breadcrumb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 13px;
    padding: 12px 16px;
    margin: 0 auto 16px;
    max-width: 1500px;
    font-size: 11px;
    color: #7d8490
}

.cwcl-breadcrumb .woocommerce-breadcrumb {
    margin: 0
}

.cwcl-sep {
    padding: 0 7px;
    color: #b6bdc8
}

.cwcl-subcategories {
    max-width: 1500px;
    margin: 0 auto 18px;
    background: #fff;
    border-radius: 15px;
    padding: 17px;
    box-shadow: 0 5px 22px #18243c0d
}

.cwcl-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px
}

.cwcl-heading h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: #404957
}

.cwcl-heading span {
    height: 2px;
    flex: 1;
    background: linear-gradient(to left, var(--cwcl-primary), #eaf0fb)
}

.cwcl-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
    gap: 12px
}

.cwcl-category-tile {
    min-width: 0;
    text-decoration: none !important;
    color: #515967 !important;
    background: #fff;
    border: 1px solid var(--cwcl-line);
    border-radius: 12px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 7px;
    transition: .2s
}

.cwcl-category-tile:hover {
    transform: translateY(-3px);
    border-color: #c4d7ff;
    box-shadow: 0 7px 18px #1c61e717
}

.cwcl-category-image {
    width: 100%;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center
}

.cwcl-category-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0 !important
}

.cwcl-category-tile strong {
    font-size: 12px;
    line-height: 1.7
}

.cwcl-category-tile small {
    font-size: 10px;
    color: #9aa1ad
}

.cwcl-layout {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    /* grid-template-columns: minmax(0, 1fr) 250px; */
    gap: 16px;
    align-items: start
}

.cwcl-sidebar {
    grid-column: 1;
    grid-row: 1;
    background: #fff;
    border-radius: 15px;
    padding: 13px;
    box-shadow: 0 5px 22px #18243c0d
}

.cwcl-sidebar-title {
    display: flex;
    justify-content: space-between;
    background: #f0f2f5;
    border-radius: 8px;
    padding: 11px 12px;
    font-size: 13px;
    font-weight: 800;
    color: #505866
}

.cwcl-sidebar-title span {
    color: var(--cwcl-primary)
}

.cwcl-filter-group {
    padding: 18px 2px;
    border-bottom: 1px solid #edf0f4
}

.cwcl-filter-group h3 {
    margin: 0 0 13px;
    font-size: 12px;
    color: #727b88
}

.cwcl-filter-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    font-size: 11px;
    color: #606977
}

.cwcl-filter-group input[type=checkbox] {
    accent-color: var(--cwcl-primary)
}

.cwcl-price-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px
}

.cwcl-price-fields input {
    width: 100%;
    min-width: 0;
    padding: 8px 5px;
    border: 1px solid var(--cwcl-line);
    border-radius: 8px;
    font: inherit;
    font-size: 10px
}

.cwcl-apply {
    width: 100%;
    margin-top: 12px;
    border: 0;
    border-radius: 9px;
    padding: 10px;
    background: var(--cwcl-primary);
    color: white;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer
}

.cwcl-reset {
    border: 0;
    background: transparent;
    color: var(--cwcl-primary);
    font: inherit;
    font-size: 11px;
    padding: 13px 3px 2px;
    cursor: pointer
}

.cwcl-main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0
}

.cwcl-toolbar {
    min-height: 48px;
    background: #fff;
    border-radius: 12px;
    padding: 9px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: #727a87;
    font-size: 11px
}

.cwcl-toolbar label {
    display: flex;
    align-items: center;
    gap: 8px
}

.cwcl-toolbar select {
    max-width: 210px;
    border: 1px solid #e7ebf2;
    border-radius: 8px;
    background: #fff;
    padding: 7px 9px;
    color: #525b68;
    font: inherit
}

.cwcl-products {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 !important;
    background: #fff;
    border: 1px solid #e1e5ec;
    overflow: hidden
}

.cwcl-products:before,
.cwcl-products:after {
    display: none !important
}

.cwcl-products li.cwcl-product {
    position: relative;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    min-width: 0;
    padding: 13px 10px 12px !important;
    border-left: 1px solid #e8ebf0;
    border-bottom: 1px solid #e8ebf0;
    text-align: center;
    background: #fff
}

.cwcl-products li.cwcl-product:nth-child(4n) {
    border-left: 0
}

.cwcl-product-link {
    text-decoration: none !important;
    display: block
}

.cwcl-product-link img {
    width: 100% !important;
    height: 145px !important;
    object-fit: contain;
    margin: 0 auto 9px !important
}

.cwcl-product-link h2 {
    color: #707783 !important;
    font-size: 11px !important;
    line-height: 1.8 !important;
    font-weight: 500 !important;
    margin: 0 0 4px !important;
    min-height: 36px
}

.cwcl-price {
    color: var(--cwcl-primary);
    font-size: 11px;
    line-height: 1.8;
    font-weight: 700;
    margin: 0 0 7px
}

.cwcl-price del {
    color: #b4bac4;
    font-size: 9px;
    font-weight: 400
}

.cwcl-price ins {
    text-decoration: none
}

.cwcl-add-to-cart {
    display: inline-block !important;
    margin: 4px 0 0 !important;
    padding: 7px 9px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--cwcl-primary) !important;
    color: #fff !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important
}

.cwcl-add-to-cart:hover {
    background: var(--cwcl-dark) !important
}

.cwcl-sale {
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
    background: var(--cwcl-primary);
    color: #fff;
    border-radius: 20px;
    padding: 4px 8px;
    font-size: 9px
}

.cwcl-stock {
    display: block;
    color: #22a66a;
    font-size: 10px
}

.cwcl-pagination {
    margin: 18px 0;
    text-align: center
}

.cwcl-pagination ul {
    display: flex;
    justify-content: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0
}

.cwcl-pagination li a,
.cwcl-pagination li span {
    display: grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--cwcl-line);
    border-radius: 8px;
    color: #5d6674;
    background: #fff;
    text-decoration: none;
    font-size: 12px
}

.cwcl-pagination li span.current {
    background: var(--cwcl-primary);
    border-color: var(--cwcl-primary);
    color: #fff
}

.cwcl-empty,
.cwcl-notice {
    padding: 28px;
    text-align: center;
    border-radius: 12px;
    background: #fff;
    color: #737b88;
    font-size: 13px
}

@media(max-width:1100px) {
    .cwcl-layout {
        grid-template-columns: minmax(0, 1fr) 220px;
        gap: 12px
    }

    .cwcl-products {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .cwcl-products li.cwcl-product:nth-child(4n) {
        border-left: 1px solid #e8ebf0
    }

    .cwcl-products li.cwcl-product:nth-child(3n) {
        border-left: 0
    }

    .cwcl-product-link img {
        height: 130px !important
    }
}

@media(max-width:700px) {
    .cwcl-page {
        padding: 10px 8px 25px
    }

    .cwcl-breadcrumb {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px
    }

    .cwcl-subcategories {
        padding: 12px
    }

    .cwcl-heading h2 {
        font-size: 15px
    }

    .cwcl-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px
    }

    .cwcl-category-image {
        height: 65px
    }

    .cwcl-category-tile strong {
        font-size: 11px
    }

    .cwcl-layout {
        display: flex;
        flex-direction: column
    }

    .cwcl-sidebar,
    .cwcl-main {
        width: 100%
    }

    .cwcl-toolbar {
        align-items: flex-start;
        flex-direction: column
    }

    .cwcl-toolbar label {
        width: 100%
    }

    .cwcl-toolbar select {
        flex: 1;
        max-width: none
    }

    .cwcl-products {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .cwcl-products li.cwcl-product:nth-child(3n) {
        border-left: 1px solid #e8ebf0
    }

    .cwcl-products li.cwcl-product:nth-child(2n) {
        border-left: 0
    }

    .cwcl-product-link img {
        height: 125px !important
    }

    .cwcl-product-link h2 {
        font-size: 10px !important
    }
}