/* Potwierdzenie zapisu (S4) i Moje konto (S5).

   Osobny arkusz, bo obie strony żyją poza ścieżką zapisu i nie ma powodu, żeby ich
   style jechały z każdym wejściem na konfigurator. Tokeny z tokens.css. */

/* ==========================================================================
   S4 — potwierdzenie zapisu
   ========================================================================== */

.s4 {
	max-width: 760px;
	margin: 0 auto;
	padding: var(--fa-space-12) var(--fa-space-6) var(--fa-space-24);
}

.s4__hero {
	display: flex;
	align-items: center;
	gap: var(--fa-space-8);
	margin-bottom: var(--fa-space-12);
}

/* Gepard jest tu jedynym momentem w ścieżce, w którym maskotka nie przeszkadza:
   decyzja zapadła, pieniądze poszły, można się ucieszyć. */
.s4__mascot {
	flex: 0 0 160px;
	width: 160px;
	height: auto;
}

.s4__eyebrow {
	margin-bottom: var(--fa-space-2);
	font-size: var(--fa-text-13);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fa-orange-500);
}

.s4__title {
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-32);
	font-weight: 800;
	line-height: var(--fa-leading-heading);
	text-transform: uppercase;
}

.s4__lead {
	margin-top: var(--fa-space-3);
	font-size: var(--fa-text-16);
	line-height: var(--fa-leading-body);
	color: var(--fa-text-secondary);
}

.s4__section-title {
	margin-bottom: var(--fa-space-4);
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-18);
	font-weight: 700;
	text-transform: uppercase;
}

.s4__next,
.s4__panel {
	margin-bottom: var(--fa-space-8);
	padding: var(--fa-space-6);
	background: var(--fa-ink-800);
	border: 1px solid var(--fa-ink-600);
}

.s4__steps {
	display: flex;
	flex-direction: column;
	gap: var(--fa-space-4);
	margin: 0;
	padding-left: var(--fa-space-6);
	font-size: var(--fa-text-15);
	line-height: var(--fa-leading-body);
	color: var(--fa-text-secondary);
}

.s4__steps strong {
	display: block;
	color: var(--fa-text-primary);
}

.s4__child + .s4__child {
	margin-top: var(--fa-space-4);
	padding-top: var(--fa-space-4);
	border-top: 1px solid var(--fa-ink-600);
}

.s4__child-name {
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-18);
	font-weight: 700;
}

.s4__child-meta,
.s4__child-note {
	margin-top: var(--fa-space-2);
	font-size: var(--fa-text-13);
	color: var(--fa-text-secondary);
}

.s4__facts,
.konto__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--fa-space-4);
	margin: 0;
}

.s4__facts dt,
.konto__facts dt {
	font-size: var(--fa-text-12);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fa-text-muted);
}

.s4__facts dd,
.konto__facts dd {
	margin: var(--fa-space-2) 0 0;
	font-size: var(--fa-text-16);
	font-weight: 600;
}

.s4__note {
	margin-top: var(--fa-space-6);
	padding-top: var(--fa-space-4);
	font-size: var(--fa-text-13);
	line-height: var(--fa-leading-body);
	color: var(--fa-text-secondary);
	border-top: 1px solid var(--fa-ink-600);
}

.s4__actions {
	display: flex;
	flex-direction: column;
	gap: var(--fa-space-3);
	align-items: flex-start;
	margin-bottom: var(--fa-space-12);
}

.s4__actions-note {
	font-size: var(--fa-text-13);
	color: var(--fa-text-muted);
}

.s4__help {
	padding-top: var(--fa-space-6);
	font-size: var(--fa-text-13);
	color: var(--fa-text-secondary);
	border-top: 1px solid var(--fa-ink-600);
}

@media (max-width: 640px) {
	.s4__hero {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--fa-space-4);
	}

	.s4__mascot {
		flex-basis: auto;
		width: 108px;
	}
}

/* ==========================================================================
   Moje konto
   ========================================================================== */

.woocommerce-account .page__body {
	max-width: 1100px;
}

/* Grid z nawigacją obowiązuje wyłącznie zalogowanych. Niezalogowany dostaje w tym
   samym kontenerze formularz logowania i rejestracji — wciśnięte w kolumnę 260 px
   łamały się po jednym słowie. Rozróżnia je obecność nawigacji. */
.woocommerce-account .woocommerce:has(.konto__nav) {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--fa-space-12);
	align-items: start;
}

/* Logowanie i rejestracja: dwie równe kolumny, które schodzą pod siebie na wąskim ekranie.
   Grid idzie na `.u-columns`, bo to ono trzyma obie kolumny. Na `.woocommerce` nie może:
   ten ma jeszcze pusty kontener komunikatów, który zajmował cały pierwszy slot i spychał
   oba formularze do drugiego — a tam dzielił je jeszcze raz float z arkusza WooCommerce. */
.woocommerce-account .woocommerce:not(:has(.konto__nav)) {
	max-width: 820px;
}

/* ------------------------------------------------------------------ logowanie

   Rejestracji w tym sklepie nie ma: konto powstaje przy zapisie na zajęcia. Zostaje więc
   jeden formularz, a 820 px z układu dwukolumnowego rozciągało go na ekran szeroki jak
   tabela zamówień — pięć pól przez pół monitora czyta się jak zepsuty layout.

   Rozróżniamy po `:has()`, nie po klasie na body: `logged-in` nie wystarcza, bo ten sam
   kontener bez nawigacji dostaje też reset hasła. */
.woocommerce-account .woocommerce:not(:has(.konto__nav)):has(.woocommerce-form-login) {
	max-width: 420px;
	margin-inline: auto;
}

/* Nagłówek strony („Moje konto”) mówi to samo co ten, więc na ekranie logowania zostaje
   jeden — ten większy, wpisany w rytm pozostałych podstron. */
.woocommerce-account .woocommerce:has(.woocommerce-form-login) > h2 {
	display: none;
}

/* Zdanie nad formularzem: po co komuś to konto. Bez niego ekran jest samą bramką. */
.konto__lead {
	max-width: 420px;
	margin: 0 auto var(--fa-space-6);
	font-size: var(--fa-text-15);
	line-height: var(--fa-leading-body);
	color: var(--fa-text-secondary);
}

/* Sygnatura marki na górnej krawędzi karty: ukośne przetarte pasy z systemu, w wersji
   na tyle cichej, żeby nie konkurowały z jedynym pomarańczem na ekranie (przyciskiem). */
.woocommerce-account .woocommerce-form-login {
	position: relative;
	padding: var(--fa-space-8) var(--fa-space-6) var(--fa-space-6);
}

.woocommerce-account .woocommerce-form-login::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 6px;
	background: repeating-linear-gradient(
		115deg,
		var(--fa-orange-500) 0 10px,
		transparent 10px 15px,
		var(--fa-orange-500) 15px 18px,
		transparent 18px 26px
	);
	opacity: 0.55;
}

/* Przycisk niesie całą szerokość karty, bo jest tu jedną rzeczą do zrobienia. */
.woocommerce-account .woocommerce-form-login .woocommerce-form-login__submit {
	margin-top: var(--fa-space-6);
	min-height: 52px;
}

/* „Nie pamiętasz hasła?" i „nie masz konta" to wyjścia awaryjne — stoją pod kartą,
   ciszej niż to, po co ktoś tu przyszedł. */
.woocommerce-account .woocommerce:has(.woocommerce-form-login) .woocommerce-LostPassword {
	margin: var(--fa-space-4) 0 0;
	text-align: center;
}

.konto__brak-konta {
	max-width: 420px;
	margin: var(--fa-space-8) auto 0;
	padding-top: var(--fa-space-6);
	border-top: 1px solid var(--fa-ink-700);
	font-size: var(--fa-text-13);
	line-height: var(--fa-leading-body);
	color: var(--fa-text-muted);
	text-align: center;
}

.woocommerce-account .u-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--fa-space-8);
	align-items: start;
}

/* Clearfix WooCommerce siedzi na pseudoelementach, a te w gridzie są pełnoprawnymi
   komórkami — zajmowały pierwszą i ostatnią, przez co logowanie lądowało w prawej
   kolumnie, a rejestracja wiersz niżej po lewej. Przy gridzie clearfix i tak nie ma
   czego czyścić. */
.woocommerce-account .u-columns::before,
.woocommerce-account .u-columns::after {
	display: none;
}

/* WooCommerce układa te kolumny floatami z `width: 47.8%`. W gridzie float jest
   ignorowany, ale szerokość już nie — zostawały dwa paski po 189 px w kolumnie 394 px,
   a `float: right` na drugiej odwracał jeszcze ich kolejność.
   Selektor jest długi celowo: reguła WooCommerce ma trzy klasy i krótszy przegrywa. */
.woocommerce-account .woocommerce .u-columns > :is(.u-column1, .u-column2) {
	float: none;
	width: auto;
	min-width: 0;
}

/* Nagłówek „Adres rozliczeniowy” nad formularzem powtarza tytuł strony „Dane do faktury”. */
.woocommerce-edit-address .woocommerce-MyAccount-content form > h2:first-child {
	display: none;
}

.woocommerce-account .woocommerce > :is(h2, .u-column1 h2, .u-column2 h2) {
	margin: var(--fa-space-4) 0;
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-24);
	font-weight: 800;
	text-transform: uppercase;
}

.woocommerce-account :is(.woocommerce-form-login, .woocommerce-form-register) {
	padding: var(--fa-space-6);
	background: var(--fa-ink-800);
	border: 1px solid var(--fa-ink-600);
}

.woocommerce-account .woocommerce-form-login__rememberme {
	display: flex;
	gap: var(--fa-space-2);
	align-items: center;
	margin: var(--fa-space-4) 0;
	font-size: var(--fa-text-13);
}

.woocommerce-account .woocommerce-form-login__rememberme input {
	width: 18px;
	height: 18px;
	accent-color: var(--fa-orange-500);
}

.woocommerce-account .woocommerce-privacy-policy-text {
	font-size: var(--fa-text-12);
	line-height: var(--fa-leading-body);
	color: var(--fa-text-muted);
}

.woocommerce-account .woocommerce-LostPassword {
	margin-top: var(--fa-space-4);
	font-size: var(--fa-text-13);
}

/* Pola i przyciski w logowaniu dziedziczą wąskie szerokości z arkusza WooCommerce
   (`width: 50%` na `.form-row-wide`), przez co w kolumnie zostawał pasek. */
.woocommerce-account :is(.woocommerce-form-login, .woocommerce-form-register) :is(input[type="text"], input[type="email"], input[type="password"]),
.woocommerce-account .woocommerce-form-row {
	width: 100%;
}

.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit {
	width: 100%;
	white-space: nowrap;
}

/* Reset hasła i ustawienie nowego to jedyne ekrany konta bez nawigacji bocznej: WooCommerce
   renderuje sam formularz na pełnej szerokości treści. Przy jednym polu rozciągnięty input
   i przycisk na 1200 px czytają się jak zepsuty układ, a nie jak formularz.

   `.form-row-first` niesie z arkusza WooCommerce `float: left; width: 47%`, więc pole zostawało
   wąskie, a przycisk pod nim szeroki na całą kolumnę. Zerujemy oba i szerokość bierze kontener. */
.woocommerce-account :is(.lost_reset_password, .woocommerce-ResetPassword) {
	max-width: 440px;
}

.woocommerce-account :is(.lost_reset_password, .woocommerce-ResetPassword) .form-row {
	float: none;
	width: 100%;
	margin-bottom: 0;
}

.woocommerce-account :is(.lost_reset_password, .woocommerce-ResetPassword) :is(input[type="text"], input[type="password"]),
.woocommerce-account :is(.lost_reset_password, .woocommerce-ResetPassword) button[type="submit"] {
	width: 100%;
}

/* Akapit ze wstępem stoi w tym samym formularzu co pola, więc dziedziczy `gap` po
   `.woocommerce-account form` — bez tego wstęp klei się do etykiety. */
.woocommerce-account :is(.lost_reset_password, .woocommerce-ResetPassword) > p:first-child {
	margin-bottom: var(--fa-space-6);
	color: var(--fa-text-secondary);
}

/* Pole hasła ma w środku przycisk podglądu — bez zapasu nachodzi na tekst. */
.woocommerce-account .password-input {
	display: block;
	width: 100%;
}

.woocommerce-account .password-input input {
	padding-right: var(--fa-space-8);
}

/* Arkusz WooCommerce układa konto floatami: `float: right; width: 68%` na treści.
   W gridzie float jest ignorowany, ale szerokość już nie — treść dostawała 68%
   wąskiej kolumny nawigacji. Kolumny przypisujemy jawnie, zamiast liczyć na
   automatyczne rozmieszczenie, które ten reset i tak zaburza. */
.konto__nav {
	grid-column: 1;
}

.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	grid-column: 2;
	width: auto;
}

.s4__actions .s2__cta,
.konto__panel .s2__cta {
	text-decoration: none;
}

.konto__nav {
	position: sticky;
	top: var(--fa-space-6);
}

.konto__who {
	padding: var(--fa-space-4);
	background: var(--fa-ink-800);
	border-left: 3px solid var(--fa-orange-500);
}

.konto__who-label {
	font-size: var(--fa-text-12);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fa-text-muted);
}

.konto__who-name {
	margin-top: var(--fa-space-2);
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-18);
	font-weight: 700;
}

.konto__who-mail {
	font-size: var(--fa-text-12);
	color: var(--fa-text-secondary);
	overflow-wrap: anywhere;
}

.konto__menu {
	margin: var(--fa-space-6) 0;
	padding: 0;
	list-style: none;
}

.konto__menu-item a {
	display: block;
	padding: var(--fa-space-3) var(--fa-space-4);
	font-size: var(--fa-text-15);
	font-weight: 500;
	color: var(--fa-text-secondary);
	text-decoration: none;
	border-left: 3px solid transparent;
	transition: color 150ms, border-color 150ms, background 150ms;
}

.konto__menu-item a:is(:hover, :focus-visible) {
	color: var(--fa-text-primary);
	background: var(--fa-ink-800);
}

.konto__menu-item.is-active a,
.konto__menu-item.woocommerce-MyAccount-navigation-link--active a {
	color: var(--fa-text-primary);
	background: var(--fa-ink-800);
	border-left-color: var(--fa-orange-500);
}

.konto__help {
	padding-top: var(--fa-space-4);
	font-size: var(--fa-text-13);
	color: var(--fa-text-secondary);
	border-top: 1px solid var(--fa-ink-600);
}

.konto__title {
	margin-bottom: var(--fa-space-4);
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-24);
	font-weight: 800;
	text-transform: uppercase;
}

.konto__panel > section + section {
	margin-top: var(--fa-space-12);
}

.konto__lead,
.konto__empty {
	font-size: var(--fa-text-15);
	line-height: var(--fa-leading-body);
	color: var(--fa-text-secondary);
}

/* Nieopłacone wymaga działania, więc jako jedyne dostaje kolor ostrzegawczy. */
.konto__alert {
	margin-bottom: var(--fa-space-8);
	padding: var(--fa-space-4) var(--fa-space-6);
	background: var(--fa-orange-tint);
	border-left: 3px solid var(--fa-orange-500);
}

.konto__alert-title {
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-16);
	font-weight: 700;
	text-transform: uppercase;
}

.konto__alert-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fa-space-4);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--fa-space-3);
	font-size: var(--fa-text-15);
}

.konto__card {
	padding: var(--fa-space-6);
	background: var(--fa-ink-800);
	border: 1px solid var(--fa-ink-600);
}

.konto__card + .konto__card {
	margin-top: var(--fa-space-4);
}

.konto__card-head {
	display: flex;
	gap: var(--fa-space-4);
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: var(--fa-space-6);
}

.konto__card-title {
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-18);
	font-weight: 700;
}

.konto__card-who {
	margin-top: var(--fa-space-2);
	font-size: var(--fa-text-15);
}

.konto__card-where {
	margin-top: var(--fa-space-2);
	font-size: var(--fa-text-13);
	line-height: var(--fa-leading-body);
	color: var(--fa-text-secondary);
}

.konto__badge {
	flex: 0 0 auto;
	padding: var(--fa-space-2) var(--fa-space-3);
	font-size: var(--fa-text-12);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fa-text-secondary);
	border: 1px solid var(--fa-ink-500);
}

.konto__badge--active,
.konto__badge--completed,
.konto__badge--processing {
	color: var(--fa-success);
	border-color: var(--fa-success);
}

.konto__badge--pending,
.konto__badge--on-hold {
	color: var(--fa-warning);
	border-color: var(--fa-warning);
}

.konto__badge--cancelled,
.konto__badge--failed,
.konto__badge--expired {
	color: var(--fa-error);
	border-color: var(--fa-error);
}

.konto__facts {
	padding-top: var(--fa-space-4);
	border-top: 1px solid var(--fa-ink-600);
}

.konto__card-note {
	margin-top: var(--fa-space-4);
	font-size: var(--fa-text-13);
	line-height: var(--fa-leading-body);
	color: var(--fa-text-secondary);
}

.konto__card-note--quiet {
	color: var(--fa-text-muted);
}

.konto__card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fa-space-4);
	align-items: center;
	margin-top: var(--fa-space-4);
	padding-top: var(--fa-space-4);
	border-top: 1px solid var(--fa-ink-600);
}

.konto__danger {
	padding: var(--fa-space-2);
	font-size: var(--fa-text-13);
	color: var(--fa-error);
	text-decoration: underline;
}

.konto__cta--small {
	padding: var(--fa-space-2) var(--fa-space-4);
	font-size: var(--fa-text-13);
}

.konto__orders {
	margin: 0;
	padding: 0;
	list-style: none;
}

.konto__order {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--fa-space-3) var(--fa-space-6);
	padding: var(--fa-space-4) 0;
	border-bottom: 1px solid var(--fa-ink-600);
}

.konto__order.is-due {
	padding-left: var(--fa-space-4);
	border-left: 3px solid var(--fa-orange-500);
}

.konto__order-title {
	font-size: var(--fa-text-15);
	font-weight: 600;
}

.konto__order-meta {
	margin-top: var(--fa-space-2);
	font-size: var(--fa-text-12);
	color: var(--fa-text-muted);
}

.konto__order-side {
	display: flex;
	flex-direction: column;
	gap: var(--fa-space-2);
	align-items: flex-end;
	text-align: right;
}

.konto__order-total {
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-18);
	font-weight: 700;
}

.konto__order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fa-space-4);
	align-items: center;
	grid-column: 1 / -1;
}

.konto__docs {
	margin: 0;
	padding: 0;
	list-style: none;
}

.konto__docs li {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fa-space-2) var(--fa-space-4);
	align-items: baseline;
	justify-content: space-between;
	padding: var(--fa-space-3) 0;
	border-bottom: 1px solid var(--fa-ink-600);
}

.konto__docs a {
	display: inline-flex;
	gap: var(--fa-space-2);
	align-items: center;
	font-size: var(--fa-text-15);
	color: var(--fa-text-primary);
}

.konto__docs svg {
	width: 16px;
	height: 16px;
	color: var(--fa-orange-500);
}

.konto__doc-meta {
	font-size: var(--fa-text-12);
	color: var(--fa-text-muted);
}

.konto__pager {
	display: flex;
	gap: var(--fa-space-6);
	margin-top: var(--fa-space-6);
}

/* Formularze WooCommerce w zakładkach „Dane do faktury” i „Hasło i dane”. */
.woocommerce-account .woocommerce-Message,
.woocommerce-account .woocommerce-error {
	margin-bottom: var(--fa-space-6);
	padding: var(--fa-space-4);
	list-style: none;
	background: var(--fa-ink-800);
	border-left: 3px solid var(--fa-orange-500);
}

.woocommerce-account form .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--fa-space-2);
	margin-bottom: var(--fa-space-4);
}

.woocommerce-account form label {
	font-size: var(--fa-text-13);
	font-weight: 600;
}

.woocommerce-account form :is(input, select, textarea) {
	padding: var(--fa-space-3) var(--fa-space-4);
	font-family: inherit;
	font-size: var(--fa-text-16);
	color: var(--fa-text-primary);
	background: var(--fa-ink-900);
	border: 1px solid var(--fa-ink-500);
	border-radius: 0;
}

.woocommerce-account form :is(input, select, textarea):focus-visible {
	border-color: var(--fa-orange-500);
	outline: 2px solid var(--fa-orange-500);
	outline-offset: -1px;
}

.woocommerce-account form button[type="submit"] {
	margin-top: var(--fa-space-4);
	padding: var(--fa-space-3) var(--fa-space-8);
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-16);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--fa-text-on-accent);
	background: var(--fa-orange-500);
	border: 0;
	cursor: pointer;
}

/* ==========================================================================
   Widoki, których nie nadpisujemy własnym szablonem

   Szczegóły subskrypcji i zamówienia renderuje WooCommerce razem z Subscriptions.
   Tych ekranów jest kilkanaście i przepisywanie każdego byłoby pracą na tydzień,
   który zjadłaby pierwsza aktualizacja wtyczki. Zamiast tego ubieramy to, czym
   one operują: tabele, przyciski i komunikaty.
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	margin: var(--fa-space-4) 0;
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-18);
	font-weight: 700;
	text-transform: uppercase;
}

/* Tabele WCS mają po pięć, sześć kolumn i wychodzą poza kontener także na desktopie
   — przewijanie w poziomie jest tu regułą, nie wyjątkiem dla telefonu. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table,
.woocommerce-account .woocommerce-MyAccount-content .shop_table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.woocommerce-account .woocommerce-MyAccount-content table {
	width: 100%;
	margin-bottom: var(--fa-space-6);
	font-size: var(--fa-text-15);
	border: 1px solid var(--fa-ink-600);
	border-collapse: collapse;
}

/* Przyciski w komórkach tabeli stykały się z krawędzią i ze sobą. */
.woocommerce-account .woocommerce-MyAccount-content td .button {
	margin: var(--fa-space-2) var(--fa-space-2) var(--fa-space-2) 0;
	white-space: nowrap;
}

/* Działania pod tabelą (np. „Zamów jeszcze raz”) potrzebują odstępu od niej. */
.woocommerce-account .woocommerce-MyAccount-content > .button,
.woocommerce-account .woocommerce-MyAccount-content > p > .button,
.woocommerce-account .subscription_details + .button {
	margin: var(--fa-space-2) var(--fa-space-3) var(--fa-space-6) 0;
}

.woocommerce-account .woocommerce-MyAccount-content :is(th, td) {
	padding: var(--fa-space-3) var(--fa-space-4);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--fa-ink-600);
}

.woocommerce-account .woocommerce-MyAccount-content th {
	font-size: var(--fa-text-12);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fa-text-muted);
	background: var(--fa-ink-900);
}

.woocommerce-account .woocommerce-MyAccount-content tbody tr:last-child :is(th, td) {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-content tfoot :is(th, td) {
	font-weight: 700;
	background: var(--fa-ink-900);
}

/* Miniatury produktów w tabelach subskrypcji potrafią wejść na pół szerokości. */
.woocommerce-account .woocommerce-MyAccount-content td img {
	width: 48px;
	height: auto;
}

/* Przyciski WooCommerce są domyślnie jasne — na ciemnym tle wyglądały jak wklejka.
 *
 * `min-height` i `padding` trzeba wyzerować jawnie: `.page__content .button` w style.css
 * narzuca 52 px i `padding: 0 28px`, bo powstało pod duże CTA checkoutu. Ma tę samą
 * specyficzność co selektory tutaj, więc bez jawnego nadpisania „Zobacz” obok wiersza
 * tabeli był wysokim prostokątem z tekstem pływającym w środku.
 */
.page__content .woocommerce-account .button,
.woocommerce-account .button,
.woocommerce-account a.button,
.woocommerce-account button.button,
.woocommerce-account input.button {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: var(--fa-space-2) var(--fa-space-4);
	line-height: 1.2;
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-13);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fa-text-primary);
	text-decoration: none;
	background: transparent;
	border: 1px solid var(--fa-ink-400);
	border-radius: 0;
	cursor: pointer;
	transition: border-color 150ms, color 150ms;
}

/* WooCommerce ustawia jasne tło na hoverze (`#dad8da`) — bez nadpisania przycisk
   rozbłyskiwał na biało na ciemnej stronie. */
.woocommerce-account .button:is(:hover, :focus-visible) {
	color: var(--fa-orange-500);
	background: var(--fa-ink-900);
	border-color: var(--fa-orange-500);
}

/* Zapłać i inne działania główne — pełny akcent i pełna wysokość dotykowa,
   bo prowadzą do pieniędzy albo zapisują dane. */
.woocommerce-account .button.pay,
.woocommerce-account .button[name="save_account_details"],
.woocommerce-account .button[name="save_address"],
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit {
	justify-content: center;
	min-height: 52px;
	padding: var(--fa-space-3) var(--fa-space-8);
	font-size: var(--fa-text-15);
	color: var(--fa-text-on-accent);
	background: var(--fa-orange-500);
	border-color: var(--fa-orange-500);
}

.woocommerce-account .button.pay:is(:hover, :focus-visible),
.woocommerce-account .button[name="save_account_details"]:is(:hover, :focus-visible),
.woocommerce-account .button[name="save_address"]:is(:hover, :focus-visible) {
	color: var(--fa-text-on-accent);
	background: var(--fa-orange-400);
	border-color: var(--fa-orange-400);
}

/* Anulowanie subskrypcji nie może wyglądać zachęcająco. */
.woocommerce-account .button.cancel {
	color: var(--fa-error);
	border-color: transparent;
	text-decoration: underline;
}

.woocommerce-account .button.cancel:is(:hover, :focus-visible) {
	color: var(--fa-error);
	border-color: var(--fa-error);
	text-decoration: none;
}

/* Komunikaty WooCommerce mają zieloną krawędź u góry i ikonę z własnego fontu
   ustawioną absolutnie — ta nachodziła na pierwszą literę tekstu. Zerujemy oba
   i budujemy komunikat od zera, żeby wyglądał jak reszta strony. */
.woocommerce-account :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fa-space-3);
	align-items: center;
	margin: 0 0 var(--fa-space-6);
	padding: var(--fa-space-4) var(--fa-space-6);
	font-size: var(--fa-text-15);
	line-height: var(--fa-leading-body);
	list-style: none;
	color: var(--fa-text-primary);
	background: var(--fa-ink-800);
	border: 0;
	border-left: 3px solid var(--fa-orange-500);
	border-radius: 0;
}

.woocommerce-account :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
	display: none;
}

.woocommerce-account .woocommerce-error {
	border-left-color: var(--fa-error);
}

.woocommerce-account .woocommerce-message .button {
	margin-left: auto;
}

.woocommerce-account address {
	font-style: normal;
	line-height: var(--fa-leading-body);
	color: var(--fa-text-secondary);
}

.woocommerce-account .woocommerce-MyAccount-content :is(p, li) {
	line-height: var(--fa-leading-body);
}

.woocommerce-account .woocommerce-MyAccount-content a {
	color: var(--fa-orange-500);
}

/* Odnośnik w skórze przycisku nie jest odnośnikiem w tekście: pomarańczowy napis
   na pomarańczowym tle znikał, a to był przycisk „Zapłać" nad nieopłaconym zapisem. */
.woocommerce-account .woocommerce-MyAccount-content a.s2__cta {
	color: var(--fa-text-on-accent);
}

/* Gwiazdka przy polach wymaganych ginęła w tekście etykiety. */
.woocommerce-account .required {
	color: var(--fa-orange-500);
	text-decoration: none;
}

.woocommerce-account form .form-row-first,
.woocommerce-account form .form-row-last {
	display: inline-flex;
	width: calc(50% - var(--fa-space-2));
}

.woocommerce-account form .form-row-first {
	margin-right: var(--fa-space-3);
}

.woocommerce-account fieldset {
	margin: var(--fa-space-6) 0;
	padding: var(--fa-space-4);
	border: 1px solid var(--fa-ink-600);
}

.woocommerce-account fieldset legend {
	padding: 0 var(--fa-space-2);
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-15);
	font-weight: 700;
	text-transform: uppercase;
}

/* ==========================================================================
   Moje zajęcia — kalendarz Iron Queens (CRM-5)

   Dwa układy z jednego kodu. Do 900 px: pasek dni plus jeden wybrany dzień, bo siatka
   tygodnia na telefonie daje kolumny na trzy litery. Od 900 px: siedem kolumn, cały
   tydzień naraz.

   Bez JavaScriptu wszystkie dni są widoczne pod sobą — skrypt dokłada klasę `zajecia--js`
   i dopiero wtedy chowamy niewybrane.
   ========================================================================== */

/* Komunikat po nieudanym zapisie przez AJAX — ta sama rola co `.konto__alert` przy przeładowaniu. */
.zajecia__komunikat {
	margin-bottom: var(--fa-space-4);
	padding: var(--fa-space-3) var(--fa-space-4);
	font-size: var(--fa-text-15);
	color: var(--fa-text-primary);
	background: var(--fa-ink-800);
	border-left: 3px solid var(--fa-error);
}

.zajecia__licznik {
	margin-bottom: var(--fa-space-6);
	padding: var(--fa-space-6);
	background: var(--fa-ink-800);
	border-left: 3px solid var(--fa-orange-500);
}

/* Liczba pozostałych wejść jest jedyną rzeczą, po którą ktoś tu wraca w biegu,
   więc czyta się ją z odległości ręki. */
.zajecia__licznik-liczba {
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-40);
	font-weight: 800;
	line-height: var(--fa-leading-tight);
	text-transform: uppercase;
}

.zajecia__licznik-z {
	margin-left: var(--fa-space-2);
	font-size: var(--fa-text-16);
	font-weight: 600;
	color: var(--fa-text-secondary);
}

/* ------------------------------------------------------------------ pasek dni */

.zajecia__pasek {
	display: flex;
	gap: var(--fa-space-2);
	margin-bottom: var(--fa-space-6);
	padding-bottom: var(--fa-space-2);
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
}

.zajecia__pasek::-webkit-scrollbar {
	display: none;
}

.zajecia__chip {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 2px;
	align-items: center;
	width: 56px;
	padding: var(--fa-space-2) 0 var(--fa-space-1);
	text-decoration: none;
	background: var(--fa-ink-800);
	border: 1px solid var(--fa-ink-600);
	scroll-snap-align: center;
}

/* Kolory kafelków muszą przebić `.woocommerce-account .woocommerce-MyAccount-content a`
   (linia 894), które maluje na pomarańczowo każdy odnośnik w koncie. Stąd długi selektor:
   przy równej wadze wygrywa reguła stojąca niżej w pliku. Pomarańcz zostaje jednemu
   kafelkowi — temu wybranemu. */
.woocommerce-account .konto__panel a.zajecia__chip {
	color: var(--fa-text-secondary);
}

.woocommerce-account .konto__panel a.zajecia__chip:hover {
	color: var(--fa-text-primary);
	border-color: var(--fa-ink-500);
}

.woocommerce-account .konto__panel a.zajecia__chip.is-wybrany {
	color: var(--fa-text-on-accent);
	background: var(--fa-orange-500);
	border-color: var(--fa-orange-500);
}

.zajecia__chip-dzien {
	font-size: var(--fa-text-12);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.zajecia__chip-data {
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-20);
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Kropki mówią, ile zajęć jest tego dnia — wypełniona to ta, na którą już jesteś zapisana.
   Wysokość jest stała, żeby dni z jedną i z czterema kropkami miały równe kafelki. */
.zajecia__chip-kropki {
	display: flex;
	gap: 3px;
	align-items: center;
	height: 10px;
}

.zajecia__chip-kropki i {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.4;
}

.zajecia__chip-kropki i.is-moja {
	opacity: 1;
}

.zajecia__chip.is-wybrany .zajecia__chip-kropki i {
	opacity: 0.5;
}

.zajecia__chip.is-wybrany .zajecia__chip-kropki i.is-moja {
	opacity: 1;
}

/* --------------------------------------------------------------- siatka tygodnia */

.zajecia__tydzien + .zajecia__tydzien {
	margin-top: var(--fa-space-8);
}

.zajecia__tydzien-tytul {
	margin-bottom: var(--fa-space-3);
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-15);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fa-text-secondary);
}

.zajecia__dzien + .zajecia__dzien {
	margin-top: var(--fa-space-6);
}

.zajecia__dzien-tytul {
	margin-bottom: var(--fa-space-2);
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-16);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.zajecia__dzien-krotki {
	display: none;
}

.zajecia__dzis {
	margin-left: var(--fa-space-2);
	padding: 2px var(--fa-space-2);
	font-family: var(--fa-font-ui);
	font-size: var(--fa-text-12);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--fa-text-on-accent);
	background: var(--fa-orange-500);
}

/* ------------------------------------------------------------------- termin */

/* Przycisk ma własny wiersz pod opisem. Obok statusu było ciasno: na 390 px zostawało
   na nazwę 110 px, a cel do kliknięcia stał w rogu, do którego kciuk musi sięgać. */
.zajecia__termin {
	display: grid;
	grid-template-columns: 3.75rem minmax(0, 1fr);
	grid-template-areas:
		'godzina nazwa'
		'godzina miejsca'
		'akcja akcja';
	gap: 2px var(--fa-space-3);
	align-items: center;
	padding: var(--fa-space-3) var(--fa-space-4);
	background: var(--fa-ink-800);
	border: 1px solid var(--fa-ink-600);
}

.zajecia__termin + .zajecia__termin {
	margin-top: var(--fa-space-2);
}

/* Rytm w karcie robi `gap`, nie marginesy akapitów z motywu. Bez tego każdy wiersz dokładał
   16 px i karta na desktopie rosła do 230 px, czyli dzień z czterema zajęciami miał metr wysokości.
   Dwie klasy w selektorze, bo `.page__content p` ze `style.css` ma wagę wyższą niż samo dziecko. */
.konto__panel .zajecia__termin > * {
	margin: 0;
}

/* Zapisany termin ma się dać znaleźć wzrokiem bez czytania — stąd pasek, nie inny odcień tła. */
.zajecia__termin--moj {
	border-left: 3px solid var(--fa-orange-500);
}

.zajecia__termin--pelny {
	opacity: 0.55;
}

.zajecia__godzina {
	grid-area: godzina;
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-20);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.zajecia__nazwa {
	grid-area: nazwa;
	font-size: var(--fa-text-16);
	font-weight: 600;
	line-height: 1.2;
}

.zajecia__miejsca {
	grid-area: miejsca;
	font-size: var(--fa-text-13);
	color: var(--fa-text-secondary);
}

.zajecia__akcja {
	grid-area: akcja;
}

/* Trzy klasy w selektorze, bo `.woocommerce-account form button[type="submit"]` maluje
   każdy przycisk w koncie na pełny pomarańcz z paddingiem 32 px — a tutaj w wierszu
   z godziną i nazwą taki blok wypychał nazwę zajęć do dwóch linijek. */
.konto__panel .zajecia__termin .zajecia__btn {
	width: 100%;
	min-height: 48px;
	padding: var(--fa-space-2) var(--fa-space-4);
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-13);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--fa-text-on-accent);
	background: var(--fa-orange-500);
	border: 0;
	cursor: pointer;
}

.konto__panel .zajecia__termin .zajecia__btn:hover {
	background: var(--fa-orange-400);
}

/* Odwołanie jest cichsze od zapisu: pomarańcz zostaje przy tym, co ktoś tu robi najczęściej. */
.konto__panel .zajecia__termin .zajecia__btn--wypisz {
	color: var(--fa-text-secondary);
	background: transparent;
	border: 1px solid var(--fa-ink-500);
}

.konto__panel .zajecia__termin .zajecia__btn--wypisz:hover {
	color: var(--fa-text-primary);
	background: var(--fa-ink-700);
	border-color: var(--fa-ink-400);
}

/* W trakcie zapisu przez AJAX przycisk gaśnie, żeby nie dało się kliknąć drugi raz. */
.konto__panel .zajecia__termin .zajecia__btn[disabled] {
	opacity: 0.5;
	cursor: progress;
}

.zajecia__pelne {
	font-size: var(--fa-text-13);
	color: var(--fa-text-muted);
}

/* ---------------------------------------------- pusta pula: dwa wyjścia

   Odmowa „nie masz już wejść" ma dwa wyjścia i dlatego dostaje modal: pasek nad kalendarzem
   ginął, bo klik dzieje się w dole listy. Ten sam blok wyjść stoi w `.konto__alert`, czyli
   na ścieżce bez JavaScriptu — stąd klasy opisują wyjścia, nie modal. */

.zajecia__modal {
	width: min(420px, calc(100vw - 32px));
	padding: var(--fa-space-6);
	color: var(--fa-text-primary);
	background: var(--fa-ink-800);
	border: 1px solid var(--fa-ink-500);
	border-radius: 0;
	box-shadow: var(--fa-shadow-lift);
}

.zajecia__modal:not([open]) {
	display: none;
}

.zajecia__modal::backdrop {
	background: rgb(14 15 17 / 0.78);
}

.zajecia__modal-title {
	margin-bottom: var(--fa-space-2);
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-20);
	font-weight: 800;
	line-height: var(--fa-leading-tight);
	text-transform: uppercase;
}

/* Focus ląduje na nagłówku, żeby czytnik przeczytał, po co to okno — obrys wokół samego
   tytułu wyglądałby jak błąd pola. */
.zajecia__modal-title:focus {
	outline: none;
}

.zajecia__wyjscia {
	display: grid;
	gap: var(--fa-space-6);
	margin-top: var(--fa-space-6);
}

.zajecia__wyjscie {
	display: grid;
	gap: var(--fa-space-2);
}

/* Pomarańczowy jest jeden przycisk: odnowienie. Wejście jednorazowe to obrys — obie drogi
   są dobre, ale wybór z dwóch plam koloru przestaje być wyborem. Długi selektor przebija
   `.woocommerce-account .woocommerce-MyAccount-content a`, które maluje każdy odnośnik
   w koncie (ten sam powód co przy kafelkach dni). */
.woocommerce-account .konto__panel a.zajecia__wyjscie-btn {
	display: flex;
	min-height: 48px;
	padding: var(--fa-space-2) var(--fa-space-4);
	align-items: center;
	justify-content: center;
	font-family: var(--fa-font-display);
	font-size: var(--fa-text-13);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--fa-text-secondary);
	background: transparent;
	border: 1px solid var(--fa-ink-500);
}

.woocommerce-account .konto__panel a.zajecia__wyjscie-btn:hover {
	color: var(--fa-text-primary);
	background: var(--fa-ink-700);
	border-color: var(--fa-ink-400);
}

.woocommerce-account .konto__panel a.zajecia__wyjscie-btn--akcent {
	color: var(--fa-text-on-accent);
	background: var(--fa-orange-500);
	border-color: var(--fa-orange-500);
}

.woocommerce-account .konto__panel a.zajecia__wyjscie-btn--akcent:hover {
	color: var(--fa-text-on-accent);
	background: var(--fa-orange-400);
	border-color: var(--fa-orange-400);
}

/* Zamknięcie nie jest trzecią drogą, więc nie wygląda na przycisk. Selektor z trzema klasami
   z tego samego powodu co przy „Odwołaj”: `.woocommerce-account form button[type="submit"]`
   robi z każdego przycisku w koncie pomarańczową plamę. */
.konto__panel .zajecia__modal .zajecia__modal-zamknij {
	margin-top: var(--fa-space-6);
	padding: 0;
	font-size: var(--fa-text-13);
	color: var(--fa-text-muted);
	background: none;
	border: 0;
	cursor: pointer;
}

.konto__panel .zajecia__modal .zajecia__modal-zamknij:hover {
	color: var(--fa-text-secondary);
}

/* ---------------------------------------------------- telefon: jeden dzień naraz */

/* Jeden dzień naraz na każdej szerokości. Dopiero skrypt pozwala dni chować — bez niego
   zostaje agenda, czyli wszystko pod sobą. */
.zajecia--js .zajecia__dzien {
	display: none;
}

.zajecia--js .zajecia__dzien.is-wybrany {
	display: block;
}

/* Przy jednym dniu na ekranie nagłówek tygodnia nie ma czego grupować. */
.zajecia--js .zajecia__tydzien-tytul {
	display: none;
}

.zajecia--js .zajecia__tydzien + .zajecia__tydzien {
	margin-top: 0;
}

@media (max-width: 560px) {
	.zajecia__termin {
		padding: var(--fa-space-3);
	}

	.zajecia__godzina {
		font-size: var(--fa-text-18);
	}
}

/* Od średniego ekranu przycisk nie musi ciągnąć się przez pół strony — zostaje w swoim
   wierszu, ale bierze tyle miejsca, ile potrzebuje, i staje przy prawej krawędzi. */
@media (min-width: 561px) {
	.zajecia__akcja {
		justify-self: end;
	}

	.konto__panel .zajecia__termin .zajecia__btn {
		width: auto;
		min-width: 8rem;
	}
}

.zajecia__akcja {
	grid-area: akcja;
	margin-top: var(--fa-space-3);
}

/* ---------------------------------------------------------------------- desktop

   Ten sam układ co na telefonie: pasek dni i jeden dzień pod nim. Siatka wszystkich dni
   obok siebie działała, ale dawała dwa różne ekrany do nauczenia się (decyzja Rafała,
   21.08.2026). Szerokość karty ograniczamy, bo wiersz rozciągnięty na 900 px każe wodzić
   wzrokiem od godziny po lewej do przycisku po prawej. */

@media (min-width: 900px) {
	.zajecia__kalendarz {
		max-width: 34rem;
	}
}

@media (max-width: 860px) {
	/* `minmax(0, …)`, nie samo `1fr`: domyślne `1fr` nie schodzi poniżej szerokości treści,
	   więc cokolwiek szerokiego w środku (pasek dni kalendarza, tabela) rozpychało całą
	   stronę i dokładało poziome przewijanie. */
	.woocommerce-account .woocommerce:has(.konto__nav) {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--fa-space-8);
	}

	.woocommerce-account form .form-row-first,
	.woocommerce-account form .form-row-last {
		display: flex;
		width: 100%;
		margin-right: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-content table {
		display: block;
		overflow-x: auto;
	}

	/* Nawigacja rozpuszcza się w siatce, żeby jej trzy części dało się ustawić osobno:
	   blok „Pytania o grupę” ma trafić **pod** treść, a nie między zakładki a treść,
	   gdzie zjadałby ekran, zanim zacznie się to, po co ktoś tu wszedł. `<nav>` nie ma
	   własnego tła ani ramki, więc nie ma czego stracić. */
	.konto__nav {
		display: contents;
	}

	/* Samo `grid-template-columns: 1fr` nie wystarczy: `grid-column: 2` z układu
	   desktopowego zostaje na treści, a grid dokłada wtedy kolumnę spoza szablonu
	   i układ wraca do dwóch kolumn — tyle że węższych. */
	.woocommerce-account .woocommerce:has(.konto__nav) > * {
		grid-column: 1;
	}

	.konto__who {
		order: 1;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		order: 3;
	}

	.konto__help {
		order: 4;
		margin-top: var(--fa-space-8);
	}

	/* Nawigacja staje się paskiem zakładek nad treścią. Siedem pozycji nie mieści się
	   w rzędzie na telefonie, a łamane do siatki zjadało pół ekranu, zanim zaczynała się
	   treść. Pasek przewijany w poziomie trzyma je w jednej linii i zostawia miejsce
	   na to, po co ktoś tu wszedł. */
	.konto__menu {
		order: 2;
		display: flex;
		flex-wrap: nowrap;
		gap: var(--fa-space-2);
		/* Ujemny margines z równoważącym paddingiem: pasek przewija się od krawędzi
		   ekranu, więc widać, że da się go przesunąć, a nie urywa się w pół pola. */
		margin: var(--fa-space-4) calc(-1 * var(--fa-space-4));
		padding: 0 var(--fa-space-4) var(--fa-space-2);
		overflow-x: auto;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
	}

	.konto__menu::-webkit-scrollbar {
		display: none;
	}

	.konto__menu-item {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	/* Zakładka podkreślana od dołu, nie od lewej: w poziomym pasku lewa krawędź
	   wskazywałaby sąsiada, nie pozycję aktywną. */
	.konto__menu-item a {
		display: flex;
		align-items: center;
		height: 100%;
		white-space: nowrap;
		border-left: 0;
		border-bottom: 3px solid transparent;
	}

	.konto__menu-item.is-active a,
	.konto__menu-item.woocommerce-MyAccount-navigation-link--active a {
		border-left-color: transparent;
		border-bottom-color: var(--fa-orange-500);
	}

	.konto__order {
		grid-template-columns: 1fr;
	}

	/* Tytuł zajęć i znacznik statusu stoją obok siebie na jednej linii. Przy nazwach
	   w rodzaju „Zajęcia grupowe w Studiu, subskrypcja” na tytuł zostaje kilkanaście
	   pikseli, więc łamie się po jednym słowie. Znacznik schodzi wtedy pod tytuł. */
	.konto__card-head {
		flex-wrap: wrap;
		gap: var(--fa-space-2);
	}

	.konto__order-side {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		text-align: left;
	}
}