/* fitME - baza: tokeny, reset, typografia, przyciski, kontener.
 * Wartości z makiety „FitME Sklep v2” (README: Design tokens). Baza z prefiksem
 * body.fm-theme (0,1,1), żeby wygrywała z resztkami stylów rodzica. */

:root {
	--ink: #141412;
	--paper: #f4f3ee;
	--card: #fff;
	--line: #e1e0da;
	--line-soft: #efeee8;
	--sage: #bcd4a7;
	--sage-ink: #3d5230;
	--sage-deep: #26301e;
	--red: #a80a1e;
	--muted: #60605e;
	--muted-2: #8c8c87;
	--body: #30302f;
	--on-dark: #c9c8c1;
	--tile-dark: #26261f;
	--star: #e0a421;
	--font: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
	--gut: clamp(16px, 4vw, 28px);
	--max: 1360px;
}

body.fm-theme {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
.fm-theme *, .fm-theme *::before, .fm-theme *::after { box-sizing: border-box; }
.fm-theme img { max-width: 100%; height: auto; }
.fm-theme a { color: var(--ink); text-decoration: none; }
.fm-theme a:hover { color: var(--red); }
.fm-theme :where(button) { font-family: var(--font); color: inherit; }
.fm-theme input, .fm-theme select, .fm-theme textarea { font-family: var(--font); }
.fm-theme h1, .fm-theme h2, .fm-theme h3, .fm-theme h4 { font-family: var(--font); color: inherit; margin: 0; }
.fm-theme p { margin: 0; }
.fm-theme [hidden] { display: none !important; }
.fm-theme .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }

.fm-main { display: block; }

/* Kontener: max 1360, padding boczny clamp(16px, 4vw, 28px). */
.fm-wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.fm-pt14 { padding-top: 14px; }
.fm-pt28 { padding-top: 28px; }

/* Nagłówki */
.fm-h1 { margin: 0; font-size: clamp(32px, 3.8vw, 48px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.fm-h2 { margin: 0; font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; text-wrap: pretty; }
.fm-h2--lg { font-size: clamp(26px, 2.8vw, 38px); }
.fm-h2--sm { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.02em; }
.fm-h2--xs { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em; }
.fm-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.fm-kicker--11 { letter-spacing: 0.12em; }
.fm-muted { color: var(--muted); }

/* Gwiazdki */
.fm-stars { color: var(--star); font-size: 12px; letter-spacing: 1px; line-height: 1; }
.fm-stars--lg { font-size: 16px; letter-spacing: 2px; }
.fm-stars--y { font-size: 17px; letter-spacing: 2px; }

/* Przyciski (pigułki 100px). Wymiary 1:1 z makiety - obrys wliczony tak jak tam. */
.fm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 100px; font-family: var(--font); font-weight: 700; cursor: pointer; text-align: center; border: 0; background: transparent; color: var(--ink); transition: background 200ms ease, color 200ms ease, border-color 200ms ease; white-space: nowrap; text-decoration: none; line-height: normal; }
.fm-theme a.fm-btn, .fm-theme a.fm-btn:hover { color: var(--ink); }
.fm-btn--dark { background: var(--ink); color: #fff; }
.fm-theme .fm-btn--dark, .fm-theme a.fm-btn--dark, .fm-theme a.fm-btn--dark:hover { color: #fff; }
.fm-btn--dark:hover { background: var(--red); }
.fm-btn--sage { background: var(--sage); color: var(--ink); }
.fm-theme .fm-btn--sage, .fm-theme a.fm-btn--sage, .fm-theme a.fm-btn--sage:hover { color: var(--ink); }
.fm-theme .fm-btn--sage:hover { background: #fff; color: var(--ink); }
.fm-btn--outline { border: 1px solid var(--ink); background: transparent; color: var(--ink); }
.fm-theme a.fm-btn--outline { color: var(--ink); }
.fm-theme .fm-btn--outline:hover, .fm-theme a.fm-btn--outline:hover { background: var(--ink); color: #fff; }
.fm-btn--ghost-light { border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; background: transparent; }
.fm-theme .fm-btn--ghost-light, .fm-theme a.fm-btn--ghost-light, .fm-theme a.fm-btn--ghost-light:hover { color: #fff; }
.fm-btn--ghost-light:hover { border-color: #fff; }
.fm-btn--xl { padding: 18px 30px; font-size: 16px; }
.fm-btn--ghost-light.fm-btn--xl { padding: 17px clamp(16px, 4vw, 28px); }
.fm-btn--lg { padding: 16px 26px; font-size: 15px; }
.fm-btn--l2 { padding: 15px 24px; font-size: 15px; }
.fm-btn--outline.fm-btn--l2 { padding: 14px 22px; }
.fm-btn--md { padding: 12px 20px; font-size: 14px; }
.fm-btn--sm2 { padding: 13px 20px; font-size: 14px; }
.fm-btn--dark.fm-btn--sm2 { padding: 14px 22px; }
.fm-btn--xs { padding: 10px 16px; font-size: 13px; }
.fm-btn--block { width: 100%; padding: 16px; font-size: 15px; }
.fm-btn--more { padding: 15px clamp(16px, 4vw, 28px); font-size: 15px; }

/* Link z podkreśleniem (sekcje strony głównej). */
.fm-ulink { font-size: 14px; font-weight: 700; border-bottom: 2px solid var(--ink); padding: 0 0 3px; line-height: 1.2; }

/* Proza (treść edytora, pola WYSIWYG). */
.fm-prose { font-size: 16px; line-height: 1.7; color: var(--body); }
.fm-prose > * + * { margin-top: 1em; }
.fm-prose h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); margin-top: 1.2em; }
.fm-prose h3 { font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--ink); margin-top: 1.1em; }
.fm-prose h2:first-child, .fm-prose h3:first-child { margin-top: 0; }
.fm-prose ul, .fm-prose ol { padding-left: 1.3em; margin: 0; }
.fm-prose li + li { margin-top: 0.3em; }
.fm-prose a { text-decoration: underline; }
.fm-prose strong { color: var(--ink); }
.fm-prose img { border-radius: 16px; height: auto; max-width: 100%; }

/* Treść z edytora bywa z atrybutami width/inline (stare wpisy) - tniemy je,
   żeby zdjęcia, podpisy i długie słowa mieściły się w kolumnie tekstu. */
.fm-prose { overflow-wrap: break-word; }
.fm-prose > * { max-width: 100%; }
.fm-prose figure, .fm-prose .wp-caption { width: auto !important; max-width: 100% !important; margin-left: 0; margin-right: 0; }
.fm-prose figure img, .fm-prose .wp-caption img { width: auto; display: block; }
.fm-prose figcaption, .fm-prose .wp-caption-text { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 8px 0 0; text-align: left; }
.fm-prose iframe, .fm-prose video, .fm-prose embed, .fm-prose object { max-width: 100%; }
.fm-prose .alignleft { float: left; margin: 4px 24px 16px 0; }
.fm-prose .alignright { float: right; margin: 4px 0 16px 24px; }
.fm-prose .aligncenter { margin-left: auto; margin-right: auto; }
.fm-prose .alignleft, .fm-prose .alignright { max-width: 50%; }
.fm-prose .wp-block-image, .fm-prose .wp-block-embed { margin-left: 0; margin-right: 0; }
.fm-prose pre { overflow-x: auto; max-width: 100%; }

.fm-prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fm-prose th, .fm-prose td { border-bottom: 1px solid var(--line-soft); padding: 8px 10px; text-align: left; }
.fm-prose--17 { font-size: 17px; line-height: 1.7; }
.fm-prose--17 > * + * { margin-top: 18px; }

/* Wybór tekstu / focus */
.fm-theme :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.fm-theme *, .fm-theme *::before, .fm-theme *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}