/**
 * Moje konto - redesign sekcji klienta (Castellani).
 * Etap 1: logowanie, rejestracja, wejscie goscia, potwierdzenie rejestracji.
 *
 * Ladowany warunkowo z "account-redesign.php" tylko na is_account_page().
 *
 * WARTOSCI POCHODZA WPROST Z FIGMY (plik UtSFXFmRarrCo4PIxfbD6X, wezly
 * 159-7495 i 159-7475), nie z globalnych tokenow Advanced Themera. Powod jest
 * konkretny: design uzywa 1 px obwodek i stalych rozmiarow, a tokeny sklepu sa
 * plynne (clamp) i maja inne wartosci - np. "--at-form-input-border-width: 2px"
 * i "--at-form-input-border-color: var(--at-black-t-5)" wobec 1 px i #dddedf
 * w projekcie. Wpiecie tokenow dalo by wiec wyglad INNY niz zaakceptowany.
 * Reuzywamy natomiast tego, co faktycznie sie zgadza: rodzin pisma
 * "Cormorant Garamond" i "Lato", ktore motyw juz laduje (bricks_font_face_rules).
 *
 * Breakpointy dobrane pod Bricksa: 991 px (tablet portrait) przelacza uklad
 * na jedna kolumne, 767 px (mobile landscape) wlacza mobilna skale typografii
 * z kadru 390 px.
 */

.cstl-acc,
.cstl-thanks {
	--cstl-ink: #0a0a0a;
	--cstl-line: #cdd4d5;
	--cstl-field-line: #dddedf;
	--cstl-muted: #545454;
	--cstl-muted-soft: #737373;
	--cstl-muted-mobile: #666;
	--cstl-placeholder: #8c8c8c;
	--cstl-surface: #f9fafa;
	--cstl-gold: #a98947;
	--cstl-pad: 29.065px;
	--cstl-font-heading: "Cormorant Garamond", serif;
	--cstl-font-body: "Lato", sans-serif;
}


/* -------------------------------------------------------------------------
 * Uklad
 * ---------------------------------------------------------------------- */

.cstl-acc {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.cstl-acc__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 63.14px;
	align-items: start;
}

.cstl-acc__cols--single {
	grid-template-columns: 1fr;
}

.cstl-acc__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
	border: 1px solid var(--cstl-line);
	padding: 37px var(--cstl-pad) 49px;
}

.cstl-acc__col--login {
	background: var(--cstl-surface);
}

.cstl-acc__title {
	margin: 0;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-heading);
	font-weight: 700;
	font-size: 36.3px;
	line-height: 50.82px;
}

/* Naglowek prawej kolumny rozni sie miedzy kadrami: "Zaloz konto" na
   desktopie, "Nie masz konta?" na mobile. Dwa warianty w HTML, bo CSS nie
   podmienia tresci, a display:none usuwa tez z drzewa dostepnosci. */
.cstl-acc__title-mobile {
	display: none;
}

/* Reset obwodki i paddingu, ktore Bricks nadaje formularzom konta w
   "woocommerce-layer.min.css" regula o specyficznosci (0,3,0). Tutaj (0,3,1),
   wiec wygrywa niezaleznie od kolejnosci arkuszy. */
.woocommerce-account .cstl-acc form.cstl-acc__form {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	text-align: left;
}


/* -------------------------------------------------------------------------
 * Logowanie zewnetrzne (Google / Apple)
 * ---------------------------------------------------------------------- */

.cstl-acc__socials {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 20px;
}

.woocommerce-account .cstl-acc .cstl-acc__social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	height: 52px;
	padding: 15px 24px;
	border: 1px solid var(--cstl-ink);
	border-radius: 0;
	background: #fff;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	text-decoration: none;
}

/* Brak wtyczki OAuth - przyciski sa widoczne, ale wylaczone (decyzja z 2026-08-04).
   Bez wygaszania: na prezentacji dla klienta maja wygladac jak docelowe, a nie
   jak popsute. Kursor zostaje, wiec proba kliknnicia nadal daje sygnal. */
.cstl-acc .cstl-acc__social[disabled] {
	cursor: not-allowed;
}

.cstl-acc__social-icon {
	display: flex;
	flex: none;
	width: 20px;
	height: 20px;
}

.cstl-acc__social-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}


/* -------------------------------------------------------------------------
 * Separator "lub"
 * ---------------------------------------------------------------------- */

.cstl-acc__divider {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}

.cstl-acc__divider::before,
.cstl-acc__divider::after {
	content: "";
	flex: 1 0 0;
	min-width: 0;
	height: 1px;
	background: var(--cstl-field-line);
}

.cstl-acc__divider span {
	color: var(--cstl-muted-soft);
	font-family: var(--cstl-font-body);
	font-size: 15.5px;
	line-height: 26.32px;
}


/* -------------------------------------------------------------------------
 * Pola formularza
 * ---------------------------------------------------------------------- */

.woocommerce-account .cstl-acc .cstl-acc__row {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0 0 25px;
	padding: 0;
}

/* Pole e-mail w rejestracji siedzi blizej podpowiedzi pod nim. */
.woocommerce-account .cstl-acc .cstl-acc__row--tight {
	margin-bottom: 10px;
}

.woocommerce-account .cstl-acc .cstl-acc__row > label {
	display: block;
	margin: 0;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 400;
	font-size: 15.5px;
	line-height: 26.32px;
}

/* Figma nie pokazuje gwiazdki przy etykietach - wszystkie pola sa i tak
   wymagane. Znacznik dla czytnikow ekranu ("Wymagane") zostaje w HTML. */
.cstl-acc .cstl-acc__row > label .required {
	display: none;
}

.woocommerce-account .cstl-acc input.cstl-acc__input {
	width: 100%;
	height: 42px;
	margin: 0;
	padding: 0 15px;
	border: 1px solid var(--cstl-field-line);
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-size: 15.5px;
	line-height: normal;
}

.cstl-acc input.cstl-acc__input::placeholder {
	color: var(--cstl-placeholder);
	opacity: 1;
}

.cstl-acc input.cstl-acc__input:focus {
	border-color: var(--cstl-ink);
	outline: none;
}

.cstl-acc__hint {
	margin: 0 0 28px;
	color: var(--cstl-muted);
	font-family: var(--cstl-font-body);
	font-size: 14px;
	line-height: 26.32px;
}


/* Haslo z przelacznikiem podgladu -------------------------------------- */

.cstl-acc__password {
	position: relative;
	display: block;
}

.cstl-acc__password input.cstl-acc__input {
	padding-right: 44px;
}

.cstl-acc__password-toggle {
	position: absolute;
	top: 50%;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 42px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	background: none;
	color: var(--cstl-ink);
	cursor: pointer;
}

.cstl-acc__password-toggle svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* W "Dane konta" kadr (94:2155) uzywa INNEJ ikony - konturowego oka 18 px.
   Przelacznik jest tam doklejany przez JS, patrz account-redesign.js. */
.woocommerce-account .woocommerce-EditAccountForm .cstl-acc__password-toggle svg {
	width: 18px;
	height: 18px;
}

/* Stan "haslo widoczne" - przekreslenie ikony. Figma pokazuje tylko jeden
   wariant ikony, wiec drugi stan sygnalizujemy krecha, nie nowym rysunkiem. */
.cstl-acc__password-toggle[aria-pressed="true"]::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20px;
	height: 1px;
	background: currentColor;
	transform: translate(-50%, -50%) rotate(-45deg);
}


/* Pola wyboru ---------------------------------------------------------- */

.woocommerce-account .cstl-acc .cstl-acc__row--checkbox {
	gap: 0;
}

.woocommerce-account .cstl-acc .cstl-acc__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 400;
	font-size: 15.5px;
	line-height: 21.68px;
	cursor: pointer;
}

.woocommerce-account .cstl-acc .cstl-acc__checkbox input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 1.83px 0 0;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid #000;
	border-radius: 0;
	background: #fff;
	cursor: pointer;
}

.woocommerce-account .cstl-acc .cstl-acc__checkbox input[type="checkbox"]::after {
	content: "";
	display: block;
	width: 5px;
	height: 9px;
	margin: 1px auto 0;
	border: solid var(--cstl-ink);
	border-width: 0 1.5px 1.5px 0;
	opacity: 0;
	transform: rotate(45deg);
}

.woocommerce-account .cstl-acc .cstl-acc__checkbox input[type="checkbox"]:checked::after {
	opacity: 1;
}

.woocommerce-account .cstl-acc .cstl-acc__checkbox a {
	color: inherit;
	text-decoration: underline;
}


/* Przyciski ------------------------------------------------------------ */

.woocommerce-account .cstl-acc .cstl-acc__row--submit {
	gap: 0;
}

.woocommerce-account .cstl-acc .cstl-acc__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	/* Kadr ma 18,71 px u gory i 20,09 px u dolu, ale w Figmie ta asymetria
	   znika w sposobie liczenia linii bazowej. W przegladarce etykieta siadala
	   przez nia 3 px za wysoko (zmierzone: 18 px nad, 20 px pod). Rozkladamy te
	   sama sume paddingu rowno - wysokosc przycisku bez zmian, tekst na srodku. */
	padding: 19.4px var(--cstl-pad);
	border: 1px solid var(--cstl-ink);
	border-radius: 0;
	background: transparent;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 700;
	font-size: 12.4px;
	line-height: 12.39px;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	align-self: flex-start;
}

/* Figma nie definiuje stanu hover - odwrocenie kolorow dolozone, zeby
   przycisk w ogole reagowal na wskaznik. */
.woocommerce-account .cstl-acc .cstl-acc__button:hover,
.woocommerce-account .cstl-acc .cstl-acc__button:focus-visible {
	background: var(--cstl-ink);
	color: #fff;
}

.cstl-acc__lost {
	margin: 0;
}

.cstl-acc__lost a {
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-size: 15.5px;
	line-height: 26.32px;
	text-decoration: none;
}

.cstl-acc__lost a:hover {
	text-decoration: underline;
}

/* Rejestracja ma wlasny rytm: zgoda i przycisk stoja ciasniej niz w logowaniu. */
.woocommerce-account .cstl-acc .woocommerce-form-register .cstl-acc__row--checkbox,
.woocommerce-account .cstl-acc .woocommerce-form-register .cstl-acc__row--submit {
	margin-bottom: 15px;
}


/* -------------------------------------------------------------------------
 * Sekcja korzysci
 * ---------------------------------------------------------------------- */

.cstl-acc__benefits {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cstl-acc__benefits-title {
	margin: 0;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-heading);
	font-weight: 700;
	font-size: 22px;
	line-height: 30px;
}

.cstl-acc__benefits-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cstl-acc__benefit {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}

.cstl-acc__benefit-icon {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 3px;
}

.cstl-acc__benefit-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.cstl-acc__benefit-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cstl-acc__benefit-name {
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 600;
	font-size: 15.5px;
	line-height: 22px;
}

.cstl-acc__benefit-desc {
	color: var(--cstl-muted);
	font-family: var(--cstl-font-body);
	font-size: 14px;
	line-height: 21px;
}


/* -------------------------------------------------------------------------
 * Blok goscia
 * ---------------------------------------------------------------------- */

.cstl-acc__guest {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18.7px;
	border: 1px solid var(--cstl-line);
	padding: var(--cstl-pad);
	text-align: center;
}

.cstl-acc__guest-title {
	margin: 0;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-heading);
	font-weight: 700;
	font-size: 23.2px;
	line-height: 32.52px;
}

.cstl-acc__guest-text {
	margin: 0;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-size: 15.5px;
	line-height: 26.32px;
}

.cstl-acc__guest-action {
	display: flex;
	justify-content: center;
	width: 100%;
}

.cstl-acc__guest .cstl-acc__button {
	align-self: center;
}


/* -------------------------------------------------------------------------
 * Potwierdzenie rejestracji
 * ---------------------------------------------------------------------- */

.cstl-thanks {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Woo dorzuca tu wlasny komunikat "konto uzywa tymczasowego hasla, wyslalismy
   link" - doslownie to samo, co mowi tresc ekranu. Chowamy WYLACZNIE na tym
   jednym ekranie (klasa body dodawana w account-redesign.php); na pozostalych
   podstronach konta komunikaty dzialaja normalnie. */
body.cstl-account-thanks .woocommerce-notices-wrapper {
	display: none;
}

.cstl-thanks__icon {
	display: block;
	width: 120px;
	height: 120px;
	margin-bottom: 40px;
}

.cstl-thanks__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.cstl-thanks__title {
	margin: 0 0 32px;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-heading);
	font-weight: 700;
	font-size: 38px;
	line-height: 46px;
}

/* Zlota kreska pod naglowkiem wystepuje tylko w kadrze mobilnym. */
.cstl-thanks__rule {
	display: none;
	width: 48px;
	height: 2px;
	background: var(--cstl-gold);
}

.cstl-thanks__text {
	margin: 0;
	color: var(--cstl-muted-mobile);
	font-family: var(--cstl-font-body);
	font-size: 16px;
	line-height: 27px;
}

.cstl-thanks__text:last-of-type {
	margin-bottom: 40px;
}

.cstl-thanks__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	border: 1px solid var(--cstl-ink);
	border-radius: 0;
	background: var(--cstl-ink);
	color: #fff;
	font-family: var(--cstl-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
}

.cstl-thanks__button:hover,
.cstl-thanks__button:focus-visible {
	background: #fff;
	color: var(--cstl-ink);
}


/* -------------------------------------------------------------------------
 * Tablet: jedna kolumna, typografia jeszcze desktopowa
 * ---------------------------------------------------------------------- */

@media (max-width: 991px) {

	.cstl-acc__cols {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}


/* -------------------------------------------------------------------------
 * Mobile - kadr 390 px
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {

	.cstl-acc {
		gap: 32px;
	}

	.cstl-acc__col {
		gap: 16px;
		padding: 20px;
	}

	.cstl-acc__col--register {
		padding-bottom: 28px;
	}

	.cstl-acc__title {
		font-weight: 600;
		font-size: 28.4px;
		line-height: 39.71px;
	}

	.cstl-acc__title-desktop {
		display: none;
	}

	.cstl-acc__title-mobile {
		display: inline;
	}

	.cstl-acc__socials {
		margin-bottom: 12px;
	}

	.cstl-acc__divider {
		gap: 10px;
		margin-bottom: 12px;
	}

	.cstl-acc__divider span {
		color: var(--cstl-muted-mobile);
		font-size: 12.1px;
		line-height: 20.56px;
	}

	.woocommerce-account .cstl-acc .cstl-acc__row {
		gap: 6px;
		margin-bottom: 12px;
	}

	.woocommerce-account .cstl-acc .cstl-acc__row--tight {
		margin-bottom: 8px;
	}

	.cstl-acc .cstl-acc__row > label {
		font-size: 12.1px;
		line-height: 20.56px;
	}

	.cstl-acc input.cstl-acc__input {
		padding: 0 14px;
		font-size: 12.1px;
	}

	.cstl-acc__password input.cstl-acc__input {
		padding-right: 42px;
	}

	.cstl-acc__password-toggle svg {
		width: 18px;
		height: 18px;
	}

	.cstl-acc__hint {
		margin-bottom: 24px;
		color: var(--cstl-muted-mobile);
		font-size: 12.1px;
		line-height: 20.56px;
	}

	.woocommerce-account .cstl-acc .cstl-acc__checkbox {
		font-size: 14px;
	}

	.cstl-acc .cstl-acc__button {
		width: 100%;
		align-self: stretch;
		font-size: 14px;
	}

	.cstl-acc .woocommerce-form-register .cstl-acc__row--checkbox {
		margin-bottom: 15px;
	}

	.cstl-acc .woocommerce-form-register .cstl-acc__row--submit {
		margin-bottom: 12px;
	}

	.cstl-acc__benefits {
		padding-top: 8px;
	}

	/* Kadr mobilny pokazuje same tytuly korzysci, bez opisow. */
	.cstl-acc__benefit-desc {
		display: none;
	}

	.cstl-thanks__icon {
		width: 96px;
		height: 96px;
		margin-bottom: 28px;
	}

	.cstl-thanks__title {
		margin-bottom: 18px;
		font-size: 27px;
		line-height: 33px;
	}

	.cstl-thanks__rule {
		display: block;
		margin-bottom: 22px;
	}

	.cstl-thanks__text {
		font-size: 13px;
		line-height: 21px;
	}

	.cstl-thanks__text:last-of-type {
		margin-bottom: 28px;
	}

	.cstl-thanks__button {
		width: 100%;
	}
}


/* =========================================================================
 * ETAP 2 - Dashboard "Moje konto"
 * Figma: wezly 33:2 (desktop 1440) i 123:5001 (mobile 390).
 *
 * ODSTEPSTWO OD KADRU: Figma ma na tym ekranie wlasny padding poziomy
 * (64 px desktop, 20 px mobile). My go NIE powtarzamy, bo strona 9 renderuje
 * sie w kontenerze Bricksa, ktory juz ma swoje marginesy - podwojenie
 * zwezaloby tresc. Odstepy pionowe sa z kadru co do piksela.
 * ====================================================================== */

.cstl-dash {
	--cstl-ink: #0a0a0a;
	--cstl-muted: #545454;
	--cstl-muted-soft: #666;
	--cstl-hairline: #f1f0ef;
	--cstl-font-heading: "Cormorant Garamond", serif;
	--cstl-font-body: "Lato", sans-serif;

	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	row-gap: 48px;
	column-gap: 20px;
	padding-block: 64px 96px;
}

.cstl-dash > .cstl-dash__head {
	grid-column: 1;
	grid-row: 1;
}

.cstl-dash > .cstl-dash__logout {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
}

.cstl-dash > .cstl-dash__tiles,
.cstl-dash > .cstl-dash__banner,
.cstl-dash > .cstl-dash__help {
	grid-column: 1 / -1;
}


/* Naglowek --------------------------------------------------------------- */

.cstl-dash__title {
	margin: 0 0 12px;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-heading);
	font-weight: 600;
	font-size: 40px;
	line-height: 50px;
}

.cstl-dash__greet {
	margin: 0 0 4px;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
}

.cstl-dash__greet-sub {
	margin: 0;
	color: var(--cstl-muted-soft);
	font-family: var(--cstl-font-body);
	font-size: 14px;
	line-height: 22px;
}

.woocommerce-account .cstl-dash .cstl-dash__logout {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-top: 4px;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 700;
	font-size: 12.8px;
	line-height: 12.8px;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	text-decoration: none;
}

.cstl-dash__logout-icon {
	display: block;
	flex: none;
	width: 32px;
	height: 32px;
}

.cstl-dash__logout-icon svg,
.cstl-dash__tile-icon svg,
.cstl-dash__tile-arrow svg,
.cstl-dash__help-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}


/* Kafelki ---------------------------------------------------------------- */

/* Kadr 118-9002: siatka 3 x 2, karty 421,33 px w odstepie 24 px w obu osiach.
   Siatka, a nie flex z zawijaniem - przy pieciu kafelkach (Klub korzysci jest
   na razie wylaczony w PHP) ostatni rzad ma zostac dwoma kolumnami tej samej
   szerokosci, a nie rozciagnac sie na polowe ekranu. */
.cstl-dash__tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

.woocommerce-account .cstl-dash .cstl-dash__tile {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 20px;
	padding: 36px;
	border: 0.5px solid var(--cstl-ink);
	background: #fff;
	color: var(--cstl-ink);
	text-decoration: none;
	transition: background-color 0.15s ease;
}

/* Figma nie definiuje stanu hover kafelka - delikatne tlo dolozone, zeby
   element klikalny w ogole reagowal na wskaznik. */
.woocommerce-account .cstl-dash .cstl-dash__tile:hover,
.woocommerce-account .cstl-dash .cstl-dash__tile:focus-visible {
	background: #f9fafa;
}

.cstl-dash__tile-icon {
	display: block;
	flex: none;
	width: 36px;
	height: 36px;
	align-self: flex-start;
}

.cstl-dash__tile-text {
	display: flex;
	flex: 1 0 0;
	min-width: 0;
	flex-direction: column;
	gap: 4px;
}

.cstl-dash__tile-name {
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 700;
	font-size: 17px;
	line-height: 24px;
}

.cstl-dash__tile-desc {
	color: var(--cstl-muted);
	font-family: var(--cstl-font-body);
	font-size: 13.5px;
	line-height: 20px;
}

.cstl-dash__tile-arrow {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
}


/* Baner zamowien --------------------------------------------------------- */

.cstl-dash__banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 280px;
	padding: 56px;
	overflow: hidden;
	background-image: var(--cstl-banner-image);
	background-position: center;
	background-size: cover;
}

/* Gradient z kadru: bialy 0.9 -> 0.8 na 30% -> przezroczysty. Bez niego
   ciemniejsze partie zdjecia zjadaja tekst. */
.cstl-dash__banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 30.096%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
}

.cstl-dash__banner-text {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	max-width: 520px;
}

.cstl-dash__banner-title {
	margin: 0;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-heading);
	font-weight: 600;
	font-size: 26px;
	line-height: 34px;
}

.cstl-dash__banner-desc {
	margin: 0;
	color: var(--cstl-muted);
	font-family: var(--cstl-font-body);
	font-size: 14px;
	line-height: 22px;
}

/* Kadr: 12 px miedzy naglowkiem a tekstem, 24 px od tekstu do przycisku. */
.woocommerce-account .cstl-dash .cstl-dash__banner-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 49px;
	margin-top: 12px;
	padding: 14px 24px;
	border: 1px solid var(--cstl-ink);
	border-radius: 0;
	background: transparent;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce-account .cstl-dash .cstl-dash__banner-cta:hover,
.woocommerce-account .cstl-dash .cstl-dash__banner-cta:focus-visible {
	background: var(--cstl-ink);
	color: #fff;
}


/* Sekcja pomocy ---------------------------------------------------------- */

.cstl-dash__help {
	display: flex;
	align-items: center;
	gap: 64px;
	padding: 32px 0 32px 28px;
	border-top: 1px solid var(--cstl-hairline);
	border-bottom: 1px solid var(--cstl-hairline);
}

.cstl-dash__help-intro {
	display: flex;
	flex: none;
	align-items: center;
	gap: 14px;
	width: 320px;
}

.cstl-dash__help-icon {
	display: block;
	flex: none;
	width: 36px;
	height: 36px;
}

.cstl-dash__help-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cstl-dash__help-title {
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 600;
	font-size: 18px;
	line-height: 28px;
}

.woocommerce-account .cstl-dash .cstl-dash__help-link {
	color: var(--cstl-muted);
	font-family: var(--cstl-font-body);
	font-size: 13.5px;
	line-height: 20px;
	text-decoration: none;
}

.woocommerce-account .cstl-dash .cstl-dash__help-link:hover {
	text-decoration: underline;
}

.cstl-dash__help-contacts {
	display: flex;
	gap: 64px;
}

.cstl-dash__help-contact {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.woocommerce-account .cstl-dash .cstl-dash__help-value {
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 28px;
	text-decoration: none;
}

.woocommerce-account .cstl-dash .cstl-dash__help-value:hover {
	text-decoration: underline;
}

.cstl-dash__help-contact:first-child .cstl-dash__help-value {
	letter-spacing: 0.45px;
}

.cstl-dash__help-note {
	color: var(--cstl-muted);
	font-family: var(--cstl-font-body);
	font-size: 14px;
	line-height: 20px;
}


/* Dashboard nie ma sidebara - w kadrze nawigacje zastepuja kafelki.
   WooCommerce sam wystawia body.woocommerce-dashboard
   (wc-template-functions.php:361), wiec wystarczy jedna regula, bez PHP. */
body.woocommerce-dashboard .woocommerce-MyAccount-navigation {
	display: none;
}


/* Tablet: kafelki w dwoch kolumnach -------------------------------------- */

@media (max-width: 1199px) {

	.cstl-dash__tiles {
		grid-template-columns: repeat(2, 1fr);
	}

	.cstl-dash__help {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
}


/* Mobile - kadr 390 px --------------------------------------------------- */

@media (max-width: 767px) {

	.cstl-dash {
		grid-template-columns: 1fr;
		row-gap: 32px;
		padding-block: 24px 40px;
	}

	/* Kadr mobilny stawia "Wyloguj sie" na samym dole. Auto-rozmieszczenie
	   siatki respektuje "order", wiec wystarczy zdjac jawne pozycje. */
	.cstl-dash > .cstl-dash__head,
	.cstl-dash > .cstl-dash__logout {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
	}

	.cstl-dash > .cstl-dash__logout {
		order: 1;
	}

	.cstl-dash__tiles {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.woocommerce-account .cstl-dash .cstl-dash__tile {
		gap: 18px;
		padding: 28px;
	}

	.cstl-dash__tile-icon {
		width: 28px;
		height: 28px;
	}

	.cstl-dash__banner {
		min-height: 0;
		padding: 24px;
	}

	.cstl-dash__banner-text {
		max-width: 193px;
	}

	.cstl-dash__help {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 32px 28px;
	}

	.cstl-dash__help-intro {
		width: auto;
	}

	.cstl-dash__help-contacts {
		flex-direction: column;
		gap: 20px;
	}
}


/* =========================================================================
 * NEUTRALIZACJA STAREGO CUSTOM CSS ZE STRONY 9
 *
 * Strona "Moje konto" (post 9) ma wlasny arkusz w ustawieniach Bricksa
 * (_bricks_page_settings -> customCss), generowany do
 * "uploads/bricks/css/post-9.min.css". Napisano go pod STARY, surowy wyglad
 * konta i laduje sie PO tym pliku, wiec walczy z kazdym ekranem redesignu:
 *
 *   .woocommerce-MyAccount-content *:not(...)   text-align: center
 *   .woocommerce-Addresses *                    text-align: center !important
 *   .woocommerce-MyAccount-navigation-link--customer-logout a   color: red !important
 *   .woocommerce-EditAccountForm label          uppercase, font-weight 900
 *   .woocommerce-MyAccount-content:has(.woocommerce-EditAccountForm)  max-width 920px
 *   .button.view, .edit                         wlasne obwodki i rozmiary
 *
 * CELOWO GO NIE KASUJEMY. To cudzy kod w bazie, a jego usuniecie jest zmiana
 * w Bricksie - nie jedzie pipelinem i wymagaloby powtorki na trzech
 * srodowiskach. Zamiast tego zdejmujemy jego skutki WYLACZNIE wewnatrz naszych
 * kontenerow. Poza nimi (gdyby gdzies zostal stary ekran) dziala jak dzialal.
 *
 * DOCELOWO: po akceptacji redesignu ten arkusz w ustawieniach strony 9 jest
 * juz niepotrzebny w calosci i powinien zniknac - wtedy caly ten blok tez.
 *
 * "!important" wystepuje tu tylko tam, gdzie oryginal go uzywa; inaczej nie da
 * sie go przebic zadna specyficznoscia.
 * ====================================================================== */

.woocommerce-account .woocommerce-MyAccount-content .cstl-dash,
.woocommerce-account .woocommerce-MyAccount-content .cstl-dash *,
.woocommerce-account .woocommerce-MyAccount-content .cstl-orders,
.woocommerce-account .woocommerce-MyAccount-content .cstl-orders *,
.woocommerce-account .woocommerce-MyAccount-content .cstl-addr,
.woocommerce-account .woocommerce-MyAccount-content .cstl-addr *,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm *,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields *,
.woocommerce-account .woocommerce-MyAccount-content .cstl-page-head,
.woocommerce-account .woocommerce-MyAccount-content .cstl-page-head * {
	text-align: left;
}

/* Regule ".woocommerce-Addresses * { text-align: center !important }" omijamy
   inaczej niz reszte: nasz szablon adresow po prostu NIE wypisuje klasy
   "woocommerce-Addresses" na kontenerze kart, wiec stary selektor nie ma sie
   czego zaczepic. Klasa ".woocommerce-Address" na pojedynczej karcie zostaje,
   bo stary CSS jej samodzielnie nie dotyka. */

/* Pozycja "Wyloguj sie" w sidebarze ma byc w kolorze tekstu, nie czerwona. */
.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: inherit !important;
}

/* Etykiety w "Dane konta" - kadr ma zwykly tekst, nie wersaliki o wadze 900. */
.woocommerce-account .woocommerce-EditAccountForm label {
	font-weight: 400;
	text-transform: none;
}

/* Szerokosc formularza danych konta ustawiamy sami, w ukladzie z sidebarem. */
.woocommerce-account .woocommerce-MyAccount-content:has(.woocommerce-EditAccountForm) {
	max-width: none;
	align-self: stretch;
}


/* =========================================================================
 * ETAP 3 - Podstrony konta: sidebar, zamowienia, adresy, dane konta
 * Figma: 84:468 (zamowienia + sidebar), 94:2322 (adresy), 94:2129 (dane konta),
 *        112:2 i 103:21 (mobile: zakladki i karty zamowien).
 * ====================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .cstl-nav__logout-mobile {
	--cstl-ink: #0a0a0a;
	--cstl-muted: #666;
	--cstl-hairline: #f1f0ef;
	--cstl-border: #eaebf0;
	--cstl-field: #99999e;
	--cstl-surface: #f9fafa;
	--cstl-font-heading: "Cormorant Garamond", serif;
	--cstl-font-body: "Lato", sans-serif;
}


/* Uklad dwukolumnowy ----------------------------------------------------
 * "my-account.php" renderuje nawigacje i tresc jako RODZENSTWO wewnatrz
 * kontenera ".woocommerce" elementu Bricksa, wiec wystarczy flex na rodzicu -
 * bez nadpisywania szablonu. */

/* ":not(#brx-content)" nie jest ozdobnikiem. Element konta na stronie 9 ma
   wlasny styl Bricksa o selektorze
   ".user-content__woocommerce-account-page.brxe-woocommerce-account-page .woocommerce:not(#brx-content)"
   z "flex-direction: column" - a ":not(#id)" daje temu selektorowi wage
   IDENTYFIKATORA (1,3,0). Bez powtorzenia tej sztuczki po naszej stronie
   sidebar nigdy nie stanie obok tresci. Powtarzamy wzorzec zamiast siegac po
   "!important", zeby dalo sie to nadal nadpisac normalna regula. */
.woocommerce-account .brxe-woocommerce-account-page > .woocommerce:not(#brx-content) {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 80px;
}

.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 0 0;
	min-width: 0;
	padding-block: 40px;
}


/* Sidebar ---------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: none;
	/* Bricks ustawia tu "min-width: 25%", co rozpycha sidebar do ~325 px
	   niezaleznie od "width". Zerujemy, zeby 280 px z kadru mialo znaczenie. */
	min-width: 0;
	width: 280px;
	padding: 48px 32px 40px;
	border-right: 1px solid var(--cstl-hairline);
}

body.woocommerce-account .brxe-woocommerce-account-page .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-account .brxe-woocommerce-account-page .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
	border: 0;
}

body.woocommerce-account .brxe-woocommerce-account-page .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	/* Element konta na stronie 9 rysuje pod kazda pozycja kreske
	   ("border-bottom-width: 2px"); kadr jej nie ma. */
	border-bottom: 0;
	border-left: 2px solid transparent;
	color: var(--cstl-muted);
	font-family: var(--cstl-font-body);
	font-weight: 400;
	font-size: 14.5px;
	line-height: normal;
	text-decoration: none;
}

body.woocommerce-account .brxe-woocommerce-account-page .woocommerce-MyAccount-navigation li a .cstl-nav__icon {
	display: flex;
	flex: none;
	width: 16px;
	height: 16px;
}

body.woocommerce-account .brxe-woocommerce-account-page .woocommerce-MyAccount-navigation li a .cstl-nav__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

body.woocommerce-account .brxe-woocommerce-account-page .woocommerce-MyAccount-navigation li.is-active a {
	border-left-color: var(--cstl-ink);
	background: var(--cstl-surface);
	color: var(--cstl-ink);
	font-weight: 700;
}

/* "Wyloguj sie" stoi w kadrze na dole, oddzielone kreska. "margin-top: auto"
   dociska je do spodu bez zadnej zmiany w HTML-u. */
/* Kreska nad wylogowaniem przegrywala wczesniej z regula
   "...navigation li { border: 0 }" (0,3,1). Ten selektor ma (0,4,0). */
body.woocommerce-account .brxe-woocommerce-account-page .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: auto;
	border-top: 1px solid var(--cstl-hairline);
}

body.woocommerce-account .brxe-woocommerce-account-page .woocommerce-MyAccount-navigation-link--customer-logout a {
	gap: 12px;
	padding: 18px 16px 14px;
	border-left-color: transparent;
	font-weight: 600;
	font-size: 12.8px;
	line-height: 12.8px;
	letter-spacing: 0.2px;
	text-transform: uppercase;
}

/* Regula ogolna ikon ma (0,4,3) - ta musi miec wiecej, stad dolozona klasa
   nawigacji: (0,5,2) wygrywa liczba klas. */
body.woocommerce-account .brxe-woocommerce-account-page .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a .cstl-nav__icon {
	width: 32px;
	height: 32px;
}


/* Mobilne "Wyloguj sie" - na desktopie nie istnieje, pozycja siedzi
   w sidebarze. Patrz komentarz w myaccount/navigation.php. */
.cstl-nav__logout-mobile {
	display: none;
}


/* Naglowek podstrony ----------------------------------------------------- */

.cstl-page-head {
	margin-bottom: 40px;
}

.cstl-page-head__title {
	margin: 0 0 4px;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-heading);
	font-weight: 600;
	font-size: 32px;
	line-height: 50px;
}

.cstl-page-head__desc {
	margin: 0;
	color: var(--cstl-muted);
	font-family: var(--cstl-font-body);
	font-size: 14px;
	line-height: 22px;
}

/* Rdzen drukuje wlasny tytul w formularzu adresu; wyciszamy go filtrem,
   a pusty znacznik chowamy tutaj. */
.woocommerce-account .woocommerce-MyAccount-content form > h2:empty {
	display: none;
}


/* Zamowienia - tabela ---------------------------------------------------- */

.woocommerce-account .cstl-orders__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: auto;
}

.woocommerce-account .cstl-orders__table thead th {
	padding: 0 16px 12px;
	border: 0;
	border-bottom: 1px solid var(--cstl-border);
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.2px;
}

.woocommerce-account .cstl-orders__table tbody td {
	padding: 20px 16px;
	border: 0;
	border-top: 0.6px solid var(--cstl-hairline);
	vertical-align: middle;
	font-family: var(--cstl-font-body);
	font-size: 16px;
}

.woocommerce-account .cstl-orders__table tbody tr:last-child td {
	border-bottom: 0.6px solid var(--cstl-hairline);
}

/* Szerokosci kolumn z kadru; ostatnia (akcje) bierze reszte. */
.woocommerce-account .cstl-orders__table .woocommerce-orders-table__header-order-number,
.woocommerce-account .cstl-orders__table .woocommerce-orders-table__cell-order-number {
	width: 140px;
}

.woocommerce-account .cstl-orders__table .woocommerce-orders-table__header-order-date,
.woocommerce-account .cstl-orders__table .woocommerce-orders-table__cell-order-date {
	width: 140px;
	color: var(--cstl-muted);
}

.woocommerce-account .cstl-orders__table .woocommerce-orders-table__header-order-status,
.woocommerce-account .cstl-orders__table .woocommerce-orders-table__cell-order-status {
	width: 220px;
}

.woocommerce-account .cstl-orders__table .woocommerce-orders-table__header-order-total,
.woocommerce-account .cstl-orders__table .woocommerce-orders-table__cell-order-total {
	width: 230px;
}

.woocommerce-account .cstl-orders__number {
	color: var(--cstl-ink);
	text-decoration: none;
}

.cstl-orders__total {
	display: block;
	color: var(--cstl-ink);
	font-size: 16px;
}

.cstl-orders__items {
	display: block;
	margin-top: 4px;
	color: rgba(10, 10, 10, 0.6);
	font-size: 14px;
}


/* Badge statusu ---------------------------------------------------------- */

.cstl-orders__badge {
	display: inline-block;
	padding: 4px 10px;
	background: var(--cstl-hairline);
	color: var(--cstl-muted);
	font-family: var(--cstl-font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: normal;
}

/* Oczekujace na platnosc: biale tlo z obwodka. */
.cstl-orders__badge--pending {
	border: 1px solid var(--cstl-hairline);
	background: #fff;
	color: var(--cstl-ink);
}

/* Nieudane: wypelnione czarne. */
.cstl-orders__badge--failed {
	background: var(--cstl-ink);
	color: #fff;
}


/* Akcje w wierszu -------------------------------------------------------- */

.woocommerce-account .cstl-orders__table .woocommerce-orders-table__cell-order-actions {
	display: table-cell;
	white-space: nowrap;
}

.woocommerce-account .cstl-orders__action {
	display: inline-block;
	margin-right: 16px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce-account .cstl-orders__action:last-child {
	margin-right: 0;
}

.woocommerce-account .cstl-orders__action--pay {
	padding: 8px 16px;
	background: var(--cstl-ink);
	color: #fff;
	font-weight: 700;
}

/* ZOBACZ i ANULUJ to odnosniki tekstowe, ale niosa klasy "button" i
   "woocommerce-button" (wymaga ich wc_get_account_orders_actions), wiec motyw
   traktuje je jak przyciski i na hover zalewa czarnym prostokatem. Podbita
   specyficznosc o kontener, bo regula motywu tez jest dwuczlonowa. */
.woocommerce-account .woocommerce-MyAccount-content .cstl-orders__action:hover,
.woocommerce-account .woocommerce-MyAccount-content .cstl-orders__action:focus {
	border: 0;
	background: none;
	color: var(--cstl-ink);
	text-decoration: underline;
}

.woocommerce-account .woocommerce-MyAccount-content .cstl-orders__action--pay:hover,
.woocommerce-account .woocommerce-MyAccount-content .cstl-orders__action--pay:focus {
	background: #333;
	color: #fff;
	text-decoration: none;
}


/* Paginacja -------------------------------------------------------------- */

.woocommerce-account .cstl-orders__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: 32px;
	border: 0;
}

.woocommerce-account .cstl-orders__page-prev,
.woocommerce-account .cstl-orders__page-next {
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}

.cstl-orders__page-prev--off,
.cstl-orders__page-next--off {
	opacity: 0.35;
}

.cstl-orders__pages {
	display: flex;
	align-items: center;
	gap: 12px;
}

.woocommerce-account .cstl-orders__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	border: 0.6px solid transparent;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
}

.woocommerce-account .cstl-orders__page--current {
	border-color: var(--cstl-ink);
	font-weight: 700;
}


/* Pusta lista zamowien --------------------------------------------------- */

.cstl-orders__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.cstl-orders__empty-text {
	margin: 0;
	color: var(--cstl-muted);
	font-family: var(--cstl-font-body);
	font-size: 16px;
}

.woocommerce-account .cstl-orders__empty-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 49px;
	padding: 14px 24px;
	border: 1px solid var(--cstl-ink);
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
}


/* Adresy ----------------------------------------------------------------- */

.cstl-addr__cards {
	display: flex;
	align-items: stretch;
	gap: 32px;
}

.cstl-addr__card {
	display: flex;
	flex: 1 0 0;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	padding: 48px;
	border: 1px solid var(--cstl-hairline);
	background: #fff;
	text-align: center;
}

.cstl-addr__card-title {
	margin: 0;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: normal;
	letter-spacing: 0.2px;
}

/* Blok, NIE flex. Adres przychodzi z Woo jako jeden ciag rozdzielony <br>,
   a "::first-line" (pogrubiona linia z imieniem w kadrze) dziala wylacznie
   na kontenerach blokowych - przy "display: flex" jest po cichu ignorowane.
   Odstep miedzy liniami robi wiec line-height, nie gap: 15 px pisma + 6 px
   przerwy z kadru daje skok 24 px. */
.woocommerce-account .cstl-addr__body {
	display: block;
	width: 100%;
	margin: 0;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-size: 15px;
	font-style: normal;
	line-height: 24px;
	text-align: left;
}

/* Pierwsza linia adresu to imie i nazwisko - w kadrze pogrubione. Adres
   przychodzi z Woo jako jeden blok rozdzielony <br>, wiec nie da sie go
   otoczyc znacznikiem; "::first-line" jest tu dokladnie tym, do czego sluzy. */
.woocommerce-account .cstl-addr__body::first-line {
	font-weight: 700;
	font-size: 16px;
}

.cstl-addr__pin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 36px;
	background: var(--cstl-surface);
}

.cstl-addr__pin svg {
	display: block;
	width: 40px;
	height: 40px;
}

.cstl-addr__empty {
	margin: 0;
	color: var(--cstl-muted);
	font-family: var(--cstl-font-body);
	font-size: 15px;
}

.woocommerce-account .cstl-addr__edit {
	align-self: flex-start;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: underline;
}

.woocommerce-account .cstl-addr__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 14px 24px;
	border: 1px solid var(--cstl-ink);
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce-account .cstl-addr__add:hover,
.woocommerce-account .cstl-orders__empty-cta:hover {
	background: var(--cstl-ink);
	color: #fff;
}


/* Formularze konta i adresu ---------------------------------------------- */

.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields {
	max-width: 600px;
}

.cstl-form__legend {
	display: block;
	margin-bottom: 28px;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.5px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .form-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 28px;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm label,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields label {
	margin: 0;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-size: 14px;
	line-height: normal;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm input.input-text,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields input.input-text,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .select2-selection,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields select {
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 11px 15px;
	border: 1px solid var(--cstl-field);
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-size: 13px;
	line-height: normal;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm span.description,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm em {
	display: block;
	margin-top: 8px;
	color: var(--cstl-muted);
	font-family: var(--cstl-font-body);
	font-size: 12.5px;
	font-style: normal;
	line-height: normal;
}

/* Dwie kolumny dla par pol (imie/nazwisko, kod/miasto). Woo nadaje im
   klasy "form-row-first" i "form-row-last" - korzystamy z nich zamiast
   przebudowywac szablon. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm > *,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > * {
	grid-column: 1 / -1;
}

/* WooCommerce daje tym wierszom "width: 47%" i "float: left" - w ukladzie
   dwukolumnowym z float na siatce to oznacza polowe polowy (zmierzone 142 px
   zamiast 290 px). Zerujemy oba, szerokosc ustala juz sama kolumna siatki. */
.woocommerce-account .woocommerce-MyAccount-content .form-row-first,
.woocommerce-account .woocommerce-MyAccount-content .form-row-last,
.woocommerce-account .woocommerce-MyAccount-content .form-row-wide {
	width: 100%;
	float: none;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row-first {
	grid-column: 1;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row-last {
	grid-column: 2;
}


/* =========================================================================
 * Formularz adresu - kadr 114:3798 ("Dodaj Adres Content")
 *
 * Osobna sekcja, a nie zmiana regul wyzej: te same selektory obsluguja
 * "Dane konta", ktory ma WLASNY kadr i inne wartosci (etykieta po lewej,
 * karta hasla, obwodka #d9d9d9 na fieldsecie). Podniesienie tam rozmiarow
 * "przy okazji" rozjechaloby zaakceptowany juz ekran, wiec adres dostaje
 * wlasny komplet nadpisan, wprost pod nazwa kontenera Woo.
 *
 * Rytm pionowy kadru: title-block -> selektor -> formularz -> akcje, co 28 px.
 * ====================================================================== */

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields {
	max-width: 612px;
}

/* Kadr: tytul -> opis 8 px, blok -> selektor 28 px. Reszta ekranow konta ma
   wlasne, zaakceptowane odstepy, wiec zmiana idzie przez modyfikator. */
.woocommerce-account .woocommerce-MyAccount-content .cstl-page-head--addr {
	margin-bottom: 28px;
}

.woocommerce-account .woocommerce-MyAccount-content .cstl-page-head--addr .cstl-page-head__title {
	margin-bottom: 8px;
	line-height: normal;
}

/* Wskaznik typu adresu ("Adres rozliczeniowy" + chevron) ------------------ */

.woocommerce-account .cstl-addr-switch {
	margin: 0 0 28px;
}

.woocommerce-account .cstl-addr-switch__current,
.woocommerce-account .cstl-addr-switch--static {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	cursor: pointer;
	list-style: none;
}

/* Safari rysuje wlasny trojkat na <summary> - chevron mamy swoj. */
.woocommerce-account .cstl-addr-switch__current::-webkit-details-marker {
	display: none;
}

.woocommerce-account .cstl-addr-switch__label {
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 700;
	font-size: 15px;
	line-height: normal;
}

.woocommerce-account .cstl-addr-switch__chevron {
	display: block;
	flex: none;
	width: 16px;
	height: 16px;
	line-height: 0;
	transition: transform 0.15s ease;
}

.woocommerce-account .cstl-addr-switch__chevron svg {
	display: block;
	width: 100%;
	height: 100%;
}

.woocommerce-account .cstl-addr-switch[open] .cstl-addr-switch__chevron {
	transform: rotate(180deg);
}

.woocommerce-account .cstl-addr-switch__list {
	margin: 8px 0 0;
	padding: 4px 0;
	width: max-content;
	min-width: 200px;
	border: 1px solid var(--cstl-hairline);
	background: #fff;
	list-style: none;
}

.woocommerce-account .cstl-addr-switch__list li {
	margin: 0;
	list-style: none;
}

.woocommerce-account .cstl-addr-switch__list a {
	display: block;
	padding: 8px 16px;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-size: 14px;
	text-decoration: none;
}

.woocommerce-account .cstl-addr-switch__list a:hover,
.woocommerce-account .cstl-addr-switch__list a[aria-current="true"] {
	background: var(--cstl-surface);
}

/* Pola -------------------------------------------------------------------
 * FLEX, nie siatka. Kadr ma dwa wiersze dwukolumnowe o ROZNYM podziale:
 * imie/nazwisko po polowie, a nizej kod pocztowy 186 px + miasto na reszte.
 * Jedna siatka dwukolumnowa nie wyrazi obu naraz (probowane: przy
 * "186px 1fr" imie wchodzi w kolumne 186 px i nachodzi na nazwisko).
 * Flex z zawijaniem odwzorowuje auto-layout Figmy wprost: kazde pole jest
 * domyslnie calym wierszem, a pary dostaja wlasne bazy. */

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > * {
	flex: 0 0 100%;
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .form-row {
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields label {
	font-size: 13px;
}

/* Kadr: wysokosc pola 46 px LACZNIE z obwodka, wypelnienie boczne 16 px.
   Wypelnienia pionowego nie przenosimy wprost (14 px z kadru + linia 18 px
   dalyby 48), bo w Figmie obwodka nie powieksza ramki, a w CSS powieksza.
   Stala wysokosc + srodkowanie wlasne pola daje ten sam obraz. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields input.input-text,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .select2-selection,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields select {
	min-height: 46px;
	height: 46px;
	padding: 0 16px;
	border-color: #d9d9d9;
	font-size: 15px;
}

/* Pole "Kraj / region" -----------------------------------------------------
 * PULAPKA: to NIE jest widoczny <select>. WooCommerce podmienia go na
 * selectWoo (select2) - natywne pole zostaje w DOM-ie z klasa
 * "select2-hidden-accessible" i szerokoscia 1 px, a widac kontrolke
 * ".select2-selection--single" z wlasna strzalka w <b>. Stylowanie samego
 * <select> nie daje wiec NIC (sprawdzone: tlo z chevronem bylo ustawione,
 * a na ekranie dalej byl szary trojkat). Rozstrzyga document.elementFromPoint.
 *
 * Chevron idzie tlem, a nie inline jak reszta ikon w tej sekcji - do wnetrza
 * kontrolki select2 nie da sie wstawic wlasnego znacznika bez JS-a. Zrodlo
 * to ten sam plik "img/chevron.svg" przepisany na data URI. */

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .select2-container--default .select2-selection--single {
	height: 46px;
	border: 1px solid #d9d9d9;
	border-radius: 0;
	background: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 40px 0 16px;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-size: 15px;
	line-height: 44px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 16px;
	width: 16px;
	height: 46px;
	background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%230A0A0A' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
}

/* Wlasny trojkat select2 - zastapiony chevronem z kadru. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__arrow b {
	display: none;
}

@media (min-width: 992px) {

	/* Imie + nazwisko: po polowie wiersza. */
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .form-row-first,
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .form-row-last {
		flex: 1 1 0;
		min-width: 0;
	}

	/* Kod pocztowy: stale 186 px z kadru. Miasto bierze reszte wiersza. */
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields #billing_postcode_field,
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields #shipping_postcode_field {
		flex: 0 0 186px;
	}
}

/* Wiersz akcji ----------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-content .cstl-form__actions {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 28px 0 0;
}

.woocommerce-account .woocommerce-MyAccount-content .cstl-form__actions .cstl-form__cancel {
	margin-top: 0;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Kadr: wypelnienie 16/24, pismo Lato Bold 13 px, interlinia normalna.
   Wysokosc wynika z tresci (48 px), wiec zdejmujemy stale 49 px z reguly
   wspolnej dla przyciskow formularzy. Obwodka schodzi do zera - w kadrze
   przycisk jest samym wypelnieniem, a 1 px w kolorze tla i tak nic nie
   wnosil poza dwoma pikselami wysokosci. */
.woocommerce-account .woocommerce-MyAccount-content .cstl-form__actions button[name="save_address"] {
	height: auto;
	/* Motyw daje przyciskom "margin-top: 15px" - w wierszu akcji rozjezdza
	   srodkowanie wzgledem "Anuluj" o 7 px. */
	margin: 0;
	padding: 16px 24px;
	border: 0;
	font-weight: 700;
	font-size: 13px;
	line-height: normal;
}


/* Karta "Zmiana hasla" --------------------------------------------------- */

.woocommerce-account .woocommerce-EditAccountForm fieldset {
	margin: 0 0 28px;
	padding: 28px;
	border: 1px solid #d9d9d9;
}

/* Domyslnie <legend> siedzi NA linii obramowania. Kadr ma go w srodku karty,
   nad polami - "float: left" wyjmuje go z tej pozycji i stawia normalnie. */
.woocommerce-account .woocommerce-EditAccountForm fieldset legend {
	float: left;
	width: 100%;
	margin: 0 0 24px;
	padding: 0;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* W kadrze etykieta stoi PO LEWEJ od pola, nie nad nim. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm fieldset .form-row {
	display: grid;
	grid-template-columns: 220px 1fr;
	align-items: center;
	gap: 24px;
	margin-bottom: 24px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm fieldset .form-row:last-child {
	margin-bottom: 0;
}

.woocommerce-account .woocommerce-EditAccountForm fieldset .cstl-acc__password {
	width: 100%;
}

.woocommerce-account .woocommerce-EditAccountForm fieldset .cstl-acc__password-toggle {
	height: 100%;
	width: 44px;
}


/* Przyciski formularzy --------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields ~ p button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content form button[name="save_address"],
.woocommerce-account .woocommerce-MyAccount-content form button[name="save_account_details"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 49px;
	padding: 14px 24px;
	border: 1px solid var(--cstl-ink);
	border-radius: 0;
	background: var(--cstl-ink);
	color: #fff;
	font-family: var(--cstl-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.woocommerce-account .cstl-form__cancel {
	display: block;
	margin-top: 20px;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-size: 14px;
	text-decoration: underline;
}


/* Zakladki mobilne ------------------------------------------------------- */

@media (max-width: 991px) {

	.woocommerce-account .brxe-woocommerce-account-page > .woocommerce:not(#brx-content) {
		flex-direction: column;
		gap: 0;
	}

	/* Sidebar staje sie poziomym paskiem zakladek (kadr 112:2). */
	.woocommerce-account .woocommerce-MyAccount-navigation {
		width: auto;
		padding: 0 20px;
		border-right: 0;
		border-bottom: 1px solid var(--cstl-hairline);
		overflow-x: auto;
		/* Pasek ma cztery pozycje (kadr ma trzy - bez wylogowania), wiec na
		   390 px sie nie miesci i musi sie przewijac. Chowamy sam suwak:
		   przewijanie palcem zostaje, a kadr nie zyskuje szarej belki. */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation::-webkit-scrollbar {
		display: none;
	}

	body.woocommerce-account .brxe-woocommerce-account-page .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: nowrap;
		height: auto;
	}

	body.woocommerce-account .brxe-woocommerce-account-page .woocommerce-MyAccount-navigation li a {
		gap: 6px;
		padding: 16px;
		border-left: 0;
		border-bottom: 1px solid transparent;
		font-size: 14px;
		white-space: nowrap;
	}

	body.woocommerce-account .brxe-woocommerce-account-page .woocommerce-MyAccount-navigation li.is-active a {
		border-left: 0;
		border-bottom-color: var(--cstl-ink);
		background: none;
	}

	/* Kadr 112:2 ma w pasku TRZY zakladki - bez wylogowania. Zdejmujemy je
	   stad (przy okazji pasek przestaje sie przewijac) i pokazujemy pod trescia. */
	body.woocommerce-account .brxe-woocommerce-account-page .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout {
		display: none;
	}

	.woocommerce-account .cstl-nav__logout-mobile {
		display: block;
		/* Kontener ".woocommerce" jest tu kolumna flex, a ten blok stoi w DOM
		   przed trescia - "order" przesuwa go na koniec. */
		order: 1;
		/* Bez marginesu: tresc ma juz wlasne 40 px paddingu na dole, wiec
		   kreska nie potrzebuje kolejnego odstepu nad soba. */
		margin-top: 0;
		padding: 24px 20px 40px;
		border-top: 1px solid var(--cstl-hairline);
	}

	/* Na dashboardzie wylogowanie jest juz czescia szablonu (".cstl-dash__logout"
	   na koncu siatki, kadr 123:5159), a nawigacja jest ukryta - bez tego
	   odnosnik pojawilby sie dwa razy. */
	body.woocommerce-dashboard .cstl-nav__logout-mobile {
		display: none;
	}

	.woocommerce-account .cstl-nav__logout-mobile a {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		color: var(--cstl-ink);
		font-family: var(--cstl-font-body);
		font-weight: 700;
		font-size: 12.8px;
		line-height: 12.8px;
		letter-spacing: 0.2px;
		text-transform: uppercase;
		text-decoration: none;
	}

	.woocommerce-account .cstl-nav__logout-mobile .cstl-nav__icon {
		display: flex;
		flex: none;
		width: 32px;
		height: 32px;
	}

	.woocommerce-account .cstl-nav__logout-mobile .cstl-nav__icon svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		padding-block: 24px 40px;
	}

	.cstl-addr__cards {
		flex-direction: column;
		gap: 20px;
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm,
	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	.woocommerce-account .woocommerce-MyAccount-content .form-row-first,
	.woocommerce-account .woocommerce-MyAccount-content .form-row-last {
		grid-column: 1;
	}

	.woocommerce-account .woocommerce-MyAccount-content .woocommerce-EditAccountForm fieldset .form-row {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 8px;
	}

	/* Kadr 115:3798 ("Dodaj Adres - Mobile"): ZAPISZ ADRES na cala szerokosc
	   kolumny, ANULUJ wysrodkowany POD nim. Desktop (kadr 114:3798) trzyma oba
	   w jednej linii, wiec kierunek zmieniamy tylko tutaj.
	   Prog 991 px, a nie 767: powyzej niego formularz i tak jest juz
	   jednokolumnowy, wiec przycisk rowny polom to ta sama zasada. */
	.woocommerce-account .woocommerce-MyAccount-content .cstl-form__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.woocommerce-account .woocommerce-MyAccount-content form button[name="save_address"] {
		width: 100%;
	}

	/* "body" z rozmyslem: nizej w pliku stoi regula zdejmujaca centrowanie
	   po starym CSS-ie strony 9 (".woocommerce-MyAccount-content
	   .cstl-form__cancel { text-align: left }"). Ma te sama waga i jest
	   pozniej, wiec bez podniesienia specyficznosci wygrywalaby z ta. */
	body.woocommerce-account .woocommerce-MyAccount-content .cstl-form__cancel {
		text-align: center;
	}

}


/* Zamowienia jako karty na mobile ---------------------------------------
 * Kadr 103:21 to dokladnie ta sama tresc, tylko ulozona pionowo z etykieta
 * po lewej. WooCommerce wypisuje etykiete w atrybucie "data-title" na kazdej
 * komorce, wiec wystarczy CSS - bez drugiego szablonu i bez JS. */

@media (max-width: 767px) {

	.cstl-page-head {
		margin-bottom: 24px;
	}

	.cstl-page-head__title {
		font-size: 27px;
		line-height: 34px;
	}

	.woocommerce-account .cstl-orders__table,
	.woocommerce-account .cstl-orders__table tbody {
		display: block;
		width: 100%;
	}

	.woocommerce-account .cstl-orders__table thead {
		display: none;
	}

	.woocommerce-account .cstl-orders__table tbody tr {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-bottom: 16px;
		padding: 20px;
		border: 1px solid var(--cstl-hairline);
	}

	.woocommerce-account .cstl-orders__table tbody td {
		display: flex;
		align-items: center;
		gap: 24px;
		padding: 0;
		border: 0;
		font-size: 15px;
	}

	.woocommerce-account .cstl-orders__table tbody tr:last-child td {
		border-bottom: 0;
	}

	.woocommerce-account .cstl-orders__table tbody td::before {
		content: attr(data-title);
		flex: none;
		width: 90px;
		color: var(--cstl-muted);
		font-family: var(--cstl-font-body);
		font-weight: 400;
		font-size: 14px;
	}

	.woocommerce-account .cstl-orders__table tbody td.woocommerce-orders-table__cell-order-number {
		font-weight: 700;
	}

	/* Suma stoi w kadrze w jednej linii: kwota + liczba produktow. */
	.cstl-orders__sum {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 6px;
	}

	.cstl-orders__total {
		display: inline;
		margin: 0;
		font-weight: 700;
	}

	.cstl-orders__items {
		display: inline;
		margin: 0;
	}

	.cstl-orders__badge {
		font-weight: 400;
		font-size: 13px;
	}

	/* Akcje oddziela w kadrze cienka kreska. */
	.woocommerce-account .cstl-orders__table tbody td.woocommerce-orders-table__cell-order-actions {
		display: flex;
		gap: 24px;
		padding-top: 10px;
		border-top: 1px solid var(--cstl-hairline);
	}

	.woocommerce-account .cstl-orders__table tbody td.woocommerce-orders-table__cell-order-actions::before {
		display: none;
	}

	.woocommerce-account .cstl-orders__action {
		margin-right: 0;
		font-weight: 700;
		font-size: 13px;
	}

	.woocommerce-account .cstl-orders__action--pay {
		padding: 10px 20px;
	}

	.woocommerce-account .cstl-orders__pagination {
		flex-wrap: wrap;
		gap: 12px;
	}

	.cstl-addr__card {
		padding: 32px 20px;
	}
}

/* Kod pocztowy i miasto stoja w kadrze obok siebie. Polski uklad adresowy
   WooCommerce daje im "form-row-wide", wiec ustawiamy je po ID - te istnieja
   tylko wtedy, gdy pole faktycznie sie renderuje, wiec przy innym kraju
   regula po prostu nie ma czego dotknac.

   CALOSC w "min-width: 992px" celowo. Selektor z ID ma wage (1,2,0) i lezy
   w pliku ZA mobilnym media query - bez tego ograniczenia wygrywalby takze na
   telefonie, tworzac niejawna druga kolumne i siatke szersza niz ekran
   (zmierzone: 410 px przy oknie 390 px). */
@media (min-width: 992px) {

	.woocommerce-account .woocommerce-MyAccount-content #billing_postcode_field,
	.woocommerce-account .woocommerce-MyAccount-content #shipping_postcode_field {
		grid-column: 1;
	}

	.woocommerce-account .woocommerce-MyAccount-content #billing_city_field,
	.woocommerce-account .woocommerce-MyAccount-content #shipping_city_field {
		grid-column: 2;
	}
}

/* "Anuluj" wypada za znacznikiem </form>, wiec nie lapie sie na reset
   wyrownania dla ".woocommerce-address-fields *". */
.woocommerce-account .woocommerce-MyAccount-content .cstl-form__cancel {
	text-align: left;
}


/* =========================================================================
 * Szczegoly zamowienia (/moje-konto/view-order/<id>/)
 *
 * Ten ekran NIE MA projektu w Figmie, a prowadzi do niego przycisk ZOBACZ
 * przy kazdym zamowieniu - czyli trafi tam kazdy klient. Renderuje go surowy
 * WooCommerce ("order/order-details.php" + "order-details-customer.php"),
 * przez co dziedziczyl stary CSS strony 9: wysrodkowane naglowki obok
 * wyrownanej do lewej reszty konta.
 *
 * Nie wymyslamy tu nowego ukladu - dociagamy ekran do zasad, ktore juz
 * obowiazuja w reszcie sekcji: typografia z kadrow, wyrownanie do lewej,
 * ZAPLAC jako czarny przycisk i ANULUJ jako odnosnik tekstowy, dokladnie
 * tak jak na liscie zamowien.
 * ====================================================================== */

/* Naglowek stanu nad tabela ("Zamowienie nr ... jest obecnie ..."). */
.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	margin: 0 0 28px;
	color: var(--cstl-muted);
	font-family: var(--cstl-font-body);
	font-size: 14px;
	line-height: 22px;
	text-align: left;
}

.woocommerce-account .woocommerce-MyAccount-content mark.order-number,
.woocommerce-account .woocommerce-MyAccount-content mark.order-date,
.woocommerce-account .woocommerce-MyAccount-content mark.order-status {
	background: none;
	color: var(--cstl-ink);
	font-weight: 700;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details {
	margin: 0 0 48px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details:last-child {
	margin-bottom: 24px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title {
	margin: 0 0 20px;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-heading);
	font-weight: 600;
	font-size: 24px;
	line-height: normal;
	text-align: left;
}

/* Tabela zamowienia ------------------------------------------------------ */

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-details {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-details th,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-details td {
	padding: 16px 0;
	border: 0;
	border-bottom: 1px solid var(--cstl-hairline);
	background: none;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-size: 14px;
	line-height: 22px;
	text-align: left;
	vertical-align: top;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-details thead th {
	padding-top: 0;
	color: var(--cstl-muted);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0.2px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-details td:last-child,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-details th:last-child {
	text-align: right;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-details tfoot th {
	font-weight: 700;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-details .wc-item-meta,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-details .product-quantity {
	color: var(--cstl-muted);
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-details .wc-item-meta {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

/* Motyw maluje calą stopke tabeli na szaro (rgb(245,246,247)) - w reszcie
   sekcji nie ma ani jednego takiego bloku. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-details tfoot {
	background: none;
}

/* Dzialania: ZAPLAC + ANULUJ --------------------------------------------
   Woo stawia je obok siebie BEZ zadnego odstepu (zmierzone: koniec pierwszego
   na 1308 px, poczatek drugiego na 1307 px - stykaly sie).
   Komorka z przyciskami NIE MA zadnej klasy, wiec nie da sie jej zlapac
   selektorem i zrobic z niej flexa. Odstep idzie przez sasiedztwo przyciskow -
   dziala niezaleznie od tego, ile akcji Woo wypisze. */
.woocommerce-account .woocommerce-MyAccount-content .order-actions-button + .order-actions-button {
	margin-left: 16px;
}

.woocommerce-account .woocommerce-MyAccount-content .order-actions-button {
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.2px;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content .order-actions-button.pay {
	padding: 8px 16px;
	background: var(--cstl-ink);
	color: #fff;
	font-weight: 700;
}

.woocommerce-account .woocommerce-MyAccount-content .order-actions-button:hover,
.woocommerce-account .woocommerce-MyAccount-content .order-actions-button:focus {
	border: 0;
	background: none;
	color: var(--cstl-ink);
	text-decoration: underline;
}

.woocommerce-account .woocommerce-MyAccount-content .order-actions-button.pay:hover,
.woocommerce-account .woocommerce-MyAccount-content .order-actions-button.pay:focus {
	background: #333;
	color: #fff;
	text-decoration: none;
}

/* "Zamow jeszcze raz" - jedyna akcja przy zamowieniu zrealizowanym.
   Motyw daje jej biala ramke; w tej sekcji akcja glowna jest czarna
   (tak samo jak ZAPLAC na liscie zamowien i "Zapisz adres" w formularzach). */
.woocommerce-account .woocommerce-MyAccount-content .order-again {
	margin: 24px 0 0;
}

.woocommerce-account .woocommerce-MyAccount-content .order-again .button {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 16px 24px;
	border: 0;
	border-radius: 0;
	background: var(--cstl-ink);
	color: #fff;
	font-family: var(--cstl-font-body);
	font-weight: 700;
	font-size: 13px;
	line-height: normal;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content .order-again .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .order-again .button:focus {
	background: #333;
	color: #fff;
}


/* Adres pod tabela ------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details address {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--cstl-ink);
	font-family: var(--cstl-font-body);
	font-size: 14px;
	font-style: normal;
	line-height: 24px;
	text-align: left;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details--phone,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details--email {
	margin: 8px 0 0;
	padding: 0;
	color: var(--cstl-muted);
	font-size: 14px;
	line-height: 22px;
}

/* Telefon i e-mail Woo opakowuje w odnosniki "tel:" i "mailto:", wiec bez tego
   dziedzicza zloty kolor odnosnikow z motywu i odcinaja sie od reszty adresu. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details--phone a,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-customer-details--email a {
	color: inherit;
	text-decoration: none;
}

/* =========================================================================
 * ODSTEPY PIONOWE - jedno zrodlo prawdy
 *
 * Uklad strony 9 to: section.brxe-section.user-content > div.brxe-container >
 * div.brxe-woocommerce-account-page > div.woocommerce > (nav + content).
 * Sekcja Bricksa ma z motywu "padding-block: var(--at-section-padding-block)",
 * wiec kazdy odstep z kadru DOKLADAL sie do niej i gora oraz dol wychodzily
 * za duze.
 *
 * Zerujemy padding sekcji WYLACZNIE na stronie konta i calosc rytmu pionowego
 * trzymamy w naszych kontenerach - dzieki temu wartosci w CSS sa dokladnie
 * tymi z Figmy, a nie "z Figmy plus cos jeszcze".
 * ====================================================================== */

body.woocommerce-account .brxe-section.user-content {
	padding-block: 0;
}

/* Wciecie poziome daje w calosci sekcja - kontener ma padding 0 i wnosi tylko
   "max-width: 1300px". Na mobile sekcja bierze je z plynnego "--at-gutter",
   co przy oknie 390 px daje ~37,5 px zamiast 20 px z kadru: tresc jest o ~35 px
   wezsza, niz zaprojektowano. Nadpisujemy sama wartosc, bez ruszania zmiennej
   motywu - poza kontem gutter dziala jak dzialal. */
@media (max-width: 767px) {

	body.woocommerce-account .brxe-section.user-content {
		padding-inline: 20px;
	}
}

/* Ekran logowania: kadr 159:7613 zaczyna sie 80 px pod naglowkiem. */
.woocommerce-account .cstl-acc {
	padding-block: 80px 96px;
}

/* Potwierdzenie rejestracji: kadr 159:8035 stoi w sekcji 701 px z trescia
   381 px, czyli 160 px z gory i z dolu. */
.woocommerce-account .cstl-thanks {
	padding-block: 160px;
}

@media (max-width: 767px) {

	.woocommerce-account .cstl-acc {
		padding-block: 32px 40px;
	}

	/* Kadr mobilny 175:50: sekcja 539 px, tresc 339 px - po 100 px. */
	.woocommerce-account .cstl-thanks {
		padding-block: 100px;
	}
}

/* Bezpiecznik na wypadek, gdyby skrypt nie zdazyl posprzatac po WooCommerce
   (np. inna wtyczka zmieni kolejnosc ladowania). Wlasciwe usuniecie robi
   removeWooToggles() w account-redesign.js - to tylko siatka pod linoskoczkiem.
   "display: none" wyjmuje przycisk takze z drzewa dostepnosci, wiec czytnik
   ekranu nie oglosi dwoch identycznych przyciskow. */
.woocommerce-account .show-password-input {
	display: none;
}