@font-face { font-family: 'Gabarito'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/gabarito/QGYtz_0dZAGKJJ4t3HtmW4XUng.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Gabarito'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/gabarito/QGYtz_0dZAGKJJ4t3HtoW4U.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/figtree/_Xms-HUzqDCFdgfMm4q9DbZs.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/figtree/_Xms-HUzqDCFdgfMm4S9DQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/figtree/_Xms-HUzqDCFdgfMm4q9DbZs.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/figtree/_Xms-HUzqDCFdgfMm4S9DQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/figtree/_Xms-HUzqDCFdgfMm4q9DbZs.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/figtree/_Xms-HUzqDCFdgfMm4S9DQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/figtree/_Xms-HUzqDCFdgfMm4q9DbZs.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/figtree/_Xms-HUzqDCFdgfMm4S9DQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
details.faq{margin-block:12px}
.podpis-tresci{display:block;margin:8px 0 22px;font-size:.84rem;line-height:1.5;color:var(--t2)}
[data-ramka]:not([id^="chart_"]){background:color-mix(in srgb,var(--akcent) 7%,var(--pow));color:var(--tekst);border-color:var(--linia)!important;border-radius:var(--r,12px)}
[id^="chart_"][id$="-container"]{background:var(--pow)!important;color:var(--tekst)!important;border-radius:var(--r,16px);padding:18px 14px 14px;box-shadow:0 0 0 1px var(--linia);box-sizing:border-box;margin:28px auto!important}
[id^="chart_"][id$="-container"] *{color:inherit!important;font-family:var(--f-t)}
[id^="chart_"][id$="-container"]>div:last-child{font-family:var(--f-n);font-size:1rem}
[id^="chart_"]{max-width:100%;overflow-x:auto}
[id^="chart_"] svg{background:transparent!important;max-width:100%;height:auto;font-family:var(--f-t)}
[id^="chart_"] svg[viewBox]{width:100%!important;height:auto!important}
[id^="chart_"] rect{fill:var(--akcent);rx:6px}
[id^="chart_"] .tick text{font-size:13px}
[id^="chart_"] path[fill="none"]:not(.domain),[id^="chart_"] .line{stroke:var(--akcent)!important;stroke-width:3px}
[id^="chart_"] circle{fill:var(--dodatek);stroke:var(--pow)}
[id^="chart_"] text{fill:var(--tekst)!important;font-family:var(--f-t)}
[id^="chart_"] .domain,[id^="chart_"] .tick line{stroke:var(--linia)}
figure.obr-lewo{float:left!important;margin:.3em 1.6em 1em 0!important}figure.obr-prawo{float:right!important;margin:.3em 0 1em 1.6em!important}figure.obr-srodek{margin-left:auto!important;margin-right:auto!important}figure.obr-lewo,figure.obr-prawo{width:50%!important}figure.obr-w25{width:25%!important}figure.obr-w33{width:33.333%!important}figure.obr-w50{width:50%!important}figure.obr-w75{width:75%!important}figure[class*="obr-"] img{width:100%;height:auto}:has(>figure.obr-lewo,>figure.obr-prawo)::after{content:"";display:block;clear:both}@media(max-width:600px){figure.obr-lewo,figure.obr-prawo{float:none!important;width:auto!important;margin:0 0 1em!important}}
.ai-nota-k{display:flex;align-items:center;gap:10px;margin:0 0 22px!important;padding:8px 14px;border-radius:var(--r,14px);background:var(--pow);box-shadow:inset 4px 0 0 var(--akcent),0 0 0 1px var(--linia);color:var(--tekst);font-size:.9rem;line-height:1.45;max-width:none!important}
.ai-znak{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--akcent);color:var(--akcent-tekst);font:700 .72rem/1 var(--f-t);letter-spacing:.04em}
.ai-nota a{color:var(--akcent);font-weight:600}
.obraz-ai{display:block;margin:6px 0 0;font-size:.78rem;line-height:1.4;color:var(--t2);font-style:normal}
.ai-nota-p{margin:40px 0 8px;padding:18px 22px;border-radius:var(--r,14px);background:var(--pow);box-shadow:inset 4px 0 0 var(--akcent),0 0 0 1px var(--linia);font-size:.86rem;line-height:1.6;color:var(--t2)}
.ai-nota-p p{margin:0 0 8px;max-width:none!important}.ai-nota-p p:last-child{margin:0}.ai-nota-p b,.ai-nota-p strong{color:var(--tekst)}
.st-dokumenty{display:flex;flex-wrap:wrap;gap:6px 18px;box-sizing:border-box;width:100%;max-width:1200px;margin:22px auto 0;padding:0 0 4px;font-size:.9rem}@media(max-width:1240px){.st-dokumenty{padding:0 20px 4px}}.st-dokumenty a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.st-stopka-silnika{padding:24px 16px;background:var(--pow);color:var(--tekst)}
.st-pager{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0}.st-pager a,.st-pager span{min-width:42px;padding:9px 12px;box-sizing:border-box;border-radius:var(--r,12px);box-shadow:0 0 0 1px var(--linia);text-align:center;color:var(--tekst);background:var(--pow);text-decoration:none;font-weight:600}
.st-pager [aria-current]{background:var(--akcent);color:var(--akcent-tekst);box-shadow:none}
:has(> .kr),:has(> * > .kr){max-width:none!important}
.kr{container-type:inline-size;max-width:1080px}
.kr-uklad{display:grid;gap:28px}
@container (min-width:760px){.kr-uklad{grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:48px;align-items:start}.kr-boczna{position:sticky;top:24px}}
.kr-tekst>h3{margin:0 0 10px;font:700 1.25rem/1.3 var(--f-n);color:var(--tekst)}.kr-tekst>h3:not(:first-child){margin-top:30px}
.kr-tekst p,.kr-tekst li{max-width:none!important}
.kr-boczna h3{margin:0 0 12px;font:700 1.25rem/1.3 var(--f-n);color:var(--tekst)}
.kr-boczna .kf{max-width:none;margin:0}
.kf{position:relative;display:grid;gap:16px;margin:8px 0 4px;padding:24px;border-radius:var(--r,16px);background:var(--pow);box-shadow:0 0 0 1px var(--linia);max-width:640px}
.kf-pole{display:grid;gap:6px;font-weight:600;font-size:.95rem}.kf-pole[hidden],.kf-stan[hidden]{display:none}
.kf input[type=email],.kf input[type=text],.kf textarea{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:calc(var(--r,16px) * .6);border:1.5px solid var(--linia);background:var(--tlo);color:var(--tekst);font:400 1rem/1.5 var(--f-t)}
.kf textarea{resize:vertical;min-height:140px}
.kf input:focus,.kf textarea:focus{outline:none;border-color:var(--akcent);box-shadow:0 0 0 3px var(--akcent-jasny)}
.kf-pokaz{justify-self:start;padding:10px 16px;border-radius:calc(var(--r,16px) * .6);border:1.5px dashed var(--akcent);background:color-mix(in srgb,var(--akcent) 16%,var(--pow));color:var(--tekst);font:600 .95rem var(--f-t);cursor:pointer}
.kf-tresc-pyt{font-weight:700}
.kf-wyslij{justify-self:start;padding:13px 26px;border:0;border-radius:calc(var(--r,16px) * .6);background:var(--akcent);color:var(--akcent-tekst);font:700 1rem var(--f-t);cursor:pointer}
.kf-wyslij:hover{background:var(--akcent-cien)}
.kf-pulapka{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.kf-info{margin:0!important;font-size:.82rem;color:var(--t2)}
.kf-stan{margin:0!important;padding:12px 16px;border-radius:calc(var(--r,16px) * .6);font-weight:600;color:var(--tekst)}
.mailrev{padding:3px 12px;border-radius:999px;border:1.5px solid var(--akcent);background:color-mix(in srgb,var(--akcent) 16%,var(--pow));color:var(--tekst);font:600 .9em var(--f-t);cursor:pointer}
.kf-ok{background:color-mix(in srgb,var(--akcent) 22%,var(--pow))}.kf-blad{background:color-mix(in srgb,var(--dodatek) 30%,var(--pow))}
:root {
  --tlo: #f3f8f7;
  --pow: #ffffff;
  --tekst: #122b28;
  --t2: #486561;
  --linia: #cfe2df;
  --akcent: #0d8374;
  --akcent-tekst: #ffffff;
  --dodatek: #f07c12;
  --r: 16px;
  --f-n: "Gabarito", "Trebuchet MS", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-t: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --akcent-jasny: #dff0ed;
  --akcent-cien: #085c51;
  --stopka: #0b534a;
  --stopka-tekst: #e8f4f2;
  --dodatek-kontrast: #b85000;
  --dodatek-cien: #963f00;
  --dodatek-jasny: #fff1e3;

  --kd-cukrzyca: #0d8374;
  --kd-dieta: #288458;
  --kd-produkty-a-cukrzyca: #c96a10;
  --kd-cukier: #147487;
  --kd-porady: #4d7c3e;
  --kd-glowne: #3b6963;
  --kd: #0d8374;

  --cien-maly: 0 4px 14px rgba(18, 43, 40, 0.06);
  --cien-karta: 0 10px 28px rgba(18, 43, 40, 0.08);
  --cien-mocny: 0 16px 38px rgba(11, 83, 74, 0.14);
  --szerokosc: 1280px;
}

.dzial-cukrzyca { --kd: #0d8374; }
.dzial-dieta { --kd: #288458; }
.dzial-produkty-a-cukrzyca { --kd: #c96a10; }
.dzial-cukier { --kd: #147487; }
.dzial-porady { --kd: #4d7c3e; }
.dzial-glowne { --kd: #3b6963; }

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--f-t);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tekst);
  background-color: var(--tlo);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--tlo);
  color: var(--tekst);
  font-family: var(--f-t);
  overflow-x: clip;
  overflow-wrap: break-word;
  word-break: break-word;
}

main {
  flex: 1 0 auto;
  display: block;
  width: 100%;
  min-width: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-n);
  color: var(--tekst);
  line-height: 1.22;
  margin-top: 0;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}

p, ul, ol, dl, figure, blockquote {
  margin-top: 0;
}

a {
  color: var(--akcent-cien);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

a:hover {
  color: var(--tekst);
}

:focus-visible {
  outline: 3px solid var(--dodatek-kontrast);
  outline-offset: 3px;
  border-radius: 6px;
}

img,
picture,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

svg {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  max-width: 100%;
  vertical-align: middle;
  fill: currentColor;
  flex-shrink: 0;
}

.tylko-czytnik {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.przeskocz {
  position: fixed;
  top: -120px;
  left: 1rem;
  z-index: 1000;
  min-height: 44px;
  padding: 0.65rem 1.25rem;
  background-color: var(--tekst);
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: var(--cien-mocny);
}

.przeskocz:focus,
.przeskocz:focus-visible {
  top: 1rem;
  color: #ffffff;
}

.szerokosc-strony {
  width: 100%;
  max-width: var(--szerokosc);
  margin-inline: auto;
  padding-inline: 1.5rem;
  min-width: 0;
}

/* ==========================================================================
   NAGŁÓWEK I NAWIGACJA (_naglowek.html)
   ========================================================================== */
.naglowek-witryny {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: var(--pow);
  border-bottom: 1px solid var(--linia);
  box-shadow: 0 2px 12px rgba(18, 43, 40, 0.05);
}

.naglowek-pasek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 76px;
  padding-block: 0.5rem;
}

.marka {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  text-decoration: none;
  color: var(--tekst);
  flex-shrink: 0;
}

.marka-sygnet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--akcent) 0%, var(--akcent-cien) 100%);
  color: var(--akcent-tekst);
  box-shadow: 0 4px 10px rgba(13, 131, 116, 0.24);
}

.marka-sygnet svg {
  width: 26px;
  height: 26px;
}

.marka-tekst {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.marka-nazwa {
  font-family: var(--f-n);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--tekst);
  letter-spacing: -0.02em;
}

.marka-nazwa span {
  color: var(--akcent-cien);
}

.marka-haslo {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--t2);
}

.nawigacja-glowna {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.naw-dom,
.naw-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--tekst);
  text-decoration: none;
  border: 1px solid transparent;
  background-color: transparent;
}

.naw-dom {
  padding-inline: 0.65rem;
  color: var(--akcent-cien);
  background-color: var(--tlo);
}

.naw-dom svg,
.naw-ikona svg {
  width: 18px;
  height: 18px;
}

.naw-ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--akcent-cien);
}

.naw-dom:hover,
.naw-link:hover {
  background-color: var(--akcent-jasny);
  color: var(--tekst);
}

.naw-dom.jest-aktywny,
.naw-link.jest-aktywny {
  background-color: var(--akcent);
  color: var(--akcent-tekst);
  border-color: var(--akcent-cien);
}

.naw-link.jest-aktywny .naw-ikona {
  color: var(--akcent-tekst);
}

.naglowek-skrot {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.naglowek-puls {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background-color: var(--akcent-cien);
  color: var(--akcent-tekst);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(8, 92, 81, 0.2);
}

.naglowek-puls:hover {
  background-color: var(--tekst);
  color: var(--akcent-tekst);
  transform: translateY(-1px);
}

.naglowek-puls-ikona {
  display: inline-flex;
  align-items: center;
}

.naglowek-puls-ikona svg {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   PRZYCISKI I ELEMENTY WSPÓLNE SEKCJI
   ========================================================================== */
.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  min-width: 44px;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  font-family: var(--f-t);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
}

.przycisk svg {
  width: 18px;
  height: 18px;
}

.przycisk-pomaranczowy {
  background-color: var(--dodatek-kontrast);
  background-image: linear-gradient(135deg, #c45600 0%, #9e4200 100%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(184, 80, 0, 0.28);
}

.przycisk-pomaranczowy:hover {
  background-color: var(--dodatek-cien);
  background-image: none;
  color: #ffffff;
  transform: translateY(-1px);
}

.przycisk-jasny {
  background-color: var(--pow);
  color: var(--tekst);
  border-color: var(--linia);
  box-shadow: var(--cien-maly);
}

.przycisk-jasny:hover {
  background-color: var(--akcent-jasny);
  border-color: var(--akcent);
  color: var(--tekst);
}

.przycisk-morski-pelny {
  width: 100%;
  background-color: var(--akcent);
  color: var(--akcent-tekst);
  box-shadow: 0 6px 16px rgba(13, 131, 116, 0.24);
}

.przycisk-morski-pelny:hover {
  background-color: var(--akcent-cien);
  color: var(--akcent-tekst);
}

.naglowek-sekcji {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.naglowek-sekcji-zwarty {
  margin-bottom: 1.25rem;
}

.naglowek-sekcji-lewa {
  max-width: 760px;
  min-width: 0;
}

.sekcja-kicker,
.sekcja-plama-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  margin-bottom: 0.65rem;
  border-radius: 999px;
  background-color: var(--akcent-jasny);
  color: var(--akcent-cien);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  position: relative;
}

.sekcja-kicker-lisc,
.plama-tlo-el,
.kicker-lisc-el {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.plama-tlo-el img,
.kicker-lisc-el img,
.sekcja-kicker-lisc img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.tytul-sekcji {
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  font-weight: 700;
  margin-bottom: 0.45rem;
  color: var(--tekst);
}

.opis-sekcji {
  font-size: 1.02rem;
  color: var(--t2);
  margin-bottom: 0;
  max-width: 68ch;
}

.link-sekcji {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background-color: var(--pow);
  border: 1px solid var(--linia);
  color: var(--akcent-cien);
  font-weight: 700;
  font-size: 0.94rem;
  text-decoration: none;
  flex-shrink: 0;
}

.link-sekcji:hover {
  background-color: var(--akcent);
  border-color: var(--akcent);
  color: var(--akcent-tekst);
}

.podtytul-bloku {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 2.25rem 0 1.15rem;
  padding-left: 0.85rem;
  border-left: 4px solid var(--akcent);
  color: var(--tekst);
}

/* ==========================================================================
   SEKCJA HERO (glowna.html)
   ========================================================================== */
.hero-sekcja {
  position: relative;
  background: linear-gradient(125deg, #dff0ed 0%, #eef7f5 52%, #cbe6e1 100%);
  border-bottom: 1px solid var(--linia);
  padding-block: 2.5rem 2.75rem;
  overflow: hidden;
  min-height: 440px;
}

.hero-uklad {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: 2.5rem;
}

.hero-lewa {
  min-width: 0;
  z-index: 2;
}

.hero-nadtytul {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--linia);
  color: var(--akcent-cien);
  font-size: 0.85rem;
  font-weight: 700;
}

.hero-kropla-mala {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

.hero-kropla-el,
.hero-kropla-mala img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.hero-tytul {
  font-size: clamp(2.1rem, 3.8vw, 3.1rem);
  font-weight: 700;
  line-height: 1.12;
  margin-bottom: 0.55rem;
  color: var(--tekst);
}

.hero-podtytul {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--akcent-cien);
  margin-bottom: 0.75rem;
}

.hero-opis {
  font-size: 1.03rem;
  color: var(--tekst);
  margin-bottom: 1.5rem;
  max-width: 60ch;
}

.hero-akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.35rem;
}

.hero-ostatnia {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--t2);
  background-color: rgba(255, 255, 255, 0.75);
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
}

.hero-ostatnia-ikona {
  display: inline-flex;
  color: var(--akcent-cien);
}

.hero-ostatnia-ikona svg {
  width: 16px;
  height: 16px;
}

.hero-prawa {
  min-width: 0;
  position: relative;
}

.hero-scena {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 320px;
  border-radius: calc(var(--r) + 6px);
  background-color: #cde5e1;
  box-shadow: var(--cien-mocny);
  overflow: hidden;
  border: 3px solid #ffffff;
}

.hero-tlo-kadr {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-obraz,
.hero-tlo-kadr img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hero-ekg-ozdoba {
  position: absolute;
  left: 4%;
  bottom: 10%;
  width: 38%;
  max-width: 210px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.92;
}

.hero-ekg-el,
.hero-ekg-ozdoba img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.hero-zestaw-glowny {
  position: relative;
  z-index: 3;
  width: 78%;
  max-width: 420px;
  margin: 4% auto 0;
}

.hero-zestaw-el,
.hero-zestaw-glowny img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.hero-lisc-gora {
  position: absolute;
  top: 4%;
  right: 4%;
  width: 68px;
  height: 68px;
  z-index: 4;
  pointer-events: none;
}

.hero-borowki-dol {
  position: absolute;
  bottom: 4%;
  right: 6%;
  width: 72px;
  height: 72px;
  z-index: 4;
  pointer-events: none;
}

.hero-lisc-el,
.hero-borowki-el,
.hero-lisc-gora img,
.hero-borowki-dol img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* ==========================================================================
   PASEK DZIAŁÓW - 6 KAFELKÓW (Listy 6: 3, 2, 1)
   ========================================================================== */
.sekcja-dzialy-pasek {
  padding-block: 2.5rem 1.5rem;
}

.dzialy-szesc-kafelkow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}

.kafelek-dzialu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  height: 100%;
  min-height: 140px;
  min-width: 0;
  padding: 1.25rem 1.35rem;
  background-color: var(--pow);
  border: 1px solid var(--linia);
  border-top: 4px solid var(--kd, var(--akcent));
  border-radius: var(--r);
  text-decoration: none;
  color: var(--tekst);
  box-shadow: var(--cien-maly);
}

.kafelek-dzialu:hover {
  transform: translateY(-3px);
  box-shadow: var(--cien-karta);
  border-color: var(--kd, var(--akcent));
}

.kafelek-dzialu-normy {
  background: linear-gradient(180deg, #ffffff 0%, #ebf6f4 100%);
}

.kafelek-dzialu-grafika {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 0.75rem;
  border-radius: 12px;
  background-color: var(--tlo);
  padding: 0.4rem;
}

.dzial-el-ikona,
.kafelek-dzialu-grafika img {
  width: 36px;
  height: 36px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.kafelek-dzialu-nazwa {
  font-family: var(--f-n);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--tekst);
  margin-bottom: 0.35rem;
}

.kafelek-dzialu-opis {
  font-size: 0.88rem;
  color: var(--t2);
  line-height: 1.45;
}

/* ==========================================================================
   SIATKI KART I KARTA WPISU (_karta.html)
   Listy 6: 3, 2, 1 | Listy 9: 3, potem 1
   ========================================================================== */
.sekcja-najnowsze {
  padding-block: 2rem 2.5rem;
}

.uklad-kart-trzy,
.dz-siatka-szesc,
.wp-powiazane-siatka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.uklad-kart-dziewiec,
.dz-siatka-dziewiec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.karta-wpisu {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background-color: var(--pow);
  border: 1px solid var(--linia);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--cien-maly);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.karta-wpisu:hover {
  transform: translateY(-3px);
  box-shadow: var(--cien-karta);
  border-color: var(--akcent);
}

.karta-fiszka {
  border-top: 5px solid var(--kd, var(--akcent));
}

.karta-sponsorowana {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%);
}

.karta-kadr {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: var(--akcent-jasny);
  overflow: hidden;
  flex-shrink: 0;
}

.karta-obraz,
.karta-kadr img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.karta-wpisu:hover .karta-kadr img {
  transform: scale(1.03);
}

.karta-wnetrze {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.25rem 1.35rem 1.35rem;
  min-width: 0;
}

.karta-gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.karta-dzial {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background-color: var(--akcent-jasny);
  color: var(--tekst);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  border-left: 3px solid var(--kd, var(--akcent));
}

.karta-dzial:hover {
  background-color: var(--akcent);
  color: var(--akcent-tekst);
}

.karta-dzial-ikona {
  display: inline-flex;
  align-items: center;
}

.karta-dzial-ikona svg {
  width: 15px;
  height: 15px;
}

.karta-plakietka {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  background-color: var(--tlo);
  color: var(--t2);
  font-size: 0.76rem;
  font-weight: 700;
}

.karta-plakietka-sponsor {
  background-color: var(--dodatek-jasny);
  color: var(--dodatek-cien);
}

.karta-tytul {
  font-size: 1.14rem;
  font-weight: 700;
  line-height: 1.32;
  margin-bottom: 0.6rem;
}

.karta-tytul a {
  color: var(--tekst);
  text-decoration: none;
}

.karta-tytul a:hover {
  color: var(--akcent-cien);
  text-decoration: underline;
}

.karta-zajawka {
  font-size: 0.93rem;
  color: var(--t2);
  line-height: 1.55;
  margin-bottom: 1.15rem;
}

.karta-dol {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--linia);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.karta-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: var(--t2);
}

.karta-data,
.karta-czas {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.karta-meta-ikona {
  display: inline-flex;
  color: var(--akcent-cien);
}

.karta-meta-ikona svg {
  width: 15px;
  height: 15px;
}

.karta-strzalka {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--akcent-cien);
  text-decoration: none;
}

.karta-strzalka svg {
  width: 16px;
  height: 16px;
}

.karta-strzalka:hover {
  background-color: var(--akcent-jasny);
  color: var(--tekst);
}

/* ==========================================================================
   FALA PRZEJŚCIA I SEKCJA TALERZ IG (#talerz-ig)
   ========================================================================== */
.przejscie-fala {
  padding-block: 0.5rem;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.fala-przejscia-el,
.przejscie-fala img {
  width: 100%;
  max-width: 938px;
  height: auto;
  aspect-ratio: 20 / 1;
  object-fit: contain;
  opacity: 0.75;
}

.sekcja-talerz-ig {
  padding-block: 2.5rem;
}

.barometr-ig-uklad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
  margin-bottom: 2.25rem;
  align-items: stretch;
}

.strefa-ig {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding: 1.5rem;
  border-radius: var(--r);
  background-color: var(--pow);
  border: 1px solid var(--linia);
  box-shadow: var(--cien-maly);
}

.strefa-ig-niski {
  border-top: 5px solid #288458;
}

.strefa-ig-sredni {
  border-top: 5px solid #c96a10;
}

.strefa-ig-zlozony {
  border-top: 5px solid #147487;
}

.strefa-ig-naglowek {
  margin-bottom: 0.75rem;
}

.strefa-ig-znaczek {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  margin-bottom: 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  background-color: var(--akcent-jasny);
  color: var(--tekst);
}

.strefa-ig-sredni .strefa-ig-znaczek {
  background-color: var(--dodatek-jasny);
  color: var(--dodatek-cien);
}

.strefa-ig-naglowek h3 {
  font-size: 1.2rem;
  margin-bottom: 0;
}

.strefa-ig-opis {
  font-size: 0.92rem;
  color: var(--t2);
  margin-bottom: 1rem;
}

.strefa-ig-punkty {
  padding-left: 1.15rem;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.91rem;
  color: var(--tekst);
}

.strefa-ig-punkty li::marker {
  color: var(--akcent);
}

/* Produkty talerza - 8 elementów (Listy 8: 4, 2, 1) */
.produkty-talerza-osiem {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
  margin-bottom: 2.25rem;
  align-items: stretch;
}

.produkt-talerza {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  min-width: 0;
  padding: 1.25rem 1rem;
  border-radius: var(--r);
  background-color: var(--pow);
  border: 1px solid var(--linia);
  text-decoration: none;
  color: var(--tekst);
  box-shadow: var(--cien-maly);
}

.produkt-talerza:hover {
  transform: translateY(-3px);
  border-color: var(--akcent);
  box-shadow: var(--cien-karta);
}

.produkt-talerza-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background-color: var(--tlo);
  padding: 0.55rem;
}

.produkt-el-foto,
.produkt-talerza-foto img {
  width: 48px;
  height: 48px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.produkt-talerza-nazwa {
  font-family: var(--f-n);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--tekst);
  margin-bottom: 0.35rem;
}

.produkt-talerza-opis {
  font-size: 0.85rem;
  color: var(--t2);
  line-height: 1.45;
}

/* ==========================================================================
   SEKCJA SŁODZIKI (#waga-slodzikow) - 6 KART (Listy 6: 3, 2, 1)
   ========================================================================== */
.sekcja-slodziki {
  padding-block: 2.5rem;
}

.slodziki-baner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 2rem 2.25rem;
  margin-bottom: 1.75rem;
  border-radius: calc(var(--r) + 4px);
  background: linear-gradient(125deg, #0b534a 0%, #0d8374 100%);
  color: #ffffff;
  overflow: hidden;
  box-shadow: var(--cien-karta);
}

.slodziki-baner-tlo {
  position: absolute;
  right: -20px;
  top: -20px;
  width: 240px;
  height: 240px;
  opacity: 0.14;
  pointer-events: none;
}

.slodziki-heks-el,
.slodziki-baner-tlo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.slodziki-baner-ikona {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem;
  z-index: 1;
}

.slodziki-kostki-el,
.slodziki-baner-ikona img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.slodziki-baner-tresc {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.slodziki-baner-tresc .sekcja-kicker {
  background-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.slodziki-baner-tresc .tytul-sekcji {
  color: #ffffff;
}

.slodziki-baner-tresc .opis-sekcji {
  color: #e8f4f2;
}

.slodziki-porownanie-szesc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
  align-items: stretch;
}

.karta-slodzika {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding: 1.35rem;
  border-radius: var(--r);
  background-color: var(--pow);
  border: 1px solid var(--linia);
  border-top: 4px solid var(--akcent);
  box-shadow: var(--cien-maly);
}

.karta-slodzika-polecana {
  border-top-color: #288458;
  background: linear-gradient(180deg, #ffffff 0%, #f4faf7 100%);
}

.karta-slodzika-ostroznosc {
  border-top-color: #c96a10;
}

.karta-slodzika-punkt-odniesienia {
  border-top-color: #9e4200;
}

.karta-slodzika-gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.karta-slodzika-gora strong {
  font-family: var(--f-n);
  font-size: 1.12rem;
  color: var(--tekst);
}

.slodzik-ig {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background-color: var(--akcent-jasny);
  color: var(--tekst);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.karta-slodzika-cechy {
  font-size: 0.9rem;
  color: var(--tekst);
  margin-bottom: 0.55rem;
}

.karta-slodzika-wniosek {
  font-size: 0.88rem;
  color: var(--t2);
  margin-top: auto;
  margin-bottom: 0;
}

/* ==========================================================================
   RYTM GLIKEMII, KOLUMNA BOCZNA I WIERSZ WPISU (_wiersz.html)
   ========================================================================== */
.sekcja-rytm-glikemii {
  padding-block: 2.5rem;
}

.uklad-z-panelem-bocznym {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 2rem;
  align-items: start;
}

.kolumna-glowna-rytmu {
  min-width: 0;
}

.etapy-dnia-cztery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  margin-bottom: 2rem;
  align-items: stretch;
}

.karta-etapu-dnia {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  height: 100%;
  min-width: 0;
  padding: 1.25rem;
  border-radius: var(--r);
  background-color: var(--pow);
  border: 1px solid var(--linia);
  box-shadow: var(--cien-maly);
}

.karta-etapu-ikona {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background-color: var(--akcent-jasny);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

.etap-el-ikona,
.karta-etapu-ikona img {
  width: 36px;
  height: 36px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.karta-etapu-tresc {
  min-width: 0;
}

.etap-pora {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--akcent-cien);
  margin-bottom: 0.25rem;
}

.karta-etapu-tresc h3 {
  font-size: 1.08rem;
  margin-bottom: 0.35rem;
}

.karta-etapu-tresc p {
  font-size: 0.89rem;
  color: var(--t2);
  margin-bottom: 0;
}

.lista-wierszy-rytmu {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.wiersz-wpisu {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  height: 100%;
  min-width: 0;
  padding: 1rem 1.2rem;
  border-radius: var(--r);
  background-color: var(--pow);
  border: 1px solid var(--linia);
  border-left: 4px solid var(--kd, var(--akcent));
  box-shadow: var(--cien-maly);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.wiersz-wpisu:hover {
  border-color: var(--akcent);
  transform: translateY(-2px);
}

.wiersz-kadr {
  display: block;
  width: 84px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--akcent-jasny);
  flex-shrink: 0;
}

.wiersz-obraz,
.wiersz-kadr img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.wiersz-znaczek {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: var(--akcent-jasny);
  color: var(--akcent-cien);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wiersz-znaczek svg {
  width: 22px;
  height: 22px;
}

.wiersz-srodek {
  min-width: 0;
}

.wiersz-nadtytul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.wiersz-dzial {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--akcent-cien);
  text-decoration: none;
}

.wiersz-dzial:hover {
  text-decoration: underline;
}

.wiersz-sponsor {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  background-color: var(--dodatek-jasny);
  color: var(--dodatek-cien);
}

.wiersz-tytul {
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.wiersz-tytul a {
  color: var(--tekst);
  text-decoration: none;
}

.wiersz-tytul a:hover {
  color: var(--akcent-cien);
  text-decoration: underline;
}

.wiersz-zajawka {
  font-size: 0.86rem;
  color: var(--t2);
  margin-bottom: 0;
}

.wiersz-prawo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--t2);
  white-space: nowrap;
}

.wiersz-data,
.wiersz-czas {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.wiersz-data svg,
.wiersz-czas svg {
  width: 14px;
  height: 14px;
  color: var(--akcent-cien);
}

.kolumna-boczna-przyklejona {
  position: sticky;
  top: 96px;
  min-width: 0;
}

.widget-samokontroli {
  position: relative;
  padding: 1.6rem;
  border-radius: calc(var(--r) + 2px);
  background-color: var(--pow);
  border: 2px solid var(--linia);
  box-shadow: var(--cien-karta);
  overflow: hidden;
}

.widget-samokontroli-tlo {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 140px;
  height: 140px;
  opacity: 0.12;
  pointer-events: none;
}

.widget-tlo-el,
.widget-samokontroli-tlo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.widget-samokontroli-sprzet {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.widget-glukometr-el,
.widget-pen-el,
.widget-samokontroli-sprzet img {
  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background-color: var(--tlo);
  border-radius: 12px;
  padding: 0.35rem;
}

.widget-samokontroli-tytul {
  font-size: 1.22rem;
  margin-bottom: 0.45rem;
}

.widget-samokontroli-opis {
  font-size: 0.9rem;
  color: var(--t2);
  margin-bottom: 1rem;
}

.widget-lista-kontrolna {
  padding-left: 1.2rem;
  margin-bottom: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.89rem;
  color: var(--tekst);
}

.widget-lista-kontrolna li::marker {
  color: var(--akcent);
}

.widget-samokontroli-stopka {
  margin-top: 0.5rem;
}

/* ==========================================================================
   PORADNIKI KROK PO KROKU (6 elementów: 3, 2, 1)
   ========================================================================== */
.sekcja-poradniki-krok {
  padding-block: 2.25rem;
}

.poradniki-krok-ramka {
  border-radius: calc(var(--r) + 4px);
  background: linear-gradient(135deg, #0b534a 0%, #0d8374 60%, #147487 100%);
  padding: 2.25rem;
  color: #ffffff;
  box-shadow: var(--cien-mocny);
}

.poradniki-krok-baner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}

.poradniki-krok-tekst {
  max-width: 680px;
  min-width: 0;
}

.poradniki-krok-tytul {
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  color: #ffffff;
  margin-bottom: 0.4rem;
}

.poradniki-krok-opis {
  font-size: 1rem;
  color: #e8f4f2;
  margin-bottom: 0;
}

.poradniki-krok-ilustracja {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

.poradniki-notes-el,
.poradniki-krok-ilustracja img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.poradniki-krok-siatka {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  align-items: stretch;
}

.poradnik-krok-karta {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding: 1.25rem 1.35rem;
  border-radius: var(--r);
  background-color: var(--pow);
  color: var(--tekst);
  box-shadow: var(--cien-maly);
}

.poradnik-krok-numer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--akcent-jasny);
  color: var(--akcent-cien);
  font-family: var(--f-n);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.poradnik-krok-link {
  font-size: 1.03rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 0.85rem;
}

.poradnik-krok-link a {
  color: var(--tekst);
  text-decoration: none;
}

.poradnik-krok-link a:hover {
  color: var(--akcent-cien);
  text-decoration: underline;
}

.poradnik-krok-dol {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--linia);
}

.poradnik-krok-dzial {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--t2);
}

.poradnik-krok-strzalka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--akcent-cien);
}

/* ==========================================================================
   KSIĘGA PRODUKTÓW - HARMONIJKA (#ksiega-produktow)
   ========================================================================== */
.sekcja-ksiega-produktow {
  padding-block: 2.25rem 3.25rem;
}

.ksiega-harmonijka {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ksiega-panel {
  border-radius: var(--r);
  background-color: var(--pow);
  border: 1px solid var(--linia);
  box-shadow: var(--cien-maly);
  overflow: hidden;
}

.ksiega-naglowek {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
  padding: 1rem 1.35rem;
  cursor: pointer;
  user-select: none;
  background-color: var(--pow);
  transition: background-color 0.18s ease;
}

.ksiega-naglowek::-webkit-details-marker {
  display: none;
}

.ksiega-naglowek:hover {
  background-color: var(--tlo);
}

.ksiega-panel[open] .ksiega-naglowek {
  background-color: var(--akcent-jasny);
  border-bottom: 1px solid var(--linia);
}

.ksiega-naglowek-ikona {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: var(--pow);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  flex-shrink: 0;
}

.ksiega-el-mala,
.ksiega-naglowek-ikona img {
  width: 34px;
  height: 34px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.ksiega-naglowek-tekst {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.ksiega-naglowek-tekst strong {
  font-family: var(--f-n);
  font-size: 1.12rem;
  color: var(--tekst);
}

.ksiega-naglowek-tekst small {
  font-size: 0.88rem;
  color: var(--t2);
}

.ksiega-zawartosc {
  padding: 1.35rem;
}

.uklad-kart-dwa,
.dz-siatka-dwa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  align-items: stretch;
}

/* ==========================================================================
   OKRUCHY NAWIGACYJNE (_okruchy.html) I PAGINACJA
   ========================================================================== */
.okruchy {
  padding-block: 0.85rem;
  font-size: 0.86rem;
  color: var(--t2);
}

.okruchy ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.okruchy li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.okruchy li + li::before {
  content: "›";
  color: var(--t2);
  font-weight: 700;
}

.okruchy a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.25rem;
  color: var(--akcent-cien);
  text-decoration: none;
  font-weight: 600;
}

.okruchy a:hover {
  text-decoration: underline;
}

.okruchy [aria-current="page"] {
  color: var(--tekst);
  font-weight: 700;
}

.paginacja,
.dz-paginacja {
  display: flex;
  justify-content: center;
  margin-block: 2.25rem 1rem;
}

.paginacja-lista,
.paginacja ul,
.dz-paginacja ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.paginacja a,
.paginacja span,
.paginacja-link,
.paginacja-strona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background-color: var(--pow);
  border: 1px solid var(--linia);
  color: var(--tekst);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}

.paginacja a:hover,
.paginacja-link:hover {
  background-color: var(--akcent-jasny);
  border-color: var(--akcent);
}

.paginacja [aria-current="page"],
.paginacja .jest-aktywna,
.paginacja-aktywna {
  background-color: var(--akcent);
  border-color: var(--akcent-cien);
  color: var(--akcent-tekst);
}

/* ==========================================================================
   CZĘŚĆ 3: STRONA DZIAŁU (dz-*), WPISU (wp-*) I KOLUMNA BOCZNA (bok-*)
   ========================================================================== */
.dz-strona,
.wp-strona,
.strona-stala,
.strona-404 {
  padding-bottom: 3rem;
}

.dz-baner,
.dz-hero,
.dz-naglowek {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 2rem;
  padding: 2.25rem;
  margin-block: 0.5rem 1.75rem;
  border-radius: calc(var(--r) + 4px);
  background: linear-gradient(125deg, #0b534a 0%, var(--kd, #0d8374) 100%);
  color: #ffffff;
  overflow: hidden;
  box-shadow: var(--cien-mocny);
}

.dz-tresc {
  min-width: 0;
  z-index: 2;
}

.dz-nadtytul {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.8rem;
  margin-bottom: 0.75rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
}

.dz-tytul {
  font-size: clamp(1.85rem, 3.2vw, 2.65rem);
  color: #ffffff;
  margin-bottom: 0.55rem;
}

.dz-podtytul,
.dz-opis {
  font-size: 1rem;
  color: #e8f4f2;
  margin-bottom: 0.75rem;
  max-width: 62ch;
}

.dz-statystyki,
.dz-licznik {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background-color: rgba(18, 43, 40, 0.32);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 700;
}

.dz-kadr {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r);
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.85);
  background-color: var(--akcent-cien);
}

.dz-obraz,
.dz-kadr img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.dz-pasek-filtrow,
.dz-pigulki,
.dz-filtry,
.dz-sciezki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
}

.dz-pigulka,
.dz-sciezka {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  background-color: var(--pow);
  border: 1px solid var(--linia);
  color: var(--tekst);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.dz-pigulka:hover,
.dz-sciezka:hover,
.dz-pigulka.jest-aktywna {
  background-color: var(--akcent);
  border-color: var(--akcent-cien);
  color: var(--akcent-tekst);
}

.dz-uklad,
.wp-uklad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 2rem;
  align-items: start;
}

.dz-glowna,
.dz-kolumna-glowna,
.wp-kolumna-glowna,
.wp-artykul {
  min-width: 0;
}

.dz-siatka,
.dz-siatka-kart {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem;
  align-items: stretch;
}

.dz-siatka-trzy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
  align-items: stretch;
}

.dz-lista,
.dz-lista-wierszy {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.dz-inne-siatka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  margin-top: 1.25rem;
}

/* Kolumna boczna przyklejana (bok-*) */
.bok-kolumna,
.bok-przyklejony {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  min-width: 0;
}

.bok-panel,
.bok-widget,
.bok-karta {
  padding: 1.4rem;
  border-radius: var(--r);
  background-color: var(--pow);
  border: 1px solid var(--linia);
  box-shadow: var(--cien-maly);
  min-width: 0;
}

.bok-naglowek,
.bok-tytul {
  font-family: var(--f-n);
  font-size: 1.14rem;
  font-weight: 700;
  color: var(--tekst);
  margin-bottom: 0.85rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--akcent-jasny);
}

.bok-opis {
  font-size: 0.9rem;
  color: var(--t2);
  margin-bottom: 1rem;
}

.bok-lista,
.bok-spis-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.bok-link,
.bok-lista a,
.bok-spis-lista a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  color: var(--tekst);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}

.bok-link:hover,
.bok-lista a:hover,
.bok-spis-lista a:hover {
  background-color: var(--akcent-jasny);
  color: var(--akcent-cien);
}

.bok-polecane {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.bok-polecany-wiersz {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  text-decoration: none;
  color: var(--tekst);
}

.bok-kadr {
  width: 68px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--akcent-jasny);
}

.bok-obraz,
.bok-kadr img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.bok-metryczka {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.bok-metryczka-wiersz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed var(--linia);
  font-size: 0.88rem;
}

.bok-metryczka-klucz {
  color: var(--t2);
}

.bok-metryczka-wartosc {
  font-weight: 700;
  color: var(--tekst);
}

.bok-cta,
.bok-baner {
  background: linear-gradient(160deg, #dff0ed 0%, #ffffff 100%);
  border: 2px solid var(--akcent);
  text-align: center;
}

/* Wpis / Artykuł (wp-*) */
.wp-naglowek,
.wp-gora {
  margin-bottom: 1.5rem;
}

.wp-nadtytul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.wp-dzial,
.wp-dzial-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background-color: var(--kd, var(--akcent));
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.wp-tytul {
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  line-height: 1.16;
  margin-bottom: 0.85rem;
}

.wp-meta,
.wp-meta-pasek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding-block: 0.75rem;
  margin-bottom: 1.25rem;
  border-block: 1px solid var(--linia);
  font-size: 0.88rem;
  color: var(--t2);
}

.wp-data,
.wp-czas,
.wp-aktualizacja {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.wp-kadr,
.wp-obraz-glowny {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--r) + 2px);
  overflow: hidden;
  margin-bottom: 1.5rem;
  background-color: var(--akcent-jasny);
  box-shadow: var(--cien-karta);
}

.wp-obraz,
.wp-kadr img,
.wp-obraz-glowny img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.wp-lead,
.wp-zajawka {
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--tekst);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.5rem;
  background-color: var(--pow);
  border-left: 4px solid var(--kd, var(--akcent));
  border-radius: 0 var(--r) var(--r) 0;
  box-shadow: var(--cien-maly);
}

.wp-spis,
.wp-spis-tresci {
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.75rem;
  border-radius: var(--r);
  background-color: var(--akcent-jasny);
  border: 1px solid var(--linia);
}

.wp-spis-tytul,
.wp-spis-naglowek {
  font-family: var(--f-n);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--tekst);
  margin-bottom: 0.75rem;
}

.wp-spis-lista,
.wp-spis ol,
.wp-spis ul {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.wp-spis a,
.wp-spis-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tekst);
  font-weight: 600;
  text-decoration: none;
}

.wp-spis a:hover,
.wp-spis-link:hover {
  color: var(--akcent-cien);
  text-decoration: underline;
}

/* Treść artykułu i tabele z własnym przewijaniem */
.wp-tresc,
.tresc-artykulu {
  background-color: var(--pow);
  padding: 2rem;
  border-radius: var(--r);
  border: 1px solid var(--linia);
  box-shadow: var(--cien-maly);
  font-size: 1.04rem;
  line-height: 1.72;
  color: var(--tekst);
  min-width: 0;
}

.wp-tresc h2,
.tresc-artykulu h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--akcent-jasny);
}

.wp-tresc h3,
.tresc-artykulu h3 {
  font-size: 1.24rem;
  margin-top: 1.5rem;
  margin-bottom: 0.55rem;
}

.wp-tresc p,
.tresc-artykulu p,
.wp-tresc ul,
.tresc-artykulu ul,
.wp-tresc ol,
.tresc-artykulu ol {
  margin-bottom: 1.15rem;
}

.wp-wnioski,
.wp-ramka,
.wp-wskazowka,
.wp-tresc blockquote,
.tresc-artykulu blockquote {
  padding: 1.35rem 1.5rem;
  margin-block: 1.5rem;
  border-radius: var(--r);
  background-color: #f4faf7;
  border: 1px solid #b8dfd0;
  border-left: 5px solid #288458;
  color: var(--tekst);
}

.wp-ostrzezenie {
  background-color: var(--dodatek-jasny);
  border-color: #f2c499;
  border-left: 5px solid var(--dodatek-kontrast);
}

.wp-tabela-kadr,
.tabela-przewijana {
  width: 100%;
  overflow-x: auto;
  margin-block: 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--linia);
}

.wp-tresc table,
.tresc-artykulu table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin-block: 1.5rem;
  font-size: 0.94rem;
  background-color: var(--pow);
}

.wp-tresc th,
.wp-tresc td,
.tresc-artykulu th,
.tresc-artykulu td {
  padding: 0.75rem 1rem;
  text-align: left;
  border: 1px solid var(--linia);
}

.wp-tresc th,
.tresc-artykulu th {
  background-color: var(--akcent-jasny);
  color: var(--tekst);
  font-weight: 700;
}

.wp-nawigacja,
.wp-sasiednie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  margin-block: 2rem;
}

.wp-sasiedni,
.wp-poprzedni,
.wp-nastepny {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 88px;
  padding: 1.15rem 1.35rem;
  border-radius: var(--r);
  background-color: var(--pow);
  border: 1px solid var(--linia);
  text-decoration: none;
  color: var(--tekst);
}

.wp-sasiedni:hover,
.wp-poprzedni:hover,
.wp-nastepny:hover {
  border-color: var(--akcent);
  background-color: var(--akcent-jasny);
}

.wp-powiazane {
  margin-top: 2.5rem;
}

/* ==========================================================================
   STOPKA WITRYNY (_stopka.html)
   ========================================================================== */
.stopka-witryny {
  background-color: var(--stopka);
  color: var(--stopka-tekst);
  margin-top: auto;
}

.stopka-ostrzezenie {
  background-color: #08413a;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding-block: 1.15rem;
}

.stopka-ostrzezenie-wnetrze {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stopka-ostrzezenie-ikona {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stopka-tarcza-el,
.stopka-ostrzezenie-ikona img {
  width: 38px;
  height: 38px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.stopka-ostrzezenie-tekst {
  font-size: 0.86rem;
  line-height: 1.5;
  color: #e8f4f2;
}

.stopka-ostrzezenie-tekst strong {
  color: #ffffff;
}

.stopka-siatka {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  padding-block: 2.75rem 2.25rem;
}

.stopka-kolumna {
  min-width: 0;
}

.stopka-marka {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  text-decoration: none;
  color: #ffffff;
  margin-bottom: 0.85rem;
}

.stopka-marka-sygnet {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background-color: var(--akcent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stopka-marka-sygnet svg {
  width: 24px;
  height: 24px;
}

.stopka-marka-tekst {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.stopka-marka-tekst strong {
  font-family: var(--f-n);
  font-size: 1.25rem;
  color: #ffffff;
}

.stopka-marka-tekst strong span {
  color: #8ce3d6;
}

.stopka-marka-tekst small {
  font-size: 0.78rem;
  color: #cde5e1;
}

.stopka-opis {
  font-size: 0.9rem;
  color: #d8ece9;
  line-height: 1.55;
  margin-bottom: 0;
}

.stopka-naglowek {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.85rem;
}

.stopka-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stopka-lista-dwukolumnowa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 0.75rem;
}

.stopka-lista a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding-block: 0.25rem;
  color: #e8f4f2;
  font-size: 0.9rem;
  text-decoration: none;
}

.stopka-lista a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.stopka-kropka {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--kd, #8ce3d6);
  border: 2px solid rgba(255, 255, 255, 0.75);
  flex-shrink: 0;
}

.stopka-dol {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-block: 1.15rem;
  background-color: #073832;
}

.stopka-dol-wnetrze {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.stopka-prawa {
  font-size: 0.84rem;
  color: #d8ece9;
  margin: 0;
}

/* ==========================================================================
   DOSTĘPNOŚĆ: REDUKCJA RUCHU
   ========================================================================== */
@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;
  }
}

/* ==========================================================================
   RESPONSYWNOŚĆ: TABLET I MNIEJSZY DESKTOP (1024px / 768px)
   ========================================================================== */
@media (max-width: 1100px) {
  .uklad-z-panelem-bocznym,
  .dz-uklad,
  .wp-uklad {
    grid-template-columns: minmax(0, 1fr);
  }

  .kolumna-boczna-przyklejona,
  .bok-kolumna,
  .bok-przyklejony {
    position: static;
  }

  .stopka-siatka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .hero-uklad,
  .dz-baner,
  .dz-hero,
  .dz-naglowek {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  /* Listy 6: przejście z 3 na 2 kolumny na 768px */
  .dzialy-szesc-kafelkow,
  .uklad-kart-trzy,
  .slodziki-porownanie-szesc,
  .poradniki-krok-siatka,
  .dz-siatka-szesc,
  .wp-powiazane-siatka,
  .dz-inne-siatka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Listy 8: przejście z 4 na 2 kolumny na 768px */
  .produkty-talerza-osiem {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Listy 9 oraz 3 elementy: 3 kolumny, potem od razu 1 (bez pustego pola) */
  .barometr-ig-uklad,
  .uklad-kart-dziewiec,
  .dz-siatka-dziewiec,
  .dz-siatka-trzy,
  .uklad-kart-trzy:has(> :nth-child(9):last-child),
  .dz-siatka:has(> :nth-child(9):last-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   REGUŁY DLA TELEFONU (NA KOŃCU PLIKU, ABY NIC ICH NIE NADPISAŁO - 390px)
   ========================================================================== */
@media (max-width: 680px) {
  .szerokosc-strony {
    padding-inline: 1rem;
  }

  .naglowek-witryny {
    position: relative;
  }

  .naglowek-pasek {
    flex-wrap: wrap;
    gap: 0.65rem;
    padding-block: 0.65rem;
  }

  .nawigacja-glowna {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.25rem;
  }

  .naw-dom,
  .naw-link {
    flex-shrink: 0;
  }

  .hero-sekcja {
    padding-block: 1.5rem 2rem;
    min-height: auto;
  }

  .hero-tytul {
    font-size: 1.85rem;
  }

  .hero-akcje {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-akcje .przycisk {
    width: 100%;
  }

  /* Wszystkie siatki 9, 8, 6, 4, 3, 2 przechodzą na 1 pełną kolumnę na telefonie */
  .dzialy-szesc-kafelkow,
  .uklad-kart-trzy,
  .uklad-kart-dziewiec,
  .barometr-ig-uklad,
  .produkty-talerza-osiem,
  .slodziki-porownanie-szesc,
  .etapy-dnia-cztery,
  .poradniki-krok-siatka,
  .uklad-kart-dwa,
  .stopka-siatka,
  .stopka-lista-dwukolumnowa,
  .dz-siatka,
  .dz-siatka-kart,
  .dz-siatka-dwa,
  .dz-siatka-trzy,
  .dz-siatka-szesc,
  .dz-siatka-dziewiec,
  .dz-inne-siatka,
  .wp-powiazane-siatka,
  .wp-nawigacja,
  .wp-sasiednie {
    grid-template-columns: minmax(0, 1fr);
  }

  .slodziki-baner,
  .poradniki-krok-baner,
  .stopka-ostrzezenie-wnetrze {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.35rem;
  }

  .poradniki-krok-ramka {
    padding: 1.35rem;
  }

  .wiersz-wpisu {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
  }

  .wiersz-prawo {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
  }

  .karta-etapu-dnia {
    flex-direction: column;
  }

  .wp-tresc,
  .tresc-artykulu,
  .dz-baner,
  .dz-hero,
  .dz-naglowek {
    padding: 1.25rem;
  }
}

.dz-strona,
.wp-strona {
  padding-top: 1.25rem;
  padding-bottom: 3rem;
}

.dz-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 420px);
  align-items: center;
  gap: 2rem;
  padding: 2.25rem 2.5rem;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, #0b5c51 0%, var(--kd, #0d8374) 68%, #159483 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(11, 83, 74, 0.14);
  border-bottom: 5px solid var(--dodatek, #f07c12);
  margin-bottom: 2rem;
}

.dz-hero:not(:has(.dz-kadr)) {
  grid-template-columns: 1fr;
}

.dz-nadtytul {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
}

.dz-nadtytul-ikona svg {
  width: 1.1rem;
  height: 1.1rem;
}

.dz-tytul {
  color: #ffffff;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 0.65rem;
}

.dz-podtytul {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e6f7f4;
  margin: 0 0 0.65rem;
}

.dz-opis {
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 1.25rem;
}

.dz-pigulki {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.dz-pigulka {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #122b28;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}

.dz-pigulka-el {
  width: 26px;
  height: auto;
  aspect-ratio: 133 / 123;
  object-fit: contain;
  flex-shrink: 0;
}

.dz-kadr {
  width: 100%;
  max-width: 410px;
  height: 250px;
  justify-self: end;
  border-radius: 1.15rem;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  background: #085c51;
}

.dz-obraz {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dz-sciezki {
  margin-bottom: 2rem;
}

.dz-siatka-trzy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}

.dz-sciezka {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.15rem 1.25rem;
  border-radius: 1.1rem;
  background: #ffffff;
  border: 1px solid #cfe2df;
  border-top: 3px solid var(--kd, #0d8374);
  text-decoration: none;
  color: inherit;
}

.dz-sciezka-el {
  width: 58px;
  max-width: 58px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.dz-sciezka-tytul {
  font-size: 1rem;
  font-weight: 700;
  color: #122b28;
  margin: 0 0 0.3rem;
  display: block;
}

.dz-sciezka-opis {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #486561;
  margin: 0;
}

.dz-baner {
  background: #ffffff;
  border: 1px solid #cfe2df;
  border-radius: 1.25rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 2rem;
}

.dz-baner-gora {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.dz-kicker {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--kd, #0d8374);
  margin: 0 0 0.25rem;
}

.dz-sekcja-tytul {
  font-size: 1.35rem;
  margin: 0;
  color: #122b28;
}

.dz-sekcja-opis {
  font-size: 0.92rem;
  color: #486561;
  margin: 0.3rem 0 0;
}

.dz-ekg-el {
  width: 130px;
  max-width: 130px;
  height: auto;
  aspect-ratio: 287 / 118;
  object-fit: contain;
}

.dz-siatka-dwa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.dz-siatka-dwa:has(> :nth-child(3):last-child),
.dz-siatka-dwa:has(> :only-child) {
  grid-template-columns: 1fr;
}

.dz-temat {
  background: #f3f8f7;
  border: 1px solid #cfe2df;
  border-radius: 0.95rem;
  padding: 0.85rem 1.1rem;
}

.dz-temat:target {
  border-color: var(--dodatek, #f07c12);
  box-shadow: 0 0 0 2px rgba(240, 124, 18, 0.22);
}

.dz-temat-naglowek {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  cursor: pointer;
  list-style: none;
}

.dz-temat-naglowek::-webkit-details-marker {
  display: none;
}

.dz-temat-ikona {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 0.7rem;
  background: #dff0ed;
  color: #0d8374;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dz-temat-ikona svg {
  width: 1.25rem;
  height: 1.25rem;
}

.dz-temat-tekst {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}

.dz-temat-tekst strong {
  font-size: 0.98rem;
  color: #122b28;
}

.dz-temat-tekst small {
  font-size: 0.83rem;
  color: #486561;
  line-height: 1.4;
}

.dz-temat-strzalka svg {
  width: 1rem;
  height: 1rem;
  color: #0d8374;
  transition: transform 0.2s ease;
}

.dz-temat[open] .dz-temat-strzalka svg {
  transform: rotate(90deg);
}

.dz-temat-lista {
  margin: 0.85rem 0 0;
  padding: 0.75rem 0 0 1.1rem;
  border-top: 1px solid #cfe2df;
  display: grid;
  gap: 0.45rem;
}

.dz-temat-lista a {
  color: #122b28;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.dz-temat-lista a:hover {
  color: #0d8374;
  text-decoration: underline;
}

.dz-uklad,
.wp-uklad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 2rem;
  align-items: start;
}

.dz-kolumna-glowna,
.wp-kolumna-glowna,
.bok-kolumna,
.bok-przyklejony {
  position: sticky;
  top: 5.5rem;
  align-self: start;
  height: auto;
}

.dz-lista-pasek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid #cfe2df;
}

.dz-lisc-el {
  width: 48px;
  max-width: 48px;
  height: auto;
  aspect-ratio: 126 / 108;
  object-fit: contain;
}

.dz-lista-wierszy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: auto !important;
}

.wiersz-wpisu,
.karta-wpisu {
  height: auto !important;
  flex: 0 0 auto !important;
}

.dz-paginacja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid #cfe2df;
}

.dz-strony-numery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.dz-strona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #cfe2df;
  color: #122b28;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.dz-strona.jest-biezaca {
  background: var(--kd, #0d8374);
  border-color: var(--kd, #0d8374);
  color: #ffffff;
}

.bok-przyklejony {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.bok-widget {
  background: #ffffff;
  border: 1px solid #cfe2df;
  border-radius: 1.15rem;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 6px 18px rgba(18, 43, 40, 0.04);
}

.bok-panel {
  background: linear-gradient(180deg, #e7f5f2 0%, #ffffff 100%);
  border-top: 3px solid #0d8374;
}

.bok-panel-gora {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.bok-el-ikona {
  width: 52px;
  max-width: 52px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.bok-tytul {
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
  color: #122b28;
}

.bok-opis {
  font-size: 0.86rem;
  line-height: 1.5;
  color: #486561;
  margin: 0;
}

.bok-lista,
.bok-polecane,
.bok-checklista {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.bok-link {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.75rem;
  background: #f3f8f7;
  color: #122b28;
  text-decoration: none;
  border-left: 3px solid var(--kd, #0d8374);
}

.bok-link-ikona {
  color: var(--kd, #0d8374);
  display: inline-flex;
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.bok-link-ikona svg {
  width: 1.1rem;
  height: 1.1rem;
}

.bok-link-tekst {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.bok-link-tekst strong {
  font-size: 0.9rem;
}

.bok-link-tekst small {
  font-size: 0.78rem;
  color: #486561;
  line-height: 1.35;
}

.bok-checklista li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #122b28;
}

.bok-checklista svg {
  width: 1rem;
  height: 1rem;
  color: #0d8374;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.bok-produkty-siatka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.85rem;
}

.bok-produkt-element {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 0.6rem 0.45rem;
  border-radius: 0.8rem;
  background: #f3f8f7;
  border: 1px solid #cfe2df;
  color: #122b28;
  font-size: 0.79rem;
  font-weight: 700;
  text-decoration: none;
}

.bok-produkt-el {
  width: 48px;
  max-width: 48px;
  height: auto;
  object-fit: contain;
}

.bok-baner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #f3f8f7;
}

.bok-el-tarcza {
  width: 42px;
  max-width: 42px;
  height: auto;
  aspect-ratio: 116 / 114;
  object-fit: contain;
  flex-shrink: 0;
}

.bok-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: var(--dodatek, #f07c12);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
}

.bok-cta svg {
  width: 0.95rem;
  height: 0.95rem;
}

.bok-metryczka {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0.75rem 0 0;
}

.bok-metryczka:has(> :nth-child(3):last-child) {
  grid-template-columns: 1fr;
}

.bok-metryczka-wiersz {
  padding: 0.55rem 0.7rem;
  border-radius: 0.7rem;
  background: #f3f8f7;
  border: 1px solid #dff0ed;
}

.bok-metryczka-klucz {
  font-size: 0.75rem;
  color: #486561;
  margin: 0 0 0.15rem;
}

.bok-metryczka-wartosc {
  font-size: 0.88rem;
  font-weight: 700;
  color: #122b28;
  margin: 0;
}

.bok-metryczka-wartosc a {
  color: inherit;
  text-decoration: none;
}

.bok-polecany-wiersz {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid #e6f1ef;
  color: #122b28;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
}

.bok-polecany-strzalka svg {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--kd, #0d8374);
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.wp-artykul {
  background: #ffffff;
  border: 1px solid #cfe2df;
  border-radius: 1.35rem;
  padding: 2rem 2.25rem;
  box-shadow: 0 10px 28px rgba(18, 43, 40, 0.04);
}

.wp-artykul-waski {
  max-width: 860px;
  margin: 0 auto;
}

.wp-naglowek {
  margin-bottom: 1.5rem;
}

.wp-naglowek-projektowany {
  padding: 1.6rem 1.75rem;
  border-radius: 1.1rem;
  background: linear-gradient(135deg, #e6f5f2 0%, #f5faf9 65%, #fff5eb 100%);
  border: 1px solid #cfe2df;
  border-left: 5px solid var(--kd, #0d8374);
}

.wp-gora {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.wp-dzial-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--kd, #0d8374);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.wp-dzial-ikona svg {
  width: 1rem;
  height: 1rem;
}

.wp-nadtytul {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #cfe2df;
  color: #085c51;
  font-size: 0.8rem;
  font-weight: 700;
}

.wp-nadtytul-sponsor {
  background: #fff3e6;
  border-color: #f07c12;
  color: #b85600;
}

.wp-naglowek-ekg {
  width: 115px;
  max-width: 115px;
  height: auto;
  aspect-ratio: 287 / 118;
  object-fit: contain;
  margin-left: auto;
}

.wp-tytul {
  font-size: clamp(1.65rem, 2.8vw, 2.35rem);
  line-height: 1.2;
  color: #122b28;
  margin: 0 0 1rem;
}

.wp-meta-pasek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.wp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: 0.88rem;
  color: #486561;
}

.wp-data,
.wp-czas {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.wp-data svg,
.wp-czas svg {
  width: 1rem;
  height: 1rem;
  color: var(--kd, #0d8374);
}

.wp-naglowek-el {
  width: 56px;
  max-width: 56px;
  height: auto;
  object-fit: contain;
}

.wp-kadr {
  margin: 0 0 1.5rem;
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid #cfe2df;
}

.wp-obraz-glowny {
  width: 100%;
  height: auto;
  display: block;
}

.wp-lead {
  padding: 1.1rem 1.35rem;
  margin-bottom: 1.5rem;
  background: #f3f8f7;
  border-left: 4px solid var(--kd, #0d8374);
  border-radius: 0 0.85rem 0.85rem 0;
  font-size: 1.06rem;
  line-height: 1.65;
  color: #122b28;
  font-weight: 500;
}

.wp-spis {
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #e5f4f1 0%, #f3f8f7 100%);
  border: 1px solid #bde0da;
}

.wp-spis-naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.wp-spis-tytul {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.05rem;
  color: #085c51;
  margin: 0;
}

.wp-spis-tytul svg {
  width: 1.15rem;
  height: 1.15rem;
}

.wp-spis-lisc {
  width: 46px;
  max-width: 46px;
  height: auto;
  aspect-ratio: 126 / 108;
  object-fit: contain;
}

.wp-spis-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.wp-spis-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  color: #122b28;
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 600;
}

.wp-spis-nr {
  color: var(--kd, #0d8374);
  font-weight: 800;
}

.wp-wnioski {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.35rem 1.5rem;
  margin: 2rem 0 1.5rem;
  border-radius: 1.1rem;
  background: linear-gradient(135deg, #e8f6f3 0%, #fff7ed 100%);
  border: 1px solid #cfe2df;
}

.wp-wnioski-tytul {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.15rem;
  color: #085c51;
  margin: 0 0 0.75rem;
}

.wp-wnioski-tytul svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #0d8374;
}

.wp-wnioski-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.wp-wnioski-lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

.wp-wnioski-lista svg {
  width: 1rem;
  height: 1rem;
  color: #0d8374;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.wp-wnioski-el {
  width: 96px;
  max-width: 96px;
  height: auto;
  aspect-ratio: 260 / 210;
  object-fit: contain;
  flex-shrink: 0;
}

.wp-ostrzezenie {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0.95rem;
  background: #f3f8f7;
  border: 1px solid #cfe2df;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #486561;
}

.wp-ostrzezenie-el {
  width: 40px;
  max-width: 40px;
  height: auto;
  aspect-ratio: 116 / 114;
  object-fit: contain;
  flex-shrink: 0;
}

.wp-ostrzezenie p {
  margin: 0;
}

.wp-sasiednie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}

.wp-sasiednie:has(> :only-child),
.wp-sasiednie.wp-sasiednie-jeden {
  grid-template-columns: 1fr !important;
}

.wp-sasiedni {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.25rem;
  border-radius: 0.95rem;
  background: #f3f8f7;
  border: 1px solid #cfe2df;
  text-decoration: none;
  color: #122b28;
}

.wp-nastepny {
  text-align: right;
  align-items: flex-end;
}

.wp-sasiedni-kierunek {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--kd, #0d8374);
}

.wp-sasiedni-kierunek svg {
  width: 0.95rem;
  height: 0.95rem;
}

.wp-powiazane {
  margin-top: 2rem;
}

.wp-powiazane-siatka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.wp-powiazane-siatka:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dz-inne-siatka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.dz-inne-siatka:has(> :nth-child(5):last-child) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dz-fala-przejscie {
  display: flex;
  justify-content: center;
  margin: 2.25rem 0 1.25rem;
}

.dz-fala-el {
  width: 100%;
  max-width: 760px;
  height: auto;
  aspect-ratio: 938 / 127;
  object-fit: contain;
}

.blad-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1rem;
}

.blad-akcje .bok-cta {
  width: auto;
  margin-top: 0;
  padding: 0.7rem 1.35rem;
}

.bok-cta-drugi {
  background: #0d8374;
}

@media (max-width: 980px) {
  .dz-hero,
  .dz-uklad,
  .wp-uklad,
  .dz-siatka-trzy,
  .dz-siatka-dwa,
  .wp-powiazane-siatka,
  .dz-inne-siatka,
  .dz-inne-siatka:has(> :nth-child(5):last-child) {
    grid-template-columns: 1fr !important;
  }

  .dz-kolumna-glowna,
  .wp-kolumna-glowna,
  .bok-kolumna,
  .bok-przyklejony {
    position: static;
  }

  .dz-kadr {
    justify-self: start;
    max-width: 100%;
  }
}

:root {--akcent: #09695d;--kd-cukrzyca: #09695d;--kd-dieta: #1e6b46;--kd-produkty-a-cukrzyca: #9e4700;--kd-cukier: #0f6172;--kd-porady: #3c6430;--kd-glowne: #325954;}
.dzial-cukrzyca,
.kd-cukrzyca {--kd: #09695d !important;}
.dzial-dieta,
.kd-dieta {--kd: #1e6b46 !important;}
.dzial-produkty-a-cukrzyca,
.kd-produkty-a-cukrzyca {--kd: #9e4700 !important;}
.dzial-cukier,
.kd-cukier {--kd: #0f6172 !important;}
.dzial-porady,
.kd-porady {--kd: #3c6430 !important;}
.dzial-glowne,
.kd-glowne {--kd: #325954 !important;}
.dz-naglowek {display: flex;flex-direction: column;align-items: flex-start;gap: 0.65rem;padding: 0;margin: 0;background: none;border-radius: 0;box-shadow: none;}
.dz-hero {background: linear-gradient(135deg, #08483f 0%, var(--kd, #09695d) 72%, #0a574d 100%);color: #ffffff;}
.dz-kicker {color: #085c51;}
.wp-nadtytul-sponsor,
.karta-plakietka-sponsor,
.wiersz-sponsor {background-color: #fff1e3;border-color: #9e4700;color: #8a3800;}
.bok-cta {background-color: #b85000;color: #ffffff;min-height: 48px;}
.bok-cta:hover {background-color: #963f00;color: #ffffff;}
.bok-cta-drugi,
.przycisk-morski-pelny,
.naw-link.jest-aktywny {background-color: #09695d;color: #ffffff;}
.stopka-lista-dwukolumnowa {display: flex;flex-direction: column;gap: 0.5rem;}
.nawigacja-glowna {gap: 0.5rem;}
.stopka-lista {gap: 0.5rem;}
.dz-pasek-filtrow,
.dz-pigulki,
.bok-lista,
.bok-produkty-siatka {gap: 0.6rem;}
.dz-pigulka,
.bok-link,
.ksiega-pozycja-link {min-height: 44px;}
.bok-produkt-element {min-height: 48px;}
.dz-paginacja,
.dz-strony-numery {display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 0.5rem;}
.dz-strona-link,
.dz-strona-przerwa {display: inline-flex;align-items: center;justify-content: center;gap: 0.4rem;min-width: 44px;min-height: 44px;padding: 0.45rem 0.85rem;border-radius: 999px;background-color: #ffffff;border: 1px solid #cfe2df;color: #122b28;font-weight: 700;font-size: 0.9rem;text-decoration: none;}
.dz-strona-link:hover {background-color: #dff0ed;border-color: #09695d;color: #122b28;}
.dz-strona-link.jest-biezaca {background-color: var(--kd, #09695d);border-color: var(--kd, #09695d);color: #ffffff;}
.wiersz-nadtytul {margin-bottom: 0.5rem;gap: 0.5rem;}
.wiersz-dzial {display: inline-flex;align-items: center;min-height: 44px;padding: 0.35rem 0.8rem;border-radius: 999px;background-color: #dff0ed;color: #085c51;font-size: 0.8rem;}
.wiersz-dzial:hover {background-color: #09695d;color: #ffffff;text-decoration: none;}
.wiersz-tytul a,
.karta-tytul a {display: inline-flex;align-items: center;min-height: 44px;}
.wp-spis {padding: 1.15rem 1.25rem;}
.wp-spis-lista {display: flex;flex-direction: column;gap: 0.5rem;}
.wp-spis-link {display: flex;width: 100%;align-items: flex-start;gap: 0.55rem;min-height: 44px;padding-block: 0.25rem;color: #122b28;text-decoration: none;font-size: 0.95rem;font-weight: 600;}
.wp-spis-nr {flex: 0 0 auto;white-space: nowrap;color: var(--kd, #09695d);font-weight: 800;}
.wp-spis-link > span:last-child {flex: 1 1 auto;min-width: 0;overflow-wrap: break-word;word-break: normal;}
.wp-tresc th,
.wp-tresc td,
.tresc-artykulu th,
.tresc-artykulu td {min-width: 6.25rem;word-break: normal;}
.wp-powiazane-siatka:has(> :only-child) {grid-template-columns: 1fr;}
.dz-filary-cztery,
.talerz-fiszki-siatka,
.slodziki-katalog-siatka,
.ksiega-atlas-siatka {display: grid;grid-template-columns: 1fr;gap: 1rem;}
.dz-filar-karta,
.talerz-fiszka,
.slodzik-rekord,
.dziennik-wpis,
.ksiega-modul {background-color: #ffffff;border: 1px solid #cfe2df;border-radius: 1rem;padding: 1.15rem 1.25rem;box-shadow: 0 4px 14px rgba(18, 43, 40, 0.05);min-width: 0;}
.dz-filar-karta {display: flex;align-items: flex-start;gap: 0.9rem;}
.dz-filar-ikona {width: 48px;height: 48px;border-radius: 12px;background-color: #f3f8f7;display: inline-flex;align-items: center;justify-content: center;padding: 0.4rem;flex-shrink: 0;}
.dz-filar-el {width: 34px;height: 34px;object-fit: contain;}
.dz-filar-tekst strong {display: block;font-family: var(--f-n);font-size: 1.02rem;color: #122b28;margin-bottom: 0.25rem;}
.dz-filar-tekst p {font-size: 0.9rem;color: #486561;margin: 0;}
.talerz-fiszka {display: flex;align-items: flex-start;gap: 0.95rem;border-left: 4px solid var(--kd, #1e6b46);}
.talerz-fiszka-ikona {width: 48px;height: 48px;border-radius: 12px;background-color: #f3f8f7;display: inline-flex;align-items: center;justify-content: center;padding: 0.4rem;flex-shrink: 0;}
.talerz-fiszka-el {width: 34px;height: 34px;object-fit: contain;}
.talerz-fiszka-tresc {min-width: 0;flex: 1;}
.talerz-fiszka-gora,
.slodzik-rekord-naglowek,
.slodzik-rekord-stopka,
.dziennik-wpis-meta {display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 0.5rem;margin-bottom: 0.4rem;font-size: 0.82rem;color: #486561;}
.talerz-fiszka-dzial,
.slodzik-rekord-dzial,
.dziennik-wpis-dzial {display: inline-flex;align-items: center;min-height: 44px;padding: 0.25rem 0.7rem;border-radius: 999px;background-color: #dff0ed;color: #085c51;font-weight: 700;text-decoration: none;}
.talerz-fiszka-tytul,
.slodzik-rekord-tytul,
.dziennik-wpis-tytul {font-size: 1.04rem;margin-bottom: 0.4rem;}
.talerz-fiszka-tytul a,
.slodzik-rekord-tytul a,
.dziennik-wpis-tytul a {display: inline-flex;align-items: center;min-height: 44px;color: #122b28;text-decoration: none;}
.talerz-fiszka-tytul a:hover,
.slodzik-rekord-tytul a:hover,
.dziennik-wpis-tytul a:hover {color: #085c51;text-decoration: underline;}
.talerz-fiszka-opis,
.slodzik-rekord-opis,
.dziennik-wpis-opis {font-size: 0.9rem;color: #486561;margin-bottom: 0.5rem;}
.slodzik-rekord {display: flex;flex-direction: column;border-top: 4px solid #0f6172;}
.slodzik-rekord-nr {display: inline-flex;align-items: center;justify-content: center;padding: 0.2rem 0.55rem;border-radius: 6px;background-color: #dff0ed;color: #085c51;font-weight: 800;}
.slodzik-rekord-etykieta {font-weight: 700;color: #085c51;}
.slodzik-rekord-stopka {margin-top: auto;padding-top: 0.65rem;border-top: 1px solid #cfe2df;margin-bottom: 0;}
.slodzik-rekord-link {display: inline-flex;align-items: center;gap: 0.35rem;min-height: 44px;padding: 0.3rem 0.65rem;border-radius: 8px;color: #085c51;font-weight: 700;text-decoration: none;}
.dziennik-wpisy-lista {display: flex;flex-direction: column;gap: 0.9rem;}
.dziennik-wpis {display: flex;align-items: flex-start;gap: 0.95rem;border-left: 4px solid #09695d;}
.dziennik-wpis-lewa {display: flex;flex-direction: column;align-items: center;gap: 0.35rem;flex-shrink: 0;}
.dziennik-wpis-krok {display: inline-flex;align-items: center;justify-content: center;width: 34px;height: 34px;border-radius: 50%;background-color: #dff0ed;color: #085c51;font-weight: 800;font-size: 0.85rem;}
.dziennik-wpis-ikona {color: #09695d;}
.dziennik-wpis-srodek {min-width: 0;flex: 1;}
.ksiega-naglowek-modulu {display: flex;align-items: center;gap: 0.85rem;padding-bottom: 0.85rem;margin-bottom: 0.75rem;border-bottom: 2px solid #dff0ed;}
.ksiega-naglowek-tekst h3 {font-size: 1.1rem;margin-bottom: 0.2rem;color: #122b28;}
.ksiega-naglowek-tekst small {display: block;font-size: 0.85rem;color: #486561;line-height: 1.4;}
.ksiega-lista-wpisow {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 0.5rem;}
.ksiega-pozycja-link {display: flex;align-items: center;justify-content: space-between;gap: 0.75rem;padding: 0.55rem 0.75rem;border-radius: 0.75rem;background-color: #f3f8f7;color: #122b28;text-decoration: none;}
.ksiega-pozycja-link:hover {background-color: #dff0ed;color: #085c51;}
.ksiega-pozycja-tytul {font-size: 0.92rem;font-weight: 600;}
.ksiega-pozycja-czas {font-size: 0.8rem;font-weight: 700;color: #486561;white-space: nowrap;flex-shrink: 0;}
@media (min-width: 760px) {.dz-filary-cztery,
.talerz-fiszki-siatka,
.slodziki-katalog-siatka {grid-template-columns: repeat(2, minmax(0, 1fr));}
.talerz-fiszki-siatka:has(> :nth-child(odd):last-child),
.slodziki-katalog-siatka:has(> :nth-child(odd):last-child) {grid-template-columns: 1fr;}
}
@media (min-width: 900px) {.ksiega-atlas-siatka {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (min-width: 981px) {.dz-uklad,
.wp-uklad {align-items: stretch;}
.dz-kolumna-glowna,
.wp-kolumna-glowna {position: static;align-self: stretch;}
.bok-kolumna {position: static;align-self: stretch;height: auto;}
.bok-przyklejony {position: sticky;top: 5.5rem;align-self: start;}
}
@media (min-width: 1101px) {.uklad-z-panelem-bocznym {align-items: stretch;}
.kolumna-boczna-przyklejona {position: static;align-self: stretch;height: auto;}
.kolumna-boczna-wnetrze {position: sticky;top: 5.5rem;display: flex;flex-direction: column;gap: 1.25rem;}
}

/* Naprawa WASKIE na 390 px: pełna szerokość pozycji spisu treści i mniejsze wcięcia boczne */
.wp-spis-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.wp-spis-lista > li {
  width: 100%;
  min-width: 0;
}

.wp-spis-link {
  display: block !important;
  width: 100%;
  min-height: 44px;
  padding: 0.45rem 0.6rem;
  border-radius: 0.6rem;
  background-color: rgba(255, 255, 255, 0.72);
  color: #122b28;
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: normal;
}

.wp-spis-nr {
  display: inline;
  margin-right: 0.35rem;
  color: var(--kd, #09695d);
  font-weight: 800;
}

@media (max-width: 680px) {
  .wp-artykul {
    padding: 1.1rem 0.95rem;
    border-radius: 1rem;
  }
  .wp-spis,
  .wp-spis-tresci {
    padding: 0.9rem 0.85rem;
  }
  .wp-spis-link {
    font-size: 0.88rem;
    padding: 0.4rem 0.5rem;
  }
  .wp-tresc,
  .tresc-artykulu {
    padding: 1rem 0.9rem;
  }
}

/* Optymalizacja Hero LCP i wymiarów grafik */
.hero-scena {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, #d5ece8 100%);
  min-height: 300px;
}

.hero-zestaw-glowny {
  width: 84%;
  max-width: 420px;
  margin: 0 auto;
}

.hero-zestaw-el,
.hero-zestaw-glowny img {
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 809;
  object-fit: contain;
}

/* Naprawa BOK: kolumna boczna pełnej wysokości obok treści na szerokim ekranie */
.bok-tor {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

@media (min-width: 981px) {
  .dz-uklad,
  .wp-uklad {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 2rem;
    align-items: stretch !important;
  }

  .dz-kolumna-glowna,
  .wp-kolumna-glowna {
    position: static !important;
    align-self: stretch !important;
    height: auto !important;
  }

  .bok-kolumna {
    position: static !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }

  .bok-tor {
    flex: 1 1 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .bok-przyklejony-koniec {
    position: sticky;
    top: 5.5rem;
    margin-top: auto;
  }
}

@media (min-width: 1101px) {
  .uklad-z-panelem-bocznym {
    align-items: stretch !important;
  }

  .kolumna-boczna-przyklejona {
    position: static !important;
    align-self: stretch !important;
    height: auto !important;
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }

  .kolumna-boczna-wnetrze {
    position: sticky;
    top: 5.5rem;
    margin-top: auto;
  }
}

.hero-scena {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  min-height: 320px;
  border-radius: calc(var(--r) + 6px);
  overflow: hidden;
  border: 3px solid #ffffff;
  background-color: #cde5e1;
}

.hero-tlo-kadr {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-obraz,
.hero-tlo-kadr img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  opacity: 0.34;
}

.hero-zestaw-glowny {
  position: relative;
  z-index: 3;
  width: 82%;
  max-width: 380px;
  margin: 0 auto;
}

.bok-przyklejony-koniec {
  margin-top: 0 !important;
}

@media (min-width: 1101px) {
  .uklad-z-panelem-bocznym {
    align-items: start !important;
  }

  .kolumna-boczna-przyklejona {
    position: sticky !important;
    top: 5.5rem !important;
    align-self: start !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .kolumna-boczna-wnetrze {
    position: static !important;
    margin-top: 0 !important;
  }
}

/* Kolumna boczna na pełną wysokość treści, przyklejony ostatni blok (12.11) */
@media (min-width: 981px) {
  .dz-uklad, .wp-uklad { align-items: stretch !important; }
  .bok-kolumna { position: static !important; align-self: stretch !important; height: auto !important; display: flex; flex-direction: column; }
  .bok-tor { flex: 1 1 auto !important; display: flex; flex-direction: column; gap: 1.25rem; }
  .bok-przyklejony-koniec { position: sticky !important; top: 5.5rem !important; }
}