.b_products{
    position: relative;

    h1{
        color: #ff6000;
        font-size: 30px;
        border-bottom: 1px solid #ff6000;
        margin: 0 0 20px 0;
        font-weight: 400;
    }

    &:has(.sort_products){
        h1 .products_title{
            font-size: 23px;
            font-weight: 600;

            line-height: 26px;
        }
    }
    h2.pub_type{
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 400;

        img{width: 50px;display: block;filter: var(--light_grey_icon_filter);}
    }

    .sort_products{
        display: flex;
        justify-content: right;
        gap: 0 15px;

        margin: 8px 0;

        font-size: 12px;
        font-weight: 400;
        color: #303030;

        @media(max-width: 400px){
            flex-wrap: wrap;
            margin: 12px 0 8px;
            .sort_section_title{width: 100%;}
        }
        .sort_param{
            display: flex;
            align-items: center;
            gap: 2px;
            color: #8b9796;
            cursor: pointer;

            img{
                filter: var(--hovered_icon_filter);
                width: 8px;
                opacity: 0;

                transition: 0.3s ease all;
            }

            transition: 0.3s ease all;

            &:hover, &.active{
                img{opacity: 1;}
                color: var(--hovered_text_color);
            }

            &.asc{img{rotate: 180deg;}}
            &.desc{img{rotate: 0;}}
        }
    }

    .products_list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 30px 8px;

        height: 496px;
        padding: 4px;
        overflow: hidden;

        /* display: grid;
        justify-content: space-evenly;
        gap: 30px 8px;
        grid-template-columns: repeat(auto-fill, 180px); */

        .w_product_mini{--width: 180px;}

        @media(max-width: 800px){
            justify-content: space-around;
            .w_product_mini{--width: 150px;}
        }
    }

    .pagination_separator{
        width: 100%;
        margin: 50px 0;

        display: flex;
        gap: 5px;
        align-items: center;

        .pagination_line{
            flex-grow: 1;
            height: 1px;

            background: #e6e6e6;
        }

        .cur_page{font-size: 12px;color: #bbbbbb;line-height: 10px;}
    }

    .product_pagination{
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 10px;
        background: #ebf0ef;

        .pages{
            border: 1px solid #aeb6b5;
            display: flex;

            .page{
                padding: 0 10px;
                height: 28px;

                background: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;

                font-size: 12px;
                color: #000;
                text-decoration: none;

                &:hover, &.active{background: #aeb6b5;color: #fff;}
            }
            .page:not(:last-of-type){border-right: 1px solid #aeb6b5;}
        }

        .dynamic_load_next_page{
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 8px;
            cursor: pointer;

            height: 28px;
            background: #fff;
            border: 1px solid #aeb6b5;

            font-size: 12px;
            color: #008ac4;

            &:hover{background: #aeb6b5;color: #fff;}
        }
    }

    .nothing_found{width: 100%;text-align: center;font-size: 20px;}

    .loader_container{
        --loader_heigth: calc(100svh - var(--header_heigth));
        --loader_width: calc(100svw - 520px);

        --loader_top: var(--header_heigth);
        --loader_left: 260px;

        @media(max-width: 1024px){--loader_width: 100svw;--loader_left: 0;}
    }
}