/* --- Font (self-host) ---------------------------------------------------
   Manrope jako font wariantowy: jeden plik obsługuje wagi 200-800, więc
   przeglądarka pobiera 167 kB raz, zamiast czterech statycznych plików.
   Licencja: assets/fonts/Manrope-OFL.txt
   ---------------------------------------------------------------------- */
@font-face {
	font-family: "Manrope";
	/* WOFF2 to podzbiór TTF-a (łacina z polskimi znakami, interpunkcja, strzałki,
	   znaki matematyczne) — ok. 38 KB zamiast 164 KB. TTF zostaje jako zapas. */
	src: url("../fonts/Manrope-Variable.woff2") format("woff2-variations"),
	     url("../fonts/Manrope-Variable.woff2") format("woff2"),
	     url("../fonts/Manrope-Variable.ttf") format("truetype");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

/* --- Tokeny (1:1 z makiety Figma) ------------------------------------------
   Kolory, typografia i cień pochodzą z arkusza stylów makiety. Zmieniając tu
   wartość, zmieniasz ją w całym motywie — nie hardkoduj kolorów w komponentach.
   -------------------------------------------------------------------------- */
:root {
	/* Kolory dodatkowe */
	--msm-tag:       #B1D749;
	--msm-red:       #F34A4D;
	--msm-red-hover: #C0181B;
	--msm-bg:        #FCF5F2;

	/* Skala neutralna */
	--msm-n25:  #FCFCFD;
	--msm-n50:  #F9FAFB;
	--msm-n100: #F2F4F7;
	--msm-n200: #EAECF0;
	--msm-n300: #D0D5DD;
	--msm-n400: #98A2B3;
	--msm-n500: #667085;
	--msm-n600: #475467;
	--msm-n700: #344054;
	--msm-n800: #1D2939;
	--msm-n900: #101828;

	--msm-bialy: #ffffff;

	/* Role kolorów */
	--msm-tlo:       var(--msm-bialy);
	--msm-tekst:     var(--msm-n600);
	--msm-naglowek:  var(--msm-n900);
	--msm-akcent:    var(--msm-red);
	--msm-obramowanie: var(--msm-n200);

	/* Typografia — Manrope; 400 regular, 600 semibold, 700 bold, 800 extrabold */
	--msm-font: "Manrope", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

	/* Nagłówki: rozmiar/interlinia z makiety (desktop), clamp skaluje w dół */
	--msm-h1:    clamp(2rem, 4.4vw, 3.4375rem);  /* 55 / 75 */
	--msm-h1-lh: 1.3636;
	--msm-h2:    clamp(1.875rem, 3.4vw, 2.5rem);     /* 40 / 50 */
	--msm-h2-lh: 1.25;
	--msm-h3:    clamp(1.5rem, 2.6vw, 1.875rem);     /* 30 / 40 */
	--msm-h3-lh: 1.3333;
	--msm-h4:    clamp(1.375rem, 2.1vw, 1.5625rem);  /* 25 / 35 */
	--msm-h4-lh: 1.4;

	/* Teksty */
	--msm-text-xl:    1.25rem;   --msm-text-xl-lh: 1.4;     /* 20 / 28 */
	--msm-text-l:     1.125rem;  --msm-text-l-lh:  1.4444;  /* 18 / 26 */
	--msm-text-m:     1rem;      --msm-text-m-lh:  1.5;     /* 16 / 24 */
	--msm-text-s:     0.875rem;  --msm-text-s-lh:  1.2857;  /* 14 / 18 */
	--msm-text-xs:    0.75rem;   --msm-text-xs-lh: 1.5;     /* 12 / 18 */

	/* Wagi */
	--msm-regular:   400;
	--msm-semibold:  600;
	--msm-bold:      700;
	--msm-extrabold: 800;

	/* Layout */
	--msm-container:   1440px;
	--msm-container-tresc: 1200px;
	--msm-gap:         clamp(1.25rem, 3vw, 2rem);
	--msm-sekcja-y:    clamp(3.5rem, 8vw, 7rem);

	/* Zaokrąglenia — przyciski są pigułkami, karty mocno zaokrąglone */
	--msm-radius-pill: 999px;
	--msm-radius:      1rem;
	--msm-radius-duzy: 1.5rem;

	/* Cień "box" z makiety: X0 Y31 blur 47.8 spread 0, #F34A4D 14% */
	--msm-cien: 0 15px 31px 0 rgba(243, 74, 77, .14);
	--msm-cien-mocny: 0 12px 32px rgba(16, 24, 40, .12);

	--msm-przejscie: .25s ease;
	--msm-header-h:  84px;
	--msm-topbar-h:  100px; /* wysokość paska kontaktowego; poniżej 900 px = 0 */
}

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

/* Strona deklaruje jasny i ciemny schemat, żeby przeglądarki z wymuszonym
   ciemnym motywem stron (Chrome na Androidzie, Samsung Internet) nie
   przemalowywały kolorów — opis przy <meta name="color-scheme"> w header.php.
   Deklaracja musi zostać dziedziczona w całym drzewie: Chrome przyciemnia
   każdy element, którego schemat jest wyłącznie jasny, więc „color-scheme:
   light” na body albo na komponencie przywraca błąd. Motyw nie ma wersji
   ciemnej — kolory tła i tekstu są ustawione jawnie, a pola formularzy
   dostają jasne kolory niżej (sekcja „Pola formularzy w ciemnym trybie”). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light dark; background: var(--msm-bialy); }
/* Samsung Internet ma własny ciemny tryb stron i nie patrzy na color-scheme:
   przemalowywania nie robi tylko na stronach, które w CSS mają regułę
   prefers-color-scheme: dark (traktuje je jak strony z własnym ciemnym
   motywem). Ta reguła niczego nie zmienia — powtarza jasne kolory z projektu —
   i jest po to, żeby przeglądarka ją wykryła (uwaga klienta, wrzesień 2026).
   Nie usuwać jako „martwej”. */
@media (prefers-color-scheme: dark) {
	:root { color-scheme: light dark; }
	html, body { background-color: var(--msm-bialy); color: var(--msm-tekst); }
}

body {
	margin: 0;
	background: var(--msm-tlo);
	color: var(--msm-tekst);
	font-family: var(--msm-font);
	font-size: var(--msm-text-m);
	font-weight: var(--msm-regular);
	line-height: var(--msm-text-m-lh);
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--msm-akcent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover, a:focus { color: var(--msm-red-hover); }

:focus-visible { outline: 2px solid var(--msm-akcent); outline-offset: 3px; }

button { font: inherit; }

/* --- Typografia (skala z makiety) --------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	font-family: var(--msm-font);
	font-weight: var(--msm-extrabold);
	color: var(--msm-n800);
	letter-spacing: -.01em;
}
h1 { font-size: var(--msm-h1); line-height: var(--msm-h1-lh); }
h2 { font-size: var(--msm-h2); line-height: var(--msm-h2-lh); }
h3 { font-size: var(--msm-h3); line-height: var(--msm-h3-lh); }
h4 { font-size: var(--msm-h4); line-height: var(--msm-h4-lh); }
h5 { font-size: var(--msm-text-xl); line-height: var(--msm-text-xl-lh); }
h6 { font-size: var(--msm-text-l); line-height: var(--msm-text-l-lh); }

p, ul, ol, blockquote, figure, table { margin: 0 0 1.25em; }
ul, ol { padding-left: 1.25em; }

/* Pogrubienia ciemniejsze od tekstu akapitu (#101828 = --msm-n900) — uwagi
   klienta, wrzesień 2026. Na ciemnym i czerwonym tle zostają w kolorze tekstu,
   bo granat na czerwieni jest nieczytelny. */
strong, b { font-weight: var(--msm-bold); color: var(--msm-n900); }
.msm-section--dark strong, .msm-section--dark b,
.msm-section--red strong, .msm-section--red b,
.msm-newsletter strong, .msm-newsletter b,
.msm-strefy__panel strong, .msm-strefy__panel b { color: inherit; }

blockquote {
	margin-inline: 0;
	padding-left: 1.2rem;
	border-left: 3px solid var(--msm-red);
	color: var(--msm-n900);
}

/* Klasy pomocnicze odpowiadające stylom tekstu z makiety.
   Używaj ich w template parts zamiast ustawiać rozmiary ad hoc. */
.msm-h1 { font-size: var(--msm-h1); line-height: var(--msm-h1-lh); font-weight: var(--msm-extrabold); color: var(--msm-naglowek); }
.msm-h2 { font-size: var(--msm-h2); line-height: var(--msm-h2-lh); font-weight: var(--msm-extrabold); color: var(--msm-naglowek); }
.msm-h3 { font-size: var(--msm-h3); line-height: var(--msm-h3-lh); font-weight: var(--msm-extrabold); color: var(--msm-naglowek); }
.msm-h4 { font-size: var(--msm-h4); line-height: var(--msm-h4-lh); font-weight: var(--msm-extrabold); color: var(--msm-naglowek); }

.msm-text-xl { font-size: var(--msm-text-xl); line-height: var(--msm-text-xl-lh); font-weight: var(--msm-extrabold); }

.msm-text-l            { font-size: var(--msm-text-l); line-height: var(--msm-text-l-lh); font-weight: var(--msm-semibold); }
.msm-text-l--bold      { font-weight: var(--msm-bold); }
.msm-text-l--extrabold { font-weight: var(--msm-extrabold); }

.msm-text-m            { font-size: var(--msm-text-m); line-height: var(--msm-text-m-lh); font-weight: var(--msm-regular); }
.msm-text-m--semibold  { font-weight: var(--msm-semibold); }
.msm-text-m--bold      { font-weight: var(--msm-bold); }
.msm-text-m--extrabold { font-weight: var(--msm-extrabold); }

.msm-text-s { font-size: var(--msm-text-s); line-height: var(--msm-text-s-lh); font-weight: var(--msm-semibold); }

.msm-text-xs            { font-size: var(--msm-text-xs); line-height: var(--msm-text-xs-lh); font-weight: var(--msm-regular); }
.msm-text-xs--semibold  { font-weight: var(--msm-semibold); }
.msm-text-xs--extrabold { font-weight: var(--msm-extrabold); }
/* "extrabold extended" z makiety = 12/18 extrabold z rozstrzeleniem */
.msm-text-xs--extended  { font-weight: var(--msm-extrabold); letter-spacing: .1em; }

/* Styl "tag": Manrope ExtraBold 12/24, letter-spacing 15% */
.msm-tag {
	display: inline-block;
	padding: .125rem .75rem;
	background: var(--msm-tag);
	border: solid 0.5px var(--msm-n25);
	border-radius: var(--msm-radius-pill);
	font-size: var(--msm-text-xs);
	line-height: 2;
	font-weight: var(--msm-extrabold);
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--msm-n800);
	white-space: nowrap;
}

/* --- Layout -------------------------------------------------------------- */
.msm-container {
	width: 100%;
	max-width: var(--msm-container-tresc);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.msm-main { min-height: 40vh; }

.msm-section { padding-block: var(--msm-sekcja-y); }
.msm-section--light  { background: var(--msm-bialy); }
.msm-section--accent { background: var(--msm-bg); }
.msm-section--dark   { background: var(--msm-n900); color: var(--msm-n200); }
.msm-section--red    { background: var(--msm-red); color: var(--msm-bialy); }
/* Sekcja Instagrama: czerwień kończy się 140 px nad dołem sekcji (z tego 100 px
   to padding), więc kremowy pas zostaje wąski niezależnie od wysokości kadrów. */
.msm-instagram.msm-section--red {
	background: linear-gradient(
		to bottom,
		var(--msm-red) 0 calc(100% - 180px),
		var(--msm-bg) calc(100% - 180px) 100%
	);
}

.msm-section--dark h1, .msm-section--dark h2, .msm-section--dark h3,
.msm-section--red h1, .msm-section--red h2, .msm-section--red h3 { color: var(--msm-bialy); }

/* Akcent sekcji: kolor, którym sekcja wyróżnia fragmenty treści (pierwsza
   część tytułu, wyróżnienia w tekście, hover pigułek). Na białym, kremowym
   i granatowym tle to czerwień marki; na czerwonym tle czerwień znika, więc
   akcentem zostaje n600. Komponent, który chce być niezależny od wybranego
   w edytorze tła, bierze kolor stąd zamiast z var(--msm-red). */
.msm-section { --msm-akcent-sekcji: var(--msm-red); }
.msm-section--red { --msm-akcent-sekcji: var(--msm-n900); }

.msm-section__head { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3.15rem); }
.msm-section__head--center { margin-inline: auto; text-align: center; }
.msm-section__eyebrow {
	margin: 0 0 .75rem;
	font-size: var(--msm-text-xs);
	line-height: var(--msm-text-xs-lh);
	font-weight: var(--msm-extrabold);
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--msm-red);
}
.msm-section__title { margin-bottom: .4em; }
.msm-section__lead { color: var(--msm-n500); }
.msm-section--dark .msm-section__lead,
.msm-section--red .msm-section__lead { color: var(--msm-n200); }
.msm-section__akcje { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.msm-section__akcje--center { text-align: center; }

/* Tytuł dwukolorowy: warianty zależne od tła sekcji */
.msm-tytul { color: var(--msm-n800); }
.msm-tytul .msm-tytul__akcent { color: var(--msm-red); }
.msm-tytul.msm-tytul--jasny { color: var(--msm-bialy); }
.msm-tytul.msm-tytul--jasny .msm-tytul__akcent { color: var(--msm-red); }
.msm-tytul.msm-tytul--odwrotny { color: var(--msm-red); }
.msm-tytul.msm-tytul--odwrotny .msm-tytul__akcent { color: var(--msm-bialy); }
.msm-tytul.msm-tytul--czerwony-pierwszy { color: var(--msm-red); }
.msm-tytul.msm-tytul--czerwony-pierwszy .msm-tytul__akcent { color: var(--msm-naglowek); }

.msm-grid { display: grid; gap: var(--msm-gap); grid-template-columns: 1fr; }
@media (min-width: 640px) {
	.msm-grid--2, .msm-grid--3, .msm-grid--4, .msm-grid--cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.msm-grid--3, .msm-grid--cards { grid-template-columns: repeat(3, 1fr); }
	.msm-grid--4 { grid-template-columns: repeat(4, 1fr); }
}


/* --- Odstępy sekcji z makiety -------------------------------------------
   Wartości podane przez projekt; poniżej 768 px schodzą do wspólnego rytmu,
   żeby na telefonie nie robiły dziur.
   ---------------------------------------------------------------------- */
.msm-section.msm-kalkulator { padding-block: 80px !important; }
.msm-kalkulatory { padding-block: 50px; }
.msm-test { padding-block: 60px; }
.msm-onas,
.msm-dlaczego,
.msm-licznik,
.msm-blog { padding-block: 100px; }

.msm-opinie { padding-block: 0 100px; }
/* Instagram: czerwień kończy się nad podpisami kadrów, kremowy pas jest wąski */
.msm-instagram { padding-top: 50px; padding-bottom: 60px; }
/* Kontakt bez własnych odstępów: górny daje sekcja bloga (100 px),
   a dołem karta nachodzi na CTA poniżej. */
.msm-kontakt { padding-block: 0; }
.msm-program,
.msm-okazje,
.msm-wycena,
.msm-sciezki { padding-block: 80px; }
.msm-sciezki .msm-section__lead {
	font-weight: (--msm-semibold);
	    color: var(--msm-n600);
}
/* Dwie sekcje na tym samym tle stykają się paddingami, więc odstęp między
   nimi robił się podwójny (do 224 px). Tam, gdzie kolor się nie zmienia,
   liczy się tylko dolny padding pierwszej sekcji — czyli 80-112 px.
   Przy zmianie koloru zostawiamy oba, bo granica tła sama je rozdziela.
   .msm-test ma tło --msm-bg, więc traktujemy je jak wariant „accent".

   Strona główna jest z tej reguły wyłączona: jej pionowe odstępy pochodzą
   1:1 z makiety i mają zostać nietknięte (patrz decyzja o zakresie reguły
   80-112 px). Bez tego wyłączenia sekcja stref traciła górny padding. */
body:not(.home) .msm-section--light  + .msm-section--light,
body:not(.home) .msm-section--accent + .msm-section--accent,
body:not(.home) .msm-section--dark   + .msm-section--dark,
body:not(.home) .msm-section--red    + .msm-section--red,
body:not(.home) .msm-section--accent + .msm-test { padding-top: 0; }

/* Druga sekcja CTA leży pod kartą formularza, która na nią nachodzi —
   dokładamy tyle, ile karta wchodzi, żeby wizualnie zostało 60 px. */
.msm-kontakt + .msm-test { padding-top: calc(80px + clamp(2.5rem, 7vw, 8rem)); padding-bottom: 50px; }
/* Na podstronach kontakt jest ostatnią sekcją — nie ma na co nachodzić.
   Bez tego karta zakrywała pas newslettera nad stopką. */
.msm-kontakt:last-child { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.msm-kontakt:last-child .msm-kontakt__karta { margin-bottom: 0; }

@media (max-width: 767px) {
	.msm-kalkulatory,
	.msm-test,
	.msm-onas,
	.msm-dlaczego,
	.msm-licznik,
	.msm-blog,
	.msm-opinie,
	.msm-instagram,
	.msm-program,
	.msm-okazje,
	.msm-wycena,
	.msm-sciezki { padding-block: 3.5rem; }
	.msm-kontakt + .msm-test { padding-top: calc(80px + clamp(2.5rem, 7vw, 8rem));  }
}

/* Kotwica #formularz: skok do sekcji nie może schować jej pod przyklejonym
   nagłówkiem — stąd zapas równy jego wysokości. */
#formularz { scroll-margin-top: calc(var(--msm-header-h) + 1rem); }

/* Sekcja z formularzem: tło schodzi z koloru bg do przezroczystości */
.msm-kontakt.msm-section--accent {
	background: linear-gradient(to bottom, var(--msm-bg) 0%, rgba(252, 245, 242, 0) 100%);
}

/* --- Dostępność --------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}
.msm-skip-link:focus {
	position: fixed !important;
	top: 1rem; left: 1rem;
	z-index: 999;
	width: auto; height: auto;
	clip: auto;
	padding: .75rem 1.25rem;
	background: var(--msm-n900);
	color: var(--msm-bialy);
	border-radius: var(--msm-radius);
}

/* --- Przyciski ---------------------------------------------------------- */
.msm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .9375rem 1.75rem;
	border: 1.5px solid transparent;
	border-radius: var(--msm-radius-pill);
	font-size: var(--msm-text-m);
	line-height: var(--msm-text-m-lh);
	font-weight: var(--msm-bold);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--msm-przejscie), color var(--msm-przejscie), border-color var(--msm-przejscie);
}
.msm-btn--sm { padding: .6875rem 1.25rem; font-size: var(--msm-text-s); }
/* 20 px na głównych przyciskach (hero i CTA), 16 px na pozostałych — uwagi
   klienta, wrzesień 2026. Rozmiar wisi na modyfikatorze, a nie na sekcji,
   więc redakcja dostaje go razem z klasą --lg w każdym nowym miejscu. */
.msm-btn--lg { padding: 1.125rem 2.5rem; font-size: var(--msm-text-xl); line-height: var(--msm-text-xl-lh); }
.msm-btn__ikona { width: 1.25rem; height: 1.25rem; flex: none; }

.msm-btn--primary { background: var(--msm-red); color: var(--msm-bialy); }
.msm-btn--primary:hover, .msm-btn--primary:focus { background: var(--msm-red-hover); color: var(--msm-n25); }

/* Przycisk 2. stopnia: sam obrys, bez wypełnienia — przez to na kremowych
   kartach (diety, CTA) widać tło spod przycisku, tak jak w projekcie. */
.msm-btn--ghost { background: transparent; border-color: var(--msm-red); color: var(--msm-n800); }
/* Hover z makiety: obrys wypełnia się czerwienią, tekst i ikona bieleją */
.msm-btn--ghost:hover, .msm-btn--ghost:focus-visible {
	background: var(--msm-red);
	border-color: var(--msm-red);
	color: var(--msm-bialy);
}
.msm-section--dark .msm-btn--ghost, .msm-section--red .msm-btn--ghost { background: transparent; color: var(--msm-bialy); }
.msm-section--dark .msm-btn--ghost:hover { background: var(--msm-red); border-color: var(--msm-red); color: var(--msm-bialy); }
.msm-section--red .msm-btn--ghost { border-color: var(--msm-bialy); }
.msm-section--red .msm-btn--ghost:hover { background: var(--msm-bialy); border-color: var(--msm-bialy); color: var(--msm-red); }

/* Wariant „soft”: jasnoróżowe tło i czerwony tekst, hover na pełną czerwień */
.msm-btn--soft {
	background: var(--msm-bg);
	border-color: transparent;
	color: var(--msm-red);
}
.msm-btn--soft:hover, .msm-btn--soft:focus-visible { background: var(--msm-red); color: var(--msm-bialy); }

/* Podkreślenie rysuje pseudoelement, żeby dało się animować szerokość */
.msm-btn--link {
	position: relative;
	padding: 0 0 .5rem;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--msm-red);
	font-weight: var(--msm-semibold);
	text-decoration: none;
}
.msm-btn--link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	max-width: 100%;
	height: 2px;
	background: currentColor;
	transition: width .35s ease;
}
.msm-btn--link:hover, .msm-btn--link:focus-visible { color: var(--msm-red-hover); }
.msm-btn--link:hover::after, .msm-btn--link:focus-visible::after { width: 100%; }
.msm-section--dark .msm-btn--link, .msm-section--red .msm-btn--link { color: var(--msm-bialy); }

/* --- Pole inline (kod pocztowy, newsletter) ----------------------------- */
.msm-pole-inline {
	/* flex-wrap: nowrap — pole i przycisk zostają w jednej linii także wtedy,
	   gdy panel jest wąski; input kurczy się dzięki min-width: 0 niżej. */
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: .5rem;
	/* Wcięcie, żeby przycisk leżał wewnątrz pigułki, a nie na jej krawędzi */
	padding: .375rem;
	background: var(--msm-n100);
	border-radius: var(--msm-radius-pill);
}
.msm-pole-inline__pole {
	flex: 1;
	padding-inline: 1.25rem;
	color: var(--msm-n400);
	font-size: var(--msm-text-m);
}
.msm-kodpocztowy__input {
	flex: 1;
	width: auto;
	min-width: 0;
	padding: .5rem 1.25rem;
	background: transparent;
	border: 0;
	border-radius: var(--msm-radius-pill);
	font-size: var(--msm-text-m);
	color: var(--msm-n900);
}
.msm-kodpocztowy__input:focus { outline: none; }
.msm-kodpocztowy:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
.msm-kodpocztowy--blad { animation: msm-drgnij .25s ease; }
/* Kod leci do serwera — blokujemy ponowne kliknięcie i sygnalizujemy czekanie. */
.msm-kodpocztowy--czeka { opacity: .7; }
.msm-kodpocztowy--czeka .msm-kodpocztowy__input { pointer-events: none; }
@keyframes msm-drgnij {
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}
.msm-pole-inline .msm-btn { flex: none; }
/* Placeholder layoutu — kursor pokazuje, że pole czeka na podpięcie formularza */
.msm-pole-inline--placeholder { cursor: default; }
.msm-pole-inline--placeholder .msm-btn { pointer-events: none; }

/* --- Pasek kontaktowy --------------------------------------------------- */
.msm-topbar { background: var(--msm-bg); }
/* Nagłówek trzyma tę samą szerokość co treść strony (kontener 1200 px) */
.msm-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: 100px;
}
/* Dwa numery telefonu stoją w jednej grupie z jedną słuchawką — gap paska
   rozdzielałby je tak samo jak telefon od e-maila i wyglądałyby na dwa
   osobne kontakty. Kreska między nimi rysuje się tylko od drugiego. */
.msm-topbar__telefony { display: inline-flex; align-items: center; gap: .5rem; }
.msm-topbar__telefony .msm-topbar__kontakt + .msm-topbar__kontakt::before {
	content: "/";
	margin-right: .5rem;
	color: var(--msm-n400);
}
.msm-topbar__kontakt {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: var(--msm-text-s);
	font-weight: var(--msm-semibold);
	color: var(--msm-n700);
	text-decoration: none;
}
.msm-topbar__kontakt:hover { color: var(--msm-red); }
.msm-topbar__ikona { width: 1.25rem; height: 1.25rem; color: var(--msm-red); flex: none; }
.msm-topbar__akcje { display: flex; gap: .75rem; }
/* W makiecie mobilnej nie ma paska kontaktowego — CTA wchodzi do belki z logo */
@media (max-width: 899px) {
	.msm-topbar { display: none; }
	:root { --msm-topbar-h: 0px; }
}

/* --- Nagłówek ----------------------------------------------------------- */
/* Nagłówek przykleja się z ujemnym offsetem równym wysokości paska
   kontaktowego: pasek odjeżdża nad krawędź, a belka z logo i menu zostaje.
   Sticky trzyma się całej strony, bo nagłówek jest dzieckiem <body>. */
.msm-header {
	position: sticky;
	top: calc(-1 * var(--msm-topbar-h));
	z-index: 100;
	background: var(--msm-bialy);
}
/* Zalogowany użytkownik ma nad stroną belkę admina (fixed, 32 px) */
body.admin-bar .msm-header { top: calc(32px - var(--msm-topbar-h)); }
@media (max-width: 782px) {
	body.admin-bar .msm-header { top: calc(46px - var(--msm-topbar-h)); }
}
/* Między 601 a 782 px #wpadminbar jest jeszcze fixed i ma 46 px — belka
   motywu musi się o tyle odsunąć. Poniżej 600 px WordPress przestawia go na
   position: absolute, więc odjeżdża ze stroną i odsuwać się nie ma od czego
   (reguła top: 0 w bloku mobilnym niżej). */
@media (min-width: 601px) and (max-width: 899px) {
	body.admin-bar .msm-header { top: 46px; }
}
.msm-header__main {
	background: var(--msm-bialy);
	transition: box-shadow var(--msm-przejscie);
}
.msm-header.is-scrolled .msm-header__main { box-shadow: 0 8px 24px rgba(16, 24, 40, .08); }
/* Nagłówek nie ma sufitu szerokości: menu ma dziewięć pozycji i w kontenerze
   treści robiło się ściśnięte, a przy sufucie 1440 px na szerszym monitorze
   zostawał martwy pas z prawej (uwaga klienta, wrzesień 2026 — „na szerokość
   strony, bez tych marginesów, trochę odsunięte od krawędzi ekranu, ale
   rozciągnięte"). Belka idzie więc przez cały ekran z samym oddechem na boki,
   jak na kuchniavikinga.pl. Pasek kontaktowy trzyma tę samą szerokość, żeby
   telefon i przyciski stały w jednej osi z menu. Stopka i treść zostają
   na 1200 px. */
.msm-header .msm-container {
	max-width: none;
	padding-inline: clamp(1rem, 2.5vw, 3rem);
}

.msm-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--msm-gap);
	min-height: 116px;
}

/* Logo wychodzi poza belkę w górę i w dół — tak jak w makiecie */
.msm-header__brand { flex: none; }
@media (min-width: 900px) {
	.msm-header__brand { margin-block: -3rem; transition: margin var(--msm-przejscie); }
	/* Na przyklejonej belce logo ma 100 × 100 px i mieści się w niej w całości */
	.msm-header.is-scrolled .msm-header__brand { margin-block: 0; }
	.msm-header.is-scrolled .msm-logo__img,
	.msm-header.is-scrolled .custom-logo { width: 100px; }
}
/* Sygnet wychodzi poniżej belki i ma zostać widoczny także wtedy, gdy
   otwarty jest mega-panel (ten ma z-index 20 w kontekście nagłówka). */
.msm-header__brand { position: relative; z-index: 30; }
.msm-logo { display: block; }
.msm-logo__img, .custom-logo {
	width: clamp(84px, 15vw, 212px);
	height: auto;
	filter: drop-shadow(0 6px 16px rgba(16, 24, 40, .10));
	transition: width var(--msm-przejscie);
}
@media (min-width: 900px) {
	/* Odstęp między logo a nawigacją jak w makiecie */
	.msm-header__inner { gap: clamp(2rem, 5vw, 4.5rem); justify-content: flex-start; position: static; }
	/* Kontekst dla mega-panelu: belka idzie przez całą szerokość strony */
	.msm-header__main { position: relative; }
	/* Nawigacja zajmuje resztę belki, a pozycje dosuwają się do prawej,
	   więc "Kontakt" kończy się tam, gdzie przyciski paska kontaktowego. */
	.msm-header__nav { flex: 1; min-width: 0; align-self: stretch; }
	.msm-header__nav .msm-nav { width: 100%; display: flex; align-items: stretch; }
	/* Pozycje sięgają góry i dołu belki, więc kursor po drodze do panelu
	   nie opuszcza <li> i menu nie zamyka się w połowie ruchu.
	   align-self na .msm-nav jest tu konieczne: .msm-header__nav ma dalej
	   w arkuszu „align-items: center", które inaczej centruje nawigację
	   w belce i <li> zostaje wysokości samego napisu (35 px zamiast 116). */
	.msm-header__nav .msm-nav { align-self: stretch; }
	.msm-header__nav .msm-nav__list { align-items: stretch; }
	.msm-header__nav .msm-nav__list > li { display: flex; align-items: center; }
	/* Pozycje stoją zwartą grupą przy prawej krawędzi, ze stałym odstępem,
	   i kończą się w osi przycisków paska kontaktowego. Rozkładanie ich na
	   całą szerokość belki (space-between) na szerokim monitorze rozrywało
	   menu na pojedyncze słowa (uwaga klienta, wrzesień 2026). */
	.msm-header__nav .msm-nav__list {
		width: 100%;
		justify-content: flex-end;
		/* 40 px na szerokim ekranie, a poniżej ok. 1600 px odstęp maleje
		   szybciej niż sam ekran, żeby dziewięć pozycji zmieściło się w jednej
		   linii także na laptopie. */
		gap: clamp(.75rem, 6vw - 3.5rem, 2.5rem);
	}
	.msm-header__nav .msm-nav__list > li > a { white-space: nowrap; }
}

.msm-header__nav { display: flex; align-items: center; gap: var(--msm-gap); }
.msm-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 1.8vw, 1.75rem);
	margin: 0; padding: 0;
	list-style: none;
}
.msm-nav__list li { position: relative; }
.msm-nav__list > li > a,
.msm-nav__list .sub-menu a {
	display: flex;
	align-items: center;
	gap: .25rem;
	padding: .35rem 0;
	font-size: var(--msm-text-m);
	line-height: var(--msm-text-m-lh);
	font-weight: var(--msm-semibold);
	text-decoration: none;
	color: var(--msm-n900);
}
.msm-nav__list > li > a:hover,
.msm-nav__list .sub-menu a:hover { color: var(--msm-red); }
.msm-nav__list .current-menu-item > a,
.msm-nav__list .current-menu-parent > a { color: var(--msm-red); }
/* Strzałka przy pozycjach z podmenu */
.msm-nav__list .menu-item-has-children > a::after {
	content: "";
	width: .5rem; height: .5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
}
/* --- Rozwijane menu: prosty panel z linkami ---------------------------- */
.msm-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	min-width: 15rem;
	margin: 0;
	padding: .75rem 0;
	list-style: none;
	background: var(--msm-bialy);
	border-radius: var(--msm-radius);
	box-shadow: var(--msm-cien), 0 18px 40px rgba(16, 24, 40, .10);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, 6px);
	transition: opacity var(--msm-przejscie), transform var(--msm-przejscie), visibility var(--msm-przejscie);
}
.msm-nav__list .sub-menu::before {
	content: "";
	position: absolute;
	left: 0; right: 0;
	bottom: 100%;
	height: 6px;
}
.msm-nav__list li:hover > .sub-menu,
.msm-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}
.msm-nav__list .sub-menu a {
	padding: .625rem 1.5rem;
	font-size: var(--msm-text-m);
	font-weight: var(--msm-regular);
	color: var(--msm-n700);
	white-space: nowrap;
}
.msm-nav__list .sub-menu a:hover,
.msm-nav__list .sub-menu a:focus-visible { background: var(--msm-bg); color: var(--msm-red); }
.msm-nav__list .sub-menu a::after { display: none; }

/* Pozycja z otwartym podmenu zostaje czerwona, a strzałka obraca się w górę */
.msm-nav__list > li:hover > a,
.msm-nav__list > li:focus-within > a { color: var(--msm-red); }
.msm-nav__list .menu-item-has-children > a::after { transition: transform var(--msm-przejscie); }
.msm-nav__list > li.menu-item-has-children:hover > a::after,
.msm-nav__list > li.menu-item-has-children:focus-within > a::after {
	transform: rotate(-135deg) translateY(-2px);
}

/* --- Mega-menu (pozycja z klasą CSS „msm-mega”) ------------------------ */
/* Pozycja bez własnego kontekstu pozycjonowania, żeby panel rozciągnął się
   na całą szerokość belki nagłówka. */
.msm-nav__list > li.msm-mega { position: static; }
/* Walker renderuje obok siebie panel z kaflami i zwykłe <ul class="sub-menu">.
   Na desktopie rządzi panel, więc lista linków schodzi z drogi. */
@media (min-width: 900px) {
	.msm-nav__list > li.msm-mega > .sub-menu { display: none; }
}
.msm-mega-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	/* Bez odstępu u góry — zdjęcia kafli dotykają belki menu */
	padding: 0 clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
	background: var(--msm-bg);
	box-shadow: 0 24px 48px rgba(16, 24, 40, .10);
	opacity: 0;
	visibility: hidden;
	/* Zamknięty panel nie łapie kursora — inaczej w trakcie zanikania
	   (animowana visibility) sam podtrzymywałby :hover na pozycji menu. */
	pointer-events: none;
	transform: translateY(6px);
	transition: opacity var(--msm-przejscie), transform var(--msm-przejscie), visibility var(--msm-przejscie);
}
/* Mostek nad panelem: przy niepełnym zoomie styk belki i panelu może wypaść
   z zaokrągleniem o pół piksela — kursor nie ma wtedy na czym „przejechać". */
.msm-mega-panel::before {
	content: "";
	position: absolute;
	left: 0; right: 0;
	bottom: 100%;
	height: 6px;
}
li.msm-mega:hover > .msm-mega-panel,
li.msm-mega:focus-within > .msm-mega-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}
.msm-mega-panel__kafle {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: clamp(1.25rem, 3vw, 3.5rem);
	/* W makiecie kafle nie sięgają krawędzi panelu — są węższe i wyśrodkowane */
	max-width: 58rem;
	margin-inline: auto;
}
.msm-mega-kafel { position: relative; text-align: center; }
/* Cały kafel jest klikalny — pseudoelement przycisku przykrywa kartę.
   Zostaje jeden link w drzewie dostępności, a nie kafel owinięty w <a>. */
.msm-mega-kafel .msm-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.msm-mega-kafel:hover .msm-btn--primary { background: var(--msm-red-hover); }
.msm-mega-kafel:hover .msm-mega-kafel__img { transform: scale(1.03); }
.msm-mega-kafel__img { transition: transform var(--msm-przejscie); }
.msm-mega-kafel__img {
	width: 100%;
	aspect-ratio: 21 / 10;
	object-fit: cover;
	border-radius: 0 0 var(--msm-radius) var(--msm-radius);
	box-shadow: var(--msm-cien);
}
.msm-mega-kafel__tytul {
	margin: 1.125rem 0 .75rem;
	font-size: var(--msm-h4);
	line-height: var(--msm-h4-lh);
}
.msm-mega-kafel__cena {
	display: inline-block;
	margin: 0 0 .875rem;
	padding: .5rem 1.5rem;
	background: var(--msm-bialy);
	border-radius: var(--msm-radius-pill);
	font-weight: var(--msm-bold);
	color: var(--msm-naglowek);
}
.msm-mega-kafel__kwota { font-weight: var(--msm-extrabold); color: var(--msm-red); }
.msm-mega-kafel__opis { margin: 0 0 1.25rem; color: var(--msm-n600); }
/* Przycisk trzyma szerokość treści — nie rozciąga się na kafel */
.msm-mega-kafel .msm-btn { display: inline-flex; width: auto; }


.msm-header__akcje-mobile { display: none; }
.msm-header__cta-mobile { display: none; }

/* Burger */
.msm-burger { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; }
.msm-burger__box { display: block; width: 26px; height: 18px; position: relative; }
.msm-burger__line,
.msm-burger__line::before,
.msm-burger__line::after {
	position: absolute;
	left: 0;
	width: 26px; height: 2px;
	background: var(--msm-n900);
	transition: transform var(--msm-przejscie), opacity var(--msm-przejscie);
	content: "";
}
.msm-burger__line { top: 8px; }
.msm-burger__line::before { top: -8px; }
.msm-burger__line::after { top: 8px; }
.msm-burger[aria-expanded="true"] .msm-burger__line { transform: rotate(45deg); }
.msm-burger[aria-expanded="true"] .msm-burger__line::before { opacity: 0; }
.msm-burger[aria-expanded="true"] .msm-burger__line::after { transform: translateY(-8px) rotate(-90deg); }

@media (max-width: 899px) {
	.msm-burger { display: block; }
	/* Na telefonie belka jest fixed, nie sticky: przy inercyjnym scrollu
	   sticky potrafi się na chwilę odkleić i nad belką widać kawałek strony.
	   Wysokość belki oddajemy do zmiennej, żeby odstęp pod nią nie rozjechał
	   się z jej rzeczywistą wysokością. */
	:root { --msm-header-h: 84px; }
	.msm-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
	/* Belka wypadła z przepływu — treść musi dostać tyle miejsca, ile zajmuje. */
	body { padding-top: var(--msm-header-h); }
	/* Panel admina jest poniżej 600 px pozycjonowany absolutnie i odjeżdża
	   ze stroną, więc belka zostaje na zerze; wyżej jest fixed na 46 px. */
	body.admin-bar .msm-header { top: 0; }
	.msm-header__nav {
		position: absolute;
		inset: 100% 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
		padding: 1.25rem clamp(1rem, 5vw, 2rem) 1.75rem;
		background: var(--msm-bialy);
		box-shadow: 0 16px 32px rgba(16, 24, 40, .12);
		transform: translateY(-130%);
		transition: transform var(--msm-przejscie);
		z-index: -1;
	}
	.msm-header__nav.is-open { transform: translateY(0); }
	/* 15 pozycji nie mieści się na ekranie telefonu, a body ma wtedy
	   overflow: hidden — bez własnego przewijania dolne linki są nieosiągalne. */
	.msm-header__nav {
		max-height: calc(100dvh - var(--msm-header-h));
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.msm-nav, .msm-nav__list { width: 100%; }
	.msm-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.msm-nav__list > li > a { padding: .9rem 0; border-bottom: 1px solid var(--msm-n100); }
	.msm-nav__list .sub-menu,
	.msm-mega-panel {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border-radius: 0;
		padding: .5rem 0 .5rem 1rem;
		background: none;
	}
	.msm-nav__list > li.msm-mega { position: relative; }
	/* Na telefonie mega-menu nie ma sensu — kafle ze zdjęciami i cenami
	   rozpychają panel na kilka ekranów. Zostaje zwykłe podmenu z linkami. */
	.msm-mega-panel { display: none; }
	.msm-header__akcje-mobile { display: flex; gap: .75rem; }
	.msm-header__cta-mobile { display: block; margin-left: auto; }
	.msm-header__inner { gap: .75rem; min-height: var(--msm-header-h); }
	body.msm-nav-open { overflow: hidden; }
}

/* --- Pasek akcji na dole ekranu (telefon) ------------------------------- */
.msm-pasek-akcji { display: none; }
@media (max-width: 899px) {
	.msm-pasek-akcji {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 90;
		display: flex;
		gap: .625rem;
		/* safe-area: na iPhonie pod paskiem jest jeszcze uchwyt gestów */
		padding: .625rem clamp(1rem, 4vw, 1.5rem) calc(.625rem + env(safe-area-inset-bottom, 0px));
		background: var(--msm-bialy);
		box-shadow: 0 -8px 24px rgba(16, 24, 40, .12);
	}
	/* Węższy padding i mniejszy stopień, żeby oba napisy zmieściły się
	   w jednym rzędzie także na 360 px. */
	.msm-pasek-akcji__btn {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		padding-inline: .75rem;
		font-size: var(--msm-text-s);
		white-space: nowrap;
	}
	.msm-pasek-akcji__ikona { width: 1.125rem; height: 1.125rem; flex: none; }
	.msm-pasek-akcji .msm-btn--ghost { background: var(--msm-bialy); }
	/* Pasek zasłaniałby koniec stopki — oddajemy mu tyle miejsca, ile zajmuje. */
	body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); }
	/* Przy otwartym menu pasek tylko przeszkadza. */
	body.msm-nav-open .msm-pasek-akcji { display: none; }
}

/* --- Ocena (Google) ----------------------------------------------------- */
.msm-ocena {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .625rem;
	margin-top: 2rem;
}
.msm-ocena__zrodlo {
	font-weight: var(--msm-extrabold);
	color: var(--msm-n700);
	letter-spacing: -.02em;
}
.msm-ocena--jasna .msm-ocena__zrodlo { color: var(--msm-bialy); }
.msm-ocena__gwiazdki { color: #FFB300; font-size: 1.125rem; letter-spacing: .1em; }
.msm-ocena__wartosc {
	font-size: var(--msm-text-xl);
	font-weight: var(--msm-extrabold);
	color: var(--msm-n800);
}
.msm-ocena__opis {
	padding-left: .75rem;
	border-left: 1px solid var(--msm-n300);
	font-size: var(--msm-text-s);
	color: var(--msm-n800);
}
.msm-ocena--jasna .msm-ocena__wartosc { color: var(--msm-bialy); }
.msm-ocena--jasna .msm-ocena__opis { color: var(--msm-n300); border-color: rgba(255,255,255,.25); }

/* --- Hero --------------------------------------------------------------- */
.msm-hero {
	position: relative;
	z-index: 2; /* grafika hero nachodzi na sekcję poniżej */
	background: var(--msm-bg);
}
.msm-hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
	max-width: var(--msm-container-tresc);
	margin-inline: auto;
	padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 2.5rem) 0;
}
.msm-hero__tresc { max-width: 42rem; padding-bottom: clamp(3rem, 6vw, 5rem); }
/* Tytuł zawsze nad grafiką — na węższych ekranach kadr wchodzi pod tekst
   i bez tego druga linia nagłówka lądowała pod zdjęciem. */
.msm-hero__tytul { position: relative; z-index: 2; margin-bottom: 1.5rem; }
.msm-hero__tekst { max-width: 32rem; color: var(--msm-n600); font-weight: var(--msm-bold); }
.msm-hero__akcje { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.msm-hero__media { position: relative; pointer-events: none; }
.msm-hero__img { width: 100%; height: auto; }
@media (min-width: 900px) {
	.msm-hero__img { width: auto; height: 100%; max-width: none; }
}
@media (min-width: 900px) {
	/* Tekst zostaje w kontenerze, grafika stoi przy prawej krawędzi ekranu.
	   Szef kuchni jest ucięty w pasie, więc dół grafiki leży równo z dołem
	   sekcji — gdyby wchodził w następną, cięcie wisiałoby w powietrzu. */
	.msm-hero__inner {
		grid-template-columns: minmax(0, 44rem);
		min-height: min(46rem, 76vh);
		padding-block: clamp(4rem, 8vw, 7rem);
		align-content: center;
	}
	.msm-hero__tresc { padding-bottom: 0; }
	/* Grafika skaluje się wysokością sekcji, więc nigdy nie wchodzi pod
	   nagłówek ani nie zasłania karuzeli poniżej. */
	.msm-hero__media {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: auto;
	}
}
/* Grafika hero ma miękką, jasną poświatę, która przy części szerokości
   ekranu kładła się na drugim przycisku hero i na tagach ostatniej karty
   diety poniżej — wyglądało to jak gradient na tekście (uwaga klienta,
   wrzesień 2026). Treść hero i zawartość sekcji diet stoją więc nad
   grafiką; tło sekcji diet zostaje pod nią, więc talerz dalej na nią
   nachodzi. */
@media (min-width: 900px) {
	.msm-hero__tresc { position: relative; z-index: 1; }
}
.msm-hero + .msm-diety > .msm-container { position: relative; z-index: 3; }
/* Grafika sięga pod drugi przycisk (telefon, a na desktopie przy ok. 1440 px),
   a obrysowany przycisk jest przezroczysty — tło w kolorze sekcji przykrywa talerz pod napisem. */
.msm-hero__akcje .msm-btn--ghost:not(:hover):not(:focus-visible) { background: var(--msm-bg); }

/* --- Hero poniżej 900 px: grafika przy prawej krawędzi -------------------
   Do 899 px siatka hero ma jedną kolumnę, więc grafika lądowała pod tekstem
   jako blok na całą szerokość — na tablecie rozpychało to sekcję na dwa
   ekrany. Kadr idzie więc do prawej krawędzi i nachodzi na treść; ma alfę
   i jasne tło, a tytuł ma własny z-index, więc tekst zostaje czytelny.
   Pionowy odstęp hero ustawia blok (zakładka „Odstępy"), dlatego wewnętrzny
   padding z reguły bazowej schodzi do zera — inaczej liczyłby się dwa razy.
   ---------------------------------------------------------------------- */
@media (max-width: 899px) {
	/* Bez tego kadr wystawałby poza prawą krawędź i robił poziomy overflow:
	   tło sekcji kończy się na szerokości ekranu i obok widać biały pas body. */
	.msm-hero { overflow: hidden; }
	.msm-hero__inner { position: relative; padding-block: 0; }
	.msm-hero__tresc { position: relative; z-index: 1; padding-bottom: 0; }
	/* Dołem do krawędzi sekcji — szef kuchni jest ucięty w pasie. */
	.msm-hero__media {
		position: absolute;
		right: 0;
		top: auto;
		bottom: 0;
		z-index: 0;
		width: 50%;
	}
	.msm-hero__img { width: 100%; height: auto; }
	/* Lead i przyciski zostają w lewej połowie, żeby nie czytać ich na zdjęciu.
	   Telefon dokłada do tego własne, ciaśniejsze wartości. */
	.msm-hero__tekst { max-width: 22rem; }
	.msm-hero__akcje { max-width: 24rem; }
}

/* --- Karuzela (diety, opinie, kadry) ------------------------------------ */
.msm-karuzela { position: relative; }
.msm-karuzela__tor {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(min(100%, 20rem), 1fr);
	gap: var(--msm-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-block: 1rem;
	scrollbar-width: none;
}
.msm-karuzela__tor::-webkit-scrollbar { display: none; }
.msm-karuzela__tor > * { scroll-snap-align: start; }
@media (min-width: 960px) {
	.msm-karuzela__tor { grid-auto-columns: calc((100% - 2 * var(--msm-gap)) / 3); }
	.msm-karuzela--kadry .msm-karuzela__tor { grid-auto-columns: calc((100% - 3 * var(--msm-gap)) / 4); }
}
.msm-karuzela__strzalka {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: none;
	width: 4rem; height: 4rem;
	transform: translateY(-50%);
	align-items: center;
	justify-content: center;
	background: var(--msm-bialy);
	border: 0;
	border-radius: 50%;
	box-shadow: var(--msm-cien);
	color: var(--msm-n900);
	cursor: pointer;
	transition: background var(--msm-przejscie), color var(--msm-przejscie);
}
.msm-karuzela__strzalka:hover { background: var(--msm-red); color: var(--msm-bialy); }
.msm-karuzela__strzalka[disabled] { opacity: .35; cursor: default; }
.msm-karuzela__strzalka[disabled]:hover { background: var(--msm-bialy); color: var(--msm-n900); }
.msm-karuzela--bez-strzalek .msm-karuzela__strzalka { display: none; }

/* Kropki pod karuzelą */
.msm-karuzela__kropki {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.msm-karuzela__kropka {
	width: .625rem;
	height: .625rem;
	padding: 0;
	background: var(--msm-n300);
	border: 0;
	border-radius: var(--msm-radius-pill);
	cursor: pointer;
	transition: width var(--msm-przejscie), background var(--msm-przejscie);
}
.msm-karuzela__kropka.is-aktywna { width: 2.25rem; background: var(--msm-red); }
.msm-section--dark .msm-karuzela__kropka { background: var(--msm-n600); }
.msm-section--dark .msm-karuzela__kropka.is-aktywna { background: var(--msm-red); }
.msm-section--red .msm-karuzela__kropka { background: rgba(255, 255, 255, .45); }
.msm-section--red .msm-karuzela__kropka.is-aktywna { background: var(--msm-bialy); }
/* Instagram: kropki wypadają pod czerwonym pasem, na kremowym tle — biel
   byłaby tam niewidoczna, więc wracamy do wersji z makiety (czerwona
   aktywna, granatowe pozostałe). */
.msm-instagram.msm-section--red .msm-karuzela__kropka { background: var(--msm-naglowek); }
.msm-instagram.msm-section--red .msm-karuzela__kropka.is-aktywna { background: var(--msm-red); }
.msm-karuzela__strzalka svg { width: 1.5rem; height: 1.5rem; }
.msm-karuzela__strzalka--prev { left: -2rem; }
.msm-karuzela__strzalka--next { right: -2rem; }
@media (min-width: 1100px) {
	.msm-karuzela__strzalka { display: flex; }
	/* Atuty od tabletu są zwykłą siatką — nie ma czego przewijać. */
	.msm-karuzela--atuty .msm-karuzela__strzalka { display: none; }
}
/* Od 1280 px w marginesie kontenera starcza miejsca na całe koło, więc
   strzałki wychodzą poza tor i przestają zasłaniać tytuł pierwszej karty
   (uwaga klienta: „strzałki się rozjechały"). Niżej zostają na krawędzi. */
@media (min-width: 1280px) {
	.msm-karuzela__strzalka--prev { left: -4.5rem; }
	.msm-karuzela__strzalka--next { right: -4.5rem; }
}

/* --- Karta diety -------------------------------------------------------- */
.msm-dieta {
	display: flex;
	flex-direction: column;
	background: var(--msm-bg);
	border-radius: var(--msm-radius-duzy);
	overflow: visible;
}
.msm-dieta__media { position: relative; aspect-ratio: var(--msm-dieta-kadr); background: transparent; box-shadow: var(--msm-cien); border-radius: 30px; }
/* Kadr trzyma proporcję także wtedy, gdy zdjęcie przychodzi z zamawiarki
   w dowolnym formacie — bez tego pionowe zdjęcie rozpychało kartę i karty
   w siatce przestawały się równać. Proporcja to proporcja zdjęć diet
   (376 × 388): są kadrowane tak, żeby okrągły talerz mieścił się w całości,
   a kadr 4:3 ucinał mu górę i dół (uwaga klienta, wrzesień 2026). */
.msm-dieta { --msm-dieta-kadr: 376 / 388; }
.msm-dieta__img { width: 100%; height: 100%; aspect-ratio: var(--msm-dieta-kadr); object-fit: cover; border-radius: 30px; }
.msm-dieta__tagi {
	position: absolute;
	top: -1rem; left: 0; right: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0; padding: 0;
	list-style: none;
}
/* Dieta wyróżniona (Ustawienia motywu → „Dieta wyróżniona”): etykieta stoi
   w rzędzie tagów nad zdjęciem, jako pierwsza — czerwona zamiast zielonej. */
.msm-tag--wyroznienie { background: var(--msm-red); border-color: var(--msm-red); color: var(--msm-bialy); }
/* Hasło promocji wpisane w cenę w panelu dostawcy, np. „Cena promocyjna
   tylko w październiku”. */
.msm-dieta__promocja {
	margin: 0 0 .25rem;
	font-size: var(--msm-text-s);
	line-height: var(--msm-text-s-lh);
	font-weight: var(--msm-bold);
	color: var(--msm-red);
}
.msm-dieta__body .msm-dieta__promocja + .msm-dieta__cena { margin-top: 0; }
.msm-dieta__promocja:has(+ .msm-dieta__cena + .msm-dieta__akcje) { margin-top: auto; }
.msm-dieta__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1rem, 2.5vw, 1rem); }
/* Nazwa diety i cena o stopień większe od opisu — w projekcie tytuł jest
   wyraźnie większy od tekstu, a u nas różnica była ledwie widoczna
   (uwaga klienta, wrzesień 2026). */
.msm-dieta__tytul { margin-bottom: .5rem; font-size: var(--msm-h3); line-height: var(--msm-h3-lh); }
.msm-dieta__opis { color: var(--msm-n800); font-weight: var(--msm-semibold);}
.msm-dieta__cena {
	display: flex;
	align-items: baseline;
	gap: .375rem;
	font-size: var(--msm-text-xl);
	line-height: var(--msm-text-xl-lh);
	font-weight: var(--msm-extrabold);
	color: var(--msm-n800);
}
.msm-dieta__cena-kwota { font-size: var(--msm-h3); line-height: 1; font-weight: var(--msm-extrabold); color: var(--msm-red); }
.msm-dieta__akcje { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Przyciski siadają na dole kafla, żeby w rzędzie kart o różnej długości
   tytułu i opisu stały w jednej linii (karty i tak są równej wysokości —
   rozciąga je siatka albo tor karuzeli). Gdy karta ma cenę, w dół schodzi
   razem z przyciskami, bo w makiecie stoją jako jeden blok. */
.msm-dieta__akcje { margin-top: auto; }
.msm-dieta__cena:has(+ .msm-dieta__akcje) { margin-top: auto; }
.msm-dieta__cena:has(+ .msm-dieta__akcje) + .msm-dieta__akcje { margin-top: .875rem; }
/* W makiecie oba przyciski stoją w jednym rzędzie — dlatego węższy padding
   i możliwość zawinięcia tekstu dopiero przy bardzo wąskiej karcie. */
.msm-dieta__akcje .msm-btn {
	flex: 1 1 0;
	min-width: 0;
	padding-inline: .875rem;
	font-size: var(--msm-text-s);
	white-space: nowrap;
}

/* Wariant „siatka" sekcji diet: wszystkie karty naraz, bez strzałek.
   Kafel (.msm-dieta) jest ten sam co w karuzeli — różni się tylko kontener. */
.msm-diety__siatka {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 700px) { .msm-diety__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .msm-diety__siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* W karuzeli szerokość kafla ustawia tor; w siatce daje ją kolumna. */
.msm-diety__siatka .msm-dieta { width: auto; }

/* Wariant „pasek poziomy" (ekran Menu z makiety): karta na szerokość
   kontenera, zdjęcie po lewej, treść w środku, przyciski w kolumnie po prawej.
   Karta jest tu biała, bo sekcja stoi na kremowym tle — odwrotnie niż
   w karuzeli na stronie głównej. */
.msm-diety__poziomo {
	display: grid;
	/* minmax(0, 1fr), nie samo 1fr: domyślne minimum ścieżki to min-content,
	   a przyciski mają white-space: nowrap — na telefonie rozpychały kartę
	   poza szerokość ekranu i cała strona dostawała poziomy suwak. */
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2rem);
}
.msm-diety__poziomo .msm-dieta { width: auto; }
.msm-dieta--poziomo {
	gap: clamp(1.25rem, 3vw, 2rem);
	padding: clamp(.75rem, 1.5vw, 1rem);
	background: var(--msm-bialy);
	box-shadow: var(--msm-cien);
}
/* Tagi wychodzą ponad górną krawędź zdjęcia, więc karta nie może ich obciąć —
   marginesem robimy im miejsce wewnątrz karty. */
.msm-dieta--poziomo .msm-dieta__media { margin-top: 1rem; }
@media (min-width: 900px) {
	.msm-dieta--poziomo { flex-direction: row; align-items: center; }
	/* Szerokość kolumny ze zdjęcia w makiecie. Kadr ma tę samą proporcję co
	   w karuzeli, żeby talerz się mieścił — pasek jest przez to wyższy niż
	   w makiecie (383×240), na co klient się zgodził. Kolumna jest węższa niż
	   w makiecie, bo przy pełnych 24 rem karta miałaby 400 px wysokości. */
	.msm-dieta--poziomo .msm-dieta__media {
		flex: 0 0 clamp(15rem, 26%, 19rem);
		margin-top: 0;
	}
	/* Tytuł, opis i cena idą w kolumnie 1, przyciski stoją obok w kolumnie 2
	   przez całą wysokość — dlatego grid, a nie kolejny flex. */
	.msm-dieta--poziomo .msm-dieta__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		/* Wiersze muszą być jawne: bez nich „grid-row: 1 / -1" na przyciskach
		   liczy się do ostatniej linii siatki JAWNEJ, czyli do linii 1, i zamiast
		   objąć całą kolumnę rozpychał sam wiersz tytułu. */
		grid-template-rows: repeat(3, auto);
		align-items: center;
		align-content: center;
		column-gap: clamp(1.5rem, 4vw, 3rem);
		padding-block: 0;
		padding-inline: clamp(1rem, 2.5vw, 1.75rem) 0;
	}
	.msm-dieta--poziomo .msm-dieta__tytul,
	.msm-dieta--poziomo .msm-dieta__opis,
	.msm-dieta--poziomo .msm-dieta__cena { grid-column: 1; }
	/* Pasek poziomy nie spycha niczego w dół — przyciski stoją w kolumnie obok,
	   wyśrodkowane względem zdjęcia, więc kasujemy marginesy z kafla pionowego. */
	.msm-dieta--poziomo .msm-dieta__cena,
	.msm-dieta--poziomo .msm-dieta__akcje { margin-top: 0; }
	.msm-dieta--poziomo .msm-dieta__akcje {
		grid-column: 2;
		grid-row: 1 / -1;
		flex-direction: column;
		width: 12rem;
	}
	/* W karuzeli przyciski dzielą szerokość karty; tutaj stoją jeden pod drugim
	   i mają pełną szerokość kolumny. */
	.msm-dieta--poziomo .msm-dieta__akcje .msm-btn {
		flex: 0 0 auto;
		width: 100%;
		padding-inline: 1.25rem;
		font-size: var(--msm-text-m);
	}
}

/* --- Strefy dostaw ------------------------------------------------------ */
/* Pasek w kolorze bg w tle sekcji. Dolna krawędź paska ma wypadać 97 px pod
   mapą: mapa jest najwyższym elementem rzędu, więc przy padding-bottom 160 px
   pasek kończy się 63 px nad dołem sekcji (160 − 97 = 63). */
.msm-strefy { padding-top: 95px; padding-bottom: 160px; }
/* Pod karuzelą 80 px. Padding, nie margines — sekcja maluje własne tło.
   Na stronie głównej zostaje odstęp z makiety (0), z tego samego powodu
   co przy regule zwijania paddingów wyżej. */
.msm-diety { padding-bottom: 0; }
body:not(.home) .msm-diety { padding-bottom: 80px; }

@media (min-width: 960px) {
	.msm-strefy.msm-section--light {
		background: linear-gradient(
			to bottom,
			var(--msm-bialy) 0 220px,
			var(--msm-bg) 220px calc(100% - 63px),
			var(--msm-bialy) calc(100% - 63px) 100%
		);
	}
}
@media (max-width: 767px) {
	.msm-strefy { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

/* minmax(0, 1fr): zwykłe 1fr nie schodzi poniżej najszerszego elementu (pole kodu
   z przyciskiem) — na telefonie kolumna miała 420 px, ekran rozszerzał się do tej
   szerokości i przesuwał też nagłówek oraz dolny pasek akcji. */
.msm-strefy__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: end;
}
@media (min-width: 960px) {
	/* Zero odstępu w rzędzie: czerwony panel ma przylegać do mapy, nie wisieć
	   obok niej. Pionowy gap zostaje z reguły bazowej. */
	.msm-strefy__inner { grid-template-columns: 1.05fr 1fr; column-gap: 0; }
	.msm-strefy__mapa { position: relative; z-index: 2; }
	.msm-strefy__kolumna { position: relative; z-index: 1; }
}
.msm-strefy__mapa { position: relative; }
.msm-strefy__mapa, .msm-strefy__kolumna { min-width: 0; }
.msm-strefy__mapa-img,
.msm-strefy__embed {
	display: block;
	width: 100%;
	border: 0;
	border-radius: var(--msm-radius-duzy);
	box-shadow: var(--msm-cien);
}
/* Kadr mapy z makiety jest poziomy (ok. 7:5). Przy proporcji zbliżonej do
   kwadratu mapa rosła wyżej niż kolumna z panelem i pigułkami i sekcja
   robiła się nienaturalnie wysoka. */
.msm-strefy__embed { aspect-ratio: 7 / 5; min-height: 18rem; }
/* Na desktopie mapa ma być wysoka — proporcja 7:5 dawałaby mniej niż 570 px. */
@media (min-width: 960px) {
	.msm-strefy__embed,
	.msm-strefy__mapa-img { min-height: 65vh; object-fit: cover; }
	/* Mapa wypełnia cały rząd. Na węższych desktopach (ok. 960–1280 px) tekst
	   panelu łamie się na więcej wierszy i kolumna z panelem i pigułkami robi
	   się wyższa niż 65vh — mapa wyrównana do dołu zostawała wtedy niższa,
	   a panel wystawał nad nią (uwaga Anny, 15.10). */
	.msm-strefy__mapa { align-self: stretch; display: flex; flex-direction: column; }
	.msm-strefy__embed,
	.msm-strefy__mapa-img { flex: 1 1 auto; height: auto; aspect-ratio: auto; }
}
.msm-strefy__panel {
	padding: clamp(1.75rem, 4vw, 3rem);
	background: var(--msm-red);
	border-radius: 0 60px 60px 0;
	color: var(--msm-bialy);
}
.msm-strefy__tytul { margin-bottom: 1rem; color: var(--msm-n25); }
.msm-strefy__tekst { margin-bottom: 1.75rem; }
.msm-strefy__tekst:has(+ .msm-strefy__tekst) { margin-bottom: .75rem; }
.msm-strefy__miasta {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}
/* Po regułach bazowych, bo wcześniejszy blok 960 px przegrałby z „padding: 0”
   przy tej samej specyficzności. */
@media (min-width: 960px) {
	.msm-strefy__panel { padding: 60px; }
	/* Pigułki zaczynają się 60 px za prawą krawędzią mapy */
	.msm-strefy__miasta { padding-left: 60px; }
}

/* Mapa stref (Leaflet). Wymiary daje .msm-strefy__embed; tu tylko skorupa
   i legenda. Do załadowania kafelków widać kolor tła zamiast szarości Leafletu. */
.msm-strefy__leaflet { position: relative; z-index: 0; overflow: hidden; background: var(--msm-bg); }
.msm-strefy__leaflet.leaflet-container { background: var(--msm-bg); font-family: inherit; }
.msm-strefy__leaflet .leaflet-tooltip { font-size: var(--msm-text-s); font-weight: var(--msm-semibold); color: var(--msm-n900); }
.msm-strefy__leaflet .leaflet-control-attribution { font-size: 11px; }
/* Mapa dopasowuje się do Polski z ułamkowym zoomem (zoomSnap .25), więc Leaflet skaluje
   kafelki transformacją i przy ułamkowym DPR / zoomie przeglądarki między nimi
   prześwitują jasne linie. Kafelek o pół piksela większy zakrywa szczelinę;
   łatka Leafleta 1.9 (mix-blend-mode: plus-lighter) musi wtedy zejść, bo sumuje
   kolory na zakładce i linia robi się jeszcze jaśniejsza. */
.msm-strefy__leaflet .leaflet-tile-container img.leaflet-tile {
	width: 256.5px !important;
	height: 256.5px !important;
	mix-blend-mode: normal;
}
.msm-strefy__legenda {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	z-index: 800;
	display: flex;
	flex-wrap: wrap;
	gap: .375rem 1rem;
	margin: 0;
	padding: .5rem .875rem;
	list-style: none;
	background: rgba(255, 255, 255, .92);
	border-radius: var(--msm-radius-pill);
	box-shadow: var(--msm-cien);
	font-size: var(--msm-text-xs);
	font-weight: var(--msm-semibold);
	color: var(--msm-n900);
	pointer-events: none;
}
.msm-strefy__legenda li { display: flex; align-items: center; gap: .4rem; }
.msm-strefy__kropka { width: .625rem; height: .625rem; border-radius: 50%; border: 1px solid #fff; background: var(--msm-n700); }
.msm-strefy__kropka--0 { background: var(--msm-red); }
/* Na wąskim ekranie legenda idzie do góry — na dole jest podpis OpenStreetMap. */
@media (max-width: 959px) {
	.msm-strefy__legenda { bottom: auto; top: 1rem; left: auto; right: 1rem; }
}

/* Wyszukiwarka kodu: pole jest całą pigułką i wchodzi pod przycisk, więc
   wokół pary pole + przycisk nie zostaje biała obwódka. Reguła trzyma się
   sekcji strefy — newsletter dalej korzysta z pigułki z obwódką. */
.msm-strefy .msm-pole-inline {
	position: relative;
	display: block;
	padding: 0;
	background: transparent;
	border-radius: var(--msm-radius-pill);
}
.msm-strefy .msm-kodpocztowy__input {
	width: 100%;
	min-height: 3.375rem;
	/* Zapas z prawej na przycisk leżący na polu */
	padding: .9375rem 9rem .9375rem 1.5rem;
	background: var(--msm-n100);
}
.msm-strefy .msm-kodpocztowy:focus-within { box-shadow: none; }
.msm-strefy .msm-kodpocztowy__input:focus-visible {
	outline: 2px solid var(--msm-bialy);
	outline-offset: 2px;
}
/* „Sprawdź” domyka pole od prawej: obrys 1 px w czerwieni, wypełnienie
   w kolorze tła strony, napis czerwony. Przycisk siedzi w samej krawędzi pola
   (inset 0) — zapas zostawiał wokół niego jasny pierścień pigułki, czego
   klient nie chciał. Na hover wypełnia się czerwienią, a napis schodzi do
   koloru tła. */
.msm-strefy .msm-pole-inline .msm-btn {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	background: var(--msm-bg);
	border: 1px solid var(--msm-red);
	color: var(--msm-red);
}
.msm-strefy .msm-pole-inline .msm-btn:hover,
.msm-strefy .msm-pole-inline .msm-btn:focus-visible {
	background: var(--msm-red-hover);
	border-color: var(--msm-red-hover);
	color: var(--msm-bg);
}


/* --- Hero podstrony ------------------------------------------------------ */
.msm-heros { position: relative; background: var(--msm-bg); overflow: hidden; }
/* Na telefonie zdjęcie jest zwykłym blokiem NAD tekstem (logika z Home-mobile),
   więc okruszki, tytuł i lead zawsze leżą na jednolitym tle. Tłem sekcji staje
   się dopiero od 900px, gdzie w kadrze zostaje miejsce na tekst po lewej. */
.msm-heros__tlo {
	position: relative;
	/* width musi być jawne — inaczej przy max-height przeglądarka liczy
	   szerokość z proporcji i zdjęcie przestaje sięgać krawędzi ekranu */
	width: 100%;
	aspect-ratio: 16 / 9;
	/* Na tablecie 16/9 urosłoby na pół ekranu — wyżej kadr się nie wspina */
	max-height: 17.5rem;
}
/* Kadr trzymamy prawą krawędzią — tam na zdjęciach hero stoi danie */
.msm-heros__tlo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}
.msm-heros__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
/* Dolny odstęp zostaje na każdej szerokości — o tyle podciąga się cennik */
.msm-heros--ma-tlo .msm-heros__inner {
	padding-bottom: clamp(5rem, 9vw, 8rem);
}
/* Treść zostaje w lewej części, żeby nie wchodziła na zdjęcie */
.msm-heros__tresc { max-width: min(100%, 40rem); }
.msm-okruszki { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.msm-okruszki__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--msm-text-s);
	color: var(--msm-n500);
}
.msm-okruszki__item { display: flex; align-items: center; }
.msm-okruszki__item + .msm-okruszki__item::before {
	content: "\203A";
	margin-right: .75rem;
	color: var(--msm-n400);
}
.msm-okruszki__item a { color: var(--msm-n700); text-decoration: none; }
.msm-okruszki__item a:hover { color: var(--msm-red); }
.msm-heros__tytul { margin-bottom: 1rem; }
.msm-heros--dlugi .msm-heros__tytul { font-size: var(--msm-h2); line-height: var(--msm-h2-lh); }
/* Na telefonie H2 (30 px) dawał nadal 6 wierszy tytułu strony miasta. */
@media (max-width: 599px) {
	.msm-heros--dlugi .msm-heros__tytul { font-size: 1.625rem; line-height: 1.25; }
}
@media (min-width: 900px) {
	/* Szersza kolumna dla długiego tytułu; kremowe przejście (::after) i tak trzyma czytelność. */
	.msm-heros--dlugi .msm-heros__tresc { max-width: 42rem; }
}
.msm-heros__lead { max-width: 38rem; color: var(--msm-n800); font-weight: var(--msm-semibold) }
.msm-heros__akcje { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2rem); }
.msm-heros__media { pointer-events: none; }
.msm-heros__img { width: 100%; height: auto; border-radius: var(--msm-radius-duzy); }

@media (min-width: 900px) {
	/* Zdjęcie wraca jako tło sekcji — tekst mieści się obok kadru */
	.msm-heros__tlo { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; }
	.msm-heros--ma-tlo .msm-heros__inner { min-height: clamp(20rem, 30vw, 26rem); }
	.msm-heros__tresc { max-width: 34rem; }
	/* Kremowe przejście po lewej. Kadry hero mają jasną połowę wrysowaną
	   w plik, ale „cover" przy wysokiej sekcji przycina ją od lewej i danie
	   wchodzi pod tekst (widać to było na FAQ, gdzie tytuł ma dwa wiersze).
	   Gradient daje tytułowi własne tło niezależnie od tego, jakie zdjęcie
	   wgra redakcja — a tam, gdzie jasna połowa zostaje, jest niewidoczny. */
	.msm-heros__tlo::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			90deg,
			var(--msm-bg) 0,
			var(--msm-bg) 30%,
			rgba(252, 245, 242, 0) 62%
		);
	}
}

/* --- Cennik -------------------------------------------------------------- */
.msm-cennik {
	/* O tyle nagłówek tabeli wystaje nad zdjęcie w tle — jedno pokrętło */
	--msm-cennik-wysuniecie: 70px;
	position: relative;
	z-index: 1;
	margin-top: -80px;
	padding-block: 0;
	/* Białe tło, żeby podciągnięta sekcja przykryła dół hero */
	background: var(--msm-bialy);
}
.msm-cennik__filtry {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	padding: 50px 40px 160px;
}
@media (min-width: 900px) {
	.msm-cennik__filtry { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
	/* Pionowa kreska między grupami filtrów */
	.msm-cennik__grupa--posilki {
		padding-left: clamp(2rem, 4vw, 4rem);
		border-left: 1px solid var(--msm-n200);
	}
}
/* Wiersz nad paskiem: etykieta z lewej, strzałki z prawej. Strzałki nie stoją
   po bokach paska (jak w jadłospisie), bo na 390 px zjadłyby ponad ćwierć
   szerokości — a pasek diet ma być jak najdłuższy. */
.msm-cennik__naglowek {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}
.msm-cennik__etykieta {
	margin: 0;
	font-size: var(--msm-text-m);
	font-weight: var(--msm-bold);
	color: var(--msm-naglowek);
}
.msm-cennik__nawigacja { display: flex; flex: 0 0 auto; gap: .5rem; }
/* display: flex wygrywa z regułą przeglądarki dla [hidden] — bez tego atrybut
   nic nie chowa (ani bez JS, ani gdy pasek nie ma czego przewijać). */
.msm-cennik__nawigacja[hidden] { display: none; }
.msm-cennik__pigulki .msm-pigulka[hidden] { display: none; }
.msm-cennik__strzalka {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background: var(--msm-bialy);
	border: 1px solid var(--msm-n300);
	border-radius: 50%;
	color: var(--msm-n900);
	cursor: pointer;
	transition: border-color var(--msm-przejscie), color var(--msm-przejscie), opacity var(--msm-przejscie);
}
.msm-cennik__strzalka:not(:disabled):hover { border-color: var(--msm-red); color: var(--msm-red); }
.msm-cennik__strzalka:disabled { opacity: .35; cursor: not-allowed; }
.msm-cennik__strzalka svg { width: 1.125rem; height: 1.125rem; }
.msm-cennik__pigulki { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Pigułka filtra — nieaktywna i aktywna (czerwony obrys i tekst) */
.msm-pigulka {
	padding: .8125rem 1.5rem;
	background: var(--msm-bialy);
	border: 1px solid var(--msm-n300);
	border-radius: var(--msm-radius-pill);
	font-family: var(--msm-font);
	font-size: var(--msm-text-m);
	line-height: var(--msm-text-m-lh);
	font-weight: var(--msm-semibold);
	color: var(--msm-n900);
	cursor: pointer;
	transition: border-color var(--msm-przejscie), color var(--msm-przejscie), background var(--msm-przejscie);
}
.msm-pigulka:disabled {
	opacity: .4;
	cursor: not-allowed;
	background: var(--msm-bialy);
	border-color: var(--msm-n200);
	color: var(--msm-n500);
}
.msm-pigulka:not(:disabled):hover,
.msm-pigulka:focus-visible,
.msm-pigulka.is-aktywna {
	background: var(--msm-bg);
	border-color: var(--msm-red);
	color: var(--msm-red);
}

/* Przełączanie zakładek: bez JS działa serwerowe "hidden", z JS klasa
   .is-widoczna, którą można animować. */
.msm-cennik--js .msm-cennik__tabela { display: none; }
.msm-cennik--js .msm-cennik__tabela.is-widoczna {
	display: block;
	animation: msm-zakladka .5s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes msm-zakladka {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.msm-cennik--js .msm-cennik__tabela.is-widoczna { animation: none; }
}

/* Tło ze zdjęciem pod tabelą, przypisem i przyciskiem */
/* Zdjęcie w tle startuje --msm-cennik-wysuniecie niżej niż sekcja, więc
   nagłówek tabeli zostaje nad nim, na białym tle. Treści nie ruszamy —
   ujemny margines na niej sklejałby się z marginesem tła. */
.msm-cennik__tlo { position: relative; padding-block: 0 clamp(3rem, 7vw, 6rem); }
.msm-cennik__tlo-media { position: absolute; inset: var(--msm-cennik-wysuniecie) 0 0 0; }
.msm-cennik__tlo-img { width: 100%; height: 100%; object-fit: cover; }
.msm-cennik__tlo-inner { position: relative; }

/* Tabela: każda kolumna to osobna zaokrąglona karta */
.msm-tabela {
	width: 100%;
	border-collapse: separate;
	border-spacing: 8px 0;
	table-layout: fixed;
}
.msm-tabela th,
.msm-tabela td {
	padding: .875rem .75rem;
	text-align: center;
	/* Ceny w kolorze nagłówków (#101828), nie w szarości akapitu — w tabeli
	   cennika to najważniejsza liczba na stronie, a n600 gubiło ją obok
	   ciemnej kolumny kcal (uwaga klienta: „kolory fontów w tabelce coś się
	   rozjechały"). Czerwień zostaje wyłącznie na kolumnie promocyjnej. */
	color: var(--msm-n900);
	background: var(--msm-n25);
	border-inline: 1px solid var(--msm-red);
}
.msm-tabela__kcal {
	border-inline-color: var(--msm-n200) !important;
	font-weight: var(--msm-semibold);
	color: var(--msm-naglowek);
}
.msm-tabela thead .msm-tabela__kcal {
	background: var(--msm-n900);
	color: var(--msm-bialy);
	border-color: var(--msm-n900);
	border-radius: var(--msm-radius-duzy) var(--msm-radius-duzy) 0 0;
}
.msm-tabela thead th {
	padding: .75rem .75rem .875rem;
	font-size: var(--msm-text-m);
	line-height: 1.3;
	font-weight: var(--msm-extrabold);
	color: var(--msm-red);
	border-top: 1px solid var(--msm-red);
	border-bottom: 1px solid var(--msm-red);
	border-radius: var(--msm-radius-duzy) var(--msm-radius-duzy) 0 0;
	background-color: var(--msm-bg);
}
.msm-tabela__naglowek { display: block; }
.msm-tabela__badge {
	display: inline-block;
	margin-top: .375rem;
	padding-block: 5px;
	line-height: 1.9;
	position: absolute;
    left: 10%;
    right: 10%;
}
.msm-tabela thead .msm-tabela__kolumna--wyroz {
	background: var(--msm-red);
	color: var(--msm-bialy);
	border-color: var(--msm-red);
	position: relative;
}
/* Pierwszy rząd danych oddycha od nagłówka. Padding musi siedzieć na
   komórkach — na <tr> przeglądarka go ignoruje. */
.msm-tabela tbody tr:first-child th,
.msm-tabela tbody tr:first-child td {
	padding-top: 35px;
}
.msm-tabela tbody th,
.msm-tabela tbody td { border-bottom: 1px solid var(--msm-n300); }
.msm-tabela tbody tr:last-child th,
.msm-tabela tbody tr:last-child td {
	border-bottom: 1px solid var(--msm-red);
	border-radius: 0 0 var(--msm-radius-duzy) var(--msm-radius-duzy);
}
.msm-tabela tbody tr:last-child .msm-tabela__kcal { border-bottom-color: var(--msm-n200); }
.msm-tabela__cena--wyroz { color: var(--msm-red); font-weight: var(--msm-bold); }

/* Notka i „Zamów” konkretnej diety — tuż pod jej tabelą. */
.msm-cennik__zamow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: .75rem 1.25rem;
	margin-top: 1.25rem;
}
.msm-cennik__notka {
	margin: 0 auto 0 0;
	font-size: var(--msm-text-s);
	line-height: var(--msm-text-s-lh);
	font-weight: var(--msm-semibold);
	color: var(--msm-red);
}
.msm-cennik__notka .msm-akcent { font-weight: var(--msm-bold); }

/* Przypis pod tabelą — biały panel z przyciskiem na dolnej krawędzi */
.msm-cennik__nota {
	position: relative;
	max-width: 56rem;
	margin: clamp(2.5rem, 5vw, 4rem) auto 0;
	padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 3rem) clamp(2.5rem, 4vw, 3rem);
	background: var(--msm-bialy);
	border-radius: var(--msm-radius-pill);
	text-align: center;
	box-shadow: var(--msm-cien);
}
.msm-cennik__nota-tekst { margin: 0; color: var(--msm-n700); }
.msm-cennik__nota .msm-akcent { font-weight: var(--msm-bold); color: var(--msm-red); }
.msm-cennik__nota .msm-btn {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	white-space: nowrap;
}

/* Na wąskich ekranach tabela zamienia się w listę kart */
@media (max-width: 767px) {
	/* Na telefonie tabela to lista kart — nie ma nagłówka do wysuwania */
	.msm-cennik { --msm-cennik-wysuniecie: 0px; }
	/* Domyślne 50px/40px/160px zostawiałoby pod filtrami pusty ekran */
	.msm-cennik__filtry {
		gap: 1.5rem;
		padding: 2rem 1rem 1.75rem;
	}
	.msm-cennik__tlo { padding-top: clamp(2rem, 6vw, 3rem); }

	/* Nazwy diet nie mieszczą się obok siebie, a zawinięte robią z filtra
	   listę na pół ekranu. Dlatego jeden przewijany w poziomie pasek —
	   tak samo jak dni w jadłospisie (.msm-menu__dni). Pigułki dojeżdżają
	   do krawędzi ekranu, więc ucięta pigułka od razu mówi, że da się
	   przesunąć.

	   Bez min-width: 0 na grupie kolumna gridu rozciąga się do min-content
	   paska (sumy pigułek): nic się nie przewija, pasek po prostu wystaje
	   poza ekran. */
	.msm-cennik__grupa { min-width: 0; }
	.msm-cennik__pigulki {
		flex-wrap: nowrap;
		gap: .5rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 1rem;
		margin-inline: -1rem;
		padding: .25rem 1rem;
	}
	.msm-cennik__pigulki::-webkit-scrollbar { display: none; }
	.msm-cennik__pigulki .msm-pigulka {
		flex: 0 0 auto;
		scroll-snap-align: start;
		white-space: nowrap;
		padding: .6875rem 1.125rem;
		font-size: var(--msm-text-s);
	}

	.msm-tabela, .msm-tabela thead, .msm-tabela tbody, .msm-tabela tr, .msm-tabela th, .msm-tabela td { display: block; }
	.msm-tabela thead { display: none; }
	.msm-tabela { border-spacing: 0; }
	/* Odstęp od nagłówka tabeli jest tu bez sensu — pierwsza karta ma własny */
	.msm-tabela tbody tr:first-child th,
	.msm-tabela tbody tr:first-child td { padding-top: .75rem; }
	/* Bez cienia — czerwony obrys sam oddziela kartę od tła, a poświata
	   z --msm-cien tylko brudziła krawędzie. */
	.msm-tabela tbody tr {
		margin-bottom: 1rem;
		border: 1px solid var(--msm-red);
		border-radius: var(--msm-radius-duzy);
		overflow: hidden;
		background: var(--msm-bialy);
	}
	.msm-tabela tbody th,
	.msm-tabela tbody td { border: 0; border-bottom: 1px solid var(--msm-n200); text-align: left; }
	.msm-tabela tbody tr th {
		padding: .75rem 1rem;
		background: var(--msm-n900);
		color: var(--msm-bialy);
		text-align: center;
		font-size: var(--msm-text-l);
		font-weight: var(--msm-extrabold);
	}
	/* „1200” samo w sobie nic nie znaczy — nagłówek KCAL jest tylko w thead,
	   którego na telefonie nie ma. */
	.msm-tabela tbody tr th::after {
		content: " " attr(data-etykieta);
		font-size: var(--msm-text-xs);
		font-weight: var(--msm-semibold);
		letter-spacing: .12em;
		text-transform: uppercase;
		opacity: .65;
	}
	/* Etykieta z lewej, kwota z prawej — cenę widać bez czytania całej linii */
	.msm-tabela tbody td {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: baseline;
		gap: .25rem 1rem;
		padding: .75rem 1rem;
		background: var(--msm-bialy);
		font-weight: var(--msm-bold);
		color: var(--msm-naglowek);
	}
	/* Baza 55% zamiast auto: przy długiej etykiecie („Promocja -35%
	   (od 25 dni) kod MANU35”) flexbox łamałby wiersz przed zwężeniem
	   i kwota spadała pod spód. Z węższą bazą etykieta zawija się sama,
	   a kwota zostaje przy prawej krawędzi karty. */
	.msm-tabela tbody td::before {
		content: attr(data-etykieta);
		flex: 1 1 55%;
		min-width: 0;
		font-size: var(--msm-text-s);
		font-weight: var(--msm-regular);
		line-height: 1.35;
		color: var(--msm-n500);
	}
	.msm-tabela tbody td.msm-tabela__cena--wyroz {
		background: var(--msm-bg);
		font-size: var(--msm-text-l);
		color: var(--msm-red);
	}
	/* Badge („Najniższa cena”) siedzi w thead, więc na kartach dokładamy go
	   z data-badge — w osobnym wierszu pod ceną. */
	.msm-tabela tbody td[data-badge]::after {
		content: attr(data-badge);
		flex: 1 0 100%;
		font-size: var(--msm-text-xs);
		font-weight: var(--msm-extrabold);
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--msm-red);
	}
	.msm-tabela tbody tr:last-child th,
	.msm-tabela tbody tr:last-child td { border-radius: 0; }
	.msm-tabela tbody tr td:last-child { border-bottom: 0; }

	/* Pigułka na wąskim panelu robi się owalem, który zjada boki tekstu */
	.msm-cennik__nota {
		padding: 1.75rem 1.25rem 2.75rem;
		border-radius: var(--msm-radius-duzy);
	}
}

/* --- Popup (wynik sprawdzenia kodu) ------------------------------------ */
.msm-dialog {
	max-width: min(30rem, calc(100vw - 2rem));
	padding: 0;
	border: 0;
	border-radius: var(--msm-radius-duzy);
	background: var(--msm-bialy);
	box-shadow: var(--msm-cien), 0 24px 60px rgba(16, 24, 40, .18);
}
.msm-dialog::backdrop { background: rgba(16, 24, 40, .55); }
.msm-dialog__panel { padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center; }
.msm-dialog__wynik {
	margin-bottom: .5rem;
	font-size: var(--msm-h4);
	line-height: var(--msm-h4-lh);
	font-weight: var(--msm-extrabold);
	color: var(--msm-naglowek);
}
.msm-dialog__wynik--tak { color: var(--msm-tag); }
.msm-dialog__wynik--nie { color: var(--msm-red); }
.msm-dialog__wynik--blad { color: var(--msm-n600); }
.msm-dialog__opis { color: var(--msm-n600); }
.msm-dialog__opis:empty { display: none; }
/* „Powiadom o dowozie” — pola pod wynikiem „nie dowozimy” (parts/sekcje/strefy.php).
   Pola dziedziczą globalny wygląd inputów (pigułka, tło n100), układamy je w kolumnę
   na szerokość okna; przycisk „Zamknij” schodzi wtedy do roli linku. */
.msm-powiadom {
	display: grid;
	gap: .75rem;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--msm-n100);
	text-align: left;
}
/* [hidden] musi wygrać z display: grid — formularz ma być widoczny tylko przy „nie dowozimy”. */
.msm-powiadom[hidden] { display: none; }
/* To samo dla przycisków przełączanych atrybutem hidden (link „Zobacz diety” przy „dowozimy”). */
.msm-btn[hidden] { display: none; }
.msm-powiadom__intro { margin: 0; color: var(--msm-n800); font-weight: var(--msm-semibold); }
.msm-powiadom__btn { width: 100%; }
.msm-powiadom .msm-zapis__komunikat { margin: 0; }
.msm-powiadom .msm-zapis__komunikat[hidden] { display: none; }
.msm-powiadom__zgoda { margin: 0; font-size: var(--msm-text-xs); line-height: var(--msm-text-xs-lh); color: var(--msm-n600); }
.msm-powiadom__zgoda a { color: inherit; text-decoration: underline; }
.msm-powiadom + .msm-btn--link { margin-top: 1rem; }
/* Wersja w karcie popupu (parts/popup-promocja.php): ciasniej, mniejsze pola. */
.msm-powiadom--kompakt { gap: .5rem; margin-top: .75rem; padding-top: .75rem; }
.msm-powiadom--kompakt .msm-powiadom__intro { font-size: var(--msm-text-s); line-height: var(--msm-text-s-lh); }
.msm-powiadom--kompakt .msm-powiadom__input { padding: .6rem 1rem; font-size: var(--msm-text-s); }

/* --- Kafle z etykietą --------------------------------------------------- */
.msm-kalk { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 760px) { .msm-kalk { grid-template-columns: 1fr 1fr; } }
.msm-kalk__media { position: relative; margin-bottom: 2rem; }
.msm-kalk__img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--msm-radius-duzy); }
.msm-kalk__etykieta {
	position: absolute;
	bottom: -1.25rem;
	left: 0;
	margin: 0;
	padding: .75rem 2rem;
	background: linear-gradient(90deg,rgba(244, 74, 78, 1) 0%, rgba(255, 163, 165, 1) 100%);
	border-radius: 0 50px 50px 0;
	border-top: solid 1px var(--msm-n25);
	border-bottom: solid 1px var(--msm-n25);
	border-right: solid 1px var(--msm-n25);
	font-size: var(--msm-h3);
	font-weight: var(--msm-extrabold);
	color: var(--msm-n25);
}
.msm-kalk__opis { margin-bottom: .5rem; color: var(--msm-n600); padding-left: 33px;}
.msm-kalk__karta .msm-btn--link { margin-left: 33px; }

/* --- CTA na zdjęciu (dzień próbny) ------------------------------------- */
.msm-test { position: relative; padding-block: var(--msm-sekcja-y); background: var(--msm-bg); overflow: hidden; }
.msm-test__media { position: absolute; inset: 0; }
/* <picture> jest inline — bez tego img nie ma od czego wziąć height: 100%.
   Te same kontenery dostają kadr mobilny przez msm_obraz_tla(). */
.msm-test__media picture,
.msm-heros__tlo picture,
.msm-cennik__tlo-media picture,
.msm-panel__tlo picture { display: block; width: 100%; height: 100%; }
.msm-test__img { width: 100%; height: 100%; object-fit: cover; }
.msm-test__inner { position: relative; max-width: 62rem; text-align: center; }
.msm-test__tytul { margin-bottom: 1rem; }
.msm-test__tekst { max-width: 40rem; margin-inline: auto; color: var(--msm-n600); }
.msm-test__panel {
	position: relative;
	margin: clamp(1.75rem, 4vw, 2.75rem) 0 clamp(2rem, 4vw, 3rem);
	padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2rem) clamp(2.5rem, 4vw, 3rem);
	background: rgba(255, 255, 255, .82);
	border-radius: var(--msm-radius-pill);
	/* Cień „box" z projektu — panel ma odstawać od zdjęcia (uwagi klienta). */
	box-shadow: var(--msm-cien);
	backdrop-filter: blur(2px);
}
/* Przycisk siedzi na dolnej krawędzi pigułki — jak w makiecie */
.msm-test__panel .msm-btn {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	white-space: nowrap;
}
.msm-test__cena { margin: 0; font-size: var(--msm-text-xl); font-weight: var(--msm-bold); color: var(--msm-naglowek); }
.msm-test__kwota { font-size: 30px; font-weight: var(--msm-extrabold); color: var(--msm-red); }

/* --- O nas -------------------------------------------------------------- */
.msm-onas__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
@media (min-width: 960px) { .msm-onas__inner { grid-template-columns: 5fr 6fr; } }
.msm-onas__media { position: relative; margin: 0; }
.msm-onas__img { width: 100%; height: auto; border-radius: var(--msm-radius-duzy); }
.msm-onas__sygnet {
	position: absolute;
	bottom: 1.5rem; left: clamp(-2.5rem, -2vw, -1rem);
	width: clamp(72px, 9vw, 110px);
	height: auto;
	background: var(--msm-bialy);
	border-radius: 50%;
	padding: .375rem;
}
.msm-onas__tytul { margin-bottom: 1.5rem; }
/* Kolory treści idą za tłem wybranym w edytorze. Tytuł dwukolorowy ma tu
   wariant „odwrotny/czerwony pierwszy", więc wyróżniona jest pierwsza część —
   i to ona bierze akcent sekcji. Druga część zostaje na kolorze kontrastowym
   (biała na ciemnym i czerwonym, granatowa na jasnym) z msm_klasa_tytulu(). */
.msm-onas .msm-onas__tytul.msm-tytul { color: var(--msm-akcent-sekcji); }
.msm-onas .msm-prose .msm-tekst-red,
.msm-onas .msm-prose strong.msm-tekst-red { color: var(--msm-akcent-sekcji); }
/* Pigułki pod tekstem (np. lista diet) — ten sam komponent co filtry jadłospisu,
   tylko jako linki: biała pigułka zostaje czytelna także na ciemnym tle sekcji. */
.msm-onas__pigulki {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}
.msm-pigulka--link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--msm-n900);
}
/* Hover pigułki też idzie za tłem — na czerwonej sekcji czerwona obwódka
   i czerwony tekst na białej pigułce gubiły się w tle. */
.msm-onas .msm-pigulka--link:hover,
.msm-onas .msm-pigulka--link:focus-visible {
	border-color: var(--msm-akcent-sekcji);
	color: var(--msm-akcent-sekcji);
}
.msm-onas { position: relative; overflow: hidden; }
.msm-onas__akcje { margin-top: 2rem; }
/* Dekoracja pod tekstem — nie rozpycha kolumny, wystaje w prawo */
.msm-onas__dekor {
	margin-top: -30px;
	text-align: right;
	pointer-events: none;
	margin-bottom: -15rem;
}
.msm-onas__dekor-img { display: inline-block; width: clamp(200px, 30vw, 430px); height: auto; }
.msm-section--dark .msm-prose { color: var(--msm-n200); }
/* Wyróżnienie w treści (span/strong z klasą) w kolorze marki */
.msm-prose .msm-tekst-red,
.msm-prose strong.msm-tekst-red { color: var(--msm-red); }

/* --- Program (statystyki + wideo) -------------------------------------- */
.msm-program__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
@media (min-width: 960px) { .msm-program__inner { grid-template-columns: 1fr 1fr; } }
.msm-program__tytul { margin-bottom: 1.5rem; }
.msm-program__staty {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
}
.msm-staty {
	min-width: 7rem;
	padding: 1rem 1.5rem;
	background: var(--msm-bg);
	border-radius: var(--msm-radius);
	box-shadow: var(--msm-cien);
	text-align: center;
}
.msm-staty--wyroz { background: var(--msm-red); }
.msm-staty__wartosc {
	display: block;
	font-size: var(--msm-h3);
	line-height: 1.1;
	font-weight: var(--msm-extrabold);
	color: var(--msm-red);
}
.msm-staty__opis { display: block; font-size: var(--msm-text-m); font-weight: var(--msm-bold); color: var(--msm-naglowek); }
.msm-staty--wyroz .msm-staty__wartosc,
.msm-staty--wyroz .msm-staty__opis { color: var(--msm-bialy); }
.msm-program__tekst { color: var(--msm-n600); }
.msm-program__akcje { margin-top: 1.75rem; }
.msm-program__img { width: 100%; border-radius: var(--msm-radius-duzy); }
.msm-program__link { display: block; }

/* --- Atuty -------------------------------------------------------------- */
.msm-atuty { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 3.125rem); }
@media (min-width: 760px) { .msm-atuty { grid-template-columns: 1fr 1fr; } }
.msm-atut { display: flex; gap: clamp(1rem, 2vw, 1.75rem); align-items: flex-start; }
.msm-atut__ikona-box {
	flex: none;
	display: grid;
	place-items: center;
	width: clamp(72px, 8vw, 104px);
	aspect-ratio: 1;
	padding: 1.125rem;
	background: var(--msm-bialy);
	border-radius: var(--msm-radius-duzy);
	box-shadow: var(--msm-cien);
}
.msm-atut__ikona-box > * { width: 100%; height: 100%; color: var(--msm-red); }
.msm-atut__tag { margin-bottom: .75rem; }
.msm-atut__tytul { margin-bottom: .5rem; font-size: var(--msm-h4); line-height: var(--msm-h4-lh); }
.msm-atut__opis { margin: 0; color: var(--msm-n600); font-weight: var(--msm-semibold);}
.msm-section--dark .msm-atut__opis { color: var(--msm-n300); }

/* --- Kroki (numerowane etapy) --------------------------------------------
   Ta sama gramatyka co komponent „Cecha" z makiety (kwadratowy kafel z cieniem
   po lewej, treść po prawej) — tylko w kaflu jest numer, a nie ikona. Zestaw
   ikon z Figmy nie pokrywa wszystkich etapów, więc numer jest tu nośnikiem.
   ---------------------------------------------------------------------- */
.msm-kroki__lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.75rem, 3.5vw, 3rem);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
@media (min-width: 860px) {
	.msm-kroki__lista { grid-template-columns: 1fr 1fr; }
}
.msm-krok {
	display: flex;
	align-items: flex-start;
	gap: clamp(1rem, 2vw, 1.5rem);
}
.msm-krok__box {
	flex: none;
	display: grid;
	place-items: center;
	width: clamp(72px, 8vw, 104px);
	aspect-ratio: 1;
	padding: .75rem;
	background: var(--msm-bialy);
	border-radius: var(--msm-radius-duzy);
	box-shadow: var(--msm-cien);
}
.msm-krok__nr {
	font-size: var(--msm-h3);
	line-height: 1;
	font-weight: var(--msm-extrabold);
	color: var(--msm-red);
	font-variant-numeric: tabular-nums;
}
.msm-krok__tytul { margin: .25rem 0 .5rem; font-size: var(--msm-h4); line-height: var(--msm-h4-lh); }
.msm-krok__opis { margin: 0; color: var(--msm-n600); }
.msm-section--dark .msm-krok__opis,
.msm-section--red .msm-krok__opis { color: var(--msm-n200); }
/* Na ciemnym i czerwonym tle kafel zostaje biały — kontrast robi tło. */
.msm-section--dark .msm-krok__box,
.msm-section--red .msm-krok__box { box-shadow: none; }

/* Układ „pasek": trzy etapy w rzędzie, ikona w kaflu, numer przy tytule.
   Chevron między etapami tylko na szerokich ekranach — w kolumnie nie ma
   kierunku, w którym miałby wskazywać. */
.msm-kroki--pasek {
	--msm-kroki-odstep: clamp(1.5rem, 3vw, 2.5rem);
	--msm-krok-box: clamp(64px, 6vw, 84px);
}
.msm-kroki--pasek .msm-kroki__lista { gap: var(--msm-kroki-odstep); }
@media (min-width: 860px) {
	.msm-kroki--pasek .msm-kroki__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.msm-kroki--pasek .msm-krok {
	position: relative;
	align-items: flex-start;
	gap: clamp(.75rem, 1.5vw, 1.25rem);
}
.msm-kroki--pasek .msm-krok__box { width: var(--msm-krok-box); }
.msm-kroki--pasek .msm-krok__tytul { font-size: var(--msm-text-l); line-height: 1.35; }
.msm-kroki--pasek .msm-krok__opis { font-size: var(--msm-text-s); }
.msm-kroki--pasek .msm-krok__box { padding: 1.125rem; }
.msm-krok__ikona { width: 100%; height: 100%; color: var(--msm-red); }
.msm-krok__licznik { color: var(--msm-red); }
@media (min-width: 860px) {
	/* Strzałka między etapami: jeden pseudoelement z grafiką SVG, dokładnie
	   na szerokość odstępu siatki i na wysokości środka kafla. Dwa
	   pseudoelementy (linia + grot) trzeba było zgrywać ręcznie i przy
	   zmianie odstępu rozjeżdżały się. */
	.msm-kroki--pasek .msm-krok:not(:last-child)::after {
		content: "";
		position: absolute;
		top: calc(var(--msm-krok-box) / 2 - 7px);
		left: 100%;
		width: var(--msm-kroki-odstep);
		height: 14px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 14'%3E%3Cpath d='M2 7h33m-6-5 6 5-6 5' fill='none' stroke='%23B1D749' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	}
}

/* --- Ścieżki ------------------------------------------------------------ */
.msm-sciezki__lista { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 760px) { .msm-sciezki__lista { grid-template-columns: 1fr 1fr; } }
.msm-sciezka { background: var(--msm-bg); border-radius: var(--msm-radius-duzy); overflow: hidden; }
.msm-sciezka__media { padding: 0; }
.msm-sciezka__img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--msm-radius-duzy);
	box-shadow: var(--msm-cien);
}
.msm-sciezka__body { padding: clamp(1.25rem, 2.5vw, 2rem); }
.msm-sciezka__tytul { margin-bottom: .625rem; font-size: var(--msm-h4); line-height: var(--msm-h4-lh); }
.msm-sciezka__opis { color: var(--msm-n600); }

/* --- Okazje (lista okazji z linkiem po wycenę) ---------------------------
   Wiersz powtarza gramatykę komponentu „Cecha" (kwadrat po lewej, treść
   obok), ale całą powierzchnią jest linkiem — dlatego hover zachowuje się
   jak w przycisku „ghost": obrys czerwienieje, a strzałka odjeżdża w prawo.
   ---------------------------------------------------------------------- */
.msm-okazje__lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 860px) {
	.msm-okazje__lista { grid-template-columns: 1fr 1fr; }
}
.msm-okazja__link {
	display: flex;
	align-items: center;
	gap: clamp(.875rem, 2vw, 1.5rem);
	height: 100%;
	padding: clamp(1rem, 2vw, 1.5rem);
	background: var(--msm-bialy);
	border: 1.5px solid var(--msm-obramowanie);
	border-radius: var(--msm-radius-duzy);
	color: var(--msm-naglowek);
	text-decoration: none;
	transition: border-color var(--msm-przejscie), box-shadow var(--msm-przejscie);
}
a.msm-okazja__link:hover,
a.msm-okazja__link:focus-visible {
	border-color: var(--msm-red);
	box-shadow: var(--msm-cien);
	color: var(--msm-naglowek);
}
.msm-okazja__nr {
	flex: none;
	display: grid;
	place-items: center;
	width: clamp(48px, 5vw, 60px);
	aspect-ratio: 1;
	background: var(--msm-bg);
	border-radius: var(--msm-radius);
	font-size: var(--msm-text-l);
	font-weight: var(--msm-extrabold);
	font-variant-numeric: tabular-nums;
	color: var(--msm-red);
}
.msm-okazja__body { flex: 1 1 auto; min-width: 0; }
.msm-okazja__tytul {
	display: block;
	font-size: var(--msm-text-l);
	line-height: var(--msm-text-l-lh);
	font-weight: var(--msm-bold);
}
.msm-okazja__opis {
	display: block;
	margin-top: .25rem;
	font-size: var(--msm-text-s);
	line-height: var(--msm-text-m-lh);
	color: var(--msm-n500);
}
.msm-okazja__akcja {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: var(--msm-text-s);
	font-weight: var(--msm-bold);
	color: var(--msm-red);
}
.msm-okazja__strzalka { width: 1rem; height: 1rem; transition: transform var(--msm-przejscie); }
a.msm-okazja__link:hover .msm-okazja__strzalka,
a.msm-okazja__link:focus-visible .msm-okazja__strzalka { transform: translateX(.25rem); }
/* Na ciemnym i czerwonym tle kafel jest wycięciem w tle, nie białą kartą. */
.msm-section--dark .msm-okazja__link,
.msm-section--red .msm-okazja__link {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .35);
	color: var(--msm-bialy);
}
.msm-section--dark .msm-okazja__nr,
.msm-section--red .msm-okazja__nr { background: rgba(255, 255, 255, .12); }
.msm-section--dark .msm-okazja__opis,
.msm-section--red .msm-okazja__opis { color: var(--msm-n200); }
.msm-section--red .msm-okazja__akcja,
.msm-section--red .msm-okazja__nr { color: var(--msm-bialy); }
.msm-section--red a.msm-okazja__link:hover,
.msm-section--red a.msm-okazja__link:focus-visible { border-color: var(--msm-bialy); box-shadow: none; }

/* --- Wycena (czego potrzebujemy do kalkulacji) ---------------------------
   Kafel ma fakturę kafli statystyk z sekcji „program": biały prostokąt
   z cieniem „box" i dużą czerwoną liczbą nad tytułem.
   ---------------------------------------------------------------------- */
.msm-wycena__lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) { .msm-wycena__lista { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .msm-wycena__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.msm-wycena__punkt {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--msm-bialy);
	border-radius: var(--msm-radius-duzy);
	box-shadow: var(--msm-cien);
}
.msm-wycena__nr {
	display: block;
	margin-bottom: .75rem;
	font-size: var(--msm-h3);
	line-height: 1;
	font-weight: var(--msm-extrabold);
	font-variant-numeric: tabular-nums;
	color: var(--msm-red);
}
.msm-wycena__tytul {
	display: block;
	font-size: var(--msm-text-l);
	line-height: var(--msm-text-l-lh);
	font-weight: var(--msm-bold);
	color: var(--msm-naglowek);
}
.msm-wycena__opis {
	margin: .5rem 0 0;
	font-size: var(--msm-text-s);
	line-height: var(--msm-text-m-lh);
	color: var(--msm-n600);
}
.msm-wycena__akcje { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
/* Na ciemnym tle kafel zostaje biały — kontrast robi tło, jak w krokach. */
.msm-section--dark .msm-wycena__punkt,
.msm-section--red .msm-wycena__punkt { box-shadow: none; }

/* --- Licznik ------------------------------------------------------------ */

.msm-licznik { position: relative; overflow: hidden; }
.msm-licznik__inner { position: relative; }
.msm-licznik__tytul { margin-bottom: 1rem; }
.msm-licznik__tekst { color: var(--msm-n600); max-width: 34rem; }
.msm-section--dark .msm-licznik__tekst { color: var(--msm-n300); }

/* Rząd: zielony pas w tle, na nim etykieta i zegar (zegar wystaje poza pas) */
.msm-licznik__zestaw {
	position: relative;
	z-index: 3; /* etykieta i zegar zawsze nad zdjęciem */
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	width: 100%;
	margin-top: clamp(2rem, 5vw, 3.5rem);
	padding-left: clamp(1.5rem, 3vw, 2.5rem);
}
.msm-licznik__pas {
	position: absolute;
	left: 0;
	top: 50%;
	z-index: 0;
	width: 100%;
	height: clamp(4.5rem, 7vw, 6.25rem);
	transform: translateY(-50%);
	background: var(--msm-tag);
	border-radius: var(--msm-radius-pill);
	box-shadow: var(--msm-cien);
}

@media only screen and (max-width:767px) {
	.msm-licznik__pas {
		border-radius: 30px 0 0 30px;
		left: auto;
		right: -20px;
	}
}
.msm-licznik__etykieta {
	position: relative;
	z-index: 1;
	flex: none;
	font-weight: var(--msm-bold);
	color: var(--msm-n900);
}

/* Zegar: biała tarcza z czerwonym pierścieniem, który wypełnia się w czasie */
.msm-licznik__zegar {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: clamp(8rem, 13vw, 12.5rem);
	aspect-ratio: 1;
	flex: none;
}
.msm-licznik__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.msm-licznik__ring circle { fill: none; }
.msm-licznik__tor { stroke: var(--msm-red); stroke-width: 1.5; opacity: .55; }
.msm-licznik__postep {
	stroke: var(--msm-red);
	stroke-width: 6;
	stroke-linecap: round;
	/* Obwód dla r=46; JS przestawia tylko stroke-dashoffset */
	stroke-dasharray: 289.03;
	stroke-dashoffset: 289.03;
	transition: stroke-dashoffset .9s linear;
}
.msm-licznik__czas {
	position: relative;
	display: grid;
	place-items: center;
	width: 86%;
	aspect-ratio: 1;
	background: var(--msm-bialy);
	border-radius: 50%;
	font-size: clamp(1.125rem, 1.6vw, 1.5rem);
	font-weight: var(--msm-extrabold);
	color: var(--msm-naglowek);
	font-variant-numeric: tabular-nums;
}

/* Przycisk „Zamów” pod pasem — w linii z tytułem i tekstem */
.msm-licznik__akcje {
	position: relative;
	z-index: 3;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.msm-licznik__media { position: relative; }
/* Zdjęcie jest wycinanką z kanałem alfa, więc cień rysuje filtr — box-shadow
   narysowałby prostokąt wokół przezroczystego tła (uwaga klienta: „cień pod
   torbą i pudełkiem, jak na projekcie"). */
.msm-licznik__img { width: 100%; height: auto; filter: drop-shadow(0 18px 26px rgba(243, 74, 77, .28)); }

/* Nadpisania na desktop MUSZĄ być po regułach bazowych — inaczej przegrywają
   kolejnością (media query nie podnosi specyficzności). */
@media (min-width: 960px) {
	.msm-licznik__tresc { max-width: min(44rem, 55%); }
	/* Pas ma 80 % szerokości treści i wyrównanie do lewej */
	.msm-licznik__zestaw { width: 80%; }
	/* Zdjęcie zajmuje pół ekranu i dobiega do prawej krawędzi, nad pasem */
	/* Sekcja ma overflow: hidden, więc przy 50vw dolna krawędź ucinała cień
	   pod pudełkiem; na 40vw cień kończy się w sekcji. */
	.msm-licznik__media {
		position: absolute;
		right: calc((100% - 100vw) / 2 + 2vw);
		top: -6%;
		width: 40vw;
		z-index: 5;
	}
}

/* --- Opinie ------------------------------------------------------------- */
.msm-opinia {
	display: flex;
	flex-direction: column;
	gap: .875rem;
	margin: 0;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--msm-bialy);
	border: 1px solid var(--msm-red);
	border-radius: var(--msm-radius-duzy);
	box-shadow: var(--msm-cien);
}
.msm-opinia__head { display: flex; align-items: center; gap: .75rem; }
.msm-opinia__avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; flex: none; }
.msm-opinia__avatar--pusty { background: var(--msm-red); }
.msm-opinia__dane { display: flex; flex-direction: column; }
.msm-opinia__autor { font-weight: var(--msm-extrabold); color: var(--msm-naglowek); }
.msm-opinia__kiedy { font-size: var(--msm-text-s); color: var(--msm-n500); }
.msm-opinia__zrodlo { margin-left: auto; font-size: var(--msm-text-s); font-weight: var(--msm-extrabold); color: var(--msm-n400); }
.msm-opinia__gwiazdki { margin: 0; color: #FFB300; letter-spacing: .1em; }
.msm-opinia__tresc { margin: 0; color: var(--msm-n600); }


/* --- Widget opinii (Trustindex) ----------------------------------------
   CSS wtyczki przychodzi z jej CDN i ma bardzo specyficzne selektory z
   !important (np. .ti-widget[data-layout-id="4"] .ti-review-item .ti-inner).
   Dlatego celujemy przez identyfikator kontenera — selektor z #id bije każdy
   łańcuch klas, niezależnie od jego długości.
   -------------------------------------------------------------------- */

/* Nagłówek i stopka widgetu: ocenę pokazujemy własnym blokiem wyżej */
#msm-opinie-widget .ti-widget-header,
#msm-opinie-widget .ti-header,
#msm-opinie-widget .ti-footer,
#msm-opinie-widget .ti-widget-brand,
#msm-opinie-widget .ti-verified-by-widget { display: none !important; }

/* Podpowiedzi pokazywane po najechaniu — w makiecie ich nie ma */
#msm-opinie-widget .ti-tooltip,
#msm-opinie-widget .ti-verified-tooltip { display: none !important; }

/* .ti-review-item to slajd — jego padding robi odstęp między kaflami */
#msm-opinie-widget .ti-review-item {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
}
/* Karta: pierwszy element w slajdzie (wtyczka nie zawsze zostawia .ti-inner) */
#msm-opinie-widget .ti-review-item > *,
#msm-opinie-widget .ti-review-item .ti-inner {
	background: var(--msm-n25) !important;
	border: 1px solid var(--msm-red) !important;
	border-radius: 30px !important;
	box-shadow: none !important;
	padding: 30px 50px 50px !important;
	margin: 0 !important;
	height: auto !important;
}
#msm-opinie-widget .ti-review-item > * > * {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Typografia karty */
#msm-opinie-widget .ti-name {
	font-family: var(--msm-font) !important;
	font-size: var(--msm-text-m) !important;
	font-weight: var(--msm-extrabold) !important;
	color: var(--msm-naglowek) !important;
}
#msm-opinie-widget .ti-date {
	font-size: var(--msm-text-s) !important;
	color: var(--msm-n500) !important;
}
#msm-opinie-widget .ti-review-text,
#msm-opinie-widget .ti-review-content {
	font-family: var(--msm-font) !important;
	font-size: var(--msm-text-m) !important;
	line-height: var(--msm-text-m-lh) !important;
	color: var(--msm-n600) !important;
}
/* Skrót treści do trzech pełnych wierszy — wtyczka ucinała tekst w połowie linii */
#msm-opinie-widget .ti-review-text-container,
#msm-opinie-widget .ti-review-content {
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	max-height: none !important;
	overflow: hidden !important;
}
#msm-opinie-widget .ti-stars .ti-star,
#msm-opinie-widget .ti-star svg { color: #FFB300 !important; fill: #FFB300 !important; }
#msm-opinie-widget .ti-read-more,
#msm-opinie-widget .ti-read-more a {
	font-size: var(--msm-text-s) !important;
	color: var(--msm-n500) !important;
	text-decoration: none !important;
}
#msm-opinie-widget .ti-read-more a:hover { color: var(--msm-red) !important; }

/* Strzałki: 50x50, tło bg, obwódka n25, cień, chevron n800 rysowany przez motyw */
#msm-opinie-widget .ti-next,
#msm-opinie-widget .ti-prev {
	display: grid !important;
	place-items: center !important;
	width: 50px !important;
	height: 50px !important;
	background: var(--msm-bg) !important;
	background-image: none !important;
	border: 1.5px solid var(--msm-n25) !important;
	border-radius: 50% !important;
	box-shadow: var(--msm-cien) !important;
	color: var(--msm-n800) !important;
	cursor: pointer;
	font-size: 0 !important;
}
#msm-opinie-widget .ti-next::before,
#msm-opinie-widget .ti-prev::before {
	content: "" !important;
	display: block !important;
	width: 11px !important;
	height: 11px !important;
	border-right: 2.5px solid currentColor !important;
	border-bottom: 2.5px solid currentColor !important;
	border-top: 0 !important;
	border-left: 0 !important;
	background: none !important;
	mask: none !important;
	-webkit-mask: none !important;
	top: auto;
    bottom: auto;
    left: auto;
    right: auto;
}
#msm-opinie-widget .ti-next::before { transform: rotate(-45deg) translate(-1px, -1px) !important; }
#msm-opinie-widget .ti-prev::before { transform: rotate(135deg) translate(-1px, -1px) !important; }
#msm-opinie-widget .ti-next::after,
#msm-opinie-widget .ti-prev::after { display: none !important; }

/* Kropki dokładane przez motyw */
#msm-opinie-widget .msm-karuzela__kropki { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* --- Instagram ---------------------------------------------------------- */
.msm-instagram__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--msm-gap);
	margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.msm-instagram__tytul { margin: 0; max-width: 30rem; }
.msm-instagram__social { display: flex; align-items: center; gap: 1rem; }
.msm-instagram__etykieta { font-weight: var(--msm-bold); }
.msm-kadr { margin: 0; }
.msm-kadr__link { display: block; }
.msm-kadr__img {
	width: 100%;
	aspect-ratio: 5 / 8;
	object-fit: cover;
	border-radius: var(--msm-radius-duzy);
	/* Cień neutralny, nie firmowy czerwony — sekcja ma czerwone tło, na którym
	   czerwony cień nie istnieje (uwaga klienta: „brak cienia pod kaflami"). */
	box-shadow: var(--msm-cien);
}
.msm-kadr__handle {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: .75rem;
	font-size: var(--msm-text-s);
	font-weight: var(--msm-semibold);
}
.msm-kadr__handle span { color: var(--msm-n800)}
.msm-kadr__ikona { width: 1.25rem; height: 1.25rem; flex: none; }

/* --- Blog (sekcja) ------------------------------------------------------ */
.msm-blog__lista { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 760px) { .msm-blog__lista { grid-template-columns: repeat(3, 1fr); } }
.msm-artykul { display: flex; flex-direction: column; gap: 1rem; }
.msm-artykul__kafel {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--msm-radius-duzy);
	overflow: hidden;
	text-decoration: none;
}
.msm-artykul__img, .msm-artykul__placeholder {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.msm-artykul__placeholder { background: linear-gradient(135deg, var(--msm-bg), var(--msm-n300)); }
/* Czerwona poświata na dole kafla, żeby tytuł był czytelny */
.msm-artykul__kafel::after {
	content: "";
	position: absolute;
	inset: 40% 0 0 0;
	background: linear-gradient(180deg, rgba(243, 74, 77, 0) 0%, rgba(243, 74, 77, .92) 100%);
}
.msm-artykul__data { position: absolute; top: 1rem; left: 1rem; z-index: 2; }
.msm-artykul__tytul {
	position: absolute;
	bottom: 1.25rem; left: 1.25rem; right: 1.25rem;
	z-index: 2;
	font-size: var(--msm-h4);
	line-height: var(--msm-h4-lh);
	font-weight: var(--msm-extrabold);
	color: var(--msm-bialy);
}
.msm-artykul__link { align-self: flex-start; }
/* Kategoria i czas czytania pod kaflem (makieta: „Poradnik · 4 min”) */
.msm-artykul__meta { margin: -.25rem 0 0; font-size: var(--msm-text-s); font-weight: var(--msm-semibold); color: var(--msm-n500); }

/* --- Blog: lista wpisów (home.php, kategorie) --------------------------- */
.msm-blog-top__wpis {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}
@media (min-width: 900px) { .msm-blog-top__wpis { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.msm-blog-top__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--msm-radius-duzy);
	overflow: hidden;
	box-shadow: var(--msm-cien);
}
.msm-blog-top__img { width: 100%; height: 100%; object-fit: cover; }
.msm-blog-top__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1rem;
	font-size: var(--msm-text-s);
	font-weight: var(--msm-semibold);
	color: var(--msm-n500);
}
.msm-blog-top__tytul { margin-bottom: 1rem; }
.msm-blog-top__tytul a { color: inherit; text-decoration: none; }
.msm-blog-top__tytul a:hover { color: var(--msm-red); }
.msm-blog-top__lead { margin-bottom: 1.75rem; color: var(--msm-n600); }
.msm-blog-lista__kategorie {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.msm-blog-lista__kategorie .msm-pigulka { text-decoration: none; }

/* --- Blog: pojedynczy wpis ---------------------------------------------- */
.msm-single__head { padding-block: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); background: var(--msm-bg); }
/* Wpis ma szerokość treści całej strony (.msm-container): nagłówek, okładka i tekst w jednej kolumnie. */
.msm-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin-bottom: 1rem;
	font-size: var(--msm-text-s);
	font-weight: var(--msm-semibold);
	color: var(--msm-n500);
}
.msm-single__meta .msm-tag { text-decoration: none; }
.msm-single__tytul { margin: 0; }
.msm-single__lead { margin: 1rem 0 0; font-size: var(--msm-text-l, 1.125rem); color: var(--msm-n700); }
.msm-single__cover { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.msm-single__cover img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--msm-radius-duzy);
	box-shadow: var(--msm-cien);
}
/* .msm-prose (46 rem) stoi niżej w pliku — podwójna klasa, żeby wygrać kolejność. */
.msm-prose.msm-single__tresc { max-width: none; font-size: var(--msm-text-l); line-height: 1.7; color: var(--msm-n800); }
.msm-single__tresc figure { margin-block: 2em; }
.msm-single__tresc blockquote {
	margin-inline: 0;
	padding: 1rem 1.5rem;
	border-left: 4px solid var(--msm-red);
	background: var(--msm-bg);
	border-radius: 0 var(--msm-radius) var(--msm-radius) 0;
	font-weight: var(--msm-semibold);
}

/* --- Kontakt ------------------------------------------------------------ */
.msm-kontakt { position: relative; z-index: 2; padding-bottom: 0; }
/* Karta wchodzi na sekcję poniżej — jak w makiecie */
.msm-kontakt__karta {
	margin-bottom: calc(-1 * clamp(2.5rem, 7vw, 8rem));
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 4rem);
	padding: clamp(1.75rem, 4vw, 4rem);
	background: var(--msm-bialy);
	border-radius: var(--msm-radius-duzy);
	box-shadow: var(--msm-cien);
}
/* Wariant „bez cienia" (pole „Styl karty" w ACF). Stoi za regułą karty, bo
   ma tę samą specyficzność i rozstrzyga kolejność w pliku. */
.msm-kontakt__karta--plaska { box-shadow: none; }
@media (min-width: 960px) { .msm-kontakt__karta { grid-template-columns: 1fr 1fr; } }
.msm-kontakt__tytul { margin-bottom: 1rem; }
.msm-kontakt__tekst { color: var(--msm-n600); }
.msm-kontakt__lista { list-style: none; margin: 1.75rem 0; padding: 0; }
.msm-kontakt__lista li { margin-bottom: 1rem; }
.msm-kontakt__lista a {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	font-size: var(--msm-text-l);
	font-weight: var(--msm-semibold);
	color: var(--msm-naglowek);
	text-decoration: none;
}
.msm-kontakt__lista a:hover { color: var(--msm-red); }
.msm-kontakt__ikona { width: 1.75rem; height: 1.75rem; color: var(--msm-red); flex: none; }
/* Zapas po słuchawce przy drugim numerze: lista stoi do lewej, więc numery
   równają się w kolumnie bez powtarzania ikony. */
.msm-kontakt__ikona--pusta { display: inline-block; }
/* Numery to jedna dana kontaktowa, więc stoją bliżej siebie niż telefon i e-mail. */
.msm-kontakt__lista li + li.msm-kontakt__lista-numer { margin-top: -.5rem; }
.msm-kontakt__faq { margin-top: 2.5rem; }
.msm-kontakt__faq-tekst { color: var(--msm-n600); }

/* Layout formularza (placeholder do podmiany na shortcode) */
.msm-form-placeholder__pole { margin-bottom: 1rem; }
.msm-form-placeholder__label {
	display: block;
	margin-bottom: .375rem;
	font-size: var(--msm-text-s);
	font-weight: var(--msm-semibold);
	color: var(--msm-n700);
}
.msm-form-placeholder__input {
	display: block;
	padding: .9375rem 1.25rem;
	background: var(--msm-n100);
	border: 1px solid var(--msm-n25);
	border-radius: var(--msm-radius-pill);
	box-shadow: var(--msm-cien);
	font-size: var(--msm-text-xs);
	line-height: var(--msm-text-xs-lh);
	font-weight: var(--msm-semibold);
	color: var(--msm-n500);
}
.msm-form-placeholder__input--duze { min-height: 7rem; border-radius: var(--msm-radius); }
.msm-form-placeholder__zgoda {
	display: flex;
	gap: .75rem;
	font-size: var(--msm-text-s);
	color: var(--msm-n500);
}
.msm-form-placeholder__checkbox {
	flex: none;
	width: 1.25rem; height: 1.25rem;
	background: var(--msm-n50);
	border: 1px solid var(--msm-n300);
	border-radius: .25rem;
}
.msm-form-placeholder__akcje { display: flex; justify-content: flex-end; margin: 0; }


/* --- Formularz kontaktowy (Contact Form 7) ------------------------------
   Klasy .msm-form* pochodzą z szablonu formularza w CF7, reszta (.wpcf7-*)
   to markup wtyczki. Layout ma być identyczny z makietą.
   ---------------------------------------------------------------------- */
.msm-form .wpcf7-form-control-wrap { display: block; }
.msm-form__pole { margin-bottom: 1rem; }
.msm-form__pole label {
	display: block;
	margin-bottom: .375rem;
	font-size: var(--msm-text-s);
	line-height: var(--msm-text-s-lh);
	font-weight: var(--msm-semibold);
	color: var(--msm-n700);
}
.msm-form textarea { min-height: 8rem; }

/* Zgoda RODO: kwadratowy checkbox i drobny tekst z linkiem */
.msm-form__zgoda { margin: 1.25rem 0 0; }
.msm-form__zgoda .wpcf7-list-item { margin: 0; }
.msm-form__zgoda label {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	margin: 0;
	font-size: var(--msm-text-xs);
	line-height: var(--msm-text-xs-lh);
	font-weight: var(--msm-regular);
	color: var(--msm-n500);
	cursor: pointer;
}
/* Checkbox rysowany przez motyw (appearance: none): natywny ignoruje tło
   i obramowanie, a w telefonie z ciemnym trybem przeglądarka malowała go
   na grafitowo (strona deklaruje „light dark” — header.php). */
.msm-form__zgoda input[type="checkbox"] {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: .125rem 0 0;
	appearance: none;
	-webkit-appearance: none;
	background: var(--msm-n100) center / 75% no-repeat;
	border: 1px solid var(--msm-n300);
	border-radius: .25rem;
	cursor: pointer;
	transition: background-color var(--msm-przejscie), border-color var(--msm-przejscie);
}
.msm-form__zgoda input[type="checkbox"]:checked {
	background-color: var(--msm-red);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	border-color: var(--msm-red);
}
.msm-form__zgoda input[type="checkbox"]:focus-visible { outline: 2px solid var(--msm-red); outline-offset: 2px; }
.msm-form__zgoda a { color: var(--msm-n900); text-decoration: underline; }
.msm-form__zgoda a:hover { color: var(--msm-red); }

.msm-form__akcje {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .75rem;
	margin: 1.5rem 0 0;
}

/* Załącznik (CV w formularzu Kariera): pole w stylu inputów, przycisk
   wyboru pliku jako jasnoróżowa pigułka jak .msm-btn--soft. */
.msm-form input[type="file"] {
	width: 100%;
	padding: .5rem;
	background: var(--msm-n100);
	border: 1px dashed var(--msm-n300);
	border-radius: var(--msm-radius-pill);
	font: inherit;
	font-size: var(--msm-text-s);
	color: var(--msm-n600);
	cursor: pointer;
}
.msm-form input[type="file"]::file-selector-button {
	margin-right: .875rem;
	padding: .5rem 1.125rem;
	background: var(--msm-bg);
	border: 0;
	border-radius: var(--msm-radius-pill);
	font: inherit;
	font-weight: var(--msm-semibold);
	color: var(--msm-red);
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.msm-form input[type="file"]:hover::file-selector-button { background: var(--msm-red); color: #fff; }
.msm-form input[type="file"]:focus-visible { outline: 2px solid var(--msm-red); outline-offset: 2px; }
.msm-form__podpowiedz {
	display: block;
	margin-top: .375rem;
	font-size: var(--msm-text-xs);
	color: var(--msm-n500);
}

/* Komunikaty walidacji */
.msm-form .wpcf7-not-valid-tip {
	margin-top: .375rem;
	font-size: var(--msm-text-s);
	color: var(--msm-red);
}
.msm-form .wpcf7-form-control.wpcf7-not-valid { border-color: var(--msm-red); }
.wpcf7 .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: .875rem 1.25rem;
	border: 1px solid var(--msm-n200);
	border-radius: var(--msm-radius);
	font-size: var(--msm-text-s);
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--msm-tag);
	background: rgba(177, 215, 73, .18);
	color: var(--msm-n900);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: var(--msm-red);
	background: rgba(243, 74, 77, .08);
	color: var(--msm-red-hover);
}
.wpcf7-spinner { margin: 0; }

/* --- Kanały kontaktu ----------------------------------------------------- */
/* Nagłówek stoi po lewej, same kanały są wyśrodkowane w swoich kolumnach. */
.msm-kanaly .msm-section__head { margin-bottom: clamp(2.5rem, 6vw, 5.5rem); }
.msm-kanaly__lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3rem);
	text-align: center;
}
.msm-section.msm-kanaly { padding-block: 80px; }
@media (min-width: 760px) {
	/* Kreski z makiety padają dokładnie na 1/3 i 2/3 szerokości, więc odstęp
	   między kanałami robi padding kolumn, a nie gap siatki. */
	
	.msm-kanaly__lista { grid-template-columns: repeat(3, 1fr); gap: 0; }
	/* Cztery pozycje (liczby na „O nas") — jeden rząd zamiast 3 + 1. */
	.msm-kanaly__lista:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
	.msm-kanal { padding-inline: clamp(.5rem, 1vw, 1rem); }
	.msm-kanal + .msm-kanal { border-left: 1px solid var(--msm-n200); }
}
.msm-kanal { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.msm-kanal__ikona { display: flex; color: var(--msm-red); }
/* Ikony z Figmy mają różne proporcje — wspólna jest wysokość (52 px w makiecie). */
.msm-kanal__svg { width: auto; height: 3.25rem; }
.msm-kanal__tytul { margin: .75rem 0 0; font-size: var(--msm-h4); line-height: var(--msm-h4-lh); }
/* Wariant „liczby": statystyki w miejsce kanałów kontaktu. Rozmiar h2, ale
   znacznik zostaje h3 — hierarchia nagłówków ma odpowiadać treści, nie
   wielkości liter. Licznik podbija JS (moduł [data-msm-licz]). */
.msm-kanaly--liczby .msm-kanal__tytul {
	margin: 0;
	font-size: var(--msm-h2);
	line-height: var(--msm-h2-lh);
	font-weight: var(--msm-extrabold);
	color: var(--msm-red);
	font-variant-numeric: tabular-nums;
}
.msm-kanaly--liczby .msm-kanal__opis { margin-top: .25rem; }
.msm-kanal__opis { margin: 0; color: var(--msm-n600); }
.msm-kanal__tekst { margin: .5rem 0 0; font-weight: var(--msm-extrabold); color: var(--msm-n900); }
.msm-kanal .msm-btn { margin-top: 1rem; }

/* --- Dane firmy ---------------------------------------------------------- */
/* Bez overflow na sekcji — sygnet ma wychodzić nad górną krawędź zdjęcia. */
.msm-firma {
	--msm-firma-y: clamp(2.5rem, 6vw, 4.5rem);
	position: relative;
	padding-block: var(--msm-firma-y);
}
.msm-firma__tlo { position: absolute; inset: 0; overflow: hidden; }
.msm-firma__tlo-img { width: 100%; height: 100%; object-fit: cover; }
.msm-firma__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	justify-items: center;
}
@media (min-width: 760px) {
	.msm-firma__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); justify-items: start; }
	.msm-firma__sygnet { justify-self: center; }
}
/* Sygnet wychodzi 30 px nad górną krawędź tła sekcji — jak w makiecie. */
.msm-firma__sygnet {
	align-self: start;
	margin-top: calc(-1 * (var(--msm-firma-y) + 30px));
}
.msm-firma__sygnet img {
	display: block;
	width: clamp(180px, 24vw, 300px);
	height: auto;
	background: var(--msm-bialy);
	border-radius: 50%;
	padding: .75rem;
	box-shadow: var(--msm-cien);
}
.msm-firma__tresc { color: var(--msm-n600); }
.msm-firma__tresc p { margin-bottom: .75rem; font-weight: var(--msm-semibold); }
.msm-firma__tresc strong { color: var(--msm-n900); font-weight: var(--msm-extrabold);}

/* Dane firmy i panel FAQ to w makiecie jeden pas na jednym zdjęciu, więc
   msm_render_sections() wkłada obie sekcje we wspólny wrapper. Sekcja firmy
   przestaje być kontekstem pozycjonowania i jej tło rozciąga się na cały pas,
   a panel nie rysuje już własnego kadru — bez tego na styku był szew. */
.msm-pas-foto { position: relative; }
.msm-pas-foto .msm-firma { position: static; }
.msm-pas-foto .msm-firma__tlo { inset: 0; }
.msm-pas-foto .msm-panel__tlo { display: none; }
/* Wspólny pas ma w makiecie proporcje samego zdjęcia (1440x673), więc obie
   sekcje dostają ciaśniejsze odstępy niż stojąc osobno. */
.msm-pas-foto .msm-firma { --msm-firma-y: clamp(2rem, 4.5vw, 2rem); }
.msm-pas-foto .msm-panel {
	padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5.5rem);
}

/* --- Panel na zdjęciu ---------------------------------------------------- */
.msm-panel { position: relative; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6rem); overflow: hidden; }
.msm-panel__tlo { position: absolute; inset: 0; }
.msm-panel__tlo-img { width: 100%; height: 100%; object-fit: cover; }
.msm-panel__inner { position: relative; }
.msm-panel__karta {
	position: relative;
	max-width: 60rem;
	margin-inline: auto;
	padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 3rem);
	background: var(--msm-bialy);
	border-radius: var(--msm-radius-pill);
	text-align: center;
	box-shadow: var(--msm-cien)
}
/* Pełne zaokrąglenie z makiety działa na szerokiej karcie; na telefonie karta
   jest wąska i --msm-radius-pill robi z niej owal. */
@media (max-width: 767px) {
	.msm-panel__karta { border-radius: 30px; }
}
.msm-panel__tytul { margin-bottom: .75rem; }
.msm-panel__tekst { margin: 0 auto; max-width: 34rem; color: var(--msm-n600); }
/* Przycisk mieści się w białej karcie, pod tekstem. Wcześniej wisiał w połowie
   na dolnej krawędzi karty, jak w makiecie, ale klient chce, żeby karta
   obejmowała całość razem z przyciskiem (uwaga, wrzesień 2026). */
.msm-panel__karta .msm-btn {
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
	white-space: nowrap;
}

/* --- Osoba przy formularzu ---------------------------------------------- */
/* Czerwone koło jest wtopione w plik z Figmy — motyw nie dorysowuje drugiego. */
.msm-osoba {
	--msm-osoba-w: clamp(13rem, 24vw, 20.5rem);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
}
.msm-osoba__zdjecie { flex: none; width: var(--msm-osoba-w); }
.msm-osoba__img { display: block; width: 100%; height: auto; }
.msm-osoba__podpis { padding-top: 0; }
@media (min-width: 640px) {
	/* Zdjęcie stoi na środku kolumny, podpis wychodzi obok głowy — jak w makiecie. */
	.msm-osoba { display: block; }
	.msm-osoba__zdjecie { margin-inline: auto; }
	.msm-osoba__podpis {
		position: absolute;
		top: calc(var(--msm-osoba-w) * .18);
		left: calc(50% + var(--msm-osoba-w) * .3);
	}
}
.msm-osoba__imie {
	display: block;
	font-size: var(--msm-text-l);
	font-weight: var(--msm-extrabold);
	color: var(--msm-naglowek);
}
.msm-osoba__rola { display: block; color: var(--msm-red); }

/* --- Kalkulatory (kalorie, BMI) ------------------------------------------
   Pola korzystają z bazowych styli formularzy (pigułka, tło n100, cień),
   więc tu opisujemy tylko układ, przełącznik płci i kartę wyniku.
   ---------------------------------------------------------------------- */
.msm-kalkulator__blok {
	max-width: 52rem;
	margin-inline: auto;
}
.msm-kalkulator__form {
	padding: clamp(1.5rem, 4vw, 3rem);
	background: var(--msm-bialy);
	border-radius: var(--msm-radius-duzy);
	box-shadow: var(--msm-cien);
}
.msm-kalkulator__plec { margin: 0 0 1.5rem; padding: 0; border: 0; }
.msm-kalkulator__label {
	display: block;
	margin-bottom: .5rem;
	padding: 0;
	font-size: var(--msm-text-s);
	font-weight: var(--msm-semibold);
	color: var(--msm-n700);
}

/* Przełącznik płci: dwie pigułki, zaznaczona jest czerwona. */
.msm-przelacznik {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
}
.msm-przelacznik__opcja { margin: 0; cursor: pointer; }
.msm-przelacznik__opcja input {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0;
}
.msm-przelacznik__opcja span {
	display: block;
	padding: .81rem 1.25rem;
	background: var(--msm-n100);
	border: 1px solid var(--msm-n25);
	border-radius: var(--msm-radius-pill);
	font-size: var(--msm-text-s);
	font-weight: var(--msm-semibold);
	color: var(--msm-n700);
	text-align: center;
	transition: background var(--msm-przejscie), color var(--msm-przejscie), border-color var(--msm-przejscie);
}
.msm-przelacznik__opcja input:checked + span {
	background: var(--msm-red);
	border-color: var(--msm-red);
	color: var(--msm-bialy);
}
.msm-przelacznik__opcja input:focus-visible + span {
	outline: 2px solid var(--msm-red);
	outline-offset: 2px;
}

.msm-kalkulator__pola {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 640px) {
	.msm-kalkulator__pola { grid-template-columns: 1fr 1fr; }
	.msm-kalkulator__pole--szerokie { grid-column: 1 / -1; }
}
.msm-kalkulator__pole { margin: 0; }

/* Jednostka (kg, cm, lat) siedzi w polu po prawej — stąd padding na input. */
.msm-kalkulator__input { position: relative; display: block; }
.msm-kalkulator__input input { padding-right: 3.5rem; }
.msm-kalkulator__jednostka {
	position: absolute;
	right: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--msm-text-s);
	font-weight: var(--msm-semibold);
	color: var(--msm-n500);
	pointer-events: none;
}

.msm-kalkulator__blad {
	margin: 1rem 0 0;
	font-size: var(--msm-text-s);
	font-weight: var(--msm-semibold);
	color: var(--msm-red);
}
.msm-kalkulator__akcje { margin-top: 1.75rem; text-align: center; }

/* Karta wyniku — pojawia się pod formularzem po obliczeniu. */
.msm-kalkulator__wynik {
	margin-top: 1.5rem;
	padding: clamp(1.5rem, 4vw, 3rem);
	background: var(--msm-red);
	border-radius: var(--msm-radius-duzy);
	color: var(--msm-bialy);
	text-align: center;
}
.msm-kalkulator__wynik:focus { outline: none; }
.msm-kalkulator__wynik-etykieta {
	margin: 0;
	font-size: var(--msm-text-s);
	font-weight: var(--msm-semibold);
	text-transform: uppercase;
	letter-spacing: .06em;
	opacity: .85;
}
.msm-kalkulator__wynik-liczba {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .5rem;
	margin: .25rem 0 0;
	font-size: clamp(2.5rem, 7vw, 4rem);
	line-height: 1.1;
	font-weight: var(--msm-extrabold);
}
.msm-kalkulator__wynik-jednostka { font-size: clamp(1rem, 2.5vw, 1.5rem); font-weight: var(--msm-bold); }
.msm-kalkulator__wynik-opis { margin: .5rem 0 0; font-weight: var(--msm-semibold); }

.msm-kalkulator__szczegoly {
	display: grid;
	grid-template-columns: 1fr;
	gap: .5rem 1.5rem;
	margin: 1.75rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid rgba(255, 255, 255, .3);
	text-align: left;
}
@media (min-width: 640px) {
	.msm-kalkulator__szczegoly { grid-template-columns: auto auto; justify-content: space-between; }
}
.msm-kalkulator__szczegoly dt { font-size: var(--msm-text-s); opacity: .85; }
.msm-kalkulator__szczegoly dd { margin: 0; font-weight: var(--msm-bold); }
@media (min-width: 640px) {
	.msm-kalkulator__szczegoly dd { text-align: right; }
}

/* Bez przygaszania — biel na czerwieni i tak jest na granicy czytelności. */
.msm-kalkulator__stopka {
	margin: 1.5rem 0 0;
	font-size: var(--msm-text-xs);
	line-height: var(--msm-text-xs-lh);
}
.msm-kalkulator__wynik-akcje {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
	margin-top: 1.75rem;
}
/* Na czerwonym tle przyciski muszą być jasne, nie czerwone. */
.msm-kalkulator__wynik .msm-btn--primary {
	background: var(--msm-bialy);
	border-color: var(--msm-bialy);
	color: var(--msm-red);
}
.msm-kalkulator__wynik .msm-btn--primary:hover { background: var(--msm-bg); }
.msm-kalkulator__wynik .msm-btn--ghost {
	background: transparent;
	border-color: var(--msm-bialy);
	color: var(--msm-bialy);
}
/* Kontakt mailowy pod przyciskami wyniku — dla osób z pytaniami. */
.msm-kalkulator__pytania {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .375rem .625rem;
	margin: 1.25rem 0 0;
	font-size: var(--msm-text-s);
	line-height: var(--msm-text-s-lh);
}
.msm-kalkulator__pytania-link {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	font-weight: var(--msm-bold);
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .2em;
}
.msm-kalkulator__pytania-link:hover { text-decoration-thickness: 2px; }
.msm-kalkulator__pytania-ikona { width: 1.125rem; height: 1.125rem; flex: none; }
.msm-kalkulator__pytania-ikona path { fill: currentColor; }
.msm-kalkulator__wynik .msm-btn--ghost:hover,
.msm-kalkulator__wynik .msm-btn--ghost:focus-visible {
	background: var(--msm-bialy);
	border-color: var(--msm-bialy);
	color: var(--msm-red);
}

/* Strona kalkulatora ma kremowe tło pod całą treścią, nie tylko pod sekcją. */
/* Strona kalkulatora: tło bierze się z sekcji, nie z <body>. Pastelowy pas
   zostaje pod formularzem, a sekcja z wyborem dań jest biała — uwaga klienta
   (wrzesień 2026): „tło do zróżnicowania". Body maluje się kremowo tylko tam,
   gdzie sekcji nie ma (np. pod stopką na krótkiej stronie). */
body.msm-strona-kalkulator { background: var(--msm-bg); }
body.msm-strona-kalkulator .msm-section--light { background: var(--msm-bialy); }

/* Cały kafel kalkulatora jest klikalny, a stan hover przycisku odpala się
   z dowolnego miejsca kafla. Wzorzec „stretched link": pseudoelement linku
   przykrywa kartę, więc w drzewie dostępności zostaje jeden link. */
/* Cały kafel jest linkiem (patrz kalkulatory.php), więc stan hover przycisku
   odpalamy z karty. Nakładka na pseudoelemencie tu nie zadziałałaby —
   .msm-btn--link jest position:relative i przykryłaby tylko siebie. */
.msm-kalk__karta--link { display: block; color: inherit; text-decoration: none; }
.msm-kalk__karta--link:hover .msm-btn--link,
.msm-kalk__karta--link:focus-visible .msm-btn--link { color: var(--msm-red-hover); }
.msm-kalk__karta--link:hover .msm-btn--link::after,
.msm-kalk__karta--link:focus-visible .msm-btn--link::after { width: 100%; }
.msm-kalk__karta--link:hover .msm-kalk__img { transform: scale(1.03); }
.msm-kalk__karta--link:focus-visible { outline: 2px solid var(--msm-red); outline-offset: 4px; }
.msm-kalk__img { transition: transform var(--msm-przejscie); }

/* --- Kody rabatowe -------------------------------------------------------
   Kod jest głównym elementem kafla: duży, zielony, na środku, z przyciskiem
   kopiowania obok. Potwierdzenie kopiowania wstawia JS.
   ---------------------------------------------------------------------- */
.msm-kody__lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 700px) { .msm-kody__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.msm-kod {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--msm-bialy);
	border-radius: var(--msm-radius-duzy);
	box-shadow: var(--msm-cien);
	text-align: center;
}
.msm-kod__etykieta { margin: 0; }
.msm-kod__wiersz {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
}
.msm-kod__wartosc {
	margin: 0;
	font-size: clamp(2rem, 5vw, 2.75rem);
	line-height: 1.1;
	font-weight: var(--msm-extrabold);
	letter-spacing: .04em;
	/* Kod w czerwieni marki, nie w zieleni tagów — uwaga klienta (wrzesień 2026):
	   „Nazwy promocji (WIOSNA23 itp.) w kolorze #F34A4D". */
	color: var(--msm-red);
}
.msm-kod__kopiuj {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.75rem; height: 2.75rem;
	padding: 0;
	background: var(--msm-n100);
	border: 1px solid var(--msm-n25);
	border-radius: 50%;
	color: var(--msm-n700);
	cursor: pointer;
	transition: background var(--msm-przejscie), color var(--msm-przejscie);
}
.msm-kod__kopiuj:hover,
.msm-kod__kopiuj:focus-visible { background: var(--msm-red); color: var(--msm-bialy); }
.msm-kod__ikona { width: 1.25rem; height: 1.25rem; }
/* Potwierdzenie unosi się nad kodem, żeby nie przesuwało układu kafla. */
.msm-kod__potwierdzenie {
	position: absolute;
	left: 50%;
	bottom: calc(100% + .5rem);
	transform: translateX(-50%);
	white-space: nowrap;
	padding: .25rem .75rem;
	background: var(--msm-n900);
	border-radius: var(--msm-radius-pill);
	color: var(--msm-bialy);
	font-size: var(--msm-text-xs);
	font-weight: var(--msm-semibold);
	opacity: 0;
	transition: opacity var(--msm-przejscie);
	pointer-events: none;
}
.msm-kod__wiersz.ma-potwierdzenie .msm-kod__potwierdzenie { opacity: 1; }
.msm-kod__opis { margin: 0; color: var(--msm-n600); }

/* --- Zaślepki brakującej treści ------------------------------------------
   Celowo rzucają się w oczy — mają zniknąć razem z uzupełnieniem treści.
   Szukaj po klasie .msm-brak (także w polach WYSIWYG).
   ---------------------------------------------------------------------- */
.msm-brak {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: clamp(1rem, 2vw, 1.5rem);
	background: repeating-linear-gradient(
		135deg,
		rgba(243, 74, 77, .05) 0 12px,
		rgba(243, 74, 77, .10) 12px 24px
	);
	border: 2px dashed var(--msm-red);
	border-radius: var(--msm-radius);
	color: var(--msm-n800);
	text-align: left;
}
.msm-brak--box {
	min-height: 14rem;
	height: 100%;
	justify-content: center;
}
.msm-brak__tytul {
	margin: 0;
	font-size: var(--msm-text-xs);
	font-weight: var(--msm-extrabold);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--msm-red);
}
.msm-brak__co { margin: 0; font-weight: var(--msm-semibold); }
.msm-brak__gdzie { margin: 0; font-size: var(--msm-text-s); color: var(--msm-n600); }
/* Ten sam wygląd dla zaślepek wpisanych w polach WYSIWYG. */
.msm-prose .msm-brak { display: block; margin-block: 1em; }

/* --- Zespół --------------------------------------------------------------
   Okrągłe kadry, jak zdjęcie dietetyka przy formularzu kontaktowym.
   ---------------------------------------------------------------------- */
.msm-zespol__lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) { .msm-zespol__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .msm-zespol__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.msm-osoba-karta { text-align: center; }
.msm-osoba-karta__media {
	width: clamp(11rem, 18vw, 15rem);
	margin: 0 auto clamp(1rem, 2vw, 1.5rem);
	aspect-ratio: 1;
	overflow: hidden;
	/* border-radius: 50%; */
	background: var(--msm-bg);
}
.msm-osoba-karta__img { width: 100%; height: 100%; object-fit: contain; }
.msm-osoba-karta__imie {
	margin: 0 0 .25rem;
	font-size: var(--msm-h4);
	line-height: var(--msm-h4-lh);
}
.msm-osoba-karta__rola { margin: 0; font-weight: var(--msm-semibold); color: var(--msm-red); }
/* Biogram bywa kilkuakapitowy — wyrównanie do lewej, bo wyśrodkowany blok
   tekstu w kolumnie czyta się źle. Imię i rola zostają na środku. */
.msm-osoba-karta__opis { margin: .75rem 0 0; color: var(--msm-n600); text-align: left; }
.msm-osoba-karta__opis p { margin: 0 0 .75rem; }
.msm-osoba-karta__opis p:last-child { margin-bottom: 0; }
.msm-section--dark .msm-osoba-karta__opis { color: var(--msm-n300); }

/* --- Metamorfozy (przed / po) --------------------------------------------
   Karta: dwa kadry sklejone w jeden blok, wychodzące ponad górną krawędź
   karty. „Po" stoi niżej od „przed", a na styku leży pigułka z etykietami.
   Liczba kilogramów ma tabular-nums — bez tego skacze szerokość w trakcie
   odliczania (patrz [data-msm-odliczanie] w main.js).
   ---------------------------------------------------------------------- */
.msm-metamorfozy__lista {
	--msm-metamorfoza-wystep: clamp(1.5rem, 3vw, 2.75rem);
	--msm-metamorfoza-zejscie: clamp(1rem, 2.2vw, 2rem);

	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(3.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.25rem);
	/* Kadry wystają nad kartę — bez zapasu obcinałby je odstęp sekcji. */
	margin: var(--msm-metamorfoza-wystep) 0 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 900px) {
	.msm-metamorfozy__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Nieparzysta liczba kart: ostatnia staje na środku, zamiast wisieć pod lewą kolumną. */
	.msm-metamorfoza:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - clamp(1.5rem, 3vw, 2.25rem) / 2);
	}
}

.msm-metamorfoza {
	display: flex;
	flex-direction: column;
	padding: 0 clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
	background: var(--msm-bialy);
	border-radius: var(--msm-radius-duzy);
	box-shadow: var(--msm-cien);
}

.msm-metamorfoza__media {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
	/* Kadry wychodzą nad kartę; zejście „po" oddaje im miejsce na dole. */
	margin: calc(-1 * var(--msm-metamorfoza-wystep)) 0 clamp(1.25rem, 2.5vw, 1.75rem);
	padding-bottom: var(--msm-metamorfoza-zejscie);
}

.msm-metamorfoza__kadr {
	margin: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--msm-radius);
	background: var(--msm-bg);
}
/* Przesunięcie w pionie: „przed" wyżej, „po" niżej — dwa kadry czytają się
   wtedy jako jedna historia, a nie jako dwa zdjęcia obok siebie. */
.msm-metamorfoza__kadr--po { transform: translateY(var(--msm-metamorfoza-zejscie)); }
.msm-metamorfoza__img { width: 100%; height: 100%; object-fit: cover; }
/* Zaślepka wypełnia kadr, zamiast rozpychać go swoją minimalną wysokością. */
.msm-metamorfoza__kadr .msm-brak--box { min-height: 0; height: 100%; }

.msm-metamorfoza__etykiety {
	position: absolute;
	top: 58%;
	left: 50%;
	z-index: 1;
	display: flex;
	gap: .25rem;
	padding: .25rem;
	transform: translate(-50%, -50%);
	background: rgba(255, 255, 255, .92);
	border-radius: var(--msm-radius-pill);
	box-shadow: var(--msm-cien-mocny);
}
.msm-metamorfoza__etykieta {
	padding: .375rem 1rem;
	border-radius: var(--msm-radius-pill);
	font-size: var(--msm-text-s);
	line-height: var(--msm-text-s-lh);
	font-weight: var(--msm-extrabold);
	white-space: nowrap;
}
.msm-metamorfoza__etykieta--przed { background: var(--msm-n100); color: var(--msm-n600); }
.msm-metamorfoza__etykieta--po { background: var(--msm-red); color: var(--msm-bialy); }

.msm-metamorfoza__tresc { display: flex; flex-direction: column; flex: 1; }
.msm-metamorfoza__imie {
	margin: 0 0 .25rem;
	font-size: var(--msm-h4);
	line-height: var(--msm-h4-lh);
}
.msm-metamorfoza__miasto {
	margin: 0 0 .75rem;
	font-size: var(--msm-text-s);
	line-height: var(--msm-text-s-lh);
	font-weight: var(--msm-bold);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--msm-akcent-sekcji);
}
.msm-metamorfoza__opis { margin: 0; color: var(--msm-n500); }

/* Wynik wchodzi w dolny prawy róg karty — jak w projekcie, gdzie liczba jest
   puentą historii, a nie kolejnym wierszem tekstu. */
.msm-metamorfoza__wynik {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: .1em;
	margin: auto 0 0;
	padding-top: clamp(.75rem, 2vw, 1.25rem);
	font-weight: var(--msm-extrabold);
	line-height: 1;
	color: var(--msm-akcent-sekcji);
}
.msm-metamorfoza__znak,
.msm-metamorfoza__liczba {
	font-size: clamp(2.5rem, 6vw, 3.5rem);
	letter-spacing: -.02em;
}
/* Cyfry o stałej szerokości — animowana liczba nie rozpycha wtedy wiersza. */
.msm-metamorfoza__liczba { font-variant-numeric: tabular-nums; }
.msm-metamorfoza__jednostka { margin-left: .15em; font-size: clamp(1.5rem, 3.4vw, 2.125rem); }

.msm-metamorfozy__stopka {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-top: clamp(2rem, 4vw, 3rem);
}
.msm-metamorfozy__nota {
	max-width: 46rem;
	margin: 0;
	font-size: var(--msm-text-s);
	line-height: var(--msm-text-s-lh);
	color: var(--msm-n500);
}
.msm-metamorfozy__nota .msm-akcent { font-weight: var(--msm-bold); color: var(--msm-akcent-sekcji); }
.msm-section--dark .msm-metamorfozy__nota,
.msm-section--red .msm-metamorfozy__nota { color: var(--msm-n200); }

/* Telefon: karty jedna pod drugą, kadry niższe — inaczej sama para zdjęć
   zajmuje cały ekran, zanim widać imię i wynik. */
@media (max-width: 560px) {
	.msm-metamorfoza__kadr { aspect-ratio: 4 / 5; }
	.msm-metamorfoza__etykieta { padding: .3rem .75rem; font-size: var(--msm-text-xs); }
	.msm-metamorfozy__stopka { justify-content: flex-start; }
}
/* Bez noty sam przycisk stoi na środku (uwaga klienta, październik 2026). */
.msm-metamorfozy__stopka:not(:has(.msm-metamorfozy__nota)) { justify-content: center; }

/* --- Social ------------------------------------------------------------- */
.msm-social { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.msm-social__link {
	display: grid;
	place-items: center;
	width: 2.75rem; height: 2.75rem;
	border: 1.5px solid var(--msm-red);
	border-radius: 50%;
	color: var(--msm-red);
	transition: background var(--msm-przejscie), color var(--msm-przejscie), border-color var(--msm-przejscie), transform var(--msm-przejscie);
}
.msm-social__link:hover { background: var(--msm-red-hover); border-color: var(--msm-red); color: var(--msm-bialy); }
.msm-social__ikona { width: 1.25rem; height: 1.25rem; }
/* Część plików z Figmy ma własny obrys koła — kółko rysuje CSS, więc go chowamy.
   Selektor MUSI zostać dziecięcy (`> rect`): obrys koła leży wprost w <svg>,
   ale są też ikony (YouTube, Instagram), które mają <rect> w <clipPath> jako
   maskę. Zwykłe `rect` chowało tamtą maskę, clip robił się pusty i cały znak
   znikał — YouTube w stopce był pustym kółkiem na każdej stronie, gdzie wcześniej
   nie stała druga kopia tego samego pliku (ta podstawiała id maski). */
.msm-social__ikona > rect { display: none; }
.msm-social__litera { font-size: var(--msm-text-s); font-weight: var(--msm-extrabold); }
.msm-social--jasny .msm-social__link { background: var(--msm-bialy); border-color: var(--msm-bialy); color: var(--msm-red); }
/* Znaki w tym wariancie zachowują własne barwy (msm_social( ..., true )), więc
   czerwone kółko z najazdu zjadłoby je razem z kolorem. Zostaje białe. */
.msm-social--jasny .msm-social__link:hover {
	background: var(--msm-bialy);
	border-color: var(--msm-bialy);
	transform: translateY(-2px);
}
.msm-social--kolo .msm-social__link { background: var(--msm-red); border-color: var(--msm-red); color: var(--msm-n25) !important; }
/* Ikony z Figmy mają własny obrys koła — w tym wariancie kółko rysuje CSS.
   Znów tylko bezpośrednie dzieci <svg>, patrz .msm-social__ikona > rect. */
.msm-social--kolo .msm-social__ikona > rect,
.msm-social--jasny .msm-social__ikona > rect { display: none; }
.msm-social--kolo .msm-social__link:hover { background: var(--msm-red-hover); }
.msm-social--kolo .msm-social__ikona { color: var(--msm-n25) !important; }

/* --- Newsletter --------------------------------------------------------- */
.msm-newsletter { padding-block: clamp(2.5rem, 5vw, 2rem); background: var(--msm-red); color: var(--msm-bialy); }
.msm-newsletter__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--msm-gap);
	align-items: center;
}
@media (min-width: 900px) { .msm-newsletter__inner { grid-template-columns: 1fr 1fr; } }
.msm-newsletter__tytul { margin-bottom: .5rem; color: var(--msm-bialy); }
.msm-newsletter__opis { margin: 0; }
/* Przycisk newslettera wygląda jak „Sprawdź” przy mapie stref: siedzi w samej
   krawędzi pigułki (bez jasnego pierścienia wokół), ma wypełnienie w kolorze
   tła strony, czerwony obrys i czerwony napis (uwaga klienta, wrzesień 2026).
   Reguła łapie też przycisk formularza z shortcode'u wtyczki mailingowej. */
.msm-newsletter .msm-pole-inline { gap: 0; padding: 0; }
.msm-newsletter .msm-pole-inline__pole { padding-block: .9375rem; line-height: var(--msm-text-m-lh); }
.msm-newsletter .msm-pole-inline .msm-btn,
.msm-newsletter__form button,
.msm-newsletter__form [type="submit"] {
	align-self: stretch;
	background: var(--msm-bg);
	border: 1px solid var(--msm-red);
	color: var(--msm-red);
}
.msm-newsletter .msm-pole-inline .msm-btn:hover,
.msm-newsletter__form button:hover,
.msm-newsletter__form [type="submit"]:hover,
.msm-newsletter__form button:focus-visible,
.msm-newsletter__form [type="submit"]:focus-visible {
	background: var(--msm-red-hover);
	border-color: var(--msm-red-hover);
	color: var(--msm-bg);
}

/* Pigułka zapisu do MailerLite (footer.php): prawdziwy <input> w miejscu
   placeholdera z makiety — zerujemy globalne style pól (tło, obrys, cień),
   bo tło i zaokrąglenie daje sama pigułka .msm-pole-inline. */
.msm-newsletter__formularz { width: 100%; }
.msm-newsletter .msm-newsletter__input {
	width: auto;
	min-width: 0;
	padding-inline: 1.25rem;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--msm-n900);
}
.msm-newsletter .msm-newsletter__input::placeholder {
	color: var(--msm-n400);
	font-size: var(--msm-text-m);
	line-height: var(--msm-text-m-lh);
	font-weight: inherit;
}
.msm-newsletter .msm-newsletter__input:focus { outline: none; }
.msm-newsletter__formularz:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
/* Stany wspólne obu formularzy MailerLite (newsletter, „powiadom o dowozie”);
   klasy nadaje main.js. Dane lecą do MailerLite — blokujemy ponowne kliknięcie
   i sygnalizujemy czekanie. */
.msm-zapis--blad { animation: msm-drgnij .25s ease; }
.msm-zapis--czeka { opacity: .7; }
.msm-zapis--czeka input { pointer-events: none; }
.msm-zapis__komunikat {
	margin: .75rem 0 0;
	font-size: var(--msm-text-s);
	line-height: var(--msm-text-s-lh);
	font-weight: var(--msm-semibold);
}
.msm-zapis__komunikat--ok { color: var(--msm-tag); }
.msm-zapis__komunikat--blad { color: var(--msm-red); }
.msm-newsletter .msm-zapis__komunikat { color: var(--msm-bialy); }
.msm-newsletter__zgoda {
	margin: .75rem 0 0;
	font-size: var(--msm-text-s);
	line-height: var(--msm-text-s-lh);
	opacity: .85;
}
.msm-newsletter__zgoda a { color: inherit; text-decoration: underline; }
.msm-newsletter__zgoda a:hover { text-decoration: none; }

/* --- Stopka ------------------------------------------------------------- */
.msm-footer { padding-top: clamp(3rem, 6vw, 5rem); background: var(--msm-bialy); color: var(--msm-n600); }
.msm-footer a:not(.msm-btn), .msm-footer__copy a:not(.msm-btn) { color: var(--msm-n800); text-decoration: none; }
.msm-footer a:not(.msm-btn):hover, .msm-footer__copy a:not(.msm-btn):hover { color: var(--msm-red); }
.msm-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.75rem, 3vw, 2.5rem);
}
.msm-social__ikona {
	color: var(--msm-red);
}
.msm-footer__nav, .msm-footer__firma {
	font-weight: var(--msm-semibold);
}
@media (min-width: 640px) { .msm-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .msm-footer__cols { grid-template-columns: 1.2fr 1fr 1.3fr 1fr 1.4fr; } }
.msm-footer__logo img { width: clamp(110px, 12vw, 150px); height: auto; }
.msm-footer__title {
	margin: 0 0 1.25rem;
	font-size: var(--msm-text-m);
	line-height: var(--msm-text-m-lh);
	font-weight: var(--msm-extrabold);
	color: var(--msm-naglowek);
}
/* Kolumny stopki są w <details>. Na desktopie mają wyglądać jak zwykłe
   kolumny: znacznik i strzałka znikają, a summary przestaje być klikalne. */
.msm-footer__akord { border: 0; }
.msm-footer__akord-tytul {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	list-style: none;
	cursor: default;
	pointer-events: none;
}
.msm-footer__akord-tytul::-webkit-details-marker { display: none; }
.msm-footer__akord-ikona { display: none; width: 1.25rem; height: 1.25rem; flex: none; color: var(--msm-red); }
@media (max-width: 767px) {
	.msm-footer__akord-tytul { cursor: pointer; pointer-events: auto; }
	.msm-footer__akord-ikona { display: block; transition: transform var(--msm-przejscie); }
	.msm-footer__akord[open] .msm-footer__akord-ikona { transform: rotate(180deg); }
}
.msm-footer__list { list-style: none; margin: 0; padding: 0; }
.msm-footer__list li { margin-bottom: .625rem; }
.msm-footer__list--kontakt a { display: inline-flex; align-items: center; gap: .5rem; font-weight: var(--msm-semibold); }
.msm-footer__ikona { width: 1.25rem; height: 1.25rem; color: var(--msm-red); flex: none; }
/* Na desktopie drugi numer nie powtarza słuchawki, tylko równa się do
   pierwszego miejscem po niej. Na telefonie lista jest wyśrodkowana, więc
   ikona zostaje widoczna — bez niej numer stał przesunięty względem
   pierwszego (uwaga klienta, wrzesień 2026). */
@media (min-width: 900px) { .msm-footer__ikona--kolejna { visibility: hidden; } }
.msm-footer__firma p { margin-bottom: .5rem; }
.msm-footer__cta { margin-top: 1.5rem; }
.msm-footer__widgets { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: var(--msm-gap); }
@media (min-width: 900px) { .msm-footer__widgets { grid-template-columns: repeat(3, 1fr); } }
.msm-widget__title { font-size: var(--msm-text-m); font-weight: var(--msm-extrabold); color: var(--msm-naglowek); }
.msm-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-block: 1.5rem;
	border-top: 1px solid var(--msm-n200);
	font-size: var(--msm-text-s);
}
.msm-footer__copy { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 0; color: var(--msm-n500); }
.msm-footer__prawne-lista { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.msm-footer__prawne-lista a { text-decoration: underline; }
.msm-footer__realizacja { margin: 0; color: var(--msm-n500); }
.msm-footer__realizacja a, .msm-footer__copy a { color: var(--msm-n700); text-decoration: underline !important; }
.msm-social--stopka { margin: 0; }
.msm-social--stopka .msm-social__link { width: 2.5rem; height: 2.5rem; }

/* --- Galeria ------------------------------------------------------------ */
.msm-galeria__item { margin: 0; }
.msm-galeria__link { display: block; overflow: hidden; border-radius: var(--msm-radius-duzy); }
.msm-galeria__img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .4s ease; }
.msm-galeria__link:hover .msm-galeria__img { transform: scale(1.05); }
.msm-galeria__opis { margin-top: .5rem; font-size: var(--msm-text-s); color: var(--msm-n500); }
.msm-galeria__link { cursor: zoom-in; }
/* Telefon: dwie kolumny kadrów zamiast jednej — osiem zdjęć jedno pod drugim to kilka ekranów przewijania. */
@media (max-width: 599px) {
	.msm-galeria.msm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
	.msm-galeria__link { border-radius: var(--msm-radius); }
}

/* Powiększenie zdjęcia z galerii (dialog tworzy main.js). */
.msm-lightbox {
	width: 100vw;
	max-width: none;
	height: 100vh;
	max-height: none;
	margin: 0;
	padding: clamp(3.5rem, 6vw, 5rem) clamp(1rem, 7vw, 6rem);
	border: 0;
	background: transparent;
}
.msm-lightbox[open] { display: flex; align-items: center; justify-content: center; }
.msm-lightbox::backdrop { background: rgba(16, 24, 40, .88); }
.msm-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: var(--msm-radius-duzy);
	object-fit: contain;
}
.msm-lightbox__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--msm-n900);
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--msm-cien);
}
.msm-lightbox__btn:hover,
.msm-lightbox__btn:focus-visible { background: var(--msm-red); color: #fff; }
.msm-lightbox__btn--zamknij { top: 1rem; right: 1rem; }
.msm-lightbox__btn--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.msm-lightbox__btn--next { right: 1rem; top: 50%; transform: translateY(-50%); }
.msm-lightbox--jedno .msm-lightbox__btn--prev,
.msm-lightbox--jedno .msm-lightbox__btn--next { display: none; }

/* --- FAQ ---------------------------------------------------------------- */
/* FAQ stoi na środku kolumny, nagłówek też — pytania zostają wyrównane
   do lewej, bo wyśrodkowany tekst w akordeonie czyta się źle. */
.msm-faq { max-width: 52rem; margin-inline: auto; }
.msm-faq .msm-section__head,
.msm-kody .msm-section__head { margin-inline: auto; text-align: center; }
.msm-faq__item { border-bottom: 1px solid var(--msm-n200); }
.msm-faq__pytanie {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 0;
	font-size: var(--msm-text-l);
	line-height: var(--msm-text-l-lh);
	font-weight: var(--msm-bold);
	color: var(--msm-naglowek);
	cursor: pointer;
	list-style: none;
}
.msm-faq__pytanie::-webkit-details-marker { display: none; }

/* Ikona „+" to dwie kreski z gradientów, nie znak z fontu — pionową da się
   płynnie schować do zera i plus przechodzi w minus zamiast podmieniać się
   w jednej klatce. */
.msm-faq__pytanie::after {
	content: "";
	flex: 0 0 1.125rem;
	align-self: center;
	height: 1.125rem;
	background-image:
		linear-gradient(var(--msm-red), var(--msm-red)),
		linear-gradient(var(--msm-red), var(--msm-red));
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 2px, 2px 100%;
	transition: background-size var(--msm-przejscie);
}
.msm-faq__item[open] .msm-faq__pytanie::after { background-size: 100% 2px, 2px 0; }
/* W trakcie zwijania <details> nadal ma [open] — skrypt trzyma je otwarte, żeby
   dokończyć animację wysokości. Ten atrybut przywraca „+" od razu po kliknięciu,
   inaczej ikona przeskakiwałaby dopiero na końcu. */
.msm-faq__item[data-msm-zwijanie] .msm-faq__pytanie::after { background-size: 100% 2px, 2px 100%; }
.msm-faq__odpowiedz { padding-bottom: 1.25rem; color: var(--msm-n600); }
.msm-section--dark .msm-faq__pytanie { color: var(--msm-bialy); }
.msm-section--dark .msm-faq__item { border-color: rgba(255,255,255,.15); }
.msm-section--dark .msm-faq__odpowiedz { color: var(--msm-n300); }

/* --- Wpisy: karty, nagłówki, paginacja --------------------------------- */
.msm-card {
	display: flex;
	flex-direction: column;
	background: var(--msm-bialy);
	border: 1px solid var(--msm-n200);
	border-radius: var(--msm-radius-duzy);
	overflow: hidden;
	transition: transform var(--msm-przejscie), box-shadow var(--msm-przejscie);
}
.msm-card:hover { transform: translateY(-4px); box-shadow: var(--msm-cien); }
.msm-card__media { display: block; aspect-ratio: 4 / 3; background: var(--msm-bg); }
.msm-card__img { width: 100%; height: 100%; object-fit: cover; }
.msm-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--msm-bg), var(--msm-n200)); }
.msm-card__body { padding: clamp(1.25rem, 2.5vw, 1.6rem); }
.msm-card__title { font-size: var(--msm-h4); line-height: var(--msm-h4-lh); margin-bottom: .4em; }
.msm-card__title a { color: var(--msm-naglowek); text-decoration: none; }
.msm-card__title a:hover { color: var(--msm-red); }
.msm-card__excerpt { color: var(--msm-n600); }
.msm-card__more {
	position: relative;
	display: inline-block;
	padding-bottom: .5rem;
	font-size: var(--msm-text-m);
	font-weight: var(--msm-semibold);
	color: var(--msm-red);
}
.msm-card__more::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 34px; max-width: 100%; height: 2px;
	background: currentColor;
	transition: width .35s ease;
}
.msm-card:hover .msm-card__more::after { width: 100%; }
.msm-meta { margin: 0 0 .5em; font-size: var(--msm-text-s); font-weight: var(--msm-semibold); color: var(--msm-n500); }
.msm-meta a { color: inherit; }

.msm-page__head { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); background: var(--msm-bg); }
.msm-page__title { margin: 0; }
.msm-page__lead { margin-top: .75rem; color: var(--msm-n500); }
.msm-archive__head { padding-block: clamp(2rem, 5vw, 3.5rem); }
.msm-archive__title { margin: 0; }

.msm-prose { max-width: 46rem; }
/* Treść z edytora na podstronach bez sekcji (regulamin, polityka prywatności,
   page.php): kontener ma być tak szeroki jak na pozostałych podstronach,
   a nie zwężony do kolumny tekstu. */
.msm-container.msm-prose { max-width: var(--msm-container-tresc); }
.msm-prose--pelna { max-width: none; }
.msm-prose > *:last-child { margin-bottom: 0; }
.msm-prose h2 { margin-top: 1.8em; }
.msm-prose h3 { margin-top: 1.5em; }
.msm-prose img { border-radius: var(--msm-radius); }
/* Lista pigułek w treści (np. dzielnice na stronach miast): <ul class="msm-tagi"><li class="msm-tag">. */
.msm-prose .msm-tagi { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.msm-prose .msm-tagi .msm-tag { margin: 0; }

.msm-postnav { padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--msm-n200); }
.msm-postnav .nav-links { display: flex; flex-wrap: wrap; gap: var(--msm-gap); justify-content: space-between; }
.msm-navlink__label { display: block; font-size: var(--msm-text-xs); font-weight: var(--msm-extrabold); letter-spacing: .1em; text-transform: uppercase; color: var(--msm-n500); }
.msm-postnav a { font-size: var(--msm-text-l); font-weight: var(--msm-bold); text-decoration: none; }

.msm-pagination { margin-top: clamp(2rem, 4vw, 3rem); }
.msm-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.msm-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	padding: .5rem .75rem;
	border: 1px solid var(--msm-n200);
	border-radius: var(--msm-radius-pill);
	text-decoration: none;
	color: var(--msm-n900);
}
.msm-pagination .page-numbers.current,
.msm-pagination .page-numbers:hover { background: var(--msm-red); border-color: var(--msm-red); color: var(--msm-bialy); }

.msm-empty { padding-block: clamp(2rem, 5vw, 4rem); }
.msm-404 { text-align: center; }
.msm-404 .msm-prose { margin-inline: auto; }
.msm-404 .search-form { display: flex; gap: .5rem; justify-content: center; }

/* --- Formularze --------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], input[type="password"],
input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="month"], input[type="week"], textarea, select {
	width: 100%;
	max-width: 100%;
	padding: .81rem 1.25rem;
	background: var(--msm-n100);
	border: 1px solid var(--msm-n25);
	border-radius: var(--msm-radius-pill);
	box-shadow: var(--msm-cien);
	font: inherit;
	color: var(--msm-n900);
}
input::placeholder, textarea::placeholder {
	color: var(--msm-n500);
	font-size: var(--msm-text-xs);
	line-height: var(--msm-text-xs-lh);
	font-weight: var(--msm-semibold);
}
textarea, select[multiple] { border-radius: var(--msm-radius); }
textarea { min-height: 9rem; resize: vertical; }

/* Pola daty i czasu: sama lista selektorów wyżej nie wystarcza. Przeglądarka
   nadaje im własny krój i wewnętrzny układ, przez co bez appearance: none
   iOS Safari ignoruje szerokość i padding, a pole zostaje wąskim natywnym
   prostokątem obok pigułek z makiety. Wysokość wyrównujemy do pozostałych pól,
   bo wnętrze (spinner daty) liczy się inaczej niż zwykły tekst. */
input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="month"], input[type="week"] {
	appearance: none;
	-webkit-appearance: none;
	line-height: var(--msm-text-m-lh);
	/* Wnętrze pola daty (edytor pól i ikona kalendarza) liczy się o 2px wyżej
	   niż zwykły tekst, więc sam padding nie daje równej wysokości z resztą
	   pigułek. Wartość odpowiada wyliczonej wysokości pozostałych pól:
	   padding .81rem × 2 + ramka + wiersz tekstu. */
	height: 3.25rem;
}
/* Ikona kalendarza jest elementem cienia przeglądarki — sterujemy tylko tym,
   co się da: kursorem i nasyceniem, żeby nie odstawała od czerwieni marki. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: .55;
	transition: opacity var(--msm-przejscie);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
input[type="submit"]:not(.msm-btn), button[type="submit"]:not(.msm-btn) {
	padding: .9375rem 1.75rem;
	background: var(--msm-red);
	color: var(--msm-bialy);
	border: 0;
	border-radius: var(--msm-radius-pill);
	font-weight: var(--msm-bold);
	cursor: pointer;
	width: auto;
}
input[type="submit"]:not(.msm-btn):hover, button[type="submit"]:not(.msm-btn):hover { background: var(--msm-red-hover); }
label { display: block; margin-bottom: .35rem; font-size: var(--msm-text-s); font-weight: var(--msm-semibold); color: var(--msm-n700); }

/* --- Komentarze --------------------------------------------------------- */
.msm-comments__list { list-style: none; margin: 0 0 2rem; padding: 0; }
.msm-comments__list .children { list-style: none; padding-left: clamp(1rem, 4vw, 2.5rem); }
.msm-comments__list .comment-body { padding: 1.25rem 0; border-bottom: 1px solid var(--msm-n200); }
.msm-comments__list .avatar { border-radius: 50%; float: left; margin-right: 1rem; }
.msm-comments__list .comment-meta { font-size: var(--msm-text-s); color: var(--msm-n500); }
.comment-form p { margin-bottom: 1rem; }

/* --- Klasy WordPressa --------------------------------------------------- */
.alignleft  { float: left; margin: .5rem 1.5rem 1rem 0; }
.alignright { float: right; margin: .5rem 0 1rem 1.5rem; }
.aligncenter { margin-inline: auto; display: block; }
.alignwide, .alignfull { max-width: none; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption { font-size: var(--msm-text-s); color: var(--msm-n500); }
.sticky .msm-card__title::before { content: "★ "; color: var(--msm-red); }
.gallery { display: grid; gap: .75rem; grid-template-columns: repeat(3, 1fr); }
.gallery-item { margin: 0; }

/* --- Ograniczony ruch --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.msm-karuzela__tor { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Tekst i przycisk pod kaflami okazji (np. „Nie znalazłeś oferty…" na /kariera/). */
.msm-okazje__stopka { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.msm-okazje__stopka-tekst { margin: 0 0 1.25rem; font-size: var(--msm-text-xl); line-height: var(--msm-text-xl-lh); font-weight: var(--msm-bold); color: var(--msm-naglowek); }

/* Pole [textarea … x3] w CF7 (rows="3", formularz rekrutacyjny) ma mieć trzy wiersze —
   globalny min-height robił z niego wysoki blok. */
.msm-form textarea[rows="3"] { min-height: 0; }

/* --- Aplikacja mobilna --------------------------------------------------- */
/* Czerwony pas z makiety Home (październik 2026). Telefony to PNG
   z przezroczystym tłem i własnym cieniem; jasną poświatę za nimi rysuje CSS. */
.msm-aplikacja {
	/* Gdzie kończy się czerwień pod telefonami (telefon/tablet): 3/4 wysokości
	   telefonów = 63,4% wysokości PNG (telefony zajmują 409 z 484 px). */
	--msm-aplikacja-podzial: 63.4%;
	background: var(--msm-red);
	color: var(--msm-bialy);
}
.msm-aplikacja__inner {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	padding-top: clamp(2.5rem, 7vw, 3.5rem);
	text-align: center;
}
.msm-aplikacja__tytul {
	margin: 0;
	/* Mniej niż --msm-h2: w makiecie tytuł mieści się w dwóch wierszach. */
	font-size: clamp(1.625rem, 2.9vw, 2.5rem);
	text-wrap: balance;
	line-height: 1.2;
	font-weight: var(--msm-bold);
	color: var(--msm-bialy);
}
.msm-aplikacja__tekst { margin: 1.25rem auto 0; max-width: 32rem; color: var(--msm-bialy); }
.msm-aplikacja__sklepy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
	padding: 0;
	list-style: none;
}
.msm-sklep {
	display: inline-flex;
	align-items: center;
	gap: .875rem;
	min-width: 12.75rem;
	padding: .75rem 1.5rem;
	border-radius: .75rem;
	background: var(--msm-bialy);
	color: var(--msm-n900);
	text-decoration: none;
	box-shadow: 0 12px 30px rgba(16, 24, 40, .18);
	transition: transform var(--msm-przejscie), box-shadow var(--msm-przejscie);
}
a.msm-sklep:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(16, 24, 40, .24); }
a.msm-sklep:focus-visible { outline: 2px solid var(--msm-bialy); outline-offset: 3px; }
.msm-sklep__ikona { width: 1.75rem; height: 1.75rem; flex: none; }
.msm-sklep__napis { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.msm-sklep__male { font-size: var(--msm-text-xs); color: var(--msm-n700); }
.msm-sklep__nazwa { font-size: var(--msm-text-xl); font-weight: var(--msm-semibold); }

.msm-aplikacja__media { position: relative; isolation: isolate; }
/* Poświata za telefonami — w makiecie jaśniejsza plama na czerwieni. */
.msm-aplikacja__media::before {
	content: "";
	position: absolute;
	inset: -10% 0 auto;
	height: 90%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
	z-index: -1;
	pointer-events: none;
}
.msm-aplikacja__img { display: block; width: 100%; height: auto; margin-inline: auto; }

/* Telefon i tablet: pas na całą szerokość ekranu, czerwony do 3/4 wysokości
   telefonów, niżej kolor tła strony — telefony „wychodzą” z sekcji jak w makiecie. */
@media (max-width: 899px) {
	.msm-aplikacja__media {
		margin: clamp(1.5rem, 5vw, 2.5rem) calc(50% - 50vw) 0;
		/* Bez paddingu w pionie: procent podziału liczy się od wysokości obrazka. */
		padding-inline: 1rem;
		background: linear-gradient(to bottom, var(--msm-red) var(--msm-aplikacja-podzial), var(--msm-bg) var(--msm-aplikacja-podzial));
	}
	/* Telefony stoją w PNG na prawo od środka (x 234–566 z 613) — przesunięcie
	   o 15,25% szerokości obrazka stawia je na środku ekranu. */
	.msm-aplikacja__media { overflow-x: clip; }
	.msm-aplikacja__img { max-width: 24rem; transform: translateX(-15.25%); }
	/* Poświata tylko na czerwonej części — na kolorze tła robiła jaśniejszą plamę. */
	.msm-aplikacja__media::before { left: 50%; width: min(28rem, 100%); height: var(--msm-aplikacja-podzial); transform: translateX(-50%); }
}

@media (min-width: 900px) {
	.msm-aplikacja__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(1.5rem, 3vw, 2.5rem); padding-top: 0; text-align: left; }
	.msm-aplikacja__tresc { padding-block: clamp(3rem, 6vw, 5rem); }
	.msm-aplikacja__tekst { margin-left: 0; }
	.msm-aplikacja__sklepy { flex-direction: row; flex-wrap: wrap; gap: 1.875rem; }
	/* Telefony w naturalnej szerokości PNG (613 px), jak w makiecie — kadr wchodzi
	   przezroczystą lewą częścią pod kolumnę tekstu, więc nie przechwytuje kliknięć. */
	.msm-aplikacja__media { align-self: end; justify-self: end; width: min(38.3rem, calc(100% + 9rem)); margin: 2.5rem 0 1.5rem; pointer-events: none; }
	.msm-aplikacja__img { max-width: none; }
}

/* Tekst i przycisk pod kaflami okazji (np. „Nie znalazłeś oferty…" na /kariera/). */
.msm-okazje__stopka { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.msm-okazje__stopka-tekst { margin: 0 0 1.25rem; font-size: var(--msm-text-xl); line-height: var(--msm-text-xl-lh); font-weight: var(--msm-bold); color: var(--msm-naglowek); }

/* Pole [textarea … x3] w CF7 (rows="3", formularz rekrutacyjny) ma mieć trzy wiersze —
   globalny min-height robił z niego wysoki blok. */
.msm-form textarea[rows="3"] { min-height: 0; }

/* --- Aplikacja mobilna --------------------------------------------------- */
/* Czerwony pas z makiety Home (październik 2026). Kadr z telefonami ma własne
   tło w kolorze sekcji (#F34A4D) i stoi przy dolnej krawędzi pasa — poświata
   pod telefonami jest w obrazku, więc pas nie ma dolnego paddingu. */
.msm-aplikacja { background: var(--msm-red); color: var(--msm-bialy); }
.msm-aplikacja__inner {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	padding-top: clamp(2.5rem, 7vw, 3.5rem);
	text-align: center;
}
.msm-aplikacja__tytul {
	margin: 0;
	/* Mniej niż --msm-h2: w makiecie tytuł mieści się w dwóch wierszach. */
	font-size: clamp(1.625rem, 2.9vw, 2.5rem);
	text-wrap: balance;
	line-height: 1.2;
	font-weight: var(--msm-bold);
	color: var(--msm-bialy);
}
.msm-aplikacja__tekst { margin: 1.25rem auto 0; max-width: 32rem; color: var(--msm-bialy); }
.msm-aplikacja__sklepy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
	padding: 0;
	list-style: none;
}
.msm-sklep {
	display: inline-flex;
	align-items: center;
	gap: .875rem;
	min-width: 12.75rem;
	padding: .75rem 1.5rem;
	border-radius: .75rem;
	background: var(--msm-bialy);
	color: var(--msm-n900);
	text-decoration: none;
	box-shadow: 0 12px 30px rgba(16, 24, 40, .18);
	transition: transform var(--msm-przejscie), box-shadow var(--msm-przejscie);
}
a.msm-sklep:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(16, 24, 40, .24); }
a.msm-sklep:focus-visible { outline: 2px solid var(--msm-bialy); outline-offset: 3px; }
.msm-sklep__ikona { width: 1.75rem; height: 1.75rem; flex: none; }
.msm-sklep__napis { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.msm-sklep__male { font-size: var(--msm-text-xs); color: var(--msm-n700); }
.msm-sklep__nazwa { font-size: var(--msm-text-xl); font-weight: var(--msm-semibold); }
.msm-aplikacja__media { margin-top: clamp(1.5rem, 5vw, 2.5rem); }
.msm-aplikacja__img { display: block; width: 100%; max-width: 30rem; height: auto; margin-inline: auto; }
/* Telefon: kadr z makiety mobilnej na całą szerokość ekranu — czerwień kończy
   się w nim na 73,5% wysokości, niżej jest kolor tła. Gradient pod spodem
   powtarza ten podział, gdyby kadr nie wypełnił szerokości co do piksela.
   Od 600 px wraca kadr na czerwonym tle (węższy od ekranu zostawiałby szwy). */
@media (max-width: 599px) {
	.msm-aplikacja__media--mob {
		margin-inline: calc(50% - 50vw);
		background: linear-gradient(to bottom, var(--msm-red) 73.5%, var(--msm-bg) 73.5%);
	}
	.msm-aplikacja__media--mob picture { display: block; }
	.msm-aplikacja__media--mob .msm-aplikacja__img { max-width: none; }
}

@media (min-width: 900px) {
	.msm-aplikacja__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(1.5rem, 3vw, 2.5rem); padding-top: 0; text-align: left; }
	.msm-aplikacja__tresc { padding-block: clamp(3rem, 6vw, 5rem); }
	.msm-aplikacja__tekst { margin-left: 0; }
	.msm-aplikacja__sklepy { flex-direction: row; flex-wrap: wrap; gap: 1.875rem; }
	/* Kadr stoi przy dolnej krawędzi pasa, jak w makiecie. */
	.msm-aplikacja__media { align-self: end; margin-top: 1.5rem; }
	.msm-aplikacja__img { max-width: 37.5rem; margin-right: 0; }
}

/* --- Oferta pracy (podstrona jednej oferty) ------------------------------ */
/* Makieta „Kariera — oferta": stanowisko i trzy fakty, „Kim jesteśmy?", biała
   karta z listami zachodząca na zdjęcie zachęty „Wyślij CV". */
.msm-oferta {
	--msm-oferta-zakladka: clamp(5rem, 10vw, 8rem);
	padding-top: clamp(2.5rem, 6vw, 4rem);
}
.msm-oferta__nadtytul {
	margin: 0 0 .25rem;
	font-size: var(--msm-text-xl);
	line-height: var(--msm-text-xl-lh);
	font-weight: var(--msm-bold);
	color: var(--msm-red);
}
.msm-oferta__tytul { margin: 0; font-size: var(--msm-h2); line-height: var(--msm-h2-lh); }
.msm-oferta__fakty {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin: clamp(1.5rem, 3vw, 2rem) 0 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
@media (min-width: 760px) {
	/* Tyle kolumn, ile faktów (dziś dwa — wynagrodzenie usunięte, uwaga klienta). */
	.msm-oferta__fakty { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
	.msm-oferta__fakt { padding: .5rem clamp(.75rem, 2vw, 1.5rem); }
	.msm-oferta__fakt + .msm-oferta__fakt { border-left: 1px solid var(--msm-n200); }
}
.msm-oferta__ikona { display: flex; justify-content: center; color: var(--msm-red); }
.msm-oferta__svg { width: auto; height: 2.25rem; }
.msm-oferta__etykieta { margin: .75rem 0 .5rem; font-size: var(--msm-h4); line-height: var(--msm-h4-lh); }
.msm-oferta__wartosc { margin: 0; font-size: var(--msm-text-s); line-height: var(--msm-text-s-lh); color: var(--msm-n600); }

/* Kremowy pas pod „Kim jesteśmy?" i pod kartą z listami (uwaga Anny, 13.10). */
.msm-oferta__pas {
	position: relative;
	margin-top: clamp(3rem, 7vw, 5.5rem);
	/* Bez dolnego paddingu: pas kończy się z kartą, a zachęta podjeżdża pod jej
	   dolną część (karta ma z-index, zdjęcie zachęty idzie pod nią). */
	padding-block: clamp(2.5rem, 6vw, 5rem) 0;
	background: var(--msm-bg);
	overflow: hidden;
}
.msm-oferta__kim { position: relative; }
/* Papryka z bazylią przecięta lewą krawędzią ekranu, jak w makiecie. */
.msm-oferta__dekoracja {
	position: absolute;
	top: 50%;
	left: 0;
	width: clamp(8rem, 14vw, 13rem);
	height: auto;
	transform: translate(-38%, -50%);
	pointer-events: none;
}
.msm-oferta__kim-inner { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .msm-oferta__kim-inner { grid-template-columns: 1fr 1fr; } }
.msm-oferta__kim-tytul { margin: 0 0 1.25rem; font-size: var(--msm-h3); line-height: var(--msm-h3-lh); }
.msm-oferta__kim-tekst p { color: var(--msm-n600); }
.msm-oferta__kim-img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--msm-radius-duzy); }
@media (max-width: 899px) { .msm-oferta__dekoracja { display: none; } }

/* Karta z listami leży nad zachętą — zachęta podjeżdża pod nią o „zakładkę". */
.msm-oferta__karta {
	position: relative;
	z-index: 1;
	margin-top: clamp(2.5rem, 6vw, 4.5rem);
	padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.25rem, 6vw, 4rem);
	background: var(--msm-bialy);
	border-radius: var(--msm-radius-duzy);
	box-shadow: var(--msm-cien);
}
.msm-oferta__blok + .msm-oferta__blok { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.msm-oferta__blok-tytul { margin: 0 0 1rem; font-size: var(--msm-h4); line-height: var(--msm-h4-lh); }
.msm-oferta__lista { margin: 0; padding-left: 1.25rem; color: var(--msm-n600); font-size: var(--msm-text-s); line-height: var(--msm-text-s-lh); }
.msm-oferta__lista li + li { margin-top: .35rem; }

.msm-oferta__cta {
	position: relative;
	margin-top: calc(-1 * var(--msm-oferta-zakladka));
	padding: calc(var(--msm-oferta-zakladka) + clamp(2.5rem, 5vw, 4rem)) 0 clamp(3rem, 6vw, 5rem);
	text-align: center;
	overflow: hidden;
}
.msm-oferta__cta-tlo { position: absolute; inset: 0; }
.msm-oferta__cta-img { width: 100%; height: 100%; object-fit: cover; }
.msm-oferta__cta-inner { position: relative; max-width: 44rem; }
.msm-oferta__cta-tytul { margin: 0; font-size: var(--msm-h2); line-height: var(--msm-h2-lh); }
.msm-oferta__cta-tekst { margin: 1.25rem auto 0; max-width: 34rem; color: var(--msm-n700); }
.msm-oferta__cta .msm-btn { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* Okienko z formularzem (karta „Wyślij CV") — ta sama skorupa co .msm-dialog. */
.msm-modal { width: min(36rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); }
.msm-modal__panel { position: relative; padding: clamp(1.5rem, 4vw, 2.5rem); }
.msm-modal__zamknij { position: absolute; top: 1rem; right: 1rem; }
.msm-modal__tytul { margin: 0 2.5rem .25rem 0; font-size: var(--msm-h3); line-height: var(--msm-h3-lh); font-weight: var(--msm-extrabold); color: var(--msm-naglowek); }
.msm-modal__podtytul { margin: 0 0 1.25rem; color: var(--msm-red); font-weight: var(--msm-semibold); }

/* --- Odstępy z edytora (zakładka „Odstępy" w sekcjach) -------------------
   Klasa trafia na sekcję tylko wtedy, gdy pole jest wypełnione, więc var()
   zawsze ma wartość i puste pole nie kasuje odstępów z motywu.
   Wartość z edytora ma być ostatnim słowem, także wobec ręcznych przypięć
   w tym arkuszu (np. „.msm-section.msm-kalkulator { padding-block: 80px
   !important }"). Samo !important nie wystarczy — między dwiema deklaracjami
   !important rozstrzyga specyficzność, dlatego klasa jest potrojona (0-3-0).
   ---------------------------------------------------------------------- */
.msm-odstep--mt.msm-odstep--mt.msm-odstep--mt { margin-top: var(--msm-mt) !important; }
.msm-odstep--mb.msm-odstep--mb.msm-odstep--mb { margin-bottom: var(--msm-mb) !important; }
.msm-odstep--pt.msm-odstep--pt.msm-odstep--pt { padding-top: var(--msm-pt) !important; }
.msm-odstep--pb.msm-odstep--pb.msm-odstep--pb { padding-bottom: var(--msm-pb) !important; }

@media (max-width: 767px) {
	.msm-odstep--mt-m.msm-odstep--mt-m.msm-odstep--mt-m { margin-top: var(--msm-mt-m) !important; }
	.msm-odstep--mb-m.msm-odstep--mb-m.msm-odstep--mb-m { margin-bottom: var(--msm-mb-m) !important; }
	.msm-odstep--pt-m.msm-odstep--pt-m.msm-odstep--pt-m { padding-top: var(--msm-pt-m) !important; }
	.msm-odstep--pb-m.msm-odstep--pb-m.msm-odstep--pb-m { padding-bottom: var(--msm-pb-m) !important; }
}

/* Hero podstrony trzyma swój odstęp na .msm-heros__inner, a odstęp z edytora
   siada na <section> — bez wyzerowania wnętrza obie wartości by się zsumowały
   i pole z zakładki „Odstępy" nic by nie zmieniało. Zerujemy tylko tę stronę,
   dla której redakcja wpisała wartość; hero bez wpisu zostaje na odstępach
   z motywu. */
.msm-odstep--pt .msm-heros__inner { padding-top: 0; }
.msm-odstep--pb .msm-heros__inner { padding-bottom: 0; }

@media (max-width: 767px) {
	.msm-odstep--pt-m .msm-heros__inner { padding-top: 0; }
	.msm-odstep--pb-m .msm-heros__inner { padding-bottom: 0; }
}

/* Hero podstrony bez zdjęcia stoi na kremowym tle — wariant z ekranu
   „Dieta z wyborem". Z obrazem tło rysuje .msm-heros--ma-tlo. */
.msm-heros:not(.msm-heros--ma-tlo) { background: var(--msm-bg); }

/* Wiersz z wariantami i kaloryczności w karcie diety — dane z zamawiarki,
   dlatego nie ma go w kartach wypełnianych ręcznie. */
.msm-dieta__meta {
	margin: 0;
	font-size: var(--msm-text-s);
	line-height: var(--msm-text-s-lh);
	font-weight: var(--msm-semibold);
	color: var(--msm-n500);
}
.msm-section--dark .msm-dieta__meta,
.msm-section--red .msm-dieta__meta { color: rgba(255, 255, 255, .75); }

/* --- Menu: jadłospis z zamawiarki ---------------------------------------
   Wiersz posiłku to <details>: nagłówek (summary) ma zdjęcie, nazwę posiłku,
   nazwę dania ze składem i kalorie, a po rozwinięciu dochodzą oznaczenia,
   makroskładniki i alergeny. Dzięki <details> rozwijanie działa bez JS.
   ---------------------------------------------------------------------- */
.msm-menu { display: flex; flex-direction: column; gap: 1.875rem; }

/* Jadłospis jest węższy od kontenera treści: w projekcie wiersze są wcięte
   z obu stron, a na pełnej szerokości skład dania dobijał do kaloryczności
   (uwagi klienta, wrzesień 2026: „tabela nie na całą szerokość strony").
   Wcięcie obejmuje filtry, pasek dni i listę, żeby wszystko stało w jednej osi. */
/* width: 100% jest tu konieczne. .msm-menu to kolumna flexowa, a element
   flexowy z automatycznym marginesem w osi poprzecznej przestaje się rozciągać
   i kurczy do treści — bez tej deklaracji szerokość listy zmieniałaby się
   razem z najdłuższą nazwą dania przy każdej zmianie dnia. */
.msm-menu__filtry,
.msm-menu__tydzien,
.msm-menu__lista,
.msm-menu__blad,
.msm-menu__akcje { width: 100%; margin-inline: auto; }

.msm-menu__filtry {
	display: grid;
	/* Środkowa kolumna jest szersza, bo mieści trzy pigułki wariantów
	   („5 posiłków / 4 posiłki / 3 posiłki") i nie mogą łamać się do drugiego rzędu. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
	gap: var(--msm-gap);
	align-items: start;
	/* Kreska oddzielająca wybór diety od paska dni. */
	padding-bottom: 1.875rem;
	border-bottom: 1px solid var(--msm-n300);
}
.msm-menu__pole { display: flex; flex-direction: column; gap: .4375rem; margin: 0; }
.msm-menu__label {
	display: block;
	margin: 0;
	font-size: var(--msm-text-xs);
	line-height: var(--msm-text-xs-lh);
	font-weight: var(--msm-semibold);
	color: var(--msm-n700);
}
/* W projekcie listy rozwijane są jasną, wypełnioną pigułką bez obrysu —
   obrys zostaje wyłącznie dla pigułek wyboru (posiłki, dni). */
.msm-menu__select {
	/* Własna strzałka zamiast systemowej — tylko tak da się ją odsunąć
	   od prawej krawędzi pola. */
	appearance: none;
	-webkit-appearance: none;
	padding-right: 3.25rem;
	background-color: var(--msm-n100);
	background-image: url("../img/ikony/chevron-down.svg");
	background-repeat: no-repeat;
	background-position: right 1.375rem center;
	background-size: 1rem 1rem;
	border: 1px solid transparent;
	box-shadow: var(--msm-cien);
	font-weight: var(--msm-semibold);
}
.msm-menu__select:hover { border-color: var(--msm-n300); }
.msm-menu__select:focus-visible { border-color: var(--msm-red); }
.msm-menu__pigulki { display: flex; flex-wrap: wrap; gap: .625rem; }
.msm-menu__pigulki .msm-pigulka { padding-inline: 1.125rem; }

/* Pasek dni: strzałki tygodnia po bokach, pigułki w środku. Na wąskich
   ekranach pigułki przewijają się w poziomie zamiast łamać na kilka rzędów. */
.msm-menu__tydzien { display: flex; align-items: center; gap: .625rem; }
.msm-menu__dni {
	display: flex;
	gap: .625rem;
	flex: 1 1 auto;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	padding-block: .25rem;
	transition: opacity .18s ease;
}
/* Przejście na inny tydzień: pasek dostaje komplet nowych dat, więc zamiast
   przewijać się donikąd, przenika. Klasa wisi tylko jedną klatkę. */
.msm-menu__dni.is-zmiana { opacity: 0; }
.msm-menu__dni::-webkit-scrollbar { display: none; }
.msm-menu__dni .msm-pigulka { flex: 1 0 auto; scroll-snap-align: start; white-space: nowrap; }

.msm-menu__strzalka {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: var(--msm-bialy);
	border: 1px solid var(--msm-n300);
	border-radius: 50%;
	color: var(--msm-n900);
	cursor: pointer;
	transition: border-color var(--msm-przejscie), color var(--msm-przejscie);
}
.msm-menu__strzalka:not(:disabled):hover { border-color: var(--msm-red); color: var(--msm-red); }
.msm-menu__strzalka:disabled { opacity: .35; cursor: not-allowed; }
.msm-menu__strzalka svg { width: 1.25rem; height: 1.25rem; }

/* Lista posiłków */
/* W projekcie przerwa między paskiem dni a pierwszym daniem jest wyraźnie
   większa od pozostałych odstępów w sekcji — dokładamy ją do wspólnego gap-a. */
.msm-menu__lista { display: flex; flex-direction: column; margin-top: 2.75rem; transition: opacity .22s ease; max-width: 50vw; }
.msm-menu.is-ladowanie .msm-menu__lista { opacity: .3; pointer-events: none; }
@media only screen and (max-width:1650px) {
	.msm-menu__lista {max-width: 70vw;}
}

@media only screen and (max-width:1024px) {
	.msm-menu__lista {max-width: 100%;}
}
/* Kreska rozdziela wiersze, nie obramowuje listy: nad pierwszym i pod
   ostatnim daniem w projekcie linii nie ma. */
.msm-menu__danie + .msm-menu__danie { border-top: 1px solid var(--msm-n200); }

.msm-menu__wiersz {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	padding: 1.375rem 0;
	cursor: pointer;
	list-style: none;
}
.msm-menu__wiersz::-webkit-details-marker { display: none; }
.msm-menu__wiersz:focus-visible { outline: 2px solid var(--msm-red); outline-offset: 4px; border-radius: var(--msm-radius); }

.msm-menu__foto {
	display: block;
	width: clamp(6rem, 14vw, 10.25rem);
	aspect-ratio: 4.5 / 3;
	border-radius: var(--msm-radius);
	overflow: hidden;
	background: var(--msm-n100);
	box-shadow: var(--msm-cien);
}
.msm-menu__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Danie bez zdjęcia dostaje kadr w kolorze tła strony z szarą ikoną. Miejsce
   w układzie zostaje takie samo, więc wiersze równają się niezależnie od tego,
   ile dań ma już zdjęcie w panelu dostawcy. */
.msm-menu__foto--pusta {
	display: grid;
	place-items: center;
	background: var(--msm-bg);
	box-shadow: none;
}
.msm-menu__foto-ikona {
	width: 42%;
	height: auto;
	color: var(--msm-n400);
}

/* Kolumna treści ma własny sufit, żeby skład dania kończył się wyraźnie
   przed kaloryczością, zamiast dochodzić do niej na styk. Sufit trzyma
   szerokość opisu niezależnie od szerokości listy (ta rośnie do 70vw na
   laptopach) — przy 34 rem opisy robiły się za szerokie (uwaga klienta,
   wrzesień 2026). */
.msm-menu__tresc { display: flex; flex-direction: column; gap: .25rem; min-width: 0; max-width: 24rem; }
.msm-menu__posilek {
	font-size: var(--msm-text-xs);
	line-height: var(--msm-text-xs-lh);
	font-weight: var(--msm-bold);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--msm-red);
}
.msm-menu__nazwa {
	font-size: var(--msm-text-l);
	line-height: var(--msm-text-l-lh);
	font-weight: var(--msm-bold);
	color: var(--msm-naglowek);
}
/* Skład bywa długi — w zwiniętym wierszu pokazujemy dwa wiersze tekstu. */
.msm-menu__sklad {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--msm-text-s);
	line-height: 1.55;
	color: var(--msm-n500);
}
.msm-menu__sklad b, .msm-menu__sklad strong { font-weight: var(--msm-semibold); color: var(--msm-n600); }
.msm-menu__sklad u { text-decoration: none; }

.msm-menu__kcal {
	font-size: var(--msm-text-m);
	font-weight: var(--msm-bold);
	color: var(--msm-red);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* W projekcie kółko rozwijania jest wyraźnie większe i ma miękką czerwoną
   poświatę zamiast cienia „box" (uwaga klienta: „strzałki inaczej trochę
   ostylowane, a hoverem z projektu"). Hover barwi znak na czerwono. */
.msm-menu__chevron {
	display: grid;
	place-items: center;
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 50%;
	background: var(--msm-bialy);
	box-shadow: 0 10px 28px rgba(243, 74, 77, .20);
	color: var(--msm-n900);
	transition: transform var(--msm-przejscie), color var(--msm-przejscie), box-shadow var(--msm-przejscie);
}
.msm-menu__chevron svg { width: 1.25rem; height: 1.25rem; }
.msm-menu__danie[open] .msm-menu__chevron { transform: rotate(180deg); color: var(--msm-red); }
.msm-menu__wiersz:hover .msm-menu__chevron {
	color: var(--msm-red);
	box-shadow: 0 12px 32px rgba(243, 74, 77, .32);
}

/* Szczegóły po rozwinięciu */
.msm-menu__szczegoly {
	display: flex;
	flex-direction: column;
	gap: .875rem;
	padding: 0 0 1.75rem;
	margin-left: calc(clamp(6rem, 14vw, 10.25rem) + clamp(1rem, 2.5vw, 1.75rem));
}
.msm-menu__tagi { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.msm-menu__tag {
	padding: .25rem .75rem;
	border-radius: var(--msm-radius-pill);
	background: var(--msm-tag);
	font-size: var(--msm-text-xs);
	line-height: var(--msm-text-xs-lh);
	font-weight: var(--msm-bold);
	color: var(--msm-n900);
}
.msm-menu__makro { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 0; }
.msm-menu__makro-pozycja { display: flex; align-items: baseline; gap: .375rem; }
.msm-menu__makro dt { font-size: var(--msm-text-s); color: var(--msm-n500); }
.msm-menu__makro dd {
	margin: 0;
	font-size: var(--msm-text-s);
	font-weight: var(--msm-bold);
	color: var(--msm-naglowek);
	font-variant-numeric: tabular-nums;
}
.msm-menu__alergeny { margin: 0; font-size: var(--msm-text-s); color: var(--msm-n500); }
.msm-menu__alergeny span { font-weight: var(--msm-semibold); color: var(--msm-n700); }

.msm-menu__pusto, .msm-menu__blad {
	margin: 0;
	padding: 2.5rem 0;
	text-align: center;
	color: var(--msm-n500);
}
.msm-menu__blad { color: var(--msm-red); }
.msm-menu__akcje { display: flex; justify-content: center; }

/* Sekcja na ciemnym albo czerwonym tle — same teksty, reszta zostaje biała. */
.msm-section--dark .msm-menu__label,
.msm-section--red .msm-menu__label { color: var(--msm-bialy); }
.msm-section--dark .msm-menu__nazwa,
.msm-section--red .msm-menu__nazwa { color: var(--msm-bialy); }
.msm-section--dark .msm-menu__danie,
.msm-section--red .msm-menu__danie { border-color: rgba(255, 255, 255, .22); }

@media (prefers-reduced-motion: reduce) {
	.msm-menu__dni { transition: none; }
	.msm-menu__dni.is-zmiana { opacity: 1; }
	.msm-menu__lista { transition: none; }
}

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

@media (max-width: 767px) {
	.msm-menu__filtry { grid-template-columns: 1fr; }

	/* Na telefonie kalorie schodzą pod nazwę dania, żeby nie ścisnąć tekstu
	   do dwóch słów w wierszu. */
	.msm-menu__wiersz {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"foto tresc chevron"
			"foto kcal  chevron";
		align-items: start;
		gap: .875rem;
	}
	.msm-menu__foto { grid-area: foto; align-self: start; }
	.msm-menu__tresc { grid-area: tresc; }
	.msm-menu__kcal { grid-area: kcal; align-self: end; }
	.msm-menu__chevron { grid-area: chevron; align-self: center; width: 2.5rem; height: 2.5rem; }
	.msm-menu__szczegoly { margin-left: 0; }
	.msm-menu__strzalka { width: 2.25rem; height: 2.25rem; }
}

/* --- Płynne pojawianie się sekcji ---------------------------------------
   Klasę msm-anim dokłada msm_atrybuty_sekcji() każdej sekcji z treści
   elastycznej. Wygaszone są tylko pod .msm-js (klasa z inline'u w <head>),
   więc bez JavaScriptu strona stoi w całości widoczna. Ujawnia je
   IntersectionObserver w main.js. Ograniczonym ruchem zajmuje się globalna
   reguła wyżej — przejście trwa wtedy 0,01 ms, czyli sekcja po prostu jest.
   ---------------------------------------------------------------------- */
.msm-js .msm-anim {
	opacity: 0;
	transform: translateY(1.75rem);
	transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
.msm-js .msm-anim.is-widoczna { opacity: 1; transform: none; }

/* Pierwsza sekcja strony (msm_atrybuty_sekcji()) wjeżdża tak samo, ale bez
   czekania na JS — animacja rusza przy pierwszym renderze. Start od .01,
   nie od zera: element z zerową przezroczystością Chrome pomija przy
   liczeniu LCP, a na oko różnicy nie ma. */
.msm-js .msm-anim-start { animation: msm-wjazd .6s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes msm-wjazd {
	from { opacity: .01; transform: translateY(1.75rem); }
}

/* Sekcje leżące na wspólnym zdjęciu animuje wrapper .msm-pas-foto, nie one
   same: transform zrobiłby z sekcji blok zawierający dla tła pasa (.msm-firma
   dostaje tam position: static właśnie po to, by tło łapało się wrappera),
   więc zdjęcie skakałoby na czas animacji. */
.msm-js .msm-pas-foto .msm-anim {
	opacity: 1;
	transform: none;
	transition: none;
}

/* --- Makieta mobilna strony głównej (Home-mobile.png) --------------------
   Blok trzymamy w jednym kawałku i na końcu pliku: wszystkie reguły niżej
   dotyczą wyłącznie szerokości telefonu i mają wygrywać kolejnością
   z regułami bazowymi sekcji, bez podbijania specyficzności.
   Pionowe odstępy sekcji NIE są tutaj — te ustawia redakcja w zakładce
   „Odstępy" każdego bloku (inc/helpers.php → msm_odstepy_sekcji()).
   ---------------------------------------------------------------------- */
/* --- Strefy: panel dosuwa się pod mapę (telefon i tablet) ------------------ */
/* Do 959 px, nie do 767 px: między 768 a 959 px nie działał ani układ
   desktopowy (dwie kolumny), ani mobilny — panel wisiał pod mapą osobno,
   z prostymi lewymi rogami z wersji desktopowej (uwaga Anny, 15.10). */
@media (max-width: 959px) {
	.msm-strefy__inner { gap: 0; }
	.msm-strefy__mapa { z-index: 1; }
	.msm-strefy__embed,
	.msm-strefy__mapa-img { border-radius: 30px; }
	.msm-strefy__panel {
		margin-top: -60px;
		border-radius: 0 0 30px 30px;
		padding-top: 80px;
	}
	.msm-strefy__miasta { margin-top: 2rem; }
}

@media (max-width: 767px) {

	/* --- Hero: zwężenia tekstu na telefonie ---------------------------- */
	/* Układ (grafika przy prawej krawędzi) ustawia blok poniżej 900 px.
	   Tutaj zostaje samo zwężenie leadu i przycisków, bo na telefonie
	   kadr zajmuje pół szerokości ekranu. */
	.msm-hero__tekst { max-width: 12rem; }
	.msm-hero__akcje { max-width: 18rem; }

	/* --- Karuzele: jedna karta na ekran, strzałki na krawędziach -------- */
	/* W makiecie strzałki są na telefonie widoczne i wchodzą na kartę —
	   bazowa reguła chowa je do 1100 px, więc przywracamy je tutaj. */
	.msm-karuzela__tor { grid-auto-columns: 100%; }
	.msm-karuzela__strzalka {
		display: flex;
		width: 3rem;
		height: 3rem;
	}
	.msm-karuzela__strzalka svg { width: 1.125rem; height: 1.125rem; }
	.msm-karuzela__strzalka--prev { left: -.75rem; }
	.msm-karuzela__strzalka--next { right: -.75rem; }
	/* Strzałka celuje w zdjęcie karty, nie w środek całej karty z opisem. */
	.msm-diety .msm-karuzela__strzalka,
	.msm-blog .msm-karuzela__strzalka { top: 30%; }

	/* --- Karta diety: treść na osi, przyciski jeden pod drugim ---------- */
	.msm-diety .msm-dieta__body { align-items: center; text-align: center; }
	.msm-diety .msm-dieta__tagi { justify-content: center; }
	.msm-diety .msm-dieta__cena { justify-content: center; }
	.msm-diety .msm-dieta__akcje { flex-direction: column; align-self: stretch; }
	.msm-diety .msm-dieta__akcje .msm-btn { flex: none; width: 100%; }


	/* --- Kafle kalkulatorów: w makiecie stoją luźniej -------------------- */
	.msm-kalk { gap: 2.5rem; }

	/* --- O nas: dekoracja obok przycisku, zdjęcie pod całością ---------- */
	.msm-onas__inner { display: flex; flex-direction: column; }
	.msm-onas__media { order: 2; }
	.msm-onas__tresc { order: 1; }
	/* Bazylia i papryczka mają stanąć w linii z „Dowiedz się więcej", a nie
	   wejść na zdjęcie — bazowe margin-bottom: -15rem podciągało je pod spód. */
	.msm-onas__dekor { margin-top: -5rem; margin-bottom: 0; }
	.msm-onas__dekor-img { width: clamp(150px, 45vw, 210px); }

	/* --- Program: kafle statystyk w siatce 2 kolumn --------------------- */
	.msm-program__staty { display: grid; grid-template-columns: 1fr 1fr; }
	/* Wyróżniony kafel stoi sam, wyśrodkowany pod parą powyżej. */
	.msm-staty--wyroz { grid-column: 1 / -1; justify-self: center; min-width: 11rem; }

	/* --- Atuty: karuzela po jednej karcie, ikona nad treścią ------------ */
	/* Ikonka ma mieć 84 px — kafel to ona plus padding 1.125rem z każdej strony. */
	.msm-atut__ikona-box { width: calc(84px + 2 * 1.125rem); }
	.msm-atut { flex-direction: column; align-items: center; text-align: center; }
	.msm-atut__tag { align-self: center; }
	/* align-items: center zwęziłoby treść do szerokości najdłuższego słowa —
	   body musi jawnie brać całą kolumnę. */
	.msm-atut__body { align-self: stretch; width: 100%; }
	.msm-karuzela--atuty .msm-atuty {
		/* Bez wyzerowania kolumny z reguły bazowej pierwsza karta dostałaby
		   resztkę miejsca po kolumnach domyślnych (1fr) i zwężała się. */
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 100%;
		/* Bez odstępu — w makiecie sąsiednia karta nie wystaje zza krawędzi. */
		gap: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
	}
	.msm-karuzela--atuty .msm-atuty::-webkit-scrollbar { display: none; }
	.msm-karuzela--atuty .msm-atuty > * { scroll-snap-align: start; }
	/* Strzałka celuje w ikonę, czyli w górną część karty. */
	.msm-karuzela--atuty .msm-karuzela__strzalka { top: 4.5rem; }

	/* --- Licznik: zestaw przed zdjęciem, pas na całą szerokość ---------- */
	.msm-licznik__inner { display: flex; flex-direction: column; }
	.msm-licznik__tresc { order: 1; }
	.msm-licznik__zestaw { order: 2; }
	.msm-licznik__akcje { order: 3; text-align: center; }
	.msm-licznik__media { order: 4; margin-top: 1.5rem; }
	/* Etykieta na środku pasa, zegar pod nią i nachodzi na pas dołem. */
	.msm-licznik__zestaw {
		display: grid;
		justify-items: center;
		gap: 0;
		padding-left: 0;
	}
	.msm-licznik__pas { top: 0; height: 7rem; transform: none; }
	.msm-licznik__etykieta { margin: 1.75rem 0 .75rem; }
	.msm-licznik__zegar { width: 11rem; }

	/* --- Newsletter i góra stopki: w makiecie wyśrodkowane -------------- */
	.msm-newsletter__inner { text-align: center; }
	/* W makiecie pod logo stoi wyśrodkowany blok firmy z telefonem, mailem
	   i przyciskiem, a dopiero pod nim kolumny menu. Kolejność zmieniamy
	   samym order — markup stopki zostaje wspólny z desktopem. */
	.msm-footer__cols { display: flex; flex-direction: column; }
	.msm-footer__col { order: 3; }
	.msm-footer__col--brand { order: 1; }
	.msm-footer__col--kontakt { order: 2; text-align: center; }
	.msm-footer__logo { display: flex; justify-content: center; }
	/* Nagłówek „Kontakt" powtarzałby się nad wyśrodkowanym blokiem. */
	.msm-footer__col--kontakt .msm-footer__title { display: none; }
	.msm-footer__list--kontakt li { display: flex; justify-content: center; }
	.msm-footer__cta { display: flex; justify-content: center; }
	/* Kolumny menu jako zwijane wiersze z kreską i strzałką — jak w makiecie.
	   Wiersze mają się stykać, więc odstęp siatki schodzi do zera, a oddech
	   pod blokiem kontaktowym wraca jako jego własny margines. */
	.msm-footer__cols { gap: 0; }
	.msm-footer__col--kontakt { margin-bottom: 2rem; }
	.msm-footer__akord { border-top: 1px solid var(--msm-n200); }
	.msm-footer__akord-tytul { margin: 0; padding: 1.375rem 0; }
	.msm-footer__akord .msm-footer__nav { padding-bottom: 1.125rem; }
	/* Pasek dolny w makiecie jest jedną kolumną wyrównaną do lewej. */
	.msm-footer__bar { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}

/* --- Uwagi klienta do wersji mobilnej (wrzesień 2026) --------------------
   Dokument „Master Smaku — uwagi mobilka". Wszystko poniżej 768 px, więc
   desktop i tablet zostają bez zmian. Stoi po bloku makiety mobilnej, bo
   część reguł nadpisuje tamte wartości (kolejność, bez podbijania
   specyficzności).
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {

	/* Nagłówki: na telefonie clamp spadał do minimum (h2 30 px, h3 24 px),
	   a Home-mobile.png trzyma rozmiary z desktopu — h2 40/50, h3 30/40.
	   H1 w makiecie ma 44 px przy ciasnej interlinii 50 px. H4 zostaje
	   na minimum z clampa: niesie m.in. długie nazwy dań w jadłospisie. */
	:root {
		--msm-h1:    2.75rem;   --msm-h1-lh: 1.1364;  /* 44 / 50 */
		--msm-h2:    2.5rem;    --msm-h2-lh: 1.25;    /* 40 / 50 */
		--msm-h3:    1.875rem;  --msm-h3-lh: 1.3333;  /* 30 / 40 */
	}
	/* W projekcie to H3, choć w kodzie siedzą na rozmiarze h4. */
	.msm-sciezka__tytul,
	.msm-atut__tytul { font-size: var(--msm-h3); line-height: var(--msm-h3-lh); }

	/* --- Hero: większa grafika, przyciski w jednej linii ---------------- */
	/* Jak w makiecie Home-mobile: grafika obok leadu, przy prawej krawędzi i częściowo
	   za nią; ocena Google zostaje pod spodem w pełni widoczna. Grafika jest
	   pozycjonowana od góry treści (pod tytułem), a nie od dołu sekcji. */
	.msm-hero__media { width: 62%; right: -6%; top: 8.5rem; bottom: auto; transform: none; }
	.msm-hero__tekst { max-width: 58%; }
	.msm-hero__akcje {
		max-width: none;
		flex-direction: column;
		align-items: flex-start;
	}
	.msm-hero__akcje .msm-btn--lg {
		padding: .8125rem 1.375rem;
		font-size: 1.0625rem;
		white-space: nowrap;
	}
	/* Łamanie jak w makiecie: „Pokochaj / swoje posiłki." */
	.msm-hero__tytul { max-width: 19.5rem; }

	/* --- Ocena Google: większe gwiazdki, liczba opinii w osobnym wierszu - */
	.msm-ocena { gap: .5rem 1rem; }
	.msm-ocena__logo { width: 2.5rem; height: auto; }
	.msm-ocena__gwiazdki { font-size: 1.75rem; line-height: 1; letter-spacing: .06em; }
	.msm-ocena__wartosc { font-size: 1.875rem; line-height: 1; }
	.msm-ocena__opis {
		flex-basis: 100%;
		padding-left: 0;
		border-left: 0;
		font-size: var(--msm-text-m);
	}

	/* --- Karty diet: tytuł zawsze na dwa wiersze ------------------------ */
	/* Karty w torze mają równą wysokość, więc karta z jednowierszowym
	   tytułem oddawała różnicę pustym miejscem między opisem, ceną
	   i przyciskami. Dwa wiersze zarezerwowane dla każdego tytułu
	   wyrównują karty bez tej dziury. */
	.msm-dieta__tytul {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: calc(2em * var(--msm-h3-lh));
	}
	/* Siatka na podstronach diet: karty wyraźnie osobno (tagi wystają
	   1 rem nad kartę i zjadały część odstępu). */
	.msm-diety__siatka { gap: 3.5rem; }

	/* --- Strefy: różowy pas pod mapą ----------------------------------- */
	/* Jak na desktopie — pas zaczyna się w połowie mapy i oddziela sekcję
	   od kafli kalkulatorów. */
	.msm-strefy.msm-section--light {
		background: linear-gradient(
			to bottom,
			var(--msm-bialy) 0 calc(var(--msm-pt-m, 3.5rem) + 9rem),
			var(--msm-bg) calc(var(--msm-pt-m, 3.5rem) + 9rem) 100%
		);
	}

	/* --- Licznik: większa etykieta, zegar i zdjęcie --------------------- */
	.msm-licznik__pas { height: 8rem; }
	.msm-licznik__etykieta { font-size: var(--msm-text-xl); margin-top: 2rem; }
	.msm-licznik__zegar { width: 13.5rem; }
	.msm-licznik__czas { font-size: 2rem; }
	/* Torba z pudełkiem zajmują ok. 60 % szerokości pliku (reszta to alfa),
	   więc grafika jest szersza od kolumny i wyśrodkowana po treści. */
	.msm-licznik__media { width: 145%; max-width: none; margin-left: -28.7%; margin-top: 0; }

	/* --- Kafle kalkulatorów --------------------------------------------- */
	/* Etykieta przy dwóch wierszach nie może mieć interlinii nagłówka —
	   pigułka robiła się za wysoka. */
	.msm-kalk__etykieta { line-height: 1.2; }

	/* --- Cennik: listki i pomidorki pod przypisem ------------------------ */
	/* Tło cennika obejmuje na desktopie całe tabele. Na telefonie tabele
	   są listą kart na kilka ekranów, więc zdjęcie rozciągnięte na tę
	   wysokość gubiło dekorację poza kadrem — przypinamy je tylko pod
	   przypisem i przyciskiem, jak tło CTA na stronie głównej (kadr
	   mobilny z pola „Zdjęcie w tle tabeli (mobile)"). */
	.msm-cennik__tlo-media { top: auto; height: 30rem; }
}

/* --- Popup „gdy odwiedzający utknie” (parts/popup-promocja.php) ---------
   Karta w lewym dolnym rogu, bez przyciemniania strony. Na telefonie siedzi
   nad paskiem akcji (Zadzwoń / Zamów), który zajmuje dół ekranu. Trzy
   warianty: --kod (kod rabatowy), --strefy (kod pocztowy), --kontakt (CF7). */
.msm-popup {
	position: fixed;
	left: clamp(1rem, 2vw, 1.5rem);
	bottom: clamp(1rem, 2vw, 1.5rem);
	z-index: 95;
	width: min(22rem, calc(100vw - 2rem));
	padding: 1.25rem 1.25rem 1.125rem;
	background: var(--msm-bialy);
	border-radius: var(--msm-radius-duzy);
	box-shadow: 0 18px 48px rgba(16, 24, 40, .18), var(--msm-cien);
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity .35s ease, transform .35s ease;
}
.msm-popup[hidden] { display: none; }
.msm-popup.is-widoczny { opacity: 1; transform: none; }
@media (max-width: 899px) {
	.msm-popup { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
}
.msm-popup__gora { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.msm-popup__etykieta { margin: 0; background: var(--msm-red); border-color: var(--msm-red); color: var(--msm-bialy); }
.msm-popup__zamknij {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	background: var(--msm-n100);
	border: 0;
	border-radius: 50%;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--msm-n700);
	cursor: pointer;
	transition: background var(--msm-przejscie), color var(--msm-przejscie);
}
.msm-popup__zamknij:hover { background: var(--msm-red); color: var(--msm-bialy); }
.msm-popup__zamknij:focus-visible { outline: 2px solid var(--msm-red); outline-offset: 2px; }
.msm-popup__tytul {
	margin: 0 0 .25rem;
	font-size: var(--msm-text-xl);
	line-height: var(--msm-text-xl-lh);
	font-weight: var(--msm-extrabold);
	color: var(--msm-n900);
}
.msm-popup__akcent { color: var(--msm-red); }
.msm-popup__opis { margin: 0; font-size: var(--msm-text-s); line-height: var(--msm-text-s-lh); color: var(--msm-n700); }
.msm-popup__kod {
	position: relative;
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1rem;
	padding: .5rem .5rem .5rem 1rem;
	background: var(--msm-bg);
	border: 1px dashed var(--msm-red);
	border-radius: var(--msm-radius-pill);
}
.msm-popup__kod-etykieta { font-size: var(--msm-text-s); font-weight: var(--msm-semibold); color: var(--msm-n600); }
.msm-popup__kod-wartosc { font-size: var(--msm-text-l, 1.125rem); font-weight: var(--msm-extrabold); letter-spacing: .08em; color: var(--msm-red); }
.msm-popup__kopiuj {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	margin-left: auto;
	padding: .375rem .875rem;
	background: var(--msm-bialy);
	border: 1px solid var(--msm-n200);
	border-radius: var(--msm-radius-pill);
	font: inherit;
	font-size: var(--msm-text-xs);
	font-weight: var(--msm-bold);
	color: var(--msm-n800);
	cursor: pointer;
	transition: background var(--msm-przejscie), color var(--msm-przejscie), border-color var(--msm-przejscie);
}
.msm-popup__kopiuj[hidden] { display: none; }
.msm-popup__kopiuj:hover { background: var(--msm-red); border-color: var(--msm-red); color: var(--msm-bialy); }
.msm-popup__ikona { width: 1rem; height: 1rem; }
.msm-popup__status {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--msm-red);
	border-radius: inherit;
	font-size: var(--msm-text-s);
	font-weight: var(--msm-bold);
	color: var(--msm-bialy);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}
.msm-popup__kod.ma-potwierdzenie .msm-popup__status { opacity: 1; }
.msm-popup__cta { width: 100%; margin-top: .875rem; justify-content: center; }
.msm-popup__notka { margin: .625rem 0 0; font-size: var(--msm-text-xs); line-height: var(--msm-text-xs-lh); color: var(--msm-n500); text-align: center; }

/* Wariant --strefy: pole kodu pocztowego i wynik pod nim. Pigułka jak
   w newsletterze; obwódka fokusu czerwona, bo biała ginęłaby na białej karcie. */
.msm-popup__pole { margin-top: 1rem; }
.msm-popup .msm-kodpocztowy:focus-within { box-shadow: 0 0 0 2px var(--msm-red); }
/* Globalna reguła input[type="text"] jest mocniejsza od samej klasy pola —
   zdejmujemy jej obramowanie i cień, pigułkę rysuje formularz. */
.msm-popup .msm-kodpocztowy__input { padding: .5rem 1rem; background: transparent; border: 0; box-shadow: none; font-size: var(--msm-text-s); }
.msm-popup__wynik { margin-top: .875rem; padding: .75rem 1rem; background: var(--msm-n50); border-radius: var(--msm-radius); }
.msm-popup__wynik[hidden] { display: none; }
.msm-popup__wynik-naglowek { margin: 0; font-size: var(--msm-text-m); line-height: var(--msm-text-m-lh); font-weight: var(--msm-extrabold); }
.msm-popup__wynik--tak .msm-popup__wynik-naglowek { color: var(--msm-tag); }
.msm-popup__wynik--nie .msm-popup__wynik-naglowek { color: var(--msm-red); }
.msm-popup__wynik--blad .msm-popup__wynik-naglowek { color: var(--msm-n600); }
.msm-popup__wynik-opis { margin: .25rem 0 0; font-size: var(--msm-text-s); line-height: var(--msm-text-s-lh); color: var(--msm-n700); }
.msm-popup__wynik-opis:empty { display: none; }
.msm-popup__wynik-link { margin-top: .5rem; font-size: var(--msm-text-s); }
.msm-popup__wynik-link[hidden] { display: none; }

/* Wariant --kontakt: formularz CF7 ściśnięty do karty — jedno pole, zgoda
   i przycisk na całą szerokość. Klasy z szablonu „Popup — prośba o kontakt”. */
.msm-popup__formularz { margin-top: .875rem; }
.msm-popup__formularz .msm-form__pole { margin-bottom: 0; }
.msm-popup__formularz .msm-form__pole label { margin-bottom: .25rem; font-size: var(--msm-text-xs); }
.msm-popup__formularz input[type="text"] { padding-block: .625rem; font-size: var(--msm-text-s); }
.msm-popup__formularz .msm-form__zgoda { margin-top: .75rem; }
.msm-popup__formularz .msm-form__zgoda label { gap: .5rem; }
.msm-popup__formularz .msm-form__akcje { margin-top: .875rem; }
.msm-popup__formularz .msm-form__akcje .msm-btn { width: 100%; }
.msm-popup__formularz .wpcf7-spinner { position: absolute; }
.msm-popup__formularz .wpcf7-response-output { margin: .75rem 0 0 !important; padding: .625rem .875rem !important; font-size: var(--msm-text-xs); }
.msm-popup__formularz .wpcf7-not-valid-tip { font-size: var(--msm-text-xs); }

/* Niskie okna (telefon w poziomie): karta nie wychodzi za górną krawędź. */
.msm-popup { max-height: calc(100vh - 2rem); overflow-y: auto; }
@media (max-width: 899px) {
	.msm-popup { max-height: calc(100vh - 6rem - env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
	.msm-popup { transition: none; transform: none; }
	.msm-popup .msm-kodpocztowy--blad { animation: none; }
}


/* --- Hero na telefonie: wycinek osoby + tło (makieta Home-mobile) --------
   Gdy blok hero ma „Telefon: wycinek osoby” (parts/sekcje/hero.php,
   .msm-hero--ma-mobile), poniżej 600 px zamiast kadru z desktopu pokazujemy
   osobę po prawej obok leadu, a za nią tło (bazylia). Osoba zaczyna się pod
   tytułem (tytuł na telefonie ma stałe 44/50 px, dwie linie + margines ≈ 7.75rem)
   i sięga do przycisków; przyciski i ocena leżą nad nią (z-index treści z reguły
   poniżej 900 px). Stoi na końcu pliku, bo nadpisuje blok „Uwagi klienta”.
   ---------------------------------------------------------------------- */
.msm-hero__media-mobile { display: none; }
@media (max-width: 599px) {
	.msm-hero--ma-mobile .msm-hero__media { display: none; }
	.msm-hero--ma-mobile .msm-hero__media-mobile {
		display: block;
		position: absolute;
		top: 7rem;
		right: -4%;
		width: 62%;
		z-index: 0;
		pointer-events: none;
	}
	.msm-hero--ma-mobile .msm-hero__mobile-osoba {
		position: relative;
		z-index: 1;
		width: 100%;
		height: auto;
	}
	.msm-hero--ma-mobile .msm-hero__mobile-tlo {
		position: absolute;
		left: -45%;
		top: 30%;
		width: 105%;
		height: auto;
		z-index: 0;
	}
	/* Lead w lewej połowie, przyciski pod nim na całą szerokość (jak w makiecie). */
	.msm-hero--ma-mobile .msm-hero__tekst { max-width: 48%; }
	.msm-hero--ma-mobile .msm-hero__akcje { max-width: none; position: relative; z-index: 1; }
	.msm-hero--ma-mobile .msm-hero__akcje .msm-btn--ghost { align-self: stretch; text-align: center; }
	/* Osoba sięga ok. 7.25rem + 1.65 × szerokość; treść musi być co najmniej tak wysoka,
	   żeby wycinek nie wchodził w ocenę Google ani w sekcję poniżej. */
	.msm-hero--ma-mobile .msm-hero__tresc { min-height: calc(7rem + 62vw * 1.6); }
}