



.page-content-category-main {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* category-main-top-line */

.category-main-top-line {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}



/* category-main-filters-line" */

.category-main-filters-line {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    height: 0;
    transition:  opacity 0.5s, height 1s;
    opacity: 0;
    visibility: hidden;
}
.category-main-filters-line.light-filter-height {
    height: 149px;
    transition: height 0.5s, opacity 1.5s;
    opacity: 1;
    visibility: visible;
}


.form-filters-light-wrapper {
    width: 75%;
    background: #F7F7F7;

}
.form-filters-light-wrapper form {
    width: 100%;
    display: flex;
}
.form-filters-light-wrapper .filter-box-price-slider-wrapper {
   width: 33%;
}

.form-filters-light-wrapper .filters-light-wrapper {
    width: 66%;
    height: 149px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 2%;
}

.filters-store-wrapper {
    width: 25%;
    background: #F7F7F7;
    padding-right: 24px;
    padding-bottom: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.active-filters-wrapper {
    width: 100%;
}



.categories-box-wrapper .side-col {
    width: 100%;
}

.categories-box-wrapper .basic-col {
    display: block;
    width: 100%;
}
.search-content-wrapper .basic-col {
    display: block;
    width: 100%;
}
.new-content-wrapper .basic-col {
    display: block;
    width: 100%;
}
.discounts-content-wrapper .basic-col {
    display: block;
    width: 100%;
}
.spec-offer-content-wrapper .basic-col {
    display: block;
    width: 100%;
}
.quick-action-content-wrapper .basic-col {
    display: block;
    width: 100%;
}

/************ TOP **************/




/************ SIDE LEFT **************/
/* filter-info-block */

.filter-info-ico {
    width: 30px;
    height: 30px;
    transition: all 0.5s;
    cursor: url("/images/cursor.png"), pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.filter-info-ico::after {
    font-family: 'Font Awesome 6';
    content: "\f30f";
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    color: #CBCBCB;
}
.filter-info-ico:hover::after {
    content: "\f30f";
    font-weight: 600;
    color: #F7748B;
    transition: all 0.5s;
}
.filter-info-ico:hover::before {
    font-family: 'Font Awesome 6';
    content: "\f0d8";
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 22px;
    color: #ffffff;
    position: absolute;
    right: 8px;
    bottom: -9px;
    z-index: 1;

    text-shadow: 0 -1px 4px rgba(0,0,0,.3);
}

.filter-info-ico-row {
    width: 25px;
    height: 27px;
    transition: all 0.5s;
    cursor: url("/images/cursor.png"), pointer;
}

.filter-info-ico-row::after {
    font-family: 'Font Awesome 6';
    content: "\f30f";
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    color: #CBCBCB;
    position: absolute;
    right: 5px;
    top: 0;
}

.filter-info-ico-row:hover::after{
    content: "\f30f";
    font-weight: 600;
    color: #00B897;
    transition: all 0.5s;
}
.filter-box-main .filter-row:hover .filter-info-ico-row::after {
    color: #00B897;
}

.filter-info-ico-row:hover::before {
    font-family: 'Font Awesome 6';
    content: "\f0d7";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    color: #ffffff;
    position: absolute;
    right: 8px;
    top: -7px;

    text-shadow: 0 2px 4px rgba(0,0,0,.3);
}

.filter-box-main .filter-row label {
    width: 250px;
    float: left;
}
.filter-info-block {
    opacity: 0;
    visibility: hidden;
    width: 300px;
    position: absolute;
    right: -20px;
    top: 100%;
    z-index: 5;
    padding: 15px;
    background: #FFFFFF;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
    border-radius: 20px;
    font-size: 12px;
    line-height: 15px;
    text-transform: none;
    color: #000000;
    transition: all 0s;
    white-space: normal;
}

.filter-info-ico:hover .filter-info-block {
    transition: opacity 0.5s;
}


.filter-info-block-row,
.filter-note {
    width: 300px;
    min-height: 1px;
    height: auto;
    position: absolute;
    right: -20px;
    top: 0;
    z-index: 5;
    padding: 15px;
    background: #FFFFFF;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
    border-radius: 20px 20px 20px 20px;
    font-size: 12px;
    line-height: 15px;
    text-transform: none;
    color: #000000;
    transition: all 0s;
    white-space: normal;
    cursor: url("/images/cursor.png"), pointer;
    display: none;
}

.filter-info-block-row img,
.filter-info-block img {
    max-width: 115px;
    height: auto;
    float: left;
    border-radius: 16px 16px 16px 0;
    margin: 0 17px 0 0;
}

.filter-info-block-txt {
    height: 100%;
}



/* filter-video-ico */

.filter-head-icons {
    position: absolute;
    right: 25px;
    top: 0;
    width: 55px;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;

}

.filter-video-ico {
    width: 30px;
    height: 27px;
    transition: all 0.5s;
}

.filter-video-ico::after {
    font-family: 'Font Awesome 6';
    content: "\f144";
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    color: #CBCBCB;
    position: absolute;
    left: 5px;
}

.filter-video-ico:hover::after{
    font-weight: 600;
    color: #00B897;
    transition: all 0.5s;
}
.filter-row-icons {
    width: 55px;
    display: flex;
    justify-content: flex-end;

}

.filter-video-ico-row {
    width: 30px;
    height: 27px;
    transition: all 0.5s;
    cursor: pointer;
}

.filter-video-ico-row::after {
    font-family: 'Font Awesome 6';
    content: "\f144";
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    color: #CBCBCB;
    position: absolute;
    left: 5px;
}

.filter-video-ico-row:hover::after {
    font-weight: 600;
    color: #F7748B;
    transition: all 0.5s;
}

.filter-box-main .filter-row:hover .filter-video-ico-row::after {
    color: #ffffff;
}



.filter-video-block-row {
    display: none;
}

/************ MAIN  **************/


/* open-light-filters button*/

.open-light-filters {
    background: #00B897;
    color:#ffffff;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.25), 0 0 3px 0 rgba(0, 0, 0, 0.1);
    border-radius: 40px;
    padding: 0 40px;
    margin: 3px;
    transition: 1s;
}
.open-light-filters::before {
    font-family: 'Font Awesome 6';
    content: "\f0b0";
    font-weight: 500;
    font-size: 24px;
    line-height: 24px;
    color: #ffffff;
    margin-right: 10px;
}
.open-light-filters:hover {
    transform: scale(105%);
    transition: 1s;
}

/* sort */

.filter-box-head-sort {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}
.filter-box-head-sort .nice-select {
    padding: 5px 40px 5px 15px
}
.filter-box-head-label {
    color: #000000;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0.2em;
    text-transform: uppercase;


}

.filter-box-head-sort .nice-select .list {
    width: 190px;
}
.filter-box-head-sort .nice-select .list li {
   white-space: normal;
    line-height: 130%;
    min-height: auto;
    padding: 10px 10px;
}
.filter-box-head-sort .nice-select .current {
    color: #000000;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0.2em;
    text-transform: uppercase;

}

/* store */
.store-mode-form {
    width: 100%;
    min-height: 40px;
    margin-top: 15px;
    background-color: #ffffff;
}

.store-mode-form:hover {
    opacity: 0.9;
}
.store-mode-form .filter-row {
    padding: 12px 10px;
}
.store-mode-form .filter-row:hover {
    background: none;
}
.store-mode-form .label-check {
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    text-align: left;
    text-transform: uppercase;
}

.store-mode-form .label-check::after {
    content: "";
    display: block;
    height: 40px;
    width: 4px;
    background-color: #00B897;
    position: absolute;
    left: -15px;
    top: -12px;
}
.store-mode-form .label-check:hover::after,
.store-mode-form .label-check.checked::after{
    background-color: #F7748B;
}


.store-mode-form .filter-row .label-check::before {
    width: 16px;
    height: 16px;
    font-size: 8px;
    flex-basis: 16px;
    margin-right: 10px;
}

/* all-filters-button */

.all-filters-button{
    width: auto;
    height: 30px;
    background: #ffffff;
    border: 1px solid #00B897;
    border-radius: 28px;
    color: #00B897;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
    text-transform: uppercase;
    margin: 0 5px;
    transition: 1s;
}

.all-filters-button::before {
    font-family: 'Font Awesome 6';
    content: "\e17c";
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    color: #00B897;
    margin-right: 10px;
}
.all-filters-button:hover {
    transform: scale(105%);
    transition: 1s;
}


/*  category-products-banners */
.category-products-banners img {
    width: 100%;
}

/* category-main-decs */

.category-main-decs {
    margin-top: 10px;
    border-top: 1px solid #F2F2F2;
    padding-top: 40px;

    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 220%;
    color: #2D2D2D;
}


/*####################################################################### FILTER BOX ##################################################################*/
.filter-wrapper {
    background-color: #F7F7F7;
    box-shadow: 2px 0 10px rgba(0,0,0,.3);
    width: 40vw;
    max-width: 765px;
/*    width: 765px;*/
    height: 100vh;
    padding: 15px 0;
    position: fixed;
    top: 0;
    left: -200px;
    z-index: 10;
    visibility: hidden;
    opacity: 0;
    transition: left 0.5s;
    overflow-y: auto;
    overflow-x: hidden;

    /**/
/*    left: 0;
    z-index: 799;
    visibility: visible;
    opacity: 1;*/

}
.filter-wrapper-back {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 798;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(0, 0, 0, .6);
    -webkit-transition: opacity .25s ease, visibility 0.25s ease;
    transition: opacity .25s ease, visibility 0.25s ease;
}
.hide-all-filters {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 40px;
    top: 20px;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #00B897;
    background: #00B897;
}

.hide-all-filters::after {
    font-family: 'Font Awesome 6';
    content: "\f00d";
    font-style: normal;
    font-weight: 300;
    font-size: 30px;
    line-height: 30px;
    color: #ffffff;
}
.hide-all-filters:hover,
.hide-all-filters:hover::after{
    color: #ffffff;
}
.hide-all-filters:hover {
    background: #F7748B;
    border: 1px solid #F7748B;
    transition: 1s;
}

.all-filters-div {
    padding: 20px 40px;
}

.all-filters-title {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    margin-right: 22px;
    padding-bottom: 18px;
    text-transform: uppercase;
}

.filter-wrapper form {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.filter-wrapper form .filter-box-wrapper {
    width: 48%;
}

.filters-light-wrapper .filter-box-wrapper {
    width: 48%;
}

.filter-box {
    width: 100%;
    min-height: 40px;
    margin-top: 17px;
}

.filter-box-head {
    background: #ffffff;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
    min-height: 40px;

    padding: 12px 75px 10px 20px;

/*    word-wrap: break-word;
    word-break: break-all;*/
}

.ataka-show-long-word:hover + .filter-head-icons {
    /*display: none;*/
}




.filter-box-head .left-ico,
.filter-box-head .left-ico-checked  {
    position: absolute;
    left: 0;
    top:0;
    height: 100%;
}

.filter-box-head .left-ico {
    display: block;
}
.filter-box-head .left-ico-checked {
    display: none;
}

.filter-checked .filter-box-head .left-ico {
    display: none;
}
.filter-checked .filter-box-head .left-ico-checked {
    display: block;
}

.left-ico::before,
.left-ico-checked::before {
    content: "";
    display: block;
    height: 100%;
    width: 4px;
}
.left-ico::before {
    background-color:#00B897;
}
.filter-box-head:hover .left-ico::before,
.left-ico-checked::before {
    background-color:#F7748B;
}



.filter-box-head .right-ico-closed,
.filter-box-head .right-ico-opened {
    position: absolute;
    right: 10px;
    top:12px;
}

.filter-box-head .right-ico-opened {
    display: block;
}
.filter-box-head .right-ico-closed {
    display: none;
}
.filter-close .filter-box-head .right-ico-opened {
    display: none;
}
.filter-close .filter-box-head .right-ico-closed {
    display: block;
}

.filter-box-head .right-ico-closed::after {
    font-family: 'Font Awesome 6';
    content: "\f0d7";
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 12px;
    color: #444444;
}
.filter-box-head .right-ico-opened::after {
    font-family: 'Font Awesome 6';
    content: "\f0d8";
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 12px;
    color: #444444;
}

.filter-box-search {                /* hide JS if N .filter-row < 8 */
    background: #F8F8F8;
    border: 1px solid #F2F2F2;
    height: 47px;
    margin: 20px 0 20px;
    padding: 14px 19px;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #414141;
}

.filter-close .filter-box-search {
    display: none;
}
input.filter-box-search:focus {
    outline: 0.5px solid #cccccc;
}
.filter-box-content {
    background-color: #ffffff;
    box-shadow: 0 50px 50px -25px rgba(0,0,0,.3);
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 3;
    transition: 1s;
}

.filter-box-main.filter-close .filter-box-content {
        display: none;
}

/* filter-box scrcollbar */
.filter-wrapper::-webkit-scrollbar,
.filter-box-content::-webkit-scrollbar{
    width: 5px;
    background: #F7F7F7;
}
.filter-wrapper::-webkit-scrollbar-thumb,
.filter-box-content::-webkit-scrollbar-thumb{
    background: #00B897;
}
.filter-wrapper,
.filter-box-content{		/* firefox*/
    scrollbar-color: rgb(0,184,151, 0.9) rgba(247, 247, 247, 0.5);
    scrollbar-width: thin;  /* толщина auto/thin/none */
}


.filter-row {
    padding: 7px 10px 7px 5px;
    min-width: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}


.filter-row label {
    font-style: normal;
    font-size: 12px;
    line-height: 15px;
    color: #000000;
    margin-left: 5px;
    text-transform: uppercase;
}
.filter-box-main .filter-row:hover label {
    opacity: 0.9;
    transition: 0.5s;
}


.filter-row .label-check:before,
.filter-row .label-radio:before {
    margin-right: 15px;
    flex-basis: 20px;
    flex-shrink: 0;
}

.filter-row label span {
    width: auto;
}

/* .filter-box-price-slider  */
.filter-box-price-slider {
    padding: 16px;
    background: #ffffff;
    height: 149px;
}

.filter-box-price-slider .filter-box-head {
    background: #ffffff;
    color: #000000;
    padding: 10px 10px 10px 0;
    white-space: nowrap;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.1em;
}

.filter-box-price-slider .filter-box-slider-content{
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    max-height: 370px;
    overflow-y: hidden;
    overflow-x: hidden;

}

.price-slider-range-values {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}
.price-slider-range-values input {

    background: #FAFAFA;
    border: 1px solid #ECECEC;
    width: 80px;
    height: 30px;
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
    letter-spacing: 0.2em;
    text-align: center;
    margin: 1px;
}
.price-slider-range-values input:focus {
    outline: 0.5px solid #cccccc;
}

.price-slider-range-submit {
    width: 70px;
    height: 30px;
    background: #ffffff;
    border: 1px solid #00B897;
    border-radius: 28px;
    font-style: normal;
    text-align: center;
    color: #00B897;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
    letter-spacing: 0.2em;
    margin: 0 2px;
    transition: 1s;
}
.price-slider-range-submit:hover{
    transform: scale(105%);
    transition: 1s;

}

.price-slider-range-slider {

}

.noUi-horizontal {
    height: 5px;
    margin-left: 2px;
    margin-right: 2px;
}
.noUi-target {
    background: #CACACA;
    border-radius: 0;
    border: none;
    box-shadow: none;
}
.noUi-connect {
    background: #00B897;
}
.noUi-horizontal .noUi-handle {
    width: 20px;
    height: 20px;
    top: -8px;
    background: #00B897;
    border: 3px solid #ffffff;
    outline: 1px solid #00B897;
    box-shadow: none;
    border-radius: 50%;
}
.noUi-handle:before,
.noUi-handle:after {
    content: "";
    display: none; /* не используем, нужно перебить основную настройку */
}

.noUi-horizontal .noUi-handle.noUi-handle-upper {
    right: 0;
    cursor: url("/images/cursor.png"), pointer;
}
.noUi-horizontal .noUi-handle.noUi-handle-lower {
    right: -20.5px;
    cursor: url("/images/cursor.png"), pointer;
}


/*####################################################################### ALL FILTER BOX ##################################################################*/

.all-filter-box {
    display: flex;
    justify-content: flex-end;
    width: 48%;
    margin: 10px 2% 10px 0;
}
.all-filter-box-head {
    background: #ffffff;
    padding: 10px 15px;
    white-space: nowrap;
    cursor: pointer;
    width: 100%;
}
.all-filter-box-head:hover {
    background-color: #ffdc91;
}
.all-filter-box:hover .all-filter-box-content {
    transition: 0.5s all ease;
    display: flex;
    /* box-shadow: 0 0 20px 0px black; */
}
.all-filter-box-head::after {
    font-family: "FontAwesome";
    content: "\f107";
    font-weight: bold;
    margin-left: 5px;
}
.all-filter-box-content {
    position: absolute;
    z-index: 400;
    background-color: #ffffff;
    flex-wrap: wrap;
    display: none;
    /* max-height: 300px; */
    top: 100%;
    left: 0;
    width: 100%;
}
.all-filter-row {
    padding: 10px;
    min-width: 50%;
    cursor: pointer;
    width: 100%;
    /* white-space: nowrap; */
}
.all-filter-row:hover {
    background-color: #ffdc91;
}

/*####################################################################### ACTIVE FILTER BOX ##################################################################*/
.filter-wrapper-head {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    text-transform: uppercase;
    color: #444444;
    padding: 5px 0;
    cursor: pointer;
    margin-bottom: 20px;
}
.filter-wrapper-head::before {
    font-family: 'Font Awesome 6';
    content: "\f0b0";
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: #000000;
    cursor: pointer;
    margin-right: 15px;
}


.active-filter {
    display: flex;
    align-items: center;
    width: 100%;
    background: #E0E0E0;
    padding: 9px 60px 9px 10px;
}

.active-filter-head-wrapper {
    width: 320px;
    flex-shrink: 0;
    padding-left: 30px;
}

.active-filter-head {
    text-transform: uppercase;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.1em;
    color: #000000;
}
.active-filter-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 5px 0 5px;
    padding-left: 5px;
}

.active-filter-row {
    background: #ffffff;
    margin: 6px 20px 6px 0;
    padding: 0 30px 0 20px;
    height: 40px;
    font-size: 12px;
    line-height: 15px;
    color: #000000;
    width: auto;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.active-filter-name {
    margin-right: 3px;
}

.active-filter-value {
    margin-right: 6px;
    text-transform: uppercase;
    font-weight: 600;
}

.active-filter-value span::after {
    content: ", "
}
.active-filter-value:last-of-type span::after {
    content: ""
}

.active-filter-row .close-icon {
    position: absolute;
    right: 3px;
    top: 8px;
    height: 25px;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.active-filter-row .close-icon::before {
    font-family: 'Font Awesome 6';
    content: "\f00d";
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    line-height: 12px;
    color: #949494;
}

.active-filter-clear {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 26px;
    top: 18px;
    transition: 1s;
}

.active-filter-clear::before {
    font-family: 'Font Awesome 6';
    content: "\f00d";
    font-weight: 300;
    font-size: 28px;
    line-height: 28px;
    color: #949494;
}

/*############################# BANNERS BOX #####################################*/

.category-banner {
    margin-bottom: 30px;
}

.category-banner img {
    width: 100%;
}



/*####################################################################### SORTING BOX ##################################################################*/
.sort-wrapper {
    width: 20%;
}
.sort-wrapper form {
    width: 100%;
}
.sorted-mode-info {}
.sorted-mode-form {
/*    width: 15%;*/
    position: initial;
}
/*####################################################################### PAGINATION BOX ##################################################################*/
.pagination-wrapper {
    width: 100%;
    padding: 10px 0;
    display: flex;
    justify-content: center;
}

.pagination-info {
    text-align: right;
    font-size: 12px;
    position: absolute;
    bottom: 7px;
}


.pagination-num-wrapper {
    display: flex;
}

.pagination-num {

    background: #ffffff;
    color: #414040;
    height: 30px;
    width: 40px;
    font-size: 24px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 0;


    display: flex;
    justify-content: center;
    align-items: center;
}
a.pagination-num:hover  {
    opacity: 0.9;
}


.pagination-num + .pagination-num {
    margin-left: 5px
}

.pagination-num.first,
.pagination-num.last,
.pagination-num.prev,
.pagination-num.next {
    background: #ffffff;
    width: 27px;
}

.pagination-num.first::before,
.pagination-num.last::before,
.pagination-num.prev::before,
.pagination-num.next::before {
    font-family: 'Font Awesome 6';
    color: #414040;
    font-weight: 900;
    font-size: 20px;
    line-height: 20px;
}
.pagination-num.prev::before {
    content: "\f053";
}
.pagination-num.next::before {
    content: "\f054";
}

.pagination-num.first::before {
    content: "\f323";
}
.pagination-num.last::before {
    content: "\f324";
}

.pagination-num:hover::before {
    color: #00B897;
}



.pagination-num.selected {
    background: #00B897;
    border: 1px solid #00B897;
    color: #ffffff;
}


/*####################################################################### CATEGORY PRODUCTS BOX ##################################################################*/
.category-empty-page {
    width: 100%;
    padding: 60px 0 20px;
    text-align: center;
}
.page-empty-text {
    width: 454px;
    margin: 30px auto 0;
}



.category-products-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 30px -15px 0;
}
.category-product {
    width: 22.8%;
    background: #FFFFFF;
    margin: 0 15px;
    height: 550px;
}
.category-product.invisible {
    margin: 0 15px;
}
.category-product-border {
    border: 1px solid rgba(72, 74, 73, 0.95);
}

.category-product:hover .category-product-footer{
    margin-bottom: -70px;  /* footer no move, else unnecessary border under block*/
}

.category-product-img {
    width: 100%;
    border-bottom: 1px solid rgba(72, 74, 73, 0.95);
    overflow: hidden;
    /**/
    min-height: 312px;
    background-color: #FFE6E7;
}
.category-product-img img {
    width: 100%;
    transition: 1s;
    font-size: 10px;
}
.category-product:hover .category-product-img img{
    transform: scale(105%);
    transition: 1s;
}
.category-product-name-wrapper{
    padding: 20px;
}

.category-product-cat {
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0.2em;
    text-align: left;
    color: #00B897;
    text-transform: uppercase;
    margin-bottom: 12px;
    /**/
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.category-product-name{
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0;
    text-align: left;
    margin-bottom: 12px;
    display: block;
    height: 42px;
    overflow: hidden;
}

.category-product-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 30px;
    opacity: 0;
    margin-bottom: -70px;
    transition: margin-bottom 1s, opacity 0.5s;
    z-index: 10;
}

.category-product:hover .category-product-footer{
    opacity: 1;
    margin-bottom: 0;
    transition: margin-bottom 0.5s, opacity 2s;
}

.category-product-footer-left{
    width: 80px;
    display: flex;

}

.category-product .category-product-btn{
    background: #FAFAFA;
    box-shadow: 0 0 6px 0 #00000040;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-right: 5px;
    flex-shrink: 0;

}

.category-product .category-product-btn > a{
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.category-product .category-product-btn .share{
    border-radius: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.category-product-btn .share::before,
.category-product-footer .add-wishlist::before,
.category-product-footer .add-compare::before{
    font-family: 'Font Awesome 6';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 19px;
}

.category-product-btn .share::before{
    content: '\f1e0';
}


.category-product-footer .preloader::before {
    font-family: 'Font Awesome 6';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 20px;
    position: absolute;
    top: calc(50% - 9px);
    left: calc(50% - 9px);
}

.category-product-footer .add-wishlist::before{
    content: '\f004';
    color: #00B897;
}
.category-product-footer .add-compare::before{
    content: '\f515';
    color: #F7748B;
}




.category-product-footer .add-wishlist:hover::before,
.category-product-footer .add-compare:hover::before{
    font-weight: 900;
    transition: 1s;
}
.category-product-footer .add-wishlist.remove::before,
.category-product-footer .add-compare.remove::before{
    font-weight: 900;
    color: #ffffff;
}

.category-product .category-product-btn.remove-btn > a.add-wishlist{
    background: #00B897;

}
.category-product .category-product-btn.remove-btn > a.add-compare{
    background: #F7748B;

}
.category-product-btn:hover .share::before{
    color: #00B897;
    transition: 0.5s;
}

.category-product-btn .bubble-box {
    padding: 20px;
    background: #FFFFFF;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
    border: none;
    border-radius: 10px;
}
.category-product-btn .bubble-box::after {
    border-top-color: #ffffff;
}

.category-product-btn .share + .bubble-box {
    width: fit-content;
    right: 0;
    bottom:100%;
    opacity: 1;
    visibility: visible;

}
.category-product-btn .share.close + .bubble-box {
    width: fit-content;
    max-width: 80%;
    right: 0;
    bottom:100%;
    opacity: 0;
    visibility: hidden;
}
.category-product-btn .share + .bubble-box::after {
    right: 20px;
    left: auto;
}



.category-product-footer .category-product-add-cart{
    background-color: #F7748B;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    height: 38px;
    border-radius: 38px;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.category-product-footer .category-product-add-cart:hover{
    opacity: 0.9;
    transition: 1s;
}

/* category-products-banners */

.category-products-banners {
   width: 100%;
    margin-top: -1px;

}




/* hits block */

.categoriy-hits-box-wrapper {
    background-color: #ffffff;
    background-image: url(/images/bg-hits-content.jpg);
    background-position: top left;
    background-repeat: repeat-x;
}
.categoriy-hits-box-wrapper .page-content {
    background: transparent;
    height: 765px;
}

.categoriy-hits-box-header{
    font-size: 30px;
    font-weight: 700;
    line-height: 37px;
    letter-spacing: 0.1em;
    color: #ffffff;
    padding-top: 20px;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
}
/* spec block */

.categories-spec-box-wrapper {
    background: #00B897;
    background-image:url(/images/bg-category-name-block.png), url(/images/bg-category-name-wrapper.jpg) ;
    background-position: top center;
    background-repeat: no-repeat, repeat-x;
    padding-bottom: 0;
    overflow: hidden;
    /**/
    height: 590px;
}
.categories-spec-box-wrapper .page-content {
    background-color: transparent;
    height: 100%;
    max-height: 590px;
    padding: 80px 0;
    overflow: hidden;
}




.categories-spec-box-block {
    width: 676px;
    height: 100%;
    margin: 0 auto;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backdrop-filter: blur(3px);
    overflow: hidden;
}

.categories-spec-box-header{
    font-size: 30px;
    font-family: Venus Rising;
    font-weight: 900;
    line-height: 37px;
    letter-spacing: 0.1em;
    margin-bottom: 30px;
    color: #000000;
    text-transform: uppercase;
    text-align: center;
}

.categories-spec-box-desc {
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.1em;
    text-align: left;
    color: #ffffff;
    overflow: hidden;
}

/* PRICE */


.categories-box-product-price {
    display: flex;
    justify-content: space-between;
    align-items: end;
}
.categories-box-product-price .normal-price {
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    letter-spacing: 0.1em;
    text-align: left;
    color: #414040;
}
.categories-box-product-price .old-price {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.1em;
    color: #BABABA;
}
.categories-box-product-price .old-price::before {
    content: '';
    display: block;
    height: 2px;
    width: 100%;
    background-color: #414040;
    position: absolute;
    top: 50%;
}


/* category-hits-box */
/* hack page loading */
.js-slick-category-hits-slide{display:none;}
.js-slick-category-hits-slide.slick-initialized{display:block;}

.category-hits-box-items .slick-prev,
.category-hits-box-items .slick-next {
    top: 200px;
}

.category-hits-box-items {}

.category-hits-box-items .slick-list {
    margin: 0 -16px;
}

.category-hits-box-product {
    background: #FFFFFF;
    margin: 0 16px;
    border: 1px solid rgba(72, 74, 73, 0.95);
}

.category-hits-box-product:hover {}

.category-hits-box-product:not(.slick-active):hover .category-hits-box-product-footer{
    margin-bottom: -70px;  /* footer no move, else unnecessary border under block*/
}

.category-hits-box-product-img {
    width: 100%;
    min-height: 310px;
    background: #FFDFE5;
    border-bottom: 1px solid rgba(72, 74, 73, 0.95);
    overflow: hidden;
    font-size: 10px;
}
.category-hits-box-product-img img {
    width: 100%;
    height: auto;
    transition: 1s;
}

.category-hits-box-product:hover .category-hits-box-product-img img {
    transform: scale(105%);
    transition: 1s;
}

.category-hits-box-product-name-wrapper {
    padding: 20px 20px 30px;
}

.category-hits-box-product-cat{
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0.2em;
    text-align: left;
    color: #00B897;
    text-transform: uppercase;
    margin-bottom: 12px;
    /**/
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.category-hits-box-product-name{
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0;
    text-align: left;
    margin-bottom: 12px;
    display: block;
    height: 42px;
    overflow: hidden;
}

.category-hits-box-product-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 30px;
    opacity: 0;
    margin-bottom: -70px;
    transition: margin-bottom 1s, opacity 0.5s;
    z-index: 10;
}
.category-hits-box-product:hover .category-hits-box-product-footer{
    opacity: 1;
    margin-bottom: 0;
    transition: margin-bottom 0.5s, opacity 2s;
}

.category-hits-box-product-footer-left {
    width: 80px;
    display: flex;
}

.category-hits-box-product-footer .category-hits-box-product-btn{
    background: #FAFAFA;
    box-shadow: 0 0 6px 0 #00000040;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-right: 5px;
    flex-shrink: 0;
}

.category-hits-box-product-footer .category-hits-box-product-btn > a{
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.category-hits-box-product-footer .category-hits-box-product-btn .share{
    border-radius: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.category-hits-box-product-footer .category-hits-box-product-btn .share::before,
.category-hits-box-product-footer .add-wishlist::before,
.category-hits-box-product-footer .add-compare::before{
    font-family: 'Font Awesome 6';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 19px;
}

.category-hits-box-product-footer .category-hits-box-product-btn .share::before{
    content: '\f1e0';
}

.category-hits-box-product-footer .preloader::before{
    font-family: 'Font Awesome 6';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 20px;
    position: absolute;
    top: calc(50% - 9px);
    left: calc(50% - 9px);
}

.category-hits-box-product-footer .add-wishlist::before{
    content: '\f004';
    color: #00B897;
}
.category-hits-box-product-footer .add-compare::before{
    content: '\f515';
    color: #F7748B;
}

.category-hits-box-product-footer .category-hits-box-product-btn:hover .share::before{
    color: #00B897;
    transition: 0.5s;
}


.category-hits-box-product-footer .add-wishlist:hover::before,
.category-hits-box-product-footer .add-compare:hover::before{
    font-weight: 900;
    transition: 1s;
}
.category-hits-box-product-footer .add-wishlist.remove::before,
.category-hits-box-product-footer .add-compare.remove::before{
    font-weight: 900;
    color: #ffffff;
}
.category-hits-box-product-footer .category-hits-box-product-btn.remove-btn > a.add-wishlist{
    background: #00B897;
}
.category-hits-box-product-footer .category-hits-box-product-btn.remove-btn > a.add-compare{
    background: #F7748B;
}

.category-hits-box-product-footer .category-hits-box-product-add-cart{
    background-color: #F7748B;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    height: 38px;
    border-radius: 38px;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.category-hits-box-product-footer .category-hits-box-product-add-cart:hover{
    opacity: 0.9;
    transition: 1s;
}

