/* =======================================================
   Technika Grzewcza — LIGHT UI (v4)
   Minimal, modern, animated. Full-width hero + sticky header + enhanced footer.
   Font: Manrope, Active link underline from center, Parallax-ready.
   ======================================================= */

/* === FONT === */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600;700;800&display=swap');

/* === TOKENS === */
:root{
  --tg-bg:#f6f8fa; --tg-panel:#ffffff; --tg-panel-2:#f8fafc; --tg-border:#e6eaee;
  --tg-ink:#0b1220; --tg-ink-soft:#0b1220; --tg-muted:#556066; --tg-muted-2:#6b7280;
  --tg-accent:#e65227; --tg-accent-2:#c53f1a; --tg-accent-3:#ff7a55;

  --tg-radius:16px; --tg-radius-lg:22px;
  --tg-shadow:0 14px 40px rgba(10,16,25,.06);
  --tg-shadow-soft:0 8px 26px rgba(10,16,25,.05);

  --tg-container:1200px; --tg-gutter:24px; --tg-speed:.6s;
  --tg-font:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  --tg-leading:1.6; --tg-h1:clamp(36px,5vw,60px); --tg-h2:clamp(26px,3.2vw,36px); --tg-h3:clamp(20px,2.2vw,24px);
  --tg-text:16px; --tg-small:13px;

  --tg-header-h:72px; /* JS nadpisze realną wysokość (body offset dla fixed header) */
}

/* === RESET / TYPO === */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;background:var(--tg-bg);color:var(--tg-ink);
  font:var(--tg-text)/var(--tg-leading) var(--tg-font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  letter-spacing:0.01em;
  padding-top:var(--tg-header-h); /* offset pod fixed header */
}
a{color:var(--tg-accent);text-decoration:none}
a:hover{opacity:.96}
::selection{background:rgba(230,82,39,.16)}
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(230,82,39,.20);border-radius:10px}

h1,h2,h3{margin:0 0 .6em;line-height:1.2;letter-spacing:-.01em;color:var(--tg-ink-soft)}
h1{font-size:var(--tg-h1);font-weight:800}
h2{font-size:var(--tg-h2);font-weight:800}
h3{font-size:var(--tg-h3);font-weight:700}
p{margin:.4em 0 1.1em;color:var(--tg-muted)}
.lead{font-size:clamp(18px,2.2vw,20px);color:var(--tg-muted)}

.tg-container{max-width:var(--tg-container);margin:0 auto;padding:0 var(--tg-gutter)}
.tg-section{padding:72px 0}
.tg-section-tight{padding:42px 0}
.alignfull{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

/* =======================================================
   HEADER (fixed + glass + shrink + active underline from center)
   ======================================================= */
.tg-header{
  position:fixed;left:0;right:0;top:0;z-index:1000;
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:background .28s ease, border-color .28s ease, box-shadow .28s ease, transform .28s ease;
}
.tg-header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;transition:padding .22s ease;
}
.tg-brand{display:flex;align-items:center;gap:12px}
.tg-brand .logo{width: 260px;height: auto;padding: 15px;}
.tg-brand .name{font-weight:800;letter-spacing:.01em;color:var(--tg-ink)}

.tg-header.is-scrolled{
      background: rgb(255 255 255 / 69%);
  border-bottom-color:var(--tg-border);
  box-shadow:0 8px 20px rgba(10,16,25,.06);
}
.tg-header.is-scrolled .tg-header-inner{padding:15px 0}

/* NAV — underline from center; active via aria-current / current-menu-item / .is-active */
.tg-nav{position:relative;display:flex;gap:8px;flex-wrap:wrap;font-size: 18px;}
.tg-nav a{
  position:relative;color:var(--tg-muted);
  padding:10px 14px;border-radius:12px;
  transition:color .18s ease;
}
.tg-nav a:hover{color:#000}

/* underline (from center to edges) */
.tg-nav a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;
  background: radial-gradient(#e6522796, transparent);
  transform:scaleX(0);transform-origin:center;transition:transform .22s ease;border-radius:2px;
}
.tg-nav a:hover::after{transform:scaleX(1)}

/* ACTIVE STATES */
.tg-nav a[aria-current="page"],
.tg-nav .current-menu-item > a,
.tg-nav .current-menu-ancestor > a,
.tg-nav a.is-active{
  color:#000;
}
.tg-nav a[aria-current="page"]::after,
.tg-nav .current-menu-item > a::after,
.tg-nav .current-menu-ancestor > a::after,
.tg-nav a.is-active::after{
  transform:scaleX(1);
}

/* Wyłącz pływający „pill” jeśli był dołączony wcześniej JS-em */
.tg-nav .nav-cursor{display:none!important}

/* CTA w headerze */
.tg-cta-btn .wp-block-button__link{
  border-radius:12px;padding:10px 14px;font-weight:800;
  background:var(--tg-accent);color:#fff;
  box-shadow:0 8px 16px rgba(230,82,39,.14);
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.tg-cta-btn .wp-block-button__link:hover{
  filter:brightness(1.05);transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(230,82,39,.20);
}

/* =======================================================
   FULL HERO (alignfull + parallax-ready)
   ======================================================= */
.tg-hero--full{
  position:relative;overflow:hidden;
     background: radial-gradient(900px 520px at 15% -10%, rgba(230, 82, 39, .14), rgba(230, 82, 39, 0) 60%), radial-gradient(1100px 600px at -10% -20%, rgba(230, 82, 39, .08), rgba(230, 82, 39, 0) 65%);    box-shadow: 0 10px 30px rgb(10 16 25 / 0%) inset, 0 -6px 24px rgb(10 16 25 / 10%);
}
.tg-hero__inner{padding:clamp(90px,13vw,160px) 0 clamp(48px,8vw,96px)}
.tg-eyebrow{color:var(--tg-accent);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:16px;margin-bottom:10px}
.parallax-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(800px 500px at 80% -15%, rgba(230,82,39,.20), rgba(230,82,39,0) 55%)
}
.tg-hero--full .tg-container>*{position:relative;z-index:1}
/* [data-parallax] ustawiasz w HTML, efekt jest nadawany JS-em */

/* =======================================================
   CARDS / OFFER / REALIZATIONS
   ======================================================= */
.tg-card{
  background:var(--tg-panel);border:1px solid var(--tg-border);
  border-radius:var(--tg-radius);padding:24px;box-shadow:var(--tg-shadow-soft);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.card-raise:hover{
  transform:translateY(-4px);border-color:rgba(230,82,39,.45);
  box-shadow:0 14px 32px rgba(10,16,25,.08);
}
.tg-card .wp-block-post-title a{color:var(--tg-ink)!important}
.tg-card .wp-block-post-title a:hover{color:var(--tg-accent)!important}
.products-grid .wp-block-post-featured-image{border-radius:12px;overflow:hidden}
.price{color:var(--tg-accent);font-weight:800}

/* =======================================================
   CTA
   ======================================================= */
.tg-cta{
  background:var(--tg-panel);border:1px solid var(--tg-border);border-radius:22px;padding:26px;
  position:relative;overflow:hidden;box-shadow:var(--tg-shadow);
}
.tg-cta::after{
  content:"";position:absolute;right:-10%;bottom:-38%;width:820px;height:420px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(230,82,39,.14), rgba(230,82,39,0) 70%);filter:blur(30px);
}
.tg-cta .tel{font-size:28px;font-weight:900;color:var(--tg-accent)}

/* =======================================================
   BUTTONS
   ======================================================= */
.wp-block-button .wp-block-button__link{
  border-radius:14px;padding:12px 18px;font-weight:800;
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}
.btn--accent .wp-block-button__link{background:var(--tg-accent);color:#fff;box-shadow:0 8px 16px rgba(230,82,39,.18)}
.btn--accent .wp-block-button__link:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn--ghost .wp-block-button__link{background:#fff;border:1.5px solid var(--tg-border);color:#0b1220}
.btn--ghost .wp-block-button__link:hover{border-color:var(--tg-accent);color:var(--tg-accent);transform:translateY(-1px)}

/* =======================================================
   TABLES / FORMS / PAGINATION
   ======================================================= */
table{width:100%;border-collapse:separate;border-spacing:0 8px}
th,td{padding:12px 16px;background:var(--tg-panel);border:1px solid var(--tg-border)}
th{text-align:left;color:#0b1220}
input,select,textarea{
  background:#fff;color:#0b1220;border:1px solid var(--tg-border);
  border-radius:12px;padding:12px 14px;width:100%;
}
input::placeholder,textarea::placeholder{color:#97a0a8}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(230,82,39,.20);border-color:var(--tg-accent)}

.wp-block-query-pagination{
  display:flex;gap:8px;align-items:center;justify-content:center;margin-top:22px;
}
.wp-block-query-pagination a,.wp-block-query-pagination span{
  padding:8px 12px;border-radius:10px;border:1px solid var(--tg-border);
  color:#0b1220;background:#fff;
}
.wp-block-query-pagination a:hover{border-color:var(--tg-accent);color:var(--tg-accent)}

/* =======================================================
   FOOTER (enhanced + animated accent + soft pattern)
   ======================================================= */
.tg-footer{margin-top:64px;position:relative}
.tg-footer-top{
  padding:56px 0;background:var(--tg-panel);position:relative;isolation:isolate;
  border-top:1px solid var(--tg-border);border-bottom:1px solid var(--tg-border);
}
/* animowana linia akcentowa u góry stopki */
.tg-footer-top::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:3px;z-index:1;
  background:linear-gradient(90deg,var(--tg-accent),var(--tg-accent-3),var(--tg-accent));
  background-size:200% 100%;animation:tg-accent-move 8s linear infinite;
}
@keyframes tg-accent-move{0%{background-position:0% 50%}100%{background-position:200% 50%}}
/* delikatny pattern tła */
.tg-footer-top::after{
  content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;
  background: radial-gradient(#e6522796, transparent);
  transform:scaleX(0);transform-origin:center;transition:transform .22s ease;border-radius:2px;
}
.tg-footer .tg-container{position:relative;z-index:2}

/* kolumny */
.tg-footer-cols{display:grid;gap:28px}
@media (min-width:981px){.tg-footer-cols{grid-template-columns:2fr 1fr 1fr}}
.fcol{display:flex;flex-direction:column;gap:8px}
.f-brand{margin-bottom:8px}
.f-head{margin:0 0 10px;font-weight:800;color:#0b1220}
.f-text{color:var(--tg-muted);margin-block-start: 0px;}
.f-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.f-link{text-decoration:none;position:relative;display:inline-block;transition:transform .2s ease,color .2s ease}
.f-link:hover{transform:translateY(-1px)}
.f-link::after{
 content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;
  background: radial-gradient(#e6522796, transparent);
  transform:scaleX(0);transform-origin:center;transition:transform .22s ease;border-radius:2px;
}
.f-link:hover::after{transform:scaleX(1)}

.tg-footer-bottom{padding:16px 0;background:var(--tg-panel-2);margin-block-start: 0px;}
.tg-footer-bottom .tg-container{display:flex;align-items:center;justify-content:space-between}
.tiny{color:var(--tg-muted-2);font-size:var(--tg-small)}

/* =======================================================
   REVEAL (scroll-in)
   ======================================================= */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(10px)}
  .reveal.in{opacity:1;transform:none;transition:opacity var(--tg-speed) ease, transform var(--tg-speed) ease}
}

/* =======================================================
   UTILITIES
   ======================================================= */
.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}
.mt-8{margin-top:8px}.mb-8{margin-bottom:8px}
.mt-16{margin-top:16px}.mb-16{margin-bottom:16px}
.mt-24{margin-top:24px}.mb-24{margin-bottom:24px}
.center{text-align:center}

/* === HEADER NAV: underline od środka (radial) + ACTIVE zawsze podkreślony === */
.tg-nav a{
  position:relative;
  color:var(--tg-muted);
  padding:10px 14px;
  border-radius:12px;
  transition:color .18s ease;
}
.tg-nav a:hover{ color:#000 }

/* Używamy Twojego wariantu: */
.tg-nav a::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:6px; height:2px;
  background: radial-gradient(#e6522796, transparent);
  transform: scaleX(0);
  transform-origin: center; /* start od środka */
  transition: transform .22s ease;
  border-radius: 2px;
}
.tg-nav a:hover::after{ transform: scaleX(1); }

/* ACTIVE = działa z aria-current / current-menu-* / .is-active */
.tg-nav a[aria-current="page"],
.tg-nav .current-menu-item > a,
.tg-nav .current-menu-ancestor > a,
.tg-nav a.is-active{
  color:#000;
}
.tg-nav a[aria-current="page"]::after,
.tg-nav .current-menu-item > a::after,
.tg-nav .current-menu-ancestor > a::after,
.tg-nav a.is-active::after{
  transform: scaleX(1) !important;  /* zawsze widać linię na aktywnej */
}

/* Dla pewności wyłączamy ewentualny „pill” z wcześniejszej wersji */
.tg-nav .nav-cursor{ display:none !important; }

/* === STOPKA: identyczny hover jak w headerze (radial, od środka) === */
.f-link{
  position:relative;
  color:#0b1220;
  text-decoration:none;
  display:inline-block;
  transition: transform .2s ease, color .2s ease;
}
.f-link:hover{transform: translateY(-1px); }

.f-link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px; height:2px;
  background: radial-gradient(#e6522796, transparent);
  transform: scaleX(0);
  transform-origin: center;     /* start od środka */
  transition: transform .22s ease;
  border-radius: 2px;
}
.f-link:hover::after{ transform: scaleX(1); }

/* (opcjonalnie) aktywny link w stopce, jeśli chcesz go wyróżnić ręcznie klasą */
.f-link.is-active::after{ transform: scaleX(1); }

/* HERO bez przerwy pod fixed headerem */
.tg-hero--flush{
  /* wysuń hero pod header, ale zachowaj oddech wewnątrz */
  margin-top: calc(var(--tg-header-h) * -1);
}
.tg-hero--flush .tg-hero__inner{
  /* dodajemy header height do istniejącego padding-top */
  padding-top: calc(var(--tg-header-h) + clamp(90px,13vw,160px));
}

/* Baza linku */
.tg-nav a,
.tg-nav .wp-block-navigation-item__content{
  position:relative;
  color:var(--tg-muted);
  padding:10px 14px;
  border-radius:12px;
  transition:color .18s ease;
}

/* Hover: kolor + linia od środka (TWÓJ wariant) */
.tg-nav a:hover,
.tg-nav .wp-block-navigation-item__content:hover{
  color:#000;
}
.tg-nav a::after,
.tg-nav .wp-block-navigation-item__content::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:6px; height:2px;
  background: radial-gradient(#e6522796, transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
  border-radius: 2px;
}
.tg-nav a:hover::after,
.tg-nav .wp-block-navigation-item__content:hover::after{
  transform: scaleX(1);
}

/* ACTIVE: aria-current / current-menu-* / .is-active */
/* — obejmujemy zarówno <a>, jak i treść linku Gutenberga */
.tg-nav a[aria-current="page"],
.tg-nav .current-menu-item > a,
.tg-nav .current-menu-ancestor > a,
.tg-nav a.is-active,
.tg-nav .wp-block-navigation-item__content[aria-current="page"],
.tg-nav .current-menu-item > .wp-block-navigation-item__content,
.tg-nav .current-menu-ancestor > .wp-block-navigation-item__content,
.tg-nav .wp-block-navigation-item__content.is-active{
  color:#000;
}
.tg-nav a[aria-current="page"]::after,
.tg-nav .current-menu-item > a::after,
.tg-nav .current-menu-ancestor > a::after,
.tg-nav a.is-active::after,
.tg-nav .wp-block-navigation-item__content[aria-current="page"]::after,
.tg-nav .current-menu-item > .wp-block-navigation-item__content::after,
.tg-nav .current-menu-ancestor > .wp-block-navigation-item__content::after,
.tg-nav .wp-block-navigation-item__content.is-active::after{
  transform: scaleX(1) !important;
}

/* Na wszelki wypadek wyłącz dawny „pill” jeżeli gdzieś został */
.tg-nav .nav-cursor{display:none!important;}

  
 /* Header nav – hover i active (linia od środka, radial) */
.tg-nav a,
.tg-nav .wp-block-navigation-item__content{
  position:relative;
  color:var(--tg-muted);
  padding:10px 14px;
  border-radius:12px;
  transition:color .18s ease;
}
.tg-nav a:hover,
.tg-nav .wp-block-navigation-item__content:hover{
  color:#000;
}
.tg-nav a::after,
.tg-nav .wp-block-navigation-item__content::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:6px; height:2px;
  background: radial-gradient(#e6522796, transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
  border-radius: 2px;
}
.tg-nav a:hover::after,
.tg-nav .wp-block-navigation-item__content:hover::after{
  transform: scaleX(1);
}

/* ACTIVE – aria-current + .current-* + JS .is-active */
.tg-nav a[aria-current="page"],
.tg-nav .current-menu-item > a,
.tg-nav .current-menu-ancestor > a,
.tg-nav .wp-block-navigation-item__content[aria-current="page"],
.tg-nav .current-menu-item > .wp-block-navigation-item__content,
.tg-nav .current-menu-ancestor > .wp-block-navigation-item__content,
.tg-nav a.is-active,
.tg-nav .wp-block-navigation-item.is-active > a,
.tg-nav .wp-block-navigation-item.is-active > .wp-block-navigation-item__content{
  color:#000;
}
.tg-nav a[aria-current="page"]::after,
.tg-nav .current-menu-item > a::after,
.tg-nav .current-menu-ancestor > a::after,
.tg-nav .wp-block-navigation-item__content[aria-current="page"]::after,
.tg-nav .current-menu-item > .wp-block-navigation-item__content::after,
.tg-nav .current-menu-ancestor > .wp-block-navigation-item__content::after,
.tg-nav a.is-active::after,
.tg-nav .wp-block-navigation-item.is-active > a::after,
.tg-nav .wp-block-navigation-item.is-active > .wp-block-navigation-item__content::after{
  transform: scaleX(1) !important;
}

/* na wszelki wypadek wyłącz stary „pill” */
.tg-nav .nav-cursor{display:none!important;}

/* Footer: centrowanie "Oferta Techniki Grzewczej" (kolumna 3)
   i wyrównanie do prawej "Szybkie linki" (kolumna 4) */
.tg-footer-cols > .fcol:nth-child(2) {
  align-items: center;           /* środek */
}
.tg-footer-cols > .fcol:nth-child(2) .f-list {
  text-align: center;
}
.tg-footer-cols > .fcol:nth-child(2) .f-link {
  display: inline-block;         /* żeby underline miał własną szerokość */
  margin-left: auto;
  margin-right: auto;
}

/* Kolumna 4: do prawej */
.tg-footer-cols > .fcol:nth-child(3) {
  align-items: flex-end;         /* prawa krawędź */
}
.tg-footer-cols > .fcol:nth-child(3) .f-list {
  text-align: right;
}
.tg-footer-cols > .fcol:nth-child(3) .f-link {
  display: inline-block;
  margin-left: auto;             /* podkreślenie trzyma się szerokości linku */
}

/* (Opcjonalnie) Na wąskich ekranach wróć do lewego wyrównania dla czytelności */
@media (max-width: 980px) {
  .tg-footer-cols > .fcol:nth-child(2),
  .tg-footer-cols > .fcol:nth-child(3) {
    align-items: center;
  }
  .tg-footer-cols > .fcol:nth-child(2) .f-list,
  .tg-footer-cols > .fcol:nth-child(3) .f-list {
    text-align: center;
  }
  .tg-footer-cols > .fcol:nth-child(2) .f-link,
  .tg-footer-cols > .fcol:nth-child(3) .f-link {
    margin-left: 0;
    margin-right: 0;
  }
  p.f-text {
    text-align: center;}
}

/* === FOOTER: GLASS + SLIDE-UP (bez zmiany HTML) === */

/* Warstwa „glass” dla sekcji stopki */
.tg-footer,
.tg-footer-top,
.tg-footer-bottom{
  isolation:isolate;
}

.tg-footer-top,
.tg-footer-bottom{
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 10px 30px rgb(10 16 25 / 3%) inset, 0 -6px 24px rgb(10 16 25 / 3%);
}

/* Zaokrąglony „cap” u góry sekcji top */
.tg-footer-top{
  position: relative;
  overflow: hidden;
}

/* Subtelny akcentowy „glow” wewnątrz glassa */
.tg-footer-top::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:5px; z-index:0;
  background: linear-gradient(90deg, rgba(230, 82, 39, 0.18), rgba(230, 82, 39, 0.04), rgb(255 57 0 / 52%));
}

/* Delikatny pattern (naprawia wcześniejszą kolizję z ::after) */
.tg-footer-top::after{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.22;
  background:
    radial-gradient(2px 2px at 0 0, rgba(10,16,25,.10) 50%, transparent 50%) 0 0/24px 24px,
    radial-gradient(2px 2px at 12px 12px, rgba(10,16,25,.06) 50%, transparent 50%) 0 0/24px 24px;
}

/* Treść ponad efektami */
.tg-footer .tg-container{ position:relative; z-index:2 }

/* Pasek dolny też glass + delikatny separator */
.tg-footer-bottom{
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  position: relative;
}
.tg-footer-bottom::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg, rgba(10,16,25,.08), rgba(10,16,25,0), rgba(10,16,25,.08));
}

/* SLIDE-UP animacja całej stopki */
.tg-footer{
  transform: translate3d(0, 40px, 0);
  opacity: 0;
  transition: transform .6s ease, opacity .6s ease;
}
.tg-footer.is-shown{
  transform: none;
  opacity: 1;
}

/* Jeżeli wolisz, by „wjeżdżały” tylko sekcje wewnątrz, odkomentuj: */
/*
.tg-footer-top, .tg-footer-bottom{
  transform: translate3d(0, 30px, 0);
  opacity: 0;
  transition: transform .55s ease, opacity .55s ease;
}
.tg-footer.is-shown .tg-footer-top,
.tg-footer.is-shown .tg-footer-bottom{
  transform:none; opacity:1;
}
*/

/* Prefer-reduced-motion: bez animacji dla osób z ograniczeniami ruchu */
@media (prefers-reduced-motion: reduce){
  .tg-footer,
  .tg-footer-top, .tg-footer-bottom{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* --- (opcjonalnie) Jeżeli porządek kolumn wrócił do: 
   1) Brand/Kontakt  2) Nawigacja  3) Oferta TG  4) Szybkie linki,
   i chcesz center dla 3. oraz right dla 4., użyj poniższego: --- */
/*
.tg-footer-cols > .fcol:nth-child(3){ align-items:center; }
.tg-footer-cols > .fcol:nth-child(3) .f-list{ text-align:center; }
.tg-footer-cols > .fcol:nth-child(3) .f-link{ display:inline-block; margin-inline:auto; }

.tg-footer-cols > .fcol:nth-child(4){ align-items:flex-end; }
.tg-footer-cols > .fcol:nth-child(4) .f-list{ text-align:right; }
.tg-footer-cols > .fcol:nth-child(4) .f-link{ display:inline-block; margin-left:auto; }
@media (max-width:980px){
  .tg-footer-cols > .fcol:nth-child(3),
  .tg-footer-cols > .fcol:nth-child(4){ align-items:flex-start; }
  .tg-footer-cols > .fcol:nth-child(3) .f-list,
  .tg-footer-cols > .fcol:nth-child(4) .f-list{ text-align:left; }
  .tg-footer-cols > .fcol:nth-child(3) .f-link,
  .tg-footer-cols > .fcol:nth-child(4) .f-link{ margin:0; }
}
*/

/* === HERO: żywy pomarańczowy gradient (ciągły ruch) === */
/* Nie zmieniamy HTML — dokładamy warstwę ::before wewnątrz .parallax-bg.
   JS od paralaksy dalej może poruszać .parallax-bg, a my animujemy ::before,
   więc transformy się komponują (brak konfliktu). */

.parallax-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  /* istniejące tło może zostać — my dodamy dodatkową, animowaną warstwę */
}


/* drobny połysk „wędrujący” po krawędzi hero (opcjonalny) */
.tg-hero--full::after{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 520px at 85% -20%, rgba(230,82,39,.10), rgba(230,82,39,0) 65%);
  animation: tg-hero-specular 36s ease-in-out infinite alternate;
  opacity:.55;
  filter: blur(2px);
}

/* Keyframes — płynny drift/zoom */
@keyframes tg-hero-glow-drift{
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.00); opacity:.92; }
  35%  { transform: translate3d( 1%,  2%, 0) scale(1.04); opacity:.98; }
  70%  { transform: translate3d( 3%, -1%, 0) scale(1.07); opacity:.96; }
  100% { transform: translate3d(-1%,  1%, 0) scale(1.10); opacity:.95; }
}
@keyframes tg-hero-specular{
  0%   { transform: translate3d(0,0,0) scale(1.00); opacity:.45; }
  50%  { transform: translate3d(-2%,1%,0) scale(1.03); opacity:.60; }
  100% { transform: translate3d(2%,-1%,0) scale(1.06); opacity:.50; }
}

/* Szanuj preferencje: bez animacji dla reduced-motion */
@media (prefers-reduced-motion: reduce){
  .parallax-bg::before,
  .tg-hero--full::after{
    animation: none !important;
    transform: none !important;
  }
}

/* === HERO: żywy, poruszający się pomarańczowy glow (podwójne zabezpieczenie) === */

/* 1) Animowany PAN/Z0OM na tle .parallax-bg (działa nawet bez ::before) */
.parallax-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
 background: radial-gradient(1200px 520px at 75% 70%, #e6522724, rgba(230, 82, 39, 0) 60%), radial-gradient(1100px 600px at -10% -20%, rgba(230, 82, 39, .08), rgba(230, 82, 39, 0) 65%);
  background-repeat:no-repeat;
  /* klucz: większy rozmiar i animowane pozycje */
  background-size: 110% 110%, 120% 120%;
  animation: tg-hero-bg-pan 26s ease-in-out infinite alternate;
  will-change: background-position, background-size, transform;
  transform: translateZ(0);
}

/* delikatna warstwa specular (opcjonalnie) */
.tg-hero--full::after{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(900px 520px at 85% -20%, rgba(230,82,39,.10), rgba(230,82,39,0) 65%);
  animation: tg-hero-specular 36s ease-in-out infinite alternate;
  opacity:.55; filter: blur(2px);
}

/* KEYFRAMES: ruch tła (pan/zoom) */
@keyframes tg-hero-bg-pan{
  0%   { background-position: 0% 0%,     100% 0%;     background-size:110% 110%, 120% 120%; }
  50%  { background-position: 50% 10%,   60% -5%;     background-size:115% 115%, 123% 123%; }
  100% { background-position: 100% -5%,  0%  8%;      background-size:120% 120%, 126% 126%; }
}

/* KEYFRAMES: drift warstwy ::before */
@keyframes tg-hero-glow-drift{
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.00); opacity:.92; }
  35%  { transform: translate3d( 1%,  2%, 0) scale(1.04); opacity:.98; }
  70%  { transform: translate3d( 3%, -1%, 0) scale(1.07); opacity:.96; }
  100% { transform: translate3d(-1%,  1%, 0) scale(1.10); opacity:.95; }
}

/* KEYFRAMES: delikatny specular */
@keyframes tg-hero-specular{
  0%   { transform: translate3d(0,0,0) scale(1.00); opacity:.45; }
  50%  { transform: translate3d(-2%,1%,0) scale(1.03); opacity:.60; }
  100% { transform: translate3d(2%,-1%,0) scale(1.06); opacity:.50; }
}

/* Szanuj preferencje: */
@media (prefers-reduced-motion: reduce){
  .parallax-bg, .parallax-bg::before, .tg-hero--full::after{
    animation: none !important;
    transform: none !important;
  }
}

/* Domyślnie masz offset pod fixed headerem */
body { padding-top: var(--tg-header-h); }

/* Na podstronach zdejmij offset */
body:not(.home) { padding-top: 0 !important; }

/* Podstrony: usuń odstęp (block gap) między headerem a HERO */
body:not(.home) .wp-site-blocks > .wp-block-template-part + .wp-block-template-part{
  margin-block-start: 0 !important;
}

/* Gdy HERO nie jest template-partem, tylko zwykłym groupem */
body:not(.home) header.wp-block-template-part + .tg-hero,
body:not(.home) header.wp-block-template-part + .wp-block-group.tg-hero{
  margin-block-start: 0 !important;
}

/* Na wszelki wypadek: sam HERO bez górnego marginesu */
body:not(.home) .tg-hero,
body:not(.home) .tg-hero--full,
body:not(.home) .tg-hero--flush{
  margin-block-start: 0 !important;
  margin-top: 0 !important; /* jeśli któryś builder podmienia na margin-top */
}

/* ——— PODSTRONY: usuń każdy top-gap między HEADER a HERO ——— */

/* 0) Wyłącz ewentualny padding kontenera root */
body:not(.home) .wp-site-blocks{
  padding-top: 0 !important;
}

/* 1) Najczęstszy przypadek: header (template-part) + hero (template-part) */
body:not(.home) .wp-site-blocks > header.wp-block-template-part + section.wp-block-template-part{
  margin-block-start: 0 !important;
}

/* 2) Gdy HERO jest zwykłym groupem (a nie template-partem) */
body:not(.home) .wp-site-blocks > header.wp-block-template-part + .wp-block-group.tg-hero{
  margin-block-start: 0 !important;
}

/* 3) Dodatkowo: pierwszy i drugi element w drzewie (na wypadek custom układu) */
body:not(.home) .wp-site-blocks > *:first-child{
  margin-block-start: 0 !important;
}
body:not(.home) .wp-site-blocks > *:first-child + *{
  margin-block-start: 0 !important;
}

/* 4) Układy constrained/flow (WordPress dodaje gap przez te klasy) */
body:not(.home) .is-layout-constrained > * + *{
  margin-block-start: 0 !important;
}
body:not(.home) .is-layout-flow > * + *{
  margin-block-start: 0 !important;
}

/* 5) Sam HERO też bez marginesu na górze – dla pewności */
body:not(.home) .tg-hero,
body:not(.home) .tg-hero--full,
body:not(.home) .tg-hero--flush{
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* CTA: centrum wyrównania treści */
.tg-cta{
  text-align: center;
}
.tg-cta h3,
.tg-cta p{
  margin-left: auto;
  margin-right: auto;
}
.tg-cta a{
  display: inline-block; /* żeby underline i hover trzymały szerokość linku */
}


/* "Kim jesteśmy?" — odstęp między kolumnami */
.about-split{
  gap: 40px;            /* odstęp w poziomie i pionie (gdy się zwiną na mobile) */
}

/* na węższych ekranach można zmniejszyć, żeby było czytelniej */
@media (max-width: 980px){
  .about-split{ gap: 28px; }
}

/* Subnav Oferty */
.tg-subnav{
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--tg-border);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(10,16,25,.06);
}
.tg-subnav__link{
  position: relative;
  color: var(--tg-muted);
  padding: 8px 12px;
  border-radius: 10px;
  transition: color .18s ease;
}
.tg-subnav__link:hover{ color:#000; }
.tg-subnav__link::after{
  content:""; position:absolute; left:8px; right:8px; bottom:4px; height:2px;
  background: radial-gradient(#e6522796, transparent);
  transform: scaleX(0); transform-origin: center; transition: transform .22s ease; border-radius:2px;
}
.tg-subnav__link:hover::after{ transform: scaleX(1); }

/* (opcjonalnie) przyklej subnav do górnej części sekcji */
@media (min-width: 980px){
  .tg-subnav{ position: sticky; top: calc(var(--tg-header-h) + 12px); z-index: 10; }
}

[id] { scroll-margin-top: calc(var(--tg-header-h) + 64px); }

 /* === Produkty: pasek narzędzi (sort + per page) === */
.prod-toolbar{
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--tg-border);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(10,16,25,.06);
}
.prod-toolbar__label{
  font-weight: 700;
  color: #0b1220;
  margin-right: 6px;
}
.pill-link{
  display:inline-block;
  padding: 8px 12px;
  border: 1px solid var(--tg-border);
  border-radius: 999px;
  color: var(--tg-muted);
  text-decoration:none;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
  position:relative;
}
.pill-link:hover{ color:#000; border-color: var(--tg-accent); transform: translateY(-1px); }
.pill-link::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px;
  background: radial-gradient(#e6522796, transparent);
  transform: scaleX(0); transform-origin: center; transition: transform .22s ease; border-radius:2px;
}
.pill-link:hover::after{ transform: scaleX(1); }

/* Wyrównanie elementów w toolbarze */
.prod-toolbar__left, .prod-toolbar__right{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* === Produkty: karty i siatka === */
.products-grid .wp-block-post-template{ gap: 24px; }
.prod-thumb img{ display:block; width:100%; height:auto; border-radius:12px; }

.tg-card .wp-block-post-title{ margin-top: 12px; margin-bottom: 6px; }
.tg-card .wp-block-post-title a{ color:#0b1220 !important; }
.tg-card .wp-block-post-title a:hover{ color: var(--tg-accent) !important; }

.price{ color: var(--tg-accent); font-weight: 800; }

/* Paginacja spójna z całością */
.wp-block-query-pagination a, .wp-block-query-pagination span{
  padding:8px 12px; border-radius:10px; border:1px solid var(--tg-border);
  background:#fff; color:#0b1220;
}
.wp-block-query-pagination a:hover{ border-color: var(--tg-accent); color: var(--tg-accent); }

/* === Produkty: równe karty i stałe miniatury === */

/* Grid 3 kolumny (bez względu na domyślne ustawienia bloku) */
.products-grid .wp-block-post-template{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:24px;
}

/* Każdy item = flex, karta wypełnia 100% wysokości */
.products-grid .wp-block-post-template > li{
  display:flex;
}
.prod-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Miniatura z ratio i cover (spójne wysokości) */
.prod-thumb{
  border-radius:12px; overflow:hidden; margin-bottom:12px;
  aspect-ratio: 4 / 3;
}
.prod-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Tytuł + cena u góry, excerpt przyklejony do dołu */
.prod-title{ margin-top:8px; margin-bottom:6px; }
.prod-price{ margin:0 0 10px; }
.prod-excerpt{ margin-top:auto; }

/* Paginacja spójna */
.wp-block-query-pagination a, .wp-block-query-pagination span{
  padding:8px 12px; border-radius:10px; border:1px solid var(--tg-border);
  background:#fff; color:#0b1220;
}
.wp-block-query-pagination a:hover{ border-color: var(--tg-accent); color: var(--tg-accent); }

/* === Pasek sortowania: bez podkreślenia przy hoverze === */
.prod-toolbar .pill-link::after{ display:none !important; }
/* Możesz zostawić zmianę koloru/obrysu i delikatny „podskok” */
.prod-toolbar .pill-link:hover{
  color:#000; border-color: var(--tg-accent); transform: translateY(-1px);
}

/* RWD: na tablet/telefon dwie/ jedna kolumna */
@media (max-width: 980px){
  .products-grid .wp-block-post-template{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 640px){
  .products-grid .wp-block-post-template{
    grid-template-columns: 1fr;
  }
}
  
/* HERO: przyciski już masz globalnie (btn--accent/btn--ghost) */

/* === Products grid: zawsze 3 równe kolumny === */
.products-grid .wp-block-post-template{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap:24px !important;
}

/* WordPress potrafi nadawać width/inline-style kolumnom – zerujemy */
.products-grid .wp-block-post-template > li{
  width:auto !important;
  min-width:0;
  display:flex; /* pozwala karcie wypełnić wysokość */
}

/* Karta = pełna wysokość */
.prod-card{ display:flex; flex-direction:column; height:100%; width: 100%;}

/* Miniatury: stałe ratio i spójne kadrowanie */
.prod-thumb{ aspect-ratio: 4 / 3; border-radius:12px; overflow:hidden; margin-bottom:12px; }
.prod-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Tytuł + cena u góry, excerpt przyklejony do dołu */
.prod-title{ margin-top:8px; margin-bottom:6px; }
.prod-price{ margin:0 0 10px; }
.prod-excerpt{ margin-top:auto; }

/* Paginacja spójna */
.wp-block-query-pagination a, .wp-block-query-pagination span{
  padding:8px 12px; border-radius:10px; border:1px solid var(--tg-border);
  background:#fff; color:#0b1220;
}
.wp-block-query-pagination a:hover{ border-color: var(--tg-accent); color: var(--tg-accent); }

/* Toolbar: bez podkreślenia na hoverze */
.prod-toolbar .pill-link::after{ display:none !important; }
.prod-toolbar .pill-link:hover{
  color:#000; border-color: var(--tg-accent); transform: translateY(-1px);
}

/* RWD */
@media (max-width: 980px){
  .products-grid .wp-block-post-template{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 640px){
  .products-grid .wp-block-post-template{ grid-template-columns: 1fr !important; }
}

/* ——— PRODUKTY: 3 równe kolumny niezależnie od stylów Gutenberga ——— */

/* Wymuś grid, 3 kolumny */
.products-grid .wp-block-post-template,
.products-grid .wp-block-post-template.is-layout-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px !important;
  row-gap: 24px !important;
}

/* Dzieci (LI) nie mogą wnosić własnej szerokości */
.products-grid .wp-block-post-template > li{
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  display: flex;              /* karta wypełnia wysokość */
}

/* Karta = pełna wysokość, spójne thumby */
.prod-card{ display:flex; flex-direction:column; height:100%; }
.prod-thumb{ aspect-ratio: 4 / 3; margin-bottom:12px; border-radius:12px; overflow:hidden; }
.prod-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Treść */
.prod-title{ margin:8px 0 6px; }
.prod-price{ margin:0 0 10px; }
.prod-excerpt{ margin-top:auto; }

/* RWD */
@media (max-width: 980px){
  .products-grid .wp-block-post-template{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 640px){
  .products-grid .wp-block-post-template{ grid-template-columns: 1fr !important; }
}

/* === Realizacje: grid 3 równych kolumn === */
.projects-grid .wp-block-post-template{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap:24px !important;
}
.projects-grid .wp-block-post-template > li{
  display:flex; width:auto !important; max-width:none !important; flex:0 0 auto !important; margin:0 !important;
}
.proj-card{ display:flex; flex-direction:column; height:100%; }

/* Miniatura 4:3 + cover */
.proj-thumb{ aspect-ratio: 4 / 3; border-radius:12px; overflow:hidden; margin-bottom:12px; }
.proj-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.proj-title{ margin:8px 0 6px; }
.projects-grid .wp-block-post-excerpt{ margin-top:auto; }

/* Pasek narzędzi (chipsy) */
.proj-toolbar{
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--tg-border);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(10,16,25,.06);
}
.proj-toolbar__label{ font-weight:700; color:#0b1220; margin-right:6px; }
.proj-toolbar__left, .proj-toolbar__right{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.proj-toolbar .pill-link::after{ display:none !important; } /* bez linii podkreślenia */
.proj-toolbar .pill-link:hover{ color:#000; border-color: var(--tg-accent); transform: translateY(-1px); }

/* RWD */
@media (max-width: 980px){
  .projects-grid .wp-block-post-template{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 640px){
  .projects-grid .wp-block-post-template{ grid-template-columns: 1fr !important; }
}

/* ===== Realizacje: równe kafelki ===== */
:root{
  /* możesz podbić/obniżyć w razie potrzeby */
  --proj-card-minh: 200px;
}

.projects-grid .wp-block-post-template{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap:24px !important;
  align-items:stretch; /* rozciągnij kolumny */
}

/* każdy item = flex, karta wypełnia 100% */
.projects-grid .wp-block-post-template > li{ display:flex; }
.proj-card{
  display:flex; flex-direction:column;
  height:100%;
  min-height: var(--proj-card-minh); /* równa wysokość kafelków */
  position:relative;
}

/* jeśli w kartach użyjesz obrazków */
.proj-thumb{ aspect-ratio:4/3; border-radius:12px; overflow:hidden; margin-bottom:12px; }
.proj-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.proj-title{ margin:8px 0 6px; }
.projects-grid .wp-block-post-excerpt{ margin-top:auto; }

/* Hover: delikatny, by nie zachodził na nagłówki powyżej */
.tg-card.card-raise{ transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;}
.tg-card.card-raise:hover{
  transform: translateY(-2px); /* było większe – zmniejszamy */
  box-shadow: 0 14px 32px rgba(10,16,25,.08);
  border-color: rgba(230,82,39,.45);
  z-index: 1; /* rysuj nad sąsiadami, ale nie „wchodź” na nagłówek dzięki odstępowi niżej */
}

/* ===== Odstęp pod nagłówkami sekcji (żeby hover nie nachodził) ===== */
.tg-container.tg-section > h2 + .projects-grid,
.tg-container.tg-section > h3 + .projects-grid{
  margin-top: 12px;  /* bezpieczny bufor nad gridem */
}

/* Alternatywnie (jeśli gdzieś grid jest wewnątrz grupy) */
.tg-container.tg-section h2 + .wp-block-group.projects-grid,
.tg-container.tg-section h3 + .wp-block-group.projects-grid{
  margin-top: 12px;
}

/* RWD: dwie/ jedna kolumna */
@media (max-width: 980px){
  .projects-grid .wp-block-post-template{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  :root{ --proj-card-minh: 200px; }
}
@media (max-width: 640px){
  .projects-grid .wp-block-post-template{ grid-template-columns: 1fr !important; }
  :root{ --proj-card-minh: 180px; }
}

.realizacje
{
  margin-bottom: 20px;
}

/* Kafelki kontaktu korzystają z projects-grid → mamy równe 3 kolumny już globalnie */

/* Formularz */
.tg-form{ background:var(--tg-panel); border:1px solid var(--tg-border); border-radius:22px; padding:24px; box-shadow:var(--tg-shadow); }
.tg-form .btn-submit{
  display:inline-block; border:none; cursor:pointer; margin-top:8px;
  background:var(--tg-accent); color:#fff; border-radius:14px; padding:12px 18px; font-weight:800;
  box-shadow:0 8px 16px rgba(230,82,39,.18); transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.tg-form .btn-submit:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 10px 22px rgba(230,82,39,.20); }

.tg-form .tg-form-grid{
  display:grid; gap:14px; grid-template-columns: repeat(2, minmax(0,1fr));
}
.tg-form .tg-field--full{ grid-column: 1 / -1; }
.tg-form label{ display:block; font-weight:700; color:#0b1220; margin:0 0 6px; }
.tg-check{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--tg-muted); }
.tg-alert{ margin-top:12px; padding:12px 14px; border-radius:12px; border:1px solid var(--tg-border); }
.tg-success{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.tg-error{ background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }

@media (max-width: 780px){
  .tg-form .tg-form-grid{ grid-template-columns: 1fr; }
}

/* Mapa */
.tg-map-wrap{ width:100%; height: 420px; border-top:1px solid var(--tg-border); border-bottom:1px solid var(--tg-border); }
.tg-map-wrap iframe{ width:100%; height:100%; display:block; border:0; }

.tg-alert{ margin-top:12px; padding:12px 14px; border-radius:12px; border:1px solid var(--tg-border); }
.tg-success{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.tg-error{   background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }

input:focus, select:focus, textarea:focus {
    box-shadow: none;
    border-color: none;
}

/* Mapa: karta z cieniem i zaokrągleniem */
.tg-map-wrap{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  box-shadow: 0 18px 50px rgba(10,16,25,.18), 0 6px 18px rgba(10,16,25,.08);
  border:1px solid var(--tg-border);
}

/* Jeśli mapa siedzi w bloku alignfull – dodaj wewnętrzne marginesy,
   żeby zaokrąglenie i cień były widoczne przy pełnej szerokości */
.alignfull .tg-map-wrap{
  margin: 24px var(--tg-gutter);
  width: calc(100% - (var(--tg-gutter) * 2));
}

/* Iframe bez ramek (na wszelki wypadek) */
.tg-map-wrap iframe{
  display:block; width:100%; height:100%; border:0;
}

.tg-section-tight {
    padding: 42px 0px 0px 0px;
}

/* =======================================================
   HERO — stała wysokość + stałe odstępy
   ======================================================= */

/* 1) Ustal docelowe wysokości (desktop/tablet/mobile) */
:root{
  --tg-hero-h-d: 60vh;   /* desktop */
  --tg-hero-h-t: 60vh;   /* tablet */
  --tg-hero-h-m: 48vh;   /* mobile */
  --tg-hero-gap-title-lead: 10px;   /* odstęp H1 → lead */
  --tg-hero-gap-lead-cta:  18px;   /* odstęp lead → przyciski */
  --tg-hero-gap-cta:       20px;   /* odstęp między przyciskami */
}

/* 2) Hero ma stałą MIN-wysokość niezależnie od ilości tekstu */
.tg-hero--full{
  min-height: var(--tg-hero-h-d);
  display: block; /* dla pewności */
}

/* Jeśli hero jest „pod headerem” (flush), dolicz wysokość headera,
   żeby wizualnie powierzchnia była taka sama */
.tg-hero--full.tg-hero--flush{
  min-height: calc(var(--tg-hero-h-d) + var(--tg-header-h));
}

/* 3) Wyrównanie w pionie: środek + stałe odstępy wewnątrz */
.tg-hero__inner{
  min-height: inherit;            /* dziedzicz min-height z hero */
  display: flex;
  flex-direction: column;
  justify-content: center;        /* pionowe centrowanie zawartości */
  padding-block: 0;               /* padding pionowy kontrolujemy wysokością */
}

/* Stałe odstępy między elementami */
.tg-hero__inner h1{ margin: 0; }
.tg-hero__inner .lead{
  margin-top: var(--tg-hero-gap-title-lead);
  margin-bottom: 0;
}
.tg-hero__inner .wp-block-buttons{
  margin-top: var(--tg-hero-gap-lead-cta);
  gap: var(--tg-hero-gap-cta);
}

/* Dla spójności – przyciski mają takie same wymiary na wszystkich stronach */
.tg-hero__inner .wp-block-button .wp-block-button__link{
  padding: 12px 18px; /* już masz globalnie, ale wymuszamy spójność w hero */
  border-radius: 14px;
  font-weight: 800;
}

/* 4) RWD: dostosuj wysokość hero do urządzeń */
@media (max-width: 980px){
  .tg-hero--full{ min-height: var(--tg-hero-h-t); }
  .tg-hero--full.tg-hero--flush{ min-height: calc(var(--tg-hero-h-t) + var(--tg-header-h)); }
}
@media (max-width: 640px){
  .tg-hero--full{ min-height: var(--tg-hero-h-m); }
  .tg-hero--full.tg-hero--flush{ min-height: calc(var(--tg-hero-h-m) + var(--tg-header-h)); }
}

/* HERO: stały odstęp między przyciskami — niezależnie od układu Gutenberga */
.tg-hero__inner{
  /* nadpisujemy globalny block gap WP wewnątrz HERO */
  --wp--style--block-gap: var(--tg-hero-gap-cta, 12px);
}

/* .wp-block-buttons bywa różnie renderowane (flex/grid + inline style gap) — ujednolicamy */
.tg-hero__inner .wp-block-buttons,
.tg-hero__inner .wp-block-buttons.is-layout-flex,
.tg-hero__inner .wp-block-buttons.is-layout-grid{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  gap: var(--tg-hero-gap-cta, 12px) !important;
  margin-top: var(--tg-hero-gap-lead-cta, 18px) !important;
}

/* Usuń stare marginesy między przyciskami, które WordPress potrafi dodać */
.tg-hero__inner .wp-block-buttons .wp-block-button{
  margin:0 !important;
}

/* Ustal spójny „hit area” i wygląd linków-przycisków */
.tg-hero__inner .wp-block-button .wp-block-button__link{
  padding:12px 18px; border-radius:14px; font-weight:800;
}

/* (opcjonalnie) Na wąskich ekranach większy gap, żeby kolaynie klikać */
@media (max-width: 640px){
  .tg-hero__inner .wp-block-buttons,
  .tg-hero__inner .wp-block-buttons.is-layout-flex,
  .tg-hero__inner .wp-block-buttons.is-layout-grid{
    gap: 14px !important;
  }
}

/* === CTA w górnym menu: identyczna wysokość na KAŻDEJ stronie === */

/* bazowy guzik w headerze */
.tg-header .tg-cta-btn,
.tg-header .wp-block-buttons.tg-cta-btn{ margin:0 !important; }

.tg-header .tg-cta-btn .wp-block-button,
.tg-header .tg-cta-btn .wp-block-button.is-style-fill,
.tg-header .tg-cta-btn .wp-block-button.is-style-outline{
  margin:0 !important;
}

/* sam link-przycisk – ujednolicenie wymiarów */
.tg-header .tg-cta-btn .wp-block-button__link{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:40px;                 /* docelowa wysokość */
  line-height:1 !important;    /* wyłącz „pompowanie” wysokości */
  padding:10px 14px !important;
  border-radius:12px !important;
  vertical-align:middle;
}

/* WordPress czasem dorzuca style inline – zbijamy je (zwłaszcza na .home) */
.tg-header .tg-cta-btn [style]{ height:40px !important; padding:10px 14px !important; }

/* na wszelki wypadek: niech elementy nav nie mają dodatkowych paddingów blokowych */
.tg-header .wp-block-navigation .wp-block-navigation-item__content{
  line-height:1 !important;
  padding-block:10px !important;  /* dopasowane do wysokości przycisku */
}

/* specyficznie na stronie głównej – ubij ewentualne różnice */
.home .tg-header .tg-cta-btn .wp-block-button__link{
  height:40px !important;
  padding:10px 14px !important;
}

/* gdy header się „skurczy” po scrollu, zachowaj tę samą wysokość guzików */
.tg-header.is-scrolled .tg-cta-btn .wp-block-button__link{
  height:40px !important;
  padding:10px 14px !important;
}

/* HEADER: przycisk "Kontakt" (btn-ghost) w stylu akcentu */
.tg-header .btn-ghost .wp-block-button__link{
  /* wymiary – zostają jak ustaliliśmy */
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:40px !important;
  padding:10px 14px !important;
  line-height:1 !important;
  font-size:16px !important;
  border-radius:12px !important;

  /* styl akcentowy */
  background: var(--tg-accent) !important;
  color:#fff !important;
  border: none !important;
  box-shadow: 0 8px 16px rgba(230,82,39,.18);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.tg-header .btn-ghost .wp-block-button__link:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(230,82,39,.20);
}

/* dostępność: focus */
.tg-header .btn-ghost .wp-block-button__link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(230,82,39,.25), 0 8px 16px rgba(230,82,39,.18);
}

/* na wszelki wypadek nadpisz inline-style WP */
.tg-header .btn-ghost [style]{
  background: var(--tg-accent) !important;
  color:#fff !important;
  border:none !important;
}

.front-page-h
{font-size:44px;}

/* Zgoda RODO – checkbox w jednej linii po lewej */
.tg-consent .tg-check{
  display:flex;
  align-items: center;  /* checkbox wyrównany do góry tekstu, zmień na center jeśli wolisz */
  gap:10px;                 /* odstęp między „kwadratem” a tekstem */
  cursor:pointer;
}

.tg-consent .tg-check input[type="checkbox"]{
  flex:0 0 auto;
  margin:0;                 /* usuń domyślne marginesy przeglądarki */
  margin-top:3px;           /* lekkie dosunięcie do linii tekstu; usuń jeśli używasz align-items:center */
  width:18px; height:18px;  /* spójny rozmiar */
}

.tg-consent .tg-check span{
  display:inline; 
  line-height:1.45;
  color:var(--tg-muted);
}

/* Cały label klikalny */
.tg-consent .tg-check *{ cursor:pointer; }

/* (opcjonalnie) ładniejszy focus dla dostępności */
.tg-consent .tg-check input:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(230,82,39,.25);
  border-radius:4px;
}

/* (opcjonalnie) jeżeli chcesz wymusić „jedną linię” bez zawijania */
@media (min-width: 981px){
  .tg-consent .tg-check{ white-space:nowrap; }
  .tg-consent .tg-check span{ white-space:normal; } /* ale pozwól zawijać się samemu tekstowi gdy jest węższy kontener */
}

/* === Single-scroll fix (usuń podwójny pasek) === */

/* 1) Tylko dokument (html) ma pionowy scroll; body i reszta – bez własnych */
html{ overflow-y: scroll; overflow-x: hidden; }
body{ overflow: visible !important; }

/* 2) Usuń wymuszanie wysokości – 100% potrafi tworzyć wewnętrzny scroll */
html, body{ height: auto !important; }

/* 3) Główny wrapper FSE nie jest scroll-kontenerem */
.wp-site-blocks{
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* 4) Najczęstsze sekcje – żadnego overflow-y */
main,
.wp-block-group,
.wp-block-columns,
.wp-block-query,
.tg-hero--full,
.tg-footer,
.tg-footer-top,
.tg-header,
.tg-map-wrap{
  overflow-y: visible !important;
}

/* 5) Full-bleed bez poziomego przewijania, ale bez tworzenia pionowego scrolla wewnątrz */
:root{ --sbw: calc(100vw - 100%); } /* szerokość paska przewijania */
.alignfull,
.wp-block-group.alignfull,
.wp-block-cover.alignfull,
.wp-block-image.alignfull{
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: calc(100vw - var(--sbw));
  max-width: 100vw;
  justify-self: center;
  box-sizing: border-box;
  overflow-x: clip;
  overflow-y: visible;
}

/* 6) Mapka full-bleed – brak własnego scrolla */
.alignfull .tg-map-wrap{
  margin: 24px var(--tg-gutter);
  width: calc(100vw - var(--sbw) - (var(--tg-gutter) * 2));
  max-width: calc(100vw - (var(--tg-gutter) * 2));
  overflow-x: hidden;
  overflow-y: visible !important;
  box-sizing: border-box;
}

/* 7) (Opcjonalnie) jeśli gdzieś wpadł inline overflow:auto z edytora */
.wp-block-group[style*="overflow:auto"],
.wp-block-columns[style*="overflow:auto"],
.wp-block-query[style*="overflow:auto"]{
  overflow: visible !important;
}

/* === Baner/CTA i karty: zero wewnętrznych scrolli === */
.tg-cta,
.tg-card,
.proj-card,
.prod-card{
  overflow: hidden !important;          /* żadnych pasków wewnątrz */
}

/* jeśli Gutenberg wstrzyknął overflow na grupę CTA – nadpisz */
.tg-cta[style*="overflow"]{ 
  overflow: hidden !important; 
}

/* dla pewności wyłącz też scrollbar-y webkitowe wewnątrz banera */
.tg-cta::-webkit-scrollbar{ display:none; }

/* poświata w CTA (duże ::after) – niech zostanie przycięta wewnątrz */
.tg-cta::after{
  pointer-events:none;
}

/* ogólny bezpiecznik: grupy z border-radius nie stają się scroll-kontenerem */
.wp-block-group[style*="overflow:auto"],
.wp-block-group[style*="overflow: scroll"],
.wp-block-columns[style*="overflow:auto"]{
  overflow: visible !important;
}

/* 404 – „Przydatne skróty” (czyste listy, bez kartowych artefaktów) */
.quick-links{ gap:28px; }
.quick-links .wp-block-column{ overflow: visible; }   /* żadnych pasków w kolumnach */
.quick-list{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.quick-list .f-text{ color:var(--tg-muted); }

.quick-card{ padding:24px; }
.quick-card h3{ margin:0 0 8px; }

/* =======================================================
   RWD — TELEFON & TABLET (mobile-first overrides)
   Dodać NA SAM KONIEC app.css
   ======================================================= */

/* ---------- WSPÓLNE ULEPSZENIA ---------- */
@media (max-width: 1140px){
  :root{
    --tg-container: 1000px;
  }
}

@media (max-width: 980px){
  :root{
    --tg-gutter: 16px;
    --tg-text: 15px;
    --tg-h1: clamp(28px, 7.5vw, 38px);
    --tg-h2: clamp(22px, 5.6vw, 28px);
    --tg-h3: clamp(18px, 4.2vw, 22px);
    --tg-header-h: 64px;            /* niższy header na mobile/tablet */
  }
  body{ letter-spacing:.005em; }

  .tg-section{ padding: 56px 0; }
  .tg-section-tight{ padding: 32px 0; }

  /* Karty, cienie, promienie */
  .tg-card{ padding:18px; border-radius:14px; box-shadow: var(--tg-shadow-soft); }
  .tg-cta{ padding:20px; border-radius:18px; }
  .tg-cta .tel{ font-size:24px; }

  /* Formularze */
  .tg-form{ padding:18px; border-radius:18px; }
  .tg-form .tg-form-grid{ grid-template-columns: 1fr; gap:12px; }
  .tg-form .btn-submit{ width:100%; }

  /* Mapka */
  .tg-map-wrap{ height: 360px; }

  /* Odstępy między kolumnami w sekcjach typu “about-split” */
  .about-split{ gap: 28px; }
}

/* Telefony — max 640px */
@media (max-width: 640px){
  :root{
    --tg-gutter: 14px;
    --tg-text: 15px;
    --tg-h1: clamp(26px, 8.5vw, 34px);
    --tg-h2: clamp(20px, 6.6vw, 26px);
    --tg-h3: clamp(17px, 5vw, 20px);
    --tg-header-h: 60px;
  }
  .tg-section{ padding: 44px 0; }
  .tg-section-tight{ padding: 26px 0; }
  .lead{ font-size: 16px; }
  .tg-map-wrap{ height: 300px; }
  .about-split{ gap: 22px; }
}

/* ---------- HEADER / NAV ---------- */
@media (max-width: 980px){
  .tg-header-inner{ padding: 12px 0; }
  .tg-brand .logo{ width: 200px; }
  .tg-brand .name{ font-size: 16px; }

  /* Nawigacja jako przewijany w poziomie “chips bar” */
  .tg-nav{
    font-size: 15px;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tg-nav::-webkit-scrollbar{ display:none; }
  .tg-nav a{ padding: 8px 10px; border-radius: 10px; }
  .tg-nav a::after{ left:10px; right:10px; bottom:4px; }

  /* Przycisk w headerze — pełna spójność rozmiaru */
  .tg-header .tg-cta-btn .wp-block-button__link{
    height: 38px !important;
    padding: 8px 12px !important;
    font-size: 15px !important;
    border-radius: 11px !important;
  }
}

/* Telefony — minimalne gabaryty w headerze */
@media (max-width: 640px){
  .tg-header-inner{ padding: 10px 0; }
  .tg-brand .name{ display:none; } /* tylko znak TG — czystszy header */
}

/* ---------- HERO (stała wysokość + czytelne CTA) ---------- */
@media (max-width: 980px){
  :root{
    --tg-hero-h-t: 56vh;
    --tg-hero-gap-title-lead: 8px;
    --tg-hero-gap-lead-cta: 16px;
    --tg-hero-gap-cta: 14px;
  }
  .tg-hero__inner{
    align-items: flex-start;       /* lepsza czytelność nagłówka na telefonie */
  }
}
@media (max-width: 640px){
  :root{ --tg-hero-h-m: 46vh; }
  .tg-hero__inner{ align-items: flex-start; }
  /* przyciski pod sobą, ale z równym odstępem */
  .tg-hero__inner .wp-block-buttons{
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .tg-hero__inner .wp-block-button .wp-block-button__link{
    width: 100%;
    text-align: center;
  }
}

/* ---------- PODSTRONOWE SUBNAV / FILTRY (przewijane “chipsy”) ---------- */
@media (max-width: 980px){
  .tg-subnav,
  .prod-toolbar,
  .proj-toolbar{
    display:flex; overflow-x:auto; gap:8px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .tg-subnav::-webkit-scrollbar,
  .prod-toolbar::-webkit-scrollbar,
  .proj-toolbar::-webkit-scrollbar{ display:none; }

  .tg-subnav__link,
  .pill-link{ padding:7px 10px; border-radius:999px; }
  .prod-toolbar__left, .prod-toolbar__right,
  .proj-toolbar__left, .proj-toolbar__right{ gap:6px; }
}

/* ---------- SIATKI (produkty / realizacje) ---------- */
@media (max-width: 980px){
  .products-grid .wp-block-post-template,
  .projects-grid .wp-block-post-template{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 18px !important;
  }
  .prod-thumb, .proj-thumb{ aspect-ratio: 4 / 3; }
  .tg-card .wp-block-post-title{ margin-top:8px; margin-bottom:4px; }
}
@media (max-width: 640px){
  .products-grid .wp-block-post-template,
  .projects-grid .wp-block-post-template{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ---------- CTA / BANERY ---------- */
@media (max-width: 980px){
  .tg-cta{ text-align: left; }
}
@media (max-width: 640px){
  .tg-cta{ text-align:center; }
}

/* ---------- STOPKA (glass + czytelny układ) ---------- */
@media (max-width: 980px){
  .tg-footer-top{ padding: 38px 0; }
  .tg-footer-cols{ display:grid; grid-template-columns: 1fr; gap:22px; }
  .fcol{ align-items: flex-start; }
  .f-list{ gap: 6px; }
}
@media (max-width: 640px){
  .tg-footer-bottom .tg-container{
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
}

/* ---------- DROBNE UX / SCROLL / FULL-BLEED ---------- */
@media (max-width: 980px){
  /* brak poziomego scrolla przy alignfull */
  :root{ --sbw: calc(100vw - 100%); }
  .alignfull,
  .wp-block-group.alignfull,
  .wp-block-cover.alignfull,
  .wp-block-image.alignfull{
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: calc(100vw - var(--sbw));
    max-width: 100vw;
    overflow-x: clip;
  }
  /* anchor scroll pod niższy header */
  [id]{ scroll-margin-top: calc(var(--tg-header-h) + 48px); }
}

/* ====== PADDING SAFE-AREA + czytelne marginesy ====== */
:root{
  --safe: max(14px, env(safe-area-inset-left));
  --safe-r: max(14px, env(safe-area-inset-right));
}
@media (max-width: 980px){
  .tg-container{ padding-left: var(--safe); padding-right: var(--safe-r); }
}

/* ====== HERO — wersja mobilna czytelna ====== */
:root{
  --tg-hero-h-t: 64vh;      /* tablet */
  --tg-hero-h-m: 56vh;      /* mobile */
  --tg-hero-gap-title-lead: 10px;
  --tg-hero-gap-lead-cta: 18px;
  --tg-hero-gap-cta: 12px;
}
.tg-hero__inner{
  display:flex; flex-direction:column;
  justify-content:center; min-height: var(--tg-hero-h-t);
  gap: var(--tg-hero-gap-title-lead);
}
.tg-hero__inner .lead{ margin-top:0; margin-bottom: var(--tg-hero-gap-lead-cta); }
.tg-hero__inner .wp-block-buttons{ gap: var(--tg-hero-gap-cta); }

@media (max-width:980px){
  h1{ font-size: clamp(28px, 7vw, 36px); }
  .lead{ font-size: 16px; }
  .tg-hero__inner{ min-height: var(--tg-hero-h-m); align-items:flex-start; }
  .tg-hero__inner .wp-block-buttons{ flex-direction:column; align-items:stretch; }
  .tg-hero__inner .wp-block-button .wp-block-button__link{ width:100%; text-align:center; }
}

/* ====== BURGER ====== */
.tg-burger{
  display:none; position:relative; width:42px; height:42px;
  border:1px solid var(--tg-border); border-radius:12px; background:#fff;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease;
}
.tg-burger:hover{ transform: translateY(-1px); }
.tg-burger__bar{
  position:absolute; left:10px; right:10px; height:2px; background:#0b1220; border-radius:2px;
  transition: transform .25s ease, opacity .2s ease, top .2s ease;
}
.tg-burger__bar:nth-child(1){ top:12px; }
.tg-burger__bar:nth-child(2){ top:20px; }
.tg-burger__bar:nth-child(3){ top:28px; }
.tg-burger.is-active .tg-burger__bar:nth-child(1){ top:20px; transform:rotate(45deg); }
.tg-burger.is-active .tg-burger__bar:nth-child(2){ opacity:0; }
.tg-burger.is-active .tg-burger__bar:nth-child(3){ top:20px; transform:rotate(-45deg); }

@media (max-width:980px){
  .tg-burger{ display:block; }
  .tg-nav--desktop{ display:none; }
}

/* ====== NAV DRAWER (mobile) ====== */
.tg-nav-drawer{ position:fixed; inset:0; z-index:1000; }
.tg-nav-drawer[hidden]{ display:none; }
.tg-nav-drawer__scrim{
  position:absolute; inset:0; background:rgba(10,16,25,.28); opacity:0; transition:opacity .22s ease;
}
.tg-nav-drawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(92vw, 420px);
  background:rgba(255,255,255,.88); backdrop-filter:blur(12px);
  border-left:1px solid var(--tg-border);
  transform: translateX(100%); transition: transform .25s ease;
  padding:18px max(18px, env(safe-area-inset-right)) 18px max(18px, env(safe-area-inset-left));
  display:flex; flex-direction:column; gap:12px;
}
.tg-nav-drawer.is-open .tg-nav-drawer__scrim{ opacity:1; }
.tg-nav-drawer.is-open .tg-nav-drawer__panel{ transform: translateX(0); }

.tg-nav-mobile .wp-block-navigation__container{ display:flex; flex-direction:column; gap:6px; }
.tg-nav-mobile a{
  padding:12px 10px; border-radius:12px; color:#0b1220;
  position:relative; transition: background .15s ease, color .15s ease;
}
.tg-nav-mobile a:hover{ background: #fff; }
.tg-nav-drawer__cta{ margin-top:auto; }

/* aktywny underline jak w headerze */
.tg-nav-mobile a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background: radial-gradient(#e6522796, transparent);
  transform:scaleX(0); transform-origin:center; transition:transform .22s ease; border-radius:2px;
}
.tg-nav-mobile a:hover::after,
.tg-nav-mobile a[aria-current="page"]::after,
.tg-nav-mobile .current-menu-item > a::after{ transform:scaleX(1); }

/* ====== HEADER wysokości i CTA spójne na mobile ====== */
@media (max-width:980px){
  .tg-header-inner{ padding:12px 0; }
  .tg-header .tg-cta-btn .wp-block-button__link{
    height:40px !important; padding:10px 14px !important; font-weight:800; border-radius:12px;
  }
}

/* ====== STOPKA — układ mobilny minimalistyczny ====== */
@media (max-width:980px){
  .tg-footer-top{ padding:36px 0; }
  .tg-footer-cols{ display:grid; grid-template-columns:1fr; gap:20px; }
  .fcol{ align-items:flex-start; }
  .f-head{ font-size:18px; margin-bottom:8px; }
  .f-list{ gap:8px; }
  .tg-footer-bottom .tg-container{
    display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  }
}

/* ====== OGÓLNE RWD – większy “oddech” na telefonie ====== */
@media (max-width:980px){
  .tg-section{ padding:48px 0; }
  .tg-section-tight{ padding:28px 0; }
  .about-split{ gap:24px; }
  .tg-card{ padding:18px; }
  .wp-block-buttons{ gap:12px; }
}

/* ====== BEZPIECZNIKI RWD ====== */
@media (max-width:980px){
  /* zero poziomego scrolla */
  :root{ --sbw: calc(100vw - 100%); }
  .alignfull,
  .wp-block-group.alignfull{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:calc(100vw - var(--sbw)); max-width:100vw; overflow-x:clip; }
  html, body{ overflow-x:hidden; }
}

/* Burger zawsze widoczny < 980px i ponad treścią */
@media (max-width: 980px){
  .tg-burger{ 
    display:block !important; 
    position:relative; 
    z-index: 1100;            /* ponad innymi warstwami */
  }
  /* Schowaj desktopową nawigację na mobile */
  .tg-nav--desktop{ display:none !important; }
  /* Upewnij się, że header nie maskuje burgera overflowem */
  .tg-header{ overflow: visible !important; }
}

/* Gdy header ma blur, podnieś mu warstwę */
.tg-header{ z-index: 1000; }

/* Safe-area zmienne (iPhone notch itd.) */
:root{
  --safe: max(16px, env(safe-area-inset-left));
  --safe-r: max(16px, env(safe-area-inset-right));
}

/* 1) Klasyczny kontener – wzmocnienie */
@media (max-width: 980px){
  .tg-container{ 
    padding-left: var(--safe) !important; 
    padding-right: var(--safe-r) !important; 
  }
}

/* 2) Każdy blok NIE full-width dostaje „oddech”, nawet bez .tg-container */
@media (max-width: 980px){
  /* bezpiecznie: tylko bez alignfull */
  .wp-site-blocks > :not(.alignfull),
  .wp-site-blocks > main > :not(.alignfull),
  .wp-site-blocks .wp-block-group:not(.alignfull):not(.tg-container){
    padding-left: var(--safe);
    padding-right: var(--safe-r);
    box-sizing: border-box;
  }
}

/* 3) Pozostawiamy pełne „od krawędzi” tylko dla alignfull (hero, cover etc.) */
@media (max-width: 980px){
  :root{ --sbw: calc(100vw - 100%); }
  .alignfull,
  .wp-block-group.alignfull{
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: calc(100vw - var(--sbw));
    max-width: 100vw;
    overflow-x: clip;
  }
}

/* 4) Przyciski w hero na mobile zawsze w kolumnie + równe odstępy */
@media (max-width: 980px){
  .tg-hero__inner .wp-block-buttons{
    display:flex; flex-direction:column; gap:14px;
    align-items:stretch;
  }
  .tg-hero__inner .wp-block-button .wp-block-button__link{
    width:100%; text-align:center;
  }
}

/* widoczność elementów zależnie od szerokości */
.hide-mobile{ display:block; }
.show-mobile{ display:none; }
@media (max-width: 980px){
  .hide-mobile{ display:none !important; }
  .show-mobile{ display:inline-flex !important; }
  .tg-nav--desktop{ display:none !important; }
}

/* burger nad wszystkim, header nie ucina */
.tg-header{ z-index:1000; overflow:visible; }
.tg-burger{ z-index:1100; }

/* drawer – jeśli nie masz tych reguł */
.tg-nav-drawer[hidden]{ display:none; }
.tg-nav-drawer{ position:fixed; inset:0; z-index:1000; }
.tg-nav-drawer__scrim{ position:absolute; inset:0; background:rgba(10,16,25,.28); opacity:0; transition:opacity .22s; }
.tg-nav-drawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(92vw,420px);
  background:rgba(255,255,255,.88); backdrop-filter:blur(12px);
  border-left:1px solid var(--tg-border);
  transform:translateX(100%); transition:transform .25s;
  padding:18px max(18px, env(safe-area-inset-right)) 18px max(18px, env(safe-area-inset-left));
  display:flex; flex-direction:column; gap:12px;
}
.tg-nav-drawer.is-open .tg-nav-drawer__scrim{ opacity:1; }
.tg-nav-drawer.is-open .tg-nav-drawer__panel{ transform:translateX(0); }

/* animacja burgera */
.tg-burger{
  width:42px;height:42px;border:1px solid var(--tg-border);border-radius:12px;background:#fff;
  cursor:pointer; position:relative;
}
.tg-burger__bar{ position:absolute; left:10px; right:10px; height:2px; background:#0b1220; border-radius:2px; transition: transform .25s, opacity .2s, top .2s; }
.tg-burger__bar:nth-child(1){ top:12px; }
.tg-burger__bar:nth-child(2){ top:20px; }
.tg-burger__bar:nth-child(3){ top:28px; }
.tg-burger.is-active .tg-burger__bar:nth-child(1){ top:20px; transform:rotate(45deg); }
.tg-burger.is-active .tg-burger__bar:nth-child(2){ opacity:0; }
.tg-burger.is-active .tg-burger__bar:nth-child(3){ top:20px; transform:rotate(-45deg); }

/* Układ prawej strony nagłówka */
.tg-header-right{
  display:flex; align-items:center; gap:14px;
}

/* CTA – zawsze widoczny na desktopie */
.tg-cta-btn{ display:block; }
@media (max-width: 980px){
  .tg-cta-btn{ display:none !important; }   /* na mobile CTA siedzi w drawerze */
}

/* Burger – pokazuj tylko na mobile; menu desktopowe tylko na desktopie */
.tg-burger{ display:none; }
.tg-nav--desktop{ display:block; }
@media (max-width: 980px){
  .tg-burger{ display:inline-flex !important; }
  .tg-nav--desktop{ display:none !important; }
}

/* Styl CTA (spójny z resztą) */
.tg-cta-btn .wp-block-button__link{
  border-radius:12px; padding:10px 14px; font-weight:800;
  background:var(--tg-accent); color:#fff;
  box-shadow:0 8px 16px rgba(230,82,39,.14);
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.tg-cta-btn .wp-block-button__link:hover{
  filter:brightness(1.05); transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(230,82,39,.20);
}

/* Zmniejsz dystans między menu a przyciskiem Kontakt (desktop) */
.tg-header-right{ gap:30px; }                 /* było ~14px */
.tg-nav--desktop{ margin-right:0; }           /* pewniak: zero „powietrza” za menu */
.tg-cta-btn{ margin-left:16px; }               /* lekki dosuw CTA do menu */

/* Gęstsze odstępy między linkami w menu (opcjonalnie) */
.tg-nav--desktop .wp-block-navigation__container{ gap:8px; }

/* Wyrównanie w pionie (przycisk i linki równo na linii bazowej) */
.tg-header-right,
.tg-nav--desktop .wp-block-navigation__container{ align-items:center; }
.tg-cta-btn .wp-block-button__link{ line-height:1; height:40px; padding:10px 14px; }

/* Po skrolu header zwykle się „kurczy” — utrzymaj ciaśniejsze odstępy */
.tg-header.is-scrolled .tg-header-right{ gap:8px; }
.tg-header.is-scrolled .tg-cta-btn{ margin-left:4px; }

/* Tylko desktop — mobile bez zmian (CTA w szufladzie) */
@media (max-width:980px){
  .tg-cta-btn{ margin-left:0; }
}

/* === FOOTER mobile: zero paddingów lewo/prawo, czysto przy krawędziach === */
@media (max-width: 980px){
  footer .tg-container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .tg-footer-top{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* kolumny w stopce mają „oddech” wewnętrzny własnymi marginesami */
  .tg-footer-cols{
    padding-left: 14px;
    padding-right: 14px;
    gap: 18px;
  }
  /* dolny pasek — też bez bocznych paddingów kontenera */
  .tg-footer-bottom .tg-container{
    padding-left: 14px !important;
    padding-right: 14px !important;
    gap: 6px;
  flex-direction: row;
  }
}

/* Widoczność: desktop vs mobile */
.tg-burger{ display:none; }
.tg-nav--desktop{ display:block; }
@media (max-width:980px){
  .tg-burger{ display:inline-flex !important; z-index:1100; }
  .tg-nav--desktop{ display:none !important; }
  .tg-cta-btn{ display:none !important; } /* CTA przeniesione do drawer'a */
}

/* Drawer — warstwy i animacja */
.tg-header{ z-index:1000; overflow:visible; }
.tg-nav-drawer[hidden]{ display:none; }
.tg-nav-drawer{ position:fixed; inset:0; z-index:1000; }
.tg-nav-drawer__scrim{ position:absolute; inset:0; background:rgba(10,16,25,.28); opacity:0; transition:opacity .22s; }
.tg-nav-drawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(92vw,420px);
  background:rgba(255,255,255,.88); backdrop-filter:blur(12px);
  border-left:1px solid var(--tg-border);
  transform:translateX(100%); transition:transform .25s;
  padding:18px max(18px, env(safe-area-inset-right)) 18px max(18px, env(safe-area-inset-left));
  display:flex; flex-direction:column; gap:12px;
}
.tg-nav-drawer.is-open .tg-nav-drawer__scrim{ opacity:1; }
.tg-nav-drawer.is-open .tg-nav-drawer__panel{ transform:translateX(0); }

/* Animacja burgera */
.tg-burger{
  width:42px;height:42px;border:1px solid var(--tg-border);border-radius:12px;background:#fff;cursor:pointer;position:relative;
}
.tg-burger__bar{ position:absolute; left:10px; right:10px; height:2px; background:#0b1220; border-radius:2px; transition: transform .25s, opacity .2s, top .2s; }
.tg-burger__bar:nth-child(1){ top:12px; }
.tg-burger__bar:nth-child(2){ top:20px; }
.tg-burger__bar:nth-child(3){ top:28px; }
.tg-burger.is-active .tg-burger__bar:nth-child(1){ top:20px; transform:rotate(45deg); }
.tg-burger.is-active .tg-burger__bar:nth-child(2){ opacity:0; }
.tg-burger.is-active .tg-burger__bar:nth-child(3){ top:20px; transform:rotate(-45deg); }

/* Mobile underline jak w headerze */
.tg-nav-mobile a{ position:relative; padding:12px 10px; border-radius:12px; }
.tg-nav-mobile a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background: radial-gradient(#e6522796, transparent);
  transform:scaleX(0); transform-origin:center; transition:transform .22s; border-radius:2px;
}
.tg-nav-mobile a:hover::after,
.tg-nav-mobile a[aria-current="page"]::after,
.tg-nav-mobile .current-menu-item > a::after{ transform:scaleX(1); }

/* === MOBILE FIX PACK (paste at the end) === */

/* 1) Footer mobile: zero bocznych paddingów + wyśrodkowane listy */
@media (max-width:980px){
  footer .tg-footer-top .tg-container,
  footer .tg-container{ padding-left:0 !important; padding-right:0 !important; }
  .tg-footer-cols{ padding-left:14px; padding-right:14px; }
  .tg-footer .f-list{ text-align:center; }
  .tg-footer .fcol{ align-items:center; }
}

/* 2) Burger nad treścią + przyciemnienie i rozmycie strony w trybie otwartym */
.tg-header{ z-index:1000; overflow:visible; }
.tg-burger{ z-index:1100; }
.tg-nav-drawer{ position:fixed; inset:0; z-index:2000; }
.tg-nav-drawer[hidden]{ display:none; }
.tg-nav-drawer__scrim{
  position:absolute; inset:0; opacity:0; transition:opacity .22s ease;
  background: rgba(10,16,25,.35);
}
.tg-nav-drawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(92vw,420px);
  background: rgba(255,255,255,.92); backdrop-filter: blur(14px) saturate(120%);
  border-left:1px solid var(--tg-border);
  transform: translateX(100%); transition: transform .25s ease;
  padding:18px max(18px, env(safe-area-inset-right)) 18px max(18px, env(safe-area-inset-left));
  display:flex; flex-direction:column; gap:12px;
}
.tg-nav-drawer.is-open .tg-nav-drawer__scrim{ opacity:1; }
.tg-nav-drawer.is-open .tg-nav-drawer__panel{ transform: translateX(0); }

/* Blur + lekkie ściemnienie całej strony, gdy menu otwarte */
html.nav-open .wp-site-blocks{
  filter: blur(4px) saturate(110%); transition: filter .22s ease;
}
html.nav-open{ overflow:hidden; }

/* 3) Hero mobile: przyciski obok siebie, stały odstęp, mniejszy tytuł na HOME */
@media (max-width:640px){
  .tg-hero__inner .wp-block-buttons{
    display:flex !important; flex-direction:row !important; flex-wrap:wrap;
    gap:12px !important; align-items:center;
  }
  .tg-hero__inner .wp-block-buttons .wp-block-button{ margin:0 !important; flex:1 1 calc(50% - 12px); }
  .tg-hero__inner .wp-block-button .wp-block-button__link{ width:100%; text-align:center; }

  /* mniejszy h1 tylko na stronie głównej */
  .home .tg-hero__inner h1{ font-size: clamp(22px, 7.2vw, 30px); }
}

/* 4) Hero zawsze full-bleed na mobile (bez poziomego scrolla) */
@media (max-width:980px){
  :root{ --sbw: calc(100vw - 100%); }
  .alignfull,
  .wp-block-group.alignfull,
  .wp-block-cover.alignfull{
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: auto;
    max-width: 100vw;
    overflow-x: clip;
  }
  /* bezpieczne paddingi dla treści nie-full */
  .tg-container{ padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
}

/* 5) Ofertowe sub-menu: spójny „chips bar”, mniej chaosu */
.tg-subnav{
  display:flex; gap:8px; padding:10px 14px;
  background: rgba(255,255,255,.7); backdrop-filter: blur(8px);
  border:1px solid var(--tg-border); border-radius:14px; box-shadow:0 10px 26px rgba(10,16,25,.06);
}
.tg-subnav__link{
  padding:8px 12px; border-radius:999px; color:var(--tg-muted);
  text-decoration:none; transition: color .18s ease, background .18s ease;
}
.tg-subnav__link:hover{ color:#000; background:#fff; }
@media (max-width:980px){
  .tg-subnav{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .tg-subnav::-webkit-scrollbar{ display:none; }
}

/* 6) Produkty: dwie kolumny na całym mobile + pasek sortowania w jednej linii */
.products-grid .wp-block-post-template{
  display:grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap:24px !important;
}
@media (max-width:980px){
  .products-grid .wp-block-post-template{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap:18px !important; }
}
@media (max-width:400px){
  .products-grid .wp-block-post-template{ grid-template-columns: 1fr !important; }
}

/* stałe ratio i równe karty */
.products-grid .wp-block-post-template > li{ display:flex; }
.prod-card{ display:flex; flex-direction:column; height:100%; }
.prod-thumb{ aspect-ratio:4/3; border-radius:12px; overflow:hidden; margin-bottom:12px; }
.prod-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.prod-excerpt{ margin-top:auto; }

/* sortowanie w jednej linii + przewijane, bez podkreśleń */
.prod-toolbar{ display:flex; flex-wrap:nowrap; overflow-x:auto; gap:8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.prod-toolbar::-webkit-scrollbar{ display:none; }
.prod-toolbar__left, .prod-toolbar__right{ display:flex; gap:8px; flex-wrap:nowrap; align-items:center; }
.pill-link{ white-space:nowrap; }
.prod-toolbar .pill-link::after{ display:none !important; }

/* 7) Menu w stopce: konsekwentne wyśrodkowanie i hover jak w headerze */
.tg-footer .f-link{
  position:relative; display:inline-block; text-decoration:none; color:#0b1220;
  transition: transform .2s ease, color .2s ease;
}
.tg-footer .f-link:hover{ transform: translateY(-1px); }
.tg-footer .f-link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background: radial-gradient(#e6522796, transparent);
  transform:scaleX(0); transform-origin:center; transition:transform .22s ease; border-radius:2px;
}
.tg-footer .f-link:hover::after{ transform:scaleX(1); }

/* 8) Burger widoczny tylko na mobile; desktopowe menu i CTA tylko na desktopie */
.tg-burger{ display:none; }
.tg-nav--desktop{ display:block; }
.tg-cta-btn{ display:block; }
@media (max-width:980px){
  .tg-burger{ display:inline-flex !important; }
  .tg-nav--desktop{ display:none !important; }
  .tg-cta-btn{ display:none !important; } /* CTA w drawerze */
}

/* 9) Drobne wygładzenia mobilne (typografia + hero spacing) */
@media (max-width:980px){
  :root{
    --tg-text: 15px;
    --tg-h1: clamp(28px, 7.5vw, 36px);
    --tg-h2: clamp(22px, 5.6vw, 28px);
    --tg-h3: clamp(18px, 4.2vw, 22px);
    --tg-header-h: 64px;
  }
  .tg-hero__inner{ min-height: var(--tg-hero-h-m, 56vh); }
  .tg-hero__inner .lead{ font-size:16px; }
}

/* 10) Upewnij się, że hero nie „zwęża się” na podstronach */
body:not(.home) .tg-hero--full,
body:not(.home) .tg-hero{ width:100%; }

/* HERO: przyciski w jednym rzędzie (bez zawijania) */
@media (max-width: 980px){
  .tg-hero__inner .wp-block-buttons{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;    /* klucz: zero zawijania */
    gap:12px !important;
    justify-content:flex-start;
    align-items:center;
  }
  .tg-hero__inner .wp-block-buttons .wp-block-button{
    flex:0 0 auto !important;       /* nie rozciągaj/nie ściskaj kart przycisków */
    margin:0 !important;
  }
  .tg-hero__inner .wp-block-button .wp-block-button__link{
    white-space:nowrap;             /* nie łam tekstu w środku przycisku */
    padding:10px 14px;              /* trochę ciaśniej, żeby się zmieściły obok siebie */
    border-radius:12px;
  }
}

/* Ekstra-bezpiecznik na bardzo wąskich ekranach (≤ 360px) */
@media (max-width: 360px){
  .tg-hero__inner .wp-block-buttons{ gap:8px !important; }
  .tg-hero__inner .wp-block-button .wp-block-button__link{
    padding:9px 12px;
    font-size: clamp(13px, 3.8vw, 15px); /* lekko zmniejsz tekst zamiast zawijać */
  }
}

/* === BURGER / DRAWER FIX === */

/* 1) Nie rozmywaj całej strony przy otwartym menu */
html.nav-open .wp-site-blocks{
  filter: none !important;            /* wyłącz globalny blur */
  transform: none !important;
}

/* 2) Drawer zawsze ponad stroną */
.tg-header{ z-index: 1000; overflow: visible; }
.tg-burger{ z-index: 10001; }         /* przycisk ponad wszystkim */
.tg-nav-drawer{
  position: fixed; inset: 0; z-index: 10000;   /* warstwa nad stroną i headerem */
}
.tg-nav-drawer[hidden]{ display:none; }

/* 3) Tło: tylko ZA menu jest przyciemnione i rozmyte */
.tg-nav-drawer__scrim{
  position: absolute; inset: 0;
  background: rgba(10,16,25,.35);     /* ściemnienie */
  -webkit-backdrop-filter: blur(6px); /* rozmycie tła ZA scrimem */
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .22s ease;
}
.tg-nav-drawer.is-open .tg-nav-drawer__scrim{ opacity: 1; }

/* 4) Panel menu NIE jest rozmyty (tylko tło za nim) + zawsze na wierzchu */
.tg-nav-drawer__panel{
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(92vw, 420px);
  background: rgba(255,255,255,.96);   /* brak backdrop-filter tutaj */
  border-left: 1px solid var(--tg-border);
  transform: translateX(100%); transition: transform .25s ease;
  padding: 18px max(18px, env(safe-area-inset-right)) 18px max(18px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 12px;
  will-change: transform;
  z-index: 10002;                      /* panel ponad scrimem */
}
.tg-nav-drawer.is-open .tg-nav-drawer__panel{ transform: translateX(0); }

/* 5) Widoczność zestawu: burger tylko <980px; menu desktop na ≥980px */
.tg-nav--desktop{ display: block; }
.tg-cta-btn{ display: block; }
.tg-burger{ display: none; }
@media (max-width:980px){
  .tg-nav--desktop{ display: none !important; }
  .tg-cta-btn{ display: none !important; }     /* CTA w szufladzie */
  .tg-burger{ display: inline-flex !important; }
}

/* 6) Drobne wygładzenia dotyku i klikania w panelu */
.tg-nav-mobile .wp-block-navigation__container{
  display:flex; flex-direction:column; gap:8px;
}
.tg-nav-mobile a{
  position:relative; padding:12px 10px; border-radius:12px; color:#0b1220;
  transition: background .15s ease, color .15s ease;
}
.tg-nav-mobile a:hover{ background:#fff; }
.tg-nav-mobile a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background: radial-gradient(#e6522796, transparent);
  transform: scaleX(0); transform-origin: center; transition: transform .22s ease; border-radius: 2px;
}
.tg-nav-mobile a:hover::after,
.tg-nav-mobile a[aria-current="page"]::after,
.tg-nav-mobile .current-menu-item > a::after{ transform: scaleX(1); }

/* [A] Twardo wyłącz wbudowany overlay WP (ten z dużym „X”) */
.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* [B] Drawer: panel nad wszystkim, rozmywa się TYLKO tło za menu */
.tg-header{ z-index:1000; overflow:visible; }     /* nic nie ucina burgera */
.tg-burger{ z-index:10001; }                      /* przycisk nad całością */
.tg-nav-drawer{ position:fixed; inset:0; z-index:10000; }
.tg-nav-drawer[hidden]{ display:none; }

.tg-nav-drawer__scrim{
  position:absolute; inset:0;
  background: rgba(10,16,25,.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);     /* rozmywa TYLKO tło za szufladą */
  opacity:0; transition:opacity .22s ease;
  z-index:10000;
}
.tg-nav-drawer__panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(92vw,420px);
  background:rgba(255,255,255,.96);
  border-left:1px solid var(--tg-border);
  transform:translateX(100%);
  transition:transform .25s ease;
  padding:18px max(18px, env(safe-area-inset-right)) 18px max(18px, env(safe-area-inset-left));
  display:flex; flex-direction:column; gap:12px;
  z-index:10002;                   /* zawsze nad scrimem i treścią */
}
.tg-nav-drawer.is-open .tg-nav-drawer__scrim{ opacity:1; }
.tg-nav-drawer.is-open .tg-nav-drawer__panel{ transform:translateX(0); }

/* [C] Na wszelki wypadek: hero/pseudo-warstwy niżej niż drawer */
.tg-hero--full,
.tg-hero--full::after,
.parallax-bg{ z-index:0 !important; }
.tg-hero--full .tg-container > *{ position:relative; z-index:1; }

/* [D] Gdy menu otwarte – blokuj scroll i chowaj CTA w headerze */
html.nav-open, html.nav-open body{ overflow:hidden !important; }
html.nav-open #tgHeaderCta{ display:none !important; }

/* [E] Linki w mobilnym menu – ten sam underline co w headerze */
.tg-nav-mobile .wp-block-navigation__container{
  display:flex; flex-direction:column; gap:8px;
}
.tg-nav-mobile a{
  position:relative; padding:12px 10px; border-radius:12px; color:#0b1220;
  transition: background .15s ease, color .15s ease;
}
.tg-nav-mobile a:hover{ background:#fff; }
.tg-nav-mobile a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background: radial-gradient(#e6522796, transparent);
  transform:scaleX(0); transform-origin:center; transition:transform .22s ease; border-radius:2px;
}
.tg-nav-mobile a:hover::after,
.tg-nav-mobile a[aria-current="page"]::after,
.tg-nav-mobile .current-menu-item > a::after{ transform:scaleX(1); }

/* —— Wyłącz wbudowany overlay WP (ten z dużym „X”) —— */
.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* —— Drawer: warstwy i animacje —— */
.tg-header{ z-index: 4000; overflow: visible !important; }
.tg-burger{ z-index: 5003; }

.tg-nav-drawer{
  position: fixed; inset: 0;
  z-index: 5000;
}
.tg-nav-drawer[hidden]{ display: none; }

.tg-nav-drawer__scrim{
  position: absolute; inset: 0;
  background: rgba(10,16,25,.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);        /* rozmywa tylko tło ZA panelem */
  opacity: 0; transition: opacity .22s ease;
  z-index: 5000;
}
.tg-nav-drawer__panel{
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(92vw, 420px);
  background: rgba(255,255,255,.96);
  border-left: 1px solid var(--tg-border);
  transform: translateX(100%);
  transition: transform .25s ease;
  padding: 18px max(18px, env(safe-area-inset-right)) 18px max(18px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 12px;
  z-index: 5002;                     /* zawsze nad scrimem i treścią */
}

/* stany otwarte */
.tg-nav-drawer.is-open .tg-nav-drawer__scrim{ opacity: 1; }
.tg-nav-drawer.is-open .tg-nav-drawer__panel{ transform: translateX(0); }

/* gdy menu otwarte – blokuj scroll dokumentu */
html.nav-open, html.nav-open body{ overflow: hidden !important; }

/* zerowanie przypadkowych globalnych blurów/filtrów */
html.nav-open { filter: none !important; }
body.nav-open, .nav-open * { filter: none !important; }

/* upewnij się, że hero pseudo-warstwy są niżej niż panel */
.tg-hero--full,
.tg-hero--full::after,
.parallax-bg{ z-index: 0 !important; }

/* mobilna nawigacja – underline jak w headerze */
.tg-nav-mobile .wp-block-navigation__container{
  display:flex; flex-direction:column; gap:8px;
}
.tg-nav-mobile a{
  position:relative; padding:12px 10px; border-radius:12px; color:#0b1220;
  transition: background .15s ease, color .15s ease;
}
.tg-nav-mobile a:hover{ background:#fff; }
.tg-nav-mobile a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background: radial-gradient(#e6522796, transparent);
  transform:scaleX(0); transform-origin:center; transition:transform .22s ease; border-radius:2px;
}
.tg-nav-mobile a:hover::after,
.tg-nav-mobile a[aria-current="page"]::after,
.tg-nav-mobile .current-menu-item > a::after{ transform:scaleX(1); }

/* --- HEADER I DRAWER: zawsze nad wszystkim --- */
.tg-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100000 !important;   /* top warstwa całej strony */
  overflow: visible !important;
}
.tg-burger{ z-index: 100002 !important; }

.tg-nav-drawer{
  position: fixed;
  inset: 0;
  z-index: 100001 !important;   /* nad treścią i hero */
}
.tg-nav-drawer__scrim{ z-index: 100001 !important; }
.tg-nav-drawer__panel{ z-index: 100002 !important; }

/* --- wyłącz „mocne” stacking-contexty pod spodem (na wszelki wypadek) --- */
.tg-hero--full,
.tg-hero--full::before,
.tg-hero--full::after,
.parallax-bg,
.wp-block-cover,
.wp-block-cover__image-background{
  z-index: auto !important;
  filter: none !important;
  transform: none !important;    /* jeśli gdzieś było nadane – potrafi tworzyć nowy stacking */
}

/* gdy menu otwarte – tylko blokuj scroll, bez globalnych filtrów */
html.nav-open, html.nav-open body{
  overflow: hidden !important;
  filter: none !important;
}

/* Drawer jako portal – zawsze najwyżej */
.tg-nav-portal{ position:fixed !important; inset:0 !important; z-index:2147483000 !important; }
.tg-nav-portal .tg-nav-drawer__scrim{ z-index:2147483001 !important; }
.tg-nav-portal .tg-nav-drawer__panel{ z-index:2147483002 !important; }

/* Header też wysoko, ale poniżej portalu (na wypadek) */
.tg-header{ z-index:2147482000 !important; overflow:visible !important; }

/* Blur TYLKO tła strony, nie całego dokumentu */
html.nav-open .wp-site-blocks{
  filter: blur(6px) saturate(110%);
  transition: filter .22s ease;
}
html.nav-open,
html.nav-open body{ overflow:hidden !important; }

/* Upewnij się, że sekcje pod spodem nie robią własnego "parasola" nad menu */
.wp-block-cover, .wp-block-cover__image-background,
.tg-hero--full, .tg-hero--full::before, .tg-hero--full::after, .parallax-bg{
  z-index:auto !important;
  transform:none !important;   /* jeśli coś dawało transform */
  filter:none !important;      /* i filter, który tworzy stacking-context */
}

/* Sam drawer */
.tg-nav-drawer{ position:fixed; inset:0; z-index:2147483000; }
.tg-nav-drawer__scrim{ position:absolute; inset:0; background:rgba(10,16,25,.32); }
.tg-nav-drawer__panel{
    position: absolute;
    top: 145px;
    right: 0px;
    bottom: 0;
    width: min(73vw, 420px);
    height: min(88vw, 420px);
    border-radius: 20px 0px 0px 20px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    border-left: 1px solid var(--tg-border);
    transform: translateX(100%);
    transition: transform .25s 
ease;
    padding: 18px max(18px, env(safe-area-inset-right)) 18px max(18px, env(safe-area-inset-left));
    display: flex;
    box-shadow: 0px 0px 20px rgb(10 16 25 / 27%);
    flex-direction: column;
    gap: 12px;
}
.tg-nav-drawer.is-open .tg-nav-drawer__panel{ transform:translateX(0); }
.tg-nav-drawer.is-open .tg-nav-drawer__scrim{ opacity:1; }

@media (max-width: 980px){
  .btn--accent .button-menu{
        top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;  
    width: auto;
  }
.tg-header.is-scrolled .tg-header-inner
  {
        padding-top: 0px;
    padding-bottom: 0px;
  }
  footer.wp-block-template-part {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.wp-block-group.tg-footer.is-layout-flow.wp-block-group-is-layout-flow.is-shown {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
  .wp-block-group.tg-subnav.reveal.in {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
  .prod-toolbar {
    flex-wrap: wrap;
}
  .prod-toolbar__left, .prod-toolbar__right {
    gap: 3px;
}
 .products-grid .wp-block-post-template, .products-grid .wp-block-post-template.is-layout-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important; 
}  
 .btn--accent .wp-block-button__link:hover {
  transform: translate(-50%, -50%);
  }
}
  
  /* HERO – zawsze pełna szerokość, nawet gdy blok nie ma alignfull */
.tg-hero--full{
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box;
}

/* Usuń ewentualne boczne paddingi „odziedziczone” z reguł mobile-safe */
.wp-site-blocks > .tg-hero--full,
.wp-site-blocks > main > .tg-hero--full,
.wp-block-group.tg-hero--full{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Dla wersji z wrapperem alignfull – też wyzeruj */
.tg-hero--full.alignfull{
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

/* Bezpiecznik: brak poziomego scrolla */
html, body{ overflow-x: hidden; }

  a.f-link::after {
    top: 22px;
}
  
/* Bazowy reveal masz już u siebie; tu tylko wariant dla mapy */
.reveal--map{
  transform: translateY(12px) scale(.985);
  opacity: 0;
  will-change: transform, opacity, box-shadow;
}
.reveal--map.in{
  transform: none;
  opacity: 1;
  transition: transform .55s ease, opacity .55s ease, box-shadow .55s ease;
  /* miękki „podjazd” i lekkie wzmocnienie cienia przy wejściu */
      box-shadow: 0 8px 25px rgba(10, 16, 25, .1), 0 6px 18px rgba(10, 16, 25, .08);
}

@media (prefers-reduced-motion: reduce){
  .reveal--map, .reveal--map.in{
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

  /* Sortowanie produktów – mobile: opcje pod napisem "Sortuj:" */
@media (max-width: 640px){
  /* cała belka może się łamać w wiersze */
  .prod-toolbar{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:10px;
  }

  /* lewa/prawa część zajmuje pełną szerokość jeden pod drugim */
  .prod-toolbar__left,
  .prod-toolbar__right{
    flex: 1 1 100%;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  /* etykieta "Sortuj:" idzie na osobny wiersz nad opcjami */
  .prod-toolbar__label{
    flex: 1 1 100%;
    margin: 0 0 6px 0;
    line-height:1.25;
  }

  /* „pigułki” nie łamią słów, ale mogą przechodzić do nowej linii */
  .prod-toolbar .pill-link{
    white-space: nowrap;
  }
}

/* Jeśli gdzieś etykieta nie ma klasy .prod-toolbar__label
   (np. zwykły <strong>Sortuj:</strong> jako pierwszy element),
   ten fallback wymusi zachowanie jak wyżej: */
@media (max-width: 640px){
  .prod-toolbar > strong:first-child{
    flex: 1 1 100%;
    display:block;
    margin: 0 0 6px 0;
  }
}

/* Produkty – hero z dwoma przyciskami */
.tg-hero--products .tg-hero__inner {
  align-items: flex-start;
}

.tg-hero-products-buttons {
  gap: 14px !important;
}

@media (min-width: 641px){
  .tg-hero--products .tg-hero-products-buttons{
    flex-wrap: wrap;
  }
  .tg-hero--products .wp-block-button .wp-block-button__link{
    min-width: 220px;
  }
}

/* Kafelki wejściowe na stronie Produkty */
.prod-entry{
  text-decoration:none;
  display:block;
  padding:28px 24px;
  border-radius:22px;
  border:1px solid var(--tg-border);

}
.prod-entry h2{
  margin-top:0;
  margin-bottom:10px;
}
.prod-entry p{
  margin-bottom:8px;
}

/* Sidebar – drzewko kategorii produktów */
.tg-cat-tree{
  position:relative;
}
.tg-cat-tree__list{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  font-size:14px;
}
.tg-cat-tree__list li{
  margin:2px 0;
  position:relative;
}
.tg-cat-tree__list a{
  display:block;
  padding:6px 6px 6px 26px;
  border-radius:10px;
  color:var(--tg-muted);
  text-decoration:none;
  transition:background .16s ease,color .16s ease;
}
.tg-cat-tree__list a:hover{
  background:#f3f4f6;
  color:#000;
}

/* elementy z dziećmi (będzie toggle) */
.tg-cat-tree li.has-children > a{
  padding-left:30px;
}

/* podlisty domyślnie schowane */
.tg-cat-tree li ul{
  margin:2px 0 0 16px;
  padding:0;
  list-style:none;
  display:none;
}

/* otwarte */
.tg-cat-tree li.is-open > ul{
  display:block;
}

/* aktualna kategoria i jej przodkowie zawsze „otwarci” */
.tg-cat-tree li.current-cat > ul,
.tg-cat-tree li.current-cat-parent > ul,
.tg-cat-tree li.current-cat-ancestor > ul{
  display:block;
}
.tg-cat-tree li.current-cat > a,
.tg-cat-tree li.current-cat-parent > a,
.tg-cat-tree li.current-cat-ancestor > a{
  background:#fff;
  color:#000;
  border:1px solid var(--tg-border);
}

/* mały przycisk rozwijania (strzałka) */
.tg-cat-tree__toggle{
  position:absolute;
  left:4px;
  top:7px;
  width:16px;
  height:16px;
  border-radius:50%;
  border:none;
  padding:0;
  cursor:pointer;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  color:var(--tg-muted-2);
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.tg-cat-tree__toggle:hover{
  background:#e5e7eb;
  color:#000;
}
.tg-cat-tree li.is-open > .tg-cat-tree__toggle{
  transform:rotate(90deg);
}

/* mobilnie: trochę większe click-targety */
@media (max-width:980px){
  .tg-cat-tree__list a{
    padding:8px 8px 8px 28px;
  }
  .tg-cat-tree__toggle{
    top:9px;
  }
}

/* Layout kategorii: produkty + sidebar po prawej */
.tg-products-layout{
  display:flex;
  align-items:flex-start;
  gap:32px;
}

.tg-products-main{
  flex:1 1 auto;
}

.tg-products-sidebar{
  flex:0 0 280px;
}

/* Na mobilkach menu pod produktami */
@media (max-width:980px){
  .tg-products-layout{
    flex-direction:column-reverse;
  }
  .tg-products-sidebar{
    width:100%;
  }
}

/* Karta menu kategorii */
.tg-cat-card{
  position:sticky;
  top:calc(var(--tg-header-h) + 16px);
}

/* Drzewko kategorii */
.tg-cat-tree-level{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:grid;
  gap:4px;
}

.tg-cat-item{
  border-radius:12px;
}

.tg-cat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.tg-cat-link{
  display:block;
  padding:8px 10px;
  border-radius:10px;
  color:var(--tg-muted);
  text-decoration:none;
  font-size:15px;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}

.tg-cat-link:hover{
  color:#000;
  background:#fff;
  box-shadow:0 4px 12px rgba(10,16,25,.06);
}

/* Aktualna kategoria */
.tg-cat-item.is-current > .tg-cat-link,
.tg-cat-item.is-current .tg-cat-header .tg-cat-link{
  background:#fff;
  color:#000;
  box-shadow:0 8px 20px rgba(10,16,25,.08);
}

/* Guzik rozwijania */
.tg-cat-toggle{
  flex:0 0 auto;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid var(--tg-border);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  transition:background .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tg-cat-toggle:hover{
  background:#f9fafb;
  box-shadow:0 4px 10px rgba(10,16,25,.06);
  border-color:rgba(230,82,39,.40);
}

/* Strzałka */
.tg-cat-chevron{
  width:10px;
  height:10px;
  border-right:2px solid #0b1220;
  border-bottom:2px solid #0b1220;
  transform:rotate(45deg);
  transition:transform .2s ease;
}

.tg-cat-item.is-open .tg-cat-chevron{
  transform:rotate(225deg);
}

/* Podkategorie */
.tg-cat-subwrap{
  padding-left:8px;
  padding-top:4px;
}

.tg-cat-subwrap .tg-cat-link{
  font-size:14px;
  padding-top:6px;
  padding-bottom:6px;
}

/* Mobile: bez sticky, prostszy wygląd */
@media (max-width:980px){
  .tg-cat-card{
    position:static;
  }
}

/* MENU KATEGORII – AKORDEON PO LEWEJ */

.tg-cat-tree{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.tg-cat-tree-level{
  list-style:none;
  margin:6px 0 0;
  padding:0 0 0 4px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* Pojedynczy element */
.tg-cat-item{
  border-radius:12px;
}

/* Wierzchnie kategorie z dziećmi */
.tg-cat-item.has-children > .tg-cat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}

/* Link kategorii */
.tg-cat-link{
  display:block;
  padding:8px 10px;
  border-radius:10px;
  color:var(--tg-muted);
  text-decoration:none;
  font-size:15px;
  transition:
    background .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}

.tg-cat-link:hover{
  color:#000;
  background:#fff;
  box-shadow:0 4px 12px rgba(10,16,25,.06);
}

/* Aktualna kategoria */
.tg-cat-item.is-current > .tg-cat-link,
.tg-cat-item.is-current > .tg-cat-header .tg-cat-link{
  background:#fff;
  color:#000;
  box-shadow:0 8px 20px rgba(10,16,25,.08);
  font-weight:600;
}

/* Guzik rozwijania */
.tg-cat-toggle{
  flex:0 0 auto;
  width:26px;
  height:26px;
  border-radius:999px;
  border:1px solid var(--tg-border);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  transition:
    background .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.tg-cat-toggle:hover{
  background:#f9fafb;
  box-shadow:0 4px 10px rgba(10,16,25,.06);
  border-color:rgba(230,82,39,.40);
}

/* Strzałka */
.tg-cat-chevron{
  width:9px;
  height:9px;
  border-right:2px solid #0b1220;
  border-bottom:2px solid #0b1220;
  transform:rotate(45deg);
  transition:transform .2s ease;
}

.tg-cat-item.is-open .tg-cat-chevron{
  transform:rotate(225deg);
}

/* Podkategorie */
.tg-cat-subwrap{
  padding-left:6px;
  padding-top:4px;
}

.tg-cat-subwrap .tg-cat-link{
  font-size:14px;
  padding-top:6px;
  padding-bottom:6px;
}

/* Mobile: menu pod produktami, ale dalej czytelne */
@media (max-width:980px){
  .about-split{
    gap:24px;
  }
  .tg-cat-subwrap{
    padding-left:10px;
  }
}

/* === TAXONOMIA PRODUKTÓW === */

.tg-tax-layout{
  display:flex;
  gap:32px;
  align-items:flex-start;
}

.tg-tax-sidebar{
  flex:0 0 30%;
  max-width:340px;
}

.tg-tax-main{
  flex:1;
}

/* na mniejszych ekranach pod sobą */
@media (max-width:980px){
  .tg-tax-layout{
    flex-direction:column;
  }
  .tg-tax-sidebar{
    max-width:none;
    flex:0 0 auto;
  }
}

/* drzewko kategorii */
.tg-tax-heading{
  margin-bottom:10px;
}

.tg-tax-tree{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* pojedynczy element */
.tg-tax-item{
  padding:6px 8px;
  border-radius:10px;
  transition:background .18s ease, box-shadow .18s ease;
}
.tg-tax-item.is-current{
  background:#fff;
  box-shadow:0 10px 24px rgba(10,16,25,.06);
}

/* wiersz główny: link + przycisk strzałki */
.tg-tax-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}

/* link główny kategorii */
.tg-tax-link-main{
  flex:1;
  font-weight:600;
  color:#0b1220;
  text-decoration:none;
  position:relative;
  padding:6px 4px;
}
.tg-tax-link-main:hover{
  color:var(--tg-accent);
}

/* przycisk rozwijania */
.tg-tax-toggle{
  border:none;
  background:transparent;
  padding:4px;
  cursor:pointer;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, transform .15s ease;
}
.tg-tax-toggle:hover{
  background:rgba(15,23,42,.05);
  transform:translateY(-1px);
}

/* mała strzałka */
.tg-tax-chevron{
  width:16px;
  height:16px;
  border-radius:999px;
  position:relative;
}
.tg-tax-chevron::before,
.tg-tax-chevron::after{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  top:7px;
  height:2px;
  background:#0b1220;
  border-radius:2px;
  transform-origin:center;
}
.tg-tax-chevron::before{ transform:rotate(45deg); }
.tg-tax-chevron::after{  transform:rotate(-45deg); }

.tg-tax-item.is-open .tg-tax-chevron::before{
  transform:rotate(-45deg);
}
.tg-tax-item.is-open .tg-tax-chevron::after{
  transform:rotate(45deg);
}

/* dzieci (podkategorie) */
.tg-tax-children{
  margin-top:4px;
  padding-left:10px;
  border-left:1px solid rgba(15,23,42,.06);
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* link "Wszystkie X" */
.tg-tax-link-all{
  font-size:14px;
  color:var(--tg-muted-2);
  text-decoration:none;
  padding:4px 0;
}
.tg-tax-link-all:hover{
  color:var(--tg-accent);
}

/* niższe poziomy trochę mniejsze */
.tg-tax-item.level-1 .tg-tax-link-main,
.tg-tax-item.level-2 .tg-tax-link-main{
  font-weight:500;
  font-size:14px;
}

/* produkty w tej taksonomii pełna szerokość kolumny prawej */
.tg-tax-main .products-grid .wp-block-post-template{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:24px !important;
}
@media (max-width:980px){
  .tg-tax-main .products-grid .wp-block-post-template{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media (max-width:640px){
  .tg-tax-main .products-grid .wp-block-post-template{
    grid-template-columns:1fr !important;
    padding-left: 0px;
  }
}

/* Drzewko kategorii – show/hide tylko klasą .is-open */
.tg-tax-children{
  display:none;
  margin-top:10px;
}

.tg-tax-item.is-open > .tg-tax-children{
  display:block;
}

/* (opcjonalnie) lekkie wyróżnienie aktualnej kategorii */
.tg-tax-item.is-current > .tg-tax-row .tg-tax-link-main{
  font-weight:700;
  color:#0b1220;
}

/* Taxonomia produktów – przyciski rozwijania */
.tg-tax-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.tg-tax-toggle{
  border:0;
  background:transparent;
  padding:4px;
  cursor:pointer;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.tg-tax-chevron{
  width:22px;
  height:22px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 4px 10px rgba(10,16,25,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}

/* domyślnie strzałka w dół */
.tg-tax-toggle[aria-expanded="false"] .tg-tax-chevron::before{
  content:"▾";
  font-size:13px;
}

/* po rozwinięciu – „X” */
.tg-tax-toggle[aria-expanded="true"] .tg-tax-chevron::before{
  content:"✕";
  font-size:12px;
}

/* otwarta gałąź – lekka rotacja/akcent */
.tg-tax-item.is-open .tg-tax-chevron{
  transform:rotate(90deg);
  background:#ffe5dc;
}

/* ukrywanie/pokazywanie dzieci – backup obok JS */
.tg-tax-children{ margin-top:8px; }

/* =======================================================
   KATEGORIE PRODUKTÓW – LAYOUT + NOWY WYGLĄD MENU
   ======================================================= */

/* 30% / 70% – menu + lista produktów */
.tg-tax-layout{
  display:flex;
  gap:32px;
  align-items:flex-start;
}
.tg-tax-sidebar{
  flex:0 0 30%;
  max-width:340px;
}
.tg-tax-main{
  flex:1 0 70%;
}

/* Stack na mobilkach */
@media (max-width:980px){
  .tg-tax-layout{
    flex-direction:column;
  }
  .tg-tax-sidebar{
    max-width:none;
    width:100%;
  }
}

/* Karta z kategoriami */
.tg-tax-sidebar .tg-card{
  padding:22px 20px;
  border-radius:20px;
  box-shadow:0 18px 40px rgba(10,16,25,.08);
}
.tg-tax-heading{
  margin:0 0 6px;
  font-size:18px;
  font-weight:800;
}
.tg-tax-sidebar .f-text{
  margin:0 0 18px;
  font-size:14px;
}

/* Drzewko – pionowa lista sekcji */
.tg-tax-tree{
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* Każdy „akordeon” (sekcja kategorii) */
.tg-tax-item{
  border-radius:14px;
  padding:4px 0;
}

/* Poziom 0 – główne grupy (Części / Palniki) */
.tg-tax-item.level-0{
  padding:8px 10px;
  background:rgba(255,255,255,.85);
  box-shadow:0 10px 26px rgba(10,16,25,.06);
}

/* Wiersz nagłówka sekcji: nazwa + toggle */
.tg-tax-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* Klikalna nazwa głównej kategorii */
.tg-tax-link-main{
  font-weight:700;
  font-size:15px;
  color:var(--tg-ink);
  text-decoration:none;
}
.tg-tax-item.is-current > .tg-tax-row .tg-tax-link-main{
  color:var(--tg-accent);
}

/* Przycisk toggle (strzałka) */
.tg-tax-toggle{
  flex:0 0 auto;
  width:26px;
  height:26px;
  border-radius:999px;
  border:1px solid var(--tg-border);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(10,16,25,.10);
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tg-tax-toggle:hover{
  background:#fff7f4;
  box-shadow:0 10px 22px rgba(10,16,25,.12);
  transform:translateY(-1px);
}

/* Ikona strzałki */
.tg-tax-chevron{
  position:relative;
  width:10px;
  height:10px;
}
.tg-tax-chevron::before{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid #0b1220;
  border-top:none;
  border-left:none;
  transform:rotate(45deg);          /* domyślnie strzałka w dół ↘ */
  transform-origin:center;
  transition:transform .22s ease;
}

/* Otwarta sekcja – strzałka obraca się w górę */
.tg-tax-item.is-open > .tg-tax-row .tg-tax-chevron::before{
  transform:rotate(-135deg);         /* ↗ */
}

/* Panel z podkategoriami */
.tg-tax-children{
  margin-top:8px;
  padding:10px 12px 8px;
  border-radius:14px;
  background:#f9fafb;
  border:1px solid var(--tg-border);
  box-shadow:0 6px 18px rgba(10,16,25,.05);

  /* „slide” – bazowe wartości (zamknięty panel) */
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(-4px);
  transition:
    max-height .24s ease,
    opacity .24s ease,
    transform .24s ease;
}

/* Gdy sekcja jest otwarta – JS usuwa [hidden] i dodaje .is-open */
.tg-tax-item.is-open > .tg-tax-children{
  max-height: fit-content;
  opacity:1;
  transform:translateY(0);
}

/* Link „Wszystkie …” u góry panelu */
.tg-tax-link-all{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  color:var(--tg-accent);
  text-decoration:none;
}
.tg-tax-link-all:hover{
  text-decoration:underline;
}

/* Wnętrze panelu – zagnieżdżone .tg-tax-item jako zwykłe wiersze */
.tg-tax-children .tg-tax-item{
  padding:4px 0;
      background: rgba(255, 255, 255, .85);
  margin-bottom: 10px;
  box-shadow:none;
}
.tg-tax-children .tg-tax-row{
  padding-left:8px;
}
.tg-tax-children .tg-tax-link-main{
  font-weight:500;
  font-size:14px;
}

/* Najgłębszy poziom – lekkie wcięcie */
.tg-tax-item.level-2 .tg-tax-row{
  padding-left:16px;
}

/* Ukryj przyciski toggle tam, gdzie nie powinno ich być */
.tg-tax-item:not(.level-0) .tg-tax-toggle{
  width:22px;
  height:22px;
  box-shadow:none;
}

/* Drobne poprawki RWD */
@media (max-width:640px){
  .tg-tax-sidebar .tg-card{
    padding:18px 16px;
  }
  .tg-tax-heading{
    font-size:17px;
  }
  .tg-tax-link-main{
    font-size:14px;
  }
}

/* ===== MENU KATEGORII – PRZYCISK ROZWIJANIA ===== */

.tg-tax-toggle{
  all: unset; /* zeruje odziedziczone style */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;
  border-radius: 999px;

  border: 1px solid var(--tg-border);
  background: #ffffff;
  cursor: pointer;

  box-shadow: 0 6px 14px rgba(10,16,25,.10);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tg-tax-toggle:hover{
  background: #fff7f4;
  box-shadow: 0 8px 18px rgba(10,16,25,.14);
  transform: translateY(-1px);
}

/* ikonka – mały „chevron” w dół */
.tg-tax-toggle::before{
  content:"";
  width: 8px;
  height: 8px;
  border-right: 2px solid #0b1220;
  border-bottom: 2px solid #0b1220;
  transform: rotate(45deg);              /* strzałka w dół */
  transition: transform .22s ease;
}

/* po otwarciu: strzałka w górę (nie „X”) */
.tg-tax-item.is-open > .tg-tax-row .tg-tax-toggle::before{
  transform: rotate(225deg);             /* odwrócony chevron */
}

/* schowaj ewentualne stare pseudo-elementy jeśli gdzieś zostały */
.tg-tax-chevron,
.tg-tax-chevron::before,
.tg-tax-chevron::after{
  display:none !important;
}

/* ====== MENU KATEGORII – PŁYNNE ROZWIJANIE ====== */

.tg-tax-tree{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* pojedyncza gałąź */
.tg-tax-item{
  border-radius:14px;
  background:#f9fafb;
  border:1px solid rgba(15,23,42,.06);
  overflow:hidden;
}

/* wiersz z nazwą + strzałką */
.tg-tax-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0px 12px;
  cursor:pointer;
}

.tg-tax-link-main{
  font-weight:700;
  color:#0b1220;
  text-decoration:none;
}

/* przycisk – okrągła „pigułka” ze strzałką */
.tg-tax-toggle{
  width:26px;
  height:26px;
  border-radius:999px;
  border:none;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(15,23,42,.09);
  transition:transform .18s ease, box-shadow .18s ease, background .15s ease;
}
.tg-tax-toggle:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(15,23,42,.14);
}

/* sama strzałka – kreska + grot */
.tg-tax-toggle::before{
  content:"";
  display:block;
  width:9px;
  height:9px;
  border-right:2px solid #0b1220;
  border-bottom:2px solid #0b1220;
  border-radius:2px;
  transform:rotate(45deg);          /* w dół */
  transition:transform .22s ease;
}

/* po otwarciu – „X” */
.tg-tax-item.is-open > .tg-tax-row .tg-tax-toggle::before{
  width:10px;
  height:10px;
  border-right:2px solid #e65227;
  border-bottom:2px solid #e65227;
  transform:rotate(135deg);         /* krzyżyk */
}

/* panel z podkategoriami – ANIMOWANY */
.tg-tax-children{
  overflow:hidden;
  height:0;                 /* start: zamknięty */
  opacity:0;
  transform:translateY(-4px);
      background: var(--tg-bg);
  transition:
    height .48s ease,
    opacity .22s ease,
    transform .22s ease;
  padding-inline:12px;
  padding-bottom:0;         /* padding dodamy dopiero przy otwarciu */
}

/* gdy gałąź otwarta – panel ma padding,
   wysokość ustawimy JS-em (scrollHeight) */
.tg-tax-item.is-open > .tg-tax-children{
  opacity:1;
  transform:translateY(0);
}

/* link „Wszystkie ...” */
.tg-tax-link-all{
  display:block;
  margin-top:6px;
  margin-bottom:4px;
  font-size:14px;
  color:#e65227;
  text-decoration:none;
}

/* listowanie dzieci (np. level-1) */
.tg-tax-item.level-1 .tg-tax-row{
  padding-left:16px;
}
.tg-tax-item.level-2 .tg-tax-row{
  font-size:14px;
}

.tg-tax-sidebar .tg-card {
    box-shadow: none;
    border: none;
    background: var(--tg-bg);
}

/* baza – niewidoczna, nie klikalna */
.tg-nav-drawer{
  position:fixed;
  inset:0;
  z-index:1000;
  pointer-events:none;
}

/* tło */
.tg-nav-drawer__scrim{
  position:absolute;
  inset:0;
  background:rgba(10,16,25,.28);
  opacity:0;
  transition:opacity .22s ease;
}

/* panel */
.tg-nav-drawer__panel{
  position:absolute;
  top:0; right:0; bottom:0;
  width:min(92vw,420px);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);
  border-left:1px solid var(--tg-border);
  transform:translateX(100%);
  transition:transform .25s ease;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* stan otwarty */
.tg-nav-drawer.is-open{
  pointer-events:auto;
}

.tg-nav-drawer.is-open .tg-nav-drawer__scrim{
  opacity:1;
}

.tg-nav-drawer.is-open .tg-nav-drawer__panel{
  transform:translateX(0);
}

.tg-nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;           /* kontrolujemy JS-em display + .is-open */
}

.tg-nav-drawer.is-open {
  display: block;
}

.tg-nav-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10,16,25,.28);
  opacity: 0;
  transition: opacity .22s ease;
}

.tg-nav-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(92vw, 420px);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  border-left: 1px solid var(--tg-border);
  transform: translateX(100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* kiedy is-open – scrim i panel są widoczne */
.tg-nav-drawer.is-open .tg-nav-drawer__scrim {
  opacity: 1;
}

.tg-nav-drawer.is-open .tg-nav-drawer__panel {
  transform: translateX(0);
}
  
/* Drawer ponad całą stroną */
.tg-header{ z-index: 3000; overflow: visible !important; }
.tg-burger{ z-index: 3002; }

.tg-nav-drawer{
  position: fixed; inset: 0;
  z-index: 4000 !important;       /* WYŻEJ niż wszystko na stronie */
}
.tg-nav-drawer[hidden]{ display: none; }

.tg-nav-drawer__scrim{
  position: absolute; inset: 0;
  background: rgba(10,16,25,.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);     /* rozmywa tylko tło ZA panelem */
  opacity: 0; transition: opacity .22s ease;
  z-index: 4000;
}
.tg-nav-drawer__panel{
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(92vw, 420px);
  background: rgba(255,255,255,.96);
  border-left: 1px solid var(--tg-border);
  transform: translateX(100%);
  transition: transform .25s ease;
  padding: 18px max(18px, env(safe-area-inset-right)) 18px max(18px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 12px;
  z-index: 4001;
}
.tg-nav-drawer.is-open .tg-nav-drawer__scrim{ opacity: 1; }
.tg-nav-drawer.is-open .tg-nav-drawer__panel{ transform: translateX(0); }

/* Gdy menu otwarte – tylko blokuj scroll. BEZ globalnego blur’u. */
html.nav-open, html.nav-open body{ overflow: hidden !important; }

/* Na wszelki wypadek: żadne tła/pseudo-warstwy nie nad headerem/drawerem */
.tg-hero--full, .tg-hero--full::before, .tg-hero--full::after, .parallax-bg,
.wp-block-cover, .wp-block-cover__image-background{
  z-index: auto !important; transform: none !important; filter: none !important;
}

/* Mobilne linki w drawerze – underline jak w headerze */
.tg-nav-mobile .wp-block-navigation__container{ display:flex; flex-direction:column; gap:8px; }
.tg-nav-mobile a{
  position:relative; padding:12px 10px; border-radius:12px; color:#0b1220;
  transition: background .15s ease, color .15s ease;
}
.tg-nav-mobile a:hover{ background:#fff; }
.tg-nav-mobile a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px;
  background: radial-gradient(#e6522796, transparent);
  transform:scaleX(0); transform-origin:center; transition:transform .22s ease; border-radius:2px;
}
.tg-nav-mobile a:hover::after,
.tg-nav-mobile a[aria-current="page"]::after,
.tg-nav-mobile .current-menu-item > a::after{ transform:scaleX(1); }

/* Twardo wyłącz overlay WordPressa (ten z dużym X) */
.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open{
  display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important;
}

/* ==== NAV DRAWER – wersja „wyjeżdża z prawej” ==== */

/* Kontener drawer'a – pełny ekran, domyślnie schowany (JS ustawia display:block + .is-open) */
.tg-nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 1400;          /* nad całą stroną, ale pod burgerem jeśli ten ma >1400 */
  display: none;          /* sterujemy tym w JS */
}

/* Gdy otwarte – tylko klasa .is-open, JS NIE używa już hidden */
.tg-nav-drawer.is-open {
  display: block;
}

/* Przyciemnione tło za panelem */
.tg-nav-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 25, 0.32);
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Panel wysuwany z prawej strony */
.tg-nav-drawer__panel {
  position: absolute;
  top: 170px !important;
  right: 0;
  bottom: 0;
  width: min(92vw, 420px);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-left: 1px solid var(--tg-border);

  display: flex;
  flex-direction: column;
  gap: 12px;

  transform: translateX(100%);        /* start poza ekranem */
  transition: transform 0.28s ease;   /* płynne wysuwanie */
}

/* Stan otwarty – scrim widoczny, panel wjeżdża na ekran */
.tg-nav-drawer.is-open .tg-nav-drawer__scrim {
  opacity: 1;
}

.tg-nav-drawer.is-open .tg-nav-drawer__panel {
  transform: translateX(0);
}

/* Dla pewności: header niczego nie ucina i jest pod drawerem */
.tg-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
  overflow: visible;
}

/* Burger nad headerem, ale pod panelem */
.tg-burger {
  position: relative;
  z-index: 1500;
}

/* === NAV DRAWER – wymuszone wysuwanie z prawej strony === */

.tg-nav-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1400 !important;     /* ponad stroną */
}

/* WordPress ustawia hidden – tego nie ruszamy, tylko respektujemy */
.tg-nav-drawer[hidden] {
  display: none !important;
}
.tg-nav-drawer:not([hidden]) {
  display: block !important;
}

/* Przyciemnione tło za menu */
.tg-nav-drawer__scrim {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(10,16,25,0.32) !important;
  opacity: 0;
  transition: opacity 0.28s ease;
}

/* Panel z menu – start poza ekranem po prawej */
.tg-nav-drawer__panel {
  position: absolute !important;
  top: 170 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(92vw, 420px) !important;

  background: rgba(255,255,255,0.94) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-left: 1px solid var(--tg-border);

  display: flex;
  flex-direction: column;
  gap: 12px;

  transform: translateX(100%) !important;   /* poza ekranem */
  transition: transform 0.28s ease !important;
}

/* Stan otwarty – JS dodaje klasę .is-open, my tylko animujemy */
.tg-nav-drawer.is-open .tg-nav-drawer__scrim {
  opacity: 1;
}

.tg-nav-drawer.is-open .tg-nav-drawer__panel {
  transform: translateX(0) !important;
}

/* Header pod drawerem, burger nad headerem */
.tg-header {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 1000;
  overflow: visible;
}
.tg-burger {
  position: relative;
  z-index: 1500;
}

/* Mobilne: stopka bez animacji, brak skakania przy dole strony */
@media (max-width: 780px){
  .tg-footer{
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

@media (max-width: 780px){
  .tg-hero--full{
    min-height: auto !important;   /* zamiast 56vh / 60vh */
    padding-top: 80px;             /* ręczny oddech */
    padding-bottom: 60px;
  }
}

/* === HERO SLIDER – DOPASOWANY KOLORYSTYCZNIE DO TECHNIKA GRZEWCZA === */

.hero-slider {
  position: relative;
  width: 100%;
  margin-top: 42px;
  min-height: 60vh;
  max-height: 90vh;
  overflow: hidden;
  font-family: var(--tg-font, system-ui);
  color: var(--tg-ink);
  background: var(--tg-bg); /* jasne tło jak cała strona */
  box-shadow: 0 10px 30px rgb(10 16 25 / 0%) inset, 0 0px 20px rgb(10 16 25 / 10%);
}

/* Każdy slajd */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}

.hero-slide.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Tło slajdu – zdjęcie wypełnia całość */
.hero-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  transition: transform 4.5s ease;
  filter: saturate(1.05) brightness(0.98);
}

.hero-slide.is-active .hero-slide-bg {
  transform: scale(1.06);
}

/* Overlay: jasny + pomarańczowy glow, żeby pasował do hero (.tg-hero--full) */
.hero-slide-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(230, 82, 39, 0.16), transparent 60%),
    radial-gradient(1100px 600px at -10% -20%, rgba(230, 82, 39, 0.10), transparent 65%),
    linear-gradient(
      110deg,
      rgba(246, 248, 250, 0.96) 0%,
      rgba(246, 248, 250, 0.92) 35%,
      rgba(246, 248, 250, 0.80) 60%,
      rgba(246, 248, 250, 0.40) 100%
    );
}

/* Kontener na treść – podobny „oddech” jak .tg-hero__inner */
.hero-slide-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: clamp(72px, 10vw, 120px) var(--tg-gutter);
  box-sizing: border-box;
}

.hero-slide-inner {
  max-width: var(--tg-container);
  margin: 0 auto;
}

/* Teksty – hierarchia spójna z h1/h2 motywu */
.hero-slide-inner h2 {
  font-size: var(--tg-h2);
  margin: 0 0 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--tg-ink-soft);
}

/* Pomarańczowa linia akcentowa pod nagłówkiem */
.hero-slide-inner h2::after {
  content: "";
  display: block;
  margin-top: 8px;
  width: 84px;
  height: 3px;
  border-radius: 999px;
  background: var(--tg-accent);
}

/* Tekst opisowy */
.hero-slide-inner p {
  font-size: var(--tg-text);
  line-height: var(--tg-leading);
  margin: 0;
  max-width: 54rem;
  color: var(--tg-muted);
      background: #ffffffc7;
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius);
  padding: 24px;
  box-shadow: var(--tg-shadow-soft);
  transition: transform .25s 
ease, border-color .25s 
ease, box-shadow .25s 
ease;
}

/* === STRZAŁKI NAWIGACJI – jasne karty jak reszta UI === */

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--tg-border);
  background: var(--tg-panel);
  color: var(--tg-ink);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  z-index: 3;
  box-shadow: var(--tg-shadow-soft);
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.hero-nav:hover {
  background: #fff;
  border-color: rgba(230, 82, 39, 0.55);
  color: var(--tg-accent);
  box-shadow: 0 10px 22px rgba(10, 16, 25, 0.12);
  transform: translateY(-50%) scale(1.05);
}

.hero-nav-prev {
  left: 18px;
}

.hero-nav-next {
  right: 18px;
}

/* Mobile – delikatne przygaszenie, żeby nie dominowały */
@media (max-width: 767px) {
  .hero-nav {
    opacity: 0.9;
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
  }
  
  .hero-nav-prev {
  left: 5px;
}

.hero-nav-next {
  right: 5px;
}
}

/* === KROPKI / PAGINACJA – akcent pomarańczowy === */

.hero-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}

.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid var(--tg-border);
  background: var(--tg-panel);
  cursor: pointer;
  padding: 0;
  display: inline-block;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.hero-dot.is-active {
  background: var(--tg-accent);
  border-color: var(--tg-accent);
  transform: scale(1.2);
  box-shadow: 0 0 0 4px rgba(230, 82, 39, 0.18);
}

/* === RESPONSYWNOŚĆ / PADDING === */

@media (min-width: 1200px) {
  .hero-slide-content {
    padding-left: calc((100vw - var(--tg-container)) / 2 + var(--tg-gutter));
    padding-right: calc((100vw - var(--tg-container)) / 2 + var(--tg-gutter));
  }
}

@media (max-width: 780px) {
.hero-slide-inner p {
    max-width: 260px;
}
  .hero-slide-content {
    padding: 72px var(--tg-gutter) 56px;
    align-items: flex-start;
  }

  .hero-slide-inner h2 {
    font-size: var(--tg-h2);
  }
}

/* === NASI KLIENCI – BANER LOGO === */

.clients-banner {
  padding: 40px var(--tg-gutter) 32px;
  background: var(--tg-bg);
  border-top: 1px solid var(--tg-border);
  border-bottom: 1px solid var(--tg-border);
}

.clients-banner__inner {
  max-width: var(--tg-container);
  margin: 0 auto;
}

.clients-banner__title {
letter-spacing: -0.01em;
    margin: 0 0 20px;
    color: var(--tg-ink-soft);
    font-size: var(--tg-h2);
    font-weight: 800;
}

/* PAS PRZEWIJANIA LOGO */

.clients-marquee {
  position: relative;
  overflow: hidden;
}

.clients-marquee__track {
  display: flex;
  align-items: center;
  gap: 48px;
  margin: 30px;
  /* trik: szerokość według zawartości + animacja w lewo */
  width: max-content;
  animation: clients-marquee-scroll 28s linear infinite;
}

/* Pauza po najechaniu myszką (desktop) */
.clients-marquee:hover .clients-marquee__track {
  animation-play-state: paused;
}

.clients-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 10px 36px;
  border-radius: 999px;
  background: var(--tg-panel);
  border: 1px solid var(--tg-border-soft, var(--tg-border));
  box-shadow: var(--tg-shadow-soft);
}

/* Obrazki – wyrównanie, jednakowa wysokość */
.clients-logo img {
  max-height: 60px;
  width: auto;
  display: block;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

/* Kolor po najechaniu (logo „ożywa”) */
.clients-logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-1px);
}

/* ANIMACJA PŁYNNEGO PRZEWIJANIA
   – ponieważ powieliliśmy listę logo 2x,
   przesuwamy track o 50% szerokości */
@keyframes clients-marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* RESPONSYWNOŚĆ */

@media (max-width: 768px) {
  .clients-banner {
    padding-top: 32px;
    padding-bottom: 24px;
  }

  .clients-banner__title {
    font-size: var(--tg-h4, 1.25rem);
    margin-bottom: 16px;
  }

  .clients-marquee__track {
    gap: 32px;
    animation-duration: 32s; /* lekko wolniej na mobile */
  }

  .clients-logo {
    min-width: 100px;
    padding: 8px 12px;
  }

  .clients-logo img {
    max-height: 32px;
  }
}

  .page-banner {
  position: relative;
  width: 100%;
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--tg-ink-contrast, #fff);
  overflow: hidden;
}

.page-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* przyciemnia tło dla czytelności tekstu */
}

.page-banner__content {
  position: relative;
  z-index: 2;
  padding: clamp(60px, 10vw, 120px) var(--tg-gutter);
  max-width: var(--tg-container);
}

.page-banner h1 {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  margin: 0 0 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-banner p {
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto;
      font-weight: 900;
    color: #ffffff;
}

/* warianty tła — dla kolejnych bannerów */
.banner-about {
  background: url('/wp-content/uploads/2025/11/banner-about.jpg') center/cover no-repeat;
}

.banner-offer {
  background: url('/wp-content/uploads/2025/11/banner-offer.jpg') center/cover no-repeat;
}

.banner-products {
  background: url('/wp-content/uploads/2025/11/banner-products.jpg') center/cover no-repeat;
}

.banner-projects {
  background: url('/wp-content/uploads/2025/11/banner-projects.jpg') center/cover no-repeat;
}

  .page-banner {
  position: relative;
  width: 100%;
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 10px 30px rgb(10 16 25 / 0%) inset, 0 0px 20px rgb(10 16 25 / 27%);
}

.page-banner .page-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); /* czarna warstwa 45% — dostateczny kontrast */
  z-index: 1;
}

.page-banner .page-banner__content {
  position: relative;
  z-index: 2;
  color: #ffffff; /* biały tekst – duży kontrast */
  padding: clamp(60px, 10vw, 120px) var(--tg-gutter);
  max-width: var(--tg-container);
}


  .gradient-text {
  background: linear-gradient(
    90deg,
    #e65227, /* Twój pomarańczowy akcent */
    #ff8a5c,
    #ffb184,
    #e65227
  );
  background-size: 300% 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradientTextAnimation 10s ease infinite;
}

@keyframes gradientTextAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

nav.tg-nav-drawer__panel {
    min-height: 400px;
}