/* ═══════════════════════════════════════════════════════════════════════
   Zielnik — zioła w magii domowej
   ═══════════════════════════════════════════════════════════════════════
   Paleta: mech i jesień zamiast granatu — ciemna zieleń tła, pergamin tekstu,
   miód jako akcent, rdza dla ostrzeżeń. Sygnatura: karta zielnika = zdjęcie
   + pergaminowa etykieta + lakowa pieczęć bezpieczeństwa. Kolumna 1520 px. */

.tzl-strona {
	--tlo:          #171b14;
	--tlo2:         #1f251b;
	--panel:        rgba( 31, 37, 27, .84 );
	--panel-mocny:  rgba( 24, 29, 21, .94 );
	--pergamin:     #e9e2cf;
	--pergamin2:    #d9d0b8;
	--tekst:        #c7c2ae;
	--tekst-slaby:  #948f7c;
	--tekst-mocny:  #efe9d6;
	--miod:         #d9a441;
	--miod-jasny:   #ecc06b;
	--miod-ciemny:  #b8862f;
	--rdza:         #b5552f;
	--rdza-jasna:   #d97a4f;
	--szalwia:      #8fa37a;
	--mech:         #4f6b3f;
	--mech-jasny:   #6f8a5a;
	--oliwka:       #7a8a52;
	--obrys:        rgba( 217, 164, 65, .3 );
	--obrys-slaby:  rgba( 217, 164, 65, .14 );
	--serif: 'Cormorant Garamond', 'Times New Roman', serif;
	--sans:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
	position: relative; padding: 0 0 50px; color: var( --tekst ); font-family: var( --sans ); font-weight: 300;
	background: radial-gradient( 900px 500px at 15% 0, rgba( 111, 138, 90, .22 ), transparent 70% ), radial-gradient( 800px 600px at 90% 30%, rgba( 181, 85, 47, .12 ), transparent 70% ), radial-gradient( 700px 500px at 50% 100%, rgba( 217, 164, 65, .08 ), transparent 70% ), var( --tlo );
	overflow-x: clip;
}
.tzl-strona *, .tzl-strona *::before, .tzl-strona *::after { box-sizing: border-box; }
body:has( .tzl-strona ) .wp-site-blocks > header, body:has( .tzl-strona ) header.wp-block-template-part, body:has( .tzl-strona ) .wp-site-blocks > footer, body:has( .tzl-strona ) footer.wp-block-template-part, body:has( .tzl-strona ) .wp-block-post-title { display: none !important; }
body:has( .tzl-strona ) .wp-site-blocks, body:has( .tzl-strona ) .wp-block-group, body:has( .tzl-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tzl-strona ) .wp-block-post-content > *, body:has( .tzl-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tzl-strona ) { background: #121510; }
body:has( .tzl-strona ) .wp-block-post-content > .tzl-strona, body:has( .tzl-strona ) .entry-content > .tzl-strona, .tzl-strona { max-width: 1520px !important; margin-left: auto !important; margin-right: auto !important; }

/* ─────────────────────────────  wspólne  ─────────────────────────── */

.tzl-nad { margin: 0 0 12px; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var( --miod-ciemny ); }
.tzl-nad i { font-style: normal; color: var( --szalwia ); margin: 0 10px; }
.tzl-tytul { margin: 0 0 18px; font: 500 clamp( 40px, 4.4vw, 64px ) / 1.06 var( --serif ); letter-spacing: .01em; color: var( --pergamin ); }
.tzl-lead { max-width: 56ch; margin: 0 0 22px; font-size: 15.5px; line-height: 1.7; color: var( --tekst-mocny ); }
.tzl-cta { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; }
.tzl-btn { display: inline-block; height: 46px; padding: 0 26px; border: 1px solid var( --miod-ciemny ); border-radius: 999px; background: linear-gradient( 180deg, rgba( 217, 164, 65, .16 ), rgba( 217, 164, 65, .04 ) ); color: var( --miod-jasny ); font: 400 11.5px/44px var( --sans ); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, box-shadow .2s; }
.tzl-btn:hover { background: rgba( 217, 164, 65, .24 ); box-shadow: 0 0 22px rgba( 217, 164, 65, .18 ); }
.tzl-btn--maly { height: 36px; padding: 0 18px; font-size: 10.5px; line-height: 34px; }
.tzl-btn--pelny { background: linear-gradient( 180deg, #ecc06b, #c8942f ); color: #241a05; border-color: #e6b85a; font-weight: 500; }
.tzl-btn--pelny:hover { background: linear-gradient( 180deg, #f3cc7d, #d9a441 ); }
.tzl-btn--cichy { border-color: var( --obrys-slaby ); background: none; color: var( --tekst ); }
.tzl-strona button:focus-visible, .tzl-strona a:focus-visible, .tzl-strona input:focus-visible { outline: 2px solid var( --miod ); outline-offset: 3px; }
.tzl-sekcja__glowa { max-width: 860px; margin: 0 auto 26px; text-align: center; }
.tzl-sekcja__nad { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 6px; font-size: 12px; letter-spacing: .36em; text-transform: uppercase; color: var( --miod ); }
.tzl-sekcja__nad i { display: block; width: 110px; height: 1px; background: linear-gradient( 90deg, transparent, var( --miod-ciemny ) ); }
.tzl-sekcja__nad i + i { background: linear-gradient( 90deg, var( --miod-ciemny ), transparent ); }
.tzl-sekcja__tytul { margin: 0 0 10px; font: 500 clamp( 30px, 3.1vw, 44px ) var( --serif ); color: var( --pergamin ); }
.tzl-sekcja__lead { max-width: 70ch; margin: 0 auto 8px; font-size: 14.5px; line-height: 1.65; color: var( --tekst ); }
.tzl-zielnik, .tzl-dobor, .tzl-bezp, .tzl-metoda { position: relative; max-width: 1520px; margin: 60px auto 0; padding: 0 60px; }

/* pieczęć lakowa — klasa bezpieczeństwa */
.tzl-piecz { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var( --tekst ); }
.tzl-piecz i, .tzl-piecz:empty { display: inline-block; width: 16px; height: 16px; border-radius: 999px; box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .25 ), 0 1px 3px rgba( 0, 0, 0, .5 ); }
.tzl-piecz--a i, .tzl-piecz--a:empty { background: radial-gradient( circle at 35% 30%, var( --mech-jasny ), var( --mech ) 70% ); }
.tzl-piecz--b i, .tzl-piecz--b:empty { background: radial-gradient( circle at 35% 30%, var( --miod-jasny ), #a8721f 70% ); }
.tzl-piecz--c i, .tzl-piecz--c:empty { background: radial-gradient( circle at 35% 30%, var( --rdza-jasna ), var( --rdza ) 70% ); }
.tzl-piecz--nie i, .tzl-piecz--nie:empty { background: radial-gradient( circle at 35% 30%, #5a4a44, #2a201d 70% ); }
.tzl-piecz--duza:empty { width: 40px; height: 40px; }

/* ─────────────────────────────  nav  ─────────────────────────────── */

.tzl-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1520px; margin: 0 auto; padding: 12px 40px; background: linear-gradient( 180deg, rgba( 23, 27, 20, .97 ), rgba( 23, 27, 20, .75 ) ); border-bottom: 1px solid var( --obrys-slaby ); }
.tzl-nav__marka { display: flex; align-items: center; gap: 12px; color: var( --miod ); text-decoration: none; }
.tzl-nav__marka b { font: 400 28px var( --serif ); color: var( --szalwia ); }
.tzl-nav__marka span { font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; line-height: 1.4; color: var( --miod-ciemny ); }
.tzl-nav__linki { display: flex; gap: 26px; }
.tzl-nav__linki a { color: var( --tekst-mocny ); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; }
.tzl-nav__linki a:hover { color: var( --miod ); }

/* ─────────────────────────────  hero  ────────────────────────────── */

.tzl-strona::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1120px; z-index: 0; pointer-events: none; background: url( gfx/tlo-hero.jpg ) center 30% / cover no-repeat; -webkit-mask-image: linear-gradient( 180deg, #000 0, #000 58%, rgba( 0, 0, 0, .55 ) 78%, transparent 100% ); mask-image: linear-gradient( 180deg, #000 0, #000 58%, rgba( 0, 0, 0, .55 ) 78%, transparent 100% ); }
.tzl-strona::after { content: ''; position: absolute; left: 0; right: 0; top: 560px; height: 560px; z-index: 0; pointer-events: none; background: linear-gradient( 180deg, rgba( 23, 27, 20, 0 ) 0, rgba( 23, 27, 20, .55 ) 45%, var( --tlo ) 100% ); }
.tzl-strona > * { position: relative; z-index: 1; }
.tzl-hero { position: relative; display: grid; grid-template-columns: minmax( 0, 620px ) 1fr; align-items: center; gap: 40px; max-width: 1520px; min-height: 600px; margin: 0 auto; padding: 60px 60px 40px; }
.tzl-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 90deg, rgba( 17, 21, 14, .88 ) 0, rgba( 17, 21, 14, .66 ) 38%, rgba( 17, 21, 14, .1 ) 62%, rgba( 17, 21, 14, 0 ) 100% ); }
.tzl-hero__tekst { text-shadow: 0 2px 18px rgba( 0, 0, 0, .55 ); }
.tzl-nav { background: linear-gradient( 180deg, rgba( 17, 21, 14, .92 ), rgba( 17, 21, 14, .55 ) ); }
.tzl-hero__odznaki { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 0 0 24px; }
.tzl-hero__uwaga { max-width: 560px; margin: 0 0 24px; padding: 12px 16px; border-left: 2px solid var( --rdza ); border-radius: 0 12px 12px 0; background: rgba( 181, 85, 47, .1 ); font-size: 13.5px; line-height: 1.6; color: var( --tekst ); }
.tzl-hero__uwaga b, .tzl-bezp__nota b { color: var( --pergamin ); font-weight: 500; }
.tzl-bezp__nota { background: rgba( 181, 85, 47, .08 ); border-radius: 0 12px 12px 0; font-size: 14px; }
.tzl-dnia-pas { max-width: 1520px; margin: 8px auto 0; padding: 0 60px; }
.tzl-dnia { display: grid; grid-template-columns: 40% minmax( 0, 1fr ); align-items: center; min-height: 300px; border: 1px solid var( --obrys ); border-radius: 22px; background: var( --panel-mocny ); overflow: hidden; isolation: isolate; clip-path: inset( 0 round 22px ); box-shadow: 0 30px 60px rgba( 0, 0, 0, .45 ); }
.tzl-dnia__obraz { position: relative; align-self: stretch; min-height: 300px; margin: 0; padding: 0; border: 0; border-radius: 22px 0 0 22px; background: #0f130d; cursor: pointer; overflow: hidden; clip-path: inset( 0 round 22px 0 0 22px ); -webkit-mask-image: linear-gradient( 90deg, #000 0, #000 62%, transparent 100% ); mask-image: linear-gradient( 90deg, #000 0, #000 62%, transparent 100% ); }
.tzl-dnia__obraz img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; transform: scale( 1.18 ); transition: transform .6s ease; }
.tzl-dnia__obraz:hover img { transform: scale( 1.24 ); }
.tzl-dnia__tekst { display: grid; gap: 10px; justify-items: start; padding: 30px 40px 30px 10px; }
.tzl-dnia__nad { margin: 0; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --miod ); }
.tzl-dnia__nazwa { margin: 0; font: 500 34px/1.1 var( --serif ); color: var( --pergamin ); }
.tzl-dnia__nazwa i { display: block; margin-top: 2px; font: italic 400 15px var( --serif ); color: var( --tekst-slaby ); }
.tzl-dnia__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0; }
.tzl-dnia__slowa { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tzl-dnia__opis { margin: 0; max-width: 70ch; font-size: 14.5px; line-height: 1.7; color: var( --tekst ); }

/* ─────────────────────────────  karta zielnika  ──────────────────── */

.tzl-karta { display: grid; gap: 0; padding: 0; border: 0; background: none; color: var( --tekst ); font: inherit; text-align: left; cursor: pointer; transition: transform .2s; }
.tzl-karta:hover { transform: translateY( -4px ); }
.tzl-karta__obraz { display: block; border-radius: 14px 14px 0 0; overflow: hidden; box-shadow: 0 20px 40px rgba( 0, 0, 0, .45 ); }
.tzl-karta__obraz img { display: block; width: 100%; height: auto; aspect-ratio: 971 / 1619; object-fit: cover; }
.tzl-karta__etykieta { position: relative; display: grid; gap: 3px; padding: 12px 14px 12px; border-radius: 0 0 14px 14px; background: linear-gradient( 180deg, var( --pergamin ), var( --pergamin2 ) ); color: #2b2a22; box-shadow: 0 20px 40px rgba( 0, 0, 0, .45 ); }
.tzl-karta__etykieta::before { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: rgba( 43, 42, 34, .18 ); }
.tzl-karta__etykieta b { font: 500 21px/1.1 var( --serif ); color: #2b2a22; }
.tzl-karta__etykieta i { font: italic 400 13px var( --serif ); color: #5e5b4c; }
.tzl-karta__slowa { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #6f6a54; }
.tzl-karta__etykieta .tzl-piecz { position: absolute; right: 12px; top: 12px; width: 18px; height: 18px; }
.tzl-karta__etykieta .tzl-planeta { position: absolute; right: 14px; bottom: 12px; font: 400 16px var( --serif ); color: #6f6a54; }

/* ─────────────────────────────  filtry + siatka  ─────────────────── */

.tzl-filtry { display: grid; gap: 12px; max-width: 1400px; margin: 0 auto 14px; padding: 20px 28px; border: 1px solid var( --obrys-slaby ); border-radius: 22px; background: var( --panel ); }
.tzl-filtry__rzad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tzl-filtry__etyk { flex: 0 0 120px; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var( --miod-ciemny ); }
.tzl-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border: 1px solid var( --obrys-slaby ); border-radius: 999px; background: rgba( 24, 29, 21, .6 ); color: var( --tekst ); font: 300 12.5px var( --sans ); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.tzl-chip:hover { border-color: var( --miod-ciemny ); }
.tzl-chip.jest-wybrany { border-color: var( --miod ); background: rgba( 217, 164, 65, .14 ); color: var( --miod-jasny ); }
.tzl-chip .tzl-piecz { width: 12px; height: 12px; }
.tzl-licznik { max-width: 1180px; margin: 0 auto 16px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var( --tekst-slaby ); text-align: right; }
/* rzędy planet — każdy rząd to slider: 5 kart w kadrze, strzałki poza obrysem, pasek postępu, przeciąganie */
.tzl-rzedy { display: grid; grid-template-columns: minmax( 0, 1fr ); gap: 34px; max-width: 1400px; margin: 0 auto; --widac: 5; --przerwa: 22px; }
.tzl-rzad, .tzl-rzad__kadr { min-width: 0; }
.tzl-rzad[hidden] { display: none; }
.tzl-rzad__glowa { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.tzl-rzad__glowa i { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var( --obrys ); border-radius: 999px; background: rgba( 217, 164, 65, .08 ); font: 400 22px var( --serif ); font-style: normal; color: var( --miod ); align-self: center; box-shadow: 0 0 18px rgba( 217, 164, 65, .12 ); }
.tzl-rzad__wszystkie { margin-left: 18px; padding: 0; border: 0; background: none; color: var( --miod ); font: 400 11px var( --sans ); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; }
.tzl-rzad__wszystkie:hover { color: var( --miod-jasny ); text-decoration: underline; text-underline-offset: 4px; }
.tzl-rzad__glowa h3 { margin: 0; font: 500 26px var( --serif ); color: var( --pergamin ); }
.tzl-rzad__planeta { display: flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.tzl-rzad__planeta:hover h3 { color: var( --miod-jasny ); }
.tzl-rzad__planeta h3 { transition: color .2s; }
.tzl-pow { padding: 0; border: 0; background: none; color: var( --tekst-mocny ); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: rgba( 217, 164, 65, .45 ); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.tzl-pow:hover { color: var( --miod-jasny ); text-decoration-color: var( --miod ); }
.tzl-pow--nad { color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.tzl-laczyc a { color: var( --miod-jasny ); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba( 217, 164, 65, .45 ); }
.tzl-laczyc a:hover { text-decoration-color: var( --miod ); }
.tzl-rzad__glowa small { margin-left: auto; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tzl-rzad__kadr { position: relative; }
.tzl-rzad__tor { display: flex; contain: inline-size; gap: var( --przerwa ); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; padding: 6px 0 30px; margin: -6px 0 -30px; }
.tzl-rzad__tor::-webkit-scrollbar { display: none; }
.tzl-rzad__tor.jest-ciagniety { cursor: grabbing; scroll-snap-type: none; }
.tzl-rzad__tor .tzl-karta { flex: 0 0 calc( ( 100% - var( --przerwa ) * ( var( --widac ) - 1 ) ) / var( --widac ) ); min-width: 0; scroll-snap-align: start; }
.tzl-karta__obraz, .tzl-karta__obraz img { min-width: 0; max-width: 100%; }
.tzl-rzad__tor .tzl-karta[hidden] { display: none; }
.tzl-rzad__strz { position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -32px; border: 1px solid var( --obrys ); border-radius: 999px; background: rgba( 24, 29, 21, .92 ); color: var( --miod ); font: 400 24px/38px var( --serif ); text-align: center; cursor: pointer; transition: border-color .2s, color .2s, opacity .2s; }
.tzl-rzad__strz:hover { border-color: var( --miod ); color: var( --miod-jasny ); }
.tzl-rzad__strz:disabled { opacity: .25; cursor: default; }
.tzl-rzad__strz--l { left: -52px; }
.tzl-rzad__strz--p { right: -52px; }
.tzl-rzad__stopka { display: flex; align-items: center; gap: 16px; margin: 18px 4px 0; }
.tzl-rzad__pasek { position: relative; flex: 1 1 auto; height: 2px; border-radius: 999px; background: rgba( 217, 164, 65, .14 ); }
.tzl-rzad__pasek i { position: absolute; top: -1px; height: 4px; border-radius: 999px; background: linear-gradient( 90deg, #a8721f, var( --miod ) ); transition: left .18s ease, width .18s ease; }
.tzl-rzad__stopka span { flex: 0 0 auto; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var( --tekst-slaby ); }
@media ( prefers-reduced-motion: reduce ) { .tzl-rzad__pasek i { transition: none; } }
.tzl-pusto { margin: 30px auto 0; text-align: center; color: var( --tekst-slaby ); }

/* ─────────────────────────────  dobór  ───────────────────────────── */

.tzl-form { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap: 12px 18px; align-items: end; max-width: 1000px; margin: 0 auto; padding: 24px 30px 20px; border: 1px solid var( --obrys ); border-radius: 22px; background: var( --panel-mocny ); }
.tzl-pole { position: relative; display: grid; gap: 6px; }
.tzl-pole span { font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var( --miod-ciemny ); }
.tzl-pole input { height: 46px; padding: 0 14px; border: 1px solid var( --obrys ); border-radius: 12px; background: rgba( 18, 21, 16, .8 ); color: var( --tekst-mocny ); font: 400 15px var( --sans ); color-scheme: dark; }
.tzl-podpowiedzi { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin: 6px 0 0; padding: 6px; list-style: none; border: 1px solid var( --obrys ); border-radius: 12px; background: #1b2018; box-shadow: 0 20px 50px rgba( 0, 0, 0, .5 ); }
.tzl-podpowiedzi li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; color: var( --tekst-mocny ); font-size: 14px; cursor: pointer; }
.tzl-podpowiedzi li small { color: var( --tekst-slaby ); font-size: 12px; }
.tzl-podpowiedzi li:hover { background: rgba( 217, 164, 65, .12 ); }
.tzl-form .tzl-btn { height: 46px; line-height: 44px; }
.tzl-form__uwaga { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var( --tekst-slaby ); }
.tzl-blad { grid-column: 1 / -1; margin: 0; color: var( --rdza-jasna ); font-size: 13px; }
.tzl-polki { display: grid; gap: 26px; max-width: 1400px; margin: 30px auto 0; }
.tzl-polka { padding: 22px 26px 24px; border: 1px solid var( --obrys-slaby ); border-radius: 18px; background: var( --panel ); }
.tzl-polka__glowa { display: flex; align-items: baseline; gap: 14px; margin: 0 0 6px; }
.tzl-polka__glowa i { font: 400 26px var( --serif ); color: var( --miod ); font-style: normal; }
.tzl-polka__glowa h3 { margin: 0; font: 500 24px var( --serif ); color: var( --pergamin ); }
.tzl-polka__powod { margin: 0 0 16px; font-size: 13.5px; line-height: 1.6; color: var( --tekst ); }
.tzl-polka__karty { display: grid; grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); gap: 18px; }
.tzl-polka__karty .tzl-karta__etykieta b { font-size: 18px; }
.tzl-rzedy--polka { --widac: 4; --przerwa: 16px; margin: 0; }
.tzl-rzedy--polka .tzl-rzad__strz { width: 34px; height: 34px; margin-top: -30px; font-size: 20px; line-height: 32px; }
.tzl-rzedy--polka .tzl-rzad__strz--l { left: -24px; }
.tzl-rzedy--polka .tzl-rzad__strz--p { right: -24px; }
.tzl-rzedy--polka .tzl-karta__etykieta b { font-size: 18px; }
@media ( max-width: 680px ) { .tzl-rzedy--polka { --widac: 2; } }

/* ─────────────────────────────  bezpieczeństwo + metoda  ─────────── */

.tzl-bezp__siatka, .tzl-metoda__siatka { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 20px; }
.tzl-bezp__siatka { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
.tzl-bezp__karta, .tzl-karta-metody { padding: 24px 24px 22px; border: 1px solid var( --obrys-slaby ); border-radius: 18px; background: var( --panel ); }
.tzl-bezp__karta h3, .tzl-karta-metody h3 { margin: 14px 0 8px; font: 500 22px var( --serif ); color: var( --pergamin ); }
.tzl-karta-metody h3 { margin-top: 6px; }
.tzl-bezp__karta p, .tzl-karta-metody p { margin: 0; font-size: 14px; line-height: 1.7; color: var( --tekst ); }
.tzl-bezp__karta--nie { border-color: rgba( 181, 85, 47, .4 ); }
/* karty otwierają panel informacyjny */
.tzl-bezp__karta[data-panel], .tzl-karta-metody[data-panel] { position: relative; padding-bottom: 46px; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
.tzl-bezp__karta[data-panel]:hover, .tzl-karta-metody[data-panel]:hover, .tzl-bezp__karta[data-panel]:focus-visible, .tzl-karta-metody[data-panel]:focus-visible { border-color: var( --miod ); transform: translateY( -3px ); box-shadow: 0 18px 40px rgba( 0, 0, 0, .35 ); outline: none; }
.tzl-bezp__karta[data-panel]::after, .tzl-karta-metody[data-panel]::after { content: 'Czytaj całość →'; position: absolute; left: 24px; bottom: 18px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var( --miod ); }
/* panel informacyjny — jedna kolumna, dużo tekstu */
.tzl-okno--info .tzl-okno__panel { grid-template-columns: minmax( 0, 1fr ); width: min( 100%, 900px ); padding: 38px 46px 40px; }
.tzl-panel__lead { margin: 0 0 18px; font: 300 17px/1.65 var( --sans ); color: var( --tekst-mocny ); }
.tzl-okno--info .tzl-okno__prawa h4 { margin: 24px 0 10px; padding-top: 16px; border-top: 1px solid var( --obrys-slaby ); font: 500 22px var( --serif ); color: var( --miod-jasny ); }
.tzl-okno--info .tzl-okno__prawa p, .tzl-okno--info .tzl-okno__prawa li { font-size: 14.5px; line-height: 1.75; color: var( --tekst ); }
.tzl-okno--info .tzl-okno__prawa p { margin: 0 0 10px; }
.tzl-okno--info .tzl-okno__prawa ul, .tzl-okno--info .tzl-okno__prawa ol { margin: 0 0 10px; padding-left: 22px; }
.tzl-okno--info .tzl-okno__prawa li { margin: 0 0 6px; }
.tzl-okno--info .tzl-okno__prawa li b, .tzl-okno--info .tzl-okno__prawa p b { color: var( --pergamin ); font-weight: 500; }
.tzl-lista-ziol { display: flex; flex-wrap: wrap; gap: 8px; }
.tzl-lista-ziol button { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 8px; border: 1px solid var( --obrys-slaby ); border-radius: 999px; background: rgba( 24, 29, 21, .6 ); color: var( --tekst-mocny ); font: 400 13px var( --sans ); cursor: pointer; transition: border-color .2s; }
.tzl-lista-ziol button:hover { border-color: var( --miod ); color: var( --miod-jasny ); }
.tzl-lista-ziol .tzl-piecz { width: 12px; height: 12px; }
.tzl-tabela { width: 100%; margin: 0 0 12px; border-collapse: collapse; font-size: 13.5px; line-height: 1.5; }
.tzl-tabela th { padding: 8px 10px; border-bottom: 1px solid var( --obrys ); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var( --miod-ciemny ); text-align: left; font-weight: 400; }
.tzl-tabela td { padding: 9px 10px; border-bottom: 1px solid var( --obrys-slaby ); color: var( --tekst ); vertical-align: top; }
.tzl-tabela td:first-child { color: var( --pergamin ); white-space: nowrap; }
.tzl-tabela td .tzl-pow { color: var( --pergamin ); }
.tzl-tabela__ziola button, .tzl-okno--info .tzl-okno__prawa td a { padding: 0; border: 0; background: none; color: var( --tekst-mocny ); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba( 217, 164, 65, .45 ); }
.tzl-tabela__ziola button:hover, .tzl-okno--info .tzl-okno__prawa td a:hover { color: var( --miod-jasny ); text-decoration-color: var( --miod ); }
.tzl-lista-ziol--pow { margin: 0 0 12px; }
.tzl-rzedy--mini { --widac: 4; --przerwa: 14px; margin: 4px 0 8px; }
.tzl-rzedy--mini .tzl-rzad__strz { width: 34px; height: 34px; margin-top: -30px; font-size: 20px; line-height: 32px; }
.tzl-rzedy--mini .tzl-rzad__strz--l { left: -42px; }
.tzl-rzedy--mini .tzl-rzad__strz--p { right: -42px; }
.tzl-rzedy--mini .tzl-karta__etykieta b { font-size: 17px; }
@media ( max-width: 680px ) { .tzl-rzedy--mini { --widac: 2; } }
.tzl-okno--info .tzl-okno__nad { margin: 0 0 4px; }
.tzl-bezp__nota { max-width: 900px; margin: 22px auto 0; padding: 14px 18px; border-left: 2px solid var( --rdza ); font-size: 13px; line-height: 1.65; color: var( --tekst ); }
.tzl-karta-metody__nad { margin: 0; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var( --miod-ciemny ); }

/* ─────────────────────────────  okno (poza .tzl-strona → własne tokeny)  ── */

.tzl-okno { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px;
	--pergamin: #e9e2cf; --pergamin2: #d9d0b8; --tekst: #c7c2ae; --tekst-slaby: #948f7c; --tekst-mocny: #efe9d6; --miod: #d9a441; --miod-jasny: #ecc06b; --miod-ciemny: #b8862f; --rdza: #b5552f; --rdza-jasna: #d97a4f; --szalwia: #8fa37a; --mech: #4f6b3f; --mech-jasny: #6f8a5a; --obrys: rgba( 217, 164, 65, .3 ); --obrys-slaby: rgba( 217, 164, 65, .14 );
	--serif: 'Cormorant Garamond', 'Times New Roman', serif; --sans: 'Jost', system-ui, sans-serif;
	font: 300 15px/1.6 var( --sans ); color: var( --tekst ); }
.tzl-okno * { box-sizing: border-box; }
.tzl-okno__tlo { position: absolute; inset: 0; background: rgba( 8, 10, 6, .72 ); backdrop-filter: blur( 10px ); -webkit-backdrop-filter: blur( 10px ); }
.tzl-okno__panel { position: relative; display: grid; grid-template-columns: 300px minmax( 0, 1fr ); gap: 36px; width: min( 100%, 1120px ); max-height: 92vh; overflow: auto; padding: 34px 38px; border: 1px solid var( --obrys ); border-radius: 18px; background: radial-gradient( 700px 400px at 20% 0, rgba( 111, 138, 90, .18 ), transparent 70% ), linear-gradient( 180deg, #1f251b, #141810 ); box-shadow: 0 40px 100px rgba( 0, 0, 0, .7 ); }
.tzl-okno__zamknij { position: absolute; right: 14px; top: 12px; z-index: 2; width: 36px; height: 36px; border: 1px solid var( --obrys ); border-radius: 999px; background: rgba( 20, 24, 16, .8 ); color: var( --miod ); font-size: 22px; cursor: pointer; }
.tzl-okno__zamknij:hover { border-color: var( --miod ); }
.tzl-okno__lewa { display: grid; align-content: start; gap: 16px; }
.tzl-okno__lewa .tzl-karta { cursor: default; }
.tzl-okno__lewa .tzl-karta:hover { transform: none; }
.tzl-okno__meta { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0; font-size: 13px; }
.tzl-okno__meta dt { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var( --miod-ciemny ); line-height: 1.9; }
.tzl-okno__meta dd { margin: 0; color: var( --tekst-mocny ); }
.tzl-okno__prawa { min-width: 0; }
.tzl-okno__nad { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var( --miod-ciemny ); }
.tzl-okno__nad i { font: 400 18px var( --serif ); font-style: normal; color: var( --miod ); }
.tzl-okno__tytul { margin: 0; font: 500 42px/1.05 var( --serif ); color: var( --pergamin ); }
.tzl-okno__lac { margin: 2px 0 10px; font: italic 400 19px var( --serif ); color: var( --szalwia ); }
.tzl-okno__slowa { margin: 0 0 16px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var( --miod ); }
.tzl-okno__opis { margin: 0 0 8px; font-size: 15.5px; line-height: 1.7; color: var( --tekst-mocny ); }
.tzl-okno__sekcja { margin: 0 0 8px; padding-top: 16px; border-top: 1px solid var( --obrys-slaby ); }
.tzl-okno__sekcja h4 { margin: 0 0 10px; font: 500 22px var( --serif ); color: var( --miod-jasny ); }
.tzl-okno__sekcja p { margin: 0 0 8px; font-size: 14px; line-height: 1.7; color: var( --tekst ); }
.tzl-rytual { margin: 0 0 12px; padding: 14px 18px 14px; border: 1px solid var( --obrys-slaby ); border-left: 3px solid var( --miod-ciemny ); border-radius: 12px; background: rgba( 20, 24, 16, .6 ); }
.tzl-rytual__glowa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 6px; }
.tzl-rytual__glowa b { font: 500 20px var( --serif ); color: var( --pergamin ); }
.tzl-rytual__glowa span { font-size: 12.5px; color: var( --szalwia ); }
.tzl-rytual__kiedy { margin: 0 0 8px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var( --miod-ciemny ); }
.tzl-rytual__potrzebne { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.tzl-rytual__potrzebne li { padding: 3px 10px; border: 1px solid var( --obrys-slaby ); border-radius: 999px; font-size: 12px; color: var( --tekst ); }
.tzl-rytual ol { margin: 0; padding: 0 0 0 20px; font-size: 14px; line-height: 1.65; color: var( --tekst-mocny ); }
.tzl-rytual ol li { margin: 0 0 4px; }
.tzl-rytual ol li::marker { color: var( --miod ); font-family: var( --serif ); font-weight: 600; }
.tzl-sposoby { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 0; }
.tzl-sposoby div { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; font-size: 13.5px; line-height: 1.5; }
.tzl-sposoby dt { font-size: 18px; line-height: 1.2; color: var( --miod ); }
.tzl-sposoby dd { margin: 0; color: var( --tekst ); }
.tzl-sposoby dd b { display: block; font-weight: 400; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tzl-sposoby div.jest-nie dt { color: var( --rdza-jasna ); }
.tzl-uwaga { margin: 0; padding: 14px 18px; border: 1px solid rgba( 181, 85, 47, .45 ); border-radius: 12px; background: rgba( 181, 85, 47, .1 ); font-size: 14px; line-height: 1.65; color: var( --tekst-mocny ); }
.tzl-uwaga::before { content: 'Nie używaj, gdy'; display: block; margin: 0 0 4px; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var( --rdza-jasna ); }
.tzl-laczyc { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; font-size: 13.5px; }
.tzl-laczyc span { color: var( --tekst-slaby ); }
.tzl-laczyc b { font-weight: 400; color: var( --tekst-mocny ); }
.tzl-laczyc button { border: 0; padding: 0; background: none; color: var( --miod-jasny ); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ─────────────────────────────  ekrany  ──────────────────────────── */

@media ( max-width: 1200px ) {
	.tzl-hero { grid-template-columns: 1fr; min-height: 0; padding: 40px 30px 20px; }
	.tzl-strona::before { height: 900px; }
	.tzl-strona::after { top: 420px; height: 480px; }
	.tzl-hero::before { background: linear-gradient( 180deg, rgba( 17, 21, 14, .55 ), rgba( 17, 21, 14, .85 ) ); }
	.tzl-dnia-pas { padding: 0 24px; }
	.tzl-zielnik, .tzl-dobor, .tzl-bezp, .tzl-metoda { padding: 0 24px; }
	.tzl-polka__karty { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
	.tzl-rzedy { --widac: 3; --przerwa: 16px; }
	.tzl-rzad__strz { width: 34px; height: 34px; font-size: 20px; line-height: 32px; }
	.tzl-rzad__strz--l { left: -40px; }
	.tzl-rzad__strz--p { right: -40px; }
	.tzl-bezp__siatka { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.tzl-metoda__siatka { grid-template-columns: 1fr; }
	.tzl-nav__linki { display: none; }
	.tzl-form { grid-template-columns: 1fr 1fr; }
	.tzl-pole--miasto, .tzl-form .tzl-btn { grid-column: 1 / -1; }
}
@media ( max-width: 680px ) {
	.tzl-polka__karty { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 16px 12px; }
	.tzl-rzedy { --widac: 2; --przerwa: 12px; gap: 26px; }
	.tzl-rzad__strz { display: none; }
	.tzl-rzad__glowa h3 { font-size: 22px; }
	.tzl-bezp__siatka { grid-template-columns: 1fr; }
	.tzl-filtry__etyk { flex-basis: 100%; }
	.tzl-okno__panel { grid-template-columns: 1fr; padding: 24px; }
	.tzl-okno--info .tzl-okno__panel { padding: 24px 20px; }
	.tzl-tabela { display: block; overflow-x: auto; }
	.tzl-okno__lewa .tzl-karta { max-width: 240px; margin: 0 auto; }
	.tzl-sposoby { grid-template-columns: 1fr; }
	.tzl-nav__marka span { display: none; }
	.tzl-tytul { font-size: 38px; }
	.tzl-dnia { grid-template-columns: 1fr; min-height: 0; }
	.tzl-dnia__obraz { min-height: 220px; -webkit-mask-image: linear-gradient( 180deg, #000 0, #000 55%, transparent 100% ); mask-image: linear-gradient( 180deg, #000 0, #000 55%, transparent 100% ); }
	.tzl-dnia__obraz img { position: absolute; min-height: 0; height: 100%; }
	.tzl-dnia__tekst { padding: 0 22px 24px; }
	.tzl-dnia__nazwa { font-size: 28px; }
	.tzl-filtry { padding: 14px 16px; }
	.tzl-rzad__wszystkie { display: none; }
}

/* przycisk Powiązań w oknie zioła — w barwach Zielnika (mech + miód) */
.tzl-okno__pow { margin: 4px 0 14px; }
.tzl-okno__pow .tpw-btn { border-color: rgba( 120, 140, 90, .5 ); background: linear-gradient( 180deg, rgba( 120, 140, 90, .16 ), rgba( 120, 140, 90, .05 ) ); color: #4f6b3f; }
.tzl-okno__pow .tpw-btn:hover { border-color: #4f6b3f; background: rgba( 120, 140, 90, .22 ); color: #2f4526; box-shadow: 0 6px 20px rgba( 79, 107, 63, .18 ); }