/* ==========================================================================
   Galeria Plytek: Obszar Moje konto (konto klienta).
   Zgodny z systemem wizualnym, siatka 1200 px, nawigacja 240 px, odstep 40 px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Glowna struktura strony konta
   -------------------------------------------------------------------------- */
.gp-konto-strona {
  background-color: var(--gp-kolor-tlo);
  padding-top: var(--gp-sp-32);
  padding-bottom: var(--gp-sp-72);
  min-height: 60vh;
}

.gp-konto-kontener {
  max-width: var(--gp-kontener-szerokosc);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gp-sp-20);
  padding-right: var(--gp-sp-20);
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1440px) {
  .gp-konto-kontener {
    padding-left: 0;
    padding-right: 0;
    width: 1200px;
  }
}

.gp-konto-naglowek-strony {
  margin-bottom: var(--gp-sp-32);
}

.gp-konto-tytul-strony {
  font-family: var(--gp-font-rodzina);
  font-size: var(--gp-tekst-h1-dzialu-rozmiar);
  line-height: var(--gp-tekst-h1-dzialu-interlinia);
  font-weight: 600;
  color: var(--gp-kolor-tekst-glowny);
  margin: 0;
}

.gp-konto-uklad {
  display: flex;
  gap: var(--gp-odstep-kolumn);
  align-items: flex-start;
  width: 100%;
}

.gp-konto-tresc {
  flex: 1 1 0;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Karty systemu wizualnego w obszarze konta
   -------------------------------------------------------------------------- */
.gp-karta {
  background-color: var(--gp-kolor-karta-pole);
  border: 1px solid var(--gp-kolor-obrys);
  border-radius: var(--gp-promien-przycisk-main);
  box-sizing: border-box;
}

.gp-sekcja-tytul {
  font-family: var(--gp-font-rodzina);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gp-kolor-tekst-pomocniczy);
  margin: 0 0 var(--gp-sp-16) 0;
}

.gp-sekcja-opis {
  font-family: var(--gp-font-rodzina);
  font-size: 13px;
  color: var(--gp-kolor-tekst-pomocniczy);
  margin: 0 0 var(--gp-sp-16) 0;
}

/* --------------------------------------------------------------------------
   1. Nawigacja konta (wspolna dla wszystkich ekranow)
   -------------------------------------------------------------------------- */
.gp-konto-uklad .woocommerce-MyAccount-navigation,
.gp-konto-nawigacja {
  float: none !important;
  margin: 0 !important;
  flex: 0 0 240px !important;
  width: 240px !important;
  background-color: var(--gp-kolor-karta-pole);
  border: 1px solid var(--gp-kolor-obrys);
  border-radius: var(--gp-promien-przycisk-main);
  padding: var(--gp-sp-8);
  box-sizing: border-box;
}

.gp-konto-uklad .woocommerce-MyAccount-content,
.gp-konto-tresc {
  float: none !important;
  margin: 0 !important;
  width: auto !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.gp-konto-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.woocommerce-MyAccount-navigation ul li,
.gp-konto-uklad .woocommerce-MyAccount-navigation ul li,
.gp-konto-pozycja {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  list-style: none !important;
}

.woocommerce-MyAccount-navigation ul li a::before,
.woocommerce-MyAccount-navigation ul li::before,
.gp-konto-nawigacja a::before,
.gp-konto-pozycja::before {
  content: none !important;
  display: none !important;
}

.woocommerce-MyAccount-navigation ul li a,
.gp-konto-uklad .woocommerce-MyAccount-navigation ul li a,
.gp-konto-link {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  text-align: left !important;
  padding: 10px 12px !important;
  border: none !important;
  border-radius: var(--gp-promien-pole);
  font-family: var(--gp-font-rodzina);
  font-size: 14px;
  font-weight: 400;
  color: var(--gp-kolor-tekst-glowny);
  line-height: 1.4;
  text-decoration: none;
  background: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

/* Najechanie BEZ tła (21.09). Takie samo tło jak pozycja bieżąca dawało dwie
   pigułki jedna przy drugiej (2 px odstępu), a na telefonie dotknięta pozycja
   zostaje „najechana”, więc podświetlone były dwie naraz. Tło ma tylko bieżąca.
   Selektor w obrębie menu: klasę `gp-konto-link` ma też ikona konta w nagłówku,
   a samo `.gp-konto-link:hover` przebarwiało ją tylko na stronach konta (22.09).
   Bez pozycji bieżącej: jej reguła ma mniejszą swoistość, więc najechanie
   zmieniało kolor napisu na tle pozycji bieżącej (recenzja 22.09). */
@media (hover: hover) {
  .woocommerce-MyAccount-navigation ul li:not(.is-active) a:hover,
  .gp-konto-uklad .woocommerce-MyAccount-navigation ul li:not(.is-active) a:hover,
  .gp-konto-nawigacja .gp-konto-link:not(.is-active):hover {
    color: var(--gp-kolor-akcent) !important;
    text-decoration: none;
  }
}

.gp-konto-link.is-active,
.gp-konto-pozycja.is-active .gp-konto-link,
.woocommerce-MyAccount-navigation ul li.is-active a {
  background-color: var(--gp-kolor-pas-wyrozniony) !important;
  font-weight: 600 !important;
  color: var(--gp-kolor-tekst-glowny) !important;
}

.gp-konto-ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  flex: 0 0 auto;
  color: currentColor;
}

.gp-konto-ikona svg {
  width: 18px;
  height: 18px;
  display: block;
}

.gp-konto-tekst {
  flex: 1 1 auto;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Ekran O: Kokpit
   -------------------------------------------------------------------------- */
.gp-kokpit {
  display: flex;
  flex-direction: column;
  gap: var(--gp-sp-24);
}

.gp-kokpit-powitanie {
  padding: var(--gp-sp-24);
}

.gp-kokpit-naglowek {
  font-family: var(--gp-font-rodzina);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--gp-kolor-tekst-glowny);
  margin: 0 0 var(--gp-sp-8) 0;
}

.gp-kokpit-opis {
  font-family: var(--gp-font-rodzina);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gp-kolor-tekst-pomocniczy);
  margin: 0;
}

.gp-kokpit-kafle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gp-sp-16);
}

.gp-kokpit-kafel {
  padding: var(--gp-sp-20);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gp-sp-12);
  min-height: 120px;
}

.gp-kafel-etykieta {
  font-family: var(--gp-font-rodzina);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gp-kolor-tekst-pomocniczy);
  display: block;
}

.gp-kafel-wartosc {
  font-family: var(--gp-font-rodzina);
  font-size: 15px;
  font-weight: 600;
  color: var(--gp-kolor-tekst-glowny);
  line-height: 1.4;
  display: block;
}

.gp-kafel-link {
  font-family: var(--gp-font-rodzina);
  font-size: 13px;
  font-weight: 500;
  color: var(--gp-kolor-akcent);
  text-decoration: none;
  display: inline-block;
  transition: color 0.15s ease-in-out;
}

.gp-kafel-link:hover {
  color: var(--gp-kolor-akcent-ciemny);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4. Ekran P: Zamowienia
   -------------------------------------------------------------------------- */
.gp-zamowienia-karta {
  padding: var(--gp-sp-24);
  overflow-x: auto;
}

.gp-zamowienia-tabela {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-family: var(--gp-font-rodzina);
}

.gp-zamowienia-tabela thead th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gp-kolor-tekst-pomocniczy);
  padding: var(--gp-sp-12) var(--gp-sp-16);
  border-bottom: 1px solid var(--gp-kolor-obrys);
}

.gp-zamowienie-wiersz td {
  padding: var(--gp-sp-16);
  border-bottom: 1px solid rgba(216, 209, 198, 0.6);
  vertical-align: middle;
}

.gp-zamowienie-numer {
  font-size: 14px;
  font-weight: 600;
  color: var(--gp-kolor-tekst-glowny);
}

.gp-zamowienie-data {
  font-size: 14px;
  font-weight: 400;
  color: var(--gp-kolor-tekst-pomocniczy);
}

.gp-plakietka-statusu {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--gp-promien-pelny);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.gp-status-realizacja {
  color: var(--gp-kolor-akcent);
  background-color: #FAEDE6;
}

.gp-status-zrealizowane {
  color: #2E6644;
  background-color: #E6F2EB;
}

.gp-status-oczekujace,
.gp-status-anulowane,
.gp-status-inny {
  color: var(--gp-kolor-tekst-pomocniczy);
  background-color: var(--gp-kolor-pas-wyrozniony);
}

.gp-zamowienie-suma {
  font-size: 14px;
  font-weight: 600;
  color: var(--gp-kolor-tekst-glowny);
}

.gp-akcja-szczegoly {
  font-size: 13px;
  font-weight: 500;
  color: var(--gp-kolor-akcent);
  text-decoration: none;
}

.gp-akcja-szczegoly:hover {
  color: var(--gp-kolor-akcent-ciemny);
  text-decoration: underline;
}

.gp-zamowienia-puste {
  padding: var(--gp-sp-48) var(--gp-sp-24);
  text-align: center;
}

.gp-puste-naglowek {
  font-family: var(--gp-font-rodzina);
  font-size: 18px;
  font-weight: 600;
  color: var(--gp-kolor-tekst-glowny);
  margin: 0 0 var(--gp-sp-8) 0;
}

.gp-puste-opis {
  font-family: var(--gp-font-rodzina);
  font-size: 14px;
  color: var(--gp-kolor-tekst-pomocniczy);
  margin: 0 0 var(--gp-sp-24) 0;
}

/*
 * Zdanie nad siatka ulubionych („Masz odlozonych plytek: 3").
 *
 * Wlasna klasa, a NIE pozyczona `gp-puste-opis`: tamta nalezy do stanu pustego
 * i ma pod soba przycisk, wiec wiekszy odstep dolny. Pozyczenie zwiazaloby dwa
 * niezalezne ekrany jedna regula i pierwsza zmiana odstepu w pustym stanie
 * ruszylaby takze liste, na ktorej nikt niczego nie zmienial.
 */
.gp-ulubione-wstep {
  font-family: var(--gp-font-rodzina);
  font-size: 14px;
  color: var(--gp-kolor-tekst-pomocniczy);
  margin: 0 0 var(--gp-sp-16) 0;
}

/* --------------------------------------------------------------------------
   5. Ekran R: Szczegoly zamowienia
   -------------------------------------------------------------------------- */
.gp-zamowienie-szczegoly {
  display: flex;
  flex-direction: column;
  gap: var(--gp-sp-24);
}

.gp-zamowienie-powrot {
  margin-bottom: -8px;
}

.gp-link-powrotu {
  font-family: var(--gp-font-rodzina);
  font-size: 13px;
  font-weight: 500;
  color: var(--gp-kolor-akcent);
  text-decoration: none;
}

.gp-link-powrotu:hover {
  color: var(--gp-kolor-akcent-ciemny);
  text-decoration: underline;
}

.gp-zamowienie-naglowek {
  margin-bottom: var(--gp-sp-8);
}

.gp-zamowienie-h2 {
  font-family: var(--gp-font-rodzina);
  font-size: 24px;
  font-weight: 700;
  color: var(--gp-kolor-tekst-glowny);
  margin: 0 0 var(--gp-sp-4) 0;
}

.gp-zamowienie-podtytul {
  font-family: var(--gp-font-rodzina);
  font-size: 14px;
  color: var(--gp-kolor-tekst-pomocniczy);
  margin: 0;
}

.gp-karta-towary {
  padding: var(--gp-sp-24);
}

.gp-towary-lista {
  display: flex;
  flex-direction: column;
}

/* SIATKA TABELI TOWAROW.
   Naglowek i wiersze musza miec DOKLADNIE te sama definicje kolumn, inaczej
   liczby przestaja stac pod swoimi nazwami. Dlatego szerokosci siedza w jednej
   zmiennej, a nie sa przepisane w dwoch regulach: przepisana wartosc rozjezdza
   sie przy pierwszej zmianie jednej z nich. */
:root {
  --gp-kolumny-towaru: 56px minmax(0, 1fr) 104px 104px 112px;
}

.gp-towar-wiersz {
  display: grid;
  grid-template-columns: var(--gp-kolumny-towaru);
  align-items: center;
  gap: var(--gp-sp-16);
  padding: var(--gp-sp-16) 0;
  border-bottom: 1px solid rgba(216, 209, 198, 0.6);
}

.gp-towary-naglowek {
  display: grid;
  grid-template-columns: var(--gp-kolumny-towaru);
  gap: var(--gp-sp-16);
  padding-bottom: var(--gp-sp-8);
  border-bottom: 1px solid var(--gp-kolor-obramowanie);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gp-kolor-tekst-pomocniczy);
}

.gp-towary-naglowek-towar {
  grid-column: 1 / 3;
}

.gp-towary-naglowek-kwota {
  text-align: right;
}

.gp-towar-wiersz:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.gp-towar-miniatura-kontener {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: var(--gp-promien-znacznik);
  overflow: hidden;
  background-color: var(--gp-kolor-pas-wyrozniony);
}

.gp-towar-miniatura {
  width: 56px;
  height: 56px;
  object-fit: cover;
  display: block;
}

.gp-towar-dane {
  flex: 1 1 auto;
  min-width: 0;
}

.gp-towar-nazwa {
  font-family: var(--gp-font-rodzina);
  font-size: 15px;
  font-weight: 600;
  color: var(--gp-kolor-tekst-glowny);
  margin: 0 0 var(--gp-sp-4) 0;
}

.gp-towar-nazwa a {
  color: inherit;
  text-decoration: none;
}

.gp-towar-nazwa a:hover {
  color: var(--gp-kolor-akcent);
}

.gp-towar-parametry {
  font-family: var(--gp-font-rodzina);
  font-size: 13px;
  color: var(--gp-kolor-tekst-pomocniczy);
  margin: 0;
}

.gp-towar-cena {
  font-family: var(--gp-font-rodzina);
  font-size: 15px;
  font-weight: 600;
  color: var(--gp-kolor-tekst-glowny);
  text-align: right;
  flex: 0 0 auto;
}

.gp-zamowienie-podsumowanie-siatka {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gp-sp-24);
}

.gp-karta-rozliczenie,
.gp-karta-dostawa {
  padding: var(--gp-sp-24);
}

.gp-rozliczenie-wiersze {
  display: flex;
  flex-direction: column;
  gap: var(--gp-sp-12);
}

.gp-rozliczenie-wiersz {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--gp-font-rodzina);
  font-size: 14px;
  color: var(--gp-kolor-tekst-glowny);
}

.gp-rozliczenie-etykieta {
  color: var(--gp-kolor-tekst-glowny);
}

.gp-rozliczenie-linia {
  height: 1px;
  background-color: var(--gp-kolor-obrys);
  margin: var(--gp-sp-4) 0;
}

.gp-rozliczenie-razem {
  font-size: 16px;
  font-weight: 600;
}

.gp-dostawa-nosnik {
  font-family: var(--gp-font-rodzina);
  font-size: 14px;
  font-weight: 600;
  color: var(--gp-kolor-tekst-glowny);
  margin: 0 0 var(--gp-sp-8) 0;
}

.gp-dostawa-informacja {
  font-family: var(--gp-font-rodzina);
  font-size: 13px;
  color: var(--gp-kolor-tekst-pomocniczy);
  line-height: 1.4;
  margin: 0 0 var(--gp-sp-16) 0;
}

.gp-adres-etykieta {
  font-family: var(--gp-font-rodzina);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gp-kolor-tekst-pomocniczy);
  margin: 0 0 var(--gp-sp-8) 0;
}

.gp-dostawa-adres-dane {
  font-family: var(--gp-font-rodzina);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gp-kolor-tekst-glowny);
  font-style: normal;
}

/* --------------------------------------------------------------------------
   6. Ekran S: Adresy oraz Ekran T: Dane konta (Wspolne formularze)
   -------------------------------------------------------------------------- */
.gp-adresy-ekran,
.gp-dane-konta-ekran {
  display: flex;
  flex-direction: column;
}

.gp-adresy-wstep {
  font-family: var(--gp-font-rodzina);
  font-size: 14px;
  color: var(--gp-kolor-tekst-pomocniczy);
  margin: 0 0 var(--gp-sp-24) 0;
}

.gp-adres-karta,
.gp-konto-karta {
  padding: var(--gp-sp-24);
  margin-bottom: var(--gp-sp-24);
}

.gp-form-wiersz-checkbox {
  display: flex;
  align-items: center;
  gap: var(--gp-sp-12);
  margin-bottom: var(--gp-sp-20);
}

.gp-checkbox-kontener {
  display: inline-flex;
  align-items: center;
  gap: var(--gp-sp-8);
  font-family: var(--gp-font-rodzina);
  font-size: 14px;
  color: var(--gp-kolor-tekst-glowny);
  cursor: pointer;
  margin: 0;
}

.gp-checkbox-kontener input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gp-kolor-akcent);
  margin: 0;
  cursor: pointer;
}

.gp-checkbox-objasnienie {
  font-family: var(--gp-font-rodzina);
  font-size: 12px;
  color: var(--gp-kolor-tekst-pomocniczy);
}

.gp-form-wiersz {
  display: flex;
  gap: var(--gp-sp-16);
  align-items: flex-start;
  margin-bottom: var(--gp-sp-16);
}

.gp-pole-kolumna {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.gp-pole-etykieta {
  display: block;
  font-family: var(--gp-font-rodzina);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gp-kolor-tekst-pomocniczy);
  height: 14px;
  line-height: 14px;
  margin-bottom: 6px;
}

/* Gwiazdka pola wymaganego dziedziczyla stopien pisma z etykiety i schodzila
   do 10 px, czyli ponizej progu czytelnosci na telefonie. Rowna sie teraz
   z tekstem, przy ktorym stoi. */
.gp-wymagane {
  color: var(--gp-kolor-akcent);
  margin-left: 2px;
  font-size: max(1em, 12px);
}

/* Precyzyjny styl pol tekstowych: wysokosc 44 px, obrys 1 px, promien 6 px */
.gp-pole-input,
.woocommerce input[type="text"].gp-pole-input,
.woocommerce input[type="email"].gp-pole-input,
.woocommerce input[type="tel"].gp-pole-input,
.woocommerce input[type="password"].gp-pole-input,
.woocommerce select.gp-pole-input {
  display: block;
  width: 100%;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  line-height: 42px;
  padding: 0 14px;
  background-color: var(--gp-kolor-biel);
  border: 1px solid var(--gp-kolor-obrys);
  border-radius: var(--gp-promien-pole);
  font-family: var(--gp-font-rodzina);
  font-size: 14px;
  color: var(--gp-kolor-tekst-glowny);
  box-sizing: border-box;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.gp-pole-input:focus,
.woocommerce input[type="text"].gp-pole-input:focus,
.woocommerce input[type="email"].gp-pole-input:focus,
.woocommerce input[type="tel"].gp-pole-input:focus,
.woocommerce input[type="password"].gp-pole-input:focus,
.woocommerce select.gp-pole-input:focus {
  outline: none;
  border-color: var(--gp-kolor-akcent);
  box-shadow: 0 0 0 3px rgba(174, 72, 38, 0.15);
}

.gp-pole-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23756D64' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

/* Scisle szerokosci kolumn wg specyfikacji */
.gp-szer-428 { width: 428px; }
.gp-szer-420 { width: 420px; }
.gp-szer-206 { width: 206px; }
.gp-szer-200 { width: 200px; }
.gp-szer-198 { width: 198px; }
.gp-szer-196 { width: 196px; }

.gp-pole-wyjasnienie-email {
  align-self: flex-end;
  height: 44px;
  display: flex;
  align-items: center;
  padding-left: var(--gp-sp-8);
}

.gp-wyjasnienie-tekst {
  font-family: var(--gp-font-rodzina);
  font-size: 12px;
  color: var(--gp-kolor-tekst-pomocniczy);
}

.gp-haslo-wskazowka {
  font-family: var(--gp-font-rodzina);
  font-size: 12px;
  color: var(--gp-kolor-tekst-pomocniczy);
  margin: var(--gp-sp-8) 0 0 0;
}

/* Przyciski formularza */
.gp-form-przyciski-dol {
  display: flex;
  align-items: center;
  gap: var(--gp-sp-16);
  margin-top: var(--gp-sp-8);
}

.gp-przycisk-glowny,
.woocommerce button.button.gp-przycisk-glowny {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 13px 22px;
  background-color: var(--gp-kolor-akcent);
  color: var(--gp-kolor-biel);
  border: none;
  border-radius: var(--gp-promien-pole);
  font-family: var(--gp-font-rodzina);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.15s ease-in-out;
}

.gp-przycisk-glowny:hover,
.woocommerce button.button.gp-przycisk-glowny:hover {
  background-color: var(--gp-kolor-akcent-ciemny);
  color: var(--gp-kolor-biel);
  text-decoration: none;
}

.gp-przycisk-anuluj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 13px 22px;
  background-color: transparent;
  color: var(--gp-kolor-tekst-glowny);
  border: 1px solid var(--gp-kolor-obrys);
  border-radius: var(--gp-promien-pole);
  font-family: var(--gp-font-rodzina);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.gp-przycisk-anuluj:hover {
  border-color: var(--gp-kolor-tekst-glowny);
  color: var(--gp-kolor-tekst-glowny);
  text-decoration: none;
}

/* AKCJE ZAMOWIENIA: „Zaplac” i „Anuluj”, 2026-09-21.
   Na liscie zamowien przyciski sa nizsze, zeby wiersz tabeli nie puchl;
   w szczegolach stoja pod naglowkiem w pelnej wysokosci. */
.gp-zamowienie-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gp-sp-8);
  margin-top: var(--gp-sp-16);
}

.gp-zamowienie-akcje--lista {
  margin: 0 0 var(--gp-sp-8) 0;
  justify-content: flex-end;
}

/* 44 px: minimalny cel dotykowy (audyt DeepSeek 21.09, było 36 px). */
.gp-zamowienie-akcje--lista .gp-przycisk-glowny,
.gp-zamowienie-akcje--lista .gp-przycisk-anuluj {
  height: 44px;
  padding: 10px 16px;
  font-size: 13px;
}

.gp-td-akcja {
  text-align: right;
}

/* Dane do przelewu w szczegolach zamowienia, ten sam uklad co na ekranie po zakupie. */
.gp-karta-przelew {
  padding: var(--gp-sp-24);
}

.gp-przelew-wiersze {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gp-sp-8);
}

.gp-przelew-wiersz {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gp-sp-4) var(--gp-sp-16);
  font-size: 14px;
}

.gp-przelew-wiersz dt {
  flex: 0 0 160px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--gp-kolor-tekst-pomocniczy);
}

.gp-przelew-wiersz dd {
  margin: 0;
  color: var(--gp-kolor-tekst-glowny);
  overflow-wrap: anywhere;
}

.gp-przelew-wiersz--mocny dd {
  font-weight: 600;
}

.gp-przelew-uwaga {
  margin: var(--gp-sp-16) 0 0 0;
  font-size: 13px;
  color: var(--gp-kolor-tekst-pomocniczy);
}

/* --------------------------------------------------------------------------
   8. Ekran U: Logowanie i zalozenie konta
   -------------------------------------------------------------------------- */
.gp-logowanie-rejestracja-siatka {
  display: flex;
  gap: var(--gp-odstep-kolumn);
  justify-content: center;
  align-items: flex-start;
  margin-top: var(--gp-sp-16);
  margin-bottom: var(--gp-sp-48);
}

.gp-logowanie-karta {
  width: 440px;
  flex: 0 0 440px;
  padding: var(--gp-sp-32);
}

.gp-rejestracja-karta {
  width: 456px;
  flex: 0 0 456px;
  padding: var(--gp-sp-32);
}

/* EKRANY HASLA, 2026-09-09.

   Odzyskiwanie hasla to ta sama czynnosc co logowanie, tylko w dwoch krokach,
   wiec uklad jest ten sam: jedna karta, tytul wersalikami, etykieta nad polem.
   Roznica jest jedna: karta stoi SAMA i wysrodkowana, bo nie ma tu drugiej
   kolumny do porownania, a szeroka na 456 px karta rozciagnieta na cala
   szerokosc strony wygladalaby jak niedokonczony formularz. */
.gp-haslo-siatka {
  display: flex;
  justify-content: center;
  margin-top: var(--gp-sp-16);
  margin-bottom: var(--gp-sp-48);
}

.gp-haslo-karta {
  width: 440px;
  flex: 0 0 440px;
  padding: var(--gp-sp-32);
}

.gp-haslo-wstep {
  margin: 0 0 var(--gp-sp-20);
  font-size: var(--gp-tekst-glowny-rozmiar);
  line-height: var(--gp-tekst-glowny-interlinia);
  color: var(--gp-kolor-tekst-drugi);
}

.gp-haslo-wstep + .gp-haslo-wstep {
  margin-top: calc(-1 * var(--gp-sp-8));
}

@media (max-width: 767px) {
  .gp-haslo-karta {
    width: 100%;
    flex: 1 1 auto;
  }
}

.gp-karta-logowania-tytul {
  font-family: var(--gp-font-rodzina);
  font-size: 20px;
  font-weight: 600;
  color: var(--gp-kolor-tekst-glowny);
  margin: 0 0 var(--gp-sp-20) 0;
}

.gp-rejestracja-wstep {
  font-family: var(--gp-font-rodzina);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gp-kolor-tekst-pomocniczy);
  margin: -8px 0 var(--gp-sp-20) 0;
}

.gp-form-grupa {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--gp-sp-16);
}

.gp-form-wiersz-zapamietaj,
.gp-form-wiersz-zgoda {
  margin-bottom: var(--gp-sp-20);
}

.gp-form-wiersz-zgoda a {
  color: var(--gp-kolor-akcent);
  text-decoration: underline;
}

.gp-przycisk-pelny {
  width: 100%;
}

.gp-form-nie-pamietam {
  text-align: center;
  margin-top: var(--gp-sp-16);
}

.gp-nie-pamietam-link {
  font-family: var(--gp-font-rodzina);
  font-size: 13px;
  font-weight: 500;
  color: var(--gp-kolor-akcent);
  text-decoration: none;
}

.gp-nie-pamietam-link:hover {
  color: var(--gp-kolor-akcent-ciemny);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   9. Wersja mobilna (ponizej 900 px)
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .gp-konto-uklad {
    flex-direction: column;
    gap: var(--gp-sp-24);
  }

  /* `!important` MUSI tu byc.
     Regula podstawowa ma `width: 240px !important` i `flex: 0 0 240px !important`
     (potrzebne, zeby przebic style motywu nadrzednego Storefront). Nadpisanie
     bez `!important` przegrywa po cichu, wiec na telefonie nawigacja zostawala
     waska na 240 px: z pieciu pozycji widac bylo dwie, reszta wychodzila poza
     kadr, a pod nimi zostawala pusta przestrzen po ukladzie pionowym.
     Zmierzone na zrzucie 390 px: widoczne tylko „Kokpit" i „Zamowienia". */
  .gp-konto-uklad .woocommerce-MyAccount-navigation,
  .gp-konto-nawigacja {
    width: 100% !important;
    flex: 0 0 auto !important;
    overflow: visible;
    padding: var(--gp-sp-8);
  }

  /* ZAWIJANIE ZAMIAST PRZEWIJANIA W BOK, poprawione 2026-09-10.
     Poprzednia wersja ustawiala szesc pozycji w jednym rzedzie z przewijaniem
     poziomym. Zmierzone na 390 px: w kadrze miescily sie dwie, a Adresy,
     Dane konta i Wyloguj sie trzeba bylo znalezc przesuwaniem palcem w bok.
     Pasek przewijany poziomo dziala tylko wtedy, gdy uzytkownik WIE, ze sie
     przewija, a tu nie bylo o tym zadnego sygnalu poza urwanym slowem.
     Szesc krotkich pozycji miesci sie w dwoch rzedach i wtedy widac wszystkie. */
  /*
   * SIATKA DWUKOLUMNOWA, A NIE ZAWIJANY RZAD (poprawione 11 wrzesnia).
   *
   * Poprzednia wersja ustawiala pozycje w rzedzie z zawijaniem. Pozycje maja
   * rozna dlugosc („Kokpit" kontra „Metody platnosci"), wiec kazdy rzad konczyl
   * sie w innym miejscu, a podswietlona pozycja biezaca dodatkowo rozbijala
   * rytm. Zgloszenie wlasciciela ze zrzutu: „konto na mobilce jest rozjechane
   * i nieprzygotowane".
   *
   * Siatka o rownych kolumnach ustawia wszystkie pozycje w jednej linii pionowej
   * i poziomej. Osiem pozycji daje cztery rowne rzedy zamiast trzech nierownych.
   */
  .gp-konto-uklad .woocommerce-MyAccount-navigation ul,
  .gp-konto-menu {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--gp-sp-8);
    width: auto;
    min-width: 0;
  }

  .gp-konto-uklad .woocommerce-MyAccount-navigation ul li,
  .gp-konto-menu > li {
    width: auto !important;
    min-width: 0;
  }

  /*
   * Napis MOZE sie zawinac, a nie wyjsc poza komorke. `nowrap` przy siatce
   * o stalych kolumnach wypychal „Metody platnosci" poza krawedz karty.
   */
  .woocommerce-MyAccount-navigation ul li a,
  .gp-konto-link {
    white-space: normal !important;
    min-height: 44px;
    align-items: center !important;
  }

  /* Napis siedzi w osobnym `span`, ktory ma `nowrap` w regule glownej.
     Bez zdjecia go tutaj „Metody platnosci" nadal wychodzi poza komorke,
     mimo ze odnosnik wokol niego juz sie zawija. */
  .gp-konto-tekst {
    white-space: normal;
  }

  .gp-kokpit-kafle {
    grid-template-columns: 1fr;
  }

  .gp-zamowienie-podsumowanie-siatka {
    grid-template-columns: 1fr;
  }

  /* Pola formularzy na pelna szerokosc */
  .gp-form-wiersz {
    flex-direction: column;
    gap: var(--gp-sp-16);
  }

  .gp-pole-kolumna,
  .gp-szer-428,
  .gp-szer-420,
  .gp-szer-206,
  .gp-szer-200,
  .gp-szer-198,
  .gp-szer-196 {
    width: 100% !important;
    max-width: 100% !important;
  }

  .gp-pole-wyjasnienie-email {
    height: auto;
    padding-left: 0;
    margin-top: -8px;
  }

  /* Tabela zamowien zamienia sie w liste kart */
  .gp-zamowienia-tabela,
  .gp-zamowienia-tabela thead,
  .gp-zamowienia-tabela tbody,
  .gp-zamowienia-tabela th,
  .gp-zamowienia-tabela td,
  .gp-zamowienia-tabela tr {
    display: block;
  }

  .gp-zamowienia-tabela thead {
    display: none;
  }

  .gp-zamowienie-wiersz {
    background-color: var(--gp-kolor-biel);
    border: 1px solid var(--gp-kolor-obrys);
    border-radius: var(--gp-promien-przycisk-main);
    padding: var(--gp-sp-16);
    margin-bottom: var(--gp-sp-16);
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-8);
  }

  .gp-zamowienie-wiersz td {
    padding: 0;
    border-bottom: none;
  }

  /* Wiersz 1: numer i status */
  .gp-td-numer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Wiersz 2: data i suma */
  .gp-td-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .gp-td-akcja {
    margin-top: var(--gp-sp-8);
    text-align: left;
  }

  .gp-zamowienie-akcje--lista {
    justify-content: flex-start;
  }

  .gp-przelew-wiersz dt {
    flex-basis: 100%;
  }

  /* Logowanie i rejestracja na mobilu */
  .gp-logowanie-rejestracja-siatka {
    flex-direction: column;
    align-items: center;
  }

  .gp-logowanie-karta,
  .gp-rejestracja-karta {
    width: 100% !important;
    flex: 0 0 auto;
    padding: var(--gp-sp-20);
  }
}

/* ==========================================================================
   PELNE ROZLICZENIE POZYCJI I ZAMOWIENIA, 2026-09-03
   Uklad wzorowany na PrestaShop: kwoty jednostkowe i rozbicie przy pozycji,
   blok netto, VAT i dwa totale w podsumowaniu.
   ========================================================================== */
/* Komorki kwot: jedna kolumna na netto, VAT i brutto. Brutto jest kwota,
   ktora kupujacy placi, wiec jest najmocniejsze. */
.gp-towar-kwota {
  text-align: right;
  white-space: nowrap;
  font-size: 14px;
  color: var(--gp-kolor-tekst-glowny);
}

.gp-towar-kwota-netto,
.gp-towar-kwota-vat {
  color: var(--gp-kolor-tekst-pomocniczy);
}

.gp-towar-kwota-brutto {
  font-size: 15px;
  font-weight: 700;
}

/* Stawka pod kwota podatku. Sama kwota nie mowi, ile procent naliczono,
   a koszyk moze miec plytki na 23% i mozaiki na 8% jednoczesnie. */
.gp-towar-stawka {
  display: block;
  font-size: 11px;
  color: var(--gp-kolor-tekst-pomocniczy);
}

/* TELEFON: naglowek kolumn znika, bo piec kolumn nie miesci sie na 360 px.
   Kwoty ida pod dane towaru, kazda w swoim wierszu, a nazwe kolumny podaje
   data-etykieta. Bez tego zostalyby trzy gole liczby jedna pod druga. */
@media (max-width: 720px) {
  .gp-towary-naglowek {
    display: none;
  }

  .gp-towar-wiersz {
    grid-template-columns: 56px minmax(0, 1fr);
    row-gap: var(--gp-sp-8);
  }

  .gp-towar-kwota {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: var(--gp-sp-4, 4px);
    text-align: right;
  }

  /* `margin-right: auto` na etykiecie, NIE `justify-content: space-between`
     na rodzicu. Wiersz VAT ma trzy elementy (etykieta, kwota, stawka), wiec
     rozdzielanie odstepow rozrzucalo kwote na srodek, a stawke na krawedz.
     Odepchniecie samej etykiety trzyma kwote i stawke razem przy prawej. */
  .gp-towar-kwota::before {
    content: attr(data-etykieta);
    margin-right: auto;
    font-size: 12px;
    color: var(--gp-kolor-tekst-pomocniczy);
  }

  .gp-towar-stawka {
    display: inline;
    margin-left: var(--gp-sp-4, 4px);
  }
}

/* Podsuma netto: wyrozniona lekko, zeby oko odroznilo ja od skladnikow,
   ale slabiej niz „Razem brutto", ktore jest kwota do zaplaty. */
.gp-rozliczenie-podsuma .gp-rozliczenie-etykieta,
.gp-rozliczenie-podsuma .gp-rozliczenie-wartosc {
  font-weight: 600;
}

.gp-rozliczenie-rabat .gp-rozliczenie-wartosc,
.gp-rozliczenie-zwrot .gp-rozliczenie-wartosc {
  color: var(--gp-kolor-akcent);
}

.gp-rozliczenie-zaplacono .gp-rozliczenie-etykieta,
.gp-rozliczenie-zaplacono .gp-rozliczenie-wartosc {
  color: #2E6644;
  font-weight: 600;
}

.gp-rozliczenie-do-zaplaty .gp-rozliczenie-etykieta,
.gp-rozliczenie-do-zaplaty .gp-rozliczenie-wartosc {
  color: var(--gp-kolor-akcent);
  font-weight: 600;
}

/* Skladnik rozliczenia w dwoch kwotach: netto slabiej, brutto mocniej.
   Brutto jest kwota, ktora kupujacy placi, wiec ma byc czytelniejsze. */
.gp-rozliczenie-para .gp-rozliczenie-wartosc {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.gp-rozliczenie-netto {
  font-size: 12px;
  color: var(--gp-kolor-tekst-pomocniczy);
}

.gp-rozliczenie-brutto {
  font-size: 14px;
  font-weight: 600;
  color: var(--gp-kolor-tekst-glowny);
}

/* Rabat i zwrot to kwoty ODEJMOWANE, wiec musza odroznic sie kolorem od
   skladnikow dodawanych. Kolor akcentu jest ustawiony na `.gp-rozliczenie-wartosc`,
   czyli na RODZICU. Odkad rabat pokazuje netto i brutto osobno, akcent do nich
   nie dochodzi: dziecko z wlasna wlasnoscia `color` nie dziedziczy po rodzicu.
   Reguly wyzej (0,1,0) wygrywaly z niczym, bo dziedziczenie nie ma swoistosci.
   Dlatego kolor trzeba podac wprost, selektorem o wyzszej swoistosci (0,2,0). */
.gp-rozliczenie-rabat .gp-rozliczenie-netto,
.gp-rozliczenie-rabat .gp-rozliczenie-brutto,
.gp-rozliczenie-zwrot .gp-rozliczenie-netto,
.gp-rozliczenie-zwrot .gp-rozliczenie-brutto {
  color: var(--gp-kolor-akcent);
}

/* Komunikat po wyslaniu reklamacji albo zwrotu.
   Tresc przychodzi w adresie, bo formularz idzie do admin-post.php, gdzie
   sesja WooCommerce nie wstaje i zwykle komunikaty sklepu nie dzialaja. */
.gp-komunikat {
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1px solid var(--gp-kolor-obrys);
  border-left-width: 3px;
  border-radius: var(--gp-promien-karta);
  font-size: 15px;
  line-height: 1.6;
  background-color: var(--gp-kolor-biel);
}

.gp-komunikat--sukces {
  border-left-color: var(--gp-kolor-zielony-etykieta);
  color: var(--gp-kolor-tekst-glowny);
}

.gp-komunikat--blad {
  border-left-color: var(--gp-kolor-akcent);
  background-color: var(--gp-kolor-tlo-blokada);
  color: var(--gp-kolor-tekst-glowny);
}

/* --------------------------------------------------------------------------
   Dostepnosc WCAG 2.1 AA: podkreslenie odnosnikow w blokach tekstu (konto i logowanie)
   -------------------------------------------------------------------------- */
.site-content .woocommerce-privacy-policy-link {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.site-content .woocommerce-privacy-policy-link:hover,
.site-content .woocommerce-privacy-policy-link:focus {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/*
 * „Nie pamiętam hasła” mial 28 px wysokosci. Odnosnik ratunkowy przy logowaniu
 * ma byc latwy do trafienia, bo siega po niego ktos juz zniecierpliwiony.
 * Zmierzone 2026-09-10 na 390 px.
 */
@media (max-width: 991px) {
  .gp-nie-pamietam-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}

/* --------------------------------------------------------------------------
   Zapisane metody płatności (myaccount/payment-methods.php, 21.09)
   Wiersz: opis karty z lewej, akcje z prawej; na telefonie akcje pod opisem.
   -------------------------------------------------------------------------- */
.gp-konto-metody-lista {
  list-style: none;
  margin: 0 0 var(--gp-sp-20) 0;
  padding: 0;
}

.gp-konto-metoda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gp-sp-12);
  padding: var(--gp-sp-16) 0;
  border-top: 1px solid var(--gp-kolor-obrys);
}

.gp-konto-metoda:first-child {
  border-top: none;
  padding-top: 0;
}

.gp-konto-metoda-opis {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gp-konto-metoda-data {
  font-size: 13px;
  color: var(--gp-kolor-tekst-pomocniczy);
}

.gp-konto-metoda-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gp-sp-8);
}

.gp-konto-metody-dodaj {
  margin: var(--gp-sp-20) 0 0 0;
}