/*
 * Strona Cechy produktu (`/features/`, post 2113) — układ: design-ref/spec/features.md; treść (faza LP): docs/STARE-STRONY.md §2 (F1–F5).
 * Sekcje F2–F5 (mikroorganizm, skład, od szczepu do produktu, pytania) mają ten sam układ na stronie Opinie (O2–O5, STARE-STRONY §1):
 * opinie.css ładuje ten plik jako zależność, dlatego reguły są w zakresie `:is(.ts-page-features, .ts-page-opinie)`.
 * Wzorce: patterns/features-*.php (i opinie-*.php). Komponenty (C1–C21) — components.css, bez kopiowania ich CSS.
 *
 * Geometria jak Elementor: sekcja z paddingiem 10 px po bokach, wnętrze 1300 px, kolumny z paddingiem 10 px
 * (treść x = 80 przy 1440). Punkty przełamania: ≤1024, ≤767.
 */

/* ==========================================================================
   Wspólne: sekcja, wnętrze, zerowanie odstępów przepływu bloków
   ========================================================================== */

:is(.ts-page-features, .ts-page-opinie) .wp-block-post-content > .ts-features-section {
	margin-block: 0;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-section {
	box-sizing: border-box;
	padding: 100px 10px;
}

:is(.ts-page-features, .ts-page-opinie) :is(.ts-features-section, .ts-features-section .wp-block-group) > * {
	margin-block: 0;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-section__inner {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 1300px;
	margin-inline: auto;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-section :is(.ts-features-section__inner, .ts-features-grid__list) > * {
	box-sizing: border-box;
	min-width: 0;
}

/* Zdjęcia sekcji: bez marginesów figure, zaokrąglenie 20 px, kadrowanie cover */
:is(.ts-page-features, .ts-page-opinie) .ts-features-section :where(.wp-block-image:not(.ts-icon-circle)) {
	margin: 0;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-section :where(.wp-block-image:not(.ts-icon-circle)) img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Tytuł z ikoną check (What We Do) — ikona jak C12 */
:is(.ts-page-features, .ts-page-opinie) .ts-features-about__point-title::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 1px;
	width: 18px;
	height: 18px;
	background-color: var(--wp--preset--color--accent);
	transform: translateY(-50%);
	-webkit-mask: url("../../icons/check-circle.svg") center / contain no-repeat;
	mask: url("../../icons/check-circle.svg") center / contain no-repeat;
}

@media (max-width: 1024px) {
	:is(.ts-page-features, .ts-page-opinie) .ts-features-section {
		padding-block: 50px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-section__inner {
		justify-content: center;
		gap: 10px;
	}
}

/* ==========================================================================
   S2 Features: siatka 6 kart (wariant z ciemnym tłem wjeżdżającym łukiem)
   ========================================================================== */

.ts-page-features .ts-features-grid__list {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	max-width: 1300px;
	margin-inline: auto;
	padding: 10px;
}

.ts-page-features .ts-features-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: 100px;
	padding: 40px;
	overflow: hidden;
	border: 1px solid var(--ts-divider);
	border-radius: var(--ts-radius-card);
}

/* Tło karty aktywnej/najechanej: kopuła poza dołem karty → pełne tło (Sellsmart .features-item-cbd::before, 0,6 s) */
.ts-page-features .ts-features-card::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 500px 500px 0 0;
	background-color: var(--wp--preset--color--primary);
	transition: all 0.6s ease;
}

.ts-page-features .ts-features-card > .ts-icon-circle {
	align-self: flex-start;
	margin: 0 0 30px;
}

.ts-page-features .ts-features-card .ts-features-card__title {
	margin: 0 0 15px;
	color: var(--wp--preset--color--primary);
	font-size: var(--ts-fs-h3);
	font-weight: 700;
	line-height: 1.2;
	transition: color 0.4s ease-in-out;
}

.ts-page-features .ts-features-card .ts-features-card__text {
	color: var(--wp--preset--color--body-text);
	font-size: 16px;
	line-height: 1.7;
	transition: color 0.4s ease-in-out;
}

.ts-page-features .ts-features-card.is-active::before {
	top: 0;
	border-radius: 0;
}

.ts-page-features .ts-features-card.is-active :is(.ts-features-card__title, .ts-features-card__text) {
	color: var(--wp--preset--color--white);
}

/*
 * Najechana karta przejmuje stan aktywny (wzorzec: JS przenosi .active na ostatnio najechaną kartę).
 * Bez JS: przy najechaniu innej karty domyślna karta 2 wraca do spoczynku (:has), po zjechaniu z siatki wraca aktywna.
 */
@media (hover: hover) {
	.ts-page-features .ts-features-card:hover::before {
		top: 0;
		border-radius: 0;
	}

	.ts-page-features .ts-features-card:hover :is(.ts-features-card__title, .ts-features-card__text) {
		color: var(--wp--preset--color--white);
	}

	.ts-page-features .ts-features-grid__list:has(> .ts-features-card:hover) > .ts-features-card.is-active:not(:hover)::before {
		top: 100%;
		border-radius: 500px 500px 0 0;
	}

	.ts-page-features .ts-features-grid__list:has(> .ts-features-card:hover) > .ts-features-card.is-active:not(:hover) .ts-features-card__title {
		color: var(--wp--preset--color--primary);
	}

	.ts-page-features .ts-features-grid__list:has(> .ts-features-card:hover) > .ts-features-card.is-active:not(:hover) .ts-features-card__text {
		color: var(--wp--preset--color--body-text);
	}
}

@media (max-width: 1024px) {
	.ts-page-features .ts-features-grid__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ts-page-features .ts-features-card {
		padding: 30px;
	}
}

@media (max-width: 767px) {
	.ts-page-features .ts-features-grid__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.ts-page-features .ts-features-card {
		padding: 20px;
	}

	.ts-page-features .ts-features-card .ts-features-card__title {
		margin-bottom: 10px;
	}
}

/* ==========================================================================
   S3 What We Do / Co wyróżnia TheSybin: dwa zdjęcia + odznaka | etykieta, h2, 2 punkty
   ========================================================================== */

:is(.ts-page-features, .ts-page-opinie) .ts-features-about__media {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 49%;
	padding: 10px 20px 10px 10px;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-about__img {
	position: relative;
	overflow: hidden;
	border-radius: var(--ts-radius-card);
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-about__img img {
	border-radius: var(--ts-radius-card);
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-about__img--main {
	width: calc(100% - 50px);
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-about__img--main img {
	aspect-ratio: 1 / 0.73;
}

/* Features, desktop: wzorzec przycina dół pierwszego zdjęcia (plik 554 px węższy od kolumny) do 404 px — 557×406,6 → 557×404; zdjęcie 2 zaczyna się 2,6 px wyżej. Opinie: bez przycięcia. */
@media (min-width: 1025px) {
	.ts-page-features .ts-features-about__img--main {
		aspect-ratio: 557 / 404;
	}
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-about__img--overlap {
	align-self: flex-end;
	width: 410px;
	max-width: 100%;
	margin-top: -90px;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-about__img--overlap img {
	aspect-ratio: 1 / 0.62;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-about__badge {
	position: absolute;
	z-index: 1;
	bottom: 50px;
	left: 60px;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-about__content {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 51%;
	padding: 10px 10px 10px 40px;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-about__points {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-top: 25px;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-about__point {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-about__point:first-child {
	padding-bottom: 40px;
	border-bottom: 1px solid var(--ts-divider-dark);
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-about .ts-features-about__point-title {
	position: relative;
	padding-left: 29px;
	color: var(--wp--preset--color--white);
	font-size: var(--ts-fs-h3);
	font-weight: 700;
	line-height: 1.2;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-about__point p {
	color: var(--wp--preset--color--white);
	font-size: 16px;
	line-height: 1.7;
}

@media (max-width: 1024px) {
	:is(.ts-page-features, .ts-page-opinie) .ts-features-about__media {
		width: 77%;
		padding: 10px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-about__content {
		gap: 10px;
		width: 100%;
		padding: 10px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-about__points {
		gap: 30px;
		margin-top: 20px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-about__point:first-child {
		padding-bottom: 30px;
	}
}

@media (max-width: 767px) {
	:is(.ts-page-features, .ts-page-opinie) .ts-features-about__media {
		width: 100%;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-about__img--overlap {
		width: 250px;
		margin-top: -50px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-about__badge {
		bottom: 35px;
		left: 30px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-about__points {
		gap: 20px;
	}

	/* Telefon: odstęp tytuł → akapit 10 px tylko w 1. punkcie (2. punkt wzorca zostaje przy 15 px) */
	:is(.ts-page-features, .ts-page-opinie) .ts-features-about__point:first-child {
		gap: 10px;
		padding-bottom: 20px;
	}
}

/* ==========================================================================
   S4 Benefits / Korzyści: zdjęcie z małą odznaką | etykieta, h2, 4 karty; pasek 3 pozycji
   ========================================================================== */

:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits .ts-features-section__inner {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: 70px;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 10px;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__media {
	position: relative;
	box-sizing: border-box;
	width: 39%;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__img img {
	aspect-ratio: 1 / 1.33;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__badge {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__content {
	display: flex;
	flex-direction: column;
	gap: 15px;
	box-sizing: border-box;
	width: 61%;
	padding-left: 45px;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-benefits__cards {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 30px;
	margin-top: 25px;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__card {
	width: calc(50% - 15px);
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__card p,
:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__stat p {
	color: var(--wp--preset--color--body-text);
	font-size: 16px;
	line-height: 1.7;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__stats {
	display: flex;
	flex-wrap: wrap;
	padding: 80px 10px 10px;
	border-top: 1px solid var(--ts-divider);
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__stat {
	box-sizing: border-box;
	width: 32%;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__stat:nth-child(1) {
	padding-right: 50px;
	border-right: 1px solid var(--ts-divider);
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__stat:nth-child(2) {
	width: 36%;
	padding-inline: 50px;
	border-right: 1px solid var(--ts-divider);
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__stat:nth-child(3) {
	padding-left: 50px;
}

@media (max-width: 1024px) {
	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits .ts-features-section__inner {
		gap: 30px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__main {
		justify-content: center;
		gap: 30px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__media {
		width: 61%;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__badge {
		right: 10px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__content {
		gap: 10px;
		width: 100%;
		padding-left: 0;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-benefits__cards {
		margin-top: 20px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__stats {
		row-gap: 30px;
		padding-top: 40px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__stat:nth-child(n) {
		width: 50%;
	}

	/* Tablet: 1. pozycja zachowuje pionową linię, 2. bez linii, 3. w nowym wierszu */
	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__stat:nth-child(2) {
		padding: 0 0 0 50px;
		border-right: 0;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__stat:nth-child(3) {
		padding: 0 50px 0 0;
	}
}

@media (max-width: 767px) {
	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits .ts-features-section__inner {
		gap: 20px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__media {
		width: 100%;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__img img {
		max-width: 276px;
		margin-inline: auto;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__badge {
		right: 0;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__card {
		width: 100%;
	}

	/* Telefon: naprzemienność białe/przezroczyste jak we wzorcu (karty niezależne — kolejność bez znaczenia, 1.3.2) */
	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__card:nth-child(3) {
		order: 4;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__card:nth-child(4) {
		order: 3;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__stats {
		row-gap: 15px;
		padding-top: 30px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__stat:nth-child(n) {
		width: 100%;
		padding: 0;
		border: 0;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__stat:is(:nth-child(1), :nth-child(2)) {
		padding-bottom: 15px;
		border-bottom: 1px solid var(--ts-divider);
	}
}

/* ==========================================================================
   S5 Premium Dropper / Formuła: treść (akapit, przycisk, lista, 3 kafle) | kafel wideo (C11)
   ========================================================================== */

:is(.ts-page-features, .ts-page-opinie) .ts-features-premium__content {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 62%;
	padding: 10px 50px 10px 10px;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-premium__body {
	display: flex;
	align-items: center;
	margin: 25px 0 35px;
	padding-bottom: 50px;
	border-bottom: 1px solid var(--ts-divider);
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-premium__body > * {
	box-sizing: border-box;
	width: 50%;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-premium__intro {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding-right: 30px;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-premium__intro > p {
	color: var(--wp--preset--color--body-text);
	font-size: 16px;
	line-height: 1.7;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-premium__tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-tile {
	position: relative;
	box-sizing: border-box;
	width: calc(33.33% - 20px);
	overflow: hidden;
	border-radius: var(--ts-radius-card);
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-tile img {
	aspect-ratio: 1 / 1.01;
	border-radius: var(--ts-radius-card);
}

/*
 * Gradient pod tytułem: wzorzec rgba(10,44,15,0) 61,32 % → .9; start przesunięty do 30 %,
 * żeby biały tytuł miał ≥ 3:1 (20 px bold) i ≥ 4.5:1 (18 px na telefonie) nad jasnym zdjęciem (1.4.3, odstepstwa/features.md).
 */
:is(.ts-page-features, .ts-page-opinie) .ts-features-tile::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	border-radius: var(--ts-radius-card);
	background: linear-gradient(180deg, rgba(10, 44, 15, 0) 30%, rgba(10, 44, 15, 0.9) 100%);
	pointer-events: none;
}

/*
 * Wąski desktop 1025–1199 px: kafle mają 168–205 px, tytuły łamią się do 2 wierszy i sięgają ~55 % wysokości kafla —
 * przy starcie 30 % najjaśniejsze tło pod tytułem dawało 2.1–2.9:1 (pomiar z przezroczystym tytułem, 1025/1100 px).
 * Gradient od 0 % do 90 %: ≥ 3.6:1 (tytuł 20 px bold = duży tekst). Szerokości wzorca (1440/768/390) bez zmian.
 */
@media (min-width: 1025px) and (max-width: 1199px) {
	:is(.ts-page-features, .ts-page-opinie) .ts-features-tile::before {
		background: linear-gradient(180deg, rgba(10, 44, 15, 0) 0%, rgba(10, 44, 15, 0.9) 90%);
	}
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-tile__title {
	position: absolute;
	z-index: 2;
	right: 20px;
	bottom: 20px;
	left: 20px;
	color: var(--wp--preset--color--white);
	font-size: var(--ts-fs-h3);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

/*
 * Przyciemnienie zakotwiczone w tytule (faza LP, recenzja): tytuły LP są dłuższe (do 3 wierszy przy 1440, 5 przy 1025 px),
 * więc górny wiersz wychodził ponad strefę gradientu kafla — najjaśniejszy piksel pod tytułem 1.38–2.25:1
 * („W szklanej butelce nadającej się do recyklingu”, „Nauka. Fermentacja. Biotechnologia.”). Warstwa pod całym tytułem
 * ma krycie ≥ .65 (≥ 4.99:1 dla bieli nawet na białym pikselu zdjęcia) i zanika 44 px nad nim; na krótkich tytułach
 * pokrywa się z dolną, już ciemną częścią gradientu kafla (ta sama metoda co karty Kontaktu).
 */
:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-tile__title::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -50px -20px -20px;
	background: linear-gradient(180deg, rgba(10, 44, 15, 0) 0, rgba(10, 44, 15, 0.65) 44px);
	pointer-events: none;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-premium__video {
	width: 38%;
	padding: 10px;
}

@media (max-width: 1024px) {
	:is(.ts-page-features, .ts-page-opinie) .ts-features-premium__content {
		gap: 10px;
		width: 100%;
		padding: 10px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-premium__body {
		margin: 20px 0;
		padding-bottom: 30px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-premium__intro {
		gap: 20px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-premium__video {
		width: 100%;
	}
}

@media (max-width: 767px) {
	:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-premium__body {
		flex-direction: column;
		align-items: stretch;
		gap: 30px;
		margin: 10px 0;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-premium__body > * {
		width: 100%;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-premium__intro {
		padding-right: 0;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-tile {
		width: 100%;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-tile img {
		aspect-ratio: 1 / 0.8;
	}
}

/* ==========================================================================
   S6 FAQ: zdjęcie z plakietką (C9b bez linku) | etykieta, h2, akordeon (C7)
   ========================================================================== */

:is(.ts-page-features, .ts-page-opinie) .ts-features-faq__media {
	position: relative;
	width: 50%;
	padding: 10px 50px 10px 10px;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-faq__img {
	position: relative;
	overflow: hidden;
	border-radius: var(--ts-radius-card);
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-faq__img img {
	aspect-ratio: 1 / 1.04;
	border-radius: var(--ts-radius-card);
}

/* Plakietka nie jest linkiem (wzorzec: element nieinteraktywny); wygląd i hover z C9b */
:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-faq__badge {
	position: absolute;
	z-index: 2;
	right: 90px;
	bottom: 50px;
	margin: 0;
	cursor: default;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-faq__content {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 50%;
	padding: 10px;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-faq__content > .ts-heading {
	margin-bottom: 25px;
}

@media (max-width: 1024px) {
	:is(.ts-page-features, .ts-page-opinie) .ts-features-faq__media {
		width: 100%;
		padding: 10px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-faq__img img {
		aspect-ratio: 1 / 0.65;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-faq__badge {
		right: 40px;
		bottom: 40px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-faq__content {
		gap: 10px;
		width: 100%;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-faq__content > .ts-heading {
		margin-bottom: 20px;
	}
}

@media (max-width: 767px) {
	:is(.ts-page-features, .ts-page-opinie) .ts-features-faq__img img {
		aspect-ratio: 1 / 0.984;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-faq__badge {
		right: 30px;
		bottom: 30px;
	}
}

/* ==========================================================================
   Faza LP (docs/STARE-STRONY.md §1–§2, K3): nowe elementy treści Cech produktu i Opinii.
   Tylko układ i typografia elementów dopisanych do sekcji — komponenty (C1–C12) bez zmian.
   ========================================================================== */

/* F1: przypis pod siatką kart (LP 16) — 14 px, kursywa, w kontenerze siatki */
.ts-page-features .ts-features-section.ts-features-grid > .ts-features-grid__note {
	box-sizing: border-box;
	max-width: 1300px;
	margin: 20px auto 0;
	padding: 0 10px;
	color: var(--wp--preset--color--body-text);
	font-size: 14px;
	line-height: 1.6;
}

/* F2/O2: akapity treści na ciemnym tle (Opinie LP 20–22) i przycisk pod punktami */
:is(.ts-page-features, .ts-page-opinie) .ts-features-about .ts-features-about__content > .ts-features-about__text {
	color: var(--wp--preset--color--white);
	font-size: 16px;
	line-height: 1.7;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-about__content > .ts-features-about__actions {
	margin-top: 40px;
}

/* Pasek pozycji: dłuższe akapity LP (ostrzeżenia, interakcje, cukry) — ikona przy tytule, nie w połowie wysokości */
:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__stats > .ts-iconbox.ts-iconbox--plain {
	align-content: start;
	align-items: start;
}

/* F3: tabela składu (wariant podstawowy STARE-STRONY §2) + karta „Skład pełny” jedna pod drugą */
:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-benefits__cards--composition {
	flex-direction: column;
	align-items: stretch;
	gap: 30px;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__cards--composition > .ts-features-benefits__card--wide {
	width: 100%;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-benefits__table {
	margin: 0;
	overflow: visible;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__table table {
	width: 100%;
	border: 1px solid var(--ts-divider);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--ts-radius-card);
	background-color: var(--wp--preset--color--white);
	font-size: 16px;
	line-height: 1.5;
	overflow: hidden;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__table :is(th, td) {
	padding: 16px 30px;
	border: 0;
	border-bottom: 1px solid var(--ts-divider);
	color: var(--wp--preset--color--body-text);
	text-align: left;
	vertical-align: top;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__table thead th {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__table tbody td:first-child {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__table tbody tr:last-child td {
	border-bottom: 0;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-benefits__content > .ts-features-benefits__note {
	margin-top: 10px;
	color: var(--wp--preset--color--body-text);
	font-size: 14px;
	line-height: 1.6;
}

:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-benefits__content > .ts-features-benefits__actions {
	margin-top: 15px;
}

/* F5/O5: przycisk pod akordeonem */
:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-faq__content > .ts-features-faq__actions {
	margin-top: 25px;
}

/* F4: przycisk z dłuższą etykietą LP („CAŁA TECHNOLOGIA, KROK PO KROKU”) — tekst może się łamać, kółko zostaje obok */
:is(.ts-page-features, .ts-page-opinie) .ts-features-premium__intro .wp-block-button__link {
	text-align: left;
}

/* Kafel dekoracyjny bez filmu (STARE-STRONY 0.7): bez przycisku odtwarzania, sam obraz tła */
:is(.ts-page-features, .ts-page-opinie) .ts-video-tile.ts-video-tile--static {
	cursor: default;
}

@media (max-width: 1024px) {
	:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-about__content > .ts-features-about__actions {
		margin-top: 30px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-benefits__cards--composition {
		gap: 20px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__table :is(th, td) {
		padding: 14px 20px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-faq__content > .ts-features-faq__actions {
		margin-top: 20px;
	}
}

@media (max-width: 767px) {
	:is(.ts-page-features, .ts-page-opinie) .ts-features-section .ts-features-about__content > .ts-features-about__actions {
		margin-top: 20px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__table table {
		font-size: 14px;
	}

	:is(.ts-page-features, .ts-page-opinie) .ts-features-benefits__table :is(th, td) {
		padding: 10px 12px;
	}
}