/* ==========================================================================
   ZostanDJ – main.css
   System: tokeny (oklch) → baza → układ → komponenty → sekcje → WooCommerce.
   ========================================================================== */

/* ---------- Fonty (self-hosted, variable, podzbiór łaciński + polskie znaki) ---------- */
@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Montserrat";
	src: url("../fonts/montserrat-pl.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
	unicode-range: U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-pl.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
	unicode-range: U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C;
}

/* ---------- Tokeny ---------- */
:root {
	color-scheme: dark;

	/* Prymitywy: neutralne (hue 270, niska chroma) */
	--gray-975: oklch(0.145 0.006 270);
	--gray-950: oklch(0.175 0.007 270);
	--gray-900: oklch(0.205 0.008 270);
	--gray-850: oklch(0.245 0.009 270);
	--gray-800: oklch(0.30 0.010 270);
	--gray-700: oklch(0.40 0.010 270);
	--gray-500: oklch(0.66 0.010 270);
	--gray-300: oklch(0.80 0.008 270);
	--gray-50: oklch(0.97 0.003 270);

	/* Prymitywy: akcent marki (koral) */
	--coral-500: oklch(0.70 0.185 32);
	--coral-400: oklch(0.75 0.165 32);

	/* Prymitywy: kolory kursów (kategorie, nie akcje) */
	--green-400: oklch(0.80 0.19 145);
	--blue-400: oklch(0.72 0.15 250);
	--amber-400: oklch(0.83 0.15 78);
	--violet-400: oklch(0.72 0.16 300);

	/* Semantyka */
	--color-bg: var(--gray-975);
	--color-bg-alt: var(--gray-950);
	--color-surface: var(--gray-900);
	--color-surface-hover: var(--gray-850);
	--color-border: var(--gray-800);
	--color-border-strong: var(--gray-700);
	--color-text: var(--gray-50);
	--color-text-secondary: var(--gray-300);
	--color-text-tertiary: var(--gray-500);
	--color-accent-solid: var(--coral-500);
	--color-accent-solid-hover: var(--coral-400);
	--color-accent-text: var(--coral-400);
	--color-on-accent: var(--gray-975);
	--color-focus: var(--coral-400);
	--color-image-outline: oklch(1 0 0 / 0.1);

	/* Typografia */
	--font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	--font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	--text-caption: 0.8125rem;   /* 13 */
	--text-ui: 0.9375rem;        /* 15 */
	--text-body: 1rem;           /* 16 */
	--text-body-lg: 1.125rem;    /* 18 */
	--text-h3: 1.25rem;          /* 20 */
	--text-h1: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);     /* 36 → 56: tytuły podstron, kursów, momenty */
	--text-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);   /* 28 → 44: nagłówki sekcji */
	--text-card: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem); /* 20 → 26: tytuły kart i kafli */
	--text-display: clamp(2.5rem, 1.4rem + 5vw, 5rem);

	/* Odstępy (skala 4) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-section: clamp(4rem, 3rem + 3.5vw, 6rem);   /* 64 → 96 */
	--gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
	--container: 76rem;

	/* Promienie (koncentryczne: zewnętrzny = wewnętrzny + padding) */
	--radius-sm: 0.5rem;
	--radius-md: 0.75rem;
	--radius-lg: 1.25rem;
	--radius-pill: 999px;

	/* Ruch */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-ui: cubic-bezier(0.2, 0, 0, 1);

	--header-h: 4rem;
}

/* ---------- Baza ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + var(--space-4));
	-webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

img,
svg,
video,
iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--font-display);
	line-height: 1.1;
	text-wrap: balance;
}

p {
	margin: 0;
}

a {
	color: inherit;
	text-decoration-thickness: from-font;
	text-underline-position: from-font;
	text-underline-offset: 0.15em;
}

::selection {
	background: var(--color-accent-solid);
	color: var(--color-on-accent);
}

:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

.site-main:focus {
	outline: none;
}

.icon {
	flex-shrink: 0;
}

.skip-link {
	position: absolute;
	inset-inline-start: var(--space-4);
	top: -100px;
	z-index: 100;
	padding: var(--space-3) var(--space-4);
	background: var(--color-accent-solid);
	color: var(--color-on-accent);
	font-weight: 600;
	border-radius: var(--radius-sm);
	text-decoration: none;
}

.skip-link:focus {
	top: var(--space-4);
}

.nowrap {
	white-space: nowrap;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

/* ---------- Przyciski ---------- */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 2.75rem;
	padding: 0 var(--space-5);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font: 600 var(--text-ui) / 1 var(--font-body);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	transition-property: background-color, border-color, color, transform;
	transition-duration: 150ms;
	transition-timing-function: var(--ease-ui);
}

.button:active {
	transform: scale(0.96);
}

.button--sm {
	min-height: 2.5rem;
	padding: 0 var(--space-4);
}

.button--lg {
	min-height: 3.25rem;
	padding: 0 var(--space-6);
	font-size: var(--text-body);
}

.button--block {
	width: 100%;
}

.button--primary {
	background: var(--color-accent-solid);
	color: var(--color-on-accent);
}

.button--ghost {
	background: oklch(1 0 0 / 0.06);
	border-color: oklch(1 0 0 / 0.14);
	color: var(--color-text);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

@media (hover: hover) and (pointer: fine) {
	.button--primary:hover { background: var(--color-accent-solid-hover); }
	.button--ghost:hover { background: oklch(1 0 0 / 0.1); border-color: oklch(1 0 0 / 0.24); }
}

.icon-button {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-text-secondary);
	cursor: pointer;
	touch-action: manipulation;
	transition-property: background-color, color, transform;
	transition-duration: 150ms;
	transition-timing-function: var(--ease-ui);
}

.icon-button:active {
	transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
	.icon-button:hover {
		background: oklch(1 0 0 / 0.08);
		color: var(--color-text);
	}
}

.icon-button__badge {
	position: absolute;
	top: 0.3rem;
	inset-inline-end: 0.3rem;
	min-width: 1.1rem;
	height: 1.1rem;
	padding: 0 0.25rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent-solid);
	color: var(--color-on-accent);
	font: 700 0.6875rem / 1.1rem var(--font-body);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-accent-text);
	font-weight: 600;
	text-decoration: none;
}

.text-link .icon {
	transition: transform 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.text-link:hover .icon { transform: translateX(3px); }
}

/* ---------- Nagłówek ---------- */
.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	padding-top: env(safe-area-inset-top);
	transition-property: background-color;
	transition-duration: 200ms;
	transition-timing-function: var(--ease-ui);
}

/* Krawędź przewijania: miękkie wygaszenie tam, gdzie treść wchodzi pod nagłówek, zamiast linii 1px. */
.site-header::after {
	content: "";
	position: absolute;
	inset: 100% 0 auto;
	height: 1.5rem;
	background: linear-gradient(to bottom, oklch(0.145 0.006 270 / 0.55), transparent);
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms var(--ease-ui);
}

.site-header.is-scrolled::after,
body:not(.home) .site-header::after {
	opacity: 1;
}

.site-header.is-open::after {
	opacity: 0;
}

/* Poza stroną główną nagłówek jest w przepływie – nie zasłania treści z Elementora i wtyczek. */
body:not(.home) .site-header {
	position: sticky;
	top: 0;
}

.site-header.is-scrolled,
.site-header.is-open,
body:not(.home) .site-header {
	background: oklch(0.145 0.006 270 / 0.82);
	backdrop-filter: saturate(1.4) blur(16px);
	-webkit-backdrop-filter: saturate(1.4) blur(16px);
}

/* Otwarte menu: bez backdrop-filter, bo tworzy on kontener dla position: fixed i ucina panel. */
.site-header.is-open,
body:not(.home) .site-header.is-open {
	background: var(--color-bg);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	height: var(--header-h);
}

.brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	min-width: 0;
	max-width: calc(100% - 9.75rem); /* zawsze zostaje miejsce na panel kursanta, koszyk i przycisk menu */
	text-decoration: none;
}

.brand__logo {
	display: block;
	width: auto;
	height: 1.375rem;   /* 22 px: znak czytelny, nie dominuje nad menu */
	color: var(--color-text);
}

.brand__logo--img {
	height: 2rem;
}

/* Wtyczki WebP owijają logo w <picture> i przenoszą na nie klasę – rozmiar musi dotyczyć też samego <img>. */
.brand .brand__logo--img img,
.brand picture.brand__logo--img img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
}

.brand__logo--footer {
	height: 1.625rem;
}

@media (max-width: 30rem) {
	.brand__logo { height: 1.125rem; }
	.brand .brand__logo--img { height: 1.5rem; max-width: 100%; }
}

.brand__word {
	font: 800 1.25rem / 1 var(--font-display);
	letter-spacing: -0.02em;
}

.brand__word span {
	color: var(--color-accent-text);
}

.site-nav {
	margin-inline-start: auto;
}

.site-nav .menu {
	display: flex;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav .menu a {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 var(--space-3);
	border-radius: var(--radius-pill);
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color 150ms var(--ease-ui);
}

.site-nav .menu a:hover,
.site-nav .current-menu-item > a {
	color: var(--color-text);
}

/* Podmenu (desktop) */
.site-nav .menu li {
	position: relative;
}

.site-nav .sub-menu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 14rem;
	margin: 0;
	padding: var(--space-2);
	list-style: none;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: 0 16px 40px oklch(0 0 0 / 0.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px) scale(0.98);
	transform-origin: top left;
	transition-property: opacity, transform, visibility;
	transition-duration: 150ms;
	transition-timing-function: var(--ease-out);
}

.site-nav .menu li:hover > .sub-menu,
.site-nav .menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.site-nav .sub-menu a {
	border-radius: var(--radius-sm);
}

.site-nav__mobile-extra {
	display: none;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.site-header__cta {
	margin-inline-start: var(--space-2);
}

/* Na stronach sklepu style WooCommerce dla a.button nadpisywały przycisk w nagłówku (jasne tło) */
.site-header .site-header__actions a.button--ghost.site-header__cta {
	min-height: 2.5rem;
	padding: 0 var(--space-4);
	border: 1px solid oklch(1 0 0 / 0.14);
	border-radius: var(--radius-pill);
	background: oklch(1 0 0 / 0.06);
	color: var(--color-text);
	font: 600 var(--text-ui) / 1 var(--font-body);
}

/* Układ tylko tam, gdzie przycisk jest widoczny: poniżej 68rem ma zostać ukryty. */
@media (min-width: 68.0625rem) {
	.site-header .site-header__actions a.button--ghost.site-header__cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

@media (hover: hover) and (pointer: fine) {
	.site-header .site-header__actions a.button--ghost.site-header__cta:hover {
		background: oklch(1 0 0 / 0.1);
		border-color: oklch(1 0 0 / 0.24);
	}
}

.site-header__toggle {
	display: none;
}

.toggle-icon--close,
.is-open .toggle-icon--open {
	display: none;
}

.is-open .toggle-icon--close {
	display: grid;
}

@media (max-width: 68rem) {
	.site-header .site-header__actions a.site-header__cta, /* mocniej niż .woocommerce a.button */
	.site-nav .menu li:nth-child(n + 6) {
		display: none;
	}
}

@media (max-width: 56rem) {
	.site-header__toggle {
		display: inline-grid;
	}

	.site-header__actions {
		margin-inline-start: auto;
		margin-inline-end: calc(var(--space-2) * -1); /* optycznie do krawędzi – ikona ma własny padding */
	}

	.site-nav {
		position: fixed;
		inset: calc(var(--header-h) + env(safe-area-inset-top)) 0 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-6);
		margin: 0;
		padding: var(--space-5) max(var(--gutter), env(safe-area-inset-right)) calc(var(--space-6) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
		background: var(--color-bg);
		overflow-y: auto;
		overscroll-behavior: contain;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition-property: opacity, transform, visibility;
		transition-duration: 200ms;
		transition-timing-function: var(--ease-out);
	}

	.is-open .site-nav {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav .menu {
		flex-direction: column;
		gap: 0;
	}

	.site-nav .menu li:nth-child(n) {
		display: block;
	}

	.site-nav .menu a {
		min-height: 3.25rem;
		padding: 0;
		border-bottom: 1px solid var(--color-border);
		border-radius: 0;
		font: 700 var(--text-h3) / 1.2 var(--font-display);
		color: var(--color-text);
	}

	.site-nav .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 0 var(--space-4);
		background: none;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav .sub-menu a {
		font: 500 var(--text-body) / 1.2 var(--font-body);
		color: var(--color-text-secondary);
	}

	.site-nav__mobile-extra {
		display: grid;
		gap: var(--space-3);
	}

	body.nav-open {
		overflow: hidden;
	}
}

/* ---------- Pasek administratora WordPressa (widoczny tylko po zalogowaniu) ---------- */
.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.admin-bar .hero {
	padding-top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 32px) + env(safe-area-inset-top) + var(--space-7));
}

.admin-bar .video-toggle {
	top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 32px) + var(--space-4));
}

@media (max-width: 56rem) {
	.admin-bar .site-nav {
		inset-block-start: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 46px) + env(safe-area-inset-top));
	}
}

/* Na małych ekranach pasek WP przewija się razem ze stroną – nagłówek wraca na samą górę. */
@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

/* ---------- Sekcje (wspólne) ---------- */
.section {
	padding-block: var(--space-section);
}

.section--alt {
	background: var(--color-bg-alt);
}

.section__header {
	display: grid;
	gap: var(--space-3);
	max-width: 40rem;
	margin-bottom: var(--space-7);
}

.eyebrow {
	color: var(--color-accent-text);
	font-size: var(--text-caption);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.section__title {
	font-size: var(--text-h2);
	font-weight: 800;
	letter-spacing: -0.025em;
}

.section__lead {
	color: var(--color-text-secondary);
	font-size: var(--text-body-lg);
	text-wrap: pretty;
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--space-7);
	min-height: 100svh;
	padding-top: calc(var(--header-h) + env(safe-area-inset-top) + var(--space-7));
	padding-bottom: var(--space-6);
	isolation: isolate;
}

@supports not (height: 100svh) {
	.hero { min-height: 100vh; }
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

.hero__media::after {
	/* Przyciemnienie dobrane pomiarem: nawet na białym fragmencie zdjęcia
	   tekst zachowuje kontrast WCAG AA (min. 4,5:1 dla tekstu, 3:1 dla nagłówka). */
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top in oklab,
			var(--color-bg) 0%,
			oklch(0.145 0.006 270 / 0.92) 35%,
			oklch(0.145 0.006 270 / 0.82) 80%,
			oklch(0.145 0.006 270 / 0.6) 100%),
		linear-gradient(to right in oklab, oklch(0.145 0.006 270 / 0.7), transparent 70%);
}

@media (max-width: 44rem) {
	/* Na telefonie tekst zajmuje prawie całe zdjęcie – mocniejsze przyciemnienie. */
	.hero__media::after {
		background:
			linear-gradient(to top in oklab,
				var(--color-bg) 0%,
				oklch(0.145 0.006 270 / 0.93) 40%,
				oklch(0.145 0.006 270 / 0.86) 90%,
				oklch(0.145 0.006 270 / 0.7) 100%),
			linear-gradient(to right in oklab, oklch(0.145 0.006 270 / 0.7), transparent 70%);
	}
}

.hero__content {
	display: grid;
	gap: var(--space-5);
	justify-items: start;
}

.hero__title {
	max-width: 14ch;
	font-size: var(--text-display);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.02;
}

.hero__lead {
	max-width: 36rem;
	color: var(--color-text-secondary);
	font-size: var(--text-body-lg);
	text-wrap: pretty;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-2);
}

.facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--space-3); /* jak .quick__list: kolumny równo z kafelkami pod spodem */
	margin: 0;
	padding-top: var(--space-5);
	border-top: 1px solid oklch(1 0 0 / 0.12);
}

.facts__item {
	display: grid;
	gap: var(--space-1);
}

.facts dt {
	font: 800 var(--text-h3) / 1.2 var(--font-display);
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

/* Ikona w dt, ale tekst dt i dd wyrównany do jednej krawędzi */
.facts__item,
.pfacts__item--icon {
	position: relative;
	padding-inline-start: 2rem;
}

.facts dt .icon,
.pfacts dt .icon {
	position: absolute;
	inset-inline-start: 0;
	margin-block-start: 0.1em;
	color: var(--color-accent-text);
}

/* Cztery kafelki pod spodem: ikona na osi ikony kafelka, tekst na linii tekstu kafelka */
@media (min-width: 64.01rem) {
	.facts__item {
		padding-inline-start: calc(var(--space-4) + 2.5rem + var(--space-3));
	}

	.facts dt .icon {
		inset-inline-start: calc(var(--space-4) + 1.25rem - 11px);
	}
}

.facts dd {
	margin: 0;
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
	line-height: 1.4;
}

@media (max-width: 44rem) {
	.facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--space-5);
	}

	.hero__actions .button {
		flex: 1 1 100%;
	}
}

/* ---------- Kursy ---------- */
.courses {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Tablet: dwie kolumny, ostatnia karta na całą szerokość – bez dziury w siatce. */
@media (min-width: 40rem) {
	.courses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.courses > .course:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Desktop: dwa kursy stacjonarne dla początkujących szeroko u góry, trzy pozostałe pod nimi. */
@media (min-width: 64rem) {
	.courses { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.courses > .course { grid-column: span 2; }
	.courses > .course:nth-child(-n + 2) { grid-column: span 3; }
	.courses > .course:last-child:nth-child(odd) { grid-column: span 2; }
}

.course {
	--tone: var(--color-text-tertiary);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-5);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: inset 0 0 0 1px var(--color-border);
	transition-property: background-color, box-shadow, transform;
	transition-duration: 200ms;
	transition-timing-function: var(--ease-ui);
}

.course[data-tone="green"]  { --tone: var(--green-400); }
.course[data-tone="blue"]   { --tone: var(--blue-400); }
.course[data-tone="amber"]  { --tone: var(--amber-400); }
.course[data-tone="violet"] { --tone: var(--violet-400); }

.course::before {
	content: "";
	position: absolute;
	inset: 0 var(--space-5) auto;
	height: 2px;
	border-radius: 0 0 2px 2px;
	background: var(--tone);
	opacity: 0.9;
}

@media (hover: hover) and (pointer: fine) {
	.course:hover {
		background: var(--color-surface-hover);
		box-shadow: inset 0 0 0 1px var(--color-border-strong);
	}

	.course:hover .course__more .icon {
		transform: translateX(3px);
	}
}

.course:active {
	transform: scale(0.99);
}

.course__kicker {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text-secondary);
	font-size: var(--text-caption);
	font-weight: 600;
}

.course__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--tone);
}

.course__name {
	font-size: var(--text-h3);
	font-weight: 800;
	letter-spacing: -0.01em;
}

.course__link {
	text-decoration: none;
}

/* Cała karta klikalna, bez zagnieżdżania linków */
.course__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.course__link:focus-visible {
	outline: none;
}

.course:has(.course__link:focus-visible) {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

.course__summary {
	color: var(--color-text-secondary);
	text-wrap: pretty;
}

.course__meta {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
}

.course__meta li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.course__meta .icon {
	color: var(--color-text-tertiary);
}

.course__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: auto;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}

.course__pricing {
	display: grid;
	gap: 0.125rem;
}

.course__deposit {
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
	font-variant-numeric: tabular-nums;
}

.course__price {
	font: 700 var(--text-body-lg) / 1.2 var(--font-display);
	font-variant-numeric: tabular-nums;
}

.course__price del {
	color: var(--color-text-tertiary);
	font-size: var(--text-ui);
	font-weight: 500;
}

.course__price ins {
	text-decoration: none;
}

.course__more {
	display: inline-flex;
	white-space: nowrap;
	align-items: center;
	gap: var(--space-2);
	margin-inline-start: auto;
	color: var(--color-accent-text);
	font-size: var(--text-ui);
	font-weight: 600;
}

.course__more .icon {
	transition: transform 200ms var(--ease-out);
}

/* ---------- Nagłówki sekcji: warianty ---------- */
.section__header--center {
	margin-inline: auto;
	text-align: center;
	justify-items: center;
}

.section__header--row {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--space-4) var(--space-6);
	max-width: none;
}

.section__header--row > div {
	display: grid;
	gap: var(--space-3);
	max-width: 40rem;
}

/* ---------- Pętla wideo w nagłówku ---------- */
.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	opacity: 0;
	transition: opacity 600ms var(--ease-out);
}

.hero__video.is-ready {
	opacity: 1;
}

/* ---------- Crossfader ---------- */
.xfader-section {
	overflow: hidden;
}

.xfader {
	--pos: 0;              /* 0–1, ustawiane z JS */
	--thumb-w: 3.25rem;
	position: relative;
	max-width: 52rem;
	margin: 0 auto var(--space-7);
	padding: var(--space-5) var(--space-5) var(--space-4);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: inset 0 0 0 1px var(--color-border), 0 24px 60px oklch(0 0 0 / 0.35);
}

.xfader__wave {
	display: flex;
	align-items: center;
	gap: 3px;
	height: 5.5rem;
	margin-bottom: var(--space-4);
	padding-inline: calc(var(--thumb-w) / 2);
}

.xfader__wave span {
	flex: 1;
	height: calc(var(--h) * 100%);
	border-radius: 2px;
	background: var(--color-border-strong);
	transform-origin: center;
	transition-property: background-color, transform;
	transition-duration: 180ms;
	transition-timing-function: var(--ease-ui);
}

.xfader__wave span.is-on {
	background: var(--color-accent-solid);
}

/* Suwak – natywny input range (klawiatura, czytniki ekranu, dotyk działają same) */
.xfader__input {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 3rem;
	margin: 0;
	background: transparent;
	cursor: grab;
	touch-action: pan-y;
}

.xfader__input:active {
	cursor: grabbing;
}

.xfader__input::-webkit-slider-runnable-track {
	height: 0.375rem;
	border-radius: var(--radius-pill);
	background:
		linear-gradient(to right, var(--color-accent-solid) calc(var(--pos) * 100%), var(--color-bg) 0);
	box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.6);
}

.xfader__input::-moz-range-track {
	height: 0.375rem;
	border-radius: var(--radius-pill);
	background: var(--color-bg);
	box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.6);
}

.xfader__input::-moz-range-progress {
	height: 0.375rem;
	border-radius: var(--radius-pill);
	background: var(--color-accent-solid);
}

/* Gałka jak na mikserze: prostokątna, z linią środkową */
.xfader__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: var(--thumb-w);
	height: 2.25rem;
	margin-top: -0.95rem;
	border: 0;
	border-radius: 0.4rem;
	background:
		linear-gradient(to right, transparent calc(50% - 1px), var(--color-bg) calc(50% - 1px), var(--color-bg) calc(50% + 1px), transparent calc(50% + 1px)),
		linear-gradient(to bottom, var(--gray-50), var(--gray-300));
	box-shadow: 0 6px 16px oklch(0 0 0 / 0.5), inset 0 1px 0 oklch(1 0 0 / 0.8);
	transition: transform 160ms var(--ease-out);
}

.xfader__input:active::-webkit-slider-thumb {
	transform: scale(0.96);
}

.xfader__input::-moz-range-thumb {
	width: var(--thumb-w);
	height: 2.25rem;
	border: 0;
	border-radius: 0.4rem;
	background:
		linear-gradient(to right, transparent calc(50% - 1px), var(--color-bg) calc(50% - 1px), var(--color-bg) calc(50% + 1px), transparent calc(50% + 1px)),
		linear-gradient(to bottom, var(--gray-50), var(--gray-300));
	box-shadow: 0 6px 16px oklch(0 0 0 / 0.5);
}

.xfader__input:focus-visible {
	outline: none;
}

.xfader__input:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

.xfader__input:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

.xfader__labels {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: var(--space-2) 0 0;
	padding: 0;
	list-style: none;
}

.xfader__label {
	width: 100%;
	min-height: 2.75rem;
	padding: var(--space-2) var(--space-1);
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--color-text-tertiary);
	font: 500 var(--text-caption) / 1.3 var(--font-body);
	text-align: center;
	cursor: pointer;
	transition: color 150ms var(--ease-ui);
}

.xfader__labels li:first-child .xfader__label { text-align: start; }
.xfader__labels li:last-child .xfader__label { text-align: end; }

.xfader__label.is-active {
	color: var(--color-text);
	font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
	.xfader__label:hover { color: var(--color-text-secondary); }
}

.xfader__title {
	margin-bottom: var(--space-5);
	font-size: var(--text-h3);
	font-weight: 700;
	text-align: center;
}

.xfader__panel:not([hidden]) {
	animation: zdj-panel-in 200ms var(--ease-out);
}

@keyframes zdj-panel-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
}

@media (max-width: 40rem) {
	.xfader { padding: var(--space-4) var(--space-3) var(--space-3); --thumb-w: 2.75rem; }
	.xfader__wave { height: 4rem; gap: 2px; }
	.xfader__wave span:nth-child(even) { display: none; }
	.xfader__label { font-size: 0.6875rem; padding-inline: 0; }
}

/* Karty oferty (crossfader) */
.offer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.offer {
	position: relative;
	display: grid;
	gap: var(--space-2);
	align-content: start;
	padding: var(--space-5);
	padding-inline-end: var(--space-7);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: inset 0 0 0 1px var(--color-border);
	transition-property: background-color, box-shadow, transform;
	transition-duration: 200ms;
	transition-timing-function: var(--ease-ui);
}

.offer:active { transform: scale(0.99); }

@media (hover: hover) and (pointer: fine) {
	.offer:hover {
		background: var(--color-surface-hover);
		box-shadow: inset 0 0 0 1px var(--color-border-strong);
	}
	.offer:hover .offer__more { transform: translateX(3px); color: var(--color-accent-text); }
}

.offer__icon {
	margin-bottom: var(--space-2);
	color: var(--color-accent-text);
}

.offer__name {
	margin: 0;
	font: 700 var(--text-body-lg) / 1.25 var(--font-display);
}

.offer__link { text-decoration: none; }

.offer__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.offer__link:focus-visible { outline: none; }

.offer:has(.offer__link:focus-visible) {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

.offer__desc {
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	text-wrap: pretty;
}

.offer__more {
	position: absolute;
	top: var(--space-5);
	inset-inline-end: var(--space-5);
	color: var(--color-text-tertiary);
	transition-property: transform, color;
	transition-duration: 200ms;
	transition-timing-function: var(--ease-out);
}

/* ---------- 5 etapów ---------- */
.split--stages {
	align-items: start;
}

@media (min-width: 56.0625rem) {
	.stages-intro {
		position: sticky;
		top: calc(var(--header-h) + var(--space-6));
	}
}

.stages {
	position: relative;
	display: grid;
	margin: 0;
	padding: 0 0 0 var(--space-7);
	list-style: none;
}

/* Tor linii */
.stages::before,
.stages::after {
	content: "";
	position: absolute;
	top: 0.75rem;
	bottom: 0.75rem;
	inset-inline-start: 0.6875rem;
	width: 2px;
	border-radius: 2px;
	background: var(--color-border);
}

/* Wypełnienie linii – rysuje się podczas przewijania (CSS scroll-driven animations) */
.stages::after {
	background: linear-gradient(to bottom, var(--color-accent-solid), var(--violet-400));
	transform-origin: top;
	transform: scaleY(1);
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.stages::after {
			animation: zdj-line linear both;
			animation-timeline: view();
			animation-range: entry 30% cover 60%;
		}

		.stage {
			animation: zdj-stage linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 60%;
		}
	}
}

@keyframes zdj-line {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

@keyframes zdj-stage {
	from {
		opacity: 0.25;
		transform: translateY(12px);
	}
}

.stage {
	position: relative;
	display: grid;
	gap: var(--space-2);
	padding-block: var(--space-5);
}

.stage + .stage {
	border-top: 1px solid var(--color-border);
}

.stage::before {
	content: "";
	position: absolute;
	top: calc(var(--space-5) + 0.35rem);
	inset-inline-start: calc(var(--space-7) * -1 + 0.25rem);
	z-index: 1;
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 50%;
	background: var(--color-bg-alt);
	box-shadow: 0 0 0 2px var(--color-accent-solid);
}

.stage__num {
	color: var(--color-text-tertiary);
	font: 700 var(--text-caption) / 1 var(--font-body);
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}

.stage__title {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.stage__lead {
	max-width: 32rem;
	color: var(--color-text-secondary);
	text-wrap: pretty;
}

.stage__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-2) 0 0;
	padding: 0;
	list-style: none;
}

.stage__links a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 2.5rem;
	padding: 0 var(--space-4);
	border-radius: var(--radius-pill);
	background: oklch(1 0 0 / 0.05);
	box-shadow: inset 0 0 0 1px var(--color-border);
	color: var(--color-text);
	font-size: var(--text-ui);
	font-weight: 500;
	text-decoration: none;
	transition-property: background-color, box-shadow, transform;
	transition-duration: 150ms;
	transition-timing-function: var(--ease-ui);
}

.stage__links a:active { transform: scale(0.96); }

.stage__links .icon {
	color: var(--color-text-tertiary);
	transition: transform 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.stage__links a:hover {
		background: oklch(1 0 0 / 0.09);
		box-shadow: inset 0 0 0 1px var(--color-border-strong);
	}
	.stage__links a:hover .icon { transform: translateX(2px); color: var(--color-accent-text); }
}

@media (max-width: 40rem) {
	.stages { padding-inline-start: var(--space-6); }
	.stage::before { inset-inline-start: calc(var(--space-6) * -1 + 0.25rem); }
}

/* ---------- Sklep ---------- */
.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--space-4);
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
}

.product {
	position: relative;
	display: grid;
	gap: var(--space-2);
	align-content: start;
}

.product__media {
	position: relative;
	aspect-ratio: 1;
	margin-bottom: var(--space-2);
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.product__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--ease-out);
}

.product__media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	outline: 1px solid var(--color-image-outline);
	outline-offset: -1px;
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.product:hover .product__media img { transform: scale(1.03); }
}

.product__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--color-text-tertiary);
}

.product__media .badge {
	position: absolute;
	top: var(--space-3);
	inset-inline-start: var(--space-3);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background: oklch(0.145 0.006 270 / 0.8);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--green-400);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

.product__name {
	font: 700 var(--text-body) / 1.3 var(--font-display);
}

.product__link { text-decoration: none; }

.product__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.product__price {
	color: var(--color-text-secondary);
	font-variant-numeric: tabular-nums;
}

.empty-state {
	display: grid;
	justify-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
	padding: var(--space-7) var(--space-5);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-lg);
	text-align: center;
}

.empty-state__icon { color: var(--color-text-tertiary); }

.empty-state__title {
	font: 700 var(--text-body-lg) / 1.3 var(--font-display);
	text-wrap: balance;
}

.empty-state__desc {
	max-width: 28rem;
	color: var(--color-text-secondary);
	text-wrap: pretty;
}

.tiles--two {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.tile--row {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--space-4);
}

.tile--row .tile__icon {
	margin: 0;
}

/* ---------- Wynajem ---------- */
.rentals {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rental {
	--tone: var(--color-text-tertiary);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-5);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.rental[data-tone="green"] { --tone: var(--green-400); }
.rental[data-tone="amber"] { --tone: var(--amber-400); }
.rental[data-tone="blue"]  { --tone: var(--blue-400); }

.rental::before {
	content: "";
	position: absolute;
	inset: 0 var(--space-5) auto;
	height: 2px;
	border-radius: 0 0 2px 2px;
	background: var(--tone);
}

.rental__title {
	font-size: var(--text-h3);
	font-weight: 800;
	letter-spacing: -0.01em;
}

.rental__desc {
	color: var(--color-text-secondary);
	text-wrap: pretty;
}

.rental__items {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-4) 0 0;
	border-top: 1px solid var(--color-border);
	list-style: none;
	font-size: var(--text-ui);
}

.rental__items li {
	display: flex;
	gap: var(--space-3);
	align-items: baseline;
}

.rental__items li::before {
	content: "";
	flex-shrink: 0;
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: var(--tone);
	transform: translateY(-0.1em);
}

.rental__bonus {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: oklch(0.80 0.19 145 / 0.08);
	box-shadow: inset 0 0 0 1px oklch(0.80 0.19 145 / 0.22);
	font-size: var(--text-ui);
	line-height: 1.45;
	text-wrap: pretty;
}

.rental__bonus .icon {
	margin-top: 0.1em;
	color: var(--tone);
}

.rental__body {
	display: grid;
	gap: var(--space-4);
	align-content: start;
}

.rental__cta {
	margin-top: auto;
	align-self: flex-start;
}

.order-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

@media (max-width: 56rem) {
	.order-band__actions .button { flex: 1 1 100%; }
}

/* ---------- Studio ---------- */
.studio {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-7);
	align-items: center;
}

.studio__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.studio__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 42% center; /* ludzie przy stanowisku są zwykle lekko na lewo od środka */
}

.studio__media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	outline: 1px solid var(--color-image-outline);
	outline-offset: -1px;
	pointer-events: none;
}

.studio__body {
	display: grid;
	gap: var(--space-4);
	align-content: start;
}

.studio__list {
	display: grid;
	gap: var(--space-5);
	margin: var(--space-3) 0 0;
	padding: 0;
	list-style: none;
}

.studio__list li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-4);
}

.studio__icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
	color: var(--color-accent-text);
}

.studio__list h3 {
	font-size: var(--text-body-lg);
	font-weight: 700;
}

.studio__list h3 a { text-decoration: none; }
.studio__list h3 a:hover { text-decoration: underline; }

.studio__list p {
	margin-top: var(--space-1);
	color: var(--color-text-secondary);
	text-wrap: pretty;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-2) 0 0;
	padding: 0;
	list-style: none;
}

.chips li {
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	box-shadow: inset 0 0 0 1px var(--color-border);
	color: var(--color-text-secondary);
	font-size: var(--text-caption);
	font-weight: 500;
	white-space: nowrap;
}

.studio__actions { margin-top: var(--space-3); }

@media (max-width: 56rem) {
	.studio { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
	.studio__media { aspect-ratio: 3 / 2; }
}

/* ---------- Przycisk pauzy wideo ---------- */
.video-toggle {
	position: absolute;
	top: calc(var(--header-h) + env(safe-area-inset-top) + var(--space-4));
	inset-inline-end: max(var(--gutter), env(safe-area-inset-right));
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 50%;
	background: oklch(0.145 0.006 270 / 0.55);
	box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.16);
	color: var(--color-text);
	cursor: pointer;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition-property: background-color, transform;
	transition-duration: 150ms;
	transition-timing-function: var(--ease-ui);
}

.video-toggle:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
	.video-toggle:hover { background: oklch(0.145 0.006 270 / 0.8); }
}

.video-toggle__play,
.video-toggle.is-paused .video-toggle__pause { display: none; }

.video-toggle.is-paused .video-toggle__play { display: grid; }
.video-toggle__pause { display: grid; }

/* ---------- Kadra i kursanci ---------- */
.people-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-7);
	align-items: start;
}

.people-grid--solo {
	grid-template-columns: minmax(0, 1fr);
	max-width: 44rem;
}

.people-col {
	display: grid;
	gap: var(--space-5);
	justify-items: start;
}

.people-col .people {
	width: 100%;
}

.people-col__title {
	color: var(--color-text-tertiary);
	font: 600 var(--text-caption) / 1.2 var(--font-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.quotes.quotes--stack {
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
	margin: 0;
}

@media (max-width: 56rem) {
	.people-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
}

/* ---------- Pas dla organizatorów ---------- */
.order-band {
	background:
		linear-gradient(135deg in oklab, oklch(0.30 0.09 300 / 0.55), oklch(0.26 0.08 32 / 0.55)),
		var(--color-bg-alt);
	border-block: 1px solid oklch(1 0 0 / 0.08);
}

.order-band__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-6);
	align-items: center;
}

.order-band .section__title { max-width: 22ch; }
.order-band .section__lead { margin-top: var(--space-3); max-width: 34rem; }

@media (max-width: 56rem) {
	.order-band__inner { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Galeria i wideo ---------- */
.media-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
}

/* Z filmem: film 2×2 + cztery zdjęcia tworzą pełny prostokąt */
.media-grid--video {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	aspect-ratio: 32 / 9;
}

.media-grid--video .video {
	aspect-ratio: auto;
}

.media-grid--video .photo img {
	position: absolute;
	inset: 0;
}

.video,
.photo {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-surface);
}

.video img,
.photo img,
.video iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.video::after,
.photo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	outline: 1px solid var(--color-image-outline);
	outline-offset: -1px;
	pointer-events: none;
}

.video {
	grid-column: span 2;
	grid-row: span 2;
	aspect-ratio: 16 / 9;
}

.photo {
	aspect-ratio: 3 / 2;
}

.media-grid--video .photo {
	aspect-ratio: auto;
	min-height: 0;
}

.video__play {
	position: absolute;
	inset: 0;
	margin: auto;
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	padding-inline-start: 4px; /* optyczne wyśrodkowanie trójkąta */
	border: 0;
	border-radius: 50%;
	background: var(--color-accent-solid);
	color: var(--color-on-accent);
	cursor: pointer;
	box-shadow: 0 12px 32px oklch(0 0 0 / 0.45);
	transition: transform 160ms var(--ease-out);
}

.video__play .icon {
	fill: currentColor;
}

.video__play:active {
	transform: scale(0.96);
}

@media (hover: hover) and (pointer: fine) {
	.video:hover .video__play { transform: scale(1.06); }
}

.video.is-playing .video__play,
.video.is-playing img {
	display: none;
}

@media (max-width: 56rem) {
	.media-grid,
	.media-grid--video {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		aspect-ratio: auto;
	}
	.video,
	.media-grid--video .video { grid-row: auto; aspect-ratio: 16 / 9; }
	.media-grid--video .photo { aspect-ratio: 3 / 2; }
}

/* ---------- Kadra ---------- */
.split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--space-7);
	align-items: start;
}

.split__aside {
	margin-bottom: 0;
}

.split__aside .text-link {
	margin-top: var(--space-2);
}

.people {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.person {
	display: grid;
	gap: var(--space-1);
	padding-block: var(--space-5);
	border-bottom: 1px solid var(--color-border);
}

.person:first-child {
	padding-top: 0;
}

.person__name {
	font: 700 var(--text-h3) / 1.2 var(--font-display);
}

.person__role {
	color: var(--color-text-secondary);
}

@media (max-width: 56rem) {
	.split { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

/* ---------- Opinie ---------- */
.quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--space-4);
	margin: 0 0 var(--space-6);
	padding: 0;
	list-style: none;
}

.quote {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	height: 100%;
	margin: 0;
	padding: var(--space-5);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.quote blockquote {
	margin: 0;
	font-size: var(--text-body-lg);
	line-height: 1.5;
	text-wrap: pretty;
}

.quote blockquote p::before { content: "„"; }
.quote blockquote p::after { content: "”"; }

.quote figcaption {
	margin-top: auto;
	color: var(--color-text-tertiary);
	font-size: var(--text-ui);
	font-weight: 600;
}

/* ---------- Kafelki ---------- */
.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tile {
	position: relative;
	display: grid;
	gap: var(--space-2);
	align-content: start;
	padding: var(--space-5);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: inset 0 0 0 1px var(--color-border);
	transition-property: background-color, box-shadow, transform;
	transition-duration: 200ms;
	transition-timing-function: var(--ease-ui);
}

.tile:active {
	transform: scale(0.99);
}

@media (hover: hover) and (pointer: fine) {
	.tile:hover {
		background: var(--color-surface-hover);
		box-shadow: inset 0 0 0 1px var(--color-border-strong);
	}
}

.tile__icon {
	margin-bottom: var(--space-3);
	color: var(--color-accent-text);
}

.tile__title {
	font-size: var(--text-body-lg);
	font-weight: 700;
}

.tile__link {
	text-decoration: none;
}

.tile__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.tile__link:focus-visible {
	outline: none;
}

.tile:has(.tile__link:focus-visible) {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

.tile p {
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	text-wrap: pretty;
}

/* ---------- CTA ---------- */
.cta {
	background:
		radial-gradient(60rem 30rem at 85% 0%, oklch(0.70 0.185 32 / 0.16), transparent 70%),
		var(--color-bg);
}

.cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-6) var(--space-7);
	align-items: end;
}

.cta__inner .section__lead {
	margin-top: var(--space-3);
	max-width: 32rem;
}

.cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.cta__address {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
}

.cta__address .icon {
	color: var(--color-text-tertiary);
}

.cta__address span {
	color: var(--color-text-tertiary);
}

@media (max-width: 56rem) {
	.cta__inner { grid-template-columns: minmax(0, 1fr); }
	.cta__actions .button { flex: 1 1 100%; }
}

/* ---------- Stopka ---------- */
.site-footer {
	padding-top: var(--space-8);
	padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
	background: var(--color-bg-alt);
	border-top: 1px solid var(--color-border);
	font-size: var(--text-ui);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
	gap: var(--space-7);
	padding-bottom: var(--space-7);
}

.site-footer__brand {
	display: grid;
	gap: var(--space-4);
	align-content: start;
}

.site-footer__lead {
	max-width: 22rem;
	color: var(--color-text-secondary);
	text-wrap: pretty;
}

.site-footer__title {
	margin-bottom: var(--space-4);
	color: var(--color-text-tertiary);
	font: 600 var(--text-caption) / 1.2 var(--font-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.site-footer .menu,
.footer-menu,
.contact-list,
.socials,
.legal {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .menu,
.footer-menu {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-1) var(--space-4);
}

.site-footer .menu a,
.footer-menu a {
	display: inline-flex;
	min-height: 2.25rem;
	align-items: center;
	color: var(--color-text-secondary);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--color-text);
}

.contact-list {
	display: grid;
	gap: var(--space-3);
}

.contact-list li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--color-text-secondary);
}

.contact-list .icon {
	color: var(--color-text-tertiary);
}

.contact-list a {
	text-decoration: none;
}

.socials {
	display: flex;
	gap: var(--space-1);
	margin-inline-start: calc(var(--space-3) * -1);
}

.site-footer__bottom {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-4);
	padding-top: var(--space-5);
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
}

/* Linia tylko na szerokość treści, wyrównana do krawędzi kolumn */
.site-footer__bottom::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
	height: 1px;
	background: var(--color-border);
}

.legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
}

.legal a {
	text-decoration: none;
}

@media (max-width: 56rem) {
	.site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 30rem) {
	.site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Wejście zdjęcia w nagłówku ----------
   Tekst i przyciski są widoczne od pierwszej klatki. Zdjęcie tylko lekko „osiada”
   (skala, bez przezroczystości), więc niczego nie opóźnia. */
@media (prefers-reduced-motion: no-preference) {
	.hero__media img {
		animation: zdj-hero 1400ms var(--ease-out) both;
	}
}

@keyframes zdj-hero {
	from {
		transform: scale(1.04);
	}
}

/* ---------- Preferencje systemowe ---------- */

/* Mniej przezroczystości: pełne tła zamiast rozmycia. */
@media (prefers-reduced-transparency: reduce) {
	.site-header.is-scrolled,
	body:not(.home) .site-header {
		background: var(--color-bg);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.button--ghost {
		background: var(--color-surface);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/* Większy kontrast: wyraźne obramowania, jaśniejszy tekst pomocniczy, pełne tło nagłówka. */
@media (prefers-contrast: more) {
	:root {
		--color-border: var(--gray-500);
		--color-border-strong: var(--gray-300);
		--color-text-secondary: var(--gray-50);
		--color-text-tertiary: var(--gray-300);
	}

	.site-header.is-scrolled,
	body:not(.home) .site-header {
		background: var(--color-bg);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: 0 1px 0 var(--color-border);
	}

	.site-header::after {
		display: none;
	}

	.button--ghost {
		border-color: var(--color-border-strong);
	}
}

/* ==========================================================================
   Podstrony, wpisy, WooCommerce
   ========================================================================== */
.page-shell {
	padding-top: var(--space-7);
	padding-bottom: var(--space-section);
}

/* Strony zbudowane w Elementorze / wtyczkami landingów – pełna szerokość, bez paddingu motywu */
.page-shell--full {
	padding-top: 0;
	padding-bottom: 0;
}

.page-title {
	margin-bottom: var(--space-6);
	font-size: var(--text-h2);
	font-weight: 800;
	letter-spacing: -0.025em;
}

.entry-content {
	max-width: 46rem;
}

.entry-content > * + * {
	margin-top: var(--space-4);
}

.entry-content h2 { margin-top: var(--space-7); font-size: 1.75rem; }
.entry-content h3 { margin-top: var(--space-6); font-size: var(--text-h3); }
.entry-content a { color: var(--color-accent-text); }
.entry-content ul,
.entry-content ol { padding-inline-start: 1.25rem; }

.entry-content--wide {
	max-width: none;
}

/* Formularze (WooCommerce, logowanie, kontakt) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
	width: 100%;
	min-height: 2.75rem;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text);
	font: 400 16px / 1.4 var(--font-body); /* 16px: iOS nie przybliża strony */
}

select {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-end: var(--space-7);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a4a6ad' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center / 12px,
		var(--color-surface);
	cursor: pointer;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 0;
	border-color: transparent;
}

/* Przyciski WooCommerce – bez naszych przycisków (.button--*) w nagłówku i stopce */
.woocommerce .button:not([class*="button--"]),
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0 var(--space-5);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-accent-solid);
	color: var(--color-on-accent);
	font: 600 var(--text-ui) / 1 var(--font-body);
	text-decoration: none;
	cursor: pointer;
}

.woocommerce .button:not([class*="button--"]):hover {
	background: var(--color-accent-solid-hover);
	color: var(--color-on-accent);
}

.woocommerce .price,
.woocommerce .amount {
	font-variant-numeric: tabular-nums;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: var(--space-4) var(--space-5);
	margin-bottom: var(--space-5);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
	list-style: none;
}

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--space-3);
	border-bottom: 1px solid var(--color-border);
	text-align: start;
}

/* Paginacja i nawigacja wpisów */
.posts {
	display: grid;
	gap: var(--space-6);
}

.post-card__title {
	font-size: var(--text-h3);
}

.post-card__title a {
	text-decoration: none;
}

.post-card__excerpt {
	margin-top: var(--space-2);
	color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
	.xfader__panel:not([hidden]) { animation: none; }
}

/* Karty wynajmu: wspólne wiersze (subgrid), żeby opisy, listy i przyciski leżały na jednej linii we wszystkich kartach */
@supports (grid-template-rows: subgrid) {
	.rental {
		display: grid;
		grid-row: span 5;
		grid-template-rows: subgrid;
		row-gap: var(--space-4);
	}

	.rental__body {
		align-self: start;
	}

	.rental__cta {
		align-self: end;
		justify-self: start;
	}
}


/* ==========================================================================
   Sklep
   ========================================================================== */

/* Plakietki (ogólne) */
.badge {
	display: inline-flex;
	align-items: center;
	min-height: 1.5rem;
	padding: 0 var(--space-3);
	border-radius: var(--radius-pill);
	background: oklch(0.145 0.006 270 / 0.82);
	color: var(--color-text);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.badge--green { color: var(--green-400); }
.badge--accent { background: var(--color-accent-solid); color: var(--color-on-accent); }
.badge--muted { color: var(--color-text-tertiary); }

/* Nagłówek sklepu */
.page-shell--shop,
.page-shell--product {
	padding-top: var(--space-7);
}

.shop-head {
	display: grid;
	gap: var(--space-3);
	max-width: 44rem;
	margin-bottom: var(--space-6);
}

.shop-head__title {
	font-size: var(--text-h2);
	font-weight: 800;
	letter-spacing: -0.025em;
}

.shop-head__lead {
	color: var(--color-text-secondary);
	font-size: var(--text-body-lg);
	text-wrap: pretty;
}

.shop-head__lead p { margin: 0; }

/* Kategorie: przewijane w poziomie tylko jako lista chipsów, z zanikiem przy krawędzi */
.shop-cats {
	margin-bottom: var(--space-5);
}

.shop-cats ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 2.5rem;
	padding: 0 var(--space-4);
	border-radius: var(--radius-pill);
	box-shadow: inset 0 0 0 1px var(--color-border);
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition-property: background-color, box-shadow, color, transform;
	transition-duration: 150ms;
	transition-timing-function: var(--ease-ui);
}

.chip:active { transform: scale(0.96); }

.chip__count {
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
	font-variant-numeric: tabular-nums;
}

.chip.is-current {
	background: var(--color-text);
	box-shadow: none;
	color: var(--color-bg);
}

.chip.is-current .chip__count { color: var(--gray-700); }

/* Telefon: mniejsze chipsy, żeby kategorie zajmowały 2–3 linie zamiast pięciu */
@media (max-width: 44rem) {
	.shop-cats ul { gap: var(--space-1) var(--space-2); }
	.chip {
		min-height: 2.25rem;
		padding: 0 var(--space-3);
		font-size: var(--text-caption);
	}
}

@media (hover: hover) and (pointer: fine) {
	.chip:not(.is-current):hover {
		background: oklch(1 0 0 / 0.06);
		box-shadow: inset 0 0 0 1px var(--color-border-strong);
		color: var(--color-text);
	}
}

/* Pasek: liczba wyników + sortowanie */
.shop-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}

.woocommerce .shop-bar .woocommerce-result-count,
.shop-bar .woocommerce-result-count {
	float: none;
	margin: 0;
	color: var(--color-text-tertiary);
	font-size: var(--text-ui);
}

.woocommerce .shop-bar .woocommerce-ordering,
.shop-bar .woocommerce-ordering {
	float: none;
	margin: 0;
}

.shop-bar .woocommerce-ordering select {
	width: auto;
	min-height: 2.5rem;
	padding-inline: var(--space-4) var(--space-7);
	border-radius: var(--radius-pill);
	appearance: none;
	-webkit-appearance: none;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a4a6ad' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center / 12px,
		var(--color-surface);
	font-size: var(--text-ui);
	cursor: pointer;
}

/* Siatka i karty produktów */
.pgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-6) var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 64rem) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 44rem) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-3); } }

.pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.pcard__media {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.pcard__media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	outline: 1px solid var(--color-image-outline);
	outline-offset: -1px;
	pointer-events: none;
}

.pcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--ease-out);
}

.pcard__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--color-text-tertiary);
}

.pcard__badges {
	position: absolute;
	top: var(--space-3);
	inset-inline-start: var(--space-3);
	inset-inline-end: var(--space-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pcard--soldout .pcard__img { opacity: 0.45; }

.pcard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-1);
}

.pcard__cat {
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
	font-weight: 500;
}

.pcard__name {
	font: 700 var(--text-body) / 1.3 var(--font-display);
	text-wrap: pretty;
}

.pcard__link { text-decoration: none; }

/* Cała karta klikalna */
.pcard__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-lg);
}

.pcard__link:focus-visible { outline: none; }

.pcard:has(.pcard__link:focus-visible) {
	outline: 2px solid var(--color-focus);
	outline-offset: 4px;
	border-radius: var(--radius-lg);
}

.pcard__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: var(--space-2);
}

/* Przycisk koszyka ponad linkiem karty */
.pcard__add {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
	color: var(--color-text);
}

.pcard__add.loading { opacity: 0.5; pointer-events: none; }
.pcard__add.added { color: var(--green-400); }
.pcard .added_to_cart { display: none; }

@media (hover: hover) and (pointer: fine) {
	.pcard:hover .pcard__img { transform: scale(1.03); }
	.pcard__add:hover { background: var(--color-accent-solid); box-shadow: none; color: var(--color-on-accent); }
}

/* Cena */
.price-block {
	display: grid;
	gap: 0.125rem;
}

.price-block__price {
	font: 700 var(--text-body) / 1.2 var(--font-display);
	font-variant-numeric: tabular-nums;
}

.price-block__price del {
	margin-inline-end: var(--space-1);
	color: var(--color-text-tertiary);
	font-size: 0.85em;
	font-weight: 500;
}

.price-block__price ins { text-decoration: none; }

.price-block__from {
	color: var(--color-text-tertiary);
	font: 500 var(--text-caption) / 1 var(--font-body);
}

.price-block__deposit {
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
}

.price-block--lg .price-block__price { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.price-block--lg .price-block__deposit { font-size: var(--text-ui); }

/* Paginacja */
.woocommerce nav.woocommerce-pagination {
	margin-top: var(--space-7);
	text-align: start;
}

.woocommerce nav.woocommerce-pagination ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	text-decoration: none;
	display: grid;
	place-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 var(--space-3);
	border-radius: var(--radius-pill);
	box-shadow: inset 0 0 0 1px var(--color-border);
	color: var(--color-text-secondary);
	font-variant-numeric: tabular-nums;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--color-text);
	box-shadow: none;
	color: var(--color-bg);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: oklch(1 0 0 / 0.06);
	color: var(--color-text);
}

/* Okruszki */
.crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-5);
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
}

.crumbs a { color: var(--color-text-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--color-text); }

/* ---------- Strona produktu ---------- */
.pview__top {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--space-7);
	align-items: start;
}

@media (max-width: 56rem) {
	.pview__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}

/* Nadpisanie floatów z domyślnego CSS WooCommerce */
body.woocommerce div.product.pview div.images,
body.woocommerce div.product.pview div.summary {
	float: none;
	width: 100%;
	margin: 0;
}

.pview .woocommerce-product-gallery {
	position: relative;
}

.pview .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.pview .woocommerce-product-gallery__image {
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.pview .woocommerce-product-gallery img {
	border-radius: var(--radius-lg);
}

.pview .flex-control-thumbs {
	list-style: none;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--space-2);
	margin: var(--space-3) 0 0 !important;
}

.pview .flex-control-thumbs li {
	width: auto !important;
	float: none !important;
}

.pview .flex-control-thumbs img {
	border-radius: var(--radius-sm);
	opacity: 0.6;
	transition: opacity 150ms var(--ease-ui);
}

.pview .flex-control-thumbs img.flex-active,
.pview .flex-control-thumbs img:hover { opacity: 1; }

.pview .woocommerce-product-gallery__trigger {
	z-index: 2;
	top: var(--space-3) !important;
	right: var(--space-3) !important;
	background: oklch(0.145 0.006 270 / 0.7) !important;
	backdrop-filter: blur(8px);
}

.pview__summary {
	display: grid;
	gap: var(--space-4);
	align-content: start;
}

@media (min-width: 56.0625rem) {
	.pview__summary {
		position: sticky;
		top: calc(var(--header-h) + var(--space-5));
	}
}

.pview__title.product_title {
	text-align: start !important; /* style wtyczek centrują .entry-title */
}

.pview__title {
	margin: 0;
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
}

.pview__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pview__badges .badge {
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.pview__badges .badge--accent {
	background: var(--color-accent-solid);
	box-shadow: none;
}

.pview__state {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	background: oklch(0.80 0.19 145 / 0.08);
	box-shadow: inset 0 0 0 1px oklch(0.80 0.19 145 / 0.22);
	font-size: var(--text-ui);
}

.pview__state-title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 600;
}

.pview__state-title .icon { color: var(--green-400); }

/* Krótki opis i formularz koszyka z hooka Woo */
.pview__actions {
	display: grid;
	gap: var(--space-4);
}

.pview__actions .woocommerce-product-details__short-description {
	color: var(--color-text-secondary);
	text-wrap: pretty;
}

.pview__actions .woocommerce-product-details__short-description > * + * { margin-top: var(--space-3); }

body.woocommerce div.product.pview form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0;
}

body.woocommerce div.product.pview form.cart::before,
body.woocommerce div.product.pview form.cart::after { display: none; }

body.woocommerce div.product.pview form.cart .quantity {
	float: none;
	margin: 0;
}

body.woocommerce div.product.pview form.cart .quantity .qty {
	width: 4.5rem;
	min-height: 3.25rem;
	border-radius: var(--radius-pill);
	text-align: center;
}

body.woocommerce div.product.pview form.cart .button {
	flex: 1 1 12rem;
	min-height: 3.25rem;
	float: none;
	font-size: var(--text-body);
}

/* Warianty (np. termin kursu, zadatek / pełna płatność) */
body.woocommerce div.product.pview form.cart.variations_form {
	display: grid;
}

body.woocommerce div.product.pview form.cart .variations {
	width: 100%;
	margin: 0;
	border: 0;
}

body.woocommerce div.product.pview form.cart .variations th,
body.woocommerce div.product.pview form.cart .variations td {
	display: block;
	padding: 0;
	border: 0;
	text-align: start;
	line-height: 1.4;
}

body.woocommerce div.product.pview form.cart .variations label {
	display: block;
	margin-bottom: var(--space-2);
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	font-weight: 600;
}

body.woocommerce div.product.pview form.cart .variations select {
	min-width: 0;
	width: 100%;
	margin-bottom: var(--space-3);
}

body.woocommerce div.product.pview form.cart .reset_variations {
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
}

body.woocommerce div.product.pview .single_variation_wrap .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

body.woocommerce div.product.pview .woocommerce-variation-price .price {
	color: var(--color-text);
	font: 700 var(--text-h3) / 1.2 var(--font-display);
}

body.woocommerce div.product.pview p.stock {
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
}

body.woocommerce div.product.pview p.stock.out-of-stock { color: var(--color-accent-text); }

.pview__trust {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-4) 0 0;
	border-top: 1px solid var(--color-border);
	list-style: none;
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
}

.pview__trust li {
	display: flex;
	gap: var(--space-3);
	align-items: center;
}

.pview__trust .icon { color: var(--color-text-tertiary); }
.pview__trust a { color: var(--color-text); }

.pview__section {
	margin-top: var(--space-section);
}

.pview__h2 {
	margin-bottom: var(--space-5);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.pview__desc {
	max-width: 46rem;
	color: var(--color-text-secondary);
}

.pview__desc h2,
.pview__desc h3,
.pview__desc strong { color: var(--color-text); }

.pview__desc img { border-radius: var(--radius-md); }

.pview__spec table.shop_attributes {
	width: 100%;
	max-width: 46rem;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.pview__spec table.shop_attributes th,
.pview__spec table.shop_attributes td {
	padding: var(--space-3) 0;
	border: 0;
	border-bottom: 1px solid var(--color-border);
	background: none;
	font-style: normal;
	text-align: start;
	vertical-align: top;
}

.pview__spec table.shop_attributes th {
	width: 40%;
	padding-inline-end: var(--space-4);
	color: var(--color-text-tertiary);
	font-weight: 500;
}

.pview__spec table.shop_attributes td p { margin: 0; }


/* Półki kategorii (widok „Wszystko”) */
.shop-bar--shelves {
	margin-bottom: var(--space-7);
}

.shelf + .shelf {
	margin-top: var(--space-8);
}

.shelf__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2) var(--space-5);
	margin-bottom: var(--space-5);
}

.shelf__title {
	font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* Na półce w widoku kategorii nie pokazujemy etykiety kategorii – jest w nagłówku półki */
.shelf .pcard__cat { display: none; }

/* Fakty kursu pod tytułem */
.facts-bar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-border);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.facts-bar__item {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-3) var(--space-4);
	background: var(--color-surface);
}

.facts-bar dt {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
	font-weight: 500;
}

.facts-bar dd {
	margin: 0;
	font-weight: 600;
	text-wrap: pretty;
}

.facts-bar__item:only-child,
.facts-bar__item:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* ==========================================================================
   Podstrony z szablonów motywu (Wynajem, Studio, Zamów DJ-a…)
   ========================================================================== */

/* Kotwice lądują pod nagłówkiem i paskiem „Na tej stronie”. */
html:has(.localnav) {
	scroll-padding-top: calc(var(--header-h) + 3.25rem + var(--space-4));
}

/* ---------- Hero podstrony ---------- */
.phero {
	position: relative;
	padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
	background:
		radial-gradient(46rem 24rem at 88% 0%, oklch(0.70 0.185 32 / 0.12), transparent 70%);
	overflow: clip;
}

.phero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(var(--space-6), 4vw, var(--space-8));
	align-items: center;
}

.phero--compact .phero__grid {
	grid-template-columns: minmax(0, 1fr);
}

.phero__body {
	display: grid;
	gap: var(--space-4);
	justify-items: start;
}

.phero__title {
	font-size: clamp(2.25rem, 1.25rem + 3.8vw, 4.25rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.035em;
	max-width: 14ch;
}

.phero--compact .phero__title {
	max-width: none;
}

.phero__lead {
	max-width: 34rem;
	color: var(--color-text-secondary);
	font-size: var(--text-body-lg);
	line-height: 1.55;
	text-wrap: pretty;
}

.phero__actions,
.psplit__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

.phero__media {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface);
	box-shadow: 0 30px 80px -30px oklch(0 0 0 / 0.7);
}

.phero__media img,
.psplit__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Cienki obrys zdjęcia – krawędź nie ginie na ciemnym tle. */
.phero__media::after,
.psplit__media::after,
.member__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--color-image-outline);
	pointer-events: none;
}

.pfacts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--space-5);
	margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0;
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.pfacts__item {
	display: grid;
	gap: var(--space-1);
}

.pfacts dt {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.pfacts dd {
	margin: 0;
	color: var(--color-text-tertiary);
	font-size: var(--text-ui);
}

@media (max-width: 60rem) {
	.phero__grid { grid-template-columns: minmax(0, 1fr); }
	.phero__title { max-width: 18ch; }
	.phero__media { aspect-ratio: 16 / 10; }
}

@media (max-width: 30rem) {
	.phero__actions .button { flex: 1 1 100%; }
}

/* Wejście: tekst i zdjęcie „dojeżdżają” raz, przy pierwszym wyświetleniu. */
@media (prefers-reduced-motion: no-preference) {
	.phero__body > * {
		animation: zdj-rise-solid 700ms var(--ease-out) both;
	}
	.phero__body > :nth-child(2) { animation-delay: 60ms; }
	.phero__body > :nth-child(3) { animation-delay: 120ms; }
	.phero__body > :nth-child(4) { animation-delay: 180ms; }
	.phero__media {
		animation: zdj-settle 900ms var(--ease-out) 80ms both;
	}
}

@keyframes zdj-rise {
	from { opacity: 0; transform: translateY(12px); }
}

/* Nagłówki podstron: bez przezroczystości, żeby tekst i zdjęcie były widoczne od pierwszej klatki (LCP). */
@keyframes zdj-settle {
	from { transform: scale(1.03); }
}

@keyframes zdj-rise-solid {
	from { transform: translateY(12px); }
}

/* ---------- Pasek „Na tej stronie” ---------- */
.localnav {
	position: sticky;
	top: var(--header-h);
	z-index: 40;
	background: oklch(0.145 0.006 270 / 0.78);
	backdrop-filter: saturate(1.4) blur(16px);
	-webkit-backdrop-filter: saturate(1.4) blur(16px);
	border-bottom: 1px solid oklch(1 0 0 / 0.06);
}

.admin-bar .localnav {
	top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 32px));
}

@media (max-width: 600px) {
	.admin-bar .localnav { top: var(--header-h); }
}

.localnav ul {
	display: flex;
	gap: var(--space-1);
	margin: 0;
	padding: var(--space-2) 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.localnav ul::-webkit-scrollbar {
	display: none;
}

.localnav a {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0 var(--space-4);
	border-radius: var(--radius-pill);
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition-property: background-color, color;
	transition-duration: 150ms;
	transition-timing-function: var(--ease-ui);
}

.localnav a[aria-current="true"] {
	background: oklch(1 0 0 / 0.1);
	color: var(--color-text);
}

@media (hover: hover) and (pointer: fine) {
	.localnav a:hover { color: var(--color-text); }
}

/* ---------- Sekcje: warianty ---------- */
.section--tight {
	padding-block: var(--space-7);
}

.section--narrow .container {
	max-width: 52rem;
}

.tiles--three {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

/* ---------- Karty cech ---------- */
.fcards {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fcards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.fcards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.fcards--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }

@media (min-width: 72rem) {
	.fcards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.fcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.fcard {
	position: relative;
	display: grid;
	align-content: start;
	gap: var(--space-2);
	padding: var(--space-6) var(--space-5) var(--space-5);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: inset 0 0 0 1px var(--color-border);
	transition-property: background-color, box-shadow, transform;
	transition-duration: 200ms;
	transition-timing-function: var(--ease-ui);
}

.fcard__icon {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var(--space-3);
	border-radius: var(--radius-md);
	background: oklch(0.70 0.185 32 / 0.12);
	color: var(--color-accent-text);
}

.fcard__title {
	font-size: var(--text-h3);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.fcard__link {
	text-decoration: none;
}

.fcard__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.fcard__link:focus-visible {
	outline: none;
}

.fcard:has(.fcard__link:focus-visible) {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

.fcard__text {
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	text-wrap: pretty;
}

.fcard__more {
	position: absolute;
	top: var(--space-6);
	right: var(--space-5);
	color: var(--color-text-tertiary);
	transition: transform 200ms var(--ease-out), color 200ms var(--ease-ui);
}

.fcard--link:active {
	transform: scale(0.99);
}

@media (hover: hover) and (pointer: fine) {
	.fcard--link:hover {
		background: var(--color-surface-hover);
		box-shadow: inset 0 0 0 1px var(--color-border-strong);
	}
	.fcard--link:hover .fcard__more {
		color: var(--color-accent-text);
		transform: translateX(3px);
	}
}

/* ---------- Kroki ---------- */
.psteps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

@media (min-width: 72rem) {
	.psteps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pstep {
	display: grid;
	align-content: start;
	gap: var(--space-2);
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.pstep__num {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--color-accent-solid);
	color: var(--color-on-accent);
	font: 700 var(--text-ui) / 1 var(--font-display);
	font-variant-numeric: tabular-nums;
}

.pstep__title {
	font-size: var(--text-body-lg);
	font-weight: 700;
}

.pstep__text {
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	text-wrap: pretty;
}

/* ---------- Zdjęcie + tekst ---------- */
.psplit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(var(--space-6), 5vw, var(--space-8));
	align-items: center;
}

.psplit--reverse .psplit__media {
	order: 2;
}

.psplit__media {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface);
}

.psplit__body {
	display: grid;
	gap: var(--space-4);
	justify-items: start;
}

@media (max-width: 60rem) {
	.psplit { grid-template-columns: minmax(0, 1fr); }
	.psplit--reverse .psplit__media { order: 0; }
	.psplit__media { aspect-ratio: 16 / 10; }
}

.checklist {
	display: grid;
	gap: var(--space-3);
	margin: var(--space-2) 0 0;
	padding: 0;
	list-style: none;
}

.checklist li {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
}

.checklist .icon {
	margin-top: 0.1rem;
	color: var(--color-accent-text);
}

/* ---------- Lista sprzętu ---------- */
.gear {
	display: grid;
	align-items: start;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--space-4);
}

.gear__group {
	padding: var(--space-5);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.gear__title {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
	font-size: var(--text-body-lg);
	font-weight: 700;
}

.gear__icon {
	color: var(--color-accent-text);
}

.gear__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gear__list li {
	padding: var(--space-2) 0;
	border-top: 1px solid var(--color-border);
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
}

.gear__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	margin-top: var(--space-6);
	color: var(--color-text-secondary);
}

/* ---------- Dobór kursu ---------- */
.guide {
	margin: 0;
	padding: 0;
	list-style: none;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
	overflow: hidden;
}

.guide__row {
	--tone: var(--color-text-tertiary);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) auto;
	gap: var(--space-5);
	align-items: center;
	padding: var(--space-5) var(--space-6);
	transition: background-color 150ms var(--ease-ui);
}

.guide__row + .guide__row {
	border-top: 1px solid var(--color-border);
}

.guide__row[data-tone="green"]  { --tone: var(--green-400); }
.guide__row[data-tone="blue"]   { --tone: var(--blue-400); }
.guide__row[data-tone="amber"]  { --tone: var(--amber-400); }
.guide__row[data-tone="violet"] { --tone: var(--violet-400); }

.guide__q {
	color: var(--color-text-secondary);
	font-weight: 500;
}

.guide__a {
	display: grid;
	gap: var(--space-1);
}

.guide__a p {
	color: var(--color-text-tertiary);
	font-size: var(--text-ui);
}

.guide__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-weight: 700;
	text-decoration: none;
}

.guide__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.guide__link:focus-visible {
	outline: none;
}

.guide__row:has(.guide__link:focus-visible) {
	outline: 2px solid var(--color-focus);
	outline-offset: -2px;
}

.guide__more {
	color: var(--color-text-tertiary);
	transition: transform 200ms var(--ease-out), color 200ms var(--ease-ui);
}

@media (hover: hover) and (pointer: fine) {
	.guide__row:hover { background: var(--color-surface-hover); }
	.guide__row:hover .guide__more { color: var(--color-accent-text); transform: translateX(3px); }
}

@media (max-width: 44rem) {
	.guide__row {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--space-2) var(--space-4);
		padding: var(--space-5);
	}
	.guide__q { grid-column: 1 / -1; font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-tertiary); }
}

/* ---------- FAQ ---------- */
.faq {
	display: grid;
}

.faq__item {
	border-bottom: 1px solid var(--color-border);
	interpolate-size: allow-keywords;
}

.faq__item:first-child {
	border-top: 1px solid var(--color-border);
}

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: 3.5rem;
	padding: var(--space-4) 0;
	font-family: var(--font-display);
	font-size: var(--text-body-lg);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.faq__q::-webkit-details-marker {
	display: none;
}

.faq__q .icon {
	color: var(--color-text-tertiary);
	transition: transform 250ms var(--ease-out);
}

.faq__item[open] .faq__q .icon {
	transform: rotate(180deg);
}

.faq__a {
	padding-bottom: var(--space-5);
	color: var(--color-text-secondary);
	max-width: 42rem;
	text-wrap: pretty;
}

/* Płynne rozwijanie tam, gdzie przeglądarka to umie (reszta otwiera od razu). */
@media (prefers-reduced-motion: no-preference) {
	.faq__item::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size 300ms var(--ease-out), content-visibility 300ms allow-discrete;
	}
	.faq__item[open]::details-content {
		block-size: auto;
	}
}

/* ---------- Formularz ---------- */
.pform {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(var(--space-6), 5vw, var(--space-8));
	align-items: start;
}

.pform__aside {
	display: grid;
	gap: var(--space-4);
	position: sticky;
	top: calc(var(--header-h) + var(--space-6));
}

html:has(.localnav) .pform__aside {
	top: calc(var(--header-h) + 3.25rem + var(--space-6));
}

.pform__contact {
	display: grid;
	gap: var(--space-4);
	margin: var(--space-4) 0 0;
	padding: var(--space-5) 0 0;
	border-top: 1px solid var(--color-border);
	list-style: none;
}

.pform__contact li {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
}

.pform__contact .icon {
	margin-top: 0.15rem;
	color: var(--color-accent-text);
}

.pform__contact div {
	display: grid;
}

.pform__contact span {
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
}

.pform__contact a {
	font-weight: 600;
	text-decoration: none;
}

.pform__panel {
	padding: clamp(var(--space-5), 3vw, var(--space-7));
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: inset 0 0 0 1px var(--color-border), 0 30px 60px -40px oklch(0 0 0 / 0.8);
}

.section--alt .pform__panel {
	background: var(--gray-900);
}

@media (max-width: 60rem) {
	.pform { grid-template-columns: minmax(0, 1fr); }
	.pform__aside { position: static; }
}

.zform__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5) var(--space-4);
}

.zfield {
	grid-column: 1 / -1;
	display: grid;
	align-content: start;
	gap: var(--space-2);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.zfield--half {
	grid-column: span 1;
}

@media (max-width: 36rem) {
	.zfield--half { grid-column: 1 / -1; }
}

.zfield__label {
	padding: 0;
	font-size: var(--text-ui);
	font-weight: 600;
}

.zfield__opt {
	color: var(--color-text-tertiary);
	font-weight: 400;
}

.zfield__hint {
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
}

input[type="date"] {
	width: 100%;
	min-height: 2.75rem;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text);
	font: 400 16px / 1.4 var(--font-body);
	color-scheme: dark;
}

.zform input:not([type="radio"], [type="checkbox"]),
.zform select,
.zform textarea {
	min-height: 3rem;
	border-radius: var(--radius-md);
	background-color: var(--gray-950);
	transition: border-color 150ms var(--ease-ui);
}

.zform textarea {
	min-height: 7.5rem;
	resize: vertical;
}

.zform ::placeholder {
	color: var(--color-text-tertiary);
	opacity: 1;
}

/* Błąd pokazujemy dopiero po interakcji (:user-invalid), nie na starcie. */
.zform :user-invalid {
	border-color: oklch(0.70 0.19 25);
}

.zfield--pills.is-invalid .pill span {
	box-shadow: inset 0 0 0 1px oklch(0.70 0.19 25);
}

.pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.pill {
	position: relative;
	cursor: pointer;
}

.pill input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.pill span {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 var(--space-4);
	border-radius: var(--radius-pill);
	background: var(--gray-950);
	box-shadow: inset 0 0 0 1px var(--color-border-strong);
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	font-weight: 500;
	user-select: none;
	-webkit-user-select: none;
	transition-property: background-color, box-shadow, color, transform;
	transition-duration: 150ms;
	transition-timing-function: var(--ease-ui);
}

.pill:active span {
	transform: scale(0.97);
}

.pill input:checked + span {
	background: oklch(0.70 0.185 32 / 0.16);
	box-shadow: inset 0 0 0 1px var(--color-accent-solid);
	color: var(--color-text);
}

.pill input:focus-visible + span {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
	.pill:hover input:not(:checked) + span { color: var(--color-text); box-shadow: inset 0 0 0 1px var(--gray-500); }
}

.zform__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.zform__foot {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.zform__submit {
	width: 100%;
}

.zform__submit[disabled] {
	opacity: 0.7;
	cursor: progress;
}

.zform__note {
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
	text-wrap: pretty;
}

.zform__note a,
.zform__error a,
.form-done__desc a {
	color: var(--color-accent-text);
}

.zform__error {
	margin-bottom: var(--space-5);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	background: oklch(0.70 0.19 25 / 0.12);
	box-shadow: inset 0 0 0 1px oklch(0.70 0.19 25 / 0.5);
}

.form-done {
	display: grid;
	justify-items: start;
	gap: var(--space-3);
	padding: var(--space-4) 0;
}

.form-done:focus {
	outline: none;
}

.form-done__icon {
	display: inline-grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--radius-pill);
	background: oklch(0.80 0.19 145 / 0.14);
	color: var(--green-400);
}

.form-done__title {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 700;
}

.form-done__desc {
	color: var(--color-text-secondary);
}

@media (prefers-reduced-motion: no-preference) {
	.form-done__icon { animation: zdj-pop 500ms var(--ease-out) both; }
}

@keyframes zdj-pop {
	from { opacity: 0; transform: scale(0.6); }
}

/* ---------- Kadra ---------- */
.team {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--space-6) var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.member {
	display: grid;
	align-content: start;
	gap: var(--space-2);
}

.member__photo {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	margin-bottom: var(--space-3);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background:
		radial-gradient(18rem 14rem at 70% 0%, oklch(0.70 0.185 32 / 0.22), transparent 70%),
		var(--color-surface);
}

.member__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.member__mono {
	font-family: var(--font-display);
	font-size: clamp(3.5rem, 2rem + 4vw, 5rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	color: oklch(1 0 0 / 0.16);
}

.member__name {
	font-size: var(--text-h3);
	font-weight: 700;
}

.member__role {
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	text-wrap: pretty;
}

/* ---------- Kontakt ---------- */
.ccards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--space-4);
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
}

.ccard {
	position: relative;
	display: grid;
	gap: var(--space-1);
	padding: var(--space-5);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.ccard__icon {
	margin-bottom: var(--space-3);
	color: var(--color-accent-text);
}

.ccard__label {
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ccard__value {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 700;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.ccard__value::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.ccard__meta {
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
}

@media (hover: hover) and (pointer: fine) {
	.ccard:hover { background: var(--color-surface-hover); }
}

.map {
	position: relative;
	aspect-ratio: 21 / 9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background:
		radial-gradient(30rem 16rem at 50% 50%, oklch(0.70 0.185 32 / 0.10), transparent 70%),
		repeating-linear-gradient(0deg, oklch(1 0 0 / 0.03) 0 1px, transparent 1px 40px),
		repeating-linear-gradient(90deg, oklch(1 0 0 / 0.03) 0 1px, transparent 1px 40px),
		var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: invert(0.9) hue-rotate(180deg) saturate(0.6);
}

.map__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--space-2);
	padding: var(--space-5);
	text-align: center;
}

.map__placeholder .icon {
	color: var(--color-accent-text);
}

.map__title {
	font-family: var(--font-display);
	font-weight: 700;
}

.map__desc {
	margin-bottom: var(--space-3);
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
}

@media (max-width: 44rem) {
	.map { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-transparency: reduce) {
	.localnav { background: var(--color-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Telefon: karty i kroki w układzie wierszowym – ikona obok tekstu, o połowę krótsza strona. */
@media (max-width: 44rem) {
	.fcard {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: var(--space-4);
		row-gap: var(--space-1);
		padding: var(--space-5);
		padding-inline-end: var(--space-7);
	}
	.fcard__icon {
		grid-row: span 2;
		margin-bottom: 0;
	}
	.fcard__title { font-size: var(--text-body-lg); }
	.fcard__more { top: var(--space-5); right: var(--space-4); }

	.pstep {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: var(--space-4);
		row-gap: var(--space-1);
		padding: var(--space-4) var(--space-5);
	}
	.pstep__num {
		grid-row: span 2;
		margin-bottom: 0;
	}
}

/* ==========================================================================
   Koszyk, kasa, konto (klasyczne szablony WooCommerce)
   Nadpisujemy jasne kolory domyślnego CSS Woo, układ zostaje Woo (zgodność z P24 i FunnelKit).
   ========================================================================== */

/* Komunikaty: ikona Woo zostaje, tło i kolory z motywu */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: var(--space-4) var(--space-5) var(--space-4) 3.25em;
	border-top: 0;
	color: var(--color-text);
}

.woocommerce-message::before { color: var(--green-400); }
.woocommerce-info::before { color: var(--blue-400); }
.woocommerce-error::before { color: oklch(0.70 0.19 25); }

.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
	color: var(--color-accent-text);
}

.woocommerce-message .button,
.woocommerce-info .button {
	float: right;
	margin-inline-start: var(--space-4);
}

/* Pola formularzy Woo */
.woocommerce form .form-row {
	margin: 0 0 var(--space-4);
	padding: 0;
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: var(--space-2);
	color: var(--color-text);
	font-size: var(--text-ui);
	font-weight: 600;
	line-height: 1.4;
}

.woocommerce form .form-row .required {
	color: var(--color-accent-text);
	text-decoration: none;
}

.woocommerce form .form-row .optional {
	color: var(--color-text-tertiary);
	font-weight: 400;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	min-height: 3rem;
	border-radius: var(--radius-md);
	background-color: var(--gray-950);
	line-height: 1.4;
}

.woocommerce form .form-row.woocommerce-invalid input.input-text {
	border-color: oklch(0.70 0.19 25);
}

.woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: var(--color-border-strong);
}

.woocommerce form .form-row input[type="checkbox"] {
	accent-color: var(--color-accent-solid);
	width: 1.125rem;
	height: 1.125rem;
	vertical-align: -0.2em;
	margin-inline-end: var(--space-2);
}

/* Select2 (wybór kraju / województwa) */
.select2-container--default .select2-selection--single {
	height: 3rem;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--gray-950);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-inline: var(--space-3);
	color: var(--color-text);
	line-height: 3rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 3rem;
	right: var(--space-2);
}

.select2-dropdown {
	border: 1px solid var(--color-border-strong);
	background: var(--gray-900);
	color: var(--color-text);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	border-color: var(--color-border-strong);
	background: var(--gray-950);
	color: var(--color-text);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--color-accent-solid);
	color: var(--color-on-accent);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--gray-800);
}

/* Ilość */
.woocommerce .quantity .qty {
	width: 4.5rem;
	min-height: 2.75rem;
	padding-inline: var(--space-2);
	border-radius: var(--radius-md);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Przycisk drugorzędny (Aktualizuj koszyk, Zastosuj kupon) */
.woocommerce .button[name="update_cart"],
.woocommerce .button[name="apply_coupon"] {
	background: oklch(1 0 0 / 0.06);
	box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.14);
	color: var(--color-text);
}

.woocommerce .button[name="update_cart"]:hover,
.woocommerce .button[name="apply_coupon"]:hover {
	background: oklch(1 0 0 / 0.1);
	color: var(--color-text);
}

.woocommerce .button:disabled,
.woocommerce .button.disabled,
.woocommerce .button:disabled[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ---------- Koszyk ---------- */
@media (min-width: 60rem) {
	.woocommerce-cart .entry-content > .woocommerce:has(.woocommerce-cart-form) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
		gap: var(--space-6);
		align-items: start;
	}
	.woocommerce-cart .woocommerce:has(.woocommerce-cart-form) > .woocommerce-notices-wrapper {
		grid-column: 1 / -1;
	}
	.woocommerce-cart .cart-collaterals {
		position: sticky;
		top: calc(var(--header-h) + var(--space-5));
	}
}

.woocommerce-cart .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
}

.woocommerce-cart .cart-collaterals .cross-sells {
	float: none;
	width: 100%;
}

.woocommerce table.shop_table {
	margin: 0 0 var(--space-5);
	border: 0;
	border-radius: 0;
}

.woocommerce table.shop_table thead th {
	padding-top: 0;
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce table.shop_table td {
	padding-block: var(--space-4);
	vertical-align: middle;
}

.woocommerce-cart table.cart img {
	width: 4.5rem;
	height: 4.5rem;
	object-fit: cover;
	border-radius: var(--radius-md);
	box-shadow: 0 0 0 1px var(--color-image-outline);
}

.woocommerce-cart table.cart .product-name a {
	color: var(--color-text);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-cart table.cart .product-name .variation {
	margin-top: var(--space-1);
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
}

.woocommerce-cart table.cart .product-name .variation dt,
.woocommerce-cart table.cart .product-name .variation dd,
.woocommerce-cart table.cart .product-name .variation p {
	display: inline;
	margin: 0;
}

.woocommerce-cart table.cart .product-subtotal {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.woocommerce a.remove {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-pill);
	font-size: 1.25rem;
	line-height: 1;
	text-decoration: none;
	color: var(--color-text-tertiary) !important;
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.woocommerce a.remove:hover {
	background: oklch(0.70 0.19 25 / 0.16);
	color: var(--color-text) !important;
}

.woocommerce table.cart td.actions {
	padding-top: var(--space-5);
	border-bottom: 0;
}

@media (min-width: 48.01rem) {
	.woocommerce table.cart td.actions > .coupon { float: left; }
	.woocommerce table.cart td.actions > .button { float: right; }
}

.woocommerce table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
}

.woocommerce table.cart td.actions .coupon .input-text {
	width: 12rem;
	min-height: 2.75rem;
	margin: 0;
	border-radius: var(--radius-pill);
	padding-inline: var(--space-4);
}

.woocommerce table.cart td.actions .coupon label {
	display: none;
}

.cart_totals,
#order_review,
.woocommerce-checkout-review-order {
	border-radius: var(--radius-lg);
}

.cart_totals {
	padding: var(--space-5);
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.cart_totals h2,
#order_review_heading {
	margin-top: 0;
	margin-bottom: var(--space-4);
	font-size: var(--text-h3);
	font-weight: 700;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	padding-inline: 0;
	font-size: var(--text-ui);
}

.cart_totals table.shop_table td {
	text-align: end;
}

.woocommerce table.shop_table .order-total th,
.woocommerce table.shop_table .order-total td {
	border-bottom: 0;
	font-family: var(--font-display);
	font-size: var(--text-body-lg);
	font-weight: 800;
}

.woocommerce table.shop_table .order-total small,
.woocommerce table.shop_table .includes_tax {
	display: block;
	color: var(--color-text-tertiary);
	font-family: var(--font-body);
	font-size: var(--text-caption);
	font-weight: 400;
}

.woocommerce .wc-proceed-to-checkout {
	padding: var(--space-4) 0 0;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order {
	display: flex;
	width: 100%;
	min-height: 3.5rem;
	margin: 0;
	font-size: var(--text-body);
	border-radius: var(--radius-pill);
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:active,
.woocommerce #place_order:active {
	transform: scale(0.98);
}

/* Pusty koszyk */
.woocommerce-cart .cart-empty {
	padding: var(--space-8) var(--space-5) var(--space-3);
	border: 0;
	background: none;
	box-shadow: none;
	text-align: center;
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 700;
}

.woocommerce-cart .cart-empty::before {
	position: static;
	display: block;
	margin: 0 auto var(--space-4);
	font-size: 2rem;
	color: var(--color-text-tertiary);
}

.woocommerce-cart .return-to-shop {
	text-align: center;
}

/* Telefon: wiersze koszyka jako karty (etykiety z data-title, jak w CSS mobilnym Woo) */
@media (max-width: 48rem) {
	.woocommerce table.shop_table_responsive thead,
	.woocommerce table.shop_table_responsive tbody th {
		display: none;
	}
	.woocommerce table.shop_table_responsive tr {
		display: block;
	}
	.woocommerce table.shop_table_responsive tr td {
		display: block;
		padding: var(--space-2) 0;
		background: transparent !important;
		text-align: end;
	}
	.woocommerce table.shop_table_responsive tr td::before {
		content: attr(data-title);
		float: left;
		color: var(--color-text-tertiary);
		font-weight: 500;
	}
	.woocommerce table.shop_table_responsive tr td.actions::before,
	.woocommerce table.shop_table_responsive tr td.product-remove::before,
	.woocommerce table.shop_table_responsive tr td.product-thumbnail::before,
	.woocommerce table.shop_table_responsive tr td.product-name::before {
		content: none;
	}

	.woocommerce table.cart tr.cart_item {
		position: relative;
		display: grid;
		grid-template-columns: 4.5rem minmax(0, 1fr);
		column-gap: var(--space-4);
		margin-bottom: var(--space-3);
		padding: var(--space-4);
		border-radius: var(--radius-lg);
		background: var(--color-surface);
		box-shadow: inset 0 0 0 1px var(--color-border);
	}
	.woocommerce table.cart tr.cart_item td {
		grid-column: 1 / -1;
		border-bottom: 0;
	}
	.woocommerce table.cart tr.cart_item td.product-thumbnail {
		display: block !important;
		grid-column: 1;
		grid-row: 1;
		padding: 0;
	}
	.woocommerce table.cart tr.cart_item td.product-name {
		grid-column: 2;
		grid-row: 1;
		padding: 0 var(--space-7) var(--space-3) 0;
		text-align: start;
	}
	.woocommerce table.cart tr.cart_item td.product-price {
		border-top: 1px solid var(--color-border);
		margin-top: var(--space-3);
	}
	.woocommerce table.cart tr.cart_item td.product-remove {
		position: absolute;
		top: var(--space-3);
		right: var(--space-3);
		padding: 0;
	}
	.woocommerce table.cart tr.cart_item td.product-quantity .quantity {
		display: inline-block;
	}
	.woocommerce table.cart td.actions .coupon {
		margin-bottom: var(--space-2);
	}
	.woocommerce table.cart td.actions .coupon .input-text {
		flex: 1 1 10rem;
		width: auto;
	}
	.woocommerce table.cart td.actions .button {
		flex: 1 1 auto;
	}
	.woocommerce table.cart td.actions > .button {
		width: 100%;
	}
	.cart_totals table.shop_table_responsive tr td {
		border-bottom: 1px solid var(--color-border);
	}
}

/* ---------- Kasa ---------- */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	float: none;
	width: 100%;
}

.woocommerce-checkout .col2-set .col-2 {
	margin-top: var(--space-5);
}

.woocommerce-checkout h3 {
	margin-top: 0;
	margin-bottom: var(--space-4);
	font-size: var(--text-h3);
	font-weight: 700;
}

@media (min-width: 60rem) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(22rem, 28rem);
		grid-template-rows: auto auto 1fr;
		column-gap: var(--space-7);
		align-items: start;
	}
	.woocommerce-checkout form.checkout > * {
		grid-column: 1;
	}
	.woocommerce-checkout form.checkout > #customer_details {
		grid-row: 1 / span 3;
	}
	.woocommerce-checkout form.checkout > #order_review_heading,
	.woocommerce-checkout form.checkout > #order_review {
		grid-column: 2;
	}
	.woocommerce-checkout form.checkout > #order_review {
		position: sticky;
		top: calc(var(--header-h) + var(--space-5));
	}
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-4);
	}
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row {
		grid-column: 1 / -1;
		width: auto;
		float: none;
	}
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first { grid-column: 1; }
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last { grid-column: 2; }
}

#order_review {
	padding: var(--space-5);
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.woocommerce-checkout-review-order-table .product-name {
	font-weight: 500;
}

.woocommerce-checkout-review-order-table .product-quantity {
	color: var(--color-text-tertiary);
	font-weight: 400;
}

.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child {
	text-align: end;
	font-variant-numeric: tabular-nums;
}

.woocommerce-checkout #payment,
.woocommerce-checkout #payment ul.payment_methods,
.woocommerce-checkout #payment div.form-row {
	padding: 0;
	border: 0;
	background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods {
	display: grid;
	gap: var(--space-2);
	margin: var(--space-4) 0;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	box-shadow: inset 0 0 0 1px var(--color-border-strong);
	line-height: 1.4;
}

.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
	box-shadow: inset 0 0 0 1px var(--color-accent-solid);
	background: oklch(0.70 0.185 32 / 0.08);
}

.woocommerce-checkout #payment ul.payment_methods li input {
	accent-color: var(--color-accent-solid);
	margin-inline-end: var(--space-2);
}

.woocommerce-checkout #payment ul.payment_methods li label {
	font-weight: 600;
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li img {
	display: inline-block;
	max-height: 1.5rem;
	margin-inline-start: var(--space-2);
	vertical-align: middle;
}

.woocommerce-checkout #payment div.payment_box {
	margin: var(--space-3) 0 0;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	background: var(--gray-850);
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--gray-850);
}

.woocommerce-terms-and-conditions-wrapper {
	margin-bottom: var(--space-4);
	color: var(--color-text-secondary);
	font-size: var(--text-caption);
}

.woocommerce-terms-and-conditions-wrapper a,
.woocommerce-privacy-policy-text a {
	color: var(--color-accent-text);
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	margin: 0 0 var(--space-5);
	padding: var(--space-5);
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

/* ---------- Podziękowanie za zamówienie ---------- */
.woocommerce-order .woocommerce-thankyou-order-received {
	margin-bottom: var(--space-5);
	padding: var(--space-6);
	border-radius: var(--radius-lg);
	background: oklch(0.80 0.19 145 / 0.08);
	box-shadow: inset 0 0 0 1px oklch(0.80 0.19 145 / 0.3);
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 700;
}

.woocommerce ul.order_details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: var(--space-3);
	margin: 0 0 var(--space-6);
	padding: 0;
	list-style: none;
}

.woocommerce ul.order_details li {
	float: none;
	margin: 0;
	padding: var(--space-4);
	border: 0;
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.woocommerce ul.order_details li strong {
	display: block;
	margin-top: var(--space-1);
	color: var(--color-text);
	font-size: var(--text-body);
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce .woocommerce-customer-details address {
	padding: var(--space-5);
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	font-style: normal;
}

/* ---------- Moje konto ---------- */
@media (min-width: 52rem) {
	.woocommerce-account .entry-content > .woocommerce:has(.woocommerce-MyAccount-navigation) {
		display: grid;
		grid-template-columns: 15rem minmax(0, 1fr);
		gap: var(--space-7);
		align-items: start;
	}

	/* Clearfix WooCommerce (::before/::after) zajmował pierwszą kolumnę – menu lądowało po prawej */
	.woocommerce-account .entry-content > .woocommerce:has(.woocommerce-MyAccount-navigation)::before,
	.woocommerce-account .entry-content > .woocommerce:has(.woocommerce-MyAccount-navigation)::after {
		display: none;
	}
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

.woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 var(--space-4);
	border-radius: var(--radius-md);
	color: var(--color-text-secondary);
	font-weight: 500;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation .is-active a {
	background: var(--color-surface);
	color: var(--color-text);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.woocommerce-MyAccount-navigation a:hover {
	color: var(--color-text);
}

@media (max-width: 52rem) {
	.woocommerce-MyAccount-navigation ul {
		display: flex;
		overflow-x: auto;
		scrollbar-width: none;
		margin-bottom: var(--space-5);
	}
	.woocommerce-MyAccount-navigation a { white-space: nowrap; }
}

.woocommerce-account .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--space-5);
}

.woocommerce-account .u-columns.col2-set .u-column1,
.woocommerce-account .u-columns.col2-set .u-column2 {
	float: none;
	width: auto;
}

.woocommerce-account .u-columns h2 {
	margin-bottom: var(--space-4);
	font-size: var(--text-h3);
}

/* ==========================================================================
   Landingi kursów
   ========================================================================== */
body.zdj-course { --tone: var(--gray-300); }
body.tone-blue   { --tone: var(--blue-400); }
body.tone-green  { --tone: var(--green-400); }
body.tone-amber  { --tone: var(--amber-400); }
body.tone-violet { --tone: var(--violet-400); }

.minicourse[data-tone="green"]  { --tone: var(--green-400); }
.minicourse[data-tone="blue"]   { --tone: var(--blue-400); }
.minicourse[data-tone="amber"]  { --tone: var(--amber-400); }
.minicourse[data-tone="violet"] { --tone: var(--violet-400); }
.minicourse[data-tone="neutral"] { --tone: var(--gray-300); }
.compare__head[data-tone="green"] { --tone: var(--green-400); }
.compare__head[data-tone="blue"]  { --tone: var(--blue-400); }

/* ---------- Hero kursu ---------- */
.chero {
	position: relative;
	padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
	background: radial-gradient(52rem 28rem at 85% 0%, color-mix(in oklch, var(--tone) 16%, transparent), transparent 70%);
	overflow: clip;
}

.chero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(var(--space-6), 4vw, var(--space-8));
	align-items: center;
}

.chero__body {
	display: grid;
	gap: var(--space-4);
	justify-items: start;
}

.chero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--tone);
	font-family: var(--font-display);
	font-size: var(--text-ui);
	font-weight: 800;
	letter-spacing: 0.06em;
}

.chero__badge .course__dot {
	background: var(--tone);
}

.chero__title {
	font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4rem);
	font-weight: 800;
	line-height: 1.03;
	letter-spacing: -0.035em;
	max-width: 16ch;
}

.chero__lead {
	max-width: 36rem;
	color: var(--color-text-secondary);
	font-size: var(--text-body-lg);
	text-wrap: pretty;
}

.chero__facts {
	display: grid;
	gap: var(--space-3);
	margin: var(--space-3) 0 0;
	padding: 0;
	list-style: none;
}

.chero__facts li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--color-text-secondary);
}

.chero__facts .icon {
	color: var(--tone);
}

.chero__side {
	position: relative;
	display: grid;
}

.chero__media {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface);
}

.chero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.chero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--color-image-outline);
}

/* Karta zapisu nachodzi na zdjęcie – materiał nad treścią, jak panel w aplikacji. */
.bookcard {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--space-2);
	width: min(100% - 2rem, 22rem);
	margin: -5rem 0 0 auto;
	margin-inline-end: var(--space-4);
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	background: oklch(0.205 0.008 270 / 0.86);
	backdrop-filter: saturate(1.4) blur(18px);
	-webkit-backdrop-filter: saturate(1.4) blur(18px);
	box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.1), 0 30px 60px -20px oklch(0 0 0 / 0.7);
}

.bookcard__label {
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.bookcard__date {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-body-lg);
	font-weight: 700;
}

.bookcard__date .icon {
	color: var(--tone);
}

.bookcard .cprice {
	margin: var(--space-2) 0 var(--space-3);
}

.bookcard__note {
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
	text-align: center;
}

.cprice__price {
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.cprice__price del {
	margin-inline-end: var(--space-2);
	color: var(--color-text-tertiary);
	font-size: 0.55em;
	font-weight: 600;
}

.cprice__price ins {
	text-decoration: none;
}

.cprice__from {
	color: var(--color-text-tertiary);
	font-size: 0.5em;
	font-weight: 600;
}

.cprice__deposit {
	margin-top: var(--space-1);
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
}

.cprice--sm .cprice__price { font-size: var(--text-h3); }
.cprice--sm .cprice__deposit { font-size: var(--text-caption); }
.cprice--lg .cprice__price { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); }

@media (max-width: 60rem) {
	.chero__grid { grid-template-columns: minmax(0, 1fr); }
	.chero__media { aspect-ratio: 16 / 10; }
	.bookcard { width: auto; margin: -3rem var(--space-3) 0; }
}

@media (prefers-reduced-motion: no-preference) {
	.chero__body > * { animation: zdj-rise-solid 700ms var(--ease-out) both; }
	.chero__body > :nth-child(2) { animation-delay: 60ms; }
	.chero__body > :nth-child(3) { animation-delay: 120ms; }
	.chero__body > :nth-child(4) { animation-delay: 180ms; }
	.chero__media { animation: zdj-settle 900ms var(--ease-out) 80ms both; }
	.bookcard { animation: zdj-rise-solid 800ms var(--ease-out) 220ms both; }
}

@media (prefers-reduced-transparency: reduce) {
	.bookcard { background: var(--gray-900); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- Pasek kursu: nazwa, kotwice i przycisk zapisu (jak na stronach produktów Apple) ---------- */
.localnav__inner {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.localnav__inner ul {
	flex: 1 1 auto;
	min-width: 0;
}

.localnav__name {
	flex: none;
	font-family: var(--font-display);
	font-size: var(--text-ui);
	font-weight: 800;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.localnav__cta {
	flex: none;
	min-height: 2.25rem;
}

@media (max-width: 60rem) {
	.localnav__name { display: none; }
	.localnav__inner { gap: var(--space-2); }
	/* Wygaszenie przy krawędzi: widać, że pasek się przewija. */
	.localnav__inner ul {
		-webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
		mask-image: linear-gradient(90deg, #000 85%, transparent);
	}
}

/* ---------- Liczby ---------- */
.stats-band {
	border-block: 1px solid var(--color-border);
}

.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: var(--space-5);
	margin: 0;
}

.stats__item {
	display: grid;
	gap: var(--space-1);
}

.stats dt {
	color: var(--tone, var(--color-text));
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.stats dd {
	margin: 0;
	color: var(--color-text-secondary);
	text-wrap: pretty;
}

/* ---------- „Co dostajesz” ---------- */
.includes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: var(--space-4) var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.includes li {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
	font-size: var(--text-body-lg);
	text-wrap: pretty;
}

.includes .icon {
	flex: none;
	margin-top: 0.1rem;
	color: var(--tone, var(--color-accent-text));
}

/* ---------- Plan dnia ---------- */
.schedule {
	margin: 0;
	padding: 0;
	list-style: none;
}

.schedule__row {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: var(--space-4);
	align-items: baseline;
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border);
}

.schedule__row:first-child {
	border-top: 1px solid var(--color-border);
}

.schedule__time {
	color: var(--tone, var(--color-accent-text));
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.schedule__what {
	font-size: var(--text-body-lg);
	font-weight: 500;
}

.schedule__row--break .schedule__time,
.schedule__row--break .schedule__what {
	color: var(--color-text-tertiary);
	font-weight: 400;
}

@media (max-width: 36rem) {
	.schedule__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-1);
	}
}

/* ---------- Program po dniach ---------- */
.days {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.day {
	display: grid;
	align-content: start;
	gap: var(--space-2);
	padding: var(--space-6) var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.day__label {
	color: var(--tone);
	font-size: var(--text-caption);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.day__name {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.day__sub {
	color: var(--color-text-secondary);
}

.day__list {
	display: grid;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	padding: var(--space-4) 0 0;
	border-top: 1px solid var(--color-border);
	list-style: none;
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
}

.day__list li {
	position: relative;
	padding-inline-start: var(--space-4);
}

.day__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tone);
}

/* ---------- Porównanie ---------- */
.compare {
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
	overflow: hidden;
}

.compare__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.compare__table th,
.compare__table td {
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--color-border);
	text-align: start;
	vertical-align: top;
	overflow-wrap: anywhere;
}

.compare__table tbody th {
	width: 34%;
	color: var(--color-text-secondary);
	font-weight: 500;
}

.compare__head {
	font-family: var(--font-display);
	font-size: var(--text-body-lg);
	font-weight: 800;
}

.compare__head .course__dot {
	display: inline-block;
	margin-inline-end: var(--space-2);
	background: var(--tone);
	vertical-align: 0.1em;
}

.compare__here {
	display: block;
	margin-top: var(--space-1);
	color: var(--color-text-tertiary);
	font-family: var(--font-body);
	font-size: var(--text-caption);
	font-weight: 500;
}

.compare__table .is-current {
	background: oklch(1 0 0 / 0.035);
}

.compare__table .icon {
	color: var(--green-400);
}

.compare__no {
	color: var(--color-text-tertiary);
}

.compare__foot th,
.compare__foot td {
	border-bottom: 0;
}

.compare__foot .text-link {
	margin-top: var(--space-2);
}

@media (max-width: 44rem) {
	.compare__table th,
	.compare__table td {
		padding: var(--space-3);
		font-size: var(--text-ui);
	}
	.compare__table tbody th { width: 30%; }
	.compare__head { font-size: var(--text-body); }
}

/* ---------- Sprzęt ---------- */
.gearchips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gearchips li {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 3.25rem;
	padding: 0 var(--space-5) 0 var(--space-4);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
	font-weight: 600;
}

.gearchips .icon {
	color: var(--tone, var(--color-accent-text));
}

/* ---------- Miejsce ---------- */
.placecard {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.placecard > div {
	flex: 1 1 14rem;
}

.placecard__icon {
	color: var(--tone);
}

.placecard__title {
	font-family: var(--font-display);
	font-weight: 700;
}

.placecard__addr {
	color: var(--color-text-secondary);
}

/* ---------- Zapis na końcu ---------- */
.booking {
	background:
		radial-gradient(40rem 20rem at 100% 100%, color-mix(in oklch, var(--tone) 18%, transparent), transparent 70%),
		var(--color-bg-alt);
	border-top: 1px solid var(--color-border);
}

.booking__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-6);
	align-items: center;
}

.booking__inner > div:first-child {
	display: grid;
	gap: var(--space-3);
}

.booking__date {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: 700;
}

.booking__date .icon {
	color: var(--tone);
}

.booking .section__lead a {
	color: var(--color-text);
	font-weight: 600;
}

.booking__buy {
	display: grid;
	gap: var(--space-4);
	justify-items: end;
	text-align: end;
}

@media (max-width: 52rem) {
	.booking__inner { grid-template-columns: minmax(0, 1fr); }
	.booking__buy { justify-items: stretch; text-align: start; }
}

/* ---------- Inne kursy ---------- */
.minicourses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.minicourse {
	--tone: var(--gray-300);
	position: relative;
	display: grid;
	align-content: start;
	gap: var(--space-2);
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border), inset 0 3px 0 var(--tone);
	transition: background-color 200ms var(--ease-ui);
}

.minicourse .course__dot {
	background: var(--tone);
}

.minicourse__name {
	font-size: var(--text-body-lg);
	font-weight: 800;
}

.minicourse__link {
	text-decoration: none;
}

.minicourse__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.minicourse__meta {
	color: var(--color-text-tertiary);
	font-size: var(--text-ui);
}

.minicourse__more {
	position: absolute;
	top: var(--space-5);
	right: var(--space-5);
	color: var(--color-text-tertiary);
	transition: transform 200ms var(--ease-out), color 200ms var(--ease-ui);
}

.minicourse:has(.minicourse__link:focus-visible) {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
}

.minicourse__link:focus-visible {
	outline: none;
}

@media (hover: hover) and (pointer: fine) {
	.minicourse:hover { background: var(--color-surface-hover); }
	.minicourse:hover .minicourse__more { color: var(--tone); transform: translateX(3px); }
}

/* Na stronie kursu: akcenty listy i kroków w kolorze kursu */
.zdj-course .pstep__num {
	background: var(--tone);
}

.zdj-course .fcard__icon {
	background: color-mix(in oklch, var(--tone) 14%, transparent);
	color: var(--tone);
}
.compare__table .text-link .icon { color: inherit; }
.localnav a.localnav__cta {
	padding: 0 var(--space-4);
	background: var(--color-accent-solid);
	color: var(--color-on-accent);
	font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
	.localnav a.localnav__cta:hover { background: var(--color-accent-solid-hover); color: var(--color-on-accent); }
}

/* ==========================================================================
   Kurs: pasek na górze, pasek zakupu, wolne miejsca, przełącznik porównania
   ========================================================================== */

/* Przycisk w pasku pojawia się dopiero, gdy karta zapisu wyjedzie z ekranu – jeden przycisk naraz. */
.localnav[data-watch] [data-buy-cta] {
	opacity: 0;
	transform: scale(0.92);
	visibility: hidden;
	transition: opacity 180ms var(--ease-ui), transform 260ms var(--ease-out), visibility 0s linear 260ms;
}

.localnav[data-watch].is-buy [data-buy-cta] {
	opacity: 1;
	transform: none;
	visibility: visible;
	transition: opacity 180ms var(--ease-ui), transform 260ms var(--ease-out), visibility 0s;
}

/* Karta zapisu mniej zasłania zdjęcie */
.bookcard {
	margin-top: -2.5rem;
}

.bookcard__seats {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-2);
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	font-weight: 500;
}

.bookcard__seats.is-low {
	color: var(--amber-400);
}

.bookcard__meter {
	display: block;
	height: 6px;
	border-radius: var(--radius-pill);
	background: oklch(1 0 0 / 0.1);
	overflow: hidden;
}

.bookcard__meter span {
	display: block;
	width: calc(var(--fill, 1) * 100%);
	height: 100%;
	border-radius: inherit;
	background: var(--tone, var(--color-accent-solid));
}

.bookcard__seats.is-low .bookcard__meter span {
	background: var(--amber-400);
}

@media (max-width: 60rem) {
	/* Telefon: najpierw cena i zapis, potem zdjęcie. */
	.chero__side {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
	}
	.bookcard {
		order: -1;
		width: auto;
		margin: 0;
		background: var(--color-surface);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		box-shadow: inset 0 0 0 1px var(--color-border);
	}
	.chero__grid {
		gap: var(--space-5);
	}
}

/* ---------- Pasek zakupu (telefon) ---------- */
.buybar {
	position: fixed;
	inset: auto 0 0;
	z-index: 60;
	display: none;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-3) max(var(--gutter), env(safe-area-inset-right)) calc(var(--space-3) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
	background: oklch(0.175 0.007 270 / 0.86);
	backdrop-filter: saturate(1.4) blur(18px);
	-webkit-backdrop-filter: saturate(1.4) blur(18px);
	box-shadow: 0 -1px 0 oklch(1 0 0 / 0.08);
	transform: translateY(110%);
	transition: transform 320ms var(--ease-out);
}

.buybar.is-shown {
	transform: none;
}

.buybar__info {
	flex: 1 1 auto;
	min-width: 0;
}

.buybar__name {
	color: var(--tone, var(--color-text-secondary));
	font-size: var(--text-caption);
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.buybar__meta {
	font-family: var(--font-display);
	font-size: var(--text-body-lg);
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.buybar__meta ins {
	text-decoration: none;
}

.buybar__cta {
	flex: none;
	min-height: 2.75rem;
}

@media (max-width: 60rem) {
	.buybar { display: flex; }
	.zdj-course .site-footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
	.buybar { transform: none; opacity: 0; transition: opacity 200ms ease; }
	.buybar.is-shown { opacity: 1; }
}

@media (prefers-reduced-transparency: reduce) {
	.buybar { background: var(--gray-950); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- Przełącznik porównania (telefon) ---------- */
.segmented {
	display: none;
}

@media (max-width: 44rem) {
	.compare[data-show] .segmented {
		position: relative;
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: var(--space-3);
		padding: 3px;
		border-radius: var(--radius-pill);
		background: var(--gray-950);
		box-shadow: inset 0 0 0 1px var(--color-border);
	}
	/* Pigułka przesuwa się pod wybraną opcję, zamiast przeskakiwać. */
	.compare[data-show] .segmented::before {
		content: "";
		position: absolute;
		inset: 3px auto 3px 3px;
		width: calc(50% - 3px);
		border-radius: var(--radius-pill);
		background: var(--gray-800);
		transition: transform 300ms var(--ease-out);
	}
	.compare[data-show="intro"] .segmented::before {
		transform: translateX(100%);
	}
	.segmented button {
		position: relative;
		min-height: 2.5rem;
		border: 0;
		background: none;
		color: var(--color-text-secondary);
		font: 700 var(--text-ui) / 1 var(--font-display);
		cursor: pointer;
	}
	.segmented button[aria-pressed="true"] {
		color: var(--color-text);
	}
	.compare[data-show="starter"] .compare__table :is(th, td):nth-child(3),
	.compare[data-show="intro"] .compare__table :is(th, td):nth-child(2) {
		display: none;
	}
	.compare[data-show] .compare__table tbody th {
		width: 42%;
	}
	.compare[data-show] .compare__table thead {
		display: none;
	}
	.compare[data-show] .compare__table .is-current {
		background: none;
	}
}

/* Telefon: zapis jest w pasku na dole – w pasku u góry zostają same skróty. */
@media (max-width: 60rem) {
	.localnav--course .localnav__cta { display: none; }
}

/* ==========================================================================
   Kurs: zdjęcia, filmy, opinie
   ========================================================================== */
.pvideos {
	display: grid;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.pvideos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pvideos--3 { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.pvideos--3 .pvideo:first-child { grid-row: span 2; }
.pvideos--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pvideos--4 .pvideo:first-child { grid-column: 1 / -1; }

.pvideo {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface);
}

.pvideos--3 .pvideo:first-child { aspect-ratio: auto; }

.pvideo img,
.pvideo iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.pvideo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--color-image-outline);
	pointer-events: none;
}

.pvideo .video__play {
	width: 3.75rem;
	height: 3.75rem;
}

.pvideo:first-child .video__play {
	width: 4.5rem;
	height: 4.5rem;
}

.pvideo.is-playing img,
.pvideo.is-playing .video__play {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.pvideo:hover .video__play { transform: scale(1.06); }
}

@media (max-width: 44rem) {
	.pvideos--2,
	.pvideos--3,
	.pvideos--4 {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}
	.pvideos--3 .pvideo:first-child { grid-row: auto; aspect-ratio: 16 / 9; }
}

/* Galeria: siatka na komputerze, przewijany pasek z „zajawką” kolejnego zdjęcia na telefonie. */
.pgallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pgallery--bento {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 11rem;
}

.pgallery--bento li:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.pgallery__item {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	padding: 0;
	border: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-surface);
	cursor: zoom-in;
}

.pgallery--bento .pgallery__item {
	aspect-ratio: auto;
}

.pgallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms var(--ease-out);
}

.pgallery__item::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--color-image-outline);
}

.pgallery__item:active img {
	transform: scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
	.pgallery__item:hover img { transform: scale(1.03); }
}

@media (max-width: 44rem) {
	.pgallery,
	.pgallery--bento {
		display: flex;
		gap: var(--space-3);
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	.pgallery::-webkit-scrollbar { display: none; }
	.pgallery li {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}
	.pgallery__item,
	.pgallery--bento .pgallery__item {
		aspect-ratio: 4 / 3;
	}
}

/* Podgląd zdjęcia na cały ekran */
.lightbox {
	width: 100vw;
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-text);
	overflow: hidden;
}

.lightbox::backdrop {
	background: oklch(0.1 0.005 270 / 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.lightbox__stage {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: clamp(var(--space-5), 4vw, var(--space-8));
	touch-action: pan-y;
}

.lightbox__img {
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--radius-md);
	box-shadow: 0 30px 80px oklch(0 0 0 / 0.6);
	user-select: none;
	-webkit-user-drag: none;
}

.lightbox__btn {
	position: absolute;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: oklch(1 0 0 / 0.1);
	color: var(--color-text);
	cursor: pointer;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: background-color 150ms var(--ease-ui), transform 150ms var(--ease-out);
}

.lightbox__btn:active { transform: scale(0.94); }

@media (hover: hover) and (pointer: fine) {
	.lightbox__btn:hover { background: oklch(1 0 0 / 0.18); }
}

.lightbox__close { top: calc(var(--space-4) + env(safe-area-inset-top)); right: var(--space-4); }
.lightbox__prev { left: var(--space-4); top: 50%; translate: 0 -50%; }
.lightbox__next { right: var(--space-4); top: 50%; translate: 0 -50%; }
.lightbox__prev .icon { transform: rotate(180deg); }

.lightbox__count {
	position: absolute;
	left: 50%;
	bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
	translate: -50% 0;
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 44rem) {
	.lightbox__prev,
	.lightbox__next { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
	.lightbox[open] .lightbox__img { animation: zdj-zoom 320ms var(--ease-out); }
}

@keyframes zdj-zoom {
	from { opacity: 0; transform: scale(0.94); }
}

/* Opinie */
.reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.review {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-5);
	height: 100%;
	margin: 0;
	padding: var(--space-6) var(--space-5) var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.review blockquote {
	margin: 0;
	font-size: var(--text-body-lg);
	line-height: 1.55;
	text-wrap: pretty;
}

.review blockquote p::before { content: "„"; }
.review blockquote p::after { content: "”"; }

.review figcaption {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	font-weight: 600;
}

.review__avatar {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: color-mix(in oklch, var(--tone, var(--color-accent-solid)) 18%, transparent);
	color: var(--tone, var(--color-accent-text));
	font-family: var(--font-display);
	font-weight: 800;
}

.reviews__more {
	margin-top: var(--space-5);
}
@media (min-width: 44.01rem) {
	.pvideos--1 .pvideo { aspect-ratio: 2 / 1; }
}

/* Długie opinie: pierwsze 6 linijek, reszta po kliknięciu „Czytaj całość”. */
.review.is-clamped blockquote p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	overflow: hidden;
}

.review__more {
	align-self: flex-start;
	margin-top: calc(-1 * var(--space-3));
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-accent-text);
	font: 600 var(--text-ui) / 1.4 var(--font-body);
	cursor: pointer;
}

.reviews {
	align-items: start;
}

/* ==========================================================================
   Mniej tekstu, więcej obrazu (landing kursu)
   ========================================================================== */

/* Na kursach nagłówki sekcji mówią same za siebie – bez pomarańczowych etykiet nad każdym. */
:is(.zdj-landing, .home) .section__header .eyebrow,
.home .studio__body > .eyebrow,
.home .order-band .eyebrow {
	display: none;
}

/* Strona główna: etapy jako same tytuły i linki – opisy wypadają (mniej czytania). */
.home .stage__lead {
	display: none;
}

.zdj-landing .section__header {
	margin-bottom: var(--space-6);
}

/* ---------- Kafle ze zdjęciem ---------- */
.ptiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ptile {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface);
	isolation: isolate;
}

.ptile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 700ms var(--ease-out);
}

/* Przyciemnienie od dołu: podpis zawsze czytelny, niezależnie od zdjęcia. */
.ptile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, oklch(0.1 0.005 270 / 0.92) 0%, oklch(0.1 0.005 270 / 0.55) 35%, transparent 65%);
}

.ptile::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--color-image-outline);
	pointer-events: none;
}

.ptile__title {
	position: absolute;
	inset: auto var(--space-5) var(--space-5);
	font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

@media (hover: hover) and (pointer: fine) {
	.ptile:hover img { transform: scale(1.04); }
}

@media (max-width: 52rem) {
	.ptiles {
		display: flex;
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	.ptiles::-webkit-scrollbar { display: none; }
	.ptile {
		flex: 0 0 76%;
		scroll-snap-align: start;
	}
}

/* ---------- Moment: zdjęcie od krawędzi do krawędzi ---------- */
.moment {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(88svh, 52rem);
	padding-block: var(--space-8) clamp(var(--space-7), 6vw, var(--space-8));
	overflow: clip;
	isolation: isolate;
}

.moment__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.moment__media img,
.moment__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.moment__media video {
	opacity: 0;
	transition: opacity 800ms var(--ease-out);
}

.moment__media video.is-ready {
	opacity: 1;
}

/* Góra i dół przechodzą w tło strony, tekst na dole zawsze czytelny. */
.moment__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, var(--color-bg) 0%, transparent 18%),
		linear-gradient(to top, var(--color-bg) 0%, oklch(0.145 0.006 270 / 0.75) 30%, transparent 70%),
		radial-gradient(60rem 30rem at 15% 100%, color-mix(in oklch, var(--tone, var(--color-accent-solid)) 22%, transparent), transparent 70%);
}

.moment__text {
	display: grid;
	gap: var(--space-4);
}

.moment__title {
	display: grid;
	font-family: var(--font-display);
	font-size: clamp(3rem, 1.5rem + 7vw, 8rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.045em;
}

.moment__title span:last-child {
	color: var(--tone, var(--color-accent-text));
}

.moment__sub {
	max-width: 30rem;
	color: var(--color-text-secondary);
	font-size: var(--text-body-lg);
}

/* Ruch związany z przewijaniem: zdjęcie „dojeżdża” do kadru, tekst wschodzi. Tylko tam, gdzie przeglądarka to umie. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.moment__media {
			animation: zdj-moment-zoom linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 55%;
		}
		.moment__title span,
		.moment__sub {
			animation: zdj-reveal linear both;
			animation-timeline: view();
			animation-range: entry 20% cover 45%;
		}
		.moment__title span:nth-child(2) { animation-range: entry 30% cover 50%; }

		:is(.zdj-landing, .home) :is(.section__header, .includes li, .schedule__row, .review, .fcard, .day, .compare, .faq__item, .pstep, .words li, .rental, .gear__group, .course, .guide__row, .member, .tile, .ccard, .offer, .product, .stage, .quote, .photo) {
			animation: zdj-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 70%;
		}
		@media (min-width: 52.01rem) {
			.zdj-landing .ptile {
				animation: zdj-reveal linear both;
				animation-timeline: view();
				animation-range: entry 0% entry 70%;
			}
			.zdj-landing .ptile:nth-child(2) { animation-range: entry 8% entry 78%; }
			.zdj-landing .ptile:nth-child(3) { animation-range: entry 16% entry 86%; }
		}
	}
}

@keyframes zdj-moment-zoom {
	from { transform: scale(1.14); opacity: 0.4; }
}

@keyframes zdj-reveal {
	from { opacity: 0; transform: translateY(28px); }
}

/* „W cenie”: duże pozycje w dwóch kolumnach, zamiast gęstej listy */
.zdj-course .includes li {
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Moment: mocniejsze przyciemnienie pod tekstem, jaśniejszy akcent, twarze nad napisem. */
.moment__media img { object-position: center 25%; }

.moment__media::after {
	background:
		linear-gradient(to bottom, var(--color-bg) 0%, transparent 16%),
		linear-gradient(to top, var(--color-bg) 0%, oklch(0.145 0.006 270 / 0.88) 34%, oklch(0.145 0.006 270 / 0.35) 58%, transparent 78%),
		radial-gradient(60rem 30rem at 15% 100%, color-mix(in oklch, var(--tone, var(--color-accent-solid)) 22%, transparent), transparent 70%);
}

.moment__title span:last-child {
	color: color-mix(in oklch, var(--tone, var(--color-accent-text)) 78%, white);
}

@media (max-width: 44rem) {
	.moment { min-height: 82svh; }
	.moment__title { font-size: clamp(2.75rem, 1.5rem + 7vw, 4rem); }
	.moment__media::after {
		background:
			linear-gradient(to bottom, var(--color-bg) 0%, transparent 14%),
			linear-gradient(to top, var(--color-bg) 0%, oklch(0.145 0.006 270 / 0.9) 42%, oklch(0.145 0.006 270 / 0.3) 66%, transparent 85%);
	}
}


/* ---------- Duże słowa ---------- */
.words {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--color-border);
}

.words li {
	border-bottom: 1px solid var(--color-border);
}

.words__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: clamp(var(--space-4), 2vw, var(--space-5)) 0;
	font-family: var(--font-display);
	font-size: clamp(1.875rem, 1.2rem + 3vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.05;
	text-decoration: none;
	color: var(--color-text);
	transition: color 200ms var(--ease-ui);
}

.words__link .icon {
	flex: none;
	color: var(--color-text-tertiary);
	transition: transform 300ms var(--ease-out), color 200ms var(--ease-ui);
}

.words__link:active span {
	opacity: 0.7;
}

@media (hover: hover) and (pointer: fine) {
	.words__link:hover { color: var(--color-accent-text); }
	.words__link:hover .icon { color: var(--color-accent-text); transform: translateX(6px); }
}

/* Podstrony: nagłówek z mniejszą liczbą słów – lead krótszy, więc może być większy */
.zdj-landing .phero__lead {
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
}


/* ==========================================================================
   Skala typografii – pięć stopni na całą stronę
   80 px: tylko nagłówek strony głównej · 56 px: tytuły podstron, kursów, momenty
   44 px: nagłówki sekcji · 20–26 px: tytuły kart i kafli · 16–18 px: tekst.
   Im większy tekst, tym lżejszy krój (700 zamiast 800) i ciaśniejsze odstępy między literami.
   ========================================================================== */
.section__title {
	font-weight: 700;
}

.phero__title,
.chero__title {
	font-size: var(--text-h1);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.moment__title {
	font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
}

@media (max-width: 44rem) {
	.moment__title { font-size: 2.75rem; }
}

.words__link {
	font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.025em;
}

.stats dt {
	font-size: clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
	font-weight: 700;
}

.zdj-course .includes li {
	font-family: var(--font-body);
	font-size: var(--text-body-lg);
	font-weight: 500;
	letter-spacing: 0;
}

.ptile__title,
.day__name,
.stage__title {
	font-size: var(--text-card);
	font-weight: 700;
}

.cprice--lg .cprice__price {
	font-size: clamp(2rem, 1.6rem + 1.2vw, 2.5rem);
}

/* Mniej wersalików: etykiety pisane normalnie, bez rozstrzelenia liter. */
.eyebrow,
.people-col__title,
.site-footer__title,
.ccard__label,
.woocommerce table.shop_table thead th,
.woocommerce ul.order_details li,
.bookcard__label,
.day__label,
.guide__q {
	text-transform: none;
	letter-spacing: 0;
}

.eyebrow {
	font-size: var(--text-ui);
}

.chero__badge,
.localnav__name,
.buybar__name {
	letter-spacing: 0;
}

/* ---------- Strona główna: kadra jako osobny, spokojny rząd ---------- */
.crew {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--space-6) var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.crew__item {
	display: grid;
	gap: var(--space-1);
	align-content: start;
}

.crew__avatar {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	margin-bottom: var(--space-3);
	border-radius: 50%;
	overflow: hidden;
	background:
		radial-gradient(circle at 30% 20%, oklch(0.70 0.185 32 / 0.35), transparent 70%),
		var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
	color: var(--color-text);
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
}

.crew__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.crew__name {
	font-family: var(--font-display);
	font-size: var(--text-body-lg);
	font-weight: 700;
}

.crew__role {
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	text-wrap: pretty;
}

.home .products--3 {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

@media (min-width: 52rem) {
	.home .products--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.home :is(.crew__item, .review) {
			animation: zdj-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 70%;
		}
	}
}

/* ==========================================================================
   Szlif: film na głównej, karty bez „kwadracików”, zestawy jako pigułki,
   płynna pigułka w pasku sekcji, menu mobilne wchodzące po kolei
   ========================================================================== */

/* Strona główna: jeden duży film zamiast siatki zdjęć */
.media-grid--film {
	display: block;
}

.media-grid--film .video {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
}

/* Karty: sama ikona w kolorze, bez tła – mniej „szablonowo” */
.fcard__icon {
	width: auto;
	height: auto;
	margin-bottom: var(--space-2);
	background: none;
	border-radius: 0;
	justify-content: start;
}

.zdj-course .fcard__icon {
	background: none;
}

@media (max-width: 44rem) {
	.fcard__icon { margin-top: 0.15rem; }
}

/* Zestawy do wynajęcia: sprzęt jako pigułki zamiast listy w punktach */
.rental__items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.rental__items li {
	display: inline-flex;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	box-shadow: inset 0 0 0 1px var(--color-border-strong);
	color: var(--color-text-secondary);
	font-size: var(--text-caption);
	font-weight: 500;
}

.rental__items li::before {
	display: none;
}

/* Pasek sekcji: jedna pigułka, która płynnie jedzie pod aktywny link */
.localnav ul {
	position: relative;
}

.localnav__pill {
	position: absolute;
	top: var(--space-2);
	left: 0;
	height: 2.25rem;
	width: 0;
	border-radius: var(--radius-pill);
	background: oklch(1 0 0 / 0.1);
	opacity: 0;
	pointer-events: none;
	transition: transform 420ms var(--ease-out), width 420ms var(--ease-out), opacity 200ms var(--ease-ui);
}

.localnav.has-pill a[aria-current="true"] {
	background: none;
}

.localnav a {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.localnav__pill { transition: opacity 150ms linear; }
}

/* Menu mobilne: pozycje wchodzą po kolei, jak w iOS */
@media (max-width: 56rem) and (prefers-reduced-motion: no-preference) {
	.is-open .site-nav .menu > li {
		animation: zdj-rise 420ms var(--ease-out) both;
	}
	.is-open .site-nav .menu > li:nth-child(2) { animation-delay: 30ms; }
	.is-open .site-nav .menu > li:nth-child(3) { animation-delay: 60ms; }
	.is-open .site-nav .menu > li:nth-child(4) { animation-delay: 90ms; }
	.is-open .site-nav .menu > li:nth-child(5) { animation-delay: 120ms; }
	.is-open .site-nav .menu > li:nth-child(6) { animation-delay: 150ms; }
	.is-open .site-nav .menu > li:nth-child(7) { animation-delay: 180ms; }
	.is-open .site-nav__mobile-extra { animation: zdj-rise 420ms var(--ease-out) 210ms both; }
}

/* ---------- YouTube: darmowa wiedza ---------- */
.ythub__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-4);
}

.ythub__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
	gap: var(--space-4);
	align-items: start;
}

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

.ythub__player {
	grid-column: auto;
	grid-row: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
}

.ythub__list {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ythub__item {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	align-items: center;
	gap: var(--space-3);
	width: 100%;
	padding: var(--space-2);
	border: 0;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--color-text);
	font: inherit;
	text-align: start;
	cursor: pointer;
	transition: background-color 160ms ease, transform 100ms ease-out;
}

@media (hover: hover) {
	.ythub__item:hover { background: var(--color-surface); }
}

.ythub__item:active { transform: scale(0.98); }

.ythub__item[aria-current="true"] {
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-accent-solid) 60%, transparent);
}

.ythub__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: calc(var(--radius-md) - 4px);
	background: var(--color-surface);
}

.ythub__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ythub__time {
	position: absolute;
	inset-block-end: 0.3rem;
	inset-inline-end: 0.3rem;
	padding: 0.05rem 0.35rem;
	border-radius: 0.3rem;
	background: oklch(0.145 0.006 270 / 0.85);
	color: #fff;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}

.ythub__title {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-wrap: pretty;
}

@media (max-width: 56rem) {
	.ythub__grid { grid-template-columns: minmax(0, 1fr); }
	.ythub__item { grid-template-columns: 7.5rem minmax(0, 1fr); }
}

/* Social w menu mobilnym */
.site-nav__socials {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	margin: var(--space-2) 0 0;
	padding: 0;
	list-style: none;
}

/* ---------- Karty kursów v2: zdjęcie, kafelek z datą jak w kalendarzu, jedna linijka faktów ---------- */
.course {
	gap: 0;
	padding: 0;
	overflow: hidden;
	isolation: isolate;
}

.course::before { display: none; }

.course__media {
	position: relative;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	background: var(--color-bg-alt);
}

.course__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease-out);
}

/* Zdjęcie przechodzi miękko w kartę – bez twardej krawędzi */
.course__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 45%, var(--color-surface) 100%);
}

@media (hover: hover) and (pointer: fine) {
	.course:hover .course__media img { transform: scale(1.04); }
}

.course__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-5);
}

.course__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-4);
	align-items: start;
}

/* Kafelek z datą – nachodzi na zdjęcie jak bilet w Wallet */
.course__when {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	align-content: center;
	width: 3.75rem;
	height: 4rem;
	border-radius: 0.875rem;
	background: var(--color-surface);
	box-shadow:
		inset 0 0 0 1px color-mix(in oklch, var(--tone) 45%, transparent),
		0 8px 24px oklch(0 0 0 / 0.35);
	color: var(--color-text);
	line-height: 1;
}

.course__media + .course__body .course__when { margin-top: calc(-1 * var(--space-5) - 1.5rem); }

.course__mon {
	color: var(--tone);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.course__day {
	margin-top: 0.2rem;
	font: 800 1.75rem / 1 var(--font-display);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.course__when--open { color: var(--tone); }

.course__title {
	display: grid;
	gap: 0.25rem;
	min-width: 0;
}

.course__kicker {
	color: var(--tone);
	font-size: var(--text-caption);
	font-weight: 600;
}

.course__name { font-size: var(--text-card); }

.course__date {
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
}

.course__date::first-letter { text-transform: uppercase; }

.course__left {
	display: block;
	color: var(--amber-400);
	font-weight: 600;
}

/* Te same parametry na każdej karcie; wiersze dosunięte do ceny, żeby dało się je porównać w rzędzie. */
.course__spec {
	display: grid;
	gap: var(--space-2);
	margin: auto 0 0;
	font-size: var(--text-ui);
}

.course__spec div {
	display: grid;
	grid-template-columns: 4.75rem minmax(0, 1fr);
	gap: var(--space-2);
}

.course__spec dt {
	color: var(--color-text-tertiary);
}

.course__spec dd {
	margin: 0;
	color: var(--color-text-secondary);
	text-wrap: pretty;
}

.courses-help {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3) var(--space-5);
	margin-top: var(--space-4);
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.courses-help p {
	margin: 0;
	font-weight: 600;
	text-wrap: balance;
}

@media (max-width: 44rem) {
	.courses-help .button {
		width: 100%;
	}
}

.course__footer {
	align-items: center;
	border-top: 0;
	padding-top: 0;
}

.course__deposit { margin-top: 0.1rem; }

/* Kurs z terminem: wyraźny przycisk; pozostałe: spokojny link */
.course--dated .course__more {
	padding: 0.55rem 1rem;
	border-radius: 999px;
	background: var(--color-accent-solid);
	color: var(--color-on-accent);
	transition: background-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.course--dated:hover .course__more { background: var(--color-accent-solid-hover); }
}

/* Telefon: karuzela z podglądem następnej karty zamiast pięciu kart jedna pod drugą */
@media (max-width: 39.99rem) {
	.courses {
		grid-auto-flow: column;
		grid-auto-columns: 84%;
		grid-template-columns: none;
		gap: var(--space-3);
		margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left)));
		padding-inline: max(var(--gutter), env(safe-area-inset-left));
		padding-bottom: var(--space-2);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: max(var(--gutter), env(safe-area-inset-left));
		scrollbar-width: none;
	}

	.courses::-webkit-scrollbar { display: none; }

	.courses > .course { scroll-snap-align: start; }
}

/* ---------- Hero v2: zdjęcie widać, przyciemniona tylko strona z tekstem ---------- */
.hero__media::after {
	background:
		linear-gradient(to top in oklab, var(--color-bg) 0%, oklch(0.145 0.006 270 / 0.55) 28%, transparent 60%),
		linear-gradient(to right in oklab, oklch(0.145 0.006 270 / 0.9) 0%, oklch(0.145 0.006 270 / 0.72) 34%, oklch(0.145 0.006 270 / 0.15) 68%, transparent 100%);
}

.hero__media img { object-position: 70% 35%; }

.hero__title { max-width: 16ch; }

/* Telefon: najpierw zdjęcie, pod nim tekst – zamiast tekstu na przyciemnionym zdjęciu. */
@media (max-width: 44rem) {
	.hero {
		min-height: 0;
		justify-content: flex-start;
		gap: var(--space-6);
		padding-top: 0;
	}
	.hero__media {
		position: relative;
		inset: auto;
		z-index: 0;
		height: min(58svh, 30rem);
		margin-bottom: calc(-1 * var(--space-8));
	}
	.hero__media img { object-position: 60% 30%; }
	.hero__media::after {
		background: linear-gradient(to top in oklab, var(--color-bg) 0%, oklch(0.145 0.006 270 / 0.6) 30%, transparent 62%),
			linear-gradient(to bottom in oklab, oklch(0.145 0.006 270 / 0.55), transparent 28%);
	}
	.hero__content { position: relative; z-index: 1; }
}

/* ---------- Kurs na telefonie: zdjęcie nad tytułem ---------- */
@media (max-width: 60rem) {
	.chero__side { display: contents; }
	.chero__media {
		order: -1;
		aspect-ratio: 2 / 1;
		margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left)));
		border-radius: 0;
	}
	.chero__media::after { border-radius: 0; }
	.bookcard { order: 0; }
}

@media (max-width: 60rem) {
	.chero { padding-top: 0; }
}

/* Mocniejsze przyciemnienie pod tekstem na szerokim ekranie (lead leży na jasnych ubraniach) */
@media (min-width: 44.0625rem) {
	.hero__media::after {
		background:
			linear-gradient(to top in oklab, var(--color-bg) 0%, oklch(0.145 0.006 270 / 0.55) 28%, transparent 60%),
			linear-gradient(to right in oklab, oklch(0.145 0.006 270 / 0.9) 0%, oklch(0.145 0.006 270 / 0.8) 42%, oklch(0.145 0.006 270 / 0.25) 72%, transparent 100%);
	}
}

/* ---------- Oferta produktu (pakiet) ---------- */
.offer-card {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--space-6);
	padding: var(--space-6);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.offer-card__list {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-body-lg);
}

.offer-card__list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.offer-card__list .icon { flex: none; margin-top: 0.2em; color: var(--color-accent-text); }

.offer-card__buy {
	display: grid;
	align-content: start;
	gap: var(--space-4);
	padding-left: var(--space-6);
	border-left: 1px solid var(--color-border);
}

.offer-card__notes {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
}

@media (max-width: 52rem) {
	.offer-card { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); }
	.offer-card__buy { padding-left: 0; padding-top: var(--space-5); border-left: 0; border-top: 1px solid var(--color-border); }
}

/* ---------- Sylwetki ---------- */
.profiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.profile {
	display: grid;
	align-content: start;
	gap: var(--space-2);
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
}

.profile__num {
	color: var(--color-accent-text);
	font: 700 var(--text-caption) / 1 var(--font-display);
	font-variant-numeric: tabular-nums;
}

.profile__name {
	margin-top: var(--space-3);
	font: 800 var(--text-h2) / 1.05 var(--font-display);
	letter-spacing: -0.02em;
}

.profile__meta { color: var(--color-text-tertiary); font-size: var(--text-ui); }
.profile__text { margin-top: var(--space-2); color: var(--color-text-secondary); text-wrap: pretty; }

@media (max-width: 52rem) {
	.profiles { grid-template-columns: minmax(0, 1fr); }
}

/* 6 kroków: 3 + 3 zamiast 4 + 2 */
@media (min-width: 60rem) {
	.psteps:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Pasek z komunikatem ---------- */
body.has-notice { --notice-h: 2.25rem; --header-h: calc(4rem + var(--notice-h)); }
body.has-notice .site-header__inner { height: 4rem; }

.notice-bar {
	height: var(--notice-h, 0);
	background: var(--color-accent-solid);
	color: var(--color-on-accent);
	font-size: var(--text-caption);
	font-weight: 600;
}

.notice-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	height: 100%;
	margin: 0 auto;
	white-space: nowrap;
	overflow: hidden;
}

.notice-bar__inner span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.notice-bar__inner > a,
.notice-bar__timer { flex: none; }

.notice-bar__timer {
	font-variant-numeric: tabular-nums;
}

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

@media (max-width: 44rem) {
	/* Przy odliczaniu brakuje miejsca na link, więc klikalny jest cały pasek. */
	.notice-bar { position: relative; }
	.notice-bar__inner:has(.notice-bar__timer) > a { font-size: 0; text-decoration: none; }
	.notice-bar__inner:has(.notice-bar__timer) > a .icon { display: none; }
	.notice-bar__inner:has(.notice-bar__timer) > a::after { content: ""; position: absolute; inset: 0; }
}

.notice-bar a {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- Wynajem: przykładowe zestawy (karty) + własny zestaw ---------- */
.kits {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kit {
	--tone: var(--color-text-tertiary);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: inset 0 0 0 1px var(--color-border);
	scroll-margin-top: calc(var(--header-h, 4rem) + var(--space-4));
}

.kit[data-tone="green"] { --tone: var(--green-400); }
.kit[data-tone="amber"] { --tone: var(--amber-400); }
.kit[data-tone="blue"]  { --tone: var(--blue-400); }

.kit__media {
	position: relative;
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: center;
	background:
		radial-gradient(120% 90% at 30% 20%, color-mix(in oklch, var(--tone) 22%, transparent), transparent 70%),
		var(--color-bg-alt);
	overflow: hidden;
}

.kit__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Delikatne przejście zdjęcia w kartę */
.kit__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 35%;
	background: linear-gradient(to top, var(--color-surface), transparent);
	pointer-events: none;
}

.kit__glyph { color: var(--tone); opacity: 0.9; }

.kit__body {
	display: grid;
	gap: var(--space-3);
	align-content: start;
	flex: 1;
	padding: var(--space-4) var(--space-5) var(--space-5);
	margin-top: calc(-1 * var(--space-5));
	position: relative;
}

.kit .course__kicker { color: var(--tone); }

.kit__title {
	font-size: var(--text-h3);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.kit__desc {
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	text-wrap: pretty;
}

.kit__spec,
.kit-own__groups {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-ui);
}

.kit__spec { padding-top: var(--space-3); border-top: 1px solid var(--color-border); }

.kit__spec li,
.kit-own__groups li {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	line-height: 1.35;
}

.kit__ic {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.75rem;
	background: color-mix(in oklch, var(--tone, var(--color-accent-text)) 14%, transparent);
	color: var(--tone, var(--color-accent-text));
}

.kit__bonus {
	display: flex;
	gap: var(--space-2);
	align-items: flex-start;
	justify-self: start;
	margin: 0;
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	background: color-mix(in oklch, var(--green-400) 12%, transparent);
	color: var(--green-400);
	font-size: var(--text-caption);
	font-weight: 600;
	line-height: 1.35;
}

.kit__bonus .icon { flex-shrink: 0; margin-top: 0.05em; }

.kit__foot { padding: 0 var(--space-5) var(--space-5); }
.kit__cta { width: 100%; justify-content: center; }

/* Własny zestaw – szeroki pasek pod kartami, dobrze widoczny */
.kit-own {
	--tone: var(--color-accent-text);
	display: grid;
	grid-template-columns: 1.3fr 1fr auto;
	gap: var(--space-6);
	align-items: center;
	margin-top: var(--space-5);
	padding: var(--space-6);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(80% 140% at 0% 0%, color-mix(in oklch, var(--color-accent-solid) 16%, transparent), transparent 60%),
		var(--color-surface);
	box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-accent-solid) 35%, var(--color-border));
}

.kit-own__text { display: grid; gap: var(--space-2); }
.kit-own__text .eyebrow { margin: 0; }

.kit-own__title {
	font-size: var(--text-h3);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.kit-own__desc { color: var(--color-text-secondary); text-wrap: pretty; }

.kit-own__groups { grid-template-columns: 1fr 1fr; column-gap: var(--space-4); }

.kit-own__actions {
	display: grid;
	gap: var(--space-3);
}

.kit-own__actions .button { justify-content: center; }

@media (max-width: 64rem) {
	.kit-own { grid-template-columns: 1fr 1fr; }
	.kit-own__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; }
}

@media (max-width: 44rem) {
	.kits {
		display: flex;
		gap: var(--space-3);
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	.kits::-webkit-scrollbar { display: none; }
	.kit { flex: 0 0 86%; scroll-snap-align: start; }
	.kit-own { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5); }
	.kit-own__actions { display: grid; }
}

.zfield[data-show-if][hidden] { display: none; }

/* Ceny w liście sprzętu */
.gear__list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-3);
}
.gear__price {
	flex-shrink: 0;
	color: var(--color-text);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.gear__prices {
	margin-top: var(--space-4);
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
}

/* Lista sprzętu jako kolumny – grupy różnej długości układają się bez dziur */
.gear {
	display: block;
	columns: 3 18rem;
	column-gap: var(--space-4);
}
.gear__group {
	break-inside: avoid;
	margin-bottom: var(--space-4);
}

/* ---------- Na skróty (pod hero na stronie głównej) ---------- */
.quick {
	padding: var(--space-5) 0 0;
}
.quick__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.quick__item {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	height: 100%;
	padding: var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
	color: var(--color-text);
	text-decoration: none;
	transition: box-shadow 160ms ease-out, transform 160ms ease-out;
}
.quick__item:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
	.quick__item:hover { box-shadow: inset 0 0 0 1px var(--color-border-strong); }
}
.quick__icon {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	background: color-mix(in oklch, var(--color-accent-solid) 14%, transparent);
	color: var(--color-accent-text);
}
.quick__text { display: grid; gap: 2px; min-width: 0; }
.quick__title { font-weight: 700; font-size: var(--text-ui); line-height: 1.25; }
.quick__sub { color: var(--color-text-secondary); font-size: var(--text-caption); line-height: 1.3; }

@media (max-width: 64rem) {
	.quick__list { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 44rem) {
	.quick__list {
		display: flex;
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	.quick__list::-webkit-scrollbar { display: none; }
	.quick__list li { flex: 0 0 72%; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
	.quick__item { transition: none; }
	.quick__item:active { transform: none; }
}

.empty-state__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin-top: var(--space-2);
}

/* ---------- Formularz: zdjęcia i oświadczenia ---------- */
.zfield--files { display: grid; gap: var(--space-3); }
.zdrop {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--space-1);
	padding: var(--space-5) var(--space-4);
	border-radius: var(--radius-md);
	border: 1.5px dashed var(--color-border-strong);
	background: var(--color-bg);
	color: var(--color-text-secondary);
	text-align: center;
	cursor: pointer;
	transition: border-color 160ms ease-out, background-color 160ms ease-out;
}
.zdrop .icon { color: var(--color-accent-text); }
.zdrop__title { color: var(--color-text); font-weight: 600; }
.zdrop__hint { font-size: var(--text-caption); }
.zdrop__input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}
.zdrop:focus-within { outline: 2px solid var(--color-accent-solid); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
	.zdrop:hover { border-color: var(--color-accent-solid); }
}
.zthumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.zthumbs:empty { display: none; }
.zthumb {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border);
}
.zthumb img { width: 100%; height: 100%; object-fit: cover; }
.zthumb__rm {
	position: absolute;
	top: 4px;
	right: 4px;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 0;
	border-radius: 50%;
	background: oklch(0 0 0 / 0.65);
	color: #fff;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}
.zthumb__rm::after { content: ""; position: absolute; inset: -8px; }
.zfield__error { margin: 0; color: oklch(0.75 0.16 25); font-size: var(--text-caption); }

.zfield--consent { grid-column: 1 / -1; }
.zconsent {
	display: grid;
	grid-template-columns: 1.25rem 1fr;
	gap: var(--space-3);
	align-items: start;
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	line-height: 1.45;
	cursor: pointer;
}
.zconsent input {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.1em 0 0;
	accent-color: var(--color-accent-solid);
}
.zconsent a { color: var(--color-accent-text); }

/* ==========================================================================
   Na gotowe (2.15.0): pakiety z ceną, dwie karty wynajmu
   ========================================================================== */
.kits--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kits--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.kit__price {
	margin: 0;
	color: var(--color-text);
	font: 700 var(--text-body) / 1.2 var(--font-display);
	font-variant-numeric: tabular-nums;
}

.kit__mode {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin: 0;
	color: var(--color-text);
	font-weight: 600;
	font-size: var(--text-ui);
	line-height: 1.4;
}

.kit__mode .icon { flex-shrink: 0; margin-top: 0.1em; color: var(--tone); }

.kit__note {
	margin: 0;
	color: var(--color-text-secondary);
	font-size: var(--text-caption);
	line-height: 1.5;
	text-wrap: pretty;
}

/* Karty pakietów: bez zdjęcia, cena na górze */
.kit--package .kit__body {
	margin-top: 0;
	padding-top: var(--space-5);
	border-top: 2px solid var(--tone);
}
.kit--featured {
	box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--tone) 55%, var(--color-border));
}
.kit__amount {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-3);
	margin: 0;
}
.kit__amount-value {
	font: 800 clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem) / 1 var(--font-display);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.kit__amount-note {
	color: var(--color-text-tertiary);
	font-size: var(--text-caption);
	font-variant-numeric: tabular-nums;
}
.section--kits .gear__prices { margin-top: var(--space-5); }
.gear--pricelist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 44rem) { .gear--pricelist { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 64rem) {
	.kits--packages { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }
}
@media (max-width: 44rem) {
	/* Pakiety jeden pod drugim – ceny łatwiej porównać niż w przewijanym pasku */
	.kits--packages {
		display: grid;
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}
	.kits--packages .kit { min-width: 0; flex: none; }
}

/* ==========================================================================
   Czat Botpress (2.16.0): własny przycisk motywu
   Domyślnie lewy dolny róg – prawy zajmuje pływający koszyk FunnelKit.
   ========================================================================== */
.chat-fab {
	position: fixed;
	bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
	z-index: 40;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 3rem;
	padding: 0 var(--space-5) 0 var(--space-4);
	border: 1px solid oklch(1 0 0 / 0.14);
	border-radius: var(--radius-pill);
	background: var(--color-accent-solid);
	color: var(--color-on-accent);
	font: 600 var(--text-ui) / 1 var(--font-body);
	box-shadow: 0 10px 30px -10px oklch(0 0 0 / 0.6);
	cursor: pointer;
	transition: transform 150ms var(--ease-ui), background-color 150ms var(--ease-ui);
}
.chat-fab:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
	.chat-fab:hover { background: var(--color-accent-solid-hover); }
}
.chat-fab--left { left: calc(var(--space-5) + env(safe-area-inset-left)); }
.chat-fab--right { right: calc(var(--space-5) + env(safe-area-inset-right)); }
/* Nad pływającym koszykiem FunnelKit (ok. 60 px przycisku + odstęp). */
.chat-fab--right-raised { right: calc(var(--space-5) + env(safe-area-inset-right)); bottom: calc(var(--space-5) + 4.5rem + env(safe-area-inset-bottom)); }
.chat-fab.is-loading { opacity: 0.75; cursor: progress; }
/* Otwarte menu mobilne zakrywa przycisk – chowamy go. */
.site-header.is-open ~ .chat-fab, body.nav-open .chat-fab { display: none; }
@media (max-width: 44rem) {
	.chat-fab { width: 3.25rem; min-height: 3.25rem; padding: 0; justify-content: center; }
	.chat-fab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Własny przycisk zastępuje okrągły przycisk Botpressa. */
.bpFab, #bp-web-widget-container .bpFab { display: none !important; }

/* Tabela porównania pakietów (versus) */
.compare--versus .compare__table tbody th { width: 55%; font-weight: 500; }
.compare--versus .compare__table td { text-align: center; }
.compare--versus .compare__head { text-align: center; }
@media (max-width: 44rem) {
	.compare--versus .compare__table tbody th { width: 50%; }
}
.compare--versus .compare__table td .icon { display: block; margin-inline: auto; }

/* Lista w pasku (np. dzień próbny) */
.order-band__list { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.order-band__list li { display: flex; align-items: center; gap: var(--space-2); }
.order-band__list .icon { flex-shrink: 0; color: var(--green-400); }

/* Stare menu mobilne efor (fragment „Mobile Menu Setup” w Code Snippets) – w tym motywie niepotrzebne. */
.efor-custom-mobile-menu { display: none !important; }
/* Ukryty tekst w przycisku karty nie może wychodzić poza przewijaną listę (poszerzał stronę na telefonie). */
.kit__cta { position: relative; }

/* Karty sklepu: tytuł w skali karty, nie nagłówka (globalne h3 z wtyczek go powiększało). */
.pcard h3.pcard__name {
	margin: 0;
	font: 700 1.0625rem / 1.3 var(--font-display) !important;
	letter-spacing: -0.01em;
}

/* Akademia LMS (panel kursanta, lista kursów, kurs, lekcje) ma białe karty i ciemne etykiety –
   na tych stronach treść dostaje jasne tło, żeby nic nie znikało na ciemnym motywie. */
body:is(.page-template-academy-canvas, .post-type-archive-academy_courses, .tax-academy_courses_category, .tax-academy_courses_tag, .single-academy_courses, .single-academy_lessons, .single-academy_quiz) .site-main:not(:has(.academy-login-form-wrapper)) {
	--color-bg: var(--gray-50);
	--color-bg-alt: oklch(0.94 0.004 270);
	--color-surface: oklch(1 0 0);
	--color-surface-hover: oklch(0.94 0.004 270);
	--color-border: oklch(0.88 0.006 270);
	--color-border-strong: oklch(0.80 0.008 270);
	--color-text: var(--gray-950);
	--color-text-secondary: var(--gray-700);
	--color-text-tertiary: oklch(0.50 0.010 270);
	--color-accent-text: oklch(0.55 0.17 32);
	color-scheme: light;
	background: var(--color-bg);
	color: var(--color-text);
	padding-block: var(--space-8);
}

/* Logowanie, rejestracja i reset hasła Akademii – karta w stylu strony zamiast fioletowych formularzy wtyczki */
:is(.academy-login-form-wrapper, .academy-password-reset-form-wrapper, .academy-reg-form) {
	width: min(100% - 2rem, 26rem);
	margin: var(--space-7) auto;
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	color: var(--color-text);
}

:is(.academy-login-form-heading, .academy-password-reset-form-heading) {
	margin: 0 0 var(--space-5);
	font: 700 var(--text-h3, 1.5rem) / 1.15 var(--font-display, inherit);
	text-wrap: balance;
	color: var(--color-text);
}

:is(.academy-login-form, .academy-password-reset-form, .academy-reg-form) .academy-form-group {
	margin-bottom: var(--space-4);
}

:is(.academy-login-form, .academy-password-reset-form, .academy-reg-form) label {
	display: block;
	margin-bottom: var(--space-2);
	color: var(--color-text-secondary);
	font-size: var(--text-ui, 0.875rem);
}

:is(.academy-login-form, .academy-password-reset-form, .academy-reg-form) .academy-form-group__forgetmenot label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
}

:is(.academy-login-form, .academy-password-reset-form, .academy-reg-form) .academy-form-control {
	width: 100%;
	min-height: 3rem;
	padding: 0 var(--space-4);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md, 0.75rem);
	background: var(--color-bg);
	color: var(--color-text);
	font-size: 1rem; /* 16 px – iOS nie przybliża strony przy wpisywaniu */
}

:is(.academy-login-form, .academy-password-reset-form, .academy-reg-form) .academy-form-control:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 0;
	border-color: transparent;
}

:is(.academy-login-form, .academy-password-reset-form, .academy-reg-form) .academy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 3rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-accent-solid);
	color: var(--color-on-accent);
	font: 600 1rem / 1 var(--font-body, inherit);
	cursor: pointer;
	transition-property: background-color, scale;
	transition-duration: 150ms;
}

:is(.academy-login-form, .academy-password-reset-form, .academy-reg-form) .academy-btn:hover {
	background: var(--color-accent-solid-hover);
}

:is(.academy-login-form, .academy-password-reset-form, .academy-reg-form) .academy-btn:active {
	scale: 0.96;
}

:is(.academy-login-form-info, .academy-password-reset-form-info),
.academy-form-text-link {
	color: var(--color-text-secondary);
	font-size: var(--text-ui, 0.875rem);
}

:is(.academy-login-form-info, .academy-password-reset-form-info) a,
.academy-form-text-link {
	color: var(--color-accent-text);
}

.academy-login-form .toggle-password {
	color: var(--color-text-tertiary);
}

/* ---------- Akademia LMS: kolory marki, układ panelu, odtwarzacz lekcji ---------- */
body {
	/* Akademia ma własne zmienne – fiolet zamieniamy na koral (ciemniejszy, żeby biały napis na przycisku był czytelny) */
	--academy-primary-color: oklch(0.56 0.19 32);
	--academy-secondary-color: oklch(0.95 0.03 32);
	--academy-primary-font: "Inter", ui-sans-serif, system-ui, sans-serif;
}

/* Panel kursanta był przyklejony do lewej krawędzi na szerokich ekranach */
.academy-frontend-dashboard {
	margin-inline: auto;
}

/* Na jasnych stronach Akademii ciemne wygaszenie pod nagłówkiem wyglądało jak brudny pas */
body:is(.page-template-academy-canvas, .post-type-archive-academy_courses, .tax-academy_courses_category, .tax-academy_courses_tag, .single-academy_courses) .site-header::after {
	opacity: 0;
}

/* Pozycja menu „Sklep” w panelu nie ma nazwy we wtyczce (wyświetlało się „false”) */
.academy-dashboard-menu__item-store-dashboard .academy-dashboard-menu__item-label {
	font-size: 0;
}

.academy-dashboard-menu__item-store-dashboard .academy-dashboard-menu__item-label::after {
	content: "Moje zamówienia i pliki";
	font-size: 0.875rem;
}

/* Odtwarzacz lekcji: ciemny tekst na białym (napisy były prawie niewidoczne), bez pływającego koszyka i czatu nad filmem */
body.academy-course-single-lessons {
	background: oklch(1 0 0);
	color: var(--academy-text-color, #111);
}

body.academy-course-single-lessons :is(#fkcart-floating-toggler, #bp-web-widget-container, .bpFab, .bpChatContainer) {
	display: none !important;
}

/* Akademia zamienia napisy na „Każde Słowo Wielką Literą” (Przejdź Do Kursu, Od Zera Do Seta!) – zostawiamy zwykłą pisownię */
:is(.academy-btn, [class*="academy-course__title"], [class*="academy-course__title"] a, [class*="academy-courses__title"] a, .academy-mycourse__content h3 a) {
	text-transform: none;
}

/* Spis lekcji: wtyczka justuje tytuły („Importowanie    i    katalogowanie”) */
.academy-learn-page-topics-lesson-item__text {
	text-align: start;
}

/* ---------- Terminy kursu (warianty WooCommerce) ---------- */
.bookcard__alt,
.bookcard__more {
	display: block;
	margin-top: var(--space-3);
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	text-align: center;
	text-underline-offset: 3px;
}

.bookcard__more {
	color: var(--color-accent-text);
	font-weight: 600;
}

.terms {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.term {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.term__when {
	display: grid;
	gap: var(--space-2);
	min-width: min(100%, 16rem);
}

.term__date {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font: 700 var(--text-h3) / 1.2 var(--font-display);
}

.term__date .icon {
	flex: none;
	color: var(--color-accent-text);
}

.term__seats {
	display: grid;
	gap: var(--space-2);
	max-width: 16rem;
	margin: 0;
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.term__seats.is-low {
	color: var(--amber-400);
}

.term__seats.is-low .bookcard__meter span {
	background: var(--amber-400);
}

.term__buy {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.term--full {
	opacity: 0.6;
}

.term__soldout {
	margin: 0;
	color: var(--color-text-tertiary);
	font-weight: 600;
}

/* Stare ustawienia strony z Elementora (np. białe tło na /szkolenia-grupowe/) nie mogą zmieniać tła podstron motywu. */
body.zdj-landing {
	background-color: var(--color-bg) !important;
}

/* Nagłówki usług: zamiast przypadkowego zdjęcia pokazujemy efekt usługi. */
.phero__media.mock,
.phero__media.mock--film {
	aspect-ratio: 4 / 3;
}

.mock {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 7%;
	background:
		radial-gradient(70% 70% at 80% 10%, oklch(0.70 0.185 32 / 0.28), transparent 70%),
		var(--color-surface);
	user-select: none;
}

.mock__cap {
	margin: 0 0 3cqi;
	font: 700 4.6cqi / 1.2 var(--font-display);
	text-wrap: balance;
}

.mock__note {
	padding: 3cqi 4cqi;
	border-radius: 4cqi;
	background: oklch(0 0 0 / 0.45);
	box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.12);
}

.mock__note + .mock__note {
	margin-top: 2.2cqi;
}

.mock__note:nth-of-type(3) { opacity: 0.8; transform: scale(0.98); }
.mock__note:nth-of-type(4) { opacity: 0.55; transform: scale(0.96); }

.mock__note b {
	display: block;
	color: var(--color-accent-text);
	font-size: 3.3cqi;
	font-weight: 600;
}

.mock__note span {
	display: block;
	margin-top: 0.6cqi;
	font-size: 3.8cqi;
}

.mock__cal {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1.2cqi;
}

.mock__cal span {
	display: grid;
	place-items: center;
	height: 7.4cqi;
	border-radius: 2cqi;
	background: oklch(1 0 0 / 0.04);
	color: var(--color-text-tertiary);
	font-size: 3cqi;
	font-variant-numeric: tabular-nums;
}

.mock__cal .o { background: var(--color-accent-solid); color: var(--color-on-accent); font-weight: 600; }
.mock__cal .m { background: var(--color-border-strong); color: var(--color-text); }
.mock__cal .r { background: var(--amber-400); color: var(--gray-975); font-weight: 600; }

.mock__legend {
	display: flex;
	gap: 4cqi;
	margin: 3cqi 0 0;
	padding: 0;
	color: var(--color-text-secondary);
	font-size: 3.2cqi;
	list-style: none;
}

.mock__legend li {
	display: flex;
	align-items: center;
	gap: 1.2cqi;
}

.mock__legend li::before {
	content: "";
	width: 2.4cqi;
	height: 2.4cqi;
	border-radius: 50%;
}

.mock__legend .o::before { background: var(--color-accent-solid); }
.mock__legend .m::before { background: var(--color-border-strong); }
.mock__legend .r::before { background: var(--amber-400); }

.mock--film video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mock__bigplay {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	border: 0;
	border-radius: 50%;
	background: var(--color-accent-solid);
	color: var(--color-on-accent);
	cursor: pointer;
	transform: translate(-50%, -50%);
}

.mock__bigplay svg {
	fill: currentColor;
}

.mock__bigplay:active {
	transform: translate(-50%, -50%) scale(0.96);
}

.mock--film.is-playing .mock__bigplay {
	opacity: 0;
}

.mock--film.is-playing .mock__bigplay:focus-visible {
	opacity: 1;
}

/* Główny przycisk sklepu w kolorze strony, a nie fioletowy z WooCommerce. */
body.woocommerce button.button.alt,
body.woocommerce a.button.alt {
	background: var(--color-accent-solid);
	color: var(--color-on-accent);
}

@media (hover: hover) and (pointer: fine) {
	body.woocommerce button.button.alt:hover,
	body.woocommerce a.button.alt:hover {
		background: var(--color-accent-solid-hover);
		color: var(--color-on-accent);
	}
}

/* Okienko promocji: nie blokuje strony, więc bez przyciemnienia tła. */
.promo {
	position: fixed;
	inset: auto auto var(--space-4) var(--space-4);
	z-index: 99990;
	display: grid;
	gap: var(--space-3);
	width: min(23rem, calc(100vw - 2rem));
	padding: var(--space-5);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: inset 0 0 0 1px var(--color-border-strong), 0 24px 60px -20px oklch(0 0 0 / 0.8);
	opacity: 0;
	transform: translateY(1rem);
}

.promo[hidden] { display: none; }

.promo.is-open {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: no-preference) {
	.promo { transition: opacity 250ms var(--ease-out), transform 300ms var(--ease-out); }
}

@media (prefers-reduced-motion: reduce) {
	.promo { transform: none; transition: opacity 200ms ease; }
}

/* Mocniej niż .woocommerce a.button – popup pojawia się też na stronach sklepu. */
body .promo a.button.button--primary {
	display: flex;
	min-height: 2.75rem;
	padding: 0 var(--space-5);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	background: var(--color-accent-solid);
	color: var(--color-on-accent);
	font: 600 var(--text-ui) / 1 var(--font-body);
	text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
	body .promo a.button.button--primary:hover { background: var(--color-accent-solid-hover); }
}

.promo__close {
	position: absolute;
	top: 0.25rem;
	right: 0.25rem;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	background: none;
	color: var(--color-text-secondary);
	cursor: pointer;
}

.promo__title {
	margin: 0;
	padding-right: var(--space-6);
	font: 700 var(--text-h3) / 1.2 var(--font-display);
	text-wrap: balance;
}

.promo__text {
	margin: 0;
	color: var(--color-text-secondary);
	text-wrap: pretty;
}

.promo__code {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: 2.75rem;
	padding: var(--space-2) var(--space-4);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-md, 0.75rem);
	background: none;
	color: var(--color-text);
	font: inherit;
	cursor: pointer;
}

.promo__code strong {
	letter-spacing: 0.04em;
	overflow-wrap: anywhere;
	text-align: start;
}

.promo__code span {
	flex: none;
	color: var(--color-accent-text);
	font-size: var(--text-ui);
	font-weight: 600;
}

@media (max-width: 44rem) {
	.promo {
		inset: auto 0 0;
		width: auto;
		padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	}
}

/* Harmonogram wpłat rozwija się w karcie terminu, którego dotyczy. */
.term__plan {
	flex: 1 0 100%;
	border-top: 1px solid var(--color-border);
}

.term__plan-toggle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	min-height: 2.75rem;
	padding-top: var(--space-3);
	font-size: var(--text-ui);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.term__plan-toggle::-webkit-details-marker {
	display: none;
}

.term__plan-hint {
	color: var(--color-text-tertiary);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.term__plan-toggle .icon {
	margin-inline-start: auto;
	color: var(--color-text-tertiary);
}

.term__plan[open] .term__plan-toggle .icon {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: no-preference) {
	.term__plan-toggle .icon {
		transition: transform 250ms var(--ease-out);
	}
	.term__plan::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size 300ms var(--ease-out), content-visibility 300ms allow-discrete;
	}
	.term__plan[open]::details-content {
		block-size: auto;
	}
}

.payplan,
.payplan__total {
	max-width: 32rem;
}

.payplan {
	display: grid;
	margin: var(--space-2) 0 0;
	padding: 0;
	list-style: none;
}

.payplan__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--space-4);
	padding: var(--space-3) 0;
	border-top: 1px solid var(--color-border);
}

.payplan__row:first-child {
	border-top: 0;
	padding-top: 0;
}

.payplan__what {
	font-weight: 600;
}

.payplan__when {
	grid-row: 2;
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	font-variant-numeric: tabular-nums;
}

.payplan__amount {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.payplan__total {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	margin: 0;
	padding: var(--space-3) 0;
	border-top: 1px solid var(--color-border-strong);
	font-variant-numeric: tabular-nums;
}

.payplan__total strong {
	white-space: nowrap;
}

.payplan__note {
	margin: 0;
	padding-bottom: var(--space-1);
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	text-wrap: pretty;
}

.terms__note {
	margin: var(--space-5) 0 0;
	color: var(--color-text-secondary);
	font-size: var(--text-ui);
	text-wrap: pretty;
}

.terms__note a,
.bookcard__note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

@media (max-width: 44rem) {
	.term__buy,
	.term__buy .button {
		width: 100%;
	}
}