/* ============================================================
   NATIONLED - PRODUCT CATEGORY ARCHIVE
   ACCORDION SIDEBAR - FONT WEIGHT 700

   MAIN COLOR:
   #28cb8b
   #078563

   SIDEBAR:
   - Chỉ mở category đang active
   - Click category khác để mở
   - Chỉ mở 1 category cùng lúc
   - TOÀN BỘ TEXT SIDEBAR FONT-WEIGHT 700
============================================================ */


/* ============================================================
   01. VARIABLES
============================================================ */

.tax-product_cat {
    --kht-green: #39b54a;
    --kht-green-dark: #278f38;
    --kht-green-soft: #edf8ef;

    --nl-green: #28cb8b;
    --nl-dark: #078563;

    --nl-soft: #eafbf4;
    --nl-soft-2: #f5fcf9;

    --nl-text: #18251f;
    --nl-text-2: #526159;
    --nl-text-3: #829089;

    --nl-border: #e2ebe6;
    --nl-white: #ffffff;

    --nl-container: 1240px;
}


/* ============================================================
   02. MAIN
============================================================ */

.tax-product_cat #main {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    background:
        radial-gradient(circle at 100% 10%,
            rgba(40, 203, 139, 0.035),
            transparent 32%),
        #ffffff;
}


/* ============================================================
   03. SHOP PAGE TITLE
============================================================ */

.tax-product_cat .shop-page-title {
    width: 100%;

    margin: 0;

    background: #ffffff;

    border: 0;
}


/* ============================================================
   04. PAGE TITLE INNER
============================================================ */

.tax-product_cat .shop-page-title .page-title-inner {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 24px;

    width:
        min(var(--nl-container),
            calc(100% - 40px));

    max-width:
        var(--nl-container);

    min-height: 68px;

    margin: 0 auto;

    padding: 13px 0;

    border-bottom:
        1px solid #edf2ee;

    box-sizing: border-box;
}


/* ============================================================
   05. RESET FLEX
============================================================ */

.tax-product_cat .shop-page-title .page-title-inner>.flex-col {
    display: flex;

    align-items: center;

    min-width: 0;

    margin: 0;
    padding: 0;
}


/* ============================================================
   06. BREADCRUMB
   GIỮ NGUYÊN
============================================================ */

.tax-product_cat .shop-page-title .breadcrumbs {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    margin: 0;

    color:
        var(--kht-green);

    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}


.tax-product_cat .shop-page-title .breadcrumbs a {
    color:
        var(--kht-green);

    font-weight: 700;

    text-decoration: none;

    transition:
        color 0.2s ease;
}


.tax-product_cat .shop-page-title .breadcrumbs a:hover {
    color:
        var(--kht-green-dark);
}


.tax-product_cat .shop-page-title .breadcrumbs .current {
    color:
        var(--kht-green);

    font-weight: 700;
}


.tax-product_cat .shop-page-title .breadcrumbs .divider {
    margin:
        0 9px;

    color:
        rgba(57, 181, 74, 0.38);

    font-weight: 400;
}


/* ============================================================
   07. RESULT COUNT
============================================================ */

.tax-product_cat .shop-page-title .page-title-inner>.flex-col:last-child {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    margin-left: auto;
}


.tax-product_cat .woocommerce-result-count {
    position: relative;

    display: inline-flex;

    align-items: center;

    min-height: 39px;

    margin: 0;

    padding:
        0 13px 0 25px;

    color:
        var(--nl-text-2);

    font-size: 12px;
    font-weight: 500;
    line-height: 1;

    white-space: nowrap;

    background:
        #f7faf7;

    border:
        1px solid #e4ece5;

    border-radius: 10px;

    box-sizing: border-box;
}


.tax-product_cat .woocommerce-result-count::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 12px;

    width: 6px;
    height: 6px;

    transform:
        translateY(-50%);

    background:
        var(--kht-green);

    border-radius: 50%;

    box-shadow:
        0 0 0 3px rgba(57, 181, 74, 0.09);
}


/* ============================================================
   08. HIDE SORTING
============================================================ */

.tax-product_cat .woocommerce-ordering {
    display: none;
}


/* ============================================================
   09. MAIN LAYOUT
============================================================ */

.tax-product_cat #main .category-page-row {
    display: grid;

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

    align-items: start;

    gap: 32px;

    width:
        min(var(--nl-container),
            calc(100% - 40px));

    max-width:
        var(--nl-container);

    margin:
        0 auto;

    padding:
        32px 0 70px;

    box-sizing:
        border-box;
}


/* ============================================================
   10. RESET FLATSOME COLUMN
============================================================ */

.tax-product_cat #main .category-page-row>.col {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    flex-basis: auto;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


.tax-product_cat #main .category-page-row>.col.large-3,

.tax-product_cat #main .category-page-row>.col.large-9 {
    width: 100%;
    max-width: 100%;
}


/* ============================================================
   11. STICKY SIDEBAR
============================================================ */

@media (min-width: 850px) {

    .tax-product_cat .category-page-row .is-sticky-column__inner {
        position: sticky;

        top: 95px;
    }

}


/* ============================================================
   12. SIDEBAR
============================================================ */

.tax-product_cat #shop-sidebar {
    position: relative;

    width: 100%;

    margin: 0;

    padding:
        0 0 15px;

    overflow: hidden;

    background:
        #ffffff;

    border:
        1px solid #e1ebe5;

    border-radius:
        18px;

    box-shadow:
        0 8px 30px rgba(19, 59, 43, 0.055);

    box-sizing:
        border-box;
}


/* Accent top */
.tax-product_cat #shop-sidebar::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 4px;

    background:
        linear-gradient(90deg,
            var(--nl-green),
            var(--nl-dark));
}


/* ============================================================
   13. SIDEBAR WIDGET
============================================================ */

.tax-product_cat #shop-sidebar .widget {
    margin: 0;
    padding: 0;

    border: 0;
}


/* ============================================================
   14. SIDEBAR TITLE
   FONT WEIGHT 700
============================================================ */

.tax-product_cat #shop-sidebar .widget-title {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 67px;

    margin: 0;

    padding:
        5px 19px 0;

    color:
        var(--nl-text);

    font-size: 16px;

    font-weight: 700;

    line-height: 1.35;

    letter-spacing:
        0.015em;

    text-transform:
        uppercase;

    background:
        linear-gradient(180deg,
            #fbfefc,
            #ffffff);

    border-bottom:
        1px solid #edf2ef;

    box-sizing:
        border-box;
}


/* Icon title */
.tax-product_cat #shop-sidebar .widget-title::before {
    content: "";

    width: 10px;
    height: 10px;

    margin-right:
        11px;

    flex:
        0 0 auto;

    background:
        var(--nl-green);

    border-radius:
        3px;

    box-shadow:
        0 0 0 4px rgba(40, 203, 139, 0.10);

    transform:
        rotate(45deg);
}


/* ============================================================
   15. HIDE DEFAULT
============================================================ */

.tax-product_cat #shop-sidebar .is-divider {
    display: none;
}


.tax-product_cat #shop-sidebar .dropdown_product_cat,

.tax-product_cat #shop-sidebar .select2-container {
    display: none;
}


/* ============================================================
   16. CATEGORY MENU
============================================================ */

.tax-product_cat #shop-sidebar .nl-cat-menu {
    display: block;

    width: 100%;

    margin: 0;

    padding:
        14px 11px 0;

    box-sizing:
        border-box;
}


/* ============================================================
   17. RESET LIST
============================================================ */

.tax-product_cat #shop-sidebar .nl-cat-list,

.tax-product_cat #shop-sidebar .nl-cat-sublist {
    list-style: none;

    margin: 0;
    padding: 0;
}


.tax-product_cat #shop-sidebar .nl-cat-item {
    position: relative;

    margin: 0;
    padding: 0;
}


/* ============================================================
   18. ROOT ITEM
============================================================ */

.tax-product_cat #shop-sidebar .nl-cat-list>.nl-cat-item {
    margin:
        0 0 8px;
}


/* ============================================================
   19. ROOT ROW
============================================================ */

.tax-product_cat #shop-sidebar .nl-cat-parent-row {
    position: relative;

    display: flex;

    align-items: stretch;

    width: 100%;

    overflow: hidden;

    background:
        #f7faf8;

    border:
        1px solid #e5eee9;

    border-radius:
        11px;

    box-sizing:
        border-box;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* Group mở */
.tax-product_cat #shop-sidebar .nl-cat-item.is-open>.nl-cat-parent-row {
    background:
        #f1faf6;

    border-color:
        rgba(40, 203, 139, 0.32);
}


/* Group active */
.tax-product_cat #shop-sidebar .nl-cat-item.has-active-child>.nl-cat-parent-row {
    background:
        linear-gradient(100deg,
            rgba(40, 203, 139, 0.10),
            rgba(7, 133, 99, 0.05));

    border-color:
        rgba(40, 203, 139, 0.36);
}


/* ============================================================
   20. ROOT CATEGORY
   FONT-WEIGHT 700
============================================================ */

.tax-product_cat #shop-sidebar .nl-cat-parent-link {
    position: relative;

    display: flex;

    align-items: center;

    min-width: 0;

    flex:
        1 1 auto;

    min-height:
        51px;

    margin: 0;

    padding:
        9px 7px 9px 13px;

    color:
        #293832;

    font-family:
        inherit;

    font-size:
        13.2px;

    font-weight:
        700;

    line-height:
        1.45;

    letter-spacing:
        0.005em;

    text-align:
        left;

    text-transform:
        uppercase;

    cursor:
        pointer;

    background:
        transparent;

    border:
        0;

    box-shadow:
        none;

    box-sizing:
        border-box;
}


/* Marker parent */
.tax-product_cat #shop-sidebar .nl-cat-parent-link::before {
    content: "";

    width: 6px;
    height: 6px;

    margin-right:
        10px;

    flex:
        0 0 auto;

    background:
        #aebdb5;

    border-radius:
        50%;

    transition:
        background 0.2s ease,
        box-shadow 0.2s ease;
}


/* Marker open / active */
.tax-product_cat #shop-sidebar .nl-cat-item.has-active-child .nl-cat-parent-link::before,

.tax-product_cat #shop-sidebar .nl-cat-item.is-open .nl-cat-parent-link::before {
    background:
        var(--nl-green);

    box-shadow:
        0 0 0 3px rgba(40, 203, 139, 0.10);
}


/* ============================================================
   21. CATEGORY LABEL
   FONT-WEIGHT 700
============================================================ */

.tax-product_cat #shop-sidebar .nl-cat-label {
    display: block;

    min-width: 0;

    flex:
        1 1 auto;

    overflow-wrap:
        anywhere;

    font-weight:
        700;
}


/* ============================================================
   22. COUNT BADGE
   FONT-WEIGHT 700
============================================================ */

.tax-product_cat #shop-sidebar .nl-cat-count {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width:
        23px;

    height:
        23px;

    margin-left:
        8px;

    padding:
        0 6px;

    flex:
        0 0 auto;

    color:
        #708078;

    font-size:
        9.5px;

    font-weight:
        700;

    line-height:
        1;

    background:
        #ffffff;

    border:
        1px solid #e0e9e4;

    border-radius:
        999px;

    box-sizing:
        border-box;
}


/* ============================================================
   23. ACCORDION TOGGLE
============================================================ */

.tax-product_cat #shop-sidebar .nl-cat-toggle {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width:
        42px;

    min-width:
        42px;

    min-height:
        51px;

    margin: 0;
    padding: 0;

    cursor:
        pointer;

    background:
        transparent;

    border:
        0;

    border-left:
        1px solid #e3ece7;

    box-shadow:
        none;
}


.tax-product_cat #shop-sidebar .nl-cat-toggle::before {
    content: "";

    width: 7px;
    height: 7px;

    transform:
        translateY(-2px) rotate(45deg);

    border-right:
        1.5px solid #607269;

    border-bottom:
        1.5px solid #607269;

    transition:
        transform 0.28s ease,
        border-color 0.2s ease;
}


/* Arrow open */
.tax-product_cat #shop-sidebar .nl-cat-item.is-open>.nl-cat-parent-row>.nl-cat-toggle::before {
    transform:
        translateY(2px) rotate(225deg);

    border-color:
        var(--nl-dark);
}


/* ============================================================
   24. ROOT HOVER
============================================================ */

@media (hover: hover) {

    .tax-product_cat #shop-sidebar .nl-cat-parent-row:hover {
        background:
            #f3faf6;

        border-color:
            rgba(40, 203, 139, 0.30);
    }


    .tax-product_cat #shop-sidebar .nl-cat-parent-row:hover .nl-cat-parent-link {
        color:
            var(--nl-dark);
    }

}


/* ============================================================
   25. ACTIVE PARENT
============================================================ */

.tax-product_cat #shop-sidebar .nl-cat-parent-link.is-active {
    color:
        var(--nl-dark);

    font-weight:
        700;
}


/* ============================================================
   26. ACCORDION WRAPPER
============================================================ */

.tax-product_cat #shop-sidebar .nl-cat-sublist-wrap {
    display: grid;

    grid-template-rows:
        0fr;

    opacity: 0;

    transition:
        grid-template-rows 0.32s cubic-bezier(0.2,
            0.7,
            0.2,
            1),
        opacity 0.22s ease;
}


/* Open */
.tax-product_cat #shop-sidebar .nl-cat-item.is-open>.nl-cat-sublist-wrap {
    grid-template-rows:
        1fr;

    opacity: 1;
}


/* ============================================================
   27. SUBLIST
============================================================ */

.tax-product_cat #shop-sidebar .nl-cat-sublist {
    min-height: 0;

    overflow: hidden;
}


.tax-product_cat #shop-sidebar .nl-cat-sublist-inner {
    position: relative;

    margin:
        8px 4px 6px 14px;

    padding:
        3px 0 3px 14px;

    border-left:
        1px solid #d9e7df;
}


/* ============================================================
   28. CHILD ITEM
============================================================ */

.tax-product_cat #shop-sidebar .nl-cat-sublist .nl-cat-item {
    position: relative;

    margin:
        3px 0;
}


/* ============================================================
   29. CHILD CATEGORY
   FONT-WEIGHT 700
============================================================ */

.tax-product_cat #shop-sidebar .nl-cat-sublist .nl-cat-link {
    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    min-height:
        39px;

    margin: 0;

    padding:
        8px 8px 8px 12px;

    color:
        #526159;

    font-family:
        inherit;

    font-size:
        12.4px;

    font-weight:
        700;

    line-height:
        1.45;

    letter-spacing:
        0;

    text-align:
        left;

    cursor:
        pointer;

    background:
        transparent;

    border:
        0;

    border-radius:
        9px;

    box-sizing:
        border-box;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* Connector */
.tax-product_cat #shop-sidebar .nl-cat-sublist .nl-cat-link::before {
    content: "";

    position: absolute;

    top: 50%;
    left: -14px;

    width:
        9px;

    height:
        1px;

    background:
        #d6e5dc;
}


/* ============================================================
   30. CHILD HOVER
============================================================ */

@media (hover: hover) {

    .tax-product_cat #shop-sidebar .nl-cat-sublist .nl-cat-link:hover {
        color:
            var(--nl-dark);

        background:
            #eef9f4;

        transform:
            translateX(2px);
    }

}


/* ============================================================
   31. CHILD ACTIVE
============================================================ */

.tax-product_cat #shop-sidebar .nl-cat-sublist .nl-cat-link.is-active {
    color:
        #ffffff;

    font-weight:
        700;

    background:
        linear-gradient(110deg,
            var(--nl-green),
            var(--nl-dark));

    box-shadow:
        0 6px 15px rgba(7, 133, 99, 0.16);
}


.tax-product_cat #shop-sidebar .nl-cat-sublist .nl-cat-link.is-active::before {
    height:
        2px;

    background:
        var(--nl-green);
}


.tax-product_cat #shop-sidebar .nl-cat-sublist .nl-cat-link.is-active .nl-cat-count {
    color:
        #ffffff;

    background:
        rgba(255, 255, 255, 0.15);

    border-color:
        rgba(255, 255, 255, 0.24);
}


/* ============================================================
   32. CHILD COUNT
============================================================ */

.tax-product_cat #shop-sidebar .nl-cat-sublist .nl-cat-count {
    min-width:
        22px;

    height:
        22px;

    margin-left:
        8px;

    padding:
        0 5px;

    font-size:
        9.5px;

    font-weight:
        700;
}


/* ============================================================
   33. SHOP CONTAINER
============================================================ */

.tax-product_cat #main .shop-container {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    box-sizing:
        border-box;
}


/* ============================================================
   34. PRODUCT GRID
============================================================ */

.tax-product_cat #main .shop-container>.products.row.row-small {
    display: grid;

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

    gap:
        22px;

    width: 100%;
    max-width: 100%;

    margin: 0;

    padding: 0;

    left: auto;
    right: auto;

    box-sizing:
        border-box;
}


/* ============================================================
   35. RESET PRODUCT COLUMN
============================================================ */

.tax-product_cat #main .shop-container .products.row.row-small>.product-small.col {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    flex: none;
    flex-basis: auto;

    margin: 0;
    padding: 0;

    box-sizing:
        border-box;
}


/* ============================================================
   36. PRODUCT CARD
============================================================ */

.tax-product_cat .products .product-small.col>.col-inner {
    position: relative;

    display: flex;

    flex-direction:
        column;

    width: 100%;
    height: 100%;

    margin: 0;

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        1px solid #e0eae4;

    border-radius:
        18px;

    box-shadow:
        0 6px 20px rgba(20, 58, 44, 0.045);

    box-sizing:
        border-box;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* ============================================================
   37. CARD HOVER
============================================================ */

@media (hover: hover) {

    .tax-product_cat .products .product-small.col>.col-inner:hover {
        transform:
            translateY(-5px);

        border-color:
            rgba(40, 203, 139, 0.34);

        box-shadow:
            0 18px 40px rgba(18, 68, 48, 0.09);
    }

}


/* ============================================================
   38. PRODUCT BOX
============================================================ */

.tax-product_cat .products .product-small.box {
    display: flex;

    flex-direction:
        column;

    width: 100%;
    height: 100%;

    margin: 0;

    background:
        transparent;
}


/* ============================================================
   39. IMAGE AREA
============================================================ */

.tax-product_cat .products .product-small .box-image {
    position: relative;

    width: 100%;

    aspect-ratio:
        1 / 1;

    margin: 0;

    overflow:
        hidden;

    background:
        radial-gradient(circle at 50% 45%,
            #ffffff 0%,
            #f5fbf8 62%,
            #edf7f2 100%);
}


.tax-product_cat .products .product-small .image-fade_in_back,

.tax-product_cat .products .product-small .image-fade_in_back>a {
    display: block;

    width: 100%;
    height: 100%;
}


/* ============================================================
   40. IMAGE
============================================================ */

.tax-product_cat .products .product-small .box-image img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform 0.45s cubic-bezier(0.2,
            0.7,
            0.2,
            1);
}


@media (hover: hover) {

    .tax-product_cat .products .product-small.col>.col-inner:hover .box-image img {
        transform:
            scale(1.04);
    }

}


/* ============================================================
   41. HIDE UNUSED PRODUCT ELEMENTS
============================================================ */

.tax-product_cat .products .badge-container:empty,

.tax-product_cat .products .image-tools.top.right,

.tax-product_cat .products .wishlist-icon,

.tax-product_cat .products .wishlist-popup,

.tax-product_cat .products .yith-wcwl-add-to-wishlist,

.tax-product_cat .products .image-tools.grid-tools,

.tax-product_cat .products .image-tools.bottom.left,

.tax-product_cat .products .price-wrapper,

.tax-product_cat .products .price {
    display: none;
}


/* ============================================================
   42. PRODUCT CONTENT
============================================================ */

.tax-product_cat .products .box-text.box-text-products {
    display: flex;

    flex: 1;

    flex-direction:
        column;

    width: 100%;

    padding:
        15px;

    text-align:
        left;

    background:
        #ffffff;

    border-top:
        1px solid #e8efeb;

    box-sizing:
        border-box;
}


/* ============================================================
   43. PRODUCT TITLE
============================================================ */

.tax-product_cat .products .title-wrapper {
    display: flex;

    flex: 1;

    width:
        100%;
}


.tax-product_cat .products .product-title {
    position: relative;

    display: flex;

    flex: 1;

    flex-direction:
        column;

    width:
        100%;

    min-height:
        91px;

    margin: 0;

    padding-bottom:
        43px;

    box-sizing:
        border-box;
}


/* ============================================================
   44. PRODUCT NAME
============================================================ */

.tax-product_cat .products .product-title a {
    display:
        -webkit-box;

    width:
        100%;

    max-height:
        42px;

    margin: 0;
    padding: 0;

    overflow:
        hidden;

    color:
        var(--nl-text);

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        20px;

    letter-spacing:
        -0.01em;

    text-decoration:
        none;

    text-overflow:
        ellipsis;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    transition:
        color 0.2s ease;
}


/* ============================================================
   45. CLICK AREA
============================================================ */

.tax-product_cat .products .product-title a::before {
    content: "";

    position:
        absolute;

    inset:
        0;

    z-index:
        2;
}


/* ============================================================
   46. CTA
============================================================ */

.tax-product_cat .products .product-title::after {
    content:
        "Xem chi tiết →";

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    left:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    height:
        34px;

    color:
        var(--nl-dark);

    font-size:
        10.5px;

    font-weight:
        700;

    background:
        var(--nl-soft);

    border:
        1px solid rgba(7, 133, 99, 0.14);

    border-radius:
        8px;

    pointer-events:
        none;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


@media (hover: hover) {

    .tax-product_cat .products .product-title:hover a {
        color:
            var(--nl-dark);
    }


    .tax-product_cat .products .product-title:hover::after {
        color:
            #ffffff;

        background:
            linear-gradient(100deg,
                var(--nl-green),
                var(--nl-dark));

        border-color:
            transparent;
    }

}


/* ============================================================
   47. OUT OF STOCK
============================================================ */

.tax-product_cat .products .out-of-stock-label {
    position:
        absolute;

    right:
        10px;

    bottom:
        10px;

    left:
        auto;

    width:
        auto;

    padding:
        7px 10px;

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        700;

    background:
        rgba(30, 43, 37, 0.84);

    border-radius:
        999px;
}


/* ============================================================
   48. NOTICES
============================================================ */

.tax-product_cat .woocommerce-notices-wrapper:empty {
    display:
        none;
}


/* ============================================================
   49. PAGINATION
============================================================ */

.tax-product_cat .shop-container>.container {
    width:
        100%;

    max-width:
        100%;

    margin:
        0;

    padding:
        0;
}


.tax-product_cat .woocommerce-pagination {
    margin:
        40px 0 0;
}


.tax-product_cat .nav-pagination {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    margin:
        0;
}


.tax-product_cat .nav-pagination>li {
    margin:
        0;
}


.tax-product_cat .nav-pagination .page-number {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        39px;

    min-width:
        39px;

    height:
        39px;

    padding:
        0;

    color:
        #617068;

    font-size:
        12px;

    font-weight:
        700;

    background:
        #ffffff;

    border:
        1px solid var(--nl-border);

    border-radius:
        10px;

    transition:
        all 0.2s ease;
}


.tax-product_cat .nav-pagination .page-number.current {
    color:
        #ffffff;

    background:
        linear-gradient(135deg,
            var(--nl-green),
            var(--nl-dark));

    border-color:
        transparent;
}


/* ============================================================
   50. TABLET
============================================================ */

@media (max-width: 1100px) {

    .tax-product_cat .shop-page-title .page-title-inner {
        width:
            calc(100% - 32px);
    }


    .tax-product_cat #main .category-page-row {
        grid-template-columns:
            275px minmax(0, 1fr);

        gap:
            22px;

        width:
            calc(100% - 32px);

        padding:
            25px 0 55px;
    }


    .tax-product_cat #main .shop-container>.products.row.row-small {
        gap:
            15px;
    }


    .tax-product_cat #shop-sidebar .widget-title {
        font-size:
            15px;

        font-weight:
            700;
    }


    .tax-product_cat #shop-sidebar .nl-cat-parent-link {
        font-size:
            12.3px;

        font-weight:
            700;
    }


    .tax-product_cat #shop-sidebar .nl-cat-sublist .nl-cat-link {
        font-size:
            11.7px;

        font-weight:
            700;
    }

}


/* ============================================================
   51. FLATSOME TABLET
============================================================ */

@media (max-width: 849px) {

    .tax-product_cat #main .category-page-row {
        display:
            block;

        width:
            calc(100% - 32px);

        padding:
            22px 0 50px;
    }


    .tax-product_cat #main .shop-container>.products.row.row-small {
        grid-template-columns:
            repeat(3,
                minmax(0, 1fr));

        gap:
            15px;
    }


    .tax-product_cat .category-filtering {
        margin:
            8px 0 0;
    }


    .tax-product_cat .category-filtering .filter-button {
        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            7px;

        min-height:
            36px;

        margin:
            0;

        padding:
            0 13px;

        color:
            var(--nl-dark);

        font-size:
            11px;

        font-weight:
            700;

        background:
            var(--nl-soft);

        border:
            1px solid rgba(7, 133, 99, 0.16);

        border-radius:
            8px;
    }


    .tax-product_cat .mfp-content #shop-sidebar,

    .tax-product_cat .off-canvas #shop-sidebar {
        border:
            0;

        border-radius:
            0;

        box-shadow:
            none;
    }

}


/* ============================================================
   52. MOBILE
============================================================ */

@media (max-width: 767px) {

    .tax-product_cat .shop-page-title .page-title-inner {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            9px;

        width:
            calc(100% - 20px);

        min-height:
            0;

        padding:
            10px 0 12px;
    }


    .tax-product_cat .shop-page-title .page-title-inner>.flex-col:first-child {
        width:
            100%;
    }


    .tax-product_cat .shop-page-title .breadcrumbs {
        overflow:
            hidden;

        flex-wrap:
            nowrap;

        width:
            100%;

        font-size:
            10.5px;

        white-space:
            nowrap;

        text-overflow:
            ellipsis;
    }


    .tax-product_cat .shop-page-title .page-title-inner>.flex-col:last-child {
        width:
            100%;

        margin:
            0;
    }


    .tax-product_cat .woocommerce-result-count {
        min-height:
            34px;

        padding:
            0 10px 0 22px;

        font-size:
            10px;
    }


    .tax-product_cat #main .category-page-row {
        width:
            calc(100% - 20px);

        padding:
            15px 0 35px;
    }


    .tax-product_cat #main .shop-container>.products.row.row-small {
        grid-template-columns:
            repeat(2,
                minmax(0, 1fr));

        column-gap:
            10px;

        row-gap:
            13px;
    }


    .tax-product_cat .products .product-small.col>.col-inner {
        border-radius:
            13px;
    }


    .tax-product_cat .products .box-text.box-text-products {
        padding:
            9px;
    }


    .tax-product_cat .products .product-title {
        min-height:
            73px;

        padding-bottom:
            37px;
    }


    .tax-product_cat .products .product-title a {
        max-height:
            34px;

        font-size:
            11px;

        line-height:
            17px;

        font-weight:
            700;
    }


    .tax-product_cat .products .product-title::after {
        height:
            29px;

        font-size:
            9.3px;

        font-weight:
            700;
    }


    /* Sidebar mobile */

    .tax-product_cat #shop-sidebar .widget-title {
        font-size:
            15.5px;

        font-weight:
            700;
    }


    .tax-product_cat #shop-sidebar .nl-cat-parent-link {
        font-size:
            12.8px;

        font-weight:
            700;
    }


    .tax-product_cat #shop-sidebar .nl-cat-sublist .nl-cat-link {
        font-size:
            12px;

        font-weight:
            700;
    }

}


/* ============================================================
   53. MOBILE SMALL
============================================================ */

@media (max-width: 390px) {

    .tax-product_cat #main .category-page-row {
        width:
            calc(100% - 16px);
    }


    .tax-product_cat #main .shop-container>.products.row.row-small {
        column-gap:
            7px;

        row-gap:
            10px;
    }


    .tax-product_cat .products .box-text.box-text-products {
        padding:
            8px 7px;
    }


    .tax-product_cat .products .product-title a {
        font-size:
            10.3px;

        line-height:
            16px;

        font-weight:
            700;
    }


    .tax-product_cat #shop-sidebar .nl-cat-parent-link {
        font-size:
            12.5px;

        font-weight:
            700;
    }


    .tax-product_cat #shop-sidebar .nl-cat-sublist .nl-cat-link {
        font-size:
            11.8px;

        font-weight:
            700;
    }

}