/* Elementy stron NONO Made (klasy nadawane w Elementorze: Zaawansowane → Klasy CSS). */

/* Uwaga: Elementor 4 usuwa <p>, gdy pole tekstowe ma jeden akapit — style dotyczą więc samego elementu. */

/* Etykieta w pigułce nad nagłówkiem: nm-etykieta + nm-tlo-mieta | roz | maslo | blekit | liliowy */
.nm-etykieta {
	width: fit-content !important;
	padding: 8px 20px;
	border-radius: 999px;
	color: var(--nm-na-pastelu);
}

.nm-etykieta p {
	margin: 0;
}

@media (max-width: 767px) {
	/* Na wąskim telefonie etykieta może mieć dwie linie — wtedy zaokrąglony prostokąt zamiast „kluski”. */
	.nm-etykieta {
		padding: 6px 14px;
		border-radius: 20px;
	}
}

.nm-tlo-mieta { background: var(--nm-mieta); }
.nm-tlo-roz { background: var(--nm-roz); }
.nm-tlo-maslo { background: var(--nm-maslo); }
.nm-tlo-blekit { background: var(--nm-blekit); }
.nm-tlo-liliowy { background: var(--nm-liliowy); }
.nm-tlo-pomarancz { background: var(--nm-pomarancz); }

/* Słowo zakreślone masłowym markerem w nagłówku */
.nm-zakreslenie {
	padding: 0 0.12em;
	border-radius: 0.2em;
	background: var(--nm-maslo);
	color: var(--nm-na-pastelu);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Kolory wosku z kreatora: [nonomade_kolory_wosku] */
.nm-kolory-wosku {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	color: var(--nm-tekst);
	font-size: 15px;
	font-weight: 500;
}

.nm-kolory-wosku__probki {
	display: flex;
}

.nm-kolory-wosku [data-kolor] {
	width: 30px;
	height: 30px;
	margin-right: -8px;
	border: 3px solid var(--nm-tlo);
	border-radius: 50%;
}

.nm-kolory-wosku--wszystkie {
	flex-direction: column;
	align-items: stretch;
	color: var(--nm-na-pastelu);
}

.nm-kolory-wosku--wszystkie .nm-kolory-wosku__probki {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	justify-items: center;
	gap: 12px;
	padding: 20px;
	border-radius: 24px;
	background: var(--nm-powierzchnia);
}

.nm-kolory-wosku--wszystkie [data-kolor] {
	width: 40px;
	height: 40px;
	margin: 0;
	border: 0;
	box-shadow: inset 0 0 0 1px rgba(42, 28, 21, 0.14);
}

/* Kafelki na górze strony głównej: w każdym kilka świec — bez animacji widać pierwszą,
   z animacjami (animacje.js) świece przenikają się co kilka sekund. */
.nm-kafelek {
	position: relative;
	overflow: hidden;
}

.nm-kafelek > .elementor-widget-image ~ .elementor-widget-image {
	display: none;
}

/* Zdjęcie zawsze na całą szerokość kafelka — szerokość świecy w procentach liczy się od kafelka. */
.nm-kafelek > .elementor-widget-image {
	width: 100% !important;
	text-align: center;
}

.nm-kafelek > .elementor-widget-image img {
	max-height: 78%;
	object-fit: contain;
}

.nm-animacje .nm-kafelek > .elementor-widget-image {
	position: absolute;
	inset: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	opacity: 0;
	transform: translateY(18px) scale(0.9) rotate(-4deg);
	transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}

.nm-animacje .nm-kafelek:not(.nm-przelacza) > .elementor-widget-image:first-child,
.nm-animacje .nm-kafelek > .elementor-widget-image.nm-pokazane {
	opacity: 1;
	transform: none;
}

.nm-animacje .nm-kafelek > .elementor-widget-image.nm-pokazane img {
	animation: nm-unoszenie 5s ease-in-out 1s infinite;
}

.nm-animacje .nm-kafelek:hover > .elementor-widget-image.nm-pokazane img {
	animation-play-state: paused;
	transform: rotate(-5deg) scale(1.08);
	transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.25, 1.4);
}

/* Kółka w rogach kafelków: liczba kolorów w pierwszym (u góry po lewej), cena w ostatnim (u dołu po prawej). */
.nm-naklejka {
	position: absolute !important;
	z-index: 3;
	/* Elementor nadpisuje wyrównanie w pionie — kolumna wyśrodkowana w obu kierunkach z pierwszeństwem. */
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 2px !important;
	width: 88px !important;
	height: 88px;
	padding: 8px;
	border-radius: 50%;
	box-shadow: 0 6px 16px rgba(42, 28, 21, 0.18);
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}

.nm-naklejka p {
	margin: 0;
}

.nm-naklejka--kolory {
	left: 12px;
	top: 12px;
	background: var(--nm-braz);
	color: var(--nm-na-brazie);
}

.nm-naklejka strong {
	display: block;
	font-family: var(--nm-czcionka-naglowkow);
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
}

.nm-naklejka small {
	display: block;
	font-size: 12px;
	font-weight: 700;
}

.nm-naklejka--cena strong {
	font-size: 24px;
}

.nm-naklejka--cena {
	right: 12px;
	bottom: 12px;
	background: var(--nm-naglowki);
	color: var(--nm-tlo);
}

@media (max-width: 767px) {
	.nm-naklejka {
		width: 70px !important;
		height: 70px;
		padding: 6px;
		font-size: 10px;
	}

	.nm-naklejka strong {
		font-size: 20px;
	}

	.nm-naklejka--cena strong {
		font-size: 17px;
	}

	.nm-naklejka small {
		font-size: 9px;
	}
}

/* Pasek z hasłami między sekcjami */
.nm-pasek .elementor-widget-text-editor,
.nm-pasek p {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 20px;
	margin: 0;
	font-family: var(--nm-czcionka-naglowkow);
	font-size: 20px;
	font-weight: 700;
}

.nm-pasek span {
	display: inline-flex;
	align-items: center;
	gap: 20px;
}

.nm-pasek span + span::before {
	content: "";
	width: 16px;
	height: 16px;
	background: var(--nm-maslo);
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.nm-pasek span:nth-child(3n + 1)::before { background: var(--nm-roz); }
.nm-pasek span:nth-child(3n + 2)::before { background: var(--nm-mieta); }

/* Opcje kreatora na karcie „Zapach, knot i dodatki”: [nonomade_opcje_kreatora] */
.nm-opcje {
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: var(--nm-na-pastelu);
}

.nm-opcje__tytul {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nm-opcje__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nm-opcje__lista li {
	margin: 0;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--nm-powierzchnia);
	color: var(--nm-naglowki);
	font-size: 14px;
	font-weight: 500;
}

/* Produkty na stronie (skrót [products]) — karty w pastelach */
.nm-polecane ul.products {
	--nm-karta: var(--nm-mieta);
	gap: 24px;
}

.nm-polecane ul.products li.product {
	padding: 12px 12px 20px;
	border-radius: 32px;
	background: var(--nm-karta);
	color: var(--nm-na-pastelu);
	--theme-link-initial-color: var(--nm-na-pastelu);
	--theme-link-hover-color: var(--nm-na-pastelu);
	--theme-text-color: var(--nm-na-pastelu);
	--theme-heading-color: var(--nm-na-pastelu);
}

.nm-polecane ul.products li.product:nth-child(4n + 2) { --nm-karta: var(--nm-maslo); }
.nm-polecane ul.products li.product:nth-child(4n + 3) { --nm-karta: var(--nm-roz); }
.nm-polecane ul.products li.product:nth-child(4n + 4) { --nm-karta: var(--nm-blekit); }

.nm-polecane ul.products li.product .ct-media-container,
.nm-polecane ul.products li.product img {
	border-radius: 24px;
}

.nm-polecane ul.products li.product :is(.woocommerce-loop-product__title, .price, .entry-meta, a) {
	padding-inline: 8px;
	color: var(--nm-na-pastelu);
}

.nm-polecane ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--nm-czcionka-naglowkow);
	font-size: 20px;
	font-weight: 700;
}

.nm-polecane ul.products li.product .price {
	font-family: var(--nm-czcionka-naglowkow);
	font-size: 22px;
	font-weight: 800;
}

/* Galeria „Z naszej pracowni”: duże zdjęcie po lewej, mniejsze obok */
.nm-galeria {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 280px 280px;
	gap: 16px;
}

.nm-galeria > .elementor-element {
	width: auto !important;
	height: 100%;
}

.nm-galeria > .elementor-element:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.nm-galeria .elementor-widget-image .elementor-widget-container,
.nm-galeria .elementor-widget-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 767px) {
	.nm-galeria {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 220px 160px 200px auto;
	}

	.nm-galeria > .elementor-element:first-child {
		grid-row: span 1;
	}

	.nm-galeria > .elementor-element:nth-child(4),
	.nm-galeria > .nm-galeria__kafelek {
		grid-column: span 2;
	}
}

/* Wyróżnienie na brązowej karcie (np. druga linia cytatu) */
.nm-na-brazie-wyroznienie {
	color: var(--nm-na-brazie-wyroznienie);
}

/* Tablica „Najnowsze wiadomości” (skrót [nonomade_najnowsze_wpisy]): wpisy jak zdjęcia przyklejone taśmą do tablicy,
   lekko przekrzywione - po najechaniu zdjęcie się prostuje. Po przewinięciu przyklejają się po kolei (animacje.js). */
.nm-tablica {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 44px;
	padding: 56px 48px 48px;
	border-radius: 40px;
	background-color: var(--nm-maslo);
	background-image: radial-gradient(rgba(92, 52, 34, 0.12) 1.2px, transparent 1.6px);
	background-size: 18px 18px;
}

.nm-tablica__wpis {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 14px 20px;
	border-radius: 6px;
	background: var(--nm-powierzchnia);
	box-shadow: 0 16px 32px rgba(42, 28, 21, 0.16);
	color: var(--nm-tekst);
	text-decoration: none;
	rotate: var(--nm-obrot);
	transition: rotate 0.3s ease, translate 0.3s ease, box-shadow 0.3s ease;
}

.nm-tablica__wpis:nth-child(1) { --nm-obrot: -2.5deg; --nm-tasma: var(--nm-roz); }
.nm-tablica__wpis:nth-child(2) { --nm-obrot: 1.8deg; --nm-tasma: var(--nm-blekit); }
.nm-tablica__wpis:nth-child(3) { --nm-obrot: -1.2deg; --nm-tasma: var(--nm-mieta); }

.nm-tablica__wpis:hover,
.nm-tablica__wpis:focus-visible {
	color: var(--nm-tekst);
	rotate: 0deg;
	translate: 0 -6px;
	box-shadow: 0 22px 40px rgba(42, 28, 21, 0.22);
}

/* Kawałek taśmy z ząbkowanymi końcami, jak oderwany ręką. */
.nm-tablica__tasma {
	position: absolute;
	z-index: 1;
	top: -14px;
	left: 50%;
	width: 110px;
	height: 30px;
	background: var(--nm-tasma);
	opacity: 0.88;
	translate: -50% 0;
	rotate: -4deg;
	clip-path: polygon(0 12%, 4% 0, 96% 0, 100% 12%, 97% 50%, 100% 88%, 96% 100%, 4% 100%, 0 88%, 3% 50%);
}

.nm-tablica__zdjecie {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 3px;
	background: var(--nm-powierzchnia-2);
}

/* Mocniej niż ogólna reguła obrazków Elementora (wysokość „auto”), żeby zdjęcie wypełniło kwadrat. */
.nm-tablica .nm-tablica__zdjecie img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.5s ease;
}

.nm-tablica__wpis:hover .nm-tablica__zdjecie img {
	scale: 1.05;
}

.nm-tablica__film {
	position: absolute;
	bottom: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px 5px 10px;
	border-radius: 999px;
	background: var(--nm-braz);
	color: var(--nm-na-brazie);
	font-size: 13px;
	font-weight: 700;
}

.nm-tablica__film::before {
	content: "";
	border-block: 5px solid transparent;
	border-left: 8px solid currentColor;
}

.nm-tablica__data {
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
}

.nm-tablica__tytul {
	display: -webkit-box;
	overflow: hidden;
	color: var(--nm-naglowki);
	font-family: var(--nm-czcionka-naglowkow);
	font-size: 21px;
	font-weight: 800;
	line-height: 1.2;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.nm-tablica__pieczatka {
	position: absolute;
	z-index: 2;
	top: -24px;
	right: -18px;
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	padding: 10px;
	border-radius: 50%;
	background: var(--nm-braz);
	box-shadow: 0 8px 18px rgba(42, 28, 21, 0.25);
	color: var(--nm-na-brazie);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.1;
	text-align: center;
	rotate: 12deg;
}

.nm-animacje .nm-kolejno .nm-tablica__wpis,
.nm-animacje .nm-kolejno .nm-tablica__pieczatka {
	opacity: 0;
}

.nm-animacje .nm-kolejno.nm-widoczne .nm-tablica__wpis {
	animation: nm-przyklejenie 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
	animation-delay: calc(var(--nm-kolejnosc, 0) * 200ms);
}

.nm-animacje .nm-kolejno.nm-widoczne .nm-tablica__pieczatka {
	animation: nm-pieczatka 0.6s ease-out 1.1s both;
}

@keyframes nm-przyklejenie {
	0% { opacity: 0; transform: translateY(-40px) rotate(-8deg) scale(1.05); }
	60% { opacity: 1; }
	100% { opacity: 1; transform: none; }
}

@media (max-width: 1024px) {
	.nm-tablica {
		gap: 28px;
		padding: 48px 28px 36px;
	}
}

/* Na telefonie wpisy leżą obok siebie i przesuwa się je palcem. */
@media (max-width: 767px) {
	.nm-tablica {
		display: flex;
		overflow-x: auto;
		gap: 20px;
		padding: 40px 24px 32px;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.nm-tablica__wpis {
		flex: 0 0 76%;
		scroll-snap-align: center;
	}

	.nm-tablica__pieczatka {
		top: -18px;
		right: -6px;
		width: 72px;
		height: 72px;
		font-size: 12px;
	}
}

/* Opinie klientów w karuzeli: karty obok siebie, przewijane strzałkami (opinie.js) albo palcem */
.nm-opinie {
	justify-content: safe center !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.nm-opinie::-webkit-scrollbar {
	display: none;
}

.nm-opinie > .nm-opinia {
	flex: 0 0 min(420px, 85vw) !important;
	width: min(420px, 85vw) !important;
	scroll-snap-align: start;
}

.nm-opinie__strzalki {
	display: flex;
	justify-content: center;
	gap: 12px;
}

.nm-opinie__strzalka {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 2px solid var(--nm-naglowki);
	border-radius: 50%;
	background: transparent;
	color: var(--nm-naglowki);
	cursor: pointer;
}

.nm-opinie__strzalka--wstecz svg {
	transform: scaleX(-1);
}

.nm-opinie__strzalka:disabled {
	opacity: 0.35;
	cursor: default;
}

/* ——— Animacje (animacje.js dodaje klasę nm-animacje; bez niej — i u klientów z ograniczonymi animacjami — wszystko widać od razu) ——— */
@keyframes nm-wjazd {
	from { opacity: 0; transform: translateY(40px); }
	to { opacity: 1; transform: none; }
}

@keyframes nm-wyskok {
	0% { opacity: 0; transform: translateY(40px) scale(0.8) rotate(-6deg); }
	60% { opacity: 1; transform: translateY(-8px) scale(1.04) rotate(1.5deg); }
	100% { opacity: 1; transform: none; }
}

@keyframes nm-pieczatka {
	0% { opacity: 0; transform: scale(2.4) rotate(-25deg); }
	55% { opacity: 1; transform: scale(0.88) rotate(4deg); }
	78% { transform: scale(1.06) rotate(-1deg); }
	100% { opacity: 1; transform: none; }
}

@keyframes nm-kropla {
	0% { opacity: 0; transform: scale(0); }
	70% { opacity: 1; transform: scale(1.25); }
	100% { opacity: 1; transform: none; }
}

@keyframes nm-unoszenie {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-7px); }
}

/* Kontener nm-kolejno: jego elementy wjeżdżają jeden po drugim, gdy klient do niego przewinie.
   Odstęp między kolejnymi elementami: --nm-krok (np. dłuższy w rozmowie na stronie Historia). */
.nm-animacje .nm-kolejno > .elementor-element,
.nm-animacje .nm-kolejno > .e-con-inner > .elementor-element {
	opacity: 0;
	animation-delay: calc(var(--nm-kolejnosc, 0) * var(--nm-krok, 160ms));
}

.nm-animacje .nm-kolejno.nm-widoczne > .elementor-element,
.nm-animacje .nm-kolejno.nm-widoczne > .e-con-inner > .elementor-element {
	animation: nm-wjazd 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	animation-delay: calc(var(--nm-kolejnosc, 0) * var(--nm-krok, 160ms));
}

/* Kafelki ze świecami wyskakują po kolei, a potem kółka przybijają się jak pieczątki. */
.nm-animacje .nm-kafelki.nm-widoczne > .nm-kafelek {
	animation: nm-wyskok 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) both;
	animation-delay: calc(var(--nm-kolejnosc, 0) * 150ms);
}

.nm-animacje .nm-kafelki .nm-naklejka {
	opacity: 0;
}

.nm-animacje .nm-kafelki.nm-widoczne .nm-naklejka {
	animation: nm-pieczatka 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) 1s both;
}

.nm-animacje .nm-kafelki.nm-widoczne .nm-naklejka--cena {
	animation-delay: 1.3s;
}

/* W kroku „Wybierz kolor wosku” kolory pojawiają się falą, w kroku 3 opcje spadają kaskadą. */
.nm-animacje .nm-kolejno .nm-kolory-wosku--wszystkie [data-kolor],
.nm-animacje .nm-kolejno .nm-opcje li {
	opacity: 0;
}

.nm-animacje .nm-kolejno.nm-widoczne .nm-kolory-wosku--wszystkie [data-kolor] {
	animation: nm-kropla 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) both;
	animation-delay: calc(500ms + var(--nm-kolejnosc, 0) * 35ms);
}

.nm-animacje .nm-kolejno.nm-widoczne .nm-opcje li {
	animation: nm-wjazd 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	animation-delay: calc(650ms + var(--nm-kolejnosc, 0) * 70ms);
}

/* ——— Kafelki zalet: napis co chwilę ustępuje miejsca ikonce (animacje.js); bez animacji mała ikonka nad napisem ——— */
.nm-wartosc {
	position: relative;
	overflow: hidden;
}

.nm-wartosc .nm-ikona {
	display: block;
	width: 48px;
	height: 48px;
	color: var(--nm-na-pastelu);
}

.nm-animacje .nm-wartosc {
	min-height: 210px;
}

.nm-animacje .nm-wartosc > .nm-wartosc__ikona {
	position: absolute !important;
	inset: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.5) rotate(-12deg);
	transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.35);
	pointer-events: none;
}

.nm-animacje .nm-wartosc > .nm-wartosc__ikona .nm-ikona {
	width: 120px;
	height: 120px;
}

.nm-animacje .nm-wartosc > .elementor-element:not(.nm-wartosc__ikona) {
	transition: opacity 0.45s ease, transform 0.5s ease;
}

.nm-animacje .nm-wartosc:is(.nm-wartosc--ikona, :hover) > .elementor-element:not(.nm-wartosc__ikona) {
	opacity: 0;
	transform: translateY(-14px);
}

.nm-animacje .nm-wartosc:is(.nm-wartosc--ikona, :hover) > .nm-wartosc__ikona {
	opacity: 1;
	transform: none;
}

/* Ruch w ikonkach, gdy są pokazane */
@keyframes nm-rysowanie { from { stroke-dashoffset: var(--nm-dlugosc); } to { stroke-dashoffset: 0; } }
@keyframes nm-blysk { 0%, 100% { transform: scale(0.6) rotate(0); opacity: 0.4; } 50% { transform: scale(1.25) rotate(45deg); opacity: 1; } }
@keyframes nm-jazda { 0% { transform: translateX(-18px); } 100% { transform: translateX(0); } }
@keyframes nm-podskok { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes nm-ped { 0% { transform: translateX(6px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateX(-6px); opacity: 0; } }
@keyframes nm-kolo { to { stroke-dashoffset: -14; } }
@keyframes nm-plomien { 0%, 100% { transform: scale(1, 1) skewX(0); } 30% { transform: scale(0.94, 1.08) skewX(3deg); } 60% { transform: scale(1.05, 0.95) skewX(-3deg); } }
@keyframes nm-zapach { 0% { transform: translateY(8px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }

.nm-ikona * {
	transform-box: fill-box;
	transform-origin: center;
}

.nm-wartosc:is(.nm-wartosc--ikona, :hover) .nm-ikona__obrys { --nm-dlugosc: 164; stroke-dasharray: 164; animation: nm-rysowanie 0.9s ease-out both; }
.nm-wartosc:is(.nm-wartosc--ikona, :hover) .nm-ikona__lisc { --nm-dlugosc: 70; stroke-dasharray: 70; animation: nm-rysowanie 0.8s ease-out 0.4s both; }
.nm-wartosc:is(.nm-wartosc--ikona, :hover) .nm-ikona__zylka { --nm-dlugosc: 22; stroke-dasharray: 22; animation: nm-rysowanie 0.4s ease-out 1s both; }
.nm-wartosc:is(.nm-wartosc--ikona, :hover) .nm-ikona__blysk { animation: nm-blysk 1.2s ease-in-out 1.1s infinite; }
.nm-wartosc:is(.nm-wartosc--ikona, :hover) .nm-ikona__auto { animation: nm-jazda 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) both, nm-podskok 0.35s ease-in-out 0.7s infinite; }
.nm-wartosc:is(.nm-wartosc--ikona, :hover) .nm-ikona__kolo { stroke-dasharray: 4 3; animation: nm-kolo 0.5s linear infinite; }
.nm-wartosc:is(.nm-wartosc--ikona, :hover) .nm-ikona__ped { animation: nm-ped 0.6s linear infinite; }
.nm-wartosc:is(.nm-wartosc--ikona, :hover) .nm-ikona__plomien { animation: nm-plomien 0.9s ease-in-out infinite; transform-origin: 50% 100%; }
.nm-wartosc:is(.nm-wartosc--ikona, :hover) .nm-ikona__zapach { animation: nm-zapach 1.6s ease-out infinite; }
.nm-wartosc:is(.nm-wartosc--ikona, :hover) .nm-ikona__zapach--2 { animation-delay: 0.5s; }
.nm-wartosc:is(.nm-wartosc--ikona, :hover) .nm-ikona__zapach--3 { animation-delay: 1s; }

/* Bez animacji (ustawienie klienta) ikonki stoją nieruchomo. */
@media (prefers-reduced-motion: reduce) {
	.nm-ikona * { animation: none !important; }
}

/* ——— Jesień (inc/jesien.php): spadające świece-liście i sekcja z jesiennymi zestawami ——— */
.nm-jesien-liscie {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 110vh;
	overflow: hidden;
	pointer-events: none;
	z-index: 5;
}

.nm-jesien-liscie img {
	position: absolute;
	left: var(--x);
	top: -120px;
	width: var(--wielkosc);
	opacity: 0;
	filter: drop-shadow(0 6px 8px rgba(42, 28, 21, 0.25));
	animation: nm-spadanie var(--czas) cubic-bezier(0.45, 0.05, 0.55, 0.95) var(--opoznienie) 2 both;
}

@keyframes nm-spadanie {
	0% { opacity: 0; transform: translate(0, 0) rotate(var(--obrot)); }
	8% { opacity: 1; }
	25% { transform: translate(var(--kolysanie), 25vh) rotate(calc(var(--obrot) + 60deg)); }
	50% { transform: translate(calc(var(--kolysanie) * -1), 55vh) rotate(calc(var(--obrot) + 140deg)); }
	75% { transform: translate(var(--kolysanie), 80vh) rotate(calc(var(--obrot) + 200deg)); }
	92% { opacity: 1; }
	100% { opacity: 0; transform: translate(0, 105vh) rotate(calc(var(--obrot) + 280deg)); }
}

:root[data-wyglad="ciemny"] .nm-jesien-liscie img {
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)) brightness(0.85);
}

@media (prefers-reduced-motion: reduce) {
	.nm-jesien-liscie {
		display: none;
	}
}

.nm-jesien__zdjecia {
	position: relative;
	padding: 0 40px 60px 0 !important;
}

.nm-jesien__glowne img {
	display: block;
	width: 100%;
	border-radius: 32px;
	transform: rotate(-2deg);
	box-shadow: 0 18px 40px rgba(42, 28, 21, 0.18);
}

.nm-jesien__male {
	position: absolute !important;
	width: 38% !important;
}

.nm-jesien__male img {
	display: block;
	width: 100%;
	border: 6px solid var(--nm-tlo);
	border-radius: 24px;
	box-shadow: 0 12px 28px rgba(42, 28, 21, 0.2);
}

.nm-jesien__male--1 {
	right: 0;
	bottom: 0;
	transform: rotate(5deg);
}

.nm-jesien__male--2 {
	left: -18px;
	bottom: -10px;
	width: 30% !important;
	transform: rotate(-6deg);
}

.nm-jesien__zestaw {
	border: 1px solid var(--nm-linia);
	text-decoration: none;
	transition: transform 0.25s, box-shadow 0.25s;
}

.nm-jesien__zestaw:hover {
	transform: translateY(-4px) rotate(-1deg);
	box-shadow: 0 12px 24px rgba(42, 28, 21, 0.14);
}

.nm-jesien__probka {
	display: block;
	width: 44px;
	height: 44px;
	margin-bottom: 4px;
	border-radius: 50%;
	box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.18), 0 0 0 4px var(--nm-tlo), 0 0 0 5px var(--nm-linia);
}

/* Trzy dynie na środku pod zdjęciami (prawy brzeg jak u zdjęć, bez wewnętrznego odstępu kontenera) - kołyszą się
   tylko przy włączonych animacjach, każda w innym rytmie. */
.nm-jesien__dynia {
	position: absolute !important;
	top: calc(100% + 20px);
	left: 0;
	right: 40px;
	width: auto !important;
}

.nm-jesien__dynia .elementor-shortcode {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 6px;
}

.nm-jesien__dynia .nm-ikona {
	display: block;
	width: 92px;
	height: 92px;
	color: var(--nm-braz);
}

.nm-jesien__dynia .nm-ikona:nth-child(2) {
	width: 116px;
	height: 116px;
}

/* Pomarańcz jak próbka zestawu „Dyniowy wieczór” - pastel wyglądał jak brzoskwinia. */
.nm-ikona__miazsz {
	fill: #fb9c55;
}

.nm-ikona__lisc-dyni {
	fill: #9fc68a;
}

.nm-animacje .nm-ikona__dynia {
	transform-origin: 50% 100%;
	animation: nm-kolysanie-dyni 3.2s ease-in-out infinite;
}

.nm-animacje .nm-ikona__lisc-dyni {
	transform-origin: 0% 100%;
	animation: nm-lisc-dyni 1.6s ease-in-out infinite;
}

.nm-animacje .nm-ikona--dynia:nth-child(2) .nm-ikona__dynia { animation-delay: -1.1s; }
.nm-animacje .nm-ikona--dynia:nth-child(3) .nm-ikona__dynia { animation-delay: -2.2s; }
.nm-animacje .nm-ikona--dynia:nth-child(2) .nm-ikona__lisc-dyni { animation-delay: -0.5s; }
.nm-animacje .nm-ikona--dynia:nth-child(3) .nm-ikona__lisc-dyni { animation-delay: -1s; }

@keyframes nm-kolysanie-dyni {
	0%, 100% { transform: rotate(-6deg); }
	50% { transform: rotate(6deg); }
}

@keyframes nm-lisc-dyni {
	0%, 100% { transform: rotate(0); }
	50% { transform: rotate(-14deg); }
}

/* Zdjęcia nad tekstem (tablet, telefon): miejsce na dynię przed etykietą. Elementor nadpisuje marginesy kontenerów. */
@media (max-width: 1024px) {
	.nm-jesien__zdjecia {
		margin-bottom: 64px !important;
	}

	.nm-jesien__dynia .nm-ikona {
		width: 68px;
		height: 68px;
	}

	.nm-jesien__dynia .nm-ikona:nth-child(2) {
		width: 86px;
		height: 86px;
	}
}

/* ——— Strona 404 (template-parts/404.php): duszek unosi się nad cieniem, obok tekst i drogi dalej ——— */
.nm-404 {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 32px 64px;
	align-items: center;
	max-width: 1100px;
	min-height: 60vh;
}

.nm-404__duszek {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.nm-404__duszek img {
	width: min(100%, 320px);
	height: auto;
	filter: drop-shadow(0 18px 24px rgba(42, 28, 21, 0.16));
}

.nm-404__cien {
	width: 170px;
	height: 18px;
	border-radius: 50%;
	background: rgba(42, 28, 21, 0.14);
}

:root[data-wyglad="ciemny"] .nm-404__cien {
	background: rgba(0, 0, 0, 0.45);
}

.nm-animacje .nm-404__duszek img {
	animation: nm-unoszenie-duszka 3.4s ease-in-out infinite;
}

.nm-animacje .nm-404__cien {
	animation: nm-cien-duszka 3.4s ease-in-out infinite;
}

@keyframes nm-unoszenie-duszka {
	0%, 100% { transform: translateY(0) rotate(-2deg); }
	50% { transform: translateY(-22px) rotate(2deg); }
}

@keyframes nm-cien-duszka {
	0%, 100% { opacity: 1; transform: scaleX(1); }
	50% { opacity: 0.55; transform: scaleX(0.78); }
}

.nm-404__tekst {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.nm-404 .nm-etykieta {
	margin: 0;
	font-weight: 700;
}

.nm-404 h1 {
	margin: 0;
	color: var(--nm-naglowki);
	font-family: var(--nm-czcionka-naglowkow);
	font-size: clamp(40px, 5.5vw, 68px);
	font-weight: 800;
	line-height: 1.08;
}

.nm-404__opis {
	max-width: 560px;
	margin: 0;
	color: var(--nm-tekst);
	font-size: 18px;
	line-height: 1.65;
}

.nm-404__opis a {
	color: var(--nm-naglowki);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nm-404__przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}

.nm-404__przycisk {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 24px;
	border: 2px solid var(--nm-braz);
	border-radius: 999px;
	background: var(--nm-braz);
	color: var(--nm-na-brazie);
	font-weight: 700;
	text-decoration: none;
}

.nm-404__przycisk--obrys {
	background: transparent;
	color: var(--nm-naglowki);
}

.nm-404__przycisk:hover {
	border-color: var(--nm-braz-jasniejszy);
	background: var(--nm-braz-jasniejszy);
	color: var(--nm-na-brazie);
}

@media (max-width: 767px) {
	.nm-404 {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		min-height: 0;
	}

	.nm-404__duszek img {
		width: 170px;
	}

	.nm-404__cien {
		width: 110px;
		height: 12px;
	}
}

/* ——— Strona Historia (inc/strony/historia.php) ——— */

/* Marzec 2025 - początek NONO Made: licznik od tamtego dnia ([nonomade_od_poczatku]), liczby rosną od zera w animacje.js. */
.nm-od-poczatku {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.nm-od-poczatku li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 18px 12px;
	border-radius: 22px;
	background: var(--nm-powierzchnia);
	color: var(--nm-tekst);
	font-size: 14px;
	line-height: 1.35;
	text-align: center;
}

.nm-od-poczatku__liczba {
	color: var(--nm-naglowki);
	font-family: var(--nm-czcionka-naglowkow);
	font-size: 42px;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1;
}

@media (max-width: 767px) {
	.nm-od-poczatku {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nm-od-poczatku__liczba {
		font-size: 36px;
	}
}
.nm-historia-czas {
	color: var(--nm-tekst);
}

/* Program „stworzSwiece” w oknie edytora; z animacjami pisze się linijka po linijce. */
.nm-kod-karta {
	width: 100%;
	min-width: 0;
}

.nm-kod {
	margin: 0;
	padding: 24px 28px 28px;
	border-radius: 32px;
	background: #2a1c15;
	color: #f4ece1;
	font: 500 14px/1.7 ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
	overflow-x: auto;
	box-shadow: 0 24px 50px rgba(42, 28, 21, 0.22);
}

:root[data-wyglad="ciemny"] .nm-kod {
	background: #120d0b;
	box-shadow: 0 0 0 1px var(--nm-linia);
}

.nm-kod::before {
	content: "";
	display: block;
	width: 11px;
	height: 11px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: #f9d3de;
	box-shadow: 18px 0 0 #f8e7a6, 36px 0 0 #cdebe3;
}

.nm-kod code {
	padding: 0;
	background: none;
	color: inherit;
	font: inherit;
}

.nm-kod__linia {
	display: block;
	min-height: 1.7em;
	white-space: pre;
}

.nm-kod__slowo { color: #e4d8f3; }
.nm-kod__krok { color: #f8e7a6; }
.nm-kod__liczba { color: #f9d3de; }
.nm-kod__napis { color: #cdebe3; }

@media (max-width: 767px) {
	.nm-kod {
		padding: 18px;
		border-radius: 24px;
		font-size: 11.5px;
	}

	.nm-kod__linia {
		white-space: pre-wrap;
		padding-left: 2ch;
		text-indent: -2ch;
	}
}

@keyframes nm-pisanie {
	from { opacity: 1; clip-path: inset(0 100% 0 0); }
	to { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes nm-mruganie { 50% { opacity: 0; } }

.nm-animacje .nm-kod__linia {
	opacity: 0;
	animation-delay: calc(500ms + var(--nm-kolejnosc, 0) * 200ms);
}

.nm-animacje .nm-kolejno.nm-widoczne .nm-kod__linia {
	animation: nm-pisanie 0.45s steps(16, end) both;
	animation-delay: calc(500ms + var(--nm-kolejnosc, 0) * 200ms);
}

.nm-animacje .nm-kod__linia:last-child::after {
	content: "▍";
	margin-left: 4px;
	color: #f8e7a6;
	animation: nm-mruganie 1s steps(1) infinite;
}

/* Oś czasu: przerywana linia łączy pastelowe kółka z ikonkami rozdziałów. */
.nm-os-czasu > .e-con-inner {
	position: relative;
}

.nm-os-czasu > .e-con-inner::before {
	content: "";
	position: absolute;
	top: 36px;
	bottom: 36px;
	left: 35px;
	border-left: 3px dashed color-mix(in srgb, var(--nm-braz) 35%, transparent);
}

.nm-rozdzial__ikona {
	flex: 0 0 72px !important;
	width: 72px !important;
	min-width: 72px;
	height: 72px;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50%;
	color: var(--nm-na-pastelu);
	box-shadow: 0 0 0 8px var(--nm-tlo);
	position: relative;
	z-index: 1;
}

.nm-rozdzial__ikona > *,
.nm-historia-dzialanie__kolko > * {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto !important;
	line-height: 0;
}

.nm-rozdzial__ikona .nm-ikona {
	display: block;
	width: 40px;
	height: 40px;
}

.nm-rozdzial__karta {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--nm-linia);
}

.nm-rozdzial__zdjecia {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-top: 8px;
}

.nm-rozdzial__zdjecia:has(> :only-child) {
	max-width: 440px;
}

.nm-rozdzial__zdjecia > .elementor-element {
	width: auto !important;
}

.nm-rozdzial__zdjecia img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 22px;
}

.nm-rozdzial__zdjecia:has(> :only-child) img {
	aspect-ratio: 1;
}

/* Pierwsze próby jak zdjęcia z aparatu natychmiastowego przypięte do karty. */
.nm-rozdzial__zdjecia--proby {
	gap: 18px;
	padding: 6px 4px 10px;
}

.nm-rozdzial__zdjecia.nm-rozdzial__zdjecia--proby {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center;
}

.nm-rozdzial__zdjecia--proby > .elementor-element {
	flex: 0 0 auto;
}

.nm-rozdzial__zdjecia--proby .elementor-widget-image img {
	width: auto;
	height: 210px;
	aspect-ratio: auto;
	border: 7px solid #fbf7f0;
	border-bottom-width: 22px;
	border-radius: 6px;
	box-shadow: 0 10px 22px rgba(42, 28, 21, 0.18);
	transition: transform 0.3s ease;
}

.nm-rozdzial__zdjecia--proby > :nth-child(1) img { transform: rotate(-3deg); }
.nm-rozdzial__zdjecia--proby > :nth-child(2) img { transform: rotate(2deg) translateY(6px); }
.nm-rozdzial__zdjecia--proby > :nth-child(3) img { transform: rotate(-1.5deg); }
.nm-rozdzial__zdjecia--proby img:hover { transform: rotate(0) scale(1.04); }

@media (max-width: 767px) {
	.nm-os-czasu > .e-con-inner::before {
		left: 23px;
	}

	.nm-rozdzial__ikona {
		flex-basis: 48px !important;
		width: 48px !important;
		min-width: 48px;
		height: 48px;
		box-shadow: 0 0 0 5px var(--nm-tlo);
	}

	.nm-rozdzial__ikona .nm-ikona {
		width: 28px;
		height: 28px;
	}

	.nm-rozdzial__zdjecia {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	}

	.nm-rozdzial__zdjecia.nm-rozdzial__zdjecia--proby {
		gap: 12px;
	}

	.nm-rozdzial__zdjecia--proby .elementor-widget-image img {
		height: 105px;
		border-width: 5px 5px 14px;
	}
}

/* Rozmowa, od której wzięła się nazwa: wiadomości jak na czacie, a przed każdą kropki „pisze…”. */
.nm-rozmowa {
	--nm-krok: 650ms;
}

.nm-dymek {
	width: fit-content !important;
	max-width: min(560px, 88%);
	padding: 18px 26px;
	border-radius: 28px;
	color: var(--nm-na-pastelu);
	position: relative;
}

.nm-dymek p {
	margin: 0;
}

.nm-dymek--lewo {
	border-bottom-left-radius: 8px;
}

.nm-dymek--prawo {
	margin-left: auto;
	border-bottom-right-radius: 8px;
}

@keyframes nm-pisze {
	0%, 100% { opacity: 0; }
	15%, 45%, 75% { opacity: 0.75; }
	30%, 60% { opacity: 0.3; }
}

.nm-animacje .nm-rozmowa .nm-dymek__tekst {
	opacity: 0;
}

.nm-animacje .nm-rozmowa.nm-widoczne .nm-dymek__tekst {
	animation: nm-kropla 0.35s ease-out both;
	animation-delay: calc(var(--nm-kolejnosc, 0) * var(--nm-krok) + 900ms);
}

.nm-animacje .nm-rozmowa .nm-dymek::after {
	content: "";
	position: absolute;
	left: 26px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -4.5px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 15px 0 0 currentColor, 30px 0 0 currentColor;
	opacity: 0;
}

.nm-animacje .nm-rozmowa.nm-widoczne .nm-dymek::after {
	animation: nm-pisze 0.9s linear both;
	animation-delay: calc(var(--nm-kolejnosc, 0) * var(--nm-krok));
}

/* „NONO stało się symbolem tego, że…” - trzy pastelowe karty z ikonkami. */
.nm-symbol .nm-ikona {
	display: block;
	width: 56px;
	height: 56px;
	color: var(--nm-na-pastelu);
}

.nm-symbol .elementor-widget-text-editor::first-letter {
	text-transform: uppercase;
}

/* Dziś: mozaika zdjęć świec. */
.nm-historia-zdjecia {
	display: grid !important;
	grid-template-columns: 1.1fr 1fr 1fr;
	grid-template-rows: 210px 210px;
	gap: 14px;
}

.nm-historia-zdjecia > .elementor-element {
	width: auto !important;
	height: 100%;
}

.nm-historia-zdjecia > :first-child {
	grid-row: span 2;
}

.nm-historia-zdjecia > :nth-child(4) {
	grid-column: span 2;
}

.nm-historia-zdjecia .elementor-widget-image .elementor-widget-container,
.nm-historia-zdjecia .elementor-widget-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 28px;
}

@media (max-width: 767px) {
	.nm-historia-zdjecia {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 220px 150px 170px;
	}

	.nm-historia-zdjecia > :first-child {
		grid-row: span 1;
		grid-column: span 2;
	}
}

.nm-historia-koniec h2 {
	max-width: 900px;
	margin: 0 auto;
}

/* Ruch ikonek historii (tylko z animacjami). */
@keyframes nm-bicie { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(0.96); } 45% { transform: scale(1.1); } }
@keyframes nm-kolysanie-ikony { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes nm-kapanie { 0% { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } 70% { transform: translateY(16px); opacity: 1; } 100% { transform: translateY(20px) scale(1.4, 0.3); opacity: 0; } }
@keyframes nm-blask { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes nm-rosniecie { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(-7deg) scale(1.1); } }
@keyframes nm-powiewanie { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-10deg) scaleX(0.85); } }
@keyframes nm-markiza { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }

.nm-animacje .nm-rozdzial.nm-widoczne > .nm-rozdzial__ikona {
	animation-name: nm-kropla;
	animation-timing-function: cubic-bezier(0.3, 1.4, 0.5, 1);
}

.nm-animacje .nm-ikona__kursor { animation: nm-mruganie 1s steps(1) infinite; }
.nm-animacje .nm-ikona--aparat .nm-ikona__blysk { animation: nm-blysk 1.6s ease-in-out infinite; }
.nm-animacje .nm-ikona__obiektyw { animation: nm-bicie 2.4s ease-in-out infinite; }
.nm-animacje .nm-ikona__serce { animation: nm-bicie 1.4s ease-in-out infinite; }
.nm-animacje .nm-ikona__markiza { animation: nm-markiza 1.8s ease-in-out infinite; }
.nm-animacje .nm-ikona__pytanie { animation: nm-kolysanie-ikony 2.2s ease-in-out infinite; transform-origin: 50% 90%; }
.nm-animacje .nm-ikona__pytanie--2 { animation-delay: -1.1s; }
.nm-animacje .nm-ikona__kropla { animation: nm-kapanie 1.8s ease-in infinite; }
.nm-animacje .nm-rozdzial .nm-ikona__plomien { animation: nm-plomien 0.9s ease-in-out infinite; transform-origin: 50% 100%; }
.nm-animacje .nm-ikona__blask { animation: nm-blask 1.8s ease-in-out infinite; }
.nm-animacje .nm-ikona__listek { animation: nm-rosniecie 2.6s ease-in-out infinite; transform-origin: 100% 100%; }
.nm-animacje .nm-ikona__listek--2 { animation-delay: -1.3s; transform-origin: 0 100%; }
.nm-animacje .nm-ikona__flaga { animation: nm-powiewanie 1.2s ease-in-out infinite; transform-origin: 0 50%; }

/* Ikonki kontaktu: list wysuwa się z koperty, słuchawka dzwoni. */
@keyframes nm-list { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes nm-dzwonienie { 0%, 50%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-9deg); } 20%, 40% { transform: rotate(9deg); } }

.nm-animacje .nm-ikona__list { animation: nm-list 1.8s ease-in-out infinite; }
.nm-animacje .nm-ikona__sluchawka { animation: nm-dzwonienie 2.4s ease-in-out infinite; }
.nm-animacje .nm-ikona__fala { animation: nm-blask 1.2s ease-in-out infinite; }
.nm-animacje .nm-ikona__fala--2 { animation-delay: 0.3s; }

/* ——— Strona Oferta (inc/strony/oferta.php) ——— */
/* Skróty do usług pod nagłówkiem: pastelowe pigułki z ikonkami. */
.nm-skroty-oferty {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.nm-skroty-oferty li {
	margin: 0;
}

.nm-skroty-oferty a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px 9px 12px;
	border-radius: 999px;
	color: var(--nm-na-pastelu);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nm-skroty-oferty a:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(42, 28, 21, 0.14);
}

.nm-skroty-oferty .nm-ikona {
	flex: none;
	width: 22px;
	height: 22px;
}

.nm-skroty-oferty .nm-ikona * {
	animation: none !important;
}

/* Zdjęcie na górze (Oferta, Baza wiedzy) stoi prosto, z kółkiem w rogu. */
.nm-oferta-zdjecie {
	position: relative;
}

.nm-oferta-zdjecie .elementor-widget-image img {
	display: block;
	width: 100%;
	border-radius: 36px;
	box-shadow: 0 20px 44px rgba(42, 28, 21, 0.18);
}

.nm-oferta-zdjecie .nm-naklejka--kolory {
	left: -12px;
	top: -12px;
}

.nm-animacje .nm-oferta-zdjecie .nm-naklejka {
	animation: nm-pieczatka 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.6s both;
}

/* Usługa: pastelowa karta obok zdjęcia świec. */
.nm-usluga {
	scroll-margin-top: 110px;
}

.nm-usluga__karta {
	flex: 1 1 0;
	min-width: 0;
}

.nm-usluga .nm-usluga__zdjecie {
	flex: 0 0 40% !important;
	width: 40% !important;
	max-width: 40% !important;
}

.nm-usluga .nm-usluga__zdjecie .elementor-widget-container,
.nm-usluga .nm-usluga__zdjecie img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	object-position: center 35%;
	border-radius: 40px;
}

.nm-usluga__ikona .nm-ikona {
	display: block;
	width: 64px;
	height: 64px;
	color: var(--nm-na-pastelu);
}

.nm-usluga__opis p {
	margin: 0 0 10px;
}

.nm-usluga__opis ul {
	margin: 4px 0 14px;
	padding: 0;
	list-style: none;
}

.nm-usluga__opis li {
	position: relative;
	margin: 6px 0;
	padding-left: 26px;
}

/* Punkt listy w kształcie kropli wosku. */
.nm-usluga__opis li::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 0.55em;
	width: 10px;
	height: 10px;
	border-radius: 0 50% 50% 50%;
	background: currentColor;
	opacity: 0.7;
	transform: rotate(45deg);
}

@media (max-width: 1024px) {
	.nm-usluga .nm-usluga__zdjecie {
		flex-basis: auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.nm-usluga .nm-usluga__zdjecie .elementor-widget-container,
	.nm-usluga .nm-usluga__zdjecie img {
		height: 300px;
		min-height: 0;
	}
}

@media (max-width: 767px) {
	.nm-usluga .nm-usluga__zdjecie .elementor-widget-container,
	.nm-usluga .nm-usluga__zdjecie img {
		height: 230px;
		border-radius: 28px;
	}

	.nm-usluga__ikona .nm-ikona {
		width: 52px;
		height: 52px;
	}
}

/* Dwie zalety na końcu oferty. */
.nm-zaleta .nm-ikona {
	display: block;
	width: 52px;
	height: 52px;
	color: var(--nm-na-pastelu);
}

/* Ruch ikonek usług i zalet (tylko z animacjami). */
@keyframes nm-kropka { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.45); } }
@keyframes nm-kokarda { 0%, 100% { transform: rotate(0) scale(1); } 30% { transform: rotate(-8deg) scale(1.08); } 60% { transform: rotate(6deg) scale(1.04); } }
@keyframes nm-obraczka { 50% { transform: translateX(3px); } }
@keyframes nm-obraczka-2 { 50% { transform: translateX(-3px); } }

.nm-animacje .nm-ikona__kropka { animation: nm-kropka 2.4s ease-in-out infinite; }
.nm-animacje .nm-ikona__kropka--2 { animation-delay: 0.3s; }
.nm-animacje .nm-ikona__kropka--3 { animation-delay: 0.6s; }
.nm-animacje .nm-ikona__kropka--4 { animation-delay: 0.9s; }
.nm-animacje .nm-ikona__kokarda { animation: nm-kokarda 2s ease-in-out infinite; transform-origin: 50% 100%; }
.nm-animacje .nm-ikona__obraczka { animation: nm-obraczka 2.4s ease-in-out infinite; }
.nm-animacje .nm-ikona__obraczka--2 { animation-name: nm-obraczka-2; }
.nm-animacje :is(.nm-usluga, .nm-zaleta) .nm-ikona__blysk { animation: nm-blysk 1.6s ease-in-out infinite; }
.nm-animacje .nm-zaleta .nm-ikona__plomien { animation: nm-plomien 0.9s ease-in-out infinite; transform-origin: 50% 100%; }
.nm-animacje .nm-zaleta .nm-ikona__zapach { animation: nm-zapach 1.6s ease-out infinite; }
.nm-animacje .nm-zaleta .nm-ikona__zapach--2 { animation-delay: 0.5s; }
.nm-animacje .nm-zaleta .nm-ikona__zapach--3 { animation-delay: 1s; }

/* Historia: działanie z ikonek pod wstępem - kod + serce = świeca. */
.nm-historia-dzialanie {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 6px 0 2px;
}

.nm-historia-dzialanie__kolko {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	color: var(--nm-na-pastelu);
}

.nm-historia-dzialanie__kolko .nm-ikona {
	display: block;
	width: 36px;
	height: 36px;
}

.nm-historia-dzialanie__znak {
	color: var(--nm-naglowki);
	font-family: var(--nm-czcionka-naglowkow);
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
}

.nm-animacje .nm-historia-dzialanie .nm-ikona__plomien {
	animation: nm-plomien 0.9s ease-in-out infinite;
	transform-origin: 50% 100%;
}

@media (max-width: 767px) {
	.nm-historia-dzialanie__kolko {
		width: 52px;
		height: 52px;
	}

	.nm-historia-dzialanie__kolko .nm-ikona {
		width: 28px;
		height: 28px;
	}
}

/* ——— Baza wiedzy (inc/strony/baza-wiedzy.php) ——— */
/* Dział: pastelowa karta z ikonką i zdjęciem, obok pytania rozwijane po kliknięciu.
   Na komputerze karta zostaje na ekranie, gdy klient przewija pytania. */
.nm-dzial {
	scroll-margin-top: 110px;
}

.nm-dzial--mieta { --nm-kolor-dzialu: var(--nm-mieta); }
.nm-dzial--maslo { --nm-kolor-dzialu: var(--nm-maslo); }
.nm-dzial--roz { --nm-kolor-dzialu: var(--nm-roz); }
.nm-dzial--liliowy { --nm-kolor-dzialu: var(--nm-liliowy); }
.nm-dzial--blekit { --nm-kolor-dzialu: var(--nm-blekit); }
.nm-dzial--pomarancz { --nm-kolor-dzialu: var(--nm-pomarancz); }

.nm-dzial .nm-dzial__karta {
	position: sticky;
	top: 110px;
	flex: 0 0 36% !important;
	width: 36% !important;
	max-width: 36% !important;
}

.nm-dzial .nm-dzial__pytania {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0;
}

.nm-dzial__ikona .nm-ikona {
	display: block;
	width: 64px;
	height: 64px;
	color: var(--nm-na-pastelu);
}

.nm-dzial__zdjecie img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 28px;
	object-fit: cover;
	object-position: center 60%;
}

.nm-pytania {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nm-pytanie {
	border: 1px solid var(--nm-linia);
	border-radius: 22px;
	background: var(--nm-powierzchnia);
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.nm-pytanie[open] {
	border-color: transparent;
	box-shadow: 0 12px 28px rgba(42, 28, 21, 0.1);
}

.nm-pytanie summary {
	position: relative;
	display: block;
	padding: 20px 72px 20px 24px;
	color: var(--nm-naglowki);
	font-family: var(--nm-czcionka-naglowkow);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}

.nm-pytanie summary::-webkit-details-marker {
	display: none;
}

/* Plus w kółku w kolorze działu - po otwarciu obraca się w krzyżyk. */
.nm-pytanie summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 34px;
	height: 34px;
	margin-top: -17px;
	border-radius: 50%;
	background:
		linear-gradient(var(--nm-na-pastelu), var(--nm-na-pastelu)) center / 14px 2px no-repeat,
		linear-gradient(var(--nm-na-pastelu), var(--nm-na-pastelu)) center / 2px 14px no-repeat,
		var(--nm-kolor-dzialu, var(--nm-mieta));
	transition: rotate 0.25s ease;
}

.nm-pytanie[open] summary::after {
	rotate: 45deg;
}

.nm-pytanie summary:focus-visible {
	border-radius: 22px;
	outline: 3px solid var(--nm-braz);
	outline-offset: 2px;
}

.nm-pytanie__odpowiedz {
	padding: 0 24px 22px;
	color: var(--nm-tekst);
	font-size: 17px;
	line-height: 1.7;
}

.nm-pytanie__odpowiedz p {
	margin: 0 0 10px;
}

.nm-pytanie__odpowiedz > :last-child {
	margin-bottom: 0;
}

.nm-pytanie__odpowiedz ul {
	margin: 4px 0 12px;
	padding: 0;
	list-style: none;
}

.nm-pytanie__odpowiedz li {
	position: relative;
	margin: 6px 0;
	padding-left: 26px;
}

/* Punkt listy w kształcie kropli wosku - jak w ofercie. */
.nm-pytanie__odpowiedz li::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: 5px;
	width: 10px;
	height: 10px;
	border-radius: 0 50% 50% 50%;
	background: var(--nm-kolor-dzialu, var(--nm-mieta));
	transform: rotate(45deg);
}

.nm-pytanie__odpowiedz a {
	color: var(--nm-braz);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Odpowiedź rozsuwa się płynnie tam, gdzie przeglądarka to potrafi (bez animacji po prostu się pokazuje). */
@supports (interpolate-size: allow-keywords) {
	.nm-pytania {
		interpolate-size: allow-keywords;
	}

	.nm-pytanie::details-content {
		height: 0;
		overflow: clip;
		transition: height 0.3s ease, content-visibility 0.3s allow-discrete;
	}

	.nm-pytanie[open]::details-content {
		height: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nm-pytanie::details-content,
	.nm-pytanie summary::after {
		transition: none;
	}
}

.nm-animacje .nm-dzial .nm-ikona__plomien { animation: nm-plomien 0.9s ease-in-out infinite; transform-origin: 50% 100%; }
.nm-animacje .nm-dzial .nm-ikona__zapach { animation: nm-zapach 1.6s ease-out infinite; }
.nm-animacje .nm-dzial .nm-ikona__zapach--2 { animation-delay: 0.5s; }
.nm-animacje .nm-dzial .nm-ikona__zapach--3 { animation-delay: 1s; }

@media (max-width: 1024px) {
	.nm-dzial .nm-dzial__karta {
		position: static;
		flex-basis: auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.nm-dzial .nm-dzial__pytania {
		width: 100% !important;
	}
}

@media (max-width: 767px) {
	.nm-dzial__ikona .nm-ikona {
		width: 52px;
		height: 52px;
	}

	.nm-dzial__zdjecie img {
		aspect-ratio: 3 / 2;
	}

	.nm-pytanie summary {
		padding: 18px 64px 18px 20px;
		font-size: 17px;
	}

	.nm-pytanie__odpowiedz {
		padding: 0 20px 20px;
		font-size: 16px;
	}
}

/* ——— Kontakt (inc/strony/kontakt.php) ——— */
/* Karty z e-mailem, telefonem i profilami - cała karta jest linkiem (poza kartą z dwoma profilami). */
.nm-kontakt-karta {
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.nm-kontakt-karta:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(42, 28, 21, 0.12);
}

.nm-kontakt-karta__ikona .nm-ikona {
	display: block;
	width: 52px;
	height: 52px;
	color: var(--nm-na-pastelu);
}

.nm-kontakt-karta__tekst p {
	margin: 0;
}

.nm-kontakt-karta__tekst a {
	color: var(--nm-na-pastelu);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Formularz w zaokrąglonej karcie obok naszego zdjęcia. */
.nm-kontakt .nm-kontakt-formularz {
	flex: 1 1 0 !important;
	min-width: 0;
}

/* Kolaż obok formularza: dwie białe świece z naszego zdjęcia z bzem na liliowej karcie w kropki.
   Świece to osobne wycięte zdjęcia, więc układ dopasowuje się do szerokości ekranu. */
.nm-kontakt .nm-kontakt-kolaz {
	position: relative;
	flex: 0 0 38% !important;
	width: 38% !important;
	max-width: 38% !important;
	min-height: 360px;
	overflow: hidden;
	background-image: radial-gradient(rgba(92, 52, 34, 0.1) 1.2px, transparent 1.6px);
	background-size: 18px 18px;
}

.nm-kontakt .nm-kontakt-kolaz__plaster,
.nm-kontakt .nm-kontakt-kolaz__kokarda {
	position: absolute !important;
}

.nm-kontakt .nm-kontakt-kolaz img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 18px 22px rgba(42, 28, 21, 0.22));
}

.nm-kontakt .nm-kontakt-kolaz__plaster {
	top: 13%;
	right: 7%;
	width: 64% !important;
	rotate: 6deg;
}

.nm-kontakt .nm-kontakt-kolaz__kokarda {
	bottom: 7%;
	left: 7%;
	width: 48% !important;
	rotate: -12deg;
}

.nm-kontakt .nm-kontakt-kolaz__naklejka {
	top: 7%;
	left: 7%;
	width: 96px !important;
	height: 96px;
	background: var(--nm-braz);
	color: var(--nm-na-brazie);
	rotate: -8deg;
}

.nm-kontakt-kolaz__naklejka strong {
	font-size: 26px;
}

@keyframes nm-unoszenie { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

.nm-animacje .nm-kontakt-kolaz img { animation: nm-unoszenie 5s ease-in-out infinite; }
.nm-animacje .nm-kontakt-kolaz__kokarda img { animation-delay: -2.5s; }

.nm-kontakt-formularz .wpforms-container {
	margin: 0;
}

.nm-kontakt-formularz .wpforms-field-label {
	margin-bottom: 6px;
	color: var(--nm-naglowki);
	font-size: 15px;
	font-weight: 700;
}

.nm-kontakt-formularz .wpforms-required-label {
	color: var(--nm-wymagane);
}

.nm-kontakt-formularz .wpforms-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.nm-kontakt-formularz .wpforms-form select,
.nm-kontakt-formularz .wpforms-form textarea {
	width: 100%;
	max-width: 100%;
	min-height: 50px;
	padding: 12px 16px;
	border: 1px solid var(--nm-linia);
	border-radius: 14px;
	background-color: var(--nm-tlo);
	box-shadow: none;
	color: var(--nm-tekst);
	font-size: 16px;
}

.nm-kontakt-formularz .wpforms-form textarea {
	min-height: 160px;
}

/* Podpowiedź w polu (np. „niewymagany” przy telefonie) - delikatna, szara. */
.nm-kontakt-formularz .wpforms-form ::placeholder {
	color: #9a9591;
	opacity: 1;
}

.nm-kontakt-formularz .wpforms-form input:focus,
.nm-kontakt-formularz .wpforms-form select:focus,
.nm-kontakt-formularz .wpforms-form textarea:focus {
	border-color: var(--nm-braz);
	outline: 3px solid color-mix(in srgb, var(--nm-braz) 25%, transparent);
}

.nm-kontakt-formularz .wpforms-form button[type="submit"] {
	min-height: 52px;
	padding: 14px 30px;
	border: 0;
	border-radius: 999px;
	background: var(--nm-braz);
	color: var(--nm-na-brazie);
	font-size: 16px;
	font-weight: 700;
}

.nm-kontakt-formularz .wpforms-form button[type="submit"]:hover {
	background: var(--nm-braz-jasniejszy, var(--nm-braz));
}

.nm-kontakt-formularz .nm-pola-wymagane {
	margin: 0 0 14px;
	font-size: 13px;
}

.nm-kontakt-formularz .wpforms-error {
	color: var(--nm-wymagane);
}

.nm-kontakt-formularz .wpforms-confirmation-container {
	padding: 20px 24px;
	border: 0;
	border-radius: 24px;
	background: var(--nm-mieta);
	color: var(--nm-na-pastelu);
}

.nm-kontakt-formularz .wpforms-confirmation-container p {
	margin: 0;
}

/* „Zanim napiszesz” - pastelowe karty-linki do Bazy wiedzy, kreatora i Oferty. */
.nm-zanim-napiszesz__karta {
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nm-zanim-napiszesz__karta:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(42, 28, 21, 0.12);
}

@media (max-width: 1024px) {
	.nm-kontakt .nm-kontakt-kolaz {
		flex-basis: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 340px;
		min-height: 0;
	}

	.nm-kontakt .nm-kontakt-kolaz__plaster {
		top: 8%;
		right: 6%;
		width: min(52%, 300px) !important;
	}

	.nm-kontakt .nm-kontakt-kolaz__kokarda {
		bottom: 6%;
		left: 6%;
		width: min(38%, 180px) !important;
	}

	.nm-kontakt .nm-kontakt-kolaz__naklejka {
		top: 6%;
		left: 6%;
		width: 80px !important;
		height: 80px;
		font-size: 11px;
	}
}

@media (max-width: 767px) {
	/* Na telefonie pola formularza są jedno pod drugim (WPForms zostawia je w dwóch kolumnach). */
	.nm-kontakt-formularz .wpforms-container .wpforms-field.wpforms-one-half {
		float: none;
		width: 100%;
		margin-left: 0;
	}

	.nm-kontakt-karta__ikona .nm-ikona {
		width: 44px;
		height: 44px;
	}
}