@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/fraunces/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.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: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/fraunces/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.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; }
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: #f6efe2;
  --pow: #fffdf9;
  --tekst: #261c18;
  --t2: #5c4b42;
  --linia: #e0d2bc;
  --akcent: #c82562;
  --akcent-tekst: #ffffff;
  --dodatek: #d48b28;
  --r: 10px;
  --f-n: "Fraunces", Georgia, "Times New Roman", serif;
  --f-t: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --powierzchnia: #fffdf9;
  --tekst-drugorzedny: #5c4b42;
  --akcent-jasny: #fce8f0;
  --akcent-cien: #941645;
  --stopka: #231915;
  --stopka-tekst: #f4ebd9;

  --zolta-kartka: #f8e38c;
  --zolta-kartka-ramka: #dfc153;
  --deska-jasna: #d6ab74;
  --deska-ciemna: #9b6a37;
  --szary-din: #ece7df;
  --cien-kartki: 0 6px 18px rgba(38, 28, 24, 0.09), 0 1px 3px rgba(38, 28, 24, 0.08);
  --cien-mocny: 0 12px 28px rgba(38, 28, 24, 0.15);

  --k-elektryka: #c82562;
  --k-elektronika: #1d76a8;
  --k-agd: #7f4a93;
  --k-motoryzacja: #c96a24;
  --k-ogrod: #557d36;
  --k-budownictwo: #8f5329;
  --kd: var(--akcent);
}

.dzial-elektryka { --kd: #c82562; }
.dzial-elektronika { --kd: #1d76a8; }
.dzial-agd { --kd: #7f4a93; }
.dzial-motoryzacja { --kd: #c96a24; }
.dzial-ogrod { --kd: #557d36; }
.dzial-budownictwo { --kd: #8f5329; }

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background-color: var(--tlo);
  background-image:
    radial-gradient(rgba(143, 83, 41, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, #f3e8d6 0%, #f6efe2 360px, #f6efe2 100%);
  background-size: 24px 24px, 100% 100%;
  color: var(--tekst);
}

main {
  flex: 1 0 auto;
  display: block;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

img {
  height: auto;
  object-fit: cover;
}

svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

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

p, li, td, th, blockquote, a, span, strong {
  overflow-wrap: break-word;
  word-break: break-word;
}

a {
  color: inherit;
  text-decoration: none;
  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:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
}

.tylko-czytnik,
.skocz-do-tresci:not(:focus):not(:focus-visible) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skocz-do-tresci:focus,
.skocz-do-tresci:focus-visible {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  padding: 12px 20px;
  min-height: 44px;
  background: var(--akcent);
  color: var(--akcent-tekst);
  font-weight: 700;
  border-radius: var(--r);
  box-shadow: var(--cien-mocny);
}

.szerokosc {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ==================== NAGŁÓWEK I MENU ==================== */

.naglowek-warsztat {
  position: relative;
  z-index: 40;
  border-bottom: 3px solid var(--akcent-cien);
}

.naglowek-blat {
  background-color: #d9b382;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(92, 53, 24, 0.08) 0px,
      rgba(92, 53, 24, 0.08) 2px,
      transparent 2px,
      transparent 96px
    ),
    linear-gradient(180deg, #cfa36e 0%, #e4c499 52%, #cfa26c 100%);
  padding-block: 16px 20px;
  border-bottom: 2px solid #8c5828;
}

.naglowek-blat-uklad {
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
}

.logo-kartka {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px 14px;
  background: var(--pow);
  border: 1px solid var(--linia);
  border-radius: 6px;
  box-shadow: var(--cien-mocny);
  transform: rotate(-1.5deg);
  min-height: 76px;
}

.logo-kartka:hover {
  transform: rotate(0deg) translateY(-1px);
}

.logo-pinezka {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  color: var(--akcent);
}

.logo-pinezka svg {
  width: 26px;
  height: 26px;
}

.logo-znak {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--akcent-jasny);
  color: var(--akcent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logo-znak svg {
  width: 28px;
  height: 28px;
}

.logo-napisy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.logo-haslo {
  font-family: var(--f-n);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.12;
  color: var(--tekst);
}

.logo-domena {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--akcent);
  letter-spacing: 0.02em;
  margin-top: 2px;
}

.naglowek-notatka {
  position: relative;
  background: #fdf6e4;
  border: 1px dashed #c7b08b;
  border-radius: 8px;
  padding: 12px 18px;
  box-shadow: var(--cien-kartki);
  min-width: 0;
}

.naglowek-tasma {
  position: absolute;
  top: -8px;
  left: 28px;
  width: 68px;
  height: 16px;
  background: rgba(248, 227, 140, 0.85);
  border: 1px solid rgba(186, 152, 60, 0.45);
  transform: rotate(-2deg);
}

.naglowek-motto {
  margin: 0 0 8px;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--tekst);
}

.naglowek-odznaki {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.odznaka-warsztat {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  border-radius: 999px;
  background: var(--pow);
  border: 1px solid var(--linia);
  color: var(--t2);
}

.naglowek-narzedzia {
  display: flex;
  align-items: center;
  gap: 10px;
}

.naglowek-okulary {
  width: 112px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.naglowek-miarka {
  width: 72px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.pasek-menu-otoczenie {
  background: linear-gradient(180deg, #d12c6a 0%, var(--akcent) 45%, #ad1b50 100%);
  box-shadow: 0 4px 12px rgba(38, 28, 24, 0.18);
}

.pasek-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 52px;
  padding-block: 4px;
}

.menu-dom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
  border-radius: 8px;
  color: var(--akcent-tekst);
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.menu-dom svg {
  width: 22px;
  height: 22px;
}

.menu-dom:hover,
.menu-dom.jest-aktywny {
  background: var(--pow);
  color: var(--akcent);
}

.menu-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
}

.menu-pozycja {
  margin: 0;
  min-width: 0;
}

.menu-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 8px;
  color: var(--akcent-tekst);
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: 0.01em;
}

.menu-link:hover {
  background: rgba(255, 255, 255, 0.18);
}

.menu-link.jest-aktywny {
  background: var(--pow);
  color: var(--tekst);
  box-shadow: 0 2px 6px rgba(38, 28, 24, 0.2);
}

.menu-ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.menu-ikona svg {
  width: 20px;
  height: 20px;
}

/* ==================== CZOŁÓWKA / HERO ==================== */

.sekcja-czolowka {
  padding-top: 24px;
  padding-bottom: 20px;
}

.czolowka-blat {
  position: relative;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  border: 2px solid #b58958;
  border-bottom: none;
  background-color: #c89a65;
  min-height: 420px;
  box-shadow: var(--cien-mocny);
}

.czolowka-tlo-warstwa {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.czolowka-tlo-obraz {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  opacity: 0.42;
}

.czolowka-uklad {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, 410px) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
  padding: 28px;
}

.czolowka-kartka-dzialow {
  position: relative;
  background: var(--zolta-kartka);
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 29px,
    rgba(143, 83, 41, 0.15) 29px,
    rgba(143, 83, 41, 0.15) 30px
  );
  border: 1px solid var(--zolta-kartka-ramka);
  border-radius: 6px;
  padding: 24px 20px 18px;
  box-shadow: var(--cien-mocny);
  transform: rotate(-1.2deg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.kartka-pinezka {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  color: var(--akcent);
}

.kartka-pinezka svg {
  width: 28px;
  height: 28px;
}

.kartka-naglowek {
  margin: 0 0 12px;
  font-family: var(--f-n);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--tekst);
  border-bottom: 2px solid rgba(38, 28, 24, 0.2);
  padding-bottom: 6px;
}

.kartka-lista-odhaczana {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kartka-odhacz-link {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255, 253, 249, 0.62);
  border: 1px solid rgba(38, 28, 24, 0.1);
}

.kartka-odhacz-link:hover {
  background: var(--pow);
  border-color: var(--kd, var(--akcent));
  transform: translateX(3px);
}

.kartka-ptaszek {
  grid-row: span 2;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--kd, var(--akcent));
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kartka-ptaszek svg {
  width: 15px;
  height: 15px;
}

.kartka-dzial-nazwa {
  font-family: var(--f-n);
  font-weight: 700;
  font-size: 1rem;
  color: var(--tekst);
  line-height: 1.2;
}

.kartka-dzial-zakres {
  font-size: 0.8rem;
  color: var(--t2);
  line-height: 1.25;
}

.kartka-dol-narzedzia {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.czolowka-poziomica {
  width: 170px;
  aspect-ratio: 4 / 1;
  object-fit: contain;
}

.czolowka-scena-prawa {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
}

.czolowka-kadr-postaci {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  border-radius: 10px;
  overflow: hidden;
  border: 4px solid var(--pow);
  box-shadow: var(--cien-mocny);
  background: #dec3a0;
}

.czolowka-postac-foto {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.czolowka-naklejka-cytat {
  position: absolute;
  right: 16px;
  bottom: 16px;
  max-width: 340px;
  background: var(--pow);
  border: 2px solid var(--linia);
  border-left: 6px solid var(--akcent);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: var(--cien-mocny);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.naklejka-spinacz {
  position: absolute;
  top: -12px;
  right: 16px;
  width: 24px;
  height: 24px;
  color: var(--t2);
}

.naklejka-spinacz svg {
  width: 24px;
  height: 24px;
}

.czolowka-naklejka-cytat strong {
  font-family: var(--f-n);
  font-size: 1rem;
  color: var(--tekst);
}

.czolowka-naklejka-cytat span {
  font-size: 0.85rem;
  color: var(--t2);
  line-height: 1.4;
}

/* ==================== MANIFEST PAPIER ==================== */

.manifest-papier {
  position: relative;
  background-color: var(--pow);
  background-image:
    linear-gradient(rgba(224, 210, 188, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 210, 188, 0.35) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 2px solid var(--linia);
  border-top: 4px solid var(--akcent);
  border-radius: 0 0 14px 14px;
  padding: 32px 32px 26px;
  box-shadow: var(--cien-kartki);
}

.manifest-uklad {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) auto auto;
  gap: 24px;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 2px dashed var(--linia);
}

.manifest-tresc {
  position: relative;
  min-width: 0;
}

.manifest-pociagniecie {
  display: block;
  margin-bottom: 6px;
}

.manifest-farba {
  width: 190px;
  height: 24px;
  aspect-ratio: 8 / 1;
  object-fit: contain;
}

.manifest-tytul {
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  color: var(--akcent);
  margin-bottom: 12px;
}

.manifest-opis {
  font-size: 1.05rem;
  color: var(--tekst);
  margin: 0 0 20px;
  max-width: 68ch;
}

.manifest-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.przycisk-malinowy,
.przycisk-szkicowy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
}

.przycisk-malinowy {
  background: var(--akcent);
  color: var(--akcent-tekst);
  box-shadow: 0 4px 12px rgba(200, 37, 98, 0.3);
}

.przycisk-malinowy:hover {
  background: var(--akcent-cien);
  transform: translateY(-1px);
}

.przycisk-szkicowy {
  background: var(--pow);
  color: var(--tekst);
  border: 2px solid var(--tekst);
}

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

.manifest-karteczka-zolta {
  position: relative;
  width: 176px;
  min-height: 152px;
  padding: 20px 16px;
  background: var(--zolta-kartka);
  border: 1px solid var(--zolta-kartka-ramka);
  border-radius: 6px;
  box-shadow: var(--cien-mocny);
  transform: rotate(3deg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.manifest-zolta-tlo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
  pointer-events: none;
}

.manifest-zolta-napis {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.manifest-zolta-napis strong {
  font-family: var(--f-n);
  font-size: 1.35rem;
  color: var(--tekst);
}

.manifest-zolta-napis span {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--akcent-cien);
}

.manifest-narzedzia-obok {
  display: flex;
  align-items: center;
  justify-content: center;
}

.manifest-kask-narzedzia {
  width: 220px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.manifest-pas-trzech {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-top: 22px;
}

.manifest-filar {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(246, 239, 226, 0.55);
  border: 1px solid var(--linia);
  border-radius: 8px;
  min-width: 0;
}

.manifest-filar-ikona {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filar-szkic {
  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.manifest-filar-tekst {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.manifest-filar-tekst strong {
  font-family: var(--f-n);
  font-size: 1.02rem;
  color: var(--tekst);
}

.manifest-filar-tekst span {
  font-size: 0.87rem;
  color: var(--t2);
  line-height: 1.45;
}

/* ==================== WSTĄŻKI NAGŁÓWKÓW SEKCJI ==================== */

.sekcja-najnowsze,
.sekcja-polaroidy,
.sekcja-rozdzielnica,
.sekcja-hydraulika,
.sekcja-diagnoza,
.sekcja-skrzynka {
  padding-block: 28px;
}

.naglowek-sekcji-wstazka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--linia);
}

.wstazka-tytul-blok {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.wstazka-tytul {
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  padding: 10px 28px 10px 20px;
  background: var(--akcent);
  color: var(--akcent-tekst);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  border-radius: 6px 20px 6px 6px;
  box-shadow: 0 4px 10px rgba(200, 37, 98, 0.25);
}

.wstazka-podtytul {
  margin: 0;
  font-size: 0.96rem;
  color: var(--t2);
}

.wstazka-link-wszystkie {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  background: var(--pow);
  border: 2px solid var(--linia);
  border-radius: 999px;
  font-weight: 700;
  color: var(--akcent);
}

.wstazka-link-wszystkie:hover {
  border-color: var(--akcent);
  background: var(--akcent-jasny);
}

.wstazka-ozdoba-deska,
.wstazka-ozdoba-narzedzia {
  display: flex;
  align-items: center;
  gap: 12px;
}

.polaroidy-deska {
  width: 160px;
  aspect-ratio: 3 / 1;
  object-fit: contain;
}

.diagnoza-rekawice {
  width: 84px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.diagnoza-nozyk {
  width: 64px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* ==================== SIATKI I KARTY WPISÓW ==================== */

.siatka-kart-6,
.siatka-polaroidow-6,
.siatka-diagnozy-6,
.dz-siatka-kart,
.dz-siatka-6,
.wp-siatka-6 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.karta-wpisu {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: var(--pow);
  border: 1px solid var(--linia);
  border-top: 4px solid var(--kd, var(--akcent));
  border-radius: var(--r);
  box-shadow: var(--cien-kartki);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

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

.karta-notatnik {
  background-image:
    linear-gradient(rgba(224, 210, 188, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 210, 188, 0.32) 1px, transparent 1px);
  background-size: 20px 20px;
}

.karta-tasma {
  position: absolute;
  top: 6px;
  right: 16px;
  width: 52px;
  height: 14px;
  background: rgba(248, 227, 140, 0.82);
  border: 1px solid rgba(186, 152, 60, 0.4);
  transform: rotate(3deg);
  z-index: 2;
  pointer-events: none;
}

.karta-kadr {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #eadbc6;
  border-bottom: 1px solid var(--linia);
}

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

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

.karta-pasek-gorny {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px 0;
}

.karta-ze-zdjeciem .karta-pasek-gorny {
  margin-top: -22px;
  position: relative;
  z-index: 2;
}

.karta-dzial-etykieta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 6px;
  background: var(--kd, var(--akcent));
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(38, 28, 24, 0.2);
}

.karta-dzial-etykieta:hover {
  filter: brightness(0.92);
}

.karta-dzial-ikona {
  width: 16px;
  height: 16px;
  display: inline-flex;
}

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

.karta-sponsor {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--zolta-kartka);
  color: var(--tekst);
  font-size: 0.74rem;
  font-weight: 700;
}

.karta-stempel {
  width: 26px;
  height: 26px;
  color: var(--kd, var(--akcent));
  opacity: 0.75;
  background: var(--pow);
  border-radius: 50%;
  padding: 3px;
}

.karta-stempel svg {
  width: 20px;
  height: 20px;
}

.karta-tresc {
  padding: 14px 18px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.karta-tytul {
  margin: 0;
  font-size: 1.14rem;
  line-height: 1.3;
}

.karta-tytul a:hover {
  color: var(--akcent);
}

.karta-lead {
  margin: 0;
  font-size: 0.91rem;
  color: var(--t2);
  line-height: 1.5;
}

.karta-stopka {
  margin-top: auto;
  padding: 10px 18px 14px;
  border-top: 1px dashed var(--linia);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

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

.karta-data::before {
  content: "📅 ";
}

.karta-czas::before {
  content: "⏱ ";
}

.karta-przycisk-strzalka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
  background: var(--akcent);
  color: var(--akcent-tekst);
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.karta-przycisk-strzalka:hover {
  background: var(--akcent-cien);
}

/* ==================== POLAROIDY DZIAŁÓW ==================== */

.sekcja-polaroidy {
  background: linear-gradient(180deg, rgba(214, 171, 116, 0.22) 0%, rgba(246, 239, 226, 0.5) 100%);
  border-block: 1px solid var(--linia);
}

.polaroid-karta {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: var(--pow);
  border: 1px solid #d6c5ab;
  border-radius: 8px;
  padding: 16px 16px 18px;
  box-shadow: var(--cien-mocny);
}

.polaroid-pinezka {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  color: var(--kd, var(--akcent));
  z-index: 3;
}

.polaroid-pinezka svg {
  width: 26px;
  height: 26px;
}

.polaroid-tasma {
  position: absolute;
  top: 6px;
  right: 14px;
  width: 48px;
  height: 14px;
  background: rgba(248, 227, 140, 0.75);
  transform: rotate(6deg);
}

.polaroid-ramka {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.polaroid-kadr {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: #e6d6be;
  border: 1px solid var(--linia);
}

.polaroid-foto {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.polaroid-choragiewka {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--kd, var(--akcent));
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(38, 28, 24, 0.25);
}

.polaroid-choragiewka svg {
  width: 22px;
  height: 22px;
}

.polaroid-podpis {
  text-align: center;
  padding-top: 4px;
}

.polaroid-nazwa {
  margin: 0 0 4px;
  font-size: 1.25rem;
  color: var(--tekst);
}

.polaroid-ramka:hover .polaroid-nazwa {
  color: var(--kd, var(--akcent));
}

.polaroid-haslo {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--kd, var(--akcent));
}

.polaroid-opis {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--linia);
  font-size: 0.87rem;
  color: var(--t2);
  line-height: 1.48;
  flex: 1 1 auto;
}

/* ==================== ROZDZIELNICA DOMOWA (SZYNA DIN) ==================== */

.rozdzielnica-obudowa {
  background: #f2ede4;
  border: 2px solid #c5b69e;
  border-radius: 14px;
  padding: 28px;
  box-shadow: var(--cien-kartki);
}

.rozdzielnica-naglowek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-bottom: 20px;
}

.etykieta-techniczna {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: var(--tekst);
  color: var(--pow);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rozdzielnica-tytul {
  margin: 0 0 10px;
  font-size: clamp(1.4rem, 2.3vw, 1.9rem);
}

.rozdzielnica-opis {
  margin: 0;
  color: var(--t2);
  max-width: 72ch;
}

.rozdzielnica-osprzet-grafika {
  display: flex;
  align-items: center;
  gap: 10px;
}

.osprzet-gniazdko,
.osprzet-przewod,
.osprzet-kolki {
  width: 88px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.rozdzielnica-schemat-pasek {
  margin-block: 16px;
  padding: 10px 14px;
  background: var(--pow);
  border: 1px solid var(--linia);
  border-radius: 8px;
  overflow: hidden;
}

.rozdzielnica-schemat-pasek svg {
  width: 100%;
  height: 44px;
}

.szyna-din-blok {
  margin-top: 22px;
  background: #e5ddd0;
  border: 1px solid #c2b299;
  border-radius: 10px;
  padding: 18px;
}

.szyna-din-naglowek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #b5a388;
}

.szyna-oznaczenie {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--tekst);
  letter-spacing: 0.03em;
}

.szyna-legenda {
  font-size: 0.82rem;
  color: var(--t2);
  font-weight: 500;
}

.siatka-modulow-4,
.siatka-8,
.dz-siatka-8 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.modul-din {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: var(--pow);
  border: 2px solid #cfc2ae;
  border-top: 5px solid var(--kd, var(--akcent));
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 3px 8px rgba(38, 28, 24, 0.08);
}

.modul-glowica {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--linia);
}

.modul-kod {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--t2);
  background: #f3ece0;
  padding: 2px 8px;
  border-radius: 4px;
}

.modul-dzwignia {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--kd, var(--akcent));
  color: #ffffff;
}

.modul-tytul {
  margin: 0 0 8px;
  font-size: 1.02rem;
  line-height: 1.3;
}

.modul-tytul a:hover {
  color: var(--akcent);
}

.modul-opis {
  margin: 0 0 12px;
  font-size: 0.86rem;
  color: var(--t2);
  line-height: 1.45;
  flex: 1 1 auto;
}

.modul-stopka {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--linia);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--t2);
}

.modul-stopka a {
  font-weight: 700;
  color: var(--akcent);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

/* ==================== HYDRAULIKA / NOTES W KRATKĘ ==================== */

.notes-kratka-arkusz {
  background-color: var(--pow);
  background-image:
    linear-gradient(rgba(29, 118, 168, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 118, 168, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 2px solid var(--linia);
  border-left: 8px solid var(--k-elektronika);
  border-radius: 12px;
  padding: 28px;
  box-shadow: var(--cien-kartki);
}

.notes-naglowek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}

.notes-tytul {
  margin: 0 0 10px;
  font-size: clamp(1.4rem, 2.3vw, 1.9rem);
}

.notes-opis {
  margin: 0;
  color: var(--t2);
  max-width: 74ch;
}

.notes-naglowek-prawy {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notes-kartka-ikona,
.notes-domek-ikona {
  width: 110px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.notes-schemat-przeplywu {
  margin-block: 18px;
  padding: 12px;
  background: rgba(255, 253, 249, 0.9);
  border: 1px dashed var(--linia);
  border-radius: 8px;
}

.notes-schemat-przeplywu svg {
  width: 100%;
  height: 48px;
}

.siatka-obiegow-3,
.siatka-9,
.siatka-3,
.dz-siatka-9,
.dz-siatka-3,
.wp-siatka-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.kolumna-obiegu {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.obieg-baner {
  background: var(--kd, var(--akcent));
  color: #ffffff;
  padding: 16px 18px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(38, 28, 24, 0.14);
}

.obieg-krok {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: rgba(0, 0, 0, 0.24);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.obieg-nazwa {
  margin: 0 0 6px;
  font-size: 1.12rem;
  color: #ffffff;
}

.obieg-podpis {
  margin: 0;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.4;
}

.obieg-wezly {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}

.wezel-hydrauliczny {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--pow);
  border: 1px solid var(--linia);
  border-left: 4px solid var(--kd, var(--akcent));
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 2px 6px rgba(38, 28, 24, 0.06);
}

.wezel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.76rem;
}

.wezel-parametr {
  font-weight: 700;
  color: var(--kd, var(--akcent));
}

.wezel-czas {
  color: var(--t2);
}

.wezel-tytul {
  margin: 0 0 6px;
  font-size: 1rem;
  line-height: 1.3;
}

.wezel-tytul a:hover {
  color: var(--akcent);
}

.wezel-lead {
  margin: 0;
  font-size: 0.86rem;
  color: var(--t2);
  line-height: 1.45;
}

/* ==================== STÓŁ DIAGNOSTYCZNY ==================== */

.karta-diagnozy {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: var(--pow);
  border: 1px solid var(--linia);
  border-top: 4px solid var(--kd, var(--akcent));
  border-radius: var(--r);
  padding: 20px 18px 16px;
  box-shadow: var(--cien-kartki);
}

.diagnoza-klips {
  position: absolute;
  top: -10px;
  right: 16px;
  width: 24px;
  height: 24px;
  color: var(--t2);
}

.diagnoza-klips svg {
  width: 24px;
  height: 24px;
}

.diagnoza-objaw {
  background: #fdf5dc;
  border: 1px dashed #d6b665;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 0.84rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.diagnoza-objaw strong {
  color: var(--akcent-cien);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.diagnoza-tytul {
  margin: 0 0 8px;
  font-size: 1.1rem;
  line-height: 1.3;
}

.diagnoza-tytul a:hover {
  color: var(--akcent);
}

.diagnoza-opis {
  margin: 0 0 14px;
  font-size: 0.88rem;
  color: var(--t2);
  line-height: 1.48;
  flex: 1 1 auto;
}

.diagnoza-stopka {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--linia);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8rem;
}

.diagnoza-dzial {
  font-weight: 700;
  color: var(--kd, var(--akcent));
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

.diagnoza-akcja {
  font-weight: 700;
  color: var(--tekst);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

.diagnoza-akcja:hover {
  color: var(--akcent);
}

/* ==================== SKRZYNKA WEEKENDOWA ==================== */

.skrzynka-warsztatowa-ramka {
  background: linear-gradient(180deg, #efe3ce 0%, #f7f0e4 100%);
  border: 2px solid #ccb694;
  border-radius: 14px;
  padding: 28px;
  box-shadow: var(--cien-kartki);
}

.skrzynka-naglowek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
}

.skrzynka-tytul {
  margin: 0 0 8px;
  font-size: clamp(1.38rem, 2.2vw, 1.85rem);
}

.skrzynka-opis {
  margin: 0;
  color: var(--t2);
  max-width: 72ch;
}

.skrzynka-grafika-obok {
  display: flex;
  align-items: center;
  gap: 12px;
}

.skrzynka-ikona {
  width: 140px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.ogrod-lopatka {
  width: 88px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* ==================== WIERSZ WPISU (_wiersz.html) ==================== */

.wiersz-wpisu {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  background: var(--pow);
  border: 1px solid var(--linia);
  border-left: 5px solid var(--kd, var(--akcent));
  border-radius: var(--r);
  padding: 14px 18px 14px 14px;
  box-shadow: var(--cien-kartki);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.wiersz-wpisu:hover {
  transform: translateY(-2px);
  box-shadow: var(--cien-mocny);
}

.wiersz-kadr {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  background: #eadbc6;
  border: 1px solid var(--linia);
}

.wiersz-obraz {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.wiersz-zakladka {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  background: #f5ebd9;
  border: 1px dashed var(--linia);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kd, var(--akcent));
}

.wiersz-zakladka-ikona svg {
  width: 36px;
  height: 36px;
}

.wiersz-srodek {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wiersz-nadtytul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.wiersz-dzial-etykieta {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 4px;
  background: var(--kd, var(--akcent));
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
}

.wiersz-sponsor {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--zolta-kartka);
  color: var(--tekst);
  font-size: 0.74rem;
  font-weight: 700;
}

.wiersz-tytul {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
}

.wiersz-tytul a:hover {
  color: var(--akcent);
}

.wiersz-lead {
  margin: 0;
  font-size: 0.9rem;
  color: var(--t2);
  line-height: 1.48;
}

.wiersz-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 0.8rem;
  color: var(--t2);
}

.wiersz-data::before {
  content: "📅 ";
}

.wiersz-czas::before {
  content: "⏱ ";
}

.wiersz-akcja {
  display: flex;
  align-items: center;
}

.wiersz-strzalka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
  background: var(--akcent);
  color: var(--akcent-tekst);
  font-weight: 700;
  font-size: 1.15rem;
}

.wiersz-strzalka:hover {
  background: var(--akcent-cien);
}

/* ==================== OKRUCHY (_okruchy.html) ==================== */

.okruchy {
  padding-block: 12px 8px;
  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: 6px;
}

.okruchy li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

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

.okruchy a {
  color: var(--t2);
  font-weight: 500;
  padding-block: 4px;
}

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

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

/* ==================== STRONA DZIAŁU (dz-*) ==================== */

.dz-strona,
.wp-strona,
.st-strona {
  padding-block: 16px 48px;
}

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

.dz-glowna,
.wp-glowna,
.kolumna-glowna {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.dz-naglowek {
  background: var(--pow);
  background-image:
    linear-gradient(rgba(224, 210, 188, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 210, 188, 0.35) 1px, transparent 1px);
  background-size: 22px 22px;
  border: 2px solid var(--linia);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--cien-kartki);
  position: relative;
}

.dz-baner,
.dz-wstazka {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 32px 12px 20px;
  background: var(--kd, var(--akcent));
  color: #ffffff;
  border-radius: 8px 24px 8px 8px;
  box-shadow: 0 4px 12px rgba(38, 28, 24, 0.18);
  margin-bottom: 16px;
}

.dz-ikona {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dz-ikona svg {
  width: 32px;
  height: 32px;
}

.dz-tytul {
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: inherit;
}

.dz-baner .dz-tytul,
.dz-wstazka .dz-tytul {
  color: #ffffff;
}

.dz-podtytul {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--kd, var(--akcent));
}

.dz-opis {
  margin: 0;
  font-size: 0.98rem;
  color: var(--tekst);
  line-height: 1.6;
  max-width: 75ch;
}

.dz-statystyki {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--linia);
}

.dz-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #f5ebd9;
  border: 1px solid var(--linia);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--t2);
}

.dz-tematy {
  background: #f5ebd9;
  border: 1px solid var(--linia);
  border-radius: 12px;
  padding: 22px;
}

.dz-tematy-naglowek,
.dz-sekcja-naglowek,
.dz-lista-naglowek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.dz-tematy-kicker {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--kd, var(--akcent));
}

.dz-tematy-tytul {
  margin: 0;
  font-size: 1.35rem;
}

.dz-tematy-opis {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: var(--t2);
}

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

.dz-temat-karta {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: var(--pow);
  border: 1px solid var(--linia);
  border-top: 4px solid var(--kd, var(--akcent));
  border-radius: 8px;
  padding: 18px;
  box-shadow: var(--cien-kartki);
}

.dz-temat-naglowek {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.dz-temat-ikona {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--akcent-jasny);
  color: var(--kd, var(--akcent));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dz-temat-ikona svg {
  width: 20px;
  height: 20px;
}

.dz-temat-nazwa {
  margin: 0;
  font-size: 1.08rem;
}

.dz-temat-opis {
  margin: 0 0 12px;
  font-size: 0.87rem;
  color: var(--t2);
}

.dz-temat-lista {
  list-style: none;
  margin: auto 0 0;
  padding: 10px 0 0;
  border-top: 1px dashed var(--linia);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dz-temat-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--tekst);
  padding-block: 4px;
}

.dz-temat-link::before {
  content: "›";
  color: var(--kd, var(--akcent));
  font-weight: 700;
}

.dz-temat-link:hover {
  color: var(--akcent);
}

.dz-lista-wierszy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dz-brak {
  padding: 28px;
  background: var(--pow);
  border: 1px dashed var(--linia);
  border-radius: var(--r);
  text-align: center;
  color: var(--t2);
}

/* ==================== PAGINACJA ==================== */

.dz-paginacja,
.paginacja {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.paginacja-lista,
.paginacja ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

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

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

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

/* ==================== STRONA WPISU (wp-*) ==================== */

.wp-artykul {
  background: var(--pow);
  border: 1px solid var(--linia);
  border-radius: 12px;
  padding: 32px;
  box-shadow: var(--cien-kartki);
  min-width: 0;
}

.wp-naglowek {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 2px dashed var(--linia);
}

.wp-nadtytul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.wp-dzial-odznaka {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 6px;
  background: var(--kd, var(--akcent));
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
}

.wp-dzial-odznaka svg {
  width: 16px;
  height: 16px;
}

.wp-sponsor {
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--zolta-kartka);
  color: var(--tekst);
  font-size: 0.78rem;
  font-weight: 700;
}

.wp-tytul {
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 1.2;
}

.wp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 0.86rem;
  color: var(--t2);
}

.wp-meta-pozycja {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wp-kadr-glowny {
  margin: 0 0 24px;
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid var(--linia);
  background: #eadbc6;
  aspect-ratio: 16 / 9;
}

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

.wp-lead-kartka,
.wp-lead {
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.65;
  color: var(--tekst);
  background: #faf3e4;
  border-left: 5px solid var(--kd, var(--akcent));
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 24px;
}

.wp-spis,
.spis-tresci {
  position: relative;
  background-color: #fdf9ef;
  background-image:
    linear-gradient(rgba(224, 210, 188, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 210, 188, 0.35) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 1px solid var(--linia);
  border-top: 4px solid var(--akcent);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 28px;
  box-shadow: var(--cien-kartki);
}

.wp-spis-tytul,
.spis-tresci h2,
.spis-tresci strong {
  display: block;
  margin: 0 0 12px;
  font-family: var(--f-n);
  font-size: 1.2rem;
  color: var(--akcent);
}

.wp-spis-lista,
.spis-tresci ol,
.spis-tresci ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wp-spis-link,
.spis-tresci a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding-block: 4px;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--tekst);
}

.wp-spis-link::before,
.spis-tresci a::before {
  content: "›";
  color: var(--akcent);
  font-weight: 700;
}

.wp-spis-link:hover,
.spis-tresci a:hover {
  color: var(--akcent);
}

/* ==================== TREŚĆ ARTYKUŁU (wp-tresc) ==================== */

.wp-tresc,
.tresc-artykulu,
.st-tresc {
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--tekst);
  min-width: 0;
}

.wp-tresc > * + *,
.tresc-artykulu > * + *,
.st-tresc > * + * {
  margin-top: 1.25em;
}

.wp-tresc h2,
.tresc-artykulu h2 {
  display: block;
  margin-top: 2em;
  margin-bottom: 0.85em;
  padding: 10px 22px 10px 18px;
  background: var(--akcent);
  color: var(--akcent-tekst);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  border-radius: 6px 18px 6px 6px;
  box-shadow: 0 3px 8px rgba(200, 37, 98, 0.22);
}

.wp-tresc h3,
.tresc-artykulu h3 {
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  font-size: 1.25rem;
  color: var(--tekst);
  border-bottom: 2px solid var(--linia);
  padding-bottom: 6px;
}

.wp-tresc h4,
.tresc-artykulu h4 {
  margin-top: 1.3em;
  margin-bottom: 0.4em;
  font-size: 1.08rem;
}

.wp-tresc a,
.tresc-artykulu a,
.st-tresc a {
  color: var(--akcent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wp-tresc a:hover,
.tresc-artykulu a:hover,
.st-tresc a:hover {
  color: var(--akcent-cien);
}

.wp-tresc ul,
.wp-tresc ol,
.tresc-artykulu ul,
.tresc-artykulu ol {
  padding-left: 1.4rem;
}

.wp-tresc li + li,
.tresc-artykulu li + li {
  margin-top: 0.45em;
}

.wp-tresc blockquote,
.tresc-artykulu blockquote {
  margin-inline: 0;
  padding: 16px 20px;
  background: #fdf6e2;
  border: 1px dashed #d4b463;
  border-left: 5px solid var(--dodatek);
  border-radius: 8px;
  color: var(--tekst);
}

.wp-tresc img,
.tresc-artykulu img {
  border-radius: 8px;
  border: 2px solid var(--linia);
  margin-block: 1.2em;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.wp-tresc table,
.tresc-artykulu table,
.st-tresc table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin-block: 1.5em;
  border: 1px solid var(--linia);
  border-radius: 8px;
  background: var(--pow);
  font-size: 0.92rem;
}

.wp-tresc th,
.tresc-artykulu th,
.st-tresc th {
  background: var(--akcent);
  color: var(--akcent-tekst);
  font-weight: 700;
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--akcent-cien);
}

.wp-tresc td,
.tresc-artykulu td,
.st-tresc td {
  padding: 10px 14px;
  border: 1px solid var(--linia);
  vertical-align: top;
}

.wp-tresc tbody tr:nth-child(even),
.tresc-artykulu tbody tr:nth-child(even) {
  background: #faf4e8;
}

.wp-tresc pre,
.tresc-artykulu pre {
  padding: 14px 18px;
  background: #261c18;
  color: #f4ebd9;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.88rem;
}

.wp-tresc code,
.tresc-artykulu code {
  background: #f2e8d5;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

.wp-tresc pre code,
.tresc-artykulu pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

.wp-sasiednie {
  margin-top: 28px;
}

.wp-sasiednie-siatka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.wp-sasiad-karta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--pow);
  border: 1px solid var(--linia);
  border-top: 4px solid var(--kd, var(--akcent));
  border-radius: 8px;
  box-shadow: var(--cien-kartki);
}

.wp-sasiad-kierunek {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--akcent);
}

.wp-sasiad-tytul {
  margin: 0;
  font-family: var(--f-n);
  font-size: 1.02rem;
  font-weight: 700;
}

.wp-kontakt-kartka {
  background: #fdf6e2;
  border: 2px dashed #cfb06b;
  border-radius: 10px;
  padding: 22px 24px;
  margin-top: 24px;
}

.wp-powiazane,
.wp-z-dzialu,
.dz-inne-dzialy {
  margin-top: 36px;
}

/* ==================== KOLUMNA BOCZNA PRZYKLEJANA (bok-*) ==================== */

.dz-boczna,
.wp-boczna,
.bok-kolumna,
.kolumna-boczna {
  min-width: 0;
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.bok-przyklejony {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.bok-kartka,
.bok-panel,
.bok-notatka {
  position: relative;
  background: var(--pow);
  border: 1px solid var(--linia);
  border-top: 4px solid var(--kd, var(--akcent));
  border-radius: 8px;
  padding: 20px 18px 18px;
  box-shadow: var(--cien-kartki);
  min-width: 0;
}

.bok-zolta {
  background: #fdf3c7;
  border-color: var(--zolta-kartka-ramka);
}

.bok-kratka {
  background-image:
    linear-gradient(rgba(224, 210, 188, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 210, 188, 0.35) 1px, transparent 1px);
  background-size: 18px 18px;
}

.bok-pinezka {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  color: var(--akcent);
}

.bok-pinezka svg {
  width: 24px;
  height: 24px;
}

.bok-tasma {
  position: absolute;
  top: -7px;
  right: 20px;
  width: 54px;
  height: 14px;
  background: rgba(248, 227, 140, 0.85);
  border: 1px solid rgba(186, 152, 60, 0.45);
  transform: rotate(3deg);
}

.bok-naglowek {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--linia);
}

.bok-tytul {
  margin: 0;
  font-family: var(--f-n);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tekst);
}

.bok-ikona {
  width: 22px;
  height: 22px;
  color: var(--kd, var(--akcent));
  display: inline-flex;
}

.bok-ikona svg {
  width: 22px;
  height: 22px;
}

.bok-metryczka-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bok-metryczka-wiersz {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--linia);
  font-size: 0.86rem;
}

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

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

.bok-spis-lista,
.bok-dzialy-lista,
.bok-lista-wpisow,
.bok-lista-odhaczana {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bok-spis-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--tekst);
  padding-block: 3px;
}

.bok-spis-link::before {
  content: "›";
  color: var(--akcent);
  font-weight: 700;
}

.bok-spis-link:hover {
  color: var(--akcent);
}

.bok-wpis {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--linia);
}

.bok-wpis:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.bok-wpis-kadr {
  display: block;
  width: 72px;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: #eadbc6;
  border: 1px solid var(--linia);
}

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

.bok-wpis-tresc {
  min-width: 0;
}

.bok-wpis-tytul {
  margin: 0 0 3px;
  font-family: var(--f-t);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
}

.bok-wpis-tytul a:hover {
  color: var(--akcent);
}

.bok-wpis-meta {
  font-size: 0.75rem;
  color: var(--t2);
}

.bok-dzial-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(246, 239, 226, 0.6);
  border: 1px solid var(--linia);
  font-weight: 700;
  font-size: 0.9rem;
}

.bok-dzial-link:hover {
  background: var(--akcent-jasny);
  border-color: var(--kd, var(--akcent));
}

.bok-dzial-ikona {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: var(--kd, var(--akcent));
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

/* ==================== BŁĄD 404 I STRONA STAŁA ==================== */

.blad-404,
.blad-kartka {
  background: var(--pow);
  border: 2px solid var(--linia);
  border-top: 5px solid var(--akcent);
  border-radius: 12px;
  padding: 36px 28px;
  text-align: center;
  box-shadow: var(--cien-kartki);
  margin-bottom: 32px;
}

.blad-kod {
  display: inline-block;
  font-family: var(--f-n);
  font-size: 3rem;
  font-weight: 700;
  color: var(--akcent);
  line-height: 1;
  margin-bottom: 8px;
}

/* ==================== STOPKA (_stopka.html) ==================== */

.stopka-warsztat {
  margin-top: 48px;
  background: var(--stopka);
  color: var(--stopka-tekst);
  position: relative;
}

.stopka-miarka {
  width: 100%;
  height: 18px;
  background: var(--dodatek);
  color: #231915;
  overflow: hidden;
}

.stopka-miarka svg {
  width: 100%;
  height: 18px;
}

.stopka-uklad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-block: 40px 28px;
}

.stopka-kolumna {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stopka-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
}

.stopka-logo-znak {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--akcent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stopka-logo-znak svg {
  width: 24px;
  height: 24px;
}

.stopka-logo-tekst {
  display: flex;
  flex-direction: column;
}

.stopka-logo-tekst strong {
  font-family: var(--f-n);
  font-size: 1.2rem;
}

.stopka-logo-tekst span {
  font-size: 0.82rem;
  color: var(--dodatek);
}

.stopka-opis {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(244, 235, 217, 0.84);
  line-height: 1.55;
}

.stopka-bhp-kartka {
  background: rgba(255, 253, 249, 0.07);
  border-left: 4px solid var(--dodatek);
  border-radius: 6px;
  padding: 12px 14px;
}

.stopka-bhp-tytul {
  display: block;
  font-size: 0.84rem;
  color: var(--zolta-kartka);
  margin-bottom: 4px;
}

.stopka-bhp-tekst {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(244, 235, 217, 0.85);
  line-height: 1.45;
}

.stopka-naglowek {
  margin: 0;
  font-size: 1.15rem;
  color: #ffffff;
  border-bottom: 2px solid rgba(244, 235, 217, 0.16);
  padding-bottom: 8px;
}

.stopka-dzialy-lista,
.stopka-dokumenty-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stopka-dzialy-lista a,
.stopka-dokumenty-lista a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--stopka-tekst);
  font-size: 0.92rem;
}

.stopka-dzialy-lista a:hover,
.stopka-dokumenty-lista a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--zolta-kartka);
}

.stopka-dzial-ikona {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: var(--kd, var(--akcent));
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.stopka-ozdoba {
  margin-top: auto;
  padding-top: 8px;
}

.stopka-wkretak {
  width: 180px;
  aspect-ratio: 3 / 1;
  object-fit: contain;
}

.stopka-nota {
  padding-block: 14px;
  border-top: 1px solid rgba(244, 235, 217, 0.14);
  font-size: 0.8rem;
  color: rgba(244, 235, 217, 0.72);
}

.stopka-nota p {
  margin: 0;
}

.stopka-dol {
  background: #18110e;
  padding-block: 14px;
  font-size: 0.82rem;
  color: rgba(244, 235, 217, 0.75);
}

.stopka-dol-wiersz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ==================== PREFERS-REDUCED-MOTION ==================== */

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

/* ==================== TABLET DUŻY (1024 px) ==================== */

@media (max-width: 1120px) {
  .naglowek-blat-uklad {
    grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
  }

  .naglowek-narzedzia {
    display: none;
  }

  .manifest-uklad {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .manifest-narzedzia-obok {
    display: none;
  }

  /* Listy 8 elementów: 4 -> 2 */
  .siatka-modulow-4,
  .siatka-8,
  .dz-siatka-8 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Listy 6 elementów: 3 -> 2 */
  .siatka-kart-6,
  .siatka-polaroidow-6,
  .siatka-diagnozy-6,
  .dz-siatka-kart,
  .dz-siatka-6,
  .wp-siatka-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dz-uklad,
  .wp-uklad,
  .uklad-z-bokiem {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
  }
}

/* ==================== TABLET (768 px) ==================== */

@media (max-width: 920px) {
  .naglowek-blat-uklad {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .logo-kartka {
    transform: none;
  }

  .czolowka-uklad {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .czolowka-kartka-dzialow {
    transform: none;
  }

  .manifest-uklad {
    grid-template-columns: 1fr;
  }

  .manifest-karteczka-zolta {
    transform: none;
    width: 100%;
    min-height: auto;
  }

  /* Listy 3 i 9 elementów: z 3 kolumn od razu na 1 kolumnę (bez 2 kolumn) */
  .manifest-pas-trzech,
  .siatka-obiegow-3,
  .siatka-9,
  .siatka-3,
  .dz-siatka-9,
  .dz-siatka-3,
  .wp-siatka-3,
  .stopka-uklad {
    grid-template-columns: 1fr;
  }

  .rozdzielnica-naglowek,
  .notes-naglowek,
  .skrzynka-naglowek {
    grid-template-columns: 1fr;
  }

  .rozdzielnica-osprzet-grafika,
  .notes-naglowek-prawy,
  .skrzynka-grafika-obok {
    display: none;
  }

  .dz-uklad,
  .wp-uklad,
  .uklad-z-bokiem {
    grid-template-columns: 1fr;
  }

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

/* ==================== TELEFON (na końcu pliku) ==================== */

@media (max-width: 640px) {
  .szerokosc {
    padding-inline: 16px;
  }

  .pasek-menu {
    flex-wrap: wrap;
  }

  .menu-lista {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .menu-link {
    width: 100%;
    justify-content: flex-start;
    padding: 8px 12px;
    font-size: 0.9rem;
  }

  .czolowka-blat {
    min-height: auto;
  }

  .czolowka-uklad {
    padding: 14px;
    gap: 18px;
  }

  .czolowka-kadr-postaci {
    min-height: 260px;
  }

  .czolowka-naklejka-cytat {
    position: relative;
    right: auto;
    bottom: auto;
    max-width: 100%;
    margin: 10px;
  }

  .manifest-papier,
  .rozdzielnica-obudowa,
  .notes-kratka-arkusz,
  .skrzynka-warsztatowa-ramka,
  .dz-naglowek,
  .wp-artykul {
    padding: 18px 16px;
  }

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

  .przycisk-malinowy,
  .przycisk-szkicowy {
    width: 100%;
  }

  /* Wszystkie siatki 6, 8, 9, 4, 3, 2 na 1 kolumnę na telefonie */
  .siatka-kart-6,
  .siatka-polaroidow-6,
  .siatka-diagnozy-6,
  .siatka-modulow-4,
  .siatka-obiegow-3,
  .manifest-pas-trzech,
  .siatka-9,
  .siatka-8,
  .siatka-3,
  .dz-siatka-kart,
  .dz-siatka-9,
  .dz-siatka-8,
  .dz-siatka-6,
  .dz-siatka-3,
  .dz-tematy-siatka,
  .wp-siatka-6,
  .wp-siatka-3,
  .wp-sasiednie-siatka,
  .stopka-uklad {
    grid-template-columns: 1fr;
  }

  .wiersz-wpisu {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .wiersz-akcja {
    justify-content: flex-end;
  }

  .wstazka-tytul,
  .dz-baner,
  .dz-wstazka,
  .wp-tresc h2,
  .tresc-artykulu h2 {
    padding: 10px 16px;
    border-radius: 6px;
  }

  .stopka-dol-wiersz {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Dział: czołówka z malinowym pociągnięciem pędzla i kartką osprzętu */
.dz-naglowek {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2rem;
  align-items: center;
  background: var(--powierzchnia, #fffdf9);
  border: 1px solid var(--linia, #e0d2bc);
  border-radius: 14px;
  padding: 2rem;
  box-shadow: 0 8px 24px rgba(38, 28, 24, 0.06);
  position: relative;
}
.dz-tytul-oprawa {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 1.6rem 0.65rem 1.1rem;
  margin-bottom: 0.85rem;
  background: var(--kd, #c82562);
  color: #fff;
  border-radius: 8px 18px 14px 6px;
  box-shadow: 0 4px 12px rgba(200, 37, 98, 0.25);
  z-index: 1;
  overflow: hidden;
}
.dz-farba-tlo {
  position: absolute;
  inset: -12px -18px;
  z-index: -1;
  opacity: 0.35;
  pointer-events: none;
}
.dz-farba-obraz {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dz-tytul-oprawa .dz-tytul {
  color: #fff;
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.15;
}
.dz-tytul-oprawa .dz-ikona {
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.dz-podtytul {
  font-weight: 700;
  color: var(--kd, #c82562);
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}
.dz-stat-ikona {
  width: 1.15rem;
  height: 1.15rem;
  display: inline-flex;
  color: var(--kd, #c82562);
  flex-shrink: 0;
}
.dz-naglowek-wizualia {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.dz-kadr-warsztat {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 8px 20px rgba(38, 28, 24, 0.12);
  aspect-ratio: 16 / 10;
  background: #efe5d2;
}
.dz-kadr-warsztat .dz-tlo-obraz {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dz-kartka-osprzet {
  position: absolute;
  right: -0.75rem;
  bottom: -1rem;
  background: #fffdf7;
  background-image: linear-gradient(#e9dfd0 1px, transparent 1px), linear-gradient(90deg, #e9dfd0 1px, transparent 1px);
  background-size: 14px 14px;
  border: 1px solid #d8c8b0;
  border-radius: 8px;
  padding: 0.75rem 0.9rem 0.55rem;
  box-shadow: 0 6px 16px rgba(38, 28, 24, 0.14);
  transform: rotate(2.5deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  z-index: 2;
}
.dz-osprzet-obr {
  width: auto;
  max-width: 110px;
  max-height: 82px;
  height: auto;
  object-fit: contain;
}
.dz-kartka-podpis {
  font-size: 0.72rem;
  font-weight: 700;
  color: #5c4b42;
}

/* Symetryczna siatka tematów działu */
.dz-tematy-siatka {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.dz-temat-dopelnienie {
  display: none;
}
.dz-tematy-siatka:has(> .dz-temat-karta:nth-of-type(2):last-of-type),
.dz-tematy-siatka:has(> .dz-temat-karta:nth-of-type(5):last-of-type) {
  grid-template-columns: repeat(2, 1fr);
}
.dz-tematy-siatka:has(> .dz-temat-karta:nth-of-type(6):last-of-type) .dz-temat-dopelnienie,
.dz-tematy-siatka:has(> .dz-temat-karta:nth-of-type(2):last-of-type) .dz-temat-dopelnienie {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dz-temat-cta {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  color: var(--kd, #c82562);
  text-decoration: none;
  margin-top: auto;
  padding-top: 0.5rem;
}

/* Układ listy i kolumny bocznej bez rozciągania wierszy */
.dz-uklad,
.wp-uklad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 2.25rem;
  align-items: start;
}
.dz-glowna,
.wp-glowna {
  min-width: 0;
  align-self: start;
}
.dz-lista-wierszy {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  align-items: stretch;
  justify-content: flex-start;
}
.wiersz-wpisu {
  height: auto !important;
  flex: 0 0 auto !important;
}
.bok-kolumna {
  align-self: stretch;
}
.bok-przyklejony {
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
/* Dopasowanie liczby bloków boku, gdy lista wpisów jest krótka */
.dz-uklad:not(:has(.wiersz-wpisu:nth-child(3))) .bok-panel-2,
.dz-uklad:not(:has(.wiersz-wpisu:nth-child(3))) .bok-panel-3,
.dz-uklad:not(:has(.wiersz-wpisu:nth-child(3))) .bok-panel-4 {
  display: none;
}
.dz-uklad:not(:has(.wiersz-wpisu:nth-child(5))) .bok-panel-3,
.dz-uklad:not(:has(.wiersz-wpisu:nth-child(5))) .bok-panel-4 {
  display: none;
}
.dz-uklad:not(:has(.wiersz-wpisu:nth-child(7))) .bok-panel-4 {
  display: none;
}

.dz-poziomica-obr {
  width: 165px;
  height: auto;
  object-fit: contain;
}
.bok-narzedzia-kadr {
  display: flex;
  justify-content: center;
  margin: 0.35rem 0 0.75rem;
  padding: 0.5rem;
  background: #fbf5ea;
  border-radius: 8px;
  border: 1px dashed #dccab0;
}
.bok-narzedzia-obr {
  width: 210px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.bok-bhp-ikony {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 0.75rem;
  margin-top: 0.65rem;
}
.bok-rekawice-obr,
.bok-przewod-obr {
  width: 88px;
  height: auto;
  object-fit: contain;
}
.bok-opis-maly {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--tekst_drugorzedny, #5c4b42);
  margin: 0 0 0.65rem;
}
.bok-siatka-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin: 0;
}
.bok-siatka-2 .bok-metryczka-wiersz {
  background: #fbf6ec;
  border: 1px solid #e5d8c3;
  border-radius: 7px;
  padding: 0.55rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.bok-autor-pasek {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px dashed #dfd1bc;
  font-size: 0.86rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.bok-link-dzial {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 700;
  color: #7c1339;
  text-decoration: none;
}

/* Paginacja działu */
.dz-paginacja {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.pag-lista {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pag-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.65rem;
  border-radius: 7px;
  background: #fffdf9;
  border: 1px solid #dccab0;
  color: #261c18;
  font-weight: 700;
  text-decoration: none;
}
.pag-link.jest-aktywna {
  background: var(--akcent, #c82562);
  border-color: var(--akcent, #c82562);
  color: #fff;
}

/* Polaroidy działów w siatce 6 (3x2 / 2x3) */
.dz-siatka-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.35rem;
}
.polaroid-dzial {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fffdf9;
  border: 1px solid #dfd1bc;
  border-radius: 10px;
  padding: 0.75rem 0.75rem 1rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 16px rgba(38, 28, 24, 0.08);
  transition: transform 0.18s ease;
}
.polaroid-dzial:hover {
  transform: translateY(-3px);
}
.polaroid-dzial.jest-aktywny {
  outline: 2px solid var(--kd, #c82562);
}
.polaroid-pinezka {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  z-index: 2;
}
.polaroid-kadr {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  background: #efe5d2;
  margin-bottom: 0.75rem;
}
.polaroid-obraz {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.polaroid-choragiewka {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 6px;
  background: var(--kd, #c82562);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
}
.polaroid-podpis {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.polaroid-nazwa {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.15rem;
  color: #261c18;
}
.polaroid-opis {
  font-size: 0.85rem;
  color: #5c4b42;
  line-height: 1.4;
}

/* Strona wpisu: nagłówek warsztatowy, spis w kratkę, malinowe wstążki h2 i tabele */
.wp-warsztat-etykieta {
  font-size: 0.82rem;
  font-weight: 700;
  color: #5c4b42;
  background: #f5ead8;
  padding: 0.28rem 0.7rem;
  border-radius: 99px;
}
.wp-meta-ikona {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  color: var(--kd, #c82562);
}
.wp-kadr-glowny {
  margin: 1.25rem 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #dfd1bc;
}
.wp-obraz-glowny {
  width: 100%;
  height: auto;
  display: block;
}
.wp-blat-naglowka {
  margin: 1.25rem 0;
  padding: 1.1rem 1.25rem;
  background: #fbf5e9;
  background-image: linear-gradient(#eadfce 1px, transparent 1px), linear-gradient(90deg, #eadfce 1px, transparent 1px);
  background-size: 18px 18px;
  border: 1px solid #dccab0;
  border-left: 5px solid var(--kd, #c82562);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem;
  align-items: center;
}
.wp-blat-pasek {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.wp-blat-pasek:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}
.wp-blat-pasek:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr);
}
.wp-blat-kafel {
  background: #fffdf9;
  border: 1px solid #e2d4be;
  border-radius: 7px;
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.wp-blat-narzedzia {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.wp-blat-skrzynka {
  width: 115px;
  height: auto;
  object-fit: contain;
}
.wp-blat-miara {
  width: 105px;
  height: auto;
  object-fit: contain;
}

/* Spis treści na papierze w kratkę jak na makiecie */
.wp-spis {
  position: relative;
  margin: 1.5rem 0 2rem;
  padding: 1.35rem 1.5rem;
  background-color: #fffdf8;
  background-image: linear-gradient(#ebe2d3 1px, transparent 1px), linear-gradient(90deg, #ebe2d3 1px, transparent 1px);
  background-size: 16px 16px;
  border: 1px solid #d9c8af;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(38, 28, 24, 0.06);
}
.wp-spis-tytul {
  color: var(--akcent, #c82562);
  font-size: 1.2rem;
  margin: 0 0 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.wp-spis-strzalka {
  color: var(--akcent, #c82562);
  font-weight: 700;
}
.wp-spis-nr {
  font-weight: 700;
  color: #261c18;
}

/* Śródtytuły na malinowo-różowych wstążkach i tabele */
.wp-sekcja-wstazka {
  position: relative;
  display: inline-block;
  background: var(--akcent, #c82562);
  color: #fff !important;
  padding: 0.55rem 1.85rem 0.55rem 1.1rem;
  border-radius: 6px 0 0 6px;
  font-size: clamp(1.18rem, 2vw, 1.42rem);
  line-height: 1.3;
  margin: 1.8rem 0 1rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
}
.wp-tresc table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.35rem 0;
  background: #fffdf9;
  border: 1px solid #dfd1bc;
  border-radius: 8px;
  overflow: hidden;
}
.wp-tresc thead th,
.wp-tresc tr:first-child th {
  background: var(--akcent, #c82562);
  color: #fff;
  font-weight: 700;
  text-align: left;
  padding: 0.75rem 0.9rem;
}
.wp-tresc td,
.wp-tresc tbody th {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid #e9decb;
}
.wp-tresc tbody tr:nth-child(even) {
  background: #faf3e6;
}

/* Sąsiednie wpisy bez pustego pola przy 1 odnośniku */
.wp-sasiednie-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.15rem;
}
.wp-siatka-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.wp-kontakt-uklad,
.red-baner-uklad {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
}
.wp-kontakt-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1rem;
}
.przycisk-malinowy {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--akcent, #c82562);
  color: #fff;
  font-weight: 700;
  padding: 0.7rem 1.3rem;
  border-radius: 99px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(200, 37, 98, 0.25);
}
.przycisk-obrys {
  display: inline-flex;
  align-items: center;
  background: #fffdf9;
  color: #261c18;
  border: 1px solid #ccb99e;
  font-weight: 700;
  padding: 0.7rem 1.25rem;
  border-radius: 99px;
  text-decoration: none;
}
.wp-walek-obr {
  width: 115px;
  height: auto;
  object-fit: contain;
}
.red-postac-obr {
  width: 200px;
  height: auto;
  object-fit: contain;
}
.blad-skrzynka-obr {
  width: 220px;
  height: auto;
  object-fit: contain;
}

@media (max-width: 960px) {
  .dz-naglowek,
  .dz-uklad,
  .wp-uklad,
  .wp-blat-naglowka {
    grid-template-columns: 1fr;
  }
  .bok-przyklejony {
    position: static;
  }
  .dz-siatka-6 {
    grid-template-columns: repeat(2, 1fr);
  }
  .dz-tematy-siatka {
    grid-template-columns: repeat(2, 1fr);
  }
  .dz-tematy-siatka:has(> .dz-temat-karta:nth-of-type(4):last-of-type) {
    grid-template-columns: 1fr;
  }
  .wp-blat-pasek {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .dz-siatka-6,
  .dz-tematy-siatka,
  .wp-siatka-4,
  .wp-kontakt-uklad,
  .red-baner-uklad {
    grid-template-columns: 1fr;
  }
  .dz-kartka-osprzet {
    position: static;
    transform: none;
  }
}

:root {
  --tekst: #261c18;
  --t2: #4e3e36;
  --tekst-drugorzedny: #4e3e36;
  --akcent: #b81d58;
  --akcent-cien: #88123f;
  --dodatek: #9e510d;
  --k-elektryka: #b81d58;
  --k-elektronika: #145da0;
  --k-agd: #6e3885;
  --k-motoryzacja: #9c4408;
  --k-ogrod: #3b661e;
  --k-budownictwo: #784218;
}
.dzial-elektryka { --kd: #b81d58; }
.dzial-elektronika { --kd: #145da0; }
.dzial-agd { --kd: #6e3885; }
.dzial-motoryzacja { --kd: #9c4408; }
.dzial-ogrod { --kd: #3b661e; }
.dzial-budownictwo { --kd: #784218; }

p, li, td, th, blockquote, a, span, strong, dt, dd {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* Zwarty nagłówek w 1 linii na 1440 px (poniżej 145 px wysokości) */
.naglowek-blat {
  padding-block: 8px 10px;
}
.naglowek-blat-uklad {
  gap: 16px;
}
.logo-kartka {
  min-height: 56px;
  padding: 8px 14px 8px;
  transform: rotate(-1deg);
}
.logo-znak {
  width: 38px;
  height: 38px;
}
.logo-haslo {
  font-size: 1.18rem;
}
.logo-domena {
  font-size: 0.8rem;
  color: #88123f;
}
.naglowek-notatka {
  padding: 8px 14px;
}
.naglowek-motto {
  margin: 0;
  font-size: 0.9rem;
}
.naglowek-okulary {
  width: 90px;
  height: auto;
}
.naglowek-miarka {
  width: 54px;
  height: auto;
}
.pasek-menu {
  min-height: 46px;
  padding-block: 3px;
  flex-wrap: nowrap;
}
.menu-lista {
  flex-wrap: nowrap;
  gap: 4px;
}
.menu-link {
  min-height: 40px;
  padding: 6px 13px;
  font-size: 0.92rem;
  white-space: nowrap;
}

@media (max-width: 780px) {
  .pasek-menu {
    flex-wrap: wrap;
  }
  .menu-lista {
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
  }
  .menu-link {
    width: 100%;
    white-space: normal;
  }
}

/* Czołówka i kartka z działami (naprawa SIATKA 3 el./2 kol. i rozmytego hero na 390 px) */
.czolowka-tlo-warstwa {
  height: 420px;
  bottom: auto;
}
.czolowka-blat {
  background: linear-gradient(180deg, #c89a65 0%, #b88750 100%);
}
.kartka-odhacz-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 12px;
}
.kartka-ptaszek {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.kartka-dzial-tekst {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Zastąpienie skalowanych napisów SVG czystym HTML/CSS */
.rozdzielnica-listwy-html,
.notes-przeplyw-html {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-block: 18px;
}
@media (min-width: 860px) {
  .rozdzielnica-listwy-html,
  .notes-przeplyw-html {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.listwa-zaciskowa,
.przeplyw-wezel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--pow);
  border: 1px solid var(--linia);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(38, 28, 24, 0.05);
}
.listwa-l { border-left: 5px solid #8a4b22; }
.listwa-n { border-left: 5px solid #145da0; }
.listwa-pe { border-left: 5px solid #3b661e; }
.listwa-symbol,
.przeplyw-krok {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  font-family: var(--f-n);
  font-weight: 700;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
  background: var(--akcent);
}
.listwa-l .listwa-symbol { background: #8a4b22; }
.listwa-n .listwa-symbol { background: #145da0; }
.listwa-pe .listwa-symbol { background: #3b661e; }
.przeplyw-krok { background: #145da0; }
.listwa-opis,
.przeplyw-tekst {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.listwa-opis strong,
.przeplyw-tekst strong {
  font-size: 0.92rem;
  color: var(--tekst);
}
.listwa-opis span,
.przeplyw-tekst span {
  font-size: 0.82rem;
  color: var(--t2);
  line-height: 1.38;
}

/* Naprawa banera działu (/elektryka/) i kontrastu okruchów */
.dz-czolowka {
  display: block;
  width: 100%;
  background: transparent;
  padding: 0;
  margin-bottom: 24px;
}
.dz-tematy-sekcja {
  margin-bottom: 28px;
}
.okruchy {
  color: #4a3a31;
}
.okruchy a {
  color: #4a3a31;
  font-weight: 600;
}
.okruchy [aria-current="page"] {
  color: #261c18;
  font-weight: 700;
}

/* Siatka tematów w dziale zawsze pełna i symetryczna (bez pustych komórek) */
.dz-tematy-siatka {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 720px) {
  .dz-tematy-siatka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dz-tematy-siatka:has(> .dz-temat-karta:nth-child(3):last-child),
  .dz-tematy-siatka:has(> .dz-temat-karta:nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dz-tematy-siatka:has(> .dz-temat-karta:nth-child(1):last-child) {
    grid-template-columns: 1fr;
  }
}

/* Wiersz wpisu w dziale bez pustej zaślepki zdjęcia */
.wiersz-wpisu.wiersz-notatnik {
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 16px 18px;
  background-image:
    linear-gradient(rgba(224, 210, 188, 0.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 210, 188, 0.25) 1px, transparent 1px);
  background-size: 20px 20px;
}
@media (min-width: 641px) {
  .wiersz-wpisu.wiersz-notatnik {
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 18px;
  }
}
.wiersz-indeks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 8px;
  background: #fdf6e6;
  border: 1px solid #dfd0b8;
  color: var(--kd, var(--akcent));
  text-align: center;
}
.wiersz-indeks-ikona {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wiersz-indeks-ikona svg {
  width: 24px;
  height: 24px;
}
.wiersz-indeks-czas {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--tekst);
  line-height: 1.1;
}
@media (max-width: 640px) {
  .wiersz-indeks {
    flex-direction: row;
    justify-content: flex-start;
    padding: 6px 12px;
    align-self: flex-start;
  }
}

/* Spis treści bez wąskiego słupka na 390 px */
.wp-spis-link {
  display: block;
  padding-block: 5px;
  line-height: 1.45;
}
.wp-spis-link::before {
  content: none;
}
.wp-spis-nr {
  font-weight: 700;
  color: var(--akcent);
  margin-right: 6px;
}
.wp-spis-tekst {
  color: var(--tekst);
}

/* Sąsiednie i powiązane artykuły - pełne i symetryczne siatki */
.wp-sasiednie-siatka {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.wp-siatka-pokrewne {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 680px) {
  .wp-sasiednie-siatka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wp-sasiednie-siatka:has(> :only-child) {
    grid-template-columns: 1fr;
  }
  .wp-siatka-pokrewne {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wp-siatka-pokrewne:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .wp-siatka-pokrewne:has(> :only-child) {
    grid-template-columns: 1fr;
  }
}

/* Kolumna boczna: pełna, bez łamania wyrazów i z linkami do poradników */
.bok-metryczka-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bok-metryczka-wiersz {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  background: #fbf6ec;
  border: 1px solid #e5d8c3;
  border-radius: 6px;
}
.bok-poradniki-lista {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bok-poradniki-odstep {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--linia);
}
.bok-poradnik-link {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 6px;
  background: #fbf6ec;
  border: 1px solid #e5d8c3;
  font-size: 0.87rem;
  font-weight: 600;
  line-height: 1.38;
  color: var(--tekst);
}
.bok-poradnik-link:hover {
  border-color: var(--kd, var(--akcent));
  background: var(--akcent-jasny);
  color: var(--akcent-cien);
}
.bok-poradnik-punkt {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: var(--kd, var(--akcent));
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.bok-lista-odhaczana li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
}
.bok-ptaszek {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: var(--kd, var(--akcent));
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bok-ptaszek svg {
  width: 13px;
  height: 13px;
}
.bok-sciaga-lista {
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bok-sciaga-wiersz {
  padding: 8px 10px;
  background: #fbf6ec;
  border: 1px solid #e5d8c3;
  border-left: 3px solid var(--kd, var(--akcent));
  border-radius: 6px;
}
.bok-sciaga-klucz {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--kd, var(--akcent));
  margin-bottom: 2px;
}
.bok-sciaga-wartosc {
  margin: 0;
  font-size: 0.82rem;
  color: var(--t2);
  line-height: 1.38;
}
.stopka-logo-tekst span {
  color: #f8e38c;
}