/* Warstwa zgodności ze skrótami Flatsome.
   Odtwarza układ treści zapisanych w UX Builderze. Wyłącznie struktura:
   siatka, odstępy, obrazy. Wygląd pozostaje z systemu marki.
   Docelowo do usunięcia, gdy strony trafią do bloków lub szablonów.

   Świadomie bez @layer: arkusze przeniesione z makiety są poza warstwami,
   a reguła spoza warstwy zawsze bije regułę w warstwie, niezależnie od
   kolejności wczytywania. */

.fz-row {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 24px;
	align-items: start;
	margin: 0 0 24px;
}

.fz-col {
	grid-column: span var(--fz-span, 12);
	min-width: 0;
}

@media (max-width: 850px) {

	.fz-col {
		grid-column: span 12;
	}
}

.fz-section {
	margin: 0 0 48px;
}

.fz-text > :first-child,
.fz-box > :first-child {
	margin-top: 0;
}

.fz-text > :last-child,
.fz-box > :last-child {
	margin-bottom: 0;
}

.fz-box {
	padding: 24px;
	background: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
}

/* Pole z ikoną (featured_box z img): ikona obok tekstu, po stronie z pos. */
.fz-box--ikona {
	display: grid;
	grid-template-columns: var(--fz-ikona, 60px) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.fz-box--ikona-prawa {
	grid-template-columns: minmax(0, 1fr) var(--fz-ikona, 60px);
}

.fz-box--ikona-prawa .fz-box-ikona {
	order: 2;
}

.fz-box-ikona {
	display: block;
	width: var(--fz-ikona, 60px);
	height: auto;
}

/* W wąskiej kolumnie (4 z 12 w kolumnie opisu produktu to ok. 270 px) ikona
   obok tekstu zostawiała 155 px na tekst i pole miało ponad 900 px wysokości.
   Kolumna jest kontenerem zapytań, więc decyduje jej szerokość, nie ekranu. */
.fz-col {
	container-type: inline-size;
}

@container (max-width: 360px) {

	.fz-box {
		padding: 16px;
	}

	.fz-box--ikona,
	.fz-box--ikona-prawa {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.fz-box--ikona-prawa .fz-box-ikona {
		order: 0;
	}
}

.fz-box-tresc > :first-child {
	margin-top: 0;
}

.fz-box-tresc > :last-child {
	margin-bottom: 0;
}

/* Siatka bezpieczeństwa, gdyby filtr sprzątający nie złapał jakiegoś wariantu:
   pusty akapit lub łamanie wiersza nie może zająć komórki siatki. */
.fz-row > p:empty,
.fz-row > br,
.fz-col > p:empty,
.fz-col > br,
.fz-section > p:empty,
.fz-section > br,
.fz-text > p:empty,
.fz-box > p:empty {
	display: none;
}

/* Separator bloku edytora (np. pod skrótem konta na stronie „Moje konto”).
   Bez motywu blokowego rysował się szarą linią 2 px. */
hr.wp-block-separator {
	height: 0;
	margin: var(--sp-s4) 0;
	border: 0;
	border-top: 1px solid var(--sp-line);
	background: none;
	opacity: 1;
}

.fz-image,
.fz-banner {
	margin: 0 0 24px;
}

.fz-image img,
.fz-banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sp-radius);
}

.fz-banner {
	position: relative;
}

.fz-banner-tresc {
	padding: 24px 0 0;
}

.fz-gap {
	height: var(--fz-gap, 32px);
}

.fz-divider {
	height: 1px;
	margin: 32px 0;
	border: 0;
	background: var(--sp-line);
}

.fz-title {
	margin: 0 0 16px;
}

.fz-details {
	padding: 16px 0;
	border-bottom: 1px solid var(--sp-line);
}

.fz-details summary {
	cursor: pointer;
	font-size: 20px;
}

.fz-html {
	margin: 0 0 24px;
}

/* Strony przeniesione z UX Buildera były układami pełnej szerokości.
   Kolumna czytelnicza (720 px) zwężała ich kolumny do listew, dlatego
   taka strona rezygnuje z siatki artykułu. */

.art--pelna {
	grid-template-columns: minmax(0, 1fr);
}

/* Akapity i listy na całą szerokość treści (decyzja właściciela 14.09.2026 - przy 68 znakach
   zostawała przerwa po prawej). */
.art--pelna .art-tresc p,
.art--pelna .art-tresc li,
.art--pelna .fz-col p {
	max-width: none;
}

/* Arkusz "Sklep" na telefonie: pod czterema kafelkami (ustawienia motywu) i „Wszystkie produkty”
   lista odnośników z menu „Menu na telefonie” (inc/menu.php). */

.sp-naglowek-arkusz-karta > .sp-naglowek-arkusz-lista {
	margin-top: var(--sp-s2);
	border-top: 1px solid var(--sp-line);
}

.sp-naglowek-arkusz-lista {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-naglowek-arkusz-lista a {
	display: block;
	padding: 12px 0;
	min-height: 48px;
	color: var(--sp-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--sp-line);
}

.sp-naglowek-arkusz-lista ul {
	margin: 0 0 8px 16px;
	padding: 0;
	list-style: none;
}

.sp-naglowek-arkusz-lista ul a {
	padding: 10px 0;
	min-height: 44px;
	color: var(--sp-muted);
	border-bottom: 0;
}