@media (max-width: 991px) {
  .nnavbar {
    --nnav-bg-color: #222;
    /* przezroczysty blizniak wymuszonego #222 (gradient "wygaszenia" listy) */
    --nnav-bg-color-0: rgba(34, 34, 34, 0);
    --nnav-link-color: #FFF;
    --nnav-link-2-color: #888;
  }
  /* b2c (schemat black): tło jak na desktopie */
  .nnavbar.nnavbar-color-black {
    --nnav-bg-color: #121212;
    --nnav-bg-color-0: rgba(18, 18, 18, 0);
  }
  /* b2b (schemat white): teksty menu (taby, itemy itd.) na #222222 */
  .nnavbar.nnavbar-color-white {
    --nnav-link-color: #222222;
  }
  .nnavbar-body-mobile-effect {
    left: 0 !important;
  }
  .nnavbar-box {
    width: 100%;
    max-width: none;
    left: 0;
    background: none;
  }
  .nnavbar:before {
    height: 70px;
    left: 0;
    top: -70px;
    opacity: 1 !important;
    border-radius: 0 0 26px 26px;
    background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .9) 42%, rgba(0, 0, 0, .7) 89%, rgba(0, 0, 0, .66) 100%);
    z-index: 1;
    transition: .4s all ease-in-out !important;
  }
  .nnavbar.nnavbar-stop:before {
    top: 0;
  }

  .nnavbar.nnavbar-color-white:before {
    background: linear-gradient(180deg, #F7F7F3 0%, #F7F7F3 100%);
  }
  .nnavbar-mobile {
    z-index: 10;
  }
  /* .nnavbar-container (menu) to position:fixed z-index:990 — pasek z logo
     musi byc NAD nim (991), inaczej kontener lapie kliki i logo jest
     nieklikalne. pointer-events:none na pasku (poza logo/hamburgerem), zeby
     kliki menu ponizej dochodzily normalnie. */
  .nnavbar-mobile-opened .nnavbar-mobile {
    z-index: 991;
    pointer-events: none;
  }
  .nnavbar-mobile-opened .nnavbar-mobile-logo-box {
    pointer-events: auto;
  }

  .nnavbar-mobile-opened .nnavbar-mobile-hamburger-box {
    display: none;
  }
  .nnavbar-mobile-logo {
    width: 160px;
    opacity: 1;
    /* szerokosc dalej animowana (zwezenie przy otwarciu menu), ale opacity
       INSTANT — logo nie "pojawia sie" przy zamknieciu submenu */
    transition: .4s width ease-in-out;
  }
  /* b2b (schemat white): białe logo na jasnym pasku #F7F7F3 — invert daje czarne */
  .nnavbar.nnavbar-color-white .nnavbar-mobile-logo {
    filter: invert(1);
  }
  .nnavbar.nnavbar-mobile-opened:has(.nnavbar-menu-item-open) .nnavbar-mobile-logo {
    opacity: 0;
  }
  .nnavbar:has(.nnavbar-menu-item-open) .nnavbar-language-box {
    opacity: 0;
    user-select: none;
    pointer-events: none;
  }
  /* otwarte submenu chowa tez pasek tabow (toggle Personal/Business + Company) */
  .nnavbar-top-menu-overflow {
    /* pasek tabow (Personal/Business + Company) pojawia/znika INSTANT przy
       submenu — bez efektu pojawiania sie po zamknieciu drugiego poziomu */
    transition: 0s opacity ease-in-out;
  }
  .nnavbar:has(.nnavbar-menu-item-open) .nnavbar-top-menu-overflow {
    opacity: 0;
    user-select: none;
    pointer-events: none;
  }
  .nnavbar-mobile-opened .nnavbar-mobile-logo {
    width: 134px;
  }
  .nnavbar-mobile-logo-box {
    line-height: 70px;
    width: 160px;
  }
  .nnavbar-mobile-opened .nnavbar-mobile-logo-box {
    transform: translate(-50%, 0);
  }
  .nnavbar-mobile-hamburger-box {
    top: 7px;
    right: 16px;
  }
  .nnavbar-desktop-hamburger-box {
    top: 11px;
    right: 20px;
  }
  .nnavbar-mobile-hamburger-box:before {
    box-shadow: 0 0 12.3px 2px rgba(0, 0, 0, 0.15);
  }
  .nnavbar-container {
    width: 100%;
    left: 0;
    height: 0;
    transition: .4s height ease-in-out;
  }
  .nnavbar-mobile-opened .nnavbar-container {
    height: calc(100dvh - var(--navbar-alert-height, 0px));
  }
  .nnavbar-top-logo-box {
    display: none;
  }
  .nnavbar-language-box {
    position: absolute;
    left: -15px;
    top: -13px;
    opacity: 1;
    z-index: 10;
    /* opacity INSTANT — przycisk jezyka nie "pojawia sie" po zamknieciu submenu */
    transition: 0s all ease-in-out;
  }
  .nnavbar-lbox-open .nnavbar-language-box {
    opacity: 0;
  }
  .nnavbar-top-box {
    transform: translate(0, 0) !important;
  }
  .nnavbar-top-menu-container {
    transform: translate(0, 0);
    transition: .4s all ease-in-out;
  }
  .nnavbar-lbox-open .nnavbar-top-menu-container {
    transform: translate(140%, 0);
  }
  .nnavbar-menu-block,
  .nnavbar-bottom-mobile {
    opacity: 1;
    transition: .4s all ease-in-out;
  }
  .nnavbar-lbox-open .nnavbar-menu-block,
  .nnavbar-lbox-open .nnavbar-bottom-mobile {
    opacity: 0;
    user-select: none;
    pointer-events: none;
  }
  .nnavbar-lbox-logo-box {
    display: none;
  }
  .nnavbar.nnavbar-mobile-opened:before {
    top: 0;
    height: calc(110dvh + var(--bottom-ui-height, 0px));
    /* height: calc(100dvh - 16px); */
    border-radius: 0;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .9) 100%);
  }

  .nnavbar.nnavbar-color-white.nnavbar-mobile-opened:before {
    background: linear-gradient(180deg, #F7F7F3 0%, #F7F7F3 100%);
  }
  .nnavbar-desktop-hamburger-box:before {
    background: #000;
  }
  .nnavbar-lbox-container {
    opacity: 0;
    width: 100%;
    pointer-events: none;
    user-select: none;
    transition: .4s opacity ease-in-out !important;
  }
  .nnavbar-lbox-open .nnavbar-lbox-container {
    opacity: 1;
    pointer-events: auto;
    user-select: auto;
  }
  .nnavbar-lbox-box {
    left: 0;
    max-width: none;
    width: 100%;
    border-radius: 0;
    background: none;
  }
  .nnavbar-lbox-select-box:before {
    display: none;
  }
  .nnavbar-lbox-select {
    background: none;
  }
  .nnavbar-lbox-close-box {
    top: 11px;
    right: 20px;
  }
  .nnavbar-lbox-close-box:before {
    background: #000;
  }
  /* b2b (schemat white): kółko zamykania language boxa na białym, jak hamburger */
  .nnavbar.nnavbar-color-white .nnavbar-lbox-close-box:before {
    background: #FFF;
  }
  /* b2b (schemat white): select języka — czarna ramka, tekst i chevron
     (mobile ma je na #FFF) */
  .nnavbar.nnavbar-color-white .nnavbar-lbox-select {
    color: #000;
    border-color: #000;
  }
  .nnavbar.nnavbar-color-white .nnavbar-lbox-select-chevron:before,
  .nnavbar.nnavbar-color-white .nnavbar-lbox-select-chevron:after {
    background: #000;
  }
  .nnavbar-bottom-mobile {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(24px * (1 - var(--bottom-ui, 0)));
    /* bottom: 40px; */
    padding: 0 20px;
  }
  .nnavbar-bottom-cta {
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: 24px;
    padding: 20px 10px;
    border-radius: 36px;
  }
  .nnavbar-bottom-hc {
    padding: 10px 20px 0;
  }
  .nnavbar-bottom-hc-icon {
    height: 24px;
    line-height: 24px;
  }
  .nnavbar-submenu-block {
    top: -138px;
    bottom: 0;
    /* bez wlasnego tla — drugi poziom pokazuje prawdziwy panel (.nnavbar:before)
       spod przezroczystego bloku; I poziom znika instant, wiec nic nie
       przeswituje, a kolor zawsze pasuje (b2c czarny gradient / b2b #F7F7F3) */
  }
  .nnavbar-subback {
    padding-bottom: 10px;
  }
  .nnavbar-submenu {
    height: calc(100% - 58px);
    /* height: calc(100% - 74px); */
  }
  .nnavbar-top-menu-container {
    padding: 75px 0 0;
  }
  .nnavbar-menu-block {
    height: calc(100dvh - 252px - 24px * (1 - var(--bottom-ui, 0)) - var(--navbar-alert-height, 0px));
    /* height: calc(100dvh - 252px - 40px - var(--navbar-alert-height, 0px)); */
  }
  .nnavbar-submenu-block {
    bottom: 0;
  }
  .nnavbar-desktop-hamburger-box:before {
    border: 1px solid #22E243 !important;
    background: #222 !important;
  }
  .nnavbar.nnavbar-color-white .nnavbar-desktop-hamburger-box:before {
    background: #FFF !important;
  }
  .nnavbar-desktop-hamburger:before,
  .nnavbar-desktop-hamburger:after {
    background: #22E243 !important;
  }
  .nnavbar-cbox-label {
    color: #FFF !important;
  }
  .nnavbar-cbox-description {
    color: #FFF !important;
  }
  .nnavbar-cbox-link {
    color: #FFF !important;
    border: 1px solid #FFF !important;
  }
  .nnavbar-subback-button:before,
  .nnavbar-subback-button:after {
    background-color: #FFF !important;
  }
  .nnavbar-subback-cta_label {
    color: #FFF !important;
  }
  .nnavbar-bottom-hc-label {
    color: #FFF !important;
  }
  /* b2b (schemat white): teksty zahardkodowane wyżej na biało też na #222222
     — na beżowym tle byłyby niewidoczne */
  .nnavbar.nnavbar-color-white .nnavbar-cbox-label,
  .nnavbar.nnavbar-color-white .nnavbar-cbox-description {
    color: #222222 !important;
  }
  .nnavbar.nnavbar-color-white .nnavbar-cbox-link {
    color: #222222 !important;
    border-color: #222222 !important;
  }
  .nnavbar.nnavbar-color-white .nnavbar-subback-button:before,
  .nnavbar.nnavbar-color-white .nnavbar-subback-button:after {
    background-color: #20BB3B !important;
  }
  .nnavbar.nnavbar-color-white .nnavbar-bottom-hc-label {
    color: #222222 !important;
  }
  /* dolne CTA z ikonkami (b2b: karta+check, personal: telefon) —
     16x16, 8px od tekstu */
  .nnavbar-bottom-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .nnavbar-bottom-cta-icon {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }
  /* b2b: wiersz Log in (klodka) — 32px od gory, 6px od dolu, bez
     bazowego margin-top boxa */
  /* [data-bottom-type="b2b"] .nnavbar-bottom-hc-box {
    margin-top: 0;
  }
  [data-bottom-type="b2b"] .nnavbar-bottom-hc {
    padding-top: 32px;
    padding-bottom: 6px;
  } */
   
  /* b2b (schemat white): tekst language boxa na czarno (mobile ma go na #FFF) */
  .nnavbar.nnavbar-color-white .nnavbar-lbox-info {
    color: #000;
  }
}