/*
 * TheSybin — komponenty współdzielone C1–C21 (bez nagłówka, menu, stopki, banera strony i okruszków).
 * Źródło wartości: design-ref/spec/global.md „Komponenty współdzielone”, docs/DECYZJE.md (D1 kolory WCAG).
 * Dokumentacja i gotowe znaczniki bloków: docs/KOMPONENTY.md, wzorce patterns/component-*.php.
 * Ruch (obrót odznak, pulsowanie wideo, błysk zdjęć): assets/css/motion.css.
 *
 * Punkty przełamania: tablet ≤1024, telefon ≤767. Kolory tylko z tokenów theme.json / base.css.
 * Ikony jako maski/tła CSS z assets/icons (dekoracyjne z natury — pseudoelementy nie trafiają do drzewa dostępności).
 */

/* Kontekst ciemny (tekst biały): .ts-surface-dark, .has-primary-background-color (+ .ts-hero, .ts-page-hero, .ts-footer). */

/* ==========================================================================
   Treść długa (.ts-prose): wpisy i dokumenty — design-ref/spec/blog.md S8, legal-konto.md S2
   Styluje WYŁĄCZNIE bezpośrednie dzieci .ts-prose (lub zagnieżdżonej grupy z klasą .ts-prose-flow)
   bez klas „ts-*” — komponenty i sekcje stron wewnątrz treści nie dziedziczą typografii wpisu.
   Sekcja stoi przed komponentami: przy równej specyficzności wygrywa komponent.
   ========================================================================== */

.ts-prose {
	color: var(--wp--preset--color--body-text);
	font-size: 16px;
	line-height: 1.7;
}

/* Interlinia w em jak Sellsmart (`p{line-height:1.7em}`, `h1–h6{line-height:1.2em}`): długość 27,2 px silnik zaokrąga do 27,203 px,
   a liczba 1.7 do 27,188 px — w długich dokumentach i wpisach różnica sumowała się do kilku px (blog.md S8, legal-konto.md S2/S3). */
:is(.ts-prose, .ts-prose-flow) > p:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
	margin: 0 0 20px;
	line-height: 1.7em;
}

:is(.ts-prose, .ts-prose-flow) > :is(h1, h2, h3, h4, h5, h6):not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
	margin: 1em 0 0.7em;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--sans);
	line-height: 1.2em;
}

:is(.ts-prose, .ts-prose-flow) > h1:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
	font-size: 40px;
	font-weight: 600;
}

:is(.ts-prose, .ts-prose-flow) > h2:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
	font-size: var(--ts-fs-h2-content);
	font-weight: 600;
}

:is(.ts-prose, .ts-prose-flow) > h3:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
	font-size: 26px;
	font-weight: 700;
}

:is(.ts-prose, .ts-prose-flow) > h4:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
	font-size: 22px;
	font-weight: 700;
}

:is(.ts-prose, .ts-prose-flow) > h5:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
	font-size: 18px;
	font-weight: 700;
}

:is(.ts-prose, .ts-prose-flow) > h6:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
	font-size: 16px;
	font-weight: 700;
}

:is(.ts-prose, .ts-prose-flow) > :is(ul, ol):not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
	margin: 20px 0;
}

:is(.ts-prose, .ts-prose-flow) > ul:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
	padding-left: 20px;
}

:is(.ts-prose, .ts-prose-flow) > ol:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
	padding-left: 32px;
}

:is(.ts-prose, .ts-prose-flow) > :is(ul, ol):not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) li {
	margin: 0 0 15px;
	font-weight: 500;
}

:is(.ts-prose, .ts-prose-flow) > ul:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) li {
	font-size: 16px;
	line-height: 1.5em;
}

:is(.ts-prose, .ts-prose-flow) > ol:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) li {
	font-size: 18px;
	line-height: 27.2px;
}

:is(.ts-prose, .ts-prose-flow) > :is(ul, ol):not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) li :is(ul, ol) {
	margin-top: 10px;
	margin-bottom: 0;
}

:is(.ts-prose, .ts-prose-flow) > :is(ul, ol):not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) li:last-child {
	margin-bottom: 0;
}

:is(.ts-prose, .ts-prose-flow) > :is(ul, ol):not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) li::marker {
	color: var(--wp--preset--color--body-text);
}

/* Jak Sellsmart (.post-entry): zeruje się tylko dolny margines ostatniego akapitu; lista/nagłówek na początku lub końcu dokumentu
   zachowuje margines (Polityka zaczyna się listą: +20 px, Regulamin kończy się listą: +20 px — legal-konto.md S2/S3). */
:is(.ts-prose, .ts-prose-flow) > p:last-child:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
	margin-bottom: 0;
}

.ts-prose :where(strong, b) {
	font-weight: 700;
}

:is(.ts-prose, .ts-prose-flow) > :is(p, ul, ol, blockquote, figure):not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) a:not([class]) {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

:is(.ts-prose, .ts-prose-flow) > :is(p, ul, ol, blockquote, figure):not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) a:not([class]):is(:hover, :focus-visible) {
	text-decoration-thickness: 2px;
}

/* Cytat: złota ramka z ikoną cudzysłowu; tekst #102B28 (D1-A) */
:is(:is(.ts-prose, .ts-prose-flow) > blockquote:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]), .wp-block-quote.is-style-ts-quote-accent) {
	margin: 0 0 30px;
	padding: 30px 30px 30px 90px;
	border: 0;
	border-radius: var(--ts-radius-card);
	background-color: var(--wp--preset--color--accent);
	background-image: url("../icons/quote-left-white.svg");
	background-position: 30px 30px;
	background-repeat: no-repeat;
	background-size: 45px 45px;
	color: var(--wp--preset--color--on-accent);
	--ts-focus: var(--wp--preset--color--on-accent);
}

:is(:is(.ts-prose, .ts-prose-flow) > blockquote:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]), .wp-block-quote.is-style-ts-quote-accent) p {
	margin: 0 0 20px;
	color: inherit;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: 1.5em;
}

:is(:is(.ts-prose, .ts-prose-flow) > blockquote:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]), .wp-block-quote.is-style-ts-quote-accent) > :last-child {
	margin-bottom: 0;
}

:is(:is(.ts-prose, .ts-prose-flow) > blockquote:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]), .wp-block-quote.is-style-ts-quote-accent) cite {
	display: block;
	margin-top: 10px;
	color: inherit;
	font-size: 18px;
	font-style: normal;
}

:is(.ts-prose, .ts-prose-flow) > .wp-block-table:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
	margin: 0 0 20px;
	overflow-x: auto;
}

:is(.ts-prose, .ts-prose-flow) > .wp-block-table:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) table {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid var(--wp--preset--color--body-text);
	border-left: 1px solid var(--wp--preset--color--body-text);
}

:is(.ts-prose, .ts-prose-flow) > .wp-block-table:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) :is(th, td) {
	padding: 4px 10px;
	border: 0;
	border-right: 1px solid var(--wp--preset--color--body-text);
	border-bottom: 1px solid var(--wp--preset--color--body-text);
	color: var(--wp--preset--color--body-text);
	font-size: 16px;
	line-height: 27.2px;
	text-align: left;
	vertical-align: middle;
}

:is(.ts-prose, .ts-prose-flow) > .wp-block-table:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) th {
	font-weight: 700;
}

:is(.ts-prose, .ts-prose-flow) > .wp-block-table:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) thead {
	border-bottom: 3px solid var(--wp--preset--color--body-text);
}

:is(.ts-prose, .ts-prose-flow) > .wp-block-table:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) :is(caption, figcaption) {
	text-align: center;
}

:is(.ts-prose, .ts-prose-flow) > hr:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
	margin: 30px 0;
	border: 0;
	border-top: 1px solid var(--ts-divider);
	opacity: 1;
}

@media (max-width: 1024px) {
	:is(.ts-prose, .ts-prose-flow) > p:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
		margin-bottom: 15px;
	}

	:is(.ts-prose, .ts-prose-flow) > :is(ul, ol):not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) li {
		margin-bottom: 10px;
	}

	:is(.ts-prose, .ts-prose-flow) > ol:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) li {
		font-size: 16px;
	}

	:is(:is(.ts-prose, .ts-prose-flow) > blockquote:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]), .wp-block-quote.is-style-ts-quote-accent) {
		margin-bottom: 20px;
		padding: 20px 20px 20px 70px;
		background-position: 20px 20px;
		background-size: 40px 40px;
	}

	:is(:is(.ts-prose, .ts-prose-flow) > blockquote:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]), .wp-block-quote.is-style-ts-quote-accent) p {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	:is(.ts-prose, .ts-prose-flow) > h1:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
		font-size: 28px;
	}

	:is(.ts-prose, .ts-prose-flow) > h3:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
		font-size: 20px;
	}

	:is(.ts-prose, .ts-prose-flow) > h4:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
		font-size: 18px;
	}

	:is(.ts-prose, .ts-prose-flow) > h5:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
		font-size: 16px;
	}

	:is(.ts-prose, .ts-prose-flow) > h6:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]) {
		font-size: 14px;
	}

	:is(:is(.ts-prose, .ts-prose-flow) > blockquote:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]), .wp-block-quote.is-style-ts-quote-accent) {
		padding: 60px 15px 15px;
		background-position: 15px 15px;
	}

	:is(:is(.ts-prose, .ts-prose-flow) > blockquote:not([class^="ts-"], [class*=" ts-"], [class*="is-style-ts-"]), .wp-block-quote.is-style-ts-quote-accent) p {
		font-size: 16px;
	}
}

/* ==========================================================================
   Dokumenty prawne w .ts-prose (legal-konto.md S2/S3): nagłówki rozdziałów i listy „a)”.
   Wzorzec nie miał nagłówków (Regulamin: `<p><strong>§ N.</strong>`, Polityka: jednopozycyjne `ol start=N`) — wygląd bez zmian.
   h2.ts-legal__heading            „§ N.” — akapit 16/700 (Regulamin)
   h2.ts-legal__heading--num       numer w <span class="ts-legal__num"> wysunięty w 32 px wcięcie jak ::marker (Polityka), 18/500
   ol.ts-legal__alpha (--spaced)   lista „a) b) c)” wewnątrz wiersza, bez wcięcia (D11); --spaced: odstęp akapitu między pozycjami
   ========================================================================== */

@counter-style ts-alpha-paren {
	system: extends lower-alpha;
	suffix: ") ";
}

:is(.ts-prose, .ts-prose-flow) > h2.ts-legal__heading {
	margin: 0 0 20px;
	color: var(--wp--preset--color--body-text);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 27.2px;
	text-transform: none;
}

:is(.ts-prose, .ts-prose-flow) > h2.ts-legal__heading.ts-legal__heading--num {
	position: relative;
	margin: 20px 0;
	padding-left: 32px;
	font-size: 18px;
	font-weight: 500;
}

.ts-legal__heading--num .ts-legal__num {
	position: absolute;
	top: 0;
	right: calc(100% - 32px);
	font-variant-numeric: tabular-nums;
	white-space: pre;
}

/* Wstęp listy „a)”: bez odstępu, jak wiersz przed `<br>` we wzorcu */
:is(.ts-prose, .ts-prose-flow) > p:has(+ ol.ts-legal__alpha:not(.ts-legal__alpha--spaced)) {
	margin-bottom: 0;
}

:is(.ts-prose, .ts-prose-flow) > ol.ts-legal__alpha {
	margin: 0 0 20px;
	padding: 0;
	/* Rezerwa dla przeglądarek bez @counter-style (np. Safari < 17): cała deklaracja z nieznaną nazwą licznika jest tam
	   odrzucana i lista wróciłaby do `decimal outside` — numery wisiałyby poza kolumną (przy 320–390 px poza ekranem). */
	list-style: lower-alpha inside;
	list-style: ts-alpha-paren inside;
}

:is(.ts-prose, .ts-prose-flow) > ol.ts-legal__alpha > li {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 27.2px;
}

:is(.ts-prose, .ts-prose-flow) > ol.ts-legal__alpha--spaced > li:not(:last-child) {
	margin-bottom: 20px;
}

@media (max-width: 1024px) {
	:is(.ts-prose, .ts-prose-flow) > h2.ts-legal__heading {
		margin-bottom: 15px;
	}

	:is(.ts-prose, .ts-prose-flow) > h2.ts-legal__heading.ts-legal__heading--num {
		margin-bottom: 20px;
		font-size: 16px;
	}

	:is(.ts-prose, .ts-prose-flow) > ol.ts-legal__alpha {
		margin-bottom: 15px;
	}

	:is(.ts-prose, .ts-prose-flow) > ol.ts-legal__alpha--spaced > li:not(:last-child) {
		margin-bottom: 15px;
	}
}

/* Ramka „Projekt — do weryfikacji prawnej” (`ts-notice ts-legal-draft`, strony 6600, 6601, 6602): na tle strony #F7F4EF kolor
   `secondary` komunikatu jest niewidoczny, więc biała karta ze złotym obrysem (odstępstwo: docs/odstepstwa/prawne-projekty.md).
   Przeniesione ze stylów stron (integracja LP, 15.09.2026). */
:is(.ts-prose, .ts-prose-flow) > .ts-notice.ts-legal-draft {
	margin-top: 0;
	margin-bottom: 40px;
	padding: 18px 22px;
	border: 1.5px solid var(--wp--preset--color--accent);
	border-radius: var(--ts-radius-card);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--body-text);
	font-size: 16px;
	line-height: 1.6;
}

.ts-notice.ts-legal-draft::before {
	background-color: var(--wp--preset--color--accent-text);
}

.ts-notice.ts-legal-draft .ts-legal-draft__title {
	color: var(--wp--preset--color--primary);
	font-size: 18px;
	line-height: 1.4;
}

@media (max-width: 767px) {
	:is(.ts-prose, .ts-prose-flow) > .ts-notice.ts-legal-draft {
		margin-bottom: 30px;
		padding: 16px;
		font-size: 15px;
	}
}

/* ==========================================================================
   C1. Etykieta sekcji (eyebrow)
   ========================================================================== */

:is(.ts-eyebrow, .is-style-ts-eyebrow) {
	position: relative;
	padding-left: 18px;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--ts-fs-eyebrow);
	font-style: italic;
	font-weight: 400;
	line-height: 1.3;
}

:is(.ts-eyebrow, .is-style-ts-eyebrow)::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	transform: translateY(-50%);
}

:is(.ts-eyebrow, .is-style-ts-eyebrow).ts-eyebrow--no-dot {
	padding-left: 0;
}

:is(.ts-eyebrow, .is-style-ts-eyebrow).ts-eyebrow--no-dot::before {
	content: none;
}

:is(.ts-surface-dark, .has-primary-background-color, .ts-hero, .ts-page-hero, .ts-footer) :is(.ts-eyebrow, .is-style-ts-eyebrow),
:is(.ts-eyebrow, .is-style-ts-eyebrow).ts-eyebrow--light {
	color: var(--wp--preset--color--white);
}

/* ==========================================================================
   C2. Nagłówek sekcji (PJS 600 + Lora kursywa w <em>)
   ========================================================================== */

.ts-heading {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--ts-fs-h2);
	font-weight: 600;
	line-height: 1.2;
}

.ts-heading :is(em, i) {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	color: inherit;
}

.ts-heading--hero {
	font-size: var(--ts-fs-h1);
	letter-spacing: -0.02em;
}

.ts-heading--display {
	font-size: var(--ts-fs-display);
	letter-spacing: -0.02em;
}

:is(.ts-surface-dark, .has-primary-background-color, .ts-hero, .ts-page-hero) .ts-heading,
.ts-heading.ts-heading--light {
	color: var(--wp--preset--color--white);
}

/* ==========================================================================
   C3. Przycisk złoty ze strzałką w kółku (+ „highlighted” na ciemnym tle)
   Blok: core/button ze stylem is-style-ts-primary / is-style-ts-highlighted.
   HTML (formularze, PHP): <a|button class="ts-btn [ts-btn--highlighted|ts-btn--plain]">.
   Tekst na złocie #102B28 (D1-A). Kółko ze strzałką = ::before (część obszaru linku).
   ========================================================================== */

:is(.ts-btn, .wp-block-button:is(.is-style-ts-primary, .is-style-ts-highlighted) > .wp-block-button__link) {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: auto;
	min-height: calc(var(--ts-btn-py) * 2 + 16px);
	margin-right: var(--ts-btn-icon);
	padding: var(--ts-btn-py) var(--ts-btn-px);
	border: 0;
	border-radius: var(--ts-radius-pill);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.5s ease-in-out,
		color 0.5s ease-in-out;
}

/* Wypełnienie od środka przy najechaniu/fokusie */
:is(.ts-btn, .wp-block-button:is(.is-style-ts-primary, .is-style-ts-highlighted) > .wp-block-button__link)::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	right: 50%;
	bottom: 0;
	left: 50%;
	border-radius: inherit;
	background-color: var(--wp--preset--color--primary);
	opacity: 0;
	transition:
		left 0.4s ease-in-out,
		right 0.4s ease-in-out,
		opacity 0.4s ease-in-out;
}

/* Kółko ze strzałką (50 px, ≤1024: 46 px) */
:is(.ts-btn, .wp-block-button:is(.is-style-ts-primary, .is-style-ts-highlighted) > .wp-block-button__link)::before {
	content: "";
	position: absolute;
	top: 0;
	right: calc(var(--ts-btn-icon) * -1);
	width: var(--ts-btn-icon);
	height: var(--ts-btn-icon);
	border-radius: 50%;
	background-color: var(--ts-divider);
	background-image: url("../icons/arrow-up-right-primary.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	transition: transform 0.3s ease-in-out;
}

:is(.ts-btn.ts-btn--highlighted, .wp-block-button.is-style-ts-highlighted > .wp-block-button__link)::after {
	background-color: var(--wp--preset--color--white);
}

:is(.ts-btn.ts-btn--highlighted, .wp-block-button.is-style-ts-highlighted > .wp-block-button__link)::before {
	background-color: var(--ts-divider-dark);
	background-image: url("../icons/arrow-up-right-white.svg");
}

/* Bez kółka (np. przycisk formularza komentarzy, CF7 „Wyślij”). Selektor bazy + klasa wariantu: sam `.ts-btn.ts-btn--plain`
   (0,2,0) przegrywał z `:is(.ts-btn, .wp-block-button… > .wp-block-button__link)` (0,3,0). */
:is(.ts-btn, .wp-block-button:is(.is-style-ts-primary, .is-style-ts-highlighted) > .wp-block-button__link).ts-btn--plain {
	margin-right: 0;
}

:is(.ts-btn, .wp-block-button:is(.is-style-ts-primary, .is-style-ts-highlighted) > .wp-block-button__link).ts-btn--plain::before {
	content: none;
}

/* Stan aktywny: hover (tylko urządzenia ze wskaźnikiem) i fokus z klawiatury */
:is(.ts-btn, .wp-block-button:is(.is-style-ts-primary, .is-style-ts-highlighted) > .wp-block-button__link):focus-visible {
	background-color: transparent;
	color: var(--wp--preset--color--white);
}

:is(.ts-btn, .wp-block-button:is(.is-style-ts-primary, .is-style-ts-highlighted) > .wp-block-button__link):focus-visible::after {
	right: 0;
	left: 0;
	opacity: 1;
}

:is(.ts-btn, .wp-block-button:is(.is-style-ts-primary, .is-style-ts-highlighted) > .wp-block-button__link):focus-visible::before {
	transform: rotate(45deg);
}

:is(.ts-btn.ts-btn--highlighted, .wp-block-button.is-style-ts-highlighted > .wp-block-button__link):focus-visible {
	color: var(--wp--preset--color--primary);
}

@media (hover: hover) {
	:is(.ts-btn, .wp-block-button:is(.is-style-ts-primary, .is-style-ts-highlighted) > .wp-block-button__link):hover {
		background-color: transparent;
		color: var(--wp--preset--color--white);
	}

	:is(.ts-btn, .wp-block-button:is(.is-style-ts-primary, .is-style-ts-highlighted) > .wp-block-button__link):hover::after {
		right: 0;
		left: 0;
		opacity: 1;
	}

	:is(.ts-btn, .wp-block-button:is(.is-style-ts-primary, .is-style-ts-highlighted) > .wp-block-button__link):hover::before {
		transform: rotate(45deg);
	}

	:is(.ts-btn.ts-btn--highlighted, .wp-block-button.is-style-ts-highlighted > .wp-block-button__link):hover {
		color: var(--wp--preset--color--primary);
	}
}

/* ==========================================================================
   C4. Link tekstowy ze strzałką w kółku + link serif
   (a) <a class="ts-link-arrow"> / core/read-more ze stylem is-style-ts-link-arrow
   (c) <a class="ts-link-serif">, wariant podkreślony .ts-link-serif--underline
   Złoty tekst na jasnym tle → #946207 (D1-C); kółko #BE8A3D z białą strzałką (grafika).
   ========================================================================== */

:is(.ts-link-arrow, .is-style-ts-link-arrow) {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--wp--preset--color--accent-text);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: color 0.3s ease-in-out;
}

:is(.ts-link-arrow, .is-style-ts-link-arrow)::after {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	background-image: url("../icons/arrow-right-white.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 15px 15px;
	transform: rotate(-45deg);
	transition:
		transform 0.4s ease-in-out,
		background-color 0.4s ease-in-out;
}

:is(.ts-link-arrow, .is-style-ts-link-arrow):focus-visible {
	color: var(--wp--preset--color--primary);
}

:is(.ts-link-arrow, .is-style-ts-link-arrow):focus-visible::after {
	background-color: var(--wp--preset--color--primary);
	transform: rotate(0deg);
}

@media (hover: hover) {
	:is(.ts-link-arrow, .is-style-ts-link-arrow):hover {
		color: var(--wp--preset--color--primary);
	}

	:is(.ts-link-arrow, .is-style-ts-link-arrow):hover::after {
		background-color: var(--wp--preset--color--primary);
		transform: rotate(0deg);
	}
}

a.ts-link-serif,
.ts-link-serif a {
	color: var(--wp--preset--color--accent-text);
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 700;
	text-decoration: none;
	transition: color 0.4s ease-in-out;
}

a.ts-link-serif.ts-link-serif--underline,
.ts-link-serif--underline a {
	font-weight: 400;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition-duration: 0.3s;
}

a.ts-link-serif:is(:hover, :focus-visible),
.ts-link-serif a:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   C5. Ikona w kółku i icon box
   Kółko: <span class="ts-icon-circle"> albo core/image z klasą „ts-icon-circle ts-inline-svg”
   (SVG z biblioteki mediów wstawiane inline → kolor z CSS).
   ========================================================================== */

.ts-icon-circle {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 50px;
	height: 50px;
	margin: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	transition: background-color 0.4s ease;
}

.ts-icon-circle :is(svg, img) {
	display: block;
	width: 30px;
	height: 30px;
	fill: currentColor;
}

.ts-icon-circle.ts-icon-circle--60 {
	width: 60px;
	height: 60px;
}

.ts-icon-circle.ts-icon-circle--60 :is(svg, img) {
	width: 35px;
	height: 35px;
}

/* 80 px, ikona 45 px (≤1024: 70/40) — punkty obok zdjęcia (home S6, o-nas „Formuła”) */
.ts-icon-circle.ts-icon-circle--80 {
	width: 80px;
	height: 80px;
}

.ts-icon-circle.ts-icon-circle--80 :is(svg, img) {
	width: 45px;
	height: 45px;
}

@media (max-width: 1024px) {
	.ts-icon-circle.ts-icon-circle--80 {
		width: 70px;
		height: 70px;
	}

	.ts-icon-circle.ts-icon-circle--80 :is(svg, img) {
		width: 40px;
		height: 40px;
	}

	/* --shrink: ≤1024 kółko wraca do 50/30 px (np. --60 w kartach home S3, o-nas S5–S7) */
	.ts-icon-circle.ts-icon-circle--shrink {
		width: 50px;
		height: 50px;
	}

	.ts-icon-circle.ts-icon-circle--shrink :is(svg, img) {
		width: 30px;
		height: 30px;
	}
}

/* Kółko z ikoną z assets/icons (maska): --phone */
.ts-icon-circle--phone::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("../icons/phone.svg") center / contain no-repeat;
	mask: url("../icons/phone.svg") center / contain no-repeat;
}

/* Icon box: ikona + tytuł (h3) + opis */
.ts-iconbox {
	--ts-iconbox-gap: 15px;
}

body .ts-iconbox > * {
	margin-block: 0;
}

.ts-iconbox .ts-iconbox__title,
.ts-iconbox > :is(h2, h3, h4) {
	color: var(--wp--preset--color--primary);
	font-size: var(--ts-fs-h3);
	font-weight: 700;
	line-height: 1.2;
}

/* Hover całego boxu; `ts-iconbox--static` — bez zmiany koloru (sekcje wzorca bez hovera, np. o-nas S5) */
@media (hover: hover) {
	.ts-iconbox:not(.ts-iconbox--static):hover .ts-icon-circle {
		background-color: var(--wp--preset--color--primary);
	}
}

/* --row: ikona po lewej (margin-right 15), tytuł mb 10 */
.ts-iconbox.ts-iconbox--row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: start;
	align-items: start;
	column-gap: var(--ts-iconbox-gap);
}

.ts-iconbox.ts-iconbox--row > .ts-icon-circle {
	grid-row: 1 / span 2;
}

body .ts-iconbox.ts-iconbox--row > :is(h2, h3, h4, .ts-iconbox__title) {
	margin-bottom: 10px;
}

/* --stack: ikona 60 px nad tytułem (karta feature) */
body .ts-iconbox.ts-iconbox--stack > .ts-icon-circle {
	margin-bottom: 30px;
}

body .ts-iconbox.ts-iconbox--stack > :is(h2, h3, h4, .ts-iconbox__title) {
	margin-bottom: 10px;
}

/* --plain: ikona złota bez tła, 50 px, obok treści (pas korzyści) */
.ts-iconbox.ts-iconbox--plain {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-content: center;
	align-items: center;
	column-gap: 20px;
}

/* Bez tła: pudełko = rozmiar ikony (50 / ≤767 40 px), tekst zaczyna się tuż za ikoną jak we wzorcu */
.ts-iconbox.ts-iconbox--plain > .ts-icon-circle {
	grid-row: 1 / span 2;
	width: auto;
	height: auto;
	background: none;
	color: var(--wp--preset--color--accent);
}

.ts-iconbox.ts-iconbox--plain > .ts-icon-circle :is(svg, img) {
	width: 50px;
	height: 50px;
}

body .ts-iconbox.ts-iconbox--plain > :is(h2, h3, h4, .ts-iconbox__title) {
	margin-bottom: 5px;
}

/* --end: ikona po prawej, tekst do prawej (≤767 jak --row) */
.ts-iconbox.ts-iconbox--end {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: start;
	align-items: start;
	column-gap: var(--ts-iconbox-gap);
	text-align: right;
}

.ts-iconbox.ts-iconbox--end > .ts-icon-circle {
	grid-row: 1 / span 2;
	grid-column: 2;
}

body .ts-iconbox.ts-iconbox--end > :is(h2, h3, h4, .ts-iconbox__title) {
	margin-bottom: 10px;
}

:is(.ts-surface-dark, .has-primary-background-color) .ts-iconbox :is(.ts-iconbox__title, h2, h3, h4) {
	color: var(--wp--preset--color--white);
}

@media (max-width: 1024px) {
	body .ts-iconbox.ts-iconbox--stack > .ts-icon-circle {
		margin-bottom: 20px;
	}

	.ts-iconbox.ts-iconbox--plain {
		column-gap: 10px;
	}
}

@media (max-width: 767px) {
	body .ts-iconbox.ts-iconbox--stack > .ts-icon-circle {
		margin-bottom: 10px;
	}

	body .ts-iconbox.ts-iconbox--stack > :is(h2, h3, h4, .ts-iconbox__title) {
		margin-bottom: 5px;
	}

	.ts-iconbox.ts-iconbox--plain > .ts-icon-circle :is(svg, img) {
		width: 40px;
		height: 40px;
	}

	body .ts-iconbox.ts-iconbox--plain > :is(h2, h3, h4, .ts-iconbox__title) {
		margin-bottom: 2px;
	}

	.ts-iconbox.ts-iconbox--end {
		grid-template-columns: auto minmax(0, 1fr);
		text-align: left;
	}

	.ts-iconbox.ts-iconbox--end > .ts-icon-circle {
		grid-column: 1;
	}
}

/* ==========================================================================
   C6. Karty
   (a) feature  .ts-card--feature / is-style-ts-card-feature
   (b) z cieniem .ts-card--shadow / is-style-ts-card-shadow
   (c) wpis     .ts-post-card (w core/post-template .ts-post-grid)
   (d) opinia   .ts-testimonial
   ========================================================================== */

:is(.ts-card--feature, .is-style-ts-card-feature) {
	box-sizing: border-box;
	padding: 30px;
	border: 1px solid var(--ts-divider);
	border-radius: var(--ts-radius-card);
	background-color: var(--wp--preset--color--white);
}

/* Wzorzec: karta bez tła i bez obramowania (treść 1 px bliżej krawędzi, karta 2 px niższa niż z przezroczystą ramką) */
:is(.ts-card--feature, .is-style-ts-card-feature).ts-card--transparent {
	border-width: 0;
	background-color: transparent;
}

:is(.ts-card--shadow, .is-style-ts-card-shadow) {
	box-sizing: border-box;
	padding: 20px;
	border-radius: var(--ts-radius-card);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--ts-shadow-card);
}

body :is(.ts-card--shadow, .is-style-ts-card-shadow) > * {
	margin-block: 0;
}

body :is(.ts-card--shadow, .is-style-ts-card-shadow) > :is(figure, .ts-card__media) {
	margin-bottom: 20px;
}

:is(.ts-card--shadow, .is-style-ts-card-shadow) > :is(h2, h3, h4) {
	color: var(--wp--preset--color--primary);
	font-size: var(--ts-fs-h3);
	font-weight: 700;
	line-height: 1.3;
}

@media (max-width: 1024px) {
	:is(.ts-card--feature, .is-style-ts-card-feature) {
		padding: 20px;
	}
}

/* (c) Karta wpisu */
.ts-post-grid.ts-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin-inline: 0;
	padding: 0;
	list-style: none;
}

.ts-post-grid.ts-post-grid > li {
	margin: 0;
}

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

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

.ts-post-card {
	position: relative;
	box-sizing: border-box;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--ts-divider);
	border-radius: var(--ts-radius-card);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--ts-shadow-card);
}

body .ts-post-card > *,
body .ts-post-card__body > * {
	margin-block: 0;
}

.ts-post-card .wp-block-post-featured-image {
	position: relative;
	overflow: hidden;
	margin: 0;
}

.ts-post-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 0.673;
	object-fit: cover;
}

.ts-post-card__body {
	padding: 25px;
}

.ts-post-card .ts-post-card__title {
	margin: 0 0 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--ts-divider);
	color: var(--wp--preset--color--primary);
	font-size: var(--ts-fs-h3);
	font-weight: var(--ts-post-title-weight, 700);
	line-height: 1.4;
	overflow-wrap: break-word;
}

.ts-post-card .ts-post-card__title a {
	color: inherit;
	text-decoration: none;
}

/* Cała karta klikalna przez link tytułu (jeden link główny — D3) */
.ts-post-card .ts-post-card__title a::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
}

.ts-post-card__footer.ts-post-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 15px 10px;
	line-height: 1;
}

.ts-post-card__footer :is(.ts-link-arrow, .is-style-ts-link-arrow) {
	position: relative;
	z-index: 2;
}

.ts-post-card__date {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	color: var(--wp--preset--color--body-text);
	font-size: 16px;
	line-height: 1;
}

.ts-post-card__date::before {
	content: "";
	flex: none;
	width: 16px;
	height: 18px;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: url("../icons/calendar.svg") center / contain no-repeat;
	mask: url("../icons/calendar.svg") center / contain no-repeat;
}

@media (max-width: 1024px) {
	.ts-post-card__body {
		padding: 20px;
	}

	.ts-post-card .ts-post-card__title {
		margin-bottom: 20px;
		padding-bottom: 20px;
	}
}

@media (max-width: 767px) {
	.ts-post-card__date {
		font-size: 14px;
	}

	.ts-post-card__date::before {
		width: 14px;
		height: 16px;
	}
}

/* (d) Karta opinii (na ciemnym tle) */
.ts-testimonial {
	box-sizing: border-box;
	color: var(--wp--preset--color--white);
}

body .ts-testimonial > * {
	margin-block: 0;
}

.ts-testimonial .ts-rating {
	--ts-star: 20px;
	--ts-star-gap: 2.75px;
}

body .ts-testimonial .ts-testimonial__quote {
	margin: 20px 0 30px;
	padding: 0 0 30px;
	border: 0;
	border-bottom: 1px solid var(--ts-divider-dark);
	background: none;
	color: var(--wp--preset--color--white);
}

.ts-testimonial .ts-testimonial__quote p {
	margin: 0;
	color: inherit;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.7;
}

.ts-testimonial__author.ts-testimonial__author {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 15px;
}

/* Znak cytatu: grafika wzorca testimonial-primary-quote.svg (załącznik 2958 → --ts-testimonial-quote, inc/block-styles.php);
   tekst autora nie rezerwuje miejsca pod znak (jak ElementsKit — znak leży pod spodem po prawej). */
.ts-testimonial__author::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 30px;
	height: 30px;
	background-color: #26526a; /* kolor znaku cytatu z wzorca (dekoracja) */
	transform: translateY(-50%);
	-webkit-mask: var(--ts-testimonial-quote, url("../icons/quote-right.svg")) center / contain no-repeat;
	mask: var(--ts-testimonial-quote, url("../icons/quote-right.svg")) center / contain no-repeat;
}

.ts-testimonial__author > .wp-block-image {
	flex: none;
}

body .ts-testimonial__author > * {
	margin: 0;
}

.ts-testimonial__author .wp-block-image img,
.ts-testimonial__author > img {
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 6px;
	object-fit: cover;
}

.ts-testimonial__author p {
	color: var(--wp--preset--color--white);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

@media (max-width: 1024px) {
	body .ts-testimonial .ts-testimonial__quote {
		margin: 15px 0 20px;
		padding-bottom: 20px;
	}

	.ts-testimonial .ts-testimonial__quote p {
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	.ts-testimonial .ts-rating {
		--ts-star: 18px;
	}

	.ts-testimonial__author p {
		font-size: 18px;
	}
}

/* ==========================================================================
   C7. Akordeon — core/accordion ze stylem is-style-ts-accordion (D9)
   Zamknięty: biała karta, tytuł h3 PJS 700 18/1.33 #274A46, chevron.
   Otwarty: złoto #BE8A3D, tekst i ikona #102B28 (D1-A).
   ========================================================================== */

.wp-block-accordion.is-style-ts-accordion {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.wp-block-accordion.is-style-ts-accordion > .wp-block-accordion-item {
	margin: 0;
	border-radius: var(--ts-radius-accordion);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--ts-shadow-card);
}

.is-style-ts-accordion .wp-block-accordion-item > * {
	margin-block: 0;
}

.is-style-ts-accordion .wp-block-accordion-heading {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.33;
}

.is-style-ts-accordion .wp-block-accordion-heading__toggle.wp-block-accordion-heading__toggle {
	position: relative;
	padding: 18px 50px 18px 20px;
	border-bottom: 1px solid transparent;
	border-radius: var(--ts-radius-accordion);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	text-align: left;
}

/* Tytuł z odstępem 10 px od strefy ikony jak ElementsKit `.ekit-accordion-title` (inaczej pytania łamią się inaczej przy 390 px) */
.is-style-ts-accordion .wp-block-accordion-heading__toggle-title {
	padding-right: 10px;
}

.is-style-ts-accordion .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

/* Rozmiar ikony w zmiennych (ustawiane na bloku akordeonu): --ts-acc-icon-w/-h (otwarta i domyślna),
   --ts-acc-icon-w-closed/-h-closed (zamknięta; ≤1024 12×14 jak wzorzec). */
.is-style-ts-accordion .wp-block-accordion-heading__toggle-icon {
	--_w: var(--ts-acc-icon-w-closed, var(--ts-acc-icon-w, 16px));
	--_h: var(--ts-acc-icon-h-closed, var(--ts-acc-icon-h, 18px));
	position: absolute;
	top: 50%;
	right: 20px;
	width: var(--_w);
	height: var(--_h);
	margin-top: calc(var(--_h) / -2);
	overflow: hidden;
	color: transparent;
	font-size: 0;
}

.is-style-ts-accordion .wp-block-accordion-heading__toggle-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: url("../icons/chevron-down.svg") center / contain no-repeat;
	mask: url("../icons/chevron-down.svg") center / contain no-repeat;
}

.is-style-ts-accordion .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	--_w: var(--ts-acc-icon-w, 16px);
	--_h: var(--ts-acc-icon-h, 18px);
	transform: rotate(180deg);
}

.is-style-ts-accordion .is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle {
	border-bottom-color: var(--ts-divider-dark);
	border-radius: var(--ts-radius-accordion) var(--ts-radius-accordion) 0 0;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

.is-style-ts-accordion .is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::before {
	background-color: var(--wp--preset--color--on-accent);
}

.is-style-ts-accordion .wp-block-accordion-panel {
	padding: 15px 50px 20px 20px;
	border-radius: 0 0 var(--ts-radius-accordion) var(--ts-radius-accordion);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: 16px;
	line-height: 1.7;
}

.is-style-ts-accordion .wp-block-accordion-panel > * {
	margin-block: 0;
	color: inherit;
}

.is-style-ts-accordion .wp-block-accordion-panel > * + * {
	margin-top: 15px;
}

/* Zamknięty panel: rdzeń ustawia hidden="until-found" (content-visibility, wyszukiwanie na stronie działa) — bez tła i odstępów */
.is-style-ts-accordion .wp-block-accordion-panel[hidden] {
	padding-block: 0;
	background: none;
}

/* Bez JS panele są widoczne (rdzeń ukrywa je dopiero po uruchomieniu skryptu) */
html:not(.ts-js) body:not(.editor-styles-wrapper) .is-style-ts-accordion .wp-block-accordion-panel[hidden] {
	display: block;
}

@media (max-width: 1024px) {
	.wp-block-accordion.is-style-ts-accordion {
		gap: 20px;
	}

	.is-style-ts-accordion .wp-block-accordion-heading__toggle.wp-block-accordion-heading__toggle {
		padding: 15px 40px 15px 15px;
	}

	/* Ikona zamkniętej karty 12×14; otwartej zostaje 16×18 (jak wzorzec) */
	.wp-block-accordion.is-style-ts-accordion {
		--ts-acc-icon-w-closed: 12px;
		--ts-acc-icon-h-closed: 14px;
	}

	.is-style-ts-accordion .wp-block-accordion-heading__toggle-icon {
		right: 15px;
	}

	.is-style-ts-accordion .wp-block-accordion-panel {
		padding: 10px 40px 15px 15px;
	}
}

@media (max-width: 767px) {
	.is-style-ts-accordion .wp-block-accordion-panel {
		padding: 10px 15px 15px;
	}
}

/* ==========================================================================
   C8. Pasek CTA + C16 pigułki
   ========================================================================== */

.wp-block-group.ts-cta-strip,
.ts-cta-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

body .ts-cta-strip > * {
	margin: 0;
}

.ts-pill {
	display: inline-block;
	box-sizing: border-box;
	border-radius: var(--ts-radius-pill);
}

/* Pigułka pełna (etykieta, np. „PROWADZISZ SKLEP?”) — tekst #102B28 (D1-A) */
.ts-pill.ts-pill--accent {
	padding: 0 10px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.7;
}

@media (max-width: 767px) {
	.wp-block-group.ts-cta-strip,
	.ts-cta-strip {
		justify-content: flex-start;
		gap: 5px;
	}
}

/* C16. Pigułka z obrysem (ciemne tło): core/button is-style-ts-pill albo <a class="ts-pill ts-pill--outline"> */
:is(.ts-pill.ts-pill--outline, .wp-block-button.is-style-ts-pill > .wp-block-button__link) {
	display: inline-block;
	box-sizing: border-box;
	width: auto;
	padding: 8px 20px;
	border: 1px solid var(--wp--preset--color--white);
	border-radius: var(--ts-radius-pill);
	background: transparent;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition:
		color 0.3s ease-in-out,
		border-color 0.3s ease-in-out;
}

:is(.ts-pill.ts-pill--outline, .wp-block-button.is-style-ts-pill > .wp-block-button__link):is(:hover, :focus-visible) {
	border-color: var(--wp--preset--color--accent-on-dark);
	color: var(--wp--preset--color--accent-on-dark);
}

@media (max-width: 1024px) {
	:is(.ts-pill.ts-pill--outline, .wp-block-button.is-style-ts-pill > .wp-block-button__link) {
		padding: 8px 15px;
		font-size: 14px;
	}
}

/* ==========================================================================
   C9. (a) Box telefonu „Masz pytania?” (na zdjęciu/ciemnym) (b) plakietka „Masz pytanie? Kliknij”
   ========================================================================== */

.wp-block-group.ts-phone-box,
.ts-phone-box {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 15px;
	color: var(--wp--preset--color--white);
}

body .ts-phone-box > * {
	margin: 0;
}

.ts-phone-box .ts-phone-box__text {
	color: inherit;
	font-size: 16px;
	line-height: 1.7;
}

.ts-phone-box .ts-phone-box__text strong {
	display: block;
	margin-bottom: 2px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

.ts-phone-box .ts-phone-box__text a {
	display: inline-block;
	color: inherit;
	text-decoration: none;
}

/* Hover/fokus: biały tekst + podkreślenie 2 px #F3BD71 (D1-B2 — złoto na zdjęciu nie osiąga 4.5:1) */
.ts-phone-box:hover .ts-phone-box__text a,
.ts-phone-box .ts-phone-box__text a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent-on-dark);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

@media (max-width: 767px) {
	.wp-block-group.ts-phone-box,
	.ts-phone-box {
		gap: 10px;
	}

	.ts-phone-box .ts-phone-box__text strong {
		font-size: 18px;
	}
}

.ts-question-badge {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	width: 200px;
	min-width: min-content; /* 1.4.12: przy zwiększonych odstępach tekstu plakietka rośnie zamiast ucinać („Odpowiedzi,”) — bez zmian w stanie domyślnym */
	padding: 15px 20px;
	overflow: hidden;
	border-radius: 10px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: color 0.4s ease;
}

.ts-question-badge::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 100% 0 0;
	background-color: var(--wp--preset--color--accent);
	transition: top 0.4s ease;
}

.ts-question-badge__icon {
	flex: none;
	width: 40px;
	height: 40px;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: var(--ts-mask) center / contain no-repeat;
	mask: var(--ts-mask) center / contain no-repeat;
	transition: background-color 0.4s ease;
}

/* Stan aktywny tylko dla linku — plakietka informacyjna (`<p>`) nie udaje elementu klikalnego */
a.ts-question-badge:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--on-accent);
}

/* Plakietka leży na zdjęciu: pierścień dwutonowy (biały 3 px + #274A46 2 px) */
.ts-question-badge:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--white);
}

a.ts-question-badge:is(:hover, :focus-visible)::before {
	top: 0;
}

a.ts-question-badge:is(:hover, :focus-visible) .ts-question-badge__icon {
	background-color: var(--wp--preset--color--on-accent);
}

@media (max-width: 1024px) {
	.ts-question-badge {
		padding: 10px 15px;
	}
}

@media (max-width: 767px) {
	.ts-question-badge {
		width: 175px;
		font-size: 14px;
	}

	.ts-question-badge__icon {
		width: 32px;
		height: 32px;
	}
}

/* ==========================================================================
   C10. Odznaka obrotowa (tekst po okręgu) — dekoracja, aria-hidden
   Rozmiary i kolory przez zmienne w atrybucie style (patrz KOMPONENTY.md), sufiksy -t (≤1024) i -m (≤767):
   --ts-badge-size (średnica zewn.), --ts-badge-svg (średnica okręgu tekstu; domyślnie size − 2·pad − 2·border),
   --ts-badge-pad, --ts-badge-border, --ts-badge-icon (szerokość obrazka w środku),
   --ts-badge-fs, --ts-badge-ls, --ts-badge-ws (tekst w jednostkach SVG 250.5, też -t/-m), --ts-badge-fw, --ts-badge-stroke.
   ========================================================================== */

.ts-badge-rotate {
	--_size: var(--ts-badge-size, 140px);
	--_pad: var(--ts-badge-pad, 12px);
	--_border: var(--ts-badge-border, 0px);
	--_icon: var(--ts-badge-icon, auto);
	--_svg: var(--ts-badge-svg, calc(var(--_size) - 2 * var(--_pad) - 2 * var(--_border)));
	--_fs: var(--ts-badge-fs, 34px);
	--_ls: var(--ts-badge-ls, 0.04em);
	--_ws: var(--ts-badge-ws, 10px);
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	box-sizing: border-box;
	width: var(--_size);
	height: var(--_size);
	margin: 0;
	padding: 0;
	border: var(--_border) solid var(--ts-badge-border-color, var(--wp--preset--color--primary));
	border-radius: 50%;
	background-color: var(--ts-badge-bg, transparent);
	color: var(--ts-badge-color, var(--wp--preset--color--white));
	pointer-events: none;
	user-select: none;
}

.ts-badge-rotate > svg {
	grid-area: 1 / 1;
	display: block;
	width: var(--_svg);
	height: var(--_svg);
	max-width: none;
	overflow: visible;
}

.ts-badge-rotate path {
	fill: none;
	stroke: none;
}

.ts-badge-rotate text {
	fill: currentColor;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--_fs);
	font-weight: var(--ts-badge-fw, 600);
	letter-spacing: var(--_ls);
	word-spacing: var(--_ws);
}

.ts-badge-rotate > img {
	grid-area: 1 / 1;
	display: block;
	width: var(--_icon);
	max-width: none;
	height: auto;
	object-fit: contain;
}

/* Ikona bez --ts-badge-icon miała szerokość „auto”, czyli rozmiar pliku. Po podmianie grafiki na plik
   o większej rozdzielczości (2×) i innych proporcjach ikona rosła i zasłaniała napis na okręgu. Pole ikony
   wyznaczają teraz atrybuty width/height znacznika (75×100 krople, 50×61 znaczek), a obraz wpisuje się
   w nie w całości (object-fit: contain) — niezależnie od rozmiaru i proporcji pliku. */
.ts-badge-rotate > img[width="75"][height="100"] {
	--_icon-box: 75px;
	aspect-ratio: 75 / 100;
}

.ts-badge-rotate > img[width="50"][height="61"] {
	--_icon-box: 50px;
	aspect-ratio: 50 / 61;
}

.ts-badge-rotate > img[width][height] {
	width: var(--ts-badge-icon, var(--_icon-box, auto));
}

/* Te same ikony (krople 6460/6462 — 75×100, znaczek 5946 — 50×61) wstawione blokiem obrazu w rozmiarze „full”
   (np. karta z cieniem na stronie głównej): blok nie podaje szerokości, więc rozmiar brał się z pliku. */
.wp-block-image img:is(.wp-image-6460, .wp-image-6462):not([style*="width"]) {
	width: 75px;
	height: auto;
	aspect-ratio: 75 / 100;
	object-fit: contain;
}

.wp-block-image img.wp-image-5946:not([style*="width"]) {
	width: 50px;
	height: auto;
	aspect-ratio: 50 / 61;
	object-fit: contain;
}

@media (max-width: 1024px) {
	.ts-badge-rotate > img[width][height] {
		width: var(--ts-badge-icon-t, var(--ts-badge-icon, var(--_icon-box, auto)));
	}
}

@media (max-width: 767px) {
	.ts-badge-rotate > img[width][height] {
		width: var(--ts-badge-icon-m, var(--ts-badge-icon-t, var(--ts-badge-icon, var(--_icon-box, auto))));
	}
}

.ts-badge-rotate.ts-badge-rotate--accent {
	--ts-badge-bg: var(--wp--preset--color--accent);
}

.ts-badge-rotate.ts-badge-rotate--dark {
	--ts-badge-bg: #2a3e3c; /* lokalny kolor wzorca (global.md C10) */
}

.ts-badge-rotate.ts-badge-rotate--pink {
	--ts-badge-bg: #f4147a; /* lokalny kolor wzorca o-nas 7998d18 */
	--ts-badge-border-color: var(--wp--preset--color--secondary);
}

/* Tekst w kolorze primary z obrysem (home „Formuła objęta ochroną patentową”) */
.ts-badge-rotate.ts-badge-rotate--outline-text {
	--ts-badge-color: var(--wp--preset--color--primary);
}

.ts-badge-rotate.ts-badge-rotate--outline-text text {
	stroke: currentColor;
	stroke-width: var(--ts-badge-stroke, 1.5px);
}

@media (max-width: 1024px) {
	.ts-badge-rotate {
		--_size: var(--ts-badge-size-t, var(--ts-badge-size, 140px));
		--_pad: var(--ts-badge-pad-t, var(--ts-badge-pad, 12px));
		--_border: var(--ts-badge-border-t, var(--ts-badge-border, 0px));
		--_icon: var(--ts-badge-icon-t, var(--ts-badge-icon, auto));
		--_svg: var(--ts-badge-svg-t, var(--ts-badge-svg, calc(var(--_size) - 2 * var(--_pad) - 2 * var(--_border))));
		--_fs: var(--ts-badge-fs-t, var(--ts-badge-fs, 34px));
		--_ls: var(--ts-badge-ls-t, var(--ts-badge-ls, 0.04em));
		--_ws: var(--ts-badge-ws-t, var(--ts-badge-ws, 10px));
	}
}

@media (max-width: 767px) {
	.ts-badge-rotate {
		--_size: var(--ts-badge-size-m, var(--ts-badge-size-t, var(--ts-badge-size, 140px)));
		--_pad: var(--ts-badge-pad-m, var(--ts-badge-pad-t, var(--ts-badge-pad, 12px)));
		--_border: var(--ts-badge-border-m, var(--ts-badge-border-t, var(--ts-badge-border, 0px)));
		--_icon: var(--ts-badge-icon-m, var(--ts-badge-icon-t, var(--ts-badge-icon, auto)));
		--_svg: var(--ts-badge-svg-m, var(--ts-badge-svg-t, var(--ts-badge-svg, calc(var(--_size) - 2 * var(--_pad) - 2 * var(--_border)))));
		--_fs: var(--ts-badge-fs-m, var(--ts-badge-fs-t, var(--ts-badge-fs, 34px)));
		--_ls: var(--ts-badge-ls-m, var(--ts-badge-ls-t, var(--ts-badge-ls, 0.04em)));
		--_ws: var(--ts-badge-ws-m, var(--ts-badge-ws-t, var(--ts-badge-ws, 10px)));
	}
}

/* ==========================================================================
   C11. Kafel wideo + przycisk odtwarzania + <dialog>
   ========================================================================== */

.ts-video-tile {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	min-height: 700px;
	overflow: hidden;
	border-radius: var(--ts-radius-card);
	background-position: center;
	background-size: cover;
}

.ts-video-tile::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-color: rgba(39, 74, 70, 0.3);
}

body .ts-video-tile > * {
	margin: 0;
}

@media (max-width: 1024px) {
	.ts-video-tile {
		min-height: 516px;
	}
}

@media (max-width: 767px) {
	.ts-video-tile {
		min-height: 327px;
	}
}

.ts-video-btn {
	position: relative;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.4s ease,
		color 0.4s ease;
	--ts-focus: var(--wp--preset--color--accent-on-dark);
}

.ts-video-btn__icon {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
}

.ts-video-btn__icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 19px;
	height: 22px;
	margin: -11px 0 0 -8px;
	background-color: currentColor;
	-webkit-mask: url("../icons/play.svg") center / contain no-repeat;
	mask: url("../icons/play.svg") center / contain no-repeat;
}

/* Pierścienie pulsowania (animacja w motion.css) */
.ts-video-btn::before,
.ts-video-btn::after,
.ts-video-btn__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 0 var(--wp--preset--color--white);
	opacity: 0.6;
	pointer-events: none;
}

/* Hover/fokus: złote tło, ikona #102B28 (D1-A) */
.ts-video-btn:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

/* Fokus na zdjęciu: pierścień dwutonowy (ciemny 3 px + biały 2 px) — ≥ 3:1 na jasnym i ciemnym tle (2.4.7, 1.4.11) */
.ts-video-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--on-accent);
}

@media (max-width: 767px) {
	.ts-video-btn {
		width: 60px;
		height: 60px;
	}

	.ts-video-btn__icon::before {
		width: 17px;
		height: 20px;
		margin: -10px 0 0 -7px;
	}
}

dialog.ts-video-dialog {
	box-sizing: border-box;
	width: min(900px, calc(100vw - 40px));
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--white);
	--ts-focus: var(--wp--preset--color--accent-on-dark);
}

dialog.ts-video-dialog::backdrop {
	background-color: rgba(11, 11, 11, 0.8);
}

.ts-video-dialog__inner {
	position: relative;
	padding-top: 54px;
}

.ts-video-dialog__frame {
	aspect-ratio: 16 / 9;
	background-color: #000;
}

.ts-video-dialog__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.ts-video-dialog__close {
	position: absolute;
	top: 0;
	right: 0;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--white);
	cursor: pointer;
}

.ts-video-dialog__close:is(:hover, :focus-visible) {
	background-color: #000;
}

.ts-video-dialog__close svg {
	width: 20px;
	height: 20px;
}

html.ts-video-open {
	overflow: hidden;
}

/* ==========================================================================
   C12. Lista z ikoną check — core/list is-style-ts-check-list
   ========================================================================== */

ul:is(.ts-check-list, .is-style-ts-check-list) {
	--ts-check-gap: 15px;
	display: flex;
	flex-direction: column;
	gap: var(--ts-check-gap);
	margin-inline: 0;
	padding: 0;
	list-style: none;
}

ul:is(.ts-check-list, .is-style-ts-check-list) > li {
	position: relative;
	margin: 0;
	padding-left: 27.5px; /* Elementor: ramka ikony 23 px + padding tekstu 4,5–5 px */
	color: var(--wp--preset--color--body-text);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

ul:is(.ts-check-list, .is-style-ts-check-list) > li::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 18px;
	height: 18px;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: url("../icons/check-circle.svg") center / contain no-repeat;
	mask: url("../icons/check-circle.svg") center / contain no-repeat;
}

:is(.ts-surface-dark, .has-primary-background-color) ul:is(.ts-check-list, .is-style-ts-check-list) > li,
ul:is(.ts-check-list, .is-style-ts-check-list).ts-check-list--light > li {
	color: var(--wp--preset--color--white);
}

/* Wiersz nagłówkowy z ikoną (np. „Bezodpadowy proces fermentacji”) */
ul:is(.ts-check-list, .is-style-ts-check-list).ts-check-list--heading > li {
	padding-left: 28px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

ul:is(.ts-check-list, .is-style-ts-check-list).ts-check-list--heading > li::before {
	top: 3px;
}

ul:is(.ts-check-list, .is-style-ts-check-list):is(.ts-check-list--2col, .ts-check-list--3col) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ts-check-gap) 20px;
}

ul:is(.ts-check-list, .is-style-ts-check-list).ts-check-list--3col {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
	ul:is(.ts-check-list, .is-style-ts-check-list) {
		--ts-check-gap: 10px;
	}
}

@media (max-width: 767px) {
	ul:is(.ts-check-list, .is-style-ts-check-list):is(.ts-check-list--2col, .ts-check-list--3col) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   C13. Ocena gwiazdkowa: <p class="ts-rating" role="img" aria-label="Ocena 5 z 5"></p>
   --ts-rating: procent wypełnienia (100% = 5/5). Gwiazdki #BE8A3D (3.2:1 na #274A46).
   ========================================================================== */

.ts-rating {
	--ts-star: 20px;
	--ts-star-gap: 4px;
	display: block;
	width: calc(var(--ts-star) * 5 + var(--ts-star-gap) * 4);
	height: var(--ts-star);
	margin: 0;
	background: linear-gradient(90deg, var(--wp--preset--color--accent) var(--ts-rating, 100%), var(--ts-rating-empty, var(--ts-divider-dark)) var(--ts-rating, 100%));
	-webkit-mask: url("../icons/star.svg") calc(var(--ts-star-gap) / -2) 0 / calc(var(--ts-star) + var(--ts-star-gap)) var(--ts-star) repeat-x;
	mask: url("../icons/star.svg") calc(var(--ts-star-gap) / -2) 0 / calc(var(--ts-star) + var(--ts-star-gap)) var(--ts-star) repeat-x;
	forced-color-adjust: none;
}

.ts-rating.ts-rating--on-light {
	--ts-rating-empty: var(--ts-divider);
}

/* Podsumowanie oceny: ikona | gwiazdki + tekst */
.wp-block-group.ts-rating-summary,
.ts-rating-summary {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 40px;
}

body .ts-rating-summary > * {
	margin: 0;
}

.ts-rating-summary__icon {
	flex: none;
	padding-right: 40px;
	border-right: 1px solid var(--ts-divider-dark);
	color: var(--wp--preset--color--white);
}

.ts-rating-summary__icon :is(svg, img) {
	display: block;
	width: 50px;
	height: 50px;
}

.ts-rating-summary__body.ts-rating-summary__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

body .ts-rating-summary__body > * {
	margin: 0;
}

.ts-rating-summary__body p:not(.ts-rating) {
	color: rgba(255, 255, 255, 0.8);
	font-size: 16px;
	line-height: 1.7;
}

@media (max-width: 1024px) {
	.wp-block-group.ts-rating-summary,
	.ts-rating-summary {
		gap: 20px;
	}

	.ts-rating-summary__icon {
		padding-right: 30px;
	}

	.ts-rating-summary__icon :is(svg, img) {
		width: 40px;
		height: 40px;
	}

	.ts-rating-summary .ts-rating {
		--ts-star: 18px;
	}
}

@media (max-width: 767px) {
	/* Wzorzec: kolumna ikony zawężona przez nowrap Elementora — linia x 81, tekst oceny x 102 */
	.ts-rating-summary__icon {
		padding-right: 21px;
	}

	.ts-rating-summary .ts-rating {
		--ts-star: 16px;
	}

	.ts-rating-summary__body p:not(.ts-rating) {
		font-size: 14px;
	}
}

/* ==========================================================================
   C14. Separatory — core/separator is-style-ts-sep / is-style-ts-sep-dark
   ========================================================================== */

hr:is(.ts-sep, .ts-sep--dark),
.wp-block-separator:is(.is-style-ts-sep, .is-style-ts-sep-dark):not(.is-style-wide, .is-style-dots) {
	width: 100%;
	max-width: none;
	height: 0;
	margin-inline: 0;
	border: 0;
	border-top: 1px solid var(--ts-divider);
	background: none;
	opacity: 1;
}

hr.ts-sep--dark,
.wp-block-separator.is-style-ts-sep-dark:not(.is-style-wide, .is-style-dots) {
	border-top-color: var(--ts-divider-dark);
}

/* ==========================================================================
   C15. Ikony social — core/social-links is-style-ts-social (+ ts-social--36)
   Glify FA wstawia filtr render_block (inc/block-styles.php). Hover B1 #F3BD71.
   ========================================================================== */

.wp-block-social-links.is-style-ts-social {
	--ts-social-size: 38px;
	gap: 15px;
	padding: 0;
}

.wp-block-social-links.is-style-ts-social.ts-social--36 {
	--ts-social-size: 36px;
}

.wp-block-social-links.is-style-ts-social li.wp-social-link {
	display: block;
	box-sizing: border-box;
	width: var(--ts-social-size);
	height: var(--ts-social-size);
	margin: 0;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: none;
	color: var(--wp--preset--color--white);
	transition: color 0.4s ease;
}

.wp-block-social-links.is-style-ts-social li.wp-social-link:is(:hover, :focus-within) {
	color: var(--wp--preset--color--accent-on-dark);
	transform: none;
}

.wp-block-social-links.is-style-ts-social .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 0;
	border-radius: 50%;
	color: inherit;
	fill: currentColor;
}

.wp-block-social-links.is-style-ts-social .wp-block-social-link-anchor :is(svg, .ts-social__icon) {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* ==========================================================================
   C19. Paginacja — core/query-pagination is-style-ts-pagination
   Numery #946207 (D1-C), bieżąca/hover #102B28 na złocie (D1-A). Strzałki: maski.
   ========================================================================== */

:is(.is-style-ts-pagination, .ts-pagination) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

body :is(.is-style-ts-pagination, .ts-pagination) > * {
	margin: 0;
}

:is(.is-style-ts-pagination, .ts-pagination) .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
}

:is(.is-style-ts-pagination, .ts-pagination) :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	display: inline-flex;
	flex: 0 0 40px;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	margin: 0;
	border-radius: 10px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--accent-text);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition:
		background-color 0.3s ease-in-out,
		color 0.3s ease-in-out;
}

:is(.is-style-ts-pagination, .ts-pagination) :is(.page-numbers.current, a.page-numbers:hover, a.page-numbers:focus-visible, .wp-block-query-pagination-previous:is(:hover, :focus-visible), .wp-block-query-pagination-next:is(:hover, :focus-visible)) {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

:is(.is-style-ts-pagination, .ts-pagination) :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	font-size: 0;
}

:is(.is-style-ts-pagination, .ts-pagination) :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) > * {
	display: none;
}

:is(.is-style-ts-pagination, .ts-pagination) :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next)::before {
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("../icons/arrow-long-right.svg") center / contain no-repeat;
	mask: url("../icons/arrow-long-right.svg") center / contain no-repeat;
}

:is(.is-style-ts-pagination, .ts-pagination) .wp-block-query-pagination-previous::before {
	-webkit-mask-image: url("../icons/arrow-long-left.svg");
	mask-image: url("../icons/arrow-long-left.svg");
}

/* ==========================================================================
   C18. Slider opinii — group.ts-testimonials > group.ts-testimonials__track > .ts-testimonial ×n
   2 na widok ≥768 (odstęp 30), 1 poniżej (odstęp 10). Przyciski dopisuje PHP, obsługuje testimonials.js.
   ========================================================================== */

.ts-testimonials {
	position: relative;
	min-width: 0;
}

body .ts-testimonials > * {
	margin-block: 0;
}

.ts-testimonials__track.ts-testimonials__track {
	--ts-slide-gap: 30px;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--ts-slide-gap);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.ts-testimonials__track::-webkit-scrollbar {
	display: none;
}

html:not(.ts-js) .ts-testimonials__track.ts-testimonials__track {
	padding-bottom: 12px;
	scrollbar-width: thin;
}

body .ts-testimonials__track > * {
	flex: 0 0 calc((100% - var(--ts-slide-gap)) / 2);
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}

body .ts-testimonials > .ts-testimonials__nav {
	display: flex;
	justify-content: center;
	gap: 22px;
	margin-top: 50px;
}

html:not(.ts-js) body .ts-testimonials > .ts-testimonials__nav {
	display: none;
}

.ts-testimonials__btn {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--ts-divider-dark);
	color: var(--wp--preset--color--white);
	cursor: pointer;
	transition:
		background-color 0.4s ease-in-out,
		color 0.4s ease-in-out,
		opacity 0.4s ease-in-out;
	--ts-focus: var(--wp--preset--color--accent-on-dark);
}

.ts-testimonials__btn svg {
	width: 16px;
	height: 16px;
}

/* Hover: złote tło, ikona #102B28 (D1-A) */
.ts-testimonials__btn:is(:hover, :focus-visible):not([aria-disabled="true"]) {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

/* Nieaktywny: przygaszone tło i ikona (jak opacity .45 całości), pierścień fokusu zostaje w pełnym kolorze */
.ts-testimonials__btn[aria-disabled="true"] {
	background-color: rgba(255, 255, 255, 0.0675);
	color: rgba(255, 255, 255, 0.45);
	cursor: default;
}

@media (max-width: 1024px) {
	body .ts-testimonials > .ts-testimonials__nav {
		gap: 20px;
		margin-top: 30px;
	}

	.ts-testimonials__btn svg {
		width: 14px;
		height: 14px;
	}
}

@media (max-width: 767px) {
	.ts-testimonials__track.ts-testimonials__track {
		--ts-slide-gap: 10px;
	}

	body .ts-testimonials__track > * {
		flex-basis: 100%;
	}

	body .ts-testimonials > .ts-testimonials__nav {
		gap: 34px;
	}
}

/* ==========================================================================
   C20. Dekoracyjne liście (tło sekcji) — adresy z biblioteki mediów w zmiennych --ts-deco-leaf-*
   (inc/block-styles.php). Pseudoelementy poza drzewem dostępności.
   ========================================================================== */

:is(.ts-deco-leaf-left, .ts-deco-leaf-right, .ts-deco-leaf-top, .ts-deco-leaf-top-right, .ts-deco-leaf-bottom-left) {
	position: relative;
	isolation: isolate;
	overflow-x: clip;
}

.ts-deco-leaf-left::after,
.ts-deco-leaf-right::after {
	content: "";
	position: absolute;
	z-index: -1;
	bottom: 0;
	width: 219px;
	height: 406px;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}

.ts-deco-leaf-left::after {
	left: -40px;
	background-image: var(--ts-deco-leaf-1);
	background-position: left bottom;
}

.ts-deco-leaf-right::after {
	right: -40px;
	height: 407px;
	background-image: var(--ts-deco-leaf-2);
	background-position: right bottom;
}

:is(.ts-deco-leaf-top, .ts-deco-leaf-top-right)::before,
.ts-deco-leaf-bottom-left::after {
	content: "";
	position: absolute;
	z-index: -1;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}

.ts-deco-leaf-top::before {
	top: 0;
	left: -30px;
	width: 235px;
	height: 197px;
	background-image: var(--ts-deco-leaf-3);
	background-position: left top;
}

.ts-deco-leaf-top-right::before {
	top: 0;
	right: 0;
	width: 235px;
	height: 197px;
	background-image: var(--ts-deco-leaf-3);
	background-position: right top;
}

.ts-deco-leaf-bottom-left::after {
	bottom: 0;
	left: 0;
	width: 248px;
	height: 219px;
	background-image: var(--ts-deco-leaf-4);
	background-position: left bottom;
}

@media (max-width: 1024px) {
	.ts-deco-leaf-left::after,
	.ts-deco-leaf-right::after {
		width: 100px;
		height: 186px;
	}

	.ts-deco-leaf-left::after {
		left: -10px;
	}

	.ts-deco-leaf-right::after {
		right: -10px;
		height: 186px;
	}

	:is(.ts-deco-leaf-top, .ts-deco-leaf-top-right)::before {
		width: 150px;
		height: 126px;
	}

	.ts-deco-leaf-bottom-left::after {
		width: 150px;
		height: 132px;
	}
}

/* ==========================================================================
   C21. Pole newslettera — form.ts-newsletter (pigułka + okrągły przycisk). Umieszcza układ (stopka).
   ========================================================================== */

.ts-newsletter {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	--ts-focus: var(--wp--preset--color--accent-on-dark);
}

.ts-newsletter :is(input[type="email"], .ts-newsletter__input) {
	flex: 1 1 calc(100% - 60px);
	box-sizing: border-box;
	width: calc(100% - 60px);
	min-width: 0;
	height: 60px;
	margin: 0;
	padding: 15px 20px;
	border: 0;
	border-radius: var(--ts-radius-pill);
	background-color: var(--ts-divider-dark);
	/* Obrys 1 px rgba(255,255,255,.5) — granica pola 3.77:1 (1.4.11), odstępstwo komponenty.md */
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}

.ts-newsletter :is(input[type="email"], .ts-newsletter__input)::placeholder {
	color: var(--wp--preset--color--white);
	opacity: 1;
}

.ts-newsletter :is(button[type="submit"], .ts-newsletter__submit) {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	box-sizing: border-box;
	width: 60px;
	height: 60px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	cursor: pointer;
	transition:
		background-color 0.4s ease,
		color 0.4s ease;
}

/* Ikona „wyślij” jak wzorzec (pełna strzałka z nacięciem): własny rysunek assets/icons/newsletter-send.svg, pole 30×30 w układzie px przycisku */
.ts-newsletter :is(button[type="submit"], .ts-newsletter__submit):not(:has(svg))::before {
	content: "";
	width: 30px;
	height: 30px;
	background-color: currentColor;
	-webkit-mask: url("../icons/newsletter-send.svg") center / contain no-repeat;
	mask: url("../icons/newsletter-send.svg") center / contain no-repeat;
}

.ts-newsletter :is(button[type="submit"], .ts-newsletter__submit) svg {
	width: 27px;
	height: 27px;
	fill: currentColor;
}

.ts-newsletter :is(button[type="submit"], .ts-newsletter__submit):is(:hover, :focus-visible) {
	background-color: var(--ts-divider-dark);
	color: var(--wp--preset--color--white);
}

.ts-newsletter__status {
	flex: 1 0 100%;
	margin: 10px 0 0;
	color: var(--wp--preset--color--white);
	font-size: 14px;
	line-height: 1.5;
}

.ts-newsletter__status:empty {
	display: none;
}

@media (max-width: 767px) {
	.ts-newsletter :is(input[type="email"], .ts-newsletter__input) {
		flex-basis: calc(100% - 50px);
		width: calc(100% - 50px);
		height: 50px;
		padding: 12px 20px;
	}

	.ts-newsletter :is(button[type="submit"], .ts-newsletter__submit) {
		width: 50px;
		height: 50px;
	}

	.ts-newsletter :is(button[type="submit"], .ts-newsletter__submit) svg {
		width: 22px;
		height: 22px;
	}

	/* Pole ikony w tej samej proporcji do przycisku co przy 60 px (30/60): strzałka 23 px jak wzorzec */
	.ts-newsletter :is(button[type="submit"], .ts-newsletter__submit):not(:has(svg))::before {
		width: 25px;
		height: 25px;
	}
}

/* ==========================================================================
   Tryb wymuszonych kolorów (Windows High Contrast): ikony funkcjonalne rysowane maską — tło pseudoelementu
   zamieniałoby się na Canvas i ikona znikała. Kolor = bieżący kolor tekstu (już wymuszony: LinkText/ButtonText).
   ========================================================================== */

@media (forced-colors: active) {
	:is(.is-style-ts-pagination, .ts-pagination) :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next)::before,
	.ts-newsletter :is(button[type="submit"], .ts-newsletter__submit):not(:has(svg))::before,
	.ts-question-badge__icon {
		forced-color-adjust: none;
		background-color: currentColor;
	}

	/* Chevron akordeonu: element ikony ma color: transparent (ukryty znak „+” rdzenia) — kolor systemowy przycisku */
	.is-style-ts-accordion .wp-block-accordion-heading__toggle-icon::before {
		forced-color-adjust: none;
		background-color: ButtonText;
	}

	/* Link „Zobacz artykuł”: kółko ze strzałką zostaje w kolorach motywu (złote z białą strzałką) */
	:is(.ts-link-arrow, .is-style-ts-link-arrow)::after {
		forced-color-adjust: none;
	}
}

/* ==========================================================================
   Edytor: podgląd ikon SVG z biblioteki (na froncie filtr wstawia je inline z kolorem z CSS)
   ========================================================================== */

.editor-styles-wrapper .ts-inline-svg img {
	filter: brightness(0) invert(1);
}

.editor-styles-wrapper .ts-iconbox--plain .ts-inline-svg img {
	filter: brightness(0) saturate(100%) invert(56%) sepia(51%) saturate(512%) hue-rotate(356deg) brightness(92%) contrast(88%);
}

/* ==========================================================================
   SKLEP — komponenty wspólne (design-ref/sklep-projekt/SKLEP-PROJEKT.md §2.4–2.5, §3.1, §14; docs/SKLEP.md)
   Na każdej stronie (szuflada koszyka i przycisk koszyka są globalne). Kolory: tokeny theme.json + --ts-* (base.css).
   Ikony = maski z assets/icons (pseudoelementy, poza drzewem dostępności); własne <svg aria-hidden> w znaczniku wyłącza maskę.
   Kontekst ciemny: .ts-on-dark, .ts-surface-dark, .has-primary-background-color.
   Szybki podgląd wszystkich stanów: strona /ts-komponenty/ (sekcja „Sklep”, wzorzec thesybin/component-shop).
   ========================================================================== */

/* ---------- ts-cta: przycisk handlowy (C3 „handel”) — jedna pigułka, koło strzałki wewnątrz ----------
   <button class="ts-cta" type="submit">Dodaj do koszyka</button> · <a class="ts-cta ts-cta--lg" href="…">…</a>
   Warianty: --lg (60), --sm (48), --noicon, --auto (szerokość treści). Stan w toku: aria-disabled="true" + data-busy
   + <span class="ts-cta__busy" aria-hidden="true"></span> przed tekstem. ≤767: koło ukryte, wys. 52 (--lg 56).
   Ten sam wygląd mają przyciski, których znacznik renderuje WooCommerce (bez klasy ts-cta): „Przejdź do kasy” w bloku koszyka
   i „Zamawiam i płacę” (rozmiar --lg). Selektory `….wc-block-components-button:not(.is-link)` (0,3,0) wygrywają z CSS bloków WooCommerce;
   ich stany wewnętrzne (spinner, tekst) — pages/shop-koszyk.css i shop-zamowienie.css. */
.ts-cta,
.wc-block-cart__submit-button.wc-block-components-button:not(.is-link),
.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link) {
	--ts-cta-h: 56px;
	--ts-cta-icon: calc(var(--ts-cta-h) - 12px);
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--ts-cta-h);
	margin: 0;
	padding: 6px calc(var(--ts-cta-h) + 8px);
	border: 0;
	border-radius: var(--ts-radius-pill);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}

.ts-cta::before,
.ts-cta::after,
.wc-block-cart__submit-button.wc-block-components-button:not(.is-link)::before,
.wc-block-cart__submit-button.wc-block-components-button:not(.is-link)::after,
.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link)::before,
.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link)::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	right: 6px;
	width: var(--ts-cta-icon);
	height: var(--ts-cta-icon);
	margin-top: calc(var(--ts-cta-icon) / -2);
	border-radius: 50%;
	pointer-events: none;
}

.ts-cta::before,
.wc-block-cart__submit-button.wc-block-components-button:not(.is-link)::before,
.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link)::before {
	background-color: rgba(16, 43, 40, 0.12);
	transition: background-color 0.3s ease;
}

.ts-cta::after,
.wc-block-cart__submit-button.wc-block-components-button:not(.is-link)::after,
.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link)::after {
	z-index: 0;
	background-color: currentColor;
	-webkit-mask: url("../icons/arrow-up-right.svg") center / 22px 22px no-repeat;
	mask: url("../icons/arrow-up-right.svg") center / 22px 22px no-repeat;
	transition: transform 0.3s ease;
}

.ts-cta:where(:not([aria-disabled="true"], :disabled)):focus-visible,
.wc-block-cart__submit-button.wc-block-components-button:not(.is-link):where(:not([aria-disabled="true"], :disabled)):focus-visible,
.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link):where(:not([aria-disabled="true"], :disabled)):focus-visible {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.ts-cta:where(:not([aria-disabled="true"], :disabled)):focus-visible::before,
.wc-block-cart__submit-button.wc-block-components-button:not(.is-link):where(:not([aria-disabled="true"], :disabled)):focus-visible::before,
.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link):where(:not([aria-disabled="true"], :disabled)):focus-visible::before {
	background-color: rgba(255, 255, 255, 0.16);
}

.ts-cta:where(:not([aria-disabled="true"], :disabled)):focus-visible::after,
.wc-block-cart__submit-button.wc-block-components-button:not(.is-link):where(:not([aria-disabled="true"], :disabled)):focus-visible::after,
.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link):where(:not([aria-disabled="true"], :disabled)):focus-visible::after {
	transform: rotate(45deg);
}

@media (hover: hover) {
	.ts-cta:where(:not([aria-disabled="true"], :disabled)):hover,
	.wc-block-cart__submit-button.wc-block-components-button:not(.is-link):where(:not([aria-disabled="true"], :disabled)):hover,
	.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link):where(:not([aria-disabled="true"], :disabled)):hover {
		background-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--white);
	}

	.ts-cta:where(:not([aria-disabled="true"], :disabled)):hover::before,
	.wc-block-cart__submit-button.wc-block-components-button:not(.is-link):where(:not([aria-disabled="true"], :disabled)):hover::before,
	.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link):where(:not([aria-disabled="true"], :disabled)):hover::before {
		background-color: rgba(255, 255, 255, 0.16);
	}

	.ts-cta:where(:not([aria-disabled="true"], :disabled)):hover::after,
	.wc-block-cart__submit-button.wc-block-components-button:not(.is-link):where(:not([aria-disabled="true"], :disabled)):hover::after,
	.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link):where(:not([aria-disabled="true"], :disabled)):hover::after {
		transform: rotate(45deg);
	}

	:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-cta:where(:not([aria-disabled="true"], :disabled)):hover {
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--primary);
	}

	:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-cta:where(:not([aria-disabled="true"], :disabled)):hover::before {
		background-color: var(--ts-divider);
	}
}

/* Na ciemnym tle (karta P9, „Zamów ponownie”): aktywny = biały z tekstem #274A46 */
:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-cta:where(:not([aria-disabled="true"], :disabled)):focus-visible {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-cta:where(:not([aria-disabled="true"], :disabled)):focus-visible::before {
	background-color: var(--ts-divider);
}

/* Niedostępny (aria-disabled — nadal fokusowalny i opisany; :disabled tylko gdy element naprawdę wyłączony) */
.ts-cta:is([aria-disabled="true"], :disabled),
.wc-block-cart__submit-button.wc-block-components-button:not(.is-link):is([aria-disabled="true"], :disabled),
.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link):is([aria-disabled="true"], :disabled) {
	background-color: var(--ts-disabled-bg);
	color: var(--wp--preset--color--body-text);
	cursor: not-allowed;
	opacity: 1;
}

.ts-cta:is([aria-disabled="true"], :disabled)::before,
.wc-block-cart__submit-button.wc-block-components-button:not(.is-link):is([aria-disabled="true"], :disabled)::before,
.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link):is([aria-disabled="true"], :disabled)::before {
	background-color: rgba(0, 0, 0, 0.06);
}

.ts-cta.ts-cta--lg,
.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link) {
	--ts-cta-h: 60px;
	font-size: 17px;
}

.ts-cta.ts-cta--sm {
	--ts-cta-h: 48px;
	font-size: 15px;
}

.ts-cta.ts-cta--noicon {
	padding-inline: 22px;
}

.ts-cta.ts-cta--noicon::before,
.ts-cta.ts-cta--noicon::after {
	content: none;
}

.ts-cta.ts-cta--auto {
	display: inline-flex;
	width: auto;
}

/* W toku: spinner przed tekstem (szerokość przycisku bez zmian — pełna szerokość lub min. szerokość z JS) */
.ts-cta__busy {
	display: none;
	flex: none;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
}

.ts-cta[data-busy] .ts-cta__busy {
	display: inline-block;
}

.ts-cta[data-busy]::after {
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.ts-cta[data-busy] .ts-cta__busy {
		animation: ts-spin 0.8s linear infinite;
	}
}

@keyframes ts-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 767px) {
	.ts-cta,
	.wc-block-cart__submit-button.wc-block-components-button:not(.is-link) {
		--ts-cta-h: 52px;
		padding-inline: 20px;
	}

	.ts-cta.ts-cta--lg,
	.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link) {
		--ts-cta-h: 56px;
		padding-inline: 20px;
	}

	.ts-cta::before,
	.ts-cta::after,
	.wc-block-cart__submit-button.wc-block-components-button:not(.is-link)::before,
	.wc-block-cart__submit-button.wc-block-components-button:not(.is-link)::after,
	.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link)::before,
	.wc-block-components-checkout-place-order-button.wc-block-components-button:not(.is-link)::after {
		content: none;
	}
}

/* ---------- ts-btn-outline: pigułka z obrysem (48 px) ---------- */
.ts-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 48px;
	margin: 0;
	padding: 0 22px;
	border: 1.5px solid var(--wp--preset--color--primary);
	border-radius: var(--ts-radius-pill);
	background-color: transparent;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		border-color 0.3s ease;
}

.ts-btn-outline svg {
	flex: none;
	width: 18px;
	height: 18px;
}

.ts-btn-outline:focus-visible {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* Wariant błędu („Spróbuj ponownie” w szufladzie) */
.ts-btn-outline.ts-btn-outline--error {
	border-color: var(--ts-error);
	background-color: var(--wp--preset--color--white);
	color: var(--ts-error);
}

.ts-btn-outline.ts-btn-outline--error:focus-visible {
	background-color: var(--ts-error);
	color: var(--wp--preset--color--white);
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-btn-outline {
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-btn-outline:focus-visible {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
}

@media (hover: hover) {
	.ts-btn-outline:hover {
		background-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--white);
	}

	.ts-btn-outline.ts-btn-outline--error:hover {
		background-color: var(--ts-error);
		color: var(--wp--preset--color--white);
	}

	:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-btn-outline:hover {
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--primary);
	}
}

/* ---------- ts-textbtn: przycisk/link tekstowy 44 px z podkreśleniem („Wróć do produktu”, „Usuń”, „Zmień ilość”) ---------- */
.ts-textbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 44px;
	margin: 0;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	cursor: pointer;
}

.ts-textbtn svg {
	flex: none;
	width: 18px;
	height: 18px;
}

.ts-textbtn:is(:hover, :focus-visible) {
	text-decoration-thickness: 2px;
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-textbtn {
	color: var(--wp--preset--color--accent-on-dark);
}

/* ---------- ts-jump: link-kotwica 44 px z chevronem w dół („Skład, wartości odżywcze i ostrzeżenia”) ---------- */
.ts-jump {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.ts-jump:not(:has(svg))::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("../icons/chevron.svg") center / contain no-repeat;
	mask: url("../icons/chevron.svg") center / contain no-repeat;
}

.ts-jump svg {
	flex: none;
	width: 18px;
	height: 18px;
}

.ts-jump:is(:hover, :focus-visible) {
	text-decoration-thickness: 2px;
}

/* ---------- ts-ph: chip placeholdera danych biznesowych (tylko środowisko ≠ production — thesybin_ph(), §14) ---------- */
.ts-ph {
	display: inline-block;
	max-width: 100%;
	padding: 1px 7px;
	border: 1px dashed var(--wp--preset--color--accent-text);
	border-radius: 6px;
	background-color: #FFF4DF;
	color: #6B4700; /* 7.62:1 */
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12.5px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.005em;
	line-height: 1.5;
	text-transform: none;
	vertical-align: baseline;
	white-space: normal;
	overflow-wrap: anywhere;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-ph {
	border-color: var(--wp--preset--color--accent-on-dark);
	background-color: rgba(243, 189, 113, 0.12);
	color: #FFE7C2; /* 8.11:1 na #274A46 */
}

/* ---------- ts-qty: steper ilości (F5, §2.5) — JS: assets/js/shop/qty-stepper.js ----------
   <div class="ts-qty" role="group" aria-labelledby="qty-label">
     <label class="ts-qty__label" id="qty-label" for="qty">Ilość</label>
     <div class="ts-qty__ctrl">
       <button type="button" data-step="-1" aria-controls="qty"><span class="ts-sr">Zmniejsz ilość</span></button>
       <input id="qty" name="quantity" type="number" inputmode="numeric" min="1" max="10" step="1" value="1">
       <button type="button" data-step="1" aria-controls="qty"><span class="ts-sr">Zwiększ ilość</span></button>
     </div>
   </div>
   Warianty: --sm (48 px: szuflada, koszyk). Ikony −/+ z maski (albo własne <svg aria-hidden> w przycisku). */
.ts-qty {
	flex: none;
	min-width: 0;
}

/* `.ts-qty .ts-qty__label` (0,2,0): WooCommerce `.woocommerce-page label{margin-bottom:.7em}` (0,1,1) nie nadpisze marginesu */
.ts-qty .ts-qty__label {
	display: block;
	margin: 0 0 8px;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

.ts-qty__ctrl {
	display: flex; /* nie inline-flex: bez 2 px linii tekstu pod kontrolką */
	align-items: center;
	box-sizing: border-box;
	height: 56px;
	padding: 0 5px;
	border: 1px solid var(--ts-field);
	border-radius: var(--ts-radius-pill);
	background-color: var(--wp--preset--color--white);
}

.ts-qty__ctrl button {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
}

.ts-qty__ctrl button svg {
	width: 18px;
	height: 18px;
}

.ts-qty__ctrl button:not(:has(svg))::before {
	content: "";
	grid-area: 1 / 1;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("../icons/plus.svg") center / contain no-repeat;
	mask: url("../icons/plus.svg") center / contain no-repeat;
}

.ts-qty__ctrl button[data-step^="-"]:not(:has(svg))::before {
	-webkit-mask-image: url("../icons/minus.svg");
	mask-image: url("../icons/minus.svg");
}

.ts-qty__ctrl button[aria-disabled="true"] {
	background: transparent;
	color: #8A8F8C; /* stan niedostępny (wyjątek 1.4.11) */
	cursor: not-allowed;
}

@media (hover: hover) {
	.ts-qty__ctrl button:not([aria-disabled="true"]):hover {
		background-color: var(--wp--preset--color--secondary);
	}
}

.ts-qty__ctrl input {
	width: 42px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.ts-qty__ctrl input::-webkit-inner-spin-button,
.ts-qty__ctrl input::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.ts-qty__ctrl input:focus-visible {
	outline-offset: 0;
}

.ts-qty.ts-qty--sm .ts-qty__ctrl {
	height: 48px;
	padding: 0 2px;
}

.ts-qty.ts-qty--sm .ts-qty__ctrl input {
	width: 36px;
	font-size: 16px;
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-qty__label {
	color: var(--wp--preset--color--white);
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-qty__ctrl {
	border-color: var(--wp--preset--color--white);
	--ts-focus: var(--wp--preset--color--primary); /* pierścień wewnątrz białej kontrolki */
}

@media (max-width: 767px) {
	.ts-qty .ts-qty__label {
		margin-bottom: 5px;
		font-size: 13px;
	}
}

/* ---------- ts-notice: komunikat (--ok, --error, --info) — rolę (status/alert) nadaje kontekst, nie klasa ---------- */
.ts-notice {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 0 12px; /* bez odstępu wierszy: ikona obejmuje pustymi wierszami całą treść */
	align-items: start;
	box-sizing: border-box;
	margin: 0;
	padding: 14px 16px;
	border-radius: 14px;
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	line-height: 1.5;
}

.ts-notice::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 9;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("../icons/info.svg") center / contain no-repeat;
	mask: url("../icons/info.svg") center / contain no-repeat;
}

.ts-notice > * {
	grid-column: 2;
	margin: 0;
}

.ts-notice > :not(svg, .ts-notice__icon) + :not(svg, .ts-notice__icon) {
	margin-top: 4px;
}

.ts-notice > :is(svg, .ts-notice__icon) {
	grid-column: 1;
	grid-row: 1 / span 9;
	width: 24px;
	height: 24px;
}

.ts-notice:has(> :is(svg, .ts-notice__icon))::before,
.ts-notice.ts-notice--noicon::before,
.ts-notice:empty::before {
	content: none;
}

.ts-notice.ts-notice--noicon {
	grid-template-columns: minmax(0, 1fr);
}

.ts-notice.ts-notice--noicon > * {
	grid-column: 1;
}

.ts-notice:empty {
	display: none;
}

.ts-notice :is(strong, b) {
	color: inherit;
	font-weight: 700;
}

.ts-notice a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ts-notice.ts-notice--ok {
	background-color: var(--ts-ok-bg);
	color: var(--ts-ok);
}

.ts-notice.ts-notice--ok::before {
	-webkit-mask-image: url("../icons/check-circle.svg");
	mask-image: url("../icons/check-circle.svg");
}

.ts-notice.ts-notice--error {
	border: 1px solid rgba(163, 38, 42, 0.35);
	background-color: var(--ts-error-bg);
	color: var(--ts-error);
}

.ts-notice.ts-notice--error::before {
	-webkit-mask-image: url("../icons/alert.svg");
	mask-image: url("../icons/alert.svg");
}

.ts-notice.ts-notice--info {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
}

/* ---------- ts-note: notka z ikoną 20 px #946207 (np. „Po otwarciu przechowywać w lodówce…”) ---------- */
.ts-note {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 0 10px;
	align-items: start;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 14px;
	border-radius: 14px;
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--body-text);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	line-height: 1.55;
}

.ts-note::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 9;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	background-color: var(--wp--preset--color--accent-text);
	-webkit-mask: var(--ts-note-icon, url("../icons/info.svg")) center / contain no-repeat;
	mask: var(--ts-note-icon, url("../icons/info.svg")) center / contain no-repeat;
}

.ts-note > * {
	grid-column: 2;
	margin: 0;
}

.ts-note > :not(svg) + * {
	margin-top: 4px;
}

.ts-note > svg:first-child {
	grid-column: 1;
	width: 20px;
	height: 20px;
	color: var(--wp--preset--color--accent-text);
}

.ts-note:has(> svg:first-child)::before {
	content: none;
}

.ts-note :is(strong, b) {
	color: var(--wp--preset--color--primary);
}

.ts-note.ts-note--white {
	background-color: var(--wp--preset--color--white);
}

/* ---------- ts-medal: medalion z ikoną (C5 w sklepie) — 48 / --sm 40 / --lg 60, --soft (kremowy z ikoną #274A46) ----------
   <span class="ts-medal" aria-hidden="true" style="--ts-medal-icon:url(…/icons/truck.svg)"></span> albo z <svg> w środku */
.ts-medal {
	--ts-medal-size: 48px;
	--ts-medal-glyph: 22px;
	display: grid;
	flex: none;
	place-items: center;
	box-sizing: border-box;
	width: var(--ts-medal-size);
	height: var(--ts-medal-size);
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

.ts-medal > :is(svg, img) {
	width: var(--ts-medal-glyph);
	height: var(--ts-medal-glyph);
}

.ts-medal:not(:has(svg, img))::before {
	content: "";
	width: var(--ts-medal-glyph);
	height: var(--ts-medal-glyph);
	background-color: currentColor;
	-webkit-mask: var(--ts-medal-icon, url("../icons/check.svg")) center / contain no-repeat;
	mask: var(--ts-medal-icon, url("../icons/check.svg")) center / contain no-repeat;
}

.ts-medal.ts-medal--sm {
	--ts-medal-size: 40px;
	--ts-medal-glyph: 19px;
}

.ts-medal.ts-medal--lg {
	--ts-medal-size: 60px;
	--ts-medal-glyph: 26px;
}

.ts-medal.ts-medal--soft {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
}

/* ---------- ts-checks: lista z checkiem 22 px (C12 w sklepie) ---------- */
.ts-checks {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-checks > li {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	margin: 0;
	line-height: 1.6;
}

.ts-checks > li::before {
	content: "";
	width: 22px;
	height: 22px;
	margin-top: 2px;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: url("../icons/check-circle.svg") center / contain no-repeat;
	mask: url("../icons/check-circle.svg") center / contain no-repeat;
}

.ts-checks > li:has(> svg:first-child)::before {
	content: none;
}

.ts-checks > li > svg:first-child {
	width: 22px;
	height: 22px;
	margin-top: 2px;
	color: var(--wp--preset--color--accent);
}

/* ---------- ts-usage: kroki stosowania — <ol class="ts-usage"><li>…</li></ol>, numery w złotych kołach 28 px (dekoracja CSS) ----------
   Strona podziękowania, konto („Jak stosować”). */
.ts-usage {
	display: grid;
	gap: 10px;
	margin: 14px 0 18px;
	padding: 0;
	list-style: none;
	counter-reset: ts-usage;
}

.ts-usage li {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	align-items: start;
	gap: 14px;
	margin: 0;
	line-height: 1.55;
	counter-increment: ts-usage;
}

.ts-usage li::before {
	content: counter(ts-usage);
	content: counter(ts-usage) / "";
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: 14px;
	font-weight: 700;
	line-height: 28px;
	text-align: center;
}

/* ---------- Pola formularzy sklepu: ts-field, ts-input, ts-hint, ts-err, ts-check (§7.4) ----------
   <div class="ts-field" [data-invalid]>
     <div class="ts-field__top"><label for="email">Adres e-mail</label><span class="ts-field__req" aria-hidden="true">wymagane</span></div>
     <input class="ts-input" id="email" type="email" autocomplete="email" required aria-describedby="email-err email-hint">
     <p class="ts-err" id="email-err">Wpisz adres e-mail w formacie nazwa@domena.pl.</p>
     <p class="ts-hint" id="email-hint">Na ten adres wyślemy potwierdzenie zamówienia.</p>
   </div>
   Błąd widoczny, gdy pole ma [data-invalid] (albo .ts-err poza .ts-field z niepustą treścią). */
.ts-field {
	display: grid;
	align-content: start;
	gap: 6px;
	min-width: 0;
}

.ts-field__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.ts-field :is(label, .ts-field__label) {
	margin: 0; /* WooCommerce `.woocommerce-page label{margin-bottom:.7em}` */
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.ts-field__req {
	color: var(--ts-muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	white-space: nowrap;
}

.ts-input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--ts-field);
	border-radius: var(--ts-radius-field);
	background-color: var(--wp--preset--color--white);
	color: var(--ts-input-text);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
}

textarea.ts-input {
	height: auto;
	min-height: 120px;
	padding: 14px 16px;
	line-height: 1.5;
	resize: vertical;
}

.ts-input::placeholder {
	color: var(--ts-muted);
}

.ts-input:hover {
	border-color: var(--ts-field-hover);
}

.ts-input:focus-visible {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

.ts-hint {
	margin: 0;
	color: var(--ts-muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13.5px;
	line-height: 1.45;
}

.ts-err {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr);
	gap: 8px;
	align-items: start;
	margin: 0;
	color: var(--ts-error);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

.ts-err::before {
	content: "";
	width: 18px;
	height: 18px;
	margin-top: 1px;
	background-color: currentColor;
	-webkit-mask: url("../icons/alert.svg") center / contain no-repeat;
	mask: url("../icons/alert.svg") center / contain no-repeat;
}

.ts-err:empty,
.ts-field:not([data-invalid]) .ts-err {
	display: none;
}

.ts-field[data-invalid] .ts-input,
.ts-input[aria-invalid="true"] {
	padding-left: 15px;
	border: 2px solid var(--ts-error);
}

.ts-check,
body label.ts-check {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	margin-bottom: 0; /* WooCommerce `.woocommerce-page label{margin-bottom:.7em}` (0,1,1) — stąd `body label.ts-check` */
	color: var(--wp--preset--color--body-text);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	line-height: 1.55;
	cursor: pointer;
}

.ts-check input[type="checkbox"],
.ts-check input[type="radio"] {
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	accent-color: var(--wp--preset--color--primary);
	cursor: pointer;
}

.ts-check a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ts-check small {
	color: var(--ts-muted);
	font-size: 13px;
	white-space: nowrap;
}

/* ---------- ts-cartbtn: przycisk koszyka w nagłówku (§3.1) — plan B / bez bloku WooCommerce ----------
   Blok woocommerce/mini-cart w nagłówku dostaje ten sam wygląd w layout.css (.ts-header__cart). */
.ts-cartbtn {
	position: relative;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 50px;
	height: 50px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--white);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	cursor: pointer;
	transition:
		color 0.4s ease,
		border-color 0.4s ease;
}

.ts-cartbtn svg {
	width: 22px;
	height: 22px;
}

.ts-cartbtn:is(:hover, :focus-visible) {
	border-color: var(--wp--preset--color--accent-on-dark);
	color: var(--wp--preset--color--accent-on-dark);
}

.ts-cartbtn__count {
	position: absolute;
	top: -5px;
	right: -5px;
	box-sizing: border-box;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-accent);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}

@media (max-width: 1199px) {
	.ts-cartbtn {
		width: 44px;
		height: 44px;
	}
}

/* Bez JavaScriptu przyciski −/+ nic nie robią — zostaje zwykłe pole liczbowe z natywnymi strzałkami */
html:not(.ts-js) body:not(.editor-styles-wrapper) .ts-qty__ctrl button {
	display: none;
}

html:not(.ts-js) body:not(.editor-styles-wrapper) .ts-qty__ctrl input {
	width: 72px;
	-moz-appearance: auto;
	appearance: auto;
}

/* ==========================================================================
   FORMULARZE WSPÓLNE — podsumowanie błędów, kontekst ciemny pól (faza LP: wtyczki „Thesybin Leady” i „Thesybin Webinary”)
   docs/ARCHITEKTURA-WTYCZEK.md §1.16, zmiany wspólne ZW-01 i ZW-04 (§8.4). Znaczniki: docs/KOMPONENTY.md „Formularze (ts-field…)”.
   ========================================================================== */

/* ---------- ts-errsum: podsumowanie błędów (ZW-01 — przeniesione z pages/shop-zamowienie.css, wygląd bez zmian) ----------
   <div class="ts-errsum" id="…-bledy" role="alert" tabindex="-1" hidden>
     <p class="ts-errsum__title">Popraw 2 pola, aby wysłać formularz:</p>
     <ul><li><a href="#pole-email">Adres e-mail — wpisz adres w formacie nazwa@domena.pl</a></li></ul>
   </div>
   Po nieudanej próbie wysłania: `hidden` zdjęte, fokus na kontenerze; klik w link ustawia fokus na polu. */
.ts-errsum {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 0 12px; /* bez odstępu wierszy: ikona obejmuje wiersze tytułu i listy (znacznik bez opakowania — ARCHITEKTURA §1.16) */
	align-items: start;
	box-sizing: border-box;
	padding: 18px 20px;
	border: 2px solid var(--ts-error);
	border-radius: 16px;
	background-color: var(--ts-error-bg);
	color: var(--ts-error);
	font-family: var(--wp--preset--font-family--sans);
}

.ts-errsum > * {
	grid-column: 2;
	min-width: 0;
}

.ts-errsum::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 9;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: url("../icons/alert.svg") center / contain no-repeat;
	mask: url("../icons/alert.svg") center / contain no-repeat;
}

.ts-errsum:focus {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.ts-errsum__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.ts-errsum ul {
	display: grid;
	gap: 4px;
	margin: 8px 0 0 18px;
	padding: 0;
}

.ts-errsum a {
	color: var(--ts-error);
	font-weight: 600;
	line-height: 1.9;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ts-errsum a:is(:hover, :focus-visible) {
	text-decoration-thickness: 2px;
}

/* ---------- Kontekst ciemny pól formularza (ZW-04): rodzic .ts-surface-dark / .has-primary-background-color / .ts-on-dark ----------
   Pola zostają białe (tekst #1F2A28); etykiety i teksty wokół pól jasne; błąd pola #FFC4BD (6.44:1 na #274A46, 9.93:1 na #102B28 —
   #A3262A miał 1.33:1). Komunikaty ts-notice i ts-errsum mają własne jasne tło — na ciemnym zmienia się tylko pierścień fokusu na zewnątrz
   (#F3BD71) i wewnątrz (#274A46). Przyciski: ts-cta ma już wariant ciemny (sekcja SKLEP). */
:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-field :is(label, .ts-field__label),
:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) :is(.ts-check, label.ts-check) {
	color: var(--wp--preset--color--white);
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) :is(.ts-field__req, .ts-hint, .ts-check small) {
	color: #D9E3E1; /* 7.44:1 na #274A46 */
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-err {
	color: #FFC4BD;
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-input:focus-visible {
	border-color: var(--wp--preset--color--primary);
	outline-color: var(--wp--preset--color--accent-on-dark);
	outline-offset: 2px;
}

/* Pole z błędem na ciemnym tle: ramka 2 px #A3262A wewnątrz białego pola (7.32:1 do bieli) + jasna obwódka 2 px (widoczna na zieleni) */
:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) :is(.ts-field[data-invalid] .ts-input, .ts-input[aria-invalid="true"]) {
	box-shadow: 0 0 0 2px #FFC4BD;
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-check a {
	color: var(--wp--preset--color--accent-on-dark);
}

/* Zaznaczone pole wyboru #274A46 zlewało się z tłem sekcji — złoto #F3BD71 (5.72:1 do tła), znacznik ciemny */
:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-check :is(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--wp--preset--color--accent-on-dark);
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) :is(.ts-notice, .ts-errsum) {
	--ts-focus: var(--wp--preset--color--primary);
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .ts-errsum:focus {
	outline-color: var(--wp--preset--color--accent-on-dark);
}

/* Karta z białym tłem wewnątrz ciemnej sekcji (np. formularz w is-style-ts-card-shadow) — z powrotem wariant jasny */
:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) :is(.ts-card--shadow, .is-style-ts-card-shadow, .ts-on-light) {
	--ts-focus: var(--wp--preset--color--primary);
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) :is(.ts-card--shadow, .is-style-ts-card-shadow, .ts-on-light) .ts-field :is(label, .ts-field__label) {
	color: var(--wp--preset--color--primary);
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) :is(.ts-card--shadow, .is-style-ts-card-shadow, .ts-on-light) :is(.ts-check, label.ts-check) {
	color: var(--wp--preset--color--body-text);
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) :is(.ts-card--shadow, .is-style-ts-card-shadow, .ts-on-light) :is(.ts-field__req, .ts-hint, .ts-check small) {
	color: var(--ts-muted);
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) :is(.ts-card--shadow, .is-style-ts-card-shadow, .ts-on-light) .ts-err {
	color: var(--ts-error);
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) :is(.ts-card--shadow, .is-style-ts-card-shadow, .ts-on-light) .ts-input:focus-visible {
	outline-color: var(--wp--preset--color--primary);
	outline-offset: 1px;
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) :is(.ts-card--shadow, .is-style-ts-card-shadow, .ts-on-light) :is(.ts-field[data-invalid] .ts-input, .ts-input[aria-invalid="true"]) {
	box-shadow: none;
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) :is(.ts-card--shadow, .is-style-ts-card-shadow, .ts-on-light) .ts-check a {
	color: var(--wp--preset--color--primary);
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) :is(.ts-card--shadow, .is-style-ts-card-shadow, .ts-on-light) .ts-check :is(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--wp--preset--color--primary);
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) :is(.ts-card--shadow, .is-style-ts-card-shadow, .ts-on-light) .ts-errsum:focus {
	outline-color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   ts-ebook-cover — okładka tekstowa e-booka (ZW-02; docs/TRESCI-MAPA.md §4.7) do czasu grafik okładek
   <div class="ts-ebook-cover" aria-hidden="true"><span class="ts-ebook-cover__tytul">Jelita nie lubią wakacji?</span><span class="ts-ebook-cover__marka">THESYBIN</span></div>
   Proporcja 3:4 (lista e-booków), `--wide` 4:3 (strona główna, „Polecane e-booki”, pokój webinaru), `--muted` — „W planie”.
   Tło #274A46 z liściem C20 (--ts-deco-leaf-2), kropla 6462 u góry (--ts-ebook-drop, inc/block-styles.php), tytuł Lora kursywa
   biała 22 (≤767: 18), „THESYBIN” PJS 600 12 wersalikami u dołu. `aria-hidden` — tytuł jest w nagłówku karty obok.
   ========================================================================== */
.ts-ebook-cover {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 3 / 4;
	margin: 0;
	padding: 28px 22px 22px;
	overflow: hidden;
	border-radius: var(--ts-radius-card);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	text-align: center;
}

/* Kropla u góry */
.ts-ebook-cover::before {
	content: "";
	flex: none;
	width: 30px;
	height: 40px;
	background: var(--ts-ebook-drop) no-repeat center / contain;
}

/* Liść C20 w prawym dolnym rogu */
.ts-ebook-cover::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -24px;
	bottom: -12px;
	width: 45%;
	height: 60%;
	background: var(--ts-deco-leaf-2) no-repeat right bottom / contain;
	opacity: 0.6;
	pointer-events: none;
}

.ts-ebook-cover__tytul {
	display: block;
	margin: auto 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 22px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.3;
	overflow-wrap: break-word;
	/* Bez automatycznego dzielenia wyrazów — przy 390 px dzieliło „neuroróżnorodno-ść” (integracja LP, 15.09.2026). */
	hyphens: manual;
}

.ts-ebook-cover__marka {
	display: block;
	flex: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ts-ebook-cover--wide {
	aspect-ratio: 4 / 3;
	padding: 20px 24px 18px;
}

.ts-ebook-cover--wide::before {
	width: 24px;
	height: 32px;
}

/* „W planie” — przygaszona: kremowe tło, tekst #274A46 (8.1:1 na #F6F2EC), bez kropli */
.ts-ebook-cover--muted {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 1px var(--ts-cream-line);
}

.ts-ebook-cover--muted::before {
	content: none;
}

.ts-ebook-cover--muted::after {
	background-image: var(--ts-deco-leaf-1);
	opacity: 0.35;
}

@media (max-width: 767px) {
	.ts-ebook-cover__tytul {
		font-size: 18px;
	}
}