/* =========================================================================
   pro-theme.css  —  nowoczesna nakladka PRO + tryb jasny/ciemny
   Re-skin warstwy wizualnej. NIE dodaje tresci — restyluje istniejacy DOM.
   Paleta dobrana pod kontrast WCAG AAA (>=7:1 dla tekstu) w obu motywach.
   ========================================================================= */

:root{
  --surface:#ffffff;
  --surface-2:#f4f8fb;
  --surface-3:#eaf2f8;
  --ink:#16212b;        /* naglowki / mocny tekst  (na bialym ~13:1) */
  --text:#2b3640;       /* tekst podstawowy        (na bialym ~12:1) */
  --muted:#434f59;      /* tekst drugorzedny       (na bialym ~8.4:1, na gradiencie ~7.3:1) */
  --link:#0b5394;       /* linki                   (na bialym ~7.8:1) */
  --emph:#16212b;       /* wyroznienie (np. czas realizacji) — na jasnym ciemne */
  --name:#16212b;       /* nazwa serii w karcie    (amber tylko na ciemnym) */
  --accent:#f7ac1a;     /* marka — uzywany jako akcent/tlo, NIE jako maly tekst na jasnym */
  --accent-d:#e09a08;
  --on-accent:#15202a;  /* tekst na amber (kontrast ~7.8:1) */
  --border:#d6e0e8;
  --shadow:0 8px 28px rgba(22,33,43,.10);
  --shadow-sm:0 2px 12px rgba(22,33,43,.07);
  --header-bg:#ffffff;
  --header-border:#e2e9ef;
  --radius:14px;
  --bg-grad:linear-gradient(180deg,#f4f9fc 0%,#e4eef6 100%);
  --pattern-opacity:.5;
  --pattern-filter:none;              /* amber zebatka tez w jasnym -> przeswit przez karty jak w ciemnym */
}

[data-theme="dark"]{
  /* DARK MESH — bardzo ciemny fiolet + granat */
  --surface:#16122e;       /* karty (ciemny fiolet-granat) */
  --surface-2:#1d1840;
  --surface-3:#272150;
  --ink:#f2f2fc;           /* ~16:1 */
  --text:#cdd1ec;          /* ~12:1 */
  --muted:#abb1d8;         /* ~8:1 na surface */
  --link:#8fb8ff;          /* ~8:1 */
  --emph:#f7ac1a;
  --name:#f7ac1a;
  --accent:#f7ac1a;
  --accent-d:#f7ac1a;      /* hover/aktywny = ten sam amber co pigulka telefonu (przyciemniony vs #ffc24d), kontrast 10:1 */
  --on-accent:#15202a;
  --border:#322c5e;        /* obramowania w odcieniu fioletu */
  --shadow:0 14px 38px rgba(0,0,0,.6);
  --shadow-sm:0 2px 16px rgba(0,0,0,.5);
  --header-bg:#100c24;
  --header-border:#2a2456;
  --bg-grad:linear-gradient(180deg,#0a0816 0%,#0b1030 100%);
  --pattern-opacity:.5;               /* zolta zebatka przygaszona o 50% */
  --pattern-filter:none;
}

html{ -webkit-text-size-adjust:100%; }
body{ color:var(--text); transition:color .25s ease; overflow-x:hidden; }
.in,.in-content{ max-width:100%; }

/* ---- Tlo strony ---- */
.main-bg::after{ background:var(--bg-grad) !important; min-width:0 !important; transition:background .3s ease; }
.main-pattern i::after{ opacity:var(--pattern-opacity); filter:var(--pattern-filter,none); transition:opacity .3s ease,filter .3s ease; }

/* ---- DARK MESH: tlo z plam bardzo ciemnego fioletu i granatu, przyklejone do viewportu ---- */
[data-theme="dark"] .main-bg{ position:fixed; top:0; left:0; width:100%; height:100vh; background:#070611 !important; }
[data-theme="dark"] .main-bg::after{
  min-width:0 !important;
  left:0 !important; right:0 !important; top:0 !important; bottom:0 !important; width:auto !important; transform:none !important;
  background:
    radial-gradient(58% 48% at 14% 8%,  rgba(86,38,150,.55) 0, rgba(86,38,150,0) 70%),
    radial-gradient(52% 46% at 88% 4%,  rgba(26,52,140,.55) 0, rgba(26,52,140,0) 70%),
    radial-gradient(50% 55% at 96% 52%, rgba(60,28,128,.48) 0, rgba(60,28,128,0) 70%),
    radial-gradient(55% 50% at 4% 88%,  rgba(20,46,128,.50) 0, rgba(20,46,128,0) 70%),
    radial-gradient(48% 46% at 78% 96%, rgba(72,32,140,.45) 0, rgba(72,32,140,0) 70%),
    radial-gradient(90% 90% at 50% 45%, rgba(18,16,52,.35) 0, rgba(18,16,52,0) 75%),
    #070611 !important;
}
/* ZOLTA zebatka w OBU motywach (przeswit przez karty spojny) */
.main-pattern i::after{ background-image:url(../img/pattern-amber.webp?v=3) !important; }

/* === "Floating": tlo/mesh najnizej, zebatka FIXED na dole-prawo NAD meshem, tresc plynie nad === */
.main-bg{ z-index:-2 !important; }
.main-pattern{
  position:fixed !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  width:auto !important; height:auto !important; z-index:-1 !important; overflow:hidden; pointer-events:none;
}
.main-pattern i{ position:absolute !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; width:auto !important; margin:0 !important; }
.main-pattern i::after{
  position:absolute !important; right:-110px !important; left:auto !important; top:75px !important; bottom:auto !important;
  transform:none !important; width:600px !important; height:620px !important;
  background-repeat:no-repeat !important; background-position:center !important; background-size:contain !important;
}

/* obrys/odcien boksow na glownej — separacja od tla w obu motywach */
.product-catalog-list .product{ border-color:#cdd8e3; }
[data-theme="dark"] .product-catalog-list .product{ background-color:rgba(28,24,70,.9); border-color:#463e82; }

/* lekka przezroczystosc (~10%) na blokach tresci i boxach -> mesh/zebatka delikatnie przeswituja (oba motywy) */
.page-extra-text,.full_blog_post,.blog_list .blog_post,.pbf-faq .pbf-faq-item,
.in-content:not(.blog_list),
.product-catalog-list .product{ background-color:rgba(255,255,255,.9) !important; }
[data-theme="dark"] .page-extra-text,
[data-theme="dark"] .full_blog_post,
[data-theme="dark"] .blog_list .blog_post,
[data-theme="dark"] .pbf-faq .pbf-faq-item,
[data-theme="dark"] .in-content:not(.blog_list){ background-color:rgba(22,18,46,.9) !important; }
[data-theme="dark"] .product-catalog-list .product{ background-color:rgba(28,24,70,.9) !important; }

/* =========================================================================
   NAGLOWEK / MENU (fixed)
   ========================================================================= */
#main-menu{
  background:var(--header-bg);
  border-bottom:1px solid var(--header-border);
  box-shadow:var(--shadow-sm);
  transition:background .3s ease,border-color .3s ease;
}
/* blur usuniety — byl kosztowny (lag scrolla na mobile, render po puszczeniu palca). Pasek jest teraz opaque. */
#header{ background:transparent !important; margin-bottom:40px; }  /* bylo 80px — polowa, mniej „dziury" pod h1 */

/* logo: na ciemnym motywie wersja z bialymi literami (zebatka zostaje amber) */
[data-theme="dark"] img.logo{ content:url(../img/logo-white.webp); }

#main-menu li{ color:var(--ink); letter-spacing:.02em; }
/* usuniecie dziedziczonego cienia tekstu z bazowego CSS (widoczny w jasnym motywie) */
#main-menu a,
#main-menu li.active > a,
#main-menu li.children-active > a,
#main-menu ul ul li a,
#main-menu ul ul li a:hover,
#main-menu ul ul li.active a{ text-shadow:none !important; }
#main-menu .menu_wrapper > ul > li > a{ color:var(--ink); position:relative; transition:color .2s ease; }
#main-menu .menu_wrapper > ul > li > a:hover{ color:var(--accent-d); text-decoration:none; }
#main-menu .menu_wrapper > ul > li.active > a,
#main-menu .menu_wrapper > ul > li.children-active > a{ color:var(--accent-d); }
/* cienkie podkreslenie: animowane plynnie na hover, zostaje na aktywnym (bez „wypustek") */
#main-menu .menu_wrapper > ul > li > a{ border-bottom:0 !important; }
#main-menu .menu_wrapper > ul > li > a::after{
  content:""; display:block; position:absolute; left:9px; right:9px; bottom:0; height:2px;
  background:var(--accent); border-radius:0;
  transform:scaleX(0); transform-origin:center;
  transition:transform .28s ease;
}
#main-menu .menu_wrapper > ul > li:hover > a::after,
#main-menu .menu_wrapper > ul > li.active > a::after,
#main-menu .menu_wrapper > ul > li.children-active > a::after{ transform:scaleX(1); }

/* rozwijane podmenu */
#main-menu .parent ul,
#main-menu .menu_wrapper ul ul{
  background:var(--surface) !important;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:none !important;
  padding:8px 0 !important;
  overflow:hidden;
}
#main-menu .parent ul li{ display:block; padding:0; }
#main-menu .parent ul li a{
  display:block; padding:9px 18px; color:var(--text) !important; font-weight:600; white-space:nowrap;
}
/* aktywny/hover w rozwijanym menu: subtelne amber-podswietlenie + czytelny tekst + amber pasek z lewej
   (nadpisuje bazowe: solidne amber tlo + bialy tekst = nieczytelne) */
#main-menu .parent ul li a:hover,
#main-menu .menu_wrapper ul ul li a:hover,
#main-menu .menu_wrapper ul ul li.active a,
#main-menu .parent ul li.active a{
  background:var(--accent) !important;       /* zolte tlo zostaje */
  color:var(--on-accent) !important;         /* tylko czcionka ciemna -> czytelna (8.55:1) */
  text-shadow:none !important;
  box-shadow:none !important;
  text-decoration:none;
}

/* telefon -> amber pigulka z ciemnym tekstem (AAA) */
#main-menu .tel{
  display:inline-flex; align-items:center;
  background:var(--accent); color:var(--on-accent) !important; border:1px solid var(--accent);
  border-radius:999px; padding:8px 16px; font-weight:800; font-size:18px;
  box-shadow:var(--shadow-sm); transition:background .2s ease,transform .2s ease;
}
#main-menu .tel{ box-shadow:none; }
#main-menu .tel:hover{ background:var(--accent-d); text-decoration:none; }
#main-menu .tel::before{ filter:none; }

/* przelacznik motywu (wstrzykiwany przez pro-theme.js) */
.pbf-theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border:1px solid var(--border); border-radius:50%;
  background:var(--surface); color:var(--ink); cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .2s ease;
}
.pbf-theme-toggle{ box-shadow:none; }
.pbf-theme-toggle:hover{ border-color:var(--accent); color:var(--accent-d); }
.pbf-theme-toggle svg{ width:20px; height:20px; display:block; }
.pbf-theme-toggle .pbf-sun{ display:none; }
.pbf-theme-toggle .pbf-moon{ display:block; }
[data-theme="dark"] .pbf-theme-toggle .pbf-sun{ display:block; }
[data-theme="dark"] .pbf-theme-toggle .pbf-moon{ display:none; }

/* --- Belka desktop: flex, jeden rzad, telefon NIE zawija sie pod spod --- */
@media (min-width:1231px){
  #main-menu > .in{ display:flex; align-items:center; gap:14px; height:70px; }
  #main-menu .logo-link{ flex:0 0 auto; display:flex; align-items:center; }
  #main-menu .logo{ float:none; margin:0; height:auto; width:auto; max-height:38px; max-width:210px; }
  #main-menu .menu_wrapper{ flex:1 1 auto; min-width:0; display:flex; align-items:stretch; gap:10px; float:none; }
  #main-menu .menu_wrapper > ul{
    flex:1 1 auto; min-width:0; display:flex; align-items:stretch; flex-wrap:nowrap; justify-content:flex-start;
    margin:0 !important; float:none; height:70px;
  }
  #main-menu .menu_wrapper > ul > li{
    display:flex; align-items:center; position:relative; padding:0 7px; float:none; white-space:nowrap;
    font-size:13px; letter-spacing:0;
  }
  #main-menu .menu_wrapper > ul > li > a{ display:flex; align-items:center; height:100%; }
  #main-menu .menu_wrapper > ul > li.parent > ul{ top:70px; left:0; }
  #main-menu .tel{ float:none; margin:0; align-self:center; flex:0 0 auto; order:2; padding:6px 13px; font-size:16px; }
  .pbf-theme-toggle{ float:none; margin:0; align-self:center; flex:0 0 auto; order:3; width:38px; height:38px; }
}
/* margines bezpieczenstwa: bardzo waskie desktopy -> jeszcze ciasniej */
@media (min-width:1231px) and (max-width:1340px){
  #main-menu .menu_wrapper > ul > li{ padding:0 5px; font-size:12.5px; }
  #main-menu > .in{ gap:10px; }
  #main-menu .logo{ height:auto; max-height:34px; max-width:190px; }
}
/* na mobilu przelacznik trzyma sie w pasku gornym */
/* =========================================================================
   MOBILE / TABLET (<=1230px) — belka i menu napisane od zera, oba motywy
   ========================================================================= */
@media (max-width:1230px){
  /* ---- PASEK GORNY (flex) ---- */
  #main-menu{ height:64px !important; }
  #main-menu > .in{ display:flex !important; align-items:center; gap:8px; height:64px; padding:0 14px !important; }
  #main-menu .logo-link{ flex:1 1 auto; min-width:0; display:flex; align-items:center; }
  #main-menu .logo{ float:none !important; margin:0 !important; height:auto !important; width:auto !important; max-height:30px !important; max-width:150px !important; }
  #main-menu .menu_wrapper{ flex:0 0 auto; display:flex !important; align-items:center; justify-content:flex-end; gap:8px; float:none !important; position:static; }

  /* telefon — kompaktowy amber krazek z ikona (oszczedza miejsce; nadal dzwoni przez tel:) */
  #main-menu .tel{
    order:1; float:none !important; clear:none !important; margin:0 !important; flex:0 0 auto; box-shadow:none;
    width:42px !important; height:42px !important; padding:0 !important; border-radius:50% !important;
    background:var(--accent) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2315202a'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.81.36%201.6.7%202.34a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.74-1.27a2%202%200%200%201%202.11-.45c.74.34%201.53.57%202.34.7A2%202%200%200%201%2022%2016.92z'/%3E%3C/svg%3E") center / 20px no-repeat !important;
  }
  #main-menu .tel .number_wrapper{ display:none !important; }
  #main-menu .tel::before{ display:none !important; }

  /* przelacznik motywu */
  .pbf-theme-toggle{ order:2; float:none !important; margin:0 !important; width:40px; height:40px; flex:0 0 auto; }

  /* hamburger -> 3 kreski w kolorze motywu, X po otwarciu */
  #open_responsive_menu{
    order:3; position:relative !important; float:none !important; margin:0 !important;
    width:40px; height:40px; display:flex !important; align-items:center; justify-content:center; flex:0 0 auto; cursor:pointer;
  }
  #open_responsive_menu i,
  #open_responsive_menu i::before,
  #open_responsive_menu i::after{
    position:absolute; left:50%; width:24px; height:2.5px; margin-left:-12px; background:var(--ink) !important;
    border-radius:2px; transition:transform .22s ease, top .22s ease, background .22s ease; content:"";
  }
  #open_responsive_menu i{ top:50%; margin-top:-1px; }
  #open_responsive_menu i::before{ top:-8px; }
  #open_responsive_menu i::after{ top:8px; }
  #open_responsive_menu.opened i{ background:transparent !important; }
  #open_responsive_menu.opened i::before{ top:0; transform:rotate(45deg); }
  #open_responsive_menu.opened i::after{ top:0; transform:rotate(-45deg); }

  /* ---- PANEL MENU (sterowany klasa .nav-open z pro-theme.js, BEZ jQuery slide) ---- */
  #main-menu .menu_wrapper > ul{
    position:fixed !important; top:64px; left:0; right:0; width:100% !important; margin:0 !important;
    display:block !important;
    background:var(--surface) !important; border-top:1px solid var(--border);
    box-shadow:0 18px 34px rgba(0,0,0,.4) !important; padding:4px 0 14px !important;
    max-height:calc(100vh - 64px); max-height:calc(100dvh - 64px);
    overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain; touch-action:pan-y; z-index:30;
    visibility:hidden; opacity:0; transform:translateY(-12px); pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  #main-menu.nav-open .menu_wrapper > ul{
    visibility:visible; opacity:1; transform:none; pointer-events:auto;
  }
  /* blokada scrolla tla, gdy menu otwarte — BEZ touch-action:none (to blokowalo scroll panelu!) */
  html.pbf-menu-open, body.pbf-menu-open{ overflow:hidden !important; }
  #main-menu .menu_wrapper > ul > li{
    display:block !important; float:none !important; margin:0 !important; padding:0 !important;
    background:transparent !important; border-bottom:1px solid var(--border);
  }
  #main-menu .menu_wrapper > ul > li:last-child{ border-bottom:0; }
  #main-menu .menu_wrapper > ul > li > a{
    display:block !important; padding:14px 18px !important; height:auto !important;
    color:var(--ink) !important; font-size:15px; font-weight:700; text-shadow:none !important;
  }
  #main-menu .menu_wrapper > ul > li > a::after{ display:none !important; }  /* desktopowe podkreslenie off */

  /* aktywna pozycja: amber tlo + ciemny tekst (czytelne) */
  #main-menu .menu_wrapper > ul > li.active > a,
  #main-menu .menu_wrapper > ul > li.children-active > a{
    background:var(--accent) !important; color:var(--on-accent) !important;
  }

  /* strzalka rozwijania (parent) */
  #main-menu li.parent > a > i{
    position:absolute !important; right:0; top:0; width:48px !important; height:100% !important; background:transparent !important;
  }
  #main-menu li.parent > a > i::after{
    right:18px !important; border-top-color:var(--ink) !important;
  }
  #main-menu li.active.parent > a > i::after,
  #main-menu li.children-active.parent > a > i::after{ border-top-color:var(--on-accent) !important; }

  /* PODMENU (akordeon) */
  #main-menu .menu_wrapper ul ul{
    position:static !important; width:auto !important; margin:0 !important; padding:2px 0 6px !important;
    background:var(--surface-2) !important; border:0 !important; border-radius:0 !important;
    box-shadow:none !important; opacity:1 !important; visibility:visible !important; overflow:visible;
  }
  #main-menu .menu_wrapper ul ul li{ display:block !important; padding:0 !important; background:transparent !important; border:0 !important; }
  #main-menu .menu_wrapper ul ul li a{
    display:block !important; padding:11px 18px 11px 34px !important;
    color:var(--text) !important; font-weight:600; font-size:14px; text-shadow:none !important;
  }
  #main-menu .menu_wrapper ul ul li.active a,
  #main-menu .menu_wrapper ul ul li a:hover{
    background:var(--accent) !important; color:var(--on-accent) !important; box-shadow:none !important;
  }
  /* accordion: submenu zwiniete, rozwija sie po tapnieciu (klasa .open-sub z JS) */
  #main-menu .menu_wrapper > ul > li.parent > ul{ display:none !important; }
  #main-menu .menu_wrapper > ul > li.parent.open-sub > ul{ display:block !important; }
  #main-menu li.parent > a > i::after{ transition:transform .2s ease; }
  #main-menu li.parent.open-sub > a > i::after{ transform:translateY(-2px) rotate(180deg); }

  /* header offset pod nizsza belke + mniejszy odstep h1 -> tresc */
  #header > .in{ padding-top:64px; }
  #header{ margin-bottom:26px !important; }
  #header .heading .wrapper{ padding:14px 0 10px; }
}
@media (max-width:380px){
  #main-menu > .in{ gap:6px; }
  #main-menu .logo{ max-height:27px !important; max-width:128px !important; }
  #main-menu .tel,.pbf-theme-toggle,#open_responsive_menu{ width:38px !important; height:38px !important; }
}

/* =========================================================================
   HERO / HEADING
   ========================================================================= */
#header .heading{ color:var(--ink); margin-left:0; }
#header .heading::after{ display:none !important; }
#header .heading .wrapper{ padding:18px 0 13px; }
#header .heading h1{
  font-size:42px; line-height:1.12; font-weight:800; letter-spacing:-.01em; color:var(--ink);
}
#header .heading h1.sup{ font-size:38px; }
#header .heading h1::before{
  content:""; display:block; width:54px; height:4px; margin-bottom:16px;
  background:var(--accent); border-radius:4px;
}
#header .heading .sub{ margin-top:10px; color:var(--muted); font-size:15px; font-weight:600; }
.p-id-about main .heading{ color:var(--ink); }

/* =========================================================================
   KARTY PRODUKTOW (strona glowna) -> nowoczesny grid
   ========================================================================= */
.product-catalog-list{
  display:grid !important; grid-template-columns:repeat(3,1fr); gap:26px;
  width:auto !important; margin:0 !important; float:none !important; text-align:left !important;
}
.product-catalog-list::after{ display:none; }
.product-catalog-list .product{
  width:auto !important; height:auto !important; min-height:230px;
  margin:0 !important; float:none !important;
  display:flex !important; flex-direction:column; justify-content:flex-start;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px 22px 18px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.product-catalog-list .product::before{
  content:""; position:absolute; left:0; top:0; height:4px; width:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent-d)); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.product-catalog-list .product:hover{
  transform:translateY(-4px); border-color:var(--accent); text-decoration:none;
}
.product-catalog-list .product:hover::before{ transform:scaleX(1); }

.product-catalog-list .product .series-type{
  position:static !important; width:auto !important; height:auto !important; background:none !important;
  order:1; padding:0; margin:0;
}
/* zerowanie dziedziczonych kolek (czerwone/niebieskie gradienty, biale teksty, cienie) */
.product-catalog-list .product .series,
.product-catalog-list .product .type{
  position:static !important; width:auto !important; height:auto !important;
  background:none !important; border-radius:0 !important; text-shadow:none !important;
  padding:0 !important; margin:0; text-align:left !important;
}
.product-catalog-list .product .series{
  display:inline-flex !important; align-items:baseline; gap:6px;
  font-size:12px !important; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted) !important;
}
.product-catalog-list .product .series .name{
  display:inline; font-size:13px !important; font-weight:800; color:var(--name) !important; letter-spacing:.04em;
}
.product-catalog-list .product .type,
.product-catalog-list .product h2.type{
  font-size:19px !important; line-height:1.25; font-weight:700 !important; color:var(--ink) !important; margin:10px 0 0 !important;
}
.product-catalog-list .product img{
  position:static !important; left:auto !important; bottom:auto !important;
  order:2; width:auto; max-width:78%; max-height:128px; margin:18px auto 0; object-fit:contain;
  transition:transform .35s ease;
}
.product-catalog-list .product:hover img{ transform:scale(1.06); }
/* kafelek "Zamienniki" bez zdjecia -> DUZA ikona recyklingu/zamiany (SVG amber, BEZ kolka) */
.product-catalog-list .product.replacements .arrows{
  order:2; position:static !important; top:auto !important; left:auto !important;
  margin:18px auto 0 !important; width:118px !important; height:118px !important;
  border:0 !important; border-radius:0 !important;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23f7ac1a'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='23%204%2023%2010%2017%2010'/%3E%3Cpolyline%20points='1%2020%201%2014%207%2014'/%3E%3Cpath%20d='M3.51%209a9%209%200%200%201%2014.85-3.36L23%2010M1%2014l4.64%204.36A9%209%200%200%200%2020.49%2015'/%3E%3C/svg%3E") center / contain no-repeat;
  transition:transform .45s ease;
}
.product-catalog-list .product.replacements:hover .arrows{ transform:rotate(-180deg); }
.product-catalog-list .product.replacements .arrows::before,
.product-catalog-list .product.replacements .arrows::after{ display:none !important; content:none !important; }

/* =========================================================================
   BLOK TRESCI (.page-extra-text na home + .full_blog_post we wpisach) -> karta
   ========================================================================= */
.page-extra-text,
.full_blog_post,
.in-content:not(.blog_list){
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:34px 40px; box-shadow:var(--shadow-sm); margin:8px auto 46px; overflow:hidden;  /* karta owijajaca cala tresc (wszystkie podstrony) */
}
.page-extra-text > div,
.full_blog_post > div{ color:var(--text) !important; font-size:17px !important; }
.page-extra-text h2,.page-extra-text h2.h2g,.page-extra-text h3,
.full_blog_post h2,.full_blog_post h3{ color:var(--ink) !important; }
.page-extra-text a,
.full_blog_post a{ color:var(--link) !important; }      /* #0073e6 nie spelnia AAA -> nadpisanie w obu motywach */
.page-extra-text a:hover,
.full_blog_post a:hover{ text-decoration:underline !important; }
.full_blog_post .main_image{ border:3px solid var(--border) !important; border-radius:10px; }

/* obrazki "obrazekg" w tresci */
.page-extra-text .obrazekg,
.full_blog_post .obrazekg{ border-radius:8px; }

/* ---- nadpisania inline-styli w trybie CIEMNYM (oba typy tresci) ---- */
[data-theme="dark"] .page-extra-text > div,
[data-theme="dark"] .full_blog_post > div,
[data-theme="dark"] .page-extra-text p,
[data-theme="dark"] .page-extra-text li,
[data-theme="dark"] .page-extra-text strong,
[data-theme="dark"] .page-extra-text td,
[data-theme="dark"] .full_blog_post p,
[data-theme="dark"] .full_blog_post li,
[data-theme="dark"] .full_blog_post strong,
[data-theme="dark"] .full_blog_post td{ color:var(--text) !important; }
[data-theme="dark"] .page-extra-text h2,[data-theme="dark"] .page-extra-text h3,
[data-theme="dark"] .full_blog_post h2,[data-theme="dark"] .full_blog_post h3{ color:var(--ink) !important; }
[data-theme="dark"] .page-extra-text a,
[data-theme="dark"] .full_blog_post a{ color:var(--link) !important; }
/* ramki/boxy z bialym tlem w inline-style */
[data-theme="dark"] .page-extra-text div[style*="background"],
[data-theme="dark"] .full_blog_post div[style*="background"]{
  background:var(--surface-2) !important; border-color:var(--border) !important;
}
/* tabele porownawcze (inline) */
[data-theme="dark"] .page-extra-text table,
[data-theme="dark"] .full_blog_post table{ background:var(--surface) !important; }
[data-theme="dark"] .page-extra-text thead th,
[data-theme="dark"] .full_blog_post thead th{
  background:var(--surface-3) !important; color:var(--ink) !important; border-color:var(--border) !important;
}
[data-theme="dark"] .page-extra-text td,
[data-theme="dark"] .full_blog_post td{ border-color:var(--border) !important; }
[data-theme="dark"] .page-extra-text tr[style*="background"],
[data-theme="dark"] .full_blog_post tr[style*="background"]{ background:var(--surface-2) !important; }
[data-theme="dark"] .page-extra-text img.obrazekg,
[data-theme="dark"] .full_blog_post img.obrazekg{ background:#fff; padding:4px; }

/* =========================================================================
   BLOG — LISTA WPISOW (karty)
   ========================================================================= */
.blog_list .blog_post{
  background:var(--surface); border:1px solid var(--border) !important; border-radius:var(--radius);
  padding:22px 24px !important; margin:0 0 22px !important; box-shadow:var(--shadow-sm);
  overflow:hidden; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.blog_list .blog_post:hover{ transform:translateY(-3px); border-color:var(--accent); }
.blog_post .img_link{ border:1px solid var(--border) !important; border-radius:10px; }
.blog_post .special-header,
.blog_post h2.special-header{ font-size:22px !important; line-height:1.3; margin-bottom:10px !important; color:var(--ink) !important; }
.blog_post .special-header a{ color:var(--ink) !important; }
.blog_post .special-header a:hover{ color:var(--link) !important; }
.blog_post .content{ color:var(--text) !important; line-height:1.7; }
.blog_post .read_more{ text-align:right; padding-top:14px; }
.blog_post .read_more a{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border:1px solid var(--border); border-radius:8px;
  color:var(--link) !important; font-weight:700; font-size:14px; transition:all .2s ease;
}
.blog_post .read_more a::after{ content:"\2192"; font-size:16px; }
.blog_post .read_more a:hover{
  background:var(--accent); color:var(--on-accent) !important; border-color:var(--accent); text-decoration:none;
}

/* =========================================================================
   PODSTRONY (przekladnie / kontakt itp.)
   ========================================================================= */
.in-content > article,
main .description,
main .specification{ color:var(--text); }
.specification h2,.description h2,main h2.sup{ color:var(--ink); }
.specification table{ background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.specification td,.specification th{ border-color:var(--border) !important; color:var(--text); }

/* --- Tabela "types" (wymiary/typy) — bazowo biale wiersze; czysty styl w obu motywach --- */
.p-id-product .types table{
  border-collapse:separate !important; border-spacing:0 !important; width:100%;
  background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; box-shadow:var(--shadow-sm);
}
.p-id-product .types tr{ background:transparent !important; }
.p-id-product .types th{
  background:var(--surface-3) !important; color:var(--ink) !important;
  padding:11px 12px !important; border-bottom:1px solid var(--border); font-weight:700;
}
.p-id-product .types td{
  color:var(--text); padding:10px 12px !important;
  border-bottom:1px solid var(--border); border-right:1px solid var(--border);
}
.p-id-product .types tr:nth-child(even) td{ background:var(--surface-2); }
.p-id-product .types td:last-child{ border-right:0; }
.p-id-product .types tr:last-child td{ border-bottom:0; }

/* === STANDARYZACJA tabel/kolumn na podstronach produktu (rowne, pelna szerokosc, bez wciec) === */
.p-id-product .types{ padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; }
.p-id-product .types table,
.p-id-product .specification table{ width:100% !important; }
.p-id-product .specification,
.p-id-product .types{ margin-bottom:26px; }
/* na tablecie/mobile kolumny stackuja sie na pelna szerokosc */
@media (max-width:900px){
  .p-id-product .in-content .col-half{ width:100% !important; float:none !important; padding-left:0 !important; margin-bottom:22px; }
  .p-id-product .image_series_wrapper{ float:none !important; padding-left:0 !important; text-align:center; }
  .p-id-product .image_series_wrapper .product-img{ left:auto !important; transform:none !important; margin:0 auto; }
}
/* mniejszy padding karty na mobile -> wiecej miejsca dla tabel */
@media (max-width:760px){
  .in-content:not(.blog_list){ padding:20px 16px !important; }
}

/* === Strony statyczne (polityka prywatnosci, copyrights itp.) — nasza karta + czytelnosc === */
.static-page > .in,
.static-page .in{ width:100% !important; max-width:none !important; padding:0 !important; margin:0 !important; }
.static-page p,
.static-page li,
.static-page span,
.static-page strong{ color:var(--text) !important; }
.static-page h1,.static-page h2,.static-page h3{ color:var(--ink) !important; }
.static-page a{ color:var(--link) !important; }

/* --- Sekcja .specification z inline-stylami: nadpisania w trybie CIEMNYM (jak blog/home) --- */
[data-theme="dark"] .specification div{ color:var(--text) !important; }
[data-theme="dark"] .specification p,
[data-theme="dark"] .specification li,
[data-theme="dark"] .specification strong,
[data-theme="dark"] .specification td{ color:var(--text) !important; }
[data-theme="dark"] .specification h2,
[data-theme="dark"] .specification h3{ color:var(--ink) !important; }
[data-theme="dark"] .specification a{ color:var(--link) !important; }
[data-theme="dark"] .specification div[style*="background"]{ background:var(--surface-2) !important; border-color:var(--border) !important; }
[data-theme="dark"] .specification table{ background:var(--surface) !important; }
[data-theme="dark"] .specification td[style*="background"]{ background:var(--surface-3) !important; color:var(--ink) !important; }
[data-theme="dark"] .specification tr[style*="background"]{ background:var(--surface-2) !important; }
[data-theme="dark"] .specification td{ border-color:var(--border) !important; }
[data-theme="dark"] .specification img{ background:#fff; border-radius:8px; }

/* =========================================================================
   DARK — globalne nadpisanie tresci CMS z inline-stylami we WSZYSTKICH
   kontenerach (home, blog, opis produktu, specyfikacja, strony statyczne).
   Naprawia: ciemny tekst, biale boksy/tabele, jasne ramki, niebieskie linki.
   ========================================================================= */
[data-theme="dark"] :is(.page-extra-text,.full_blog_post,.specification,.description,.in-content,.blog_entry,.main-content-part) :is(p,li,span,strong,b,td,div){ color:var(--text) !important; }
[data-theme="dark"] :is(.page-extra-text,.full_blog_post,.specification,.description,.in-content,.blog_entry,.main-content-part) :is(h1,h2,h3,h4,h5){ color:var(--ink) !important; }
[data-theme="dark"] :is(.page-extra-text,.full_blog_post,.specification,.description,.in-content,.blog_entry,.main-content-part) a{ color:var(--link) !important; }
[data-theme="dark"] :is(.page-extra-text,.full_blog_post,.specification,.description,.in-content,.blog_entry,.main-content-part) :is(div,section,article)[style*="background"]{ background:var(--surface-2) !important; border-color:var(--border) !important; }
[data-theme="dark"] :is(.page-extra-text,.full_blog_post,.specification,.description,.in-content,.blog_entry,.main-content-part) table{ background:var(--surface) !important; }
[data-theme="dark"] :is(.page-extra-text,.full_blog_post,.specification,.description,.in-content,.blog_entry,.main-content-part) :is(th,td)[style*="background"]{ background:var(--surface-3) !important; color:var(--ink) !important; }
[data-theme="dark"] :is(.page-extra-text,.full_blog_post,.specification,.description,.in-content,.blog_entry,.main-content-part) tr[style*="background"]{ background:var(--surface-2) !important; }
[data-theme="dark"] :is(.page-extra-text,.full_blog_post,.specification,.description,.in-content,.blog_entry,.main-content-part) :is(th,td){ border-color:var(--border) !important; }
/* zdjecia w tresci na bialym tle (np. obrazekg) — czytelne na ciemnym */
[data-theme="dark"] :is(.page-extra-text,.full_blog_post,.specification,.description,.in-content,.blog_entry) img.obrazekg,
[data-theme="dark"] :is(.page-extra-text,.full_blog_post,.specification,.description,.in-content,.blog_entry) .main_image img{ background:#fff; padding:4px; border-radius:8px; }
/* ramki obrazkow z bazowego #eee */
[data-theme="dark"] :is(.blog_entry,.full_blog_post,.in-content) :is(.main_image,.img_link){ border-color:var(--border) !important; }

/* przyciski */
.btn{ border-radius:8px; font-weight:700; color:var(--on-accent); box-shadow:var(--shadow-sm); transition:background .25s ease,transform .2s ease; }
.btn:hover{ transform:translateY(-1px); }
.btn.btn-style2{ background:var(--surface-3); color:var(--ink); }
[data-theme="dark"] .btn.btn-style2{ background:var(--surface-3); color:var(--ink); }

/* formularze (kontakt / zapytanie) */
input[type=text],input[type=email],input[type=tel],input[type=search],textarea,select{
  background:var(--surface) !important; color:var(--ink) !important;
  border:1px solid var(--border) !important; border-radius:8px !important; padding:10px 12px !important;
}
input::placeholder,textarea::placeholder{ color:var(--muted); }

/* honeypot — ukryte wizualnie, ale NIE display:none (boty omijaja display:none) */
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.recaptcha-note{ margin:14px 0 0; font-size:12px; line-height:1.5; color:var(--muted); }
.recaptcha-note a{ color:var(--accent-d); }

/* Zalaczniki — przycisk + lista (zamiast drag-drop) */
.pbf-attach__btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:11px 18px; border:1px dashed var(--border); border-radius:9px;
  background:var(--surface-2); color:var(--ink); font:inherit; font-weight:700; font-size:14px;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.pbf-attach__btn:hover{ border-color:var(--accent); color:var(--accent-d); }
.pbf-attach__hint{ display:inline-block; margin-left:12px; font-size:12px; color:var(--muted); }
.pbf-att-list{ list-style:none; margin:12px 0 0; padding:0; }
.pbf-att-list li{
  display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text);
  padding:7px 10px; border:1px solid var(--border); border-radius:8px; margin-bottom:6px; background:var(--surface);
}
.pbf-att-list .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pbf-att-list .rm{ flex:0 0 auto; cursor:pointer; border:0; background:none; color:var(--muted); font-size:18px; line-height:1; padding:0 4px; }
.pbf-att-list .rm:hover{ color:#ff6b5e; }
.form-error-box{ margin:0 0 14px; padding:10px 14px; border-radius:8px; background:rgba(224,72,58,.14); border:1px solid rgba(224,72,58,.55); color:#ff6b5e; font-size:14px; font-weight:600; }

/* === Formularz kontaktu — czysty, rowny layout (oba motywy, mobile+desktop) === */
.contact_subpage .form-field{ width:100% !important; float:none !important; margin:0 0 12px !important; }
.contact_subpage .form-field::after{ content:none !important; }
.contact_subpage .form-field .input{ width:100% !important; float:none !important; }
.contact_subpage .form-field input,
.contact_subpage .form-field textarea{ width:100% !important; }
.contact_subpage input[type=text],
.contact_subpage input[type=email],
.contact_subpage input[type=tel]{ height:48px !important; }
.contact_subpage textarea{ height:140px !important; }
.contact_subpage .submit-box{ float:none !important; padding:6px 0 0 !important; }
.contact_subpage .submit-box .btn{ width:100%; height:50px; font-size:16px; }
.contact_subpage .info{
  display:none; margin:0 0 14px; padding:10px 14px; border-radius:8px;
  background:rgba(43,180,98,.14); border:1px solid rgba(43,180,98,.55); color:#46c878; font-weight:700; font-size:14px;
}
@media (min-width:721px){
  .contact_subpage{ max-width:600px; margin-left:auto !important; margin-right:auto !important; }
  .contact_subpage .submit-box{ text-align:center; padding-top:10px !important; }
  .contact_subpage .submit-box .btn{ width:auto; min-width:280px; padding:0 44px; }
}

/* =========================================================================
   FAQ — accordion (rozwijany). Schema JSON-LD (FAQPage) pozostaje nietknieta.
   ========================================================================= */
.pbf-faq .pbf-faq-title{ margin:0 0 16px !important; }
.pbf-faq .pbf-faq-item{
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  margin:0 0 10px !important; padding:0 !important; overflow:hidden; transition:border-color .2s ease;
}
.pbf-faq .pbf-faq-item.open{ border-color:var(--accent); }
.pbf-faq .pbf-faq-q{
  margin:0 !important; padding:15px 48px 15px 18px !important; position:relative; cursor:pointer;
  font-size:17px !important; line-height:1.4 !important; font-weight:700; color:var(--ink) !important; outline:none;
}
.pbf-faq .pbf-faq-q:hover{ color:var(--accent-d) !important; }
.pbf-faq .pbf-faq-q:focus-visible{ box-shadow:inset 0 0 0 2px var(--accent); border-radius:10px; }
.pbf-faq .pbf-faq-q::after{
  content:""; position:absolute; right:18px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s ease;
}
.pbf-faq .pbf-faq-item.open .pbf-faq-q::after{ transform:translateY(-30%) rotate(225deg); }
.pbf-faq .pbf-faq-a{ max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.25,.8,.25,1); }
.pbf-faq .pbf-faq-a-in{
  padding:2px 18px 16px; color:var(--text);
  opacity:0; transform:translateY(-8px);
  transition:opacity .3s ease .05s, transform .3s ease .05s;
}
.pbf-faq .pbf-faq-item.open .pbf-faq-a-in{ opacity:1; transform:none; }
.pbf-faq .pbf-faq-a-in p{ margin:0 !important; color:var(--text) !important; }

/* =========================================================================
   STOPKA
   ========================================================================= */
#footer{
  margin-top:50px; background:var(--surface); border-top:3px solid var(--accent);
  position:relative; z-index:1;
}
#footer h3{ color:var(--ink); margin-bottom:10px; font-size:18px; }
#footer a{ color:var(--text); }
#footer a:hover{ color:var(--accent-d); text-decoration:none; }
#footer .red_text{ color:var(--emph) !important; font-weight:800; }

/* --- stopka: jeden pasek (panel) z kolumnami w rzedzie --- */
#footer .footer-main{
  display:flex; flex-wrap:wrap; gap:30px 44px; align-items:flex-start;
  padding:38px 20px 30px; color:var(--muted); font-size:14px; line-height:1.7;
}
#footer .footer-main .footer-col{ flex:1 1 200px; min-width:160px; }
#footer .footer-main .footer-brand{ flex:1 1 250px; }
#footer .footer-main .footer-brand .logo{ height:40px; width:auto; margin:0 0 14px; }
#footer .footer-main .footer-links ul{ list-style:none; margin:0; padding:0; }
#footer .footer-main .footer-links li{ margin:0 0 8px; }
#footer .footer-main .footer-company p{ margin:0 0 4px; }
#footer .footer-bottom{
  padding:16px 20px; height:auto; line-height:1.5; border-top:1px solid var(--border);
  color:var(--muted); font-size:13px; text-align:center;
}
#footer .footer-bottom::before{ display:none !important; }   /* usuniecie bazowego szarego bloku #323232 */
#footer .footer-bottom b,
#footer .footer-bottom span{ color:var(--muted) !important; font-weight:600; }

/* =========================================================================
   COOKIES — nowy baner PRO (stary widget hi-cookie ukryty)
   ========================================================================= */
#hi-eu-opt-in,#hi-cookie-box,.opt-in-splash{ display:none !important; }

.pbf-cookie{
  position:fixed; left:50%; transform:translateX(-50%); bottom:20px; z-index:9999;
  width:calc(100% - 32px); max-width:660px;
  display:flex; align-items:center; gap:14px 20px; flex-wrap:wrap;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:14px;
  box-shadow:0 16px 44px rgba(0,0,0,.22); padding:18px 22px;
  font-size:14px; line-height:1.55; transition:opacity .25s ease;
}
.pbf-cookie__txt{ flex:1 1 290px; min-width:220px; }
.pbf-cookie__txt strong{ display:block; margin-bottom:3px; font-size:15px; color:var(--ink); }
.pbf-cookie__txt a{ color:var(--accent-d); font-weight:700; }
.pbf-cookie__txt a:hover{ text-decoration:underline; }
.pbf-cookie__actions{ display:flex; gap:10px; flex:0 0 auto; }
.pbf-cookie__btn{
  appearance:none; -webkit-appearance:none; border:1px solid transparent; cursor:pointer;
  border-radius:9px; padding:11px 22px; font:inherit; font-weight:800; line-height:1;
}
.pbf-cookie__btn--accept{ background:var(--accent); color:var(--on-accent); }
.pbf-cookie__btn--accept:hover{ background:var(--accent-d); }
.pbf-cookie--hide{ opacity:0; pointer-events:none; }
@media (max-width:520px){
  .pbf-cookie{ bottom:0; left:0; right:0; transform:none; width:100%; max-width:none; border-radius:14px 14px 0 0; }
  .pbf-cookie__actions{ width:100%; }
  .pbf-cookie__btn{ flex:1; }
}

/* =========================================================================
   RESPONSYWNOSC
   ========================================================================= */
@media (max-width:1100px){
  .product-catalog-list{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .page-extra-text,.full_blog_post{ padding:22px 18px; }
  .blog_list .blog_post{ padding:18px 16px !important; }
}
@media (max-width:720px){
  .product-catalog-list{ grid-template-columns:1fr; gap:18px; }
  #header .heading h1{ font-size:30px; }
  #header .heading h1.sup{ font-size:26px; }
  .pbf-theme-toggle{ width:38px; height:38px; }
}
/* na malych ekranach baza chowala zdjecia kart (display:none) — w nowych kafelkach je pokazujemy */
@media (max-width:420px){
  .product-catalog-list .product img{ display:block !important; max-width:60%; max-height:120px; margin:16px auto 0; }
  .product-catalog-list .product{ min-height:0; }
}