

/* Start:/local/templates/аrbq/components/bitrix/catalog/catalog_arbq/style.css?17644392644165*/
.catalog-section-container {
    padding-bottom: 90px;
    display: flex;
    gap: 40px;
}

.section-elements-container {
    width: 100%;
}

.sort-pagination-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 40px;
    padding-bottom: 40px;
}

.sort-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    transition: all ease var(--transition-speed);
    padding: 0 7.5px;
    border-radius: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: var(--main-darck);

}

.sort-dropdown-toggle:hover {
    color: var(--main-red);
    transition: all ease var(--transition-speed);
}

#sort-chevron {
    color: #9ca3af;
    transition: all ease var(--transition-speed);
    width: 12px;
    height: 12px;
}

#sort-chevron.rotate-180 {
    transform: rotate(180deg);
}

.sort-dropdown-menu {
    position: absolute;
    left: 0;
    margin-top: 8px;
    width: inherit;
    background-color: var(--text-white);
    border-radius: 6px;
    box-shadow: 0 7px 20px 0 var(--drop-shadow);
    z-index: 2;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sort-title {
    font-size: 14px;
    font-weight: 500;
}

.dropdown-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--main-darck);
    transition: all ease var(--transition-speed);
    font-size: 14px;
    font-weight: 400;
}

.dropdown-label:hover {
    color: var(--main-red);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 400;
    color: var(--main-darck);
}

.pagination-label {
    color: var(--main-darck);
    white-space: nowrap;
}

.count-buttons-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-count-button {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all ease var(--transition-speed);
    color: var(--main-darck);
    background: none;
    border: 1px solid transparent;
}

.page-count-button:hover, .page-count-button.selected-count {
    border: 1px solid var(--button-gray-bg);
}

.relative {
    position: relative;
}

.hidden {
    display: none;
}

.mobile-filter-btn-toggle {
    display: none;
}

.btns-sort-and-filter {
    display: flex;
    align-items: center;
    gap: 24px;
}

.search-header .section-title {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 60px;
}

.search-header .section-title h1 {
    font-weight: 700;
    font-size: 32px;
    line-height: 125%;
    color: var(--main-darck);
    max-width: 80%;
}

.search-header .section-title span {
    font-weight: 600;
    font-size: 24px;
    line-height: 125%;
    color: var(--text-darck-opacity);
}

@media (max-width: 1025px) {
    .filter-container {
        position: fixed;
        top: 0;
        left: 0;
        background-color: var(--text-white);
        z-index: 10;
        padding: 48px 24px 20px;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        display: none;
    }

    .mobile-filter-btn-toggle {
        display: flex;
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        color: var(--main-darck);
        gap: 7px;
        width: 100%;
    }

    .sort-pagination-container {
        justify-content: space-between;
    }
}

@media (max-width: 767px) {
    .sort-pagination-container, .btns-sort-and-filter {
        flex-direction: column;
        align-items: flex-start;
        gap: 26px;
        width: 100%;
    }
    #sort-dropdown-container{
        width: 100%;
    }
    .sort-dropdown-toggle {
        padding: 0;
        justify-content: space-between;
    }

    .mobile-filter-btn-toggle {
        font-size: 14px;
        justify-content: space-between;
    }

    .catalog-colored {
        background-color: var(--section-color);
    }

    .sort-title, .dropdown-label {
        font-size: 12px;
    }
}
/* End */


/* Start:/local/templates/аrbq/components/bitrix/catalog/catalog_arbq/bitrix/catalog.section.list/.default/style.css?17644392644608*/
.section-info-container {
    padding: 0 0 60px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.section-info-container .section-title {
    display: flex;
    align-items: center;
    gap: 20px;
}

.section-info-container .section-title h1 {
    font-weight: 700;
    font-size: 32px;
    line-height: 125%;
    color: var(--main-darck);
    max-width: 80%;
}

.section-info-container .section-title span {
    font-weight: 600;
    font-size: 24px;
    line-height: 125%;
    color: var(--text-darck-opacity);
}

.section-banner, .section-banner img {
    width: 100%;
    height: 190px;
    object-fit: contain;
    border-radius: 6px;
}

.arbq_catalog_section_list {
    margin-bottom: 60px;
}

.arbq_catalog_section_list .arbq_catalog_section_list_ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
}

.arbq_catalog_section_list .arbq_catalog_section_list_ul li {
    box-sizing: border-box;
    width: calc(33% - 25px);
    height: 209px;
    border-radius: 6px;
    box-shadow: 0 7px 20px 0 var(--drop-shadow);
    list-style: none;
    text-align: center;
    background-color: var(--text-white);
    transition: all ease var(--transition-speed);
}

.arbq_catalog_section_list .arbq_catalog_section_list_ul li:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 50%, rgba(255, 0, 0, 0.1) 100%);
    backdrop-filter: blur(200px);
    transform: scale(1.05);
    border: 1px solid transparent;
    border-image-source: linear-gradient(
            75.58deg,
            rgba(255, 0, 0, 0.3) 32.94%,
            rgba(255, 0, 0, 0) 61.18%
    );
    border-image-slice: 1;
    border-radius: 8px; /* по желанию */
    transition: all ease var(--transition-speed);
}

.arbq_catalog_section_list .arbq_catalog_section_list_ul li .arbq_catalog_section_item {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 24px;
    align-items: flex-start;
    justify-content: space-between;
}

.arbq_catalog_section_item h2 {
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    color: var(--main-darck);
    max-width: 90%;
    text-align: left;
}

.arbq_catalog_section_item button {
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    color: var(--text-darck-opacity);
    background-color: var(--grey-buton-bg);
    padding: 15px 20px;
    border-radius: 36px;
    transition: all ease var(--transition-speed);
}

.arbq_catalog_section_list .arbq_catalog_section_list_ul li:hover > .arbq_catalog_section_item button {
    background-color: var(--main-red);
    color: var(--text-white);
    transition: all ease var(--transition-speed);
}

@media (max-width: 1025px) {
    .section-info-container .section-title h1 {
        max-width: 73%;
    }

    .section-info-container {
        padding: 0 0 40px;
        gap: 20px;
    }

    .section-info-container .section-title h1 {
        font-size: 28px;
    }

    .section-info-container .section-title span {
        font-size: 20px;
    }

    .section-banner, .section-banner img {
        height: 160px;
    }

    .arbq_catalog_section_list {
        margin-bottom: 40px;
    }

    .arbq_catalog_section_list .arbq_catalog_section_list_ul {
        gap: 20px 18px;
    }

    .arbq_catalog_section_list .arbq_catalog_section_list_ul li {
        width: calc(33% - 20px);
        height: 160px;
    }

    .arbq_catalog_section_list .arbq_catalog_section_list_ul li .arbq_catalog_section_item {
        padding: 20px;
    }

    .arbq_catalog_section_item h2 {
        font-size: 20px;
        max-width: 100%;
    }

    .arbq_catalog_section_item button {
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .section-info-container {
        padding: 0 0 20px;
        gap: 16px;
    }

    .section-info-container .section-title h1 {
        max-width: 100%;
    }

    .section-info-container .section-title {
        align-items: flex-start;
        gap: 20px;
        flex-direction: column;
    }

    .section-info-container .section-title h1 {
        font-size: 24px;
    }

    .section-info-container .section-title span {
        font-size: 18px;
    }

    .section-banner, .section-banner img {
        height: 80px;
    }

    .arbq_catalog_section_list .arbq_catalog_section_list_ul {
        gap: 18px;
    }

    .arbq_catalog_section_list .arbq_catalog_section_list_ul li {
        width: 100%;
        height: 160px;
    }

    .arbq_catalog_section_item h2 {
        font-size: 18px;
    }

    .arbq_catalog_section_item button {
        font-size: 12px;
    }
}
/* End */


/* Start:/local/templates/аrbq/components/bitrix/catalog/catalog_arbq/bitrix/catalog.section/.default/style.css?17644392644355*/
@media (min-width: 1200px) {
    /*lg*/
    /*6*/
    .product-item-list-col-6 > .col-xs-12 > .row > .col-md-2:nth-child(6n+1),
    .product-item-list-col-1-6 > .col-sm-6:nth-child(2n+1),
    .product-item-list-col-6-1 > .col-sm-6:nth-child(2n+1),
    .product-item-list-col-1-6 > .col-sm-6 > .row > .col-md-4:nth-child(3n+1),
    .product-item-list-col-6-1 > .col-sm-6 > .row > .col-md-4:nth-child(3n+1),
        /*4*/
    .product-item-list-col-4 > .col-xs-12 > .row > .col-md-3:nth-child(4n+1),
    .product-item-list-col-1-4 > .col-sm-6 > .row > .col-xs-6:nth-child(2n+1),
    .product-item-list-col-4-1 > .col-sm-6 > .row > .col-xs-6:nth-child(2n+1),
        /*3*/
    .product-item-list-col-3 > .col-xs-12 > .row > .col-sm-4:nth-child(3n+1),
        /*2*/
    .product-item-list-col-2 > .col-xs-12 > .row > .col-xs-6:nth-child(2n+1),
        /*1*/
    .product-item-list-col-1 > .col-xs-12 > .row > .col-xs-12:nth-child(1n) {
        clear: both
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    /*md*/
    /*6*/
    .product-item-list-col-6 > .col-xs-12 > .row > .col-md-2:nth-child(6n+1),
    .product-item-list-col-1-6 > .col-sm-6:nth-child(2n+1),
    .product-item-list-col-6-1 > .col-sm-6:nth-child(2n+1),
    .product-item-list-col-1-6 > .col-sm-6 > .row > .col-md-4:nth-child(3n+1),
    .product-item-list-col-6-1 > .col-sm-6 > .row > .col-md-4:nth-child(3n+1),
        /*4*/
    .product-item-list-col-4 > .col-xs-12 > .row > .col-md-3:nth-child(4n+1),
    .product-item-list-col-1-4 > .col-sm-6 > .row > .col-xs-6:nth-child(2n+1),
    .product-item-list-col-4-1 > .col-sm-6 > .row > .col-xs-6:nth-child(2n+1),
        /*3*/
    .product-item-list-col-3 > .col-xs-12 > .row > .col-sm-4:nth-child(3n+1),
        /*2*/
    .product-item-list-col-2 > .col-xs-12 > .row > .col-xs-6:nth-child(2n+1),
        /*1*/
    .product-item-list-col-1 > .col-xs-12 > .row > .col-xs-12:nth-child(1n) {
        clear: both
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /*sm*/
    /*6*/
    .product-item-list-col-6 > .col-xs-12 > .row > .col-sm-4:nth-child(3n+1),
    .product-item-list-col-1-6 > .col-sm-6:nth-child(2n+1),
    .product-item-list-col-6-1 > .col-sm-6:nth-child(2n+1),
    .product-item-list-col-1-6 > .col-sm-6 > .row > .col-xs-6:nth-child(2n+1),
    .product-item-list-col-6-1 > .col-sm-6 > .row > .col-xs-6:nth-child(2n+1),
        /*4*/
    .product-item-list-col-4 > .col-xs-12 > .row > .col-xs-6:nth-child(2n+1),
    .product-item-list-col-1-4 > .col-sm-6:nth-child(2n+1),
    .product-item-list-col-4-1 > .col-sm-6:nth-child(2n+1),
    .product-item-list-col-1-4 > .col-sm-6 > .row > .col-xs-6:nth-child(2n+1),
    .product-item-list-col-4-1 > .col-sm-6 > .row > .col-xs-6:nth-child(2n+1),
        /*3*/
    .product-item-list-col-3 > .col-xs-12 > .row > .col-sm-4:nth-child(3n+1),
        /*2*/
    .product-item-list-col-2 > .col-xs-12 > .row > .col-xs-6:nth-child(2n+1),
        /*1*/
    .product-item-list-col-1 > .col-xs-12 > .row > .col-xs-12:nth-child(1n) {
        clear: both
    }
}

@media (max-width: 767px) {
    /*xs*/
    /*6*/
    .product-item-list-col-6 > .col-xs-12 > .row > .col-xs-6:nth-child(2n+1),
    .product-item-list-col-1-6 > .col-sm-6 > .row > .col-xs-6:nth-child(2n+1),
    .product-item-list-col-6-1 > .col-sm-6 > .row > .col-xs-6:nth-child(2n+1),
        /*4*/
    .product-item-list-col-4 > .col-xs-12 > .row > .col-xs-6:nth-child(2n+1),
    .product-item-list-col-1-4 > .col-sm-6 > .row > .col-xs-6:nth-child(2n+1),
    .product-item-list-col-4-1 > .col-sm-6 > .row > .col-xs-6:nth-child(2n+1),
        /*3*/
    .product-item-list-col-3 > .col-xs-12 > .row > .col-sm-4:nth-child(3n+1),
        /*2*/
    .product-item-list-col-2 > .col-xs-12 > .row > .col-xs-6:nth-child(2n+1),
        /*1*/
    .product-item-list-col-1 > .col-xs-12 > .row > .col-xs-12:nth-child(1n) {
        clear: both
    }
}

.catalog-section {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
}

.load-more-btn {
    max-width: 295px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px auto 0;
    cursor: pointer;
    width: 100%;
}
@media (max-width: 1025px) {
    .catalog-section {
        justify-content: center;
    }
}
@media (max-width: 767px) {
    .catalog-section {
        justify-content: center;
    }
}
/* End */


/* Start:/local/templates/аrbq/components/bitrix/system.pagenavigation/bootstrap_v4/style.css?17644392641161*/
.arbq-pagination-container {
    padding: 60px 0 90px;
}

.arbq-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.page-item {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-item .page-link {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    color: var(--main-darck);
    transition: all ease var(--transition-speed);
}

.page-item.active .page-link {
    color: var(--text-white);
    background-color: var(--main-red);
    transition: all ease var(--transition-speed);
}

.page-item:hover .page-link {
    color: var(--text-white);
    background-color: var(--main-red);
    transition: all ease var(--transition-speed);
}

@media (max-width: 1025px) {
    .arbq-pagination-container {
        padding: 40px 0 60px;
    }
}

@media (max-width: 767px) {
    .arbq-pagination-container {
        padding: 40px 0;
    }
}


/* End */


/* Start:/local/templates/аrbq/components/bitrix/catalog.item/.default/style.css?17644392644111*/
.product-card {
    background-color: transparent;
    width: 100%;
    overflow: hidden;
    text-align: left;
    max-width: 260px;
    min-width: 260px;
    border-radius: 6px;
    position: relative;
}

.image-container {
    position: relative;
    padding-bottom: 65%;
    background-color: var(--text-white);
    box-shadow: 0px 7px 20px 0px var(--drop-shadow);
    overflow: hidden;
    border-radius: 6px;
    touch-action: pan-y;
}

/* The <a> tag wrapper doesn't affect the slider logic, but is included in HTML structure */
.product-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 180px;
    object-fit: cover;
    object-position: center;
    transition: opacity var(--transition-speed) ease-in-out;
    opacity: 0;
}

.product-image.active {
    opacity: 1;
}

.favorite-wrapper {
    position: absolute;
    top: 0;
    left: 10px;
    z-index: 1;
    width: 40px;
    height: 41px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: var(--text-white);
    box-shadow: 0 4px 10px var(--drop-shadow);
    transition: all ease var(--transition-speed);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.favorite-icon {
    width: 20px;
    height: 20px;
}

.favorite-icon path {
    fill: none;
    stroke: var(--main-darck);
    stroke-width: 1.5px;
    transition: all var(--transition-speed) ease;
}

.favorite-wrapper.active svg path {
    fill: var(--main-red);
    stroke: var(--main-red);
}

.favorite-wrapper:hover svg path {
    fill: var(--main-red);
    stroke: var(--main-red);
}

.favorite-wrapper svg path {
    transition: all var(--transition-speed) ease;
}

.product-content {
    padding: 28px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.price-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.current-price {
    color: var(--main-red);
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    white-space: nowrap;
}

.old-price {
    font-weight: 400;
    font-size: 10px;
    line-height: 100%;
    text-decoration: line-through;
    color: var(--main-darck);
    white-space: nowrap;
}

.discount-badge {
    color: var(--main-red);
    font-weight: 600;
    font-size: 10px;
    line-height: 100%;
    white-space: nowrap;
}

.product-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    color: var(--main-darck);
    transition: all ease var(--transition-speed);
    cursor: pointer;
}

.product-title:hover, .product-title a:hover {
    color: var(--main-darck-hover);
    transition: all ease var(--transition-speed);
}

.slider-controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    padding: 6px 0;
    z-index: 1;
}

@media (max-width: 767px) {
    .slider-controls .line {
        cursor: pointer;
    }
}

.line {
    height: 4px;
    width: 30px;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.5);
    transition: background-color var(--transition-speed) ease-in-out;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.line.active {
    background-color: var(--main-red);
}

.progress-bar {
    height: 100%;
    background-color: #FF0000;
    width: 0;
    transition: width 0s linear;
}

/* --- MEDIA QUERIES --- */
@media (max-width: 1025px) {
    .current-price {
        font-size: 20px;
    }

    .product-title {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .slider-controls {
        bottom: 10px;
    }

    .line {
        height: 3px;
        width: 30px;
    }

    .favorite-wrapper {
        left: 16px;
    }

    .product-content {
        padding: 20px 0;
    }

    .current-price {
        font-size: 18px;
    }
}
/* End */


/* Start:/local/templates/аrbq/components/bitrix/catalog/catalog_arbq/bitrix/catalog.section/.default/themes/green/style.css?1764439264843*/
/* catalog.section */

/*
#63aa28
#6fb32d
#7ab748
#a8d95b
*/

/* Slider */
.bx-green .product-item-image-slider-progress-bar { background-color: #5b9f0b;}
.bx-green .product-item-image-slider-control:hover{ background-color: rgba(91,159,11,.8);}
.bx-green .product-item-image-slider-control.active,
.bx-green .product-item-image-slider-control:hover{ background-color: #5b9f0b;}

/* SCU */
.bx-green .product-item-scu-item-text-block:hover,
.bx-green .product-item-scu-item-color-block:hover,
.bx-green .product-item-scu-item-text-container.selected .product-item-scu-item-text-block,
.bx-green .product-item-scu-item-color-container.selected .product-item-scu-item-color-block{ outline-color: #63aa28;}

/* Amount */
.bx-green .product-item-amount-field:focus{border-color: #63aa28;}


.bx-green .catalog-section-header{border-color:#63aa28;}
/* End */
/* /local/templates/аrbq/components/bitrix/catalog/catalog_arbq/style.css?17644392644165 */
/* /local/templates/аrbq/components/bitrix/catalog/catalog_arbq/bitrix/catalog.section.list/.default/style.css?17644392644608 */
/* /local/templates/аrbq/components/bitrix/catalog/catalog_arbq/bitrix/catalog.section/.default/style.css?17644392644355 */
/* /local/templates/аrbq/components/bitrix/system.pagenavigation/bootstrap_v4/style.css?17644392641161 */
/* /local/templates/аrbq/components/bitrix/catalog.item/.default/style.css?17644392644111 */
/* /local/templates/аrbq/components/bitrix/catalog/catalog_arbq/bitrix/catalog.section/.default/themes/green/style.css?1764439264843 */
