/* Cashify Gold — strony treściowe (Skup, Kursy metali, O nas, Kontakt, Centrum pomocy).
   Tokeny w tokens.css, wspólne komponenty w main.css. Siatka: 1600 px treści na 1920 px.

   ⚠️ W Figmie NIE MA widoków mobilnych — cała responsywność poniżej to interpretacja.
   Do przeglądu przez projektanta.

   ⚠️ SVG z Figmy mają width="100%" bez własnych wymiarów — każdy musi dostać JAWNE
   wymiary w CSS, inaczej zwija się do zera. Dlatego ikony +/− rysujemy tu kreskami
   (::before/::after), a nie plikami. */

/* ══ WSPÓLNE: nagłówek strony + okruszki ═════════════════════════════ */

.cg-page { padding-bottom: 96px; }

.cg-crumbs {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	margin: 0; padding: 32px 0 0; list-style: none;
	font-size: var(--cg-fs-small); line-height: 1;
}
.cg-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.cg-crumbs a,
.cg-crumbs__current {
	display: inline-flex; align-items: center; height: 24px; padding-inline: 8px;
	border-radius: var(--cg-r-label);
	background: var(--cg-gold-10); color: var(--cg-gold);
}
.cg-crumbs a:hover { background: rgba(193, 140, 33, .18); }
.cg-crumbs__sep { color: var(--cg-black-30); }
.cg-crumbs__sep svg { width: 16px; height: 16px; }

.cg-page__title { margin: 32px 0 0; }
.cg-page__lead { margin: 16px 0 0; max-width: 800px; font-weight: 400; }

/* Sekcja wyśrodkowana (nagłówek + lead nad blokiem) */
.cg-center { text-align: center; max-width: 784px; margin: 0 auto 48px; }
.cg-center p { margin-top: 24px; font-weight: 400; }

/* Znacznik „dane, których jeszcze nie mamy" — świadomie widoczny, nie zmyślamy liczb */
.cg-todo {
	display: block; margin-top: 24px;
	font-size: var(--cg-fs-small); font-weight: 400; opacity: .55;
}

/* Focus widoczny na WSZYSTKIM — bez tego przeglądarka rysuje niebieską ramkę
   (nauczka z RSdrive: w całym pliku nie było ani jednego stylu focusa).
   🐛 `:not(input):not(textarea):not(select)` — bez tego reguła (specyficzność
   0,2,0, ładowana PO main.css) biła WŁASNY promień pól formularza (56px) tą
   samą specyficznością, tylko późniejszą kolejnością w cascade: zmierzone,
   pole „Twoje dane" miało 6px zamiast 56px WYŁĄCZNIE w stanie :focus. Pola
   input/textarea/select mają już własny, celowy styl fokusu (złota ramka,
   `outline:none`) w każdym miejscu w motywie — to wykluczenie nic nie
   odbiera dostępności, tylko zwraca im kontrolę nad własnym promieniem. */
.cg-page :focus-visible:not(input):not(textarea):not(select),
.cg-faq summary:focus-visible {
	outline: 2px solid var(--cg-gold);
	outline-offset: 2px;
	border-radius: var(--cg-r-label);
}

/* ══ CENTRUM POMOCY (Figma 7238:1612) ════════════════════════════════ */

.cg-help {
	display: grid; gap: 32px;
	grid-template-columns: 376px 1fr;   /* Figma: 376 + 32 + 1192 = 1600 */
	align-items: start;
	margin-top: 48px;
}

/* Lewa kolumna — „Wybierz temat" */
.cg-help__aside {
	display: flex; flex-direction: column; gap: 24px;
	padding: 24px; border-radius: var(--cg-r-card);
	background: var(--cg-black-02);
	border: 4px solid var(--cg-white-10);
	position: sticky; top: 24px;
}
.cg-help__aside h2 { font-size: 24px; line-height: 1; }

.cg-topics { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cg-topic {
	display: flex; align-items: center; width: 100%; height: 56px;
	padding: 16px 24px; border: 0; border-left: 4px solid transparent;
	border-radius: var(--cg-r-img);
	background: var(--cg-black-02);
	font: var(--cg-fw-medium) var(--cg-fs-body)/1.3 var(--cg-font);
	letter-spacing: var(--cg-tracking);
	color: var(--cg-black); text-align: left; cursor: pointer;
}
.cg-topic:hover { background: var(--cg-gold-10); }
.cg-topic.is-active {
	background: var(--cg-gold-10);
	border-left-color: var(--cg-gold);
}

/* Prawa kolumna — akordeon.
   <details>/<summary> = akordeon bez JS-a: działa z klawiatury, Ctrl+F znajduje
   treść w zamkniętych pozycjach, a atrybut name="cg-faq" zamyka pozostałe. */
.cg-faq { display: flex; flex-direction: column; gap: 16px; }

.cg-faq__item {
	border: 1px solid transparent;
	border-radius: var(--cg-r-card);
	background: var(--cg-black-02);
}
.cg-faq__item[open] {
	background: var(--cg-white);
	border-color: var(--cg-gold-grad-from);
	box-shadow: var(--cg-shadow-card);
}
.cg-faq__item[hidden] { display: none; }

.cg-faq__q {
	display: flex; align-items: center; gap: 32px;
	padding: 32px 40px; cursor: pointer; list-style: none;
	font-size: 24px; line-height: 1;
	letter-spacing: var(--cg-tracking);
	color: var(--cg-black);
}
.cg-faq__q::-webkit-details-marker { display: none; }
.cg-faq__q > span { flex: 1 0 0; min-width: 0; }

/* Ikona +/− rysowana kreskami: jeden element, dwa stany, zero plików SVG */
.cg-faq__icon {
	position: relative; flex-shrink: 0; width: 40px; height: 40px;
}
.cg-faq__icon::before,
.cg-faq__icon::after {
	content: ''; position: absolute; top: 50%; left: 50%;
	width: 20px; height: 2px; border-radius: 2px;
	background: var(--cg-black);
	transform: translate(-50%, -50%);
	transition: transform .2s ease, opacity .2s ease;
}
.cg-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.cg-faq__item[open] .cg-faq__icon::before { background: var(--cg-gold); }
.cg-faq__item[open] .cg-faq__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }

.cg-faq__a {
	padding: 0 40px 32px;
	margin-top: -8px;
	font-weight: 400; font-size: 18px; line-height: 1.56;
	letter-spacing: -0.005em;   /* Figma: -0.09px @ 18px — inne niż -0.04em nagłówków */
	color: var(--cg-text);
}
.cg-faq__a > :first-child { margin-top: 0; }
.cg-faq__a > :last-child { margin-bottom: 0; }

.cg-faq__empty { padding: 32px 40px; font-weight: 400; }

@media (max-width: 1100px) {
	.cg-help { grid-template-columns: 1fr; }
	.cg-help__aside { position: static; }
	.cg-topics { flex-direction: row; flex-wrap: wrap; }
	.cg-topic { width: auto; height: 44px; padding: 12px 16px; font-size: var(--cg-fs-small); }
}

@media (max-width: 900px) {
	.cg-page { padding-bottom: 56px; }
	.cg-faq__q { gap: 16px; padding: 20px 24px; font-size: 18px; }
	.cg-faq__icon { width: 28px; height: 28px; }
	.cg-faq__a { padding: 0 24px 24px; font-size: 16px; }
}

/* ══ WSPÓLNE: plakietki (Czynne / Nieczynne / godziny / wartość) ══════
   ⚠️ 2026-08-15: `.cg-badge*` PRZENIESIONE do `main.css`. Powód: `pages.css` nie ładuje się
   na stronie głównej, a plakietka kategorii wpisu jest właśnie tam (JW nr 36). Nie duplikuj
   tych reguł z powrotem — zmieniasz plakietki w `main.css`. */

/* ══ KONTAKT (Figma 7157:677) ════════════════════════════════════════ */

/* Wizytówka firmy + zdjęcie oddziału (Figma: 504 + 32 + 1056 = 1600) */
.cg-contact__top {
	display: grid; gap: 32px;
	grid-template-columns: 504px 1fr;
	align-items: stretch;
	min-height: 551px;   /* wysokość karty z Figmy — bez tego wizytówka rozjeżdża się w pionie */
	margin-top: 48px;
}
.cg-vcard {
	display: flex; flex-direction: column; justify-content: center; gap: 32px;
	padding: 64px; border-radius: var(--cg-r-card);
	background: var(--cg-black-02);
}
.cg-vcard__logo svg { width: 158px; height: 52px; }
.cg-vcard__body { font-weight: 400; line-height: 1.56; font-style: normal; }
.cg-vcard__body a { color: var(--cg-gold); text-decoration: underline; }

.cg-contact__photo {
	margin: 0; border-radius: var(--cg-r-card); overflow: hidden;
	background: var(--cg-black-05);
}
.cg-contact__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Oddziały: lista lokalizacji + panel szczegółów */
/* 🐛 Prawa kolumna (`1fr` bez `minmax`) miała domyślne minimum `auto` = min-content
   karty oddziału — niewidoczne w pustym stanie (żaden `.cg-branch-card.is-active`),
   dlatego pierwszy pomiar na `/oddzialy/` wyszedł czysto. Ujawnia się DOPIERO z
   aktywną kartą (np. `/kontakt/`, gdzie domyślnie wybrany jest jeden oddział) —
   karta 614px nie mieściła się w torze 436px i wypychała stronę o 18px. Ten sam
   wzorzec co `.cg-account__grid`/`.cg-orders__row`/`.cg-archive__body`. */
.cg-branches-panel {
	display: grid; gap: 32px;
	grid-template-columns: 512px minmax(0, 1fr);   /* Figma: 512 + 32 + 1056 */
	align-items: start;
	margin-top: 48px;
}
.cg-branches-panel > :last-child { min-width: 0; }
.cg-locations {
	display: flex; flex-direction: column; gap: 24px;
	padding: 24px; border-radius: var(--cg-r-card);
	background: var(--cg-black-02);
	border: 4px solid var(--cg-white-10);
}
.cg-locations h2 { font-size: 24px; line-height: 1; }
.cg-locations__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

.cg-location {
	display: flex; align-items: center; gap: 16px; width: 100%; height: 56px;
	padding: 16px 24px; border: 0; border-left: 4px solid transparent;
	border-radius: var(--cg-r-img);
	background: var(--cg-black-02);
	font: var(--cg-fw-medium) var(--cg-fs-body)/1.3 var(--cg-font);
	letter-spacing: var(--cg-tracking);
	color: var(--cg-black); text-align: left; cursor: pointer;
}
.cg-location:hover { background: var(--cg-gold-10); }
.cg-location.is-active { background: var(--cg-gold-10); border-left-color: var(--cg-gold); }
.cg-location__name { flex: 1 0 0; min-width: 0; }

/* Panel oddziału — biała karta w złotej ramce */
.cg-branch-card {
	display: none;
	padding: 48px; border-radius: var(--cg-r-card);
	background: var(--cg-white);
	border: 1px solid var(--cg-gold-grad-from);
	box-shadow: var(--cg-shadow-card);
}
.cg-branch-card.is-active { display: block; }

.cg-branch-card__head {
	display: flex; align-items: center; gap: 32px; margin-bottom: 32px;
}
.cg-branch-card__head h3 { flex: 1 0 0; min-width: 0; font-size: 24px; line-height: 1; }

.cg-branch-card__cols { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cg-branch-box {
	display: flex; flex-direction: column; gap: 24px; justify-content: space-between;
	padding: 24px; border-radius: var(--cg-r-box);
	background: var(--cg-black-02);
	min-width: 0;
}
.cg-branch-box h4 {
	margin: 0; font-size: 18px; line-height: 1; color: var(--cg-black);
	font-weight: var(--cg-fw-medium); letter-spacing: var(--cg-tracking);
}

/* Wiersz „etykieta ......... wartość w złotej plakietce" */
.cg-rows { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.cg-row {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.cg-row__label { color: var(--cg-text); }
.cg-row a.cg-badge:hover { background: rgba(193, 140, 33, .18); }

.cg-branch-box__cta {
	display: flex; align-items: center; justify-content: space-between;
	height: 56px; padding: 0 4px 0 20px;
	border-radius: var(--cg-r-round);
	background-image: var(--cg-gold-gradient);
	box-shadow: var(--cg-shadow-card);
	color: var(--cg-text);
}
.cg-branch-box__cta span:last-child {
	display: grid; place-items: center; width: 48px; height: 48px;
	border-radius: var(--cg-r-round); background: var(--cg-black-10);
}

/* Formularz kontaktowy na zielonym tle (Figma: sekcja „News") */
/* Zielona sekcja z formularzem. W Figmie to KARTA wpuszczona 40 px od krawędzi
   (frame „News”: x=40, szer. 1840), a nie pas na całą szerokość — i po prawej
   stronie leży moneta. U nas prawa połowa świeciła pustką. */
.cg-contact-form-section {
	position: relative; isolation: isolate; overflow: hidden;
	margin: 96px 40px 0; padding-block: 96px;
	background-image: var(--cg-green-gradient);
	border-radius: var(--cg-r-card);
}
/* Zdjęcie ma własne ciemnozielone tło (RGB 1,22,13 ≈ --cg-green-mid), więc styka się
   z gradientem sekcji bez szwu. Maskę alfa z Figmy zastępuje wygaszenie w lewo. */
.cg-contact-form-section::before {
	content: ''; position: absolute; inset: 0; z-index: -2;
	background: url('../img/kontakt-moneta.jpg') right center / cover no-repeat;
}
.cg-contact-form-section::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg,
		var(--cg-green-mid) 0%, var(--cg-green-mid) 34%, rgba(9, 36, 22, 0) 68%);
}
.cg-form-card {
	max-width: 648px; margin-inline: 0;
	display: flex; flex-direction: column; gap: 32px; align-items: center;
	padding: 32px; border-radius: var(--cg-r-card);
	background: var(--cg-white);
	border: 1px solid var(--cg-black-10);
	box-shadow: var(--cg-shadow-card);
}
.cg-form-card h2 { font-size: 28px; line-height: 1; }

/* Pasek informacyjny — zieleń „infobar" z Figmy (#004D2B) */
.cg-infobar {
	display: flex; gap: 16px; align-items: flex-start; width: 100%;
	padding: 16px; border-radius: var(--cg-r-card);
	background: rgba(0, 77, 43, .1); color: #004D2B;
	font-weight: 400; font-size: var(--cg-fs-small); line-height: 1.5;
}
.cg-infobar--error { background: rgba(244, 67, 54, .1); color: #B3261E; }
.cg-infobar--ok    { background: var(--cg-success-10); color: #2E7D32; }

.cg-field { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.cg-field__label { font-size: var(--cg-fs-small); line-height: 1; color: var(--cg-black); }
.cg-field__req { color: #F44336; }

.cg-field input,
.cg-field textarea {
	appearance: none; -webkit-appearance: none;
	width: 100%; padding: 20px;
	border: 1px solid var(--cg-black-20); border-radius: 56px;
	background: var(--cg-white);
	font: 400 var(--cg-fs-body)/1.3 var(--cg-font);
	letter-spacing: -0.005em; color: var(--cg-black);
}
.cg-field input { height: 56px; padding-block: 0; }
.cg-field textarea { height: 208px; border-radius: 24px; resize: vertical; }
.cg-field input::placeholder,
.cg-field textarea::placeholder { color: var(--cg-black-30); }
.cg-field input:focus, .cg-field textarea:focus { outline: none; border-color: var(--cg-gold); }
.cg-field input[aria-invalid="true"],
.cg-field textarea[aria-invalid="true"] { border-color: #F44336; }

.cg-consents { display: flex; flex-direction: column; gap: 28px; width: 100%; }
.cg-consent {
	display: flex; gap: 16px; align-items: flex-start;
	font-weight: 400; font-size: var(--cg-fs-small); line-height: 1.56;
	color: var(--cg-text); cursor: pointer;
}
.cg-consent input {
	flex-shrink: 0; width: 24px; height: 24px; margin: 0;
	accent-color: var(--cg-gold); cursor: pointer;
}
.cg-consent a { color: var(--cg-gold); text-decoration: underline; }

/* Honeypot — pułapka na boty. Ukryty tak, żeby czytniki ekranu go pomijały. */
.cg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cg-form-card__submit {
	display: flex; align-items: center; justify-content: space-between; width: 100%;
	height: 56px; padding: 0 4px 0 20px; border: 0; cursor: pointer;
	border-radius: var(--cg-r-round);
	background-image: var(--cg-gold-gradient);
	font: var(--cg-fw-medium) var(--cg-fs-body)/1 var(--cg-font);
	letter-spacing: var(--cg-tracking);
	color: var(--cg-text);
}
.cg-form-card__submit span:last-child {
	display: grid; place-items: center; width: 48px; height: 48px;
	border-radius: var(--cg-r-round); background: var(--cg-black-10);
}

@media (max-width: 1280px) {
	.cg-contact__top,
	.cg-branches-panel { grid-template-columns: 1fr; }
	/* 🐛 `min-height` zamiast `height` zostawiało 80 px szarej pustki pod zdjęciem.
	   Obrazek ma `height: 100%` (w. 192), ale procentowa wysokość wymaga OKREŚLONEJ
	   wysokości rodzica — `min-height` nią nie jest, więc `100%` rozwiązywało się do
	   `auto` i zdjęcie zajmowało 240 px w ramce 320 px. Reszta to szare tło ramki,
	   wyglądające jak niedoładowany obrazek.

	   `height` zamiast `min-height`: teraz `100%` ma się do czego odnieść, a `object-fit:
	   cover` (już ustawione) przycina zdjęcie zamiast je rozciągać. */
	.cg-contact__photo { height: 320px; }
	.cg-vcard { padding: 32px; }
	.cg-branch-card { padding: 32px; }
}

@media (max-width: 900px) {
	.cg-branch-card__cols { grid-template-columns: 1fr; }
	.cg-branch-card { padding: 24px; }
	.cg-branch-card__head { flex-direction: column; align-items: flex-start; gap: 12px; }
	/* Na telefonie karta zajmuje całą szerokość, a moneta znika: formularz przykryłby ją
	   w całości, a pod spodem zostałaby tylko ciemna plama i 100 KB do pobrania. */
	.cg-contact-form-section { margin: 56px 0 0; padding-block: 48px; border-radius: 0; }
	.cg-contact-form-section::before { display: none; }
	.cg-form-card { padding: 24px; }
	.cg-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ══ O NAS (Figma 7219:3902) ═════════════════════════════════════════ */

/* Intro: tekst po lewej (648), zdjęcie po prawej (784×480) */
.cg-about__intro {
	display: grid; gap: 32px;
	grid-template-columns: 648px 1fr;
	align-items: center;
	margin-top: 48px;
}
.cg-about__intro h2 { font-size: 28px; line-height: 1.14; }
.cg-about__intro p { margin-top: 24px; font-weight: 400; }
.cg-about__intro figure { margin: 0; border-radius: var(--cg-r-card); overflow: hidden; }
.cg-about__intro img { width: 100%; height: 480px; object-fit: cover; display: block; }

/* Zespół — 3 kolumny, zdjęcie kwadratowe 512×512 */
.cg-team { display: grid; gap: 32px; grid-template-columns: repeat(3, 1fr); }
.cg-team__photo {
	margin: 0 0 32px; aspect-ratio: 1 / 1; overflow: hidden;
	border-radius: var(--cg-r-card); background: var(--cg-black-05);
}
.cg-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-member__role { margin-bottom: 16px; }
.cg-member__name { font-size: 32px; line-height: 1; color: var(--cg-black); }
.cg-member__title { margin-top: 8px; font-size: 18px; line-height: 1; }
.cg-member__bio { margin-top: 32px; font-weight: 400; }

/* Pasek „Centrum pomocy" — całość w złotej tonacji (Figma 7302:4334) */
.cg-helpbar {
	display: flex; align-items: center; justify-content: space-between; gap: 32px;
	margin-top: 96px; padding: 40px;
	border-radius: var(--cg-r-card);
	background: var(--cg-gold-10);
	color: var(--cg-gold);
}
.cg-helpbar__body { display: flex; align-items: flex-start; gap: 32px; }
.cg-helpbar__icon {
	display: grid; place-items: center; flex-shrink: 0;
	width: 80px; height: 80px; padding: 16px;
	border-radius: 300px; background: var(--cg-gold-10);
	font-size: 40px; line-height: 1;
}
.cg-helpbar h2 { color: var(--cg-gold); }
.cg-helpbar p {
	margin-top: 24px; max-width: 641px;
	font-weight: 400; font-size: 18px; line-height: 1.56;
	letter-spacing: -0.005em;
}
.cg-helpbar__cta {
	display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0;
	height: 56px; padding: 0 4px 0 20px;
	border: 1px solid var(--cg-gold); border-radius: var(--cg-r-round);
	background: var(--cg-gold-10); color: var(--cg-gold);
	white-space: nowrap;
}
.cg-helpbar__cta span:last-child {
	display: grid; place-items: center; width: 48px; height: 48px;
	border-radius: var(--cg-r-round); background: var(--cg-gold-10);
}

/* Newsletter na zielonym tle — ta sama karta z monetą co formularz na Kontakcie
   (patrz .cg-contact-form-section). Obie sekcje w Figmie wyglądają identycznie. */
.cg-newsletter {
	position: relative; isolation: isolate; overflow: hidden;
	margin: 96px 40px 0; padding-block: 96px;
	background-image: var(--cg-green-gradient);
	border-radius: var(--cg-r-card);
	color: var(--cg-white);
}
.cg-newsletter::before {
	content: ''; position: absolute; inset: 0; z-index: -2;
	background: url('../img/kontakt-moneta.jpg') right center / cover no-repeat;
}
.cg-newsletter::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg,
		var(--cg-green-mid) 0%, var(--cg-green-mid) 34%, rgba(9, 36, 22, 0) 68%);
}
.cg-newsletter__box { max-width: 647px; }
.cg-newsletter h2 { color: var(--cg-white); margin-top: 16px; }
.cg-newsletter__lead { margin-top: 24px; font-weight: 400; }
.cg-newsletter .cg-consent { color: rgba(255, 255, 255, .7); }
.cg-newsletter .cg-consent a { color: var(--cg-gold-grad-to); }
.cg-newsletter .cg-consents { margin-top: 32px; }

/* Pole newslettera = pigułka z przyciskiem w środku (jak wyszukiwarka w nagłówku) */
.cg-newsletter__field {
	display: flex; align-items: center; gap: 8px;
	margin-top: 32px; padding: 8px 8px 8px 24px;
	border-radius: var(--cg-r-round);
	background: var(--cg-white-10);
	backdrop-filter: var(--cg-blur-nav);
	-webkit-backdrop-filter: var(--cg-blur-nav);
}
.cg-newsletter__field input {
	flex: 1; min-width: 0; height: 48px; border: 0; background: transparent;
	color: var(--cg-white);
	font: 400 var(--cg-fs-body)/1 var(--cg-font);
	letter-spacing: var(--cg-tracking);
}
.cg-newsletter__field input::placeholder { color: rgba(255, 255, 255, .6); }
.cg-newsletter__field input:focus { outline: none; }
.cg-newsletter__field button {
	display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0;
	height: 48px; padding: 0 4px 0 20px; border: 0; cursor: pointer;
	border-radius: var(--cg-r-round);
	background-image: var(--cg-gold-gradient);
	font: var(--cg-fw-medium) var(--cg-fs-body)/1 var(--cg-font);
	letter-spacing: var(--cg-tracking);
	color: var(--cg-text);
}
.cg-newsletter__field button span:last-child {
	display: grid; place-items: center; width: 40px; height: 40px;
	border-radius: var(--cg-r-round); background: var(--cg-black-10);
}
.cg-newsletter .cg-infobar { margin-top: 24px; }

@media (max-width: 1280px) {
	.cg-about__intro { grid-template-columns: 1fr; }
	.cg-team { grid-template-columns: 1fr; }
	.cg-helpbar { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 900px) {
	.cg-helpbar { margin-top: 56px; padding: 24px; }
	.cg-helpbar__body { flex-direction: column; gap: 16px; }
	.cg-helpbar__icon { width: 56px; height: 56px; font-size: 28px; }
	.cg-newsletter { margin: 56px 0 0; padding-block: 48px; border-radius: 0; }
	.cg-newsletter::before { display: none; }
	.cg-newsletter__field { flex-direction: column; align-items: stretch; padding: 12px; border-radius: 24px; }
	.cg-newsletter__field input { padding-inline: 12px; }
	.cg-member__name { font-size: 24px; }
}

/* ══ SKUP (Figma 7334:1931) ══════════════════════════════════════════ */

/* Metal po lewej (376), tabela po prawej (1192) */
/* 🐛 Figma (7334:1931) nie ma klatki tabletowej — tory poniżej są dosłownymi wartościami
   z kanwy 1600px. W paśmie 1025-1400px (nietestowanym: ani mobile 390px, ani pełna
   szerokość projektu) `376px`/`426px` jako TWARDE długości w ogóle się nie zwężają
   (w przeciwieństwie do `fr`, długość absolutna nigdy nie oddaje miejsca), więc wiersz
   wypychał całą stronę w poziome przewijanie. `minmax(0, …px)` czyni te same tory
   elastycznymi — przy pełnej szerokości projektu wynik identyczny (liczby to sufit,
   nie sztywny rozmiar), a w wąskim paśmie treść się zwęża/zawija zamiast wypychać stronę. */
.cg-buyback {
	display: grid; gap: 32px;
	grid-template-columns: minmax(0, 376px) minmax(0, 1fr);
	align-items: start;
	margin-top: 48px;
}
.cg-buyback__aside {
	padding: 24px; border-radius: var(--cg-r-card);
	background: var(--cg-black-02);
	border: 4px solid var(--cg-white-10);
	min-width: 0;
}
.cg-buyback__table {
	padding: 24px; border-radius: var(--cg-r-card);
	background: var(--cg-black-02);
	border: 4px solid var(--cg-white-10);
	min-width: 0;
}

/* Nagłówek tabeli: Produkt | Cena skupu */
.cg-buyback__head {
	display: grid; grid-template-columns: minmax(0, 426px) minmax(0, 1fr) auto;
	gap: 24px; align-items: center;
	padding: 0 24px 24px;
	color: var(--cg-black);
}
.cg-buyback__rows { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

.cg-buyback__row {
	display: grid; grid-template-columns: minmax(0, 426px) minmax(0, 1fr) auto;
	gap: 24px; align-items: center;
	padding: 16px 24px; border-radius: var(--cg-r-box);
	background: var(--cg-black-02);
}
.cg-buyback__name,
.cg-buyback__row > * { min-width: 0; }
.cg-buyback__row:hover { background: var(--cg-gold-10); }
.cg-buyback__name { color: var(--cg-black); }

/* „Chcę sprzedać" — plakietka-przycisk (32 px, ciemny tekst na szarym) */
.cg-buyback__cta {
	display: inline-flex; align-items: center; justify-content: center;
	height: 32px; padding: 10px 12px; border-radius: var(--cg-r-label);
	background: var(--cg-black-05); color: var(--cg-text);
	white-space: nowrap;
}
.cg-buyback__cta:hover { background: var(--cg-gold-10); color: var(--cg-gold); }

/* Stan „nie mamy jeszcze cen" — patrz komentarz w page-skup.php */
.cg-buyback__empty {
	padding: 32px 24px; border-radius: var(--cg-r-box);
	background: var(--cg-gold-10); color: var(--cg-gold);
	font-weight: 400; line-height: 1.56;
}

/* „Jak sprzedać…" — tekst + kroki (Figma 7335:4029 + 7335:4046) */
.cg-howto {
	position: relative;
	display: grid; gap: 32px;
	grid-template-columns: 647px 1fr;
	align-items: center;
	margin-top: 96px;
}
.cg-howto__text { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.cg-howto__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cg-howto__body { font-weight: 400; font-size: 18px; line-height: 1.56; letter-spacing: -0.005em; }
.cg-howto__body p { margin: 0 0 1.56em; }
.cg-howto__body p:last-child { margin-bottom: 0; }
.cg-howto__btns { display: flex; flex-wrap: wrap; gap: 16px; }

/* Przyciski z ikoną w kółku (Figma: tekst + okrągła ikona po prawej) */
.cg-btn-arrow {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	height: 56px; padding: 0 4px 0 20px;
	border: 0; border-radius: var(--cg-r-round);
	font: var(--cg-fw-medium) var(--cg-fs-body)/1 var(--cg-font);
	letter-spacing: var(--cg-tracking);
}
.cg-btn-arrow__icon {
	display: grid; place-items: center; flex-shrink: 0;
	width: 48px; height: 48px; border-radius: var(--cg-r-round);
}
.cg-btn-arrow--gold {
	background-image: var(--cg-gold-gradient);
	box-shadow: var(--cg-shadow-card);
	color: var(--cg-text);
}
.cg-btn-arrow--gold .cg-btn-arrow__icon { background: var(--cg-black-10); }
.cg-btn-arrow--outline {
	border: 1px solid var(--cg-gold);
	background: var(--cg-gold-10);
	color: var(--cg-gold);
}
.cg-btn-arrow--outline .cg-btn-arrow__icon { background: var(--cg-gold-10); }

/* Kroki: OSOBNE białe karty (nie jeden kontener), przesunięte względem siebie */
.cg-steps {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; gap: 8px;
}
.cg-step {
	display: flex; gap: 32px; align-items: flex-start;
	padding: 32px; border-radius: var(--cg-r-card);
	background: var(--cg-white);
	border: 1px solid var(--cg-black-10);
	box-shadow: var(--cg-shadow-card);
}
/* Schodkowe przesunięcie z projektu — karta 2 i 3 wysuwają się w prawo */
.cg-step:nth-child(2) { margin-left: 32px; }
.cg-step:nth-child(3) { margin-left: 64px; }

.cg-step__icon {
	display: grid; place-items: center; flex-shrink: 0;
	width: 72px; height: 72px;
	border-radius: var(--cg-r-card);      /* 16 px, nie kółko */
	background: var(--cg-gold-10);
	color: var(--cg-gold);
}
/* SVG z Figmy mają width="100%" — bez jawnych wymiarów zwijają się do zera */
.cg-step__icon svg { width: 40px; height: 40px; }

.cg-step__body { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cg-step h3 { font-size: 24px; line-height: 1.12; }
.cg-step p { margin: 0; font-weight: 400; font-size: 18px; line-height: 1.56; letter-spacing: -0.005em; }

/* Monety w tle — dekoracja spod kart (Figma 7335:4019 / 7335:4024) */
.cg-howto__coin {
	position: absolute; z-index: 0; pointer-events: none;
	width: 302px; height: 302px;
	background: url('../img/skup/moneta.png') center / contain no-repeat;
}
.cg-howto__coin--1 { left: 42%; bottom: -40px; }
.cg-howto__coin--2 { right: -40px; top: -30px; width: 280px; height: 280px; }

/* Bloki tekstu (Figma 7335:4377: 1056 px, odstęp 64 px) */
.cg-seo { max-width: 1056px; margin: 96px auto 0; }
.cg-seo section + section { margin-top: 64px; }
.cg-seo h2 { font-size: 24px; line-height: 1.2; }
.cg-seo p {
	margin-top: 24px; font-weight: 400; font-size: 18px;
	line-height: 1.56; letter-spacing: -0.005em;
}

@media (max-width: 1280px) {
	.cg-buyback,
	.cg-howto { grid-template-columns: 1fr; }
	.cg-buyback__head,
	.cg-buyback__row { grid-template-columns: 1fr auto; }
	.cg-buyback__head span:last-child { display: none; }
	.cg-howto__coin { display: none; }   /* dekoracja tylko tam, gdzie jest na nią miejsce */
	.cg-step:nth-child(2),
	.cg-step:nth-child(3) { margin-left: 0; }
}

@media (max-width: 900px) {
	.cg-buyback__table { padding: 12px; }
	.cg-buyback__head { display: none; }   /* etykiety wchodzą do wierszy */
	/* Figma 8076:4753 — wiersz ma DWA poziomy, nie trzy:
	     [ nazwa .................. cena ]
	     [ ................ „Chcę sprzedać" ]
	   Jedna kolumna układała wszystko w słupek i dawała 140 px zamiast 108.
	   Przy 15 pozycjach dla złota to 480 px nadmiaru na jednej stronie.

	   Wysokość wychodzi dokładnie z projektu: 16 wyściółki + 28 (wyższy z pary
	   nazwa/cena) + 16 odstępu + 32 przycisk + 16 wyściółki = 108. */
	.cg-buyback__row {
		grid-template-columns: 1fr auto;
		grid-template-areas: "nazwa cena" "cta cta";
		gap: 16px 12px;
		align-items: center; padding: 16px;
	}
	.cg-buyback__name { grid-area: nazwa; }
	.cg-buyback__row > .cg-badge { grid-area: cena; justify-self: end; }
	/* Przycisk do prawej krawędzi — w Figmie zaczyna się w 173/294 szerokości wiersza,
	   czyli jest wyrównany do prawej, nie rozciągnięty na całą szerokość. */
	.cg-buyback__cta { grid-area: cta; justify-self: end; }
	.cg-howto { margin-top: 56px; }
	.cg-step { flex-direction: column; gap: 16px; padding: 20px; }
	.cg-seo { margin-top: 56px; }
	.cg-seo section + section { margin-top: 40px; }
}

/* ══ KURSY METALI + KALKULATOR (Figma 7335:5561) ═════════════════════ */

.cg-quotes__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.cg-quotes__stamp { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding-inline: 12px; }

/* Wykres (1192) + kalkulator (376) */
.cg-quotes {
	display: grid; gap: 32px;
	grid-template-columns: 1fr 376px;
	align-items: start;
	margin-top: 48px;
}

.cg-chart {
	padding: 24px; border-radius: var(--cg-r-card);
	background: var(--cg-black-02);
	border: 4px solid var(--cg-white-10);
}
.cg-chart__tools {
	display: flex; align-items: center; justify-content: flex-start;
	gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}

/* Rozwijane pola nad wykresem (Figma 7335:5006) — pigułka: etykieta (szara) + wartość (złota).
   Natywny <select> pod spodem = dostępność z klawiatury, czytnik ekranu i mobilny picker za darmo. */
.cg-select {
	display: inline-flex; align-items: center; gap: 8px;
	height: 44px; padding: 0 14px 0 18px;
	border: 1px solid var(--cg-black-10);
	border-radius: var(--cg-r-round);
	background: var(--cg-white);
	cursor: pointer;
}
.cg-select:focus-within { border-color: var(--cg-gold); }
.cg-select__label {
	font: var(--cg-fw-medium) var(--cg-fs-small)/1 var(--cg-font);
	color: var(--cg-black-30); white-space: nowrap;
}
.cg-select__field {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	border: 0; outline: none; cursor: pointer;
	padding: 0 22px 0 0;
	background: transparent no-repeat right center;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23C18C21" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
	background-size: 16px 16px;
	font: var(--cg-fw-medium) var(--cg-fs-small)/1 var(--cg-font);
	color: var(--cg-gold); letter-spacing: var(--cg-tracking);
	/* QA 2026-09-04: „obcina gram" — natywny <select> z appearance:none potrafi
	   przyciąć tekst przy strzałce (zwłaszcza Chrome/Windows). Zapas na glif
	   + zakaz kurczenia się poniżej treści. */
	padding-right: 26px;
	min-width: max-content;
}
.cg-select--locked { opacity: .65; }
.cg-select--locked,
.cg-select--locked .cg-select__field { cursor: default; }

/* „Pobierz zrzut" (Figma) — złoty przycisk dosunięty do prawej krawędzi toolbaru. */
.cg-chart__download {
	display: inline-flex; align-items: center; gap: 8px;
	height: 44px; padding-inline: 20px; margin-left: auto;
	border: 0; border-radius: var(--cg-r-round); cursor: pointer;
	background-image: var(--cg-gold-gradient); color: var(--cg-text);
	font: var(--cg-fw-medium) var(--cg-fs-small)/1 var(--cg-font);
	letter-spacing: var(--cg-tracking);
}
.cg-chart__download:hover { filter: brightness(1.06); }
.cg-chart__download:focus-visible { outline: 2px solid var(--cg-gold); outline-offset: 3px; }
.cg-chart__download svg { display: block; }

.cg-chip-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cg-chip {
	display: inline-flex; align-items: center; gap: 4px;
	height: 40px; padding-inline: 20px; border: 0; cursor: pointer;
	border-radius: var(--cg-r-round);
	background: var(--cg-black-02);
	font: var(--cg-fw-medium) var(--cg-fs-small)/1 var(--cg-font);
	letter-spacing: var(--cg-tracking);
	color: var(--cg-text);
}
.cg-chip:hover { background: var(--cg-gold-10); color: var(--cg-gold); }
.cg-chip.is-active { background: var(--cg-gold-10); color: var(--cg-gold); }

.cg-chart__canvas {
	display: grid; place-items: center;
	min-height: 480px; padding: 32px;
	border-radius: var(--cg-r-box);
	background: var(--cg-black-02);
}
.cg-chart__canvas svg { width: 100%; height: auto; }
.cg-chart__empty {
	max-width: 520px; text-align: center;
	font-weight: 400; line-height: 1.56; color: var(--cg-text);
}

/* Wykres kursu (rysowany w SVG, bez bibliotek zewnętrznych) */
/* 🔴 `min-height: 0` — bez tego pod wykresem wisiało ~130 px pustego tła.
   `min-height` (480 px desktop / 280 px telefon) istnieje dla PUSTEGO STANU: wtedy
   pojemnik jest siatką i centruje komunikat „brak danych", więc musi mieć w czym
   centrować. Gdy jest wykres, ta sama wysokość staje się szkodliwa — SVG ma
   `viewBox="0 0 800 280"` i przy `height: auto` skaluje się PROPORCJONALNIE
   (294 px szerokości → 103 px wysokości), więc reszta pojemnika zostaje pusta.

   Ktoś już zauważył, że stan „jest wykres" wymaga innego układu (przełączenie na
   `block` poniżej), ale nie zdjął wysokości przewidzianej dla stanu pustego.
   Selektor z `:has()` ma specyficzność (0,2,0) i bije regułę mobilną (0,1,0),
   więc jedna linijka wystarcza na wszystkie szerokości.

   ⚠️ To usuwa PUSTKĘ, nie zmienia proporcji wykresu. Czy 103 px to właściwa wysokość
   na telefonie, rozstrzyga Figma 8071:3999 — wymagałoby to zmiany `viewBox`, czyli
   ruszenia generatora SVG, nie stylu. */
.cg-chart__canvas:has( [data-chart-plot] ) { display: block; place-items: initial; min-height: 0; }
.cg-chart__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.cg-chart__pair { font-weight: 500; color: var(--cg-text); }
.cg-chart__now { font-size: 24px; font-weight: 500; }
.cg-chart__delta { font-size: var(--cg-fs-small); font-weight: 500; }
.cg-chart__delta.is-up { color: #1B7F3B; }
.cg-chart__delta.is-down { color: #B3261E; }

.cg-chart__plot { width: 100%; }
.cg-chart__svg { display: block; width: 100%; height: auto; }
.cg-chart__line { fill: none; stroke: var(--cg-gold); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cg-chart__dot { fill: var(--cg-gold); }
.cg-chart__grid { stroke: rgba(0, 0, 0, .08); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Watermark w tle wykresu (Figma 7335:5006) — para giełdowa + polska nazwa, ledwo widoczne. */
.cg-chart__wm {
	fill: rgba(0, 0, 0, .05);
	font-weight: 700; font-size: 60px; letter-spacing: 1px;
	dominant-baseline: middle; pointer-events: none; user-select: none;
}
.cg-chart__wm--sub { font-size: 26px; font-weight: 500; }
/* SVG skaluje się proporcjonalnie (bez preserveAspectRatio="none") — inaczej opisy osi
   rozjechałyby się w poziomie razem z wykresem. */
.cg-chart__ytick,
.cg-chart__xtick {
	font-family: inherit; font-size: 11px; fill: rgba(0, 0, 0, .5);
}
.cg-chart__ytick { text-anchor: end; }
.cg-chart__status { margin-top: 12px; font-weight: 400; color: var(--cg-text); }
.cg-chart__note {
	margin-top: 16px; font-weight: 400; font-size: var(--cg-fs-small);
	line-height: 1.56; color: rgba(0, 0, 0, .6);
}

/* Kalkulator */
.cg-calc {
	display: flex; flex-direction: column; gap: 16px;
	padding: 16px; border-radius: var(--cg-r-card);
	background: var(--cg-white);
	border: 1px solid var(--cg-black-10);
	box-shadow: var(--cg-shadow-card);
}
.cg-calc__tabs {
	display: flex; gap: 4px; padding: 4px;
	border-radius: var(--cg-r-round); background: var(--cg-black-02);
}
.cg-calc__tab {
	flex: 1 0 0; height: 32px; border: 0; cursor: pointer;
	border-radius: var(--cg-r-round); background: transparent;
	font: var(--cg-fw-medium) var(--cg-fs-small)/1 var(--cg-font);
	letter-spacing: var(--cg-tracking); color: var(--cg-text);
}
.cg-calc__tab.is-active { background: var(--cg-white); color: var(--cg-black); box-shadow: var(--cg-shadow-card); }

/* Figma 8071:3999: pole = BIAŁA karta 114 px z ramką (etykieta u góry, wartość u dołu). */
.cg-calc__seg {
	display: flex; flex-direction: column; justify-content: space-between;
	min-height: 114px;
	padding: 16px; border-radius: var(--cg-r-card);
	background: var(--cg-white); border: 1px solid var(--cg-black-10);
}
.cg-calc__seg label { font-size: var(--cg-fs-small); line-height: 1; }
.cg-calc__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cg-calc__row input {
	flex: 1 0 0; min-width: 0; height: 32px; padding: 0;
	border: 0; background: transparent;
	font: var(--cg-fw-medium) 28px/1 var(--cg-font);
	letter-spacing: var(--cg-tracking); color: var(--cg-black);
}
.cg-calc__row input:focus { outline: none; }
.cg-calc__row input:disabled { color: var(--cg-black-30); }
.cg-calc__unit {
	display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
	height: 32px; padding-inline: 8px; border: 0; cursor: pointer;
	border-radius: var(--cg-r-round); background: var(--cg-white);
	font: var(--cg-fw-medium) var(--cg-fs-body)/1 var(--cg-font);
	letter-spacing: var(--cg-tracking); color: var(--cg-black);
}
.cg-calc__dot { width: 16px; height: 16px; border-radius: 50%; background-image: var(--cg-gold-gradient); }
.cg-calc__swap { display: grid; place-items: center; font-size: 20px; color: var(--cg-black-30); }

/* Złote podsumowanie (Figma): Wartość w PLN / Marża / Wartość całkowita. */
.cg-calc__summary {
	display: flex; flex-direction: column; gap: 8px;
	padding: 16px; border-radius: var(--cg-r-card);
	background: var(--cg-gold-10); border: 1px solid var(--cg-gold);
	font-weight: 400; font-size: 14px; letter-spacing: var(--cg-tracking-body); color: var(--cg-text);
}
.cg-calc__sumrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cg-calc__val { font-weight: var(--cg-fw-medium); }
.cg-calc__chip {
	display: inline-flex; align-items: center; height: 24px; padding: 0 8px;
	border-radius: 6px; background: var(--cg-gold-10);
	font: var(--cg-fw-medium) 14px/1 var(--cg-font); color: var(--cg-gold);
}
.cg-calc__total { margin-top: 8px; align-items: flex-end; }
.cg-calc__total span:last-child {
	font: 600 20px/1 var(--cg-font); letter-spacing: var(--cg-tracking-body); color: var(--cg-gold);
}
/* Uczciwa notka w karcie kalkulatora — bez drugiej grubej wyściółki (karta w karcie). */
.cg-calc .cg-infobar { padding: 12px 16px; font-size: var(--cg-fs-small); }

/* Polecane produkty */
.cg-quotes__products { margin-top: 96px; }

@media (max-width: 1280px) {
	.cg-quotes { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.cg-quotes__bar { flex-direction: column; gap: 16px; }
	.cg-chart { padding: 12px; }
	.cg-chart__canvas { min-height: 280px; padding: 16px; }

	/* Figma 8071:3999 — pola nad wykresem stoją w SIATCE 2×2 (358×120, dwa rzędy po 56),
	   a nie zawijają się swobodnie. Przy `flex-wrap` pigułki mają szerokość swojej treści
	   (zmierzone: 148 / 135 / 169 / 163 px), więc układały się nierówno w trzy rzędy —
	   „Okres" i „Jednostka" lądowały samotnie, każde w osobnej linii.

	   Siatka zrównuje szerokości niezależnie od długości etykiet, więc dodanie metalu
	   o dłuższej nazwie niczego nie rozjedzie. Przycisk pobrania przez całą szerokość:
	   w Figmie siedzi w rogu wykresu, a to zmiana znacznika — do zrobienia osobno. */
	.cg-chart__tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.cg-chart__tools > * { width: auto; min-width: 0; }
	/* `justify-self: end` jawnie — do prawej, bo w Figmie ten przycisk siedzi w PRAWYM
	   górnym rogu wykresu. Bez tej linijki wychodziło podobnie, ale przypadkiem. */
	.cg-chart__download { grid-column: 1 / -1; justify-self: end; }
	.cg-quotes__products { margin-top: 56px; }
}

/* ══ ODDZIAŁY (Figma 7230:3361 — strona oddziału; lista = układ własny) ══
 *
 * ⚠️ KAŻDY svg tutaj MA JAWNE WYMIARY. SVG eksportowane z Figmy mają width="100%"
 * i bez tego zwijają się w gridzie/flexie do zera — ikona „jest", ale jej nie widać.
 *
 * ⚠️ NAZWY KLAS: `.cg-branch` jest już ZAJĘTE w main.css (pigułka oddziału na stronie
 * głównej, `display:inline-flex`). Nadanie tej klasy elementowi <main> zamieniło całą
 * stronę w jeden poziomy rządek. Kontener strony to `.cg-branch-page`; wszystko inne
 * jedzie na `.cg-branch__*` (BEM), które z `.cg-branch` się nie zderza.
 */

.cg-h1 { font-size: var(--cg-fs-h1); line-height: var(--cg-lh-h1); margin: 0; }

/* ── Hero: zdjęcie 1192 + karta 376 (32 przerwy = 1600) ───────────────── */
.cg-branch__hero {
	display: grid; grid-template-columns: 1192fr 376fr; gap: 32px;
	align-items: start; margin-top: 32px;
}

.cg-branch__figure { position: relative; }

.cg-branch__photo {
	display: block; width: 100%; height: 671px; object-fit: cover;
	border-radius: var(--cg-r-card);
}

/* Brak zdjęcia oddziału = plansza w barwach marki. Świadomie nie podstawiamy
 * jednego zdjęcia biura pod 23 adresy — klient zastałby inne wnętrze. */
.cg-branch__placeholder {
	display: grid; place-content: center; justify-items: center; gap: 24px;
	height: 671px; border-radius: var(--cg-r-card);
	background: var(--cg-green-gradient);
}
.cg-branch__placeholder-logo svg { width: 220px; height: 72px; }
.cg-branch__placeholder-city {
	margin: 0; font-size: 48px; line-height: var(--cg-lh-h1);
	letter-spacing: var(--cg-tracking);
	background-image: var(--cg-gold-gradient);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Pasek miniatur wjeżdża na dół zdjęcia (Figma: y=979 przy zdjęciu do 1049) */
.cg-branch__thumbs {
	position: absolute; inset: auto 24px 16px; z-index: 1;
	display: flex; gap: 16px; margin: 0; padding: 16px; list-style: none;
	border-radius: var(--cg-r-card); background: rgba(255, 255, 255, .9);
	backdrop-filter: var(--cg-blur-nav);
	overflow-x: auto; scrollbar-width: none;
}
.cg-branch__thumbs::-webkit-scrollbar { display: none; }
.cg-branch__thumbs img {
	width: 172px; height: 108px; object-fit: cover; border-radius: var(--cg-r-img); display: block;
}

/* ── Karta z danymi oddziału ──────────────────────────────────────────── */
.cg-branch__card {
	display: flex; flex-direction: column; gap: 24px;
	padding: 32px; border: 1px solid var(--cg-black-10);
	border-radius: var(--cg-r-card); background: var(--cg-white);
	box-shadow: var(--cg-shadow-card);
	position: sticky; top: 120px;   /* dane kontaktowe zostają w zasięgu wzroku */
}
.cg-branch__card-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cg-branch__card-head h2 { margin: 0; font-size: var(--cg-fs-h2); line-height: var(--cg-lh-h1); }

.cg-rating { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--cg-fs-body); }
.cg-rating__value { color: var(--cg-text); }
.cg-rating__stars { display: inline-flex; }
.cg-rating__star svg { width: 18px; height: 18px; display: block; }
.cg-rating__count { color: var(--cg-text); text-decoration: underline; }
.cg-rating__google svg { width: 16px; height: 16px; display: block; }

.cg-branch__box {
	padding: 16px; border-radius: var(--cg-r-card); background: var(--cg-black-02);
}
.cg-branch__address { display: flex; align-items: flex-start; gap: 16px; }
.cg-branch__address address { font-style: normal; font-weight: 400; line-height: 1.56; color: var(--cg-text); }
.cg-branch__icon svg { width: 24px; height: 24px; display: block; flex: 0 0 auto; }

.cg-hours { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.cg-hours__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cg-hours__row dt { color: var(--cg-text); }
.cg-hours__row dd { margin: 0; }

/* Przyciski akcji: złoty (telefon) i obrysowany (trasa) — pigułka z ikoną w kółku */
.cg-branch__actions { display: flex; flex-direction: column; gap: 8px; }
.cg-action {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	height: 56px; padding: 0 4px 0 20px; border-radius: var(--cg-r-round);
	letter-spacing: var(--cg-tracking);
}
.cg-action--gold { background-image: var(--cg-gold-gradient); color: var(--cg-text); }
.cg-action--gold .cg-action__icon { background: var(--cg-black-10); }
.cg-action--outline {
	border: 1px solid var(--cg-gold); background: var(--cg-gold-10); color: var(--cg-gold);
}
.cg-action--outline .cg-action__icon { background: var(--cg-gold-10); }
.cg-action__icon {
	display: grid; place-items: center; flex: 0 0 auto;
	width: 48px; height: 48px; border-radius: var(--cg-r-round);
}
.cg-action__icon svg { width: 24px; height: 24px; display: block; }

/* ── „Co wyróżnia oddział" — 8 kafli (4 × 2) ──────────────────────────── */
.cg-branch__intro { max-width: 800px; margin-bottom: 64px; }
.cg-branch__intro p { margin: 24px 0 0; font-weight: 400; font-size: 18px; line-height: 1.56; color: var(--cg-text); }

.cg-features {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
	margin: 0; padding: 0; list-style: none;
}
.cg-feature {
	display: flex; flex-direction: column; gap: 24px; padding: 40px;
	border: 1px solid var(--cg-black-10); border-radius: var(--cg-r-card);
	background: var(--cg-white); box-shadow: var(--cg-shadow-card);
}
.cg-feature__icon {
	display: grid; place-items: center; width: 72px; height: 72px;
	border-radius: var(--cg-r-card); background: var(--cg-gold-10);
}
.cg-feature__icon svg { width: 40px; height: 40px; display: block; }
.cg-feature h3 { margin: 0; font-size: 28px; line-height: 1.12; letter-spacing: var(--cg-tracking); }
.cg-feature p { margin: 0; font-weight: 400; font-size: 18px; line-height: 1.56; color: var(--cg-text); }

/* ── Opinie ───────────────────────────────────────────────────────────── */
.cg-branch__reviews-head {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
	margin-bottom: 48px;
}
.cg-branch__reviews-head p {
	margin: 24px 0 0; max-width: 648px;
	font-weight: 400; font-size: 18px; line-height: 1.56; color: var(--cg-text);
}
.cg-branch__reviews-head .cg-btn-secondary { flex: 0 0 auto; padding-right: 4px; }

.cg-reviews {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
	margin: 0; padding: 0; list-style: none;
}
.cg-review {
	display: flex; flex-direction: column; gap: 16px; padding: 24px;
	border: 1px solid var(--cg-black-10); border-radius: var(--cg-r-card);
	background: var(--cg-black-02);
}
.cg-review__author { margin: 0; }
.cg-review__stars { display: flex; margin: 0; }
.cg-review__text { margin: 0; font-weight: 400; line-height: 1.5; color: var(--cg-text); }
.cg-review__date { margin: auto 0 0; font-size: var(--cg-fs-small); color: var(--cg-black-30); }

/* ── Mapa ładowana na kliknięcie (bez klucza API, bez wysyłki IP do Google
 *    zanim ktokolwiek o to poprosi) ────────────────────────────────────── */
.cg-map {
	height: 640px; border-radius: var(--cg-r-card); overflow: hidden;
	background: var(--cg-black-02); border: 1px solid var(--cg-black-10);
}
.cg-map__load {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
	width: 100%; height: 100%; padding: 32px; border: 0; cursor: pointer;
	background: var(--cg-black-02);
	font: var(--cg-fw-medium) var(--cg-fs-body)/1.5 var(--cg-font);
	letter-spacing: var(--cg-tracking); color: var(--cg-text);
}
.cg-map__load:hover { background: var(--cg-gold-10); }
.cg-map__pin { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--cg-r-card); background: var(--cg-gold-10); }
.cg-map__pin svg { width: 40px; height: 40px; display: block; }
.cg-map__label { font-size: var(--cg-fs-h2); color: var(--cg-black); }
.cg-map__note { max-width: 420px; font-weight: 400; font-size: var(--cg-fs-small); line-height: 1.5; color: var(--cg-black-30); }
.cg-map__frame { width: 100%; height: 100%; border: 0; display: block; }

/* ── Kafle oddziałów: karuzela (strona oddziału) i siatka (lista) ─────── */
.cg-branch-slider {
	display: flex; gap: 8px; margin: 0; padding: 0 0 8px; list-style: none;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.cg-branch-slider > li { flex: 0 0 528px; scroll-snap-align: start; }

.cg-branch-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
	margin: 0; padding: 0; list-style: none;
}

.cg-branch-tile {
	display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
	height: 100%; padding: 16px;
	border: 1px solid var(--cg-black-10); border-radius: var(--cg-r-card);
	background: var(--cg-white);
}
.cg-branch-tile:hover { border-color: var(--cg-gold); }
.cg-branch-tile__thumb {
	display: grid; place-items: center; width: 100%; height: 200px;
	border-radius: var(--cg-r-img); background: var(--cg-green-gradient);
}
.cg-branch-tile__logo svg { width: 140px; height: 46px; display: block; }
.cg-branch-tile__title { font-size: var(--cg-fs-h2); line-height: 1.12; letter-spacing: var(--cg-tracking); }
.cg-branch-tile__addr {
	display: flex; align-items: flex-start; gap: 8px;
	font-weight: 400; font-size: var(--cg-fs-small); line-height: 1.5; color: var(--cg-text);
}
.cg-branch-tile__phone { margin-top: auto; color: var(--cg-gold); }

/* ── Lista oddziałów: nagłówek miasta ─────────────────────────────────── */
.cg-city { padding-block: 48px 0; }
.cg-city__name {
	display: flex; align-items: center; gap: 16px; margin: 0 0 24px;
	font-size: var(--cg-fs-h2); line-height: 1.2;
}

/* ── Tekst SEO ────────────────────────────────────────────────────────── */
.cg-branch__seo { max-width: 1056px; margin-inline: auto; }
.cg-branch__seo h2 { margin: 0 0 24px; font-size: var(--cg-fs-h2); line-height: 1.2; }
.cg-branch__seo p { margin: 0; font-weight: 400; font-size: 18px; line-height: 1.56; color: var(--cg-text); }

/* ── Responsywność (w Figmie NIE MA widoków mobilnych — to moja interpretacja) ── */
@media (max-width: 1400px) {
	.cg-features { grid-template-columns: repeat(2, 1fr); }
	.cg-reviews  { grid-template-columns: 1fr; }
	.cg-branch-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
	/* Karta z danymi ląduje POD zdjęciem, ale NAD resztą treści — telefon i godziny
	 * to jedyne, po co ktoś wchodzi na stronę oddziału z ulicy. */
	.cg-branch__hero { grid-template-columns: 1fr; }
	.cg-branch__card { position: static; }
	.cg-branch__photo,
	.cg-branch__placeholder { height: 420px; }
	.cg-branch__reviews-head { flex-direction: column; align-items: flex-start; }
	.cg-branch-slider > li { flex-basis: 420px; }
	.cg-map { height: 480px; }
}

@media (max-width: 900px) {
	.cg-features { grid-template-columns: 1fr; }
	.cg-feature { padding: 24px; }
	.cg-feature h3 { font-size: 22px; letter-spacing: var(--cg-tracking); }
	.cg-feature p,
	.cg-branch__intro p,
	.cg-branch__reviews-head p,
	.cg-branch__seo p { font-size: var(--cg-fs-body); }
	.cg-branch-grid { grid-template-columns: 1fr; }
	.cg-branch-slider > li { flex-basis: 82%; }
	.cg-branch__photo,
	.cg-branch__placeholder { height: 260px; }
	.cg-branch__placeholder-logo svg { width: 150px; height: 49px; }
	.cg-branch__placeholder-city { font-size: 32px; }
	.cg-branch__card { padding: 20px; }
	.cg-branch__thumbs { inset: auto 8px 8px; gap: 8px; padding: 8px; }
	.cg-map { height: 380px; }
	.cg-map__label { font-size: var(--cg-fs-body); }
	.cg-city__name { flex-wrap: wrap; }
}

/* ── Kontakt: lista 23 oddziałów (było: jeden wpisany na sztywno z Figmy) ── */

/* 23 pozycje nie mogą rozpychać strony na trzy ekrany — lista przewija się w miejscu. */
.cg-locations__list {
	max-height: 620px; overflow-y: auto; padding-right: 8px;
	scrollbar-width: thin;
}
/* 🐛 Bazowa reguła daje .cg-location sztywne height: 56px, a adres łamie się do
   drugiej linii — wystawał POD kolejną kartę (zrzut Huberta 17.08). min-height
   zostawia rytm 56, ale pozwala wierszowi urosnąć o linię adresu. */
.cg-locations__list .cg-location { flex-wrap: wrap; row-gap: 4px; height: auto; min-height: 56px; }
.cg-location__street {
	flex: 1 0 100%; order: 3;
	font-weight: 400; font-size: var(--cg-fs-small); color: var(--cg-black-30);
}

/* Pole wyboru oddziału (Figma 8122:7327) — istnieje tylko na telefonie. */
.cg-locselect { display: none; }
.cg-locselect {
	width: 100%; padding: 4px; border: 0; border-radius: 48px;
	background: var(--cg-black-05); cursor: pointer; text-align: left;
}
.cg-locselect__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	height: 48px; padding: 0 12px 0 20px; border-radius: 40px;
	background: var(--cg-white);
	box-shadow: 0 7px 3px rgba(0, 0, 0, .02), 0 22px 8.5px rgba(0, 0, 0, .02), 0 100px 40px rgba(0, 0, 0, .03);
}
.cg-locselect__col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cg-locselect__label { font: var(--cg-fw-medium) 11px/1 var(--cg-font); letter-spacing: var(--cg-tracking); color: var(--cg-text); }
.cg-locselect__value {
	font: var(--cg-fw-medium) 14px/1 var(--cg-font); letter-spacing: var(--cg-tracking); color: var(--cg-gold);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cg-branch-box__ctas { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-branch-box__ctas .cg-branch-box__cta { flex: 1 0 auto; }

@media (max-width: 900px) {
	/* Figma 8122:7327: zamiast listy 23 pozycji — pole wyboru 56 px; lista wysuwa
	   się po tapnięciu i zwija po wyborze (JS w page-kontakt.php). */
	.cg-locselect { display: block; }
	.cg-locations__list { display: none; max-height: 380px; margin-top: 8px; }
	.cg-locations__list.is-open { display: flex; }
}

/* ══ STREFA WIEDZY (blog) — BRAK w Figmie, układ własny ══════════════════
 * Zbudowany z klocków, które już są: kafel `.cg-article` ze strony głównej,
 * plakietki, przyciski, siatka 1600 px. Blog ma wyglądać jak część tej samej
 * strony, a nie jak doklejony WordPress.
 */

/* ── Pigułki kategorii ────────────────────────────────────────────────── */
.cg-cat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 48px; }
.cg-cat-pill {
	display: inline-flex; align-items: center; gap: 8px;
	height: 40px; padding-inline: 16px; border-radius: var(--cg-r-round);
	border: 1px solid var(--cg-black-10); background: var(--cg-white);
	font-size: var(--cg-fs-small); letter-spacing: var(--cg-tracking); color: var(--cg-text);
}
.cg-cat-pill:hover { border-color: var(--cg-gold); color: var(--cg-gold); }
.cg-cat-pill.is-active { background: var(--cg-gold-10); border-color: var(--cg-gold); color: var(--cg-gold); }
.cg-cat-pill__count { font-size: 12px; color: var(--cg-black-30); }
.cg-cat-pill.is-active .cg-cat-pill__count { color: var(--cg-gold); }

/* ── Kafel wpisu (rozwinięcie .cg-article z main.css) ─────────────────── */
.cg-article__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin-top: 8px; font-weight: 400; font-size: var(--cg-fs-small); color: var(--cg-black-30);
}

/* Wpis bez miniatury — plansza w barwach marki zamiast dziury w siatce */
.cg-article__blank,
.cg-lead-article__media .cg-article__blank {
	display: grid; place-items: center; width: 100%; height: 100%;
	background: var(--cg-green-gradient);
}
.cg-article__logo svg { width: 120px; height: 40px; display: block; }

/* ── Wyróżniony wpis (tylko 1. strona listy) ──────────────────────────── */
.cg-lead-article {
	display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
	margin-bottom: 64px; padding: 24px;
	border: 1px solid var(--cg-black-10); border-radius: var(--cg-r-card);
	background: var(--cg-black-02);
}
.cg-lead-article__media {
	display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--cg-r-img);
}
.cg-lead-article__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-lead-article__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cg-lead-article__title { margin: 0; font-size: 32px; line-height: 1.16; letter-spacing: var(--cg-tracking); }
.cg-lead-article__title a:hover { color: var(--cg-gold); }
.cg-lead-article__excerpt { margin: 0; font-weight: 400; line-height: 1.56; color: var(--cg-text); }

/* ── Wpis ─────────────────────────────────────────────────────────────── */
.cg-post { display: block; }
.cg-post__head { max-width: 800px; margin-top: 32px; }
.cg-post__title { margin: 0 0 16px; font-size: var(--cg-fs-h1); line-height: var(--cg-lh-h1); }

.cg-post__hero {
	margin: 48px 0; border-radius: var(--cg-r-card); overflow: hidden;
}
.cg-post__hero img { width: 100%; height: auto; display: block; }

/* Kolumna tekstu ~800 px: przy 1600 px linia ma ~200 znaków i oko gubi
 * początek następnego wiersza. Zdjęcia i boks produktowy mogą wyjść szerzej. */
.cg-post__content { max-width: 800px; font-weight: 400; font-size: 18px; line-height: 1.7; color: var(--cg-text); }
.cg-post__content > * + * { margin-top: 24px; }
.cg-post__content h2 { margin-top: 56px; font-size: 32px; line-height: 1.2; color: var(--cg-black); }
.cg-post__content h3 { margin-top: 40px; font-size: 24px; line-height: 1.3; color: var(--cg-black); }
.cg-post__content a { color: var(--cg-gold); text-decoration: underline; }
.cg-post__content ul,
.cg-post__content ol { padding-left: 24px; }
.cg-post__content li + li { margin-top: 8px; }
.cg-post__content img { max-width: 100%; height: auto; border-radius: var(--cg-r-img); }
.cg-post__content blockquote {
	margin-inline: 0; padding: 24px 32px; border-left: 3px solid var(--cg-gold);
	background: var(--cg-gold-10); border-radius: var(--cg-r-box);
	font-size: 20px; line-height: 1.5; color: var(--cg-black);
}
.cg-post__content table { width: 100%; border-collapse: collapse; }
.cg-post__content th,
.cg-post__content td { padding: 12px; border: 1px solid var(--cg-black-10); text-align: left; }
.cg-post__content figure { margin-inline: 0; }
.cg-post__content .alignwide,
.cg-post__content .alignfull { max-width: min(1200px, 100%); }

/* CTA na końcu wpisu — prowadzi do oddziału, nie w próżnię */
.cg-post__cta {
	display: flex; align-items: center; justify-content: space-between; gap: 32px;
	max-width: 800px; margin-top: 64px; padding: 32px;
	border-radius: var(--cg-r-card); background: var(--cg-green-gradient); color: var(--cg-white);
}
.cg-post__cta h2 { margin: 0 0 8px; font-size: var(--cg-fs-h2); line-height: 1.2; }
.cg-post__cta p { margin: 0; font-weight: 400; line-height: 1.56; color: rgba(255, 255, 255, .7); }
.cg-post__cta .cg-btn-secondary { flex: 0 0 auto; }

/* ── Boks produktowy w treści (blok Gutenberga) ───────────────────────── */
.cg-inline-product {
	display: grid; grid-template-columns: 160px 1fr auto; gap: 24px; align-items: center;
	margin-block: 40px; padding: 24px;
	border: 1px solid var(--cg-gold); border-radius: var(--cg-r-card);
	background: var(--cg-gold-10);
}
.cg-inline-product__media { display: block; border-radius: var(--cg-r-img); overflow: hidden; background: var(--cg-white); }
.cg-inline-product__media img { width: 100%; height: 160px; object-fit: contain; display: block; }
.cg-inline-product__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cg-inline-product__eyebrow {
	margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--cg-gold);
}
.cg-inline-product__title { margin: 0; font-size: var(--cg-fs-h2); line-height: 1.2; color: var(--cg-black); }
.cg-inline-product__title a:hover { color: var(--cg-gold); }
.cg-inline-product__price { margin: 0; font-size: 20px; color: var(--cg-black); }
.cg-inline-product__price del { color: var(--cg-black-30); font-size: var(--cg-fs-body); }
.cg-inline-product__cta { flex: 0 0 auto; }

/* ── Wyszukiwanie ─────────────────────────────────────────────────────── */
.cg-search-again { display: flex; gap: 8px; margin: 32px 0 48px; max-width: 640px; }
.cg-search-again__field {
	flex: 1 0 0; min-width: 0; height: var(--cg-btn-h); padding-inline: 20px;
	border: 1px solid var(--cg-black-10); border-radius: var(--cg-r-pill);
	font: var(--cg-fw-medium) var(--cg-fs-body)/1 var(--cg-font);
	letter-spacing: var(--cg-tracking); color: var(--cg-black); background: var(--cg-white);
}
.cg-search-again__field:focus-visible { border-color: var(--cg-gold); outline: none; }

.cg-empty {
	display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
	padding: 48px; border: 1px solid var(--cg-black-10); border-radius: var(--cg-r-card);
	background: var(--cg-black-02);
}
.cg-empty h2 { margin: 0; font-size: var(--cg-fs-h2); line-height: 1.2; }
.cg-empty p { margin: 0; font-weight: 400; color: var(--cg-text); }
.cg-empty__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }

/* ── Paginacja ────────────────────────────────────────────────────────── */
.cg-pagination { margin-top: 64px; }
.cg-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cg-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding-inline: 16px;
	background: var(--cg-black-05); border: 0; border-radius: var(--cg-r-round);
	font-size: var(--cg-fs-small); font-weight: var(--cg-fw-medium); color: var(--cg-text);
}
.cg-pagination .page-numbers:hover { background: var(--cg-gold-10); color: var(--cg-gold); }
.cg-pagination .page-numbers.current {
	background: var(--cg-gold); color: #fff;
}
.cg-pagination .screen-reader-text { position: absolute; left: -9999px; }

/* ── Responsywność (w Figmie NIE MA widoków mobilnych) ────────────────── */
@media (max-width: 1100px) {
	.cg-lead-article { grid-template-columns: 1fr; }
	.cg-inline-product { grid-template-columns: 120px 1fr; }
	.cg-inline-product__cta { grid-column: 1 / -1; }
	.cg-post__cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 900px) {
	.cg-lead-article { padding: 16px; }
	.cg-lead-article__title { font-size: 24px; letter-spacing: var(--cg-tracking); }
	.cg-post__title { font-size: 32px; letter-spacing: var(--cg-tracking); }
	.cg-post__content { font-size: var(--cg-fs-body); }
	.cg-post__content h2 { font-size: 24px; }
	.cg-post__content h3 { font-size: 20px; }
	.cg-inline-product { grid-template-columns: 1fr; }
	.cg-inline-product__media img { height: 200px; }
	.cg-empty { padding: 24px; }
	.cg-search-again { flex-direction: column; }
	.cg-search-again__field { width: 100%; }
}

/* ══ STRONY PRAWNE (regulamin, polityka, zwroty, wysyłka) — brak w Figmie ══
 * Dokumentu prawnego się nie „projektuje", tylko czyta: kolumna ~800 px,
 * spis treści przyklejony z boku, duży odstęp między akapitami.
 */

.cg-legal__updated { margin: 24px 0 0; font-weight: 400; font-size: var(--cg-fs-small); color: var(--cg-black-30); }

.cg-legal {
	display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: start;
	margin-top: 48px;
}

.cg-legal__toc {
	position: sticky; top: 120px;
	padding: 24px; border: 1px solid var(--cg-black-10);
	border-radius: var(--cg-r-card); background: var(--cg-black-02);
	max-height: calc(100vh - 160px); overflow-y: auto; scrollbar-width: thin;
}
.cg-legal__toc h2 { margin: 0 0 16px; font-size: var(--cg-fs-body); line-height: 1.2; }
.cg-legal__toc ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.cg-legal__toc a {
	font-weight: 400; font-size: var(--cg-fs-small); line-height: 1.4; color: var(--cg-text);
}
.cg-legal__toc a:hover { color: var(--cg-gold); text-decoration: underline; }

.cg-legal__body { max-width: 800px; }
/* QA 2026-09-04 („rozjechało się": Zwrot / Polityka prywatności): treść przyszła
   ze starego sklepu razem z JEGO markupem kolumn (inline width w %, floaty,
   boczek „ostatnie wpisy"). Bez tamtego CSS kolumny zwężały się do szerokości
   słowa. Dokument prawny to linearny tekst — wewnątrz treści wymuszamy
   naturalny przepływ; realne czyszczenie markupu = osobne zadanie na treści. */
.cg-legal__body [style*="width"] { width: auto !important; max-width: 100%; }
.cg-legal__body [style*="float"] { float: none !important; }
.cg-legal__body h2 { scroll-margin-top: 140px; }   /* nagłówek nie chowa się pod paskiem nawigacji */
.cg-legal__body h3 { scroll-margin-top: 140px; }

@media (max-width: 1100px) {
	.cg-legal { grid-template-columns: 1fr; gap: 32px; }
	.cg-legal__toc { position: static; max-height: none; }
}

/* ══ MOBILE: przepełnienie w poziomie ════════════════════════════════════
 *
 * 🔴 Dziecko gridu ma domyślnie `min-width: auto` — NIE MOŻE zwęzić się poniżej
 * swojej treści. Kolumna `1fr` na telefonie tego nie ratuje: wystarczy szeroka
 * tabela w regulaminie albo wykres w kursach i CAŁA strona jedzie w bok
 * (regulamin: 526 px przy ekranie 390, kursy metali: 455 px).
 * Zmierzone Playwrightem 390×844 z `is_mobile` — headless Chrome poniżej 500 px kłamie.
 */
.cg-quotes > *,
.cg-legal > *,
.cg-branch__hero > *,
.cg-lead-article > *,
.cg-inline-product > *,
.cg-post__cta > * { min-width: 0; }

/* Treść z importu (regulamin, polityka, wpisy) bywa nieprzewidywalna: długie adresy,
 * tabele z dawnego sklepu. Tekst ma się łamać, a tabela przewijać W SOBIE —
 * nigdy kosztem całej strony. */
.cg-post__content,
.cg-legal__body { overflow-wrap: anywhere; }

.cg-post__content table,
.cg-legal__body table { display: block; width: 100%; overflow-x: auto; }

.cg-post__content img,
.cg-post__content iframe,
.cg-post__content video,
.cg-legal__body img { max-width: 100%; height: auto; }

/* Wykres i kalkulator kursów: na telefonie mają się mieścić, a nie rozpychać stronę. */
@media (max-width: 900px) {
	.cg-chart,
	.cg-calc { max-width: 100%; }
	.cg-chart__canvas { overflow-x: auto; }
	.cg-calc__tabs { flex-wrap: wrap; }
}

/* ══ MOBILE (768px) — kursy, artykuły, inne strony ══════════════════ */

@media (max-width: 900px) {
	/* Kursy — responsywny layout */
	.cg-kursy__head {
		flex-direction: column;
		gap: 16px;
	}

	.cg-kursy__filters {
		grid-template-columns: 1fr;
	}

	.cg-kursy__filter select {
		font-size: 14px;
		padding: 8px 12px;
	}

	/* Artykuły — grid 1 kolumna */
	.cg-articles {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.cg-article__img {
		height: 150px;
	}

	.cg-article__title {
		font-size: 16px;
	}

	.cg-article__excerpt {
		font-size: 14px;
	}

	/* FAQ na stronach */
	.cg-faq {
		max-width: 100%;
	}

	.cg-faq__item {
		padding: 12px 0;
	}

	.cg-faq__q,
	.cg-faq__a {
		font-size: 14px;
	}

	/* Mapa oddziałów */
	.cg-oddzialy__list {
		grid-template-columns: 1fr;
	}

	.cg-branch-card {
		padding: 12px;
	}

	/* Dane branż */
	.cg-branch-data {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* ══ CENTRUM POMOCY — widok mobilny (Figma 8117:3842 i 8121:5635) ══════════
   Projekt rozbija tę stronę na DWA widoki: najpierw sama lista tematów
   (karta 358 z wyściółką 24, wiersze 310 × 56 ze strzałką, odstęp 8), a pytania
   dopiero po wybraniu tematu, z przyciskiem „← Wróć".

   🔑 Cała treść FAQ ZOSTAJE W HTML-u — chowamy tylko listę tematów albo listę
   pytań. Googlebot pobiera ten sam dokument co dotąd i widzi wszystkie pytania,
   a `application/ld+json` z FAQPage też się nie zmienia. Rozbicie na osobne
   adresy schowałoby część treści i wymagałoby ruszania sitemapy — czego przy
   otwartym bloku SEO tej strony wolimy nie robić. */
@media (max-width: 900px) {
	.cg-help { display: block; }

	/* Karta z listą tematów */
	.cg-help__aside {
		padding: 24px;
		/* Bez ramki: bazowa reguła daje `border: 4px solid` (biel 10%, na białym tle
		   i tak niewidoczna), a te 8 px zwężały wiersze do 302 zamiast 310
		   i przesuwały je na x=44 zamiast 40. */
		border: 0;
		border-radius: var(--cg-r-card, 16px);
		background: #fff;
		position: static;   /* `sticky` w jednokolumnowym układzie nie ma czego trzymać */
	}
	.cg-help__aside h2 { margin-bottom: 24px; }

	/* ⚠️ Blok ≤1100 px (w. 146) zamienia tematy w POZIOME pigułki — to była
	   interpretacja sprzed klatek mobilnych. Figma 8117:3842 chce słupka wierszy
	   na pełną szerokość, więc trzeba jawnie cofnąć `row` i `wrap`; bez tego
	   każdy wiersz zwężał się do swojej treści (zmierzone: 202 px zamiast 302). */
	.cg-topics { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
	.cg-topics > li { width: 100%; }

	/* ⚠️ Reguła powyżej jest słuszna dla CENTRUM POMOCY, ale `.cg-topics` jest
	   współdzielone ze SKUPEM — a tam Figma chce czegoś innego:
	     Centrum pomocy (8117:3842) → słupek wierszy na pełną szerokość
	     Skup          (8076:4753) → POZIOMY przełącznik segmentowy 358×56
	   Jedna klasa, dwa różne projekty mobilne. Blankiet na `.cg-topics` obsługiwał
	   jeden z nich i po cichu psuł drugi: na skupie wybór metalu zajmował 240 px
	   zamiast 56 (zmierzone 20.08).

	   Zawężamy do `.cg-buyback__aside` — (0,2,0) bije (0,1,0), więc Centrum pomocy
	   zostaje nietknięte. Segmenty równej szerokości przez `flex: 1 1 0`, nie
	   procenty: przy trzech metalach 33,33% zostawiłoby piksel luzu. */
	.cg-buyback__aside { padding: 4px; }
	.cg-buyback__aside .cg-topics { flex-direction: row; flex-wrap: nowrap; gap: 0; }
	.cg-buyback__aside .cg-topics > li { flex: 1 1 0; min-width: 0; width: auto; }
	.cg-buyback__aside .cg-topic {
		justify-content: center; text-align: center;
		width: 100%; min-height: 48px; padding: 12px 8px;
	}
	.cg-topic {
		display: flex; align-items: center; justify-content: space-between; gap: 16px;
		width: 100%; min-height: 56px; padding: 16px 24px;
		text-align: left;
	}
	.cg-topic__label { flex: 1 1 auto; min-width: 0; }
	.cg-topic__arrow { flex: 0 0 24px; }
	.cg-topic__arrow svg { width: 24px; height: 24px; }

	/* Widok tematu: lista tematów schodzi, pytania wchodzą */
	.cg-help.is-temat .cg-help__aside { display: none; }
	.cg-help:not(.is-temat) .cg-faq { display: none; }
	.cg-help:not(.is-temat) .cg-help__back { display: none; }

	.cg-help__back {
		display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
		margin-bottom: 24px;
	}
	.cg-help__back[hidden] { display: none; }
	.cg-help__back-title { margin: 0; font-size: 24px; line-height: 1.2; }

	.cg-back {
		display: inline-flex; align-items: center; gap: 8px;
		min-height: 44px; padding: 8px 16px 8px 8px;
		border: 0; border-radius: var(--cg-r-pill, 100px);
		background: transparent; color: inherit; cursor: pointer;
		font: inherit; font-size: 15px;
	}
	.cg-back:hover { background: rgba(0, 0, 0, .05); }
	.cg-back:focus-visible { outline: 2px solid var(--cg-gold, #C18C21); outline-offset: 2px; }
	.cg-back__arrow { font-size: 20px; line-height: 1; }
}

/* Strzałka w wierszu tematu jest wyłącznie mobilna — na desktopie tematy są
   pigułkami filtra obok listy pytań i strzałka „w głąb" kłamałaby o zachowaniu. */
@media (min-width: 901px) {
	.cg-topic__arrow { display: none; }
}

/* ══ KONTAKT — telefon (Figma 8122:7181) ═══════════════════════════════════
   Trzy różnice zmierzone 17.08 wobec klatki mobilnej. */
@media (max-width: 900px) {
	/* 1. Jeden poziom wyściółki, nie dwa. Figma ma na telefonie osobne karty
	   358 × wyściółka 24 → wnętrze 310 (`Frame 2147225625` i `2147225626`).
	   U nas była karta ZEWNĘTRZNA z wyściółką i karty wewnętrzne też z wyściółką,
	   czyli 24 + 24 = 48, a wiersze schodziły do 260 px (zmierzone) zamiast 310.
	   Zewnętrzna karta znika na telefonie — dokładnie jak karta menu w panelu
	   konta. Wewnętrzne `.cg-branch-box` przejmują rolę kart z projektu. */
	.cg-branch-card {
		padding: 0;
		border: 0;
		background: transparent;
	}
	.cg-branch-box { padding: 24px; }

	/* 2. Wiersz danych w JEDNEJ linii, 28 px wysokości — etykieta po lewej,
	   wartość jako pigułka po prawej.
	   ⚠️ Wcześniejsza reguła (blok ≤1100 px) ustawiała `flex-direction: column`,
	   co dawało 56 px na wiersz, czyli dokładnie dwa razy tyle, ile w projekcie.
	   Przy wnętrzu 310 px najdłuższa para („E-mail" + adres) zajmuje 235 px,
	   więc jedna linia mieści się z zapasem — zmierzone, nie założone. */
	.cg-row {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		min-height: 28px;
	}

	/* 3. Sekcja formularza na pełną szerokość okna, z wyściółką 24 → pola 342 px.
	   Figma stawia ją na x=0 przy szerokości 390, a nie w kontenerze na x=16.
	   ⚠️ `calc(50% - 50vw)` daje element DOKŁADNIE szerokości okna. Nie zamieniać
	   na `overflow: visible` — to ten sam mechanizm, który 08-15 rozepchnął stronę
	   do 7130 px. Po zmianie sprawdzone: `scrollWidth == innerWidth`. */
	.cg-form-card {
		margin-inline: calc(50% - 50vw);
		border-radius: 0;
		padding: 24px;
	}
}

/* ══ O NAS — telefon 1:1 (Figma 8101:9895, wskazana przez Huberta 17.08) ══
   Desktop tej strony zostaje bez zmian — wszystko poniżej działa od 900 px w dół,
   poza bazą karuzeli zespołu i taśmy oddziałów, które muszą istnieć zawsze
   (na desktopie strzałki i taśma są po prostu schowane). */

/* Karuzela zespołu: na desktopie .cg-team to siatka — strzałki zbędne. */
.cg-team-box { position: relative; }
.cg-team__arrow {
	display: none;
	position: absolute; top: 120px; transform: translateY(-50%); z-index: 2;
	width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
	background: var(--cg-white); cursor: pointer;
	box-shadow: 0 7px 3px rgba(0, 0, 0, .02), 0 22px 8.5px rgba(0, 0, 0, .02), 0 100px 40px rgba(0, 0, 0, .03);
	place-items: center;
}
.cg-team__arrow img { width: 24px; height: 24px; display: block; }
.cg-team__arrow--prev { left: 4px; }
.cg-team__arrow--next { right: 4px; }
.cg-team__arrow--next img { transform: rotate(180deg); }

/* Taśma oddziałów: widoczna tylko na telefonie (desktop ma pigułki miast). */
.cg-branchtape { display: none; }
.cg-branchtape__more { display: none; }

/* Koperta w przycisku newslettera: element istnieje zawsze, pokazuje go dopiero telefon. */
.cg-newsletter__ico { display: none; }

@media (max-width: 900px) {
	/* ── Intro: obraz NAD tekstem (Figma: H1 → obraz 358×219 → tekst) ── */
	/* ⚠️ align-items: stretch jawnie — desktopowa siatka ma align-items: center,
	   które w kolumnie zwęża figure do treści (zmierzone: 288 px zamiast 358). */
	.cg-about__intro { display: flex; flex-direction: column; align-items: stretch; gap: 24px; margin-top: 24px; }
	.cg-about__intro figure { order: -1; }
	.cg-about__intro img { height: 219px; }
	.cg-about__intro h2 { font-size: 24px; line-height: 1; letter-spacing: var(--cg-tracking); }
	.cg-about__intro p { font-size: 16px; line-height: 1.56; }

	/* ── Zespół: nagłówek wyśrodkowany, karuzela 240 px z sąsiadami ── */
	.cg-section--zespol .cg-section__head { justify-content: center; text-align: center; }
	.cg-section--zespol .cg-section__head h2 { font-size: 28px; line-height: 1.12; letter-spacing: var(--cg-tracking); }
	.cg-section--zespol .cg-section__lead { font-size: 14px; line-height: 1.56; letter-spacing: var(--cg-tracking-body); }

	/* Karta = goła kolumna 240 (zdjęcie 240×240, badge, imię 20, stanowisko 14, bio 14). */
	.cg-team {
		display: flex; gap: 16px;
		overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
		scrollbar-width: none;
		/* Aktywna karta na środku ekranu, sąsiedzi wystają po ~59 px. */
		padding-inline: calc((100% - 240px) / 2);
		scroll-padding-inline: calc((100% - 240px) / 2);
	}
	.cg-team::-webkit-scrollbar { display: none; }
	.cg-team .cg-member {
		flex: 0 0 240px; scroll-snap-align: center;
		opacity: .5; transition: opacity .2s ease;
	}
	.cg-team .cg-member.is-center { opacity: 1; }
	.cg-team__photo { margin-bottom: 16px; }
	.cg-member__role { margin-bottom: 12px; }
	.cg-member__name { font-size: 20px; letter-spacing: var(--cg-tracking); }
	.cg-member__title { margin-top: 4px; font-size: 14px; letter-spacing: var(--cg-tracking); }
	.cg-member__bio { margin-top: 16px; font-size: 14px; line-height: 1.56; letter-spacing: var(--cg-tracking-body); }
	.cg-team__arrow { display: grid; }

	/* ── Gdzie nas znajdziesz: karty zamiast pigułek ── */
	.cg-section--lokalizacje .cg-branches,
	.cg-section--lokalizacje .cg-btn-secondary { display: none; }
	.cg-section--lokalizacje .cg-branchtape__more .cg-btn-secondary { display: inline-flex; }

	.cg-branchtape {
		display: flex; gap: 8px; margin: 0; padding: 0; list-style: none;
		overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	}
	.cg-branchtape::-webkit-scrollbar { display: none; }
	.cg-branchtape__item { flex: 0 0 267px; scroll-snap-align: start; }
	.cg-branchtape__card {
		display: flex; flex-direction: column; gap: 16px;
		height: 331px; padding: 16px;
		border: 1px solid var(--cg-black-10); border-radius: var(--cg-r-card);
		background: var(--cg-white); color: inherit; text-decoration: none;
	}
	.cg-branchtape__thumb {
		display: grid; place-items: center; height: 128px; flex: 0 0 auto;
		border-radius: 12px; background: var(--cg-green-gradient);
	}
	.cg-branchtape__logo svg { width: 120px; height: 39px; display: block; }
	.cg-branchtape__city { padding: 0 8px; font-size: 16px; line-height: 1.56; letter-spacing: var(--cg-tracking); color: var(--cg-black); }
	.cg-branchtape__addr {
		display: flex; align-items: center; gap: 16px; margin-top: auto; padding: 0 8px 8px;
		font-weight: 400; font-size: 14px; line-height: 1.3; letter-spacing: var(--cg-tracking-body); color: var(--cg-text);
	}
	.cg-branchtape__addr img { flex: 0 0 auto; }
	.cg-branchtape__more { display: flex; justify-content: flex-end; margin-top: 24px; padding-right: 8px; }

	/* ── Centrum pomocy: kolumna, CTA na całą szerokość (Figma: h2 28, lead 16, h 56) ── */
	.cg-helpbar h2 { font-size: 28px; line-height: 1.12; letter-spacing: var(--cg-tracking); }
	.cg-helpbar p { margin-top: 24px; font-size: 16px; }
	.cg-helpbar__icon { width: 80px; height: 80px; font-size: 40px; }
	.cg-helpbar__cta { width: 100%; justify-content: space-between; }

	/* ── Karta kontaktowa: obraz 358×240 NAD kartą ── */
	.cg-contact__top { display: flex; flex-direction: column; gap: 8px; }
	.cg-contact__top figure { order: -1; margin: 0; }
	.cg-contact__top figure img { width: 100%; height: 240px; object-fit: cover; border-radius: var(--cg-r-card); display: block; }
	/* ⚠️ Ramka MUSI mieć tę samą wysokość co zdjęcie. Wyżej `@media (max-width: 1280px)`
	   daje RAMCE 320 px, a reguła powyżej daje ZDJĘCIU 240 (rozmiar z Figmy: 358×240).
	   Różnica 80 px wychodziła jako szary prostokąt pod zdjęciem — na telefonie wygląda
	   jak obrazek, który się nie doładował. Dwie reguły mobilne w tym samym pliku mówiły
	   co innego o tym samym elemencie; zdjęcie ma rację, bo jego rozmiar jest z projektu. */
	.cg-contact__photo { height: 240px; }

	/* ── Newsletter 1:1: treść wyśrodkowana, pigułka jednowierszowa, moneta na dole ── */
	.cg-newsletter { padding-block: 64px 300px; }
	.cg-newsletter::before {
		/* Desktop ma tu zdjęcie z monetą po prawej; telefon — monetę na dole (Figma). */
		display: block;
		background: url('../img/portfel-moneta.png') center bottom -60px / 265px no-repeat;
	}
	.cg-newsletter::after { display: none; }
	.cg-newsletter__box { text-align: center; display: flex; flex-direction: column; align-items: center; }
	.cg-newsletter h2 { font-size: 32px; line-height: 1.12; letter-spacing: var(--cg-tracking); }
	.cg-newsletter__lead { font-size: 14px; line-height: 1.56; letter-spacing: var(--cg-tracking-body); }
	.cg-newsletter__field {
		flex-direction: row; align-items: center; align-self: stretch;
		padding: 6px 6px 6px 20px; border-radius: var(--cg-r-round);
		border: 1px solid var(--cg-white-10);
	}
	.cg-newsletter__field input { padding-inline: 0; font-size: 14px; }
	.cg-newsletter__field button {
		width: 48px; height: 48px; padding: 0; flex: 0 0 auto;
		border-radius: 50%; display: grid; place-items: center;
	}
	.cg-newsletter__field button span { display: none; }
	.cg-newsletter__field button .cg-newsletter__ico { display: block; width: 24px; height: 24px; }
	.cg-newsletter .cg-consents { text-align: left; }
	.cg-newsletter .cg-consent { font-size: 12px; line-height: 1.56; letter-spacing: var(--cg-tracking-body); }
	.cg-newsletter .cg-consent input {
		appearance: none; -webkit-appearance: none;
		width: 32px; height: 32px; border-radius: 8px;
		background: var(--cg-white-05); border: 1px solid var(--cg-white);
	}
	.cg-newsletter .cg-consent input:checked {
		border-color: var(--cg-gold-grad-from, #BF8A1F);
		background: var(--cg-white-05) url('../img/ico-check.svg') center / 20px no-repeat;
	}
}

/* ══ STRONA ODDZIAŁU — telefon 1:1 (Figma 8122:6370) ══════════════════════
   Nadpisuje wcześniejszy blok ≤900 (tamten był interpretacją sprzed klatki). */
@media (max-width: 900px) {
	.cg-branch__photo,
	.cg-branch__placeholder { height: 239px; }

	/* Karta info: pad 32/20/20, nagłówek wyśrodkowany (tytuł 24 + ocena pod nim). */
	.cg-branch__card { padding: 32px 20px 20px; gap: 24px; }
	.cg-branch__card-head { align-items: center; text-align: center; gap: 16px; }
	.cg-branch__card-head h2 { font-size: 24px; line-height: 1.12; letter-spacing: var(--cg-tracking); }

	/* Nagłówki sekcji 28, tytuł strony zostaje 32. */
	.cg-branch-page .cg-h1 { font-size: 32px; line-height: 1.12; letter-spacing: var(--cg-tracking); }
	.cg-branch-page h2.cg-h1 { font-size: 28px; letter-spacing: var(--cg-tracking); }

	/* Wyróżniki: ikona 56 (glif 32) po lewej, teksty po prawej — nie słupek. */
	.cg-feature {
		display: grid; grid-template-columns: 56px 1fr;
		column-gap: 24px; row-gap: 12px; padding: 20px; align-items: start;
	}
	.cg-feature__icon { grid-row: 1 / span 2; width: 56px; height: 56px; }
	.cg-feature__icon svg { width: 32px; height: 32px; }
	.cg-feature h3 { padding-top: 8px; font-size: 20px; line-height: 1.12; letter-spacing: var(--cg-tracking); }
	.cg-feature p { font-size: 14px; line-height: 1.56; letter-spacing: var(--cg-tracking-body); }

	/* Opinie: karuzela kart 267 zamiast słupka; nagłówek wyśrodkowany. */
	.cg-branch__reviews-head { align-items: center; text-align: center; }
	.cg-reviews {
		display: flex; gap: 8px;
		overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	}
	.cg-reviews::-webkit-scrollbar { display: none; }
	.cg-review { flex: 0 0 267px; scroll-snap-align: start; padding: 24px; }

	/* Mapa i kafle pozostałych oddziałów — wymiary z klatki. */
	.cg-map { height: 716px; }
	.cg-branch-slider > li { flex-basis: 267px; }
	.cg-branch-tile__thumb { height: 128px; }
	.cg-branch-tile__title { font-size: 16px; line-height: 1.56; letter-spacing: var(--cg-tracking); }

	.cg-branch__seo h2 { font-size: 24px; letter-spacing: var(--cg-tracking); }
}

/* ══ LISTING ARTYKUŁÓW „na golda" (Figma 8189:5966; decyzja Huberta 17.08) ══
   Zakres: indeks bloga. Kafle w taśmie strony głównej (main.css) zostają nietknięte —
   stąd wszystko skopowane do .cg-bloglist__* i .cg-articles. */

.cg-bloglist__bar {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	flex-wrap: wrap; margin: 48px 0 24px;
}
.cg-bloglist__left { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cg-bloglist__count { margin: 0; font: var(--cg-fw-medium) 18px/1 var(--cg-font); letter-spacing: var(--cg-tracking); color: var(--cg-black); }
.cg-bloglist__count strong { font-weight: var(--cg-fw-medium); color: var(--cg-gold); }

.cg-bloglist__pill { display: inline-block; padding: 4px; border-radius: 48px; background: var(--cg-black-05); cursor: pointer; }
.cg-bloglist__pill-in {
	display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px 0 20px;
	border-radius: 40px; background: var(--cg-white);
	box-shadow: 0 7px 3px rgba(0, 0, 0, .02), 0 22px 8.5px rgba(0, 0, 0, .02), 0 100px 40px rgba(0, 0, 0, .03);
	font: var(--cg-fw-medium) 14px/1 var(--cg-font); letter-spacing: var(--cg-tracking); color: var(--cg-text);
	white-space: nowrap;
}
.cg-bloglist__pill-in select {
	border: 0; background: transparent; cursor: pointer;
	font: var(--cg-fw-medium) 14px/1 var(--cg-font); letter-spacing: var(--cg-tracking); color: var(--cg-gold);
}
.cg-bloglist__pill-in select:focus { outline: none; }

.cg-bloglist__search {
	display: flex; align-items: center; gap: 8px; flex: 0 1 480px; min-width: 260px;
	padding: 4px 4px 4px 16px;
	border: 1px solid var(--cg-black-10); border-radius: 56px; background: var(--cg-black-02);
}
.cg-bloglist__search input {
	flex: 1 1 auto; min-width: 0; height: 40px; border: 0; background: transparent;
	font: 400 14px/1 var(--cg-font); letter-spacing: var(--cg-tracking-body); color: var(--cg-black);
}
.cg-bloglist__search input:focus { outline: none; }
.cg-bloglist__search button {
	flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%;
	background-image: var(--cg-gold-gradient); cursor: pointer;
	display: grid; place-items: center;
	box-shadow: 0 7px 3px rgba(0, 0, 0, .02), 0 22px 8.5px rgba(0, 0, 0, .02), 0 100px 40px rgba(0, 0, 0, .03);
}
.cg-bloglist__search button img { width: 20px; height: 20px; display: block; }

/* Kafel (Figma: karta z ramką, obraz ~1.95:1 r12, badge, tytuł 24/1.56, data w prawo). */
.cg-page .cg-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cg-page .cg-articles .cg-article {
	display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 16px;
	border: 1px solid var(--cg-black-10); border-radius: var(--cg-r-card); background: var(--cg-white);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cg-page .cg-articles .cg-article:hover {
	border-color: var(--cg-gold-grad-from);
	box-shadow: 0 7px 6px rgba(0, 0, 0, .02), 0 22px 17px rgba(0, 0, 0, .02), 0 100px 80px rgba(0, 0, 0, .03);
}
/* Baza w main.css daje kontenerowi aspect 16/10 + szare tło — pod obrazkiem 1.95:1
   zostawał szary pasek. Proporcję trzyma sam obrazek. */
.cg-page .cg-articles .cg-article__media { display: block; margin-bottom: 8px; aspect-ratio: auto; background: transparent; }
.cg-page .cg-articles .cg-article__media img,
.cg-page .cg-articles .cg-article__blank {
	width: 100%; aspect-ratio: 1.95 / 1; height: auto; object-fit: cover;
	border-radius: 12px; display: block;
}
.cg-page .cg-articles .cg-article__cat { align-self: flex-start; }
.cg-page .cg-articles .cg-article__title { font-size: 24px; line-height: 1.56; letter-spacing: var(--cg-tracking); }
.cg-page .cg-articles .cg-article__meta {
	margin-top: auto; justify-content: flex-end; text-align: right;
	font: var(--cg-fw-medium) 14px/1.12 var(--cg-font); letter-spacing: var(--cg-tracking-body); color: var(--cg-black-30);
}

/* Stopka listy: Pokaż na stronie + zakres + kwadratowe przyciski stron 48 px. */
.cg-bloglist__foot {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	flex-wrap: wrap; margin-top: 24px;
}
.cg-bloglist__perpage { display: flex; align-items: center; gap: 16px; }
.cg-bloglist__range { font: var(--cg-fw-medium) 14px/1 var(--cg-font); letter-spacing: var(--cg-tracking); color: var(--cg-text); }
.cg-bloglist__pages { display: flex; gap: 8px; }
.cg-bloglist__pages .page-numbers {
	display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 8px;
	border: 1px solid var(--cg-black-10); border-radius: var(--cg-r-card);
	background: var(--cg-black-02);
	font: var(--cg-fw-medium) 16px/1.12 var(--cg-font); letter-spacing: var(--cg-tracking);
	color: var(--cg-text); text-decoration: none;
}
.cg-bloglist__pages .page-numbers.current { background: var(--cg-gold); border-color: var(--cg-gold); color: var(--cg-white); }
.cg-bloglist__pages .page-numbers.dots { border: 0; background: transparent; }
.cg-bloglist__pages .page-numbers:hover:not(.current):not(.dots) { border-color: var(--cg-gold); color: var(--cg-gold); }

@media (max-width: 900px) {
	.cg-bloglist__bar { margin-top: 24px; }
	.cg-bloglist__search { flex-basis: 100%; }
	.cg-page .cg-articles { grid-template-columns: 1fr; gap: 8px; }
	.cg-page .cg-articles .cg-article__title { font-size: 20px; letter-spacing: var(--cg-tracking); }
	.cg-bloglist__foot { flex-direction: column; align-items: stretch; }
	.cg-bloglist__pages { justify-content: center; flex-wrap: wrap; }
}

/* Strzałki spinnera psują pole marży (Figma go nie ma). */
.cg-calc__row input::-webkit-outer-spin-button,
.cg-calc__row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cg-calc__row input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ══ MOB-94 · H1 STRON TREŚCIOWYCH: 32 PX, NIE 24 ════════════════════════════════
   Figma („Main Title"): Skup metali szlachetnych, Kontakt, Poznaj Cashify Gold,
   Oddział w Bydgoszczy, Sprawdź kursy — wszystkie 32 px. Na live wszędzie 24 px,
   bo globalna reguła mobilna w main.css (`@media (max-width: 900px) { h1 }`)
   zbija każdy H1 do 24 i nikt jej nie nadpisywał na tych szablonach.
   Zawężone do `.cg-page__title` — H1 karty produktu ZOSTAJE na 24 px, bo tam
   Figma (7978:5751) rzeczywiście ma 24.
   ⚠️ Na końcu pliku: `pages.css` ładuje się po `main.css`, ale reguła bazowa też
   jest w media query, więc liczy się jeszcze kolejność wewnątrz tego pliku. */
@media (max-width: 900px) {
	.cg-page__title {
		font-size: 32px;
		line-height: 1.12;
		letter-spacing: var(--cg-tracking);
	}
}

/* ══ MOB-98 · O NAS: ZDJĘCIE Z PROMIENIEM I NIŻSZY NEWSLETTER ════════════════════
   Figma 8101:9895: zdjęcie 358 × 219 z promieniem 16 (na live promień 0 — jedyny
   obrazek w serwisie bez zaokrąglenia) oraz newsletter 390 × 752 (na live 832,
   bo wyściółka dolna narosła do 300 px razem z ozdobnym tłem). */
@media (max-width: 900px) {
	.cg-about__intro figure img {
		border-radius: var(--cg-r-card, 16px);
	}
	.cg-newsletter { padding-bottom: 48px; }
}

/* ══ MOB-22 + MOB-96 · TABELA SKUPU NA TELEFONIE ═════════════════════════════════
   Ramka 8076:4753/7006.

   MOB-22: nagłówek „Produkt | Cena skupu" był na 390 px chowany całkowicie
   (`display: none`, z komentarzem „etykiety wchodzą do wierszy") — ale Figma daje
   go jako widoczny pas 326 × 24 nad wierszami. Wracamy do widoczności, bez drugiej
   kolumny, która przy dwóch poziomach wiersza nie ma odpowiednika.

   MOB-96: karta tabeli ma promień 12, wyściółkę 16 i odstęp 24 (na live promień 16
   i wyściółka 12). ⚠️ Na końcu pliku, bo reguła bazowa `.cg-buyback__table` też
   siedzi w media query — wyżej przegrałaby kolejnością. */
@media (max-width: 900px) {
	.cg-buyback__table {
		padding: 16px;
		gap: 24px;
		border-radius: 12px;
	}
	.cg-buyback__head {
		display: grid;
		min-height: 24px;
		font-size: 12px;
		color: var(--cg-black-70, rgba(0, 0, 0, .7));
	}
}

/* ══ MOB-23 · DWA PRZYCISKI SKUPU JEDEN POD DRUGIM ═══════════════════════════════
   Figma 8076:6946: dwa przyciski 342 × 56 w słupku. Na live stoją obok siebie
   (179 × 56 i 178 × 56), czyli każdy ma połowę szerokości i łamie etykietę. */
@media (max-width: 900px) {
	.cg-howto__btns {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.cg-howto__btns > a { width: 100%; height: 56px; }
}

/* ══ MOB-99 + MOB-105 + MOB-106 · WYKRES I WPIS BLOGA NA TELEFONIE ═══════════════

   MOB-99 (8071:3999): karta wykresu ma wyściółkę z projektu, nie 12 px — na live
   zeszła do 12, żeby „się mieściła", i przez to wykres kleił się do ramki.
   Przycisk zrzutu ma być kołem 40 × 40 NAŁOŻONYM na obszar wykresu, nie osobnym
   wierszem narzędzi pod spodem.

   MOB-105: obrazy śródtekstowe 358 × 200 z promieniem 16 — na live promień szedł
   z `--cg-r-img` (mniejszy), a proporcja była dowolna, z pliku.

   MOB-106: cytat jako KARTA 358 × 234 z wyściółką 24 i odstępem 24 — na live to
   był blok z lewym paskiem 3 px na złotym tle, czyli inny wzorzec niż w projekcie. */
@media (max-width: 900px) {
	.cg-chart { padding: 16px; }
	.cg-chart__download {
		position: absolute;
		top: 16px;
		right: 16px;
		z-index: 2;
		width: 40px;
		height: 40px;
		padding: 0;
		border-radius: 50%;
		background: var(--cg-white, #fff);
		box-shadow: var(--cg-shadow-card, 0 2px 8px rgba(0, 0, 0, .06));
		overflow: hidden;
		/* Etykieta „Pobierz zrzut" nie mieści się w kole — zostaje dla czytnika. */
		white-space: nowrap;
		text-indent: -999em;
	}
	.cg-chart__download svg {
		position: absolute;
		inset: 0;
		margin: auto;
		text-indent: 0;
	}
	.cg-chart__canvas { position: relative; }

	.cg-post__content img {
		border-radius: 16px;
		aspect-ratio: 358 / 200;
		object-fit: cover;
		width: 100%;
	}
	.cg-post__content blockquote {
		padding: 24px;
		border-left: 0;
		border-radius: 16px;
		background: var(--cg-black-02, rgba(0, 0, 0, .02));
		font-size: 16px;
		line-height: 1.5;
	}
}

/* ══ MOB-104 · SPIS TREŚCI WPISU (ramka 8189:7899) ═══════════════════════════════
   Karta 358 × 382: promień 16, wyściółka 32, odstęp 24. Buduje ją `cg_toc()`
   w `inc/blog.php` z nagłówków H2 wpisu — pojawia się od trzech sekcji w górę.
   Numeracja jest tu informacją, nie ozdobą: pozycje spisu odpowiadają kolejności
   sekcji w artykule, więc `<ol>` z licznikiem, nie kropki. */
.cg-toc {
	margin: 32px 0;
	padding: 32px;
	border-radius: 16px;
	background: var(--cg-black-02, rgba(0, 0, 0, .02));
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.cg-toc__title {
	margin: 0;
	font: var(--cg-fw-medium, 500) 20px/1.2 var(--cg-font);
	letter-spacing: var(--cg-tracking);
	color: var(--cg-black, #000);
}
.cg-toc__list {
	margin: 0;
	padding-left: 0;
	list-style: none;
	counter-reset: cg-toc;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cg-toc__list li {
	counter-increment: cg-toc;
	display: flex;
	gap: 12px;
	margin: 0;
}
.cg-toc__list li::before {
	content: counter(cg-toc) ".";
	flex: 0 0 auto;
	color: var(--cg-gold, #C18C21);
	font-weight: var(--cg-fw-medium, 500);
	font-variant-numeric: tabular-nums;
}
.cg-toc__list a {
	color: var(--cg-black-70, rgba(0, 0, 0, .7));
	text-decoration: none;
	line-height: 1.4;
}
.cg-toc__list a:hover { color: var(--cg-gold, #C18C21); }
.cg-toc__list a:focus-visible { outline: 2px solid var(--cg-gold, #C18C21); outline-offset: 2px; }

/* Kliknięcie w pozycję spisu ma zatrzymać się pod przyklejonym nagłówkiem,
   nie schować nagłówka sekcji za nim. */
.cg-post__content h2 { scroll-margin-top: 96px; }

@media (max-width: 900px) {
	.cg-toc { padding: 24px; gap: 16px; }
	.cg-toc__title { font-size: 18px; }
}

/* MOB-06 (resztka): na telefonie karta kontaktu nie trzyma desktopowego
   `min-height: 551` — kolumna 1fr z tą wysokością zostawiała szarą pustkę pod
   wizytówką, zanim doszło zdjęcie (767 KB + lazy = to jest ten „placeholder"
   z audytu; sam dropdown lokalizacji istnieje od 17.08). */
@media (max-width: 900px) {
	.cg-contact__top { min-height: 0; }
	.cg-contact__photo img { width: 100%; height: auto; border-radius: 16px; }
}

/* ══ MOB-103 · HERO WPISU NA TELEFONIE (ramka 8189:7899) ═════════════════════════
   Figma: dekoracyjny pas 390 × 427 — nagłówek wpisu siedzi na ciemnym tle
   z wzorkiem, pod nim okładka 357 × 201 z promieniem 16. Na live tytuł stał na
   białym, a okładka niżej — bez żadnej oprawy.
   Tło budujemy z tokenów marki (zielony gradient jak newsletter i pas kroków) —
   ⚠️ wzorek z makiety wymaga EKSPORTU assetu z Figmy; do dosypania jak banery hero
   (ten sam bloker materiałowy, zapisany w rejestrze). Desktop bez zmian. */
@media (max-width: 900px) {
	.cg-post__head {
		margin-inline: calc(50% - 50vw);
		padding: 24px var(--cg-gutter, 16px) 32px;
		background: var(--cg-green-gradient, #12472B);
	}
	.cg-post__head .cg-post__title { color: var(--cg-white, #fff); }
	.cg-post__head .cg-article__meta { color: rgba(255, 255, 255, .7); }
	.cg-post__head .cg-article__meta time { color: inherit; }

	/* Okruszki nad wpisem wchodzą na ten sam ciemny pas — pigułki z MOB-65 są na
	   złotym 10%, co na zieleni czyta się dobrze; spinamy pas z okruszkami. */
	.cg-post__hero {
		margin: -16px 0 24px;
	}
	.cg-post__hero img {
		width: 100%;
		aspect-ratio: 357 / 201;
		object-fit: cover;
		border-radius: 16px;
	}
}