/* Kreator świec w wyglądzie strony NONO Made (szablon page-templates/kreator-swiecy.php). Wtyczka ma własny, neutralny wygląd -
   tu dostaje kolory strony (jasny i ciemny wygląd), zaokrąglone kafelki i masłowe tło wybranej opcji, jak filtry w sklepie. */

/* ——— Nagłówek jak w sklepie ——— */
.nm-kreator-naglowek {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 16px;
}

.nm-kreator-naglowek .nm-sklep-naglowek {
	margin-bottom: 28px;
}

/* Wtyczka ma własny wstęp - nagłówek strony go zastępuje. */
.nmcc-page .nmcc__intro {
	display: none;
}

/* ——— Kolory strony zamiast kolorów wtyczki ——— */
.nmcc-page .nmcc {
	--nmcc-brown: var(--nm-braz);
	--nmcc-brown-hover: var(--nm-braz-jasniejszy);
	--nmcc-ink: var(--nm-naglowki);
	--nmcc-muted: var(--nm-tekst);
	--nmcc-line: var(--nm-linia);
	--nmcc-paper: var(--nm-powierzchnia);
	--nmcc-chosen: var(--nm-maslo);
	--nmcc-heading: var(--nm-czcionka-naglowkow);

	padding-top: 0;
	color: var(--nm-tekst);
}

/* ——— Rodzaj świecy ——— */
.nmcc-page .nmcc__kinds {
	gap: 12px;
	margin: 0 0 clamp(24px, 4vw, 40px);
}

.nmcc-page .nmcc__kind {
	gap: 4px;
	padding: 18px 22px;
	border: 1px solid var(--nm-linia);
	border-radius: 24px;
	background: var(--nm-powierzchnia);
	text-align: left;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.nmcc-page .nmcc__kind:hover {
	border-color: var(--nm-braz);
	transform: translateY(-2px);
}

.nmcc-page .nmcc__kind-name {
	color: var(--nm-naglowki);
	font-size: 18px;
}

.nmcc-page .nmcc__kind-description {
	color: var(--nm-tekst);
	font-size: 14px;
}

.nmcc-page .nmcc__kind.is-active {
	border-color: transparent;
	background: var(--nm-maslo);
}

.nmcc-page .nmcc__kind.is-active .nmcc__kind-name,
.nmcc-page .nmcc__kind.is-active .nmcc__kind-description {
	color: var(--nm-na-pastelu);
}

/* ——— Podgląd świecy ——— */
.nmcc-page .nmcc__preview-frame {
	overflow: hidden;
	border: 0;
	border-radius: 32px;
}

.nmcc-page .nmcc__turn input {
	accent-color: var(--nm-braz);
}

.nmcc-page .nmcc__turn-hint {
	color: var(--nm-tekst);
	font-size: 13px;
}

/* ——— Kroki: numer w masłowym kółku ——— */
.nmcc-page .nmcc__section-title {
	align-items: center;
	gap: 10px;
	color: var(--nm-naglowki);
	font-size: 20px;
	letter-spacing: 0;
}

.nmcc-page .nmcc__step {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--nm-maslo);
	color: var(--nm-na-pastelu);
	font-family: var(--nm-czcionka-tekstu);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
}

.nmcc-page .nmcc__section-note {
	color: var(--nm-tekst);
	font-size: 14px;
}

/* ——— Kafelki wyboru: model, pojemnik, wosk, knot, zapach, dodatki ——— */
.nmcc-page .nmcc__model,
.nmcc-page .nmcc__choice {
	padding: 14px 16px;
	border: 1px solid var(--nm-linia);
	border-radius: 20px;
	background: var(--nm-powierzchnia);
}

.nmcc-page .nmcc__model:hover,
.nmcc-page .nmcc__choice:hover {
	border-color: var(--nm-braz);
}

.nmcc-page .nmcc__model:has(input:checked),
.nmcc-page .nmcc__choice:has(input:checked) {
	border-color: transparent;
	background: var(--nm-maslo);
}

.nmcc-page .nmcc__model:has(input:focus-visible),
.nmcc-page .nmcc__choice:has(input:focus-visible) {
	outline-color: var(--nm-braz);
}

.nmcc-page .nmcc__model-thumb {
	border-radius: 12px;
}

.nmcc-page .nmcc__model-name,
.nmcc-page .nmcc__choice-name {
	color: var(--nm-naglowki);
	font-size: 15px;
	letter-spacing: 0;
}

.nmcc-page .nmcc__model-price,
.nmcc-page .nmcc__choice-description {
	color: var(--nm-tekst);
	font-size: 13px;
}

.nmcc-page .nmcc__choice-extra {
	color: var(--nm-braz);
	font-weight: 700;
}

.nmcc-page :is(.nmcc__model, .nmcc__choice):has(input:checked) :is(.nmcc__model-name, .nmcc__model-price, .nmcc__choice-name, .nmcc__choice-description, .nmcc__choice-extra) {
	color: var(--nm-na-pastelu);
}

.nmcc-page .nmcc__choice--many::after {
	border: 1.5px solid color-mix(in srgb, var(--nm-tekst) 45%, transparent);
	border-radius: 6px;
	background: var(--nm-powierzchnia);
}

.nmcc-page .nmcc__choice--many:has(input:checked)::after {
	border-color: var(--nm-braz);
	background: var(--nm-braz);
	color: var(--nm-na-brazie);
}

/* ——— Kolory wosku: kółka jak w filtrze kolorów w sklepie ———
   Miejsce na kolor mieści najdłuższe słowo nazwy („Ciemnobrązowy”), żeby nazwy nie wchodziły na sąsiednie. */
.nmcc-page .nmcc__swatches {
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 14px 6px;
}

.nmcc-page .nmcc__swatch-sample {
	width: 46px;
	height: 46px;
	border: 1px solid rgba(42, 28, 21, 0.14);
	border-radius: 50%;
}

.nmcc-page .nmcc__swatch:has(input:checked) .nmcc__swatch-sample {
	box-shadow: 0 0 0 3px var(--nm-tlo), 0 0 0 5px var(--nm-braz);
}

.nmcc-page .nmcc__swatch:has(input:focus-visible) .nmcc__swatch-sample {
	outline-color: var(--nm-braz);
}

/* Nazwy dzielą się tylko między słowami („Neonowa / zieleń”), nigdy w środku słowa. */
.nmcc-page .nmcc__swatch-name {
	color: var(--nm-tekst);
	font-size: 12px;
	overflow-wrap: normal;
	hyphens: manual;
}

/* Wybrana nazwa jest podkreślona, a nie pogrubiona - pogrubiona nie zmieściłaby się pod kolorem. */
.nmcc-page .nmcc__swatch:has(input:checked) .nmcc__swatch-name {
	color: var(--nm-naglowki);
	font-weight: 400;
	text-decoration: underline 2px var(--nm-braz);
	text-underline-offset: 3px;
}

/* Telefon: cztery kolory w rzędzie, nazwy odrobinę mniejsze. */
@media (max-width: 600px) {
	.nmcc-page .nmcc__swatches {
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	}

	.nmcc-page .nmcc__swatch-name {
		font-size: 11px;
	}
}

/* ——— Cena i „Dodaj do koszyka” ——— */
.nmcc-page .nmcc__checkout-bar {
	padding: 18px 20px;
	border: 1px solid var(--nm-linia);
	border-radius: 24px;
	background: var(--nm-powierzchnia);
}

.nmcc-page .nmcc__price-label {
	color: var(--nm-tekst);
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
}

.nmcc-page .nmcc__price {
	color: var(--nm-naglowki);
	font-size: 30px;
}

.nmcc-page .nmcc__cta {
	min-height: 52px;
	padding: 0 30px;
	border-radius: 999px;
	background: var(--nm-braz);
	color: var(--nm-na-brazie);
	font-family: var(--nm-czcionka-tekstu);
	font-size: 16px;
	letter-spacing: 0;
	text-transform: none;
}

.nmcc-page .nmcc__cta:hover {
	background: var(--nm-braz-jasniejszy);
}

/* ——— Opis świecy ——— */
.nmcc-page .nmcc__description {
	padding: 24px;
	border: 1px solid var(--nm-linia);
	border-radius: 24px;
	background: var(--nm-powierzchnia);
	color: var(--nm-tekst);
	font-size: 15px;
}

.nmcc-page .nmcc__description .nmcc__section-title,
.nmcc-page .nmcc__description-title,
.nmcc-page .nmcc__facts strong,
.nmcc-page .nmcc__more summary {
	color: var(--nm-naglowki);
}

.nmcc-page .nmcc__facts li {
	border-bottom-color: var(--nm-linia);
}

.nmcc-page .nmcc__allergens {
	border-radius: 0 16px 16px 0;
	background: var(--nm-powierzchnia-2);
	color: var(--nm-tekst);
	font-size: 14px;
}

.nmcc-page .nmcc__producer,
.nmcc-page .nmcc__handmade {
	color: var(--nm-tekst);
	font-size: 13px;
}