/* ============================================================
   SKLEP + ARCHIWA KATEGORII - nowy wyglad
   Ladowane tylko na /sklep/ i /kategoria-produktu/… (patrz bm-newlayout.php).

   ZASADA: zmieniamy WYLACZNIE wyglad. Siatka produktow i filtry powstaja
   w shortcode [bmsklep] (wtyczka bm-custom-menu) i sa renderowane przez
   shop-script.js - tego kodu NIE ruszamy, wiec filtrowanie fasetowe
   (?category=farby&sub=…&room=…) dziala dokladnie jak dotad.

   Mapujemy istniejace klasy sklepu na jezyk wizualny makiety:
     .product-card         -> .bmx-card
     .image-wrapper        -> .bmx-card__img
     .product-code-badge   -> .bmx-card__tag
     .product-name         -> .bmx-card__nm
     .product-description  -> .bmx-card__d
     .product-price-section-> .bmx-card__f + .bmx-card__p
     .btn-variant          -> .bmx-btn

   Tokeny powtarzamy lokalnie, bo tresc sklepu lezy POZA wrapperem .bmx
   i nie odziedziczylaby zmiennych makiety.
   Autor: claude, 2026-08-19.
   ============================================================ */

.bm-shop-wrapper {
    --navy:       #0B2240;
    --navy-2:     #12325C;
    --red:        #DB0632;
    --red-dark:   #B00427;
    --ink:        #171A1E;
    --muted:      #3F4750;
    --paper:      #FCFAF6;
    --cream:      #F5F1E9;
    --sand:       #EAE3D6;
    --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);
    --brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0 H170 Q184 4 168 8 Q186 13 170 17 Q188 21 169 25 Q185 29 167 33 Q182 36 172 40 H0 Z'/%3E%3Cellipse fill='white' cx='191' cy='6' rx='4.2' ry='2.4'/%3E%3Cellipse fill='white' cx='195' cy='19' rx='2.8' ry='1.7'/%3E%3Cellipse fill='white' cx='190' cy='31' rx='3.4' ry='2.1'/%3E%3Cellipse fill='white' cx='197.5' cy='26' rx='1.6' ry='1.1'/%3E%3Cellipse fill='white' cx='196' cy='11' rx='1.4' ry='1'/%3E%3C/svg%3E");
    --sans:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --serif:      "Playfair Display", Georgia, "Times New Roman", serif;

    font-family: var(--sans);

    /* shop-style.css projektuje sklep na CIEMNO: '.bm-shop-wrapper' dostaje
       'background-color:#000000; color:#ffffff; min-height:100vh'.
       Przestawiamy powierzchnie na jasna palete makiety. Ten arkusz laduje sie
       PO wtyczkowym (zaleznosc w sklep-template.php), wiec wystarcza rowna waga. */
    background-color: var(--paper);
    color: var(--ink);
    min-height: 0;
    padding-top: 30px;
}

/* Pozostale ciemne powierzchnie z shop-style.css --------------- */
.bm-shop-wrapper .sidebar-filters {
    background-color: #fff;
    border-color: var(--line-soft);
}

.bm-shop-wrapper .filter-group {
    border-bottom-color: var(--line-soft);
}

.bm-shop-wrapper .products-header {
    border-bottom: 1px solid var(--line-soft);
}

/* Licznik byl czerwona pigulka - w makiecie to dyskretny nadtytul. */
.bm-shop-wrapper .count-badge {
    background-color: transparent;
    color: var(--muted);
    border-radius: 0;
}

/* Teksty na jasnym tle. shop-style.css wymusza bialy kolor w 27 miejscach -
   ponizej te, ktore faktycznie wystepuja w znacznikach sklepu. Selektory
   dobrane tak, by przebic ich wage (np. '.bm-shop-wrapper .sidebar-filters h3'
   ma (0,3,0), wiec samo '.bm-shop-wrapper h3' by przegralo). */
.bm-shop-wrapper .filter-header,
.bm-shop-wrapper h1,
.bm-shop-wrapper h2,
.bm-shop-wrapper .sidebar-filters h3,
.bm-shop-wrapper .filter-group > label,
.bm-shop-wrapper .filter-group label,
.bm-shop-wrapper label {
    color: var(--navy);
}

.bm-shop-wrapper .filter-group li:hover label[for] {
    color: var(--red);
}

.bm-shop-wrapper .filter-group select {
    color: var(--ink);
    background-color: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    padding: 9px 14px;
    font-family: inherit;
    font-size: .85rem;
}

/* Sterowanie mobilne - te same pigulki co reszta interfejsu. */
.bm-shop-wrapper .mobile-filters-toggle,
.bm-shop-wrapper .mobile-apply-btn {
    background-color: var(--navy);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding: 12px 22px;
}

.bm-shop-wrapper .clear-search-btn,
.bm-shop-wrapper .search-icon {
    color: var(--muted);
}

.bm-shop-wrapper .clear-search-btn:hover {
    color: var(--red);
    background: transparent;
}

/* ============================================================
   HERO SKLEPU - lezy w wrapperze .bmx, wiec korzysta z tokenow makiety.
   Poswiata w tle to ten sam chwyt co w sekcji Color Trends na stronie
   glownej ('.bmx-ct::before') - radialny gradient w kolorze piasku.
   ============================================================ */
.bmx-shop-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--cream);
}

.bmx-shop-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(58% 72% at 84% 24%,
                color-mix(in srgb, var(--sand) 62%, transparent), transparent 70%);
}

.bmx-shop-hero__in {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 60px);
    align-items: end;
}

@media (max-width: 860px) {
    .bmx-shop-hero__in { grid-template-columns: 1fr; align-items: start; }
}

.bmx-shop-hero__h {
    margin-top: 12px;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.06;
}

.bmx-shop-hero__l { margin-top: 18px; }

.bmx-shop-hero__trust {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bmx-shop-hero__trust li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 16px;
    border-left: 2px solid var(--red);
}

.bmx-shop-hero__trust b {
    font-family: var(--serif);
    font-size: 1.32rem;
    font-weight: 500;
    color: var(--navy);
}

.bmx-shop-hero__trust span {
    font-family: var(--sans);
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--muted);
}

/* ============================================================
   2026-08-20: PRZEBUDOWA WYGLADU pod jezyk makiety.
   Znaczniki i logika sklepu nadal pochodza z shop-script.js - kafelek
   powstaje w JS-ie i ma dokladnie taki uklad (sprawdzone w zrodle,
   funkcja renderujaca siatke):
     article.product-card
       .product-code-badge      <- kod produktu (opcjonalny)
       .image-wrapper > img
       .card-details
         h2.product-name
         p.product-description
         .product-colors-info   <- "N kolorow do wyboru"
         .product-tags          <- pigulki z filtrow
         .product-price-section > .price-label + .price-value
         button.btn-variant
   Nie zmieniamy ani jednej z tych klas - filtrowanie fasetowe dziala dalej.
   ============================================================ */

/* ---------- 0. Uklad strony -------------------------------- */
.bm-shop-wrapper .main-container {
    display: grid;
    grid-template-columns: 292px minmax(0, 1fr);
    gap: clamp(20px, 2.6vw, 40px);
    align-items: start;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 30px) clamp(40px, 5vw, 80px);
}

@media (max-width: 900px) {
    .bm-shop-wrapper .main-container { grid-template-columns: 1fr; }
}

/* ---------- 1. Siatka produktow ----------------------------
   'auto-fill' zamiast sztywnej liczby kolumn: przy zawezeniu filtrow
   siatka nie rozciaga pojedynczego kafelka na cala szerokosc. */
.bm-shop-wrapper .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: clamp(16px, 1.8vw, 26px);
    align-items: stretch;
}

/* ---------- 2. Kafelek produktu ---------------------------- */
.bm-shop-wrapper .product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    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);

    /* Wejscie kafelkow - siatka powstaje w JS-ie, wiec animacje odpalamy
       samym renderem, a opoznienie bierzemy z pozycji w siatce. Dzieki temu
       dziala tez po kazdej zmianie filtrow, bez ani jednej linii JS. */
    animation: bmx-shop-in .55s var(--ease) both;
}

.bm-shop-wrapper .product-card:nth-child(1)  { animation-delay: .02s; }
.bm-shop-wrapper .product-card:nth-child(2)  { animation-delay: .06s; }
.bm-shop-wrapper .product-card:nth-child(3)  { animation-delay: .10s; }
.bm-shop-wrapper .product-card:nth-child(4)  { animation-delay: .14s; }
.bm-shop-wrapper .product-card:nth-child(5)  { animation-delay: .18s; }
.bm-shop-wrapper .product-card:nth-child(6)  { animation-delay: .22s; }
.bm-shop-wrapper .product-card:nth-child(7)  { animation-delay: .26s; }
.bm-shop-wrapper .product-card:nth-child(n+8) { animation-delay: .3s; }

@keyframes bmx-shop-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.bm-shop-wrapper .product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-mh);
    border-color: transparent;
}

/* Kod produktu - pigulka w rogu. Tlo musi byc KRYJACE: pigulka lezy na
   ramce ze zdjeciem, wiec przy przezroczystym tle przebijalo przez nia
   zdjecie i kod stawal sie nieczytelny. */
.bm-shop-wrapper .product-code-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    /* Kody sa krociutkie - sprawdzone na wszystkich 31 produktach:
       3 znaki ('046', '532') albo 4 ('N548', 'U763'). Przy szerokim
       'letter-spacing' i duzym paddingu takie trzy znaki rozjezdzaly sie
       w pasek szerszy niz sama tresc - stad wrazenie flagi doklejonej
       do rogu kafelka. Scieśniamy: mniej odstepu miedzy literami
       i wezszy padding, za to o wlos wieksza czcionka, zeby kod
       pozostal czytelny. */
    padding: 4px 8px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow-s);
    font-family: var(--sans);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--navy);
}

/* Zdjecie. UWAGA: pliki produktow maja ok. 200 px szerokosci i nie ma
   wiekszych wersji - rozciaganie ich daje pikseloze (to samo ograniczenie
   co na karcie produktu). Dlatego ramka ma stala wysokosc, a obrazek
   siedzi w niej w naturalnej wielkosci. */
.bm-shop-wrapper .image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    padding: 50px 16px 16px;
    background: var(--paper);
    overflow: hidden;
}

.bm-shop-wrapper .image-wrapper img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 14px 20px rgba(11, 34, 64, .15));
    transition: transform .6s var(--ease);
}

.bm-shop-wrapper .product-card:hover .image-wrapper img {
    transform: scale(1.05);
}

/* ---------- 3. Tresc kafelka -------------------------------
   Uklad przepisany 1:1 z kafelka makiety ('.bmx-card__b'), lacznie
   z proporcjami: nazwa Inter 600 / .955rem, opis .815rem rosnacy do dolu,
   stopka oddzielona wloskowata linia. Wczesniej nazwa byla w Playfair -
   dluzsze nazwy produktow (np. "Aura Waterborne Interior Paint & Primer
   Matte N522") lamaly sie w niej na trzy wiersze i kafelki sie rozjezdzaly.
   ------------------------------------------------------------ */
.bm-shop-wrapper .card-details {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    padding: 20px 20px 22px;
}

.bm-shop-wrapper .product-name {
    margin: 0;
    font-family: var(--sans);
    font-size: .955rem;
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -.004em;
    color: var(--navy);
    transition: color .35s var(--ease);
}

.bm-shop-wrapper .product-card:hover .product-name { color: var(--red); }

/* Opis rosnie do dolu - dzieki temu stopki wszystkich kafelkow w rzedzie
   sa na tej samej wysokosci, niezaleznie od dlugosci tekstu. */
.bm-shop-wrapper .product-description {
    margin: 0;

    /* 'flex: 1' ustawialo flex-basis na 0, wiec wysokosc bloku wynikala
       z wolnego miejsca w kafelku - przy krotszych kafelkach kurczyl sie
       ponizej dwoch wierszy i 'overflow:hidden' UCINAL druga linie w polowie.
       Teraz baza jest naturalna ('auto'), a 'min-height' gwarantuje pelne
       trzy wiersze niezaleznie od reszty tresci. */
    flex: 1 1 auto;
    min-height: calc(3 * 1.6em);
    font-family: var(--sans);
    font-size: .815rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "N kolorow do wyboru" - w zrodle poprzedzone emoji palety.
   Emoji wycinamy (patrz nizej przy tagach) i zastepujemy kropka w czerwieni. */
.bm-shop-wrapper .product-colors-info {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--sans);
    font-size: .73rem;
    font-weight: 400;
    color: var(--navy);
    font-size-adjust: none;
}

.bm-shop-wrapper .product-colors-info::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
}

/* ---------- 3b. Tagi ---------------------------------------
   shop-script.js buduje je jako:
     <span class="product-tag" data-type="..."><span class="tag-icon">EMOJI</span> Etykieta</span>
   Ikony to mieszanka emoji (🛋️ 🍳 🚿) i znakow geometrycznych (○ ◐ ▭) -
   w jednym rzedzie wygladaly jak przypadkowy zbior znakow i to one robily
   balagan w kafelku. Chowamy je i zostawiamy sama etykiete.

   Ograniczamy tez liczbe widocznych tagow do trzech: produkty maja ich
   nawet kilkanascie, przez co opis ginal pod scianka pigulek. Reszta jest
   nadal w kodzie strony - filtrowanie i wyszukiwarka widza komplet.
   ------------------------------------------------------------ */
.bm-shop-wrapper .product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.bm-shop-wrapper .product-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: transparent;
    font-family: var(--sans);
    font-size: .63rem;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 1.5;
    color: var(--muted);
    white-space: nowrap;
}

.bm-shop-wrapper .product-tag .tag-icon { display: none; }

.bm-shop-wrapper .product-tag:nth-of-type(n+4) { display: none; }

/* ---------- 3c. Stopka kafelka -----------------------------
   Wloskowata linia i cena - dokladnie jak '.bmx-card__f' w makiecie. */
.bm-shop-wrapper .product-price-section {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.bm-shop-wrapper .price-label {
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--muted);
}

.bm-shop-wrapper .price-value {
    font-family: var(--sans);
    font-size: 1.06rem;
    font-weight: 600;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- 4. Przycisk "Wybierz wariant" ------------------
   Ten sam komponent co na stronie glownej i w karcie produktu.
   To <button>, wiec maska pedzla dziala (input jej nie ma). */
.bm-shop-wrapper .btn-variant {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 12px;
    padding: 12px 20px;
    border: 1px solid var(--red);
    border-radius: 999px;
    background: var(--red);
    font-family: var(--sans);
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    transition: color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}

.bm-shop-wrapper .btn-variant::after {
    content: "";
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: -2px;
    height: 210%;
    z-index: -1;
    background: var(--navy);
    border-radius: 48% 52% 0 0 / 16% 20% 0 0;
    transform: translateY(102%) rotate(-2deg);
    transition: transform .95s cubic-bezier(.62, .02, .3, 1), border-radius .95s cubic-bezier(.62, .02, .3, 1);
}

.bm-shop-wrapper .btn-variant:hover,
.bm-shop-wrapper .btn-variant:focus-visible {
    transform: translateY(-2px);
    border-color: var(--navy);
    color: #fff;
}

.bm-shop-wrapper .btn-variant:hover::after,
.bm-shop-wrapper .btn-variant:focus-visible::after {
    transform: translateY(0) rotate(0deg);
    border-radius: 0;
}

@supports ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
    .bm-shop-wrapper .btn-variant::after {
        left: 0; right: 0; top: 0; bottom: 0;
        height: auto;
        border-radius: 0;
        transform: none;
        background:
            repeating-linear-gradient(112deg, rgba(255,255,255,.022) 0 2px, rgba(255,255,255,0) 2px 11px),
            var(--navy);
        -webkit-mask-image: var(--brush);        mask-image: var(--brush);
        -webkit-mask-size: 300% 100%;            mask-size: 300% 100%;
        -webkit-mask-repeat: no-repeat;          mask-repeat: no-repeat;
        -webkit-mask-position: 100% center;      mask-position: 100% center;
        transition: -webkit-mask-position 1.05s cubic-bezier(.42, .03, .25, 1),
                            mask-position 1.05s cubic-bezier(.42, .03, .25, 1);
    }
    .bm-shop-wrapper .btn-variant:hover::after,
    .bm-shop-wrapper .btn-variant:focus-visible::after {
        transform: none;
        border-radius: 0;
        -webkit-mask-position: 0% center;        mask-position: 0% center;
    }
}

/* ---------- 5. Pasek nad lista ----------------------------- */
.bm-shop-wrapper .products-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: clamp(18px, 2vw, 28px);
    padding-bottom: 16px;
}

.bm-shop-wrapper .title-with-count {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.bm-shop-wrapper .title-with-count h2 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    color: var(--navy);
}

.bm-shop-wrapper .count-badge {
    padding: 0;
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.bm-shop-wrapper .sort-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bm-shop-wrapper .sort-wrapper label {
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--muted);
}

.bm-shop-wrapper .sort-wrapper select {
    -webkit-appearance: none;
    appearance: none;
    padding: 10px 38px 10px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230B2240' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    font-family: var(--sans);
    font-size: .85rem;
    color: var(--navy);
    cursor: pointer;
}

.bm-shop-wrapper .sort-wrapper select:focus {
    outline: none;
    border-color: var(--navy);
}

/* ---------- 6. Panel filtrow -------------------------------
   ============================================================
   TA REGULA MUSI SIE KONCZYC NA 1025 PX.
   Zgloszenie 2026-09-17: "div z filtrami sklepu musi miec X wewnatrz,
   nie poza, ten X go dziwnie spycha w bok" oraz "filtry nie powinny
   miec kontenera zepchnietego w lewo".

   'shop-style.css' wtyczki zamienia panel PONIZEJ 1024 px w szuflade:
       position: fixed; left: -100%; width: 85%; height: 100vh;
       .sidebar-filters.active { left: 0 }
   a przycisk "Filtry" i krzyzyk ja otwieraja i zamykaja.

   Nasza regula 'position: sticky' miala te sama wage (0,2,0), ale
   stoi w arkuszu wczytywanym POZNIEJ - wiec wygrywala i kasowala
   'position: fixed'. Skutek zmierzony przy 390 px: panel stal na stale
   w tresci, ale ZOSTAWALA mu geometria szuflady - 85% szerokosci
   (304 px zamiast 350), wysokosc 100vh i wciecie 80/100 px. Stad
   "zepchniety w lewo". Krzyzyk ma 'position:absolute', a panel przestal
   byc dla niego ukladem odniesienia - ladowal 10 px ZA jego prawa
   krawedzia. Przycisk "Filtry" nadal dokladal klase 'active', czyli
   zaciemnial ekran nakladka nad i tak widocznym panelem.

   Zostawiamy wiec wtyczce jej mechanizm na malych ekranach, a swoje
   pudelko opisujemy tylko tam, gdzie panel naprawde stoi w kolumnie.
   ============================================================ */
@media (min-width: 1025px) {
    .bm-shop-wrapper .sidebar-filters {
        position: sticky;
        top: 92px;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        padding: 22px;
        border: 1px solid var(--line-soft);
        border-radius: var(--r);
        box-shadow: var(--shadow-s);
    }
}

/* Szuflada na malych ekranach - tylko oprawa, bez ruszania mechanizmu.
   Czerwona kreska przy krawedzi jest z innej palety; zastepujemy ja
   cieniem, ktorego uzywaja u nas wszystkie wysuwane panele. */
@media (max-width: 1024px) {
    .bm-shop-wrapper .sidebar-filters {
        border-right: 1px solid var(--line-soft);
        box-shadow: var(--shadow-l);
        border-radius: 0 var(--r) var(--r) 0;
    }
}

.bm-shop-wrapper .filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 500;
}

.bm-shop-wrapper .btn-clear-filters {
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    font-family: var(--sans);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    transition: color .3s var(--ease), border-color .3s var(--ease);
}

.bm-shop-wrapper .btn-clear-filters:hover {
    color: var(--red);
    border-color: var(--red);
}

.bm-shop-wrapper .filter-group {
    padding: 16px 0;
    border-bottom: 1px solid var(--line-soft);
}

.bm-shop-wrapper .filter-group:last-child { border-bottom: 0; }

.bm-shop-wrapper .sidebar-filters h3,
.bm-shop-wrapper .filter-group > label:first-child {
    display: block;
    margin: 0 0 10px;
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--navy);
}

.bm-shop-wrapper .filter-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bm-shop-wrapper .filter-group li label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    margin: 0;
    border-radius: var(--r-xs);
    font-family: var(--sans);
    font-size: .87rem;
    font-weight: 300;
    color: var(--ink);
    cursor: pointer;
    transition: background .25s var(--ease), color .25s var(--ease);
}

.bm-shop-wrapper .filter-group li label:hover { background: var(--paper); }

.bm-shop-wrapper .filter-checkbox {
    width: 16px;
    height: 16px;
    flex: none;
    margin: 0;
    accent-color: var(--red);
    cursor: pointer;
}

/* Wyszukiwarka w panelu */
.bm-shop-wrapper .search-input-wrapper { position: relative; }

.bm-shop-wrapper .search-input-wrapper input {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    padding: 11px 34px 11px 36px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-family: var(--sans);
    font-size: .87rem;
    color: var(--navy);
}

.bm-shop-wrapper .search-input-wrapper input:focus {
    outline: none;
    border-color: var(--navy);
}

.bm-shop-wrapper .search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.bm-shop-wrapper .clear-search-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* Zakres ceny */
.bm-shop-wrapper .price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bm-shop-wrapper .price-inputs input {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: #fff;
    font-family: var(--sans);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    color: var(--navy);
    text-align: center;
}

.bm-shop-wrapper .price-inputs input:focus {
    outline: none;
    border-color: var(--navy);
}

.bm-shop-wrapper .filter-info-message {
    margin-top: 12px;
    padding: 11px 13px;
    border-left: 3px solid var(--navy);
    border-radius: var(--r-xs);
    background: var(--paper);
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--muted);
}

/* ---------- 7. Przyciski kategorii ------------------------- */
.bm-shop-wrapper .category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bm-shop-wrapper .category-filter-btn {
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--navy);
    cursor: pointer;
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.bm-shop-wrapper .category-filter-btn:hover {
    border-color: var(--navy);
    background: var(--paper);
}

.bm-shop-wrapper .category-filter-btn.active {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

/* ---------- 8. Brak wynikow -------------------------------- */
.bm-shop-wrapper .no-results {
    grid-column: 1 / -1;
    padding: clamp(36px, 5vw, 64px) 24px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    background: #fff;
    text-align: center;
}

.bm-shop-wrapper .no-results p {
    margin: 0 0 18px;
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--navy);
}

.bm-shop-wrapper .no-results .btn-variant {
    width: auto;
    padding: 13px 30px;
}

@media (prefers-reduced-motion: reduce) {
    .bm-shop-wrapper .product-card { animation: none; }
    .bm-shop-wrapper * { transition: none !important; }
}

/* ============================================================
   9. PANEL FILTROW - reszta ciemnego motywu wtyczki (2026-09-01)

   Punkt 6 przemalowal panel na jasno, ale trzy grupy regul z
   'shop-style.css' przetrwaly, bo maja WYZSZA WAGE niz nasze:

     wtyczka: '.bm-shop-wrapper .filter-group input[type="checkbox"]'  (0,3,1)
     nasze:   '.bm-shop-wrapper .filter-checkbox'                      (0,2,0)

   Stad czarne kwadraciki zaznaczen na jasnym panelu. Do tego doszly
   elementy, ktorych punkt 6 w ogole nie tykal: pasek przewijania panelu
   (czarny tor + czerwony uchwyt), pola ceny i plakietka z zakresem ceny,
   ktora wstrzykuje skrypt dopiero po ustawieniu filtra - dlatego nie
   bylo jej widac przy pierwszym przejsciu.

   Czerwien wtyczki to '#D71920'. Marka uzywa '#DB0632' (--red) i tak jest
   w calej reszcie serwisu, wiec tu tez ja prostujemy.

   Wage dobieramy przez dolozenie '.sidebar-filters' do sciezki -
   wychodzi (0,4,1), czyli o klase wiecej niz zrodlo. Bez '!important':
   nie jest potrzebne, a utrudnialoby pozniejsze poprawki.
   ============================================================ */

/* ---------- 9a. Pasek przewijania panelu -------------------
   Zrodlo: 'scrollbar-color: #D71920 #1a1a1a' plus trzy reguly
   '::-webkit-scrollbar-*'. Na jasnym panelu wygladalo to jak czarno-czerwona
   wypustka doklejona z innego projektu. */
.bm-shop-wrapper .sidebar-filters {
    scrollbar-width: thin;
    scrollbar-color: rgba(11, 34, 64, .26) var(--cream);
}

.bm-shop-wrapper .sidebar-filters::-webkit-scrollbar {
    width: 8px;
}

.bm-shop-wrapper .sidebar-filters::-webkit-scrollbar-track {
    background: var(--cream);
    border-radius: 999px;
}

.bm-shop-wrapper .sidebar-filters::-webkit-scrollbar-thumb {
    background: rgba(11, 34, 64, .26);
    border-radius: 999px;
}

.bm-shop-wrapper .sidebar-filters::-webkit-scrollbar-thumb:hover {
    background: rgba(11, 34, 64, .42);
}

/* ---------- 9b. Zaznaczenia (checkbox i radio) --------------
   Ksztalty i rozmiary zostawiamy takie, jak zaprojektowala wtyczka
   (18 px, kolo dla radia, zaokraglony kwadrat dla checkboxa, ptaszek
   z dwoch krawedzi) - zmieniamy WYLACZNIE powierzchnie i kolor. */
.bm-shop-wrapper .sidebar-filters .filter-group input[type="checkbox"],
.bm-shop-wrapper .sidebar-filters .filter-group input[type="radio"] {
    background-color: #fff;
    border: 1px solid var(--line);
    box-shadow: none;
}

.bm-shop-wrapper .sidebar-filters .filter-group input[type="checkbox"]:hover,
.bm-shop-wrapper .sidebar-filters .filter-group input[type="radio"]:hover {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(219, 6, 50, .12);
}

.bm-shop-wrapper .sidebar-filters .filter-group input[type="checkbox"]:focus-visible,
.bm-shop-wrapper .sidebar-filters .filter-group input[type="radio"]:focus-visible {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(219, 6, 50, .22);
}

/* Zaznaczone: pelna czerwien marki zamiast ledwie widocznej mgielki
   'rgba(215,25,32,.12)' - na bialym panelu tamta praktycznie znikala. */
.bm-shop-wrapper .sidebar-filters .filter-group input[type="checkbox"]:checked,
.bm-shop-wrapper .sidebar-filters .filter-group input[type="radio"]:checked {
    background-color: var(--red);
    border-color: var(--red);
    box-shadow: none;
}

/* Ptaszek i kropka byly czerwone na czarnym tle. Teraz tlo jest czerwone,
   wiec znacznik musi byc bialy. */
.bm-shop-wrapper .sidebar-filters .filter-group input[type="checkbox"]:checked::before {
    border-right-color: #fff;
    border-bottom-color: #fff;
}

.bm-shop-wrapper .sidebar-filters .filter-group input[type="radio"]::before {
    background-color: #fff;
}

.bm-shop-wrapper .sidebar-filters .filter-group input[type="checkbox"]:disabled,
.bm-shop-wrapper .sidebar-filters .filter-group input[type="radio"]:disabled {
    background-color: var(--cream);
    border-color: var(--line);
    box-shadow: none;
}

/* ---------- 9c. Pola ceny ----------------------------------
   Zrodlo: tlo '#1a1a1a', ramka '#333', bialy tekst - czarne prostokaty
   w jasnej sekcji "Cena". Wyrownujemy do wygladu wyszukiwarki obok. */
.bm-shop-wrapper .sidebar-filters .price-inputs input[type="number"] {
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background-color: #fff;
    font-family: var(--sans);
    font-size: .87rem;
    color: var(--navy);
}

.bm-shop-wrapper .sidebar-filters .price-inputs input[type="number"]:focus {
    outline: none;
    border-color: var(--navy);
}

.bm-shop-wrapper .sidebar-filters .price-inputs input[type="number"]::placeholder {
    color: var(--muted);
    opacity: .75;
}

.bm-shop-wrapper .sidebar-filters .price-inputs span {
    color: var(--muted);
    font-weight: 400;
}

/* Plakietka z wybranym zakresem - pojawia sie dopiero po ustawieniu ceny,
   w zrodle czerwony tekst na '#0a0a0a'. */
.bm-shop-wrapper .sidebar-filters .price-range-info {
    padding: 8px 10px;
    border-radius: var(--r-s);
    background-color: var(--cream);
    color: var(--navy);
    font-family: var(--sans);
    font-size: .8rem;
    font-weight: 600;
}

/* ---------- 9d. Drobiazgi w tej samej palecie ---------------- */

/* Licznik przy opcjach - '#666' i '#777' na kremie to slaby kontrast. */
.bm-shop-wrapper .sidebar-filters .filter-count {
    color: var(--muted);
    font-weight: 400;
}

.bm-shop-wrapper .sidebar-filters .filter-group li.disabled .filter-count {
    color: var(--muted);
    opacity: .6;
}

/* Wyroznienie w komunikacie o filtrach - czerwien wtyczki na czerwien marki. */
.bm-shop-wrapper .filter-info-message strong {
    color: var(--red);
}

/* Krzyzyk zamykajacy panel na telefonie - w zrodle bialy, czyli
   niewidoczny na jasnym tle. */
.bm-shop-wrapper .sidebar-filters .mobile-close-btn {
    color: var(--navy);
}

.bm-shop-wrapper .sidebar-filters .mobile-close-btn:hover {
    color: var(--red);
}

/* Przyciski otwierajace filtry na telefonie - czerwien wtyczki. */
.bm-shop-wrapper .mobile-filters-btn,
.bm-shop-wrapper .mobile-filters-toggle:hover,
.bm-shop-wrapper .mobile-filters-btn:hover {
    background-color: var(--red);
    color: #fff;
}

/* ---------- 9e. Opcje filtra bez <label> --------------------
   Wtyczka buduje liste opcji na DWA sposoby:

     podkategorie   <li><input ...><label for="...">Zewnetrzne</label></li>
     filtry dynamiczne  <li><input ...> Do salonu</li>      <- goly tekst

   Caly punkt 6 celowal w '.filter-group li label', wiec drugi wariant
   nie dostawal ani ukladu, ani koloru - zostawal przy regule wtyczki
   '.filter-group li { color:#cccccc }', czyli jasnoszary tekst na bialym
   panelu. To wlasnie te opcje, ktore "nie pasuja" po rozwinieciu filtrow:
   Pomieszczenie, Rodzaj powierzchni, Wykonczenie i reszta.

   Przenosimy wiersz z etykiety na samo '<li>' - wtedy oba warianty
   wygladaja identycznie, a etykieta (jesli jest) tylko wypelnia wiersz. */
.bm-shop-wrapper .sidebar-filters .filter-group li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--r-xs);
    font-family: var(--sans);
    font-size: .87rem;
    font-weight: 300;
    line-height: 1.45;
    color: var(--ink);
    cursor: pointer;
    transition: background .25s var(--ease);
}

.bm-shop-wrapper .sidebar-filters .filter-group li:hover {
    background: var(--paper);
}

/* Etykieta przestaje byc wierszem - jest juz nim '<li>'. Bez tego
   dostalibysmy podwojny padding tam, gdzie etykieta wystepuje. */
.bm-shop-wrapper .sidebar-filters .filter-group li label {
    display: block;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.bm-shop-wrapper .sidebar-filters .filter-group li.disabled {
    color: var(--muted);
    opacity: .55;
    cursor: not-allowed;
}

/* ---------- 9f. Wyszukiwarka w panelu ----------------------
   Nasza regula z punktu 6 ma taka sama wage jak wtyczkowa (0,2,1)
   i wygrywa tylko dlatego, ze arkusz laduje sie pozniej. Zapisujemy
   to wprost, zeby zmiana kolejnosci wczytywania niczego nie zepsula. */
.bm-shop-wrapper .sidebar-filters .search-input-wrapper input[type="text"] {
    background-color: #fff;
    border: 1px solid var(--line);
    color: var(--navy);
}

.bm-shop-wrapper .sidebar-filters .search-input-wrapper input[type="text"]:focus {
    border-color: var(--navy);
}

.bm-shop-wrapper .sidebar-filters .search-input-wrapper input[type="text"]::placeholder {
    color: var(--muted);
    opacity: .75;
}

.bm-shop-wrapper .sidebar-filters .search-input-wrapper .search-icon {
    color: var(--muted);
}

/* ---------- 9g. Grupa podkategorii -------------------------
   '.subcategory-group' to sekcje "Kategoria farb" i "Kategoria gruntow"
   (7. i 8. dziecko panelu). W zrodle jest to CIEMNA KARTA wyrozniona
   na tle ciemnego panelu:

       .subcategory-group { background-color:#1a1a1a; padding:16px;
                            border-radius:4px; margin-bottom:24px }

   Sama nazwa klasy nie zawiera slowa "filter", wiec przy poprzednim
   przemiataniu wpadla poza zasieg - stad czarny prostokat, ktory zostal
   w calkiem juz jasnym panelu.

   Karty tu NIE ROBIMY - decyzja z 2026-09-01. Wyroznione tlo bylo
   potrzebne tylko po to, zeby sekcja odcinala sie od czarnego panelu.
   Panel jest juz jasny, wiec zadne tlo nie jest potrzebne i sekcja
   zachowuje sie jak kazda inna grupa filtrow.

   Zdejmujemy tlo, ramke i wlasne odstepy ze zrodla. 'padding' i
   'margin-bottom' wracaja do wartosci z punktu 6, zeby odstepy miedzy
   grupami byly rowne. Waga (0,2,0) wystarcza - zrodlo ma (0,1,0). */
.bm-shop-wrapper .subcategory-group {
    padding: 16px 0;
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
}

/* Kreska rozdzielajaca grupy - taka sama jak w kazdej innej '.filter-group'.
   Trzeba ja przywrocic osobno, bo reguly wyzej zeruja caly 'border'. */
.bm-shop-wrapper .sidebar-filters .filter-group.subcategory-group {
    border-bottom: 1px solid var(--line-soft);
}

.bm-shop-wrapper .sidebar-filters .filter-group.subcategory-group:last-child {
    border-bottom: 0;
}

/* ---------- 9h. Plakietka z kodem: szerokosc tekstu ---------
   '.product-code-badge' jest PIERWSZYM dzieckiem '.product-card', a karta
   to 'display:flex; flex-direction:column'. Dopoki dziala na niej
   'position:absolute', plakietka jest poza ukladem i sama zwiera sie
   do tresci. Jesli jednak z jakiegokolwiek powodu pozycjonowanie nie
   zadziala (nadpisanie, starszy arkusz w pamieci przegladarki), element
   wraca do ukladu jako element flex i - przez domyslne
   'align-items: stretch' - ROZCIAGA SIE NA CALA SZEROKOSC KARTY.
   To dokladnie ten "szeroki pasek" zamiast pigulki.

   Zwezanie paddingu i odstepow miedzy literami nie moglo tego naprawic,
   bo szerokosc nie brala sie z tresci, tylko z rozciagniecia.

   Ponizsze trzy wlasciwosci daja szerokosc tekstu i wyrownanie do lewej
   w OBU stanach - i gdy plakietka jest pozycjonowana, i gdy jest zwyklym
   elementem flex. 'align-self' jest bezczynne przy 'position:absolute',
   'max-width:max-content' nie szkodzi przy elemencie flex.

   Waga (0,3,0) - o klase wyzej niz nasza wlasna regula z punktu 3,
   zeby kolejnosc w pliku nie miala tu nic do rzeczy. */
.bm-shop-wrapper .product-card .product-code-badge {
    align-self: flex-start;
    width: auto;
    max-width: max-content;
    flex: 0 0 auto;
    box-sizing: border-box;
}

/* ---------- 9i. Komunikat o wyborze kategorii ---------------
   "Wybierz kategorie Farby lub Grunty, aby uzyskac dostep do
   szczegolowych filtrow."

   Kolor ustawialismy na kontenerze:
       .bm-shop-wrapper .filter-info-message { color: var(--muted) }   (0,2,0)
   ale tresc siedzi w '<p>', a wtyczka maluje wprost jego:
       .filter-info-message p { color:#cccccc }                        (0,1,1)

   To NIE jest przegrana na wadze - to zderzenie dziedziczenia z regula
   bezposrednia. Element trafiony wlasnym selektorem zawsze bije kolor
   odziedziczony po rodzicu, choćby rodzic mial wage nie wiem jak wysoka.
   Dlatego '#cccccc' wygrywalo: jasnoszary tekst na jasnym tle,
   kontrast 1,6:1.

   Wniosek na przyszlosc: przy przemalowywaniu ciemnych motywow
   sprawdzac, czy zrodlo nie koloruje dzieci osobno - ustawienie koloru
   na kontenerze wtedy nic nie da.

   Kolor to '--muted' (#3F4750), czyli ten sam, ktory dostal tekst
   pomocniczy na calej stronie. Na tle '--paper' daje 9,0:1. */
.bm-shop-wrapper .filter-info-message p {
    margin: 0;
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--muted);
}

/* Wyroznienia w tym zdaniu - nazwy kategorii. Zrodlo dawalo im swoja
   czerwien '#D71920'; granat czyta sie tu spokojniej i nie konkuruje
   z czerwona kreska przy krawedzi. */
.bm-shop-wrapper .filter-info-message p strong {
    font-weight: 600;
    color: var(--navy);
}