/*
Theme Name: Wenaro
Theme URI:
Author: Wenaro
Author URI:
Description: Motyw sklepu internetowego Wenaro
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 5.7
Version: 0.1.63
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wenaro
Tags:
*/

/* ==========================================================================
   Wenaro — Design System v0.1.0
   Kolory, spacing, typografia, cienie, promienie oraz podstawowe style
   linków, przycisków i pól formularzy (background, color, border, padding,
   radius, font-size, bazowy outline) pochodzą wyłącznie z theme.json:
   --wp--preset--color--*
   --wp--preset--font-size--*
   --wp--preset--spacing--*
   --wp--preset--shadow--*
   --wp--preset--border-radius--*

   CSS poniżej obejmuje wyłącznie to, czego theme.json nie obsługuje:
   :focus-visible dla pól formularzy, min-height (touch target),
   resize dla textarea oraz niezbędne transition.
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
}

/* ---------- Przyciski ----------
   Kolor, tło, hover, radius, padding i focus-visible (primary/secondary)
   pochodzą z theme.json. CSS ogranicza się do wymiaru touch-friendly. */

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

/* Wariant secondary (is-style-outline): hover i focus-visible.
   Przeniesione z theme.json — schema 7.0 zgłasza fałszywe ostrzeżenia
   dla tych pseudo-stanów wewnątrz blocks["core/button"].variations.outline,
   mimo że Core faktycznie je obsługuje. */

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* ---------- Formularze ----------
   Background, color, border, padding, radius, font-size i bazowy outline
   (transparent, gotowy pod focus-visible) pochodzą z theme.json
   (elements.textInput / elements.select). CSS obejmuje tylko brakujące
   elementy: focus-visible, min-height, resize, transition. Zakres
   selektorów odpowiada dokładnie zakresowi WordPress textInput. */

textarea,
input:where([type=email], [type=number], [type=password], [type=search], [type=text], [type=tel], [type=url]) {
	min-height: 44px;
	width: 100%;
	transition: border-color 0.15s ease, outline-color 0.15s ease, box-shadow 0.15s ease;
}

select {
	min-height: 44px;
	width: 100%;
	transition: border-color 0.15s ease, outline-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
	min-height: 120px;
	resize: vertical;
}

textarea:focus-visible,
input:where([type=email], [type=number], [type=password], [type=search], [type=text], [type=tel], [type=url]):focus-visible,
select:focus-visible {
	border-color: var(--wp--preset--color--brand);
	outline-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px rgba(232, 93, 36, 0.15);
}

/* =========================================================
   Single Product — wenaro
   Style specyficzne dla templates/single-product.html.
   Wszystkie selektory są ograniczone przez .wenaro-single-product,
   żeby nie wyciekały do innych widoków WooCommerce (archiwum,
   koszyk, itd.), które mogą używać tych samych klas klasycznych
   (np. .woocommerce-product-gallery, .flex-control-thumbs, .stock).

   Kolory i promienie korzystają wyłącznie z presetów Design Systemu
   zdefiniowanych w theme.json (settings.color / settings.border.radius).
   Layout (max-width contentSize/wideSize) jest zdefiniowany globalnie
   w theme.json — nic tu nie nadpisujemy.

   Wzorzec wizualny/UX: sklep-wenaro.pl (obecny sklep Wenaro).
   Nie skopiowano żadnego kodu ze starej strony — patrz podsumowanie
   w odpowiedzi czatu, sekcja "co odtworzono / czego nie robimy".

   UWAGA: nie mam potwierdzonych nazwów slugów presetów spacing i
   pozostałych rozmiarów font-size (poza font-size--4xl, podanym
   wprost, ustawionym bezpośrednio jako atrybut bloku post-title).
   Te wartości zostały celowo pozostawione jako liczby, żeby nie
   zgadywać nieistniejących zmiennych.

   Zakres kolejnych rewizji tej sekcji: górna część strony (galeria +
   panel zakupowy + pasek zalet) — wizualne zbliżenie do starego
   sklep-wenaro.pl / TakeDrop, bez zmiany działania natywnej galerii
   WooCommerce (FlexSlider) ani formularza add-to-cart — oraz sekcja
   pełnego opisu produktu (".wenaro-product-description"), która
   renderuje bezpośrednio na stronie (bez accordiona) pole pełnego
   opisu AKTUALNEGO produktu przez natywny blok "wp:post-content".
   Reviews / Additional Information zostaną zaprojektowane osobno
   w przyszłej rewizji — na razie celowo nie mają tu żadnej
   dedykowanej architektury. */

/* ---------- Breadcrumb ---------- */

.wenaro-single-product .wenaro-breadcrumbs {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	margin-bottom: 8px;
}

.wenaro-single-product .wenaro-breadcrumbs a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wenaro-single-product .wenaro-breadcrumbs a:hover {
	color: currentColor;
	text-decoration-thickness: 2px;
}

/* ---------- Sekcja główna: galeria (~54%) + panel zakupowy (~46%) ----------
   Węższy odstęp między kolumnami niż wcześniej (40px zamiast 56px) —
   blok ma być bardziej zwarty, bez dużej pustej przestrzeni między
   galerią a panelem zakupowym. */

.wenaro-single-product .wenaro-product-main {
	align-items: flex-start;
}

.wenaro-single-product .wenaro-product-gallery-col {
	position: sticky;
	top: 24px;
}

/* Kompaktowy panel zakupowy — mniejsze odstępy niż w standardowej sekcji treści */
.wenaro-single-product .wenaro-buy-box > * {
	margin-top: 0;
	margin-bottom: 12px;
}

.wenaro-single-product .wenaro-buy-box > *:last-child {
	margin-bottom: 0;
}

/* Panel zakupowy jako lekka, jasna karta — subtelne tło, bardzo delikatny
   border, umiarkowany promień, hojny padding. Celowo BEZ dużego cienia —
   ma być zwarty i premium, nie "ciężka karta". */
.wenaro-single-product .wenaro-buy-box {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: 30px;
	box-sizing: border-box;
}

/* ---------- Galeria produktu (klasyczne markup WooCommerce,
   używane też wewnątrz bloku woocommerce/product-image-gallery) ----------
   Ramka wizualna (tło/border/radius/padding/proporcje) jest celowo
   nałożona na ".woocommerce-product-gallery__wrapper" — dokładnie ten
   sam element, który już wcześniej nosił tło i "overflow: hidden" w tym
   pliku (a strona działa poprawnie z FlexSliderem WooCommerce), więc
   rozszerzamy sprawdzony, bezpieczny selektor zamiast zmieniać, który
   element JS faktycznie kontroluje. Nie dotykamy "display"/"position"/
   żadnej właściwości wpływającej na sposób, w jaki FlexSlider oblicza
   szerokości/przesunięcia slajdów — tylko wymiary/wygląd ramki. */

/* Kontener zewnętrzny galerii (blok WooCommerce + klasyczny wrapper
   ".woocommerce-product-gallery" renderowany w jego wnętrzu) NIE ma
   dostawać stałej wysokości ani "overflow: hidden" — to properties, o
   które celowo dba WYŁĄCZNIE ".woocommerce-product-gallery__wrapper"
   niżej (ramka głównego zdjęcia). Bez tej reguły rząd miniatur
   ".flex-control-thumbs", który w realnym markupie WooCommerce jest
   rodzeństwem "__wrapper" (a nie jego dzieckiem), renderuje się POZA
   granicami kontenera i bywa ucinany od dołu, jeśli kontener ma stałą/
   zerową wysokość odziedziczoną z domyślnych stylów WooCommerce Blocks.
   "height: auto" + "overflow: visible" na tym poziomie pozwalają
   kontenerowi rosnąć na tyle, by pomieścić i główne zdjęcie, i cały
   rząd miniatur pod nim. */
.wenaro-single-product .wp-block-woocommerce-product-image-gallery,
.wenaro-single-product .woocommerce-product-gallery {
	height: auto;
	overflow: visible;
}

.wenaro-single-product .woocommerce-product-gallery__wrapper {
	aspect-ratio: 1 / 1;
	padding: 24px;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	overflow: hidden;
	box-sizing: border-box;
}

.wenaro-single-product .woocommerce-product-gallery img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Miniatury: jeden rząd pod głównym zdjęciem (bez zawijania — przy wielu
   zdjęciach pasek przewija się poziomo we własnym, ograniczonym
   kontenerze, strona jako całość nadal nie ma poziomego scrolla).
   Aktywna miniatura dostaje pomarańczowy border, pozostałe — subtelny,
   neutralny; hover to wyłącznie zmiana opacity/koloru obramowania, bez
   ciężkich animacji. */
.wenaro-single-product .flex-control-thumbs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: visible;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0 0 8px;
	list-style: none;
}

.wenaro-single-product .flex-control-thumbs li {
	flex: 0 0 auto;
	width: 76px;
	height: 76px;
}

.wenaro-single-product .flex-control-thumbs li img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
	box-sizing: border-box;
	padding: 5px;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}

.wenaro-single-product .flex-control-thumbs li img:hover {
	opacity: 1;
	border-color: color-mix(in srgb, var(--wp--preset--color--brand) 45%, var(--wp--preset--color--border));
}

.wenaro-single-product .flex-control-thumbs li img.flex-active {
	opacity: 1;
	border-color: var(--wp--preset--color--brand);
}

/* ---------- Tytuł (fontSize 4xl ustawiony jako atrybut bloku post-title,
   nadpisany tu jawnym rozmiarem — mocny, ale nie przesadnie wielki) ---------- */

.wenaro-single-product .wenaro-product-title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.18;
}

/* ---------- Ocena + liczba opinii (pierwszy element panelu — nad tytułem) ---------- */

.wenaro-single-product .wenaro-product-rating {
	font-size: 0.9rem;
}

.wenaro-single-product .wenaro-product-rating .wc-block-components-product-rating__reviews_count {
	color: var(--wp--preset--color--muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- Plakietka promocji ----------
   Nadpisuje domyślny, oliwkowy wygląd WooCommerce. Obsługuje oba możliwe
   markupy jednym spójnym stylem:
   - klasyczny "<span class="onsale">" (jeden, płaski element),
   - blokowy ".wp-block-woocommerce-product-sale-badge" (zewnętrzny
     wrapper renderowany przez blok woocommerce/product-sale-badge) +
     ".wc-block-components-product-sale-badge" (właściwa, widoczna
     "pigułka" zagnieżdżona wewnątrz tego wrappera).

   Specyficzność (klasyczny markup): rdzeń WooCommerce style'uje ten
   badge regułą ".woocommerce span.onsale" (2 klasy + 1 element =
   specyficzność 0-0-2-1). Sam ".wenaro-single-product .onsale"
   (2 klasy + 0 elementów = 0-0-2-0) przegrywa z tą regułą niezależnie
   od kolejności w arkuszu, dlatego dotychczasowy kolor się nie
   nadpisywał. Poprawka dodaje realny znacznik "span" (dokładnie taki,
   jaki generuje klasyczny szablon WooCommerce) oraz dodatkową klasę,
   podnosząc specyficzność do 0-0-3-1 — wyżej niż WooCommerce, bez
   potrzeby użycia !important. Dwa warianty selektora (z ".woocommerce"
   oraz z własną ".wenaro-product-gallery-col") pokrywają badge
   niezależnie od tego, czy klasyczny wrapper ".woocommerce" faktycznie
   występuje w danym markupie galerii.

   Wrapper blokowy dostaje WYŁĄCZNIE pozycjonowanie (bez własnego tła/
   paddingu), żeby nie zdublować pigułki wizualnie — faktyczny wygląd
   "chipa" ma zagnieżdżony ".wc-block-components-product-sale-badge".
   Pozycjonowany jest względem ".woocommerce-product-gallery" (domyślne
   "position: relative" z rdzenia WooCommerce) — dzięki temu plakietka
   "pływa" nad jasną, wyściełaną kartą zdjęcia, w jej lewym górnym rogu.

   Selektory ograniczone do .wenaro-single-product — poza tym szablonem
   zachowują domyślny styl WooCommerce (np. archiwum produktów, które
   ma własną, analogiczną regułę w sekcji "Shop / Product Catalog"). */

.wenaro-single-product .woocommerce span.onsale,
.wenaro-single-product .wenaro-product-gallery-col span.onsale,
.wenaro-single-product .wp-block-woocommerce-product-sale-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	z-index: 2;
	margin: 0;
	min-height: 0;
	min-width: 0;
}

.wenaro-single-product .woocommerce span.onsale,
.wenaro-single-product .wenaro-product-gallery-col span.onsale,
.wenaro-single-product .wc-block-components-product-sale-badge {
	display: inline-flex;
	align-items: center;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 4px 12px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--background);
	border-radius: var(--wp--preset--border-radius--full);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	text-transform: none;
}

/* ---------- Cena: jeden z najmocniejszych elementów panelu ----------
   Bez promocji: pojedyncza kwota, duża i mocna (ink). Z promocją: cena
   regularna mniejsza / muted / przekreślona, cena promocyjna wyraźnie
   większa, font-weight 800, kolor brand-dark — celowo bez czerwieni. */

.wenaro-single-product .wenaro-product-price .woocommerce-Price-amount {
	font-size: 2rem;
	font-weight: 800;
	color: var(--wp--preset--color--ink);
}

.wenaro-single-product .wenaro-product-price del {
	font-weight: 400;
	font-size: 1.125rem;
	margin-right: 0.6em;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.wenaro-single-product .wenaro-product-price del .woocommerce-Price-amount {
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.wenaro-single-product .wenaro-product-price ins {
	text-decoration: none;
	font-size: 2rem;
	font-weight: 800;
	color: var(--wp--preset--color--brand-dark);
}

/* Wyższa specyficzność niż ".wenaro-product-price .woocommerce-Price-amount"
   (ta reguła inaczej przebijała kolor/rozmiar ustawiony na <ins>, bo obie
   mają tę samą liczbę klas w selektorze — .woocommerce-Price-amount
   wygrywała przez kolejność w arkuszu). Cena promocyjna i jej kwota mają
   być duże i brand-dark. */
.wenaro-single-product .wenaro-product-price ins .woocommerce-Price-amount {
	font-size: 2rem;
	color: var(--wp--preset--color--brand-dark);
	font-weight: 800;
}

/* ---------- Architektura pod przyszłe funkcje: najniższa cena z 30 dni / rabaty ilościowe / info o wysyłce ----------
   Bloki są puste do czasu podpięcia realnej logiki (plugin / integracja / BaseLinker).
   Gdy pozostają puste, nie zajmują miejsca w layoucie. Gdy zostaną
   wypełnione (np. przez server-side render z przyszłego hooka), dostają
   spójny wygląd subtelnej karty zgodny z Design Systemem. */

.wenaro-single-product .wenaro-lowest-price-slot:empty,
.wenaro-single-product .wenaro-qty-discount-slot:empty,
.wenaro-single-product .wenaro-shipping-info-slot:empty {
	display: none;
}

.wenaro-single-product .wenaro-lowest-price-slot:not(:empty) {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}

.wenaro-single-product .wenaro-qty-discount-slot:not(:empty) {
	padding: 10px 12px;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--sm);
	font-size: 0.875rem;
}

.wenaro-single-product .wenaro-shipping-info-slot:not(:empty) {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

/* ---------- Krótki opis (product summary) ---------- */

.wenaro-single-product .wenaro-product-summary {
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.wenaro-single-product .wenaro-product-summary p {
	margin: 0;
}

/* ---------- Add to cart: ilość + duży CTA w kolorze brand ---------- */

.wenaro-single-product .wenaro-add-to-cart form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	width: 100%;
}

/* Natywny stan magazynowy (wc_get_stock_html) renderuje się automatycznie
   wewnątrz wrappera add-to-cart, PRZED (klasyczny markup) lub obok
   (markup blokowy) formularza/pola ilości — ale jako RODZEŃSTWO
   "form.cart", nie jego dziecko, więc selektor "form.cart > p.stock"
   niczego nie ukrywał (nie ma takiego dziecka). Żeby uniknąć duplikatu,
   ukrywamy go tutaj — jedynym widocznym wskaźnikiem stanu magazynowego
   ma zostać osobny blok woocommerce/product-stock-indicator
   (".wenaro-stock", inna klasa niż "p.stock" — nietknięty), umieszczony
   w szablonie POD Add to Cart (zgodnie z wymaganą kolejnością UX).
   Selektor celowo bierze dowolny zagnieżdżony "p.stock" wewnątrz
   ".wenaro-add-to-cart" (nie tylko bezpośrednie dziecko), żeby był
   odporny na dokładną głębokość zagnieżdżenia w realnym markupie bloku. */
.wenaro-single-product .wenaro-add-to-cart p.stock {
	display: none;
}

/* Markup klasyczny (form.cart / .quantity / .qty) */
.wenaro-single-product .wenaro-add-to-cart .quantity {
	display: inline-flex;
}

.wenaro-single-product .wenaro-add-to-cart input.qty {
	width: 76px;
	height: 54px;
	text-align: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--sm);
	font-size: 1rem;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--ink);
}

/* Markup interaktywny bloku (stepper) */
.wenaro-single-product .wenaro-add-to-cart .wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: center;
	height: 54px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--sm);
	overflow: hidden;
	background: var(--wp--preset--color--background);
}

.wenaro-single-product .wenaro-add-to-cart .wc-block-components-quantity-selector__input {
	border: none;
	height: 100%;
	width: 56px;
	text-align: center;
	background: transparent;
	color: var(--wp--preset--color--ink);
}

.wenaro-single-product .wenaro-add-to-cart .wc-block-components-quantity-selector__button {
	border: none;
	background: transparent;
	width: 36px;
	height: 100%;
	font-size: 1.1rem;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
}

.wenaro-single-product .wenaro-add-to-cart .wc-block-components-quantity-selector__button:hover {
	background: var(--wp--preset--color--surface);
}

/* Duży, wyraźny przycisk Add to cart w kolorze brand (bez czerwieni),
   wypełnia pozostałą szerokość rzędu obok pola ilości. */
.wenaro-single-product .wenaro-add-to-cart .single_add_to_cart_button,
.wenaro-single-product .wenaro-add-to-cart button[type="submit"] {
	flex: 1 1 220px;
	min-height: 54px;
	padding: 16px 32px;
	border: none;
	border-radius: 12px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--background);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.wenaro-single-product .wenaro-add-to-cart .single_add_to_cart_button:hover,
.wenaro-single-product .wenaro-add-to-cart button[type="submit"]:hover {
	background: var(--wp--preset--color--brand-dark);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.wenaro-single-product .wenaro-add-to-cart .single_add_to_cart_button:active,
.wenaro-single-product .wenaro-add-to-cart button[type="submit"]:active {
	transform: translateY(0);
}

.wenaro-single-product .wenaro-add-to-cart .single_add_to_cart_button.disabled,
.wenaro-single-product .wenaro-add-to-cart button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ---------- Stan magazynowy (jedyny widoczny wskaźnik — patrz uwaga wyżej) ----------
   Czytelny komunikat: zielona kropka + tekst (np. "12 w magazynie"),
   pokazany raz — natywny inline "p.stock" jest ukryty wyżej. */

.wenaro-single-product .wenaro-stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 0.875em;
}

.wenaro-single-product .wenaro-stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--wp--preset--border-radius--full);
	background: currentColor;
	flex: none;
}

.wenaro-single-product .wenaro-stock.wc-block-components-product-stock-indicator--in-stock {
	color: var(--wp--preset--color--success);
}

/* Brak osobnego tokenu "warning" w Design Systemie — używamy brand */
.wenaro-single-product .wenaro-stock.wc-block-components-product-stock-indicator--available-on-backorder {
	color: var(--wp--preset--color--brand);
}

.wenaro-single-product .wenaro-stock.wc-block-components-product-stock-indicator--out-of-stock {
	color: var(--wp--preset--color--danger);
}

/* ---------- SKU / marka / kategorie / tagi — zdecydowanie drugorzędnie ---------- */

.wenaro-single-product .wenaro-secondary-meta {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}

.wenaro-single-product .wenaro-secondary-meta a {
	color: inherit;
}

.wenaro-single-product .wenaro-secondary-meta .wp-block-group {
	row-gap: 4px;
	column-gap: 16px;
}

/* ---------- Trzy korzyści (Szybka wysyłka / Łatwy zwrot / Bezpieczny zakup) ----------
   Lekki, poziomy pasek (bez ciężkich kart): mała monochromatyczna ikona
   SVG w kolorze "brand" (pomarańczowy akcent, bez emoji) + krótki tekst
   w kolorze "ink", wyśrodkowane w każdej z 3 kolumn. */

.wenaro-single-product .wenaro-benefits {
	padding: 20px 0;
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
}

.wenaro-single-product .wenaro-benefits .wp-block-column {
	text-align: center;
}

.wenaro-single-product .wenaro-benefit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	column-gap: 8px;
	margin: 0;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink);
}

.wenaro-single-product .wenaro-benefit-icon {
	flex: none;
	color: var(--wp--preset--color--brand);
}

/* ---------- Pełny opis produktu (post_content) ----------
   Zastępuje dawny accordion "Product Details" — opis nie jest już
   schowany w zakładce, tylko renderuje się bezpośrednio na stronie
   jako pełna landing page, zaraz pod paskiem zalet. Blok
   "wp:post-content" wewnątrz wypisuje surowe pole pełnego opisu
   AKTUALNEGO produktu z WooCommerce — ten sam template obsługuje
   każdy produkt, więc żadna treść nie jest tu hardkodowana.

   Ten wrapper dostaje WYŁĄCZNIE spacing / szerokość kontenera.
   Cały wygląd renderowanej treści (np. HTML w standardzie
   "Wenaro Product Description v1" z klasami ".wenaro-desc-*",
   wklejony w polu opisu produktu przez BaseLinker/CSV) pochodzi
   wyłącznie z globalnej, nietkniętej w tej rewizji sekcji
   ".wenaro-desc-*" niżej w tym pliku — te selektory są już
   zaczepione o ".wenaro-single-product .wenaro-desc" (potomek,
   nie bezpośrednie dziecko), więc działają niezależnie od tego,
   w jakim wrapperze faktycznie wyląduje wyrenderowany opis. */

.wenaro-single-product .wenaro-product-description {
	width: 100%;
}

/* ---------- Dostępność: focus-visible w całym szablonie ---------- */

.wenaro-single-product a:focus-visible,
.wenaro-single-product button:focus-visible,
.wenaro-single-product input:focus-visible,
.wenaro-single-product [tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-dark);
	outline-offset: 2px;
	border-radius: var(--wp--preset--border-radius--sm);
}

/* ---------- Mobile: jedna kolumna, brak scrolla poziomego ----------
   Najpierw galeria, potem panel zakupowy (kolejność DOM już to
   zapewnia — wp:columns core zawija się natywnie poniżej progu).
   Sticky galeria wyłączone. CTA pełnej szerokości; ilość nad CTA,
   jeśli w rzędzie brakuje miejsca — zapewnia to już samo
   "flex-wrap: wrap" na "form.cart" (pole ilości jest w markupie przed
   przyciskiem, więc to ono ląduje w rzędzie wyżej przy zawijaniu). */

@media (max-width: 781px) {
	.wenaro-single-product .wenaro-product-gallery-col {
		position: static;
	}

	.wenaro-single-product .wenaro-buy-box {
		padding: 24px;
	}

	.wenaro-single-product .wenaro-add-to-cart .single_add_to_cart_button,
	.wenaro-single-product .wenaro-add-to-cart button[type="submit"] {
		flex-basis: 100%;
		min-height: 54px;
	}

	.wenaro-single-product .wenaro-benefits {
		text-align: center;
	}

	/* Standardowy 16px mobile gutter dla pozostałych podstawowych
	   elementów strony produktu, które leżą POZA opisem
	   (".wenaro-desc", zob. gutter wyżej w pliku) i POZA sekcją opinii
	   (".wenaro-reviews-section" — ta ma teraz WŁASNY, jeden wspólny
	   gutter zdefiniowany w "assets/css/wenaro-vr-frontend.css", żeby
	   nie rozbijać jednego systemu na dwa pliki; zob. komentarz tam).
	   Poniższe dwa elementy dotąd nie miały żadnego marginesu/paddingu
	   bocznego na tej szerokości:
	   - realny breadcrumb WooCommerce: blok "woocommerce/breadcrumbs"
	     (klasa theme'owa ".wenaro-breadcrumbs" na OPAKOWUJĄCYM divie)
	     renderuje wewnątrz natywny "<nav class="woocommerce-breadcrumb"
	     aria-label="Breadcrumb">" — to WŁAŚNIE ten "nav", a nie
	     ".wenaro-breadcrumbs", jest realnym elementem z tekstem, więc
	     gutter idzie na niego wprost;
	   - nagłówek "Informacje o producencie i bezpieczeństwie"
	     ([wenaro_product_compliance]) — WYŁĄCZNIE ten nagłówek, reszta
	     tej sekcji zostaje celowo nietknięta (realny markup wrappera
	     jeszcze nie dostarczony).
	   UWAGA: ".wenaro-reviews-heading", "#comments" i "#respond" miały
	   tu WCZEŚNIEJ (poprzednia runda) własne "padding-inline:16px" —
	   usunięte stąd celowo, bo od tej rundy gutter dostaje ich wspólny
	   rodzic ".wenaro-reviews-section"; zostawienie tamtych reguł
	   obok nowego guttera rodzica dałoby PODWÓJNY odstęp (16px+16px)
	   właśnie na tych trzech elementach. */
	.wenaro-single-product .woocommerce-breadcrumb,
	.wenaro-single-product .wenaro-pc-heading {
		padding-inline: 16px;
		box-sizing: border-box;
	}
}

/* =========================================================
   Product Content Patterns — wenaro
   Style dla reużywalnych patternów z /patterns/, wstawianych
   ręcznie przez redaktora do treści produktu (opis) w edytorze.
   Tylko klasy faktycznie potrzebne przez te 5 patternów:
   product-feature-split, product-feature-cards,
   product-specification, product-cta-banner, product-faq.
   Kolory/promienie z presetów theme.json. Odstępy — jak w reszcie
   pliku — jako liczby (brak potwierdzonych slugów spacing).
   ========================================================= */

/* ---------- product-feature-split.php ---------- */

.wenaro-feature-split {
	padding-top: 48px;
	padding-bottom: 48px;
}

.wenaro-feature-split__columns {
	gap: 32px 56px;
}

.wenaro-feature-split__media img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--preset--border-radius--lg);
}

.wenaro-feature-split__lead {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
	margin: 8px 0 16px;
}

.wenaro-feature-split__content .wp-block-list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding-left: 1.25em;
}

.wenaro-feature-split__content .wp-block-list li {
	color: var(--wp--preset--color--ink);
}

/* ---------- product-feature-cards.php ---------- */

.wenaro-cards-section {
	padding-top: 48px;
	padding-bottom: 48px;
}

.wenaro-cards-columns {
	gap: 24px;
}

.wenaro-card {
	height: 100%;
	padding: 24px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--lg);
}

.wenaro-card__media img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--wp--preset--color--background);
	border-radius: var(--wp--preset--border-radius--base);
	margin-bottom: 16px;
}

.wenaro-card__heading {
	margin: 0 0 8px;
	color: var(--wp--preset--color--ink);
}

.wenaro-card__text {
	margin: 0;
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}

/* ---------- product-specification.php ---------- */

.wenaro-spec-section {
	padding-top: 48px;
	padding-bottom: 48px;
}

.wenaro-spec-table table {
	width: 100%;
	border-collapse: collapse;
}

.wenaro-spec-table th,
.wenaro-spec-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
}

.wenaro-spec-table thead th {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.wenaro-spec-table tbody tr:nth-child(even) {
	background: var(--wp--preset--color--surface);
}

/* Tabela jest już 2-kolumnowa (parametr/wartość), więc rzadko wymaga
   przewijania — zabezpieczenie na wypadek bardzo długich wartości. */
@media (max-width: 600px) {
	.wenaro-spec-table {
		overflow-x: auto;
	}
}

/* ---------- product-cta-banner.php ---------- */

.wenaro-cta-banner {
	padding: 56px 40px;
	border-radius: var(--wp--preset--border-radius--lg);
}

.wenaro-cta-banner__heading {
	margin: 0 0 12px;
	color: inherit;
}

.wenaro-cta-banner__text {
	margin: 0 0 24px;
	color: inherit;
	opacity: 0.85;
}

.wenaro-cta-banner__button .wp-block-button__link {
	border-radius: var(--wp--preset--border-radius--lg);
	padding: 14px 32px;
	font-weight: 700;
}

.wenaro-cta-banner__button .wp-block-button__link:hover {
	opacity: 0.9;
}

/* ---------- product-faq.php ---------- */

.wenaro-faq {
	padding-top: 48px;
	padding-bottom: 48px;
}

.wenaro-faq__item {
	padding: 16px 4px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wenaro-faq__item summary {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.wenaro-faq__item[open] summary {
	margin-bottom: 8px;
}

.wenaro-faq__item p {
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}

/* ---------- Mobile: pełnoprawny układ, nie "ściśnięty desktop" ---------- */

@media (max-width: 781px) {
	.wenaro-feature-split,
	.wenaro-cards-section,
	.wenaro-spec-section,
	.wenaro-faq {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.wenaro-feature-split__lead {
		font-size: 1rem;
	}

	.wenaro-card {
		padding: 20px;
	}

	.wenaro-cta-banner {
		padding: 40px 24px;
		text-align: center;
	}

	.wenaro-spec-table th,
	.wenaro-spec-table td {
		padding: 10px 12px;
		font-size: 0.9375rem;
	}
}

/* =========================================================
   Wenaro Product Description v1
   Style dla opisów produktów generowanych przez zewnętrzny program
   (kanał WooCommerce, treść zapisywana w BaseLinkerze i wysyłana jako
   gotowy HTML opisu produktu — bez wsparcia Gutenberga/bloków).

   Zasada nadrzędna: opis NIE zawiera inline styles (style="...") —
   cały wygląd jest sterowany wyłącznie stąd, przez klasy z prefiksem
   "wenaro-desc-" (zob. docs/woocommerce-description-standard.md).

   Wszystkie reguły są ograniczone przez ".wenaro-single-product .wenaro-desc",
   żeby ten system klas nie wyciekał poza opis produktu i nie kolidował
   z resztą Single Product ani z patternami edytora (Product Content
   Patterns — wenaro, wyżej w tym pliku). Ta sekcja nie modyfikuje
   żadnych istniejących reguł Single Product.

   Wzorzec wizualny: referencyjny HTML TakeDrop (struktura/rytm
   landing-page: duże zdjęcia, naprzemienne sekcje 50/50, pomarańczowe
   akcenty, checklisty, jasne karty, ciemne bannery wideo/CTA, czytelna
   specyfikacja techniczna, galerie, ostrzeżenia, rozbudowane FAQ) —
   BEZ kopiowania inline styles ani markupu ze strony referencyjnej.
   Cały wygląd pozostaje sterowany wyłącznie klasami "wenaro-desc-*".

   Kolory/promienie/rozmiary — wyłącznie presety z theme.json, poza
   promieniami i rozmiarami czcionek podanymi tu wprost jako liczby
   (te same zastrzeżenie co niżej — brak potwierdzonych slugów spacing
   i font-size poza font-size--4xl używanym w Single Product).
   ========================================================= */

/* ---------- Baza: kontener opisu + domyślna typografia ----------
   Opis ma czytać się jak osobna, profesjonalna landing page: ograniczona
   szerokość, wyśrodkowana, z hojnym rytmem pionowym między sekcjami. */

.wenaro-single-product .wenaro-desc {
	max-width: 1200px;
	margin-inline: auto;
	color: var(--wp--preset--color--ink);
	line-height: 1.65;
}

/* Rytm pionowy między sekcjami najwyższego poziomu — jedno miejsce
   zamiast powtarzania marginesów w każdym komponencie. */
.wenaro-single-product .wenaro-desc > * + * {
	margin-top: 64px;
}

.wenaro-single-product .wenaro-desc h2 {
	font-size: 1.75rem;
	line-height: 1.2;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin: 0 0 16px;
}

.wenaro-single-product .wenaro-desc h3 {
	font-size: 1.25rem;
	line-height: 1.25;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin: 0 0 8px;
}

.wenaro-single-product .wenaro-desc p {
	margin: 0 0 16px;
}

.wenaro-single-product .wenaro-desc p:last-child {
	margin-bottom: 0;
}

.wenaro-single-product .wenaro-desc a {
	color: var(--wp--preset--color--brand-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wenaro-single-product .wenaro-desc a:hover {
	color: var(--wp--preset--color--brand);
}

.wenaro-single-product .wenaro-desc img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Wyróżniony fragment tekstu (pomarańczowy) — uniwersalny, używany
   wewnątrz tytułu intro oraz nagłówków ".wenaro-desc-content". */
.wenaro-single-product .wenaro-desc-highlight {
	color: var(--wp--preset--color--brand);
}

/* ---------- wenaro-desc-intro: wprowadzenie do opisu ----------
   Wyśrodkowany "hero" opisu — odpowiednik H1 z referencji TakeDrop,
   odwzorowany jako H2 (strona produktu ma już swój właściwy H1).
   Tytuł wyraźnie większy/mocniejszy niż zwykłe nagłówki sekcji. */

.wenaro-single-product .wenaro-desc-intro {
	max-width: 860px;
	margin-inline: auto;
	text-align: center;
}

.wenaro-single-product .wenaro-desc-intro .wenaro-desc-title {
	margin: 0 0 12px;
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

.wenaro-single-product .wenaro-desc-subtitle {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 1.125rem;
	line-height: 1.6;
}

/* ---------- wenaro-desc-section: zwykła sekcja tekstowa ---------- */

.wenaro-single-product .wenaro-desc-section ul,
.wenaro-single-product .wenaro-desc-section ol {
	margin: 0 0 16px;
	padding-left: 1.25em;
}

.wenaro-single-product .wenaro-desc-section li {
	margin-bottom: 4px;
}

/* ---------- wenaro-desc-split: naprzemienna sekcja obraz + tekst ---------- */

.wenaro-single-product .wenaro-desc-split {
	display: flex;
	align-items: center;
	gap: 40px;
}

.wenaro-single-product .wenaro-desc-split--reverse {
	flex-direction: row-reverse;
}

.wenaro-single-product .wenaro-desc-split > .wenaro-desc-media,
.wenaro-single-product .wenaro-desc-split > .wenaro-desc-content {
	flex: 1 1 50%;
	min-width: 0;
}

/* ---------- wenaro-desc-media: obraz (w split, cards, samodzielnie) ----------
   Naturalne proporcje (bez wymuszonego aspect-ratio) — zdjęcie produktowe
   nigdy nie jest kadrowane/deformowane w sekcjach split. */

.wenaro-single-product .wenaro-desc-media {
	margin: 0;
}

.wenaro-single-product .wenaro-desc-media img {
	width: 100%;
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
}

.wenaro-single-product .wenaro-desc-media figcaption {
	margin-top: 8px;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
	text-align: center;
}

/* ---------- wenaro-desc-content: kolumna tekstowa (w split) ----------
   Nagłówki wyraźnie mniejsze niż tytuł intro, ale mocne (700) — mieszczą
   się w połowie szerokości sekcji split bez przytłaczania układu. */

.wenaro-single-product .wenaro-desc-content h2,
.wenaro-single-product .wenaro-desc-content h3 {
	margin-top: 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.wenaro-single-product .wenaro-desc-content ul,
.wenaro-single-product .wenaro-desc-content ol {
	margin: 0;
	padding-left: 1.25em;
}

/* Poprawka wyrównania (kontrola przy okazji mobile gutter): reguła
   ".wenaro-desc-list" niżej w tym pliku ustawia "padding:0" (zamiast
   domyślnego wcięcia listy), ale ma NIŻSZĄ specyficzność
   (".wenaro-single-product .wenaro-desc-list" = 2 klasy) niż reguła
   powyżej (".wenaro-single-product .wenaro-desc-content ul" = 2 klasy
   + tag = wyżej), więc to WYŻSZA reguła wygrywała i realnie
   doklejała 1.25em (20px) "padding-left" do ".wenaro-desc-list" —
   przez co checklista (i jej znacznik "✓") zaczynała się ~20px dalej
   w prawo niż "h2"/"p"/"h3" w tym samym ".wenaro-desc-content"
   (zmierzone: 0px vs 20px). To jedyny konflikt wyrównania znaleziony
   w tym wrapperze — h2/h3/p nie mają własnego marginesu/paddingu z
   lewej. Podbicie specyficzności tu (3 klasy) przywraca zamierzone
   "padding-left:0" bez zmiany wyglądu samej listy (checkmark +
   wcięcie tekstu w "li" zostają bez zmian). */
.wenaro-single-product .wenaro-desc-content .wenaro-desc-list {
	padding-left: 0;
}

/* Mobile gutter dla całego opisu produktu: PRZENIESIONE na wspólnego
   rodzica ".wenaro-desc" (patrz mobile media query niżej w tej samej
   sekcji, przy regule ".wenaro-desc > * + *"). Poprzednia wersja tej
   poprawki dokładała "padding-inline:16px" bezpośrednio tu, na
   ".wenaro-desc-content" — usunięte stąd celowo, żeby nie było
   podwójnego gutteru (16px rodzica + 16px dziecka = 32px), skoro
   ".wenaro-desc" i tak kaskaduje ten sam odstęp do wszystkich swoich
   dzieci, w tym do ".wenaro-desc-content". */

/* ---------- wenaro-desc-lead: akapit wprowadzający ---------- */

.wenaro-single-product .wenaro-desc-lead {
	font-size: 1.05rem;
	color: var(--wp--preset--color--muted);
}

/* ---------- wenaro-desc-list: lista cech/zalet ----------
   Zamiast kropki — pomarańczowy znacznik "check", bliższy referencji
   TakeDrop niż neutralny punktor. Ważne fragmenty tekstu mogą używać
   natywnego <strong> (bez dodatkowej klasy). */

.wenaro-single-product .wenaro-desc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.wenaro-single-product .wenaro-desc-list li {
	position: relative;
	padding-left: 26px;
	margin: 0;
}

.wenaro-single-product .wenaro-desc-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--brand);
	font-weight: 700;
	line-height: inherit;
}

/* ---------- wenaro-desc-cards: siatka kart ----------
   Domyślnie 2 kolumny na desktopie (typowy przypadek: dwie karty
   korzyści, np. "Maksymalne bezpieczeństwo" / "Wybitna
   energooszczędność"); przy 3–4 kartach siatka elastycznie dokłada
   kolejne kolumny, zawsze zwijając się do jednej na mobile. */

.wenaro-single-product .wenaro-desc-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
}

/* ---------- wenaro-desc-card: pojedyncza karta ----------
   Jasne tło, cienki border, umiarkowany promień — celowo bez cienia. */

.wenaro-single-product .wenaro-desc-card {
	padding: 24px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
}

.wenaro-single-product .wenaro-desc-card .wenaro-desc-media {
	margin-bottom: 16px;
}

.wenaro-single-product .wenaro-desc-card .wenaro-desc-media img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.wenaro-single-product .wenaro-desc-card h3 {
	margin: 0 0 8px;
}

.wenaro-single-product .wenaro-desc-card p {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

/* ---------- wenaro-desc-spec: karta specyfikacji technicznej ----------
   Osobna jasna karta (tło "surface", cienki border, promień, hojny
   padding) — nie tylko naga tabela. Opcjonalny nagłówek wewnątrz karty
   (".wenaro-desc-spec-title") dostaje pomarańczową linię pod spodem.
   Tabela celowo bez ciężkiej siatki wszystkich komórek — tylko cienkie
   poziome separatory; nazwa parametru po lewej (muted/semi-bold),
   wartość po prawej (ink/bold). */

.wenaro-single-product .wenaro-desc-spec {
	padding: 26px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
}

.wenaro-single-product .wenaro-desc-spec-title {
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);
	font-size: 1.125rem;
	font-weight: 700;
}

.wenaro-single-product .wenaro-desc-spec table {
	width: 100%;
	border-collapse: collapse;
}

.wenaro-single-product .wenaro-desc-spec th,
.wenaro-single-product .wenaro-desc-spec td {
	padding: 12px 4px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
	vertical-align: top;
}

.wenaro-single-product .wenaro-desc-spec tr:last-child th,
.wenaro-single-product .wenaro-desc-spec tr:last-child td {
	border-bottom: none;
}

.wenaro-single-product .wenaro-desc-spec th {
	width: 44%;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}

.wenaro-single-product .wenaro-desc-spec td {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

/* ---------- wenaro-desc-gallery: siatka zdjęć ----------
   Naturalne proporcje (bez wymuszonego aspect-ratio/object-fit) — jak w
   ".wenaro-desc-media", żeby nie deformować grafiki produktowej. Przy
   dokładnie dwóch zdjęciach naturalnie tworzy się układ 2 w rzędzie. */

.wenaro-single-product .wenaro-desc-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.wenaro-single-product .wenaro-desc-gallery figure {
	margin: 0;
}

.wenaro-single-product .wenaro-desc-gallery img {
	width: 100%;
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
}

/* ---------- wenaro-desc-callout: dymek ostrzegawczy/informacyjny ----------
   Bardzo jasne, ciepłe tło + pomarańczowa kreska po lewej (bez pełnego
   obramowania dookoła) — subtelny promień, kompaktowy padding. */

.wenaro-single-product .wenaro-desc-callout {
	padding: 14px 20px;
	background: color-mix(in srgb, var(--wp--preset--color--brand) 6%, var(--wp--preset--color--background));
	border-left: 4px solid var(--wp--preset--color--brand);
	border-radius: 6px;
}

.wenaro-single-product .wenaro-desc-callout p:last-child {
	margin-bottom: 0;
}

.wenaro-single-product .wenaro-desc-callout--warning {
	background: color-mix(in srgb, var(--wp--preset--color--danger) 8%, var(--wp--preset--color--background));
	border-left-color: var(--wp--preset--color--danger);
}

/* ---------- wenaro-desc-cta: ciemny baner wezwania do działania ----------
   Nagłówek dostaje pomarańczowy akcent (zamiast białego) — reszta
   tekstu zostaje jasna na ciemnym tle "ink". Subtelny cień odrywa baner
   od tła strony. */

.wenaro-single-product .wenaro-desc-cta {
	padding: 48px 40px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--background);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	text-align: center;
}

.wenaro-single-product .wenaro-desc-cta h2,
.wenaro-single-product .wenaro-desc-cta h3,
.wenaro-single-product .wenaro-desc-cta p {
	color: inherit;
}

.wenaro-single-product .wenaro-desc-cta h2 {
	color: var(--wp--preset--color--brand);
}

.wenaro-single-product .wenaro-desc-cta p {
	opacity: 0.85;
}

.wenaro-single-product .wenaro-desc-cta a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	padding: 14px 32px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--background);
	border-radius: var(--wp--preset--border-radius--lg);
	font-weight: 700;
	text-decoration: none;
}

.wenaro-single-product .wenaro-desc-cta a:hover {
	background: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--background);
}

/* ---------- wenaro-desc-video: ciemny baner z linkiem do filmu YouTube ----------
   Świadomie niezależna kopia stylu "ciemnego banera" (a nie alias do
   wenaro-desc-cta) — v1 nie osadza iframe, tylko przycisk-link
   otwierany w nowej karcie. Ma zostać niezmienna niezależnie od
   przyszłych zmian w wenaro-desc-cta. Ten sam pomarańczowy akcent na
   nagłówku i subtelny cień co w wenaro-desc-cta, dla spójności obu
   ciemnych bannerów. */

.wenaro-single-product .wenaro-desc-video {
	padding: 48px 40px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--background);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	text-align: center;
}

.wenaro-single-product .wenaro-desc-video h2,
.wenaro-single-product .wenaro-desc-video h3,
.wenaro-single-product .wenaro-desc-video p {
	color: inherit;
}

.wenaro-single-product .wenaro-desc-video h2 {
	color: var(--wp--preset--color--brand);
}

.wenaro-single-product .wenaro-desc-video p {
	opacity: 0.85;
}

.wenaro-single-product .wenaro-desc-video a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
	padding: 14px 32px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--background);
	border-radius: var(--wp--preset--border-radius--lg);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.12s ease;
}

.wenaro-single-product .wenaro-desc-video a:hover {
	background: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--background);
}

.wenaro-single-product .wenaro-desc-video a:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* ---------- wenaro-desc-faq: pytania i odpowiedzi (natywny <details>) ----------
   Wyraźna, samodzielna sekcja jak w referencji TakeDrop: jasne tło,
   subtelny border, promień, hojny padding, wyśrodkowany H2. Pytania
   pozostają natywnym <details>/<summary> — interaktywne bez JS.
   Pomarańczowy akcent na natywnym znaczniku rozwijania (::marker) i przy
   hoverze pytania. */

.wenaro-single-product .wenaro-desc-faq {
	padding: 30px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
}

.wenaro-single-product .wenaro-desc-faq h2 {
	margin: 0 0 24px;
	text-align: center;
}

.wenaro-single-product .wenaro-desc-faq details {
	padding: 16px 4px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wenaro-single-product .wenaro-desc-faq details:first-of-type {
	border-top: 1px solid var(--wp--preset--color--border);
}

.wenaro-single-product .wenaro-desc-faq summary {
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: color 0.12s ease;
}

.wenaro-single-product .wenaro-desc-faq summary::marker {
	color: var(--wp--preset--color--brand);
}

.wenaro-single-product .wenaro-desc-faq summary:hover {
	color: var(--wp--preset--color--brand-dark);
}

.wenaro-single-product .wenaro-desc-faq details[open] summary {
	margin-bottom: 8px;
}

.wenaro-single-product .wenaro-desc-faq p:last-child {
	margin-bottom: 0;
}

/* ---------- Dostępność: focus-visible dla linków/przycisków w opisie ---------- */

.wenaro-single-product .wenaro-desc a:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-dark);
	outline-offset: 2px;
	border-radius: var(--wp--preset--border-radius--sm);
}

/* ---------- Mobile: wszystko w jedną kolumnę ----------
   Obraz zawsze przed tekstem w splitach (już zapewnia kolejność w
   markupie — patrz docs/woocommerce-description-standard.md), mniejsze
   paddingi, galerie i karty w jednej kolumnie, tabela specyfikacji nigdy
   nie rozsadza szerokości ekranu, CTA pełnej szerokości. */

@media (max-width: 781px) {
	/* Jedyne źródło mobilnego gutteru dla całego opisu produktu.
	   ".wenaro-desc" jest wspólnym rodzicem KAŻDEGO elementu opisu
	   (".wenaro-desc-content", "-subtitle", "-callout", "-section",
	   "-split", "-media", "-gallery", listy, karty, spec, CTA, wideo,
	   FAQ), więc "padding-inline" tutaj zawęża wspólny kontener i
	   automatycznie kaskaduje 16px odstępu do WSZYSTKICH dzieci —
	   bez dokładania osobnych marginesów/paddingów do każdego z nich
	   z osobna i bez ryzyka podwójnego gutteru. Obrazy w
	   ".wenaro-desc-media img" / ".wenaro-desc-gallery img" mają
	   "width:100%" liczone względem TEGO zawężonego kontenera, więc
	   też poprawnie chowają się 16px od krawędzi ekranu — bez zmiany
	   proporcji/object-fit/border-radius/zachowania na desktopie.
	   ".wenaro-desc-callout" (i "--warning") zachowuje swój WŁASNY,
	   niezmieniony padding wewnętrzny (14px 20px na desktopie, 12px
	   16px na mobile, patrz niżej) — to osobny, WEWNĘTRZNY odstęp
	   dymka, nie mylić z tym zewnętrznym gutterem kontenera. */
	.wenaro-single-product .wenaro-desc {
		padding-inline: 16px;
		box-sizing: border-box;
	}

	.wenaro-single-product .wenaro-desc > * + * {
		margin-top: 40px;
	}

	.wenaro-single-product .wenaro-desc-intro .wenaro-desc-title {
		font-size: 1.625rem;
	}

	.wenaro-single-product .wenaro-desc-split,
	.wenaro-single-product .wenaro-desc-split--reverse {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	.wenaro-single-product .wenaro-desc-cards {
		grid-template-columns: 1fr;
	}

	.wenaro-single-product .wenaro-desc-spec {
		padding: 20px;
		overflow-x: auto;
	}

	.wenaro-single-product .wenaro-desc-gallery {
		grid-template-columns: 1fr;
	}

	.wenaro-single-product .wenaro-desc-callout {
		padding: 12px 16px;
	}

	.wenaro-single-product .wenaro-desc-cta {
		padding: 32px 24px;
	}

	.wenaro-single-product .wenaro-desc-cta a {
		width: 100%;
	}

	.wenaro-single-product .wenaro-desc-video {
		padding: 32px 24px;
	}

	.wenaro-single-product .wenaro-desc-video a {
		width: 100%;
	}

	.wenaro-single-product .wenaro-desc-faq {
		padding: 24px 20px;
	}
}
/* =========================================================
   Shop / Product Catalog — wenaro
   Style dla templates/archive-product.html (główny katalog / Sklep +
   archiwa kategorii). Katalog oparty o natywne bloki WooCommerce:
   woocommerce/breadcrumbs, core/query-title, core/term-description,
   woocommerce/product-results-count, woocommerce/catalog-sorting oraz
   woocommerce/product-collection (zsynchronizowany z bieżącym
   zapytaniem — "inherit": true). Markup kart i siatki pochodzi z
   rzeczywistych, natywnych klas WooCommerce Blocks — nie duplikujemy
   tego, co blok już renderuje. Brak własnego loopa PHP, brak
   hardkodowanych produktów/kategorii, brak JS.

   Architektura strony (od góry):
   ".wenaro-breadcrumbs" → ".wenaro-shop-header" (H1 archiwum + opis
   kategorii) → store-notices → ".wenaro-shop-layout" (dwie kolumny:
   ".wenaro-shop-filters" | ".wenaro-shop-content", w środku pasek
   narzędzi ".wenaro-shop-toolbar" i siatka produktów).

   ".wenaro-shop-filters" to na razie PUSTY kontener — architektura pod
   przyszłe filtry (kategoria / cena / marka / dostępność / atrybuty),
   bez własnej logiki PHP i bez eksperymentalnych bloków WooCommerce
   Product Filters. Dopóki jest pusty, ":empty" chowa go całkowicie i
   siatka produktów zajmuje pełną szerokość — więc nic się wizualnie
   nie zmienia, dopóki ktoś faktycznie nie wypełni go realnymi filtrami
   (blokiem lub przyszłym hookiem). Wtedy, bez dalszych zmian w tym
   pliku, automatycznie pojawi się kolumna 240–280px obok produktów.

   Wszystkie reguły są ograniczone przez ".wenaro-shop", żeby nie
   wyciekały do Single Product, opisów produktów ani patternów
   (żadna z istniejących sekcji w tym pliku nie została zmieniona).

   Kolory/promienie — presety z theme.json tam, gdzie są potwierdzone;
   promień karty produktu ustawiony jawnie w px (patrz niżej), bo
   specyfikacja wymaga konkretnego zakresu 10–14px, a nazwane presety
   promienia nie mają potwierdzonej wartości w theme.json.
   ========================================================= */

/* ---------- Rytm pionowy: breadcrumb / header / notices / layout ---------- */

.wenaro-shop > * + * {
	margin-top: 24px;
}

.wenaro-shop .wp-block-woocommerce-product-collection {
	margin-top: 32px;
}

/* ---------- Breadcrumb (ten sam język wizualny co Single Product) ---------- */

.wenaro-shop .wenaro-breadcrumbs {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}

.wenaro-shop .wenaro-breadcrumbs a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wenaro-shop .wenaro-breadcrumbs a:hover {
	color: currentColor;
	text-decoration-thickness: 2px;
}

/* ---------- Nagłówek archiwum: H1 + opis kategorii ----------
   Wyraźna hierarchia i dużo białej przestrzeni: duży, ale niezbyt
   ciężki H1 (dynamiczny tytuł archiwum — kategoria/sklep, natywny
   "core/query-title"), krótka pomarańczowa kreska pod nim jako jedyny
   akcent koloru, i muted opis kategorii pod spodem (natywny
   "core/term-description" — jeśli kategoria nie ma opisu, blok po
   prostu nic nie renderuje, więc nie trzeba nic dodatkowo chować). */

.wenaro-shop-header {
	padding: 48px 0 40px;
}

.wenaro-shop-header .wp-block-query-title {
	position: relative;
	margin: 0 0 20px;
	padding-bottom: 20px;
	color: var(--wp--preset--color--ink);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.15;
}

.wenaro-shop-header .wp-block-query-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--brand);
}

.wenaro-shop-header .wp-block-term-description {
	max-width: 640px;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	line-height: 1.6;
}

/* ---------- Dwie kolumny: filtry (puste, patrz komentarz wyżej) | treść ----------
   "display: flex", wyrównanie do góry ("verticalAlignment": "top") i
   odstęp 32px między kolumnami pochodzą z natywnego atrybutu "layout"/
   "style.spacing.blockGap" bloku ".wenaro-shop-layout" w
   templates/archive-product.html (ten sam wzorzec co przy
   ".wenaro-product-main" w Single Product) — nie duplikujemy tego tutaj.
   Pusty ".wenaro-shop-filters" dostaje "display: none" przez ":empty",
   więc dopóki nie ma w nim żadnych realnych filtrów, ".wenaro-shop-content"
   jest jedynym elementem flex i naturalnie zajmuje 100% szerokości. */

.wenaro-shop-filters {
	flex: 0 0 260px;
	max-width: 280px;
}

.wenaro-shop-filters:empty {
	display: none;
}

.wenaro-shop-content {
	flex: 1 1 0%;
	min-width: 0;
}

/* ---------- Pasek nad produktami: liczba wyników (lewo) + sortowanie (prawo) ---------- */

.wenaro-shop-toolbar {
	padding: 12px 16px;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
	border-radius: 10px 10px 0 0;
}

.wenaro-shop-toolbar .wc-block-product-results-count {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}

.wenaro-shop-toolbar .wc-block-catalog-sorting {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.wenaro-shop-toolbar .wc-block-catalog-sorting select {
	width: auto;
	min-height: 40px;
}

/* ---------- Siatka: 4 kolumny na desktopie (atrybut bloku), 2 na tablecie, 1 na mobile ----------
   Kolumna "flex" (natywny typ Product Collection) już samodzielnie
   przechodzi do 1 kolumny poniżej 600px (patrz wc-block-product-template
   SCSS: brak reguły szerokości poniżej tego breakpointu = domyślne
   100% szerokości) — tego celowo nie duplikujemy, dzięki czemu nie ma
   ryzyka poziomego scrolla. Brakuje natomiast pośredniego kroku na
   tablecie (natywnie skacze z 1 kolumny prosto do 4), więc dodajemy
   tylko tę jedną, brakującą regułę. */

@media (min-width: 600px) and (max-width: 900px) {
	.wenaro-shop .wc-block-product-template.is-flex-container.columns-4 > li {
		width: calc(50% - 0.625em);
	}
}

/* ---------- Karta produktu ---------- */

.wenaro-shop .wenaro-product-card {
	position: relative;
	height: 100%;
	padding: 16px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.wenaro-shop .wenaro-product-card:hover {
	border-color: var(--wp--preset--color--muted);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

/* Jednolite, duże pole zdjęcia — stały kwadrat, tło pod przezroczystymi
   PNG-ami, z paddingiem, żeby zdjęcie (object-fit: contain) nie stykało
   się z krawędzią */
.wenaro-shop .wenaro-product-card .wc-block-components-product-image {
	position: relative;
	aspect-ratio: 1 / 1;
	padding: 12px;
	background: var(--wp--preset--color--background);
	border-radius: var(--wp--preset--border-radius--base);
	overflow: hidden;
}

.wenaro-shop .wenaro-product-card .wc-block-components-product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Plakietka promocji — pigułka w kolorze brand, w rogu zdjęcia */
.wenaro-shop .wenaro-product-card .wp-block-woocommerce-product-sale-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	margin: 0;
}

.wenaro-shop .wenaro-product-card .wc-block-components-product-sale-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--background);
	border-radius: var(--wp--preset--border-radius--full);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.4;
}

/* Tytuł — czytelny, wizualnie ograniczony do 3 linii, żeby karty w rzędzie
   nie "skakały" wysokością przy różnych długościach nazw produktów */
.wenaro-shop .wenaro-product-card .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.wenaro-shop .wenaro-product-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wenaro-shop .wenaro-product-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brand-dark);
}

/* Cena — regularna subtelna, promocyjna mocna w brand-dark (ten sam
   bezpieczny wzorzec specyficzności co w Single Product: reguła na
   ".woocommerce-Price-amount" sama w sobie nie może przebić koloru
   ustawionego na <ins>, więc dodajemy jawny, bardziej specyficzny
   selektor "ins .woocommerce-Price-amount"). */

.wenaro-shop .wenaro-product-card .woocommerce-Price-amount {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

/* POPRAWKA (zadanie "Karty produktów + prezentacja cen — Homepage i
   Katalog"): decyzja biznesowa/compliance — na kartach POZA stroną
   pojedynczego produktu pokazujemy WYŁĄCZNIE aktualną cenę sprzedaży,
   bez przekreślonej ceny regularnej. Pełne informacje o promocji/
   Omnibus (w tym przekreślona cena regularna) zostają na Single
   Product — tam ta sama para "del"/".woocommerce-Price-amount" (patrz
   ".wenaro-single-product .wenaro-product-price del..." wyżej w tym
   pliku) pozostaje CAŁKOWICIE nietknięta, bo ta reguła jest ograniczona
   wyłącznie do ".wenaro-shop .wenaro-product-card" (karty katalogu).
   "display: none" (nie "visibility: hidden") celowo — element ma zero
   zajmowanej przestrzeni, żeby nie zostawić pustego odstępu tam, gdzie
   wcześniej była przekreślona cena. Sama zawartość "<del>" (cena
   regularna z "wc_format_sale_price()") jest nietknięta w HTML/PHP —
   to wyłącznie ukrycie prezentacji w tym jednym kontekście, mechanizm
   cen/promocji/Omnibus działa dalej bez zmian. */
.wenaro-shop .wenaro-product-card del {
	display: none;
}

.wenaro-shop .wenaro-product-card ins {
	text-decoration: none;
	font-weight: 800;
	color: var(--wp--preset--color--brand-dark);
}

.wenaro-shop .wenaro-product-card ins .woocommerce-Price-amount {
	color: var(--wp--preset--color--brand-dark);
	font-weight: 800;
}

/* Wenaro Price History — ta sama decyzja jak wyżej dla "<del>": na
   kartach katalogu (poza Single Product) nie pokazujemy komunikatu
   "Najniższa cena z 30 dni / od rozpoczęcia sprzedaży". Klasa
   ".wenaro-ph-lowest-price" jest dokładana przez plugin do wyniku
   filtra "woocommerce_get_price_html" (patrz
   "class-wenaro-ph-frontend.php::filter_listing_price_html()") —
   WYŁĄCZNIE poza stroną pojedynczego produktu, czyli dokładnie tu, w
   katalogu. Sam plugin/mechanizm (baza danych, historia cen, shortcode
   ".wenaro-lowest-price-slot" na Single Product) pozostaje całkowicie
   nietknięty — to wyłącznie ukrycie jego prezentacji w tym jednym
   kontekście, zgodnie ze specyfikacją. "display: none" — zero
   pozostawionej pustej przestrzeni. Poniższa reguła nadpisuje istniejące
   dostrojenia tej klasy na mobile (patrz media query niżej — ustawiały
   tylko szerokość/margines/line-height elementu, który teraz i tak nie
   jest renderowany — nieszkodliwe, celowo nietknięte). */
.wenaro-shop .wenaro-product-card .wenaro-ph-lowest-price {
	display: none;
}

/* Add to Cart — przycisk na dole karty (wypychany przez margin-top: auto,
   ponieważ karta jest kolumnowym flexem bez justifyContent: center —
   zawartość zaczyna się od góry) */
.wenaro-shop .wenaro-product-card .wc-block-components-product-button {
	margin-top: auto;
	padding-top: 4px;
}

.wenaro-shop .wenaro-product-card .wc-block-components-product-button__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 40px;
	padding: 10px 16px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--background);
	border: none;
	border-radius: var(--wp--preset--border-radius--base);
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.wenaro-shop .wenaro-product-card .wc-block-components-product-button__button:hover {
	background: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--background);
}

/* ---------- Empty state: brak produktów ----------
   Natywny blok "woocommerce/product-collection-no-results" — bez
   żadnych przykładowych/hardkodowanych produktów. Estetyczna, jasna
   karta zamiast gołego tekstu, spójna z resztą katalogu. */

.wenaro-shop .wp-block-woocommerce-product-collection-no-results {
	padding: 48px 24px;
	text-align: center;
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
}

.wenaro-shop .wp-block-woocommerce-product-collection-no-results p {
	margin: 0;
	font-size: 1rem;
}

/* ---------- Dostępność: focus-visible w całym katalogu ---------- */

.wenaro-shop a:focus-visible,
.wenaro-shop button:focus-visible,
.wenaro-shop select:focus-visible,
.wenaro-shop [tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-dark);
	outline-offset: 2px;
	border-radius: var(--wp--preset--border-radius--sm);
}

/* ---------- Tablet / Mobile ----------
   Poniżej 900px kolumna filtrów (gdy w przyszłości przestanie być
   pusta) i treść przechodzą jedna pod drugą — filtry NAD produktami,
   zgodnie z wymaganiem — bo w markupie ".wenaro-shop-filters" jest
   pierwszym dzieckiem ".wenaro-shop-layout". Poniżej 600px siatka
   produktów jest już natywnie jednokolumnowa (patrz uwaga wyżej), więc
   tu tylko drobne poprawki odstępów/paska narzędzi. */

@media (max-width: 899px) {
	.wenaro-shop-layout {
		flex-direction: column;
	}

	.wenaro-shop-filters {
		flex-basis: auto;
		max-width: none;
		width: 100%;
	}
}

@media (max-width: 600px) {
	/* ---------- Mobile gutters ----------
	   ".wenaro-shop" to zewnętrzny, ograniczony ("constrained") kontener
	   całej strony katalogu (patrz templates/archive-product.html) — jego
	   "wide"/domyślne dzieci (breadcrumb, nagłówek "Sklep", pasek narzędzi,
	   siatka produktów) są centrowane WEWNĄTRZ jego pola treści, więc
	   padding dodany bezpośrednio tutaj staje się jednym, wspólnym 16px
	   odstępem od krawędzi ekranu dla WSZYSTKICH z nich naraz — bez
	   potrzeby osobnych reguł na każdy z nich. Sprawdzone: żaden z tych
	   elementów (breadcrumb, ".wenaro-shop-header", ".wenaro-shop-layout",
	   ".wenaro-shop-toolbar", siatka produktów) nie ma własnego,
	   dodatkowego poziomego paddingu na poziomie strony, więc nie ma
	   ryzyka podwójnego odstępu 32px — jedyny istniejący padding poziomy
	   w tej sekcji (".wenaro-shop-toolbar { padding: 12px 16px; }")
	   to wewnętrzny odstęp samego paska/"pigułki" z tłem, niezależny od
	   zewnętrznego guttera strony. */
	.wenaro-shop {
		padding-left: 16px;
		padding-right: 16px;
	}

	.wenaro-shop-header {
		padding: 32px 0 28px;
	}

	.wenaro-shop-header .wp-block-query-title {
		font-size: 1.875rem;
	}

	.wenaro-shop-toolbar {
		flex-wrap: wrap;
		row-gap: 8px;
	}

	/* ---------- Katalog mobile: DOKŁADNIE 1 karta w rzędzie (wymuszone) ----------
	   Poprzednie założenie — że natywny blok Product Collection sam z
	   siebie przechodzi do 1 kolumny poniżej 600px — okazało się błędne
	   w praktyce: na ekranach ok. 375–390px nadal renderowały się 2 karty
	   w rzędzie. Atrybut bloku "displayLayout":{"columns":4,
	   "shrinkColumns":true} (patrz templates/archive-product.html, plik
	   NIEZMIENIANY w tej poprawce) steruje liczbą kolumn własną, natywną
	   logiką WooCommerce Blocks, z własną specyficznością/kolejnością
	   ładowania, której sam ".wenaro-product-card" (dziecko "li", a nie
	   samo "li") nie był w stanie przebić.

	   Poniższa reguła celuje bezpośrednio w prawdziwy markup bloku —
	   ".wc-block-product-template.is-flex-container" i jego BEZPOŚREDNIE
	   dzieci "li" (nie w ".wenaro-product-card" wewnątrz nich) — i
	   wymusza dokładnie 1 kolumnę niezależnie od tego, jaką
	   szerokość/flex-basis/margines ustawia natywny styl WooCommerce na
	   tym samym elemencie. Stąd "!important": świadomie użyty WYŁĄCZNIE
	   w tym jednym, ograniczonym do ".wenaro-shop" przypadku i wyłącznie
	   poniżej 600px — nigdzie indziej w tym pliku. Zerowanie marginesów
	   jest konieczne, żeby przy szerokości 100% nie zostawić resztki
	   poziomego marginesu z formuły kolumnowej WooCommerce (ryzyko
	   poziomego przewijania strony). Tablet (2 kolumny, 600–900px) i
	   desktop (4 kolumny, reguła bazowa bloku) zostają nietknięte —
	   ta reguła działa wyłącznie poniżej 600px.

	   Dodatkowe zabezpieczenie: gdyby natywny styl WooCommerce dla tego
	   samego elementu realizował układ kolumn mechanizmem CSS Grid (a nie
	   flexboksem, mimo nazwy klasy "is-flex-container"), samo nadpisanie
	   width/flex-basis na dzieciach "li" NIC by nie dało — liczbę kolumn
	   grida ustala WYŁĄCZNIE "grid-template-columns" na RODZICU. Dlatego
	   poniżej najpierw wymuszamy na rodzicu jawny "display: flex", co
	   samo w sobie dezaktywuje ewentualny kontekst grid (przeglądarka
	   wtedy ignoruje grid-template-columns), a dopiero potem nadpisujemy
	   szerokość każdego "li". */
	.wenaro-shop .wc-block-product-template.is-flex-container {
		display: flex !important;
		flex-wrap: wrap !important;
	}

	.wenaro-shop .wc-block-product-template.is-flex-container.columns-4 > li,
	.wenaro-shop .wc-block-product-template.is-flex-container > li {
		flex: 0 0 100% !important;
		width: 100% !important;
		flex-basis: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Karta zajmuje całą dostępną szerokość WEWNĄTRZ 16px guttera
	   dodanego wyżej — bez dodatkowych reguł szerokości na samej
	   ".wenaro-product-card", bo to teraz zapewnia reguła na "li" powyżej.
	   Poniżej tylko dostrojenie zdjęcia oraz odstępu przy cenie/Price
	   History, żeby miały dużo miejsca na wąskim ekranie — border, radius
	   i kolory karty (reguła bazowa ".wenaro-product-card" wyżej w tej
	   sekcji) zostają całkowicie nietknięte. */

	.wenaro-shop .wenaro-product-card .wc-block-components-product-image {
		max-width: 280px;
		margin-inline: auto;
	}

	/* POPRAWKA (zadanie "Karty produktów + prezentacja cen"): na mobile
	   długa nazwa produktu (np. "Ogrzewanie postojowe 12V 24V 5kW
	   Bluetooth LCD FDIK nagrzewnica z pilotem") zajmowała bardzo dużo
	   wysokości karty przy bazowym limicie 3 linii (reguła wyżej w tym
	   pliku). Ograniczone tu do MAKSYMALNIE 2 linii wyłącznie poniżej
	   600px — desktop zostaje przy 3 liniach z reguły bazowej, bez zmian.
	   Sama nazwa produktu w WooCommerce/bazie danych jest nietknięta —
	   to wyłącznie wizualne obcięcie prezentacji w karcie (ten sam,
	   bezpieczny mechanizm "line-clamp" co w regule bazowej). */
	.wenaro-shop .wenaro-product-card .wp-block-post-title {
		-webkit-line-clamp: 2;
	}

	.wenaro-shop .wenaro-product-card .wp-block-woocommerce-product-price {
		width: 100%;
		margin-top: 4px;
		margin-bottom: 4px;
	}

	/* Cena — nieco większa, żeby mieć czytelnie dużo miejsca na wąskim
	   ekranie (desktopowy rozmiar zostaje nietknięty, patrz reguła bazowa
	   ".woocommerce-Price-amount" wyżej w tej sekcji). */
	.wenaro-shop .wenaro-product-card .woocommerce-Price-amount {
		font-size: 1.0625rem;
	}

	/* Wenaro Price History — informacja o najniższej cenie z 30 dni
	   (klasa ".wenaro-ph-lowest-price" dokładana przez plugin do wyniku
	   "woocommerce_get_price_html"; styl samego pluginu jest w jego
	   własnym assets/css/frontend.css i pozostaje nietknięty — to
	   wyłącznie pełna szerokość + dodatkowy oddech pionowy z poziomu
	   motywu, żeby tekst nie był ściśnięty tuż pod ceną na wąskim
	   ekranie). */
	.wenaro-shop .wenaro-product-card .wenaro-ph-lowest-price {
		width: 100%;
		margin-top: 6px;
		line-height: 1.5;
	}
}
/* =========================================================
   Header — wenaro
   ========================================================= */

/* ---------- Kontener nagłówka ----------
   Biały / bardzo jasny, niski, poziomy pasek w stylu starego
   sklep-wenaro.pl / TakeDrop: tło "background" (a nie "surface" —
   ma zlewać się z bielą strony, nie wyglądać jak osobna karta),
   tylko cienki dolny border jako separator, skromny pionowy padding
   (mniej niż wcześniej), dużo poziomego oddechu między strefami.

   Szerokość wewnętrznej treści: ".wenaro-header-inner" ma w markupie
   ("parts/header.html") atrybut "align":"wide" (klasa "alignwide"),
   ale to NIE wystarcza samo w sobie. Auto-generowana reguła WordPressa
   ".is-layout-constrained > .alignwide { max-width: var(--wp--style--
   global--wide-size); margin-inline: auto; }" działa WYŁĄCZNIE, gdy
   BEZPOŚREDNI rodzic elementu "alignwide" ma jawnie ustawiony
   "layout":{"type":"constrained"}. Zewnętrzny "<header class="wenaro-
   header">" w "parts/header.html" nie ma żadnego ustawionego "layout"
   (domyślne "flow"), więc ta reguła nigdy nie trafia — stąd realny bug
   (header rozciągnięty do pełnej szerokości ekranu, podczas gdy
   main/footer-main używają węższego "wideSize"). Poprawka niżej ustawia
   ograniczenie i centrowanie wprost na ".wenaro-header-inner", przez
   tę samą zmienną CSS ("--wp--style--global--wide-size"), którą
   WordPress i tak już generuje globalnie z "theme.json" —
   niezależnie od mechanizmu "alignwide/is-layout-constrained" i bez
   zmiany "parts/header.html". Istniejący układ flex
   ("display:flex; justify-content:space-between" z atrybutów bloku)
   zostaje nietknięty — dokładamy tylko ograniczenie szerokości i
   centrowanie całego wiersza. */

.wenaro-header {
	background: var(--wp--preset--color--background);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wenaro-header .wenaro-header-inner {
	align-items: center;
	column-gap: 40px;
	row-gap: 12px;
	padding-top: 16px;
	padding-bottom: 16px;
	max-width: var(--wp--style--global--wide-size, 1440px);
	width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
}

/* ---------- Strefa 1: logo / nazwa marki ----------
   Logo wyraźniejsze niż wcześniej (44px → 50px na samym bloku
   site-logo), ale bez powiększania całego nagłówka — pionowy padding
   kontenera został wręcz zmniejszony (patrz wyżej), więc header
   pozostaje niski. */

.wenaro-header .wenaro-header-brand {
	flex-shrink: 0;
	align-items: center;
	column-gap: 12px;
}

.wenaro-header .wenaro-header-logo img {
	display: block;
	border-radius: var(--wp--preset--border-radius--sm);
}

.wenaro-header .wenaro-header-title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: 1.3125rem;
	font-weight: 700;
	line-height: 1.2;
}

.wenaro-header .wenaro-header-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.wenaro-header .wenaro-header-title a:hover {
	color: var(--wp--preset--color--brand);
}

/* ---------- Strefa 2: nawigacja ----------
   Jeden poziomy układ: logo — nawigacja (wyśrodkowana w dostępnej
   przestrzeni) — wyszukiwarka + konto + koszyk. Nawigacja nie stoi już
   nad wyszukiwarką — obie strefy są teraz niezależnymi, równorzędnymi
   elementami głównego wiersza (patrz ".wenaro-header-search" niżej),
   dzięki czemu cały nagłówek jest bardziej poziomy i lżejszy. */

.wenaro-header .wenaro-header-center {
	flex-grow: 1;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.wenaro-header .wenaro-header-nav {
	column-gap: 28px;
	row-gap: 8px;
}

.wenaro-header .wenaro-header-nav a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: color 0.12s ease;
}

.wenaro-header .wenaro-header-nav a.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--brand);
}

.wenaro-header .wenaro-header-nav .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand-dark);
}

/* Ikona/przycisk otwierający menu mobilne (natywny responsywny Navigation) */
.wenaro-header .wenaro-header-nav .wp-block-navigation__responsive-container-open {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--base);
	color: var(--wp--preset--color--ink);
}

.wenaro-header .wenaro-header-nav .wp-block-navigation__responsive-container-open:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

/* ---------- Strefa 3: wyszukiwarka ----------
   Aktualny wariant blokowy: core/search z "query":{"post_type":"product"}
   (renderuje ukryte pole "post_type=product", które ogranicza wynik
   wyszukiwania wyłącznie do produktów). Blok celowo NIE ma atrybutu
   "namespace" — samo dopasowanie do zapytania "post_type":"product"
   wystarcza do zawężenia wyszukiwania, a "namespace" był tylko znacznikiem
   pomocniczym dla edytora/inserterowej ikony WooCommerce, bez wpływu na
   działanie na froncie. To NIE jest już samodzielny/legacy blok
   "woocommerce/product-search" — ten wariant jest w WooCommerce oznaczony
   jako przestarzały. Selektory celują w rzeczywisty markup core/search:
   .wp-block-search__inside-wrapper / __input / __button (zamiast starych
   .wc-block-product-search__*).
   Teraz kompaktowa (280–360px zamiast pełnej szerokości strefy środkowej)
   i stoi jako samodzielna strefa obok konta/koszyka, a nie nad nawigacją. */
.wenaro-header .wenaro-header-search {
	flex: 0 1 320px;
	max-width: 320px;
	min-width: 200px;
}

.wenaro-header .wenaro-header-search .wp-block-search__inside-wrapper {
	display: flex;
	align-items: stretch;
	column-gap: 8px;
	border: none;
}

.wenaro-header .wenaro-header-search .wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 40px;
	padding: 8px 14px;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--base);
	font-size: 0.9375rem;
}

.wenaro-header .wenaro-header-search .wp-block-search__button {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 16px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--background);
	border: none;
	border-radius: var(--wp--preset--border-radius--base);
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.wenaro-header .wenaro-header-search .wp-block-search__button:hover {
	background: var(--wp--preset--color--brand-dark);
}

/* Etykieta pola ("Szukaj produktów") jest celowo niewidoczna wizualnie
   ("showLabel": false → klasa .screen-reader-text nadana przez core/search),
   ale zostaje w markupie dla czytników ekranu. Focus-visible dla pola i
   przycisku pokrywa już ogólna reguła ".wenaro-header input/button:focus-visible"
   niżej w tej sekcji — bez duplikowania tego samego outline'u tutaj. */

/* ---------- Strefa 4: konto + mini koszyk ----------
   Konto pozostaje lekkim linkiem z ikoną, bez dużego przycisku. Koszyk
   dostaje subtelny pomarańczowy outline (jak na starej stronie) — sama
   ikona i etykieta zostają "ink" domyślnie, tylko obwódka i hover idą w
   "brand"; to czysto wizualna zmiana, funkcjonalność Mini Cart (natywny
   blok WooCommerce) jest nienaruszona. */

.wenaro-header .wenaro-header-actions {
	flex-shrink: 0;
	align-items: center;
	column-gap: 16px;
}

.wenaro-header .wenaro-header-account .wc-block-customer-account__link {
	display: inline-flex;
	align-items: center;
	column-gap: 6px;
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: color 0.12s ease;
}

.wenaro-header .wenaro-header-account .wc-block-customer-account__link:hover {
	color: var(--wp--preset--color--brand);
}

.wenaro-header .wenaro-header-account svg {
	fill: currentColor;
}

/* Kanoniczny styl PRZYCISKU MINI CART w głównym headerze — WYŁĄCZNIE
   ten kontekst (".wenaro-header-cart"). Runda "jeden język wizualny"
   ujednolica to z Checkout Header (patrz sekcja Checkout Header niżej
   w tym pliku, ".wenaro-checkout-header .wc-block-cart-link") — ten
   sam pełny, pomarańczowy, umiarkowanie zaokrąglony (NIE okrągły)
   kafelek z dużą, białą ikoną koszyka, zastępujący poprzedni okrągły,
   obrysowany przycisk z transparentnym tłem. Zmiana jest WYŁĄCZNIE
   wizualna (CSS) — element pozostaje natywnym <button> WooCommerce
   (Interactivity API, "data-wp-on--click=actions.openDrawer") i nadal
   otwiera szufladę Mini Cart, zero zmian w JS/zachowaniu. */
.wenaro-header .wenaro-header-cart .wc-block-mini-cart__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 5px;
	box-sizing: border-box;
	background: var(--wp--preset--color--brand);
	border: none;
	border-radius: var(--wp--preset--border-radius--base);
	color: var(--wp--preset--color--background);
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.wenaro-header .wenaro-header-cart .wc-block-mini-cart__button:hover {
	background: var(--wp--preset--color--brand-dark);
}

.wenaro-header .wenaro-header-cart svg {
	fill: currentColor;
}

/* Duża, biała ikona — identyczne podejście jak w Checkout Header
   (".wenaro-checkout-header .wc-block-cart-link .wc-block-mini-cart__icon"
   niżej w tym pliku): jawny rozmiar 34×34px zamiast dziedziczenia
   natywnego, mniejszego rozmiaru z "mini-cart/style.scss"
   (".wc-block-mini-cart__button .wc-block-mini-cart__icon {width:
   em(16px); height:em(16px);}"). "color:inherit" + "fill:currentColor"
   — ikona dziedziczy biel wprost z przycisku wyżej. */
.wenaro-header .wenaro-header-cart .wc-block-mini-cart__button .wc-block-mini-cart__icon {
	width: 34px;
	height: 34px;
	margin: 0;
	fill: currentColor;
	color: inherit;
}

/* Wrapper WSTRZYKIWANY NATYWNIE przez WooCommerce (Interactivity API,
   BEZ ŻADNYCH zmian w logice/JS) — jego natywna, nieprzypisana do
   żadnego selektora reguła (".wc-block-mini-cart__quantity-badge",
   "quantity-badge/style.scss") ustawia "position:relative", co
   pozycjonowałoby plakietkę względem SAMEGO wrappera (dopasowanego
   ciasno do 34px ikony), a nie względem całego 44×44px kafelka.
   "position:static" tutaj oddaje kontekst pozycjonowania plakietki
   przyciskowi (ustawionemu wyżej na "position:relative") — dokładnie
   tak, jak w Checkout Header. Wrapper NIE dostaje już własnego
   "color" (w odróżnieniu od poprzedniej, wspólnej z plakietką reguły
   niżej usuniętej) — dzięki temu ikona (SVG, "fill:currentColor")
   poprawnie dziedziczy biel wprost z przycisku, zamiast bledszego
   koloru z poprzedniej reguły (błąd opisany w raporcie z rundy
   "refaktoryzacja Checkout" — naprawiony tutaj przy okazji, skoro i
   tak trzeba było rozdzielić kolory wrappera i plakietki). */
.wenaro-header .wenaro-header-cart .wc-block-mini-cart__button .wc-block-mini-cart__quantity-badge {
	position: static;
	display: inline-flex;
	align-items: center;
}

/* Plakietka ilości — logika (tworzenie/aktualizacja liczby, chowanie
   przez natywny atrybut "hidden") w 100% natywna/BEZ ZMIAN. Kolor i
   pozycja ujednolicone z Checkout Header: jasne tło + ciemny tekst
   dla kontrastu na pełnym pomarańczu kafelka (poprzednie "background:
   brand; color:background" zlewałoby się z tłem PRZYCISKU, który jest
   teraz TEŻ pełnym pomarańczem — stąd odwrócenie, identyczne jak przy
   Checkout), punktowo w prawym górnym rogu kafelka — nie zasłania
   dużej białej ikony. "!important" wyłącznie na kolorach — zabezpieczenie
   przed ewentualnym inline "style" z Interactivity API
   ("data-wp-style--background-color"/"data-wp-style--color" w realnym
   markupie), gdyby blok Mini Cart miał kiedyś ustawione własne kolory
   plakietki w edytorze. */
.wenaro-header .wenaro-header-cart .wc-block-mini-cart__button .wc-block-mini-cart__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	left: auto;
	margin-left: 0;
	transform: none;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--background) !important;
	color: var(--wp--preset--color--brand-dark) !important;
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

/* Zabezpieczenie przed powtórką błędu z rundy "duplikat ceny w Mini
   Cart" (patrz sekcja "Mini Cart — układ ceny" wyżej w tym pliku):
   powyższa reguła plakietki ma wyższą specyficzność niż natywna
   ".wc-block-mini-cart__badge[hidden] {display:none}", więc bez tego
   resetu plakietka byłaby widoczna nawet przy pustym koszyku ("0").
   Ten reset przywraca natywne chowanie przez atrybut "hidden". */
.wenaro-header .wenaro-header-cart .wc-block-mini-cart__button .wc-block-mini-cart__badge[hidden] {
	display: none;
}

.wenaro-header a:focus-visible,
.wenaro-header button:focus-visible,
.wenaro-header input:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-dark);
	outline-offset: 2px;
	border-radius: var(--wp--preset--border-radius--sm);
}

/* ---------- Mobile ----------
   Poniżej 781px: logo, przycisk menu (natywny, wbudowany toggle
   Navigation blocku) oraz konto/koszyk zostają w jednym, kompaktowym
   górnym wierszu (zawsze widoczne — patrz specyfikacja), a wyszukiwarka
   przechodzi do osobnego, pełnej szerokości wiersza pod spodem. Sama
   nawigacja korzysta z natywnego responsywnego zachowania bloku
   Navigation (rozwijane menu / overlay) — bez dodatkowego JS z naszej
   strony. Brak poziomego scrolla dzięki flex-wrap + min-width: 0 na
   elastycznych dzieciach. */

@media (max-width: 781px) {
	.wenaro-header .wenaro-header-inner {
		flex-wrap: wrap;
	}

	.wenaro-header .wenaro-header-brand {
		order: 1;
	}

	.wenaro-header .wenaro-header-center {
		order: 2;
		flex-grow: 0;
	}

	.wenaro-header .wenaro-header-actions {
		order: 3;
		margin-left: auto;
	}

	.wenaro-header .wenaro-header-search {
		order: 4;
		flex: 1 1 100%;
		max-width: none;
		min-width: 0;
		width: 100%;
	}
}

@media (max-width: 600px) {
	/* Mobile gutter — 16px bocznego odstępu, żeby logo, menu, "Moje konto",
	   koszyk i wyszukiwarka nie stykały się z krawędzią ekranu. Bez
	   ryzyka podwójnego paddingu: ".wenaro-header-inner" nie ma żadnego
	   innego poziomego paddingu poza tym dodanym tutaj. */
	.wenaro-header .wenaro-header-inner {
		padding-top: 14px;
		padding-bottom: 14px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.wenaro-header .wenaro-header-title {
		font-size: 1.125rem;
	}

	.wenaro-header .wenaro-header-search .wp-block-search__button {
		padding: 0 14px;
	}
}

/* =========================================================
   Footer — wenaro
   ========================================================= */

/* ---------- Kontener stopki ----------
   Jasna stopka w stylu starego sklep-wenaro.pl / TakeDrop: tło "surface"
   (delikatnie jaśniejsze niż "background", ten sam token co np. w
   Single Product / product-feature-cards), tekst podstawowy "ink",
   drugorzędny "muted", pomarańcz "brand" tylko jako akcent — bez
   ciężkich ciemnych bloków. Szerokość treści ograniczona przez
   "alignwide" (realny wideSize z theme.json), tak samo jak w Header. */

.wenaro-footer {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

.wenaro-footer .wenaro-footer-main {
	padding-top: 64px;
	padding-bottom: 48px;
}

/* ---------- Kolumny ----------
   Płynny flex-wrap z rozsądnym minimalnym flex-basis — 4 kolumny na
   desktopie, naturalnie 2 na tablecie i 1 na mobile w miarę zwężania
   viewportu, bez potrzeby dodatkowych, sztywnych breakpointów na każdy
   krok (tylko jeden, deterministyczny próg na samym dole — patrz sekcja
   Mobile — żeby długie etykiety typu "Zwroty i reklamacje" nigdy nie
   musiały dzielić się na 2 kolumny na wąskich ekranach). Kolumna marki
   dostaje nieco szerszy zakres (flex-basis/max-width) niż pozostałe —
   mieści teraz logo+nazwę, dane kontaktowe, dane rejestrowe, pomarańczowy
   komunikat i social media, więc potrzebuje więcej oddechu. */

.wenaro-footer .wenaro-footer-columns {
	column-gap: 48px;
	row-gap: 40px;
}

.wenaro-footer .wenaro-footer-col {
	flex: 1 1 200px;
	min-width: 0;
}

.wenaro-footer .wenaro-footer-col-brand {
	flex: 1 1 280px;
	max-width: 360px;
}

/* ---------- Kolumna 1: marka ---------- */

.wenaro-footer .wenaro-footer-brand {
	align-items: center;
	column-gap: 10px;
}

.wenaro-footer .wenaro-footer-logo img {
	display: block;
	height: auto;
	border-radius: var(--wp--preset--border-radius--sm);
}

.wenaro-footer .wenaro-footer-brand-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.2;
}

.wenaro-footer .wenaro-footer-brand-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.wenaro-footer .wenaro-footer-brand-title a:hover {
	color: var(--wp--preset--color--brand);
}

/* Dane kontaktowe (telefon/e-mail) — telefon w kolorze drugorzędnym,
   e-mail celowo wyróżniony kolorem "brand" (patrz specyfikacja). */
.wenaro-footer .wenaro-footer-contact {
	margin: 16px 0 0;
	font-size: 0.9375rem;
	line-height: 2;
}

.wenaro-footer .wenaro-footer-contact a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color 0.12s ease;
}

.wenaro-footer .wenaro-footer-contact a:hover {
	color: var(--wp--preset--color--brand);
}

.wenaro-footer .wenaro-footer-contact-email {
	color: var(--wp--preset--color--brand);
	font-weight: 600;
}

.wenaro-footer .wenaro-footer-contact-email:hover {
	color: var(--wp--preset--color--brand-dark);
}

/* Cienka linia "border" oddzielająca dane kontaktowe od danych
   rejestrowych — realizowana jako border-top na samym bloku danych
   rejestrowych (bez dodatkowego, pustego elementu dekoracyjnego). */
.wenaro-footer .wenaro-footer-legal {
	margin: 16px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	line-height: 1.6;
}

.wenaro-footer .wenaro-footer-legal-row {
	display: inline;
}

.wenaro-footer .wenaro-footer-legal-sep {
	color: var(--wp--preset--color--border);
}

/* Mocny pomarańczowy komunikat pod danymi rejestrowymi. */
.wenaro-footer .wenaro-footer-badge {
	margin: 14px 0 0;
	color: var(--wp--preset--color--brand);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.5;
}

/* Social media — wariant "logos-only" (natywny style bloku core/social-links,
   bez tła/obwódki pod ikoną — patrz className na bloku, brak kolorowych kół).
   Kolor ikony to "currentColor" ustawiany przez sam blok, więc wystarczy
   ustawić "color" tutaj i przy hoverze: ciemny "ink" domyślnie, "brand"
   przy hover. Touch target jest mimo to pełnowymiarowy dzięki
   min-width/min-height na linku, wyśrodkowanym flexem. */
.wenaro-footer .wenaro-footer-social {
	margin: 20px 0 0;
	font-size: 18px;
	gap: 4px;
}

.wenaro-footer .wenaro-footer-social .wp-block-social-link {
	color: var(--wp--preset--color--ink);
}

.wenaro-footer .wenaro-footer-social .wp-block-social-link:hover {
	color: var(--wp--preset--color--brand);
	transform: none;
}

.wenaro-footer .wenaro-footer-social .wp-block-social-link-anchor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0;
}

/* ---------- Kolumny linków: nagłówek + lista ---------- */

.wenaro-footer .wenaro-footer-heading {
	margin: 0 0 16px;
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.wenaro-footer .wenaro-footer-links {
	display: flex;
	flex-direction: column;
	row-gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wenaro-footer .wenaro-footer-links li {
	margin: 0;
}

.wenaro-footer .wenaro-footer-links a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	text-decoration: none;
	transition: color 0.12s ease;
}

.wenaro-footer .wenaro-footer-links a:hover {
	color: var(--wp--preset--color--brand);
}

/* ---------- Dolny pasek: copyright + info o bezpiecznych zakupach ----------
   Subtelna linia oddzielająca górną część stopki od dolnego paska —
   token "border" z Design Systemu, bez wprowadzania nowych kolorów.

   Szerokość: dokładnie ten sam bug i ta sama poprawka co przy
   ".wenaro-header-inner" wyżej w sekcji Header. ".wenaro-footer-bottom"
   ma w markupie ("parts/footer.html") "align":"wide", ale jego
   bezpośredni rodzic — "<footer class="wenaro-footer">" — nie ma
   ustawionego "layout":{"type":"constrained"}, więc auto-generowana
   reguła WordPressa dla "alignwide" nigdy nie trafia (dlatego ten pasek
   dotykał krawędzi ekranu, w przeciwieństwie do ".wenaro-footer-main"
   wyżej, który sam SIEBIE deklaruje jako "constrained" i dlatego już
   wygląda poprawnie). Ograniczenie + centrowanie ustawione wprost, przez
   tę samą globalną zmienną "--wp--style--global--wide-size" —
   "justify-content: space-between" (copyright po lewej, tekst o
   bezpieczeństwie po prawej), border-top, kolory i typografia
   pozostają nietknięte. */

.wenaro-footer .wenaro-footer-bottom {
	align-items: center;
	column-gap: 16px;
	row-gap: 8px;
	padding-top: 24px;
	padding-bottom: 24px;
	border-top: 1px solid var(--wp--preset--color--border);
	max-width: var(--wp--style--global--wide-size, 1440px);
	width: 100%;
	margin-inline: auto;
	box-sizing: border-box;
}

.wenaro-footer .wenaro-footer-copy {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 600;
}

.wenaro-footer .wenaro-footer-secure {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

/* ---------- Dostępność: focus-visible w całej stopce ---------- */

.wenaro-footer a:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
	border-radius: var(--wp--preset--border-radius--sm);
}

/* ---------- Mobile ----------
   Powyżej tego progu kolumny płynnie zwężają się do 2 (patrz uwaga przy
   ".wenaro-footer-columns"); poniżej wymuszamy pełną szerokość, żeby
   dłuższe etykiety (np. "Zwroty i reklamacje") zawsze miały jedną,
   czytelną kolumnę zamiast łamać się w wąskiej, 2-kolumnowej siatce. */

@media (max-width: 600px) {
	/* Mobile gutter — 16px bocznego odstępu na logo/dane firmy/kolumnach
	   Sklep-Informacje-Dokumenty oraz na dolnym pasku copyright. Bez
	   ryzyka podwójnego paddingu: ani ".wenaro-footer-main", ani
	   ".wenaro-footer-bottom" nie mają żadnego innego poziomego paddingu
	   poza tym dodanym tutaj. */
	.wenaro-footer .wenaro-footer-main {
		padding-top: 40px;
		padding-bottom: 32px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.wenaro-footer .wenaro-footer-columns {
		row-gap: 32px;
	}

	.wenaro-footer .wenaro-footer-col,
	.wenaro-footer .wenaro-footer-col-brand {
		flex: 1 1 100%;
		max-width: none;
	}

	.wenaro-footer .wenaro-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* =========================================================
   Front Page — wenaro
   Style dla templates/front-page.html. Wszystkie własne reguły są
   ograniczone przez ".wenaro-home", żeby nie wyciekały do Single
   Product, katalogu, opisu produktu ani patternów (żadna z istniejących
   sekcji w tym pliku nie została zmieniona).

   Kolory/promienie — wyłącznie presety z theme.json, tak jak w reszcie
   pliku. Ciemne akcenty ("ink") na jasnym tle i jaśniejszy drugorzędny
   tekst na ciemnym tle korzystają z tego samego wzorca color-mix co
   Header/Footer — bez wprowadzania kolorów spoza Design Systemu.
   ========================================================= */

.wenaro-home {
	overflow-x: hidden;
}

/* ---------- Wspólne nagłówki sekcji (Bestsellery / Osiągnięcia / Zaufaj) ---------- */

.wenaro-home .wenaro-home-section-title {
	margin: 0 0 12px;
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	line-height: 1.2;
}

.wenaro-home .wenaro-home-section-subtitle {
	margin: 0 0 40px;
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	line-height: 1.6;
}

/* ---------- 2. Pasek korzyści ----------
   Cienki, ciemny pasek bezpośrednio pod headerem, wzorowany na pasku
   TakeDrop: jeden wyśrodkowany rząd, emoji jako ikonki (pomarańczowe),
   bez dekoracyjnych kropek — te zostały usunięte, bo ich rolę przejęły
   ikonki. */

.wenaro-home .wenaro-home-benefits-bar {
	background: var(--wp--preset--color--ink);
}

.wenaro-home .wenaro-home-benefits-bar-inner {
	justify-content: center;
	align-items: center;
	column-gap: 25px;
	row-gap: 8px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.wenaro-home .wenaro-home-benefit-item {
	display: inline-flex;
	align-items: center;
	column-gap: 6px;
	margin: 0;
	color: color-mix(in srgb, var(--wp--preset--color--background) 88%, var(--wp--preset--color--ink));
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.wenaro-home .wenaro-home-benefit-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--wp--preset--color--brand);
}

.wenaro-home .wenaro-home-benefit-phone {
	color: var(--wp--preset--color--brand);
	font-weight: 700;
	text-decoration: none;
}

.wenaro-home .wenaro-home-benefit-phone:hover {
	text-decoration: underline;
}

.wenaro-home .wenaro-home-benefit-hours {
	color: color-mix(in srgb, var(--wp--preset--color--background) 55%, var(--wp--preset--color--ink));
	font-size: 0.75rem;
	font-weight: 500;
}

/* Awaryjny link "[wenaro_free_shipping_home]" (patrz wenaro-store-tools.php),
   pokazywany zamiast pustego miejsca, gdy próg darmowej dostawy nie jest
   jednoznaczny — ten sam akcent co numer infolinii w tym samym pasku. */
.wenaro-home .wenaro-free-shipping-home-fallback {
	color: var(--wp--preset--color--brand);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wenaro-home .wenaro-free-shipping-home-fallback:hover {
	color: var(--wp--preset--color--background);
}

/* ---------- 3. HERO ----------
   Pełne zdjęcie jako tło banera (desktop: hero-desktop.jpg, mobile poniżej
   781px: hero-mobile.png — patrz assets/images/home/), z ciemnym gradientem
   "ink" od strony tekstu (lewo) do przezroczystego po prawej, żeby część
   produktowa zdjęcia pozostała dobrze widoczna — bez jednolitego
   przyciemnienia całej grafiki. */

.wenaro-home .wenaro-home-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 460px;
	background-image: url("assets/images/home/hero-desktop.jpg");
	background-size: cover;
	background-position: center right;
	overflow: hidden;
}

.wenaro-home .wenaro-home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		color-mix(in srgb, var(--wp--preset--color--ink) 92%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--ink) 75%, transparent) 32%,
		color-mix(in srgb, var(--wp--preset--color--ink) 20%, transparent) 62%,
		transparent 85%
	);
	pointer-events: none;
}

.wenaro-home .wenaro-home-hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: 48px;
	padding-bottom: 48px;
}

.wenaro-home .wenaro-home-hero-content {
	max-width: 600px;
}

.wenaro-home .wenaro-home-hero-title {
	margin: 0 0 20px;
	color: var(--wp--preset--color--background);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.15;
}

.wenaro-home .wenaro-home-hero-highlight {
	color: var(--wp--preset--color--brand);
}

.wenaro-home .wenaro-home-hero-lead {
	margin: 0 0 32px;
	color: color-mix(in srgb, var(--wp--preset--color--background) 92%, var(--wp--preset--color--ink));
	font-size: 1.125rem;
	line-height: 1.6;
}

.wenaro-home .wenaro-home-hero-cta {
	margin: 0;
}

/* ---------- 4. Bestsellery i Wybór Klientów ----------
   Karta produktu celowo powiela wizualnie ".wenaro-shop .wenaro-product-card"
   z archive-product.html (ten sam markup bloku Product Collection), ale
   jako niezależny, w pełni ograniczony przez ".wenaro-home" zestaw reguł —
   zgodnie z wymaganiem, żeby style strony głównej nie zależały od klasy
   ".wenaro-shop". */

.wenaro-home .wenaro-home-bestsellers {
	padding-top: 80px;
	padding-bottom: 80px;
}

.wenaro-home .wenaro-home-bestsellers .wp-block-woocommerce-product-collection {
	margin-bottom: 40px;
}

.wenaro-home .wenaro-product-card {
	position: relative;
	height: 100%;
	padding: 16px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--lg);
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.wenaro-home .wenaro-product-card:hover {
	border-color: var(--wp--preset--color--muted);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.wenaro-home .wenaro-product-card .wc-block-components-product-image {
	position: relative;
	aspect-ratio: 1 / 1;
	padding: 12px;
	background: var(--wp--preset--color--background);
	border-radius: var(--wp--preset--border-radius--base);
	overflow: hidden;
}

.wenaro-home .wenaro-product-card .wc-block-components-product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.wenaro-home .wenaro-product-card .wp-block-woocommerce-product-sale-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	margin: 0;
}

.wenaro-home .wenaro-product-card .wc-block-components-product-sale-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--background);
	border-radius: var(--wp--preset--border-radius--full);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.4;
}

.wenaro-home .wenaro-product-card .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.wenaro-home .wenaro-product-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.wenaro-home .wenaro-product-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brand-dark);
}

.wenaro-home .wenaro-product-card .woocommerce-Price-amount {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

/* POPRAWKA (zadanie "Karty produktów + prezentacja cen — Homepage i
   Katalog") — ta sama decyzja biznesowa/compliance co w
   ".wenaro-shop .wenaro-product-card del" wyżej w tym pliku: na
   kartach Homepage pokazujemy wyłącznie aktualną cenę, bez
   przekreślonej ceny regularnej. "display: none" (zero pozostawionej
   przestrzeni), zawartość "<del>" w HTML/PHP nietknięta. */
.wenaro-home .wenaro-product-card del {
	display: none;
}

.wenaro-home .wenaro-product-card ins {
	text-decoration: none;
	font-weight: 800;
	color: var(--wp--preset--color--brand-dark);
}

.wenaro-home .wenaro-product-card ins .woocommerce-Price-amount {
	color: var(--wp--preset--color--brand-dark);
	font-weight: 800;
}

/* Wenaro Price History — jak w katalogu: na Homepage nie pokazujemy
   komunikatu "Najniższa cena...". Mechanizm/plugin nietknięty, to
   wyłącznie ukrycie prezentacji w tym kontekście. Nadpisuje istniejące
   dostrojenie tej klasy w media query niżej (nieszkodliwe — element już
   nie jest renderowany). */
.wenaro-home .wenaro-product-card .wenaro-ph-lowest-price {
	display: none;
}

.wenaro-home .wenaro-product-card .wc-block-components-product-button {
	margin-top: auto;
	padding-top: 4px;
}

.wenaro-home .wenaro-product-card .wc-block-components-product-button__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 40px;
	padding: 10px 16px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--background);
	border: none;
	border-radius: var(--wp--preset--border-radius--base);
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.wenaro-home .wenaro-product-card .wc-block-components-product-button__button:hover {
	background: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--background);
}

/* Siatka 5-kolumnowa (atrybut bloku) nie ma natywnego kroku pośredniego na
   tablecie/mobile — tak samo jak w Shop / Product Catalog, dopisujemy tylko
   brakujące progi, nie duplikując tego, co blok już robi natywnie poniżej
   600px (naturalnie 1 kolumna). */

@media (min-width: 900px) and (max-width: 1200px) {
	.wenaro-home .wc-block-product-template.is-flex-container.columns-5 > li {
		width: calc(33.333% - 0.556em);
	}
}

@media (min-width: 600px) and (max-width: 900px) {
	.wenaro-home .wc-block-product-template.is-flex-container.columns-5 > li {
		width: calc(50% - 0.625em);
	}
}

.wenaro-home .wenaro-home-bestsellers-cta {
	margin-top: 40px;
}

/* ---------- 5. Nasze osiągnięcia ----------
   Sekcja na tle "surface" — lekkie odróżnienie od sąsiednich, jasnych
   sekcji (Bestsellery/Dlaczego Wenaro), bez wprowadzania ciemnego tła.
   Liczby mają "tabular-nums" i "white-space: nowrap", żeby animacja
   licznika (assets/js/front-page.js) nie powodowała "skakania" szerokości
   ani łamania liczby w połowie podczas zliczania. */

.wenaro-home .wenaro-home-stats {
	padding-top: 80px;
	padding-bottom: 80px;
	background: var(--wp--preset--color--surface);
}

.wenaro-home .wenaro-home-stats-grid {
	column-gap: 56px;
	row-gap: 32px;
}

.wenaro-home .wenaro-stat {
	flex: 0 1 180px;
	text-align: center;
}

.wenaro-home .wenaro-stat-number {
	margin: 0 0 4px;
	color: var(--wp--preset--color--brand-dark);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wenaro-home .wenaro-stat-label {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
}

/* ---------- 6. Dlaczego Wenaro? ---------- */

.wenaro-home .wenaro-home-about {
	padding-top: 80px;
	padding-bottom: 80px;
}

.wenaro-home .wenaro-home-about-heading {
	margin: 0 0 32px;
	text-align: center;
}

.wenaro-home .wenaro-home-about-heading .wenaro-home-section-title {
	margin: 0;
}

.wenaro-home .wenaro-home-about-heading::after {
	content: "";
	display: block;
	width: 80px;
	height: 4px;
	margin: 10px auto 0;
	background: var(--wp--preset--color--brand);
	border-radius: var(--wp--preset--border-radius--full);
}

.wenaro-home .wenaro-home-about-heading-highlight {
	color: var(--wp--preset--color--brand);
}

.wenaro-home .wenaro-home-about-text {
	max-width: 900px;
	margin: 0 auto 48px;
	text-align: justify;
}

.wenaro-home .wenaro-home-about-text p {
	margin: 0 0 20px;
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	line-height: 1.8;
}

.wenaro-home .wenaro-home-about-text p:last-child {
	margin-bottom: 0;
}

/* Ciemny box CTA — jedyny "ciemny akcent" wewnątrz tej jasnej sekcji,
   zgodnie z rytmem: jasna sekcja z ciemnym akcentem na końcu, przed
   dużym ciemnym bannerem (sekcja 7). Wyśrodkowany box bez przycisku
   (wzorzec TakeDrop), z delikatną pomarańczową poświatą w rogu przez
   "::before" — wyłącznie z istniejących tokenów Design Systemu. */

.wenaro-home .wenaro-home-about-cta {
	position: relative;
	overflow: hidden;
	padding: 30px;
	text-align: center;
	background: var(--wp--preset--color--ink);
	border-radius: var(--wp--preset--border-radius--base);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.wenaro-home .wenaro-home-about-cta::before {
	content: "";
	position: absolute;
	top: -70px;
	right: -70px;
	width: 220px;
	height: 220px;
	background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--brand) 35%, transparent) 0%, transparent 70%);
	pointer-events: none;
}

.wenaro-home .wenaro-home-about-cta-heading {
	position: relative;
	margin: 0 0 8px;
	color: var(--wp--preset--color--background);
	font-size: 1.375rem;
	font-weight: 700;
	text-transform: uppercase;
}

.wenaro-home .wenaro-home-about-cta-highlight {
	color: var(--wp--preset--color--brand);
}

.wenaro-home .wenaro-home-about-cta-lead {
	position: relative;
	margin: 0;
	color: color-mix(in srgb, var(--wp--preset--color--background) 75%, var(--wp--preset--color--ink));
	font-size: 1rem;
	line-height: 1.6;
}

/* ---------- 7. Drugi duży banner promocyjny ----------
   Ten sam wzorzec co HERO: pełne zdjęcie jako tło (desktop: promo-desktop.png,
   mobile poniżej 781px: promo-mobile.png — patrz assets/images/home/), z tym
   samym gradientem "ink" od strony tekstu, żeby zachować spójny "klimat" obu
   dużych bannerów. "<mark>" w nagłówku dostaje wyłącznie kolor tekstu —
   domyślne żółte tło przeglądarki jest tu celowo wyłączone. */

.wenaro-home .wenaro-home-promo {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 420px;
	background-image: url("assets/images/home/promo-desktop.png");
	background-size: cover;
	background-position: center right;
	overflow: hidden;
}

.wenaro-home .wenaro-home-promo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		color-mix(in srgb, var(--wp--preset--color--ink) 96%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--ink) 85%, transparent) 32%,
		color-mix(in srgb, var(--wp--preset--color--ink) 35%, transparent) 62%,
		transparent 85%
	);
	pointer-events: none;
}

.wenaro-home .wenaro-home-promo-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: 56px;
	padding-bottom: 56px;
}

.wenaro-home .wenaro-home-promo-content {
	max-width: 600px;
}

.wenaro-home .wenaro-home-promo-title {
	margin: 0 0 16px;
	color: var(--wp--preset--color--background);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.2;
}

.wenaro-home .wenaro-home-promo-highlight {
	background: none;
	color: var(--wp--preset--color--brand);
}

.wenaro-home .wenaro-home-promo-lead {
	margin: 0 0 28px;
	color: color-mix(in srgb, var(--wp--preset--color--background) 92%, var(--wp--preset--color--ink));
	font-size: 1.0625rem;
	line-height: 1.6;
}

.wenaro-home .wenaro-home-promo-cta {
	margin: 0;
}

/* ---------- 8. Zaufaj naszej marce ----------
   Bez zewnętrznej biblioteki ikon — proste, typograficzne symbole w kółku
   koloru "brand" (patrz front-page.html: ✓ / ◆ / →), oznaczone
   aria-hidden, bo są czysto dekoracyjne (treść niosą nagłówki). */

.wenaro-home .wenaro-home-trust {
	padding-top: 80px;
	padding-bottom: 80px;
}

.wenaro-home .wenaro-home-trust-columns {
	margin-top: 40px;
	column-gap: 48px;
}

.wenaro-home .wenaro-home-trust-col {
	text-align: left;
}

.wenaro-home .wenaro-home-trust-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0 auto 16px;
	border-radius: var(--wp--preset--border-radius--full);
	background: color-mix(in srgb, var(--wp--preset--color--brand) 12%, var(--wp--preset--color--background));
	color: var(--wp--preset--color--brand-dark);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
}

/* Blok treści pod ikoną: pionowa pomarańczowa kreska zamiast ciężkiej
   karty z tłem/borderem dookoła — wzorzec TakeDrop (ikona → kreska →
   nagłówek → tekst). */

.wenaro-home .wenaro-home-trust-content {
	margin-top: 10px;
	padding-left: 15px;
	border-left: 4px solid var(--wp--preset--color--brand);
}

.wenaro-home .wenaro-home-trust-heading {
	margin: 0 0 8px;
	color: var(--wp--preset--color--ink);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.wenaro-home .wenaro-home-trust-text {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	line-height: 1.6;
	text-align: justify;
}

/* ---------- Dostępność: focus-visible w całej stronie głównej ----------
   Domyślnie "brand-dark" (jasne sekcje) — na ciemnych sekcjach (pasek
   korzyści / hero / promo / box CTA) podmienione na "brand" dla
   wystarczającego kontrastu na tle "ink", tak samo jak w Header/Footer. */

.wenaro-home a:focus-visible,
.wenaro-home button:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-dark);
	outline-offset: 2px;
	border-radius: var(--wp--preset--border-radius--sm);
}

.wenaro-home .wenaro-home-benefits-bar a:focus-visible,
.wenaro-home .wenaro-home-hero a:focus-visible,
.wenaro-home .wenaro-home-promo a:focus-visible {
	outline-color: var(--wp--preset--color--brand);
}

/* ---------- Mobile ---------- */

@media (max-width: 781px) {
	.wenaro-home .wenaro-home-bestsellers,
	.wenaro-home .wenaro-home-stats,
	.wenaro-home .wenaro-home-about,
	.wenaro-home .wenaro-home-trust {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	/* Poniżej tego progu: osobne, pionowo kadrowane grafiki
	   (hero-mobile.png / promo-mobile.png) zamiast desktopowych, węższy
	   zakres wysokości i mocniejszy, bardziej równomierny overlay "ink" —
	   na wąskim ekranie tekst zajmuje praktycznie całą szerokość banera,
	   więc gradient musi ciemnić grafikę mocniej niż na desktopie.
	   "background-position: center" nadpisuje desktopowe "center right"
	   (kadr pionowy, nie ma już potrzeby przesunięcia w prawo). */
	.wenaro-home .wenaro-home-hero {
		min-height: 420px;
		background-image: url("assets/images/home/hero-mobile.png");
		background-size: cover;
		background-position: center;
	}

	.wenaro-home .wenaro-home-hero::before,
	.wenaro-home .wenaro-home-promo::before {
		background: linear-gradient(
			to right,
			color-mix(in srgb, var(--wp--preset--color--ink) 95%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--ink) 85%, transparent) 45%,
			color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent) 75%,
			color-mix(in srgb, var(--wp--preset--color--ink) 30%, transparent) 100%
		);
	}

	.wenaro-home .wenaro-home-hero-inner {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.wenaro-home .wenaro-home-hero-content {
		max-width: none;
	}

	.wenaro-home .wenaro-home-hero-title {
		font-size: 2rem;
	}

	.wenaro-home .wenaro-home-promo {
		min-height: 420px;
		background-image: url("assets/images/home/promo-mobile.png");
		background-size: cover;
		background-position: center;
	}

	.wenaro-home .wenaro-home-promo-inner {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.wenaro-home .wenaro-home-promo-content {
		max-width: none;
	}

	.wenaro-home .wenaro-home-promo-title {
		font-size: 1.625rem;
	}

	.wenaro-home .wenaro-home-about-text,
	.wenaro-home .wenaro-home-trust-text {
		text-align: left;
	}

	.wenaro-home .wenaro-home-about-cta {
		padding: 28px;
	}

	.wenaro-home .wenaro-home-trust-columns {
		row-gap: 32px;
	}
}

@media (max-width: 600px) {
	.wenaro-home .wenaro-home-hero-title {
		font-size: 1.625rem;
	}

	.wenaro-home .wenaro-home-promo-title {
		font-size: 1.375rem;
	}

	.wenaro-home .wenaro-stat {
		flex-basis: 45%;
	}

	/* ---------- Mobile gutters — zasada ----------
	   full-bleed section (tło banera) → BEZ bocznego paddingu na
	   zewnętrznym wrapperze, żeby dochodziło do obu krawędzi ekranu;
	   inner content / zwykła content section → 16px gutter. Reguła
	   dotyczy WYŁĄCZNIE ".wenaro-home" (homepage) — katalog "/sklep/"
	   ma swój własny, osobny mobilny layout w sekcji "Shop" wyżej w tym
	   pliku i NIE jest tu ruszany. */

	/* HERO i PROMO: ".wenaro-home-hero"/".wenaro-home-promo" to sekcje
	   "align:full" — CELOWO bez żadnego poziomego paddingu tutaj, żeby
	   tło dochodziło do krawędzi ekranu. Gutter dostaje wyłącznie ich
	   wewnętrzna treść — ".wenaro-home-hero-inner"/".wenaro-home-promo-inner"
	   (sekcja "align:wide" w środku), które nie mają żadnego innego
	   poziomego paddingu poza tym dodanym tutaj, więc nie ma ryzyka
	   podwojenia. */
	.wenaro-home .wenaro-home-hero-inner {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* PASEK KORZYŚCI: ".wenaro-home-benefits-bar" to ciemne, pełnej
	   szerokości tło — CELOWO bez paddingu tutaj, żeby zostało
	   full-bleed. Gutter dostaje wyłącznie jego wewnętrzny wrapper
	   ".wenaro-home-benefits-bar-inner" (ten sam, sprawdzony wzorzec co
	   Hero/Promo wyżej) — nie ma innego poziomego paddingu na tym
	   elemencie, więc nie ma ryzyka podwojenia. Zawijanie elementów
	   (odziedziczone "flex-wrap" z reguły bazowej wyżej) — nietknięte. */
	.wenaro-home .wenaro-home-benefits-bar-inner {
		padding-left: 16px;
		padding-right: 16px;
	}

	.wenaro-home .wenaro-home-promo-inner {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* „DLACZEGO WENARO?” i „ZAUFAJ NASZEJ MARCE”: obie to sekcje
	   "align:wide" (NIE full), których wewnętrzne dzieci (nagłówek,
	   akapity, kolumny) nie mają własnego align, więc bez tej reguły są
	   dosłownie niczym nieoddzielone od krawędzi ekranu na mobile — stąd
	   dotykanie lewej krawędzi. Gutter na poziomie SAMEJ SEKCJI (a nie
	   osobno na nagłówku i osobno na tekście) daje im wspólną, jedną
	   pionową linię wyrównania i wyklucza podwójny padding 32px.
	   ".wenaro-home-about-cta" ma własny padding 28px (patrz reguła w
	   bloku 781px wyżej) — to wewnętrzny odstęp osobnej karty CTA,
	   niezależny od tego zewnętrznego guttera, więc się nie sumuje w
	   niepożądany sposób. Wygląd typografii i pomarańczowego akcentu
	   pozostaje całkowicie nietknięty — dodajemy wyłącznie padding. */
	.wenaro-home .wenaro-home-about {
		padding-left: 16px;
		padding-right: 16px;
	}

	.wenaro-home .wenaro-home-trust {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* ---------- Bestsellery homepage: 2 karty w rzędzie (nie 1) ----------
	   To INNY blok Product Collection niż w katalogu "/sklep/" (tu:
	   atrybut "columns":5, klasa ".columns-5") — ta sama historia co przy
	   katalogu: poniżej 600px natywny styl WooCommerce NIE przechodzi
	   czysto do kontrolowanego układu 2 kolumn z małym odstępem, tylko
	   zostaje przy własnej, procentowej/marginesowej matematyce
	   skalibrowanej pod 3+ kolumny — stąd małe karty i nienaturalnie
	   duża "dziura" między nimi, którą zgłoszono. Wymuszamy więc
	   jawnie: flex + 2 karty po (50% minus połowa odstępu) + kontrolowany
	   odstęp 8px przez "gap" — bez polegania na marginesie natywnym.
	   "!important" użyty świadomie WYŁĄCZNIE w tym miejscu (ten sam,
	   ograniczony przypadek co przy katalogu "/sklep/") — nigdzie indziej
	   w tej poprawce. Tablet (2 kolumny w istniejącej regule
	   "min-width:600px and max-width:900px" wyżej) i desktop (3/5 kolumn)
	   zostają całkowicie nietknięte, bo ta reguła działa wyłącznie
	   poniżej 600px. */
	.wenaro-home .wenaro-home-bestsellers {
		padding-left: 16px;
		padding-right: 16px;
	}

	.wenaro-home .wc-block-product-template.is-flex-container {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 16px 8px !important;
	}

	.wenaro-home .wc-block-product-template.is-flex-container.columns-5 > li,
	.wenaro-home .wc-block-product-template.is-flex-container > li {
		width: calc(50% - 4px) !important;
		flex: 0 0 calc(50% - 4px) !important;
		flex-basis: calc(50% - 4px) !important;
		max-width: calc(50% - 4px) !important;
		margin: 0 !important;
	}

	/* POPRAWKA (zadanie "Karty produktów + prezentacja cen"): długa nazwa
	   produktu w WĄSKIEJ, 2-kolumnowej karcie Homepage (patrz reguła
	   szerokości wyżej — ok. połowa szerokości ekranu) jest jeszcze
	   bardziej narażona na nadmierną wysokość niż w katalogu (tam mobile
	   to 1 pełnej szerokości karta w rzędzie) — stąd ten sam limit 2 linii
	   co w ".wenaro-shop", tu w OSOBNEJ regule, bo karty homepage mają
	   niezależny, własny zestaw stylów (patrz komentarz "Bestsellery i
	   Wybór Klientów" wyżej w tym pliku). Desktop/tablet zostają przy
	   3 liniach z reguły bazowej. */
	.wenaro-home .wenaro-product-card .wp-block-post-title {
		-webkit-line-clamp: 2;
	}

	/* Price History w wąskiej, 2-kolumnowej karcie — mniejszy, ale nadal
	   czytelny rozmiar, żeby tekst nie zawijał się chaotycznie na bardzo
	   wąskiej karcie. Sam plugin (assets/css/frontend.css) pozostaje
	   nietknięty — to wyłącznie dostrojenie z poziomu motywu. */
	.wenaro-home .wenaro-product-card .wenaro-ph-lowest-price {
		margin-top: 4px;
		font-size: 0.75rem;
		line-height: 1.4;
	}
}

/* Bardzo wąskie telefony: dopiero poniżej tego progu Bestsellery
   homepage przechodzą do 1 karty w rzędzie — karta wtedy wykorzystuje
   pełną szerokość wewnątrz 16px guttera sekcji, a jej zdjęcie zostaje
   ograniczone i wyśrodkowane (ten sam, sprawdzony wzorzec co w katalogu
   "/sklep/" poniżej 600px). Powyżej tego progu (340–600px) nadal
   obowiązuje reguła 2 kolumn zdefiniowana wyżej. */
@media (max-width: 340px) {
	.wenaro-home .wc-block-product-template.is-flex-container.columns-5 > li,
	.wenaro-home .wc-block-product-template.is-flex-container > li {
		width: 100% !important;
		flex: 0 0 100% !important;
		flex-basis: 100% !important;
		max-width: 100% !important;
	}

	.wenaro-home .wenaro-product-card .wc-block-components-product-image {
		max-width: 280px;
		margin-inline: auto;
	}
}

/* =========================================================
   Cart — wenaro
   Style dla natywnego bloku "woocommerce/cart" (WooCommerce Cart
   Block) — bez żadnej własnej logiki koszyka, PHP ani JS. Wszystkie
   reguły korzystają wyłącznie z realnych, natywnych klas WooCommerce
   Blocks (te same, sprawdzone nazwy co w Single Product/Shop — nie
   duplikujemy tego, co blok już renderuje samodzielnie).

   Scope: "body.woocommerce-cart" — natywna klasa, którą WooCommerce
   dokłada do <body> WYŁĄCZNIE na stronie koszyka (funkcja rdzenia
   "wc_body_class()", niezależna od tego, jaki szablon/strona zawiera
   blok koszyka). To najbezpieczniejszy możliwy scope: nie wymaga
   żadnego nowego pliku szablonu ani zmiany istniejących, a jednocześnie
   fizycznie nie może wyciekać na inne strony (Sklep, Single Product,
   Front Page, Checkout — każda ma swoją własną, inną klasę body).

   Część selektorów celowo dubluje dwa możliwe warianty tej samej
   funkcji (np. przycisk "Przejdź do zamówienia"), tam gdzie nazwa
   klasy renderowana przez blok mogła się zmieniać między wersjami
   WooCommerce Blocks — dodatkowy selektor nic nie psuje, jeśli akurat
   nie występuje w markupie, a zabezpiecza przed rozjazdem wersji.

   Kolory — wyłącznie presety z theme.json. Promień karty podsumowania
   i pola obrazka produktu ustawiony jawnie w px z tego samego powodu
   co w Shop/Single Product: nazwane presety promienia nie mają
   potwierdzonej wartości w theme.json, a specyfikacja wymaga
   umiarkowanego, konkretnego wyglądu.
   ========================================================= */

/* ---------- Układ ogólny: białe tło, generous odstępy ---------- */

body.woocommerce-cart .wp-block-woocommerce-cart {
	color: var(--wp--preset--color--ink);
}

/* ---------- Dwie kolumny: produkty (szersza, lewa) | podsumowanie (węższa, prawa) ----------
   ".wc-block-cart" jest natywnie flexem — dopisujemy tylko odstęp
   i wyrównanie do góry (żeby niska/wysoka kolumna nie "rozciągały"
   się nawzajem), a szerokości kolumn kontrolujemy przez "flex-basis"
   na obu bezpośrednich sekcjach, bez ingerencji w "display". */

body.woocommerce-cart .wc-block-cart {
	align-items: flex-start;
	gap: 48px;
}

body.woocommerce-cart .wc-block-cart .wc-block-cart__main {
	flex: 1 1 0%;
	min-width: 0;
}

body.woocommerce-cart .wc-block-cart .wc-block-cart__sidebar {
	flex: 0 1 380px;
	max-width: 380px;
	width: 100%;
}

/* ---------- Lista produktów: karty zamiast tabeli ----------
   ".wc-block-cart-items" jest natywnie prawdziwą <table> (WooCommerce
   Cart Block), ale wygląd wiersza produktu jako "mini karta" (kafelek
   miniatury + tekst) jest zdefiniowany niżej, w sekcji "Wiersz
   produktu jako mini karta" — tam wiersz i jego komórki dostają
   "display: grid", więc nagłówek tabeli i domyślny box-model komórek
   nie są już używane wizualnie (nagłówek jest tam jawnie ukryty). Tutaj
   zostaje tylko szerokość samej <table> — reszta natywnych właściwości
   tabelarycznych nie ma już znaczenia wizualnego. */

body.woocommerce-cart .wc-block-cart-items {
	width: 100%;
}

/* ---------- Miniatura produktu — spójna z Checkout → Podsumowanie zamówienia ----------
   OSTATECZNA WERSJA: źródłowa miniatura WooCommerce (sprawdzona,
   np. "EK0017_11_15-300x300.jpg") jest poprawnym KWADRATEM 300×300 —
   więc kafelek też jest kwadratowy (64×64px) w KAŻDYM kontekście
   (pełny Koszyk / Mini Cart) i na KAŻDEJ szerokości ekranu (poprzednia
   runda z prostokątem ~4:3 — 72×56 / 64×50 / 60×48 — była błędna
   diagnozą i została w całości wycofana). Kafelek
   (".wc-block-cart-item__image") niesie WYŁĄCZNIE ramkę (border/
   promień/overflow) — celowo BEZ własnego tła (ani białego, ani
   "surface"): ma pozostać neutralny/przezroczysty, zgodny z
   otoczeniem wiersza. */
body.woocommerce-cart .wc-block-cart-item__image,
.wc-block-mini-cart__drawer .wc-block-cart-item__image {
	width: 64px;
	height: 64px;
	min-width: 64px;
	max-width: 64px;
	flex: 0 0 64px;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	border: 1px solid var(--wp--preset--color--border);
	overflow: hidden;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

/* Techniczny, ukryty <img> — rzeczywisty markup kafelka w Cart i Mini
   Cart zawiera DWA "<img>": pierwszy ma natywny atrybut HTML "hidden"
   (techniczny/placeholder, NIE jest właściwym zdjęciem produktu),
   drugi — właściwe zdjęcie — jest zagnieżdżony w "<a>" tuż obok.
   Wcześniejsza reguła w tej sekcji celowała w KAŻDY "img" potomny
   (selektor bez ">"), co omyłkowo nadpisywało natywne, bardzo niską
   specyficznością chronione "display:none" tego technicznego obrazka
   i renderowało go jako dodatkowy element w kafelku. Wymuszamy jawnie
   i jednoznacznie, żeby zostawał ukryty. */
body.woocommerce-cart .wc-block-cart-item__image > img[hidden],
.wc-block-mini-cart__drawer .wc-block-cart-item__image > img[hidden] {
	display: none !important;
}

/* Link opakowujący WŁAŚCIWE zdjęcie — realny markup:
   ".wc-block-cart-item__image > a > img". Ten "<a>" nie ma nigdzie
   własnego rozmiaru — bez jawnej szerokości/wysokości jest tak duży,
   jak jego zawartość (naturalny rozmiar <img>), a nie jak kafelek.
   Ustawiamy mu dokładnie rozmiar kafelka, jawnie w pikselach (64×64px
   — nie "100%", żeby nie zależał pośrednio od box-sizingu/paddingu
   kafelka), i centrujemy w nim właściwe zdjęcie. */
body.woocommerce-cart .wc-block-cart-item__image > a,
.wc-block-mini-cart__drawer .wc-block-cart-item__image > a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 64px !important;
	height: 64px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}

/* Właściwe zdjęcie produktu — JEDYNA reguła stylująca widoczną
   miniaturę, celowana precyzyjnie w ">a>img" (a NIE w każdy "img"
   potomny — patrz reguła "[hidden]" wyżej, to ona teraz jednoznacznie
   rozdziela oba obrazki). MIKRO-POPRAWKA: poprzednia wersja celowo
   ustawiała zdjęcie o 1px większe niż kafelek (65×65 vs. 64×64), co w
   praktyce delikatnie przycinało prawą krawędź zdjęcia — usunięte;
   zdjęcie ma teraz dokładnie 64×64px, identycznie jak kafelek.
   "object-fit:contain" + "object-position:center" bez żadnego
   "transform" ani dodatkowego kadrowania — źródłowa miniatura
   WooCommerce jest już poprawnym, nieprzyciętym kwadratem (filtr
   "wenaro_thumbnail_image_size()" w functions.php, bez zmian w tej
   rundzie), więc nie jest potrzebny żaden zoom. Brak własnego tła na
   obrazku — ma pozostać neutralnie, zgodnie z kafelkiem. */
body.woocommerce-cart .wc-block-cart-item__image > a > img,
.wc-block-mini-cart__drawer .wc-block-cart-item__image > a > img {
	display: block;
	width: 64px !important;
	height: 64px !important;
	min-width: 64px !important;
	min-height: 64px !important;
	object-fit: contain;
	object-position: center center;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
}

/* Nazwa produktu */
body.woocommerce-cart .wc-block-components-product-name {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
}

a.wc-block-components-product-name:hover {
	color: var(--wp--preset--color--brand-dark);
}

/* Cena jednostkowa / suma pozycji */
body.woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price,
body.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

body.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
	font-size: 1rem;
}

/* Ilość — ta sama, sprawdzona stylistyka "pigułki" co w Single Product */
body.woocommerce-cart .wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: center;
	height: 44px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--sm);
	overflow: hidden;
	background: var(--wp--preset--color--background);
}

body.woocommerce-cart .wc-block-components-quantity-selector__input {
	border: none;
	height: 100%;
	width: 48px;
	text-align: center;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
}

body.woocommerce-cart .wc-block-components-quantity-selector__button {
	border: none;
	background: transparent;
	width: 34px;
	height: 100%;
	font-size: 1.05rem;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
}

body.woocommerce-cart .wc-block-components-quantity-selector__button:hover {
	background: var(--wp--preset--color--surface);
}

/* Usuwanie produktu — subtelny link tekstowy, nie przycisk */
body.woocommerce-cart .wc-block-cart-item__remove-link {
	margin-top: 8px;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	text-decoration: underline;
	text-underline-offset: 2px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

body.woocommerce-cart .wc-block-cart-item__remove-link:hover {
	color: var(--wp--preset--color--danger);
}

/* ---------- Podsumowanie zamówienia: lekka, wyraźna karta ---------- */

body.woocommerce-cart .wc-block-cart__sidebar {
	padding: 24px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-sizing: border-box;
}

body.woocommerce-cart .wc-block-cart__totals-title {
	margin: 0 0 16px;
	color: var(--wp--preset--color--ink);
	font-size: 1.125rem;
	font-weight: 700;
}

/* Wiersze: subtotal / dostawa / rabaty / podatki — jeden spójny wzorzec
   etykieta + wartość, cienki separator zamiast ramki */
body.woocommerce-cart .wc-block-components-totals-item {
	padding: 10px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
}

body.woocommerce-cart .wc-block-components-totals-item__label {
	color: var(--wp--preset--color--muted);
	font-weight: 500;
}

body.woocommerce-cart .wc-block-components-totals-item__value {
	font-weight: 600;
}

/* Rabat/kupon — wyróżniony delikatną zielenią, tylko wartość, bez ramki */
body.woocommerce-cart .wc-block-components-totals-discount .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--success);
}

/* Suma końcowa — mocno wyróżniona, oddzielona wyraźniejszą linią */
body.woocommerce-cart .wc-block-components-totals-item.wc-block-components-totals-footer-item {
	margin-top: 4px;
	padding: 16px 0 4px;
	border-bottom: none;
	border-top: 2px solid var(--wp--preset--color--border);
}

body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	font-size: 1rem;
}

body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--brand-dark);
	font-weight: 800;
	font-size: 1.375rem;
}

/* ---------- Kupon: pole + przycisk, lekko i profesjonalnie (bez zmiany działania) ---------- */

body.woocommerce-cart .wc-block-components-totals-coupon-link {
	color: var(--wp--preset--color--brand-dark);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

body.woocommerce-cart .wc-block-components-totals-coupon-link:hover {
	color: var(--wp--preset--color--brand);
}

body.woocommerce-cart .wc-block-components-totals-coupon__input input {
	width: 100%;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--sm);
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	box-sizing: border-box;
}

body.woocommerce-cart .wc-block-components-totals-coupon__button {
	min-height: 44px;
	padding: 0 20px;
	background: transparent;
	color: var(--wp--preset--color--brand-dark);
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: var(--wp--preset--border-radius--sm);
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}

body.woocommerce-cart .wc-block-components-totals-coupon__button:hover {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--background);
}

/* ---------- CTA: "Przejdź do zamówienia" — pełna szerokość, duży, brand ----------
   Dwa selektory celowo pokrywają zarówno klasę specyficzną dla bloku
   koszyka, jak i ogólną klasę przycisku elementu WordPressa, którą
   ten sam blok też nosi — niezależnie od tego, który wariant markupu
   faktycznie wystąpi, wygląd będzie identyczny. */

body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block .wp-element-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 16px 24px;
	margin-top: 20px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--background);
	border: none;
	border-radius: 12px;
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

body.woocommerce-cart .wc-block-cart__submit-button:hover,
body.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block .wp-element-button:hover {
	background: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--background);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* ---------- Koszyk pusty: estetyczny, natywny stan (bez własnej treści) ---------- */

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
	padding: 48px 24px;
	text-align: center;
	color: var(--wp--preset--color--muted);
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-filled-cart-block a,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-cart__submit-button {
	margin-inline: auto;
}

/* ---------- Dostępność: focus-visible na całej stronie koszyka ---------- */

body.woocommerce-cart .wc-block-cart a:focus-visible,
body.woocommerce-cart .wc-block-cart button:focus-visible,
body.woocommerce-cart .wc-block-cart input:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-dark);
	outline-offset: 2px;
	border-radius: var(--wp--preset--border-radius--sm);
}

/* ---------- Mobile: jedna kolumna, produkty najpierw, CTA pełnej szerokości ----------
   Kolejność DOM już to zapewnia — ".wc-block-cart__main" (produkty)
   występuje w markupie przed ".wc-block-cart__sidebar" (podsumowanie),
   więc samo złożenie kolumn w jedną wystarczy, żeby produkty były na
   górze. Ten sam próg co w Single Product (781px), dla spójności
   progów responsywnych w całym motywie. */

@media (max-width: 781px) {
	body.woocommerce-cart .wc-block-cart {
		flex-direction: column;
		gap: 32px;
	}

	body.woocommerce-cart .wc-block-cart .wc-block-cart__sidebar {
		flex-basis: auto;
		max-width: none;
	}

	/* Wygodne, większe pola ilości na dotyk */
	body.woocommerce-cart .wc-block-components-quantity-selector {
		height: 48px;
	}

	body.woocommerce-cart .wc-block-components-quantity-selector__input {
		width: 52px;
	}

	body.woocommerce-cart .wc-block-components-quantity-selector__button {
		width: 40px;
	}
}

/* ---------- Koszyk mobile: boczny gutter głównego kontenera ----------
   Rzeczywisty szablon strony Koszyk (zweryfikowany względem
   oficjalnego, natywnego pliku WooCommerce "templates/page-cart.html",
   nie zgadywany):

   <main class="wp-block-group">      (zwykły, ogólny wrapper — TA
                                        strona używa normalnego
                                        "parts/header.html", bez
                                        specjalnego nagłówka)
     <h1 class="wp-block-post-title alignwide">Koszyk</h1>
     <div class="entry-content wp-block-post-content alignwide">
       … <div class="wp-block-woocommerce-cart">…</div> …
     </div>
   </main>

   Nagłówek "Koszyk" i treść Cart Block są RODZEŃSTWEM wewnątrz tego
   samego, ogólnego "<main>" — oba "align:wide", żadne z nich nie ma
   własnego poziomego paddingu, więc oba dotykają krawędzi ekranu na
   mobile identycznie (dokładnie to zgłoszenie). Padding na tym jednym,
   wspólnym "<main>" (scope przez "body.woocommerce-cart" — natywna
   klasa WYŁĄCZNIE strony koszyka, więc reguła nie wycieka na żadną
   inną stronę korzystającą z tego samego, ogólnego ".wp-block-group")
   daje odstęp nagłówkowi I treści koszyka JEDNYM, spójnym gutterem —
   16px | treść | 16px — bez paddingu na "body", i bez podwójnego
   paddingu (dodanie go OSOBNO jeszcze raz na ".wp-block-woocommerce-cart"
   dawałoby 32px tylko dla treści koszyka, niespójne z nagłówkiem).
   Karta podsumowania (".wc-block-cart__sidebar") ma swój własny,
   niezależny padding — inny poziom, bez konfliktu. Układ produktu i
   podsumowania (poprawki z poprzednich rund w tym wątku) — nietknięty. */

@media (max-width: 600px) {
	body.woocommerce-cart main.wp-block-group {
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}
}

/* =========================================================
   Cart & Mini Cart — wiersz produktu jako mini karta — wenaro
   Poprawki dla natywnych bloków "woocommerce/cart" (pełny Koszyk) i
   "woocommerce/mini-cart" (Mini Cart w headerze) — bez żadnej własnej
   logiki, PHP ani JS.

   1) Ukrycie krótkiego opisu produktu (marketingowy "description" z
      metadanych produktu) w obu koszykach.
   2) Wiersz produktu przestaje wyglądać "tabelkowo" — NA KAŻDEJ
      SZEROKOŚCI, nie tylko na mobile.

   Realny mechanizm (zweryfikowany w opublikowanym, skompilowanym CSS
   bloków Cart/Mini Cart WooCommerce — nie zgadywany): ".wc-block-cart-items"
   to prawdziwa <table>, a wiersz produktu ".wc-block-cart-items__row"
   to realnie <tr> z czterema komórkami <td> (".wc-block-cart-item__image",
   "__product" — nazwa, "__quantity" — ilość+usuń, "__total" — cena).
   Domyślnie WooCommerce renderuje je jako zwykłe kolumny tabeli na
   szerokich ekranach — stąd "tabelkowy" wygląd zgłoszony w tej rundzie,
   niezależnie od tego, jak ładnie wygląda sama miniatura w środku.

   Poprawka: wiersz i jego komórki dostają jawnie "display: grid" z
   układem 2 kolumn — [kafelek miniatury] [treść: nazwa / cena / ilość,
   każda jako własny wiersz tej samej, drugiej kolumny] — dokładnie ten
   układ "kafelek + tekst", o który prosisz, zamiast czterech osobnych
   kolumn tabeli. Kafelek rozciąga się przez wszystkie 3 wiersze treści
   (grid-row: 1 / span 3) i jest wyśrodkowany w pionie, więc wizualnie
   "obejmuje" cały wiersz zamiast siedzieć tylko przy nazwie. Ten sam
   mechanizm obowiązuje teraz BEZWARUNKOWO (bez media query) — kafelek
   (64×64px) i odstępy są dziś identyczne na każdej szerokości ekranu;
   jedyna rzecz różna na mobile to mniejszy pionowy padding wiersza,
   ustawiony osobno w bloku "@media max-width:600px" na końcu tej
   sekcji. Nagłówek tabeli ("Produkt"/"Cena"/"Ilość"/"Łącznie") nie
   pasuje już do układu kart, więc jest ukryty na każdej szerokości.

   "!important" użyty świadomie dla właściwości układu wiersza produktu
   (grid/szerokości): poprzednia wersja tej poprawki (bez "!important")
   została w praktyce przebita przez natywny CSS bloków WooCommerce —
   prawdopodobnie drukowany w <head> PO arkuszu motywu — więc samo
   zwiększenie specyficzności selektora nie dawało gwarancji wygranej w
   kaskadzie. Dotyczy to teraz wszystkich szerokości, nie tylko mobile,
   bo "tabelkowy" wygląd zgłoszony w tej rundzie występował też na
   desktopie.

   Uwaga: nazwy klas wewnętrznych bloków WooCommerce (".wc-block-*")
   są przez samo WooCommerce określane jako prywatne/wewnętrzne i mogą
   się zmienić w przyszłej wersji.
   ========================================================= */

/* ---------- 1) Krótki opis produktu — ukryty w Koszyku i Mini Cart ----------
   Realna klasa: ".wc-block-components-product-metadata__description"
   (osobna od ".wc-block-components-product-metadata__variation-data",
   więc warianty/atrybuty produktu zostają widoczne). Scope ograniczony
   do pełnego Koszyka i Mini Cart — Checkout ma inny scope
   (".wc-block-checkout") i nie jest tu w ogóle dotykany, więc
   podsumowanie zamówienia na checkoucie zachowuje się bez zmian. */

body.woocommerce-cart .wc-block-components-product-metadata__description,
.wc-block-mini-cart__drawer .wc-block-components-product-metadata__description {
	display: none;
}

/* ---------- 2) Wiersz produktu: mini karta zamiast tabeli ----------
   Wspólny blok reguł dla pełnego Koszyka i Mini Cart — te same, realne
   klasy w obu kontekstach. Kolumna 1 (kafelek) ma stałą szerokość
   (nigdy się nie kurczy ani nie rośnie — dokładnie efekt, jaki dawałoby
   "flex: 0 0 auto" w układzie flex), kolumna 2 elastyczna
   ("minmax(0, 1fr)") na całą resztę treści. Kafelek jest teraz
   identyczny (64×64px) w OBU kontekstach i na KAŻDEJ szerokości ekranu
   (patrz sekcja "Miniatura produktu" wyżej), więc — inaczej niż w
   poprzedniej rundzie — "grid-template-columns" jest znów JEDNĄ,
   wspólną regułą zamiast dwóch osobnych per-kontekst. Odstęp między
   kafelkiem a tekstem: 14px, bez zmian między desktopem a mobile. */

body.woocommerce-cart .wc-block-cart-items__row,
.wc-block-mini-cart__drawer .wc-block-cart-items__row {
	display: grid !important;
	grid-template-columns: 64px minmax(0, 1fr) !important;
	column-gap: 14px !important;
	row-gap: 4px !important;
	align-items: start !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding: 18px 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

body.woocommerce-cart .wc-block-cart-items__row:last-child,
.wc-block-mini-cart__drawer .wc-block-cart-items__row:last-child {
	border-bottom: none;
}

/* Kafelek — kolumna 1, rozciągnięty przez wszystkie 3 wiersze treści i
   wyśrodkowany w pionie względem całego bloku tekstu obok niego.
   Rozmiar (64×64px, identyczny w obu kontekstach i na każdej
   szerokości ekranu) i wygląd (border/promień/overflow, bez tła)
   pochodzą z sekcji "Miniatura produktu" wyżej — tutaj tylko pozycja
   w gridzie. */
body.woocommerce-cart .wc-block-cart-item__image,
.wc-block-mini-cart__drawer .wc-block-cart-item__image {
	grid-column: 1 !important;
	grid-row: 1 / span 3 !important;
	align-self: center !important;
}

/* Nazwa (+ warianty) — kolumna 2, wiersz 1. */
body.woocommerce-cart .wc-block-cart-item__product,
.wc-block-mini-cart__drawer .wc-block-cart-item__product {
	grid-column: 2 !important;
	grid-row: 1 !important;
	min-width: 0 !important;
	max-width: none !important;
	padding: 0 !important;
}

body.woocommerce-cart .wc-block-cart-item__wrap,
.wc-block-mini-cart__drawer .wc-block-cart-item__wrap {
	min-width: 0;
}

body.woocommerce-cart .wc-block-components-product-name,
.wc-block-mini-cart__drawer .wc-block-components-product-name {
	display: block;
	width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
	white-space: normal;
}

body.woocommerce-cart .wc-block-cart-item__prices,
.wc-block-mini-cart__drawer .wc-block-cart-item__prices {
	flex-wrap: wrap;
	min-width: 0;
}

/* Cena + "Oszczędzasz" — kolumna 2, wiersz 2 (pod nazwą, w TEJ SAMEJ
   kolumnie co tekst — to teraz naprawdę osobna kolumna gridu, więc nie
   jest już potrzebne ręczne wcięcie paddingiem pod szerokość kafelka,
   jak w poprzedniej, mobile-only wersji tej poprawki). */
body.woocommerce-cart .wc-block-cart-item__total,
.wc-block-mini-cart__drawer .wc-block-cart-item__total {
	grid-column: 2 !important;
	grid-row: 2 !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	text-align: left !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price,
.wc-block-mini-cart__drawer .wc-block-cart-item__total .wc-block-components-product-price,
body.woocommerce-cart .wc-block-cart-item__total .wc-block-components-formatted-money-amount,
.wc-block-mini-cart__drawer .wc-block-cart-item__total .wc-block-components-formatted-money-amount {
	min-width: 0;
}

body.woocommerce-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-block-mini-cart__drawer .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	align-items: flex-start !important;
	width: 100%;
}

/* Ilość + usuń — kolumna 2, wiersz 3 (pod ceną, ta sama kolumna). */
body.woocommerce-cart .wc-block-cart-item__quantity,
.wc-block-mini-cart__drawer .wc-block-cart-item__quantity {
	grid-column: 2 !important;
	grid-row: 3 !important;
	width: auto !important;
	padding: 0 !important;
	margin-top: 4px;
}

body.woocommerce-cart .wc-block-components-quantity-selector,
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector {
	width: auto;
	max-width: 100%;
}

/* Nagłówek tabeli (kolumny "Produkt"/"Cena"/"Ilość"/"Łącznie") nie
   pasuje już do układu kart — ukryty na KAŻDEJ szerokości (poprzednio
   tylko na mobile). Przycisk usuwania NIE jest ukrywany — WooCommerce
   natywnie robi to na wąskich szerokościach, ale to koliduje z
   wymogiem zachowania przycisku usuwania w obu koszykach, więc
   świadomie to nadpisujemy. */
body.woocommerce-cart .wc-block-cart-items__header,
.wc-block-mini-cart__drawer .wc-block-cart-items__header {
	display: none !important;
}

body.woocommerce-cart .wc-block-cart-item__remove-link,
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link {
	display: inline !important;
	white-space: nowrap;
}

/* ---------- 3) Mobile: węższy padding wiersza, bez scrolla ----------
   Sama STRUKTURA (grid 2-kolumnowy, rozmieszczenie komórek) jest już
   ustawiona bezwarunkowo wyżej. Kafelek (64×64px) i odstęp od tekstu
   (14px) są teraz IDENTYCZNE na każdej szerokości ekranu — patrz
   sekcje "Miniatura produktu" i "Wiersz produktu: mini karta zamiast
   tabeli" wyżej — więc nie ma już tu osobnych, per-kontekst reguł
   rozmiaru kafelka ani "grid-template-columns". Jedyna rzecz zmieniana
   na mobile to mniejszy pionowy padding wiersza (kompaktowy widok) oraz
   pilnowanie, żeby szuflada Mini Cart nie dostała poziomego scrolla. */

@media (max-width: 600px) {
	body.woocommerce-cart .wc-block-cart-items__row,
	.wc-block-mini-cart__drawer .wc-block-cart-items__row {
		padding: 14px 0 !important;
	}

	.wc-block-mini-cart__drawer,
	.wc-block-mini-cart__drawer.wc-block-components-drawer,
	.wc-block-mini-cart__drawer .wc-block-components-drawer__screen-overlay,
	.wc-block-mini-cart__drawer .wc-block-mini-cart__main {
		width: 100vw !important;
		max-width: 100vw !important;
		overflow-x: hidden !important;
		box-sizing: border-box !important;
	}

	.wc-block-mini-cart__drawer table.wc-block-cart-items,
	.wc-block-mini-cart__drawer .wc-block-mini-cart-items {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* =========================================================
   Pełny Koszyk — blok cenowy pod ilością, wartości CAŁEJ pozycji —
   wenaro (runda "REALNY OUTERHTML")

   AUDYT: pełny Koszyk i Mini Cart renderują TEN SAM komponent
   ("CartLineItemRow", plik "cart-line-item-row.tsx") — dwa niezależne
   renderowania ceny na wiersz:
     RENDER #1 (".wc-block-cart-item__prices", wewnątrz ".wrap", NAD
       ilością w dokumencie) — dostaje "regularPrice"/"price" per SZTUKĘ
       ("regularAmountSingle"/"purchaseAmountSingle") — NIGDY nie mnoży
       przez ilość.
     RENDER #2 (".wc-block-cart-item__total", osobna komórka <td>,
       naprawdę osobny wiersz gridu — patrz sekcja "mini karta" wyżej,
       gdzie to działa, bo to bezpośrednie dziecko gridu ".wc-block-cart-items__row")
       — dostaje WYŁĄCZNIE "price" = "totals.line_subtotal" z realnego
       Store API, czyli cenę SPRZEDAŻOWĄ × ILOŚĆ (już poprawnie
       przeliczoną przez WooCommerce, aktualizującą się automatycznie
       przy zmianie ilości) — a plakietka "Oszczędzasz" dostaje
       "saleAmountSingle * quantity", czyli TOTALNE savings.

   Zadanie tej rundy wymaga, żeby blok cenowy pod ilością pokazywał
   WARTOŚCI CAŁEJ POZYCJI (nie sztuki) — czyli dokładnie dane, które
   RENDER #2 już ma. Rozwiązanie: RENDER #1 (cena za sztukę, nad
   ilością) znika całkowicie w pełnym Koszyku; jedynym widocznym
   blokiem cenowym zostaje RENDER #2 (już poprawnie pozycjonowany pod
   ilością przez istniejący grid wyżej), z tymi samymi etykietami
   ("Cena regularna:"/"Cena po rabacie:"/"Cena:") co w Mini Cart.

   BRAKUJĄCE OGNIWO: "Cena regularna" dla CAŁEJ pozycji (regularna
   cena za sztukę × ilość) nie jest renderowana przez WooCommerce
   NIGDZIE w DOM — RENDER #2 nigdy nie dostaje "regularPrice". Ta
   wartość jest doliczana skryptem "wenaro-cart-regular-totals.js"
   (patrz ten plik) na podstawie REALNYCH, liczbowych danych z
   publicznego, oficjalnego store'a danych WooCommerce Blocks
   ("wc/store/cart" — pakiet "public-api/block-data", nie prywatne
   wewnętrzności) — "prices.raw_prices.regular_price" × "quantity" —
   a NIE przez parsowanie wyrenderowanego tekstu ceny. Skrypt dopisuje
   wynik jako osobny, w pełni oznaczony elementem wizualny wiersz
   ("Cena regularna: …") na początku tego samego bloku, w tym samym
   miejscu i stylu co pozostałe etykiety. Zero hardkodowanych cen —
   liczona wyłącznie z danych bieżącego produktu i bieżącej ilości. */

body.woocommerce-cart .wc-block-cart-items:not(.wc-block-mini-cart-items) .wc-block-cart-item__prices {
	display: none;
}

/* RENDER #2 — jedyny widoczny blok cenowy pod ilością w pełnym
   Koszyku. Rozróżnienie promocja/brak promocji NIE może opierać się
   o klasę "is-discounted" (RENDER #2 nigdy jej nie dostaje — nigdy nie
   ma "regularPrice", patrz audyt wyżej) — użyty jest za to realny,
   natywny sygnał: obecność plakietki "Oszczędzasz"
   (".wc-block-components-sale-badge", komponent "ProductSaleBadge",
   renderowany przez WooCommerce jako "null" gdy "saleAmount<=0") — to
   dokładnie ten sam warunek, którego używa sam WooCommerce, więc zero
   zgadywania. */
body.woocommerce-cart .wc-block-cart-items:not(.wc-block-mini-cart-items) .wc-block-cart-item__total-price-and-sale-badge-wrapper:has(.wc-block-components-sale-badge) .wc-block-components-product-price__value::before {
	content: "Cena po rabacie: ";
	font-weight: 400;
	color: var(--wp--preset--color--ink);
}

body.woocommerce-cart .wc-block-cart-items:not(.wc-block-mini-cart-items) .wc-block-cart-item__total-price-and-sale-badge-wrapper:not(:has(.wc-block-components-sale-badge)) .wc-block-components-product-price__value::before {
	content: "Cena: ";
	font-weight: 400;
	color: var(--wp--preset--color--ink);
}

body.woocommerce-cart .wc-block-cart-items:not(.wc-block-mini-cart-items) .wc-block-cart-item__total .wc-block-components-product-price {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

/* Wiersz "Cena regularna: …" — CAŁOŚCIĄ wstrzykiwany przez
   "wenaro-cart-regular-totals.js" (patrz ten plik), TYLKO dla pozycji
   faktycznie objętych promocją. Etykieta i wartość to od razu dwa
   osobne, realne elementy (skrypt sam je tak buduje), więc — inaczej
   niż przy "<del>" natywnie renderowanym przez WooCommerce — nie ma
   tu problemu z "rozlewaniem się" przekreślenia na etykietę: sam
   skrypt przekreśla WYŁĄCZNIE wewnętrzny "<span class="…__amount">". */
.wenaro-cart-regular-total {
	display: block;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	order: -1;
}

.wenaro-cart-regular-total .wenaro-cart-regular-total__amount {
	text-decoration: line-through;
}

body.woocommerce-cart .wc-block-cart-items:not(.wc-block-mini-cart-items) .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	flex-direction: column;
}

/* =========================================================
   Mini Cart "Twój koszyk" — jeden blok ceny pod ilością — wenaro
   Poprawka WYŁĄCZNIE dla bocznej szuflady "woocommerce/mini-cart"
   (".wc-block-mini-cart__drawer") — Pełny Koszyk nie jest tu w ogóle
   dotykany: żaden z poniższych selektorów nie zawiera samego
   "body.woocommerce-cart" ani gołego ".wc-block-cart-item__*" bez
   przedrostka ".wc-block-mini-cart__drawer" (inaczej niż wspólna
   sekcja "Cart & Mini Cart" wyżej w tym pliku, celowo NIEDOTKNIĘTA
   w tej rundzie).

   AUDYT (zweryfikowany względem realnego kodu źródłowego React
   WooCommerce Blocks, nie zgadywany — plik
   "plugins/woocommerce/client/blocks/assets/js/base/components/
   cart-checkout/cart-line-items-table/cart-line-item-row.tsx"):
   Mini Cart renderuje wiersz produktu DOKŁADNIE tym samym komponentem
   co Pełny Koszyk ("CartLineItemsTable" — patrz
   "mini-cart-products-table-block/block.tsx"), stąd identyczne klasy
   w obu miejscach.

   Rzeczywista hierarchia DOM jednego wiersza (produkt w promocji):

   <tr class="wc-block-cart-items__row">
     <td class="wc-block-cart-item__image">...</td>
     <td class="wc-block-cart-item__product">
       <div class="wc-block-cart-item__wrap">              (flex-column, natywne SCSS)
         <a class="wc-block-components-product-name">Nazwa</a>
         <div class="wc-block-cart-item__prices">          ← RENDER #1 — "POD NAZWĄ"
           <span class="price wc-block-components-product-price">
             <del class="wc-block-components-product-price__regular">686,25 zł</del>
             <ins class="wc-block-components-product-price__value is-discounted">539,00 zł</ins>
           </span>
         </div>
         <div class="wc-block-components-product-metadata">...</div>  (opis — już ukryty wcześniej)
         <div class="wc-block-cart-item__quantity">…ilość + usuń…</div>
       </div>
     </td>
     <td class="wc-block-cart-item__total">
       <div class="wc-block-cart-item__total-price-and-sale-badge-wrapper">
         <span class="price wc-block-components-product-price">     ← RENDER #2 — "PONOWNIE 539,00 zł"
           <span class="wc-block-components-product-price__value">539,00 zł</span>
         </span>
         <div class="wc-block-components-product-badge wc-block-components-sale-badge">
           Oszczędzasz 147,25 zł                                     ← natywny komunikat WooCommerce
         </div>
       </div>
     </td>
   </tr>

   Odpowiedzi na audyt (p. 1–5 zadania):
   1–2. "686,25 zł" (przekreślona) i pierwsze "539,00 zł" pod nazwą:
      OBA z jednego renderu — ".wc-block-cart-item__prices" →
      komponent "ProductPrice" z propsami "regularPrice"/"price" Z CENY
      JEDNOSTKOWEJ (za 1 szt., niezależnie od ilości).
   3. Drugie "539,00 zł" (w okolicy ilości): OSOBNY render w
      ".wc-block-cart-item__total" — "ProductPrice" z
      "price={subtotalPrice}" (SUMA WIERSZA = cena × ilość), BEZ
      przekazanego "regularPrice" — kod źródłowy w ogóle nie przekazuje
      tu tego propsa, więc to renderowanie NIGDY nie ma "<del>". Przy
      ilości 1 liczbowo wychodzi to samo co RENDER #1 — to zbieg
      okoliczności (ilość=1), nie to samo miejsce w kodzie.
   4. "Oszczędzasz 147,25 zł": komponent "ProductSaleBadge" (natywne
      tłumaczenie WooCommerce PL: "Save %s" → "Oszczędzasz %s"), stały
      sąsiad RENDERU #2 w tym samym
      ".wc-block-cart-item__total-price-and-sale-badge-wrapper". Nie ma
      nic wspólnego z Wenaro Price History — ten komunikat w ogóle nie
      jest wstrzykiwany do Mini Cart/Koszyka (hook
      "woocommerce_get_price_html" z "class-wenaro-ph-frontend.php"
      działa wyłącznie na listingach produktów), więc nie ma tu niczego
      z tamtego mechanizmu do przypadkowego ukrycia.
   5. Hierarchia: RENDER #1 i ilość+usuń są W TEJ SAMEJ komórce
      (".wc-block-cart-item__product"), jedno pod drugim w naturalnym
      układzie flex ".wc-block-cart-item__wrap" (kolejność w DOM: nazwa
      → RENDER #1 → opis (ukryty) → ilość+usuń). RENDER #2 i
      "Oszczędzasz" są w OSOBNEJ komórce (".wc-block-cart-item__total").
      Efekt uboczny znaleziony przy tym audycie: reguła "grid-row: 3" na
      ".wc-block-cart-item__quantity" w sekcji "Cart & Mini Cart" wyżej
      w tym pliku jest w praktyce MARTWYM CSS — ten element nie jest
      bezpośrednim dzieckiem gridu ".wc-block-cart-items__row" (jest
      zagnieżdżony dwa poziomy głębiej), więc "grid-row"/"grid-column"
      na nim nic nie robią; to dokładnie dlatego druga cena i
      "Oszczędzasz" wychodzą wizualnie "w okolicy ilości" — sąsiadująca
      komórka. Ta martwa reguła NIE jest tu naprawiana (współdzielony
      selektor z Pełnym Koszykiem, poza zakresem tej rundy) — poniższe
      poprawki celowo omijają problem inną metodą, patrz niżej.

   DECYZJA (p. 5 zadania): RENDER #1 to jedyne miejsce, które natywnie
   ma razem starą i nową cenę (prawdziwy "<del>"+"<ins>") — RENDER #2
   nigdy nie dostaje "regularPrice", więc nie da się z niego zrobić
   pary cen bez ręcznego dopisywania kwoty (zabronione zadaniem).
   Dlatego RENDER #1 zostaje JEDYNYM widocznym blokiem cenowym — flex
   "order" przenosi go WIZUALNIE (nie w DOM) z "pod nazwą" na "pod
   ilością", w tej samej, natywnej kolumnie flex
   ".wc-block-cart-item__wrap" (potwierdzone jako "display:flex;
   flex-direction:column" w natywnym SCSS tego komponentu). RENDER #2
   (goła, zdublowana kwota) jest ukrywany — ale tylko sama cena, NIE
   cały wrapper, więc sąsiadujący "Oszczędzasz" zostaje widoczny w tym
   samym miejscu, teraz jako jedyna zawartość tej komórki.

   Świadomie zaakceptowany efekt uboczny (zgłoszony w raporcie): przy
   ilości > 1 widoczna cena (z RENDER #1) jest CENĄ JEDNOSTKOWĄ, nie
   sumą wiersza (którą pokazywał RENDER #2) — a "Oszczędzasz" i tak już
   natywnie skaluje się razy ilość ("saleAmount={saleAmountSingle *
   quantity}" w kodzie źródłowym). Wynika to wyłącznie z ponownego
   wykorzystania istniejących, natywnych danych WooCommerce (zgodnie z
   wymogiem zadania), a nie z nowego wyliczenia.
   ========================================================= */

/* ---------- 1) Kolejność wewnątrz karty produktu (flex "order") ----------
   ".wc-block-cart-item__wrap" jest natywnie flex-column — "order" na
   jego bezpośrednich dzieciach zmienia WYŁĄCZNIE kolejność wizualną,
   bez ruszania DOM/danych. Nazwa (i ewentualna odznaka "backorder")
   zostają na domyślnym "order: 0" (kolejność dokumentu, bez zmian).
   Opis (ProductMetadata) dostaje jawny "order", żeby nie zostawiać
   przypadkowej luki, mimo że i tak jest pusty/ukryty (sekcja wyżej w
   tym pliku). "Zapisz na później" (eksperymentalna, rzadko włączona
   funkcja WooCommerce) dostaje najwyższy "order" wyłącznie
   defensywnie — gdyby była kiedyś włączona, ma zostać na samym końcu
   zamiast przeskoczyć przed nazwę (jej domyślne "order: 0" inaczej
   wygrałoby kolejnością dokumentu). */

.wc-block-mini-cart__drawer .wc-block-cart-item__wrap > .wc-block-components-product-metadata {
	order: 2;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__wrap > .wc-block-cart-item__quantity {
	order: 3;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__wrap > .wc-block-cart-item__prices {
	order: 4;
	margin-top: 8px;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__wrap > .wc-block-cart-item__save-for-later {
	order: 5;
}

/* ---------- 2) Wygląd jedynego bloku cenowego (RENDER #1, teraz pod ilością) ----------
   POPRAWKA (ta runda — zastępuje poprzedni, "poziomy" wariant tej
   reguły): docelowy układ jest teraz PIONOWY, zgodnie z jawnym
   schematem z zadania —

     686,25 zł
     Cena po rabacie: 539,00 zł
     [Oszczędzasz 147,25 zł]

   — czyli stara cena na WŁASNEJ linii, a nie obok nowej. Stara cena:
   mniejsza, muted, przekreślona (przekreślenie jest już natywne na
   "<del>", ustawione tu jawnie niezależnie od ewentualnego resetu
   stylów). Etykieta "Cena po rabacie:" jest DOPISANA przez CSS
   "::before" na aktualnej cenie — to WYŁĄCZNIE statyczny tekst
   interfejsu (nie liczba, nie dana cenowa), analogicznie do tego, jak
   natywny komunikat WooCommerce "Oszczędzasz %s" jest zbudowany z
   gotowego tłumaczenia + realnej, natywnie renderowanej kwoty. Sama
   liczba "539,00 zł" nadal pochodzi w 100% z natywnego, renderowanego
   przez WooCommerce "<ins>" — nic nie jest tu dopisywane ręcznie ani
   przeliczane. Etykieta pojawia się WYŁĄCZNIE przy prawdziwej
   promocji — celuje w klasę "is-discounted", którą WooCommerce dodaje
   tylko wtedy, gdy produkt faktycznie jest przeceniony (patrz
   "ProductPrice" w audycie wyżej: "isDiscounted = regularPrice!==
   undefined && price<regularPrice") — dla produktu bez promocji ta
   klasa nie istnieje, więc etykieta w ogóle się nie renderuje i cena
   zostaje pokazana samodzielnie (wymóg p. 7 zadania), bez żadnego
   dodatkowego przypadku szczególnego w tej regule. Etykieta ma
   świadomie NIŻSZĄ wagę (400) niż sama cena (700, ustawiona na
   elemencie-rodzicu) — inaczej odziedziczyłaby pogrubienie po
   "<ins>". */

.wc-block-mini-cart__drawer .wc-block-cart-item__prices {
	display: block;
}

/* POPRAWKA (runda "REALNY OUTERHTML" — zastępuje poprzednie podejście
   "flex-direction:column" na wewnętrznym "<span class="price">").

   Powód zmiany, potwierdzony EMPIRYCZNIE (test w Playwright/Chromium,
   nie teoria): etykieta "Cena regularna:" musi wizualnie stać PRZED
   przekreśloną wartością, na TEJ SAMEJ linii, ale sama etykieta NIE
   może być przekreślona. Standardowa sztuczka CSS "text-decoration:
   none" na potomku/pseudo-elemencie wewnątrz "<del>" NIE DZIAŁA w
   żadnej przeglądarce (zweryfikowane bezpośrednio: nawet PRAWDZIWY
   "<span style="text-decoration:none">" zagnieżdżony w "<del>" nadal
   wychodzi przekreślony na renderze — linia przekreślenia elementu
   nadrzędnego "rozlewa się" na całą zawartość potomną niezależnie od
   lokalnego resetu). Jedyny realny sposób, żeby etykieta NIE była
   przekreślona, to umieszczenie jej POZA "<del>" — czyli jako
   "::before" na RODZICU ("<span class="price">"), a nie na samym
   "<del>".

   Stąd rezygnacja z flex/column na ".price": zamiast tego ".price"
   wraca do zwykłego, blokowego przepływu ("display:block", nadpisuje
   natywny "display:flex" z "cart-line-items-table/style.scss"), a
   rozdzielenie na osobne linie realizuje WYŁĄCZNIE
   ".wc-block-components-product-price__value { display:block }"
   niżej — blokowy element zawsze zaczyna nową linię, więc "<ins>"/
   drugi "<span>" ceny ląduje pod "<del>" automatycznie, bez potrzeby
   flexboksa. "<del>" zostaje swoim naturalnym "display:inline" —
   dzięki temu etykieta "::before" na rodzicu ("Cena regularna: ") i
   tekst "<del>" ("686,25 zł") współdzielą JEDNĄ linię (oba inline),
   a przekreślenie zostaje TYLKO na samym "<del>". Natywny
   "<span class="screen-reader-text">" jest w tym samym rodzicu, ale
   ma "position:absolute" (reset WordPressa) — jest fizycznie wyjęty z
   przepływu, więc nie wpływa na ten podział na linie. */
.wc-block-mini-cart__drawer .wc-block-cart-item__prices .price {
	display: block;
}

/* Etykieta "Cena regularna: " — na RODZICU (".price"), warunkowana
   "'':has()" wyłącznie na obecność prawdziwego "<del>" (czyli
   wyłącznie gdy produkt faktycznie ma cenę regularną różną od
   sprzedażowej — to samo kryterium, którego WooCommerce używa do
   zdecydowania, czy w ogóle wyrenderować "<del>"). Wsparcie ":has()"
   we wszystkich głównych przeglądarkach od 2023 — w razie braku
   wsparcia degradacja jest łagodna: sama cena nadal się poprawnie
   wyświetla, znika tylko dodatkowa etykieta wizualna. */
.wc-block-mini-cart__drawer .wc-block-cart-item__prices .price:has(.wc-block-components-product-price__regular)::before {
	content: "Cena regularna: ";
	font-weight: 400;
	color: var(--wp--preset--color--ink);
}

.wc-block-mini-cart__drawer .wc-block-cart-item__prices .wc-block-components-product-price__regular {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	text-decoration: line-through;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__prices .wc-block-components-product-price__value {
	display: block;
	margin-top: 2px;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.wc-block-mini-cart__drawer .wc-block-cart-item__prices .wc-block-components-product-price__value.is-discounted::before {
	content: "Cena po rabacie: ";
	font-weight: 400;
	color: var(--wp--preset--color--ink);
}

/* POPRAWKA (runda "dwie drobne poprawki", DESKTOP ONLY) — zgłoszenie:
   na żywym Mini Cart, na desktopie "Cena regularna: 686,25 zł" i
   "Cena po rabacie: 539,00 zł" renderują się obok siebie w jednej
   linii, mimo że ".price { display: block }" i
   ".wc-block-components-product-price__value { display: block }"
   wyżej powinny już wymuszać układ pionowy (i realnie tak robią w
   izolowanym teście). Realny outerHTML dostarczony w tej rundzie
   pochodzi z nowszej, sterowanej Interactivity API wersji tego
   komponentu Mini Cart ("data-wp-bind"/"data-wp-text") — inny wariant
   renderowania niż ten, na którym opierał się poprzedni audyt; nie da
   się z tego poziomu ze 100% pewnością zdiagnozować, co dokładnie na
   żywym desktopie nadpisuje regułę wyżej (późniejszy w kaskadzie
   natywny styl WooCommerce dla tego wariantu component jest
   najbardziej prawdopodobny).

   Zgodnie z wymogiem tej rundy ("zmiana WYŁĄCZNIE na desktopie, nie
   ruszaj mobile, minimalna zmiana, wykorzystaj istniejące
   rozwiązanie") — reguły WYŻEJ zostają całkowicie NIETKNIĘTE (to na
   nich opiera się dzisiejszy, zaakceptowany wygląd na mobile, więc
   ich zmiana byłaby ryzykiem regresji na mobile). Poniższy blok
   TYLKO DODAJE, wyłącznie od 601px wzwyż (poza zasięgiem istniejącego
   mobile breakpointu "max-width:600px" używanego w tym pliku wyżej),
   te same dwie deklaracje z "!important", żeby pewnie wygrać z
   czymkolwiek nadpisuje układ na desktopie — bez tworzenia
   równoległej, drugiej implementacji etykiet/układu. */
@media (min-width: 601px) {
	.wc-block-mini-cart__drawer .wc-block-cart-item__prices .price {
		display: block !important;
	}

	/* POPRAWKA (runda "dwie drobne poprawki #2") — powyższe
	   "!important" niechcący pokazywało też DRUGI wariant tego
	   samego komponentu cenowego: gałąź BEZ rabatu ("Cena: 539,00
	   zł"), którą Interactivity API trzyma w DOM jako rodzeństwo
	   gałęzi Z rabatem i ukrywa natywnym atrybutem "hidden" (patrz
	   "data-wp-bind--hidden" w realnym outerHTML — dla produktu w
	   promocji ukryta ma być WYŁĄCZNIE ta druga, "zwykła" gałąź).
	   Natywny reset WooCommerce (".wc-block-components-product-price[hidden]
	   {display:none}") ma NIŻSZĄ specyficzność niż powyższa reguła
	   ".price {display:block!important}", więc bez tej poprawki
	   przegrywał, mimo elementu realnie oznaczonego jako "[hidden]".
	   Poniższa reguła celuje precyzyjnie WYŁĄCZNIE w element z
	   atrybutem "[hidden]" (czyli realnie ukrytą przez samo
	   WooCommerce gałąź) — nie ukrywa niczego innego, nie dotyka
	   klasy ".wc-block-components-product-price__value" ani
	   ".price" globalnie (te same klasy mogą wystąpić w innych,
	   niezwiązanych kontekstach WooCommerce). */
	.wc-block-mini-cart__drawer .wc-block-cart-item__prices .price[hidden] {
		display: none !important;
	}

	.wc-block-mini-cart__drawer .wc-block-cart-item__prices .wc-block-components-product-price__value {
		display: block !important;
		margin-left: 0 !important;
	}
}

/* Produkt BEZ promocji: WooCommerce w ogóle nie renderuje "<ins>"
   ani klasy "is-discounted" w tym przypadku (patrz audyt
   "ProductPrice" — "isDiscounted" jest false), więc powyższa reguła
   "Cena po rabacie:" tu się nie uruchamia — sama wartość byłaby
   pokazana bez żadnej etykiety. Ta runda wprost chce etykietę "Cena:"
   też dla zwykłego produktu — scope przez ":not(.is-discounted)" więc
   dotyczy WYŁĄCZNIE tego przypadku, zero ryzyka podwójnej etykiety na
   produkcie promocyjnym. Element bez "is-discounted" nigdy nie ma
   "text-decoration", więc tu bleed-through w ogóle nie wchodzi w grę
   — etykieta może być bezpiecznie dopisana bezpośrednio na nim. */
.wc-block-mini-cart__drawer .wc-block-cart-item__prices .wc-block-components-product-price__value:not(.is-discounted)::before {
	content: "Cena: ";
	font-weight: 400;
	color: var(--wp--preset--color--ink);
}

/* ---------- 3) Ukrycie zdublowanej ceny (RENDER #2) — "Oszczędzasz" zostaje ----------
   Selektor celuje WYŁĄCZNIE w ".wc-block-components-product-price"
   (goła kwota) wewnątrz ".wc-block-cart-item__total" — sąsiedni
   "Oszczędzasz" ma inną klasę ("wc-block-components-sale-badge"/
   "wc-block-components-product-badge"), więc zostaje nietknięty i
   widoczny w tym samym miejscu. "display: none" — zero pozostawionej
   pustej przestrzeni. */

.wc-block-mini-cart__drawer .wc-block-cart-item__total .wc-block-components-product-price {
	display: none;
}

/* ---------- 4) "Oszczędzasz" — świadomie zaprojektowany badge/pill ----------
   POPRAWKA (ta runda — zastępuje poprzedni wariant "zwykły tekst"):
   zadanie z tej rundy wprost chce z powrotem wygląd plakietki —
   "delikatne tło, lekka ramka lub pill" — czyli odwrotny kierunek niż
   poprzednia runda (tam celowo zdjęto natywny "pill" WooCommerce,
   bo wtedy zadanie chciało zwykłego tekstu). Zamiast wracać do
   natywnego, generycznego wyglądu komponentu ("ProductBadge" —
   "background: color-mix(in srgb, currentColor 10%, transparent)",
   patrz audyt w poprzedniej rundzie), zbudowany jest tu WŁASNY,
   spójny z Wenaro pill: tło i ramka to tinty koloru marki
   ("--wp--preset--color--brand"), tą samą techniką "color-mix", której
   już używa reszta tego pliku (np. sekcja "wenaro-desc-callout" oraz
   przycisk "wenaro-stock" wyżej) — nie nowy, przypadkowy kolor.

   POPRAWKA (runda "Oszczędzasz na pełnym Koszyku") — WSPÓŁDZIELONA
   z Pełnym Koszykiem, nie duplikowana: Mini Cart i Pełny Koszyk
   renderują ten sam komponent "ProductSaleBadge" w tym samym miejscu
   DOM (".wc-block-cart-item__total .wc-block-components-sale-badge",
   patrz audyt "REALNY OUTERHTML" wyżej w tym pliku) — jedyna różnica
   to zewnętrzny kontekst: Mini Cart = ".wc-block-mini-cart__drawer",
   Pełny Koszyk = "body.woocommerce-cart .wc-block-cart-items
   :not(.wc-block-mini-cart-items)" (to samo zawężenie, którego już
   używają sąsiednie reguły RENDERU #2 wyżej — wyklucza samą tabelę
   Mini Cart, gdyby była w danym momencie obecna w DOM tej samej
   strony). Wcześniej Pełny Koszyk nie miał tu żadnej reguły motywu,
   więc badge pokazywał wyłącznie natywny, generyczny wygląd
   WooCommerce ("ProductBadge" — widoczny jako zwykły, systemowy
   tekst). Checkout Order Summary MA już własną, osobną, analogiczną
   regułę niżej w tym pliku (".wc-block-components-order-summary-item
   .wc-block-components-sale-badge") — celowo NIEDOTKNIĘTA w tej
   rundzie (poza zakresem zadania, inny badge/kontekst). */

.wc-block-mini-cart__drawer .wc-block-cart-item__total .wc-block-components-sale-badge,
body.woocommerce-cart .wc-block-cart-items:not(.wc-block-mini-cart-items) .wc-block-cart-item__total .wc-block-components-sale-badge {
	display: inline-block;
	background: color-mix(in srgb, var(--wp--preset--color--brand) 12%, var(--wp--preset--color--surface));
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 32%, transparent);
	border-radius: var(--wp--preset--border-radius--sm);
	padding: 3px 8px;
	margin-top: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand-dark);
	white-space: normal;
}

/* ---------- 5) Nazwa produktu — więcej wagi po zwolnieniu miejsca pod nią ----------
   Tylko Mini Cart (Pełny Koszyk ma swoją, niezmienianą w tej rundzie
   regułę bazową w sekcji "Cart & Mini Cart" wyżej). */

.wc-block-mini-cart__drawer .wc-block-components-product-name {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* ---------- 6) Ujednolicenie fontu w całej szufladzie Mini Cart ----------
   Motyw ustawia font globalnie na "body" (theme.json →
   "styles.typography.fontFamily": "var:preset|font-family|system-font"),
   więc szuflada Mini Cart powinna go dziedziczyć automatycznie. Mimo
   to wymuszone tu jawnie i defensywnie na całej szufladzie i jej
   potomkach, żeby żaden wewnętrzny element (nazwa, ceny, "Oszczędzasz",
   selektor ilości, dolna "Kwota", przyciski) nie mógł wizualnie
   odstawać innym fontem — bez wprowadzania NOWEJ rodziny fontu,
   wyłącznie wymuszone dziedziczenie istniejącego systemu motywu.
   "!important" świadomie, z tego samego powodu co reguły układu w
   sekcji "Cart & Mini Cart" wyżej: natywny, skompilowany CSS bloków
   WooCommerce bywa drukowany w kolejności, która przebija zwykłą
   specyficzność selektora motywu. Ikony w tej szufladzie (usuwanie,
   zamykanie) to inline SVG z "@wordpress/icons", nie fonty ikon —
   zero ryzyka, że ta reguła je popsuje. */

.wc-block-mini-cart__drawer,
.wc-block-mini-cart__drawer * {
	font-family: var(--wp--preset--font-family--system-font, inherit) !important;
}


/* =========================================================
   Checkout — wenaro
   Style dla natywnego bloku "woocommerce/checkout" (WooCommerce
   Checkout Block) — bez żadnej własnej logiki checkoutu, PHP ani JS.
   Wszystkie reguły korzystają wyłącznie z realnych, natywnych klas
   WooCommerce Blocks. Mechanika walidacji, kolejność kroków i
   działanie bloków (adres, dostawa, płatność, podsumowanie) pozostają
   całkowicie nietknięte — dotykamy wyłącznie wyglądu.

   Scope: "body.woocommerce-checkout" — natywna klasa, którą
   WooCommerce dokłada do <body> WYŁĄCZNIE na stronie checkoutu
   (rdzeniowa funkcja "wc_body_class()", niezależna od tego, jaki
   szablon/strona zawiera blok). Ten sam, sprawdzony wzorzec co w
   sekcji "Cart" wyżej — zero nowych plików szablonu, zero ryzyka
   wycieku na inne strony (Koszyk, Sklep, Single Product mają własne,
   inne klasy body).

   Layout checkoutu i koszyka w WooCommerce Blocks współdzielą ten sam
   komponent "SidebarLayout", ale realna nazwa klasy potrafi się różnić
   między wersjami WooCommerce Blocks — dlatego część selektorów
   (m.in. układ dwóch kolumn i przycisk złożenia zamówienia) celowo
   pokrywa dwa możliwe warianty naraz. Dodatkowy, niedopasowany
   selektor niczego nie psuje — po prostu nic nie robi, jeśli akurat
   nie występuje w renderowanym markupie.

   Kolory — wyłącznie presety z theme.json. Promienie tam, gdzie
   specyfikacja wymaga konkretnego, umiarkowanego wyglądu (10–12px),
   ustawione jawnie w px z tego samego powodu co w Cart/Shop/Single
   Product: nazwane presety promienia nie mają potwierdzonej wartości
   w theme.json.
   ========================================================= */

/* ---------- Układ ogólny ---------- */

body.woocommerce-checkout .wc-block-checkout {
	color: var(--wp--preset--color--ink);
}

/* ---------- Krótki opis produktu — ukryty w podsumowaniu zamówienia ----------
   Pozycja produktu w podsumowaniu ("OrderSummaryItem") renderuje ten sam,
   współdzielony komponent metadanych co Cart/Mini Cart — realna klasa
   krótkiego, marketingowego opisu to, tak samo jak tam,
   ".wc-block-components-product-metadata__description" (zweryfikowane
   względem rzeczywistego kodu źródłowego bloków WooCommerce: komponent
   "OrderSummaryItem" przekazuje "shortDescription"/"fullDescription" do
   tego samego komponentu "ProductMetadata", którego używają Cart i Mini
   Cart). Osobna od "__variation-data", więc warianty/atrybuty produktu
   zostają widoczne — zdjęcie, nazwa, ilość, ceny i "Oszczędzasz" też są
   nietknięte, bo renderuje je zupełnie inny element. Scope ograniczony
   wyłącznie do Checkout ("body.woocommerce-checkout") — Cart i Mini Cart
   mają swoją własną, już wcześniej wykonaną poprawkę w osobnej sekcji. */

body.woocommerce-checkout .wc-block-components-product-metadata__description {
	display: none;
}

/* ---------- Dwie kolumny: formularz (szerszy, lewy) | podsumowanie (węższe, prawe) ----------
   Odstęp i wyrównanie do góry — sam "display: flex" pochodzi z
   natywnych stylów bloku, dopisujemy tylko brakujące/potrzebne
   właściwości, bez ingerencji w "display". */

body.woocommerce-checkout .wc-block-components-sidebar-layout,
body.woocommerce-checkout .wc-block-checkout__sidebar-layout {
	align-items: flex-start;
	gap: 48px;
}

body.woocommerce-checkout .wc-block-components-main,
body.woocommerce-checkout .wc-block-checkout__main {
	flex: 1 1 0%;
	min-width: 0;
}

body.woocommerce-checkout .wc-block-components-sidebar,
body.woocommerce-checkout .wc-block-checkout__sidebar {
	flex: 0 1 380px;
	max-width: 380px;
	width: 100%;
}

/* ---------- Podsumowanie zamówienia: lekka, wyraźnie wyróżniona karta ---------- */

body.woocommerce-checkout .wc-block-components-sidebar,
body.woocommerce-checkout .wc-block-checkout__sidebar {
	padding: 24px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-sizing: border-box;
}

body.woocommerce-checkout .wc-block-components-order-summary__button-text,
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
	color: var(--wp--preset--color--ink);
	font-size: 1.125rem;
	font-weight: 700;
}

/* Pozycje produktów w podsumowaniu — miniatura + nazwa/ilość + cena,
   cienki separator zamiast ramki wokół każdej pozycji */
body.woocommerce-checkout .wc-block-components-order-summary-item {
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

body.woocommerce-checkout .wc-block-components-order-summary-item__image img {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background: var(--wp--preset--color--background);
}

body.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--background);
	font-weight: 700;
}

body.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	font-size: 0.9375rem;
}

body.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

/* ---------- REFAKTOR (runda "prawdziwe kolumny label/value — subgrid"):
   dwie osobne kolumny CSS, nie ręczne marginesy ----------
   AUDYT (zweryfikowany względem realnego kodu źródłowego React
   WooCommerce Blocks, nie zgadywany — plik
   "plugins/woocommerce/client/blocks/assets/js/base/components/
   cart-checkout/order-summary/order-summary-item.tsx", komponent
   "OrderSummaryItem", używany WYŁĄCZNIE w panelu "Podsumowanie
   zamówienia" na Checkoucie — Pełny Koszyk w ogóle nie ma takiego
   panelu z pozycjami produktów, więc te selektory fizycznie nie mogą
   dotknąć Koszyka/Mini Cart, nawet bez dodatkowego zawężania scope):

   <div class="wc-block-components-order-summary-item">
     <div class="wc-block-components-order-summary-item__image">
       <div class="wc-block-components-order-summary-item__quantity">2</div>
       <img .../>
     </div>
     <div class="wc-block-components-order-summary-item__description">
       <h3 class="wc-block-components-product-name">Nazwa</h3>
       <div class="wc-block-cart-item__prices">                 ← RENDER #1, pod nazwą
         <span class="price wc-block-components-product-price ...individual-prices">
           <del class="...product-price__regular ...regular-individual-price">686,25 zł</del>
           <ins class="...product-price__value is-discounted ...individual-price">539,00 zł</ins>
         </span>
       </div>
       <div class="wc-block-components-product-metadata">...</div>
     </div>
     <span class="screen-reader-text">...</span>
     <div class="wc-block-components-order-summary-item__total-price" aria-hidden="true">
       <div class="wc-block-cart-item__total-price-and-sale-badge-wrapper">
         <span class="price wc-block-components-product-price">   ← RENDER #2, ukryty
           <span class="wc-block-components-product-price__value">539,00 zł</span>
         </span>
         <div class="wc-block-components-sale-badge">Oszczędzasz 147,25 zł</div>
       </div>
     </div>
   </div>

   PRZYCZYNA poprzedniej, błędnej próby (runda "wyrównanie badge —
   flex align-items"): "align-items:flex-start" na wrapperze plakietki
   wyrównywało cały wrapper do lewej krawędzi KOLUMNY TREŚCI (tej samej,
   której szerokość zajmuje też nazwa produktu) — ale sama liczba
   "539,00 zł" wewnątrz "<ins>" NIE zaczyna się na lewej krawędzi tej
   kolumny, bo etykieta "Cena po rabacie: " jest treścią "::before" na
   TYM SAMYM elemencie "<ins>" (".is-discounted::before {content:
   'Cena po rabacie: '}") — więc lewa krawędź całego boxu "<ins>" to w
   rzeczywistości lewa krawędź NAPISU "Cena po rabacie:", nie lewa
   krawędź liczby. Odtąd plakietka faktycznie leżała dokładnie pod
   napisem "Cena po rabacie:" (zweryfikowane, diff=0px), ale NIE pod
   samą kwotą — czyli wizualnie nadal "obok", nie "pod ceną", tylko że
   błąd przesunął się o jeden poziom głębiej i był mniej widoczny.

   NOWA ARCHITEKTURA — DWIE PRAWDZIWE KOLUMNY (etykieta | wartość),
   WYŁĄCZNIE dla pozycji promocyjnej (":has(.wc-block-components-product-price__regular)"
   — produkt bez promocji nigdy nie ma "<del>", więc ten selektor go
   fizycznie nie dotyka, patrz też osobna sekcja niżej "Produkt BEZ
   promocji"):

     [miniatura] [Cena regularna:]   [686,25 zł]      <- wiersz 2
     [(span 4)]  [Cena po rabacie:]  [539,00 zł]      <- wiersz 3
                 [(puste)]           [Oszczędzasz …]  <- wiersz 4
     nazwa produktu rozciągnięta nad obiema kolumnami ceny — wiersz 1

   Kontener ".wc-block-components-order-summary-item" (dla pozycji
   promocyjnej) dostaje TRZECIĄ kolumnę (miniatura | etykieta |
   wartość) i CZTERY wiersze (nazwa / regularna / po rabacie / badge).
   ".__description" (opis produktu — zawiera nazwę I blok cenowy)
   staje się "subgrid"-em rozciągniętym na kolumny 2–3 i wiersze 1–3,
   więc DZIEDZICZY dokładnie te same ścieżki kolumn co rodzic — nie
   liczy ich same od nowa. Dwa czysto strukturalne wrappery bez
   własnego wyglądu (".wc-block-cart-item__prices", ".price") dostają
   "display:contents" — znikają z drzewa pudełek (box tree), ale
   zostają w DOM (bez wpływu na dostępność/JS) — dzięki temu ich
   dzieci ("<del>", "<ins>", oraz pseudo-elementy "::before"/"::after"
   na ".price") stają się BEZPOŚREDNIMI elementami gridu ".__description"
   i można je jawnie umieścić w konkretnej komórce (etykieta → kolumna
   1, wartość → kolumna 2) — to TA SAMA technika, którą opisuje
   zadanie tej rundy ("Możesz użyć ::before / ::after na RODZICU
   `.price`, ale przypisz pseudo-elementy do konkretnych komórek
   gridu").

   ".__total-price" (drugi, osobny kontener — bezpośrednie rodzeństwo
   ".__description", NIE jego potomek) trafia bezpośrednio do
   kolumny 3 ("wartość"), wiersz 4 — TEJ SAMEJ ścieżki kolumny co
   "<ins>" w wierszu 3, bo obie pochodzą z tego samego, jednego
   podziału na kolumny zdefiniowanego RAZ na rodzicu. Jego wewnętrzny
   wrapper (".wc-block-cart-item__total-price-and-sale-badge-wrapper")
   też dostaje "display:contents" — plakietka staje się bezpośrednim
   dzieckiem ".__total-price" i siada dokładnie na jego lewej
   krawędzi (zwykły blokowy przepływ, "text-align:left" — nie
   potrzeba "justify-self", bo ".__total-price" nie ma własnego
   paddingu/marginesu z lewej, więc jego własna krawędź TO już
   krawędź kolumny "wartość"). Zero ręcznych marginesów/transform —
   wyrównanie wynika WYŁĄCZNIE z tego, że obie strony (liczba i
   plakietka) leżą w tej samej, jednej, dzielonej ścieżce kolumny
   gridu.

   Etykieta "Cena po rabacie: " przenosi się z "::before" na "<ins>"
   (dawało błąd opisany wyżej) na "::after" na RODZICU "<span
   class="price">" — dokładnie jak "Cena regularna:" już wcześniej
   robiła to jako "::before" na tym samym elemencie, tylko teraz OBIE
   trafiają do kolumny "etykieta", a "<del>"/"<ins>" osobno do kolumny
   "wartość". Stary "::before" na "<ins>.is-discounted" jest w tej
   rundzie usunięty (nie tylko wyłączony), bo cała odpowiedzialność za
   etykiety przenosi się na ".price". */

body.woocommerce-checkout .wc-block-components-order-summary-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 12px;
	row-gap: 4px;
}

body.woocommerce-checkout .wc-block-components-order-summary-item__image {
	grid-column: 1;
	grid-row: 1 / span 2;
}

body.woocommerce-checkout .wc-block-components-order-summary-item__description {
	grid-column: 2;
	grid-row: 1;
	/* RUNDA "POPRAWKA UI/UX — kontrolka ilości": jawne wymuszenie
	   kolumnowego (pionowego) układu treści opisu (nazwa + cena
	   jednostkowa) — to i tak natywne zachowanie WooCommerce Blocks dla
	   tego elementu (flex-column), ale zapisujemy je tu jawnie, żeby nie
	   zależeć od cichego domyślnego zachowania. Dla pozycji PROMOCYJNEJ
	   reguła niżej (":has(...)") ma wyższą specyficzność i nadpisuje to
	   na "display:grid" (subgrid) — bez zmian. */
	display: flex;
	flex-direction: column;
	min-width: 0;
}

body.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
	grid-column: 2;
	grid-row: 2;
	margin-left: 0;
	text-align: left;
	padding-top: 0;
}

/* RUNDA "POPRAWKA UI/UX — kontrolka ilości w Checkout Order Summary":
   ".wenaro-checkout-quantity" (assets/js/checkout-quantity.js pluginu
   "wenaro-checkout-tools") jest od v1.2.14 wstawiana jako bezpośrednie
   dziecko WIERSZA (".wc-block-components-order-summary-item"), NIE
   wewnątrz ".__description" — dzięki temu dostaje tu, na poziomie
   nadrzędnego gridu, własną, jawną komórkę i nigdy nie nachodzi na
   nazwę/cenę. Produkt BEZ promocji: trzeci, nowy wiersz (item ma tylko
   "auto" wiersze — dodanie trzeciego niczego nie przesuwa/nie łamie),
   pod opisem (wiersz 1) i pod ceną łączną pozycji (wiersz 2). */
body.woocommerce-checkout .wc-block-components-order-summary-item .wenaro-checkout-quantity {
	grid-column: 2;
	grid-row: 3;
	margin-top: 2px;
}

/* ---------- Pozycja PROMOCYJNA — trzecia kolumna (etykieta | wartość) ----------
   Wszystko poniżej dotyczy WYŁĄCZNIE pozycji z realną ceną regularną
   (":has(.wc-block-components-product-price__regular)") — nadpisuje
   PUNKTOWO (wyższa specyficzność dzięki ":has()", bez "!important")
   trzy reguły bazowe wyżej (item/image/description/total-price), nie
   dotykając ich dla zwykłego produktu (patrz sekcja "Produkt BEZ
   promocji" niżej — tam nic się nie zmienia, bo ten selektor po
   prostu nigdy nie dopasuje). */
body.woocommerce-checkout .wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular) {
	grid-template-columns: auto max-content minmax(0, 1fr);
	/* RUNDA "POPRAWKA UI/UX — kontrolka ilości": piąty wiersz doszedł
	   WYŁĄCZNIE dla ".wenaro-checkout-quantity" (patrz reguła niżej) —
	   cztery pierwsze wiersze (nazwa / cena regularna / cena po
	   rabacie / total-price+plakietka) oraz cała logika kolumn
	   "etykieta"/"wartość" pozostają DOKŁADNIE takie same jak w
	   poprzednim audycie, tylko plakietka "Oszczędzasz" przesuwa się o
	   jeden wiersz niżej (4→5, patrz reguła ".__total-price" niżej). */
	grid-template-rows: auto auto auto auto auto;
}

body.woocommerce-checkout .wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular) .wc-block-components-order-summary-item__image {
	grid-row: 1 / span 5;
}

body.woocommerce-checkout .wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular) .wc-block-components-order-summary-item__description {
	display: grid;
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
	grid-column: 2 / 4;
	grid-row: 1 / 4;
	/* Natywna reguła WooCommerce (".__description { gap: $gap-smallest }",
	   sprzed refaktoru na grid — z czasów, gdy ten element był "flex
	   column") nadal obowiązuje i ustawia "column-gap" na 4px zamiast
	   12px rodzica. Dla subgrida gap NIE jest automatycznie dziedziczony
	   z rodzica, jeśli element ma WŁASNY, jawnie odziedziczony "gap" —
	   przez co siatka wewnętrzna "rozjeżdżała się" o kilka pikseli
	   względem górnego poziomu (kolumna "wartość" zaczynała się w innym
	   miejscu niż w wierszu 4, gdzie leży plakietka). Jawne dopasowanie
	   do gapów rodzica ("column-gap:12px" / "row-gap:4px", te same
	   wartości co w bazowej regule ".wc-block-components-order-summary-item"
	   wyżej) usuwa to przesunięcie. */
	column-gap: 12px;
	row-gap: 4px;
}

body.woocommerce-checkout .wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular) .wc-block-components-product-name {
	grid-column: 1 / 3;
	grid-row: 1;
}

body.woocommerce-checkout .wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular) .wc-block-components-product-metadata {
	grid-column: 1 / 3;
	grid-row: 1;
}

/* Dwa czysto strukturalne wrappery (bez własnego tła/borderu/paddingu)
   znikają z drzewa pudełek — ich dzieci ("<del>", "<ins>", pseudo-
   elementy ".price") stają się bezpośrednimi elementami subgrida
   ".__description" wyżej i dopiero wtedy można je pozycjonować przez
   "grid-column"/"grid-row" poniżej. */
body.woocommerce-checkout .wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular) .wc-block-cart-item__prices,
body.woocommerce-checkout .wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular) .wc-block-cart-item__prices .price {
	display: contents;
}

/* RUNDA "Oszczędzasz — bez pilla": ".__total-price" dla pozycji
   promocyjnej rozciąga się teraz na OBIE kolumny — "etykieta" (2) i
   "wartość" (3) — zamiast tylko na kolumnę "wartość" jak wcześniej.
   Powód: jedyną WIDOCZNĄ treścią w tym boksie jest już tylko plakietka
   "Oszczędzasz ..." (duplikat ceny, RENDER #2, ma "display:none" —
   patrz reguła niżej), a użytkownik chce, żeby ten tekst zaczynał się
   na TEJ SAMEJ osi X co słowo "Cena" w etykietach "Cena regularna:" /
   "Cena po rabacie:" (kolumna 2), nie pod samą liczbą (kolumna 3, jak
   poprzednio). Zero ręcznego marginesu — to nadal ten sam, jeden,
   dzielony podział na kolumny zdefiniowany raz na rodzicu (patrz
   audyt wyżej), tylko że plakietka dostaje szerszy zakres kolumn. */
/* FIX 2026-09-08 — Checkout Order Summary / badge „Oszczędzasz”.
   Pomiar z realnego DOM: .__description ma padding-left:24px,
   a sibling .__total-price miał 0px. Dlatego badge zaczynał się 24px
   za wcześnie. Wyrównanie robimy strukturalnie na rodzicu total-price,
   nie marginesem samego badge'a. Desktop + mobile. */
body.woocommerce-checkout .wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular) .wc-block-components-order-summary-item__total-price {
	grid-column: 2 / 4;
	/* RUNDA "POPRAWKA UI/UX — kontrolka ilości": 4→5 — patrz komentarz
	   przy "grid-template-rows" wyżej na rodzicu. Reszta reguły
	   (padding-left:24px wyrównujące plakietkę pod "Cena po rabacie:")
	   NIEZMIENIONA. */
	grid-row: 5;
	padding-left: 24px;
	box-sizing: border-box;
}

/* ".wenaro-checkout-quantity" dla pozycji PROMOCYJNEJ — nowy wiersz 4,
   MIĘDZY blokiem cen (wiersze 1-3) a plakietką "Oszczędzasz" (wiersz 5)
   — dokładnie "pod blokiem cen i przed ceną końcową pozycji", zgodnie z
   wymaganym efektem. Ta sama rozpiętość kolumn co ".__total-price"
   wyżej ("2 / 4"), więc lewa krawędź boxu ilości wyrównuje się do tej
   samej osi co plakietka/cena łączna pozycji. */
body.woocommerce-checkout .wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular) .wenaro-checkout-quantity {
	grid-column: 2 / 4;
	grid-row: 4;
	margin-top: 2px;
}

/* Ten wrapper też znika z drzewa pudełek — plakietka staje się
   bezpośrednim dzieckiem ".__total-price" (kolumna "wartość", wiersz
   4) i siada na jego lewej krawędzi zwykłym blokowym przepływem —
   ta sama krawędź co "<del>"/"<ins>" wyżej, bo to ta sama, jedna
   ścieżka kolumny gridu. Zero "align-items", zero "justify-self". */
body.woocommerce-checkout .wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular) .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	display: contents;
}

/* Etykieta "Cena regularna: " — kolumna 1 ("etykieta"), wiersz 2. */
body.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-cart-item__prices .price:has(.wc-block-components-product-price__regular)::before {
	content: "Cena regularna: ";
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	grid-column: 1;
	grid-row: 2;
}

/* Etykieta "Cena po rabacie: " — PRZENIESIONA z "::before" na "<ins>"
   (dawało błędny box obejmujący etykietę+liczbę razem, patrz audyt
   wyżej) na "::after" na RODZICU ".price" — kolumna 1 ("etykieta"),
   wiersz 3, dokładnie jak etykieta regularnej ceny wyżej. */
body.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-cart-item__prices .price:has(.wc-block-components-product-price__regular)::after {
	content: "Cena po rabacie: ";
	font-weight: 400;
	color: var(--wp--preset--color--ink);
	grid-column: 1;
	grid-row: 3;
}

/* Cena regularna, przekreślona — kolumna 2 ("wartość"), wiersz 2.
   "grid-column"/"grid-row" tutaj mają efekt WYŁĄCZNIE dla pozycji
   promocyjnej (jedyny przypadek, w którym "<del>" w ogóle istnieje w
   DOM i jest realnym elementem gridu ".__description" wyżej) — dla
   zwykłego produktu ten element nigdy nie występuje, więc te
   deklaracje nie mają czego dotyczyć. */
body.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-price__regular {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	text-decoration: line-through;
	grid-column: 2;
	grid-row: 2;
}

body.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-price__value {
	display: block;
	margin-top: 2px;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

/* Cena po rabacie ("<ins>") — kolumna 2 ("wartość"), wiersz 3.
   "margin-left: 0" zostaje (nadal potrzebne — natywny WooCommerce,
   "product-price/style.scss": ".is-discounted {margin-left: 0.5em;}",
   pomyślany dla wariantu, gdzie "<del>"/"<ins>" siedzą obok siebie w
   jednym wierszu — bez resetu ta wartość byłaby wsunięta 0.5em w głąb
   WŁASNEJ komórki gridu, mimo że sama komórka już jest poprawnie
   wyrównana). Etykieta "Cena po rabacie: " nie jest już treścią
   "::before" TEGO elementu (patrz ".price::after" wyżej) — dlatego ten
   box zawiera odtąd WYŁĄCZNIE samą liczbę, zgodnie z wymogiem tej
   rundy ("<ins> ma zawierać wizualnie WYŁĄCZNIE wartość ceny"). */
body.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-price__value.is-discounted {
	margin-left: 0;
	grid-column: 2;
	grid-row: 3;
}

/* Produkt BEZ promocji w panelu podsumowania — ta sama etykieta "Cena:"
   co w Mini Cart, dla spójności obu miejsc (bez tego sama wartość
   wisiałaby bez żadnego opisu). Element ".wc-block-components-product-price__value"
   BEZ ".is-discounted" istnieje WYŁĄCZNIE dla zwykłego produktu (bez
   promocji WooCommerce nigdy nie dodaje klasy "is-discounted") — więc
   ten selektor, a razem z nim cała poniższa etykieta, fizycznie nie
   może dotknąć pozycji promocyjnej ani jej nowego gridu wyżej. */
body.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-price__value:not(.is-discounted)::before {
	content: "Cena: ";
	font-weight: 400;
	color: var(--wp--preset--color--ink);
}

/* Ukrycie zdublowanej ceny (RENDER #2) — cel. wyłącznie w gołą kwotę,
   "Oszczędzasz" (inna klasa) zostaje widoczny, teraz bezpośrednio pod
   przeniesionym blokiem cenowym dzięki gridowi wyżej. */
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price .wc-block-components-product-price {
	display: none;
}

/* "Oszczędzasz" w Checkout → Podsumowanie zamówienia — RUNDA "przywrócenie
   pilla": poprzednia runda ("usunięcie stylu pill") zrobiła z tego płaską
   trzecią linię tekstu (bez tła/borderu) — użytkownik zdecydował, że
   jednak ma to wyglądać jak mały, pomarańczowy pill/kafelek, tak jak w
   Mini Cart/Koszyku, ale (inaczej niż tam) wyrównany do TEJ SAMEJ osi X
   co "Cena regularna:"/"Cena po rabacie:", nie wycentrowany ani
   przesunięty. Lewa krawędź pilla nadal zapewniona WYŁĄCZNIE przez
   wspólną kolumnę gridu — ".__total-price" (dla pozycji promocyjnej,
   reguła wyżej z ":has(.wc-block-components-product-price__regular)")
   rozciąga się na "grid-column: 2 / 4" (ta sama zmiana co poprzednia
   runda, NIEZMIENIANA teraz — to ona, nie ten selektor, odpowiada za
   pozycję), więc pill (mimo "display:inline-block; width:fit-content" —
   zajmuje tylko tyle miejsca, ile potrzebuje treść, nie całą szerokość
   kolumny) i tak zaczyna się dokładnie na lewej krawędzi tej kolumny —
   "text-align:left" odziedziczone z bazowej reguły ".__total-price"
   (zero "justify-self"/"margin-left" na oko). Ten selektor dotyczy
   WYŁĄCZNIE Checkout → Podsumowanie zamówienia (scope
   "body.woocommerce-checkout .wc-block-components-order-summary-item")
   — Mini Cart i pełny Koszyk mają OSOBNE, zupełnie inne selektory
   (patrz np. ".wc-block-mini-cart__drawer .wc-block-cart-item__total .wc-block-components-sale-badge"
   / ".wc-block-cart-items:not(.wc-block-mini-cart-items) ... .wc-block-components-sale-badge"
   wyżej w tym pliku) i pozostają celowo NIETKNIĘTE. */
body.woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-sale-badge {
	display: inline-block;
	width: fit-content;
	background: color-mix(in srgb, var(--wp--preset--color--brand) 10%, var(--wp--preset--color--background));
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 32%, transparent);
	border-radius: var(--wp--preset--border-radius--sm);
	padding: 3px 8px;
	margin-top: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--brand-dark);
	white-space: normal;
}

/* Wiersze: subtotal / dostawa / rabaty / podatki — ten sam spójny
   wzorzec etykieta + wartość co w Cart. Poziomy padding (16px) daje
   etykiecie i wartości oddech od lewej/prawej krawędzi KARTY — to
   inny poziom niż padding samej karty (24px, patrz ".wc-block-components-sidebar"
   wyżej): karta ma swój wewnętrzny odstęp niezależnie od tego, czy
   wiersze totals mają własny — nie ma tu podwójnego guttera, to dwa
   oddzielne, uzupełniające się poziomy tego samego layoutu. */
body.woocommerce-checkout .wc-block-components-totals-item {
	padding: 10px 16px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
}

body.woocommerce-checkout .wc-block-components-totals-item__label {
	color: var(--wp--preset--color--muted);
	font-weight: 500;
}

body.woocommerce-checkout .wc-block-components-totals-item__value {
	font-weight: 600;
}

body.woocommerce-checkout .wc-block-components-totals-discount .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--success);
}

/* Suma końcowa — mocno wyróżniona, oddzielona wyraźniejszą linią.
   Ten sam poziomy padding (16px) co zwykłe wiersze totals wyżej —
   "Łącznie" i kwota nigdy nie dotykają krawędzi karty, na żadnej
   szerokości ekranu. */
body.woocommerce-checkout .wc-block-components-totals-item.wc-block-components-totals-footer-item {
	margin-top: 4px;
	padding: 16px 16px 4px;
	border-bottom: none;
	border-top: 2px solid var(--wp--preset--color--border);
}

body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	font-size: 1rem;
}

body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--brand-dark);
	font-weight: 800;
	font-size: 1.375rem;
}

/* ---------- Kroki formularza: odstępy, nagłówki, opisy ---------- */

body.woocommerce-checkout .wc-block-components-checkout-step {
	padding-bottom: 32px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

body.woocommerce-checkout .wc-block-components-checkout-step:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

body.woocommerce-checkout .wc-block-components-checkout-step__title {
	color: var(--wp--preset--color--ink);
	font-size: 1.125rem;
	font-weight: 700;
}

body.woocommerce-checkout .wc-block-components-checkout-step__description {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}

body.woocommerce-checkout .wc-block-components-checkout-step__content {
	margin-top: 16px;
}

/* ---------- Telefon: tekst pomocniczy + blok "Dokumenty elektroniczne" ----------
   Telefon (shipping_phone) jest teraz obowiązkowy — wymuszone oficjalną
   opcją WooCommerce "woocommerce_checkout_phone_field" (patrz plugin
   Wenaro Checkout Tools, klasa "Wenaro_Checkout_Tools_Phone_Requirement"),
   NIGDY przez CSS. Sam tekst pomocniczy (pod telefonem) i blok "Dokumenty
   elektroniczne" (pod e-mailem) są tworzone i pozycjonowane WYŁĄCZNIE
   po stronie klienta przez "assets/js/checkout-field-accessibility.js"
   (plugin Wenaro Checkout Tools) — Checkout Blocks renderuje pola
   formularza tylko w przeglądarce, więc jedyny niezawodny sposób
   umieszczenia czegoś "zaraz pod konkretnym polem" to zrobić to tam,
   względem realnych selektorów pól. Poniższe reguły stylują WYŁĄCZNIE
   wygląd obu elementów.

   PRZYCZYNA "helper obok telefonu zamiast pod nim" (zweryfikowane w
   realnym źródle WooCommerce Blocks,
   client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss):
   rodzic ".wc-block-components-address-form" to natywny
   "display:flex; flex-wrap:wrap", w którym KAŻDE pole typu
   ".wc-block-components-text-input" domyślnie dostaje
   "flex: 1 0 calc(50% - gap)" (układ "dwie kolumny") — jedynie
   company/address_1/address_2/country/checkbox mają jawny wyjątek
   "flex:0 0 100%" (pełna szerokość). Telefon NIE jest na tej liście
   wyjątków, więc zajmuje ~50% wiersza; nasz helper — jako zwykłe
   dziecko tego samego flex-rodzica, bez własnego "flex-basis" — lądował
   w pozostałych ~50% TEGO SAMEGO wiersza, czyli wizualnie obok telefonu,
   zamiast się zawinąć. Poprawka NIE rusza rdzenia WooCommerce — nadaje
   telefonowi i jego helperowi dokładnie taki sam "flex:0 0 100%", jakiego
   WooCommerce już używa dla swoich własnych pól pełnej szerokości. */

.wc-block-components-address-form__phone,
.wc-block-components-address-form__phone + .wenaro-checkout-field-helper {
	flex: 0 0 100% !important;
}

.wenaro-checkout-field-helper {
	margin: 6px 0 0;
	color: color-mix(in srgb, var(--wp--preset--color--muted) 82%, var(--wp--preset--color--ink) 17%);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
}

.wenaro-checkout-eco-notice {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
	padding: 14px 16px;
	background: color-mix(in srgb, var(--wp--preset--color--brand) 6%, var(--wp--preset--color--background));
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 22%, var(--wp--preset--color--border));
	border-left: 4px solid var(--wp--preset--color--brand);
	border-radius: var(--wp--preset--border-radius--base);
}

/* Realne logo AuraEko jest POZIOME (proporcje ok. 1425×825) — celowo BEZ
   sztywnych "width"/"height" w HTML i BEZ "aspect-ratio", żeby SVG
   zachował swoje naturalne proporcje. Szerokość 100px (90px na wąskich
   telefonach) mieści się w zaleceniu ok. 90–120px; "height:auto" liczy
   wysokość samo, więc logo nigdy nie jest ani rozciągnięte, ani kadrowane. */
.wenaro-checkout-eco-notice__logo {
	display: block;
	width: 100px;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	flex: 0 0 auto;
}

.wenaro-checkout-eco-notice__body {
	flex: 1 1 200px;
	min-width: 0;
}

.wenaro-checkout-eco-notice__title {
	margin: 0 0 2px;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.wenaro-checkout-eco-notice__text {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted);
	line-height: 1.5;
}

@media (max-width: 480px) {
	.wenaro-checkout-eco-notice__logo {
		width: 90px;
	}
}

/* ---------- Pola formularza: jasne tło, cienki border, wyraźny focus w brand ----------
   Kolor/rozmiar tylko — pozycjonowanie i animacja "pływającej" etykiety
   (label) zostają natywne, nie dotykamy "position"/"transform". */

body.woocommerce-checkout .wc-block-components-text-input input[type="text"],
body.woocommerce-checkout .wc-block-components-text-input input[type="email"],
body.woocommerce-checkout .wc-block-components-text-input input[type="tel"],
body.woocommerce-checkout .wc-block-components-text-input input[type="number"],
body.woocommerce-checkout .wc-block-checkout .wc-block-components-combobox input,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea {
	min-height: 46px;
	padding: 12px 14px;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	box-sizing: border-box;
}

body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-block-checkout label {
	color: var(--wp--preset--color--muted);
	font-weight: 500;
}

body.woocommerce-checkout .wc-block-components-text-input.is-active label {
	color: var(--wp--preset--color--brand-dark);
}

body.woocommerce-checkout .wc-block-components-text-input:focus-within input,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus {
	border-color: var(--wp--preset--color--brand);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--brand) 22%, transparent);
}

body.woocommerce-checkout .wc-block-components-validation-error {
	color: var(--wp--preset--color--danger);
	font-size: 0.8125rem;
}

/* ---------- Dostawa i Płatność: lekkie, wyraźne wiersze/karty ----------
   Opcje Dostawy i Płatności NIE mają identycznego markupu (zweryfikowane
   w rzeczywistym źródle WooCommerce Blocks):

   Dostawa — <label class="wc-block-components-radio-control__option">
   JEST już całym, samodzielnym wierszem (bezpośrednie dziecko listy
   opcji) — dokładnie to, co poprzednia reguła zakładała dla obu
   przypadków naraz.

   Płatność — dokładnie ten sam <label class="…__option"> jest
   DODATKOWO owinięty jeszcze jednym, zewnętrznym elementem,
   <div class="wc-block-components-radio-control-accordion-option">,
   potrzebnym WooCommerce do rozwijania opisu/pól płatności pod opcją.

   Poprzednia reguła nakładała IDENTYCZNY padding-left:48px (i
   border/tło) NARAZ na <label> i na jego zewnętrzny wrapper w
   Płatności — więc tam <label> (a wraz z nim kółko radio, natywnie
   "position:absolute; left:16px" liczone względem <label>) lądował
   przesunięty o dodatkowe ~48px w prawo względem Dostawy, gdzie
   takiego wrappera nie ma. Stąd zgłoszona niespójność w poziomie.

   Poprawka: wizualna "karta" (border/tło/promień/odstęp) należy teraz
   do JEDNEGO elementu na kontekst — do <label> w Dostawie (bo tam
   label jest całym wierszem) i do zewnętrznego wrappera w Płatności
   (bo to on obejmuje całą klikalną opcję + rozwijaną zawartość).
   Zagnieżdżony <label> wewnątrz Płatności (reguła niżej) dostaje
   WYŁĄCZNIE identyczny padding — bez własnej ramki/tła/marginesu, żeby
   nie powstała podwójna ramka — dzięki czemu oba kółka radio mają
   teraz dokładnie ten sam odstęp od lewej krawędzi swojej karty. */

body.woocommerce-checkout .wc-block-components-radio-control__option {
	/* padding-left: 48px — miejsce na natywnie pozycjonowany
	   (position:absolute; left:16px; width:20px) radio input WooCommerce,
	   żeby label nigdy na niego nie nachodził; ta sama wartość na
	   wszystkich szerokościach. */
	padding: 14px 16px 14px 48px;
	margin-bottom: 10px;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

body.woocommerce-checkout .wc-block-components-radio-control-accordion-option {
	margin-bottom: 10px;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

/* Zagnieżdżony <label> wewnątrz opcji płatności: sam padding (żeby
   kółko radio wylądowało w dokładnie tym samym miejscu co w Dostawie),
   zero własnej ramki/tła/marginesu — wizualną kartą jest już wrapper
   wyżej, więc druga ramka/tło tutaj dawałyby podwójny efekt. */
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	padding: 14px 16px 14px 48px;
	margin: 0;
	background: transparent;
	border: none;
	border-radius: 0;
}

/* Opis/pola płatności rozwijane pod opcją — wyrównane do tej samej
   kolumny co tekst etykiety ("Płatność testowa"), NIE do kółka radio
   (domyślnie ten blok jest rodzeństwem <label>, więc bez własnego
   paddingu zaczynałby się od samej lewej krawędzi karty). */
body.woocommerce-checkout .wc-block-components-radio-control-accordion-content {
	padding: 4px 16px 14px 48px;
}

body.woocommerce-checkout .wc-block-components-radio-control__option:last-child,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option:last-child {
	margin-bottom: 0;
}

body.woocommerce-checkout .wc-block-components-radio-control__option:hover,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option:hover {
	border-color: var(--wp--preset--color--muted);
}

/* Aktywna/wybrana opcja — pomarańczowy border + bardzo subtelne tło */
body.woocommerce-checkout .wc-block-components-radio-control__option--checked,
body.woocommerce-checkout .wc-block-components-radio-control__option[aria-checked="true"],
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option[aria-checked="true"] {
	background: color-mix(in srgb, var(--wp--preset--color--brand) 6%, var(--wp--preset--color--background));
	border-color: var(--wp--preset--color--brand);
}

body.woocommerce-checkout .wc-block-components-radio-control__input {
	accent-color: var(--wp--preset--color--brand);
}

body.woocommerce-checkout .wc-block-components-radio-control__label,
body.woocommerce-checkout .wc-block-components-payment-method-label {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

body.woocommerce-checkout .wc-block-components-radio-control__description,
body.woocommerce-checkout .wc-block-components-radio-control__secondary-label {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}

/* ---------- Główny przycisk: "Złóż zamówienie" — pełna szerokość, duży, brand ---------- */

body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 16px 24px;
	margin-top: 20px;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--background);
	border: none;
	border-radius: 12px;
	font-weight: 700;
	font-size: 1.05rem;
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
	background: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--background);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

body.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button:hover {
	color: var(--wp--preset--color--brand-dark);
}

/* ---------- Dostępność: focus-visible na całej stronie checkoutu ---------- */

body.woocommerce-checkout .wc-block-checkout a:focus-visible,
body.woocommerce-checkout .wc-block-checkout button:focus-visible,
body.woocommerce-checkout .wc-block-checkout input:focus-visible,
body.woocommerce-checkout .wc-block-checkout select:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-dark);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ---------- Mobile: jedna kolumna, formularz przed podsumowaniem ----------
   Kolejność DOM już to zapewnia — kolumna formularza występuje w
   markupie przed kolumną podsumowania, więc samo złożenie kolumn w
   jedną wystarczy. Ten sam próg co w Cart/Single Product (781px), dla
   spójności progów responsywnych w całym motywie. */

@media (max-width: 781px) {
	body.woocommerce-checkout .wc-block-components-sidebar-layout,
	body.woocommerce-checkout .wc-block-checkout__sidebar-layout {
		flex-direction: column;
		gap: 32px;
	}

	body.woocommerce-checkout .wc-block-components-sidebar,
	body.woocommerce-checkout .wc-block-checkout__sidebar {
		flex-basis: auto;
		max-width: none;
	}

	body.woocommerce-checkout .wc-block-components-checkout-step {
		padding-bottom: 24px;
		margin-bottom: 24px;
	}

	/* Wygodniejsze pola i touch targets na dotyk */
	body.woocommerce-checkout .wc-block-components-text-input input[type="text"],
	body.woocommerce-checkout .wc-block-components-text-input input[type="email"],
	body.woocommerce-checkout .wc-block-components-text-input input[type="tel"],
	body.woocommerce-checkout .wc-block-components-text-input input[type="number"],
	body.woocommerce-checkout select,
	body.woocommerce-checkout textarea {
		min-height: 48px;
	}

	/* UWAGA: to musi zachować "padding-left: 48px" (miejsce na kółko
	   radio) — poprzednia wersja tej reguły ustawiała płaski
	   "padding: 14px" (wszystkie 4 strony), co na tej szerokości
	   cichcem nadpisywało zarezerwowane 48px z reguły bazowej wyżej i
	   przywracało nachodzenie radio na tekst poniżej 781px. Zostaje
	   tylko węższy padding z prawej/góry/dołu, spójny z pozostałymi
	   szerokościami. Celowo BEZ "-accordion-option" (zewnętrzny wrapper
	   Płatności) — ten element ma mieć zero paddingu na każdej
	   szerokości; padding niesie wyłącznie zagnieżdżony <label>
	   (selektor ".wc-block-components-radio-control__option" niżej
	   trafia w obu przypadkach: samodzielny wiersz Dostawy i
	   zagnieżdżony <label> Płatności). */
	body.woocommerce-checkout .wc-block-components-radio-control__option {
		padding: 14px 14px 14px 48px;
	}
}

/* ---------- Mobile gutter: bezpieczny boczny odstęp ----------
   Padding na JEDNYM, najbardziej zewnętrznym wrapperze bloku Checkout
   ("wp-block-woocommerce-checkout" — ten sam wzorzec nazwy klasy co
   już istniejące "wp-block-woocommerce-cart" w sekcji Cart wyżej), a
   nie na "body" ani na wielu zagnieżdżonych elementach — dzięki temu
   pola formularzy, nagłówki kroków, opcje dostawy/płatności,
   podsumowanie i przycisk "Kupuję i płacę" dostają odstęp od krawędzi
   automatycznie, przez zwykły model pudełkowy, bez dotykania ich
   własnych, wewnętrznych paddingów (np. karta podsumowania ma już
   swój padding: 24px NIEZALEŻNIE od tego guttera — to nie jest
   podwójny padding, tylko dwa różne, nienachodzące na siebie
   poziomy: zewnętrzny gutter strony i wewnętrzny padding karty). */

@media (max-width: 600px) {
	body.woocommerce-checkout .wp-block-woocommerce-checkout {
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}
}

/* ---------- Radio button: własna przestrzeń na mobile, bez nachodzenia na tekst ----------
   Rzeczywista przyczyna (zweryfikowana w opublikowanym, natywnym CSS
   bloków WooCommerce — nie zgadywana): kółko radio to
   ".wc-block-components-radio-control__input", współdzielone przez
   opcje dostawy i płatności, natywnie "position: absolute; left: 16px;
   width/height: 20px" — WooCommerce samo już rezerwuje na nie miejsce
   natywnym "padding: 16px 16px 16px 48px" na całej opcji
   (".wc-block-components-radio-control__option"). Nasza WCZEŚNIEJSZA
   poprawka wizualna (sekcja "Dostawa i Płatność" wyżej, karty z
   paddingiem "14px 16px") nadpisała ten natywny padding-left płaskim
   16px — i to jest dokładna przyczyna nachodzenia kółka na tekst.

   Padding-left: 48px (miejsce na radio) jest teraz w regule BAZOWEJ
   wyżej — obowiązuje na wszystkich szerokościach, więc naprawia
   nachodzenie zarówno na mobile, jak i na desktopie (poprzednio ta
   wartość była tylko tutaj, w @media mobile — stąd desktop nadal miał
   błąd). Ten blok zostaje WYŁĄCZNIE dla dodatkowego, mobile-specific
   zabezpieczenia przed zawijaniem tekstu (min-width/width poniżej) —
   pozycja/rozmiar samego inputu radio nie jest tu dotykana. */

@media (max-width: 600px) {
	body.woocommerce-checkout .wc-block-components-radio-control__option-layout,
	body.woocommerce-checkout .wc-block-components-radio-control__label-group,
	body.woocommerce-checkout .wc-block-components-radio-control__description-group {
		min-width: 0;
		width: 100%;
	}
}

/* ---------- Checkout: faktura VAT + notatka do zamówienia ----------
   Wyłącznie warstwa wizualna na potwierdzonym DOM WooCommerce Blocks.
   Logika pól, walidacja i integracja GUS pozostają bez zmian. */

body.woocommerce-checkout #order.wc-block-components-address-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-top: 12px;
	padding: 20px;
	background: var(--wp--preset--color--surface, #ffffff);
	border: 1px solid var(--wp--preset--color--border, #e4e7ec);
	border-radius: var(--wp--preset--border-radius--base);
	box-sizing: border-box;
}

body.woocommerce-checkout #order .wc-block-components-checkbox__label,
body.woocommerce-checkout #order-notes .wc-block-components-checkbox__label {
	color: var(--wp--preset--color--ink, #111827);
	font-weight: 600;
}

body.woocommerce-checkout #order-notes.wc-block-checkout__order-notes {
	margin-top: 24px;
	padding: 20px;
	background: var(--wp--preset--color--surface, #ffffff);
	border: 1px solid var(--wp--preset--color--border, #e4e7ec);
	border-radius: var(--wp--preset--border-radius--base);
	box-sizing: border-box;
}

body.woocommerce-checkout .wc-block-checkout__add-note {
	margin-bottom: 0;
}

body.woocommerce-checkout #order-notes .wc-block-components-textarea {
	width: 100%;
	max-width: 100%;
	margin-top: 12px;
	box-sizing: border-box;
}

/* ---------- Header Checkoutu (osobny, "distraction-free" nagłówek) — logo + tytuł ----------
   UWAGA: ta sekcja ZASTĘPUJE poprzednią wersję z wcześniejszej rundy
   (styl bez logo, dostrajany wyłącznie CSS-em nad natywnym,
   wtyczkowym domyślnym wzorcem WooCommerce). Zadanie z tej rundy
   wprost zastępuje tamtą instrukcję i wymaga dodania logo Wenaro —
   a natywny wzorzec WooCommerce w ogóle nie renderuje "core/site-logo"
   (potwierdzone w źródle wtyczki:
   "plugins/woocommerce/patterns/header-distraction-free.php" ma tylko
   "core/site-title" + "woocommerce/cart-link"), więc dodanie logo
   wymagało PRAWDZIWEGO override'u template parta motywu (plik
   "parts/checkout-header.html" — patrz ten plik), a nie samego CSS.
   Stąd stary selektor oparty o gołe "header.wp-block-group
   .wp-block-site-title" (dopasowany do STAREGO, niezmienionego przez
   motyw markupu) przestał być prawdziwy i został tu zastąpiony
   selektorami opartymi o WŁASNE klasy nowego template parta.

   Mechanizm override'u (zweryfikowany w rzeczywistym kodzie
   WooCommerce, nie zgadywany): WooCommerce rejestruje template part o
   slugu "checkout-header" (obszar "header") przez
   "Automattic\WooCommerce\Blocks\Templates\CheckoutHeaderTemplate".
   "BlockTemplateUtils::theme_has_template_part()" sprawdza, czy motyw
   ma WŁASNY plik o tym samym slugu w "parts/" — jeśli tak, ładowany
   jest plik motywu zamiast wzorca wtyczki. Dokładnie to zrobiono:
   nowy plik "parts/checkout-header.html" (zarejestrowany też w
   "theme.json" → "templateParts", tak samo jak "header"/"footer") ma
   tę samą zewnętrzną strukturę co oryginalny wzorzec WooCommerce
   (ta sama klasa "wc-blocks-header-pattern", ten sam wewnętrzny
   "align:wide" + "layout: flex, justifyContent: space-between", ten
   sam "woocommerce/cart-link" po prawej) — jedyna różnica: po lewej,
   zamiast samego "core/site-title", jest grupa [core/site-logo +
   core/site-title], DOKŁADNIE tymi samymi blokami co w
   "parts/header.html" głównego nagłówka (to samo Site Logo z
   Personalizacji — zero nowego pliku graficznego, zero
   zahardkodowanego URL). Żaden szablon/plik WooCommerce nie został
   skopiowany ani zmodyfikowany — to własny plik motywu na
   zarejestrowanym, wspieranym slugu FSE.

   Rozmiar/waga tytułu (1.125rem / 700 / ink) — bez zmian względem
   poprzedniej rundy, nadal zgodny z tytułem zwykłego headera Wenaro
   na mobile (".wenaro-header .wenaro-header-title"). Logo: 40px
   szerokości (mniejsze niż 50px w głównym headerze — celowo
   kompaktowe, żeby nie zwiększać zauważalnie wysokości "distraction
   free" headera), wyrównane w pionie do środka razem z tytułem.
   Ikona koszyka ("woocommerce/cart-link") nie jest tu w ogóle
   stylowana — automatycznie dostaje odstęp od prawej krawędzi dzięki
   paddingowi na wspólnym, elastycznym wrapperze.

   POPRAWKA (ta runda — "obecna zła czcionka w checkout header ma
   zostać poprawiona"): plik "parts/checkout-header.html" z
   poprzedniej rundy jest nadal na dysku, niezmieniony (potwierdzone
   przy audycie tej rundy) i wykorzystuje dokładnie te same bloki
   "core/site-logo"/"core/site-title" co główny header — mechanizm
   override'u sam w sobie jest poprawny. Mimo to font-family jest tu
   teraz wymuszony jawnie i defensywnie (ten sam, ISTNIEJĄCY font
   motywu z "theme.json", nie nowa rodzina fontu) — z tego samego
   powodu, co analogiczna poprawka w sekcji Mini Cart niżej w tym
   pliku: natywny, skompilowany CSS bloków WooCommerce/Gutenberg bywa
   drukowany w kolejności, która przebija zwykłą specyficzność
   selektora motywu, więc sam brak jawnej deklaracji font-family mógł
   pozostawiać tytuł na dziedziczonym, nie zawsze przewidywalnym
   foncie zależnie od tego, co jeszcze wstrzykuje rdzeń/wtyczka na tej
   konkretnej stronie. */

.wenaro-checkout-header,
.wenaro-checkout-header * {
	font-family: var(--wp--preset--font-family--system-font, inherit) !important;
}

.wenaro-checkout-header-brand {
	align-items: center;
	column-gap: 10px;
}

.wenaro-checkout-header-logo img {
	display: block;
	border-radius: var(--wp--preset--border-radius--sm);
}

.wenaro-checkout-header-title {
	margin: 0;
	font-weight: 700 !important;
	font-size: 1.125rem !important;
	color: var(--wp--preset--color--ink);
	line-height: 1.2;
}

.wenaro-checkout-header-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.12s ease;
}

.wenaro-checkout-header-title a:hover {
	color: var(--wp--preset--color--brand);
}

/* POPRAWKA (runda "dwie drobne poprawki") — ikona koszyka
   ("woocommerce/cart-link") po prawej stronie Checkout Header jako
   przycisk WYŁĄCZNIE z ikoną, bez widocznego tekstu "Koszyk".

   AUDYT: realny render bloku "woocommerce/cart-link"
   ("Automattic\WooCommerce\Blocks\BlockTypes\CartLink::render()",
   plik "CartLink.php") to:
     <div ...><a class="wc-block-cart-link" href="...">{ikona}<span
       class="wc-block-cart-link__text">Koszyk</span></a></div>
   Ikona pochodzi z tego samego "MiniCartUtils::get_svg_icon()" co
   ikona w głównym headerze — bez ustawionego atrybutu "cartIcon" oba
   bloki renderują IDENTYCZNE SVG (2 kółka + 2 ścieżki), więc nie
   trzeba tworzyć ręcznie drugiej kopii SVG — poniższe reguły stylują
   już istniejący, natywny wrapper Checkout Cart Link.

   Tekst "Koszyk" jest ukrywany WYŁĄCZNIE wizualnie i WYŁĄCZNIE w
   obrębie Checkout Header — selektor zaczyna się od
   ".wenaro-checkout-header" (własna klasa motywu na zewnętrznej
   grupie tego template parta, patrz "parts/checkout-header.html"),
   więc ".wc-block-cart-link__text" gdziekolwiek indziej w
   WooCommerce zostaje całkowicie nietknięty. Technika to NIE
   "display:none": link dziś NIE ma osobnego "aria-label" (audyt
   "CartLink.php" — "aria-label" jest dodawany TYLKO, gdy tekst jest
   pusty, a "Koszyk" pustym tekstem nie jest), więc jego dostępna
   nazwa pochodzi wyłącznie z tego widocznego tekstu; "display:none"
   usunąłby ją całkowicie z drzewa dostępności. Zamiast tego — ta sama
   technika "clip-based", której WordPress core używa dla natywnego
   ".screen-reader-text" (position:absolute, wymiar 1×1px, clip) —
   tekst zostaje w DOM i nadal jest odczytywany przez czytniki ekranu,
   znika tylko wizualnie. "!important" tu celowo — bez niego ta reguła
   i natywna ".wc-block-cart-link .wc-block-cart-link__text
   {display:inline-flex}" mają identyczną specyficzność, więc bez
   "!important" wynik zależałby od przypadkowej kolejności ładowania
   arkuszy. */
.wenaro-checkout-header .wc-block-cart-link__text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* POPRAWKA (runda "kafelek zamiast koła") — zaakceptowany wzorzec
   wizualny tej rundy ZASTĘPUJE poprzedni kierunek (przezroczyste tło,
   cienka pomarańczowa ramka, pełne zaokrąglenie/koło, ciemna ikona,
   współdzielony z głównym headerem) CAŁKOWICIE nowym: pełny,
   pomarańczowy, umiarkowanie zaokrąglony (NIE okrągły) kafelek z
   dużą, białą ikoną koszyka. To jest teraz JEDYNA definicja wyglądu
   tego linku w całym pliku — poprzednia, współdzielona z głównym
   headerem reguła została w tym miejscu usunięta (nie dopisana
   ponownie gdzie indziej), a główny header ma z powrotem WŁASNĄ,
   niezależną regułę wyżej w tym pliku
   (".wenaro-header .wenaro-header-cart .wc-block-mini-cart__button")
   — jego wygląd pozostaje bez zmian.

   Kafelek 44×44px dobrany tak, by mieścił ikonę 34×34px z ok. 5px
   marginesu z każdej strony (44 = 34 + 2×5, "padding:5px" +
   "box-sizing:border-box"). "border-radius: var(--...--base)" —
   umiarkowany promień Wenaro (nie "full"), więc kafelek, nie koło. */
.wenaro-checkout-header .wc-block-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 5px;
	box-sizing: border-box;
	background: var(--wp--preset--color--brand);
	border: none;
	border-radius: var(--wp--preset--border-radius--base);
	color: var(--wp--preset--color--background);
	text-decoration: none;
	transition: background-color 0.12s ease;
}

.wenaro-checkout-header .wc-block-cart-link:hover {
	background: var(--wp--preset--color--brand-dark);
}

/* Duża, biała ikona — "color:inherit" + "fill:currentColor" (ikona
   dziedziczy "color:var(--...--background)" z kafelka wyżej, czyli
   biel). Rozmiar tym razem jawnie ustawiony na sztywno (34px) — w
   odróżnieniu od poprzedniej rundy, TU jest to celowe i zgodne z
   wymogiem tej rundy ("nie traktuj 34px jako świętej wartości, ale
   ikona ma być jawnie duża i wypełniać kafelek") — nie chodzi już o
   dziedziczenie natywnego, mniejszego rozmiaru bloku
   "woocommerce/cart-link". */
.wenaro-checkout-header .wc-block-cart-link .wc-block-mini-cart__icon {
	width: 34px;
	height: 34px;
	margin: 0;
	fill: currentColor;
	color: inherit;
}

/* Wrapper wstrzykiwany przez "assets/js/wenaro-checkout-header-cart-badge.js"
   (patrz ten plik) — jego JEDYNA rola to grupowanie ikony i plakietki
   w DOM (bez zmian w tej rundzie), samo pozycjonowanie plakietki jest
   teraz liczone względem CAŁEGO kafelka (".wc-block-cart-link", wyżej
   ustawiony na "position:relative"), a nie względem tego wrappera —
   dzięki temu plakietka zawsze ląduje w prawym górnym rogu kafelka,
   niezależnie od paddingu wokół ikony. */
.wenaro-checkout-header .wc-block-cart-link .wc-block-mini-cart__quantity-badge {
	display: inline-flex;
	align-items: center;
}

/* Plakietka ilości — logika (tworzenie/aktualizacja liczby) bez zmian
   w JS. Kolorystyka odwrócona względem poprzedniej rundy: tło samego
   kafelka jest teraz pełnym pomarańczem marki, więc plakietka w TYM
   samym kolorze byłaby niewidoczna — stąd jasne tło ("background")
   i ciemny tekst ("brand-dark") dla kontrastu, zamiast poprzedniego
   "brand"/"background". Mały, pojedynczy krążek w rogu — to NIE jest
   "dodatkowe duże koło wokół całego przycisku" zakazane w tej
   rundzie, tylko punktowa plakietka z liczbą, dokładnie jak w
   głównym Mini Cart. */
.wenaro-checkout-header .wc-block-cart-link .wc-block-mini-cart__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--brand-dark);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.wenaro-checkout-header .wc-block-cart-link .wc-block-mini-cart__badge[hidden] {
	display: none;
}

/* Boczny gutter headera checkoutu — pozostaje mobile-only (na
   desktopie ".alignwide" ma już naturalny odstęp od krawędzi
   viewportu dzięki wyśrodkowaniu w ramach "contentSize"/"wideSize",
   więc dodatkowy padding nie jest tam potrzebny). Selektor celuje w
   bezpośredni wewnętrzny wrapper ".alignwide" nowego template parta
   (".wenaro-checkout-header" — własna klasa dodana w
   "parts/checkout-header.html" na zewnętrznej grupie, więc ten
   selektor fizycznie nie może trafić w zwykły header sklepu, który ma
   inną, dodatkową klasę ".wenaro-header"). */
@media (max-width: 600px) {
	.wenaro-checkout-header > .wp-block-group.alignwide {
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}
}

/* ---------- Podsumowanie: wiersze totals — boczny odstęp ----------
   Karta podsumowania ("wc-block-components-sidebar") ma już własny
   padding: 24px na WSZYSTKICH stronach — to on daje odstęp od
   krawędzi karty pozycjom produktów i kuponowi. Poziomy padding na
   samych wierszach totals (16px, w regułach bazowych wyżej — teraz na
   WSZYSTKICH szerokościach, nie tylko mobile, żeby naprawić to
   również na desktopie) to inny, uzupełniający się poziom — nie
   podwójny gutter, bo dotyczy innego elementu niż padding karty.
   Duża pomarańczowa kwota, VAT pod "Łącznie", separatory i
   border/radius całej karty — nietknięte. */

/* =========================================================
   My Account — wenaro
   Style dla natywnej, KLASYCZNEJ strony WooCommerce "Moje konto"
   (shortcode "[woocommerce_my_account]" — nie blok). W przeciwieństwie
   do Cart/Checkout, klasyczny My Account nie ma prawie żadnych
   wbudowanych stylów layoutu (nawigacja i treść to zwykłe, nieostylowane
   sąsiadujące elementy) — dlatego ta sekcja odpowiada też za sam układ
   dwóch kolumn, nie tylko za wygląd. Markup pochodzi z rzeczywistych,
   stabilnych szablonów rdzenia WooCommerce (myaccount/*.php) —
   niezmienianych od lat, więc dużo bezpieczniejszych niż eksperymentalne
   bloki. Żadna logika PHP/JS nie została dodana ani zmieniona, żaden
   szablon WooCommerce nie został skopiowany do motywu.

   Scope: "body.woocommerce-account" — natywna klasa, którą WooCommerce
   dokłada do <body> na WSZYSTKICH endpointach Moje konto (Kokpit,
   Zamówienia, szczegóły zamówienia, Pliki do pobrania, Adresy,
   Szczegóły konta — "is_account_page()" zwraca true dla nich
   wszystkich), a także na stronie logowania/rejestracji dla gościa.
   Ten sam, sprawdzony wzorzec co w Cart/Checkout — zero nowych plików
   szablonu, zero ryzyka wycieku na inne strony.

   Kolory — wyłącznie presety z theme.json. Promienie tam, gdzie
   specyfikacja wymaga konkretnego zakresu (10–14px), ustawione jawnie
   w px z tego samego powodu co w Cart/Checkout/Shop/Single Product:
   nazwane presety promienia nie mają potwierdzonej wartości w
   theme.json.
   ========================================================= */

/* ---------- Ogólne: typografia, linki ---------- */

body.woocommerce-account .woocommerce {
	color: var(--wp--preset--color--ink);
	line-height: 1.6;
}

body.woocommerce-account .woocommerce a {
	color: var(--wp--preset--color--brand-dark);
}

body.woocommerce-account .woocommerce a:hover {
	color: var(--wp--preset--color--brand);
}

body.woocommerce-account .required {
	color: var(--wp--preset--color--danger);
	text-decoration: none;
}

/* ---------- Komunikaty WooCommerce (sukces / błąd / informacja) ----------
   Ten sam wzorzec "lekkiego tła + kolorowej kreski z lewej" co w
   ".wenaro-desc-callout" — spójny język wizualny w całym motywie. */

body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-info {
	display: block;
	margin: 0 0 24px;
	padding: 14px 20px;
	list-style: none;
	border-radius: 8px;
	border-left: 4px solid var(--wp--preset--color--muted);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
}

body.woocommerce-account .woocommerce-message {
	border-left-color: var(--wp--preset--color--success);
	background: color-mix(in srgb, var(--wp--preset--color--success) 8%, var(--wp--preset--color--background));
}

body.woocommerce-account .woocommerce-error {
	border-left-color: var(--wp--preset--color--danger);
	background: color-mix(in srgb, var(--wp--preset--color--danger) 8%, var(--wp--preset--color--background));
}

body.woocommerce-account .woocommerce-info {
	border-left-color: var(--wp--preset--color--brand);
	background: color-mix(in srgb, var(--wp--preset--color--brand) 6%, var(--wp--preset--color--background));
}

body.woocommerce-account .woocommerce-error li {
	margin: 0;
	list-style: none;
}

/* ---------- Komunikaty WooCommerce — realny, dziś renderowany markup ----------
   ODKRYCIE (przy okazji dopracowywania komunikatu "Potwierdź swój adres
   e-mail..." na Zamówieniach): "wenaro" jest motywem BLOKOWYM
   ("wp_is_block_theme()" === true), a WooCommerce dla motywów blokowych
   automatycznie podmienia WSZYSTKIE szablony komunikatów
   ("woocommerce/notices/{error,notice,success}.php") na ich odpowiedniki
   "blokowe" ("templates/block-notices/{error,notice,success}.php") —
   mechanizm: "Automattic\WooCommerce\Blocks\Domain\Services\Notices::
   get_notices_template()", podpięty pod filtr "wc_get_template" na hooku
   "after_setup_theme" (patrz kod źródłowy WooCommerce 11.x). Ten motyw
   NIE ma własnego nadpisania "woocommerce/notices/*.php", więc ZAWSZE
   dostaje wariant blokowy — inny markup niż klasyczny: kontener to
   "div.wc-block-components-notice-banner.is-{info|success|error}" z
   ikoną SVG i osobnym "div.wc-block-components-notice-banner__content"
   w środku (NIE "div.woocommerce-info"/"woocommerce-message" ze zwykłym
   tekstem w środku). Innymi słowy: reguły ".woocommerce-message /
   -error / -info" WYŻEJ w tym pliku w praktyce NIE dotyczą dziś ŻADNEGO
   komunikatu w tym motywie — to one są od dawna "martwym kodem", stąd
   komunikat potwierdzenia e-maila (i np. pusty stan "Nie złożono
   jeszcze żadnego zamówienia" na Zamówieniach, renderowany tym samym
   "wc_print_notice()") wyglądał dotąd zupełnie nieostylowany.

   Reguły niżej stylują TEN REALNY, faktycznie renderowany markup — ten
   sam, już ustalony język wizualny motywu (lekkie tło + kolorowa kreska
   z lewej, te same tokeny koloru) co powyższe, martwe dziś reguły
   klasyczne — więc komunikat wygląda spójnie z resztą sekcji "Moje
   konto" (karty adresów/zamówień, przyciski), bez wprowadzania nowego
   języka wizualnego. Stare, klasyczne reguły wyżej celowo zostają
   nietknięte (nieszkodliwy, tani fallback, gdyby to zachowanie
   WooCommerce kiedyś się zmieniło) — to WYŁĄCZNIE dodatkowa reguła dla
   markupu, który faktycznie trafia dziś do przeglądarki. Zero zmian w
   logice/treści komunikatów — wyłącznie wygląd.

   POPRAWKA (runda "komunikat ma pasować do karty zamówienia poniżej"):
   ten box i karta zamówienia (".wenaro-orders-card", patrz sekcja
   "Karty zamówień" niżej w tym pliku) są już dziś w TEJ SAMEJ kolumnie
   i mają IDENTYCZNĄ szerokość — oba są bezpośrednimi, "flush" dziećmi
   ".woocommerce-MyAccount-content" (bez własnego marginesu/paddingu na
   tym poziomie; potwierdzone w "wenaro/woocommerce/myaccount/orders.php"
   — hook "woocommerce_before_account_orders" renderuje się PRZED
   "<ul class=\"wenaro-orders-list\">", jako zwykły sąsiedni element, nie
   wewnątrz żadnego dodatkowego wrappera). Realny problem nie był więc
   wyrównaniem/szerokością samego pudełka, tylko jego JĘZYKIEM
   WIZUALNYM: promień 8px (karta ma 14px) i sam kolorowy akcent z lewej
   BEZ pełnego obramowania (karta ma pełny "border: 1px solid" dookoła +
   białe tło "surface") sprawiały, że przy identycznej szerokości
   komunikat "czytał się" jako inny, luźniejszy typ komponentu —
   "rozlany" bez wyraźnej krawędzi, zamiast karty z tej samej rodziny.
   Naprawa: ten sam promień 14px co karta, DOŁOŻONY pełny, cienki border
   w kolorze "border" (przy zachowanym, grubszym akcentowym borderze z
   lewej) i ten sam rytm paddingu co karta (20px/24px na desktopie,
   16px na mobile, patrz media query niżej) — bez ruszania szerokości,
   bo ta już była poprawna (potwierdzone pomiarem: 0px różnicy względem
   ".wenaro-orders-card" na każdej testowanej szerokości, patrz też
   POPRAWKA #3 niżej — realny mechanizm szerokości jest identyczny jak
   w karcie zamówienia: brak własnego "width"/"margin" poziomego, pełne
   poleganie na 100% szerokości ".woocommerce-MyAccount-content",
   "box-sizing: border-box" z globalnego resetu).

   POPRAWKA #4 (runda "box nadal zbyt szeroki na mobile vs nawigacja/
   karta"): sprawdzone TRZY osobne źródła CSS mogące wpływać na ten box
   — 1) ten plik (".wenaro-orders-card", ".woocommerce-MyAccount-
   content", ".woocommerce-MyAccount-navigation" — patrz sekcje niżej),
   2) komponent WooCommerce "notice-banner" (patrz POPRAWKA #3 niżej —
   "wc-blocks-style"), 3) DOMYŚLNY arkusz WooCommerce dla motywów
   blokowych "assets/css/woocommerce-blocktheme.css" (ładowany
   automatycznie na KAŻDYM motywie blokowym przez
   "WC_Frontend_Scripts::enqueue_block_assets()", hook
   "enqueue_block_assets" — nowe źródło, nieprzeglądane w poprzednich
   rundach). Żadne z nich nie zawiera reguły różnicującej szerokość
   komunikatu względem karty zamówienia — obie mają dokładnie ten sam
   mechanizm (patrz POPRAWKA #3 niżej).

   Nawigacja (".woocommerce-MyAccount-navigation") i sam kontener treści
   (".woocommerce-MyAccount-content") mają już w tym pliku JAWNE
   "width: 100%" jako zabezpieczenie przed dokładnie jedną, już wcześniej
   udokumentowaną w tym pliku usterką: rodzic ".woocommerce:has(...)" ma
   na mobile "flex-direction: column" przy zachowanym z desktopu
   "align-items: flex-start" — w układzie kolumnowym to przełącza
   znaczenie "align-items" na oś SZEROKOŚCI, więc każdy element BEZ
   własnego jawnego "width: 100%" może "skurczyć się" do szerokości
   własnej treści zamiast wypełnić kolumnę (patrz obszerny komentarz
   przy ".woocommerce-MyAccount-content" niżej w sekcji "Mobile: jedna
   kolumna"). Komunikat, jako WNUK (nie bezpośrednie dziecko) tego
   kontenera, nie powinien tego dziedziczyć — ale skoro DOKŁADNIE ten
   sam wzorzec zabezpieczenia już dwa razy okazał się konieczny w tym
   projekcie dla elementów, które "teoretycznie" nie powinny go
   potrzebować (akcje kokpitu, rząd karuzeli — patrz ten sam komentarz),
   ten box dostaje teraz to samo, sprawdzone zabezpieczenie wprost, żeby
   wykluczyć to jako przyczynę, zamiast zgadywać osobną, nową poprawką.

   POPRAWKA #3 (runda "geometria względem karty zamówienia #874 i
   przycisku 'Szczegóły zamówienia'"): dopiero wtedy znaleziono
   PRAWDZIWĄ przyczynę, dla której PADDING tego boxa (i przycisku
   niżej) nie reagował na żadną z poprzednich poprawek — WooCommerce
   samo dogrywa na tej stronie arkusz "wc-blocks-style" (rejestrowany
   w "src/Blocks/AssetsController.php", jawnie doładowywany przez
   "Notices::get_notices_template()" — patrz duży komentarz wyżej —
   dokładnie w momencie użycia szablonu blokowego komunikatu, czyli
   ZAWSZE gdy ten box się renderuje). Jego źródło
   ("client/blocks/assets/js/base/components/notice-banner/style.scss",
   reguła "%notice-banner") zawiera:
       padding: $gap !important;   // $gap = 16px, ZAWSZE, każda szerokość
   To jest REALNY, potwierdzony w kodzie rdzenia WooCommerce powód, dla
   którego padding boxa nigdy nie chciał się zmienić na żądane 20px/24px
   (desktop) — żadna specyficzność selektora nie pokona "!important" z
   arkusza rdzenia, więc jedyne poprawne rozwiązanie to również użyć
   "!important" tutaj, świadomie i wyłącznie na tej jednej właściwości,
   którą rdzeń wymusza. */

body.woocommerce-account .wc-block-components-notice-banner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 24px;
	padding: 20px 24px !important;
	list-style: none;
	border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid var(--wp--preset--color--brand);
	border-radius: 14px;
	background: color-mix(in srgb, var(--wp--preset--color--brand) 6%, var(--wp--preset--color--background));
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	line-height: 1.5;
}

body.woocommerce-account .wc-block-components-notice-banner.is-success {
	border-left-color: var(--wp--preset--color--success);
	background: color-mix(in srgb, var(--wp--preset--color--success) 8%, var(--wp--preset--color--background));
}

body.woocommerce-account .wc-block-components-notice-banner.is-error {
	border-left-color: var(--wp--preset--color--danger);
	background: color-mix(in srgb, var(--wp--preset--color--danger) 8%, var(--wp--preset--color--background));
}

/* Ikona SVG rdzenia WooCommerce — ta sama kolorystyka co tekst
   komunikatu (dziedziczy "currentColor"), lekko przezroczysta, żeby nie
   konkurowała wizualnie z treścią/przyciskiem. Stały rozmiar i lekki
   "margin-top" wyrównują ją do pierwszej linii tekstu, a nie do środka
   całej (czasem wielowierszowej) treści. */
body.woocommerce-account .wc-block-components-notice-banner > svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: currentColor;
	opacity: 0.7;
}

body.woocommerce-account .wc-block-components-notice-banner__content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
}

body.woocommerce-account .wc-block-components-notice-banner__summary {
	margin: 0 0 4px;
	font-weight: 700;
}

/* Przycisk wewnątrz komunikatu (np. "Potwierdź adres e-mail" /
   "Przeglądaj produkty" na pustym stanie Zamówień — oba to rdzeniowy
   WooCommerce znacznik "class=\"... wc-forward button\"", nie
   ".woocommerce-button" używany na kartach zamówień, stąd osobna
   reguła). "order: 1" (przy domyślnym "order: 0" tekstu towarzyszącego)
   celowo przesuwa przycisk PO tekście w kolejności WIZUALNEJ — sam
   tekst komunikatu w markupie WooCommerce zawsze idzie od razu PO
   przycisku (`<a>...</a> Tekst komunikatu`), więc bez tego przycisk
   renderowałby się przed zdaniem, któremu towarzyszy. Kolejność w
   DOM/focus (Tab) zostaje bez zmian — w komunikacie jest tylko ten
   jeden interaktywny element, więc to nie wprowadza żadnej pułapki
   dostępności. "margin-left: auto" dosuwa go do prawej krawędzi na
   desktopie/tablecie ("dopasować przycisk po prawej"); "flex-wrap:
   wrap" na rodzicu pozwala mu spaść pod tekst zamiast się ściskać, gdy
   oba nie mieszczą się w jednym wierszu.

   POPRAWKA (runda "dopracowanie przycisku"): poprzednia wersja miała
   PEŁNE tło koloru "brand" + biały tekst — mocny, dominujący wariant
   "primary", który obok stosunkowo cichego, jednozdaniowego komunikatu
   wyglądał nieproporcjonalnie ciężko ("bardziej jak rozciągnięty tekst
   w ramce niż normalny przycisk"). Sama SZEROKOŚĆ przycisku nigdy nie
   była z niczym "rozciągana" (brak "flex-grow"/"width:100%" poza
   media query mobile niżej — "flex-shrink:0" + brak jawnej szerokości
   już wcześniej dawały szerokość dopasowaną do treści); to właśnie
   MOCNE, wypełnione tło sprawiało wrażenie "bloku" ciągnącego wzrok, a
   nie zwykłego przycisku. Zamieniony wtedy na ten sam, lekki wariant co
   pozostałe przyciski akcji "Moje konta" (jasne tło "surface", cienki
   szary border, tekst "brand-dark").

   POPRAWKA #2 (runda "komunikat ma pasować do karty zamówienia"): ten
   wariant okazał się przeciwną skrajnością — biały/"surface" na niemal
   białym tle komunikatu (6% domieszki "brand") i cienki, SZARY (neutralny
   "border") kontur dawały zbyt mały kontrast względem otoczenia, więc
   przycisk "znikał" — "zbyt blady, mało czytelny, nie wygląda jak
   przycisk". Punktem odniesienia jest ".woocommerce-button.button"
   ("Szczegóły zamówienia" na karcie zamówienia niżej) — stąd te same
   wymiary/kształt (padding "8px 18px", "min-height:40px", promień 8px,
   ten sam "font-size"), ale kolorystyka pozostaje osobnym, jaśniejszym
   wariantem "informacyjnym" (nie kopiuje 1:1 neutralnego "Szczegóły
   zamówienia"): tło to ta sama domieszka koloru "brand", jakiej używa
   już np. pigułka statusu "processing" na karcie zamówienia (14% —
   wyraźnie widoczna, ale wciąż jasna/lekka), border w tonie "brand"
   zamiast neutralnego szarego (wyraźna, kolorowa krawędź zamiast ledwo
   widocznej), tekst "brand-darker" + waga 700 (mocniejszy kontrast niż
   zwykłe "brand-dark" 600 użyte gdzie indziej) — całość czytelna od
   razu, ale nadal jaśniejsza/lżejsza niż pełne, wypełnione "primary" z
   pierwszej wersji.

   POPRAWKA #3 (runda "geometria względem karty zamówienia #874 i
   przycisku 'Szczegóły zamówienia'") — PRAWDZIWA przyczyna, dla której
   ten przycisk zawsze wracał do "bladego, ledwo czytelnego, z tekstem
   przyklejonym do krawędzi", niezależnie od tego, jaki
   padding/background/color mu nadawaliśmy w poprzednich rundach: to
   samo źródło co przy paddingu boxa wyżej — "wc-blocks-style"
   (WooCommerce), reguła "%notice-banner .wc-forward" w
   "notice-banner/style.scss", jawnie skomentowana w kodzie rdzenia
   jako "Legacy notice compatibility":
       .wc-forward {
           color: $gray-800 !important;
           background: transparent !important;
           padding: 0 !important;
           opacity: 0.7;
           ...
       }
   Trzy właściwości ("color", "background", "padding") są tam
   "!important" — ŻADNA specyficzność selektora w tym pliku nie mogła
   tego pokonać, więc każda dotychczasowa zmiana tła/koloru/paddingu
   przycisku była cicho ignorowana przez przeglądarkę, a on realnie
   zawsze renderował się z "padding: 0" (stąd tekst dosłownie do
   krawędzi) i przezroczystym tłem. Dodatkowo rdzeń ustawia
   "opacity: 0.7" (BEZ "!important", ale ponieważ żadna nasza reguła
   nigdy nie deklarowała własnej "opacity", ta wartość i tak zawsze
   wygrywała domyślnie — stąd dodatkowe wrażenie "wyszarzenia/disabled"
   nawet tam, gdzie kolor sam w sobie był poprawny). Naprawa: własne
   "!important" WYŁĄCZNIE na tych samych trzech, jawnie wymuszonych przez
   rdzeń właściwościach (nie na całej regule) + jawne "opacity: 1". Border
   ("border: 0", bez "!important" w rdzeniu) i margin nie wymagały tego —
   nasza reguła miała już wyższą specyficzność i realnie wygrywała. */
body.woocommerce-account .wc-block-components-notice-banner__content .button.wc-forward {
	order: 1;
	margin-left: auto;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 18px !important;
	background: color-mix(in srgb, var(--wp--preset--color--brand) 14%, var(--wp--preset--color--surface)) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 45%, var(--wp--preset--color--border));
	border-radius: 8px;
	color: var(--wp--preset--color--brand-darker) !important;
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
	white-space: nowrap;
	opacity: 1;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

body.woocommerce-account .wc-block-components-notice-banner__content .button.wc-forward:hover {
	background: color-mix(in srgb, var(--wp--preset--color--brand) 22%, var(--wp--preset--color--surface)) !important;
	border-color: var(--wp--preset--color--brand);
}

body.woocommerce-account .wc-block-components-notice-banner__content .button.wc-forward:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-dark);
	outline-offset: 2px;
}

/* Mobile: komunikat i przycisk dostają trochę więcej oddechu, a
   przycisk staje się pełnoszerokim, wygodnym celem dotykowym na
   WŁASNYM wierszu pod tekstem — ten sam wzorzec co przyciski akcji w
   sekcji powitalnej Kokpitu ("min-height: 48px", pełna szerokość),
   zamiast ciasnego, wciśniętego w tekst linku.

   POPRAWKA (runda "komunikat ma pasować do karty zamówienia"): próg był
   tu wcześniej "max-width: 600px" — inny niż wszędzie indziej w "Moje
   koncie" (karta zamówienia, adresy, luźne nagłówki — patrz reguły
   wyżej w tym pliku — wszystkie przełączają się na 781px). Przy
   szerokościach 601-781px komunikat renderował się więc jeszcze w
   układzie "desktopowym" (przycisk dopasowany do treści, dosunięty w
   prawo), podczas gdy karta zamówienia POD nim była już w układzie
   mobilnym (pełna szerokość, ułożona w kolumnę) — to była realna
   przyczyna wrażenia "różnego rytmu" na tablecie/wąskim desktopie.
   Ujednolicone do tego samego progu 781px. Padding komunikatu na
   mobile ujednolicony do tego samego "16px" co karta zamówienia
   (".wenaro-orders-card" w tej samej media query niżej), zamiast
   osobnej, mniejszej wartości.

   "!important" tutaj jest KONIECZNE (nie kosmetyczne): bazowa reguła
   wyżej ma teraz "padding: 20px 24px !important" (patrz POPRAWKA #3 —
   walka o priorytet z "wc-blocks-style" WooCommerce). Bez własnego
   "!important" ta media query NIE mogłaby przebić reguły bazowej na
   mobile, niezależnie od kolejności/specyficzności — "!important"
   zawsze wygrywa z regułą bez "!important", również wewnątrz tego
   samego arkusza. */
@media (max-width: 781px) {
	body.woocommerce-account .wc-block-components-notice-banner {
		padding: 16px !important;
	}

	body.woocommerce-account .wc-block-components-notice-banner__content .button.wc-forward {
		width: 100%;
		min-height: 48px;
		margin-left: 0;
	}
}

/* POPRAWKA #5 (runda "box ma mieć taki sam boczny inset jak aktywna
   pozycja 'Zamówienia' w nawigacji, 12px — tyle, ile wynosi wewnętrzny
   padding ".woocommerce-MyAccount-navigation"") — celowo OSOBNA,
   ograniczona reguła, nie połączona z blokiem wyżej: dotyczy WYŁĄCZNIE
   bocznego marginesu/szerokości tego jednego info-boxa na mobile, nic
   więcej (nie rusza paddingu wewnętrznego, przycisku, tekstu ani
   kolorów — te zostają dokładnie takie, jak zaakceptowane wcześniej).

   Specyficzność: selektor niżej ma 4 klasy + 1 element
   ("body.woocommerce-account .woocommerce-MyAccount-content > ...is-info"),
   czyli więcej niż bazowa reguła ".wc-block-components-notice-banner"
   wyżej w tym pliku (2 klasy + 1 element) — wygrywa więc na "width" i
   "margin-left"/"margin-right" samą specyficznością, bez potrzeby
   "!important". Sprawdzone też względem obu zewnętrznych arkuszy
   WooCommerce ("wc-blocks-style" i "woocommerce-blocktheme.css") — żaden
   z nich nie ustawia "width"/"margin" na tym elemencie, więc nie ma tu
   z kim "wygrywać" poza własną, bazową regułą w tym pliku. */
@media (max-width: 781px) {
	body.woocommerce-account .woocommerce-MyAccount-content > .wc-block-components-notice-banner.is-info {
		width: calc(100% - 24px);
		margin-left: 12px;
		margin-right: 12px;
		box-sizing: border-box;
	}
}

/* ---------- Przyciski WooCommerce: wspólna baza + warianty akcji ----------
   Baza (np. "Zobacz") — lekki, drugorzędny przycisk outline. "Zapłać"
   dostaje pełny, mocny wariant "brand" (najważniejsza akcja w wierszu
   zamówienia). "Anuluj" — stonowany, tekstowy, bez wypełnienia (akcja
   niższego priorytetu, lekko ryzykowna). Działanie linków/przycisków
   (href, submit) pozostaje całkowicie nietknięte. */

body.woocommerce-account .woocommerce-button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 18px;
	margin: 4px 8px 4px 0;
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

body.woocommerce-account .woocommerce-button.button:hover {
	border-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--ink);
}

body.woocommerce-account .woocommerce-button.button.pay {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--background);
}

body.woocommerce-account .woocommerce-button.button.pay:hover {
	background: var(--wp--preset--color--brand-dark);
	border-color: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--background);
}

body.woocommerce-account .woocommerce-button.button.cancel {
	background: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	padding-left: 4px;
	padding-right: 4px;
}

body.woocommerce-account .woocommerce-button.button.cancel:hover {
	color: var(--wp--preset--color--danger);
}

/* ---------- Formularze: logowanie, rejestracja, edycja adresu/konta, zmiana hasła ----------
   Wszystkie te ekrany renderują dokładnie te same, klasyczne klasy
   WooCommerce ("woocommerce-form-row" / "woocommerce-Input" / "button"),
   więc jedna spójna reguła obsługuje je wszystkie naraz. Formularz jest
   flexem z zawijaniem — ".form-row-first"/".form-row-last" (para pól w
   jednym rzędzie, np. Imię/Nazwisko) dostają połowę szerokości,
   pozostałe pola są pełnej szerokości. */

body.woocommerce-account form.woocommerce-form,
body.woocommerce-account form.edit-account,
body.woocommerce-account form.woocommerce-EditAccountForm {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	max-width: 560px;
}

body.woocommerce-account .woocommerce-form-row,
body.woocommerce-account .form-row {
	flex: 1 1 100%;
	margin: 0 0 16px;
}

body.woocommerce-account .form-row-first,
body.woocommerce-account .form-row-last {
	flex: 1 1 calc(50% - 10px);
}

body.woocommerce-account .woocommerce-form-row label {
	display: block;
	margin-bottom: 6px;
	color: var(--wp--preset--color--muted);
	font-weight: 500;
	font-size: 0.875rem;
}

body.woocommerce-account .woocommerce-Input,
body.woocommerce-account .woocommerce-form-row select,
body.woocommerce-account .woocommerce-form-row textarea {
	width: 100%;
	min-height: 46px;
	padding: 12px 14px;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	box-sizing: border-box;
}

body.woocommerce-account .woocommerce-form-row textarea {
	min-height: 96px;
}

body.woocommerce-account .woocommerce-Input:focus,
body.woocommerce-account .woocommerce-form-row select:focus,
body.woocommerce-account .woocommerce-form-row textarea:focus {
	border-color: var(--wp--preset--color--brand);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--brand) 22%, transparent);
}

body.woocommerce-account .password-input {
	position: relative;
	display: block;
	width: 100%;
}

body.woocommerce-account .show-password-input {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	cursor: pointer;
}

/* Checkbox "Zapamiętaj mnie" — czytelny, wyrównany z tekstem */
body.woocommerce-account .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	font-weight: 400;
}

body.woocommerce-account .woocommerce-form__input-checkbox {
	width: 18px;
	height: 18px;
	accent-color: var(--wp--preset--color--brand);
}

/* Link odzyskiwania hasła — czytelny, nie zgubiony w formularzu */
body.woocommerce-account .woocommerce-LostPassword {
	flex-basis: 100%;
	margin: 4px 0 0;
	font-size: 0.875rem;
}

/* Główny przycisk formularza — pełna szerokość w obrębie formularza, brand.
   Selektory celowo powtarzają ".woocommerce-button.button" razem z klasą
   modyfikatora (dokładnie taki zestaw klas, jaki faktycznie nosi przycisk
   w rdzeniu WooCommerce) — inaczej przegrywałyby specyficznością z
   ogólną regułą ".woocommerce-button.button" wyżej (dwie klasy) i
   przycisk zostawałby jasny zamiast brand. */
body.woocommerce-account .woocommerce-button.button.woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-button.button.woocommerce-form-register__submit,
body.woocommerce-account form.edit-account button[type="submit"],
body.woocommerce-account form.woocommerce-EditAccountForm button[type="submit"],
body.woocommerce-account form[name="checkout"] button[type="submit"] {
	flex-basis: auto;
	min-height: 48px;
	padding: 12px 28px;
	margin: 8px 0 0;
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--background);
	border: none;
	border-radius: 10px;
	font-weight: 700;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: background-color 0.12s ease;
}

body.woocommerce-account .woocommerce-button.button.woocommerce-form-login__submit:hover,
body.woocommerce-account .woocommerce-button.button.woocommerce-form-register__submit:hover,
body.woocommerce-account form.edit-account button[type="submit"]:hover,
body.woocommerce-account form.woocommerce-EditAccountForm button[type="submit"]:hover {
	background: var(--wp--preset--color--brand-dark);
}

/* ---------- Szczegóły konta — edycja ("form.edit-account" /
   "woocommerce/myaccount/form-edit-account.php", rdzeń niezmieniony,
   zweryfikowany 1:1 przed napisaniem tych reguł) ----------
   Formularz ma już własną klasę na <form> (w przeciwieństwie do
   edycji adresu) — istniejąca wyżej reguła
   "form.edit-account, form.woocommerce-EditAccountForm { display:flex;
   flex-wrap:wrap; gap:4px 20px; max-width:560px; }" już nadaje mu
   układ pól (Imię/Nazwisko obok siebie dzięki natywnym klasom
   "form-row-first"/"form-row-last", reszta pełnej szerokości). Tu
   dochodzi wyłącznie: wygląd karty, fieldset "Zmiana hasła", tekst
   pomocniczy pod "Wyświetlana nazwa" i ikona pokaż/ukryj hasła.
   Zero zmiany logiki zapisu/walidacji/haseł. */

body.woocommerce-account form.edit-account,
body.woocommerce-account form.woocommerce-EditAccountForm {
	padding: 24px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-sizing: border-box;
}

/* Tekst pomocniczy pod "Wyświetlana nazwa" — rdzeń WooCommerce
   opakowuje go w "<em>" (kursywa); ujednolicone z resztą motywu jako
   zwykły, muted helper text bez kursywy. Sam tekst nietknięty. */
body.woocommerce-account #account_display_name_description {
	display: block;
	margin: 6px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

body.woocommerce-account #account_display_name_description em {
	font-style: normal;
}

/* Fieldset "Zmiana hasła" — usunięta ciężka natywna ramka
   przeglądarki na rzecz delikatnego separatora (górna linia) +
   czytelny tytuł zamiast domyślnego, surowego "legend". Pola w
   środku (wszystkie "form-row-wide", pełnej szerokości) nie
   potrzebują własnego flex — układają się poprawnie jako zwykłe,
   blokowe akapity, tak jak już stylowane wyżej ogólną regułą
   ".woocommerce-form-row". */
body.woocommerce-account form.edit-account fieldset,
body.woocommerce-account form.woocommerce-EditAccountForm fieldset {
	flex: 1 1 100%;
	margin: 8px 0 0;
	padding: 20px 0 0;
	border: none;
	border-top: 1px solid var(--wp--preset--color--border);
	min-width: 0;
}

body.woocommerce-account form.edit-account legend,
body.woocommerce-account form.woocommerce-EditAccountForm legend {
	display: block;
	width: 100%;
	padding: 0 0 16px;
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	font-weight: 700;
}

/* Ikona pokaż/ukryj hasła — natywny mechanizm WooCommerce
   ("assets/js/frontend/woocommerce.js", zawsze wczytywany, ZERO
   nowego JS): skrypt sam owija każdy input[type=password] w
   "span.password-input" i dokleja puste
   "button.show-password-input" (przełącza klasę "display-password"
   po kliknięciu, zarządza atrybutem aria-label). Rdzeń WooCommerce
   NIE dostarcza żadnej ikony (pusty przycisk) — cała ikona poniżej
   jest czysto wizualnym dodatkiem w CSS, mechanizm/klasy/aria-label
   nietknięte. Padding z prawej strony pola robi miejsce na ikonę,
   żeby tekst/kropki hasła na mobile nie nachodziły na nią. */
body.woocommerce-account .password-input .woocommerce-Input {
	padding-right: 46px;
}

body.woocommerce-account .show-password-input {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 6px;
	cursor: pointer;
}

body.woocommerce-account .show-password-input:hover {
	background: var(--wp--preset--color--background);
}

/* Stan domyślny (hasło ukryte) — "zamknięte oko": spłaszczona
   elipsa tym samym stylem obrysu co stan otwarty niżej, żeby oba
   stany czytały się jako ta sama ikona, tylko przełączona. */
body.woocommerce-account .show-password-input::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 4px;
	transform: translate(-50%, -50%);
	border: 1.5px solid var(--wp--preset--color--muted);
	border-radius: 50%;
	box-sizing: border-box;
	background: transparent;
}

body.woocommerce-account .show-password-input::after {
	content: none;
}

/* Stan po kliknięciu (hasło widoczne jako tekst) — klasę
   "display-password" dodaje wyłącznie natywny JS WooCommerce po
   kliknięciu; tu tylko podmieniamy wygląd ikony na "otwarte oko" +
   źrenica, podświetlone kolorem brand jako sygnał aktywnego stanu. */
body.woocommerce-account .show-password-input.display-password::before {
	width: 16px;
	height: 10px;
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--brand-dark);
	border-radius: 50%;
	box-sizing: border-box;
}

body.woocommerce-account .show-password-input.display-password::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 5px;
	transform: translate(-50%, -50%);
	background: var(--wp--preset--color--brand-dark);
	border-radius: 50%;
}

/* ---------- Logowanie / Rejestracja (gość): dwie lekkie, jasne karty ---------- */

body.woocommerce-account .u-columns.col2-set,
body.woocommerce-account #customer_login {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: flex-start;
}

body.woocommerce-account .u-column1,
body.woocommerce-account .u-column2 {
	flex: 1 1 300px;
	padding: 28px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-sizing: border-box;
}

body.woocommerce-account .u-column1 h2,
body.woocommerce-account .u-column2 h2 {
	margin: 0 0 20px;
	color: var(--wp--preset--color--ink);
	font-size: 1.25rem;
	font-weight: 700;
}

body.woocommerce-account .u-column1 form,
body.woocommerce-account .u-column2 form {
	max-width: none;
}

/* ---------- Zalogowany: dwie kolumny — nawigacja (lewo) | treść (prawo) ----------
   Klasyczny My Account nie ma żadnego wspólnego kontenera grid/flex
   z natywnego WooCommerce — ".woocommerce-MyAccount-navigation" i
   ".woocommerce-MyAccount-content" to zwykłe, sąsiadujące elementy
   wewnątrz wrappera shortcode'u ".woocommerce". Sam layout (nie tylko
   wygląd) pochodzi więc stąd. */

body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 0 0 240px;
	max-width: 260px;
	width: 100%;
	padding: 12px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-sizing: border-box;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link {
	margin: 2px 0;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 11px 14px;
	border-left: 3px solid transparent;
	border-radius: 8px;
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover {
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--ink);
}

/* Aktywna pozycja — subtelne pomarańczowe tło + lewy border brand +
   mocniejszy tekst, bez cieni/animacji */
body.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
	background: color-mix(in srgb, var(--wp--preset--color--brand) 8%, var(--wp--preset--color--background));
	border-left-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--wp--preset--color--border);
}

body.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 0%;
	min-width: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

/* ---------- Luźna treść (nagłówki/opisy) na mobile: wspólny gutter ----------
   Dotyczy TEKSTU, który stoi bezpośrednio w ".woocommerce-MyAccount-
   content", bez własnej "karty" (bez tła/paddingu/bordera) — w
   odróżnieniu od nawigacji, kart adresów, formularzy i kart zamówień,
   które już mają WŁASNY, wewnętrzny padding (patrz reguły wyżej w tej
   sekcji) i celowo zostają "flush" ze swoim kontenerem.

   Konkretny, dziś istniejący przypadek: akapit-wstęp na stronie
   "Adresy" ("Następujące adresy zostaną domyślnie użyte…" —
   "wenaro/woocommerce/myaccount/my-address.php", pierwszy element w
   szablonie, stąd trafia też w istniejący wyżej selektor
   "> p:first-child"). Selektory "> h1/h2/h3" są tu dodane defensywnie,
   zgodnie z wymaganiem spójnego guttera dla WSZYSTKICH głównych
   widoków — dziś nie pasują do żadnego realnego elementu (Kokpit,
   Zamówienia, Szczegóły konta i Szczegóły zamówienia nie mają żadnego
   luźnego nagłówka bezpośrednio w tym kontenerze — każdy jest już
   wewnątrz własnej karty), ale ochronią przed dokładnie tym samym
   problemem, gdyby w przyszłości pojawił się kolejny luźny nagłówek/
   opis (np. przez nowy hook wtyczki). Sekcja powitalna Kokpitu
   (".wenaro-dashboard-intro") dostaje ten sam gutter niżej, w swojej
   własnej sekcji "Kokpit" — jeden, spójny mechanizm (16px, próg 781px,
   ten sam co reszta "Moje konta"), nie osobne, przypadkowe
   "margin-left" dla pojedynczych tekstów. */

@media (max-width: 781px) {
	body.woocommerce-account .woocommerce-MyAccount-content > p,
	body.woocommerce-account .woocommerce-MyAccount-content > h1,
	body.woocommerce-account .woocommerce-MyAccount-content > h2,
	body.woocommerce-account .woocommerce-MyAccount-content > h3 {
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}
}

/* ---------- Tytuł strony (H1) na mobile: boczny gutter ----------
   Rzeczywisty szablon renderujący "Moje konto" i wszystkie jego
   endpointy ("Szczegóły konta", "Zamówienia", "Adresy", "Szczegóły
   zamówienia" itd.): w motywie nie istnieje żaden "page.html" /
   "singular.html" / "page-moje-konto.html" — jedynym pasującym
   szablonem jest ostateczny fallback "templates/index.html". Ten plik
   renderuje dynamiczny tytuł strony jako zwykły, nieostylowany
   "<!-- wp:post-title {"isLink":true} /-->" (blok rdzenia Gutenberga,
   bez własnej klasy poza natywną "wp-block-post-title") — WSPÓLNY dla
   każdego endpointu, bo sam TEKST tytułu jest już wcześniej
   przefiltrowany przez WooCommerce ("WC_Query::get_endpoint_title()" /
   filtr "woocommerce_endpoint_view-order_title" dodany w
   "functions.php" przy okazji poprzedniego zadania) — nic tu nie jest
   hardkodowane po stronie CSS, reguła działa identycznie dla każdego
   tytułu, jaki WooCommerce tam wstawi.

   Ten "<h1>" i shortcode "[woocommerce_my_account]" (nawigacja + treść)
   są RODZEŃSTWEM wewnątrz tego samego, nieostylowanego
   "<div class="wp-block-group">" — żadne z nich nie ma własnego
   zewnętrznego marginesu/paddingu na poziomie strony. Karta nawigacji
   i karty adresów/formularza mają WŁASNY, wewnętrzny padding (12–22px,
   patrz reguły wyżej w tej sekcji), który już daje ich treści odstęp
   od krawędzi — dlatego nawigacja/formularz/karty wyglądają poprawnie.
   Sam "<h1>" nie ma żadnego takiego wewnętrznego paddingu, więc jego
   tekst dotykał krawędzi ekranu na mobile.

   Poprawka celuje WYŁĄCZNIE w ten jeden element (NIE w
   ".woocommerce-MyAccount-content", które jest już poprawne — patrz
   wyżej) — standardowe 16px, ten sam próg 781px co reszta sekcji
   "Moje konto". Scope przez "body.woocommerce-account" (natywna klasa
   WooCommerce na każdym endpoincie konta) gwarantuje, że reguła nie
   wycieka na ".wp-block-post-title" użyty gdzie indziej w motywie
   (np. karty produktów w Sklepie/Stronie głównej — inny body-class,
   inny kontekst, zero konfliktu specyficzności). */

@media (max-width: 781px) {
	body.woocommerce-account .wp-block-post-title {
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}
}

/* ---------- Tabele: zamówienia / pliki do pobrania — lekkie, czytelne, responsywne ---------- */

body.woocommerce-account .shop_table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
	font-size: 0.9375rem;
}

body.woocommerce-account .shop_table thead th {
	padding: 12px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: left;
}

body.woocommerce-account .shop_table tbody td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
	vertical-align: middle;
}

body.woocommerce-account .shop_table tbody tr:last-child td {
	border-bottom: none;
}

/* Status zamówienia — lekka pigułka, kolor zależny od statusu (te same,
   stałe sluggi statusów co w rdzeniu WooCommerce) */
body.woocommerce-account .woocommerce-orders-table__cell-order-status {
	font-weight: 600;
}

body.woocommerce-account .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status {
	color: var(--wp--preset--color--success);
}

body.woocommerce-account .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status {
	color: var(--wp--preset--color--brand-dark);
}

body.woocommerce-account .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
body.woocommerce-account .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status {
	color: var(--wp--preset--color--muted);
}

body.woocommerce-account .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
body.woocommerce-account .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
body.woocommerce-account .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status {
	color: var(--wp--preset--color--danger);
}

/* Kolumna akcji — przyciski bez łamania się w brzydki sposób */
body.woocommerce-account .woocommerce-orders-table__cell-order-actions {
	white-space: nowrap;
}

/* ---------- Szczegóły zamówienia (widok pojedynczego zamówienia) ---------- */

body.woocommerce-account .woocommerce-order-details,
body.woocommerce-account .woocommerce-customer-details {
	margin: 0 0 32px;
}

body.woocommerce-account .woocommerce-order-details__title,
body.woocommerce-account .woocommerce-column__title {
	margin: 0 0 16px;
	color: var(--wp--preset--color--ink);
	font-size: 1.125rem;
	font-weight: 700;
}

body.woocommerce-account .woocommerce-table--order-details tfoot th,
body.woocommerce-account .woocommerce-table--order-details tfoot td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
}

body.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child th,
body.woocommerce-account .woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: none;
	color: var(--wp--preset--color--brand-dark);
	font-weight: 800;
	font-size: 1.125rem;
}

body.woocommerce-account .woocommerce-columns--addresses {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

body.woocommerce-account .woocommerce-columns--addresses .woocommerce-column {
	flex: 1 1 260px;
}

/* ---------- Adresy (lista adresów w "Moje konto") ---------- */

body.woocommerce-account .woocommerce-Addresses {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

body.woocommerce-account .woocommerce-Address {
	flex: 1 1 280px;
	padding: 22px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-sizing: border-box;
}

body.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 12px;
	margin: 0 0 12px;
	padding: 0;
	text-align: left;
}

/* Zdiagnozowane w realnym DOM (Computed Styles, zweryfikowane przez
   użytkownika w DevTools): <header> ma w markupie rdzenia WooCommerce
   dwie klasy — "woocommerce-Address-title title". Druga z nich,
   ".title", dziedziczy legacy clearfix WooCommerce (pseudo-elementy
   "::before"/"::after": content:" "; display:table). Dopóki header był
   display:block, te pseudo-elementy nic nie zmieniały wizualnie. Po
   przełączeniu headera na "display: flex" (reguła wyżej) "::before"
   staje się PIERWSZYM dzieckiem flex przed h2, a "gap: 12px" tego
   kontenera dolicza się przed nim — stąd h2 renderował się dokładnie
   12px (czyli o jeden "gap") dalej niż <address> pod spodem.
   Pierwsza wersja tej reguły (bez ".title" w selektorze i bez
   "!important") NIE wygrywała w realnej kaskadzie z regułą
   źródłową WooCommerce — dlatego selektor jest tu złożony z OBU
   klas nagłówka (wyższa specyficzność) i świadomie użyty jest
   "!important", ograniczony wyłącznie do tego jednego, konkretnego
   nagłówka kart adresowych w Moje konto — nie wyłączamy globalnie
   clearfixów ".title" używanych gdzie indziej w motywie/WooCommerce. */
body.woocommerce-account .woocommerce-Address-title.title::before,
body.woocommerce-account .woocommerce-Address-title.title::after {
	content: none !important;
	display: none !important;
}

/* Nagłówek ("Adres rozliczeniowy"/"Adres do wysyłki") ma zaczynać się
   dokładnie na tej samej osi co dane adresowe pod spodem — "flex: 1 1
   auto" + jawne "text-align: left" gwarantują to niezależnie od
   wszystkiego innego (bez tego h2 zajmował tylko szerokość swojej
   treści w wierszu flex, co przy jakimkolwiek odziedziczonym
   wyśrodkowaniu tekstu potrafiło przesunąć widoczny tekst w prawo). */
body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3 {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	text-align: left;
	color: var(--wp--preset--color--ink);
	font-size: 1rem;
	font-weight: 700;
}

/* Link "Edytuj"/"Dodaj" (Zadanie K, krok 2) — skrócony tekst (kontekst
   daje już nagłówek karty, patrz nadpisanie szablonu
   "wenaro/woocommerce/myaccount/my-address.php"), teraz w formie
   subtelnego, małego przycisku zamiast podkreślonego linku — czytelny,
   nie dominuje nad kartą, stały wariant na obu kartach. */

body.woocommerce-account .woocommerce-Address-title .edit {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 6px 14px;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	color: var(--wp--preset--color--brand-dark);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

body.woocommerce-account .woocommerce-Address-title .edit:hover {
	border-color: var(--wp--preset--color--brand);
	background: color-mix(in srgb, var(--wp--preset--color--brand) 8%, var(--wp--preset--color--background));
	color: var(--wp--preset--color--brand-dark);
}

body.woocommerce-account .woocommerce-Address address {
	color: var(--wp--preset--color--muted);
	font-style: normal;
	line-height: 1.7;
}

/* ---------- Adresy — edycja adresu (formularz) ----------
   Rdzeń WooCommerce ("templates/myaccount/form-edit-address.php",
   zweryfikowany 1:1 przed napisaniem tych reguł) NIE nadaje żadnej
   klasy elementowi <form> — dlatego selektor zaczepiony jest o stałą,
   zawsze obecną klasę potomka ".woocommerce-address-fields" (przez
   ":has()", ten sam sprawdzony wzorzec co przy dwukolumnowym układzie
   "Moje konto" wyżej w tym pliku). Zero nadpisania szablonu, zero
   zmiany logiki/walidacji zapisu adresu — czysty CSS na natywnym
   markupie "woocommerce_form_field()". Pola dziedziczą już istniejące
   wyżej reguły ".woocommerce-form-row"/".form-row-first"/
   ".form-row-last"/".woocommerce-Input" — Imię/Nazwisko stają obok
   siebie wyłącznie dlatego, że rdzeń WooCommerce sam nadaje im klasy
   "form-row-first"/"form-row-last" (get_default_address_fields());
   pozostałe pola (firma, kraj, ulica, kod, miasto, województwo,
   telefon, e-mail przy adresie rozliczeniowym — dokładny zestaw
   zależy od kraju/konfiguracji i NIE jest tu na sztywno zakładany)
   dostają "form-row-wide" i zostają pełnej szerokości automatycznie.
   Pole kraju renderuje się jako naturalny <select> WooCommerce
   (".country_to_state") — stylowany tak samo jak pozostałe pola,
   bez podmieniania na statyczny tekst. */

body.woocommerce-account form:has(> .woocommerce-address-fields) {
	max-width: 560px;
	padding: 24px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-sizing: border-box;
}

body.woocommerce-account form:has(> .woocommerce-address-fields) > h2 {
	margin: 0 0 20px;
	color: var(--wp--preset--color--ink);
	font-size: 1.25rem;
	font-weight: 700;
}

body.woocommerce-account .woocommerce-address-fields__field-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
}

body.woocommerce-account form:has(> .woocommerce-address-fields) .country_to_state,
body.woocommerce-account form:has(> .woocommerce-address-fields) .state_select {
	cursor: pointer;
}

body.woocommerce-account form:has(> .woocommerce-address-fields) p:last-child {
	margin: 12px 0 0;
}

body.woocommerce-account form:has(> .woocommerce-address-fields) button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 10px 26px;
	background: var(--wp--preset--color--brand);
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 8px;
	color: var(--wp--preset--color--background);
	font-weight: 700;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

body.woocommerce-account form:has(> .woocommerce-address-fields) button[type="submit"]:hover {
	background: var(--wp--preset--color--brand-dark);
	border-color: var(--wp--preset--color--brand-dark);
}

/* ---------- Mobile: jedna kolumna, nawigacja nad treścią ----------
   Kolejność DOM już to zapewnia — nawigacja występuje w markupie przed
   treścią, więc samo złożenie kolumn w jedną wystarczy. Ten sam próg co
   w Cart/Checkout (781px), dla spójności progów responsywnych w całym
   motywie. Tabele przechodzą na czytelny układ "etykieta: wartość" w
   jednej kolumnie (dzięki natywnemu atrybutowi "data-title", który
   WooCommerce już dodaje do każdej komórki) zamiast poziomego scrolla. */

@media (max-width: 781px) {
	body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation),
	body.woocommerce-account .u-columns.col2-set,
	body.woocommerce-account #customer_login {
		flex-direction: column;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation {
		flex-basis: auto;
		max-width: none;
	}

	/* POPRAWKA (Zadanie N): ".woocommerce:has(.woocommerce-MyAccount-
	   navigation)" ma "align-items: flex-start" — świadomie ustawione
	   dla DESKTOPOWEGO układu w wierszu (wyrównanie kart do góry, gdy
	   mają różną wysokość). Ten sam "flex-start" w kontenerze
	   PRZEŁĄCZONYM na "flex-direction: column" (reguła wyżej) zmienia
	   znaczenie na oś POPRZECZNĄ (szerokość!) — zamiast rozciągać
	   ".woocommerce-MyAccount-content" na pełną szerokość (jak przy
	   domyślnym "align-items: stretch"), pozwala mu zwężać/rozszerzać
	   się do szerokości WŁASNEJ TREŚCI ("fit-content"). Dotąd nie było
	   to widoczne, bo każda dotychczasowa treść (nawigacja, karty
	   adresów/formularza) sama wymuszała "width: 100%"/"max-width:
	   none". Nowe elementy tego zadania (akcje kokpitu, cały rząd
	   karuzeli "Może Cię zainteresować" z wieloma kartami) NIE miały
	   takiego zabezpieczenia — ich naturalna (nieściśnięta) szerokość
	   "przeciekała" przez ".woocommerce-MyAccount-content" aż do
	   poziomego przewijania CAŁEJ STRONY na mobile (potwierdzone
	   pomiarem: "scrollWidth" dokładnie równy sumie szerokości 8
	   kart karuzeli, mimo że sama karuzela ma "overflow-x: auto").
	   Jawne "width: 100%" na ".woocommerce-MyAccount-content" usuwa
	   zależność od "align-items" w tym jednym, kluczowym miejscu —
	   naprawia to raz, dla WSZYSTKICH obecnych i przyszłych elementów
	   wewnątrz (nie tylko kokpitu/karuzeli), bez dotykania układu
	   desktopowego (reguła jest wyłącznie w tym mobile media query) i
	   bez zmiany "align-items" na poziomie rodzica (który nadal
	   poprawnie wyrównuje nawigację/treść do góry na desktopie). */
	body.woocommerce-account .woocommerce-MyAccount-content {
		width: 100%;
		box-sizing: border-box;
	}

	body.woocommerce-account form.woocommerce-form,
	body.woocommerce-account form.edit-account,
	body.woocommerce-account form.woocommerce-EditAccountForm,
	body.woocommerce-account form:has(> .woocommerce-address-fields) {
		max-width: none;
	}

	body.woocommerce-account .form-row-first,
	body.woocommerce-account .form-row-last {
		flex-basis: 100%;
	}

	body.woocommerce-account .woocommerce-form-login__submit,
	body.woocommerce-account .woocommerce-form-register__submit,
	body.woocommerce-account form.edit-account button[type="submit"],
	body.woocommerce-account form.woocommerce-EditAccountForm button[type="submit"],
	body.woocommerce-account form:has(> .woocommerce-address-fields) button[type="submit"] {
		width: 100%;
	}

	body.woocommerce-account form:has(> .woocommerce-address-fields),
	body.woocommerce-account form.edit-account,
	body.woocommerce-account form.woocommerce-EditAccountForm {
		padding: 20px;
	}

	body.woocommerce-account .shop_table_responsive thead {
		display: none;
	}

	body.woocommerce-account .shop_table_responsive,
	body.woocommerce-account .shop_table_responsive tbody,
	body.woocommerce-account .shop_table_responsive tr,
	body.woocommerce-account .shop_table_responsive td {
		display: block;
		width: 100%;
	}

	body.woocommerce-account .shop_table_responsive tr {
		margin: 0 0 16px;
		padding: 4px 0 12px;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	body.woocommerce-account .shop_table_responsive tbody tr:last-child {
		margin-bottom: 0;
	}

	body.woocommerce-account .shop_table_responsive td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 8px 0;
		border-bottom: none;
		text-align: right;
	}

	body.woocommerce-account .shop_table_responsive td::before {
		content: attr(data-title);
		flex: none;
		margin-right: 12px;
		color: var(--wp--preset--color--muted);
		font-size: 0.8125rem;
		font-weight: 600;
		text-align: left;
	}

	body.woocommerce-account .woocommerce-orders-table__cell-order-actions {
		white-space: normal;
		justify-content: flex-end;
		flex-wrap: wrap;
	}

	body.woocommerce-account .woocommerce-Addresses,
	body.woocommerce-account .woocommerce-columns--addresses {
		flex-direction: column;
	}

	/* Karta adresu ("Adres rozliczeniowy"/"Adres do wysyłki") na desktopie
	   dostaje "flex: 1 1 280px" celowo — to ustawia SZEROKOŚĆ w wierszu
	   (dwie karty obok siebie, równa wysokość dzięki domyślnemu
	   "align-items: stretch" kontenera). Po przełączeniu kontenera na
	   "flex-direction: column" (wyżej) ta sama wartość zaczyna działać
	   na osi PIONOWEJ — "280px" staje się WYSOKOŚCIĄ (flex-basis), a
	   "flex-grow: 1" dodatkowo rozciąga kartę, stąd sztuczny, pusty
	   obszar pod treścią adresu. "flex: 0 0 auto" każe karcie mieć
	   wysokość wynikającą wyłącznie z treści — dokładnie ten sam wzorzec
	   już zastosowany dla ".wenaro-order-details-address-card" wyżej w
	   tym pliku (Moje konto → Zamówienia → Szczegóły zamówienia). */
	body.woocommerce-account .woocommerce-Address {
		flex: 0 0 auto;
	}
}

/* ---------- Zamówienia — karty (".wenaro-orders-*") ----------
   Zastępuje domyślną tabelę WooCommerce "Moje konto → Zamówienia"
   czytelnymi kartami — markup pochodzi z oficjalnego, wspieranego przez
   WooCommerce nadpisania szablonu:
   "wenaro/woocommerce/myaccount/orders.php" (patrz obszerny komentarz na
   górze tego pliku — bazuje 1:1 na realnym źródle rdzenia WooCommerce
   11.1.0, zweryfikowanym przed napisaniem).

   Cel: klient z wieloma zamówieniami musi umieć odnaleźć zamówienie PO
   PRODUKCIE — dlatego każda karta pokazuje od razu miniaturę + nazwę +
   ilość WSZYSTKICH pozycji, bez rozwijania/klikania.

   Karta to "<li>", NIE "<table>" — klasy ".shop_table" /
   ".woocommerce-orders-table__*" (wyżej w tym pliku) jej nie dotyczą.
   Te reguły pozostają celowo nietknięte: nadal obsługują inne tabele w
   "Moje koncie" (np. "Pliki do pobrania"), które w tym zadaniu nie są
   zmieniane.

   Przyciski akcji (Szczegóły zamówienia / Zapłać / Anuluj) w stopce
   karty NIE mają tu własnego stylu koloru — celowo dziedziczą gotowy,
   już istniejący wygląd z sekcji "Przyciski WooCommerce" wyżej w tym
   pliku (".woocommerce-button.button", ".pay", ".cancel"), bo szablon
   renderuje je z dokładnie tymi samymi klasami co poprzednio w tabeli.
   To zapewnia 100% spójność wizualną bez duplikowania stylu.

   Miniatura: kontener ma stałe wymiary i wyśrodkowuje obrazek przez
   "object-fit: contain" (NIE "cover") — dokładnie ta sama konwencja co
   przy kaflach "Może Cię zainteresować" niżej i przy filtrach rozmiaru
   obrazków w functions.php ("wenaro_thumbnail_image_size" wymusza
   "crop: 0") — miniatura produktu nigdy nie jest brutalnie
   przycinana do kwadratu, tylko skalowana z zachowaniem proporcji na
   jednolitym tle.

   Statusy: kolory pigułki są WYŁĄCZNIE dekoracją na znanych, stałych
   sluggach rdzenia WooCommerce (te same rodziny statusów co w regule
   ".woocommerce-orders-table__row--status-*" wyżej w tym pliku) — sama
   WIDOCZNA nazwa statusu zawsze pochodzi z natywnego,
   przetłumaczonego "wc_get_order_status_name()" w szablonie PHP, nigdy
   nie jest tu hardkodowana. Nieznany/niestandardowy status (np. z
   wtyczki) po prostu nie dostaje żadnego koloru modyfikatora i zostaje
   przy neutralnym stylu bazowym — nic się nie psuje.

   Bez "!important" — cała sekcja korzysta z tego samego poziomu
   specyficzności co reszta pliku (".wenaro-orders-*" + jeden poziom
   zagnieżdżenia), więc nie jest potrzebny. */

.wenaro-orders-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.wenaro-orders-card {
	padding: 20px 24px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
}

.wenaro-orders-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin: 0 0 16px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wenaro-orders-card-heading {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.wenaro-orders-card-number {
	color: var(--wp--preset--color--brand-dark);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
}

.wenaro-orders-card-number:hover {
	color: var(--wp--preset--color--brand-darker);
	text-decoration: underline;
}

.wenaro-orders-card-date {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

.wenaro-orders-card-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.wenaro-orders-card-status {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	background: var(--wp--preset--color--background);
	border-radius: 9999px;
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wenaro-orders-card-status--completed {
	background: color-mix(in srgb, var(--wp--preset--color--success) 12%, var(--wp--preset--color--background));
	color: var(--wp--preset--color--success);
}

.wenaro-orders-card-status--processing {
	background: color-mix(in srgb, var(--wp--preset--color--brand) 12%, var(--wp--preset--color--background));
	color: var(--wp--preset--color--brand-dark);
}

.wenaro-orders-card-status--cancelled,
.wenaro-orders-card-status--failed,
.wenaro-orders-card-status--refunded {
	background: color-mix(in srgb, var(--wp--preset--color--danger) 10%, var(--wp--preset--color--background));
	color: var(--wp--preset--color--danger);
}

.wenaro-orders-card-total {
	color: var(--wp--preset--color--ink);
	font-weight: 800;
	font-size: 1rem;
	white-space: nowrap;
}

.wenaro-orders-card-products {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 0 16px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wenaro-orders-card-product {
	display: flex;
	align-items: center;
	gap: 14px;
}

.wenaro-orders-card-product-image {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	overflow: hidden;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
}

.wenaro-orders-card-product-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Nazwa i ilość ZAWSZE jedna nad drugą (kolumna), niezależnie od
   długości nazwy produktu i niezależnie od szerokości ekranu — poprawka
   błędu, w którym przy krótkiej nazwie ilość "uciekała" na prawą stronę
   wiersza (poprzednie "justify-content: space-between" na jednym
   wierszu z zawijaniem), a przy długiej nazwie ilość ląduje pod nią
   tylko przez przypadek zawinięcia. Ten sam układ na desktopie i
   mobile — bez osobnej reguły w media query. */
.wenaro-orders-card-product-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 auto;
	gap: 2px;
	min-width: 0;
}

.wenaro-orders-card-product-name {
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	overflow-wrap: break-word;
}

a.wenaro-orders-card-product-name:hover {
	color: var(--wp--preset--color--brand-dark);
	text-decoration: underline;
}

.wenaro-orders-card-product-qty {
	flex: 0 0 auto;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

.wenaro-orders-card-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px 10px;
}

/* Mobile: hierarchia numer/data → status → total → produkty → przycisk,
   jak w specyfikacji. Karta zostaje jedną, czytelną kolumną — bez
   poziomego scrolla, bez tabeli — więc w przeciwieństwie do starych
   ".shop_table_responsive" reguł wyżej NIE jest tu potrzebny żaden
   trik z "data-title"/pseudoelementami: to już jest naturalnie
   jednokolumnowy układ na każdej szerokości, mobile tylko doprecyzowuje
   odstępy i rozmiar dotykowy przycisków. Ten sam próg (781px) co reszta
   "Moje konta", dla spójności. */
@media (max-width: 781px) {
	.wenaro-orders-card {
		padding: 16px;
	}

	.wenaro-orders-card-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.wenaro-orders-card-meta {
		width: 100%;
		justify-content: space-between;
	}

	.wenaro-orders-card-product-image {
		width: 48px;
		height: 48px;
	}

	.wenaro-orders-card-footer {
		justify-content: stretch;
	}

	.wenaro-orders-card-footer .woocommerce-button.button {
		flex: 1 1 auto;
		min-height: 44px;
		text-align: center;
	}
}

/* Bardzo wąski ekran — produkt przechodzi z rzędu (obrazek obok tekstu)
   na własną kolumnę, żeby długa nazwa nigdy nie ściskała miniatury ani
   nie wychodziła poza ekran. */
@media (max-width: 380px) {
	.wenaro-orders-card-product {
		flex-wrap: wrap;
	}

	.wenaro-orders-card-product-info {
		flex-basis: 100%;
	}
}

/* =========================================================
   Szczegóły zamówienia — karty (".wenaro-order-details-*")
   Zastępuje domyślny, tabelaryczny widok WooCommerce pojedynczego
   zamówienia w "Moje konto → Zamówienia → Szczegóły zamówienia".
   Markup: "wenaro/woocommerce/myaccount/view-order.php" (patrz obszerny
   komentarz na górze tego pliku — dlaczego NIE nadpisujemy
   "order/order-details.php" ani "order/order-details-customer.php":
   oba są współdzielone z ekranem "Zamówienie otrzymane" po checkoucie,
   którego to zadanie nie obejmuje).

   Status/kwota w nagłówku CELOWO używają dokładnie tych samych klas co
   karty na liście zamówień (".wenaro-orders-card-status[--status]",
   ".wenaro-orders-card-total", ".wenaro-orders-card-date") — zero
   duplikacji, gwarantowana spójność wizualna z listą, zgodnie z
   wymaganiem specyfikacji.

   Stare reguły ".woocommerce-order-details" / ".woocommerce-table--order-details"
   / ".woocommerce-columns--addresses" wyżej w tym pliku są celowo
   NIETKNIĘTE — to właśnie one nadal obsługują ekran "Zamówienie
   otrzymane" (współdzielony szablon, patrz wyżej), więc usunięcie lub
   zmiana tamtych reguł zepsułaby ten ekran.

   Siatka produktu (".wenaro-order-details-product") używa CSS Grid z
   nazwanymi obszarami, bo dokładnie to zadanie wymaga: na desktopie
   cena stoi w tym samym wierszu co nazwa (po prawej), a ilość osobno
   pod nazwą; na mobile cena schodzi pod ilość, w tej samej kolumnie co
   nazwa. To jest inny problem niż flex "space-between + wrap" (który
   naprawiliśmy na liście zamówień) — tu pozycja ceny ma świadomie
   RÓŻNIĆ się między desktopem a mobile, więc dwa różne szablony
   "grid-template-areas" (jeden na każdą szerokość) są tu poprawnym,
   deterministycznym rozwiązaniem, nieuzależnionym od długości nazwy. */

.wenaro-order-details {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 24px;
}

/* ---------- Nagłówek: numer/data/status/kwota + akcje ---------- */

.wenaro-order-details-header-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 20px;
}

.wenaro-order-details-heading {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.wenaro-order-details-number {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.25;
}

.wenaro-order-details-header-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--border);
}

/* ---------- Sekcje ogólnie: karta z nagłówkiem ---------- */

.wenaro-order-details-section {
	padding: 20px 24px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
}

.wenaro-order-details-section-title {
	margin: 0 0 16px;
	color: var(--wp--preset--color--ink);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ---------- Historia zamówienia ("Order updates") ---------- */

.wenaro-order-details-notes-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wenaro-order-details-note {
	padding-bottom: 14px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wenaro-order-details-note:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.wenaro-order-details-note-date {
	margin: 0 0 4px;
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 600;
}

.wenaro-order-details-note-content {
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.wenaro-order-details-note-content p {
	margin: 0 0 8px;
}

.wenaro-order-details-note-content p:last-child {
	margin-bottom: 0;
}

/* ---------- Produkty ----------
   Siatka: [miniatura] [nazwa | cena] / [miniatura] [ilość (pod nazwą)]
   — patrz wyjaśnienie na górze sekcji. */

.wenaro-order-details-product {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"media name  total"
		"media qty   qty";
	column-gap: 14px;
	row-gap: 4px;
	align-items: start;
	padding: 16px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wenaro-order-details-product:first-child {
	padding-top: 0;
}

.wenaro-order-details-product:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.wenaro-order-details-product-media {
	display: flex;
	grid-area: media;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	overflow: hidden;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
}

.wenaro-order-details-product-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.wenaro-order-details-product-name {
	grid-area: name;
	min-width: 0;
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	font-weight: 500;
	overflow-wrap: break-word;
}

.wenaro-order-details-product-name a {
	color: inherit;
	text-decoration: none;
}

.wenaro-order-details-product-name a:hover {
	color: var(--wp--preset--color--brand-dark);
	text-decoration: underline;
}

/* Warianty produktu (np. "Rozmiar: L") — natywna lista WooCommerce
   ("wc_display_item_meta()"), tylko zresetowana/wyciszona. */
.wenaro-order-details-product-meta {
	margin-top: 4px;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.wenaro-order-details-product-meta ul,
.wenaro-order-details-product-meta .wc-item-meta {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wenaro-order-details-product-note {
	margin-top: 6px;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-style: italic;
}

.wenaro-order-details-product-note p {
	margin: 0;
}

.wenaro-order-details-product-qty {
	grid-area: qty;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-weight: 600;
}

.wenaro-order-details-product-qty del {
	color: var(--wp--preset--color--muted);
	opacity: 0.6;
}

.wenaro-order-details-product-qty ins {
	color: var(--wp--preset--color--success);
	text-decoration: none;
	font-weight: 700;
}

.wenaro-order-details-product-total {
	grid-area: total;
	align-self: start;
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	font-size: 0.9375rem;
	text-align: right;
	white-space: nowrap;
}

/* ---------- Podsumowanie finansowe ---------- */

.wenaro-order-details-summary-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wenaro-order-details-summary-label {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}

.wenaro-order-details-summary-value {
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: right;
}

/* "Razem" — jedyny wiersz z celowo mocniejszym wyróżnieniem, zgodnie ze
   specyfikacją ("Najważniejsze 'Razem' może być trochę mocniej
   wyróżnione"). Pozostałe wiersze świadomie bez dodatkowych kolorów. */
.wenaro-order-details-summary-row--total {
	margin-top: 4px;
	padding-top: 14px;
	border-top: 2px solid var(--wp--preset--color--border);
	border-bottom: none;
}

.wenaro-order-details-summary-row--total .wenaro-order-details-summary-label {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	font-size: 0.9375rem;
}

.wenaro-order-details-summary-row--total .wenaro-order-details-summary-value {
	color: var(--wp--preset--color--brand-dark);
	font-weight: 800;
	font-size: 1.125rem;
}

/* Natywny dopisek WooCommerce "(w tym VAT: X)" w wierszu "Razem" (dla
   sklepów z cenami brutto) oraz "przez {metoda}" przy wysyłce — te same,
   niezmienione klasy rdzenia ("includes_tax" / "shipped_via"), tylko
   zamienione na osobną, wyciszoną linię zamiast ciągu tekstu w jednym
   wierszu — bez ŻADNEGO przeliczania kwot po stronie motywu. */
.wenaro-order-details-summary-value .includes_tax,
.wenaro-order-details-summary-value .shipped_via {
	display: block;
	margin-top: 2px;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 400;
}

.wenaro-order-details-summary-note {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
	font-size: 0.875rem;
}

.wenaro-order-details-summary-note .wenaro-order-details-summary-label {
	display: block;
	margin-bottom: 4px;
}

/* ---------- Adresy ---------- */

.wenaro-order-details-address-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.wenaro-order-details-address-card {
	flex: 1 1 260px;
	padding: 18px 20px;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	box-sizing: border-box;
}

.wenaro-order-details-address-title {
	margin: 0 0 10px;
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	font-weight: 700;
}

.wenaro-order-details-address-card address {
	color: var(--wp--preset--color--ink);
	font-style: normal;
	line-height: 1.7;
}

.wenaro-order-details-address-line {
	margin: 4px 0 0;
	color: var(--wp--preset--color--muted);
}

/* ---------- Informacje dodatkowe (własne pola Wenaro Checkout Tools) ----------
   Markup wewnątrz ("wc-block-order-confirmation-additional-fields-wrapper",
   "wc-block-components-additional-fields-list") jest natywny,
   NIEZMIENIONY (renderowany przez WooCommerce Blocks) — tu tylko
   restylizowany, zero nowej logiki. */

.wenaro-order-details-additional {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.wenaro-order-details-additional .wc-block-order-confirmation-additional-fields-wrapper h2 {
	margin: 0 0 12px;
	color: var(--wp--preset--color--ink);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wenaro-order-details-additional dl.wc-block-components-additional-fields-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.wenaro-order-details-additional dl.wc-block-components-additional-fields-list dt {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 600;
}

.wenaro-order-details-additional dl.wc-block-components-additional-fields-list dd {
	margin: 2px 0 0;
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
}

/* ---------- Mobile ----------
   Ten sam próg (781px) co reszta "Moje konta", dla spójności. Gutter:
   każda karta ma własny, wewnętrzny padding (tak jak karty na liście
   zamówień) — to on daje standardowy odstęp ~16px od krawędzi ekranu,
   bez podwójnego marginesu na poziomie strony. */

@media (max-width: 781px) {
	.wenaro-order-details-header-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.wenaro-orders-card-meta {
		width: 100%;
		justify-content: space-between;
	}

	.wenaro-order-details-header-actions {
		justify-content: stretch;
	}

	.wenaro-order-details-header-actions .woocommerce-button.button {
		flex: 1 1 auto;
		min-height: 44px;
		text-align: center;
	}

	.wenaro-order-details-section {
		padding: 16px;
	}

	/* Cena schodzi pod ilość, w tej samej kolumnie co nazwa — inny
	   szablon siatki niż na desktopie, patrz wyjaśnienie na górze
	   sekcji. */
	.wenaro-order-details-product {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"media name"
			"media qty"
			"media total";
	}

	.wenaro-order-details-product-media {
		width: 52px;
		height: 52px;
	}

	.wenaro-order-details-product-total {
		align-self: auto;
		margin-top: 2px;
		text-align: left;
	}

	.wenaro-order-details-summary-row,
	.wenaro-order-details-summary-value {
		font-size: 0.875rem;
	}

	.wenaro-order-details-address-cards {
		flex-direction: column;
	}

	/* Poprawka: ".wenaro-order-details-address-card" ma na desktopie
	   "flex: 1 1 260px" -- w kontenerze "flex-direction: row" to celowo
	   rozciąga karty do wspólnej wysokości (zaakceptowane w
	   specyfikacji). Ten sam skrót "flex", odziedziczony bez zmian w
	   kontenerze "flex-direction: column" na mobile, zacząłby jednak
	   znaczyć co innego: "flex-grow: 1" działałby na oś GŁÓWNĄ, którą w
	   układzie kolumnowym jest wysokość -- karta rozciągałaby się więc
	   pionowo do wypełnienia dostępnej przestrzeni (stąd zgłoszony,
	   nienaturalnie wysoki pusty obszar pod treścią). "flex: 0 0 auto"
	   przywraca wysokość wynikającą wyłącznie z treści karty, bez
	   dotykania paddingu/stylistyki. */
	.wenaro-order-details-address-card {
		flex: 0 0 auto;
	}
}

/* =========================================================
   "Moje konto" — Kokpit: sekcja powitalna
   (markup: "wenaro/woocommerce/myaccount/dashboard.php" — nadpisanie
   szablonu WooCommerce, patrz obszerny komentarz na górze tego pliku).

   Cel: to samo powitanie/opis/akcje co w oryginale WooCommerce, ale jako
   lekki "panel" zamiast dwóch akapitów tekstu z linkami wplecionymi w
   zdanie — bez ciężkiego boxa/karty (brak tła i bordera na całym
   ".wenaro-dashboard-intro" — świadomie, zgodnie ze specyfikacją "nie
   rób ciężkiego boxa ani wielkiej karty"). Jedynymi elementami z własnym
   tłem/obramowaniem są trzy przyciski akcji — dokładnie ten sam, lekki
   wizualny język co istniejący przycisk "Edytuj" w kartach adresów (tło
   "surface", 1px "border", promień "base") — więc całość pozostaje
   spójna z resztą motywu.

   Kolejność w markupie (powitanie → krótki opis → 3 akcje) jest
   naturalnie pionowa i responsywna sama w sobie — desktop i mobile
   różnią się WYŁĄCZNIE kierunkiem/szerokością wiersza akcji (patrz
   media query niżej), nie strukturą.

   AKTUALIZACJA (usunięcie duplikatu "Wyloguj się"): ta sekcja miała
   wcześniej własny, dodatkowy link "Wyloguj się" obok powitania —
   zbędny duplikat pozycji "Wyloguj się", którą lewy panel nawigacji
   "Moje konta" i tak zawsze pokazuje jako osobny punkt menu (patrz
   "wenaro/woocommerce/myaccount/dashboard.php"). Link i opakowujący go
   wrapper ".wenaro-dashboard-greeting" (miał tylko to jedno dziecko po
   usunięciu linku) zostały usunięte razem z odpowiadającym im markupem
   w szablonie — ".wenaro-dashboard-hello" jest teraz zwykłym,
   bezpośrednim dzieckiem ".wenaro-dashboard-intro", dokładnie tak samo
   jak ".wenaro-dashboard-desc" tuż pod nim. Nawigacja boczna (osobny
   szablon, renderowany przez rdzeń WooCommerce PRZED tą treścią) nie
   jest tym plikiem w ogóle dotknięta. */

.wenaro-dashboard-intro {
	margin: 0 0 40px;
}

/* ---------- Powitanie ---------- */

.wenaro-dashboard-hello {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
}

/* ---------- Krótki opis ---------- */

.wenaro-dashboard-desc {
	margin: 8px 0 20px;
	max-width: 560px;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* ---------- Akcje: 3 wygodne linki ----------
   Desktop: poziomy rząd kompaktowych "pigułek" (tyle, ile treści
   potrzeba — nie na pełną szerokość). Mobile: patrz media query niżej
   — pełna szerokość, wygodna wysokość dotykowa. */

.wenaro-dashboard-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wenaro-dashboard-action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--base);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	transition: border-color 0.12s ease, color 0.12s ease;
}

.wenaro-dashboard-action:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand-dark);
}

.wenaro-dashboard-action:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-dark);
	outline-offset: 2px;
}

.wenaro-dashboard-action-icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--wp--preset--color--brand-dark);
}

.wenaro-dashboard-action-icon svg {
	display: block;
}

/* ---------- Mobile: gutter + pełnoszerokie, wygodne akcje ----------
   Gutter (16px, próg 781px — ten sam co reszta "Moje konta", patrz
   sekcja "Luźna treść… — wspólny gutter" wyżej w tym pliku) na CAŁYM
   ".wenaro-dashboard-intro" jednym razem — powitanie, opis i akcje
   dziedziczą go automatycznie jako jego dzieci, bez osobnych reguł na
   każdy z nich. Przyciski akcji: pełna szerokość + min-height 48px —
   wygodny, jednoznaczny cel dotykowy (rekomendowane minimum dotykowe),
   każdy w osobnym, czytelnym wierszu zamiast wielu linków w jednym
   zdaniu. */

@media (max-width: 781px) {
	.wenaro-dashboard-intro {
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}

	.wenaro-dashboard-actions {
		flex-direction: column;
	}

	.wenaro-dashboard-action {
		width: 100%;
		min-height: 48px;
		padding: 13px 16px;
	}
}

/* =========================================================
   "Moje konto" — "Może Cię zainteresować"
   POZIOMA KARUZELA / horizontal product rail
   (CEL: korekta prezentacji — patrz claude/functions.php:
   "wenaro_render_myaccount_recommended_products()" oraz
   "assets/js/myaccount-recommended-carousel.js").

   Mechanizm doboru/losowania produktów (pula ID w Transiencie,
   losowanie w PHP) jest BEZ ZMIAN względem poprzedniej wersji — zmienia
   się WYŁĄCZNIE prezentacja: zamiast siatki dużych kart katalogowych
   jest to teraz jeden poziomy, przewijalny rząd kompaktowych kafelków
   (zdjęcie + nazwa + aktualna cena, cała karta jako pojedynczy link),
   ze strzałkami do przewijania. Bez autoplay, bez automatycznego
   przesuwania — przewija wyłącznie klient (kliknięcie strzałki albo
   naturalny swipe/scroll dotykiem/trackpadem).

   Układ: "[strzałka] [przewijalny rząd kart] [strzałka]" jako FLEX w
   jednym wierszu (nie nakładka/overlay na kartach) — to świadomy wybór:
   dzięki temu strzałki NIGDY nie zasłaniają treści produktu, kosztem
   niewielkiego, stałego pasa szerokości po obu stronach na te przyciski.

   ".wenaro-reco-track" ma "min-width: 0" — to konieczne dla poprawnego
   działania (bez tego jeden z klasycznych "gotchy" flexboksa: element
   flex bez "min-width: 0" próbuje pomieścić całą swoją zawartość, czyli
   ~20 kart w jednym rzędzie, i wypchnąłby całą stronę w poziomy scroll
   zamiast trzymać przewijanie WEWNĄTRZ karuzeli).

   Kolory/promienie — te same zmienne co w reszcie motywu
   (var(--wp--preset--color/--border-radius--...)).
   ========================================================= */

.wenaro-myaccount-recommended {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.wenaro-myaccount-recommended-title {
	margin: 0 0 20px;
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
	color: var(--wp--preset--color--ink);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
}

/* ---------- Karuzela: strzałka | rząd kart | strzałka ----------

   POPRAWKA (runda "dopracowanie wyglądu"): gutter sekcji (16px, ten sam
   wymiar co gutter nagłówka tuż nad karuzelą — patrz
   ".wenaro-myaccount-recommended-title" wyżej) jest TERAZ na tym
   kontenerze — ".wenaro-reco-carousel", czyli STATYCZNYM (nieprzewijanym)
   rzędzie "[strzałka] [tor kart] [strzałka]" — a nie na samym torze, jak
   poprzednio. Zmiana jest CELOWA i obowiązuje na WSZYSTKICH szerokościach
   (nie tylko na mobile, jak poprzednia wersja) — to naprawia zgłoszony
   problem "lewy produkt za blisko lewej krawędzi, prawy za blisko prawej
   krawędzi", który na desktopie/tablecie w ogóle nie miał wcześniej
   żadnego marginesu.

   DLACZEGO NA KONTENERZE, A NIE NA TORZE — to nadal daje ten sam,
   poprawny efekt "podglądu" na obu końcach przewijania, bez polegania na
   zachowaniu paddingu wewnątrz elementu z "overflow: auto":
   - na starcie (scrollLeft = 0) pierwsza karta zaczyna się dokładnie na
     lewej krawędzi TORU, a sam tor jest wizualnie wsunięty o 16px
     względem sekcji — bo to właśnie ten padding rodzica zabiera 16px z
     dostępnej szerokości toru (tor ma "flex: 1 1 auto" — dokładnie się
     do tego dopasowuje);
   - po przewinięciu do samego końca ostatnia karta kończy się dokładnie
     na prawej krawędzi toru — a ta krawędź jest analogicznie wsunięta o
     16px od prawej krawędzi sekcji;
   - dokładnie ten sam mechanizm dodatkowo poprawnie "oprawia" strzałki
     (widoczne na desktopie/tablecie) tym samym 16px marginesem co
     tytuł/karty — spójne gutters w całej sekcji, zgodnie ze
     specyfikacją ("nie chodzi o rozciąganie slidera na całą szerokość,
     chodzi o poprawny content width").

   Sam tor (".wenaro-reco-track" niżej) nie ma już WŁASNEGO, poziomego
   paddingu — zostaje wyłącznie pionowy (miejsce na cień/obrys karty przy
   hover/focus i na "scroll-snap"), a odstęp między kartami ("gap") jest
   tu też lekko zmniejszony (14px → 10px, dalej redukowany na węższych
   ekranach niżej) zgodnie z prośbą "karty mogą być bliżej siebie". */

.wenaro-reco-carousel {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}

.wenaro-reco-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 10px;
	min-width: 0;
	flex: 1 1 auto;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 0 8px;
}

.wenaro-reco-track::-webkit-scrollbar {
	display: none;
}

.wenaro-reco-track:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-dark);
	outline-offset: 2px;
	border-radius: var(--wp--preset--border-radius--sm);
}

/* ---------- Strzałki ----------
   Zawsze obecne w DOM-ie (żeby nie było przeskoku layoutu) — na
   początku/końcu listy stają się WYŁĄCZONE (natywny atrybut "disabled":
   automatycznie poza kolejnością Tab i poprawnie ogłaszane przez czytniki
   ekranu jako nieaktywne, bez potrzeby ręcznej obsługi aria-disabled). */

.wenaro-reco-arrow {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--full);
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.wenaro-reco-arrow:hover:not(:disabled) {
	background: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--muted);
}

.wenaro-reco-arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-dark);
	outline-offset: 2px;
}

.wenaro-reco-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

/* ---------- Kafelek produktu ----------
   Cały kafelek to POJEDYNCZY link "<a>" (bez zagnieżdżonych linków i
   bez osobnego przycisku) — kliknięcie w dowolne miejsce (zdjęcie,
   nazwę, cenę, wolną przestrzeń) otwiera produkt. Zwarte proporcje:
   szerokość stała per breakpoint (patrz media queries niżej), wysokość
   wynika WYŁĄCZNIE ze zdjęcia (kwadrat) + maks. 2 linii tytułu + ceny —
   żadnego dodatkowego, pustego miejsca. */

.wenaro-reco-card {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	gap: 6px;
	width: 168px;
	padding: 10px;
	scroll-snap-align: start;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--base);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wenaro-reco-card:hover {
	border-color: var(--wp--preset--color--muted);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.wenaro-reco-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-dark);
	outline-offset: 2px;
}

/* Zdjęcie — identyczny kwadratowy obszar dla każdej karty, niezależnie
   od proporcji oryginalnego zdjęcia produktu ("object-fit: contain"
   zamiast przycinania/rozciągania). */
.wenaro-reco-card-image {
	display: block;
	aspect-ratio: 1 / 1;
	padding: 8px;
	background: var(--wp--preset--color--background);
	border-radius: var(--wp--preset--border-radius--sm);
	overflow: hidden;
}

.wenaro-reco-card-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
	display: block;
}

/* Nazwa — maks. 2 linie, ucinana wielokropkiem, bez wpływu na wysokość
   pozostałych kart (każda karta ma swoją własną, stałą "linię" tytułu:
   "line-height" x 2 linie = przewidywalna, jednolita wysokość). */
.wenaro-reco-card-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--wp--preset--color--ink);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
}

.wenaro-reco-card-price {
	margin-top: auto;
	color: var(--wp--preset--color--brand-dark);
	font-size: 0.9375rem;
	font-weight: 800;
}

.wenaro-reco-card-price .woocommerce-Price-amount {
	color: inherit;
	font-weight: inherit;
}

/* ---------- Responsive ----------
   Karty NIE zawijają się do drugiego rzędu na żadnej szerokości — to
   zawsze jeden poziomy, przewijalny rząd (".wenaro-reco-track" ma
   "flex-wrap: nowrap" ustawione wyżej, bez wyjątków w żadnym media
   query poniżej). Progi 900px / 600px — te same, już istniejące w tym
   pliku wartości (patrz Sklep/Strona główna wyżej), nie nowe liczby.

   Desktop (domyślnie, powyżej 900px): karta 168px → przy typowej
   szerokości kolumny treści "Moje konto" (~1000px) mieści się ok. 5
   pełnych kart + fragment kolejnej, zachęcający do przewinięcia.

   Tablet (600–900px): węższa karta (150px) + mniejszy odstęp → ok. 3–4
   karty jednocześnie, zależnie od faktycznej szerokości.

   Mobile (poniżej 600px): jeszcze węższa karta (136px) → ok. 2 karty
   jednocześnie + fragment trzeciej. Strzałki są tu ukryte (nie
   "wyłączone" — usunięte z layoutu), żeby oddać ich miejsce kartom i
   oprzeć nawigację wyłącznie o naturalny swipe dotykiem — zgodnie z
   wymaganiem "można pozostawić strzałki na mobile TYLKO jeśli nie
   pogarszają UX"; tutaj lepszym UX na wąskim ekranie jest oddanie tej
   przestrzeni kartom. Pionowy scroll strony pozostaje całkowicie
   nietknięty — przewijanie poziome istnieje WYŁĄCZNIE wewnątrz
   ".wenaro-reco-track". */

@media (max-width: 900px) {
	.wenaro-reco-card {
		width: 150px;
	}

	.wenaro-reco-track {
		gap: 8px;
	}
}

@media (max-width: 600px) {
	/* Gutter tytułu/karuzeli (16px) jest teraz UNCONDITIONAL — patrz
	   ".wenaro-myaccount-recommended-title" i ".wenaro-reco-carousel"
	   wyżej w tym pliku — więc nie trzeba go już osobno ustawiać tutaj.

	   POPRAWKA (przyczyna zgłoszonego "obcięcia" prawego kafelka na
	   telefonie): poprzednia wersja miała tu STAŁĄ, "na oko" dobraną
	   szerokość karty (136px), niezależną od realnej dostępnej
	   szerokości toru. Przy stałym odstępie 8px, 3 karty + 2 odstępy to
	   3×136 + 2×8 = 424px potrzebnej szerokości — ale realna dostępna
	   szerokość toru na typowym telefonie (390–430px minus 16px+16px
	   guttera karuzeli, patrz ".wenaro-reco-carousel" wyżej) to tylko
	   ok. 342–382px, czyli WYRAŹNIE mniej niż 424px. Tor jest
	   przewijalnym rzędem flex ("overflow-x: auto", "flex-wrap: nowrap"
	   — patrz reguła bazowa wyżej), więc trzecia karta się NIE
	   zawijała/kurczyła, tylko renderowała się w pełnej, sztywnej
	   szerokości 136px i wystawała częściowo poza początkowo widoczny
	   obszar toru — stąd wrażenie "przypadkowo obciętego" prawego
	   kafelka (widoczne tylko ok. 50–60% jego szerokości), a nie
	   świadomego, czytelnego "podglądu" kolejnej karty.

	   POPRAWKA: szerokość karty jest TERAZ wyliczana przez "calc()"
	   względem REALNEJ szerokości toru w danej chwili ("100%" w
	   poniższym "calc()" to szerokość ".wenaro-reco-track" — to on jest
	   containing blockiem dla swoich flex-dzieci), a nie z góry
	   założonej liczby pikseli: "(100% − 2×gap) / 3" zawsze daje
	   dokładnie 3 PEŁNE karty mieszczące się w torze, z zerowym
	   nadmiarem — niezależnie od tego, czy telefon ma 360, 390, czy
	   430px szerokości. Odstęp ("--wenaro-reco-gap") jest zmienną CSS
	   użytą JEDNOCZEŚNIE w "gap" toru i w tym wzorze — jedno źródło
	   prawdy, żeby te dwie wartości nigdy nie mogły się rozjechać.
	   "min(150px, …)" to wyłącznie górny sufit (ta sama szerokość karty
	   co próg 900px wyżej) — na szerokościach bliskich granicy 600px
	   zapobiega to kartom robiącym się nienaturalnie duże tuż przed
	   przejściem na sąsiedni próg; poniżej tego sufitu szerokość zawsze
	   maleje płynnie wraz z ekranem, WYŁĄCZNIE tak, żeby 3 karty zawsze
	   mieściły się w całości — celowo bez DOLNEGO progu (żaden "clamp()"
	   z minimalną szerokością), bo dolny próg oznaczałby, że poniżej
	   pewnej szerokości ekranu karty znów zaczęłyby nie mieścić się w
	   całości i trzecia znów byłaby ucinana — priorytet "brak ucięcia"
	   jest tu ważniejszy niż utrzymanie jednej, stałej minimalnej
	   szerokości karty na każdym, nawet bardzo wąskim ekranie. */
	.wenaro-reco-track {
		--wenaro-reco-gap: 6px;
		gap: var(--wenaro-reco-gap);
	}

	.wenaro-reco-card {
		width: min(150px, calc((100% - 2 * var(--wenaro-reco-gap)) / 3));
	}

	.wenaro-reco-arrow {
		display: none;
	}
}

/* =========================================================
   Contact — wenaro
   Style dla templates/page-contact.html (strona "Kontakt", slug
   "kontakt" — zgodnie z linkiem już obecnym w Headerze/Footerze:
   "/kontakt/"). Bez własnej logiki formularza, PHP ani JS — na tym
   etapie to wyłącznie układ i wygląd strony z danymi kontaktowymi.

   Wszystkie reguły są ograniczone przez ".wenaro-contact", żeby nie
   wyciekały do innych szablonów (żadna z istniejących sekcji w tym
   pliku nie została zmieniona).

   Ikony: proste, monochromatyczne SVG (stroke, bez wypełnienia) w
   kolorze "brand", w tym samym stylu co ikony paska korzyści w Single
   Product — bez emoji, bez zewnętrznej biblioteki ikon.

   ".wenaro-contact-form-slot" to na razie PUSTY kontener — architektura
   pod przyszły formularz kontaktowy, ten sam wzorzec co puste sloty w
   Single Product/Shop: dopóki jest pusty, ":empty" chowa go całkowicie,
   więc nic się wizualnie nie zmienia, dopóki ktoś faktycznie nie doda
   tam formularza.

   Kolory — wyłącznie presety z theme.json. Promienie tam, gdzie
   specyfikacja wymaga konkretnego zakresu (10–14px), ustawione jawnie
   w px z tego samego powodu co w pozostałych sekcjach: nazwane presety
   promienia nie mają potwierdzonej wartości w theme.json.
   ========================================================= */

/* ---------- Breadcrumb (ten sam język wizualny co reszta motywu) ---------- */

.wenaro-contact .wenaro-breadcrumbs {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	margin-bottom: 8px;
}

.wenaro-contact .wenaro-breadcrumbs a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wenaro-contact .wenaro-breadcrumbs a:hover {
	color: currentColor;
	text-decoration-thickness: 2px;
}

/* ---------- Nagłówek: H1 + krótki tekst wprowadzający ----------
   Ten sam wzorzec co ".wenaro-shop-header" w katalogu: duży, ale
   niezbyt ciężki H1 z krótką pomarańczową kreską pod spodem, i muted
   tekst wprowadzający — dużo białej przestrzeni wokół. */

.wenaro-contact-header {
	padding: 48px 0 40px;
}

.wenaro-contact-title {
	position: relative;
	margin: 0 0 20px;
	padding-bottom: 20px;
	color: var(--wp--preset--color--ink);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.15;
}

.wenaro-contact-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--brand);
}

.wenaro-contact-intro {
	max-width: 640px;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	line-height: 1.6;
}

/* ---------- Układ: dane kontaktowe (lewo, szerzej) | karta pomocy (prawo, węziej) ----------
   "display: flex", wyrównanie do góry i odstęp pochodzą z natywnego
   atrybutu "layout"/"style.spacing.blockGap" bloku ".wenaro-contact-layout"
   w templates/page-contact.html (ten sam wzorzec co ".wenaro-shop-layout"
   w katalogu) — nie duplikujemy tego tutaj. */

.wenaro-contact-details {
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.wenaro-contact-help {
	flex: 0 1 340px;
	max-width: 360px;
	width: 100%;
	padding: 28px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-sizing: border-box;
}

/* ---------- Pozycja danych kontaktowych: ikona + etykieta + wartość ----------
   Lekka, jasna karta z cienkim borderem — telefon i e-mail są dużymi,
   klikalnymi linkami, łatwymi do trafienia także na dotyk. */

.wenaro-contact-item {
	padding: 20px 24px;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	gap: 16px;
}

.wenaro-contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	color: var(--wp--preset--color--brand);
	background: color-mix(in srgb, var(--wp--preset--color--brand) 10%, var(--wp--preset--color--background));
	border-radius: var(--wp--preset--border-radius--full);
}

.wenaro-contact-item-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wenaro-contact-label {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.wenaro-contact-value {
	color: var(--wp--preset--color--ink);
	font-size: 1.125rem;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.4;
}

.wenaro-contact-value:hover {
	color: var(--wp--preset--color--brand-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wenaro-contact-note {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}

.wenaro-contact-company-line {
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* ---------- Karta pomocy (prawo) ---------- */

.wenaro-contact-help-title {
	margin: 0 0 16px;
	color: var(--wp--preset--color--ink);
	font-size: 1.125rem;
	font-weight: 700;
}

.wenaro-contact-help-list {
	margin: 0;
	padding: 0 0 0 20px;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.wenaro-contact-help-list li {
	margin: 0 0 10px;
}

.wenaro-contact-help-list li:last-child {
	margin-bottom: 0;
}

.wenaro-contact-help-list li::marker {
	color: var(--wp--preset--color--brand);
}

/* ---------- Miejsce pod przyszły formularz kontaktowy (puste) ---------- */

.wenaro-contact-form-slot:empty {
	display: none;
}

.wenaro-contact-form-slot:not(:empty) {
	padding: 28px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
}

/* ---------- Dostępność: focus-visible ---------- */

.wenaro-contact a:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-dark);
	outline-offset: 2px;
	border-radius: var(--wp--preset--border-radius--sm);
}

/* ---------- Mobile: jedna kolumna, pełna szerokość kart, brak poziomego scrolla ----------
   Ten sam próg co w reszcie motywu (781px). Kolejność DOM już stawia
   dane kontaktowe przed kartą pomocy. */

@media (max-width: 781px) {
	.wenaro-contact-layout {
		flex-direction: column;
	}

	.wenaro-contact-help {
		flex-basis: auto;
		max-width: none;
	}

	.wenaro-contact-header {
		padding: 32px 0 28px;
	}

	.wenaro-contact-title {
		font-size: 1.875rem;
	}

	.wenaro-contact-item {
		padding: 18px;
	}

	.wenaro-contact-value {
		font-size: 1.0625rem;
	}
}

/* =========================================================
   Info Page — wenaro
   Reużywalny system dla templates/page-pomoc.html oraz — w kolejnych
   etapach — analogicznych stron treściowych (Dostawa, Płatności,
   Zwroty i reklamacje, Regulamin, Polityka prywatności). Treść w
   całości pochodzi z natywnego "wp:post-content" (zwykła strona
   WordPress edytowana w edytorze bloków) — szablon nie hardkoduje
   żadnej treści merytorycznej/prawnej, wyłącznie układ i wygląd.

   Wszystkie reguły są ograniczone przez ".wenaro-info-page", żeby nie
   wyciekały do innych szablonów (żadna z istniejących sekcji w tym
   pliku nie została zmieniona).

   Dwie grupy selektorów:
   1) Zwykłe elementy HTML generowane przez natywne bloki edytora
      (nagłówki, akapity, listy, tabele, linki, "details/summary") —
      działają automatycznie, bez żadnej dodatkowej pracy redaktora.
   2) Osobne klasy do RĘCZNEGO dodania w edytorze (pole "Additional
      CSS Class" na bloku Grupa), dla elementów, które nie mają
      natywnego odpowiednika w HTML: ".wenaro-info-card" (lekka karta
      informacyjna), ".wenaro-info-callout" / ".wenaro-info-callout--warning"
      (callout informacyjny / ostrzegawczy) — ten sam język wizualny co
      ".wenaro-desc-callout" w opisach produktów, ale całkowicie
      niezależny zestaw klas (nie modyfikujemy ".wenaro-desc-*").

   Kolory — wyłącznie presety z theme.json. Promienie tam, gdzie
   specyfikacja wymaga konkretnego zakresu, ustawione jawnie w px z
   tego samego powodu co w pozostałych sekcjach: nazwane presety
   promienia nie mają potwierdzonej wartości w theme.json.
   ========================================================= */

/* ---------- Breadcrumb (ten sam język wizualny co reszta motywu) ---------- */

.wenaro-info-page .wenaro-breadcrumbs {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	margin-bottom: 8px;
}

.wenaro-info-page .wenaro-breadcrumbs a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wenaro-info-page .wenaro-breadcrumbs a:hover {
	color: currentColor;
	text-decoration-thickness: 2px;
}

/* ---------- Nagłówek: dynamiczny H1 (post-title) ----------
   Ten sam wzorzec co w Shop/Contact: duży, ale niezbyt ciężki H1 z
   krótką pomarańczową kreską pod spodem, dużo białej przestrzeni. */

.wenaro-info-page-header {
	max-width: 760px;
	margin-inline: auto;
	padding: 48px 0 32px;
}

.wenaro-info-page-title {
	position: relative;
	margin: 0;
	padding-bottom: 20px;
	color: var(--wp--preset--color--ink);
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.2;
}

.wenaro-info-page-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--brand);
}

/* ---------- Treść: szerokość czytelna do dłuższego tekstu (regulamin, FAQ) ---------- */

.wenaro-info-page-content {
	max-width: 760px;
	margin-inline: auto;
	padding-bottom: 64px;
	color: var(--wp--preset--color--ink);
	line-height: 1.75;
}

.wenaro-info-page-content > * + * {
	margin-top: 24px;
}

/* Nagłówki wewnątrz treści — kolejne poziomy hierarchii pod H1.
   H2 dostaje krótką pomarańczową kreskę z lewej (ten sam akcent co
   reszta motywu) dla wyraźniejszej hierarchii sekcji. */
.wenaro-info-page-content h2 {
	position: relative;
	margin-top: 48px;
	padding-left: 16px;
	color: var(--wp--preset--color--ink);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
}

.wenaro-info-page-content h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 4px;
	border-radius: var(--wp--preset--border-radius--full);
	background: var(--wp--preset--color--brand);
}

/* Pierwszy element treści nie potrzebuje dodatkowego odstępu od góry —
   ".wenaro-info-page-header" ma już własny "padding-bottom". */
.wenaro-info-page-content > *:first-child {
	margin-top: 0;
}

.wenaro-info-page-content h3 {
	margin-top: 32px;
	color: var(--wp--preset--color--ink);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.35;
}

.wenaro-info-page-content h2 + *,
.wenaro-info-page-content h3 + * {
	margin-top: 12px;
}

.wenaro-info-page-content p {
	color: var(--wp--preset--color--ink);
}

/* Listy — czytelny wcięcie, marker w kolorze brand (subtelny akcent,
   bez ikon/checkmarków — to informacyjna/prawna treść, nie marketing) */
.wenaro-info-page-content ul,
.wenaro-info-page-content ol {
	margin: 0;
	padding-left: 22px;
}

.wenaro-info-page-content li + li {
	margin-top: 8px;
}

.wenaro-info-page-content ul li::marker {
	color: var(--wp--preset--color--brand);
}

.wenaro-info-page-content ol li::marker {
	color: var(--wp--preset--color--brand-dark);
	font-weight: 700;
}

/* Linki */
.wenaro-info-page-content a {
	color: var(--wp--preset--color--brand-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wenaro-info-page-content a:hover {
	color: var(--wp--preset--color--brand);
}

/* Tabele — lekkie, czytelne, z bezpiecznym poziomym scrollem tylko
   wewnątrz samej tabeli (nie całej strony) na wąskich ekranach */
.wenaro-info-page-content .wp-block-table {
	overflow-x: auto;
}

.wenaro-info-page-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.wenaro-info-page-content th,
.wenaro-info-page-content td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
	vertical-align: top;
}

.wenaro-info-page-content thead th {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border-bottom: 2px solid var(--wp--preset--color--border);
}

.wenaro-info-page-content tbody tr:last-child td {
	border-bottom: none;
}

/* Cytat/blockquote — spójny z resztą treści, bez ciężkiego stylu */
.wenaro-info-page-content blockquote {
	margin: 0;
	padding-left: 18px;
	border-left: 3px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-style: normal;
}

/* Separator (blok "Rozdzielacz") */
.wenaro-info-page-content hr {
	margin: 40px 0;
	border: none;
	border-top: 1px solid var(--wp--preset--color--border);
}

/* ---------- FAQ: "details"/"summary" (blok rdzenia "Szczegóły") ---------- */

.wenaro-info-page-content details {
	padding: 16px 20px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
}

.wenaro-info-page-content details + details {
	margin-top: 12px;
}

.wenaro-info-page-content summary {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	cursor: pointer;
}

.wenaro-info-page-content details[open] summary {
	margin-bottom: 12px;
}

.wenaro-info-page-content summary::marker {
	color: var(--wp--preset--color--brand);
}

.wenaro-info-page-content summary:hover {
	color: var(--wp--preset--color--brand-dark);
}

/* ---------- Wprowadzenie ----------
   Ręcznie dodawana klasa (blok Akapit → "Additional CSS Class":
   "wenaro-info-intro") na krótki akapit wprowadzający pod H1 — nieco
   większy i przyciemniony ("muted"), żeby wizualnie oddzielić lead od
   reszty treści (wzorzec zapożyczony ze strony Kontakt). */

.wenaro-info-page-content .wenaro-info-intro {
	color: var(--wp--preset--color--muted);
	font-size: 1.125rem;
	line-height: 1.7;
}

/* ---------- Sekcja treści ----------
   Ręcznie dodawana klasa (blok Grupa → "Additional CSS Class":
   "wenaro-info-section") do grupowania nagłówka (H2) razem z jego
   treścią (akapity, karta, callout, shortcode) w jedną spójną sekcję.
   Zapewnia czytelny, równy odstęp MIĘDZY sekcjami niezależnie od tego,
   z ilu elementów każda się składa — bez tego, przy różnej liczbie
   elementów w sekcji, odstępy wynikające z samego "> * + *" byłyby
   nierówne. Odstępy WEWNĄTRZ sekcji nadal obsługuje H2/H3 (margin-top)
   oraz ogólna reguła "> * + *" (dziedziczona, bo to zwykłe zagnieżdżenie
   bloków, nie flex). */

.wenaro-info-page-content .wenaro-info-section + .wenaro-info-section {
	margin-top: 56px;
}

.wenaro-info-page-content .wenaro-info-section > * + * {
	margin-top: 16px;
}

.wenaro-info-page-content .wenaro-info-section > h2:first-child {
	margin-top: 0;
}

/* ---------- Lekka karta informacyjna ----------
   Ręcznie dodawana klasa (blok Grupa → "Additional CSS Class":
   "wenaro-info-card") — np. na skrócone podsumowanie zasad, dane
   kontaktowe wewnątrz regulaminu itp. */

.wenaro-info-page-content .wenaro-info-card {
	padding: 24px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
}

.wenaro-info-page-content .wenaro-info-card > * + * {
	margin-top: 12px;
}

/* ---------- Callouty: informacyjny / ostrzegawczy ----------
   Ten sam język wizualny co ".wenaro-desc-callout" (lekkie tło +
   kolorowa kreska z lewej), ale osobny, niezależny zestaw klas —
   ręcznie dodawanych w edytorze na bloku Grupa (pole "Additional CSS
   Class(es)"). ".wenaro-info-callout--warning" celowo powtarza WSZYSTKIE
   właściwości (nie tylko kolor) i działa samodzielnie, bez konieczności
   dopisywania też ".wenaro-info-callout" — w polu "Additional CSS Class"
   łatwo wpisać tylko jedną klasę, a redaktor treści nie musi pamiętać
   o łączeniu dwóch. */

.wenaro-info-page-content .wenaro-info-callout {
	padding: 14px 20px;
	background: color-mix(in srgb, var(--wp--preset--color--brand) 6%, var(--wp--preset--color--background));
	border-left: 4px solid var(--wp--preset--color--brand);
	border-radius: 6px;
}

.wenaro-info-page-content .wenaro-info-callout--warning {
	padding: 14px 20px;
	background: color-mix(in srgb, var(--wp--preset--color--danger) 8%, var(--wp--preset--color--background));
	border-left: 4px solid var(--wp--preset--color--danger);
	border-radius: 6px;
}

.wenaro-info-page-content .wenaro-info-callout > * + *,
.wenaro-info-page-content .wenaro-info-callout--warning > * + * {
	margin-top: 8px;
}

.wenaro-info-page-content .wenaro-info-callout p:last-child,
.wenaro-info-page-content .wenaro-info-callout--warning p:last-child {
	margin: 0;
}

/* ---------- Dostępność: focus-visible ---------- */

.wenaro-info-page a:focus-visible,
.wenaro-info-page summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-dark);
	outline-offset: 2px;
	border-radius: var(--wp--preset--border-radius--sm);
}

/* ---------- Mobile: pełna responsywność, brak poziomego scrolla strony ---------- */

@media (max-width: 600px) {
	.wenaro-info-page-header {
		padding: 32px 0 24px;
	}

	.wenaro-info-page-title {
		font-size: 1.75rem;
	}

	.wenaro-info-page-content {
		padding-bottom: 48px;
	}

	.wenaro-info-page-content h2 {
		font-size: 1.3125rem;
	}

	.wenaro-info-page-content h3 {
		font-size: 1.0625rem;
	}

	.wenaro-info-page-content .wenaro-info-card,
	.wenaro-info-page-content details {
		padding: 18px;
	}

	.wenaro-info-page-content .wenaro-info-intro {
		font-size: 1.0625rem;
	}

	.wenaro-info-page-content .wenaro-info-section + .wenaro-info-section {
		margin-top: 40px;
	}
}

/* ==========================================================================
   Shipping Methods Shortcode — wenaro (wenaro-store-tools plugin)
   Style dla wyjścia shortcode'ów [wenaro_shipping_methods] oraz
   [wenaro_free_shipping_threshold], renderowanych zwykle wewnątrz
   .wenaro-info-page-content (np. na stronie Dostawa). Design dopasowany
   do istniejącego systemu .wenaro-info-page: jasne karty stref, czyste
   tabele z obramowaniem, umiarkowane radiusy, dużo białej przestrzeni.
   ========================================================================== */

.wenaro-shipping-methods {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 24px 0;
}

.wenaro-shipping-zone {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 20px 24px;
}

.wenaro-shipping-zone-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.wenaro-shipping-zone-title::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand);
}

.wenaro-shipping-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	overflow: hidden;
}

.wenaro-shipping-table th,
.wenaro-shipping-table td {
	text-align: left;
	padding: 12px 16px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.wenaro-shipping-table thead th {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.wenaro-shipping-table tbody tr:last-child th,
.wenaro-shipping-table tbody tr:last-child td {
	border-bottom: none;
}

.wenaro-shipping-table tbody td:first-child {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

.wenaro-shipping-table tbody td:last-child {
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

.wenaro-shipping-table .woocommerce-Price-amount {
	font-weight: 600;
}

.wenaro-shipping-empty {
	margin: 0;
	padding: 20px 24px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	color: var(--wp--preset--color--muted);
}

/* ---------- Mobile: tabela stref bez poziomego scrolla strony ---------- */

@media (max-width: 600px) {
	.wenaro-shipping-zone {
		padding: 16px 18px;
		border-radius: 8px;
	}

	.wenaro-shipping-zone-title {
		font-size: 1rem;
	}

	.wenaro-shipping-table th,
	.wenaro-shipping-table td {
		padding: 10px 12px;
		font-size: 0.875rem;
	}

	.wenaro-shipping-table thead th {
		font-size: 0.75rem;
	}
}

/* ==========================================================================
   Globalny przycisk "Wróć na górę" (.wenaro-back-to-top) — renderowany
   PHP-em na hooku "wp_footer" (functions.php,
   "wenaro_render_back_to_top_button()", runda "globalna dostępność na
   każdej stronie" — wcześniej statyczny markup w "parts/footer.html", co
   pomijało Checkout, bo ten w ogóle nie renderuje template parta stopki)
   — dzięki temu na KAŻDEJ stronie frontendu, łącznie z Checkoutem.
   Selektor/wygląd bez zmian. Zachowanie: assets/js/back-to-top.js.
   Kolory z fallbackiem, spójne z resztą Wenaro 2.0.
   ========================================================================== */

.wenaro-back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 50;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: none;
	border-radius: 50%;

	background: var(--wp--preset--color--brand, #ff6a00);
	color: #ffffff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	cursor: pointer;

	/* Stan domyślny: całkowicie ukryty i niedostępny dla wskaźnika/klawiatury,
	   dopóki JS nie doda .is-visible po przewinięciu strony. Bez JS przycisk
	   pozostaje trwale ukryty — nic się nie psuje ani nie "miga" na starcie. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.wenaro-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.wenaro-back-to-top svg {
	width: 20px;
	height: 20px;
}

.wenaro-back-to-top:hover {
	background: var(--wp--preset--color--brand-dark, #cc5500);
}

.wenaro-back-to-top:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-dark, #cc5500);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.wenaro-back-to-top {
		/* Nieco mniejszy na telefonie i lekko podniesiony od samej krawędzi
		   ekranu — motyw obecnie nie ma żadnego przyklejonego do dołu paska
		   WooCommerce, ale ten margines to tani, defensywny zapas na
		   wypadek takiego elementu w przyszłości (np. sticky "Dodaj do
		   koszyka" na mobile), żeby przyciski się nie nakładały. */
		right: 14px;
		bottom: 60px;
		width: 42px;
		height: 42px;
	}

	.wenaro-back-to-top svg {
		width: 18px;
		height: 18px;
	}
}

/* =========================================================
   Order Confirmation — Wenaro (strona „Zamówienie otrzymane")
   =========================================================
   AUDYT (potwierdzony przez realny outerHTML dostarczony przez
   użytkownika + źródło WooCommerce Blocks,
   "src/Blocks/BlockTypes/OrderConfirmation/*.php" i
   "assets/js/blocks/order-confirmation/* /style.scss" —
   NIE klasyczny "checkout/thankyou.php"):

   Strukturę renderuje blokowy szablon WooCommerce
   "templates/order-confirmation.html" (rejestrowany przez sam
   plugin WooCommerce dla motywów blokowych — ten motyw go NIE
   nadpisuje własnym plikiem w "templates/"). Realne, potwierdzone
   klasy (dokładnie te i tylko te są celem poniższych reguł):

     .wc-block-order-confirmation-status            (h1 + p)
     .wc-block-order-confirmation-summary
       > ul.wc-block-order-confirmation-summary-list
         > li.wc-block-order-confirmation-summary-list-item
             > span...__key, span...__value
     .wc-block-order-confirmation-totals-wrapper
       > h2.wp-block-heading (natywny wzorzec/pattern, STYLE
         inline "font-size:24px" — dlatego wymaga "!important",
         patrz niżej)
       > .wc-block-order-confirmation-totals
           > table.wc-block-order-confirmation-totals__table
               (thead/tbody/tfoot, "__product" / "__total" /
               "__label" — DOKŁADNIE te klasy, potwierdzone w
               "Totals.php")
     .wc-block-order-confirmation-address-wrapper
       > .wc-block-order-confirmation-shipping-wrapper
           > h2.wp-block-heading
           > .wc-block-order-confirmation-shipping-address (address, p.phone)
       > .wc-block-order-confirmation-billing-wrapper
           > h2.wp-block-heading
           > .wc-block-order-confirmation-billing-address (address, p.phone)
     .wc-block-order-confirmation-additional-fields-wrapper
       > h2.wp-block-heading
       > .wc-block-order-confirmation-additional-fields
           > dl.wc-block-components-additional-fields-list (dt/dd)

   Nagłówki sekcji ("Szczegóły zamówienia" / "Adres do wysyłki" /
   "Adres rozliczeniowy" / "Informacje dodatkowe") to natywne,
   zarejestrowane wzorce bloków ("register_block_pattern" w
   "BlockTypesController.php") — renderują się jako zwykły
   "h2.wp-block-heading" BEZ żadnej własnej klasy Order
   Confirmation. Zgodnie z zasadą "nie styluj .wp-block-heading
   globalnie" — poniżej WSZĘDZIE poprzedzone realnym wrapperem
   Order Confirmation (np. ".wc-block-order-confirmation-totals-wrapper
   .wp-block-heading") — nigdy bez tego przedrostka. Te nagłówki
   mają hardkodowany atrybut "style="font-size:24px"" wprost w
   PHP wzorca — nadpisanie rozmiaru wymaga "!important" (jedyne
   miejsca w tej sekcji, gdzie jest używany, i tylko z tego
   technicznego powodu).

   Ten sam ekran NIE ma żadnego związku z ".wenaro-order-details-*"
   (to osobny, własny szablon "Moje konto → Szczegóły zamówienia",
   "woocommerce/myaccount/view-order.php") — zero współdzielenia,
   zero ryzyka regresji między tymi dwoma widokami.

   Wspólny język kart w całej tej sekcji (zgodnie ze specyfikacją):
   background: surface (biel, jak każda inna karta w Wenaro na
   szarym tle strony "background"), border: 1px solid border,
   radius: 14px, bez cieni, pomarańcz tylko jako akcent (lewy pasek
   statusu, kwota "Razem"). */

/* ---------- 1. Status / góra strony ---------- */

.wc-block-order-confirmation-status {
	padding-left: 18px;
	border-left: 3px solid var(--wp--preset--color--brand);
}

.wc-block-order-confirmation-status h1 {
	margin: 0 0 8px;
	color: var(--wp--preset--color--ink);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.15;
}

.wc-block-order-confirmation-status > p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	line-height: 1.6;
}

@media (min-width: 782px) {
	.wc-block-order-confirmation-status h1 {
		font-size: 2.75rem;
		line-height: 1.12;
	}
}

/* ---------- 2. Summary — numer / data / razem / e-mail / płatność ----------
   Realny DOM (potwierdzony, "Summary.php"): "<li>" zawiera DWA
   rodzeństwa-"<span>" (klucz, potem wartość) w jednej linii — nie
   osobne wiersze. "display:flex; flex-direction:column" na "<li>"
   ustawia je jedno pod drugim (etykieta u góry, wartość pod spodem)
   bez zmiany samego DOM-u. Pozycja 3 ("Total:") jest zawsze trzecim
   elementem z pięciu, niezależnie od tego, czy e-mail/płatność
   akurat się wyrenderują (obie mogą zniknąć całkowicie z DOM-u, gdy
   puste — patrz "render_summary_row()" w źródle) — bo numer/data/
   suma zawsze istnieją, więc pozycja 3 jest bezpieczna bez zgadywania. */

.wc-block-order-confirmation-summary {
	padding: 20px 24px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
}

.wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	column-gap: 20px;
	row-gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list-item__key {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 600;
}

.wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list-item__value {
	display: block;
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	font-size: 0.9375rem;
	overflow-wrap: break-word;
}

/* "Total:" jest zawsze trzecim elementem (Order # / Date / Total /
   Email / Payment) — patrz uzasadnienie w komentarzu wyżej. */
.wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list-item:nth-child(3) .wc-block-order-confirmation-summary-list-item__value {
	color: var(--wp--preset--color--brand-dark);
	font-weight: 800;
}

@media (max-width: 781px) {
	.wc-block-order-confirmation-summary {
		padding: 18px 20px;
	}

	.wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 16px;
		row-gap: 14px;
	}

	/* Ostatni realnie wyrenderowany element (zwykle "Payment:") zajmuje
	   całą szerokość, żeby nie zostawiać osamotnionej pojedynczej
	   kolumny w nieparzystym układzie — działa niezależnie od tego,
	   ile pól faktycznie się wyrenderowało. */
	.wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list-item:last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 480px) {
	.wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list {
		grid-template-columns: 1fr;
	}

	.wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list-item:last-child {
		grid-column: auto;
	}
}

/* ---------- 3. + 4. Szczegóły zamówienia — karta + tabela ----------
   Karta = ".totals-wrapper" (obejmuje RAZEM nagłówek h2 i tabelę —
   oba są rodzeństwem wewnątrz tego samego wrappera, patrz audyt
   wyżej), żeby nagłówek nie wisiał luźno nad tabelą. Natywna tabela
   ("Totals.php" / native SCSS) ma WŁASNY border+radius — usuwamy go
   (byłby podwójną ramką wewnątrz karty) i zostawiamy tylko cienkie
   linie między wierszami. */

.wc-block-order-confirmation-totals-wrapper {
	padding: 24px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
}

.wc-block-order-confirmation-totals-wrapper .wp-block-heading {
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	/* Natywny wzorzec (blok "pattern") ma hardkodowany atrybut
	   "style="font-size:24px"" wprost w PHP — style inline bije każdą
	   zwykłą regułę klasy, więc nadpisanie rozmiaru wymaga
	   "!important". Jedyny techniczny powód użycia go w tej sekcji. */
	font-size: 1.125rem !important;
}

.wc-block-order-confirmation-totals-wrapper .wc-block-order-confirmation-totals {
	margin-top: 0;
	border: none;
}

.wc-block-order-confirmation-totals-wrapper .wc-block-order-confirmation-totals__table {
	border: none;
	border-radius: 0;
}

.wc-block-order-confirmation-totals-wrapper .wc-block-order-confirmation-totals__table th,
.wc-block-order-confirmation-totals-wrapper .wc-block-order-confirmation-totals__table td {
	padding: 12px 8px;
	border-top: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
}

.wc-block-order-confirmation-totals-wrapper .wc-block-order-confirmation-totals__table thead th {
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.wc-block-order-confirmation-totals-wrapper .wc-block-order-confirmation-totals__table tbody tr:last-child th,
.wc-block-order-confirmation-totals-wrapper .wc-block-order-confirmation-totals__table tbody tr:last-child td {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wc-block-order-confirmation-totals-wrapper .wc-block-order-confirmation-totals__product a {
	color: var(--wp--preset--color--brand-dark);
	font-weight: 600;
	text-decoration: none;
}

.wc-block-order-confirmation-totals-wrapper .wc-block-order-confirmation-totals__product a:hover {
	text-decoration: underline;
}

.wc-block-order-confirmation-totals-wrapper .wc-block-order-confirmation-totals__total {
	text-align: right;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- 5. Wiersz "Wysyłka" ----------
   Świadomie BEZ dodatkowego stylu — dziedziczy zwykły wygląd
   wiersza tfoot z reguł wyżej, zgodnie ze specyfikacją ("Pozostaw
   spokojny"). */

/* ---------- 6. Wiersz "Razem" ----------
   "get_order_item_totals()" (rdzeń WooCommerce) zawsze dokłada
   wiersz sumy końcowej JAKO OSTATNI z renderowanych w tfoot (patrz
   audyt źródła — "cart_subtotal" i "payment_method" są jedynymi
   kluczami usuwanymi z tej tabeli, a "total" jest zawsze dodawany
   na końcu, niezależnie od włączonej flagi "email_improvements") —
   więc "tfoot tr:last-child" bezpiecznie i deterministycznie
   celuje w wiersz "Razem", bez dodawania żadnej nowej klasy. */

.wc-block-order-confirmation-totals-wrapper .wc-block-order-confirmation-totals__table tfoot tr:last-child th,
.wc-block-order-confirmation-totals-wrapper .wc-block-order-confirmation-totals__table tfoot tr:last-child td {
	padding-top: 16px;
	padding-bottom: 16px;
	border-top: 2px solid var(--wp--preset--color--border);
	border-bottom: none;
}

.wc-block-order-confirmation-totals-wrapper .wc-block-order-confirmation-totals__table tfoot tr:last-child th {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

.wc-block-order-confirmation-totals-wrapper .wc-block-order-confirmation-totals__table tfoot tr:last-child .wc-block-order-confirmation-totals__total {
	color: var(--wp--preset--color--brand-dark);
	font-weight: 800;
	font-size: 1.0625rem;
}

/* VAT — "<small class="includes_tax">" renderowany przez rdzeń
   WooCommerce WEWNĄTRZ tej samej komórki co kwota "Razem" — osobna,
   wyciszona linia zamiast ciągu tekstu w jednym wierszu, bez
   PRZELICZANIA czegokolwiek po stronie motywu (ten sam, już
   ustalony wzorzec co w "Moje konto → Szczegóły zamówienia"). */
.wc-block-order-confirmation-totals-wrapper .wc-block-order-confirmation-totals__total .includes_tax {
	display: block;
	margin-top: 2px;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 400;
}

/* ---------- 7. Adresy — wysyłkowy i rozliczeniowy ----------
   Każdy adres to DWA poziomy (potwierdzone w źródle): "-wrapper"
   (zawiera h2 + kartę adresu) i wewnątrz niego właściwa karta
   ("-shipping-address" / "-billing-address", tam natywnie już jest
   border+radius+padding — tu tylko dopasowane do tokenów Wenaro).
   Równa wysokość obu kart: grid na zewnętrznym wrapperze (naturalny
   "stretch" grida) + flex column na każdym "-wrapper", żeby karta
   (poniżej swojego h2) rozciągnęła się na całą dostępną wysokość —
   bez sztywnych "min-height" czy innych sztucznych wartości. */

.wc-block-order-confirmation-address-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 20px;
	margin-block-start: 0;
}

.wc-block-order-confirmation-shipping-wrapper,
.wc-block-order-confirmation-billing-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.wc-block-order-confirmation-shipping-wrapper .wp-block-heading,
.wc-block-order-confirmation-billing-wrapper .wp-block-heading {
	margin: 0 0 12px;
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	font-size: 1.0625rem !important;
}

.wc-block-order-confirmation-shipping-address,
.wc-block-order-confirmation-billing-address {
	flex: 1 1 auto;
	box-sizing: border-box;
	padding: 20px 24px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
}

.wc-block-order-confirmation-shipping-address address,
.wc-block-order-confirmation-billing-address address {
	color: var(--wp--preset--color--ink);
	font-style: normal;
	line-height: 1.7;
}

.wc-block-order-confirmation-shipping-address .woocommerce-customer-details--phone,
.wc-block-order-confirmation-billing-address .woocommerce-customer-details--phone {
	margin: 8px 0 0;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 781px) {
	.wc-block-order-confirmation-address-wrapper {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.wc-block-order-confirmation-shipping-wrapper,
	.wc-block-order-confirmation-billing-wrapper {
		height: auto;
	}

	.wc-block-order-confirmation-shipping-address,
	.wc-block-order-confirmation-billing-address {
		padding: 18px 20px;
	}

	/* Nagłówki "Adres do wysyłki" / "Adres rozliczeniowy" na mobile
	   zaczynały się od samej krawędzi ekranu, podczas gdy karta pod
	   nimi ma własny wewnętrzny padding (20px lewo/prawo — dokładnie
	   ta sama wartość co "padding: 18px 20px" wyżej, nie nowa,
	   zgadnięta liczba). "padding-inline: 20px" na samym "<h2>"
	   wyrównuje jego lewą krawędź do tekstu WEWNĄTRZ karty poniżej,
	   bez przesuwania karty ani zmiany desktopu (poza tym
	   media query nic się nie zmienia — na desktopie h2 nadal ma
	   tylko "margin: 0 0 12px" z reguły wyżej). */
	.wc-block-order-confirmation-shipping-wrapper > h2,
	.wc-block-order-confirmation-billing-wrapper > h2 {
		padding-inline: 20px;
		box-sizing: border-box;
	}
}

/* ---------- 8. Informacje dodatkowe ----------
   Karta obejmuje h2 + listę razem (tak jak sekcja 3/4) — usuwamy
   natywny border/radius z samej "<dl>" (byłby podwójną ramką) i
   zostawiamy go tylko na wrapperze. Zero hardkodowania konkretnego
   pola — "dt"/"dd" stylowane ogólnie, więc działa dla dowolnej
   liczby przyszłych pól ("Additional Checkout Fields" API). */

.wc-block-order-confirmation-additional-fields-wrapper {
	padding: 24px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
}

.wc-block-order-confirmation-additional-fields-wrapper .wp-block-heading {
	margin: 0 0 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	font-size: 1.0625rem !important;
}

.wc-block-order-confirmation-additional-fields .wc-block-components-additional-fields-list {
	border: none;
	border-radius: 0;
	padding: 0;
	column-gap: 24px;
}

.wc-block-order-confirmation-additional-fields .wc-block-components-additional-fields-list dt,
.wc-block-order-confirmation-additional-fields .wc-block-components-additional-fields-list dd {
	padding: 12px 0;
	margin: 0;
}

.wc-block-order-confirmation-additional-fields .wc-block-components-additional-fields-list dt {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 600;
}

.wc-block-order-confirmation-additional-fields .wc-block-components-additional-fields-list dd {
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	font-weight: 600;
}

@media (max-width: 781px) {
	.wc-block-order-confirmation-additional-fields-wrapper {
		padding: 18px 20px;
	}
}

/* ---------- 9. + 11. Wspólny rytm pionowy między sekcjami ----------
   Zeruje natywne, niespójne marginesy natywnych bloków (48px/24px/
   różne wartości zależnie od bloku — patrz audyt na górze sekcji) i
   ustawia jeden, spójny odstęp między wszystkimi pięcioma głównymi
   blokami Order Confirmation. */

.wc-block-order-confirmation-status,
.wc-block-order-confirmation-summary,
.wc-block-order-confirmation-totals-wrapper,
.wc-block-order-confirmation-address-wrapper,
.wc-block-order-confirmation-additional-fields-wrapper {
	margin-top: 0;
	margin-bottom: 28px;
}

/* ---------- 10. Mobile gutter (wspólny poziom, bez paddingu na
   każdej zagnieżdżonej karcie osobno) ---------- */

@media (max-width: 781px) {
	.wc-block-order-confirmation-status,
	.wc-block-order-confirmation-summary,
	.wc-block-order-confirmation-totals-wrapper,
	.wc-block-order-confirmation-address-wrapper,
	.wc-block-order-confirmation-additional-fields-wrapper {
		margin-left: 16px;
		margin-right: 16px;
		margin-bottom: 22px;
	}
}

/* ---------- Laptop / mały desktop: GLOBALNY bezpieczny boczny gutter ----------
   Problem dotyczył nie pojedynczej sekcji, tylko całej warstwy "alignwide":
   przy viewportach węższych niż wideSize (1440px) element o width:100%
   wypełnia cały ekran i nie zostawia naturalnego marginesu. Na dużym PC
   margines pojawia się sam dzięki max-width, a na mobile istnieją osobne,
   zaakceptowane reguły 16px. Dlatego w zakresie 601–1488px nadajemy jeden,
   stały gutter 24px na NAJWYŻSZYM poziomie każdego głównego widoku.

   Scope jest celowo ograniczony do współdzielonego headera/footera oraz
   bezpośrednich dzieci alignwide głównych template'ów Wenaro. Nie dotyka
   sekcji alignfull (Hero/Promo/paski full-bleed) ani zagnieżdżonych kart,
   więc nie powstaje podwójny padding. */
@media (min-width: 601px) and (max-width: 1488px) {
	.wenaro-header .wenaro-header-inner,
	.wenaro-checkout-header > .wp-block-group.alignwide,
	.wenaro-home > .alignwide,
	.wenaro-single-product > .alignwide,
	.wenaro-shop > .alignwide,
	body.woocommerce-cart main.wp-block-group > .alignwide,
	body.woocommerce-checkout main.wp-block-group > .alignwide,
	body.woocommerce-account main.wp-block-group > .alignwide,
	.wenaro-footer .wenaro-footer-main,
	.wenaro-footer .wenaro-footer-bottom {
		width: calc(100% - 48px);
		max-width: var(--wp--style--global--wide-size, 1440px);
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}
}

/* ---------- Header: pośredni układ laptop/tablet ----------
   Desktopowy header mieści cztery strefy w jednym rzędzie:
   marka | menu | wyszukiwarka | konto+koszyk.
   Około 1024px suma ich minimalnych szerokości i gapów jest większa niż
   dostępne pole, więc natywne Navigation z flexWrap:"wrap" łamało ostatnią
   pozycję ("Kontakt") do drugiego wiersza i jednocześnie rozszerzało stronę
   poziomo. W zakresie 782–1180px przenosimy wyłącznie wyszukiwarkę do
   pełnego drugiego rzędu; marka, całe menu i akcje zostają w jednym rzędzie.
   Mobile <=781px nadal korzysta z istniejącego układu/responsive Navigation. */
@media (min-width: 782px) and (max-width: 1180px) {
	.wenaro-header .wenaro-header-inner {
		flex-wrap: wrap;
		column-gap: 24px;
		row-gap: 12px;
	}

	.wenaro-header .wenaro-header-brand {
		order: 1;
	}

	.wenaro-header .wenaro-header-center {
		order: 2;
		flex: 1 1 auto;
		min-width: 0;
	}

	.wenaro-header .wenaro-header-actions {
		order: 3;
		margin-left: auto;
	}

	.wenaro-header .wenaro-header-search {
		order: 4;
		flex: 1 1 100%;
		width: 100%;
		max-width: none;
		min-width: 0;
	}

	/* Navigation block ma w parts/header.html flexWrap:"wrap".
	   Na laptopie nie chcemy łamania pojedynczego "Kontakt" do osobnej linii;
	   miejsce odzyskaliśmy już przez przeniesienie wyszukiwarki niżej. */
	.wenaro-header .wenaro-header-nav .wp-block-navigation__container {
		flex-wrap: nowrap !important;
		justify-content: center;
	}

	.wenaro-header .wenaro-header-nav .wp-block-navigation-item__content {
		white-space: nowrap;
	}
}

/* ---------- Single Product: wspólna szerokość dolnych sekcji ----------
   Długi opis produktu ma świadomie ograniczoną szerokość 1200px
   (".wenaro-desc"). Sekcje Opinie klientów i Product Compliance miały
   natomiast własne max-width oparte o globalne wideSize (1440px), przez co
   po opisie ich lewa/prawa krawędź wizualnie "wyskakiwała" na zewnątrz.

   Ujednolicamy WYŁĄCZNIE te dwie dolne sekcje do tej samej osi 1200px co
   właściwy opis produktu. Górna część produktu, related products, header
   i footer nadal korzystają z normalnego wideSize 1440px. Nie zmieniamy
   paddingów wewnętrznych, układu opinii ani danych GPSR. */
.wenaro-single-product .wenaro-reviews-section,
.wenaro-single-product .wenaro-pc-compliance {
	max-width: 1200px;
}

/* ---------- Shop: wyrównanie nagłówka archiwum do siatki produktów ----------
   ".wenaro-shop-header" jest blokiem alignwide, ale ma wewnętrzny layout
   "constrained". WordPress centruje wtedy jego zwykłe dzieci w węższym
   contentSize, podczas gdy ".wenaro-shop-layout" (toolbar + siatka produktów)
   zaczyna się od lewej krawędzi wideSize. Efekt: H1 "Sklep" wygląda na
   przypadkowo przesunięty w prawo względem całej zawartości katalogu.

   Poniżej usuwamy wyłącznie wewnętrzne ograniczenie szerokości dla tytułu
   archiwum i opisu kategorii. Sam zewnętrzny ".wenaro-shop-header" nadal
   pozostaje alignwide, więc jego lewa/prawa krawędź jest identyczna z
   toolbar-em i kartami produktów. Kategorie nadal zachowują dynamiczny
   Query Title i term description. */
.wenaro-shop .wenaro-shop-header > .wp-block-query-title,
.wenaro-shop .wenaro-shop-header > .wp-block-term-description {
	width: 100%;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box;
}

/* ---------- Homepage: „Nasze osiągnięcia” jako kompaktowa karta ----------
   Sekcja była pełnym, szerokim prostokątem alignwide z 80px paddingu góra/dół,
   przez co wizualnie wyglądała jak osobny „kloc” rozciągnięty szerzej niż
   większość treści strony. Zachowujemy cztery dynamiczne statystyki i ich
   obecny układ, ale sama sekcja staje się lżejszą, wyśrodkowaną kartą:
   max 1200px, mniejsza wysokość, delikatny pomarańczowy border i zaokrąglenie.
   Bez zmian w JS licznika i bez zmian w treści/liczbach. */
.wenaro-home .wenaro-home-stats {
	width: calc(100% - 48px);
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 48px 32px;
	box-sizing: border-box;
	background: var(--wp--preset--color--surface);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 28%, var(--wp--preset--color--border));
	border-radius: 16px;
}

/* Trochę ciaśniejszy rytm wewnątrz karty, bez ściskania samych statystyk. */
.wenaro-home .wenaro-home-stats .wenaro-home-section-subtitle {
	margin-bottom: 28px;
}

@media (max-width: 781px) {
	.wenaro-home .wenaro-home-stats {
		padding: 40px 24px;
	}
}

@media (max-width: 600px) {
	.wenaro-home .wenaro-home-stats {
		width: calc(100% - 32px);
		padding: 36px 20px;
		border-radius: 14px;
	}
}

/* ---------- Checkout: finalny blok prawny + „Kupuję i płacę” ----------
   Potwierdzony realny DOM Checkout Blocks:
   ".wc-block-checkout__terms" zawiera WYŁĄCZNIE tekst prawny + linki
   (bez checkboxa), a ".wc-block-checkout__actions" zawiera pełnoszeroki
   przycisk ".wc-block-components-checkout-place-order-button".
   Poprawka jest wyłącznie wizualna — zero zmian logiki, walidacji i treści. */

body.woocommerce-checkout .wc-block-checkout__terms {
	margin: 8px 0 0;
	padding: 16px 18px;
	background: color-mix(in srgb, var(--wp--preset--color--brand) 5%, var(--wp--preset--color--background));
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 20%, var(--wp--preset--color--border));
	border-left: 4px solid var(--wp--preset--color--brand);
	border-radius: 10px;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	line-height: 1.55;
	box-sizing: border-box;
}

/* Klasa "--with-separator" z WooCommerce nie ma już tworzyć drugiej,
   niezależnej linii nad kartą — kartę/separator zapewnia reguła wyżej. */
body.woocommerce-checkout .wc-block-checkout__terms.wc-block-checkout__terms--with-separator {
	border-top-color: color-mix(in srgb, var(--wp--preset--color--brand) 20%, var(--wp--preset--color--border));
}

body.woocommerce-checkout .wc-block-checkout__terms .wc-block-components-checkbox__label {
	color: inherit;
	font-weight: 400;
}

body.woocommerce-checkout .wc-block-checkout__terms a {
	color: var(--wp--preset--color--brand-dark);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.woocommerce-checkout .wc-block-checkout__terms a:hover {
	color: var(--wp--preset--color--brand);
}

body.woocommerce-checkout .wc-block-checkout__actions {
	margin-top: 18px;
}

body.woocommerce-checkout .wc-block-checkout__actions_row {
	width: 100%;
}

/* Bazowy styl CTA istnieje już wyżej w sekcji Checkout. Tutaj tylko
   domykamy finalny blok: usuwamy jego dawny margin-top z samego buttona,
   bo odstęp kontroluje teraz wspólny wrapper ".wc-block-checkout__actions". */
body.woocommerce-checkout .wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
	margin-top: 0;
}

@media (max-width: 600px) {
	body.woocommerce-checkout .wc-block-checkout__terms {
		padding: 14px 16px;
		font-size: 0.8125rem;
	}

	body.woocommerce-checkout .wc-block-checkout__actions {
		margin-top: 16px;
	}
}

/* ---------- Product Search: brak wyników — bez pustego toolbara ----------
   W dedykowanym templates/product-search-results.html pasek
   ".wenaro-shop-toolbar" zawiera Product Results Count + Catalog Sorting.
   Przy zerowej liczbie wyników oba bloki nic nie renderują, ale sam wrapper
   nadal zostaje jako pusty biały pasek. WordPress dodaje wtedy do <body>
   klasę "search-no-results", więc chowamy wyłącznie ten pusty toolbar
   w wynikach wyszukiwania produktów. Widok z 1+ wynikami pozostaje
   całkowicie bez zmian. */
body.search-no-results .wenaro-product-search-results .wenaro-shop-toolbar {
	display: none;
}

/* ---------- 404: pomocny, spójny ekran błędu ---------- */
.wenaro-404 {
	padding-top: 72px;
	padding-bottom: 88px;
}

.wenaro-404 .wenaro-404-card {
	width: calc(100% - 48px);
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
	padding: 56px 48px;
	box-sizing: border-box;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	box-shadow: 0 12px 32px rgb(15 23 42 / 6%);
}

.wenaro-404 .wenaro-404-code {
	margin: 0 0 8px;
	color: var(--wp--preset--color--brand);
	font-size: clamp(3.5rem, 8vw, 6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
}

.wenaro-404 .wenaro-404-title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.12;
}

.wenaro-404 .wenaro-404-text {
	max-width: 680px;
	margin: 18px auto 0;
	color: var(--wp--preset--color--muted);
	font-size: 1rem;
	line-height: 1.65;
}

.wenaro-404 .wenaro-404-actions {
	margin-top: 28px;
	gap: 12px;
}

.wenaro-404 .wenaro-404-actions .wp-block-button__link {
	min-height: 46px;
	padding: 12px 20px;
	border-radius: 10px;
	font-weight: 700;
}

.wenaro-404 .wenaro-404-actions .is-style-fill .wp-block-button__link {
	background: var(--wp--preset--color--brand);
	color: #fff;
}

.wenaro-404 .wenaro-404-actions .is-style-fill .wp-block-button__link:hover {
	background: var(--wp--preset--color--brand-dark);
}

.wenaro-404 .wenaro-404-actions .is-style-outline .wp-block-button__link {
	border-color: color-mix(in srgb, var(--wp--preset--color--brand) 55%, var(--wp--preset--color--border));
	color: var(--wp--preset--color--brand-dark);
}

.wenaro-404 .wenaro-404-actions .is-style-outline .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--brand) 8%, transparent);
}

.wenaro-404 .wenaro-404-search {
	max-width: 680px;
	margin: 34px auto 0;
	padding-top: 26px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.wenaro-404 .wenaro-404-search-label {
	margin: 0 0 12px;
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

.wenaro-404 .wenaro-404-product-search .wp-block-search__inside-wrapper {
	display: flex;
	gap: 10px;
}

.wenaro-404 .wenaro-404-product-search .wp-block-search__input {
	min-height: 46px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: #fff;
}

.wenaro-404 .wenaro-404-product-search .wp-block-search__button {
	min-height: 46px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: 10px;
	background: var(--wp--preset--color--brand);
	color: #fff;
	font-weight: 700;
}

.wenaro-404 .wenaro-404-product-search .wp-block-search__button:hover {
	background: var(--wp--preset--color--brand-dark);
}

@media (max-width: 600px) {
	.wenaro-404 {
		padding-top: 40px;
		padding-bottom: 56px;
	}

	.wenaro-404 .wenaro-404-card {
		width: calc(100% - 32px);
		padding: 38px 20px;
		border-radius: 14px;
	}

	.wenaro-404 .wenaro-404-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.wenaro-404 .wenaro-404-actions .wp-block-button,
	.wenaro-404 .wenaro-404-actions .wp-block-button__link {
		width: 100%;
	}

	.wenaro-404 .wenaro-404-product-search .wp-block-search__inside-wrapper {
		flex-direction: column;
	}

	.wenaro-404 .wenaro-404-product-search .wp-block-search__button {
		width: 100%;
	}
}

/* ---------- Kontakt: nagłówek i kafelki na jednej osi ----------
   Nagłówek strony korzystał z wewnętrznego contentSize (1280px),
   natomiast ".wenaro-contact-layout" był alignwide (1440px). Dlatego
   kafelki Telefon / E-mail / Dane firmy zaczynały się wyraźnie bardziej
   z lewej niż H1 "Kontakt".

   Na desktop/tablet oba główne kontenery strony Kontakt dostają tę samą
   szerokość contentSize i ten sam boczny gutter. Układ wewnętrzny oraz
   mobilny breakpoint <=781px pozostają bez zmian. */
@media (min-width: 782px) {
	.wenaro-contact .wenaro-contact-header,
	.wenaro-contact .wenaro-contact-layout {
		width: min(
			calc(100% - 48px),
			var(--wp--style--global--content-size, 1280px)
		);
		max-width: var(--wp--style--global--content-size, 1280px);
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}
}

/* ---------- Single Product: Zapytaj o produkt ---------- */
.wenaro-single-product .wenaro-product-inquiry-entry {
	display: grid;
	gap: 8px;
	margin: -6px 0 20px;
}

.wenaro-single-product .wenaro-product-inquiry-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	min-height: 46px;
	padding: 11px 18px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 55%, var(--wp--preset--color--border));
	border-radius: 10px;
	background: transparent;
	color: var(--wp--preset--color--brand-dark);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.wenaro-single-product .wenaro-product-inquiry-button:hover {
	background: color-mix(in srgb, var(--wp--preset--color--brand) 8%, transparent);
	border-color: var(--wp--preset--color--brand);
	transform: translateY(-1px);
}

.wenaro-single-product .wenaro-product-inquiry-hint {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	text-align: center;
}

.wenaro-single-product .wenaro-product-inquiry-notice {
	padding: 11px 13px;
	border-radius: 9px;
	font-size: 0.875rem;
	line-height: 1.45;
}

.wenaro-single-product .wenaro-product-inquiry-notice--success {
	background: color-mix(in srgb, var(--wp--preset--color--success) 9%, var(--wp--preset--color--surface));
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--success) 28%, var(--wp--preset--color--border));
	color: var(--wp--preset--color--success);
}

.wenaro-single-product .wenaro-product-inquiry-notice--error {
	background: color-mix(in srgb, var(--wp--preset--color--danger) 7%, var(--wp--preset--color--surface));
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--danger) 24%, var(--wp--preset--color--border));
	color: var(--wp--preset--color--danger);
}

.wenaro-product-inquiry-dialog {
	width: min(620px, calc(100% - 32px));
	max-height: calc(100dvh - 40px);
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: transparent;
	color: var(--wp--preset--color--ink);
	box-shadow: 0 24px 70px rgb(15 23 42 / 24%);
}

.wenaro-product-inquiry-dialog::backdrop {
	background: rgb(15 23 42 / 58%);
	backdrop-filter: blur(2px);
}

.wenaro-product-inquiry-dialog-inner {
	position: relative;
	padding: 30px;
	overflow: auto;
	max-height: calc(100dvh - 40px);
	box-sizing: border-box;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
}

.wenaro-product-inquiry-close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: transparent;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
}

.wenaro-product-inquiry-close:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.wenaro-product-inquiry-kicker {
	margin: 0 48px 6px 0;
	color: var(--wp--preset--color--brand);
	font-size: 0.8125rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.wenaro-product-inquiry-title {
	margin: 0 48px 10px 0;
	font-size: 1.5rem;
	line-height: 1.25;
}

.wenaro-product-inquiry-intro {
	margin: 0 0 22px;
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}

.wenaro-product-inquiry-form {
	display: grid;
	gap: 16px;
}

.wenaro-product-inquiry-field {
	display: grid;
	gap: 7px;
}

.wenaro-product-inquiry-field label {
	font-size: 0.875rem;
	font-weight: 700;
}

.wenaro-product-inquiry-field input,
.wenaro-product-inquiry-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 9px;
	background: #fff;
	color: var(--wp--preset--color--ink);
	font: inherit;
}

.wenaro-product-inquiry-field textarea {
	resize: vertical;
	min-height: 130px;
}

.wenaro-product-inquiry-field input:focus,
.wenaro-product-inquiry-field textarea:focus {
	outline: 2px solid color-mix(in srgb, var(--wp--preset--color--brand) 32%, transparent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--brand);
}

.wenaro-product-inquiry-honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.wenaro-product-inquiry-privacy {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.wenaro-product-inquiry-privacy a {
	color: var(--wp--preset--color--brand-dark);
	font-weight: 600;
}

.wenaro-product-inquiry-submit {
	min-height: 48px;
	padding: 12px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--wp--preset--color--brand);
	color: #fff;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}

.wenaro-product-inquiry-submit:hover {
	background: var(--wp--preset--color--brand-dark);
}

@media (max-width: 600px) {
	.wenaro-product-inquiry-dialog {
		width: calc(100% - 20px);
		max-height: calc(100dvh - 20px);
	}

	.wenaro-product-inquiry-dialog-inner {
		padding: 24px 18px;
		max-height: calc(100dvh - 20px);
		border-radius: 14px;
	}
}

/* ==========================================================================
   Wenaro v0.1.49 — finalne dopracowanie Cart / Mini Cart / Checkout
   2026-09-25

   Zakres:
   1) kompaktowy, spójny quantity selector w pełnym Koszyku i Mini Cart,
   2) wyśrodkowanie i uporządkowanie kontrolki ilości w Checkout Order Summary,
   3) jeden język wizualny pól/kart Checkoutu: białe tło, 1px border,
      ten sam promień dla e-maila, adresu, dostawy, płatności, faktury i notatki.

   Wyłącznie CSS — bez zmian logiki WooCommerce / Store API / walidacji.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Koszyk + Mini Cart — kompaktowa kontrolka ilości
   -------------------------------------------------------------------------- */

body.woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector,
.wc-block-mini-cart__drawer .wc-block-cart-item__quantity .wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	min-width: 96px;
	max-width: 96px;
	height: 34px;
	min-height: 34px;
	padding: 0;
	background: var(--wp--preset--color--surface, #ffffff);
	border: 1px solid var(--wp--preset--color--border, #e4e7ec);
	border-radius: 9px;
	box-shadow: none;
	overflow: hidden;
	box-sizing: border-box;
}

body.woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector__input,
.wc-block-mini-cart__drawer .wc-block-cart-item__quantity .wc-block-components-quantity-selector__input {
	width: 36px;
	min-width: 36px;
	max-width: 36px;
	height: 32px;
	min-height: 32px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--wp--preset--color--ink, #111827);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 32px;
	text-align: center;
	box-sizing: border-box;
	appearance: textfield;
	-moz-appearance: textfield;
}

body.woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
body.woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector__input::-webkit-inner-spin-button,
.wc-block-mini-cart__drawer .wc-block-cart-item__quantity .wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
.wc-block-mini-cart__drawer .wc-block-cart-item__quantity .wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button,
.wc-block-mini-cart__drawer .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 29px;
	min-width: 29px;
	max-width: 29px;
	height: 32px;
	min-height: 32px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--wp--preset--color--ink, #111827);
	font-size: 1rem;
	line-height: 1;
	box-sizing: border-box;
}

body.woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:hover:not(:disabled),
.wc-block-mini-cart__drawer .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:hover:not(:disabled) {
	background: var(--wp--preset--color--background, #f7f8fa);
}

body.woocommerce-cart .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:disabled,
.wc-block-mini-cart__drawer .wc-block-cart-item__quantity .wc-block-components-quantity-selector__button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   2. Checkout Order Summary — ilość jako zwarta, wyśrodkowana kontrolka
   -------------------------------------------------------------------------- */

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wenaro-checkout-quantity {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	justify-self: center;
	column-gap: 7px;
	row-gap: 3px;
	width: 132px;
	max-width: 100%;
	min-height: 36px;
	margin-top: 6px;
	padding: 4px 6px;
	background: var(--wp--preset--color--surface, #ffffff);
	border: 1px solid var(--wp--preset--color--border, #e4e7ec);
	border-radius: 9px;
	box-sizing: border-box;
}

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wenaro-checkout-quantity__label {
	flex: 0 0 auto;
	margin: 0;
	color: var(--wp--preset--color--muted, #667085);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1;
}

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wenaro-checkout-quantity__group {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: 28px;
	min-height: 28px;
	margin: 0;
	padding: 0;
	background: var(--wp--preset--color--background, #ffffff);
	border: 1px solid var(--wp--preset--color--border, #e4e7ec);
	border-radius: 7px;
	overflow: hidden;
	box-sizing: border-box;
}

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wenaro-checkout-quantity__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	min-width: 27px;
	height: 26px;
	min-height: 26px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--wp--preset--color--ink, #111827);
	font-size: 0.9375rem;
	line-height: 1;
	box-sizing: border-box;
}

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wenaro-checkout-quantity__button:hover:not(:disabled) {
	background: var(--wp--preset--color--surface, #f7f8fa);
}

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wenaro-checkout-quantity__input {
	width: 34px;
	min-width: 34px;
	max-width: 34px;
	height: 26px;
	min-height: 26px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--wp--preset--color--ink, #111827);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 26px;
	text-align: center;
	box-sizing: border-box;
	appearance: textfield;
	-moz-appearance: textfield;
}

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wenaro-checkout-quantity__input::-webkit-outer-spin-button,
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wenaro-checkout-quantity__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wenaro-checkout-quantity__status {
	flex: 0 0 100%;
	min-width: 0;
	text-align: center;
	font-size: 0.6875rem;
	line-height: 1.2;
}

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wenaro-checkout-quantity__status:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   3. Checkout — wspólny wygląd wszystkich "okienek"
   -------------------------------------------------------------------------- */

/* Jedna paleta / geometria: e-mail i pozostałe pola formularzy. */
body.woocommerce-checkout .wc-block-components-text-input input[type="text"],
body.woocommerce-checkout .wc-block-components-text-input input[type="email"],
body.woocommerce-checkout .wc-block-components-text-input input[type="tel"],
body.woocommerce-checkout .wc-block-components-text-input input[type="number"],
body.woocommerce-checkout .wc-block-checkout .wc-block-components-combobox input,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea {
	background: var(--wp--preset--color--surface, #ffffff);
	border: 1px solid var(--wp--preset--color--border, #e4e7ec);
	border-radius: 10px;
	box-shadow: none;
}

/* Karta aktualnego adresu wysyłki — ten sam border/radius co faktura/notatka. */
body.woocommerce-checkout
#shipping-fields
.wc-block-components-address-card {
	padding: 16px;
	background: var(--wp--preset--color--surface, #ffffff);
	border: 1px solid var(--wp--preset--color--border, #e4e7ec);
	border-radius: 10px;
	box-shadow: none;
	box-sizing: border-box;
}

/* Formularz faktury i notatka — jawnie ten sam wzorzec geometryczny. */
body.woocommerce-checkout #order.wc-block-components-address-form,
body.woocommerce-checkout #order-notes.wc-block-checkout__order-notes {
	background: var(--wp--preset--color--surface, #ffffff);
	border: 1px solid var(--wp--preset--color--border, #e4e7ec);
	border-radius: 10px;
	box-shadow: none;
}

/* Dostawa — pojedynczy biały wiersz, neutralna ramka również po zaznaczeniu. */
body.woocommerce-checkout
#shipping-option
.wc-block-components-radio-control__option {
	background: var(--wp--preset--color--surface, #ffffff);
	border: 1px solid var(--wp--preset--color--border, #e4e7ec);
	border-radius: 10px;
	box-shadow: none;
}

/* Płatność — wizualną kartą jest zewnętrzny accordion wrapper. */
body.woocommerce-checkout
#payment-method
.wc-block-components-radio-control-accordion-option {
	background: var(--wp--preset--color--surface, #ffffff);
	border: 1px solid var(--wp--preset--color--border, #e4e7ec);
	border-radius: 10px;
	box-shadow: none;
}

/* WooCommerce dodaje osobne klasy "checked/highlighted".
   Zachowujemy identyczną grubość i kolor ramki — wybór pokazuje radio. */
body.woocommerce-checkout
#shipping-option
.wc-block-components-radio-control__option-checked,
body.woocommerce-checkout
#shipping-option
.wc-block-components-radio-control__option--checked-option-highlighted,
body.woocommerce-checkout
#payment-method
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
body.woocommerce-checkout
#payment-method
.wc-block-components-radio-control-accordion-option--checked,
body.woocommerce-checkout
#payment-method
.wc-block-components-radio-control-accordion-option[aria-checked="true"] {
	background: var(--wp--preset--color--surface, #ffffff);
	border-color: var(--wp--preset--color--border, #e4e7ec);
	box-shadow: none;
}

/* Wewnętrzny label płatności nie tworzy drugiej ramki. */
body.woocommerce-checkout
#payment-method
.wc-block-components-radio-control-accordion-option
.wc-block-components-radio-control__option,
body.woocommerce-checkout
#payment-method
.wc-block-components-radio-control-accordion-option
.wc-block-components-radio-control__option-checked {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Hover bez zmiany geometrii/koloru obramowania. */
body.woocommerce-checkout
#shipping-option
.wc-block-components-radio-control__option:hover,
body.woocommerce-checkout
#payment-method
.wc-block-components-radio-control-accordion-option:hover {
	border-color: var(--wp--preset--color--border, #e4e7ec);
	background: var(--wp--preset--color--surface, #ffffff);
}

/* Subtelnie porządkujemy checkbox pod kartą adresu. */
body.woocommerce-checkout
#shipping-fields
.wc-block-checkout__use-address-for-billing {
	margin-top: 12px;
}

/* Na mobile zachowujemy tę samą geometrię, zmniejszamy tylko padding adresu. */
@media (max-width: 600px) {
	body.woocommerce-checkout
	#shipping-fields
	.wc-block-components-address-card {
		padding: 14px;
	}

	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item
	.wenaro-checkout-quantity {
		width: 126px;
	}
}

/* ==========================================================================
   Wenaro v0.1.50 — Checkout mobile: białe podsumowanie + ilość pod miniaturą
   2026-09-25

   Wyłącznie mobile (<=600px):
   - desktop v0.1.49 pozostaje nietknięty,
   - karta Podsumowania zamówienia ma białe tło,
   - kontrolka ilości przechodzi pod miniaturę produktu,
   - nazwa/ceny pozostają w prawej kolumnie,
   - badge "Oszczędzasz" pozostaje pod blokiem cen.
   ========================================================================== */

@media (max-width: 600px) {

	/* ---------- Białe tło całego panelu podsumowania ---------- */

	body.woocommerce-checkout .wc-block-components-sidebar,
	body.woocommerce-checkout .wc-block-checkout__sidebar,
	body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block,
	body.woocommerce-checkout .checkout-order-summary-block-fill,
	body.woocommerce-checkout .wc-block-components-checkout-order-summary__content {
		background: var(--wp--preset--color--background, #ffffff);
	}

	/* ---------- Produkt w podsumowaniu: miniatura | treść ---------- */

	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item {
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: 12px;
		align-items: start;
	}

	/* Miniatura zajmuje tylko górną część lewej kolumny.
	   Dzięki temu pod nią powstaje prawdziwe miejsce na kontrolkę ilości. */
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item__image {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
		justify-self: center;
	}

	/* ---------- Produkt promocyjny: zachowujemy label/value po prawej ---------- */

	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular) {
		grid-template-columns: 72px max-content minmax(0, 1fr);
		grid-template-rows: auto auto auto auto auto;
	}

	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
	.wc-block-components-order-summary-item__image {
		grid-column: 1;
		grid-row: 1 / span 3;
		align-self: start;
		justify-self: center;
	}

	/* ---------- Ilość POD MINIATURĄ ---------- */

	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item
	.wenaro-checkout-quantity {
		grid-column: 1;
		grid-row: 4;
		justify-self: center;
		align-self: start;
		width: 72px;
		max-width: 72px;
		min-height: 0;
		margin: 6px 0 0;
		padding: 5px 4px;
		row-gap: 4px;
		column-gap: 0;
		flex-direction: column;
		background: var(--wp--preset--color--background, #ffffff);
	}

	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item
	.wenaro-checkout-quantity__label {
		width: 100%;
		text-align: center;
		font-size: 0.6875rem;
		line-height: 1.1;
	}

	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item
	.wenaro-checkout-quantity__group {
		width: 62px;
		height: 26px;
		min-height: 26px;
	}

	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item
	.wenaro-checkout-quantity__button {
		width: 20px;
		min-width: 20px;
		height: 24px;
		min-height: 24px;
		font-size: 0.875rem;
	}

	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item
	.wenaro-checkout-quantity__input {
		width: 22px;
		min-width: 22px;
		max-width: 22px;
		height: 24px;
		min-height: 24px;
		line-height: 24px;
		font-size: 0.75rem;
	}

	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item
	.wenaro-checkout-quantity__status {
		width: 100%;
		font-size: 0.625rem;
	}

	/* Produkt bez promocji — ilość również pod zdjęciem.
	   Total-price zostaje po prawej, pod opisem. */
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item:not(:has(.wc-block-components-product-price__regular))
	.wenaro-checkout-quantity {
		grid-column: 1;
		grid-row: 2;
	}

	/* Produkt promocyjny — ilość w lewym wierszu 4,
	   badge "Oszczędzasz" nadal po prawej, w swoim dotychczasowym wierszu 5. */
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
	.wenaro-checkout-quantity {
		grid-column: 1;
		grid-row: 4;
	}

	/* Badge/cena końcowa promocji pozostaje po prawej i nie jest wypychana przez ilość. */
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
	.wc-block-components-order-summary-item__total-price {
		grid-column: 2 / 4;
		grid-row: 5;
	}
}

/* ==========================================================================
   Wenaro v0.1.51 — Checkout mobile: ilość bliżej miniatury + białe tło
   2026-09-25

   Korekta wyłącznie dla mobile (<=600px), bez zmian desktopu:
   - cała pozycja w podsumowaniu ma prostszy układ 2-kolumnowy,
   - blok ilości siedzi bezpośrednio pod miniaturą,
   - blok ilości ma białe tło,
   - odstępy są ciaśniejsze i bardziej naturalne wizualnie.
   ========================================================================== */

@media (max-width: 600px) {

	/* Jednolity układ: miniatura po lewej, treść po prawej,
	   ilość bezpośrednio pod miniaturą */
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item,
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular) {
		grid-template-columns: 72px minmax(0, 1fr) !important;
		grid-template-rows: auto auto auto !important;
		column-gap: 12px;
		row-gap: 4px;
		align-items: start;
	}

	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item__image,
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
	.wc-block-components-order-summary-item__image {
		grid-column: 1;
		grid-row: 1 !important;
		align-self: start;
		justify-self: center;
		margin: 0;
	}

	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item__description {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: start;
		min-width: 0;
		margin: 0;
		padding-top: 0;
	}

	/* Ilość naprawdę pod zdjęciem */
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item
	.wenaro-checkout-quantity,
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
	.wenaro-checkout-quantity {
		grid-column: 1 !important;
		grid-row: 2 !important;
		justify-self: center;
		align-self: start;
		width: 72px;
		max-width: 72px;
		margin: 2px 0 0 !important;
		padding: 5px 4px;
		background: #ffffff !important;
		border: 1px solid #d7dde3;
		border-radius: 10px;
		box-shadow: none;
	}

	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item
	.wenaro-checkout-quantity__group,
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item
	.wenaro-checkout-quantity__input,
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item
	.wenaro-checkout-quantity__button {
		background: #ffffff !important;
	}

	/* Blok ceny końcowej / badge pod opisem, nie obok ilości */
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item__total-price,
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
	.wc-block-components-order-summary-item__total-price {
		grid-column: 2;
		grid-row: 3 !important;
		justify-self: start;
		align-self: start;
		margin-top: 4px;
	}
}

/* ==========================================================================
   Wenaro v0.1.52 — Checkout Order Summary: jeden układ PC + mobile
   2026-09-28

   Cel:
   - Ilość zawsze bezpośrednio POD miniaturą produktu (PC + mobile).
   - Nazwa i ceny zawsze w prawej kolumnie.
   - "Oszczędzasz" pod blokiem cen, również po prawej.
   - Na mobile całe Podsumowanie zamówienia ma białe tło.
   - Upraszczamy wcześniejszy promo-subgrid tylko w warstwie prezentacji;
     logika WooCommerce / JS / Store API pozostaje nietknięta.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. WSPÓLNY układ pozycji produktu — PC + mobile
   -------------------------------------------------------------------------- */

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item,
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular) {
	display: grid !important;
	grid-template-columns: 72px minmax(0, 1fr) !important;
	grid-template-rows: auto auto auto !important;
	column-gap: 12px !important;
	row-gap: 4px !important;
	align-items: start !important;
}

/* Miniatura — lewy górny róg. */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item__image,
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
.wc-block-components-order-summary-item__image {
	grid-column: 1 !important;
	grid-row: 1 !important;
	align-self: start !important;
	justify-self: center !important;
	margin: 0 !important;
}

/* Opis — prawa kolumna. Nadpisujemy stary promo-subgrid tylko wizualnie. */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item__description,
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
.wc-block-components-order-summary-item__description {
	display: block !important;
	grid-column: 2 !important;
	grid-row: 1 !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	column-gap: 0 !important;
	row-gap: 0 !important;
}

/* Stare display:contents z promo-subgrid wyłączamy w tym kontekście. */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
.wc-block-cart-item__prices,
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
.wc-block-cart-item__prices .price {
	display: block !important;
}

/* Nazwa produktu. */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
.wc-block-components-product-name {
	display: block !important;
	grid-column: auto !important;
	grid-row: auto !important;
	margin-bottom: 4px !important;
}

/* Metadata/krótki opis nadal niewidoczne wg wcześniejszej reguły. */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
.wc-block-components-product-metadata {
	grid-column: auto !important;
	grid-row: auto !important;
}

/* --------------------------------------------------------------------------
   B. Ceny promocyjne — prosty układ w prawej kolumnie
   -------------------------------------------------------------------------- */

/* Cena regularna: etykieta poza <del>, więc nie jest przekreślona. */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
.wc-block-cart-item__prices .price::before {
	content: "Cena regularna: ";
	display: inline;
	color: var(--wp--preset--color--ink, #111827);
	font-weight: 400;
	font-size: 0.8125rem;
}

/* Stara etykieta z ::after rodzica nie jest już potrzebna. */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
.wc-block-cart-item__prices .price::after {
	content: none !important;
}

/* Regularna cena — zwykła linia. */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
.wc-block-components-product-price__regular {
	display: inline !important;
	grid-column: auto !important;
	grid-row: auto !important;
	margin-left: 4px !important;
	font-size: 0.8125rem !important;
	font-weight: 400 !important;
	color: var(--wp--preset--color--muted, #667085) !important;
	text-decoration: line-through !important;
}

/* Cena po rabacie — osobna linia z własną etykietą. */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wc-block-components-product-price__value.is-discounted {
	display: block !important;
	grid-column: auto !important;
	grid-row: auto !important;
	margin: 2px 0 0 !important;
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--ink, #111827) !important;
}

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wc-block-components-product-price__value.is-discounted::before {
	content: "Cena po rabacie: " !important;
	display: inline !important;
	color: var(--wp--preset--color--ink, #111827) !important;
	font-weight: 400 !important;
}

/* --------------------------------------------------------------------------
   C. Ilość — BEZPOŚREDNIO pod miniaturą (PC + mobile)
   -------------------------------------------------------------------------- */

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wenaro-checkout-quantity,
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
.wenaro-checkout-quantity {
	grid-column: 1 !important;
	grid-row: 2 !important;
	justify-self: center !important;
	align-self: start !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 72px !important;
	max-width: 72px !important;
	min-height: 0 !important;
	margin: 2px 0 0 !important;
	padding: 5px 4px !important;
	column-gap: 0 !important;
	row-gap: 4px !important;
	background: #ffffff !important;
	border: 1px solid #d7dde3 !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wenaro-checkout-quantity__label {
	width: 100% !important;
	margin: 0 !important;
	text-align: center !important;
	font-size: 0.6875rem !important;
	line-height: 1.1 !important;
}

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wenaro-checkout-quantity__group {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 62px !important;
	height: 26px !important;
	min-height: 26px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #ffffff !important;
	border: 1px solid var(--wp--preset--color--border, #e4e7ec) !important;
	border-radius: 7px !important;
	overflow: hidden !important;
}

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wenaro-checkout-quantity__button {
	width: 20px !important;
	min-width: 20px !important;
	height: 24px !important;
	min-height: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #ffffff !important;
	border: 0 !important;
	box-shadow: none !important;
	font-size: 0.875rem !important;
	line-height: 1 !important;
}

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wenaro-checkout-quantity__input {
	width: 22px !important;
	min-width: 22px !important;
	max-width: 22px !important;
	height: 24px !important;
	min-height: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #ffffff !important;
	border: 0 !important;
	box-shadow: none !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	line-height: 24px !important;
	text-align: center !important;
}

/* --------------------------------------------------------------------------
   D. Total / badge "Oszczędzasz" — prawa kolumna pod cenami
   -------------------------------------------------------------------------- */

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item__total-price,
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
.wc-block-components-order-summary-item__total-price {
	grid-column: 2 !important;
	grid-row: 2 !important;
	justify-self: start !important;
	align-self: start !important;
	width: auto !important;
	margin: 4px 0 0 !important;
	padding: 0 !important;
	text-align: left !important;
	box-sizing: border-box !important;
}

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
.wc-block-cart-item__total-price-and-sale-badge-wrapper {
	display: block !important;
}

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wc-block-components-sale-badge {
	margin-top: 0 !important;
}

/* --------------------------------------------------------------------------
   E. MOBILE — całe podsumowanie bez szarego tła
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	body.woocommerce-checkout .wc-block-components-sidebar,
	body.woocommerce-checkout .wc-block-checkout__sidebar,
	body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block,
	body.woocommerce-checkout .checkout-order-summary-block-fill,
	body.woocommerce-checkout .wc-block-components-checkout-order-summary__content,
	body.woocommerce-checkout .wc-block-components-order-summary,
	body.woocommerce-checkout .wc-block-components-order-summary__content,
	body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-cart-items-block,
	body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-totals-block,
	body.woocommerce-checkout .wc-block-components-totals-wrapper {
		background-color: #ffffff !important;
	}
}

/* ==========================================================================
   Wenaro v0.1.53 — Checkout Order Summary: miniatura 72×72 + ilość pod nią
   2026-09-28

   PC + mobile:
   - miniatura ma dokładnie tę samą szerokość co blok "Ilość" (72px),
   - miniatura jest kwadratem 72×72,
   - "Ilość" siedzi kilka pikseli bezpośrednio pod miniaturą,
   - prawa kolumna (nazwa / ceny / badge) pozostaje bez zmian.
   ========================================================================== */

/* Lewa kolumna podsumowania ma wspólny wymiar 72px. */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item__image {
	width: 72px !important;
	height: 72px !important;
	min-width: 72px !important;
	min-height: 72px !important;
	max-width: 72px !important;
	max-height: 72px !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	align-self: start !important;
	justify-self: center !important;
}

/* Sama miniatura — pełny kwadrat, bez rozciągania obrazu. */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item__image img {
	display: block !important;
	width: 72px !important;
	height: 72px !important;
	min-width: 72px !important;
	min-height: 72px !important;
	max-width: 72px !important;
	max-height: 72px !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: contain !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* Quantity dokładnie tej samej szerokości i tylko kilka px pod zdjęciem. */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wenaro-checkout-quantity,
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
.wenaro-checkout-quantity {
	width: 72px !important;
	min-width: 72px !important;
	max-width: 72px !important;
	margin-top: 4px !important;
	justify-self: center !important;
	align-self: start !important;
}

/* Badge z numerem sztuk na miniaturze nadal jest zakotwiczony przy obrazie. */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item__image
.wc-block-components-order-summary-item__quantity {
	z-index: 2;
}

/* ==========================================================================
   Wenaro v0.1.54 — Checkout Order Summary: ilość zawsze pod miniaturą
   2026-09-28

   Problem:
   Przy dłuższych nazwach / promocjach blok "Ilość" zsuwał się za nisko,
   bo nadal zależał od wysokości treści po prawej stronie.

   Rozwiązanie:
   - każda pozycja w podsumowaniu dostaje stałą lewą kolumnę 72 px,
   - miniatura jest absolutnie przypięta do góry po lewej,
   - "Ilość" jest absolutnie przypięta 4 px pod miniaturą,
   - prawa treść dostaje stały lewy offset,
   - białe tło wymuszone również w mobilnym podsumowaniu.
   ========================================================================== */

/* Białe tło całego bloku podsumowania — również na telefonie. */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-block,
body.woocommerce-checkout
.checkout-order-summary-block-fill,
body.woocommerce-checkout
.wc-block-components-checkout-order-summary__content,
body.woocommerce-checkout
.wc-block-components-order-summary,
body.woocommerce-checkout
.wc-block-components-order-summary__content,
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block,
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-totals-wrapper {
	background-color: #ffffff !important;
}

/* Każda pozycja: stała lewa kolumna 72px + treść po prawej. */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item,
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular) {
	position: relative !important;
	display: block !important;
	padding-left: 88px !important;   /* 72px miniatura + 16px luz */
	min-height: 124px !important;    /* 72 + 4 + blok ilości */
	background-color: #ffffff !important;
	box-sizing: border-box !important;
}

/* Miniatura: zawsze kwadrat 72x72 przy lewej krawędzi. */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item__image,
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
.wc-block-components-order-summary-item__image {
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	width: 72px !important;
	height: 72px !important;
	min-width: 72px !important;
	min-height: 72px !important;
	max-width: 72px !important;
	max-height: 72px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	background: #ffffff !important;
	box-sizing: border-box !important;
}

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item__image img,
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item__image > img {
	display: block !important;
	width: 72px !important;
	height: 72px !important;
	min-width: 72px !important;
	min-height: 72px !important;
	max-width: 72px !important;
	max-height: 72px !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: contain !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #ffffff !important;
	box-sizing: border-box !important;
}

/* Kropka z ilością sztuk pozostaje na miniaturze. */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item__image
.wc-block-components-order-summary-item__quantity {
	z-index: 3 !important;
}

/* Opis produktu po prawej, bez wpływu na pozycję bloku "Ilość". */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item__description,
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
.wc-block-components-order-summary-item__description {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
}

/* Total/badge po prawej — bez zmian układu, ale w normalnym flow. */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item__total-price,
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
.wc-block-components-order-summary-item__total-price {
	display: block !important;
	margin: 4px 0 0 !important;
	padding: 0 !important;
	text-align: left !important;
	width: auto !important;
}

/* Ilość: zawsze 4 px pod miniaturą, niezależnie od długości nazwy/cen. */
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item
.wenaro-checkout-quantity,
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular)
.wenaro-checkout-quantity {
	position: absolute !important;
	left: 0 !important;
	top: 76px !important;            /* 72px miniatura + 4px odstępu */
	width: 72px !important;
	min-width: 72px !important;
	max-width: 72px !important;
	margin: 0 !important;
	padding: 5px 4px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	row-gap: 4px !important;
	background: #ffffff !important;
	border: 1px solid #d7dde3 !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	z-index: 2 !important;
}

/* Delikatne doprecyzowanie mobile — ten sam układ, ale jawnie biały. */
@media (max-width: 600px) {
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item,
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular),
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wenaro-checkout-quantity,
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item__image,
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item__image img {
		background-color: #ffffff !important;
	}
}

/* ==========================================================================
   Wenaro v0.1.55 — Checkout Order Summary: ukrycie duplikatu ilości na miniaturze
   2026-09-28

   Ilość produktu jest już widoczna i edytowalna pod miniaturą przez
   ".wenaro-checkout-quantity", więc natywny badge WooCommerce z cyfrą
   w prawym górnym rogu miniatury jest zbędnym duplikatem.
   Zakres wyłącznie: Checkout Order Summary, PC + mobile.
   ========================================================================== */

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item__image
.wc-block-components-order-summary-item__quantity {
	display: none !important;
}

/* ==========================================================================
   Wenaro v0.1.56 — Checkout Order Summary: rezerwa wysokości pod blok ilości
   2026-09-28

   Problem:
   ".wenaro-checkout-quantity" jest pozycjonowane absolutnie pod miniaturą,
   więc nie zwiększa naturalnej wysokości rodzica. Przy krótkiej nazwie
   produktu (np. "Kochonezki") separator następnej pozycji pojawiał się
   zanim blok ilości się kończył.

   Rozwiązanie:
   - każda pozycja ma minimalną wysokość wystarczającą na:
     72px miniatury + 4px odstępu + ok. 51px kontrolki ilości + luz,
   - dodatkowy dolny padding daje wizualny odstęp przed separatorem,
   - produkty z dłuższą treścią nadal mogą rosnąć naturalnie.
   ========================================================================== */

body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item,
body.woocommerce-checkout
.wp-block-woocommerce-checkout-order-summary-cart-items-block
.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular) {
	min-height: 144px !important;
	padding-bottom: 16px !important;
	box-sizing: border-box !important;
}

/* Na bardzo wąskich ekranach zachowujemy identyczną rezerwę,
   żeby separator nigdy nie wszedł pod blok "Ilość". */
@media (max-width: 600px) {
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item,
	body.woocommerce-checkout
	.wp-block-woocommerce-checkout-order-summary-cart-items-block
	.wc-block-components-order-summary-item:has(.wc-block-components-product-price__regular) {
		min-height: 144px !important;
		padding-bottom: 16px !important;
	}
}

/* ==========================================================================
   Wenaro v0.1.57 — Order Confirmation: pełna karta "Utwórz konto"
   2026-09-29

   Zakres wyłącznie strony "Dziękujemy za zamówienie":
   - karta tworzenia konta ma tę samą szerokość co pozostałe główne karty,
   - spójny border / radius / białe tło,
   - większy, czytelny opis pod przyciskiem,
   - prawidłowy odstęp od kolejnej sekcji "Szczegóły zamówienia",
   - mobile układa sekcje pionowo.
   ========================================================================== */

.wc-block-order-confirmation-create-account {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	align-items: center !important;
	gap: 32px !important;
	width: 100% !important;
	max-width: none !important;
	margin-top: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 28px !important;
	margin-left: 0 !important;
	padding: 24px !important;
	background: var(--wp--preset--color--surface, #ffffff) !important;
	border: 1px solid var(--wp--preset--color--border, #e4e7ec) !important;
	border-radius: 14px !important;
	box-sizing: border-box !important;
}

.wc-block-order-confirmation-create-account-content,
.wc-block-order-confirmation-create-account-form-wrapper,
.wc-block-order-confirmation-create-account-form {
	min-width: 0 !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
}

.wc-block-order-confirmation-create-account-content .wp-block-heading {
	margin: 0 0 14px !important;
	color: var(--wp--preset--color--ink, #111827) !important;
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
}

.wc-block-order-confirmation-create-account-content .wp-block-list {
	margin: 0 !important;
	padding-left: 20px !important;
	color: var(--wp--preset--color--ink, #111827) !important;
}

.wc-block-order-confirmation-create-account-content .wp-block-list li {
	margin: 0 0 8px !important;
	line-height: 1.5 !important;
}

.wc-block-order-confirmation-create-account-content .wp-block-list li:last-child {
	margin-bottom: 0 !important;
}

.wc-block-order-confirmation-create-account-form {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: center !important;
}

.wc-block-order-confirmation-create-account-button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 48px !important;
	padding: 12px 18px !important;
	margin: 0 !important;
	background: var(--wp--preset--color--brand, #f45b16) !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 10px !important;
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	box-sizing: border-box !important;
}

.wc-block-order-confirmation-create-account-button:hover {
	background: var(--wp--preset--color--brand-dark, #c9470d) !important;
	color: #ffffff !important;
}

.wc-block-order-confirmation-create-account-description {
	margin-top: 12px !important;
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
}

.wc-block-order-confirmation-create-account-description p {
	margin: 0 !important;
	color: var(--wp--preset--color--muted, #667085) !important;
	font-size: 0.875rem !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
	text-align: center !important;
}

/* Jeżeli WooCommerce nadaje alignwide własne szerokości/marginesy,
   karta ma pozostać na tej samej osi co Summary i Totals. */
.wc-block-order-confirmation-create-account.alignwide {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Mobile — jedna kolumna, ten sam gutter co pozostałe sekcje Order Confirmation. */
@media (max-width: 781px) {
	.wc-block-order-confirmation-create-account {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
		margin-left: 16px !important;
		margin-right: 16px !important;
		margin-bottom: 22px !important;
		padding: 18px 20px !important;
		width: auto !important;
	}

	.wc-block-order-confirmation-create-account-description p {
		font-size: 0.875rem !important;
		text-align: left !important;
	}

	.wc-block-order-confirmation-create-account-button {
		min-height: 48px !important;
	}
}

/* ==========================================================================
   Wenaro v0.1.58 — Order Confirmation: "Utwórz konto" na osi wideSize
   2026-09-29

   Problem:
   Blok Create Account był renderowany wewnątrz węższego contentSize,
   podczas gdy "Szczegóły zamówienia" i pozostałe główne karty Order
   Confirmation korzystają z wideSize.

   Rozwiązanie:
   Na desktop/tablet wyciągamy WYŁĄCZNIE ten blok z osi contentSize
   i centrujemy go na tej samej szerokości co pozostałe główne karty.
   Wnętrze, grid, button i typografia z v0.1.57 pozostają bez zmian.
   ========================================================================== */

@media (min-width: 782px) {
	.wc-block-order-confirmation-create-account.alignwide,
	.wc-block-order-confirmation-create-account {
		position: relative !important;
		left: 50% !important;
		transform: translateX(-50%) !important;

		width: min(
			calc(100vw - 48px),
			var(--wp--style--global--wide-size, 1440px)
		) !important;

		max-width: var(--wp--style--global--wide-size, 1440px) !important;

		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Mobile wraca do normalnego przepływu i istniejącego guttera z v0.1.57. */
@media (max-width: 781px) {
	.wc-block-order-confirmation-create-account.alignwide,
	.wc-block-order-confirmation-create-account {
		position: static !important;
		left: auto !important;
		transform: none !important;
		max-width: none !important;
	}
}

/* ==========================================================================
   Wenaro v0.1.59 — Order Confirmation: szerokość na wrapperze account-shell
   2026-09-29

   Korekta v0.1.58:
   DOM posiada już dedykowany wrapper:
   .wenaro-order-confirmation-wide-shell.wenaro-order-confirmation-account-shell

   To wrapper ma zostać potraktowany jak alignwide. Nie wyciągamy już
   wewnętrznego bloku Create Account przez left/transform/100vw.
   Dzięki temu jego krawędzie pokrywają się z pozostałymi blokami alignwide
   (Summary / Totals), a margines pionowy jest kontrolowany przez wrapper.
   ========================================================================== */

/* Najpierw neutralizujemy sztuczne wyciąganie samej karty z v0.1.58. */
@media (min-width: 782px) {
	.wc-block-order-confirmation-create-account.alignwide,
	.wc-block-order-confirmation-create-account {
		position: static !important;
		left: auto !important;
		transform: none !important;
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 0 !important;
	}

	/* Wrapper zachowuje się jak realny element alignwide WordPressa. */
	.wenaro-order-confirmation-wide-shell.wenaro-order-confirmation-account-shell {
		width: 100% !important;
		max-width: var(--wp--style--global--wide-size, 1440px) !important;
		margin-top: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 28px !important;
		box-sizing: border-box !important;
	}
}

/* Mobile: karta i wrapper korzystają z tego samego guttera co pozostałe
   sekcje Order Confirmation, bez podwójnych marginesów. */
@media (max-width: 781px) {
	.wenaro-order-confirmation-wide-shell.wenaro-order-confirmation-account-shell {
		width: auto !important;
		max-width: none !important;
		margin: 0 16px 22px !important;
		box-sizing: border-box !important;
	}

	.wenaro-order-confirmation-account-shell
	.wc-block-order-confirmation-create-account {
		width: 100% !important;
		margin: 0 !important;
	}
}

/* ==========================================================================
   Wenaro v0.1.60 — Order Confirmation: account-shell contentSize → wideSize
   2026-09-29

   Zweryfikowany DOM:
   <main class="... is-layout-constrained">
     .wc-block-order-confirmation-summary.alignwide
     .wenaro-order-confirmation-account-shell          <- bez alignwide
     .wc-block-order-confirmation-totals-wrapper.alignwide
   </main>

   WordPress ogranicza element bez "alignwide" do contentSize. Dlatego
   wrapper konta musi zostać rozszerzony dokładnie o różnicę:
     wideSize - contentSize
   i wycentrowany względem swojej naturalnej osi contentSize.

   Nie używamy już 100vw jako głównego wymiaru — to powodowało zbyt szeroki
   kafelek w v0.1.58.
   ========================================================================== */

@media (min-width: 782px) {

	/* Wewnętrzna karta zajmuje dokładnie wrapper i nie steruje pozycją. */
	.wenaro-order-confirmation-account-shell
	.wc-block-order-confirmation-create-account,
	.wenaro-order-confirmation-account-shell
	.wc-block-order-confirmation-create-account.alignwide {
		position: static !important;
		left: auto !important;
		transform: none !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
	}

	/* Wrapper: contentSize + dokładna różnica do wideSize.
	   Przykład z theme.json: 1280px + (1440px - 1280px) = 1440px.
	   Na mniejszym viewportcie limituje go dostępna szerokość ekranu. */
	main.wp-block-group.is-layout-constrained
	> .wenaro-order-confirmation-wide-shell.wenaro-order-confirmation-account-shell {
		position: relative !important;
		left: 50% !important;
		transform: translateX(-50%) !important;

		width: min(
			calc(
				100% +
				(
					var(--wp--style--global--wide-size, 1440px) -
					var(--wp--style--global--content-size, 1280px)
				)
			),
			var(--wp--style--global--wide-size, 1440px),
			calc(100vw - 48px)
		) !important;

		max-width: none !important;
		margin-top: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 0 !important;
		box-sizing: border-box !important;
	}

	/* Odstęp robimy na NASTĘPNYM rodzeństwie, więc nie może zostać
	   zgubiony przez reguły/marginesy constrained layout WordPressa. */
	main.wp-block-group.is-layout-constrained
	> .wenaro-order-confirmation-account-shell
	+ .wc-block-order-confirmation-totals-wrapper {
		margin-top: 28px !important;
	}
}

/* Mobile pozostaje na normalnej osi z gutterem 16px. */
@media (max-width: 781px) {
	main.wp-block-group.is-layout-constrained
	> .wenaro-order-confirmation-wide-shell.wenaro-order-confirmation-account-shell {
		position: static !important;
		left: auto !important;
		transform: none !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 16px 22px !important;
	}

	main.wp-block-group.is-layout-constrained
	> .wenaro-order-confirmation-account-shell
	+ .wc-block-order-confirmation-totals-wrapper {
		margin-top: 0 !important;
	}
}

/* ==========================================================================
   Wenaro v0.1.61 — Order Confirmation mobile: bez podwójnego guttera account-shell
   2026-09-29

   Na mobile główny <main> już zapewnia boczny gutter. Dodatkowe 16px
   na .wenaro-order-confirmation-account-shell zawężało kartę o kolejne
   32px względem Summary / Totals.

   Desktop pozostaje bez zmian.
   ========================================================================== */

@media (max-width: 781px) {

	main.wp-block-group.is-layout-constrained
	> .wenaro-order-confirmation-wide-shell.wenaro-order-confirmation-account-shell {
		position: static !important;
		left: auto !important;
		transform: none !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 0 22px !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	/* Neutralizacja starszego mobile marginesu na samej karcie. */
	main.wp-block-group.is-layout-constrained
	> .wenaro-order-confirmation-account-shell
	.wc-block-order-confirmation-create-account,
	main.wp-block-group.is-layout-constrained
	> .wenaro-order-confirmation-account-shell
	.wc-block-order-confirmation-create-account.alignwide {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	/* Zachowujemy odstęp do Szczegółów zamówienia przez wrapper. */
	main.wp-block-group.is-layout-constrained
	> .wenaro-order-confirmation-account-shell
	+ .wc-block-order-confirmation-totals-wrapper {
		margin-top: 0 !important;
	}
}

/* ==========================================================================
   Wenaro v0.1.62 — Order Confirmation: wyśrodkowany sukces konta
   2026-09-29

   Po utworzeniu konta WooCommerce zastępuje formularz blokiem:
   .wc-block-order-confirmation-create-account-success

   Na desktopie karta sukcesu ma być wyśrodkowana w szerokim wrapperze.
   Mobile pozostaje pełnej szerokości.
   ========================================================================== */

@media (min-width: 782px) {
	main.wp-block-group.is-layout-constrained
	> .wenaro-order-confirmation-account-shell
	.wc-block-order-confirmation-create-account:has(.wc-block-order-confirmation-create-account-success) {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		grid-template-columns: none !important;
		min-height: 0 !important;
		padding: 28px !important;
	}

	.wenaro-order-confirmation-account-shell
	.wc-block-order-confirmation-create-account-success {
		width: min(100%, 640px) !important;
		max-width: 640px !important;
		margin: 0 auto !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}
}

.wenaro-order-confirmation-account-shell
.wc-block-order-confirmation-create-account-success h3 {
	text-align: center !important;
}

.wenaro-order-confirmation-account-shell
.wc-block-order-confirmation-create-account-success p {
	text-align: center !important;
}

.wenaro-order-confirmation-account-shell
.wenaro-account-success-email-note {
	margin-top: 14px !important;
	padding-top: 14px !important;
	border-top: 1px solid var(--wp--preset--color--border, #e4e7ec) !important;
	color: var(--wp--preset--color--muted, #667085) !important;
	font-size: 0.875rem !important;
	line-height: 1.55 !important;
}

@media (max-width: 781px) {
	.wenaro-order-confirmation-account-shell
	.wc-block-order-confirmation-create-account-success {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
	}

	.wenaro-order-confirmation-account-shell
	.wc-block-order-confirmation-create-account-success h3,
	.wenaro-order-confirmation-account-shell
	.wc-block-order-confirmation-create-account-success p {
		text-align: center !important;
	}
}

/* ==========================================================================
   Wenaro v0.1.63 — Order Confirmation: jeden kafelek sukcesu konta
   2026-09-29

   Po utworzeniu konta zewnętrzny blok WooCommerce nie tworzy już drugiego
   "kafelka". Jedyną kartą wizualną jest
   .wc-block-order-confirmation-create-account-success, która zawiera:
   - nagłówek sukcesu,
   - linki do konta,
   - informację o wiadomości e-mail i ustawieniu hasła.
   ========================================================================== */

.wenaro-order-confirmation-account-shell
.wc-block-order-confirmation-create-account:has(.wc-block-order-confirmation-create-account-success) {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.wenaro-order-confirmation-account-shell
.wc-block-order-confirmation-create-account-success {
	width: min(100%, 720px) !important;
	max-width: 720px !important;
	margin: 0 auto !important;
	padding: 26px 28px !important;
	background: #ffffff !important;
	border: 1px solid var(--wp--preset--color--border, #e4e7ec) !important;
	border-left: 4px solid #159447 !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	text-align: center !important;
}

.wenaro-order-confirmation-account-shell
.wc-block-order-confirmation-create-account-success h3 {
	margin: 0 0 16px !important;
	text-align: center !important;
}

.wenaro-order-confirmation-account-shell
.wc-block-order-confirmation-create-account-success > p {
	margin: 0 !important;
	text-align: center !important;
	line-height: 1.6 !important;
}

.wenaro-order-confirmation-account-shell
.wc-block-order-confirmation-create-account-success
.wenaro-account-success-email-note {
	margin-top: 18px !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--wp--preset--color--border, #e4e7ec) !important;
	color: var(--wp--preset--color--muted, #667085) !important;
	font-size: 0.875rem !important;
	line-height: 1.55 !important;
	text-align: center !important;
}

@media (max-width: 781px) {
	.wenaro-order-confirmation-account-shell
	.wc-block-order-confirmation-create-account-success {
		width: 100% !important;
		max-width: none !important;
		padding: 22px 18px !important;
	}

	.wenaro-order-confirmation-account-shell
	.wc-block-order-confirmation-create-account-success h3,
	.wenaro-order-confirmation-account-shell
	.wc-block-order-confirmation-create-account-success > p,
	.wenaro-order-confirmation-account-shell
	.wc-block-order-confirmation-create-account-success
	.wenaro-account-success-email-note {
		text-align: center !important;
	}
}