/* ═══════════════════════════════════════════════════════════════════════
   Reha Beauty — WooCommerce na żetonach serwisu

   Arkusz wchodzi po `style.css` i przykrywa domyślną skórkę WooCommerce.
   Wtyczkowych arkuszy nie wyłączamy: niosą układ tabel, komunikatów i pól,
   który sam trzeba by odtworzyć, a każdy pominięty kawałek to usterka
   w kasie — czyli w cudzych pieniądzach.

   Przyciski są tu inne niż w serwisie i to jest wybór, nie niedopatrzenie.
   Odnośnik edytorski — podkreślenie i wersaliki — jest za cichy na „Kupuję
   i płacę”. Akcje główne dostają pełne wypełnienie, poboczne sam obrys.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Oprawa ──────────────────────────────────────────────────────────── */

.sklep,
.tresc__k {
  padding-block: var(--s6) var(--s8);
}

/* Wąska kolumna dla stron tekstowych: regulamin i polityka mają po kilka
   tysięcy słów, a wiersz dłuższy niż miara robi się nieczytelny. */
.tresc__k {
  max-width: var(--miara);
  font-size: var(--t3);
  line-height: var(--lh3);
  color: var(--ink-2);
}

.tresc__k > * + * { margin-top: var(--s3); }

.tresc__k h2,
.tresc__k h3 {
  margin-top: var(--s6);
  color: var(--ink);
  letter-spacing: var(--ls-t);
}

.tresc__k h2 { font-size: var(--t6); }
.tresc__k h3 { font-size: var(--t5); }

.tresc__k ul,
.tresc__k ol { padding-left: 1.3em; }
.tresc__k li + li { margin-top: var(--s1); }

.tresc__k a {
  color: var(--akc);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Nagłówek strony sklepu jest niższy niż na zakładkach — nie ma pod nim
   zdjęcia ani metryki, więc pełny odstęp zostawiałby pustą płachtę. */
.pg--waski { padding-block: calc(var(--rzad-h) + var(--s6)) 0; }
.pg--waski .pg__g { display: block; }

/* ── Przyciski ───────────────────────────────────────────────────────── */

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cel);
  padding: 13px 26px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--biel);
  font-family: Onest, "Onest zapas", system-ui, sans-serif;
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: var(--ls-w);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--akc);
  border-color: var(--akc);
  color: var(--biel);
}

.woocommerce .button:active { transform: translateY(1px); }

/* Akcje poboczne — „Aktualizuj koszyk”, „Zastosuj kupon” — tylko obrys,
   żeby nie konkurowały wzrokowo z przejściem do kasy. */
.woocommerce button[name="update_cart"],
.woocommerce button[name="apply_coupon"],
.woocommerce .button.wc-backward {
  background: transparent;
  color: var(--ink);
}

.woocommerce button[name="update_cart"]:hover,
.woocommerce button[name="apply_coupon"]:hover,
.woocommerce .button.wc-backward:hover {
  background: var(--ink);
  color: var(--biel);
}

.woocommerce button[disabled],
.woocommerce .button:disabled {
  background: var(--ciel-4);
  border-color: var(--ciel-4);
  color: var(--ink-2);
  cursor: not-allowed;
}

/* Widoczne ognisko klawiatury — kasa musi dać się przejść samym tabulatorem. */
.woocommerce .button:focus-visible,
.woocommerce input:focus-visible,
.woocommerce select:focus-visible,
.woocommerce textarea:focus-visible {
  outline: 2px solid var(--akc);
  outline-offset: 2px;
}

/* ── Pola formularzy ─────────────────────────────────────────────────── */

.woocommerce form .form-row { padding: 0; margin: 0 0 var(--s3); }

.woocommerce form .form-row label,
.woocommerce-account label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: var(--ls-w);
  text-transform: uppercase;
  color: var(--ink-2);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select {
  width: 100%;
  min-height: var(--cel);
  padding: 12px 14px;
  border: 1px solid var(--linia-m);
  border-radius: 0;
  background: var(--biel);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--t3);
  line-height: var(--lh2);
}

.woocommerce textarea { min-height: 120px; resize: vertical; }

.woocommerce form .form-row.woocommerce-invalid input.input-text {
  border-color: #9d3b2f;
}

.woocommerce .required { color: #9d3b2f; text-decoration: none; }

/* Lista krajów WooCommerce chodzi na select2 — bez tego wygląda obco. */
.woocommerce .select2-container--default .select2-selection--single {
  height: auto;
  min-height: var(--cel);
  padding: 6px 8px;
  border: 1px solid var(--linia-m);
  border-radius: 0;
  background: var(--biel);
}

.woocommerce .select2-container--default .select2-selection--single
  .select2-selection__rendered {
  line-height: var(--lh2);
  color: var(--ink);
  padding-left: 6px;
}

/* ── Ilość ───────────────────────────────────────────────────────────── */

.woocommerce .quantity .qty {
  width: 84px;
  min-height: var(--cel);
  padding: 10px;
  border: 1px solid var(--linia-m);
  border-radius: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Tabele: koszyk, podsumowanie, zamówienia ────────────────────────── */

.woocommerce table.shop_table,
.woocommerce table.shop_attributes {
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  width: 100%;
}

.woocommerce table.shop_table th {
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--linia-m);
  text-align: left;
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: var(--ls-w);
  text-transform: uppercase;
  color: var(--ink-2);
}

.woocommerce table.shop_table td {
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--linia);
  font-size: var(--t3);
  color: var(--ink);
  vertical-align: middle;
}

.woocommerce table.shop_table td.product-name a { color: var(--ink); font-weight: 600; }
.woocommerce table.shop_table td.product-thumbnail img { width: 84px; }

/* Kwoty w kolumnie równają się cyfra pod cyfrą — jak w cennikach zabiegów. */
.woocommerce table.shop_table td.product-total,
.woocommerce table.shop_table td.product-subtotal,
.woocommerce table.shop_table td[data-title="Suma"],
.woocommerce .cart_totals td,
.woocommerce .order-total td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
  border-top: 1px solid var(--ink);
  font-size: var(--t4);
  color: var(--ink);
}

.woocommerce a.remove {
  width: 28px; height: 28px; line-height: 26px;
  color: var(--ink-2) !important;
  border: 1px solid var(--linia-m);
  border-radius: 0;
  font-weight: 400;
}

.woocommerce a.remove:hover {
  background: var(--ink);
  color: var(--biel) !important;
}

/* ── Ceny ────────────────────────────────────────────────────────────── */

/* Waga selektorów musi dorównać WooCommerce: wtyczka ustawia cenę regułą
   `.woocommerce div.product p.price` w swojej zieleni #77a464, więc samo
   `.woocommerce .price` przegrywa i kwota zostaje oliwkowa. */
.woocommerce .price,
.woocommerce .amount,
.woocommerce span.woocommerce-Price-amount,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.woocommerce .price del { color: var(--ink-2); font-weight: 400; }
.woocommerce .price ins { text-decoration: none; }

/* ── Pola wyboru i przełączniki ──────────────────────────────────────── */

/* Domyślne kółka i kwadraty przeglądarki są niebieskie i odstają od reszty.
   Zostawiamy je natywne — własne zastępniki bywają niefokusowalne — i tylko
   przestawiamy barwę zaznaczenia oraz rozmiar do progu dotyku. */
.woocommerce input[type="radio"],
.woocommerce input[type="checkbox"],
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  accent-color: var(--akc);
  vertical-align: middle;
}

.woocommerce .shipping ul#shipping_method,
.woocommerce ul#shipping_method { list-style: none; margin: 0; padding: 0; }

.woocommerce ul#shipping_method li {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: var(--cel);
  padding: 6px 0;
}

.woocommerce ul#shipping_method label { margin: 0; cursor: pointer; }

/* ── Komunikaty ──────────────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s5);
  padding: var(--s3) var(--s4);
  border: 0;
  border-left: 3px solid var(--akc);
  border-radius: 0;
  background: var(--ciel-1);
  color: var(--ink);
  font-size: var(--t3);
  list-style: none;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }

.woocommerce-error { border-left-color: #9d3b2f; }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

/* ── Lista produktów ─────────────────────────────────────────────────── */

/*
 * WooCommerce układa listę na floatach: `ul.products[class*=columns-] li.product`
 * ma szerokość 22,05 % na szerokim ekranie i 48 % poniżej 768 px. Ten selektor
 * niesie atrybut, więc waży więcej niż `.woocommerce ul.products li.product` —
 * bez powtórzenia atrybutu moja reguła przegrywała i pozycje siedziały na 48 %
 * szerokości jednokolumnowej siatki, czyli na 44 % ekranu telefonu.
 *
 * Neutralizujemy float raz, w jednym miejscu, i dalej rządzi siatka.
 */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--s6) var(--s5);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
.woocommerce ul.products li.product {
  width: auto;
  margin: 0;
  padding: 0 0 var(--s3);
  border-bottom: 1px solid var(--linia);
  float: none;
  clear: none;
  text-align: left;
  display: flex;
  flex-direction: column;
}

/* Woo odwraca co drugą pozycję na prawo — w siatce to tylko psuje kolejność. */
.woocommerce ul.products[class*="columns-"] li.product:nth-child(2n) {
  float: none;
  clear: none !important;
}

/* Kadr produktów jest poziomy 3:2 — tyle wypełniają zdjęcia w oryginale. */
.woocommerce ul.products li.product a img {
  margin: 0 0 var(--s3);
  border-radius: 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 0;
  font-size: var(--t4);
  font-weight: 600;
  letter-spacing: var(--ls-t);
  color: var(--ink);
}

.karta-s__o {
  margin: var(--s2) 0 0;
  font-size: var(--t2);
  line-height: var(--lh2);
  color: var(--ink-2);
}

.woocommerce ul.products li.product .price {
  display: block;
  margin: var(--s3) 0 var(--s4);
  padding-top: var(--s2);
  border-top: 1px solid var(--linia);
  font-size: var(--t4);
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .button {
  margin: auto 0 0;
  align-self: flex-start;
}

/* ── Listing na wąskim ekranie ───────────────────────────────────────── */

@media (max-width: 700px) {
  /* Jedna kolumna, więc karty dostają wyraźniejszy rytm: zdjęcie na całą
     szerokość, potem tekst, a na końcu przycisk przez całą szerokość —
     kciukiem trafia się w niego bez celowania. */
  .woocommerce ul.products { gap: var(--s7); }

  .woocommerce ul.products[class*="columns-"] li.product,
  .woocommerce ul.products li.product {
    padding-bottom: var(--s6);
  }

  .woocommerce ul.products li.product a img { margin-bottom: var(--s4); }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: var(--t5);
  }

  .karta-s__o { font-size: var(--t3); }

  .woocommerce ul.products li.product .price {
    margin: var(--s4) 0;
    font-size: var(--t5);
  }

  .woocommerce ul.products li.product .button {
    width: 100%;
    align-self: stretch;
    padding-block: 16px;
  }

  /* Ostatnia karta nie potrzebuje kreski — pod nią jest już stopka. */
  .woocommerce ul.products li.product:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* ── Karta produktu ──────────────────────────────────────────────────── */

/* Nagłówek karty produktu to same okruszki — nazwa stoi w kolumnie obok
   zdjęcia, tuż nad ceną. Odstęp jest więc mniejszy niż na stronach z tytułem. */
.pg--karta { padding-block: calc(var(--rzad-h) + var(--s5)) 0; }

.woocommerce div.product { display: grid; gap: var(--s6) var(--s7); }

@media (min-width: 900px) {
  /* Kadr jest poziomy 3:2, więc kolumna zdjęcia nie musi być tak szeroka
     jak kolumna treści — inaczej opis robi się wąski, a pod zdjęciem
     zostaje pustka. */
  .woocommerce div.product {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
  }
  .woocommerce div.product .related { grid-column: 1 / -1; }

  /* Kadr trzyma się ekranu przy przewijaniu długiego opisu. */
  .woocommerce div.product div.images { position: sticky; top: calc(var(--rzad-h-mal) + var(--s4)); }
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary { width: auto; float: none; margin: 0; }

.woocommerce div.product .product_title {
  margin: 0 0 var(--s2);
  font-size: var(--t7);
  line-height: var(--lh1);
  letter-spacing: var(--ls-t);
}

.woocommerce div.product p.price {
  margin: 0 0 var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--linia);
  font-size: var(--t6);
}

.woocommerce div.product .woocommerce-product-details__short-description {
  margin: 0 0 var(--s4);
  font-size: var(--t4);
  line-height: var(--lh2);
  color: var(--ink-2);
}

.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s5);
}

/* Pasek z zapisami i adresem — pytania, które padają dokładnie po naciśnięciu
   przycisku, więc odpowiedź stoi tuż pod nim. */
.karta__fakty {
  list-style: none;
  margin: 0 0 var(--s6);
  padding: var(--s3) 0 0;
  border-top: 1px solid var(--linia);
  display: grid;
  gap: var(--s2);
}

.karta__fakty li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--t2);
  color: var(--ink-2);
}

.karta__fakty .ic { width: 19px; height: 19px; flex: none; color: var(--ink-2); }
.karta__fakty a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  color: var(--ink);
  font-weight: 600;
}

/* Pełny opis, przeniesiony z zakładki pod kadrem. */
.karta__opis {
  padding-top: var(--s5);
  border-top: 1px solid var(--linia);
  font-size: var(--t3);
  line-height: var(--lh3);
  color: var(--ink-2);
}

.karta__opis > * + * { margin-top: var(--s3); }

.karta__opis h3 {
  margin-top: var(--s5);
  font-size: var(--t5);
  letter-spacing: var(--ls-t);
  color: var(--ink);
}

.karta__opis :is(ul, ol) { padding-left: 1.3em; }
.karta__opis li + li { margin-top: var(--s1); }
.karta__opis strong { color: var(--ink); }

.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 var(--s4); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom: 1px solid var(--linia-m); }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: 0; border-radius: 0; background: transparent; margin: 0 var(--s4) 0 0; padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: 12px 0;
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: var(--ls-w);
  text-transform: uppercase;
  color: var(--ink-2);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}

/* Opis produktu w mierze czytelniczej — pełna szerokość kolumny dałaby
   wiersze po sto kilkadziesiąt znaków. */
.woocommerce div.product .woocommerce-tabs .panel {
  max-width: var(--miara);
  font-size: var(--t3);
  line-height: var(--lh3);
  color: var(--ink-2);
}

.woocommerce div.product .woocommerce-tabs .panel > * + * { margin-top: var(--s3); }

.woocommerce div.product .woocommerce-tabs .panel h3 {
  margin-top: var(--s5);
  font-size: var(--t5);
  color: var(--ink);
}

.woocommerce div.product .woocommerce-tabs .panel :is(ul, ol) { padding-left: 1.3em; }
.woocommerce div.product .woocommerce-tabs .panel li + li { margin-top: var(--s1); }
.woocommerce div.product .woocommerce-tabs .panel strong { color: var(--ink); }

/* ══════════════════════════════════════════════════════════════════════
   Koszyk i kasa klasyczna (skrótowa, nie blokowa)

   WooCommerce układa oba ekrany na floatach: tabela pełnej szerokości,
   a pod nią podsumowanie odpływające w prawo. Zostaje wtedy pół ekranu
   pustki po lewej, a decyzja „ile płacę" wisi daleko od pozycji.

   Zamiast tego dwie kolumny: treść po lewej, podsumowanie po prawej
   i przyklejone, żeby kwota była widoczna przy dłuższym formularzu.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Koszyk ──────────────────────────────────────────────────────────── */

@media (min-width: 1000px) {
  .woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: var(--s6) var(--s7);
    align-items: start;
  }
  /* Komunikaty i tabela zajmują pełną szerokość rzędu, w którym stoją. */
  .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  .woocommerce-cart .woocommerce > form.woocommerce-cart-form { grid-column: 1; }
  .woocommerce-cart .woocommerce > .cart-collaterals {
    grid-column: 2;
    position: sticky;
    top: calc(var(--rzad-h-mal) + var(--s4));
  }
}

.woocommerce .cart-collaterals { width: auto; float: none; }
.woocommerce .cart-collaterals .cart_totals { width: auto; float: none; }

.woocommerce .cart-collaterals .cart_totals > h2 {
  margin: 0 0 var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--linia-m);
  font-size: var(--t5);
  letter-spacing: var(--ls-t);
}

/* Przycisk przejścia do kasy jest jedyną akcją główną na tym ekranie. */
.woocommerce .wc-proceed-to-checkout { padding: var(--s4) 0 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 16px 26px;
  font-size: var(--t1);
}

/* „Zaktualizuj koszyk" ma wyglądać na akcję poboczną, a nie na wyłączoną. */
.woocommerce .actions .button[name="update_cart"] {
  background: transparent;
  color: var(--ink);
  opacity: 1;
}
.woocommerce .actions .button[name="update_cart"]:disabled {
  border-color: var(--linia-m);
  color: var(--ink-2);
  background: transparent;
}

.woocommerce table.cart td.actions { padding-top: var(--s4); }
.woocommerce table.cart td.actions .coupon { display: flex; gap: var(--s2); flex-wrap: wrap; }
.woocommerce table.cart td.actions .coupon input { max-width: 240px; }

/* ── Kasa ────────────────────────────────────────────────────────────── */

.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: auto; float: none; display: block; }

.woocommerce-checkout .col2-set .col-2 { margin-top: var(--s5); }

@media (min-width: 1000px) {
  /* Formularz po lewej, podsumowanie po prawej i przyklejone. Bez jawnego
     przypisania kolumn siatka szła kolejnością znaczników i dane
     rozliczeniowe lądowały po prawej, a pusta kolumna wysyłki po lewej. */
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: var(--s5) var(--s7);
    align-items: start;
  }
  .woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 3; }
  .woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
  .woocommerce-checkout form.checkout > #order_review {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: calc(var(--rzad-h-mal) + var(--s4));
  }
  .woocommerce-checkout form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
}

.woocommerce-checkout #order_review_heading {
  margin: 0 0 var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--linia-m);
  font-size: var(--t5);
  letter-spacing: var(--ls-t);
}

.woocommerce-checkout h3 {
  margin: 0 0 var(--s4);
  font-size: var(--t5);
  letter-spacing: var(--ls-t);
}

.woocommerce-checkout #payment {
  border-radius: 0;
  background: var(--ciel-1);
  padding: var(--s4);
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--linia-m);
  padding: 0 0 var(--s3);
}

.woocommerce-checkout #payment ul.payment_methods li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--cel);
  margin: 0;
  font-size: var(--t3);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}

.woocommerce-checkout #payment div.payment_box {
  flex-basis: 100%;
  margin: 8px 0 0;
  padding: var(--s3);
  border-radius: 0;
  background: var(--biel);
  font-size: var(--t2);
  color: var(--ink-2);
}

.woocommerce-checkout #payment div.payment_box::before { content: none; }

.woocommerce-checkout #place_order { width: 100%; margin-top: var(--s3); }

/* ── Moje konto ──────────────────────────────────────────────────────── */

.woocommerce-account .woocommerce-MyAccount-navigation { width: auto; float: none; margin-bottom: var(--s5); }

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin: 0;
  padding: 0 0 var(--s3);
  border-bottom: 1px solid var(--linia-m);
  list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cel);
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: var(--ls-w);
  text-transform: uppercase;
  color: var(--ink-2);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}

.woocommerce-account .woocommerce-MyAccount-content { width: auto; float: none; }

/* ═══════════════════════════════════════════════════════════════════════
   Koszyk i kasa blokowa

   To osobna rodzina klas — `wc-block-*` — a nie te same znaczniki co wyżej.
   WooCommerce składa koszyk i kasę z bloków renderowanych po stronie
   przeglądarki, więc w kodzie wysłanym z serwera tych elementów jeszcze nie
   ma. Reguły z górnej połowy arkusza ich nie dotykają.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Przyciski blokowe ───────────────────────────────────────────────── */

/* Bez tego napis na przycisku przejścia do płatności bierze barwę odnośnika
   z bloku i wychodzi brąz na niemal czerni — kontrast nie do przyjęcia. */
.wc-block-components-button:not(.is-link) {
  min-height: var(--cel);
  padding: 14px 26px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background-color: var(--ink);
  color: var(--biel);
  font-family: Onest, "Onest zapas", system-ui, sans-serif;
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: var(--ls-w);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}

/* Warstwa tekstu bloku ma własną barwę — bez tego napis zostaje brązowy
   mimo ustawienia koloru na samym przycisku. */
.wc-block-components-button:not(.is-link) .wc-block-components-button__text,
.wc-block-components-button:not(.is-link) > * { color: var(--biel); }

.wc-block-components-button:not(.is-link):hover {
  background-color: var(--akc);
  border-color: var(--akc);
}

.wc-block-components-button:not(.is-link):focus-visible {
  outline: 2px solid var(--akc);
  outline-offset: 2px;
}

/* Wersja obrysowa — akcje poboczne. */
.wc-block-components-button.outlined {
  background-color: transparent;
  color: var(--ink);
}

.wc-block-components-button.outlined .wc-block-components-button__text,
.wc-block-components-button.outlined > * { color: var(--ink); }

.wc-block-components-button.is-link {
  color: var(--akc);
  text-underline-offset: 3px;
}

/* ── Układ dwukolumnowy ──────────────────────────────────────────────── */

/* Klasy is-large/is-medium nadaje sam WooCommerce po zmierzeniu kontenera,
   więc szerokość musi dać mu miejsce — patrz `page.php`. */
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
  background: var(--ciel-1);
  padding: var(--s4);
}

/* ── Pozycje koszyka ─────────────────────────────────────────────────── */

.wc-block-cart-items { border-collapse: collapse; }

.wc-block-cart-items__header {
  border-bottom: 1px solid var(--linia-m);
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: var(--ls-w);
  text-transform: uppercase;
  color: var(--ink-2);
}

.wc-block-cart-items__row { border-bottom: 1px solid var(--linia); }
.wc-block-cart-items__row td { padding-block: var(--s3); }

.wc-block-components-product-name {
  color: var(--ink);
  font-size: var(--t3);
  font-weight: 600;
  text-decoration: none;
}

.wc-block-components-product-price__value,
.wc-block-formatted-money-amount,
.wc-block-components-formatted-money-amount {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.wc-block-components-product-metadata { color: var(--ink-2); font-size: var(--t2); }

/* ── Licznik sztuk ───────────────────────────────────────────────────── */

.wc-block-components-quantity-selector {
  border: 1px solid var(--linia-m);
  border-radius: 0;
}

.wc-block-components-quantity-selector::after { content: none; }

.wc-block-components-quantity-selector__input {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Minus i plus muszą mieć pełne pole dotyku — domyślnie mają około 30 px. */
.wc-block-components-quantity-selector__button {
  min-width: var(--cel);
  min-height: var(--cel);
  color: var(--ink);
  opacity: 1;
}

.wc-block-components-quantity-selector__button:hover { background: var(--ciel-2); }

/* ── Podsumowanie ────────────────────────────────────────────────────── */

.wc-block-components-totals-wrapper { border-top: 1px solid var(--linia); }

.wc-block-components-totals-item__label { color: var(--ink-2); }

.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.wc-block-components-totals-footer-item {
  border-top: 1px solid var(--ink);
  font-size: var(--t4);
}

/* ── Pola kasy ───────────────────────────────────────────────────────── */

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-blocks-components-select__select {
  border: 1px solid var(--linia-m);
  border-radius: 0;
  background: var(--biel);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--t3);
  min-height: var(--cel);
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label { color: var(--ink-2); }

.wc-block-components-checkout-step__title,
.wc-block-components-title {
  color: var(--ink);
  font-size: var(--t5);
  letter-spacing: var(--ls-t);
}

.wc-block-components-checkout-step__description { color: var(--ink-2); }

/* ── Sposób płatności i dostawy ──────────────────────────────────────── */

.wc-block-components-radio-control__option {
  border-radius: 0;
  min-height: var(--cel);
}

.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
  border-color: var(--linia-m);
}

.wc-block-components-radio-control__label { color: var(--ink); }
.wc-block-components-radio-control__secondary-label { color: var(--ink-2); }

.wc-block-components-panel { border-color: var(--linia); }
.wc-block-components-panel__button { color: var(--ink); }

/* ── Komunikaty blokowe ──────────────────────────────────────────────── */

.wc-block-components-notice-banner {
  border-radius: 0;
  border-left-width: 3px;
  background: var(--ciel-1);
  color: var(--ink);
}

.wc-block-components-notice-banner.is-error { border-left-color: #9d3b2f; }
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-info { border-left-color: var(--akc); }

/* ═══════════════════════════════════════════════════════════════════════
   Voucher — pola PW Gift Cards

   Identyfikatory i klasy pochodzą wprost ze strony produkcyjnej
   /produkt/voucher-elektroniczny/. Wtyczka wstawia je bez własnego arkusza
   pasującego do serwisu, więc bez tych reguł pola wyglądają jak surowy
   formularz WordPressa obok reszty karty produktu.
   ═══════════════════════════════════════════════════════════════════════ */

.pwgc-pola,
.woocommerce div.product form.cart .pwgc-pola {
  display: grid;
  gap: var(--s3);
  width: 100%;
  margin: 0 0 var(--s4);
  padding: var(--s4);
  background: var(--ciel-1);
  border-left: 3px solid var(--akc);
}

.pwgc-grupa { margin: 0; display: grid; gap: 8px; }

.pwgc-pola label {
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: var(--ls-w);
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Dwa komplety identyfikatorów: `rbv-` z wtyczki Reha Beauty i `pwgc-`
   z PW Gift Cards. Oba, bo przejście na własną obsługę może iść etapami
   i przez jakiś czas na produkcji stoi jedno albo drugie. */
.pwgc-pola input[type="text"],
.pwgc-pola input[type="email"],
.pwgc-pola input[type="number"],
.pwgc-pola textarea,
.pwgc-pola select,
#gift-card-amount,
#pwgc-custom-amount,
.pwgc-input-text,
#pwgc-message {
  width: 100%;
  min-height: var(--cel);
  padding: 12px 14px;
  border: 1px solid var(--linia-m);
  border-radius: 0;
  background: var(--biel);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--t3);
  line-height: var(--lh2);
}

/* Kwota to liczba — równa się cyfra pod cyfrą, jak w cennikach zabiegów. */
#rbv-kwota,
#pwgc-custom-amount {
  max-width: 260px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

#rbv-wiadomosc,
#pwgc-message { min-height: 110px; resize: vertical; }

.pwgc-wskaz {
  font-size: var(--t2);
  color: var(--ink-2);
}

.pwgc-pola :is(input, textarea, select):focus-visible {
  outline: 2px solid var(--akc);
  outline-offset: 2px;
}

/* Wtyczka pokazuje saldo i podgląd vouchera — te też muszą trzymać paletę. */
.pwgc-balance,
.pwgc-gift-card-preview {
  border: 1px solid var(--linia);
  border-radius: 0;
  background: var(--biel);
  color: var(--ink);
}

@media (max-width: 560px) {
  #pwgc-custom-amount { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Pusty koszyk

   WooCommerce wstawia tu buźkę w czarnym kółku, separator z kropek i siatkę
   „New in store" o zupełnie innym kroju kart niż sklep. Cały blok jest
   zastąpiony własnym w treści strony; te reguły go ubierają, a resztki
   domyślnego układu chowają.
   ═══════════════════════════════════════════════════════════════════════ */

.pusty {
  max-width: var(--miara);
  padding: var(--s7) 0 var(--s8);
}

.pusty__n {
  margin: 0 0 var(--s2);
  font-size: var(--t1);
  font-weight: 600;
  letter-spacing: var(--ls-w);
  text-transform: uppercase;
  color: var(--ink-2);
}

.pusty__t {
  margin: 0 0 var(--s3);
  font-size: var(--t7);
  line-height: var(--lh1);
  letter-spacing: var(--ls-t);
  color: var(--ink);
}

.pusty__o {
  margin: 0 0 var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--linia);
  font-size: var(--t3);
  line-height: var(--lh3);
  color: var(--ink-2);
}

.pusty__b { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); }

/* Buźka jest doklejana przez ::before nagłówka bloku — bez tego wraca nawet
   po podmianie treści, bo klasa siedzi też w innych miejscach koszyka. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before,
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots { display: none; }

/* ── Okruszki ────────────────────────────────────────────────────────── */

.woocommerce .woocommerce-breadcrumb { margin: 0; padding: 0; font-size: inherit; color: inherit; }

/* ── Wąski ekran ─────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  /* Tabela koszyka na telefonie staje się listą kart — WooCommerce podaje
     nagłówek kolumny w data-title, więc wiersz zostaje czytelny. */
  .woocommerce table.shop_table_responsive tr td {
    display: flex;
    justify-content: space-between;
    gap: var(--s3);
    padding: 12px 0;
    text-align: right;
  }

  .woocommerce table.shop_table_responsive tr td::before {
    font-size: var(--t1);
    font-weight: 600;
    letter-spacing: var(--ls-w);
    text-transform: uppercase;
    color: var(--ink-2);
  }

  .woocommerce .quantity .qty { width: 72px; }
  .woocommerce div.product form.cart .button { flex: 1; }
}