/*
 * account.css — moje konto — kokpit, zamówienia, adresy, dane
 *
 * Część arkuszy theme'u rozbitych per feature. Kolejność ładowania i lista
 * plików: functions.php → oliwa_enqueue_assets(). Wszystkie wartości pochodzą
 * z assets/css/tokens.css.
 */

/* -------------------------------------------------------------------------
   Moje konto
   ---------------------------------------------------------------------- */

/* Ikony nawigacji i kafelków to glify Lucide (ten sam zestaw co Icon
   w design systemie) wstawione jako maska. Maska, nie background-image,
   bo dzięki temu glif dziedziczy kolor z `background-color` i zmienia się
   razem ze stanem aktywnym — bez drugiego pliku SVG na każdy kolor. */
.oliwa-account-nav-ico,
.oliwa-account [class*="woocommerce-MyAccount-navigation-link--"]>a::before,
[class*="oliwa-ico--"]::before {
	background-color: currentColor;
	content: "";
	display: block;
	flex: 0 0 auto;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}

.oliwa-account .woocommerce-MyAccount-navigation-link--dashboard>a::before {
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/></svg>");
}

.oliwa-account .woocommerce-MyAccount-navigation-link--orders>a::before {
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/><path d='M3 6h18'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>");
}

.oliwa-account .woocommerce-MyAccount-navigation-link--downloads>a::before {
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='6'/><path d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/></svg>");
}

.oliwa-account .woocommerce-MyAccount-navigation-link--edit-address>a::before {
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/><path d='M15 18H9'/><path d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/><circle cx='17' cy='18' r='2'/><circle cx='7' cy='18' r='2'/></svg>");
}

.oliwa-account .woocommerce-MyAccount-navigation-link--edit-account>a::before {
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}

.oliwa-account .woocommerce-MyAccount-navigation-link--customer-logout>a::before {
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><path d='m16 17 5-5-5-5'/><path d='M21 12H9'/></svg>");
}

.oliwa-ico--shopping-bag::before {
	mask-image: var(--ico-bag);
}

.oliwa-ico--droplet::before {
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z'/></svg>");
}

.oliwa-ico--truck::before {
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/><path d='M15 18H9'/><path d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/><circle cx='17' cy='18' r='2'/><circle cx='7' cy='18' r='2'/></svg>");
}

.oliwa-ico--leaf::before {
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/><path d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/></svg>");
}

.oliwa-ico--award::before {
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='6'/><path d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.11'/></svg>");
}

.oliwa-ico--plus {
	gap: var(--space-2);
}

.oliwa-ico--plus::before {
	height: var(--icon-sm);
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M12 5v14'/></svg>");
	width: var(--icon-sm);
}

/* Wizytówka użytkownika w nagłówku strony */
.oliwa-account-user {
	align-items: center;
	display: flex;
	gap: var(--space-4);
}

.oliwa-account-user__avatar {
	align-items: center;
	background: var(--wp--preset--color--primary);
	border-radius: 50%;
	color: var(--wp--preset--color--base-alt);
	display: flex;
	flex: 0 0 auto;
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 300;
	height: var(--avatar-size);
	justify-content: center;
	line-height: 1;
	width: var(--avatar-size);
}

.oliwa-account-user__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.oliwa-account-user__name {
	color: var(--wp--preset--color--primary);
	font-size: var(--text-sm);
	font-weight: 500;
}

.oliwa-account-user__mail {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--text-sm);
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   Resety `woocommerce-blocktheme.css`

   WooCommerce 11 w block theme NIE ładuje klasycznego `woocommerce.css` —
   ładuje `woocommerce-blocktheme.css`, i to stamtąd pochodzą wszystkie
   rozjazdy formularzy konta. Arkusz wtyczki idzie po arkuszu theme'u, a jego
   selektory są o stopień mocniejsze, więc każdy reset musi tu być
   przelicytowany, nie po prostu powtórzony.

   Reguły wtyczki, które psuły widok konta:
     .woocommerce-account main .woocommerce        max-width: 1000px
     .woocommerce form .form-row                   margin-bottom: 1em
     .woocommerce-page form .form-row label        margin-bottom: .7em
     .woocommerce-page form .form-row input.input-text
                                                   padding: .9rem 1.1rem
   ---------------------------------------------------------------------- */

/* Kontener konta ma trzymać szerokość kontenera theme'u (1240px z szablonu),
   nie 1000px z wtyczki — inaczej siatka 248px + treść kończy się w połowie
   ekranu, a design zakłada pełną szerokość. */
.woocommerce-account main .oliwa-account-body .woocommerce {
	max-width: none;
}

/* Rytm formularzy pochodzi wyłącznie z `gap` kontenera. Margines wtyczki
   dokładał 16px do każdego wiersza — przy odstępie siatki 20px dawało to
   36px między polami i 20px w miejscach, gdzie marginesu nie było. */
.woocommerce-account .oliwa-account form .form-row {
	margin: 0;
	padding: 0;
}

/* To samo z etykietą: .7em pod spodem (blocktheme) plus `line-height: 2`
   z klasycznego arkusza dokładały razem ~19px między etykietą a polem
   zamiast 8px z designu. */
.woocommerce-account .oliwa-account form .form-row label {
	line-height: 1.3;
	margin-bottom: 0;
}

/* Pola z powrotem na skalę i paletę theme'u.

   Na stronie konta ładuje się KLASYCZNY `woocommerce.css` (nie tylko wersja
   dla block themes), a on stylizuje `.woocommerce form .form-row input.input-text`
   kompletem: `border: 1px solid var(--wc-form-border-color)` — czyli
   rgba(32,7,7,.8), prawie czarną — plus `border-radius: 4px` i `padding: .5em`.
   Selektor ma (0,3,1), więc bije `input[type="text"]` z forms.css (0,1,1)
   i to on decydował o wyglądzie pól. Stąd ciemne obwódki zamiast hairline'u
   z designu. */
.woocommerce-account .oliwa-account form .form-row input.input-text,
.woocommerce-account .oliwa-account form .form-row select,
.woocommerce-account .oliwa-account form .form-row textarea.input-text {
	background: var(--wp--preset--color--surface-card);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-control);
	color: var(--wp--preset--color--contrast);
	font-size: var(--text-base);
	line-height: normal;
	padding: var(--pad-control-md);
}

.woocommerce-account .oliwa-account form .form-row input.input-text:focus-visible,
.woocommerce-account .oliwa-account form .form-row select:focus-visible,
.woocommerce-account .oliwa-account form .form-row textarea.input-text:focus-visible {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--focus-ring-shadow);
	outline: none;
}

/* Układ: nawigacja + treść. WooCommerce renderuje oba jako rodzeństwo
   wewnątrz .woocommerce, więc grid siedzi na kontenerze shortcode'u. */
.oliwa-account-body .woocommerce {
	align-items: start;
	display: grid;
	gap: var(--space-12);
	grid-template-columns: 248px minmax(0, 1fr);
}

/* Klasyczny arkusz WooCommerce trzyma ten układ na floatach: clearfix
   `.woocommerce::before/::after` plus szerokości 30%/68% na kolumnach.
   W gridzie pseudoelementy stają się pełnoprawnymi elementami siatki i
   zajmują pierwszą komórkę — nawigacja lądowała w drugiej kolumnie, a treść
   spadała do drugiego wiersza. Float grid ignoruje, ale procentowa szerokość
   już nie, stąd oba resety.

   Selektory Woo mają dokładnie tę samą specyficzność (.woocommerce-account
   + klasa), a arkusz wtyczki ładuje się po arkuszu theme'u — przy remisie
   wygrywa późniejszy. Stąd klasa `body` doklejona z przodu. */
.woocommerce-account .oliwa-account-body .woocommerce::before,
.woocommerce-account .oliwa-account-body .woocommerce::after {
	display: none;
}

.woocommerce-account .oliwa-account-body .woocommerce-MyAccount-navigation,
.woocommerce-account .oliwa-account-body .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* Wylogowany nie ma nawigacji konta — wtedy grid nie ma czego układać.
   Szerokość zależy od tego, czy WooCommerce renderuje samo logowanie
   (opcja `woocommerce_enable_myaccount_registration` = no), czy parę
   logowanie + rejestracja. */
.oliwa-account-body .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
	display: block;
	margin: 0 auto;
	max-width: 940px;
}

.oliwa-account-body .woocommerce:not(:has(.woocommerce-MyAccount-navigation)):not(:has(#customer_login)) {
	max-width: 460px;
}

/* Logowanie i rejestracja.

   `#customer_login` niesie ten sam floatowy układ co reszta klasycznego
   WooCommerce (`.col2-set` + `.col-1`/`.col-2` na 48%), zgaszony wyżej razem
   z adresami. Tu zostaje sama siatka i obudowanie każdej kolumny kartą —
   design nie ma osobnego ekranu rejestracji, więc obie kolumny dostają ten
   sam rysunek karty co kokpit. */
#customer_login {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

#customer_login>.u-column1,
#customer_login>.u-column2 {
	background: var(--wp--preset--color--surface-card);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-8);
}

#customer_login>div>h2 {
	font: var(--type-h3);
	margin: 0;
}

/* Kolumna rejestracji jest krótsza — bez tego przycisk wisiał w połowie
   wysokości karty, a karty kończyły się na różnym poziomie. */
#customer_login .woocommerce-form-register {
	flex: 1;
}

#customer_login .woocommerce-form-register>p:last-of-type {
	margin-top: auto;
}

.oliwa-account .woocommerce-privacy-policy-text p {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--text-2xs);
	line-height: 1.5;
	margin: 0;
}

.oliwa-account .woocommerce-form-login__submit,
.oliwa-account .woocommerce-form-register__submit {
	align-self: flex-start;
}

.woocommerce-account .oliwa-account .woocommerce-MyAccount-navigation ul {
	border-top: 1px solid var(--hairline);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Woo dokłada `padding-bottom: 1em` do <li>, co rozjeżdżało wiersze o 16px
   i rozrywało ciągłą listę na osobne paski. */
.woocommerce-account .oliwa-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation-link>a {
	align-items: center;
	border-bottom: 1px solid var(--hairline);
	border-left: 2px solid transparent;
	color: var(--wp--preset--color--contrast);
	display: flex;
	font-size: var(--text-sm);
	gap: var(--space-2);
	line-height: 1.4;
	padding: var(--space-3) var(--space-4);
	text-decoration: none;
	transition: background-color var(--duration-base) var(--easing-standard),
		color var(--duration-base) var(--easing-standard);
}

.woocommerce-MyAccount-navigation-link>a::before {
	color: var(--wp--preset--color--sage);
	height: var(--icon-md);
	width: var(--icon-md);
}

/* `.woocommerce-account .woocommerce-MyAccount-navigation li a:hover` z wtyczki
   to (0,4,0) razem z pseudoklasą — reguła theme'u musi mieć co najmniej tyle,
   żeby zdjąć podkreślenie. */
.woocommerce-account .oliwa-account .woocommerce-MyAccount-navigation li>a:hover {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* `woocommerce-blocktheme.css` podkreśla aktywną pozycję selektorem
   `.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a`
   i ładuje się po arkuszu theme'u. Design wyróżnia ją tłem i grubością,
   bez podkreślenia — stąd selektor o stopień mocniejszy. */
.woocommerce-account .oliwa-account .woocommerce-MyAccount-navigation li.is-active>a {
	background: var(--wp--preset--color--base-alt);
	border-left-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation-link.is-active>a::before {
	color: var(--wp--preset--color--accent-deep);
}

.woocommerce-MyAccount-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	min-width: 0;
}

.woocommerce-MyAccount-content>h2:first-of-type {
	margin-top: 0;
}

/* WooCommerce zawsze renderuje `<div class="woocommerce-notices-wrapper">`,
   nawet gdy nie ma czego pokazać. W kolumnie flex pusty div jest pełnoprawnym
   elementem siatki i zjada własną szczelinę — między nagłówkiem sekcji
   a formularzem robiło się 24 + 32px zamiast samych 24px. */
.woocommerce-MyAccount-content>.woocommerce-notices-wrapper:empty {
	display: none;
}

/* Nagłówek sekcji z `oliwa_account_section_heading()`.

   Kolumna treści rozstawia sekcje co 32px (`gap`), a design trzyma nagłówek
   24px nad treścią, którą opisuje. `gap` nie umie działać per element, więc
   różnicę odbieramy ujemnym marginesem — 32 − 8 = 24. */
.oliwa-account-section-title {
	font: var(--type-h3);
	margin: 0 0 calc(-1 * var(--space-2));
}

/* „Wyloguj się" to jedyna pozycja menu, która nie nawiguje po koncie, tylko
   kończy sesję. Design systemowo oznacza takie akcje terakotą (`--sale`);
   tło zostaje neutralne, bo pozycja nigdy nie jest aktywna. */
.woocommerce-account .oliwa-account .woocommerce-MyAccount-navigation-link--customer-logout>a,
.woocommerce-account .oliwa-account .woocommerce-MyAccount-navigation-link--customer-logout>a::before {
	color: var(--wp--preset--color--sale);
}

.woocommerce-account .oliwa-account .woocommerce-MyAccount-navigation-link--customer-logout>a:hover {
	background: rgba(154, 52, 18, 0.08);
	color: var(--wp--preset--color--sale);
}

/* Karty */
.oliwa-account-card {
	background: var(--wp--preset--color--surface-card);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	display: block;
}

.oliwa-account-welcome {
	padding: var(--space-8);
}

/* Pierwszy akapit to powitanie WooCommerce („Witaj X (nie jesteś X? Wyloguj)"),
   drugi to opis kokpitu. Ich markupu nie ruszamy — tylko rytm. */
.oliwa-account-welcome>p {
	margin: var(--space-2) 0 0;
	max-width: 62ch;
	text-wrap: pretty;
}

/* Design ma tu duży nagłówek „Witaj, Imię Nazwisko". WooCommerce trzyma to
   w jednym akapicie razem z dopiskiem „(nie jesteś X? Wyloguj się)", którego
   bez kopii szablonu nie da się oddzielić — w dużym kroju serif wychodzi
   z tego nieczytelna plątanina. Zostaje więc czytelny akapit, a rolę wejścia
   w sekcję pełni złote „Witaj ponownie" i tytuł strony w nagłówku. */
.oliwa-account-welcome>p:first-of-type strong {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.oliwa-account-welcome__script {
	color: var(--wp--preset--color--accent);
	display: block;
	font-family: var(--font-script);
	font-size: var(--text-lg);
	line-height: 1.2;
}

.oliwa-account-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-6);
}

/* Warianty przycisków użyte w szablonach konta. `wp-element-button` niesie
   już wygląd podstawowy z theme.json — tu tylko odmiany. */
.oliwa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.oliwa-btn.is-outline {
	background: transparent;
	border: 1px solid var(--hairline-strong);
	color: var(--wp--preset--color--primary);
}

.oliwa-btn.is-outline:hover {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--primary);
}

.oliwa-btn.is-small {
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-wider);
	padding: var(--pad-control-sm);
	white-space: nowrap;
}

/* Kafelki stanu konta */
.oliwa-account-stats {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.oliwa-account-stat {
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-card);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-6);
}

.oliwa-account-stat::before {
	color: var(--wp--preset--color--accent-deep);
	height: var(--icon-lg);
	width: var(--icon-lg);
}

.oliwa-account-stat__value {
	color: var(--wp--preset--color--primary);
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 300;
	line-height: 1.1;
}

.oliwa-account-stat__label {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
}

/* Ostatnie zamówienie */
.oliwa-account-lastorder {
	display: block;
}

.oliwa-account-lastorder__title {
	margin: 0 0 var(--space-4);
}

.oliwa-account-order-head {
	align-items: center;
	border-bottom: 1px solid var(--hairline);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: space-between;
	padding: var(--space-5) var(--space-6);
}

.oliwa-account-order-id {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.oliwa-account-order-id strong {
	color: var(--wp--preset--color--primary);
	font-size: var(--text-sm);
	font-weight: 500;
}

.oliwa-account-order-id>span {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--text-sm);
}

/* Design trzyma kwotę w roli `--type-price` (18px, medium, krój tekstowy).
   Serif 22px wyglądał tu jak nagłówek i konkurował z numerem zamówienia. */
.oliwa-account-order-total {
	color: var(--wp--preset--color--primary);
	font: var(--type-price);
}

.oliwa-account-order-line {
	align-items: center;
	border-bottom: 1px solid var(--hairline);
	display: flex;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-6);
}

.oliwa-account-order-line__media {
	flex: 0 0 auto;
	height: var(--space-14);
	width: var(--space-14);
}

.oliwa-account-order-line__media img {
	border-radius: var(--radius-card);
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.oliwa-account-order-line__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

.oliwa-account-order-line__name {
	color: var(--wp--preset--color--primary);
	font-size: var(--text-sm);
	font-weight: 500;
}

.oliwa-account-order-line__meta,
.oliwa-account-order-line__total {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--text-sm);
}

.oliwa-account-order-foot {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-5) var(--space-6);
}

/* Plakietka statusu */
.oliwa-account-status {
	background: var(--wp--preset--color--base-alt);
	border-radius: var(--radius-pill);
	color: var(--wp--preset--color--primary);
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-wide);
	padding: var(--pad-control-xs);
	text-transform: uppercase;
}

/* Tony pochodzą z `oliwa_account_status_tone()` w inc/account.php.

   Design nie różnicuje statusów barwą — cała plakietka siedzi w palecie
   oliwkowej i gra samym kontrastem: stan wymagający uwagi jest wypełniony,
   stan zamknięty wygaszony. Czerwień jest w tym systemie zarezerwowana dla
   przecen (`--sale`), więc status zamówienia jej nie używa. */
.oliwa-account-status.is-tone-success,
.oliwa-account-status.is-tone-warning {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base-alt);
}

.oliwa-account-status.is-tone-neutral {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--accent-deep);
}

/* Tabela zamówień */
.woocommerce-orders-table,
.woocommerce-table--order-details {
	background: var(--wp--preset--color--surface-card);
	border: 1px solid var(--hairline);
	/* `collapse` scala ramki komórek z ramką tabeli i kasuje zaokrąglenie —
	   przy `overflow: hidden` róg i tak zostawał ostry. `separate` z zerowym
	   odstępem daje ten sam rysunek linii, ale promień działa. */
	border-collapse: separate;
	border-radius: var(--radius-card);
	border-spacing: 0;
	box-shadow: var(--shadow-card);
	overflow: hidden;
	width: 100%;
}

/* Pięć kolumn przy kolumnie treści ~690px potrafi się nie zmieścić. Obwolutę
   dokłada `oliwa_account_orders_wrap_open()` — tabela przewija się w poziomie
   zamiast rozpychać całą stronę. */
.oliwa-account-table-wrap {
	max-width: 100%;
	overflow-x: auto;
}

/* Tylko nagłówek tabeli. WooCommerce używa <th scope="row"> także w wierszach
   (komórka z numerem zamówienia) — bez zawężenia do thead numer dostawał
   wersaliki i tło nagłówka. */
.woocommerce-orders-table thead th,
.woocommerce-table--order-details thead th {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--text-2xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wider);
	padding: var(--space-3) var(--space-6);
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

/* `cart.css` ma `.woocommerce table.shop_table th` (0,2,2) — wersaliki, krem
   i tracking dla każdego `th`. Tabela zamówień niesie klasę `shop_table`,
   więc jej komórka numeru (`<th scope="row">`) dostawała wygląd nagłówka:
   „NR83" na kremowym tle. Reset musi być mocniejszy niż arkusz koszyka. */
.woocommerce-account .oliwa-account table.shop_table tbody th {
	background: transparent;
	color: var(--wp--preset--color--primary);
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
}

.woocommerce-account .oliwa-account table.shop_table thead th {
	padding: var(--space-3) var(--space-6);
}

.woocommerce-account .oliwa-account table.shop_table td,
.woocommerce-account .oliwa-account table.shop_table tbody th,
.woocommerce-orders-table td,
.woocommerce-orders-table tbody th,
.woocommerce-table--order-details td,
.woocommerce-table--order-details tbody th {
	border-top: 1px solid var(--hairline);
	font-size: var(--text-sm);
	padding: var(--space-5) var(--space-6);
	vertical-align: middle;
	white-space: nowrap;
}

.woocommerce-orders-table__cell-order-number a {
	color: var(--wp--preset--color--primary);
	font-weight: 500;
}

/* Kwotę renderuje `oliwa_account_orders_column_total()` — WooCommerce doklejał
   do niej „za 3 pozycje" w tym samym elemencie, przez co dopisek dziedziczył
   stopień ceny. Design ma w tej kolumnie samą kwotę. */
.woocommerce-orders-table__cell-order-total {
	white-space: nowrap;
}

.oliwa-account-order-amount {
	color: var(--wp--preset--color--primary);
	display: block;
	font: var(--type-price);
}

/* Design zostawia nagłówek kolumny akcji pusty. Tekst zostaje w markupie dla
   czytników ekranu — bez niego kolumna jest dla nich bezimienna — ale znika
   z widoku. `clip-path` zamiast `display: none`, bo ukryty element wypada
   z drzewa dostępności. */
.woocommerce-orders-table__header-order-actions .nobr {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Woo dokleja przyciskowi `wp-element-button`, więc bez tej reguły „Zobacz"
   dostaje pełny przycisk primary z theme.json. Design ma tu wariant outline
   w rozmiarze sm. */
.woocommerce-account .oliwa-account .woocommerce-orders-table__cell-order-actions .button {
	background: transparent;
	border: 1px solid var(--hairline-strong);
	border-radius: var(--radius-control);
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	font-size: var(--text-2xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wider);
	margin: 0;
	padding: var(--pad-control-sm);
	text-align: center;
	text-transform: uppercase;
	transition: background-color var(--duration-base) var(--easing-standard);
}

/* Woo daje temu linkowi `display: block` + `margin-bottom: 1em`; przy dwóch
   akcjach w komórce robiła się z tego kolumna przycisków z dziurą pod spodem. */
.woocommerce-account .oliwa-account .woocommerce-orders-table__cell-order-actions a+a {
	margin-left: var(--space-2);
}

.woocommerce-account .oliwa-account .woocommerce-orders-table__cell-order-actions .button:hover {
	background: var(--wp--preset--color--base-alt);
}

/* Adresy */

/* Ten sam floatowy układ co przy nawigacji konta: `.col2-set` ma clearfix
   w pseudoelementach, a `.col-1`/`.col-2` sztywne 48% z floatem. W gridzie
   pseudoelementy zajmują komórki, a procenty ścinają karty do połowy kolumny. */
.woocommerce-account .oliwa-account .col2-set::before,
.woocommerce-account .oliwa-account .col2-set::after,
.woocommerce-account .oliwa-account .addresses .title::before,
.woocommerce-account .oliwa-account .addresses .title::after {
	display: none;
}

.woocommerce-account .oliwa-account .col2-set .col-1,
.woocommerce-account .oliwa-account .col2-set .col-2 {
	float: none;
	width: auto;
}

.woocommerce-Addresses {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.woocommerce-Address {
	background: var(--wp--preset--color--surface-card);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-6);
}

/* Karta bez adresu: przerywana ramka i przycisk dosunięty do dołu, żeby obie
   karty w rzędzie kończyły się na tej samej wysokości. */
/* Etykieta odnośnika brzmi u WooCommerce „Edytuj Adres rozliczeniowy" i przy
   karcie ~330px nie zmieści się obok tytułu — w układzie poziomym tytuł łamał
   się w środku wyrazu. Stąd kolumna: tytuł, pod nim przycisk. */
.woocommerce-Address-title {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* Tytuł i przycisk mają zostać w jednej linii. Bez `min-width: 0` <h2> nie
   schodzi poniżej swojej najdłuższej frazy i para się łamie, a wtedy
   `space-between` rozrzuca je po przeciwnych krawędziach karty. */


/* Nagłówek karty adresu też niesie clearfix Woo (`.title::before/::after`).
   Jako zerowej szerokości elementy siatki flex zjadały po jednym `gap`
   z każdej strony, przez co tytuł odsuwał się o 16px, a w karcie bez adresu
   — gdzie był jedynym prawdziwym elementem — lądował dokładnie na środku.
   Pseudoelementy gasimy wyżej, `margin-right: auto` jest zabezpieczeniem. */
.woocommerce-Address-title>h2 {
	margin-right: auto;
	min-width: 0;
}

/* Nagłówek karty adresu to <h2>, czyli domyślnie 36px — w kolumnie obok
   przycisku „Edytuj" łamał się na trzy wiersze i wypychał link poza kartę. */
/* Design ma tu 24px, ale przy kolumnie treści 688px karta ma 282px w środku,
   a „Adres rozliczeniowy" w 24px razem z przyciskiem tego nie mieści i łamie
   się na dwie linie. 22px + węższa przerwa trzymają jeden wiersz. */
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	font-size: var(--text-lg);
	line-height: 1.15;
	margin: 0;
}

/* WooCommerce renderuje tu pełne „Edytuj Adres rozliczeniowy" — bez kopii
   szablonu tekstu nie skrócimy, więc przycisk musi umieć się zawinąć. */
.woocommerce-Address-title .edit {
	align-items: center;
	background: transparent;
	border: 1px solid var(--hairline-strong);
	border-radius: var(--radius-control);
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	flex: 0 1 auto;
	font-size: var(--text-2xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wider);
	line-height: 1.3;
	padding: var(--pad-control-sm);
	text-align: center;
	text-transform: uppercase;
	transition: background-color var(--duration-base) var(--easing-standard);
}

/* `.woocommerce-account .addresses .title .edit` z wtyczki ustawia blok
   i 16px marginesu — w kolumnowym nagłówku karty rozjeżdżało to odstęp
   między tytułem a przyciskiem. */
.woocommerce-account .oliwa-account .addresses .title .edit {
	display: inline-flex;
	margin-bottom: 0;
}

.woocommerce-Address-title .edit:hover {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--primary);
}

.woocommerce-Address address {
	color: var(--wp--preset--color--contrast);
	font-size: var(--text-base);
	font-style: normal;
	line-height: 1.65;
}

/* Szczegóły konta i logowanie */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	max-width: 620px;
}

/* Formularze logowania i rejestracji też mają akapity bez klasy (przycisk,
   tekst o polityce prywatności) — rytm bierzemy z `gap`. */
.woocommerce-form-login>p,
.woocommerce-form-register>p,
.woocommerce-ResetPassword>p {
	margin: 0;
}

/* Imię i nazwisko stoją obok siebie. WooCommerce robi to floatem na
   `.form-row-first`/`.form-row-last`; w kolumnowym flexie float nic nie znaczy,
   więc formularz jest gridem, a wszystko poza tą parą idzie przez całą szerokość. */
.woocommerce-EditAccountForm {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 620px;
}

.woocommerce-EditAccountForm .form-row {
	gap: var(--space-2);
}

/* Akapit z przyciskiem „Zapisz zmiany" WooCommerce renderuje bez żadnej klasy
   (`<p>` z nonce i <button>), więc reguła na `.form-row` go nie łapie, a
   domyślny margines akapitu dokładał ~16px do 20px odstępu siatki. Rytm
   formularza ma pochodzić wyłącznie z `gap`. */
.woocommerce-EditAccountForm>p {
	margin: 0;
}

.woocommerce-EditAccountForm>* {
	grid-column: 1 / -1;
}

.woocommerce-account .oliwa-account .woocommerce-EditAccountForm>.form-row-first {
	float: none;
	grid-column: 1;
	margin-right: 0;
	width: auto;
}

.woocommerce-account .oliwa-account .woocommerce-EditAccountForm>.form-row-last {
	float: none;
	grid-column: 2;
	width: auto;
}

.woocommerce-EditAccountForm fieldset {
	background: var(--wp--preset--color--surface-card);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-card);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	/* Margines dokładał się do `gap` siatki formularza — nad „Zmianą hasła"
	   robiło się 36px, między pozostałymi polami 20px. */
	margin: 0;
	padding: var(--space-6);
}

/* `float` wyjmuje <legend> ze specjalnego trybu renderowania, w którym
   przeglądarka wpisuje go w ramkę fieldsetu i przerywa linię. Po nim legenda
   jest zwykłym blokiem na górze karty — tak jak eyebrow „ZMIANA HASŁA"
   w designie, nad ciągłą ramką. `width: 100%` trzyma ją w jednym wierszu. */
.woocommerce-EditAccountForm legend {
	color: var(--wp--preset--color--accent-deep);
	float: left;
	font-size: var(--text-2xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wider);
	margin-bottom: var(--space-1);
	padding: 0;
	text-transform: uppercase;
	width: 100%;
}

.oliwa-account .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
}

.oliwa-account .form-row label {
	color: var(--wp--preset--color--primary);
	font-size: var(--text-sm);
	font-weight: 600;
}

/* Chrome maluje autouzupełnione pole własnym niebieskim tłem, którego nie da
   się nadpisać `background` — kolor siedzi w warstwie tła kontrolki. Jedyne
   wyjście to `box-shadow: inset` na całą wysokość pola. */
.oliwa-account input:-webkit-autofill,
.oliwa-account input:-webkit-autofill:hover,
.oliwa-account input:-webkit-autofill:focus {
	-webkit-box-shadow: inset 0 0 0 100px var(--wp--preset--color--surface-card);
	-webkit-text-fill-color: var(--wp--preset--color--contrast);
	caret-color: var(--wp--preset--color--contrast);
}

/* Rozpórki dla floatów. W gridzie każda zajęłaby własną komórkę. */
.oliwa-account .clear {
	display: none;
}

/* Design nie oznacza pól wymaganych gwiazdką. WooCommerce i tak daje temu
   znacznikowi `aria-hidden="true"`, a samo pole ma `aria-required` — czytnik
   ekranu nic nie traci. */
.oliwa-account .form-row .required {
	display: none;
}

/* Podpowiedzi pod polami. WooCommerce owija je w <span><em>, więc kasujemy
   kursywę i zostawiamy wygaszony, mniejszy tekst. */
.oliwa-account em,
.oliwa-account .woocommerce-form-row .description {
	color: var(--wp--preset--color--contrast-muted);
	display: block;
	font-size: var(--text-2xs);
	font-style: normal;
	line-height: 1.5;
}

.oliwa-account .woocommerce-form-login__rememberme {
	align-items: center;
	display: flex;
	gap: var(--space-2);
	font-size: var(--text-sm);
}

.oliwa-account .woocommerce-LostPassword {
	font-size: var(--text-sm);
	margin: 0;
}

/* Powiadomienia — WooCommerce miesza tu dwa systemy: klasyczne .woocommerce-info
   i blokowy notice-banner. Oba trafiają na stronę konta. */
.oliwa-account .wc-block-components-notice-banner {
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-card);
	color: var(--wp--preset--color--contrast);
	font-size: var(--text-sm);
}

/* Ikonka bannera to pełny dysk w kolorze statusu wtyczki (niebieski dla „info").
   Kolorujemy cały glif, nie sam kontener. */
.oliwa-account .wc-block-components-notice-banner svg,
.oliwa-account .wc-block-components-notice-banner svg * {
	fill: var(--wp--preset--color--accent-deep);
}

/* Pusty stan (Pobrania) */
.oliwa-account .woocommerce-info,
.oliwa-account .woocommerce-message,
.oliwa-account .woocommerce-Message {
	align-items: center;
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-card);
	color: var(--wp--preset--color--contrast);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: space-between;
	padding: var(--space-6);
}

@media (max-width: 900px) {
	.oliwa-account-body .woocommerce {
		display: block;
	}

	.woocommerce-MyAccount-navigation {
		margin-bottom: var(--space-8);
	}

	.woocommerce-EditAccountForm {
		display: flex;
		flex-direction: column;
	}
}
/* -------------------------------------------------------------------------
   Podgląd zamówienia (endpoint `view-order`)

   Ekran składa się z trzech części, każda z innego szablonu WooCommerce:
   akapit ze statusem, sekcja `woocommerce-order-details` z tabelą pozycji
   i sekcja `woocommerce-customer-details` z adresami. Klasyczny arkusz
   wtyczki daje im własne marginesy (2em), ramki i `<mark>` na żółtym tle —
   wszystko poniżej sprowadza je do rytmu i palety theme'u.
   ---------------------------------------------------------------------- */

/* Marginesy sekcji zastępuje `gap` kolumny treści — inaczej 32px z siatki
   sumuje się z 2em z wtyczki. */
.woocommerce-account .oliwa-account .woocommerce-order-details,
.woocommerce-account .oliwa-account .woocommerce-customer-details,
.woocommerce-account .oliwa-account .woocommerce-order-downloads {
	margin: 0;
}

/* Zdanie „Zamówienie nr X złożone D jest obecnie S." WooCommerce składa
   z trzech `<mark>`, którym przeglądarka daje żółte tło. Zamiast go gasić
   pojedynczo, całe zdanie staje się paskiem statusu nad tabelą. */
.oliwa-account .woocommerce-MyAccount-content>p:first-of-type:has(mark.order-number) {
	background: var(--wp--preset--color--base-alt);
	border-left: 2px solid var(--wp--preset--color--accent);
	border-radius: var(--radius-control);
	color: var(--wp--preset--color--contrast);
	font-size: var(--text-sm);
	margin: 0;
	padding: var(--space-4) var(--space-5);
}

.oliwa-account mark.order-number,
.oliwa-account mark.order-date,
.oliwa-account mark.order-status {
	background: transparent;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.oliwa-account .woocommerce-order-details__title,
.oliwa-account .woocommerce-column__title {
	font: var(--type-h3);
	margin: 0 0 var(--space-5);
}

/* Tabela pozycji zamówienia */
.woocommerce-account .oliwa-account .order_details .product-total,
.woocommerce-account .oliwa-account .order_details tfoot td {
	text-align: right;
	white-space: nowrap;
}

.woocommerce-account .oliwa-account .order_details td.product-name a {
	color: var(--wp--preset--color--primary);
	font-weight: 500;
	text-decoration: none;
}

.woocommerce-account .oliwa-account .order_details td.product-name a:hover {
	color: var(--wp--preset--color--accent-deep);
}

/* Ilość WooCommerce wstawia jako `<strong>` tuż po nazwie, bez separatora.
   Zostaje w tej samej linii co nazwa — wygaszona i lżejsza, żeby nie czytała
   się jak druga nazwa produktu. */
.woocommerce-account .oliwa-account .order_details .product-quantity {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--text-sm);
	font-weight: 400;
	margin-left: var(--space-2);
	white-space: nowrap;
}

/* Metadane pozycji („Na zamówienie: 1") — WooCommerce renderuje je jako
   `<ul>` z domyślnym wcięciem listy i pogrubioną etykietą. W tabeli mają być
   jedną wygaszoną linijką pod nazwą. */
.woocommerce-account .oliwa-account .order_details .wc-item-meta {
	list-style: none;
	margin: var(--space-1) 0 0;
	padding: 0;
}

.woocommerce-account .oliwa-account .order_details .wc-item-meta li,
.woocommerce-account .oliwa-account .order_details .wc-item-meta p {
	color: var(--wp--preset--color--contrast-muted);
	display: inline;
	font-size: var(--text-2xs);
	margin: 0;
}

.woocommerce-account .oliwa-account .order_details .wc-item-meta .wc-item-meta-label {
	font-weight: 600;
	margin-right: var(--space-1);
}

/* Podsumowanie: etykieta wygaszona, kwota w roli ceny, ostatni wiersz
   („Razem") wyróżniony linią i wagą. */
.woocommerce-account .oliwa-account .order_details tfoot th {
	background: transparent;
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--text-2xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
}

.woocommerce-account .oliwa-account .order_details tfoot td {
	color: var(--wp--preset--color--primary);
	font: var(--type-price);
}

.woocommerce-account .oliwa-account .order_details tfoot tr:last-child th,
.woocommerce-account .oliwa-account .order_details tfoot tr:last-child td {
	border-top: 1px solid var(--hairline-strong);
}

/* Adresy pod zamówieniem */
.woocommerce-account .oliwa-account .woocommerce-customer-details .addresses {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	margin: 0;
}

/* Klasyczny arkusz daje adresowi ramkę 5px i padding 6/12, a wersja dla block
   themes dokłada `border-width: 1px; border-radius: 0` bez koloru — stąd
   szara, kanciasta skrzynka z pierwszego zrzutu. */
.woocommerce-account .oliwa-account .woocommerce-customer-details address {
	background: var(--wp--preset--color--surface-card);
	border: 1px solid var(--hairline);
	border-radius: var(--radius-card);
	color: var(--wp--preset--color--contrast);
	font-size: var(--text-base);
	font-style: normal;
	line-height: 1.7;
	padding: var(--space-6);
	width: auto;
}

.woocommerce-account .oliwa-account .woocommerce-customer-details--email,
.woocommerce-account .oliwa-account .woocommerce-customer-details--phone {
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--text-sm);
	margin: var(--space-3) 0 0;
}

/* Kolumna adresów w podglądzie zamówienia ma własny nagłówek `<h2>` w każdej
   kolumnie — bez tego resetu dziedziczyłby margines akapitu bloku. */
.woocommerce-account .oliwa-account .woocommerce-column__title {
	margin-top: 0;
}