.category-info-top { background:var(--gray); padding: 80px 0 120px 0; overflow:hidden; position:relative;}
    .category-info-top .image { overflow: hidden; }
    .category-info-top .category-image { max-width: 100%; }
    .category-info-top .categoryText { width: 800px; max-width: 90%; margin: auto; text-align: center; }
        .category-info-top .categoryText h1 { margin: 20px 0; font-size: 3rem; font-weight: 500; text-align: center;text-transform:uppercase; color:#fff; }
        .category-info-top .categoryText p { font-size: 1rem; color: #fff; }
    .sub-categories-wrapper { margin: 10px 0 45px 0; }
    .sub-category-links-toggle { display: none; }
    .sub-category-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; }
    .sub-category-link { border: 1px solid var(--black); display: inline-block; padding: 12px 20px; text-decoration: none; font-size: 1rem; font-weight: 500; border-radius: 100px; color: var(--black); text-transform:uppercase; }

        .sub-category-link:hover,
        .sub-category-link.current { background-color: var(--black); color: #fff; border: 1px solid var(--black); text-decoration:none; }
        .sub-category-link.current { cursor: default; }
    .category-info .product-list-controls { padding: 10px 0px 5px; overflow: hidden; font-size: 1rem; border-bottom: 1px solid #ddd; }
        .category-info .product-list-controls .label { font-weight: 700; }
    .category-info .product-list-control { float: left; margin-right: 10px; }
        .category-info .product-list-control .label { font-weight: 700; display: block; }
        .category-info .product-list-control .dropdown-control { margin: 0 5px 0 0; padding: 8px; border: none; padding-right: 20px; -webkit-appearance: none; -moz-appearance: none; background-image: url("/gfx/arrow-down-16.png"); background-repeat: no-repeat; background-position: right 5px center; background-size: 10px; border: 1px solid #ddd; border-radius: 4px; }
    .category-info .sorting-control { float: left; }
        .category-info .sorting-control .sotring-dropdown { margin: 0 5px; padding: 8px; border: none; padding-right: 20px; -webkit-appearance: none; -moz-appearance: none; background-image: url("/gfx/arrow-down-16.png"); background-repeat: no-repeat; background-position: right 5px center; background-size: 10px; border: 1px solid #ddd; border-radius: 4px; }
    .category-info .number-of-products-control { float: right; padding: 23px 4px 0; }
        .category-info .number-of-products-control .view-button { display: inline-block; padding: 5px 6px; vertical-align: middle; }
            .category-info .number-of-products-control .view-button.active { }

.goBackDiv {display:flex; justify-content:center; align-items:center; margin: 20px 0 0 0;}
.goBackDiv a {color:#fff; font-size: 1.125rem; font-weight:500;}
.goBackDiv a img {display:inline-block; margin: 0 6px 0 0; rotate: 180deg;}

.category-info-top .gfx { position: absolute; width: 1500px; pointer-events: none; }
    .category-info-top .gfx.left { top: -130px; left: -655px; width: 1610px; rotate: 180deg; }
    .category-info-top .gfx.right { top: -441px; right: -1013px; rotate: 257deg; }


.filterRow {display:flex; justify-content:space-between; align-items:center;margin: 0 0 35px 0;}

.category-info .filterRow p { font-size: 1rem; margin: 0; display: flex; justify-content: center; align-items: center; gap: 10px; line-height: 1em; }

.category-info .pager { display: flex; justify-content: center; margin: 70px auto 0 auto; gap: 25px; }
.category-info p { font-size: 1rem; margin: 0 0 25px 0; text-align: center; }
.category-info .pager a { color: var(--black); border: 1.6px solid var(--black); border-radius: 100px; font-size: 0.875rem; padding: 12px 25px; display: block; text-align:center; font-weight:400; text-transform:uppercase; }
    .category-info .pager a:hover {background:var(--gray); border: 1.6px solid var(--gray); color:#fff; text-decoration:none;}

#filterAndSortBtn {cursor:pointer;}

#filterAndSortWrapper { position: fixed; right: 0; top: 0; z-index: 1001; background: #fff; width: 30%; min-width: 450px; height: 100%; display: none; box-sizing:border-box; }
#filterHeader { font-size: 1.75rem; font-weight: bold; line-height: 1em; display: flex; justify-content: space-between; align-items: center; margin: 0 0 30px 0; padding: 35px 35px 0 35px; }
    #filterHeader span { font-size: 0.875rem; cursor: pointer; }
    #filterHeader span img {position:relative; top: 5px;}
#filterAndSortWrapper .filterOptions { padding: 0 35px; max-height: 70%; overflow: auto; }
#filterAndSortWrapper .filterOption { border-bottom: 1px solid #E1E1E1; padding: 20px 0; }
    #filterAndSortWrapper .filterOptions .label {display:flex; justify-content:space-between; align-items: center; font-size:1.375rem; cursor:pointer;}
#filterAndSortWrapper .filterOptions .label .rightLabel { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; gap: 10px;}
#filterAndSortWrapper .filterOption .label .filterCount { background: var(--gray); color: #fff; padding: 5px; border-radius: 50%; height: 20px; width: 20px; display: inline-flex; justify-content: center; align-items: center; font-size: 1rem; line-height: 1em; }
#filterAndSortWrapper .filterOption .filter-control { display: none; }
#filterAndSortWrapper .filterOption.open .label img {transform:rotate(180deg);}
#filterAndSortWrapper .filterOption ul.filter-control {list-style:none; padding: 0; margin:10px 0;}
    #filterAndSortWrapper .filterOption ul.filter-control li {font-size: 1.125rem; display:flex; justify-content:flex-start; align-items:center; margin: 0 0 10px 0; gap:8px;}
        #filterAndSortWrapper .filterOption ul.filter-control li:last-child {margin: 0;}
        #filterAndSortWrapper .filterOption ul.filter-control li input[type="radio"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 2px solid var(--gray); border-radius: 50%; outline: none; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease; margin: 0 5px 0 0; }
            #filterAndSortWrapper .filterOption ul.filter-control li input[type="radio"]:hover { box-shadow: 0 0 5px rgba(0, 103, 73, 0.5); }
            #filterAndSortWrapper .filterOption ul.filter-control li input[type="radio"]:checked { background-color: #006749; border-color: #006749; }

        #filterAndSortWrapper .filterOption ul.filter-control li input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border: 2px solid #006749; border-radius: 4px; outline: none; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease; }
            #filterAndSortWrapper .filterOption ul.filter-control li input[type="checkbox"]:checked { background-color: #006749; border-color: #006749; }
            #filterAndSortWrapper .filterOption ul.filter-control li input[type="checkbox"]:hover { box-shadow: 0 0 5px rgba(0, 103, 73, 0.5); }
            #filterAndSortWrapper .filterOption ul.filter-control li input[type="checkbox"]:checked::after { content: "✔"; color: white; font-size: 1rem; display: flex; justify-content: center; align-items: center; height: 100%; }

        #priceRange { margin: 20px 0; }
    #priceRange .noUi-handle { height: 24px; width: 24px; top: -5px; right: -12px; border-radius: 50%; cursor:pointer;}
    #priceRange .noUi-connect { background: var(--gray); }
    #priceRange .noUi-handle:after, #priceRange .noUi-handle:before {display:none;}
.filterOption .filter-control .currentPriceRanges { display: flex; justify-content: space-between; align-items: center; font-size: 1rem; }

#filterFooter { position: absolute; bottom: 0; padding: 35px; width: 100%; box-sizing: border-box; }
            #filterFooter a {display:block; padding: 10px 20px; width:100%; box-sizing:border-box; font-size:1.125rem; cursor:pointer; text-align:center; margin: 10px 0 0 0; }
            #filterFooter a.showFilterResultsBtn {border: 1px solid var(--gray); background:var(--gray); color:#fff;}
                #filterFooter a.showFilterResultsBtn:hover { border: 1px solid var(--gray); opacity:0.9; color: #fff; text-decoration:none; }
            #filterFooter a.clearFilterBtn {border: 1px solid var(--gray);}
                #filterFooter a.clearFilterBtn:hover { border: 1px solid var(--gray); text-decoration:none; background:var(--lightGray); }
    @media only screen and (max-width: 1200px) { .category-info { padding: 0; }
}


@media only screen and (max-width: 1000px) {
    .category-info .sub-categories-wrapper { overflow-x: auto; }
    .category-info .sub-category-links { flex-wrap: nowrap; justify-content: flex-start; width:110%; }
    .category-info .sub-category-link {white-space:nowrap; font-size: 0.875rem;}
    .category-info-top .gfx.right { top: -589px; right: -1211px; rotate: 257deg; }
    .category-info-top .gfx.left { top: -130px; left: -937px; width: 1610px; rotate: 180deg; }
}

    @media only screen and (max-width: 768px) {

    }

    @media only screen and (max-width: 680px) {
        .category-info-top {padding: 20px 0 40px 0;}
        .category-info .product-list-control { margin: 0; }
            .category-info .product-list-control .label { font-size: 0.825rem; }
            .category-info .product-list-control .dropdown-control { font-size: 0.825rem; padding: 4px; padding-right: 20px; }
        .category-info .number-of-products-control { padding: 16px 0 0; }
        .category-info .pager {margin: 30px auto 0;}
        .category-info-top .gfx.right { top: -685px; right: -1233px; rotate: 257deg; }
        .category-info-top .gfx.left { top: -130px; left: -1037px; width: 1610px; rotate: 180deg; }
        .category-info-top .categoryText h1 { margin: 10px 0; font-size: 2rem; }

    }

    @media only screen and (max-width: 480px) {
        #filterAndSortWrapper {min-width:0; width:100%;}
    }

    @media only screen and (min-width: 769px) {
        .category-info .category-image { display: none; }
    }