/*
Theme Name:   Everest Kadence Child
Theme URI:    https://everest.satait.pl/
Description:  Kadence Child Theme dla strony Everest / Garden Parts
Author:       RedProjekt
Author URI:   http://redprojekt.com.pl
Template:     kadence
Version:      1.1.30
Text Domain:  everest-kadence-child
*/

/* ============================================================
   Wpisy i archiwum w kategorii Promocje - nakładanie tytułu na obrazek
   (Stylizowane na wzór dostarczonej grafiki "STAŁY RABAT ZA OBRÓT")
   ============================================================ */
.wp-block-post.category-promocje,
.everest-promo-hero {
    position: relative;
    overflow: hidden;
}

.wp-block-post.category-promocje .wp-block-post-featured-image {
    margin-bottom: 0 !important; /* Usuwa odstęp pod obrazkiem w pętli */
}

.everest-promo-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* WSPÓLNE STYLE DLA TYTUŁÓW PROMOCJI */
.wp-block-post.category-promocje .wp-block-post-title,
.everest-promo-title {
    width: 90%;
    margin: 0;
    pointer-events: none;
    z-index: 10;
    text-align: center;
    color: #ffffff;
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: clamp(14px, 2.5vw, 32px);
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    /* Mocny czarny obrys i cień jak na obrazku */
    text-shadow: 
        -2px -2px 0 #000,
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
         0px  8px 15px rgba(0,0,0,0.7);
}

/* POZYCJONOWANIE NA STRONIE POJEDYNCZEGO WPISU */
.everest-promo-title {
    position: absolute;
    top: auto;
    bottom: 5%; /* Punkt odniesienia blisko dołu obrazka */
    left: 50%;
    transform: translate(-50%, 50%); /* Przesuwa tekst w dół o połowę jego wysokości, by to jego ŚRODEK był na poziomie 5% */
}

/* POZYCJONOWANIE NA LIŚCIE (ARCHIWUM GUTENBERGA) */
.wp-block-post.category-promocje .wp-block-post-title {
    position: relative;
    margin: 0 auto;
    /* Magiczna sztuczka z wysrodkowaniem bez wzgledu na ilosc linii */
    height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    
    margin-top: -2em; /* Środek tekstu ląduje dokładnie 2em nad dolną krawędzią obrazka */
    margin-bottom: 3em; /* Wyrównanie reszty elementu: -2em + 3em = 1em naturalnego odstępu dla zajawki */
}

/* ============================================================
   ZMIENNE BRANDOWE EVEREST
   ============================================================ */
:root {
  --ev-accent:        #ff5a1f;
  --ev-accent-hover:  #e04a12;
  --ev-dark:       #111111;
  --ev-darker:     #0a0a0a;
  --ev-gray:       #2c2c2c;
  --ev-light-gray: #f5f5f5;
  --ev-white:      #ffffff;
  --ev-border:     #333333;
  --ev-max-width:  1350px;
}

/* ============================================================
   HEADER – EVEREST
   ============================================================ */
/* (Roboto Condensed ładowany przez wp_enqueue_style w functions.php —
    @import po regule :root{} był ignorowany przez przeglądarki) */

.hero-black {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Ucinanie poziomego nadmiaru (hero 100vw vs scrollbar) — nie psuje position:sticky */
html, body { overflow-x: clip; max-width: 100%; }

/* HOME + MOBILE: twarda blokada poziomego przepełnienia. Bez niej telefon rozszerza
   layout viewport powyżej 1060px (żeby zmieścić coś wystającego), przez co
   @media(max-width:1060px) NIE działa → header zostaje przezroczysty desktopowy,
   hamburger ukryty (display:none), logo "poza obrazem". Na home header jest
   position:absolute (nie sticky), więc overflow:hidden jest tu bezpieczny.
   Ograniczone do home, żeby nie psuć position:sticky headera na podstronach. */
body.home { overflow-x: hidden !important; max-width: 100vw; }
body.home .ev-hero-wrap,
body.home .ev-hero { max-width: 100vw; overflow-x: hidden; }
/* Stały pasek przewijania na każdej stronie — bez tego home (bez scrolla) ma szerszy
   viewport niż podstrony (ze scrollem), przez co header/prawa grupa przesuwają się o ~15px */
html { overflow-y: scroll; }

/* Białe tło domyślnie na WSZYSTKICH stronach (Kadence domyślnie ustawia czarne tło body) */
body,
.site,
.content-bg {
  background: #ffffff !important;
}

/* Ujednolicony pasek tytułu strony (banner) na wszystkich podstronach — biały, jedna wysokość */
.entry-hero.page-hero-section,
.entry-hero.product-hero-section {
  background: #ffffff !important;
}
.entry-hero.page-hero-section .entry-header,
.entry-hero.product-hero-section .entry-header {
  min-height: 120px !important;
  height: 120px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.entry-hero .hero-section-overlay {
  background: transparent !important;
}
.entry-hero.page-hero-section .entry-title,
.entry-hero.product-hero-section .entry-title {
  color: #000000 !important;
}

/* Header – zawsze ciemny, zawsze widoczny (gradient jak w projekcie) */
.znx-header {
  background: linear-gradient(90deg, #030302 0%, #767870 45%, #030302 82%, #030302 100%) !important;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 9999;
  border-bottom: none;
}

/* Wrapper menu + prawa strona — menu i prawa strona razem, przesunięte w prawo,
   bliżej wyszukiwarki (justify-content: flex-end na całej grupie) */
.znx-nav-wrap {
  display: flex;
  flex: 1;
  align-items: center;
  align-self: stretch;
  justify-content: flex-end;
  position: relative;
  margin-left: 150px;
}
/* Menu + prawa strona w jednej grupie — dzięki temu biała kreska (::after niżej)
   zawsze obejmuje CAŁĄ resztę headera (menu + wyszukiwarkę + social + flagę),
   niezależnie od tego, jak szeroka jest ta grupa. */
.znx-nav-underline {
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
}
/* Biała kreska — zaczyna się 30px przed pierwszą literą pierwszego słowa
   w menu, kończy się na prawej krawędzi strony (right:-60px kasuje padding
   headera, tak jak poprzednio). */
.znx-nav-underline::after {
  content: '';
  position: absolute;
  left: -30px;
  right: -60px;
  bottom: 24px;
  height: 2px;
  background: rgba(255,255,255,0.6);
  pointer-events: none;
}
/* Menu + search + fb + flaga wyżej, kreska zostaje na miejscu */
.znx-nav,
.znx-right {
  transform: translateY(-12px);
}

/* Na stronie głównej: header przezroczysty, nakłada się na hero */
body.home .znx-header {
  /* Przyciemnienie tylko na stronie głównej — gradient: góra ciemniejsza (alpha 0.5),
     dół w pełni przezroczysty */
  background: linear-gradient(to top, rgba(0,0,0,0) 10%, rgba(0,0,0,0.5) 100%) !important;
  background-color: transparent !important;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
}
body.home .znx-header__inner {
  background: transparent !important;
}

/* Ukryj czarny pasek i tytuł strony głównej */
body.home .entry-hero,
body.home .kadence-breadcrumb,
body.home .wp-block-kadence-header,
body.home .site-header-wrap,
body.home h1.entry-title,
body.home .entry-header {
  display: none !important;
}

/* Zeruj cały padding/margin treści na home — zdjęcie ma dochodzić do samego dołu */
body.home .content-wrap,
body.home .entry-content,
body.home .entry-content-wrap,
body.home .content-area,
body.home .entry-content.single-content,
body.home article.entry {
  padding: 0 !important;
  margin: 0 !important;
}

/* FAQ — usunięty pasek tytułu strony (białe tło jest teraz globalne, patrz niżej) */
body.page-id-12642 .entry-hero {
  display: none !important;
}

/* Dystrybutorzy (dealerzy) — zerujemy odstep nad trescia tak jak jest to zrobione
   dla strony glownej (body.home #main powyzej), tylko scoped do tej jednej strony. */
body.page-id-1421 .content-area,
body.page-id-1421 #main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Hero zaczyna od samej góry strony */
body.home #main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Usuń cień/box-shadow Kadence z treści — tworzy fałszywą drugą kreskę nad stopką */
.entry,
.entry.single-entry,
.entry.loop-entry,
.content-area,
#primary,
.content-bg,
.site-main {
  box-shadow: none !important;
}

/* ── STOPKA ── */
.ev-footer {
  background: #ffffff;
  border-top: 1px solid #d0d0d0;
  padding: 14px 60px;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.ev-footer__inner {
  max-width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.ev-footer__links { display: flex; gap: 32px; }
.ev-footer__links a {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 15px;
  color: #111111;
  text-decoration: none;
  transition: color .2s;
}
.ev-footer__links a:hover { color: #ff5a1f; }
.ev-footer__copy {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 15px;
  color: #111111;
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .ev-footer { padding: 16px 20px; }
  .ev-footer__inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ev-footer__copy { white-space: normal; }
}

/* Na home (desktop) stopka motywu ukryta — wbudowana jest w komponent hero.
   Na mobile (≤1060px) hero-stopka jest ukryta, więc .ev-footer pokazujemy (patrz wp_head inline).
   Ukrycie tylko dla desktopu, żeby na telefonie była stopka. */
@media (min-width: 1061px) {
  body.home .ev-footer { display: none !important; }
}

.znx-header__inner {
  max-width: 100%;
  margin: 0;
  padding: 0 60px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Przezroczyste — tło (gradient) daje .znx-header, ten div wcześniej je zasłaniał */
  background: transparent;
}


/* ── LOGA ── */
.znx-logos {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  position: relative;
  align-self: stretch;
}

.znx-logos a {
  display: flex;
  align-items: center;
  transition: opacity .2s;
}
.znx-logos a:hover { opacity: .8; }

.znx-header .znx-logo-everest,
.znx-logo-everest {
  height: 72px !important;
  max-height: 72px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
}

.znx-logos__sep {
  width: 1px;
  height: 34px;
  background: #4a4a4a;
  flex-shrink: 0;
}

.znx-header .znx-logo-gp,
.znx-logo-gp {
  height: 32px !important;
  max-height: 32px !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
}

/* Wymuś poprawny rozmiar wszystkich obrazków w headerze (WooCommerce nadpisuje) */
.znx-header img {
  max-width: none !important;
}

.znx-logos a img {
  object-fit: contain !important;
}

/* ── NAWIGACJA ── */
.znx-nav {
  flex: 0 1 auto;
  display: flex;
  justify-content: flex-start;
}

.znx-nav ul {
  display: flex;
  list-style: none;
  align-items: center;
  height: 90px;
  margin: 0;
  padding: 0;
}

.znx-nav ul li a {
  display: flex !important;
  align-items: center;
  height: 90px;
  padding: 0 24px;
  color: #ffffff !important;
  text-decoration: none !important;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color .2s ease;
  white-space: nowrap;
  background: transparent !important;
}

.znx-nav ul li a:hover,
.znx-nav ul li.current-menu-item > a,
.znx-nav ul li.current-page-ancestor > a,
.znx-nav ul li.current > a {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 8px !important;
}

/* Submenu */
.znx-nav ul li { position: relative; }

.znx-nav ul .sub-menu {
  display: none;
  position: absolute;
  top: 68px;
  left: 0;
  background: #222222;
  border-top: 2px solid #ff5a1f;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  min-width: 220px;
  z-index: 9999;
  list-style: none;
  padding: 0;
  margin: 0;
}

.znx-nav ul li:hover > .sub-menu { display: block; }

.znx-nav ul .sub-menu li a {
  height: auto !important;
  padding: 13px 20px !important;
  font-size: 12px;
  border-bottom: 1px solid #4a4a4a;
  display: block !important;
  color: #cfcfcf !important;
}

.znx-nav ul .sub-menu li:last-child a { border-bottom: none; }

.znx-nav ul .sub-menu li a:hover {
  background: #3d3d3d !important;
  color: #ffffff !important;
  padding-left: 24px !important;
  text-decoration: none !important;
}

/* ── PRAWA STRONA ── */
.znx-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 1;
  min-width: 0;
  position: relative;
}

/* ── WYSZUKIWARKA ── */
.znx-search {
  display: flex;
  align-items: center;
  height: 34px;
  background: rgba(0,0,0,0.30);   /* lekko przezroczyste — mniej się odcina od nagłówka (slajd 4.3) */
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 8px;
  overflow: hidden;
  padding: 0 4px 0 14px;
  transition: border-color .2s;
  margin-right: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.znx-search:focus-within { border-color: #ffffff; }

.znx-search input[type="text"],
.znx-search input[type="search"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 12px;
  padding: 0 8px 0 0 !important;
  width: 150px;
  min-width: 40px;
  flex: 1 1 auto;
  height: 32px;
  margin: 0 !important;
}

.znx-search input::placeholder {
  color: #8a8a8a !important;
  font-style: normal;
  opacity: 1;
}

.znx-search button,
.znx-search button[type="submit"] {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #cfcfcf !important;
  border-radius: 50% !important;
  transition: color .2s, background .2s !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

.znx-search button:hover {
  background: #3d3d3d !important;
  color: #ffffff !important;
}

.znx-search button svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

/* ── FACEBOOK ICON ── */
.znx-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;              /* równy odstęp IG–FB, taki sam jak FB–flaga (gap .znx-right) */
  flex-shrink: 0;
}

.znx-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #ffffff;
  text-decoration: none;
  transition: color .2s, opacity .2s;
  flex-shrink: 0;
}
.znx-social a:hover { opacity: .8; }

.znx-social a:hover,
.znx-social a:active,
.znx-social a:focus,
.znx-social a:visited {
  color: #ffffff;
}

.znx-social a img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

/* ── JĘZYK ── */
.znx-lang { position: relative; flex-shrink: 0; }

.znx-lang__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 6px 8px;
  height: 34px;
  cursor: pointer;
  transition: color .2s;
  letter-spacing: .4px;
}

.znx-lang__btn:hover,
.znx-lang__btn:focus,
.znx-lang__btn:hover span,
.znx-lang__btn:focus span {
  color: #cfcfcf;
  text-decoration: none !important;
  border-bottom: none !important;
  outline: none !important;
}

/* ── FLAGI JĘZYKÓW ────────────────────────────────────────────
   NIE używamy emoji flag (2026-08-11). Android/Google rysuje je jako
   POWIEWAJĄCE (pofalowane) — wyglądały na przekrzywione i inaczej niż na
   Windows, gdzie WordPress podmieniał je na płaskie obrazki Twemoji.
   Do tego `font-size: 0` ukrywał je na Androidzie (natywne emoji to tekst),
   a `color: transparent` czynił przezroczystymi w Chrome — pod spodem był
   gradient biało-czerwony, więc brak flagi wyglądał jak POLSKA flaga, czyli
   pokazywał błędny język zamiast niczego.
   Dlatego flagi to teraz lokalne, PŁASKIE pliki SVG w `img/flags/`,
   te same w nagłówku i w rozwijanym menu (Twemoji, CC-BY 4.0, hostowane
   lokalnie — bez zależności od emoji systemu i od zewnętrznego CDN-a).
   ──────────────────────────────────────────────────────────── */
.znx-lang__flag,
.znx-lang__dropdown a::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #4a4a4a;
  flex-shrink: 0;
  background-color: #2c2c2c;   /* widoczne tylko gdyby SVG się nie wczytał */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.znx-lang[data-lang="pl"] .znx-lang__flag,
.znx-lang__dropdown a.pl::before { background-image: url("img/flags/pl.svg"); }
.znx-lang[data-lang="en"] .znx-lang__flag,
.znx-lang__dropdown a.en::before { background-image: url("img/flags/en.svg"); }
.znx-lang[data-lang="cs"] .znx-lang__flag,
.znx-lang__dropdown a.cs::before { background-image: url("img/flags/cs.svg"); }
.znx-lang[data-lang="sk"] .znx-lang__flag,
.znx-lang__dropdown a.sk::before { background-image: url("img/flags/sk.svg"); }
.znx-lang[data-lang="hu"] .znx-lang__flag,
.znx-lang__dropdown a.hu::before { background-image: url("img/flags/hu.svg"); }
.znx-lang[data-lang="ro"] .znx-lang__flag,
.znx-lang__dropdown a.ro::before { background-image: url("img/flags/ro.svg"); }
.znx-lang[data-lang="fr"] .znx-lang__flag,
.znx-lang__dropdown a.fr::before { background-image: url("img/flags/fr.svg"); }
.znx-lang[data-lang="de"] .znx-lang__flag,
.znx-lang__dropdown a.de::before { background-image: url("img/flags/de.svg"); }

.znx-lang__arrow {
  font-size: 9px;
  line-height: 1;
  color: #cfcfcf;
  margin-left: 2px;
}

/* Dropdown języków */
.znx-lang__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  margin-top: 8px;
  right: 0;
  background: #222222;
  border-radius: 0 0 4px 4px;
  min-width: 140px;
  z-index: 9999;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  overflow: hidden;
  padding: 4px 0;
}

/* Niewidoczny most między przyciskiem a dropdownem */
.znx-lang::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  height: 10px;
  background: transparent;
  pointer-events: auto;
  display: none;
}

/* Otwieranie najechaniem TYLKO tam, gdzie naprawdę istnieje kursor (2026-08-11).
   Na dotyku stan :hover "przykleja się" po tapnięciu i utrzymuje aż do dotknięcia
   czegoś innego — przez to lista języków zostawała otwarta po wyborze flagi, mimo
   że JS poprawnie zdejmował klasę .open. Na telefonie o widoczności decyduje
   wyłącznie .open, czyli JS. */
@media (hover: hover) and (pointer: fine) {
  .znx-lang:hover::after { display: block; }
  .znx-lang:hover .znx-lang__dropdown { display: block; }
}

.znx-lang.open .znx-lang__dropdown { display: block; }

.znx-lang__dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: #cfcfcf;
  text-decoration: none;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid #4a4a4a;
  transition: background .15s, color .15s;
}

.znx-lang__dropdown a:last-child { border-bottom: none; }

.znx-lang__dropdown a:hover {
  background: #3d3d3d;
  color: #ffffff;
}

/* (usunięto reguły dla img.emoji — etykiety języków nie zawierają już emoji,
   flagi rysuje background-image z img/flags/, patrz sekcja "FLAGI JĘZYKÓW") */

/* ── HAMBURGER ── */
.znx-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.znx-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #ffffff;
  transition: all .3s;
  border-radius: 2px;
}

.znx-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.znx-hamburger.open span:nth-child(2) { opacity: 0; }
.znx-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE MENU ── */
.znx-mobile-nav {
  display: none;
  background: #222222;
  border-top: 2px solid #ff5a1f;
}

.znx-mobile-nav.open { display: block; }

.znx-mobile-nav ul { list-style: none; margin: 0; padding: 0; }

.znx-mobile-nav ul li a {
  display: block;
  padding: 15px 24px;
  color: #cfcfcf;
  text-decoration: none;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid #4a4a4a;
  transition: color .2s, padding .2s;
}

.znx-mobile-nav ul li a:hover {
  padding-left: 32px;
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* ── RESPONSIVE ── */

/* Strefa pośrednia: nav widoczna ale ciasna. Pełny układ (margines nav 150px)
   mieści się dopiero od ~1650px — dlatego ścinamy margines już od ≤1700px, żeby
   w paśmie 1500–1650px (np. 125% zoom na ekranie ≥1600px) flaga/FB nie uciekały. */
@media (max-width: 1700px) and (min-width: 1061px) {
  .znx-nav-wrap { margin-left: 30px; }
  .znx-nav-underline { gap: 26px; }
  .znx-nav ul li a { padding: 0 16px; }
}
@media (max-width: 1350px) and (min-width: 1061px) {
  .znx-nav-wrap { margin-left: 16px; }
  .znx-nav ul li a {
    padding: 0 8px !important;
    font-size: 78% !important;
    letter-spacing: 0 !important;
  }
  .znx-logos { gap: 10px; }
  .znx-header__inner { padding: 0 20px; }
}
/* Domiar do strefy ciasnej (≈1061–1350px): mniejsze odstępy prawej strony i
   wyszukiwarka, która się nie rozpycha (zawężenie menu jest w bloku ≤1350 wyżej). */
@media (max-width: 1350px) and (min-width: 1061px) {
  .znx-nav-underline { gap: 16px; }
  .znx-right { gap: 8px; }
  .znx-search { flex: 0 1 200px; max-width: 220px; }
}
/* Dolne pasmo (≈1061–1200px, m.in. ~175% zoom na 1920): desktopowy header się tu
   nie mieści (FB/flaga uciekały). Zamiast cisnąć — przełączamy na hamburger (decyzja
   klienta). Próg podniesiony 1060 → 1200. */
@media (max-width: 1200px) {
  .znx-nav { display: none; }
  .znx-nav-underline::after { display: none; }
  .znx-hamburger { display: flex; flex-shrink: 0; }
  /* Bez nawigacji jest więcej miejsca w środku, ale padding headera zostawał na 60px
     i wyszukiwarka/FB/flaga potrafiły się zetrzeć/zniknąć (overflow-x: clip na body) */
  .znx-header__inner { padding: 0 20px; }
  .znx-nav-wrap { margin-left: 0; }

  /* Kompaktowy header mobilny — chowamy tylko wyszukiwarkę (najszerszy element),
     zmniejszamy logo (pełna specyficzność, żeby pobić bazowe 72px). Social + język
     + hamburger zostają — mieszczą się przy małym logo. */
  .znx-search { display: none; }
  .znx-header .znx-logo-everest {
    height: 38px !important;
    max-height: 38px !important;
    width: auto !important;
    max-width: 55vw !important;
    object-fit: contain !important;
  }
  .znx-social a { width: 24px !important; height: 24px !important; }
  .znx-right { gap: 10px; }

  /* MOBILE HOME: header przezroczysty z ciemnym scrim-gradientem (ciemno u góry →
     przezroczyste u dołu) — jak na desktopie, logo/ikony czytelne, hero widoczne. */
  body.home .znx-header {
    background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 52%, rgba(0,0,0,0) 100%) !important;
    left: 0;
    right: 0;
    width: 100%;
  }
  body.home .znx-header__inner { background: transparent !important; }
}

@media (max-width: 600px) {
  .znx-header__inner { padding: 0 14px; }
  .znx-right { gap: 8px; }
}

/* ============================================================
   LIVE SEARCH DROPDOWN
   ============================================================ */
.znx-search-outer {
  position: relative;
}

.znx-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 420px;
  max-width: 95vw;
  background: #fff;
  border-top: 2px solid #ff5a1f;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  z-index: 10000;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}
.znx-search-results--open { display: block; }

/* Wariant dla dużej wyszukiwarki na stronie katalogu */
.znx-search-results--wide {
  left: 0;
  right: 0;
  width: 100%;
}

.znx-sr__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: #1a1a1a;
  border-bottom: 1px solid #f0f0f0;
  transition: background .15s;
}
.znx-sr__item:last-child { border-bottom: none; }
.znx-sr__item:hover { background: #f7f7f7; }

.znx-sr__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.znx-sr__name {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.znx-sr__sku {
  font-size: 11px;
  color: #888;
}
.znx-sr__empty {
  padding: 16px;
  text-align: center;
  color: #888;
  font-size: 13px;
}

/* Wyłącz Kadence live search dropdown (uwaga: NIE łapać własnego .znx-search-results!) */
.znx-header .live-search-results,
.znx-header .kadence-search-results,
.znx-header .search-results-popup,
.znx-header [class*="live-search"]:not(.znx-search-results),
.znx-header [class*="search-results"]:not(.znx-search-results) {
  display: none !important;
}

/* ============================================================
   TU DODAWAJ KOLEJNE SEKCJE (hero, karty produktów, footer itp.)
   ============================================================ */

/* ============================================================
   JĘZYKI Z DŁUGIMI SŁOWAMI – pozwól tekstowi się zawijać
   ============================================================ */
/* Zawijanie tekstu dla długich języków */
:lang(de) *,
:lang(hu) *,
:lang(sk) *,
:lang(cs) *,
:lang(ro) *,
:lang(fr) * {
    white-space: normal !important;
    word-break: break-word;
}

/* Everest w liczbach – duże numery */
:lang(de) [data-vc-id="vc-6"][data-vc-id],
:lang(de) [data-vc-id="vc-12"][data-vc-id],
:lang(de) [data-vc-id="vc-18"][data-vc-id],
:lang(de) [data-vc-id="vc-24"][data-vc-id],
:lang(hu) [data-vc-id="vc-6"][data-vc-id],
:lang(hu) [data-vc-id="vc-12"][data-vc-id],
:lang(hu) [data-vc-id="vc-18"][data-vc-id],
:lang(hu) [data-vc-id="vc-24"][data-vc-id],
:lang(sk) [data-vc-id="vc-6"][data-vc-id],
:lang(sk) [data-vc-id="vc-12"][data-vc-id],
:lang(sk) [data-vc-id="vc-18"][data-vc-id],
:lang(sk) [data-vc-id="vc-24"][data-vc-id],
:lang(cs) [data-vc-id="vc-6"][data-vc-id],
:lang(cs) [data-vc-id="vc-12"][data-vc-id],
:lang(cs) [data-vc-id="vc-18"][data-vc-id],
:lang(cs) [data-vc-id="vc-24"][data-vc-id],
:lang(fr) [data-vc-id="vc-6"][data-vc-id],
:lang(fr) [data-vc-id="vc-12"][data-vc-id],
:lang(fr) [data-vc-id="vc-18"][data-vc-id],
:lang(fr) [data-vc-id="vc-24"][data-vc-id],
:lang(ro) [data-vc-id="vc-6"][data-vc-id],
:lang(ro) [data-vc-id="vc-12"][data-vc-id],
:lang(ro) [data-vc-id="vc-18"][data-vc-id],
:lang(ro) [data-vc-id="vc-24"][data-vc-id],
:lang(en) [data-vc-id="vc-6"][data-vc-id],
:lang(en) [data-vc-id="vc-12"][data-vc-id],
:lang(en) [data-vc-id="vc-18"][data-vc-id],
:lang(en) [data-vc-id="vc-24"][data-vc-id] {
    font-size: 30px !important;
}

/* Everest w liczbach – etykiety */
:lang(de) [data-vc-id="vc-7"][data-vc-id],
:lang(de) [data-vc-id="vc-13"][data-vc-id],
:lang(de) [data-vc-id="vc-19"][data-vc-id],
:lang(de) [data-vc-id="vc-25"][data-vc-id],
:lang(hu) [data-vc-id="vc-7"][data-vc-id],
:lang(hu) [data-vc-id="vc-13"][data-vc-id],
:lang(hu) [data-vc-id="vc-19"][data-vc-id],
:lang(hu) [data-vc-id="vc-25"][data-vc-id],
:lang(sk) [data-vc-id="vc-7"][data-vc-id],
:lang(sk) [data-vc-id="vc-13"][data-vc-id],
:lang(sk) [data-vc-id="vc-19"][data-vc-id],
:lang(sk) [data-vc-id="vc-25"][data-vc-id],
:lang(cs) [data-vc-id="vc-7"][data-vc-id],
:lang(cs) [data-vc-id="vc-13"][data-vc-id],
:lang(cs) [data-vc-id="vc-19"][data-vc-id],
:lang(cs) [data-vc-id="vc-25"][data-vc-id],
:lang(fr) [data-vc-id="vc-7"][data-vc-id],
:lang(fr) [data-vc-id="vc-13"][data-vc-id],
:lang(fr) [data-vc-id="vc-19"][data-vc-id],
:lang(fr) [data-vc-id="vc-25"][data-vc-id],
:lang(ro) [data-vc-id="vc-7"][data-vc-id],
:lang(ro) [data-vc-id="vc-13"][data-vc-id],
:lang(ro) [data-vc-id="vc-19"][data-vc-id],
:lang(ro) [data-vc-id="vc-25"][data-vc-id],
:lang(en) [data-vc-id="vc-7"][data-vc-id],
:lang(en) [data-vc-id="vc-13"][data-vc-id],
:lang(en) [data-vc-id="vc-19"][data-vc-id],
:lang(en) [data-vc-id="vc-25"][data-vc-id] {
    font-size: 23px !important;
}

/* Everest w liczbach – opisy */
:lang(de) [data-vc-id="vc-8"][data-vc-id],
:lang(de) [data-vc-id="vc-14"][data-vc-id],
:lang(de) [data-vc-id="vc-20"][data-vc-id],
:lang(de) [data-vc-id="vc-26"][data-vc-id],
:lang(hu) [data-vc-id="vc-8"][data-vc-id],
:lang(hu) [data-vc-id="vc-14"][data-vc-id],
:lang(hu) [data-vc-id="vc-20"][data-vc-id],
:lang(hu) [data-vc-id="vc-26"][data-vc-id],
:lang(sk) [data-vc-id="vc-8"][data-vc-id],
:lang(sk) [data-vc-id="vc-14"][data-vc-id],
:lang(sk) [data-vc-id="vc-20"][data-vc-id],
:lang(sk) [data-vc-id="vc-26"][data-vc-id],
:lang(cs) [data-vc-id="vc-8"][data-vc-id],
:lang(cs) [data-vc-id="vc-14"][data-vc-id],
:lang(cs) [data-vc-id="vc-20"][data-vc-id],
:lang(cs) [data-vc-id="vc-26"][data-vc-id],
:lang(fr) [data-vc-id="vc-8"][data-vc-id],
:lang(fr) [data-vc-id="vc-14"][data-vc-id],
:lang(fr) [data-vc-id="vc-20"][data-vc-id],
:lang(fr) [data-vc-id="vc-26"][data-vc-id],
:lang(ro) [data-vc-id="vc-8"][data-vc-id],
:lang(ro) [data-vc-id="vc-14"][data-vc-id],
:lang(ro) [data-vc-id="vc-20"][data-vc-id],
:lang(ro) [data-vc-id="vc-26"][data-vc-id],
:lang(en) [data-vc-id="vc-8"][data-vc-id],
:lang(en) [data-vc-id="vc-14"][data-vc-id],
:lang(en) [data-vc-id="vc-20"][data-vc-id],
:lang(en) [data-vc-id="vc-26"][data-vc-id] {
    font-size: 16px !important;
}

/* Węgierski – opisy większe */
:lang(hu) [data-vc-id="vc-8"][data-vc-id],
:lang(hu) [data-vc-id="vc-14"][data-vc-id],
:lang(hu) [data-vc-id="vc-20"][data-vc-id],
:lang(hu) [data-vc-id="vc-26"][data-vc-id] {
    font-size: 18px !important;
}

/* Panel title – wszystkie języki poza PL */
:lang(de) .znx-ws__panel-title,
:lang(hu) .znx-ws__panel-title,
:lang(sk) .znx-ws__panel-title,
:lang(cs) .znx-ws__panel-title,
:lang(fr) .znx-ws__panel-title,
:lang(ro) .znx-ws__panel-title,
:lang(en) .znx-ws__panel-title {
    font-size: 90% !important;
}

/* Hero item labels – mniejszy font dla długich języków */
:lang(hu) .znx-hero__item span,
:lang(ro) .znx-hero__item span {
    font-size: 10px !important;
}

/* Hero items – spójne proporcje przy średnich rozdzielczościach */
@media (max-width: 1300px) and (min-width: 901px) {
    .znx-hero__item {
        min-width: 0 !important;
    }
    .znx-hero__item span {
        font-size: 10px !important;
        white-space: nowrap !important;
    }
    .znx-hero__left { height: 420px !important; }
    .znx-hero { height: auto !important; }
}

/* Tytuł B2B */
:lang(de) .znx-b2b__title,
:lang(hu) .znx-b2b__title,
:lang(sk) .znx-b2b__title,
:lang(fr) .znx-b2b__title,
:lang(ro) .znx-b2b__title {
    font-size: 85% !important;
}


/* Przycisk CTA hero */
:lang(de) .znx-hero__cta {
    font-size: 75% !important;
    white-space: nowrap !important;
}
:lang(ro) .znx-hero__cta {
    font-size: 80% !important;
    white-space: nowrap !important;
}
:lang(sk) .znx-hero__cta {
    white-space: nowrap !important;
    text-align: center !important;
    justify-content: center !important;
}
:lang(sk) .znx-hero__item span {
    font-size: 10px !important;
}
:lang(cs) .znx-item--zag-stopowa span {
    font-size: 10px !important;
}
/* Device B2B – auto wysokość żeby tytuł i formularz były razem */
:lang(de) .znx-b2b__device,
:lang(hu) .znx-b2b__device,
:lang(sk) .znx-b2b__device,
:lang(cs) .znx-b2b__device,
:lang(fr) .znx-b2b__device,
:lang(ro) .znx-b2b__device,
:lang(en) .znx-b2b__device {
    height: auto !important;
}

:lang(ro) .znx-right__title {
    font-size: 80% !important;
}
:lang(ro) .znx-b2b__input {
    font-size: 6px !important;
}
:lang(ro) .znx-b2b__login-btn {
    font-size: 8px !important;
}

/* Kafle kategorii – etykiety */
:lang(en) .kafel__label {
    font-size: 80% !important;
}


/* Wyłącz border Kadence na wrapperze stopki – zapobiega podwójnej kresce */
.site-footer,
.footer-wrap,
.footer-upper,
.footer-lower {
  border-top: none !important;
}


/* ── O NAS — czcionka tekstu jak na stronie Współpraca (17px) ──
   Komponent Visual Components (.everest-komponent) miał tekst 21.333px,
   a lokalne vc-overrides podbijały wstęp do 18px i 1. akapit historii do 21px.
   Ujednolicamy do 17px / line-height 1.45 (tak jak .wspolpraca__intro).
   !important, bo vc-overrides mają wyższą specyficzność ([data-vc-id][data-vc-id]). */
.everest-komponent__wstep,
.everest-komponent__tekst-historii,
.everest-komponent__tekst-historii p {
  font-size: 17px !important;
  line-height: 1.45 !important;
}


/* ── WSPÓŁPRACA — wyrównanie ikony przy tytułach korzyści ──
   Kadence dokłada nagłówkom w treści margines (.single-content h1..h6{margin:1.5em 0 .5em},
   spec. 0,1,1 — silniejsza niż reset komponentu .wspolpraca *{margin:0}). W wierszu
   ikona+tytuł (.korzysci__naglowek: flex, align-items:center) górny margines <h3>
   spycha tekst w dół, przez co dół ikony ląduje na środku napisu (w podglądzie OK,
   bo tam nie ma CSS Kadence). Zerujemy margines nagłówka. */
.wspolpraca .korzysci__naglowek .korzysci__nazwa {
  margin: 0 !important;
}


/* ── ARCHIWUM „PORADY" — jak Promocje (bez czarnego hero) + kafle 3× ──
   Klient: 3 kolumny, tylko zdjęcie + tytuł, bez rozwinięcia; nagłówek jak Promocje
   (Promocje = strona z content-title-style-hide i bez .entry-hero). */

/* 1) Zamiast chować hero (co kasowało tytuł całkowicie) — spłaszcz go do zwykłego
   nagłówka jak na Promocjach: białe tło, bez ciemnej nakładki, tytuł bold/uppercase/26px */
body.category-porady .entry-hero.post-archive-hero-section {
  background: #fff !important;
  min-height: 0 !important;
}
body.category-porady .entry-hero.post-archive-hero-section .hero-section-overlay { display: none !important; }
body.category-porady .entry-hero.post-archive-hero-section .entry-hero-container-inner {
  background: #fff !important;
  padding: 40px 0 0 !important;
}
body.category-porady .entry-hero .entry-header {
  min-height: 0 !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
}
body.category-porady .entry-hero .archive-title {
  color: #1a1a1a !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* 2) Siatka: 4 kolumny (desktop) / 2 (tablet) / 1 (mobile) */
body.category-porady #archive-container.grid-cols { grid-template-columns: 1fr !important; }
@media (min-width: 768px) {
  body.category-porady #archive-container.grid-cols { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1025px) {
  body.category-porady #archive-container.grid-cols { grid-template-columns: repeat(4, 1fr) !important; }
}

/* 3) Kafel = tylko zdjęcie + tytuł (reszta ukryta) */
body.category-porady .loop-entry .entry-taxonomies,
body.category-porady .loop-entry .entry-meta,
body.category-porady .loop-entry .entry-summary,
body.category-porady .loop-entry .entry-actions { display: none !important; }
body.category-porady .loop-entry .entry-content-wrap { padding: 14px 6px 0 !important; }
body.category-porady .loop-entry .entry-title {
  text-align: center; font-size: 1.05rem; line-height: 1.3; margin: 0; font-weight: 400 !important;
}
body.category-porady .loop-entry .entry-title a { color: #1a1a1a; font-weight: 400 !important; }

/* 4) Jednolity kadr zdjęć — banery różnych rozmiarów przycięte do proporcji 1:1 (kwadrat) */
body.category-porady .loop-entry .post-thumbnail-inner {
  position: relative !important;
  aspect-ratio: auto !important;
  height: 0 !important;
  padding-bottom: 100% !important;   /* ZMIANA: kwadrat 1:1 zamiast 3:2 */
}
body.category-porady .loop-entry .post-thumbnail-inner img {
  position: absolute !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important; object-fit: cover !important;
}


/* ── Slajd 1.4 — kreska pod headerem: na PODSTRONACH tak, na STRONIE GŁÓWNEJ nie ──
   Klient chce ciemną kreskę oddzielającą header od treści na każdej podstronie,
   ale NIE na stronie głównej (tam header nakłada się przezroczyście na hero,
   więc kreska wyglądałaby jak zabłąkana linia na zdjęciu). */
.znx-header { box-shadow: none !important; }                       /* bez przypadkowego cienia/podwójnej kreski */
body:not(.home) .znx-header { border-bottom: 4px solid #000 !important; }


/* ── Strona PROMOCJE (id 12679) — siatka 2 kolumn wymuszona CSS-em ──
   Blok Query Loop w edytorze Gutenberg potrafi po zapisie strony samoistnie
   zresetować swój atrybut layout z "grid, columnCount:2" na "default" (lista),
   co kasuje 2-kolumnowy układ. Wygenerowany przez WP CSS siatki jest przy tym
   przypięty do class hashowanej per-instancja bloku (wp-container-core-post-template-XXXX),
   więc znika razem z resetem. Wymuszamy siatkę stałym selektorem na body.page-id,
   niezależnie od tego, co klient zrobi w edytorze strony. */
body.page-id-12679 .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2.5rem !important;
}
@media (max-width: 600px) {
  body.page-id-12679 .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}
body.home .znx-header       { border-bottom: none !important; }
/* ============================================================
   WSPÓŁPRACA — poziome przewijanie na telefonie (2026-08-11)
   Visual Components dokleja do strony blok <style id="vc-overrides">
   z ręcznymi korektami pozycji robionymi na płótnie DESKTOPOWYM
   (sztywne szerokości w px + przesunięcia left). Ten blok NIE jest
   zamknięty w media query, więc obowiązuje też na telefonie — element
   szerszy niż ekran wychodzi poza prawą krawędź: stąd biały pas
   z prawej i możliwość przesuwania strony.
   Na mobile kasujemy sztywne szerokości i przesunięcia POZIOME.
   Pionowe (top) zostawiamy — nie powodują wyjścia poza ekran.

   UWAGA: nie „naprawiać" tego przez `body { overflow-x: hidden }` —
   to zasłania objaw, a przy okazji psuje `position: sticky` nagłówka.
   ============================================================ */
@media (max-width: 767px) {
  .wspolpraca[data-vc-id],
  .wspolpraca [data-vc-id] {
    width: auto !important;
    max-width: 100% !important;
    left: 0 !important;
    right: auto !important;
  }
}