.PAGE_404 {background: #ddd;padding-top: 40px;padding-bottom: 40px;text-align: center}
.PAGE_404 .coll1 {font-size: 18px}
.PAGE_404 .coll2 {font-size: 110px;font-weight: 500}
.PAGE_404 .coll3 {font-size: 25px}






.cartPageBody .orderComp,
.cartPageBody .orderInfo,
.deliverySelect {margin: 6px 0;background: #fff;padding: 6px 12px;box-shadow: 0 0 1px 0 rgba(0,0,0,0.25);border-radius: 12px}

.cartPageBody .orderComp h3,
.deliverySelect h3 {
    font-size: 20px;font-weight: 500;margin-bottom: 3px
}
.cartPageBody .orderComp h3 {margin-bottom: 10px}

.deliverySelect .deliveryRow {font-size: 18px}
.deliverySelect .deliveryRow label {cursor: pointer; display: flex; align-items: center;padding: 2px 0; gap: 6px}

.cartPageBody .orderInfo .total {font-size: 20px;font-weight: 500;margin: 3px 0}

.orderProductRow {display: flex;margin-bottom: 12px}
.orderProductRowL {
    width: 80px;min-width: 80px;height: 80px;box-shadow: 0 0 1px 0 rgba(0,0,0,0.25);border-radius: 12px;margin-right: 10px; position: relative
}
.orderProductRowR a {
    font-size: 14px;line-height: 15px;display: block;color: #111;margin-bottom: 3px;
    word-break: break-all
}
.orderProductRowR .stock {font-weight: 500; margin-bottom: 2px}

@media(width < 1000px) {
    .cartPageBody {padding: 0 6px}
}



.tmpNotice {
    background: #fff;padding: 6px 12px;box-shadow: 0 0 1px 0 rgba(0,0,0,0.15);margin-bottom: 30px;border-radius: 12px;
}


/* .filterPaginationBody {gap: 10px}
.filterPaginationBody .fpBtn {width: 30px;height: 30px;background-color: #ddd;cursor: default}
.filterPaginationBody .fpBtn.active {background-color: #444;cursor: pointer} */
 
@media (width < 800px) {
    .cardProductList .noProducts {margin: 0 15px}
}


.cartPageBody .goToByeBtn a {display: inline-block;background: rgb(223,146,5);color: #fff;padding: 3px 12px;border-radius: 6px;margin: 2px 0}

.myOrderRow {box-shadow: 0 0 0px 1px rgba(0,0,0,0.1);border-radius: 12px;margin-bottom: 12px;background-color: #fff;padding: 12px}
.myOrderRow a {color: #111}
.myOrderRow .state {color: #777;font-size: 14px}
@media (width < 800px) {
    .myOrderRow {margin: 0 15px 6px 15px}
}


.categoryBottomDesc {background: #fff;padding: 5px 15px;box-shadow: 0 0 1px 0 rgba(0,0,0,0.15);margin: 30px 0;border-radius: 12px;}
.categoryBottomDesc p { margin: 10px 0;font-size: 15px}
.categoryBottomDesc ul { margin: 10px 0 10px 18px;font-size: 15px}
.categoryBottomDesc ul li {margin: 5px 0}



.modalMenuLinks {padding: 20px 20px 10px 20px}
.modalMenuLinks a {display: inline-block;padding: 3px 0;color: #000;font-size: 18px}
a:focus {outline: none}

.modalMenuNoauthLinks {padding: 10px 20px 20px 20px; gap: 6px}
.modalMenuNoauthLinks a {color: #000}
.modalMenuNoauthLinks span {
    width: 5px;
    height: 5px;
    background-color: #777;
    border-radius: 50%;
}

.modalMenuLogout {padding: 0px 10px 10px 10px}
.modalMenuLogout > div {cursor: pointer;padding: 10px;font-size: 18px; display: inline-block;}











.categoryDefaultList {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.categoryDefaultRow {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 0px 1px rgba(0,0,0,0.1);
}
.categoryDefaultRow a span {
    display: block;
    padding: 15px 20px;
    font-size: 15px;
    font-weight: 500;
    color: #111;
}
@media (width < 1200px) {
    .categoryDefaultList {
        margin: 0 15px;
    }
}
@media (width >= 1200px) {
    .categoryDefaultRow {
        width: calc(100% / 5 - 8px);
    }
}
@media (1200px > width >= 900px) {
    .categoryDefaultRow {
        width: calc(100% / 4 - 8px);
    }
}
@media (900px > width >= 700px) {
    .categoryDefaultRow {
        width: calc(100% / 3 - 7px);
    }
}
@media (width < 700px) {
    .categoryDefaultList {
        gap: 6px;
    }
    .categoryDefaultList {
        margin: 0 12px;
    }
    .categoryDefaultRow {
        width: calc(100% / 2 - 3px);
        aspect-ratio: 4 / 3;
    }
    .categoryDefaultRow a span {
        padding: 12px 15px 12px 15px;
    }
}











.productHiddenInfo {
    position: fixed;
    z-index: 5;
    top: -100px;
    left: 0;
    width: 100vw;
    background-color: #fff;
    box-shadow: 0 0 4px 1px rgba(0,0,0,0.25);
    border-radius: 0 0 12px 12px;
    transition: 0.3s;
    padding: 12px;
}
.productHiddenBody {
    display: flex;
    align-items: center;
}

.productHiddenInfo .img {
    width: 60px;
    min-width: 60px;
    height: 60px;
    margin-right: 10px;
    border-radius: 6px;
}
.productHiddenInfo .title {
    font-size: 14px;
    line-height: 16px;
    word-break: break-all;
}

body.show-hidden-product-menu .productHiddenInfo {
    top: 0;
}


/* 
.baseCharsWrap > div {
    display: flex;
    justify-content: space-between;
    border-bottom: dotted 1px #999;
    margin-bottom: 10px;
    display: block!important;
}
.baseCharsWrap > div span:first-child {
    padding-right: 10px;
}
.baseCharsWrap > div span:last-child {
    text-align: right;
    padding-left: 10px;
}
.baseCharsWrap > div span {
    display: inline!important;
    background: #fff;
    margin-bottom: -7px;
    background: red;
}
.baseCharsWrap > div span {
  background-color: yellow;
  padding: 0 0.2em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
 */

.noProducts {
    padding: 12px; background: #ddd; border-radius: 12px; text-align: center
}
@media (width < 800px) {
    .profileDesctopPageContent .noProducts {
        margin-left: 15px;
        margin-right: 15px;
    }
}



.profileDesctopPageSidebar { width: 300px; min-width: 300px; max-width: 300px }

.profileDesctopPageSidebar .module {
    box-shadow: 0 0 0px 1px rgba(0,0,0,0.1);
    border-radius: 12px;
    margin-bottom: 12px;
    background-color: #fff;
}
.profileDesctopPageSidebar .mainModule {
    padding: 12px 20px;
    position: sticky;
    top: 75px;
}
.profileDesctopPageSidebar .mainModule a {
    color: #333;
    padding: 2px 0;
    display: inline-block;
}
.profileDesctopPageSidebar .mainModule a.active {
    color: orange;
}

@media ( width >= 800px ) {
    .profileDesctopPage {display: flex}
    .profileDesctopPageContent {width: 100%}
    .profileDesctopPageSidebar {margin-left: 12px}
}
@media ( width >= 1200px ) {
}
@media ( 1200px > width >= 800px ) {
}
@media ( width < 800px ) {
    .profileDesctopPageSidebar {
        display: none;
    }
}

.productBaseRow {
    position: relative;display: flex;background: #fff;margin-bottom: 8px;padding: 6px;box-shadow: 0 0 0px 1px rgba(0,0,0,0.1);border-radius: 12px;
}
@media ( width >= 800px ) {
    .productBaseRow {
        width: 100%
    }
}
@media ( width < 800px ) {
    .productBaseRow {
        margin-left: 15px;
        margin-right: 15px;
    }
}


.productBaseRow .img {position: relative;width: 120px;min-width: 120px;height: 120px;border-radius: 6px;margin-right: 10px}
.productBaseRow .img label {cursor: pointer;position: absolute;z-index: 2;padding: 5px}
.productBaseRow .img a {z-index: 1}

.productBaseRow .cart svg {width: 30px;height: 30px}
.productBaseRow[data-added="1"] .cart svg {fill: orange}

.productBaseRow .info {width: 100%}

.productBaseRow .removeBtn {width: 40px;height: 40px;position: absolute;right: 0;top: 0;cursor: pointer}
.productBaseRow .removeBtn:hover {color: orange}
.productBaseRow .price {white-space: nowrap}

.productBaseRow .product_id,
.productBaseRow .part {font-size: 14px; color: #777; margin-bottom: 5px}

.productBaseRow .title a {display: block; color: #111; word-break: break-all; margin: 5px 0;}

@media ( width >= 550px ) {
    .productBaseRow .info {display: flex;justify-content: space-between}
    .productBaseRow .priceWrap {text-align: right;display: flex;flex-direction: column;justify-content: space-between}    
    .productBaseRow .price {white-space: nowrap; padding: 5px 32px 0 0}
}
@media ( width < 550px ) {
    .productBaseRow .img {width: 90px;min-width: 90px;height: 90px}
    .productBaseRow .title {padding-right: 30px}
    .productBaseRow .title a {font-size: 15px}
    .productBaseRow .info {display: flex;flex-direction: column;justify-content: space-between}
    .productBaseRow .priceWrap {display: flex;justify-content: space-between;align-items: center}  
}
















.BTN {
    display: inline-block;
    height: 32px;
    min-width: 120px;
    text-align: center;
    border: 0;
    outline: none;
    background: rgb(227,150,9);
    color: #fff;
    font-size: 15px;
    border-radius: 12px;
    cursor: pointer;
}
.BTN:hover {
    background: orange
}




.logForm {background: #fff;position: relative;box-shadow: 0 0 0px 1px rgba(0,0,0,0.1);padding: 12px;border-radius: 12px;margin-bottom: 12px}
.logForm .formTitle {font-size: 18px;margin-bottom: 12px;font-weight: 500}
.logForm .label {font-weight: 500;font-size: 14px;color: #444}
.logForm .fieldRow {margin-bottom: 8px}
.logForm .fieldWrap {position: relative}
.logForm .fieldWrap input {display: block;width: 100%;outline: none;border: solid 1px #999;height: 32px;padding: 0 32px 0 12px;font-size: 16px}
.logForm .fogotPass a {color: orange}



.logForm .showPassBtn .icon-eye-hide {display: none}
.logForm .showPassBtn svg {width: 18px;height: 18px;fill: #444}

.logForm .showPassBtn {position: absolute;right: 2px;top: 2px;width: 28px;height: 28px;cursor: pointer}

.logForm[data-show-pass="1"] .icon-eye {display: none}
.logForm[data-show-pass="1"] .icon-eye-hide {display: block}

.logForm .img {
    position: absolute;right: 12px;top: 12px;width: 120px;height: 120px;background-color: #eee;
    display: none;
}
.noAuthArea {margin-top: 10px;color: #444}
.noAuthArea a {color: orange}
@media (width >= 540px) {
    .logForm .fieldWrap {width: 350px;min-width: 350px;max-width: 350px}
}
@media (width < 540px) {
    .logForm .img {display: none}
}



.registredForm {background: #fff;position: relative;box-shadow: 0 0 0px 1px rgba(0,0,0,0.1);padding: 12px;border-radius: 12px;margin-bottom: 12px}
.registredForm .label {font-weight: 500;font-size: 14px;color: #444}
.registredForm .label .req {color: orange}
.registredForm .fieldRow {margin-bottom: 8px}
.registredForm .fieldWrap {position: relative}
.registredForm .fieldWrap input {display: block;width: 100%;outline: none;border: solid 1px #999;height: 32px;padding: 0 32px 0 12px;font-size: 16px}
.registredForm .BTN {padding: 0 12px}

@media (width >= 540px) {
    .registredForm .fieldWrap {width: 350px;min-width: 350px;max-width: 350px}
}
@media (width < 540px) {
    .registredForm .img {display: none}
}

.registredForm .showPassBtn .icon-eye-hide {display: none}
.registredForm .showPassBtn svg {width: 18px;height: 18px;fill: #444}

.registredForm .showPassBtn {position: absolute;right: 2px;top: 2px;width: 28px;height: 28px;cursor: pointer}

.registredForm[data-show-pass="1"] .icon-eye {display: none}
.registredForm[data-show-pass="1"] .icon-eye-hide {display: block}



.baseForm {background: #fff;position: relative;box-shadow: 0 0 0px 1px rgba(0,0,0,0.1);padding: 12px;border-radius: 12px;margin-bottom: 12px}
.baseForm .label {font-weight: 500;font-size: 14px;color: #444}
.baseForm .label .req {color: orange}
.baseForm .fieldRow {margin-bottom: 8px}
.baseForm .fieldWrap {position: relative}
.baseForm .fieldWrap input {display: block;width: 100%;outline: none;border: solid 1px #999;height: 32px;padding: 0 32px 0 12px;font-size: 16px}
.baseForm .BTN {padding: 0 12px}


@media (width >= 540px) {
    .baseForm .fieldWrap {width: 350px;min-width: 350px;max-width: 350px}
}
@media (width < 540px) {
    .baseForm .img {display: none}
}

.baseForm .showPassBtn .icon-eye-hide {display: none}
.baseForm .showPassBtn svg {width: 18px;height: 18px;fill: #444}

.baseForm .showPassBtn {position: absolute;right: 2px;top: 2px;width: 28px;height: 28px;cursor: pointer}

.baseForm .fieldRow[data-show="1"] .icon-eye {display: none}
.baseForm .fieldRow[data-show="1"] .icon-eye-hide {display: block}





.topProfileLinks {display: flex;flex-wrap: wrap;gap: 5px; margin: 15px 0;}
.topProfileLinks div a {display: block;padding: 6px 12px;background-color: #fff;box-shadow: 0 0 0px 1px rgba(0,0,0,0.1);border-radius: 6px;color: #111}
.profileDesctopPage .logoutBtn {margin: 15px 0}
.profileDesctopPage .logoutBtn div {
    display: inline-block; cursor: pointer; padding: 6px 22px;font-size: 16px;
    background-color: rgb(227,150,9); color: #fff;
    border-radius: 12px;
}
@media (width >= 800px) {
    .topProfileLinksWrap {display: none}
}
@media (width < 800px) {
    .topProfileLinks {margin: 15px;}
    .profileDesctopPage .baseForm {
        margin-left: 15px;
        margin-right: 15px;
    }
    .profileDesctopPage .logoutBtn {margin: 15px}
}





.mobile-search-input {
    height: 40px;
    padding: 0 12px;
    display: block;
    width: calc(100% - 24px);
    margin: 12px 12px 8px 12px;
    font-size: 15px;
}
.mobile-search-type-select {
    margin: 8px 12px 12px 12px;
}
.mobile-search-type-select label {
    cursor: pointer;
    display: block;
    padding: 2px 0;
    display: flex;
    align-items: center;
    gap: 5px
}
.mobileSearchInputWrap {
    position: relative;
}
.mobileSearchInputWrap svg {
    width: 20px;
    height: 20px;
    fill: orange;
}
.mobileSearchBtn {
    position: absolute;
    right: 12px;
    top: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
}



.searchResultWrapper {z-index: 29; max-height: 100vh;overflow: auto; padding: 100px 0 40px 0; transition: 0.3s}
body.isTop .searchResultWrapper {padding: 130px 0 40px 0}
.searchResultBg {background: rgba(0,0,0,0.25);z-index: 1}
.searchResultBtn {
    position: fixed;z-index: 4;background: #fff;width: 40px;height: 40px;
    border-radius: 50%;box-shadow: 0 0 0px 1px rgba(0,0,0,0.25);cursor: pointer
}
.searchResultBody {position: relative;z-index: 3}

.searchResRow {
    background: #fff;margin-bottom: 5px;
    position: relative;display: flex;padding: 6px;border-radius: 12px;
    box-shadow: 0 0 0px 1px rgba(0,0,0,0.25);
}
.searchResRow .product_id {font-size: 13px;font-weight: 500; color: #666}
.searchResRow .title {margin: 2px 0}
.searchResRow .price {font-weight: 500}
.searchResRow .stock span {display: inline-block;font-size: 13px;background: #999;color: #fff;padding: 2px 6px;border-radius: 6px;margin-bottom: 3px}
.searchResRow .img {width: 60px;min-width: 60px;height: 60px;border-radius: 6px;margin-right: 10px}

.emptySearch {background: #fff;padding: 20px;border-radius: 12px; box-shadow: 0 0 0px 1px rgba(0,0,0,0.25)}

@media (width >= 650px) {
    .searchResultBtn {left: calc(50vw + 260px)}
    .searchResultBody {width: 500px;margin-left: calc(50vw - 250px)}
}
@media (width < 650px) {
    .searchResultBtn {right: 10px}
    .searchResultBody {padding: 0 15px}
}







.FOOTER_BODY .siteName {font-size: 28px; font-weight: 500; color: orange;}
.FOOTER_BODY .siteSlogan {margin-bottom: 10px; font-size: 14px; color: #777;}

@media (width >= 1200px) {
    .FOOTER_BODY {
        padding: 30px 0;
    }
}
@media (width < 1200px) {
    .FOOTER_BODY {
        padding: 30px 20px;
    }
}
@media (width < 700px) {
    .FOOTER_BODY {
        padding: 30px 12px;
    }
}


@media (width >= 900px) {
    .FOOTER_ROWS {display: flex;gap: 20px; margin: 20px 0;}
    .footer_coll {width: 25%}
}

.SUB_FOOTER {
    background-color: #000;
    padding: 12px 0;
    color: #777;
    padding: 12px 0;
    font-size: 15px;
}

/* 
.FOOTER_BODY .siteName {font-size: 28px; font-weight: 500; color: orange;}
.FOOTER_BODY .siteSlogan {margin-bottom: 10px; font-size: 14px; color: #777;}


@media (width >= 1200px) {
    .FOOTER_BODY {
        padding: 20px 0;
    }
}
@media (width < 1200px) {
    .FOOTER_BODY {
        padding: 20px 15px;
    }
}
@media (width >= 900px) {
    .FOOTER_BODY {display: flex;gap: 20px}
    .footer_coll {width: 25%}
}
@media (900px > width >= 550px) {
    .FOOTER_BODY {display: flex; flex-wrap: wrap; gap: 20px}
    .footer_coll {width: calc(50% - 10px)}    
}
@media (width < 550px) {
    .footer_coll {
        margin-bottom: 15px;
    }
}

 */




.modalWrap {z-index: 100}
.modalBg {z-index: 1;background: rgba(0,0,0,0.25)}
.modalBody {
    position: relative;z-index: 3;background: #fff;padding: 20px;
    max-height: calc(100dvh - 40px);
    overflow: auto;
}
@media (width >= 500px) {
    .modalBody {width: 400px;margin-left: calc(50vw - 200px);margin-top: 30px}
}
@media (width < 500px) {
    .modalBody {width: calc(100vw - 40px);margin-left: 20px;margin-top: 20px}
}























.defTitle {
    margin: 15px 0 25px 0;
}
.defDesc {
    margin: 15px 0 35px 0;
}
.defTitle {
    font-weight: 500;
    font-size: 30px;
    line-height: 30px;
}
@media (width < 1200px) {
    .defTitle, .defDesc {padding: 0 12px}
}
@media (width < 500px) {
    .defTitle {
        font-size: 28px;
        line-height: 28px;
    }
}





.catalogTopMenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0 0px 1px rgba(0,0,0,0.1);
    background: #fff;
    padding: 5px 12px;
    border-radius: 12px;
}
.catalogTopMenu select {
    display: block;
    height: 30px;
    background: #fff;
    border: 0;
    outline: 0;
    font-size: 15px;
}




















.catalogChildCats {display: flex;flex-wrap: wrap;gap: 5px}
.catalogChildCatsRow {position: relative;background: #fff;box-shadow: 0 0 0px 1px rgba(0,0,0,0.1);border-radius: 6px;height: 60px;overflow: hidden;}
.catalogChildCatsRow a {
    display: flex;align-items: center;position: relative;z-index: 2;padding: 10px 10px 10px 65px;color: #111;height: 60px;font-size: 15px;line-height: 15px;
}
.catalogChildCatsRow > div {position: absolute;left: 5px;top: 5px;;width: 50px;height: 50px;background-color: #eee;border-radius: 50%;}
@media (width < 1200px) {
    .catalogChildCats {padding: 0 12px}
}
@media (width >= 1600px) {
    .catalogChildCatsRow {width: 236px}
}
@media (1600px > width >= 1200px) {
    .catalogChildCatsRow {width: 216px}
}
@media (1200px > width >= 1100px) {
    .catalogChildCatsRow {width: calc(100% / 5 - 4px)}
}
@media (1100px > width >= 900px) {
    .catalogChildCatsRow {width: calc(100% / 4 - 4px)}
}
@media (900px > width >= 700px) {
    .catalogChildCatsRow {width: calc(100% / 3 - 4px)}
}
@media (700px > width) {
    .catalogChildCatsRow {width: calc(100% / 2 - 4px)}
}
@media (460px > width) {
    .catalogChildCatsRow {height: 55px}
    .catalogChildCatsRow > div {width: 45px;height: 45px}
    .catalogChildCatsRow a {
        padding: 10px 10px 10px 60px;height: 55px;font-size: 14px;line-height: 14px;
    }
}
.catalogChildCatsRow span {
    width: 30px;
    height: 30px;
}
.catalogChildCatsRow svg {
    fill: #fff;
    width: 30px;
}
.catalogChildCatsRow > div {
    display: flex;
    align-items: center;
    justify-content: center;
}

















.changeListTpl {display: flex;gap: 5px}
.changeListTpl .changeListTplBtn {padding: 3px 0;cursor: pointer;width: 30px;height: 30px}
.changeListTpl .changeListTplBtn svg {width: 25px;height: 25px}
.changeListTpl .changeListTplBtnTile svg {width: 20px;height: 20px}
.changeListTpl .changeListTplBtn.active {fill: orange;cursor: default}

.changeListTpl .SM-FILTER-BTN {padding: 3px 0;cursor: pointer;width: 30px;height: 30px}
.changeListTpl .SM-FILTER-BTN svg {width: 25px;height: 25px}
@media (width >= 850px) {
    .changeListTpl .SM-FILTER-BTN {display: none}
}






.pagination {display: flex;align-items: center;justify-content: center;margin: 15px 0}
.paginationRows {display: flex;align-items: center;  gap: 1px}
.paginationRows > * {width: 45px;height: 45px;background-color: #ddd;color: #999;display: flex;align-items: center;justify-content: center;cursor: default}
.paginationRows > a {background: #999;color: #fff;cursor: pointer}
.paginationRows > *:first-child {border-radius: 10px 0 0 10px}
.paginationRows > *:last-child {border-radius: 0 10px 10px 0}

.paginationRows svg {width: 20px;height: 20px}
.paginationRows > a svg {fill: #fff}
.paginationRows > div svg {fill: #777}
.paginationNum {
    display: flex;flex-direction: column;align-items: center;justify-content: center;
    margin: 6px;border: solid 1px #999;padding: 0 12px;border-radius: 10px;background: #fff;height: 45px
}
.paginationNum div {font-size: 12px;line-height: 12px;color: #999;margin-bottom: 1px}
.paginationNum span {font-weight: 500;font-size: 14px;line-height: 14px}

.pagBtnGroup {display: flex;align-items: center;gap: 1px}
.pagBtnGroup > *:first-child {border-radius: 10px 0 0 10px}
.pagBtnGroup > *:last-child {border-radius: 0 10px 10px 0}

.filterPaginationBody .fpBtn {width: 45px;height: 45px;background-color: #ddd;color: #999;cursor: default}
.filterPaginationBody .fpBtn.active {background-color: #999;cursor: pointer}

.filterPaginationBody .fpBtn svg {width: 20px;height: 20px; fill: #777}
.filterPaginationBody .fpBtn.active svg {fill: #fff}













.catalog-sidebar {
    width: 300px;
    min-width: 300px;
    margin-right: 12px;
}
.catalog-double-content {
    width: 100%
}

.catalog-sidebar-module {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 1px 0 rgba(0,0,0,0.15);
    position: sticky;
    top: 70px
}
.default-sb-module {
    padding: 6px 12px;
}
.default-sb-module p {
    font-size: 15px;
    line-height: 16px;
    margin: 6px 0;
}

.smFilterBg {display: none;background-color: rgba(0,0,0,0.15);z-index: 109}
.smFilterBtn {display: none;position: fixed;bottom: 15px;right: 15px;z-index: 111}
.smFilterBtn > div {width: 50px;height: 50px;background: #fff;box-shadow: 0 0 1px 0 rgba(0,0,0,0.15);border-radius: 50%;cursor: pointer}

@media (width < 1200px) {
    .catalog-tpl-double-body {padding: 0 12px}
}
@media ( width >= 850px ) {
    .catalog-tpl-double-body {display: flex}
}
@media ( width < 850px ) {

    .categoryFilterWrap {box-shadow: none}
    .catalog-sidebar {
        background-color: #fff;box-shadow: 0 0 0px 1px rgba(0,0,0,0.1);width: 300px;position: fixed;display: block;left: -305px;top: 0;z-index: 110;
        height: 100vh;min-height: 100vh;max-height: 100vh;overflow: auto;transition: 0.3s;padding-right: 20px;
    }
    .default-sb-module {display: none}
    body.showSmFilter .catalog-sidebar {left: 0}
    body.showSmFilter .smFilterBg,   
    body.showSmFilter .smFilterBtn {
        display: block;
    }
}


/*
.catalog-sidebar {
    position: fixed;
    display: block;
    left: 0;
    top: 0;
    z-index: 100;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: auto;
}
.default-sb-module {
    display: none;
}
*/



/* 
.breadscrumb {
    margin: 10px 0;
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 1px 2px;
}
.breadscrumb {-ms-overflow-style: none;scrollbar-width: none}
.breadscrumb::-webkit-scrollbar {display: none}

html[data-device-type="desctop"] .breadscrumb {
    flex-wrap: wrap;
}
html[data-device-type="mobile"] .breadscrumb {
    max-width: 100%;
    overflow-x: auto;
}

 */

/*
.breadscrumb > a,
.breadscrumb > div {
    font-size: 14px;
    padding: 5px 0;
    color: #000;
    color: #777;
    white-space: nowrap;
}
.breadscrumb a:hover {
    color: orange
}
.breadscrumb > span {
    width: 4px;
    min-width: 4px;
    height: 4px;
    background-color: #ddd;
    background-color: orange;
    border-radius: 50%;
    margin: 0 5px;
}
@media (width < 1200px) {
    .breadscrumb {padding: 0 12px}
}
*/
/* .breadscrumb > span {
    width: 0px;
    height: 0px;
    background-color: orange;
    border-radius: 0%;
    border: solid 3px;
    border-width: 3px 5px;
    border-color: #fff #fff #fff orange;
    margin-top: -1px;
    margin-left: 5px;
} */
/* html[data-page="default"] .breadscrumb > span {
    border-color: #f7f7f7 #f7f7f7 #f7f7f7 orange;
} */







.btnIco {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 5px;
}
.btnIco svg {
    width: 18px;
    height: 18px;
    fill: orange
}
.tmCatalogBtn:hover svg {
    opacity: 0.5;
}


/* .tmCatalogBtn .btnIco {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    position: relative;
}
.tmCatalogBtn .btnIco div {
    position: absolute;
    background: #80257b;
    width: 2px;
    height: 11px;
    position: absolute;
    transition: 0.2s;
}
.tmCatalogBtn .btnIco div:nth-child(1) {
    left: 4px;
    top: 3px;
    transform: rotate(-45deg);    
}
.tmCatalogBtn .btnIco div:nth-child(2) {
    right: 4px;
    top: 3px;
    transform: rotate(45deg);    
}
body.show-destop-catalog .tmCatalogBtn .btnIco div {
    height: 13px;
}
body.show-destop-catalog .tmCatalogBtn .btnIco div:nth-child(1) {
    left: 7px;
    top: 1px;
    transform: rotate(-45deg);    
}
body.show-destop-catalog .tmCatalogBtn .btnIco div:nth-child(2) {
    right: 7px;
    top: 1px;
    transform: rotate(45deg);    
} */