.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: 505px;
        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;
        }

        &:has(.w_product_wide){
            height: unset;
        }

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

    .link_to_full_products_list {
        font-size: 14px;
        color: #ff6000;
        text-decoration: none;
        display: flex;
        justify-content: right;
        align-items: center;
        gap: 2px;
        width: 100%;
        margin-top: 15px;
        img {
            display: block;
            height: 12px;
            rotate: 270deg;
            filter: var(--orange_icon_filter);
        }

        &:hover{
            color: var(--hovered_text_color);
            --orange_icon_filter: var(--hovered_icon_filter);
        }
    }

    .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 - 550px);

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

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