:root {
  --w-font-naglowki: 'Familjen Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  --w-font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --w-font-reka: 'Segoe Script', 'Bradley Hand', cursive;
}

/* ---------- Karta produktu: miniatury galerii w kolumnie z lewej (od 1024 px) ----------
   js/app.js tej kopii (rysujMiniatury) przy 2-3 zdjeciach wpisuje pojemnikowi miniatur
   styl INLINE: grid-template-columns: repeat(N, minmax(0, 1fr)) i
   max-width: calc((100% + 10px) * N / 4 - 10px) - rachunek pod poziomy rzad pod zdjeciem.
   WITRYNA od 1024 px stawia miniatury w pionowej kolumnie 84 px, a styl inline bije kazda
   regule arkusza: max-width 60,5 px, trzy kolumny po 13,5 px (kropki). Z inline wygrywa
   tylko !important; ponizej 1024 px (rzad pod zdjeciem) styl inline zostaje. */
@media (min-width: 1024px) {
  .w-skora .karta-produktu > div:first-child:has(> .miniatury > *) > .miniatury {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: none !important;
  }
}

/* ---------- Hero „jasne”: pigulki slajdow W PRZEPLYWIE, z zawijaniem ----------
   Biblioteka stawia rzad absolutnie, bez zawijania, od lewej krawedzi kontenera - pod
   2-3 slajdy. Tu jest 6: rzad mial 1531 px, przy 1440 ostatnia pigulka konczyla sie na
   1574 px, przy 390 widac bylo 1 z 6 (reszte ucinalo overflow-x: clip na html). W przeplywie
   rzad dolicza swoje wiersze do wysokosci hero, wiec zadna liczba ani dlugosc nazw slajdow
   z panelu (SLAJDY) nie wypchnie go poza okno i nie wjedzie na przyciski ani na zdjecie. */
.w-hero-jasne .hero--slajder .hero-sterowanie {
  position: static;
  padding: var(--w-gap-kafle) var(--w-hero-x) var(--w-blok-y);
  justify-content: flex-start;
}
.w-hero-jasne .hero--slajder .hero-kropki { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }

.w-hero-jasne .hero--slajder:not(:has(.w-zaufanie--hero)) { --w-nachodzi: 0px; --w-karta-zauf-h: 0px; }
@media (min-width: 900px) {
  /* rzad pigulek stoi pod slajdem: slajd oddaje jego wysokosc */
  .w-hero-jasne .hero--slajder .hero-slajd { min-height: calc(min(var(--w-hero-h), 720px) - 44px - 2 * var(--w-blok-y)); }
  .w-hero-jasne .hero--slajder .hero-inner { padding-bottom: 0; }
  .w-hero-jasne .hero--slajder .hero-sterowanie { padding-top: var(--w-blok-y); }
  .w-hero-jasne .hero--slajder:has(.w-zaufanie--hero) .hero-sterowanie { padding-bottom: calc(var(--w-nad-karta) + var(--w-blok-y)); }
  
  .w-hero-jasne .hero--slajder p.sub { max-width: min(34em, 46vw); }
}
@media (max-width: 899px) {
  .w-hero-jasne .hero--slajder:has(.w-zaufanie--hero) .hero-sterowanie { padding-bottom: 0; }
}
@media (max-width: 600px) {
  .w-hero-jasne .hero--slajder .hero-kropka { padding: 0 14px; letter-spacing: .08em; }
}

.w-hero-jasne .hero--slajder .hero-bg { box-shadow: 0 0 0 1px var(--w-linia); background-color: #fff; }
.w-hero-jasne .hero--slajder .hero-bg img { object-fit: contain; }
.w-hero-jasne .hero--slajder .hero-bg--wypelnij { background-color: var(--w-plotno-2); }
.w-hero-jasne .hero--slajder .hero-bg--wypelnij img { object-fit: cover; }
@media (min-width: 900px) {
  .w-hero-jasne .hero--slajder .hero-bg {
    /* pas tresci slajdu: od gornego paddingu .hero-inner do dolu slajdu (pigulki stoja pod
       slajdem, patrz blok wyzej) - luk stoi na wysokosci tekstu, przy prawej krawedzi
       kontenera (jak w bibliotece) */
    --luk-gora: clamp(36px, 4vw, 64px);
    /* ile slajdu wystaje pod dolna krawedz okna (24 px zapasu); --hero-gora = gora hero
       w dokumencie, mierzona w js/hero.js (150 px = typowa wartosc, gdy JS nie ruszyl) */
    --luk-pod-oknem: max(0px, 100% + var(--hero-gora, 150px) + 24px - 100svh);
    top: var(--luk-gora);
    bottom: var(--luk-pod-oknem);
    right: var(--w-hero-x);
    
    width: min(520px, 48% - var(--w-hero-x) - 64px,
      max(300px, (100svh - var(--hero-gora, 150px) - var(--luk-gora) - 24px) * .8));
    height: auto;
    aspect-ratio: 4 / 5;
    /* luk nie wyzszy niz pas slajdu nad dolna krawedzia okna - przy waskim i niskim oknie
       robi sie bardziej kwadratowy, zamiast wchodzic na pigulki albo pod krawedz */
    max-height: calc(100% - var(--luk-gora) - var(--luk-pod-oknem));
    margin-block: auto;
    box-shadow: 0 0 0 1px var(--w-linia), var(--w-cien-plywajaca);
  }
}
@media (max-width: 899px) {
  /* pasek pod tekstem jest poziomy, a zdjecia pionowe albo kwadratowe - osobny kadr,
     zeby grawer zostal w pasku (bez --kadr-mob: kadr z luku) */
  .w-hero-jasne .hero--slajder .hero-bg img { object-position: var(--kadr-mob, var(--kadr, 50% 50%)); }
}

/* Przejscie miedzy slajdami (js/hero.js, przejscie()): slajd, ktory odchodzi (.byl), stoi
   pod nowym w pelni widoczny, az nowy sie pojawi - jego napisy gasna same, szybciej niz
   zwykle. Nowy slajd ze zdjeciem, ktore jeszcze sie pobiera (.czeka), ma luk przezroczysty:
   widac pod nim zdjecie poprzedniego, a nowe wchodzi na nie, gdy dojdzie. */
.hero--slajder .hero-slajd.jest { z-index: 2; }
.hero--slajder .hero-slajd.byl { z-index: 1; opacity: 1; visibility: visible; transition: none; }
.hero--slajder .hero-slajd.byl .hero-inner > * { transition: opacity .2s ease, transform .2s ease; transition-delay: 0s; }
.hero--slajder .hero-bg img { transition: opacity .35s ease; }
.hero--slajder .hero-slajd.czeka .hero-bg { background-color: transparent; box-shadow: none; }
.hero--slajder .hero-slajd.czeka .hero-bg img { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hero--slajder .hero-bg img, .hero--slajder .hero-slajd.byl .hero-inner > * { transition: none; }
}

/* ---------- Strona glowna - sekcje spoza katalogu biblioteki ---------- */
/* Etykieta na ciemnej karcie „Podglad graweru”: `.w-skora .w-sekcja .eyebrow` (0,3,0)
   daje --w-marka-tekst, czyli ciemny napis na ciemnej karcie; ta sama waga, dalej w kaskadzie. */
.w-skora .w-dlaczego__foto .eyebrow { color: var(--w-marka-jasna); }

.w-skora .w-okazje__lista { margin-top: var(--w-blok-y); }
.w-skora .w-okazje__lista .chip-okazja { border-color: var(--w-obrys-sterowania); background-color: var(--w-karta); color: var(--w-tekst); }
.w-skora .w-okazje__lista .chip-okazja:focus-visible { outline: 3px solid var(--w-marka-tekst); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .w-skora .w-okazje__lista .chip-okazja:hover { border-color: var(--w-marka-tekst); background-color: var(--w-tint); color: var(--w-marka-tekst); }
}
/* Telefon: 19 pigulek w zawijanym bloku to ok. 10 rzedow - jeden przewijany rzad od krawedzi
   do krawedzi, z wygaszeniem prawej krawedzi (#000/transparent tylko w masce). */
@media (max-width: 600px) {
  .w-skora .w-okazje__lista {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--w-pad-x));
    padding: 2px var(--w-pad-x) 10px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  }
  .w-skora .w-okazje__lista::-webkit-scrollbar { display: none; }
  .w-skora .w-okazje__lista .chip-okazja { flex: none; }
}
/* Dla firm: cztery sytuacje jako szklane karty BEZ zdjec, 2 x 2 (na telefonie jedna kolumna). */
.w-skora .w-hurt__sytuacje {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--w-gap-kafle);
  margin: clamp(24px, 2.6vw, 34px) 0;
  padding: 0;
  list-style: none;
}
.w-skora .w-hurt__sytuacje .w-szklo-karta { display: block; padding: 18px 20px 20px; }
.w-skora .w-hurt__sytuacje .w-szklo-karta h3 { margin: 0 0 6px; font-size: clamp(18px, 1.4vw, 21px); }
.w-skora .w-hurt__sytuacje .w-szklo-karta p { margin: 0; }
@media (max-width: 600px) {
  .w-skora .w-hurt__sytuacje { grid-template-columns: 1fr; }
}
/* Podglad graweru na telefonie: zdjecie z wygrawerowanym zdaniem idzie NAD tekst jako zwykly
   blok - inaczej naglowek stal na napisie z breloka. Kadr 358 x 260 z pliku 760 x 1140. */
@media (max-width: 600px) {
  .w-skora #personalizacja .w-dlaczego__foto { min-height: 0; padding-top: 0; justify-content: flex-start; }
  .w-skora #personalizacja .w-dlaczego__foto > img {
    position: static;
    width: calc(100% + 2 * clamp(28px, 4vw, 60px));
    max-width: none;
    height: 260px;
    margin: 0 calc(-1 * clamp(28px, 4vw, 60px)) 24px;
    object-position: 50% 30%;
  }
}

/* ---------- Powloka i podstrony ---------- */
/* stopka: telefon i e-mail maja cel 44 px (inline-flex), adres byl zwyklym wierszem -
   jeden rytm 44 px dla wszystkich trzech */
.w-skora .w-stopka-kontakt { line-height: 44px; }

.w-skora .suma b.suma-slowo { font-size: 15px; font-weight: 600; }
/* „Czytaj wiecej →”: inline-flex zjadal spacje z content: " \2192" */
.w-skora .bl-wiecej a { gap: .3em; }
/* etykieta w .tresc-waska: .w-skora .tresc-waska p (0,2,1) dawalo jej 16,5 px */
.w-skora .tresc-waska p.eyebrow { font-size: var(--w-eyebrow); }
@media (max-width: 600px) { .w-skora .tresc-waska p.eyebrow { font-size: 13px; } }
/* pasek kategorii 1024-1279: osiem pozycji przy .12em i strzalkach nie miesci sie, a
   wysrodkowany flex ucina wtedy pierwsza i ostatnia pozycje poza zasieg przewijania */
@media (min-width: 1024px) and (max-width: 1279px) {
  .w-skora .katbar-inner { gap: 0; }
  .w-skora .katbar .kat-link { padding-inline: 8px; letter-spacing: .05em; }
  .w-skora .katbar .kat-strzalka { display: none; }
}
/* szuflada koszyka na telefonie: pozycje koszyka przed propozycjami (lista miala 98 px) */
@media (max-width: 600px) {
  .w-skora #propListaKoszyk .prop-kafel:nth-child(n + 2) { display: none; }
}
@media (max-width: 600px) and (max-height: 760px) {
  .w-skora #propozycjeKoszyk { display: none; }
}

.w-skora .prod-foto img { object-fit: contain; }
.w-skora .prod-foto, .w-skora .prod-foto img { background-color: #fff; }

/* Luk hero: biblioteka daje gorze promien 999 px. Przy luku 380 px przegladarka skaluje
   WSZYSTKIE promienie tym samym czynnikiem (suma promieni gornej krawedzi > szerokosc),
   wiec dolne rogi schodzily z 20 do ok. 4 px, a na telefonie (358 x 300) gora robila sie
   polkolem i przycinala rogi zdjecia. Promienie w procentach, osobno w poziomie i w pionie,
   sie nie przeskalowuja: od 900 px gora zostaje lukiem, dol ma pelne --w-r-lg. */
.w-hero-jasne .hero--slajder .hero-bg {
  border-radius: 50% 50% var(--w-r-lg) var(--w-r-lg) / 40% 40% var(--w-r-lg) var(--w-r-lg);
}
@media (max-width: 899px) {
  /* Tor klatek to siatka, wiec kazdy slajd ma wysokosc najwyzszego; luk stal zaraz pod
     tekstem SWOJEGO slajdu i skakal w pionie co 5 s (odstep luk-pigulki 10-116 px).
     Przyklejony do dolu slajdu stoi w tym samym miejscu na kazdym slajdzie. */
  .w-hero-jasne .hero--slajder .hero-bg { margin-top: auto; }
}
@media (min-width: 601px) and (max-width: 899px) {
  /* tablet: luk 576 x 300 przy pionowych packshotach byl w 35-65% pusta biela, potem 320 x 300
     (najmniejsze zdjecie ze wszystkich szerokosci, prawa polowa pusta). Od 01.10 zdjecia
     wypelniaja luk: 480 x 360 (4:3) pokazuje grawer w calosci na wszystkich szesciu slajdach
     (sprawdzone na zrzutach 768 x 1024; 576 x 300 i 576 x 360 ucinaly napis chrztu, „Dawid”
     i nazwe na wizytowniku). Packshot (bez .hero-bg--wypelnij) stoi w nim cale, na bieli. */
  .w-hero-jasne .hero--slajder .hero-bg { max-width: 30rem; height: auto; aspect-ratio: 4 / 3; }
}

/* Portrety kategorii: body ma overflow-wrap:anywhere, a pole nazwy (right:68px na strzalke)
   bywa wezsze niz najdluzsze slowo - „prezentow / e” przy 768-1600 px, „i dlugopis / y”
   przy 1000 px. Slowo nie lamie sie w srodku, a kroj maleje tak, zeby sie miescilo. */
.w-skora .w-portret__nazwa { overflow-wrap: normal; font-size: clamp(19px, 1.55vw, 26px); }

/* Karty promo 1001-1279 px: kolumna tekstu miala 172-198 px i przycisk „Pamiatki religijne”
   lamal sie na dwie linie w pigulce 44 px. Szersza kolumna tekstu + przycisk w jednej linii. */
.w-skora .w-karta-promo .w-btn { white-space: nowrap; }
@media (min-width: 1001px) and (max-width: 1279px) {
  .w-skora .w-karta-promo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* Pasek kategorii 901-1023 px: wysrodkowany flex bez przewijania ucinal oba konce poza okno
   („UKTY” ... „NARZED”, „Zestawy” w calosci poza ekranem). Jak ponizej 900 px: pasek sie
   przewija, rozwijane menu znika (pozycje zostaja linkami). */
@media (min-width: 901px) and (max-width: 1023px) {
  .w-skora .katbar-inner { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .w-skora .kat-menu { display: none !important; }
  .w-skora .katbar .kat-strzalka { display: none; }
}

/* Szuflada koszyka na laptopie (1366x768, 1280x720): propozycje zajmowaly 344 px, a lista
   koszyka kurczyla sie do 32 px - pozycji nie bylo widac. Lista ma pierwszenstwo:
   dostaje miejsce na cala pozycje, propozycje oddaja wysokosc i przewijaja sie same. */
.w-skora #koszyk .szuflada-tresc { min-height: min(230px, 38vh); }
.w-skora #koszyk #propozycjeKoszyk { flex: 0 1 auto; min-height: 0; overflow-y: auto; }

/* Niska szuflada (telefon w poziomie, laptop z oknem ponizej 700 px): przyciski „Przejdz do
   zamowienia” wypadaly pod krawedz, a szuflada ma overflow hidden - na dotyku nie bylo drogi
   do kasy. Tu przewija sie CALA szuflada, a propozycje znikaja. */
@media (max-height: 700px) {
  .w-skora #koszyk { overflow-y: auto; overscroll-behavior: contain; }
  .w-skora #koszyk .szuflada-tresc { flex: 0 0 auto; min-height: 0; overflow: visible; }
  .w-skora #koszyk #propozycjeKoszyk { display: none; }
}
/* Pasek kategorii 901-1023 px przewija sie, ale nic tego nie mowilo - wygaszenie prawej
   krawedzi (#000/transparent tylko w masce). */
@media (min-width: 901px) and (max-width: 1023px) {
  .w-skora .katbar-inner {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  }
}
/* Luk hero na telefonie: 431-600 px mial pelna szerokosc (do 564 px, 64% bieli przy pionowym
   zdjeciu) i skakal do 320 px na progu 601; gora z promieniem 40% scinala rogi tabliczki. */
@media (max-width: 600px) {
  .w-hero-jasne .hero--slajder .hero-bg { max-width: 360px; }
}
@media (max-width: 899px) {
  .w-hero-jasne .hero--slajder .hero-bg {
    border-radius: 50% 50% var(--w-r-lg) var(--w-r-lg) / 28% 28% var(--w-r-lg) var(--w-r-lg);
  }
}

/* Pasek ogloszen 1024-1199 px: nowa druga pozycja („Wysylka w 48 h, breloki i bransoletki
   tego samego dnia”) jest najdluzsza w pasku. Trzy pozycje przy .1em zajmowaly 1009 z 1024 px
   (7,5 px z kazdej strony), a przy klasycznym pasku przewijania Windows (17 px) zapytanie
   min-width: 1024px dalej trafia, choc uklad ma 1007 px - skrajne litery wychodzily poza
   pasek. Ten sam zabieg co przy pasku kategorii wyzej: mniejszy odstep liter tylko w tym przedziale
   (od 1200 px trzy pozycje maja zapas ponad 80 px). */

@media (min-width: 1024px) and (max-width: 1199px) {
  .w-skora .promo-poz { letter-spacing: .02em; }
  .w-skora .promo-poz + .promo-poz { margin-left: 18px; }
  .w-skora .promo-poz + .promo-poz::before { margin-right: 18px; }
}

@media (max-width: 479px) {
  .w-skora .przewoznik, .w-skora .platnosc { flex-wrap: wrap; row-gap: 4px; }
  .w-skora .przewoznik input, .w-skora .platnosc input { margin: 0; }
  .w-skora .pw-tresc, .w-skora .pl-tresc { flex: 1 1 0; min-width: 0; }
  .w-skora .pw-cena, .w-skora .pl-doplata { flex: 1 0 100%; padding-left: 33px; }
}
/* Metoda platnosci bez operatora jest wylaczona (js/zamowienie.js, platnoscDostepna).
   Bez przyciemniania tekstu - nota pod nazwa musi zostac czytelna (kontrast jak reszta). */
.w-skora .platnosc.niedostepna { cursor: not-allowed; border-style: dashed; }
.w-skora .platnosc.niedostepna input { cursor: not-allowed; }
@media (hover: hover) { .w-skora .platnosc.niedostepna:hover { border-color: var(--line); } }
.pl-nota { font-style: italic; }

@media (max-width: 600px) {
  .w-hero-jasne .hero--slajder .hero-bg {
    order: -1;
    height: var(--w-zdj-mob);
    margin: 10px var(--w-pad-x) 0;
  }
  .w-hero-jasne .hero--slajder .hero-slajd {
    --w-zdj-mob: clamp(calc(min(400px, 100vw - 2 * var(--w-pad-x)) * .52),
      calc(100svh - max(498px, 498px + (390px - 100vw) * .5)), 300px);
  }
  /* dol 14 px = przesuniecie wejscia napisow (translateY 14px w style.css) - przy mniejszym
     dolnym odstepie tor (overflow: hidden) ucinal dol drugiego przycisku w czasie wjazdu slajdu */
  .w-hero-jasne .hero--slajder .hero-inner { padding: 12px var(--w-pad-x) 14px; }
  .w-hero-jasne .hero--slajder .eyebrow { margin-bottom: 8px; }
  .w-hero-jasne .hero--slajder :is(h1, .hero-tyt) { margin-bottom: 10px; font-size: clamp(30px, min(9.4vw, 4.7svh), 40px); }
  .w-hero-jasne .hero--slajder p.sub { margin-bottom: 14px; line-height: 1.45; }
  /* Zdjecie z tlem (cover) siega szerokosci przyciskow do proporcji 4:3 przy pasku 300 px:
     przy 412 i 430 px pasek 360 px konczyl sie 20 i 38 px przed prawa krawedzia przyciskow.
     4:3 to proporcja luku tabletu 480 x 360, na ktorej kadry --kadr-mob sa sprawdzone.
     Packshot na bieli (bez .hero-bg--wypelnij) zostaje przy 360 px. */
  .w-hero-jasne .hero--slajder .hero-bg--wypelnij { max-width: 400px; }
}

@media (min-width: 601px) and (max-width: 899px) and (min-height: 960px) {
  .w-hero-jasne .hero--slajder .hero-bg { order: -1; margin: 18px var(--w-pad-x) 0; }
  .w-hero-jasne .hero--slajder .hero-inner { padding-top: 22px; }
}

@media (min-width: 900px) {
  .w-hero-jasne .hero--slajder :is(h1, .hero-tyt) { font-size: clamp(44px, min(7.2vw, 9.5svh), 104px); }
}

/* =====================================================================
   NOC I ZLOTO - identyfikacja Styl24Nadruki (logo B3 Wstega).
   Rama strony (pasek ogloszen, naglowek, pasek kategorii, hero, pasy promo, newsletter,
   stopka) na nocy ze zlotem; tresc na cieplym kremie. Hexy wylacznie w :root.
   ===================================================================== */
:root {
  --a-logo-zloto: #E8C877;
  --a-logo-napis: #F7F8F7;
  --a-logo-zloto-jasne-tlo: #B28122;
  --a-krem-2: #BBBCB2;
  --a-pigulka-szukaj: #202F2B;
  --a-pigulka-szukaj-obrys: rgb(247 243 231 / .5);
  --a-zloto-nitka: rgb(232 200 119 / .38);
  --w-na-ciemnym: #F8EED6;
  --w-na-ciemnym-2: #F2E1B4;
  --w-na-zdjeciu-akcent: #F2E1B4;
  --w-hero-karta-em: #E8C877;
  --w-tlo-zdj-mieta: #F3E8CC;
  --w-tlo-zdj-blekit: #ECE6D4;
  --w-tlo-zdj-roz: #F5E7D6;
  --a-hero-tlo: #10201D;
  --a-hero-glebia: #0B1715;
  --a-hero-poswiata: rgb(232 200 119 / .07);
  --a-hero-obrys: rgb(247 243 231 / .28);
  --a-hero-obrys-mocny: rgb(247 243 231 / .7);
  --a-hero-pigulka: rgb(247 243 231 / .06);
  --a-hero-chip: #263126;
  --a-hero-pigulka-najechana: rgb(247 243 231 / .11);
  --a-zloto-jasniejsze: #F2DDA4;
  --a-kosc: #FDFAF3;
}

/* kroj naglowkow = kroj logo */
html.w-odwazna { --w-font-naglowki: 'Familjen Grotesk', var(--w-font-ui); --w-waga-naglowka: 700; --w-ls-h1: -.02em; }

/* naglowek i stopka na nocy; linki w spoczynku w przygaszonym kremie (8,78:1),
   zloto tylko dla pozycji aktywnej i najechanej */
html.w-naglowek-ciemny {
  --w-nag-tekst: var(--kremowy);
  --w-nag-tekst-2: var(--a-krem-2);
  --w-nag-linia: rgb(232 200 119 / .16);
  --w-nag-licznik-tlo: var(--kremowy);
  --w-nag-licznik-tekst: var(--noc);
}
html.w-stopka-ciemna {
  --w-stopka-tekst: var(--kremowy);
  --w-stopka-tekst-2: var(--a-krem-2);
  --w-stopka-linia: rgb(232 200 119 / .16);
}
html.w-naglowek-ciemny.w-skora .nav-linki a.link.akt { color: var(--w-marka-jasna); background: var(--w-nag-pigulka); }
html.w-naglowek-ciemny.w-skora .katbar .kat-link.akt { color: var(--w-marka-jasna); }
@media (hover: hover) and (pointer: fine) {
  html.w-naglowek-ciemny.w-skora .nav-linki a.link:hover { color: var(--w-marka-jasna); background: var(--w-nag-pigulka); }
  html.w-naglowek-ciemny.w-skora .katbar .kat-link:hover,
  html.w-naglowek-ciemny.w-skora .kat-poz:hover .kat-link { color: var(--w-marka-jasna); }
  html.w-stopka-ciemna.w-skora footer a:hover { color: var(--w-marka-jasna); }
}
html.w-stopka-ciemna.w-skora footer h4 { color: var(--w-marka-jasna); }
html.w-naglowek-ciemny.w-skora .pasek-promo { box-shadow: inset 0 -1px 0 var(--a-zloto-nitka); }

/* stopka: wiersz prawny bez bialej pigulki */
html.w-stopka-ciemna.w-skora .copy {
  padding: 18px 0 0;
  border-radius: 0;
  border-top: 1px solid var(--w-stopka-linia);
  background: transparent;
  color: var(--a-krem-2);
}
html.w-stopka-ciemna.w-skora .copy a,
html.w-stopka-ciemna.w-skora .w-copy-prawne a { color: var(--kremowy); }
html.w-stopka-ciemna.w-skora .copy :focus-visible { outline-color: var(--w-marka-jasna); }
@media (hover: hover) and (pointer: fine) {
  html.w-stopka-ciemna.w-skora .copy a:hover,
  html.w-stopka-ciemna.w-skora .w-copy-prawne a:hover { color: var(--w-marka-jasna); }
}
@media (max-width: 1023px) {
  html.w-stopka-ciemna.w-skora .copy { border-radius: 0; padding: 18px 0 0; }
}

/* pole „Szukaj produktow…” w ciemnym naglowku od 1280 px (ponizej sama lupa) */
@media (min-width: 1280px) {
  html.w-skora.w-naglowek-ciemny #doSzukania {
    --szer-pigulki: clamp(200px, 17vw, 300px);
    position: relative;
    isolation: isolate;
    margin-left: calc(var(--szer-pigulki) - 44px);
    border-radius: var(--w-r-pill);
  }
  html.w-skora.w-naglowek-ciemny #doSzukania::before {
    content: "Szukaj produktów…";
    content: "Szukaj produktów…" / "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    z-index: -1;
    display: flex;
    align-items: center;
    width: var(--szer-pigulki);
    padding: 0 48px 0 20px;
    overflow: hidden;
    border: 1px solid var(--a-pigulka-szukaj-obrys);
    border-radius: var(--w-r-pill);
    background: var(--a-pigulka-szukaj);
    color: var(--a-krem-2);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  html.w-skora.w-naglowek-ciemny #doSzukania:focus-visible { outline: none; }
  html.w-skora.w-naglowek-ciemny #doSzukania:focus-visible::before { outline: 3px solid var(--w-nag-fokus); outline-offset: 2px; }
}
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
  html.w-skora.w-naglowek-ciemny #doSzukania:hover { background: transparent; }
  html.w-skora.w-naglowek-ciemny #doSzukania:hover::before { border-color: var(--w-marka-jasna); }
}

/* logo B3: na nocy kokarda w zlocie, napis w neutralu; na jasnym (gdyby stanelo) ciemne zloto */
.w-skora .w-logo { --w-logo-akcent: var(--a-logo-zloto-jasne-tlo); }
html.w-skora .brand--logo .w-logo,
html.w-skora .stopka-logo .w-logo { --w-logo-akcent: var(--a-logo-zloto); color: var(--a-logo-napis); }
.w-skora .brand--logo .w-logo { height: 40px; width: auto; }
@media (max-width: 600px) { .w-skora .brand--logo .w-logo { height: 33px; } }
@media (max-width: 360px) { .w-skora .brand--logo .w-logo { height: 28px; } }
.w-skora .stopka-logo .w-logo { height: 42px; width: auto; }

/* hero „jasne” na nocy */
.w-hero-jasne .hero--slajder { background-color: var(--a-hero-tlo); color: var(--kremowy); }
.w-hero-jasne .hero--slajder::before {
  background-color: var(--a-hero-tlo);
  background-image:
    radial-gradient(circle at 78% 30%, var(--a-hero-poswiata) 0 24%, transparent 24.2%),
    radial-gradient(circle at 40% 108%, var(--a-hero-poswiata) 0 18%, transparent 18.2%),
    linear-gradient(180deg, var(--a-hero-tlo), var(--a-hero-glebia));
}
.w-hero-jasne .hero--slajder :is(h1, .hero-tyt) { color: var(--kremowy); }
.w-hero-jasne .hero--slajder :is(h1, .hero-tyt) em { color: var(--zloto); }
.w-hero-jasne .hero--slajder p.sub { color: var(--w-na-ciemnym); }
.w-hero-jasne .hero--slajder .eyebrow { background-color: var(--a-hero-chip); color: var(--zloto); box-shadow: none; }
.w-hero-jasne .hero--slajder .hero-cta .btn { background-color: var(--zloto); border-color: var(--zloto); color: var(--noc); box-shadow: none; }
.w-hero-jasne .hero--slajder .hero-cta .btn--nahero { background-color: transparent; border-color: var(--a-hero-obrys-mocny); color: var(--kremowy); box-shadow: none; }
.w-hero-jasne .hero--slajder .hero-kropka { background-color: var(--a-hero-pigulka); border-color: var(--a-hero-obrys); color: var(--kremowy); }
.w-hero-jasne .hero--slajder .hero-kropka .w-kropka-nr { color: var(--zloto); }
.w-hero-jasne .hero--slajder .hero-kropka.jest { background-color: var(--zloto); border-color: var(--zloto); color: var(--noc); }
.w-hero-jasne .hero--slajder .hero-kropka.jest .w-kropka-nr { color: var(--noc); }
.w-hero-jasne .hero--slajder .hero-kropka:focus-visible { outline-color: var(--zloto); }
.w-hero-jasne .hero--slajder .hero-bg { box-shadow: 0 0 0 1px var(--a-hero-obrys); }
@media (min-width: 900px) {
  .w-hero-jasne .hero--slajder .hero-bg { box-shadow: 0 0 0 1px var(--a-hero-obrys), 0 24px 60px rgb(0 0 0 / .35); }
}
@media (hover: hover) and (pointer: fine) {
  .w-hero-jasne .hero--slajder .hero-cta .btn:hover { background-color: var(--a-zloto-jasniejsze); border-color: var(--a-zloto-jasniejsze); color: var(--noc); }
  .w-hero-jasne .hero--slajder .hero-cta .btn--nahero:hover { background-color: var(--kremowy); border-color: var(--kremowy); color: var(--noc); }
  .w-hero-jasne .hero--slajder .hero-kropka:not(.jest):hover { background-color: var(--a-hero-pigulka-najechana); border-color: var(--a-hero-obrys-mocny); color: var(--kremowy); }
}

/* hero podstron */
.w-skora .pod-hero-eyebrow { border-color: transparent; background: var(--a-hero-chip); color: var(--w-marka-jasna); }
.w-skora .pod-hero-tytul { color: var(--kremowy); }

/* ciemne przyciski: tlo i napis razem takze po najechaniu */
@media (hover: hover) and (pointer: fine) {
  .w-skora .w-btn--czarna:hover { background-color: var(--zloto); border-color: var(--zloto); color: var(--noc); }
}

/* pelny przycisk na nocy = zlota pigulka, po najechaniu krem */
.w-skora :is(.pod-hero, .sekcja--noc, .zaufanie, .df-zaufanie, .bl-hero, .kt-hero, .duet--noc, [style*="background:var(--noc)"], [style*="background: var(--noc)"]) .btn:not(.btn--kontur):not(.btn--obrys):not(.btn--nahero) {
  background: var(--zloto); border-color: var(--zloto); color: var(--noc);
}
.w-skora .w-btn--biala { background-color: var(--zloto); border-color: var(--zloto); color: var(--noc); }
@media (hover: hover) and (pointer: fine) {
  .w-skora :is(.pod-hero, .sekcja--noc, .zaufanie, .df-zaufanie, .bl-hero, .kt-hero, .duet--noc, [style*="background:var(--noc)"], [style*="background: var(--noc)"]) .btn:not(.btn--kontur):not(.btn--obrys):not(.btn--nahero):hover {
    background: var(--kremowy); border-color: var(--kremowy); color: var(--noc);
  }
  .w-skora .w-btn--biala:hover { background-color: var(--kremowy); border-color: var(--kremowy); color: var(--noc); }
}

/* sekcje „biale” w kosci, karty zostaja biale */
.w-skora .w-sekcja--biala { background-color: var(--a-kosc); }

/* wyroznione slowo w tytule sekcji: napis w nocy, pod nim zlota wstega jak pas w logo
   (pas 0,34 wysokosci wersalika, za tekstem; przy zawinieciu kazdy wiersz ma swoj pas) */
.w-skora .w-sekcja h2 em {
  color: var(--w-tekst);
  background-image: linear-gradient(var(--zloto), var(--zloto));
  background-repeat: no-repeat;
  background-size: 100% .24em;
  background-position: 0 72%;
  padding-inline: .06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.w-skora :is(.w-dlaczego__foto, .w-opowiesc__tekst, .w-promo__tekst, .w-sekcja--ciemna) h2 em {
  color: var(--w-marka-jasna);
  background-image: none;
  padding-inline: 0;
}

/* karta produktu: „Dodaj do koszyka” glowny (noc, krem, zlota torba), „Kup teraz” drugorzedny (obrys).
   :not(.btn--nieczynny) - przycisk wygaszony przez app.js (brak na stanie, wariant bez ceny)
   zostaje szary i nie reaguje na najechanie */
.w-skora .kup-rzad .btn--kup:not(.btn--nieczynny) { background: var(--noc); border-color: var(--noc); color: var(--kremowy); }
.w-skora .kup-rzad .btn--kup:not(.btn--nieczynny)::before { background: var(--zloto); }
.w-skora .kup-rzad .btn--szybki:not(.btn--nieczynny) { background: transparent; border: 2px solid var(--noc); color: var(--noc); }
@media (hover: hover) and (pointer: fine) {
  .w-skora .kup-rzad .btn--kup:not(.btn--nieczynny):hover { background: var(--zloto); border-color: var(--zloto); color: var(--noc); }
  .w-skora .kup-rzad .btn--kup:not(.btn--nieczynny):hover::before { background: var(--noc); }
  .w-skora .kup-rzad .btn--szybki:not(.btn--nieczynny):hover { background: var(--noc); border-color: var(--noc); color: var(--zloto); }
}
.w-skora :is(.kup-rzad, .prod-dol) .btn--nieczynny,
.w-skora :is(.kup-rzad, .prod-dol) .btn--nieczynny:hover {
  background: var(--w-plotno-2); border: 1px solid var(--muted2); color: var(--w-przygaszony); translate: none;
}
.w-skora :is(.kup-rzad, .prod-dol) .btn--nieczynny::before { background: currentColor; }

/* lista produktow: „Do koszyka” z zlota torba, po najechaniu zloto z napisem w nocy */
.w-skora .prod-dol .btn[data-dodaj]:not(.btn--nieczynny) { background: var(--noc); border-color: var(--noc); color: var(--kremowy); }
.w-skora .prod-dol .btn[data-dodaj]:not(.btn--nieczynny)::before { background: var(--zloto); }
@media (hover: hover) and (pointer: fine) {
  .w-skora .prod-dol .btn[data-dodaj]:not(.btn--nieczynny):hover { background: var(--zloto); border-color: var(--zloto); color: var(--noc); }
  .w-skora .prod-dol .btn[data-dodaj]:not(.btn--nieczynny):hover::before { background: var(--noc); }
}

/* linki w tresci: noc z podkresleniem w zlocie logo na jasne tlo (3,13:1 na kremie),
   po najechaniu glebokie zloto */
.w-skora :is(.tresc-waska, .akordeon, .opis-tresc, .blok-prawny, .karta-blok, .kt-poz-mala) p a:not(.btn),
.w-skora .lista-tresci a,
.w-skora .link-podkreslony {
  color: var(--w-tekst);
  text-decoration: underline;
  text-decoration-color: var(--a-logo-zloto-jasne-tlo);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .w-skora :is(.tresc-waska, .akordeon, .opis-tresc, .blok-prawny, .karta-blok, .kt-poz-mala) p a:not(.btn):hover,
  .w-skora .lista-tresci a:hover,
  .w-skora .link-podkreslony:hover { color: var(--w-marka-tekst); text-decoration-color: currentColor; }
}
@media (min-width: 601px) { .w-skora .sortuj { min-width: 220px; } }

/* rzad zakupu na karcie produktu: siatka zamiast zawijanego flexa (flex rozkladal go na
   trzy wiersze z samotnym sercem, a „Kup teraz” rozciagal na cala szerokosc - szerzej niz
   przycisk glowny). Uklad zalezy od szerokosci KOLUMNY zakupu, nie ekranu:
   - od 400 px: ilosc | Dodaj na reszte rzedu, pod spodem „Kup teraz” rowno pod „Dodaj”
     i wezszy od niego, a obok obie ikony - drugi rzad domyka sie do prawej krawedzi;
   - ponizej 400 px (telefon): ilosc + ikony, potem Dodaj i Kup teraz na cala szerokosc. */
.w-skora .karta-produktu > div:last-child { container: zakup / inline-size; }
.w-skora .kup-rzad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px 56px;
  grid-template-areas: "ilosc udostepnij serce" "kup kup kup" "szybki szybki szybki";
  gap: 12px;
  align-items: center;
}
.w-skora .kup-rzad > .ilosc { grid-area: ilosc; }
.w-skora .kup-rzad > .btn--kup { grid-area: kup; }
.w-skora .kup-rzad > .btn--szybki { grid-area: szybki; }
.w-skora .kup-rzad > #udostepnijPro { grid-area: udostepnij; }
.w-skora .kup-rzad > #sercePro { grid-area: serce; }
@container zakup (min-width: 400px) {
  .w-skora .kup-rzad {
    grid-template-columns: auto minmax(0, 1fr) 56px 56px;
    grid-template-areas: "ilosc kup kup kup" ". szybki udostepnij serce";
  }
}

html.w-skora .w-faq .akordeon details > p a,
html.w-skora .w-kontakt .kontakt-karta a,
html.w-skora .w-kontakt__formularz .zgoda a,
html.w-skora .zgoda:not(.nl-zgoda) a,
html.w-skora .link-akcja {
  background-color: transparent;
  color: var(--w-tekst);
  text-decoration: underline;
  text-decoration-color: var(--a-logo-zloto-jasne-tlo);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  html.w-skora .w-faq .akordeon details > p a:hover,
  html.w-skora .w-kontakt .kontakt-karta a:hover,
  html.w-skora .w-kontakt__formularz .zgoda a:hover,
  html.w-skora .zgoda:not(.nl-zgoda) a:hover,
  html.w-skora .link-akcja:hover { background-color: transparent; color: var(--w-marka-tekst); text-decoration-color: currentColor; }
}

/* pasek kategorii: pozycja aktywna (app.js oznacza ja klasa akt i aria-current) - zloto
   i zlota kreska u dolu, zeby nie odrozniac jej samym kolorem */
html.w-naglowek-ciemny.w-skora .katbar .kat-link.akt { color: var(--w-marka-jasna); box-shadow: inset 0 -2px 0 var(--w-marka-jasna); }

/* hero podstron: wyroznione slowo prostym krojem (Familjen Grotesk nie ma kursywy -
   przegladarka podrabiala ja pochyleniem) i w tym samym zlocie co hero glownej (10,40:1) */
.w-skora .pod-hero-tytul em { font-style: normal; color: var(--zloto); }

/* fokus z klawiatury: obrys liczony z tlem, na ktorym naprawde lezy */
/* biale karty w ciemnym naglowku (mega-menu kategorii, panel wyszukiwarki): glebokie zloto, 8,80:1 na bieli */
html.w-naglowek-ciemny.w-skora header.nav :is(.kat-menu, .szukaj-panel) :focus-visible { outline-color: var(--w-marka-tekst); }
/* hero glownej na nocy: zloto, 10,40:1 */
.w-hero-jasne .hero--slajder :focus-visible { outline-color: var(--zloto); }
/* przycisk w nocy na jasnej karcie: obrys stoi 3 px od niego, na kremie */
.w-skora .w-btn--czarna:focus-visible { outline-color: var(--w-marka-tekst); }

/* kasa: krok zablokowany bez opacity (polowa krycia dawala 2,74:1) - przygaszony kolor
   liczony z tlem, numer jako pusty krazek */
.w-skora .kasa-krok.zablokowany { opacity: 1; }
.w-skora .kasa-krok.zablokowany .krok-tyt { color: var(--w-przygaszony); }
.w-skora .kasa-krok.zablokowany .krok-nr { background: transparent; box-shadow: inset 0 0 0 2px var(--muted2); color: var(--w-przygaszony); }

/* kafle sytuacji (dla-firm): napis nad zdjeciem mial 6,53:1 od najgorszego piksela na 768 px -
   welon podniesiony tam, gdzie zaczyna sie napis (cel 7:1 dla drobnego tekstu) */
.w-skora .kafel::after {
  background: linear-gradient(0deg, rgb(var(--w-welon) / .92) 0%, rgb(var(--w-welon) / .86) 34%, rgb(var(--w-welon) / .66) 52%, transparent 72%);
}