/*
 * TheSybin — układ: szablon strony, nagłówek (S2/S3), menu mobilne, baner strony z okruszkami (S4), stopka (S5/S6).
 * Wartości: design-ref/spec/global.md; decyzje: docs/DECYZJE.md (D1 kolory, D2 menu ≤1199 px, D7 teksty, D10 baner).
 * Opis dla budujących strony: docs/UKLAD.md. Odstępstwa od wzorca: docs/odstepstwa/uklad.md.
 *
 * Wygląd komponentów (przycisk C3, social C15, pigułki C16) — components.css;
 * tu wyłącznie ich położenie i wymiary w nagłówku/stopce.
 * Progi: desktop ≥1200 (pełne menu), 1025–1199 (hamburger + akcje), tablet ≤1024, telefon ≤767.
 */

/* ==========================================================================
   Szablon
   ========================================================================== */

.wp-site-blocks {
	position: relative;
}

/* Bez odstępu blockGap 20 px między częściami szablonu (każde dziecko .wp-site-blocks: nagłówek, main, stopka — także części kasy) */
.wp-site-blocks > * {
	margin-block: 0;
}

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

/*
 * Treść pod banerem (page.html, index.html): dokument jak Sellsmart (`.post-content{max-width:1100px}`, legal-konto.md S2/S3) —
 * kolumna 1100 px (x 170–1270 przy 1440), margines 15 px, odstęp 100/50 px. Strony o szerszej treści (np. konto WooCommerce 1270 px)
 * nadpisują `--wp--style--global--content-size` w CSS strony.
 * Strona złożona z sekcji pełnej szerokości (pierwszy blok .alignfull) — bez odstępu, sekcje same go mają.
 */
.wp-block-group.ts-page-content {
	padding: var(--ts-section-y) 0;
}

.wp-block-group.ts-page-content:has(> .wp-block-post-content > .alignfull:first-child) {
	padding-block: 0;
}

.ts-page-content > .wp-block-post-content {
	--wp--style--root--padding-left: 15px;
	--wp--style--root--padding-right: 15px;
	--wp--style--global--content-size: 1100px;
}

/* ==========================================================================
   Nagłówek — nad banerem, nieprzyklejony (S2, D2)
   ========================================================================== */

.wp-site-blocks > .ts-site-header {
	position: absolute;
	z-index: 100;
	top: 0;
	right: 0;
	left: 0;
}

.wp-block-group.ts-header {
	padding: 20px 10px;
	border-bottom: 1px solid var(--ts-divider-dark);
	color: var(--wp--preset--color--white);
}

/* Edytor: nagłówek nie leży na banerze — tło zieleni, żeby biały tekst był czytelny podczas edycji */
.editor-styles-wrapper .wp-block-group.ts-header {
	background-color: var(--wp--preset--color--primary);
}

.wp-block-group.ts-header__inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	box-sizing: border-box;
	max-width: 1300px;
	min-height: 70px;
	margin-inline: auto;
	padding: 10px;
	/* Kolejność fokusu = kolejność wizualna po przestawieniu menu (≤1199 px) w przeglądarkach z reading-flow: `source-order` + `reading-order`
	   na akcjach i menu (niżej, razem z `order`). `flex-visual` w Chrome 152 gubił menu przy 1025–1199 px: Tab z „KUP THESYBIN” przeskakiwał
	   „Otwórz menu” (bez JS — wszystkie linki menu) prosto do treści, a Shift+Tab szedł w kolejności źródła (2.1.1, 2.4.3). */
	reading-flow: source-order;
}

.ts-header .ts-header__inner > * {
	margin-block: 0;
}

/* Logo 114×50 */
.ts-header .ts-header__logo {
	flex: 0 0 23%;
	min-width: 0;
	line-height: 0;
}

.ts-header .ts-header__logo img {
	display: block;
	width: 114px;
	max-width: 100%; /* bardzo wąski wiersz (320 px z przełącznikiem języka): logo zwęża się proporcjonalnie zamiast ściskać */
	height: auto;
	aspect-ratio: 114 / 50;
}

/* --- Menu główne (≥1200 px w wierszu) --- */

.ts-header nav.ts-header__nav {
	flex: 0 0 43%;
	min-width: 0;
	gap: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 600;
}

.ts-header nav.ts-header__nav .wp-block-navigation__container {
	gap: 0;
}

/* Kontener nakładki ma klasy koloru złotego (has-accent-background-color) także wtedy, gdy menu stoi w wierszu */
.ts-header nav.ts-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
	--ts-focus: var(--wp--preset--color--accent-on-dark);
}

.ts-header nav.ts-header__nav .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 50px;
	padding: 15px;
	color: var(--wp--preset--color--white);
	line-height: 1.1;
	text-decoration: none;
}

/* Hover, fokus i bieżąca strona na zdjęciu: biały tekst + podkreślenie 2 px #F3BD71 (D1-B2) */
.ts-header nav.ts-header__nav .wp-block-navigation-item__label {
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	transition: text-decoration-color 0.3s ease-in-out;
}

.ts-header nav.ts-header__nav .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"]) .wp-block-navigation-item__label,
.ts-header nav.ts-header__nav .current-menu-ancestor > .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label {
	text-decoration-color: var(--wp--preset--color--accent-on-dark);
}

/* --- Podmenu „Wiedza” (core/navigation-submenu, otwierane kliknięciem; TRESCI-MAPA §2.2) ---
   Przycisk wygląda jak pozycja menu, strzałka 12 px za etykietą (obrót przy aria-expanded="true").
   Panel ≥1200 px: biała karta (promień i cień kart motywu), pozycje #274A46, stan jak w menu — podkreślenie 2 px złote. */

.ts-header nav.ts-header__nav .wp-block-navigation-submenu__toggle.wp-block-navigation-item__content {
	margin: 0;
	padding-right: 36px; /* etykieta · 6 px · strzałka 12 px · 18 px (cel kliknięcia obejmuje strzałkę) */
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

.ts-header nav.ts-header__nav .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon {
	width: 12px;
	height: 12px;
	margin: 0 0 0 -30px;
	padding: 0;
	color: var(--wp--preset--color--white);
	pointer-events: none;
}

.ts-header nav.ts-header__nav .wp-block-navigation__submenu-icon svg {
	width: 12px;
	height: 12px;
	stroke: currentColor;
}

/* Strzałka leży na przycisku (margines ujemny) — odstęp do następnej pozycji jak między pozycjami menu (30 px) */
.ts-header nav.ts-header__nav .has-child > .wp-block-navigation__submenu-icon {
	margin-right: 15px;
}

.ts-header nav.ts-header__nav .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: no-preference) {
	.ts-header nav.ts-header__nav .wp-block-navigation__submenu-icon svg {
		transition: transform 0.2s ease-in-out;
	}
}

.ts-header nav.ts-header__nav .has-child .wp-block-navigation__submenu-container {
	top: calc(100% + 6px);
	left: 0;
	z-index: 110;
	box-sizing: border-box;
	padding: 12px 0;
	border: 0;
	border-radius: var(--ts-radius-card);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--ts-shadow-lift);
	color: var(--wp--preset--color--primary);
	--ts-focus: var(--wp--preset--color--primary);
}

.ts-header nav.ts-header__nav .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	min-width: 220px;
}

.ts-header nav.ts-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
}

.ts-header nav.ts-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: block;
	height: auto;
	padding: 10px 24px;
	color: var(--wp--preset--color--primary);
	line-height: 1.4;
	white-space: nowrap;
	outline-offset: -3px;
}

.ts-header nav.ts-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"]) .wp-block-navigation-item__label {
	text-decoration-color: var(--wp--preset--color--accent);
}

/* Tryb wymuszonych kolorów: cień znika, a tło karty i nagłówka to ten sam Canvas — ramka systemowa wyznacza granicę panelu (1.4.11) */
@media (forced-colors: active) {
	.ts-header nav.ts-header__nav .has-child .wp-block-navigation__submenu-container {
		border: 1px solid CanvasText;
	}

	.ts-header nav.ts-header__nav .is-menu-open .has-child .wp-block-navigation__submenu-container {
		border: 0;
	}
}

@media (forced-colors: active) and (max-width: 1199px) {
	html:not(.ts-js) body:not(.editor-styles-wrapper) .ts-header nav.ts-header__nav .has-child .wp-block-navigation__submenu-container {
		border: 0;
	}
}

/* Bez JavaScriptu (≥1200 px): przycisk nie otworzy panelu — panel widoczny przy najechaniu i przy fokusie wewnątrz pozycji */
@media (min-width: 1200px) {
	html:not(.ts-js) body:not(.editor-styles-wrapper) .ts-header nav.ts-header__nav .has-child:is(:hover, :focus-within) > .wp-block-navigation__submenu-container {
		width: auto;
		min-width: 220px;
		height: auto;
		overflow: visible;
		visibility: visible;
		opacity: 1;
	}
}

/* --- Przełącznik języka w nagłówku (K11): link „English” przy koszyku, tylko gdy strona ma tłumaczenie --- */
.ts-header .ts-header__lang {
	display: flex;
	flex: none;
	margin: 0 20px 0 15px; /* z lewej 15 px: przy ciasnym wierszu (np. EN) „English” nie przylega do ostatniej pozycji menu */
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 600;
}

.ts-header .ts-header__lang a {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--white);
	text-decoration: underline 2px transparent;
	text-underline-offset: 6px;
	transition: text-decoration-color 0.3s ease-in-out;
}

.ts-header .ts-header__lang a:is(:hover, :focus-visible) {
	text-decoration-color: var(--wp--preset--color--accent-on-dark);
}

/* --- Akcje: social (K6), przełącznik języka (K11), koszyk, KUP THESYBIN --- */

.wp-block-group.ts-header__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
	min-width: 0;
}

/* Menu LP (6 pozycji z „Technologia”, „Partnerzy”, „Wiedza ▾”) jest szersze niż 43 %: menu zajmuje miejsce między logo (23 %)
   a akcjami (szerokość treści), pozycje wyśrodkowane w tym pasie. Z ikonami social (K6, gdy są adresy) logo ma szerokość własną. */
@media (min-width: 1200px) {
	.ts-header nav.ts-header__nav {
		flex: 1 1 auto;
	}

	.ts-header .ts-header__inner:has(.ts-header__actions--social) .ts-header__logo {
		flex: 0 0 auto;
		margin-right: 20px;
	}

	/* Etykiety menu w jednym wierszu (przy braku miejsca „O nas” łamało się na „O / nas”). Menu nie węższe niż treść;
	   gdy wiersz jest za ciasny (np. dłuższe etykiety EN), zwęża się najpierw pusty pas logo (23 % → szerokość logo 114 px). */
	.ts-header nav.ts-header__nav {
		min-width: max-content;
	}

	.ts-header .ts-header__logo {
		flex-shrink: 1;
		min-width: 114px;
	}

	.ts-header nav.ts-header__nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		white-space: nowrap;
	}
}

/* Nagłówek z ikonami social (K6) i przełącznikiem języka (K11) jednocześnie: suma szerokości przekraczała wiersz —
   przy 1280 „Kontakt” nachodził na ikonę LinkedIn, przy 1440 menu stykało się z ikonami. ≥1440: ciaśniejsze odstępy
   (jak 1200–1279); 1200–1439: ikony social tylko w stopce („Media”), jak ≤1024 we wzorcu. Bez social albo bez przełącznika — bez zmian. */
@media (min-width: 1440px) {
	.ts-header .ts-header__inner:has(.ts-header__lang):has(.ts-header__social) nav.ts-header__nav .wp-block-navigation-item__content {
		padding-inline: 12px;
	}

	.ts-header .ts-header__inner:has(.ts-header__lang):has(.ts-header__social) nav.ts-header__nav .wp-block-navigation-submenu__toggle.wp-block-navigation-item__content {
		padding-right: 36px;
	}

	.ts-header .ts-header__inner:has(.ts-header__lang):has(.ts-header__social) .wp-block-social-links.ts-header__social {
		gap: 8px;
		margin-right: 5px; /* + 15 px marginesu przełącznika = 20 px od linii */
		padding-right: 20px;
	}

	.ts-header .ts-header__inner:has(.ts-header__lang):has(.ts-header__social) .ts-header__lang {
		margin-right: 16px;
	}

	.ts-header .ts-header__inner:has(.ts-header__lang):has(.ts-header__social) .wc-block-mini-cart.ts-header__cart {
		margin-right: 16px;
	}
}

@media (min-width: 1200px) and (max-width: 1439px) {
	.ts-header .ts-header__inner:has(.ts-header__lang):has(.ts-header__social) .wp-block-social-links.ts-header__social {
		display: none;
	}

	.ts-header .ts-header__inner:has(.ts-header__lang):has(.ts-header__social) .ts-header__logo {
		flex: 0 1 23%;
		margin-right: 0;
	}
}

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

/* Social 36×36 (C15): odstępy jak we wzorcu (x 981/1034/1088), pionowa linia za ikonami */
.ts-header .wp-block-social-links.ts-header__social {
	flex: none;
	gap: 17.5px;
	margin: 0 30px 0 0;
	padding: 0 30px 0 0;
	border-right: 1px solid var(--ts-divider-dark);
}

.ts-header .ts-header__social .ts-social__icon {
	position: relative;
	top: 1px;
}

/* KUP THESYBIN (C3 highlighted, dawniej „ZAMÓW”): pigułka 173×50 + kółko 50 px */
.ts-header .wp-block-buttons.ts-header__cta {
	flex: none;
	gap: 0;
	margin: 0;
}

.ts-header .ts-header__cta .wp-block-button {
	margin: 0;
}

/* Szerokość pigułki (width: auto wbrew rdzeniowemu .wp-block-buttons .wp-block-button__link { width: 100% }) — components.css C3 */

/* Przycisk koszyka (D2 — dodany względem wzorca; SKLEP-PROJEKT.md §3.1): social → linia → koszyk 50×50 → KUP THESYBIN.
   Blok woocommerce/mini-cart renderuje motyw (plan B, inc/shop-product.php): `button#ts-cart-toggle.ts-cartbtn` (szuflada motywu),
   bez JS link `a.ts-cartbtn--nojs`, na /koszyk/ link bieżącej strony `a.ts-cartbtn--current`. Wrapper zachowuje klasy bloku.
   Wygląd = komponent .ts-cartbtn (components.css): koło z białym obrysem, torba 22 px, licznik 22 px #BE8A3D/#102B28
   z obwódką 2 px #274A46, ukryty przy 0. */
.ts-header .wc-block-mini-cart.ts-header__cart {
	flex: none;
	margin: 0 20px 0 0;
	font-size: 16px;
}

.ts-header .ts-header__cart .ts-cartbtn {
	position: relative;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--white);
	border-radius: 50%;
	color: var(--wp--preset--color--white);
	transition:
		color 0.4s ease,
		border-color 0.4s ease;
}

/* Bez JavaScriptu: zamiast przycisku szuflady link do /koszyk/ o tym samym wyglądzie (inc/shop-product.php) */
.ts-header .ts-header__cart .ts-cartbtn--nojs {
	display: none;
}

html:not(.ts-js) body:not(.editor-styles-wrapper) .ts-header .ts-header__cart #ts-cart-toggle {
	display: none;
}

html:not(.ts-js) body:not(.editor-styles-wrapper) .ts-header .ts-header__cart .ts-cartbtn--nojs {
	display: grid;
}

/* Szuflada WooCommerce (komponent drawer) zamknięta = poza drzewem dostępności i kolejnością Tab (WooCommerce zostawia ją tylko
   przezroczystą poza ekranem). Koszyk w nagłówku otwiera szufladę motywu (<dialog id="ts-cart-drawer">, global-mini-cart.css). */
.wc-block-components-drawer__screen-overlay--is-hidden {
	visibility: hidden;
	transition:
		opacity 0.3s,
		visibility 0s linear 0.3s;
}

/* Fokus przycisków bloków WooCommerce (koszyk, kasa) jak w całym motywie (D2): WooCommerce daje outline przezroczysty
   i niebieski box-shadow, a na przyciskach z tłem motywu (theme.json) wskaźnik znikał całkowicie (2.4.7). */
html body .wc-block-components-button:not(.is-link):focus-visible {
	outline: 2px solid var(--ts-focus);
	outline-offset: 3px;
	box-shadow: none;
}

/* --- Przycisk hamburgera (≤1199 px): 38×38, złoty, ikona #102B28 (D1-A) --- */

.ts-header nav.ts-header__nav .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 38px;
	height: 38px;
	padding: 8px 6px;
	border-radius: 8px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	--ts-focus: var(--wp--preset--color--accent-on-dark);
	transition:
		background-color 0.3s ease-in-out,
		color 0.3s ease-in-out;
}

.ts-header nav.ts-header__nav .wp-block-navigation__responsive-container-open svg {
	width: 22px;
	height: 22px;
}

@media (hover: hover) {
	.ts-header nav.ts-header__nav .wp-block-navigation__responsive-container-open:hover {
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--primary);
	}
}

/* ==========================================================================
   Nagłówek — 1200–1279 px: ciaśniejsze odstępy, żeby menu i akcje zmieściły się w jednym wierszu
   ========================================================================== */

@media (min-width: 1200px) and (max-width: 1279px) {
	.ts-header nav.ts-header__nav .wp-block-navigation-item__content {
		padding-inline: 10px;
	}

	.ts-header .wp-block-social-links.ts-header__social {
		gap: 8px;
		margin-right: 20px;
		padding-right: 10px;
	}

	.ts-header .wc-block-mini-cart.ts-header__cart {
		margin-right: 12px;
	}
}

/* ==========================================================================
   Nagłówek ≤1199 px: hamburger (D2) zamiast menu w wierszu
   ========================================================================== */

@media (max-width: 1199px) {
	.ts-header .ts-header__logo {
		flex: 1 1 auto;
	}

	/* Koszyk 44×44 obok hamburgera (SKLEP-PROJEKT.md §3.1) */
	.ts-header .ts-header__cart .ts-cartbtn {
		width: 44px;
		height: 44px;
	}

	.wp-block-group.ts-header__actions {
		flex: 0 0 auto;
		order: 2;
		reading-order: 2;
	}

	.ts-header nav.ts-header__nav {
		flex: 0 0 auto;
		order: 3;
		reading-order: 3;
		margin-left: 20px;
	}

	.ts-header nav.ts-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.ts-header nav.ts-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/*
	 * Bez JavaScriptu nakładka rdzenia się nie otworzy (Interactivity API) — zamiast martwego hamburgera linki menu
	 * w wierszu pod logo, nagłówek w przepływie strony na tle zieleni (html.ts-js ustawia skrypt w <head>).
	 */
	html:not(.ts-js) body:not(.editor-styles-wrapper) .wp-site-blocks > .ts-site-header {
		position: relative;
		background-color: var(--wp--preset--color--primary);
	}

	html:not(.ts-js) body:not(.editor-styles-wrapper) .wp-block-group.ts-header__inner {
		flex-wrap: wrap;
	}

	html:not(.ts-js) body:not(.editor-styles-wrapper) .ts-header nav.ts-header__nav {
		flex: 1 0 100%;
		margin-left: 0;
	}

	html:not(.ts-js) body:not(.editor-styles-wrapper) .ts-header nav.ts-header__nav .wp-block-navigation__responsive-container-open {
		display: none;
	}

	html:not(.ts-js) body:not(.editor-styles-wrapper) .ts-header nav.ts-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		position: static;
		display: block;
		width: 100%;
		background: none;
	}

	html:not(.ts-js) body:not(.editor-styles-wrapper) .ts-header nav.ts-header__nav .wp-block-navigation__responsive-container-close {
		display: none;
	}

	html:not(.ts-js) body:not(.editor-styles-wrapper) .ts-header nav.ts-header__nav .wp-block-navigation__container {
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-inline: -10px;
	}

	html:not(.ts-js) body:not(.editor-styles-wrapper) .ts-header nav.ts-header__nav .wp-block-navigation-item__content {
		height: 44px;
		padding-inline: 10px;
	}

	/* Podmenu bez JS: pozycje „Wiedza” w tym samym wierszu (przycisk bez działania jest tylko etykietą grupy, bez strzałki) */
	html:not(.ts-js) body:not(.editor-styles-wrapper) .ts-header nav.ts-header__nav .has-child {
		flex-wrap: wrap;
	}

	html:not(.ts-js) body:not(.editor-styles-wrapper) .ts-header nav.ts-header__nav .wp-block-navigation-submenu__toggle.wp-block-navigation-item__content {
		padding-right: 4px;
		cursor: default;
	}

	html:not(.ts-js) body:not(.editor-styles-wrapper) .ts-header nav.ts-header__nav .wp-block-navigation__submenu-icon {
		display: none;
	}

	html:not(.ts-js) body:not(.editor-styles-wrapper) .ts-header nav.ts-header__nav .has-child .wp-block-navigation__submenu-container {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		width: auto;
		height: auto;
		padding: 0;
		overflow: visible;
		visibility: visible;
		opacity: 1;
		border-radius: 0;
		background: none;
		box-shadow: none;
		--ts-focus: var(--wp--preset--color--accent-on-dark);
	}

	html:not(.ts-js) body:not(.editor-styles-wrapper) .ts-header nav.ts-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
		width: auto;
	}

	html:not(.ts-js) body:not(.editor-styles-wrapper) .ts-header nav.ts-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
		display: flex;
		height: 44px;
		padding: 0 10px;
		color: var(--wp--preset--color--white);
	}

	html:not(.ts-js) body:not(.editor-styles-wrapper) .ts-header nav.ts-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"]) .wp-block-navigation-item__label {
		text-decoration-color: var(--wp--preset--color--accent-on-dark);
	}
}

/* ≤1024 px: nagłówek 91 px, bez social i KUP THESYBIN (jak wzorzec), koszyk 38 px obok hamburgera */
@media (max-width: 1024px) {
	.wp-block-group.ts-header {
		padding: 10px;
	}

	.ts-header :is(.ts-header__social, .ts-header__cta) {
		display: none;
	}

	.ts-header .wc-block-mini-cart.ts-header__cart {
		margin-right: 0;
	}

	.ts-header nav.ts-header__nav {
		margin-left: 12px;
	}

	/* Przełącznik języka (gdy strona ma tłumaczenie): odstęp do koszyka jak koszyk–hamburger (12 px) — logo, „English”, koszyk i hamburger mieszczą się przy 320 px */
	.ts-header .ts-header__lang {
		margin: 0 12px 0 8px;
	}
}

/* ==========================================================================
   Menu mobilne — nakładka core/navigation jako panel off-canvas wzorca (S3)
   Złoty pełny ekran, pozycje #102B28, pasek z przyciskiem zamknięcia 38×38.
   Modalność, Esc, pułapka i powrót fokusu: rdzeń (Interactivity API) + inc/layout.php.
   ========================================================================== */

.ts-header nav.ts-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: 16px;
	font-weight: 600;
	--ts-focus: var(--wp--preset--color--on-accent);
}

.ts-header nav.ts-header__nav .is-menu-open .wp-block-navigation__responsive-close {
	max-width: none;
	margin: 0;
}

.ts-header nav.ts-header__nav .is-menu-open .wp-block-navigation__responsive-dialog {
	margin-top: 0;
	padding-top: 78px;
}

.ts-header nav.ts-header__nav .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 20px;
	right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 38px;
	height: 38px;
	padding: 8px;
	border-radius: 8px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 22px;
	font-weight: 700;
	line-height: 22px;
	transition:
		background-color 0.3s ease-in-out,
		color 0.3s ease-in-out;
}

@media (hover: hover) {
	.ts-header nav.ts-header__nav .is-menu-open .wp-block-navigation__responsive-container-close:hover {
		background-color: var(--wp--preset--color--primary);
		color: var(--wp--preset--color--white);
	}
}

/* Pasek zamknięcia 79 px z linią, lista od y = 89 */
.ts-header nav.ts-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	padding: 10px 0;
	border-top: 1px solid var(--ts-divider-dark);
}

.ts-header nav.ts-header__nav .is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	width: 100%;
	gap: 0;
}

.ts-header nav.ts-header__nav .is-menu-open .wp-block-navigation-item {
	align-items: stretch;
	width: 100%;
}

.ts-header nav.ts-header__nav .is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: block;
	height: auto;
	padding: 8px 20px;
	color: var(--wp--preset--color--on-accent);
	line-height: 1.3;
	outline-offset: -3px;
}

.ts-header nav.ts-header__nav .is-menu-open .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"]) .wp-block-navigation-item__label,
.ts-header nav.ts-header__nav .is-menu-open .current-menu-ancestor > .wp-block-navigation-submenu__toggle .wp-block-navigation-item__label {
	text-decoration-color: var(--wp--preset--color--on-accent);
}

/* Podmenu w nakładce: rozwinięte (rdzeń, aria-expanded="true"), pozycje z wcięciem pod „Wiedza”, bez karty */
.ts-header nav.ts-header__nav .is-menu-open .wp-block-navigation-submenu__toggle.wp-block-navigation-item__content {
	width: 100%;
	padding-right: 20px;
	text-align: start;
}

.ts-header nav.ts-header__nav .is-menu-open .has-child .wp-block-navigation__submenu-container {
	position: static;
	width: 100%;
	min-width: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--wp--preset--color--on-accent);
	--ts-focus: var(--wp--preset--color--on-accent);
}

.ts-header nav.ts-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content {
	padding: 8px 20px 8px 40px;
	color: var(--wp--preset--color--on-accent);
	line-height: 1.3;
	white-space: normal;
}

.ts-header nav.ts-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"]) .wp-block-navigation-item__label {
	text-decoration-color: var(--wp--preset--color--on-accent);
}

@media (prefers-reduced-motion: no-preference) {
	.ts-header nav.ts-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		animation: ts-offcanvas-in 0.3s ease-in-out;
	}
}

@keyframes ts-offcanvas-in {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: none;
	}
}

/* ==========================================================================
   Baner strony + okruszki (S4, D10)
   Wysokość 445/310/290 (h1 w 1 wierszu); wariant --leaf: liść i h1 z −0,02em (447/312/291).
   ========================================================================== */

.wp-block-cover.ts-page-hero {
	align-items: flex-start;
	min-height: 0;
	padding: 225px 15px 120px;
	color: var(--wp--preset--color--white);
}

.ts-page-hero .wp-block-cover__image-background {
	/* Sellsmart: tło zakotwiczone w lewym górnym rogu (skrót `background` zerował pozycję) */
	object-position: 0 0;
}

/* Baner dokumentów i stron technicznych (6285, wariant A — K3): plik ma jasny pas u góry (19 px) i czarny u dołu (13 px z 1080) —
   kadr ze środka i powiększenie 4 % chowają oba pasy (integracja LP, 15.09.2026). */
.ts-page-hero .wp-block-cover__image-background.wp-image-6285 {
	object-position: 50% 50%;
	transform: scale(1.04);
}

.ts-page-hero--leaf .wp-block-cover__image-background {
	/* Stan wzorca przy scroll = 0 (warstwa jarallax: wysokość (baner + okno) / 2, od góry banera) — bez paralaksy (D4) */
	bottom: auto;
	height: calc(50% + 50vh);
	object-position: 50% 50%;
}

.ts-page-hero .wp-block-cover__inner-container {
	box-sizing: border-box;
	max-width: 1270px;
	margin-inline: auto;
	text-align: center;
}

.ts-page-hero .wp-block-cover__inner-container > * {
	margin-block: 0;
}

.ts-page-hero .ts-page-hero__title {
	margin: 0 0 10px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--ts-fs-h1);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	overflow-wrap: break-word;
}

/* Linia h1 jak wzorzec: nagłówek Elementora dzielony na litery (SplitText, inline-block) ma wiersz 74/56/37 px zamiast 72/54/36 —
   bez tego strony z jednowierszowym h1 bez kursywy (Kontakt) leżą 2 px wyżej. Z kursywą Lora wiersz ma już tę wysokość. */
.ts-page-hero--leaf .ts-page-hero__title {
	min-height: 74px;
	letter-spacing: -0.02em;
}

.ts-page-hero--leaf::after {
	content: "";
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 0;
	width: 132px;
	height: 245px;
	background: var(--ts-hero-leaf) no-repeat left bottom / contain;
	pointer-events: none;
}

.ts-breadcrumbs {
	line-height: normal;
}

.ts-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-breadcrumbs__item {
	display: inline-block;
	color: var(--wp--preset--color--white);
	font-size: 18px;
	line-height: 1;
}

/* Separator dekoracyjny (pusty tekst alternatywny, poza drzewem dostępności) */
.ts-breadcrumbs__item + .ts-breadcrumbs__item::before {
	content: "/";
	content: "/" / "";
	margin: 0 8px;
}

.ts-breadcrumbs__item a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 3px;
}

.ts-breadcrumbs__item a:is(:hover, :focus-visible) {
	text-decoration-line: underline;
}

@media (max-width: 1024px) {
	.wp-block-cover.ts-page-hero {
		padding: 160px 15px 70px;
	}

	.ts-breadcrumbs__item {
		font-size: 16px;
	}

	.ts-page-hero--leaf::after {
		width: 70px;
		height: 130px;
	}

	.ts-page-hero--leaf .ts-page-hero__title {
		min-height: 56px;
	}
}

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

	.ts-page-hero--leaf .ts-page-hero__title {
		min-height: 37px;
	}
}

/* --- Wariant kompaktowy (sklep: produkt, koszyk, konto — SKLEP-PROJEKT.md §3.2) ---
   Bez h1 (h1 jest w treści), zdjęcie 6417 (`center 35%`) z nakładką #274A46 × 0,8, okruszki do lewej w kontenerze 1280 px.
   Wysokość 189 / 169 / 139 = nagłówek 111 / 91 + okruszki (20 + 34 + 24 px; telefon 6 + 32 + 10 px). */
.wp-block-cover.ts-page-hero.ts-page-hero--compact {
	padding: calc(var(--ts-header-h) + 20px) var(--ts-gutter) 24px;
}

.ts-page-hero--compact .wp-block-cover__image-background {
	object-position: 50% 35%;
}

.ts-page-hero--compact .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1280px;
	text-align: left;
}

.ts-page-hero--compact .ts-breadcrumbs__list {
	justify-content: flex-start;
}

.ts-page-hero--compact .ts-breadcrumbs__item {
	font-size: 16px;
	line-height: 22px;
}

.ts-page-hero--compact .ts-breadcrumbs__item + .ts-breadcrumbs__item::before {
	margin: 0 10px;
	opacity: 0.75;
}

/* Cel dotyku ≥ 24 px (2.5.8): link 34 px wysokości */
.ts-page-hero--compact .ts-breadcrumbs__item a {
	display: inline-block;
	padding-block: 6px;
	text-underline-offset: 6px;
}

.ts-page-hero--compact .ts-breadcrumbs__item a:is(:hover, :focus-visible) {
	text-decoration: underline 2px var(--wp--preset--color--accent-on-dark);
	text-underline-offset: 6px;
}

@media (max-width: 767px) {
	.wp-block-cover.ts-page-hero.ts-page-hero--compact {
		padding-top: calc(var(--ts-header-h) + 6px);
		padding-bottom: 10px;
	}

	.ts-page-hero--compact .ts-breadcrumbs__item {
		font-size: 14px;
		line-height: 20px;
	}
}

/* ==========================================================================
   Sklep — kontener treści (SKLEP-PROJEKT.md §2.3): 1320 px z marginesem 20 px → treść 1280 px od x 80 (1440), x 20 (768, 390)
   ========================================================================== */

.ts-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: var(--ts-gutter);
}

/* ==========================================================================
   Stopka (S5) + pasek prawny (S6)
   ========================================================================== */

.wp-block-group.ts-footer {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: 50px 20px;
	padding: 100px 0 0;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* Liście (C20): klasy ts-deco-leaf-top-right i ts-deco-leaf-bottom-left z components.css */

.ts-footer > *,
.ts-footer :is(.ts-footer__main, .ts-footer__links, .ts-footer__col, .ts-footer__brand, .ts-footer__aside, .ts-footer__legal) > * {
	margin-block: 0;
}

.wp-block-group.ts-footer__main {
	display: flex;
	flex-wrap: wrap;
	box-sizing: content-box;
	width: calc(100% - 20px);
	max-width: 1300px;
	margin-inline: auto;
	padding: 0 10px;
}

.ts-footer__main > * {
	box-sizing: border-box;
	width: 33.3333%;
}

.ts-footer .ts-footer__title {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

/* Kolumna 1: Informacje + Dla kupujących (LP „INFORMACJE”, „DLA KLIENTA” po N-16) */
.wp-block-group.ts-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	padding: 10px 50px 10px 10px;
}

.wp-block-group.ts-footer__col {
	display: flex;
	flex-direction: column;
	gap: 30px 20px;
	width: calc(50% - 15px);
}

.ts-footer nav.ts-footer__menu,
.ts-footer nav.ts-footer__menu .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.ts-footer nav.ts-footer__menu .wp-block-navigation-item__content {
	display: block;
	padding: 0 0 12px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	text-decoration: none;
	transition: color 0.3s ease-in-out;
}

.ts-footer nav.ts-footer__menu .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
	padding-bottom: 0;
}

/* Hover na jednolitej zieleni: #F3BD71 (D1-B1); bieżąca pozycja bez zmiany wyglądu (jak wzorzec) */
.ts-footer nav.ts-footer__menu .wp-block-navigation-item__content:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent-on-dark);
}

.ts-footer nav.ts-footer__menu .wp-block-navigation-item__content:focus-visible {
	outline-offset: 0;
}

/* Kolumna 2: logo, dane firmy (<address>), Kontakt z pigułkami */
.wp-block-group.ts-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	padding: 10px;
}

.ts-footer .ts-footer__logo,
.ts-footer .ts-footer__logo img {
	display: block;
	width: 182px;
	max-width: 100%;
	margin: 0;
}

.ts-footer .ts-footer__address {
	color: var(--wp--preset--color--white);
	font-size: 16px;
	font-style: normal;
	line-height: 1.7;
	text-align: center;
}

.ts-footer .ts-footer__address strong {
	font-weight: 600;
}

/* Kod pocztowy i numer projektu FEPW bez łamania na łączniku („FEPW.01.01-” / „IP.010872/25”) */
.ts-footer .ts-footer__nowrap {
	white-space: nowrap;
}

/* Nagłówek „Kontakt” bliżej pigułek niż adresu (grupa) */
.ts-footer .ts-footer__brand > .ts-footer__title {
	margin-bottom: -10px;
}

.ts-footer .wp-block-buttons.ts-footer__pills {
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px; /* 30 → 20 px: dłuższy adres e-mail z LP (sklep@thesybinlabs.pl) — obie pigułki w jednym wierszu kolumny 413 px */
	margin: 0;
}

.ts-footer .ts-footer__pills .wp-block-button {
	margin: 0;
}

/* Kolumna 3: Media (ikony z adresem profilu albo nazwy serwisów tekstem — K6) + Dofinansowanie (miejsce dawnego newslettera) */
.wp-block-group.ts-footer__aside {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 10px 10px 10px 70px;
}

.ts-footer .ts-footer__aside > .ts-footer__title + * {
	margin-top: -10px;
}

.ts-footer .ts-footer__text {
	color: var(--wp--preset--color--white);
	font-size: 16px;
	line-height: 1.7;
}

.ts-footer .wp-block-social-links.ts-footer__social {
	gap: 17.6px;
	margin: 0;
}

.ts-footer .ts-footer__social .ts-social__icon {
	position: relative;
	top: 1px;
}

/* Pasek prawny */
.wp-block-group.ts-footer__legal {
	padding: 40px 20px;
	border-top: 1px solid var(--ts-divider-dark);
}

.ts-footer__legal > p {
	max-width: 1300px;
	margin-inline: auto;
	color: var(--wp--preset--color--white);
	font-size: 16px;
	line-height: 1.7;
}

.ts-footer .ts-footer__legal > * + * {
	/* zmierzone na żywym wzorcu (1440 i 768): odstęp 25,1 px (górna krawędź 2. akapitu y = 482,0 od góry stopki) */
	margin-top: 25.1px;
}

/* Informacja o suplemencie diety (LP L262 — kursywa) */
.ts-footer .ts-footer__supplement {
	font-style: italic;
}

/* Źródła oświadczeń zdrowotnych (LP L263–L264): nagłówek h2 w rozmiarze tekstu, lista źródeł tekstem (adresów brak w LP) */
.ts-footer .ts-footer__legal > .ts-footer__sources-title {
	max-width: 1300px;
	margin-inline: auto;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.ts-footer .ts-footer__legal > .ts-footer__sources-title + .ts-footer__sources {
	margin-top: 5px;
}

/* Mapa strony · Ustawienia cookies (ZW-12): linki 16 px podkreślone, kropka dekoracyjna między pozycjami */
.ts-footer .ts-footer__utility {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0;
	margin-inline: auto;
	padding: 0;
	list-style: none;
	font-size: 16px;
	line-height: 1.7;
}

.ts-footer .ts-footer__utility > li {
	display: flex;
	align-items: center;
}

.ts-footer .ts-footer__utility > li + li::before {
	content: "·";
	content: "·" / "";
	margin: 0 12px;
	color: var(--wp--preset--color--white);
}

.ts-footer .ts-footer__utility-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--white);
	font: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color 0.3s ease-in-out;
}

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

.ts-footer .ts-footer__legal > .ts-footer__utility {
	margin-top: 15px;
}

/* Przełącznik języka (Polylang) — widoczny dopiero, gdy istnieje tłumaczenie bieżącej strony */
.ts-footer .ts-footer__lang {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 20px;
	margin: 15px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.7;
}

.ts-footer .ts-footer__lang a {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

@media (max-width: 1024px) {
	.wp-block-group.ts-footer {
		gap: 30px 20px;
		padding-top: 50px;
	}

	.wp-block-group.ts-footer__main {
		row-gap: 10px;
	}

	.wp-block-group.ts-footer__links {
		width: 100%;
		padding: 10px;
	}

	.wp-block-group.ts-footer__col {
		gap: 20px;
	}

	.wp-block-group.ts-footer__brand {
		width: 50%;
		align-items: flex-start;
		gap: 20px;
	}

	.ts-footer .ts-footer__address {
		text-align: start;
	}

	.ts-footer .wp-block-buttons.ts-footer__pills {
		justify-content: flex-start;
		gap: 20px;
	}

	.wp-block-group.ts-footer__aside {
		width: 50%;
		gap: 20px;
		padding: 10px 10px 10px 20px;
	}

	.ts-footer .ts-footer__brand > .ts-footer__title,
	.ts-footer .ts-footer__aside > .ts-footer__title + * {
		margin: 0;
	}

	.wp-block-group.ts-footer__legal {
		padding: 30px 20px;
	}
}

@media (max-width: 767px) {
	.wp-block-group.ts-footer__brand,
	.wp-block-group.ts-footer__aside {
		width: 100%;
	}

	.wp-block-group.ts-footer__aside {
		padding: 10px;
	}

	.ts-footer nav.ts-footer__menu .wp-block-navigation-item__content {
		padding-bottom: 10px;
	}

	.wp-block-group.ts-footer__legal {
		padding: 15px 20px;
	}
}