/*
Theme Name: QRGaleria
Theme URI: https://example.com/qrgaleria
Author: QRGaleria
Description: Motyw strony sprzedażowej platformy galerii eventowej z kodem QR. Współdzieli paletę i typografię ze stroną gościa, żeby przejście z reklamy do produktu nie wyglądało jak zmiana firmy.
Version: 0.10.47
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: qrgaleria-theme
*/

/* ---------------------------------------------------------------------
   Kroje pisma — szczegóły i licencje w fonts/CZCIONKI.md

   Pliki są własne, nie z Google Fonts: inaczej każde wejście na stronę
   wysyłałoby adres IP odwiedzającego na serwer Google.

   Dwa pliki na krój to nie pomyłka. unicode-range sprawia, że wariant
   latin-ext pobiera się dopiero przy pierwszym polskim znaku diakrytycznym.
   --------------------------------------------------------------------- */
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	/* Krój zmienny: jeden plik na cały zakres grubości. */
	font-weight: 300 700;
	font-display: swap;
	src: url("fonts/cormorant-garamond-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Parisienne";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/parisienne-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Parisienne";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/parisienne-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------
   Tokeny — te same wartości co na stronie gościa (templates/parts/head.php)
   --------------------------------------------------------------------- */
:root {
	/* Jedna paleta, jasna, dla wszystkich. Wariant ciemny został usunięty
	   świadomie: galeria weselna ma wyglądać tak samo u pary młodej i u każdego
	   gościa, niezależnie od tego, jak kto ma ustawiony telefon. Bez tego strona
	   sprzedażowa, panel, materiały do druku i maile — które są jasne z natury —
	   rozjeżdżały się na dwa różne produkty.

	   `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;

	/* Trzy role, nie trzy ozdoby. Treść czyta się krojem systemowym, bo przy
	   długim regulaminie liczy się czytelność, a nie charakter. Nagłówki niosą
	   elegancję, a pismo odręczne pojawia się tylko tam, gdzie na zaproszeniu
	   też byłoby pisane ręcznie: przy imionach pary i podpisach. */
	--font-tekst: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-naglowki: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--font-recznie: "Parisienne", "Segoe Script", "Snell Roundhand", cursive;

	--tlo: #faf8f5;
	--tlo-karta: #ffffff;
	--tlo-alt: #f2ede7;
	--tekst: #241f1b;
	--tekst-slaby: #6b625a;
	--akcent: #9a6a4f;
	--akcent-ciemny: #7c5340;
	--akcent-tlo: #f1e6dd;
	--linia: #e7e0d8;
	/* Obramowanie pól formularza. Miękka linia kart daje na kremowym tle 1,23:1
	   — pole było praktycznie niewidoczne, zwłaszcza na telefonie w słońcu.
	   Ten odcień trzyma 3,25:1, czyli próg WCAG dla elementów sterujących. */
	--linia-pole: #968878;
	--promien: 16px;
	--cien: 0 1px 2px rgba(36,31,27,.05), 0 8px 24px rgba(36,31,27,.06);
}


* { 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%;
}

/* Ciemniejszy wariant akcentu: jasny dawał kontrast 4,36 przy wymaganych
   4,5 dla zwykłego tekstu (WCAG AA). Ciemny daje 6,25. */
a { color: var(--akcent-ciemny); }
img { max-width: 100%; height: auto; }

/* Garamond ma drobniejsze oczko niż krój systemowy, więc nagłówki idą o stopień
   w górę, a ujemny odstęp między literami znika — na szeryfach ściskał tekst
   zamiast go porządkować. */
h1, h2, h3 {
	font-family: var(--font-naglowki);
	line-height: 1.15;
	letter-spacing: 0;
	font-weight: 600;
}
h1 { font-size: clamp(2.4rem, 6.4vw, 3.9rem); margin: 0 0 16px; }
h2 { font-size: clamp(1.8rem, 4.2vw, 2.6rem); margin: 0 0 14px; }
h3 { font-size: 1.4rem; margin: 0 0 8px; }

.qg-kontener { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.qg-waski { max-width: 720px; margin: 0 auto; padding: 0 20px; }

/* --- Nagłówek strony ------------------------------------------------ */
.qg-top {
	position: sticky; top: 0; z-index: 20;
	background: color-mix(in srgb, var(--tlo) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--linia);
}
.qg-top__inner { display: flex; align-items: center; gap: 20px; height: 66px; position: relative; }
.qg-logo {
	font-family: var(--font-naglowki);
	font-weight: 600; font-size: 1.5rem;
	text-decoration: none; color: var(--tekst); letter-spacing: 0;
	display: flex; align-items: center;
}
/* Wysokość, nie szerokość: pasek nagłówka ma stałą wysokość, a logo jest poziome.
   Selektory są celowo dwuczłonowe. WooCommerce wnosi `.woocommerce-page img
   { height: auto }` o wadze (0,1,1), więc na kasie, w koszyku i w sklepie bije
   samo `.qg-stopka__logo` (0,1,0) — logo rozwijało się tam do naturalnych
   724 px szerokości. Nagłówek akurat wygrywał, ale tylko kolejnością wczytania
   arkuszy, co jest przypadkiem, a nie projektem. Dwa człony dają (0,2,x)
   i rozstrzygają rzecz wagą, niezależnie od kolejności. */
.qg-top .qg-logo img { height: 34px; width: auto; display: block; }
/* Niżej niż logo w nagłówku (34 px). Stopka jest zamknięciem strony, nie jej
   początkiem — logo większe od tego u góry przeciągało tam wzrok. */
.qg-stopka .qg-stopka__logo { height: 30px; width: auto; display: block; margin-bottom: 10px; }

@media (max-width: 640px) {
	/* Ten sam dwuczłonowy selektor co wyżej — inaczej reguła desktopu
	   o wadze (0,2,1) przebiłaby to zmniejszenie. */
	.qg-top .qg-logo img { height: 28px; }

	/* Logo w stopce schodzi razem z nagłówkowym i zostaje od niego niższe.
	   Bez tego na telefonie wychodziło odwrotnie: nagłówek 28 px, stopka 30. */
	.qg-stopka .qg-stopka__logo { height: 24px; }
}
.qg-menu { display: flex; gap: 22px; margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.qg-menu a { text-decoration: none; color: var(--tekst-slaby); font-size: .95rem; }
.qg-menu a:hover { color: var(--tekst); }
/* Wymiary przycisku w pasku stoją niżej, przy `.qg-btn` — stąd przegrywały. */

/* Przełącznik menu — checkbox jest ukryty, ale pozostaje fokusowalny klawiaturą. */
.qg-menu-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qg-burger { display: none; }
.qg-burger span,
.qg-burger span::before,
.qg-burger span::after {
	display: block; width: 22px; height: 2px; border-radius: 2px;
	background: var(--tekst); content: "";
}
.qg-burger span::before { transform: translateY(-7px); }
.qg-burger span::after { transform: translateY(5px); }
.qg-menu-toggle:focus-visible + .qg-burger { outline: 2px solid var(--akcent); outline-offset: 4px; }

@media (max-width: 760px) {
	/* Trzy elementy w 375 px — bez tego logo i przycisk łamią się na dwie linie. */
	.qg-top__inner { gap: 10px; }
	/* Garamond ma drobne oczko — przy 1 rem logo na telefonie ginie. */
	.qg-logo { font-size: 1.25rem; white-space: nowrap; }
	/* Sam zakaz łamania. Wymiary na telefon stoją niżej, za `.qg-btn` — gdyby
	   zostały tutaj, przegrałyby z regułą bazową mimo media query, bo ta stoi
	   dalej w pliku, a waga selektorów jest równa. */
	.qg-cta-top { white-space: nowrap; }

	/* Kwadrat 44x44 to zalecany rozmiar celu dotykowego. Wcześniej było
	   `min-height: 44px` przy `content-box` i pionowym marginesie 12 px, więc
	   pole miało w sumie 68 px przy pasku 66 px, a kreski siedziały u jego
	   góry — hamburger wisiał wyraźnie wyżej niż logo i przycisk. */
	.qg-burger {
		display: flex; align-items: center; justify-content: center;
		cursor: pointer;
		width: 44px; height: 44px; box-sizing: border-box;
		/* Marginesy automatyczne po obu stronach, nie tylko z lewej. Same z lewej
		   wypychały hamburger do przycisku: 59 px od logo i 10 px od przycisku.
		   Dwa marginesy automatyczne dzielą wolne miejsce po równo. */
		margin-inline: auto;
	}
	.qg-menu {
		display: none;
		position: absolute; top: 66px; left: 0; right: 0;
		flex-direction: column; gap: 0;
		background: var(--tlo-karta);
		border-bottom: 1px solid var(--linia);
		/* Panel trzyma się krawędzi kontenera, a własny margines powtarza jego
		   20 px, więc tekst stoi na tej samej osi co reszta strony.
		   Wcześniej było tu `left: -20px; right: -20px` z podwójnym marginesem.
		   Na dużym ekranie działało, bo kontener jest węższy od okna — ale na
		   telefonie kontener zajmuje cały ekran i otwarte menu wystawało poza
		   widok, przez co stronę dawało się przesunąć w bok o 20 px. */
		padding: 8px 20px 16px;
		box-shadow: var(--cien);
	}
	.qg-menu-toggle:checked ~ .qg-menu { display: flex; }
	.qg-menu li { border-bottom: 1px solid var(--linia); }
	.qg-menu li:last-child { border-bottom: 0; }
	.qg-menu a { display: block; padding: 14px 0; font-size: 1rem; color: var(--tekst); }
	.qg-cta-top { margin-left: 0; }
}

/* --- Przyciski ------------------------------------------------------ */
.qg-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--akcent); color: #fff; text-decoration: none;
	border: 0; border-radius: 999px; padding: 14px 28px;
	font: inherit; font-weight: 600; cursor: pointer; min-height: 50px;
}
.qg-btn:hover { background: var(--akcent-ciemny); color: #fff; }

/* Przycisk w pasku nagłówka musi być niższy niż przyciski w treści, bo pasek
   ma 66 px. Selektor jest podwójny celowo: reguły `.qg-cta-top` stoją wyżej
   w pliku niż `.qg-btn`, więc przy równej wadze wygrywała ta późniejsza
   i przycisk dostawał pełne 14/28 px oraz min-height 50 px — także na
   telefonie, gdzie zjadał wtedy prawie połowę szerokości paska. */
.qg-btn.qg-cta-top { padding: 10px 20px; min-height: 0; }

/* Na telefonie pasek dzielą trzy elementy w 375 px. Przy pełnych wymiarach
   przycisk zabierał 40% szerokości i przytłaczał logo. */
@media (max-width: 760px) {
	.qg-btn.qg-cta-top { padding: 9px 15px; font-size: .88rem; }
}
.qg-btn--obrys { background: transparent; color: var(--tekst); border: 1px solid var(--linia); }
.qg-btn--obrys:hover { background: var(--tlo-alt); color: var(--tekst); }

/* --- Sekcje --------------------------------------------------------- */
.qg-sekcja { padding: 72px 0; }
.qg-sekcja--alt { background: var(--tlo-alt); }
.qg-sekcja__naglowek { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.qg-sekcja__naglowek p { color: var(--tekst-slaby); margin: 0; }

.qg-hero { padding: 76px 0 64px; text-align: center; }
.qg-hero p.lead { font-size: 1.15rem; color: var(--tekst-slaby); max-width: 620px; margin: 0 auto 30px; }
.qg-hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.qg-hero__pod { margin-top: 18px; font-size: .9rem; color: var(--tekst-slaby); }

/* --- Makieta produktu ----------------------------------------------- */
/* Telefon ze stroną gościa i tabliczka z kodem QR, rysowane w CSS.
   Zdjęcie ze stocka pokazałoby wesele; to pokazuje, co klient kupuje. */

.qg-makieta {
	position: relative;
	width: 300px;
	height: 470px;
	margin: 0 auto;
	flex: 0 0 auto;
}

/* --- Telefon --- */
.qg-telefon {
	position: absolute; top: 0; right: 0;
	width: 216px; height: 430px;
	background: #1a1613;
	border-radius: 30px;
	padding: 9px;
	box-shadow: 0 22px 50px rgba(36, 31, 27, .28), 0 3px 10px rgba(36, 31, 27, .16);
}
/* Wariant ze zdjęciem: fotografia jest ramką, a treść ekranu leży na niej.
   Prostokąt ekranu przychodzi w zmiennych z szablonu — wykrywa go PHP ze
   zdjęcia, więc podmiana telefonu na inny model nie wymaga ruszania CSS. */
.qg-telefon--zdjecie {
	background: none;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	/* Wysokość bierze się z proporcji zdjęcia, a nie ze sztywnych 430 px:
	   inaczej każdy inny model telefonu byłby rozciągnięty albo ścieśniony. */
	height: auto;
	filter: drop-shadow(0 22px 50px rgba(36, 31, 27, .3)) drop-shadow(0 3px 10px rgba(36, 31, 27, .18));
}
.qg-telefon picture { display: block; }
.qg-telefon__foto { display: block; width: 100%; height: auto; }

.qg-telefon--zdjecie .qg-telefon__ekran {
	position: absolute;
	left: var(--qg-ekran-lewo, 6%);
	top: var(--qg-ekran-gora, 6%);
	right: var(--qg-ekran-prawo, 6%);
	bottom: var(--qg-ekran-dol, 6%);
	width: auto; height: auto;
	/* Zaokrąglenie mniejsze niż w rysowanej ramce: na zdjęciu narożniki ekranu
	   są łagodniejsze, a za duży promień odsłania pod spodem czarną obudowę. */
	border-radius: 10px;
	padding: 12px 9px;
	gap: 8px;
}

.qg-telefon__ekran {
	width: 100%; height: 100%;
	background: var(--tlo);
	border-radius: 22px;
	padding: 16px 12px;
	overflow: hidden;
	display: flex; flex-direction: column; gap: 11px;
}
.qg-telefon__naglowek { text-align: center; }
.qg-telefon__para {
	margin: 0;
	font-family: var(--font-recznie);
	font-size: 1.05rem; font-weight: 400; line-height: 1.2;
	letter-spacing: 0; color: var(--tekst);
}
.qg-telefon__data { margin: 1px 0 0; font-size: .55rem; color: var(--tekst-slaby); }

.qg-telefon__karta {
	background: var(--tlo-karta);
	border: 1px solid var(--linia);
	border-radius: 9px;
	padding: 10px 8px;
	text-align: center;
}
.qg-telefon__zacheta {
	margin: 0 0 7px; font-size: .58rem; font-weight: 600; color: var(--tekst);
}
.qg-telefon__przycisk {
	display: block;
	background: var(--akcent); color: #fff;
	border-radius: 999px; padding: 6px;
	font-size: .55rem; font-weight: 600;
}

.qg-telefon__siatka {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	flex: 1;
	align-content: start;
}
.qg-telefon__siatka img {
	display: block; width: 100%; aspect-ratio: 1;
	object-fit: cover; border-radius: 4px;
}
.qg-telefon__siatka span {
	display: block; aspect-ratio: 1; border-radius: 4px;
}
/* Kafle w odcieniach akcentu — sugerują zdjęcia, nie udając ich. */
.qg-telefon__siatka .k1 { background: linear-gradient(140deg, #c9a68c, #9a6a4f); }
.qg-telefon__siatka .k2 { background: linear-gradient(140deg, #a8b5c4, #6e7f93); }
.qg-telefon__siatka .k3 { background: linear-gradient(140deg, #d8c3a5, #b1906a); }
.qg-telefon__siatka .k4 { background: linear-gradient(140deg, #b3a2b8, #7d6a85); }
.qg-telefon__siatka .k5 { background: linear-gradient(140deg, #cbb69c, #8e7256); }
.qg-telefon__siatka .k6 { background: linear-gradient(140deg, #9fb0a4, #6b7f72); }
.qg-telefon__siatka .k7 { background: linear-gradient(140deg, #d9bfae, #a97f66); }
.qg-telefon__siatka .k8 { background: linear-gradient(140deg, #bcc3cd, #838d9b); }
.qg-telefon__siatka .k9 { background: linear-gradient(140deg, #c4ab93, #97795c); }

/* --- Tabliczka --- */
.qg-tabliczka {
	position: absolute; left: 0; bottom: 0;
	width: 138px;
	background: #fdfcfa;
	border: 1px solid #e4ddd3;
	border-radius: 6px;
	padding: 12px 10px;
	text-align: center;
	transform: rotate(-6deg);
	box-shadow: 0 16px 34px rgba(36, 31, 27, .22), 0 2px 6px rgba(36, 31, 27, .12);
}
.qg-tabliczka__eyebrow {
	margin: 0 0 2px;
	font-family: var(--font-recznie);
	/* Pismo odręczne poniżej mniej więcej 10 px zamienia się w nieczytelną
	   plątaninę, więc ten podpis jest większy niż był w wersji bezszeryfowej. */
	font-size: .62rem; font-weight: 400;
	letter-spacing: 0; color: #9a6a4f;
}
.qg-tabliczka__para {
	margin: 0 0 3px;
	font-family: var(--font-recznie);
	font-size: 1rem; font-weight: 400; line-height: 1.2;
	letter-spacing: 0; color: #241f1b;
}
.qg-tabliczka__tekst { margin: 0 0 8px; font-size: .42rem; color: #6b625a; line-height: 1.35; }
.qg-tabliczka__qr {
	background: #fff; border-radius: 3px; padding: 4px; line-height: 0;
	margin: 0 auto; width: 82px;
}
.qg-tabliczka__qr svg { display: block; width: 100%; height: auto; }
.qg-tabliczka__kod {
	margin: 6px 0 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .48rem; letter-spacing: .12em; color: #241f1b;
}

/* Hero z makietą: dwie kolumny na szerokim ekranie, jedna na wąskim. */
.qg-hero--z-makieta .qg-kontener {
	display: flex; align-items: center; gap: 48px; text-align: left;
}
.qg-hero--z-makieta .qg-hero__tresc { flex: 1; min-width: 0; }
.qg-hero--z-makieta .lead { margin-left: 0; margin-right: 0; }
.qg-hero--z-makieta .qg-hero__cta { justify-content: flex-start; }

@media (max-width: 860px) {
	.qg-hero--z-makieta .qg-kontener { flex-direction: column; gap: 40px; text-align: center; }
	.qg-hero--z-makieta .lead { margin-left: auto; margin-right: auto; }
	.qg-hero--z-makieta .qg-hero__cta { justify-content: center; }
}

/* Makieta ma stałe 300 px, więc na najwęższych telefonach trzeba ją zmniejszyć —
   inaczej wypycha stronę w poziomie. Ujemny margines zbiera wolne miejsce,
   które zostawia po sobie skalowanie (transform nie zmienia wysokości pudełka). */
@media (max-width: 400px) {
	.qg-makieta { transform: scale(.82); transform-origin: top center; margin-bottom: -85px; }
}

/* --- Zdjęcie w tle nagłówka --- */
/* Tekst na zdjęciu wymaga własnych kolorów, ale tokenów w tej sekcji nie
   przestawiam: makieta telefonu i tabliczki też z nich korzysta, a wtedy
   napis na ekranie telefonu zrobiłby się biały na kremowym tle. Kolory idą
   więc punktowo, tylko na tekst nagłówka. */
.qg-hero--z-tlem {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 104px 0 92px;
}
.qg-hero__tlo { position: absolute; inset: 0; z-index: -1; }
.qg-hero__tlo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Przyciemnienie mocniejsze od strony tekstu, słabsze przy makiecie — inaczej
   albo tekst jest nieczytelny, albo zdjęcie znika pod szarą płachtą. */
.qg-hero__tlo::after {
	content: "";
	position: absolute; inset: 0;
	background:
		linear-gradient(100deg, rgba(20, 16, 13, .86) 0%, rgba(20, 16, 13, .68) 42%, rgba(20, 16, 13, .34) 72%, rgba(20, 16, 13, .28) 100%),
		linear-gradient(to bottom, rgba(20, 16, 13, .35) 0%, rgba(20, 16, 13, 0) 30%);
}

.qg-hero--z-tlem .qg-hero__tresc h1 { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.qg-hero--z-tlem .qg-hero__tresc p.lead { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.qg-hero--z-tlem .qg-hero__pod { color: rgba(255, 255, 255, .78); }

/* Przycisk obrysowy stoi na zdjęciu, więc obrys i tekst muszą być białe —
   token linii jest jasnobeżowy i na fotografii ginie. */
.qg-hero--z-tlem .qg-btn--obrys {
	color: #fff;
	border-color: rgba(255, 255, 255, .6);
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(6px);
}
.qg-hero--z-tlem .qg-btn--obrys:hover {
	color: #241f1b;
	background: rgba(255, 255, 255, .92);
	border-color: transparent;
}

@media (max-width: 860px) {
	/* Po zwinięciu do jednej kolumny tekst leży na środku zdjęcia,
	   więc gradient z boku nie ma już czego przyciemniać. */
	.qg-hero--z-tlem { padding: 72px 0 64px; }
	.qg-hero__tlo::after {
		background: linear-gradient(to bottom, rgba(20, 16, 13, .82) 0%, rgba(20, 16, 13, .66) 55%, rgba(20, 16, 13, .5) 100%);
	}
}

/* --- Makiety materiałów do druku ------------------------------------ */
/* Proporcje arkuszy odpowiadają temu, co generuje wtyczka. */

.qg-druki {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	gap: 34px;
}
.qg-druk { margin: 0; text-align: center; }
.qg-druk figcaption {
	margin-top: 14px;
	font-size: .88rem;
	color: var(--tekst-slaby);
}

/* Kolory i typografia stylu Ogród — te same wartości, co w arkuszu do druku
   (templates/print/materialy.php, sekcja .styl-ogrod). Makieta ma wyglądać
   jak produkt, a nie jak biała kartka. */
.qg-arkusz {
	position: relative;
	overflow: hidden;
	background: #fbf8f3;
	border: 1px solid #e4ddd3;
	color: #2f3a2a;
	border-radius: 4px;
	box-shadow: 0 14px 30px rgba(36, 31, 27, .16), 0 2px 5px rgba(36, 31, 27, .08);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Ozdoba wypełnia arkusz i leży pod treścią. Kępy kwiatów celowo wychodzą
   poza krawędź — `overflow: hidden` na arkuszu przycina je równo, tak samo
   jak spad na wydruku. */
.qg-arkusz__ozdoba {
	position: absolute;
	inset: 0;
	line-height: 0;
	pointer-events: none;
}
.qg-arkusz__ozdoba svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Treść ponad ozdobą. Bez tego kwiaty przykrywałyby imiona. */
.qg-arkusz > :not(.qg-arkusz__ozdoba) {
	position: relative;
	z-index: 1;
}

.qg-arkusz__eyebrow {
	margin: 0 0 6px;
	font-family: var(--font-recznie);
	font-size: .72rem; font-weight: 400;
	letter-spacing: 0; color: #7d8f6b;
}
.qg-arkusz__para {
	margin: 0;
	font-family: var(--font-recznie);
	font-weight: 400; line-height: 1.2; letter-spacing: 0;
}
.qg-arkusz__data { margin: 4px 0 0; color: #6d7a60; }
.qg-arkusz__tekst { margin: 0; color: #4a5243; line-height: 1.4; }
.qg-arkusz__qr { background: #fff; border: 1px solid #d9e0cf; padding: 4px; line-height: 0; }
.qg-arkusz__qr svg,
.qg-tabliczka__qr svg {
	display: block; width: 100%; height: auto;
	/* Kod z biblioteki nie ma atrybutu fill, więc bierze kolor stąd.
	   Na papierze zawsze ciemny, niezależnie od motywu przeglądarki. */
	fill: #241f1b;
}

/* Formaty arkuszy.
   ------------------------------------------------------------------
   Jeden wzorzec, cztery wielkości. Każdy arkusz ustawia wyłącznie własne
   wymiary i własną podstawę typografii; wszystko w środku jest wyrażone
   w `em`, więc mniejszy format jest wiernym pomniejszeniem tablicy B1,
   a nie osobnym projektem.

   Wcześniej każdy format miał własny komplet rozmiarów wpisanych ręcznie
   i rozjeżdżały się one względem siebie: kod QR na tabliczce był
   proporcjonalnie o 14% większy niż na B1, tekst o 18%, a ograniczenia
   szerokości brakowało zupełnie — przez co napisy sięgały krawędzi,
   a kwiaty wyglądały przy nich na za małe.

   Podstawa 16 px odpowiada tablicy B1 o szerokości 232 px. Pozostałe
   liczy się wprost z proporcji szerokości: 186/232 i 150/232. */
.qg-arkusz--b1        { width: 232px; height: 331px; font-size: 16px; }
.qg-arkusz--plakat    { width: 186px; height: 263px; font-size: 12.83px; }
.qg-arkusz--tabliczka { width: 150px; height: 210px; font-size: 10.34px; }

.qg-arkusz--b1,
.qg-arkusz--plakat,
.qg-arkusz--tabliczka { padding: 1.5625em 1.25em; }

.qg-arkusz--b1 .qg-arkusz__eyebrow,
.qg-arkusz--plakat .qg-arkusz__eyebrow,
.qg-arkusz--tabliczka .qg-arkusz__eyebrow { font-size: .72em; margin-bottom: .375em; }

.qg-arkusz--b1 .qg-arkusz__para,
.qg-arkusz--plakat .qg-arkusz__para,
.qg-arkusz--tabliczka .qg-arkusz__para { font-size: 1.8em; }

.qg-arkusz--b1 .qg-arkusz__data,
.qg-arkusz--plakat .qg-arkusz__data,
.qg-arkusz--tabliczka .qg-arkusz__data { font-size: .75em; margin-top: .25em; }

.qg-arkusz--b1 .qg-arkusz__qr,
.qg-arkusz--plakat .qg-arkusz__qr,
.qg-arkusz--tabliczka .qg-arkusz__qr { width: 7.5em; margin: 1.25em 0 .9375em; padding: .25em; }

/* Szerokość łamania w procentach pola, nie w pikselach — inaczej każdy
   format wymagałby własnej wartości i znowu by się rozjechały. */
.qg-arkusz--b1 .qg-arkusz__tekst,
.qg-arkusz--plakat .qg-arkusz__tekst,
.qg-arkusz--tabliczka .qg-arkusz__tekst { font-size: .72em; max-width: 84%; }

/* Wkładka — 85 × 55 mm, czyli proporcja 1,55. Jedyny format poziomy: kod QR
   stoi obok tekstu, więc nie da się jej zrobić skalą z arkusza pionowego.
   Typografia trzyma się jednak tej samej zasady — wszystko w `em` od
   podstawy formatu. Imiona są mniejsze niż 1.8em, bo kolumna obok kodu ma
   około połowy szerokości karty i przy pełnej wielkości łamały się na dwie
   linie. */
.qg-arkusz--wkladka {
	width: 216px; height: 140px; font-size: 9.5px;
	padding: 1.26em 1.47em;
	flex-direction: row; gap: 1.26em; text-align: left;
}
.qg-arkusz--wkladka .qg-arkusz__qr { width: 6.95em; flex: 0 0 auto; padding: .25em; }
.qg-arkusz--wkladka .qg-arkusz__obok { min-width: 0; }
.qg-arkusz--wkladka .qg-arkusz__para { font-size: 1.72em; }
.qg-arkusz--wkladka .qg-arkusz__tekst { font-size: .95em; margin: .5em 0 .63em; }

@media (max-width: 560px) {
	.qg-druki { gap: 28px; }
}

/* --- Zdjęcia z Personalizacji --------------------------------------- */

.qg-zdjecie { margin: 0; }
.qg-zdjecie img {
	display: block; width: 100%; height: 100%;
	object-fit: cover;
	border-radius: var(--promien);
	box-shadow: var(--cien);
}
.qg-zdjecie--szerokie {
	max-width: 900px;
	margin: 48px auto 0;
	aspect-ratio: 16 / 7;
}

/* Sekcja „Dlaczego” z opcjonalnym zdjęciem obok kafli. */
.qg-zestaw--ze-zdjeciem {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 34px;
	align-items: stretch;
}
.qg-zestaw--ze-zdjeciem .qg-zdjecie { min-height: 280px; }

@media (max-width: 860px) {
	.qg-zestaw--ze-zdjeciem { grid-template-columns: 1fr; }
	.qg-zestaw--ze-zdjeciem .qg-zdjecie { min-height: 0; aspect-ratio: 4 / 3; }
}

/* --- Siatki --------------------------------------------------------- */
.qg-kroki, .qg-cechy {
	display: grid; gap: 22px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.qg-krok, .qg-cecha {
	background: var(--tlo-karta);
	border: 1px solid var(--linia);
	border-radius: var(--promien);
	padding: 26px;
	box-shadow: var(--cien);
}
.qg-krok h3, .qg-cecha h3 { margin: 0 0 8px; font-size: 1.08rem; }

.qg-krok__glowa { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.qg-krok__ikona {
	display: grid; place-items: center;
	width: 46px; height: 46px; border-radius: 13px;
	background: var(--akcent-tlo); color: var(--akcent);
	flex: 0 0 auto;
}
.qg-krok__nr {
	display: grid; place-items: center;
	width: 26px; height: 26px; border-radius: 50%;
	border: 1px solid var(--linia);
	color: var(--tekst-slaby); font-size: .78rem; font-weight: 700;
	flex: 0 0 auto;
}
.qg-cecha p, .qg-krok p { color: var(--tekst-slaby); margin: 0; }

/* Kafle w sekcji „Dlaczego” siedzą na jasnym tle, więc obramowanie
   wystarcza — cień powtórzony na obu tłach robi się ciężki. */
.qg-cecha { box-shadow: none; }

/* --- Plany ---------------------------------------------------------- */
.qg-plany { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.qg-plan {
	background: var(--tlo-karta); border: 1px solid var(--linia);
	border-radius: var(--promien); padding: 26px; box-shadow: var(--cien);
	position: relative;
}
.qg-plan--polecany {
	border-color: var(--akcent);
	border-width: 2px;
	/* Miejsce na znacznik, żeby nie wchodził na nazwę pakietu. */
	padding-top: 34px;
}
.qg-plan__znacznik {
	position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
	background: var(--akcent); color: #fff; font-size: .72rem; font-weight: 700;
	padding: 5px 16px; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase;
	white-space: nowrap;
}

.qg-plan__cena {
	font-family: var(--font-naglowki);
	font-size: 3rem; font-weight: 600; letter-spacing: 0; line-height: 1.1;
	margin: 6px 0 2px;
}
.qg-plan__raz { color: var(--tekst-slaby); font-size: .88rem; margin: 0 0 18px; }
.qg-plan ul { list-style: none; padding: 0; margin: 0 0 22px; }
.qg-plan li { padding: 7px 0 7px 26px; position: relative; border-bottom: 1px solid var(--linia); }
.qg-plan li:last-child { border-bottom: 0; }
.qg-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--akcent); font-weight: 700; }
.qg-plan li.brak { color: var(--tekst-slaby); }
.qg-plan li.brak::before { content: "—"; color: var(--tekst-slaby); }

/* --- FAQ ------------------------------------------------------------ */
.qg-faq { max-width: 760px; margin: 0 auto; }
.qg-faq details {
	background: var(--tlo-karta); border: 1px solid var(--linia);
	border-radius: 12px; margin-bottom: 10px; padding: 4px 18px;
}
.qg-faq summary { cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none; }
.qg-faq summary::-webkit-details-marker { display: none; }
.qg-faq summary::after { content: "+"; float: right; color: var(--akcent); font-size: 1.3rem; line-height: 1; }
.qg-faq details[open] summary::after { content: "−"; }
.qg-faq details p { margin: 0 0 16px; color: var(--tekst-slaby); }

/* --- Wpisy ---------------------------------------------------------- */
.qg-wpisy { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.qg-wpis {
	background: var(--tlo-karta); border: 1px solid var(--linia);
	border-radius: var(--promien); padding: 22px;
}
.qg-wpis h3 { margin: 0 0 8px; }
.qg-wpis h3 a { text-decoration: none; color: var(--tekst); }
.qg-wpis h3 a:hover { color: var(--akcent); }
.qg-wpis__meta { font-size: .85rem; color: var(--tekst-slaby); margin: 0 0 10px; }
.qg-wpis p { color: var(--tekst-slaby); margin: 0; }

.qg-tresc { padding: 56px 0; }
.qg-tresc h1 { margin-bottom: 8px; }
.qg-tresc__meta { color: var(--tekst-slaby); font-size: .9rem; margin-bottom: 32px; }

/* --- Sekcja demo ---------------------------------------------------- */

.qg-demo__uklad {
	display: grid; gap: 40px; align-items: center;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
}
@media (max-width: 860px) {
	.qg-demo__uklad { grid-template-columns: 1fr; gap: 30px; }
}

.qg-demo__skan {
	text-align: center;
	background: var(--tlo-karta);
	border: 1px solid var(--linia);
	border-radius: var(--promien);
	padding: 28px 24px;
	box-shadow: var(--cien);
}
.qg-demo__qr {
	width: 190px; margin: 0 auto 16px;
	background: #fff; padding: 12px; border-radius: 10px;
}
/* Kod na białym papierze zostaje ciemny także w ciemnym motywie —
   aparat telefonu potrzebuje kontrastu, a nie zgodności z paletą. */
.qg-demo__qr svg { display: block; width: 100%; height: auto; fill: #241f1b; }

.qg-demo__zacheta { margin: 0 0 2px; font-weight: 600; }
.qg-demo__lub { margin: 0 0 16px; color: var(--tekst-slaby); font-size: .9rem; }
.qg-demo__skan .qg-btn { width: 100%; }

.qg-demo__siatka {
	display: grid; gap: 8px; margin-bottom: 24px;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.qg-demo__siatka img {
	display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
	border-radius: 10px;
}

.qg-demo__punkty { list-style: none; padding: 0; margin: 0 0 18px; }
.qg-demo__punkty li {
	position: relative; padding: 8px 0 8px 30px; color: var(--tekst-slaby);
}
.qg-demo__punkty li::before {
	content: ""; position: absolute; left: 4px; top: 17px;
	width: 8px; height: 8px; border-radius: 50%; background: var(--akcent);
}
.qg-demo__uwaga { margin: 0; font-size: .9rem; color: var(--tekst-slaby); }

/* --- 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 { padding-top: 48px; }

.qg-panel__naglowek {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 20px; flex-wrap: wrap; margin-bottom: 32px;
}
.qg-panel__naglowek--srodek { display: block; text-align: center; }
.qg-panel__naglowek h1 { margin: 0; font-size: clamp(2rem, 4.6vw, 3rem); }
.qg-panel__powitanie { margin: 0 0 4px; color: var(--tekst-slaby); }
.qg-panel__wyloguj { font-size: .95rem; color: var(--tekst-slaby); }
.qg-panel__wstecz { margin: 0 0 14px; font-size: .95rem; }
.qg-panel__wstecz a { text-decoration: none; }

.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; }

/* --- Lista galerii --- */
.qg-panel__karty {
	display: grid; gap: 18px; margin-bottom: 34px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.qg-galeria {
	display: block; position: relative; text-decoration: none; color: inherit;
	background: var(--tlo-karta); border: 1px solid var(--linia);
	border-radius: var(--promien); padding: 24px; box-shadow: var(--cien);
}
.qg-galeria:hover { border-color: var(--akcent); color: inherit; }
.qg-galeria__nazwa { margin: 10px 0 6px; font-size: 1.5rem; }
.qg-galeria__meta { margin: 0 0 14px; color: var(--tekst-slaby); font-size: .92rem; }
.qg-galeria__meta code { font-size: .88em; letter-spacing: .06em; }
.qg-galeria__liczby { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }

.qg-galeria__stan {
	display: inline-block; font-size: .74rem; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-slaby);
}
.qg-galeria__stan--active { color: #2e7d4f; }
.qg-galeria__stan--expired { color: #b3261e; }
/* Wizualizacja pudełka pakietu na karcie galerii. Kwadrat w prawym górnym
   rogu, żeby od razu było widać, który pakiet się kupiło — nazwa stoi obok
   w tekście, więc obrazek tylko ją wzmacnia. */
.qg-galeria__pudelko {
	position: absolute; top: 18px; right: 18px;
	width: 64px; height: 64px;
	border-radius: 10px; object-fit: cover; display: block;
	border: 1px solid var(--linia);
}
/* Tekst nie może wejść pod obrazek. Karty bez pudełka zostają bez zmian. */
.qg-galeria:has(.qg-galeria__pudelko) { padding-right: 100px; }


.qg-znacznik {
	display: inline-block; padding: 4px 11px; border-radius: 999px;
	background: var(--tlo-alt); border: 1px solid var(--linia);
	font-size: .82rem; color: var(--tekst-slaby);
}
.qg-znacznik--uwaga { background: var(--akcent-tlo); border-color: var(--akcent); color: var(--akcent); font-weight: 600; }

/* --- Szczegóły galerii --- */
.qg-panel__uklad {
	display: grid; gap: 22px;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	align-items: start;
}
@media (max-width: 860px) {
	.qg-panel__uklad { grid-template-columns: 1fr; }
}

.qg-panel__blok--kod { text-align: center; }
.qg-panel__qr { width: 200px; margin: 0 auto 14px; background: #fff; padding: 10px; border-radius: 8px; }
.qg-panel__qr svg { display: block; width: 100%; height: auto; fill: #241f1b; }
.qg-panel__kod {
	margin: 0 0 16px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.15rem; letter-spacing: .1em;
}

.qg-panel__druki { list-style: none; padding: 0; margin: 0; }
.qg-panel__druki li { padding: 10px 0; border-bottom: 1px solid var(--linia); }
.qg-panel__druki li:last-child { border-bottom: 0; }
.qg-panel__druki small { display: block; color: var(--tekst-slaby); font-size: .84rem; margin-top: 2px; }

.qg-dane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0; margin: 0; }
.qg-dane dt, .qg-dane dd {
	margin: 0; padding: 11px 0; border-bottom: 1px solid var(--linia);
}
.qg-dane dt { color: var(--tekst-slaby); }
.qg-dane dd { text-align: right; }
.qg-dane dt:nth-last-of-type(1), .qg-dane dd:nth-last-of-type(1) { border-bottom: 0; }
/* Skąd wzięła się data — bez tego „17 lutego 2027" przy sierpniowym weselu
   wygląda jak pomyłka, choć jest po prostu 180. dniem pakietu. */
.qg-dane__skad { display: block; color: var(--tekst-slaby); font-size: .84rem; }

.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; }

/* --- Konto klienta --- */
.qg-panel__konto { display: flex; gap: 16px; align-items: center; margin: 0; font-size: .95rem; }
.qg-panel__konto-link { margin-left: 16px; }
.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; }
.qg-kafel__opis { display: block; padding: 7px 9px; font-size: .78rem; color: var(--tekst-slaby); }
.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; }
/* Data wybrana z kalendarza, wypisana słowami — 2 sierpnia i 8 lutego różnią
   się w polu jednym znakiem, a tutaj już nie da się ich pomylić. */
.qg-data-slownie {
	display: block; margin-top: 6px;
	font-size: .95rem; color: var(--akcent);
}
.qg-data-slownie:empty { 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(--akcent); 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(--akcent); }
.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: #fff; font-weight: 600; }
.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(--akcent); }
/* 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(--akcent); outline-offset: 1px;
}
.qg-pole fieldset { border: 0; padding: 0; margin: 0; }
.qg-wybor { display: block; font-weight: 400; margin-bottom: 8px; }
.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: #fff; border: 0; border-radius: 999px;
	padding: 14px 28px; min-height: 50px; font: inherit; font-weight: 600; cursor: pointer;
}
.qg-panel__logowanie .login-submit input:hover { background: var(--akcent-ciemny); }

/* --- Stopka --------------------------------------------------------- */
.qg-stopka { border-top: 1px solid var(--linia); padding: 40px 0 28px; margin-top: 40px; font-size: .92rem; }
.qg-stopka__inner { display: flex; gap: 24px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.qg-stopka a { color: var(--tekst-slaby); text-decoration: none; margin-right: 18px; }
.qg-stopka a:hover { color: var(--tekst); }
.qg-stopka p { margin: 0; color: var(--tekst-slaby); }
.qg-stopka__firma { line-height: 1.7; }
.qg-stopka__firma strong { color: var(--tekst); font-weight: 600; }
.qg-stopka__firma a { margin-right: 0; }
.qg-stopka__linki { display: flex; flex-wrap: wrap; }
/* Nota o operatorze płatności — wymóg informacyjny, więc mniejsza, ale czytelna. */
.qg-stopka__nota { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linia); font-size: .82rem; line-height: 1.6; }

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

/* ---------------------------------------------------------------------
   Panel: pakiet i miejsce na zdjęcia
   Pasek zajętości jest jedynym miejscem, gdzie klient widzi, że limit się
   kończy, zanim zobaczy to gość przy odrzuconym zdjęciu. Kolor zmienia się
   na tych samych progach, na których wychodzą maile — 70% i 90% — żeby to,
   co przyszło pocztą, zgadzało się z tym, co widać w panelu.
   --------------------------------------------------------------------- */
.qg-pakiet__pasek {
	height: 10px;
	border-radius: 999px;
	background: var(--tlo-alt);
	overflow: hidden;
	margin: 0 0 12px;
}
.qg-pakiet__wypelnienie {
	display: block;
	height: 100%;
	background: var(--akcent);
	border-radius: 999px;
	transition: width .3s ease;
}
.qg-pakiet__wypelnienie--uwaga { background: #c8892f; }
.qg-pakiet__wypelnienie--alarm { background: #b3261e; }
.qg-pakiet__stan { margin: 0 0 14px; color: var(--tekst-slaby); }
.qg-pakiet__opis { margin: 0 0 16px; }
.qg-pakiet__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 12px;
}
.qg-pakiet__akcje:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   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(--akcent);
	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(--akcent);
}

/* 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: #fff;
	border-radius: 999px;
}

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. */
body .wc-block-components-address-form__qrgaleria-natychmiast .wc-block-components-checkbox__label::after,
body .wc-block-checkout__terms .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-checkout__terms .wc-block-components-checkbox__label::after {
	content: "wymagane";
	background: var(--akcent-tlo);
	color: var(--akcent-ciemny);
}

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);
}

/* 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;
	}
}