/**
 * Cennik skupu — style strony.
 *
 * Wszystko jest scope'owane do .sfc, żeby nie zderzać się z Divi.
 * Zakładki działają na :checked — reguły przełączania generuje PHP,
 * bo liczba towarów jest zmienna.
 */

.sfc {
	--sfc-bg: #f6f3ec;
	--sfc-ink: #16281f;
	--sfc-line: #ddd7c8;
	--sfc-line-soft: #eae4d6;
	--sfc-panel: #fffdf8;
	--sfc-panel-alt: #efeade;
	--sfc-gold: #96631c;
	--sfc-akcent: #e0b46a;
	--sfc-muted: #7a8479;
	--sfc-body: #52604f;
	--sfc-body-2: #3a4a3d;
	--sfc-dark-line: #33493c;
	--sfc-dark-muted: #a8bfae;
	--sfc-dark-muted-2: #8aa792;
	--sfc-cream: #f2eee2;
	--sfc-cream-2: #c9d5cb;
	--sfc-input: #1e3327;
	--sfc-ok: #3f7a4f;
	--sfc-nie: #9a8f7d;
	--sfc-szer: 1240px;
	--sfc-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	overflow-x: hidden;
	color: var(--sfc-ink);
	background: var(--sfc-bg);
	font-family: Archivo, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

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

/*
 * Reset elementów wewnątrz .sfc.
 *
 * Selektory są owinięte w :where(), które ma ZEROWĄ specyficzność. Bez tego
 * ".sfc p" (0,1,1) bije każdą klasę komponentu w rodzaju ".sfc-hero__lead"
 * (0,1,0) — i "margin: 0" z resetu zeruje marginesy w całym cenniku,
 * niezależnie od kolejności reguł w pliku. Tak właśnie sklejał się nagłówek.
 *
 * ".sfc :where(p)" ma specyficzność samego ".sfc", czyli (0,1,0): nadal bije
 * gołe selektory motywu ("p { padding-bottom: 1em }" z Divi), ale przegrywa
 * z klasami komponentów, które stoją niżej w tym pliku.
 */
.sfc :where(a) {
	color: var(--sfc-ink);
}

.sfc :where(a):hover {
	color: var(--sfc-gold);
}

.sfc :where(p) {
	margin: 0;
	padding: 0;
}

.sfc :where(h1, h2, h3, h4) {
	margin: 0;
	padding: 0;
	font-weight: 600;
	line-height: 1.1;
	color: inherit;
}

.sfc :where(ul, ol, dl) {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

/* Pola radio sterujące zakładkami — niewidoczne, ale osiągalne z klawiatury. */
.sfc-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.sfc-panel {
	display: none;
}

.sfc-radio:focus-visible ~ * .sfc-zakladka {
	outline: 2px solid var(--sfc-akcent);
	outline-offset: 3px;
}

/* ----------------------------- Nagłówki ----------------------------- */

.sfc-nadtytul {
	color: var(--sfc-gold);
	font-family: var(--sfc-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sfc-nadtytul--jasny {
	color: var(--sfc-dark-muted);
}

.sfc-nadtytul--drobny {
	font-size: 11px;
	letter-spacing: 0.1em;
}

.sfc-tytul {
	margin: 10px 0 6px;
	font-size: 30px;
}

.sfc-tytul--maly {
	margin-bottom: 18px;
}

.sfc-tytul--jasny {
	color: var(--sfc-cream);
}

.sfc-lead {
	max-width: 62ch;
	margin: 0 0 26px;
	color: var(--sfc-body);
	font-size: 15px;
	line-height: 1.6;
}

.sfc-notka {
	margin: 14px 0 0;
	color: var(--sfc-muted);
	font-family: var(--sfc-mono);
	font-size: 12px;
	line-height: 1.55;
}

.sfc-notka--proza {
	max-width: 56ch;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.6;
}

/* ------------------------------- Hero ------------------------------- */

.sfc-hero {
	padding-bottom: 44px;
	color: var(--sfc-cream);
	background: var(--sfc-ink);
}

.sfc-hero__gora {
	max-width: var(--sfc-szer);
	margin: 0 auto;
	padding: 54px 32px 0;
}

.sfc-hero__tytul {
	max-width: 20ch;
	margin: 16px 0 0;
	font-size: 52px;
	line-height: 1.05;
	text-wrap: balance;
}

.sfc-hero__lead {
	max-width: 56ch;
	margin: 18px 0 34px;
	color: var(--sfc-cream-2);
	font-size: 17px;
	line-height: 1.6;
}

/* Moment ostatniej zmiany cennika — wyróżniony, bo to informacja,
   po której rolnik ocenia, czy patrzy na aktualne stawki. */
.sfc-hero__data {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.45em;
	align-items: baseline;
	margin-top: 14px;
	padding: 7px 14px;
	border-left: 3px solid var(--sfc-akcent);
	border-radius: 2px;
	background: rgba(224, 180, 106, 0.14);
	color: var(--sfc-cream);
	font-weight: 400;
}

.sfc-hero__data-etykieta {
	color: var(--sfc-dark-muted);
	font-family: var(--sfc-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sfc-hero__data-wartosc {
	color: var(--sfc-akcent);
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
}

.sfc-zakladki {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--sfc-dark-line);
}

.sfc-zakladka {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border: 1px solid #3d5647;
	border-radius: 2px;
	color: #dfe7e0;
	background: transparent;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sfc-zakladka:hover {
	border-color: var(--sfc-akcent);
	color: #fff;
}

.sfc-zakladka__numer {
	font-family: var(--sfc-mono);
	font-size: 11px;
	opacity: 0.6;
}

/* Panel nagłówka to siatka; reguły generowane w PHP czytają --sfc-panel-display. */
.sfc-hero__dol {
	--sfc-panel-display: grid;

	max-width: var(--sfc-szer);
	margin: 0 auto;
	padding: 34px 32px 0;
	gap: 44px;
	align-items: end;
	grid-template-columns: 1.15fr 1fr;
}

.sfc-hero__towar {
	margin: 10px 0 0;
	font-size: 40px;
}

.sfc-hero__towar-lead {
	max-width: 46ch;
	margin: 14px 0 0;
	color: var(--sfc-cream-2);
	font-size: 16px;
	line-height: 1.6;
}

.sfc-fakty {
	display: flex;
	flex-wrap: wrap;
	gap: 34px;
	margin-top: 28px;
}

.sfc-fakt dt {
	color: var(--sfc-dark-muted-2);
	font-family: var(--sfc-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sfc-fakt dd {
	margin: 6px 0 0;
	font-size: 26px;
	font-weight: 600;
}

.sfc-fakt dd span {
	color: var(--sfc-dark-muted);
	font-size: 14px;
	font-weight: 400;
}

.sfc-hero__zdjecie {
	margin: 0;
	border: 1px solid var(--sfc-dark-line);
	border-radius: 2px;
	overflow: hidden;
}

.sfc-hero__zdjecie img {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: cover;
}

/* ----------------------------- Sekcje ------------------------------- */

.sfc-sekcja {
	max-width: var(--sfc-szer);
	margin: 0 auto;
	padding: 68px 32px 0;
}

.sfc-sekcja:last-child {
	padding-bottom: 90px;
}

/* Sekcje można wyłączać atrybutami shortcode, więc odstęp przed stopką
   ustawiamy na stopce, a nie na „ostatniej” sekcji. */
.sfc-stopka {
	margin-top: 90px;
}

.sfc-sekcja--dwie {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
	align-items: start;
}

/*
 * Kolumna siatki ma domyślnie "min-width: auto", czyli nie zwęzi się poniżej
 * szerokości najszerszego dziecka. Tabela z "min-width: 460px" rozpychała więc
 * całą sekcję poza ekran, a "overflow-x: hidden" z korzenia .sfc ucinał to, co
 * wystawało — stąd obcięta ostatnia kolumna "Potrąceń i dopłat" na telefonie.
 * Tabela nigdy nie dostawała szansy, żeby przewinąć się we własnej ramce.
 */
.sfc-sekcja--dwie > *,
.sfc-hero__dol > *,
.sfc-zgloszenie > * {
	min-width: 0;
}

/* ----------------------------- Tabele ------------------------------- */

/*
 * Ramka tabeli = kontener przewijany w poziomie.
 *
 * Cienie na krawędziach mówią, że treść jest szersza od ramki. Sztuczka
 * polega na dwóch warstwach teł: „zasłonki” w kolorze panelu przewijają się
 * razem z treścią (background-attachment: local) i przykrywają cień, gdy
 * tabela dojechała do końca; same cienie stoją w miejscu (scroll). Bez
 * jednej linijki JavaScriptu.
 */
.sfc-tabela-ramka {
	position: relative;
	border: 1px solid var(--sfc-line);
	border-radius: 2px;
	background-color: var(--sfc-panel);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	background-image:
		linear-gradient(to right, var(--sfc-panel) 30%, rgba(255, 253, 248, 0)),
		linear-gradient(to left, var(--sfc-panel) 30%, rgba(255, 253, 248, 0)),
		linear-gradient(to right, rgba(22, 40, 31, 0.18), rgba(22, 40, 31, 0)),
		linear-gradient(to left, rgba(22, 40, 31, 0.18), rgba(22, 40, 31, 0));
	background-position: 0 0, 100% 0, 0 0, 100% 0;
	background-repeat: no-repeat;
	background-size: 34px 100%, 34px 100%, 16px 100%, 16px 100%;
	background-attachment: local, local, scroll, scroll;
}

/*
 * Podpowiedź „przesuń w bok”. Wstawia ją skrypt tylko wtedy, gdy tabela
 * naprawdę się nie mieści — inaczej byłaby kłamstwem na szerokim ekranie.
 */
.sfc-tabela-hint {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0 0 8px;
	color: var(--sfc-muted);
	font-family: var(--sfc-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
}

.sfc-tabela-hint::before {
	content: "↔";
	font-size: 14px;
}

.sfc-tabela {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-size: 15px;
	text-align: left;
}

.sfc-tabela--korekty {
	min-width: 460px;
}

.sfc-tabela thead tr {
	background: var(--sfc-panel-alt);
}

.sfc-tabela th {
	font-weight: 600;
}

.sfc-tabela thead th {
	padding: 14px 18px;
	border-bottom: 1px solid var(--sfc-line);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sfc-tabela tbody th,
.sfc-tabela td {
	padding: 16px 18px;
	border-bottom: 1px solid var(--sfc-line-soft);
	vertical-align: top;
}

.sfc-tabela tbody tr:last-child th,
.sfc-tabela tbody tr:last-child td {
	border-bottom: 0;
}

.sfc-tabela__nazwa {
	display: block;
	font-weight: 600;
}

.sfc-tabela__miasto {
	display: block;
	margin-top: 3px;
	color: var(--sfc-muted);
	font-family: var(--sfc-mono);
	font-size: 12px;
	font-weight: 400;
}

.sfc-tabela__cena {
	font-size: 19px;
	font-weight: 600;
	white-space: nowrap;
}

.sfc-tabela__cena span {
	color: var(--sfc-muted);
	font-size: 12px;
	font-weight: 400;
}

.sfc-tabela__cicho {
	color: var(--sfc-body);
}

.sfc-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--sfc-mono);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.sfc-status::before {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	content: "";
}

.sfc-status--tak {
	color: var(--sfc-ok);
}

.sfc-status--nie {
	color: var(--sfc-nie);
}

.sfc-korekta {
	font-family: var(--sfc-mono);
	font-size: 14px;
}

.sfc-korekta--doplata {
	color: var(--sfc-ok);
}

.sfc-korekta--potracenie {
	color: #a8452f;
}

.sfc-korekta--neutralna {
	color: var(--sfc-body);
}

/* ------------------------- Listy parametrów ------------------------- */

.sfc-lista-par {
	border-top: 1px solid var(--sfc-line);
}

.sfc-para {
	display: flex;
	gap: 20px;
	justify-content: space-between;
	padding: 15px 0;
	border-bottom: 1px solid var(--sfc-line);
}

.sfc-para dt {
	color: var(--sfc-body-2);
	font-size: 15px;
}

.sfc-para dd {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

/* ------------------------------ Karty ------------------------------- */

.sfc-karty {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.sfc-karta {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--sfc-line);
	border-radius: 2px;
	background: var(--sfc-panel);
	overflow: hidden;
}

.sfc-karta--zamknieta {
	background: #faf7f0;
}

.sfc-karta__foto {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
}

.sfc-karta--zamknieta .sfc-karta__foto {
	filter: grayscale(1);
	opacity: 0.55;
}

.sfc-karta__tresc {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	padding: 18px 18px 20px;
}

.sfc-karta__nazwa {
	margin-top: 6px;
	font-size: 21px;
}

.sfc-karta__pojemnosc {
	margin-top: 2px;
	color: var(--sfc-muted);
	font-size: 13px;
}

.sfc-karta__cena {
	display: flex;
	gap: 12px;
	align-items: baseline;
	justify-content: space-between;
	padding-top: 12px;
	border-top: 1px solid var(--sfc-line-soft);
}

.sfc-karta__cena span {
	color: var(--sfc-muted);
	font-family: var(--sfc-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sfc-karta__cena strong {
	font-size: 20px;
	font-weight: 600;
}

.sfc-karta--zamknieta .sfc-karta__cena strong {
	color: var(--sfc-nie);
	font-size: 16px;
}

.sfc-karta__adres {
	color: var(--sfc-body-2);
	font-size: 14px;
	font-style: normal;
	line-height: 1.55;
}

.sfc-karta__godziny {
	display: flex;
	flex-direction: column;
	padding-top: 12px;
	border-top: 1px solid var(--sfc-line-soft);
	color: var(--sfc-body);
	font-size: 13px;
	line-height: 1.6;
}

.sfc-karta__godziny strong {
	color: var(--sfc-ink);
}

.sfc-karta__zniwa {
	margin-top: 4px;
	color: var(--sfc-gold);
}

.sfc-karta__brak {
	padding: 10px 12px;
	border-radius: 2px;
	background: var(--sfc-panel-alt);
	color: var(--sfc-body);
	font-size: 13px;
	line-height: 1.55;
}

/* Telefon i e-mail w jednym bloku na dole kafelka, żeby przyciski wyrównywały
   się między kafelkami o różnej wysokości treści. */
.sfc-karta__akcje {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: auto;
}

/* !important jak przy telefonie — motyw potrafi kolorować linki selektorem
   z ID, co bije każdą klasę i zrównuje tekst z tłem. */
.sfc-karta__mail {
	padding: 10px;
	border: 1px solid var(--sfc-ink);
	border-radius: 2px;
	color: var(--sfc-ink) !important;
	background: transparent;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sfc-karta__mail:hover {
	color: var(--sfc-bg) !important;
	background: var(--sfc-ink);
}

.sfc-karta__telefon {
	padding: 11px;
	border-radius: 2px;
	/* !important, bo motyw potrafi kolorować linki selektorem z ID
	   (np. "#page-container a"), co bije każdą klasę. Tekst w tym samym
	   kolorze co tło = numer telefonu znika. */
	color: var(--sfc-bg) !important;
	background: var(--sfc-ink);
	font-family: var(--sfc-mono);
	font-size: 14px;
	text-align: center;
	text-decoration: none;
}

.sfc-karta__telefon:hover {
	color: var(--sfc-akcent) !important;
}

/* ------------------------------ Kroki ------------------------------- */

.sfc-krok {
	display: flex;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--sfc-line);
}

.sfc-krok__numer {
	padding-top: 3px;
	color: var(--sfc-gold);
	font-family: var(--sfc-mono);
	font-size: 12px;
}

.sfc-krok__tytul {
	font-size: 16px;
}

.sfc-krok__opis {
	margin-top: 4px;
	color: var(--sfc-body);
	font-size: 14px;
	line-height: 1.55;
}

/* Ramki układają się jedna pod drugą, z odstępem — druga ramka doszła
   pod „Terminami płatności”. */
.sfc-ramki {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sfc-ramka {
	padding: 18px 20px;
	border-radius: 2px;
	background: var(--sfc-panel-alt);
}

.sfc-ramka__tresc {
	margin-top: 8px;
	color: #2a3a2d;
	font-size: 15px;
	line-height: 1.6;
}

/* --------------------------- Zgłoszenie ----------------------------- */

.sfc-zgloszenie {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 48px;
	padding: 40px;
	border-radius: 2px;
	color: var(--sfc-cream);
	background: var(--sfc-ink);
}

.sfc-zgloszenie__lead {
	margin: 0 0 26px;
	color: var(--sfc-cream-2);
	font-size: 15px;
	line-height: 1.65;
}

.sfc-zgloszenie__blok {
	padding-top: 20px;
	margin-top: 22px;
	border-top: 1px solid var(--sfc-dark-line);
}

.sfc-zgloszenie__osoba {
	margin-top: 10px;
	font-size: 19px;
	font-weight: 600;
}

.sfc-zgloszenie__rola {
	color: var(--sfc-dark-muted);
	font-size: 14px;
}

.sfc-zgloszenie__kontakt {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 12px;
	font-family: var(--sfc-mono);
	font-size: 14px;
}

.sfc-zgloszenie__kontakt a,
.sfc-dokumenty a {
	color: var(--sfc-cream);
	text-decoration: none;
}

.sfc-zgloszenie__kontakt a:hover,
.sfc-dokumenty a:hover {
	color: var(--sfc-akcent);
}

.sfc-dokumenty {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}

.sfc-dokumenty a {
	display: flex;
	gap: 14px;
	justify-content: space-between;
	padding-bottom: 9px;
	border-bottom: 1px solid #29402f;
	font-size: 14px;
}

.sfc-dokumenty__typ {
	color: var(--sfc-dark-muted-2);
	font-family: var(--sfc-mono);
	font-size: 12px;
}

/* --------------------------- Formularz ------------------------------ */

.sfc-formularz {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	align-content: start;
}

.sfc-pole-form {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--sfc-dark-muted);
	font-size: 13px;
}

.sfc-pole-form--pelne,
.sfc-zgoda,
.sfc-wyslij,
.sfc-komunikat {
	grid-column: span 2;
}

.sfc-formularz input,
.sfc-formularz select,
.sfc-formularz textarea {
	width: 100%;
	padding: 12px 13px;
	border: 1px solid var(--sfc-dark-line);
	border-radius: 2px;
	color: var(--sfc-bg);
	background: var(--sfc-input);
	font-family: inherit;
	font-size: 15px;
}

.sfc-formularz textarea {
	resize: vertical;
}

.sfc-formularz input:focus,
.sfc-formularz select:focus,
.sfc-formularz textarea:focus {
	outline: 2px solid var(--sfc-akcent);
	outline-offset: 1px;
}

.sfc-zgoda {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	color: var(--sfc-dark-muted);
	font-size: 13px;
	line-height: 1.5;
}

.sfc-zgoda input {
	width: auto;
	margin-top: 3px;
}

.sfc-pulapka {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.sfc-wyslij {
	padding: 14px 20px;
	border: 0;
	border-radius: 2px;
	color: var(--sfc-ink);
	background: var(--sfc-akcent);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.sfc-wyslij:hover {
	background: #f0c880;
}

.sfc-komunikat {
	padding: 12px 14px;
	border-radius: 2px;
	font-size: 14px;
	line-height: 1.5;
}

.sfc-komunikat--ok {
	color: #0f2a17;
	background: #cfe6d3;
}

.sfc-komunikat--blad {
	color: #fff;
	background: #a8452f;
}

/* -------------------------------- FAQ ------------------------------- */

.sfc-faq {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 32px;
}

.sfc-faq__pozycja {
	padding: 4px 0;
	border-bottom: 1px solid var(--sfc-line);
}

.sfc-faq__pozycja summary {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.sfc-faq__pozycja summary::-webkit-details-marker {
	display: none;
}

.sfc-faq__znak {
	color: var(--sfc-gold);
	font-size: 20px;
	font-weight: 400;
}

.sfc-faq__pozycja[open] .sfc-faq__znak {
	transform: rotate(45deg);
}

.sfc-faq__pozycja p {
	max-width: 56ch;
	padding-bottom: 16px;
	color: var(--sfc-body);
	font-size: 14px;
	line-height: 1.65;
}

/* ------------------------------ Stopka ------------------------------ */

.sfc-stopka {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: space-between;
	padding: 44px 32px;
	color: var(--sfc-cream-2);
	background: var(--sfc-ink);
	font-size: 14px;
	line-height: 1.7;
}

.sfc-stopka__firma strong {
	display: block;
	color: var(--sfc-cream);
	font-size: 16px;
}

.sfc-stopka__linki {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	align-items: flex-start;
	font-family: var(--sfc-mono);
	font-size: 13px;
}

.sfc-stopka a {
	color: var(--sfc-cream-2);
	text-decoration: none;
}

.sfc-stopka a:hover {
	color: var(--sfc-akcent);
}

/* --------------------- Przełącznik punktów -------------------------- */

.sfc-przelacznik {
	max-width: var(--sfc-szer);
	margin: 0 auto;
	padding: 54px 32px 0;
}

.sfc-przelacznik__tytul {
	margin: 0 0 12px;
	color: var(--sfc-gold);
	font-family: var(--sfc-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sfc-przelacznik__opcje {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--sfc-line);
}

.sfc-przelacznik__opcja {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 11px 18px;
	border: 1px solid var(--sfc-line);
	border-radius: 2px;
	background: var(--sfc-panel);
	color: var(--sfc-ink);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sfc-przelacznik__opcja:hover {
	border-color: var(--sfc-ink);
}

.sfc-przelacznik__opcja--inne {
	border-color: var(--sfc-akcent);
}

.sfc-przelacznik__znacznik {
	color: var(--sfc-gold);
	font-family: var(--sfc-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Widoki warunków — odsłaniane regułami generowanymi w PHP. */
.sfc-widok {
	display: none;
}

/* Jedyny widok, gdy nie ma elewatorów i nie ma czego przełączać. */
.sfc-widok--sam {
	display: block;
}

/* Punkt bez skupu: zamiast tabel z cudzymi warunkami pokazujemy sam komunikat.
   Ma być wyraźny, ale nie krzykliwy — to informacja, nie błąd. */
.sfc-brak-skupu {
	padding: 26px 28px;
	border: 1px solid var(--sfc-line);
	border-left: 4px solid var(--sfc-nie);
	border-radius: 2px;
	background: var(--sfc-panel);
}

.sfc-brak-skupu__tytul {
	margin: 0;
	color: var(--sfc-ink);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.sfc-brak-skupu__opis {
	max-width: 62ch;
	margin: 10px 0 0;
	color: var(--sfc-body);
	font-size: 15px;
	line-height: 1.6;
}

.sfc-brak-skupu__opis strong {
	color: var(--sfc-ink);
	font-weight: 600;
}

@media (max-width: 620px) {
	.sfc-brak-skupu {
		padding: 20px;
	}

	.sfc-brak-skupu__tytul {
		font-size: 18px;
	}
}

.sfc-etykieta-inne {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 8px;
	border-radius: 2px;
	background: var(--sfc-akcent);
	color: var(--sfc-ink);
	font-family: var(--sfc-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: middle;
}

@media (max-width: 900px) {
	.sfc-przelacznik {
		padding-left: 20px;
		padding-right: 20px;
	}

	.sfc-przelacznik__opcja {
		flex: 1 1 45%;
	}
}

/* --------------------------- Responsywność -------------------------- */

@media (max-width: 1080px) {
	.sfc-karty {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {

	.sfc-hero__gora,
	.sfc-hero__dol,
	.sfc-sekcja {
		padding-left: 20px;
		padding-right: 20px;
	}

	.sfc-hero__tytul {
		font-size: 38px;
	}

	.sfc-hero__towar {
		font-size: 30px;
	}

	.sfc-hero__dol,
	.sfc-sekcja--dwie,
	.sfc-zgloszenie,
	.sfc-formularz,
	.sfc-faq {
		grid-template-columns: 1fr;
	}

	.sfc-pole-form--pelne,
	.sfc-zgoda,
	.sfc-wyslij,
	.sfc-komunikat {
		grid-column: span 1;
	}

	.sfc-zgloszenie {
		padding: 26px 20px;
		gap: 32px;
	}

	.sfc-sekcja {
		padding-top: 48px;
	}
}

@media (max-width: 620px) {
		.sfc-stopka {
		padding-left: 20px;
		padding-right: 20px;
	}

	.sfc-karty {
		grid-template-columns: 1fr;
	}

	.sfc-hero__tytul {
		font-size: 32px;
	}

	.sfc-fakty {
		gap: 22px;
	}

	.sfc-fakt dd {
		font-size: 21px;
	}

	.sfc-zakladka {
		flex: 1 1 100%;
	}
}

@media print {
	.sfc-panel {
		display: block !important;
	}

	.sfc-formularz {
		display: none;
	}
}

/* ---------------------------- Kalkulator ---------------------------- */

.sfc-kalk {
	padding: 26px 28px;
	border: 1px solid var(--sfc-line);
	border-radius: 2px;
	background: var(--sfc-panel);
}

/*
 * Jedno pole na wiersz, suwak przez całą szerokość.
 *
 * Nie chodzi o estetykę: suwak wilgotności ma 450 pozycji (0–45 co 0,1).
 * W układzie trzykolumnowym wychodziło ~1,5 pozycji na piksel, więc
 * przeciąganie myszą przeskakiwało co 0,2–0,3 zamiast co 0,1. Na pełnej
 * szerokości wypada 0,4 pozycji na piksel i każda wartość jest osiągalna.
 */
.sfc-kalk__form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.sfc-kalk__pole {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sfc-kalk__etykieta {
	font-size: 13px;
	font-weight: 600;
	color: var(--sfc-ink);
}

.sfc-kalk__etykieta span {
	color: var(--sfc-muted);
	font-weight: 400;
}

.sfc-kalk__sterowanie {
	display: grid;
	grid-template-columns: 1fr 104px;
	gap: 16px;
	align-items: center;
}

.sfc-kalk__liczba {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid var(--sfc-line);
	border-radius: 2px;
	background: #fff;
	color: var(--sfc-ink);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	text-align: right;
}

.sfc-kalk__liczba:focus {
	outline: 2px solid var(--sfc-akcent);
	outline-offset: 1px;
}

/* Suwak stylujemy ręcznie, bo domyślny wygląd rozjeżdża się między
   przeglądarkami i nie trzyma kolorystyki cennika. */
.sfc-kalk__suwak {
	width: 100%;
	height: 22px;
	margin: 0;
	padding: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.sfc-kalk__suwak:focus-visible {
	outline: 2px solid var(--sfc-akcent);
	outline-offset: 2px;
}

.sfc-kalk__suwak::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 2px;
	background: var(--sfc-line);
}

.sfc-kalk__suwak::-moz-range-track {
	height: 4px;
	border-radius: 2px;
	background: var(--sfc-line);
}

.sfc-kalk__suwak::-webkit-slider-thumb {
	width: 18px;
	height: 18px;
	margin-top: -7px;
	border: 0;
	border-radius: 50%;
	background: var(--sfc-ink);
	-webkit-appearance: none;
	appearance: none;
}

.sfc-kalk__suwak::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: 0;
	border-radius: 50%;
	background: var(--sfc-ink);
}

@media (max-width: 620px) {
	.sfc-kalk__sterowanie {
		grid-template-columns: 1fr 78px;
	}
}

.sfc-kalk__wynik {
	margin-top: 22px;
}

.sfc-kalk__podpowiedz {
	padding: 14px 16px;
	border-left: 3px solid var(--sfc-line);
	background: var(--sfc-panel-alt);
	color: var(--sfc-muted);
	font-size: 14px;
}

.sfc-kalk__tabela {
	min-width: 640px;
}

.sfc-kalk__szczegoly {
	display: block;
	margin-top: 3px;
	color: var(--sfc-muted);
	font-family: var(--sfc-mono);
	font-size: 11px;
	font-weight: 400;
}

.sfc-kalk__ostrzezenie {
	display: block;
	margin-top: 3px;
	color: #a8452f;
	font-family: var(--sfc-mono);
	font-size: 11px;
	font-weight: 600;
}

.sfc-kalk__plus  { color: var(--sfc-ok); font-weight: 600; }
.sfc-kalk__minus { color: #a8452f; font-weight: 600; }

.sfc-kalk__brak td {
	color: var(--sfc-nie);
	font-style: italic;
}

.sfc-kalk__zastrzezenie {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--sfc-line-soft);
	color: var(--sfc-muted);
	font-size: 13px;
	line-height: 1.6;
}

@media (max-width: 620px) {
	.sfc-kalk {
		padding: 20px;
	}
}

/* ------------------- Tabele na wąskim ekranie ----------------------- */

/*
 * Poniżej 780 px tabele przestają być tabelami, a stają się listą kart —
 * jedna karta = jeden wiersz, nagłówki kolumn wracają jako etykiety przy
 * wartościach (atrybut data-etykieta w HTML-u i w kalkulatorze).
 *
 * Powód: żadna z tych tabel nie mieści się na telefonie. Cennik ma 3 kolumny
 * i 720 px minimum, wynik kalkulatora — 5 kolumn i 640 px. Przewijanie w bok
 * działa, ale trzeba je odkryć; przy tabeli z ceną to za duże ryzyko, że ktoś
 * nie zobaczy kolumny \"Wartość dostawy\" i wyjdzie z niepełną informacją.
 *
 * Struktura HTML zostaje bez zmian — nagłówki kolumn nadal siedzą w <thead>,
 * tyle że schowane dla oka. Czytnik ekranu i wyszukiwarka widzą normalną tabelę.
 */
@media (max-width: 780px) {

	.sfc-tabela-ramka {
		border: 0;
		border-radius: 0;
		background: transparent;
		background-image: none;
		overflow-x: visible;
	}

	.sfc-tabela-hint {
		display: none;
	}

	.sfc-tabela {
		display: block;
		width: 100%;
		min-width: 0;
	}

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

	.sfc-tabela tbody {
		display: block;
	}

	.sfc-tabela tbody tr {
		display: block;
		margin-bottom: 12px;
		padding: 2px 16px 4px;
		border: 1px solid var(--sfc-line);
		border-radius: 2px;
		background: var(--sfc-panel);
	}

	.sfc-tabela tbody tr:last-child {
		margin-bottom: 0;
	}

	/*
	 * Reguła "ostatni wiersz bez kreski" ma sens w tabeli, ale nie w kartach:
	 * tam kreski oddzielają pola WEWNĄTRZ karty, więc muszą wrócić także
	 * w ostatniej. Kasujemy ją tu jawnie, bo bije selektorami niżej.
	 */
	.sfc-tabela tbody tr:last-child th,
	.sfc-tabela tbody tr:last-child td {
		border-bottom: 1px solid var(--sfc-line-soft);
	}

	/* Nazwa punktu / parametru to tytuł karty — bez etykiety, przez całą szerokość. */
	.sfc-tabela tbody tr th[scope="row"],
	.sfc-tabela tbody tr:last-child th[scope="row"] {
		display: block;
		padding: 14px 0 12px;
		border-bottom: 1px solid var(--sfc-line);
		font-size: 16px;
	}

	/*
	 * Etykieta z lewej, wartość z prawej. \"margin-right: auto\" na etykiecie
	 * rozpycha je od siebie, a nie space-between — dzięki temu wartość
	 * złożona z kilku elementów (\"1 234\" + <span>zł/t</span>) trzyma się kupy
	 * zamiast rozjechać po całej szerokości.
	 */
	.sfc-tabela tbody td {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		align-items: baseline;
		padding: 11px 0;
		border-bottom: 1px solid var(--sfc-line-soft);
	}

	.sfc-tabela tbody td::before {
		flex: 0 0 auto;
		margin-right: auto;
		color: var(--sfc-muted);
		font-family: var(--sfc-mono);
		font-size: 11px;
		font-weight: 400;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		content: attr(data-etykieta);
	}

	.sfc-tabela tbody tr td:last-child {
		border-bottom: 0;
	}

	/* Komórka bez etykiety (np. \"nie skupujemy tego towaru\") — cała szerokość. */
	.sfc-tabela tbody td:not([data-etykieta]) {
		display: block;
	}

	/* Dopiski pod wartością łamią się do własnego wiersza karty. */
	.sfc-kalk__szczegoly,
	.sfc-kalk__ostrzezenie {
		flex: 1 0 100%;
		margin-top: 5px;
	}

	.sfc-kalk__tabela {
		min-width: 0;
	}

	.sfc-tabela__cena {
		font-size: 17px;
	}
}