/* Konfigurator części BAPRO - maszyna → zespół → część, w estetyce układu A.
 *
 * Język wzorca: zero zaokrągleń, zero cieni, granatowe kontury, pomarańczowy akcent,
 * ukośne kreskowanie pod rysunkami, Yantramanav z ciasną interlinią w nagłówkach.
 * Wartości biorę z tokenów motywu (:root), bo wtyczka i motyw muszą mówić jednym
 * głosem; zapas po przecinku pozwala wtyczce działać także bez motywu.
 *
 * Czego temu arkuszowi NIE wolno zmienić, bo od tego zależy działanie narzędzia:
 *  • reguły `[hidden]` - JavaScript przestawia właściwość .hidden, a `[hidden]` z UA
 *    przegrywa z każdą regułą ustawiającą display; bez nich ukryte rysunki
 *    i odfiltrowane części byłyby widoczne,
 *  • klasy stanu pisane przez skrypt: is-active, is-open, is-zoom,
 *  • drabinka z-index: balon 3 < pin 4 < gęsty pin 6 < koszyk 20 < arkusz 120 < toast 200,
 *  • próg 980 px (sticky scena, lista z własnym przewijaniem) musi zostać spójny
 *    z progiem 979 px w konfigurator2.js (maleOkno),
 *  • czasy przejść sprzężone z setTimeout w skrypcie: arkusz .26s, toast .2s,
 *  • `transform-origin: 0 0` na warstwie rysunku - matematyka powiększania liczy
 *    od lewego górnego narożnika,
 *  • `container-type: inline-size` na liście części: o układzie wiersza decyduje
 *    szerokość kolumny, nie okna.
 *
 * Marginesu bocznego nie ustawia tu nic. Konfigurator stoi w .bp-container motywu
 * i bierze jego margines var(--bp-gutter) - jeden kontener i jeden margines
 * na całym serwisie.
 */

/* Toast jest dopinany do <body>, więc paleta musi obowiązywać także poza .bpk.
   Arkusz siedzi od teraz wewnątrz .bpk, ale selektor zostaje - nic nie kosztuje,
   a chroni przed powrotem starego układu znaczników. */
.bpk, .bpk-arkusz, .bpk-toast {
  /* marka */
  --k-pom:          var(--bp-orange, #FF5E14);
  --k-pom-hover:    var(--bp-orange-hover, #E4520E);
  --k-pom-tekst:    var(--bp-orange-dark, #CC4A0E);   /* drobny pomarańcz na jasnym - 4,61:1 */
  --k-pom-50:       var(--bp-orange-50, #FFF2EC);
  --k-granat:       var(--bp-ink, #001659);
  --k-granat-jasny: var(--bp-ink-light, #1E3C6F);
  --k-tekst:        var(--bp-gray-600, #565969);      /* TYLKO na jasnym tle - 6,93:1 */
  --k-tekst-ciemny: var(--bp-gray-400, #9CA5AF);      /* TYLKO na granacie - 6,68:1 */
  --k-linia:        var(--bp-gray-200, #DEDFE0);
  --k-linia-mocna:  var(--bp-gray-300, #C9CBD0);
  --k-tlo:          var(--bp-gray-100, #F5F6F8);
  --k-biel:         var(--bp-white, #FFFFFF);
  --k-ok:           var(--bp-success, #0F6B3A);
  --k-blad:         var(--bp-danger, #A3201A);

  /* typografia */
  --k-head:    var(--bp-font-head, Yantramanav, system-ui, sans-serif);
  --k-kod:     var(--bp-font-kod, Heebo, ui-monospace, Menlo, monospace);
  --k-fs-xs:   var(--bp-fs-xs, .8125rem);    /* 13 px - niżej nie schodzimy */
  --k-fs-sm:   var(--bp-fs-sm, .875rem);     /* 14 px - nadtytuły i etykiety */
  --k-fs-base: var(--bp-fs-base, 1.125rem);  /* 18 px - tekst */
  --k-fs-lg:   var(--bp-fs-lg, 1.1875rem);   /* 19 px - napis na pomarańczu, waga 700 */
  --k-ls-nad:  var(--bp-ls-nad, .1em);
  --k-ls-h2:   var(--bp-ls-h2, -.02em);

  /* przestrzeń - wyłącznie ze skali motywu */
  --k-s1: var(--bp-s1, 8px);
  --k-s2: var(--bp-s2, 16px);
  --k-s3: var(--bp-s3, 24px);
  --k-s4: var(--bp-s4, 40px);
  --k-s5: var(--bp-s5, 64px);

  /* kształt - zero promienia to najmocniejszy wyróżnik tej estetyki */
  --k-r: var(--bp-r, 0);
  --k-krata: var(--bp-krata, repeating-linear-gradient(135deg, rgba(0,22,89,.055) 0 1px, transparent 1px 8px));
  --k-krata-ciemna: var(--bp-krata-ciemna, repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 8px));
  --k-ease: var(--bp-ease, cubic-bezier(.22,.61,.36,1));

  font-family: var(--bp-font-body, inherit);
  color: var(--k-tekst);
  position: relative;
}
.bpk *, .bpk *::before, .bpk *::after { box-sizing: border-box; }
.bpk-toast, .bpk-toast *, .bpk-toast *::before { box-sizing: border-box; }
/* Tekst wyłącznie dla czytnika ekranu.
   `overflow: clip`, nie `hidden`: oba przycinają, ale „hidden" robi z pudełka
   pojemnik przewijany, a wtedy pomiar układu widzi w nim tekst ucięty bez
   możliwości przewinięcia. Samo `clip-path` nie wystarcza - niezawijany tekst
   zostaje wtedy w obszarze przewijania przodka i rozpycha stronę w poziomie
   (zmierzone: 547 px przy ekranie 375 px). `clip` przycina i nie zostawia
   po sobie przewijania. */
.bpk-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: clip; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Zero zaokrągleń obowiązuje bez wyjątku - numery i punkty na rysunku też są
   kwadratowe. Okrągły znacznik był konwencją katalogu części, ale estetyka
   zatwierdzona przez klienta stawia `border-radius: 0` wszędzie, a audyt układu
   liczy każdy promień jako usterkę poważną. */
.bpk :is(a, button, input, textarea, select, img, figure, article, section, span, div, label, p, h2, h3, ol, ul, li)
  { border-radius: var(--k-r); }

/* ---------- pierwszeństwo nad prozą motywu ---------- */
/* Konfigurator renderuje się w .bp-proza - warstwie, która stylizuje treść
   z edytora po samych znacznikach. Tamte selektory bywają bardziej szczegółowe
   niż pojedyncza klasa wtyczki i wygrywały z jej układem; zmierzone skutki:
   `.bp-proza li > a:only-child { display: inline-flex }` zwężało kafle zespołów
   i zbiorów do szerokości tekstu (289, 436, 245, 249, 359 px zamiast 688 px),
   `.bp-proza ol { padding-left: 1.5rem }` wcinało listę zespołów i okruszek,
   a `.bp-proza :is(p, ul, ol…) { max-width: var(--bp-measure) }` obcinało miarą
   czytelności bloki, o których szerokości decyduje struktura, nie oko czytelnika.
   Konfigurator nie jest prozą, więc odzyskuje swój układ jawnie wyższą
   szczegółowością - nie przez !important. */
.bpk .bpk-lista-zespolow, .bpk .bpk-zbiory, .bpk .bpk-sciezka__lista {
  list-style: none; margin: 0; padding: 0; max-width: none;
}
.bpk .bpk-zbiory { margin-top: var(--k-s2); }
.bpk .bpk-lista-zespolow > li, .bpk .bpk-zbiory > li, .bpk .bpk-sciezka__lista > li { margin: 0; max-width: none; }
.bpk .bpk-lista-zespolow > li > a.bpk-zespol,
.bpk .bpk-zbiory > li > a.bpk-zbior { display: flex; width: 100%; min-height: 0; }
.bpk .bpk-intro__opis { max-width: var(--bp-measure-lead, 46ch); }
.bpk .bpk-nad, .bpk .bpk-kod__pomoc, .bpk .bpk-przeglad__podpis { max-width: none; }
/* Odstępy nagłówków należą do komponentu, nie do rytmu prozy. */
.bpk .bpk-intro__tytul { margin: 0 0 var(--k-s2); }
.bpk .bpk-tytul { margin: 0 0 var(--k-s3); }
.bpk .bpk-dzial { margin: 0; }
.bpk .bpk-szybkie__tytul { margin: 0 0 var(--k-s2); }
.bpk .bpk-arkusz__nazwa { margin: 0; }

/* ---------- nadtytuł: 14 px / 500 / +0.1em z pomarańczową kreską 28×4 ---------- */
/* Kolor jest policzony: #CC4A0E na bieli daje 4,61:1 i przechodzi, #FF5E14 dałby
   3,06:1 i przy 14 px byłby poniżej normy. Na granacie odwrotnie - tam jaśniejszy. */
.bpk-nad {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 var(--k-s2);
  font-family: var(--k-head); font-size: var(--k-fs-sm); font-weight: 500;
  line-height: 1.4; letter-spacing: var(--k-ls-nad); text-transform: uppercase;
  color: var(--k-pom-tekst);
}
.bpk-nad::before { content: ''; flex: none; width: 28px; height: 4px; background: var(--k-pom); }
.bpk-nad--ciemny { color: var(--k-pom); }

/* ---------- nagłówki ---------- */
.bpk-intro { margin-bottom: var(--k-s4); }
.bpk-intro__tytul {
  font-family: var(--k-head); font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  line-height: .98; letter-spacing: var(--k-ls-h2);
  color: var(--k-granat); margin: 0 0 var(--k-s2); max-width: 24ch;
}
.bpk-intro__opis {
  margin: 0; font-size: var(--bp-fs-lead, 1.1875rem); font-weight: 300; line-height: 1.4;
  color: var(--k-tekst); max-width: var(--bp-measure-lead, 46ch); text-wrap: pretty;
}

/* Znacznik rozdziału: nadtytuł, nagłówek i kreska na całą szerokość kolumny. */
.bpk-rozdzial {
  margin: var(--k-s5) 0 var(--k-s3);
  padding-top: var(--k-s3);
  border-top: 1px solid var(--k-linia);
}
.bpk-dzial {
  font-family: var(--k-head); font-weight: 700;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  line-height: 1.02; letter-spacing: var(--k-ls-h2);
  color: var(--k-granat); margin: 0; max-width: 24ch;
}

/* ---------- wejście po kodzie katalogowym ---------- */
/* Granat z umiarem. `.bpk-kod` jest tylko na ekranie wyboru maszyny,
   `.bpk-koszyk` tylko na ekranie części - nigdy nie stoją na tej samej stronie,
   więc każdy ekran konfiguratora ma dokładnie jedną ciemną płaszczyznę
   poza granatową stopką. */
/* Odstęp wewnętrzny bierzemy z tokenu marginesu strony, nie ze skali pionowej:
   kafel na wąskim ekranie zajmuje całą szerokość, więc jego treść musi wyrównać się
   z treścią sąsiednich sekcji. Dwa różne odstępy na ten sam margines widać od razu. */
.bpk-kod {
  background-color: var(--k-granat); background-image: var(--k-krata-ciemna);
  color: var(--k-tekst-ciemny);
  padding: var(--bp-gutter, 16px); margin-bottom: var(--k-s4);
}
/* Link w granatowym bloku: dziedziczył granat z reguły dla jasnego tła i był
   niewidoczny (zostawało samo pomarańczowe podkreślenie). Biel + pomarańcz,
   jak w sekcjach --ink motywu. */
/* Szczegółowość (0,3,1): arkusz motywu ładuje się później i `.bp-proza :is(p, li) a`
   wygrywało z `.bpk-kod a` równą wagą. */
.bpk .bpk-kod a { color: var(--k-tekst-ciemny, #fff); text-decoration-color: var(--bp-orange, #FF5E14); text-underline-offset: 3px; }
.bpk .bpk-kod a:hover, .bpk .bpk-kod a:focus-visible { color: var(--bp-orange, #FF5E14); }
.bpk-kod__form { display: grid; gap: var(--k-s2); }
@media (min-width: 640px) { .bpk-kod__form { grid-template-columns: minmax(0, 1fr) auto; } }
.bpk-kod__pole { position: relative; display: block; }
.bpk-kod__ikona {
  position: absolute; left: var(--k-s2); top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; color: var(--k-granat); pointer-events: none;
}
.bpk-kod__pole input {
  width: 100%; min-height: 60px; padding: var(--k-s1) var(--k-s2) var(--k-s1) 52px;
  font-family: var(--k-kod); font-size: var(--k-fs-lg); font-weight: 700; letter-spacing: .02em;
  border: 2px solid var(--k-biel); background: var(--k-biel); color: var(--k-granat);
}
.bpk-kod__pole input::placeholder { color: var(--k-tekst); font-weight: 400; }
.bpk-kod__pole input:focus-visible { outline: 3px solid var(--k-pom); outline-offset: 2px; }
.bpk-kod__pomoc { margin: var(--k-s2) 0 0; font-size: var(--k-fs-xs); color: var(--k-tekst-ciemny); }
.bpk-kod__pomoc a { display: inline-flex; align-items: center; min-height: 44px; color: var(--k-biel); font-weight: 700; text-decoration-color: var(--k-pom); }
.bpk-kod__pomoc a:hover { color: var(--k-pom); }
.bpk-kod__wynik { margin-top: var(--k-s2); display: grid; gap: var(--k-s1); container-type: inline-size; }
.bpk-kod__wynik[hidden] { display: none; }
.bpk-kod__brak { background: var(--k-biel); padding: var(--k-s2); color: var(--k-tekst); font-size: var(--k-fs-xs); }
.bpk-kod__brak strong { display: block; margin-bottom: var(--k-s1); font-family: var(--k-head); font-size: var(--k-fs-base); color: var(--k-granat); }
.bpk-kod__brak a { color: var(--k-pom-tekst); font-weight: 700; }

/* Pas zdjęcia w konfiguratorze - kadr pokazujący, na czym polega wskazanie
   części. Proporcje niesie sam zastępnik (--bp-proporcje). Pas stoi POD
   blokiem „Zamawianie z listy kodów", nie między polem kodu a siatką maszyn:
   to strona-narzędzie i obie drogi do części mają mieścić się wyżej niż
   dekoracja wysoka na pełny ekran. */
.bpk-pas { margin: var(--k-s4) 0 0; }

/* Kod albo maszyna, których nie ma w katalogu. Pas stoi nad ekranem startowym,
   bo bez niego ten ekran wygląda jak strona, która się nie wczytała. */
.bpk-brak {
  background: var(--k-pom-50); border: 1px solid var(--k-pom); border-left-width: 5px;
  padding: var(--k-s2); margin: 0 0 var(--k-s3);
  font-size: var(--k-fs-sm); color: var(--k-tekst);
}
.bpk-brak strong { color: var(--k-granat); font-family: var(--k-kod); }
.bpk-brak a { color: var(--k-pom-tekst); font-weight: 700; white-space: nowrap; }

/* ---------- siatka maszyn: karta wzorca z listwą u dołu ---------- */
.bpk-maszyny { display: grid; gap: var(--k-s2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .bpk-maszyny { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .bpk-maszyny { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bpk-maszyna {
  position: relative; display: flex; flex-direction: column;
  text-decoration: none; color: inherit; background: var(--k-biel);
  border: 1px solid var(--k-linia);
  transition: border-color .22s var(--k-ease);
}
.bpk-maszyna:hover, .bpk-maszyna:focus-visible { border-color: var(--k-linia-mocna); color: inherit; }
/* Listwa 5 px wjeżdża od lewej - głębię robi obrys i listwa, nie cień,
   dlatego karta nie podskakuje i nic się nie powiększa. */
.bpk-maszyna::after, .bpk-zbior::after, .bpk-zespol::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: var(--k-pom); transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--k-ease); pointer-events: none;
}
.bpk-maszyna:hover::after, .bpk-maszyna:focus-visible::after { transform: scaleX(1); }
.bpk-maszyna__obraz {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background-color: var(--k-tlo); background-image: var(--k-krata);
  border-bottom: 1px solid var(--k-linia);
}
.bpk-maszyna__obraz img { width: 100%; height: 100%; object-fit: contain; padding: var(--k-s2); }
.bpk-maszyna__tresc { padding: var(--k-s3); display: grid; gap: var(--k-s1); }
.bpk-maszyna__tresc strong {
  font-family: var(--k-head); font-weight: 700;
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem);
  line-height: 1.04; letter-spacing: var(--k-ls-h2); color: var(--k-granat);
}
.bpk-maszyna__meta {
  font-family: var(--k-head); font-size: var(--k-fs-sm); font-weight: 500;
  letter-spacing: var(--k-ls-nad); text-transform: uppercase; color: var(--k-tekst);
}

/* Zbiory bez rysunku przeglądowego - np. części wspólne dla całej serii.
   Kafelek z pustym kadrem wyglądał jak błąd, więc idą listą. */
.bpk-zbiory { list-style: none; margin: var(--k-s2) 0 0; padding: 0; display: grid; gap: var(--k-s1); }
@media (min-width: 600px) { .bpk-zbiory { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bpk-zbior {
  position: relative; display: flex; align-items: baseline; gap: var(--k-s2); flex-wrap: wrap;
  min-height: 44px; padding: var(--k-s2) var(--k-s3); text-decoration: none; color: inherit;
  background: var(--k-biel); border: 1px solid var(--k-linia);
  transition: border-color .22s var(--k-ease);
}
.bpk-zbior:hover::after, .bpk-zbior:focus-visible::after { transform: scaleX(1); }
.bpk-zbior:hover, .bpk-zbior:focus-visible { border-color: var(--k-linia-mocna); color: inherit; }
.bpk-zbior strong { font-family: var(--k-head); font-size: var(--k-fs-base); font-weight: 700; line-height: 1.1; color: var(--k-granat); }
.bpk-zbior span { font-size: var(--k-fs-xs); color: var(--k-tekst); }

/* ---------- ścieżka i tytuł ekranu ---------- */
.bpk-sciezka { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-s2); margin-bottom: var(--k-s3); }
.bpk-sciezka__wstecz {
  display: inline-flex; align-items: center; gap: var(--k-s1);
  min-height: 44px; padding: 0 var(--k-s2);
  border: 2px solid var(--k-granat); background: var(--k-biel); text-decoration: none;
  font-family: var(--k-head); font-weight: 700; font-size: var(--k-fs-sm);
  letter-spacing: .04em; text-transform: uppercase; color: var(--k-granat);
  transition: background .22s var(--k-ease), color .22s var(--k-ease);
}
.bpk-sciezka__wstecz:hover { background: var(--k-granat); color: var(--k-biel); }
.bpk-sciezka__lista { display: none; list-style: none; margin: 0; padding: 0; gap: var(--k-s1); font-size: var(--k-fs-xs); color: var(--k-tekst); }
.bpk-sciezka__lista li { display: flex; align-items: center; gap: var(--k-s1); }
.bpk-sciezka__lista li:not(:last-child)::after { content: '›'; color: var(--k-linia-mocna); }
/* Cel dotykowy 44 px dotyczy także okruszka - ta lista jest widoczna już od 720 px,
   a norma obowiązuje do 1024 px. */
.bpk-sciezka__lista a, .bpk-sciezka__lista span {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--k-tekst); text-decoration-color: var(--k-linia-mocna);
}
.bpk-sciezka__lista a:hover { color: var(--k-pom-tekst); }
@media (min-width: 720px) { .bpk-sciezka__lista { display: flex; } }

.bpk-tytul {
  font-family: var(--k-head); font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.25rem);
  line-height: .98; letter-spacing: var(--k-ls-h2);
  color: var(--k-granat); margin: 0 0 var(--k-s3); max-width: 24ch;
}

/* ---------- przełącznik trybu: kwadratowe zakładki w granatowym konturze ---------- */
.bpk-tryby, .bpk-scena__karty {
  display: flex; flex-wrap: wrap; margin-bottom: var(--k-s3);
  border: 2px solid var(--k-granat); width: fit-content; max-width: 100%;
}
.bpk-tryb {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--k-s3); text-decoration: none;
  font-family: var(--k-head); font-weight: 700; font-size: var(--k-fs-sm);
  letter-spacing: .04em; text-transform: uppercase; color: var(--k-granat);
  transition: background .22s var(--k-ease), color .22s var(--k-ease);
}
.bpk-tryb + .bpk-tryb { border-left: 2px solid var(--k-granat); }
.bpk-tryb:hover { background: var(--k-tlo); color: var(--k-granat); }
.bpk-tryb.is-active { background: var(--k-granat); color: var(--k-biel); }

/* ---------- wybór zespołu ---------- */
.bpk-zespoly { display: grid; gap: var(--k-s3); }
@media (min-width: 900px) { .bpk-zespoly { grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); align-items: start; gap: var(--k-s4); } }

/* Rysunek bez ani jednego punktu do kliknięcia jest ilustracją, nie narzędziem.
   Wtedy to lista zespołów idzie pierwsza - w drzewie dokumentu, więc kolejność
   czytania i oglądania są te same - a rysunek dostaje węższą kolumnę. */
@media (min-width: 900px) {
  .bpk-zespoly--lista-pierwsza { grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr); }
}
.bpk-przeglad--bez-punktow .bpk-przeglad__plotno { touch-action: auto; }

.bpk-przeglad { margin: 0; border: 1px solid var(--k-linia); background: var(--k-biel); }
.bpk-przeglad__kadr { position: relative; }
/* Punkt odniesienia powiększenia: lewy górny narożnik. Bez tego przeglądarka
   bierze 50% 50%, a matematyka przesuwania w konfigurator2.js liczy od 0 0 - rysunek uciekał wtedy w bok przy każdym powiększeniu. */
.bpk-przeglad__plotno {
  position: relative; overflow: hidden; touch-action: pan-y pinch-zoom;
  padding: var(--k-s3);
  background-color: var(--k-biel); background-image: var(--k-krata);
  transform-origin: 0 0;
}
.bpk-przeglad__img { width: 100%; height: auto; display: block; transform-origin: 0 0; }
.bpk-przeglad__podpis {
  padding: var(--k-s2); font-size: var(--k-fs-xs); color: var(--k-tekst);
  background: var(--k-tlo); border-top: 1px solid var(--k-linia); margin: 0;
}

.bpk-lista-zespolow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--k-s1); }
.bpk-zespol {
  position: relative; display: flex; align-items: center; gap: var(--k-s2);
  padding: var(--k-s2); min-height: 72px;
  border: 1px solid var(--k-linia); background: var(--k-biel);
  text-decoration: none; color: inherit;
  transition: border-color .22s var(--k-ease);
}
.bpk-zespol:hover::after, .bpk-zespol:focus-visible::after, .bpk-zespol.is-active::after { transform: scaleX(1); }
.bpk-zespol:hover, .bpk-zespol:focus-visible, .bpk-zespol.is-active { border-color: var(--k-linia-mocna); color: inherit; }
.bpk-zespol__nr {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--k-granat); color: var(--k-biel);
  font-family: var(--k-head); font-weight: 700; font-size: var(--k-fs-base);
  transition: background .22s var(--k-ease), color .22s var(--k-ease);
}
.bpk-zespol:hover .bpk-zespol__nr, .bpk-zespol.is-active .bpk-zespol__nr { background: var(--k-pom); color: var(--k-granat); }
.bpk-zespol__tresc { flex: 1; min-width: 0; display: grid; gap: var(--k-s1); }
.bpk-zespol__tresc strong {
  font-family: var(--k-head); font-size: var(--k-fs-base); font-weight: 700;
  line-height: 1.1; letter-spacing: var(--k-ls-h2); color: var(--k-granat);
}
.bpk-zespol__meta { font-size: var(--k-fs-xs); color: var(--k-tekst); }
.bpk-dostepne { color: var(--k-ok); font-weight: 700; }
.bpk-kropka { color: var(--k-linia-mocna); }
.bpk-zespol__strzalka { flex: none; color: var(--k-pom-tekst); font-size: 1.5rem; line-height: 1; transition: transform .22s var(--k-ease); }
.bpk-zespol:hover .bpk-zespol__strzalka { transform: translateX(6px); }

/* ---------- obszar roboczy: rysunek + lista ---------- */
.bpk-praca { display: grid; gap: var(--k-s3); align-items: start; }
/* Próg 980 px jest sprzężony z maleOkno() w konfigurator2.js (979 px) - rozjechanie
   ich sprawi, że arkusz mobilny zacznie się otwierać na desktopie.
   `max-height` z własnym przewijaniem jest też tym, co sprawia, że
   scrollIntoView({block:'nearest'}) przewija LISTĘ, a nie całą stronę. */
@media (min-width: 980px) {
  .bpk-praca { grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: var(--k-s4); }
  .bpk-scena, .bpk-praca--lista .bpk-plotno { position: sticky; top: var(--k-s2); }
}

.bpk-scena__karty { overflow-x: auto; margin-bottom: var(--k-s2); }
.bpk-scena__karty button {
  flex: none; min-height: 44px; padding: 0 var(--k-s3); border: 0; background: var(--k-biel);
  font-family: var(--k-head); font-weight: 700; font-size: var(--k-fs-sm);
  letter-spacing: .04em; text-transform: uppercase; color: var(--k-granat); cursor: pointer;
}
.bpk-scena__karty button + button { border-left: 2px solid var(--k-granat); }
.bpk-scena__karty button.is-active { background: var(--k-granat); color: var(--k-biel); }

.bpk-plotno { margin: 0; border: 1px solid var(--k-linia); background: var(--k-biel); position: relative; }
.bpk-plotno[hidden] { display: none; }
/* Kreskowanie pod rysunkiem: rysunek złożeniowy leży na teksturze, nie na pustce. */
/* Zapas na znaczniki stojące na krawędzi rysunku. Punkt jest wyśrodkowany na swojej
   współrzędnej, więc połowa jego szerokości wychodzi poza obrazek - bez tego zapasu
   skrajny znacznik był przycinany przez `overflow: hidden` (zmierzone: 13 px ucięcia). */
.bpk-plotno__ramka {
  position: relative; overflow: hidden; touch-action: pan-y pinch-zoom;
  padding: var(--k-s3);
  background-color: var(--k-biel); background-image: var(--k-krata);
  transform-origin: 0 0;
}
.bpk-plotno__img { width: 100%; height: auto; display: block; transform-origin: 0 0; }
.bpk-plotno--statyczny .bpk-plotno__ramka { touch-action: auto; }

/* Warstwa skalowana obejmuje rysunek RAZEM z punktami.
   Punkt jest pozycjonowany procentowo względem swojego rodzica, więc dopóki
   powiększenie dotykało samego <img>, rysunek rósł, a piny stały w miejscu.
   Odwrotność skali dla punktów wchodzi przez --k-skala, którą skrypt ustawia
   na ramce - dzięki temu `transform` punktu zostaje w arkuszu i reguła :hover
   nadal działa po powiększeniu. */
.bpk-plotno__ramka, .bpk-przeglad__plotno { --k-skala: 1; }
.bpk-warstwa {
  position: relative; display: block; width: 100%;
  transform-origin: 0 0;
  transition: transform .18s ease-out;
}
.bpk-plotno.is-zoom .bpk-warstwa, .bpk-przeglad.is-zoom .bpk-warstwa { transition: none; }

/* ---------- punkty na rysunku i numery zespołów ---------- */
/* Cel dotykowy ma 44 px, a znacznik w środku jest mniejszy - norma dotyczy
   obszaru dotyku, nie rysunku. Powyżej 1024 px (mysz) znacznik może być ciaśniejszy,
   bo kursor trafia dokładniej niż palec. Przy powiększeniu punkty rozjeżdżają się
   razem z rysunkiem, więc nakładające się obszary dotyku same się rozsuwają. */
/* Odwrotność skali NIE jest przechodzona. Gdy `transform` punktu miał przejście,
   każdy krok powiększenia rozdymał znacznik do pełnej skali rysunku i dopiero
   po 140 ms ściągał go z powrotem - zmierzone: 99 px zamiast 44 px.
   Reakcja na najechanie siedzi więc na znaczniku w środku, nie na obszarze dotyku:
   jego powiększenie składa się z odwrotnością skali i daje stały efekt
   przy każdym powiększeniu rysunku. */
.bpk-pin, .bpk-balon {
  position: absolute; width: 44px; height: 44px; padding: 0; margin: 0;
  display: grid; place-items: center; background: none; border: 0;
  text-decoration: none; cursor: pointer; line-height: 1;
  transform: translate(-50%, -50%) scale(calc(1 / var(--k-skala, 1)));
}
.bpk-pin__kod, .bpk-balon__nr {
  /* Nakładka na rysunku, nie element w toku tekstu. Dwa znaczniki blisko siebie
     na schemacie MOGĄ się stykać - odpowiedzią jest powiększenie rysunku, które
     je rozsuwa, a nie przerzedzanie katalogu. Dlatego znacznik jest wyjęty
     z toku i wyśrodkowany na swoim punkcie. */
  position: absolute; left: 50%; top: 50%;
  pointer-events: none; display: grid; place-items: center;
  min-width: 30px; min-height: 28px; padding: 0 6px;
  font-family: var(--k-kod); font-size: var(--k-fs-xs); font-weight: 700; line-height: 1;
  border: 2px solid var(--k-biel); white-space: nowrap;
  background: var(--k-pom); color: var(--k-granat);   /* granat na pomarańczu - 5,45:1 */
  transform: translate(-50%, -50%);
  transition: transform .14s var(--k-ease), background .14s var(--k-ease), color .14s var(--k-ease);
}
.bpk-pin:hover .bpk-pin__kod, .bpk-pin:focus-visible .bpk-pin__kod,
.bpk-balon:hover .bpk-balon__nr, .bpk-balon:focus-visible .bpk-balon__nr { transform: translate(-50%, -50%) scale(1.15); }
/* Punkt bez produktu w sklepie: pusty kontur, nie kolorowa plama. */
.bpk-pin.is-brak .bpk-pin__kod { background: var(--k-biel); color: var(--k-granat); border-color: var(--k-granat); }
/* Pozycja na zamówienie: granat z bielą - 16,68:1. */
.bpk-pin.is-niedostepny .bpk-pin__kod { background: var(--k-granat); color: var(--k-biel); }
.bpk-pin:hover, .bpk-pin:focus-visible { z-index: 5; }
.bpk-pin.is-active { z-index: 4; }
.bpk-pin.is-active .bpk-pin__kod { background: var(--k-granat); color: var(--k-biel); border-color: var(--k-pom); outline: 3px solid var(--k-pom); }
.bpk-pin:focus-visible .bpk-pin__kod, .bpk-balon:focus-visible .bpk-balon__nr { outline: 3px solid var(--k-pom); outline-offset: 2px; }

.bpk-balon__nr { background: var(--k-granat); color: var(--k-biel); min-width: 34px; min-height: 32px; font-size: var(--k-fs-sm); }
.bpk-balon:hover .bpk-balon__nr, .bpk-balon:focus-visible .bpk-balon__nr, .bpk-balon.is-active .bpk-balon__nr { background: var(--k-pom); color: var(--k-granat); }
.bpk-balon.is-active { z-index: 3; }

@media (min-width: 1025px) {
  .bpk-pin, .bpk-balon { width: 34px; height: 34px; }
}

/* Rysunki z dużą liczbą pozycji (powyżej 25 punktów): widać kwadracik, kod
   pojawia się po dotknięciu. Obszar dotyku zostaje pełne 44 px - zmniejsza się
   tylko to, co widać. Kod chowamy przez `visibility`, nie przez zerowy stopień
   pisma: tekst o rozmiarze 0 jest nadal tekstem w drzewie i mierzy się
   jako nieczytelny. */
.bpk-plotno--gesty .bpk-pin::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; background: var(--k-pom); border: 2px solid var(--k-biel);
}
.bpk-plotno--gesty .bpk-pin.is-brak::before { background: var(--k-biel); border-color: var(--k-granat); }
.bpk-plotno--gesty .bpk-pin.is-niedostepny::before { background: var(--k-granat); }
.bpk-plotno--gesty .bpk-pin__kod { visibility: hidden; }
.bpk-plotno--gesty .bpk-pin:hover::before,
.bpk-plotno--gesty .bpk-pin:focus-visible::before,
.bpk-plotno--gesty .bpk-pin.is-active::before { display: none; }
.bpk-plotno--gesty .bpk-pin:hover .bpk-pin__kod,
.bpk-plotno--gesty .bpk-pin:focus-visible .bpk-pin__kod,
.bpk-plotno--gesty .bpk-pin.is-active .bpk-pin__kod { visibility: visible; }
.bpk-plotno--gesty .bpk-pin:hover, .bpk-plotno--gesty .bpk-pin.is-active,
.bpk-plotno--gesty .bpk-pin:focus-visible { z-index: 6; }

/* ---------- lupa: kwadratowe przyciski, jeden obok drugiego ---------- */
.bpk-lupa { position: absolute; right: var(--k-s2); bottom: var(--k-s2); display: flex; border: 2px solid var(--k-granat); }
.bpk-lupa button {
  width: 44px; height: 44px; border: 0; background: var(--k-biel);
  font-family: var(--k-head); font-size: var(--k-fs-lg); font-weight: 700; line-height: 1;
  color: var(--k-granat); cursor: pointer;
}
.bpk-lupa button + button { border-left: 2px solid var(--k-granat); }
.bpk-lupa button:hover { background: var(--k-granat); color: var(--k-biel); }
.bpk-podpowiedz { font-size: var(--k-fs-xs); color: var(--k-tekst); margin: var(--k-s2) 0 0; max-width: var(--bp-measure, 68ch); }

/* ---------- lista części ---------- */
.bpk-lista { display: grid; gap: var(--k-s1); container-type: inline-size; }
/* Lista płynie z stroną. Wcześniej miała własne okienko przewijania
   (max-height: 78vh; overflow-y: auto), które przy wysokich oknach wypychało
   wiersze geometrycznie poza kadr - pomiar układu widział je jako nachodzące
   na stopkę i menu, bo przycięcia przez overflow nie da się zmierzyć.
   Para „punkt na rysunku - wiersz listy" działa nadal: rysunek jest przypięty
   (position: sticky), więc scrollIntoView({block:'nearest'}) w podswietl()
   przewija stronę do wiersza, a schemat zostaje na oczach. */
.bpk-lista__szukaj input, .bpk-lista__narzedzia input[type="search"] {
  width: 100%; min-height: 52px; padding: var(--k-s1) var(--k-s2);
  font-family: inherit; font-size: var(--k-fs-base);
  border: 2px solid var(--k-granat); background: var(--k-biel); color: var(--k-granat);
}
.bpk-lista__szukaj input::placeholder, .bpk-lista__narzedzia input::placeholder { color: var(--k-tekst); }
.bpk-lista__narzedzia { display: flex; flex-wrap: wrap; gap: var(--k-s1); align-items: stretch; }
.bpk-lista__narzedzia input[type="search"] { flex: 1 1 200px; }
/* Pole wyboru jest schowane, a celem dotykowym jest etykieta: sam `input`
   miał 20 px i nie spełniał normy 44 px, której nie da się spełnić kwadracikiem. */
.bpk-filtr {
  position: relative; display: inline-flex; align-items: center; gap: var(--k-s1);
  min-height: 52px; padding: 0 var(--k-s2); cursor: pointer;
  border: 2px solid var(--k-granat); background: var(--k-biel);
  font-family: var(--k-head); font-size: var(--k-fs-sm); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--k-granat);
}
.bpk-filtr input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bpk-filtr span { display: inline-flex; align-items: center; gap: var(--k-s1); }
.bpk-filtr span::before {
  content: ''; flex: none; width: 22px; height: 22px;
  border: 2px solid var(--k-granat); background: var(--k-biel);
}
.bpk-filtr input:checked + span::before { background: var(--k-pom); border-color: var(--k-pom); }
.bpk-filtr:has(input:focus-visible) { outline: 3px solid var(--k-pom); outline-offset: 2px; }

.bpk-czesc {
  position: relative;
  display: grid; grid-template-columns: auto 64px minmax(0, 1fr); gap: var(--k-s1) var(--k-s2);
  align-items: center; padding: var(--k-s2);
  border: 1px solid var(--k-linia); background: var(--k-biel);
  transition: border-color .22s var(--k-ease);
}
.bpk-czesc[hidden] { display: none; }
.bpk-czesc:hover { border-color: var(--k-linia-mocna); }
.bpk-czesc.is-active { border-color: var(--k-granat); background: var(--k-pom-50); }
.bpk-czesc.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--k-pom);
}
/* Pole wyboru pozycji: ta sama zamiana co w filtrze - etykieta jest celem dotykowym. */
.bpk-czesc__pick { position: relative; grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.bpk-czesc__pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bpk-czesc__pick::before { content: ''; width: 22px; height: 22px; border: 2px solid var(--k-granat); background: var(--k-biel); }
.bpk-czesc__pick:has(input:checked)::before { background: var(--k-pom); border-color: var(--k-pom); }
.bpk-czesc__pick:has(input:disabled)::before { border-color: var(--k-linia); }
.bpk-czesc__pick:has(input:focus-visible) { outline: 3px solid var(--k-pom); outline-offset: 2px; }

.bpk-czesc__kod {
  grid-column: 1; align-self: center;
  font-family: var(--k-kod); font-size: var(--k-fs-xs); font-weight: 700; letter-spacing: .02em;
  background: var(--k-granat); color: var(--k-biel);
  padding: var(--k-s1); white-space: nowrap; line-height: 1;
}
.bpk-czesc__obraz { grid-column: 2; }
.bpk-czesc__obraz img, .bpk-czesc__obraz--pusty {
  width: 64px; height: 64px; object-fit: contain; display: block;
  background-color: var(--k-tlo); background-image: var(--k-krata);
  border: 1px solid var(--k-linia);
}
.bpk-czesc__opis { grid-column: 3; min-width: 0; display: grid; gap: var(--k-s1); }
.bpk-czesc__nazwa { font-size: var(--k-fs-base); font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; color: var(--k-granat); }
/* Nazwa jest linkiem do karty produktu, więc sama musi mieć 44 px wysokości. */
.bpk-czesc__nazwa a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--k-granat); text-decoration-color: var(--k-linia-mocna); }
.bpk-czesc__nazwa a:hover { color: var(--k-pom-tekst); text-decoration-color: var(--k-pom); }
.bpk-czesc__cena { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--k-s1); }
.bpk-czesc__cena strong { font-family: var(--k-head); font-size: 1.375rem; font-weight: 700; color: var(--k-granat); line-height: 1; }
.bpk-czesc__cena small { color: var(--k-tekst); font-size: var(--k-fs-xs); }
.bpk-czesc__brutto { width: 100%; font-size: var(--k-fs-xs); color: var(--k-tekst); }
.bpk-czesc__pytaj { font-family: var(--k-head); font-size: var(--k-fs-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--k-pom-tekst); margin: 0; }
.bpk-czesc__akcja { grid-column: 2 / -1; display: flex; gap: var(--k-s1); align-items: center; justify-content: flex-end; flex-wrap: wrap; }

/* O układzie wiersza decyduje szerokość samej listy, nie okna - lista bywa
   wąską kolumną obok rysunku. */
@container (min-width: 560px) {
  .bpk-czesc { grid-template-columns: auto 64px minmax(0, 1fr) auto auto; }
  .bpk-czesc__cena { grid-column: 4; flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }
  .bpk-czesc__brutto { width: auto; }
  .bpk-czesc__akcja { grid-column: 5; }
}
@container (max-width: 559px) {
  .bpk-czesc { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--k-s1); }
  .bpk-czesc__obraz { grid-column: 1; }
  .bpk-czesc__obraz img, .bpk-czesc__obraz--pusty { width: 56px; height: 56px; }
  .bpk-czesc__opis { grid-column: 2; }
  .bpk-czesc__kod { grid-column: 1 / -1; justify-self: start; }
  .bpk-czesc__cena { grid-column: 1 / -1; flex-direction: row; align-items: baseline; }
  .bpk-czesc__akcja { grid-column: 1 / -1; justify-content: flex-start; }
}

.bpk-stan {
  font-family: var(--k-head); font-size: var(--k-fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--k-s1);
}
.bpk-stan::before { content: ''; flex: none; width: 8px; height: 8px; background: currentColor; }
.bpk-stan--dostepny { color: var(--k-ok); }
.bpk-stan--na-zamowienie { color: var(--k-pom-tekst); }
.bpk-stan--brak { color: var(--k-tekst); }
/* Na podświetlonym wierszu tło jest pomarańczowym pudrem, a na nim #CC4A0E daje
   tylko 4,21:1 - poniżej 4,5:1 wymaganych dla 13 px. Granat trzyma tam 14,6:1,
   a wiersz i tak jest rozpoznawalny po granatowym obrysie i pomarańczowej listwie. */
.bpk-czesc.is-active .bpk-stan--na-zamowienie,
.bpk-czesc.is-active .bpk-czesc__pytaj { color: var(--k-granat); }

/* ---------- ilość i przyciski ---------- */
.bpk-ilosc { display: inline-flex; align-items: stretch; border: 2px solid var(--k-granat); }
.bpk-ilosc button {
  width: 44px; min-height: 44px; border: 0; background: var(--k-biel);
  font-family: var(--k-head); font-size: var(--k-fs-lg); font-weight: 700; line-height: 1;
  color: var(--k-granat); cursor: pointer;
}
.bpk-ilosc button:hover { background: var(--k-granat); color: var(--k-biel); }
.bpk-ilosc input {
  width: 52px; min-height: 44px; border: 0; border-inline: 2px solid var(--k-granat);
  text-align: center; font-family: var(--k-kod); font-weight: 700; font-size: var(--k-fs-base);
  color: var(--k-granat); -moz-appearance: textfield; appearance: textfield;
}
.bpk-ilosc input::-webkit-outer-spin-button, .bpk-ilosc input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Przycisk wzorca: pełne tło, zero obrysu, zero cienia, wersaliki.
   Biel na pomarańczu daje 3,06:1, czyli przechodzi dopiero od 19 px wagi 700 - dlatego stopień pisma jest tu częścią kontraktu dostępności, nie gustem. */
.bpk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--k-s1);
  min-height: 52px; padding: 0 var(--k-s3);
  border: 2px solid transparent; background: var(--k-pom); color: var(--k-biel);
  font-family: var(--k-head); font-size: var(--k-fs-lg); font-weight: 700; line-height: 1.1;
  letter-spacing: .04em; text-transform: uppercase; text-align: center; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: background .22s var(--k-ease), color .22s var(--k-ease), border-color .22s var(--k-ease);
}
.bpk-btn:hover { background: var(--k-pom-hover); color: var(--k-biel); }
.bpk-btn:active { translate: 0 1px; }
.bpk-btn:focus-visible { outline: 3px solid var(--k-granat); outline-offset: 3px; }
.bpk-btn i { font-style: normal; display: block; transition: transform .22s var(--k-ease); }
.bpk-btn:hover i { transform: translateX(6px); }
/* Wariant cichy: granatowy kontur i granatowy napis - przechodzi w każdym stopniu. */
.bpk-btn--cichy { background: var(--k-biel); border-color: var(--k-granat); color: var(--k-granat); }
.bpk-btn--cichy:hover { background: var(--k-granat); border-color: var(--k-granat); color: var(--k-biel); }
.bpk-btn--duzy { min-height: 60px; padding: 0 var(--k-s4); }
.bpk-btn[disabled] { background: var(--k-linia); color: var(--k-tekst); border-color: transparent; cursor: not-allowed; pointer-events: none; }

.bpk-pusto { text-align: center; padding: var(--k-s4) var(--k-s2); color: var(--k-tekst); font-size: var(--k-fs-base); }
.bpk-pusto[hidden] { display: none; }
.bpk-info {
  background: var(--k-pom-50); border: 1px solid var(--k-pom); border-left-width: 5px;
  padding: var(--k-s2); font-size: var(--k-fs-xs); color: var(--k-tekst);
}
.bpk-info a { color: var(--k-pom-tekst); font-weight: 700; }

/* ---------- szybkie zamawianie z listy kodów ---------- */
.bpk-szybkie {
  border: 1px solid var(--k-linia); padding: var(--bp-gutter, 16px);
  background-color: var(--k-biel); background-image: var(--k-krata); margin-top: var(--k-s5);
}
.bpk-szybkie__tytul {
  font-family: var(--k-head); font-weight: 700; margin: 0 0 var(--k-s2);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  line-height: 1.02; letter-spacing: var(--k-ls-h2); color: var(--k-granat); max-width: 24ch;
}
.bpk-szybkie__opis { margin: 0 0 var(--k-s3); color: var(--k-tekst); font-size: var(--k-fs-base); max-width: var(--bp-measure, 68ch); }
.bpk-szybkie__pola { display: grid; gap: var(--k-s2); }
@media (min-width: 720px) { .bpk-szybkie__pola { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.bpk-szybkie textarea {
  width: 100%; font-family: var(--k-kod); font-size: var(--k-fs-base); line-height: 1.7;
  padding: var(--k-s2); border: 2px solid var(--k-granat); background: var(--k-biel);
  color: var(--k-granat); resize: vertical; min-height: 140px;
}
.bpk-szybkie__wynik { margin-top: var(--k-s3); display: grid; gap: var(--k-s1); container-type: inline-size; }
.bpk-szybkie__wynik[hidden] { display: none; }
.bpk-szybkie__suma {
  display: flex; flex-wrap: wrap; gap: var(--k-s2); align-items: center; justify-content: space-between;
  padding: var(--k-s2) var(--k-s3); background: var(--k-granat); color: var(--k-tekst-ciemny);
  font-family: var(--k-head);
}
.bpk-szybkie__suma strong { font-size: 1.5rem; font-weight: 700; color: var(--k-biel); }
.bpk-nieznaleziony { border-color: var(--k-blad); background: var(--bp-danger-bg, #FBEAE9); }
.bpk-nieznaleziony .bpk-czesc__nazwa { color: var(--k-blad); }

/* ---------- arkusz ze szczegółami części ---------- */
/* Znaczniki arkusza siedzą WEWNĄTRZ .bpk - wszystkie listenery konfiguratora są
   delegowane na ten kontener, więc gdy arkusz stał obok niego jako rodzeństwo,
   przyciski „Do koszyka" i ± w panelu nie docierały do obsługi zdarzeń. */
.bpk-arkusz { position: fixed; inset: 0; z-index: 120; }
.bpk-arkusz[hidden] { display: none; }
.bpk-arkusz__tlo { position: absolute; inset: 0; background: rgba(0, 22, 89, .55); opacity: 0; transition: opacity .22s; }
.bpk-arkusz.is-open .bpk-arkusz__tlo { opacity: 1; }
.bpk-arkusz__panel {
  position: absolute; left: 0; right: 0; bottom: 0; background: var(--k-biel);
  border-top: 5px solid var(--k-pom);
  padding: var(--k-s2) var(--k-s3) calc(var(--k-s3) + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .26s var(--k-ease);
  max-height: 86vh; overflow-y: auto;
}
.bpk-arkusz.is-open .bpk-arkusz__panel { transform: translateY(0); }
@media (min-width: 720px) {
  .bpk-arkusz__panel {
    left: auto; right: var(--k-s4); bottom: var(--k-s4); width: 420px;
    border: 1px solid var(--k-granat); border-top: 5px solid var(--k-pom);
    transform: translateY(16px); opacity: 0; transition: transform .2s var(--k-ease), opacity .2s;
  }
  .bpk-arkusz.is-open .bpk-arkusz__panel { transform: translateY(0); opacity: 1; }
}
/* Uchwyt jest też przyciskiem zamknięcia, więc ma pełne 44 px celu dotykowego;
   widać z niego tylko kreskę. */
.bpk-arkusz__uchwyt {
  display: grid; place-items: center; width: 100%; height: 44px;
  margin: 0 0 var(--k-s2); border: 0; padding: 0; background: none; cursor: pointer;
}
.bpk-arkusz__uchwyt::before { content: ''; width: 56px; height: 4px; background: var(--k-granat); }
.bpk-arkusz__uchwyt:hover::before { background: var(--k-pom); }
.bpk-arkusz__tresc { display: grid; gap: var(--k-s2); }
.bpk-arkusz__naglowek { display: flex; gap: var(--k-s2); align-items: flex-start; }
.bpk-arkusz__glowa { display: grid; gap: var(--k-s1); justify-items: start; min-width: 0; }
.bpk-arkusz__foto, .bpk-arkusz__brak {
  width: 88px; height: 88px; flex: none; object-fit: contain; display: block;
  background-color: var(--k-tlo); background-image: var(--k-krata); border: 1px solid var(--k-linia);
}
.bpk-arkusz__nazwa {
  font-family: var(--k-head); font-size: 1.375rem; font-weight: 700; line-height: 1.08;
  letter-spacing: var(--k-ls-h2); color: var(--k-granat); margin: 0;
}
.bpk-arkusz__ceny { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--k-s1); }
.bpk-arkusz__ceny strong { font-family: var(--k-head); font-size: 2rem; font-weight: 700; line-height: 1; color: var(--k-granat); }
.bpk-arkusz__ceny small { font-size: var(--k-fs-xs); color: var(--k-tekst); }
.bpk-arkusz__akcje { display: flex; gap: var(--k-s1); align-items: center; flex-wrap: wrap; }
.bpk-arkusz__akcje .bpk-btn { flex: 1 1 auto; }
.bpk-arkusz__link { font-size: var(--k-fs-xs); margin: 0; }
.bpk-arkusz__link a {
  display: inline-flex; align-items: center; gap: var(--k-s1); min-height: 44px;
  color: var(--k-pom-tekst); font-family: var(--k-head); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.bpk-arkusz__link i { font-style: normal; transition: transform .22s var(--k-ease); }
.bpk-arkusz__link a:hover i { transform: translateX(6px); }

/* ---------- przypięty pasek koszyka: granatowa płaszczyzna ekranu części ---------- */
.bpk-koszyk {
  position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: var(--k-s2);
  align-items: center; justify-content: space-between; margin-top: var(--k-s4);
  padding: var(--k-s2) var(--k-s3) calc(var(--k-s2) + env(safe-area-inset-bottom));
  background: var(--k-granat); color: var(--k-tekst-ciemny);
  border-top: 5px solid var(--k-pom);
}
.bpk-koszyk[hidden] { display: none; }
.bpk-koszyk__stan { font-family: var(--k-head); font-size: var(--k-fs-sm); font-weight: 500; letter-spacing: var(--k-ls-nad); text-transform: uppercase; }
.bpk-koszyk__stan strong { font-size: 1.75rem; font-weight: 700; color: var(--k-pom); margin-right: var(--k-s1); letter-spacing: normal; }

/* ---------- powiadomienie ---------- */
.bpk-toast {
  position: fixed; left: 50%; bottom: var(--k-s3); transform: translateX(-50%) translateY(14px);
  background: var(--k-granat); color: var(--k-biel); border-left: 5px solid var(--k-pom);
  padding: var(--k-s2) var(--k-s3);
  font-family: var(--k-head); font-size: var(--k-fs-sm); font-weight: 500;
  opacity: 0; transition: opacity .2s, transform .2s; z-index: 200;
  max-width: calc(100vw - 2 * var(--bp-gutter, 16px)); text-align: center;
}
.bpk-toast.is-open { opacity: 1; transform: translateX(-50%) translateY(0); }
.bpk-toast--blad { background: var(--bp-danger, #A3201A); }

/* Ruch wyłączamy tam, gdzie go włączyliśmy. Motyw robi to globalnie przez tokeny,
   ale wtyczka musi działać także bez motywu. */
@media (prefers-reduced-motion: reduce) {
  .bpk *, .bpk *::before, .bpk *::after, .bpk-toast { transition-duration: .01ms !important; }
}

/* ---------- intro i szybkie zamówienie na pełną szerokość ---------- */
/* Nadtytuł, tytuł i opis stały jeden pod drugim w lewej połowie, a prawa
   zostawała pusta - ten sam problem co w czole strony. Od 1100 px tytuł
   zostaje po lewej, a opis staje OBOK NIEGO, nie obok nadtytułu: przy
   wyrównaniu do nadtytułu opis wygląda, jakby należał do innego bloku. */
@media (min-width: 1100px) {
  .bpk .bpk-intro,
  .bpk .bpk-szybkie {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 64px);
    row-gap: var(--k-s2, 16px);
    align-items: start;
  }

  /* Element, o którym ten arkusz nie wie, nie ma prawa wylądować
     w przypadkowym miejscu siatki. */
  .bpk .bpk-intro > *,
  .bpk .bpk-szybkie > * { grid-column: 1; min-width: 0; }

  .bpk .bpk-intro > .bpk-nad,
  .bpk .bpk-szybkie > .bpk-nad { grid-row: 1; }

  .bpk .bpk-intro__tytul,
  .bpk .bpk-szybkie__tytul { grid-row: 2; max-width: none; }

  .bpk .bpk-intro__opis,
  .bpk .bpk-szybkie__opis {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 0;
    max-width: none;
  }

  /* Pola szybkiego zamówienia idą pod spód, przez obie kolumny - formularz
     ma być szeroki, a nie wciśnięty w połowę szerokości. */
  .bpk .bpk-szybkie__pola,
  .bpk .bpk-szybkie__wynik { grid-column: 1 / -1; grid-row: auto; }
}