/*
 * Opis produktu — treść generowana w opisach kart produktów.
 *
 * Przeniesione ze snippetu WPCode 44085 („STALESIA – STYLE OPISU PRODUKTU v2"),
 * który wchodził w <style> na KAŻDEJ podstronie (5,9 KB), a potrzebny jest tylko
 * na karcie produktu — motyw wczytuje ten plik warunkowo (inc/assets.php).
 *
 * Zmienne zawężone z :root do kontenera opisu: nigdzie indziej nie były używane,
 * a w :root mieszały się z paletą motywu. Wartości bez zmian, żeby wygląd został.
 * Pominięte reguły martwe: .product-lead, .lead-icon, .check-icon — sprawdzone
 * na całym katalogu, używa ich 0 produktów.
 *
 * Ikony: opisy używają czterech znaków Font Awesome. Dotąd ciągnął je snippet
 * 44089 — cały arkusz FA z CDN, na każdej podstronie, dla czterech ikon. Tutaj
 * te same cztery jako maski SVG: kolor bierze `currentColor`, więc reguły
 * `color`/`font-size` z opisu działają jak wcześniej.
 * Ikony: Font Awesome Free 6.5.1, licencja CC BY 4.0, https://fontawesome.com
 */

.stalesia-product-desc {
	--stalesia-accent: #2563EB;
	--stalesia-accent-light: #3B82F6;
	--stalesia-accent-dark: #1D4ED8;
	--stalesia-accent-bg: rgba(37, 99, 235, 0.06);
	--stalesia-warning: #E97316;
	--stalesia-warning-light: #FFF7ED;
	--stalesia-warning-border: #FDBA74;
	--stalesia-text: #1F2937;
	--stalesia-text-light: #6B7280;
	--stalesia-bg-light: #F9FAFB;
	--stalesia-border: #E5E7EB;
	--stalesia-white: #FFFFFF;

	color: var(--stalesia-text);
	line-height: 1.6;
	max-width: 100%;
	padding: 0.5em 0;
}

/* ===== IKONY (maski SVG zamiast fontu z CDN) ===== */
.stalesia-product-desc i[class*="fa-"] {
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	vertical-align: -0.125em;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.stalesia-product-desc .fa-file-lines {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M64%200C28.7%200%200%2028.7%200%2064V448c0%2035.3%2028.7%2064%2064%2064H320c35.3%200%2064-28.7%2064-64V160H256c-17.7%200-32-14.3-32-32V0H64zM256%200V128H384L256%200zM112%20256H272c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016H112c-8.8%200-16-7.2-16-16s7.2-16%2016-16zm0%2064H272c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016H112c-8.8%200-16-7.2-16-16s7.2-16%2016-16zm0%2064H272c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016H112c-8.8%200-16-7.2-16-16s7.2-16%2016-16z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20d%3D%22M64%200C28.7%200%200%2028.7%200%2064V448c0%2035.3%2028.7%2064%2064%2064H320c35.3%200%2064-28.7%2064-64V160H256c-17.7%200-32-14.3-32-32V0H64zM256%200V128H384L256%200zM112%20256H272c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016H112c-8.8%200-16-7.2-16-16s7.2-16%2016-16zm0%2064H272c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016H112c-8.8%200-16-7.2-16-16s7.2-16%2016-16zm0%2064H272c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016H112c-8.8%200-16-7.2-16-16s7.2-16%2016-16z%22%2F%3E%3C%2Fsvg%3E");
}

.stalesia-product-desc .fa-circle-info {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%20512A256%20256%200%201%200%20256%200a256%20256%200%201%200%200%20512zM216%20336h24V272H216c-13.3%200-24-10.7-24-24s10.7-24%2024-24h48c13.3%200%2024%2010.7%2024%2024v88h8c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024H216c-13.3%200-24-10.7-24-24s10.7-24%2024-24zm40-208a32%2032%200%201%201%200%2064%2032%2032%200%201%201%200-64z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%20512A256%20256%200%201%200%20256%200a256%20256%200%201%200%200%20512zM216%20336h24V272H216c-13.3%200-24-10.7-24-24s10.7-24%2024-24h48c13.3%200%2024%2010.7%2024%2024v88h8c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024H216c-13.3%200-24-10.7-24-24s10.7-24%2024-24zm40-208a32%2032%200%201%201%200%2064%2032%2032%200%201%201%200-64z%22%2F%3E%3C%2Fsvg%3E");
}

.stalesia-product-desc .fa-triangle-exclamation {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%2032c14.2%200%2027.3%207.5%2034.5%2019.8l216%20368c7.3%2012.4%207.3%2027.7%20.2%2040.1S486.3%20480%20472%20480H40c-14.3%200-27.6-7.7-34.7-20.1s-7-27.8%20.2-40.1l216-368C228.7%2039.5%20241.8%2032%20256%2032zm0%20128c-13.3%200-24%2010.7-24%2024V296c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24V184c0-13.3-10.7-24-24-24zm32%20224a32%2032%200%201%200%20-64%200%2032%2032%200%201%200%2064%200z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%2032c14.2%200%2027.3%207.5%2034.5%2019.8l216%20368c7.3%2012.4%207.3%2027.7%20.2%2040.1S486.3%20480%20472%20480H40c-14.3%200-27.6-7.7-34.7-20.1s-7-27.8%20.2-40.1l216-368C228.7%2039.5%20241.8%2032%20256%2032zm0%20128c-13.3%200-24%2010.7-24%2024V296c0%2013.3%2010.7%2024%2024%2024s24-10.7%2024-24V184c0-13.3-10.7-24-24-24zm32%20224a32%2032%200%201%200%20-64%200%2032%2032%200%201%200%2064%200z%22%2F%3E%3C%2Fsvg%3E");
}

.stalesia-product-desc .fa-exclamation {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%20512%22%3E%3Cpath%20d%3D%22M64%2064c0-17.7-14.3-32-32-32S0%2046.3%200%2064V320c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V64zM32%20480a40%2040%200%201%200%200-80%2040%2040%200%201%200%200%2080z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%20512%22%3E%3Cpath%20d%3D%22M64%2064c0-17.7-14.3-32-32-32S0%2046.3%200%2064V320c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V64zM32%20480a40%2040%200%201%200%200-80%2040%2040%200%201%200%200%2080z%22%2F%3E%3C%2Fsvg%3E");
}

/* ===== SEKCJA OPISU ===== */
.stalesia-product-desc .description-section {
	margin-bottom: 2.5em;
}

.stalesia-product-desc .description-text {
	margin: 0;
	color: var(--stalesia-text);
	line-height: 1.75;
	text-align: justify;
}

/* ===== NAGŁÓWKI SEKCJI ===== */
.stalesia-product-desc .section-title {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5em;
	font-size: 1.2em;
	font-weight: 600;
	color: var(--stalesia-text);
	margin: 0 0 1em 0;
	padding-bottom: 0.75em;
	border-bottom: 2px solid var(--stalesia-border);
	line-height: 1.3;
}

/* Po ikonie stoi w treści <br>, który w kontenerze flex robił pusty wiersz. */
.stalesia-product-desc .section-title br {
	display: none;
}

.stalesia-product-desc .section-title .section-icon {
	color: var(--stalesia-accent);
	font-size: 1.4em;
	flex-shrink: 0;
}

/* ===== TABELA SPECYFIKACJI ===== */
.stalesia-product-desc .specs-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin-bottom: 2.5em;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	border: 1px solid var(--stalesia-border);
}

.stalesia-product-desc .specs-table tr {
	transition: background-color 0.15s ease;
}

.stalesia-product-desc .specs-table tr:not(:last-child) td {
	border-bottom: 1px solid var(--stalesia-border);
}

.stalesia-product-desc .specs-table td {
	padding: 1em 1.25em;
	vertical-align: middle;
	/* Wartości bywają jednym ciągiem bez spacji („S-RR/114.30X03.05/1.4404/NL”,
	   pełna lista oznaczeń gatunku) — bez łamania rozpychały tabelę ponad
	   szerokość ekranu i całą stronę dawało się przesuwać w bok. */
	overflow-wrap: anywhere;
}

.stalesia-product-desc .specs-table .spec-label {
	font-weight: 500;
	color: var(--stalesia-text-light);
	width: 40%;
	background: var(--stalesia-bg-light);
}

.stalesia-product-desc .specs-table .spec-value {
	color: var(--stalesia-text);
	background: var(--stalesia-white);
}

.stalesia-product-desc .specs-table .spec-value.highlight {
	font-weight: 600;
}

.stalesia-product-desc .specs-table .spec-value code {
	background: var(--stalesia-bg-light);
	padding: 0.25em 0.6em;
	border-radius: 4px;
	font-size: 0.9em;
	color: var(--stalesia-text);
}

.stalesia-product-desc .spec-link {
	color: var(--stalesia-accent);
	/* Odnośnik w zdaniu: podkreślony, nie tylko kolorem (WCAG 1.4.1, audyt 25.09). */
	text-decoration: underline;
	text-underline-offset: 2px;
	font-size: 0.9em;
}

.stalesia-product-desc .specs-table .spec-link:hover {
	text-decoration: underline;
}

.stalesia-product-desc .specs-table tr:hover .spec-label,
.stalesia-product-desc .specs-table tr:hover .spec-value {
	background: rgba(250, 250, 250, 0.8);
}

/* ===== LISTA INFORMACJI ===== */
.stalesia-product-desc .info-section {
	margin-bottom: 2em;
}

.stalesia-product-desc .info-list li {
	gap: 0.8em;
	padding: 0.4em 0;
	border-bottom: 1px solid var(--stalesia-border);
	color: var(--stalesia-text);
}

.stalesia-product-desc .info-list li:last-child {
	border-bottom: none;
}

.stalesia-product-desc .info-list li span {
	flex: 1;
}

.stalesia-product-desc .info-list li strong {
	color: var(--stalesia-text);
}

/* ===== OSTRZEŻENIE ===== */
.stalesia-product-desc .notice-box {
	display: flex;
	align-items: flex-start;
	gap: 0.4em;
	padding: 1em 1em;
	background: var(--stalesia-warning-light);
	border: 1px solid var(--stalesia-warning-border);
	border-left: 4px solid var(--stalesia-warning);
	border-radius: 0 10px 10px 0;
	margin-top: 2em;
}

.stalesia-product-desc .notice-box br {
	display: none;
}

.stalesia-product-desc .notice-icon {
	color: var(--stalesia-warning);
	font-size: 1.1em;
	flex-shrink: 0;
}

.stalesia-product-desc .notice-text {
	color: #9A3412;
	font-size: 0.92em;
	line-height: 1.5;
}

/* ===== TELEFON ===== */
@media (max-width: 640px) {
	/* Na telefonie tabela idzie w pion: etykieta nad wartością. W dwóch
	   kolumnach wartość miała ~150 px, więc lista oznaczeń gatunku łamała się
	   na pięć wierszy, a kod produktu (jeden ciąg bez spacji) rozpychał tabelę
	   poza ekran. W pionie wartość ma całą szerokość karty. */
	.stalesia-product-desc .specs-table,
	.stalesia-product-desc .specs-table tbody,
	.stalesia-product-desc .specs-table tr,
	.stalesia-product-desc .specs-table td {
		display: block;
		width: auto;
	}

	.stalesia-product-desc .specs-table tr:not(:last-child) {
		border-bottom: 1px solid var(--stalesia-border);
	}

	.stalesia-product-desc .specs-table tr:not(:last-child) td {
		border-bottom: 0;
	}

	.stalesia-product-desc .specs-table .spec-label {
		width: auto;
		background: transparent;
		padding: 0.85em 1em 0.15em;
		font-size: 0.8em;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.stalesia-product-desc .specs-table .spec-value {
		padding: 0 1em 0.85em;
		font-size: 0.95em;
	}

	.stalesia-product-desc .info-list li {
		font-size: 0.95em;
	}

	.stalesia-product-desc .notice-box {
		padding: 1em;
	}
}