/* Sklep NONO Made (inc/sklep.php): nagłówek z zakładkami „Gotowe świece | Kreator świec”, filtry i pastelowe karty. */

/* ——— Nagłówek ——— */
.nm-sklep-naglowek {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin: 8px 0 32px;
}

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

.nm-sklep-naglowek h1 {
	margin: 0;
	color: var(--nm-naglowki);
	font-family: var(--nm-czcionka-naglowkow);
	font-size: clamp(40px, 6vw, 72px);
	font-weight: 800;
	line-height: 1.05;
}

.nm-sklep-naglowek__opis {
	max-width: 640px;
	margin: 0;
	color: var(--nm-tekst);
	font-size: 18px;
	line-height: 1.6;
}

/* Zakładki-pigułki: aktywna na masłowym tle, jak bieżąca strona w menu. */
.nm-sklep-zakladki {
	display: inline-flex;
	gap: 4px;
	margin-top: 6px;
	padding: 6px;
	border-radius: 999px;
	background: var(--nm-powierzchnia);
	box-shadow: 0 1px 2px rgba(42, 28, 21, 0.08);
}

.nm-sklep-zakladki a {
	padding: 10px 20px;
	border-radius: 999px;
	color: var(--nm-naglowki);
	font-weight: 700;
	text-decoration: none;
}

.nm-sklep-zakladki a:hover {
	background: var(--nm-powierzchnia-2);
	color: var(--nm-naglowki);
}

.nm-sklep-zakladki a[aria-current="page"] {
	background: var(--nm-maslo);
	color: var(--nm-na-pastelu);
}

/* ——— Karty produktów ——— */
.woocommerce ul.products {
	--nm-karta: var(--nm-mieta);
}

.woocommerce ul.products > li.product {
	padding: 14px 14px 20px;
	border-radius: 28px;
	background: var(--nm-karta);
	color: var(--nm-na-pastelu);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.woocommerce ul.products > li.product:nth-child(6n + 1) { --nm-karta: var(--nm-mieta); }
.woocommerce ul.products > li.product:nth-child(6n + 2) { --nm-karta: var(--nm-roz); }
.woocommerce ul.products > li.product:nth-child(6n + 3) { --nm-karta: var(--nm-maslo); }
.woocommerce ul.products > li.product:nth-child(6n + 4) { --nm-karta: var(--nm-blekit); }
.woocommerce ul.products > li.product:nth-child(6n + 5) { --nm-karta: var(--nm-liliowy); }
.woocommerce ul.products > li.product:nth-child(6n + 6) { --nm-karta: var(--nm-pomarancz); }

.woocommerce ul.products > li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(42, 28, 21, 0.14);
}

.woocommerce ul.products > li.product .ct-media-container,
.woocommerce ul.products > li.product img {
	border-radius: 20px;
}

.woocommerce ul.products > li.product .woocommerce-loop-product__title {
	color: var(--nm-na-pastelu);
	font-family: var(--nm-czcionka-naglowkow);
	font-size: 20px;
	font-weight: 800;
}

.woocommerce ul.products > li.product .price {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--nm-powierzchnia);
	color: var(--nm-naglowki);
	font-weight: 700;
}

.woocommerce ul.products > li.product .button {
	border-radius: 999px;
	background: var(--nm-braz);
	color: var(--nm-na-brazie);
	font-weight: 700;
}

.woocommerce ul.products > li.product .button:hover {
	background: var(--nm-braz-jasniejszy, var(--nm-braz));
	color: var(--nm-na-brazie);
}

/* ——— Układ: filtry po lewej, świece po prawej ——— */
.nm-sklep {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	align-items: start;
	gap: 32px;
}

.nm-sklep__lista {
	min-width: 0;
}

/* ——— Filtry ——— */
.nm-filtry {
	position: sticky;
	top: 110px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 24px;
	border-radius: 28px;
	background: var(--nm-powierzchnia);
	box-shadow: 0 1px 2px rgba(42, 28, 21, 0.08);
}

.nm-filtry[open] {
	display: flex;
}

.nm-filtry summary {
	display: none;
}

.nm-filtry__grupa {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nm-filtry__grupa + .nm-filtry__grupa {
	margin-top: 18px;
}

.nm-filtry__grupa h2 {
	margin: 0;
	color: var(--nm-naglowki);
	font-family: var(--nm-czcionka-naglowkow);
	font-size: 18px;
	font-weight: 800;
}

.nm-filtry__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nm-filtry__opcja {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid var(--nm-linia);
	border-radius: 999px;
	color: var(--nm-tekst);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease;
}

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

.nm-filtry__opcja small {
	opacity: 0.65;
	font-size: 12px;
}

.nm-filtry__opcja[aria-current="true"] {
	border-color: var(--nm-maslo);
	background: var(--nm-maslo);
	color: var(--nm-na-pastelu);
}

.nm-filtry__probka {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(42, 28, 21, 0.2);
}

.nm-filtry__cena {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.nm-filtry__cena label {
	display: flex;
	flex: 1 1 70px;
	align-items: center;
	gap: 6px;
	color: var(--nm-tekst);
	font-size: 14px;
}

.nm-filtry__cena input {
	width: 100%;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid var(--nm-linia);
	border-radius: 12px;
	background: var(--nm-tlo);
	color: var(--nm-tekst);
}

.nm-filtry__cena input::placeholder {
	color: #9a9591;
	opacity: 1;
}

.nm-filtry__zl {
	color: var(--nm-tekst);
	font-size: 14px;
}

.nm-filtry__cena button {
	flex: 1 0 100%;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--nm-braz);
	color: var(--nm-na-brazie);
	font-weight: 700;
	cursor: pointer;
}

/* ——— Pigułki z wybranymi filtrami ——— */
.nm-wybrane-filtry {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
}

.nm-wybrane-filtry__pigulka {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--nm-maslo);
	color: var(--nm-na-pastelu);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.nm-wybrane-filtry__pigulka:hover {
	color: var(--nm-na-pastelu);
	filter: brightness(0.96);
}

.nm-wybrane-filtry__wyczysc {
	color: var(--nm-braz);
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ——— Liczba wyników i sortowanie ——— */
.nm-sklep .woo-listing-top {
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.nm-sklep .woocommerce-result-count {
	color: var(--nm-tekst);
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
}

/* Cena w karcie: pigułka tylko na szerokość kwoty. */
.woocommerce ul.products > li.product .price {
	align-self: flex-start;
	width: fit-content;
}

/* ——— Nic nie pasuje do filtrów ——— */
.nm-brak-produktow {
	padding: 40px;
	border-radius: 28px;
	background: var(--nm-liliowy);
	color: var(--nm-na-pastelu);
	text-align: center;
}

.nm-brak-produktow h2 {
	margin: 0 0 10px;
	color: var(--nm-na-pastelu);
	font-family: var(--nm-czcionka-naglowkow);
	font-size: 32px;
	font-weight: 800;
}

.nm-brak-produktow p {
	max-width: 520px;
	margin: 0 auto 18px;
}

.nm-brak-produktow__przyciski {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.nm-brak-produktow__przyciski a {
	padding: 12px 22px;
	border: 2px solid var(--nm-na-pastelu);
	border-radius: 999px;
	color: var(--nm-na-pastelu);
	font-weight: 700;
	text-decoration: none;
}

.nm-brak-produktow__przyciski .nm-brak-produktow__kreator {
	border-color: var(--nm-braz);
	background: var(--nm-braz);
	color: var(--nm-na-brazie);
}

/* ——— Telefon i tablet: filtry pod przyciskiem „Filtry” ——— */
@media (max-width: 999px) {
	.nm-sklep {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.nm-filtry {
		position: static;
		display: block;
		padding: 0;
		background: transparent;
		box-shadow: none;
	}

	.nm-filtry summary {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 12px 22px;
		border-radius: 999px;
		background: var(--nm-braz);
		color: var(--nm-na-brazie);
		font-weight: 700;
		list-style: none;
		cursor: pointer;
	}

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

	.nm-filtry[open] summary {
		margin-bottom: 14px;
	}

	.nm-filtry[open] .nm-filtry__grupa {
		padding: 16px 20px;
		border-radius: 20px;
		background: var(--nm-powierzchnia);
	}

	.nm-filtry__grupa + .nm-filtry__grupa {
		margin-top: 10px;
	}
}

/* ——— Telefon: świece w dwóch kolumnach ——— */
@media (max-width: 689.98px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 14px !important;
	}

	.woocommerce ul.products > li.product {
		padding: 8px 8px 14px;
		border-radius: 20px;
	}

	.woocommerce ul.products > li.product .ct-media-container,
	.woocommerce ul.products > li.product img {
		border-radius: 14px;
	}

	.woocommerce ul.products > li.product .woocommerce-loop-product__title {
		font-size: 16px;
	}

	.woocommerce ul.products > li.product .price {
		padding: 3px 10px;
		font-size: 14px;
	}

	.woocommerce ul.products > li.product .button {
		padding: 8px 14px;
		font-size: 13px;
	}
}

/* ——— Naklejka „Nowość” (świece z ostatnich 30 dni) ——— */
.woocommerce ul.products > li.product {
	position: relative;
}

.nm-nowosc {
	position: absolute;
	z-index: 2;
	top: 22px;
	left: 22px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--nm-braz);
	color: var(--nm-na-brazie);
	font-size: 13px;
	font-weight: 700;
	rotate: -6deg;
}

/* ——— Zaproszenie do kreatora na końcu listy ——— */
.woocommerce ul.products > li.nm-karta-kreatora {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 12px;
	padding: 28px;
	background: var(--nm-braz);
	color: var(--nm-na-brazie);
}

.nm-karta-kreatora .nm-ikona {
	width: 56px;
	height: 56px;
	color: var(--nm-na-brazie);
}

.nm-karta-kreatora h2 {
	margin: 0;
	color: var(--nm-na-brazie);
	font-family: var(--nm-czcionka-naglowkow);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.15;
}

.nm-karta-kreatora p {
	margin: 0;
	color: var(--nm-na-brazie);
	line-height: 1.6;
}

.nm-karta-kreatora__przycisk {
	margin-top: 4px;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--nm-maslo);
	color: var(--nm-na-pastelu);
	font-weight: 700;
	text-decoration: none;
}

.nm-karta-kreatora__przycisk:hover {
	color: var(--nm-na-pastelu);
	filter: brightness(0.95);
}

@media (max-width: 689.98px) {
	.woocommerce ul.products > li.nm-karta-kreatora {
		grid-column: 1 / -1;
		padding: 22px;
	}

	.nm-nowosc {
		top: 14px;
		left: 14px;
		font-size: 12px;
	}
}

/* ——— Sortowanie: pigułki jak przy filtrach, wybrana na masłowym tle ——— */
.nm-sortowanie {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.nm-sortowanie__etykieta {
	flex: none;
	color: var(--nm-tekst);
	font-size: 14px;
	font-weight: 700;
}

.nm-sortowanie__opcje {
	display: flex;
	gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: var(--nm-powierzchnia);
	box-shadow: 0 1px 2px rgba(42, 28, 21, 0.08);
}

.nm-sortowanie__opcje a {
	flex: none;
	padding: 7px 14px;
	border-radius: 999px;
	color: var(--nm-naglowki);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.nm-sortowanie__opcje a:hover {
	background: var(--nm-powierzchnia-2);
	color: var(--nm-naglowki);
}

.nm-sortowanie__opcje a[aria-current="true"] {
	background: var(--nm-maslo);
	color: var(--nm-na-pastelu);
}

/* Na węższych ekranach pigułki przesuwa się palcem w bok. */
@media (max-width: 1199.98px) {
	.nm-sklep .woo-listing-top .woocommerce-result-count {
		flex: 1 0 100%;
	}

	.nm-sortowanie {
		max-width: 100%;
	}

	.nm-sortowanie__opcje {
		overflow-x: auto;
		scrollbar-width: none;
	}
}

/* ——— Pole ilości jako pigułka (strona świecy, koszyk) ———
   Obwódkę rysuje samo pole liczby, a Blocksy zaokrągla je (i przyciski +/-) zmienną z „!important”. */
main .quantity {
	--theme-form-field-border-radius: 999px;

	border-radius: 999px;
}

main .quantity input.qty {
	border: 1px solid var(--nm-linia);
	background: var(--nm-powierzchnia);
	color: var(--nm-naglowki);
}

/* ——— Karta z najważniejszymi punktami obok nagłówka (dokumenty, koszyk) - nonomade_karta_skrotu() ——— */
.nm-skrot {
	padding: 22px 26px;
	border-radius: 28px;
	box-shadow: 0 14px 36px rgba(42, 28, 21, 0.08);
	color: var(--nm-na-pastelu);
}

.nm-skrot__tytul {
	margin: 0 0 12px;
	font-family: var(--nm-czcionka-naglowkow);
	font-size: 20px;
	font-weight: 800;
}

.nm-skrot ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nm-skrot li {
	position: relative;
	padding-left: 34px;
	font-size: 15px;
	line-height: 1.5;
}

.nm-skrot li + li {
	margin-top: 9px;
}

/* Znaczek „✓” w brązowym kółku przed każdym punktem. */
.nm-skrot li::before {
	content: "✓";
	position: absolute;
	top: 1px;
	left: 0;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--nm-braz);
	color: var(--nm-na-brazie);
	font-size: 12px;
	font-weight: 700;
}

main .nm-skrot a {
	color: var(--nm-na-pastelu);
	text-decoration: none;
}

main .nm-skrot a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nm-skrot__uwaga {
	margin: 12px 0 0;
	font-size: 13px;
	opacity: 0.85;
}

/* ——— Dostawy i suma w koszyku i w podsumowaniu zamówienia ——— */
/* Nazwa dostawy w jednej kolumnie obok kółka wyboru - także gdy łamie się na telefonie. */
:is(.woocommerce-cart, .woocommerce-checkout) main #shipping_method li {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
}

:is(.woocommerce-cart, .woocommerce-checkout) main #shipping_method li > :not(input) {
	grid-column: 2;
}

/* Wtyczka InPost dokleja logo pod nazwą dostawy - nazwa już mówi, że to InPost. */
:is(.woocommerce-cart, .woocommerce-checkout) main #shipping_method :is(.easypack-shipping-method-logo, .easypack-weekend-shipping-method-logo, .easypack-custom-shipping-method-logo),
:is(.woocommerce-cart, .woocommerce-checkout) main #shipping_method .inpost_pl-shipping-method-meta-wrap:not(:has(#inpost_pl_delivery_terms)) {
	display: none;
}

/* Do VAT-u cała kwota w jednej linii, pod sumą. */
:is(.woocommerce-cart, .woocommerce-checkout) main .order-total .includes_tax {
	display: block;
	font-size: 13px;
	white-space: nowrap;
}

/* ——— Zapowiedź sklepu przed otwarciem (inc/zapowiedz-sklepu.php) ——— */
.nm-zapowiedz {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
	gap: 32px 56px;
	align-items: center;
	padding-block: clamp(40px, 7vw, 96px);
}

.nm-zapowiedz .nm-sklep-naglowek {
	margin: 0;
}

.nm-zapowiedz__przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.nm-zapowiedz__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-zapowiedz__przycisk--obrys {
	background: transparent;
	color: var(--nm-naglowki);
}

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

@media (max-width: 999.98px) {
	.nm-zapowiedz {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ——— Komunikaty WooCommerce w koszyku i podsumowaniu („Usunięto…”, „Koszyk zaktualizowany”, błędy zamówienia) na pastelach
   jak na koncie klienta - także te wstawiane bez przeładowania strony (WooCommerce dawał jasne tło, Blocksy jaskrawą czerwień) ——— */
:is(.woocommerce-cart, .woocommerce-checkout) main :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	margin: 0 0 16px;
	padding: 14px 20px;
	border: 0;
	border-radius: 20px;
	background: var(--nm-mieta);
	color: var(--nm-na-pastelu);
}

:is(.woocommerce-cart, .woocommerce-checkout) main .woocommerce-info {
	background: var(--nm-blekit);
}

/* Błędy to lista - punkty z kolorem karty, bez wcięć listy. */
:is(.woocommerce-cart, .woocommerce-checkout) main .woocommerce-error {
	background: var(--nm-roz);
	list-style: none;
}

:is(.woocommerce-cart, .woocommerce-checkout) main .woocommerce-error li {
	margin: 0;
	color: inherit;
}

/* Ikonka WooCommerce stała na tekście (wtyczka robi jej miejsce dużym wcięciem, którego karta nie ma). */
:is(.woocommerce-cart, .woocommerce-checkout) main :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
	display: none;
}

/* „Cofnij?” dostawał tło przycisku - w komunikacie to zwykły link. */
:is(.woocommerce-cart, .woocommerce-checkout) main :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nm-na-pastelu);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}