/* =============================================================
   Kalkulator spodów i tyłów szuflad Sevroll V-BOX 3D Slim
   Widget ProArte Meble — tokeny zgodne z app/globals.css strony
   proartemeble.pl (Modern Premium: charcoal + mosiądz + orzech).

   Wszystkie klasy mają prefiks „pk-”, żeby widget dało się wkleić
   również bezpośrednio w stronę, nie tylko w ramkę iframe.
   ============================================================= */

.pk,
.pk-body {
  --pk-tlo: #fafaf9;
  --pk-karta: #ffffff;
  --pk-atrament: #1c1917;
  --pk-atrament-gleboki: #0c0a09;
  --pk-drugorzedny: #3f3a36;
  --pk-wyciszony: #57534e;
  --pk-mosiadz: #b45309;
  --pk-mosiadz-hover: #8a3f07;
  --pk-mosiadz-jasny: #ff9800;
  --pk-orzech: #6b4f3a;
  --pk-muted: #f5f1ec;
  --pk-obwodka: #e7e2dc;
  --pk-obwodka-mocna: #d6d3d1;
  --pk-powierzchnia: #1c1917;
  --pk-blad: #b91c1c;
  --pk-ok: #15803d;

  /* Inter - kroj techniczny o wysokiej czytelnosci, pelne polskie znaki */
  --pk-display: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --pk-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* średnica medalionu z logo w spoczynku (po najechaniu rośnie 3×) */
  --pk-logo: 124px;

  /* górny panel narzędzi na telefonie: wysokość wysuwanego paska */
  --pk-panel-wys: 60px;

  /* promienie naroznikow */
  --pk-promien-duzy: 16px;
  --pk-promien: 10px;
  --pk-promien-maly: 6px;

  /* warstwowe cienie - blizsza warstwa daje kontakt z tlem, dalsza glebie */
  --pk-cien-karty: 0 1px 2px rgba(28, 25, 23, 0.05), 0 10px 28px -12px rgba(28, 25, 23, 0.22);
  --pk-cien-uniesiona: 0 2px 4px rgba(28, 25, 23, 0.06), 0 22px 44px -16px rgba(28, 25, 23, 0.3);
  --pk-cien-ciemna: 0 2px 6px rgba(12, 10, 9, 0.28), 0 26px 50px -18px rgba(12, 10, 9, 0.6);
  --pk-cien-pole: inset 0 1px 2px rgba(28, 25, 23, 0.05);
}

/* ---------- reset lokalny ---------- */
.pk-body {
  margin: 0;
  /* zabezpieczenie: żaden cień ani szeroka tabela nie doda poziomego przewijania */
  overflow-x: hidden;
  background: var(--pk-tlo);
  color: var(--pk-atrament);
  font-family: var(--pk-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.pk *,
.pk *::before,
.pk *::after {
  box-sizing: border-box;
}

.pk {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px) 40px;
}

.pk img {
  max-width: 100%;
  height: auto;
  display: block;
}

.pk :focus-visible {
  outline: 2px solid var(--pk-mosiadz);
  outline-offset: 2px;
}

.pk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- pasek marki ---------- */
.pk-pasek {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  margin: clamp(12px, 2vw, 20px) 0 0;
  padding: 18px clamp(18px, 3vw, 28px);
  background: var(--pk-powierzchnia);
  color: #f5f1ec;
  border-radius: var(--pk-promien-duzy);
  box-shadow: var(--pk-cien-ciemna);
}

/* ---------- logo w okrągłej ramce ----------
   Cały medalion jest rysowany w rozmiarze docelowym (3× stan spoczynku)
   i zmniejszany transformacją. Dzięki temu przy powiększeniu nie ma
   rozmycia — przeglądarka rasteryzuje warstwę raz, w pełnej skali.
   Spoczynek pokazuje ostry znak, najechanie włącza animację nakładaną
   trybem „screen" (czarne tło klipu znika razem z artefaktami kompresji). */
.pk-pasek__logo {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--pk-logo);
  height: var(--pk-logo);
  border-radius: 50%;
}

/* Od tabletu w górę medalion siedzi okrakiem na dolnej krawędzi paska:
   górna połowa w środku nagłówka, dolna wychodzi na zewnątrz. Pasek dostaje
   z lewej margines na jego szerokość, żeby reszta treści go nie dotykała. */
@media (min-width: 721px) {
  .pk-pasek {
    padding-left: calc(var(--pk-logo) + clamp(18px, 3vw, 28px) + 20px);
  }

  .pk-pasek__logo {
    position: absolute;
    left: clamp(18px, 3vw, 28px);
    bottom: calc(var(--pk-logo) / -2);
    z-index: 5;
  }

  /* Nadtytuł odsuwa się w prawo i staje obok medalionu — zamiast spychać
     cały nagłówek w dół zostawiamy wystającej połowie miejsce w linii.
     Selektor z .pk, bo bazowa reguła .pk-intro stoi niżej w pliku. */
  .pk .pk-intro {
    padding-top: clamp(34px, 5vw, 54px);
  }

  .pk .pk-intro .pk-kicker {
    padding-left: calc(var(--pk-logo) + 26px);
    min-height: calc(var(--pk-logo) / 2 - 14px);
  }
}

/* Miękka poświata pod medalionem — przy powiększeniu rozmywa i przyciemnia
   to, co znajdzie się pod spodem, żeby logo nie „siedziało" na tekście. */
.pk-pasek__logo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--pk-logo) * 4.1);
  height: calc(var(--pk-logo) * 4.1);
  margin: calc(var(--pk-logo) * 1.05) 0 0 calc(var(--pk-logo) * 1.05);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(18, 16, 14, 0.5) 0%,
    rgba(18, 16, 14, 0.32) 46%,
    rgba(18, 16, 14, 0) 72%
  );
  backdrop-filter: blur(4px) saturate(1.06);
  -webkit-backdrop-filter: blur(4px) saturate(1.06);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.pk-logo-krag {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--pk-logo) * 3);
  height: calc(var(--pk-logo) * 3);
  transform-origin: top left;
  transform: scale(0.33333);
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(78% 78% at 32% 24%, #3a3430 0%, #221f1c 46%, #0d0b0a 100%);
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.55),
    inset 0 0 0 3px rgba(255, 255, 255, 0.07);
  /* wolniejsze wejście niż wyjście — powiększenie ma „osiąść", a nie strzelić */
  transition:
    transform 0.62s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.62s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* znak w spoczynku */
.pk-logo-krag__znak {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 0.34s ease 0.06s, transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}

/* animacja — czarne tło wypada przez tryb mieszania */
.pk-logo-krag__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  filter: contrast(1.12) saturate(1.18) brightness(1.06);
  opacity: 0;
  transition: opacity 0.42s ease;
}

/* refleks szkła — wąski pas światła przesuwający się po medalionie */
.pk-logo-krag__szklo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(
      142deg,
      rgba(255, 255, 255, 0) 34%,
      rgba(255, 255, 255, 0.14) 46%,
      rgba(255, 255, 255, 0.03) 54%,
      rgba(255, 255, 255, 0) 66%
    ),
    radial-gradient(120% 96% at 50% 118%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 60%);
  transform: translateX(-38%);
  opacity: 0.9;
  pointer-events: none;
  transition: transform 1.05s cubic-bezier(0.22, 0.85, 0.3, 1), opacity 0.4s ease;
}

/* pierścień z gradientu mosiądzu — sama obwódka, bez wypełnienia */
.pk-logo-krag__pierscien {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.16) 0deg,
    var(--pk-mosiadz-jasny) 58deg,
    rgba(255, 236, 210, 0.95) 104deg,
    var(--pk-mosiadz) 164deg,
    rgba(255, 255, 255, 0.12) 226deg,
    var(--pk-mosiadz-jasny) 300deg,
    rgba(255, 255, 255, 0.16) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

@keyframes pk-obrot-pierscienia {
  to {
    transform: rotate(1turn);
  }
}

/* Powiększenie tylko tam, gdzie kursor naprawdę istnieje — na dotyku
   medalion zostaje w rozmiarze spoczynkowym, a animacja rusza po tapnięciu. */
@media (hover: hover) and (pointer: fine) {
  .pk-pasek__logo:hover,
  .pk-pasek__logo:focus-visible {
    z-index: 60;
  }

  .pk-pasek__logo:hover::before,
  .pk-pasek__logo:focus-visible::before {
    opacity: 1;
  }

  .pk-pasek__logo:hover .pk-logo-krag,
  .pk-pasek__logo:focus-visible .pk-logo-krag {
    transform: scale(1);
    box-shadow:
      0 34px 70px -22px rgba(0, 0, 0, 0.85),
      0 0 70px -14px rgba(255, 152, 0, 0.42),
      inset 0 0 0 3px rgba(255, 255, 255, 0.12);
  }

  .pk-pasek__logo:hover .pk-logo-krag__znak,
  .pk-pasek__logo:focus-visible .pk-logo-krag__znak {
    opacity: 0;
    transition-delay: 0s;
  }

  .pk-pasek__logo:hover .pk-logo-krag__film,
  .pk-pasek__logo:focus-visible .pk-logo-krag__film {
    opacity: 1;
  }

  .pk-pasek__logo:hover .pk-logo-krag__szklo,
  .pk-pasek__logo:focus-visible .pk-logo-krag__szklo {
    transform: translateX(38%);
    opacity: 1;
  }

  .pk-pasek__logo:hover .pk-logo-krag__pierscien,
  .pk-pasek__logo:focus-visible .pk-logo-krag__pierscien {
    opacity: 1;
    animation: pk-obrot-pierscienia 7s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pk-pasek__logo::before {
    display: none;
  }

  .pk-logo-krag,
  .pk-logo-krag__znak,
  .pk-logo-krag__szklo,
  .pk-logo-krag__pierscien {
    transition: none;
  }

  .pk-pasek__logo:hover .pk-logo-krag,
  .pk-pasek__logo:focus-visible .pk-logo-krag {
    transform: scale(0.33333);
  }

  .pk-pasek__logo:hover .pk-logo-krag__pierscien {
    animation: none;
  }
}

.pk-pasek__kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pk-mosiadz-jasny);
  white-space: nowrap;
}

.pk-pasek__system {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1.1;
}

/* Znak Sevroll na jasnej płytce — zielony logotyp potrzebuje własnego tła,
   żeby nie gasł na grafitowym pasku. */
img.pk-sevroll {
  height: 40px;
  width: auto;
  background: #ffffff;
  padding: 7px 13px;
  border-radius: var(--pk-promien-maly);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.pk-pasek__model {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a8a29e;
}

/* ---------- nagłówek ---------- */
.pk-intro {
  padding: clamp(28px, 5vw, 52px) 0 clamp(20px, 3vw, 32px);
  max-width: 62ch;
}

.pk-kicker {
  margin: 0 0 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pk-mosiadz);
}

.pk-kicker--ciemny {
  color: var(--pk-mosiadz-jasny);
}

.pk-tytul {
  margin: 0 0 16px;
  font-family: var(--pk-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.pk-tytul span {
  font-weight: 600;
  color: var(--pk-mosiadz);
}

.pk-lead {
  margin: 0;
  color: var(--pk-drugorzedny);
  font-size: 1.0625rem;
}

.pk-lead strong {
  font-weight: 500;
  color: var(--pk-atrament);
}

/* ---------- układ dwukolumnowy ---------- */
.pk-uklad {
  display: grid;
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
  align-items: start;
}

/* lewa kolumna: panel konfiguracji i przyciski akcji tuż pod nim */
.pk-lewa {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* ---------- panel konfiguracji ---------- */
.pk-panel {
  background: var(--pk-karta);
  border: 1px solid var(--pk-obwodka);
  border-radius: var(--pk-promien-duzy);
  box-shadow: var(--pk-cien-karty);
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.pk-pole {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.pk-pole--dwie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.pk-pole--dwie .pk-legenda {
  flex-wrap: wrap;
  row-gap: 2px;
}

.pk-legenda {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  margin-bottom: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pk-wyciszony);
}

.pk-legenda__kod {
  font-family: var(--pk-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--pk-mosiadz);
}

.pk-legenda__opc {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--pk-wyciszony);
}

.pk-legenda__wartosc {
  margin-left: auto;
  font-family: var(--pk-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--pk-atrament);
}

/* ---------- chipy (radio) ---------- */
.pk-chipy {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pk-chipy--wysokosc,
.pk-chipy--nl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.pk-chip {
  position: relative;
  flex: 1 1 auto;
  min-width: 58px;
  cursor: pointer;
}

.pk-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.pk-chip__tresc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 9px 8px;
  border: 1px solid var(--pk-obwodka);
  border-radius: var(--pk-promien);
  background: var(--pk-karta);
  color: var(--pk-drugorzedny);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05);
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease,
    box-shadow 0.18s ease, transform 0.18s ease;
}

.pk-chip:hover .pk-chip__tresc {
  border-color: var(--pk-orzech);
  color: var(--pk-atrament);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -6px rgba(28, 25, 23, 0.35);
}

.pk-chip input:focus-visible + .pk-chip__tresc {
  outline: 2px solid var(--pk-mosiadz);
  outline-offset: 2px;
}

.pk-chip input:checked + .pk-chip__tresc {
  background: var(--pk-powierzchnia);
  border-color: var(--pk-powierzchnia);
  color: #ffffff;
  box-shadow: 0 6px 16px -6px rgba(28, 25, 23, 0.55);
}

.pk-chip__mm {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* słupek proporcjonalny do wysokości boku */
.pk-chip__slupek {
  display: block;
  width: 14px;
  height: 30px;
  border-radius: 3px;
  background: linear-gradient(180deg, transparent 0, transparent calc(100% - var(--pk-h, 30%)), var(--pk-obwodka-mocna) calc(100% - var(--pk-h, 30%)), var(--pk-obwodka-mocna) 100%);
  transition: background 0.18s ease;
}

.pk-chip input:checked + .pk-chip__tresc .pk-chip__slupek {
  background: linear-gradient(180deg, transparent 0, transparent calc(100% - var(--pk-h, 30%)), var(--pk-mosiadz-jasny) calc(100% - var(--pk-h, 30%)), var(--pk-mosiadz-jasny) 100%);
}

.pk-chipy--wysokosc .pk-chip,
.pk-chipy--nl .pk-chip {
  min-width: 0;
}

.pk-chipy--male .pk-chip {
  flex: 1 1 0;
}

.pk-chip__probka {
  display: block;
  width: 100%;
  height: 8px;
  border: 1px solid rgba(28, 25, 23, 0.15);
  border-radius: 999px;
}

/* ---------- suwak ---------- */
.pk-suwak {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 14px 0 0;
  background: transparent;
  cursor: pointer;
}

.pk-suwak::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--pk-obwodka-mocna);
  box-shadow: var(--pk-cien-pole);
}

.pk-suwak::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--pk-obwodka-mocna);
}

.pk-suwak::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--pk-mosiadz);
  border: 3px solid var(--pk-karta);
  box-shadow: 0 0 0 1px var(--pk-mosiadz), 0 4px 10px -2px rgba(28, 25, 23, 0.45);
  transition: transform 0.15s ease;
}

.pk-suwak::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pk-mosiadz);
  border: 3px solid var(--pk-karta);
  box-shadow: 0 0 0 1px var(--pk-mosiadz), 0 4px 10px -2px rgba(28, 25, 23, 0.45);
}

.pk-suwak:active::-webkit-slider-thumb {
  transform: scale(1.12);
}

.pk-skala {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--pk-wyciszony);
}

/* ---------- pole liczbowe ---------- */
.pk-liczba {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--pk-obwodka);
  border-radius: var(--pk-promien);
  background: var(--pk-karta);
  box-shadow: var(--pk-cien-pole);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pk-liczba:focus-within {
  border-color: var(--pk-mosiadz);
  box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.18);
}

.pk-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 11px 12px;
  font-family: var(--pk-body);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--pk-atrament);
  background: transparent;
  text-align: center;
}

.pk-input:focus {
  outline: none;
}

.pk-input::-webkit-outer-spin-button,
.pk-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pk-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.pk-jednostka {
  align-self: center;
  padding-right: 10px;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--pk-wyciszony);
}

.pk-krok {
  border: 0;
  background: var(--pk-muted);
  color: var(--pk-drugorzedny);
  width: 40px;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.pk-krok:hover {
  background: var(--pk-powierzchnia);
  color: #fff;
}

.pk-podpis {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  color: var(--pk-wyciszony);
}

/* ---------- pomocnik ---------- */
.pk-pomocnik {
  margin-top: 12px;
  border-top: 1px solid var(--pk-obwodka);
  padding-top: 10px;
}

.pk-pomocnik summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--pk-mosiadz);
  list-style: none;
}

.pk-pomocnik summary::-webkit-details-marker {
  display: none;
}

.pk-pomocnik summary::before {
  content: "+ ";
  font-weight: 500;
}

.pk-pomocnik[open] summary::before {
  content: "− ";
}

.pk-pomocnik__tresc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.pk-mini {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--pk-wyciszony);
}

.pk-input--mini {
  border: 1px solid var(--pk-obwodka);
  border-radius: var(--pk-promien-maly);
  box-shadow: var(--pk-cien-pole);
  padding: 8px 10px;
  font-size: 0.9375rem;
}

.pk-pomocnik__tresc .pk-btn,
.pk-pomocnik__tresc .pk-podpis {
  grid-column: 1 / -1;
}

/* ---------- prawa kolumna ---------- */
.pk-prawa {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  min-width: 0;
}

/* ---------- podgląd 3D ---------- */
.pk-podglad {
  margin: 0;
  background: var(--pk-powierzchnia);
  border: 1px solid var(--pk-powierzchnia);
  border-radius: var(--pk-promien-duzy);
  box-shadow: var(--pk-cien-ciemna);
  overflow: hidden;
}

.pk-podglad__belka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.pk-podglad__tytul {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e7e5e4;
}

.pk-podglad__narzedzia {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pk-podglad__separator {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.16);
  margin: 0 4px;
}

.pk-ikona {
  border: 1px solid transparent;
  border-radius: var(--pk-promien-maly);
  background: transparent;
  color: #d6d3d1;
  font-family: var(--pk-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 9px;
  min-width: 30px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.pk-ikona:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.pk-ikona[aria-pressed="true"] {
  color: var(--pk-atrament);
  background: var(--pk-mosiadz-jasny);
  border-color: var(--pk-mosiadz-jasny);
}

.pk-scena {
  position: relative;
  height: clamp(300px, 42vw, 420px);
  background:
    radial-gradient(120% 90% at 50% 12%, #2f2b28 0%, #1c1917 58%, #100e0d 100%);
  perspective: 2600px;
  perspective-origin: 50% 46%;
  touch-action: none;
  cursor: grab;
  /* samo overflow:hidden nie przycina potomków z kontekstu 3D (preserve-3d),
     przez co model potrafił wyjść poza okno i przykryć resztę strony —
     contain:paint wymusza twarde przycięcie warstwy */
  overflow: hidden;
  contain: paint;
}

.pk-scena:active {
  cursor: grabbing;
}

.pk-scena__obrot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
  transform:
    translate(-50%, -50%)
    translate(var(--pk-dx, 0px), var(--pk-dy, 0px))
    rotateX(var(--pk-rx, -24deg))
    rotateY(var(--pk-ry, -32deg))
    /* scale() skalowałby tylko X i Y — oś Z musi zmniejszać się tak samo,
       inaczej perspektywa rozdyma bryłę przy małych skalach */
    scale3d(var(--pk-skala, 1), var(--pk-skala, 1), var(--pk-skala, 1));
}

.pk-model {
  position: absolute;
  transform-style: preserve-3d;
}

.pk-scena__wskazowka {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgba(245, 241, 236, 0.55);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.pk-scena--ruszona .pk-scena__wskazowka {
  opacity: 0;
}

/* bryły */
.pk-bryla {
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pk-lico {
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--pk-kolor, #cbc3b8);
  box-shadow: inset 0 0 0 1px rgba(12, 10, 9, 0.28);
  backface-visibility: hidden;
}

.pk-lico--gora { filter: brightness(1.06); }
.pk-lico--dol { filter: brightness(0.62); }
.pk-lico--lewo { filter: brightness(0.78); }
.pk-lico--prawo { filter: brightness(0.9); }
.pk-lico--tyl { filter: brightness(0.7); }

/* materiały */
.pk-bryla--plyta .pk-lico {
  --pk-kolor: #d3b98f;
  background-image: linear-gradient(92deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 42%);
}

.pk-bryla--tyl .pk-lico {
  --pk-kolor: #c6a878;
}

.pk-bryla--metal .pk-lico {
  --pk-kolor: #eceff0;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(0, 0, 0, 0.08) 100%);
}

/* zawinięta górna krawędź profilu — jaśniejsza i zaokrąglona */
.pk-bryla--kant .pk-lico {
  --pk-kolor: #f7f8f8;
  border-radius: 2.5px;
}

/* prowadnica kulkowa jest zawsze ocynkowana, niezależnie od koloru boków */
.pk-bryla--prowadnica .pk-lico {
  --pk-kolor: #b5b9bd;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.14) 100%);
}

.pk-bryla--polka .pk-lico,
.pk-bryla--wspornik .pk-lico {
  --pk-kolor: #dfe1e2;
}

.pk-bryla--zaczep .pk-lico {
  --pk-kolor: #f2f3f3;
}

.pk-model[data-kolor="grafit"] .pk-bryla--metal .pk-lico {
  --pk-kolor: #4a4d52;
}

.pk-model[data-kolor="grafit"] .pk-bryla--kant .pk-lico {
  --pk-kolor: #5f636a;
}

.pk-model[data-kolor="grafit"] .pk-bryla--polka .pk-lico,
.pk-model[data-kolor="grafit"] .pk-bryla--wspornik .pk-lico,
.pk-model[data-kolor="grafit"] .pk-bryla--zaczep .pk-lico {
  --pk-kolor: #55585e;
}

/* podświetlenie elementu */
.pk-bryla--aktywna .pk-lico {
  --pk-kolor: var(--pk-mosiadz-jasny) !important;
  box-shadow: inset 0 0 0 1px rgba(12, 10, 9, 0.4), 0 0 22px rgba(255, 152, 0, 0.45);
}

/* front — półprzezroczysty */
.pk-bryla--front .pk-lico {
  --pk-kolor: rgba(214, 211, 209, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  backface-visibility: visible;
}

/* obrys korpusu */
.pk-korpus-obrys {
  position: absolute;
  transform-style: preserve-3d;
  pointer-events: none;
}

.pk-korpus-obrys .pk-lico {
  --pk-kolor: transparent;
  background: rgba(255, 255, 255, 0.015);
  box-shadow: inset 0 0 0 1px rgba(255, 152, 0, 0.28);
  backface-visibility: visible;
}

.pk-cien {
  position: absolute;
  transform-origin: 50% 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* ---------- legenda podglądu ---------- */
.pk-legendy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: #17140f;
}

.pk-legenda-el {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 2px 0;
  color: #e7e5e4;
  font-family: var(--pk-body);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.18s ease;
}

.pk-legenda-el:hover,
.pk-legenda-el.pk-legenda-el--aktywna {
  color: var(--pk-mosiadz-jasny);
}

.pk-kropka {
  width: 10px;
  height: 10px;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.pk-kropka--dno { background: #d9cbb6; }
.pk-kropka--tyl { background: #b9a892; }

.pk-przelacznik {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #d6d3d1;
  font-size: 0.8125rem;
  cursor: pointer;
}

.pk-przelacznik input {
  accent-color: var(--pk-mosiadz);
  width: 14px;
  height: 14px;
}

.pk-przelacznik:hover {
  color: #f5f1ec;
}

/* ---------- wyniki ---------- */
.pk-wyniki {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 18px);
}

.pk-karta {
  position: relative;
  background: var(--pk-karta);
  border: 1px solid var(--pk-obwodka);
  border-radius: var(--pk-promien-duzy);
  box-shadow: var(--pk-cien-karty);
  padding: 20px 20px 16px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* mosiężny akcent na górze karty — po zaokrągleniu rysowany jako pasek */
.pk-karta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--pk-mosiadz);
}

.pk-karta:hover,
.pk-karta:focus-visible,
.pk-karta.pk-karta--aktywna {
  border-color: var(--pk-mosiadz);
  transform: translateY(-3px);
  box-shadow: var(--pk-cien-uniesiona);
}

.pk-karta__kicker {
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pk-wyciszony);
}

.pk-karta__wymiar {
  margin: 0 0 8px;
  font-family: var(--pk-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--pk-atrament-gleboki);
  font-variant-numeric: lining-nums tabular-nums;
}

.pk-karta__mm {
  font-family: var(--pk-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pk-wyciszony);
}

.pk-karta__wzor {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--pk-wyciszony);
}

/* Pozioma kreska nad szerokością ścianki tylnej — oznacza krawędź oklejoną
   PCV. Rysowana jako górna krawędź samej liczby, żeby wskazywała dokładnie
   ten wymiar, a nie całą kartę. */
#pk-tyl-szer {
  position: relative;
}

/* Kreska rysowana pseudoelementem, a nie obramowaniem: obramowanie elementu
   liniowego siada na górze pola znakowego czcionki, czyli ok. 8 px nad
   cyframi. Pseudoelement kładziemy bezpośrednio nad nimi. */
#pk-tyl-szer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Góra cyfr leży 0,227 em pod krawędzią pola znakowego Intera; odejmujemy
     jeszcze grubość kreski i prześwit, żeby odstęp był ten sam na telefonie
     (czcionka 24 px) i na monitorze (35 px). */
  top: calc(0.227em - 6px);
  height: 3px;
  border-radius: 2px;
  background: var(--pk-mosiadz);
}

.pk-karta__okleina {
  display: block;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--pk-obwodka);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--pk-wyciszony);
}

.pk-karta__okleina strong {
  font-weight: 600;
  color: var(--pk-atrament);
}

.pk-parametry {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--pk-obwodka);
  border: 1px solid var(--pk-obwodka);
  border-radius: var(--pk-promien);
  box-shadow: var(--pk-cien-karty);
  overflow: hidden;
}

.pk-parametry > div {
  background: var(--pk-muted);
  padding: 12px 14px;
}

.pk-parametry dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pk-wyciszony);
  margin-bottom: 4px;
}

.pk-parametry dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--pk-atrament);
  font-variant-numeric: tabular-nums;
}

/* ---------- uwagi ---------- */
.pk-uwagi {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pk-uwagi:empty {
  display: none;
}

.pk-uwaga {
  /* blok, nie flex — inaczej przeglądarka robi z <strong> osobny element
     siatki i w zdaniu pojawiają się sztuczne odstępy */
  display: block;
  /* uwagi to akapity <p>: domyślne marginesy w kolumnie flex się nie
     zlewają i dublowały odstęp ustawiony przez gap w .pk-uwagi */
  margin: 0;
  padding: 11px 14px;
  border-left: 3px solid var(--pk-orzech);
  border-radius: var(--pk-promien);
  background: var(--pk-muted);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05);
  font-size: 0.875rem;
  color: var(--pk-drugorzedny);
}

.pk-uwaga strong {
  font-weight: 600;
  color: var(--pk-atrament);
}

.pk-uwaga--blad {
  border-left-color: var(--pk-blad);
  background: #fdf2f2;
  color: #7f1d1d;
}

.pk-uwaga--info {
  border-left-color: var(--pk-mosiadz);
}

/* ---------- przyciski ---------- */
.pk-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pk-akcje .pk-btn {
  flex: 1 1 auto;
}

.pk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--pk-promien);
  padding: 13px 22px;
  font-family: var(--pk-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transform: scale(1);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease, transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* delikatne przybliżenie pod kursorem */
.pk-btn:hover,
.pk-btn:focus-visible {
  transform: scale(1.035);
}

.pk-btn:active {
  transform: scale(0.99);
  transition-duration: 0.08s;
}

.pk-btn--glowny {
  background: var(--pk-mosiadz);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(180, 83, 9, 0.75);
}

.pk-btn--glowny:hover {
  background: var(--pk-mosiadz-hover);
  box-shadow: 0 12px 26px -8px rgba(138, 63, 7, 0.85);
}

.pk-btn--cichy {
  background: var(--pk-karta);
  color: var(--pk-atrament);
  border-color: var(--pk-obwodka-mocna);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06);
}

.pk-btn--cichy:hover {
  border-color: var(--pk-atrament);
  background: var(--pk-atrament);
  color: #fff;
}

/* Czyszczenie to akcja nieodwracalna, ale czerwień gryzła się z marką —
   najechanie przyciemnia przycisk do orzechu z palety ProArte. */
.pk-btn--groza:hover,
.pk-btn--groza:focus-visible {
  background: var(--pk-orzech);
  border-color: var(--pk-orzech);
  color: #fff;
}

/* ikona w przycisku z napisem (np. kosz przy „Wyczyść") */
.pk-btn__ikona {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pk-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---------- system / komplet ---------- */
.pk-produkt {
  margin-top: clamp(28px, 4vw, 48px);
  padding: clamp(14px, 2vw, 20px) clamp(20px, 2.6vw, 32px) clamp(18px, 2.4vw, 28px);
  background: var(--pk-muted);
  border: 1px solid var(--pk-obwodka);
  border-radius: var(--pk-promien-duzy);
  box-shadow: var(--pk-cien-karty);
}

.pk-produkt__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(18px, 2.6vw, 34px);
  align-items: center;
  padding-top: clamp(14px, 2vw, 20px);
  margin-top: clamp(12px, 1.6vw, 16px);
  border-top: 1px solid var(--pk-obwodka);
}

.pk-produkt figure {
  margin: 0;
}

.pk-produkt__zdjecie img {
  width: 100%;
  background: #fff;
  border: 1px solid var(--pk-obwodka);
  border-radius: var(--pk-promien);
  box-shadow: var(--pk-cien-karty);
}

.pk-produkt__zdjecie figcaption,
.pk-produkt__komplet figcaption {
  margin-top: 10px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--pk-wyciszony);
}

.pk-produkt__komplet figcaption strong,
.pk-produkt__zdjecie figcaption strong {
  font-weight: 600;
  color: var(--pk-atrament);
}

.pk-produkt__naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}

.pk-produkt__naglowek::-webkit-details-marker {
  display: none;
}

/* strzałka zwijania — obraca się razem ze stanem <details> */
.pk-produkt__naglowek::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-right: 2px solid var(--pk-mosiadz);
  border-bottom: 2px solid var(--pk-mosiadz);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.pk-produkt[open] .pk-produkt__naglowek::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.pk-produkt__naglowek:hover .pk-kicker {
  color: var(--pk-mosiadz-hover);
}

.pk-produkt__naglowek:focus-visible {
  outline: 2px solid var(--pk-mosiadz);
  outline-offset: 3px;
  border-radius: var(--pk-promien-maly);
}

img.pk-gwarancja {
  margin-left: auto;
}

.pk-produkt__naglowek .pk-kicker {
  margin-bottom: 0;
}

img.pk-gwarancja {
  width: auto;
  height: 62px;
  flex: 0 0 auto;
}

.pk-cechy {
  margin: 16px 0 20px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 0.9375rem;
  color: var(--pk-drugorzedny);
}

.pk-cechy li {
  position: relative;
  padding-left: 18px;
}

.pk-cechy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--pk-mosiadz);
}

.pk-cechy strong {
  font-weight: 600;
  color: var(--pk-atrament);
}

.pk-produkt__komplet img {
  width: 100%;
  background: #fff;
  border: 1px solid var(--pk-obwodka);
  border-radius: var(--pk-promien);
  box-shadow: var(--pk-cien-karty);
}

/* ---------- lista formatek ---------- */
.pk-lista {
  margin-top: clamp(28px, 4vw, 48px);
  background: var(--pk-karta);
  border: 1px solid var(--pk-obwodka);
  border-radius: var(--pk-promien-duzy);
  box-shadow: var(--pk-cien-karty);
  overflow: hidden;
}

.pk-lista__belka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--pk-obwodka);
}

.pk-lista__tytul {
  margin: 0;
  font-family: var(--pk-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.pk-lista__narzedzia {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pk-lista__narzedzia .pk-btn {
  padding: 10px 16px;
}

.pk-input--opis {
  flex: 1 1 200px;
  min-width: 180px;
  border: 1px solid var(--pk-obwodka);
  border-radius: var(--pk-promien);
  box-shadow: var(--pk-cien-pole);
  padding: 9px 12px;
  font-size: 0.875rem;
  font-weight: 400;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* krótkie pola na symbole materiałów do eksportu CSV */
.pk-input--symbol {
  flex: 0 1 168px;
  min-width: 132px;
  border: 1px solid var(--pk-obwodka);
  border-radius: var(--pk-promien);
  box-shadow: var(--pk-cien-pole);
  padding: 9px 12px;
  font-size: 0.875rem;
  font-weight: 400;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pk-input--symbol:focus,
.pk-input--opis:focus {
  border-color: var(--pk-mosiadz);
  box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.16);
}

/* ramka robocza do wydruku zestawienia — poza widokiem */
.pk-druk {
  position: absolute;
  width: 0;
  height: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.pk-tabela-otok {
  overflow-x: auto;
}

.pk-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.pk-tabela th {
  text-align: left;
  padding: 12px clamp(10px, 1.4vw, 18px);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pk-wyciszony);
  border-bottom: 1px solid var(--pk-obwodka);
  white-space: nowrap;
}

.pk-tabela td {
  padding: 12px clamp(10px, 1.4vw, 18px);
  border-bottom: 1px solid var(--pk-obwodka);
  color: var(--pk-drugorzedny);
  vertical-align: middle;
}

.pk-tabela tr:last-child td {
  border-bottom: 0;
}

.pk-tabela td.pk-wymiar {
  font-weight: 600;
  color: var(--pk-atrament);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pk-tabela .pk-akcja {
  text-align: right;
  width: 46px;
  vertical-align: top;
}

.pk-tabela .pk-usun {
  border: 0;
  background: transparent;
  color: var(--pk-wyciszony);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.18s ease;
}

.pk-tabela .pk-usun:hover {
  color: var(--pk-blad);
}

.pk-lista__suma {
  margin: 0;
  padding: 14px clamp(16px, 2vw, 24px) 16px;
  border-top: 1px solid var(--pk-obwodka);
  background: var(--pk-muted);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pk-drugorzedny);
}

.pk-suma__linia {
  display: block;
}

.pk-suma__linia b {
  color: var(--pk-atrament);
}

/* Zużycie materiału na całe zlecenie — osobne kafelki, bo to liczby,
   po które sięga się przy zamawianiu płyty i okleiny. */
.pk-kafle {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.pk-kafel {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 168px;
  flex: 1 1 168px;
  padding: 10px 14px;
  background: var(--pk-karta);
  border: 1px solid var(--pk-obwodka);
  border-radius: var(--pk-promien);
  box-shadow: var(--pk-cien-karty);
}

.pk-kafel b {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--pk-atrament-gleboki);
  font-variant-numeric: lining-nums tabular-nums;
}

.pk-kafel small {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pk-wyciszony);
}

.pk-kafel em {
  margin-top: 3px;
  font-size: 0.75rem;
  font-style: normal;
  color: var(--pk-drugorzedny);
  font-variant-numeric: lining-nums tabular-nums;
}

.pk-kafel--akcent {
  border-color: var(--pk-mosiadz);
  box-shadow: var(--pk-cien-karty), inset 3px 0 0 var(--pk-mosiadz);
}

/* ---------- stopka ---------- */
.pk-stopka {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(28px, 4vw, 48px);
  padding: clamp(24px, 3vw, 36px);
  background: var(--pk-powierzchnia);
  color: #d6d3d1;
  border-radius: var(--pk-promien-duzy);
  box-shadow: var(--pk-cien-ciemna);
}

.pk-stopka ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9375rem;
  color: #e7e5e4;
}

.pk-stopka strong {
  color: #fff;
  font-weight: 600;
}

.pk-stopka__zrodlo {
  margin: 18px 0 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: #b8b2ad;
  max-width: 62ch;
}

.pk-stopka__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  justify-content: center;
}

.pk-stopka__haslo {
  margin: 0;
  font-family: var(--pk-display);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: #fff;
}


/* ---------- toast ---------- */
/* Komunikat o dodaniu pozycji. Pojawia się natychmiast (bez animacji
   wejścia), znika łagodnie. Zawsze na dole ekranu, w osi środka — także
   na telefonie z paskiem systemowym (safe-area) i w trybie pełnoekranowym.
   --pk-toast-dol ustawia skrypt, gdy widget siedzi w ramce iframe i zna
   położenie widocznego fragmentu; domyślnie to zwykły dół okna. */
.pk-toast {
  position: fixed;
  /* Centrowanie marginesem, a nie „left: 50% + translate" — transformacja
     zostaje wtedy wolna dla samego wygaszania, a komunikat trafia w oś
     ekranu niezależnie od paska przewijania. */
  left: 0;
  right: 0;
  margin-inline: auto;
  width: max-content;
  bottom: var(--pk-toast-dol, max(22px, env(safe-area-inset-bottom, 0px) + 14px));
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: min(92vw, 440px);
  padding: 13px 20px 13px 16px;
  background: linear-gradient(180deg, #2a2522 0%, #171412 100%);
  color: #f7f4f0;
  font-family: var(--pk-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 3px solid var(--pk-mosiadz-jasny);
  border-radius: var(--pk-promien);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 22px 48px -16px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  pointer-events: none;
  /* wygaszanie: łagodne; pojawianie się nadpisuje klasa --widoczny */
  transition: opacity 0.5s ease 0.05s, transform 0.5s ease 0.05s;
  z-index: 90;
}

.pk-toast--widoczny {
  opacity: 1;
  transform: none;
  transition: none; /* natychmiast, bez wjeżdżania */
}

.pk-toast__ikona {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pk-mosiadz-jasny);
}

.pk-toast__ikona svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #17140f;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pk-toast__tresc b {
  font-weight: 700;
}

.pk-toast--blad {
  border-left-color: var(--pk-blad);
}

.pk-toast--blad .pk-toast__ikona {
  background: var(--pk-blad);
}

@media (max-width: 480px) {
  .pk-toast {
    max-width: calc(100vw - 24px);
    font-size: 0.875rem;
    padding: 12px 16px 12px 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pk-toast {
    transition: opacity 0.3s ease;
    transform: none;
  }
}

/* ---------- responsywność ---------- */
@media (max-width: 960px) {
  .pk-uklad {
    grid-template-columns: 1fr;
  }

  .pk-lewa {
    order: 2;
  }

  .pk-prawa {
    order: 1;
  }
}

@media (max-width: 860px) {
  .pk-produkt__panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .pk-stopka {
    grid-template-columns: 1fr;
  }

  .pk-wyniki {
    grid-template-columns: 1fr;
  }

  /* Na telefonie pasek układa się w siatkę: logo i znak Sevroll dzielą
     pierwszy wiersz, narzędzia idą pod spód. Wcześniej logo zostawało samo
     w wierszu i pasek rósł niepotrzebnie w górę. */
  .pk-pasek {
    display: grid;
    /* minmax(0, 1fr) — bez tego kolumna nie zejdzie ponizej szerokosci
       najdłuższego napisu i pasek rozpycha stronę na wąskim telefonie. */
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "logo system"
      "kicker kicker";
    align-items: center;
    gap: 14px 16px;
  }

  .pk-pasek__logo {
    grid-area: logo;
  }

  /* Selektor z rodzicem, bo bazowa reguła .pk-pasek__prawa { display: flex }
     stoi niżej w pliku i przy równej wadze wygrywa. */
  .pk-pasek .pk-pasek__prawa {
    display: contents;
  }

  /* ---------- górny panel narzędzi ----------
     Na wąskim ekranie Info / motyw / pełny ekran nie mieszczą się w pasku,
     więc chowają się za górną krawędzią ekranu, w osi środka. Wysuwa je
     zakładka ze śrubką — półprzezroczysta w spoczynku, niemal pełna, gdy
     panel jest otwarty. */
  .pk-narzedzia {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 80;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: var(--pk-panel-wys);
    padding: 0 12px;
    background: rgba(23, 20, 18, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 12px 34px -14px rgba(0, 0, 0, 0.75);
    transform: translate(-50%, -102%);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .pk-narzedzia--otwarty {
    transform: translate(-50%, 0);
  }

  /* w panelu zostają same ikony — podpisy czyta czytnik ekranu */
  .pk-narzedzia .pk-narzedzie {
    justify-content: center;
    width: 46px;
    padding: 9px 0;
  }

  .pk-narzedzia .pk-narzedzie span:not(.pk-sr) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  /* Selektor z rodzicem — bazowe „display: none" stoi niżej w pliku. */
  .pk .pk-zakladka {
    display: flex;
  }

  .pk-pasek__system {
    grid-area: system;
  }

  /* w siatce telefonowej jest miejsce na jedną linię — bez łamania wygląda lepiej */
  .pk-pasek__model {
    white-space: nowrap;
  }

  .pk-pasek__kicker {
    grid-area: kicker;
    text-align: left;
  }

  .pk-pasek {
    --pk-logo: 88px;
  }
}

@media (max-width: 560px) {
  .pk-pole--dwie {
    grid-template-columns: 1fr;
  }

  /* pasek narzędzi podglądu musi zmieścić się na wąskim ekranie */
  .pk-podglad__belka {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .pk-podglad__narzedzia {
    width: 100%;
    justify-content: space-between;
  }

  .pk-ikona {
    padding: 6px 8px;
  }

  .pk-chipy--wysokosc .pk-chip {
    flex: 1 1 30%;
  }

  .pk-akcje .pk-btn,
  .pk-lista__narzedzia .pk-btn {
    flex: 1 1 100%;
  }
}

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

  .pk-btn:hover,
  .pk-btn:focus-visible,
  .pk-btn:active,
  .pk-chip:hover .pk-chip__tresc,
  .pk-karta:hover {
    transform: none;
  }
}

/* ---------- druk ---------- */
@media print {
  .pk-body {
    background: #fff;
  }

  .pk-panel,
  .pk-podglad,
  .pk-produkt,
  .pk-logo-krag,
  .pk-akcje,
  .pk-lista__narzedzia,
  .pk-stopka__cta,
  .pk-toast,
  .pk-pomocnik {
    display: none !important;
  }

  .pk {
    max-width: none;
    padding: 0;
  }

  .pk-pasek {
    background: #fff;
    color: #000;
    border-bottom: 1px solid #000;
    margin: 0;
    padding: 0 0 10px;
  }

  .pk-pasek__model,
  .pk-pasek__kicker {
    color: #000;
  }

  img.pk-sevroll {
    padding: 0;
  }

  .pk-intro {
    padding: 12px 0;
  }

  .pk-uklad {
    display: block;
  }

  .pk-wyniki {
    grid-template-columns: 1fr 1fr;
  }

  .pk-karta,
  .pk-lista,
  .pk-parametry,
  .pk-uwaga {
    box-shadow: none !important;
    border: 1px solid #999;
    border-radius: 0;
  }

  .pk-pasek {
    border-radius: 0;
    box-shadow: none;
  }

  .pk-lista {
    margin-top: 16px;
    break-inside: avoid;
  }

  .pk-stopka {
    background: #fff;
    color: #000;
    border-top: 1px solid #999;
    padding: 12px 0 0;
  }

  .pk-stopka__zrodlo,
  .pk-stopka ul {
    color: #333;
  }
}


/* =============================================================
   Pasek narzędzi, okno informacyjne, ciemny motyw i treść
   ============================================================= */

/* ---------- prawa strona paska marki ---------- */
.pk-pasek__prawa {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 22px);
}


/* ---------- zakładka narzędzi (tylko wąskie ekrany) ----------
   Wisi przy górnej krawędzi ekranu, w osi środka — tam nagłówek na
   telefonie jest pusty (logo po lewej, znak Sevroll po prawej). */
.pk-zakladka {
  display: none;
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 81;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 30px;
  padding: 0;
  background: linear-gradient(180deg, #2a2522 0%, #171412 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.7);
  color: var(--pk-mosiadz-jasny);
  cursor: pointer;
  opacity: 0.5;
  transform: translateX(-50%);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.pk-zakladka__ikona {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* otwarty panel: zakładka zjeżdża razem z nim i trzyma się jego dolnej krawędzi */
.pk-zakladka[aria-expanded="true"] {
  opacity: 0.9;
  transform: translate(-50%, var(--pk-panel-wys));
}

.pk-zakladka[aria-expanded="true"] .pk-zakladka__ikona {
  transform: rotate(90deg);
}

.pk-zakladka:focus-visible {
  opacity: 0.95;
  outline: 2px solid var(--pk-mosiadz-jasny);
  outline-offset: 2px;
}


.pk-narzedzia {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pk-narzedzie {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--pk-promien);
  background: rgba(255, 255, 255, 0.06);
  color: #e7e5e4;
  font-family: var(--pk-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease,
    transform 0.18s ease;
}

.pk-narzedzie:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
  transform: translateY(-1px);
}

.pk-narzedzie[aria-pressed="true"] {
  background: var(--pk-mosiadz);
  border-color: var(--pk-mosiadz);
  color: #fff;
}

/* przycisk bez podpisu — kwadratowy, sama ikona */
.pk-narzedzie--ikona {
  padding: 8px;
}

.pk-narzedzie svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ikony przełączane stanem przycisku */
.pk-ikona-slonce,
.pk-ikona-zwin {
  display: none;
}

.pk-narzedzie[aria-pressed="true"] .pk-ikona-ksiezyc,
.pk-narzedzie[aria-pressed="true"] .pk-ikona-rozwin {
  display: none;
}

.pk-narzedzie[aria-pressed="true"] .pk-ikona-slonce,
.pk-narzedzie[aria-pressed="true"] .pk-ikona-zwin {
  display: block;
}

/* ---------- okno modalne ---------- */
.pk-modal {
  width: min(680px, calc(100vw - 32px));
  max-height: min(84vh, 780px);
  max-height: min(84dvh, 780px);
  padding: 0;
  border: 1px solid var(--pk-obwodka);
  border-radius: var(--pk-promien-duzy);
  background: var(--pk-karta);
  color: var(--pk-atrament);
  font-family: var(--pk-body);
  box-shadow: 0 30px 70px -20px rgba(12, 10, 9, 0.6);
  overflow: hidden;
}

.pk-modal::backdrop {
  background: rgba(12, 10, 9, 0.62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.pk-modal--pytanie {
  width: min(460px, calc(100vw - 32px));
}

.pk-modal__belka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(18px, 3vw, 26px);
  border-bottom: 1px solid var(--pk-obwodka);
  background: var(--pk-muted);
}

.pk-modal__tytul {
  margin: 0;
  font-family: var(--pk-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pk-modal__zamknij {
  border: 1px solid transparent;
  border-radius: var(--pk-promien-maly);
  background: transparent;
  color: var(--pk-wyciszony);
  font-size: 1.5rem;
  line-height: 1;
  padding: 2px 10px 6px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.pk-modal__zamknij:hover {
  background: var(--pk-powierzchnia);
  color: #fff;
}

.pk-modal__tresc {
  padding: clamp(18px, 3vw, 26px);
  overflow-y: auto;
  max-height: calc(min(84vh, 780px) - 68px);
  max-height: calc(min(84dvh, 780px) - 68px);
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-size: 0.9375rem;
  color: var(--pk-drugorzedny);
}

.pk-modal__tresc h3 {
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pk-mosiadz);
}

.pk-modal__tresc p {
  margin: 0 0 8px;
  line-height: 1.65;
}

.pk-modal__tresc p:last-child {
  margin-bottom: 0;
}

.pk-modal__wzory,
.pk-modal__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pk-modal__wzory li {
  padding: 9px 12px;
  border-radius: var(--pk-promien-maly);
  background: var(--pk-muted);
  font-variant-numeric: tabular-nums;
}

.pk-modal__lista li {
  position: relative;
  padding-left: 18px;
  line-height: 1.6;
}

.pk-modal__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--pk-mosiadz);
}

.pk-modal__wzory strong,
.pk-modal__lista strong,
.pk-modal__tresc strong {
  color: var(--pk-atrament);
  font-weight: 600;
}

.pk-modal__mini {
  font-size: 0.875rem;
  color: var(--pk-wyciszony);
}

.pk-modal__link {
  color: var(--pk-mosiadz);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.pk-modal__link:hover {
  color: var(--pk-mosiadz-hover);
}

.pk-modal__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}

.pk-tabela--zwarta th {
  padding: 8px 12px;
  white-space: normal;
  line-height: 1.35;
}

.pk-tabela--zwarta td {
  padding: 8px 12px;
  white-space: nowrap;
}

/* ---------- treść merytoryczna pod kalkulatorem ---------- */
.pk-tresc {
  margin-top: clamp(28px, 4vw, 48px);
  padding: clamp(22px, 3vw, 36px);
  background: var(--pk-karta);
  border: 1px solid var(--pk-obwodka);
  border-radius: var(--pk-promien-duzy);
  box-shadow: var(--pk-cien-karty);
  max-width: 100%;
}

/* nagłówek sekcji jest jednocześnie przełącznikiem zwijania */
.pk-tresc__naglowek {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 2px 0;
}

.pk-tresc__naglowek::-webkit-details-marker {
  display: none;
}

.pk-tresc__naglowek::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  margin-left: auto;
  border-right: 2px solid var(--pk-mosiadz);
  border-bottom: 2px solid var(--pk-mosiadz);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.pk-tresc[open] .pk-tresc__naglowek::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.pk-tresc__naglowek:hover h2 {
  color: var(--pk-mosiadz);
}

.pk-tresc__naglowek:focus-visible {
  outline: 2px solid var(--pk-mosiadz);
  outline-offset: 3px;
  border-radius: var(--pk-promien-maly);
}

.pk-tresc__panel {
  padding-top: clamp(14px, 2vw, 20px);
  margin-top: clamp(12px, 1.6vw, 16px);
  border-top: 1px solid var(--pk-obwodka);
}

.pk-tresc h2 {
  margin: 0;
  font-family: var(--pk-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--pk-atrament);
  transition: color 0.18s ease;
}

.pk-tresc__panel > h3 + * {
  margin-top: 0;
}

.pk-tresc h3 {
  margin: 30px 0 12px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--pk-atrament);
}

.pk-tresc p {
  margin: 0 0 12px;
  max-width: 78ch;
  color: var(--pk-drugorzedny);
  line-height: 1.7;
}

.pk-tresc strong {
  font-weight: 600;
  color: var(--pk-atrament);
}

.pk-tresc a:not(.pk-btn) {
  color: var(--pk-mosiadz);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.pk-tresc__mini {
  font-size: 0.875rem;
  color: var(--pk-wyciszony);
}

/* ---------- kontakt pod treścią ---------- */
.pk-kontakt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 16px;
}

.pk-kontakt__link {
  font-size: 1rem;
  font-weight: 600;
  color: var(--pk-atrament);
  text-decoration: none;
  border-bottom: 1px solid var(--pk-obwodka-mocna);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.pk-kontakt__link:hover {
  color: var(--pk-mosiadz);
  border-color: var(--pk-mosiadz);
}

.pk-faq {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 78ch;
}

.pk-faq details {
  border: 1px solid var(--pk-obwodka);
  border-radius: var(--pk-promien);
  background: var(--pk-muted);
  overflow: hidden;
}

.pk-faq summary {
  cursor: pointer;
  padding: 13px 16px;
  font-weight: 600;
  color: var(--pk-atrament);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pk-faq summary::-webkit-details-marker {
  display: none;
}

.pk-faq summary::before {
  content: "+";
  color: var(--pk-mosiadz);
  font-weight: 700;
  width: 12px;
  flex: 0 0 auto;
}

.pk-faq details[open] summary::before {
  content: "−";
}

.pk-faq details p {
  margin: 0;
  padding: 0 16px 15px 38px;
  font-size: 0.9375rem;
}

.pk-stopka__link {
  display: inline-block;
  margin-top: 8px;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--pk-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pk-mosiadz-jasny);
  cursor: pointer;
}

.pk-stopka__link:hover {
  text-decoration: underline;
}

/* ---------- tryb pełnoekranowy ---------- */
.pk-body:fullscreen,
.pk:fullscreen {
  overflow-y: auto;
  background: var(--pk-tlo);
}

.pk:fullscreen {
  max-width: none;
  padding: 0 clamp(16px, 4vw, 48px) 40px;
}

/* ---------- ciemny motyw ---------- */
.pk-body[data-motyw="ciemny"],
.pk-body[data-motyw="ciemny"] .pk {
  --pk-tlo: #141210;
  --pk-karta: #1e1b18;
  --pk-atrament: #f5f1ec;
  --pk-atrament-gleboki: #ffffff;
  --pk-drugorzedny: #d6d3d1;
  --pk-wyciszony: #a8a29e;
  --pk-mosiadz: #d9822b;
  --pk-mosiadz-hover: #f0a447;
  --pk-orzech: #a07e5c;
  --pk-muted: #26221f;
  --pk-obwodka: #35302c;
  --pk-obwodka-mocna: #4b443e;
  --pk-powierzchnia: #0f0d0c;
  --pk-blad: #f87171;

  --pk-cien-karty: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 30px -14px rgba(0, 0, 0, 0.85);
  --pk-cien-uniesiona: 0 2px 6px rgba(0, 0, 0, 0.55), 0 24px 48px -18px rgba(0, 0, 0, 0.95);
  --pk-cien-ciemna: 0 2px 6px rgba(0, 0, 0, 0.6), 0 26px 50px -18px rgba(0, 0, 0, 0.95);
  --pk-cien-pole: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* elementy, które w jasnym motywie mają na sztywno biel lub grafit */
.pk-body[data-motyw="ciemny"] .pk-chip input:checked + .pk-chip__tresc {
  background: var(--pk-mosiadz);
  border-color: var(--pk-mosiadz);
  color: #14110f;
}

.pk-body[data-motyw="ciemny"] .pk-chip input:checked + .pk-chip__tresc .pk-chip__slupek {
  background: linear-gradient(180deg, transparent 0, transparent calc(100% - var(--pk-h, 30%)),
    #14110f calc(100% - var(--pk-h, 30%)), #14110f 100%);
}

.pk-body[data-motyw="ciemny"] .pk-btn--glowny {
  color: #14110f;
  box-shadow: 0 6px 16px -6px rgba(217, 130, 43, 0.6);
}

.pk-body[data-motyw="ciemny"] .pk-btn--cichy:hover {
  background: var(--pk-mosiadz);
  border-color: var(--pk-mosiadz);
  color: #14110f;
}

.pk-body[data-motyw="ciemny"] .pk-krok:hover {
  background: var(--pk-mosiadz);
  color: #14110f;
}

/* Na ciemnym tle grafitowy pasek zlewa sie ze strona — dostaje jasniejsza
   powierzchnie i cienka ramke, zeby zachowal ksztalt karty. */
.pk-body[data-motyw="ciemny"] .pk-pasek {
  background: #22201d;
  border: 1px solid #3c3733;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, var(--pk-cien-ciemna);
}

.pk-body[data-motyw="ciemny"] .pk-podglad {
  border-color: var(--pk-obwodka);
}

.pk-body[data-motyw="ciemny"] .pk-scena {
  background: radial-gradient(120% 90% at 50% 12%, #23201d 0%, #16130f 58%, #0a0908 100%);
}

.pk-body[data-motyw="ciemny"] .pk-legendy {
  background: #131110;
}

.pk-body[data-motyw="ciemny"] .pk-stopka {
  border: 1px solid var(--pk-obwodka);
}

.pk-body[data-motyw="ciemny"] .pk-uwaga--blad {
  background: #2a1717;
  color: #fca5a5;
}

/* zdjęcia produktowe mają białe tło — na ciemnym potrzebują własnej płyty */
.pk-body[data-motyw="ciemny"] .pk-produkt__zdjecie img,
.pk-body[data-motyw="ciemny"] .pk-produkt__komplet img,
.pk-body[data-motyw="ciemny"] .pk-modal__zamknij:hover {
  background: var(--pk-mosiadz);
  color: #14110f;
}

@media (max-width: 720px) {
  .pk-pasek__prawa {
    width: 100%;
    justify-content: space-between;
  }

  .pk-narzedzie__etykieta {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pk-narzedzie {
    padding: 8px 10px;
  }
}

@media print {
  .pk-tresc,
  .pk-narzedzia,
  .pk-zakladka,
  .pk-modal,
  .pk-stopka__link {
    display: none !important;
  }
}


/* =============================================================
   Dopasowanie do urządzeń dotykowych i małych ekranów
   ============================================================= */

/* Ekran dotykowy: przeciąganie w pionie ma przewijać stronę, a nie
   blokować się na podglądzie 3D — obrót zostaje na ruchu poziomym
   i na przyciskach widoków. */
@media (pointer: coarse) {
  .pk-scena {
    touch-action: pan-y;
  }

  /* iOS przybliża stronę przy fokusie na polu mniejszym niż 16 px */
  .pk-input,
  .pk-input--mini,
  .pk-input--opis {
    font-size: 16px;
  }

  /* wygodniejsze cele dotyku */
  .pk-narzedzie,
  .pk-ikona {
    min-height: 38px;
  }

  .pk-krok {
    width: 46px;
  }

  .pk-suwak {
    padding: 6px 0;
  }
}

/* Telefon w poziomie — niski, szeroki ekran: podgląd nie może zjeść
   całej wysokości, a układ dwukolumnowy wraca wcześniej. */
@media (max-height: 560px) and (orientation: landscape) {
  .pk-scena {
    height: clamp(190px, 52vh, 300px);
  }

  .pk-intro {
    padding: 20px 0 14px;
  }

  /* Telefon w poziomie bywa szerszy niż 720 px, więc obowiązuje układ
     „desktopowy" z medalionem poza tokiem — skracamy tylko pionowe odstępy
     i sam medalion, a rezerwę z lewej zostawiamy nietkniętą. */
  .pk-pasek {
    --pk-logo: 76px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 16px;
  }

  .pk-modal {
    max-height: 92vh;
    max-height: 92dvh;
  }

  .pk-modal__tresc {
    max-height: calc(92dvh - 62px);
  }
}

/* Tablet w pionie — jedna kolumna, ale podgląd może być wyższy.
   Warunek wysokości wyklucza telefon trzymany poziomo. */
@media (min-width: 700px) and (max-width: 960px) and (min-height: 620px) {
  .pk-scena {
    height: clamp(340px, 44vw, 460px);
  }

  .pk-wyniki {
    grid-template-columns: 1fr 1fr;
  }
}

/* Bardzo wąskie telefony (320 px) */
@media (max-width: 380px) {
  .pk {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* na małym telefonie kicker paska powiela nagłówek — zabiera cały wiersz */
  .pk-pasek__kicker {
    display: none;
  }

  .pk-pasek {
    padding: 14px 14px;
  }

  .pk-pasek {
    --pk-logo: 72px;
  }

  /* Na 320 px podpis modelu musi móc się złamać, inaczej rozpycha pasek. */
  .pk-pasek__model {
    white-space: normal;
    font-size: 0.6875rem;
  }

  .pk-chip__tresc {
    padding: 8px 4px;
    font-size: 0.8125rem;
  }

  .pk-karta__wymiar {
    font-size: 1.5rem;
  }

  .pk-lista__narzedzia {
    width: 100%;
  }

  .pk-input--opis {
    flex: 1 1 100%;
  }

  .pk-tresc,
  .pk-produkt,
  .pk-stopka {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Duże monitory — kontener nie rozjeżdża się na 4K */
@media (min-width: 1600px) {
  .pk {
    max-width: 1320px;
  }

  .pk-scena {
    height: 460px;
  }
}

/* Ekrany o dużej gęstości — cieńsze hairline'y wyglądają ostrzej */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .pk-lico {
    box-shadow: inset 0 0 0 0.5px rgba(12, 10, 9, 0.3);
  }
}

/* =============================================================
   Telefon: zwarte bloki informacyjne pod wynikami
   Na wąskim ekranie parametry, nota o okleinie i uwagi zajmowały
   więcej miejsca niż same wymiary formatek. Blok stoi na końcu pliku,
   żeby wygrywał z regułami bazowymi bez podbijania wagi selektorów.
   ============================================================= */
@media (max-width: 720px) {
  /* parametry: zamiast kafelków 2 × 2 z dwuliniowymi etykietami —
     lista „etykieta … wartość", jedna linia na parametr */
  .pk-parametry {
    grid-template-columns: 1fr;
  }

  .pk-parametry > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 12px;
    line-height: 1.35;
  }

  .pk-parametry dt {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-transform: none;
  }

  .pk-parametry dd {
    font-size: 0.875rem;
    white-space: nowrap;
  }

  /* nota o okleinie pod wymiarem ścianki tylnej */
  .pk-karta__okleina {
    margin-top: 8px;
    padding-top: 8px;
    font-size: 0.75rem;
    line-height: 1.45;
  }

  /* uwagi pod wynikami */
  .pk-uwagi {
    gap: 6px;
  }

  .pk-uwaga {
    padding: 7px 10px;
    font-size: 0.78125rem;
    line-height: 1.4;
  }

  /* „Liczba kompletów" i „Wysokość frontu" w jednym wierszu — pola są
     krótkie, a osobne wiersze tylko wydłużały formularz */
  .pk-pole--para {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: end;
  }

  .pk-pole--para .pk-krok {
    width: 36px;
  }

  .pk-pole--para .pk-input {
    padding-left: 6px;
    padding-right: 6px;
    text-align: center;
  }

  .pk-pole--para .pk-jednostka {
    padding-right: 8px;
  }
}

/* „Kopiuj wymiary" jako mała kwadratowa ikona obok „Dodaj do listy
   formatek" — na każdej szerokości w jednym wierszu. Reguły na końcu
   pliku, bo nadpisują rozciąganie przycisków z bloku ≤ 560 px. */
.pk-akcje {
  flex-wrap: nowrap;
}

.pk-akcje .pk-btn--glowny {
  flex: 1 1 auto;
  min-width: 0;
}

.pk-akcje .pk-btn--ikona {
  flex: 0 0 auto;
  width: 48px;
  padding: 0;
}

.pk-btn--ikona svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pola zestawienia nad listą (klient, symbol płyty, symbol okleiny):
   lżejsze i półprzezroczyste, z mniejszym przykładem w środku, żeby cały
   przykład mieścił się w polu. Czcionka samego pola zostaje 16 px na
   dotyku (iOS nie przybliża wtedy strony) — zmniejszamy tylko podpowiedź. */
.pk-lista__narzedzia .pk-input--opis,
.pk-lista__narzedzia .pk-input--symbol {
  background: rgba(255, 255, 255, 0.5);
  background: color-mix(in srgb, var(--pk-karta) 45%, transparent);
  border-color: rgba(214, 211, 209, 0.7);
  border-color: color-mix(in srgb, var(--pk-obwodka-mocna) 65%, transparent);
  box-shadow: none;
}

.pk-lista__narzedzia .pk-input--opis:focus,
.pk-lista__narzedzia .pk-input--symbol:focus {
  background: var(--pk-karta);
}

.pk-lista__narzedzia .pk-input--opis::placeholder,
.pk-lista__narzedzia .pk-input--symbol::placeholder {
  font-size: 0.75rem;
  color: var(--pk-wyciszony);
  opacity: 0.75;
}

.pk-lista__narzedzia .pk-input--symbol {
  flex: 1 1 150px;
  min-width: 132px;
}

/* telefon: symbol płyty i okleiny dzielą jeden wiersz pod polem klienta */
@media (max-width: 720px) {
  .pk-lista__narzedzia .pk-input--symbol {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* „Liczba kompletów" i „Wysokość frontu" — pola zawsze na jednej linii bazowej,
   także gdy podpis „opcjonalnie" zawinie etykietę do drugiego wiersza */
.pk-pole--para {
  align-items: end;
}

/* bardzo wąski telefon: napis „Dodaj do listy formatek" w jednej linii obok ikony */
@media (max-width: 380px) {
  .pk-akcje .pk-btn--glowny {
    padding-left: 10px;
    padding-right: 10px;
    letter-spacing: 0.02em;
  }
}

@media (max-width: 720px) {
  .pk-stopka {
    gap: 16px;
    padding: 18px 16px;
  }

  .pk-stopka__haslo {
    font-size: 1rem;
  }
}

/* Pasek kontaktu w stopce — ta sama forma co stopka zestawienia PDF:
   zaokrąglona ramka, elementy w jednej linii rozdzielone kropką. */
.pk-stopka__pasek {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  margin: 0;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #d6d3d1;
}

.pk-stopka__pasek a {
  color: #f5f1ec;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.pk-stopka__pasek a.pk-stopka__firma {
  font-weight: 700;
  border-bottom: 0;
}

.pk-stopka__pasek a:hover,
.pk-stopka__pasek a:focus-visible {
  color: var(--pk-mosiadz-jasny);
  border-bottom-color: var(--pk-mosiadz-jasny);
}

.pk-stopka__kropka {
  color: #78716c;
}

/* telefon: nazwa firmy w pierwszej linii, telefon · e-mail w drugiej —
   zamiast przypadkowego zawijania z kropką na końcu wiersza */
@media (max-width: 720px) {
  .pk-stopka__pasek {
    padding: 9px 12px;
  }

  .pk-stopka__pasek .pk-stopka__firma {
    flex-basis: 100%;
    text-align: center;
  }

  .pk-stopka__pasek .pk-stopka__kropka:first-of-type {
    display: none;
  }
}

/* bardzo wąski telefon: trzy krótkie, wyśrodkowane linie */
@media (max-width: 380px) {
  .pk-stopka__pasek {
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 10px;
  }

  /* w kolumnie flex-basis: 100% liczyłby się od wysokości — wracamy do auto */
  .pk-stopka__pasek .pk-stopka__firma {
    flex-basis: auto;
  }

  .pk-stopka__pasek .pk-stopka__kropka {
    display: none;
  }
}

/* ---------- nota o okleinie: na komputerze sam tekst, na telefonie zwijana ---------- */
.pk-karta__okleina > p {
  margin: 0;
}

.pk-karta__okleina-naglowek {
  display: none;
  list-style: none;
}

.pk-karta__okleina-naglowek::-webkit-details-marker {
  display: none;
}

@media (max-width: 720px) {
  .pk-karta__okleina-naglowek {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 600;
    color: var(--pk-drugorzedny);
  }

  /* strzałka rysowana ramką — obraca się przy rozwinięciu */
  .pk-karta__okleina-naglowek::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.6px solid var(--pk-mosiadz);
    border-bottom: 1.6px solid var(--pk-mosiadz);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }

  .pk-karta__okleina[open] > .pk-karta__okleina-naglowek::after {
    margin-top: 3px;
    transform: rotate(-135deg);
  }

  .pk-karta__okleina[open] > p {
    margin-top: 6px;
  }
}

/* ---------- legenda pod podglądem 3D: cztery pozycje w jednej linii ---------- */
.pk-legendy {
  flex-wrap: nowrap;
  gap: 8px 16px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .pk-legendy {
    justify-content: space-between;
    gap: 8px;
    padding: 11px 12px;
  }

  .pk-legenda-el,
  .pk-przelacznik {
    gap: 5px;
    font-size: 0.75rem;
  }
}

/* ---------- podpowiedź w polu wysokości frontu — lżejsza, jak pola nad listą ---------- */
#pk-front::placeholder {
  font-size: 0.75rem;
  color: var(--pk-wyciszony);
  opacity: 0.75;
}

/* ---------- treść merytoryczna: najważniejsze fakty jako punkty w ramkach ---------- */
.pk-punkty {
  display: grid;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.pk-punkty li {
  position: relative;
  margin: 0;
  padding: 10px 14px 10px 34px;
  border: 1px solid var(--pk-obwodka);
  border-radius: var(--pk-promien);
  background: rgba(255, 255, 255, 0.6);
  background: color-mix(in srgb, var(--pk-karta) 65%, transparent);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--pk-drugorzedny);
}

.pk-punkty li::before {
  content: "";
  position: absolute;
  left: 15px;
  top: calc(10px + 0.775em - 3.5px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pk-mosiadz);
}

.pk-punkty strong {
  color: var(--pk-atrament);
  font-weight: 600;
}

@media (min-width: 900px) {
  .pk-punkty {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .pk-punkty li {
    padding: 8px 12px 8px 30px;
    font-size: 0.875rem;
  }

  .pk-punkty li::before {
    left: 13px;
    top: calc(8px + 0.775em - 3.5px);
  }
}

/* ---------- sekcja „Jak policzyć spody i tyły…" — mniejsza, spokojniejsza typografia ---------- */
.pk-tresc {
  font-size: 0.875rem;
}

.pk-tresc h2 {
  font-size: clamp(1.0625rem, 1.9vw, 1.3rem);
}

.pk-tresc h3 {
  margin: 24px 0 10px;
  font-size: 0.9375rem;
}

.pk-tresc p {
  font-size: 0.875rem;
  line-height: 1.65;
}

.pk-tresc .pk-punkty li {
  font-size: 0.84375rem;
  line-height: 1.5;
}

.pk-tresc .pk-tabela {
  font-size: 0.8125rem;
}

.pk-tresc .pk-faq summary {
  padding: 11px 14px;
  font-size: 0.875rem;
}

.pk-tresc .pk-faq details p {
  padding: 0 14px 13px 36px;
  font-size: 0.84375rem;
}

.pk-tresc .pk-kontakt__link {
  font-size: 0.9375rem;
}

.pk-tresc .pk-tresc__mini {
  font-size: 0.8125rem;
}

@media (max-width: 720px) {
  .pk-tresc p,
  .pk-tresc .pk-faq summary {
    font-size: 0.8125rem;
  }

  .pk-tresc .pk-punkty li,
  .pk-tresc .pk-faq details p {
    font-size: 0.8125rem;
  }

  .pk-tresc .pk-tabela {
    font-size: 0.75rem;
  }
}

/* ---------- wzory producenta w sekcji treści ---------- */
.pk-wzory {
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 1px solid var(--pk-obwodka);
  border-left: 3px solid var(--pk-mosiadz);
  border-radius: var(--pk-promien);
  background: var(--pk-muted);
}

.pk-tresc .pk-wzory__tytul {
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pk-mosiadz);
}

.pk-wzory__lista {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pk-wzory__lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 14px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--pk-obwodka-mocna);
  font-size: 0.84375rem;
  color: var(--pk-drugorzedny);
}

.pk-wzory__lista li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.pk-wzory__lista b {
  font-weight: 600;
  color: var(--pk-atrament);
  font-variant-numeric: tabular-nums;
}

.pk-tresc .pk-wzory__zrodlo {
  margin: 12px 0 0;
  font-size: 0.78125rem;
  line-height: 1.55;
  color: var(--pk-wyciszony);
}

.pk-wzory__link {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--pk-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pk-mosiadz);
  cursor: pointer;
}

.pk-wzory__link:hover,
.pk-wzory__link:focus-visible {
  text-decoration: underline;
}

/* ---------- stopka bez wzorów: wezwanie do kontaktu i pasek kontaktowy ---------- */
.pk-stopka {
  grid-template-columns: 1fr;
}

.pk-stopka__cta {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 720px) {
  .pk-stopka__cta {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0;
    border-top: 0;
  }
}

/* wąski telefon: pola symboli płyty i okleiny jedno pod drugim — przykład
   „np. 511sm / 112pe" mieści się wtedy w całości */
@media (max-width: 400px) {
  .pk-lista__narzedzia .pk-input--symbol {
    flex: 1 1 100%;
  }
}

/* ostrzeżenie w oknie potwierdzenia czyszczenia: znak w kółku, zdanie i wyraźna uwaga */
.pk-ostrzezenie {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--pk-obwodka-mocna);
  border-radius: var(--pk-promien);
  background: linear-gradient(180deg, var(--pk-karta) 0%, var(--pk-muted) 100%);
  box-shadow: inset 3px 0 0 var(--pk-orzech), 0 1px 2px rgba(28, 25, 23, 0.06);
}

.pk-ostrzezenie__znak {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(107, 79, 58, 0.12);
}

.pk-ostrzezenie__znak svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--pk-orzech);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pk-ostrzezenie__tresc p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--pk-atrament);
}

.pk-ostrzezenie__tresc .pk-ostrzezenie__uwaga {
  margin-top: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--pk-orzech);
}

/* przybliżanie podglądu 3D: prawdziwe przyciski z obrysem zamiast drobnych znaków */
.pk-ikona.pk-ikona--zoom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  min-width: 0;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.07);
  color: #f5f1ec;
}

.pk-ikona--zoom svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.pk-ikona.pk-ikona--zoom:hover,
.pk-ikona.pk-ikona--zoom:focus-visible {
  border-color: var(--pk-mosiadz-jasny);
  background: rgba(255, 152, 0, 0.16);
  color: #fff;
}

.pk-ikona.pk-ikona--zoom:active {
  background: var(--pk-mosiadz-jasny);
  color: var(--pk-atrament);
}

.pk-ikona--zoom + .pk-ikona--zoom {
  margin-left: 4px;
}

@media (pointer: coarse) {
  .pk-ikona.pk-ikona--zoom {
    width: 42px;
    height: 38px;
  }
}

/* numer wersji w lewym dolnym rogu strony — mały, półprzezroczysty */
.pk-wersja {
  position: absolute;
  left: clamp(16px, 4vw, 32px);
  bottom: 12px;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--pk-wyciszony);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

@media print {
  .pk-wersja {
    display: none;
  }
}