10px !important;
    border-radius: 8px !important;
    margin: 0 !important;
  }

  /* Utrzymaj kolejność elementów */
  .controls .quick-preview,
  .controls .podglad,
  .controls [data-ui="quick-preview"] { order: 20; }

  .controls .kontakt,
  .controls a[href*="kontakt"],
  .controls [data-link="kontakt"] { order: 40; }
}


/* =========================================================
   Desktop nav — elegant color pass (no size changes) — 2025-10-18
   Celem: subtelniejsze, nowoczesne kolory na pasku, bez ruszania wymiarów.
   ========================================================= */
@media (min-width: 992px) {
  /* Przyciski/linki na pasku: neutralny "pill", brandowy tekst,
     dopiero na hover pełne wypełnienie brandem. */
  .controls a,
  .controls button,
  .controls .kategorie-toggle {
    background: #f6f9fc !important;
    color: var(--brand) !important;
    border: 1px solid #e1e8f0 !important;
    box-shadow: 0 2px 8px rgba(2,6,23,.06);
    text-decoration: none;
  }
  .controls a:hover,
  .controls button:hover,
  .controls .kategorie-toggle:hover {
    background: var(--brand) !important;
    color: #ffffff !important;
    border-color: var(--brand) !important;
    box-shadow: 0 6px 16px rgba(2,6,23,.10);
  }
  .controls a:focus-visible,
  .controls button:focus-visible,
  .controls .kategorie-toggle:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 2px;
  }

  /* Input wyszukiwarki: jaśniejsze, eleganckie pole zamiast granatu;
     nadpisujemy inline background z elementu. */
  #searchInput {
    background: #ffffff !important;
    color: var(--fg) !important;
    border: 1px solid #dbe0e8 !important;
  }
  #searchInput::placeholder {
    color: #94a3b8 !important;
  }

  /* Dropdown kategorii — delikatniejsze tony */
  .dropdown-kategorie .menu-kategorie {
    background: #ffffff !important;
    border: 1px solid #e6ebf2 !important;
    box-shadow: 0 16px 40px rgba(2,6,23,.12);
  }
  .menu-kategorie .kategoria-blok { background: #f7f9fc !important; }
  .menu-kategorie .kategoria-blok:hover { background: #eef5ff !important; }
}

/* Dark mode odpowiedniki, bez zmiany wymiarów */
@media (min-width: 992px) {
  body.dark .controls a,
  body.dark .controls button,
  body.dark .controls .kategorie-toggle {
    background: #0f1b2e !important;
    color: #e6f1ff !important;
    border-color: #26344d !important;
    box-shadow: none;
  }
  body.dark .controls a:hover,
  body.dark .controls button:hover,
  body.dark .controls .kategorie-toggle:hover {
    background: #20426d !important;
    border-color: #20426d !important;
  }
  body.dark #searchInput {
    background: #0f162a !important;
    color: #e5e7eb !important;
    border: 1px solid #1f2a44 !important;
  }
  body.dark #searchInput::placeholder { color: #8fa1c5 !important; }

  body.dark .dropdown-kategorie .menu-kategorie {
    background: #0f162a !important;
    border-color: #1f2a44 !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
  }
  body.dark .menu-kategorie .kategoria-blok { background: #111b31 !important; }
  body.dark .menu-kategorie .kategoria-blok:hover { background: #152540 !important; }
}

@media (min-width: 768px) {
  #podgladOfertyTooltip { width: auto !important; }
}

/* === FIX: Najnowsze – karuzela startuje od lewej, bez ucięcia 1. kafelka === */
@media (max-width: 767px) {
  /* 1) Kontener karuzeli */
  #najnowszeContainer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important; /* klucz: start od lewej */
    overflow-x: auto !important;
    gap: 12px !important;

    /* padding z lewej z uwzględnieniem safe-area (iPhone notch) */
    padding: 10px 12px 12px calc(env(safe-area-inset-left, 0px) + 12px) !important;
    margin: 0 !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;

    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;

    /* podpowiedź przeskoku na pierwszy kafelek */
    scroll-padding-left: calc(env(safe-area-inset-left, 0px) + 12px) !important;
  }

  /* 2) Kafelki w karuzeli mają stałą szerokość (nie 48%) */
  #najnowszeContainer .mini-product {
    flex: 0 0 160px !important;
    width: 160px !important;
    max-width: 160px !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
  }

  /* 3) Gwarantuj, że pierwszy kafelek nie ma „lewego” marginesu
        i że snap uwzględnia padding/safe-area */
  #najnowszeContainer .mini-product:first-child {
    margin-left: 0 !important;
    scroll-margin-left: calc(env(safe-area-inset-left, 0px) + 12px) !important;
  }
}

/* Desktop: zlikwiduj przerwę i „szary pasek” pod menu */
@media (min-width: 992px){
  header{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .controls{
    margin: 0 !important;                 /* nadpisuje margin:20px */
    border-top: 0 !important;
    border-bottom: 0 !important;          /* nadpisuje border-bottom z override.css */
    box-shadow: none !important;           /* gasi cień */
    background: #fff !important;           /* ujednolica tło nagłówka i paska */
  }
  /* jeśli tuż pod headerem masz <hr>, ukryj tylko tę jedną kreskę */
  header + hr { display: none !important; }  /* w razie czego: hr globalnie ma szarą kreskę */
}

/* Usuń całkowicie przerwę po headerze */
@media (min-width: 992px){
  header + br { 
    display: none !important; 
  }
  /* na wszelki wypadek – zero marginesu nad menu */
  .controls { 
    margin-top: 0 !important; 
  }
}

/* HOME: hr jako subtelna linia */
body:not(.tryb-katalogu) hr {
  border: none !important;
  height: 1px !important;
  background: #e7ecf3 !important;
  margin: 12px 0 !important;
  opacity: 1 !important;
}

/* 📱 Tylko mobile: ukryj strzałki w "Top producenci", przewijanie dotykiem zostaje */
@media (max-width: 767px) {
  .topProducenci-arrow,
  .topProducenci-arrow-left,
  .topProducenci-arrow-right {
    display: none !important;
  }

  /* (opcjonalnie) dopilnuj płynnego scrolla na iOS */
  #topProducenci {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}

/* 📱 Ukrycie strzałek w sekcji "Najnowsze aktualności" tylko na telefonach */
@media (max-width: 767px) {
  #sekcjaAktualnosci .slider-btny {
    display: none !important;
  }

  /* Pozostaw przewijanie palcem */
  #sekcjaAktualnosci .aktualnosci-lista {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}

/* 📱 Najnowsze aktualności: poziomy scroll palcem na mobile */
@media (max-width: 767px) {
  /* 1) Kontener listy = poziomy scroller ze snapem */
  #sekcjaAktualnosci .aktualnosci-lista {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;       /* przyjemne „zaskakiwanie” kart */
    padding: 0 12px;                     /* lekki margines boczny */
  }

  /* 2) Każda aktualność = pełna szerokość ekranu (po jednej na ekran) */
  #sekcjaAktualnosci .aktualnosc-box {
    flex: 0 0 100% !important;           /* 1 karta = 100% viewportu */
    box-sizing: border-box;
    scroll-snap-align: start;
    display: block !important;           /* nadpisuje ewentualne display:none */
    visibility: visible !important;      /* na wszelki wypadek */
  }

  /* 3) Jeśli gdzieś w bazowym CSS pokazywana jest tylko .widoczna – neutralizujemy to */
  #sekcjaAktualnosci .aktualnosc-box:not(.widoczna) {
    display: block !important;
  }

  /* 4) Ukryte przyciski, bo na mobile jest swipe */
  #sekcjaAktualnosci .slider-btny {
    display: none !important;
    visibility: hidden !important;
  }

  /* 5) (opcjonalnie) schowaj pasek przewijania, jeśli brzydko wygląda */
  #sekcjaAktualnosci .aktualnosci-lista::-webkit-scrollbar { display: none; }
  #sekcjaAktualnosci .aktualnosci-lista { scrollbar-width: none; }
}

/* 📱 Mobile: zgaś "niebieskie" tło paska od samego startu */
@media (max-width: 767px){
  .controls,
  #kategorieMenu {
    background: #fff !important;  /* było #f0f8ff */
  }
}

/* 📱 Tylko mobile: odświeżone kafelki w menu pełnoekranowym */
@media (max-width: 767px){
  /* Kontenery pełnoekranowego menu */
  #menuGlowneSekcja,
  #wszystkieKategorieSekcja{
    background: #fff !important;
    padding: 16px !important;
  }

  /* GŁÓWNE NADPISANIE: wygląd kafelków */
  #menuGlowneSekcja .kategoria-kafelek,
  #wszystkieKategorieSekcja .kategoria-kafelek{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    text-align: left !important;

    background: #ffffff !important;       /* było granatowe */
    color: #003366 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 14px 12px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.06) !important;
    transition: background .2s, border-color .2s, transform .02s !important;
  }

  /* Hover/active */
  #menuGlowneSekcja .kategoria-kafelek:hover,
  #wszystkieKategorieSekcja .kategoria-kafelek:hover{
    background: #eef6ff !important;
    border-color: #d6e6ff !important;
  }
  #menuGlowneSekcja .kategoria-kafelek:active,
  #wszystkieKategorieSekcja .kategoria-kafelek:active{
    background: #e3f2ff !important;
    transform: translateY(1px);
  }

  /* Ikonki/obrazki w kafelkach (jeśli są) */
  #menuGlowneSekcja .kategoria-kafelek img,
  #wszystkieKategorieSekcja .kategoria-kafelek img{
    max-width: 28px !important;
    max-height: 28px !important;
    flex: 0 0 28px !important;
  }
}

/* 📱 Mobile: przewijanie długiej listy kategorii w pełnoekranowym menu */
@media (max-width: 767px){
  /* Kontener(y) z listą kategorii */
  #menuGlowneSekcja,
  #wszystkieKategorieSekcja{
    /* zajmij ekran i pozwól przewijać tylko wnętrze panelu */
    position: fixed !important;
    inset: 56px 0 0 0 !important;          /* 56px: wysokość górnego paska/loga; dostosuj gdyby był inny */
    max-height: calc(100dvh - 56px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    background: #fff !important;
    z-index: 9999 !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  /* Jeśli masz wewnątrz tytuł/pasek, możesz go przykleić na górze */
  #menuGlowneSekcja .menu-header,
  #wszystkieKategorieSekcja .menu-header{
    position: sticky !important;
    top: 0 !important;
    background: #fff !important;
    z-index: 1 !important;
  }
}

@media (max-width: 767px){
  #mobileMenuToggle { -webkit-tap-highlight-color: transparent; }

  /* podczas hover/active/focus trzymaj to samo białe tło */
  #mobileMenuToggle:hover,
  #mobileMenuToggle:active,
  #mobileMenuToggle:focus,
  #mobileMenuToggle:focus-visible{
    background-color: #fff !important;  /* nic nie „błękitnieje” */
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
    text-shadow: none !important;
    border-color: inherit !important;
  }
}

/* =========================================================
   GLOBAL WHITE THEME — pełne białe tło, bez szarości i błękitów
   ========================================================= */
body,
html,
header,
main,
section,
footer,
.controls,
.container,
#menuKategorie,
.menu-kategorie,
#menuGlowneSekcja,
#wszystkieKategorieSekcja {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Usuń półprzezroczystość i blur z paska sterowania */
.controls {
  backdrop-filter: none !important;
  background: #ffffff !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08) !important; /* delikatny cień */
}

/* Karty produktów — białe jak reszta, ale zostawiamy cień */
.product,
.mini-product {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

/* Menu kategorii i dropdowny */
#menuKategorie,
.menu-kategorie {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.12) !important;
}

/* Wygaszka tła — jaśniejsza, żeby nie blokowała wszystkiego */
body.menu-open::before {
  background: rgba(255,255,255,0.5) !important;
  backdrop-filter: none !important;
}

/* Przyciski / linki na pasku — jasne tło, ciemny tekst */
.controls a,
.controls button,
.controls .kategorie-toggle {
  background: #ffffff !important;
  color: #003366 !important;
  border: 1px solid #e5e7eb !important;
}
.controls a:hover,
.controls button:hover,
.controls .kategorie-toggle:hover {
  background: #003366 !important;
  color: #ffffff !important;
  border-color: #003366 !important;
}

/* Wyszukiwarka */
#searchInput {
  background: #ffffff !important;
  border: 1px solid #dbe0e8 !important;
  color: #0f172a !important;
}

/* Sekcje (Najczęściej, Najnowsze, Top producenci itd.) */
#najczesciejContainer,
#najnowszeContainer,
#topProducenci,
#sekcjaAktualnosci {
  background: #ffffff !important;
}

/* Usuwamy kolorowe tła z całego mobilnego menu */
@media (max-width: 767px) {
  #menuGlowneSekcja,
  #wszystkieKategorieSekcja {
    background: #ffffff !important;
  }
  #mobileMenuToggle {
    background: #ffffff !important;
  }
}

/* =========================================================
   SEKCJA BANERÓW – wymuszenie białego tła pod opisem/banerami
   ========================================================= */

/* Cała sekcja z banerami ma mieć czysto białe tło */
#banery,
#bannery,
#banerSekcja,
#sekcjaBanery,
#sekcjaBanerow,
.banner-section,
.baner-section,
.baner-sekcja,
.banner-wrapper,
#baneryGlowne,
#banerMain,
.baner-container,
.banner-container {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

/* Jeżeli w środku są opisy lub kafelki — też wymuszone białe tło */
#banery *,
#bannery *,
#banerSekcja *,
#sekcjaBanery *,
#sekcjaBanerow *,
.banner-section *,
.baner-section *,
.baner-sekcja *,
.banner-wrapper *,
#baneryGlowne *,
#banerMain *,
.baner-container *,
.banner-container * {
  background: transparent !important;  /* usuwa szare/niebieskie tło z wewnętrznych elementów */
}

/* Opcjonalnie – jeśli baner ma zdjęcie tła lub gradient, ukrywamy to */
#banery[style*="background"],
#bannery[style*="background"],
.banner-section[style*="background"],
.baner-section[style*="background"],
#sekcjaBanery[style*="background"],
#sekcjaBanerow[style*="background"] {
  background: #ffffff !important;
}

/* Dodaj delikatny cień dla całego bloku, jeśli chcesz efekt "uniesienia" */
#banery,
#bannery,
#banerSekcja,
#sekcjaBanery,
#sekcjaBanerow,
.banner-section,
.baner-section,
.baner-sekcja,
.banner-wrapper {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

/* Tekst w banerach – kontrastowy na białym tle */
#banery h1, #bannery h1, .banner-section h1,
#banery h2, #bannery h2, .banner-section h2,
#banery p,  #bannery p,  .banner-section p {
  color: #0f172a !important;
}

/* === FIX: opis banera wyśrodkowany na mobile, zero uciekania === */
@media (max-width: 767px) {
  /* 1) Nigdy nie rób poziomego scrolla na całej stronie */
  html, body { overflow-x: hidden !important; }

  /* 2) Kontener sekcji banerów = pełna szerokość, bez przelewek */
  #sekcjaBanerow {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 12px !important;      /* delikatny „oddech” po bokach */
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* 3) Każdy pojedynczy baner w środku też niech trzyma 100% */
  #sekcjaBanerow .baner,
  #sekcjaBanerow .banner,
  #sekcjaBanerow .baner-wrap,
  #sekcjaBanerow .slide,
  #sekcjaBanerow .card,
  #sekcjaBanerow section,
  #sekcjaBanerow > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }

  /* 4) Obrazek banera – zero „rozpychania” szerokości */
  #sekcjaBanerow img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* 5) Właściwy opis – wyjmij z pozycji absolutnych i wyśrodkuj */
  #sekcjaBanerow .baner-opis,
  #sekcjaBanerow [class*="opis"],
  #sekcjaBanerow [id*="opis"],
  #sekcjaBanerow .baner-mobile-caption {
    position: static !important;      /* neutralizuje left:50%/transform itp. */
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    display: block !important;
    text-align: center !important;
    margin: 8px auto 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;

    max-width: 100% !important;
    white-space: normal !important;   /* rozbrojenie nowrap */
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* 6) Na wszelki wypadek – dzieci banera nie mogą być szersze niż ekran */
  #sekcjaBanerow * {
    max-width: 100% !important;
  }
}

.help-icon {
  display: inline-block;
  margin-left: 6px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 50%;
  background: #007bff;
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  cursor: help;
  transition: 0.2s;
}

.help-icon:hover {
  background: #0056cc;
}

/* ===========================================
   POPUP SZCZEGÓŁÓW – WERSJA NA SMARTFON
   =========================================== */
@media (max-width: 768px) {

  /* Całe tło popupa – trochę mniejsze paddingi */
  #popupSzczegoly {
    padding: 10px !important;
  }

  /* Biała „karta” w środku */
  #popupSzczegoly > div {
    max-width: 100% !important;
    margin: 20px auto !important;
    padding: 16px !important;
    border-radius: 10px !important;
    border-width: 1px !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12) !important;
  }

  /* Tytuł produktu – trochę mniejszy i w kilku linijkach */
  #popupTitle {
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
    padding: 0 4px !important;
  }

  /* Obrazek – ładnie na szerokość ekranu */
  #popupImage {
    max-width: 100% !important;
    max-height: 45vh !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin-bottom: 10px !important;
  }

  /* Opisy – wyrównane do lewej, trochę mniejsze */
  #popupLongOpis,
  #popupGramatury,
  #popupKolory,
  #popupOpcjeInfo,
  #popupSrednia {
    text-align: left !important;
    font-size: 0.9rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Pasek z przyciskami nad obrazkiem (jeśli jest .button-container) */
  #popupActionBar,
  #popupActionBar .button-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    margin-bottom: 10px !important;
  }

  /* Wszystkie przyciski w popupie – na całą szerokość */
  #popupSzczegoly button {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 6px 0 !important;
    font-size: 0.95rem !important;
  }

  /* Żeby tekst ocen też się mieścił ładnie */
  #popupSzczegoly label,
  #popupSzczegoly select {
    font-size: 0.9rem !important;
  }
}

@media (max-width: 760px) {

  /* Zwija górny pasek z przyciskami */
  #popupActionBar {
    display: none !important;
  }

  /* Kontener przycisków dolnych */
  #popupDolnePrzyciski {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  #popupDolnePrzyciski button {
    width: 100%;
    padding: 14px;
    font-size: 1.05rem;
  }

  /* Tytuł na środku, większy na mobile */
  #popupTitle {
    font-size: 1.3rem !important;
    line-height: 1.3;
    margin-bottom: 10px;
  }

  /* Zdjęcie lepiej dopasowane */
  #popupImage {
    max-width: 100%;
    max-height: 60vh;
  }

  /* Opis z mniejszym marginesem */
  #popupLongOpis {
    font-size: 0.95rem;
    text-align: left;
  }

  /* Cały popup */
  #popupSzczegoly > div {
    margin: 10px !important;
    padding: 15px !important;
  }

}

/* 📱 Pływający przycisk "Podgląd zapytania" tylko na smartfonie */
#floatingOfferBtn {
  position: fixed;
  bottom: 18px;
  right: 16px;
  z-index: 9999;
  width: 74px;               /* POWIĘKSZONE kółko */
  height: 74px;              /* POWIĘKSZONE kółko */
  background: #003366;
  color: #ffffff;
  border: none;
  border-radius: 50%;
  display: none;
  font-size: 14px;           /* mniejszy tekst, aby ładnie siedział */
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;          /* lepsze rozmieszczenie tekstu */
  padding: 0 5px;            /* delikatne marginesy */
}


/* ================================
   FloatingOfferBtn – normalny / podniesiony (tylko smartfon)
   ================================ */
@media (max-width: 767px) {
  /* Stan normalny – przy krawędzi ekranu */
  #floatingOfferBtn {
    position: fixed !important;
    right: 16px !important;
    bottom: 16px !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Stan podniesiony – gdy jesteśmy przy dole strony / dole popupu */
  #floatingOfferBtn.floating-offer--up {
    bottom: 200px !important;  /* możesz potem zmienić np. na 80 / 110 */
  }
}

/* 🔒 OSTATECZNE BREAKPOINTY MENU */

/* DESKTOP / TABLET: od 768px w górę
   - mobilne menu ZABLOKOWANE
   - normalne menu z komputera WŁĄCZONE
*/
@media (min-width: 766px) {
  /* ukryj wszystko, co mobilne */
  #mobileMenuToggle,
  #mobileKategorieBtn,
  #menuGlowneSekcja,
  #wszystkieKategorieSekcja {
    display: none !important;
    visibility: hidden !important;
  }

  /* pokaż pasek sterowania + dropdown jak na komputerze */
  .controls {
    display: flex !important;
  }

  .dropdown-kategorie {
    display: inline-block !important;
  }
}

/* TELEFON: do 767px w dół
   - tylko mobilne menu
   - desktopowy pasek .controls znika
*/
@media (max-width: 765px) {
  /* chowamy komputerowe menu */
  .controls {
    display: none !important;
  }

  /* pokazujemy przycisk MENU z telefonu */
  #mobileMenuToggle,
  #mobileKategorieBtn {
    display: block !important;
    visibility: visible !important;
  }
}

/* --------------------------------------------
   PRZYCISK HAMBURGERA Z OBRAMOWANIEM (mobile)
   -------------------------------------------- */
#mobileMenuToggle {
    display: none; /* desktop */
    justify-content: center;
    align-items: center;
    gap: 8px;

    background-color: #003366 !important; /* tło */
    border: 2px solid #002244 !important; /* obramowanie */
    border-radius: 10px !important;       /* zaokrąglenie */
    padding: 8px 14px !important;         /* wewnętrzny odstęp */
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Paski hamburgera */
#mobileMenuToggle .menu-wrap .menu-icon {
    color: white !important;
    font-size: 22px !important;
    font-weight: bold;
}

/* Logo w przycisku */
#mobileMenuToggle img.logo-in-btn {
    height: 26px !important;
    width: auto !important;
    flex-shrink: 0;
}

/* Włączamy przyciski tylko na mobile */
@media (max-width: 767px) {
    #mobileMenuToggle {
        display: flex !important;
        visibility: visible !important;
    }
}

/* ====== RAMKA TYLKO WOKÓŁ HAMBURGERA ====== */

/* Kontener przycisku mobile jako całość */
#mobileMenuToggle {
    background: transparent !important;   /* brak tła */
    border: none !important;              /* brak ramki */
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* TYLKO HAMBURGER DOSTAJE OBRAMOWANIE */
#mobileMenuToggle .menu-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #003366;                  /* granatowy prostokąt */
    border: 2px solid #002244;            /* ramka */
    border-radius: 10px;                  /* zaokrąglenie */
    padding: 8px 10px;                    /* odstęp wokół ☰ */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Ikonka hamburgera */
#mobileMenuToggle .menu-wrap .menu-icon {
    color: white !important;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}

/* Logo obok — bez zmian */
#mobileMenuToggle img.logo-in-btn {
    height: 26px !important;
    width: auto !important;
}

/* Mobile tylko */
@media (max-width: 767px) {
    #mobileMenuToggle {
        display: flex !important;
    }
}

/* ===========================
   HAMBURGER + MENU (MOBILE)
   =========================== */
@media (max-width: 767px) {
  /* cały przycisk – nic nie kolorujemy tłem paska */
  #mobileMenuToggle {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 2000;

    display: flex !important;
    align-items: center;
    gap: 8px;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
  }

  /* wrapper [okrągła ikonka + napis MENU] */
  #mobileMenuToggle .menu-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;

    background: #ffffff;
    border-radius: 9999px; /* pigułka */
    box-shadow: 0 4px 14px rgba(15,23,42,0.18);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  }

  /* okrągła ramka tylko wokół hamburgera */
  #mobileMenuToggle .icon-pill {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    border: 2px solid #003366;     /* kolor obramowania */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }

  /* kontener na 3 kreski */
  #mobileMenuToggle .menu-icon {
    position: relative;
    width: 18px;
    height: 14px;
  }

  /* trzy kreski hamburgera */
  #mobileMenuToggle .menu-icon .bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #003366;           /* kolor kresek */
    border-radius: 999px;
    transition: transform 0.25s ease, top 0.25s ease, opacity 0.2s ease, background 0.2s ease;
  }

  #mobileMenuToggle .menu-icon .bar1 { top: 0; }
  #mobileMenuToggle .menu-icon .bar2 { top: 6px; }
  #mobileMenuToggle .menu-icon .bar3 { top: 12px; }

  /* napis MENU */
  #mobileMenuToggle .menu-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #003366;
    white-space: nowrap;
  }

  /* logo obok – standardowe */
  #mobileMenuToggle img.logo-in-btn {
    height: 26px !important;
    width: auto !important;
  }

  /* ✨ hover / tap – lekka animacja */
  #mobileMenuToggle:hover .menu-wrap,
  #mobileMenuToggle:active .menu-wrap {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(15,23,42,0.28);
  }

  #mobileMenuToggle:hover .icon-pill,
  #mobileMenuToggle:active .icon-pill {
    background: #003366;
    border-color: #003366;
  }

  #mobileMenuToggle:hover .menu-icon .bar,
  #mobileMenuToggle:active .menu-icon .bar {
    background: #ffffff;
  }

  /* 🔄 ANIMACJA: hamburger → X gdy .is-open na przycisku */
  #mobileMenuToggle.is-open .menu-icon .bar1 {
    top: 6px;
    transform: rotate(45deg);
  }

  #mobileMenuToggle.is-open .menu-icon .bar2 {
    opacity: 0;
  }

  #mobileMenuToggle.is-open .menu-icon .bar3 {
    top: 6px;
    transform: rotate(-45deg);
  }

  #mobileMenuToggle.is-open .icon-pill {
    background: #003366;
    border-color: #003366;
  }

  #mobileMenuToggle.is-open .menu-icon .bar {
    background: #ffffff;
  }
}

/* USUNIĘCIE DRUGIEGO OBRAMOWANIA W MENU */
@media (max-width: 767px) {

  /* usuń tło i ramkę wokół MENU */
  #mobileMenuToggle .menu-wrap {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  /* przesuwamy napis MENU bliżej ikonki (bo usunęliśmy pastylkę) */
  #mobileMenuToggle .menu-label {
    margin-left: 6px !important;
  }
}

/* KWADRATOWA RAMKA WOKÓŁ HAMBURGERA */
@media (max-width: 767px) {

  /* ikonka hamburgera – kontener z ramką */
  #mobileMenuToggle .icon-pill {
    width: 36px;
    height: 36px;

    border: 2px solid #003366;     /* kolor obramowania */
    border-radius: 6px;            /* ← KWADRAT zamiast kółka */

    background: transparent;        
    display: flex;
    align-items: center;
    justify-content: center;

    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }

  /* animacja tap/hover – elegancka */
  #mobileMenuToggle:hover .icon-pill,
  #mobileMenuToggle:active .icon-pill {
    background: #003366;
    border-color: #003366;
  }

  /* paski hamburgera w trybie hover/tap */
  #mobileMenuToggle:hover .menu-icon .bar,
  #mobileMenuToggle:active .menu-icon .bar {
    background: #ffffff !important;
  }

  /* animacja w trybie otwartym (X) */
  #mobileMenuToggle.is-open .icon-pill {
    background: #003366;
    border-color: #003366;
  }
}

/* KWADRAT BEZ OBRAMOWANIA WOKÓŁ HAMBURGERA */
@media (max-width: 767px) {

  /* sam kwadrat */
  #mobileMenuToggle .icon-pill {
    width: 36px;
    height: 36px;

    background: #003366; /* tło kwadrata */
    border: none !important; /* USUWAMY OBRAMOWANIE */
    border-radius: 6px; /* lekko zaokrąglony kwadrat */

    display: flex;
    align-items: center;
    justify-content: center;

    transition: background 0.2s ease,
                transform 0.2s ease;
  }

  /* paski hamburgera */
  #mobileMenuToggle .menu-icon .bar {
    background: #ffffff !important;
  }

  /* hover / tap */
  #mobileMenuToggle:hover .icon-pill,
  #mobileMenuToggle:active .icon-pill {
    transform: translateY(1px);
    background: #002244; /* trochę ciemniejsze przy kliknięciu */
  }

  /* animacja hamburger → X */
  #mobileMenuToggle.is-open .icon-pill {
    background: #002244;
  }
}

/* ================================
   KWADRAT Z HAMBURGEREM – BIAŁY
   ZMIANA NA GRANATOWY PO KLIKNIĘCIU
   ================================ */
@media (max-width: 767px) {

  /* cały przycisk */
  #mobileMenuToggle {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
  }

  /* KWADRAT Z HAMBURGEREM – STAN ZAMKNIĘTY */
  #mobileMenuToggle .icon-pill {
    width: 36px;
    height: 36px;

    background: #ffffff !important;  /* BIAŁE TŁO */
    border: none !important;
    border-radius: 6px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* delikatny cień */
    transition: background 0.2s ease,
                transform 0.2s ease,
                box-shadow 0.2s ease;
  }

  /* KRESKI HAMBURGERA — GRANATOWE W STANIE ZAMKNIĘTYM */
  #mobileMenuToggle .menu-icon .bar {
    background: #003366 !important;
    transition: 0.25s ease;
  }

  /* HOVER / TAP – delikatny efekt */
  #mobileMenuToggle:hover .icon-pill,
  #mobileMenuToggle:active .icon-pill {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.20);
  }

  /* ==========================
     STAN OTWARTY – .is-open
     ========================== */

  /* KWADRAT → GRANATOWY */
  #mobileMenuToggle.is-open .icon-pill {
    background: #003366 !important;
  }

  /* HAMBURGER → X (białe kreski) */
  #mobileMenuToggle.is-open .menu-icon .bar {
    background: #ffffff !important;
  }

  #mobileMenuToggle.is-open .menu-icon .bar1 {
    top: 6px !important;
    transform: rotate(45deg);
  }

  #mobileMenuToggle.is-open .menu-icon .bar2 {
    opacity: 0 !important;
  }

  #mobileMenuToggle.is-open .menu-icon .bar3 {
    top: 6px !important;
    transform: rotate(-45deg);
  }
}

/* LOGO PO PRAWEJ STRONIE w przycisku mobilnym */
@media (max-width: 767px) {

  /* układ poziomy: hamburger+MENU po lewej, logo po prawej */
  #mobileMenuToggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between !important;
    width: 100%; /* całe MENU rozciąga się poziomo */
    padding-right: 12px !important;
    padding-left: 6px !important;
  }

  /* hamburger + MENU razem po lewej stronie */
  #mobileMenuToggle .menu-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  /* LOGO przesuwamy na skraj prawej strony */
  #mobileMenuToggle img.logo-in-btn {
    margin-left: auto !important;
    height: 26px !important;
    width: auto !important;
  }
}

/* WYMIUSZONE LOGO NA PRAWEJ STRONIE */
@media (max-width: 767px) {

  /* Przycisk robi się pełną belką – szerokość 100% */
  #mobileMenuToggle {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 10px !important;
    gap: 10px !important;
  }

  /* Hamburger + MENU po lewej */
  #mobileMenuToggle .menu-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* LOGO → na prawą stronę */
  #mobileMenuToggle img.logo-in-btn {
    margin-left: auto !important;   /* kluczowy element przesunięcia */
    margin-right: 0 !important;
    height: 26px !important;
    width: auto !important;
  }
}

/* WYŁĄCZENIE ANIMACJI HAMBURGER → X */
@media (max-width: 767px) {
  #mobileMenuToggle.is-open .menu-icon .bar1,
  #mobileMenuToggle.is-open .menu-icon .bar2,
  #mobileMenuToggle.is-open .menu-icon .bar3 {
    top: initial !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* Ustaw paski w normalnych pozycjach */
  #mobileMenuToggle .menu-icon .bar1 { top: 0 !important; }
  #mobileMenuToggle .menu-icon .bar2 { top: 6px !important; }
  #mobileMenuToggle .menu-icon .bar3 { top: 12px !important; }
}

/* POWIĘKSZONY BOX DLA HAMBURGERA i NAPISU MENU */
@media (max-width: 767px) {

  /* wrapper: powiększamy tak, aby objął ikonę i MENU */
  #mobileMenuToggle .menu-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 10px 14px !important;     /* WIĘKSZY BOX */
    background: #ffffff !important;    /* białe tło */
    border-radius: 10px !important;    /* zaokrąglony duży box */
    box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important;

    transition: background 0.2s ease,
                box-shadow 0.2s ease,
                transform 0.15s ease;
  }

  /* STAN OTWARTY — powiększony box robi się granatowy */
  #mobileMenuToggle.is-open .menu-wrap {
    background: #003366 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.20) !important;
  }

  /* HAMBURGER normalny */
  #mobileMenuToggle .icon-pill {
    width: 32px !important;            /* lekko większy hamburger */
    height: 32px !important;
    background: transparent !important; /* BEZ osobnego tła */
    border: none !important;            /* BEZ obramowania – bo obramowanie ma MIEĆ tylko cały box */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* kreski hamburgera */
  #mobileMenuToggle .menu-icon .bar {
    background: #003366 !important; /* zamknięty */
  }

  /* otwarte menu – X NIE MA, więc tylko zmiana koloru */
  #mobileMenuToggle.is-open .menu-icon .bar {
    background: #ffffff !important; /* białe kreski na granacie */
  }

  /* napis MENU — większy odstęp od hamburgera */
  #mobileMenuToggle .menu-label {
    font-size: 15px !important;
    margin-left: 8px !important;
    font-weight: 600;
    color: #003366 !important;
  }

  /* napis MENU w stanie otwartym (granatowy box → białe MENU) */
  #mobileMenuToggle.is-open .menu-label {
    color: #ffffff !important;
  }

  /* LOGO przesunięte na prawą stronę */
  #mobileMenuToggle img.logo-in-btn {
    margin-left: auto !important;
    height: 26px !important;
  }
}

/* USUNIĘCIE OBRAMOWANIA TYLKO WOKÓŁ HAMBURGERA (icon-pill) */
@media (max-width: 767px) {

  /* icon-pill ma być CAŁKOWICIE bez obramowania i bez tła */
  #mobileMenuToggle .icon-pill {
    border: none !important;
    background: transparent !important; /* nic pod hamburgerem */
    box-shadow: none !important;        /* na 100% brak obwódki/cienia */
    width: 32px !important;
    height: 32px !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* =============================
   PEŁNY BIAŁY PASEK NA MOBILE
   ============================= */
@media (max-width: 767px) {

  /* CAŁA GÓRNA BELKA JAK HEADER */
  #mobileMenuToggle {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;

    background: #ffffff !important;       /* 👈 pełny biały pasek */
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);

    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 10px 16px !important;
    z-index: 9999 !important;
    border-radius: 0 !important;
    gap: 10px !important;
  }

  /* LEWA STRONA: powiększony box ☰ MENU */
  #mobileMenuToggle .menu-wrap {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
  }

  /* PRAWA STRONA: LOGO */
  #mobileMenuToggle img.logo-in-btn {
    margin-left: auto !important;
    height: 28px !important;
    width: auto !important;
  }

  /* PO KLIKNIĘCIU — kolorowanie tylko boxa menu, NIE całej belki */
  #mobileMenuToggle.is-open .menu-wrap {
    background: #003366 !important;
  }

  #mobileMenuToggle.is-open .menu-label {
    color: #ffffff !important;
  }

  #mobileMenuToggle.is-open .menu-icon .bar {
    background: #ffffff !important;
  }
}

/* 🔧 HAMBURGER – PASKI ZAWSZE WIDOCZNE (bez X, bez znikania) */
@media (max-width: 767px) {

  /* Ustawiamy paski zawsze w tych samych miejscach */
  #mobileMenuToggle .menu-icon .bar1 {
    top: 0 !important;
  }
  #mobileMenuToggle .menu-icon .bar2 {
    top: 6px !important;
  }
  #mobileMenuToggle .menu-icon .bar3 {
    top: 12px !important;
  }

  /* NIGDY nie zmieniaj koloru / przezroczystości pasków */
  #mobileMenuToggle .menu-icon .bar,
  #mobileMenuToggle.is-open .menu-icon .bar,
  #mobileMenuToggle:hover .menu-icon .bar,
  #mobileMenuToggle:active .menu-icon .bar {
    background: #003366 !important;  /* granatowe paski cały czas */
    opacity: 1 !important;           /* nigdy nie znikają */
    transform: none !important;      /* żadnych rotacji w X */
  }
}

/* 🔥 LEKKIE PRZYCIEMNIENIE BOXA PRZY HOVER/KLIK */
@media (max-width: 767px) {

  /* efekt hover + aktywne kliknięcie */
  #mobileMenuToggle .menu-wrap:hover,
  #mobileMenuToggle .menu-wrap:active {
    background: #f0f0f0 !important;    /* delikatne przyciemnienie */
    transform: translateY(1px);        /* lekki efekt dotknięcia */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
  }

  /* kiedy menu jest otwarte – też lekko przyciemnione */
  #mobileMenuToggle.is-open .menu-wrap {
    background: #e9e9e9 !important;    /* minimalnie ciemniejsze niż białe */
  }

  /* ALE: kreski hamburgera ZAWSZE granatowe */
  #mobileMenuToggle .menu-icon .bar {
    background: #003366 !important;
  }

  /* napis MENU też zawsze granatowy */
  #mobileMenuToggle .menu-label {
    color: #003366 !important;
  }
}

/* 🌗 MENU – ładne przyciemnienie + poprawny powrót koloru */
@media (max-width: 767px) {

  /* STAN NORMALNY – biały box */
  #mobileMenuToggle .menu-wrap {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    transform: none;
    transition: background 0.2s ease,
                box-shadow 0.2s ease,
                transform 0.15s ease;
  }

  /* HOVER / KLIK – tylko gdy menu NIE jest otwarte */
  #mobileMenuToggle:not(.is-open) .menu-wrap:hover,
  #mobileMenuToggle:not(.is-open) .menu-wrap:active {
    background: #f0f0f0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transform: translateY(1px);
  }

  /* STAN OTWARTY – trochę ciemniejszy, ale bez wciśnięcia */
  #mobileMenuToggle.is-open .menu-wrap {
    background: #e9e9e9;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transform: none;
  }

  /* Paski ZAWSZE granatowe */
  #mobileMenuToggle .menu-icon .bar {
    background: #003366 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Napis MENU ZAWSZE granatowy */
  #mobileMenuToggle .menu-label {
    color: #003366 !important;
  }
}