@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/playfair-display/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.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: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/playfair-display/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.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_"] 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: #f6efe5;
  --pow: #fffdf9;
  --tekst: #24150e;
  --t2: #5e4638;
  --linia: #dcc7ae;
  --akcent: #6e2620;
  --akcent-tekst: #fff9f0;
  --dodatek: #c89648;
  --r: 12px;
  --f-n: "Playfair Display", "Playfair Display Fallback", Georgia, "Times New Roman", serif;
  --f-t: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --akcent-jasny: #efe0cb;
  --akcent-cien: #461612;
  --stopka: #22130d;
  --stopka-tekst: #efe3d2;
  --pergamin: #efe2ce;
  --notatnik: #fbf3e4;

  --kd-ksiazki: #2e4a33;
  --kd-literatura: #6e2620;
  --kd-dom-i-technika: #855427;
  --kd-zdrowie-i-uroda: #355855;
  --kd-praca-i-finanse: #5a3b52;
  --kd: var(--akcent);

  --cien-karta: 0 6px 20px rgba(36, 21, 14, 0.07);
  --cien-mocny: 0 12px 30px rgba(36, 21, 14, 0.14);
  --szer-kontener: 1320px;
}

.dzial-ksiazki { --kd: var(--kd-ksiazki); }
.dzial-literatura { --kd: var(--kd-literatura); }
.dzial-dom-i-technika { --kd: var(--kd-dom-i-technika); }
.dzial-zdrowie-i-uroda { --kd: var(--kd-zdrowie-i-uroda); }
.dzial-praca-i-finanse { --kd: var(--kd-praca-i-finanse); }

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
  background-color: var(--tlo);
  color: var(--tekst);
}

body {
  margin: 0;
  font-family: var(--f-t);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tekst);
  background-color: var(--tlo);
  background-image: radial-gradient(circle at 50% 0%, rgba(255, 253, 249, 0.65) 0%, rgba(246, 239, 229, 0) 70%);
  overflow-x: clip;
  max-width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
  word-break: break-word;
}

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

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

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

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

a:hover {
  color: var(--akcent-cien);
}

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

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

p, ul, ol, dl, blockquote, figure {
  margin-top: 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;
}

.przejdz-do-tresci {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 1000;
  background-color: var(--akcent);
  color: var(--akcent-tekst);
  padding: 0.75rem 1.25rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--dodatek);
}

.przejdz-do-tresci:focus,
.przejdz-do-tresci:focus-visible {
  top: 1rem;
  color: var(--akcent-tekst);
}

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

.odstep-gorny {
  margin-top: 2.25rem;
}

/* ==========================================================================
   NAGŁÓWEK (_naglowek.html)
   ========================================================================== */
.naglowek-strony {
  background-color: var(--stopka);
  color: var(--stopka-tekst);
  border-bottom: 2px solid rgba(200, 150, 72, 0.35);
  position: relative;
  z-index: 50;
}

.naglowek-wnetrze {
  max-width: var(--szer-kontener);
  margin-inline: auto;
  padding: 0.65rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}

.marka-logo {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  text-decoration: none;
  color: var(--akcent-tekst);
  min-height: 44px;
  min-width: 44px;
  padding-block: 0.15rem;
}

.marka-logo:hover {
  color: var(--dodatek);
}

.marka-el-obraz {
  aspect-ratio: 11 / 3;
  height: 38px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
}

.marka-podpis {
  font-size: 0.75rem;
  color: var(--linia);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

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

.naw-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  color: var(--stopka-tekst);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  border: 1px solid transparent;
}

.naw-link:hover {
  background-color: rgba(255, 249, 240, 0.08);
  color: var(--akcent-tekst);
  border-color: rgba(200, 150, 72, 0.4);
}

.naw-link.naw-aktywny {
  background-color: var(--kd, var(--akcent));
  color: var(--akcent-tekst);
  border-color: rgba(255, 249, 240, 0.25);
  font-weight: 600;
}

.naw-ikona {
  display: inline-flex;
  align-items: center;
  color: var(--dodatek);
}

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

.naw-ikona svg {
  width: 1.05rem;
  height: 1.05rem;
}

.naglowek-skroty {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.naglowek-skrot {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--stopka-tekst);
  background-color: rgba(255, 249, 240, 0.07);
  border: 1px solid rgba(220, 199, 174, 0.28);
}

.naglowek-skrot:hover {
  background-color: rgba(255, 249, 240, 0.14);
  color: var(--akcent-tekst);
}

.naglowek-skrot-akcent {
  background-color: var(--akcent);
  color: var(--akcent-tekst);
  border-color: rgba(200, 150, 72, 0.5);
}

.naglowek-skrot-akcent:hover {
  background-color: var(--akcent-cien);
  color: var(--akcent-tekst);
}

.naglowek-skrot-ikona {
  display: inline-flex;
  align-items: center;
  color: var(--dodatek);
}

.naglowek-skrot-ikona svg {
  width: 1rem;
  height: 1rem;
}

/* ==========================================================================
   HERO CZYTELNIA (glowna.html)
   ========================================================================== */
.hero-czytelnia {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  background-color: var(--stopka);
  color: var(--akcent-tekst);
  overflow: hidden;
  border-bottom: 3px solid var(--linia);
}

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

.hero-tlo picture,
.hero-obraz {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 25%;
}

.hero-cien {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(24, 13, 8, 0.94) 0%,
    rgba(34, 19, 13, 0.84) 48%,
    rgba(34, 19, 13, 0.35) 100%
  );
}

.hero-wnetrze {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--szer-kontener);
  margin-inline: auto;
  padding: 3.5rem 1.5rem;
}

.hero-karta-powitalna {
  max-width: 670px;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background-color: rgba(200, 150, 72, 0.18);
  border: 1px solid rgba(200, 150, 72, 0.45);
  color: var(--akcent-jasny);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.hero-kicker-ikona {
  display: inline-flex;
  color: var(--dodatek);
}

.hero-kicker-ikona svg {
  width: 1.1rem;
  height: 1.1rem;
}

.hero-tytul {
  color: var(--akcent-tekst);
  font-size: clamp(2.15rem, 4vw, 3.35rem);
  line-height: 1.12;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.hero-opis {
  color: var(--stopka-tekst);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.75rem;
  max-width: 58ch;
}

.hero-drogowskazy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.hero-pastylka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  background-color: rgba(34, 19, 13, 0.78);
  color: var(--akcent-tekst);
  border: 1px solid rgba(220, 199, 174, 0.45);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
}

.hero-pastylka:hover {
  background-color: var(--pow);
  color: var(--tekst);
  border-color: var(--pow);
}

.hero-pastylka-glowna {
  background-color: var(--akcent);
  color: var(--akcent-tekst);
  border-color: var(--dodatek);
}

.hero-pastylka-glowna:hover {
  background-color: var(--akcent-cien);
  color: var(--akcent-tekst);
  border-color: var(--akcent-jasny);
}

/* ==========================================================================
   NAGŁÓWKI SEKCJI WSPÓLNE
   ========================================================================== */
.sekcja-nastroje,
.sekcja-polecamy,
.sekcja-najnowsze-z-zakladka,
.sekcja-leksykon,
.sekcja-stol-czytelnika,
.sekcja-polki-tematyczne {
  padding-block: 3rem;
  border-bottom: 1px solid var(--linia);
}

.naglowek-sekcji {
  margin-bottom: 1.85rem;
  min-width: 0;
}

.naglowek-rozstawiony {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.kicker-sekcji {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--akcent);
  margin-bottom: 0.35rem;
}

.naglowek-wiersz {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tytul-sekcji {
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
  margin-bottom: 0;
  color: var(--tekst);
}

.ozdoba-pioro {
  display: inline-flex;
  align-items: center;
  color: var(--akcent);
}

.ozdoba-pioro svg {
  width: 1.65rem;
  height: 1.65rem;
}

.opis-sekcji {
  margin-top: 0.45rem;
  margin-bottom: 0;
  color: var(--t2);
  font-size: 1rem;
  max-width: 70ch;
}

.link-wszystkie {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background-color: var(--akcent-jasny);
  color: var(--tekst);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border: 1px solid var(--linia);
}

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

.link-wszystkie svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* ==========================================================================
   SEKCJA NASTROJE - WITRAŻE ŁUKOWE (6 elementów: 6 -> 3 -> 2 -> 1)
   ========================================================================== */
.siatka-nastrojow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.15rem;
  align-items: stretch;
}

.witraz-nastroju {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  text-decoration: none;
  color: var(--tekst);
  background-color: var(--pow);
  border: 1px solid var(--linia);
  border-radius: 999px 999px var(--r) var(--r);
  padding: 0.55rem 0.55rem 1rem;
  box-shadow: var(--cien-karta);
}

.witraz-nastroju:hover {
  transform: translateY(-3px);
  border-color: var(--kd, var(--akcent));
  box-shadow: var(--cien-mocny);
}

.witraz-luk {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px calc(var(--r) - 4px) calc(var(--r) - 4px);
  overflow: hidden;
  background-color: var(--stopka);
  border: 2px solid var(--linia);
}

.witraz-luk picture,
.wej-el-obraz {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.witraz-mgla {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(24, 13, 8, 0.08) 0%,
    rgba(24, 13, 8, 0.45) 50%,
    rgba(24, 13, 8, 0.92) 100%
  );
}

.witraz-podpis {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 0.85rem 0.65rem;
  text-align: center;
  color: var(--akcent-tekst);
  z-index: 2;
}

.witraz-dzial {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background-color: var(--kd, var(--akcent));
  color: var(--akcent-tekst);
  margin-bottom: 0.35rem;
}

.witraz-tytul {
  color: var(--akcent-tekst);
  font-size: 1.05rem;
  line-height: 1.22;
  margin: 0;
}

.witraz-opis {
  margin: 0.75rem 0.35rem 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--t2);
  text-align: center;
  flex-grow: 1;
}

/* ==========================================================================
   SEKCJA POLECAMY NA DZIŚ (glowna.html)
   ========================================================================== */
.pulpit-polecamy {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  background-color: var(--stopka);
  color: var(--akcent-tekst);
  border-radius: calc(var(--r) + 4px);
  border: 2px solid var(--linia);
  overflow: hidden;
  box-shadow: var(--cien-mocny);
}

.pulpit-lewa {
  background-color: var(--pergamin);
  color: var(--tekst);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 2px solid var(--linia);
}

.pulpit-pergamin-ramka {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  border: 2px solid rgba(110, 38, 32, 0.3);
  border-radius: var(--r);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--pow);
  overflow: hidden;
}

.pulpit-pergamin-ramka picture,
.pulpit-pergamin-obraz {
  width: 96px;
  height: 72px;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  margin-bottom: 0.75rem;
}

.pulpit-pergamin-napis {
  position: relative;
  z-index: 2;
}

.pulpit-kicker {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--akcent);
  margin-bottom: 0.35rem;
}

.pulpit-naglowek {
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--tekst);
  margin: 0;
}

.pulpit-prawa {
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  background: linear-gradient(135deg, rgba(46, 26, 18, 0.96) 0%, rgba(28, 15, 10, 0.99) 100%);
}

.pulpit-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  font-size: 0.88rem;
  color: var(--stopka-tekst);
  margin-bottom: 0.85rem;
}

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

.pulpit-plakietka:hover {
  background-color: var(--akcent-tekst);
  color: var(--tekst);
}

.pulpit-plakietka svg {
  width: 1rem;
  height: 1rem;
}

.pulpit-tytul {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  margin-bottom: 0.75rem;
  color: var(--akcent-tekst);
}

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

.pulpit-tytul a:hover {
  color: var(--dodatek);
  text-decoration: underline;
}

.pulpit-lead {
  color: var(--stopka-tekst);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.35rem;
  max-width: 68ch;
}

.pulpit-akcje {
  display: flex;
  align-items: center;
}

.pulpit-przycisk {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  background-color: var(--akcent);
  color: var(--akcent-tekst);
  border: 1px solid var(--dodatek);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}

.pulpit-przycisk:hover {
  background-color: var(--dodatek);
  color: var(--tekst);
}

.pulpit-przycisk svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* ==========================================================================
   UKŁAD CZYTELNI: NAJNOWSZE + KOLUMNA ZAKŁADKI
   ========================================================================== */
.uklad-czytelni {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 2rem;
  align-items: start;
}

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

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

.kolumna-zakladki {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  min-width: 0;
}

.notatnik-zakladka {
  position: relative;
  background-color: var(--notatnik);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 31px,
    rgba(110, 38, 32, 0.08) 32px
  );
  border: 2px solid var(--linia);
  border-radius: var(--r);
  padding: 1.75rem 1.35rem 1.5rem;
  box-shadow: var(--cien-karta);
}

.wstazka-zakladki {
  position: absolute;
  top: -6px;
  right: 1.25rem;
  color: var(--akcent);
  display: inline-flex;
}

.wstazka-zakladki svg {
  width: 2rem;
  height: 2.5rem;
}

.notatnik-tytul {
  font-size: 1.35rem;
  margin-bottom: 0.35rem;
  padding-right: 2.25rem;
}

.notatnik-opis {
  font-size: 0.88rem;
  color: var(--t2);
  margin-bottom: 1.1rem;
}

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

.notatnik-pozycja {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--linia);
}

.notatnik-pozycja:first-child {
  border-top: none;
  padding-top: 0;
}

.notatnik-znaczek {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 4px;
  background-color: var(--akcent-jasny);
  border: 1px solid var(--akcent);
  color: var(--akcent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.notatnik-tresc {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.notatnik-link {
  color: var(--tekst);
  font-weight: 600;
  font-size: 0.94rem;
  line-height: 1.38;
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.notatnik-link:hover {
  color: var(--akcent);
  text-decoration: underline;
}

.notatnik-meta {
  font-size: 0.78rem;
  color: var(--t2);
}

.karta-koperta {
  background-color: var(--pergamin);
  border: 2px solid var(--linia);
  border-radius: var(--r);
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--cien-karta);
}

.koperta-ilustracja {
  width: 100%;
  max-width: 140px;
  margin-inline: auto;
}

.koperta-obraz {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.koperta-cialo {
  min-width: 0;
}

.koperta-tytul {
  font-size: 1.2rem;
  margin-bottom: 0.45rem;
}

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

.koperta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 1rem;
  border-radius: var(--r);
  background-color: var(--akcent);
  color: var(--akcent-tekst);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.koperta-link:hover {
  background-color: var(--akcent-cien);
  color: var(--akcent-tekst);
}

.koperta-link svg {
  width: 1rem;
  height: 1rem;
}

/* ==========================================================================
   KARTA WPISU (_karta.html)
   ========================================================================== */
.karta-wpisu {
  background-color: var(--pow);
  border: 1px solid var(--linia);
  border-top: 4px solid var(--kd, var(--akcent));
  border-radius: var(--r);
  box-shadow: var(--cien-karta);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  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-mocny);
}

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

.karta-media picture,
.karta-obraz {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.karta-fiszka-gora {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.9rem 1.1rem 0.35rem;
}

.karta-fiszka-lewa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
}

.karta-plakietka {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.25rem 0.7rem;
  border-radius: 6px;
  background-color: var(--kd, var(--akcent));
  color: var(--akcent-tekst);
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
}

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

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

.karta-plakietka-ikona svg {
  width: 0.9rem;
  height: 0.9rem;
}

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

.karta-kropka {
  color: var(--akcent);
}

.karta-exlibris {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--akcent-jasny);
  border: 1px solid var(--linia);
  color: var(--kd, var(--akcent));
  font-family: var(--f-n);
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.karta-tresc {
  padding: 0.45rem 1.1rem 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.karta-tytul {
  font-size: 1.12rem;
  line-height: 1.32;
  margin-bottom: 0.5rem;
}

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

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

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

.karta-stopka {
  margin-top: auto;
  padding: 0.55rem 1.1rem;
  border-top: 1px solid var(--linia);
  background-color: rgba(239, 224, 203, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.karta-sygnatura,
.karta-sponsor {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.karta-sponsor {
  color: var(--akcent);
}

.karta-czytaj-link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--linia);
  background-color: var(--pow);
  color: var(--akcent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
}

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

.karta-czytaj-link svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* ==========================================================================
   SEKCJA LEKSYKON GATUNKÓW - SZUFLADY KATALOGOWE
   ========================================================================== */
.szuflady-katalogowe {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.szuflada-gatunku {
  background-color: var(--pow);
  border: 2px solid var(--linia);
  border-radius: var(--r);
  box-shadow: var(--cien-karta);
  overflow: hidden;
}

.szuflada-gatunku[open] {
  border-color: var(--akcent);
}

.szuflada-uchwyt {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.35rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background-color: var(--pergamin);
  user-select: none;
}

.szuflada-uchwyt::-webkit-details-marker {
  display: none;
}

.szuflada-uchwyt::after {
  content: "+";
  margin-left: auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--pow);
  border: 1px solid var(--linia);
  color: var(--akcent);
  font-weight: 700;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.szuflada-gatunku[open] .szuflada-uchwyt::after {
  content: "−";
  background-color: var(--akcent);
  color: var(--akcent-tekst);
  border-color: var(--akcent);
}

.szuflada-numer {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 8px;
  background-color: var(--akcent);
  color: var(--akcent-tekst);
  font-family: var(--f-n);
  font-weight: 700;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.szuflada-naglowek {
  min-width: 0;
}

.szuflada-tytul {
  font-size: 1.15rem;
  margin-bottom: 0.15rem;
}

.szuflada-podtytul {
  display: block;
  font-size: 0.85rem;
  color: var(--t2);
}

.szuflada-wnetrze {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--linia);
  background-color: var(--pow);
  color: var(--tekst);
}

.szuflada-wnetrze p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   SEKCJA STÓŁ CZYTELNIKA - DYLEMATY (4 el.) + WIERSZE (4 el.)
   ========================================================================== */
.siatka-dylematow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

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

.dylemat-naglowek {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

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

.dylemat-ikona svg {
  width: 1.2rem;
  height: 1.2rem;
}

.dylemat-etykieta {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--akcent);
}

.dylemat-czas {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--t2);
}

.dylemat-tytul {
  font-size: 1.08rem;
  line-height: 1.32;
  margin-bottom: 0.55rem;
}

.dylemat-tytul a {
  color: var(--tekst);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

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

.dylemat-lead {
  font-size: 0.88rem;
  color: var(--t2);
  margin-bottom: 0;
  flex-grow: 1;
}

/* ==========================================================================
   WIERSZ WPISU (_wiersz.html) & SIATKA WIERSZY
   ========================================================================== */
.siatka-wierszy-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.wiersz-wpisu {
  background-color: var(--pow);
  border: 1px solid var(--linia);
  border-radius: var(--r);
  padding: 0.9rem 1.1rem;
  box-shadow: var(--cien-karta);
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 1.1rem;
  height: 100%;
  min-width: 0;
}

.wiersz-wpisu:hover {
  border-color: var(--kd, var(--akcent));
  box-shadow: var(--cien-mocny);
}

.wiersz-media {
  width: 120px;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--r) - 4px);
  overflow: hidden;
  background-color: var(--akcent-jasny);
  display: block;
}

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

.wiersz-pieczęc,
.wiersz-pieczec {
  width: 120px;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--r) - 4px);
  background-color: var(--pergamin);
  border: 1px solid var(--linia);
  color: var(--kd, var(--akcent));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-decoration: none;
}

.wiersz-pieczęc-ikona svg,
.wiersz-pieczec-ikona svg {
  width: 1.5rem;
  height: 1.5rem;
}

.wiersz-pieczęc-litera,
.wiersz-pieczec-litera {
  font-family: var(--f-n);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--tekst);
}

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

.wiersz-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--t2);
  margin-bottom: 0.35rem;
}

.wiersz-plakietka {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.15rem 0.6rem;
  border-radius: 6px;
  background-color: var(--kd, var(--akcent));
  color: var(--akcent-tekst);
  font-weight: 700;
  font-size: 0.74rem;
  text-decoration: none;
}

.wiersz-plakietka:hover {
  background-color: var(--tekst);
  color: var(--akcent-tekst);
}

.wiersz-sponsor {
  color: var(--akcent);
  font-weight: 700;
}

.wiersz-tytul {
  font-size: 1.06rem;
  line-height: 1.3;
  margin-bottom: 0.3rem;
}

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

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

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

.wiersz-strzalka {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--linia);
  background-color: var(--tlo);
  color: var(--akcent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
}

.wiersz-strzalka:hover {
  background-color: var(--akcent);
  color: var(--akcent-tekst);
  border-color: var(--akcent);
}

.wiersz-strzalka svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* ==========================================================================
   SEKCJA WYBIERZ SWÓJ TOM (5 działów: 2 wielkie tomy + 3 małe tomy)
   ========================================================================== */
.sekcja-wybierz-tom {
  padding-block: 3.5rem;
  background-color: var(--stopka);
  color: var(--akcent-tekst);
  border-top: 3px solid var(--dodatek);
}

.naglowek-tomow {
  margin-bottom: 2rem;
}

.tytul-tomow {
  color: var(--akcent-tekst);
  font-size: clamp(1.65rem, 2.6vw, 2.25rem);
  margin-bottom: 0.35rem;
}

.opis-tomow {
  color: var(--stopka-tekst);
  font-size: 1rem;
  margin: 0;
}

.polka-wszystkich-dzialow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.35rem;
  align-items: stretch;
}

.karta-wielki-tom {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
  gap: 1.35rem;
  padding: 1.5rem;
  border-radius: var(--r);
  border: 2px solid rgba(200, 150, 72, 0.55);
  background-color: var(--kd, var(--akcent));
  color: var(--akcent-tekst);
  text-decoration: none;
  box-shadow: var(--cien-mocny);
  height: 100%;
  min-width: 0;
}

.tom-zielony {
  background: linear-gradient(135deg, #2e4a33 0%, #1d3121 100%);
}

.tom-bordowy {
  background: linear-gradient(135deg, #6e2620 0%, #461612 100%);
}

.karta-wielki-tom:hover {
  transform: translateY(-3px);
  border-color: var(--akcent-tekst);
  color: var(--akcent-tekst);
}

.tom-oprawa-grafika {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 249, 240, 0.25);
}

.tom-oprawa-grafika picture,
.tom-el-obraz {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.tom-oprawa-tresc {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tom-kicker {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--akcent-jasny);
  margin-bottom: 0.25rem;
}

.tom-nazwa {
  color: var(--akcent-tekst);
  font-size: 1.6rem;
  margin-bottom: 0.45rem;
}

.tom-opis {
  color: var(--stopka-tekst);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.tom-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--akcent-jasny);
}

.tom-cta svg {
  width: 1rem;
  height: 1rem;
}

.karta-maly-tom {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem 1.35rem;
  border-radius: var(--r);
  background-color: rgba(255, 253, 249, 0.07);
  border: 1px solid rgba(220, 199, 174, 0.3);
  border-left: 4px solid var(--kd, var(--dodatek));
  color: var(--akcent-tekst);
  text-decoration: none;
  height: 100%;
  min-width: 0;
  min-height: 44px;
}

.karta-maly-tom:hover {
  background-color: rgba(255, 253, 249, 0.14);
  border-color: var(--dodatek);
  color: var(--akcent-tekst);
}

.maly-tom-gora {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
}

.maly-tom-ikona {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  background-color: var(--kd, var(--akcent));
  color: var(--akcent-tekst);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.maly-tom-ikona svg {
  width: 1.15rem;
  height: 1.15rem;
}

.maly-tom-nazwa {
  color: var(--akcent-tekst);
  font-size: 1.15rem;
  margin: 0;
}

.maly-tom-opis {
  color: var(--stopka-tekst);
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0;
}

/* ==========================================================================
   OKRUCHY (_okruchy.html)
   ========================================================================== */
.okruchy {
  padding-block: 0.75rem;
  font-size: 0.86rem;
  color: var(--t2);
  min-width: 0;
}

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

.okruchy li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

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

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

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

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

/* ==========================================================================
   STOPKA (_stopka.html)
   ========================================================================== */
.stopka-strony {
  background-color: var(--stopka);
  color: var(--stopka-tekst);
  border-top: 2px solid rgba(200, 150, 72, 0.35);
  margin-top: auto;
}

.stopka-ozdoba {
  height: 6px;
  background: linear-gradient(90deg, var(--kd-ksiazki), var(--akcent), var(--dodatek), var(--kd-zdrowie-i-uroda), var(--kd-praca-i-finanse));
}

.stopka-wnetrze {
  max-width: var(--szer-kontener);
  margin-inline: auto;
  padding: 3rem 1.5rem 2.25rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
}

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

.stopka-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 0.5rem;
}

.stopka-el-obraz {
  aspect-ratio: 11 / 3;
  height: 36px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

.stopka-slogan {
  font-family: var(--f-n);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--akcent-jasny);
  margin-bottom: 0.5rem;
}

.stopka-opis {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--stopka-tekst);
  margin: 0;
}

.stopka-naglowek {
  color: var(--akcent-tekst);
  font-size: 1.08rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(220, 199, 174, 0.22);
}

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

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

.stopka-lista a:hover {
  color: var(--dodatek);
  text-decoration: underline;
}

.stopka-ikona {
  display: inline-flex;
  color: var(--dodatek);
}

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

.stopka-dol {
  border-top: 1px solid rgba(220, 199, 174, 0.16);
  background-color: rgba(0, 0, 0, 0.22);
}

.stopka-dol-wnetrze {
  max-width: var(--szer-kontener);
  margin-inline: auto;
  padding: 1.15rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: var(--linia);
}

.stopka-prawa,
.stopka-disclaimer {
  margin: 0;
}

/* ==========================================================================
   CZĘŚĆ 3: STRONA DZIAŁU (dz-*)
   ========================================================================== */
.dz-strona {
  padding-bottom: 3.5rem;
}

.dz-hero {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: center;
  background-color: var(--stopka);
  color: var(--akcent-tekst);
  border-bottom: 3px solid var(--kd, var(--akcent));
  overflow: hidden;
}

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

.dz-hero-tlo picture,
.dz-hero-obraz {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.dz-hero-cien {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(24, 13, 8, 0.94) 0%, rgba(34, 19, 13, 0.82) 60%, rgba(34, 19, 13, 0.45) 100%);
}

.dz-hero-wnetrze {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--szer-kontener);
  margin-inline: auto;
  padding: 2.25rem 1.5rem 2.5rem;
}

.dz-hero .okruchy,
.dz-hero .okruchy a,
.dz-hero .okruchy [aria-current="page"] {
  color: var(--stopka-tekst);
}

.dz-naglowek {
  max-width: 760px;
}

.dz-wiersz-tytulu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 0.75rem;
}

.dz-ikona {
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  background-color: var(--kd, var(--akcent));
  color: var(--akcent-tekst);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.dz-kicker {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--akcent-jasny);
  margin-bottom: 0.25rem;
}

.dz-tytul {
  color: var(--akcent-tekst);
  font-size: clamp(2rem, 3.5vw, 2.85rem);
  margin: 0;
}

.dz-licznik,
.dz-plakietka {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background-color: rgba(255, 249, 240, 0.16);
  border: 1px solid rgba(255, 249, 240, 0.35);
  color: var(--akcent-tekst);
  font-size: 0.82rem;
  font-weight: 600;
}

.dz-podtytul {
  color: var(--akcent-jasny);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
}

.dz-opis {
  color: var(--stopka-tekst);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

.dz-pasek-tematow,
.dz-filtry {
  background-color: var(--pergamin);
  border-bottom: 1px solid var(--linia);
  padding-block: 0.85rem;
}

.dz-tematy-lista {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dz-pastylka,
.dz-filtr {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background-color: var(--pow);
  color: var(--tekst);
  border: 1px solid var(--linia);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}

.dz-pastylka:hover,
.dz-filtr:hover {
  border-color: var(--kd, var(--akcent));
  color: var(--akcent);
}

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

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

.dz-glowna,
.dz-katalog {
  min-width: 0;
}

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

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

.dz-karta-tematu {
  background-color: var(--pow);
  border: 1px solid var(--linia);
  border-top: 3px solid var(--kd, var(--akcent));
  border-radius: var(--r);
  padding: 1.25rem;
  box-shadow: var(--cien-karta);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  text-decoration: none;
  color: var(--tekst);
}

.dz-karta-tematu:hover {
  border-color: var(--kd, var(--akcent));
  box-shadow: var(--cien-mocny);
}

.dz-sekcja {
  padding-block: 2.5rem;
  border-top: 1px solid var(--linia);
}

.dz-pusty {
  background-color: var(--pow);
  border: 2px dashed var(--linia);
  border-radius: var(--r);
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.dz-paginacja,
.paginacja {
  margin-top: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

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

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

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

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

/* ==========================================================================
   CZĘŚĆ 3: STRONA WPISU (wp-*)
   ========================================================================== */
.wp-strona {
  padding-bottom: 3.5rem;
}

.wp-naglowek {
  padding: 1.5rem 0 2rem;
  border-bottom: 1px solid var(--linia);
  background-color: var(--pow);
}

.wp-gora {
  max-width: 860px;
}

.wp-plakietka,
.wp-kategoria {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.3rem 0.85rem;
  border-radius: 8px;
  background-color: var(--kd, var(--akcent));
  color: var(--akcent-tekst);
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  margin-bottom: 0.85rem;
}

.wp-plakietka:hover,
.wp-kategoria:hover {
  background-color: var(--tekst);
  color: var(--akcent-tekst);
}

.wp-tytul {
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
  line-height: 1.18;
  margin-bottom: 1rem;
  color: var(--tekst);
}

.wp-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  font-size: 0.88rem;
  color: var(--t2);
  padding-top: 0.75rem;
  border-top: 1px solid var(--linia);
}

.wp-meta-element {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.wp-sponsor {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 6px;
  background-color: var(--akcent-jasny);
  color: var(--akcent);
  font-weight: 700;
  font-size: 0.8rem;
}

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

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

.wp-media {
  margin: 0 0 1.75rem;
  border-radius: var(--r);
  overflow: hidden;
  border: 2px solid var(--linia);
  background-color: var(--akcent-jasny);
  box-shadow: var(--cien-karta);
}

.wp-media picture,
.wp-hero-obraz,
.wp-obraz {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.wp-podpis-obrazu {
  padding: 0.65rem 1rem;
  font-size: 0.82rem;
  color: var(--t2);
  background-color: var(--pow);
  border-top: 1px solid var(--linia);
}

.wp-lead,
.wp-wstep-ramka {
  background-color: var(--pergamin);
  border: 1px solid var(--linia);
  border-left: 4px solid var(--kd, var(--akcent));
  border-radius: var(--r);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
  font-size: 1.08rem;
  line-height: 1.65;
  font-weight: 500;
  color: var(--tekst);
}

.wp-spis-mobilny,
.wp-spis {
  background-color: var(--pow);
  border: 1px solid var(--linia);
  border-radius: var(--r);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
}

.wp-tresc {
  background-color: var(--pow);
  border: 1px solid var(--linia);
  border-radius: var(--r);
  padding: 2.25rem;
  box-shadow: var(--cien-karta);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--tekst);
  min-width: 0;
}

.wp-tresc > *:first-child {
  margin-top: 0;
}

.wp-tresc > *:last-child {
  margin-bottom: 0;
}

.wp-tresc h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  margin-top: 2.25rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--linia);
  scroll-margin-top: 1.5rem;
}

.wp-tresc h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  margin-top: 1.75rem;
  margin-bottom: 0.65rem;
  scroll-margin-top: 1.5rem;
}

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

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

.wp-tresc li {
  margin-bottom: 0.45rem;
}

.wp-tresc blockquote,
.wp-cytat,
.wp-wskazowka {
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem;
  background-color: var(--pergamin);
  border: 1px solid var(--linia);
  border-left: 4px solid var(--akcent);
  border-radius: var(--r);
  color: var(--tekst);
}

.wp-tresc img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--r) - 2px);
  margin-block: 1.5rem;
}

.wp-tabela-opakowanie {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: 1.5rem;
  border: 1px solid var(--linia);
  border-radius: var(--r);
}

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

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

.wp-tresc th,
th {
  background-color: var(--pergamin);
  font-family: var(--f-n);
  font-weight: 700;
  color: var(--tekst);
}

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

.wp-sasiedni-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.15rem 1.35rem;
  min-height: 44px;
  background-color: var(--pow);
  border: 1px solid var(--linia);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--tekst);
  box-shadow: var(--cien-karta);
}

.wp-sasiedni-link:hover {
  border-color: var(--akcent);
  box-shadow: var(--cien-mocny);
}

.wp-sasiedni-kierunek {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--akcent);
  margin-bottom: 0.25rem;
}

.wp-sasiedni-tytul {
  font-family: var(--f-n);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--tekst);
}

.wp-powiazane,
.wp-z-dzialu {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--linia);
}

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

/* ==========================================================================
   CZĘŚĆ 3: KOLUMNA BOCZNA PRZYKLEJANA (bok-*)
   ========================================================================== */
.bok-kolumna,
.bok-panel {
  min-width: 0;
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bok-przyklejony {
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bok-karta,
.bok-fiszka,
.bok-spis,
.bok-warto,
.bok-dzialy,
.bok-kontakt {
  background-color: var(--pow);
  border: 1px solid var(--linia);
  border-top: 4px solid var(--kd, var(--akcent));
  border-radius: var(--r);
  padding: 1.35rem;
  box-shadow: var(--cien-karta);
  min-width: 0;
}

.bok-tytul,
.bok-fiszka-tytul,
.bok-spis-tytul {
  font-size: 1.2rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--linia);
}

.bok-fiszka-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.88rem;
}

.bok-fiszka-wiersz {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed var(--linia);
}

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

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

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

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

.bok-spis-link,
.bok-link,
.bok-dzial-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  color: var(--tekst);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
}

.bok-spis-link:hover,
.bok-link:hover,
.bok-dzial-link:hover,
.bok-spis-aktywny {
  background-color: var(--pergamin);
  color: var(--akcent);
}

.bok-przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background-color: var(--akcent);
  color: var(--akcent-tekst);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

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

/* ==========================================================================
   SYMETRIA SIATEK WG LICZBY ELEMENTÓW (9 -> 3/1, 8 -> 4/2/1, 6 -> 3/2/1)
   ========================================================================== */
.siatka-9,
.dz-siatka-9,
.siatka-kart-3:has(> :nth-child(9):last-child),
.dz-siatka:has(> :nth-child(9):last-child),
.dz-siatka-kart:has(> :nth-child(9):last-child) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
  align-items: stretch;
}

.siatka-8,
.dz-siatka-8,
.siatka-kart-4,
.siatka-kart-3:has(> :nth-child(8):last-child),
.dz-siatka:has(> :nth-child(8):last-child),
.dz-siatka-kart:has(> :nth-child(8):last-child) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.35rem;
  align-items: stretch;
}

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

/* ==========================================================================
   RESPONSYWNOŚĆ - 1024px (Tablet poziomo / mały laptop)
   ========================================================================== */
@media (max-width: 1180px) {
  .siatka-nastrojow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .kolumna-zakladki,
  .bok-kolumna,
  .bok-panel,
  .bok-przyklejony {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

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

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

  .siatka-8,
  .dz-siatka-8,
  .siatka-kart-4,
  .siatka-kart-3:has(> :nth-child(8):last-child),
  .dz-siatka:has(> :nth-child(8):last-child),
  .dz-siatka-kart:has(> :nth-child(8):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   RESPONSYWNOŚĆ - 768px (Tablet pionowo)
   ========================================================================== */
@media (max-width: 900px) {
  .pulpit-polecamy {
    grid-template-columns: 1fr;
  }

  .pulpit-lewa {
    border-right: none;
    border-bottom: 2px solid var(--linia);
  }

  .siatka-nastrojow,
  .siatka-kart-3,
  .siatka-6,
  .dz-siatka-6,
  .dz-siatka,
  .dz-siatka-kart,
  .dz-tematy-siatka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Listy 9 i 3 elementów przechodzą od razu na 1 kolumnę, aby uniknąć pustego pola */
  .siatka-9,
  .dz-siatka-9,
  .wp-powiazane-siatka,
  .siatka-kart-3:has(> :nth-child(9):last-child),
  .dz-siatka:has(> :nth-child(9):last-child),
  .dz-siatka-kart:has(> :nth-child(9):last-child),
  .siatka-kart-3:has(> :nth-child(3):last-child),
  .dz-siatka:has(> :nth-child(3):last-child),
  .wp-powiazane-siatka:has(> :nth-child(3):last-child) {
    grid-template-columns: 1fr;
  }

  .siatka-wierszy-2 {
    grid-template-columns: 1fr;
  }

  .polka-wszystkich-dzialow {
    grid-template-columns: 1fr;
  }

  .karta-wielki-tom,
  .karta-maly-tom {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   REGUŁY DLA TELEFONU (390px) - NA KOŃCU PLIKU
   ========================================================================== */
@media (max-width: 600px) {
  .kontener,
  .naglowek-wnetrze,
  .hero-wnetrze,
  .dz-hero-wnetrze,
  .stopka-wnetrze,
  .stopka-dol-wnetrze {
    padding-inline: 1rem;
  }

  .hero-czytelnia {
    min-height: 420px;
  }

  .hero-wnetrze {
    padding-block: 2.25rem;
  }

  .hero-drogowskazy {
    display: grid;
    grid-template-columns: 1fr;
  }

  .pulpit-prawa,
  .wp-tresc {
    padding: 1.35rem 1.15rem;
  }

  .wiersz-wpisu {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .wiersz-media,
  .wiersz-pieczęc,
  .wiersz-pieczec {
    width: 100%;
  }

  .karta-wielki-tom {
    grid-template-columns: 1fr;
  }

  .siatka-nastrojow,
  .siatka-kart-3,
  .siatka-6,
  .dz-siatka-6,
  .siatka-8,
  .dz-siatka-8,
  .siatka-kart-4,
  .siatka-9,
  .dz-siatka-9,
  .siatka-dylematow,
  .siatka-wierszy-2,
  .kolumna-zakladki,
  .polka-wszystkich-dzialow,
  .stopka-wnetrze,
  .dz-siatka,
  .dz-siatka-kart,
  .dz-tematy-siatka,
  .wp-nawigacja-sasiednie,
  .wp-sasiednie,
  .wp-powiazane-siatka,
  .bok-kolumna,
  .bok-panel,
  .bok-przyklejony,
  .siatka-kart-3:has(> :nth-child(9):last-child),
  .siatka-kart-3:has(> :nth-child(8):last-child),
  .siatka-kart-3:has(> :nth-child(3):last-child),
  .dz-siatka:has(> :nth-child(9):last-child),
  .dz-siatka:has(> :nth-child(8):last-child),
  .dz-siatka:has(> :nth-child(3):last-child) {
    grid-template-columns: 1fr;
  }
}

@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;
    scroll-behavior: auto !important;
  }

  .witraz-nastroju:hover,
  .karta-wpisu:hover,
  .karta-wielki-tom:hover {
    transform: none;
  }
}

/* Układ działu i wpisu: przyklejona kolumna boczna i pełna symetria */
.dz-strona,
.wp-strona {
  padding-bottom: 4rem;
}

.wp-kontener,
.dz-uklad,
.dz-sekcja {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.dz-hero {
  position: relative;
  max-width: 1240px;
  margin: 1.5rem auto 2.5rem;
  border-radius: 16px;
  overflow: hidden;
  background: #22130d;
  color: #fff9f0;
  border: 1px solid var(--linia, #dcc7ae);
}

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

.dz-hero-obraz {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.42;
}

.dz-hero-cien {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(34, 19, 13, 0.94) 0%, rgba(34, 19, 13, 0.78) 55%, rgba(34, 19, 13, 0.35) 100%);
}

.dz-hero-wnetrze {
  position: relative;
  z-index: 1;
  padding: clamp(1.75rem, 4vw, 3rem);
  max-width: 780px;
}

.dz-filtry {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.dz-pastylka {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.48rem 1rem;
  border-radius: 999px;
  background: rgba(255, 249, 240, 0.12);
  color: #fff9f0;
  border: 1px solid rgba(239, 224, 203, 0.28);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}

.dz-pastylka:hover,
.dz-pastylka-aktywna {
  background: var(--kd, #6e2620);
  border-color: var(--kd, #6e2620);
  color: #fff9f0;
}

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

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

.dz-lista-wierszy {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  align-items: stretch;
}

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

.bok-kolumna {
  position: sticky;
  top: 96px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bok-przyklejony {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bok-panel {
  background: var(--powierzchnia, #fffdf9);
  border: 1px solid var(--linia, #dcc7ae);
  border-radius: 14px;
  padding: 1.35rem;
  box-shadow: 0 4px 16px rgba(36, 21, 14, 0.04);
}

.bok-tytul,
.bok-fiszka-tytul {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--tekst, #24150e);
  margin: 0 0 0.85rem;
}

.bok-opis {
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--tekst_drugorzedny, #5e4638);
  margin: 0 0 1rem;
}

.bok-el-ramka {
  display: flex;
  justify-content: center;
  margin-bottom: 0.9rem;
}

.bok-el-obraz-05 {
  width: 210px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 785 / 458;
  object-fit: contain;
}

.bok-el-obraz-04,
.blad-el-koperta {
  width: 145px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 579 / 472;
  object-fit: contain;
}

.bok-fiszka-gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed var(--linia, #dcc7ae);
}

.bok-fiszka-gora .bok-fiszka-tytul {
  margin: 0;
}

.bok-fiszka-znak svg {
  width: 24px;
  height: 24px;
  color: var(--kd, #6e2620);
}

/* Symetryczna siatka pól fiszki dla 2, 3 i 4 elementów */
.bok-fiszka-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
  padding: 0;
}

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

.bok-fiszka-lista:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bok-fiszka-lista:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bok-fiszka-lista:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bok-fiszka-wiersz {
  background: var(--tlo, #f6efe5);
  border: 1px solid var(--linia, #dcc7ae);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.bok-fiszka-klucz {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tekst_drugorzedny, #5e4638);
}

.bok-fiszka-wartosc {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--tekst, #24150e);
}

.bok-fiszka-wartosc a {
  color: var(--kd, #6e2620);
  text-decoration: none;
}

.bok-fiszka-dopisek {
  margin: 0.75rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--linia, #dcc7ae);
  font-size: 0.85rem;
  color: var(--tekst_drugorzedny, #5e4638);
}

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

.bok-dzial-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  background: var(--tlo, #f6efe5);
  border: 1px solid var(--linia, #dcc7ae);
  color: var(--tekst, #24150e);
  text-decoration: none;
  font-weight: 600;
}

.bok-dzial-link:hover,
.bok-dzial-aktywny {
  border-color: var(--kd, #6e2620);
  background: var(--akcent_jasny, #efe0cb);
}

.bok-dzial-ikona {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--kd, #6e2620);
  color: #fff9f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.bok-dzial-tekst {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.bok-dzial-opis {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--tekst_drugorzedny, #5e4638);
}

.bok-przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.68rem 1.1rem;
  border-radius: 10px;
  background: var(--kd, var(--akcent, #6e2620));
  color: #fff9f0;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border: 1px solid transparent;
}

.bok-przycisk-jasny {
  background: var(--tlo, #f6efe5);
  color: var(--tekst, #24150e);
  border-color: var(--linia, #dcc7ae);
}

/* Nagłówek wpisu bez zdjęcia - karta exlibris */
.wp-artykul {
  background: var(--powierzchnia, #fffdf9);
  border: 1px solid var(--linia, #dcc7ae);
  border-radius: 16px;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}

.wp-naglowek-exlibris {
  background: linear-gradient(180deg, #faf3e8 0%, #fffdf9 100%);
  border: 1px solid var(--linia, #dcc7ae);
  border-left: 5px solid var(--kd, #6e2620);
  border-radius: 12px;
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 1.75rem;
}

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

.wp-gora-lewa {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.wp-exlibris-znak {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--linia, #dcc7ae);
  background: var(--powierzchnia, #fffdf9);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tekst_drugorzedny, #5e4638);
}

.wp-exlibris-znak svg {
  width: 16px;
  height: 16px;
  color: var(--kd, #6e2620);
}

.wp-exlibris-stopka {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.15rem;
  color: var(--dodatek, #c89648);
}

.wp-exlibris-linia {
  flex: 1;
  height: 1px;
  background: var(--linia, #dcc7ae);
}

.wp-exlibris-ornament svg {
  width: 18px;
  height: 18px;
}

/* Zdjęcie wpisu sponsorowanego wyrównane do marginesów tekstu */
.wp-media {
  width: 100%;
  margin: 0 0 1.75rem 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--linia, #dcc7ae);
}

.wp-obraz {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
}

.wp-wstep-ramka {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  margin: 0 0 1.75rem;
  background: var(--tlo, #f6efe5);
  border: 1px solid var(--linia, #dcc7ae);
  border-left: 4px solid var(--dodatek, #c89648);
  border-radius: 12px;
}

.wp-wstep-ikona {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--akcent_jasny, #efe0cb);
  color: var(--kd, #6e2620);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.wp-wstep-ramka .wp-lead {
  margin: 0;
}

.wp-sekcja-naglowek {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
}

.wp-sekcja-nr {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--kd, #6e2620);
  font-family: "Figtree", sans-serif;
}

.ramka-rada {
  background: #fdf6e9;
  border: 1px solid var(--linia, #dcc7ae);
  border-left: 4px solid var(--kd, #6e2620);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}

.wp-stopka-artykulu {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linia, #dcc7ae);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.wp-stopka-autor {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: 540px;
}

.wp-stopka-Autor p,
.wp-stopka-autor p {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
  color: var(--tekst_drugorzedny, #5e4638);
}

.wp-stopka-pieczęc {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--akcent_jasny, #efe0cb);
  color: var(--kd, #6e2620);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wp-stopka-pieczęc svg {
  width: 22px;
  height: 22px;
}

.wp-stopka-artykulu .bok-przycisk {
  width: auto;
  margin-top: 0;
}

/* Sąsiednie artykuły: brak pustego pola przy 1 odnośniku */
.wp-sasiednie {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linia, #dcc7ae);
}

.wp-podsekcja-tytul {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.25rem;
  margin: 0 0 1rem;
}

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

.wp-nawigacja-sasiednie:has(> :only-child) {
  grid-template-columns: 1fr;
}

.wp-sasiedni-link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  background: var(--tlo, #f6efe5);
  border: 1px solid var(--linia, #dcc7ae);
  text-decoration: none;
  color: var(--tekst, #24150e);
}

.wp-sasiedni-prawy {
  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;
  text-transform: uppercase;
  color: var(--kd, #6e2620);
}

.wp-sasiedni-kierunek svg {
  width: 15px;
  height: 15px;
}

.wp-sasiedni-tytul {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 1.02rem;
}

/* Siatki symetryczne na każdej szerokości */
.dz-tematy-siatka,
.dz-tomy-siatka,
.wp-powiazane-siatka,
.red-dzialy-siatka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.dz-tematy-siatka > :last-child:nth-child(odd),
.wp-powiazane-siatka > :last-child:nth-child(odd),
.red-dzialy-siatka > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.dz-karta-tematu,
.dz-tom-karta {
  background: var(--powierzchnia, #fffdf9);
  border: 1px solid var(--linia, #dcc7ae);
  border-radius: 14px;
  padding: 1.5rem;
}

.dz-temat-gora {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.dz-temat-ikona {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--akcent_jasny, #efe0cb);
  color: var(--kd, #6e2620);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.dz-temat-tytul,
.dz-tom-tytul {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.22rem;
  margin: 0;
}

.dz-tematy-lista {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.dz-tematy-lista a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--tekst, #24150e);
  font-weight: 500;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  background: var(--tlo, #f6efe5);
}

.dz-tematy-lista svg {
  width: 15px;
  height: 15px;
  color: var(--kd, #6e2620);
  flex-shrink: 0;
}

.dz-tom-karta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.dz-tom-obraz {
  width: 210px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: contain;
}

.dz-tom-tresc .bok-przycisk {
  width: auto;
}

/* Paginacja i strony pomocnicze */
.dz-paginacja {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}

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

.dz-pag-nr,
.dz-pag-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 40px;
  height: 40px;
  padding: 0 0.8rem;
  border-radius: 10px;
  background: var(--powierzchnia, #fffdf9);
  border: 1px solid var(--linia, #dcc7ae);
  color: var(--tekst, #24150e);
  font-weight: 600;
  text-decoration: none;
}

.dz-pag-aktywna {
  background: var(--kd, #6e2620);
  border-color: var(--kd, #6e2620);
  color: #fff9f0;
}

.blad-hero {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

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

.blad-akcje .bok-przycisk {
  width: auto;
  margin-top: 0;
}

@media (max-width: 960px) {
  .dz-uklad,
  .wp-uklad {
    grid-template-columns: 1fr;
  }
  .bok-kolumna,
  .bok-przyklejony {
    position: static;
  }
}

@media (max-width: 640px) {
  .dz-tematy-siatka,
  .dz-tomy-siatka,
  .wp-powiazane-siatka,
  .red-dzialy-siatka,
  .wp-nawigacja-sasiednie,
  .bok-fiszka-lista,
  .bok-fiszka-lista:has(> :nth-child(3):last-child) {
    grid-template-columns: 1fr;
  }
  .dz-tom-karta {
    flex-direction: column;
    align-items: flex-start;
  }
}

.dz-filtry {
  background-color: transparent !important;
  border-bottom: none !important;
  padding-block: 0 !important;
}

.dz-hero .dz-pastylka {
  background-color: #1a0e09 !important;
  color: #fff9f0 !important;
  border: 1px solid #dcc7ae !important;
}

.dz-hero .dz-pastylka:hover,
.dz-hero .dz-pastylka-aktywna {
  background-color: var(--kd, #2e4a33) !important;
  color: #fff9f0 !important;
  border-color: #fff9f0 !important;
}

.dz-paginacja .dz-pastylka {
  background-color: #fffdf9 !important;
  color: #24150e !important;
  border: 1px solid #dcc7ae !important;
}

.dz-paginacja .dz-pastylka:hover,
.dz-paginacja .dz-pastylka-aktywna,
.dz-paginacja [aria-current="page"] {
  background-color: #6e2620 !important;
  color: #fff9f0 !important;
  border-color: #6e2620 !important;
}

.dz-hero-tlo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto !important;
  width: 540px !important;
  max-width: 100%;
  max-height: 360px;
}

.dz-hero-tlo picture,
.dz-hero-obraz {
  width: 100%;
  height: 100%;
  max-width: 540px;
  max-height: 360px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.dz-hero-cien {
  background: linear-gradient(90deg, #22130d 0%, rgba(34, 19, 13, 0.88) 45%, rgba(34, 19, 13, 0.3) 100%) !important;
}

.dz-temat-karta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
}

.dz-temat-opis {
  margin: 0;
  color: var(--t2, #5e4638);
  font-size: 0.94rem;
  line-height: 1.55;
}

.dz-temat-przejdz {
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--linia, #dcc7ae);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--kd, #6e2620);
  text-decoration: none;
}

.dz-temat-przejdz:hover {
  text-decoration: underline;
}

.wp-sasiednie {
  display: block !important;
}

.wp-nawigacja-sasiednie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  width: 100%;
}

.wp-sasiedni-prawy {
  text-align: left !important;
  align-items: flex-start !important;
}

.bok-fiszka-lista,
.bok-fiszka-lista:has(> :nth-child(2):last-child),
.bok-fiszka-lista:has(> :nth-child(3):last-child),
.bok-fiszka-lista:has(> :nth-child(4):last-child) {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem !important;
}

.bok-fiszka-wiersz {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
}

.indeks-leksykonu,
.regal-tematyczny {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.haslo-slownikowe,
.tomik-polki {
  background-color: var(--pow, #fffdf9);
  border: 1px solid var(--linia, #dcc7ae);
  border-left: 4px solid var(--kd, #6e2620);
  border-radius: var(--r, 12px);
  padding: 1.25rem;
  box-shadow: var(--cien-karta);
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.haslo-kolumna-znaku,
.tomik-grzbiet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.5rem;
  border-radius: 8px;
  background-color: var(--pergamin, #efe2ce);
  border: 1px solid var(--linia, #dcc7ae);
  color: var(--kd, #6e2620);
  font-family: var(--f-n);
  font-weight: 700;
}

.haslo-metryka,
.tomik-naglowek {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--t2, #5e4638);
  margin-bottom: 0.35rem;
}

.haslo-dzial,
.tomik-dzial {
  font-weight: 700;
  color: var(--kd, #6e2620);
  text-decoration: none;
}

.haslo-termin,
.tomik-tytul {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

.haslo-termin a,
.tomik-tytul a {
  color: var(--tekst, #24150e);
  text-decoration: none;
}

.haslo-definicja,
.tomik-streszczenie {
  font-size: 0.88rem;
  color: var(--t2, #5e4638);
  margin-bottom: 0.5rem;
}

.tomik-otworz {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--kd, #6e2620);
  text-decoration: none;
}

.wp-powiazane-naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 640px) {
  .hero-czytelnia {
    min-height: 0;
  }
  .hero-tlo {
    max-height: 280px;
  }
  .wp-nawigacja-sasiednie {
    grid-template-columns: 1fr;
  }
  .haslo-slownikowe,
  .tomik-polki {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .bok-kolumna,
  .kolumna-zakladki,
  .bok-przyklejony,
  .bok-panel {
    position: static !important;
    top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem;
  }
}

@media (min-width: 641px) {
  .indeks-leksykonu,
  .regal-tematyczny {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dz-tematy-siatka,
  .red-dzialy-siatka {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.35rem !important;
  }
  .dz-tematy-siatka:has(> :nth-child(3):last-child),
  .red-dzialy-siatka:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .dz-tematy-siatka > :last-child:nth-child(odd),
  .red-dzialy-siatka > :last-child:nth-child(odd) {
    grid-column: auto !important;
  }
}

@media (min-width: 901px) {
  .pulpit-polecamy {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) !important;
  }
  .wp-powiazane-siatka {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.35rem !important;
  }
  .wp-powiazane-siatka:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .wp-powiazane-siatka:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .wp-powiazane-siatka > :last-child:nth-child(odd) {
    grid-column: auto !important;
  }
}

@media (min-width: 961px) {
  .uklad-czytelni,
  .dz-uklad,
  .wp-uklad {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: stretch !important;
  }
  .bok-kolumna {
    position: relative !important;
    top: auto !important;
    align-self: stretch !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 1.5rem !important;
  }
  .bok-przyklejony {
    position: sticky !important;
    top: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  .bok-panel {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }
}

/* Poprawka proporcji i ostrosci el-02 oraz el-03 (3:1) */
.tom-oprawa-grafika {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 3 / 1 !important;
  height: auto !important;
}

.tom-oprawa-grafika picture,
.tom-el-obraz {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 1 !important;
  object-fit: contain !important;
}

/* Poprawka szerokosci wtracen i boksow z linkami wewnatrz tresci artykulu */
.wp-tresc aside,
.wp-sekcja-html aside,
.wp-sekcja-html > div:not(.wp-tabela-opakowanie):not(.ramka-rada):not(:has(p + p)),
.wp-sekcja-html > p[class] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem 0.75rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.wp-tresc aside a,
.wp-sekcja-html aside a,
.wp-sekcja-html > div:not(.wp-tabela-opakowanie):not(.ramka-rada):not(:has(p + p)) a,
.wp-sekcja-html > p[class] a {
  flex: 1 1 28ch !important;
  min-width: 24ch !important;
  max-width: 100% !important;
}

@media (max-width: 640px) {
  .witraz-luk,
  .witraz-luk picture,
  .wej-el-obraz {
    aspect-ratio: 4 / 3 !important;
    max-height: 250px !important;
  }
}

@media (min-width: 961px) {
  .wp-kontener,
  .dz-uklad,
  .dz-sekcja {
    max-width: 1320px !important;
  }

  .dz-uklad,
  .wp-uklad {
    grid-template-columns: minmax(0, 1fr) 380px !important;
    gap: 2.25rem !important;
  }

  .bok-kolumna,
  .bok-przyklejony,
  .bok-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .bok-panel {
    padding: 1.2rem 1.15rem !important;
  }

  .wp-z-dzialu {
    margin-top: 0 !important;
    padding-top: 1.2rem !important;
  }

  .bok-link {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.45rem !important;
    padding: 0.35rem 0.3rem !important;
    width: 100% !important;
  }

  .bok-link-ikona {
    margin-top: 0.18rem;
    flex-shrink: 0;
  }

  .bok-link > span:last-child {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
}

.marka-el-obraz,.stopka-el-obraz{aspect-ratio:1056 / 222 !important;width:auto !important;}
.pulpit-pergamin-ramka picture,.pulpit-pergamin-obraz{width:96px !important;height:auto !important;aspect-ratio:785 / 458 !important;object-fit:contain !important;}
.koperta-ilustracja picture,.koperta-obraz{width:140px !important;max-width:100% !important;height:auto !important;aspect-ratio:579 / 472 !important;object-fit:contain !important;}
.tom-oprawa-grafika{width:160px !important;max-width:160px !important;aspect-ratio:4 / 3 !important;height:auto !important;border-radius:8px !important;overflow:hidden !important;background-color:rgba(0,0,0,0.25) !important;border:1px solid rgba(255,249,240,0.3) !important;flex-shrink:0 !important;}
.tom-oprawa-grafika picture,.tom-el-obraz{width:100% !important;height:100% !important;aspect-ratio:4 / 3 !important;object-fit:cover !important;display:block !important;}
.wp-wstep-ramka{display:flex !important;align-items:flex-start !important;gap:0.9rem !important;padding:1.15rem 1.3rem !important;margin:0 0 1.75rem !important;background:var(--pergamin,#efe2ce) !important;border:1px solid var(--linia,#dcc7ae) !important;border-left:4px solid var(--kd,#6e2620) !important;border-radius:12px !important;}
.wp-wstep-ramka .wp-lead{margin:0 !important;padding:0 !important;border:0 !important;background:transparent !important;border-radius:0 !important;box-shadow:none !important;flex:1 1 0% !important;min-width:0 !important;width:auto !important;max-width:100% !important;}
.wp-sekcja-naglowek{display:flex !important;align-items:baseline !important;gap:0.65rem !important;flex-wrap:nowrap !important;}
.wp-sekcja-nr,.wp-spis-nr{flex:0 0 auto !important;flex-shrink:0 !important;white-space:nowrap !important;word-break:normal !important;overflow-wrap:normal !important;min-width:2.2ch !important;display:inline-block !important;line-height:1.2 !important;}
.wp-sekcja-naglowek>span:last-child{flex:1 1 0% !important;min-width:0 !important;}
.wp-spis-link{display:flex !important;align-items:baseline !important;gap:0.55rem !important;}
.wp-spis-tekst{flex:1 1 0% !important;min-width:0 !important;}
@media (max-width:640px){
.hero-tlo{height:210px !important;max-height:210px !important;}
.siatka-nastrojow{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:0.85rem !important;}
.witraz-luk,.witraz-luk picture,.wej-el-obraz{aspect-ratio:4 / 3 !important;max-height:140px !important;}
.wp-artykul{padding:1.15rem 1rem !important;}
.wp-wstep-ramka{flex-direction:column !important;gap:0.55rem !important;padding:1rem 1.05rem !important;}
.wp-wstep-ramka .wp-lead{width:100% !important;font-size:1rem !important;line-height:1.6 !important;}
}
@media (min-width:641px){
.witraz-luk,.witraz-luk picture,.wej-el-obraz{aspect-ratio:1 / 1 !important;max-height:200px !important;}
}