/* ============================================================
   KOLORY - narzedzie doboru kolorow (wtyczka bmpolska-pf_plugin)
   Ladowane na /kolory/ i podstronach - patrz bm-newlayout.php.

   CO TO ZA WIDOK:
   Cala tresc tych stron to jeden shortcode renderujacy '.pf-plugin'.
   Oxygen daje wylacznie baner i (ukryta juz) stopke. Zrodlo stylow to
   'proformat.css' (622 linie, uchwyt 'pf-css') plus 'custom.css'
   (uchwyt 'custom-css'). Nasz arkusz deklaruje zaleznosc od 'custom-css',
   wiec WordPress wypisze go PO obu - remisy specyficznosci wygrywamy
   kolejnoscia, bez !important.

   CZEGO CELOWO NIE RUSZAMY:
   - '.single-color', '.left-side' i siatki probek - kolory i wymiary
     ustawia tam JavaScript inline, a 'custom.css' juz raz przerabial
     ten uklad z poziomego na pionowy. Nadpisywanie = pewna regresja.
   - klas z sufiksem '-darker' ('.color-name-darker', '.color-more-darker',
     '.palette-header-darker') - to mechanizm KONTRASTU: skrypt dokleja je,
     gdy probka jest ciemna, zeby tekst na niej byl czytelny. Zmiana ich
     kolorow potrafi zrobic bialy tekst na bialym tle.
   Autor: claude, 2026-08-20.
   ============================================================ */

.pf-plugin {
    --navy:      #0B2240;
    --red:       #DB0632;
    --ink:       #171A1E;
    --muted:     #3F4750;
    --paper:     #FCFAF6;
    --cream:     #F5F1E9;
    --line:      rgba(11, 34, 64, .13);
    --line-soft: rgba(11, 34, 64, .07);
    /* cienie: tokeny '--shadow-*' sa na ':root' w 'bm-newhome.css' */
    --ease:      cubic-bezier(.22, 1, .36, 1);
    --serif:     "Playfair Display", Georgia, "Times New Roman", serif;
    --sans:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    font-family: var(--sans);
    font-weight: 300;
    color: var(--ink);
}

/* ---------- 1. Naglowek narzedzia --------------------------
   Zrodlo: '.pf-plugin h2 { font-family:Poppins; font-weight:300;
   margin-bottom:50px }'. */
body .pf-plugin h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.18;
    letter-spacing: -.01em;
    color: var(--navy);
    margin-bottom: 34px;
}

/* ---------- 2. Trzy kafelki wyboru (strona /kolory/) -------
   Zrodlo uklada je flexem 'space-between' ze sztywnymi 'width:30%'
   i 'height:300px'. Na waskim ekranie nie zawijaly sie w ogole -
   przechodzimy na siatke, ktora robi to sama. */
body .pf-plugin .boxes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 24px);
    justify-content: initial;
}

@media (max-width: 780px) {
    body .pf-plugin .boxes {
        grid-template-columns: 1fr;
    }
}

body .pf-plugin .boxes a {
    width: auto;
    height: auto;
    min-height: 260px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    box-shadow: none;
    transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}

body .pf-plugin .boxes a:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-mh);
    border-color: transparent;
}

body .pf-plugin .boxes a .box {
    gap: 18px;
    padding: 30px 22px;
}

body .pf-plugin .boxes a .box-image img {
    max-width: 100%;
    height: auto;
}

body .pf-plugin .boxes a .box-header {
    font-family: var(--serif);
    font-size: 1.28rem;
    font-weight: 500;
    color: var(--navy);
    text-align: center;
    transition: color .35s var(--ease);
}

body .pf-plugin .boxes a:hover .box-header {
    color: var(--red);
}

/* ---------- 3. Paski nawigacji: rodziny i palety -----------
   Zrodlo: Poppins 300, kolor #2D2D2D, aktywny z podkresleniem #ba0c2c
   (stara, ciemniejsza czerwien) - ujednolicamy z czerwienia marki. */
body .pf-plugin .families-menu .family-menu,
body .pf-plugin .palette-list .palette-list-item {
    font-family: var(--sans);
    font-weight: 400;
    color: var(--navy);
}

body .pf-plugin .families-menu .family-menu .family-name,
body .pf-plugin .palette-list .palette-list-item .palette-name {
    color: var(--muted);
    font-family: var(--sans);
    font-weight: 500;
}

body .pf-plugin .families-menu .family-menu .family-name:hover,
body .pf-plugin .palette-list .palette-list-item .palette-name:hover {
    color: var(--navy);
}

body .pf-plugin .families-menu .family-menu .active-menu,
body .pf-plugin .palette-list .palette-list-item .active-menu {
    color: var(--navy) !important; /* zrodlo tez ma !important - inaczej remis */
    border-bottom: 2px solid var(--red);
}

/* ---------- 4. Naglowki panelu koloru ----------------------
   UWAGA: '.header-*' opisuja tekst obok probki, ale kolor tla bierze
   sie z inline'a JS-a. Ustawiamy tylko kroje, nigdy kolory. */
body .pf-plugin .single-family .header-1,
body .pf-plugin .single-family .header-2,
body .pf-plugin .single-family .header-3 {
    font-family: var(--sans);
}

body .pf-plugin .single-family .header-1 {
    font-family: var(--serif);
    font-weight: 500;
}

body .pf-plugin .single-family .header-3 a {
    color: var(--red);
}

body .pf-plugin .single-family .right-side .color-name {
    font-family: var(--serif);
    font-weight: 500;
}

/* Przycisk "wiecej o kolorze". Wariant '.color-more-darker' zostaje
   nietkniety - to on ratuje czytelnosc na ciemnych probkach. */
body .pf-plugin .single-family .right-side .color-more-button {
    border-radius: 999px;
    border: 1px solid currentColor;
    font-family: var(--sans);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ---------- 5. Kolekcje (palety) ---------------------------
   Zrodlo: '.palette { width:30%; box-shadow:... }' - ta sama sztywna
   szerokosc co przy kafelkach, wiec tak samo przenosimy na siatke. */
body .pf-plugin .palettes-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    justify-content: initial;
}

@media (max-width: 980px) {
    body .pf-plugin .palettes-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    body .pf-plugin .palettes-menu {
        grid-template-columns: 1fr;
    }
}

body .pf-plugin .palettes-menu .palette {
    width: auto;
    margin-bottom: 0;
    padding: 0 0 26px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    box-shadow: none;
    transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}

body .pf-plugin .palettes-menu .palette:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-mh);
    border-color: transparent;
}

body .pf-plugin .palettes-menu .palette a .palette-name {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--navy);
    padding: 22px 20px 10px;
}

body .pf-plugin .palettes-menu .palette a .palette-description {
    padding: 0 20px;
    font-family: var(--sans);
    font-weight: 400;
    font-size: .87rem;
    line-height: 1.6;
    color: var(--muted);
}

/* ---------- 6. Znajdz kolor --------------------------------
   Pole tekstowe ma w zrodle 'border:1px solid transparent' i wlasna
   ikone lupy w ':before' kontenera - ikony NIE ruszamy, zeby nie
   powtorzyc historii z wyszukiwarka w naglowku. */
body .pf-plugin .find-color .find-top .short-text {
    font-family: var(--sans);
    font-weight: 400;
    color: var(--muted);
}

body .pf-plugin input[name="color"] {
    font-family: var(--sans);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 40px 10px 18px;
    color: var(--navy);
}

body .pf-plugin input[name="color"]:focus {
    outline: none;
    border-color: var(--navy);
}

/* Przycisk szukania - w zrodle zwykla ramka #686868. */
body .pf-plugin .find-color .find-bottom input[name="find-color"] {
    -webkit-appearance: none;
    appearance: none;
    background: var(--red);
    border: 1px solid var(--red);
    border-radius: 999px;
    padding: 12px 30px;
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}

/* Wyniki wyszukiwania koloru. '.color-box' dostaje kolor inline z JS-a -
   dodajemy mu tylko zaokraglenie. */
body .pf-plugin .searched-colors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    justify-content: initial;
}

body .pf-plugin .searched-colors a .searched-color {
    width: auto;
    height: auto;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-s);
    transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}

body .pf-plugin .searched-colors a:hover .searched-color {
    border-color: transparent;
    box-shadow: var(--shadow-mh);
}

body .pf-plugin .searched-colors a .searched-color .color-box {
    flex: 0 0 70px;
    border-radius: var(--r-xs);
}

body .pf-plugin .searched-colors a .searched-color .color-details {
    font-family: var(--sans);
    font-weight: 400;
    color: var(--navy);
}


/* ============================================================
   2026-08-20 - POGLEBIONA PRZEBUDOWA
   Dopisane na koncu: przy remisie wagi wygrywa to, co pozniej, wiec ta
   warstwa nadpisuje wczesniejsze reguly bez podbijania selektorow.
   Nadal nie ruszamy ani jednej klasy wtyczki - caly JS doboru koloru
   dziala bez zmian.
   ============================================================ */

/* ---------- Wspolna nawigacja narzedzia --------------------
   Cztery ekrany narzedzia byly dotad polaczone tylko przez rozdroze -
   z "Rodzin kolorow" nie dalo sie przejsc do "Kolekcji" inaczej niz
   cofajac sie wstecz. Pasek dokladamy skryptem (kolory.js). */
/* ---------- Zakladki narzedzia kolorow ---------------------
   WYGLAD POCHODZI ZE WSPOLNEGO KOMPONENTU '.bm-folder-tab'
   ('bm-responsive-fixes.css'), ktory 'kolory.js' doklada tym odnosnikom.

   Bylo tu wlasne cztery reguly: pigulka zamiast promienia 8px, granatowy
   stan aktywny zamiast czerwieni i zwykla zamiana tla zamiast pedzla.
   Usuniete 2026-09-17 - design.md mowi wprost, ze rzad zakladek ma uzywac
   TEJ SAMEJ klasy, a nie drugiego wygladu.

   Klasa '.bmx-kol-nav' zostaje na elemencie tylko jako zaczep dla
   ewentualnych korekt rozmieszczenia - odstepy i zawijanie daje juz
   '.bm-folder-tabs'. Zadnej reguly tu nie potrzebuje. */

/* ---------- Pasek rodzin kolorow ---------------------------
   W zrodle to poziomy pasek z przewijaniem. Zamieniamy pozycje
   w pigulki i przyklejamy pasek przy przewijaniu - przy 452 probkach
   inaczej trzeba bylo wracac na sama gore, zeby zmienic rodzine. */
body .pf-plugin .families-menu {
    position: sticky;
    top: 88px;
    z-index: 5;
    gap: 8px;
    margin: 0 0 22px;
    padding: 12px;
    background: rgba(252, 250, 246, .92);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
}

body .pf-plugin .families-menu .family-menu {
    padding: 0;
}

body .pf-plugin .families-menu .family-menu .family-name {
    display: inline-flex;
    align-items: center;
    padding: 9px 17px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    cursor: pointer;
    transition: background .3s var(--ease), color .3s var(--ease);
}

body .pf-plugin .families-menu .family-menu .family-name:hover {
    background: var(--cream);
    color: var(--navy);
}

body .pf-plugin .families-menu .family-menu .active-menu {
    background: var(--navy) !important;   /* zrodlo tez ma !important */
    border-bottom: 0;
    color: #fff !important;
}

/* ---------- Siatka probek ----------------------------------
   Wymiarow NIE dyktujemy sztywno: 'custom.css' wtyczki przerabial juz
   ten uklad z poziomego na pionowy i ustawia tam wysokosc probki.
   Zmieniamy tylko wyglad pojedynczej probki. */
body .pf-plugin .single-family .left-side .single-color {
    border-radius: var(--r-xs);
    cursor: pointer;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

body .pf-plugin .single-family .left-side .single-color:hover {
    transform: scale(1.06);
    box-shadow: var(--shadow-mh);
    z-index: 2;
    position: relative;
}

/* ---------- Panel wybranego koloru -------------------------
   Duza plama koloru z nazwa i numerem. Przyklejona, zeby przy dlugiej
   liscie probek nie uciekala poza ekran.
   KLAS Z SUFIKSEM '-darker' NIE RUSZAMY - to mechanizm kontrastu. */
body .pf-plugin .single-family .right-side {
    position: sticky;
    top: 160px;
}

body .pf-plugin .single-family .right-side .color-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    min-height: 280px;
    padding: 26px;
    border-radius: var(--r);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-m);
}

body .pf-plugin .single-family .right-side .color-name {
    padding: 0;
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.15;
}

body .pf-plugin .single-family .right-side .color-number {
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    opacity: .75;
}

/* ---------- Kolekcje ---------------------------------------
   Karty z podgladem palety - ten sam jezyk co kafelki sklepu. */
body .pf-plugin .palettes-menu .palette a .palette-image {
    display: block;
    overflow: hidden;
    background: var(--cream);
}

body .pf-plugin .palettes-menu .palette a .palette-image img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .6s var(--ease);
}

body .pf-plugin .palettes-menu .palette:hover a .palette-image img {
    transform: scale(1.05);
}

/* ---------- Znajdz kolor -----------------------------------
   Wyszukiwarka dostaje oprawe hero: szeroka karta na srodku. */
body .pf-plugin .find-color {
    display: block;
    width: 100%;
    padding: 0 0 34px;
}

body .pf-plugin .find-color form { width: 100%; }

/* 'proformat.css' ustawia tu sztywne 'width: 350px' - stad waskie pole.
   Zdejmujemy limit calkiem: karta wyszukiwarki ma byc tej samej szerokosci
   co naglowek i siatka wynikow nad/pod nia, inaczej wisi na srodku jak obcy
   element. */
body .pf-plugin .find-color .find-top {
    width: 100%;
    max-width: none;
    padding: 26px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    box-shadow: var(--shadow-s);
}

body .pf-plugin .find-color .find-top .short-text {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--navy);
    padding: 0 0 14px;
}


/* Samo pole wyszukiwania - pelna szerokosc karty.
   Lupka wtyczki siedzi w '.search-box::before' po prawej stronie,
   wiec zostawiamy jej miejsce prawym paddingiem. */
body .pf-plugin .find-color .find-top .search-box {
    display: block;
    width: 100%;
    margin-top: 10px;
}

body .pf-plugin .find-color .find-top input[name="color"] {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    padding: 0 44px 0 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background-color: #fff;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--navy);
}

body .pf-plugin .find-color .find-top input[name="color"]:focus {
    outline: none;
    border-color: var(--navy);
}

body .pf-plugin .find-color .find-top label {
    display: block;
    width: 100%;
}

body .pf-plugin .find-color .find-bottom { padding: 14px 0 0; }

/* Wyniki wyszukiwania - karty zamiast golych prostokatow. */
body .pf-plugin .searched-colors a .searched-color {
    box-shadow: none;
}

body .pf-plugin .searched-colors a:hover .searched-color {
    transform: translateY(-3px);
}

body .pf-plugin .searched-colors a .searched-color .color-details {
    font-family: var(--sans);
    line-height: 1.35;
}

@media (max-width: 900px) {
    body .pf-plugin .families-menu { position: static; border-radius: var(--r); }
    body .pf-plugin .single-family .right-side { position: static; }
}

@media (prefers-reduced-motion: reduce) {
    body .pf-plugin * { transition: none !important; }
}


/* ============================================================
   EKRAN "ZNAJDZ KOLOR" - oprawa
   Markup dokladany przez kolory.js (naglowek, wstega probek, skroty).
   Skroty sa zwyklymi linkami do '?color=...' - wyszukiwarka dziala na
   formularzu GET, wiec nie potrzeba tu zadnej logiki po stronie JS.
   ============================================================ */

.bmx-kol-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0 0 30px;
    padding: clamp(28px, 4vw, 52px) clamp(20px, 3vw, 44px) clamp(22px, 3vw, 36px);
    background: var(--cream);
    border-radius: var(--r);
    text-align: center;
}

.bmx-kol-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(50% 60% at 18% 18%, rgba(219, 6, 50, .10), transparent 70%),
        radial-gradient(46% 58% at 84% 26%, rgba(11, 34, 64, .12), transparent 70%);
}

.bmx-kol-hero__t { max-width: 620px; margin: 0 auto; }

.bmx-kol-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    font-family: var(--sans);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--red);
}

.bmx-kol-h {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.7rem, 3.6vw, 2.7rem);
    line-height: 1.1;
    letter-spacing: -.018em;
    color: var(--navy);
}

.bmx-kol-h em {
    font-style: italic;
    color: var(--red);
}

.bmx-kol-lead {
    margin: 16px auto 0;
    max-width: 54ch;
    font-family: var(--sans);
    font-size: .96rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--muted);
}

.bmx-kol-lead b {
    font-weight: 600;
    color: var(--navy);
}

/* Wstega probek - pasek koloru pod naglowkiem. Probki wchodza kolejno,
   z opoznieniem rosnacym wraz z pozycja. */
.bmx-kol-wstega {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin: 26px auto 0;
    max-width: 520px;
}

.bmx-kol-wstega span {
    flex: 1 1 0;
    height: 34px;
    border-radius: var(--r-xs);
    transform: scaleY(.35);
    opacity: 0;
    animation: bmx-kol-in .5s cubic-bezier(.22, 1, .36, 1) both;
}

.bmx-kol-wstega span:nth-child(1)  { animation-delay: .04s; }
.bmx-kol-wstega span:nth-child(2)  { animation-delay: .08s; }
.bmx-kol-wstega span:nth-child(3)  { animation-delay: .12s; }
.bmx-kol-wstega span:nth-child(4)  { animation-delay: .16s; }
.bmx-kol-wstega span:nth-child(5)  { animation-delay: .20s; }
.bmx-kol-wstega span:nth-child(6)  { animation-delay: .24s; }
.bmx-kol-wstega span:nth-child(7)  { animation-delay: .28s; }
.bmx-kol-wstega span:nth-child(8)  { animation-delay: .32s; }
.bmx-kol-wstega span:nth-child(9)  { animation-delay: .36s; }
.bmx-kol-wstega span:nth-child(10) { animation-delay: .40s; }
.bmx-kol-wstega span:nth-child(11) { animation-delay: .44s; }
.bmx-kol-wstega span:nth-child(12) { animation-delay: .48s; }

@keyframes bmx-kol-in {
    to { transform: none; opacity: 1; }
}

/* Skroty do rodzin */
.bmx-kol-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 24px;
}

/* CHIP NAWIGACYJNY - miary wprost z design.md, rozdzial "Chipy
   nawigacyjne (filtry, kategorie, wojewodztwa)". Wzorcem sa pigulki
   wojewodztw '.bmx-sal-woj'.

   Poprawione 2026-09-17: bylo '.72rem/600' z wersalikami i rozstrzeleniem,
   czyli typografia PRZYCISKU, a nie filtra. Zasada mowi '.76rem/500,
   bez letter-spacing, bez wersalikow' - etykiety sa redakcyjne i bywaja
   dlugie ("Narzedzia malarskie" w wersalikach rozpycha rzad).

   Pedzla tu NIE MA i to jest celowe: to filtr, nie wezwanie do dzialania.
   Pociagniecie na elemencie szerokim na 90 px jest nieczytelne, a kilka
   naraz robi halas. Tak samo zapisane w wytycznych. */
.bmx-kol-chip {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    font-family: var(--sans);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: var(--navy);
    text-decoration: none;
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}

/* Hover: granatowe tlo i BIALY tekst - nigdy czerwony. Oxygen ma globalne
   'a:hover { color:#ba0c2c }', ktore na granacie daje kontrast okolo 2:1
   i napis znika. Ten sam blad zjadl juz kategorie na blogu. */
.bmx-kol-chip:hover {
    transform: translateY(-2px);
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.bmx-kol-chip.is-on {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

/* Podsumowanie wynikow */
.bmx-kol-info {
    margin: 0 0 18px;
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
}


/* ---------- Formularz wkomponowany w naglowek --------------
   Skrypt przenosi '.find-color' do '.bmx-kol-hero__form'. Calosc - etykieta,
   pole i przycisk - siedzi w JEDNEJ bialej karcie, jeden pod drugim.
   Przycisk obok pola wygladal jak osobny element; pelna szerokosc pod polem
   czyta sie jako czesc tego samego formularza.
   ------------------------------------------------------------ */
.bmx-kol-hero__form {
    max-width: 560px;
    margin: 26px auto 0;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    box-shadow: var(--shadow-l);
}

.bmx-kol-hero__form .find-color {
    display: block;
    padding: 0;
}

.bmx-kol-hero__form .find-color form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bmx-kol-hero__form .find-color .find-top {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
}

.bmx-kol-hero__form .find-color .find-top .short-text {
    padding: 0 0 7px 4px;
    font-family: var(--sans);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
}

.bmx-kol-hero__form .find-color .find-top input[name="color"] {
    height: 54px;
    background-color: var(--paper);
    border-color: var(--line);
    box-shadow: none;
}

.bmx-kol-hero__form .find-color .find-top input[name="color"]:focus {
    background-color: #fff;
    border-color: var(--navy);
}

/* Lupka wtyczki. W zrodle ma 'top: 10px' - przy polu wysokim na 54 px
   siedziala pod gora zamiast na srodku. Kotwiczymy ja polowa wysokosci
   i cofamy o polowe wlasnej. Zrodlo ma wage (0,4,1), wiec dokladamy
   '.pf-plugin' -> (0,5,1). */
.pf-plugin .bmx-kol-hero__form .find-color .find-top .search-box::before {
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    background-position: center;
    background-size: 18px 18px;
}

.bmx-kol-hero__form .find-color .find-bottom {
    flex: 0 0 auto;
    padding: 0;
    text-align: center;
}

/* Przycisk "Znajdz kolor" - pelna szerokosc karty, tuz pod polem.
   To <input type="submit">, wiec NIE MA pseudoelementow i hover "z pedzla"
   jest tu niemozliwy - ten sam powod co przy formularzu na
   /dla-profesjonalistow/. Zostaje czysta zmiana tla. */
.bmx-kol-hero__form .find-color .find-bottom input[name="find-color"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 54px;
    margin: 0;
    padding: 0 28px;
    border: 1px solid var(--red);
    border-radius: 999px;
    background: var(--red);
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: background .35s var(--ease), border-color .35s var(--ease);
}

.bmx-kol-hero__form .find-color .find-bottom input[name="find-color"]:hover {
    background: var(--navy);
    border-color: var(--navy);
}

/* Wstega i skroty schodza pod formularz - odstepy dostosowane. */
.bmx-kol-hero .bmx-kol-wstega { margin-top: 28px; }

/* ---------- Wyniki jako siatka kart ------------------------
   Zrodlo uklada je flexem 'space-between' ze sztywnymi 350x80 px,
   przez co ostatni rzad rozjezdzal sie na boki. */
body .pf-plugin .searched-colors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
    gap: 12px;
    justify-content: initial;
}

body .pf-plugin .searched-colors a { display: block; }

body .pf-plugin .searched-colors a .searched-color {
    width: auto;
    height: auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-s);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}

body .pf-plugin .searched-colors a:hover .searched-color {
    transform: translateY(-4px);
    box-shadow: var(--shadow-mh);
    border-color: transparent;
}

body .pf-plugin .searched-colors a .searched-color .color-box {
    flex: none;
    width: 58px;
    height: 58px;
    border-radius: var(--r-s);
    border: 1px solid var(--line-soft);
}

body .pf-plugin .searched-colors a .searched-color .color-details {
    padding: 0;
    font-family: var(--sans);
}

body .pf-plugin .searched-colors .color-details .color-name {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--navy);
}

body .pf-plugin .searched-colors .color-details .color-number {
    margin-top: 2px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
    .bmx-kol-wstega span { animation: none; transform: none; opacity: 1; }
}


/* ============================================================
   EKRAN POJEDYNCZEGO KOLORU (/kolory/kolor/?id=...)
   Zrodlo: '.palette-header' (pasek 150 px z nazwa na tle koloru)
   + '.single-family' z dwiema parami "etykieta -> link".
   Skrypt (kolory.js) przebudowuje pasek i dokleja przyciski wyjscia.

   KOLORU TEKSTU TU NIE USTAWIAMY. Wtyczka dokleja '.palette-header-darker'
   przy jasnych probkach - wszystko dziedziczy przez 'color: inherit',
   inaczej bialy napis wyladowalby na bieli.
   ============================================================ */

body .pf-plugin .palette-header.bmx-kol-karta {
    display: flex;
    align-items: flex-end;
    height: auto;
    min-height: clamp(280px, 38vw, 420px);
    margin-bottom: 26px;
    padding: clamp(24px, 3vw, 44px);
    border-radius: var(--r);
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 400;
    box-shadow: var(--shadow-m);
}

.bmx-kol-karta__in {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    color: inherit;
}

.bmx-kol-karta__s {
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .8;
    color: inherit;
}

.bmx-kol-karta__n {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -.02em;
    color: inherit;
}

/* Kod HEX - w zrodle nie bylo go nigdzie, a to pierwsza rzecz,
   ktorej szuka projektant. */
.bmx-kol-karta__hex {
    margin-top: 10px;
    padding: 6px 14px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    color: inherit;
    opacity: .85;
}

/* ---------- Metadane: rodzina i kolekcja ------------------- */
body .pf-plugin .single-family:has(.right-side-color) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 620px) {
    body .pf-plugin .single-family:has(.right-side-color) { grid-template-columns: 1fr; }
}

/* Lewa kolumna jest w zrodle pusta ('.header-1' bez tresci) - nie zajmuje
   miejsca w siatce. */
body .pf-plugin .single-family .left-side-color { display: none; }

body .pf-plugin .single-family .right-side-color {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: auto;
    padding: 0;
}

@media (max-width: 620px) {
    body .pf-plugin .single-family .right-side-color { grid-template-columns: 1fr; }
}

/* Kazda para "etykieta + wartosc" dostaje wlasna karte. Etykiety to
   '.header-2', wartosci '.header-3' - ida naprzemiennie, wiec skladamy
   je wizualnie samym stylem, bez ruszania znacznikow. */
body .pf-plugin .single-family .right-side-color .header-2 {
    margin: 0;
    padding: 18px 20px 0;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-bottom: 0;
    border-radius: var(--r-s) var(--r-s) 0 0;
    font-family: var(--sans);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

body .pf-plugin .single-family .right-side-color .header-3 {
    margin: 0;
    padding: 4px 20px 18px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-top: 0;
    border-radius: 0 0 var(--r-s) var(--r-s);
    font-family: var(--serif);
    font-size: 1.16rem;
    font-weight: 500;
}

body .pf-plugin .single-family .right-side-color .header-3 a {
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .3s var(--ease), border-color .3s var(--ease);
}

body .pf-plugin .single-family .right-side-color .header-3 a:hover {
    color: var(--red);
    border-bottom-color: currentColor;
}

/* ---------- Wyjscia dalej ---------------------------------- */
.bmx-kol-akcje {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.bmx-kol-akcja {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 26px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-family: var(--sans);
    font-size: .71rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--navy);
    text-decoration: none;
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}

/* Wygladem hoveru steruje wspolny 'pedzel.css' (klase 'bmx-pedzel'
   doklada 'kolory.js'). Tutaj zostaje tylko uniesienie przycisku
   i dwa kolory: czym pedzel maluje i co jest pod farba w spoczynku. */
.bmx-kol-akcja {
    --bmx-farba: var(--navy);
    --bmx-tlo: #fff;
}

.bmx-kol-akcja:hover {
    transform: translateY(-2px);
}

.bmx-kol-akcja--glowna {
    --bmx-tlo: var(--red);
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}