/* Wygląd NONO Made: pastele z Instagrama + brąz z logo, w wersji jasnej i ciemnej.
   Wersję ustawia skrypt wyglad.js na <html data-wyglad="jasny|ciemny">. */

:root {
	--nm-tlo: #FBF7F0;
	--nm-powierzchnia: #FFFFFF;
	--nm-powierzchnia-2: #F4ECE1;
	--nm-tekst: #4A3A31;
	--nm-naglowki: #2A1C15;
	--nm-braz: #5C3422;
	--nm-braz-jasniejszy: #7A4A33;
	--nm-na-brazie: #FFFFFF;
	--nm-linia: #EADFD2;

	--nm-mieta: #CDEBE3;
	--nm-roz: #F9D3DE;
	--nm-maslo: #F8E7A6;
	--nm-blekit: #D3E6F5;
	--nm-liliowy: #E4D8F3;
	--nm-pomarancz: #FAD6B8;
	--nm-na-pastelu: #2A1C15;
	--nm-wymagane: #B3261E;

	--nm-czcionka-naglowkow: 'Bricolage Grotesque', sans-serif;
	--nm-czcionka-tekstu: 'DM Sans', sans-serif;
}

:root[data-wyglad="ciemny"] {
	color-scheme: dark;
	--nm-tlo: #1B1411;
	--nm-powierzchnia: #2A201A;
	--nm-powierzchnia-2: #231A15;
	--nm-tekst: #E4D5C6;
	--nm-naglowki: #FBF3EA;
	--nm-braz: #F0C39A;
	--nm-braz-jasniejszy: #F7D6B6;
	--nm-na-brazie: #2A1C15;
	--nm-linia: #3D2F27;

	--nm-mieta: #9ED3C6;
	--nm-roz: #E9AFC2;
	--nm-maslo: #E8D185;
	--nm-blekit: #A8C8E4;
	--nm-liliowy: #C3B1E3;
	--nm-pomarancz: #EDB184;
	--nm-wymagane: #FF9B8F;
}

/* Gwiazdka przy polu obowiązkowym (konto, komentarze, zamówienie): czerwona, ale czytelna w obu wyglądach. */
#main .required,
#account-modal .required {
	border: 0;
	color: var(--nm-wymagane);
	text-decoration: none;
}

:root {
	--nm-na-brazie-wyroznienie: #F8E7A6;
}

:root[data-wyglad="ciemny"] {
	--nm-na-brazie-wyroznienie: #5C3422;
}

/* Pastele NONO Made jako kolory globalne Elementora (Mięta, Róż…) — tu dostają kolor bieżącego wyglądu.
   :root body jest mocniejsze niż .elementor-kit-…, w którym Elementor wpisuje kody z edytora. */
:root body {
	--e-global-color-nmmieta: var(--nm-mieta);
	--e-global-color-nmroz: var(--nm-roz);
	--e-global-color-nmmaslo: var(--nm-maslo);
	--e-global-color-nmblekit: var(--nm-blekit);
	--e-global-color-nmliliowy: var(--nm-liliowy);
	--e-global-color-nmpomarancz: var(--nm-pomarancz);
	--e-global-color-nmnapastelu: var(--nm-na-pastelu);
}

/* Paleta Blocksy — z niej korzystają nagłówek, stopka, przyciski i tło strony. */
:root {
	--theme-palette-color-1: var(--nm-braz);
	--theme-palette-color-2: var(--nm-braz-jasniejszy);
	--theme-palette-color-3: var(--nm-tekst);
	--theme-palette-color-4: var(--nm-naglowki);
	--theme-palette-color-5: var(--nm-linia);
	--theme-palette-color-6: var(--nm-tlo);
	--theme-palette-color-7: var(--nm-powierzchnia-2);
	--theme-palette-color-8: var(--nm-powierzchnia);
	--theme-font-family: var(--nm-czcionka-tekstu);
	--theme-button-text-initial-color: var(--nm-na-brazie);
	--theme-button-text-hover-color: var(--nm-na-brazie);
}

h1, h2, h3, h4, h5, h6 {
	--theme-font-family: var(--nm-czcionka-naglowkow);
	letter-spacing: -0.02em;
}

/* ——— Nagłówek (Blocksy ma w ustawieniach na stałe szare tło i szare menu) ——— */
#header [data-row] {
	background-color: var(--nm-tlo);
}

#header [data-row*="top"] {
	--height: 36px;
}

#header [data-row*="middle"] {
	--height: 96px;
}

#header [data-id="logo"] {
	--logo-max-height: 72px;
}

/* Logo jako pieczątka: kremowe kółko z brązową obwódką, jak etykieta na pojemnikach - w obu wyglądach w oryginalnych kolorach. */
#header .site-logo-container {
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background: #fbf7f0;
	box-shadow: inset 0 0 0 2px #5c3422, inset 0 0 0 6px #fbf7f0, inset 0 0 0 7px rgba(92, 52, 34, 0.35), 0 8px 20px rgba(42, 28, 21, 0.18);
}

#header .site-logo-container img {
	width: auto;
	height: 64px;
	max-height: none;
	margin-top: 3px;
}

@media (max-width: 999px) {
	#header .site-logo-container {
		width: 62px;
		height: 62px;
	}

	#header .site-logo-container img {
		height: 43px;
		margin-top: 2px;
	}
}

/* Blocksy dzieli nagłówek „1fr / menu / 1fr”: logo i przyciski dostają po równo i menu brakuje miejsca.
   Tu menu bierze całe wolne miejsce między logo a przyciskami. */
#header [data-device="desktop"] [data-column-set="3"] > div {
	grid-template-columns: auto 1fr auto;
	column-gap: 24px;
}

#header [data-device="desktop"] [data-column="middle"] {
	justify-content: center;
}

/* W ciemnym wyglądzie logo poza pieczątką (np. w panelu menu na telefonie) jest kremowe. */
:root[data-wyglad="ciemny"] .site-logo-container img {
	filter: brightness(0) invert(0.93) sepia(0.25);
}

:root[data-wyglad="ciemny"] #header .site-logo-container img {
	filter: none;
}

#header [data-id="socials"] {
	--theme-icon-color: var(--nm-tekst);
	--theme-icon-hover-color: var(--nm-braz);
	--background-color: transparent;
	--background-hover-color: transparent;
}

/* Menu w „pigułce”, bieżąca strona na masłowym tle */
#header [data-id="menu"] > ul {
	gap: 4px;
	padding: 6px;
	border-radius: 999px;
	background: var(--nm-powierzchnia);
	box-shadow: 0 1px 2px rgba(42, 28, 21, 0.08);
}

#header [data-id="menu"] > ul > li > a {
	--theme-font-weight: 500;
	--theme-font-size: 15px;
	--theme-text-transform: none;
	--theme-link-initial-color: var(--nm-naglowki);
	--theme-link-hover-color: var(--nm-naglowki);
	--theme-link-active-color: var(--nm-na-pastelu);
	height: 40px;
	padding-inline: 14px;
	border-radius: 999px;
}

#header [data-id="menu"] > ul > li > a:hover {
	background: var(--nm-powierzchnia-2);
}

/* Na węższych komputerach menu jest ciaśniejsze - wszystkie pozycje mieszczą się bez „Więcej”. */
@media (max-width: 1279px) {
	#header [data-device="desktop"] [data-column-set="3"] > div {
		column-gap: 12px;
	}

	#header [data-id="menu"] > ul {
		gap: 2px;
	}

	#header [data-id="menu"] > ul > li > a {
		--theme-font-size: 14px;
		padding-inline: 9px;
	}
}

#header [data-id="menu"] > ul > li > a[aria-current="page"],
#header [data-id="menu"] > ul > li.current-menu-ancestor > a {
	background: var(--nm-maslo);
	color: var(--nm-na-pastelu);
}

/* Rozwijane menu (np. „Sklep”: Gotowe świece, Kreator świec) - jasna, zaokrąglona karta jak pigułka menu. */
#header [data-id="menu"] .sub-menu {
	--dropdown-background-color: var(--nm-powierzchnia);
	--dropdown-divider: none;
	padding: 8px;
	border-radius: 20px;
	background-color: var(--nm-powierzchnia);
	box-shadow: 0 12px 30px rgba(42, 28, 21, 0.16);
}

#header [data-id="menu"] .sub-menu li {
	border: 0;
}

#header [data-id="menu"] .sub-menu a {
	--theme-link-initial-color: var(--nm-naglowki);
	--theme-link-hover-color: var(--nm-naglowki);
	padding: 10px 16px;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 600;
}

#header [data-id="menu"] .sub-menu a:hover {
	background: var(--nm-powierzchnia-2);
}

#header [data-id="menu"] .sub-menu .current-menu-item > a {
	background: var(--nm-maslo);
	color: var(--nm-na-pastelu);
}

/* Podgląd koszyka po najechaniu na koszyk w nagłówku - zaokrąglona karta jak rozwijane menu, przyciski-pigułki. */
#header .ct-header-cart .ct-cart-content {
	--dropdown-background-color: var(--nm-powierzchnia);
	--theme-border-color: var(--nm-linia);
	min-width: 360px;
	padding: 18px 20px 20px;
	border: 1px solid var(--nm-linia);
	border-radius: 24px;
	background-color: var(--nm-powierzchnia);
	box-shadow: 0 16px 40px rgba(42, 28, 21, 0.16);
	color: var(--nm-tekst);
}

#header .ct-header-cart .ct-cart-content .woocommerce-mini-cart-item img {
	border-radius: 12px;
}

/* Podgląd świecy z kreatora (koszyk, podgląd koszyka) ma przezroczyste tło - dostaje jasny kafelek jak zdjęcia świec. */
.nmcc-preview-thumbnail {
	box-sizing: border-box;
	padding: 6%;
	background-color: var(--nm-powierzchnia-2);
	object-fit: contain;
}

#header .ct-header-cart .ct-cart-content .product-title {
	--theme-link-initial-color: var(--nm-naglowki);
	--theme-link-hover-color: var(--nm-braz);
	font-family: var(--nm-czcionka-naglowkow);
	font-size: 16px;
	font-weight: 700;
}

#header .ct-header-cart .ct-cart-content :is(.variation, .quantity) {
	color: var(--nm-tekst);
	font-size: 14px;
}

#header .ct-header-cart .ct-cart-content a.remove {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--nm-powierzchnia-2);
	color: var(--nm-braz);
}

#header .ct-header-cart .ct-cart-content a.remove:hover {
	background: var(--nm-roz);
	color: var(--nm-na-pastelu);
}

#header .ct-header-cart .ct-cart-content .woocommerce-mini-cart__total {
	color: var(--nm-naglowki);
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
}

#header .ct-header-cart .ct-cart-content .woocommerce-mini-cart__total .amount {
	font-family: var(--nm-czcionka-naglowkow);
	font-size: 18px;
	font-weight: 800;
}

#header .ct-header-cart .ct-cart-content .woocommerce-mini-cart__buttons {
	gap: 10px;
}

#header .ct-header-cart .ct-cart-content .woocommerce-mini-cart__buttons .button {
	min-height: 46px;
	padding-inline: 16px;
	white-space: nowrap;
	border: 2px solid var(--nm-braz);
	border-radius: 999px;
	background: transparent;
	color: var(--nm-naglowki);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

#header .ct-header-cart .ct-cart-content .woocommerce-mini-cart__buttons .button.checkout {
	background: var(--nm-braz);
	color: var(--nm-na-brazie);
}

#header .ct-header-cart .ct-cart-content .woocommerce-mini-cart__buttons .button:hover {
	border-color: var(--nm-braz-jasniejszy);
}

#header .ct-header-cart .ct-cart-content .woocommerce-mini-cart__buttons .button.checkout:hover {
	background: var(--nm-braz-jasniejszy);
}

/* Pusty koszyk w podglądzie: komunikat i „Wróć do sklepu” jako pigułka. */
#header .ct-header-cart .ct-cart-content .cart-empty {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nm-naglowki);
	font-size: 15px;
}

#header .ct-header-cart .ct-cart-content .cart-empty::before {
	display: none;
}

#header .ct-header-cart .ct-cart-content .return-to-shop .button {
	border-radius: 999px;
	background: var(--nm-braz);
	color: var(--nm-na-brazie);
	font-weight: 700;
	text-transform: none;
}

/* Konto, przełącznik i koszyk - okrągłe przyciski w jednym stylu. */
#header .ct-account-item,
#header .ct-cart-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--nm-linia);
	border-radius: 50%;
	background: var(--nm-powierzchnia);
	--theme-icon-color: var(--nm-naglowki);
	--theme-icon-hover-color: var(--nm-braz);
}

#header .ct-cart-item {
	border-color: var(--nm-braz);
	background: var(--nm-braz);
	--theme-icon-color: var(--nm-na-brazie);
	--theme-icon-hover-color: var(--nm-na-brazie);
}

#header .ct-cart-item .ct-dynamic-count-cart {
	background: var(--nm-maslo);
	color: var(--nm-na-pastelu);
}

#header [data-id="trigger"] {
	--theme-icon-color: var(--nm-naglowki);
	--theme-icon-hover-color: var(--nm-braz);
}

/* Menu na telefonie */
[data-header] #offcanvas .ct-panel-inner {
	background-color: var(--nm-tlo);
	--theme-icon-color: var(--nm-naglowki);
}

[data-header] #offcanvas .ct-toggle-close {
	--theme-icon-color: var(--nm-naglowki);
	--theme-icon-hover-color: var(--nm-braz);
}

[data-header] #offcanvas [data-id="mobile-menu"] {
	--theme-link-initial-color: var(--nm-naglowki);
	--theme-link-hover-color: var(--nm-braz);
	--theme-link-active-color: var(--nm-braz);
}

/* ——— Stopka: miętowa w jasnym wyglądzie, ciemna z miętowymi tytułami w ciemnym ——— */
[data-footer] .ct-footer {
	background-color: var(--nm-mieta);
	color: var(--nm-na-pastelu);
	--theme-text-color: var(--nm-na-pastelu);
	--theme-link-initial-color: var(--nm-na-pastelu);
	--theme-link-hover-color: var(--nm-braz);
}

[data-footer] .ct-footer [data-row] {
	background-color: transparent;
}

[data-footer] .ct-footer [data-row*="bottom"] > .ct-container {
	border-top: 1px solid rgba(42, 28, 21, 0.18);
}

/* Mniej pustego miejsca nad kolumnami i pod nimi, przed „Copyright” (Blocksy daje 50 px, na telefonie 80 px). */
[data-footer] .ct-footer [data-row="middle"] > .ct-container {
	--container-spacing: 28px;
}

@media (max-width: 999.98px) {
	[data-footer] .ct-footer [data-row="middle"] > .ct-container {
		--container-spacing: 40px;
	}
}

[data-footer] .ct-footer h5 {
	color: var(--nm-na-pastelu);
	font-size: 18px;
}

[data-footer] .ct-footer li {
	margin-bottom: 6px;
}

:root[data-wyglad="ciemny"] [data-footer] .ct-footer {
	background-color: var(--nm-powierzchnia-2);
	color: var(--nm-tekst);
	--theme-text-color: var(--nm-tekst);
	--theme-link-initial-color: var(--nm-tekst);
	--theme-link-hover-color: var(--nm-mieta);
}

:root[data-wyglad="ciemny"] [data-footer] .ct-footer h5 {
	color: var(--nm-mieta);
}

:root[data-wyglad="ciemny"] [data-footer] .ct-footer [data-row*="bottom"] > .ct-container {
	border-top-color: var(--nm-linia);
}

/* Przełącznik wyglądu w nagłówku */
.nm-przelacznik {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-inline: 4px;
	padding: 0;
	border: 1px solid var(--nm-linia);
	border-radius: 50%;
	background: var(--nm-powierzchnia);
	color: var(--nm-naglowki);
	position: relative;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
}

/* Podpowiedź pod przełącznikiem: co się stanie po kliknięciu. Tylko z myszką (na telefonie zostawałaby po dotknięciu). */
.nm-przelacznik__podpowiedz {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	z-index: 20;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--nm-braz);
	color: var(--nm-na-brazie);
	font-family: var(--nm-czcionka-tekstu);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	transform: translate(-50%, -4px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.nm-przelacznik__podpowiedz::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 50%;
	width: 8px;
	height: 8px;
	background: inherit;
	transform: translateX(-50%) rotate(45deg);
}

@media (hover: hover) {
	.nm-przelacznik:is(:hover, :focus-visible) .nm-przelacznik__podpowiedz {
		visibility: visible;
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

.nm-przelacznik:hover {
	border-color: var(--nm-braz);
}

.nm-przelacznik:focus-visible {
	outline: 2px solid var(--nm-braz);
	outline-offset: 2px;
}

.nm-przelacznik svg {
	width: 20px;
	height: 20px;
}

:root[data-wyglad="ciemny"] .nm-przelacznik__ksiezyc,
:root:not([data-wyglad="ciemny"]) .nm-przelacznik__slonce {
	display: none;
}