/* ============================================================
   PNB - REDESIGN MOCKUP
   Wzorzec: imm.com.pl  |  Paleta: biel + #E54357 (czerwień) + #0E1F3D (granat)
   ============================================================ */

:root {
  /* Brand colors */
  --c-red:        #E54357;
  --c-red-dark:   #C7304A;
  --c-red-soft:   #FDECEE;
  --c-navy:       #0E1F3D;
  --c-navy-2:     #142A4F;
  --c-navy-soft:  #E8EEF7;
  --c-white:      #ffffff;
  --c-mint:       #6CD0B6;       /* delikatny akcent z imm */
  --c-mint-soft:  #E2F4EE;
  --c-grey-50:    #F5F7FA;
  --c-grey-100:   #ECEEF2;
  --c-grey-300:   #C9CED6;
  --c-grey-500:   #6E7585;
  --c-grey-700:   #2D3340;
  --c-text:       #1B2230;

  /* Typography */
  --ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ff-display: 'Inter', sans-serif;

  /* Layout */
  --maxw: 1240px;
  --maxw-narrow: 980px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(14,31,61,.06);
  --shadow-md: 0 8px 24px rgba(14,31,61,.10);
  --shadow-lg: 0 18px 48px rgba(14,31,61,.14);

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;  --s-8: 64px;
  --s-9: 96px; --s-10: 128px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-red); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--c-red-dark); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--ff-display);
  color: var(--c-navy);
  margin: 0 0 var(--s-4);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.01em;
  overflow-wrap: break-word; /* długie słowa nie wychodzą poza viewport na wąskich ekranach */
}
h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.15rem; }
p  { margin: 0 0 var(--s-4); }

/* ---------- Container ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-5); }
.container--narrow { max-width: var(--maxw-narrow); margin: 0 auto; padding: 0 var(--s-5); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  border: 2px solid transparent;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--c-red); color: #fff;
  box-shadow: 0 6px 18px rgba(229,67,89,.30);
}
.btn-primary:hover { background: var(--c-red-dark); color: #fff; }
.btn-outline {
  background: transparent; color: var(--c-navy);
  border-color: var(--c-navy);
}
.btn-outline:hover { background: var(--c-navy); color: #fff; }
.btn-ghost-light {
  background: transparent; color: #fff;
  border-color: rgba(255,255,255,.4);
}
.btn-ghost-light:hover { background: #fff; color: var(--c-navy); }
.btn-arrow::after { content: "→"; font-size: 1.1em; }

/* ---------- Header ---------- */
/* Kasujemy padding-top: 66px z legacy IMM style.css — PNB ma własny sticky header w flow, nie potrzebuje rezerwy. */
body.pnb-body { padding-top: 0 !important; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--c-grey-100);
}
.site-header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--s-5);
  display: flex; align-items: center; gap: var(--s-6);
  position: relative;
}
.site-logo {
  display: inline-flex; align-items: center;
  text-decoration: none;
  position: absolute;
  top: 0;
  left: 0;

}
.site-logo img { display: block; height: 95px; width: auto; }
/* Footer logo: bigger and on dark — keep red square, switch wordmark to white via filter trick (only on a white-version svg); for now, use a styled wordmark instead */
.site-footer__logo {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 900; font-size: 1.25rem; letter-spacing: -.01em;
  color: #fff; text-decoration: none;
}
.site-footer__logo .lm {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-red); color: #fff;
  width: 44px; height: 44px;
  border-radius: 6px; font-weight: 900; font-size: .9rem; letter-spacing: .04em;
}
.site-nav {
  display: flex; align-items: center; gap: var(--s-6);
  margin-left: auto;
}
.site-nav a {
  color: var(--c-navy);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .02em;
  position: relative;
  padding: 6px 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--c-red); }
.site-nav a.is-active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 3px; background: var(--c-red); border-radius: 2px;
}
/* ---------- Header — user account dropdown ---------- */
.header-account {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-left: 1px solid var(--c-grey-100);
  padding-left: var(--s-4);
  margin-left: var(--s-4);
}
.header-account__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--c-grey-100);
  color: var(--c-navy);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.header-account__trigger:hover,
.header-account.is-open .header-account__trigger {
  background: var(--c-red-soft);
  border-color: rgba(229,67,89,.4);
  color: var(--c-red-dark);
}
.header-account__trigger:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}
.header-account__dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-mint);
  border: 2px solid #fff;
}
/* Bombel koszyka — licznik produktów w prawym górnym rogu .header-account */
.pnb-cart-badge {
  position: absolute;
  top: -7px; right: -8px;
  z-index: 3;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-red); color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 1;
  border-radius: var(--radius-pill);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(229,67,89,.35);
  pointer-events: none;
}
.pnb-cart-badge.is-empty { display: none; }
/* Puls po zmianie liczby produktów (2s = 2 × 1s) — biało-czerwony ripple,
   klasa .is-pulsing nadawana przez pnb-sections.js */
.pnb-cart-badge.is-pulsing { animation: pnb-badge-pulse 1s ease-out 2; }
@keyframes pnb-badge-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255,255,255,.95), 0 0 0 0 rgba(229,67,89,.55);
  }
  35% { transform: scale(1.25); }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(255,255,255,0), 0 0 0 12px rgba(229,67,89,0);
  }
}
.header-account__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--c-grey-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 60;
  padding: 6px 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.header-account.is-open .header-account__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.header-account__menu ul {
  list-style: none; margin: 0; padding: 0;
}
.header-account__menu li a {
  display: block;
  padding: 10px 16px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-navy);
  transition: background .15s ease, color .15s ease;
}
.header-account__menu li a:hover {
  background: var(--c-grey-50);
  color: var(--c-red);
}
.header-account__greeting {
  padding: 12px 16px 10px;
  font-size: .82rem;
  color: var(--c-grey-500);
  border-bottom: 1px solid var(--c-grey-100);
  margin-bottom: 4px;
}
.header-account__sep {
  height: 1px;
  background: var(--c-grey-100);
  margin: 4px 0;
  list-style: none;
}

/* Mobile-only sekcja konta wewnątrz .site-nav (analogicznie do .site-nav__cta) */
.site-nav__account { display: none; }

.lang-switch {
  display: inline-flex; gap: 4px; font-size: .85rem; font-weight: 700;
  border-left: 1px solid var(--c-grey-100); padding-left: var(--s-5);
  color: var(--c-grey-500);
}
.lang-switch a { color: var(--c-grey-500); }
.lang-switch a.is-active { color: var(--c-red); }
.header-cta {
  display: inline-flex; align-items: center; gap: var(--s-3);
  margin-left: var(--s-4);
}
/* CTA wewnątrz <nav> — pokazujemy tylko poniżej 360px (header-cta wtedy znika). Domyślnie ukryty. */
.site-nav__cta { display: none; }

/* ---------- Sections ---------- */
.section { padding: var(--s-9) 0; }
/* Responsywne skalowanie odstępów sekcji (≤1440 obejmuje też mobile) */
@media (max-width: 1680px) { .section { padding: var(--s-7) 0 var(--s-6); } }
@media (max-width: 1440px) { .section { padding: var(--s-5) 0 var(--s-4); } }
.section--tight { padding: var(--s-7) 0; }
.section--navy { background: var(--c-navy); color: #fff; }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.section--soft { background: var(--c-grey-50); }
.section--mint { background: var(--c-mint-soft); }
.eyebrow {
  display: inline-block;
  font-size: .85rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-red);
  margin-bottom: var(--s-3);
}

/* ---------- Hero ---------- */
.hero {
  padding: var(--s-9) 0 var(--s-8);
  text-align: center;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(800px 400px at 50% 0%, rgba(229,67,89,.05), transparent 60%);
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }
.hero .eyebrow { color: var(--c-red); }
.hero h1 .accent { color: var(--c-red); }
.hero p.lede {
  max-width: 760px; margin: var(--s-5) auto 0;
  font-size: 1.1rem; color: var(--c-grey-700);
}
.hero .hero-actions {
  margin-top: var(--s-6);
  display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap;
}

/* ---------- Cards / data tiles ---------- */
.tiles {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.tile {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.section--navy .tile { color: #fff; }
.tile .tile-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(229,67,89,.16); color: var(--c-red);
  border-radius: 10px; margin-bottom: var(--s-4); font-size: 1.4rem;
}
.tile h3 { color: inherit; font-size: 1.05rem; margin-bottom: var(--s-3); }
.tile p { font-size: .92rem; opacity: .85; margin: 0; }

/* ---------- Two-column alternating (Oferta-style) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
  /* Brak własnego marginesu — sekcja (.section) ma własny padding pionowy,
     dublowanie powodowało nadmiar światła nad/pod sekcją (uwaga klienta). */
  margin: 0;
}
.split.reverse > .split-media-wrap { order: -1; }
.split-media-wrap img {
  width: auto !important;
}
.split--flush { margin: 0; }
.split-media-wrap,
.split-media {
  background: var(--c-grey-50);
  border-radius: var(--radius-lg);
  padding: var(--s-7);
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-grey-500);
  border: 1px solid var(--c-grey-100);
  position: relative; overflow: hidden;
}
/* Realne media (img / video) — bez ramki/tła/paddingu, samo zaokrąglenie */
.split-media-wrap:has(> img),
.split-media-wrap:has(> video),
.split-media:has(> img),
.split-media:has(> video) {
  background: transparent;
  border: 0;
  padding: 0;
  min-height: 0;
}
.split-media .media-badge {
  position: absolute; top: 18px; left: 18px;
  background: var(--c-red); color: #fff;
  padding: 6px 12px; border-radius: var(--radius-pill);
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.split-content h2 { font-size: 1.8rem; }

/* ---------- Tabs (raporty-style) ---------- */
.tabs-block { display: grid; grid-template-columns: 240px 1fr; gap: var(--s-7); align-items: start; }
.tabs-list { display: flex; flex-direction: column; gap: 8px; }
.tab-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 14px 16px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--c-grey-100);
  font-weight: 700; color: var(--c-navy); font-size: .95rem;
  cursor: pointer;
  transition: all .15s ease;
}
.tab-item.is-active { background: var(--c-red-soft); border-color: rgba(229,67,89,.25); color: var(--c-red-dark); }
.tab-item:hover { border-color: var(--c-red); }
.tab-icon {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-red); color: #fff; border-radius: 50%;
  font-size: .8rem;
}
.tab-content {
  background: #fff;
  border: 1px solid var(--c-grey-100);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
}

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-7);
}
.price-card {
  background: #fff;
  border: 1px solid var(--c-grey-100);
  border-radius: var(--radius-lg);
  padding: var(--s-7) var(--s-6);
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.price-card.is-popular {
  border: 2px solid var(--c-red);
  box-shadow: var(--shadow-md);
}
.price-card .badge-popular {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--c-red); color: #fff;
  padding: 6px 16px; border-radius: var(--radius-pill);
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  /* zabezpieczenie przed overflow przy długim tekście (np. placeholderze) */
  max-width: calc(100% - 16px);
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}
.price-card h3 { font-size: 1.4rem; margin-bottom: var(--s-2); }
.price-card .plan-tag { color: var(--c-grey-500); font-size: .9rem; margin-bottom: var(--s-5); }
.price-card .plan-price { font-size: 2.4rem; font-weight: 900; color: var(--c-navy); }
.price-card .plan-price small { font-size: .8rem; color: var(--c-grey-500); font-weight: 600; }
.price-card ul { list-style: none; padding: 0; margin: var(--s-5) 0; }
.price-card li {
  padding: 10px 0 10px 28px;
  position: relative; font-size: .92rem;
  border-bottom: 1px solid var(--c-grey-100);
}
.price-card li::before {
  content: "✓"; color: var(--c-red);
  position: absolute; left: 0; top: 10px;
  font-weight: 900;
}
.price-card .btn { margin-top: auto; }

/* Pricing comparison table */
.pricing-table {
  width: 100%; border-collapse: collapse; margin-top: var(--s-7);
  background: #fff; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pricing-table th, .pricing-table td {
  padding: 16px 20px; text-align: left;
  border-bottom: 1px solid var(--c-grey-100);
}
.pricing-table thead th {
  background: var(--c-navy); color: #fff;
  font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; font-size: .8rem;
}
.pricing-table tbody tr:hover { background: var(--c-grey-50); }
.pricing-table .price-cell { font-weight: 800; color: var(--c-red);  text-align: center;}
.pricing-table .price-cell .price-amount { display: block; text-align: center; width: 100%;}

/* Kompaktowy przycisk „Subskrybuj" pod ceną w tabeli porównawczej */
.btn-subscribe {
  padding: 8px 18px;
  font-size: 10px;
  font-weight: 700;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.pricing-table .price-cell .price-subscribe { margin-top: 10px; text-align: center}

/* ---------- Stats / counters ---------- */
.stat-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6); align-items: center;
  background: #fff; border-radius: var(--radius-lg);
  padding: var(--s-6) var(--s-7);
  box-shadow: var(--shadow-sm);
  position: relative; z-index: 2;
}
.stat-band .stat { text-align: center; }
.stat .stat-num { font-size: 2.2rem; font-weight: 900; color: var(--c-red); display: block; }
.stat .stat-label { font-size: .85rem; color: var(--c-grey-500); margin: 0;}

/* ---------- Timeline ---------- */
.timeline {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  margin-top: var(--s-7);
}
.timeline-item {
  text-align: center; padding: var(--s-6) var(--s-5);
  border-top: 4px solid var(--c-red);
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.timeline-year { font-size: 2.2rem; font-weight: 900; color: var(--c-red); margin-bottom: var(--s-3); display: block; }

/* ---------- Bulletin evolution (ery biuletynów) ---------- */
.bulletin-eras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-6);
  margin-top: var(--s-7);
}
.bulletin-era { text-align: center; }
.bulletin-era__year {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--c-navy);
  margin-bottom: var(--s-4);
}
.section--navy .bulletin-era__year { color: #fff; }
.bulletin-era__media > img,
.bulletin-era__media > video {
  border-radius: var(--radius-lg);
}

/* ---------- Testimonials ---------- */
.testi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5); margin-top: var(--s-7);
}
.testi-card {
  background: #fff; border-radius: var(--radius-lg);
  padding: var(--s-6); box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-grey-100);
  position: relative;
}
.testi-card::before {
  content: "\201C"; /* lewy cudzysłów typograficzny — escape Unicode, żeby nie psuć parsera CSS */
  position: absolute; top: 8px; right: 18px;
  font-family: Georgia, serif;
  font-size: 4rem; color: var(--c-red); opacity: .2;
  line-height: 1;
}
.testi-card p { font-style: italic; color: var(--c-grey-700); }
.testi-author { font-weight: 700; color: var(--c-navy); margin-top: var(--s-4); display: block; }
.testi-role { font-size: .85rem; color: var(--c-grey-500); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 860px; margin: var(--s-7) auto 0; }
.faq-item {
  background: #fff;
  border: 1px solid var(--c-grey-100);
  border-radius: var(--radius);
  margin-bottom: var(--s-3);
  overflow: hidden;
}
.faq-q {
  width: 100%; text-align: left;
  padding: 18px 24px;
  font-weight: 700; color: var(--c-navy);
  font-size: 1rem;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-q::after { content: "+"; font-size: 1.6rem; color: var(--c-red); transition: transform .2s ease; }
.faq-item.is-open .faq-q::after { transform: rotate(45deg); }
.faq-a {
  padding: 0 24px;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .25s ease, padding .25s ease;
  color: var(--c-grey-700);
}
.faq-a > * { overflow: hidden; }
.faq-item.is-open .faq-a { padding: 0 24px 22px; grid-template-rows: 1fr; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-navy); color: #fff;
  padding: var(--s-9) 0 var(--s-6);
  font-size: .92rem;
}
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: var(--s-4); }
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: var(--s-7);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 10px; }
.footer-bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--s-4);
  color: rgba(255,255,255,.7); font-size: .85rem;
}

/* ---------- Form ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.form-row { display: flex; flex-direction: column; }
.form-row.full { grid-column: 1 / -1; }
.form-row label { font-weight: 600; font-size: .88rem; margin-bottom: 6px; color: var(--c-navy); }
.form-row input, .form-row select, .form-row textarea {
  padding: 12px 14px;
  border: 1px solid var(--c-grey-300);
  border-radius: 10px;
  font: inherit; color: var(--c-text); background: #fff;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: none; border-color: var(--c-red);
  box-shadow: 0 0 0 3px rgba(229,67,89,.15);
}
.form-row textarea { resize: vertical; min-height: 140px; }

/* ---------- Contact form — CF7 submit button ----------
   Wrapper formularza ma klasę .btn-send-wrapp-alt (zmieniona z legacy .btn-send-wrapp,
   żeby uniknąć kolizji z regułami IMM ze style.css — pomarańczowy :hover i pusty :after).
   Stylujemy pod PNB: czerwony pill jak .btn-primary.
   Strzałka idzie na wrapper, bo input[type=submit] nie renderuje pseudo-elementów. */
.pnb-body .btn-send-wrapp-alt {
  position: relative;
  display: inline-block;
}
.pnb-body .btn-send-wrapp-alt .wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 52px 14px 28px;            /* prawy padding robi miejsce na strzałkę */
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--c-red); color: #fff;
  font-weight: 700; font-size: .95rem; letter-spacing: .01em; line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(229,67,89,.30);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.pnb-body .btn-send-wrapp-alt .wpcf7-submit:hover {
  background: var(--c-red-dark);
  transform: translateY(-1px);
}
.pnb-body .btn-send-wrapp-alt .wpcf7-submit:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 2px;
}
/* Strzałka → na wrapperze (przy inpucie zostawiony prawy padding) */
.pnb-body .btn-send-wrapp-alt::after {
  content: "→";
  position: absolute; top: 50%; right: 24px;
  transform: translateY(-50%);
  color: #fff; font-size: 1.1em; font-weight: 700;
  pointer-events: none;
}

/* ---------- Contact info card ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-7); }
.contact-info {
  background: var(--c-navy); color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--s-7);
}
.contact-info h2 { color: #fff; }
.contact-info-item { display: flex; gap: var(--s-4); margin-bottom: var(--s-5); }
.contact-info-item .ci-icon {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-red); color: #fff; border-radius: 50%;
  font-weight: 900;
}
/* Etykieta + wartość w jednej linii (E-mail, Telefon, …). */
.contact-info-item > div:last-child {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .4rem;
  min-width: 0;
}
.contact-info-item strong::after { content: ":"; }
.contact-info-item span { color: rgba(255,255,255,.85); word-break: break-word; }

/* ---------- CTA stripe ---------- */
.cta-stripe {
  background: linear-gradient(110deg, var(--c-red) 0%, var(--c-red-dark) 100%);
  color: #fff;
  padding: var(--s-7) var(--s-7);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  flex-wrap: wrap;
  box-shadow: var(--shadow-md);
}
.cta-stripe h2 { color: #fff; margin-bottom: 6px; font-size: 1.7rem; }
.cta-stripe p { margin: 0; opacity: .9; }

/* ---------- Misc ---------- */
.subtle { color: var(--c-grey-500); }
/* ---------- Spacing utilities (Bootstrap-like) ----------
   Składnia jak w Bootstrapie: m|p + [t|b|s|e|x|y|''] + - + krok.
   UWAGA: krok = indeks tokena PNB (--s-N), NIE skala rem Bootstrapa.
     0 → 0
     1 → 4px    2 → 8px    3 → 12px   4 → 16px   5 → 24px
     6 → 32px   7 → 48px   8 → 64px   9 → 96px   10 → 128px
   Strony: t=top, b=bottom, s/l=left, e/r=right, x=left+right, y=top+bottom.
   Wszystkie z !important — utility nadpisuje style komponentów. */

.m-0  { margin: 0 !important; }
.mt-0, .my-0 { margin-top: 0 !important; }
.mb-0, .my-0 { margin-bottom: 0 !important; }
.ms-0, .ml-0, .mx-0 { margin-left: 0 !important; }
.me-0, .mr-0, .mx-0 { margin-right: 0 !important; }
.p-0  { padding: 0 !important; }
.pt-0, .py-0 { padding-top: 0 !important; }
.pb-0, .py-0 { padding-bottom: 0 !important; }
.ps-0, .pl-0, .px-0 { padding-left: 0 !important; }
.pe-0, .pr-0, .px-0 { padding-right: 0 !important; }

.m-1  { margin: var(--s-1) !important; }
.mt-1, .my-1 { margin-top: var(--s-1) !important; }
.mb-1, .my-1 { margin-bottom: var(--s-1) !important; }
.ms-1, .ml-1, .mx-1 { margin-left: var(--s-1) !important; }
.me-1, .mr-1, .mx-1 { margin-right: var(--s-1) !important; }
.p-1  { padding: var(--s-1) !important; }
.pt-1, .py-1 { padding-top: var(--s-1) !important; }
.pb-1, .py-1 { padding-bottom: var(--s-1) !important; }
.ps-1, .pl-1, .px-1 { padding-left: var(--s-1) !important; }
.pe-1, .pr-1, .px-1 { padding-right: var(--s-1) !important; }

.m-2  { margin: var(--s-2) !important; }
.mt-2, .my-2 { margin-top: var(--s-2) !important; }
.mb-2, .my-2 { margin-bottom: var(--s-2) !important; }
.ms-2, .ml-2, .mx-2 { margin-left: var(--s-2) !important; }
.me-2, .mr-2, .mx-2 { margin-right: var(--s-2) !important; }
.p-2  { padding: var(--s-2) !important; }
.pt-2, .py-2 { padding-top: var(--s-2) !important; }
.pb-2, .py-2 { padding-bottom: var(--s-2) !important; }
.ps-2, .pl-2, .px-2 { padding-left: var(--s-2) !important; }
.pe-2, .pr-2, .px-2 { padding-right: var(--s-2) !important; }

.m-3  { margin: var(--s-3) !important; }
.mt-3, .my-3 { margin-top: var(--s-3) !important; }
.mb-3, .my-3 { margin-bottom: var(--s-3) !important; }
.ms-3, .ml-3, .mx-3 { margin-left: var(--s-3) !important; }
.me-3, .mr-3, .mx-3 { margin-right: var(--s-3) !important; }
.p-3  { padding: var(--s-3) !important; }
.pt-3, .py-3 { padding-top: var(--s-3) !important; }
.pb-3, .py-3 { padding-bottom: var(--s-3) !important; }
.ps-3, .pl-3, .px-3 { padding-left: var(--s-3) !important; }
.pe-3, .pr-3, .px-3 { padding-right: var(--s-3) !important; }

.m-4  { margin: var(--s-4) !important; }
.mt-4, .my-4 { margin-top: var(--s-4) !important; }
.mb-4, .my-4 { margin-bottom: var(--s-4) !important; }
.ms-4, .ml-4, .mx-4 { margin-left: var(--s-4) !important; }
.me-4, .mr-4, .mx-4 { margin-right: var(--s-4) !important; }
.p-4  { padding: var(--s-4) !important; }
.pt-4, .py-4 { padding-top: var(--s-4) !important; }
.pb-4, .py-4 { padding-bottom: var(--s-4) !important; }
.ps-4, .pl-4, .px-4 { padding-left: var(--s-4) !important; }
.pe-4, .pr-4, .px-4 { padding-right: var(--s-4) !important; }

.m-5  { margin: var(--s-5) !important; }
.mt-5, .my-5 { margin-top: var(--s-5) !important; }
.mb-5, .my-5 { margin-bottom: var(--s-5) !important; }
.ms-5, .ml-5, .mx-5 { margin-left: var(--s-5) !important; }
.me-5, .mr-5, .mx-5 { margin-right: var(--s-5) !important; }
.p-5  { padding: var(--s-5) !important; }
.pt-5, .py-5 { padding-top: var(--s-5) !important; }
.pb-5, .py-5 { padding-bottom: var(--s-5) !important; }
.ps-5, .pl-5, .px-5 { padding-left: var(--s-5) !important; }
.pe-5, .pr-5, .px-5 { padding-right: var(--s-5) !important; }

.m-6  { margin: var(--s-6) !important; }
.mt-6, .my-6 { margin-top: var(--s-6) !important; }
.mb-6, .my-6 { margin-bottom: var(--s-6) !important; }
.ms-6, .ml-6, .mx-6 { margin-left: var(--s-6) !important; }
.me-6, .mr-6, .mx-6 { margin-right: var(--s-6) !important; }
.p-6  { padding: var(--s-6) !important; }
.pt-6, .py-6 { padding-top: var(--s-6) !important; }
.pb-6, .py-6 { padding-bottom: var(--s-6) !important; }
.ps-6, .pl-6, .px-6 { padding-left: var(--s-6) !important; }
.pe-6, .pr-6, .px-6 { padding-right: var(--s-6) !important; }

.m-7  { margin: var(--s-7) !important; }
.mt-7, .my-7 { margin-top: var(--s-7) !important; }
.mb-7, .my-7 { margin-bottom: var(--s-7) !important; }
.ms-7, .ml-7, .mx-7 { margin-left: var(--s-7) !important; }
.me-7, .mr-7, .mx-7 { margin-right: var(--s-7) !important; }
.p-7  { padding: var(--s-7) !important; }
.pt-7, .py-7 { padding-top: var(--s-7) !important; }
.pb-7, .py-7 { padding-bottom: var(--s-7) !important; }
.ps-7, .pl-7, .px-7 { padding-left: var(--s-7) !important; }
.pe-7, .pr-7, .px-7 { padding-right: var(--s-7) !important; }

.m-8  { margin: var(--s-8) !important; }
.mt-8, .my-8 { margin-top: var(--s-8) !important; }
.mb-8, .my-8 { margin-bottom: var(--s-8) !important; }
.ms-8, .ml-8, .mx-8 { margin-left: var(--s-8) !important; }
.me-8, .mr-8, .mx-8 { margin-right: var(--s-8) !important; }
.p-8  { padding: var(--s-8) !important; }
.pt-8, .py-8 { padding-top: var(--s-8) !important; }
.pb-8, .py-8 { padding-bottom: var(--s-8) !important; }
.ps-8, .pl-8, .px-8 { padding-left: var(--s-8) !important; }
.pe-8, .pr-8, .px-8 { padding-right: var(--s-8) !important; }

.m-9  { margin: var(--s-9) !important; }
.mt-9, .my-9 { margin-top: var(--s-9) !important; }
.mb-9, .my-9 { margin-bottom: var(--s-9) !important; }
.ms-9, .ml-9, .mx-9 { margin-left: var(--s-9) !important; }
.me-9, .mr-9, .mx-9 { margin-right: var(--s-9) !important; }
.p-9  { padding: var(--s-9) !important; }
.pt-9, .py-9 { padding-top: var(--s-9) !important; }
.pb-9, .py-9 { padding-bottom: var(--s-9) !important; }
.ps-9, .pl-9, .px-9 { padding-left: var(--s-9) !important; }
.pe-9, .pr-9, .px-9 { padding-right: var(--s-9) !important; }

.m-10 { margin: var(--s-10) !important; }
.mt-10, .my-10 { margin-top: var(--s-10) !important; }
.mb-10, .my-10 { margin-bottom: var(--s-10) !important; }
.ms-10, .ml-10, .mx-10 { margin-left: var(--s-10) !important; }
.me-10, .mr-10, .mx-10 { margin-right: var(--s-10) !important; }
.p-10 { padding: var(--s-10) !important; }
.pt-10, .py-10 { padding-top: var(--s-10) !important; }
.pb-10, .py-10 { padding-bottom: var(--s-10) !important; }
.ps-10, .pl-10, .px-10 { padding-left: var(--s-10) !important; }
.pe-10, .pr-10, .px-10 { padding-right: var(--s-10) !important; }

/* margin: auto (m.in. .mx-auto do centrowania) */
.m-auto  { margin: auto !important; }
.mt-auto, .my-auto { margin-top: auto !important; }
.mb-auto, .my-auto { margin-bottom: auto !important; }
.ms-auto, .ml-auto, .mx-auto { margin-left: auto !important; }
.me-auto, .mr-auto, .mx-auto { margin-right: auto !important; }
.text-center { text-align: center; }
.muted { opacity: .8; }

ul.checks { list-style: none; padding: 0; }
ul.checks li {
  padding: 10px 0 10px 36px; position: relative;
}
ul.checks li::before {
  content: "✓"; position: absolute; left: 0; top: 10px;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-red); color: #fff;
  border-radius: 50%; font-weight: 900; font-size: .85rem;
}

/* placeholder media boxes */
.ph-media {
  background:
    repeating-linear-gradient(45deg,
      rgba(14,31,61,.04) 0 12px,
      rgba(14,31,61,.07) 12px 24px);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-grey-500);
  font-weight: 600; font-size: .9rem;
  padding: var(--s-7);
  min-height: 240px;
}
/* AI prompt placeholder — for image-gen briefs in mockups */
.ai-prompt {
  background: #fff;
  border: 2px dashed var(--c-red);
  border-radius: var(--radius);
  padding: var(--s-5) var(--s-5);
  font-size: .82rem; line-height: 1.55;
  color: var(--c-grey-700);
  position: relative;
  text-align: left;
  min-height: 240px;
  display: flex; flex-direction: column; gap: 8px;
}
.ai-prompt::before {
  content: "AI IMAGE PROMPT";
  position: absolute; top: -10px; left: 18px;
  background: var(--c-red); color: #fff;
  padding: 2px 10px; border-radius: 4px;
  font-size: .7rem; font-weight: 800; letter-spacing: .14em;
}
.ai-prompt strong { color: var(--c-navy); display: block; font-size: .92rem; margin-bottom: 4px; }
.ai-prompt code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--c-grey-50);
  padding: 2px 6px; border-radius: 4px; font-size: .8rem;
  color: var(--c-red-dark);
}
.ai-prompt .prompt-body {
  background: var(--c-grey-50);
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--c-red);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-prompt .prompt-meta { font-size: .72rem; color: var(--c-grey-500); }
/* Smaller variant for tighter contexts */
.ai-prompt--sm { min-height: 180px; padding: var(--s-4); }
/* Placeholder text element used in cleanup */
.placeholder-note {
  background: rgba(229,67,89,.06);
  border: 1px dashed var(--c-red);
  color: var(--c-red-dark);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .85rem;
  font-style: italic;
  display: inline-block;
}

/* logos strip */
.logos-strip {
  display: flex; align-items: center; flex-wrap: wrap;
  justify-content: center; gap: var(--s-7);
  padding: var(--s-5) 0;
  opacity: .7;
}
.logos-strip span {
  font-weight: 700; color: var(--c-grey-500);
  font-size: 1rem; letter-spacing: .1em;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
  z-index: 100; padding: 8px 16px;
  background: var(--c-red); color: #fff; font-weight: 700;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  position: fixed; left: 0; top: 0;
  width: auto; height: auto;
}

/* ---------- Screen reader only ---------- */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  border: 0; white-space: nowrap;
}

/* ---------- Hamburger ---------- */
.hamburger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px; padding: 6px;
  cursor: pointer;
}
.hamburger span {
  display: block; width: 100%; height: 2px;
  background: var(--c-navy); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Section header (utility) ---------- */
.section-header { text-align: center; max-width: 780px; margin: 0 auto var(--s-7); }

/* ---------- Table responsive ---------- */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.col-product { min-width: 240px; }
.text-sm { font-size: .85rem; }

/* ---------- Product tile (other_products) ---------- */
.tile--product {
  background: #fff; color: var(--c-text); text-decoration: none;
  border: 1px solid var(--c-grey-100); display: block;
}
a.tile--product:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--c-text); }
.tile--product h3 { color: var(--c-navy); }

/* ---------- Timeline heading ---------- */
.timeline-item h3 { font-size: 1.15rem; }

/* ---------- Blockquote reset for testimonials ---------- */
blockquote.testi-card { margin: 0; }
blockquote.testi-card footer { margin-top: var(--s-4); }
blockquote.testi-card cite { font-style: normal; }

/* ---------- Responsive ---------- */

/* Strefa ściśnięcia między pełnym desktopem a hamburgerem (992-1240px):
   przy dłuższych etykietach (np. EN „HOME PAGE") header nie mieści się
   w jednej linii i zawijał tekst linków na 2 wiersze, nachodząc na
   position:absolute logo. Zmniejszamy odstępy/typografię zamiast czekać
   na przełamanie do hamburgera. */
@media (min-width: 992px) and (max-width: 1240px) {
  .site-header__inner { gap: var(--s-4); }
  .site-nav { gap: var(--s-4); }
  .site-nav a { font-size: .82rem; }
  .header-account { padding-left: var(--s-3); margin-left: var(--s-3); }
  .lang-switch { padding-left: var(--s-3); }
  .header-cta { margin-left: var(--s-3); }
}

@media (max-width: 991px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: var(--s-5); }
  .split.reverse > .split-media-wrap { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .stat-band { grid-template-columns: 1fr 1fr; }
  .tabs-block { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }

  /* ---- Header: kompaktowe rozmiary, logo statyczne, hamburger po prawej ---- */
  .site-header__inner {
    padding: 12px var(--s-4);
    gap: var(--s-3);
  }
  .site-logo {
    position: absolute;
    flex-shrink: 0;
  }
  .site-logo img { height: 74px; }

  .site-nav { display: none; }

  .lang-switch {
    order: 1;
    margin-left: auto;
    border-left: 0;
    padding-left: 0;
    font-size: .8rem;
  }
  .header-cta {
    order: 2;
    margin-left: 0;
  }
  .header-cta .btn {
    padding: 8px 14px;
    font-size: .85rem;
  }
  .hamburger {
    display: flex;
    order: 3;
    margin-left: var(--s-2);
  }

  /* ---- Mobile menu — slide-down panel z większą typografią ---- */
  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 67px;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    padding: var(--s-6) var(--s-5) var(--s-7);
    gap: 4px;
    z-index: 49;
    overflow-y: auto;
    box-shadow: 0 12px 24px -8px rgba(14,31,61,.08);
    animation: pnbNavSlide .22s ease-out;
  }
  .site-nav.is-open a {
    font-size: 1.15rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    padding: 14px 16px;
    border-radius: 10px;
    color: var(--c-navy);
    transition: background .15s ease, color .15s ease;
  }
  .site-nav.is-open a:hover {
    background: var(--c-grey-50);
    color: var(--c-red);
  }
  .site-nav.is-open a.is-active {
    background: var(--c-red-soft);
    color: var(--c-red-dark);
  }
  /* underline desktopowy nie pasuje w mobile menu */
  .site-nav.is-open a.is-active::after { display: none; }

  /* Header account: ukryty w mobile, sekcja w mobilnym menu */
  .header-account { display: none; }

  .site-nav.is-open .site-nav__account {
    display: block;
    margin-top: var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--c-grey-100);
  }
  .site-nav.is-open .site-nav__account-greeting {
    padding: 0 16px 10px;
    font-size: .85rem;
    color: var(--c-grey-500);
    font-weight: 600;
  }
  .site-nav.is-open .site-nav__account a {
    /* dziedziczy styl .site-nav.is-open a, dorzucamy mniejszą wagę */
    font-size: 1rem;
    font-weight: 500;
    padding: 12px 16px;
  }
  .site-nav.is-open .site-nav__account-sep {
    height: 1px;
    background: var(--c-grey-100);
    margin: 6px 16px;
  }

  @keyframes pnbNavSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Blokada scrolla body kiedy menu otwarte */
  body:has(.site-nav.is-open) { overflow: hidden; }
}

@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: 1fr; }
  .cta-stripe { flex-direction: column; text-align: center; }

  /* Mniejsze paddingi kontenera — większy obszar treści.
     (.section padding obsługują teraz breakpointy 1680/1440 powyżej) */
  .container,
  .container--narrow { padding: 0 var(--s-4); }
  .section--tight { padding: var(--s-6) 0; }

  /* Hero: kompaktowy padding pionowy */
  .hero { padding: var(--s-7) 0 var(--s-6); }

  /* Karty cennika — mniej oddechu */
  .price-card { padding: var(--s-6) var(--s-5); }
  .price-card .badge-popular {
    font-size: .68rem;
    padding: 5px 10px;
    letter-spacing: .06em;
    top: -10px;
  }

  .site-nav.is-open {
     top: 57px;
   }

  /* Cennik: poziomy scroll z peek ~1.2 kart — sygnalizuje że jest więcej treści.
     Override grid z bloku <=991px. Padding-top robi miejsce dla badge-popular (top: -10px). */
  .pricing-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--s-4);
    padding: var(--s-3) 2px var(--s-4);
    scrollbar-width: none; /* Firefox */
  }
  .pricing-grid::-webkit-scrollbar { display: none; }
  .pricing-grid > .price-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }

  /* Buttony: pozwól na łamanie + zmniejsz padding (lepsze tap-targets bez overflow) */
  .btn {
    padding: 6px 12px;
    font-size: 12px;
    white-space: normal;
    line-height: 1.2;
  }

  /* Bardzo wąskie ekrany: kompaktowy header */
  .site-header__inner { padding: 10px var(--s-3); gap: 8px; }
  .site-logo img { height: 56px; }
  .header-cta .btn { padding: 7px 12px; font-size: .8rem; }
  .lang-switch { font-size: .78rem; }

  .site-logo {
     top: 4px;
   }
}

/* ---------- Bardzo wąskie ekrany (smartfony portrait <=360px) ---------- */
@media (max-width: 360px) {
  /* Subskrybuj znika z headera, pojawia się jako ostatni element w mobilnym menu */
  .header-cta { display: none; }

  .site-nav.is-open a.site-nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    margin-top: var(--s-5);
    padding: 14px 28px;
    background: var(--c-red);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    box-shadow: 0 6px 18px rgba(229,67,89,.30);
    text-transform: none;
    letter-spacing: 0;
  }
  .site-nav.is-open a.site-nav__cta:hover,
  .site-nav.is-open a.site-nav__cta:focus {
    background: var(--c-red-dark);
    color: #fff;
  }
}

/* ============================================================
   PNB — strona standardowa (page-pnb-simple.php)
   Layout dla zwykłej treści (Polityka, Regulamin, „O nas").
   Wąski kontener + bogata typografia prose.
   ============================================================ */

/* Hero z tytułem strony */
.pnb-simple__hero {
  background: var(--c-grey-50);
  padding: var(--s-7) 0 var(--s-6);
  border-bottom: 1px solid var(--c-grey-100);
  text-align: center;
}
.pnb-simple__hero .eyebrow {
  margin-bottom: var(--s-2);
}
.pnb-simple__hero h1 {
  margin: 0;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
}

/* Prose: bogata typografia dla the_content() */
.pnb-prose {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--c-grey-700);
}
.pnb-prose > *:first-child { margin-top: 0; }
.pnb-prose > *:last-child  { margin-bottom: 0; }

.pnb-prose h2,
.pnb-prose h3,
.pnb-prose h4 {
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
  color: var(--c-navy);
}
.pnb-prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.pnb-prose h3 { font-size: 1.2rem; }
.pnb-prose h4 { font-size: 1.05rem; }

.pnb-prose p {
  margin: 0 0 var(--s-4);
}
.pnb-prose strong { color: var(--c-navy); font-weight: 700; }

.pnb-prose a {
  color: var(--c-red);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.pnb-prose a:hover {
  color: var(--c-red-dark);
  text-decoration-thickness: 2px;
}

.pnb-prose ul,
.pnb-prose ol {
  padding-left: var(--s-5);
  margin: 0 0 var(--s-4);
}
.pnb-prose li {
  margin-bottom: 8px;
  line-height: 1.65;
}
.pnb-prose ul ul,
.pnb-prose ol ol,
.pnb-prose ul ol,
.pnb-prose ol ul {
  margin-top: 8px;
  margin-bottom: 8px;
}

.pnb-prose blockquote {
  margin: var(--s-5) 0;
  padding: var(--s-4) var(--s-5);
  border-left: 4px solid var(--c-red);
  background: var(--c-grey-50);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--c-grey-700);
}
.pnb-prose blockquote p:last-child { margin: 0; }

.pnb-prose hr {
  border: 0;
  border-top: 1px solid var(--c-grey-100);
  margin: var(--s-6) 0;
}

.pnb-prose code {
  background: var(--c-grey-50);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: .92em;
  color: var(--c-red-dark);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.pnb-prose pre {
  background: var(--c-navy);
  color: #fff;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: .9rem;
  line-height: 1.55;
  margin: var(--s-5) 0;
}
.pnb-prose pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

.pnb-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-5) 0;
  font-size: .95rem;
}
.pnb-prose table th,
.pnb-prose table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-grey-100);
  text-align: left;
}
.pnb-prose table th {
  background: var(--c-grey-50);
  font-weight: 700;
  color: var(--c-navy);
}

.pnb-prose img,
.pnb-prose figure {
  margin: var(--s-5) 0;
  border-radius: var(--radius);
}
.pnb-prose figcaption {
  font-size: .85rem;
  color: var(--c-grey-500);
  text-align: center;
  margin-top: 8px;
}

@media (max-width: 600px) {
  .pnb-simple__hero { padding: var(--s-6) 0 var(--s-5); }
  .pnb-prose { font-size: .95rem; line-height: 1.7; }
  .pnb-prose h2 { margin-top: var(--s-5); }
  .pnb-prose blockquote { padding: var(--s-3) var(--s-4); }
}

/* ============================================================
   WooCommerce — PNB design overrides
   Stosowane na stronach renderowanych przez page-pnb-woo.php
   (cart auto-redirect, checkout, my-account, order-received).
   Body ma klasy .pnb-body i .pnb-woo.
   ============================================================ */

/* ---------- Generic WC notices ---------- */
.pnb-woo .woocommerce-notices-wrapper { margin-bottom: var(--s-5); }
.pnb-woo .woocommerce-message,
.pnb-woo .woocommerce-info,
.pnb-woo .woocommerce-error {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: .95rem;
  border: 1px solid transparent;
  background: var(--c-grey-50);
  color: var(--c-text);
}

.woocommerce-privacy-policy-text p {
  font-size: 13px;
  line-height: 1.25;
}
.pnb-woo .woocommerce-message { background: var(--c-mint-soft); border-color: rgba(108,208,182,.5); color: var(--c-navy); }
.pnb-woo .woocommerce-info    { background: var(--c-navy-soft); border-color: rgba(14,31,61,.15); color: var(--c-navy); }
.pnb-woo .woocommerce-error   { background: var(--c-red-soft); border-color: rgba(229,67,89,.4); color: var(--c-red-dark); }
.pnb-woo .woocommerce-error li { list-style: none; margin: 0; }
/* WC dorzuca ikonę przez ::before (font WooCommerce) pozycjonowaną absolutnie —
   nachodzi na tekst przy naszym paddingu. Usuwamy ją (typ komunikatu niesie kolor tła). */
.pnb-woo .woocommerce-message::before,
.pnb-woo .woocommerce-info::before,
.pnb-woo .woocommerce-error::before { content: none; display: none; }
/* Komunikat „dodano do koszyka": tekst + przycisk „Continue shopping" w jednym rzędzie */
.pnb-woo .woocommerce-message {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
}
.pnb-woo .woocommerce-message .button { margin: 0; flex: 0 0 auto; }

/* ---------- WC `.button` (i `.alt`) → PNB czerwony pill ----------
   body.pnb-woo a.button.alt (0,3,2) bije woocommerce-general `.woocommerce a.button.alt`
   (0,3,1); body.pnb-woo a.button (0,2,2) bije `.woocommerce a.button` (0,2,1). Bez tego
   linki/alty .button (np. „Browse products", „Place order") dostawały domyślny szary styl WC. */
body.pnb-woo a.button,
body.pnb-woo button.button,
body.pnb-woo input.button,
body.pnb-woo a.button.alt,
body.pnb-woo button.button.alt,
body.pnb-woo input.button.alt,
body.pnb-woo .button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  background: var(--c-red); color: #fff;
  font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .15s ease, background .15s ease;
  cursor: pointer;
}
body.pnb-woo a.button:hover,
body.pnb-woo button.button:hover,
body.pnb-woo input.button:hover,
body.pnb-woo a.button.alt:hover,
body.pnb-woo button.button.alt:hover,
body.pnb-woo input.button.alt:hover,
body.pnb-woo .button:hover {
  background: var(--c-red-dark); color: #fff;
  transform: translateY(-1px);
}

/* Drugorzędny: „Zaktualizuj koszyk" — outline navy (jedyny przycisk poboczny) */
body.pnb-woo .button[name="update_cart"] {
  background: transparent; color: var(--c-navy); border-color: var(--c-navy);
}
body.pnb-woo .button[name="update_cart"]:hover { background: var(--c-navy); color: #fff; }

/* ---------- Inputs (login, checkout, my-account) ---------- */
.pnb-woo .pnb-input,
.pnb-woo .input-text,
.pnb-woo input[type="text"],
.pnb-woo input[type="email"],
.pnb-woo input[type="tel"],
.pnb-woo input[type="password"],
.pnb-woo input[type="search"],
.pnb-woo input[type="number"],
.pnb-woo select,
.pnb-woo textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: .95rem;
  font-family: inherit;
  background: #fff;
  color: var(--c-text);
  border: 1px solid var(--c-grey-100);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 2px rgba(14,31,61,.04);
  transition: border-color .15s ease, box-shadow .15s ease;
  line-height: 1.4;
}
.pnb-woo input:focus,
.pnb-woo select:focus,
.pnb-woo textarea:focus {
  outline: 0;
  border-color: var(--c-red);
  box-shadow: 0 0 0 3px rgba(229,67,89,.18);
}
.pnb-woo label {
  display: block;
  font-weight: 600;
  font-size: .85rem;
  color: var(--c-grey-700);
  margin-bottom: 6px;
}
.pnb-woo label .required { color: var(--c-red); margin-left: 2px; }
.pnb-woo .form-row { margin-bottom: var(--s-4); }
/* layout.css zdjęty — układ pól (np. imię|nazwisko obok siebie) sterujemy gridem na wrapperze */
.pnb-woo .woocommerce-billing-fields__field-wrapper,
.pnb-woo .woocommerce-shipping-fields__field-wrapper,
.pnb-woo .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--s-4);
}
.pnb-woo .form-row { grid-column: 1 / -1; }
.pnb-woo .form-row-first { grid-column: 1; }
.pnb-woo .form-row-last  { grid-column: 2; }
@media (max-width: 600px) {
  .pnb-woo .woocommerce-billing-fields__field-wrapper,
  .pnb-woo .woocommerce-shipping-fields__field-wrapper,
  .pnb-woo .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; }
  .pnb-woo .form-row-first,
  .pnb-woo .form-row-last { grid-column: 1 / -1; }
}

/* ---------- LOGIN + REGISTER (form-login.php override) ---------- */
.pnb-auth-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  max-width: 1080px;
  margin: 0 auto;
}
.pnb-auth-grid.has-register { grid-template-columns: 1fr 1fr; }
.pnb-auth-card {
  background: #fff;
  border: 1px solid var(--c-grey-100);
  border-radius: var(--radius-lg);
  padding: var(--s-7) var(--s-6);
  box-shadow: var(--shadow-sm);
}
.pnb-auth-card--alt {
  background: var(--c-grey-50);
  border-color: var(--c-grey-100);
}
.pnb-auth-title {
  font-size: 1.6rem;
  margin-bottom: var(--s-2);
}
.pnb-auth-lede {
  color: var(--c-grey-500);
  font-size: 14px;
  margin-bottom: var(--s-5);
}
.pnb-auth-lost {
  font-size: .9rem;
  color: var(--c-grey-500);
}
.pnb-auth-lost:hover { color: var(--c-red); }
.pnb-form .pnb-form-row-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.pnb-checkbox {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500;
  font-size: .9rem;
  color: var(--c-grey-700);
  cursor: pointer;
  margin: 0;
}
.pnb-checkbox input[type="checkbox"] {
  width: 18px; height: 18px;
  margin: 0;
  accent-color: var(--c-red);
}

/* ---------- CART ---------- */
.pnb-woo .woocommerce-cart-form { overflow-x: auto; margin-bottom: var(--s-6); }
.pnb-woo table.cart .product-thumbnail img { width: 56px; height: auto; border-radius: var(--radius); }
.pnb-woo table.cart td.product-name a { color: var(--c-navy); font-weight: 700; }
.pnb-woo table.cart td.product-name a:hover { color: var(--c-red); }
.pnb-woo table.cart .quantity input.qty { width: 72px; }
.pnb-woo table.cart a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-red-soft); color: var(--c-red-dark) !important;
  font-weight: 500; text-decoration: none; line-height: 1;
}

.pnb-woo table.cart a.remove:hover { background: var(--c-red); color: #fff !important; }
.pnb-woo .cart .actions { padding-top: var(--s-4); display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; justify-content: space-between; }
.pnb-woo .cart .actions .coupon { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.pnb-woo .cart-collaterals { display: flex; justify-content: flex-end; margin-top: var(--s-6); }
.pnb-woo .cart_totals {
  width: 100%; max-width: 440px;
  background: var(--c-grey-50); border: 1px solid var(--c-grey-100);
  border-radius: var(--radius-lg); padding: var(--s-6);
}
.pnb-woo .cart_totals h2 { font-size: 1.2rem; color: var(--c-navy); margin-bottom: var(--s-3); }
.pnb-woo .cart_totals .order-total .woocommerce-Price-amount { color: var(--c-red); font-weight: 800; }
.pnb-woo .wc-proceed-to-checkout { margin-top: var(--s-4); }
.pnb-woo .wc-proceed-to-checkout .checkout-button { width: 100%; }
@media (max-width: 768px) {
  .pnb-woo .cart-collaterals { justify-content: stretch; }
  .pnb-woo .cart_totals { max-width: none; }
}

/* ---------- CHECKOUT ---------- */
.pnb-woo .woocommerce-checkout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-7);
  align-items: start;
}
.pnb-woo #customer_details { min-width: 0; grid-column: 1; }
.pnb-woo .woocommerce-checkout #order_review { grid-column: 2; }
/* Nagłówek „Your order" jest teraz wewnątrz karty #order_review (form-checkout.php) */
.pnb-woo #order_review #order_review_heading {
  margin: 0 0 var(--s-4);
  font-size: 1.3rem;
  color: var(--c-navy);
}
.pnb-woo h3 { font-size: 1.2rem; margin-bottom: var(--s-3); }
.pnb-woo .woocommerce-billing-fields,
.pnb-woo .woocommerce-shipping-fields,
.pnb-woo .woocommerce-additional-fields {
  margin-bottom: var(--s-6);
}
.pnb-woo #order_review {
  position: sticky;
  top: 100px;
  background: var(--c-grey-50);
  border: 1px solid var(--c-grey-100);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
}
/* Billing + Additional/Shipping jeden pod drugim w lewej kolumnie (nie 48% obok siebie) */
.pnb-woo #customer_details .col2-set { display: block; }
.pnb-woo #customer_details .col2-set .col-1,
.pnb-woo #customer_details .col2-set .col-2 { width: auto; float: none; }
.pnb-woo #customer_details .col2-set .col-2 { margin-top: var(--s-6); }

/* Checkout: tabela "Twoje zamówienie" */
.pnb-woo .shop_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--s-4);
  font-size: .92rem;
}
.pnb-woo .shop_table th,
.pnb-woo .shop_table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--c-grey-100);
  text-align: left;
}
.pnb-woo .shop_table tfoot th,
.pnb-woo .shop_table tfoot td {
  font-weight: 700;
  color: var(--c-navy);
}
.pnb-woo .shop_table .order-total .woocommerce-Price-amount {
  color: var(--c-red);
  font-size: 1.1rem;
  font-weight: 800;
}

/* Metody płatności */
.pnb-woo .wc_payment_methods {
  list-style: none;
  padding: 0;
  margin: var(--s-4) 0;
  border-top: 1px solid var(--c-grey-100);
}
.pnb-woo .wc_payment_method {
  border-bottom: 1px solid var(--c-grey-100);
  padding: var(--s-3) 0;
}
.pnb-woo .wc_payment_method label {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
  cursor: pointer;
  font-weight: 600;
  color: var(--c-text);
}
.pnb-woo .wc_payment_method .payment_box {
  background: #fff;
  border-radius: var(--radius);
  padding: var(--s-4);
  margin-top: var(--s-3);
  font-size: .9rem;
  color: var(--c-grey-700);
}

/* Place order */
.pnb-woo #place_order {
  width: 100%;
  margin-top: var(--s-4);
  padding: 16px 28px;
  font-size: 1rem;
}

/* ---------- MY ACCOUNT ---------- */
.pnb-woo .woocommerce-MyAccount-navigation {
  background: #fff;
  border: 1px solid var(--c-grey-100);
  border-radius: var(--radius-lg);
  padding: var(--s-3);
  margin-bottom: var(--s-5);
}
.pnb-woo .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pnb-woo .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 10px 16px;
  border-radius: var(--radius);
  color: var(--c-navy);
  font-weight: 600;
  font-size: .9rem;
  transition: background .15s ease, color .15s ease;
}
.pnb-woo .woocommerce-MyAccount-navigation li a:hover {
  background: var(--c-grey-50);
  color: var(--c-red);
}
.pnb-woo .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--c-red-soft);
  color: var(--c-red-dark);
}
.pnb-woo .woocommerce-MyAccount-content {
  background: #fff;
  border: 1px solid var(--c-grey-100);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
}

/* Tabele konta: lista zamówień + szczegóły zamówienia (potwierdzenie) */
.pnb-woo .woocommerce-orders-table,
.pnb-woo .woocommerce-table,
.pnb-woo table.order_details {
  width: 100%; border-collapse: collapse; font-size: .92rem; margin: var(--s-4) 0;
}
.pnb-woo .woocommerce-orders-table th,
.pnb-woo .woocommerce-orders-table td,
.pnb-woo .woocommerce-table th,
.pnb-woo .woocommerce-table td,
.pnb-woo table.order_details th,
.pnb-woo table.order_details td {
  padding: 12px 14px; border-bottom: 1px solid var(--c-grey-100); text-align: left; vertical-align: top;
}
.pnb-woo .woocommerce-orders-table th,
.pnb-woo .woocommerce-table th,
.pnb-woo table.order_details th { color: var(--c-navy); font-weight: 700; }
.pnb-woo table.order_details tfoot th,
.pnb-woo table.order_details tfoot td { font-weight: 700; }
.pnb-woo .woocommerce-orders-table .button,
.pnb-woo .woocommerce-table .button { padding: 8px 16px; font-size: .85rem; }
/* Adresy na koncie (Billing / Shipping) */
.pnb-woo .woocommerce-Addresses,
.pnb-woo .woocommerce-customer-details .woocommerce-columns--addresses {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5);
}
.pnb-woo .woocommerce-Address,
.pnb-woo .woocommerce-customer-details address {
  background: var(--c-grey-50); border: 1px solid var(--c-grey-100);
  border-radius: var(--radius-lg); padding: var(--s-5); font-style: normal;
}
@media (max-width: 600px) {
  .pnb-woo .woocommerce-Addresses,
  .pnb-woo .woocommerce-customer-details .woocommerce-columns--addresses { grid-template-columns: 1fr; }
}

/* ---------- THANK YOU PAGE ---------- */
.pnb-thankyou {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.pnb-thankyou__head {
  margin-bottom: var(--s-7);
}
.pnb-thankyou__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--c-mint-soft);
  color: var(--c-navy);
  font-size: 2.4rem; font-weight: 900;
  margin-bottom: var(--s-4);
  border: 3px solid var(--c-mint);
}
.pnb-thankyou__head h1 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); }
.pnb-thankyou__head p {
  color: var(--c-grey-700);
  font-size: 1.05rem;
  max-width: 540px;
  margin: 0 auto;
}
.pnb-thankyou__head--failed .pnb-thankyou__icon { background: var(--c-red-soft); color: var(--c-red); border-color: var(--c-red); }

.pnb-thankyou__meta {
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4);
  background: var(--c-grey-50);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  text-align: left;
}
.pnb-thankyou__meta li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pnb-thankyou__meta-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-grey-500);
}
.pnb-thankyou__meta-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-navy);
}
.pnb-thankyou__details { margin: var(--s-6) 0; text-align: left; }
.pnb-thankyou__actions {
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-6);
}

/* ============================================================ */
/* WooCommerce — Single product + Shop (.pnb-shop)              */
/* ============================================================ */
/* Na stronie produktu chowamy górny CTA „Subscribe" (redundantny obok kup).
   Desktop: visibility (nie display:none) — zachowuje slot w flexie, więc układ
   nagłówka jest identyczny jak na innych stronach (bez rozjazdu nav/PL|EN).
   Mobile (.site-nav__cta w dropdownie): display:none — tam slot nieistotny. */
body.single-product .header-cta { visibility: hidden; }
body.single-product .site-nav__cta { display: none; }

/* Single product: kolumna main na pełną szerokość — nadpisuje legacy
   style.css `body.single … main { max-width:900px }`. Każda sekcja sama
   kontroluje szerokość treści (.container 1240 / .pnb-related-inner 1680). */
#pnb-main.pnb-shop { max-width: none; width: 100%; }

/* Mniejsze odstępy między sekcjami (−70%) w widoku sklepu/produktu */
.pnb-shop .section { padding-top: calc(var(--s-9) * 0.3); padding-bottom: calc(var(--s-9) * 0.3); }

.pnb-shop div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
  position: relative;
}
/* Neutralizujemy floaty/szerokości z woocommerce-layout.css (gdyby gdzieś
   przetrwały) — w gridzie kolumny ustala grid, nie float:left;width:48%. */
.pnb-shop div.product > div.images,
.pnb-shop div.product > div.summary,
.pnb-shop div.product > .woocommerce-product-gallery,
.pnb-shop div.product > .entry-summary {
  float: none;
  width: auto;
  margin-left: 0;
  margin-right: 0;
}
.pnb-shop div.product::before,
.pnb-shop div.product::after { content: none; }
.pnb-shop div.product .woocommerce-product-gallery {
  position: relative;
  margin: 0;
  min-width: 0;
}
.pnb-shop div.product .woocommerce-product-gallery img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
/* Swiper miniatur pod obrazkiem wyłączony — pokazujemy tylko główne zdjęcie. */
.pnb-shop div.product .flex-control-thumbs { display: none; }

.pnb-shop div.product .summary,
.pnb-shop div.product .entry-summary { margin: 0; min-width: 0; }
.pnb-shop .product_title {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem); line-height: 1.1;
  color: var(--c-navy); margin: 0 0 var(--s-3);
}
.pnb-shop .summary .price,
.pnb-shop .summary .price ins,
.pnb-shop .summary .price .amount {
  color: var(--c-red); font-weight: 800; font-size: 1.5rem; text-decoration: none;
}
.pnb-shop .summary .price del {
  color: var(--c-grey-300); font-weight: 600; font-size: 1.1rem; margin-right: 8px;
}
/* Dopisek „(Netto)" przy cenie — zakres pod tytułem i cena wariantu */
.pnb-shop .summary .price .pnb-price-netto {
  font-size: 12px; font-weight: 600; color: var(--c-grey-500);
}
/* Szczegóły subskrypcji („every 3 months" itp.) — domyślny czarny tekst, nie czerwień ceny */
.pnb-shop .summary .subscription-details,
.pnb-shop .single_variation .subscription-details,
.pnb-shop .single_variation_wrap .subscription-details {
  color: var(--c-text);
  font-weight: 600;
}
/* Data pierwszej płatności — ukryta gdy pusta */
.pnb-shop .first-payment-date:empty { display: none; }
/* Stan magazynowy / ilość w stoku — ukryte na stronie produktu */
.pnb-shop p.stock,
.pnb-shop .stock,
.pnb-shop .woocommerce-variation-availability { display: none; }
.pnb-shop .woocommerce-product-details__short-description { color: var(--c-grey-700); margin: var(--s-4) 0; }
.pnb-shop .woocommerce-product-details__short-description p { margin: 0 0 var(--s-3); }

/* Formularz wariantów */
.pnb-shop .variations_form .variations { width: 100%; border: 0; margin: var(--s-4) 0; }
.pnb-shop .variations_form .variations th,
.pnb-shop .variations_form .variations td { border: 0; padding: 8px 0; vertical-align: middle; }
.pnb-shop .variations_form .variations th.label { width: 140px; color: var(--c-grey-700); }
.pnb-shop .variations_form .reset_variations {
  display: inline-block; margin-left: 10px; font-size: .85rem; color: var(--c-grey-500);
}
.pnb-shop .single_variation_wrap .woocommerce-variation-price .price { font-size: 1.6rem; }

/* Ilość + dodaj do koszyka — jeden rząd: [ilość][przycisk wypełnia resztę] */
.pnb-shop form.cart { margin: var(--s-5) 0; }
.pnb-shop .woocommerce-variation-add-to-cart,
.pnb-shop form.cart:not(.variations_form) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: stretch;
}
.pnb-shop .quantity { flex: 0 0 auto; margin: 0; }
.pnb-shop .quantity input.qty {
  width: 84px; height: 100%; min-height: 54px; padding: 12px 10px; text-align: center;
  border: 1px solid var(--c-grey-100); border-radius: var(--radius);
}
/* Przycisk kup: czerwony pill PNB (btn-primary), większy, wypełnia szerokość
   minus pole ilości. body.pnb-shop podbija specyficzność nad plugin/WC CSS. */
body.pnb-shop form.cart .single_add_to_cart_button,
body.pnb-shop form.cart .single_add_to_cart_button.alt {
  flex: 1 1 auto;
  margin: 0;
  padding: 18px 28px;
  font-size: 1.05rem;
  background: var(--c-red);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(229,67,89,.30);
}
body.pnb-shop form.cart .single_add_to_cart_button:hover,
body.pnb-shop form.cart .single_add_to_cart_button.alt:hover {
  background: var(--c-red-dark);
  color: #fff;
}
body.pnb-shop form.cart .single_add_to_cart_button.disabled,
body.pnb-shop form.cart .single_add_to_cart_button:disabled {
  opacity: .5;
  box-shadow: none;
}

/* Meta produktu */
.pnb-shop .product_meta { margin-top: var(--s-5); font-size: .85rem; color: var(--c-grey-500); }
.pnb-shop .product_meta > span { display: block; margin-bottom: 4px; }
.pnb-shop .product_meta a { color: var(--c-red); }

/* Plakietka „sale" */
.pnb-shop span.onsale {
  position: absolute; top: var(--s-3); left: var(--s-3); z-index: 2;
  background: var(--c-red); color: #fff; border-radius: var(--radius-pill);
  padding: 6px 14px; font-weight: 700; font-size: .8rem;
  min-height: 0; min-width: 0; line-height: 1;
}

/* Zakładki opis / informacje dodatkowe */
.pnb-shop .woocommerce-tabs { margin-top: var(--s-9); grid-column: 1 / -1; }
.pnb-shop .woocommerce-tabs ul.tabs {
  display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0;
  margin: 0 0 var(--s-5); border-bottom: 1px solid var(--c-grey-100);
}
.pnb-shop .woocommerce-tabs ul.tabs li { margin: 0; }
.pnb-shop .woocommerce-tabs ul.tabs li a {
  display: inline-block; padding: 12px 18px; font-weight: 700; color: var(--c-grey-500);
  border-bottom: 3px solid transparent;
}
.pnb-shop .woocommerce-tabs ul.tabs li.active a { color: var(--c-navy); border-bottom-color: var(--c-red); }
.pnb-shop .woocommerce-tabs .panel { margin: 0; }
.pnb-shop .woocommerce-tabs h2 { color: var(--c-navy); }

/* Pełny opis produktu — samodzielny biały blok z cieniem (zamiast tabów) */
.pnb-shop .pnb-product-desc {
  grid-column: 1 / -1;
  padding-top: 30px;
  background: #fff;
  border: 1px solid var(--c-grey-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2vw clamp(var(--s-5), 2vw, var(--s-8)) clamp(var(--s-5), 2vw, var(--s-8));
  color: var(--c-grey-700);
  line-height: 1.7;
}
.pnb-shop .pnb-product-desc > :first-child { margin-top: 0; }
.pnb-shop .pnb-product-desc > :last-child { margin-bottom: 0; }
.pnb-shop .pnb-product-desc h2,
.pnb-shop .pnb-product-desc h3,
.pnb-shop .pnb-product-desc h4 { color: var(--c-navy); margin: var(--s-5) 0 var(--s-3); }
.pnb-shop .pnb-product-desc p { margin: 0 0 var(--s-4); }
.pnb-shop .pnb-product-desc ul,
.pnb-shop .pnb-product-desc ol { margin: 0 0 var(--s-4) var(--s-5); }
.pnb-shop .pnb-product-desc li { margin-bottom: var(--s-2); }

/* Sekcja powiązanych — full-width poza .container (max 1680, wyśrodkowana) */
.pnb-related-inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 var(--s-5);
}
.pnb-related-section .related.products { margin-top: 0; }

/* Produkty powiązane / upsells + listy sklepu */
.pnb-shop .related.products,
.pnb-shop .up-sells.products { grid-column: 1 / -1; position: relative; }
.pnb-shop .related.products > h2,
.pnb-shop .up-sells.products > h2 { font-size: 1.6rem; color: var(--c-navy); margin-bottom: var(--s-6); }
.pnb-shop ul.products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-6); list-style: none; padding: 0; margin: 0;
}
.pnb-shop ul.products li.product {
  background: #fff; border: 1px solid var(--c-grey-100); border-radius: var(--radius-lg);
  padding: var(--s-5); text-align: center; position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pnb-shop ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pnb-shop ul.products li.product a img { border-radius: var(--radius); margin-bottom: var(--s-4); }
.pnb-shop ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.05rem; font-weight: 700; color: var(--c-navy); padding: 0; margin: 0 0 var(--s-2);
}
.pnb-shop ul.products li.product .price { color: var(--c-red); font-weight: 800; display: block; margin-bottom: var(--s-4); }
.pnb-shop ul.products li.product .price del { color: var(--c-grey-300); font-weight: 600; }
.pnb-shop ul.products li.product .button { margin: 0; }

/* Pętla: samodzielna cena ukryta (jest teraz w przycisku); btn-primary 2 linie */
.pnb-shop .related.products li.product > a .price,
.pnb-shop .up-sells.products li.product > a .price { display: none; }
body.pnb-shop ul.products li.product .pnb-loop-buy {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%;
  padding: 12px 16px;
  background: var(--c-red); background-image: none;
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 18px rgba(229,67,89,.30);
  text-align: center; line-height: 1.2;
}
body.pnb-shop ul.products li.product .pnb-loop-buy:hover { background: var(--c-red-dark); color: #fff; }
.pnb-loop-buy__top { font-size: .8rem; font-weight: 700; opacity: .95; }
.pnb-loop-buy__price { font-size: .8rem; font-weight: 700; }
.pnb-loop-buy__price .amount,
.pnb-loop-buy__price .subscription-details { color: #fff; }
.pnb-loop-buy__price .subscription-details { font-weight: 600; }

/* Produkty powiązane jako swiper (scroll-snap, RWD) — nadpisuje grid powyżej */
.pnb-shop .related.products ul.products,
.pnb-shop .up-sells.products ul.products {
  display: flex;
  grid-template-columns: none;
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: var(--s-2) 0 var(--s-3);
  margin: 0;
  list-style: none;
}
/* ≥992px: dokładnie 4 karty mieszczą się bez suwaka (epsilon -2px chroni
   przed „phantom scrollbar" przy idealnym dopasowaniu). Suwak/strzałki
   pojawiają się dopiero przy >4 produktach. */
.pnb-shop .related.products ul.products li.product,
.pnb-shop .up-sells.products ul.products li.product {
  flex: 0 0 calc((100% - var(--s-5) * 3) / 4 - 2px);
  scroll-snap-align: start;
  margin: 0;
  list-style: none;
}

/* Pomarańczowa kropka na kafelku = bullet ::before z motywu bazowego na li.product.
   (list-style na ::before nic nie robi — usuwamy generowanie przez content/display.) */
.pnb-shop ul.products li.product::before { content: none !important; display: none !important; }

.pnb-shop .related.products ul.products li.product::marker,
.pnb-shop .up-sells.products ul.products li.product::marker { content: ""; }

/* WC dodaje clearfix ::before/::after na ul.products. W kontenerze flex stają
   się elementami flex, a `gap` dolicza im odstępy → fałszywy overflow i dolny
   pasek przewijania (znikał dopiero po usunięciu gap). Usuwamy je —
   clearfix w flexie jest zbędny — dzięki czemu zostają tylko 4 realne karty. */
.pnb-shop .related.products ul.products::before,
.pnb-shop .related.products ul.products::after,
.pnb-shop .up-sells.products ul.products::before,
.pnb-shop .up-sells.products ul.products::after { content: none; display: none; }
/* ≤991px: 3.2 karty (peek — sygnalizuje przewijalność) */
@media (max-width: 991px) {
  .pnb-shop .related.products ul.products li.product,
  .pnb-shop .up-sells.products ul.products li.product { flex-basis: calc((100% - var(--s-5) * 2.2) / 3.2); }
}
/* <560px: 2.2 karty (peek) */
@media (max-width: 559px) {
  .pnb-shop .related.products ul.products li.product,
  .pnb-shop .up-sells.products ul.products li.product { flex-basis: calc((100% - var(--s-5) * 1.2) / 2.2); }
}

/* Strzałki nawigacji swipera (wstrzykiwane przez JS) */
.pnb-carousel-nav {
  position: absolute; top: 2px; right: 0;
  display: flex; gap: 8px;
}
.pnb-carousel-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--c-grey-100); background: #fff; color: var(--c-navy);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.pnb-carousel-btn:hover { background: var(--c-red); color: #fff; border-color: var(--c-red); }
.pnb-carousel-btn[disabled] { opacity: .35; cursor: default; }
.pnb-carousel-btn[disabled]:hover { background: #fff; color: var(--c-navy); border-color: var(--c-grey-100); }
@media (max-width: 559px) {
  .pnb-carousel-nav { display: none !important; }
}

/* Tytuł archiwum sklepu */
.pnb-shop .woocommerce-products-header__title,
.pnb-shop .woocommerce-products-header { text-align: center; }
.pnb-shop .woocommerce-products-header__title { font-size: clamp(1.8rem, 3.4vw, 2.4rem); color: var(--c-navy); }

@media (max-width: 860px) {
  .pnb-shop div.product { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ---------- Toast „dodano do koszyka" ---------- */
.pnb-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  z-index: 1000; display: inline-flex; align-items: center; gap: 12px;
  background: var(--c-navy); color: #fff;
  padding: 14px 22px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg); font-weight: 600; font-size: .95rem;
  max-width: calc(100vw - 32px);
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.pnb-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.pnb-toast--error { background: var(--c-red-dark); }
.pnb-toast__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  background: var(--c-mint); color: var(--c-navy); font-weight: 900; font-size: .8rem;
}
.pnb-toast__msg { line-height: 1.3; }
.pnb-toast__link {
  color: #fff; text-decoration: underline; font-weight: 700; white-space: nowrap;
}
.pnb-toast__link:hover { color: var(--c-mint); }

/* ---------- Responsive — WC ---------- */
@media (max-width: 991px) {
  .pnb-woo .woocommerce-checkout { grid-template-columns: 1fr; }
  .pnb-woo #order_review_heading,
  .pnb-woo #order_review { grid-column: 1; position: static; }
  .pnb-auth-grid.has-register { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pnb-auth-card { padding: var(--s-6) var(--s-5); }
  .pnb-thankyou__meta { grid-template-columns: 1fr 1fr; }
  .pnb-woo #order_review { padding: var(--s-5); }
  body.pnb-woo a.button,
  body.pnb-woo button.button,
  body.pnb-woo input.button,
  body.pnb-woo a.button.alt,
  body.pnb-woo button.button.alt,
  body.pnb-woo .button {
    padding: 12px 18px;
    font-size: .9rem;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}