/* ============================================================================
   SKLEP JAK NOWA STRONA — koszyk, kasa, podziękowanie, konto (KZ-5)

   Style shop pages rendered by our own template (wyglad/szablon.php) in the look of
   the headless front (korban/headless). Loads after tokeny.css and naglowek.css.
   Styluje strony sklepu renderowane naszym szablonem (wyglad/szablon.php) w wyglądzie
   frontu headless. Ładuje się po tokeny.css i naglowek.css. Kontrakt: KONTRAKT.md.

   Zasady tego pliku (pilnuje tests/woo/test_tokeny_sklepu.py):
   1. KAŻDY selektor zaczyna się od `body.kp-sklep` — plik nie może wyciec poza
      strony, na których przełącznik go włączył.
   2. Kolory, rozmiary i odstępy WYŁĄCZNIE tokenami --kp-* z tokeny.css (wygenerowane
      z frontu). Cztery wartości własne sklepu stoją w bloku `body.kp-sklep` niżej,
      każda z powodem i liczbą kontrastu.
   3. Widżetów płatności i dostawy (Przelewy24 z BLIK-iem, Stripe, Furgonetka) NIE
      stylujemy od środka — żadnego `display` na ich wnętrzu. Stylujemy pozycję listy,
      w której siedzą (li WooCommerce), nie ich markup.
   4. Pod naszym szablonem moduł zdejmuje podmianę szablonów Woo przez Breakdance
      (filtry wc_get_template / wc_get_template_part), więc markup to czyste szablony
      WooCommerce. Żadnych klas Breakdance (`bde-*`, `breakdance*`) w tym pliku.

   Wzorce z frontu (korban/headless/src):
     body, fokus, .kp-cta, .kp-cta--linia       app/globals.css
     pola i etykiety                            components/ds/Input.jsx, SortSelect.jsx
     okruszki                                   components/breadcrumbs.tsx
     H1 i kontener 1200 px                      app/[locale]/sklep/page.tsx
     podsumowanie jako szuflada                 components/koszyk/koszyk-w-naglowku.tsx
     ramka informacji przed zamówieniem         components/informacje-przed-zamowieniem.tsx
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Wartości własne sklepu — cztery, każda nazwana
   Shop-only values — four, each with a reason.
   --------------------------------------------------------------------------- */
body.kp-sklep {
  /* Field outline. The front draws inputs with --kp-border (#DED4C6): 1,40:1 on white,
     below the 3:1 of WCAG 2.2 SC 1.4.11 for a control boundary. A checkout is a form
     to be filled, so the boundary must be visible. #8A7F71 is the meta shade from
     Nina's palette (rejected there for TEXT at 3,46:1) — as a boundary it clears 3:1:
     3,92 on white, 3,46 on cream.
     Obrys pola. Front rysuje pola --kp-border (1,40:1 na bieli) — poniżej progu 3:1
     dla granicy kontrolki. Kasa to formularz do wypełnienia, więc granica ma być
     widoczna. #8A7F71 to odcień meta z palety Niny (odrzucony tam jako TEKST),
     jako granica przechodzi: 3,92 na bieli, 3,46 na kremie. */
  --kp-sklep-obrys-pola: #8A7F71;

  /* Error text and error outline. The DS Input uses --kp-color-line-mirror-effect
     (#D32F2F): 4,39:1 on cream, below 4,5 for 12–14px text. The canon's own
     --kp-color-semantic-no (#B3261E) is 5,76 on cream, 6,54 on white.
     Tekst i obrys błędu. DS Input bierze #D32F2F — 4,39:1 na kremie, poniżej 4,5.
     Kanoniczny --kp-color-semantic-no daje 5,76 na kremie i 6,54 na bieli. */
  --kp-sklep-blad: var(--kp-color-semantic-no);

  /* Placeholder. The front sets none (browser default) and --kp-text-muted (#635B51,
     6,68:1) reads like a typed value next to --kp-ink — dev 2026-09-22: "PL1234567890",
     "Kod pocztowy" looked filled in. #7A7064: same warm hue, 4,85:1 on the white field
     (placeholders carry information — AA 4,5), 3,18:1 against typed ink text.
     Placeholder. Front go nie ustawia, a --kp-text-muted wygląda jak wpisana wartość.
     #7A7064: ten sam ciepły odcień, 4,85:1 na bieli pola, 3,18:1 wobec wpisanego grafitu. */
  --kp-sklep-placeholder: #7A7064;

  /* Summary column width — the front's cart drawer is min(420px, 100vw).
     Szerokość kolumny podsumowania — szuflada koszyka frontu ma min(420px, 100vw). */
  --kp-sklep-kolumna: 420px;

  margin: 0;
  background: var(--kp-page);
  color: var(--kp-text);
  font-family: var(--kp-font-body);
  font-size: var(--kp-text-body);
  line-height: var(--kp-leading-body);
  -webkit-text-size-adjust: 100%;
}

/* Tailwind preflight on the front makes every box border-box; the shop needs the same
   so 1200 px includes the 16 px gutter exactly as on dev3.
   Preflight Tailwinda robi z każdego pudełka border-box; sklep potrzebuje tego samego,
   żeby 1200 px obejmowało margines 16 px jak na dev3. */
body.kp-sklep .kp-sklep-tresc,
body.kp-sklep .kp-sklep-tresc *,
body.kp-sklep .kp-sklep-tresc *::before,
body.kp-sklep .kp-sklep-tresc *::after,
body.kp-sklep .select2-dropdown,
body.kp-sklep .select2-dropdown * {
  box-sizing: border-box;
}

/* Focus ring exactly as the front (:focus-visible in globals.css): 3px accent, 2px offset.
   Pierścień fokusu jak na froncie: 3px akcentu, odstęp 2px. */
body.kp-sklep .kp-sklep-tresc :focus-visible {
  outline: 3px solid var(--kp-accent);
  outline-offset: 2px;
  border-radius: var(--kp-radius-sm);
}

/* The skip target must not ring the whole page (front: #tresc:focus).
   Cel skoku nie obrysowuje całej strony (front: #tresc:focus). */
body.kp-sklep #kp-tresc:focus,
body.kp-sklep #kp-tresc:focus-visible {
  outline: none;
}

body.kp-sklep .kp-sklep-tresc a {
  color: var(--kp-ink);
  text-underline-offset: 2px;
}

body.kp-sklep .kp-sklep-tresc a:hover {
  color: var(--kp-accent);
}

/* ---------------------------------------------------------------------------
   Kontener, okruszki, H1 — jak /sklep/ na dev3
   Container, breadcrumbs, H1 — as dev3 /sklep/ (main.mx-auto.px-4.py-10, max 1200px).
   --------------------------------------------------------------------------- */
body.kp-sklep .kp-kontener {
  width: 100%;
  max-width: var(--kp-container-web);
  margin: 0 auto;
  padding: var(--kp-space-10) var(--kp-space-4);
}

body.kp-sklep .kp-okruszki {
  margin: 0 0 var(--kp-space-6);
}

body.kp-sklep .kp-okruszki ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kp-space-1) var(--kp-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Items at 14px, the list itself at body size — measured on dev3: ol 15/24, a 14/22,4.
   Pozycje 14px, sama lista w rozmiarze body — zmierzone na dev3: ol 15/24, a 14/22,4. */
body.kp-sklep .kp-okruszki a,
body.kp-sklep .kp-okruszki [aria-current="page"] {
  font-size: var(--kp-text-body-small);
  line-height: var(--kp-leading-body-small);
}

body.kp-sklep .kp-okruszki li {
  display: flex;
  align-items: center;
  gap: var(--kp-space-2);
}

body.kp-sklep .kp-okruszki a {
  color: var(--kp-text-muted);
  text-decoration: none;
}

body.kp-sklep .kp-okruszki a:hover {
  color: var(--kp-text-muted);
  text-decoration: underline;
}

body.kp-sklep .kp-okruszki [aria-current="page"] {
  color: var(--kp-ink);
}

/* Decorative separator in the border colour, as the front.
   Separator dekoracyjny w kolorze linii, jak na froncie. */
body.kp-sklep .kp-okruszki-sep {
  color: var(--kp-border);
}

body.kp-sklep .kp-sklep-tytul {
  margin: 0 0 var(--kp-space-8);
  font-family: var(--kp-font-heading);
  font-size: var(--kp-text-h1);
  font-weight: var(--kp-weight-naglowek);
  line-height: var(--kp-leading-h1);
  letter-spacing: var(--kp-tracking-tight);
  text-transform: uppercase;
  color: var(--kp-ink);
}

/* ---------------------------------------------------------------------------
   Typografia w treści WooCommerce
   Typography inside WooCommerce output.
   --------------------------------------------------------------------------- */
/* ONE style for every section heading ("Dane rozliczeniowe", "Twoje zamówienie",
   "Podsumowanie koszyka", addresses, login): the front's panel h2 — --kp-text-h3
   (20px), weight 300, uppercase with -0.01em (help-page.tsx:285 + the h1/h2 rule in
   globals.css). WooCommerce mixes h2 and h3 for the same role; the reader must not see it.
   JEDEN styl każdego nagłówka sekcji: h2 panelu frontu — 20px, waga 300, wersaliki,
   -0,01em (help-page.tsx:285 + reguła h1/h2 w globals.css). WooCommerce miesza h2 i h3
   w tej samej roli; czytelniczka ma tego nie widzieć. Tytuły produktów w polecanych
   (też h2) są wyjęte — to nazwy, nie nagłówki. */
body.kp-sklep .kp-sklep-woo h2:not(.woocommerce-loop-product__title),
body.kp-sklep .kp-sklep-woo h3 {
  margin: 0 0 var(--kp-space-5);
  font-family: var(--kp-font-heading);
  font-size: var(--kp-text-h3);
  font-weight: var(--kp-weight-naglowek);
  line-height: var(--kp-leading-h3);
  letter-spacing: var(--kp-tracking-tight);
  text-transform: uppercase;
  color: var(--kp-ink);
}

body.kp-sklep .kp-sklep-woo p {
  margin: 0 0 var(--kp-space-4);
}

body.kp-sklep .kp-sklep-woo strong,
body.kp-sklep .kp-sklep-woo b {
  font-weight: var(--kp-weight-semibold);
  color: var(--kp-ink);
}

body.kp-sklep .kp-sklep-woo address {
  font-style: normal;
  line-height: var(--kp-leading-body);
}

body.kp-sklep .kp-sklep-woo img {
  max-width: 100%;
  height: auto;
}

/* WooCommerce's own screen-reader class — its stylesheet is not loaded on these pages.
   Klasa WooCommerce dla czytników ekranu — jego arkusz nie ładuje się na tych stronach. */
body.kp-sklep .kp-sklep-woo .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   Komunikaty (.woocommerce-error / -message / -info)
   Notices. A line card with a 3px left accent (the canon's --kp-border-accent).
   --------------------------------------------------------------------------- */
body.kp-sklep .kp-sklep-woo .woocommerce-error,
body.kp-sklep .kp-sklep-woo .woocommerce-message,
body.kp-sklep .kp-sklep-woo .woocommerce-info,
body.kp-sklep .kp-sklep-woo .woocommerce-notice {
  position: relative;
  margin: 0 0 var(--kp-space-6);
  padding: var(--kp-space-4) var(--kp-space-5);
  list-style: none;
  background: var(--kp-surface);
  border: var(--kp-border-width) solid var(--kp-border);
  border-left: var(--kp-border-accent) solid var(--kp-ink);
  border-radius: var(--kp-radius-sm);
  color: var(--kp-ink);
  font-size: var(--kp-text-body-small);
  line-height: var(--kp-leading-body-small);
}

body.kp-sklep .kp-sklep-woo .woocommerce-error {
  border-left-color: var(--kp-sklep-blad);
}

body.kp-sklep .kp-sklep-woo .woocommerce-info {
  border-left-color: var(--kp-accent);
}

/* WooCommerce draws an icon-font glyph here; the front has no icons in notices.
   WooCommerce rysuje tu znak z fontu ikon; front nie ma ikon w komunikatach. */
body.kp-sklep .kp-sklep-woo .woocommerce-error::before,
body.kp-sklep .kp-sklep-woo .woocommerce-message::before,
body.kp-sklep .kp-sklep-woo .woocommerce-info::before {
  content: none;
}

body.kp-sklep .kp-sklep-woo .woocommerce-error li {
  margin: 0;
  list-style: none;
}

body.kp-sklep .kp-sklep-woo .woocommerce-error li + li {
  margin-top: var(--kp-space-2);
}

/* A button inside a notice (e.g. "Zobacz koszyk") sits on its own line, not floated.
   Przycisk w komunikacie stoi w osobnej linii, bez opływania. */
body.kp-sklep .kp-sklep-woo .woocommerce-message .button,
body.kp-sklep .kp-sklep-woo .woocommerce-info .button,
body.kp-sklep .kp-sklep-woo .woocommerce-error .button {
  float: none;
  margin: 0 var(--kp-space-4) 0 0;
}

/* ---------------------------------------------------------------------------
   Przyciski — .kp-cta (główny) i .kp-cta--linia (wtórny) z globals.css frontu
   Buttons. Every .button is the secondary line button; primary actions get the CTA.
   Label and outline set EXPLICITLY in every state (commit 1c204a6: pink on pink).
   --------------------------------------------------------------------------- */
body.kp-sklep .kp-sklep-woo a.button,
body.kp-sklep .kp-sklep-woo button.button,
body.kp-sklep .kp-sklep-woo input.button,
body.kp-sklep .kp-sklep-woo .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kp-space-2);
  min-height: 48px;
  margin: 0;
  padding: 12px 28px;
  background: transparent;
  color: var(--kp-ink);
  border: var(--kp-border-width) solid var(--kp-ink);
  border-radius: var(--kp-radius-sm);
  box-shadow: none;
  font-family: var(--kp-font-heading);
  font-size: 13px;
  font-weight: var(--kp-weight-semibold);
  line-height: var(--kp-leading-body);
  letter-spacing: var(--kp-tracking-cta);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background var(--kp-duration) var(--kp-ease);
}

body.kp-sklep .kp-sklep-woo a.button:hover,
body.kp-sklep .kp-sklep-woo button.button:hover,
body.kp-sklep .kp-sklep-woo input.button:hover,
body.kp-sklep .kp-sklep-woo .button:hover {
  background: var(--kp-surface-alt);
  color: var(--kp-ink);
  border-color: var(--kp-ink);
}

/* Primary: place order, proceed to checkout, log in, register, save, pay, and any
   `.button.alt` (WooCommerce's own marker of the main action).
   Główny: złożenie zamówienia, przejście do kasy, logowanie, rejestracja, zapis, płatność
   i każde `.button.alt` (tak WooCommerce sam oznacza akcję główną). */
body.kp-sklep .kp-sklep-woo #place_order,
body.kp-sklep .kp-sklep-woo a.button.checkout-button,
body.kp-sklep .kp-sklep-woo .button.alt,
body.kp-sklep .kp-sklep-woo .button.pay,
body.kp-sklep .kp-sklep-woo .button.woocommerce-form-login__submit,
body.kp-sklep .kp-sklep-woo .button.woocommerce-form-register__submit,
body.kp-sklep .kp-sklep-woo button.button[name="save_account_details"],
body.kp-sklep .kp-sklep-woo button.button[name="save_address"],
body.kp-sklep .kp-sklep-woo .woocommerce-ResetPassword .button {
  background: var(--kp-cta-bg);
  color: var(--kp-cta-fg);
  border: var(--kp-border-width) solid var(--kp-cta-obrys);
}

body.kp-sklep .kp-sklep-woo #place_order:hover,
body.kp-sklep .kp-sklep-woo a.button.checkout-button:hover,
body.kp-sklep .kp-sklep-woo .button.alt:hover,
body.kp-sklep .kp-sklep-woo .button.pay:hover,
body.kp-sklep .kp-sklep-woo .button.woocommerce-form-login__submit:hover,
body.kp-sklep .kp-sklep-woo .button.woocommerce-form-register__submit:hover,
body.kp-sklep .kp-sklep-woo button.button[name="save_account_details"]:hover,
body.kp-sklep .kp-sklep-woo button.button[name="save_address"]:hover,
body.kp-sklep .kp-sklep-woo .woocommerce-ResetPassword .button:hover {
  background: var(--kp-cta-bg-hover);
  color: var(--kp-cta-fg);
  border-color: var(--kp-cta-obrys);
}

/* WooCommerce disables buttons (update cart before a change, place order while
   processing). Dimmed, never hidden.
   WooCommerce wyłącza przyciski (aktualizacja koszyka przed zmianą, zamówienie
   w trakcie). Przygaszone, nigdy ukryte. */
body.kp-sklep .kp-sklep-woo .button:disabled,
body.kp-sklep .kp-sklep-woo .button.disabled,
body.kp-sklep .kp-sklep-woo .button[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

body.kp-sklep .kp-sklep-woo button.button:disabled:hover,
body.kp-sklep .kp-sklep-woo a.button.disabled:hover {
  background: transparent;
}

/* WooCommerce's spinner overlay on a busy form (blockUI) — cream veil, not white.
   Nakładka blockUI na zajętym formularzu — kremowa, nie biała. */
body.kp-sklep .kp-sklep-woo .blockUI.blockOverlay {
  background: var(--kp-page) !important;
}

/* ---------------------------------------------------------------------------
   Pola formularzy — DS Input: etykieta caption, pole 1px, fokus akcentem
   Form fields. Label: 11px/600, 1px tracking, uppercase, muted (Input.jsx).
   --------------------------------------------------------------------------- */
body.kp-sklep .kp-sklep-woo .form-row {
  margin: 0 0 var(--kp-space-4);
  padding: 0;
}

body.kp-sklep .kp-sklep-woo .form-row > label:not(.checkbox):not(.woocommerce-form__label-for-checkbox),
body.kp-sklep .kp-sklep-woo .woocommerce-form-row > label:not(.woocommerce-form__label-for-checkbox) {
  display: block;
  margin: 0 0 6px;
  font-family: var(--kp-font-heading);
  font-size: var(--kp-text-caption);
  font-weight: var(--kp-weight-semibold);
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--kp-text-muted);
}

body.kp-sklep .kp-sklep-woo .required {
  color: var(--kp-accent);
  font-weight: var(--kp-weight-semibold);
  text-decoration: none;
  border: 0;
}

body.kp-sklep .kp-sklep-woo .optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--kp-weight-regular);
}

body.kp-sklep .kp-sklep-woo .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}

body.kp-sklep .kp-sklep-woo input.input-text,
body.kp-sklep .kp-sklep-woo .form-row input[type="text"],
body.kp-sklep .kp-sklep-woo .form-row input[type="email"],
body.kp-sklep .kp-sklep-woo .form-row input[type="tel"],
body.kp-sklep .kp-sklep-woo .form-row input[type="password"],
body.kp-sklep .kp-sklep-woo .form-row input[type="number"],
body.kp-sklep .kp-sklep-woo .form-row select,
body.kp-sklep .kp-sklep-woo .form-row textarea,
body.kp-sklep .kp-sklep-woo #coupon_code {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 11px 14px;
  background: var(--kp-surface);
  color: var(--kp-ink);
  border: var(--kp-border-width) solid var(--kp-sklep-obrys-pola);
  border-radius: var(--kp-radius-md);
  box-shadow: none;
  font-family: var(--kp-font-body);
  font-size: var(--kp-text-body);
  line-height: 1.4;
  transition:
    border-color var(--kp-duration) var(--kp-ease),
    box-shadow var(--kp-duration) var(--kp-ease);
}

body.kp-sklep .kp-sklep-woo .form-row textarea {
  min-height: 112px;
  resize: vertical;
}

/* Native select drawn like the front's SortSelect: no OS chrome, a thin chevron.
   Natywny select jak SortSelect frontu: bez wyglądu systemu, cienki szewron. */
body.kp-sklep .kp-sklep-woo .form-row select {
  padding-right: 40px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23635B51' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

body.kp-sklep .kp-sklep-woo input::placeholder,
body.kp-sklep .kp-sklep-woo textarea::placeholder {
  color: var(--kp-sklep-placeholder);
  opacity: 1;
}

/* Focus as Input.jsx: accent border + tint ring; the global 3px ring stays on top.
   Fokus jak Input.jsx: obrys akcentem + pierścień tintu; globalny pierścień 3px zostaje. */
body.kp-sklep .kp-sklep-woo input.input-text:focus,
body.kp-sklep .kp-sklep-woo .form-row input:focus,
body.kp-sklep .kp-sklep-woo .form-row select:focus,
body.kp-sklep .kp-sklep-woo .form-row textarea:focus,
body.kp-sklep .kp-sklep-woo #coupon_code:focus {
  border-color: var(--kp-accent);
  box-shadow: 0 0 0 3px var(--kp-color-magenta-tint);
}

/* Error state: WooCommerce marks the row .woocommerce-invalid after validation.
   Stan błędu: WooCommerce oznacza wiersz .woocommerce-invalid po walidacji. */
body.kp-sklep .kp-sklep-woo .form-row.woocommerce-invalid input.input-text,
body.kp-sklep .kp-sklep-woo .form-row.woocommerce-invalid select,
body.kp-sklep .kp-sklep-woo .form-row.woocommerce-invalid textarea,
body.kp-sklep .kp-sklep-woo .form-row.woocommerce-invalid .select2-selection {
  border-color: var(--kp-sklep-blad);
}

body.kp-sklep .kp-sklep-woo .form-row.woocommerce-invalid > label {
  color: var(--kp-sklep-blad);
}

/* A valid field keeps our outline — WooCommerce would paint it green (#6dc22e).
   Poprawne pole zostaje przy naszym obrysie — WooCommerce pomalowałby je na zielono. */
body.kp-sklep .kp-sklep-woo .form-row.woocommerce-validated input.input-text,
body.kp-sklep .kp-sklep-woo .form-row.woocommerce-validated select,
body.kp-sklep .kp-sklep-woo .form-row.woocommerce-validated .select2-selection {
  border-color: var(--kp-sklep-obrys-pola);
}

/* Inline error message WooCommerce adds under a field (checkout-inline-error-message).
   Komunikat pod polem, dopisywany przez WooCommerce. */
body.kp-sklep .kp-sklep-woo .checkout-inline-error-message,
body.kp-sklep .kp-sklep-woo .woocommerce-invalid .description {
  margin: var(--kp-space-1) 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--kp-sklep-blad);
}

body.kp-sklep .kp-sklep-woo .form-row .description {
  margin: var(--kp-space-1) 0 0;
  font-size: 12px;
  color: var(--kp-text-muted);
}

/* Checkboxes and radios: native controls in the accent, label as ordinary text.
   Pola wyboru: natywne kontrolki w akcencie, etykieta jako zwykły tekst. */
body.kp-sklep .kp-sklep-woo input[type="checkbox"],
body.kp-sklep .kp-sklep-woo input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--kp-accent);
  cursor: pointer;
}

/* Block, not flex: these labels carry running text with links (P24 consent, terms "*").
   In a flex box every text run and <a> becomes its own column — measured on prod 2026-09-23.
   Blok, nie flex: te etykiety niosą tekst z linkami (zgoda P24, regulamin z „*").
   W flexie każdy kawałek tekstu i każdy <a> staje się osobną kolumną — zmierzone na prod 2026-09-23. */
body.kp-sklep .kp-sklep-woo label.checkbox,
body.kp-sklep .kp-sklep-woo .woocommerce-form__label-for-checkbox {
  display: block;
  position: relative;
  padding-left: 28px;
  min-height: 24px;
  margin: 0;
  font-size: var(--kp-text-body-small);
  line-height: var(--kp-leading-body-small);
  text-transform: none;
  letter-spacing: 0;
  color: var(--kp-text);
  cursor: pointer;
}

body.kp-sklep .kp-sklep-woo label.checkbox input[type="checkbox"],
body.kp-sklep .kp-sklep-woo .woocommerce-form__label-for-checkbox input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 2px;
  margin: 0;
}

/* Fields inside a payment box (Stripe "save payment info") are gateway text, not our
   uppercase field captions.
   Pola wewnątrz bloku płatności (Stripe „zapisz informacje") to tekst bramki, nie nasze
   podpisy pól wersalikami. */
body.kp-sklep .kp-sklep-woo #payment .payment_box label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: var(--kp-text-body-small);
}

/* Two-up rows (first/last name): WooCommerce's own wrappers become a wrapping flex row.
   Pary pól (imię/nazwisko): własne opakowania WooCommerce jako zawijany rząd flex. */
body.kp-sklep .kp-sklep-woo .woocommerce-billing-fields__field-wrapper,
body.kp-sklep .kp-sklep-woo .woocommerce-shipping-fields__field-wrapper,
body.kp-sklep .kp-sklep-woo .woocommerce-address-fields__field-wrapper,
body.kp-sklep .kp-sklep-woo .woocommerce-additional-fields__field-wrapper,
body.kp-sklep .kp-sklep-woo form.woocommerce-EditAccountForm {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--kp-space-4);
}

body.kp-sklep .kp-sklep-woo .woocommerce-billing-fields__field-wrapper > *,
body.kp-sklep .kp-sklep-woo .woocommerce-shipping-fields__field-wrapper > *,
body.kp-sklep .kp-sklep-woo .woocommerce-address-fields__field-wrapper > *,
body.kp-sklep .kp-sklep-woo .woocommerce-additional-fields__field-wrapper > *,
body.kp-sklep .kp-sklep-woo form.woocommerce-EditAccountForm > * {
  flex: 0 0 100%;
  width: 100%;
  float: none;
}

@media (min-width: 640px) {
  body.kp-sklep .kp-sklep-woo .woocommerce-billing-fields__field-wrapper > .form-row-first,
  body.kp-sklep .kp-sklep-woo .woocommerce-billing-fields__field-wrapper > .form-row-last,
  body.kp-sklep .kp-sklep-woo .woocommerce-shipping-fields__field-wrapper > .form-row-first,
  body.kp-sklep .kp-sklep-woo .woocommerce-shipping-fields__field-wrapper > .form-row-last,
  body.kp-sklep .kp-sklep-woo .woocommerce-address-fields__field-wrapper > .form-row-first,
  body.kp-sklep .kp-sklep-woo .woocommerce-address-fields__field-wrapper > .form-row-last,
  body.kp-sklep .kp-sklep-woo form.woocommerce-EditAccountForm > .form-row-first,
  body.kp-sklep .kp-sklep-woo form.woocommerce-EditAccountForm > .form-row-last {
    flex-basis: calc(50% - var(--kp-space-2));
    width: calc(50% - var(--kp-space-2));
  }
}

body.kp-sklep .kp-sklep-woo fieldset {
  margin: var(--kp-space-6) 0;
  padding: var(--kp-space-5);
  border: var(--kp-border-width) solid var(--kp-border);
}

body.kp-sklep .kp-sklep-woo legend {
  padding: 0 var(--kp-space-2);
  font-size: var(--kp-text-caption);
  font-weight: var(--kp-weight-bold);
  letter-spacing: var(--kp-tracking-caption);
  text-transform: uppercase;
  color: var(--kp-ink);
}

/* ---------------------------------------------------------------------------
   select2 / selectWoo (kraj, województwo) — jak pole
   select2 / selectWoo (country, state) — drawn as a field. The dropdown is appended to
   <body>, so it is reached from body.kp-sklep, not from the content wrapper.
   --------------------------------------------------------------------------- */
body.kp-sklep .kp-sklep-woo .select2-container {
  width: 100% !important; /* select2 writes an inline width / select2 wpisuje szerokość inline */
}

body.kp-sklep .kp-sklep-woo .select2-container .select2-selection--single {
  height: 48px;
  background: var(--kp-surface);
  border: var(--kp-border-width) solid var(--kp-sklep-obrys-pola);
  border-radius: var(--kp-radius-md);
}

body.kp-sklep .kp-sklep-woo .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0 40px 0 14px;
  line-height: 46px;
  font-size: var(--kp-text-body);
  color: var(--kp-ink);
}

body.kp-sklep .kp-sklep-woo .select2-container .select2-selection--single .select2-selection__arrow {
  top: 1px;
  right: 8px;
  height: 46px;
}

body.kp-sklep .kp-sklep-woo .select2-container .select2-selection__placeholder {
  color: var(--kp-sklep-placeholder);
}

body.kp-sklep .kp-sklep-woo .select2-container--focus .select2-selection--single,
body.kp-sklep .kp-sklep-woo .select2-container--open .select2-selection--single {
  border-color: var(--kp-accent);
  box-shadow: 0 0 0 3px var(--kp-color-magenta-tint);
}

body.kp-sklep .select2-dropdown {
  background: var(--kp-surface);
  border: var(--kp-border-width) solid var(--kp-sklep-obrys-pola);
  border-radius: var(--kp-radius-md);
  font-family: var(--kp-font-body);
  font-size: var(--kp-text-body-small);
  color: var(--kp-ink);
}

body.kp-sklep .select2-dropdown .select2-search__field {
  min-height: 40px;
  padding: 8px 12px;
  border: var(--kp-border-width) solid var(--kp-sklep-obrys-pola);
  border-radius: var(--kp-radius-md);
  font-family: var(--kp-font-body);
  font-size: var(--kp-text-body);
  color: var(--kp-ink);
}

body.kp-sklep .select2-dropdown .select2-results__option {
  padding: 10px 14px;
}

/* Highlighted option: tint instead of select2's default blue (ink on tint 12,87:1).
   Podświetlona opcja: tint zamiast domyślnego niebieskiego (grafit na tincie 12,87:1). */
body.kp-sklep .select2-dropdown .select2-results__option--highlighted[aria-selected],
body.kp-sklep .select2-dropdown .select2-results__option--highlighted[data-selected],
body.kp-sklep .select2-dropdown .select2-results__option--highlighted {
  background: var(--kp-color-magenta-tint);
  color: var(--kp-ink);
}

body.kp-sklep .select2-dropdown .select2-results__option[aria-selected="true"],
body.kp-sklep .select2-dropdown .select2-results__option[data-selected="true"] {
  background: var(--kp-surface-alt);
  color: var(--kp-ink);
  font-weight: var(--kp-weight-semibold);
}

/* ---------------------------------------------------------------------------
   Tabele WooCommerce (wspólne) — linie 1px, nagłówki jak etykiety
   WooCommerce tables (shared): 1px rules, headers as captions.
   --------------------------------------------------------------------------- */
body.kp-sklep .kp-sklep-woo table.shop_table {
  width: 100%;
  margin: 0 0 var(--kp-space-6);
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  font-size: var(--kp-text-body-small);
  color: var(--kp-text);
}

body.kp-sklep .kp-sklep-woo table.shop_table th,
body.kp-sklep .kp-sklep-woo table.shop_table td {
  padding: var(--kp-space-3) 0;
  border: 0;
  border-bottom: var(--kp-border-width) solid var(--kp-border);
  background: transparent;
  text-align: left;
  vertical-align: top;
}

body.kp-sklep .kp-sklep-woo table.shop_table th + th,
body.kp-sklep .kp-sklep-woo table.shop_table td + td,
body.kp-sklep .kp-sklep-woo table.shop_table th + td {
  padding-left: var(--kp-space-4);
}

body.kp-sklep .kp-sklep-woo table.shop_table thead th {
  padding-top: 0;
  font-family: var(--kp-font-heading);
  font-size: var(--kp-text-caption);
  font-weight: var(--kp-weight-semibold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--kp-text-muted);
}

body.kp-sklep .kp-sklep-woo table.shop_table tfoot th {
  font-weight: var(--kp-weight-regular);
  color: var(--kp-text);
}

/* ---------------------------------------------------------------------------
   Tabele podsumowań jako lista wierszy (koszyk, kasa)
   Summary tables as a list of rows (cart totals, checkout review).

   A table cannot give the shipping list the full card width: th + td split every row
   into two columns, and "display: block" on a single tr only produces an anonymous
   cell — measured 2026-09-22 on dev: th and td 263 px each, labels broken into
   "Paczkomat / InPost: / 19,00 zł". So these two tables stop being tables: every row is
   a flex line (label left, amount right), the shipping row is a column with the list
   under its caption. Markup is WooCommerce's own — not a payment widget.

   Tabela nie da liście wysyłek pełnej szerokości karty: th + td dzielą każdy wiersz na
   dwie kolumny, a `display: block` na jednym tr robi tylko anonimową komórkę — zmierzone
   na dev: th i td po 263 px, etykiety łamane „Paczkomat / InPost: / 19,00 zł". Dlatego
   te dwie tabele przestają być tabelami: każdy wiersz to linia flex (etykieta z lewej,
   kwota z prawej), wiersz wysyłki to kolumna z listą pod podpisem.
   --------------------------------------------------------------------------- */
body.kp-sklep .kp-sklep-woo .cart_totals table.shop_table,
body.kp-sklep .kp-sklep-woo .cart_totals table.shop_table > tbody,
body.kp-sklep .kp-sklep-woo table.woocommerce-checkout-review-order-table,
body.kp-sklep .kp-sklep-woo table.woocommerce-checkout-review-order-table > thead,
body.kp-sklep .kp-sklep-woo table.woocommerce-checkout-review-order-table > tbody,
body.kp-sklep .kp-sklep-woo table.woocommerce-checkout-review-order-table > tfoot {
  display: block;
  width: 100%;
}

body.kp-sklep .kp-sklep-woo .cart_totals table.shop_table tr,
body.kp-sklep .kp-sklep-woo table.woocommerce-checkout-review-order-table tr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--kp-space-4);
  padding: var(--kp-space-3) 0;
  border-bottom: var(--kp-border-width) solid var(--kp-border);
}

body.kp-sklep .kp-sklep-woo .cart_totals table.shop_table tr > th,
body.kp-sklep .kp-sklep-woo .cart_totals table.shop_table tr > td,
body.kp-sklep .kp-sklep-woo table.woocommerce-checkout-review-order-table tr > th,
body.kp-sklep .kp-sklep-woo table.woocommerce-checkout-review-order-table tr > td {
  display: block;
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
}

body.kp-sklep .kp-sklep-woo .cart_totals table.shop_table tr > th,
body.kp-sklep .kp-sklep-woo table.woocommerce-checkout-review-order-table tfoot tr > th {
  font-weight: var(--kp-weight-regular);
  color: var(--kp-text);
}

/* Label cell takes the room, amount cell keeps its width and sits right.
   Komórka etykiety bierze miejsce, komórka kwoty trzyma szerokość i stoi z prawej. */
body.kp-sklep .kp-sklep-woo .cart_totals table.shop_table tr > th,
body.kp-sklep .kp-sklep-woo table.woocommerce-checkout-review-order-table tr > :first-child {
  flex: 1 1 auto;
  text-align: left;
}

body.kp-sklep .kp-sklep-woo .cart_totals table.shop_table tr > td,
body.kp-sklep .kp-sklep-woo table.woocommerce-checkout-review-order-table tr > :last-child:not(:first-child) {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

body.kp-sklep .kp-sklep-woo table.woocommerce-checkout-review-order-table thead tr {
  padding-top: 0;
}

body.kp-sklep .kp-sklep-woo table.woocommerce-checkout-review-order-table .cart_item .product-name {
  color: var(--kp-ink);
  line-height: 1.45;
}

body.kp-sklep .kp-sklep-woo table.woocommerce-checkout-review-order-table .product-quantity {
  font-weight: var(--kp-weight-regular);
  color: var(--kp-text-muted);
  white-space: nowrap;
}

body.kp-sklep .kp-sklep-woo table.woocommerce-checkout-review-order-table .cart_item .product-total {
  font-weight: var(--kp-weight-semibold);
  color: var(--kp-ink);
}

/* Shipping row: caption on top, the method list across the full card width.
   Wiersz wysyłki: podpis u góry, lista metod na pełną szerokość karty. */
body.kp-sklep .kp-sklep-woo .cart_totals table.shop_table tr.woocommerce-shipping-totals,
body.kp-sklep .kp-sklep-woo table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
  flex-direction: column;
  align-items: stretch;
  gap: var(--kp-space-2);
  padding-top: var(--kp-space-4);
  padding-bottom: var(--kp-space-4);
}

body.kp-sklep .kp-sklep-woo table.shop_table tr.woocommerce-shipping-totals > th {
  font-family: var(--kp-font-heading);
  font-size: var(--kp-text-caption);
  font-weight: var(--kp-weight-bold);
  letter-spacing: var(--kp-tracking-caption);
  text-transform: uppercase;
  color: var(--kp-ink);
}

body.kp-sklep .kp-sklep-woo .cart_totals table.shop_table tr.woocommerce-shipping-totals > td,
body.kp-sklep .kp-sklep-woo table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > td {
  width: 100%;
  text-align: left;
  white-space: normal;
}

/* Grand total: the amount on one line in the drawer's 18px bold, the VAT note in small
   type on one line under it (dev 2026-09-22: "Łącznie 212,99 zł (zawiera…)" in 4 lines).
   Suma: kwota w jednej linii jak w szufladzie (18px, pogrubiona), dopisek o VAT małym
   tekstem w jednej linii pod nią (dev 2026-09-22: łamało się na 4 linie). */
body.kp-sklep .kp-sklep-woo tr.order-total {
  align-items: flex-start;
  padding-top: var(--kp-space-4);
  border-bottom: 0;
  color: var(--kp-ink);
}

body.kp-sklep .kp-sklep-woo table.shop_table tr.order-total > th {
  color: var(--kp-ink);
  font-weight: var(--kp-weight-semibold);
}

body.kp-sklep .kp-sklep-woo tr.order-total > td {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

body.kp-sklep .kp-sklep-woo tr.order-total .amount {
  font-family: var(--kp-font-heading);
  font-size: 18px;
  font-weight: var(--kp-weight-bold);
  color: var(--kp-ink);
  white-space: nowrap;
}

body.kp-sklep .kp-sklep-woo tr.order-total .includes_tax,
body.kp-sklep .kp-sklep-woo tr.order-total small {
  display: block;
  font-size: 12px;
  font-weight: var(--kp-weight-regular);
  color: var(--kp-text-muted);
  white-space: nowrap;
}

body.kp-sklep .kp-sklep-woo tr.order-total .includes_tax .amount {
  font-family: var(--kp-font-body);
  font-size: 12px;
  font-weight: var(--kp-weight-regular);
  color: var(--kp-text-muted);
}

/* Order details on thank-you and in My Account stay a real table.
   Szczegóły zamówienia na podziękowaniu i w koncie zostają prawdziwą tabelą. */
body.kp-sklep .kp-sklep-woo table.order_details tfoot td,
body.kp-sklep .kp-sklep-woo table.order_details .product-total {
  text-align: right;
}

body.kp-sklep .kp-sklep-woo table.order_details .product-total {
  font-weight: var(--kp-weight-semibold);
  color: var(--kp-ink);
  white-space: nowrap;
}

body.kp-sklep .kp-sklep-woo table.order_details tfoot tr:last-child .amount {
  font-family: var(--kp-font-heading);
  font-size: 18px;
  font-weight: var(--kp-weight-bold);
  color: var(--kp-ink);
}

/* ---------------------------------------------------------------------------
   Metody wysyłki — lista kart na pełną szerokość (koszyk i kasa, jedna reguła)
   Shipping methods: full-width card list, the same rule in cart and checkout.
   Row 1: radio · name · price pushed right. Row 2: description under the name.
   Wiersz 1: radio · nazwa · cena dosunięta w prawo. Wiersz 2: opis pod nazwą.
   Furgonetka's pickup-point widget, when enabled, lands in the li and only gets a
   full row — never a display value inside it.
   Widżet punktu odbioru Furgonetki trafia do li i dostaje tylko pełny wiersz.
   --------------------------------------------------------------------------- */
body.kp-sklep .kp-sklep-woo ul.woocommerce-shipping-methods {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.kp-sklep .kp-sklep-woo ul.woocommerce-shipping-methods > li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--kp-space-3);
  row-gap: var(--kp-space-1);
  margin: 0 0 var(--kp-space-2);
  padding: var(--kp-space-3) 14px;
  list-style: none;
  background: var(--kp-surface);
  border: var(--kp-border-width) solid var(--kp-border);
  border-radius: var(--kp-radius-md);
  color: var(--kp-ink);
  text-align: left;
  cursor: pointer;
}

/* The whole card is the target, not the 18px radio: the label stretches an invisible
   layer over the li (a click on a label's pseudo-element activates its input). Anything
   else in the card (description, pickup-point widget) sits above that layer.
   Celem jest cała karta, nie radio 18px: etykieta rozciąga niewidoczną warstwę na li
   (klik w pseudo-element etykiety zaznacza jej pole). Reszta karty leży nad warstwą. */
body.kp-sklep .kp-sklep-woo ul.woocommerce-shipping-methods > li,
body.kp-sklep .kp-sklep-woo #payment li.wc_payment_method {
  position: relative;
}

body.kp-sklep .kp-sklep-woo ul.woocommerce-shipping-methods > li > label::after,
body.kp-sklep .kp-sklep-woo #payment li.wc_payment_method > label::after {
  content: "";
  position: absolute;
  inset: 0;
}

body.kp-sklep .kp-sklep-woo ul.woocommerce-shipping-methods > li > :not(input):not(label),
body.kp-sklep .kp-sklep-woo #payment li.wc_payment_method > :not(input):not(label) {
  position: relative;
  z-index: 1;
}

body.kp-sklep .kp-sklep-woo ul.woocommerce-shipping-methods > li:last-child {
  margin-bottom: 0;
}

body.kp-sklep .kp-sklep-woo ul.woocommerce-shipping-methods > li > input[type="radio"] {
  margin-top: 3px;
}

/* The label is "Name: <price>" — as a flex line the text and the price span split to
   the two ends of the row.
   Etykieta to „Nazwa: <cena>" — jako linia flex tekst i cena rozchodzą się na końce wiersza. */
body.kp-sklep .kp-sklep-woo ul.woocommerce-shipping-methods > li > label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--kp-space-3);
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: var(--kp-text-body-small);
  font-weight: var(--kp-weight-medium);
  line-height: 1.45;
  color: var(--kp-ink);
  cursor: pointer;
}

body.kp-sklep .kp-sklep-woo ul.woocommerce-shipping-methods > li > label .amount {
  flex: 0 0 auto;
  font-weight: var(--kp-weight-semibold);
  white-space: nowrap;
}

/* Everything else in the li (description, pickup-point widget) takes a full row,
   indented to line up with the name (radio 18px + gap 12px).
   Wszystko inne w li (opis, widżet punktu) dostaje pełny wiersz, wcięty pod nazwę. */
body.kp-sklep .kp-sklep-woo ul.woocommerce-shipping-methods > li > :not(input):not(label) {
  flex-basis: 100%;
  max-width: 100%;
  margin: 0;
  padding-left: 30px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--kp-text-muted);
}

/* Selected card: graphite outline doubled inside, tint fill (ink on tint 12,87:1).
   Wybrana karta: grafitowy obrys podwojony do środka, tło tintem. */
body.kp-sklep .kp-sklep-woo ul.woocommerce-shipping-methods > li:has(input:checked) {
  background: var(--kp-color-magenta-tint);
  border-color: var(--kp-ink);
  box-shadow: inset 0 0 0 1px var(--kp-ink);
}

body.kp-sklep .kp-sklep-woo ul.woocommerce-shipping-methods > li:only-child:not(:has(input[type="radio"])) {
  border-color: var(--kp-ink);
}

body.kp-sklep .kp-sklep-woo .woocommerce-shipping-destination,
body.kp-sklep .kp-sklep-woo .woocommerce-shipping-contents {
  margin: var(--kp-space-2) 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--kp-text-muted);
}

/* ---------------------------------------------------------------------------
   Płatności — pozycje listy jako karty; wnętrza widżetów nietknięte
   Payment methods: list items as cards; widget internals untouched.
   --------------------------------------------------------------------------- */
body.kp-sklep .kp-sklep-woo #payment {
  margin: var(--kp-space-5) 0 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

body.kp-sklep .kp-sklep-woo #payment ul.wc_payment_methods {
  margin: 0 0 var(--kp-space-5);
  padding: 0;
  list-style: none;
  border: 0;
}

body.kp-sklep .kp-sklep-woo #payment li.wc_payment_method {
  margin: 0 0 var(--kp-space-2);
  padding: var(--kp-space-3) 14px;
  list-style: none;
  background: var(--kp-surface);
  border: var(--kp-border-width) solid var(--kp-border);
  border-radius: var(--kp-radius-md);
  color: var(--kp-ink);
}

body.kp-sklep .kp-sklep-woo #payment li.wc_payment_method:has(> input:checked) {
  border-color: var(--kp-ink);
  box-shadow: inset 0 0 0 1px var(--kp-ink);
}

body.kp-sklep .kp-sklep-woo #payment li.wc_payment_method > input[type="radio"] {
  vertical-align: middle;
  margin-right: 10px;
}

body.kp-sklep .kp-sklep-woo #payment li.wc_payment_method > label {
  font-size: var(--kp-text-body-small);
  font-weight: var(--kp-weight-medium);
  line-height: 1.45;
  color: var(--kp-ink);
  cursor: pointer;
  vertical-align: middle;
}

/* Gateway logos in the label: capped height only.
   Logotypy bramek w etykiecie: wyłącznie ograniczona wysokość. */
body.kp-sklep .kp-sklep-woo #payment li.wc_payment_method > label img {
  max-height: 24px;
  width: auto;
  margin-left: var(--kp-space-2);
  vertical-align: middle;
}

/* The gateway's own box (BLIK code, card fields, Stripe element): background and type
   only. No display, no padding inside — P24 and Stripe lay it out themselves.
   Własne pole bramki: tylko tło i typografia. Bez display i bez wnętrza. */
body.kp-sklep .kp-sklep-woo #payment .payment_box {
  margin: var(--kp-space-3) 0 0;
  padding: var(--kp-space-3);
  background: var(--kp-surface-alt);
  border-radius: 0;
  font-size: var(--kp-text-body-small);
  color: var(--kp-text);
}

body.kp-sklep .kp-sklep-woo #payment .payment_box::before {
  content: none;
}

body.kp-sklep .kp-sklep-woo #payment .payment_box p:last-child {
  margin-bottom: 0;
}

body.kp-sklep .kp-sklep-woo #payment .place-order {
  margin: 0;
  padding: 0;
}

body.kp-sklep .kp-sklep-woo .woocommerce-terms-and-conditions-wrapper,
body.kp-sklep .kp-sklep-woo .woocommerce-privacy-policy-text {
  margin: 0 0 var(--kp-space-4);
  font-size: var(--kp-text-body-small);
  line-height: var(--kp-leading-body-small);
  color: var(--kp-text);
}

body.kp-sklep .kp-sklep-woo .woocommerce-terms-and-conditions-wrapper a,
body.kp-sklep .kp-sklep-woo .woocommerce-privacy-policy-text a {
  text-decoration: underline;
}

body.kp-sklep .kp-sklep-woo #place_order {
  width: 100%;
  float: none;
}

/* ---------------------------------------------------------------------------
   KASA — dane | podsumowanie z płatnością (od 1024 px)
   Checkout: details | summary with payment from 1024px; one column on phones.
   The summary card continues the front's cart drawer: white sheet, 1px line,
   18px light uppercase title with a rule under it, the grand total in 18px bold.
   Karta podsumowania jest dalszym ciągiem szuflady koszyka frontu.
   --------------------------------------------------------------------------- */
body.kp-sklep--kasa .kp-sklep-woo form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
}

body.kp-sklep--kasa .kp-sklep-woo form.checkout > * {
  grid-column: 1 / -1;
  min-width: 0;
}

body.kp-sklep--kasa .kp-sklep-woo #customer_details {
  margin: 0 0 var(--kp-space-8);
}

/* Billing and shipping are stacked, not WooCommerce's two floats.
   Rozliczenie i wysyłka jedno pod drugim, nie dwie kolumny floatów WooCommerce. */
body.kp-sklep--kasa .kp-sklep-woo #customer_details .col-1,
body.kp-sklep--kasa .kp-sklep-woo #customer_details .col-2 {
  float: none;
  width: 100%;
  max-width: none;
}

body.kp-sklep--kasa .kp-sklep-woo .woocommerce-shipping-fields,
body.kp-sklep--kasa .kp-sklep-woo .woocommerce-additional-fields {
  margin-top: var(--kp-space-6);
}

body.kp-sklep--kasa .kp-sklep-woo #ship-to-different-address {
  font-size: var(--kp-text-body);
}

body.kp-sklep--kasa .kp-sklep-woo #ship-to-different-address label {
  font-size: var(--kp-text-body);
  color: var(--kp-ink);
}

body.kp-sklep--kasa .kp-sklep-woo #order_review_heading {
  margin: 0;
  padding: var(--kp-space-4) var(--kp-space-5);
  background: var(--kp-surface);
  border: var(--kp-border-width) solid var(--kp-border);
  border-bottom-color: var(--kp-border);
}

body.kp-sklep--kasa .kp-sklep-woo #order_review {
  padding: var(--kp-space-5);
  background: var(--kp-surface);
  border: var(--kp-border-width) solid var(--kp-border);
  border-top: 0;
}

@media (min-width: 1024px) {
  body.kp-sklep--kasa .kp-sklep-woo form.checkout {
    grid-template-columns: minmax(0, 1fr) var(--kp-sklep-kolumna);
    column-gap: var(--kp-space-12);
    align-items: start;
  }

  body.kp-sklep--kasa .kp-sklep-woo #customer_details {
    grid-column: 1;
    grid-row: span 2;
    margin: 0;
  }

  body.kp-sklep--kasa .kp-sklep-woo #order_review_heading,
  body.kp-sklep--kasa .kp-sklep-woo #order_review {
    grid-column: 2;
  }
}

/* Coupon and login toggles above the form, and the coupon form itself.
   The coupon form is shown and hidden by jQuery slideToggle — it is never given display.
   Przełączniki kuponu i logowania nad formularzem oraz sam formularz kuponu.
   Formularz kuponu pokazuje i chowa jQuery — nigdy nie dostaje `display`. */
body.kp-sklep .kp-sklep-woo .woocommerce-form-coupon-toggle .woocommerce-info,
body.kp-sklep .kp-sklep-woo .woocommerce-form-login-toggle .woocommerce-info {
  border-left-color: var(--kp-border);
}

body.kp-sklep .kp-sklep-woo form.checkout_coupon,
body.kp-sklep .kp-sklep-woo form.woocommerce-form-login {
  margin: 0 0 var(--kp-space-6);
  padding: var(--kp-space-5);
  background: var(--kp-surface);
  border: var(--kp-border-width) solid var(--kp-border);
  border-radius: var(--kp-radius-md);
}

body.kp-sklep .kp-sklep-woo form.checkout_coupon .form-row {
  margin-bottom: var(--kp-space-3);
}

@media (min-width: 480px) {
  body.kp-sklep .kp-sklep-woo form.checkout_coupon .form-row-first {
    float: left;
    width: calc(100% - 180px - var(--kp-space-2));
    margin-bottom: 0;
  }

  body.kp-sklep .kp-sklep-woo form.checkout_coupon .form-row-last {
    float: right;
    width: 180px;
    margin-bottom: 0;
  }

  body.kp-sklep .kp-sklep-woo form.checkout_coupon .form-row-last .button {
    width: 100%;
  }
}

body.kp-sklep .kp-sklep-woo form.checkout_coupon .clear {
  clear: both;
}

/* ---------------------------------------------------------------------------
   KOSZYK — lista produktów | podsumowanie jak szuflada
   Cart: product list | drawer-like summary from 1024px.
   --------------------------------------------------------------------------- */
body.kp-sklep--koszyk .kp-sklep-woo > .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kp-space-8);
}

body.kp-sklep--koszyk .kp-sklep-woo > .woocommerce > * {
  grid-column: 1 / -1;
  min-width: 0;
  margin-bottom: 0;
}

/* The notices wrapper is empty most of the time — no gap for nothing.
   Opakowanie komunikatów jest zwykle puste — bez odstępu na nic. */
body.kp-sklep--koszyk .kp-sklep-woo > .woocommerce > .woocommerce-notices-wrapper:empty {
  display: none;
}

@media (min-width: 1024px) {
  body.kp-sklep--koszyk .kp-sklep-woo > .woocommerce {
    grid-template-columns: minmax(0, 1fr) var(--kp-sklep-kolumna);
    column-gap: var(--kp-space-12);
    align-items: start;
  }

  body.kp-sklep--koszyk .kp-sklep-woo > .woocommerce > .woocommerce-cart-form {
    grid-column: 1;
  }

  body.kp-sklep--koszyk .kp-sklep-woo > .woocommerce > .cart-collaterals {
    grid-column: 2;
  }
}

/* The cart table as the drawer's list, at every width. A table row cannot hold the
   drawer's line (thumbnail beside a stacked name and quantity), and a flex/grid cell
   inside a real table loses its colspan — which is what squeezed the coupon row into
   the first 130 px column on dev (2026-09-22). So the table becomes blocks; the header
   is hidden only visually and WooCommerce keeps data-title on every cell.
   Tabela koszyka jako lista szuflady, na każdej szerokości. Wiersz tabeli nie pomieści
   pozycji szuflady, a komórka flex/grid w prawdziwej tabeli gubi colspan — tak kupon
   trafił do pierwszej kolumny o szerokości 130 px na dev. Dlatego tabela staje się
   blokami; nagłówek schowany wyłącznie wizualnie. */
body.kp-sklep .kp-sklep-woo table.cart,
body.kp-sklep .kp-sklep-woo table.cart > tbody {
  display: block;
  width: 100%;
  margin: 0;
}

body.kp-sklep .kp-sklep-woo table.cart > thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

body.kp-sklep .kp-sklep-woo table.cart tr.cart_item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  grid-template-areas:
    "img nazwa usun"
    "img cena cena"
    "img ilosc suma";
  column-gap: var(--kp-space-4);
  row-gap: var(--kp-space-2);
  align-items: center;
  padding: var(--kp-space-4) 0;
  border-bottom: var(--kp-border-width) solid var(--kp-border);
}

body.kp-sklep .kp-sklep-woo table.cart tr.cart_item:first-child {
  border-top: var(--kp-border-width) solid var(--kp-border);
}

body.kp-sklep .kp-sklep-woo table.cart tr.cart_item > td {
  display: block;
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  text-align: left;
}

body.kp-sklep .kp-sklep-woo table.cart tr.cart_item > td::before {
  content: none;
}

body.kp-sklep .kp-sklep-woo table.cart tr.cart_item > .product-thumbnail { grid-area: img; align-self: start; }
body.kp-sklep .kp-sklep-woo table.cart tr.cart_item > .product-name { grid-area: nazwa; }
body.kp-sklep .kp-sklep-woo table.cart tr.cart_item > .product-remove { grid-area: usun; justify-self: end; align-self: start; }
body.kp-sklep .kp-sklep-woo table.cart tr.cart_item > .product-price { grid-area: cena; }
body.kp-sklep .kp-sklep-woo table.cart tr.cart_item > .product-quantity { grid-area: ilosc; }
body.kp-sklep .kp-sklep-woo table.cart tr.cart_item > .product-subtotal { grid-area: suma; justify-self: end; }

/* Wide screens: one line per product — thumbnail, name, unit price, quantity, total, ×.
   Szerokie ekrany: jedna linia na produkt. */
@media (min-width: 768px) {
  body.kp-sklep .kp-sklep-woo table.cart tr.cart_item {
    grid-template-columns: 64px minmax(0, 1fr) 96px 88px 104px 44px;
    grid-template-areas: "img nazwa cena ilosc suma usun";
  }

  body.kp-sklep .kp-sklep-woo table.cart tr.cart_item > .product-thumbnail,
  body.kp-sklep .kp-sklep-woo table.cart tr.cart_item > .product-remove {
    align-self: center;
  }

  body.kp-sklep .kp-sklep-woo table.cart tr.cart_item > .product-price {
    text-align: right;
  }
}

/* Thumbnail as the drawer: 64px white square, product blended onto it. The img
   carries width/height 300 from WordPress — the box, not the attribute, decides.
   Miniatura jak w szufladzie: biały kwadrat 64px, produkt wtopiony w tło. */
body.kp-sklep .kp-sklep-woo table.cart .product-thumbnail a {
  display: block;
  width: 64px;
  height: 64px;
  background: var(--kp-surface);
}

body.kp-sklep .kp-sklep-woo table.cart .product-thumbnail img {
  display: block;
  width: 64px;
  height: 64px;
  max-width: none;
  object-fit: contain;
  mix-blend-mode: multiply;
}

body.kp-sklep .kp-sklep-woo table.cart .product-name a {
  font-size: var(--kp-text-body-small);
  line-height: 1.35;
  color: var(--kp-ink);
  text-decoration: none;
}

body.kp-sklep .kp-sklep-woo table.cart .product-name a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

body.kp-sklep .kp-sklep-woo table.cart .product-name .variation,
body.kp-sklep .kp-sklep-woo table.cart .product-name .backorder_notification {
  margin: var(--kp-space-1) 0 0;
  font-size: 12px;
  color: var(--kp-text-muted);
}

body.kp-sklep .kp-sklep-woo table.cart .product-price {
  font-size: 12px;
  color: var(--kp-text-muted);
  white-space: nowrap;
}

body.kp-sklep .kp-sklep-woo table.cart .product-subtotal {
  font-weight: var(--kp-weight-semibold);
  color: var(--kp-ink);
  white-space: nowrap;
  text-align: right;
}

/* Remove link: a 44px square cross, as the drawer's close button.
   Usuwanie: krzyżyk w kwadracie 44px, jak zamknięcie szuflady. */
body.kp-sklep .kp-sklep-woo table.cart a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: transparent;
  color: var(--kp-ink) !important; /* WooCommerce core CSS paints it red with !important / rdzeń WooCommerce maluje go na czerwono z !important */
  font-size: 22px;
  font-weight: var(--kp-weight-regular);
  line-height: 1;
  text-decoration: none;
}

body.kp-sklep .kp-sklep-woo table.cart a.remove:hover {
  background: var(--kp-surface-alt);
  color: var(--kp-accent) !important;
}

/* Quantity: WooCommerce's native number field (input.qty). The drawer on the front
   shows − n + with 36px bordered buttons; the shop has no script for those, so the
   native field keeps its own spin arrows (mouse) and arrow keys (keyboard), drawn
   in the drawer's frame: 1px outline, square corners, centred number.
   Ilość: natywne pole liczby WooCommerce (input.qty). Szuflada frontu ma − n + z
   przyciskami 36px; sklep nie ma do nich skryptu, więc pole zostaje przy własnych
   strzałkach (mysz) i klawiszach strzałek (klawiatura), w ramie szuflady. */
body.kp-sklep .kp-sklep-woo .quantity {
  display: inline-block;
}

body.kp-sklep .kp-sklep-woo .quantity input.qty {
  width: 80px;
  min-height: 44px;
  margin: 0;
  padding: 0 4px 0 14px;
  background: var(--kp-surface);
  border: var(--kp-border-width) solid var(--kp-sklep-obrys-pola);
  border-radius: 0;
  font-family: var(--kp-font-body);
  font-size: var(--kp-text-body);
  color: var(--kp-ink);
  text-align: center;
}

body.kp-sklep .kp-sklep-woo .quantity input.qty:focus {
  border-color: var(--kp-accent);
  box-shadow: 0 0 0 3px var(--kp-color-magenta-tint);
}

/* With wyglad/ilosc.js: − n + as in the front's drawer (koszyk-w-naglowku.tsx) — bordered
   square buttons, 18px sign, the number between them. 44px, not the drawer's 36: in the
   shop the row stands next to 44px fields and the phone tap target stays generous.
   Without the script none of this applies and the native field above stays.
   Z wyglad/ilosc.js: − n + jak w szufladzie frontu — kwadratowe przyciski w ramce, znak
   18px, liczba pomiędzy. 44px zamiast 36 z szuflady: w sklepie wiersz stoi obok pól 44px.
   Bez skryptu nic z tego nie działa i zostaje natywne pole powyżej. */
body.kp-sklep .kp-sklep-woo .quantity.kp-ilosc {
  display: inline-flex;
  align-items: stretch;
}

body.kp-sklep .kp-sklep-woo .quantity.kp-ilosc input.qty {
  width: 48px;
  padding: 0;
  border-left: 0;
  border-right: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}

body.kp-sklep .kp-sklep-woo .quantity.kp-ilosc input.qty::-webkit-outer-spin-button,
body.kp-sklep .kp-sklep-woo .quantity.kp-ilosc input.qty::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

body.kp-sklep .kp-sklep-woo .kp-ilosc__przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  background: var(--kp-surface);
  border: var(--kp-border-width) solid var(--kp-sklep-obrys-pola);
  border-radius: 0;
  font-family: var(--kp-font-body);
  font-size: 18px;
  line-height: 1;
  color: var(--kp-ink);
  cursor: pointer;
}

body.kp-sklep .kp-sklep-woo .kp-ilosc__przycisk:hover {
  background: var(--kp-color-magenta-tint);
}

body.kp-sklep .kp-sklep-woo .kp-ilosc__przycisk:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--kp-accent);
  outline-offset: 2px;
}

body.kp-sklep .kp-sklep-woo .kp-ilosc__przycisk[aria-disabled="true"] {
  color: var(--kp-text-muted);
  cursor: not-allowed;
  background: var(--kp-surface);
}

/* Actions row: coupon field + "apply" in one line on the left, "update cart" as the
   secondary line button on the right. Phone: everything stacked, full width.
   Wiersz akcji: kupon + „zastosuj" w jednej linii z lewej, „zaktualizuj koszyk" jako
   przycisk liniowy z prawej. Telefon: wszystko w kolumnie, na pełną szerokość. */
body.kp-sklep .kp-sklep-woo table.cart tr:not(.cart_item) {
  display: block;
}

body.kp-sklep .kp-sklep-woo table.cart td.actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--kp-space-3);
  width: 100%;
  padding: var(--kp-space-5) 0 0;
  border: 0;
}

body.kp-sklep .kp-sklep-woo table.cart td.actions .coupon {
  display: flex;
  flex-direction: column;
  gap: var(--kp-space-2);
  margin: 0;
}

body.kp-sklep .kp-sklep-woo table.cart td.actions .coupon #coupon_code {
  width: 100%;
}

body.kp-sklep .kp-sklep-woo table.cart td.actions .button {
  width: 100%;
  float: none;
}

@media (min-width: 640px) {
  body.kp-sklep .kp-sklep-woo table.cart td.actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  /* When the row is too narrow (cart column at 1024 px: 524 px) "update" drops to its own
     line, right-aligned, instead of crushing the coupon field.
     Gdy wiersz jest za wąski, „zaktualizuj" schodzi do osobnej linii, do prawej. */
  body.kp-sklep .kp-sklep-woo table.cart td.actions > button[name="update_cart"] {
    margin-left: auto;
  }

  /* The coupon group grows, the field inside it shrinks first (min-width 0) and the two
     buttons keep their width — measured on dev 2026-09-22: with a 440 px cap the apply
     button spilled out of the group and overlapped "update cart".
     Grupa kuponu rośnie, pole w niej kurczy się pierwsze, przyciski trzymają szerokość —
     przy limicie 440 px przycisk wychodził z grupy i nachodził na „zaktualizuj".
     Basis 380 px: one row when there is room (field ≥ 140 px), otherwise wrap.
     Podstawa 380 px: jeden wiersz, gdy jest miejsce (pole ≥ 140 px), inaczej zawinięcie. */
  body.kp-sklep .kp-sklep-woo table.cart td.actions .coupon {
    flex: 1 1 380px;
    flex-direction: row;
    min-width: 0;
  }

  body.kp-sklep .kp-sklep-woo table.cart td.actions .coupon #coupon_code {
    flex: 1 1 160px;
    width: auto;
    min-width: 0;
  }

  body.kp-sklep .kp-sklep-woo table.cart td.actions .button {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }
}

/* Summary card (cart totals) — the drawer's bottom panel.
   Karta podsumowania — dolny panel szuflady. */
body.kp-sklep .kp-sklep-woo .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
  padding: var(--kp-space-5);
  background: var(--kp-surface);
  border: var(--kp-border-width) solid var(--kp-border);
}

body.kp-sklep .kp-sklep-woo .cart-collaterals .cart_totals > h2 {
  margin: calc(-1 * var(--kp-space-5)) calc(-1 * var(--kp-space-5)) var(--kp-space-2);
  padding: var(--kp-space-4) var(--kp-space-5);
  border-bottom: var(--kp-border-width) solid var(--kp-border);
}

body.kp-sklep .kp-sklep-woo .cart_totals table.shop_table {
  margin-bottom: var(--kp-space-5);
}

body.kp-sklep .kp-sklep-woo .wc-proceed-to-checkout {
  margin: 0;
  padding: 0;
}

body.kp-sklep .kp-sklep-woo .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  width: 100%;
  margin: 0;
}

/* Cross-sells sit INSIDE .cart-collaterals (WooCommerce hooks them before the totals),
   which put them in the 420 px summary column as 97 px tiles (dev, 2026-09-22). The
   wrapper is dissolved into the page grid (display: contents) and `order` places the
   totals beside the list and the cross-sells on their own full-width row under both.
   Polecane siedzą WEWNĄTRZ .cart-collaterals, więc trafiały do kolumny podsumowania
   jako kafle 97 px. Opakowanie rozpuszczamy w siatce strony, a `order` stawia sumy obok
   listy, a polecane w osobnym wierszu na całą szerokość. */
body.kp-sklep--koszyk .kp-sklep-woo > .woocommerce > .cart-collaterals {
  display: contents;
}

body.kp-sklep--koszyk .kp-sklep-woo > .woocommerce > .woocommerce-cart-form,
body.kp-sklep--koszyk .kp-sklep-woo .cart-collaterals > .cart_totals {
  order: 1;
}

/* Not tied to the wrapper: depending on the hook order the loop lands inside
   .cart-collaterals or right after it (measured on dev: after it).
   Bez wiązania z opakowaniem: zależnie od kolejności haków pętla ląduje w środku
   .cart-collaterals albo tuż za nim (na dev: za nim). */
body.kp-sklep--koszyk .kp-sklep-woo .cross-sells {
  order: 2;
  grid-column: 1 / -1;
  min-width: 0;
}

@media (min-width: 1024px) {
  body.kp-sklep--koszyk .kp-sklep-woo .cart-collaterals > .cart_totals {
    grid-column: 2;
  }
}

/* The cross-sell card copies the front's product card (product-grid.tsx): white square
   packshot with 16px padding, 1px line, 3px left accent, name, 16px bold price, the
   "karta" add-to-cart button — .kp-cta--linia across the card, 12px, 10px 12px.
   Grid as /sklep/: 2 columns, 3 from 768px, 4 from 1024px, gap 16px.
   Karta polecanych kopiuje kartę produktu frontu (product-grid.tsx). */
body.kp-sklep .kp-sklep-woo .cross-sells {
  float: none;
  width: 100%;
}

body.kp-sklep .kp-sklep-woo .cross-sells ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kp-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  body.kp-sklep .kp-sklep-woo .cross-sells ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  body.kp-sklep .kp-sklep-woo .cross-sells ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

body.kp-sklep .kp-sklep-woo .cross-sells ul.products::before,
body.kp-sklep .kp-sklep-woo .cross-sells ul.products::after {
  content: none;
}

body.kp-sklep .kp-sklep-woo .cross-sells ul.products > li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  background: var(--kp-surface);
  border: var(--kp-border-width) solid var(--kp-border);
  border-left: var(--kp-border-accent) solid var(--kp-accent);
  border-radius: var(--kp-radius-md);
}

/* Line accent from the category classes WooCommerce puts on the li (product_cat-<slug>).
   The front matches the product NAME and category names; the loop markup carries only
   category slugs, so a product whose line is only in its name keeps the default accent.
   Order reversed on purpose: the front takes the FIRST match of its list, CSS the LAST
   rule, so nanoplastia stands last here.
   Akcent linii z klas kategorii na li. Front dopasowuje też NAZWĘ produktu; pętla niesie
   tylko slugi kategorii, więc produkt z linią wyłącznie w nazwie zostaje przy akcencie
   domyślnym. Kolejność odwrócona: front bierze PIERWSZE trafienie, CSS OSTATNIĄ regułę. */
body.kp-sklep .kp-sklep-woo .cross-sells li.product[class*="product_cat-"][class*="botox"],
body.kp-sklep .kp-sklep-woo .cross-sells li.product[class*="product_cat-"][class*="cacau"] {
  border-left-color: var(--kp-color-line-botox-cacau);
}

body.kp-sklep .kp-sklep-woo .cross-sells li.product[class*="product_cat-"][class*="bioplast"] {
  border-left-color: var(--kp-color-line-bioplastia);
}

body.kp-sklep .kp-sklep-woo .cross-sells li.product[class*="product_cat-"][class*="k-protein"] {
  border-left-color: var(--kp-color-line-k-protein);
}

body.kp-sklep .kp-sklep-woo .cross-sells li.product[class*="product_cat-"][class*="mirror"],
body.kp-sklep .kp-sklep-woo .cross-sells li.product[class*="product_cat-"][class*="liquid"] {
  border-left-color: var(--kp-color-line-mirror-effect);
}

body.kp-sklep .kp-sklep-woo .cross-sells li.product[class*="product_cat-"][class*="hydra"] {
  border-left-color: var(--kp-color-line-hydraluxe);
}

body.kp-sklep .kp-sklep-woo .cross-sells li.product[class*="product_cat-"][class*="nanoplast"] {
  border-left-color: var(--kp-color-line-nanoplastia);
}

body.kp-sklep .kp-sklep-woo .cross-sells li.product > a.woocommerce-LoopProduct-link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  color: var(--kp-ink);
  text-decoration: none;
}

body.kp-sklep .kp-sklep-woo .cross-sells li.product img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  padding: var(--kp-space-4);
  background: var(--kp-color-neutral-white);
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Card title in the front's two registers (nazwa-karty.tsx): the module splits the name in
   PHP (korban_wyglad_podziel_nazwe, a port of lib/nazwa-produktu.ts) into
   .kp-nazwa__linia — trade name, 20px caps, light — and .kp-nazwa__opis — the rest, 14px,
   --kp-text. Caps come from CSS only: the markup keeps the name as written.
   Tytuł karty w dwóch rejestrach frontu: moduł dzieli nazwę w PHP na nazwę handlową
   (20px, wersaliki, cienka) i resztę (14px, --kp-text). Wersaliki wyłącznie z CSS. */
body.kp-sklep .kp-sklep-woo .cross-sells .woocommerce-loop-product__title {
  margin: 0;
  padding: var(--kp-space-2) var(--kp-space-4) 0;
  font-family: var(--kp-font-heading);
  font-size: var(--kp-text-body-small);
  font-weight: var(--kp-weight-regular);
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--kp-ink);
  overflow-wrap: anywhere;
}

body.kp-sklep .kp-sklep-woo .cross-sells .kp-nazwa__linia {
  display: block;
  font-size: var(--kp-text-h3);
  font-weight: var(--kp-weight-naglowek);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--kp-ink);
}

body.kp-sklep .kp-sklep-woo .cross-sells .kp-nazwa__opis {
  display: block;
  margin-top: var(--kp-space-2);
  font-size: 14px;
  font-weight: var(--kp-weight-regular);
  line-height: 1.45;
  text-transform: none;
  color: var(--kp-text);
}

/* Line label above the name, in the line colour (product-grid.tsx).
   Etykieta linii nad nazwą, w kolorze linii. */
body.kp-sklep .kp-sklep-woo .cross-sells .kp-karta__linia {
  display: block;
  padding: var(--kp-space-4) var(--kp-space-4) 0;
  font-family: var(--kp-font-heading);
  font-size: var(--kp-text-caption);
  font-weight: var(--kp-weight-bold);
  letter-spacing: var(--kp-tracking-caption);
  text-transform: uppercase;
  color: var(--kp-karta-linia, var(--kp-accent));
}

/* Line from the module (name AND categories, first match — as the front). Stands AFTER the
   category-slug rules above, so where both apply the module's answer wins.
   Linia z modułu (nazwa ORAZ kategorie, pierwsze trafienie — jak front). Stoi PO regułach
   ze slugów kategorii, więc przy obu wygrywa odpowiedź modułu. */
body.kp-sklep .kp-sklep-woo .cross-sells li.product.kp-linia--nanoplastia { --kp-karta-linia: var(--kp-color-line-nanoplastia); border-left-color: var(--kp-color-line-nanoplastia); }
body.kp-sklep .kp-sklep-woo .cross-sells li.product.kp-linia--hydraluxe { --kp-karta-linia: var(--kp-color-line-hydraluxe); border-left-color: var(--kp-color-line-hydraluxe); }
body.kp-sklep .kp-sklep-woo .cross-sells li.product.kp-linia--mirror-effect { --kp-karta-linia: var(--kp-color-line-mirror-effect); border-left-color: var(--kp-color-line-mirror-effect); }
body.kp-sklep .kp-sklep-woo .cross-sells li.product.kp-linia--k-protein { --kp-karta-linia: var(--kp-color-line-k-protein); border-left-color: var(--kp-color-line-k-protein); }
body.kp-sklep .kp-sklep-woo .cross-sells li.product.kp-linia--bioplastia { --kp-karta-linia: var(--kp-color-line-bioplastia); border-left-color: var(--kp-color-line-bioplastia); }
body.kp-sklep .kp-sklep-woo .cross-sells li.product.kp-linia--botox-cacau { --kp-karta-linia: var(--kp-color-line-botox-cacau); border-left-color: var(--kp-color-line-botox-cacau); }

body.kp-sklep .kp-sklep-woo .cross-sells li.product .price {
  display: block;
  margin-top: auto;
  padding: var(--kp-space-3) var(--kp-space-4) var(--kp-space-4);
  font-family: var(--kp-font-heading);
  font-size: 16px;
  font-weight: var(--kp-weight-bold);
  color: var(--kp-ink);
}

body.kp-sklep .kp-sklep-woo .cross-sells li.product .price del {
  margin-right: var(--kp-space-2);
  font-size: 13px;
  font-weight: var(--kp-weight-regular);
  color: var(--kp-text-muted);
}

body.kp-sklep .kp-sklep-woo .cross-sells li.product .price ins {
  text-decoration: none;
}

body.kp-sklep .kp-sklep-woo .cross-sells li.product > a.button {
  width: calc(100% - 2 * var(--kp-space-4));
  margin: 0 var(--kp-space-4) var(--kp-space-4);
  padding: 10px 12px;
  font-size: 12px;
  white-space: normal;
}

/* After an AJAX add WooCommerce appends "Zobacz koszyk" — on the cart page it links here.
   Po dodaniu przez AJAX WooCommerce dokleja „Zobacz koszyk" — na koszyku prowadzi tutaj. */
body.kp-sklep--koszyk .kp-sklep-woo .cross-sells a.added_to_cart {
  display: none;
}

/* The front's cards have no wishlist heart — hidden in the cross-sells only.
   Karty frontu nie mają serduszka listy życzeń — chowane wyłącznie w polecanych. */
/* YITH renders the heart from script, into several possible wrappers (block, shortcode,
   the button itself) — matched by class fragment, only inside the cross-sells.
   YITH rysuje serduszko skryptem, w kilku możliwych opakowaniach — dopasowanie po
   fragmencie klasy, wyłącznie w polecanych. */
body.kp-sklep .kp-sklep-woo .cross-sells [class*="yith-wcwl-add-to-wishlist"],
body.kp-sklep .kp-sklep-woo .cross-sells [class*="yith-add-to-wishlist"] {
  display: none !important; /* YITH sets display on its own elements / YITH ustawia display swoim elementom */
}

/* "… added to your cart. [View cart]" on the cart page: the message stays, the button
   (a link to this very page) goes.
   Komunikat o dodaniu na stronie koszyka zostaje, przycisk do tej samej strony znika. */
body.kp-sklep--koszyk .kp-sklep-woo .woocommerce-message a.wc-forward,
body.kp-sklep--koszyk .kp-sklep-woo .woocommerce-info a.wc-forward {
  display: none;
}

/* Empty cart: message and the drawer's "go to shop" line button.
   Pusty koszyk: komunikat i przycisk liniowy „do sklepu" jak w szufladzie. */
body.kp-sklep .kp-sklep-woo .wc-empty-cart-message .cart-empty {
  border-left-color: var(--kp-border);
}

body.kp-sklep .kp-sklep-woo .return-to-shop {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   PODZIĘKOWANIE i szczegóły zamówienia (także w koncie)
   Thank-you and order details (also in My Account).
   --------------------------------------------------------------------------- */
body.kp-sklep .kp-sklep-woo .woocommerce-order > .woocommerce-notice--success,
body.kp-sklep .kp-sklep-woo .woocommerce-thankyou-order-received {
  border-left-color: var(--kp-ink);
  font-size: var(--kp-text-body);
}

/* Overview as a row of cards: caption label, value underneath.
   Przegląd jako rząd kart: etykieta jak podpis, wartość pod spodem. */
body.kp-sklep .kp-sklep-woo ul.woocommerce-order-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--kp-space-3);
  margin: 0 0 var(--kp-space-8);
  padding: 0;
  list-style: none;
}

body.kp-sklep .kp-sklep-woo ul.woocommerce-order-overview > li {
  margin: 0;
  padding: var(--kp-space-4) var(--kp-space-5);
  background: var(--kp-surface);
  border: var(--kp-border-width) solid var(--kp-border);
  border-right: var(--kp-border-width) solid var(--kp-border);
  font-family: var(--kp-font-heading);
  font-size: var(--kp-text-caption);
  font-weight: var(--kp-weight-semibold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--kp-text-muted);
  float: none;
}

body.kp-sklep .kp-sklep-woo ul.woocommerce-order-overview > li strong {
  display: block;
  margin-top: 6px;
  font-family: var(--kp-font-body);
  font-size: var(--kp-text-body);
  font-weight: var(--kp-weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--kp-ink);
  word-break: break-word;
}

/* Order details and customer details as cards.
   Szczegóły zamówienia i dane klienta jako karty. */
body.kp-sklep .kp-sklep-woo .woocommerce-order-details,
body.kp-sklep .kp-sklep-woo .woocommerce-customer-details,
body.kp-sklep .kp-sklep-woo .woocommerce-order-downloads,
body.kp-sklep .kp-sklep-woo .woocommerce-bacs-bank-details {
  margin: 0 0 var(--kp-space-8);
  padding: var(--kp-space-5);
  background: var(--kp-surface);
  border: var(--kp-border-width) solid var(--kp-border);
}

body.kp-sklep .kp-sklep-woo .woocommerce-order-details table.order_details {
  margin: 0;
}

body.kp-sklep .kp-sklep-woo .woocommerce-order-details .order-again {
  margin: var(--kp-space-5) 0 0;
}

body.kp-sklep .kp-sklep-woo .woocommerce-customer-details .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kp-space-6);
}

@media (min-width: 768px) {
  body.kp-sklep .kp-sklep-woo .woocommerce-customer-details .woocommerce-columns--addresses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.kp-sklep .kp-sklep-woo .woocommerce-customer-details .woocommerce-column {
  float: none;
  width: auto;
  max-width: none;
}

body.kp-sklep .kp-sklep-woo .woocommerce-customer-details address {
  padding: 0;
  border: 0;
  color: var(--kp-text);
}

body.kp-sklep .kp-sklep-woo .woocommerce-customer-details address p {
  margin: var(--kp-space-2) 0 0;
}

/* ---------------------------------------------------------------------------
   KONTO — nawigacja | treść; logowanie i rejestracja jako karty
   My Account: navigation | content from 1024px; login/register as cards.
   --------------------------------------------------------------------------- */
body.kp-sklep--konto .kp-sklep-woo > .woocommerce:has(> .woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kp-space-8);
}

body.kp-sklep--konto .kp-sklep-woo > .woocommerce > * {
  min-width: 0;
}

@media (min-width: 1024px) {
  body.kp-sklep--konto .kp-sklep-woo > .woocommerce:has(> .woocommerce-MyAccount-navigation) {
    grid-template-columns: 260px minmax(0, 1fr);
    column-gap: var(--kp-space-12);
    align-items: start;
  }

  body.kp-sklep--konto .kp-sklep-woo > .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
  }
}

body.kp-sklep .kp-sklep-woo .woocommerce-MyAccount-navigation,
body.kp-sklep .kp-sklep-woo .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}

/* Navigation: the front's header link type (12px/500, 1.5px tracking, uppercase).
   Nawigacja w kroju linków nagłówka frontu. */
body.kp-sklep .kp-sklep-woo .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--kp-surface);
  border: var(--kp-border-width) solid var(--kp-border);
}

body.kp-sklep .kp-sklep-woo .woocommerce-MyAccount-navigation li {
  margin: 0;
  list-style: none;
  border-bottom: var(--kp-border-width) solid var(--kp-border);
}

body.kp-sklep .kp-sklep-woo .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: 0;
}

body.kp-sklep .kp-sklep-woo .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--kp-space-3) var(--kp-space-4);
  border-left: var(--kp-border-accent) solid transparent;
  font-family: var(--kp-font-heading);
  font-size: 12px;
  font-weight: var(--kp-weight-medium);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kp-text);
}

body.kp-sklep .kp-sklep-woo .woocommerce-MyAccount-navigation li a:hover {
  background: var(--kp-surface-alt);
  color: var(--kp-ink);
}

/* Current section: accent rule on the left and accent text (5,69:1 on white).
   Bieżący dział: linia akcentu z lewej i tekst w akcencie (5,69:1 na bieli). */
body.kp-sklep .kp-sklep-woo .woocommerce-MyAccount-navigation li.is-active a {
  border-left-color: var(--kp-accent);
  color: var(--kp-accent);
  font-weight: var(--kp-weight-semibold);
}

body.kp-sklep .kp-sklep-woo .woocommerce-MyAccount-content > p:first-child {
  font-size: var(--kp-text-body);
}

/* Logged out: login and registration side by side from 768px, each a card.
   Niezalogowana: logowanie i rejestracja obok siebie od 768px, każde jako karta. */
body.kp-sklep .kp-sklep-woo #customer_login {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kp-space-6);
}

@media (min-width: 768px) {
  body.kp-sklep .kp-sklep-woo #customer_login {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.kp-sklep .kp-sklep-woo #customer_login > .u-column1,
body.kp-sklep .kp-sklep-woo #customer_login > .u-column2 {
  float: none;
  width: auto;
  max-width: none;
  padding: var(--kp-space-6);
  background: var(--kp-surface);
  border: var(--kp-border-width) solid var(--kp-border);
}

body.kp-sklep .kp-sklep-woo #customer_login form.login,
body.kp-sklep .kp-sklep-woo #customer_login form.register,
body.kp-sklep .kp-sklep-woo form.woocommerce-ResetPassword,
body.kp-sklep .kp-sklep-woo form.lost_reset_password {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

body.kp-sklep .kp-sklep-woo form.login .form-row:has(.woocommerce-form-login__submit) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kp-space-4);
}

body.kp-sklep .kp-sklep-woo .woocommerce-LostPassword {
  margin: 0;
  font-size: var(--kp-text-body-small);
}

/* Orders table and addresses.
   Tabela zamówień i adresy. */
body.kp-sklep .kp-sklep-woo table.woocommerce-orders-table .button {
  min-height: 40px;
  padding: 8px 16px;
  margin: 0 var(--kp-space-2) var(--kp-space-1) 0;
}

body.kp-sklep .kp-sklep-woo .woocommerce-orders-table__cell-order-number a {
  font-weight: var(--kp-weight-semibold);
}

@media (max-width: 767px) {
  body.kp-sklep .kp-sklep-woo table.woocommerce-orders-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  body.kp-sklep .kp-sklep-woo table.woocommerce-orders-table,
  body.kp-sklep .kp-sklep-woo table.woocommerce-orders-table tbody,
  body.kp-sklep .kp-sklep-woo table.woocommerce-orders-table tr {
    display: block;
  }

  body.kp-sklep .kp-sklep-woo table.woocommerce-orders-table tr {
    margin: 0 0 var(--kp-space-3);
    padding: var(--kp-space-3) var(--kp-space-4);
    background: var(--kp-surface);
    border: var(--kp-border-width) solid var(--kp-border);
  }

  body.kp-sklep .kp-sklep-woo table.woocommerce-orders-table td,
  body.kp-sklep .kp-sklep-woo table.woocommerce-orders-table th {
    display: flex;
    justify-content: space-between;
    gap: var(--kp-space-4);
    padding: var(--kp-space-2) 0;
    text-align: right;
  }

  body.kp-sklep .kp-sklep-woo table.woocommerce-orders-table td:last-child {
    border-bottom: 0;
  }

  /* WooCommerce keeps the column name in data-title; show it as the row label.
     WooCommerce trzyma nazwę kolumny w data-title; pokazujemy ją jako etykietę. */
  body.kp-sklep .kp-sklep-woo table.woocommerce-orders-table td[data-title]::before,
  body.kp-sklep .kp-sklep-woo table.woocommerce-orders-table th[data-title]::before {
    content: attr(data-title);
    float: none;
    font-size: var(--kp-text-caption);
    font-weight: var(--kp-weight-semibold);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--kp-text-muted);
    text-align: left;
  }
}

body.kp-sklep .kp-sklep-woo .woocommerce-Addresses {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kp-space-6);
  margin-top: var(--kp-space-6);
}

@media (min-width: 768px) {
  body.kp-sklep .kp-sklep-woo .woocommerce-Addresses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.kp-sklep .kp-sklep-woo .woocommerce-Addresses::before,
body.kp-sklep .kp-sklep-woo .woocommerce-Addresses::after {
  content: none;
}

body.kp-sklep .kp-sklep-woo .woocommerce-Address {
  float: none;
  width: auto;
  max-width: none;
  padding: var(--kp-space-5);
  background: var(--kp-surface);
  border: var(--kp-border-width) solid var(--kp-border);
}

body.kp-sklep .kp-sklep-woo .woocommerce-Address-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--kp-space-2);
  margin: 0 0 var(--kp-space-3);
}

body.kp-sklep .kp-sklep-woo .woocommerce-Address-title h2,
body.kp-sklep .kp-sklep-woo .woocommerce-Address-title h3 {
  margin: 0;
}

body.kp-sklep .kp-sklep-woo .woocommerce-Address-title a.edit {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: var(--kp-text-body-small);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Pokaż hasło — przycisk WooCommerce bez arkusza WooCommerce
   Show-password toggle. WooCommerce draws its eye with its icon font from a stylesheet
   that is not loaded here; left alone the button measured 16×6 px, empty (dev 2026-09-22).
   Here: a 44px square at the right edge of the field, eye drawn as inline SVG; the
   `display-password` class WooCommerce toggles swaps it for a struck-through eye.
   Oko WooCommerce rysuje fontem ikon z arkusza, którego tu nie ma — przycisk miał
   16×6 px i był pusty. Tu: kwadrat 44px przy prawej krawędzi pola, oko w SVG.
   --------------------------------------------------------------------------- */
body.kp-sklep .kp-sklep-woo .password-input {
  position: relative;
  display: block;
}

body.kp-sklep .kp-sklep-woo .password-input input.input-text {
  padding-right: 52px;
}

body.kp-sklep .kp-sklep-woo .password-input .show-password-input {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23272421' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/></svg>") no-repeat center;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

body.kp-sklep .kp-sklep-woo .password-input .show-password-input.display-password {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23272421' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/><path d='M3 3l18 18'/></svg>");
}

body.kp-sklep .kp-sklep-woo .password-input .show-password-input::after {
  content: none;
}

/* ---------------------------------------------------------------------------
   Telefon: pola 16px (bez powiększania na iOS) i cele dotyku 44px
   Phones: 16px fields (no iOS zoom-on-focus) and 44px touch targets.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* iOS Safari zooms any focused field under 16px; at checkout that throws the
     layout sideways mid-typing. One px over the front's 15px, deliberately.
     iOS Safari powiększa każde pole poniżej 16px; na kasie przesuwa to układ w trakcie
     pisania. Jeden piksel ponad 15px frontu, świadomie. */
  body.kp-sklep .kp-sklep-woo input.input-text,
  body.kp-sklep .kp-sklep-woo .form-row input,
  body.kp-sklep .kp-sklep-woo .form-row select,
  body.kp-sklep .kp-sklep-woo .form-row textarea,
  body.kp-sklep .kp-sklep-woo #coupon_code,
  body.kp-sklep .kp-sklep-woo .quantity input.qty,
  body.kp-sklep .select2-dropdown .select2-search__field {
    font-size: 16px;
  }

  body.kp-sklep .kp-sklep-woo ul.woocommerce-shipping-methods > li,
  body.kp-sklep .kp-sklep-woo #payment li.wc_payment_method {
    min-height: 48px;
  }

  body.kp-sklep .kp-sklep-woo label.checkbox,
  body.kp-sklep .kp-sklep-woo .woocommerce-form__label-for-checkbox {
    min-height: 44px;
    padding-top: 10px;
  }

  body.kp-sklep .kp-sklep-woo label.checkbox input[type="checkbox"],
  body.kp-sklep .kp-sklep-woo .woocommerce-form__label-for-checkbox input[type="checkbox"] {
    top: 12px;
  }

  body.kp-sklep .kp-okruszki a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  body.kp-sklep .kp-sklep-woo .woocommerce-Address-title a.edit {
    min-height: 44px;
  }

  /* Action links that open a form (log in, coupon, lost password) get a 44px row.
     Linki otwierające formularz (logowanie, kupon, hasło) dostają wiersz 44px. */
  body.kp-sklep .kp-sklep-woo a.showlogin,
  body.kp-sklep .kp-sklep-woo a.showcoupon,
  body.kp-sklep .kp-sklep-woo .woocommerce-LostPassword a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.kp-sklep .kp-sklep-tresc *,
  body.kp-sklep .kp-sklep-tresc *::before,
  body.kp-sklep .kp-sklep-tresc *::after {
    transition-duration: 0.01ms !important;
  }
}