@media (max-width: 991px) {
    /* 1. Resetujemy komputerowe ukrywanie i wymuszamy pozycję statyczną */
    .main_submenu {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        box-shadow: none !important;

        /* Kluczowe: musimy wymusić widoczność, a ukrywać tylko przez display:none */
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;

        display: none; /* Domyślnie ukryte, skrypt to zmieni na display: block */
        padding: 10px 0;
        background-color: #f9f9f9; /* Delikatne tło dla odróżnienia submenu (opcjonalnie) */
    }

    /* 2. Ułatwiamy kliknięcie w strzałkę na telefonie */
    li a[title="Oferta"] {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }

    li a[title="Oferta"] i.fa-caret-down {
        padding: 10px 15px; /* Duży obszar kliknięcia dla palca */
        font-size: 1.4em;
        border-left: 1px solid rgba(0,0,0,0.1); /* Wizualne oddzielenie strzałki od tekstu */
    }

    /* 3. Estetyka na mobile - mniejsze marginesy w Twoich kolumnach Bootstrapa */
    .main_submenu .col-12 {
        margin-bottom: 15px !important;
    }
    .main_submenu h2 {
        font-size: 1.2rem;
        margin-top: 10px;
    }
}


@media (max-width: 991px) {
    /* Dodanie 'body' na początku drastycznie zwiększa ważność reguły CSS */

    #main_menu.show{
        z-index: 0!important;
    }
    .lock-scroll #top{
        height: 100%;
    }

    body #main_menu {
        float: none;
        margin-top: 0 !important;
        width: 100%;
    }

    body #main_menu li {
        float: none;
        width: 100%;
        margin-right: 0;
    }

    body #main_menu > li > a {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }

    /* TO JEST KLUCZOWE - WZMACNIAMY NADPISYWANIE SUBMENU */
    body #main_menu .main_submenu {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        padding: 15px 0px 0px !important;
        display: block !important; /* Domyślnie ukrywamy, skrypt to odpali w inline */
        z-index: 1 !important;
    }
    .main_submenu .container{
        padding-left: 0!important;
        padding-right: 0!important;
    }
    #main_menu{
        max-height: 71vh!important;
        overflow-y: scroll!important;
    }

    /* Ukrywamy hovera na mobile */
    body #main_menu li:hover .main_submenu {
        display: block !important;
    }

    /* Zezwalamy JS na zrobienie display: block w stylach inline */
    body #main_menu li .main_submenu[style*="display: block"] {
        display: block !important;
    }

    body #main_menu a i.fa-caret-down {
        padding: 10px 15px;
        margin-right: -20px;
        border-left: 1px solid #eee;
        font-size: 22px;
    }
}

/* =========================================
   AKORDEON W MENU DLA MOBILE
========================================= */
@media (max-width: 991px) {
    .quick_link_wrap>.row{
        background: white!important;
        z-index: 10!important;
    }
    .main_submenu{
        padding-top: 0!important;
        padding-bottom: 0!important;
    }
    /* Ukrywamy linki domyślnie na urządzeniach mobilnych */
    .sub-links-wrapper {
        display: none;
        padding-bottom: 15px; /* Dodatkowy margines po rozwinięciu */
    }

    /* Celujemy w nagłówek kategorii (pierwszy div wewnątrz kolumny) */
    .main_submenu .col-12 > div:first-child {
        cursor: pointer; /* Kursor łapki */
        position: relative; /* Potrzebne do pozycjonowania strzałki */
    }

    /* Dodajemy małą strzałkę w dół po prawej stronie nagłówka */
    .main_submenu .col-12 > div:first-child::after {
        content: '\25BC'; /* Znak Unicode dla trójkąta w dół */
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        color: #999;
        transition: transform 0.3s ease;
        display: none!important;
    }
    body .main_submenu{
        padding-left: 0!important;
        padding-right: 0!important;
    }

    /* Klasa dodawana przez JS po rozwinięciu - obraca strzałkę */
    .main_submenu .col-12 > div:first-child.active-accordion::after {
        transform: translateY(-50%) rotate(180deg);
    }
}

/* Zabezpieczenie dla PC - wymuszamy widoczność linków zawsze powyżej 991px */
@media (min-width: 992px) {
    .sub-links-wrapper {
        display: block !important;
    }
}