/*
Theme Name: Fotoapka
Theme URI: https://example.com/qrgaleria
Author: fotoapka.pl
Description: Motyw fotoapka.pl — strona sprzedażowa galerii zdjęć i filmów z imprez. Goście skanują kod QR i wrzucają zdjęcia z telefonu do jednej galerii; organizator kupuje pakiet, dostaje panel i paczkę ZIP.
Version: 1.2.2
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: qrgaleria-theme
*/

/* ---------------------------------------------------------------------
   Tokeny reguł panelu, kasy i formularzy niżej — wspólnych z ntalio, stąd
   jego paleta. W panelu i w szkielecie kasy przestawia je na fotoapkę
   fotoapka-panel.css; kroje to kroje fotoapki z fotoapka.css (--fa-*).
   --------------------------------------------------------------------- */
:root {
	/* `color-scheme: light` jest tu kluczowe, nie ozdobne: bez niego
	   przeglądarka w trybie ciemnym sama przemalowuje pola formularzy, listy
	   rozwijane, kalendarz w polu daty i paski przewijania. */
	color-scheme: light;

	--font-tekst: var(--fa-font-tekst);
	--font-naglowki: var(--fa-font-naglowki);

	--tlo: #fbfaf6;
	--tlo-karta: #ffffff;
	--tlo-alt: #f5f0e8;
	--tekst: #16213a;
	/* Tekst wtórny to ciemniejszy granat, nie szary: na kremie trzyma 6,4:1. */
	--tekst-slaby: #3b5382;
	/* Złoto jest kolorem przycisków i ozdób. Tekst na złocie jest ZAWSZE
	   granatowy — biały daje 2,0:1 i nie da się go przeczytać w słońcu. */
	--akcent: #c9a85f;
	--akcent-ciemny: #b8954a;
	--akcent-tlo: #f6ecd4;
	/* Złoto jako kolor tekstu na jasnym tle tylko w tym odcieniu (4,6:1 na
	   kremie --tlo) i tylko dla drobnych etykiet. */
	--zloto-tekst: #8a6b2a;
	--zloto-jasne: #ecd9a6;
	--linia: #e6e0d3;
	/* Obramowanie pól formularza. Miękka linia kart na kremowym tle była
	   praktycznie niewidoczna, zwłaszcza na telefonie w słońcu. Ten odcień
	   trzyma 3,1:1, czyli próg WCAG dla elementów sterujących. */
	--linia-pole: #7d879e;
	/* Ciemne powierzchnie i napisy na złocie. */
	--granat-900: #0b1426;
	--granat-800: #131e38;
	--granat-300: #9fb3d6;
	/* Obwódka fokusu klawiatury. Złoto na kremie ma 1,9:1 i ginie, więc fokus
	   rysuje granat. */
	--fokus: #2f4a80;
	--promien: 16px;
	--promien-przycisk: 12px;
	/* Cień barwiony granatem, z przesunięciem i rozmyciem. Szary cień na
	   kremie wygląda jak brud. */
	--cien: 0 1px 2px rgba(11,20,38,.06), 0 12px 32px rgba(11,20,38,.10);
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--tlo);
	color: var(--tekst);
	font-family: var(--font-tekst);
	font-size: 17px;
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
}

/* Odnośniki w tekście są granatowe z złotym podkreśleniem. Złoto jako kolor
   liter dawałoby 3,2:1 — za mało dla zwykłego tekstu. */
a { color: var(--tekst-slaby); text-decoration-color: var(--akcent); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--tekst); }
img { max-width: 100%; height: auto; }

/* Nagłówki ciaśniejsze niż tekst: interlinia bliżej jedności i lekko ujemny
   odstęp liter; h3 zostaje przy 600, żeby nie konkurował z tytułem sekcji. */
h1, h2, h3 {
	font-family: var(--font-naglowki);
	line-height: 1.12;
	letter-spacing: -0.01em;
	font-weight: 700;
	text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6vw, 4.1rem); line-height: 1.06; margin: 0 0 18px; }
h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin: 0 0 14px; }
h3 { font-size: 1.35rem; font-weight: 600; margin: 0 0 8px; }

/* --- Przyciski ------------------------------------------------------ */
.qg-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	/* Złoty przycisk z granatowym napisem: 8,9:1. Biały napis na złocie miałby
	   2,0:1 i w słońcu znikałby zupełnie. */
	background: var(--akcent); color: var(--granat-900); text-decoration: none;
	border: 0; border-radius: var(--promien-przycisk); padding: 14px 26px;
	font: inherit; font-weight: 700; cursor: pointer; min-height: 50px;
	transition: background-color .15s ease;
}
.qg-btn:hover { background: var(--akcent-ciemny); color: var(--granat-900); }
.qg-btn:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

.qg-btn--obrys { background: transparent; color: var(--tekst); border: 1px solid var(--linia-pole); }

/* Przycisk wyłączony musi wyglądać na wyłączony. W panelu „Przygotuj
   paczkę” jest nieczynny przez cały czas pakowania — bez tego klient klikał
   w coś, co wygląda normalnie i nic nie robi. */
.qg-btn[disabled], .qg-btn:disabled {
	opacity: .45; cursor: default; pointer-events: none;
}
.qg-btn--obrys:hover { background: var(--tlo-alt); color: var(--tekst); }

/* --- Panel klienta -------------------------------------------------- */
/* Panel siedzi na tych samych tokenach co reszta witryny, więc zmiana palety
   albo kroju pisma przechodzi na niego sama. Klient nigdy nie ogląda kokpitu
   WordPressa: ten mówi „to jest narzędzie do stron”, a nie „to twoje wesele”. */

.qg-panel__naglowek {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 20px; flex-wrap: wrap; margin-bottom: 32px;
}
.qg-panel__naglowek h1 { margin: 0; font-size: clamp(2rem, 4.6vw, 3rem); }

.qg-panel__blok {
	background: var(--tlo-karta);
	border: 1px solid var(--linia);
	border-radius: var(--promien);
	padding: 26px;
	box-shadow: var(--cien);
	margin-bottom: 22px;
}
.qg-panel__blok h2 { margin: 0 0 18px; font-size: 1.5rem; }
.qg-panel__pusty-blok, .qg-panel__pomoc { color: var(--tekst-slaby); margin: 0; }
.qg-panel__pomoc--srodek { text-align: center; margin-top: 18px; }
.qg-panel__uwaga, .qg-uwaga { color: #b3261e; }

.qg-panel__pusto { text-align: center; padding: 30px 0 42px; }
.qg-panel__pusto h2 { margin: 0 0 8px; }
.qg-panel__pusto p { color: var(--tekst-slaby); margin: 0; }

/* ---------------------------------------------------------------------
   Panel: szkielet aplikacji (od 18 września 2026)
   Wizualizacja Damiana: pasek boczny z nawigacją po sekcjach, górna belka
   z nazwą galerii i kontem, treść w kartach. Pasek jest granatowy, złoto
   zostaje dla stanu „tu jesteś” i liczników (w fotoapce kolory przestawia
   fotoapka-panel.css). Marketingowego menu tu nie ma (motyw: header-panel.php i footer-panel.php).
   Wysokość paska administratora WordPress (gdy zalogowana jest obsługa)
   niesie zmienna --wp-admin--admin-bar--height; dla klienta wynosi 0.
   --------------------------------------------------------------------- */
.qg-szkielet {
	--qg-bok: 268px;
	/* Szerokość kolumny treści; belka i stopka liczą z niej swoje dopełnienie,
	   żeby okruszki i odnośniki stały w jednej osi z treścią. Kasa zwęża ją
	   do szerokości swojego formularza (reguła przy .qg-kasa). */
	--qg-kolumna: 1120px;
	--qg-gora-h: 68px;
	--qg-pasek-admin: var(--wp-admin--admin-bar--height, 0px);
	display: grid;
	grid-template-columns: var(--qg-bok) minmax(0, 1fr);
	min-height: 100vh;
}
.qg-szkielet__bok {
	position: sticky; top: var(--qg-pasek-admin);
	height: calc(100vh - var(--qg-pasek-admin));
	display: flex; flex-direction: column;
	background: var(--granat-900); color: var(--granat-300);
	padding: 22px 16px 18px;
	overflow-y: auto;
}
.qg-szkielet__logo {
	display: block; padding: 4px 12px 22px; margin-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	color: inherit; text-decoration: none;
}
.qg-szkielet__logo img { display: block; height: 42px; width: auto; }
.qg-szkielet__logo span {
	display: block; margin-top: 8px;
	font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--granat-300);
}
.qg-nawigacja ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.qg-nawigacja a {
	display: flex; align-items: center; gap: 12px;
	padding: 11px 12px; border-radius: 10px;
	border-left: 3px solid transparent;
	color: var(--granat-300); text-decoration: none;
	font-weight: 600; font-size: .98rem; line-height: 1.25;
}
.qg-nawigacja a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
/* „Tu jesteś”: złoto na granacie (13,2:1) i złota kreska z lewej. */
.qg-nawigacja a[aria-current] { color: var(--zloto-jasne); background: rgba(201, 168, 95, .12); border-left-color: var(--akcent); }
.qg-nawigacja a:focus-visible { outline: 2px solid var(--zloto-jasne); outline-offset: 2px; }
.qg-nawigacja svg { flex: 0 0 auto; width: 20px; height: 20px; }
.qg-nawigacja__licznik {
	margin-left: auto; min-width: 24px; padding: 2px 8px; border-radius: 999px;
	background: var(--akcent); color: var(--granat-900);
	font-size: .8rem; font-weight: 700; text-align: center;
}
.qg-szkielet__dol {
	margin-top: auto; padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	display: grid; gap: 2px;
}
.qg-szkielet__dol a {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 12px; border-radius: 10px;
	color: var(--granat-300); text-decoration: none; font-size: .92rem;
}
.qg-szkielet__dol a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.qg-szkielet__dol a:focus-visible { outline: 2px solid var(--zloto-jasne); outline-offset: 2px; }
.qg-szkielet__dol svg { width: 18px; height: 18px; flex: 0 0 auto; }

.qg-szkielet__reszta { min-width: 0; display: flex; flex-direction: column; background: var(--tlo); }
/* Belka i listwa leżą nad dymkami z treści (kalendarz i menu konta mają 30),
   inaczej otwarty kalendarz rysowałby się na przyklejonej belce. */
.qg-gora {
	position: sticky; top: var(--qg-pasek-admin); z-index: 40;
	min-height: var(--qg-gora-h);
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 12px max(40px, calc((100% - var(--qg-kolumna)) / 2 + 40px));
	background: rgba(251, 250, 246, .92); backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--linia);
}
/* Nazwa galerii może mieć 200 znaków: okruszki i prawa strona kurczą się
   i ucinają wielokropkiem, menu konta nigdy nie wypada za ekran. */
.qg-gora__sciezka { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; font-size: .95rem; color: var(--tekst-slaby); }
.qg-gora__sciezka a { color: var(--tekst-slaby); text-decoration: none; white-space: nowrap; }
.qg-gora__sciezka a:hover { color: var(--tekst); }
.qg-gora__sciezka [aria-current] { color: var(--tekst); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qg-gora__sciezka svg { width: 14px; height: 14px; opacity: .6; flex: 0 0 auto; }
.qg-gora__prawo { display: flex; align-items: center; gap: 18px; flex: 0 1 auto; min-width: 0; }
.qg-gora__info { margin: 0; min-width: 0; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-naglowki); font-size: 1.05rem; color: var(--tekst); white-space: nowrap; }
.qg-gora__info span { font-family: var(--font-tekst); font-size: .92rem; color: var(--tekst-slaby); }
.qg-gora__info span::before { content: "·"; margin: 0 8px; }
/* Znak zaufania w belce kasy: kłódka i krótki napis, bez ramki przycisku. */
.qg-gora__znak { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; font-size: .92rem; font-weight: 600; color: var(--tekst-slaby); white-space: nowrap; }
.qg-gora__znak span { overflow: hidden; text-overflow: ellipsis; }
.qg-gora__znak svg { width: 18px; height: 18px; color: var(--zloto-tekst); flex: 0 0 auto; }

/* Konto: <details> zamiast skryptu — działa zanim cokolwiek się wczyta. */
.qg-konto-menu { position: relative; flex: 0 0 auto; }
.qg-konto-menu summary {
	list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer;
	padding: 5px 10px 5px 5px; border-radius: 999px;
	border: 1px solid var(--linia); background: var(--tlo-karta);
}
.qg-konto-menu summary::-webkit-details-marker { display: none; }
.qg-konto-menu summary:hover { border-color: var(--akcent); }
.qg-konto-menu summary:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.qg-konto-menu__awatar {
	display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
	background: var(--granat-900); color: var(--zloto-jasne);
	font-family: var(--font-naglowki); font-weight: 700;
}
.qg-konto-menu__nazwa { font-weight: 600; font-size: .95rem; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qg-konto-menu summary svg { width: 16px; height: 16px; color: var(--tekst-slaby); transition: transform .2s; }
.qg-konto-menu[open] summary svg { transform: rotate(180deg); }
.qg-konto-menu__lista {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 210px;
	list-style: none; margin: 0; padding: 6px;
	background: var(--tlo-karta); border: 1px solid var(--linia); border-radius: 12px; box-shadow: var(--cien);
}
.qg-konto-menu__lista a {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; border-radius: 8px;
	color: var(--tekst); text-decoration: none; font-size: .95rem;
}
.qg-konto-menu__lista a:hover { background: var(--tlo-alt); }
.qg-konto-menu__lista svg { width: 18px; height: 18px; color: var(--tekst-slaby); }

/* Kolumna treści stoi na środku miejsca obok paska bocznego. Przyklejona do
   lewej zostawiała na dużym monitorze pół ekranu pustki, a formularze lądowały
   w lewej jednej trzeciej (zgłoszenie Damiana z 20 września 2026 ze zrzutu
   kasy na ekranie 1900 px). Belka i stopka zostają pełnej szerokości — mają
   tło i linię przez cały pas — ale ich dopełnienie liczy się tak, żeby
   okruszki i odnośniki stały w jednej osi z treścią. */
.qg-szkielet__tresc { flex: 1; width: 100%; max-width: var(--qg-kolumna); margin-inline: auto; padding: 30px 40px 40px; }
.qg-szkielet__stopka {
	display: flex; flex-wrap: wrap; gap: 8px 22px;
	padding: 18px max(40px, calc((100% - var(--qg-kolumna)) / 2 + 40px)) 26px; border-top: 1px solid var(--linia);
	font-size: .84rem; color: var(--tekst-slaby);
}
.qg-szkielet__stopka a { color: var(--tekst-slaby); text-decoration: none; }
.qg-szkielet__stopka a:hover { color: var(--tekst); }
.qg-szkielet__stopka span { margin-left: auto; }

.qg-szkielet .qg-panel__naglowek { margin-bottom: 26px; }
.qg-szkielet .qg-panel__naglowek h1 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.qg-panel__pod { margin: 6px 0 0; color: var(--tekst-slaby); }
.qg-panel__pod code {
	background: var(--tlo-alt); border: 1px solid var(--linia); border-radius: 6px;
	padding: 1px 7px; letter-spacing: .06em; font-size: .9em;
}
/* Dopełnienie przewijania na dokumencie, nie na sekcjach: obejmuje kotwice
   z paska bocznego, ale też pola, do których klawiatura dowija stronę —
   bez tego pole z fokusem lądowało pod przyklejoną belką (WCAG 2.4.11). */
html:has(.qg-szkielet) { scroll-padding-top: calc(86px + var(--wp-admin--admin-bar--height, 0px)); }
.qg-szkielet .qg-panel__blok h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qg-panel__blok h3 { font-size: 1.05rem; margin: 0 0 12px; }
.qg-panel__blok h3:not(:first-child) { margin-top: 26px; }

/* Pulpit: kod QR i stan galerii w jednej karcie. */
.qg-pulpit { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 30px; align-items: start; }

/* Materiały do druku: kafle z podglądem i przyciskiem. */
.qg-druki-kafle { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.qg-druk-kafel {
	position: relative; display: flex; flex-direction: column;
	border: 1px solid var(--linia); border-radius: 14px; background: var(--tlo-karta); overflow: hidden;
}
.qg-druk-kafel__scena { display: grid; place-items: center; height: 184px; padding: 16px; background: var(--tlo-alt); text-decoration: none; }
.qg-druk-kafel__plik {
	display: grid; place-items: center; width: 84px; height: 108px; border-radius: 8px;
	background: var(--tlo-karta); border: 1px solid var(--linia); color: var(--zloto-tekst);
}
.qg-druk-kafel__plik svg { width: 34px; height: 34px; }

/* Ustawienia: karty jednego formularza, pola w dwóch kolumnach, zapis
   jednym przyciskiem na końcu — jak na wizualizacji. */
/* Najwyżej dwie kolumny (do 988 px treści), jedna poniżej ~700 px; min(100%)
   pilnuje, żeby na 320 px tor nie był szerszy od karty. */
.qg-pola { display: grid; gap: 4px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
/* Grupa przełączników („Publikowanie”) to <fieldset> z klasą pola — bez
   przeglądarkowej ramki, żeby stała w rzędzie z listami wyboru. */
fieldset.qg-pole { border: 0; padding: 0; min-width: 0; }
.qg-zapis { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin: -4px 0 22px; }
.qg-zapis .qg-btn { min-width: 200px; }
/* Wąski formularz (konto) też na środku kolumny — inaczej przy szerokich
   kartach obok wyglądałby na zsunięty w lewo. */
.qg-panel__waski { max-width: 720px; margin-inline: auto; }

/* Mniejszy laptop: węższy pasek i ciaśniejsze marginesy, ale wciąż pasek. */
@media (max-width: 1100px) {
	.qg-szkielet { --qg-bok: 232px; }
	.qg-szkielet__bok { padding: 18px 12px 14px; }
	.qg-nawigacja a { font-size: .92rem; padding: 10px 10px; gap: 10px; }
	.qg-gora, .qg-szkielet__tresc, .qg-szkielet__stopka { padding-left: 28px; padding-right: 28px; }
	/* Na węższym ekranie nazwa i data z prawej się nie mieszczą — nazwa i tak
	   stoi w ścieżce obok i w nagłówku strony tuż pod belką. */
	.qg-gora__info { display: none; }
}
/* Telefon i tablet (ten sam próg co reszta motywu): pasek boczny staje się
   przyklejoną listwą u góry — logo i nazwy sekcji do przewijania w bok;
   konto zostaje w belce. */
@media (max-width: 860px) {
	.qg-szkielet { display: block; --qg-gora-h: 0px; }
	/* Listwa ma ok. 93 px (logo i zakładki); kotwice i fokus stają pod nią. */
	html:has(.qg-szkielet) { scroll-padding-top: calc(106px + var(--wp-admin--admin-bar--height, 0px)); }
	.qg-szkielet__bok {
		position: sticky; top: var(--qg-pasek-admin); z-index: 40;
		height: auto; padding: 10px 12px 0; overflow: visible;
	}
	.qg-szkielet__logo { display: flex; align-items: center; gap: 12px; padding: 4px 4px 10px; margin-bottom: 0; border-bottom: 0; }
	.qg-szkielet__logo img { height: 34px; }
	.qg-szkielet__logo span { margin: 0; }
	.qg-nawigacja ul { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
	.qg-nawigacja ul::-webkit-scrollbar { display: none; }
	.qg-nawigacja a {
		flex: 0 0 auto; padding: 8px 12px 10px;
		/* impeccable-disable-next-line border-accent-on-rounded -- zakładka listwy na telefonie: podkreślenie przy border-radius: 0 w tej samej regule */
		border-left: 0; border-bottom: 3px solid transparent; border-radius: 0;
		font-size: .9rem; white-space: nowrap;
	}
	.qg-nawigacja a[aria-current] { border-bottom-color: var(--akcent); background: none; }
	.qg-nawigacja svg { display: none; }
	.qg-szkielet__dol { display: none; }
	.qg-gora { position: static; padding: 12px 16px; }
	.qg-gora__info { display: none; }
	.qg-konto-menu__nazwa { display: none; }
	.qg-szkielet__tresc { padding: 22px 16px 32px; }
	.qg-szkielet__stopka { padding: 16px; }
	.qg-szkielet__stopka span { margin-left: 0; width: 100%; }
	.qg-pulpit { grid-template-columns: 1fr; }
	.qg-zapis .qg-btn { width: 100%; }
}

/* --- Komunikaty panelu --- */
.qg-komunikat {
	background: var(--tlo-alt); border: 1px solid var(--linia);
	border-radius: 10px; padding: 13px 18px; margin: 0 0 20px;
}
.qg-komunikat--ok { border-color: var(--akcent); background: var(--akcent-tlo); }
.qg-komunikat--blad { border-color: #b3261e; }

/* --- Zdjęcie w nagłówku galerii --- */
/* Podgląd udaje górę strony gościa: zdjęcie przycięte tak samo, ta sama
   granatowa nakładka i karta z nazwą galerii. Proporcje 5 : 2 to kompromis
   między nagłówkiem na telefonie (ok. 1,9 : 1) a na komputerze (ok. 5 : 1). */
.qg-okladka {
	position: relative; margin: 0 0 12px; aspect-ratio: 5 / 2; max-width: 100%;
	border-radius: 12px; overflow: hidden; background: var(--granat-800);
	display: flex; align-items: flex-end; justify-content: center;
}
.qg-okladka__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qg-okladka::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(11, 20, 38, .18) 0%, rgba(11, 20, 38, .06) 45%, rgba(11, 20, 38, .5) 100%);
}
.qg-okladka__tytul {
	position: relative; z-index: 2; max-width: 88%;
	padding: 8px 20px 10px; border-radius: 12px 12px 0 0;
	background: rgba(251, 250, 246, .84); backdrop-filter: blur(9px);
	font-family: var(--font-naglowki); font-size: 1.15rem; font-weight: 600; line-height: 1.2;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Wygląd galerii: dwa przyciski i oś czasu --------------------------- */
/* Projekt Damiana z 21 września 2026: złoty „Dodaj zdjęcie”, wybór pliku
   od razu go wysyła. Przycisk to etykieta z przezroczystym polem pliku na
   całej powierzchni. Złoto jest tu ciemniejsze
   niż --akcent: jasny napis na #c9a85f ma 2,4:1 i w słońcu znika, a na tym
   gradiencie wielkie pogrubione litery mają co najmniej 3,5:1. */
.qg-dodaj-rzad { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 22px; margin: 24px 0 12px; }
.qg-dodaj {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
	min-width: 250px; padding: 18px 32px; border-radius: 12px;
	color: #fff8ec; font-weight: 700; font-size: 1.12rem; letter-spacing: .07em; text-transform: uppercase;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .25); cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.qg-dodaj--zdjecie {
	background: linear-gradient(135deg, #a67d45 0%, #8a6630 55%, #735325 100%);
	box-shadow: 0 14px 26px -12px rgba(115, 83, 37, .75), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.qg-dodaj:hover { transform: translateY(-2px); filter: brightness(1.06); }
.qg-dodaj:active { transform: translateY(0); }
.qg-dodaj:focus-within { outline: 3px solid var(--fokus); outline-offset: 3px; }
.qg-dodaj__pole { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.qg-dodaj__ikona { width: 30px; height: 30px; flex: 0 0 auto; }
/* Przycisk w trakcie wysyłki. */
.qg-dodaj--zajety { opacity: .6; pointer-events: none; }
.qg-dodaj-opis { max-width: 640px; margin: 4px auto 0; text-align: center; font-size: .86rem; color: var(--tekst-slaby); }
.qg-okladka-formularz .qg-postep { margin-top: 16px; }
.qg-okladka-przywroc { margin-top: 14px; text-align: center; }
@media (max-width: 600px) {
	.qg-dodaj { flex: 1 1 100%; min-width: 0; padding: 16px 20px; font-size: 1.02rem; }
}

/* Oś czasu: co wstawić przed weselem, co w jego trakcie i co zostaje potem. */
.qg-os { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--linia); }
.qg-os__tytul { margin: 0 0 16px; font-size: 1.05rem; }
.qg-os__etapy { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.qg-os__etap { position: relative; padding-top: 18px; }
/* Kreska łącząca kropki — rysowana tłem etapu, żeby nie dokładać elementów. */
.qg-os__etap::before { content: ""; position: absolute; left: 0; right: -18px; top: 6px; height: 1px; background: var(--linia); }
.qg-os__etap:last-child::before { right: 0; }
.qg-os__kropka { position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--tlo-karta); border: 2px solid var(--linia); }
.qg-os__kropka--zloto { background: var(--akcent); border-color: var(--akcent); }
.qg-os__etap strong { display: block; margin-bottom: 4px; }
.qg-os__etap p { margin: 0; color: var(--tekst-slaby); font-size: .92rem; }
.qg-os__stopka { margin: 18px 0 0; color: var(--tekst-slaby); font-size: .88rem; }

/* Pole wyboru pliku. Natywny przycisk wygląda w każdej przeglądarce inaczej
   i nijak do reszty panelu, więc dostaje wygląd przycisku obrysowego. */
.qg-pole input[type="file"] { display: block; width: 100%; font: inherit; color: var(--tekst-slaby); }
.qg-pole input[type="file"]::file-selector-button {
	font: inherit; font-weight: 700; color: var(--tekst); cursor: pointer;
	margin-right: 12px; padding: 10px 18px; border-radius: var(--promien-przycisk);
	border: 1px solid var(--linia-pole); background: var(--tlo-karta);
}
.qg-pole input[type="file"]::file-selector-button:hover { background: var(--tlo-alt); }
.qg-pole input[type="file"]:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

/* --- Konto klienta --- */
.qg-panel__dane { margin: 0 0 6px; font-size: 1.05rem; }
.qg-panel__dane strong { word-break: break-all; }
.qg-panel__blok code {
	background: var(--tlo-alt); border: 1px solid var(--linia);
	border-radius: 6px; padding: 2px 6px; word-break: break-all;
}

/* --- Moderacja --- */
.qg-moderacja__pasek {
	display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px;
}
.qg-moderacja__pasek .qg-btn { padding: 11px 20px; min-height: 44px; }
.qg-wszystkie { color: var(--tekst-slaby); font-size: .92rem; }

.qg-moderacja {
	display: grid; gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.qg-kafel {
	display: block; position: relative; cursor: pointer;
	border: 1px solid var(--linia); border-radius: 10px; overflow: hidden;
	background: var(--tlo-alt);
}
.qg-kafel input {
	position: absolute; top: 9px; left: 9px; z-index: 2;
	width: 22px; height: 22px; cursor: pointer;
}
.qg-kafel img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
/* Zdjęcie, któremu kolejka jeszcze liczy miniaturę (od 23.09.2026). */
.qg-kafel__czeka { display: block; width: 100%; aspect-ratio: 1; background: var(--linia, #e6dfd0); }
.qg-kafel:has(input:checked) { border-color: var(--akcent); box-shadow: 0 0 0 2px var(--akcent); }

/* --- Formularze panelu --- */
.qg-formularz { margin: 0; }
.qg-formularz--rzad {
	display: grid; gap: 16px; align-items: end;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.qg-pole { margin: 0 0 18px; }
/* Pole ukryte atrybutem hidden ma zniknąć także wtedy, gdy któraś z reguł
   niżej nada mu własny display. */
.qg-pole[hidden] { display: none; }

/* --- Kalendarz daty przyjęcia --- */
.qg-kal { position: relative; }
.qg-kal__pole {
	width: 100%; text-align: left; font: inherit; cursor: pointer;
	color: var(--tekst); background: var(--tlo); border: 1px solid var(--linia);
	border-radius: 10px; padding: 12px 14px; min-height: 48px;
}
.qg-kal__pole:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.qg-kal__panel {
	position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
	width: min(320px, 100%);
	background: var(--tlo-karta); border: 1px solid var(--linia);
	border-radius: var(--promien); box-shadow: var(--cien); padding: 14px;
}
.qg-kal__panel[hidden] { display: none; }
.qg-kal__pasek { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.qg-kal__miesiac { font-family: var(--font-naglowki); font-size: 1.15rem; }
.qg-kal__strzalka {
	font: inherit; cursor: pointer; color: var(--tekst);
	background: none; border: 1px solid var(--linia); border-radius: 8px;
	width: 36px; height: 36px; line-height: 1;
}
.qg-kal__strzalka:hover { border-color: var(--akcent); color: var(--zloto-tekst); }
.qg-kal__siatka { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.qg-kal__dzien-tyg { font-size: .76rem; color: var(--tekst-slaby); padding: 4px 0; }
.qg-kal__dzien {
	font: inherit; cursor: pointer; color: var(--tekst);
	background: none; border: 0; border-radius: 8px;
	padding: 8px 0; min-height: 38px;
}
.qg-kal__dzien:hover { background: var(--akcent-tlo); }
.qg-kal__dzien--dzis { outline: 1px solid var(--linia); }
.qg-kal__dzien--wybrany { background: var(--akcent); color: var(--granat-900); font-weight: 700; }
.qg-kal__dzien--niedostepny { color: var(--tekst-slaby); opacity: .4; cursor: not-allowed; }
.qg-kal__dzien--niedostepny:hover { background: none; }
/* Data ustalona raz na zawsze — pokazujemy ją, nie edytujemy. */
.qg-data-ustalona { display: block; font-size: 1.05rem; color: var(--zloto-tekst); }
/* Pole daty otwiera kalendarz kliknięciem w całą szerokość, nie tylko w ikonę. */
.qg-pole input[type="date"] { cursor: pointer; }
.qg-formularz--rzad .qg-pole { margin: 0; }
.qg-pole label, .qg-pole legend {
	display: block; margin-bottom: 6px; font-weight: 600; font-size: .95rem;
}
.qg-pole small { display: block; margin-top: 6px; color: var(--tekst-slaby); font-size: .86rem; }
.qg-pole input[type="text"],
.qg-pole input[type="date"],
.qg-pole input[type="password"],
.qg-pole select {
	width: 100%; font: inherit; color: var(--tekst);
	background: var(--tlo); border: 1px solid var(--linia-pole);
	border-radius: 10px; padding: 12px 14px; min-height: 48px;
}
.qg-pole input:focus-visible, .qg-pole select:focus-visible {
	outline: 2px solid var(--fokus); outline-offset: 1px;
}
.qg-pole fieldset { border: 0; padding: 0; margin: 0; }
.qg-pole--przycisk .qg-btn { width: 100%; }

/* Formularz logowania rysuje WordPress, więc trzeba trafić w jego klasy. */
.qg-panel__logowanie .login-username,
.qg-panel__logowanie .login-password { margin: 0 0 18px; }
.qg-panel__logowanie label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .95rem; }
.qg-panel__logowanie input[type="text"],
.qg-panel__logowanie input[type="password"] {
	width: 100%; font: inherit; color: var(--tekst);
	background: var(--tlo); border: 1px solid var(--linia);
	border-radius: 10px; padding: 12px 14px; min-height: 48px;
}
.qg-panel__logowanie .login-remember { margin: 0 0 20px; color: var(--tekst-slaby); }
.qg-panel__logowanie .login-remember label { display: inline; font-weight: 400; }
.qg-panel__logowanie .login-submit input {
	display: block; width: 100%;
	background: var(--akcent); color: var(--granat-900); border: 0; border-radius: var(--promien-przycisk);
	padding: 14px 28px; min-height: 50px; font: inherit; font-weight: 700; cursor: pointer;
}
.qg-panel__logowanie .login-submit input:hover { background: var(--akcent-ciemny); }

/* Formularze WooCommerce w /moje-konto/ (logowanie, nowe hasło, dane konta)
   szły w surowych stylach wtyczki: pola 31 px, „Zaloguj się” 38 px, a „Pokaż
   hasło” 22×22 px — poniżej 24 px z WCAG 2.5.8 (22.09.2026, audyt FRONT-10).
   Cel dotyku 44 px dla wszystkich trzech. Oko zostaje na środku pola, bo
   WooCommerce centruje je przez top: 50% i translateY; trzy klasy w selektorze
   biją jego `.woocommerce form .show-password-input` przy right. */
.woocommerce-form .woocommerce-Input { min-height: 44px; }
.woocommerce-form .woocommerce-button { min-height: 44px; }
/* Pod 44-pikselowym okiem nie ma tekstu: WooCommerce daje 2.5rem tylko dla
   type=password, a po „Pokaż hasło” pole jest type=text. Cztery klasy biją
   jego `.woocommerce form .form-row .input-text` (0,3,1). */
.woocommerce-form .form-row .password-input .woocommerce-Input { padding-right: 44px; }
.woocommerce-form .password-input .show-password-input {
	width: 44px; height: 44px; right: 0;
	display: grid; place-items: center;
}

/* --- Zgoda na Google Analytics (qg_theme_analityka w functions.php) --- */
/* Oba przyciski są jednakowe celowo: odmowa nie może być trudniejsza ani
   mniej widoczna niż zgoda. Baner nie blokuje strony — dopóki nikt nie
   kliknie, Google Analytics się nie wczytuje. Na dole ekranu, wyśrodkowany
   w poziomie (prośba Damiana 23.09.2026; wcześniej lewy dolny róg). */
.qg-zgoda {
	position: fixed; z-index: 40;
	left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%);
	width: calc(100% - 32px); max-width: 520px;
	padding: 20px 22px 18px;
	background: var(--tlo-karta); color: var(--tekst);
	border: 1px solid var(--akcent); border-radius: var(--promien);
	box-shadow: var(--cien);
	font-size: .94rem; line-height: 1.55;
	text-align: center;
}
.qg-zgoda__tekst { margin: 0 0 14px; color: var(--tekst-slaby); }
.qg-zgoda__przyciski { display: flex; gap: 10px; }

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

/* Odnośnik pomijający („Przejdź do treści” w header.php i header-panel.php):
   ukryty jak .screen-reader-text, po otrzymaniu fokusu wyjeżdża w lewy górny
   róg okna. Nadpisuje clip i white-space, inaczej zostałby niewidoczny mimo
   fokusu (22.09.2026, audyt FRONT-3). */
.qg-pomin:focus {
	position: fixed; top: 8px; left: 8px; z-index: 60;
	width: auto; height: auto; clip: auto; white-space: normal;
	padding: 10px 16px; border-radius: 6px;
	background: var(--granat-900); color: #fff; text-decoration: none; font-weight: 700;
	outline: 2px solid var(--zloto-jasne); outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Panel: stan pakietu i przyciski pod nim
   --------------------------------------------------------------------- */
.qg-pakiet__stan { margin: 0 0 14px; color: var(--tekst-slaby); }
.qg-pakiet__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 12px;
}
.qg-pakiet__akcje:last-child { margin-bottom: 0; }

/* --- Pusty koszyk: miejsce zarezerwowane, zanim skrypt go dorysuje ------ */
/* Z serwera przychodzi szkielet 458 px, po hydratacji pusty koszyk z „Naszymi
   pakietami” ma 1705 px na telefonie (jedna kolumna, zdjęcia 300 px) i 682 px
   od tabletu w górę (pakiety w jednym rzędzie) — stopka skakała 2–3 s po
   wczytaniu, CLS 0,24 (22.09.2026, audyt FRONT-9; zmierzone na produkcji
   i lokalnie, 390 i 768 px). Klasę body daje functions.php tylko przy pustym
   koszyku.

   25.09.2026 przemierzone po wyglądzie fotoapki (karty pakietów z
   fotoapka-kasa.css): 766 px przy 1440, 703 przy 1100 (trzy karty w rzędzie),
   1144 przy 768 (kolumna 680 px, dwie karty w rzędzie), 1630 przy 390
   i 1607 przy 360 (jedna kolumna). Rezerwa trochę niższa od treści — lepiej
   mały ruch stopki niż pusty pas pod pakietami. */
body.qg-koszyk-pusty .wp-block-woocommerce-cart { min-height: 1100px; }
@media (min-width: 1100px) {
	body.qg-koszyk-pusty .wp-block-woocommerce-cart { min-height: 700px; }
}
@media (max-width: 480px) {
	body.qg-koszyk-pusty .wp-block-woocommerce-cart { min-height: 1600px; }
}

/* ---------------------------------------------------------------------
   Kasa blokowa WooCommerce
   Własny CSS WooCommerce zakłada jasną stronę: pola zostają białe nawet
   w trybie ciemnym, a etykiety — które leżą WEWNĄTRZ pola — dostają
   `color: inherit`, czyli jasny tekst motywu. Prawie biała etykieta na
   białym polu to kontrast 1,16:1, czyli tekst niewidoczny.

   Selektory muszą powtarzać strukturę WooCommerce i dołożyć `body`,
   bo arkusz `checkout.css` ładuje się PO motywie i wygrywa przy równej
   specyficzności. Bez tego reguły są wczytane, a mimo to nie działają.

   Kolory biorą się z tokenów, więc jeden zestaw reguł obsługuje
   tryb jasny i ciemny — tokeny przełączają się same.
   --------------------------------------------------------------------- */

body .wc-block-components-form .wc-block-components-text-input input,
body .wc-block-components-form .wc-block-components-text-input input[type="text"],
body .wc-block-components-form .wc-block-components-text-input input[type="email"],
body .wc-block-components-form .wc-block-components-text-input input[type="tel"],
body .wc-block-components-form .wc-block-components-text-input input[type="number"],
body .wc-block-components-form .wc-block-components-text-input input[type="url"],
body .wc-block-components-text-input input,
body .wc-block-checkout .wc-blocks-components-select__select,
body .wc-block-checkout textarea,
body .wc-block-components-textarea {
	background-color: var(--tlo-karta);
	color: var(--tekst);
	border: 1px solid var(--linia-pole);
	border-radius: 10px;
}

body .wc-block-components-form .wc-block-components-text-input label,
body .wc-block-components-text-input label,
body .wc-block-checkout .wc-blocks-components-select__label {
	color: var(--tekst-slaby);
}

body .wc-block-checkout input::placeholder,
body .wc-block-checkout textarea::placeholder {
	color: var(--tekst-slaby);
	opacity: 1;
}

body .wc-block-components-text-input input:focus,
body .wc-block-checkout textarea:focus,
body .wc-block-checkout .wc-blocks-components-select__select:focus {
	border-color: var(--akcent);
	outline: 2px solid var(--fokus);
	outline-offset: 1px;
}

/* Notatka do zamówienia. WooCommerce ma dwie reguły o wyższej
   specyficzności niż zestaw powyżej: `:not(:placeholder-shown)` wymusza
   ciemny tekst, gdy w polu cokolwiek jest, a `:focus` wymusza białe tło.
   W trybie ciemnym wpisana notatka po prostu znikała. Powtarzamy oba
   stany z własnymi kolorami. */
body .wc-block-checkout textarea:not(:placeholder-shown),
body .wc-block-components-textarea:not(:placeholder-shown),
body .wc-block-checkout textarea:focus,
body .wc-block-components-textarea:focus {
	background-color: var(--tlo-karta);
	color: var(--tekst);
}

body .wc-block-components-text-input.is-active label {
	color: var(--zloto-tekst);
}

/* Autouzupełnianie Chrome wymusza własne tło — wypełnienie cieniem to
   jedyny sposób, żeby je nadpisać. */
body .wc-block-checkout input:-webkit-autofill,
body .wc-block-checkout input:-webkit-autofill:hover,
body .wc-block-checkout input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--tekst);
	box-shadow: inset 0 0 0 100px var(--tlo-karta);
	caret-color: var(--tekst);
}

body .wc-block-checkout .wc-block-components-totals-item,
body .wc-block-checkout .wc-block-components-order-summary-item,
body .wc-block-components-radio-control__option,
body .wc-block-components-checkbox__label {
	color: var(--tekst);
}

body .wc-block-checkout .wc-block-components-totals-wrapper,
body .wc-block-checkout .wc-block-components-panel,
body .wc-block-components-radio-control__option {
	border-color: var(--linia);
}

body .wc-block-components-product-metadata,
body .wc-block-checkout .wc-block-components-order-summary-item__description {
	color: var(--tekst-slaby);
}

body .wc-block-components-checkout-place-order-button {
	background: var(--akcent);
	color: var(--granat-900);
	border-radius: var(--promien-przycisk);
	font-weight: 700;
}

body .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
	background: var(--akcent-ciemny);
}

/* Komunikatów WooCommerce świadomie NIE przemalowujemy. To zamknięte
   pudełka z własną, spójną parą kolorów — jasne tło i ciemny tekst —
   czytelne na dowolnym tle strony. Nadpisanie samego koloru tekstu bez
   tła daje biały napis na jasnoczerwonym polu, czyli błąd, którego nikt
   nie przeczyta. Dokładnie ten przypadek zablokował raz płatność. */

/* ---------------------------------------------------------------------
   „+ Dodaj nr mieszkania, lokalu, itp.” na koniec formularza adresu

   Domyślnie odnośnik siedzi tuż pod polem „Adres” i rozbija formularz
   w środku danych, które i tak przepisuje się jednym ciągiem: ulica,
   kod pocztowy, miejscowość. Trafia więc pod „Telefon”.

   Musi to zrobić CSS, choć wolałbym dane. WooCommerce renderuje numer
   lokalu **na sztywno razem z polem „Adres”**, a dla jego własnej
   pozycji zwraca `null`:

       if ( "address_1" === klucz ) return <Adres + NrLokalu />;
       if ( "address_2" === klucz ) return null;

   Dlatego filtry `woocommerce_default_address_fields`
   i `woocommerce_get_country_locale` nic tu nie dają — sprawdzone
   na żywej kasie: `index` zmienia się w danych, a układ zostaje.

   Selektory celują w `__billing-fields` / `__shipping-fields`, bo tę samą
   klasę `address-form` nosi formularz kontaktowy (e-mail, „Utwórz konto”),
   którego ruszać nie wolno.

   Cena tej sztuczki: `order` przestawia obraz, ale nie kolejność
   tabulatora. Ktoś idący po formularzu klawiaturą trafi na ten
   odnośnik po polu „Adres”, mimo że widzi go na dole. Ukryte pole
   `address_2-hidden-input` ma `tabindex="-1"`, więc jego to nie dotyczy.
   --------------------------------------------------------------------- */

body .wc-block-checkout__billing-fields .wc-block-components-address-form > *,
body .wc-block-checkout__shipping-fields .wc-block-components-address-form > * {
	order: 0;
}

body .wc-block-checkout__billing-fields .wc-block-components-address-form > .wc-block-components-address-form__address_2-toggle,
body .wc-block-checkout__billing-fields .wc-block-components-address-form > .wc-block-components-address-form__address_2-hidden-input,
body .wc-block-checkout__billing-fields .wc-block-components-address-form > .wc-block-components-address-form__address_2,
body .wc-block-checkout__shipping-fields .wc-block-components-address-form > .wc-block-components-address-form__address_2-toggle,
body .wc-block-checkout__shipping-fields .wc-block-components-address-form > .wc-block-components-address-form__address_2-hidden-input,
body .wc-block-checkout__shipping-fields .wc-block-components-address-form > .wc-block-components-address-form__address_2 {
	order: 1;
}

/* Na telefonie WooCommerce zostawia formularz blokiem, a na bloku `order`
   nie działa w ogóle — odnośnik wracał wtedy na środek, pod „Adres”.
   Poniżej 480 px włączamy więc flex samodzielnie. Kolumna, nie zawijany
   rząd: pola mają zostać pełnej szerokości, jedno pod drugim, dokładnie
   jak w układzie blokowym.

   Granica jest celowo niska i celowo w pikselach okna, a nie kontenera.
   Pierwsze podejście używało `@container (max-width: 699.98px)`, licząc
   na próg 700 px z arkusza WooCommerce. Skutek był odwrotny do
   zamierzonego: reguła łapała także zwykłe okna — blok kasy ma tu na
   stałe 680 px — i **rozbijała układ dwukolumnowy**, stawiając „Imię”
   i „Nazwisko” jedno pod drugim. Sprawdzone pomiarem przy 760 i 885 px.
   Przy 480 px dwóch kolumn i tak nie ma, więc nie ma czego zepsuć. */
@media (max-width: 480px) {
	body .wc-block-checkout__billing-fields .wc-block-components-address-form,
	body .wc-block-checkout__shipping-fields .wc-block-components-address-form {
		display: flex;
		flex-direction: column;
	}
}

/* ---------------------------------------------------------------------
   Sekcja „Dodatkowe informacje o zamówieniu” — kolejność i oznaczenia

   Docelowo: 1) zgoda na natychmiastowe wykonanie, 2) regulamin,
   3) notatka do zamówienia, 4) faktura na firmę.

   Regulamin i notatkę przestawiliśmy w treści strony (bloki
   `checkout-terms-block` i `checkout-order-note-block`), więc tam kolejność
   jest prawdziwa — razem z tabulatorem i czytnikiem ekranu.

   Zostaje jeden problem: zgoda i faktura siedzą w **tym samym** bloku pól
   dodatkowych, a regulamin i notatka to dwa osobne bloki obok niego. Żeby
   wsunąć je pomiędzy, trzeba rozpuścić blok pól dodatkowych — `display:
   contents` sprawia, że jego pola stają się bezpośrednimi elementami
   formularza i dopiero wtedy `order` może je przestawić względem tamtych.

   Sam nagłówek sekcji, zgoda i regulamin zostają na `order: 0`, faktura
   z polami firmy schodzi na 1, a przycisk zamówienia na 2 — inaczej
   wylądowałby nad fakturą. */

body .wc-block-checkout__form {
	display: flex;
	flex-direction: column;
}

body .wc-block-checkout__form > .wp-block-woocommerce-checkout-additional-information-block,
body .wc-block-checkout__form > .wp-block-woocommerce-checkout-additional-information-block > .wc-block-components-checkout-step__content,
body .wc-block-checkout__form > .wp-block-woocommerce-checkout-additional-information-block > .wc-block-components-checkout-step__content > .wc-block-components-address-form {
	display: contents;
}

body .wc-block-components-address-form__qrgaleria-faktura,
body .wc-block-components-address-form__qrgaleria-firma,
body .wc-block-components-address-form__qrgaleria-nip {
	order: 1;
}

body .wc-block-checkout__form > .wc-block-checkout__actions {
	order: 2;
	/* Blok pól dodatkowych miał dolny margines, który oddzielał go od
	   przycisku. Po rozpuszczeniu zniknął razem z nim, więc odstęp
	   przenosimy na sam przycisk. */
	margin-top: 24px;
}

/* Po rozpuszczeniu bloku znika jego dolny margines, więc zgoda i regulamin
   stykałyby się ze sobą. Odstęp przywracamy na polu zgody. */
body .wc-block-components-address-form__qrgaleria-natychmiast {
	margin-bottom: 16px;
}

/* Które pola trzeba zaznaczyć, żeby kupić galerię, a które są dobrowolne.
   WooCommerce sam tego nie pokazuje: pole obowiązkowe wygląda dokładnie
   tak samo jak dobrowolne i klient dowiaduje się o różnicy dopiero wtedy,
   gdy kasa odmawia przyjęcia zamówienia.

   Blok regulaminu dostaje oznaczenie tylko z kwadracikiem: bez niego to samo
   zdanie „składając zamówienie, akceptujesz…”, a „wymagane” pod zdaniem, którego
   nie da się zaznaczyć, myliło (25.09.2026). Zgodę na regulamin daje wtedy pole
   silnika qrgaleria-regulamin — ono też jest wymagane. */
body .wc-block-components-address-form__qrgaleria-natychmiast .wc-block-components-checkbox__label::after,
body .wc-block-components-address-form__qrgaleria-regulamin .wc-block-components-checkbox__label::after,
body .wc-block-checkout__terms .wc-block-components-checkbox .wc-block-components-checkbox__label::after,
body .wc-block-checkout__order-notes .wc-block-components-checkbox__label::after,
body .wc-block-components-address-form__qrgaleria-faktura .wc-block-components-checkbox__label::after {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: 2px;
}

body .wc-block-components-address-form__qrgaleria-natychmiast .wc-block-components-checkbox__label::after,
body .wc-block-components-address-form__qrgaleria-regulamin .wc-block-components-checkbox__label::after,
body .wc-block-checkout__terms .wc-block-components-checkbox .wc-block-components-checkbox__label::after {
	content: "wymagane";
	background: var(--akcent-tlo);
	/* Atrament, nie --zloto-tekst: w fotoapce to pomarańcz #c93a1e, który na
	   różowym tle znaczka ma 4,2:1 — za mało dla 11 px (25.09.2026, recenzja). */
	color: var(--fa-atrament, var(--zloto-tekst));
}

body .wc-block-checkout__order-notes .wc-block-components-checkbox__label::after,
body .wc-block-components-address-form__qrgaleria-faktura .wc-block-components-checkbox__label::after {
	content: "opcjonalnie";
	background: var(--tlo-alt);
	color: var(--tekst-slaby);
}

/* ---------------------------------------------------------------------
   Koszyk, kasa i strona po zakupie w szkielecie (od 18 września 2026)
   Od 25.09.2026 wygląd fotoapki (projekt „Koszyk i kasa”, ekrany K1–K4)
   jest w fotoapka-kasa.css: górna belka z krokami zamiast paska bocznego,
   formularz w białych kartach, podsumowanie z przyciskiem w atramentowej
   karcie. Stare reguły ntalio (kolumna 680 px, karta zgód z kawałków,
   numery kroków na granacie, pergamin) zostały usunięte — historia w gicie.
   Reguły wyżej (pola, adres, kolejność zgód, oznaczenia) zostają wspólne.
   --------------------------------------------------------------------- */

/* --- Pasek postępu paczki ZIP --------------------------------------- */
/* Pakowanie idzie w tle i przy pełnej galerii trwa kilkanaście minut. Bez
   paska strona mówiła tylko „odśwież za chwilę", co dla klienta wygląda
   dokładnie tak samo jak proces, który się zaciął. */
.qg-postep { margin: 0 0 18px; }
.qg-postep__opis { margin: 0 0 10px; font-weight: 600; }
.qg-postep__tor {
	height: 10px; border-radius: 999px; overflow: hidden;
	background: var(--tlo-alt); border: 1px solid var(--linia);
}
.qg-postep__wypelnienie {
	display: block; height: 100%; width: 0;
	background: var(--akcent); border-radius: 999px;
	/* impeccable-disable-next-line layout-transition -- pasek postępu wysyłki i pakowania: szerokość jest jego treścią */
	transition: width .4s ease;
}
.qg-postep__male { margin-top: 10px; font-size: .9rem; }

/* Dopóki worker nie weźmie zadania, nie ma czego mierzyć — a pasek stojący
   na zerze wygląda jak zawieszony. Zamiast niego przesuwa się smuga. */
.qg-postep--czeka .qg-postep__wypelnienie {
	width: 38% !important;
	animation: qg-postep-czeka 1.6s ease-in-out infinite;
}
@keyframes qg-postep-czeka {
	0%   { transform: translateX(-110%); }
	100% { transform: translateX(285%); }
}
@media (prefers-reduced-motion: reduce) {
	/* Smuga jedzie przez cały tor, więc przy ograniczonym ruchu znika zupełnie.
	   Zostaje wypełniony, przygaszony pasek: „trwa, ale nie wiadomo ile". */
	.qg-postep--czeka .qg-postep__wypelnienie {
		animation: none; width: 100% !important; opacity: .4;
	}
}

/* Kto poprosił system o ograniczenie ruchu, zwykle ma po temu powód: zawroty
   głowy, migrena, nadwrażliwość przedsionkowa. Przejścia zostawiamy szczątkowe
   zamiast zerowych — element nadal potwierdza kliknięcie, tylko nie jedzie
   przez ekran. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Druk ---------------------------------------------------------------- */
/* Regulamin i polityka drukowane do dokumentów (potwierdzenie umowy,
   odstąpienie) bez przycisków i banera cookies — elementy fixed Chrome
   powtarza na każdej kartce, więc baner zasłaniał tekst (22.09.2026, audyt
   FRONT-5). Nagłówek i stopkę fotoapki chowa fotoapka.css. Zostaje sama
   treść: czarna na białym, odnośniki podkreślone, tabele i nagłówki nie
   łamią się między kartkami. */
@media print {
	.qg-zgoda, .qg-pomin, .qg-btn, video, dialog, iframe { display: none !important; }
	body { background: #fff; color: #000; padding: 0; }
	a { color: #000; text-decoration: underline; }
	h1, h2, h3 { break-after: avoid; }
	/* Bez collapse każda komórka ma własną ramkę z 2 px odstępu — siatka w siatce. */
	table { border-collapse: collapse; break-inside: avoid; }
	tr, figure { break-inside: avoid; }
	th, td { border: 1px solid #000; padding: 4px 6px; text-align: left; vertical-align: top; }
}