/*
 * NTB24 Sizing - style wtyczki.
 *
 * Wylacznie dziewiec kolorow z palety (D07), przez tokeny motywu z awaryjna
 * wartoscia na wypadek, gdyby wtyczka dzialala bez motywu ntb24.
 * Promien zawsze zero. Cienia nie ma. Dotyk minimum 44 px na 390 px (regula 3).
 * Tabele na telefonie zamieniaja sie w listy definicji (W9).
 */

.ntbs-kalkulator,
.ntbs-tabela,
.ntbs-konto {
	color: var(--c-ink, #0A0A0A);
	font-family: var(--f-ui, "Archivo", "Helvetica Neue", Arial, sans-serif);
}

/* --- Kalkulator --- */

.ntbs-kalkulator__panel {
	background: var(--c-paper, #F6F4F0);
	border: 1px solid var(--c-line, #E4E1DB);
	padding: var(--s-5, 1.5rem);
}

.ntbs-kalkulator__tytul {
	font-family: var(--f-display, "Bodoni Moda", Georgia, serif);
	font-size: var(--fs-800, 1.75rem);
	font-weight: var(--fw-regular, 400);
	line-height: var(--lh-snug, 1.2);
	margin: 0 0 var(--s-3, .75rem);
}

.ntbs-kalkulator__intro {
	color: var(--c-ink-2, #3C3C3C);
	font-size: var(--fs-400, .875rem);
	line-height: var(--lh-body, 1.55);
	margin: 0 0 var(--s-5, 1.5rem);
	max-width: var(--w-text, 33rem);
}

/* --- Formularz --- */

.ntbs-form {
	display: grid;
	gap: var(--s-4, 1rem);
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.ntbs-form__pole {
	display: flex;
	flex-direction: column;
	gap: var(--s-2, .5rem);
}

.ntbs-form__pole label {
	color: var(--c-ink-3, #6E6E6E);
	font-size: var(--fs-200, .75rem);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ntbs-form__wejscie {
	align-items: stretch;
	border: 1px solid var(--c-line-2, #C9C4BC);
	background: var(--c-bg, #FFFFFF);
	display: flex;
}

.ntbs-form__wejscie input,
.ntbs-form__pole input[type="text"],
.ntbs-form__pole input[type="date"],
.ntbs-form__pole input[type="number"],
.ntbs-form__pole input[type="email"],
.ntbs-form__pole input[type="tel"],
.ntbs-form__pole select {
	background: var(--c-bg, #FFFFFF);
	border: 0;
	color: var(--c-ink, #0A0A0A);
	font-family: inherit;
	font-size: var(--fs-500, 1rem);
	min-height: 48px;
	padding: 0 var(--s-3, .75rem);
	width: 100%;
}

.ntbs-form__pole input[type="text"],
.ntbs-form__pole input[type="date"],
.ntbs-form__pole input[type="number"],
.ntbs-form__pole input[type="email"],
.ntbs-form__pole input[type="tel"],
.ntbs-form__pole select {
	border: 1px solid var(--c-line-2, #C9C4BC);
}

.ntbs-form__wejscie input:focus-visible,
.ntbs-form__pole input:focus-visible,
.ntbs-form__pole select:focus-visible {
	outline: 2px solid var(--c-ink, #0A0A0A);
	outline-offset: -2px;
}

.ntbs-form__jednostka {
	align-items: center;
	border-left: 1px solid var(--c-line, #E4E1DB);
	color: var(--c-ink-3, #6E6E6E);
	display: flex;
	font-size: var(--fs-300, .8125rem);
	padding: 0 var(--s-3, .75rem);
}

.ntbs-form__pomoc {
	color: var(--c-ink-3, #6E6E6E);
	font-size: var(--fs-300, .8125rem);
	line-height: var(--lh-body, 1.55);
}

.ntbs-form__wyslij,
.ntbs-form button[type="submit"] {
	min-height: 52px;
}

.ntbs-form--usun {
	margin-top: var(--s-3, .75rem);
}

.ntbs-form--usun button {
	background: none;
	border: 0;
	color: var(--c-ink-3, #6E6E6E);
	cursor: pointer;
	font: inherit;
	min-height: 44px;
	padding: 0;
	text-decoration: underline;
}

/* --- Wynik --- */

.ntbs-wynik:empty {
	display: none;
}

.ntbs-wynik {
	border-top: 1px solid var(--c-line, #E4E1DB);
	margin-top: var(--s-5, 1.5rem);
	padding-top: var(--s-5, 1.5rem);
}

.ntbs-wynik__glowny {
	display: flex;
	flex-direction: column;
	gap: var(--s-1, .25rem);
}

.ntbs-wynik__wartosc {
	font-family: var(--f-display, "Bodoni Moda", Georgia, serif);
	font-size: var(--fs-800);
	font-weight: var(--fw-regular, 400);
	line-height: var(--lh-tight, 1.05);
}

.ntbs-wynik__skale {
	display: grid;
	gap: var(--s-4, 1rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: var(--s-4, 1rem) 0 0;
}

.ntbs-wynik__skala dt {
	color: var(--c-ink-3, #6E6E6E);
	font-size: var(--fs-200, .75rem);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ntbs-wynik__skala dd {
	font-family: var(--f-display, "Bodoni Moda", Georgia, serif);
	font-size: var(--fs-800);
	margin: 0;
}

.ntbs-wynik__opis {
	color: var(--c-ink-2, #3C3C3C);
	font-size: var(--fs-400, .875rem);
	line-height: var(--lh-body, 1.55);
	margin: var(--s-4, 1rem) 0 0;
	max-width: var(--w-text, 33rem);
}

/* Ostrzezenie bez koloru funkcyjnego: ramka 1 px i ikona (D07). */
.ntbs-wynik__opis--granica {
	border: 1px solid var(--c-ink, #0A0A0A);
	padding: var(--s-3, .75rem);
	position: relative;
}

.ntbs-wynik__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3, .75rem);
	margin: var(--s-5, 1.5rem) 0 0;
}

.ntbs-wynik__akcje .ntb-btn {
	min-height: 52px;
}

/* --- Brak danych --- */

.ntbs-brak {
	border: 1px solid var(--c-ink, #0A0A0A);
	padding: var(--s-4, 1rem);
}

.ntbs-brak p {
	margin: 0 0 var(--s-2, .5rem);
	max-width: var(--w-text, 33rem);
}

.ntbs-brak p:last-child {
	margin-bottom: 0;
}

.ntbs-uwaga {
	color: var(--c-ink-3, #6E6E6E);
	font-size: var(--fs-300, .8125rem);
	line-height: var(--lh-body, 1.55);
	margin: var(--s-3, .75rem) 0 0;
	max-width: var(--w-text, 33rem);
}

/* --- Tabela przeliczen --- */

.ntbs-tabela {
	margin: var(--s-6, 2rem) 0;
}

.ntbs-tabela__grid {
	border-collapse: collapse;
	width: 100%;
}

.ntbs-tabela__grid caption {
	color: var(--c-ink-3, #6E6E6E);
	font-size: var(--fs-200, .75rem);
	letter-spacing: .08em;
	padding-bottom: var(--s-3, .75rem);
	text-align: left;
	text-transform: uppercase;
}

/* Podpis tabeli jest wersalikowa etykieta (--fs-200), ale ten dopisek jest
   pelnym zdaniem o metodzie pomiaru - obowiazuje go dolna granica tresci. */
.ntbs-tabela__measure {
	display: block;
	font-size: var(--fs-300, .8125rem);
	letter-spacing: 0;
	margin-top: var(--s-1, .25rem);
	text-transform: none;
}

.ntbs-tabela__grid th,
.ntbs-tabela__grid td {
	border-bottom: 1px solid var(--c-line, #E4E1DB);
	font-size: var(--fs-400, .875rem);
	padding: var(--s-3, .75rem) var(--s-2, .5rem);
	text-align: left;
}

.ntbs-tabela__grid th {
	color: var(--c-ink-3, #6E6E6E);
	font-size: var(--fs-200, .75rem);
	font-weight: var(--fw-medium, 500);
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* --- Systemy rozmiarowe --- */

.ntbs-systemy {
	display: grid;
	gap: var(--s-4, 1rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ntbs-system {
	border: 1px solid var(--c-line, #E4E1DB);
	display: flex;
	flex-direction: column;
	gap: var(--s-2, .5rem);
	min-height: 190px;
	padding: var(--s-4, 1rem);
}

.ntbs-system--bez-danych {
	background: var(--c-hatch, #F2EFEA);
}

.ntbs-system__tytul {
	font-family: var(--f-display, "Bodoni Moda", Georgia, serif);
	font-size: var(--fs-700, 1.375rem);
	font-weight: var(--fw-regular, 400);
	margin: 0;
}

.ntbs-system__tytul a {
	color: inherit;
	display: block;
	min-height: 44px;
	text-decoration: none;
}

/* Zajawka systemu rozmiarowego to pelne zdanie na kaflu, wiec stoi na bazie
   interfejsu, nie na stopniu tekstu pomocniczego - przy --fs-300 lamala sie
   na /rozmiary/ po 32 znakach w kolumnie 209 px. */
.ntbs-system__lead {
	color: var(--c-ink-2, #3C3C3C);
	font-size: var(--fs-400, .875rem);
	line-height: var(--lh-body, 1.55);
	margin: 0;
}

.ntbs-system__stan {
	margin: auto 0 0;
}

/* --- Konto > Konie i wymiary ---
   Karty, wiersze definicji i chipy rozmiarow daje motyw (style.css, KONTO).
   Tu zostaja formularze .ntbs-form i terminarz przy koniu. */

.ntbs-title-sub {
	color: var(--c-ink-3, #6E6E6E);
	font-family: var(--f-ui, "Archivo", sans-serif);
	font-size: var(--fs-300, .8125rem);
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-left: var(--s-2, .5rem);
	vertical-align: middle;
}

.ntbs-form__set {
	border: 0;
	margin: 0 0 var(--s-5, 1.5rem);
	min-width: 0;
	padding: 0;
}

.ntbs-form__set legend {
	color: var(--c-ink-3, #6E6E6E);
	margin-bottom: var(--s-3, .75rem);
	padding: 0;
}

.ntbs-form__grid {
	display: grid;
	gap: var(--s-4, 1rem);
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.ntbs-form__pole textarea {
	background: var(--c-bg, #FFFFFF);
	border: 1px solid var(--c-line-2, #C9C4BC);
	color: var(--c-ink, #0A0A0A);
	font: inherit;
	font-size: var(--fs-400, .875rem);
	line-height: var(--lh-body, 1.55);
	min-height: 96px;
	padding: var(--s-3, .75rem);
	resize: vertical;
	width: 100%;
}

.ntbs-form__pole textarea:focus-visible {
	outline: 2px solid var(--c-ink, #0A0A0A);
	outline-offset: -2px;
}

.ntbs-form__acts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3, .75rem);
}

.ntbs-form--konto,
.ntbs-form--termin {
	display: block;
	margin-top: var(--s-4, 1rem);
	padding: var(--s-4, 1rem);
	background: var(--c-paper, #F6F4F0);
}

.ntbs-dodaj {
	margin-top: var(--s-5, 1.5rem);
}

.ntbs-dodaj > summary,
.ntbs-rozwin > summary {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: var(--s-2, .5rem);
	list-style: none;
}

.ntbs-dodaj > summary::-webkit-details-marker,
.ntbs-rozwin > summary::-webkit-details-marker {
	display: none;
}

.ntbs-dodaj[open] > summary {
	margin-bottom: var(--s-4, 1rem);
}

.ntbs-rozwin {
	margin-top: var(--s-4, 1rem);
}

.ntbs-rozwin--edycja {
	border-top: 1px solid var(--c-line, #E4E1DB);
	padding-top: var(--s-4, 1rem);
}

.ntbs-terms {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ntbs-term {
	align-items: center;
	border-bottom: 1px solid var(--c-line, #E4E1DB);
	display: grid;
	gap: 2px var(--s-3, .75rem);
	grid-template-columns: minmax(0, 1fr) auto;
	padding: 10px 0;
}

.ntbs-term__what {
	color: var(--c-ink, #0A0A0A);
	font-size: var(--fs-400, .875rem);
	font-weight: var(--fw-medium, 500);
}

.ntbs-term__when {
	display: flex;
	flex-wrap: wrap;
	gap: 2px var(--s-3, .75rem);
	font-size: var(--fs-300, .8125rem);
	grid-column: 1;
}

.ntbs-term__rel {
	align-items: center;
	color: var(--c-ink-2, #3C3C3C);
	display: inline-flex;
	gap: 6px;
}

.ntbs-term--late .ntbs-term__rel {
	color: var(--c-ink, #0A0A0A);
	font-weight: var(--fw-medium, 500);
}

.ntbs-term__last {
	color: var(--c-ink-3, #6E6E6E);
	font-size: var(--fs-200, .75rem);
	grid-column: 1;
}

.ntbs-term__del {
	grid-column: 2;
	grid-row: 1 / span 3;
	margin: 0;
}

.ntbs-iconbtn {
	align-items: center;
	background: none;
	border: 1px solid transparent;
	color: var(--c-ink-3, #6E6E6E);
	cursor: pointer;
	display: inline-flex;
	height: 44px;
	justify-content: center;
	padding: 0;
	width: 44px;
}

.ntbs-iconbtn:hover,
.ntbs-iconbtn:focus-visible {
	border-color: var(--c-ink, #0A0A0A);
	color: var(--c-ink, #0A0A0A);
}

.ntbs-notes {
	white-space: pre-line;
}

.ntbs-form--usun {
	margin-top: var(--s-3, .75rem);
}

.ntbs-form--usun button {
	background: none;
	border: 0;
	color: var(--c-ink-3, #6E6E6E);
	cursor: pointer;
	font: inherit;
	min-height: 44px;
	padding: 0;
	text-decoration: underline;
}

/* --- Filtr "w moim rozmiarze" --- */

.ntbs-fgroup__lista {
	display: flex;
	flex-direction: column;
	gap: var(--s-2, .5rem);
	list-style: none;
	margin: var(--s-3, .75rem) 0 0;
	padding: 0;
}

.ntbs-fgroup__lista .ntb-chip {
	align-items: center;
	border: 1px solid var(--c-line-2, #C9C4BC);
	display: flex;
	min-height: 44px;
	padding: 0 var(--s-3, .75rem);
	text-decoration: none;
}

.ntbs-fgroup__lista .ntb-chip--x {
	background: var(--c-ink, #0A0A0A);
	border-color: var(--c-ink, #0A0A0A);
	color: var(--c-on-ink, #FFFFFF);
}

/* --- Po zakupie --- */

.ntbs-po-zakupie {
	border: 1px solid var(--c-line, #E4E1DB);
	margin: var(--s-6, 2rem) 0;
	padding: var(--s-5, 1.5rem);
}

/* --- Mobile 390 px: tabele jako listy definicji --- */

@media (max-width: 767px) {
	.ntbs-systemy,
	.ntbs-kafle {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.ntbs-wynik__skale {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	/* caption idzie razem z reszta. Bez display: block zostawal komorka tabeli
	   w tabeli, ktora tabela juz nie jest: zwezal sie do 85 z 358 px i puchl
	   z 72 do 462 px wysokosci na tych samych 286 znakach. */
	.ntbs-tabela__grid,
	.ntbs-tabela__grid caption,
	.ntbs-tabela__grid tbody,
	.ntbs-tabela__grid tr,
	.ntbs-tabela__grid td {
		display: block;
		width: 100%;
	}

	.ntbs-tabela__grid caption {
		text-align: left;
	}

	.ntbs-tabela__grid thead {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.ntbs-tabela__grid tr {
		border-bottom: 1px solid var(--c-line-2, #C9C4BC);
		padding: var(--s-3, .75rem) 0;
	}

	.ntbs-tabela__grid td {
		border: 0;
		display: flex;
		gap: var(--s-3, .75rem);
		justify-content: space-between;
		padding: var(--s-1, .25rem) 0;
	}

	.ntbs-tabela__grid td::before {
		color: var(--c-ink-3, #6E6E6E);
		content: attr(data-etykieta);
		font-size: var(--fs-200, .75rem);
		letter-spacing: .08em;
		text-transform: uppercase;
	}

	.ntbs-tabela__grid td:empty {
		display: none;
	}
}

@media (min-width: 768px) {
	.ntbs-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ntbs-form__wyslij,
	.ntbs-form button[type="submit"] {
		grid-column: 1 / -1;
		justify-self: start;
		min-width: 220px;
	}

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

	.ntbs-form--konto .ntbs-form__acts button,
	.ntbs-form--termin .ntbs-form__acts button {
		min-width: 0;
	}

	.ntbs-karta__wymiary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--s-6, 2rem);
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.ntbs-systemy,
	.ntbs-kafle {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- Kalkulator: naglowek ze znacznikiem pochodzenia, dwie kolumny --- */

.ntbs-kalkulator__head {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3, .75rem) var(--s-5, 1.5rem);
	justify-content: space-between;
	margin-bottom: var(--s-5, 1.5rem);
}

.ntbs-kalkulator__head > div {
	flex: 1 1 320px;
	min-width: 0;
}

.ntbs-kalkulator__head .ntbs-kalkulator__intro {
	margin-bottom: 0;
}

.ntbs-kalkulator__tag {
	align-items: center;
	background: var(--c-bg, #FFFFFF);
	border: 1px solid var(--c-ink, #0A0A0A);
	color: var(--c-ink, #0A0A0A);
	display: inline-flex;
	font-size: var(--fs-100, .6875rem);
	font-weight: var(--fw-semibold, 600);
	letter-spacing: .14em;
	min-height: 28px;
	padding: 0 10px;
	text-transform: uppercase;
	white-space: nowrap;
}

.ntbs-kalkulator__tag--regula {
	border-style: dashed;
}

.ntbs-kalkulator__cols {
	display: grid;
	gap: var(--s-5, 1.5rem);
}

.ntbs-kalkulator__out .ntbs-wynik {
	background: var(--c-bg, #FFFFFF);
	border: 1px solid var(--c-line, #E4E1DB);
	margin-top: 0;
	padding: var(--s-5, 1.5rem);
}

.ntbs-kalkulator__out .ntbs-wynik--regula,
.ntbs-kalkulator__out .ntbs-wynik:not(.ntbs-wynik--czeka) {
	border-color: var(--c-ink, #0A0A0A);
}

.ntbs-wynik--czeka p {
	color: var(--c-ink-2, #3C3C3C);
	font-size: var(--fs-400, .875rem);
	line-height: var(--lh-body, 1.55);
	margin: var(--s-2, .5rem) 0 0;
	max-width: var(--w-text, 33rem);
}

.ntbs-kalkulator__out .ntbs-wynik__wartosc {
	font-size: var(--fs-1000, 2.5rem);
}

.ntbs-kalkulator__out .ntbs-brak {
	margin-top: 0;
}

@media (min-width: 900px) {
	.ntbs-kalkulator__cols {
		align-items: start;
		grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
	}

	.ntbs-kalkulator__out {
		position: sticky;
		top: calc(var(--ntb-head-h, 58px) + var(--s-4, 1rem));
	}
}

/* --- Rytm strony systemu i pole wyboru --- */

/* Kalkulator doklejany do tresci strony stal bezposrednio pod akapitem
   wstepu (margin 0) - teraz ma odstep sekcji z obu stron. */
.ntb-page__body > .ntbs-kalkulator {
	margin: var(--s-7, 2.5rem) 0;
}

/* Na szerokim ekranie formularz i wynik nie rozjezdzaja sie na 1 400 px:
   panel trzyma proporcje 3:2 i konczy sie tam, gdzie konczy sie tresc. */
@media (min-width: 1280px) {
	.ntbs-kalkulator__cols {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}
}

/* --- Audyt ulozenia tresci (2026-09-09) --------------------------------- */

/* Komorki tabeli mialy 8 px wciecia, wiec naglowek ROZMIAR i wartosci staly
   8 px na prawo od etykiety, leadu i akapitow; podpis tabeli szedl na 1 229 px. */
.ntbs-tabela__grid th:first-child,
.ntbs-tabela__grid td:first-child { padding-left: 0; }
.ntbs-tabela__grid th:last-child,
.ntbs-tabela__grid td:last-child { padding-right: 0; }
.ntbs-tabela__grid caption,
.ntbs-tabela__measure,
.ntbs-uwaga { max-width: var(--w-text, 33rem); }
.ntbs-tabela--os { margin-bottom: 0; }

/* Kafle systemow: jedna siatka z liniami z tla, jak kafle marek i poradnika
   (wczesniej osobne ramki i 16 px bialego odstepu). Caly kafel jest celem -
   odnosnik tytulu rozciaga sie na kafel przez ::after. */
.ntbs-systemy {
	background: var(--c-line, #E4E1DB);
	border: 1px solid var(--c-line, #E4E1DB);
	gap: 1px;
}
.ntbs-system {
	background: var(--c-paper, #F6F4F0);
	border: 0;
	padding: var(--s-5, 1.5rem);
	position: relative;
}
.ntbs-system:hover { background: var(--c-bg, #FFFFFF); }
.ntbs-system--bez-danych { background: var(--c-hatch, #F2EFEA); }
.ntbs-system__tytul a { min-height: 0; }
.ntbs-system__tytul a::after { content: ""; inset: 0; position: absolute; }
.ntbs-system__tytul a:focus-visible { outline: none; }
.ntbs-system__tytul a:focus-visible::after { outline: 2px solid var(--c-ink, #0A0A0A); outline-offset: -2px; }

/* Znacznik "Wynik orientacyjny" bez kreskowanej ramki (linia przerywana nie
   nalezy do jezyka wizualnego; stan mowi tekst). */
.ntbs-kalkulator__tag--regula {
	border-color: var(--c-line-2, #C9C4BC);
	border-style: solid;
	color: var(--c-ink-2, #3C3C3C);
}

/* Ramka wyniku na wysokosc kolumny pol: wczesniej konczyla sie 62-223 px nad
   dolna krawedzia formularza, a przyklejenie nie mialo czego przyklejac. */
@media (min-width: 900px) {
	.ntbs-kalkulator__cols { align-items: stretch; }
	.ntbs-kalkulator__out { display: flex; flex-direction: column; position: static; }
	.ntbs-kalkulator__out .ntbs-wynik,
	.ntbs-kalkulator__out .ntbs-brak { flex: 1 1 auto; }
}

/* Na telefonie potrojne wciecie (16 + 24 + 24) zostawialo polom 258 px. */
@media (max-width: 599px) {
	.ntbs-kalkulator__panel { padding: var(--s-5, 1.5rem) var(--s-4, 1rem); }
	.ntbs-kalkulator__out .ntbs-wynik { padding: var(--s-4, 1rem); }
}

/* Rytm strony systemu: jeden skok 48 px przed kalkulatorem i tabela, bez
   dolnego marginesu, ktory dokladal sie do 64 px paddingu nastepnej sekcji. */
.ntb-page__body > .ntbs-kalkulator,
.ntb-page__body > .ntbs-tabela { margin: var(--s-8, 3rem) 0 0; }
.ntb-page__body > .ntbs-kalkulator + *,
.ntb-page__body > .ntbs-tabela + * { margin-top: var(--s-8, 3rem); }

/* Tabela o dwoch kolumnach nie rozciaga sie na 1 416 px: szerokosc z tresci,
   kolumny co najmniej 160 px. Na telefonie zostaje lista definicji (100%). */
@media (min-width: 768px) {
	.ntbs-tabela__grid { min-width: min(100%, 480px); width: auto; }
	.ntbs-tabela__grid th,
	.ntbs-tabela__grid td { min-width: 160px; padding-right: var(--s-7, 2.5rem); }
}

/* Jedenascie kafli w trzech kolumnach zostawia pusta komorke: linie z ramek
   kafli, nie z tla siatki, zeby pusta komorka byla biala, nie zamalowana. */
.ntbs-systemy { background: none; border-width: 1px 0 0 1px; gap: 0; }
.ntbs-system { border-bottom: 1px solid var(--c-line, #E4E1DB); border-right: 1px solid var(--c-line, #E4E1DB); }

/* --- Kilka tabel jednej osi (2026-09-10) -------------------------------
   Os rozmiaru zbiera tabele kilku rodzin produktow (odziez: rekawice, bryczesy,
   odziez dziecieca, marynarki). Kazda rysuje sie osobno, wiec potrzebuja odstepu
   i wlasnego podpisu z zakresem rozmiarow. */
.ntbs-tabela > .ntbs-tabela__grid + .ntbs-tabela__grid { margin-top: var(--s-8, 3rem); }
.ntbs-tabela__zakres {
	color: var(--c-ink-2, #3C3C3C);
	display: block;
	font-size: var(--fs-300, .8125rem);
	letter-spacing: 0;
	margin-top: var(--s-1, .25rem);
	text-transform: none;
}
/* Uwagi to zdanie, nie liczba: bez tabular-nums i bez wyrownania do prawej. */
.ntbs-tabela__uwaga {
	color: var(--c-ink-2, #3C3C3C);
	font-size: var(--fs-300, .8125rem);
	line-height: var(--lh-body, 1.55);
	min-width: 14rem;
}
/* Tabela z kilkoma kolumnami wymiarow bywa szersza niz kolumna tresci -
   przewija sie w swoim pudelku, a nie rozpycha strony. */
.ntbs-tabela { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) { .ntbs-tabela { overflow-x: visible; } }

/* Jedenascie kafli w trzech kolumnach zostawialo pusta dwunasta komorke, wiec
   rama siatki urywala sie w ksztalt litery L. Ostatni kafel dobiera brakujaca
   kolumne i rama zamyka sie w prostokat - bez pustego pola i bez sztucznego kafla. */
@media (min-width: 1200px) {
	.ntbs-system:nth-child(3n + 2):last-child { grid-column: span 2; }
}
@media (min-width: 768px) and (max-width: 1199px) {
	.ntbs-system:nth-child(2n + 1):last-child { grid-column: span 2; }
}

/* --- Szeroka tabela producenta na telefonie (2026-09-10) -----------------
   Regula 3 zamienia tabele w liste definicji, bo dwie kolumny czyta sie tak
   lepiej. Przy dziewieciu kolumnach ta sama zamiana daje 342 wiersze
   etykieta-wartosc i strone odziezy dluga na 13 500 px. Tabela producenta
   z czterema i wiecej kolumnami zostaje wiec tabela: przewija sie w bok,
   a kolumna rozmiaru jest przyklejona, wiec zawsze wiadomo, czyj to wiersz. */
@media (max-width: 767px) {
	.ntbs-tabela:has(.ntbs-tabela__grid--szeroka) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

	.ntbs-tabela__grid--szeroka,
	.ntbs-tabela__grid--szeroka thead,
	.ntbs-tabela__grid--szeroka tbody,
	.ntbs-tabela__grid--szeroka tr,
	.ntbs-tabela__grid--szeroka td,
	.ntbs-tabela__grid--szeroka th { display: revert; width: auto; }

	.ntbs-tabela__grid--szeroka { display: table; min-width: 100%; }
	.ntbs-tabela__grid--szeroka thead { clip: auto; clip-path: none; height: auto; overflow: visible; position: static; width: auto; }
	.ntbs-tabela__grid--szeroka caption { display: table-caption; }
	.ntbs-tabela__grid--szeroka td::before { content: none; }
	.ntbs-tabela__grid--szeroka td:empty { display: table-cell; }
	.ntbs-tabela__grid--szeroka tr { border-bottom: 0; padding: 0; }
	.ntbs-tabela__grid--szeroka th,
	.ntbs-tabela__grid--szeroka td { border-bottom: 1px solid var(--c-line, #E4E1DB); padding: var(--s-3, .75rem) var(--s-4, 1rem) var(--s-3, .75rem) 0; white-space: nowrap; }

	/* Kolumna rozmiaru zostaje na ekranie przy przewijaniu w bok. */
	.ntbs-tabela__grid--szeroka th:first-child,
	.ntbs-tabela__grid--szeroka td:first-child {
		background: var(--c-bg, #FFFFFF);
		left: 0;
		padding-right: var(--s-4, 1rem);
		position: sticky;
		z-index: 1;
	}
}

/* Zajawka kafla systemu ma miare zdania, nie szerokosc kafla (847 px na 1920). */
.ntbs-system__lead { max-width: var(--w-text, 33rem); }