/* ============================================================
   Benjamin Moore Polska – nowa strona główna
   Wszystko scope'owane pod .bmx aby nie kolidowało z motywem
   ============================================================ */
.bmx *,.bmx *::before,.bmx *::after{box-sizing:border-box}
/* strona pelnoekranowa – kasujemy domyslny margines <body>, inaczej widac bialy pasek przy krawedziach */
html{-webkit-text-size-adjust:100%}
body{margin:0;padding:0;background:#FCFAF6}
/* ============================================================
   CIENIE - jeden komplet na caly serwis
   Ustalone 2026-09-16 (zgloszenie: "cienie kontenerow sa zbyt rozlazle").

   CO BYLO NIE TAK:
   1) ROZMYCIE. '--shadow-m' mial 'blur 40px' przy przesunieciu 14px,
      czyli 2,9 raza wiecej rozmycia niz przesuniecia, a do tego ujemny
      rozrzut -18px. Przy takiej proporcji cien nie czyta sie jak
      uniesienie, tylko jak mgielka pod obiektem - brzeg nie ma sie
      gdzie oprzec, bo rozrzut go odcina.
   2) BRAK STANU HOVER. '--shadow-m' byl JEDNOCZESNIE hoverem kart
      i stanem SPOCZYNKU pieciu innych komponentow (m.in. '.bmx-coty',
      '.bmx-up', modal karty produktu). Hover nie mial dokad urosnac.
   3) ROZSYP. Obok trzech tokenow zylo 15 wartosci wpisanych recznie,
      kazda uzyta doklandie raz: '0 18px 46px -26px', '0 22px 60px -34px',
      '0 16px 44px -20px'... Zadna nie roznila sie na tyle, zeby to
      bylo celowe - to byly kolejne przyblizenia tego samego cienia.
   4) MARTWE TOKENY. 'blog.css' uzywal 'var(--shadow-m)' na elementach
      Oxygena, ktore NIE leza w '.bmx' - a tokeny byly zdefiniowane
      wlasnie w '.bmx'. Trzy hovery na liscie wpisow nie dawaly wiec
      zadnego cienia. Ten sam rodzaj bledu co z 'var(--ease)'
      w 'strony.css'. Dlatego tokeny siedza teraz na ':root'.

   JAK SA ZBUDOWANE: dwie warstwy zamiast jednej.
     - warstwa styku (1-2px, bez rozrzutu) osadza obiekt na tle,
     - warstwa rozproszona daje glebie.
   Rozmycie zeszlo mniej wiecej o polowe, krycie lekko w gore -
   cien jest wezszy i wyrazniejszy zamiast szerokiego i bladego.

   'bm-newhome.css' laduje sie na KAZDYM widoku serwisu (sprawdzone:
   strony Oxygena, sklep, karta produktu, 404), wiec to jedyne miejsce,
   w ktorym te cztery wartosci musza istniec.
   ============================================================ */
:root {
  /* OZDOBNY AKCENT - jedno zrodlo prawdy dla WSZYSTKICH jego wystapien.
     Zgloszenie 2026-09-17: "ozdobny divider jest inny na dole strony od
     tego pod headerem, ile razy mam cie cisnac o spojnosc?".

     Uzasadnialem roznice tym, ze separator nie ma kierunku czytania, wiec
     dalem mu wariant symetryczny. To byl blad: to ten sam znak marki
     i ma wygladac tak samo wszedzie. Wartosci siedza teraz w tokenach,
     wiec nie da sie ich rozjechac przy kolejnej zmianie - poprawka
     w jednym miejscu idzie na wszystkie trzy uzycia:
       1. podkreslnik naglowkow ('.heading-divider', '.bmx-akcent')
       2. srodek poziomego separatora ('.oxel_horizontal_divider__icon')
       3. podzial grup na listach salonow (legenda w 'salony.css') */
  --akcent-szer:148px;
  --akcent-wys:3px;
  --akcent-tlo:linear-gradient(90deg,#0B2240 0%,#12325C 42%,#DB0632 100%);
  --akcent-klin:polygon(0 0, 100% 34%, 100% 100%, 0 100%);

    /* drobne elementy: odznaki, panele boczne, przyklejony naglowek */
    --shadow-s:  0 1px 2px rgba(11, 34, 64, .05), 0 2px 6px -2px rgba(11, 34, 64, .07);
    /* SPOCZYNEK kart i kontenerow */
    --shadow-m:  0 1px 2px rgba(11, 34, 64, .06), 0 6px 16px -8px rgba(11, 34, 64, .22);
    /* HOVER kart i kontenerow - wylacznie stan aktywny, nigdy spoczynek */
    --shadow-mh: 0 2px 4px rgba(11, 34, 64, .07), 0 14px 28px -12px rgba(11, 34, 64, .28);
    /* warstwy nad trescia: mega-menu, modale, duze kadry */
    --shadow-l:  0 2px 6px rgba(11, 34, 64, .07), 0 20px 44px -24px rgba(11, 34, 64, .34);

    /* ---- Promien zaokraglenia ----
       Dolozony do ':root' 2026-09-16 z tego samego powodu, co cienie.
       'blog.css' uzywal 'border-radius: var(--r)' SZESC razy, ale sam
       tokenu nie definiowal, a karty wpisow rysuje Oxygen POZA '.bmx'.
       Token byl tam pusty, cala deklaracja nieprawidlowa - i przegladarka
       odrzucala ja w calosci, zostawiajac ostre rogi. Zmierzone przed
       poprawka: '--r' = "", 'border-radius' = '0px'.

       Dlatego na liscie wpisow rogi byly ostre, a wszedzie indziej
       zaokraglone: to nie byla decyzja projektowa, tylko token poza
       zasiegiem. Te same sciezke mialy 'var(--shadow-m)' w 'blog.css'
       i 'var(--ease)' w 'strony.css'. */
    --r: 18px;

    /* ---- Skala zaokraglen (ustalona 2026-09-16) ----
       Przed konsolidacja w arkuszach lezalo JEDENASCIE wartosci:
       18, 16, 14, 13, 12, 11, 10, 9, 8, 6, 4 px. Pod spodem byla logika
       skalowania (im mniejszy element, tym mniejszy promien), ale w kazdym
       jej stopniu siedzialy 2-3 wartosci uzywane wymiennie.

       Dowod, ze to niespojnosc, a nie skalowanie - 'koszyk.css' nadawal
       TEMU SAMEMU komponentowi WooCommerce dwa rozne promienie zaleznie
       od strony:
           '.payment_box'             12px  (checkout)
           'div.payment_box'          14px  (koszyk)
           'ul.payment_methods > li'  12px  (checkout)
           'ul.wc_payment_methods li' 14px  (koszyk)
       Ten sam boks platnosci, dwa promienie. Roznicy 12 vs 14 px oko nie
       wylapuje, wiec nikt tego nie zglosil przez pol roku.

       Zostaja trzy stopnie. Dobor wedlug ROLI elementu, nie na oko. */
    /* ---- Tla ----
       DOLOZONE 2026-09-16, ten sam blad co przy cieniach i promieniach:
       '--paper' bylo zdefiniowane w SZESCIU arkuszach, ale nie na
       'body.page'. Regula tla wiersza broszur uzywala 'var(--paper)'
       poza '.bmx' i cicho dawala 'transparent'.
       Na ':root' token istnieje wszedzie i temat sie zamyka. */
    --paper: #FCFAF6;   /* cieple tlo stron i siatek kafelkow */
    --cream: #F5F1E9;   /* tlo sekcji wyroznionych */

    --r-s:  12px;   /* wnetrza kart, pola formularzy, wiersze koszyka */

    /* ODSTEP W SIATKACH KART - JEDNA WARTOSC NA CALY SERWIS.
       Zgloszenie 2026-09-17: "ustandaryzuj gap gridow tego typu i niech
       odstep w poziomie i w pionie jest jednakowy". Przed poprawka bylo
       piec roznych wartosci dla tej samej rzeczy: 32, 28, 26, 24 i 12 px.

       NA ':root', NIE W '.bmx' - pierwsze podejscie wstawilo go do '.bmx'
       i siatki na stronach Oxygena (czyli POZA makieta) dostaly wartosc
       pusta, czyli odstep zero. Ten sam blad zjadl juz cienie kart
       na blogu i zaokraglenia wpisow - patrz akapit wyzej. */
    --gap-karty: clamp(18px, 2.4vw, 32px);
    --r-xs:  8px;   /* plakietki, notki, chipy, 'code' */

    /* POZA SKALA, swiadomie:
         999px  pigulki (przyciski akcji),
         50%    kola (ikony, probki),
         8px    zakladki '.bm-folder-tab' - wybor SEMANTYCZNY, nie skalowy:
                odroznia "gdzie jestes" od "dokad idziesz",
         2px    kreski hamburgera - za male, zeby podlegac skali. */
}

.bmx{
  /* --- marka --- */
  --navy:#0B2240;
  --navy-2:#12325C;
  --red:#DB0632;
  --red-dark:#B00427;
  --ink:#171A1E;
  --muted:#3F4750;

  /* --- tła --- */
  --paper:#FCFAF6;
  --cream:#F5F1E9;
  --sand:#EAE3D6;
  --white:#fff;

  --line:rgba(11,34,64,.13);
  --line-soft:rgba(11,34,64,.07);

  /* cienie: patrz blok ':root' powyzej - wspolne dla calego serwisu */

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --pad:clamp(20px,5vw,64px);
  --maxw:1360px;
  /* promien: patrz ':root' powyzej */

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);

  /* zmienna akcentu – sterowana przez JS w sekcji Color Trends */
  --accent:#E8DECF;

  /* maska pociagniecia pedzla — postrzepiona krawedz + odpryski */
  --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");

  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
.bmx img{max-width:100%;display:block}
/* :where() = zerowa specyficznosc, zeby resety nie wygrywaly z klasami komponentow */
:where(.bmx) :where(a){color:inherit;text-decoration:none}
:where(.bmx) :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(.bmx) :where(ul){list-style:none;margin:0;padding:0}
:where(.bmx) :where(h1,h2,h3,h4,h5,p,figure){margin:0}
/* bez border-radius! nadpisywalo zaokraglenie pol i przyciskow przy focusie */
.bmx :focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* POPRAWKA 2026-09-28 (klientka: "komunikat ma czerwona obwodke az do odklikniecia").
   WooCommerce po pokazaniu komunikatu (dodano do koszyka, blad, informacja) daje mu
   tabindex="-1" i przenosi na niego fokus - dla czytnikow ekranu. Przegladarka uznaje to
   za fokus "widoczny" i regula wyzej rysowala czerwona ramke na czyms, czego nie da sie
   kliknac. Fokus zostaje (czytnik nadal odczyta komunikat), znika tylko ramka.
   Przyciski i linki - takze te W komunikacie - zachowuja obwodke z reguly wyzej. */
:is(.woocommerce-message,.woocommerce-error,.woocommerce-info,.woocommerce-NoticeGroup,.woocommerce-notices-wrapper,.wc-block-components-notice-banner)[tabindex="-1"]:is(:focus,:focus-visible),
.bmx :is(.woocommerce-message,.woocommerce-error,.woocommerce-info,.woocommerce-NoticeGroup,.woocommerce-notices-wrapper,.wc-block-components-notice-banner)[tabindex="-1"]:is(:focus,:focus-visible){outline:none}
.bmx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- layout ---------- */
.bmx-wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.bmx-sec{padding-block:clamp(56px,6.5vw,100px);position:relative}
.bmx-sec--tight{padding-block:clamp(40px,4.5vw,68px)}

/* ---------- typografia ---------- */
.bmx-eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);display:inline-flex;align-items:center;gap:10px;margin-bottom:14px
}
.bmx-eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.5}

/* KRESKA Z OBU STRON, GDY UKLAD JEST WYSRODKOWANY (2026-09-17).
   Zgloszenie: "w ukladzie wycentrowanym eyebrow powinien miec kreski
   symetrycznie z lewej i z prawej, nie tylko z lewej".

   DLACZEGO KLASA Z POMIARU, A NIE SAM CSS: nadtytul jest 'inline-flex',
   wiec sam ustawia sie tak, jak ustawia go rodzic - a CSS nie potrafi
   zapytac "czy jestem wysrodkowany". 'text-align' rodzica tego nie
   rozstrzyga: ten sam zapis daje raz uklad do lewej, raz wysrodkowany,
   zaleznie od tego, czy tresc wypelnia wiersz. Ten sam wniosek zapadl
   juz przy akcencie pod naglowkami - i uzywamy tego samego pomiaru,
   w tym samym pliku ('akcent.js').

   STAN DOMYSLNY TO JEDNA KRESKA - i to jest wazne. Druga pojawia sie
   dopiero, gdy pomiar potwierdzi wysrodkowanie. Dzieki temu uklad,
   ktory centruje sie dopiero powyzej jakiegos progu szerokosci, nie
   pokazuje drugiej kreski, dopoki jest dosuniety do lewej - a nie
   odwrotnie, bo blad "dwie kreski przy ukladzie do lewej" widac od razu,
   a "jedna kreska przy wysrodkowanym" to tylko brak ozdobnika. */
.bmx-eyebrow--srodek::after{content:"";width:26px;height:1px;background:currentColor;opacity:.5}

.bmx-eyebrow--plain::before,
.bmx-eyebrow--plain::after{display:none}
.bmx-h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,4.1vw,3.7rem);line-height:1.1;letter-spacing:-.018em;
  color:var(--navy)
}
.bmx-h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.65rem,2.9vw,2.55rem);line-height:1.16;letter-spacing:-.015em;
  color:var(--navy)
}
.bmx-h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.25rem,1.9vw,1.65rem);line-height:1.22;color:var(--navy)
}
.bmx-h1 em,.bmx-h2 em{font-style:italic;font-weight:400;color:var(--red)}
.bmx-lead{font-size:clamp(1rem,1.15vw,1.125rem);color:var(--muted);max-width:56ch;font-weight:400}
.bmx-kicker{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--muted)}

.bmx-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 24px;margin-bottom:clamp(26px,2.8vw,42px)}
.bmx-head__t{max-width:620px}
.bmx-head .bmx-lead{margin-top:14px}

/* ---------- przyciski ---------- */
.bmx-btn{
  --bg:var(--red);--fg:#fff;--bd:var(--red);
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-size:.735rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  border-radius:999px;transition:color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);
  will-change:transform
}
/* FALLBACK (stare przegladarki): farba podnosi sie od dolu z falista krawedzia */
.bmx-btn::after{
  content:"";position:absolute;left:-6%;right:-6%;bottom:-2px;height:210%;z-index:-1;
  background:var(--fill,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)
}
.bmx-btn:hover,.bmx-btn:focus-visible{transform:translateY(-2px);border-color:var(--fill,var(--navy))}
.bmx-btn:hover::after,.bmx-btn:focus-visible::after{
  transform:translateY(0) rotate(0deg);border-radius:0
}

/* WLASCIWY EFEKT: pociagniecie pedzla.
   Maska jest 2x szersza od przycisku — lewa polowa to farba, prawa przezroczysta.
   Przesuwajac maske z prawej na lewa, postrzepiona krawedz przejezdza przez przycisk
   jak walek. Rozmiar maski jest staly, wiec krawedz sie nie deformuje. */
@supports ((-webkit-mask-image:url('')) or (mask-image:url(''))){
  .bmx-btn::after{
    left:0;right:0;top:0;bottom:0;height:auto;border-radius:0;transform:none;
    /* matowa faktura farby — delikatne smugi po walku */
    background:
      repeating-linear-gradient(112deg,rgba(255,255,255,.022) 0 2px,rgba(255,255,255,0) 2px 11px),
      var(--fill,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)
  }
  .bmx-btn:hover::after,.bmx-btn:focus-visible::after{
    transform:none;border-radius:0;
    -webkit-mask-position:0% center;        mask-position:0% center
  }
}
.bmx-btn--ghost{--bg:transparent;--fg:var(--navy);--bd:rgba(11,34,64,.35)}
.bmx-btn--ghost:hover{color:#fff}
/* bialy przycisk stoi na granacie/zdjeciu — zamalowujemy go CZERWIENIA,
   inaczej granat na granacie znikalby */
.bmx-btn--light{--bg:#fff;--fg:#0B2240;--bd:transparent;--fill:var(--red);color:#0B2240}
.bmx-btn--light:hover{color:#fff}
.bmx-btn--sm{padding:11px 22px;font-size:.68rem}

/* uwaga: NIE animujemy tu `gap` – zmiana szerokosci elementu lamala linie przy hover.
   Rusza sie tylko strzalka, uklad zostaje nietkniety. */
.bmx-link{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--red);
  transition:color .35s var(--ease)
}
.bmx-link svg{flex-shrink:0;transition:transform .4s var(--ease)}
.bmx-link:hover svg,a:hover>.bmx-link svg{transform:translateX(5px)}

/* ================= REVEAL / ANIMACJE ================= */
.bmx [data-rv]{opacity:0;transition:opacity .95s var(--ease),transform 1.05s var(--ease),filter .95s var(--ease)}
.bmx [data-rv="up"]{transform:translateY(34px)}
.bmx [data-rv="fade"]{}
.bmx [data-rv="left"]{transform:translateX(-40px)}
.bmx [data-rv="right"]{transform:translateX(40px)}
.bmx [data-rv="zoom"]{transform:scale(.94);filter:blur(4px)}
.bmx [data-rv].is-in{opacity:1;transform:none;filter:none}

/* maskowane wejście linii tekstu */
.bmx-mask{display:block;overflow:hidden}
.bmx-mask>span{display:block;transform:translateY(105%);transition:transform 1.15s var(--ease)}
.bmx-mask.is-in>span,.is-in>.bmx-mask>span{transform:none}

/* ================= PASEK POSTĘPU ================= */
.bmx-prog{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--red);z-index:1000;pointer-events:none}

/* ================= TOPBAR ================= */
.bmx-top{background:var(--navy);color:rgba(255,255,255,.86);font-size:.72rem;letter-spacing:.06em}
.bmx-top__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px;padding-block:8px}
.bmx-tick{position:relative;height:20px;line-height:20px;overflow:hidden;flex:1;min-width:0}
.bmx-tick li{
  position:absolute;inset:0;display:flex;align-items:center;gap:9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;visibility:hidden;transform:translateY(100%);
  transition:opacity .6s var(--ease),transform .7s var(--ease),visibility .6s
}
.bmx-tick li.is-on{opacity:1;visibility:visible;transform:none}
.bmx-tick li.is-out{opacity:0;visibility:visible;transform:translateY(-100%)}
.bmx-tick b{color:#fff;font-weight:600}
.bmx-top__r{display:flex;align-items:center;gap:18px;flex-shrink:0}
.bmx-top__r a{opacity:.8;transition:opacity .3s}
.bmx-top__r a:hover{opacity:1}
.bmx-lang{display:flex;gap:7px;align-items:center}
.bmx-lang a{font-weight:600;letter-spacing:.1em}
.bmx-lang a[aria-current]{color:#fff;opacity:1}
@media(max-width:820px){.bmx-top__r .bmx-hide-sm{display:none}}

/* ================= HEADER ================= */
.bmx-hdr{position:sticky;top:0;z-index:900;background:rgba(252,250,246,.82);backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);border-bottom:1px solid transparent;transition:border-color .4s,background .4s,box-shadow .4s}
.bmx-hdr.is-stuck{border-color:var(--line-soft);box-shadow:var(--shadow-s)}
.bmx-hdr__in{display:flex;align-items:center;gap:20px;min-height:78px;transition:min-height .4s var(--ease)}
.bmx-hdr.is-stuck .bmx-hdr__in{min-height:66px}
.bmx-logo{flex-shrink:0;display:block}
.bmx-logo img{height:52px;width:auto;transition:height .4s var(--ease)}
.bmx-hdr.is-stuck .bmx-logo img{height:44px}
@media(max-width:520px){.bmx-logo img{height:44px}}

/* nav rozciagniety na cala wysokosc naglowka — inaczej hover gubi sie w pustce
   miedzy linkiem a wysuwanym menu i panel zamyka sie w polowie ruchu myszy */
.bmx-hdr__in>nav{align-self:stretch;display:flex;margin-inline:auto}
.bmx-nav{display:flex;align-items:stretch;gap:2px}
.bmx-nav>li{display:flex;align-items:center}
.bmx-nav>li>a,.bmx-nav>li>button{
  display:flex;align-items:center;gap:6px;padding:10px 13px;border-radius:999px;
  font-size:.925rem;font-weight:500;color:var(--navy);position:relative;
  transition:background .35s var(--ease),color .35s var(--ease)
}
.bmx-nav>li>a::after,.bmx-nav>li>button::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:1px;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)
}
.bmx-nav>li:hover>a::after,.bmx-nav>li:hover>button::after{transform:scaleX(1)}
.bmx-nav>li:hover>a,.bmx-nav>li:hover>button{color:var(--red)}
.bmx-nav .bmx-chev{transition:transform .35s var(--ease)}
.bmx-nav li:hover .bmx-chev{transform:rotate(180deg)}

.bmx-tools{display:flex;align-items:center;gap:6px;flex-shrink:0}
.bmx-icon{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--navy);
  position:relative;transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)
}
.bmx-icon:hover{background:var(--cream);color:var(--red);transform:translateY(-1px)}
.bmx-badge{
  position:absolute;top:4px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-xs);
  background:var(--red);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1
}
/* 'align-content:center' JEST TU KONIECZNE.
   Zgloszenie 2026-09-17: "X do zamykania mobile menu sie rozjezdza,
   nie schodzi do ksztaltu X".

   'place-items' ustawia tylko polozenie kazdej kreski W JEJ WIERSZU.
   O tym, jak wysokie sa wiersze, decyduje 'align-content', a jego
   wartosc domyslna w siatce to rozciagniecie - trzy wiersze rozlazily
   sie wiec na cale 42 px i srodki kresek staly co 14 px, nie co 6,5.
   Obroty w stanie 'is-on' sa liczone na 6,5 px, wiec kreski nie
   spotykaly sie w jednym punkcie i zamiast X wychodzil "daszek". */
.bmx-burger{display:none;width:42px;height:42px;border-radius:50%;place-items:center;align-content:center}
.bmx-burger span{display:block;width:19px;height:1.5px;background:var(--navy);border-radius:2px;transition:transform .4s var(--ease),opacity .3s}
.bmx-burger span+span{margin-top:5px}
.bmx-burger.is-on span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.bmx-burger.is-on span:nth-child(2){opacity:0}
.bmx-burger.is-on span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* --- mega menu --- */
.bmx-mega{
  position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:1px solid var(--line-soft);
  box-shadow:var(--shadow-l);
  opacity:0;visibility:hidden;transform:translateY(-12px);pointer-events:none;
  /* 140 ms zwloki przy zamykaniu — drobne zjechanie myszka nie zwija menu */
  transition:opacity .3s var(--ease) .14s,transform .38s var(--ease) .14s,visibility .3s .14s
}
.bmx-hdr__in{position:static}
.bmx-nav li.bmx-has-mega{position:static}
.bmx-nav li.bmx-has-mega:hover .bmx-mega,.bmx-mega:hover{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition-delay:0s
}
.bmx-mega__in{display:grid;grid-template-columns:repeat(4,1fr) 1.25fr;gap:34px;padding-block:40px 44px}
.bmx-mega h4{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:600;margin-bottom:14px}
.bmx-mega li+li{margin-top:2px}
.bmx-mega li a{display:block;padding:5px 0;font-size:.855rem;color:var(--navy);opacity:.82;transition:opacity .25s,transform .3s var(--ease),color .25s}
.bmx-mega li a:hover{opacity:1;color:var(--red);transform:translateX(4px)}
.bmx-mega__promo{background:var(--cream);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.bmx-mega__promo img{width:100%;height:150px;object-fit:cover;transition:transform .8s var(--ease)}
.bmx-mega__promo:hover img{transform:scale(1.06)}
.bmx-mega__promo div{padding:18px 20px 22px}
.bmx-mega__promo p{font-size:.82rem;color:var(--muted);margin:6px 0 14px}
@media(max-width:1180px){.bmx-mega__in{grid-template-columns:repeat(3,1fr)}.bmx-mega__promo{display:none}}

/* --- mobilne menu --- */
/* Gora panelu to dol naglowka - liczbe podaje 'bm-newhome.js'
   w chwili otwarcia (patrz komentarz przy 'open'). 130 px to wartosc
   awaryjna: pasek 51 + naglowek 79, czyli stan na gorze strony. */
.bmx-mob{
  position:fixed;inset:var(--bmx-mob-gora,130px) 0 0;z-index:950;background:var(--paper);
  /* ODSUNIECIE MUSI UWZGLEDNIC GORNY OFFSET PANELU.
     Zgloszenie 2026-09-17: "cos jest nie tak z paskiem nad headerem,
     zamiast niego jest biala przestrzen".

     Panel zaczyna sie pod naglowkiem (130 px), wiec jest o tyle NIZSZY
     niz ekran: przy 844 px ma 714 px. '-110%' to 785 px, czyli o 59 px
     za malo - dolna krawedz zamknietego panelu zatrzymywala sie na
     59 px i kremowym tlem zakrywala granatowy pasek (0-51 px).
     Widac tam bylo nawet przycisk "Znajdz swoj kolor" z jego dolu.

     Procent liczy sie od WLASNEJ wysokosci elementu, wiec sam procent
     tego nie zalatwi - trzeba dolozyc odsuniecie od gory. */
  transform:translateY(calc(-100% - var(--bmx-mob-gora,130px)));
  transition:transform .7s var(--ease);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:none
}
.bmx-mob.is-open{transform:none}
.bmx-mob__in{padding:24px var(--pad) 60px;min-height:100%}
.bmx-mob nav>ul>li{border-bottom:1px solid var(--line-soft)}
.bmx-mob nav>ul>li>a{
  display:block;padding:19px 0;font-family:var(--serif);font-size:1.55rem;font-weight:500;color:var(--navy);
  opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)
}
.bmx-mob.is-open nav>ul>li>a{opacity:1;transform:none}
.bmx-mob__cta{display:flex;flex-direction:column;gap:12px;margin-top:34px}
.bmx-mob__meta{margin-top:34px;font-size:.82rem;color:var(--muted);line-height:1.9}
.bmx-mob__meta a{color:var(--navy);font-weight:500}
@media(max-width:1080px){
  .bmx-nav{display:none}
  .bmx-burger{display:grid}
  .bmx-mob{display:block}
  .bmx-tools .bmx-icon--acc{display:none}
}

/* ================= HERO ================= */
.bmx-hero{position:relative;min-height:clamp(560px,88svh,900px);display:flex;align-items:center;overflow:clip;background:var(--cream)}
.bmx-hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* Zdjecia hero leza na sobie. Widocznosc steruje MASKA — nowe zdjecie
   "zamalowuje" poprzednie skosnym, miekkim przetarciem, jak pociagniecie walka. */
.bmx-hero__bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;
  transform:scale(1.1);
  -webkit-mask-image:linear-gradient(102deg,#000 0 42%,rgba(0,0,0,0) 58%);
          mask-image:linear-gradient(102deg,#000 0 42%,rgba(0,0,0,0) 58%);
  -webkit-mask-size:260% 100%;      mask-size:260% 100%;
  -webkit-mask-repeat:no-repeat;    mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;     mask-position:100% 0;
  transition:-webkit-mask-position 1.25s cubic-bezier(.5,.03,.18,1),
                     mask-position 1.25s cubic-bezier(.5,.03,.18,1),
             transform 9s var(--ease)
}
.bmx-hero__bg img.is-on{
  -webkit-mask-position:0% 0;       mask-position:0% 0;
  transform:scale(1)
}
/* brak maski (stare przegladarki) -> zwykly crossfade */
@supports not ((-webkit-mask-image:url('')) or (mask-image:url(''))){
  .bmx-hero__bg img{opacity:0;transition:opacity 1s var(--ease),transform 9s var(--ease)}
  .bmx-hero__bg img.is-on{opacity:1}
}
/* Przeslona na calej sekcji.
   ZLAGODZONA 2026-09-16 na prosbe klientki: "gradient byl mocno na polowie
   sekcji (...) powinien byc ograniczony do napisow tak jak byl".

   CO BYLO: krycie .985 na starcie, .78 jeszcze w polowie szerokosci
   i zanik dopiero na 100%. Zdjecie hero bylo przez to wyprane na ponad
   polowie kadru - a to zdjecie jest tu glowna trescia, nie tlem.

   CO JEST: ta sama przeslona schodzi do zera juz na 74% szerokosci
   i zaczyna od .72 zamiast .985. Czytelnosc przejmuje POSWIATA PRZYPIETA
   DO BLOKU TEKSTU (nizej, '.bmx-hero__t::before') - ona rosnie zamiast
   niej. To wlasciwe miejsce na te robote: poswiata idzie za tekstem,
   wiec trzyma sie tak samo na 1280 i na 2560 px, a przeslona na calej
   sekcji zawsze zabiera tyle samo zdjecia niezaleznie od tego, ile
   tekstu naprawde jest.

   SPRAWDZONE NA NAJCIEMNIEJSZYM ZDJECIU: hero ma 8 kadrow przelaczanych
   probkami Color Trends. Przy 'Narragansett Green' (najciemniejszy)
   naglowek, lead i nadtytul zostaja w pelni czytelne. To byl warunek,
   dla ktorego poprzednia wersja byla tak mocna. */
.bmx-hero__bg::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(252,250,246,.72) 0%,
      rgba(252,250,246,.5) 26%,
      rgba(252,250,246,.22) 44%,
      rgba(252,250,246,.04) 60%,
      rgba(252,250,246,0) 74%),
    linear-gradient(to top,rgba(252,250,246,.5),transparent 34%)
}
/* PRZESLONA NA TELEFONIE - ZLAGODZONA 2026-09-17.
   Zgloszenie: "zmniejsz troche rozpietosc bieli pod naglowkiem i tekstem
   na mobile, zeby kolor zdjecia spod spodu mial szanse sie pokazac".

   CO BYLO: .985 na starcie i jeszcze .93 na 34% wysokosci - gorna trzecia
   kadru byla praktycznie zamalowana. Zmierzone przy 390 px na wszystkich
   osmiu zdjeciach hero: tlo za naglowkiem wychodzilo (221-228) na kanal,
   czyli niemal biel, a jasnosc kadru 0,65-0,90.

   DLACZEGO MOZNA BYLO ZDJAC: czytelnosc nie stoi na tej przeslonie.
   Trzymaja ja dwie inne rzeczy, obie przypiete do TEKSTU, a nie do
   sekcji: poswiata '.bmx-hero__t::before' i trojwarstwowy 'text-shadow'
   na naglowku, leadzie i nadtytule. Pomiar kontrastu przed zmiana dawal
   11,6-12,5 dla naglowka i 8,6-9,6 dla leadu, przy wymaganych 4,5 (AA).
   Zapas byl wiec ponad dwukrotny i to on idzie teraz na zdjecie.

   Dolne 100% zostaje wysoko - tam zaczyna sie karta koloru roku
   i przejscie do nastepnej sekcji. */
@media(max-width:820px){
  .bmx-hero__bg::after{
    background:linear-gradient(180deg,
      rgba(252,250,246,.8) 0%,
      rgba(252,250,246,.58) 34%,
      rgba(252,250,246,.24) 60%,
      rgba(252,250,246,.06) 78%,
      rgba(252,250,246,.8) 100%)
  }
  .bmx-hero__bg img{object-position:center 62%}
}
.bmx-hero__in{position:relative;z-index:2;width:100%;padding-block:clamp(60px,9vw,110px)}
.bmx-hero__t{max-width:min(660px,58%)}
@media(max-width:1080px){.bmx-hero__t{max-width:min(620px,80%)}}
@media(max-width:820px){.bmx-hero__t{max-width:100%}}
/* Miekka poswiata PRZYPIETA DO BLOKU TEKSTU — nie do szerokosci ekranu,
   wiec trzyma czytelnosc tak samo na 1280 jak na 2560 px i nad kazdym zdjeciem.
   Rozmyta plama swiatla + halo na samych literach. */
.bmx-hero__t{position:relative}
/* WZMOCNIONA 2026-09-16 - przejmuje czytelnosc po zlagodzonej przeslonie
   sekcji. Zasieg troche szerszy i rozmycie wieksze, zeby krawedz plamy
   nie rysowala sie na zdjeciu. */
.bmx-hero__t::before{
  content:"";position:absolute;inset:-13% -34% -16% -18%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(252,250,246,.99) 0%,
    rgba(252,250,246,.97) 48%,
    rgba(252,250,246,.9) 62%,
    rgba(252,250,246,.5) 80%,
    rgba(252,250,246,0) 97%);
  filter:blur(30px)
}
/* NA TELEFONIE POSWIATA JEST WEZSZA I SLABSZA.
   Zgloszenie 2026-09-17: "zmniejsz troche rozpietosc bieli pod
   naglowkiem i tekstem na mobile, zeby kolor zdjecia spod spodu mial
   szanse sie pokazac".

   To wlasnie ta poswiata, a nie przeslona sekcji, robila biel za
   tekstem: przy 390 px blok tekstu jest na CALA szerokosc, a wciecia
   '-34%' i '-18%' rozciagaly plame daleko poza ekran, przy kryciu .99.
   Efekt: caly gorny pas hero zamalowany na bialo.

   Zmieniamy dwie rzeczy: plama trzyma sie blizej tekstu i schodzi
   z .99 na .78. Gradient idzie w pionie, bo na telefonie wiersze
   biegna przez cala szerokosc - poziomy zanik ucinalby konce wierszy.

   Zapas na to byl: pomiar przed zmiana dawal 11,6-12,5 kontrastu dla
   naglowka i 8,6-9,6 dla leadu przy wymaganych 4,5 (AA). */
@media(max-width:820px){
  .bmx-hero__t::before{
    inset:-6% -10% -8% -10%;
    background:linear-gradient(180deg,
      rgba(252,250,246,.62) 0%,
      rgba(252,250,246,.78) 14%,
      rgba(252,250,246,.78) 76%,
      rgba(252,250,246,.34) 94%,
      rgba(252,250,246,0) 100%);
    filter:blur(24px)
  }
}

.bmx-hero h1,.bmx-hero__sub,.bmx-hero .bmx-eyebrow{
  text-shadow:
    0 0 2px rgba(252,250,246,.98),
    0 0 12px rgba(252,250,246,.95),
    0 0 34px rgba(252,250,246,.8)
}
.bmx-hero__sub{color:#2C3543}
.bmx-hero h1{margin-bottom:26px}
.bmx-hero__sub{font-size:clamp(.98rem,1.2vw,1.1rem);max-width:44ch;font-weight:400;margin-bottom:clamp(34px,4vw,52px)}
.bmx-hero__sub b{font-weight:500;color:var(--navy)}
.bmx-hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.bmx-hero__cta .bmx-btn{box-shadow:var(--shadow-m)}
.bmx-hero__cta .bmx-btn--ghost{background:rgba(252,250,246,.78)}

/* karta koloru roku */
.bmx-coty{
  display:block;
  position:absolute;right:var(--pad);bottom:clamp(30px,5vw,62px);z-index:3;width:min(430px,88vw);
  background:#FFFDFA;
  border:1px solid rgba(255,255,255,.9);border-radius:var(--r);padding:22px 22px 20px;
  box-shadow:var(--shadow-l);
  /* stan bazowy = stan koncowy, animacja tylko go poprzedza.
     Dzieki temu karta jest widoczna nawet gdy animacja sie nie wykona. */
  animation:bmx-coty-in 1.35s var(--ease) both
}
@keyframes bmx-coty-in{
  0%,26%{opacity:0;transform:translateY(28px) scale(.97)}
  100%{opacity:1;transform:none}
}
.bmx-coty__top{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.bmx-coty__lbl{display:block;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--red)}
.bmx-coty__nm{display:block;font-family:var(--serif);font-weight:500;font-size:1.62rem;line-height:1.12;color:var(--navy);margin-top:6px;transition:color .5s var(--ease)}
.bmx-coty__no{display:block;font-size:.74rem;color:var(--muted);letter-spacing:.06em;margin-top:4px}
.bmx-coty__chip{
  width:62px;height:62px;border-radius:50%;flex-shrink:0;order:-1;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 4px 12px -6px rgba(0,0,0,.45);
  transition:background .7s var(--ease)
}
/* --- klikalne probniki: zmieniaja zdjecie w tle hero --- */
/* flex zamiast sztywnych 8 kolumn — dziala dla 4, 6, 8, 10, 12... odcieni.
   min/max szerokosci pilnuja, zeby przy malej liczbie kolorow probniki nie
   urosly do absurdu, a przy duzej — zeby zawinely sie w rowny drugi rzad. */
.bmx-coty__grid{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:20px;--per:8}
.bmx-coty__grid button{
  flex:0 0 calc((100% - (var(--per) - 1) * 9px) / var(--per));
  min-width:20px
}
.bmx-coty__grid button{
  position:relative;aspect-ratio:1;border-radius:50%;background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
  opacity:.72;
  transition:transform .45s var(--ease),box-shadow .5s var(--ease),opacity .4s var(--ease)
}
/* niewidoczne powiekszenie pola dotyku do ~46px — same kolka maja ~38px */
.bmx-coty__grid button::before{content:"";position:absolute;inset:-7px;border-radius:50%}
.bmx-coty__grid button:hover{opacity:1;transform:translateY(-3px)}

/* WYBRANY: pelne nasycenie, jasny pierscien WEWNATRZ probki (nie wychodzi
   poza kolko, wiec nie zderza sie z sasiadami) + delikatny cien pod spodem */
.bmx-coty__grid button[aria-selected="true"]{
  opacity:1;transform:translateY(-3px);
  box-shadow:
    inset 0 0 0 3px #FFFDFA,
    inset 0 0 0 4.5px rgba(11,34,64,.55),
    0 8px 16px -8px rgba(11,34,64,.65)
}
/* kropka pod aktywna probka — dodatkowy, czytelny znacznik */
.bmx-coty__grid button::after{
  content:"";position:absolute;left:50%;bottom:-9px;width:4px;height:4px;border-radius:50%;
  background:var(--navy);transform:translateX(-50%) scale(0);opacity:0;
  transition:transform .4s var(--ease),opacity .35s var(--ease)
}
.bmx-coty__grid button[aria-selected="true"]::after{transform:translateX(-50%) scale(1);opacity:1}
@media(max-width:420px){.bmx-coty__grid{gap:7px}}

/* ---------- PROBNIK JAKO PIONOWY PASEK PRZY PRAWEJ KRAWEDZI ----------
   Polecenie 2026-09-17: "na mobile po prawej w hero waski div z samymi
   kolkami, gdzie mozna przeklikac probki, i niech w miare scrollowania
   zjezdza nizej do diva z nazwami i linkiem do kolekcji".

   Kolka wychodza z karty i staja w pionie przy prawej krawedzi ekranu -
   pod kciukiem, bez przewijania. Nazwa, numer i odnosnik zostaja
   w karcie; zmiana kolka przepisuje je tak samo jak wczesniej, bo
   to ten sam element '#bmxCotySw' i ten sam skrypt.

   PROG TRZYMA SKRYPT, NIE ARKUSZ. Pasek musi byc dzieckiem '.bmx-hero',
   zeby 'right' liczyl sie od krawedzi EKRANU. Anchorowanie do karty
   sie nie sprawdzilo: karta ma 'max-width:420px', wiec przy 599 px
   konczyla sie 159 px przed krawedzia i pasek wisial na srodku,
   na naglowku i przyciskach. Skoro przeniesienie robi skrypt, to on
   pilnuje progu i nadaje klase - arkusz opisuje tylko stan.

   PRAWY PAS JEST ZAREZERWOWANY: tekst hero i karta dostaja wieksze
   wciecie z prawej, zeby pasek nigdy na nie nie wszedl.

   '.bmx-hero__in' nosi takze klase '.bmx-wrap', wiec podajemy PELNE
   wciecie razem z '--pad' - inaczej 56 px zastapiloby wciecie sekcji
   i tekst konczylby sie 20 px dalej w prawo niz karta.

   Zjazd steruje '--bmx-pasek' ustawiany w 'bm-newhome.js'.
   --------------------------------------------------------------- */
.bmx-hero--pasek .bmx-hero__in{padding-right:calc(var(--pad) + 56px)}

/* '.bmx-hero--pasek .bmx-coty' (0,2,0), bo blok '@media(max-width:1080px)'
   nizej ustawia 'margin-inline:var(--pad)' i przy rownej wadze wygrywal
   kolejnoscia - pasek wychodzil wtedy poza ekran. */
.bmx-hero--pasek .bmx-coty{margin-right:calc(var(--pad) + 56px)}

.bmx-coty__grid.bmx-pasek{
  position:absolute;right:var(--pad);top:var(--bmx-pasek,0px);z-index:4;
  flex-direction:column;flex-wrap:nowrap;align-items:center;
  width:36px;gap:9px;margin:0;
  padding:9px 0;
  background:rgba(252,250,246,.82);
  border:1px solid rgba(255,255,255,.9);
  border-radius:999px;
  box-shadow:var(--shadow-m);
  backdrop-filter:blur(7px)
}

/* Bazowa regula rozdziela szerokosc miedzy osiem kolumn ('--per'),
   w pionie nie ma czego dzielic - stad 'flex:none' i staly rozmiar. */
.bmx-coty__grid.bmx-pasek button{flex:none;width:26px;height:26px;min-width:0;opacity:.92}
.bmx-coty__grid.bmx-pasek button:hover{transform:none}

/* Podpis pod kolkiem ('::after') nie miesci sie w pasku 36 px. */
.bmx-coty__grid.bmx-pasek button::after{display:none}
@media(max-width:1080px){
  /* hero przestaje być flexem – karta koloru roku układa się POD treścią */
  .bmx-hero{display:block}

  /* ODSTEP POD KARTA NALEZY DO HERO, NIE DO KARTY.
     Zgloszenie klientki 2026-09-17: "pod okienkiem wyboru probki jest
     bialy pasek ktory nic nie wnosi".

     Zmierzone: hero konczylo sie na 873 px, a nastepna sekcja zaczynala
     na 921 - miedzy nimi 48 px pustki. To byl 'margin-bottom' karty,
     ktory WYCHODZIL POZA hero i odslanial tlo strony. Karta jest ostatnim
     dzieckiem, wiec jej dolny margines nie mial czego popychac w srodku
     i uciekal na zewnatrz.

     Ten sam odstep jako 'padding-bottom' hero zostaje W SRODKU: przedluza
     kremowe tlo i zdjecie zamiast robic bialy pas. */
  .bmx-hero{padding-bottom:clamp(48px,7vw,72px)}

  .bmx-coty{
    /* relative (nie static) – inaczej tlo hero z z-index:0 przykryloby karte */
    position:relative;z-index:3;width:auto;max-width:420px;
    inset:auto;
    margin-inline:var(--pad);margin-bottom:0;
    animation:none;opacity:1;transform:none;box-shadow:var(--shadow-m)
  }
}

.bmx-scroll{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--navy);
  text-shadow:0 1px 10px rgba(252,250,246,.9);
  opacity:0;animation:bmx-fade 1s 1.9s forwards
}
@keyframes bmx-fade{to{opacity:1}}
.bmx-scroll i{display:block;width:1px;height:42px;background:linear-gradient(var(--navy),transparent);position:relative;overflow:hidden}
.bmx-scroll i::after{content:"";position:absolute;top:-42px;left:0;width:1px;height:42px;background:var(--red);animation:bmx-drop 2.2s var(--ease-io) infinite}
@keyframes bmx-drop{0%{top:-42px}55%,100%{top:42px}}
@media(max-width:1080px){.bmx-scroll{display:none}}

/* ================= MARQUEE ================= */
.bmx-mq{background:var(--navy);color:rgba(255,255,255,.9);padding-block:15px;overflow:hidden;position:relative}
.bmx-mq__t{display:flex;width:max-content;animation:bmx-mq 42s linear infinite}
.bmx-mq:hover .bmx-mq__t{animation-play-state:paused}
.bmx-mq__g{display:flex;align-items:center;flex-shrink:0}
.bmx-mq__g span{
  display:flex;align-items:center;gap:16px;padding-inline:26px;white-space:nowrap;
  font-size:.735rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500
}
.bmx-mq__g span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--red);flex-shrink:0}
@keyframes bmx-mq{to{transform:translateX(-50%)}}

/* ================= SIATKA PRODUKTÓW ================= */
.bmx-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-karty)}
@media(max-width:1080px){.bmx-prods{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.bmx-prods{grid-template-columns:repeat(2,1fr);gap:12px}}
.bmx-card{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;position:relative;isolation:isolate;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .45s
}
.bmx-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-mh);border-color:transparent}
/* Ramka zdjecia ma DWA WIERSZE: plakietka, pod nia puszka.
   Wiersz pierwszy jest 'auto', wiec na kartach bez plakietki ma zero
   wysokosci i puszka zajmuje cala ramke. Dlatego obrazek ma wpisany
   'grid-row: 2' - bez tego na takiej karcie wskoczylby do wiersza
   pierwszego i splaszczyl sie do wlasnej wysokosci. */
.bmx-card__img{
  position:relative;aspect-ratio:1/1;display:grid;
  grid-template-rows:auto 1fr;row-gap:10px;
  place-items:center stretch;padding:10% 10% 12%;
  background:var(--tint,var(--cream));overflow:hidden;transition:background .6s var(--ease)
}
.bmx-card__img img{
  grid-row:2;min-height:0;
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 16px 26px rgba(11,34,64,.16));
  transition:transform .75s var(--ease)
}
.bmx-card:hover .bmx-card__img img{transform:scale(1.09) translateY(-4px)}
/* PLAKIETKA NIE LEZY NA PUSZCE - MA SWOJ WIERSZ.
   ==================================================
   Zgloszenie klientki 2026-09-17: "cos tu sie na siebie ponakladalo",
   po pierwszej probie "puszka nadal nachodzi na pill".

   Pierwsze podejscie (samo 'z-index') bylo za slabe: plakietka rysowala
   sie juz NAD puszka, ale nadal NA NIEJ lezala. Zmierzone przy 390 px:
   ramka 167x167, wciecie 12% = 20 px, wiec puszka zaczynala sie na
   20 px, a plakietka zajmowala pasmo 8-26 px.

   To samo dzialo sie na desktopie - przy 1440 px puszka zaczynala sie
   na 34 px, a plakietka konczyla na 40. Tam bylo mniej widoczne, bo
   trafiala na plaskie wieko, ale to ta sama usterka. Stad uklad
   dwuwierszowy na WSZYSTKICH szerokosciach, a nie tylko na telefonie.

   Wciecie boczne zeszlo z 16% na 10%, zeby "Chwilowo niedostepny"
   (134 px) miescilo sie w jednym wierszu. Puszka na tym nie traci:
   ogranicza ja wysokosc ramki, nie szerokosc.
   ================================================== */
.bmx-card__tag{
  grid-row:1;justify-self:start;background:rgba(255,255,255,.92);color:var(--navy);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:6px 11px;border-radius:999px;
  backdrop-filter:blur(6px)
}

/* Na waskiej karcie ten sam napis w pismie .6rem z odstepem .14em
   zajmowal 155 z 167 px szerokosci ramki i lamal sie na dwa wiersze
   rozstrzelonych wersalikow. Scieramy go do rozmiaru znacznika. */
@media (max-width: 599px) {
  .bmx-card__img{padding:10px 8% 12%;row-gap:8px}

  .bmx-card__tag{
    padding:4px 8px;
    font-size:.5rem;letter-spacing:.07em;line-height:1.3
  }
}
.bmx-card__tag--red{background:var(--red);color:#fff}
.bmx-card__b{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;gap:7px}
.bmx-card__nm{font-size:.955rem;font-weight:600;color:var(--navy);line-height:1.32}
.bmx-card__d{font-size:.815rem;color:var(--muted);font-weight:400;flex:1}
.bmx-card__f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding-top:14px;border-top:1px solid var(--line-soft)}
.bmx-card__p{font-size:1.06rem;font-weight:600;color:var(--navy);white-space:nowrap}
.bmx-card__p small{font-size:.68rem;font-weight:400;color:var(--muted);display:block;letter-spacing:.04em}
.bmx-card__go{
  width:36px;height:36px;border-radius:50%;background:var(--cream);display:grid;place-items:center;color:var(--navy);flex-shrink:0;
  transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)
}
.bmx-card:hover .bmx-card__go{background:var(--red);color:#fff;transform:rotate(-45deg)}
.bmx-card__lnk{position:absolute;inset:0;z-index:2}
.bmx-prods__more{display:flex;justify-content:center;margin-top:clamp(26px,3vw,40px)}

/* ================= COLOR TRENDS 2026 ================= */
.bmx-ct{background:var(--cream);position:relative;overflow:clip}
.bmx-ct::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 70% at 82% 22%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 70%);
  transition:background 1.1s var(--ease)
}
.bmx-ct>*{position:relative;z-index:1}
.bmx-ct__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.5vw,72px);align-items:center}
@media(max-width:940px){.bmx-ct__grid{grid-template-columns:1fr;gap:36px}}

.bmx-ct__stage{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-l);background:var(--sand)}
@media(max-width:940px){.bmx-ct__stage{aspect-ratio:4/3.4}}
.bmx-ct__stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.07);
  transition:opacity 1s var(--ease),transform 1.6s var(--ease)
}
.bmx-ct__stage img.is-on{opacity:1;transform:scale(1)}
.bmx-ct__cap{
  position:absolute;left:18px;bottom:18px;right:18px;z-index:2;
  display:flex;align-items:center;gap:13px;
  background:#FFFDFA;border-radius:var(--r-s);padding:13px 17px;box-shadow:var(--shadow-m)
}
.bmx-ct__cap i{width:38px;height:38px;border-radius:var(--r-xs);flex-shrink:0;background:var(--accent);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:background .9s var(--ease)}
.bmx-ct__cap strong{display:block;font-family:var(--serif);font-size:1.1rem;font-weight:500;color:var(--navy);line-height:1.15}
.bmx-ct__cap span{font-size:.7rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}

/* auto-fit — liczba kolumn dostosowuje sie do liczby odcieni */
.bmx-sw{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-block:26px 30px}
@media(max-width:520px){.bmx-sw{grid-template-columns:1fr}}
@media(max-width:400px){.bmx-coty__grid button{min-width:18px}}
.bmx-sw button{
  display:flex;align-items:center;gap:13px;padding:12px 15px;border-radius:var(--r-s);text-align:left;width:100%;
  background:rgba(255,255,255,.55);border:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)
}
.bmx-sw button:hover{background:#fff;transform:translateX(3px)}
.bmx-sw button[aria-selected="true"]{background:#fff;border-color:var(--line);box-shadow:var(--shadow-s)}
.bmx-sw i{width:34px;height:34px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.09);position:relative;transition:transform .45s var(--ease)}
.bmx-sw button[aria-selected="true"] i{transform:scale(1.08)}
.bmx-sw button[aria-selected="true"] i::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--navy);opacity:.35
}
.bmx-sw b{display:block;font-size:.87rem;font-weight:600;color:var(--navy);line-height:1.25}
.bmx-sw small{font-size:.7rem;color:var(--muted);letter-spacing:.06em}

/* ---------- COLOR TRENDS NA TELEFONIE ----------
   Uwaga klientki 2026-09-17, nr 3: "zeby zmienic kolor trzeba zjechac
   i wrocic - ma sie miescic w ekranie".

   Zmierzone przy 390 px: cala sekcja miala 1497 px, z czego sama lista
   odcieni 628 px (osiem wierszy jeden pod drugim, bo
   '@media(max-width:520px)' ustawia jedna kolumne). Zdjecie stalo
   NAD tekstem, wiec probnik konczyl sie ponad 1000 px pod podgladem -
   stad to zjezdzanie i wracanie.

   Dwie zmiany:
   1) KOLEJNOSC. Na telefonie idzie: nadtytul, naglowek, akapit,
      zdjecie, probnik, przyciski. Podglad i probnik stoja obok siebie,
      wiec widac je razem. Robimy to 'display:contents' na kolumnie
      tekstowej - jej dzieci wchodza do siatki sekcji i mozna im nadac
      'order'. Bez tego trzeba by przestawiac HTML i skrypt.
   2) PROBNIK JAK W HERO. Osiem kolek 4x2 zamiast osmiu wierszy
      z nazwa - 628 px schodzi do ok. 130 px. Nazwa i numer nie gina:
      wybrany odcien podpisuje sie w ramce zdjecia ('.bmx-ct__cap'),
      a napisy zostaja w kodzie dla czytnikow ekranu (chowamy je
      'clip-path', nie 'display:none').
   ------------------------------------------------ */
/* Kolejnosc zmieniamy od tego samego progu, na ktorym siatka sekcji
   schodzi do jednej kolumny (940 px) - inaczej na tablecie zostalby
   uklad ze zdjeciem nad tekstem i probnikiem daleko pod spodem. */
@media (max-width: 940px) {
  .bmx-ct__grid{gap:20px}

  .bmx-ct__grid > div:not(.bmx-ct__stage){display:contents}
  .bmx-ct__grid .bmx-eyebrow{order:1}
  .bmx-ct__grid .bmx-h2{order:2}
  .bmx-ct__grid .bmx-lead{order:3;margin-top:0 !important}
  .bmx-ct__stage{order:4}
  .bmx-ct__grid .bmx-sw{order:5}
  .bmx-ct__grid > div:not(.bmx-ct__stage) > div:last-child{order:6}
}

/* Kolka zamiast wierszy dopiero na telefonie - od 768 px w gore lista
   z nazwami miesci sie w trzech, czterech kolumnach i nie ma powodu
   zabierac podpisow. */
@media (max-width: 767px) {
  /* Cztery kolka w rzedzie - przy osmiu odcieniach wychodza dwa rzedy
     i nic sie nie chowa za krawedzia ekranu. */
  .bmx-sw{grid-template-columns:repeat(4,1fr);gap:14px 10px;margin-block:0}

  .bmx-sw button,
  .bmx-sw button:hover,
  .bmx-sw button[aria-selected="true"]{
    display:flex;justify-content:center;gap:0;
    padding:0;background:transparent;border-color:transparent;box-shadow:none;transform:none
  }

  .bmx-sw i{width:46px;height:46px}

  /* Napis zostaje dla czytnikow ekranu - to jedyna nazwa przycisku. */
  .bmx-sw button > span{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap
  }

  /* Zaznaczenie musi byc czytelne bez bialej karty pod spodem. */
  .bmx-sw button[aria-selected="true"] i::after{opacity:.75;border-width:2px}
}

/* ================= KOLEKCJE PALET ================= */
.bmx-rail{display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.bmx-rail::-webkit-scrollbar{height:4px}
.bmx-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-xs)}
.bmx-pal{
  display:flex;flex-direction:column;
  flex:0 0 clamp(230px,25vw,300px);scroll-snap-align:start;
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)
}
.bmx-pal:hover{transform:translateY(-6px);box-shadow:var(--shadow-mh)}
.bmx-pal__s{display:flex;height:118px;flex-shrink:0}
.bmx-pal__s span{flex:1;transition:flex .6s var(--ease)}
.bmx-pal:hover .bmx-pal__s span:hover{flex:2.1}
.bmx-pal__b{display:block;padding:20px 22px 22px}
.bmx-pal__b h4{font-family:var(--serif);font-size:1.08rem;font-weight:500;color:var(--navy);line-height:1.2}
.bmx-pal__b p{font-size:.75rem;color:var(--muted);margin-top:5px;letter-spacing:.04em}
.bmx-rail__nav{display:flex;gap:8px}
.bmx-rnav{
  position:relative;overflow:hidden;isolation:isolate;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--navy);
  transition:color .4s var(--ease),border-color .4s var(--ease),transform .35s var(--ease)
}
.bmx-rnav::after{
  content:"";position:absolute;left:-10%;right:-10%;bottom:-2px;height:210%;z-index:-1;
  background:var(--navy);border-radius:48% 52% 0 0 / 20% 24% 0 0;
  transform:translateY(102%) rotate(-3deg);
  transition:transform .85s cubic-bezier(.62,.02,.3,1),border-radius .85s cubic-bezier(.62,.02,.3,1)
}
.bmx-rnav:hover{color:#fff;border-color:var(--navy);transform:translateY(-2px)}
.bmx-rnav:hover::after{transform:translateY(0) rotate(0);border-radius:0}
@supports ((-webkit-mask-image:url('')) or (mask-image:url(''))){
  .bmx-rnav::after{
    left:0;right:0;top:0;bottom:0;height:auto;border-radius:0;transform:none;
    -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 .9s cubic-bezier(.42,.03,.25,1),
                       mask-position .9s cubic-bezier(.42,.03,.25,1)
  }
  .bmx-rnav:hover::after{transform:none;-webkit-mask-position:0% center;mask-position:0% center}
}

/* ================= TECHNOLOGIE =================
   Kinowy split: tekst na granacie, zdjecie wychodzi do prawej krawedzi
   i rozplywa sie w tle. Pod spodem pasek czterech technologii. */
.bmx-tech{background:var(--navy);color:#fff;position:relative;overflow:clip;padding-block:0}
.bmx-tech .bmx-h2{color:#fff}
.bmx-tech .bmx-lead{color:rgba(255,255,255,.7)}
.bmx-tech .bmx-eyebrow{color:#F19DAF}

.bmx-tech__split{position:relative;display:flex;align-items:center;min-height:clamp(420px,46vw,600px)}
.bmx-tech__t{
  position:relative;z-index:2;
  padding-block:clamp(56px,6.5vw,100px);
  max-width:min(560px,52%)
}
.bmx-tech__media{position:absolute;top:0;bottom:0;right:0;width:54%;z-index:0;overflow:hidden}
.bmx-tech__media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.bmx-tech__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--navy) 0%,var(--navy) 7%,rgba(11,34,64,.78) 22%,rgba(11,34,64,.3) 46%,rgba(11,34,64,0) 68%),
    linear-gradient(to top,rgba(11,34,64,.5),transparent 30%)
}
@media(max-width:940px){
  /* na mobile: najpierw tekst, potem zdjecie (order), zdjecie na pelna szerokosc */
  .bmx-tech__split{display:flex;flex-direction:column;min-height:0}
  .bmx-tech__t{max-width:100%;padding-block:clamp(48px,7vw,72px) clamp(28px,4vw,38px)}
  .bmx-tech__media{
    order:2;position:relative;width:100vw;height:clamp(240px,52vw,380px);
    margin-left:50%;transform:translateX(-50%)
  }
  .bmx-tech__media::after{background:linear-gradient(to top,rgba(11,34,64,.8),rgba(11,34,64,.05) 60%)}
}

.bmx-tech__row{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.16);
  padding-bottom:clamp(40px,5vw,64px)
}
@media(max-width:900px){.bmx-tech__row{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.bmx-tech__row{grid-template-columns:1fr}}
.bmx-tech__i{position:relative;padding:clamp(26px,3vw,38px) clamp(18px,2vw,30px) clamp(28px,3vw,38px)}
.bmx-tech__i+.bmx-tech__i::before{
  content:"";position:absolute;left:0;top:clamp(26px,3vw,38px);bottom:clamp(28px,3vw,38px);
  width:1px;background:rgba(255,255,255,.16)
}
@media(max-width:900px){
  .bmx-tech__i:nth-child(odd)+.bmx-tech__i::before{content:""}
  .bmx-tech__i:nth-child(3)::before,.bmx-tech__i:nth-child(3)~.bmx-tech__i::before{top:0}
  .bmx-tech__i:nth-child(odd)::before{display:none}
  .bmx-tech__i:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16)}
}
@media(max-width:520px){
  .bmx-tech__i::before{display:none}
  .bmx-tech__i+.bmx-tech__i{border-top:1px solid rgba(255,255,255,.16)}
}
/* czerwona krecha narastajaca przy najechaniu */
.bmx-tech__i::after{
  content:"";position:absolute;left:0;top:-1px;width:0;height:2px;background:var(--red);
  transition:width .6s var(--ease)
}
.bmx-tech__i:hover::after{width:100%}
.bmx-tech__i svg{color:var(--red);margin-bottom:16px;transition:transform .5s var(--ease)}
.bmx-tech__i:hover svg{transform:translateY(-3px) scale(1.06)}
.bmx-tech__i h4{font-family:var(--serif);font-size:clamp(1.1rem,1.4vw,1.3rem);font-weight:500;margin-bottom:8px}
.bmx-tech__i p{font-size:.83rem;color:rgba(255,255,255,.62);font-weight:300;line-height:1.65}

/* ================= SALONY / KONTAKT ================= */
.bmx-find{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--gap-karty)}
@media(max-width:940px){.bmx-find{grid-template-columns:1fr}}
.bmx-tile{
  position:relative;border-radius:var(--r);overflow:hidden;min-height:340px;display:flex;align-items:flex-end;
  padding:clamp(24px,3vw,40px);color:#fff;isolation:isolate
}
.bmx-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.1s var(--ease)}
/* Przyciemnienie tylko tam, gdzie stoi tekst — gora kafla zostaje czytelnym zdjeciem. */
.bmx-tile::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(7,21,40,.93) 0%,rgba(7,21,40,.78) 26%,rgba(7,21,40,.45) 52%,rgba(7,21,40,.12) 78%,rgba(7,21,40,0) 100%)
}
.bmx-tile:hover img{transform:scale(1.06)}
.bmx-tile h3{
  font-family:var(--serif);font-size:clamp(1.35rem,2.1vw,1.85rem);font-weight:500;line-height:1.16;margin-bottom:9px;
  text-shadow:0 1px 3px rgba(7,21,40,.9),0 2px 22px rgba(7,21,40,.75)
}
.bmx-tile p{
  font-size:.88rem;color:rgba(255,255,255,.9);max-width:42ch;font-weight:300;margin-bottom:20px;
  text-shadow:0 1px 3px rgba(7,21,40,.85),0 1px 14px rgba(7,21,40,.6)
}
.bmx-tile .bmx-eyebrow{text-shadow:0 1px 3px rgba(7,21,40,.9)}
.bmx-tile .bmx-eyebrow{color:#fff;opacity:.8}

.bmx-usp{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border-block:1px solid var(--line-soft);margin-top:clamp(40px,5vw,72px)}
@media(max-width:900px){.bmx-usp{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.bmx-usp{grid-template-columns:1fr}}
.bmx-usp__i{background:var(--paper);padding:26px 22px;display:flex;gap:15px;align-items:flex-start;transition:background .45s}
.bmx-usp__i:hover{background:var(--cream)}
.bmx-usp__i svg{color:var(--red);flex-shrink:0;margin-top:2px}
.bmx-usp__i h4{font-size:.9rem;font-weight:600;color:var(--navy);margin-bottom:3px}
.bmx-usp__i p{font-size:.79rem;color:var(--muted);font-weight:400;line-height:1.55}

/* ================= MAGAZYN / BLOG =================
   Miniatury artykułów mają wypalony tekst w grafice,
   dlatego tytuły są POD obrazkiem, nie na nim.        */
.bmx-mag{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-karty)}
@media(max-width:1000px){.bmx-mag{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.bmx-mag{grid-template-columns:1fr}}
.bmx-m{
  display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--r);overflow:hidden;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .45s
}
.bmx-m:hover{transform:translateY(-6px);box-shadow:var(--shadow-mh);border-color:transparent}
.bmx-m__f{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--sand)}
.bmx-m__f img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.bmx-m:hover .bmx-m__f img{transform:scale(1.06)}
.bmx-m__tag{
  position:absolute;top:13px;left:13px;z-index:2;
  background:rgba(255,255,255,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--navy);
  font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;padding:6px 12px;border-radius:999px;
  box-shadow:0 4px 14px -8px rgba(0,0,0,.5)
}
.bmx-m__tag--red{background:var(--red);color:#fff}
.bmx-m__b{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;gap:9px}
.bmx-m__b h4{
  font-family:var(--serif);font-weight:500;font-size:clamp(1.06rem,1.3vw,1.22rem);line-height:1.28;color:var(--navy);
  transition:color .35s
}
.bmx-m:hover .bmx-m__b h4{color:var(--red)}
.bmx-m__b p{font-size:.845rem;color:var(--muted);font-weight:400;line-height:1.6;flex:1}
.bmx-m__go{
  display:inline-flex;align-items:center;gap:9px;margin-top:6px;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--red)
}
.bmx-m__go svg{flex-shrink:0;transition:transform .4s var(--ease)}
.bmx-m:hover .bmx-m__go svg{transform:translateX(5px)}

/* ================= HISTORIA ================= */
.bmx-story{background:var(--cream)}
.bmx-story__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
@media(max-width:940px){.bmx-story__grid{grid-template-columns:1fr;gap:36px}}
.bmx-story__wrap{position:relative}
.bmx-story__img{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--shadow-l)}
.bmx-story__img img{width:100%;height:100%;object-fit:cover;will-change:transform}
.bmx-story__yr{
  position:absolute;left:clamp(10px,2.5vw,26px);bottom:clamp(14px,2.5vw,26px);z-index:2;
  font-family:var(--serif);font-size:clamp(3rem,7vw,5.6rem);line-height:.9;font-weight:400;
  color:#fff;text-shadow:0 8px 34px rgba(9,26,48,.75);letter-spacing:-.02em;pointer-events:none
}
.bmx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
@media(max-width:480px){.bmx-stats{grid-template-columns:1fr 1fr}}
.bmx-stat b{display:block;font-family:var(--serif);font-size:clamp(1.7rem,2.7vw,2.3rem);font-weight:500;color:var(--navy);line-height:1}
.bmx-stat span{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:7px}

/* ================= NEWSLETTER =================
   Jasna karta w duchu reszty strony – bez granatu i kolorowej poswiaty. */
.bmx-nl{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:clamp(28px,3.6vw,52px);position:relative;overflow:hidden;box-shadow:var(--shadow-s)
}
.bmx-nl__strip{display:flex;position:absolute;inset:0 0 auto;height:4px}
.bmx-nl__strip span{flex:1}
.bmx-nl__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3.5vw,56px);align-items:center}
@media(max-width:860px){.bmx-nl__in{grid-template-columns:1fr;gap:26px}}
.bmx-nl h3{font-family:var(--serif);font-size:clamp(1.5rem,2.5vw,2.15rem);font-weight:400;line-height:1.18;color:var(--navy)}
.bmx-nl h3 em{font-style:italic;color:var(--red)}
.bmx-nl p{color:var(--muted);font-size:.9rem;font-weight:400;margin-top:12px;max-width:46ch}
.bmx-nl form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* flex-direction:row jawnie (2026-09-30): stary blok kodu Oxygena od dawnej nakladki wyszukiwarki
   (ct_code_block_css_2 + kopia w <head>) ma globalne form{display:flex;flex-direction:column},
   przez co formularz ukladal sie w kolumnie, a align-items:center go wysrodkowywal. */
.bmx-nl form{flex-direction:row}

/* --- segmentacja zapisu: dzieli subskrybentow na listy --- */
.bmx-seg{flex:1 1 100%;margin-bottom:2px}
.bmx-seg__lbl{display:block;font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-bottom:9px}
.bmx-seg__opts{display:flex;flex-wrap:wrap;gap:7px}
.bmx-seg input{position:absolute;opacity:0;width:0;height:0}
.bmx-seg label{cursor:pointer}
.bmx-seg__opts span{
  display:inline-block;padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--cream);
  font-size:.78rem;color:var(--muted);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)
}
.bmx-seg__opts label:hover span{border-color:rgba(11,34,64,.3);color:var(--navy)}
.bmx-seg input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.bmx-seg input:focus-visible+span{outline:2px solid var(--red);outline-offset:3px}

/* --- pole e-mail: animowana obwodka, plywajaca etykieta, wskaznik poprawnosci --- */
.bmx-fld{position:relative;flex:1;min-width:220px;isolation:isolate;border-radius:999px}
.bmx-fld::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  background:linear-gradient(90deg,var(--red),#0B2240,var(--red),#0B2240);
  background-size:300% 100%;opacity:0;transition:opacity .45s var(--ease)
}
.bmx-fld:hover::before{opacity:.32}
.bmx-fld:focus-within::before{opacity:1;animation:bmx-ring 5s linear infinite}
@keyframes bmx-ring{to{background-position:300% 0}}
.bmx-fld.is-valid:focus-within::before{background:linear-gradient(90deg,#1E7A4B,#2FA469,#1E7A4B,#2FA469);background-size:300% 100%}

.bmx-fld input{
  width:100%;background:var(--cream);border:1px solid var(--line);color:var(--ink);
  padding:24px 46px 10px 21px;border-radius:999px;font-size:.95rem;font-family:inherit;line-height:1.2;
  transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)
}
.bmx-fld input:focus{outline:0;background:#fff;border-color:transparent;box-shadow:var(--shadow-m)}
.bmx-fld input::placeholder{color:transparent}

.bmx-fld__lbl{
  position:absolute;left:22px;top:50%;transform:translateY(-50%);transform-origin:left center;
  color:#9AA0A9;font-size:.92rem;pointer-events:none;white-space:nowrap;
  transition:transform .4s var(--ease),color .4s var(--ease),letter-spacing .4s var(--ease)
}
.bmx-fld input:focus+.bmx-fld__lbl,
.bmx-fld input:not(:placeholder-shown)+.bmx-fld__lbl{
  transform:translateY(-118%) scale(.66);color:var(--red);letter-spacing:.12em
}
.bmx-fld.is-valid input:focus+.bmx-fld__lbl,
.bmx-fld.is-valid input:not(:placeholder-shown)+.bmx-fld__lbl{color:#1E7A4B}

/* kropka -> ptaszek */
.bmx-fld__dot{
  position:absolute;right:19px;top:50%;width:9px;height:9px;border-radius:50%;background:#D6D2C8;
  transform:translateY(-50%);pointer-events:none;
  transition:background .4s var(--ease),transform .4s var(--ease),opacity .3s var(--ease)
}
.bmx-fld.is-typing .bmx-fld__dot{background:var(--red);transform:translateY(-50%) scale(1.25)}
.bmx-fld.is-valid .bmx-fld__dot{opacity:0;transform:translateY(-50%) scale(.3)}
.bmx-fld__ok{
  position:absolute;right:15px;top:50%;transform:translateY(-50%) scale(.5);opacity:0;
  color:#1E7A4B;pointer-events:none;transition:opacity .35s var(--ease),transform .45s var(--ease)
}
.bmx-fld.is-valid .bmx-fld__ok{opacity:1;transform:translateY(-50%) scale(1)}
.bmx-fld__ok path{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .55s var(--ease) .08s}
.bmx-fld.is-valid .bmx-fld__ok path{stroke-dashoffset:0}

.bmx-fld.is-bad{animation:bmx-shake .5s var(--ease)}
@keyframes bmx-shake{
  10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-6px)} 40%,60%{transform:translateX(6px)} 100%{transform:none}
}

/* --- przycisk: tekst -> spinner -> ptaszek --- */
.bmx-nl__btn{min-width:172px;overflow:hidden}
.bmx-nl__btn>span,.bmx-nl__btn>svg{transition:opacity .3s var(--ease),transform .35s var(--ease)}
.bmx-nl__btn .bmx-nl__t{display:block}
.bmx-nl__spin,.bmx-nl__chk{position:absolute;left:50%;top:50%;translate:-50% -50%;opacity:0}
.bmx-nl__spin{
  width:19px;height:19px;border-radius:50%;
  border:2px solid rgba(255,255,255,.32);border-top-color:#fff
}
.bmx-nl__btn.is-loading .bmx-nl__t{opacity:0;transform:translateY(-9px)}
.bmx-nl__btn.is-loading .bmx-nl__spin{opacity:1;animation:bmx-spin .7s linear infinite}
@keyframes bmx-spin{to{rotate:360deg}}
.bmx-nl__btn.is-done{background:#1E7A4B;border-color:#1E7A4B;pointer-events:none}
.bmx-nl__btn.is-done::after{transform:translateY(120%) rotate(-2deg)}
.bmx-nl__btn.is-done .bmx-nl__t,.bmx-nl__btn.is-done .bmx-nl__spin{opacity:0;animation:none}
.bmx-nl__btn.is-done .bmx-nl__chk{opacity:1}
.bmx-nl__chk path{stroke-dasharray:22;stroke-dashoffset:22}
.bmx-nl__btn.is-done .bmx-nl__chk path{transition:stroke-dashoffset .5s var(--ease) .1s;stroke-dashoffset:0}

/* --- panel podziekowania --- */
.bmx-nl__wrap{position:relative}
.bmx-nl__wrap.is-sent .bmx-nl__form{opacity:0;transform:translateY(-10px);pointer-events:none}
.bmx-nl__form{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.bmx-nl__done{
  position:absolute;inset:0;display:flex;align-items:center;gap:15px;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .6s var(--ease) .25s,transform .6s var(--ease) .25s
}
.bmx-nl__wrap.is-sent .bmx-nl__done{opacity:1;transform:none}
.bmx-nl__done i{
  width:44px;height:44px;border-radius:50%;background:#1E7A4B;color:#fff;flex-shrink:0;
  display:grid;place-items:center
}
.bmx-nl__done strong{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:500;color:var(--navy)}
.bmx-nl__done span{font-size:.84rem;color:var(--muted);font-weight:400}

.bmx-nl__ok{font-size:.72rem;color:var(--muted);margin-top:14px;line-height:1.6}
.bmx-nl__ok a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

/* ================= FOOTER ================= */
.bmx-ft{background:var(--navy);color:rgba(255,255,255,.68);padding-top:clamp(54px,6vw,86px);font-size:.855rem;font-weight:300}
.bmx-ft__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,48px);padding-bottom:clamp(40px,5vw,64px)}
@media(max-width:940px){.bmx-ft__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.bmx-ft__grid{grid-template-columns:1fr;gap:32px}}
.bmx-ft__logo img{height:52px;width:auto;margin-bottom:22px}
.bmx-ft p{line-height:1.75;max-width:40ch}
.bmx-ft h5{font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;color:#fff;font-weight:600;margin-bottom:16px}
.bmx-ft li a{display:inline-block;padding:4px 0;transition:color .3s,transform .35s var(--ease)}
.bmx-ft li a:hover{color:#fff;transform:translateX(4px)}
.bmx-ft__soc{display:flex;gap:10px;margin-top:24px}
.bmx-ft__soc a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:#fff;
  transition:background .35s,border-color .35s,transform .35s var(--ease)
}
.bmx-ft__soc a:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px)}
.bmx-ft__addr{color:#fff;font-weight:400;line-height:1.9}
.bmx-ft__addr a{color:rgba(255,255,255,.72);font-weight:300;transition:color .3s}
.bmx-ft__addr a:hover{color:#fff}
.bmx-ft__addr>a:first-child{color:#fff;font-weight:400;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
/* czerwien na granacie jest nieczytelna — linki w stopce sa biale */
.bmx-ft .bmx-link{color:#fff}
.bmx-ft .bmx-link:hover{color:#F19DAF}
.bmx-ft__bar{
  border-top:1px solid rgba(255,255,255,.12);padding-block:22px;
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:space-between;font-size:.755rem;color:rgba(255,255,255,.45)
}
.bmx-ft__bar nav{display:flex;flex-wrap:wrap;gap:10px 22px}
.bmx-ft__bar a:hover{color:#fff}

/* ================= DO GÓRY ================= */
.bmx-up{
  position:fixed;right:22px;bottom:22px;z-index:800;width:46px;height:46px;border-radius:50%;
  background:var(--navy);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-m);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s,background .35s
}
.bmx-up.is-on{opacity:1;visibility:visible;transform:none}
.bmx-up:hover{background:var(--red)}

/* ================= REDUCED MOTION ================= */
@media(prefers-reduced-motion:reduce){
  .bmx *,.bmx *::before,.bmx *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important
  }
  .bmx [data-rv]{opacity:1!important;transform:none!important;filter:none!important}
  .bmx-mask>span{transform:none!important}
  .bmx-coty,.bmx-scroll{opacity:1!important;transform:none!important}
}

/* Slowko "od" przy cenie wywolawczej na kafelkach (patrz 'cena-od.php').
   Ma byc czytelne, ale nie konkurowac z kwota - stad mniejszy stopien
   i lzejsza grubosc niz sama cena. */
.bmx-card__p .bmx-cena-od{font-size:.72em;font-weight:400;color:var(--muted);margin-right:2px}

/* ============================================================
   DLUGI TEKST Z ILUSTRACJAMI - dwie kolumny na desktopie
   Komponent wspolny. Pary "zdjecie + nalezacy do niego tekst" buduje
   'artykul.js' - patrz jego naglowek; tutaj jest tylko wyglad.

   HISTORIA: powstal 2026-09-16 dla '/kolor-inspiracje/color-stories/'
   i byl przypiety do 'body.page-id-67' w 'strony.css'. 2026-09-17
   klientka zapytala, czemu opis produktu nie ma tego samego ukladu -
   i nie bylo dobrej odpowiedzi, bo to byla luka, a nie decyzja.
   Reguly przeniesione tutaj BEZ zawezenia do strony, zeby kazde
   kolejne wlaczenie bylo jedna linijka w skrypcie, a nie kopia
   kilkunastu regul (ten sam blad co z pedzlem w pieciu arkuszach).

   Selektory sa czystymi klasami (0,1,0) - moga byc slabe, bo klasy
   '.bmx-art__*' istnieja WYLACZNIE tam, gdzie zalozyl je nasz skrypt.
   Nikt inny o nie nie konkuruje.
   ============================================================ */

.bmx-art__para{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.2vw,56px);
  align-items:center;

  /* MARGINES TYLKO OD GORY - i to jest istotne, nie kosmetyczne.
     Przy 'margin-block' odstep miedzy parami zalezy od tego, czy rodzic
     sklada marginesy. W zwyklym przeplywie skladaja sie do 88 px,
     ale angielskie opisy produktow siedza w bloku 'display:flex',
     gdzie skladanie NIE zachodzi - wychodzilo 80 + 80 = 160 px
     i miedzy parami zialy dziury. Margines z jednej strony daje
     ten sam odstep w obu ukladach. */
  margin-block:clamp(40px,5vw,88px) 0
}

/* Ostatnia para nie ma po sobie nic, co odsunelo ja od kolejnej sekcji. */
.bmx-art__para:last-child{margin-bottom:clamp(40px,5vw,88px)}

/* Naprzemiennie: raz zdjecie z lewej, raz z prawej. Bez tego kolumna
   tekstu jedzie prosta linia w dol i strona robi sie monotonna. */
.bmx-art__para:nth-of-type(even) .bmx-art__fig{order:2}

.bmx-art__fig{margin:0}

/* Redakcja wkleja zdjecia w akapitach ('<p><img></p>') - skrypt wklada
   do figury CALY akapit, wiec zdejmujemy mu wlasne marginesy. */
.bmx-art__fig > p{margin:0}

/* Filmy bywaja wklejone jako '<p><a href><img></a></p>' - odnosnik jest
   inline, wiec zostawialby pod kadrem szczeline na linie tekstu. */
.bmx-art__fig a{display:block}

/* Zdjecia potrafia miec 1800 px wysokosci przy 1130 px szerokosci -
   pionowy kadr na cala szerokosc kolumny. Przycinamy je stalym formatem:
   wysokosc przestaje zalezec od tego, jaki plik wgrala redakcja.
   Promien z zasady zaokraglen ('min(--r, 8%)') - patrz design.md. */
.bmx-art__fig :is(img,iframe,video){
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:min(var(--r),8%)
}

/* ZDJECIE WKLEJONE W SRODEK AKAPITU, a nie stojace osobno.
   Zgloszenie 2026-09-17: "gdy tresc sklada sie w jedna kolumne, odstepy
   miedzy obrazami a tekstem sa nierowne, miejscami zbyt przylegajace".

   Odstep figura -> kolumna tekstu byl caly czas rowny (20 px, robi go
   'gap' siatki). Sklejaly sie te zdjecia, ktore redakcja wstawila
   WEWNATRZ akapitu z tekstem ('<p><img>W roku 2003 wprowadzilismy...'):
   obrazek jest tam zwyklym elementem liniowym bez marginesu, wiec tekst
   zaczynal sie dokladnie pod jego krawedzia. Zmierzone: 'margin-bottom: 0'.

   Nie da sie ich rozdzielic strukturalnie - to jeden blok tresci - wiec
   odstep dajemy samemu zdjeciu. 20 px z obu stron, czyli tyle samo, ile
   'gap' daje parze; dzieki temu uklad ma JEDEN odstep, a nie dwa rozne.

   Promien powtarzamy tutaj, bo zasada zaokraglen celowala dotad tylko
   w zdjecia w figurze i w panele karty produktu - patrz design.md. */
.bmx-art__tekst :is(img,iframe,video){
  display:block;
  max-width:100%;
  height:auto;
  margin:20px 0;
  border-radius:min(var(--r),8%)
}

/* Zdjecie na samym poczatku albo koncu kolumny nie potrzebuje marginesu
   od strony krawedzi - tam odstep robi juz siatka. */
.bmx-art__tekst > :first-child :is(img,iframe,video):first-child{margin-top:0}
.bmx-art__tekst > :last-child :is(img,iframe,video):last-child{margin-bottom:0}

/* 62 znaki w wierszu - w srodku czytelnego zakresu 45-75. */
.bmx-art__tekst{max-width:62ch}
.bmx-art__tekst > * + *{margin-top:1em}

/* Samotne zdjecie bez tekstu zajmuje cala szerokosc - inaczej zostawaloby
   po sobie puste pol strony. Format wtedy szerszy, bo to kadr pelnej
   szerokosci. */
.bmx-art__para--sama-fotka{grid-template-columns:1fr}
.bmx-art__para--sama-fotka .bmx-art__fig :is(img,iframe,video){aspect-ratio:21/9}

/* Waski ekran: para wraca do jednej kolumny, w tej samej kolejnosci
   czytania co dotad. 'order' trzeba cofnac, inaczej na telefonie
   co drugie zdjecie wyladowaloby POD swoim tekstem. */
@media (max-width:900px){
  .bmx-art__para,
  .bmx-art__para--sama-fotka{
    grid-template-columns:1fr;
    gap:20px;
    margin-block:clamp(28px,6vw,44px) 0
  }
  .bmx-art__para:last-child{margin-bottom:clamp(28px,6vw,44px)}
  .bmx-art__para:nth-of-type(even) .bmx-art__fig{order:0}
  .bmx-art__tekst{max-width:none}
  .bmx-art__fig :is(img,iframe,video){aspect-ratio:3/2}
}

/* Justowanie. Redakcja wpisuje je w atrybut 'style' kazdego akapitu -
   przy szerokosci 1130 px bylo nieszkodliwe, ale w kolumnie na 62 znaki
   tworzy rzeki: w polskim srednia dlugosc slowa jest duza, wiec
   przegladarka rozpycha odstepy miedzy wyrazami.

   '!important' jest tu konieczne: nadpisujemy atrybut 'style', ktorego
   zadnym selektorem nie da sie przebic. */
.bmx-art__tekst [style*="text-align: justify"],
.bmx-art__tekst [style*="text-align:justify"]{text-align:left !important}

/* ============================================================
   GRUPY PRODUKTOWE - sekcja "Select the best product"
   Tylko wersja EN (patrz 'bm-newhome-en.html'); po polsku te role
   pelni sekcja sklepu, ktorej po angielsku nie ma.

   Sama siatka - wyglad pozycji bierze sie z '.bmx-btn--ghost', bo to
   ten sam ksztalt przycisku co w calym serwisie. 'auto-fit' zamiast
   stalej liczby kolumn: pozycji jest siedem, czyli liczba pierwsza,
   ktora przy sztywnej siatce zawsze zostawia dziure w ostatnim wierszu.
   ============================================================ */
.bmx-grupy{
  display:grid;
  /* 260px daje na desktopie CZTERY kolumny, czyli uklad 4 + 3.
     Przy 190px wychodzilo szesc i siodma pozycja zostawala sama
     w drugim wierszu - czytalo sie jak niedokonczona siatka. */
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--gap-karty);
  margin-top:clamp(24px,3vw,38px)
}

/* Przycisk w siatce ma wypelnic swoja komorke - sam z siebie jest
   'inline-flex' i zwezilby sie do szerokosci napisu. */
.bmx-grupy .bmx-btn{width:100%}

/* ============================================================
   KARTA KOLORU W HERO - STALA WYSOKOSC NAZWY
   Zgloszenie klientki 2026-09-17 (mobile): "jak sie klika np. pomiedzy
   dwoma ostatnimi kolorami, to sie zmienia wysokosc obrazu".

   ZMIERZONE, przy 390 px:
       probka 6 "Swiss Coffee" ......... nazwa 29 px, karta 214 px
       probka 7 "Narragansett Green" ... nazwa 58 px, karta 243 px
   Czyli dokladnie te dwie ostatnie, o ktorych pisala klientka. Dluzsza
   nazwa lamie sie na dwa wiersze i rozpycha karte o 29 px, a razem z nia
   przesuwa wszystko pod spodem.

   NA DESKTOPIE PROBLEMU NIE MA - karta ma tam 430 px i najdluzsza nazwa
   miesci sie w jednym wierszu (sprawdzone na 1440 i 768 px). Dlatego
   rezerwacja obowiazuje tylko na waskim ekranie.

   DLACZEGO REZERWUJEMY MIEJSCE, A NIE ZMNIEJSZAMY PISMA: zmierzone, ze
   "Narragansett Green" miesci sie w jednym wierszu dopiero od 24 px przy
   oknie 390 i od 22 px przy 360. To jest latanie pod KONKRETNY tekst -
   pierwsza dluzsza nazwa w kolekcji i karta znowu zaczyna skakac.
   Rezerwacja dwoch wierszy dziala niezaleznie od tresci.

   '2.24em' to dwa wiersze przy 'line-height: 1.12' ustawionym wyzej.
   ============================================================ */
@media (max-width: 599px) {
  .bmx-coty__nm{ min-height:2.24em }
}

/* NUMER KOLEKCJI TEZ SIE LAMIE - ale dopiero ponizej 375 px.
   Zmierzone wysokosci wiersza z numerem: przy 390 i 375 px zawsze 20 px,
   przy 360 px raz 20, raz 39 ("CSP-310 - Aura Color Stories"), przy 320 px
   prawie zawsze 39. Karta skakala tam o 20 px nawet po zarezerwowaniu
   miejsca na nazwe.

   Rezerwacja obowiazuje TYLKO tam, gdzie lamanie faktycznie wystepuje -
   przy 375 px i szerzej numer miesci sie w jednym wierszu, wiec dodatkowy
   wiersz bylby pusta przestrzenia bez powodu.

   WARTOSC Z POMIARU, NIE Z ZALOZENIA: pierwsza proba dawala '2.8em'
   (zakladajac 'line-height: 1.4') i zostawal skok 6 px - zmierzony
   dwuwierszowy numer ma 39 px przy pismie 11.84 px, czyli 3.3em. */
@media (max-width: 374px) {
  .bmx-coty__no{ min-height:3.3em }
}

/* HERO NA TELEFONIE / TABLECIE W PIONIE - bez "dziury z gory" (2026-09-28).
   Klientka: "obraz w hero mobile nie wypelnia calej przestrzeni, kurczy sie
   robiac dziure z gory". Przy waskiej, wysokiej sekcji 'object-fit:cover'
   dopasowuje zdjecie WYSOKOSCIA - widac cale zdjecie, razem z sufitem pokoju
   (jasny pas pod naglowkiem, dodatkowo rozjasniony przeslona). Oddalanie
   scale(1.1)->scale(1) odslanialo go coraz bardziej = "kurczenie sie".
   Zostaje delikatne oddalanie, ale zdjecie jest na koncu nadal przyblizone
   (1.18), a punkt zakotwiczenia nisko (80%) - sufit zostaje poza kadrem. */
@media (max-width: 820px) {
    .bmx-hero__bg img { transform-origin: 50% 80%; transform: scale(1.26); }
    .bmx-hero__bg img.is-on { transform: scale(1.18); }
}

/* DOTYK: bez czerwonej ramki fokusu po stuknieciu (2026-09-28).
   Klientka: "jak na mobile klikam w przycisk dodania do koszyka, to ma czerwona
   poswiate". To ramka z '.bmx :focus-visible' (2px czerwien, odsuniecie 3px).
   Na komputerze pokazuje sie tylko przy klawiaturze - i tak ma zostac. Na
   telefonie Chrome wlacza ':focus-visible' takze po stuknieciu (szczegolnie
   po okienku WooCommerce "wybierz opcje produktu" przy nieaktywnym przycisku).
   Na urzadzeniach dotykowych przyciski i linki jej nie pokazuja; pola
   formularzy maja wlasny stan fokusu (granatowa ramka), wiec ich nie ruszamy. */
@media (hover: none) and (pointer: coarse) {
    .bmx :is(a, button, input[type=submit], input[type=button], summary, [role=button], [tabindex]):focus-visible { outline: none; }
}
/* Niebieski "blysk" przegladarki przy stuknieciu - przyciski maja wlasne stany. */
.bmx :is(a, button, input[type=submit], input[type=button], label, summary, [role=button]) { -webkit-tap-highlight-color: transparent; }

/* KONTRAST NAPISU NA PEDZLU (2026-09-28, audyt z testem kontrastu).
   Wszystkie warianty '.bmx-btn' maja na hoverze BIALY napis (tak stoi w
   regulach wyzej: domyslny, --ghost, --light). Na stronach Oxygena bila je
   regula 'universal.css' 'a:hover { color:#BA0C2C }', a w "Moje konto"
   szary kolor linkow - wychodzil czerwony/szary napis na granatowym pedzlu
   (kontrast 1,3-2,4). Np. "Kup online" w menu mobilnym. */
.bmx a.bmx-btn:is(:hover, :focus-visible),
.bmx button.bmx-btn:is(:hover, :focus-visible) { color: #fff; }

/* ---------- Formularze CF7: kwadraciki zgod jak w kasie (2026-09-28) ----------
   Wzorzec z koszyk.css (pkt 3 "Pola wyboru"): 18 px, r5, ramka granat 35%,
   zaznaczony = granatowe tlo + bialy haczyk. Wczesniej systemowe 13 px. */
body:not(#bmx-f) .wpcf7 input[type=checkbox],
body:not(#bmx-f) .wpcf7 input[type=radio] {
    -webkit-appearance: none;
            appearance: none;
    flex: none;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin: 0 10px 0 0;
    vertical-align: -4px;
    border: 1.5px solid rgba(11, 34, 64, .35);
    border-radius: 5px;
    background: #fff center / 12px 12px no-repeat;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}
body:not(#bmx-f) .wpcf7 input[type=radio] { border-radius: 50%; }
body:not(#bmx-f) .wpcf7 input:is([type=checkbox], [type=radio]):hover { border-color: var(--navy, #0B2240); }
body:not(#bmx-f) .wpcf7 input[type=checkbox]:checked {
    border-color: var(--navy, #0B2240);
    background-color: var(--navy, #0B2240);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body:not(#bmx-f) .wpcf7 input[type=radio]:checked {
    border-color: var(--navy, #0B2240);
    background: var(--navy, #0B2240);
    box-shadow: inset 0 0 0 3.5px #fff;
}