/*
Theme Name: PP Fasteners
Theme URI: https://ppfasteners.pl
Author: Shellty
Author URI: https://shellty.pl
Description: Custom motyw WordPress dla P&P Fasteners, zbudowany na podstawie makiety Claude Design "Makieta strony gwoździ fastenerów" (Wersja 5 - Poprawiona).
Version: 1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: pp-fasteners
*/

/* --- Motywy kolorystyczne -------------------------------------------------
   Dwa warianty: jasny (jak sekcja "Gwoździarki produkowane wyłącznie dla nas")
   i ciemny (jak hero "Profesjonalne rozwiązania dla budownictwa i przemysłu").

   Szablony są portem makiety opartej na stylach inline, więc kolory muszą
   przechodzić przez zmienne CSS — inline wygrywa z arkuszem, ale
   `style="color:var(--ink)"` rozwiązuje się już po stronie motywu.

   Zielenie marki celowo NIE są tokenami tam, gdzie stanowią własne tło
   (przyciski, ikony, pigułki): var(--accent) z białym tekstem i #93D13F z ciemnym
   trzymają kontrast identycznie w obu motywach, a tokenizacja tylko
   rozjechałaby te pary. Tokenem jest natomiast --accent-ink, czyli zieleń
   czytelna NA aktualnym tle: ciemna na jasnym, jasna na ciemnym. --- */

:root {
  --band: #FAF8F1;
  --band-alt: #F2EEE2;
  --card: #FFFFFF;
  --card-solid: #FFFFFF;
  --ink: #1A1C15;
  --ink-soft: #3C392D;
  --ink-muted: #6E6A5A;
  --line: #E4DDCB;
  --line-strong: #D7CFBB;
  --accent: #63B32F;
  /* Natywna zieleń sygnetu P&P w logo (ten sam odcień w obu motywach). */
  --brand-logo-green: #62B22E;
  --accent-ink: #2F7A1E;
  --accent-soft: rgba(99, 179, 47, .12);
  --accent-line: rgba(99, 179, 47, .30);
  --chip: rgba(26, 28, 21, .06);
  --chip-ink: #3C392D;
  --placeholder-bg: #DFD8C6;
  --placeholder-solid: #DFD8C6;
  --placeholder-line: #B7AF9A;
  --field-bg: #FAF7EE;
  /* Pasek kontaktowy i nawigacja są sticky, jeden pod drugim, i mają czytać
     się jako jeden spójny pas — stąd to samo, nieprzezroczyste tło w obu,
     zamiast dawnego półprzezroczystego bieli z blurem w --header-bg (który
     przy przewijanej treści pod spodem dawał inny odcień niż stały beż
     paska nad nim i tworzył widoczny szew). */
  --header-bg: #E7E2D2;
  --shadow-soft: rgba(26, 28, 21, .09);
  --shadow-strong: rgba(26, 28, 21, .18);
  /* Górny pasek i stopka są w jasnym motywie przyciemnione względem reszty
     strony (--band #FAF8F1 / --band-alt #F2EEE2), ale nadal jasne — mają
     domykać stronę od góry i od dołu, nie robić z niej ciemnej ramy. */
  --topbar-bg: #E7E2D2;
  --topbar-ink: #5E5A4A;
  --topbar-line: #D3CCB8;
  --topbar-accent: #2F7A1E;
  --topbar-strong: #1A1C15;
  /* nieaktywny przełącznik języka — przygaszony, ale wciąż to klikalny tekst,
     więc trzyma 4,5:1 wobec tła paska, nie tylko "wygląda na wyłączony" */
  --topbar-dim: #6E6A5A;
  --footer-bg: #E7E2D2;
  --footer-ink: #5E5A4A;
  --footer-strong: #1A1C15;
  --footer-accent: #2F7A1E;
  --footer-line: #D3CCB8;
  --stage-glow: rgba(223, 216, 198, .85);
  --stage-contact: rgba(26, 28, 21, .20);
  /* kolor, w który wygasa płyta produktowa — musi być tłem karty pod spodem */
  --plate-fade: #FFFFFF;
  /* poświata sceny pod produktami z wyciętym tłem (#gazy) — jasny motyw:
     tło karty jest już jasne, więc poświata dostaje minimalny kontrast */
  --plate-glow: rgba(255, 255, 255, .9);
  --tile-line: rgba(47, 122, 30, .11);
  /* płytki montażowe nawigacji */
  --plate-a: #FDFCF7;
  --plate-b: #EFEADC;
  --plate-ink: #3C392D;
  --plate-border: #1A1C15;
  --plate-hover-a: #F6FAF0;
  --plate-hover-b: #E4EFD8;
  --plate-active-a: #F4FAEC;
  --plate-active-b: #E2EFD4;
  --plate-gloss: rgba(255, 255, 255, .80);
  /* przyciski — w jasnym motywie domyślnie zielone, na hover czernieją
     (tak samo jak wariant --on-dark niżej, tylko dla zwykłego .pp-btn) */
  --btn-bg: var(--accent);
  --btn-ink: #12240A;
  --btn-border: #2F7A1E;
  --btn-hover-bg: #1A1C15;
  --btn-hover-ink: #FFFFFF;
  --btn-hover-border: #1A1C15;
  /* ciemny tusz na zieleni, nie biały: #FFFFFF na var(--accent) daje 2,6:1
     i nie przechodzi nawet progu dla dużego tekstu */
  --btn-accent-bg: var(--accent);
  --btn-accent-ink: #12240A;
  --btn-accent-hover-bg: #1A1C15;
  --btn-accent-hover-ink: #FFFFFF;
  --ghost-ink: #1A1C15;
  --ghost-border: rgba(26, 28, 21, .34);
  --ghost-hover-bg: #1A1C15;
  --ghost-hover-ink: #FFFFFF;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --band: #1A1C15;
  --band-alt: #141610;
  --card: rgba(255, 255, 255, .045);
  --card-solid: #23251B;
  --ink: #FFFFFF;
  --ink-soft: #E6F0DD;
  --ink-muted: #9C9785;
  --line: #2F3026;
  --line-strong: #3B3C2E;
  --accent: #63B32F;
  --accent-ink: #93D13F;
  --accent-soft: rgba(147, 209, 63, .12);
  --accent-line: rgba(147, 209, 63, .30);
  --chip: rgba(255, 255, 255, .08);
  --chip-ink: #FFFFFF;
  --placeholder-bg: rgba(255, 255, 255, .05);
  --placeholder-solid: #23251B;
  --placeholder-line: rgba(255, 255, 255, .40);
  --field-bg: rgba(255, 255, 255, .05);
  /* Pasek kontaktowy i nawigacja są teraz oba sticky (jeden pod drugim) i
     mają tworzyć jeden spójny pas, a nie dwa oddzielne — stąd to samo,
     nieprzezroczyste, zielono-czarne tło w obu, bez przezroczystości
     z rozmyciem. Wcześniej --header-bg był półprzezroczystym blur nad
     przewijaną treścią, ale to on tworzył widoczny szew z paskiem nad nim,
     bo przez alfę przebijało co innego niż stałe tło paska. */
  --header-bg: #101B09;
  --shadow-soft: rgba(0, 0, 0, .34);
  --shadow-strong: rgba(0, 0, 0, .46);
  --topbar-bg: #101B09;
  --topbar-ink: #9C9785;
  --topbar-line: #2F3026;
  --topbar-accent: #93D13F;
  --topbar-strong: #FFFFFF;
  --topbar-dim: #7C7765;
  --footer-bg: #1A1C15;
  --footer-ink: #9C9785;
  --footer-strong: #FFFFFF;
  --footer-accent: #93D13F;
  --footer-line: #2F3026;
  --stage-glow: rgba(99, 179, 47, .16);
  --stage-contact: rgba(0, 0, 0, .55);
  --plate-fade: #23251B;
  /* w ciemnym motywie karta pod produktem jest ciemna, więc poświata musi
     robić widoczną robotę - stąd wyraźniejszy niż w jasnym motywie */
  --plate-glow: rgba(255, 255, 255, .30);
  --tile-line: rgba(147, 209, 63, .13);
  --plate-a: #282B21;
  --plate-b: #1A1C14;
  --plate-ink: #D2CDBB;
  --plate-border: #3F412F;
  --plate-hover-a: #2E3724;
  --plate-hover-b: #1E2617;
  --plate-active-a: #2B3520;
  --plate-active-b: #1C2415;
  --plate-gloss: rgba(255, 255, 255, .10);
  --btn-bg: #93D13F;
  --btn-ink: #12240A;
  --btn-border: #2F7A1E;
  --btn-hover-bg: #FAF8F1;
  --btn-hover-ink: #1A1C15;
  --btn-hover-border: #FFFFFF;
  --btn-accent-bg: #93D13F;
  --btn-accent-ink: #12240A;
  --btn-accent-hover-bg: #FAF8F1;
  --btn-accent-hover-ink: #1A1C15;
  --ghost-ink: #FFFFFF;
  --ghost-border: rgba(255, 255, 255, .38);
  --ghost-hover-bg: #FFFFFF;
  --ghost-hover-ink: #1A1C15;
  color-scheme: dark;
}

/* --- Skala typografii i rytmu — jedyne tokeny NIEZALEŻNE od motywu, więc
       stoją w osobnym bloku, poza parami jasny/ciemny wyżej.

       Nagłówki: strona miała dziewięć różnych clamp() na trzy poziomy
       hierarchii — same H2 renderowały się jako 40, 38 i 30 px na jednej
       stronie (zmierzone w przeglądarce), bo każdy clamp miał inny max
       i inny współczynnik vw. To główny powód, dla którego układ czytał
       się jak zbiór osobnych makiet, a nie jeden system. Trzy stopnie
       (54 / 40 / 30) i jeden współczynnik vw na poziom.

       Odstępy: paddingi sekcji przyjmowały dziewięć wartości między 70
       a 92 px bez żadnej reguły. Trzy role zamiast dziewięciu liczb —
       góra strony, sekcja standardowa, pas skrócony. Skoro szablony to
       port makiety na stylach inline, wartości wstawiamy tak samo jak
       kolory: `style="padding:var(--pad-section) 46px"`. Dzięki temu
       zmniejszenie rytmu na telefonie (niżej w media query) to jedna
       podmiana tokenu, a nie obchodzenie wszystkich szablonów. --- */

:root {
  --fs-h1: clamp(30px, 7.6vw, 54px);
  --fs-h2: clamp(24px, 6.1vw, 40px);
  --fs-h3: clamp(20px, 4.6vw, 30px);

  --pad-hero-top: 72px;
  --pad-section: 88px;
  --pad-section-tight: 44px;
}

/* Na wąskim ekranie 88 px góra i dół to prawie połowa ekranu telefonu
   zjedzona przez pustkę między sekcjami. Jedna podmiana tokenów ścieśnia
   rytm na całej stronie — bez dotykania choćby jednego szablonu. */
@media (max-width: 640px) {
  :root {
    --pad-hero-top: 48px;
    --pad-section: 56px;
    --pad-section-tight: 32px;
  }
}

body {
  margin: 0;
  background: var(--band);
  color: var(--ink);
  font-family: 'Barlow', system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color .28s ease, color .28s ease;
}

/* Sekcje i karty też muszą przejść płynnie, inaczej przełączenie motywu
   wygląda jak przeładowanie strony. Wyłączone przy prefers-reduced-motion
   niżej w arkuszu. */
section,
article,
footer,
header {
  transition: background-color .28s ease, border-color .28s ease;
}

* {
  box-sizing: border-box;
}

a {
  color: var(--accent-ink);
  text-decoration: none;
}

a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* etykieta tylko dla czytników ekranu — przełącznik motywu jest ikonograficzny */
.pp-screen-reader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button {
  font-family: inherit;
}

::selection {
  background: var(--accent);
  color: #FFFFFF;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pp-rise {
  animation: rise .7s .05s both;
}

.pp-fade-in {
  animation: fadeIn .9s .2s both;
}

.pp-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  z-index: 99;
  width: 0%;
}

/* --- Szew między sekcjami: cienki zielony pasek na każdym przejściu koloru
       tła. Klasa, a nie inline'owy border-top, bo szew powtarza się na
       wszystkich podstronach i ma mieć jedną definicję. --- */

.pp-seam {
  border-top: 2px solid var(--accent);
}

/* Dwuwierszowy tytuł strony O nas potrzebuje więcej oddechu niż pozostałe
   nagłówki Antona. Wartość 1.12 rozdziela oba zdania także przy polskich
   znakach i po zawinięciu, ale nadal utrzymuje zwartą typografię display. */
.pp-about-title {
  line-height: 1.12 !important;
}

/* --- Nawigacja: płytki montażowe ze śrubami Torx --- */

.pp-nav-plate {
  position: relative;
  display: block;
  padding: 11px 22px;
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--plate-ink);
  background: linear-gradient(180deg, var(--plate-a) 0%, var(--plate-b) 100%);
  border: 2px solid var(--plate-border);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 var(--plate-gloss), 0 1px 0 rgba(26, 28, 21, .12);
  transition: color .18s, border-color .18s, background .18s, transform .18s, box-shadow .18s;
}

/* łby śrub w przeciwległych narożnikach płytki */
.pp-nav-plate::before,
.pp-nav-plate::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8D8876 0%, #4A4638 60%, #2A2820 100%);
  box-shadow: 0 0 0 1px rgba(26, 28, 21, .22);
}

.pp-nav-plate::before { left: 5px;  top: 5px; }
.pp-nav-plate::after  { right: 5px; bottom: 5px; }

.pp-nav-plate:hover {
  color: var(--accent-ink);
  border-color: var(--accent-ink);
  background: linear-gradient(180deg, var(--plate-hover-a) 0%, var(--plate-hover-b) 100%);
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(26, 28, 21, .14);
}

.pp-nav-plate.is-active {
  color: var(--accent-ink);
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--plate-active-a) 0%, var(--plate-active-b) 100%);
  box-shadow: inset 0 1px 0 var(--plate-gloss), 0 0 0 1px rgba(99, 179, 47, .25);
}

.pp-nav-plate.is-active::before,
.pp-nav-plate.is-active::after {
  background: radial-gradient(circle at 35% 30%, #93D13F 0%, #2F7A1E 60%, #1F5613 100%);
  box-shadow: 0 0 0 1px rgba(47, 122, 30, .3);
}

/* --- Podmenu sekcji: pionowa lista rozwijana spod płytki nawigacji.
       Konstrukcja jest podobna do klasycznego menu wielopoziomowego, ale
       wizualnie korzysta z materiałów i zielonego akcentu tego serwisu. --- */

.pp-nav-item {
  position: relative;
}

.pp-nav-plate--has-submenu {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pp-nav-plate__chevron {
  flex: 0 0 auto;
  opacity: .62;
  transition: transform .18s ease, opacity .18s ease;
}

.pp-nav-item:hover .pp-nav-plate__chevron,
.pp-nav-item:focus-within .pp-nav-plate__chevron {
  opacity: 1;
  transform: translateY(1px) rotate(180deg);
}

.pp-nav-submenu {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  z-index: 70;
  min-width: 205px;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--card-solid);
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--accent);
  border-radius: 3px;
  box-shadow: 0 16px 34px var(--shadow-strong);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}

/* Niewidoczny most nad listą utrzymuje :hover podczas przejazdu kursorem
   przez dziewięciopikselową szczelinę pod płytką. */
.pp-nav-submenu::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 11px;
}

.pp-nav-item:hover .pp-nav-submenu,
.pp-nav-item:focus-within .pp-nav-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.pp-nav-submenu li + li {
  border-top: 1px solid var(--line);
}

.pp-nav-submenu a {
  position: relative;
  display: block;
  padding: 10px 12px 10px 14px;
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--ink-soft);
  transition: color .16s ease, background-color .16s ease, padding-left .16s ease;
}

.pp-nav-submenu a::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  transform: scaleY(.35);
  transition: opacity .16s ease, transform .16s ease;
}

.pp-nav-submenu a:hover,
.pp-nav-submenu a:focus-visible {
  padding-left: 18px;
  color: var(--accent-ink);
  background: var(--plate-active-a);
}

.pp-nav-submenu a:hover::before,
.pp-nav-submenu a:focus-visible::before {
  opacity: 1;
  transform: scaleY(1);
}

.pp-nav-anchor {
  scroll-margin-top: 150px;
}

/* --- Przełącznik motywu: łeb śruby Torx w metalowym kanale.
       Śruba jest już językiem wizualnym serwisu (płytki nawigacji, narożniki
       kart), a firma sprzedaje łączniki — dlatego przełącznik korzysta z tego
       motywu zamiast generycznego słońca z księżycem. Ikony zostają jako
       czytelna wskazówka, co robi kontrolka, ale to śruba jest suwakiem
       i przy przełączeniu wkręca się o pół obrotu.

       Odkąd pasek, na którym stoi ta kontrolka, sam ma dwa warianty tła
       (ciemnozielony w motywie ciemnym, beżowy w jasnym — zob. --topbar-bg),
       ciemny kanał na jasnym pasku wyglądał jak dziura, nie jak wyfrezowane
       gniazdo. Kolory kanału więc jednak przechodzą przez motyw: gradient
       osobno na jasno i ciemno, aktywna ikonka przez var(--accent-ink)
       (ciemna zieleń na jasnym tle, jasna na ciemnym — ten sam token, którego
       już używa reszta strony do "zieleni czytelnej NA aktualnym tle").
       Nieaktywna ikonka też się przełącza z tego samego powodu. Nie zmienia
       się tylko łeb śruby — to osobny, samodzielnie cieniowany element
       metalu, czytelny na obu tłach bez przeróbek. --- */

.pp-theme-toggle {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 30px;
  padding: 0;
  border: 1px solid #3B3C2E;
  border-radius: 999px;
  background: linear-gradient(180deg, #0C0E06 0%, #1E2117 100%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55);
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

:root:not([data-theme="dark"]) .pp-theme-toggle {
  border-color: #B7AF9A;
  background: linear-gradient(180deg, #F1EBDA 0%, #DFD6BE 100%);
  box-shadow: inset 0 2px 5px rgba(26, 28, 21, .24);
}

.pp-theme-toggle:hover {
  border-color: var(--accent);
}

.pp-theme-toggle__ico {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  color: #56523F;
  transition: color .25s;
  pointer-events: none;
}

:root:not([data-theme="dark"]) .pp-theme-toggle__ico {
  color: #A39C86;
}

.pp-theme-toggle__ico--sun  { left: 9px; }
.pp-theme-toggle__ico--moon { right: 9px; }

:root:not([data-theme="dark"]) .pp-theme-toggle__ico--sun  { color: var(--accent-ink); }
:root[data-theme="dark"]      .pp-theme-toggle__ico--moon { color: var(--accent-ink); }

/* łeb gwoździa — prawdziwe zdjęcie zamiast rysowanego gradientu, przycięte
   do koła tak samo jak wcześniej narysowana główka śruby */
.pp-theme-toggle__screw {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  overflow: hidden;
  /* zdjęcie ma miejscami częściową przezroczystość (miękko cieniowany
     środek) — bez nieprzezroczystego podkładu było przez nie widać ikonki
     słońca/księżyca leżącej pod spodem */
  background: #000;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform .36s cubic-bezier(.22, .68, .35, 1);
}

:root[data-theme="dark"] .pp-theme-toggle__screw {
  transform: translateX(42px) rotate(180deg);
}

.pp-theme-toggle__screw img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Przełącznik języka (pasek górny): dwuopcjowa pastylka z przesuwnym
       podświetleniem, ten sam mechanizm co przełącznik motywu obok (suwak +
       para etykiet), tylko bez własnej grafiki — tu wystarcza kolor. Zielone
       podświetlenie to --btn-bg, ten sam token co pigułki CTA, więc aktywna
       etykieta korzysta z --btn-ink dla pewnego kontrastu w obu motywach.
       Padding pastylki (3px) i szerokość suwaka (calc(50% - 3px)) muszą się
       zgadzać co do piksela — inaczej translateX(100%) (przesunięcie o
       WŁASNĄ szerokość suwaka) wyląduje obok drugiej etykiety, a nie na niej. --- */

.pp-lang-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex-shrink: 0;
  width: 62px;
  height: 28px;
  padding: 3px;
  border: 1px solid var(--topbar-line);
  border-radius: 999px;
  background: var(--topbar-bg);
}

.pp-lang-toggle__slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: 999px;
  background: var(--btn-bg);
  box-shadow: 0 2px 5px var(--shadow-strong);
  transition: transform .28s cubic-bezier(.22, .68, .35, 1);
}

.pp-lang-toggle[data-active="en"] .pp-lang-toggle__slider {
  transform: translateX(100%);
}

.pp-lang-toggle__option {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--topbar-dim);
  transition: color .2s;
}

.pp-lang-toggle__option.is-active {
  color: var(--btn-ink);
}

.pp-lang-toggle__option:not(.is-active):hover {
  color: var(--topbar-strong);
}

/* --- Ten sam przełącznik w panelu menu mobilnego pozostaje również jako
       większy wariant: para pełnoszerokościowych pigułek w stylu linków nawigacji
       (ten sam --card-solid/--line-strong co pigułki TOC polityki
       prywatności), z dotykowym polem zamiast miniaturowego suwaka. --- */

.pp-mobile-nav__lang {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.pp-mobile-nav__lang-btn {
  flex: 1;
  padding: 12px 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--plate-ink);
  background: var(--card-solid);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}

.pp-mobile-nav__lang-btn.is-active {
  color: var(--accent-ink);
  border-color: var(--accent-ink);
  background: var(--plate-active-a);
}

/* Kontrolki nawigacyjne zachowują zwarty rytm niezależnie od bazowej
   interlinii tekstu strony. */
.pp-lang-toggle__option,
.pp-mobile-nav__link,
.pp-topbar-icon,
.pp-hamburger,
.pp-btn {
  line-height: 1.2;
}

/* --- Scena produktowa: packshot z wyciętym tłem nie może dostać dużego,
       czarnego drop-shadow — na ciemnym pasie cień przygasza poświatę
       i robi brudną aurę wokół sylwetki (widoczną zwłaszcza z lewej).
       Zamiast tego produkt dostaje miękką poświatę ZA sobą i wąski cień
       kontaktowy POD sobą, jak na stole ekspozycyjnym. --- */

.pp-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-stage::before {
  content: "";
  position: absolute;
  left: var(--stage-glow-left, 50%);
  top: var(--stage-glow-top, 48%);
  width: var(--stage-glow-size, 92%);
  padding-bottom: var(--stage-glow-size, 92%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--stage-glow) 0%, transparent 68%);
  pointer-events: none;
}

.pp-stage::after {
  content: "";
  position: absolute;
  left: var(--stage-contact-left, 50%);
  bottom: var(--stage-contact-bottom, 4%);
  width: 58%;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--stage-contact) 0%, transparent 70%);
  pointer-events: none;
}

.pp-stage img {
  position: relative;
  z-index: 1;
}

/* --- Płyta produktowa: zdjęcia katalogowe mają białe tło studyjne, którego
       nie da się czysto wyciąć — miękkie cienie pod produktem i rozmyte
       krawędzie zostawiają szarą aureolę (sprawdzone: flood fill plus erozja
       krawędzi nadal jej nie usuwa, a makro z małą głębią ostrości jest z
       natury nie do wycięcia).

       Zamiast walczyć z maskowaniem, produkt leży na jasnej płycie, która
       wygasa eliptycznie ku krawędziom karty. Biały prostokąt zamienia się
       w płynne przejście, a na ciemnym motywie czyta się jak podświetlony
       stół ekspozycyjny, nie jak nieobrobione zdjęcie. --- */

.pp-plate {
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
}

.pp-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 74% 70% at 50% 46%, transparent 0 52%, var(--plate-fade) 100%);
}

/* Wygaszenie wyżej zakłada zdjęcie ze sporym białym marginesem — wygasza
   pustkę, nie motyw. Przy ciasnym kadrze (wkręt TORX na Ofercie) przedmiot
   sięga krawędzi i w CIEMNYM motywie wchodził pod przyciemnienie: bit po
   prawej i trzon u góry rozpływały się w tle (--plate-fade to tam #23251B;
   w jasnym motywie jest #FFFFFF, więc problem nie był widoczny).

   Narożniki płyty leżą ~98% promienia elipsy, a same krawędzie 67-71%, więc
   przesunięcie progu na 82% zdejmuje przyciemnienie z boków, zostawiając je
   tam, gdzie faktycznie robi robotę — w rogach.

   .pp-modal__figure dostaje to samo bez klasy-modyfikatora: karta produktu
   renderuje się w pętli po wszystkich produktach, więc nie ma tam miejsca na
   wariant per zdjęcie, a panel ze zdjęciem jest na tyle duży, że przedmiot
   ma być na nim czytelny niezależnie od tego, jak ciasny jest kadr pliku. */
.pp-plate--tight::after,
.pp-modal__figure::after {
  background: radial-gradient(ellipse 74% 70% at 50% 46%, transparent 0 82%, var(--plate-fade) 100%);
}

.pp-plate img {
  position: relative;
  z-index: 1;
}

/* Zdjęcia produktowe przygotowane jako osobne pełne kadry jasne i ciemne.
   Nie nakładamy na nie wygaszającej maski płyty: światło oraz tło są już
   częścią fotografii i zmieniają się razem z motywem strony. */
.pp-plate--theme-media::after {
  content: none;
}

/* Zdjęcie serwisowe w szczegółach części zamiennych ma zachować pełny, czysty
   kadr w jasnym motywie. W ciemnym zostaje standardowe wygaszenie płyty. */
:root:not([data-theme="dark"]) .pp-modal__figure.pp-plate--plain-light::after {
  content: none;
}

/* --- Ciemny motyw: kadr ma zniknąć jako prostokąt ---

   Wariant ciemny każdego zdjęcia to studyjny kadr na czerni. Przy
   object-fit:contain proporcje pliku prawie nigdy nie zgadzają się z ramką,
   więc nad/pod kadrem (albo po bokach) zostaje pas samej płyty. Dopóki płyta
   miała inny odcień niż krawędź fotografii, ten pas rysował widoczny
   prostokąt — dokładnie to było widać w kartach produktów.

   Rozwiązanie jest w dwóch miejscach i musi być trzymane razem:
   1. krawędzie plików "-ciemny" są wygaszone do #050505 (wypalone w samych
      zdjęciach — maska w CSS obejmuje pudełko <img>, a nie wkadrowaną w nie
      fotografię, więc nie da się nią trafić w krawędź kadru),
   2. płyta ma dokładnie ten sam #050505 — poniżej.
   Styk zdjęcia z płytą przestaje istnieć niezależnie od proporcji ramki.

   Poprzednie podejście wypełniało pas rozmytą kopią zdjęcia; rozmycie
   jasnego produktu dawało szarą smugę odcinającą się od czerni kadru, czyli
   ten sam szew, który miało ukryć. Kopia została usunięta również ze
   znaczników (pp_fasteners_media() w functions.php). */
:root[data-theme="dark"] .pp-plate--theme-media {
  background: #050505;
}

/* Grupa 04 ma ten sam wygaszony, oliwkowy kadr w kafelku i w szczegółach.
   Kolor płyty musi powtarzać skraj pliku, bo w modalu obraz jest pokazywany
   przez contain i odsłania tło po bokach. */
:root[data-theme="dark"] #pp-sheet-wkrety-plyty-warstwowe .pp-modal__figure {
  background: #0F100B;
}

/* Grupa 05 używa w oknie dokładnie tej samej miniatury co na zewnątrz.
   Kolor płyty odpowiada jej ciemnej krawędzi, więc contain nie odsłania szwu. */
:root[data-theme="dark"] #pp-sheet-gwozdzie-laczone .pp-modal__figure {
  background: #000;
}

/* Kategoria 06 trzyma produkt w całości przez contain, a poświata jest tłem
   całej figury, nie kwadratowego pliku. Dzięki temu nie powstaje pas ani skok
   oświetlenia przy zmiennej wysokości modalu. Kolory i intensywność odpowiadają
   ciemnemu kadrowi kategorii 05 (gwoździe łączone). */
:root[data-theme="dark"] #pp-sheet-gwozdziarki-green-max .pp-modal__figure {
  background-color: #000;
  background-image: radial-gradient(ellipse 62% 52% at 50% 50%, #6A6835 0%, #403E20 34%, rgba(0, 0, 0, 0) 68%);
}

/* Przezroczysty packshot pozwala prowadzić poświatę dokładnie po całej
   sylwetce narzędzia, bez rozszerzania jasnego tła na resztę panelu. */
:root[data-theme="dark"] #pp-sheet-gwozdziarki-green-max .pp-theme-media__image {
  filter: drop-shadow(0 0 8px rgba(185, 178, 69, .62)) drop-shadow(0 0 18px rgba(185, 178, 69, .26));
}

/* Wkręty ciesielskie mają osobno przygotowany kadr na płaskim ciemnym tle.
   Taka sama płyta pod obrazem usuwa pas widoczny przy object-fit: contain. */
:root[data-theme="dark"] .pp-plate--flat-dark {
  background: #161811;
}

:root[data-theme="dark"] #pp-sheet-wkrety-stozkowe .pp-plate--flat-dark {
  background: #17180F;
}

:root[data-theme="dark"] #pp-sheet-wkrety-regulacyjne .pp-plate--flat-dark {
  background: #12140E;
}

:root[data-theme="dark"] #pp-sheet-wkrety-farmerskie .pp-plate--flat-dark {
  background: #11120B;
}

/* Margines wokół produktu jest już częścią KAŻDEGO kadru "-theme-media"
   (jasnego i ciemnego) - assets/images/produkty/wyrownaj-jasne.py przycina
   je tak, żeby produkt zajmował tę samą wysokość ramki w obu motywach.
   Dodatkowy padding z szablonu (potrzebny gdzie indziej, np. do zdjęć bez
   wariantu ciemnego) psułby tu tę równowagę: obcinałby oba kadry o te same
   36px, ale jasny i ciemny plik mają różne rozdzielczości, więc te same
   piksele paddingu odpowiadają innym UŁAMKOM ramki w każdym z nich - efekt
   był taki, że jasny motyw pokazywał wyraźnie mniejszy produkt niż ciemny.
   Stąd padding:0 dla obu, bez różnicowania po motywie. */
.pp-plate--theme-media .pp-theme-media__image {
  padding: 0 !important;
}

/* Cztery karty w sekcji Wkręty dostają własne kadry "*-kafelek*"
   (page-oferta.php, generowane przez assets/images/produkty/kafelki-wkrety.py)
   o proporcjach ramki kafelka. Wcześniej były tu kwadratowe pliki z okna
   karty, którym `cover` ucinał górę i dół - na telefonie ratował to
   `object-fit: contain` plus dopasowanie tła płyty do obrzeży każdego kadru
   z osobna. Kadry kafelkowe tego nie potrzebują: przy każdej szerokości
   ramki `cover` zabiera im najwyżej kilka procent boków, a produkt ma zapas
   marginesu w samym zdjęciu, więc nic z niego nie znika.

   Krawędzie kadrów ciemnych są wygaszone do #141610, czyli do --band-alt
   motywu ciemnego - a nie do #050505 jak reszta zdjęć "-ciemny". Powód: te
   zdjęcia stykają się nie z płytą (cover ją zakrywa), tylko z KARTĄ, a karta
   jest właśnie --band-alt. Wygaszenie do czerni płyty rysowało wokół
   fotografii czarną ramkę. Płyta pod spodem dostaje ten sam kolor, żeby
   zgadzał się też przy nietypowych proporcjach ramki. */
:root[data-theme="dark"] #wkrety .pp-grid-4 > .js-pp-product-open > .pp-plate--theme-media {
  background: #141610;
}

/* Wybrane kadry mogą mieć inne pionowe położenie w motywie ciemnym, bez
   wpływu na wariant jasny. Wartości pochodzą z danych konkretnego produktu. */
:root[data-theme="dark"] .pp-theme-media__image {
  transform: translateY(var(--image-translate-y-dark)) scale(var(--image-scale)) !important;
}

/* Atrapa kadru (pp_fasteners_media() bez pliku) leży na płycie, która jest
   biała w OBU motywach — bo pod zdjęcia ze studyjnym białym tłem. W ciemnym
   motywie --placeholder-bg jest półprzezroczysty, więc biel płyty przebijała
   i jasny napis stawał się nieczytelny (kontrast ~1,1:1). Na płycie atrapa
   dostaje własne, nieprzezroczyste tło. */
.pp-plate > .pp-placeholder {
  background: var(--placeholder-solid) !important;
}

/* --- Sekcja "Wszystko do solidnych połączeń" na ciemnym pasie warsztatowym.
       .pp-feature-grid domyślnie ma 4 kolumny; strona główna nadpisuje je
       inline na 3 karty (jakość / zakres oferty / marka Green Max). --- */

/* Szew dolny celowo pominięty — granicę zawsze rysuje sekcja, która się
   zaczyna (.pp-seam), żeby na jednym styku nie wypadły dwie linie obok siebie. */
.pp-feature-band {
  position: relative;
  background: var(--band-alt);
  border-top: 2px solid var(--accent);
  overflow: hidden;
}

/* --- Dachówka zakładkowa: prostokątne dachówki w wiązaniu przesuniętym o pół
       modułu, z pionowymi żebrami zamków i falującą linią zakładu między
       kursami. Wcześniejsza wersja na łukach dawała rybią łuskę, a nie dach —
       o charakterze decyduje właśnie wiązanie przesunięte plus zafalowanie
       dolnej krawędzi kursu, nie sam okrągły kształt.

       Geometria idzie maską SVG, a nie background-image, bo kolor musi
       zostać tokenem (--tile-line przełącza się z motywem), a koloru wpisanego
       w data-URI nie da się podmienić zmienną CSS. Maska daje kształt,
       background-color daje barwę. --- */
.pp-feature-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--tile-line);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='68' viewBox='0 0 64 68'%3E%3Cg fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M0 16 Q32 24 64 16'/%3E%3Cpath d='M-32 50 Q0 58 32 50 Q64 58 96 50'/%3E%3Cpath d='M0 16 V54 M64 16 V54'/%3E%3Cpath d='M32 0 V20 M32 50 V68'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='68' viewBox='0 0 64 68'%3E%3Cg fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M0 16 Q32 24 64 16'/%3E%3Cpath d='M-32 50 Q0 58 32 50 Q64 58 96 50'/%3E%3Cpath d='M0 16 V54 M64 16 V54'/%3E%3Cpath d='M32 0 V20 M32 50 V68'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 64px 68px;
  mask-size: 64px 68px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  pointer-events: none;
}

/* Bez obsługi maski cały pseudoelement byłby jednolitą zieloną powłoką
   na całym pasie — lepiej wtedy nie rysować nic. */
@supports not ((mask-image: url("#m")) or (-webkit-mask-image: url("#m"))) {
  .pp-feature-band::before {
    background-color: transparent;
  }
}

.pp-feature-band__inner {
  position: relative;
  max-width: 1340px;
  margin: 0 auto;
  padding: var(--pad-section-tight) 46px var(--pad-section-tight);
}

.pp-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.pp-feature {
  position: relative;
  padding: 28px 24px 26px;
  background: var(--card);
  border: 1px solid var(--accent-line);
  border-radius: 4px;
  transition: background .22s, border-color .22s, transform .22s, box-shadow .22s;
}

/* łby śrub w narożnikach — ten sam motyw co płytki nawigacji */
.pp-feature::before,
.pp-feature::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #93D13F 0%, #2F7A1E 60%, #1F5613 100%);
  opacity: .55;
}

.pp-feature::before { left: 7px;  top: 7px; }
.pp-feature::after  { right: 7px; bottom: 7px; }

.pp-feature:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 14px 30px var(--shadow-strong);
}

.pp-feature:hover::before,
.pp-feature:hover::after {
  opacity: 1;
}

.pp-feature__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.pp-feature__num {
  position: absolute;
  right: 22px;
  top: 26px;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--accent-line);
}

.pp-feature__title {
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.18;
  color: var(--ink);
  margin-bottom: 8px;
}

.pp-feature__desc {
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
}

/* --- Sekcja Facebooka: zachęta złożona wprost na tle sekcji (bez własnego
       kafla — jedynym obramowanym elementem ma być tablica), a obok niej
       ramka z osadzoną wtyczką.

       Ramka tablicy: wtyczka Facebooka nie renderuje się szerzej niż 500px
       (twardy limit po stronie Facebooka — wartości >500 są ignorowane),
       więc wizualne powiększenie o 15% robimy przez CSS transform: scale()
       na niezmienionej 500×560 wtyczce, w ramce przyciętej do jej nowego,
       powiększonego rozmiaru (575×644). Transform nie wpływa na box modelu,
       stąd .pp-fb-frame musi mieć jawne wymiary — inaczej zwinęłaby się
       do oryginalnego (nieskalowanego) rozmiaru dziecka. Wymiary ramki są
       o 4px większe niż 575×644 (po 2px na stronę), żeby jej border —
       liczony do środka przy globalnym box-sizing:border-box — nie odgryzał
       kawałka treści dziecka. --- */

.pp-fb-frame {
  position: relative;
  width: 579px;
  height: 648px;
  overflow: hidden;
  background: var(--card-solid);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 6px rgba(99, 179, 47, .10);
}

.pp-fb-embed {
  position: relative;
  width: 500px;
  min-height: 560px;
  background: var(--card-solid);
  display: flex;
  flex-direction: column;
  transform: scale(1.15);
  transform-origin: top left;
}

.pp-fb-embed iframe {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: none;
  overflow: hidden;
  display: block;
  width: 100%;
}

/* --- Przyciski CTA: pigułka z podwójnym obramowaniem (2 px kant + zielony
       włos wewnątrz z inset box-shadow).

       Wszystkie trzy warianty muszą przetrwać oba motywy, a to nie jest
       kwestia samego przyciemnienia: czarna pigułka znika na ciemnym paśmie,
       a "ghost" z białym obramowaniem znika na jasnym. Dlatego kolory idą
       przez tokeny, które podmieniają się razem z motywem.

       Hover jest tu zwykłym :hover, więc te przyciski nie potrzebują
       (i nie mogą mieć) atrybutu data-hover ani stylów inline z kolorami —
       inline wygrałby z arkuszem. --- */

.pp-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  border: 2px solid var(--btn-border);
  border-radius: 999px;
  padding: 17px 32px;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 24px var(--shadow-strong), inset 0 0 0 1px rgba(147, 209, 63, .30);
  transition: transform .25s, background .25s, color .25s, border-color .25s, box-shadow .25s;
}

.pp-btn:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-ink);
  border-color: var(--btn-hover-border);
  box-shadow: 0 12px 28px rgba(99, 179, 47, .36), inset 0 0 0 1px rgba(255, 255, 255, .45);
  transform: translateY(-3px);
}

/* mniejszy wariant do kart oferty, gdzie przycisk stoi w wierszu z ceną */
.pp-btn--sm {
  gap: 10px;
  padding: 13px 26px;
  letter-spacing: .08em;
}

/* wariant akcentowy — zawsze zielony, w odcieniu czytelnym na aktualnym tle */
.pp-btn--on-dark {
  background: var(--btn-accent-bg);
  color: var(--btn-accent-ink);
  border-color: #2F7A1E;
  box-shadow: 0 10px 24px var(--shadow-strong), inset 0 0 0 1px rgba(255, 255, 255, .45);
}

.pp-btn--on-dark:hover {
  background: var(--btn-accent-hover-bg);
  color: var(--btn-accent-hover-ink);
  border-color: var(--btn-accent-hover-bg);
  box-shadow: 0 12px 28px rgba(99, 179, 47, .36), inset 0 0 0 1px rgba(99, 179, 47, .45);
}

.pp-btn--ghost {
  background: transparent;
  color: var(--ghost-ink);
  border-color: var(--ghost-border);
  box-shadow: inset 0 0 0 1px rgba(147, 209, 63, .22);
}

.pp-btn--ghost:hover {
  background: var(--ghost-hover-bg);
  color: var(--ghost-hover-ink);
  border-color: var(--ghost-hover-bg);
  box-shadow: 0 12px 28px rgba(99, 179, 47, .36), inset 0 0 0 1px rgba(99, 179, 47, .35);
}

/* --- Strzałka w pigułkach CTA. Wcześniej powtarzana inline przy każdym
       przycisku jako <span style="font-size:20px;line-height:1">, w trzech
       różnych rozmiarach (18/20/21 px) zależnie od tego, który szablon
       akurat ją kopiował. Jedna klasa = jeden rozmiar na wariant przycisku
       plus ten sam przesuw na hover co w .pp-link-arrow niżej, więc oba
       rodzaje CTA (pigułka i link tekstowy) reagują identycznie.

       aria-hidden, bo "→" bywa odczytywane przez czytniki jako "strzałka
       w prawo" doklejone do etykiety przycisku — a strzałka jest tu
       dekoracją kierunku, nie treścią. --- */

.pp-btn__arrow {
  font-size: 20px;
  line-height: 1;
  transition: transform .25s;
}

.pp-btn--sm .pp-btn__arrow {
  font-size: 18px;
}

.pp-btn:hover .pp-btn__arrow {
  transform: translateX(4px);
}

/* --- Tekstowy link-CTA ze strzałką ("Zobacz wszystkie opinie w Google").
       Trzeci poziom hierarchii po .pp-btn i .pp-btn--ghost: sekcja ma już
       swój ciężar wizualny w kartach opinii, więc odesłanie do Google nie
       powinno konkurować z zielonymi pigułkami — ale musi mieć czytelny
       stan hover.

       Osobna klasa zamiast data-hover, bo hover musi być RÓŻNY w obu
       motywach: w jasnym zieleń się rozjaśnia (#2F7A1E -> var(--accent)), w
       ciemnym dojeżdża do bieli (#93D13F jest już maksymalnie jasną
       zielenią — rozjaśnianie w tę samą stronę nie ma dokąd pójść, a
       przyciemnienie czytałoby się jak wyłączenie kontrolki). Atrybut
       data-hover potrafi podać tylko JEDNĄ wartość na oba motywy i
       poprzednia wersja ustawiała dokładnie ten sam --accent-ink co stan
       bazowy — najechanie myszą nie dawało żadnej informacji zwrotnej
       (potwierdzone pomiarem na żywo: computed color przed i po
       mouseenter był identyczny). --- */

.pp-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent-ink);
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 4px;
  transition: color .2s, border-color .2s;
}

.pp-link-arrow__arrow {
  font-size: 20px;
  line-height: 1;
  transition: transform .2s;
}

.pp-link-arrow--muted {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--ink-muted);
  border-bottom-color: var(--line-strong);
}

.pp-link-arrow:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

:root[data-theme="dark"] .pp-link-arrow:hover {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}

.pp-link-arrow:hover .pp-link-arrow__arrow {
  transform: translateX(4px);
}

/* --- Opinie Google: jeden, zapętlony pas. Bez JavaScriptu zestaw nadal
       zostaje poziomową listą przewijaną gestem; skrypt tylko dokłada drugą,
       ukrytą dla czytników kopię i spokojny ruch bez widocznego przeskoku. --- */

.pp-reviews {
  position: relative;
  overflow: hidden;
  background-color: var(--band-alt);
  background-image:
    radial-gradient(circle at 12% 20%, var(--accent-soft) 0, transparent 28%),
    radial-gradient(circle at 88% 78%, var(--accent-soft) 0, transparent 24%),
    linear-gradient(135deg, transparent 0 48%, var(--tile-line) 48% 48.4%, transparent 48.4% 100%);
  background-size: auto, auto, 46px 46px;
}

/* --- Wspólna płaszczyzna sekcji w ciemnym motywie --------------------------
   Sekcja opinii jest wzorcem: ciemnozielona baza, dwa bardzo miękkie światła
   i ledwie widoczna ukośna faktura. W dark mode ten sam zestaw leży jeden raz
   na <main>, a wszystkie bezpośrednie sekcje są przezroczyste. Dzięki temu
   światło nie rozpoczyna się od nowa na każdej sekcji i na ich styku nie może
   powstać pas ani skok jasności. Przyklejenie warstw do okna utrzymuje ten sam
   punkt próbkowania tła po obu stronach zielonego szwu także podczas scrolla. */

:root[data-theme="dark"] main {
  background-color: var(--band-alt);
  background-image:
    radial-gradient(circle at 12% 20%, var(--accent-soft) 0, transparent 28%),
    radial-gradient(circle at 88% 78%, var(--accent-soft) 0, transparent 24%),
    linear-gradient(135deg, transparent 0 48%, var(--tile-line) 48% 48.4%, transparent 48.4% 100%);
  background-size: auto, auto, 46px 46px;
  background-position: center, center, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, fixed;
}

:root[data-theme="dark"] main > section {
  background: transparent !important;
}

/* Pas serwisowy ma w jasnym motywie osobny wzór dachówki. W ciemnym wzorzec
   stanowi wspólna faktura z sekcji opinii, więc druga warstwa tworzyłaby
   lokalne zagęszczenie i ponownie wyglądała jak zmiana jasności. */
:root[data-theme="dark"] main > .pp-feature-band::before {
  opacity: 0;
}

.pp-reviews::before {
  content: "GOOGLE REVIEWS";
  position: absolute;
  top: 26px;
  right: -12px;
  font-family: 'Anton', sans-serif;
  font-size: clamp(48px, 6vw, 86px);
  line-height: .8;
  letter-spacing: .02em;
  color: var(--accent-ink);
  opacity: .02;
  white-space: nowrap;
  pointer-events: none;
}

.pp-reviews__inner {
  position: relative;
  z-index: 1;
}

.pp-reviews__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.pp-reviews__rating {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  background: linear-gradient(145deg, var(--card-solid), var(--band));
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--accent);
  box-shadow: 0 14px 36px var(--shadow-soft);
}

.pp-reviews__rail {
  position: relative;
  margin: 0 -18px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pp-reviews__rail::before,
.pp-reviews__rail::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 12px;
  bottom: 16px;
  width: 54px;
  pointer-events: none;
}

.pp-reviews__rail::before {
  left: 0;
  background: linear-gradient(90deg, var(--band-alt), transparent);
}

.pp-reviews__rail::after {
  right: 0;
  background: linear-gradient(270deg, var(--band-alt), transparent);
}

.pp-reviews__viewport {
  overflow: hidden;
  overflow: clip;
  scrollbar-width: none;
  cursor: grab;
  outline: none;
  touch-action: pan-y;
}

.pp-reviews__viewport::-webkit-scrollbar {
  display: none;
}

.pp-reviews__viewport:active {
  cursor: grabbing;
}

.pp-reviews__viewport:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-line);
}

.pp-reviews__track {
  display: flex;
  align-items: stretch;
  gap: 22px;
  width: max-content;
  will-change: transform;
}

.pp-review-card {
  position: relative;
  flex: 0 0 clamp(310px, 30vw, 390px);
  min-height: 216px;
  padding: 20px 23px 19px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(145deg, var(--card-solid) 0%, var(--band) 155%);
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 44px var(--shadow-soft);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.pp-review-card::after {
  content: "“";
  position: absolute;
  top: 3px;
  right: 18px;
  font-family: Georgia, serif;
  font-size: 92px;
  line-height: 1;
  color: var(--accent-ink);
  opacity: .07;
  pointer-events: none;
}

.pp-review-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-line);
  box-shadow: 0 24px 54px var(--shadow-strong);
}

.pp-review-card__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.pp-review-card__stars {
  color: var(--accent-ink);
  font-size: 16px;
  letter-spacing: .18em;
  line-height: 1;
}

.pp-review-card__source {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.pp-review-card__quote {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.pp-review-card__footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
}

.pp-review-card__mark {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-ink);
}

.pp-review-card__author,
.pp-review-card__meta {
  display: block;
}

.pp-review-card__author {
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  color: var(--ink);
}

.pp-review-card__meta {
  margin-top: 3px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.pp-reviews__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
}

.pp-reviews__controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pp-reviews__motion {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 7px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.pp-reviews__motion span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: pp-review-pulse 2s ease-in-out infinite;
}

.pp-reviews__controls.is-paused .pp-reviews__motion span {
  animation: none;
  background: var(--ink-muted);
  box-shadow: none;
}

.pp-reviews__control {
  width: 35px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(147, 209, 63, .58);
  border-radius: 50%;
  background: rgba(147, 209, 63, .035);
  color: #93D13F;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: transform .2s, color .2s, background .2s, border-color .2s;
}

.pp-reviews__control:hover,
.pp-reviews__control:focus-visible {
  transform: translateY(-1px);
  color: #B5E46D;
  background: rgba(147, 209, 63, .12);
  border-color: #93D13F;
  outline: none;
}

.pp-reviews__control--toggle {
  position: relative;
}

.pp-reviews__control svg {
  display: block;
  flex: 0 0 auto;
}

.pp-reviews__pause-icon {
  width: 8px;
  height: 11px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.pp-reviews__play-icon {
  display: none;
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}

.pp-reviews__control--toggle.is-paused .pp-reviews__pause-icon {
  display: none;
}

.pp-reviews__control--toggle.is-paused .pp-reviews__play-icon {
  display: block;
}

@keyframes pp-review-pulse {
  0%, 100% { transform: scale(.85); opacity: .65; }
  50% { transform: scale(1); opacity: 1; }
}

/* --- Banner cookies: przyklejony do dołu okna, zamknięty od góry zielonym
       szwem. Pełne, ciemnozielone tło (#12240A z palety — ten sam odcień,
       którym gaszone są zielone przyciski pod hoverem) zamiast pasa
       warsztatowego z ukośnymi paskami z .pp-feature-band — banner ma się
       odróżniać od reszty ciemnych sekcji, nie je powtarzać. --- */

.pp-cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  background: #12240A;
  border-top: 2px solid var(--accent);
  box-shadow: 0 -16px 38px rgba(0, 0, 0, .30);
  overflow: hidden;
  transform: translateY(100%);
  transition: transform .38s cubic-bezier(.22, .68, .35, 1);
}

.pp-cookie[hidden] {
  display: none;
}

.pp-cookie.is-open {
  transform: none;
}

.pp-cookie__inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 22px 46px;
  display: flex;
  align-items: center;
  gap: 26px;
}

.pp-cookie__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 11px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(99, 179, 47, .28);
}

.pp-cookie__body {
  flex: 1;
  min-width: 0;
}

.pp-cookie__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #93D13F;
  margin-bottom: 5px;
}

.pp-cookie__text {
  margin: 0;
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  line-height: 1.62;
  color: #9C9785;
  max-width: 760px;
}

.pp-cookie__text a {
  color: #93D13F;
  border-bottom: 1px solid rgba(147, 209, 63, .4);
}

.pp-cookie__text a:hover {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}

.pp-cookie__actions {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
}

/* Banner ma zawsze ciemne tło, również gdy strona jest w jasnym motywie.
   Wariant ghost potrzebuje więc stałego, jasnego tuszu zamiast tokenu strony. */
.pp-cookie .pp-btn--ghost {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .38);
}

.pp-cookie .pp-btn--ghost:hover,
.pp-cookie .pp-btn--ghost:focus-visible {
  background: #FFFFFF;
  color: #1A1C15;
  border-color: #FFFFFF;
}

/* Osadzane treści pozostawiają komunikat i przycisk na ekranie aż do
   potwierdzenia załadowania iframe. Dzięki temu błąd sieci nie tworzy pustego
   prostokąta bez informacji i bez możliwości ponowienia. */
.pp-embed-gate.is-loading .pp-btn {
  pointer-events: none;
  opacity: .76;
}

.pp-embed-gate {
  z-index: 2;
}

.pp-fb-embed .pp-embed-gate {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 560px;
  background: var(--card-solid);
}

.pp-embed-gate.is-loading::after {
  content: "";
  width: 22px;
  height: 22px;
  margin-top: 10px;
  border: 2px solid var(--accent-line);
  border-top-color: var(--accent-ink);
  border-radius: 50%;
  animation: pp-spin .75s linear infinite;
}

@keyframes pp-spin {
  to { transform: rotate(360deg); }
}

/* --- Rozwijane zestawienie modeli Green Max. Lista narzędzi rośnie
       z każdą dostawą, więc tabela jest domyślnie zwinięta — nagłówek
       sekcji zostaje widoczny, a kto szuka konkretnej gwoździarki, otwiera
       pełne zestawienie jednym kliknięciem.

       Nośnikiem jest natywne <details>, więc cały stan (aria-expanded,
       obsługa klawiatury) trzyma przeglądarka. Arkusz tylko ubiera
       <summary> w pasek w stylu reszty motywu i chowa domyślny trójkącik. --- */

.pp-models {
  border: 1px solid var(--accent-line);
}

.pp-models__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 26px;
  background: var(--card);
  cursor: pointer;
  list-style: none;
  transition: background .2s;
}

/* WebKit rysuje marker mimo list-style:none — potrzebuje własnej reguły */
.pp-models__toggle::-webkit-details-marker {
  display: none;
}

.pp-models__toggle:hover {
  background: var(--accent-soft);
}

.pp-models__toggle:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: -3px;
}

.pp-models__toggle-title {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Etykieta zmienia się razem ze stanem <details>, bez udziału JS. Oba
   warianty siedzą w markupie, widoczny jest zawsze dokładnie jeden. */
.pp-models__toggle-title--open {
  display: none;
}

.pp-models[open] .pp-models__toggle-title--closed {
  display: none;
}

.pp-models[open] .pp-models__toggle-title--open {
  display: inline;
}

.pp-models__toggle-meta {
  display: block;
  margin-top: 3px;
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.pp-models__toggle-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s, background .2s;
}

.pp-models[open] .pp-models__toggle-icon {
  transform: rotate(180deg);
}

.pp-models__toggle:hover .pp-models__toggle-icon {
  background: var(--card);
}

/* Panel zostaje przezroczysty: gradient wygaszający tabelę na mobile
   (.pp-spec__viewport::after) domyka się kolorem --band, więc tło pod
   tabelą musi być tłem sekcji, nie karty. */
.pp-models__panel {
  padding: 22px 26px 26px;
  border-top: 1px solid var(--accent-line);
}

@media (prefers-reduced-motion: no-preference) {
  .pp-models[open] .pp-models__panel {
    animation: pp-models-reveal .28s ease-out;
  }
}

@keyframes pp-models-reveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* --- Tabela modeli Green Max na ciemnym pasie. Jedyne miejsce w motywie
       z tabelą danych, więc reguły idą do arkusza — styl inline przy każdej
       z ponad pięćdziesięciu komórek byłby nie do utrzymania. --- */

.pp-spec__wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-line) var(--band-alt);
}

.pp-spec__viewport {
  position: relative;
}

.pp-spec__scroll-hint {
  display: none;
}

.pp-spec__wrap:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 4px;
}

.pp-spec {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  font-family: 'Barlow', sans-serif;
}

.pp-spec th {
  text-align: left;
  padding: 0 20px 14px 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
  border-bottom: 2px solid var(--accent-line);
  white-space: nowrap;
}

.pp-spec td {
  padding: 16px 20px 16px 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.pp-spec__photo {
  width: 64px;
  padding: 10px 14px 10px 0;
}

.pp-spec__photo-btn {
  display: block;
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  margin: 0;
  background: var(--card-solid, #fff);
  border: 1px solid var(--line);
  cursor: zoom-in;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}

.pp-spec__photo-btn:hover,
.pp-spec__photo-btn:focus-visible {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.pp-spec__photo-btn img {
  display: block;
  width: 100%;
  height: 100%;
}

.pp-spec__photo-btn__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 36, 10, 0);
  color: #fff;
  opacity: 0;
  transition: opacity .18s, background .18s;
  pointer-events: none;
}

.pp-spec__photo-btn:hover .pp-spec__photo-btn__icon,
.pp-spec__photo-btn:focus-visible .pp-spec__photo-btn__icon {
  background: rgba(18, 36, 10, .4);
  opacity: 1;
}

/* --- Podgląd powiększenia zdjęcia z tabeli modeli: jeden reużywalny overlay,
       wypełniany przez lightbox.js danymi z klikniętego przycisku. --- */

.pp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(10, 20, 6, .84);
}

.pp-lightbox[hidden] {
  display: none;
}

.pp-lightbox__close {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, border-color .18s;
}

.pp-lightbox__close:hover,
.pp-lightbox__close:focus-visible {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .5);
}

.pp-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, border-color .18s;
}

.pp-lightbox__nav:hover,
.pp-lightbox__nav:focus-visible {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .5);
}

.pp-lightbox__nav[hidden] {
  display: none;
}

.pp-lightbox__nav--prev {
  left: 20px;
}

.pp-lightbox__nav--next {
  right: 20px;
}

.pp-lightbox__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 100%;
}

.pp-lightbox__img {
  display: block;
  max-width: min(90vw, 720px);
  max-height: 78vh;
  width: auto;
  height: auto;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}

.pp-lightbox__caption {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}

/* --- Karta produktu w oknie: pełne opisy od klienta trzymane poza widokiem
       strony, otwierane z kafelka kategorii albo z karty w sekcji.

       Cała warstwa siedzi na tokenach motywu, więc wariant ciemny nie wymaga
       osobnych reguł — poza samym przyciemnieniem tła, które jest stałe (tak
       samo jak w .pp-lightbox: pod spodem leży strona w dowolnym motywie,
       a okno ma odciąć od niej wzrok w obu). --- */

.pp-modal {
  position: fixed;
  inset: 0;
  /* nad .pp-lightbox (200) — z karty produktu można otworzyć podgląd zdjęcia,
     nigdy odwrotnie */
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.pp-modal[hidden] {
  display: none;
}

.pp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 6, .84);
}

.pp-modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 900px;
  max-height: 88vh;
  background: var(--band);
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.pp-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--card-solid);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s, border-color .18s, color .18s;
}

.pp-modal__close:hover,
.pp-modal__close:focus-visible {
  background: var(--accent);
  border-color: var(--accent-ink);
  color: #12240A;
}

.pp-modal__scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-line) var(--band-alt);
}

.pp-modal__panel[hidden] {
  display: none;
}

/* --- nagłówek karty: zdjęcie i wstęp --- */

.pp-modal__head {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 0;
  border-bottom: 1px solid var(--line);
}

.pp-modal__figure {
  position: relative;
  min-height: 310px;
  border-right: 1px solid var(--line);
}

/* .pp-plate::after leży na z-index 2 — plakietka musi być nad wygaszeniem */
.pp-modal__badge {
  position: absolute;
  z-index: 3;
  left: 16px;
  bottom: 16px;
  background: var(--accent);
  color: #12240A;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 13px;
}

.pp-modal__intro {
  padding: 34px 36px 30px;
  min-width: 0;
}

.pp-modal__eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 14px;
}

.pp-modal__eyebrow-rule {
  width: 28px;
  height: 2px;
  background: var(--accent-ink);
  flex-shrink: 0;
}

.pp-modal__title {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: pretty;
}

.pp-modal__lead {
  font-size: 16px;
  line-height: 1.66;
  color: var(--ink-soft);
  margin: 0 0 12px;
  text-wrap: pretty;
}

.pp-modal__specs {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pp-modal__specs li {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-ink);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 14px;
}

/* --- treść karty --- */

.pp-modal__body {
  padding: 32px 36px 8px;
}

.pp-modal__section + .pp-modal__section {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.pp-modal__section-title {
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 10px;
}

.pp-modal__section p {
  font-size: 16px;
  line-height: 1.68;
  color: var(--ink-soft);
  margin: 0 0 10px;
  text-wrap: pretty;
}

.pp-modal__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.pp-modal__list li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ten sam romb co przy listach wyposażenia w sekcji Green Max */
.pp-modal__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .52em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  transform: rotate(45deg);
}

/* wyróżniony akapit na końcu treści - patrz "callout" w inc/products.php;
   ten sam motyw (pasek akcentu + tło accent-soft), co ramki informacyjne
   na stronie Oferty (np. "Wkręty konstrukcyjne z certyfikatem") */
.pp-modal__callout {
  margin: 26px 0 0;
  padding: 18px 22px;
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}

/* --- stopka: slogan klienta i wezwanie do kontaktu --- */

.pp-modal__foot {
  margin-top: 32px;
  padding: 28px 36px 32px;
  background: var(--band-alt);
  border-top: 1px solid var(--line);
}

.pp-modal__note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 0 8px;
}

.pp-modal__slogan {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 20px;
  text-wrap: pretty;
}

.pp-modal__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.pp-modal__actions > [hidden] {
  display: none;
}

/* --- wyzwalacze: kafelek kategorii i sygnał "są szczegóły" --- */

.pp-sheet-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.pp-sheet-cue span {
  transition: transform .2s;
}

.js-pp-product-open {
  cursor: pointer;
}

.js-pp-product-open:hover .pp-sheet-cue span,
.js-pp-product-open:focus-visible .pp-sheet-cue span {
  transform: translateX(4px);
}

/* Karty produktów w trzech głównych sekcjach Oferty nie unoszą się już nad
   układ. Tak jak karty Asortymentu, w spoczynku mają cienką neutralną ramkę,
   która po wskazaniu delikatnie przechodzi w kolor akcentu. */
.pp-offer-card {
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: 0;
  transition: border-color .25s ease;
}

.pp-offer-card:hover,
.pp-offer-card:focus-visible {
  border-color: var(--accent);
}

/* Karty głównych grup na Ofercie: ten sam model interakcji co w sekcji
   insightów z referencji — w spoczynku fotografia + nazwa, a na hover/focus
   panel treści przesuwa się nad zdjęcie i odsłania opis. */
.pp-group-card {
  position: relative;
  isolation: isolate;
  min-height: 300px;
  overflow: hidden;
  padding: 0;
  background: var(--card-solid);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  border-radius: 0;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}

.pp-group-card__media {
  --pp-group-image-scale-active: var(--pp-group-image-scale-light, 1);
  position: absolute;
  inset: 0 0 auto;
  display: block;
  height: 158px;
  overflow: hidden;
  background: var(--pp-group-media-bg-light, #FFFFFF);
}

:root[data-theme="dark"] .pp-group-card__media {
  --pp-group-image-scale-active: var(--pp-group-image-scale-dark, var(--pp-group-image-scale-light, 1));
  background: var(--pp-group-media-bg-dark, var(--band-alt));
}

/* Kategoria 06 ma taką samą czarną krawędź oraz oliwkowo-złotą poświatę jak
   zdjęcie kategorii 05. Wygaszanie maską osłabiałoby światło przy bokach. */
:root[data-theme="dark"] .pp-group-card[data-product="gwozdziarki-green-max"] .pp-group-card__media {
  background: #000;
}

.pp-group-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .10), transparent 42%);
  pointer-events: none;
}

.pp-group-card__media img {
  transform: scale(var(--pp-group-image-scale-active, 1));
  transform-origin: var(--pp-group-image-origin, 50% 50%);
  transition: transform .48s ease, opacity .35s ease;
}

.pp-group-card__content {
  position: absolute;
  z-index: 1;
  inset: 154px 0 0;
  display: flex;
  flex-direction: column;
  padding: 16px 20px 17px;
  overflow: hidden;
  background: var(--card-solid);
  border-top: 1px solid var(--line);
  transition: top .42s cubic-bezier(.22, 1, .36, 1), background-color .3s;
}

.pp-group-card__number {
  display: block;
  margin-bottom: 8px;
  font-family: 'Anton', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--accent-ink);
}

.pp-group-card__title {
  display: block;
  font-family: 'Barlow', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.16;
  color: var(--ink);
  text-wrap: pretty;
}

.pp-group-card__title--detail {
  display: none;
  font-family: 'Anton', sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.pp-group-card__title-accent {
  color: var(--accent-ink);
}

.pp-group-card__description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(12px);
  transition: max-height .38s ease, margin-top .38s ease, opacity .24s ease .08s, transform .38s ease;
}

.pp-group-card__cue {
  margin-top: auto;
  padding-top: 8px;
}

.pp-group-card:hover,
.pp-group-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px var(--shadow-soft);
  border-color: var(--accent);
}

.pp-group-card:hover .pp-group-card__content,
.pp-group-card:focus-visible .pp-group-card__content {
  top: 0;
  background: var(--band);
}

.pp-group-card:hover .pp-group-card__title--compact,
.pp-group-card:focus-visible .pp-group-card__title--compact {
  display: none;
}

.pp-group-card:hover .pp-group-card__title--detail,
.pp-group-card:focus-visible .pp-group-card__title--detail {
  display: block;
}

.pp-group-card:hover .pp-group-card__description,
.pp-group-card:focus-visible .pp-group-card__description {
  max-height: 105px;
  margin-top: 10px;
  opacity: 1;
  transform: translateY(0);
}

.pp-group-card:hover .pp-group-card__media img,
.pp-group-card:focus-visible .pp-group-card__media img {
  transform: scale(var(--pp-group-image-scale-active, 1));
  opacity: .78;
}

/* --- karty wariantów GAZ OK: puszki są prawie identyczne, więc wariant
       rozpoznaje pasek koloru, nie zdjęcie. --- */

/* Po wskazaniu wszystkie krawędzie przejmują kolor danego wariantu,
   odpowiadający jego stałemu górnemu paskowi. */
.pp-gas-card {
  border-top: 4px solid var(--gas-color, var(--accent));
}

.pp-gas-card:hover,
.pp-gas-card:focus-visible {
  border-color: var(--gas-color, var(--accent));
}

/* Zdjęcia z wyciętym tłem (WebP z kanałem alfa, wycięty przez rembg/U2Net)
   zamiast studyjnej bieli dostają inny sposób osadzenia niż reszta .pp-plate:
   płyta bez białego prostokąta i bez elipsy wygaszającej krawędzie (nie ma
   już czego wygaszać), za to miękka poświata pod produktem plus cień rzucany
   na samym zdjęciu (drop-shadow podąża za konturem produktu, nie za
   prostokątem kadru).

   Znacznik to modyfikator .pp-plate--cutout, nie selektor po sekcji/ID -
   działa identycznie w karcie na stronie i w odpowiadającym jej panelu
   modalnym (product-modal.php), a nowa sekcja z takimi zdjęciami dostaje go
   przez dopisanie klasy w znaczniku, bez zmian w tym pliku.

   Kształt poświaty jest zmienny przez CSS custom properties (--glow-*),
   bo wycięte produkty mają skrajnie różne proporcje: wysoka wąska puszka
   gazu potrzebuje innej elipsy niż płaski zwój drutu czy ukośna taśma
   gwoździ. Wartości domyślne są wyskalowane pod pionowe kadry (puszki,
   pudełka) - płaskie/szerokie zdjęcia dostają nadpisanie inline w
   znaczniku (patrz --glow-w/--glow-h przy kartach "łączone drutem" i
   "łączone termoplastem" w page-oferta.php). */
.pp-plate--cutout {
  background: var(--band-alt) radial-gradient(ellipse var(--glow-w, 32%) var(--glow-h, 74%) at var(--glow-x, 50%) var(--glow-y, 46%), var(--plate-glow), transparent 74%);
}

.pp-plate--cutout::after {
  content: none;
}

.pp-plate--cutout img {
  filter: drop-shadow(0 5px 9px var(--shadow-soft)) drop-shadow(0 16px 24px var(--shadow-soft));
}

.pp-gas-card__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gas-color, var(--accent));
  border: 1px solid var(--line-strong);
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .pp-modal__head {
    grid-template-columns: 1fr;
  }

  /* W widoku szczegółów zdjęcie przechodzi nad opis. Dotychczasowa minimalna
     wysokość 220 px tworzyła wtedy bardzo szeroki, niski kadr: packshoty
     kwadratowe/pionowe zostawały małe z szerokimi pasami po bokach, a zdjęcie
     serwisowe przy object-fit:cover było zbyt mocno obcięte. Wyższa, ale
     ograniczona ramka zbliża proporcje do desktopu i działa dla obu typów
     materiałów. overflow ukrywa też ewentualne przesunięcie zdjęcia ustawione
     indywidualnie w danych produktu. */
  .pp-modal__figure {
    height: clamp(260px, 82vw, 340px);
    min-height: 0;
    overflow: hidden;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .pp-modal__intro,
  .pp-modal__body,
  .pp-modal__foot {
    padding-left: 24px;
    padding-right: 24px;
  }

  .pp-modal__title {
    font-size: 25px;
  }
}

@media (max-width: 640px) {
  .pp-modal {
    padding: 0;
  }

  .pp-modal__dialog {
    max-width: none;
    max-height: none;
    height: 100%;
    border: none;
  }
}

.pp-spec__model {
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* kolumna z uwagami bywa najdłuższa — mniejszy stopień trzyma wiersz w ryzach */
.pp-spec td:last-child {
  font-size: 15px;
  line-height: 1.55;
  min-width: 260px;
}

.pp-spec tbody tr {
  transition: background .18s;
}

.pp-spec tbody tr:hover td {
  background: var(--accent-soft);
  color: var(--ink);
}

/* --- Strony prawne (polityka prywatności): jeden zestaw reguł zamiast
       inline'owych stylów przy każdym akapicie — tu tekstu jest za dużo,
       żeby powtarzać go tak jak w sekcjach marketingowych. --- */

.pp-legal__section {
  /* topbar + header są sticky (46px + 88px = 134px, patrz .pp-mobile-nav) —
     bez tego kotwice wpadałyby pod nie */
  scroll-margin-top: 134px;
  padding-top: 44px;
  margin-top: 44px;
  border-top: 1px solid var(--line);
}

.pp-legal__section:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.pp-legal__num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 10px;
}

.pp-legal h2 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
}

.pp-legal h3 {
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  margin: 24px 0 8px;
}

.pp-legal p {
  font-family: 'Barlow', sans-serif;
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-soft);
  margin: 0 0 14px;
  text-wrap: pretty;
}

.pp-legal ul {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.pp-legal li {
  position: relative;
  padding-left: 24px;
  font-family: 'Barlow', sans-serif;
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink-soft);
  margin-bottom: 9px;
  text-wrap: pretty;
}

/* znacznik listy jak łeb wkrętu — ten sam detal co w nawigacji i kartach */
.pp-legal li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
  transform: rotate(45deg);
}

.pp-legal strong {
  font-weight: 700;
  color: var(--ink);
}

.pp-legal a {
  border-bottom: 1px solid var(--accent-line);
}

.pp-legal a:hover {
  border-bottom-color: var(--accent);
}

/* karta z danymi rejestrowymi / wyróżnieniem — jak kafle kontaktu */
.pp-legal__card {
  background: var(--band-alt);
  border-left: 4px solid var(--accent);
  padding: 26px 28px;
  margin: 0 0 16px;
}

.pp-legal__card p:last-child,
.pp-legal__card ul:last-child {
  margin-bottom: 0;
}

.pp-legal__data {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 26px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-strong);
}

.pp-legal__data-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 3px;
}

.pp-legal__data-value {
  font-family: 'Barlow', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

/* spis treści przyklejony z boku — nawigacja po długim dokumencie */
.pp-legal-toc {
  position: sticky;
  top: 134px;
  background: var(--band-alt);
  border: 1px solid var(--line);
  padding: 26px 24px;
}

.pp-legal-toc__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 14px;
}

.pp-legal-toc a {
  display: block;
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-soft);
  padding: 8px 0 8px 14px;
  border-left: 2px solid var(--line-strong);
  transition: color .18s, border-color .18s;
}

.pp-legal-toc a:hover {
  color: var(--accent-ink);
  border-left-color: var(--accent);
}

/* --- Widoczny focus dla klawiatury (makieta pokrywała tylko hover myszą) --- */

/* Kolor obwódki przez --accent-ink, nie sztywny #2F7A1E: ten token znaczy
   dokładnie „zieleń czytelna NA aktualnym tle" (ciemna #2F7A1E w motywie
   jasnym, jasna #93D13F w ciemnym). Sztywna ciemna zieleń na ciemnym paśmie
   dawała 3,4:1 — formalnie ponad próg 3:1 dla elementów nietekstowych, ale
   na tyle mało, że obwódka czytała się jak artefakt renderowania, a nie
   celowe podświetlenie klawiatury. offset 3px zamiast 2px, żeby ramka nie
   stykała się z podkreśleniem linków, które mają border-bottom. */
.pp-nav-plate:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 3px;
}

/* --- Pola formularza: stan focus z makiety (style-focus) --- */

.js-contact-form input,
.js-contact-form textarea {
  transition: border-color .2s, box-shadow .2s;
}

/* !important, bo pola mają kolor obramowania w atrybucie style (motyw jest
   portem makiety opartej na stylach inline) i inline wygrywa z arkuszem. */
.js-contact-form input:focus,
.js-contact-form textarea:focus {
  border-color: var(--accent-ink) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.js-contact-starter,
.js-contact-form [data-topic]:not(.js-contact-starter) {
  min-height: 44px;
}

.js-contact-form input[type="checkbox"] {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px;
}

.js-contact-form input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 2px;
}

.pp-btn:active,
.pp-topbar-icon:active,
.pp-hamburger:active {
  transform: translateY(1px) scale(.98);
  box-shadow: inset 0 3px 6px var(--shadow-strong);
}

.pp-footer-links a:hover,
.pp-footer-bottom a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pp-social-circle {
  line-height: 1;
}

/* ============================================================
   Responsywność
   ============================================================
   Szablony to port makiety opartej na stylach inline (patrz uwaga na górze
   pliku), więc w przeciwieństwie do kolorów, layoutu nie da się przepiąć
   przez zmienne CSS — inline `grid-template-columns`/`padding`/`max-width`
   trzeba realnie nadpisać z arkusza. Stąd wzorzec: elementy strukturalne
   w szablonach dostają dodatkową klasę WYŁĄCZNIE jako hak do poniższych
   reguł (styl wygląd/kolor zostaje w atrybucie style bez zmian), a te reguły
   nadpisują inline przez !important — dokładnie tak samo, jak już robi to
   .js-contact-form input:focus wyżej w tym pliku, z tego samego powodu.

   Klasy-haki:
     .pp-container  — pozioma wyściółka sekcji (max-width:1340px;margin:0
                       auto;padding:… 46px), używana też w topbarze/nagłówku
     .pp-2col       — dwukolumnowe sekcje (tekst + zdjęcie/karta) -> 1 kolumna
     .pp-grid-2     — wąskie 2-kolumnowe listy (pola formularza, checklisty)
     .pp-grid-3     — 3-kolumnowe rzędy kart/linków
     .pp-grid-4     — 4-kolumnowe siatki (grupy produktowe, stopka)
     .pp-why-grid / .pp-why-card — siatka "Dlaczego my" na o-nas (6 kolumn
                       ze span-ami, które poniżej 1024px nie mają się gdzie
                       zmieścić)
     .pp-cover-frame — ramki ze zdjęciem na object-fit:cover i sztywną
                       wysokością inline (skraca się na mobile)
   --- */

/* --- Hamburger: domyślnie ukryty, pokazuje się poniżej progu, na którym
       płytki nawigacji + pasek kontaktowy przestają się mieścić w jednym
       rzędzie. Trzy paski jak w każdym menu mobilnym — zamierzenie generyczna
       ikona, żeby nie konkurowała wizualnie ze śrubą przełącznika motywu obok.

       Reguła bazowa (display:none) MUSI stać przed @media (max-width:940px)
       niżej — przy takiej samej specyficzności o wygranej decyduje kolejność
       w pliku, a nie to, który blok akurat pasuje do szerokości ekranu. --- */

/* Ta sama płytka montażowa co .pp-nav-plate — łby śrub Torx w przeciwległych
   narożnikach, gradient tła, gloss. Przycisk ma się czytać jako część tej
   samej rodziny co reszta nawigacji, nie jak doklejona, generyczna ikonka. */
.pp-hamburger {
  display: none;
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--plate-border);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--plate-a) 0%, var(--plate-b) 100%);
  box-shadow: inset 0 1px 0 var(--plate-gloss), 0 1px 0 rgba(26, 28, 21, .12);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s;
}

.pp-hamburger::before,
.pp-hamburger::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8D8876 0%, #4A4638 60%, #2A2820 100%);
  box-shadow: 0 0 0 1px rgba(26, 28, 21, .22);
  transition: background .2s, box-shadow .2s;
}

.pp-hamburger::before { left: 5px; top: 5px; }
.pp-hamburger::after  { right: 5px; bottom: 5px; }

.pp-hamburger:hover {
  border-color: var(--accent-ink);
  transform: translateY(1px);
}

.pp-hamburger[aria-expanded="true"] {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--plate-active-a) 0%, var(--plate-active-b) 100%);
  box-shadow: inset 0 1px 0 var(--plate-gloss), 0 0 0 1px rgba(99, 179, 47, .25);
}

.pp-hamburger:hover::before,
.pp-hamburger:hover::after,
.pp-hamburger[aria-expanded="true"]::before,
.pp-hamburger[aria-expanded="true"]::after {
  background: radial-gradient(circle at 35% 30%, #93D13F 0%, #2F7A1E 60%, #1F5613 100%);
  box-shadow: 0 0 0 1px rgba(47, 122, 30, .3);
}

.pp-hamburger__bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--plate-ink);
  transition: transform .3s cubic-bezier(.22, .68, .35, 1), opacity .2s, background .2s;
}

.pp-hamburger:hover .pp-hamburger__bar,
.pp-hamburger[aria-expanded="true"] .pp-hamburger__bar {
  background: var(--accent-ink);
}

.pp-hamburger[aria-expanded="true"] .pp-hamburger__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.pp-hamburger[aria-expanded="true"] .pp-hamburger__bar:nth-child(2) {
  opacity: 0;
}

.pp-hamburger[aria-expanded="true"] .pp-hamburger__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --- Panel mobilny: rozwija się pod nagłówkiem (topbar 46px + header 88px =
       134px), position:fixed więc nie zależy od tego, czy strona jest
       przewinięta — sticky topbar/header i tak zawsze stoją na tej samej
       wysokości względem viewportu, gdy są "przyklejone". --- */

.pp-mobile-nav {
  position: fixed;
  top: 134px;
  left: 0;
  right: 0;
  z-index: 58;
  max-height: calc(100vh - 134px);
  overflow-y: auto;
  background: var(--band);
  border-top: 2px solid var(--accent);
  box-shadow: 0 20px 40px var(--shadow-strong);
  padding: 20px 24px 28px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
}

.pp-mobile-nav[hidden] {
  display: none;
}

.pp-mobile-nav.is-open {
  opacity: 1;
  transform: none;
}

.pp-mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pp-mobile-nav__link {
  display: block;
  padding: 14px 18px;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--plate-ink);
  background: linear-gradient(180deg, var(--plate-a) 0%, var(--plate-b) 100%);
  border: 2px solid var(--plate-border);
  border-radius: 3px;
}

.pp-mobile-nav__link.is-active {
  color: var(--accent-ink);
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--plate-active-a) 0%, var(--plate-active-b) 100%);
}

/* --- Komplet szybkich akcji w górnym pasku (telefon / e-mail / adres):
       zastępuje pełny tekst kontaktu poniżej 768 px, kiedy nie ma go gdzie
       zmieścić. justify-content:space-between na pp-topbar-inner rozstawia
       ten komplet po lewej, a przełączniki języka i motywu po prawej — stąd
       zmiana układu z
       "wszystko zlepione po lewej" na naturalny układ paska. Ikony na tych
       samych tokenach --btn-* co pigułki CTA i znaczek Facebooka w stopce.

       Bazowa reguła .pp-topbar-quick musi stać przed @media
       (max-width:768px) niżej z tego samego powodu co przy .pp-hamburger —
       przy remisie specyficzności wygrywa kolejność w pliku, nie dopasowanie
       media query. .pp-topbar-icon nie potrzebuje własnego przełącznika
       display — dziedziczy widoczność po rodzicu. --- */

.pp-topbar-quick {
  display: none;
  align-items: center;
  gap: 6px;
}

.pp-topbar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--btn-bg);
  border: 2px solid var(--btn-border);
  color: var(--btn-ink);
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}

.pp-topbar-icon:hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  color: var(--btn-hover-ink);
  transform: translateY(-1px);
}

/* Klasyczna pułapka CSS Grid: kolumna "1fr" ma domyślne min-width:auto, więc
   nie skurczy się poniżej min-content dziecka. Kafle z nagłówkiem "Nasza
   marka"/"Marka, która..." zawierają wordmark Green Max jako SVG o stałej
   szerokości (bez max-width) — bez min-width:0 kolumna 1fr rosła do jego
   szerokości (np. 318px przy wysokości 38) i wypychała treść poza viewport.
   overflow-x:clip na przodku wycina to wizualnie, więc scrollWidth strony
   nic nie pokazuje — błąd widać dopiero po realnym pomiarze prawej krawędzi
   elementów, nie po samym „strona się nie przewija w poziomie”. Reguła
   ogólna, nie tylko w media query: nie zmienia niczego, gdy miejsca starcza
   (desktop), a zabezpiecza wszędzie tam, gdzie kolumna się kiedyś zwinie. */
.pp-2col > *,
.pp-grid-2 > *,
.pp-grid-3 > *,
.pp-grid-4 > *,
.pp-footer-grid > *,
.pp-why-card {
  min-width: 0;
}

/* min-width:0 wyżej zatrzymuje wymuszanie szerokości kolumny przez samo SVG,
   ale bez tego wordmark i tak przelewałby się poza swój (teraz węższy)
   kontener — potrzebuje własnej możliwości skurczenia się. Selektor po
   aria-label, bo pp_fasteners_green_max_logo() jest jedynym miejscem, które
   go ustawia, więc łapie każde użycie znaczka niezależnie od kontekstu.

   min-width:0 TU, na samym SVG, jest osobnym przypadkiem tej samej pułapki:
   znaczek często siedzi w <span style="display:inline-flex">, więc sam SVG
   jest elementem flex z domyślnym min-width:auto — bez jawnego wyzerowania
   max-width:100% nic by nie zmienił, bo min-width:auto i tak trzyma dolną
   granicę na naturalnej szerokości SVG. */
svg[aria-label="Green Max"] {
  max-width: 100%;
  min-width: 0;
  height: auto;
}

@media (max-width: 1024px) {
  .pp-container { padding-left: 32px !important; padding-right: 32px !important; }
  /* .pp-feature-band__inner ustawia padding w arkuszu (nie inline), więc
     tu wystarczy zwykłe nadpisanie bez !important. */
  .pp-feature-band__inner { padding-left: 32px; padding-right: 32px; }
  .pp-topbar-info { display: none !important; }
  .pp-2col { grid-template-columns: 1fr !important; }
  .pp-why-grid { grid-template-columns: 1fr 1fr !important; }
  .pp-why-card { grid-column: span 1 !important; }
}

@media (max-width: 900px) {
  .pp-grid-3 { grid-template-columns: 1fr 1fr !important; }
  .pp-grid-4 { grid-template-columns: 1fr 1fr !important; }
  .pp-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 36px 32px !important; }
  .pp-legal-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* TOC polityki prywatności: sticky sidebar nie ma się gdzie przykleić w
     jednej kolumnie, więc na tej szerokości zamienia się w poziomy rząd
     pigułek nad treścią — ten sam język wizualny co tagi "Budownictwo" itp. */
  .pp-legal-toc {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .pp-legal-toc__label {
    width: 100%;
  }

  .pp-legal-toc a {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--band);
  }
}

@media (max-width: 940px) {
  .pp-hamburger { display: flex; }
  /* !important: <nav> ma inline style="display:flex" (port makiety), więc
     zwykła reguła by przegrała z inline tak samo jak przy .pp-nav-plate itd. */
  .pp-nav-desktop { display: none !important; }
}

@media (min-width: 769px) and (max-width: 940px) {
  .pp-mobile-nav__lang { display: none; }
}

@media (max-width: 768px) {
  .pp-topbar-quick { display: flex; }
  .pp-topbar-hide-sm { display: none !important; }
  .pp-topbar-controls { gap: 6px !important; }
  .pp-topbar-lang { border-left: none !important; padding-left: 0 !important; }
  .pp-topbar-theme { border-left: none !important; padding-left: 0 !important; }

  /* Pasek postępu ma 3 px i leży nad topbarem. Dotąd okrągłe skróty o
     wysokości 44 px zaczynały się na y=1 w topbarze wysokim na 46 px, więc
     ich górna krawędź wchodziła pod pasek. Cztery dodatkowe piksele zachowują
     pełny cel dotykowy i przesuwają komplet ikon bez ścisku. */
  .pp-topbar-inner {
    height: 50px !important;
    padding-top: 4px !important;
  }

  .pp-site-header {
    top: 50px !important;
  }

  .pp-mobile-nav {
    top: 138px;
    max-height: calc(100vh - 138px);
  }
  /* Logo "Fasteners" skurczone, żeby zrobić miejsce na znaczek Green Max
     obok niego (patrz niżej) i hamburger w tym samym rzędzie. Znaczek ma
     dwa niezależne ograniczenia: płynne (flexbox — główne logo ma
     flex-shrink:0, .pp-header-brandmark i .pp-header-logo mają min-width:0,
     a svg[aria-label="Green Max"] wyżej ma max-width:100%;height:auto), to
     jest wyłącznie zabezpieczenie przed przelaniem się na wąskich ekranach.
     Docelowy rozmiar ustawia poniższy sztywny cap — znaczek ma być wyraźnie
     mniejszy niż wordmark "Fasteners", nie tylko "cokolwiek się zmieści". */
  .pp-header-logo-img { height: 36px !important; }
  .pp-header-logo-text { font-size: 21px !important; margin-left: -14px !important; }
  .pp-header-brandmark svg { max-width: 84px !important; }

  .pp-topbar-icon {
    width: 44px;
    height: 44px;
  }

  .pp-lang-toggle,
  .pp-theme-toggle {
    width: 72px;
    height: 34px;
  }

  :root[data-theme="dark"] .pp-theme-toggle__screw {
    transform: translateX(42px) rotate(180deg);
  }
}

@media (max-width: 360px) {
  .pp-topbar-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (min-width: 941px) {
  .pp-mobile-nav { display: none !important; }
}

/* Na szerokim ekranie pierwsze zdanie mieści się w jednym wierszu. Na
   mniejszych widokach zachowuje naturalne zawijanie, bez ryzyka przelewania. */
@media (min-width: 1280px) {
  .pp-about-title {
    font-size: 52px !important;
    letter-spacing: -.02em;
  }

  .pp-about-title__lead {
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .pp-container { padding-left: 20px !important; padding-right: 20px !important; }
  .pp-feature-band__inner { padding-left: 20px; padding-right: 20px; }
  .pp-grid-2 { grid-template-columns: 1fr !important; }
  .pp-grid-3 { grid-template-columns: 1fr !important; }
  .pp-grid-4 { grid-template-columns: 1fr !important; }
  .pp-footer-grid {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr) !important;
    grid-template-areas:
      "brand brand"
      "pages contact"
      "offer offer";
    gap: 32px 24px !important;
  }
  .pp-footer-brand { grid-area: brand; }
  .pp-footer-pages { grid-area: pages; }
  .pp-footer-offer { grid-area: offer; }
  .pp-footer-contact { grid-area: contact; }
  .pp-why-grid { grid-template-columns: 1fr !important; }

  .pp-reviews__inner {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  .pp-reviews__heading {
    align-items: stretch;
    margin-bottom: 24px;
  }

  .pp-reviews__rating {
    width: 100%;
    justify-content: center;
  }

  .pp-reviews__rail {
    margin-right: -20px;
    margin-left: -20px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .pp-reviews__rail::before,
  .pp-reviews__rail::after {
    width: 26px;
  }

  .pp-review-card {
    flex-basis: calc(100vw - 64px);
    min-height: 230px;
    padding: 21px 21px 19px;
  }

  .pp-reviews__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .pp-reviews__controls {
    width: 100%;
  }

  .pp-reviews__motion {
    margin-right: auto;
    font-size: 11px;
  }

  main > section > .pp-container {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  main > section:first-of-type > .pp-container {
    padding-top: 48px !important;
  }

  .home main > section:first-of-type > .pp-container:first-child {
    padding-bottom: 0 !important;
  }

  .home main > section:first-of-type > .pp-container + .pp-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  body:not(.home) main > .pp-feature-band > .pp-feature-band__inner {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  main h1 {
    font-size: 32px !important;
    line-height: 1 !important;
  }

  .pp-legal h2 {
    font-size: 26px !important;
    line-height: 1.1 !important;
  }

  .pp-why-card__title {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  .pp-feature__title {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  .pp-contact-card,
  .js-contact-wrap {
    padding: 28px 24px !important;
  }

  .pp-stage { min-height: 220px !important; }
  .pp-cover-frame { min-height: 240px !important; height: 240px !important; }
  .pp-stage img,
  .pp-plate img { max-width: 100% !important; }

  .pp-fb-frame { width: 100%; height: 480px; }
  .pp-fb-embed { width: 100%; min-height: 480px; transform: none; }

  #wkrety .pp-grid-3 .pp-plate {
    height: 220px !important;
  }

  #wkrety .pp-grid-3 article:nth-child(2) .pp-plate img,
  #wkrety .pp-grid-3 article:nth-child(3) .pp-plate img {
    transform: scale(1.1);
  }

  /* Kafle wkrętów mają na desktopie ok. 296 × 250 px. Na telefonie ich
     szerokość rosła do całej kolumny, ale wysokość zostawała sztywno na
     250 px, przez co object-fit:cover obcinał coraz większą część kwadratowych
     zdjęć. Zachowujemy proporcję zaprojektowanego kafla także po zwinięciu
     siatki do jednej kolumny. */
  #wkrety .pp-grid-4 .pp-offer-card > .pp-plate {
    height: auto !important;
    aspect-ratio: 296 / 250;
  }

  /* Gwoździarka w sekcji „Nasza marka” ma pionowy, przezroczysty kadr.
     Ograniczenie szerokości na telefonie zostawia jej oddech po bokach i
     skraca dominującą dotąd wysokość zdjęcia. */
  .pp-brand-stage img {
    width: min(60vw, 240px) !important;
    max-width: 240px !important;
    height: auto !important;
  }

  .pp-legal__data { grid-template-columns: 1fr; }

  /* .pp-divider-col: druga/trzecia kolumna rzędu z pionową kreską-dzielnikiem
     (border-left) i lewym paddingiem robiącym miejsce na tę kreskę. Sensowne
     tylko obok sąsiada w tym samym wierszu — gdy pp-grid-3 zwija się do
     jednej kolumny, ten sam padding-left zostaje i wygląda jak przypadkowe
     wcięcie (patrz zrzut ekranu zgłoszenia). Zamieniamy pionową kreskę na
     poziomą między ułożonymi w stos blokami, tak jak w kartach oferty. */
  .pp-divider-col {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--line) !important;
    margin-top: 22px !important;
    padding-top: 22px !important;
  }

  .pp-footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .pp-footer-links {
    gap: 0 !important;
  }

  /* 44 px, nie 36 — to rekomendowany minimalny cel dotykowy (WCAG 2.5.5).
     Same linki mierzyły ~22 px wysokości, co dla kciuka jest za ciasne przy
     sześciu pozycjach jedna pod drugą. Powiększamy pole dotyku, nie tekst:
     gap kolumny zeruje się wyżej, więc rząd rośnie z 22 do 44 px, ale sam
     krój zostaje na 15 px i stopka nie zmienia charakteru. */
  .pp-footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    line-height: 1.45;
  }

  /* Ten sam problem w pasku dolnym (polityka prywatności / Facebook) —
     tam linki stoją w osobnym rzędzie i nie łapie ich reguła wyżej. */
  .pp-footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .pp-footer-offer .pp-footer-links {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px !important;
  }

  /* Logo + "Fasteners" + znaczek Green Max w jednym rzędzie flex bez zawijania
     nie mieszczą się razem w wąskiej kolumnie stopki (ten sam problem co przy
     wordmarku w sekcjach "Nasza marka"/"Marka, która..." — tam naprawiony
     przez width:100% na inline-flex, tu prościej: skoro stopka toleruje
     złamanie wiersza, znaczek po prostu spada niżej zamiast się przelewać). */
  .pp-footer-brand-row {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .pp-cookie__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
  }

  .pp-cookie__actions {
    width: 100%;
  }

  .pp-cookie__actions .pp-btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
    min-height: 50px;
    padding: 12px;
    font-size: 14px;
    letter-spacing: .04em;
    white-space: nowrap;
  }

  .pp-legal-toc a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Pasek rozwijania to na dotyku główny cel kliknięcia w tej sekcji —
     węższe marginesy, ale wysokość zostaje w normie 44 px. */
  .pp-models__toggle {
    padding: 16px;
    gap: 14px;
  }

  .pp-models__toggle-title {
    font-size: 17px;
  }

  .pp-models__toggle-meta {
    font-size: 14px;
  }

  .pp-models__panel {
    padding: 18px 14px 20px;
  }

  .pp-spec__scroll-hint {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 12px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .pp-spec__scroll-hint span {
    font-size: 20px;
    color: var(--accent-ink);
  }

  .pp-spec__viewport::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    width: 38px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--band));
  }

  .pp-lightbox { padding: 16px; }

  /* Domyślny wygląd (8% biały na przezroczystym tle) liczy na :hover, żeby
     w ogóle było widać okrąg przycisku — na dotyku hover nigdy się nie
     uruchamia, więc strzałki zostawały praktycznie niewidoczne na stałe.
     Na mobile dostają więc trwałe, nieprzezroczyste tło zamiast czekać na
     interakcję, której na tym urządzeniu nie będzie. */
  .pp-lightbox__nav {
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, .55);
    border-color: rgba(255, 255, 255, .5);
  }
  .pp-lightbox__nav--prev { left: 8px; }
  .pp-lightbox__nav--next { right: 8px; }
  .pp-lightbox__close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    background: rgba(0, 0, 0, .55);
    border-color: rgba(255, 255, 255, .5);
  }
}

@media (max-width: 359px) {
  .pp-footer-grid {
    grid-template-columns: 1fr !important;
    grid-template-areas: "brand" "pages" "contact" "offer";
  }

  .pp-cookie__actions {
    flex-direction: column;
  }

  .pp-footer-offer .pp-footer-links {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="dark"] main {
    background-attachment: scroll, scroll, scroll;
  }

  .pp-rise,
  .pp-fade-in {
    animation: none;
  }

  .pp-embed-gate.is-loading::after {
    animation: none;
  }

  .pp-hamburger,
  .pp-hamburger__bar,
  .pp-mobile-nav {
    transition: none;
  }

  /* strzałka przy rozwijanej tabeli modeli — obraca się skokowo */
  .pp-models__toggle-icon {
    transition: background .2s;
  }

  .pp-hamburger:hover {
    transform: none;
  }

  /* przejście motywu też jest ruchem — przy tym ustawieniu przełączamy skokowo */
  body,
  section,
  article,
  footer,
  header,
  .pp-theme-toggle__screw {
    transition: none;
  }

  .pp-nav-plate {
    transition: none;
  }

  .pp-nav-plate__chevron,
  .pp-nav-submenu,
  .pp-nav-submenu a,
  .pp-nav-submenu a::before {
    transition: none;
  }

  .pp-offer-card,
  .pp-group-card,
  .pp-group-card__content,
  .pp-group-card__description,
  .pp-group-card__media img {
    transition: none;
  }

  .pp-group-card:hover,
  .pp-group-card:focus-visible {
    transform: none;
  }

  .pp-nav-plate:hover {
    transform: none;
  }

  .pp-feature {
    transition: none;
  }

  .pp-feature:hover {
    transform: none;
  }

  .pp-btn {
    transition: none;
  }

  .pp-btn:hover {
    transform: none;
  }

  /* przesuw strzałki to ruch dekoracyjny — sama zmiana koloru zostaje,
     bo to ona niesie informację o stanie kontrolki */
  .pp-link-arrow,
  .pp-link-arrow__arrow,
  .pp-btn__arrow {
    transition: none;
  }

  .pp-link-arrow:hover .pp-link-arrow__arrow,
  .pp-btn:hover .pp-btn__arrow {
    transform: none;
  }

  .pp-cookie {
    transition: none;
    transform: none;
  }

  .pp-review-card,
  .pp-reviews__control {
    transition: none;
  }

  .pp-review-card:hover,
  .pp-reviews__control:hover,
  .pp-reviews__control:focus-visible {
    transform: none;
  }

  .pp-reviews__motion span {
    animation: none;
  }
}

/* Na ekranach 320–360 px pełny zestaw dwóch znaków nadal się mieści, ale
   domyślny margines wordmarku Green Max zabierał cały odstęp przed
   hamburgerem. Mniejszy margines i cap SVG zachowują oba znaki bez styku. */
@media (max-width: 360px) {
  .pp-header-brandmark {
    margin-left: 14px !important;
  }

  .pp-header-brandmark svg {
    max-width: 64px !important;
  }
}

/* Długi CTA z hero zachowuje na telefonie proporcje między dużym wariantem
   desktopowym a małym przyciskiem pomocniczym. clamp() daje mu trochę więcej
   oddechu na szerszych telefonach, bez wypychania go poza ekran 320 px. */
@media (max-width: 480px) {
  .pp-btn--partnership {
    width: fit-content !important;
    max-width: 100%;
    min-height: 56px;
    gap: 10px;
    padding: 15px clamp(20px, 6vw, 25px);
    font-size: clamp(13.5px, 3.6vw, 14.5px);
    letter-spacing: .04em;
    white-space: nowrap;
  }

  .pp-btn--partnership .pp-btn__arrow {
    font-size: 19px;
  }
}