/* ELLIE MOBILE FULL MENU V01
   Cel: na mobile/tablecie pokazac pelne poziome menu (jak na desktopie) zamiast hamburgera.
   Powod: malo pozycji w menu, a hamburger (custom panel z customerjs1.js) nie dzialal na tablecie.

   Nadpisuje pknav.css @media (max-width:1024px), ktore:
     - .pk-ce-widget .pk-nav-ul { display:none }   -> chowalo menu
     - .pk-ce-widget .pk-menu-icon { display:flex } -> pokazywalo hamburger
*/

@media (max-width: 1024px) {
  /* Pokaz menu poziomo, zawijane gdy sie nie miesci */
  .pk-ce-widget .pk-nav-ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px 14px !important;
    text-align: center !important;
    width: auto !important;
  }

  .pk-ce-widget .pk-nav-ul > .pk-nav-li {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    border: 0 !important;
  }

  .pk-ce-widget .pk-nav-link {
    padding: 6px 2px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* Ukryj hamburger pknav, strzalki rozwijania podmenu oraz custom panel mobilny ellie.
     Strzalki (.pk-dropdown-toggler) niepotrzebne — menu ma byc jak na desktopie (podmenu na hover/tap). */
  .pk-ce-widget .pk-menu-icon,
  .pk-ce-widget .pk-dropdown-toggler,
  #ellie-mobile-menu-panel {
    display: none !important;
  }
}

/* Mniejsze telefony: drobniejsza czcionka, zeby 6 pozycji ladnie sie zmiescilo */
@media (max-width: 480px) {
  .pk-ce-widget .pk-nav-link {
    font-size: 11px !important;
    letter-spacing: .5px !important;
    padding: 5px 2px !important;
  }
  .pk-ce-widget .pk-nav-ul {
    gap: 0 10px !important;
  }
}