/* ==========================================================================
   MOJE KONTO
   Ekranu nie ma w makiecie — zaprojektowany w obowiązującym języku:
   hero jak na archiwum, nawigacja jako etykiety wersalikowe, karty na cieple.
   ========================================================================== */

/* --------------------------------------------------------------------------
   RAMA STRONY
   Hello Elementor zwęża .site-main do 1140 px (theme.css, od 1200 px w górę),
   a projekt ma 1360 px z rynną --mp-gut. Koszyk (koszyk.css) i podstrony
   treściowe (strona.css) mają już swoje obejście; konto go nie miało, więc
   kolumna konta stała o 220 px węższa niż każdy inny ekran. Nie było tego
   widać, dopóki nad treścią stał drugi nagłówek na pełnej szerokości.
   Selektor z dwiema klasami body przebija regułę motywu nadrzędnego
   bez !important. Pilnuje tego tests/jakosc/zgodnosc-z-projektem.spec.js
   („maksymalna szerokość treści”).
   -------------------------------------------------------------------------- */

.woocommerce-account.woocommerce-page .site-main{
  max-width:var(--mp-max);
  width:100%;
}

.mp-konto{ background:var(--mp-cream); padding-block:clamp(30px,4vw,56px) clamp(56px,8vw,110px); }
.mp-konto__grid{ display:grid; grid-template-columns:minmax(180px,220px) 1fr; gap:clamp(24px,3vw,52px); }

.mp-konto__lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.mp-konto__poz a{
  display:block; padding:13px 0; min-height:var(--mp-tap);
  font:400 11px/1.5 var(--mp-sans); letter-spacing:.15em; text-transform:uppercase;
  color:var(--mp-body-2); border-bottom:1px solid var(--mp-line);
}
.mp-konto__poz a:hover{ color:var(--mp-ink); }
.mp-konto__poz a[aria-current="page"]{
  color:var(--mp-ink); border-bottom-color:var(--mp-ink);
}

.mp-konto__tresc{ min-width:0; }
.mp-konto__tresc > p{ font:300 15px/1.75 var(--mp-sans); color:var(--mp-body-2); max-width:66ch; }

/* --- kafle pulpitu --- */

.mp-kafle{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--mp-line); border:1px solid var(--mp-line); }
.mp-kafel{ background:var(--mp-warm); padding:22px 22px 24px; display:flex; flex-direction:column; gap:8px; }
.mp-kafel__etykieta{
  margin:0; font:400 10.5px/1 var(--mp-sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--mp-muted);
}
.mp-kafel__glowna{
  margin:0; font:300 clamp(22px,2.4vw,29px)/1.15 var(--mp-serif); color:var(--mp-ink);
}
.mp-kafel__glowna--pusta{ color:var(--mp-muted); }
.mp-kafel__glowna a{ color:var(--mp-ink); border-bottom:1px solid var(--mp-rule); }
.mp-kafel__glowna a:hover{ color:var(--mp-bronze); }
.mp-kafel__opis{ margin:0; font:300 13px/1.65 var(--mp-sans); color:var(--mp-body-2); }
.mp-kafel__opis a{ color:var(--mp-bronze); border-bottom:1px solid var(--mp-line-2); }
.mp-kafel__adres{
  margin:0; font:300 13.5px/1.7 var(--mp-sans); color:var(--mp-ink-2); font-style:normal;
}

/* --- lista zamówień --- */

.mp-zamowienia{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; background:var(--mp-line); border:1px solid var(--mp-line); }
.mp-zamowienie{
  background:var(--mp-warm); padding:20px 22px;
  display:grid; grid-template-columns:1fr auto; gap:12px 22px; align-items:center;
}
.mp-zamowienie__glowa{ display:flex; align-items:center; gap:12px; grid-column:1 / -1; }
.mp-zamowienie__numer{ font:300 20px/1 var(--mp-serif); color:var(--mp-ink); --mp-cyfry:var(--mp-cyfry-kolumna); }

.mp-znacznik{
  font:400 9.5px/1 var(--mp-sans); letter-spacing:.14em; text-transform:uppercase;
  padding:5px 9px; color:var(--mp-deep); background:var(--mp-stone);
}
.mp-znacznik--completed{ background:#E7EFE7; color:#3F5F43; }
.mp-znacznik--processing{ background:#F5EEE0; color:#8A6414; }
.mp-znacznik--cancelled,
.mp-znacznik--failed,
.mp-znacznik--refunded{ background:#F6EAE7; color:#8C3226; }

.mp-zamowienie__dane{ display:flex; flex-wrap:wrap; gap:6px 34px; margin:0; }
.mp-zamowienie__dane dt{
  font:400 10px/1.6 var(--mp-sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--mp-muted);
}
.mp-zamowienie__dane dd{ margin:0; font:300 14px/1.5 var(--mp-sans); color:var(--mp-ink-2); }
.mp-zamowienie__link{
  justify-self:end; min-height:var(--mp-tap); display:inline-flex; align-items:center;
  font:400 10.5px/1 var(--mp-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--mp-ink); border-bottom:1px solid var(--mp-rule);
}
.mp-zamowienie__link:hover{ color:var(--mp-bronze); }

.mp-strony{ display:flex; gap:12px; justify-content:center; margin-top:26px; }

/* --- logowanie i rejestracja --- */

.mp-logowanie{ background:var(--mp-cream); padding-block:clamp(34px,4.6vw,64px) clamp(56px,8vw,110px); }
.mp-logowanie__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,42px); align-items:start; }

.mp-karta{ background:var(--mp-warm); border:1px solid var(--mp-line); padding:clamp(24px,3vw,38px); }
.mp-karta__tytul{ margin:0 0 6px; font:300 clamp(21px,2.4vw,27px)/1.2 var(--mp-serif); color:var(--mp-ink); }
.mp-karta__wstep{ margin:0 0 20px; font:300 13.5px/1.75 var(--mp-sans); color:var(--mp-body-2); max-width:44ch; }

/* Wygląd pól formularza przeniesiony do style.css — te same reguły
   obowiązują na koncie, w zamówieniu i na stronie Kontakt. */

/* --- telefon --- */

@media (max-width:860px){
  .mp-konto__grid{ grid-template-columns:1fr; }
  .mp-konto__lista{ flex-direction:row; flex-wrap:wrap; gap:0 20px; }
  .mp-konto__poz a{ border-bottom-width:1px; }
  .mp-kafle{ grid-template-columns:1fr; }
  .mp-logowanie__grid{ grid-template-columns:1fr; }
  .mp-zamowienie{ grid-template-columns:1fr; }
  .mp-zamowienie__link{ justify-self:start; }
}