/* nosze — Playful Editorial. Layout/efekty spoza theme.json.
   Tokeny (kolory/typografia/spacing) żyją w theme.json; tu tylko to,
   czego presety nie ogarną: Bento Grid, sticky header, karty, mikrointerakcje. */

/* ---------- Layout globalny: brak poziomego scrolla + sticky footer ---------- */
/* Drawer mini-cartu WooCommerce w stanie ładowania renderuje się poza ekranem
   (position:fixed, left:100%) i tworzy poziomy scroll + białą przestrzeń.
   Ukrywamy go w tym stanie (nie powinien być widoczny przed otwarciem). */
.wc-block-components-drawer__screen-overlay.is-loading {
	display: none !important;
}
/* Krótkie strony (np. pusta kategoria) nie zostawiają białej przestrzeni pod stopką —
   main wypełnia widok do wysokości okna (≈ minus header+footer). Świadomie NIE robimy
   flex/grid/overflow na .wp-site-blocks, bo to zepsułoby position:sticky headera. */
.wp-site-blocks > main {
	min-height: calc(100vh - 200px - var(--wp-admin--admin-bar--height, 0px));
}

/* ---------- Header ---------- */
/* Sticky MUSI być na wrapperze template-part (<header>), bo jego rodzic to wysoki
   .wp-site-blocks. Gdyby sticky było na .nosze-header, jej rodzicem jest krótki
   <header> i nie miałaby się gdzie trzymać → natychmiast odjeżdża przy scrollu. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
}
.nosze-header {
	backdrop-filter: saturate(1.1) blur(8px);
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 8%, transparent);
}
/* koszyk + search jako duże tap-targety */
.nosze-header .wp-block-woocommerce-mini-cart__button { min-height: 44px; }

/* Lupa: sama czarna ikona — bez czarnego pilla/tła (odwrotnie niż domyślny .wp-element-button) */
.nosze-header .wp-block-search__button.wp-element-button {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	color: var(--wp--preset--color--ink) !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: .35rem .5rem !important;
	min-height: 44px;
	min-width: 44px;
}
.nosze-header .wp-block-search__button svg { fill: var(--wp--preset--color--ink); }
.nosze-header .wp-block-search__button.wp-element-button:hover { color: var(--wp--preset--color--ink-soft) !important; }
.nosze-header .wp-block-search__button:hover svg { fill: var(--wp--preset--color--ink-soft); }

/* Rozwinięty input wyszukiwarki — pill, brand, bez systemowego niebieskiego focusu */
.nosze-header .wp-block-search__input {
	min-height: 44px;
	border-radius: 999px !important;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) !important;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	padding: .5em 1.1em !important;
}
.nosze-header .wp-block-search__input:focus {
	outline: none !important;
	border-color: var(--wp--preset--color--ink) !important;
}
.nosze-header .wp-block-search .wp-block-search__inside-wrapper { border: 0; }

/* ---------- Hero ---------- */
/* Flex column + justify-content:center → treść wyśrodkowana w pionie sekcji.
   min-height robi z hero świadomy „pierwszy ekran" (wcześniej wysokość brała się
   przypadkiem z blobu wpadającego w flow — patrz fix specyficzności niżej). */
.nosze-hero {
	position: relative;
	overflow: clip;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(440px, 72svh, 720px);
}
/* Pill (etykieta) — inline-block WEWNĄTRZ blokowego paragrafu.
   Paragraf zostaje block-level → constrained-layout wyrównuje go do kolumny treści
   (jak nagłówek). Gdyby sam paragraf był inline-block, uciekałby na skrajną lewą. */
.nosze-pill {
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .8rem;
	padding: .45em 1em;
	border-radius: 999px;
	background: var(--wp--preset--color--pop-sky);
	color: var(--wp--preset--color--ink);
}
.nosze-hero__kicker { margin: 0; }

/* marker-highlight na słowie w nagłówku hero */
.nosze-mark {
	background: var(--wp--preset--color--pop-butter);
	padding: 0 .18em;
	border-radius: .28em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
/* dekoracyjna pastelowa plama w tle hero */
.nosze-hero__blob {
	position: absolute;
	inset-inline-end: -4%;
	inset-block-start: 50%;
	transform: translateY(-50%);
	inline-size: clamp(240px, 32vw, 460px);
	block-size: clamp(240px, 32vw, 460px);
	background: radial-gradient(circle at 30% 30%, var(--wp--preset--color--pop-blush), transparent 70%);
	filter: blur(8px);
	opacity: .65;
	pointer-events: none;
	z-index: 0;
}
/* z-index na treści, ale NIE na blobie: reguła `> *` miała tę samą specyficzność
   co `.nosze-hero__blob{position:absolute}` i będąc niżej w źródle nadpisywała ją na
   `relative` → blob wpadał w flow i spychał treść w dół. `:not(.nosze-hero__blob)`
   wyłącza blob z tej reguły, więc zostaje absolutnie pozycjonowany (poza flow). */
.nosze-hero > .wp-block-group__inner-container,
.nosze-hero > *:not(.nosze-hero__blob) { position: relative; z-index: 1; }

/* Cel skoku z hero CTA „Sprawdź dzisiejszą kolekcję" — offset spod sticky headera,
   żeby nagłówek sekcji nie chował się pod nim po kliknięciu kotwicy #swieze-dropy. */
#swieze-dropy { scroll-margin-top: clamp(80px, 12vh, 120px); }

/* Łagodne przewijanie do kotwic (m.in. hero CTA → #swieze-dropy) zamiast
   gwałtownego skoku. Wyłączone, gdy użytkownik prosi o ograniczenie ruchu. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* CTA w hero — wersaliki z delikatnym trackingiem (spójnie z pillami sekcji). */
.nosze-hero .wp-block-button__link {
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* Mobilny link „Bieżący drop" pod produktami — domyślnie ukryty (na desktop
   link żyje w nagłówku sekcji „Najnowsze projekty"). */
.nosze-droplink-mobile { display: none; }

@media (max-width: 600px) {
	/* „Najnowsze projekty": na mobile pokazujemy 6 z 9 załadowanych dropów. */
	#swieze-dropy li.wc-block-product:nth-child(n+7) { display: none; }
	/* Link „Bieżący drop" przenosimy z nagłówka sekcji pod produkty. */
	#swieze-dropy > .wp-block-group > p { display: none; }
	.nosze-droplink-mobile { display: block; }
	/* Hamburger zbędny — kategorie (Chłop/Dziołcha) są na stronie głównej;
	   ukrywamy całą nawigację w headerze na mobile. */
	.nosze-header .wp-block-navigation { display: none; }
}

/* ---------- Bento Grid ---------- */
.nosze-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(150px, auto);
	gap: clamp(0.85rem, 1.6vw, 1.4rem);
}
.nosze-bento__tile {
	border-radius: clamp(1rem, 1.6vw, 1.6rem);
	padding: clamp(1.25rem, 2.4vw, 2.25rem);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-block-size: 100%;
	transition: transform .25s ease, box-shadow .25s ease;
}
.nosze-bento__tile:has(a):hover,
.nosze-bento__tile.is-interactive:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
}
.nosze-bento__tile .wp-block-heading { margin: 0; }
.nosze-bento__tile--xl   { grid-column: span 2; grid-row: span 2; }
.nosze-bento__tile--wide { grid-column: span 2; }
.nosze-bento__tile--tall { grid-row: span 2; }
/* slot na przyszłe zdjęcie lifestyle (BACKLOG: auto-grafika lifestyle) */
.nosze-bento__tile--lifestyle {
	background:
		linear-gradient(135deg,
			color-mix(in srgb, var(--wp--preset--color--pop-sky) 70%, white),
			color-mix(in srgb, var(--wp--preset--color--pop-blush) 70%, white));
	background-size: cover;
	background-position: center;
}

@media (max-width: 900px) {
	.nosze-bento { grid-template-columns: repeat(2, 1fr); }
	.nosze-bento__tile--xl   { grid-column: span 2; grid-row: span 1; }
	.nosze-bento__tile--wide { grid-column: span 2; }
	.nosze-bento__tile--tall { grid-row: span 1; }
}
@media (max-width: 560px) {
	.nosze-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
	.nosze-bento__tile--xl,
	.nosze-bento__tile--wide,
	.nosze-bento__tile--tall { grid-column: span 1; grid-row: span 1; }
	/* Kafelki dopasowane do treści: wysokość = tekst (bez wymuszonych 150px),
	   tekst zwarty u góry zamiast rozrzucania w pionie → koniec z pustką w
	   krótkich hasłach. `>` bije block-generated justify-content (np. center). */
	.nosze-bento > .nosze-bento__tile {
		min-block-size: 0;
		justify-content: flex-start;
		align-items: flex-start;
		gap: .4rem;
		padding: clamp(1.15rem, 4.5vw, 1.6rem);
	}
}

/* ---------- Karty kategorii ---------- */
.nosze-cat {
	height: 100%; /* wypełnia kolumnę → oba boxy równe (etykieta Dziołchy nie rozwala układu) */
	border-radius: clamp(1.25rem, 2vw, 2rem);
	padding: clamp(2rem, 4vw, 3.5rem);
	position: relative;
	overflow: clip;
	transition: transform .25s ease, box-shadow .25s ease;
}
.nosze-cat:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 48px -26px color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent);
}
/* Cały kafelek kategorii klikalny — CTA „Sprawdź drop" rozciągnięty na całą
   powierzchnię (stretched link); klik gdziekolwiek w boxie → kategoria. */
.nosze-cat { cursor: pointer; }
.nosze-cat a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Tytuł w „Dzisiejszy hot take" jako link — kolor tekstu kafelka (nie akcent),
   bez podkreślenia; „»” sygnalizuje klikalność, podkreślenie na hover. */
.nosze-hot-take__link {
	color: inherit;
	text-decoration: none;
}
.nosze-hot-take__link:hover { text-decoration: underline; }
.nosze-cat__badge {
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .35em .9em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 88%, transparent);
	color: var(--wp--preset--color--base);
}

/* ---------- Produkty (Świeże dropy) — oddech + premium feel ---------- */
.wc-block-product-template .wc-block-grid__product,
.wp-block-woocommerce-product-template li {
	transition: transform .2s ease;
}
.wp-block-woocommerce-product-template img {
	border-radius: clamp(0.75rem, 1.2vw, 1.1rem);
}
.wp-block-woocommerce-product-template li:hover { transform: translateY(-3px); }

/* Tytuł produktu: body-font, średnio-pogrubiony, NIE display 800 (czytelny, nie krzyczy). */
.wp-block-woocommerce-product-template .wp-block-post-title,
.wp-block-woocommerce-product-template .wp-block-post-title a {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-decoration: none;
}
/* Cena: subtelna, podrzędna wobec tytułu (tytuł = body 600 ~1.06rem). */
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-price {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink-soft);
}

/* ---------- Archiwum / listing kategorii ---------- */
/* więcej oddechu między kartami w listingu */
.wp-block-woocommerce-product-template {
	gap: clamp(1.5rem, 2.6vw, 2.25rem);
}
/* pasek: licznik + sortowanie — spójne z resztą, body-font */
.wp-block-woocommerce-product-results-count,
.wp-block-woocommerce-catalog-sorting,
.wp-block-woocommerce-catalog-sorting label {
	font-family: var(--wp--preset--font-family--body);
	font-size: .875rem;
	color: var(--wp--preset--color--ink-soft);
}
.wp-block-woocommerce-catalog-sorting select {
	font-family: var(--wp--preset--font-family--body);
	border-radius: 999px;
	padding: .45em 2em .45em 1em;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent);
	background-color: var(--wp--preset--color--base);
}
/* paginacja — pigułkowy, spójny styl */
.wp-block-woocommerce-product-collection .wp-block-query-pagination {
	gap: .5rem;
}
.wp-block-woocommerce-product-collection .wp-block-query-pagination a,
.wp-block-woocommerce-product-collection .wp-block-query-pagination .current {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: .9rem;
}

/* Listing: 3 kolumny na desktop, 2 na tablecie, 1 na mobile.
   Scoped do archiwów/kategorii/wyszukiwarki — strona główna (4 kol.) i koszyk bez zmian. */
@media (min-width: 1000px) {
	.archive .wp-block-woocommerce-product-template,
	.tax-product_cat .wp-block-woocommerce-product-template,
	.search .wp-block-woocommerce-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}
@media (min-width: 601px) and (max-width: 999px) {
	.archive .wp-block-woocommerce-product-template,
	.tax-product_cat .wp-block-woocommerce-product-template,
	.search .wp-block-woocommerce-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* ---------- Spójność przycisków WooCommerce (single add-to-cart itp.) ---------- */
/* Domyślne przyciski Woo (oliwkowe) → nasz czarny pill, jak product-button w listingu. */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce button.single_add_to_cart_button,
.woocommerce .single_add_to_cart_button.button,
.wc-block-components-button.contained {
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--base) !important;
	border-radius: 999px !important;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: .01em;
	padding: 1rem 2rem;
	transition: background-color .2s ease;
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button.button:hover,
.wc-block-components-button.contained:hover {
	background-color: var(--wp--preset--color--ink-soft) !important;
}

/* ---------- Karta produktu (single) ---------- */
.woocommerce-breadcrumb,
.wp-block-woocommerce-breadcrumbs {
	font-family: var(--wp--preset--font-family--body);
	font-size: .85rem;
	color: var(--wp--preset--color--ink-soft);
}
/* galeria — zaokrąglenia, miniatury z oddechem */
.wp-block-woocommerce-product-image-gallery img,
.woocommerce-product-gallery__image img {
	border-radius: clamp(.85rem, 1.4vw, 1.4rem);
}
.wp-block-woocommerce-product-image-gallery .wc-block-components-product-image-gallery__thumbnails,
.flex-control-thumbs { gap: .6rem; }

/* cena na karcie — body-font 600, wyraźnie inna od tytułu (display 800 xx-large).
   Inny krój + waga + rozmiar = czytelne oddzielenie ceny od nazwy produktu. */
.nosze-product .wp-block-woocommerce-product-price,
.nosze-product .wp-block-woocommerce-product-price .woocommerce-Price-amount {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--wp--preset--color--ink);
}

/* warianty (Color/Size) — selecty na okrągło, on-brand */
.variations_form .variations th,
.variations_form .variations label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}
/* Fallback (bez JS swatchy): ostylowany select z WŁASNĄ strzałką (nie systemową) */
.variations_form select {
	font-family: var(--wp--preset--font-family--body);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 999px;
	padding: .6em 2.4em .6em 1.1em;
	min-height: 44px;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent);
	background-color: var(--wp--preset--color--base);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	cursor: pointer;
}
.variations .label,
.variations th.label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}

/* Swatche (pill-buttony) zamiast systemowych dropdownów — gdy JS aktywny.
   !important, bo CSS WooCommerce trzyma select mocniejszym selektorem. */
form.variations_form.nosze-has-swatches .variations select,
.nosze-has-swatches .variations td.value select { display: none !important; }
.nosze-swatches { display: flex; flex-wrap: wrap; gap: .5rem; margin: .35rem 0 .25rem; }
.nosze-swatch {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: .85rem;
	padding: .55em 1.15em;
	min-height: 42px;
	border-radius: 999px;
	cursor: pointer;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent);
	transition: transform .12s ease, border-color .15s ease, background-color .15s ease, color .15s ease;
}
.nosze-swatch:hover { border-color: var(--wp--preset--color--ink); transform: translateY(-1px); }
.nosze-swatch.is-active { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--ink); }
.nosze-swatch.is-disabled { opacity: .3; text-decoration: line-through; pointer-events: none; }

/* "Wyczyść" (reset_variations) — zbędne, ukryte */
.variations_form .reset_variations { display: none !important; }

/* Ilość na KARCIE produktu — zbędna (zmiana w koszyku); add-to-cart i tak doda 1 szt.
   !important, bo WooCommerce po wyborze wariantu wstawia inline display:block. */
.single-product form.cart .quantity { display: none !important; }
/* Opis wariantu z Gelato ("White – S – DTF...") — zbędny dla usera, ukryty. */
.single-product .woocommerce-variation-description { display: none !important; }
/* Ilość w KOSZYKU (blocki) — zostaje, na okrągło */
.wc-block-components-quantity-selector { border-radius: 999px; }

/* Galeria — miniatury jako grid (ten sam gap między nimi i nad nimi), tile do
   szerokości zdjęcia głównego. !important, bo CSS WooCommerce trzyma layout mocniej. */
.woocommerce-product-gallery .flex-control-thumbs {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: .6rem !important;
	margin-top: .6rem !important;
	padding: 0 !important;
	list-style: none !important;
}
.woocommerce-product-gallery .flex-control-thumbs li {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}
.woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	border-radius: .6rem;
}

/* sekcja zaufania */
.nosze-trust p { margin: 0; line-height: 1.45; }
.nosze-trust strong { font-family: var(--wp--preset--font-family--display); }

/* zakładki Opis / Informacje / Opinie */
.woocommerce-tabs ul.tabs li a,
.wp-block-woocommerce-product-details .wp-block-tabs__list button {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-decoration: none;
}

/* ---------- Cart / Checkout — lekkie dopasowanie do marki ---------- */
/* Zaokrąglenie pól (bez przebudowy — checkout ma zostać znajomy i budzić zaufanie). */
.wc-block-components-text-input input,
.wc-block-components-text-input .components-text-control__input,
.wp-block-woocommerce-checkout input[type="text"],
.wp-block-woocommerce-checkout input[type="email"],
.wp-block-woocommerce-checkout input[type="tel"],
.wc-block-components-combobox input,
.wc-block-components-address-form select {
	border-radius: 10px;
}
/* Nagłówki sekcji checkoutu — display-font, spójnie z resztą. */
.wc-block-components-checkout-step__title,
.wc-block-components-title {
	font-family: var(--wp--preset--font-family--display);
}

/* ---------- Header: wyrównanie ikon (konto/koszyk/search) ---------- */
.nosze-header__actions a,
.nosze-header__actions .wc-block-customer-account,
.nosze-header__actions .wc-block-mini-cart {
	display: inline-flex;
	align-items: center;
}
.nosze-header__actions .wc-block-customer-account__account-icon { min-height: 44px; }
/* Badge licznika koszyka — biała cyfra na ciemnym tle.
   Woo liczył kolor cyfry jako ~czarny (rgb 1,1,1) na czarnym badge → niewidoczna kropka. */
.wc-block-mini-cart__badge {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base) !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: .72rem;
	font-weight: 700;
}
/* Przyciski w stopce wysuwanego mini-cartu — za duże domyślnie (font 19px + padding 1rem 2rem
   z globalnego .contained → tekst łamał się na 2 linie, 96px wysokości). Skalujemy do drawera. */
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__footer .wc-block-mini-cart__footer-checkout,
.wc-block-mini-cart__footer .wc-block-components-button {
	font-size: .9rem !important;
	padding: .8rem 1.1rem !important;
	min-height: 48px;
	line-height: 1.2;
}

/* ================= AUDYT SPÓJNOŚCI — pozostałe powierzchnie ================= */

/* ---------- Notice'y (sukces / info / błąd) — klasyczne i blokowe ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
	border: 0 !important;
	border-radius: 14px !important;
	padding: 1rem 1.25rem !important;
	font-family: var(--wp--preset--font-family--body) !important;
	color: var(--wp--preset--color--ink) !important;
	box-shadow: none !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { color: var(--wp--preset--color--ink) !important; }
/* notice to status-alert (programowo dostaje focus dla a11y) — bez systemowej niebieskiej obwódki */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus,
.wc-block-components-notice-banner:focus { outline: none !important; }
.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	background: color-mix(in srgb, var(--wp--preset--color--pop-sage) 50%, white) !important;
}
.woocommerce-info,
.wc-block-components-notice-banner.is-info {
	background: color-mix(in srgb, var(--wp--preset--color--pop-sky) 50%, white) !important;
}
.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	background: color-mix(in srgb, var(--wp--preset--color--pop-blush) 60%, white) !important;
}

/* ---------- Przyciski drugorzędne (NIE .alt) → outline pill ---------- */
.woocommerce a.button:not(.alt):not(.single_add_to_cart_button),
.woocommerce button.button:not(.alt),
.woocommerce input.button:not(.alt),
a.added_to_cart,
.wc-block-components-button.outlined {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1.5px solid var(--wp--preset--color--ink);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	padding: .6em 1.4em;
	transition: background-color .15s ease, color .15s ease;
}
.woocommerce a.button:not(.alt):not(.single_add_to_cart_button):hover,
.woocommerce button.button:not(.alt):hover,
.woocommerce input.button:not(.alt):hover,
a.added_to_cart:hover,
.wc-block-components-button.outlined:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}
/* core wariant outline (404 itp.) — obwódka i tekst w atramencie */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

/* ---------- Globalne pola formularzy (login / rejestracja / konto / opinie) ---------- */
.woocommerce form .input-text,
.woocommerce-input-wrapper input,
.woocommerce form select,
.woocommerce #review_form input:not([type="submit"]),
.woocommerce #review_form textarea,
.comment-form input:not([type="submit"]),
.comment-form textarea {
	border-radius: 10px;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent);
	padding: .65em .9em;
	font-family: var(--wp--preset--font-family--body);
	background-color: var(--wp--preset--color--base);
}
.woocommerce form .input-text:focus,
.woocommerce-input-wrapper input:focus,
.comment-form input:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--ink);
}

/* ---------- Moje konto — nawigacja + nagłówki ---------- */
.woocommerce-account .woocommerce h2,
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
	font-family: var(--wp--preset--font-family--display);
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-decoration: none;
}
.woocommerce-MyAccount-navigation li.is-active a {
	text-decoration: underline;
	text-underline-offset: .25em;
}

/* ---------- Miniatury produktów w mini-cart / koszyku / podsumowaniu ---------- */
/* Były kanciaste (radius 0) — zaokrąglamy jak resztę. Radius na img + wrapperze (overflow). */
.wc-block-cart-item__image,
.wc-block-mini-cart__item .wc-block-components-product-image,
.wc-block-components-order-summary-item__image,
.wc-block-components-product-image {
	border-radius: 10px;
	overflow: hidden;
}
.wc-block-cart-item__image img,
.wc-block-mini-cart__item img,
.wc-block-components-order-summary-item__image img,
.wc-block-components-product-image img,
.woocommerce-cart-form .product-thumbnail img,
.cart_item .product-thumbnail img,
.woocommerce-checkout-review-order .product-thumbnail img {
	border-radius: 10px;
}

/* Opis wariantu z Gelato ("White – S – DTF...") w koszyku/mini-cart/podsumowaniu —
   zbędny i redundantny (Color/Size są osobno w .product-details). Ukryty, jak na karcie.
   Celowo tylko __description — atrybuty Color/Size (.product-details) zostają. */
.wc-block-components-product-metadata__description { display: none !important; }

/* ---------- Faza 5: go-live hardening ---------- */
/* CLS: obrazy produktów i galerii zachowują intrinsic aspect-ratio z atrybutów
   width/height (WooCommerce je emituje), więc przeglądarka rezerwuje miejsce
   zanim mockup się załaduje. height:auto blokuje przypadkowe nadpisanie wysokości. */
.wp-block-woocommerce-product-template img,
.wp-block-woocommerce-product-image-gallery img,
.woocommerce-product-gallery__image img {
	height: auto;
}

/* A11y: widoczny focus dla nawigacji klawiaturą (keyboard-only, nie myszą).
   Theme gdzieniegdzie ściąga systemowy outline na :focus — :focus-visible
   przywraca pierścień dla tabowania, bez psucia kliknięć myszą. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible,
.wc-block-components-button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink) !important;
	outline-offset: 2px !important;
	border-radius: 4px;
}

/* === T17 — Wyszukiwarka tematyczna real-time === */

.nosze-search {
	position: relative;
	display: inline-block;
}

.nosze-search__trigger {
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	color: var(--wp--preset--color--neutral-700, #333);
	transition: color 0.15s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.nosze-search__trigger:hover,
.nosze-search__trigger:focus-visible {
	color: var(--wp--preset--color--neutral-900, #000);
}
.nosze-search__trigger svg {
	display: block;
}

/* Desktop panel — inline dropdown przy ikonie */
.nosze-search__panel {
	position: absolute;
	top: 100%;
	right: 0;
	width: 360px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 12px;
	margin-top: 8px;
	z-index: 100;
	display: none;
}
.nosze-search__panel[data-open="true"] {
	display: block;
}

.nosze-search__mobile-header {
	display: none;
}

.nosze-search__input {
	width: 100%;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--ink, #1a1a1a) 18%, transparent);
	border-radius: 12px; /* spójne z .nosze-search__panel */
	padding: 10px 16px;
	font-size: 14px;
	font-family: inherit;
	margin-bottom: 12px;
	outline: none;
	box-sizing: border-box;
	background: transparent;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nosze-search__input:focus {
	border-color: var(--wp--preset--color--ink, #1a1a1a);
	/* Subtle focus ring zamiast skoku border-width — nie zmienia layout */
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--ink, #1a1a1a) 8%, transparent);
}

.nosze-search__dropdown {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 480px;
	overflow-y: auto;
}
.nosze-search__dropdown[hidden] {
	display: none;
}

.nosze-search__section-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--neutral-500, #888);
	padding: 8px 0 4px;
	font-weight: 600;
	margin: 0;
	list-style: none;
}

.nosze-search__dropdown li[role="option"] {
	margin: 0;
	padding: 0;
	list-style: none;
}

.suggestion {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	text-decoration: none;
	color: inherit;
	border-radius: 8px;
	transition: background-color 0.1s ease;
}
.suggestion:hover,
li[role="option"][aria-selected="true"] .suggestion {
	background-color: var(--wp--preset--color--pop-butter, #fff3c4);
}

.suggestion--tag {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}
.tag-label {
	font-size: 14px;
	font-weight: 500;
}
.tag-meta {
	font-size: 11px;
	color: var(--wp--preset--color--neutral-500, #888);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.suggestion--product img {
	width: 40px;
	height: 50px;
	object-fit: cover;
	border-radius: 4px;
	background: var(--wp--preset--color--neutral-100, #f0f0f0);
	flex-shrink: 0;
}
.product-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.product-title {
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.product-meta {
	font-size: 11px;
	color: var(--wp--preset--color--neutral-500, #888);
}

.nosze-search__loading,
.nosze-search__empty,
.nosze-search__error {
	padding: 12px 10px;
	font-size: 13px;
	color: var(--wp--preset--color--neutral-500, #888);
	text-align: center;
	list-style: none;
}
.nosze-search__error {
	color: var(--wp--preset--color--pop-coral, #cc4040);
}
.nosze-search__empty a {
	display: block;
	margin-top: 6px;
	color: var(--wp--preset--color--neutral-700, #333);
}

.nosze-search__see-all {
	border-top: 1px solid var(--wp--preset--color--neutral-100, #f0f0f0);
	margin-top: 8px;
	padding-top: 8px;
	list-style: none;
}
.nosze-search__see-all a {
	display: block;
	padding: 6px 10px;
	font-size: 12px;
	color: var(--wp--preset--color--neutral-700, #333);
	text-decoration: none;
	text-align: center;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

/* Mobile fullscreen overlay (≤600px) */
@media (max-width: 600px) {
	.nosze-search__panel[data-mobile-overlay="true"] {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		margin: 0;
		border-radius: 0;
		padding: 16px;
		z-index: 1000;
		overscroll-behavior: contain;
		overflow-y: auto;
	}
	.nosze-search__panel[data-mobile-overlay="true"] .nosze-search__mobile-header {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 12px;
	}
	.nosze-search__close {
		background: none;
		border: none;
		font-size: 24px;
		cursor: pointer;
		padding: 4px 8px;
		color: var(--wp--preset--color--neutral-700, #333);
		line-height: 1;
	}
}

/* Loading spinner — animated ring.
 * UWAGA: [hidden] reguła musi !important żeby pokonać display:flex
 * (user agent default [hidden]{display:none} przegrywa z explicit display rule).
 */
.nosze-search__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.nosze-search [hidden] {
	display: none !important;
}
.nosze-search__spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid var(--wp--preset--color--neutral-200, #ddd);
	border-top-color: var(--wp--preset--color--neutral-700, #333);
	border-radius: 50%;
	animation: nosze-search-spin 0.7s linear infinite;
}
@keyframes nosze-search-spin {
	to { transform: rotate(360deg); }
}

/* === T18 — Gift Finder === */

.nosze-gift-page {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin: 0 auto;
}

.nosze-gift {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.nosze-gift__header {
	text-align: center;
	margin-bottom: 16px;
}
.nosze-gift__title {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 800;
	margin: 0;
}
.nosze-gift__lead {
	color: var(--wp--preset--color--neutral-700, #555);
	font-size: 1.05rem;
	margin: 8px 0 0;
}

.nosze-gift__filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	align-items: end;
	border: none;
	padding: 24px;
	background: var(--wp--preset--color--neutral-50, #fafaf7);
	border-radius: 12px;
}
.nosze-gift__filter {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.nosze-gift__filter-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--neutral-500, #888);
	font-weight: 600;
}
.nosze-gift__select {
	width: 100%;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--ink, #1a1a1a) 18%, transparent);
	border-radius: 12px;
	padding: 10px 14px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
	cursor: pointer;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nosze-gift__select:focus {
	border-color: var(--wp--preset--color--ink, #1a1a1a);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--ink, #1a1a1a) 8%, transparent);
}
.nosze-gift__reset {
	background: transparent;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--ink, #1a1a1a) 18%, transparent);
	border-radius: 12px;
	padding: 10px 16px;
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.1s ease;
}
.nosze-gift__reset:hover {
	background: var(--wp--preset--color--neutral-100, #f0f0f0);
}

.nosze-gift__status {
	font-size: 13px;
	color: var(--wp--preset--color--neutral-700, #555);
	font-weight: 500;
}

.nosze-gift__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 24px;
}
.nosze-gift [hidden] { display: none !important; }

.gift-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gift-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
.gift-card__img {
	width: 100%;
	height: auto;
	aspect-ratio: 4/5;
	object-fit: cover;
	background: var(--wp--preset--color--neutral-100, #f0f0f0);
}
.gift-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 0;
}
.gift-card__title {
	font-size: 15px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.gift-card__meta {
	font-size: 12px;
	color: var(--wp--preset--color--neutral-500, #888);
}

.nosze-gift__empty {
	text-align: center;
	padding: 48px 16px;
	color: var(--wp--preset--color--neutral-700, #555);
}
.nosze-gift__empty button {
	margin-top: 16px;
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--ink, #1a1a1a);
	border-radius: 12px;
	padding: 10px 20px;
	cursor: pointer;
	font-family: inherit;
}

.nosze-gift__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 24px 0;
}
.nosze-gift__pagination button {
	background: transparent;
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--ink, #1a1a1a) 18%, transparent);
	border-radius: 12px;
	padding: 8px 16px;
	font-size: 13px;
	cursor: pointer;
}
.nosze-gift__pagination button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.nosze-gift__page-info {
	font-size: 13px;
	color: var(--wp--preset--color--neutral-700, #555);
}

@media (max-width: 600px) {
	.nosze-gift__filters {
		grid-template-columns: 1fr;
	}
	.nosze-gift__grid {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
}