/* COMMON SECTION */

@font-face {
    font-family: 'Geologica';
    src: url('/bitrix/templates/oh_new/fonts/Geologica-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Geologica';
    src: url('/bitrix/templates/oh_new/fonts/Geologica-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Geologica';
    src: url('/bitrix/templates/oh_new/fonts/Geologica-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Geologica';
    src: url('/bitrix/templates/oh_new/fonts/Geologica-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

html{
    --carbon: #2D2C2A;
    --black: #2D2C2A;
}

.wrap-main .breadcrumbs~*{
    font-family: 'Geologica';
    font-weight: 100;
}

.wrap-main .container__inner {
    position: relative;
    max-width: 1580px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
}

/**/

body .section .price-sort{
    margin-top: -8px;
    margin-bottom: 20px;
}

h1{display: none;}
.h1_img{width: 100%; height: auto;}
.section--filter-wrap:nth-child(1n){padding-top: 30px;}
.bx_filter_parameters_box[data-id="RAZDEL"]{display: none;}

.inline-img{display: inline-block; width: 100px; height: 30px;
    background: url(/img/action/shield.png) 0 bottom no-repeat;
    background-size: 100px; margin-bottom: -9px;}

.action-description{font-size: 2rem; line-height: 1;}

.action-description~.section .section--title--catalog{padding: unset; margin-top: -20px; margin-bottom: 25px;}
.section .price-sort{font-size: 16px;}
.section .price-sort>span{position: relative;}
.section .price-sort>span:after{position: absolute; top: 2px; right: -22px; content: ''; display: block; width: 20px; height: 18px; background: url(/img/action/fi-rr-angle-down.svg) center center no-repeat; background-size: 14px; transition: .2s all ease;}
.section .price-sort.active>span:after{transform: rotate(180deg);}

.price-sort{width: 203px; position: relative; cursor: pointer; text-decoration: underline; padding-left: 20px;}

.show_filtr{display: none;}
/*.filtr-trigger.js-main-filtr-mob.active*/
.filtr-trigger .fa{font-size: 25px; margin-right: 3px; margin-top: -20px;}

.action-description~.section{position: relative; padding-top: 150px;}
.action-description~.section .seo_filtr-wrapper{display: flex; gap: 15px; align-items: center; margin-bottom: unset; height: 41px;width: 100%;left:0;top: 20px;position: absolute;}
.action-description~.section .seo_filtr{position: relative; display: flex;flex-direction: row;/* height: unset; *//* position: relative; */background-color: unset;padding-top: unset;/* top: unset; */flex-wrap: nowrap;overflow: hidden;/* margin: unset; */ overflow-x: scroll; scrollbar-width: none; -ms-overflow-style: none; margin-bottom: unset; }
.action-description~.section .seo_filtr-wrapper:after{width: 144px; height: 100%; background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); content: ''; position: absolute; right: 47px; pointer-events: none; z-index: 100;}
.action-description~.section .seo_filtr>a{text-transform: uppercase; flex-shrink: 0; text-decoration: none; background-color: unset; border: 1px solid var(--carbon); color: black; border-radius: 40px; padding: 10px 40px; font-size: 1.5rem; line-height: .75; margin-bottom: unset; margin-right: 18px;}
.action-description~.section .seo_filtr>a:not(.active):hover{opacity: .65;}
.action-description~.section .seo_filtr>a.active{opacity: .3; background-color: unset;}
.angle{
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: url(/img/action/fi-rr-angle-down.svg) center center no-repeat;
    background-size: 32px;
    cursor: pointer;
}
.angle-left{transform:rotate(90deg);}
.angle-right{transform:rotate(-90deg);}
.seo_filtr-wrapper .angle:hover{ opacity: .5;}

body .section .price-sort{text-align: right; width: 230px; padding-right: 23px; text-decoration: none;}
.price-sort ul.sort{right:0; left: unset;}

ul.sort{background-color: white; display: none; position: absolute; top: calc(100% + 5px); border-radius: 14px; padding: 15px; box-shadow: 3px 4px 8.7px 0 rgba(0, 0, 0, 0.25); left: 0; z-index: 110;}

ul.sort .radio-circle {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-right: 8px;
    transition: all 0.2s ease;
}
ul.sort li a{text-decoration: none !important; display: flex; align-items: center; padding: 5px;}
ul.sort li:not(.selected) .radio-circle {
    border: 2px solid #000000;
    background-color: #ffffff;
}
ul.sort li.selected .radio-circle {
    border: 2px solid #000000;
    background-color: #000000;
}
.price-sort__lnk{display: none;}

.brand-block-wrapper{display: flex; gap: 24px;}
.three-section .brand-block{width: calc(100% / 3 - 16px);}
.two-section .brand-block{width: calc(100% / 2 - 24px);}
.brand-block {display: flex; flex-direction: column; gap:18px;}
.brand-block .text-block{display: flex; flex-direction: column; gap:18px;}
.three-section .brand-block>div:first-child{aspect-ratio: 491 / 221;}
.two-section .brand-block>div:first-child{aspect-ratio: 748 / 221;}
.brand-block>div:first-child{width: 100%; height: auto;  background-size: 100%;}
.brand-block>div>div:first-child{background-size: auto 30px; width: 100%; height: 30px; background-repeat: no-repeat;}
.brand-fuse>div>div:first-child{background-image: url(/bauer-supreme-action/assets/brands/fuse.svg);}
.brand-f40>div>div:first-child{background-image: url(/bauer-supreme-action/assets/brands/f40.svg);}
.brand-f50pro>div>div:first-child{background-image: url(/bauer-supreme-action/assets/brands/f50pro.svg);}
.brand-junior>div>div:first-child{background-image: url(/bauer-supreme-action/assets/brands/junior.svg);}
.brand-f30>div>div:first-child{background-image: url(/bauer-supreme-action/assets/brands/f30.svg);}
.brand-f20>div>div:first-child{background-image: url(/bauer-supreme-action/assets/brands/f20.svg);}
.brand-block p:first-child{display: none;}
.brand-block p{font-size: 28px; line-height: 1; margin-bottom: 0;}

body{
    .button:not(.custom-button){
        height: unset;
        width: 33vw;
        min-width: fit-content;
        text-align: center;
        text-decoration: none;
        font-size: 2rem;
        font-weight: 400;
        line-height: 1;
        padding: 18px 36px;
        border-radius: 36px;
        background-color: var(--carbon);
        color: white;
        border: none !important;
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-transform: uppercase;
        margin-bottom: 96px;
        box-shadow: unset !important;
    }
    .button:not(.custom-button):hover{opacity: .5; background-color: var(--carbon) !important;}
    .button:not(.custom-button):active{opacity: 1; filter: invert(1); background-color: unset !important;}
}

@media (max-width: 1214px) {
    body{
        .section--catalog-wrap{
            width: 100%;
        }
        .section .mob_trigger_filtr{z-index: 999;}
        .section--filter-wrap:nth-child(n){
            position: absolute;
            z-index: 901;
            background-color: white;
        }
        .section--filter-wrap:nth-child(n){top: 119px;}
    }
    .brand-block-wrapper{flex-direction: column; gap: 18px;}
    .brand-block>div>div:first-child{height: 18px; background-size: auto 18px;}
    .brand-block{
        flex-direction: row;
        gap: 18px;
        width: 100% !important;
        align-items: center;
    }
    .brand-block>div:first-child{min-width: 37vw; width: 37vw;}
    .brand-block .text-block{gap: 12px;}
    .brand-block p{font-size: 14px;}
}

@media (max-width: 1199px) {
    .action-description~.section .section--title--catalog {margin-top: -16px;}
    .section .mob_trigger_filtr{display: flex; align-items: flex-end; width: fit-content}
    .section .filtr-trigger{background-color: unset; height: 22px;}
    .section .show_filtr{display: none;}
    .action-description~.section{padding-top: 90px;}
}

@media (max-width: 1008px) {
    body{
        .wrap-main .container__inner {
            padding: 0 16px;
        }
    }

    *::-webkit-scrollbar {
  display: none; 
}
*{
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
}

@media (max-width: 1008px) {
    .wrap-main .container__inner {
        padding: 0 20px;
    }
}

@media (max-width: 991px){
    .action-progress *[data-level],
    .action-progress{gap: 20px; font-size: 60px;}
    .action-progress .img-wrapper{width: 150px;}
}
@media (max-width: 767px) {
    .action-description~.section .seo_filtr-wrapper{top: 10px;}
    .action-description~.section{padding-top: 60px;}
    .action-description~.section .seo_filtr{display: flex; flex-direction: row; height: unset; position: relative; background-color: unset; padding-top: unset; top: unset; gap: 0;}
    .action-description~.section .seo_filtr>a{text-transform: lowercase; flex-shrink: 0; text-decoration: none; background-color: unset; border: 1px solid var(--carbon); color: black; border-radius: 40px; margin-right: 16px;}
    .action-description~.section .seo_filtr>a:not(.active):hover{opacity: .65;}
    .action-description~.section .seo_filtr>a.active{opacity: .3; background-color: unset;}
    .seo_filtr-wrapper .angle{display: none;}
    .action-description~.section .seo_filtr>a{font-size: 12px; padding: 8px 16px;}
    .action-progress div[data-level]>img{width: 74px;}
    .action-progress *[data-level],
    .action-progress{gap: 20px; font-size: 30px;}
    .action-progress .img-wrapper{width: 80px;}
    .action-description~.section .seo_filtr-wrapper:after{right: 0;}
    
    .section .mob_trigger_filtr{display: block;}
    .section .filtr-trigger{order: 2;}
    .section .show_filtr{order: 1;}

    
    .action-description{font-size: 1rem;}

    body{
        .button{margin-bottom: 48px; font-size: 1.125rem; padding: 10px 0; width: 100%;}
        .section--catalog-product{margin: unset;}
    }
}

@media (max-width: 600px){
    .brand-block-wrapper .brand-block>div:first-child{aspect-ratio: 181 / 116;}
}

@media (max-width: 450px){
    .brand-block>div>div:first-child{height: 10px; background-size: auto 10px;}
}