/* =========================================================
	   NURSE NOTES, Planner Praktyk. Sprzedaz produktu fizycznego.
	   Wszystko zamkniete w .nn-sklep, zeby nie zderzac sie z motywem
	   nadrzednym, WooCommerce ani z innymi szablonami.
	   ========================================================= */

	/* 1. TOKENY, te same co na pozostalych stronach sklepu */
	.nn-sklep {
		--ink: #49372f;
		--muted: #806a61;
		--coral: #ee6b73;
		--coral-dark: #a92f47;
		--cream: #fbf6f2;
		--paper: #fffdfb;
		--blush: #f3d9df;
		--sage: #dde7dd;
		--line: #e8dcd5;
		--shadow: 0 22px 60px rgba(72, 49, 40, .12);
		--serif: Georgia, "Times New Roman", serif;
		--sans: Arial, Helvetica, sans-serif;
	}

	/* 2. BAZA */
	html { scroll-behavior: smooth; }
	html, body { overflow-x: clip; }

	body.nn-sklep {
		margin: 0;
		background: var(--paper);
		color: var(--ink);
		font-family: var(--sans);
		line-height: 1.6;
		-webkit-font-smoothing: antialiased;
	}
	.nn-sklep * { box-sizing: border-box; }
	/* height: auto jest tu obowiazkowe. Bez tego obraz bierze wysokosc
	   z atrybutu height i rozciaga sie po zmianie szerokosci. */
	.nn-sklep img { display: block; max-width: 100%; height: auto; }
	.nn-sklep a { color: inherit; text-decoration: none; }
	.nn-sklep button { font: inherit; }
	.nn-sklep p { margin: 0; }
	.nn-sklep figcaption { font-style: normal; }
	.nn-sklep h1, .nn-sklep h2, .nn-sklep h3 {
		font-family: var(--serif);
		font-weight: 500;
		line-height: 1.05;
		margin: 0;
		color: var(--ink);
	}
	.nn-sklep h1 { font-size: clamp(2.5rem, 4.2vw, 4.1rem); letter-spacing: -.045em; }
	.nn-sklep h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); letter-spacing: -.035em; }
	.nn-sklep h3 { font-size: 1.55rem; }
	.nn-sklep [id] { scroll-margin-top: 96px; }

	.nn-shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

	.nn-skip {
		position: fixed; left: 16px; top: -80px; z-index: 200;
		background: #fff; color: var(--ink); padding: 12px 16px;
		border: 1px solid var(--line); font-weight: 800;
	}
	.nn-skip:focus { top: 16px; }

	.nn-eyebrow {
		margin: 0 0 12px;
		color: #a92f47;
		font-size: .75rem;
		font-weight: 800;
		letter-spacing: .16em;
		text-transform: uppercase;
	}
	.nn-eyebrow::before {
		content: '';
		display: inline-block;
		width: 24px; height: 1px;
		background: var(--coral);
		margin: 0 10px 4px 0;
	}
	.nn-muted { color: var(--muted); }

	.nn-section { padding: 74px 0; }
	.nn-section-head { display: flex; justify-content: space-between; gap: 48px; align-items: end; margin-bottom: 36px; }
	.nn-section-head > div { max-width: 720px; }
	.nn-section-head > p { max-width: 390px; color: var(--muted); }
	.nn-section-head.nn-center { display: block; text-align: center; max-width: 780px; margin: 0 auto 38px; }
	.nn-section-head.nn-center > p { margin: 16px auto 0; }

	/* 3. PRZYCISKI
	   Selektory z .nn-sklep, bo sama klasa .nn-btn przegrywa specyficznoscia
	   z .nn-sklep a { color: inherit } i napis robi sie niewidoczny. */
	.nn-sklep .nn-btn {
		display: inline-flex; align-items: center; justify-content: center;
		gap: 10px; min-height: 52px; padding: 0 26px;
		background: var(--coral); color: #fff;
		font-weight: 800; font-size: .95rem;
		border: 0; cursor: pointer;
		transition: background .2s ease, transform .2s ease;
		text-align: center;
	}
	.nn-sklep .nn-btn:hover { background: var(--coral-dark); transform: translateY(-2px); }
	.nn-sklep .nn-btn.nn-dark { background: var(--ink); color: #fff; }
	.nn-sklep .nn-btn.nn-dark:hover { background: #32241f; }
	.nn-sklep .nn-btn.nn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
	.nn-sklep .nn-btn.nn-ghost:hover { background: var(--ink); color: #fff; }
	/* Stan bez ID produktu: wyglada na wylaczony i nie da sie w niego kliknac. */
	.nn-sklep .nn-btn-off,
	.nn-sklep .nn-btn-off:hover {
		background: #ded2cb; color: #6f5b52;
		cursor: not-allowed; transform: none;
		font-size: .85rem;
	}
	.nn-sklep .nn-text-link { display: inline-flex; gap: 10px; font-weight: 800; border-bottom: 1px solid currentColor; }

	.nn-check { list-style: none; padding: 0; margin: 0; }
	.nn-check li { padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
	.nn-check li::before { content: '\2713'; color: var(--coral); font-weight: 900; margin-right: 12px; }

	/* 4. PASEK ADMINA, widoczny tylko dla zalogowanego administratora */
	.nn-admin-bar {
		background: #7a1f2b; color: #fff;
		padding: 10px 16px; text-align: center;
		font-size: .82rem; font-weight: 700; line-height: 1.5;
	}

	/* 5. TOPBAR */
	.nn-topbar {
		background: var(--ink); color: #fff;
		text-align: center; padding: 8px 16px;
		font-size: .78rem; letter-spacing: .04em;
	}

	/* 6. NAGLOWEK I NAWIGACJA */
	.nn-header {
		position: sticky; top: 0; z-index: 50;
		background: rgba(255, 253, 251, .94);
		border-bottom: 1px solid rgba(232, 220, 213, .7);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		transition: transform .25s ease, background-color .2s ease, box-shadow .2s ease;
	}
	.nn-header.is-stuck {
		background: var(--paper);
		border-bottom-color: var(--line);
		box-shadow: 0 10px 30px rgba(72, 49, 40, .10);
	}
	.nn-header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
	.nn-logo { display: inline-flex; align-items: center; line-height: 0; flex: 0 0 auto; }
	.nn-logo img { width: 210px; max-width: 100%; height: auto; }

	.nn-nav-wrap { display: flex; align-items: center; gap: 10px; }
	.nn-nav { display: flex; align-items: center; gap: 24px; font-size: .86rem; font-weight: 700; }
	.nn-nav a:hover { color: var(--coral-dark); }
	.nn-nav .nn-nav-kontakt { display: none; }

	.nn-sklep .nn-cart {
		position: relative;
		display: inline-flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; flex: 0 0 auto;
		color: var(--ink);
		transition: color .2s ease, background .2s ease;
	}
	.nn-cart-count {
		position: absolute; top: 3px; right: 1px;
		min-width: 18px; height: 18px; padding: 0 5px;
		border-radius: 999px;
		background: var(--coral); color: #fff;
		font-family: var(--sans); font-size: 11px; font-weight: 800;
		line-height: 18px; text-align: center;
		box-shadow: 0 2px 6px rgba(72, 49, 40, .2);
		pointer-events: none;
	}
	.nn-cart-count.is-empty { display: none; }
	.nn-cart:hover { color: var(--coral-dark); background: var(--cream); }
	.nn-cart svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

	.nn-in-cart {
		display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
		margin-top: 12px; padding: 9px 12px;
		background: rgba(238, 107, 115, .12);
		border-left: 3px solid var(--coral);
		font-size: .78rem; font-weight: 700; color: var(--ink); line-height: 1.4;
	}
	.nn-in-cart::before { content: '\2713'; color: var(--coral); font-weight: 900; }
	.nn-in-cart a { font-weight: 800; border-bottom: 1px solid currentColor; }
	.nn-in-cart[hidden] { display: none; }

	.nn-burger {
		display: none;
		width: 44px; height: 44px; flex: 0 0 auto;
		align-items: center; justify-content: center;
		background: transparent; border: 1px solid var(--line);
		color: var(--ink); cursor: pointer; padding: 0;
	}
	.nn-burger span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
	.nn-burger span::before, .nn-burger span::after {
		content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
	}
	.nn-burger span::before { top: -7px; }
	.nn-burger span::after { top: 7px; }

	/* 7. HERO */
	.nn-hero { background: var(--cream); padding: 54px 0 58px; }
	.nn-hero-grid { display: grid; grid-template-columns: .78fr 1.3fr .74fr; gap: 40px; align-items: center; }

	/* Kolumna z produktem. Dopoki nie ma zdjec, stoi tu prawdziwa strona
	   wnetrza oparta o wizualizacje okladki zbudowana w CSS. */
	.nn-hero-produkt { position: relative; display: grid; place-items: center; background: var(--blush); padding: 34px 26px 26px; min-height: 430px; }
	/* Wariant ze zdjeciem okladki. Wlacza sie sam, gdy plik foto-okladka.webp
	   pojawi sie w assets/planner. Rysowana wizualizacja .nn-okladka jest wtedy pomijana. */
	.nn-hero-foto { padding: 26px 22px 22px; }
	.nn-hero-okladka {
		display: block; width: 100%; max-width: 250px; height: auto;
		border-radius: 3px 8px 8px 3px; box-shadow: 0 22px 34px rgba(74, 57, 50, .26);
		transform: rotate(-4deg);
	}
	/* Placeholder nie udaje finalnej fotografii. Po podmianie src na prawdziwy
	   plik zdjęcie pokaże się bez dalszej zmiany układu. */
	.nn-hero-okladka[src^="data:image/svg+xml"] { display: none; }
	.nn-okladka {
		position: relative; width: 208px; padding: 30px 20px 24px;
		background: linear-gradient(160deg, #52403a 0%, #3b2c27 100%);
		color: #f7ece7; text-align: center;
		box-shadow: 0 22px 34px rgba(72, 49, 40, .3);
	}
	.nn-okladka::before {
		content: ''; position: absolute; left: 9px; top: 0; bottom: 0; width: 1px;
		background: rgba(247, 236, 231, .28);
	}
	.nn-okladka small { display: block; font-size: .56rem; letter-spacing: .24em; text-transform: uppercase; color: #d8bfb6; }
	.nn-okladka strong { display: block; margin: 14px 0 12px; font-family: var(--serif); font-weight: 500; font-size: 1.5rem; line-height: 1.15; }
	.nn-okladka i { display: block; width: 34px; height: 1px; margin: 0 auto 12px; background: var(--coral); }
	.nn-okladka span { display: block; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: #d8bfb6; }
	/* Strona wnetrza wysunieta zza okladki. */
	.nn-hero-kartka {
		position: absolute; right: 22px; bottom: 26px; width: 150px;
		border: 1px solid var(--line);
		box-shadow: 0 16px 30px rgba(72, 49, 40, .2);
	}
	.nn-hero-podpis { margin-top: 16px; font-size: .68rem; line-height: 1.45; color: #8a6a63; text-align: center; }

	.nn-hero-info > p:not(.nn-eyebrow) { margin: 18px 0; color: var(--muted); }
	.nn-hero-info .nn-check { font-size: .88rem; }
	.nn-hero-info .nn-hero-emotion { font-family: var(--serif); font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1.2; color: var(--ink); }
	.nn-hero-info .nn-hero-emotion em { font-style: italic; color: var(--coral-dark); }

	/* 8. PUDELKO ZAKUPU */
	.nn-buy-box { border-left: 1px solid var(--line); padding-left: 30px; }
	.nn-promo {
		display: inline-block; margin-bottom: 12px; padding: 5px 10px;
		background: var(--ink); color: #fff;
		font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	}
	.nn-cena-rzad { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
	.nn-cena { display: block; font-family: var(--serif); font-weight: 500; font-size: 3.2rem; line-height: 1; }
	.nn-cena-stara { font-size: .95rem; color: var(--muted); text-decoration: line-through; }
	.nn-cena-info { margin: 8px 0 16px; font-size: .72rem; color: var(--muted); line-height: 1.5; }
	.nn-buy-name { margin: 0 0 14px; }
	.nn-buy-name strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.45rem; line-height: 1.15; }
	.nn-buy-name span { display: block; margin-top: 5px; color: var(--muted); font-size: .76rem; line-height: 1.45; }
	.nn-buy-savings { margin: -4px 0 16px; padding: 10px 12px; background: var(--blush); color: var(--ink); font-size: .76rem; font-weight: 700; line-height: 1.45; }
	.nn-buy-box .nn-btn { width: 100%; }
	.nn-buy-box .nn-drobne { font-size: .72rem; color: var(--muted); margin-top: 10px; line-height: 1.5; }
	.nn-buy-box .nn-solo-link { color: var(--muted); }

	/* Stylu licznika odliczajacego tu nie ma, bo nie ma licznika.
	   Data konca ceny startowej stoi zwyklym zdaniem w .nn-cena-info.
	   Tykajacy zegar to falszywa pilnosc, ktorej na tym sklepie nie robimy. */

	.nn-wysylka {
		display: flex; align-items: baseline; gap: 8px;
		margin-top: 14px; padding: 10px 12px;
		background: var(--sage);
		font-size: .78rem; font-weight: 700; line-height: 1.45;
	}
	.nn-wysylka::before { content: '\25B0'; color: #5d7a5d; }

	/* 9. PASEK LICZB */
	.nn-liczby { background: var(--ink); color: #fff; padding: 30px 0; }
	.nn-liczby-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
	.nn-liczby-grid > div { display: flex; align-items: baseline; gap: 12px; }
	.nn-liczby b { font-family: var(--serif); font-weight: 500; font-size: 2.4rem; line-height: 1; color: #ffbdc2; }
	.nn-liczby strong { display: block; font-size: .88rem; }
	.nn-liczby small { display: block; font-size: .74rem; color: #cdbdb6; line-height: 1.4; }

	/* 10. CHAOS, scena na biurku
	   Trzy zdjecia: telefon, karteczka i kartka z zeszytu. Napisy NIE sa
	   wypalone w obrazkach, tylko lezą na nich jako zwykly HTML. Dzieki temu
	   tekst jest ostry, mozna go poprawic bez generowania obrazka od nowa
	   i widzi go zarowno Google, jak i czytnik ekranu.

	   WAZNE: te trzy pliki maja tlo wypelnione dokladnie kolorem --cream
	   (#fbf6f2), czyli tym samym, co tlo tej sekcji. Dlatego nie widac,
	   gdzie konczy sie obrazek, a zaczyna strona, i dlatego obroty nie
	   pokazuja rogow prostokata. Zmiana --cream wymaga wygenerowania
	   plikow od nowa, inaczej pojawia sie trzy widoczne kwadraty. */
	.nn-biurko {
		display: grid;
		grid-template-columns: 232px 208px 330px;
		justify-content: center; align-items: center;
		gap: 30px;
		padding: 34px 20px 40px;
		background: var(--cream);
		overflow: clip;
	}
	.nn-obiekt { position: relative; margin: 0; }
	.nn-obiekt img { display: block; width: 100%; height: auto; }
	.nn-o-telefon { transform: rotate(-2deg); }
	.nn-o-karteczka { transform: rotate(1.5deg); }
	.nn-o-kartka { transform: rotate(-1.5deg); }

	/* Ekran telefonu. Wspolrzedne zmierzone na pliku chaos-telefon.webp,
	   dlatego sa w procentach: trzymaja sie przy kazdej szerokosci obrazka. */
	/* Flex w pionie, zeby „pisze..." dalo sie przypiac do dolu ekranu.
	   Bez tego rozmowa siedziala u gory, a dolne dwie trzecie ekranu
	   swiecily pustka i telefon wygladal na wylaczony. */
	.nn-ekran {
		position: absolute;
		left: 12.28%; top: 6.31%; width: 67.46%; height: 82.62%;
		padding: 6% 6% 5%;
		display: flex; flex-direction: column;
		overflow: hidden;
	}
	.nn-czat-head {
		display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
		padding-bottom: 7px; margin-bottom: 10px;
		border-bottom: 1px solid var(--line);
		font-size: 8.5px; font-weight: 800; letter-spacing: .08em;
		text-transform: uppercase; color: var(--muted);
	}
	/* Rozmowa dosunieta do dolu ekranu, tak jak w prawdziwym komunikatorze.
	   Osobny kontener, a nie margin-top:auto na dymku, bo regula
	   .nn-sklep p { margin: 0 } ma wyzsza specyficznosc niz .nn-dymek
	   i skasowalaby ten margines. Z tego samego powodu marginesy dymkow
	   pisane sa przez .nn-ekran .nn-dymek. */
	.nn-czat-lista {
		flex: 1 1 auto;
		display: flex; flex-direction: column; justify-content: flex-end;
		min-height: 0;
	}
	.nn-ekran .nn-dymek {
		background: #fff; border: 1px solid var(--line);
		border-radius: 12px 12px 12px 3px;
		padding: 7px 9px; margin: 0 0 8px;
		font-size: 11.5px; line-height: 1.35; color: var(--ink);
	}
	.nn-ekran .nn-dymek-cisza {
		margin-bottom: 0;
		background: var(--cream); border-style: dashed;
		color: #a4938b; font-style: italic;
	}

	/* Napis na karteczce. Obrot 2.6 stopnia to zmierzone nachylenie
	   gornej krawedzi karteczki na zdjeciu, zeby tekst lezal rowno z nia. */
	.nn-napis-karteczka {
		position: absolute; left: 15%; top: 26%; width: 62%;
		transform: rotate(2.6deg); transform-origin: left top;
		color: #5a4610;
	}
	.nn-napis-karteczka b {
		display: block; margin-bottom: 7px;
		font-size: 8.5px; font-weight: 800; letter-spacing: .16em; color: #96700f;
	}
	.nn-napis-karteczka span { display: block; font-family: var(--serif); font-size: 12px; line-height: 1.8; }

	/* Kartka zostaje pusta. Papier jest pognieciony, wiec liniatura ma
	   nierowny odstep i wpisany w nia tekst szedlby w poprzek linii.
	   Pusta kartka lepiej oddaje sens: nic nie zostalo zapisane. */
	.nn-napis-kartka-tytul {
		position: absolute; left: 26%; top: 8%;
		font-size: 9px; font-weight: 800; letter-spacing: .14em;
		text-transform: uppercase; color: #a4938b;
	}
	.nn-napis-kartka {
		position: absolute; left: 26%; bottom: 15%; width: 58%;
		font-family: var(--serif); font-style: italic; font-size: 13px;
		color: #9a8880; transform: rotate(-1deg);
	}

	.nn-chaos-suma { margin-top: 26px; padding: 18px 22px; background: var(--blush); font-weight: 800; }

	/* 11. TRZY KROKI */
	.nn-kroki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
	.nn-krok { background: var(--cream); padding: 28px 26px 26px; border-top: 3px solid var(--coral); }
	.nn-krok b { font-family: var(--serif); font-size: 1.9rem; color: #c9b3a9; line-height: 1; }
	.nn-krok span { display: block; margin: 12px 0 6px; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
	.nn-krok ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: .9rem; }
	.nn-krok li { margin-bottom: 5px; }

	/* 12. GALERIA WNETRZA */
	.nn-gallery { background: var(--cream); }
	.nn-gal { position: relative; }
	/* Bez scroll-behavior: smooth. Czesc przegladarek ignoruje wtedy
	   programowe przewijanie i strzalki robia sie martwe. */
	.nn-gal-track {
		display: grid; grid-auto-flow: column; grid-auto-columns: 31%;
		gap: 20px; overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		padding: 6px 2px 10px;
	}
	.nn-gal-slide { margin: 0; scroll-snap-align: start; }
	.nn-gal-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; }
	.nn-gal-open img {
		width: 100%; height: auto; background: #fff;
		border: 1px solid var(--line);
		box-shadow: 0 14px 34px rgba(72, 49, 40, .1);
		transition: transform .2s ease, box-shadow .2s ease;
	}
	.nn-gal-open:hover img, .nn-gal-open:focus-visible img {
		transform: translateY(-5px);
		box-shadow: 0 22px 46px rgba(72, 49, 40, .17);
	}
	.nn-gal-slide figcaption { margin-top: 12px; text-align: center; font-size: .84rem; color: var(--ink); line-height: 1.35; }
	.nn-gal-slide figcaption small { display: block; margin-top: 3px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
	.nn-gal-nav {
		position: absolute; top: 44%; transform: translateY(-50%); z-index: 45;
		width: 46px; height: 46px;
		border: 1px solid var(--line); background: #fff; color: var(--ink);
		font-size: 1.05rem; cursor: pointer;
		box-shadow: 0 10px 26px rgba(72, 49, 40, .14);
		transition: background .18s ease, color .18s ease;
	}
	.nn-gal-nav:hover { background: var(--ink); color: #fff; }
	.nn-gal-nav[disabled] { opacity: .28; cursor: default; box-shadow: none; }
	.nn-gal-nav.nn-prev { left: 18px; }
	.nn-gal-nav.nn-next { right: 18px; }
	.nn-gal-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 16px; font-size: .8rem; color: var(--muted); }
	.nn-gal-count { font-weight: 800; letter-spacing: .06em; }

	.nn-lightbox {
		position: fixed; inset: 0; z-index: 90;
		display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center; gap: 14px; padding: 28px;
		background: rgba(50, 36, 31, .96);
	}
	.nn-lightbox[hidden] { display: none; }
	.nn-lb-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
	.nn-lb-figure img { max-width: 100%; max-height: 76vh; width: auto; height: auto; background: #fff; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
	.nn-lb-figure figcaption { text-align: center; color: #f6ebe5; font-family: var(--serif); font-size: 1.15rem; }
	.nn-lb-figure small { display: block; margin-top: 6px; font-family: var(--sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #bda69c; }
	.nn-lb-nav, .nn-lb-close {
		border: 1px solid rgba(255, 255, 255, .34);
		background: rgba(255, 255, 255, .08);
		color: #fff; cursor: pointer;
		transition: background .18s ease, color .18s ease;
	}
	.nn-lb-nav:hover, .nn-lb-close:hover { background: #fff; color: var(--ink); }
	.nn-lb-nav { width: 52px; height: 52px; font-size: 1.2rem; }
	.nn-lb-close { position: absolute; right: 22px; top: 22px; width: 44px; height: 44px; font-size: .95rem; z-index: 2; }
	body.nn-lb-open { overflow: hidden; }

	/* 13. ROZDZIALY */
	.nn-rozdzialy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
	.nn-rozdzial { background: var(--cream); padding: 26px; }
	.nn-rozdzial b { font-family: var(--serif); font-size: 2.1rem; color: var(--coral); line-height: 1; }
	.nn-rozdzial h3 { margin: 10px 0 8px; font-size: 1.35rem; }
	.nn-rozdzial p { color: var(--muted); font-size: .88rem; }
	.nn-rozdzial.nn-szeroki { grid-column: span 3; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; background: var(--blush); }
	.nn-rozdzial.nn-szeroki p { color: #6f574e; }

	/* 14. ZESTAWY */
	.nn-zestawy { background: var(--ink); color: #fff; }
	.nn-zestawy h2, .nn-zestawy h3 { color: #fff; }
	.nn-zestawy .nn-eyebrow { color: #ffbdc2; }
	.nn-zestawy .nn-eyebrow::before { background: #ffbdc2; }
	.nn-zestawy-head { max-width: 780px; margin: 0 auto 36px; text-align: center; }
	.nn-zestawy-head p { color: #d6c7c0; margin-top: 14px; }
	.nn-zestawy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
	.nn-zestaw {
		display: flex; flex-direction: column;
		position: relative;
		background: #fff; color: var(--ink); padding: 28px 26px 26px;
	}
	.nn-zestaw h3 { color: var(--ink); }
	.nn-zestaw-nr { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
	.nn-zestaw-dla { margin: 6px 0 4px; font-size: .82rem; color: var(--coral-dark); font-weight: 700; }
	.nn-zestaw > p.nn-zestaw-opis { margin: 10px 0 16px; color: var(--muted); font-size: .88rem; }
	.nn-zestaw ul { list-style: none; padding: 0; margin: 0 0 20px; font-size: .86rem; }
	.nn-zestaw li { padding: 7px 0; border-bottom: 1px solid var(--line); }
	.nn-zestaw li::before { content: '\2713'; color: var(--coral); font-weight: 900; margin-right: 10px; }
	.nn-zestaw li.nn-brak { color: #a4938b; }
	.nn-zestaw li.nn-brak::before { content: '\2013'; color: #c4b4ac; }
	.nn-zestaw-cena { margin-top: auto; }
	.nn-zestaw-cena small { display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
	.nn-zestaw-cena .nn-cena { font-size: 2.6rem; margin: 2px 0 4px; }
	.nn-zestaw .nn-btn { width: 100%; margin-top: 14px; }
	.nn-zestaw-drobne { margin-top: 10px; font-size: .7rem; color: var(--muted); line-height: 1.5; }
	.nn-zestaw-polecany { outline: 3px solid var(--coral); outline-offset: 0; position: relative; }
	.nn-zestaw-praktyki { order: 1; }
	.nn-zestaw-polecany { order: 2; }
	.nn-zestaw-solo { order: 3; }
	.nn-zestaw-tag {
		position: absolute; top: 0; right: 0;
		background: var(--coral); color: #fff;
		padding: 6px 12px; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	}
	.nn-doplata { margin: 0 0 14px; padding: 10px 12px; background: var(--blush); font-size: .8rem; line-height: 1.5; }

	/* 15. PORTFOLIO PDF W PAKIETACH */
	.nn-pdfy { display: flex; gap: 10px; margin: 0 0 16px; }
	.nn-pdfy img { width: 62px; border: 1px solid var(--line); box-shadow: 0 8px 18px rgba(72, 49, 40, .14); }

	/* 16. PORownanie */
	.nn-tabela-wrap { overflow-x: auto; }
	.nn-tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
	.nn-tabela th, .nn-tabela td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: center; }
	.nn-tabela thead th { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; border-bottom: 2px solid var(--ink); }
	.nn-tabela thead th small { display: block; margin-top: 4px; font-family: var(--sans); font-size: .74rem; font-weight: 800; color: var(--coral-dark); }
	.nn-tabela tbody th { text-align: left; font-weight: 700; }
	.nn-tabela .nn-kol-polecana { background: var(--cream); }
	.nn-tabela-mobile { display: none; }
	.nn-tabela-mobile details { border-top: 1px solid var(--line); }
	.nn-tabela-mobile details:last-child { border-bottom: 1px solid var(--line); }
	.nn-tabela-mobile summary { cursor: pointer; list-style: none; padding: 16px 0; font-family: var(--serif); font-size: 1.15rem; display: flex; justify-content: space-between; gap: 14px; }
	.nn-tabela-mobile summary::-webkit-details-marker { display: none; }
	.nn-tabela-mobile summary b { font-family: var(--sans); font-size: .86rem; font-weight: 800; color: var(--coral-dark); white-space: nowrap; }
	.nn-tabela-mobile ul { list-style: none; margin: 0; padding: 0 0 16px; font-size: .88rem; }
	.nn-tabela-mobile li { padding: 5px 0; }
	.nn-tabela-mobile li::before { content: '\2713'; color: var(--coral); font-weight: 900; margin-right: 9px; }

	/* 16b. ZDJECIA PRODUKTU
	   Konwencja jak w reszcie pliku: bazowo uklad szeroki, wezsze ekrany
	   obsluguja zapytania max-width. Trzy kolumny, pierwsze zdjecie zajmuje
	   dwie kolumny i dwa wiersze, zeby siatka nie wygladala jak katalog stockowy.
	   Ponizej 980 px dwie kolumny, ponizej 680 px jedna, bo tam oglada strone
	   9 na 10 osob. Kazde zdjecie ma staly stosunek bokow, wiec uklad nie skacze
	   podczas wczytywania. */
	.nn-foto { background: var(--cream); }
	.nn-foto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
	.nn-foto-duzy { grid-column: span 2; grid-row: span 2; }
	.nn-foto-kafel { margin: 0; position: relative; background: #fff; border: 1px solid var(--line); }
	.nn-foto-img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
	/* Duzy kafel jest szeroki na dwie kolumny i wysoki na dwa wiersze, wiec przy
	   proporcji 4:3 jego wysokosc wypada prawie tyle, co dwa male kafle z odstepem.
	   Przy 3:4 rosl do ponad 1000 px i przygniatal cala sekcje. */
	.nn-foto-duzy .nn-foto-img { aspect-ratio: 4 / 3; }
	.nn-foto-kafel figcaption {
		padding: 10px 14px 12px; font-size: .78rem; line-height: 1.45; color: var(--muted);
	}
	@supports not (aspect-ratio: 1) {
		.nn-foto-img { height: auto; }
	}

	/* Zdjecie calego zestawu w karcie Pakietu Kompletnego */
	.nn-zestaw-foto { margin: 0 0 18px; border: 1px solid var(--line); background: #fff; }
	.nn-zestaw-foto img { display: block; width: 100%; height: auto; }

	/* 17. DOSTAWA */
	.nn-dostawa { background: var(--cream); }
	.nn-dostawa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
	.nn-dostawa-karta { background: #fff; padding: 28px 26px; border-top: 3px solid var(--ink); }
	.nn-dostawa-karta.nn-fizyczny { border-top-color: var(--coral); }
	.nn-dostawa-karta ul { margin: 14px 0 0; padding-left: 18px; color: var(--muted); font-size: .9rem; }
	.nn-dostawa-karta li { margin-bottom: 6px; }
	.nn-platnosci { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
	.nn-platnosci span { padding: 9px 14px; background: #fff; border: 1px solid var(--line); font-size: .78rem; font-weight: 700; }

	/* 18. KAROLINA */
	.nn-autorka-grid { display: grid; grid-template-columns: .62fr 1.38fr; gap: 48px; align-items: center; }
	.nn-autorka-foto img { width: 100%; max-width: 340px; }
	.nn-autorka-copy blockquote {
		margin: 18px 0; padding-left: 20px;
		border-left: 3px solid var(--coral);
		font-family: var(--serif); font-size: 1.35rem; line-height: 1.35;
	}
	.nn-autorka-copy p { color: var(--muted); margin-bottom: 14px; }
	.nn-autorka-meta { font-size: .84rem; }
	.nn-autorka-meta b { display: block; color: var(--ink); }
	.nn-autorka-meta span { color: var(--muted); }

	/* 19. FAQ */
	.nn-faq { background: var(--cream); }
	.nn-faq-grid { display: grid; grid-template-columns: .68fr 1.32fr; gap: 72px; }
	.nn-faq-copy { position: sticky; top: 110px; align-self: start; }
	.nn-faq-copy p { margin: 18px 0; color: var(--muted); }
	.nn-faq details { border-top: 1px solid var(--line); }
	.nn-faq details:last-child { border-bottom: 1px solid var(--line); }
	/* Znak plus na pozycji absolutnej, nie we flexie: dlugie pytanie
	   we flexie nie kurczylo sie i wypychalo plus poza ekran. */
	.nn-faq summary {
		position: relative;
		cursor: pointer; list-style: none;
		padding: 20px 34px 20px 0;
		font-family: var(--serif); font-weight: 500; font-size: 1.2rem;
	}
	.nn-faq summary::-webkit-details-marker { display: none; }
	.nn-faq summary .nn-plus {
		position: absolute; right: 0; top: 20px;
		color: var(--coral); font-family: var(--sans); font-size: 1.1rem;
		line-height: 1.4; transition: transform .2s ease;
	}
	.nn-faq details[open] summary .nn-plus { transform: rotate(45deg); }
	.nn-faq details p { color: var(--muted); padding: 0 0 20px; }

	/* 20. OSTATNIE CTA */
	.nn-final { background: var(--blush); }
	.nn-final-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: center; }
	.nn-final p { margin: 16px 0 24px; color: #7b5a4d; }
	.nn-final-akcje { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
	.nn-final-cena { text-align: center; }
	.nn-final-cena .nn-cena { font-size: 3.6rem; }
	.nn-final-cena small { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #8a6a63; font-weight: 800; }

	/* 21. STOPKA */
	.nn-footer { background: #32241f; color: #fff; padding: 52px 0 20px; }
	.nn-footer h3 { color: #fff; font-size: 1.35rem; margin-bottom: 12px; }
	.nn-footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 44px; }
	.nn-footer p { color: #cdbdb6; font-size: .85rem; }
	.nn-footer-seller { margin-top: 14px; }
	.nn-footer-seller a { color: #e4d6d0; text-decoration: underline; }
	.nn-footer-links a { display: block; color: #cdbdb6; margin: 7px 0; font-size: .85rem; }
	.nn-footer-links a:hover { color: #fff; }
	.nn-footer-note {
		margin-top: 34px; padding: 14px 18px;
		background: rgba(255, 255, 255, .06);
		border-left: 3px solid var(--coral);
		font-size: .8rem; color: #e4d6d0; line-height: 1.55;
	}
	.nn-footer-bottom {
		border-top: 1px solid rgba(255, 255, 255, .14);
		margin-top: 28px; padding-top: 18px;
		color: #a9958c; font-size: .75rem; line-height: 1.6;
	}
	.nn-footer-bottom a { color: #cdbdb6; text-decoration: underline; }

	/* 22. SOCIAL PRZY KRAWEDZI */
	.nn-social {
		position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
		z-index: 40; display: flex; flex-direction: column; gap: 12px;
	}
	.nn-social a {
		width: 46px; height: 46px;
		border-radius: 999px;
		display: inline-flex; align-items: center; justify-content: center;
		background: var(--ink); color: #fff;
		box-shadow: 0 12px 28px rgba(72, 49, 40, .22);
		line-height: 0;
		transition: background .2s ease;
	}
	.nn-social a:hover { background: var(--coral); }
	.nn-social svg { width: 22px; height: 22px; display: block; fill: currentColor; }

	/* 23. PASEK ZAKUPU NA MOBILE */
	.nn-mobile-buy { display: none; }

	/* =========================================================
	   24. TABLET (max 980px)
	   ========================================================= */
	@media (max-width: 980px) {
		.nn-section { padding: 58px 0; }
		.nn-burger { display: inline-flex; }
		/* Panel menu wisi pod naglowkiem (position: absolute wzgledem .nn-header),
		   wiec nie trzeba zgadywac wysokosci topbara ani stanu przewijania. */
		.nn-nav {
			position: absolute; left: 0; right: 0; top: 100%;
			display: none; flex-direction: column; align-items: stretch; gap: 0;
			background: #fff; padding: 12px 20px 22px;
			border-bottom: 1px solid var(--line);
			box-shadow: var(--shadow);
			max-height: 72vh; overflow-y: auto;
		}
		.nn-nav.is-open { display: flex; }
		.nn-nav a { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 1rem; }
		.nn-nav a:last-child { border-bottom: 0; }
		.nn-nav .nn-nav-kontakt { display: block; }
		.nn-logo img { width: 180px; }

		.nn-hero-grid { grid-template-columns: .85fr 1.15fr; }
		.nn-buy-box {
			grid-column: 1 / -1;
			border-left: 0; border-top: 1px solid var(--line);
			padding: 26px 0 0;
		}

		.nn-liczby-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
		/* Scena na biurku: telefon i karteczka obok siebie, kartka z zeszytu pod nimi. */
		.nn-biurko { grid-template-columns: 232px 208px; gap: 26px; padding: 30px 20px 34px; }
		.nn-o-kartka { grid-column: 1 / -1; justify-self: center; width: min(100%, 330px); }
		.nn-kroki { grid-template-columns: 1fr; }
		.nn-gal-track { grid-auto-columns: 45%; }
		.nn-rozdzialy { grid-template-columns: 1fr 1fr; }
		.nn-rozdzial.nn-szeroki { grid-column: span 2; }
		.nn-zestawy-grid { grid-template-columns: 1fr; }
		.nn-zestaw-polecany { order: -1; }
		.nn-zestaw-praktyki { order: 0; }
		.nn-zestaw-solo { order: 1; }
		.nn-dostawa-grid { grid-template-columns: 1fr; }
		.nn-foto-grid { grid-template-columns: 1fr 1fr; }
		.nn-foto-duzy { grid-column: span 2; grid-row: auto; }
		.nn-foto-duzy .nn-foto-img { aspect-ratio: 16 / 9; }
		.nn-autorka-grid { grid-template-columns: 1fr; gap: 28px; }
		.nn-autorka-foto img { max-width: 260px; }
		.nn-faq-grid { grid-template-columns: 1fr; gap: 32px; }
		.nn-faq-copy { position: static; }
		.nn-final-grid { grid-template-columns: 1fr; gap: 28px; }
		.nn-footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
	}

	/* Social tylko tam, gdzie jest na nie margines obok tresci.
	   Ponizej 1280 px kolumna nachodzi na strzalki galerii. */
	@media (max-width: 1279px) {
		.nn-social { display: none; }
	}

	/* =========================================================
	   25. TELEFON (max 680px)
	   ========================================================= */
	@media (max-width: 680px) {
		.nn-foto-grid { grid-template-columns: 1fr; }
		.nn-foto-duzy { grid-column: auto; }
		.nn-foto-duzy .nn-foto-img { aspect-ratio: 3 / 4; }
		.nn-shell { width: min(100% - 28px, 1160px); }
		.nn-section { padding: 46px 0; }
		.nn-section-head { display: block; margin-bottom: 24px; }
		.nn-section-head > p { margin-top: 14px; }
		.nn-topbar { font-size: .68rem; }
		.nn-header-inner { min-height: 66px; }
		.nn-logo img { width: 158px; }

		.nn-hero { padding: 32px 0 40px; }
		.nn-hero-grid { grid-template-columns: 1fr; gap: 26px; }
		.nn-hero-info { order: 1; }
		.nn-hero-produkt { order: 2; }
		.nn-buy-box { order: 3; }
		.nn-hero-produkt { min-height: 340px; padding: 26px 20px 20px; }
		.nn-okladka { width: 172px; }
		.nn-hero-kartka { width: 118px; right: 14px; bottom: 20px; }
		.nn-hero-info h1 { font-size: 2.25rem; overflow-wrap: break-word; }

		.nn-liczby-grid { grid-template-columns: 1fr; gap: 14px; }
		/* Na telefonie wszystko prosto i jedno pod drugim.
		   Obroty zostawione tu potrafily wypchnac scene poza ekran. */
		.nn-biurko { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 26px 16px 30px; }
		.nn-o-telefon, .nn-o-karteczka, .nn-o-kartka { transform: none; justify-self: center; }
		.nn-o-telefon { width: 100%; max-width: 232px; }
		.nn-o-karteczka { width: 100%; max-width: 208px; }
		.nn-o-kartka { width: 100%; max-width: 300px; }
		.nn-gal-track { grid-auto-columns: 78%; gap: 14px; }
		.nn-gal-nav { display: none; }
		.nn-gal-bar { display: block; }
		.nn-gal-hint { margin-top: 4px; }
		.nn-lightbox { grid-template-columns: 1fr; padding: 16px 16px 84px; }
		.nn-lb-figure img { max-height: 62vh; }
		.nn-lb-figure figcaption { font-size: 1rem; }
		.nn-lb-nav { position: absolute; bottom: 18px; width: 50px; height: 50px; }
		.nn-lb-nav.nn-prev { left: 18px; }
		.nn-lb-nav.nn-next { right: 18px; }
		.nn-lb-close { right: 14px; top: 14px; }

		.nn-rozdzialy { grid-template-columns: 1fr; }
		.nn-rozdzial.nn-szeroki { grid-column: span 1; grid-template-columns: 1fr; gap: 16px; }
		.nn-tabela-wrap { display: none; }
		.nn-tabela-mobile { display: block; }
		.nn-final-cena .nn-cena { font-size: 2.9rem; }

		.nn-footer { padding-bottom: 92px; }
		.nn-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
		.nn-footer-grid > div:first-child { grid-column: 1 / -1; }

		/* Pasek zakupu pojawia sie dopiero po dotarciu do wariantow. */
		.nn-mobile-buy {
			position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60;
			display: none; align-items: center; justify-content: space-between; gap: 12px;
			min-height: 56px; padding: 10px 12px 10px 16px;
			background: var(--ink); color: #fff;
			box-shadow: var(--shadow);
			transition: transform .25s ease;
		}
		.nn-mobile-buy.is-ready { display: flex; }
		.nn-mobile-buy.is-hidden { transform: translateY(140%); }
		.nn-mobile-buy small { display: block; color: #d6c7c0; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
		.nn-mobile-buy b { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; }
		.nn-mobile-buy .nn-btn { min-height: 44px; padding: 0 18px; font-size: .88rem; white-space: nowrap; }
		.nn-mobile-buy .nn-btn-off { font-size: .72rem; padding: 0 12px; }
	}

	@media (prefers-reduced-motion: reduce) {
		html { scroll-behavior: auto; }
		.nn-sklep * { transition: none !important; }
	}
	
	/* Finalne zdjęcia dostarczone 19.09.2026. */
	.nn-hero-okladka.nn-real-photo { max-width: 310px; aspect-ratio: 2 / 3; object-fit: cover; object-position: center; border-radius: 8px; transform: none; }


	.nn-foto-grid.nn-foto-grid-final { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; gap: 20px; }
	.nn-foto-grid-final .nn-foto-img { height: auto; aspect-ratio: 2 / 3; object-fit: cover; object-position: center; }
	@media (max-width: 680px) {
		.nn-foto-grid.nn-foto-grid-final { grid-template-columns: 1fr; }
		.nn-foto-grid-final .nn-foto-img { aspect-ratio: 2 / 3; }
	}

html{scroll-padding-top:90px}body{padding-bottom:0!important}#nnPodglad{display:none!important}.ux-review{position:relative;z-index:9999;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:12px 20px;background:#263d35;color:#fff;font:14px/1.5 system-ui}.ux-review a{color:#fff;text-decoration:underline}.ux-review strong{font-weight:600}.ux-review details{margin-left:auto}.ux-review summary{cursor:pointer}.ux-review p{max-width:70ch}.ux-review button{background:none;color:white;border:1px solid #fff;padding:5px 10px;border-radius:5px}:focus-visible{outline:3px solid #086a74!important;outline-offset:4px!important}.reveal{opacity:1!important;transform:none!important}.ux-demo-note{padding:14px;background:#f3eee4;color:#263d35;border-radius:8px;font:15px/1.5 system-ui}.dose-full-bridge p{max-width:65ch}.dose-preview-grid img{cursor:zoom-in}.ux-image-dialog{border:0;border-radius:12px;padding:16px;max-width:94vw;max-height:92vh}.ux-image-dialog::backdrop{background:#17231fdd}.ux-image-dialog img{display:block;max-width:85vw;max-height:78vh;object-fit:contain}.ux-image-dialog button{display:block;margin:0 0 10px auto;padding:8px 16px} @media(max-width:600px){.ux-review{padding:10px 14px;font-size:12px;gap:6px 12px}.ux-review details{margin-left:0}.dose-bridge-inner{display:block!important}.dose-bridge-inner .button{margin-top:18px}.dose-preview-grid{grid-template-columns:1fr!important}.dose-preview-grid img{max-height:460px;object-fit:contain;width:100%}}
.cover:before{width:min(370px,100%);height:auto;aspect-ratio:1}.ux-real-free{margin:0;max-width:350px;transform:rotate(-3deg)}.ux-real-free img{width:100%;height:auto;box-shadow:0 18px 38px #263d3520}.ux-real-free figcaption{margin-top:16px;font:14px/1.5 system-ui;text-align:center}.dose-free-visual .dose-free-note{display:none}@media(max-width:600px){.ux-real-free{max-width:280px;margin:auto;transform:none}}

.nn-scena-v2{margin:30px 0 0}.nn-scena-powieksz{display:block;width:100%;padding:0;border:0;background:transparent;color:var(--ink,#382d20);font:inherit;cursor:zoom-in;text-align:right}.nn-scena-powieksz img{display:block;width:100%;height:auto;border-radius:18px}.nn-scena-powieksz span{display:inline-block;padding:10px 0;font-size:14px;text-decoration:underline}.nn-scena-dialog{width:min(1500px,94vw);max-width:94vw;max-height:94vh;padding:14px;border:0;border-radius:16px;background:#fffaf2}.nn-scena-dialog::backdrop{background:#241c18dd}.nn-scena-dialog img{display:block;width:100%;height:auto}.nn-scena-dialog button{display:block;margin:0 0 12px auto;padding:10px 18px;border:1px solid #382d20;border-radius:6px;background:white;color:#382d20;cursor:pointer}.nn-scena-scroll{overflow:auto}.nn-scena-powieksz:focus-visible{outline:3px solid #086a74;outline-offset:5px}@media(max-width:600px){.nn-scena-v2{margin-top:20px}.nn-scena-powieksz img{border-radius:10px}.nn-scena-dialog .nn-scena-scroll img{width:1000px;max-width:none}.nn-scena-dialog{padding:10px}}

/* Odbiór wizualny: czytelne karty i całe strony PDF. */
.dark .detail-list>div{color:#342b2e;background:#fffaf5;border-color:#e4d8d1}.dark .eyebrow{color:#efb9c9}
.preview-grid{align-items:start}.preview-grid img{height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important;max-width:100%}.preview-grid figure{margin:0;min-width:0}.preview-grid button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;color:#342b2e;font:inherit}.preview-grid figcaption{padding:14px 2px;font:15px/1.5 system-ui;text-align:left}.preview-grid figcaption span{display:block;color:#685a5e;font-size:13px;margin-top:4px}
.paid-dawki .hero{background:#f8f3ed!important;padding:64px 0}.paid-dawki h1{font-size:clamp(36px,4.5vw,58px);line-height:1.08;max-width:12ch}.paid-dawki .hero-grid{gap:64px;align-items:center}.paid-dawki .hero .lead{max-width:46ch;font-size:19px;line-height:1.65}.paid-dawki .cover{padding:20px;min-height:0}.paid-dawki .cover:before{display:none}.paid-dawki .cover img{width:min(100%,360px);max-height:none;object-fit:contain;filter:none;box-shadow:0 16px 40px #4b352322;border-radius:2px}.paid-dawki .section{padding:64px 0}.paid-dawki .section h2{font-size:clamp(28px,3vw,40px);line-height:1.18}.paid-dawki .detail-list>div{font-size:16px}.paid-dawki .ux-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1px solid #d9cfc6;border-bottom:1px solid #d9cfc6;padding:26px 0;margin:0}.paid-dawki .ux-facts div{min-width:0}.paid-dawki .ux-facts dt{font-size:13px;color:#75665e;margin-bottom:6px}.paid-dawki .ux-facts dd{margin:0;font-size:18px;color:#342b2e}.ux-pdf-dialog{width:min(850px,94vw);max-width:94vw;max-height:94vh;border:0;border-radius:12px;padding:16px;background:#fffaf5}.ux-pdf-dialog::backdrop{background:#241c18dc}.ux-pdf-dialog img{display:block;width:100%;height:auto}.ux-pdf-dialog button{display:block;margin:0 0 12px auto;padding:10px 18px;background:#342b2e;color:white;border:0;border-radius:8px;cursor:pointer}.ux-pdf-dialog .ux-pdf-scroll{overflow:auto;max-height:78vh}.ux-pdf-dialog p{font-size:14px;margin:0 0 10px}
@media(max-width:700px){.paid-dawki .hero{padding:36px 0}.paid-dawki .hero-grid{gap:28px}.paid-dawki .hero .cover{padding:10px 24px}.paid-dawki .cover img{width:min(100%,300px)}.paid-dawki .section{padding:42px 0}.paid-dawki .preview-grid{grid-template-columns:1fr!important;gap:30px}.paid-dawki .preview-grid figure{max-width:390px;margin:auto;width:100%}.paid-dawki .ux-facts{grid-template-columns:1fr;gap:18px}.paid-dawki .details{gap:24px}.ux-pdf-dialog .ux-pdf-scroll img{min-width:680px}}
.paid-dawki .cover img{height:auto!important;aspect-ratio:auto!important}.paid-dawki .cover{display:flex;justify-content:center;align-items:center}

/* Wspólna prezentacja oferty w obu podglądach Plannera. */
#pakiet-kompletny {position:relative;padding-top:48px}
#pakiet-kompletny .nn-delivery-cloud{position:absolute;top:-19px;right:14px;max-width:calc(100% - 28px);padding:14px 20px;border-radius:26px;background:#ad354b;color:#fff;font:800 14px/1.3 Arial,sans-serif;letter-spacing:.04em;box-shadow:0 5px 14px #49372f26}
#pakiet-kompletny .nn-delivery-cloud:after{content:'';position:absolute;bottom:-8px;right:32px;border:9px solid transparent;border-top-color:#ad354b;border-bottom:0}
#pakiet-kompletny .nn-package-saving{font:700 clamp(28px,3vw,38px)/1.15 Georgia,serif;color:#ad354b;margin:24px 0 10px}
.nn-hero-preview-link{margin:20px 0!important}

/* U01–U24: shared presentation fixes, no checkout or tax implementation. */
[hidden]{display:none!important}
.audit-header{position:relative!important;z-index:45;background:#fff!important;border-bottom:1px solid #dfd3cc!important;color:#49392f!important;font:16px/1.5 Arial,sans-serif}
.audit-header-inner{width:min(1180px,calc(100% - 32px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:80px}
.audit-logo{display:block;flex:0 0 auto}.audit-logo img{display:block;width:180px;height:auto;max-height:58px;object-fit:contain}
.audit-nav{display:flex!important;align-items:center;gap:24px;min-height:0!important;padding:0!important;flex-wrap:wrap}
.audit-nav a{font:600 15px/1.4 Arial,sans-serif!important;color:#49392f!important;text-decoration:none!important;padding:12px 0}
.audit-nav a[aria-current=page]{text-decoration:underline!important;text-underline-offset:6px}
.audit-menu{display:none;background:#fff;border:1px solid #49392f;padding:10px 14px;color:#49392f;min-height:44px;font:600 15px Arial}
.audit-cart{font:600 15px Arial;color:#49392f;text-decoration:none;white-space:nowrap;padding:12px 4px}
.audit-footer-nav{display:flex!important;gap:16px 24px;flex-wrap:wrap;padding:22px!important;background:#49392f;color:white;font:15px/1.5 Arial,sans-serif;min-height:0!important}
.audit-footer-nav a{display:block!important;color:#fff!important;text-decoration:underline!important}
.audit-footer{background:#49392f!important;color:#fff!important;padding:8px 22px 30px!important;font:15px/1.7 Arial,sans-serif!important}.audit-footer p{margin:8px 0!important;color:#fff!important}.audit-footer a{color:#fff!important}
.audit-review-notes{font:15px/1.6 Arial,sans-serif;color:#263d35;background:#edf2ec;border:1px solid #cbd8c9;padding:18px;margin:24px auto;width:min(1120px,calc(100% - 32px));overflow-wrap:anywhere}
.audit-review-notes summary{cursor:pointer;font-weight:700}.audit-review-notes a{color:inherit;text-decoration:underline}
.audit-review-notes ul{padding-left:22px}.audit-review-notes li{margin:10px 0}
.dark .detail-list>div{color:#342b2e!important;background:#fffaf5!important;border-color:#e4d8d1}
.cover{min-height:0!important;display:flex;align-items:center;justify-content:center;padding:24px!important}
.cover img{height:auto!important;width:min(100%,360px)!important;max-height:510px!important;object-fit:contain!important;aspect-ratio:auto!important}
.preview-grid{align-items:start!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))!important;gap:24px!important}
.preview-grid>*,.preview-grid figure{min-width:0;margin:0!important;max-width:420px;width:100%;justify-self:center}
.preview-grid img{display:block;width:100%!important;height:auto!important;max-height:560px;object-fit:contain!important;aspect-ratio:auto!important;background:#f8f3ed}
.preview-grid button{width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.preview-grid figcaption{font:14px/1.5 Arial;padding:12px 0;color:#49392f}
.product-card img{object-fit:contain!important;padding:18px;max-width:100%}
.line-item{display:grid!important;grid-template-columns:64px minmax(0,1fr) auto!important;gap:14px!important;align-items:center!important;min-width:0}
.line-item>*{min-width:0}.line-item img{width:64px;height:86px;object-fit:contain}
.line-item>div{display:block!important;border:0!important;padding:0!important}.line-item>div strong,.line-item>div small{width:100%!important}
.line-item strong,.line-item small{display:block!important}.line-item small{margin-top:7px;font-size:14px;line-height:1.5;color:#695b54}
.line-item>b{white-space:nowrap}.line-item input{max-width:70px}.panel{min-width:0}.panel .field input{max-width:100%;min-width:0}
.audit-account .flow-grid{grid-template-columns:220px minmax(0,1fr)!important}
.audit-account aside a{display:inline-block;padding:8px 0}.audit-account .line-item{grid-template-columns:64px minmax(0,1fr) auto!important}
.audit-account .line-item .btn{padding:10px 16px;min-height:44px}
.field span{display:block}.field input[aria-invalid=true]{border:2px solid #a32f46}.audit-field-error{display:block;color:#9d243b;font:14px/1.4 Arial;margin:6px 0}
.totals>.coupon-field{display:grid!important;gap:8px!important;margin:20px 0 14px!important}.totals>.coupon-field+ .btn{margin-top:0!important}
.audit-coupon-result{font-size:14px;line-height:1.5}.audit-coupon-button{margin:10px 0;min-height:44px}
.audit-toc{display:block!important;min-height:0!important;margin:24px 0;padding:22px!important;border:1px solid #ddd1c9;background:#fffaf7;color:#49392f;font:16px/1.6 Arial}
.audit-toc ol{padding-left:22px}.audit-toc a{display:block!important;color:#49392f!important;text-decoration:underline!important;padding:5px 0;font:inherit!important}
.legal-content,.legal-body{max-width:850px;margin-inline:auto}table{max-width:100%}.audit-table-scroll{overflow-x:auto;max-width:100%}
.filters a[aria-current=page]{background:#49392f;color:white;border-color:#49392f}
.welcome-form label>span,.welcome-form .consent span{font-size:14px!important;line-height:1.55!important;color:#fff!important;letter-spacing:0!important;text-transform:none!important}
.welcome-form>small{font-size:13px!important;line-height:1.6!important;color:#eee1db!important}.welcome-form>small a{color:inherit;text-decoration:underline}
.button.primary,.nn-sklep .nn-btn:not(.nn-ghost){background:#ad354b!important;color:#fff!important}.button.primary:hover,.nn-sklep .nn-btn:not(.nn-ghost):hover{background:#91283c!important}
.dose-preview-grid img{aspect-ratio:auto!important;height:auto!important;object-fit:contain!important}.dose-preview-grid figure:nth-child(2){transform:none}
.dose-preview-grid figcaption{font-size:13px!important}.dose-point-grid p{font-size:16px;line-height:1.6}
.nn-zestawy-grid{align-items:start!important}.nn-zestaw{height:auto!important;min-height:0!important;align-self:start}.nn-zestaw-cena{margin-top:22px!important}
.nn-zestaw-solo{order:0!important}.nn-zestaw-praktyki{order:1!important}.nn-zestaw-polecany{order:2!important}
.nn-guide-copy .nn-btn{height:auto!important;min-height:48px;max-height:none;padding:12px 18px!important;line-height:1.4}
.nn-guide-copy .nn-price{white-space:nowrap}
.nn-guide-copy .nn-choice-price .nn-btn{flex:0 0 auto!important;min-height:48px!important}
@media(max-width:700px){
 .audit-header-inner{min-height:70px;gap:10px;flex-wrap:wrap;padding:10px 0}.audit-logo{margin-right:auto}.audit-logo img{width:145px}.audit-menu{display:block}
 .audit-nav{display:none!important;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0}.audit-nav.is-open{display:flex!important}.audit-nav a{padding:14px 4px;border-top:1px solid #eee}
 .audit-account .flow-grid{grid-template-columns:minmax(0,1fr)!important}.audit-account aside{display:flex;gap:8px 18px;flex-wrap:wrap}.audit-account aside br{display:none}
 .line-item,.audit-account .line-item{grid-template-columns:52px minmax(0,1fr)!important;gap:12px!important}.line-item img{width:52px;height:74px;grid-row:1 / 3}.line-item>b,.line-item>.btn,.line-item>input{grid-column:2;justify-self:start}.line-item small{overflow-wrap:anywhere}
 .shipping-option{grid-template-columns:22px minmax(0,1fr)!important;min-width:0}.shipping-price{grid-column:2;white-space:normal!important;text-align:left!important}.shipping-option>span{min-width:0}
 #nn-main>.nn-best{order:0!important}
 .nn-guide-tabs{display:flex!important;overflow-x:auto!important;gap:0;padding:8px!important;scroll-snap-type:x proximity}.nn-guide-tab{min-width:210px!important;max-width:240px;flex:0 0 210px;scroll-snap-align:start}
 .nn-guide-tab small{line-height:1.4}.nn-guide-media{height:250px!important}.nn-guide-copy{padding:22px!important}.nn-guide-copy .nn-buy-row{display:flex;flex-wrap:wrap;gap:14px}
 .nn-biurko{display:none!important}.nn-mobile-buy>div b{font-size:16px}.preview-grid img{max-height:490px}.preview-grid{grid-template-columns:1fr!important}
 .flow-wrap h1{overflow-wrap:anywhere}.audit-toc{padding:16px!important;font-size:15px}.audit-review-notes{font-size:14px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.nn-mobile-buy.audit-hide-floating{display:none!important}

/* Premiera Plannera: strona jest publiczna wcześniej, aktywne są dopiero CTA zakupu. */
.nn-launch{background:#49372f;color:#fff;border-bottom:1px solid rgba(255,255,255,.18)}
.nn-launch-inner{display:flex;align-items:center;justify-content:space-between;gap:42px;padding-top:30px;padding-bottom:30px}
.nn-launch-kicker{margin:0 0 7px;color:#ffd0d4;font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.nn-launch h2{margin:0;color:#fff;font-size:clamp(1.75rem,3vw,2.65rem)}
.nn-launch [data-launch-status]{margin:10px 0 0;max-width:660px;color:#eaded9}
.nn-launch-clock{display:grid;grid-template-columns:repeat(4,minmax(68px,1fr));gap:8px;min-width:min(100%,350px)}
.nn-launch-clock>span{display:grid;place-items:center;padding:10px 9px;background:#fff;color:#49372f}
.nn-launch-clock b{font:600 1.85rem/1 Georgia,serif;font-variant-numeric:tabular-nums}
.nn-launch-clock small{margin-top:6px;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.nn-launch.is-live{background:#324d43}
.nn-launch [hidden],.nn-launch.is-live .nn-launch-clock{display:none!important}
.nn-variation-buy-form.nn-launch-locked .nn-btn,.nn-variation-buy-form.nn-launch-locked .nn-btn:hover{background:#766963!important;color:#fff!important;cursor:not-allowed;transform:none!important;box-shadow:none!important}
@media(max-width:760px){.nn-launch-inner{align-items:stretch;flex-direction:column;gap:22px;padding-top:24px;padding-bottom:24px}.nn-launch-clock{width:100%;min-width:0}.nn-launch-clock b{font-size:1.55rem}}

/* UX audit 2026-09-19: WCAG AA contrast for meaningful small copy. */
.dose-full-bridge{background:#873047!important}
.nn-rozdzial.nn-szeroki p{color:#6f574e}

/* R02-R03 */
.audit-table-hint{margin:0 0 10px;color:#695b54;font:600 14px/1.5 Arial,sans-serif}
.audit-table-scroll{overflow-x:auto!important;max-width:100%;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.audit-table-scroll table{display:table!important;width:100%;max-width:none!important;overflow:visible!important}
.ux-review,.ux-review strong,.ux-review p,.ux-review summary,.audit-footer,.audit-footer strong{color:#fff!important}
@media(max-width:700px){.audit-table-scroll table{width:760px!important;min-width:760px!important;font-size:15px!important;line-height:1.55}.audit-table-scroll th,.audit-table-scroll td{min-width:210px;padding:12px!important;vertical-align:top}}
.nn-product-safety{display:grid;gap:0;margin:24px 0 0;border:1px solid var(--line,#e2d4cd);background:#fff}
.nn-product-safety div{display:grid;grid-template-columns:minmax(150px,.65fr) minmax(0,1.35fr);gap:18px;padding:14px 16px;border-bottom:1px solid var(--line,#e2d4cd)}
.nn-product-safety div:last-child{border-bottom:0}.nn-product-safety dt{font-weight:800}.nn-product-safety dd{margin:0;overflow-wrap:anywhere}
@media(max-width:620px){.nn-product-safety div{grid-template-columns:1fr;gap:5px}}

/* Formal product data stays available at the bottom without interrupting the sales story. */
.nn-product-meta-section{padding:22px 0 28px;background:#f8f2ef;border-top:1px solid var(--line)}
.nn-product-meta{border:1px solid var(--line);background:#fff}
.nn-product-meta>summary{position:relative;cursor:pointer;list-style:none;padding:18px 54px 18px 20px;font:700 1rem/1.35 var(--sans);color:var(--ink)}
.nn-product-meta>summary::-webkit-details-marker{display:none}
.nn-product-meta>summary .nn-plus{position:absolute;right:20px;top:16px;color:var(--coral);font:500 1.25rem/1 var(--sans);transition:transform .2s ease}
.nn-product-meta[open]>summary .nn-plus{transform:rotate(45deg)}
.nn-product-meta-content{padding:6px 20px 22px;border-top:1px solid var(--line)}
.nn-product-meta-content h2{margin-top:18px;font-size:clamp(1.55rem,3vw,2.1rem)}
.nn-product-meta-content h3{margin-top:20px;font-size:1.25rem}
.nn-product-meta-content>p{color:var(--muted)}
@media(max-width:700px){
 .nn-mobile-buy>span{min-width:0;flex:1 1 auto}
 .nn-mobile-buy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.04em}
 .nn-mobile-buy b{display:block;font-size:.92rem!important;line-height:1.2}
 .nn-mobile-buy .nn-btn{flex:0 0 auto;padding-inline:13px;font-size:.8rem}
 .nn-mobile-buy .nn-btn-off{max-width:46%;white-space:normal;line-height:1.15}
}