@media only screen and (max-width: 1200px) {

    h1 {
        font-size: 22px;
    }
    h2 {
        font-size: 18px;
    }

    /* ---------- BODY ---------- */

    header {
        height: 50px;
    }
    .header_admin {
        height: 70px;
    }
    section {
        max-width: 320px;
        min-height: calc(100svh - 245px);
    }

    /* ---------- BUTTON ---------- */

    button.form {
        width: 300px;
    }

    /* ---------- ALERT INFO ---------- */

    .alert_info_text {
        padding: 10px;
    }

    /* ---------- HEADER ---------- */

    h2.tagline {
        display: none;
    }


    .header_layout {
        display: block;
        height: 50px;
        border-bottom: 1px solid #DBDBDB;
    }
    .header_layout_block {
        width: 350px;
    }

    .header_logo.header_settings, .header_logo.desktop {
        display: none;
    }

    /* działanie przycisku otwierania i zamykania menu */
    .header_toggle {
        display: block;
        float: left;
        margin: 5px 10px 0 10px;
    }
    .header_toggle_button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        color: #3b3b3b;
        font-size: 26px;
        cursor: pointer;
        list-style: none;
    }
    .header_toggle_button::-webkit-details-marker {
        display: none;
    }
    .header_toggle_close {
        display: none;
    }
    .header_toggle[open] .header_toggle_open {
        display: none;
    }
    .header_toggle[open] .header_toggle_close {
        display: block;
    }
    .header_toggle_open {
        color: #3b3b3b;
        font-size: 32px;
    }
    .header_toggle_close {
        color: #3b3b3b;
        font-size: 34px;
    }
    /* blokada przewijania strony po otwarciu menu */
    html:has(.header_toggle[open]),
    body:has(.header_toggle[open]) {
        overflow: hidden;
    }
    /* wygląd pozycji w otwartym menu mobilnym */
    header:has(.header_toggle[open]) .header_menu {
        background-color: #F5F6F8;
    }
    header:has(.header_toggle[open]) .header_menu_button {
        color: #242526;
        border-bottom: 1px solid #DBDBDB;
        flex: 0 0 auto;
        justify-content: flex-start;
        box-sizing: border-box;
        width: 100%;
        min-height: 60px;
        height: auto;
        padding: 0 25px;
    }
    header:has(.header_toggle[open]) .header_menu_button_icon {
        color: #0969B9;
        display: flex;
        justify-content: center;
        flex-shrink: 0;
        width: 30px;
        margin-right: 15px;
    }
    header:has(.header_toggle[open]) .header_menu_button_text {
        font-size: 18px;
        text-align: left;
    }

    .header_logo {
        margin: 8px 0 0 0;
        height: 33px;
        width: 170px;
    }
    .header_sygnet {
        /*display: block;*/
        /*float: left;*/
        /*margin: 10px 20px 0 0;*/
        /*height: 60px;*/
        /*width: 60px;*/
    }

    .header_settings.desktop {
        display: none;
    }
    .header_settings.mobile {
        clear: none;
        float: none;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        box-sizing: border-box;
        width: 100%;
        min-height: 50px;
        margin: 0;
        padding: 0 15px;
        border-bottom: 1px solid #DBDBDB;
    }
    .header_icon {
        float: none;
        margin: 0 0 0 15px;
    }

    .header_action {
        margin-top: 15px;
    }
    button.signup {
        display: none;
    }

    .header_menu {
        display: none;
    }

    /* admin menu tooggleA */
    body.admin {
        display: block;
    }
    body.admin > header {
        position: sticky;
        top: 0;
        z-index: 20;
        width: 100%;
        min-height: 80px;
        height: 80px;
        background-color: #FFFFFF;
    }
    body.admin > section {
        width: auto;
        min-height: calc(100vh - 80px);
    }
    .header_admin_layout_block {
        border: none;
        float: none;
        width: 350px;
        max-width: 100%;
        height: 80px;
        margin: auto;
    }
    .header_admin_menu {
        box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
    }
    .header_admin_menu_block {
        display: none;
    }
    .header_admin_menu:has(.header_admin_toggle[open]) .header_admin_menu_block {
        display: flex;
        position: fixed;
        top: 80px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: #F5F6F8;
        box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, .35);
    }

    /* ---------- FOOTER ---------- */

    .footer_block, .footer_block.contact, .footer_block.social_media  {
        margin: 0;
        width: 100%;
        float: left;
        clear: both;
    }

    .footer_header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 20px;
        width: 100%;
        cursor: pointer;
        margin: 10px 0;
    }
    .footer_content {
        display: none;
    }
    .footer_block.active .footer_content {
        display: block;
    }
    .footer_arrow {
        display: block;
        margin-left: auto;
        transition: transform .45s ease;
    }
    .footer_block.active .footer_arrow {
        transform: rotate(180deg);
    }

    /* ---------- PAGE & TABLE ---------- */

    .page_button_add {
        margin-bottom: 20px;
        padding: 9px 30px;
        position: unset;
        width: 300px;
    }

    .page_navigation {
        width: 300px;
    }
    .page_form_add {
        margin-bottom: 20px;
        width: 300px;
    }
    .page_button_count {
        display: none;
    }
    .navigation_form_search {
        margin-top: 13px;
    }
    .form_input.input_add {
        margin-right: 0;
        width: 300px;
    }
    .select2-container {
        width: 300px !important;
    }

    .table_block {
        width: 300px;
    }
    .table_row {
        float: none;
        margin: auto;
        position: relative;
        width: 300px;
    }
    .table_row.title {
        display: none;
    }
    .table_row_value {
        max-width: 300px;
        padding: 0;
    }
    .table_row_value.action {
        right: 0;
        position: absolute;
        top: 0;
    }
    hr.table_title {
        display: none;
    }
    hr.table {
        display: block;
        margin: 15px 0;
    }

    /* ---------- CATEGORY PATH ---------- */

    .category_path {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 10px;
    }








    @media only screen and (max-width: 1200px) {

        header {
            height: 58px;
            background-color: var(--navy);
        }

        .header_layout {
            height: 58px;
            background-color: var(--navy);
        }

        .header_layout_block {
            width: 100%;
            max-width: 100%;
            height: 58px;
            padding: 0 12px;
            box-sizing: border-box;
        }


        /* hamburger */

        .header_toggle {
            margin: 9px 18px 0 0;
        }

        .header_toggle_open,
        .header_toggle_close {
            color: #ffffff;
        }


        /* logo */

        .header_logo {
            display: block;

            width: auto;
            height: 38px;

            margin: 10px 0;
            padding: 3px 7px;

            background-color: #ffffff;
            border-radius: 4px;
        }


        /* ---------- OTWARTE MENU ---------- */

        header:has(.header_toggle[open]) .header_menu {
            top: 58px;

            background-color: var(--navy);

            box-shadow: 0 4px 12px rgba(0, 0, 0, .20);
        }

        header:has(.header_toggle[open]) .header_menu_button {
            min-height: 54px;

            padding: 0 20px;

            color: #dce8f4;

            border-bottom: 1px solid rgba(255, 255, 255, .10);
            border-radius: 0;
        }

        header:has(.header_toggle[open]) .header_menu_button:hover,
        header:has(.header_toggle[open]) .header_menu_button.active {
            color: #ffffff;
            background-color: rgba(255, 255, 255, .14);
        }

        header:has(.header_toggle[open]) .header_menu_button_icon {
            color: #dce8f4;

            width: 28px;
            margin-right: 12px;
        }

        header:has(.header_toggle[open]) .header_menu_button_text {
            font-size: 15px;
            font-weight: 500;
        }

        /* ustawienia w hamburgerze */
        .header_settings.mobile {
            min-height: 52px;

            padding: 0 20px;

            border-bottom: 1px solid rgba(255, 255, 255, .10);
        }

        .header_settings.mobile .header_icon {
            color: #dce8f4;
        }

        footer {
            height: auto;
        }
        .footer {
            grid-template-columns: 1fr;
            gap: 20px;
            padding: 10px 20px;
            width: 300px;
        }
        .footer_block {
            float: none;
            width: 100%;
        }
    }


    /* ---------- BLOK PRODUKTU ---------- */

    .products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .product-block {
        aspect-ratio: 1 / 1.5;
        padding: 20px 8px 10px;
    }
    .product-manufacturer {
        top: 5px;
        right: 8px;
        width: 48px;
        height: 20px;
    }
    .product-image {
        width: 90px;
        height: 90px;
        margin-bottom: 5px;
    }
    .product-text {
        height: 40px;
        flex-shrink: 0;
    }
    .product-text span {
        font-size: 10px;
        line-height: 14px;
    }
    .product-name {
        height: 54px;
        flex-shrink: 0;
    }

    /* ---------- BLOK NORMY ---------- */

    .standards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .standard-block {
        min-height: 154px;
        padding: 12px;
    }
    .standard-name {
        font-size: 14px;
        line-height: 18px;
        margin-bottom: 10px;
    }
    .standard-description {
        font-size: 12px;
        line-height: 17px;
        flex: none;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        height: 68px; /* 4 × 17px */
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .standard-products {
        margin-top: 12px;
        padding-top: 10px;
        font-size: 11px;
    }

}