/*
 * Tokeny MM + szkielet sekcji. Jedyne miejsce z wartościami.
 *
 * Wartości z Figmy „Valused (MM)” (plik SkzbZjqxrEmXXt8vs2IbUT, strona 42:1456, odczyt
 * 2026-10-13). Desktop: ramka 1680 px, treść 1368 px. Mobile: ramka 440 px, rynna 16 px.
 * Skale płynne liczone liniowo między szerokością 440 a 1680 px, max = wartość desktopu.
 *
 * Sloty --ast-global-color-0..8 nadpisujemy tu plikowo: child ładuje się po Astrze, więc
 * te wartości wygrywają z paletą z Kastomizera.
 */

@font-face {
	font-family: 'Poppins';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/poppins-400-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/poppins-400-italic-latin.woff2') format('woff2');
	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: 'Poppins';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/poppins-300-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/poppins-300-latin.woff2') format('woff2');
	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: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/poppins-400-latin.woff2') format('woff2');
	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: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/poppins-500-latin.woff2') format('woff2');
	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: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/poppins-600-latin.woff2') format('woff2');
	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: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/poppins-700-latin.woff2') format('woff2');
	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;
}

/* Zamiennik na czas ładowania Poppinsa: Arial z metrykami Poppinsa, żeby podmiana
   fontu (font-display: swap) nie przestawiała wierszy i nie dawała CLS. */
@font-face {
	font-family: 'Poppins Fallback';
	src: local('Arial');
	size-adjust: 113.79%;
	ascent-override: 92.33%;
	descent-override: 30.78%;
	line-gap-override: 8.79%;
}

:root {
	/* Paleta: sloty Astry. Węzeł w nawiasie to źródło w Figmie. */
	--ast-global-color-0: #03873b; /* marka: przyciski; Figma #039d44 (80:68) przyciemnione do WCAG AA, biały tekst 4,63:1 (decyzja Rafała 2026-10-15) */
	--ast-global-color-1: #007935; /* ciemna zieleń: eyebrow (80:85), hover przycisku */
	--ast-global-color-2: #173128; /* nagłówki i tekst ciemny (80:86) */
	--ast-global-color-3: #52645d; /* tekst: lead, przypisy (80:27, 80:110) */
	--ast-global-color-4: #ffffff;
	--ast-global-color-5: #f3f1e9; /* tło beżowe: „Nasza idea” (80:83) */
	--ast-global-color-6: #2a7648; /* tło zielone: „Dlaczego Valused” (80:3) */
	--ast-global-color-7: #d9ded7; /* obramowanie filtra (80:118) */
	--ast-global-color-8: #003a70; /* granat: „Gdzie kupić” (80:40) */

	/* Kontener Astry na tę samą szerokość treści co sekcje MM. */
	--ast-normal-container-width: 1368px;

	/* Kolory: nazwy znaczeniowe na slotach Astry */
	--mm-color-primary:       var(--ast-global-color-0);
	--mm-color-primary-hover: var(--ast-global-color-1);
	--mm-color-heading:       var(--ast-global-color-2);
	--mm-color-text:          var(--ast-global-color-3);
	--mm-color-bg:            var(--ast-global-color-4);
	--mm-color-bg-soft:       var(--ast-global-color-5);
	--mm-color-bg-dark:       var(--ast-global-color-6);
	--mm-color-bg-bar:        var(--ast-global-color-2); /* pasek kontaktowy nad nagłówkiem */
	--mm-color-bg-subtle:     var(--ast-global-color-7);
	--mm-color-border:        var(--ast-global-color-7);
	--mm-color-accent:        var(--ast-global-color-8);
	--mm-color-error:         #c0392b; /* poza paletą marki celowo */

	/* Kolory pomocnicze z projektu, poza dziewięcioma slotami */
	--mm-color-eyebrow:      var(--ast-global-color-1);
	--mm-color-ink:          #102d23; /* aktywny filtr (80:116) */
	--mm-color-text-soft:    #4f625b; /* opis karty produktu (80:154) */
	--mm-color-text-filter:  #4a5c55; /* nieaktywny filtr (80:119) */
	--mm-color-note:         #6b7873; /* uwaga pod kartami (80:131) */
	--mm-color-legal:        #0d0d0d; /* „To jest lek…”, przypisy (80:112) */
	--mm-color-mint:         #86cf9c; /* eyebrow na ciemnym tle (80:5) */
	--mm-color-mint-light:   #8dd5a2; /* kursywa i numery na zielonym (80:8) */
	--mm-color-check:        #74d18c; /* znaczniki w hero (80:73) */
	--mm-color-navy-link:    #00509d; /* linki i etykiety w stopce (80:180) */
	--mm-color-navy-soft:    #b9d1e8; /* opisy linków na granacie (80:49) */
	--mm-color-footer-bg:    #f3f8ff; /* stopka (80:177) */
	--mm-color-badge-border: rgb(20 50 40 / 25%); /* znacznik na karcie (80:151) */
	--mm-color-card-1:       #e4f4e7; /* karty produktów od lewej (80:127…80:124) */
	--mm-color-card-2:       #e4ecf7;
	--mm-color-card-3:       #e6f0e8;
	--mm-color-card-4:       #fff0e7;
	--mm-color-tile:         #eef1ec; /* kafel artykułu (80:32) */
	--mm-color-tile-sand:    #f4eee4; /* kafel „Wkrótce” (80:36) */
	--mm-color-tile-sand-text: #76543c;
	--mm-gradient-tile:      linear-gradient(144deg, #007935 0%, #0b452e 100%); /* wyróżniony kafel (80:28) */
	--mm-color-nav:          #686868; /* menu na białym tle (80:227) */
	--mm-color-przypisy-tytul: #000000; /* „Przypisy” (80:176) */
	--mm-color-logo:         #287e45; /* logo na białym tle (80:221) */
	--mm-color-ink-soft:     #2f2f2f; /* tytuły cech produktu (80:249) */
	--mm-color-wybor:        #489348; /* podkreślenie wybranego produktu (80:390) */
	--mm-line-wybor:         #d2d2d2; /* separatory logotypów (80:385) */
	--mm-line-ziola:         #cecece; /* separatory składników na karcie (80:262) */

	/* Produkty (80:191): karta, akcent ikon, hasło, dawkowanie, kółko cechy. */
	--mm-produkt-valused-karta:   var(--mm-color-card-1);        /* 80:244 */
	--mm-produkt-valused-akcent:  var(--mm-color-meta);          /* 80:265, „2x” 80:376 */
	--mm-produkt-valused-haslo:   #499346;                       /* 80:253 */
	--mm-produkt-valused-dawka:   #277e46;                       /* 80:247 */
	--mm-produkt-valused-kolko:   rgb(0 142 73 / 10%);           /* 80:264 */
	--mm-produkt-noc-karta:       var(--mm-color-card-2);        /* 80:281 */
	--mm-produkt-noc-akcent:      var(--mm-color-navy-link);     /* 80:323, „2x” 80:327 */
	--mm-produkt-noc-haslo:       #244585;                       /* 80:320 */
	--mm-produkt-noc-dawka:       #0a3b6d;                       /* 80:315 */
	--mm-produkt-noc-kolko:       rgb(228 236 247 / 39%);        /* 80:321 */
	--mm-produkt-plyn-karta:      rgb(230 240 232 / 78%);        /* 80:245 */
	--mm-produkt-plyn-akcent:     #2b7d46;                       /* 80:298 */
	--mm-produkt-control-karta:   rgb(255 240 231 / 81%);        /* 80:282 */
	--mm-produkt-control-akcent:  #e58b5f;                       /* 80:357 */
	--mm-produkt-control-haslo:   #dc6529;                       /* 80:353 */
	--mm-produkt-control-kolko:   rgb(255 243 236 / 59%);        /* 80:354 */
	--mm-produkt-control-ziola:   #f0d9cb;                       /* 80:346 */
	--mm-line-on-dark:       rgb(255 255 255 / 18%); /* linia pod nagłówkiem na zdjęciu (80:170) */
	--mm-line-on-light:      rgb(2 2 2 / 18%);       /* linia pod nagłówkiem na białym (80:233) */
	--mm-line-menu:          rgb(255 255 255 / 16%); /* separatory menu mobilnego (80:737) */
	--mm-backdrop:           rgb(0 0 0 / 45%);       /* tło pod menu mobilnym (80:723) */
	--mm-line-subtle:        rgb(0 0 0 / 8%);        /* linie między składnikami (80:98) */
	--mm-color-meta:         #41833c; /* czas czytania i „Udostępnij” we wpisie; Figma #499444 (80:459) przyciemnione do WCAG AA, 4,63:1 na bieli */
	--mm-line-meta:          #ededed; /* linie nad i pod paskiem wpisu (80:461, 80:1018) */
	--mm-color-biblio:       #5f5f5f; /* bibliografia wpisu (80:464) */
	--mm-color-biblio-bg:    rgb(141 213 162 / 13%); /* ramka bibliografii (80:463) */

	/* Rytm pionowy: zmiana tu przestraja całą stronę. Sekcja: 48 px mobile, 132 px desktop. */
	--mm-space-section: clamp(3rem, 1.138rem + 6.774vw, 8.25rem);
	--mm-space-xs: 0.5rem;
	--mm-space-s:  1rem;
	--mm-space-m:  1.5rem;
	--mm-space-l:  2.5rem;
	--mm-space-xl: 4rem;

	/* Rodzina: Poppins lokalnie (300, 400, 400 italic, 500, 600, 700) */
	--mm-family-heading: 'Poppins', 'Poppins Fallback', system-ui, 'Segoe UI', Roboto, sans-serif;
	--mm-family-body:    var(--mm-family-heading);
	--mm-family-button:  var(--mm-family-body);

	/* Skala typograficzna: mobile → desktop */
	--mm-font-h1:     clamp(2.875rem, 1.855rem + 3.71vw, 5.75rem);  /* 46 → 92 (80:173, 80:514) */
	--mm-font-h2:     clamp(2.625rem, 1.5161rem + 4.0323vw, 5.75rem); /* 42 → 92 (80:106, 80:559) */
	--mm-font-h2-m:   clamp(2.625rem, 1.6403rem + 3.5806vw, 5.4rem); /* 42 → 86,4 (80:7, 80:616) */
	--mm-font-h2-s:   clamp(2.5rem, 1.613rem + 3.226vw, 5rem);      /* 40 → 80 (80:86) */
	--mm-font-h3:     clamp(1.35rem, 1.3839rem - 0.0323vw, 1.375rem); /* 22 → 21,6 karta produktu (80:580, 80:153) */
	--mm-line-h3:     clamp(30px, 28.765px + 0.2806vw, 33.48px);     /* 30 → 33,48 */
	--mm-font-lead:   clamp(1rem, 0.9468rem + 0.1935vw, 1.15rem);   /* 16 → 18,4 (80:67, 80:516) */
	--mm-font-text-l: clamp(1rem, 0.9712rem + 0.1048vw, 1.08125rem); /* 16 → 17,3 „Nasza idea” (80:89, 80:544) */
	--mm-line-text-l: clamp(25px, 24.368px + 0.1435vw, 26.78px);   /* 25 → 26,78 */
	--mm-font-body:   1rem;
	--mm-font-small:  0.9rem;     /* 14,4 opis karty, przycisk (80:154) */
	--mm-font-eyebrow: clamp(0.6875rem, 0.665rem + 0.0806vw, 0.75rem); /* 11 → 12 */
	--mm-font-legal:  clamp(2rem, 1.645rem + 1.29vw, 3rem);         /* 32 → 48 „To jest lek…” (80:692, 80:112) */
	--mm-line-legal:  clamp(2.5rem, 1.879rem + 2.258vw, 4.25rem);   /* 40 → 68 */
	--mm-font-h1-wpis: clamp(2rem, 1.645rem + 1.29vw, 3rem);        /* 32 → 48 tytuł wpisu (80:1034, 80:443) */
	--mm-line-h1-wpis: clamp(2.4375rem, 2.0827rem + 1.29vw, 3.4375rem); /* 39 → 55 */
	--mm-line-display: 0.99;      /* 91,08/92, 79,2/80 */
	--mm-line-tight:  1.2;
	--mm-line-normal: 1.55;       /* 24,8/16 */
	--mm-tracking-display: -2px;
	--mm-tracking-eyebrow: 2.04px;
	--mm-title-italic: 0.9043em;  /* kursywa w nagłówku: 83,2/92 (80:108) */
	--mm-title-italic-s: 0.9175em; /* kursywa w nagłówku 80 px: 73,4/80 (80:88) */
	--mm-title-italic-m: 0.9259em; /* kursywa w nagłówku 86,4 px: 80/86,4 (80:8) */

	--mm-radius:      22px;       /* karta produktu (80:124) */
	--mm-radius-s:    20px;       /* kafel artykułu (80:28) */
	--mm-radius-pill: 999px;      /* przyciski, filtry */
	--mm-shadow:      0 10px 30px rgb(0 0 0 / 8%); /* w projekcie brak cieni, zostaje dla przyklejonego nagłówka */
	--mm-transition:  200ms ease;
	--mm-ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* wejścia sekcji i hero: szybki start, miękkie hamowanie */

	/* Siatka: --mm-container to ramka z rynnami, --mm-content to sama treść. */
	--mm-container:        1400px; /* 1368 + 2 × 16 */
	--mm-container-gutter: 16px;
	--mm-content:          1368px;
	--mm-container-narrow: 1088px; /* treść wpisu 1056 (80:461) + rynny */
}

/* Mobile: nagłówki mają wyższą interlinię i kursywę w tym samym rozmiarze (80:514, 80:537). */
@media (max-width: 599px) {
	:root {
		--mm-line-display: 1.12; /* 44,8/40 H2 (80:537); H1 hero ma własne 50/46 w bloku */
		--mm-title-italic: 1em;
		--mm-title-italic-s: 1em;
		--mm-title-italic-m: 1em;
	}
}

/* Rodziny fontów — nadpisują domyślne Astry (tokens.css ładuje się po niej). */
body,
button,
input,
select,
textarea {
	font-family: var(--mm-family-body);
}

/* .entry-content h1..h6 — dogania specyficzność Astry (.entry-content h1{font-family:inherit},
   0,0,1,1), która wewnątrz treści bije samo h1..h6. Child ładuje się po Astrze → przy równej
   specyficzności wygrywa (ten sam mechanizm co override palety). Bez !important (§13). */
h1, h2, h3, h4, h5, h6,
.entry-content :is(h1, h2, h3, h4, h5, h6),
.site-title,
.entry-title,
.ast-single-entry-title {
	font-family: var(--mm-family-heading);
	font-weight: 600; /* Poppins SemiBold w nagłówkach projektu */
}

/* Świeża Astra 4.14 daje `html { font-size: 112.5% }` (18 px). Tokeny liczą rem od 16 px
   jak projekt (14,4 px = 0,9 rem), więc przywracamy domyślne 100% i szanujemy ustawienie
   rozmiaru czcionki w przeglądarce. Ta sama specyficzność, child po Astrze. */
html {
	font-size: 100%;
}

/* Kotwice menu (strona główna) przewijają płynnie. Bez ruchu, gdy system tego nie chce. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	font-size: var(--mm-font-body);
	line-height: var(--mm-line-normal);
}

/* Astra 4.14 maluje tło strony slotem 5 (`.ast-plain-container`), a u nas slot 5 to tło
   przygaszone (beż). Ta sama specyficzność, child po Astrze. */
.ast-plain-container,
.ast-page-builder-template {
	background-color: var(--mm-color-bg);
}

/* --- Szkielet sekcji: wspólne klasy dla wszystkich bloków MM --- */

.mm-section {
	padding-block: var(--mm-space-section);
}

/* Astra daje nagłówkom 20 px, a akapitom 1,6em dolnego marginesu (`.entry-content p`).
   W blokach MM odstępy pionowe ustawia każdy blok górnym marginesem z projektu, więc
   dolny zerujemy. Tylko margin-bottom: pełny reset (0,1,1) przebiłby górne marginesy
   bloków zapisane na pojedynczej klasie. */
.mm-section :is(h1, h2, h3, h4, h5, h6, p) {
	margin-bottom: 0;
}

.mm-container {
	width: 100%;
	/* Wewnątrz sekcji alignfull rodzic ma 100vw (razem z paskiem przewijania), nie
	   szerokość okna — samo max-width pozwalało kontenerowi wyjść poza widok.
	   100cqw to widoczna szerokość #page (kontener zapytań niżej), więc treść stoi
	   dokładnie rynnę od krawędzi ekranu. Pierwsza linia to zapas dla przeglądarek
	   bez jednostek cq — ta odejmowała rynnę podwójnie (margines + padding). */
	max-width: min( var(--mm-container), calc(100vw - 2 * var(--mm-container-gutter)) );
	max-width: min( var(--mm-container), 100cqw );
	margin-inline: auto;
	padding-inline: var(--mm-container-gutter);
}

/*
 * Punkty łamania motywu — jeden zestaw dla wszystkich bloków, żeby układ nie skakał
 * w połowie sekcji. Media queries nie czytają zmiennych CSS, więc to kontrakt na
 * komentarzu, nie na tokenie; liczby poniżej mają się zgadzać w każdym arkuszu.
 *
 *   ≤1199px  desktop → tablet    — siatki wielokolumnowe schodzą do dwóch kolumn
 *   ≤921px   tablet → duży telefon — kolumny stackują się
 *   ≤599px   telefon             — wszystko jednokolumnowo
 *
 * Rynna 16 px na każdej szerokości, tak jak w projekcie mobilnym (80:533).
 *
 * Wyjątek celowy: przyklejony pasek kontaktowy chodzi po klasie urządzenia, nie po
 * układzie, i trzyma własne ≤767px (patrz kontakt.css).
 */

/* Kontener Astry na tę samą treść (--mm-content) co sekcje, stopka i paski. Astra wpisuje
   `.ast-container{max-width:1240px}` (1200 z Kastomizera + 2×20 rynny) na sztywno
   w swój inline CSS, nie przez --ast-normal-container-width — więc podmiana samej
   zmiennej nic nie daje. Ta sama specyficzność, a child ładuje się po Astrze, więc
   wygrywa kolejnością (ten sam mechanizm co override palety, bez !important). */
.ast-container {
	max-width: calc(var(--mm-content) + 40px);
}

/* Gdy w nagłówku jest logo, budowniczy nagłówka Astry dokłada obok niego tekstową
   nazwę strony i marka wychodzi dwa razy. Chowamy ją stylem, nie
   filtrem: `astra_get_option_display-site-title` nie łapie tej ścieżki renderu
   (sprawdzone), a nazwa w markupie nie przeszkadza — logo niesie tę samą nazwę w alt.
   Warunek na custom-logo: bez logo nazwa musi zostać widoczna. */
.ast-site-identity .site-title:has(~ .custom-logo-link),
.ast-site-identity:has(.custom-logo) .site-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Sekcje pełnej szerokości Astra buduje na `width: 100vw`, a 100vw liczy się razem
   z paskiem przewijania — przy widocznym pasku sekcja wystaje poza okno i robi się
   poziomy scroll. Same sekcje są wyśrodkowane poprawnie (nadmiar rozkłada się po
   równo w obie strony), więc wystarczy uciąć wystający skrawek tła.
   Obcinamy na #page, NIE na <html>: overflow-x na elemencie korzeniowym propaguje
   się na widok i rozwala position:sticky przyklejonego nagłówka (sprawdzone —
   nagłówek odjeżdża zamiast trzymać się góry). Na wrapperze sticky działa. */
#page {
	overflow-x: clip;
	container-type: inline-size; /* 100cqw w .mm-container = widoczna szerokość strony */
}

/* Astra odsuwa treść o 60 px od nagłówka i stopki (`.ast-plain-container.ast-no-sidebar
   #primary`). Widok zaczynający się albo kończący sekcją MM ma zwykle sekcję
   dosuniętą do krawędzi (hero od razu pod nagłówkiem), a własny odstęp
   niesie padding sekcji. Strony bez bloków MM zachowują margines Astry. */
.ast-plain-container.ast-no-sidebar #primary:has(.entry-content > .mm-section:first-child) {
	margin-top: 0;
}

.ast-plain-container.ast-no-sidebar #primary:has(.entry-content > .mm-section:last-child) {
	margin-bottom: 0;
}

.mm-container--waski {
	max-width: var(--mm-container-narrow);
}

.mm-section__header {
	margin-bottom: var(--mm-space-l);
}

/* Eyebrow: kreska 38 px i wersaliki z rozstrzeleniem (80:84–80:85). Kreska w kolorze tekstu,
   więc warianty tła zmieniają tylko `color`. Wersaliki pisze redaktor, bez text-transform,
   bo hero ma eyebrow zwykłą pisownią (80:172). */
.mm-section__eyebrow {
	display: flex;
	align-items: center;
	gap: 13px;
	color: var(--mm-color-eyebrow);
	font-size: var(--mm-font-eyebrow);
	font-weight: 600;
	line-height: var(--mm-line-normal);
	letter-spacing: var(--mm-tracking-eyebrow);
}

.mm-section__eyebrow::before {
	content: "";
	flex: none;
	width: 38px;
	height: 1px;
	background-color: currentColor;
}

/* Tytuł: pierwsza linia SemiBold, druga kursywa Regular w <em>, mniejsza o ~9% (80:106). */
.mm-section__title {
	color: var(--mm-color-heading);
	font-size: var(--mm-font-h2);
	font-weight: 600;
	line-height: var(--mm-line-display);
	letter-spacing: var(--mm-tracking-display);
}

.mm-section__title em {
	font-size: var(--mm-title-italic);
	font-style: italic;
	font-weight: 400;
}

.mm-section__title--m {
	font-size: var(--mm-font-h2-m);
}

.mm-section__title--m em {
	font-size: var(--mm-title-italic-m);
}

.mm-section__title--s {
	font-size: var(--mm-font-h2-s);
}

.mm-section__title--s em {
	font-size: var(--mm-title-italic-s);
}

.mm-section__lead {
	color: var(--mm-color-text);
	font-size: var(--mm-font-body);
	line-height: var(--mm-line-normal);
}

.mm-section__actions {
	margin-top: var(--mm-space-l);
}

@media (max-width: 599px) {
	.mm-section__eyebrow {
		gap: 12px;
		line-height: 18px; /* 80:536 */
	}

	.mm-section__eyebrow::before {
		width: 30px;
	}
}

/* Znacznik w pigułce: „Lek bez recepty”, „Suplement diety” (80:151, 80:279). */
.mm-section .mm-znacznik {
	display: inline-flex;
	align-items: center;
	height: 29.11px;
	margin: 0;
	padding: 0 9px;
	border: 1px solid var(--mm-color-badge-border);
	border-radius: var(--mm-radius-pill);
	color: var(--mm-color-heading);
	font-size: 0.6875rem; /* 11 */
	font-weight: 600;
	line-height: 17.11px;
	letter-spacing: 1.104px;
	text-transform: uppercase;
}

/* Przycisk „do góry” Astry (decyzja 2026-10-13: zostaje) nie ma własnego fokusu. */
#ast-scroll-top:focus-visible {
	outline: 3px solid var(--mm-color-primary-hover);
	outline-offset: 2px;
}

/* Wejścia sekcji przy przewijaniu: element z .mm-reveal podjeżdża i się pojawia, gdy wjedzie
   w okno (wejscia.js). Klasę .mm-wejscia na <html> stawia dopiero skrypt, więc bez JS i przy
   ograniczonym ruchu treść stoi od razu. Tylko opacity i transform: bez wpływu na CLS.
   Kolejność w grupie: style="--mm-reveal-krok: 1" (co 120 ms). Nie na elementach z własnym
   transition albo transform (przyciski), bo ta reguła je nadpisze. */
@media (prefers-reduced-motion: no-preference) {
	/* Przejście tylko przy pokazywaniu: ukrycie po starcie skryptu jest natychmiastowe. */
	.mm-wejscia .mm-reveal--widoczny {
		transition:
			opacity 700ms var(--mm-ease-out) calc(var(--mm-reveal-krok, 0) * 120ms),
			transform 900ms var(--mm-ease-out) calc(var(--mm-reveal-krok, 0) * 120ms);
	}

	.mm-wejscia .mm-reveal:not(.mm-reveal--widoczny) {
		opacity: 0;
		transform: translateY(32px);
	}
}

/* Warianty tła */
.mm-section--jasny {
	background-color: var(--mm-color-bg);
}

.mm-section--przygaszony {
	background-color: var(--mm-color-bg-soft);
}

.mm-section--ciemny,
.mm-section--granat {
	background-color: var(--mm-color-bg-dark);
	color: #fff;
	--mm-color-eyebrow: var(--mm-color-mint);
}

.mm-section--granat {
	background-color: var(--mm-color-accent);
}

.mm-section--ciemny .mm-section__title,
.mm-section--granat .mm-section__title {
	color: #fff;
}

.mm-section--ciemny .mm-section__lead,
.mm-section--granat .mm-section__lead {
	color: rgb(255 255 255 / 74%); /* 80:46 */
}

/* Przycisk: pigułka 54 px, Poppins SemiBold 14,4 (80:68). Mobile 52 px i 14 px (80:518).
   Ramka 1 px zawsze, żeby wariant z obrysem miał tę samą geometrię. */
.mm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mm-space-xs);
	min-height: 54px;
	padding: 0 23px;
	border: 1px solid transparent;
	border-radius: var(--mm-radius-pill);
	background-color: var(--mm-color-primary);
	color: #fff;
	font-family: var(--mm-family-button);
	font-size: clamp(0.875rem, 0.8661rem + 0.0323vw, 0.9rem);
	font-weight: 600;
	line-height: var(--mm-line-normal);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--mm-transition), color var(--mm-transition), transform var(--mm-transition);
}

@media (max-width: 599px) {
	.mm-button {
		min-height: 52px;
		padding: 0 15px;
	}
}

/* Astra podkreśla linki w treści i barwi je na hover kolorem akcentu
   (`.ast-single-post .entry-content a`, `a:hover`), więc tekst przycisku potrafi zlać się
   z jego tłem. Kolor przycisku trzymamy na `.entry-content a.mm-button`,
   z pseudoklasami: ta sama albo wyższa specyficzność, a child ładuje się później. */
:is(.entry-content, .editor-styles-wrapper) a.mm-button:is(:link, :visited),
:is(.entry-content, .editor-styles-wrapper) a.mm-button:is(:hover, :focus, :active, :visited) {
	color: #fff;
	text-decoration: none;
}

/* Hover nie jest w projekcie: ciemniejsza zieleń marki. */
.mm-button:hover {
	background-color: var(--mm-color-primary-hover);
}

.mm-button:focus-visible {
	outline: 3px solid var(--mm-color-primary-hover);
	outline-offset: 2px;
}

.mm-button:active {
	transform: translateY(1px);
}

/* Obrys na ciemnym tle: biała ramka 70% (80:70). Hover nie jest w projekcie: białe tło. */
.mm-button--outline,
:is(.entry-content, .editor-styles-wrapper) a.mm-button--outline:is(:link, :visited) {
	background-color: transparent;
	border-color: rgb(255 255 255 / 70%);
	color: #fff;
}

.mm-button--outline:hover,
:is(.entry-content, .editor-styles-wrapper) a.mm-button--outline:is(:hover, :focus, :active) {
	background-color: #fff;
	border-color: #fff;
	color: var(--mm-color-heading);
}

.mm-button--outline:focus-visible {
	outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.mm-button {
		transition: none;
	}

	.mm-button:active {
		transform: none;
	}
}