/* Koszyk, kasa i strona po zapłacie (projekt: docs/projekt/Fotoapka Kasa.dc.html)
   Ładuje się po style.css i fotoapka.css (tokeny --fa-*), patrz qg_theme_assets().

   Ekrany projektu: K1 koszyk, K2 dane i płatność, K3 opłacone, K4 kasa na
   telefonie (25.09.2026). Wartości (rozmiary, odstępy, promienie, obroty)
   przepisane z atrybutów style prototypu — przy zmianie porównuj zrzutem na
   1440 i 390 px.

   Te strony (i opłacanie zamówienia, „zapłać”) rysuje szkielet panelu
   (page.php, qg_theme_kasa_w_szkielecie) z klasą .qg-szkielet--kasa. Ten
   arkusz robi z niego górną belkę: logo po lewej, kroki zakupu po prawej,
   stopka pod treścią. Pasek boczny panelu (fotoapka-panel.css) zostaje
   nietknięty — wszystko tutaj stoi pod .qg-szkielet--kasa albo .qg-kasa.

   Koszyk i kasa to bloki WooCommerce (React) — tylko CSS, bez przepisywania
   bloków. Lokalnie nie ma tłumaczeń WooCommerce (napisy bloków po angielsku)
   ani bramki Przelewy24; wygląd kroku płatności trzeba obejrzeć na teście. */

/* ---------------------------------------------------------------------
   Szkielet jako górna belka
   Pasek boczny i kolumna treści mają display: contents, więc ich dzieci
   (logo, kroki, menu konta, <main>, stopka) układa jedna siatka.
   <main id="tresc"> zostaje pudełkiem — na nim ląduje skok „Przejdź do
   treści”. Kolejność na ekranie jest kolejnością w dokumencie (i fokusu):
   logo, kroki, menu konta, treść, stopka. Dlatego kasa nie ma pomocy
   szkieletu (.qg-szkielet__dol: powrót, kontakt) — stoi w dokumencie przed
   menu konta, a pod treścią Tab skakał na dół strony i z powrotem
   (qg_theme_szkielet_kasy, 25.09.2026).
   --------------------------------------------------------------------- */
.qg-szkielet.qg-szkielet--kasa {
	--kasa-belka: 74px;
	--kasa-bok: 48px;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	/* 1fr: wolne miejsce krótkiej strony idzie do treści, nie do stopki
	   (rozciągnięta stopka rozrzucała napisy na dwie wysokości). */
	grid-template-rows: var(--kasa-belka) 1fr auto;
	grid-template-areas:
		"logo kroki konto"
		"tresc tresc tresc"
		"stopka stopka stopka";
	min-height: 100vh;
	background: var(--fa-krem);
}
.qg-szkielet--kasa > .qg-szkielet__bok,
.qg-szkielet--kasa > .qg-szkielet__reszta { display: contents; }
/* Linia pod belką na całą szerokość — pseudoelement w pierwszym wierszu siatki. */
.qg-szkielet--kasa::before {
	content: "";
	grid-row: 1;
	grid-column: 1 / -1;
	border-bottom: 1px solid rgba(26, 20, 16, .08);
}

.qg-szkielet--kasa .qg-szkielet__logo {
	grid-area: logo;
	align-self: center;
	justify-self: start;
	display: flex; flex-wrap: nowrap; align-items: center; gap: 10px;
	margin: 0 0 0 var(--kasa-bok); padding: 0;
	color: var(--fa-atrament);
}
.qg-szkielet--kasa .qg-szkielet__logo:hover { color: var(--fa-atrament); }
/* Aparat w czapeczce jak w projekcie K1: atramentowy korpus, kremowy obiektyw.
   Szkielet ma go w wersji na ciemne tło (kremowy korpus) — CSS wygrywa
   z atrybutami fill/stroke SVG. */
.qg-szkielet--kasa .qg-szkielet__ikona rect { fill: var(--fa-atrament); }
.qg-szkielet--kasa .qg-szkielet__ikona circle[stroke] { stroke: var(--fa-krem); }
.qg-szkielet--kasa .qg-szkielet__logo .qg-szkielet__marka { font-size: 30px; }

/* Kroki zakupu: „1 Koszyk — 2 Dane i płatność — 3 Gotowe”. Odnośnik ma
   44 px wysokości (cel dotyku), pigułka z projektu (34 px) to jego <span>. */
/* Podwójna klasa: fotoapka-panel.css chowa na telefonie nawigację bez kotwic
   (w panelu drogę dają menu konta i zakładki), a kroki kasy są adresami. */
.qg-szkielet.qg-szkielet--kasa .qg-szkielet__bok .qg-nawigacja {
	display: block;
	grid-area: kroki;
	align-self: center;
	margin: 0 var(--kasa-bok) 0 24px;
}
.qg-szkielet.qg-szkielet--kasa .qg-szkielet__bok .qg-nawigacja ul {
	display: flex; align-items: center; gap: 10px;
	margin: 0; padding: 0; overflow: visible;
	counter-reset: qg-krok;
}
.qg-szkielet--kasa .qg-nawigacja li {
	display: flex; align-items: center; gap: 10px;
	counter-increment: qg-krok;
}
.qg-szkielet--kasa .qg-nawigacja li + li::before,
.qg-szkielet--kasa .qg-nawigacja ul::before {
	content: "—";
	content: "—" / "";
	color: var(--fa-tekst-2);
	font-size: 14px;
	font-weight: 600;
}
/* Kreska przed „3 Gotowe” — dorysowanym niżej, więc stoi na końcu listy. */
.qg-szkielet--kasa .qg-nawigacja ul::before { order: 1; }
.qg-szkielet--kasa .qg-szkielet__bok .qg-nawigacja a,
.qg-szkielet--kasa .qg-szkielet__bok .qg-nawigacja a:hover,
.qg-szkielet--kasa .qg-szkielet__bok .qg-nawigacja a[aria-current] {
	display: flex; align-items: center;
	min-height: 44px; padding: 0; border: 0; border-radius: 999px;
	background: none; color: var(--fa-tekst-2);
	font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap;
	text-decoration: none;
}
.qg-szkielet--kasa .qg-nawigacja a > span,
.qg-szkielet--kasa .qg-nawigacja ul::after {
	display: inline-block;
	padding: 7px 14px;
	border: 1.5px solid rgba(26, 20, 16, .2);
	border-radius: 999px;
	color: var(--fa-tekst-2);
	font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.qg-szkielet--kasa .qg-nawigacja a > span::before { content: counter(qg-krok) " "; }
.qg-szkielet--kasa .qg-nawigacja a:hover > span { border-color: var(--fa-atrament); color: var(--fa-atrament); }
.qg-szkielet--kasa .qg-nawigacja a[aria-current] > span {
	background: var(--fa-atrament); border-color: var(--fa-atrament); color: var(--fa-krem);
}
/* Krok za nami: turkus z ptaszkiem zamiast numeru (atramentowy tekst — na
   turkusie biały nie trzyma kontrastu). */
.qg-szkielet--kasa .qg-nawigacja li:has(~ li a[aria-current]) a > span {
	background: var(--fa-psie); border-color: var(--fa-psie); color: var(--fa-atrament);
}
.qg-szkielet--kasa .qg-nawigacja li:has(~ li a[aria-current]) a > span::before { content: "✓ "; content: "✓ " / ""; }
/* „3 Gotowe” — kroku nie da się jeszcze kliknąć, a szkielet rysuje tylko
   odnośniki, więc dorysowujemy go tutaj. Czytnik ekranu go pomija
   (tekst zastępczy ""), dostaje listę dwóch odnośników z bieżącym krokiem.
   Docelowo wpis bez adresu w szkielet-gora.php (raport z 25.09.2026). */
.qg-szkielet--kasa .qg-nawigacja ul::after {
	counter-increment: qg-krok;
	content: counter(qg-krok) " Gotowe";
	content: counter(qg-krok) " Gotowe" / "";
	order: 2;
}
.qg-szkielet--kasa .qg-nawigacja a:focus-visible { outline: 3px solid var(--fa-atrament); outline-offset: 2px; }
.qg-szkielet--kasa .qg-nawigacja a:focus-visible > span { outline: 0; }
/* Po zakupie i przy opłacaniu zamówienia kroków nie ma (pusta lista) —
   bez tego zostałoby samo dorysowane „3 Gotowe”. */
.qg-szkielet.qg-szkielet--kasa .qg-szkielet__bok .qg-nawigacja:not(:has(a)) { display: none; }

/* Menu konta (tylko zalogowani): sam awatar w belce, lista w dół. Waga ponad
   „.qg-szkielet__bok > .qg-nawigacja + .qg-konto-menu { margin-top: auto }”
   z paska panelu — kasa nie ma między nimi pomocy (.qg-szkielet__dol), więc
   ta reguła łapała awatar i spychała go na dół belki. */
.qg-szkielet.qg-szkielet--kasa .qg-szkielet__bok .qg-konto-menu {
	grid-area: konto;
	align-self: center;
	margin: 0 var(--kasa-bok) 0 0;
}
/* Z menu konta kroki stoją bliżej awatara, a margines krawędzi ma awatar. */
.qg-szkielet.qg-szkielet--kasa:has(.qg-konto-menu) .qg-szkielet__bok .qg-nawigacja { margin-right: 16px; }
.qg-szkielet--kasa .qg-szkielet__bok .qg-konto-menu summary { color: var(--fa-atrament); }
.qg-szkielet--kasa .qg-szkielet__bok .qg-konto-menu summary:hover { background: rgba(26, 20, 16, .06); }
.qg-szkielet--kasa .qg-szkielet__bok .qg-konto-menu summary:focus-visible { outline-color: var(--fa-atrament); }
.qg-szkielet--kasa .qg-konto-menu__kto,
.qg-szkielet--kasa .qg-szkielet__bok .qg-konto-menu summary svg { display: none; }
.qg-szkielet--kasa .qg-szkielet__bok .qg-konto-menu__lista { top: calc(100% + 8px); bottom: auto; left: auto; right: 0; min-width: 220px; }

/* Treść: 48 px od krawędzi jak w projekcie, do 1344 px (1440 − 2 × 48). */
.qg-szkielet--kasa .qg-szkielet__tresc {
	grid-area: tresc;
	width: 100%; max-width: calc(1344px + 2 * var(--kasa-bok));
	margin-inline: auto;
	padding: 48px var(--kasa-bok) 40px;
}

.qg-szkielet--kasa.qg-szkielet .qg-szkielet__stopka {
	grid-area: stopka;
	max-width: calc(1344px + 2 * var(--kasa-bok));
	padding: 18px var(--kasa-bok) 26px;
}

/* ---------------------------------------------------------------------
   Nagłówek strony (page.php): h1 jak „Twój koszyk” / „Ostatnia prosta”
   --------------------------------------------------------------------- */
.qg-szkielet--kasa .qg-kasa > .qg-panel__naglowek { margin: 0 0 32px; }
.qg-szkielet--kasa .qg-kasa > .qg-panel__naglowek h1 { font-size: 56px; line-height: 1; }
.qg-szkielet--kasa .qg-kasa > .qg-panel__naglowek .qg-panel__pod { font-size: 16px; }

/* Komunikaty nad koszykiem i kasą (CheckoutNotices silnika, np. zamiana pakietu)
   — na komputerze szerokie jak lewa kolumna. */
@media (min-width: 1100px) {
	.qg-szkielet--kasa .qg-kasa .qg-komunikat { max-width: calc(100cqw - 460px); }
}

/* ---------------------------------------------------------------------
   Wspólne dla koszyka i kasy: pola, pola wyboru, przyciski
   Selektory z body i strukturą WooCommerce — jego checkout.css ładuje się
   po motywie i przy równej wadze wygrywa (opis w style.css).
   --------------------------------------------------------------------- */
body .qg-kasa :is(.wc-block-checkout, .wc-block-cart) { color: var(--fa-atrament); font-family: var(--fa-font-tekst); }

/* Etykieta nad polem, jak w projekcie („E-mail”, pole pod spodem), zamiast
   pływającej etykiety WooCommerce w środku pola. Etykieta stoi w DOM po polu,
   więc wysuwa ją order; komunikat błędu (też po polu) zostaje pod polem —
   przy odwróconej kolumnie wypadał nad etykietą (25.09.2026). */
body .qg-kasa .wc-block-components-text-input,
body .qg-kasa .wc-block-components-form .wc-block-components-text-input {
	display: flex; flex-direction: column; gap: 7px;
	margin-top: 14px;
}
body .qg-kasa .wc-block-components-text-input label,
body .qg-kasa .wc-block-components-form .wc-block-components-text-input label,
body .qg-kasa .wc-block-components-text-input.is-active label,
body .qg-kasa .wc-block-components-form .wc-block-components-text-input.is-active label {
	order: -1;
	position: static; transform: none;
	max-width: none; margin: 0; padding: 0;
	color: var(--fa-atrament); font-size: 14px; font-weight: 600; line-height: 1.3;
	white-space: normal;
}
body .qg-kasa .wc-block-components-form .wc-block-components-text-input input,
body .qg-kasa .wc-block-components-form .wc-block-components-text-input input[type="text"],
body .qg-kasa .wc-block-components-form .wc-block-components-text-input input[type="email"],
body .qg-kasa .wc-block-components-form .wc-block-components-text-input input[type="tel"],
body .qg-kasa .wc-block-components-text-input input,
body .qg-kasa .wc-block-checkout .wc-blocks-components-select__select,
body .qg-kasa .wc-block-checkout textarea,
body .qg-kasa .wc-block-components-textarea {
	height: auto; min-height: 52px;
	padding: 14px 16px;
	border: 1.5px solid var(--linia-pole);
	border-radius: 14px;
	background: #fff; color: var(--fa-atrament);
	font-family: var(--fa-font-tekst); font-size: 16px; line-height: 1.3;
	box-shadow: none;
}
body .qg-kasa .wc-block-components-text-input input:focus,
body .qg-kasa .wc-block-checkout textarea:focus,
body .qg-kasa .wc-block-checkout .wc-blocks-components-select__select:focus {
	border-color: var(--fa-atrament);
	outline: 3px solid var(--fa-atrament);
	outline-offset: 1px;
	box-shadow: none;
}
/* Waga wyższa niż reguła pól wyżej (input[type="text"]) — przy równej ramka
   błędu przegrywała i pole z błędem było szare. */
body .qg-kasa .wc-block-components-form .wc-block-components-text-input.has-error input[type],
body .qg-kasa .wc-block-components-text-input.has-error input[type] { border-color: #cc1818; }
body .qg-kasa .wc-block-components-text-input > .wc-block-components-validation-error { padding: 0; }
body .qg-kasa .wc-block-checkout input:-webkit-autofill,
body .qg-kasa .wc-block-checkout input:-webkit-autofill:hover,
body .qg-kasa .wc-block-checkout input:-webkit-autofill:focus { box-shadow: inset 0 0 0 100px #fff; }
/* Lista krajów: etykieta nad polem tak samo. */
body .qg-kasa .wc-blocks-components-select .wc-blocks-components-select__container {
	display: flex; flex-direction: column; gap: 7px;
	height: auto; background: none; border: 0; border-radius: 0; box-shadow: none;
}
body .qg-kasa .wc-blocks-components-select .wc-blocks-components-select__label {
	position: static; transform: none; order: -1;
	color: var(--fa-atrament); font-size: 14px; font-weight: 600; line-height: 1.3;
}
body .qg-kasa .wc-blocks-components-select .wc-blocks-components-select__select { appearance: none; padding-right: 44px; }
body .qg-kasa .wc-blocks-components-select .wc-blocks-components-select__expand {
	top: auto; bottom: 16px; right: 14px; transform: none; fill: var(--fa-atrament);
}

/* Pola wyboru jak w projekcie: 22 px, zaokrąglenie 6, atramentowa ramka,
   zaznaczone — atrament z białym ptaszkiem. Błąd (niezaznaczona wymagana
   zgoda) zostaje czerwony, jak u WooCommerce. */
body .qg-kasa .wc-block-components-checkbox label { align-items: flex-start; gap: 12px; }
body .qg-kasa .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	flex: 0 0 auto;
	width: 22px; height: 22px; min-width: 22px; margin: 0;
	border: 2px solid var(--fa-atrament); border-radius: 6px;
	background: #fff;
}
body .qg-kasa .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--fa-atrament); }
body .qg-kasa .wc-block-components-checkbox.has-error .wc-block-components-checkbox__input[type="checkbox"] { border-color: #cc1818; }
body .qg-kasa .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus-visible { outline: 3px solid var(--fa-atrament); outline-offset: 2px; }
body .qg-kasa .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	top: 4px; left: 4px; width: 14px; height: 14px; margin: 0; fill: #fff;
}
body .qg-kasa .wc-block-components-checkbox .wc-block-components-checkbox__label {
	padding-top: 1px; color: var(--fa-tekst-2); font-size: 14px; line-height: 1.5;
}
body .qg-kasa .wc-block-components-checkbox .wc-block-components-checkbox__label a,
body .qg-kasa .wc-block-checkout__terms a { color: var(--fa-atrament); text-decoration: underline; }

/* Główny przycisk (Przejdź do płatności / zapłać): pomarańczowa pigułka. */
body .qg-kasa .wc-block-components-checkout-place-order-button,
body .qg-kasa .wc-block-cart__submit-button,
body .qg-kasa .wc-block-components-checkout-place-order-button:hover:not(:disabled),
body .qg-kasa .wc-block-cart__submit-button:hover {
	min-height: 56px; padding: 18px; border: 0; border-radius: 999px;
	background: var(--fa-pomarancz); color: #fff;
	font-family: var(--fa-font-tekst); font-size: 17px; font-weight: 800; line-height: 1.2;
	text-decoration: none; text-shadow: none; box-shadow: none; filter: none;
}
body .qg-kasa .wc-block-components-checkout-place-order-button:hover:not(:disabled),
body .qg-kasa .wc-block-cart__submit-button:hover { background: var(--fa-pomarancz-ciemny); }
/* Żółta obwódka na atramentowej karcie. Waga ponad regułę fokusu WooCommerce
   (body:not(…) .wc-block-components-button:not(.is-link):focus — niebieski
   pierścień w box-shadow), która wcześniej wygrywała. Cień przycisku
   w białym pasku na telefonie (--kasa-cien) zostaje też przy fokusie. */
body .qg-kasa .wc-block-components-button:is(.wc-block-components-checkout-place-order-button, .wc-block-cart__submit-button):not(.is-link):focus-visible {
	outline: 3px solid var(--kasa-fokus, var(--fa-zolty)); outline-offset: 3px; box-shadow: var(--kasa-cien, none);
}
body .qg-kasa .wc-block-components-checkout-place-order-button:disabled { opacity: .6; }

/* Atramentowa karta podsumowania (K1 „Podsumowanie”, K2 prawa kolumna):
   krem na atramencie, kwota Baloo na żółto, lekki obrót o 1°. Wspólne dla
   bocznej kolumny koszyka i bloku akcji kasy. */
body .qg-kasa .wc-block-cart__sidebar,
body .qg-kasa .wc-block-checkout__actions {
	padding: 30px;
	border-radius: 28px;
	background: var(--fa-atrament);
	color: var(--fa-krem);
	transform: rotate(1deg);
}
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions) :is(.wc-block-components-totals-wrapper, .wc-block-components-panel, .wc-block-components-totals-item) {
	border-color: rgba(244, 237, 227, .2);
	color: var(--fa-krem);
}
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions) .wc-block-components-totals-wrapper { padding: 14px 0; border-top: 1px solid rgba(244, 237, 227, .2); }
/* WooCommerce wcina pozycje, kupon i sumy o 16 px od ramki swojej karty —
   tu ramką jest cała atramentowa karta z własnym dopełnieniem. */
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions) :is(.wc-block-components-order-summary, .wc-block-components-totals-coupon, .wc-block-components-totals-item) {
	padding-left: 0; padding-right: 0;
}
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions) .wc-block-components-totals-wrapper:empty { display: none; }
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions) .wc-block-components-totals-item { padding: 0; font-size: 16px; }
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions) .wc-block-components-totals-item__description,
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions) .wc-block-components-totals-footer-item-tax {
	color: var(--fa-na-ciemnym-2); font-size: 13px;
}
/* „Do zapłaty” — kwota jak „49 zł” w projekcie. */
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions) .wc-block-components-totals-footer-item {
	align-items: baseline; flex-wrap: wrap;
}
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions) .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 17px; font-weight: 400; }
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions) .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions) .wc-block-components-totals-footer-item .wc-block-components-totals-item__value * {
	color: var(--fa-zolty);
	font-family: var(--fa-font-naglowki); font-size: 44px; font-weight: 800; line-height: 1;
}
/* Kod rabatowy: przycisk panelu i formularz na ciemnym. */
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions, .wc-block-checkout__sidebar) .wc-block-components-panel__button {
	min-height: 44px; margin: 0; padding: 0; color: var(--fa-krem); font-size: 15px; font-weight: 600;
}
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions, .wc-block-checkout__sidebar) .wc-block-components-panel__button-icon { fill: var(--fa-krem); }
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions, .wc-block-checkout__sidebar) .wc-block-components-panel__button:focus-visible,
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions, .wc-block-checkout__sidebar) :is(a, input, button):focus-visible { outline: 3px solid var(--fa-zolty); outline-offset: 2px; }
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions, .wc-block-checkout__sidebar) .wc-block-components-totals-coupon__form { gap: 8px; }
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions, .wc-block-checkout__sidebar) .wc-block-components-totals-coupon__input input {
	border-color: rgba(244, 237, 227, .5); background: transparent; color: var(--fa-krem);
}
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions, .wc-block-checkout__sidebar) .wc-block-components-totals-coupon__input label { color: var(--fa-krem); }
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions, .wc-block-checkout__sidebar) .wc-block-components-totals-coupon__button {
	min-height: 52px; padding: 13px 18px; border: 1.5px solid var(--fa-krem); border-radius: 14px;
	background: transparent; color: var(--fa-krem); font-weight: 600;
}
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions, .wc-block-checkout__sidebar) .wc-block-components-totals-coupon__button:hover { background: var(--fa-krem); color: var(--fa-atrament); }
/* Błąd kodu: czerwień WooCommerce (#cc1818) ma na atramencie 3,2:1 — jasny
   łosoś ok. 9:1. Ikona bierze kolor tekstu (fill: currentColor u WooCommerce). */
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions, .wc-block-checkout__sidebar) .wc-block-components-validation-error { color: #ffb4a8; }
body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions, .wc-block-checkout__sidebar) .wc-block-components-text-input.has-error input[type] { border-color: #ffb4a8; }

/* ---------------------------------------------------------------------
   K2 — kasa: dwie kolumny od 1100 px
   WooCommerce wybiera układ według szerokości swojego bloku (kontener
   zapytań .wp-block-woocommerce-checkout i klasy is-* ze skryptu). W układzie
   „średnim” (węższym niż 700 px) blok akcji niesie pełne podsumowanie tuż
   nad przyciskiem zapłaty — dokładnie treść prawej karty z projektu („Na
   bogato”, „Do zapłaty 49 zł”, „Płacę”). W „dużym” podsumowanie stoi osobno
   w kolumnie bocznej, a przycisk pod formularzem, i nie da się ich złożyć
   w jedną kartę. Dlatego blok ma 640 px (WooCommerce widzi układ średni),
   a siatka w nim wychodzi poza niego na pełną szerokość treści: formularz po
   lewej, blok akcji po prawej. Kolumna główna i formularz mają display:
   contents, więc kroki formularza i blok akcji są elementami jednej siatki;
   blok akcji zajmuje prawą kolumnę przez wszystkie wiersze i jedzie
   przyklejony (sticky).

   Szerokość treści (.qg-kasa, kontener) liczy --kasa-szer na bloku
   WooCommerce: zarejestrowana jako <length> zamienia się tam w piksele,
   zanim dotrze do siatki, w której 100cqw znaczyłoby już 640 px bloku.
   --------------------------------------------------------------------- */
@property --kasa-szer {
	syntax: "<length>";
	inherits: true;
	initial-value: 1344px;
}
.qg-kasa { container-type: inline-size; }
@media (min-width: 1100px) {
	body .qg-kasa .wp-block-woocommerce-checkout {
		--kasa-szer: 100cqw;
		width: 640px;
		max-width: none;
	}
	body .qg-kasa .wc-block-checkout.wc-block-components-sidebar-layout {
		display: grid;
		/* max(): bez @property (Firefox przed 128) lewa kolumna nie spada poniżej karty. */
		grid-template-columns: max(calc(var(--kasa-szer) - 460px), 420px) 420px;
		column-gap: 40px;
		align-items: start;
		width: auto;
		max-width: none;
		margin: 0;
	}
	body .qg-kasa .wc-block-checkout.wc-block-components-sidebar-layout > .wc-block-checkout__main,
	body .qg-kasa .wc-block-checkout .wc-block-checkout__form { display: contents; }
	body .qg-kasa .wc-block-checkout.wc-block-components-sidebar-layout > *,
	body .qg-kasa .wc-block-checkout__form > *,
	body .qg-kasa #order-fields > *,
	body .qg-kasa #order-fields > .wc-block-components-checkout-step__content > *,
	body .qg-kasa #order-fields .wc-block-components-address-form > * { grid-column: 1; }
	/* Zwinięte podsumowanie u góry jest dla telefonu — tu pełne stoi w karcie. */
	body .qg-kasa .wc-block-checkout.wc-block-components-sidebar-layout > .wc-block-checkout__sidebar { display: none; }
	body .qg-kasa .wc-block-checkout__form > .wc-block-checkout__actions {
		grid-column: 2;
		grid-row: 1 / span 60;
		align-self: start;
		position: sticky;
		top: calc(24px + var(--wp-admin--admin-bar--height, 0px));
		margin: 0;
	}
}

/* Kroki formularza w białych kartach („Twoje dane”, „Jak płacisz?”). */
body .qg-kasa .wc-block-checkout__form > .wc-block-components-checkout-step:not(#order-fields):not(#order-notes) {
	margin: 0 0 28px;
	padding: 28px;
	border: 0;
	border-radius: 28px;
	background: #fff;
}
body .qg-kasa .wc-block-checkout__form .wc-block-components-checkout-step__heading { margin: 0 0 4px; }
body .qg-kasa .wc-block-checkout__form .wc-block-components-checkout-step__title {
	margin: 0;
	font-family: var(--fa-font-tekst); font-size: 19px; font-weight: 800; line-height: 1.3;
	letter-spacing: 0; text-shadow: none;
}
body .qg-kasa .wc-block-checkout__form .wc-block-components-checkout-step__title::before { content: none; }
body .qg-kasa .wc-block-checkout__form .wc-block-components-checkout-step__description {
	margin: 4px 0 0; color: var(--fa-tekst-2); font-size: 13px; line-height: 1.45;
}
/* WooCommerce rysuje przy krokach numer i pionową linię — projekt ich nie ma. */
body .qg-kasa .wc-block-checkout__form .wc-block-components-checkout-step::after,
body .qg-kasa .wc-block-checkout__form .wc-block-components-checkout-step__container::after { content: none; display: none; }
body .qg-kasa .wc-block-checkout__form .wc-block-components-checkout-step__content { padding: 0; }
body .qg-kasa .wc-block-checkout__guest-checkout-notice,
body .qg-kasa .wc-block-components-address-form__address_2-toggle { margin-top: 8px; color: var(--fa-tekst-2); font-size: 13px; }
body .qg-kasa .wc-block-components-address-form__address_2-toggle { display: inline-block; min-height: 24px; color: var(--fa-atrament); }
/* Logowanie przy „Twoje dane” (gość z kontem). */
body .qg-kasa .wc-block-checkout__login-prompt { color: var(--fa-atrament); font-weight: 600; }

/* Zgody bez karty, na kremie — jak dwa kwadraciki pod „Jak płacisz?”.
   Nagłówek sekcji zostaje dla czytnika ekranu. */
body .qg-kasa #order-fields .wc-block-components-checkout-step__heading-container {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
body .qg-kasa #order-fields .wc-block-components-address-form > .wc-block-components-checkbox { margin: 0 0 12px; }
body .qg-kasa #order-fields .wc-block-components-address-form > .wc-block-components-text-input { max-width: 420px; margin: 4px 0 12px 34px; }
/* Firma i NIP po zaznaczeniu faktury: silnik pokazuje je regułą display: block
   z :has(#id) (InvoiceCheckout.php), która przeważała nad flexem wyżej —
   etykieta stawała obok pola, a na telefonie wychodziła za ekran. Ta sama
   waga plus .qg-kasa; chowanie bez zaznaczonej faktury zostaje po stronie
   silnika (25.09.2026). */
body.qg-faktura-firma .qg-kasa .wc-block-components-text-input:is(:has(#order-qrgaleria-firma), :has(#order-qrgaleria-nip)) { display: flex; min-width: 0; }
body .qg-kasa .wc-block-checkout__form > .wc-block-checkout__order-notes { margin: 0 0 12px; padding: 0; }
body .qg-kasa .wc-block-checkout__form > .wc-block-checkout__order-notes .wc-block-components-checkout-step__content { padding: 0; }
body .qg-kasa .wc-block-checkout__form > .wc-block-checkout__terms {
	margin: 0 0 12px; padding: 0; border: 0;
	color: var(--fa-tekst-2); font-size: 14px; line-height: 1.5;
}
body .qg-kasa .wc-block-checkout__terms--with-separator { border-top: 0; padding-top: 0; }
body .qg-kasa .wc-block-checkout__terms .wc-block-components-checkbox__label { font-size: 14px; }

/* Krok płatności: metody jako kafle z obwódką, wybrana — gruba atramentowa
   ramka (K2). Na serwerze to lista wtyczki Przelewy24 — do obejrzenia na
   test.fotoapka.pl, lokalnie bramki nie ma. */
body .qg-kasa .wc-block-checkout__payment-method .wc-block-components-radio-control { display: grid; gap: 12px; border: 0; }
/* Wspólną ramkę grupy i kreski między opcjami WooCommerce rysuje
   pseudoelementami — kafle mają własne obwódki. */
body .qg-kasa .wc-block-checkout__payment-method .wc-block-components-radio-control::after,
body .qg-kasa .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option::after,
body .qg-kasa .wc-block-checkout__payment-method .wc-block-components-radio-control__option::after { content: none; }
body .qg-kasa .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option,
body .qg-kasa .wc-block-checkout__payment-method .wc-block-components-radio-control__option {
	border: 1.5px solid rgba(26, 20, 16, .2);
	border-radius: 18px;
	box-shadow: none;
}
body .qg-kasa .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option { border: 0; }
body .qg-kasa .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
body .qg-kasa .wc-block-checkout__payment-method .wc-block-components-radio-control__option-checked {
	border: 2.5px solid var(--fa-atrament);
	box-shadow: none;
}
body .qg-kasa .wc-block-checkout__payment-method .wc-block-components-radio-control__label { font-weight: 800; font-size: 17px; }
body .qg-kasa .wc-block-components-radio-control .wc-block-components-radio-control__input {
	width: 20px; height: 20px; min-width: 20px; border: 2px solid rgba(26, 20, 16, .45); background: #fff;
}
body .qg-kasa .wc-block-components-radio-control .wc-block-components-radio-control__input:checked { border: 6px solid var(--fa-pomarancz); }
body .qg-kasa .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before { content: none; }
body .qg-kasa .wc-block-components-radio-control .wc-block-components-radio-control__input:focus-visible { outline: 3px solid var(--fa-atrament); outline-offset: 2px; }
body .qg-kasa .wc-block-checkout__payment-method .wc-block-components-notice-banner { margin: 8px 0 0; border-radius: 14px; }

/* Blok akcji = prawa karta: podsumowanie, kwota, przycisk. Nagłówek
   „Podsumowanie zamówienia” jak „Podsumowanie” w K1 (pogrubiony tekst). */
body .qg-kasa .wc-block-checkout__actions .checkout-order-summary-block-fill-wrapper { margin: 0; padding: 0; border: 0; background: none; }
body .qg-kasa .wc-block-checkout__actions .wc-block-components-checkout-step__heading { margin: 0 0 14px; }
body .qg-kasa .wc-block-checkout__actions .wc-block-components-checkout-step__title {
	margin: 0; color: var(--fa-krem);
	font-family: var(--fa-font-tekst); font-size: 20px; font-weight: 800; line-height: 1.3; text-shadow: none;
}
body .qg-kasa .wc-block-checkout__actions .checkout-order-summary-block-fill { border: 0; padding: 0; }
body .qg-kasa .wc-block-checkout__actions .wp-block-woocommerce-checkout-order-summary-cart-items-block { border-top: 0; padding-top: 0; }
body .qg-kasa .wc-block-checkout__actions_row { margin-top: 18px; }
body .qg-kasa .wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button { color: var(--fa-krem); }

/* Pozycja: miniatura 64 px, nazwa pogrubiona, opis pakietu jasnym szarym.
   Liczba sztuk zawsze 1 (jedna galeria w koszyku, CartGuard), cena pozycji
   jest też sumą — obie zostają dla czytnika ekranu, znikają z oczu. */
body .qg-kasa .wc-block-components-order-summary .wc-block-components-order-summary-item {
	display: flex; align-items: center; gap: 14px; padding: 0 0 16px;
}
body .qg-kasa .wc-block-components-order-summary-item__image { flex: 0 0 64px; width: 64px; margin: 0; padding: 0; }
body .qg-kasa .wc-block-components-order-summary-item__image > img { width: 64px; height: 64px; max-width: none; border-radius: 14px; object-fit: cover; background: rgba(244, 237, 227, .12); }
body .qg-kasa .wc-block-components-order-summary-item__quantity,
body .qg-kasa .wc-block-components-order-summary-item__total-price,
body .qg-kasa .wc-block-components-order-summary-item .wc-block-cart-item__prices {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
body .qg-kasa .wc-block-components-order-summary-item__description { padding: 0; }
body .qg-kasa .wc-block-components-order-summary-item .wc-block-components-product-name {
	margin: 0 0 2px; color: var(--fa-krem); font-family: var(--fa-font-tekst); font-size: 17px; font-weight: 800; line-height: 1.25;
}
body .qg-kasa .wc-block-components-order-summary-item .wc-block-components-product-metadata,
body .qg-kasa .wc-block-components-order-summary-item .wc-block-components-product-metadata p {
	margin: 0; color: var(--fa-na-ciemnym-2); font-size: 14px; line-height: 1.4;
}

/* ---------------------------------------------------------------------
   K1 — koszyk
   Pozycja koszyka jako biała karta: zdjęcie pakietu przechylone o 2°,
   nazwa Baloo, cena dużą Baloo po prawej. Suma w atramentowej karcie
   z przyciskiem, jak w projekcie.
   --------------------------------------------------------------------- */
@media (min-width: 1100px) {
	body .qg-kasa .wc-block-cart.wc-block-components-sidebar-layout { display: flex; flex-wrap: nowrap; gap: 40px; align-items: flex-start; }
	body .qg-kasa .wc-block-cart .wc-block-cart__main { flex: 1 1 auto; width: auto; min-width: 0; padding: 0; }
	body .qg-kasa .wc-block-cart .wc-block-cart__sidebar { flex: 0 0 420px; width: 420px; margin: 0; }
}
body .qg-kasa .wc-block-cart-items { margin: 0; border: 0; }
body .qg-kasa .wc-block-cart-items thead,
body .qg-kasa .wc-block-cart-items__header { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body .qg-kasa .wc-block-cart-items tbody { display: grid; gap: 16px; }
body .qg-kasa .wc-block-cart-items .wc-block-cart-items__row {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
	padding: 28px;
	border: 0;
	border-radius: 28px;
	background: #fff;
}
body .qg-kasa .wc-block-cart-items .wc-block-cart-items__row > td { display: block; padding: 0; border: 0; }
body .qg-kasa .wc-block-cart-item__image a { display: block; }
body .qg-kasa .wc-block-cart-item__image img {
	display: block; width: 180px; height: 150px; max-width: none;
	border-radius: 18px; object-fit: cover; background: var(--fa-krem-ciemny);
	transform: rotate(-2deg);
}
body .qg-kasa .wc-block-cart-item__product .wc-block-components-product-name {
	display: block; margin: 0 0 8px;
	color: var(--fa-atrament); font-family: var(--fa-font-naglowki); font-size: 30px; font-weight: 800; line-height: 1.05;
	text-decoration: none;
}
body .qg-kasa .wc-block-cart-item__product a.wc-block-components-product-name:hover { color: var(--fa-pomarancz-ciemny); }
body .qg-kasa .wc-block-cart-item__product .wc-block-cart-item__prices { display: none; }
body .qg-kasa .wc-block-cart-item__product .wc-block-components-product-metadata,
body .qg-kasa .wc-block-cart-item__product .wc-block-components-product-metadata p { margin: 0; color: var(--fa-tekst-2); font-size: 16px; line-height: 1.45; }
body .qg-kasa .wc-block-cart-item__quantity { margin-top: 10px; }
body .qg-kasa .wc-block-cart-item__remove-link,
body .qg-kasa .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; margin: 0 0 0 -12px; padding: 0;
	color: var(--fa-tekst-2); font-size: 14px;
}
body .qg-kasa .wc-block-cart-item__remove-link:hover { color: var(--fa-pomarancz-ciemny); }
body .qg-kasa .wc-block-cart-item__total { text-align: right; }
body .qg-kasa .wc-block-cart-item__total .wc-block-components-product-price,
body .qg-kasa .wc-block-cart-item__total .wc-block-components-formatted-money-amount {
	color: var(--fa-atrament); font-family: var(--fa-font-naglowki); font-size: 44px; font-weight: 800; line-height: 1; white-space: nowrap;
}
/* „Może Cię zainteresować” (krzyżowa sprzedaż) — pakiety nie mają par. */
body .qg-kasa .wc-block-cart .wp-block-woocommerce-product-collection:empty { display: none; }

/* Suma koszyka: „Podsumowanie” jako nagłówek karty. Także poniżej 700 px
   bloku, gdzie WooCommerce go chowa (@container, .wc-block-cart
   .wc-block-components-sidebar .wc-block-cart__totals-title) — stąd waga. */
body .qg-kasa .wc-block-cart .wc-block-cart__sidebar .wc-block-cart__totals-title {
	display: block; margin: 0 0 14px; padding: 0;
	color: var(--fa-krem); font-family: var(--fa-font-tekst); font-size: 20px; font-weight: 800; line-height: 1.3;
	text-align: left; text-transform: none; letter-spacing: 0;
}
body .qg-kasa .wc-block-cart__sidebar .wc-block-cart__submit { margin: 18px 0 0; }
body .qg-kasa .wc-block-cart__sidebar .wc-block-cart__submit-container { padding: 0; background: none; box-shadow: none; }
/* Na telefonie WooCommerce przykleja przycisk do dołu ekranu, gdy ten
   w karcie zniknie z widoku — ten sam biały pasek co w kasie (K4). */
body .qg-kasa .wc-block-cart__sidebar .wc-block-cart__submit-container--sticky {
	padding: 16px 16px 28px;
	border-top: 1px solid rgba(26, 20, 16, .1);
	background: #fff;
}
/* Na białym pasku żółta obwódka fokusu ginie (1,9:1) — atramentowa. */
body .qg-kasa .wc-block-cart__submit-container--sticky .wc-block-cart__submit-button {
	--kasa-cien: 0 4px 0 var(--fa-atrament);
	--kasa-fokus: var(--fa-atrament);
	box-shadow: var(--kasa-cien);
}
body .qg-kasa .wc-block-cart__sidebar .wc-block-cart__submit-button { width: 100%; }
body .qg-kasa .wc-block-cart__sidebar .wc-block-cart__payment-options { display: none; }

/* Pusty koszyk (projekt go nie ma): nagłówki Baloo na środku, pod nimi pakiety
   z bloku WooCommerce „Nowości” jako białe karty z pomarańczowym przyciskiem.
   Środkowanie z klasy has-text-align-center daje arkusz bloków, którego motyw
   nie ładuje — stąd text-align tutaj. */
body .qg-kasa .wp-block-woocommerce-empty-cart-block > h2 {
	margin: 0 0 16px; text-align: center;
	font-family: var(--fa-font-naglowki); font-size: 36px; font-weight: 800; line-height: 1.1;
}
body .qg-kasa .wc-block-cart__empty-cart__title.with-empty-cart-icon::before { width: 96px; height: 96px; margin-bottom: 16px; background-color: var(--fa-pomarancz); -webkit-mask-size: contain; mask-size: contain; }
body .qg-kasa .wp-block-woocommerce-empty-cart-block .wp-block-separator { margin: 28px auto; border-color: var(--linia); }
body .qg-kasa .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px;
	margin: 0; padding: 0; list-style: none;
}
body .qg-kasa .wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
	display: flex; flex-direction: column; gap: 10px;
	max-width: none; margin: 0; padding: 16px; border: 0; border-radius: 24px;
	background: #fff; text-align: left;
}
body .qg-kasa .wc-block-grid__product-link { display: flex; flex-direction: column; gap: 12px; color: var(--fa-atrament); text-decoration: none; }
body .qg-kasa .wc-block-grid__product-image { margin: 0; }
body .qg-kasa .wc-block-grid__product-image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 16px; object-fit: cover; }
body .qg-kasa .wc-block-grid__product-title { margin: 0; color: var(--fa-atrament); font-family: var(--fa-font-tekst); font-size: 17px; font-weight: 800; line-height: 1.3; }
body .qg-kasa .wc-block-grid__product-price { margin: 0; color: var(--fa-atrament); font-family: var(--fa-font-naglowki); font-size: 28px; font-weight: 800; line-height: 1; }
body .qg-kasa .wc-block-grid__product-add-to-cart { margin: auto 0 0; }
body .qg-kasa .wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: flex; align-items: center; justify-content: center; width: 100%;
	min-height: 48px; padding: 12px 18px; border: 0; border-radius: 999px;
	background: var(--fa-pomarancz); color: #fff; font-size: 15px; font-weight: 800; text-decoration: none;
}
body .qg-kasa .wc-block-grid__product-add-to-cart .wp-block-button__link:hover { background: var(--fa-pomarancz-ciemny); color: #fff; }
body .qg-kasa .wc-block-grid__product-link:focus-visible,
body .qg-kasa .wc-block-grid__product-add-to-cart .wp-block-button__link:focus-visible { outline: 3px solid var(--fa-atrament); outline-offset: 3px; }

/* ---------------------------------------------------------------------
   K3 — zamówienie przyjęte (woocommerce/checkout/thankyou.php)
   Pomarańczowa belka i scena z konfetti, nagłówek żółty z atramentowym
   obrysem, kremowa karta z tym, co zostało do zrobienia. Nagłówek strony
   z page.php („Zamówienie przyjęte”) zostaje jedynym h1, ale widzi go
   tylko czytnik ekranu — na ekranie mówi to pigułka nad tytułem.
   --------------------------------------------------------------------- */
body.woocommerce-order-received .qg-szkielet--kasa::before { background: var(--fa-pomarancz); border-bottom-color: rgba(255, 255, 255, .2); }
body.woocommerce-order-received .qg-szkielet--kasa .qg-szkielet__logo,
body.woocommerce-order-received .qg-szkielet--kasa .qg-szkielet__logo:hover { color: #fff; }
body.woocommerce-order-received .qg-szkielet--kasa .qg-szkielet__logo .qg-szkielet__marka span { color: var(--fa-zolty); }
body.woocommerce-order-received .qg-szkielet--kasa .qg-szkielet__ikona { display: none; }
body.woocommerce-order-received .qg-szkielet--kasa .qg-szkielet__logo:focus-visible { outline-color: var(--fa-atrament); }
body.woocommerce-order-received .qg-kasa > .qg-panel__naglowek {
	position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
body.woocommerce-order-received .qg-szkielet--kasa .qg-szkielet__tresc { padding-top: 0; }

.fa-dzieki__scena {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 520px;
	gap: 56px;
	align-items: center;
	margin: 0 calc(-1 * var(--kasa-bok)) 40px;
	padding: 64px var(--kasa-bok);
	background: var(--fa-pomarancz);
	/* Atrament, nie biel z projektu: biały tekst zwykłej wielkości na
	   pomarańczu ma 3,9:1 (WCAG AA chce 4,5:1), atrament 4,7:1. */
	color: var(--fa-atrament);
	overflow: hidden;
}
/* Numer zamówienia w prawym rogu belki, jak w projekcie. Szkielet ma
   position: relative, a nic pomiędzy nie jest pozycjonowane (scena jest,
   dlatego numer stoi w szablonie przed nią). */
.fa-dzieki__numer {
	position: absolute;
	top: 0; right: var(--kasa-bok);
	display: flex; align-items: center;
	height: var(--kasa-belka);
	margin: 0;
	color: var(--fa-atrament); font-size: 14px; font-weight: 600;
}
/* Zalogowany klient ma w prawym rogu belki awatar menu konta — numer stoi
   obok niego, nie na nim. Wiersz „Zamówienie” w karcie jest na telefon,
   gdzie numer z awatarem nie mieszczą się przy logo (25.09.2026). */
.qg-szkielet--kasa:has(.qg-konto-menu) .fa-dzieki__numer { right: calc(var(--kasa-bok) + 64px); }
.fa-dzieki__fakty .fa-dzieki__fakt-numer { display: none; }
.fa-dzieki__konfetti { position: absolute; display: block; pointer-events: none; }
/* Konfetti tylko po opłaceniu — przy odrzuconej płatności nie ma czego świętować. */
.fa-dzieki:not(.fa-dzieki--oplacone) .fa-dzieki__konfetti { display: none; }
.fa-dzieki__konfetti--1 { top: 80px; left: 120px; width: 16px; height: 36px; border-radius: 3px; background: var(--fa-zolty); transform: rotate(30deg); }
.fa-dzieki__konfetti--2 { top: 220px; left: 60px; width: 18px; height: 18px; border-radius: 50%; background: var(--fa-atrament); }
.fa-dzieki__konfetti--3 { top: 60px; left: 560px; width: 14px; height: 30px; border-radius: 3px; background: var(--fa-zareczyny); transform: rotate(-40deg); }
.fa-dzieki__konfetti--4 { bottom: 90px; left: 420px; width: 16px; height: 16px; border-radius: 50%; background: var(--fa-krem); }
.fa-dzieki__konfetti--5 { bottom: 60px; left: 90px; width: 14px; height: 32px; border-radius: 3px; background: var(--fa-kawalerski); transform: rotate(60deg); }
.fa-dzieki__tekst { position: relative; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.fa-dzieki__stan {
	display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
	margin: 0; padding: 7px 14px; border-radius: 999px;
	background: var(--fa-atrament); color: var(--fa-krem);
	font-size: 14px; line-height: 1.3;
	transform: rotate(-2deg);
}
.fa-dzieki__stan::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fa-psie); }
.fa-dzieki--czeka .fa-dzieki__stan::before { background: var(--fa-zolty); }
.fa-dzieki--nieudane .fa-dzieki__stan::before { background: var(--fa-pomarancz); }
.fa-dzieki__tytul {
	margin: 0;
	color: var(--fa-zolty);
	font-family: var(--fa-font-naglowki); font-size: 84px; font-weight: 800; line-height: .95;
	-webkit-text-stroke: 2px var(--fa-atrament);
	paint-order: stroke fill;
	text-shadow: 2px 2px 0 var(--fa-atrament), 4px 4px 0 var(--fa-atrament), 6px 6px 0 var(--fa-atrament);
	overflow-wrap: anywhere;
}
.fa-dzieki__opis { margin: 0; max-width: 560px; font-size: 19px; line-height: 1.5; }
.fa-dzieki .fa-dzieki__opis a { color: var(--fa-atrament); font-weight: 800; }
.fa-dzieki .fa-dzieki__opis a:hover { color: #fff; }

.fa-dzieki__karta {
	position: relative;
	display: flex; flex-direction: column; gap: 18px;
	padding: 32px;
	border-radius: 32px;
	background: var(--fa-krem);
	color: var(--fa-atrament);
	box-shadow: 0 30px 60px -30px rgba(26, 20, 16, .6);
}
.fa-dzieki__karta h3 { margin: 0; font-family: var(--fa-font-tekst); font-size: 20px; font-weight: 800; line-height: 1.3; }
.fa-dzieki__karta p { margin: 0; color: var(--fa-tekst-2); font-size: 16px; line-height: 1.5; }
.fa-dzieki__fakty { display: grid; gap: 10px; margin: 0; }
.fa-dzieki__fakty div {
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	padding: 15px 16px; border: 1.5px solid rgba(26, 20, 16, .2); border-radius: 14px; background: #fff;
}
.fa-dzieki__fakty dt { color: var(--fa-tekst-2); font-size: 14px; font-weight: 600; }
.fa-dzieki__fakty dd { margin: 0; font-size: 16px; font-weight: 800; text-align: right; overflow-wrap: anywhere; }
.fa-dzieki .fa-dzieki__przycisk,
.fa-dzieki .fa-dzieki__przycisk:visited {
	display: flex; align-items: center; justify-content: center;
	min-height: 56px; padding: 18px; border-radius: 999px;
	background: var(--fa-pomarancz); color: #fff;
	font-size: 17px; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none;
}
.fa-dzieki .fa-dzieki__przycisk:hover { background: var(--fa-pomarancz-ciemny); color: #fff; }
.fa-dzieki__przycisk:focus-visible { outline: 3px solid var(--fa-atrament); outline-offset: 3px; }
.fa-dzieki .fa-dzieki__przycisk--obrys,
.fa-dzieki .fa-dzieki__przycisk--obrys:visited { background: transparent; color: var(--fa-atrament); border: 1.5px solid var(--fa-atrament); }
.fa-dzieki .fa-dzieki__przycisk--obrys:hover { background: var(--fa-atrament); color: var(--fa-krem); }
.fa-dzieki__karta .fa-dzieki__drobne { font-size: 13px; }
.fa-dzieki :focus-visible { outline: 3px solid var(--fa-atrament); outline-offset: 3px; }

/* Szczegóły zamówienia WooCommerce (hak woocommerce_thankyou) pod sceną. */
.fa-dzieki .woocommerce-order-details,
.fa-dzieki .woocommerce-customer-details {
	max-width: 884px; margin: 0 0 24px; padding: 28px; border-radius: 28px; background: #fff;
}
.fa-dzieki .woocommerce-order-details__title,
.fa-dzieki .woocommerce-column__title,
.fa-dzieki .woocommerce-customer-details h2 {
	margin: 0 0 14px; font-family: var(--fa-font-tekst); font-size: 19px; font-weight: 800; line-height: 1.3; text-shadow: none;
}
.fa-dzieki table.shop_table { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-size: 15px; }
.fa-dzieki table.shop_table :is(th, td) { padding: 12px 0; border: 0; border-bottom: 1px solid var(--linia); text-align: left; vertical-align: top; }
.fa-dzieki table.shop_table tfoot tr:last-child :is(th, td) { border-bottom: 0; }
.fa-dzieki table.shop_table :is(td, th):last-child { text-align: right; }
.fa-dzieki table.shop_table .wc-item-meta { margin: 6px 0 0; padding: 0; list-style: none; color: var(--fa-tekst-2); font-size: 13px; }
.fa-dzieki table.shop_table .wc-item-meta p { display: inline; margin: 0; }
.fa-dzieki .woocommerce-customer-details address { margin: 0; padding: 0; border: 0; font-style: normal; line-height: 1.6; color: var(--fa-tekst-2); }
/* „Zapłać” i „Anuluj” przy zamówieniu, które czeka albo nie przeszło. */
.fa-dzieki .woocommerce-order-details :is(.button, .woocommerce-button) {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; margin: 0 0 0 8px; padding: 10px 18px;
	border: 1.5px solid var(--fa-atrament); border-radius: 999px;
	background: transparent; color: var(--fa-atrament);
	font-family: var(--fa-font-tekst); font-size: 15px; font-weight: 600; text-decoration: none;
}
.fa-dzieki .woocommerce-order-details :is(.button, .woocommerce-button):hover { background: var(--fa-atrament); color: var(--fa-krem); }
.fa-dzieki .woocommerce-order-details .button.pay { border-color: var(--fa-pomarancz); background: var(--fa-pomarancz); color: #fff; }
.fa-dzieki .woocommerce-order-details .button.pay:hover { border-color: var(--fa-pomarancz-ciemny); background: var(--fa-pomarancz-ciemny); color: #fff; }
.fa-dzieki :is(.woocommerce-order-details, .woocommerce-customer-details) a { color: var(--fa-atrament); }

/* ---------------------------------------------------------------------
   „Zapłać” — opłacenie istniejącego zamówienia, np. przyciskiem „Zapłać
   jeszcze raz” z K3 po odrzuconej płatności (25.09.2026). To klasyczny
   formularz WooCommerce (checkout/form-pay.php), nie blok: zamówienie
   w białej karcie, metody płatności jak kafle K2, zgoda i pomarańczowa
   pigułka. Waga z #order_review / #payment — woocommerce.css ma do (0,3,1).
   Listę metod na serwerze rysuje wtyczka Przelewy24 — obejrzeć na teście.
   --------------------------------------------------------------------- */
body.woocommerce-order-pay .qg-kasa :is(#order_review, .woocommerce-notices-wrapper) { max-width: 680px; }
body.woocommerce-order-pay .qg-kasa #order_review table.shop_table {
	width: 100%; margin: 0 0 20px; border: 0; border-collapse: separate; border-spacing: 0; border-radius: 28px;
	background: #fff; overflow: hidden;
}
body.woocommerce-order-pay .qg-kasa #order_review table.shop_table :is(th, td) {
	padding: 14px 24px; border: 0; border-top: 1px solid var(--linia); background: none;
	color: var(--fa-atrament); font-size: 15px; line-height: 1.45; text-align: left; vertical-align: top;
}
body.woocommerce-order-pay .qg-kasa #order_review table.shop_table thead th { padding-top: 20px; border-top: 0; color: var(--fa-tekst-2); font-size: 13px; font-weight: 600; }
body.woocommerce-order-pay .qg-kasa #order_review table.shop_table :is(th, td):last-child { text-align: right; }
body.woocommerce-order-pay .qg-kasa #order_review table.shop_table tbody td { font-weight: 800; }
body.woocommerce-order-pay .qg-kasa #order_review table.shop_table .includes_tax { display: block; color: var(--fa-tekst-2); font-size: 13px; font-weight: 400; }
body.woocommerce-order-pay .qg-kasa #payment { padding: 28px; border-radius: 28px; background: #fff; color: var(--fa-atrament); }
body.woocommerce-order-pay .qg-kasa #payment ul.payment_methods { display: grid; gap: 12px; margin: 0 0 20px; padding: 0; border: 0; list-style: none; }
body.woocommerce-order-pay .qg-kasa #payment ul.payment_methods > li { margin: 0; line-height: 1.4; }
body.woocommerce-order-pay .qg-kasa #payment ul.payment_methods > li.wc_payment_method { padding: 14px 16px; border: 1.5px solid rgba(26, 20, 16, .2); border-radius: 18px; }
body.woocommerce-order-pay .qg-kasa #payment ul.payment_methods > li.wc_payment_method:has(> input:checked) { border: 2.5px solid var(--fa-atrament); }
body.woocommerce-order-pay .qg-kasa #payment ul.payment_methods > li > input { width: 20px; height: 20px; margin: 0 10px 0 0; vertical-align: -4px; accent-color: var(--fa-pomarancz); }
body.woocommerce-order-pay .qg-kasa #payment ul.payment_methods > li > label { font-size: 17px; font-weight: 800; }
body.woocommerce-order-pay .qg-kasa #payment div.payment_box { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--fa-krem); color: var(--fa-tekst-2); font-size: 14px; }
body.woocommerce-order-pay .qg-kasa #payment div.payment_box::before { content: none; }
body.woocommerce-order-pay .qg-kasa #payment div.form-row { margin: 0; padding: 0; }
body.woocommerce-order-pay .qg-kasa .woocommerce-terms-and-conditions-wrapper { color: var(--fa-tekst-2); font-size: 14px; line-height: 1.5; }
body.woocommerce-order-pay .qg-kasa .woocommerce-terms-and-conditions-wrapper a { color: var(--fa-atrament); text-decoration: underline; }
body.woocommerce-order-pay .qg-kasa #payment .form-row.validate-required { margin: 14px 0 0; }
/* Kwadracik z lewej, tekst z gwiazdką „wymagane” płynie obok (flex odrywał gwiazdkę od tekstu). */
body.woocommerce-order-pay .qg-kasa #payment .woocommerce-form__label-for-checkbox { position: relative; display: block; padding-left: 34px; color: var(--fa-atrament); font-size: 14px; font-weight: 600; line-height: 1.5; }
body.woocommerce-order-pay .qg-kasa #payment .woocommerce-form__label-for-checkbox input[type="checkbox"] { position: absolute; top: 0; left: 0; width: 22px; height: 22px; margin: 0; accent-color: var(--fa-atrament); }
body .qg-kasa :is(#payment #place_order, .woocommerce-form-login .button, .woocommerce-verify-email .button) {
	float: none; display: block; width: 100%; min-height: 56px; margin: 20px 0 0; padding: 18px;
	border: 0; border-radius: 999px; background: var(--fa-pomarancz); color: #fff;
	font-family: var(--fa-font-tekst); font-size: 17px; font-weight: 800; line-height: 1.2; text-shadow: none; box-shadow: none;
}
body .qg-kasa :is(#payment #place_order, .woocommerce-form-login .button, .woocommerce-verify-email .button):hover { background: var(--fa-pomarancz-ciemny); color: #fff; }
body .qg-kasa :is(#order_review, .woocommerce-form-login, .woocommerce-verify-email) :focus-visible { outline: 3px solid var(--fa-atrament); outline-offset: 3px; }
/* Komunikaty (brak metod płatności, zamówienie już opłacone, zaloguj się,
   nieudana weryfikacja adresu). */
body:is(.woocommerce-order-pay, .woocommerce-order-received) .qg-kasa :is(.woocommerce-info, .woocommerce-error, .woocommerce-message) {
	margin: 0 0 20px; padding: 14px 18px; border: 0; border-radius: 14px;
	background: var(--fa-krem-ciemny); color: var(--fa-atrament); font-size: 15px; line-height: 1.5; list-style: none;
}
/* Błąd odróżnia pełny obrys, nie boczny pasek — projekt nie ma pasków
   akcentu na kartach (uwaga detektora, 25.09.2026). */
body:is(.woocommerce-order-pay, .woocommerce-order-received) .qg-kasa .woocommerce-error { box-shadow: inset 0 0 0 1.5px var(--fa-pomarancz); }
body.woocommerce-order-pay .qg-kasa #payment .woocommerce-info { margin: 0; }
body:is(.woocommerce-order-pay, .woocommerce-order-received) .qg-kasa :is(.woocommerce-info, .woocommerce-error, .woocommerce-message)::before { content: none; }
/* Logowanie (zamówienie z kontem, klient niezalogowany) i weryfikacja adresu
   e-mail (gość wraca na stronę zamówienia po 10 minutach albo z innej
   przeglądarki) — formularze WooCommerce zamiast K3 i „zapłać”. */
body .qg-kasa :is(.woocommerce-form-login, .woocommerce-verify-email) {
	max-width: 680px; margin: 0 0 20px; padding: 28px; border: 0; border-radius: 28px;
	background: #fff; color: var(--fa-atrament); font-size: 16px; line-height: 1.5;
}
body .qg-kasa :is(.woocommerce-form-login, .woocommerce-verify-email) p { margin: 0 0 14px; }
body .qg-kasa :is(.woocommerce-form-login, .woocommerce-verify-email) a { color: var(--fa-atrament); text-decoration: underline; }
body .qg-kasa :is(.woocommerce-form-login, .woocommerce-verify-email) label { display: block; margin: 0 0 7px; color: var(--fa-atrament); font-size: 14px; font-weight: 600; }
body .qg-kasa :is(.woocommerce-form-login, .woocommerce-verify-email) .input-text {
	width: 100%; min-height: 52px; padding: 14px 16px; border: 1.5px solid var(--linia-pole); border-radius: 14px;
	background: #fff; color: var(--fa-atrament); font-family: var(--fa-font-tekst); font-size: 16px;
}
/* K3 bez sceny (sam formularz weryfikacji) — odstęp od pomarańczowej belki. */
body.woocommerce-order-received .qg-kasa:not(:has(.fa-dzieki__scena)) { padding-top: 32px; }

/* Zwinięte podsumowanie u góry kasy (telefon i tablet — od 1100 px jest
   schowane): atramentowa pigułka z kwotą na żółto, jak w K4. */
body .qg-kasa .wc-block-checkout__sidebar { margin: 0 0 18px; }
body .qg-kasa .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	margin: 0; padding: 0 16px; border: 0; border-radius: 20px;
	background: var(--fa-atrament); color: var(--fa-krem);
}
body .qg-kasa .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title {
	min-height: 64px; margin: 0; padding: 12px 0; border: 0; align-items: center;
}
body .qg-kasa .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-text { margin: 0; color: var(--fa-krem); font-size: 16px; font-weight: 800; }
body .qg-kasa .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-price {
	color: var(--fa-zolty); font-family: var(--fa-font-naglowki); font-size: 30px; font-weight: 800; line-height: 1;
}
body .qg-kasa .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title-icon { fill: var(--fa-krem); }
body .qg-kasa .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title:focus-visible { outline: 3px solid var(--fa-zolty); outline-offset: 2px; }
body .qg-kasa .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content { padding: 0 0 12px; border: 0; }
body .qg-kasa .wc-block-checkout__sidebar :is(.wc-block-components-totals-wrapper, .wc-block-components-panel, .wc-block-components-totals-item) { border-color: rgba(244, 237, 227, .2); color: var(--fa-krem); }
body .qg-kasa .wc-block-checkout__sidebar .wc-block-components-panel__button { color: var(--fa-krem); }
body .qg-kasa .wc-block-checkout__sidebar .wc-block-components-panel__button-icon { fill: var(--fa-krem); }
body .qg-kasa .wc-block-checkout__sidebar .wc-block-components-totals-footer-item-tax,
body .qg-kasa .wc-block-checkout__sidebar .wc-block-components-totals-item__description { color: var(--fa-na-ciemnym-2); }

/* ---------------------------------------------------------------------
   Tablet: jedna kolumna (koszyk i kasa w układzie WooCommerce „średnim”,
   do 680 px szerokości jak dotąd), karta sceny K3 pod tekstem.
   --------------------------------------------------------------------- */
@media (max-width: 1099px) {
	body .qg-kasa :is(.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart) { max-width: 680px; margin-inline: auto; }
	.qg-szkielet--kasa .qg-kasa > .qg-panel__naglowek,
	.qg-szkielet--kasa .qg-kasa > .qg-komunikat { max-width: 680px; margin-inline: auto; }
	body .qg-kasa .wc-block-checkout__actions,
	body .qg-kasa .wc-block-cart__sidebar { transform: none; }
	.fa-dzieki__scena { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.fa-dzieki__karta { max-width: 560px; }
	.fa-dzieki__tytul { font-size: 64px; }
	/* „Zapłać” i formularze WooCommerce w kolumnie 680 px na środku, jak kasa. */
	body .qg-kasa :is(#order_review, .woocommerce-notices-wrapper, .woocommerce-form-login, .woocommerce-verify-email) { margin-inline: auto; }
}

/* ---------------------------------------------------------------------
   K4 — telefon
   Belka: logo i „Krok 2 z 3”. Zwinięte podsumowanie u góry jako atramentowa
   pigułka z kwotą na żółto. Przycisk zapłaty w białym pasku przyklejonym do
   dołu ekranu; pełne podsumowanie z bloku akcji chowa się (to samo jest
   w pigułce u góry — rozwija się po dotknięciu).
   --------------------------------------------------------------------- */
@media (max-width: 700px) {
	.qg-szkielet.qg-szkielet--kasa { --kasa-belka: 60px; --kasa-bok: 20px; }
	.qg-szkielet--kasa .qg-szkielet__logo .qg-szkielet__marka { font-size: 22px; }
	.qg-szkielet--kasa .qg-szkielet__ikona { width: 30px; height: 28px; }
	.qg-szkielet--kasa .qg-nawigacja { margin-left: 12px; }
	/* Tylko bieżący krok, jako „Krok 2 z 3” (nazwa kroku zostaje dla czytnika).
	   Ukryty krok (display: none) nie podbija licznika, więc drugi, gdy jest
	   bieżący, liczy się za dwa — inaczej kasa mówiłaby „Krok 1 z 3”. */
	.qg-szkielet--kasa .qg-nawigacja li:not(:has(a[aria-current])) { display: none; }
	.qg-szkielet--kasa .qg-nawigacja li:nth-child(2):has(a[aria-current]) { counter-increment: qg-krok 2; }
	.qg-szkielet--kasa .qg-nawigacja li + li::before,
	.qg-szkielet--kasa .qg-nawigacja ul::before,
	.qg-szkielet--kasa .qg-nawigacja ul::after { display: none; }
	.qg-szkielet--kasa .qg-szkielet__bok .qg-nawigacja a[aria-current] > span {
		padding: 0; border: 0; background: none; color: var(--fa-tekst-2);
		font-size: 0;
	}
	/* Tekst zastępczy "": czytnik czyta samą nazwę kroku („Dane i płatność”,
	   bieżąca strona), a nie sklejone „Krok 2 z 3Dane i płatność”. Napis
	   i liczba 3 są w arkuszu, bo szkielet rysuje tylko odnośniki — do PHP
	   (z __()) razem z wpisem „Gotowe” bez adresu w szkielet-gora.php. */
	.qg-szkielet--kasa .qg-szkielet__bok .qg-nawigacja a[aria-current] > span::before {
		content: "Krok " counter(qg-krok) " z 3";
		content: "Krok " counter(qg-krok) " z 3" / "";
		font-size: 13px; font-weight: 600;
	}
	.qg-szkielet--kasa .qg-szkielet__tresc { padding: 8px var(--kasa-bok) 32px; }
	.qg-szkielet--kasa .qg-kasa > .qg-panel__naglowek { margin-bottom: 18px; }
	.qg-szkielet--kasa .qg-kasa > .qg-panel__naglowek h1 { font-size: 36px; }
	.qg-szkielet--kasa .qg-kasa > .qg-panel__naglowek .qg-panel__pod { font-size: 14px; }

	body .qg-kasa .wc-block-checkout__form > .wc-block-components-checkout-step:not(#order-fields):not(#order-notes) { margin-bottom: 18px; padding: 20px 16px; border-radius: 20px; }

	/* Pasek z przyciskiem przyklejony do dołu ekranu. */
	body .qg-kasa .wc-block-checkout__form > .wc-block-checkout__actions {
		position: sticky; bottom: 0; z-index: 10;
		margin: 12px calc(-1 * var(--kasa-bok)) 0;
		padding: 16px 16px 28px;
		border-top: 1px solid rgba(26, 20, 16, .1);
		border-radius: 0;
		background: #fff;
		color: var(--fa-atrament);
	}
	body .qg-kasa .wc-block-checkout__actions .checkout-order-summary-block-fill-wrapper { display: none; }
	body .qg-kasa .wc-block-checkout__actions_row { margin: 0; }
	body .qg-kasa .wc-block-components-checkout-place-order-button,
	body .qg-kasa .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
		--kasa-cien: 0 4px 0 var(--fa-atrament);
		--kasa-fokus: var(--fa-atrament);
		padding: 17px; box-shadow: var(--kasa-cien);
	}
	body .qg-kasa .wc-block-checkout__actions .wc-block-components-checkout-return-to-cart-button { color: var(--fa-atrament); }
	body .qg-kasa .wc-block-checkout__actions :is(a, button):focus-visible { outline-color: var(--fa-atrament); }

	/* Koszyk: karta pozycji w słupku. */
	body .qg-kasa .wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 96px minmax(0, 1fr); gap: 14px 16px; padding: 18px; border-radius: 22px; }
	body .qg-kasa .wc-block-cart-item__image img { width: 96px; height: 84px; border-radius: 14px; }
	body .qg-kasa .wc-block-cart-item__product .wc-block-components-product-name { font-size: 22px; }
	body .qg-kasa .wc-block-cart-item__product .wc-block-components-product-metadata,
	body .qg-kasa .wc-block-cart-item__product .wc-block-components-product-metadata p { font-size: 14px; }
	/* WooCommerce przypina komórki do wierszy swojej siatki — tu układ własny. */
	body .qg-kasa .wc-block-cart-items .wc-block-cart-items__row > .wc-block-cart-item__image { grid-column: 1; grid-row: 1; }
	body .qg-kasa .wc-block-cart-items .wc-block-cart-items__row > .wc-block-cart-item__product { grid-column: 2; grid-row: 1; }
	body .qg-kasa .wc-block-cart-items .wc-block-cart-items__row > .wc-block-cart-item__total { grid-column: 1 / -1; grid-row: 2; text-align: left; }
	body .qg-kasa .wc-block-cart-item__total .wc-block-components-product-price,
	body .qg-kasa .wc-block-cart-item__total .wc-block-components-formatted-money-amount { font-size: 32px; }
	body .qg-kasa .wc-block-cart__sidebar { padding: 22px 18px; border-radius: 22px; }
	body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions) .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
	body .qg-kasa :is(.wc-block-cart__sidebar, .wc-block-checkout__actions) .wc-block-components-totals-footer-item .wc-block-components-totals-item__value * { font-size: 36px; }

	/* K3 na telefonie: numer zostaje w belce obok logo, scena w słupku,
	   konfetti tylko po prawej — z lewej wchodziło na tytuł i tekst. */
	.fa-dzieki__numer { font-size: 13px; }
	.qg-szkielet--kasa:has(.qg-konto-menu) .fa-dzieki__numer { display: none; }
	.qg-szkielet--kasa:has(.qg-konto-menu) .fa-dzieki__fakty .fa-dzieki__fakt-numer { display: flex; }
	.fa-dzieki__scena { gap: 28px; padding: 28px var(--kasa-bok) 32px; }
	.fa-dzieki__tytul { font-size: 44px; -webkit-text-stroke-width: 1.5px; text-shadow: 2px 2px 0 var(--fa-atrament), 3px 3px 0 var(--fa-atrament), 4px 4px 0 var(--fa-atrament); }
	.fa-dzieki__opis { font-size: 16px; }
	.fa-dzieki__karta { padding: 22px 18px; border-radius: 24px; }
	.fa-dzieki__konfetti--1, .fa-dzieki__konfetti--2, .fa-dzieki__konfetti--4 { display: none; }
	.fa-dzieki__konfetti--3 { top: 26px; left: auto; right: 34px; }
	.fa-dzieki__konfetti--5 { top: 80px; bottom: auto; left: auto; right: 22px; }
	.fa-dzieki .woocommerce-order-details,
	.fa-dzieki .woocommerce-customer-details { padding: 20px 16px; border-radius: 20px; }

	body .qg-kasa :is(#order_review #payment, .woocommerce-form-login, .woocommerce-verify-email) { padding: 20px 16px; border-radius: 20px; }
	body.woocommerce-order-pay .qg-kasa #order_review table.shop_table { border-radius: 20px; }
	body.woocommerce-order-pay .qg-kasa #order_review table.shop_table :is(th, td) { padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	body .qg-kasa .wc-block-components-checkout-place-order-button,
	body .qg-kasa .wc-block-cart__submit-button,
	.fa-dzieki__przycisk { transition: none; }
}