/* wygenerowane przez wtyczka/buduj.py z labu (realizacje-od-zera/v1/zrodlo/realizacje-strona.css) — nie edytuj */
/* LAB podstrona realizacji aslandi.pl od zera, v1 (28.09.2026).
   Polecenie Igora: cała podstrona realizacji, prosta w nawigacji i oglądaniu; u góry filtr jak w sklepie (wszystkie,
   fotowoltaika, pompy ciepła, klimatyzacja, magazyny energii), domyślnie wszystkie: najpierw cała fotowoltaika, potem
   pompy, klimatyzacje, magazyny; duże realizacje; przełącznik jednostka zewnętrzna / wewnętrzna zostaje; wszystkie
   realizacje z obecnej podstrony. Wzór kafla: sekcja realizacji nowej strony głównej (Igor: „majstersztyk”).
   Marka (marka/DESIGN.md): sosna #123f2d, złoto #ceb472, Poppins, jasny motyw, karty realizacji z promieniem 12 px.
   Układ: nagłówek z oceną w Google, przyklejony pasek filtrów (kropka wyboru, ikona, nazwa, liczba), grupy kategorii
   z nagłówkiem i liczbą, kafle 4:3 po dwa w rzędzie (ok. 588 px na komputerze), na końcu pas z wyceną.
   Ruch: pętle z drona tylko na ekranie; zmiana zdjęcia zewnętrzna / wewnętrzna przenikaniem; bez animacji wejścia.
   Przy ograniczonym ruchu: plakaty zamiast filmów, bez przenikania i płynnego przewijania. */
.rs {
  --rs-sosna: #123f2d;
  --rs-sosna-2: #19583f;
  --rs-noc: 6, 33, 23;
  --rs-atrament: #1c3428;
  --rs-szary: #58685f;
  --rs-linia: #dce3da;
  --rs-szalwia: #eef3ec;
  --rs-zloto: #ceb472;
  --rs-zloto-2: #d8c287;
  --rs-zloto-tekst: #182e23;
  --rs-zloto-jasne: #dcc78f;
  --rs-fokus: #a67b23;
  --rs-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --rs-r: 12px;
  --rs-gora: 0px;              /* wysokość przyklejonego nagłówka witryny, ustawia skrypt */
  background: #f7f8f4;
  color: var(--rs-atrament);
  font-family: Poppins, system-ui, sans-serif;
  padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 96px);
}
.rs *, .rs *::before, .rs *::after { box-sizing: border-box; }
.rs h1, .rs h2, .rs p, .rs ul, .rs figure { margin: 0; }
.rs ul { padding: 0; list-style: none; }
.rs a, .rs button { -webkit-tap-highlight-color: transparent; }
/* motyw tej podstrony podkreśla linki w treści silniejszym selektorem; przyciski i plakietka bez podkreślenia */
.rs a.rs-google, .rs a.rs-btn, .rs a.rs-tel, .rs a.rs-google:hover, .rs a.rs-btn:hover { text-decoration: none; }
/* motyw zmienia linkom kolor na złoty przy najechaniu i fokusie (a:hover, a:focus): na złotym przycisku napis znikał
   (kontrast 1:1), na odznace Google spadał do 2:1; linki strony trzymają swoje kolory w każdym stanie */
.rs a.rs-btn, .rs a.rs-btn:hover, .rs a.rs-btn:focus, .rs a.rs-btn:active, .rs a.rs-btn:visited { color: var(--rs-zloto-tekst); }
.rs a.rs-tel, .rs a.rs-tel:hover, .rs a.rs-tel:focus, .rs a.rs-tel:active, .rs a.rs-tel:visited { color: #fff; }
.rs a.rs-google, .rs a.rs-google:hover, .rs a.rs-google:focus, .rs a.rs-google:active, .rs a.rs-google:visited { color: var(--rs-atrament); }
.rs ::selection { background: #cfdcc5; color: var(--rs-atrament); }
/* obrys fokusu idzie za promieniem samego elementu (nadpisywanie border-radius zmieniało kształt pigułek) */
.rs :focus-visible { outline: 3px solid var(--rs-fokus); outline-offset: 3px; }
.rs-wew { width: min(1200px, 100% - 64px); margin-inline: auto; }

/* Nagłówek strony: tytuł, jedno zdanie, ocena w Google (dowód przed galerią). */
.rs-naglowek { max-width: 48rem; margin: 0 auto clamp(24px, 3vw, 36px); text-align: center; }
.rs h1 { font-size: clamp(34px, 2.8vw + 18px, 56px); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: var(--rs-sosna); text-wrap: balance; }
.rs h1 em { font-style: normal; padding-inline: 2px; background: linear-gradient(transparent 66%, rgba(206, 180, 114, 0.55) 66%, rgba(206, 180, 114, 0.55) 92%, transparent 92%); }
.rs .rs-lead { margin-top: 14px; font-size: clamp(16.5px, 0.35vw + 15px, 19px); line-height: 1.55; color: var(--rs-szary); text-wrap: balance; }
.rs-google { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; min-height: 48px; padding: 8px 20px 8px 18px; border-radius: 999px;
  background: #fff; color: var(--rs-atrament); text-decoration: none; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--rs-linia), 0 10px 24px -18px rgba(18, 63, 45, 0.6);
  touch-action: manipulation; transition: transform 180ms var(--rs-ease), box-shadow 180ms var(--rs-ease); }
.rs-google img { display: block; flex: none; width: 74px; height: auto; }
.rs-google-ocena { padding-left: 12px; border-left: 1px solid var(--rs-linia); font-size: 18px; font-weight: 700; line-height: 1; }
.rs-google-gwiazdki { display: block; flex: none; width: 90px; line-height: 0; color: #fbbc04; }
.rs-google-gwiazdki svg { width: 100%; height: auto; fill: currentColor; }
.rs-google-liczba { font-size: 15.5px; font-weight: 500; line-height: 1; color: #46564d; }
.rs-google:active { transform: scale(0.97); }

/* Filtry: przyklejony pasek. Każdy filtr: kropka wyboru, ikona, nazwa, liczba realizacji; wybrany na sośnie ze złotą
   liczbą. Wszystkie filtry widać naraz na każdej szerokości, nic nie chowa się za przewijaniem w bok (Igor 29.09):
   od 960 px jeden rząd (kropka od 1280 px, ikona od 1080 px), węziej siatka 3 + 2 (na telefonie nazwa nad liczbą,
   poniżej 360 px dwie kolumny). Stała wysokość (bez zmiany po przyklejeniu), więc strona nie skacze.
   Poniżej 960 px filtry mają dwa rzędy, więc przyklejony pasek chowa się przy przewijaniu w dół i wraca przy każdym
   przewinięciu w górę (klasa schowany ze skryptu; samo przesunięcie, bez zmiany układu). Tło, cień i przesunięcie
   ma pasek filtrów; opakowanie przepuszcza dotyk, żeby schowany pasek nie zasłaniał kafli. */
.rs-filtry-pas { position: sticky; top: var(--rs-gora); z-index: 20; margin: 0 0 clamp(24px, 3vw, 36px); pointer-events: none; }
.rs-filtry { display: none; }
/* 12 px w pionie mieści obrys fokusu filtra (3 px + 3 px odstępu); wysokość pasa jak dawniej (12 + filtr + 12).
   Wysokość nie zależy od czcionki: gdy brakuje miejsca (szersza czcionka zastępcza, zanim dojdzie Poppins, albo
   powiększony tekst), filtry się zwężają, a nazwa schodzi do drugiej linii wewnątrz filtra; rząd nie zawija się,
   więc siatka pod paskiem nie skacze (zawijanie rzędu dawało przeskok 0,34 CLS). */
.rs--js .rs-filtry { display: flex; gap: 10px; padding: 12px max(32px, calc((100% - 1200px) / 2)); background: #f7f8f4;
  pointer-events: auto; transition: transform 240ms var(--rs-ease), box-shadow 200ms ease; }
.rs-filtry-pas.przyklejony .rs-filtry { box-shadow: 0 1px 0 var(--rs-linia), 0 12px 24px -20px rgba(18, 63, 45, 0.5); }
.rs-filtry-pas.schowany .rs-filtry { transform: translateY(calc(-100% - var(--rs-gora) - 4px)); box-shadow: none; }.rs .rs-filtry [role="radio"], .rs .rs-filtry [role="radio"]:hover, .rs .rs-filtry [role="radio"]:focus {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: 1 1 auto; min-width: 0; min-height: 56px; margin: 0; padding: 0 18px 0 14px;
  text-align: center;
  border: 1px solid var(--rs-linia); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(18, 63, 45, 0.05); color: var(--rs-atrament);
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: normal; text-transform: none; cursor: pointer;
  touch-action: manipulation; user-select: none; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
.rs-kropka { flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px #9aa89f; transition: box-shadow 180ms ease; }
.rs-ikona { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--rs-sosna); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rs-liczba { font-size: 14px; font-weight: 600; color: var(--rs-szary); }
.rs .rs-filtry [role="radio"][aria-checked="true"] { border-color: var(--rs-sosna); background: var(--rs-sosna); color: #fff; }
.rs .rs-filtry [aria-checked="true"] .rs-kropka { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 5px var(--rs-sosna), inset 0 0 0 8px var(--rs-zloto-jasne); }
.rs .rs-filtry [aria-checked="true"] .rs-ikona { stroke: var(--rs-zloto-jasne); }
.rs .rs-filtry [aria-checked="true"] .rs-liczba { color: var(--rs-zloto-jasne); }

/* Grupy kategorii: w „wszystkich” jedna pod drugą w kolejności fotowoltaika, pompy, klimatyzacja, magazyny. */
/* odstęp przez gap, nie margines sąsiada: ukryta grupa nie dokłada odstępu nad pierwszą widoczną */
.rs-grupy { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.rs-grupa[hidden] { display: none; }
.rs-grupa-naglowek { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--rs-linia); scroll-margin-top: calc(var(--rs-gora) + 96px); }
.rs h2 { font-size: clamp(24px, 1vw + 18px, 32px); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--rs-sosna); }
.rs-grupa-liczba { font-size: 15px; font-weight: 500; color: var(--rs-szary); white-space: nowrap; }

/* Warianty w kategorii (fotowoltaika, pompy, klimatyzacja; polecenie szefowej 28.09): podsekcje z nagłówkiem
   i liczbą; po wybraniu kategorii pod jej nagłówkiem rząd przycisków wariantów (pigułki, żeby nie myliły się z filtrami
   kategorii). Puste warianty tylko w labie: przerywana ramka, nieaktywne. Odstępy przez gap (ukryta podsekcja nie
   dokłada odstępu). Bez skryptu: wszystkie podsekcje z nagłówkami, bez przycisków. */
.rs-grupa-tresc { display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 44px); }
/* „Wszystkie” = jedna siatka wymieszanych realizacji (Igor 29.09); w podpisie wtedy nazwa kategorii, w kategorii nie. */
.rs-kat { display: none; }
.rs-mieszane .rs-kat { display: inline; }
/* „Zobacz więcej” pod siatką mieszaną (reguły ukrywania kafli wstawia budowanie, z kroku w danych). Bez skryptu
   przycisku nie ma, widać wszystkie realizacje. Obrys jak „Zobacz wszystkie realizacje” na stronie głównej. */
.rs-wiecej-pas { display: none; }
.rs--js .rs-wiecej-pas { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: clamp(24px, 3vw, 36px); }
.rs--js .rs-wiecej-pas[hidden] { display: none; }
.rs .rs-wiecej, .rs .rs-wiecej:hover, .rs .rs-wiecej:focus { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; margin: 0; padding: 12px 28px; border: 1.5px solid var(--rs-sosna); border-radius: 10px; background: #fff; box-shadow: none;
  color: var(--rs-sosna); font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: normal; text-transform: none;
  cursor: pointer; touch-action: manipulation; user-select: none; transition: background-color 160ms ease, color 160ms ease; }
.rs-wiecej svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rs-wiecej-liczba { font-weight: 500; }
.rs .rs-pokazano { margin: 0; font-size: 14px; line-height: 1.4; color: var(--rs-szary); }
/* wejście z adresu z kategorią: siatka ukryta, zanim skrypt ją ułoży; gdyby skrypt nie ruszył, odkrywa się po 2,5 s */
.rs--czeka .rs-grupy { visibility: hidden; animation: rs-odkryj 0s linear 2.5s forwards; }
@keyframes rs-odkryj { to { visibility: visible; } }
.rs-wariant[hidden] { display: none; }
.rs .rs-wariant-naglowek { display: block; margin: 0 0 14px; padding: 0; font-family: inherit;
  font-size: clamp(17px, 0.45vw + 15px, 20px); line-height: 1.3; font-weight: 600; letter-spacing: -0.005em; text-transform: none; color: var(--rs-sosna); text-wrap: balance; }
.rs-wariant-liczba { margin-left: 10px; font-size: 14px; font-weight: 500; color: var(--rs-szary); white-space: nowrap; }
.rs-warianty { display: none; }
/* rząd wariantów zawija się do kolejnych linii: wszystkie warianty widać naraz, bez przewijania w bok (Igor 29.09) */
.rs--js.rs--kategoria .rs-warianty { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 22px; padding-block: 6px; }
.rs .rs-warianty [role="radio"], .rs .rs-warianty [role="radio"]:hover, .rs .rs-warianty [role="radio"]:focus {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 16px; border: 1px solid var(--rs-linia);
  border-radius: 999px; background: #fff; box-shadow: none; color: var(--rs-atrament); font: inherit; font-size: 14.5px; font-weight: 600;
  line-height: 1.2; letter-spacing: normal; text-transform: none; white-space: nowrap; cursor: pointer; touch-action: manipulation; user-select: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.rs-warianty .rs-liczba { margin-left: 8px; white-space: nowrap; }
/* wyraz z łącznikiem (All-in-One, 1-fazowa) nie łamie się po łączniku; znacznik wstawia budowanie */
.rs-cale { white-space: nowrap; }
.rs .rs-warianty [role="radio"][aria-checked="true"] { border-color: var(--rs-sosna); background: var(--rs-sosna); color: #fff; }
.rs .rs-warianty [aria-checked="true"] .rs-liczba { color: var(--rs-zloto-jasne); }
.rs .rs-warianty [role="radio"][aria-disabled="true"] { border-style: dashed; border-color: #b9c4bb; background: transparent; color: #6f7e75; cursor: default; }

/* Powiększenie realizacji (Igor 29.09): przycisk „Powiększ” na całym kaflu (pod przełącznikiem i przyciskiem filmu),
   ikona w prawym górnym rogu po najechaniu, na dotyku widoczna zawsze. Okno <dialog> na ciemnym tle: film w pełnym
   kadrze 16:9 albo całe zdjęcie, podpis w lewym dolnym rogu, przełącznik jednostek w lewym górnym, krzyżyk, strzałki
   i licznik przy krawędziach ekranu; na telefonie strzałki na dole. Duże pliki pobierają się dopiero po otwarciu. */
.rs-powieksz { display: none; }
.rs--js .rs-powieksz { position: absolute; inset: 0; z-index: 1; display: block; }
.rs .rs-powieksz, .rs .rs-powieksz:hover, .rs .rs-powieksz:focus { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  box-shadow: none; cursor: zoom-in; }
.rs .rs-powieksz:focus-visible { outline: 3px solid #fff; outline-offset: -3px; box-shadow: inset 0 0 0 7px rgba(var(--rs-noc), 0.6); }
.rs-powieksz-ikona { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); color: var(--rs-sosna); box-shadow: 0 6px 16px -8px rgba(var(--rs-noc), 0.7); opacity: 0; transform: scale(0.9);
  transition: opacity 180ms ease, transform 180ms var(--rs-ease); pointer-events: none; }
.rs-powieksz-ikona svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rs .rs-powieksz:focus-visible .rs-powieksz-ikona { opacity: 1; transform: none; }

html.rs-okno-otwarte { overflow: hidden; }
.rs-okno { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent;
  color: #fff; overflow: hidden; }
.rs-okno::backdrop { background: rgba(6, 33, 23, 0.94); }
.rs-okno[open] { display: block; }
.rs-okno-scena { display: grid; place-items: center; width: 100%; height: 100%; padding: 72px 96px; }
.rs .rs-okno-kadr { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: #0d2a1f; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85); }
.rs-okno-media img, .rs-okno-media video { display: block; max-width: none; object-fit: contain; background: #0d2a1f; }
.rs-okno-podpis { position: absolute; inset: auto 0 0; z-index: 1; display: flex; flex-direction: column; gap: 3px; padding: 80px 26px 22px; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 33, 23, 0) 0%, rgba(6, 33, 23, 0.72) 58%, rgba(6, 33, 23, 0.9) 100%); }
.rs .rs-okno-podpis strong { font-size: 24px; font-weight: 600; line-height: 1.25; color: #fff; }
.rs .rs-okno-podpis span { font-size: 16px; line-height: 1.35; color: rgba(255, 255, 255, 0.88); }
.rs-okno-przelacznik[hidden] { display: none; }
.rs-okno-film { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: min(240px, 40%); height: min(200px, 44%);
  transform: translate(-50%, -50%); }
.rs .rs-okno-licznik { position: fixed; top: 26px; left: 28px; margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.82); }
.rs .rs-okno-zamknij, .rs .rs-okno-zamknij:hover, .rs .rs-okno-zamknij:focus,
.rs .rs-okno-strzalka, .rs .rs-okno-strzalka:hover, .rs .rs-okno-strzalka:focus {
  position: fixed; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.12);
  box-shadow: none; color: #fff; cursor: pointer; touch-action: manipulation; transition: background-color 160ms ease; }
.rs .rs-okno-zamknij, .rs .rs-okno-zamknij:hover, .rs .rs-okno-zamknij:focus { top: 16px; right: 16px; width: 48px; height: 48px; }
.rs .rs-okno-strzalka, .rs .rs-okno-strzalka:hover, .rs .rs-okno-strzalka:focus { top: calc(50% - 28px); width: 56px; height: 56px; }
.rs .rs-okno-poprz, .rs .rs-okno-poprz:hover, .rs .rs-okno-poprz:focus { left: 20px; }
.rs .rs-okno-nast, .rs .rs-okno-nast:hover, .rs .rs-okno-nast:focus { right: 20px; }
.rs .rs-okno-strzalka[hidden] { display: none; }
.rs-okno-zamknij svg, .rs-okno-strzalka svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rs .rs-okno-zamknij:focus-visible, .rs .rs-okno-strzalka:focus-visible { outline: 3px solid var(--rs-zloto-jasne); outline-offset: 3px; }
.rs-okno[open] .rs-okno-kadr { animation: rs-okno-wejdz 240ms var(--rs-ease) both; }
.rs-okno[open]::backdrop { animation: rs-okno-tlo 200ms ease both; }
@keyframes rs-okno-wejdz { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
@keyframes rs-okno-tlo { from { opacity: 0; } }

/* Kafle 4:3 po dwa w rzędzie: obraz albo film na całym kaflu, podpis na dole na ciemnym przejściu. */
.rs-siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.rs-kafel figure { position: relative; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; border-radius: var(--rs-r); background: #dfe7dc;
  box-shadow: 0 1px 2px rgba(18, 63, 45, 0.06), 0 18px 36px -26px rgba(18, 63, 45, 0.55); }
.rs-media { position: absolute; inset: 0; }
.rs-media img, .rs-media video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.rs-media .rs-drugie { opacity: 0; transition: opacity 350ms ease; }
.rs-media[data-strona="drugie"] .rs-drugie { opacity: 1; }
.rs-podpis { position: absolute; inset: auto 0 0; z-index: 1; display: flex; flex-direction: column; gap: 3px; padding: 80px 26px 22px;
  background: linear-gradient(180deg, rgba(var(--rs-noc), 0) 0%, rgba(var(--rs-noc), 0.72) 58%, rgba(var(--rs-noc), 0.9) 100%); color: #fff; pointer-events: none; }
.rs-podpis strong { font-size: 22px; font-weight: 600; line-height: 1.25; }
.rs-podpis span { font-size: 15.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.88); }
/* Film z drona (Igor 03.10.2026: „na środku, tak jak zwykłe filmy na YouTube. Półprzeźroczysty, wyraźny przycisk… Jeśli
   puścimy play, to przycisk znika… jak jest stop, to przycisk jest widoczny”). Film nie startuje sam: na środku kafla
   półprzezroczyste koło z ikoną odtwarzania (biała obwódka czytelna na jasnym niebie i na ciemnym dachu). Środek kafla
   (pole przycisku) odtwarza i zatrzymuje; po starcie koło znika, pole zostaje (kursor rączki), reszta kafla powiększa.
   Fokus z klawiatury pokazuje koło także w trakcie filmu (ikona pauzy). Bez skryptu przycisku nie ma. To samo koło
   w oknie powiększenia (.rs-okno-film). */
.rs-film { display: none; }
.rs--js .rs-film { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center;
  width: min(176px, 48%); height: min(152px, 56%); transform: translate(-50%, -50%); }
.rs .rs-film, .rs .rs-film:hover, .rs .rs-film:focus, .rs .rs-okno-film, .rs .rs-okno-film:hover, .rs .rs-okno-film:focus { margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #fff; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; }
.rs .rs-film:focus-visible, .rs .rs-okno-film:focus-visible { outline: none; }
.rs-film-kolo { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(var(--rs-noc), 0.5);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85), 0 10px 28px -10px rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity 200ms var(--rs-ease), transform 200ms var(--rs-ease), background-color 160ms ease; }
.rs-film-kolo svg { width: 34px; height: 34px; fill: currentColor; }
.rs-film-kolo .rs-film-graj { margin-left: 4px; }  /* trójkąt optycznie na środku koła */
.rs-film[data-stan="gra"] .rs-film-graj, .rs-film:not([data-stan="gra"]) .rs-film-pauza,
.rs-okno-film[data-stan="gra"] .rs-film-graj, .rs-okno-film:not([data-stan="gra"]) .rs-film-pauza { display: none; }
.rs-film[data-stan="gra"] .rs-film-kolo, .rs-okno-film[data-stan="gra"] .rs-film-kolo { opacity: 0; transform: scale(0.9); }
.rs .rs-film:focus-visible .rs-film-kolo, .rs .rs-okno-film:focus-visible .rs-film-kolo { opacity: 1; transform: none;
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 4px rgba(var(--rs-noc), 0.9), 0 0 0 6px #fff; }
.rs .rs-film:active .rs-film-kolo, .rs .rs-okno-film:active .rs-film-kolo { transform: scale(0.94); }
/* w oknie powiększenia koło większe, w proporcji do dużego filmu */
.rs-okno-film .rs-film-kolo { width: 96px; height: 96px; }
.rs-okno-film .rs-film-kolo svg { width: 42px; height: 42px; }
/* Przełącznik jednostek zewnętrzna / wewnętrzna (Igor 29.09: mniejszy, nie może tak zasłaniać realizacji). Pastylka
   jak „Film z drona”: ciemna, półprzezroczysta, 28 px wysokości (wcześniej biała, 50 px, na telefonie 70% szerokości
   kafla), wybrana strona na białym. Cel dotyku 44 px daje przezroczyste przedłużenie przycisku w pionie (::after), tak
   jak margines plakietki filmu. Ten sam wygląd w oknie powiększenia. */
.rs-przelacznik { display: none; }
.rs--js .rs-przelacznik, .rs-okno-przelacznik { position: absolute; top: 16px; left: 16px; z-index: 2; display: flex; gap: 2px; padding: 2px;
  border-radius: 999px; background: rgba(var(--rs-noc), 0.72); }
.rs .rs-przelacznik button, .rs .rs-przelacznik button:hover, .rs .rs-przelacznik button:focus,
.rs .rs-okno-przelacznik button, .rs .rs-okno-przelacznik button:hover, .rs .rs-okno-przelacznik button:focus {
  position: relative; min-height: 24px; margin: 0; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; box-shadow: none;
  color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2; letter-spacing: normal; text-transform: none; cursor: pointer;
  touch-action: manipulation; user-select: none; transition: background-color 180ms ease, color 180ms ease; }
.rs .rs-przelacznik button::after, .rs .rs-okno-przelacznik button::after { content: ""; position: absolute; inset: -10px -1px; }
.rs .rs-przelacznik button[aria-pressed="true"], .rs .rs-okno-przelacznik button[aria-pressed="true"] { background: #fff; color: var(--rs-sosna); }
/* fokus jak na plakietce filmu: biały obrys na ciemnej obwódce, widoczny na jasnym i ciemnym zdjęciu */
.rs .rs-przelacznik button:focus-visible, .rs .rs-okno-przelacznik button:focus-visible { outline: 2px solid #fff; outline-offset: 2px;
  box-shadow: 0 0 0 6px rgb(var(--rs-noc)); }

/* Pas na końcu: wycena i telefon (jak pas dotacji w usługach). */
.rs-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: clamp(48px, 6vw, 80px);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px); border-radius: 18px; background: var(--rs-sosna); color: #fff;
  box-shadow: 0 24px 48px -32px rgba(18, 63, 45, 0.8); }
.rs-cta h2 { color: #fff; font-size: clamp(22px, 1vw + 17px, 30px); }
.rs-cta p { margin-top: 6px; color: rgba(255, 255, 255, 0.84); font-size: 16px; line-height: 1.5; }
.rs-cta-akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.rs-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 28px; border-radius: 10px;
  background: var(--rs-zloto); color: var(--rs-zloto-tekst); font-size: 16.5px; font-weight: 600; line-height: 1.2; text-decoration: none;
  touch-action: manipulation; transition: background-color 160ms ease, transform 160ms var(--rs-ease); }
.rs-btn:active { transform: scale(0.97); }
.rs-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border-radius: 6px; color: #fff; font-size: 17px; font-weight: 600; text-decoration: none; }
.rs-tel svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rs-cta :focus-visible { outline-color: var(--rs-zloto-jasne); }

@media (hover: hover) and (pointer: fine) {
  .rs .rs-filtry [role="radio"][aria-checked="false"]:hover { border-color: #b9c8b7; background: var(--rs-szalwia); }
  /* delikatne rozjaśnienie: biały napis zostaje ≥ 4,5:1 także nad białym zdjęciem (przy 0,18 wychodziło 4,4) */
  .rs .rs-przelacznik button[aria-pressed="false"]:hover, .rs .rs-okno-przelacznik button[aria-pressed="false"]:hover { background: rgba(255, 255, 255, 0.14); }
  .rs .rs-warianty [role="radio"][aria-checked="false"]:not([aria-disabled="true"]):hover { border-color: #b9c8b7; background: var(--rs-szalwia); }
  .rs .rs-film:not([data-stan="gra"]):hover .rs-film-kolo, .rs .rs-okno-film:not([data-stan="gra"]):hover .rs-film-kolo {
    background: rgba(var(--rs-noc), 0.68); transform: scale(1.04); }
  .rs .rs-wiecej:hover { background: var(--rs-sosna); color: #fff; }
  .rs .rs-powieksz:hover .rs-powieksz-ikona { opacity: 1; transform: none; }
  .rs .rs-okno-zamknij:hover, .rs .rs-okno-strzalka:hover { background: rgba(255, 255, 255, 0.24); }
  .rs-google:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--rs-linia), 0 14px 28px -16px rgba(18, 63, 45, 0.65); }
  .rs-btn:hover { background: var(--rs-zloto-2); }
  .rs a.rs-tel:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* Filtry węziej (Igor 29.09: wszystkie opcje widoczne naraz, bez przewijania w bok). Bez kropki wyboru (wybrany i tak
   jest na sośnie; z kropką pięć filtrów mieści się dopiero w pełnej szerokości siatki, od 1280 px); poniżej 1080 px
   bez ikony, żeby pięć filtrów mieściło się w jednym rzędzie od 960 px. */
@media (max-width: 1279px) {
  .rs .rs-filtry .rs-kropka { display: none; }
  .rs .rs-filtry [role="radio"], .rs .rs-filtry [role="radio"]:hover, .rs .rs-filtry [role="radio"]:focus { gap: 8px; padding: 0 16px 0 12px; }
}
@media (max-width: 1079px) {
  .rs .rs-filtry .rs-ikona { display: none; }
  .rs .rs-filtry [role="radio"], .rs .rs-filtry [role="radio"]:hover, .rs .rs-filtry [role="radio"]:focus { padding: 0 16px; }
}
/* Siatka 3 + 2 poniżej 960 px: sześć kolumn, trzy pierwsze filtry po dwie, dwa ostatnie po trzy, oba rzędy na całą
   szerokość; ikona wraca (miejsca jest dość), a przy przewijaniu w dół pasek się chowa (skrypt). */
@media (max-width: 959px) {
  .rs--js .rs-filtry { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .rs-filtry > [role="radio"] { grid-column: span 2; }
  .rs-filtry > [role="radio"]:nth-child(n+4) { grid-column: span 3; }
  .rs .rs-filtry [role="radio"], .rs .rs-filtry [role="radio"]:hover, .rs .rs-filtry [role="radio"]:focus { min-width: 0; min-height: 52px; gap: 6px; padding: 0 10px; font-size: 14px; }
  .rs .rs-filtry .rs-ikona { display: block; width: 22px; height: 22px; }
  .rs-filtry .rs-liczba { font-size: 13px; }
  .rs-grupa-naglowek { scroll-margin-top: calc(var(--rs-gora) + 136px); }
}
/* Telefon: w filtrze nazwa nad liczbą, bez ikony, więc trzy filtry mieszczą się w rzędzie od 360 px. 48 px mieści
   także nazwę w dwóch liniach (szersza czcionka zastępcza, powiększony tekst): wysokość paska się nie zmienia, a długie
   słowo najwyżej się złamie, nigdy nie wyjdzie poza ekran. */
@media (max-width: 599px) {
  .rs--js .rs-filtry { gap: 6px; padding: 8px 16px; }
  .rs .rs-filtry [role="radio"], .rs .rs-filtry [role="radio"]:hover, .rs .rs-filtry [role="radio"]:focus { flex-direction: column; gap: 1px; min-height: 48px;
    padding: 2px 4px; font-size: clamp(12.5px, 3.6vw, 14px); line-height: 1.1; }
  .rs .rs-filtry .rs-ikona { display: none; }
  .rs-filtry .rs-nazwa { overflow-wrap: anywhere; }
  .rs-filtry .rs-liczba { font-size: 12px; line-height: 1.1; }
}
/* Najwęższe ekrany (np. zewnętrzny ekran składanego telefonu): dwie kolumny, ostatni filtr na całą szerokość. */
@media (max-width: 359px) {
  .rs--js .rs-filtry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-filtry > [role="radio"], .rs-filtry > [role="radio"]:nth-child(n+4) { grid-column: auto; }
  .rs-filtry > [role="radio"]:last-child { grid-column: 1 / -1; }
}

/* Telefon: jedna kolumna, mniejsze podpisy; filtry z tym samym marginesem co kafle. */
@media (max-width: 699px) {
  .rs-wew { width: min(1200px, 100% - 32px); }
  .rs--js .rs-filtry { padding-inline: 16px; }
  .rs-siatka { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rs-podpis { padding: 56px 18px 16px; }
  .rs-podpis strong { font-size: 18px; }
  .rs-podpis span { font-size: 14.5px; }
  .rs-film-kolo { width: 64px; height: 64px; }
  .rs-film-kolo svg { width: 28px; height: 28px; }
  .rs--js .rs-przelacznik { top: 12px; left: 12px; }
  .rs-google { gap: 8px; padding: 8px 16px 8px 14px; }
  .rs-google img { width: 62px; }
  .rs-google-gwiazdki { width: 76px; }
  .rs-google-ocena { padding-left: 10px; font-size: 16.5px; }
  .rs-google-liczba { font-size: 14.5px; }
  .rs-cta-akcje, .rs-btn { width: 100%; }
  .rs .rs-wiecej, .rs .rs-wiecej:hover, .rs .rs-wiecej:focus { width: 100%; }
  /* okno na telefonie: zdjęcie na całą szerokość, strzałki na dole obok siebie */
  .rs-okno-scena { padding: 64px 0 96px; }
  .rs .rs-okno-kadr { border-radius: 0; }
  .rs-okno-podpis { padding: 56px 16px 14px; }
  .rs .rs-okno-podpis strong { font-size: 19px; }
  .rs .rs-okno-podpis span { font-size: 14.5px; }
  .rs .rs-okno-licznik { top: 26px; left: 16px; }
  .rs .rs-okno-strzalka, .rs .rs-okno-strzalka:hover, .rs .rs-okno-strzalka:focus { top: auto; bottom: 20px; }
  .rs .rs-okno-poprz, .rs .rs-okno-poprz:hover, .rs .rs-okno-poprz:focus { left: calc(50% - 72px); }
  .rs .rs-okno-nast, .rs .rs-okno-nast:hover, .rs .rs-okno-nast:focus { right: calc(50% - 72px); }
  .rs-okno-przelacznik { top: 12px; left: 12px; }
  .rs-tel { justify-content: center; width: 100%; }
}

/* Dotyk: ikona powiększenia widoczna zawsze (nie ma najechania). */
@media (hover: none) {
  .rs-powieksz-ikona { top: 12px; right: 12px; width: 36px; height: 36px; opacity: 0.92; transform: none; }
}

/* Warianty węziej niż 960 px: siatka równych przycisków (trzy kolumny, na telefonie dwie; przy nieparzystej liczbie
   na telefonie „Wszystkie” na całą szerokość) zamiast poszarpanej chmury pigułek (pompy zajmowały 4-5 rzędów); liczba
   rzędów nie zależy od czcionki. Długi wariant zawija się w dwie linie wewnątrz przycisku (liczba przy ostatnim
   słowie), więc przycisk jest zaokrąglonym prostokątem, nie pigułką; 48 px mieści dwie linie, więc wysokość się nie
   zmienia, gdy czcionka strony dojdzie później. */
@media (max-width: 959px) {
  .rs--js.rs--kategoria .rs-warianty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rs .rs-warianty [role="radio"], .rs .rs-warianty [role="radio"]:hover, .rs .rs-warianty [role="radio"]:focus { justify-content: center; min-width: 0;
    min-height: 48px; padding: 6px 10px; border-radius: 12px; line-height: 1.2; text-align: center; white-space: normal; }
}
@media (max-width: 699px) {
  .rs .rs-warianty [role="radio"], .rs .rs-warianty [role="radio"]:hover, .rs .rs-warianty [role="radio"]:focus { font-size: 13.5px; }
  .rs-warianty .rs-liczba { margin-left: 6px; font-size: 12.5px; }
}
@media (max-width: 599px) {
  .rs--js.rs--kategoria .rs-warianty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-warianty > [role="radio"]:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .rs .rs-filtry [role="radio"], .rs-kropka, .rs .rs-przelacznik button, .rs .rs-okno-przelacznik button, .rs-media .rs-drugie, .rs-google, .rs-btn, .rs--js .rs-filtry, .rs-film-kolo, .rs .rs-warianty [role="radio"], .rs .rs-wiecej, .rs-powieksz-ikona, .rs .rs-okno-zamknij, .rs .rs-okno-strzalka { transition: none; }
  .rs-okno[open] .rs-okno-kadr, .rs-okno[open]::backdrop { animation: none; }
}

/* Wtyczka aslandi-realizacje (03.10.2026): <main> szablonu na całą szerokość — kontener motywu (Astra .ast-container)
   jest flexem i bez tego zwężałby stronę do szerokości treści. */
.aslandi-rs-main { display: block; flex: 1 1 100%; width: 100%; min-width: 0; }