/*
  Laris 2026 — konto klienta („Moje konto”).

  Arkusz wchodzi TYLKO na stronach konta — warunek w inc/konto.php.

  Stan zastany: strona konta jest jedynym miejscem w serwisie, którego nikt
  nigdy nie ubierał. Motyw nadrzędny ma na nią dokładnie trzy reguły
  (style.css:1893, 1896, 1899 — kolor czynnej pozycji, czerwone „Wyloguj się”
  i odstęp nad przyciskiem zapisu), reszta to surowy WooCommerce sprzed
  dziesięciu lat: menu i treść rozstawione floatami na 30% / 68%, formularz
  logowania w dwóch kolumnach po 48%, tabela zamówień bez ramki i bez tła,
  komunikat o pustej liście zamówień jako szary pasek z niebieską kreską
  u góry i przyciskiem odrzuconym na prawo. Klient: „личный кабинет тоже
  нужно стилизировать, там старые стили”.

  ══ DLACZEGO KAŻDY SELEKTOR ZACZYNA SIĘ OD „body.laris-konto” ══

  Ten arkusz jest KOLEJKOWANY (wp_enqueue_style w inc/konto.php), a nie
  wstawiany <link>-iem w header.php jak pozostałe nasze pliki. Wychodzi więc
  w wp_head(), czyli PRZED css/style.css motywu nadrzędnego i przed całą
  warstwą motywu potomnego. Przy równej specyficzności przegrałby z nimi
  kolejnością wczytania.

  „body.laris-konto” to dwa dodatkowe człony (element + klasa) doklejone do
  każdej reguły. Dzięki nim o wyniku decyduje specyficzność, a nie kolejność.
  Trzy miejsca, w których to jest naprawdę potrzebne — wszystkie trzy już raz
  w tym motywie kosztowały pół wieczora szukania „dlaczego poprawka się nie
  stosuje” (patrz docs/HANDOVER.md, „Trzy ловушки specyficzności”):

    • „.txt-content h2” z design-system.css (0,1,1) robi z KAŻDEGO nagłówka
      drugiego stopnia tytuł strony: 30 px, wersaliki, Manrope.
      Bez przedrostka „Zaloguj się” i „Rejestracja” krzyczą tak samo jak
      „MOJE KONTO” nad nimi;
    • „.woocommerce form .form-row input.input-text” z motywu nadrzędnego
      (style.css:1133, 0,3,2) betonuje wysokość pola na 40 px — nasze
      42 px z przedrostkiem mają (0,4,3) i wygrywają;
    • „.woocommerce table.shop_table td” (style.css:1609, 0,2,1) trzyma
      wyściółkę komórek na 10/12 px.

  Kto dopisuje do tego pliku — trzyma ten sam przedrostek. Bez niego reguła
  po prostu nie zadziała i będzie wyglądać na „CSS, który nie działa”.

  „!important” pada w dwóch miejscach i tylko tam, gdzie motyw nadrzędny sam
  go użył — przy obramowaniu przycisku na najechanie (style.css:275). Szukać
  ich w sekcji „przyciski formularzy”, każde z osobnym uzasadnieniem.
*/

/* ═══ ramy strony ═══ */

/* Dwie kolumny bez floatów.

   WooCommerce układa konto pływakami: „.woocommerce-MyAccount-navigation
   { float: left; width: 30% }” i „.woocommerce-MyAccount-content
   { float: right; width: 68% }”. Pływaki wypadają z przepływu, więc karta
   menu nie może być równa wysokością treści, a przy krótkiej treści stopka
   podchodzi pod menu. Siatka rozwiązuje jedno i drugie.

   Selektor z „>” taki sam, jaki sprawdził się w css/koszyk.css dla koszyka
   i kasy: skrót [woocommerce_my_account] oddaje jeden <div class="woocommerce">
   wprost do kolumny treści szablonu. */
body.laris-konto .txt-content > .woocommerce {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* Wszystko poza menu i treścią (powiadomienia, formularz logowania,
   przypomnienie hasła) idzie przez całą szerokość.

   Dzięki temu jedna siatka obsługuje stronę zalogowaną i niezalogowaną:
   gdy menu i treści nie ma, zostaje jeden element rozciągnięty na obie
   kolumny, czyli to samo, co zwykły blok. Bez tego trzeba by pytać
   „.woocommerce:has(.woocommerce-MyAccount-navigation)”, a to reguła,
   która przy braku obsługi „:has()” wypada CAŁA — razem z układem strony.
   Tam, gdzie „:has()” pada niżej w tym pliku, jego wypadnięcie kosztuje
   tylko powrót do wyglądu WooCommerce, nie zepsuty układ. */
body.laris-konto .txt-content > .woocommerce > * {
  grid-column: 1 / -1;
  min-width: 0;
}

body.laris-konto .txt-content > .woocommerce > .woocommerce-MyAccount-navigation {
  grid-column: 1;
}

body.laris-konto .txt-content > .woocommerce > .woocommerce-MyAccount-content {
  grid-column: 2;
}

/* Pływaki i szerokości procentowe WooCommerce — zdejmujemy, inaczej element
   siatki dostaje 30% szerokości SWOJEGO pola, czyli 75 px z 250. */
body.laris-konto .txt-content > .woocommerce > .woocommerce-MyAccount-navigation,
body.laris-konto .txt-content > .woocommerce > .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

@media (max-width: 991px) {
  body.laris-konto .txt-content > .woocommerce {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  body.laris-konto .txt-content > .woocommerce > .woocommerce-MyAccount-navigation,
  body.laris-konto .txt-content > .woocommerce > .woocommerce-MyAccount-content {
    grid-column: 1 / -1;
  }
}

/* Nagłówki wewnątrz konta.

   Reguła „.txt-content h2” z design-system.css jest pisana pod tytuł
   podstrony i tu wychodzi absurdalnie: „Adres rozliczeniowy” w 30 px
   wersalikami nad czterema wierszami adresu. Wracamy do zwykłego nagłówka
   sekcji. */
body.laris-konto .txt-content h2,
body.laris-konto .txt-content h3 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--l-ink);
}

/* ═══ menu konta ═══ */

body.laris-konto .woocommerce-MyAccount-navigation {
  padding: 8px;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
}

body.laris-konto .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.laris-konto .woocommerce-MyAccount-navigation ul li {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

/* Pole kliknięcia 42 px na całą szerokość pozycji — w goły odnośnik
   o wysokości wiersza tekstu trzeba na telefonie celować palcem. */
body.laris-konto .woocommerce-MyAccount-navigation ul li a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 14px;
  border-radius: var(--l-r-sm);
  color: var(--l-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}

body.laris-konto .woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--l-bg);
  color: var(--l-brand-dark);
}

/* Czynna pozycja.

   Motyw nadrzędny maluje ją samym #1490ca (style.css:1893) — to 3,58:1
   na bieli, poniżej progu 4,5:1 dla napisu. Ten sam błękit o stopień
   ciemniej daje 5,26:1. Do koloru dokładamy podkład i belkę z lewej:
   sam kolor napisu przy pięciu pozycjach jednej długości ginie.

   Belka jest cieniem wewnętrznym, a nie „border-left” — obramowanie
   przesunęłoby napis o 3 px i czynna pozycja stałaby krzywo względem
   pozostałych. */
body.laris-konto .woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--l-brand-tint);
  box-shadow: inset 3px 0 0 var(--l-brand);
  color: var(--l-brand-dark);
  font-weight: 600;
}

/* „Wyloguj się” zostaje czerwone — to jedyna pozycja, która nie prowadzi
   do podstrony, tylko wykonuje działanie, i warto ją odróżnić. Kolor
   z palety serwisu zamiast nadrzędnego #db0d0d: nasz --l-err ma 5,44:1
   na bieli, tamten 5,15:1, a przy okazji przestaje być szóstym czerwonym
   na stronie. Oddzielamy go od reszty kreską, bo stoi na końcu listy. */
body.laris-konto .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--l-line);
}

body.laris-konto .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
  color: var(--l-err);
}

/* Na telefonie i tablecie menu stoi NAD treścią, więc pionowa lista
   wszystkich pozycji zjadałaby cały pierwszy ekran. Układamy je w rzędy —
   „auto-fit” sam dobiera liczbę kolumn do szerokości okna.

   Świadomie NIE robimy z tego przewijanego poziomo paska: część pozycji
   byłaby wtedy za krawędzią ekranu, a nic na nim nie mówi, że jest
   co przewijać. */
@media (max-width: 991px) {
  body.laris-konto .woocommerce-MyAccount-navigation ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 4px;
  }

  body.laris-konto .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}

/* ═══ treść konta ═══ */

body.laris-konto .woocommerce-MyAccount-content {
  padding: 26px 28px;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
}

@media (max-width: 560px) {
  body.laris-konto .woocommerce-MyAccount-content {
    padding: 20px 16px;
  }
}

body.laris-konto .woocommerce-MyAccount-content p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.65;
}

body.laris-konto .woocommerce-MyAccount-content p:last-child {
  margin-bottom: 0;
}

/* Pierwszy nagłówek w karcie nie potrzebuje odstępu od góry — ma go karta. */
body.laris-konto .woocommerce-MyAccount-content > h2:first-child,
body.laris-konto .woocommerce-MyAccount-content > h3:first-child {
  margin-top: 0;
}

/* ═══ logowanie i rejestracja ═══ */

/* Dwie kolumny, bo to dwie różne sprawy: wracający klient i nowy.
   WooCommerce daje im „float: left/right; width: 48%” — czyli kolumny
   różnej wysokości i 4% pustki między nimi bez względu na szerokość okna. */
body.laris-konto #customer_login {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

body.laris-konto #customer_login > .col-1,
body.laris-konto #customer_login > .col-2 {
  float: none;
  width: auto;
  padding: 26px 28px;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
}

/* Poniżej 768 px dwie kolumny po ~180 px to dwa formularze, w których nie
   mieści się adres poczty. */
@media (max-width: 767px) {
  body.laris-konto #customer_login {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  body.laris-konto #customer_login > .col-1,
  body.laris-konto #customer_login > .col-2 {
    padding: 20px 16px;
  }
}

/* ── pola ── */

/* Wysokość 42 px zamiast nadrzędnych 40 i wyściółka 10/14 zamiast 5/10:
   przy 40 px z wyściółką 5 px napis wpisany przez klienta stał tuż przy
   krawędzi pola. „min-height”, a nie „height” — pole musi móc urosnąć,
   gdy WooCommerce wstawi do niego dłuższą wartość niż jeden wiersz. */
body.laris-konto .woocommerce form .form-row input.input-text,
body.laris-konto .woocommerce form .form-row textarea,
body.laris-konto .woocommerce form .form-row select,
body.laris-konto .woocommerce .select2-container--default .select2-selection--single {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--l-line-strong);
  border-radius: var(--l-r-field);
  background: var(--l-surface);
  color: var(--l-ink);
  font-family: var(--l-font-body);
  font-size: 15px;
  line-height: 20px;
}

body.laris-konto .woocommerce form .form-row textarea {
  min-height: 90px;
}

/* Select2 rysuje własną wysokość i własną strzałkę — bez tego wybór kraju
   w adresie jest o kilkanaście pikseli niższy od sąsiednich pól. Wartości
   te same, co w css/koszyk.css dla kasy, żeby oba formularze wyglądały
   jak jeden. */
body.laris-konto .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: var(--l-ink);
  line-height: 20px;
}

body.laris-konto .woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px;
}

body.laris-konto .woocommerce form .form-row {
  margin: 0 0 14px;
  padding: 0;
}

body.laris-konto .woocommerce form .form-row label {
  display: block;
  margin: 0 0 5px;
  color: var(--l-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

/* Gwiazdka pola wymaganego. WooCommerce daje jej „text-decoration: none”
   dopiero w części miejsc — dopisujemy, bo inaczej dziedziczy podkreślenie
   po odnośniku i wygląda na klikalną. */
body.laris-konto .woocommerce form .form-row .required {
  color: var(--l-err);
  text-decoration: none;
  border: 0;
}

/* Podpowiedź pod polem („Pozostaw puste, aby nie zmieniać”). */
body.laris-konto .woocommerce-MyAccount-content form em,
body.laris-konto .woocommerce-MyAccount-content .woocommerce-privacy-policy-text {
  color: var(--l-muted);
  font-size: 13px;
  font-style: normal;
  line-height: 1.5;
}

/* Pole hasła ma wewnątrz przełącznik „pokaż hasło” w <span>-ie —
   bez szerokości opakowanie kurczy się do zawartości i pole robi się węższe
   od sąsiadów. */
body.laris-konto .woocommerce form .form-row .password-input {
  display: block;
  position: relative;
  width: 100%;
}

/* Dwa pola w rzędzie tam, gdzie WooCommerce sam o to prosi (imię/nazwisko).
   Bez pływaków — te wymagają czyszczenia i psują odstęp pod rzędem. */
body.laris-konto .woocommerce form .form-row-first,
body.laris-konto .woocommerce form .form-row-last {
  float: none;
  display: inline-block;
  width: calc(50% - 7px);
  vertical-align: top;
}

body.laris-konto .woocommerce form .form-row-first {
  margin-right: 10px;
}

@media (max-width: 560px) {
  body.laris-konto .woocommerce form .form-row-first,
  body.laris-konto .woocommerce form .form-row-last {
    width: 100%;
    margin-right: 0;
  }
}

/* ── przyciski formularzy ── */

/* Kształt pigułki i kolor marki dają już css/buttons.css i
   css/design-system.css (przez „.woocommerce button.button”). Tutaj
   zostaje sama miara: 46 px wysokości, żeby przycisk był wyraźnie
   większy od pola obok niego. */
body.laris-konto .woocommerce .button,
body.laris-konto .woocommerce button.button,
body.laris-konto .woocommerce a.button,
body.laris-konto .woocommerce input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 46px;
  padding: 0 26px;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
}

/* Pomarańczowa powłoka motywu nadrzędnego (style.css:239) — prostokąt
   pozycjonowany absolutnie, który na najechanie rozrasta się do pełnej
   wielkości przycisku. Przycisk ma „transform”, czyli własny kontekst
   nakładania, więc „z-index: -1” nie chowa jej pod tłem — maluje się nad
   nim, tuż pod napisem. Na pigułce wychodzi z tego pomarańczowy prostokąt
   wystający poza zaokrąglone rogi. Ten sam zabieg, co w css/koszyk.css. */
body.laris-konto .woocommerce .button::before,
body.laris-konto .woocommerce button.button::before,
body.laris-konto .woocommerce a.button::before,
body.laris-konto .woocommerce input.button::before {
  display: none;
}

/* Obramowanie na najechanie.

   Motyw nadrzędny dokłada KAŻDEMU przyciskowi w serwisie
   „border: 1px solid #f08200 !important” (style.css:275). Tło nadpisuje mu
   już design-system.css, ale ramki nie da się przebić bez „!important”,
   bo tamten go użył — i wychodzi pomarańczowy obrys na błękitnym przycisku.
   Klient zgłosił dokładnie to przy filtrach katalogu („оранжевая рамка
   по наведению”); tutaj domykamy to samo na koncie. */
body.laris-konto .woocommerce .button:hover,
body.laris-konto .woocommerce button.button:hover,
body.laris-konto .woocommerce a.button:hover,
body.laris-konto .woocommerce input.button:hover {
  border-color: var(--l-brand-deep) !important;
}

/* Rząd „Zapamiętaj mnie” + „Zaloguj się”. WooCommerce wkłada oba do jednego
   <p class="form-row"> i odrzuca przycisk pływakiem w prawo — przy wąskiej
   kolumnie zjeżdżał pod pole wyboru i zostawiał nad sobą pusty pas.
   Rząd elastyczny robi to samo, ale sam zawija, gdy się nie mieści. */
body.laris-konto .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 10px;
}

/* Etykieta pola wyboru jest jedyną, która stoi OBOK pola, a nie nad nim —
   ogólna reguła wyżej ustawia etykiety na „display: block”. */
body.laris-konto .woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--l-ink);
  font-size: 14px;
  cursor: pointer;
}

body.laris-konto .woocommerce form .form-row label.woocommerce-form__label-for-checkbox input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--l-brand-dark);
}

body.laris-konto .woocommerce .woocommerce-LostPassword {
  margin: 0;
  font-size: 14px;
}

body.laris-konto .woocommerce .woocommerce-LostPassword a {
  color: var(--l-brand-dark);
}

/* ── formularze o stałej mierze wiersza ── */

/* Kolumna treści ma na desktopie ponad tysiąc pikseli. Pole na imię o takiej
   szerokości wygląda jak usterka, a przy okazji utrudnia czytanie: oko musi
   wracać przez całą szerokość ekranu do następnej etykiety. Tabele zostają
   pełnej szerokości — tam liczy się wszystko naraz. */
body.laris-konto .woocommerce-EditAccountForm,
body.laris-konto .woocommerce-address-fields,
body.laris-konto .woocommerce-ResetPassword {
  max-width: 620px;
}

/* Zmiana hasła w „Dane konta” to osobna sprawa niż imię i adres poczty —
   WooCommerce zamyka ją w <fieldset>, więc wystarczy to pokazać. */
body.laris-konto .woocommerce-EditAccountForm fieldset {
  margin: 22px 0 18px;
  padding: 20px 22px 6px;
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
  background: var(--l-bg);
}

body.laris-konto .woocommerce-EditAccountForm fieldset legend {
  padding: 0 8px;
  margin-left: -8px;
  color: var(--l-ink);
  font-family: var(--l-font-head);
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ═══ tabele: zamówienia i pobrane pliki ═══ */

/* Tabela siedzi w karcie treści, więc nie dostaje własnej ramki — dwie
   ramki jedna w drugiej robią z listy zamówień pudełko w pudełku.
   Wystarczą kreski między wierszami. */
body.laris-konto .woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: transparent;
  font-size: 15px;
}

body.laris-konto .woocommerce-MyAccount-content table.shop_table th {
  padding: 0 14px 12px;
  border: 0;
  border-bottom: 1px solid var(--l-line-strong);
  background: transparent;
  color: var(--l-muted);
  font-family: var(--l-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

body.laris-konto .woocommerce-MyAccount-content table.shop_table td {
  padding: 15px 14px;
  border: 0;
  border-bottom: 1px solid var(--l-line);
  vertical-align: middle;
  text-align: left;
}

/* Podsumowanie pojedynczego zamówienia siedzi w <tfoot>, gdzie <th> nie
   jest nagłówkiem kolumny, tylko podpisem kwoty. Reguła dla nagłówków
   zrobiłaby z „Razem” drobny wersalik nad liczbą — tu potrzebny zwykły
   tekst tej samej wagi co reszta tabeli. */
body.laris-konto .woocommerce-MyAccount-content table.shop_table tfoot th,
body.laris-konto .woocommerce-MyAccount-content table.shop_table tfoot td {
  padding: 12px 14px;
  border: 0;
  border-top: 1px solid var(--l-line);
  color: var(--l-ink);
  font-family: var(--l-font-body);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}

/* Skrajne komórki bez wyściółki bocznej — inaczej treść tabeli stoi
   o 14 px do środka względem wszystkiego innego w karcie. */
body.laris-konto .woocommerce-MyAccount-content table.shop_table th:first-child,
body.laris-konto .woocommerce-MyAccount-content table.shop_table td:first-child {
  padding-left: 0;
}

/*
  Poniżej progu tabela zamówień przestaje być tabelą (patrz sekcja niżej),
  więc reguły „ostatniego wiersza” i „ostatniej kolumny” muszą kończyć się
  razem z nią.

  To nie ostrożność na zapas: „tbody tr:last-child td” ma o jeden człon
  WIĘCEJ niż selektory układu kartowego, więc bez tego ograniczenia
  wygrywałoby ono z nimi i ostatnia karta zamówienia zostałaby bez kresek
  między danymi. Domknięcie progiem jest prostsze niż podbijanie
  specyficzności w kilkunastu miejscach niżej.
*/
@media (min-width: 769px) {
  body.laris-konto .woocommerce-MyAccount-content table.shop_table tbody tr:last-child td {
    padding-bottom: 0;
    border-bottom: 0;
  }

  /* Ostatnia kolumna to działania („Zobacz”, „Pobierz”) — do prawej
     krawędzi karty, jak przyciski wszędzie indziej w serwisie. */
  body.laris-konto .woocommerce-MyAccount-content table.shop_table th:last-child,
  body.laris-konto .woocommerce-MyAccount-content table.shop_table td:last-child {
    padding-right: 0;
    text-align: right;
  }
}

/* Numer zamówienia to jedyne, w co się na tej liście klika — musi wyglądać
   na odnośnik, a nie na tekst tej samej wagi co data. */
body.laris-konto .woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a {
  color: var(--l-brand-dark);
  font-weight: 600;
}

/* Przyciski w kolumnie działań są drugorzędne — nie mogą wyglądać jak
   „Dodaj do koszyka”. Obrys zamiast wypełnienia i mniejsza miara. */
body.laris-konto .woocommerce-MyAccount-content table.shop_table td a.button,
body.laris-konto .woocommerce-MyAccount-content table.shop_table td .button {
  min-height: 38px;
  padding: 0 18px;
  background: var(--l-surface);
  border: 1px solid var(--l-line-strong);
  color: var(--l-brand-dark);
  font-size: 14px;
}

/* Drugie i ostatnie „!important” w tym pliku. Powód ten sam, co przy
   przyciskach formularzy: obramowanie z motywu nadrzędnego jest
   „!important”, a nasza reguła wyżej odbija je tylko na jeden kolor.
   Tu potrzebny jest inny — obrys, nie wypełnienie. */
body.laris-konto .woocommerce-MyAccount-content table.shop_table td a.button:hover,
body.laris-konto .woocommerce-MyAccount-content table.shop_table td .button:hover {
  background: var(--l-brand-tint);
  border-color: var(--l-brand) !important;
  color: var(--l-brand-dark);
}

/* ── tabela zamówień na telefonie ── */

/*
  Wiersze robią się kartami, a nazwa kolumny wraca do komórki z atrybutu
  „data-title”.

  Dlaczego z „data-title”, a nie przez powtórzenie nagłówków własnym
  szablonem: WooCommerce wypisuje ten atrybut w każdej komórce
  myaccount/orders.php od lat, i wypisuje go JUŻ PRZETŁUMACZONY. Gdybyśmy
  wpisali nazwy kolumn w arkuszu (content: "Zamówienie"), niemiecka
  i angielska wersja konta pokazywałaby polskie nagłówki — a szablonu
  wtyczki nie chcemy kopiować do motywu, żeby nie pilnować go przy każdej
  aktualizacji WooCommerce.

  Próg 768 px, nie 767: dokładnie na nim stoi arkusz woocommerce-smallscreen
  wtyczki, który robi z tej samej tabeli listę. Rozjazd o jeden piksel
  zostawiłby wąski pas, na którym działa jeden arkusz, a drugi nie.

  Komórka jest rzędem elastycznym — podpis z lewej, wartość z prawej.
  Wybrane celowo tak, a nie „podpis nad wartością”: arkusz wtyczki dosuwa
  te komórki do prawej („text-align: right”) i robi to z „!important”.
  W rzędzie elastycznym to nie ma znaczenia, bo o położeniu decyduje
  „justify-content”, a nie wyrównanie tekstu — czyli nie musimy odbijać
  cudzego „!important” swoim.
*/
@media (max-width: 768px) {
  body.laris-konto .woocommerce-MyAccount-content table.woocommerce-orders-table,
  body.laris-konto .woocommerce-MyAccount-content table.woocommerce-orders-table tbody {
    display: block;
  }

  body.laris-konto .woocommerce-MyAccount-content table.woocommerce-orders-table thead {
    display: none;
  }

  body.laris-konto .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr {
    display: block;
    margin-bottom: 12px;
    padding: 6px 16px;
    background: var(--l-bg);
    border: 1px solid var(--l-line);
    border-radius: var(--l-r);
  }

  body.laris-konto .woocommerce-MyAccount-content table.woocommerce-orders-table tbody tr:last-child {
    margin-bottom: 0;
  }

  body.laris-konto .woocommerce-MyAccount-content table.woocommerce-orders-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--l-line);
    text-align: left;
  }

  body.laris-konto .woocommerce-MyAccount-content table.woocommerce-orders-table tbody td:last-child {
    padding-bottom: 10px;
    border-bottom: 0;
  }

  /* Podpis kolumny. „float: left” z arkusza wtyczki w rzędzie elastycznym
     jest pomijany, więc nie trzeba go zdejmować. */
  body.laris-konto .woocommerce-MyAccount-content table.woocommerce-orders-table tbody td::before {
    content: attr(data-title);
    flex: 0 0 auto;
    color: var(--l-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Przycisk „Zobacz” dostaje całą szerokość karty — z podpisem „Akcje”
     obok wyglądałby jak trzecia dana zamówienia, a to jedyne miejsce
     w karcie, w które się klika. */
  body.laris-konto .woocommerce-MyAccount-content table.woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions {
    display: block;
    padding-top: 12px;
  }

  body.laris-konto .woocommerce-MyAccount-content table.woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions::before {
    content: none;
  }

  body.laris-konto .woocommerce-MyAccount-content table.woocommerce-orders-table tbody td.woocommerce-orders-table__cell-order-actions a.button {
    display: flex;
    width: 100%;
  }
}

/* Stronicowanie listy zamówień. */
body.laris-konto .woocommerce-pagination {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

/* ═══ adresy ═══ */

/* WooCommerce daje tu ten sam układ 48% + pływak, co przy logowaniu.
   Siatka z „auto-fit” obsługuje oba przypadki: dwa adresy obok siebie
   i jeden na całą szerokość, gdy w sklepie wyłączona jest wysyłka. */
body.laris-konto .woocommerce-Addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

body.laris-konto .woocommerce-Address {
  float: none;
  width: auto;
  padding: 20px 22px;
  background: var(--l-bg);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
}

/* Tytuł adresu i odnośnik „Edytuj” stoją w jednym <header>. Bez tego
   odnośnik ląduje pod nagłówkiem osobnym wierszem. */
body.laris-konto .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

body.laris-konto .woocommerce-Address-title h2,
body.laris-konto .woocommerce-Address-title h3 {
  margin: 0;
  font-size: 17px;
}

body.laris-konto .woocommerce-Address-title a.edit {
  flex: 0 0 auto;
  color: var(--l-brand-dark);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

body.laris-konto .woocommerce-Address address {
  margin: 0;
  color: var(--l-ink-soft);
  font-size: 15px;
  font-style: normal;
  line-height: 1.7;
}

/* ═══ komunikaty i puste stany ═══ */

/* Powiadomienia WooCommerce w postaci zastanej to szary pasek #f6f5f7
   z trzypikselową kreską u góry i znakiem z własnego kroju wtyczki.
   Sprowadzamy je do jednego wyglądu z resztą serwisu: kolor niesie lewa
   krawędź, a nie górna, i pochodzi z palety. */
body.laris-konto .woocommerce-message,
body.laris-konto .woocommerce-info,
body.laris-konto .woocommerce-error {
  margin: 0 0 20px;
  padding: 16px 20px;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-left: 4px solid var(--l-line-strong);
  border-radius: var(--l-r);
  color: var(--l-ink);
  font-size: 15px;
  line-height: 1.6;
  list-style: none;
}

/* Znak z kroju „WooCommerce” — zdejmujemy razem z miejscem, które zajmował
   (wtyczka rezerwuje je wyściółką z lewej). */
body.laris-konto .woocommerce-message::before,
body.laris-konto .woocommerce-info::before,
body.laris-konto .woocommerce-error::before {
  content: none;
}

body.laris-konto .woocommerce-message {
  border-left-color: var(--l-ok);
}

body.laris-konto .woocommerce-info {
  border-left-color: var(--l-brand);
}

body.laris-konto .woocommerce-error {
  border-left-color: var(--l-err);
}

/*
  Pusty stan: „Nie ma jeszcze żadnych zamówień”, „Brak dostępnych plików”.

  WooCommerce wypisuje to jako zwykłe powiadomienie, w którym PRZYCISK STOI
  PRZED TEKSTEM i jest odrzucony pływakiem w prawo. Czyta się to od końca:
  najpierw „Przeglądaj produkty”, potem dopiero czego brakuje.

  Poznajemy taki komunikat po tym, że ma w środku przycisk — zwykłe
  powiadomienie o błędzie logowania go nie ma. Kolejność prostujemy
  „order”-em: sam napis jest gołym tekstem, bez znacznika, więc nie da się
  go przenieść — ale można przenieść przycisk, a tekst zostanie na miejscu.

  Blok jest spokojny celowo: brak zamówień u nowego klienta B2B to stan
  normalny, a nie usterka, więc nie ma tu ani czerwieni, ani wykrzyknika.
*/
body.laris-konto .woocommerce-MyAccount-content .woocommerce-info:has(.button) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 44px 24px;
  background: var(--l-bg);
  border: 1px dashed var(--l-line-strong);
  color: var(--l-muted);
  text-align: center;
}

body.laris-konto .woocommerce-MyAccount-content .woocommerce-info:has(.button) .button {
  order: 1;
  float: none;
  background: var(--l-brand-dark);
  border-color: var(--l-brand-dark);
  color: #fff;
}

body.laris-konto .woocommerce-MyAccount-content .woocommerce-info:has(.button) .button:hover {
  background: var(--l-brand-deep);
  border-color: var(--l-brand-deep);
  color: #fff;
}