/* Integracja z WooCommerce: doprowadzenie własnych stylów Woo do systemu marki.
   Osobny plik, bo arkusze przeniesione z makiety zostają nietknięte.

   Świadomie bez @layer: arkusze makiety i arkusze WooCommerce są poza
   warstwami, a reguła spoza warstwy bije regułę w warstwie. */

/* Woo nadaje kartom w pętli szerokość procentową i float
   (woocommerce-layout.css: .woocommerce ul.products li.product). W naszej
   siatce opartej na grid i gap daje to karty o połowie szerokości komórki,
   dlatego zerujemy jego wymiary. !important jest tu konieczne: reguła Woo
   ma wyższą specyficzność, a jej arkusz ładuje się przed naszym. */

/* margin-top 24 px jak .lst-siatka w makiecie - bez niego dolna linia paska listingu
   leżała na górnej krawędzi kart i zlewała się z ich białym tłem. */
ul.products.lst-siatka {
	margin: var(--sp-s3) 0 0;
	padding: 0;
	list-style: none;
}

/* Doczytywanie: siatka zajęta, dopóki kolejna strona nie dojdzie. */
ul.products.lst-siatka[aria-busy="true"] {
	cursor: progress;
}

/* ── Cena za kilogram i wybór gramatury (inc/warianty.php) ── */

/* Dopisek ceny za kg na stronie produktu - wygląd .pp-cena span z makiety. Reguła niżej
   zeruje spany kwoty Woo, więc dopisek ma własną klasę o wyższej specyficzności. */
.pp-cena .pp-cena-kg {
	margin-left: var(--sp-s1);
	font-size: 15px;
	color: var(--sp-muted);
}

.pp-cena .pp-cena-kg[hidden] {
	display: none;
}

/* Zdjęcie zastępcze Woo w karcie poza obudową .woocommerce (listing, sekcje): ramka #f2f2f2
   z woocommerce.css jest spoza palety. */
img.woocommerce-placeholder {
	border-color: var(--sp-line);
}

/* Akcja powiadomienia (.sp-link, 48 px celu dotykowego) w osobnym wierszu pod treścią -
   w środku zdania rozpychałaby linię tekstu. */
.sp-notice-body p > .sp-link {
	display: flex;
	width: max-content;
	max-width: 100%;
}

/* Segment w formularzu wariantów. Lista Woo zostaje dla add-to-cart-variation.js, ale gdy
   działa skrypt motywu, widać tylko segment. */
.variations_form.sp-segment-gotowy .sp-warianty-lista {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Segment wariantów to .sp-segment z makiety (system.html) bez własnych efektów: wybrany wariant
   w zieleni marki z jasnym tekstem (powrót 14.09.2026 - od 13.09 był na lnie). Waga 400: reguła Woo
   .variations label dawała 700, a przeglądarka podstawiała pogrubiony systemowy Baskerville.
   Niedostępny wariant - kolor wyłączonego tekstu z palety, wybrany niedostępny - jasny na zieleni. */
.sp-segment--karta label,
.woocommerce div.product form.cart .variations .sp-segment--warianty label {
	font-weight: 400;
}

/* Tabela wariantów Woo daje komórce interlinię 2em (36 px) - pole miało 58 px zamiast 50 px
   z makiety. Segment wraca do interlinii tekstu (body: 1.55). */
.woocommerce div.product form.cart .variations .sp-segment--warianty {
	line-height: 1.55;
}

.sp-segment--warianty label.is-niedostepny {
	color: var(--sp-disabled-text);
}

.sp-segment--warianty label.is-niedostepny:has(input:checked) {
	color: var(--sp-paper);
}

/* Cenę wybranego wariantu pokazuje .pp-cena nad segmentem (makieta) - bez dublowania pod nim. */
.variations_form.sp-segment-gotowy .woocommerce-variation-price {
	display: none;
}

/* Miniatury wariantów (typ atrybutu „Miniatury”): pole segmentu z makiety, w środku samo zdjęcie
   wariantu zamiast nazwy (nazwa w .sr-only i title). Tylko rozmiar zdjęcia. */
.sp-segment--miniatury img {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.sp-segment--karta.sp-segment--miniatury img {
	width: 36px;
	height: 36px;
}

/* ── Karta produktu: wyśrodkowana, gramatura nad nazwą (decyzja właściciela 14.09.2026) ──
   Odznaki, gramatura, nazwa, cena i dopiski na środku karty; złota linia nad ceną zostaje na całą
   szerokość. Wiersz gramatury (.sp-product-warianty) jest w każdej karcie i rezerwuje wysokość
   jednego rzędu pól, żeby nazwy w rzędzie kart stały na jednej wysokości. */
.sp-product-badges {
	justify-content: center;
}

.sp-product-body {
	align-items: center;
	text-align: center;
}

.sp-product-body > .sp-product-price {
	align-self: stretch;
	justify-content: center;
}

.sp-product-warianty {
	display: flex;
	justify-content: center;
	min-height: 34px;
	margin-bottom: var(--sp-s1);
}

/* Pola gramatury jako małe przyciski organiczne: tło rysuje ::before z obrysem .sp-button.rustic
   (ui.css). Nieaktywne na lnie jak .rustic--cichy, wybrane w sepii (--sp-action) - zieleń zostaje
   dla „Dodaj do koszyka”. Niedostępny wariant w kolorze wyłączonego tekstu. Miniatury (adresówki)
   dostają to samo tło wokół zdjęcia. Ramka, dzielniki i wysokość 48 px z .sp-segment znikają. */
.sp-product .sp-segment--karta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	border: 0;
	border-radius: 0;
	overflow: visible;
	background: none;
}

.sp-product .sp-segment--karta label {
	position: relative;
	isolation: isolate;
	flex: none;
	min-width: 0;
	min-height: 34px;
	padding: 5px 13px;
	font-size: 15px;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--sp-ink);
	background: none;
	border: 0;
	--fill: var(--sp-soft);
}

.sp-product .sp-segment--karta label::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--fill);
	clip-path: polygon(.7% 4%, 18% 1%, 36% 2%, 63% 0, 85% 1%, 99.2% 4%, 100% 33%, 99.6% 72%, 99% 96%, 77% 100%, 49% 98%, 21% 100%, 1% 96%, 0 65%);
}

.sp-product .sp-segment--karta label:has(input:checked) {
	color: var(--sp-surface);
	background: none;
	--fill: var(--sp-action);
}

.sp-product .sp-segment--karta label.is-niedostepny {
	color: var(--sp-disabled-text);
}

.sp-product .sp-segment--karta label.is-niedostepny:has(input:checked) {
	color: var(--sp-ink);
	--fill: var(--sp-disabled-bg);
}

@media (hover: hover) and (pointer: fine) {
	.sp-product .sp-segment--karta label:hover:not(:has(input:checked)) {
		background: none;
		--fill: var(--sp-line);
	}
}

.sp-product .sp-segment--karta label:has(input:focus-visible) {
	outline: 1px solid var(--sp-action);
	outline-offset: 2px;
}

.sp-product .sp-segment--karta.sp-segment--miniatury label {
	padding: 4px;
}

.sp-product .sp-segment--karta.sp-segment--miniatury img {
	width: 34px;
	height: 34px;
	max-width: 100%;
	aspect-ratio: 1;
}

/* Wąska karta (telefon, 2 kolumny): .sp-product jest kontenerem zapytań - pola ciaśniej. */
@container (max-width: 200px) {
	.sp-product .sp-segment--karta label {
		padding-inline: 9px;
		font-size: 14px;
	}
}

/* Okno zdjęcia w karcie bez własnego tła. Białe pole z falistą krawędzią rysuje .sp-product::before
   (clip-path --sp-fala-karty, boki wcięte o 1-2 px); prostokątne białe okno na całą szerokość
   wystawało przy zdjęciu poza falę po lewej i prawej stronie. */
.sp-product .sp-product-window {
	background: transparent;
}

/* Cena promocyjna: Woo owija ją w <ins>, a przeglądarka podkreśla <ins> domyślnie. W makiecie
   cena po obniżce stoi bez podkreślenia obok przekreślonej ceny. Karta, strona produktu, koszyk. */
.price ins,
.sp-product-price ins,
.pp-cena ins {
	text-decoration: none;
	background: none;
}

/* Najniższa cena z 30 dni przy promocji - krój i kolor wiersza jednostkowego z makiety
   (.sp-product-unit: 15 px, --sp-muted). Bez promocji wiersz jest pusty i nie zajmuje miejsca. */
.sp-product-omnibus,
.pp-omnibus {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--sp-muted);
	font-variant-numeric: tabular-nums;
}

.sp-product-omnibus:empty,
.pp-omnibus[hidden] {
	display: none;
}

/* Cena za kg w wierszu ceny karty (decyzja właściciela 13.09.2026) - wygląd dopisku ceny za kg
   ze strony produktu (makieta produkt.html: .pp-cena span, 15 px, --sp-muted, 8 px odstępu).
   Bez wagi dopisek jest pusty i znika. */
/* Wiersz ceny jako flex z zawijaniem: odstęp 8 px między ceną a ceną za kg, a gdy w wąskiej
   karcie cena za kg schodzi do drugiej linii, stoi równo z ceną (margines dawał wcięcie). */
.sp-product-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--sp-s1);
}

.sp-product-price .sp-product-unit {
	display: inline;
	min-height: 0;
	margin-left: 0;
	font-size: 15px;
	line-height: inherit;
}

.sp-product-price .sp-product-unit:empty {
	display: none;
}

/* Przycisk w stopce karty: tekst na środku także wtedy, gdy łamie się na dwa wiersze. */
.sp-product-foot .sp-button {
	justify-content: center;
	text-align: center;
}

ul.products.lst-siatka li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	padding: 0;
	list-style: none;
}

/* Clearfix Woo nie ma czego czyścić w siatce, a tworzy puste komórki. */

ul.products.lst-siatka::before,
ul.products.lst-siatka::after {
	content: none;
	display: none;
}

/* Karta wypełnia komórkę na całej wysokości, żeby stopki się równały. */

ul.products.lst-siatka li.product > .sp-product {
	height: 100%;
}


/* ── Formularze WooCommerce w wyglądzie .sp-field ──
   Kasa, adresy i dane konta renderują pola znacznikami Woo (p.form-row,
   .input-text). Arkusz układu Woo jest zdjęty (inc/woocommerce.php), więc
   pola dostają tu ten sam wygląd co .sp-field, a rzędy siatkę zamiast float. */

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--sp-s3);
}

.woocommerce form .form-row {
	grid-column: 1 / -1;
	display: block;
	margin: 0 0 var(--sp-s3);
	padding: 0;
}

.woocommerce form .form-row-first {
	grid-column: 1;
}

.woocommerce form .form-row-last {
	grid-column: 2;
}

@media (max-width: 480px) {

	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-address-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last {
		grid-column: 1 / -1;
	}
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 7px;
	font-size: 17px;
	line-height: 1.3;
}

.woocommerce form .form-row .required {
	color: var(--sp-action);
	text-decoration: none;
	border: 0;
}

.woocommerce form .form-row .optional {
	color: var(--sp-muted);
}

.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 11px 13px;
	font: inherit;
	font-size: 18px;
	color: var(--sp-ink);
	background-color: var(--sp-pole);
	border: 1px solid var(--sp-field-line);
	border-radius: var(--sp-radius);
	box-shadow: none;
}

.woocommerce form .form-row textarea {
	min-height: 120px;
	resize: vertical;
}

.woocommerce form .form-row select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	cursor: pointer;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23735F38' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

.woocommerce form .form-row .input-text:focus-visible,
.woocommerce form .form-row select:focus-visible,
.woocommerce form .form-row textarea:focus-visible {
	outline: 1px solid var(--sp-action);
	outline-offset: -1px;
	border-color: var(--sp-action);
}

.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--sp-error);
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
	margin: 0 0 var(--sp-s3);
	font-size: 26px;
	font-weight: 400;
}

#ship-to-different-address label,
.woocommerce form .woocommerce-form__label-for-checkbox {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 18px;
	cursor: pointer;
}

#ship-to-different-address input,
.woocommerce form .woocommerce-form__label-for-checkbox input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--sp-ink);
}

/* ── Kasa: siatka zgodna z tym, co faktycznie renderujemy ──
   Dzieci formularza: .ks-dane, .ks-zamowienie, .ks-dostawa-slot i #payment
   (w nim wybór płatności i złożenie zamówienia - jeden fragment AJAX Woo). */

.ks {
	grid-template-areas: "dane zamowienie" "dane dostawa" "dane platnosc";
}

.ks-dostawa-slot {
	grid-area: dostawa;
	min-width: 0;
}

.ks > #payment {
	grid-area: platnosc;
	min-width: 0;
}

@media (max-width: 900px) {

	.ks {
		grid-template-areas: "dane" "dostawa" "zamowienie" "platnosc";
	}
}

.woocommerce-checkout #payment {
	padding: 0;
	background: none;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	display: grid;
	gap: 10px;
	margin: 0 0 var(--sp-s3);
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-checkout #payment div.payment_box {
	margin: 8px 0 0;
	padding: 14px 16px;
	font-size: 16px;
	background: var(--sp-soft);
	border-radius: var(--sp-radius);
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce-checkout #payment .ks-zloz {
	margin-top: var(--sp-s3);
}

.woocommerce-checkout #payment #place_order {
	float: none;
	width: 100%;
}

.woocommerce-privacy-policy-text {
	margin: 0 0 var(--sp-s3);
	font-size: 15px;
	line-height: 1.5;
	color: var(--sp-muted);
}

/* ── Kasa: odstępy zmierzone na stagingu ──
   Komunikat o kuponie stykał się z nagłówkiem danych (0 px), a nagłówki
   zestawów dostawy i płatności miały pod sobą 48 px - na telefonie czytało
   się to jak dziura. */

.woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon {
	margin-bottom: var(--sp-s4);
}

/* Przypomnienie o logowaniu nad kodem rabatowym: dwa komunikaty w stosie z odstępem 16 px
   (stykały się ramkami), bez kodu rabatowego - 32 px do danych jak on. Rozwinięty formularz
   logowania to panel jak formularz kodu rabatowego. Selektory z .woocommerce, bo audyt niżej
   (.woocommerce form.login) zeruje ramkę i marginesy formularzy logowania na stronach konta. */
.woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce form.woocommerce-form-login {
	margin-bottom: var(--sp-s2);
}

.woocommerce-form-login-toggle:not(:has(~ .woocommerce-form-coupon-toggle, ~ .sp-darmowa:not([hidden]))),
.woocommerce-checkout .woocommerce form.woocommerce-form-login:not(:has(~ .woocommerce-form-coupon-toggle, ~ .sp-darmowa:not([hidden]))) {
	margin-bottom: var(--sp-s4);
}

/* Na całą szerokość kasy jak komunikaty nad nim (uwaga właściciela 14.09.2026 - 620 px wyglądało na urwane). */
.woocommerce-checkout .woocommerce form.woocommerce-form-login {
	padding: var(--sp-s3);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	background: var(--sp-surface);
}

/* Stos komunikatów Woo (np. „dodano do koszyka” nad kodem rabatowym): 16 px między ramkami,
   32 px do treści, gdy pod spodem nie ma już komunikatu. Pusta obudowa nic nie zajmuje. */
.woocommerce-notices-wrapper > .sp-notice + .sp-notice {
	margin-top: var(--sp-s2);
}

/* Komunikat Woo nad paskiem darmowej dostawy w koszyku (np. „kupon nie dotyczy produktów”): obudowa
   komunikatów nie ma marginesu, więc ramki stykały się. Ten sam odstęp 16 px co w stosie. */
.woocommerce-notices-wrapper:has(> .sp-notice) + .sp-notice:not([hidden]) {
	margin-top: var(--sp-s2);
}

.woocommerce-checkout .woocommerce-notices-wrapper:has(> .sp-notice) {
	margin-bottom: var(--sp-s2);
}

.woocommerce-checkout .woocommerce-notices-wrapper:has(> .sp-notice):not(:has(~ .woocommerce-form-login-toggle, ~ .woocommerce-form-coupon-toggle, ~ .sp-darmowa:not([hidden]))) {
	margin-bottom: var(--sp-s4);
}

/* ── Kasa: kod rabatowy ──
   Formularz zostaje szablonem Woo (checkout.js szuka form.checkout_coupon, #coupon_code
   i przycisku apply_coupon), więc pole i przycisk dostają wygląd .sp-field i
   .sp-button--secondary tutaj. Na stagingu przycisk był szary 40 px, a pole leżało nad nim.
   Pokazywanie i chowanie robi checkout.js stylem w linii, który wygrywa z display:grid. */
.woocommerce-checkout form.checkout_coupon {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: stretch;
	padding: var(--sp-s3);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	background: var(--sp-surface);
}

.woocommerce-checkout form.checkout_coupon .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.woocommerce-checkout form.checkout_coupon .clear {
	display: none;
}

.woocommerce-checkout form.checkout_coupon .input-text {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: 48px;
	padding: 11px 13px;
	background: var(--sp-pole);
	border: 1px solid var(--sp-field-line);
	border-radius: var(--sp-radius);
	font-size: 18px;
}

.woocommerce-checkout form.checkout_coupon .input-text:focus-visible {
	outline: 1px solid var(--sp-action);
	outline-offset: -1px;
	border-color: var(--sp-action);
}

.woocommerce-checkout form.checkout_coupon .input-text.has-error,
.woocommerce-checkout form.checkout_coupon .input-text[aria-invalid="true"] {
	border-color: var(--sp-error);
}

.woocommerce-checkout form.checkout_coupon button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 23px;
	font-size: 18px;
	line-height: 1.2;
	background: transparent;
	color: var(--sp-action);
	border: 1px solid var(--sp-action);
	border-radius: var(--sp-radius);
	transition: background var(--sp-fast), color var(--sp-fast), border-color var(--sp-fast);
}

@media (hover: hover) and (pointer: fine) {
	.woocommerce-checkout form.checkout_coupon button.button:hover {
		background: var(--sp-soft);
		border-color: var(--sp-ink);
		color: var(--sp-ink);
	}
}

.woocommerce-checkout form.checkout_coupon .coupon-error-notice {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 15px;
	color: var(--sp-error);
}

@media (max-width: 520px) {
	.woocommerce-checkout form.checkout_coupon {
		grid-template-columns: 1fr;
	}
}

/* „Usuń” przy kodzie w podsumowaniu koszyka i kasy: cichy link obok kwoty (nawiasy Woo zdejmuje filtr). */
.woocommerce-remove-coupon {
	margin-left: 10px;
	font-size: 15px;
	color: var(--sp-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
	.woocommerce-remove-coupon:hover {
		color: var(--sp-error);
	}
}

.ks .sp-opcje > legend.sp-head--linia {
	margin-bottom: var(--sp-s3);
}

/* ── Kasa: płatność i komunikaty, zmierzone w lokalnym Playground ──
   woocommerce.css daje elementom listy metod line-height 2, więc opis przelewu
   miał 28 px na wiersz przy 14 px czcionki. Pod listą sumowały się trzy
   marginesy po 24 px. Przycisk w komunikacie miał szare tło Woo. */

.woocommerce-checkout #payment ul.payment_methods {
	margin-bottom: 0;
}

.woocommerce-checkout #payment ul.payment_methods li,
.woocommerce-checkout #payment .sp-opcja-tresc small {
	line-height: 1.45;
}

.woocommerce-checkout #payment .ks-zloz {
	margin-top: var(--sp-s4);
}

.ks-zgody .woocommerce-terms-and-conditions-wrapper {
	display: grid;
	gap: 12px;
}

.ks-zgody .form-row.validate-required {
	margin: 0;
}

/* Specyficzność podniesiona: reguła Woo z klasą .woocommerce na body (0,2,1)
   wygrywała z samym .sp-notice .button (0,2,0) i przycisk zostawał szary. */
.woocommerce .sp-notice a.button,
.woocommerce .sp-notice a.wc-forward,
.sp-notice .button,
.sp-notice .wc-forward {
	float: none;
	display: inline;
	margin: 0 0 0 6px;
	padding: 0;
	font: inherit;
	color: var(--sp-action);
	background: none;
	border: 0;
	border-radius: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce .sp-notice a.button:hover,
.woocommerce .sp-notice a.wc-forward:hover,
.sp-notice .button:hover,
.sp-notice .wc-forward:hover {
	color: var(--sp-ink);
	background: none;
}

/* Zgoda na regulamin: w etykiecie są trzy elementy - pole, tekst i gwiazdka poza
   tekstem - więc układ flex rozrywał je na kolumny, a na telefonie tekst spadał
   pod kwadrat. Pole wyjęte na lewo, tekst z gwiazdką płynie razem obok niego. */

.woocommerce .ks-zgody label.woocommerce-form__label-for-checkbox {
	position: relative;
	display: block;
	padding-left: 30px;
	font-size: 17px;
	line-height: 1.45;
}

.woocommerce .ks-zgody label.woocommerce-form__label-for-checkbox input {
	position: absolute;
	top: 3px;
	left: 0;
}

/* ── Przyciski z klasami WooCommerce i naszymi ──
   Szablony zostawiają klasy Woo (button, alt, checkout-button), bo opierają się
   na nich jego skrypty. Reguła Woo .woocommerce :where(…) a.button.alt ma
   specyficzność (0,3,1) i dawała fioletowe tło, zaokrąglenie 3 px, grubość 700
   i display inline-block - strzałka spadała do drugiej linii. Wartości poniżej
   zmierzone na czystym .sp-button--green i --secondary (strona 404). */

.woocommerce a.sp-button.button,
.woocommerce button.sp-button.button,
.woocommerce a.sp-button.button.alt,
.woocommerce button.sp-button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 23px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--sp-radius);
	-webkit-font-smoothing: auto;
}

.woocommerce a.sp-button--full.button,
.woocommerce button.sp-button--full.button {
	display: flex;
	width: 100%;
}

.woocommerce a.sp-button--green.button,
.woocommerce button.sp-button--green.button,
.woocommerce a.sp-button--green.button.alt,
.woocommerce button.sp-button--green.button.alt {
	color: var(--sp-surface);
	background-color: var(--sp-ink);
}

.woocommerce a.sp-button--green.button:hover,
.woocommerce button.sp-button--green.button:hover,
.woocommerce a.sp-button--green.button.alt:hover,
.woocommerce button.sp-button--green.button.alt:hover {
	color: var(--sp-surface);
	background-color: var(--sp-ink-hover);
}

.woocommerce a.sp-button--secondary.button,
.woocommerce button.sp-button--secondary.button {
	color: var(--sp-action);
	background-color: transparent;
	border-color: var(--sp-action);
}

/* ── Koszyk: blok dostawy w podsumowaniu ──
   Zestaw z kasy przeniósł do karty podsumowania nagłówek h2 tej samej
   wielkości co „Podsumowanie" (26 px), linię i 48 px marginesu, a nad sobą
   miał 0 px od „Wartość produktów". W karcie to etykieta, nie drugi rozdział. */

.kz-suma .ks-dostawa {
	margin: var(--sp-s3) 0;
}

.kz-suma .ks-dostawa > legend.sp-head--linia {
	margin: 0 0 10px;
	padding: 0;
	border: 0;
}

/* Linię w .sp-head--linia rysuje samo h2 (padding-bottom + border-bottom). */
.kz-suma .ks-dostawa > legend h2 {
	margin: 0;
	padding-bottom: 0;
	border-bottom: 0;
	font-size: 13px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--sp-muted);
}

.kz-suma .kz-rabat {
	margin-bottom: var(--sp-s3);
}

/* ── Karta produktu, zmierzone w lokalnym podglądzie ── */

/* Reguła makiety .pp-cena span stylowała dopisek z ceną za kilogram, ale łapała
   każdy span ceny Woo - kwotę, „zł” i myślnik - dając 15 px szarości i 8 px
   marginesu. Kwoty wracają do rozmiaru ceny. */
.pp-cena span {
	margin-left: 0;
	font-size: inherit;
	color: inherit;
}

/* W przedziale cen Woo oznacza aria-hidden także same kwoty, więc myślnik
   rozpoznajemy po braku klasy. */
.pp-cena > span[aria-hidden]:not([class]) {
	margin: 0 0.25em;
	color: var(--sp-muted);
}

/* Woo daje formularzowi 2em marginesu dolnego - przed SKU zostawała dziura.
   Reguła Woo .woocommerce div.product form.cart ma (0,3,2), stąd pełny łańcuch. */
.woocommerce div.product .pp-zakup form.cart {
	margin-bottom: 0;
}

/* Wybór wariantu: etykieta nad polem, link czyszczenia bez 48 px wysokości
   odnośnika systemowego - tabela miała 150 px i zostawiała dziurę. */
.pp-zakup table.variations {
	width: 100%;
	margin: 0 0 var(--sp-s2);
	border: 0;
	border-collapse: collapse;
}

.pp-zakup table.variations tbody,
.pp-zakup table.variations tr,
.pp-zakup table.variations th,
.pp-zakup table.variations td {
	display: block;
	padding: 0;
	text-align: left;
	background: none;
}

.pp-zakup table.variations th label {
	display: block;
	margin-bottom: 7px;
	font-size: 17px;
	font-weight: 400;
}

.pp-zakup table.variations .sp-field {
	margin-bottom: 0;
}

/* Woo ukrywa link przez visibility:hidden, więc pod polem zostawało puste
   miejsce na wysokość linku. Link stoi teraz w wierszu etykiety, po prawej. */
.pp-zakup table.variations {
	position: relative;
}

.pp-zakup table.variations .reset_variations {
	position: absolute;
	top: 0;
	right: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	font-size: 16px;
}

.pp-zakup .woocommerce-variation-price .price {
	margin: var(--sp-s2) 0 0;
	font-size: 26px;
	font-variant-numeric: tabular-nums;
}

/* Ilość i przycisk: w wąskiej kolumnie przycisk schodzi pod ilość, zamiast
   łamać „Dodaj do koszyka” na trzy linie. */
.pp-akcja {
	flex-wrap: wrap;
}

.pp-akcja .sp-button {
	flex: 1 1 170px;
	white-space: nowrap;
}

.pp-zakup .product_meta {
	display: grid;
	gap: 4px;
	margin-top: var(--sp-s2);
	font-size: 15px;
	color: var(--sp-muted);
}

.pp-zakup .product_meta a {
	color: var(--sp-action);
}

/* Tabela atrybutów w wyglądzie .sp-table. Selektory z .woocommerce, bo reguła
   Woo .woocommerce table.shop_attributes th ma wyższą specyficzność. */
.woocommerce .pp-info table.woocommerce-product-attributes {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 17px;
}

.woocommerce .pp-info table.woocommerce-product-attributes th,
.woocommerce .pp-info table.woocommerce-product-attributes td {
	padding: 13px 14px;
	border: 0;
	border-bottom: 1px solid var(--sp-line);
	background: transparent;
	font-weight: 400;
	font-style: normal;
	text-align: left;
}

.woocommerce .pp-info table.woocommerce-product-attributes th {
	width: 35%;
	color: var(--sp-muted);
}

.woocommerce .pp-info table.woocommerce-product-attributes td p {
	margin: 0;
	padding: 0;
}

.woocommerce section.related.products > h2,
.woocommerce section.up-sells.products > h2 {
	margin: var(--sp-section) 0 var(--sp-s3);
	font-size: clamp(30px, 3.2vw, 40px);
	font-weight: 400;
}

/* Karta w wąskiej kolumnie (dwie karty obok siebie na telefonie): przycisk
   łamał etykietę na dwie linie. Ciaśniejsze wcięcia tylko wtedy, gdy karta
   jest węższa niż 200 px - .sp-product jest kontenerem zapytań. */
@container (max-width: 200px) {

	.sp-product-body,
	.sp-product-foot {
		padding-left: var(--sp-s2);
		padding-right: var(--sp-s2);
	}

	/* Przycisk w karcie nie ma klasy .button - karta podaje Woo własną listę
	   klas - więc selektor opiera się na .sp-button. Na stagingu reguła z
	   .button nie łapała i etykiety łamały się do lewej przy 23 px wcięcia. */
	.sp-product-foot .sp-button {
		padding: 10px 8px;
		font-size: 16px;
		line-height: 1.2;
		text-align: center;
	}

	.sp-product-price {
		font-size: 22px;
	}
}

/* Przedział cen wariantów („15,99 zł – 25,99 zł”) ma 180-200 px, a kolumna
   ceny w karcie na telefonie 131 px. Reguła makiety trzyma cenę w jednej linii
   dla rytmu rzędu, ale przy przedziale tekst wychodził poza kartę. Przedział
   łamie się przy myślniku, pojedyncza kwota zostaje w całości. */
.sp-product-price {
	white-space: normal;
}

.sp-product-price .woocommerce-Price-amount {
	white-space: nowrap;
}

/* ── Listing: sortowanie w wyglądzie pola systemu ──
   woocommerce_catalog_ordering() rysuje nasz loop/orderby.php: formularz
   .lst-sort z gołym selectem. Bez reguł select miał 28 px, bez ramki i tła. */
.lst-sort select {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 11px 42px 11px 13px;
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--sp-pole);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23735F38' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 20px 20px;
	border: 1px solid var(--sp-field-line);
	border-radius: var(--sp-radius);
	font-size: 18px;
	/* Domyślna wysokość wiersza kroju dawała 52 px mimo min-height 48. */
	line-height: 1.2;
	color: var(--sp-ink);
	cursor: pointer;
}

.lst-sort select:focus-visible {
	outline: 1px solid var(--sp-action);
	outline-offset: -1px;
	border-color: var(--sp-action);
}

@media (max-width: 480px) {

	.lst-sort {
		width: 100%;
		min-width: 0;
	}
}

/* ── Strony sklepu w page.php (koszyk, kasa, konto) ──
   .sp-widok ma już górne wcięcie, a .art-glowa dokładała swoje 48 px:
   okruszki stały ok. 45 px niżej niż na listingu. */
.sp-widok > .art-glowa {
	padding-top: 0;
}

/* ── Moje konto: zakładki rysowane znacznikami Woo, zmierzone na stagingu ──
   Adresy, edycja adresu, dane konta i podgląd zamówienia nie mają nadpisań
   szablonów - wygląd dostają tutaj, żeby szablony nie rozjeżdżały się
   z kolejnymi wersjami WooCommerce. */

.mk-tresc > .sp-notice,
.mk-tresc .woocommerce-notices-wrapper > .sp-notice {
	margin-bottom: var(--sp-s3);
}

.mk-tresc > p {
	margin: 0 0 var(--sp-s3);
}

/* Woo podświetla numer, datę i status zamówienia znacznikiem mark (żółte tło). */
.mk-tresc mark {
	padding: 0;
	color: inherit;
	background: none;
}

/* Tylko nagłówki Woo - powitanie kokpitu i nagłówek listy zamówień mają swoje. */
.mk-tresc form > h2,
.mk-tresc form > h3,
.mk-tresc .woocommerce-order-details__title,
.mk-tresc .woocommerce-customer-details > h2 {
	margin: 0 0 var(--sp-s3);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.2;
}

/* Adresy: dwa pola obok siebie, na telefonie jedno pod drugim. Arkusz układu Woo
   jest zdjęty, więc .col2-set nie pływa - siatka ustawia kolumny. */
.mk-tresc .woocommerce-Addresses,
.mk-tresc .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-s3);
}

@media (max-width: 640px) {

	.mk-tresc .woocommerce-Addresses,
	.mk-tresc .woocommerce-columns--addresses {
		grid-template-columns: minmax(0, 1fr);
	}
}

.mk-tresc .woocommerce-Address,
.mk-tresc .woocommerce-column {
	width: auto;
	float: none;
	padding: var(--sp-s3);
	background: var(--sp-pole);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
}

.mk-tresc .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px var(--sp-s2);
	margin-bottom: var(--sp-s2);
}

.mk-tresc .woocommerce-Address-title h2,
.mk-tresc .woocommerce-Address-title h3,
.mk-tresc .woocommerce-column__title {
	margin: 0;
	font-size: 22px;
}

/* Clearfix Woo (::before/::after) był w nagłówku flex dodatkowymi elementami
   i odsuwał tytuł o 18 px od tekstu adresu; w siatce zająłby komórkę.
   Reguła Woo ma (0,3,1), stąd pełny łańcuch z .woocommerce. */
.woocommerce .mk-tresc .woocommerce-Addresses .woocommerce-Address-title::before,
.woocommerce .mk-tresc .woocommerce-Addresses .woocommerce-Address-title::after,
.woocommerce .mk-tresc .woocommerce-MyAccount-content .woocommerce-Addresses::before,
.woocommerce .mk-tresc .woocommerce-MyAccount-content .woocommerce-Addresses::after,
.woocommerce .mk-tresc .woocommerce-customer-details .woocommerce-columns--addresses::before,
.woocommerce .mk-tresc .woocommerce-customer-details .woocommerce-columns--addresses::after,
.woocommerce .mk-tresc.woocommerce-MyAccount-content .woocommerce-Addresses::before,
.woocommerce .mk-tresc.woocommerce-MyAccount-content .woocommerce-Addresses::after {
	content: none;
	display: none;
}

.mk-tresc .woocommerce-Address-title .edit {
	font-size: 16px;
	color: var(--sp-action);
}

.woocommerce .mk-tresc address {
	margin: 0;
	padding: 0;
	font-style: normal;
	line-height: 1.6;
	border: 0;
}

/* Dane klienta w podglądzie zamówienia: pole jak adresy, zamiast ramki Woo. */
.woocommerce .mk-tresc .woocommerce-customer-details > address,
.woocommerce .mk-tresc .woocommerce-column > address {
	padding: var(--sp-s3);
	background: var(--sp-pole);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
}

.woocommerce .mk-tresc .woocommerce-column > address {
	padding: 0;
	background: none;
	border: 0;
}

.woocommerce .mk-tresc .woocommerce-customer-details--phone,
.woocommerce .mk-tresc .woocommerce-customer-details--email {
	margin: 6px 0 0;
}

/* Tabela szczegółów zamówienia w wyglądzie .sp-table. */
.woocommerce .mk-tresc table.shop_table {
	margin: 0 0 var(--sp-s3);
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	font-size: 17px;
}

.woocommerce .mk-tresc table.shop_table th,
.woocommerce .mk-tresc table.shop_table td {
	padding: 13px 14px;
	border: 0;
	border-bottom: 1px solid var(--sp-line);
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	vertical-align: top;
}

.woocommerce .mk-tresc table.shop_table thead th {
	background: #FAF8F4;
	font-size: 13px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--sp-muted);
}

.woocommerce .mk-tresc table.shop_table tfoot th {
	color: var(--sp-muted);
}

.woocommerce .mk-tresc table.shop_table .product-total,
.woocommerce .mk-tresc table.shop_table tfoot td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.mk-tresc .woocommerce-order-details,
.mk-tresc .woocommerce-customer-details {
	margin: 0 0 var(--sp-s4);
}

/* Przyciski Woo w koncie (zapis danych konta) - bez klas systemu dostawały szare tło Woo
   i 40 px. Reguła Woo ma (0,2,1). Zapis adresu i „Zamów ponownie” mają już klasy .sp-button
   w nadpisanych szablonach. */
.woocommerce .mk-tresc form button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 23px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--sp-surface);
	background-color: var(--sp-ink);
	border: 1px solid transparent;
	border-radius: var(--sp-radius);
}

.woocommerce .mk-tresc form button.button:hover {
	color: var(--sp-surface);
	background-color: var(--sp-ink-hover);
}

.mk-tresc .woocommerce-address-fields > p:last-child,
.mk-tresc .woocommerce-EditAccountForm > p:last-of-type {
	margin: var(--sp-s3) 0 0;
}

/* Zmiana hasła: ramka pola systemu zamiast domyślnej ramki przeglądarki. */
.mk-tresc fieldset {
	margin: var(--sp-s4) 0 var(--sp-s3);
	padding: var(--sp-s3);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
}

.mk-tresc fieldset legend {
	padding: 0 8px;
	font-size: 20px;
}

.mk-tresc #account_display_name_description em {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	font-style: normal;
	color: var(--sp-muted);
}

/* Pokaż hasło: reguły tego przycisku siedzą w zdjętym arkuszu układu Woo,
   więc zostawał goły przycisk 6 px pod polem. Ikona oka z palety akcji;
   Woo przełącza klasę .display-password. Działa też w logowaniu i w kasie. */
.woocommerce form .password-input {
	position: relative;
	display: block;
}

.woocommerce form .password-input .input-text {
	padding-right: 52px;
}

.woocommerce form .show-password-input {
	position: absolute;
	top: 0;
	right: 0;
	width: 48px;
	height: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23735F38' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
	border: 0;
	border-radius: 0;
}

.woocommerce form .show-password-input.display-password {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23735F38' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 2 20 20'/%3E%3Cpath d='M6.7 6.7C3.6 8.6 2 12 2 12s3 7 10 7c2 0 3.8-.6 5.3-1.5'/%3E%3Cpath d='M10.6 5.1c.5-.1.9-.1 1.4-.1 7 0 10 7 10 7a13 13 0 0 1-1.7 2.7'/%3E%3Cpath d='M14.1 14.2a3 3 0 0 1-4.2-4.2'/%3E%3C/svg%3E");
}

.woocommerce form .show-password-input::after {
	content: none;
}

.woocommerce form .show-password-input:focus-visible {
	outline: 1px solid var(--sp-action);
	outline-offset: -4px;
}

/* ── Opinie: makieta nie ma wzoru, więc formularz dostaje język pól systemu ──
   Selektory z #review_form #respond, bo reguły Woo mają dwa identyfikatory. */

.pp-info .woocommerce-Reviews {
	padding-top: var(--sp-s3);
}

.woocommerce .pp-info #reviews h2.woocommerce-Reviews-title {
	margin: 0 0 var(--sp-s2);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.25;
}

.woocommerce .pp-info #reviews .woocommerce-noreviews {
	margin: 0 0 var(--sp-s3);
	color: var(--sp-muted);
}

.woocommerce .pp-info #reviews #comments ol.commentlist {
	margin: 0 0 var(--sp-s4);
	padding: 0;
	list-style: none;
}

.woocommerce .pp-info #reviews #comments ol.commentlist li {
	margin: 0;
	padding: var(--sp-s3) 0;
	border-bottom: 1px solid var(--sp-line);
}

.woocommerce .pp-info #reviews #comments ol.commentlist li img.avatar {
	width: 44px;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 50%;
}

.woocommerce .pp-info #reviews #comments ol.commentlist li .comment-text {
	margin-left: 60px;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.woocommerce .pp-info #reviews .star-rating {
	color: var(--sp-gold);
}

.woocommerce .pp-info #review_form #respond {
	padding: var(--sp-s4) 0 0;
	border-top: 1px solid var(--sp-line);
}

.woocommerce .pp-info #review_form #respond .comment-reply-title {
	display: block;
	margin: 0 0 var(--sp-s3);
	font-size: 20px;
	line-height: 1.3;
}

.woocommerce .pp-info #review_form #respond form > p,
.woocommerce .pp-info #review_form #respond form > div {
	margin: 0 0 var(--sp-s3);
}

.woocommerce .pp-info #review_form #respond label {
	display: block;
	margin-bottom: 7px;
	font-size: 17px;
}

.woocommerce .pp-info #review_form #respond .required {
	color: var(--sp-action);
}

.woocommerce .pp-info #review_form #respond input[type="text"],
.woocommerce .pp-info #review_form #respond input[type="email"],
.woocommerce .pp-info #review_form #respond input[type="url"],
.woocommerce .pp-info #review_form #respond textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 11px 13px;
	background: var(--sp-pole);
	border: 1px solid var(--sp-field-line);
	border-radius: var(--sp-radius);
	font-size: 18px;
}

.woocommerce .pp-info #review_form #respond textarea {
	min-height: 160px;
	resize: vertical;
}

.woocommerce .pp-info #review_form #respond input:focus-visible,
.woocommerce .pp-info #review_form #respond textarea:focus-visible {
	outline: 1px solid var(--sp-action);
	outline-offset: -1px;
	border-color: var(--sp-action);
}

.woocommerce .pp-info #review_form #respond .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.woocommerce .pp-info #review_form #respond .comment-form-cookies-consent label {
	margin: 0;
	font-size: 16px;
}

/* Gwiazdki: 28 px i odstęp, żeby dało się w nie trafić palcem. */
.woocommerce .pp-info #review_form #respond p.stars {
	margin: 0;
}

.woocommerce .pp-info #review_form #respond p.stars a {
	margin-right: 8px;
	font-size: 28px;
	color: var(--sp-gold);
}

.woocommerce .pp-info #respond input#submit.sp-button {
	min-height: 48px;
	padding: 12px 23px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--sp-surface);
	background: var(--sp-ink);
	border: 1px solid transparent;
	border-radius: var(--sp-radius);
}

.woocommerce .pp-info #respond input#submit.sp-button:hover {
	background: var(--sp-ink-hover);
}

/* ── Opis produktu z edytora, zmierzony na stagingu ──
   Treść przyszła z UX Buildera: nagłówki h1-h4 jako ozdobniki, akapity
   z wpisanym text-align: justify, listy bez wcięcia. Na telefonie wyjustowany
   akapit rozrywał słowa wielkimi odstępami, a h1 miał 42 px - skalę sprowadzamy
   do nagłówków sekcji karty. !important tylko przy wyrównaniu, bo stoi ono
   w atrybucie style akapitu. */

/* Akapity opisu na całą szerokość panelu (decyzja właściciela 14.09.2026) - przy 68 znakach
   po prawej zostawała pusta przerwa obok nagłówków na pełną szerokość. */
.pp-info [role="tabpanel"] p {
	max-width: none;
}

/* Opis zaczynał się tuż pod linią zakładek. Panel opinii ma własne wcięcie
   (.woocommerce-Reviews), a tabela atrybutów swoje wiersze. */
.pp-info #tab-description {
	padding-top: var(--sp-s3);
}

/* ── Strona produktu na szablonach Woo ──
   Szablony wróciły do znaczników WooCommerce (podsumowanie, zakładki, pole ilości), więc
   reguły woocommerce.css znów je łapią. Zdejmujemy tylko to, co zmieniało wygląd systemu -
   działanie zostaje przy Woo. Selektory mają specyficzność reguł Woo. */
.woocommerce div.product div.summary.pp-zakup {
	margin-bottom: 0;
}

.woocommerce div.product .product_title.pp-nazwa {
	margin-top: 4px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs.sp-tabs {
	margin: 0;
	padding: 0;
	overflow: visible;
	list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs.sp-tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs.sp-tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs.sp-tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs.sp-tabs li {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs.sp-tabs li a {
	padding: 13px 2px;
	font-weight: 400;
	color: var(--sp-muted);
}

.woocommerce div.product .woocommerce-tabs ul.tabs.sp-tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs.sp-tabs li.active a {
	color: var(--sp-ink);
}

.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
}

/* Zakładki są elementem siatki .pp, więc dolny margines ostatniego wiersza opisu nie wychodzi
   już poza sekcję - bez tego pod zakładkami przybywało 24 px (zmierzone na stagingu). */
.pp-info .wc-tab > :last-child,
.pp-info .wc-tab > :last-child > :last-child {
	margin-bottom: 0;
}

/* Pole ilości: Woo daje .qty szerokość 3,631em, a w formularzu produktu float i 4 px marginesu. */
.woocommerce .sp-qty .qty {
	width: 62px;
}

.woocommerce div.product form.cart div.quantity {
	float: none;
	margin: 0;
}

/* Pole ukryte (produkt sprzedawany pojedynczo) nie zajmuje miejsca w rzędzie z przyciskiem;
   pole tylko do odczytu pokazuje samą liczbę. */
.quantity:has(> input[type="hidden"]) {
	display: none;
}

.woocommerce .quantity:not(.sp-qty) .qty[readonly] {
	width: auto;
	min-width: 48px;
	height: 48px;
	border: 0;
	background: none;
	text-align: center;
}

/* Etykieta promocji z zaczepu pętli Woo stoi w wierszu odznak karty. woocommerce.css daje .onsale
   w liście produktów położenie absolutne, koło i ujemne marginesy - wracamy do wyglądu .sp-badge. */
.woocommerce ul.products li.product .sp-product-badges .onsale.sp-badge,
.sp-product-badges .onsale.sp-badge {
	position: static;
	inset: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 4px 8px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.25;
	text-align: left;
	color: var(--sp-action);
	background: transparent;
	border: 1px solid var(--sp-gold);
	border-radius: var(--sp-radius);
	z-index: auto;
}

/* ── Audyt zgodności z systemem (13.09.2026) ──
   Skrypt audytu na stronach sklepu i konta znalazł wartości spoza systemu pochodzące
   z woocommerce.css i select2: szare ramki z zaokrągleniem 5 px wokół formularzy logowania,
   oliwkową cenę produktu, szarą ramkę zdjęcia zastępczego, pole kraju z zaokrągleniem 4 px
   i szarym tekstem, szary tekst pola bramki oraz szare przyciski Woo w szablonach, których
   motyw nie nadpisuje (np. przypomnienie hasła). Zasady: paleta --sp-*, promień 2 px,
   odstępy 8/16/24 px. */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
	color: inherit;
}

/* Karta w listingu: reguła Woo .woocommerce ul.products li.product .woocommerce-placeholder (0,3,1)
   dawała ramkę #f2f2f2 spoza palety - ten sam selektor nadpisuje kolor. */
.woocommerce div.product div.images .woocommerce-product-gallery__image--placeholder,
.woocommerce ul.products li.product .woocommerce-placeholder,
.woocommerce img.woocommerce-placeholder {
	border-color: var(--sp-line);
}

.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box p {
	color: var(--sp-ink);
}

/* Pole wyboru kraju i województwa (select2 z WooCommerce) w wyglądzie .sp-field. */
.select2-container--default .select2-selection--single {
	height: 48px;
	background: var(--sp-pole);
	border: 1px solid var(--sp-field-line);
	border-radius: var(--sp-radius);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 40px 0 13px;
	line-height: 46px;
	font-size: 18px;
	color: var(--sp-ink);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 46px;
	right: 8px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-top-color: var(--sp-action);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--sp-action);
	outline: 1px solid var(--sp-action);
	outline-offset: -1px;
}

.select2-dropdown {
	background: var(--sp-surface);
	border: 1px solid var(--sp-field-line);
	border-radius: var(--sp-radius);
	color: var(--sp-ink);
	font-family: var(--sp-serif);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	min-height: 44px;
	padding: 8px 12px;
	background: var(--sp-pole);
	border: 1px solid var(--sp-field-line);
	border-radius: var(--sp-radius);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--sp-soft);
	color: var(--sp-ink);
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
	background: var(--sp-pole);
	color: var(--sp-ink);
}

/* Przyciski Woo z szablonów, których motyw nie nadpisuje (i z wtyczek) - wygląd przycisku systemu
   zamiast szarego tła i zaokrąglenia 3 px. Przyciski z klasą .sp-button mają własne reguły. */
.woocommerce a.button:not(.sp-button),
.woocommerce button.button:not(.sp-button),
.woocommerce input.button:not(.sp-button),
.woocommerce #respond input#submit:not(.sp-button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 23px;
	font-family: var(--sp-serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--sp-surface);
	background-color: var(--sp-action);
	border: 1px solid transparent;
	border-radius: var(--sp-radius);
}

.woocommerce a.button:not(.sp-button):hover,
.woocommerce button.button:not(.sp-button):hover,
.woocommerce input.button:not(.sp-button):hover,
.woocommerce #respond input#submit:not(.sp-button):hover {
	color: var(--sp-surface);
	background-color: var(--sp-ink);
}

/* ── Logowanie i rejestracja na szablonie Woo ──
   Pola to znów p.form-row > label + input (jak w Woo), a nie label.sp-field > span. Etykieta
   dostaje wygląd .sp-field > span; woocommerce.css daje .form-row 3 px wcięcia i 6 px marginesu,
   etykietom line-height 2, .required czerwień, a .col2-set clearfix ::before/::after, które
   w siatce paneli byłyby dodatkowymi komórkami. */
.woocommerce .mk-panel form .form-row {
	padding: 0;
	margin: 0 0 var(--sp-s3);
}

/* Wiersze z przyciskiem: przycisk jest elementem liniowym, więc w zwykłym akapicie siedział na linii
   bazowej z 8 px zapasu pod spodem. Siatka tylko tu - w wierszach pól przesuwała pole hasła. */
.woocommerce .mk-panel form .form-row.mk-wejscie-akcja,
.woocommerce .mk-panel form .form-row:has(> button) {
	display: grid;
}

/* Pole „Nie wylogowuj mnie” nie może stykać się z przyciskiem - 16 px ze skali systemu. */
.woocommerce .mk-panel form .form-row.mk-wejscie-akcja {
	row-gap: var(--sp-s2);
}

/* Podpowiedź w polu wyboru kraju/województwa (select2) - #444 spoza palety. */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--sp-muted);
}

/* Link „Nie pamiętam hasła” pod przyciskiem - też 16 px, nie przyklejony. */
.woocommerce .mk-panel form .woocommerce-LostPassword {
	margin-top: var(--sp-s2);
}

.woocommerce .mk-panel form .form-row.sp-field > label {
	display: block;
	margin-bottom: 7px;
	font-size: 17px;
	line-height: inherit;
}

.woocommerce .mk-panel form .form-row .required {
	font-weight: 400;
	color: var(--sp-action);
	visibility: visible;
}

.woocommerce .mk-panel form .form-row.mk-wejscie-akcja,
.woocommerce .mk-panel form .woocommerce-LostPassword {
	margin: 0;
}

/* „Nie wylogowuj mnie”: Woo daje etykiecie w .form-row line-height 2 i układ w linii - wracamy do
   siatki .ks-zgoda (w pomiarze przycisk i link zjechały o 7 px). */
.woocommerce .mk-panel form .form-row label.woocommerce-form-login__rememberme {
	display: grid;
	margin: 0;
	line-height: inherit;
}

/* Akcje zamówienia w karcie (z wc_get_account_orders_actions) mają klasy Woo button i alt - reguła
   .sp-button.button.alt przywracała pełny rozmiar 48 px zamiast wariantu małego. */
.woocommerce .mk-zam-stopka a.sp-button--sm.button {
	min-height: 44px;
	padding: 9px 16px;
	font-size: 17px;
}

/* Rejestracja: reguła Woo button.button dawała szare tło zamiast koloru akcji .sp-button. */
.woocommerce .mk-panel form button.button.sp-button:not(.sp-button--green) {
	color: var(--sp-surface);
	background-color: var(--sp-action);
}

.woocommerce .mk-panel form .mk-wejscie-uwaga {
	margin: 0 0 var(--sp-s3);
	font-size: 15px;
	color: var(--sp-muted);
}

.woocommerce .mk-wejscie.col2-set::before,
.woocommerce .mk-wejscie.col2-set::after {
	content: none;
	display: none;
}

.woocommerce .mk-wejscie.col2-set .mk-panel {
	float: none;
	width: auto;
}

/* Sortowanie ma znów klasę woocommerce-ordering, której Woo daje 1em dolnego marginesu -
   na telefonie pasek listingu rósł o 18 px (zmierzone względem stagingu). */
.woocommerce .lst-sort.woocommerce-ordering {
	margin: 0;
}

/* Komunikat „brak w magazynie” w ramce .sp-notice - bez czerwieni Woo. */
.pp-zakup .sp-notice .stock.out-of-stock {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

/* Bez klocków z bloków: wyśrodkowane nagłówki sekcji i podpisy rycin mają zostać wyśrodkowane. */
.pp-info [role="tabpanel"] :is(p, h1, h2, h3, h4, h5, h6, li):not(.klocek *) {
	text-align: left !important;
}

/* Odstępy układu z UX Buildera w zakładce: sekcja, wiersz i linia sumowały
   się do ponad 100 px pustki między blokami opisu na telefonie. */
.pp-info [role="tabpanel"] .fz-section {
	margin-bottom: 0;
}

.pp-info [role="tabpanel"] .fz-row {
	margin-bottom: var(--sp-s3);
}

.pp-info [role="tabpanel"] .fz-divider {
	margin: var(--sp-s3) 0;
}

.pp-info [role="tabpanel"] .fz-col:empty {
	display: none;
}

/* Globalne h1 (−1,2 px) i h2 (−0,5 px) mają odstęp liter dla dużych tytułów - w opisie przy 30 px litery się zlewały. */
.pp-info [role="tabpanel"] h1,
.pp-info [role="tabpanel"] h2 {
	margin: var(--sp-s4) 0 var(--sp-s2);
	font-size: clamp(24px, 2.4vw, 30px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -.2px;
}

.pp-info [role="tabpanel"] h3 {
	margin: var(--sp-s3) 0 var(--sp-s1);
	font-size: 21px;
	font-weight: 400;
	line-height: 1.25;
}

.pp-info [role="tabpanel"] h4,
.pp-info [role="tabpanel"] h5,
.pp-info [role="tabpanel"] h6 {
	margin: var(--sp-s2) 0 var(--sp-s1);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.35;
}

.pp-info [role="tabpanel"] .fz-col > :first-child,
.pp-info [role="tabpanel"] .fz-text > :first-child {
	margin-top: 0;
}

.pp-info [role="tabpanel"] ul,
.pp-info [role="tabpanel"] ol {
	margin: 0 0 var(--sp-s3);
	padding-left: 1.25em;
}

.pp-info [role="tabpanel"] li {
	margin-bottom: 4px;
}

/* Tabele z edytora (dawkowanie): atrybuty width="349" i akapity w komórkach.
   Wygląd .sp-table, szerokość z kolumny, przewijanie w poziomie w razie potrzeby.
   Bez tabel wtyczki Receptura Produktu (.spr-table): display:block i tbody jako osobna tabela
   zwężały ich nagłówek, podpis i paski procentów, a pierwszy wiersz brał wygląd nagłówka (14.09.2026).
   Bez tabel z bloku Tabela (klocki opisu, np. składniki analityczne) - mają własny wygląd w klocki.css. */
.pp-info [role="tabpanel"] table:not(.woocommerce-product-attributes):not(.spr-table):not(.wp-block-table table) {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 var(--sp-s3);
	overflow-x: auto;
	border: 0;
	border-collapse: collapse;
	font-size: 17px;
}

.pp-info [role="tabpanel"] table:not(.woocommerce-product-attributes):not(.spr-table):not(.wp-block-table table) tbody {
	display: table;
	width: 100%;
}

.pp-info [role="tabpanel"] table:not(.woocommerce-product-attributes):not(.spr-table):not(.wp-block-table table) td,
.pp-info [role="tabpanel"] table:not(.woocommerce-product-attributes):not(.spr-table):not(.wp-block-table table) th {
	width: auto;
	padding: 11px 14px;
	border: 0;
	border-bottom: 1px solid var(--sp-line);
	text-align: left;
	vertical-align: top;
}

.pp-info [role="tabpanel"] table:not(.woocommerce-product-attributes):not(.spr-table):not(.wp-block-table table) tr:first-child td {
	font-size: 13px;
	letter-spacing: 1.1px;
	color: var(--sp-muted);
}

.pp-info [role="tabpanel"] td p {
	margin: 0;
	text-align: left !important;
}

/* Krótki opis zapisany jako h4 w punktach listy - wracają do tekstu. */
.pp-zakup .woocommerce-product-details__short-description li > h4 {
	margin: 0;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
}

/* Krótki opis w kolumnie zakupu: lista wyrównana do tekstu karty
   i oddzielona od etykiety wariantu. */
.pp-zakup .woocommerce-product-details__short-description {
	margin: var(--sp-s2) 0 var(--sp-s3);
}

.pp-zakup .woocommerce-product-details__short-description ul {
	margin: 0;
	padding-left: 1.1em;
}

.pp-zakup .woocommerce-product-details__short-description li {
	margin-bottom: 2px;
}

.pp-zakup .woocommerce-product-details__short-description > :last-child {
	margin-bottom: 0;
}

/* ── Darmowa dostawa (inc/darmowa-dostawa.php) ──
   Komunikat .sp-notice z paskiem .sp-progress. Kwota, której brakuje, w kolorze tekstu i bez łamania.
   Po osiągnięciu progu pasek w kolorze sukcesu. W kasie pasek stoi w stosie komunikatów nad danymi:
   16 px od przypomnienia o logowaniu i kodu rabatowego, 32 px do formularza. */
.sp-darmowa p {
	margin: 0;
}

.sp-darmowa .sp-darmowa-kwota {
	color: var(--sp-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sp-darmowa .sp-progress {
	margin-top: 10px;
}

.sp-darmowa[data-tone="success"] .sp-progress > span {
	background: var(--sp-success);
}

.sp-darmowa--koszyk,
.sp-darmowa--kasa,
.sp-darmowa--skrot {
	margin-bottom: var(--sp-s4);
}

.woocommerce-form-coupon-toggle:has(~ .sp-darmowa:not([hidden])) {
	margin-bottom: var(--sp-s2);
}

/* Panel koszyka: zwarty komunikat nad przyciskami. Przed progiem sama kwota, po progu sam tytuł
   (inc/darmowa-dostawa.php), mniejsza ikona i ciaśniejsze pole. */
.sp-drawer-foot .sp-darmowa--panel {
	gap: 10px;
	align-items: center;
	margin: 0;
	padding: 10px 12px;
	font-size: 15px;
	line-height: 1.4;
}

.sp-drawer-foot .sp-darmowa--panel .sp-notice-body strong {
	margin: 0;
	font-size: 15px;
}

.sp-drawer-foot .sp-darmowa--panel .sp-progress {
	margin-top: 8px;
}

.sp-drawer-foot .sp-darmowa--panel > .sp-icon {
	width: 18px;
	height: 18px;
	margin-top: 0;
}

/* ── Śledzenie zamówienia ([woocommerce_order_tracking], woocommerce/order/form-tracking.php) ──
   Panel jak w koncie, na całą szerokość treści (jak tekst strony - bez przerwy po prawej): pola obok
   siebie na komputerze, przycisk pod nimi. Wynik (order/tracking.php) to widok zamówienia z konta
   z numerem i powrotem do formularza. */
.sp-sledzenie .sp-sledzenie-opis {
	margin: 0 0 var(--sp-s3);
	font-size: 17px;
	line-height: 1.5;
	color: var(--sp-muted);
}

.sp-sledzenie .sp-sledzenie-pola {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--sp-s3);
}

.woocommerce .sp-sledzenie form .form-row.form-row-first,
.woocommerce .sp-sledzenie form .form-row.form-row-last {
	float: none;
	width: auto;
}

.woocommerce .sp-sledzenie form .form-row.sp-sledzenie-akcja {
	margin: var(--sp-s1) 0 0;
}

.sp-sledzenie-wynik .sp-sledzenie-numer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px var(--sp-s3);
	margin: 0 0 var(--sp-s4);
	font-size: var(--sp-h3);
	line-height: 1.2;
}

.sp-sledzenie-wynik .sp-sledzenie-numer .sp-link {
	font-size: 17px;
}

@media (max-width: 600px) {
	.sp-sledzenie .sp-sledzenie-pola {
		grid-template-columns: 1fr;
	}

	.sp-sledzenie .sp-sledzenie-akcja .sp-button {
		width: 100%;
	}
}

/* ── Stan magazynu na stronie produktu (sp_stan_magazynu_html w inc/woocommerce.php) ──
   Reguły Woo .woocommerce div.product .stock i .out-of-stock (zieleń #77a464, czerwień #a00) mają
   wyższą specyficzność niż .sp-product-stock, stąd dłuższe selektory. Brak w magazynie to komunikat
   .pp-stan - jego tekst wyrównuje reguła .pp-zakup .sp-notice .stock.out-of-stock. */
.woocommerce div.product p.stock.sp-product-stock {
	margin: 0 0 var(--sp-s2);
	font-size: 16px;
}

.woocommerce div.product p.stock.sp-product-stock--in {
	color: var(--sp-success);
}

.woocommerce div.product p.stock.sp-product-stock--low {
	color: var(--sp-warning);
}

.pp-zakup .sp-notice.pp-stan {
	margin-bottom: var(--sp-s3);
}

/* ── Miniatury wariantów na stronie produktu ──
   Sześć kształtów adresówki łamało segment w drugi rząd i pola traciły ramki: segment ma ramkę
   na zewnątrz i kreski tylko z prawej strony pól. Przy miniaturach każde pole ma własną ramkę
   i 8 px odstępu; wybrane - złotą ramkę na tle --sp-soft. */
.pp-zakup .sp-segment--warianty.sp-segment--miniatury {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	overflow: visible;
	border: 0;
	border-radius: 0;
}

.pp-zakup .sp-segment--warianty.sp-segment--miniatury label {
	padding: 6px;
	border: 1px solid var(--sp-field-line);
	border-radius: var(--sp-radius);
}

.pp-zakup .sp-segment--warianty.sp-segment--miniatury label:has(input:checked) {
	border-color: var(--sp-gold);
	box-shadow: inset 0 0 0 1px var(--sp-gold);
}

/* ── Zakładki produktu: zawsze jeden rząd ──
   Karma ma do ośmiu zakładek (Opis, Skład, Składniki analityczne, Dodatki, Dawkowanie, Jak powstaje?,
   Informacje dodatkowe, Wylicz porcję karmy) - na komputerze łamały się w dwa rzędy, na telefonie
   w trzy. Pasek to jeden przewijany rząd na każdej szerokości. Przy sześciu i więcej zakładkach
   mniejszy krój i odstęp, żeby na komputerze mieściły się bez przewijania. Gdy się nie mieszczą,
   brzeg z ukrytymi zakładkami wygasa (klasy z app.js 11d), a wybrana zakładka przewija się do widoku.
   Linia pod paskiem to cień wewnętrzny, bo przewijany kontener ucinał złotą kreskę aktywnej zakładki
   wystającą 1 px pod ramkę. */
.woocommerce div.product .woocommerce-tabs ul.tabs.sp-tabs {
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	border-bottom: 0;
	box-shadow: inset 0 -1px 0 var(--sp-line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs.sp-tabs::-webkit-scrollbar {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs.sp-tabs li {
	flex: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs.sp-tabs li a {
	white-space: nowrap;
}

.woocommerce div.product .woocommerce-tabs ul.tabs.sp-tabs a[role="tab"]::after {
	bottom: 0;
}

.woocommerce div.product .woocommerce-tabs:not(.is-lista) ul.tabs.sp-tabs:has(> li:nth-child(6)) {
	gap: 22px;
}

.woocommerce div.product .woocommerce-tabs:not(.is-lista) ul.tabs.sp-tabs:has(> li:nth-child(6)) li a {
	font-size: 17px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs.sp-tabs.is-ukryte-prawo {
	-webkit-mask-image: linear-gradient(to right, black calc(100% - 56px), transparent);
	mask-image: linear-gradient(to right, black calc(100% - 56px), transparent);
}

.woocommerce div.product .woocommerce-tabs ul.tabs.sp-tabs.is-ukryte-lewo {
	-webkit-mask-image: linear-gradient(to left, black calc(100% - 56px), transparent);
	mask-image: linear-gradient(to left, black calc(100% - 56px), transparent);
}

.woocommerce div.product .woocommerce-tabs ul.tabs.sp-tabs.is-ukryte-lewo.is-ukryte-prawo {
	-webkit-mask-image: linear-gradient(to right, transparent, black 56px, black calc(100% - 56px), transparent);
	mask-image: linear-gradient(to right, transparent, black 56px, black calc(100% - 56px), transparent);
}

/* Zakładki jako rozwijana lista (app.js 11d), gdy nie mieszczą się w jednym rzędzie: przycisk z nazwą
   bieżącej zakładki w wyglądzie pola systemu, pod nim zakładki w kolumnie - wybrana na lnie. */
.sp-tabs-przelacznik {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	margin: 0 0 var(--sp-s3);
	padding: 12px 16px;
	font: inherit;
	font-size: 18px;
	line-height: 1.3;
	color: var(--sp-ink);
	text-align: left;
	background: var(--sp-pole);
	border: 1px solid var(--sp-field-line);
	border-radius: var(--sp-radius);
	cursor: pointer;
	transition: border-color var(--sp-hover) var(--sp-ease);
}

.sp-tabs-przelacznik[hidden] {
	display: none;
}

.sp-tabs-przelacznik .sp-tabs-strzalka {
	flex: none;
	color: var(--sp-action);
	transition: transform var(--sp-hover) var(--sp-ease);
}

.woocommerce-tabs.is-otwarta .sp-tabs-przelacznik .sp-tabs-strzalka {
	transform: rotate(180deg);
}

.sp-tabs-przelacznik:focus-visible {
	outline: 1px solid var(--sp-action);
	outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
	.sp-tabs-przelacznik:hover {
		border-color: var(--sp-gold);
	}
}

.woocommerce-tabs.is-lista.is-otwarta .sp-tabs-przelacznik {
	margin-bottom: 6px;
}

.woocommerce div.product .woocommerce-tabs.is-lista ul.tabs.sp-tabs {
	display: none;
	flex-direction: column;
	gap: 0;
	overflow: visible;
	background: var(--sp-surface);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	box-shadow: none;
	-webkit-mask-image: none;
	mask-image: none;
}

.woocommerce div.product .woocommerce-tabs.is-lista.is-otwarta ul.tabs.sp-tabs {
	display: flex;
}

/* Receptura Produktu wymusza na zakładkach przez !important padding 12px 0, zerowe ramki pozycji
   i margines (docs/07, pkt 3) - tekst listy stał przy krawędzi, bez linii między pozycjami. Tylko te
   właściwości mają tu !important; do zdjęcia, gdy wtyczka usunie swoje. */
.woocommerce div.product .woocommerce-tabs.is-lista ul.tabs.sp-tabs li + li {
	border-top: 1px solid var(--sp-line) !important;
}

.woocommerce div.product .woocommerce-tabs.is-lista ul.tabs.sp-tabs li a {
	display: flex;
	align-items: center;
	min-height: 48px;
	margin: 0 !important;
	padding: 11px 16px !important;
	border: 0 !important;
	white-space: normal;
}

.woocommerce div.product .woocommerce-tabs.is-lista ul.tabs.sp-tabs li.active a {
	background: var(--sp-soft);
}

.woocommerce div.product .woocommerce-tabs.is-lista ul.tabs.sp-tabs a[role="tab"]::after {
	display: none;
}

/* Tabele wpisane w treść (opisy produktów, wpisy, strony) dostają pudełko .sp-table-scroll
   (inc/setup.php) - przewija się tabela, a nie cała strona. */
.sp-table-scroll {
	max-width: 100%;
	margin-bottom: var(--sp-s3);
}

.sp-table-scroll > table {
	margin-bottom: 0;
}