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;
  }
}