/* Cashify Gold — Moje konto: powłoka + wszystkie widoki (Figma 7219:5935).
 *
 * Ładowany TYLKO na stronie konta (`is_account_page()` w inc/moje-konto.php), razem
 * z `auth.css` (logowanie/rejestracja — ten sam adres, dwa różne ekrany zależnie od
 * `is_user_logged_in()` w `woocommerce/myaccount/my-account.php`).
 *
 * Pola formularza „Moje dane" REUŻYWAJĄ klas z auth.css (`.cg-field`, `.cg-input`,
 * `.cg-check`, `.cg-btn`, `.cg-input-eye`) pod tym samym przedrostkiem `.cg-auth`
 * (patrz `woocommerce/myaccount/form-edit-account.php`) — nie duplikujemy tu stylu inputów.
 *
 * Siatka sidebar+treść (376/1192/gap 32) to te same proporcje co filtry kategorii
 * (`.cg-archive__body` w sklep.css) — ta sama siatka 12 kolumn w całym sklepie.
 *
 * @package cashify-gold
 */

/* ── Powłoka strony ────────────────────────────────────────────────────── */

/* index.php (generyczny fallback strony) drukuje własny <h1><?php the_title(); ?></h1>
   NAD naszą treścią — na Moje konto rysujemy breadcrumb + h1 sami (kolejność z Figmy:
   breadcrumb NAD tytułem), więc gasimy H1 z WordPressa. Dokładnie ten sam wzorzec co
   `body.woocommerce-cart .cg-entry > h1` / `body.woocommerce-checkout .cg-entry > h1`
   w assets/css/sklep.css. */
body.woocommerce-account .cg-entry > h1 {
	display: none;
}

.cg-account__title {
	margin: 0 0 24px;
	font-size: var(--cg-fs-h1, 48px);
	line-height: var(--cg-lh-h1, 1.12);
	letter-spacing: -0.03em;
}

.cg-account__grid {
	display: grid;
	grid-template-columns: 376fr 1192fr;
	gap: 32px;
	align-items: start;
}

/* ── Sidebar (Figma: „Frame 2147225668") ──────────────────────────────── */

/* Sticky sidebar MUSI zejść pod CAŁY przyklejony nagłówek (`.cg-header` sticky top:0,
   z-index 40). Przy `top:24px` sidebar przykleja się WEWNĄTRZ pasa nagłówka i nagłówek
   go zakrywa („menu nachodzi na treść"). ⚠️ Nagłówek to topbar + nav = ~206px, NIE samo
   `--cg-nav-h` (100px) — używamy `--cg-header-h` (mierzone przez JS, patrz main.css
   `scroll-padding-top`), inaczej sidebar dalej chowa się pod topbarem. */
.cg-account__nav {
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: sticky;
	top: calc(var(--cg-header-h, 200px) + 24px);
}

.cg-account__nav-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 24px;
	list-style: none;
	background: var(--cg-black-02);
	border: 4px solid var(--cg-white-10);
	border-radius: var(--cg-r-card);
}

.cg-account__nav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 24px;
	border-radius: 8px;
	background: var(--cg-black-02);
	color: var(--cg-black);
	font: var(--cg-fw-medium) 16px/1.3 var(--cg-font);
	letter-spacing: var(--cg-tracking);
	text-decoration: none;
}

.cg-account__nav-icon {
	display: inline-flex;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	color: var(--cg-black-30);
}
.cg-account__nav-icon svg { display: block; width: 100%; height: 100%; }

/* Pozycja aktywna — Figma: tło gold-10%, ramka LEWA 4px gold (dokłada się do 24px
   paddingu, nie zastępuje go — w projekcie treść aktywnej pozycji jest o 4px bardziej
   wcięta niż reszta, sprawdzone w dev mode). WooCommerce dokłada klasę `is-active`
   na <li> przez `wc_get_account_menu_item_classes()`. */
.cg-account__nav-item.is-active .cg-account__nav-link {
	background: var(--cg-gold-10);
	border-left: 4px solid var(--cg-gold);
	color: var(--cg-black);
}
.cg-account__nav-item.is-active .cg-account__nav-icon {
	color: var(--cg-gold);
}

/* Wyloguj się — zawsze czerwony, nie złoty (to nie kolejna zakładka). */
.cg-account__nav-link--logout,
.cg-account__nav-link--logout .cg-account__nav-icon {
	color: #F44336;
}
.cg-account__nav-link--logout {
	background: rgba(244, 67, 54, .1);
}

/* ── Karty widoków (wspólne dla wszystkich endpointów) ─────────────────── */

.cg-account__view {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cg-account__card {
	padding: 24px;
	background: var(--cg-white);
	border: 1px solid var(--cg-black-05, rgba(0, 0, 0, .05));
	border-radius: var(--cg-r-card);
	box-shadow: var(--cg-shadow-card);
}

.cg-account__card-title {
	margin: 0 0 16px;
	font: var(--cg-fw-medium) 20px/1.3 var(--cg-font);
	letter-spacing: var(--cg-tracking);
	color: var(--cg-black);
}

/* ── Pusty stan (podsumowanie/portfel/wykresy/rabaty) — UCZCIWY, bez liczb z powietrza. */

.cg-account__empty h2 {
	margin: 0 0 12px;
	font: var(--cg-fw-medium) 20px/1.3 var(--cg-font);
	letter-spacing: var(--cg-tracking);
	color: var(--cg-black);
}
.cg-account__empty p {
	margin: 0 0 12px;
	max-width: 64ch;
	color: var(--cg-text);
	line-height: 1.6;
}
.cg-account__empty p:last-child { margin-bottom: 0; }
.cg-account__empty-hint { margin-top: 8px; }
.cg-account__empty-hint a.cg-btn-secondary { text-decoration: none; }

/* „Dostępne rabaty" — „ramka jak goldenmark": akcent złoty zamiast neutralnej karty.
   (Klasa siedzi na TYM SAMYM elemencie co `.cg-account__card` w rabaty.php — bez :has(),
   dla przewidywalnego wsparcia przeglądarek.) */
.cg-account__empty--rabaty {
	background: var(--cg-gold-10);
	border-color: var(--cg-gold);
}

/* ── „Twoje inwestycje" — zakładki (markup i JS jak karta produktu: `.cg-tabs`
   z assets/css/sklep.css, obsługa w assets/js/sklep.js — ładują się globalnie, więc nie
   duplikujemy tu logiki przełączania). `.cg-tabs` sam w sobie ma `max-width:920px` i
   `margin-top:48px` dopasowane do szerokości galerii karty produktu — na Moje konto
   zakładki mają zająć całą kolumnę treści (1192px) bez górnego marginesu. */
.cg-account__tabs.cg-tabs {
	max-width: none;
	margin-top: 0;
}
.cg-account__tabs .cg-tabs__panel {
	padding-top: 24px;
}

/* ── „Moje dane" — dwa pola w rzędzie (imię/nazwisko) i fieldset zmiany hasła. ──── */

.cg-account__row2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.cg-account__fieldset {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 8px 0 0;
	padding: 24px 0 0;
	border: 0;
	border-top: 1px solid var(--cg-black-10);
}
.cg-account__fieldset legend {
	padding: 0;
	margin: 0 0 4px;
}
.cg-account__field-hint {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--cg-black-30);
}

/* ── „Twoje dane" jako podsumowanie + trzy popupy (17.08 wieczór) ──────────
   Bez JS-a ten blok jest zwykłym, statycznym tekstem — nic tu nie zależy od
   klasy do chowania/pokazywania (patrz `<noscript>` w form-edit-account.php). */
.cg-account__summary {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cg-account__summary-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	border-top: 1px solid var(--cg-black-05, rgba(0, 0, 0, .05));
}
.cg-account__summary-row:first-child {
	padding-top: 0;
	border-top: 0;
}
.cg-account__summary-label {
	margin: 0 0 4px;
	font-size: 12px;
	color: var(--cg-black-30);
}
.cg-account__summary-value {
	margin: 0;
	font: var(--cg-fw-medium) 16px/1.3 var(--cg-font);
	letter-spacing: var(--cg-tracking);
	color: var(--cg-black);
}

/* ── Miernik siły hasła (Figma 7775:3713) — 9 segmentów, kolor zależny od oceny JS-a.
   Domyślnie `hidden` (bez JS-a nie ma kto go aktualizować — pusty pasek myliłby bardziej
   niż jego brak). ⚠️ `display: flex` niżej PRZEBIŁOBY atrybut `hidden` (ta sama pułapka
   co w portfelu 17.08: reguła autora zawsze wygrywa ze stylem UA, nawet przy tej samej
   specyficzności) — `[hidden]` musi więc wystąpić w SELEKTORZE, nie tylko w HTML-u. */
.cg-account__pw-meter[hidden] {
	display: none;
}
.cg-account__pw-meter {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
	background: var(--cg-white);
	border-radius: var(--cg-r-card, 16px);
}
.cg-account__pw-meter-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.cg-account__pw-meter-label {
	padding: 8px 10px;
	border-radius: 6px;
	font: var(--cg-fw-medium) 14px/1 var(--cg-font);
	letter-spacing: var(--cg-tracking);
}
.cg-account__pw-meter-bar {
	display: flex;
	gap: 2px;
}
.cg-account__pw-meter-bar span {
	flex: 1 0 0;
	height: 8px;
	border-radius: 100px;
	background: var(--cg-black-10, rgba(0, 0, 0, .1));
}
.cg-account__pw-meter-bar span.is-on {
	background: var(--cg-pw-color, #F44336);
}
.cg-account__pw-meter-label {
	background: var(--cg-pw-bg, rgba(244, 67, 54, .1));
	color: var(--cg-pw-color, #F44336);
}
.cg-account__pw-meter-hint {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--cg-black-70, rgba(0, 0, 0, .7));
}

/* ── „Moje dane" — adres wysyłki: prawdziwy formularz WooCommerce
   (`WC_Shortcode_My_Account::edit_address()`), NIEnadpisany szablonem — restylujemy
   z zewnątrz klasy rdzenia. Dokładnie ten sam wzorzec co `.cg-checkout .form-row`
   w assets/css/sklep.css (checkout też nie zastępuje `woocommerce_form_field()`). */

.cg-account__card--address .woocommerce-address-fields {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 8px;
}
.cg-account__card--address .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.cg-account__card--address .form-row {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}
.cg-account__card--address .form-row-wide {
	grid-column: 1 / -1;
}
.cg-account__card--address label {
	font: var(--cg-fw-medium) 12px/1 var(--cg-font);
	letter-spacing: var(--cg-tracking);
	color: var(--cg-black);
}
.cg-account__card--address .required {
	color: #F44336;
	text-decoration: none;
}
/* 🔴 WooCommerce ładuje WŁASNY frontend-CSS (motyw go nie dequeue'uje), a jego
   `.woocommerce form .form-row input.input-text` (specyficzność 0,4,2) bije nasz
   `.cg-account__card--address input[type="text"]` (0,2,1) → pola adresu dostawały
   prostokątne obramowanie WC zamiast pigułki, przez co „Adres do wysyłki" wyglądał
   inaczej niż pola „Moje dane" (własny markup, poza `.form-row`, więc WC ich nie łapie).
   Fix: targetujemy klasę `.input-text` (WC nadaje ją KAŻDEMU polu tekstowemu niezależnie
   od `type`) i wymuszamy geometrię `!important` — zawężone do karty adresu, więc nic poza
   nią nie rusza. To ten sam problem, co `.cg-checkout .form-row` w sklep.css. */
.cg-account__card--address .input-text,
.cg-account__card--address input[type="text"],
.cg-account__card--address input[type="tel"],
.cg-account__card--address input[type="email"],
.cg-account__card--address input[type="number"],
.cg-account__card--address input[type="password"],
.cg-account__card--address select,
.cg-account__card--address .select2-selection {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 56px;
	padding: 0 20px !important;
	border: 1px solid var(--cg-black-20) !important;
	border-radius: 56px !important;
	background: var(--cg-white) !important;
	box-shadow: none !important;
	font: var(--cg-fw-medium) 14px/1 var(--cg-font);
	letter-spacing: var(--cg-tracking);
	color: var(--cg-black);
}
.cg-account__card--address .input-text:focus,
.cg-account__card--address .input-text:focus-visible,
.cg-account__card--address input:focus-visible,
.cg-account__card--address select:focus-visible {
	outline: none;
	border-color: var(--cg-gold) !important;
}
.cg-account__card--address .woocommerce-Button,
.cg-account__card--address button[name="save_address"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--cg-btn-h);
	padding-inline: 24px;
	margin-top: 8px;
	border: 0;
	border-radius: var(--cg-r-pill);
	background-image: var(--cg-gold-gradient);
	font: var(--cg-fw-medium) 16px/1 var(--cg-font);
	letter-spacing: var(--cg-tracking);
	color: var(--cg-text);
	cursor: pointer;
	text-decoration: none;
}

/* ── Historia zamówień ─────────────────────────────────────────────────── */

.cg-orders {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cg-orders__row {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 16px 24px;
	background: var(--cg-black-02);
	border-radius: 12px;
}
.cg-orders__label {
	display: none; /* widoczne tylko w układzie mobilnym (karty zamiast wierszy) */
}
.cg-orders__cell a { color: var(--cg-gold); text-decoration: none; font-weight: var(--cg-fw-medium); }
.cg-orders__cell a:hover { text-decoration: underline; }
.cg-orders__cell--actions { display: flex; gap: 8px; justify-content: flex-end; }
.cg-orders__cell--actions a { text-decoration: none; white-space: nowrap; }

.cg-orders__pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 8px;
}
.cg-orders__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding-inline: 8px;
	border-radius: 8px;
	color: var(--cg-text);
	text-decoration: none;
	font: var(--cg-fw-medium) 14px/1 var(--cg-font);
}
.cg-orders__pagination .page-numbers.current { background: var(--cg-gold-10); color: var(--cg-gold); }

/* Plakietka statusu — kolor po statusie zamówienia WooCommerce. */
.cg-badge {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 4px 10px;
	border-radius: 6px;
	font: var(--cg-fw-medium) 14px/1 var(--cg-font);
	letter-spacing: var(--cg-tracking);
	background: var(--cg-black-05);
	color: var(--cg-text);
}
.cg-badge--status-completed,
.cg-badge--status-processing { background: var(--cg-success-10, rgba(76, 175, 80, .1)); color: var(--cg-success, #4CAF50); }
.cg-badge--status-pending,
.cg-badge--status-on-hold { background: var(--cg-gold-10); color: var(--cg-gold); }
.cg-badge--status-cancelled,
.cg-badge--status-refunded,
.cg-badge--status-failed { background: rgba(244, 67, 54, .1); color: #F44336; }

/* ── Szczegóły zamówienia ─────────────────────────────────────────────── */

.cg-order__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 4px;
}
.cg-order__head .cg-account__card-title { margin: 0; }
.cg-order__date {
	margin: 0 0 24px;
	color: var(--cg-black-30);
	font-size: 14px;
}

.cg-order__items {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0 24px;
}
.cg-order__items th,
.cg-order__items td {
	padding: 12px 8px;
	text-align: left;
	border-bottom: 1px solid var(--cg-black-10);
	font-size: 14px;
}
.cg-order__items thead th {
	color: var(--cg-black-30);
	font-weight: var(--cg-fw-medium);
	font-size: 13px;
}
.cg-order__items tfoot th { font-weight: var(--cg-fw-medium); }
.cg-order__items tfoot tr:last-child th,
.cg-order__items tfoot tr:last-child td { border-bottom: 0; color: var(--cg-gold); font-size: 16px; }

.cg-order__addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.cg-order__address {
	padding: 16px;
	background: var(--cg-black-02);
	border-radius: var(--cg-r-box);
}
.cg-order__address h3 {
	margin: 0 0 8px;
	font: var(--cg-fw-medium) 14px/1 var(--cg-font);
	color: var(--cg-black-30);
}
.cg-order__address address { margin: 0; font-style: normal; line-height: 1.6; }

/* ── Responsywność (jak reszta sklepu: w Figmie brak widoku mobilnego — układ własny). ── */
@media (max-width: 1024px) {
	/* 🐛 Złapane pomiarem 17.08 (`/moje-konto/edit-account/` 402 px, `/orders/` 448 px
	   w oknie 390 px): `1fr` samo w sobie ma domyślne minimum `auto` (= szerokość
	   min-content zawartości), więc JEDYNA kolumna gridu nie zwężała się poniżej
	   najszerszego dziecka (tabela zamówień, karta „Moje dane") — ten sam wzorzec
	   co panel oddziałów i taśma wpisów wcześniej w tym projekcie. `minmax(0, 1fr)`
	   zdejmuje to domyślne minimum. */
	.cg-account__grid { grid-template-columns: minmax(0, 1fr); }
	/* `minmax(0, 1fr)` na torze nie wystarcza samo w sobie — DZIECKO gridu (ten div,
	   nie tylko tor) ma WŁASNE domyślne `min-width: auto`, więc bez tego nadal
	   odmawia zwężenia poniżej swojej treści, mimo skurczonego toru pod spodem. */
	.cg-account__nav { position: static; min-width: 0; }
	.cg-account__content { min-width: 0; }
}

@media (max-width: 900px) {
	.cg-account__row2,
	.cg-order__addresses { grid-template-columns: 1fr; }
	.cg-account__card--address .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; }

	.cg-orders__row {
		/* Ten sam wzorzec co `.cg-account__grid` wyżej: samo `1fr` nie schodzi
		   poniżej min-content najszerszej treści (np. długa polska nazwa statusu
		   w `.cg-badge`) — stąd 9 px przewijania po fixie gridu nadrzędnego. */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		row-gap: 8px;
	}
	.cg-orders__cell {
		min-width: 0;
	}
	.cg-orders__label {
		display: block;
		font-size: 11px;
		color: var(--cg-black-30);
		margin-bottom: 2px;
	}
	.cg-orders__cell--actions {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}
}
/* ══ MOBILE (768px) ════════════════════ */

@media (max-width: 900px) {
  .myaccount-page .content-area {
    grid-template-columns: 1fr;
  }

  .myaccount-sidebar {
    margin-bottom: 24px;
    border-bottom: 1px solid #E5E5E5;
  }

  .myaccount-content {
    padding-top: 24px;
  }

  .myaccount-table {
    font-size: 12px;
  }

  .woocommerce-table--orders {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .woocommerce-table--orders tr {
    display: block;
    border-bottom: 1px solid #E5E5E5;
    padding: 12px 0;
  }

  .woocommerce-table--orders td {
    display: block;
    text-align: left;
    padding: 4px 0;
  }

  .woocommerce-table--orders td::before {
    font-weight: bold;
  }
}

/* ══ PANEL KONTA — telefon (Figma 8076:7241) ═══════════════════════════════
   Projekt stawia pozycje menu na PEŁNEJ szerokości 358 px, bez karty wokół nich.
   Na desktopie karta ma sens (jest sidebarem obok treści), na telefonie staje się
   drugą ramką wokół i tak już obramowanych pozycji.

   ⚠️ Zmierzone przed poprawką: pozycja 302 px na x=44 zamiast 358 na x=16.
   Te 28 px to wyściółka 24 + ramka 4 karty. */
@media (max-width: 900px) {
	.cg-account__nav-card {
		padding: 0;
		border: 0;
		background: transparent;
	}
}

/* ══ PORTFEL INWESTYCYJNY (Figma 8101:7694 mobile / „moje konto 1920px") ═══
   Rejestr pozycji: inc/portfel.php · szablon woocommerce/myaccount/inwestycje.php.
   Chip liczbowy (h 28, pad 4/10, r 6) i etykieta 11 px to wzory zdjęte z klatki
   mobilnej — desktop używa tych samych, Figma desktopowa niczego nie nadpisuje. */

.cg-inwest__summary {
	position: relative; overflow: hidden;
	display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
	padding: 16px; border: 1px solid var(--cg-black-05);
	border-radius: var(--cg-r-card); background: var(--cg-white);
	box-shadow: 0 100px 80px rgba(0, 0, 0, .03), 0 22px 17px rgba(0, 0, 0, .02), 0 7px 6px rgba(0, 0, 0, .02);
}
.cg-inwest__stat {
	display: flex; flex-direction: column; gap: 16px;
	padding: 16px; border-radius: 12px; background: var(--cg-black-02);
}
.cg-inwest__stat-top { display: flex; flex-direction: column; gap: 8px; }
.cg-inwest__stat-top p { margin: 0; }
.cg-inwest__label { margin: 0; font-size: 16px; line-height: 1; letter-spacing: var(--cg-tracking); color: var(--cg-text); }
.cg-inwest__label--sm { font-size: 14px; letter-spacing: var(--cg-tracking); }
.cg-inwest__big { font-size: 32px; line-height: 1; letter-spacing: var(--cg-tracking); color: var(--cg-text); }
.cg-inwest__big--gold { color: var(--cg-gold); }
.cg-inwest__stat-sub { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

.cg-inwest__chip {
	display: inline-flex; align-items: center; height: 28px; padding: 4px 10px;
	border-radius: 6px; background: var(--cg-black-05);
	font-size: 16px; letter-spacing: var(--cg-tracking); color: var(--cg-text); white-space: nowrap;
}
.cg-inwest__chip--gold { background: var(--cg-gold-10); color: var(--cg-gold); }
.cg-inwest__chip--up   { background: rgba(76, 175, 80, .1); color: #4CAF50; }
.cg-inwest__chip--down { background: rgba(244, 67, 54, .1); color: #F44336; }
.cg-inwest__chip .woocommerce-Price-amount { color: inherit; }

/* Moneta w prawym dolnym rogu — czysta dekoracja, ucinana przez overflow karty. */
.cg-inwest__coin {
	position: absolute; right: -40px; bottom: -120px; width: 265px; height: 265px;
	background: url('../img/portfel-moneta.png') center / contain no-repeat;
	pointer-events: none;
}

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

/* ── Nagłówek zakładki portfela ── */
.cg-inwest__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.cg-inwest__h2 { margin: 0; font-size: 24px; line-height: 1; letter-spacing: var(--cg-tracking); color: var(--cg-black); }
.cg-inwest__addbtn {
	display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px;
	border: 0; border-radius: 6px; background: var(--cg-black-05); cursor: pointer;
	font: var(--cg-fw-medium) 16px/1 var(--cg-font); letter-spacing: var(--cg-tracking); color: var(--cg-text);
}
.cg-inwest__addbtn:hover { background: var(--cg-gold-10); color: var(--cg-gold); }

/* ── Pozycja portfela ── */
.cg-poz__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cg-poz { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 12px; background: var(--cg-black-02); }
.cg-poz__top { display: flex; align-items: center; gap: 16px; }
.cg-poz__thumb { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--cg-black-10); overflow: hidden; }
.cg-poz__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-poz__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cg-poz__name { margin: 0; font-size: 14px; line-height: 1.2; letter-spacing: var(--cg-tracking); color: var(--cg-black); }
.cg-poz__cost { margin: 0; font-size: 14px; line-height: 1; letter-spacing: var(--cg-tracking); color: var(--cg-gold); }
.cg-poz__cost .woocommerce-Price-amount { color: inherit; }

.cg-poz__kebab {
	flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 6px;
	background: transparent; cursor: pointer;
	font: var(--cg-fw-medium) 20px/1 var(--cg-font); color: var(--cg-text);
	display: none;   /* telefon pokazuje kebab, desktop ma akcje zawsze widoczne */
}
.cg-poz__kebab:hover { background: var(--cg-black-05); }

.cg-poz__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.cg-poz__cell { display: flex; flex-direction: column; gap: 4px; }
.cg-poz__cell--right { align-items: flex-end; }
.cg-poz__cell-label { font-size: 11px; line-height: 1; letter-spacing: var(--cg-tracking); color: var(--cg-text); }

.cg-poz__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-poz__act {
	display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px;
	border: 0; border-radius: 6px; background: var(--cg-black-05); cursor: pointer;
	font: var(--cg-fw-medium) 14px/1 var(--cg-font); letter-spacing: var(--cg-tracking);
	color: var(--cg-text); text-decoration: none;
}
.cg-poz__act--danger:hover { background: rgba(244, 67, 54, .1); color: #F44336; }
.cg-poz__act--gold { background-image: var(--cg-gold-gradient); color: var(--cg-text); }

/* ── Formularze pozycji ── */
.cg-poz__form {
	display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
	padding: 16px; border: 1px solid var(--cg-black-10); border-radius: 12px; background: var(--cg-white);
}
.cg-poz__form--add { margin-bottom: 24px; }
.cg-poz__field { display: flex; flex-direction: column; gap: 8px; }
.cg-poz__field--full { grid-column: 1 / -1; }
.cg-poz__field span { font-size: 14px; letter-spacing: var(--cg-tracking); color: var(--cg-text); }
.cg-poz__field input,
.cg-poz__field select {
	height: 48px; padding: 0 16px; border: 1px solid var(--cg-black-10); border-radius: 8px;
	background: var(--cg-white);
	font: 400 16px/1 var(--cg-font); color: var(--cg-black);
}
.cg-poz__submit { grid-column: 1 / -1; justify-self: start; }

/* ── Telefon (Figma 8101:7694): kebab zamiast rzędu akcji ── */
@media (max-width: 900px) {
	.cg-inwest__summary { grid-template-columns: 1fr; padding-bottom: 140px; /* miejsce na monetę jak w klatce (karta 463) */ }
	.cg-inwest__coin { right: auto; left: 50%; transform: translateX(-50%); bottom: -128px; }
	.cg-poz__kebab { display: grid; place-items: center; }
	.cg-poz__actions { display: none; }
	.cg-poz.is-menu-open .cg-poz__actions { display: flex; }
	.cg-poz__form { grid-template-columns: 1fr; }
	.cg-inwest__addbtn { font-size: 14px; }
}

.cg-poz__src { color: var(--cg-black-30); font-size: 12px; }

/* ── Ikony w przyciskach portfela ── */
.cg-inwest__addbtn img, .cg-poz__act img { width: 20px; height: 20px; display: block; }

/* Przycisk zapisu formularzy portfela — własny styl (motyw nie ma globalnego .cg-btn
   poza kontekstem .cg-auth, więc bez tego zostaje goły przycisk przeglądarki). */
.cg-poz__submit {
	display: inline-flex; align-items: center; justify-content: center;
	height: 48px; padding: 0 24px; border: 0; border-radius: var(--cg-r-round, 48px);
	background-image: var(--cg-gold-gradient); cursor: pointer;
	font: var(--cg-fw-medium) 16px/1 var(--cg-font); letter-spacing: var(--cg-tracking); color: var(--cg-text);
}

/* Nagłówki kolumn tabeli portfela — istnieją tylko na desktopie. */
.cg-poz__cols { display: none; }

/* ── DESKTOP portfela 1:1 (Figma 7219:5935): tabela zamiast stosu kart ── */
@media (min-width: 901px) {
	/* Sekcja portfela = szara karta z nagłówkiem i tabelą w środku. */
	.cg-portfel {
		display: flex; flex-direction: column; gap: 24px;
		padding: 24px; border-radius: 12px; background: var(--cg-black-02);
	}
	.cg-portfel .cg-inwest__head { margin-bottom: 0; }
	.cg-portfel .cg-poz__form--add { margin-bottom: 0; }

	/* ⚠️ Figma liczy kolumny dla 1920 px (produkt 426, akcje ~340) — na węższych
	   oknach kolumna treści konta ma ledwie ~680 px i sztywne szerokości wypychały
	   akcje poza wiersz (zmierzone: akcje na x=1092 przy wierszu do 1114).
	   Dlatego proporcje zamiast pikseli, a akcje schodzą do drugiej linii <1500 px. */
	.cg-poz__cols {
		display: grid; grid-template-columns: 2.6fr 1fr 1.2fr; gap: 16px;
		padding: 0 24px;
		font-size: 16px; line-height: 1.5; letter-spacing: var(--cg-tracking); color: var(--cg-text);
	}
	.cg-poz__cols span:nth-child(4) { display: none; }

	.cg-poz {
		display: grid; grid-template-columns: 2.6fr 1fr 1.2fr; gap: 16px;
		align-items: center; padding: 24px; background: var(--cg-white);
	}
	.cg-poz__top { grid-column: 1; }
	.cg-poz__bottom { display: contents; }        /* komórki wchodzą wprost do siatki wiersza */
	.cg-poz__cell--right { align-items: flex-start; }
	.cg-poz__cell-label { display: none; }        /* desktop ma nagłówki kolumn nad tabelą */
	.cg-poz__name { font-size: 16px; letter-spacing: var(--cg-tracking); }
	/* Figma: na desktopie oba chipy (liczba i wartość) są złote. */
	.cg-poz__cell .cg-inwest__chip { background: var(--cg-gold-10); color: var(--cg-gold); }
	.cg-poz__actions { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: nowrap; }
	.cg-poz__act { font-size: 16px; letter-spacing: var(--cg-tracking); padding: 0 12px 0 8px; }
	.cg-poz__form { grid-column: 1 / -1; }

	/* Podsumowanie: statystyki przytulone do treści, kwoty 40 px, moneta po prawej. */
	.cg-inwest__summary { grid-template-columns: none; display: flex; gap: 24px; padding: 24px; }
	.cg-inwest__stat { flex: 0 1 auto; min-width: 300px; padding: 16px 24px; }
	.cg-inwest__big { font-size: 40px; letter-spacing: var(--cg-tracking); }
	.cg-inwest__stat-sub { flex-direction: row; align-items: center; }
	.cg-inwest__coin { right: 90px; top: 28px; bottom: auto; }
}

/* Pełna szerokość projektu: akcje wracają do jednej linii z wierszem (Figma 1920). */
@media (min-width: 1500px) {
	.cg-poz__cols,
	.cg-poz { grid-template-columns: 2.6fr 1fr 1.2fr minmax(300px, auto); }
	.cg-poz__cols span:nth-child(4) { display: block; }
	.cg-poz__actions { grid-column: 4; grid-row: 1; }
	.cg-poz__form { grid-column: 1 / -1; }
}

/* 🐛 Rdzeń WooCommerce daje .woocommerce-MyAccount-content { width: 68%; float: right }
   — nasza kolumna treści miała przez to 811 px zamiast 1192 (68% × 1192, zmierzone
   na 1920). Siatka .cg-account__grid już rozdziela kolumny, procenty Woo tylko psują. */
.cg-account__grid .woocommerce-MyAccount-content,
.cg-account__grid .woocommerce-MyAccount-navigation {
	width: auto; float: none;
}

/* 🐛 `display: grid` na .cg-poz__form BIŁO atrybut hidden (hidden = display:none
   ze stylów przeglądarki, przegrywa z każdą regułą autora) — formularze dodawania
   i edycji stały otworem na stałe. Widoczne na zrzucie Huberta 17.08. */
.cg-poz__form[hidden] { display: none; }

/* Komunikaty Woo na koncie: rdzeń rysuje ikonę ::before nachodzącą na tekst. */
.cg-account__grid .woocommerce-message,
.cg-account__grid .woocommerce-info,
.cg-account__grid .woocommerce-error {
	display: flex; align-items: center; gap: 12px;
	padding: 16px 24px; margin-bottom: 24px;
	border: 0; border-radius: 8px;
	background: rgba(76, 175, 80, .1); color: #2E7D32;
	font: var(--cg-fw-medium) 16px/1.3 var(--cg-font); letter-spacing: var(--cg-tracking);
}
.cg-account__grid .woocommerce-error { background: rgba(244, 67, 54, .1); color: #F44336; }
.cg-account__grid .woocommerce-message::before,
.cg-account__grid .woocommerce-info::before,
.cg-account__grid .woocommerce-error::before {
	position: static; margin: 0; line-height: 1;
}

/* ══ „Dane do zamówień" (endpoint `edit-address`) — Figma 8101:8480 ═══════
   Ekran dopisany 20.08. Wcześniej WooCommerce drukował tu swój domyślny widok,
   więc żadna z poniższych klas nie istniała. */

.cg-account__card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}
/* Tytuł ma już `margin-bottom` z `.cg-account__card-title`; w nagłówku odstęp
   daje `gap` rodzica, inaczej przycisk „Edytuj" wisi za nisko względem tekstu. */
.cg-account__card-head .cg-account__card-title { margin: 0; }

/* Dymek objaśniający. Zieleń jest tu nośnikiem znaczenia („to jest wyjaśnienie,
   nie ostrzeżenie"), dlatego ikona i tekst dostają jawny kolor — nie dziedziczą
   koloru karty, który jest czarny. */
.cg-account__note {
	display: flex;
	gap: 12px;
	margin-bottom: 24px;
	padding: 16px;
	border-radius: 12px;
	background: rgba(31, 122, 74, .08);
	color: #1F5F45;
	font-size: 14px;
	line-height: 1.5;
}
.cg-account__note-icon { flex: 0 0 auto; margin-top: 1px; opacity: .8; }
.cg-account__note p { margin: 0 0 12px; }
.cg-account__note p:last-child { margin-bottom: 0; }

/* Wiersze danych: etykieta po lewej, wartość w złotej pigułce po prawej.
   `<dl>` z `<div>` na parę — to jedyny sposób, żeby dt/dd trzymały się razem
   w jednym wierszu siatki i nie rozjechały przy zawijaniu długiego e-maila. */
.cg-account__data { margin: 0; }
.cg-account__data-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
}
.cg-account__data-row + .cg-account__data-row {
	border-top: 1px solid var(--cg-black-05, rgba(0, 0, 0, .05));
}
.cg-account__data-label {
	margin: 0;
	font-size: 15px;
	color: var(--cg-black);
	opacity: .8;
}
.cg-account__data-value {
	margin: 0;
	padding: 6px 14px;
	border-radius: var(--cg-r-round, 40px);
	background: var(--cg-gold-10, rgba(193, 140, 33, .1));
	color: var(--cg-gold, #C18C21);
	font-size: 15px;
	text-align: right;
	/* Długi e-mail musi się łamać, a nie rozpychać karty w bok — na 390 px
	   `jakub.wilk@gmail.com` z pigułką i etykietą nie mieści się w jednym wierszu. */
	min-width: 0;
	overflow-wrap: anywhere;
}
/* Brak danych to nie jest wartość — pigułka gaśnie, żeby nie wyglądała jak wypełnione pole. */
.cg-account__data-value.is-empty {
	background: var(--cg-black-05, rgba(0, 0, 0, .05));
	color: var(--cg-black);
	opacity: .5;
}

@media (max-width: 720px) {
	/* Na telefonie etykieta i pigułka nie zmieszczą się obok siebie przy dłuższych
	   wartościach — wiersz przechodzi na dwa poziomy, pigułka zostaje przy lewej,
	   bo wyśrodkowana do prawej w kolumnie wyglądałaby jak osierocona. */
	.cg-account__data-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	.cg-account__data-value { text-align: left; }

	/* ⚠️ Nagłówek karty NIE przechodzi na kolumnę. Figma 8101:8480 trzyma „Edytuj"
	   po prawej, w jednej linii z dwuwierszowym tytułem — i mieści się, bo przycisk
	   jest wąską pigułką bez strzałki. Zwinięcie go pod tytuł było moim odruchem
	   („na telefonie wszystko w kolumnę"), nie odczytem projektu. */
	.cg-account__card-head .cg-account__card-title { font-size: 18px; }
}

/* Przycisk „Edytuj" w nagłówku karty: w Figmie SZARA pigułka bez strzałki, nie złoty
   `cg-btn-ghost` ze strzałką w kółku (ten wzorzec jest w „Moje dane", przy wierszach).
   Osobna klasa, żeby nie ruszyć tamtych. */
.cg-account__card-edit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding-inline: 18px;
	border: 0;
	border-radius: var(--cg-r-round, 40px);
	background: var(--cg-black-05, rgba(0, 0, 0, .05));
	color: var(--cg-black);
	font-size: 14px;
	text-decoration: none;
	transition: background .15s ease;
}
.cg-account__card-edit:hover { background: rgba(0, 0, 0, .09); color: var(--cg-black); }
.cg-account__card-edit:focus-visible { outline: 2px solid var(--cg-gold, #C18C21); outline-offset: 2px; }

/* ══ Pole nieedytowalne w popupie — Figma 7775:3651 ═════════════════════
   „Obecny adres e-mail" JEST `readonly` i `disabled` (sprawdzone), ale wyglądał
   dokładnie jak pole do wpisania: białe tło, czarny tekst. Użytkownik klika w nie,
   nic się nie dzieje i nie wie dlaczego. Figma pokazuje je wyszarzone — kolor niesie
   tu informację „tego nie zmienisz TUTAJ", a nie ozdobę.

   Celujemy w atrybuty, nie w klasę: pole jest wyszarzone dlatego, że jest wyłączone,
   więc gdyby kiedyś ktoś zdjął `disabled`, styl zniknie sam i nie zostanie kłamliwy. */
.cg-modal .cg-input[disabled],
.cg-modal .cg-input[readonly] {
	background: var(--cg-black-05, rgba(0, 0, 0, .05));
	border-color: transparent;
	color: var(--cg-black);
	opacity: .65;
	cursor: not-allowed;
}


/* ══ MOB-90: DOMYŚLNY FORMULARZ ADRESU WOO (gałąź mobile-v2) ═════════════════════
   Audyt QA mobile 21.08: „pierwsze pole tekstowe ma 139x23, etykiety 0x0". Źródło:
   edycja adresu wysyłki idzie przez DOMYŚLNY szablon Woo (`form-edit-address.php`,
   motyw go nie nadpisuje — wołany wprost w `inc/moje-konto.php`), więc pola nie
   dostawały żadnej naszej klasy: goły input przeglądarki ma właśnie ~139 px.
   Etykiety w tym szablonie SĄ widoczne — 0x0 dotyczyło innych pól — ale wymiary
   kontrolek były przeglądarkowe, nie nasze.

   Te reguły ubierają szablon Woo w te same wartości co `.cg-auth .cg-input`
   (auth.css): kontrolka 56 px, pigułka 56, font 14 Medium. Celujemy w klasy
   szablonu Woo (`.woocommerce-address-fields`), więc nasze własne formularze
   (`.cg-field`) zostają nietknięte. */
.cg-account .woocommerce-address-fields .form-row {
	margin: 0 0 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cg-account .woocommerce-address-fields label {
	font: var(--cg-fw-medium, 500) 14px/1.2 var(--cg-font);
	color: var(--cg-black-70, rgba(0, 0, 0, .7));
}
.cg-account .woocommerce-address-fields .woocommerce-input-wrapper { width: 100%; display: block; }
.cg-account .woocommerce-address-fields input.input-text,
.cg-account .woocommerce-address-fields select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 56px;
	padding-inline: 20px;
	border: 1px solid var(--cg-black-20, rgba(0, 0, 0, .2));
	border-radius: 56px;
	background: var(--cg-white, #fff);
	font: var(--cg-fw-medium, 500) 14px/1 var(--cg-font);
	letter-spacing: var(--cg-tracking);
	color: var(--cg-black, #000);
}
.cg-account .woocommerce-address-fields input.input-text:focus,
.cg-account .woocommerce-address-fields select:focus {
	outline: 2px solid var(--cg-gold, #C18C21);
	outline-offset: 1px;
	border-color: var(--cg-gold, #C18C21);
}
.cg-account .woocommerce-address-fields button[type="submit"] {
	width: 100%;
	height: 56px;
	border: 0;
	border-radius: 100px;
	background: var(--cg-gold-gradient, #C18C21);
	color: rgba(0, 0, 0, .7); /* token audytu: tekst na złotym gradiencie = czarny 70% */
	font: var(--cg-fw-medium, 500) 16px/1 var(--cg-font);
	cursor: pointer;
}

/* ══ MOB-89 · POWRÓT NA PODSTRONACH KONTA (Figma 8101:8164) ══════════════════════
   Blok 358 × 76 nad treścią, odstęp 8 między ikoną a etykietą. Widoczny na każdej
   szerokości — na desktopie nawigacja konta stoi z boku, ale link „Wróć" jest
   w projekcie także tam, a na telefonie jest JEDYNYM wyjściem z podstrony. */
.cg-account__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin-bottom: 16px;
	color: var(--cg-black-70, rgba(0, 0, 0, .7));
	font: var(--cg-fw-medium, 500) 14px/1.2 var(--cg-font);
	text-decoration: none;
}
.cg-account__back:hover { color: var(--cg-gold, #C18C21); }
.cg-account__back:focus-visible { outline: 2px solid var(--cg-gold, #C18C21); outline-offset: 2px; }
.cg-account__back-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--cg-black-05, rgba(0, 0, 0, .05));
}
.cg-account__back-icon svg { width: 16px; height: 16px; }

/* MOB-92: odstępy nad treścią — okruszek 24 px pod nagłówkiem, tytuł kolejne 24 niżej
   (na live okruszek startował bezpośrednio pod paskiem). */
@media (max-width: 900px) {
	.cg-account .cg-breadcrumb { margin-top: 24px; }
	.cg-account__title { margin-top: 24px; }
}

/* ══ MOB-91 · KAFLE NAWIGACJI KONTA ══════════════════════════════════════════════
   Figma 8076:7241: sześć pozycji 358 × 56 z odstępem 8 — liczba i wysokość zgadzają
   się z live, audyt zostawia „do potwierdzenia promień i kolory stanów". Promień 8
   na live pokrywa się z resztą wierszy listy w projekcie (Kategorie w szufladzie
   też 8), więc go nie zmieniam. Wyrównuję tylko odstęp, gdyby gdzieś został inny. */
@media (max-width: 900px) {
	.cg-account__nav-card { display: flex; flex-direction: column; gap: 8px; }
	.cg-account__nav-item .cg-account__nav-link { min-height: 56px; }
}

/* ══ MOB-44 · HUB STARTOWY /moje-konto/ (ramka 8076:7241) ═════════════════════════
   Sidebar (`myaccount/navigation.php`) jest wspólny dla każdej podstrony konta —
   na hubie to jest CAŁA treść, więc kolumna `.cg-account__content` (pusta,
   `dashboard.php` nic już nie renderuje) chowa się, a sidebar bierze pełną
   szerokość. Bez tej reguły hub wyglądałby jak podstrona z zapomnianą treścią. */
body.cg-account--hub .cg-account__grid { grid-template-columns: 1fr; }
body.cg-account--hub .cg-account__content { display: none; }
body.cg-account--hub .cg-account__nav { position: static; }